/*********************************
    IMPORT MAIN STYLE SHEET
**********************************/
@import "./main.css"; 


/*********************************
              MAIN
**********************************/
main{
    width:100vw;
    overflow:hidden;
}

form label input{
    display:none;
}

table{
    width:100%;
    border-collapse:collapse;
    border:1px solid rgba(1,1,1,0.2);
    border-radius:5px;
    overflow:hidden;
}

table thead{
    background-color:var(--dark);
    color:var(--cream);
}

table td, table th{
    padding:0.6rem;
}

table th{
    text-align:left;
}

table tbody tr:nth-child(even){
    background-color:#d8d8d8;
}


/*********************************
            DIVISIONS
**********************************/
.snackbar{
    width:100%;
    appearance: none;
    background-color: #fff1c8;
    border: 2px solid #ffe8aa;
    border-radius: 5px;
    box-sizing: border-box;
    color: #5e4712;
    margin: 0;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    will-change: transform;
    gap:5px;
}

.snackbar hgroup{
    flex-wrap:wrap;
    flex-direction:column;
    gap:5px;
}

.snackbar .icon{
    position:relative;
    top:2px;
}

.snackbar p{
    color:#5e4712;
    line-height:35px;
    margin:0;
}

.division_1{
    gap:1rem;
}

.division_1 .left_division, .division_1 .right_division{
    height:85vh;
}

@media (max-width:720px){
    .snackbar p{
        line-height:25px;
    }
    
    .division_1 .left_division, .division_1 .right_division{
        height:auto;
    }
}

/*LEFT_DIVISION*/
.left_division{
    width:250px;
    flex-wrap:wrap;
    flex-direction:column;
    justify-content:space-between;
}

@media (max-width:720px){
    .left_division{
        width:100%;
        height:350px !important;
        position:fixed;
        left:0;
        bottom:-320px;
        z-index:9;
        background-color:var(--white);
        border-radius:40px 40px 0 0;
        padding:1rem;
        padding-top:3rem;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
    
    .left_division:before{
        content:"";
        position:absolute;
        top:15px;
        left:50%;
        transform:translate(-50%, 0);
        width:50px;
        height:3px;
        border-radius:3px;
        background-color:var(--gray);
    }
}

.tab_transition_buttons{
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    gap:8px;
}

.tab_transition_btn{
    width:100%;
    min-width:100%;
    max-width:100%;
    padding:0.6rem;
    white-space:nowrap;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    color:var(--dark);
    border:0;
    background-color:transparent;
    cursor:pointer;
    position:relative;
    z-index:1;
}

.tab_transition_btn .icon{
    position:relative;
}

.tab_transition_btn:not(:last-child) .icon:before{
    content:"";
    position:absolute;
    top:100%;
    left:50%;
    width:1px;
    height:100%;
    transform:translate(-50%, 50%);
    background-color:rgba(1,1,1,0.3);
}

.tab_transition_buttons .active .icon:before, .tab_transition_buttons .filled .icon:before, .tab_transition_buttons .visited .icon:before{
    display:none;
}

.tab_transition_buttons .active, .tab_transition_buttons .filled, .tab_transition_buttons .visited, .left_division footer .tab_transition_btn{
    appearance: none;
    background-color: var(--black);
    border: 2px solid var(--dark);
    border-radius: 5px;
    box-sizing: border-box;
    color: var(--cream);
    margin: 0;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    will-change: transform;
}

.tab_transition_buttons .filled, .tab_transition_buttons .visited{
    background-color:var(--dark);
}

.tab_transition_btn{
    position:relative;
}

.tab_transition_buttons .active:after{
    content:"";
    display: inline-block;
    width: 20px;
    height: 20px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='4' cy='12' r='3' fill='%23000'%3E%3Canimate id='svgSpinners3DotsFade0' fill='freeze' attributeName='opacity' begin='0;svgSpinners3DotsFade1.end-0.25s' dur='0.75s' values='1;0.2'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3' fill='%23000' opacity='0.4'%3E%3Canimate fill='freeze' attributeName='opacity' begin='svgSpinners3DotsFade0.begin+0.15s' dur='0.75s' values='1;0.2'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3' fill='%23000' opacity='0.3'%3E%3Canimate id='svgSpinners3DotsFade1' fill='freeze' attributeName='opacity' begin='svgSpinners3DotsFade0.begin+0.3s' dur='0.75s' values='1;0.2'/%3E%3C/circle%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    position:absolute;
    top:50%;
    right:0.6rem;
    transform:translate(0, -50%);
}

.tab_transition_buttons .filled:after{
    content:"";
    display: inline-block;
    width: 20px;
    height: 20px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='lineMdCheckAll0'%3E%3Cg fill='none' stroke='%23fff' stroke-dasharray='24' stroke-dashoffset='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M2 13.5l4 4l10.75 -10.75'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.4s' values='24;0'/%3E%3C/path%3E%3Cpath stroke='%23000' stroke-width='6' d='M7.5 13.5l4 4l10.75 -10.75'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.4s' dur='0.4s' values='24;0'/%3E%3C/path%3E%3Cpath d='M7.5 13.5l4 4l10.75 -10.75'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.4s' dur='0.4s' values='24;0'/%3E%3C/path%3E%3C/g%3E%3C/mask%3E%3Crect width='24' height='24' fill='%23000' mask='url(%23lineMdCheckAll0)'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    position:absolute;
    top:50%;
    right:0.6rem;
    transform:translate(0, -50%);
}


/*RIGHT_DIVISION*/
.right_division .sections{
    background-color:var(--white);
    border-radius:5px;
    flex-wrap:wrap;
    flex-direction:column;
    gap:1rem;
    display:none;
}

.right_division .sections:not(:last-child){
    margin-bottom:1rem;
}

.right_division{
    overflow-y:auto;
}

.tab_transition_content form, .tab_transition_content form fieldset, .tab_transition_content form fieldset, .tab_transition_content form fieldset input{
    width:100%;
}

.tab_transition_content form fieldset{
    padding:0;
    margin:0;
}

.tab_transition_content form fieldset label{
    display:block;
    margin-bottom:5px;
    font-weight:600;
}

.tab_transition_content form fieldset .input_field{
    align-items:center;
    border:2px solid rgba(1,1,1,0.2);
    border-radius:5px;
}

.tab_transition_content form fieldset .input_field input, .tab_transition_content form fieldset .input_field select{
    width:100%;
    border:0;
    padding:0.8rem;
    font-weight:600;
    background-color:transparent;
    color:var(--gray);
}

.tab_transition_content form fieldset .input_field .icon{
    font-size:24px;
}

.tab_transition_content form .input_field_details{
    align-items:center;
    justify-content:space-between;
    margin-top:5px;
}

.tab_transition_content form .input_field_details .availability{
    display:flex;
    align-items:center;
    gap:5px;
}

.tab_transition_content .buttons{
    align-items:flex-end;
    justify-content:flex-end;
    margin-top:1rem;
}


/*SECTION_1*/
.right_division .section_1{
    display:flex;
}

/*SECTION_2*/
.section_2 form{
    flex-wrap:wrap;
    flex-direction:column;
    gap:1rem;
}

.image_labelled_buttons{
    align-items:center;
    justify-content:space-around;
    flex-wrap:wrap;
    flex-direction:row;
    gap:2rem;
}

.image_labelled_btn{
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.image_labelled_btn .icon, .image_labelled_btn p{
    display:block;
    margin:auto;
}

.image_labelled_btn .icon{
    filter:brightness(0) invert(0);
}

.image_labelled_btn input[type="radio"]:checked + .icon{
    filter:brightness(1) invert(0);
}

.section_2 table .icon{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
}