/*
|--------------------------------------------------------------------------
| ROOT
|--------------------------------------------------------------------------
|
*/
:root{
    --dark: black;
    --primary: #3C5EC7;
    --success: #3AF397;
    --info: #7B99FF;
    --warning: #FEB219;
    --grey: #FAFAFA;
    --grey-metalic: #D9D9D9;
    --grey-dark: #797979;
    --electric-blue: #2F80ED;
    --white: #fff;

    --success-light: #D4F9E6;

    --radius-md: .25rem;
    --radius-lg: .5rem;
    --radius-xl: 1.5rem;

    --text-sm: .9rem;
    --text: 1rem;
    --text-normal: 1.25rem;
    --text-l: 1.5rem;
    --text-lg: 2rem;
}
/*
|--------------------------------------------------------------------------
| SIZE
|--------------------------------------------------------------------------
|
*/
.w-100{
    width: 100%;
}

/*
|--------------------------------------------------------------------------
| FONT
|--------------------------------------------------------------------------
|
*/


.fs-md{
    font-size: var(--text) !important;
}

.fs-l{
    font-size: var(--text-l) !important;
}

.fs-normal{
    font-size: var(--text-normal) !important;
}

.fw-100{
    font-weight: 100 !important;
}

.fw-200{
    font-weight: 200 !important;
}

.fw-300{
    font-weight: 300 !important;
}

.fw-400{
    font-weight: 400 !important;
}

.fw-500{
    font-weight: 500 !important;
}

.fw-700{
    font-weight: 700 !important;
}

.fw-700{
    font-weight: 700 !important;
}

.fw-800{
    font-weight: 800 !important;
}

.fw-900{
    font-weight: 900 !important;
}

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

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

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

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

.text-center{
    text-align: center !important;
}

/*
|--------------------------------------------------------------------------
| BACKFROUND
|--------------------------------------------------------------------------
|
*/
.bg-dark{
    background-color: var(--dark) !important;
}

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

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

.bg-electric-blue{
    background-color: var(--electric-blue) !important;
}

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

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

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

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

/*
|--------------------------------------------------------------------------
| BORDER
|--------------------------------------------------------------------------
|
*/

.bg__gray--navbar {
    width: 100%;
    background-color: #F5F5F5 !important;
    
}

header {
    background-color: #F5F5F5 !important;
}

.border-0{
    border: none !important;
}

.border-warning{
    border-color: var(--warning) !important;
}

.border-info{
    border-color: var(--info) !important;
}

.border-radius-sm{
    border-radius: .5rem !important;
}

.border-top{
    border-top: 1px solid #cdcdcd;
}

/*
|--------------------------------------------------------------------------
| GRID
|--------------------------------------------------------------------------
|
*/
.d-flex{
    display: flex;
}

.flex-column{
    flex-direction: column !important;
}

.justify-space-between{
    justify-content: space-between !important;
}

.justify-center{
    justify-content: center !important;
}

.align-center{
    align-items: center !important;
}

/*
|--------------------------------------------------------------------------
| BUTTONS
|--------------------------------------------------------------------------
|
*/
.button.button-default {
    display: flex;
    align-items: center;
    font-size: var(--text);
    font-weight: 700;
    border: 1px solid var(--dark);
    border-radius: var(--radius-md);
}

.button.button-default.button-default-lg{
    font-size: var(--text-l);
    font-weight: 500;
    text-align: center;
    border-radius: var(--radius-xl);
    padding: 1rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

.button.button-default.button-default-dark{
    background-color: var(--dark);
    color: #fff;
}

.button.button-default.button-default-warning{
    background-color: var(--warning);
    color: var(--white);
}

.button.button-default.button-default-info{
    background-color: var(--info);
    color: var(--white);
}

.button.button-default.button-default-outline-info{
    border: 1px solid var(--info) !important;
    color: var(--info) !important;
}


/*
|--------------------------------------------------------------------------
| TAGS
|--------------------------------------------------------------------------
|
*/

.badges{
    display: flex;
    flex-wrap: wrap;
}

.badges .badge{
    font-size: var(--text-sm);
    font-weight: 400;
    border: 1px solid var(--dark);
    border-radius: var(--radius-md);
    padding: 0 0.5rem;
    line-height: 1.5;
    margin-right: 0.25rem;
    display: flex;
    align-items: center;
    margin-bottom: .5rem;
}

.badges .badge:last-child{
    margin-right: 0;
}

.badges .badge.badge-info{
    border-color: var(--info);
    color: var(--info);
}

.badges .badge .badge--icon{
    color: var(--info);
    cursor: pointer;
    margin-left: .25rem;
}

/*
|--------------------------------------------------------------------------
| MODAL
|--------------------------------------------------------------------------
|
*/
.modal.modal-default {
    display: none; 
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100vh; /* Full height */
    /*overflow: auto;  Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
  
  /* Modal Content/Box */
  .modal.modal-default .modal_content {
    background-color: transparent;
    margin: 5% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid transparent;
    width: auto;
    height: 347px; /* Could be more or less, depending on screen size */
}

.modal.modal-full{
    padding: 0;
}

.modal.modal-full .modal_content{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
}

.modal.modal-full .modal__button-close{
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: var(--text-lg);
}

.modal.modal-full .modal_content--body {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #F5F5F5;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
    padding: 0;
    height: 100%;
    background-color: white;
}

/*
|--------------------------------------------------------------------------
| MODAL
|--------------------------------------------------------------------------
|
*/
.filters-modal{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding-bottom: 150px;
}

.filters-modal .filters-modal__header{
    width: 100%;
    background-color: var(--grey);
    padding: 1.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 1.5px 1.5px rgba(0, 0, 0, 0.1), 0px 1.5px 1.5px rgba(0, 0, 0, 0.1);
}

.filters-modal .filters-modal__body{
    width: 100%;
    padding: 1rem 1.5rem;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(0, 0, 0, 0.1);
}

.filters-modal .filters-footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

/*
|--------------------------------------------------------------------------
| RADIO SWITCH
|--------------------------------------------------------------------------
|
*/
.range-slider-default input[type="range"]{
    height: 0.5rem;
    overflow: visible;
}

.radio-switch-default.radio-switch-default-primary{
    border: 1px solid var(--primary);
}


 .range-slider__select-item{
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--dark);
    border: 1px solid var(--dark);
    border-radius: var(--radius-md);
    line-height: 1.5;
    padding: .5rem 1.25rem;
    min-width: 120px;
    display: flex;
    justify-content: space-between;
}

/*
|--------------------------------------------------------------------------
| CIRCLE
|--------------------------------------------------------------------------
|
*/
.circle{
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--dark);
    border: 1px solid var(--dark);
}

.circle.circle-md{
    width: 1.25rem;
    height: 1.25rem;
}

/*
|--------------------------------------------------------------------------
| ERROR SCREEN
|--------------------------------------------------------------------------
|
*/
.error__screen.error__screen-default{
    padding: 0 !important;
    background-color: var(--white);
    padding-bottom: calc(456px + 5rem) !important;
}

.error__screen.error__screen-default .container{
    width: 100%;
    padding: 2rem 4rem !important;
}

.error__screen.error__screen-default .error__title{
    font-size: 2rem;
}

.error__screen.error__screen-default .error__description{
    font-size: 1.5rem;
}

.error__screen.error__screen-default .error__links .link{
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.error__screen.error__screen-default .traffic__light--red{
    top: auto;
    bottom: calc(-456px - 2rem);
}

@media (min-width: 768px){
    .error__screen.error__screen-default{
        padding-bottom: 12rem !important;
    }

    .error__screen.error__screen-default .container{
        padding: 5rem 8rem !important;
    }

    .error__screen.error__screen-default .error__title{
        font-size: 2.5rem;
    }
    
    .error__screen.error__screen-default .error__description{
        font-size: 1.75rem;
    }
    
    .error__screen.error__screen-default .error__links .link{
        font-size: 1.75rem;
        margin-bottom: 1.5rem;
    }

    .error__screen.error__screen-default .traffic__light--red{
        top: 150px;
        bottom: 0;
    }
}

/*
|--------------------------------------------------------------------------
| POLITIC PAGE
|--------------------------------------------------------------------------
|
*/
.politic__page.politic__page-default{
    padding: 1.5rem 1rem !important;
    background-color: var(--white);
}

.politic__page.politic__page-default .terms__title{
    font-size: 2rem;
}

.politic__page.politic__page-default .terms__text{
    font-size: 1.25rem;
}

@media (min-width: 768px){
    .politic__page.politic__page-default{
        padding: 117px 100px !important;
        background-color: #F5F5F5;
        width: 100%;
    }

    .politic__page.politic__page-default .terms__title{
        font-size: 2.25rem;
    }
    
    .politic__page.politic__page-default .terms__text{
        font-size: 1.5rem;
    }
}

/*
|--------------------------------------------------------------------------
| TERMS PAGE
|--------------------------------------------------------------------------
|
*/
.terms__page.terms__page-default{
    padding: 1.5rem 1rem !important;
    background-color: var(--white);
}

.terms__page.terms__page-default .terms__title{
    font-size: 2rem;
}

.terms__page.terms__page-default .terms__text{
    font-size: 1.25rem;
}

@media (min-width: 768px){
    .terms__page.terms__page-default{
        padding: 117px 100px !important;
        background-color: #F5F5F5;
        width: 100%;
    }

    .terms__page.terms__page-default .terms__title{
        font-size: 2.25rem;
    }
    
    .terms__page.terms__page-default .terms__text{
        font-size: 1.5rem;
    }
}

/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
|
*/
.hero{
    background-color: var(--primary)
}

.hero .title{
    font-size: 2rem;
    font-weight: 500;
    color: var(--white);
}

.hero .description{
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--white);
}

/*
|--------------------------------------------------------------------------
| TITLE
|--------------------------------------------------------------------------
|
*/
.title-default{
    font-size: 2rem;
    font-weight: 600;
    color: var(--dark);
}

.description-default{
    font-size: 1rem;
    font-weight: 400;
    color: var(--dark);
}

/*
|--------------------------------------------------------------------------
| HR
|--------------------------------------------------------------------------
|
*/
.hr-default{
    border: 2px solid #F0F0F0;
}

/*
|--------------------------------------------------------------------------
| BAR
|--------------------------------------------------------------------------
|
*/
.bars{
    width: 100%;
    display: flex;
}

.bars .bars__item{
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    font-size: 1rem;
    font-weight: 400;
    color: var(--dark);
    padding: 0 .5rem;
}

.bars.bars-5 .bars__item{
    width: calc(100% / 5);
}


.bars .bars__item .values{
    display: flex;
    width: 100%;
}

.bars .bars__item .values .left{
    width: 50%;
    padding: .25rem;
    border-bottom: 7px solid var(--dark);
    display: flex;
    justify-content: center;
    font-weight: 400;
}

.bars .bars__item .values .right{
    width: 50%;
    padding: .25rem;
    border-bottom: 7px solid var(--info);
    color: var(--info);
    display: flex;
    justify-content: center;
    font-weight: 400;
}

.bars .bars__item .text{
    text-align: center;
    margin-top: .5rem;
    font-weight: 400;
}

/*
|--------------------------------------------------------------------------
| BADGE COLOR
|--------------------------------------------------------------------------
|
*/
.badge-color{
    width: 100%;
    display: flex;
}

.badge-color .badge-color__item{
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 500;
    padding: .5rem;
    position: relative;
    margin-right: 1rem;
}

.badge-color .badge-color__item:last-child{
    margin-right: 0;
}

.badge-color .badge-color__item::before{
    content: "";
    display: flex;
    margin-right: .75rem;
    width: 30px;
    height: 15px;
    border-radius: 2rem;
    background-color: var(--dark);
}

.badge-color .badge-color__item:nth-child(2)::before{
    background-color: var(--info);
}

/*
|--------------------------------------------------------------------------
| ALERT
|--------------------------------------------------------------------------
|
*/
.alert{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1rem 1.5rem;
    background-color: var(--success-light);
    border-radius: .5rem;
}

.alert .title{
    color: var(--dark);
    font-size: 1.25rem;
    font-weight: 600;
}

.alert .description{
    color: var(--dark);
    font-size: 1rem;
    font-weight: 400;
}

/*
|--------------------------------------------------------------------------
| BAR ROUNDED
|--------------------------------------------------------------------------
|
*/
.bar-rounded{
    display: flex;
    background-color: var(--dark);
    height: 15px;
    border-radius: 1rem;
}


/*
|--------------------------------------------------------------------------
| CARD CONTACT
|--------------------------------------------------------------------------
|
*/
.card-contact .card-contact__avatar{
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.card-contact .card-contact__title{
    font-size: 1rem;
    font-weight: 600;
}

.card-contact .card-contact__text{
    font-size: .9rem;
    font-weight: 400;
    color: var(--grey-dark);
}