:root {
    --blue: #208df3;
    --red: #e74c3c;
    --green:#4bbf73;
    --msg-green:#cdedd8;
    --msg-red:#f5c6ca;
    --lt-grey:#f2f6fc;
    --grey:#dee5ef;
    --md-grey:#899499
}

article{
    padding:2rem;
}

.summary-text{
    font-size: 1.3rem;
    text-transform: uppercase;
    font-weight: bold !important;
}

.dot {
    color: #db5555;
    font-size: 2rem;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem #14233c !important;
}

.bg-main {
    /* background-color: var(--blue) !important; */
    background-image: linear-gradient(to right, #14233c, #208df3) !important;
}

.bg-grey {
    background-color: #dee5ef !important;
}

.bg-error {
    background-color: #f5c6ca;
    font-size: 1rem;
    padding: 0 2rem;
}

.bg-lt-grey {
    background-color: var(--lt-grey) !important;
}

.mark-green{
    color: var(--green) !important;
    font-size: 1.4rem;
    font-weight: 900;
}

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

main {
    min-height: 80vh;
    /* background-color:#f7f7f9; */
}


.btn-main {
    /* background-color: #208DF3 !important;
    border-color: #208DF3 !important; */
    background-color:#14233c;
    background-image: linear-gradient(to right, #14233c, #208df3);
    border-radius: 10px !important;
    border: 2px solid #fff;
    color: #fff !important;
    padding: 1rem 2rem !important;
    margin:1rem;
    text-align: center !important;
    text-decoration: none;
    display: inline-block;
    font-size: 1.2rem;
}

.btn-main:hover {
    background-color: var(--blue) !important;
    background-image: linear-gradient(to right, #208df3, #14233c);
    border: 2px solid var(--grey) !important;
    border-radius: 10px !important;
    padding: 1rem 2rem !important;
}

.btn-main-outline{
    background-color: white !important;
    border: 2px solid #208DF3;
    border-radius: 10px !important;
    color:#208DF3 !important;
    padding: 1rem 4rem !important;
    margin: 1rem;
    text-align: center !important;
    text-decoration: none;
    display: inline-block;
    font-size: 1.2rem;
}

.btn-main-outline:hover {
    background-color:var(--grey) !important;
    border: 2px solid var(--grey) !important;
    color: var(--blue) !important;
    border-radius: 10px !important;
    padding: 1rem 4rem !important;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.error,
.errorlist {
    display: inline-block;
    margin-bottom: 15px;
    color: #333 !important;
    background-color: #f5c6ca !important;
    border-color: #f5c6ca;
    font-size: 1rem;
    padding: 0 2rem;
}

.msg-success {
    background-color: var(--msg-green) !important;
    padding:1rem;
    margin: 1rem;
    color: #333;
}

.msg-error {
    background-color: var(--msg-red) !important;
    padding: 1rem;
    margin: 1rem;
    color: #333;
}

.msg-warning {
    background-color: #ffdbbb !important;
    padding: 1rem;
    margin: 1rem;
    color: #333;
}

.help-block{
    color:var(--md-grey);
    font-size:.85rem;
}

.hide{
    display:none;
}

/* SLIDER */

.price-slider {
    margin-bottom: 10px;
}

.select-input {
    width: 90%;
    border: 3px solid #eeeeee;
    border-radius: 10px;
    padding: 1rem 2rem;
    font-weight: bold;
    font-size:1.2rem;
    margin: 0 0 25px 0px;
    background-color: #eeeeee;
}
.answer-input {
    width: 90%;
    border:3px solid #eeeeee;
    border-radius:10px;
    padding:1rem .5rem;
    font-weight: bold;
    margin:0 0 25px 0px;
    background-color: #eeeeee;
}

.select-input:active {
    border: 3px solid #14233c;
}

.slidecontainer {
    width: 100%;
    /* Width of the outside container */
}

/* The slider itself */
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 35px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s;
    /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1;
    /* Fully shown on mouse-over */
}

/* MOZ overide Firefox default look */
.slider::-moz-range-thumb {
    width: 25px;
    /* Set a specific slider handle width */
    height: 25px;
    /* Slider handle height */
    border: 8px solid #FF5733;
    background: #FFF;
    cursor: pointer;
    /* Cursor on hover */
}

.slider::-moz-range-progress {
    background-color: #FFF;
    height: 20px;
}

.slider::-ms-fill-upper {
    background-color: #ddd;
}

.slider::-ms-fill-lower {
    background-color: #14233c;
}

/* webkit- (Chrome, Opera, Safari, Edge) overide default look */
.slider::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 35px;
    border: 3px solid #d3d3d3;
    background: #d3d3d3;
    overflow: hidden;
    outline: none;
    opacity: 1.5;
    /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s;
    /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 35px;
    height: 31px;
    border:8px solid #FF5733;
    border-radius:5px;
    background: #FFF;
    /* white background when slider is moved */
    box-shadow: -410px 0 0 400px #FFF;
    cursor: pointer;  
}

.slider-label {
    font-size: 1.5rem;
    font-weight: bold;
}

@media screen and (max-width: 980px) {
    .select-input {
        width: 90%;
        border: none;
        padding: 1rem 1rem;
        font-weight: bold;
        font-size:1.2rem;
        margin: 0 0 25px 0px;
        background-color: #eeeeee;
    }

    .slider-label {
        font-size: 1.2rem;
    }
}

/* DETAIL SUMMARY */
summary::marker {
    color: #FF5733;
    font-size: 2em;
}

summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    font-weight: bold;
}

summary::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 0.8em solid #ff5733;
    border-inline: 0.8em solid transparent;
    transition: 0.2s;
}

details[open]>summary::after {
    transform: rotate(180deg);
}

summary::-webkit-details-marker {
    display: none;
}

summary h1 {
    display: inline;
}

/* FORM Inputs & Select */

.select-label{
    font-size:1.8rem;
    text-transform: uppercase;
    font-weight: bold !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
select {
    display: block;
    width: 100%;
    padding: .75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.7;
    color: #55595c;
    background-color: #f7f7f9;
    background-clip: padding-box;
    border: 0 solid #ced4da;
    margin-bottom: 5px;
    margin-top: 2px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-
}

input[type="text"]:focus {
    border-color: #8d8d8d;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(26, 26, 26, .25)
}
input[type="email"]:focus {
    border-color: #8d8d8d;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(26, 26, 26, .25)
}
input[type="password"]:focus {
    border-color: #8d8d8d;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(26, 26, 26, .25)
}

select:focus {
    border-color: #8d8d8d;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(26, 26, 26, .25)
}

/* LOADER */
.loader {
    margin: auto;
    width: 5rem;
    border: 10px solid  var(--lt-grey);
    /* Light grey */
    border-top: 10px solid var(--blue);
    /* Blue */
    border-radius: 50%;
    height: 5rem;
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* FORM CHECKBOX */
.form-check .form-check-round-input {
    float: left;
    margin-left: -1.5em;
    border: 3px solid #333;
    border-radius: 50% !important;
}

.form-check-round-input {
    --bs-form-check-bg: #f7f7f9;
    width: 1.5em;
    height: 1.5em;
    margin-top: .25em;
    vertical-align: top;
    appearance: none;
    background-color: var(--bs-form-check-bg);
    background-image: var(--bs-form-check-bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    print-color-adjust: exact;
}

.form-check-round-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-image: var(--bs-form-check-bg-image);
    background-color: #333;
    border-color: #333;
}

.form-check-label{
    margin: .25rem !important;
}

footer{ 
    color:#333;
    padding: 1.8rem 0 1.8rem 0;
}