/**
 * Custom color definitions for the CRM user interface and registration and perhaps other pages
  - https://mdigi.tools/darken-color/
*/


/**
  Tampere specific styles - #21570

  Colors:
    - Base color: #9c629F
    - * Amount to darken: 50% -> #4e3150
    - #9c629F with 50% opacity -> rgb(156, 98, 159, 0.5)
**/

.registration_tampere .groupinfo-status-bar-static,
.registration_tampere .groupinfo-status-bar{
  height: 4px;
  background-color: #9c629F;
  margin: 0.5em 0 0.3em 0;
}

.registration_tampere .groupinfo-status-bar .filled{
  background-color: #9c629F;
  height: 100%;
  width: 0;
}

/* link */
.registration_tampere a,
.registration_tampere a:link
{
    color: #9c629F;
    text-decoration: underline;
}

.registration_tampere .top-container-header .header-logo{
    background-image: url("../pics/tres-logo-01.svg");
    background-repeat: no-repeat;
    /* background-position: center right; */
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 326px;
    align-self: flex-start;
}

.registration_tampere .top-container-header .container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 55px;
    background-color: white;
}

.registration_tampere .signup-field-row {
    padding: 5px 10px;
    border-left: 3px solid #9c629F;
}

.registration_tampere .todo .ryhmainfo.group-info {
    border: 0;
    border-left: 3px solid #9c629F;
    margin-left: 0;
    padding-left: 10px;
    border-radius: 0;
}

.registration_tampere .group-info-preview-container{
    padding-left: 15px;
    border-left: 3px solid #9c629F;
    margin-bottom: 1.5em;
}

.registration_tampere .signup-info-box:not(.under13){
    padding: 0 10px;

    border-left: 3px solid #9c629F;
}

.registration_tampere .guardian-info, .enrollee-email, .guardian-email{
    padding-left: 15px;
    border-left: 3px solid #9c629F;
    margin-bottom: 3em;
}


.registration_tampere .top-container .header-logo {
    background-image: url("../pics/tres-logo-01.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 326px;
    align-self: flex-start;
}


.crm_user_tampere .own-information-container,
.crm_user_tampere .signup-links-container,
.crm_user_tampere .password-change-container,
.crm_user_tampere .language-change-container {
    border-left: 4px solid #9c629F;
    padding-left: 1.3em;
    margin-bottom: 2em;
}

.crm_user_tampere .top-container-header .header-logo {
    background-image: url("../pics/tres-logo-01.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 326px;
    align-self: flex-start;
}

.crm_user_tampere .top-container-header .container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 55px;
    background-color: white;
}

.crm_user_tampere .top-container,
.registration_tampere .top-container {
    background-color: #9c629F;
    margin-bottom: 15px;
}

.crm_user_tampere .signup-form h1,
.crm_user_tampere .todo h1,
.crm_user_tampere .crm-user-registeration h1,
.crm_user_tampere .crm-user-container h1,
.registration_tampere .signup-form h1,
.registration_tampere .todo h1,
.registration_tampere .crm-user-registeration h1,
.registration_tampere .crm-user-container h1{
    color: #9c629F;
    font-size: 1.4em;
}

.crm_user_tampere .signup-form h2,
.crm_user_tampere .todo h2,
.crm_user_tampere .crm-user-registeration h2,
.crm_user_tampere .crm-user-container h2,
.registration_tampere .signup-form h2,
.registration_tampere .todo h2,
.registration_tampere .crm-user-registeration h2,
.registration_tampere .crm-user-container h2 {
    font-size: 1.2em;
    color: #9c629F;
}

.crm_user_tampere .btn-primary,
.registration_tampere .btn-primary {
    color: #fff;
    background-color: #9c629F;
    border-color: #9c629F;
    outline-color: #701849;
}

.crm_user_tampere .katrina-asiointi-box,
.registration_tampere .katrina-asiointi-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #9c629F;
    height: 200px;
    color: white;
    text-align: center;
    cursor: pointer;
    margin-bottom: 1em;
}

@media screen and (min-width: 768px){

    .top-container-header > .container{
        width: 670px;
        margin: 0 auto;
        color: white;
        background-color: white;
    }
}
/*

.crm_user_tampere .asiointi_header .logout a,
.crm_user_tampere .asiointi_header .logout .link_katrina,
.registration_tampere .asiointi_header .logout a,
.registration_tampere .asiointi_header .logout .link_katrina {
    color: white;
    text-decoration: none;
}
*/


.collection_tampere h1 {
    color: #9c629F;
    font-size: 1.4em;
}

.collection_tampere h2 {
    font-size: 1.2em;
    color: #9c629F;
}

.collection_tampere .btn-primary {
    color: #fff;
    background-color: #9c629F;
    border-color: #9c629F;
    outline-color: #4e3150;
    width: 80%;
    height: 100%;
}

.collection_tampere .btn-primary:not(:disabled):not(.disabled).active,
.collection_tampere .btn-primary:not(:disabled):not(.disabled):active,
.collection_tampere .show > .btn-primary.dropdown-toggle {
    background-color: #4e3150;
    border-color: #4e3150;
    box-shadow: 0 0 0 0.2rem rgb(156, 98, 159, 0.5);
    outline-color: #4e3150;
}
.collection_tampere .btn-primary:hover {
    background-color: #4e3150;
    border-color: #4e3150;
    outline-color: #4e3150;
}

.collection_tampere .btn-primary:not(:disabled):not(.disabled).active:focus,
.collection_tampere .btn-primary:not(:disabled):not(.disabled):focus,
.collection_tampere .btn-primary:not(:disabled):not(.disabled):active:focus,
.collection_tampere .show > .btn-primary.dropdown-toggle:focus {
    background-color: #4e3150;
    border-color: #4e3150;
    outline-color: #4e3150;
    box-shadow: 0 0 0 0.2rem rgb(156, 98, 159, 0.5)
}

.collection_tampere .top-container-header-tampere {
    background-color: white;
    margin-bottom: 5px;
}
.collection_tampere .top-container {
    background-color: #9c629F;
    margin-bottom: 15px;
}

.collection_tampere .container-logo {
    background-color: white;
    margin-bottom: 5px;
}

.collection_tampere a, 
.collection_tampere a:link,
.collection_tampere .link {
  color: #9c629F;
  text-decoration: underline; 
}

.collection_tampere .top-container-header-tampere .header-logo {
    background-image: url("../pics/tres-logo-01.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 326px;
    align-self: flex-start;
}

.collection_tampere .target-status-bar .filled {
    background-color: #9c629F !important;
}



/*
  Ylitornio specific styles #25857

  Colors:
    - Base color: #ed0b00
    - * Amount to darken: 50% -> #760500
    - #ed0b00 with 50% opacity -> rgb(118, 15, 0, 0.5)
*/

.registration_ylitornio .groupinfo-status-bar-static,
.registration_ylitornio .groupinfo-status-bar{
  height: 4px;
  background-color: #ed0b00;
  margin: 0.5em 0 0.3em 0;
}

.registration_ylitornio .groupinfo-status-bar .filled{
  background-color: #ed0b00;
  height: 100%;
  width: 0;
}

/* link */
.registration_ylitornio a,
.registration_ylitornio a:link
{
    color: #ed0b00;
    text-decoration: underline;
}

.registration_ylitornio .top-container-header .header-logo {
    background-image: url("../pics/ylitornio-logo.svg");
    background-repeat: no-repeat;
    /* background-position: center right; */
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 326px;
    align-self: flex-start;
    margin-bottom: 10px;
}

.registration_ylitornio .top-container-header .container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 55px;
    background-color: white;
}

.registration_ylitornio .signup-field-row {
    padding: 5px 10px;
    border-left: 3px solid #ed0b00;
}

.registration_ylitornio .todo .ryhmainfo.group-info {
    border: 0;
    border-left: 3px solid #ed0b00;
    margin-left: 0;
    padding-left: 10px;
    border-radius: 0;
}

.registration_ylitornio .group-info-preview-container{
    padding-left: 15px;
    border-left: 3px solid #ed0b00;
    margin-bottom: 1.5em;
}

.registration_ylitornio .signup-info-box:not(.under13){
    padding: 0 10px;

    border-left: 3px solid #ed0b00;
}

.registration_ylitornio .guardian-info, .enrollee-email, .guardian-email{
    padding-left: 15px;
    border-left: 3px solid #ed0b00;
    margin-bottom: 3em;
}

.crm_user_ylitornio .own-information-container,
.crm_user_ylitornio .signup-links-container,
.crm_user_ylitornio .password-change-container,
.crm_user_ylitornio .language-change-container {
    border-left: 4px solid #ed0b00;
    padding-left: 1.3em;
    margin-bottom: 2em;
}

.crm_user_ylitornio .top-container-header .header-logo {
    background-image: url("../pics/ylitornio-logo.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 326px;
    align-self: flex-start;
    margin-bottom: 10px;

}

.crm_user_ylitornio .top-container-header .container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 55px;
    background-color: white;
}

.crm_user_ylitornio .top-container,
.registration_ylitornio .top-container {
    background-color: #ed0b00;
    margin-bottom: 15px;
}

.crm_user_ylitornio .signup-form h1,
.crm_user_ylitornio .todo h1,
.crm_user_ylitornio .crm-user-registeration h1,
.crm_user_ylitornio .crm-user-container h1,
.registration_ylitornio .signup-form h1,
.registration_ylitornio .todo h1,
.registration_ylitornio .crm-user-registeration h1,
.registration_ylitornio .crm-user-container h1{
    color: #ed0b00;
    font-size: 1.4em;
}

.crm_user_ylitornio .signup-form h2,
.crm_user_ylitornio .todo h2,
.crm_user_ylitornio .crm-user-registeration h2,
.crm_user_ylitornio .crm-user-container h2,
.registration_ylitornio .signup-form h2,
.registration_ylitornio .todo h2,
.registration_ylitornio .crm-user-registeration h2,
.registration_ylitornio .crm-user-container h2 {
    font-size: 1.2em;
    color: #ed0b00;
}

.crm_user_ylitornio .btn-primary,
.registration_ylitornio .btn-primary {
    color: #fff;
    background-color: #ed0b00;
    border-color: #ed0b00;
    outline-color: #760500;
}

.crm_user_ylitornio .katrina-asiointi-box,
.registration_ylitornio .katrina-asiointi-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ed0b00;
    height: 200px;
    color: white;
    text-align: center;
    cursor: pointer;
    margin-bottom: 1em;
}

@media screen and (min-width: 768px){

    .top-container-header > .container{
        width: 670px;
        margin: 0 auto;
        color: white;
        background-color: white;
    }
}

.collection_ylitornio h1 {
    color: #ed0b00;
    font-size: 1.4em;
}

.collection_ylitornio h2 {
    font-size: 1.2em;
    color: #ed0b00;
}

.collection_ylitornio .btn-primary {
    color: #fff;
    background-color: #ed0b00;
    border-color: #ed0b00;
    outline-color: #ed0b00;
    width: 80%;
    height: 100%;
}

.collection_ylitornio .btn-primary:not(:disabled):not(.disabled).active,
.collection_ylitornio .btn-primary:not(:disabled):not(.disabled):active,
.collection_ylitornio .show > .btn-primary.dropdown-toggle {
    background-color: #760500;
    border-color: #760500;
    box-shadow: 0 0 0 0.2rem #760500;
    outline-color: #760500;
}
.collection_ylitornio .btn-primary:hover {
    background-color: #760500;
    border-color: #760500;
    outline-color: #760500;
}

.collection_ylitornio .btn-primary:not(:disabled):not(.disabled).active:focus,
.collection_ylitornio .btn-primary:not(:disabled):not(.disabled):focus,
.collection_ylitornio .btn-primary:not(:disabled):not(.disabled):active:focus,
.collection_ylitornio .show > .btn-primary.dropdown-toggle:focus {
    background-color: #760500;
    border-color: #760500;
    outline-color: #760500;
    box-shadow: 0 0 0 0.2rem rgb(118, 15, 0, 0.5);
}

.collection_ylitornio .top-container-header-ylitornio {
    background-color: white;
    margin-bottom: 5px;
}
.collection_ylitornio .top-container {
    background-color: #ed0b00;
    margin-bottom: 15px;
}

.collection_ylitornio .container-logo {
    background-color: white;
    margin-bottom: 5px;
}

.collection_ylitornio a, 
.collection_ylitornio a:link,
.collection_ylitornio .link {
  color: #ed0b00;
  text-decoration: underline; 
}

.collection_ylitornio .top-container-header-ylitornio .header-logo {
    background-image: url("../pics/ylitornio-logo.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 326px;
    align-self: flex-start;
    margin-top: 10px;
    margin-bottom: 10px;
}

.collection_ylitornio .target-status-bar .filled {
    background-color: #ed0b00 !important;
}


/*
  Helsinki specific styles - #26436

  Colors:
  - Base color: #005B98;
  - * Amount to darken: 50% -> #002d4c
  - #005B98 with 50% opacity -> rgb(0,45,76,0.5)
*/

.registration_helsinki .groupinfo-status-bar-static,
.registration_helsinki .groupinfo-status-bar{
  height: 4px;
  background-color: #005B98;
  margin: 0.5em 0 0.3em 0;
}

.registration_helsinki .groupinfo-status-bar .filled{
  background-color: #005B98;
  height: 100%;
  width: 0;
}

/* link */
.registration_helsinki a,
.registration_helsinki a:link
{
    color: #005B98;
    text-decoration: underline;
}

.registration_helsinki .top-container-header .header-logo{
    background-image: url("../pics/hki_logo.svg");
    background-repeat: no-repeat;
    /* background-position: center right; */
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 326px;
    align-self: flex-start;
    margin-bottom: 10px;
}

.registration_helsinki .top-container-header .container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 55px;
    background-color: white;
}

.registration_helsinki .signup-field-row {
    padding: 5px 10px;
    border-left: 3px solid #005B98;
}

.registration_helsinki .todo .ryhmainfo.group-info {
    border: 0;
    border-left: 3px solid #005B98;
    margin-left: 0;
    padding-left: 10px;
    border-radius: 0;
}

.registration_helsinki .group-info-preview-container{
    padding-left: 15px;
    border-left: 3px solid #005B98;
    margin-bottom: 1.5em;
}

.registration_helsinki .signup-info-box:not(.under13){
    padding: 0 10px;

    border-left: 3px solid #005B98;
}

.registration_helsinki .guardian-info, .enrollee-email, .guardian-email{
    padding-left: 15px;
    border-left: 3px solid #005B98;
    margin-bottom: 3em;
}



.crm_user_helsinki .own-information-container,
.crm_user_helsinki .signup-links-container,
.crm_user_helsinki .password-change-container,
.crm_user_helsinki .language-change-container {
    border-left: 4px solid #005B98;
    padding-left: 1.3em;
    margin-bottom: 2em;
}

.crm_user_helsinki .top-container-header .header-logo {
    background-image: url("../pics/hki_logo.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 326px;
    align-self: flex-start;
    margin-bottom: 10px;
}

.crm_user_helsinki .top-container-header .container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 55px;
    background-color: white;
}

.crm_user_helsinki .top-container,
.registration_helsinki .top-container {
    background-color: #005B98;
    margin-bottom: 15px;
}

.crm_user_helsinki .signup-form h1,
.crm_user_helsinki .todo h1,
.crm_user_helsinki .crm-user-registeration h1,
.crm_user_helsinki .crm-user-container h1,
.registration_helsinki .signup-form h1,
.registration_helsinki .todo h1,
.registration_helsinki .crm-user-registeration h1,
.registration_helsinki .crm-user-container h1{
    color: #005B98;
    font-size: 1.4em;
}

.crm_user_helsinki .signup-form h2,
.crm_user_helsinki .todo h2,
.crm_user_helsinki .crm-user-registeration h2,
.crm_user_helsinki .crm-user-container h2,
.registration_helsinki .signup-form h2,
.registration_helsinki .todo h2,
.registration_helsinki .crm-user-registeration h2,
.registration_helsinki .crm-user-container h2 {
    font-size: 1.2em;
    color: #005B98;
}

.crm_user_helsinki .btn-primary,
.registration_helsinki .btn-primary {
    color: #fff;
    background-color: #005B98;
    border-color: #005B98;
    outline-color: #002d4c;
}

.crm_user_helsinki .katrina-asiointi-box,
.registration_helsinki .katrina-asiointi-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #005B98;
    height: 200px;
    color: white;
    text-align: center;
    cursor: pointer;
    margin-bottom: 1em;
}



.collection_helsinki h1 {
    color: #005B98;
    font-size: 1.4em;
}

.collection_helsinki h2 {
    font-size: 1.2em;
    color: #005B98;
}

.collection_helsinki .btn-primary {
    color: #fff;
    background-color: #005B98;
    border-color: #005B98;
    outline-color: #005B98;
    width: 80%;
    height: 100%;
}

.collection_helsinki .btn-primary:not(:disabled):not(.disabled).active,
.collection_helsinki .btn-primary:not(:disabled):not(.disabled):active,
.collection_helsinki .show > .btn-primary.dropdown-toggle {
    background-color: #002d4c;
    border-color: #002d4c;
    box-shadow: 0 0 0 0.2rem #002d4c;
    outline-color: #002d4c;
}
.collection_helsinki .btn-primary:hover {
    background-color: #002d4c;
    border-color: #002d4c;
    outline-color: #002d4c;
}

.collection_helsinki .btn-primary:not(:disabled):not(.disabled).active:focus,
.collection_helsinki .btn-primary:not(:disabled):not(.disabled):focus,
.collection_helsinki .btn-primary:not(:disabled):not(.disabled):active:focus,
.collection_helsinki .show > .btn-primary.dropdown-toggle:focus {
    background-color: #002d4c;
    border-color: #002d4c;
    outline-color: #002d4c;
    box-shadow: 0 0 0 0.2rem rgb(0,45,76,0.5);
}

.collection_helsinki .top-container-header-helsinki {
    background-color: white;
    margin-bottom: 5px;
}
.collection_helsinki .top-container {
    background-color: #005B98;
    margin-bottom: 15px;
}

.collection_helsinki .container-logo {
    background-color: white;
    margin-bottom: 5px;
}

.collection_helsinki a, 
.collection_helsinki a:link,
.collection_helsinki .link {
  color: #005B98;
  text-decoration: underline; 
}

.collection_helsinki .top-container-header-helsinki .header-logo {
    background-image: url("../pics/hki_logo.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 326px;
    align-self: flex-start;
    margin-top: 10px;
    margin-bottom: 10px;
}

.collection_helsinki .target-status-bar .filled {
    background-color: #005B98 !important;
}