:root{
    --white:#FFFFFF;
    --black-01:rgba(0,0,0,0.1);
    --gray:#868686;
    --soft-gray:#ededed;
    --dark-gray:#264534;
    --green:#75b781;
    --green-015:rgba(148, 188, 136, 0.15);
    --soft-red:#f29683;
    --soft-red-2:#FFD2CB;
    --red:#9F3620;
    --red02:#F8856E;
    --blue-2:#5360e1;
    --soft-blue-5:rgba(83, 96, 225, 0.40);
}

/* Base resets */
.tcalendar,
.tcalendar div,
.tcalendar a{box-sizing:border-box; position:relative;}

.tcalendar :focus{outline:none;}

.tcalendar a{color:var(--dark-gray); text-decoration:none; transition:all 0.35s ease-in-out;}

.tcalendar .row{width:100%; float:left;}

/* Label Time */
.tcalendar .label_calendar_time{margin:10px 0; font-size:0.750rem; color:var(--gray); text-align:center; justify-content:center;}

/* Calendar */
.tcalendar{width: 550px; min-height: 510px; display: flex; flex-wrap: wrap; padding: 0 15px 10px; align-content: space-between;}

/* Tabs */
.tcalendar .content_tabs{text-align:center; width: 100%; margin: 0; border: none;}

.tcalendar .content_tabs li{width: 49%; display:inline-block;}
.tcalendar .content_tabs li:first-child{margin:0 -4px 0 0;}

.tcalendar .content_tabs li a{height:40px; font-weight:700; font-size:0.875rem; color:var(--gray); border:var(--gray) 1px solid; display:flex; justify-content:center; flex-direction:column; text-transform: uppercase;}

.tcalendar .content_tabs li:first-child a{border-radius:100px 0 0 100px;}
.tcalendar .content_tabs li:last-child a{border-radius:0 100px 100px 0;}

.tcalendar.onsite .content_tabs li:first-child a:hover{background:var(--blue-2); color:var(--white);}
.tcalendar.onsite .content_tabs li:last-child a:hover{pointer-events: none;}

.tcalendar .content_tabs li a{color: var(--white); background: var(--blue-2);}
.tcalendar .content_tabs li:last-child a{background: transparent; color: var(--gray);}
.tcalendar.onsite .content_tabs li:first-child a{background: transparent; color: var(--gray);}
.tcalendar.onsite .content_tabs li:last-child a{background: var(--soft-red); color: var(--white);}

.tcalendar .content_tabs li:first-child a:hover{background:var(--blue-2); color:var(--white);}
.tcalendar .content_tabs li:last-child a:hover{background:var(--soft-red); color:var(--white);}


.tcalendar .content_availability{display: flex; justify-content: space-between; padding: 15px 25px; align-items: center;}
.tcalendar .content_availability::before{position: absolute; left: 25px; bottom: 0; width: calc(100% - 50px); height: 1px; background: var(--black-01); content: '';}

/* Left */
.tcalendar .content_availability .content_left{width: 49%;}

.tcalendar .content_availability .content_left span{font-size: 0.875rem; color: var(--gray);}

/* Container Calendar */
.tcalendar .container_calendar{display: flex; justify-content: space-between; margin: 10px 0 0;}

.tcalendar .container_calendar .content_day{width: calc(15% - 8px);}

/* Box */
.tcalendar .calendar_box{padding: 0 25px;}

.tcalendar .container_calendar .content_day .heading{margin: 0 0 15px;}

.tcalendar .container_calendar .content_day .heading .day{font-weight: 400; display: flex; justify-content: center; color: var(--gray); font-size: 0.875rem;}
.tcalendar .container_calendar .content_day.today .heading .day{font-weight: 700;}

.tcalendar .container_calendar .content_day .heading .number{font-weight: 700; display: flex; justify-content: center; color: var(--gray); font-size: 0.875rem}

/* Hours */
.tcalendar .container_calendar .content_day .hour{display: flex; flex-wrap: wrap; height: 35px; justify-content: center; align-items: center; border-radius: 4px; margin: 0 0 5px; background: var(--soft-blue-5); border: 1px solid var(--soft-gray);}
.tcalendar .container_calendar .content_day .hour:last-child{margin: 0;}
.tcalendar .container_calendar .content_day .hour span{color: var(--blue-2); font-weight: 600; font-size: 0.875rem;}
.tcalendar .container_calendar .content_day .hour .circle{display: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 10px; background: var(--blue-2);}
.tcalendar .container_calendar .content_day .hour .circle::before{position: absolute; width: 10px; height: 10px; background: var(--white); top: 4px; left: 4px; border-radius: 5px; content: '';}
.tcalendar .container_calendar .content_day .hour .circle svg{position: relative; width: 8px; height: 7px; flex-shrink: 0;}

.tcalendar .container_calendar .content_day .hour.selected{background: var(--blue-2);}
.tcalendar .container_calendar .content_day .hour.selected span{color: var(--white);}

.tcalendar .container_calendar .content_day .hour.confirmed{background: var(--blue-2);}
.tcalendar .container_calendar .content_day .hour.confirmed span{color: var(--white);}
.tcalendar .container_calendar .content_day .hour.confirmed .circle{display: flex;}

.tcalendar .calendar_box .btn_control{position: absolute; left: 0; top: 20px; width: 22px; height: 22px; background: var(--green); border-radius: 15px; display: flex; justify-content: center; align-items: center;}
.tcalendar .calendar_box .btn_control.next{left: unset; right: 0;}

.tcalendar .calendar_box .btn_control svg path{stroke: var(--white);}

.tcalendar .calendar_box .btn_control.disabled{background: var(--green-015); pointer-events: none;}
.tcalendar .calendar_box .btn_control.disabled svg path{stroke: #6B7280;}

.tcalendar.onsite .container_calendar .content_day .hour{background: var(--soft-red-2);}
.tcalendar.onsite .container_calendar .content_day .hour span{color: var(--red);}

.tcalendar.onsite .container_calendar .content_day .hour.selected{background: var(--red02);}
.tcalendar.onsite .container_calendar .content_day .hour.selected span{color: var(--white);}

.tcalendar.onsite .container_calendar .content_day .hour.confirmed{background: var(--red02);}
.tcalendar.onsite .container_calendar .content_day .hour.confirmed span{color: var(--white);}


.tcalendar.onsite .container_calendar .content_day .hour .circle{background: var(--red02);}

.tcalendar.onsite .container_calendar .content_day .hour .circle svg path{stroke: var(--red02);}


.tcalendar .container_calendar .content_day .hour.o_month_day{opacity: 1;}
.tcalendar .container_calendar .content_day .hour.disable{opacity: .2; pointer-events:none;}

.tcalendar .container_calendar .content_day .hour.disable::before{width:calc(100% - 10px); height:3px; background:var(--soft-blue-5); position:absolute; top:0; bottom:0; left:5px; margin:auto; content:'';}
.tcalendar.onsite .container_calendar .content_day .hour.disable::before{background:var(--red);}


.decisions_tree .content_decisions .box .content_steps .step.step_11 .tcalendar .content_tabs li a:hover,
.decisions_tree .content_decisions .box .content_steps .step.step_11 .tcalendar .content_tabs li a.active {
    color:var(--white);
}

@media (max-width: 1000px) {

    .tcalendar{width: 100%; padding:0 20px 10px;}

    .tcalendar .content_availability{flex-wrap: wrap; padding: 15px 0; row-gap: 10px;}

    .tcalendar .content_availability .content_left{width: 100%;}

    .tcalendar .calendar_box{padding: 0;}

    .tcalendar .container_calendar{padding:0 5px; box-sizing:border-box;}

    .tcalendar .container_calendar .content_day{width: calc(16% - 8px);}

    .tcalendar .container_calendar .content_day .heading{justify-content:center; display:flex; flex-wrap:wrap;}

    .tcalendar .container_calendar .content_day .heading .day{font-size: 0.625rem; display:inline-block; width:4ch; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center;}
    .tcalendar .container_calendar .content_day .heading .number{font-size: 0.625rem;}
    .tcalendar .container_calendar .content_day .hour span{font-size: 0.625rem}

    .tcalendar .calendar_box .btn_control{left: -20px;}
    .tcalendar .calendar_box .btn_control.next{right: -20px;}

}