/**
 * 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 .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;
}

.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;
}

.registration_tampere .top-container-header .header-logo, 
.registration_tampere .top-container .header-logo,
.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;
}

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

.payments_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;
    margin-bottom: 10px;
}

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

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

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


/*
  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 .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;
}
.registration_ylitornio .top-container-header .header-logo,
.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;
}

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

.payments_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;
}

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

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

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


/*
  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 .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;
}

.registration_helsinki .top-container-header .header-logo,
.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;
}

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

.payments_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;
}

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

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

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

/*
  Vitec specific styles - #26544 

  Colors:
  - Base color: #171b3d
  - * Amount to darken: 50% -> #0b0d1e
  - #171b3d with 50% opacity -> rgb(5,6,15,0.5);
*/

/**
Registration page styles (ilmoittautuminen.class.php -> "header" function)
 - ilmoittautuminen/verkkomaksu/ -> ilmoittautuminen.php, maksa.php & rp.php
*/
.registration_vitec .groupinfo-status-bar-static,
.registration_vitec .groupinfo-status-bar {
    height: 4px;
    background-color: #171b3d;
    margin: 0.5em 0 0.3em 0;
}

.registration_vitec .groupinfo-status-bar .filled {
    background-color: #171b3d;
    height: 100%;
    width: 0;
}

.registration_vitec a,
.registration_vitec a:link
{
    color: #171b3d;
    text-decoration: underline;
}

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

.registration_vitec .signup-field-row {
    padding: 5px 10px;
    border-left: 3px solid #171b3d;
}

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

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

.registration_vitec .signup-info-box:not(.under13) {
    padding: 0 10px;
    border-left: 3px solid #171b3d;
}

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

/**
CRM user page styles (crm_user.class.php -> "pageHeader" function)
 - crm/ -> index.php & registration.php
*/
.crm_user_vitec .own-information-container,
.crm_user_vitec .signup-links-container,
.crm_user_vitec .password-change-container,
.crm_user_vitec .language-change-container {
    border-left: 4px solid #171b3d;
    padding-left: 1.3em;
    margin-bottom: 2em;
}

.registration_vitec .top-container-header .header-logo,
.crm_user_vitec .top-container-header .header-logo {
    background-image: url("../pics/vitec_logo.png");
    background-repeat: no-repeat;
    background-size: 150px 42px;
    width: 150px;
    height: 42px;
}

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

.crm_user_vitec .top-container,
.registration_vitec .top-container {
    background-color: #171b3d;
    margin-bottom: 15px;
}

.crm_user_vitec .signup-form h1,
.crm_user_vitec .todo h1,
.crm_user_vitec .crm-user-registeration h1,
.crm_user_vitec .crm-user-container h1,
.registration_vitec .signup-form h1,
.registration_vitec .todo h1,
.registration_vitec .crm-user-registeration h1,
.registration_vitec .crm-user-container h1 {
    color: #171b3d;
    font-size: 1.4em;
}

.crm_user_vitec .signup-form h2,
.crm_user_vitec .todo h2,
.crm_user_vitec .crm-user-registeration h2,
.crm_user_vitec .crm-user-container h2,
.registration_vitec .signup-form h2,
.registration_vitec .todo h2,
.registration_vitec .crm-user-registeration h2,
.registration_vitec .crm-user-container h2 {
    font-size: 1.2em;
    color: #171b3d;
}

.crm_user_vitec .btn-primary,
.registration_vitec .btn-primary {
    color: #fff;
    background-color: #171b3d;
    border-color: #171b3d;
    outline-color: #0b0d1e;
}

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

/**
Collection page styles (collection.class.php -> "paymentHeaders" function)
 - mod/web_payments/collection/ -> pay.php & rp.php
*/
.collection_vitec h1 {
    color: #171b3d;
    font-size: 1.4em;
}

.collection_vitec h2 {
    font-size: 1.2em;
    color: #171b3d;
}

.collection_vitec .btn-primary {
    color: #fff;
    background-color: #171b3d;
    border-color: #171b3d;
    outline-color: #171b3d;
    width: 80%;
    height: 100%;
}

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

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

.collection_vitec .top-container-header-vitec {
    background-color: white;
    margin-bottom: 5px;
}
.collection_vitec .top-container {
    background-color: #171b3d;
    margin-bottom: 15px;
}

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

.collection_vitec a, 
.collection_vitec a:link,
.collection_vitec .link {
    color: #171b3d;
    text-decoration: underline; 
}

.collection_vitec .top-container-header-vitec .header-logo {
    background-image: url("../pics/vitec_logo.png");
    background-repeat: no-repeat;
    background-size: 150px 42px;
    width: 150px;
    height: 42px;
    margin: 7px 0 6px 0;
}

.collection_vitec .target-status-bar .filled {
    background-color: #171b3d !important;
}

/**
Payment page styles (pay.class.php -> "header" function)
 - mod/web_payments/invoices/ -> pay.php & rp.php
 - mod/web_payments/reservations/ -> pay.php & rp.php
*/
.payments_vitec .top-container {
    background-color: #171b3d;
    margin-bottom: 15px;
}

.payments_vitec .top-container-header .header-logo {
    background-image: url("../pics/vitec_logo.png");
    background-repeat: no-repeat;
    background-size: 150px 42px;
    width: 150px;
    height: 42px;
    margin: 7px 0 6px 0;
}

.payments_vitec h1 {
    color: #171b3d;
    font-size: 1.4em;
}

.payments_vitec h2 {
    font-size: 1.2em;
    color: #171b3d;
}

.payments_vitec .btn-primary {
    color: #fff;
    background-color: #171b3d;
    border-color: #171b3d;
    outline-color: #171b3d;
    width: 80%;
    height: 100%;
}

/**
  Laukaa specific styles - #26631

  Colors:
    - Base color: #9C1974
    - * Amount to darken: 50% -> #4e0c3a
    - #9c629F with 50% opacity -> rgb(78, 12, 58, 0.5)
**/

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

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

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

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

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

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

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

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

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

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

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


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

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

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

.crm_user_laukaa .top-container,
.registration_laukaa .top-container {
    background-color: #9C1974;
    margin-bottom: 15px;
}

.crm_user_laukaa .signup-form h1,
.crm_user_laukaa .todo h1,
.crm_user_laukaa .crm-user-registeration h1,
.crm_user_laukaa .crm-user-container h1,
.registration_laukaa .signup-form h1,
.registration_laukaa .todo h1,
.registration_laukaa .crm-user-registeration h1,
.registration_laukaa .crm-user-container h1{
    color: #9C1974;
    font-size: 1.4em;
}

.crm_user_laukaa .signup-form h2,
.crm_user_laukaa .todo h2,
.crm_user_laukaa .crm-user-registeration h2,
.crm_user_laukaa .crm-user-container h2,
.registration_laukaa .signup-form h2,
.registration_laukaa .todo h2,
.registration_laukaa .crm-user-registeration h2,
.registration_laukaa .crm-user-container h2 {
    font-size: 1.2em;
    color: #9C1974;
}

.crm_user_laukaa .btn-primary,
.registration_laukaa .btn-primary {
    color: #fff;
    background-color: #9C1974;
    border-color: #9C1974;
    outline-color: #701849;
}

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

/**
Collection page styles (collection.class.php -> "paymentHeaders" function)
 - mod/web_payments/collection/ -> pay.php & rp.php
*/

.collection_laukaa h1 {
    color: #9C1974;
    font-size: 1.4em;
}

.collection_laukaa h2 {
    font-size: 1.2em;
    color: #9C1974;
}

.collection_laukaa .btn-primary {
    color: #fff;
    background-color: #9C1974;
    border-color: #9C1974;
    outline-color: #4e0c3a;
    width: 80%;
    height: 100%;
}

.collection_laukaa .btn-primary:not(:disabled):not(.disabled).active,
.collection_laukaa .btn-primary:not(:disabled):not(.disabled):active,
.collection_laukaa .show > .btn-primary.dropdown-toggle {
    background-color: #4e0c3a;
    border-color: #4e0c3a;
    box-shadow: 0 0 0 0.2rem rgb(78, 12, 58, 0.5);
    outline-color: #4e0c3a;
}
.collection_laukaa .btn-primary:hover {
    background-color: #4e0c3a;
    border-color: #4e0c3a;
    outline-color: #4e0c3a;
}

.collection_laukaa .btn-primary:not(:disabled):not(.disabled).active:focus,
.collection_laukaa .btn-primary:not(:disabled):not(.disabled):focus,
.collection_laukaa .btn-primary:not(:disabled):not(.disabled):active:focus,
.collection_laukaa .show > .btn-primary.dropdown-toggle:focus {
    background-color: #4e0c3a;
    border-color: #4e0c3a;
    outline-color: #4e0c3a;
    box-shadow: 0 0 0 0.2rem rgb(78, 12, 58, 0.5);
}

.collection_laukaa .top-container-header-laukaa {
    background-color: white;
    margin-bottom: 5px;
}
.collection_laukaa .top-container {
    background-color: #9C1974;
    margin-bottom: 15px;
}

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

.collection_laukaa a, 
.collection_laukaa a:link,
.collection_laukaa .link {
  color: #9C1974;
  text-decoration: underline; 
}

.collection_laukaa .top-container-header-laukaa .header-logo {
    background-image: url("../pics/laukaa_logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 326px;
    align-self: flex-start;
}

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

/**
Payment page styles (pay.class.php -> "header" function)
 - mod/web_payments/invoices/ -> pay.php & rp.php
 - mod/web_payments/reservations/ -> pay.php & rp.php
*/

.payments_laukaa .top-container {
    background-color: #9C1974;
    margin-bottom: 15px;
}

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

.payments_laukaa h1 {
    color: #9C1974;
    font-size: 1.4em;
}

.payments_laukaa h2 {
    font-size: 1.2em;
    color: #9C1974;
}

.payments_laukaa .btn-primary {
    color: #fff;
    background-color: #9C1974;
    border-color: #9C1974;
    outline-color: #9C1974;
    width: 80%;
    height: 100%;
}

/**
  Rauma specific styles - #26716

  Colors:
    - Base color: #112077
    - * Amount to darken: 50% -> #08103b
    - #112077 with 50% opacity -> rgb(156, 98, 159, 0.5)
**/

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

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

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

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

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

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

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

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

    border-left: 3px solid #112077;
}

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

.registration_rauma .top-container-header .header-logo,
.crm_user_rauma .top-container-header .header-logo {
    background-image: url("../pics/rauma_logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 326px;
    align-self: flex-start;
}

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

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

.crm_user_rauma .top-container,
.registration_rauma .top-container {
    background-color: #112077;
    margin-bottom: 15px;
}

.crm_user_rauma .signup-form h1,
.crm_user_rauma .todo h1,
.crm_user_rauma .crm-user-registeration h1,
.crm_user_rauma .crm-user-container h1,
.registration_rauma .signup-form h1,
.registration_rauma .todo h1,
.registration_rauma .crm-user-registeration h1,
.registration_rauma .crm-user-container h1 {
    color: #112077;
    font-size: 1.4em;
}

.crm_user_rauma .signup-form h2,
.crm_user_rauma .todo h2,
.crm_user_rauma .crm-user-registeration h2,
.crm_user_rauma .crm-user-container h2,
.registration_rauma .signup-form h2,
.registration_rauma .todo h2,
.registration_rauma .crm-user-registeration h2,
.registration_rauma .crm-user-container h2 {
    font-size: 1.2em;
    color: #112077;
}

.crm_user_rauma .btn-primary,
.registration_rauma .btn-primary {
    color: #fff;
    background-color: #112077;
    border-color: #112077;
    outline-color: #08103b;
}

.crm_user_rauma .katrina-asiointi-box,
.registration_rauma .katrina-asiointi-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #112077;
    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;
    }
}

/**
  Helsinki ort:in specific styles - #26694

  Colors:
    - Base color: #c8a01e
    - * Amount to darken: 50% -> #64500f
    - #c8a01e with 50% opacity -> rgb(200, 160, 30, 0.5)
**/

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

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

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

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

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

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

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

.registration_helsinki_ort .signup-info-box:not(.under13) {
    padding: 0 10px;
    border-left: 3px solid #c8a01e;
}

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

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

.registration_helsinki_ort .btn-primary:not(:disabled):not(.disabled).active:focus,
.registration_helsinki_ort .btn-primary:not(:disabled):not(.disabled):focus,
.registration_helsinki_ort .btn-primary:not(:disabled):not(.disabled):active:focus,
.registration_helsinki_ort .show>.btn-primary.dropdown-toggle:focus {
    background-color: #c8a01e;
    border-color: #c8a01e;
    outline-color: #64500f;
    box-shadow: 0 0 0 0.2rem rgb(200, 166, 44, 0.5);
}

.registration_helsinki_ort .top-container-header .header-logo,
.crm_user_helsinki_ort .top-container-header .header-logo {
    background-image: url("../pics/hos_logo.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 326px;
    align-self: flex-start;
}

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

.crm_user_helsinki_ort .top-container,
.registration_helsinki_ort .top-container {
    background-color: #c8a01e;
    margin-bottom: 15px;
}

.crm_user_helsinki_ort .signup-form h1,
.crm_user_helsinki_ort .todo h1,
.crm_user_helsinki_ort .crm-user-registeration h1,
.crm_user_helsinki_ort .crm-user-container h1,
.registration_helsinki_ort .signup-form h1,
.registration_helsinki_ort .todo h1,
.registration_helsinki_ort .crm-user-registeration h1,
.registration_helsinki_ort .crm-user-container h1 {
    color: #c8a01e;
    font-size: 1.4em;
}

.crm_user_helsinki_ort .signup-form h2,
.crm_user_helsinki_ort .todo h2,
.crm_user_helsinki_ort .crm-user-registeration h2,
.crm_user_helsinki_ort .crm-user-container h2,
.registration_helsinki_ort .signup-form h2,
.registration_helsinki_ort .todo h2,
.registration_helsinki_ort .crm-user-registeration h2,
.registration_helsinki_ort .crm-user-container h2 {
    font-size: 1.2em;
    color: #c8a01e;
}

.crm_user_helsinki_ort .btn-primary,
.registration_helsinki_ort .btn-primary {
    color: #fff;
    background-color: #c8a01e;
    border-color: #c8a01e;
    outline-color: #64500f;
}

.crm_user_helsinki_ort .katrina-asiointi-box,
.registration_helsinki_ort .katrina-asiointi-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #c8a01e;
    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;
    }
}

/**
  Nokia specific styles - #26728

  Colors:
    - Base color: #004718
    - * Amount to darken: 50% -> #00230c
    - #004718 with 50% opacity -> rgb(0, 71, 24, 0.5)
**/

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

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

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

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

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

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

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

.registration_nokia .signup-info-box:not(.under13) {
    padding: 0 10px;
    border-left: 3px solid #004718;
}

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

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

.registration_nokia .btn-primary:not(:disabled):not(.disabled).active:focus,
.registration_nokia .btn-primary:not(:disabled):not(.disabled):focus,
.registration_nokia .btn-primary:not(:disabled):not(.disabled):active:focus,
.registration_nokia .show>.btn-primary.dropdown-toggle:focus {
    background-color: #004718;
    border-color: #004718;
    outline-color: #00230c;
    box-shadow: 0 0 0 0.2rem rgb(0, 71, 24, 0.5);
}

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

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

.crm_user_nokia .top-container,
.registration_nokia .top-container {
    background-color: #004718;
    margin-bottom: 15px;
}

.crm_user_nokia .signup-form h1,
.crm_user_nokia .todo h1,
.crm_user_nokia .crm-user-registeration h1,
.crm_user_nokia .crm-user-container h1,
.registration_nokia .signup-form h1,
.registration_nokia .todo h1,
.registration_nokia .crm-user-registeration h1,
.registration_nokia .crm-user-container h1 {
    color: #004718;
    font-size: 1.4em;
}

.crm_user_nokia .signup-form h2,
.crm_user_nokia .todo h2,
.crm_user_nokia .crm-user-registeration h2,
.crm_user_nokia .crm-user-container h2,
.registration_nokia .signup-form h2,
.registration_nokia .todo h2,
.registration_nokia .crm-user-registeration h2,
.registration_nokia .crm-user-container h2 {
    font-size: 1.2em;
    color: #004718;
}

.crm_user_nokia .btn-primary,
.registration_nokia .btn-primary {
    color: #fff;
    background-color: #004718;
    border-color: #004718;
    outline-color: #00230c
}

.crm_user_nokia .katrina-asiointi-box,
.registration_nokia .katrina-asiointi-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #004718;
    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;
    }
}

/**
  Akaa specific styles - #26739

  Colors:
    - Base color: #B78B20
    - * Amount to darken: 50% -> #5b4510
    - #c8a01e with 50% opacity -> rgb(183, 139, 32, 0.5)
**/

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

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

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

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

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

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

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

.registration_akaa .signup-info-box:not(.under13) {
    padding: 0 10px;
    border-left: 3px solid #B78B20;
}

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

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

.registration_akaa .btn-primary:not(:disabled):not(.disabled).active:focus,
.registration_akaa .btn-primary:not(:disabled):not(.disabled):focus,
.registration_akaa .btn-primary:not(:disabled):not(.disabled):active:focus,
.registration_akaa .show>.btn-primary.dropdown-toggle:focus {
    background-color: #B78B20;
    border-color: #B78B20;
    outline-color: #5b4510;
    box-shadow: 0 0 0 0.2rem rgb(183, 139, 32, 0.5);
}

.registration_akaa .top-container-header .header-logo,
.crm_user_akaa .top-container-header .header-logo {
    background-image: url("../pics/akaa_logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 326px;
    align-self: flex-start;
}

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

.crm_user_akaa .top-container,
.registration_akaa .top-container {
    background-color: #B78B20;
    margin-bottom: 15px;
}

.crm_user_akaa .signup-form h1,
.crm_user_akaa .todo h1,
.crm_user_akaa .crm-user-registeration h1,
.crm_user_akaa .crm-user-container h1,
.registration_akaa .signup-form h1,
.registration_akaa .todo h1,
.registration_akaa .crm-user-registeration h1,
.registration_akaa .crm-user-container h1 {
    color: #B78B20;
    font-size: 1.4em;
}

.crm_user_akaa .signup-form h2,
.crm_user_akaa .todo h2,
.crm_user_akaa .crm-user-registeration h2,
.crm_user_akaa .crm-user-container h2,
.registration_akaa .signup-form h2,
.registration_akaa .todo h2,
.registration_akaa .crm-user-registeration h2,
.registration_akaa .crm-user-container h2 {
    font-size: 1.2em;
    color: #B78B20;
}

.crm_user_akaa .btn-primary,
.registration_akaa .btn-primary {
    color: #fff;
    background-color: #B78B20;
    border-color: #B78B20;
    outline-color: #5b4510;
}

.crm_user_akaa .katrina-asiointi-box,
.registration_akaa .katrina-asiointi-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #B78B20;
    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;
    }
}

/**
  Jyväskylä specific styles - #26738

  Colors:
    - Base color: #C24700
    - * Amount to darken: 50% -> #612300
    - #c8a01e with 50% opacity -> rgb(194, 71, 0, 0.5)
**/

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

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

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

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

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

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

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

.registration_jyvaskyla .signup-info-box:not(.under13) {
    padding: 0 10px;
    border-left: 3px solid #C24700;
}

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

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

.registration_jyvaskyla .btn-primary:not(:disabled):not(.disabled).active:focus,
.registration_jyvaskyla .btn-primary:not(:disabled):not(.disabled):focus,
.registration_jyvaskyla .btn-primary:not(:disabled):not(.disabled):active:focus,
.registration_jyvaskyla .show>.btn-primary.dropdown-toggle:focus {
    background-color: #C24700;
    border-color: #C24700;
    outline-color: #612300;
    box-shadow: 0 0 0 0.2rem rgb(194, 71, 0, 0.5);
}

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

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

.crm_user_jyvaskyla .top-container,
.registration_jyvaskyla .top-container {
    background-color: #C24700;
    margin-bottom: 15px;
}

.crm_user_jyvaskyla .signup-form h1,
.crm_user_jyvaskyla .todo h1,
.crm_user_jyvaskyla .crm-user-registeration h1,
.crm_user_jyvaskyla .crm-user-container h1,
.registration_jyvaskyla .signup-form h1,
.registration_jyvaskyla .todo h1,
.registration_jyvaskyla .crm-user-registeration h1,
.registration_jyvaskyla .crm-user-container h1 {
    color: #C24700;
    font-size: 1.4em;
}

.crm_user_jyvaskyla .signup-form h2,
.crm_user_jyvaskyla .todo h2,
.crm_user_jyvaskyla .crm-user-registeration h2,
.crm_user_jyvaskyla .crm-user-container h2,
.registration_jyvaskyla .signup-form h2,
.registration_jyvaskyla .todo h2,
.registration_jyvaskyla .crm-user-registeration h2,
.registration_jyvaskyla .crm-user-container h2 {
    font-size: 1.2em;
    color: #C24700;
}

.crm_user_jyvaskyla .btn-primary,
.registration_jyvaskyla .btn-primary {
    color: #fff;
    background-color: #C24700;
    border-color: #C24700;
    outline-color: #612300;
}

.crm_user_jyvaskyla .katrina-asiointi-box,
.registration_jyvaskyla .katrina-asiointi-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #C24700;
    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_jyvaskyla h1 {
    color: #C24700;
    font-size: 1.4em;
}

.collection_jyvaskyla h2 {
    font-size: 1.2em;
    color: #C24700;
}

.collection_jyvaskyla .btn-primary {
    color: #fff;
    background-color: #C24700;
    border-color: #C24700;
    outline-color: #612300;
    width: 80%;
    height: 100%;
}

.collection_jyvaskyla .btn-primary:not(:disabled):not(.disabled).active,
.collection_jyvaskyla .btn-primary:not(:disabled):not(.disabled):active,
.collection_jyvaskyla .show > .btn-primary.dropdown-toggle {
    background-color: #C24700;
    border-color: #C24700;
    box-shadow: 0 0 0 0.2rem rgb(194, 71, 0, 0.5);
    outline-color: #C24700;
}
.collection_jyvaskyla .btn-primary:hover {
    background-color: #C24700;
    border-color: #C24700;
    outline-color: #C24700;
}

.collection_jyvaskyla .btn-primary:not(:disabled):not(.disabled).active:focus,
.collection_jyvaskyla .btn-primary:not(:disabled):not(.disabled):focus,
.collection_jyvaskyla .btn-primary:not(:disabled):not(.disabled):active:focus,
.collection_jyvaskyla .show > .btn-primary.dropdown-toggle:focus {
    background-color: #C24700;
    border-color: #C24700;
    outline-color: #C24700;
    box-shadow: 0 0 0 0.2rem rgb(194, 71, 0, 0.5)
}

.collection_jyvaskyla .top-container-header-jyvaskyla {
    background-color: white;
    margin-bottom: 5px;
}
.collection_jyvaskyla .top-container {
    background-color: #C24700;
    margin-bottom: 15px;
}

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

.collection_jyvaskyla a, 
.collection_jyvaskyla a:link,
.collection_jyvaskyla .link {
  color: #C24700;
  text-decoration: underline; 
}

.collection_jyvaskyla .top-container-header-jyvaskyla .header-logo {
    background-image: url("../pics/jkl_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: 20px;
    margin-bottom: 20px;
}

.collection_jyvaskyla .target-status-bar .filled {
    background-color: #C24700 !important;
}

.payments_jyvaskyla .top-container {
    background-color: #C24700;
    margin-bottom: 15px;
}

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

.payments_jyvaskyla h1 {
    color: #C24700;
    font-size: 1.4em;
}

.payments_jyvaskyla h2 {
    font-size: 1.2em;
    color: #C24700;
}

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

/**
  Ikaalinen specific styles - #26730

  Colors:
    - Base color: #0094ff
    - * Amount to darken: 50% -> #004a80
    - #c8a01e with 50% opacity -> rgb(0, 148, 255, 0.5)
**/

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

.registration_ikaalinen .groupinfo-status-bar .filled {
  background-color: #0094ff;
  height: 100%;
  width: 0;
}

/* link */
.registration_ikaalinen a,
.registration_ikaalinen a:link {
    color: #0094ff;
    text-decoration: underline;
}

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

.registration_ikaalinen .signup-field-row {
    padding: 5px 10px;
    border-left: 3px solid #0094ff;
}

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

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

.registration_ikaalinen .signup-info-box:not(.under13) {
    padding: 0 10px;
    border-left: 3px solid #0094ff;
}

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

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

.registration_ikaalinen .btn-primary:not(:disabled):not(.disabled).active:focus,
.registration_ikaalinen .btn-primary:not(:disabled):not(.disabled):focus,
.registration_ikaalinen .btn-primary:not(:disabled):not(.disabled):active:focus,
.registration_ikaalinen .show>.btn-primary.dropdown-toggle:focus {
    background-color: #0094ff;
    border-color: #0094ff;
    outline-color: #004a80;
    box-shadow: 0 0 0 0.2rem rgb(0, 148, 255, 0.5);
}

.registration_ikaalinen .top-container-header .header-logo,
.crm_user_ikaalinen .top-container-header .header-logo {
    background-image: url("../pics/ikaalinen_logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 326px;
    align-self: flex-start;
}

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

.crm_user_ikaalinen .top-container,
.registration_ikaalinen .top-container {
    background-color: #0094ff;
    margin-bottom: 15px;
}

.crm_user_ikaalinen .signup-form h1,
.crm_user_ikaalinen .todo h1,
.crm_user_ikaalinen .crm-user-registeration h1,
.crm_user_ikaalinen .crm-user-container h1,
.registration_ikaalinen .signup-form h1,
.registration_ikaalinen .todo h1,
.registration_ikaalinen .crm-user-registeration h1,
.registration_ikaalinen .crm-user-container h1 {
    color: #0094ff;
    font-size: 1.4em;
}

.crm_user_ikaalinen .signup-form h2,
.crm_user_ikaalinen .todo h2,
.crm_user_ikaalinen .crm-user-registeration h2,
.crm_user_ikaalinen .crm-user-container h2,
.registration_ikaalinen .signup-form h2,
.registration_ikaalinen .todo h2,
.registration_ikaalinen .crm-user-registeration h2,
.registration_ikaalinen .crm-user-container h2 {
    font-size: 1.2em;
    color: #0094ff;
}

.crm_user_ikaalinen .btn-primary,
.registration_ikaalinen .btn-primary {
    color: #fff;
    background-color: #0094ff;
    border-color: #0094ff;
    outline-color: #004a80;
}

.crm_user_ikaalinen .katrina-asiointi-box,
.registration_ikaalinen .katrina-asiointi-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0094ff;
    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;
    }
}

/**
  Alavus specific styles - #26701

  Colors:
    - Base color: #ff7700
    - * Amount to darken: 50% -> #803c00
    - #c8a01e with 50% opacity -> rgb(255, 119, 0, 0.5)
**/

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

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

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

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

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

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

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

.registration_alavus .signup-info-box:not(.under13) {
    padding: 0 10px;
    border-left: 3px solid #ff7700;
}

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

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

.registration_alavus .btn-primary:not(:disabled):not(.disabled).active:focus,
.registration_alavus .btn-primary:not(:disabled):not(.disabled):focus,
.registration_alavus .btn-primary:not(:disabled):not(.disabled):active:focus,
.registration_alavus .show>.btn-primary.dropdown-toggle:focus {
    background-color: #ff7700;
    border-color: #ff7700;
    outline-color: #803c00;
    box-shadow: 0 0 0 0.2rem rgb(255, 119, 0, 0.5);
}

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

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

.crm_user_alavus .top-container,
.registration_alavus .top-container {
    background-color: #ff7700;
    margin-bottom: 15px;
}

.crm_user_alavus .signup-form h1,
.crm_user_alavus .todo h1,
.crm_user_alavus .crm-user-registeration h1,
.crm_user_alavus .crm-user-container h1,
.registration_alavus .signup-form h1,
.registration_alavus .todo h1,
.registration_alavus .crm-user-registeration h1,
.registration_alavus .crm-user-container h1 {
    color: #ff7700;
    font-size: 1.4em;
}

.crm_user_alavus .signup-form h2,
.crm_user_alavus .todo h2,
.crm_user_alavus .crm-user-registeration h2,
.crm_user_alavus .crm-user-container h2,
.registration_alavus .signup-form h2,
.registration_alavus .todo h2,
.registration_alavus .crm-user-registeration h2,
.registration_alavus .crm-user-container h2 {
    font-size: 1.2em;
    color: #ff7700;
}

.crm_user_alavus .btn-primary,
.registration_alavus .btn-primary {
    color: #fff;
    background-color: #ff7700;
    border-color: #ff7700;
    outline-color: #803c00;
}

.crm_user_alavus .katrina-asiointi-box,
.registration_alavus .katrina-asiointi-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ff7700;
    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;
    }
}

/**
  Kangasala specific styles - #26780

  Colors:
    - Base color: #ff8429
    - * Amount to darken: 50% -> #943f00
    - #c8a01e with 50% opacity -> rgb(255, 132, 41, 0.5)
**/

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

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

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

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

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

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

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

.registration_kangasala .signup-info-box:not(.under13) {
    padding: 0 10px;
    border-left: 3px solid #ff8429;
}

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

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

.registration_kangasala .btn-primary:not(:disabled):not(.disabled).active:focus,
.registration_kangasala .btn-primary:not(:disabled):not(.disabled):focus,
.registration_kangasala .btn-primary:not(:disabled):not(.disabled):active:focus,
.registration_kangasala .show>.btn-primary.dropdown-toggle:focus {
    background-color: #ff8429;
    border-color: #ff8429;
    outline-color: #943f00;
    box-shadow: 0 0 0 0.2rem rgb(255, 132, 41, 0.5);
}

.registration_kangasala .top-container-header .header-logo,
.crm_user_kangasala .top-container-header .header-logo {
    background-image: url("../pics/kangasala_logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 326px;
    align-self: flex-start;
}

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

.crm_user_kangasala .top-container,
.registration_kangasala .top-container {
    background-color: #ff8429;
    margin-bottom: 15px;
}

.crm_user_kangasala .signup-form h1,
.crm_user_kangasala .todo h1,
.crm_user_kangasala .crm-user-registeration h1,
.crm_user_kangasala .crm-user-container h1,
.registration_kangasala .signup-form h1,
.registration_kangasala .todo h1,
.registration_kangasala .crm-user-registeration h1,
.registration_kangasala .crm-user-container h1 {
    color: #ff8429;
    font-size: 1.4em;
}

.crm_user_kangasala .signup-form h2,
.crm_user_kangasala .todo h2,
.crm_user_kangasala .crm-user-registeration h2,
.crm_user_kangasala .crm-user-container h2,
.registration_kangasala .signup-form h2,
.registration_kangasala .todo h2,
.registration_kangasala .crm-user-registeration h2,
.registration_kangasala .crm-user-container h2 {
    font-size: 1.2em;
    color: #ff8429;
}

.crm_user_kangasala .btn-primary,
.registration_kangasala .btn-primary {
    color: #fff;
    background-color: #ff8429;
    border-color: #ff8429;
    outline-color: #943f00;
}

.crm_user_kangasala .katrina-asiointi-box,
.registration_kangasala .katrina-asiointi-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ff8429;
    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;
    }
}

/**
  Joensuu specific styles - #26785

  Colors:
    - Base color: #028342
    - * Amount to darken: 50% -> #014121
    - #c8a01e with 50% opacity -> rgb(2, 131, 66, 0.5)
**/

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

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

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

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

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

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

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

.registration_joensuu .signup-info-box:not(.under13) {
    padding: 0 10px;
    border-left: 3px solid #028342;
}

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

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

.registration_joensuu .btn-primary:not(:disabled):not(.disabled).active:focus,
.registration_joensuu .btn-primary:not(:disabled):not(.disabled):focus,
.registration_joensuu .btn-primary:not(:disabled):not(.disabled):active:focus,
.registration_joensuu .show>.btn-primary.dropdown-toggle:focus {
    background-color: #028342;
    border-color: #028342;
    outline-color: #014121;
    box-shadow: 0 0 0 0.2rem rgb(2, 131, 66, 0.5);
}

.registration_joensuu .top-container-header .header-logo,
.crm_user_joensuu .top-container-header .header-logo {
    background-image: url("../pics/joensuu_logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 326px;
    align-self: flex-start;
}

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

.crm_user_joensuu .top-container,
.registration_joensuu .top-container {
    background-color: #028342;
    margin-bottom: 15px;
}

.crm_user_joensuu .signup-form h1,
.crm_user_joensuu .todo h1,
.crm_user_joensuu .crm-user-registeration h1,
.crm_user_joensuu .crm-user-container h1,
.registration_joensuu .signup-form h1,
.registration_joensuu .todo h1,
.registration_joensuu .crm-user-registeration h1,
.registration_joensuu .crm-user-container h1 {
    color: #028342;
    font-size: 1.4em;
}

.crm_user_joensuu .signup-form h2,
.crm_user_joensuu .todo h2,
.crm_user_joensuu .crm-user-registeration h2,
.crm_user_joensuu .crm-user-container h2,
.registration_joensuu .signup-form h2,
.registration_joensuu .todo h2,
.registration_joensuu .crm-user-registeration h2,
.registration_joensuu .crm-user-container h2 {
    font-size: 1.2em;
    color: #028342;
}

.crm_user_joensuu .btn-primary,
.registration_joensuu .btn-primary {
    color: #fff;
    background-color: #028342;
    border-color: #028342;
    outline-color: #014121;
}

.crm_user_joensuu .katrina-asiointi-box,
.registration_joensuu .katrina-asiointi-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #028342;
    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;
    }
}

/**
  Kuopio specific styles - #26786

  Colors:
    - Base color: #1D36C6
    - * Amount to darken: 50% -> #0F1B63
    - #c8a01e with 50% opacity -> rgb(29, 54, 198, 0.5)
**/

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

.registration_kuopio .groupinfo-status-bar .filled {
  background-color: #1D36C6;
  height: 100%;
  width: 0;
}

/* link */
.registration_kuopio a,
.registration_kuopio a:link {
    color: #1D36C6;
    text-decoration: underline;
}

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

.registration_kuopio .signup-field-row {
    padding: 5px 10px;
    border-left: 3px solid #1D36C6;
}

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

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

.registration_kuopio .signup-info-box:not(.under13) {
    padding: 0 10px;
    border-left: 3px solid #1D36C6;
}

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

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

.registration_kuopio .btn-primary:not(:disabled):not(.disabled).active:focus,
.registration_kuopio .btn-primary:not(:disabled):not(.disabled):focus,
.registration_kuopio .btn-primary:not(:disabled):not(.disabled):active:focus,
.registration_kuopio .show>.btn-primary.dropdown-toggle:focus {
    background-color: #1D36C6;
    border-color: #1D36C6;
    outline-color: #0F1B63;
    box-shadow: 0 0 0 0.2rem rgb(29, 54, 198, 0.5);
}

.registration_kuopio .top-container-header .header-logo,
.crm_user_kuopio .top-container-header .header-logo {
    background-image: url("../pics/kuopio_logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 326px;
    align-self: flex-start;
}

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

.crm_user_kuopio .top-container,
.registration_kuopio .top-container {
    background-color: #1D36C6;
    margin-bottom: 15px;
}

.crm_user_kuopio .signup-form h1,
.crm_user_kuopio .todo h1,
.crm_user_kuopio .crm-user-registeration h1,
.crm_user_kuopio .crm-user-container h1,
.registration_kuopio .signup-form h1,
.registration_kuopio .todo h1,
.registration_kuopio .crm-user-registeration h1,
.registration_kuopio .crm-user-container h1 {
    color: #1D36C6;
    font-size: 1.4em;
}

.crm_user_kuopio .signup-form h2,
.crm_user_kuopio .todo h2,
.crm_user_kuopio .crm-user-registeration h2,
.crm_user_kuopio .crm-user-container h2,
.registration_kuopio .signup-form h2,
.registration_kuopio .todo h2,
.registration_kuopio .crm-user-registeration h2,
.registration_kuopio .crm-user-container h2 {
    font-size: 1.2em;
    color: #1D36C6;
}

.crm_user_kuopio .btn-primary,
.registration_kuopio .btn-primary {
    color: #fff;
    background-color: #1D36C6;
    border-color: #1D36C6;
    outline-color: #0F1B63;
}

.crm_user_kuopio .katrina-asiointi-box,
.registration_kuopio .katrina-asiointi-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1D36C6;
    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;
    }
}

/**
  Kirkkonummi specific styles - #26890

  Colors:
    - Base color: #9bc04e
    - * Amount to darken: 50% -> #4f6423
    - #c8a01e with 50% opacity -> rgb(155, 192, 78, 0.5)
**/

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

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

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

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

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

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

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

.registration_kirkkonummi .signup-info-box:not(.under13) {
    padding: 0 10px;
    border-left: 3px solid #9bc04e;
}

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

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

.registration_kirkkonummi .btn-primary:not(:disabled):not(.disabled).active:focus,
.registration_kirkkonummi .btn-primary:not(:disabled):not(.disabled):focus,
.registration_kirkkonummi .btn-primary:not(:disabled):not(.disabled):active:focus,
.registration_kirkkonummi .show>.btn-primary.dropdown-toggle:focus {
    background-color: #9bc04e;
    border-color: #9bc04e;
    outline-color: #4f6423;
    box-shadow: 0 0 0 0.2rem rgb(155, 192, 78, 0.5);
}

.registration_kirkkonummi .top-container-header .header-logo,
.crm_user_kirkkonummi .top-container-header .header-logo {
    background-image: url("../pics/kirkkonummi_logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 434px;
    align-self: flex-start;
    margin-top: 5px;
    margin-bottom: 5px;
}

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

.crm_user_kirkkonummi .top-container,
.registration_kirkkonummi .top-container {
    background-color: #9bc04e;
    margin-bottom: 15px;
}

.crm_user_kirkkonummi .signup-form h1,
.crm_user_kirkkonummi .todo h1,
.crm_user_kirkkonummi .crm-user-registeration h1,
.crm_user_kirkkonummi .crm-user-container h1,
.registration_kirkkonummi .signup-form h1,
.registration_kirkkonummi .todo h1,
.registration_kirkkonummi .crm-user-registeration h1,
.registration_kirkkonummi .crm-user-container h1 {
    color: #9bc04e;
    font-size: 1.4em;
}

.crm_user_kirkkonummi .signup-form h2,
.crm_user_kirkkonummi .todo h2,
.crm_user_kirkkonummi .crm-user-registeration h2,
.crm_user_kirkkonummi .crm-user-container h2,
.registration_kirkkonummi .signup-form h2,
.registration_kirkkonummi .todo h2,
.registration_kirkkonummi .crm-user-registeration h2,
.registration_kirkkonummi .crm-user-container h2 {
    font-size: 1.2em;
    color: #9bc04e;
}

.crm_user_kirkkonummi .btn-primary,
.registration_kirkkonummi .btn-primary {
    color: #fff;
    background-color: #9bc04e;
    border-color: #9bc04e;
    outline-color: #4f6423;
}

.crm_user_kirkkonummi .katrina-asiointi-box,
.registration_kirkkonummi .katrina-asiointi-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #9bc04e;
    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_kirkkonummi h1 {
    color: #9bc04e;
    font-size: 1.4em;
}

.collection_kirkkonummi h2 {
    font-size: 1.2em;
    color: #9bc04e;
}

.collection_kirkkonummi .btn-primary {
    color: #fff;
    background-color: #9bc04e;
    border-color: #9bc04e;
    outline-color: #4f6423;
    width: 80%;
    height: 100%;
}

.collection_kirkkonummi .btn-primary:not(:disabled):not(.disabled).active,
.collection_kirkkonummi .btn-primary:not(:disabled):not(.disabled):active,
.collection_kirkkonummi .show > .btn-primary.dropdown-toggle {
    background-color: #9bc04e;
    border-color: #9bc04e;
    box-shadow: 0 0 0 0.2rem rgb(155, 192, 78, 0.5);
    outline-color: #4f6423;
}
.collection_kirkkonummi .btn-primary:hover {
    background-color: #9bc04e;
    border-color: #9bc04e;
    outline-color: #4f6423;
}

.collection_kirkkonummi .btn-primary:not(:disabled):not(.disabled).active:focus,
.collection_kirkkonummi .btn-primary:not(:disabled):not(.disabled):focus,
.collection_kirkkonummi .btn-primary:not(:disabled):not(.disabled):active:focus,
.collection_kirkkonummi .show > .btn-primary.dropdown-toggle:focus {
    background-color: #9bc04e;
    border-color: #9bc04e;
    outline-color: #4f6423;
    box-shadow: 0 0 0 0.2rem rgb(155, 192, 78, 0.5);
}

.collection_kirkkonummi .top-container-header-kirkkonummi {
    background-color: white;
    margin-bottom: 5px;
}
.collection_kirkkonummi .top-container {
    background-color: #9bc04e;
    margin-bottom: 15px;
}

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

.collection_kirkkonummi a, 
.collection_kirkkonummi a:link,
.collection_kirkkonummi .link {
  color: #9bc04e;
  text-decoration: underline; 
}

.collection_kirkkonummi .top-container-header-kirkkonummi .header-logo {
    background-image: url("../pics/kirkkonummi_logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 434;
    align-self: flex-start;
    margin-top: 5px;
    margin-bottom: 5px;
}

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

.payments_kirkkonummi .top-container {
    background-color: #9bc04e;
    margin-bottom: 15px;
}

.payments_kirkkonummi .top-container-header .header-logo {
    background-image: url("../pics/kirkkonummi_logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    height: 82px;
    width: 434px;
    align-self: flex-start;
    margin-top: 5px;
    margin-bottom: 5px;
}

.payments_kirkkonummi h1 {
    color: #9bc04e;
    font-size: 1.4em;
}

.payments_kirkkonummi h2 {
    font-size: 1.2em;
    color: #9bc04e;
}

.payments_kirkkonummi .btn-primary {
    color: #fff;
    background-color: #9bc04e;
    border-color: #9bc04e;
    outline-color: #4f6423;
    width: 80%;
    height: 100%;
}