/* ________________________________________ Calendar __________________________________________ */
@font-face {
    font-family: 'Montserrat';
    src: url('../../fonts/Montserrat.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat-SemiBold';
    src: url('../../fonts/static/Montserrat-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat-Bold';
    src: url('../../fonts/static/Montserrat-Bold.ttf') format('truetype');
}

/* HubL's path*/
/*@font-face {
    font-family: 'Montserrat';
    src: url({{ get_asset_url('/Redesign Uriel/fonts/Montserrat.ttf') }}) format('truetype');
}

@font-face {
    font-family: 'Montserrat-SemiBold';
    src: url({{ get_asset_url('/Redesign Uriel/fonts/static/Montserrat-SemiBold.ttf') }}) format('truetype');
}

@font-face {
    font-family: 'Montserrat-Bold';
    src: url({{ get_asset_url('/Redesign Uriel/fonts/static/Montserrat-ExtraBold.ttf') }}) format('truetype');
}*/

.bacTest {
    background: #F2FAFE;
}

.divCal {
    width: 814px;
    display: flex;
    justify-content: space-between;
}

.calendarDesktop {
    width: 814px;
    height: 300px;
    display: flex;
    flex-direction: column;
}

.flexCalendarDesk {
    display: flex;
    justify-content: space-between;
}

.calContainer {
    width: 368px;
    height: 300px;
}

.calContainer p {
    margin: 0;
}

.escogeFecha {
    text-align: left;
    font: normal normal 300 16px/20px Avenir;
    letter-spacing: 0px;
    color: #00A1ED;
    opacity: 1;
    width: 100%;
}

.txtMonth {
    text-align: center;
    font: normal normal 600 16px/19px Montserrat;
    letter-spacing: 0px;
    color: #00A1ED;
    opacity: 1;
    line-height: 36px;
}

.gridWeekDays {
    background-color: white;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.gridWeekDays > div {
    text-align: center;
    font: normal normal 15px/8px Montserrat-SemiBold;
    letter-spacing: 0px;
    color: #152049;
    opacity: 1;
    line-height: 36px;
}

.gridCalendar {
    background-color: white;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 0;

    text-align: center;
    font: normal normal 300 16px/40px Montserrat;
    letter-spacing: 0px;
    color: #A9B6C6;
    line-height: 36px;
}

.divBTNCal {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.btnDateClean {
    width: 140px;
    height: 40px;
    background: white 0% 0% no-repeat padding-box;
    opacity: 1;
    border: none;

    text-align: center;
    font: normal normal 16px/20px Avenir;
    letter-spacing: 0px;
    color: #A9B6C6;
    opacity: 1;

}

.btnDateClean:hover {
    border: 1px solid #A9B6C6;
}

.btnDateConfir {
    width: 140px;
    height: 40px;
    background: #33B5E5 0% 0% no-repeat padding-box;
    opacity: 1;
    border: none;

    text-align: center;
    font: normal normal 900 16px/20px Avenir;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin: 0 20px 0 16px;
}

.day {
    position: relative;
}

.day.active:hover {
    background: #F2FAFE;
}

.day > p {
    position: absolute;
    width: 100%;
    z-index: 2;
}

.day > span {
    position: absolute;
    top: -2px;
    right: 0;
    width: 100%;

    text-align: center;
    font: normal normal 11px/8px Montserrat-Bold;
    letter-spacing: 0px;
    color: #152049;
    opacity: 1;
}

/*_________ Día de salida _________*/
.day > .salida {
    position: absolute;
    bottom: 0px;
    right: -3px;
    background-image: url("https://tagairlines.com/img/calendario/ico-calendar-Ida.svg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
    height: 42px;
    width: 56px;
    z-index: 1;
}

.salida > span, .regreso > span {
    position: absolute;
    top: 4px;
    right: -8px;
    width: 100%;
    z-index: 2;

    text-align: left;
    font: normal normal normal 11px/8px Montserrat;
    letter-spacing: 0px;
    color: white;
    opacity: 1;
}

.txtDaySelected {
    font: normal normal bold 16px/8px Montserrat-Bold;
    color: white;
    line-height: 36px;
}

/*_________ Día de regreso _________*/
.day > .regreso {
    position: absolute;
    bottom: 0px;
    left: -3px;
    background-image: url("https://tagairlines.com/img/calendario/ico-calendar-regreso.svg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
    height: 42px;
    width: 56px;
    z-index: 1;
}

/*_________ Día de Salida/regreso _________*/
.day > .salida-regreso {
    position: absolute;
    bottom: 0px;
    right: -3px;
    height: 42px;
    width: 56px;
    z-index: 1;
    background: #00A1ED;
}

.salida-regreso > span {
    position: absolute;
    top: 4px;
    right: -11px;
    width: 100%;
    z-index: 2;

    text-align: left;
    font: normal normal normal 11px/8px Montserrat;
    letter-spacing: 0px;
    color: white;
    opacity: 1;
}

.salida-regreso > span.sal-reg {
    position: absolute;
    top: 31px;
    right: -6px;
    width: 100%;
    z-index: 2;

    text-align: left;
    font: normal normal normal 11px/8px Montserrat;
    letter-spacing: 0px;
    color: white;
    opacity: 1;
}

/*_________ Día de hoy _________*/
.txtToday {
    position: absolute;
    top: -2px;
    right: 0;
    width: 100%;

    text-align: center;
    font: normal normal 11px/8px Montserrat-Bold;
    letter-spacing: 0px;
    color: #152049;
    opacity: 1;
    z-index: 10;
}

.active {
    color: #2B2B2B;
}

.ranBac {
    background: #F2FAFE;
}

/*_________ Botones _________*/
.btnCalLeft {
    background-color: white;
    background-image: url("https://tagairlines.com/img/calendario/ico_calendar-left.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;

    border-radius: 10px;
    border: none;
    margin-right: 10px;
}

.btnCalRight {
    background-color: white;
    background-image: url("https://tagairlines.com/img/calendario/ico_calendar-right.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;

    border-radius: 10px;
    border: none;
    margin-left: 10px;
}

.btnCalLeft:hover, .btnCalRight:hover {
    border-radius: 10px;
    background-color: #F2FAFE;
}

.btnCalLeft:focus-visible, .btnCalRight:focus-visible {
    border-radius: 10px;
    outline: none;
}

/*_________ Menu meses _________*/
.divMonths {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.divMonths > p {
    text-align: center;
    font: normal normal 15px/8px Montserrat-SemiBold;
    letter-spacing: 0px;
    color: #A9B6C6;
    opacity: 1;
}

.divMonths > .mesActive {
    color: #152049;
}

/*____________________________________ Mobile version ______________________________________________________*/
.divLayoutMonthRes {
    width: 100%;
    max-height: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

@media (max-width: 920px) {
    .calendarDesktop {
        width: 372px;
        height: 267px;
        display: flex;
        flex-direction: column;
    }

    .txtMonth {
        width: 150px;
    }

    .divCal {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .divMonths {
        width: 300px;
        min-height: 30px;
        overflow-x: scroll;
    }

    .divMonths > p {
        min-width: 80px;
        margin: auto 5px;
    }

    .calendarDesktop {
        align-items: center;
        height: 315px;
    }

    .calContainer {
        width: 300px;
        height: 300px;
    }

    .btnCalRight, .btnCalLeft {
        padding: 2px 20px;
        margin: 0;
        background-size: 30%;
    }

    .day > .salida {
        right: -4px;
        height: 40px;
        width: 50px;
        bottom: 3px;
    }

    .day > .regreso {
        left: -4px;
        bottom: 3px;
        height: 40px;
        width: 50px;
    }

    .salida > span, .regreso > span {
        top: 5px;
        right: -10px;
        z-index: 2;
        font: normal normal normal 9px/8px Montserrat;
    }


    element.style {
    }

    .day > .salida-regreso {
        position: absolute;
        bottom: 0px;
        right: -3px;
        height: 40px;
        width: 50px;
    }

    .salida-regreso > span {
        font: normal normal normal 9px/8px Montserrat;

    }

    .salida-regreso > span.sal-reg {
        font: normal normal normal 9px/8px Montserrat;
        top: 29px;
    }
}