:root{
    --body-bg-color: #fff;

    --color-default: #484848;

    --color-light: #EEEDEF;

    --color-gray-light: #828282;
    --color-gray: #4B4B4B;
    --color-gray-dark: #333;
    --color-gray-darker: #070707;
}

.bg-dark{
    background-color: #EEEDEF;
}

.app-page .page-title,
.app-page .section-title{
    background: none;
    -webkit-text-fill-color:  var(--color-success);
    color: var(--color-success);
}

.title,
.text,
.text-wrap{
    color: var(--color-default);
}


/* ----------- cards ----------- */
.card:not([class*=bg-]){
    background-color: #F6F6F6 !important;
    -webkit-backdrop-filter: unset;
    backdrop-filter: unset;
}

.cards-grid-item .card-title{
    font-weight: bold;
}
.cards-grid-item .card-title,
.cards-grid-item .text-wrap{
    color: var(--color-gray);
}

.card.bg-dark{
    background-color: #2C2B39;
}
.card.bg-dark .card-title,
.card.bg-dark .text-wrap{
    color: #E0E0E0 !important;
}

.cards-grid-item{
    transition: box-shadow .15s ease-in-out;
}
.cards-grid-item:hover{
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.3);
}
/* ----------- /cards ----------- */


/* ----------- slider ----------- */
.slider-item .img-wrap{
    border-radius: 20px;
}
.slider-item .info-wrap {
    color: #4F4F4F;
}
/* ----------- /slider ----------- */


/* ----------- intro ----------- */
.section.section-intro{
    background-color: #EEEDEF;
    padding: 0;
}
.section.section-intro .col-info{
    padding-top: 50px;
    padding-bottom: 50px;
}
.section.section-intro .page-title{
    margin: 0;
    padding: 0;
}
.section.section-intro .text-wrap{
    max-width: 550px;
    font-size: 16px;
}
.section.section-intro .col-img img{
    display: block;
    max-width: 100%;
}

@media (min-width: 992px) {
    .section.section-intro .col-info{
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .section.section-intro .page-title{
        margin-right: -60px;
    }

    .section.section-intro .col-img{
        align-self: flex-end;
        flex-shrink: 0;
        width: 38%;
        max-width: 410px;
        padding-top: 24px;
    }
    .section.section-intro .col-img img{
        width: 100%;
    }
}

@media (max-width: 991px) {
    .section.section-intro{
        text-align: center;
    }
    .section.section-intro .row{
        justify-content: center;
    }
    .section.section-intro .text-wrap,
    .section.section-intro .col-img img{
        margin: 0 auto;
    }
}
/* ----------- /intro ----------- */


/* ----------- kiosk ----------- */
.kiosk-card .card-body{
    padding-top: 20px !important;
    padding-bottom: 0 !important;
}

.kiosk-card .img-wrap{
    display: flex;
    justify-content: center;
}
.kiosk-card .img-wrap > div{
    position: relative;
}
.kiosk-card .img-wrap img{
    display: block;
    max-width: 100%;
}
.kiosk-card .img-wrap img:not(:first-child){
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}
.kiosk-card .img-wrap img.show{
    opacity: 1;
}

.kiosk-card .info-wrap{
    padding: 11% 0;
}
.kiosk-card .form-check{
    font-weight: 400;
}
.kiosk-card .form-check .form-check-input{
    margin-right: 14px;
}
.kiosk-card .form-check .title{
    display: block;
    padding: 3px 0;

    color: var(--color-gray-dark);
    font-size: 16px;
    font-weight: bold;
}

@media (min-width: 768px) {
    .kiosk-card .img-wrap {
        max-width: 375px;
        margin: auto auto 0;
    }
}

@media (max-width: 767px) {
    .kiosk-card .col-info{
        padding-top: 27%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .kiosk-card .info-wrap{
        width: 80%;
        background-color: rgba(251, 251, 251, 0.95) !important;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        padding: 20px;
        margin: 0 auto;
    }
}
@media (max-width: 575px) {
    .kiosk-card .card-body{
        padding: 0 !important;
    }
    .kiosk-card .col-info{
        padding-top: 25%;
    }
    .kiosk-card .info-wrap{
        width: 90%;
    }
}
@media (max-width: 359px) {
    .kiosk-card .col-info{
        padding-top: 18%;
    }
}
/* ----------- /kiosk ----------- */