/* bookingHourWidget.css */

.timeWiget{
    width:100%;
}

/* ===========================
   Header
=========================== */

.timeWiget-header{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#09090B;
    padding-bottom:20px;
    margin-bottom:20px;
    border-bottom:solid 0.1px #7373732d;
}

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

.timeWiget-header-btn-sectiions{
    width:20%;
}

.timeWiget-header-center-sectiion{
    width:60%;
}

.timeWiget-header-btn-left{
    width:50%;
    aspect-ratio:1/1;
    border-radius:50%;
    border:solid .1px #73737345;
    box-shadow:1px 1px 5px 1px #3838382c;
    background:#fff;
    cursor:pointer;

    background-image:url("/imgs/icons/arrow_left.svg");
    background-repeat:no-repeat;
    background-position:center;
    background-size:50% 50%;
}

.timeWiget-header-btn-right{
    width:50%;
    aspect-ratio:1/1;
    border-radius:50%;
    border:solid .1px #73737345;
    box-shadow:1px 1px 5px 1px #3838382c;
    background:#fff;
    cursor:pointer;

    background-image:url("/imgs/icons/arrow_right.svg");
    background-repeat:no-repeat;
    background-position:center;
    background-size:50% 50%;
}

.timeWiget-day{
    font-size:80%;
    font-weight:600;
}

/* ===========================
   Body
=========================== */

.timeWiget-body{
    width:100%;
}




/* AM / PM title */

.timeWiget-section-title{
     grid-column:1/-1;
    font-size:75%;
    font-weight:700;
    color:#71717A;
    margin-top:10px;
    margin-bottom:4px;
}

/* Hour item */

.am_hours, .pm_hours{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    width: 100%; 
    
}

.am_hours{
   margin-bottom: 20px;
}


.timeWiget-hour-parent{
    display: flex;
    aspect-ratio: calc(3/1);
    justify-content: center;
    align-items: center;
    background-color: rgba(228, 230, 230, 0.26);
    border-radius: 15px;
}

.timeWiget-hour-parent.timeWiget-hour-booked{
    opacity:.45;
    position:relative;
    pointer-events:none;
}

.timeWiget-hour-parent.timeWiget-hour-booked::after{
    content:"";
    position:absolute;
    left:20%;
    right:20%;
    top:50%;
    height:2px;
    background:#6d6a6a;
    transform:rotate(-25deg);
}


.timeWiget-hour{
    width: 70%;
    display: flex; justify-content: space-between;
    cursor: pointer;

   
}

.timeWiget-hour-booked{
    opacity:.4;
    position:relative;
    pointer-events:none;
}

.timeWiget-hour-booked::after{
    content:"";
    position:absolute;
    left:20%;
    right:20%;
    top:50%;
    height:2px;
    background:#666;
    transform:rotate(-25deg);
}

.timeWiget-hour-parent:hover{
    background:#bf28282c;
}


.timeWiget-hour-parent.selected{
    background:#BF2829;
}

.timeWiget-hour.selected{
    color:#fff;
    font-weight:600;
}

.timeWiget-hour.selected span{
    color:#fff;
}



.timeWiget-hour.disabled{
    opacity:.4;
    pointer-events:none;
}