/* PAGE */

.state-page{
    display:flex;
    justify-content:center;
    gap:70px;

    padding-top:18px;
}

/* LEFT */

.state-left-section{
    width:382px;
        padding-right: 20px;
}

.state-region-row{
    display:flex;
    align-items:center;
    gap:14px;

    margin-left:62px;
    margin-bottom:26px;
}

.state-region-row label{
    font-size:14px;
}

.state-region-select{
    width:110px;
    height:30px;

    border:1px solid #c8c8c8;
    border-radius:4px;

    padding:0 8px;
}

/* TABLE */

.state-table-wrapper{
    height:520px;

    overflow-y:auto;

    border:1px solid #c7c7c7;

    background:#f3f0eb;
}

.state-table{
    width:100%;
    border-collapse:collapse;
}

.state-table th,
.state-table td{
    border:1px solid #cfc8bf;
}

.state-table th{
    height:34px;
    background:#ddd8d0;
    font-weight:600;
    color:#444;
    padding:4px;
}

.state-table th input{
    width:100%;
    height:26px;

    border:1px solid #d0d0d0;
    border-radius:4px;

    padding:0 8px;
}

.state-table td{
    height:28px;
    padding:0 6px;

      background:#ffffff; 
    color:#111;
}


.state-table tbody tr:nth-child(even) td{
          background:#f3f0eb; 
}

.state-table td:nth-child(2){
    width:90px;
    text-align:center;
}

.state-action{
    color:#ee9a22;
    cursor:pointer;
    margin:0 6px;
}

/* PLUS */

.state-side-btn{
    padding-top:52px;
}

.state-add-btn{
    width:34px;
    height:34px;

    border:none;
    border-radius:50%;

    background:#e79a2f;
    color:#fff;

    font-size:28px;
    line-height:1;

    cursor:pointer;

    padding-bottom:4px;
}

/* RIGHT */

.state-right-section{
    width:380px;
}

.state-placeholder{
    height:24px;

    border:1px solid #d0d0d0;

    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#444;

    margin-top:54px;
}

/* POPUP */

.state-popup-overlay{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.20);

    opacity:0;
    visibility:hidden;

    z-index:999;
}

.state-popup-overlay.active{
    opacity:1;
    visibility:visible;
}

.state-popup{
    position:fixed;

    top:55%;
    left:30%;

    transform:translate(-50%,-50%);

    width:410px;
    height:395px;

    background:#efefef;

    border-radius:8px;

    display:none;

    z-index:1000;
}

.state-popup.active{
    display:block;
}

.state-popup-header{
    height:48px;

    background:#1675ef;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 16px;

    color:#fff;
}

.state-popup-close{
    border:none;
    background:none;

    color:#fff;

    font-size:24px;

    cursor:pointer;
}

.state-popup-body{
    padding:24px;
}

.state-popup-body label{
    display:block;
    margin-bottom:8px;
}

.state-popup-body input{
    width:100%;
    height:30px;

    border:1px solid #d0d0d0;
    border-radius:4px;

    padding:0 8px;
}

.state-popup-footer{
    margin-top:18px;


    display:flex;
    justify-content:flex-end;
    gap:8px;
}

.state-cancel-btn{
    width:74px;
    height:38px;

    border:none;
    border-radius:6px;

    background:#737b86;
    color:#fff;
}

.state-save-btn{
    width:80px;
    height:38px;

    border:none;
    border-radius:6px;

    background:#1675ef;
    color:#fff;
}


@media (max-width:768px){

    .state-page{
        flex-direction:column;
        gap:20px;
        padding:15px;
    }

    .state-left-section,
    .state-right-section{
        width:100%;
        padding-right:0;
    }

    .state-region-row{
        margin-left:0;
        justify-content:center;
    }

    .state-side-btn{
        padding-top:0;
        display:flex;
        justify-content:center;
    }

    .state-table-wrapper{
        width:100%;
        overflow:auto;
    }

    .state-table{
        min-width:320px;
    }

    .state-placeholder{
        width:100%;
        margin-top:10px;
    }

    .state-popup{
        width:95%;
        height:auto;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }

    .state-popup-body{
        padding:18px;
    }

}