/* Minification failed. Returning unminified contents.
(58,28): run-time error CSS1039: Token not allowed after unary operator: '-background-color'
(60,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(65,17): run-time error CSS1039: Token not allowed after unary operator: '-hilight-color'
(236,28): run-time error CSS1039: Token not allowed after unary operator: '-hilight-color'
(270,28): run-time error CSS1039: Token not allowed after unary operator: '-input-background-color'
(271,17): run-time error CSS1039: Token not allowed after unary operator: '-input-text-color'
(279,28): run-time error CSS1039: Token not allowed after unary operator: '-input-background-color'
(283,28): run-time error CSS1039: Token not allowed after unary operator: '-input-background-focus-color'
(284,17): run-time error CSS1039: Token not allowed after unary operator: '-input-text-focus-color'
(288,28): run-time error CSS1039: Token not allowed after unary operator: '-input-background-disabled-color'
(289,17): run-time error CSS1039: Token not allowed after unary operator: '-input-text-disabled-color'
(294,28): run-time error CSS1039: Token not allowed after unary operator: '-input-background-placeholder-color'
(295,17): run-time error CSS1039: Token not allowed after unary operator: '-input-text-placeholder-color'
(323,17): run-time error CSS1039: Token not allowed after unary operator: '-required-color'
(331,17): run-time error CSS1039: Token not allowed after unary operator: '-required-color'
(454,22): run-time error CSS1039: Token not allowed after unary operator: '-hilight-color'
(461,17): run-time error CSS1039: Token not allowed after unary operator: '-background-color'
(497,17): run-time error CSS1039: Token not allowed after unary operator: '-hilight-color'
(498,28): run-time error CSS1039: Token not allowed after unary operator: '-background-color'
(504,28): run-time error CSS1039: Token not allowed after unary operator: '-button-disabled-background-color'
(505,17): run-time error CSS1039: Token not allowed after unary operator: '-hilight-color'
(519,17): run-time error CSS1039: Token not allowed after unary operator: '-button-delete-text-color'
(523,21): run-time error CSS1039: Token not allowed after unary operator: '-button-delete-text-color'
(543,22): run-time error CSS1039: Token not allowed after unary operator: '-hilight-darker-color'
(560,22): run-time error CSS1039: Token not allowed after unary operator: '-hilight-darker-color'
(612,28): run-time error CSS1039: Token not allowed after unary operator: '-hilight-darker-color'
(778,17): run-time error CSS1039: Token not allowed after unary operator: '-hilight-color'
(787,17): run-time error CSS1039: Token not allowed after unary operator: '-hilight-color'
(918,32): run-time error CSS1039: Token not allowed after unary operator: '-hilight-color'
(937,35): run-time error CSS1039: Token not allowed after unary operator: '-hilight-color'
(1060,39): run-time error CSS1039: Token not allowed after unary operator: '-hilight-color'
(1068,39): run-time error CSS1039: Token not allowed after unary operator: '-hilight-color'
(1232,28): run-time error CSS1039: Token not allowed after unary operator: '-hilight-color'
(1314,28): run-time error CSS1039: Token not allowed after unary operator: '-table-background-color'
(1315,17): run-time error CSS1039: Token not allowed after unary operator: '-table-text-color'
(1319,28): run-time error CSS1039: Token not allowed after unary operator: '-table-background-hover-color'
(1320,17): run-time error CSS1039: Token not allowed after unary operator: '-table-text-hover-color'
(1324,24): run-time error CSS1039: Token not allowed after unary operator: '-hilight-color'
(1328,28): run-time error CSS1039: Token not allowed after unary operator: '-hilight-color'
(1337,24): run-time error CSS1039: Token not allowed after unary operator: '-button-radio-selected-color'
(1345,17): run-time error CSS1039: Token not allowed after unary operator: '-text-danger-color'
(1355,17): run-time error CSS1039: Token not allowed after unary operator: '-modal-text-color'
(1360,22): run-time error CSS1039: Token not allowed after unary operator: '-alertify-success-background-color'
(1361,17): run-time error CSS1039: Token not allowed after unary operator: '-alertify-success-text-color'
(1461,25): run-time error CSS1039: Token not allowed after unary operator: '-hilight-color'
 */
/* =============================================================================
   puhas.css

   Sisällys
    1. Fontit
    2. Perustyylit (elementit ja typografia)
    3. Sivun rakenne (header, navigaatio, footer, latausindikaattorit)
    4. Lomakkeet ja syöttökentät
    5. Mukautettu valintaruutu (checkbox)
    6. Painikkeet
    7. Apuluokat (näkyvyys, keskitys, tekstin paino)
    8. Etusivu ja ohjeaskeleet
    9. Kartta, suurennuslasi ja QR-koodi
   10. Jätelajin valinta
   11. Tuoterivit ja määrävalinta
   12. Yhteenveto, kuitti ja maksu
   13. Dialogit ja käyttöehdot
   14. Roolin valinta ja kortit
   15. Sopimukset
   16. Kirjastojen ohitukset (Bootstrap, Alertify)
   17. Responsiivisuus (mediakyselyt)
   18. Vanhat, kommentoidut säännöt

   HUOM: Sektioiden järjestys ei ole sattumaa. Esim. painikkeet (6) on oltava
   ennen apuluokkia (7) ja apuluokat ennen tuoterivejä (11), koska samalla
   elementillä on näiden luokkia yhtä aikaa ja myöhempi sääntö voittaa.
   ============================================================================= */


/* =============================================================================
   1. Fontit
   ============================================================================= */

/* Poppins Google Fontsista. @import on pidettävä tiedoston ensimmäisenä sääntönä.
   Vain painot 400 ja 600 ladataan, joten myös "bold" (700) piirtyy 600:na. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');


/* =============================================================================
   2. Perustyylit (elementit ja typografia)
   ============================================================================= */

* {
    font-family: 'Poppins', sans-serif !important;
    letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

body {
    font-weight: 400;
    font-size: 20px;
    padding-top: 0px;
    background-repeat: repeat-x;
    background-color: white;
    background-color: var(--background-color);
    margin-top: 5px;
    color: var(--text-color);
}

h1 {
    color: #008782;
    color: var(--hilight-color);
    font-family: Interstate;
    font-size: 54px;
    font-weight: 600;
    line-height: 1.1;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
}

p.large {
    font-family: Interstate;
    font-weight: light;
    font-size: 30px;
    line-height: 1.2;
}

h2 {
    font-family: 36px;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
}

p {
    font-family: Interstate;
    font-size: 22px;
    font-weight: normal;
    line-height: 1.0;
}

a {
    font-family: Interstate;
    font-weight: bold;
    text-decoration: underline;
}

    a:hover {
        text-decoration: none;
    }


/* =============================================================================
   3. Sivun rakenne (header, navigaatio, footer, latausindikaattorit)
   ============================================================================= */

/* --- Sisältöalue ja pääsäiliö --- */
.body-content {
    padding-bottom: 180px;
}

.centeredMainElement {
    margin: 0 auto;
    max-width: 1430px;
    padding: 10px;
}

/* --- Header ja projektin otsikko --- */
#main-header {
    margin: 10px;
}

.header-main-title h1 {
    color: #2C2A29;
    font-size: 42px;
    letter-spacing: 0.015em;
}

.secondaryProjectTitleHolder {
    display: none;
}

/* --- Navigaatio ja kielivalinta --- */
#nav {
    background: none;
    border: 0;
}

.navbar-header {
    width: 100%;
}

#panel {
    height: 10px;
    margin-bottom: 10px;
    box-shadow: 0px 1px 0px 0px;
}

.langSel {
    cursor: pointer;
}

/* --- Footer --- */
.bottom {
    min-height: 56px;
    text-align: center;
}

footer {
    font-size: 18px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
}

/* --- Latausindikaattorit --- */
#loader {
    display: block;
    position: absolute;
    left: 100px;
    top: 0;
}

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../Content/images/ajax-loader.gif) center no-repeat rgba(255, 255, 255, 0.5);
}


/* =============================================================================
   4. Lomakkeet ja syöttökentät
   ============================================================================= */

/* --- Perus-input ja placeholderit --- */
input {
    min-height: 28px;
    font-size: 24px;
    border-radius: 3px;
    text-align: left;
    font-weight: bold;
    border: 0px;
    width: calc(100% - 52px);
    color: black;
    /*padding: 0px !important;  Huom: Miksi? Syöttökenttien tekstit menevät aivan laitoihin jos tämä sääntö on käytössä -JLep 2.6.2020 */
}

    /* Huom: sektion 5 input[type=checkbox] -sääntö ohittaa tämän leveyden */
    input[type=checkbox] {
        width: 28px;
    }

::placeholder {
    color: lightgray;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: lightgray;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: lightgray;
}

select.form-control {
    font-size: 27px;
    line-height: 1.2;
    display: inline-block;
    padding-left: 10px;
}

.form-control:focus {
    background-color: #008782;
    background-color: var(--hilight-color);
    color: white;
}

/* --- Jätetapahtumalomake --- */
#wasteForm {
    border-bottom: 1px solid lightgrey;
    background-color: #F0FAFA;
    padding: 30px;
}

/* --- Asiakastietokentät --- */
.customer-input-table {
    margin: 0 auto;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 20px;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: 20px;
}

.customer-input-row {
    display: inline-block;
    margin-left: 13px;
    margin-right: 13px;
}

.customer-input-cell {
    font-weight: bold;
    display: block;
    font-size: 27px;
    background-color: white;
    background-color: var(--input-background-color);
    color: var(--input-text-color);
    padding: 10px;
    margin-top: 5px;
    width: 660px;
    padding-bottom: 15px;
}

select.customer-input-cell, select.customer-input-cell option, select.customer-input-cell:focus {
    background-color: var(--input-background-color) !important;
}

input.customer-input-cell:focus {
    background-color: var(--input-background-focus-color);
    color: var(--input-text-focus-color);
}

input.customer-input-cell:disabled, input.customer-input-cell:read-only {
    background-color: var(--input-background-disabled-color);
    color: var(--input-text-disabled-color);
}

input.customer-input-cell::placeholder {
    opacity: 1;
    background-color: var(--input-background-placeholder-color) !important;
    color: var(--input-text-placeholder-color) !important;
}

.customer-input-cell-title {
    background-color: transparent;
    padding: 0px;
    margin-top: 20px;
}

.editableInput {
    cursor: text;
}

.inputExample {
    margin-left: 25px;
    font-size: 24px;
}

/* --- Pakolliset kentät ja virheilmoitukset --- */
.requiredIcon {
    height: 26px;
    vertical-align: middle;
    margin-right: 20px;
}

span.required-text {
    font-size: 0.8em;
    color: #ca5858;
    color: var(--required-color);
}

div.block-alert {
}

label.block-alert {
    color: #ca5858;
    color: var(--required-color);
    font-size: 26px;
}

.ErrorMessage {
    color: red;
}


/* =============================================================================
   5. Mukautettu valintaruutu (checkbox)
   Piilottaa natiivin checkboxin ja piirtää sen tilalle labelin ::before/::after.
   ============================================================================= */

label.checkbox {
    position: relative;
    line-height: 1em;
    max-width: 90%; /* this prevents label overflowing in wrongway and repositioning checkbox */
}

input[type=checkbox] {
    width: 1em;
    font-size: inherit;
    margin: 0;
    transform: translateX(-9999px);
}

input[type=checkbox] + label:before {
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    border-radius: 10%;
    background-color: #bbbbbb;
}

input[type=checkbox] + label:after {
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: white;
    border-radius: 10%;
    transform: scale(0.8);
}

/* checked */
input[type=checkbox]:checked + label:before {
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: #3b88fd;
}

input[type=checkbox]:checked + label:after {
    position: absolute;
    content: "\2713";
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: #3b88fd;
    border-radius: 10%;
    color: white;
    text-align: center;
    line-height: 1;
}

/* focused */
input[type=checkbox]:focus + label:before {
    border: 0.1em solid #8eb9fb;
}

/* Kuvana toteutettu checkbox-painike (käyttöehtojen hyväksyntä) */
button.customCheckBox {
    margin: auto;
    padding: 0;
    cursor: pointer;
    background: white;
    border: 0;
}


/* =============================================================================
   6. Painikkeet
   Järjestys merkitsee: .next-page-block ennen .buttonia (margin-bottom),
   .prev-page-block .buttonin jälkeen (värit) ja .no-trans .interactiven jälkeen.
   ============================================================================= */

/* --- Painikerivi ja sivutuspainikkeiden sijoittelu --- */
.buttonRow {
    display: flex;
}

.next-page-block {
    margin: auto;
    margin-right: 0;
}

.next-page-button {
    margin: 0 auto;
    max-width: 500px;
}

/* --- Peruspainike --- */
.button {
    cursor: pointer;
    background: #008782;
    background: var(--hilight-color);
    padding: 5px;
    font-weight: bold;
    font-size: 23px;
    position: relative;
    border-radius: 3px;
    color: white;
    color: var(--background-color);
    text-align: center;
    margin-bottom: 60px;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    display: inline-flex;
}

.btn .button-text {
    width: 80%;
    text-align: center;
}

.btn .button-icon {
    width: 20%;
    background-size: 45%;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- Painikkeen tilat (hover/focus/disabled) --- */
.button:hover, .btn:hover, .button:active, .btn:active, .button:focus-visible, .btn:focus-visible, .button:focus, .btn:focus {
    color: white;
    box-shadow: 2px 4px 10px rgba(0,0,0,0.4);
    color: var(--hilight-color) !important;
    background-color: var(--background-color) !important;
}

/* Oltava hover-säännön jälkeen, jotta disabled-väri voittaa */
.btn.disabled, .btn:disabled, button:disabled {
    opacity: 1 !important;
    background-color: var(--button-disabled-background-color) !important;
    color: var(--hilight-color) !important;
}

/*
.button:active {
    position: relative;
    text-align: center;

    box-shadow: white 1px 1px 1px 0px;
    vertical-align:top;
}*/

/* --- Painikemuunnelmat --- */
.button-delete {
    color: var(--button-delete-text-color) !important;
}

    .button-delete:hover {
        color: var(--button-delete-text-color) !important;
    }

.button.form-control {
    height: auto;
}

/* --- Painikkeen teksti ja ikonit --- */
.button-text {
    display: inline-block;
    align-items: center;
    margin: auto;
    margin-left: 10px;
    margin-right: 10px;
    vertical-align: top;
}

.button-icon {
    border-radius: 50%;
    background: #006B67;
    background: var(--hilight-darker-color);
    height: 18px;
    width: 18px;
    min-height: 18px;
    min-width: 18px;
    max-height: 18px;
    max-width: 18px;
    padding: 12px;
    /*margin-left: 30px;*/
    display: inline-block;
    margin: auto;
    box-sizing: content-box;
}

.button-icon-big {
    border-radius: 50%;
    background: #006B67;
    background: var(--hilight-darker-color);
    height: 34px;
    width: 34px;
    min-height: 34px;
    min-width: 34px;
    max-height: 34px;
    min-width: 34px;
    padding: 4px;
    box-sizing: content-box;
}

.next-icon {
    border-radius: 50%;
    background: grey;
    height: 10px;
    padding: 6px;
    margin-top: 11px;
    box-sizing: content-box;
}

/* --- Takaisin-painike --- */
.prev-page-block {
    margin-left: 0px;
    background-color: white;
    color: black;
}

    .prev-page-block:hover {
        color: black;
    }

.button-icon.backIcon, .button-icon-big.backIcon {
    background-color: gray;
}

.narrow-button .button-text {
    margin-right: auto;
    margin-left: 0px;
}

.narrow-button .button-icon {
    margin-right: 10px;
}

/* --- Kiinteä alapainikerivi ja muut painikkeen sijoittelut --- */
.fixedButtonRow {
    position: fixed;
    z-index: 9999;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #006B67;
    background-color: var(--hilight-darker-color);
}

.fixedBottomButton {
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.centeredBackButton {
    margin-top: 40px;
}

/* --- Klikattavat elementit ja siirtymät --- */
.interactive {
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    touch-action: manipulation;
}

    .interactive.hover {
        box-shadow: 2px 4px 10px rgba(0,0,0,0.4);
    }

/* Poistaa siirtymäanimaation (.button/.interactive) */
.no-trans {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    -webkit-touch-callout: none;
}

.click {
    border-top: 3px solid lightseagreen;
    border-left: 3px solid lightseagreen;
}

/*
.hover {
    border-radius: 2px;
    border-bottom: 3px solid lightseagreen;
    border-right: 3px solid lightseagreen;
}
*/


/* =============================================================================
   7. Apuluokat (näkyvyys, keskitys, tekstin paino)
   ============================================================================= */

/* --- Piilotus ja ruudunlukijat --- */
label.hidden {
    display: none;
}

.screen-reader-only {
    position: absolute;
    height: 1px;
    width: 1px;
    clip: rect(1px 1px 1px 1px);
    /* IE 6 and 7: clip: rect(1px,1px,1px,1px); */
    clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    overflow: hidden !important;
}

/* --- Mobiili / ei-mobiili näkyvyys (ks. 700px-mediakysely) --- */
.mobileAmountDisplay {
    display: none;
}

.non-mobileAmountDisplay {
    display: block;
}

.displayOnlyMobile {
    display: none;
}

/* --- Keskitys ja tasaus --- */
.centerHorizontalAndVertical {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.centerVertical {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* Oltava .prev-page-blockin jälkeen ja tuoterivien (.wasteProductRowCellContent) ennen */
.alignMarginCenterHorizontal {
    margin-left: auto;
    margin-right: auto;
}

.alignMarginRightHorizontal {
    margin-left: auto;
    margin-right: 0px;
}

.basicText {
    text-align: left;
    width: 100%;
}

/* --- Teksti, tila ja muunnokset --- */
.fontWeightNormal {
    font-weight: normal;
}

.notActive {
    color: grey;
}

.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.info {
    margin-bottom: 20px;
}


/* =============================================================================
   8. Etusivu ja ohjeaskeleet
   ============================================================================= */

#homePic {
    display: none;
}

.infoStep {
    display: inline-block;
    width: 350px;
    vertical-align: top;
    padding-bottom: 40px;
}

    .infoStep img {
        width: 220px;
    }

.infoStepNumber {
    color: #008782;
    color: var(--hilight-color);
    font-family: Interstate;
    font-size: 48px;
    font-weight: bold;
    margin: 0px;
}

.infoStepLargeText {
    color: #008782;
    color: var(--hilight-color);
    font-family: Interstate;
    font-size: 28px;
    font-weight: bold;
    margin: 0px;
}

.infoStepText {
    font-family: Interstate;
    font-size: 24px;
    margin: 0px;
    line-height: 1.4;
}

.infoBox {
    width: 100%;
    border-top: 1px solid lightgrey;
    border-bottom: 1px solid lightgrey;
}


/* =============================================================================
   9. Kartta, suurennuslasi ja QR-koodi
   ============================================================================= */

.mapImage {
    padding: 10px;
}

    .mapImage:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        min-height: 150px;
    }

.magnifyingGlass {
    position: relative;
    vertical-align: middle;
    display: inline-block;
}

    .magnifyingGlass .magnifyingGlassButton {
        content: '';
        position: absolute;
        top: 40px;
        right: 40px;
    }

.qrHolder {
    width: 100%;
    padding-top: 40px;
}

.qrContent {
    margin: auto;
    margin-top: 0px;
    margin-bottom: 0px;
}


/* =============================================================================
   10. Jätelajin valinta
   ============================================================================= */

#waste-type-container {
    margin: 0 auto;
    max-width: 1430px;
}

button.waste-type {
    background: white;
    text-align: left;
    margin: 10px;
    padding: 10px;
    position: relative;
    width: 428px;
    font-size: 27px;
    display: inline-block;
    border: 1px solid #979797;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.waste-type-text-div {
    display: inline-block;
}

.waste-type-img {
    max-width: 128px;
    max-height: 128px;
    min-width: 128px;
    min-height: 128px;
    width: 128px;
    height: 128px;
    display: inline-block;
    vertical-align: middle;
}

.waste-type-header {
    font-size: 27px;
    line-height: 1.2;
    font-weight: bold;
    display: inline-block;
    padding-left: 10px;
}

.long-text {
    font-size: 18px;
}

.waste-type-selected {
    background-color: #F0FAFA;
    border: 3px solid #64C3CD;
    border-left-width: 8px;
    /*margin: 7px 4px 7px 5px;*/
}

.waste-type-summary {
    display: block;
    font-size: 24px;
    padding-left: 10px;
}


/* =============================================================================
   11. Tuoterivit ja määrävalinta
   ============================================================================= */

#wasteProductSelectForm {
    border-top: 3px solid #008782;
    border-top: 3px solid var(--hilight-color);
}

.waste-type-product {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 24px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    display: flex;
    width: 100%;
    height: 140px;
    border-bottom: 1px solid #008782;
    border-bottom: 1px solid var(--hilight-color);
    font-weight: bold;
    margin: 0px;
    padding: 0px;
}

/* --- Tuoterivin solut --- */
.wasteRowDataHolder {
    display: flex;
    width: 100%;
}

.wasteProductRowCell {
    display: flex;
}

.wasteProductRowCellContent {
    margin: auto
}

.wasteProductRowNameCell {
    width: 100%;
}

.wasteProductRowSumCell {
    width: 200px;
    border-left: lightgrey solid 1px;
}

.wasteProductRowTotalRowSumCell {
    width: 200px;
}

.wasteProductRowAmountCell {
    width: 200px;
    margin-right: 20px;
}

.wasteProductRowCellNameContent {
    margin-left: 0px;
}

/* --- Määrän valinta (+/-) ja hinta --- */
.productRowAmountHolder {
    display: flex
}

.amount-select {
    border-radius: 50%;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    touch-action: manipulation;
    margin: auto;
    background: none;
    border: 0;
}

    .amount-select img {
        box-shadow: grey 1px 1px 5px -2px;
    }

.amount-display {
    padding: 4px;
    margin: auto;
    displaY: inline-block;
    font-size: 32px;
    width: 80px;
    text-align: center;
}

/* Oltava .wasteProductRowCellContentin jälkeen (margin-right) */
.price-display {
    font-size: 24px;
    margin-right: 0px;
}

/* --- Yhteissumma --- */
.waste-type-total {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 32px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    display: flex;
    width: 100%;
    height: 140px;
    /*border-bottom: 1px solid var(--hilight-color);*/
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    width: 100%;
    margin: 0 auto;
    max-width: 1430px;
}

#product-summary {
    font-size: 32px;
}


/* =============================================================================
   12. Yhteenveto, kuitti ja maksu
   ============================================================================= */

/* --- Yhteenvetotaulukko --- */
#summary-table {
    border-collapse: collapse;
    margin: 0 auto;
    padding: 4px;
    width: 100%;
    font-size: 24px;
}

    #summary-table .product-type-row {
        border-bottom: 1px solid #008782;
        border-bottom: 1px solid var(--hilight-color);
        font-size: 24px;
        padding-left: 10px;
        text-align: left;
    }

    #summary-table .header {
        border-bottom: 3px solid #008782;
        border-bottom: 3px solid var(--hilight-color);
        font-size: 27px;
        font-weight: bold;
    }

    #summary-table .footer {
        padding-left: 10px;
        padding-top: 10px;
        font-size: 37px;
        text-align: left;
        font-weight: bold;
        white-space: nowrap;
    }

    #summary-table > thead > tr > th {
        padding-left: 10px;
        text-align: left;
    }

/* --- Jätetapahtuman yhteenveto / kuitti --- */
.waste-summary-basic-info {
    margin-top: 40px;
}

    .waste-summary-basic-info p {
        margin: 0px;
    }

.waste-summary-table {
    font-size: 24px;
    font-weight: bold;
}

    .waste-summary-table tr {
        min-height: 50px;
    }

.waste-summary-info-text-div {
    background-color: #FFFADC;
    padding: 20px;
    margin-top: 20px;
}

    .waste-summary-info-text-div p {
        margin: 0px;
    }

.vatRow td {
    font-size: 24px !important;
}

.waste-summary-amount, .waste-summary-sum {
    font-weight: normal;
}

.tableTextContent {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.wasteFormTableNameCell {
    font-weight: bold;
}

.wasteEventInfoBox {
    font-weight: bold;
    padding: 30px;
    font-family: Interstate;
    font-size: 20px;
    line-height: 1.4;
}

/* --- Maksu --- */
.paymentInfo {
    padding: 30px;
}


/* =============================================================================
   13. Dialogit ja käyttöehdot
   ============================================================================= */

/* --- Viestidialogi --- */
#message-dialog {
    box-shadow: black 1px 1px 3px 0px;
    background: white;
    top: 100px;
    left: calc(50% - 250px);
    position: fixed;
    /*padding: 10px;*/
    min-width: 500px;
    min-height: 100px;
    padding: 30px;
    width: 500px;
    max-width: 500px;
}

/* --- Käyttöehtojen hyväksyntä --- */
.termsCheckContainer {
    height: 31px;
    width: 31px;
    display: inline-block;
    overflow: hidden;
    margin-bottom: -5px;
}

.terms {
    margin-top: -15px;
    margin-left: -5px;
}

.button-icon-terms {
    margin-left: 10px;
    margin-right: 10px;
}

.button-text-terms {
    margin: auto;
    padding-right: 15px;
}

.terms-label {
    display: inline-block;
}

/* --- Käyttöehtodialogi --- */
#termsandconditions-dialog {
    box-shadow: black 1px 1px 3px 0px;
    background: white;
    top: 100px;
    left: calc(50% - 250px);
    position: fixed;
    min-width: 500px;
    min-height: 100px;
    width: 500px;
    max-width: 500px;
    text-align: left;
    height: 70%;
    z-index: 102;
}

.termsandconditions {
    height: 85%;
    cursor: pointer;
    overflow-y: scroll;
    padding: 10px;
}

    .termsandconditions p {
        font-size: 20px;
    }

.terms-header {
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-bottom: 1px solid;
    height: 6%;
    margin: 0;
    padding: 10px;
    background-color: #008782;
    background-color: var(--hilight-color);
    color: white;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-size: 30px;
    min-height: 65px;
}

.terms-close {
    background-color: transparent;
    border: 0;
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
    -webkit-appearance: none;
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: white;
    text-shadow: 0 1px 0 #fff;
    text-decoration: none;
    cursor: pointer;
}


/* =============================================================================
   14. Roolin valinta ja kortit
   ============================================================================= */

#select-role h1, #user-actions-wrapper h1, .select-sub-title {
    text-align: center;
}

.card-icon-select-role-img {
    display: none;
}

.subtitle-select-role span.small, .select-role-description, .card-body span.small.description {
    font-size: 22px;
    font-weight: 400;
}

.subtitle-select-role, .select-role-description {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

h2.card-title {
    font-size: 32px;
}

.customer-stored-cards-label {
    margin-bottom: 1.5em;
}

.card {
    border: none;
}


/* =============================================================================
   15. Sopimukset
   ============================================================================= */

.sign-contract-button {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    width: 33% !important;
}

.save-contract-button {
    width: 300px !important;
}


/* =============================================================================
   16. Kirjastojen ohitukset (Bootstrap, Alertify)
   ============================================================================= */

/* --- Taulukot --- */
.table-light, .table-hover thead tr:hover th {
    background-color: var(--table-background-color);
    color: var(--table-text-color);
}

.table-hover tbody tr:hover td {
    background-color: var(--table-background-hover-color);
    color: var(--table-text-hover-color);
}

.table-light tbody + tbody, .table-light td, .table-light th, .table-light thead th {
    border-color: var(--hilight-color) !important;
}

hr.blue {
    border: 1px solid var(--hilight-color) !important;
}

/* --- Lomake-elementit ja painikkeet --- */
div.field {
    border: none !important;
}

.btn.radio.selected {
    border-color: var(--button-radio-selected-color) !important;
}

.disable-overlay {
    background: rgba(255,255,255,.39) !important;
}

.text-danger {
    color: var(--text-danger-color) !important;
}

/* --- Popover ja modaali --- */
.popover {
    background-color: transparent !important;
    border: none;
}

.modal .modal-dialog .modal-body a {
    color: var(--modal-text-color) !important;
}

/* --- Alertify-ilmoitukset --- */
.alertify-notifier .ajs-message.ajs-success {
    background: var(--alertify-success-background-color) !important;
    color: var(--alertify-success-text-color) !important;
}


/* =============================================================================
   17. Responsiivisuus (mediakyselyt)
   Suurimmasta pienimpään; tulostus viimeisenä.
   ============================================================================= */

/* --- Tabletti ja pienempi (max 1000px) --- */
@media (max-width: 1000px) {
    .basicText {
        text-align: center;
    }

    #user-actions-wrapper {
        margin-top: 3.5em !important;
    }

    .sign-contract-button, .save-contract-button {
        width: 100% !important;
    }
}

/* --- Mobiili (max 700px) --- */
@media (max-width: 700px) {
    /* Rakenne ja otsikot */
    .buttonRow {
        display: unset;
    }

    .secondaryProjectTitleHolder {
        /*  display: flex;
        border-top: 1px solid lightgrey;*/
    }

    .secondaryProjectTitle {
        margin: auto;
    }

    .primaryProjectTitle {
        /*  display: none;*/
    }

    #top-bar > .nav-block > a {
        font-size: 14px;
    }

    h1 {
        font-size: 43px;
    }

    .projectTitle {
        font-size: 32px;
    }

    p.large {
        font-size: 30px;
    }

    .button {
        font-size: 21px;
        /*height: 45px; */
        width: 100%;
        display: flex;
    }

    h2 {
        font-size: 38px;
    }

    /* Etusivu */
    .infoStepNumber {
        font-size: 38px;
    }

    .infoStepLargeText {
        font-size: 22px;
    }

    .infoStepText {
        font-size: 19px;
    }

    p {
        font-size: 19px;
    }

    a {
        font-size: 18px;
    }

    .footerDiv {
        font-size: 19px;
        display: block;
    }

        .footerDiv a {
            font-size: 19px;
            color: grey !important;
            color: var(--hilight-color) !important;
        }

    #container {
        padding-top: 0px;
    }

    #textDiv {
        width: 90%;
    }

    .infoStep {
        width: 100%;
    }

    .extlinkicon {
        height: 18px;
    }

    /* Jätelajin valinta */
    .waste-type-header {
        font-size: 22px;
    }

    #waste-type-container {
        width: initial;
        padding-left: 0px;
    }

    button.waste-type {
        width: 100%;
        margin-left: 0px;
    }

    .waste-type {
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: initial;
        margin-bottom: 10px;
    }

    .waste-type-img {
        max-width: 64px;
        max-height: 64px;
        min-width: 64px;
        min-height: 64px;
        width: 64px;
        height: 64px;
        margin: 10px;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .waste-type-selected {
        width: calc(100% - 10px);
    }

    .waste-type-summary {
        font-size: 22px;
    }

    /* Yhteenvetotaulukko */
    #summary-table thead tr th:nth-of-type(2), #summary-table tbody tr td:nth-of-type(2), #summary-table tfoot tr td:nth-of-type(2) {
        display: none;
    }

    #summary-table thead tr {
        font-size: 22px;
    }

    #summary-table > tbody > tr.type-row > td {
        font-size: 19px;
    }

    #summary-table > tfoot > tr > td {
        font-size: 30px;
    }

    /* Lomakkeet */
    .customer-input-cell-title {
        font-size: 16px;
    }

    input {
        min-height: 22px;
        font-size: 19px;
    }

    .inputExample {
        font-size: 19px;
        width: 100%;
        margin: auto;
    }

    .requiredIcon {
        height: 21px;
    }

    .customer-input-row {
        width: 100%;
        margin: auto;
    }

    .customer-input-cell {
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

        .customer-input-cell input {
            width: calc(100% - 52px);
        }

        .customer-input-cell .ui-input-text {
            width: calc(100% - 52px);
            display: inline-block;
        }

            .customer-input-cell .ui-input-text input {
                width: 100%;
            }

    .centerForMobile {
        margin: auto;
        margin-top: 40px;
    }

    /* Tuoterivit ja määrävalinta */
    .mobileAmountDisplay {
        display: block;
    }

    .non-mobileAmountDisplay {
        display: none;
    }

    .wasteFormTableNameCell {
        padding-bottom: 0px;
    }

    .centerMobileImage {
        margin: auto;
    }

    .wasteRowDataHolder {
        display: inline-block;
        margin-left: 20px;
    }

    .wasteProductRowCellNameContent {
        display: block;
        margin: auto;
        margin-left: 0px;
        text-align: left;
    }

    .wasteProductRowAmountCell {
        display: block;
        margin: auto;
        margin-left: 0px;
    }

    .wasteProductRowSumCell {
        border: 0px;
        display: flex;
        width: initial;
    }

    .waste-type-product {
        font-size: 19px;
    }

    .price-display {
        font-size: 19px;
    }

    .amount-display {
        font-size: 26px;
        width: 68px;
    }

    .button-icon {
        padding: 5px;
    }

    .amount-select {
        /* width: 14px;
        height: 14px;
        padding:12px;*/
        padding: 0;
    }

    .waste-type-total {
        font-size: 26px;
    }

    #product-summary {
        font-size: 26px;
    }

    #bottom-bar .wasteProductRowNameCell {
        display: none;
    }

    #bottom-bar {
        padding: 20px;
        width: initial;
        height: initial;
    }

        #bottom-bar .wasteProductRowAmountCell {
            text-align: left;
        }

    /* Painikkeet */
    .mobileAcceptButton {
        margin: auto;
        width: 70%;
        margin-top: 40px;
    }

    .next-page-block .button-text {
        margin: auto;
        margin-right: 0px;
    }

    .next-page-block .button-icon {
        margin-left: 10px;
    }

    .mobileBackButton {
        margin: auto;
        width: 60%;
        margin-top: 40px;
    }

    .prev-page-block .button-text {
        margin: auto;
        margin-left: 0px;
    }

    .prev-page-block .button-icon {
        margin-right: 10px;
    }

    .magnifyingGlass .magnifyingGlassButton {
        top: 5px;
        right: 5px;
    }

    /* Näkyvyys */
    .displayOnlyMobile {
        display: initial;
    }

    .dontDisplayOnMobile {
        display: none;
    }

    .narrow-button {
        margin: auto;
        margin-right: 10px;
        margin-left: 10px;
    }

        .narrow-button .button-text {
            /*  margin: auto;*/
            /*   margin-right: 10px;*/
            /* margin-left: 10px;*/
        }

        .narrow-button .button-icon {
            margin-right: 10px;
        }
}

/* --- Matala näyttö tai kapea mobiili (max 600px): footer ja dialogi koko leveydelle --- */
@media (max-height: 600px) {
    footer {
        position: relative;
    }

    #message-dialog {
        top: 0px;
        left: 0px;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    footer {
        position: relative;
    }

    #message-dialog {
        top: 0px;
        left: 0px;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }
}

/* --- Pieni mobiili (max 500px): käyttöehtodialogi koko näytölle --- */
@media (max-width: 500px) {
    #termsandconditions-dialog {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        height: 100%;
        top: 0%;
        left: 0%;
        z-index: 999;
    }

    .terms-header {
    }

    .terms-label {
        display: inline-block;
        vertical-align: middle;
    }

    .button-icon-terms {
        margin-left: 10px;
        margin-right: 10px;
    }

    .button-text-terms {
        margin: auto;
        margin-left: 10px;
    }

    .terms-close img {
        height: 28px;
        width: 28px;
        min-height: 28px;
        min-width: 28px;
        max-height: 28px;
        max-width: 28px;
    }
}

/* --- Hyvin kapea (max 400px): tuoterivin hinta ja määrä allekkain --- */
@media (max-width: 400px) {
    .price-display {
        margin-left: 0px;
    }

    .wasteProductRowSumCell {
        display: block;
    }

    .productRowAmountHolder {
        display: block;
    }
}

/* --- Tulostus --- */
@media print {
    * {
        color: black;
    }
}


/* =============================================================================
   18. Vanhat, kommentoidut säännöt
   Eivät ole käytössä. Säilytetty alkuperäisestä tiedostosta.
   ============================================================================= */

/*
@media (max-width: 1080px) and (min-width: 673px) {
    .waste-type-summary {
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 16px;
    }



    #homePic {
        zoom: 0.5;
    }

    input {
        width: 340px;
        height: 25px;
        font-size: 18px;
        border-radius: 3px;
        text-align: center;
    }



    .waste-type-img.we {
        zoom: 0.6;
    }


    .navbar-header {
        height: 10px;
    }

    #nav {
        height: 10px;
    }

        #nav > .container {
            height: 10px;
        }



    #summary-table {
        margin: 0 auto;
        padding: 4px;
        width: 100%;
        font-size: 18px;
        max-width: 900px;
    }

        #summary-table > tbody > tr.type-row > td {

            font-size: 18px;
            text-align: left;

        }


        #summary-table > tfoot > tr > td {
            padding-top: 10px;
            font-size: 20px;
            text-align: left;
            font-weight: bold;
            white-space: nowrap;
        }

    .waste-type {
        margin: 10px;
        padding: 0px;
        width: 250px;
        height: 80px;
        font-size: 24px;

        display: inline-block;
    }




    .prev-page-block {
        position: relative;
        float: left;

        padding: 10px;


        display: -webkit-flex;
    }

    .waste-type-product {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        font-size: 20px;
        user-select: none;
        display: inline-table;
        height: 130px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin: 0px;
        width: 300px;
        border-bottom: 2px solid lightseagreen;
    }


    .amount-select {
        zoom: 0.8;
    }

    .amount-display {
        zoom: 0.8;
    }

    .price-display {
        zoom: 0.8;
    }


    .waste-type-header {
        font-size: 22px;

    }


    .long-text {

        font-size: 14px;
    }

    #pictureDiv {
        zoom: 0.9;
    }
    #textDiv {
        zoom: 0.9;

    }
    #container {
        zoom: 0.9;

    }


}

@media (max-width: 673px) {




    #textDiv > .button {

        width: 200px;
        zoom: 1.45;
    }

    #pictureDiv {
        float: none;
        padding-left: 0px;
        zoom: 0.5;
        top: 0px;
        display: block;
        text-align: center;
        margin: 5px;
    }
    #textDiv {
        margin-bottom: 100px;
        text-align: center;
        zoom: 0.8;

    }
    #container {
        zoom: 0.8;

    }


    .waste-type-summary {
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 16px;
    }



    input {
        width: 300px;
        height: 25px;
        font-size: 16px;
        border-radius: 3px;

        text-align: center;
    }


    .customer-input-row {
        display: inline-block;
         margin-left: 0px;
         margin-right: 0px;
    }


    #homePic { zoom: 0.5; }

    .navbar-header { height: 10px; }

    #nav { height: 10px; }

    #nav > .container { height: 10px; }

    footer { font-size: 16px; }

    #summary-table {
        margin: 0 auto;
        padding: 4px;
        width: 100%;
        font-size: 18px;
        max-width: 900px;
    }

    #summary-table > tbody > tr.type-row > td {
        font-size: 18px;
    }



    #summary-table > tfoot > tr > td {
        padding-left: 2px;
        padding-top: 10px;
        font-size: 18px;
        white-space: nowrap;
        font-weight: bold;
    }

    .waste-type {
        margin: 1px;
        padding: 0px;
        width: 260px;
        height: 80px;
        font-size: 18px;
        display: inline-block;
    }


    .waste-type-header { font-size: 20px; }


    .long-text {

        font-size: 16px;
    }

    .waste-type-img.we { zoom: 0.6; }


    .waste-type-img {
        float: left;
        zoom: 0.7;
    }



    .prev-page-block {
        position: relative;
        float: none;
        width: fit-content;
        padding: 5px;

        margin: 0 auto;
        margin-bottom: 20px;
        display: -webkit-flex;
    }

    .waste-type-product {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;

        user-select: none;
        font-size: 18px;
        display: inline-table;
        padding-top: 0px;
        padding-bottom: 2px;
        margin: 0px;
        width: 300px;
        height: auto;
        border-bottom: 2px solid lightseagreen;
    }


    .amount-select { zoom: 0.7; }

    .amount-display { zoom: 0.8; }

    .price-display { zoom: 0.7; }


    .bottom { min-height: 0px; }


    #waste-type-container {
        margin: 0 auto;
        max-width: 1430px;
        text-align: center;


    }


}



        @media (max-height: 600px) {

            footer {
                display: none;
            }



        }

        */