body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;

}


:root {
    --waydear-dark     : #132d2a;
    --waydear-secondary: #eff9f4;
    --waydear-light    : #eee2dc;
    --waydear-lightgray: #e8e9eb;
    --waydear-darkgray : #746d69;
    --waydear-light-rgb: rgba(238, 226, 220, 0.125);
}


.bg-cta{
    background-color: #ee7166 !important;
    border:1px solid #bc5e56 !important;

}

.youtube-video-container {
    position      : relative;
    width         : 100%;
    height        : 0;
    padding-bottom: 56.25%;
}

.youtube-video {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
}

.d-darkmode {
    display: none;
}

.d-lightmode {
    display: block;
}

b {
    font-weight: 500;
}

p {
    margin        : 0;
    padding       : 0;
    /* line-height: 1.2rem;*/
}

.card-header {
    background-color: transparent;
    font-weight     : 500;
}

.bg-alt {
    background-color: var(--waydear-lightgray);
}

.bg-alt-2 {
    background-color: var(--waydear-secondary);
}

.bold {
    font-weight: 500;
}


#divBackground {
    position: relative;

}

@-webkit-keyframes AnimationName {
    0% {
        background-position: 51% 0%
    }

    50% {
        background-position: 50% 100%
    }

    100% {
        background-position: 51% 0%
    }
}

@-moz-keyframes AnimationName {
    0% {
        background-position: 51% 0%
    }

    50% {
        background-position: 50% 100%
    }

    100% {
        background-position: 51% 0%
    }
}

@keyframes AnimationName {
    0% {
        background-position: 51% 0%
    }

    50% {
        background-position: 50% 100%
    }

    100% {
        background-position: 51% 0%
    }
}

.input-group-text {
    background-color: #fff;
}

.grayout .custom-control {
    opacity: 0.4;
}

#divTimeline {
    position           : absolute;
    left               : 50%;
    top                : 50px;
    -webkit-transform  : translateX(-50%);
    -moz-transform     : translateX(-50%);
    transform          : translateX(-50%);
    width              : 2px;
    /*background-color : var(--waydear-dark);*/
    height             : 87%;
    z-index            : -500;
    border             : 0;
    background         : linear-gradient(190deg, var(--waydear-dark), var(--waydear-light));
    background-size    : 400% 400%;

    -webkit-animation: AnimationName 10s ease infinite;
    -moz-animation   : AnimationName 10s ease infinite;
    animation        : AnimationName 10s ease infinite;

}

.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show>.btn-secondary.dropdown-toggle {
    background-color: #007bff;
    border-color    : #007bff;
    font-weight     : 700;
    color           : white !important;
}


.btn-group>.btn-group:not(:last-child)>.btn,
.btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
    color: lightgray;
}


.btn-startservice {
    cursor: pointer;
}

.lh-sm {
    line-height: 1.1rem;
}

.lh-xs {
    line-height: 0.8rem;
}

.waydear-func {
    display: none;
}

.xsmall {
    font-size  : 70%;
    font-weight: 500;
}

.small {
    font-size: 80%;
}

.smaller {
    font-size: 90%;
}

.lh-xs {
    line-height: .8rem;
}

.table th,
.table td {
    padding: .5rem .5rem;
}

.table th {
    font-weight: 500;
}

h1 {
    font-size: 20px;
}

h5 {
    text-transform: uppercase;
    font-size     : 15px;
    font-weight   : 700;
}

.next-step {
    background-color: #fff;
    width           : 65px;
    height          : 40px;
    line-height     : 0.9rem;
    font-weight     : 500;
    padding         : 0 !important;


    z-index     : -100;
    font-size   : 9px;
    border-width: 0px !important;
    border-color: var(--waydear-darkgray);
    border-style: solid;


    color   : var(--waydear-darkgray) !important;
    position: relative;
}




.vertical-center {
    margin           : 0;
    position         : absolute;
    left             : 50%;
    top              : 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform   : translateX(-50%) translateY(-50%);
    transform        : translateX(-50%) translateY(-50%);
}



/*.shadow-extended {
    box-shadow: 0 13px 27px -5px rgba(50, 50, 93, .25), 0 8px 16px -8px rgba(0, 0, 0, .3), 0 -6px 16px -6px rgba(0, 0, 0, .025);
}*/


.shadow-extended {
    /*box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;*/
    /*box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;*/
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    /*box-shadow: 0 13px 27px -5px rgba(50, 50, 93, .25), 0 8px 16px -8px rgba(0, 0, 0, .3), 0 -6px 16px -6px rgba(0, 0, 0, .025);*/
}

.shadow-quiet {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.shadow-xs {
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 0px 3px 0 rgba(0, 0, 0, 0.12);
}


.error-field {
    border: 2px solid red !important;

}

.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active,
.show>.btn-light.dropdown-toggle {
    background-color: #28a745;
    border-color    : #28a745;
    color           : white;
}

.bg-medium{
    background-color: #f8f8f8;
}

.bg-dark {
    background-color: var(--waydear-dark) !important;
}

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


.border-light {

    border-color: var(--waydear-light-rgb) !important;

}




.scroll {
    display                   : flex;
    /* [1] */
    flex-wrap                 : nowrap;
    /* [1] */
    overflow-x                : auto;
    /* [1] */
    -webkit-overflow-scrolling: touch;
    /* [4] */
    -ms-overflow-style        : -ms-autohiding-scrollbar;
    /* [5] */
    padding-bottom            : .4em;
}



.scroll::-webkit-scrollbar {
    display: none;
}

.tile {

    flex : 0 0 auto;
    width: 15em;


    margin-right: .6em;

}

.tile-body {
    height       : 280px;
    border-radius: 3px;
}

.tile-footer {
    margin-top : 7px;
    font-weight: 700;
    font-size  : 12px;
    text-align : center;
    color      : var(--waydear-darkgray);


}


@media screen and (max-width: 320px) {

    /* only valid for small phones */
    .hide-320 {
        display: none;
    }
}

/*


@media (prefers-color-scheme: dark) {

    :root {
        --waydear-dark     : #22232a;
        --waydear-secondary: #eff9f4;
        --waydear-light    : #ccc;
        --waydear-lightgray: #ddd;
        --waydear-darkgray : #746d69;
        --waydear-light-rgb: rgba(238, 226, 220, 0.125);


    }

    body {
        background-color: #020104;
        color           : #f7f7f6;
    }

    .next-step {
        background-color: #020104;
    }

    .card {
        background-color: #1c1c1e;
    }
    .card-footer {
        background-color: #1c1c1e;
    }

    .modal-content {
        background-color: #1c1c1e !important;
    }

    .modal-content .close {
        color: #f7f7f6 !important;
    }

    .list-group-item {
        background-color: #1c1c1e !important;
        color           : #f7f7f6 !important;
    }

    a {
        color: #3b82f6;
    }

    img {
        filter: grayscale(30%);
    }

    .card-footer,
    .table td,
    .table th {
        border-top: 1px solid rgba(152, 152, 158, .125)
    }

    .table-bordered td,
    .table-bordered th {
        border: 1px solid rgba(152, 152, 158, .125)
    }

    .card-header {
        border-bottom: 1px solid rgba(152, 152, 158, .125)
    }

    .border {
        border-color: #22232a !important;
    }

    .bg-light {
        background-color: #3d3d41 !important;
    }

    .text-dark {
        color: #f7f7f6 !important;
    }

    .navbar-light {
        background-color: #f7f7f6 !important;
    }

    select,
    input:not([type='submit']),
    .input-group-text,
    .btn-light {
        background-color: #3d3d41 !important;
        color           : #f7f7f6 !important;
        border-color    : #262526 !important;
    }

    .btn-outline-primary {
        background-color: #3d3d41 !important;
        color           : #f7f7f6 !important;
        border-color    : #262526 !important;
    }

    .custom-select {
        background: #3d3d41 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px !important;
    }

    .table {
        color: #f7f7f6;
    }

    .d-darkmode {
        display: block;
    }

    .d-lightmode {
        display: none;
    }


    .btn-outline-primary:hover {
        background-color: #3d3d41 !important;
    }

    hr {
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        display: inline-block;
        border-radius: 100%;
        background: #fff !important;
        opacity: .2;
    }

    .swiper-pagination-bullet-active {
        opacity: 1;
        background: #fff !important;
    }
}*/