/* =========================
   CUSTOMER OVERLAY
========================= */
.CustBoxoverlay{
    position:absolute;
    inset:0;
    z-index:100002;

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

    background:rgba(0,0,0,.18);
}


/* =========================
   WINDOW
========================= */
.CustBox-window{
    width:400px;
    height:670px;

    background:#eef3f8;

    border:1px solid #7f9db9;
    border-radius:4px;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.7),
        0 5px 18px rgba(0,0,0,.35);

    padding:8px;
    box-sizing:border-box;

    font:11px Tahoma, Arial, sans-serif;
    color:#000;
}


/* =========================
   TITLE BAR
========================= */
.CustTitleBar{
    height:27px;

    margin:-8px -8px 8px -8px;

    background:linear-gradient(
        to bottom,
        #eaf5ff 0%,
        #c9e2f7 45%,
        #a7c8e7 100%
    );

    border-bottom:1px solid #7f9db9;

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

    padding:0 4px 0 9px;
    box-sizing:border-box;
}

.CustTitleText{
    color:#263d56;
    font:bold 12px Tahoma, Arial;
}


/* =========================
   CLOSE BUTTON
========================= */
.btnCustClose{
    width:25px !important;
    height:20px !important;

    padding:0 !important;
    margin:0 !important;

    background:linear-gradient(
        to bottom,
        #ffb9ad,
        #ef7561 45%,
        #d64934 100%
    ) !important;

    border:1px solid #9b3325 !important;
    border-radius:2px !important;

    color:#fff !important;

    font:bold 11px Tahoma, Arial !important;

    cursor:pointer;
}

.btnCustClose:hover{
    background:linear-gradient(
        to bottom,
        #ffc8bf,
        #f98570,
        #df4b35
    ) !important;
}


/* =========================
   SEARCH AREA
========================= */
.CustTop{
    display:grid;

    grid-template-columns:1fr 35px;

    gap:6px;

    margin-bottom:8px;
}

.CustSearch{
    width:100%;
    height:22px;

    padding:0 6px;

    background:#fff;

    border:1px solid #b8c0cf;

    box-sizing:border-box;

    font:10px Tahoma, Arial;

    color:#2d3640;

    outline:none;
}

.CustSearch:focus{
    border-color:#7c9fc7;

    box-shadow:
        0 0 0 1px rgba(124,159,199,.18);
}

.CustCount{
    height:22px;

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

    box-sizing:border-box;

    background:linear-gradient(
        #f8fafc,
        #dde4ec
    );

    border:1px solid #b8c0cf;

    color:#26384a;

    font:bold 10px Tahoma, Arial;
}


/* =========================
   HEADER
========================= */
.CustHeader{
    width:100%;

    margin-bottom:8px;
}


/* =========================
   CUSTOMER INFO
========================= */
.CustInfo{
    display:grid;

    grid-template-columns:102px 1fr;

    grid-auto-rows:22px;

    column-gap:7px;
    row-gap:4px;
}


/* Labels */
.CustInfo > span,
.CustInfo > label{
    height:22px;

    display:flex;
    align-items:center;

    padding:0 8px;

    box-sizing:border-box;

    background:linear-gradient(
        to bottom,
        #f4f7fb,
        #d7dde8
    );

    border-top:1px solid #fff;
    border-left:1px solid #fff;
    border-right:1px solid #b5bdca;
    border-bottom:1px solid #a5afbd;

    color:#26384b;

    font:bold 10px Tahoma, Arial;

    white-space:nowrap;
}


/* Textboxes */
.CustInfo > input[type="text"]{
    width:100%;
    height:22px;

    padding:0 6px;

    box-sizing:border-box;

    background:#fff;

    border:1px solid #b8c0cf;

    color:#292f36;

    font:10px Tahoma, Arial;

    outline:none;
}

.CustInfo > input[type="text"]:focus{
    border-color:#7b9fc7;
}


/* Disabled textbox */
.CustInfo > input[type="text"]:disabled{
    background:#edf0f4;

    color:#666;

    border-color:#c3c8d0;
}


/* =========================
   BUTTON AREA
========================= */
.CustBtns{
    grid-column:1 / 3;

    display:grid;

    grid-template-columns:102px 1fr;

    gap:7px;
}


/* GENERAL BUTTON */
.CustBtns input{
    height:22px;

    box-sizing:border-box;

    border-radius:3px;

    font:bold 10px Tahoma, Arial !important;

    cursor:pointer;

    transition:
        background .15s,
        border-color .15s,
        transform .05s;
}


/* =========================
   NEW ITEM BUTTON
========================= */
.CustBtns input.btnCustNew{
    background:linear-gradient(
        to bottom,
        #f7f5ff,
        #ded9f1 50%,
        #c9c1e7 100%
    ) !important;

    border:1px solid #9487bc !important;

    color:#3d345e !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9);
}

.CustBtns input.btnCustNew:hover:not(:disabled){
    background:linear-gradient(
        to bottom,
        #ffffff,
        #ebe7f8,
        #d4cdef
    ) !important;

    border-color:#7f70ae !important;
}


/* =========================
   SAVE DATA BUTTON
========================= */
.CustBtns input.btnCustSave{
    background:linear-gradient(
        to bottom,
        #fff8e9,
        #f1d69d 50%,
        #dfb65e 100%
    ) !important;

    border:1px solid #b88a36 !important;

    color:#51380f !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9);
}

.CustBtns input.btnCustSave:hover:not(:disabled){
    background:linear-gradient(
        to bottom,
        #fffdf6,
        #f8e3b7,
        #e9c372
    ) !important;

    border-color:#a97925 !important;
}


/* Press */
.CustBtns input:active:not(:disabled){
    transform:scale(.98);
}


/* Disabled */
.CustBtns input:disabled{
    opacity:.55;

    cursor:default;

    pointer-events:none;
}


/* =========================
   GRID CONTAINER
========================= */
.CustGridScroll{
    height:510px;

    overflow-y:auto;
    overflow-x:hidden;

    border:1px solid #adb8c6;

    background:#fff;

    box-sizing:border-box;
}


/* =========================
   GRIDVIEW
========================= */
.GVCompact{
    width:100%;

    border-collapse:collapse;

    table-layout:auto;

    font:11px Tahoma, Arial;

    color:#111;
}


/* HEADER */
.GVCompact th{
    height:25px;

    padding:0 6px;

    box-sizing:border-box;

    background:linear-gradient(
        to bottom,
        #ffffff 0%,
        #f1f1f1 50%,
        #dcdcdc 100%
    );

    border-right:1px solid #b6b6b6;
    border-bottom:1px solid #a9a9a9;

    text-align:left;

    font:bold 10px Tahoma, Arial;

    color:#202020;

    white-space:nowrap;
}


/* CELLS */
.GVCompact td{
    height:21px;

    padding:0 6px;

    box-sizing:border-box;

    border-right:1px solid #c3c3c3;
    border-bottom:1px solid #c7c7c7;

    font:10px Tahoma, Arial;

    color:#202020;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}


/* Odd rows */
.GVCompact tr:nth-child(odd) td{
    background:#e3e3e3;
}


/* Even rows */
.GVCompact tr:nth-child(even) td{
    background:#fafafa;
}


/* Hover */
.GVCompact tr:hover td{
    background:#d1e0f3;
}


/* Selected */
.GVCompact tr.selected td{
    background:#9fc1e7 !important;

    color:#102f50 !important;

    font-weight:bold;
}


/* Pointer */
.GVCompact tr{
    cursor:pointer;
}


/* Hide Select Column */
.GVCompact th:first-child,
.GVCompact td:first-child{
    display:none;
}


/* =========================
   SCROLLBAR
========================= */

.CustGridScroll::-webkit-scrollbar{
    width:11px;
}

.CustGridScroll::-webkit-scrollbar-track{
    background:#e7ebef;
}

.CustGridScroll::-webkit-scrollbar-thumb{
    background:#b6c0ca;

    border:2px solid #e7ebef;

    border-radius:5px;
}

.CustGridScroll::-webkit-scrollbar-thumb:hover{
    background:#929eaa;
}