.ctl-fon-ope-san #navbar-display-name {
    max-width: none;
}

.cmp-nav-bac {
    /* background-color: #f58585; */
    background-color: #ffffff;
    box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);
}

.cmp-dis-non {
    display: none;
}

.cmp-hom-bod {
    /* background-color: #f2d150; */
    background-color: #f3f3f9;
    /* background-color: #121212; */
}

.cmp-hom-bod footer {
    background-color: #f3f3f9;
    /* background-color: #000000; */
    /* color: #000000; */
    color: #ffffff;
}





.cmp-tit-blo h1 {
    /* color: #ffffff; */
    color: #212529;
    font-weight: 700;
    line-height: normal;
    font-size: 51px !important;
}

.cmp-par-blo {
    /* color: #ffffff !important; */
    color: #212529 !important;
    font-weight: 300;

    font-size: 18px !important;
    padding-bottom: 10px;
}

.ctl-txt-whi {
    color: #ffffff !important;
}



.ctl-nav-txt li a {
    color: #000000;
    font-size: 18px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: normal;
}

.ctl-log-btn a,
.cmp-log-btn button {
    border-radius: 5px !important;
    border-radius: 0;
    font-size: 20px !important;
    line-height: normal;
    letter-spacing: normal;
    min-height: auto;
    padding: 15px 20px;
    /* width: 280px; */
    width: 100%;
    display: block;
    margin: 0 !important;
    color: #ffffff;
    background-color: #16bd5b;
    border: 0;
    transition: all .5s ease-in-out;

}


.cmp-log-btn button:hover {
    color: #ffffff;
    background-color: #078e3f;
    border: 0;
    transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.ctl-log-btn a i {
    font-size: 19px !important;
}

.ctl-log-btn a:hover,
.ctl-log-btn a:focus,
.cmp-log-btn button:focus,
.cmp-log-btn button:focus-visible,
.cmp-log-btn button:active {
    color: #ffffff !important;
    background-color: #078e3f !important;
    border: 0;
    transition: all .5s ease-in-out;

}



.ctl-log-btn a:active {
    color: #ffffff;
    background-color: #078e3f !important;
    border: 0;
}

.ctl-log-btn a span {
    margin-right: 5px;
}

.cmp-nav-res-btn {
    background-color: #121212;
    color: #ffffff;
    padding: 10px 15px;
    font-size: 20px;
    /* margin-left: auto; */
    margin-right: auto;
}

.cmp-sec-nav-wid button.navbar-toggler {
    margin-left: auto;
}

.ctl-bor-sli-bot {
    border-bottom: 1px solid #e9e9e9;
}


.cmp-cus-hei {
    height: 95vh !important;
}

/*  */
.ctl-frm-inp-fie span {
    /* border-radius: 0; */
    padding: 15px 15px 15px 15px;
    width: 50px;
}

.ctl-frm-inp-fie input {
    border: none;
    /* border-radius: 0; */
    padding: 15px;
    font-size: 18px;
    line-height: normal;
    color: #000000;
}

.ctl-frm-inp-fie input:focus {
    box-shadow: none;

}

.ctl-frm-inp-fie input:-webkit-autofill,
.ctl-frm-inp-fie input:-webkit-autofill:hover,
.ctl-frm-inp-fie input:-webkit-autofill:focus,
.ctl-frm-inp-fie input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #121212;
}

.ctl-txt-psw-bot {
    color: #121212 !important;
    text-align: left !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px;
    font-size: 18px;
}

.ctl-btn-clo:focus {
    box-shadow: none;
}

.cmp-sta-not {
    /* left: 50% !important; */
    /* bottom: auto !important; */
    /* top: 15% !important; */
    /* transform: translate(-50%, -15%); */
}

.cmp-sta-not .status-error svg {
    margin: auto;
}

/* dasbboard css start */
.ctl-das-bac-col {
    background-color: #f3f3f9;
}

.cmp-das-col-blo {
    background-color: #fff !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
    border: 0;
    /* padding: 10px; */
    -webkit-transition: all .4s;
    transition: all .4s;
    height: 100%;
}

.cmp-das-col-blo .card-body h5 {
    color: #121212;
    /* color: #878a99; */
    font-weight: 600;

    border-bottom: 1px solid #f3f3f9;
    padding: 10px 15px;
}

.cmp-das-col-blo .card-body h5 span {
    padding-right: 5px;
}

.cmp-das-col-blo .card-body p {
    background-color: #ffffff !important;
    color: #000000c2;
    /* color: #121212; */
    /* color: #495057; */
    font-weight: 700;
    font-size: 32px;
}

.cmp-das-col-blo:hover {
    -webkit-transform: translateY(calc(-1.5rem / 5));
    transform: translateY(calc(-1.5rem / 5));
    -webkit-box-shadow: 0 5px 10px rgba(30, 32, 37, .12);
    box-shadow: 0 5px 10px rgba(30, 32, 37, .12);
    -webkit-transition: all .4s;
    transition: all .4s;
}


.cmp-tab-bac-col {
    height: 100%;
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
}

.ctl-tab-hdr-col {
    border-radius: 5px !important;

    padding: 15px 20px !important;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: flex-start !important;
    justify-content: flex-start !important;
    -webkit-align-items: center !important;
    align-items: center !important;
}

.cmp-hdr-mar-bot {
    margin-bottom: 10px;
}

.cmp-tab-ico-lft {
    margin-right: 20px;
}

.cmp-tab-ico-lft svg {
    /* background-color: white; */
    /* padding: 15px; */
    padding: 0px;
    border-radius: 0;
    /* height: 36px; */
    /* width: 36px; */
    /* height: 64px; */
    /* width: 64px; */
}

.cmp-tab-ico-lft svg {
    /* stroke: #ffffff; */
}

.ctl-tab-row-col tbody tr:nth-child(odd) {
    background-color: #fafafa;
}

.ctl-tab-row-col tbody tr,
.ctl-tab-row-mis tbody tr {
    transition: all .4s;
}

.ctl-tab-row-col tbody tr:hover,
.ctl-tab-row-mis tbody tr:hover {
    background-color: #f3f3f9;
    border-top: 0;
    border-left: 0;
    border-right-color: transparent;
    border-bottom-color: #eeeeee;
    border-left-color: #eeeeee;
    transition: all .4s;
}

.ctl-tab-row-col tbody tr,
.ctl-tab-row-col tbody td span,
.ctl-tab-row-mis tbody tr,
.ctl-tab-row-mis tbody td span {
    height: 60px;
}

.ctl-tab-row-col tbody td,
.ctl-tab-row-mis tbody td,
.ctl-tab-row-mis tbody td .input-theme-div input,
.ctl-tab-row-mis tbody td .input-theme-div select {
    font-size: 15px;
}




.cmp-ico-bac-col svg {
    padding: 15px;
    border-radius: 50%;
}

.cmp-ico-sal-ord svg {
    background-color: #fde8e4;
    color: #f06447;
}

.cmp-ico-gio-fon svg {
    color: #0ab39c;
    background-color: #daf4f0;
}

.cmp-ico-grn-fon svg {
    color: #299cdb;
    background-color: #dff0fa;
}

.cmp-ico-gdn-fon svg {
    color: #f7b84b;
    background-color: #fef4e4;
}

/* dasbboard css end */

.cmp-nav-pad-das {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.cmp-nav-pad-das .navbar-brand:focus-visible {
    outline: none;
}

.cmp-com-mar-top {
    margin: 70px auto auto auto;
}

.cmp-das-par-blo {
    width: 100%;
    padding: 50px 50px;
}

/* .cmp-rit-blo-nav {
    background-color: #e9e9e9; 
    height: 100%;
    padding: 10px 15px 10px 30px;
} */

.ctl-pro-ico-col {
    color: #000000;
    margin-right: 0;
    justify-content: flex-end;
}

.ctl-nav-lis-cus li a {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

.ctl-nav-lis-cus li a span {
    margin-left: 8px;
}


.ctl-nav-lis-cus .nav-item .nav-link.active {
    /* color: #000 !important; */
    /* background: #e9e9e9 !important; */
    /* border-radius: 4px !important; */

    color: #ffffff !important;
    background: #042144 !important;
    border-radius: 4px !important;
}

.ctl-nav-lis-cus .nav-item .nav-link a svg {
    height: 15px;
    width: 15px;
}

.ctl-log-drp-men {
    padding: 5px 5px;
    margin-top: 6px !important;
    border-radius: 6px;
    border: 0;
    overflow: hidden;
}

.ctl-log-drp-men li a {
    transition: all 0.4s;
    font-size: 14px;
}

.ctl-log-drp-men li a:hover {
    transition: all 0.4s;
}

.ctl-log-drp-men li a:active {
    background-color: #f3f3f9;
    color: #2c2c2c;
}

.ctl-nav-lis-cus .nav-link svg path {
    fill: #121212 !important;
}

.ctl-nav-lis-cus .nav-link.active svg path {
    stroke: #ffffff !important;
    fill: #042144 !important;
}

.cmp-col-rec-ord {
    background-color: #2196F3 !important;
}



.cmp-col-pur-ord {
    background-color: #009688 !important;
}



.cmp-hei-hun {
    height: 100%;
}

.cmp-col-pen-cus {
    background-color: #3f51b5 !important;
}


.cmp-col-pen-sub {
    background-color: #ef4f4c !important;
}

.ctl-col-rec-ord img,
.ctl-col-pur-ord img,
.ctl-col-pen-cus img,
.ctl-col-pen-sub img,
.ctl-col-gio-req img,
.ctl-col-grn-req img,
.ctl-col-pen-tas img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.ctl-col-rec-ord svg path,
.ctl-col-pur-ord svg path,
.ctl-col-pen-cus svg path,
.ctl-col-pen-sub svg path,
.ctl-col-gio-req svg path,
.ctl-col-grn-req svg path,
.ctl-col-pen-tas svg path {
    stroke: #ffffff;
}

.cmp-col-gio-req {
    background-color: #299cdb !important;
}



.cmp-col-grn-req {
    background-color: #0ab39c !important;
}



.cmp-col-pen-tas {
    background-color: #153468 !important;
}


.ctl-cus-btn-blo a {
    font-size: 15px !important;
    background-color: #ffffff !important;
    padding: 4px 12px !important;
    border-radius: 5px;
    transition: all 0.4s;
    border: 0;
}

.ctl-cus-btn-blo a:not(:last-child) {
    margin-right: 10px !important;
}

.ctl-cus-btn-blo a svg {
    margin-left: 6px;
    height: 24px;
}

.ctl-cus-btn-blo a:active {
    border: 0;
}

.ctl-cus-btn-blo a:hover {
    background-color: #000000 !important;
    transition: all 0.4s;
    color: #ffffff !important;
}

.ctl-cus-btn-blo a svg path {
    transition: all 0.4s;
}

.ctl-cus-btn-blo a:hover svg path {
    stroke: #ffffff !important;
    transition: all 0.4s;
}

.cmp-tab-inf-rit {
    width: 100%;
}

.ctl-txt-sal-ord a {
    color: #2196f3 !important;
}

.ctl-txt-sal-ord a svg path {
    stroke: #2196f3 !important;
}

.ctl-txt-pur-ord a {
    color: #009688 !important;
}

.ctl-txt-pur-ord a svg path {
    stroke: #009688 !important;
}

.ctl-txt-pen-cus a {
    color: #3f51b5 !important;
}

.ctl-txt-pen-cus a svg path {
    stroke: #3f51b5 !important;
}

.ctl-txt-pen-sub a {
    color: #ef4f4c !important;
}

.ctl-txt-pen-sub a svg path {
    stroke: #ef4f4c !important;
}

.ctl-txt-rio-req a {
    color: #299cdb !important;
}

.ctl-txt-rio-req a svg path {
    stroke: #299cdb !important;
}

.ctl-txt-grn-req a {
    color: #0ab39c !important;
}

.ctl-txt-grn-req a svg path {
    stroke: #0ab39c !important;
}

.ctl-pen-txt-par {
    font-size: 13px;
}


/* salesorderlist */

.cmp-sec-nav-blo,
.cmp-nes-nav-blo {
    margin-top: 70px;
}

.cmp-bac-sec-whi {
    background-color: #ffffff;
    padding: 10px 50px;
    position: sticky;
    top: 70px;
    z-index: 9;
}

.cmp-back-tab-del .navbar.subnav .nav-item .nav-link.active {
    background: #00dea3;
}

.cmp-back-tab-sal .navbar.subnav .nav-item .nav-link.active {
    background: #2196F3;
}

.cmp-back-tab-pro .navbar.subnav .nav-item .nav-link.active {
    background: #000000;
}

.cmp-back-tab-inv .navbar.subnav .nav-item .nav-link.active {
    background: #153468;
}

.cmp-sec-nav-wid {
    width: 100%;
}

.cmp-sec-nav-wid li:not(:last-child) {
    margin-right: 25px;
}

.cmp-sec-nav-wid .navbar.subnav .nav-item .nav-link.active {
    /* background: #000000; */
    border: 0;
    /* padding: 10px 40px; */
    color: #ffffff;
    border-radius: 5px;
}

.cmp-sec-nav-wid .navbar.subnav .nav-item .nav-link {
    padding: 8px 15px;
    cursor: pointer;
}

.cmp-sec-nav-wid .navbar.subnav .nav-item .nav-link svg path {
    stroke: #000000;
}

.cmp-sec-nav-wid .navbar.subnav .nav-item .nav-link.active svg path {
    stroke: #ffffff !important;
}

.cmp-sec-nav-wid .navbar.subnav {
    padding: 0;
}

.cmp-sec-nav-wid .navbar.subnav .navbar-toggler {
    padding: 6px 10px;
    border: 1px solid #e4e4e5;
    border-radius: 6px;
    background-color: #f5f4f7a1;
    color: #121212;
    height: 46px;
    font-size: 30px;
}

.cmp-sec-nav-wid .collapse.navbar-collapse {
    background: transparent;
    height: auto;
}

.cmp-nav-res-bac {
    margin-bottom: 0 !important;
    margin-top: 4px;
}

.cmp-nav-res-bac {
    border-radius: 5px;
}

.cmp-whi-sal-blo {
    background-color: #ffffff;
    padding: 0 30px 30px 30px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);

}

.cmp-whi-dem-blo {
    background-color: #ffffff;
    padding: 30px 30px 30px 30px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
}

.cmp-pge-hdr-div {
    border-bottom: 1px solid #DDE1EC;
    padding: 0 30px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.cmp-sub-hdr-div {
    border: 0;
    padding: 15px 30px;
    /* height: 94px; */
    height: 80px;
}

.cmp-ser-con-cus input,
.cmp-ser-con-cus .input-group-text {
    /* height: 43px !important; */
}

.cmp-ser-con-cus label {
    /* height: 43px; */
    padding: 1px 12px;

}

.cmp-pge-hdr-div .header-end-div {
    margin-right: 0;
}

.cmp-pge-hdr-div .header-end-div button,
.cmp-pge-hdr-div .header-end-div a {
    border-radius: 5px;
    transition: all .4s;
    border: none;
}

.cmp-pge-hdr-div .header-end-div button:hover {
    transition: all .4s;
}

.cmp-pge-hdr-div .header-end-div a:hover {
    transition: all .4s;
    border: none;
}

.ctl-sav-rep-btn,
.ctl-bak-ico-gre svg,
.ctl-cre-grn-btn {
    background: #00dea3;
    color: #ffffff;
    border: none;
    transition: all .4s;
}

.ctl-bak-ico-gre svg {
    /* border-radius: 5px; */
}

.ctl-sav-rep-btn svg path,
.ctl-bak-ico-gre svg path,
.ctl-cre-grn-btn svg path {
    stroke: #ffffff;
    transition: all .4s;
}

.ctl-sav-rep-btn:hover,
.ctl-bak-ico-gre svg:hover,
.ctl-cre-grn-btn:hover {
    background: #069f73;
    transition: all .4s;
}

.btn-status {
    background: #1e4c99;
    color: white;
}

.btn-status:hover {
    background: #153468;
    color: white;
}

.btn-shortfall {
    background: #2196F3;
    color: white;
}

.btn-shortfall:hover {
    background: #0082EA;
    color: white;
}

.btn-instock {
    background: #00cE92;
    color: white;
}

.btn-instock:hover {
    background: #069f73;
    color: white;
}

.cmp-bod-ani-dur {
    animation-duration: 1.8s;
}

.cmp-pag-cus-col button,
.ctl-pag-sub-col button {
    background: #00dea3;
    border: 2px solid transparent !important;
    transition: all .4s;
    color: #FFFFFF;
}

.cmp-pag-cus-col button:hover,
.ctl-pag-sub-col button:hover {
    background: #069f73;
    transition: all .4s;
}

.cmp-pag-cus-col button:hover svg path,
.ctl-pag-sub-col button:hover svg path {
    stroke: #ffffff;
}

.cmp-pag-cus-col button.disabled:hover {
    background-color: #F5F4F7;
}

.cmp-pag-cus-col button.disabled:hover svg path,
.ctl-pag-sub-col button.disabled:hover svg path {
    stroke: #2D3B3680 !important;
}

/*  */
.cmp-del-frm-cus {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
    border: 0;
    padding: 0;
}

.cmp-emp-zer-top {
    padding-top: 0 !important;
}

.cmp-det-pag-hdr {
    padding: 15px 25px;
    border-bottom: 1px solid #f3f3f9;
    margin-bottom: 0 !important;
}

.cmp-cus-po-blo {
    padding: 25px 25px 25px 25px;
}

.cmp-del-pag-nav {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
    border: 0;
    color: #000000;
    /* transition: all .3s; */
}

.cmp-del-pag-nav .detail-page-nav-item.active {
    background: #00dea3;
    color: #ffffff;
    /* transition: all .4s; */
}

.cmp-txt-are-hie {
    height: auto !important;
}

.cmp-txt-are-hie textarea:focus {
    box-shadow: none;
    border-color: transparent;
}

.cmp-btn-clo-ico {
    color: #ffffff;
    background-color: #ef4f4c;
    border-radius: 9px;
    transition: all .4s;
    border: 0 !important;
}

.cmp-btn-clo-ico svg path {
    stroke: #ffffff;
}

.cmp-btn-can {
    color: #ffffff;
    background-color: #ef4f4c;
    border-radius: 5px;
    transition: all .4s;
    border: 0;
}



.cmp-btn-can:hover {
    background-color: #da3734;
    transition: all .4s;
}

.cmp-btn-sav {
    color: #ffffff;
    background-color: #00dea3;
    border-radius: 5px;
    transition: all .4s;
    border: 0;
}

.cmp-btn-sav:hover {
    background-color: #069f73;
    transition: all .4s;
}

.cmp-btn-sav svg path {
    stroke: #ffffff;
}

.cmp-sub-hdr-btn {
    padding-right: 0;
}

.cmp-chk-int-btn,
.cmp-add-itm-btn {
    border-radius: 5px;
    min-height: 35px
}

.theme-body-modal-div .theme-body-container {
    top: 70px;
    width: 100%;
    height: calc(100% - 69px);
    /* border-top-right-radius: 23px; */
    /* border-top-left-radius: 23px; */
    border-radius: 5px;
    left: 50%;
    transform: translateX(-50%);
}



.cmp-det-pag-con {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
    border: 0;
    padding: 0;
}

.cmp-det-pag-con .tag-item {
    padding: 15px 15px;
    border-bottom: 1px solid #f3f3f9;
}

.cmp-pat-btn-bar {
    padding: 0px 25px 25px 25px;
}

.cmp-tag-blo-pad {
    padding: 15px 15px;
}

.cmp-tag-blo-sid input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.ctl-tag-add-btn {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    background: #00DEA3;
    border: 1px solid #00DEA3;
    transition: all .4s;
}

.ctl-tag-add-btn:hover {
    background: #069f73;
    border: 1px solid #069f73;
    transition: all .4s;
}

.cmp-lis-box-rit li {
    margin-bottom: 15px;
    border: 0 !important;
    padding: 10px !important;
}

.cmp-lis-box-rit li button:focus,
.cmp-lis-box-rit li button:active {
    outline: none;
    box-shadow: none;
    border: 0;
}

.cmp-lis-box-rit .list-item button {
    border: 0;
}

.cmp-lis-box-rit li:nth-child(odd) {
    background-color: #fde8e4;
    color: #f06447;
}

.cmp-lis-box-rit li:nth-child(odd) button svg path {
    stroke: #f06447;
}

.cmp-lis-box-rit li:nth-child(even) {
    color: #0ab39c;
    background-color: #daf4f0;
}

.cmp-lis-box-rit li:nth-child(even) button svg path {
    stroke: #0ab39c;
}

.cmp-pge-con-pad {
    padding: 30px 15px;
}

.cmp-mod-pop-rad {
    border-radius: 5px;
    padding: 0;
}

.cmp-mod-hdr-pag {
    border-bottom: 1px solid #e9ecef !important;
    padding: 15px 20px !important;
}

.cmp-mod-pad-all {
    padding: 20px 20px 20px 20px;
}

.cmp-lad-fot-btn {

    padding: 0 20px 20px 20px !important;
}

.ctl-btn-pop-can {
    background-color: #ef4f4c;
    color: #ffffff;
    transition: all .4s;
}

.ctl-btn-pop-can:hover {
    background-color: #da3734;
    color: #ffffff;
    transition: all .4s;
}


.ctl-btn-pop-und {
    background-color: #3f51b5;
    color: #ffffff;
    transition: all .4s;
}

.ctl-btn-pop-und:hover {
    background-color: #303f96;
    color: #ffffff;
    transition: all .4s;
}

.ctl-btn-pop-sav {
    background-color: #00dea3;
    color: #ffffff;
    transition: all .4s;
}

.ctl-btn-pop-sav:hover {
    background-color: #069f73;
    color: #ffffff;
    transition: all .4s;
}

.ctl-btn-pop-res {
    background-color: #299cdb;
    color: #ffffff;
    transition: all .4s;
}

.ctl-btn-pop-res:hover {
    background-color: #167fb8;
    color: #ffffff;
    transition: all .4s;
}

.ctl-btn-pop-can,
.ctl-btn-pop-und,
.ctl-btn-pop-sav,
.ctl-btn-pop-res {
    height: auto;
    border-radius: 5px;
    font-size: 14px;
    min-height: auto;
    padding: 6px 19px;
    border: 0;
}

.ctl-btn-pop-can:hover,
.ctl-btn-pop-und:hover,
.ctl-btn-pop-sav:hover,
.ctl-btn-pop-res:hover {
    border: 0;
}

.btn-close:focus {
    box-shadow: none;

}

.ctl-sta-suc-whi svg path {
    stroke: #ffffff;
}

.ctl-fon-rud-siz .detail-page-nav-item {
    font-size: 13px;
    padding-right: 12px;
    padding-left: 12px;
}

.ctl-gre-les-ico .dual-listbox .dual-listbox__buttons button {
    background-color: #00dea3 !important;
    transition: all 0.4s;
}

.ctl-gre-les-ico .dual-listbox .dual-listbox__buttons button:hover {
    background-color: #069f73 !important;
    transition: all 0.4s;
}

.input-theme-div.form-floating>.form-control:focus~label,
.input-theme-div.form-floating>.form-control:not(:placeholder-shown)~label,
.input-theme-div.form-floating>.form-select~label {
    height: 22px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.table.theme-table .ss-main {
    border-color: #dde1ec !important;
}

.ctl-txt-pad-top {
    padding-top: 5px;
}

.ctl-txt-tra-low {
    text-transform: lowercase !important;
}

.theme-table tbody td span button {
    font-size: 15px;
}

/* start font */
.ctl-nav-lis-cus li .nav-link {
    color: #121212;
}

.ctl-fon-ope-san li a span {
    font-weight: 600;
    font-size: 16px;
}

.ctl-fon-ope-san li a span,
.cmp-sec-nav-wid .navbar.subnav .nav-item .nav-link,
.ctl-log-drp-men li a,
.theme-card-home .card-title,
.theme-card-home .card-text,
.theme-card-header,
.ctl-cus-btn-blo a,
.theme-primary-btn,
.theme-table thead th,
.theme-table tbody td,
.theme-outline-btn {
    font-family: 'Open Sans', sans-serif !important;
}

.detail-page-header,
.input-theme-div input,
.input-theme-div select,
.input-theme-div.form-floating>label,
.floating-label label,
.detail-page-nav .detail-page-nav-item,
.ss-main .ss-values .ss-single,
.theme-modal-secondary-btn,
.theme-modal-primary-btn,
.theme-secondary-btn,
.detail-page-tags-div .tag-item,
.form-control,
.file-download-div .theme-link,
#secondary-roles-div {
    font-family: 'Open Sans', sans-serif !important;
}

#secondary-roles-div {
    font-weight: normal;
}

.home-body .home-header-text,
.home-body .home-subtext,
.ctl-log-btn a,
.ctl-txt-psw-bot {
    font-family: 'Open Sans', sans-serif !important;
}

.ctl-fon-ope-sou h2 {
    font-family: 'Open Sans', sans-serif !important;
    overflow: visible;
}

#navbar-display-name,
#navbar-display-id,
.header-end-div button {
    font-family: 'Open Sans', sans-serif !important;
}

.ctl-fon-rob-oto {
    font-family: 'Roboto', sans-serif;
}

/* end font */

.cmp-log-blo-bck {
    display: table-cell;
    vertical-align: middle;
    padding-right: 90px;
}


.cmp-log-hei-vh,
.ctl-pic-hei-vh img {
    height: 100vh;
}

.ctl-pic-hei-vh {
    padding-right: 0;
    padding-left: 0;

    overflow: hidden;
    height: 100%;
}

.ctl-log-pic-cus {
    width: 100%;
    height: auto !important;
    display: block;
}

.cmp-lft-blo-pad {
    /* padding: 0; */
    height: 100vh;
    border-top-right-radius: 100px;
    background: #f3f3f9;
    border-bottom-right-radius: 100px;
    position: relative;
    left: 80px;
    display: table;
}

.ctl-act-sta-txt {
    background-color: #00DEA3;
    transition: all 0.4s;
    color: #ffffff;
}

.ctl-act-sta-txt:hover {
    background-color: #069f73;
    transition: all 0.4s;
    color: #ffffff;
}





.cmp-inv-pop-wid {
    width: 96% !important;
}

.cmp-mod-inv-hdr {
    border-bottom: 1px solid #DDE1EC;
    padding: 0 30px !important;
}

.cmp-inv-bor-non {
    border: 0;
    padding: 15px 20px 0 20px;
    height: 94px;
}

.cmp-mod-inv-bod {
    padding: 20px 20px 20px 20px;
}

.cmp-inv-bod-lar {
    padding: 0 15px;
}

.cmp-pop-bot-non {
    border: 0;
}

.cmp-mod-gio-itm {
    padding: 30px;
}


.cmp-gio-itm-clo.theme-body-modal-div .theme-body-container .theme-body-footer {
    padding: 0 30px 30px 30px !important;
}

.cmp-mod-gio-hdr {
    border-bottom: 1px solid #e9ecef !important;
    padding: 15px 20px !important;
}

.cmp-the-bod-pad {
    padding: 0 20px 20px 20px;
}

.ctl-ali-sor-ico thead tr th span:after {
    width: 15px;
    margin-left: 5px;
}

/* .sortable th span::after,
.sortable-main th span:hover::after {
    width: 15px;
    padding-left: 5px;
    padding-bottom: 1px;
} */

.cmp-txt-are-hie textarea {
    border-color: transparent;
}


.cmp-btn-bck {
    font-size: 15px;
    color: #ffffff;
    background-color: #00dea3;
    border-radius: 5px;
    transition: all .4s;
    border: 0;
    padding: 8px 20px;
}

.cmp-btn-bck:hover {
    background-color: #069f73;
    transition: all .4s;
}

.cmp-btn-bck svg {
    margin-right: 3px;
    height: 16px;
    width: 16px;
}

.cmp-btn-bck svg path {
    stroke: #ffffff;
}

/*  */
.ctl-tag-mar-bot {
    margin-bottom: 30px;
}

.cmp-res-das-blo,
.cmp-com-mar-bot {
    margin-bottom: 25px;
}

.cmp-res-das-grd {
    grid-template-columns: repeat(auto-fit, minmax(350px, 33.33%));
    display: grid;
}

.cmp-com-mar-bot {

    width: 100%;
}

.cmp-com-mar-blo {
    margin-top: 25px;
    margin-bottom: 25px;
}

.cmp-nes-nav-blo .header-end-div button#print-grn-btn,
.cmp-nes-nav-blo .header-end-div button#create-order-btn,
.cmp-nes-nav-blo .header-end-div button.theme-approve-btn,
.cmp-nes-nav-blo .header-end-div button#print-sof-btn,
.cmp-nes-nav-blo .header-end-div button#print-spo-btn {
    border-radius: 5px;
    border: none;
    background-color: #00dea3;
}

.cmp-nes-nav-blo .header-end-div button#create-order-btn {
    opacity: 1;
}

.cmp-nes-nav-blo .header-end-div button#print-so-btn {
    border-radius: 5px;
    border: none;
    background-color: #00dea3;
    color: #ffffff;
}

.cmp-nes-nav-blo .header-end-div button#update-gio-btn,
.cmp-nes-nav-blo .header-end-div button#print-gio-btn,
.cmp-nes-nav-blo .header-end-div button#create-customer-btn {
    border-radius: 5px;
    border: none;
    background-color: #00dea3;
}

.cmp-nes-nav-blo .header-end-div button#waiting-for-approval,
.cmp-nes-nav-blo .header-end-div button.theme-secondary-header-btn {
    border: none;
    background-color: #2196F3;
    border-radius: 5px;
    color: #ffffff;
}

.cmp-nes-nav-blo .header-end-div button#sent-for-approval-btn,
.cmp-nes-nav-blo .header-end-div button.theme-outline-btn,
.cmp-nes-nav-blo .header-end-div button#update-grn-btn {
    border: none;
    background-color: #00dea3;
    border-radius: 5px;
    color: #ffffff;
}

.cmp-nes-nav-blo .header-end-div button.theme-outline-btn svg path {
    stroke: #ffffff;
}



.cmp-nes-nav-blo .header-end-div button.theme-reject-btn {
    border: none;
    background-color: #ef4f4c;
    border-radius: 5px;
    color: #ffffff;
}


/* Table Css  */
.table-responsive{
    height: auto !important;
    overflow: auto !important;
}
.theme-table thead{
    position: sticky;
    top: -1px;
    background-color: #fff !important;
}
.theme-table thead tr{
    background-color: #fff !important;
}
.mip-row.red:hover{
    background-color: #c4334f !important;
}
.mip-row.green:hover{
    background-color: #09a87e !important ;
}
.mis-row.yellow:hover{
    background-color: #dada00 !important;
}
.mis-row.green:hover{
    background-color: #09a87e !important ;
}
.mis-row.red:hover{
    background-color: #c4334f !important;
}
.mis-row.blue:hover{
    background-color: #149dce !important;

}
/* UI Issue  */
.ss-content.ss-open-below{
    z-index: 999;
}
.modal-date-container{
    justify-content: center;
}
.modal-date-content{
    width: 50% !important;
}
.scroll-aliment{
  overflow: auto;
}
 @media(max-width: 320px){
     .user-names{
       font-size: 11px !important;
     }
     .user-emails{
         font-size: 11px !important;
     }
     .logo-img{
        max-width: 50px !important;
     }
     .cmp-nav-res-btn{
        padding: 5px 8px !important;
     }
     .profile-pic-btn {
        font-size: 22px !important;
        width: 28px !important;
     }
     .modal-date-content{
        width: 100% !important;
    }
    .create-btn{
        margin-left: 0px !important;
    }
    .create-btn-aliment{
        overflow: unset !important;
    }
    .theme-checkbox {
        width: 40px !important;
    }
 }
 @media (min-width: 321px) and (max-width: 766px){
    .user-names{
        font-size: 12px !important;
      }
      .user-emails{
          font-size: 12px !important;
      }
      .logo-img{
         max-width: 50px !important;
      }
      .modal-date-content{
        width: 100% !important;
    }
    .theme-checkbox {
        width: 32px !important;
    }
 }
.sortable-main th .file-Upload:hover::after{
    display: none !important;
 } 

.ctl-fon-ope-san #navbar-display-name {
    max-width: none;
}

.cmp-nav-bac {
    /* background-color: #f58585; */
    background-color: #ffffff;
    box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);
}

.cmp-dis-non {
    display: none;
}

.cmp-hom-bod {
    /* background-color: #f2d150; */
    background-color: #f3f3f9;
    /* background-color: #121212; */
}

.cmp-hom-bod footer {
    background-color: #f3f3f9;
    /* background-color: #000000; */
    /* color: #000000; */
    color: #ffffff;
}





.cmp-tit-blo h1 {
    /* color: #ffffff; */
    color: #212529;
    font-weight: 700;
    line-height: normal;
    font-size: 51px !important;
}

.cmp-par-blo {
    /* color: #ffffff !important; */
    color: #212529 !important;
    font-weight: 300;

    font-size: 18px !important;
    padding-bottom: 10px;
}

.ctl-txt-whi {
    color: #ffffff !important;
}



.ctl-nav-txt li a {
    color: #000000;
    font-size: 18px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: normal;
}

.ctl-log-btn a,
.cmp-log-btn button {
    border-radius: 5px !important;
    border-radius: 0;
    font-size: 20px !important;
    line-height: normal;
    letter-spacing: normal;
    min-height: auto;
    padding: 15px 20px;
    /* width: 280px; */
    width: 100%;
    display: block;
    margin: 0 !important;
    color: #ffffff;
    background-color: #16bd5b;
    border: 0;
    transition: all .5s ease-in-out;

}


.cmp-log-btn button:hover {
    color: #ffffff;
    background-color: #078e3f;
    border: 0;
    transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.ctl-log-btn a i {
    font-size: 19px !important;
}

.ctl-log-btn a:hover,
.ctl-log-btn a:focus,
.cmp-log-btn button:focus,
.cmp-log-btn button:focus-visible,
.cmp-log-btn button:active {
    color: #ffffff !important;
    background-color: #078e3f !important;
    border: 0;
    transition: all .5s ease-in-out;

}



.ctl-log-btn a:active {
    color: #ffffff;
    background-color: #078e3f !important;
    border: 0;
}

.ctl-log-btn a span {
    margin-right: 5px;
}

.cmp-nav-res-btn {
    background-color: #121212;
    color: #ffffff;
    padding: 10px 15px;
    font-size: 20px;
    /* margin-left: auto; */
    margin-right: auto;
}

.cmp-sec-nav-wid button.navbar-toggler {
    margin-left: auto;
}

.ctl-bor-sli-bot {
    border-bottom: 1px solid #e9e9e9;
}


.cmp-cus-hei {
    height: 95vh !important;
}

/*  */
.ctl-frm-inp-fie span {
    /* border-radius: 0; */
    padding: 15px 15px 15px 15px;
    width: 50px;
}

.ctl-frm-inp-fie input {
    border: none;
    /* border-radius: 0; */
    padding: 15px;
    font-size: 18px;
    line-height: normal;
    color: #000000;
}

.ctl-frm-inp-fie input:focus {
    box-shadow: none;

}

.ctl-frm-inp-fie input:-webkit-autofill,
.ctl-frm-inp-fie input:-webkit-autofill:hover,
.ctl-frm-inp-fie input:-webkit-autofill:focus,
.ctl-frm-inp-fie input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #121212;
}

.ctl-txt-psw-bot {
    color: #121212 !important;
    text-align: left !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px;
    font-size: 18px;
}

.ctl-btn-clo:focus {
    box-shadow: none;
}

.cmp-sta-not {
    /* left: 50% !important; */
    /* bottom: auto !important; */
    /* top: 15% !important; */
    /* transform: translate(-50%, -15%); */
}

.cmp-sta-not .status-error svg {
    margin: auto;
}

/* dasbboard css start */
.ctl-das-bac-col {
    background-color: #f3f3f9;
}

.cmp-das-col-blo {
    background-color: #fff !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
    border: 0;
    /* padding: 10px; */
    -webkit-transition: all .4s;
    transition: all .4s;
    height: 100%;
}

.cmp-das-col-blo .card-body h5 {
    color: #121212;
    /* color: #878a99; */
    font-weight: 600;

    border-bottom: 1px solid #f3f3f9;
    padding: 10px 15px;
}

.cmp-das-col-blo .card-body h5 span {
    padding-right: 5px;
}

.cmp-das-col-blo .card-body p {
    background-color: #ffffff !important;
    color: #000000c2;
    /* color: #121212; */
    /* color: #495057; */
    font-weight: 700;
}

.cmp-das-col-blo:hover {
    -webkit-transform: translateY(calc(-1.5rem / 5));
    transform: translateY(calc(-1.5rem / 5));
    -webkit-box-shadow: 0 5px 10px rgba(30, 32, 37, .12);
    box-shadow: 0 5px 10px rgba(30, 32, 37, .12);
    -webkit-transition: all .4s;
    transition: all .4s;
}


.cmp-tab-bac-col {
    height: 100%;
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
}

.ctl-tab-hdr-col {
    border-radius: 5px !important;

    padding: 15px 20px !important;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: flex-start !important;
    justify-content: flex-start !important;
    -webkit-align-items: center !important;
    align-items: center !important;
}

.cmp-hdr-mar-bot {
    margin-bottom: 10px;
}

.cmp-tab-ico-lft {
    margin-right: 20px;
}

.cmp-tab-ico-lft svg {
    /* background-color: white; */
    /* padding: 15px; */
    padding: 0px;
    border-radius: 0;
    /* height: 36px; */
    /* width: 36px; */
    /* height: 64px; */
    /* width: 64px; */
}

.cmp-tab-ico-lft svg {
    /* stroke: #ffffff; */
}

.ctl-tab-row-col tbody tr:nth-child(odd) {
    background-color: #fafafa;
}

.ctl-tab-row-col tbody tr,
.ctl-tab-row-mis tbody tr {
    transition: all .4s;
}

.ctl-tab-row-col tbody tr:hover,
.ctl-tab-row-mis tbody tr:hover {
    background-color: #f3f3f9;
    border-top: 0;
    border-left: 0;
    border-right-color: transparent;
    border-bottom-color: #eeeeee;
    border-left-color: #eeeeee;
    transition: all .4s;
}

.ctl-tab-row-col tbody tr,
.ctl-tab-row-col tbody td span,
.ctl-tab-row-mis tbody tr,
.ctl-tab-row-mis tbody td span {
    height: 60px;
}

.ctl-tab-row-col tbody td,
.ctl-tab-row-mis tbody td,
.ctl-tab-row-mis tbody td .input-theme-div input,
.ctl-tab-row-mis tbody td .input-theme-div select {
    font-size: 15px;
}




.cmp-ico-bac-col svg {
    padding: 15px;
    border-radius: 50%;
}

.cmp-ico-sal-ord svg {
    background-color: #fde8e4;
    color: #f06447;
}

.cmp-ico-gio-fon svg {
    color: #0ab39c;
    background-color: #daf4f0;
}

.cmp-ico-grn-fon svg {
    color: #299cdb;
    background-color: #dff0fa;
}

.cmp-ico-gdn-fon svg {
    color: #f7b84b;
    background-color: #fef4e4;
}

/* dasbboard css end */

.cmp-nav-pad-das {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.cmp-nav-pad-das .navbar-brand:focus-visible {
    outline: none;
}

.cmp-com-mar-top {
    margin: 70px auto auto auto;
}

.cmp-das-par-blo {
    width: 100%;
    padding: 50px 50px;
}

/* .cmp-rit-blo-nav {
    background-color: #e9e9e9; 
    height: 100%;
    padding: 10px 15px 10px 30px;
} */

.ctl-pro-ico-col {
    color: #000000;
    margin-right: 0;
    justify-content: flex-end;
}

.ctl-nav-lis-cus li a {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

.ctl-nav-lis-cus li a span {
    margin-left: 8px;
}


.ctl-nav-lis-cus .nav-item .nav-link.active {
    /* color: #000 !important; */
    /* background: #e9e9e9 !important; */
    /* border-radius: 4px !important; */

    color: #ffffff !important;
    background: #042144 !important;
    border-radius: 4px !important;
}

.ctl-nav-lis-cus .nav-item .nav-link a svg {
    height: 15px;
    width: 15px;
}

.ctl-log-drp-men {
    padding: 5px 5px;
    margin-top: 6px !important;
    border-radius: 6px;
    border: 0;
    overflow: hidden;
}

.ctl-log-drp-men li a {
    transition: all 0.4s;
    font-size: 14px;
}

.ctl-log-drp-men li a:hover {
    transition: all 0.4s;
}

.ctl-log-drp-men li a:active {
    background-color: #f3f3f9;
    color: #2c2c2c;
}

.ctl-nav-lis-cus .nav-link svg path {
    fill: #121212 !important;
}

.ctl-nav-lis-cus .nav-link.active svg path {
    stroke: #ffffff !important;
    fill: #042144 !important;
}

.cmp-col-rec-ord {
    background-color: #2196F3 !important;
}



.cmp-col-pur-ord {
    background-color: #009688 !important;
}



.cmp-hei-hun {
    height: 100%;
}

.cmp-col-pen-cus {
    background-color: #3f51b5 !important;
}


.cmp-col-pen-sub {
    background-color: #ef4f4c !important;
}

.ctl-col-rec-ord img,
.ctl-col-pur-ord img,
.ctl-col-pen-cus img,
.ctl-col-pen-sub img,
.ctl-col-gio-req img,
.ctl-col-grn-req img,
.ctl-col-pen-tas img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.ctl-col-rec-ord svg path,
.ctl-col-pur-ord svg path,
.ctl-col-pen-cus svg path,
.ctl-col-pen-sub svg path,
.ctl-col-gio-req svg path,
.ctl-col-grn-req svg path,
.ctl-col-pen-tas svg path {
    stroke: #ffffff;
}

.cmp-col-gio-req {
    background-color: #299cdb !important;
}



.cmp-col-grn-req {
    background-color: #0ab39c !important;
}



.cmp-col-pen-tas {
    background-color: #153468 !important;
}


.ctl-cus-btn-blo a {
    font-size: 15px !important;
    background-color: #ffffff !important;
    padding: 4px 12px !important;
    border-radius: 5px;
    transition: all 0.4s;
    border: 0;
}

.ctl-cus-btn-blo a:not(:last-child) {
    margin-right: 10px !important;
}

.ctl-cus-btn-blo a svg {
    margin-left: 6px;
    height: 24px;
}

.ctl-cus-btn-blo a:active {
    border: 0;
}

.ctl-cus-btn-blo a:hover {
    background-color: #000000 !important;
    transition: all 0.4s;
    color: #ffffff !important;
}

.ctl-cus-btn-blo a svg path {
    transition: all 0.4s;
}

.ctl-cus-btn-blo a:hover svg path {
    stroke: #ffffff !important;
    transition: all 0.4s;
}

.cmp-tab-inf-rit {
    width: 100%;
}

.ctl-txt-sal-ord a {
    color: #2196f3 !important;
}

.ctl-txt-sal-ord a svg path {
    stroke: #2196f3 !important;
}

.ctl-txt-pur-ord a {
    color: #009688 !important;
}

.ctl-txt-pur-ord a svg path {
    stroke: #009688 !important;
}

.ctl-txt-pen-cus a {
    color: #3f51b5 !important;
}

.ctl-txt-pen-cus a svg path {
    stroke: #3f51b5 !important;
}

.ctl-txt-pen-sub a {
    color: #ef4f4c !important;
}

.ctl-txt-pen-sub a svg path {
    stroke: #ef4f4c !important;
}

.ctl-txt-rio-req a {
    color: #299cdb !important;
}

.ctl-txt-rio-req a svg path {
    stroke: #299cdb !important;
}

.ctl-txt-grn-req a {
    color: #0ab39c !important;
}

.ctl-txt-grn-req a svg path {
    stroke: #0ab39c !important;
}

.ctl-pen-txt-par {
    font-size: 13px;
}


/* salesorderlist */

.cmp-sec-nav-blo,
.cmp-nes-nav-blo {
    margin-top: 70px;
}

.cmp-bac-sec-whi {
    background-color: #ffffff;
    padding: 10px 50px;
    position: sticky;
    top: 70px;
    z-index: 9;
}

.cmp-back-tab-del .navbar.subnav .nav-item .nav-link.active {
    background: #00dea3;
}

.cmp-back-tab-sal .navbar.subnav .nav-item .nav-link.active {
    background: #2196F3;
}

.cmp-back-tab-pro .navbar.subnav .nav-item .nav-link.active {
    background: #000000;
}

.cmp-back-tab-inv .navbar.subnav .nav-item .nav-link.active {
    background: #153468;
}

.cmp-sec-nav-wid {
    width: 100%;
}

.cmp-sec-nav-wid li:not(:last-child) {
    margin-right: 25px;
}

.cmp-sec-nav-wid .navbar.subnav .nav-item .nav-link.active {
    /* background: #000000; */
    border: 0;
    /* padding: 10px 40px; */
    color: #ffffff;
    border-radius: 5px;
}

.cmp-sec-nav-wid .navbar.subnav .nav-item .nav-link {
    padding: 8px 15px;
}

.cmp-sec-nav-wid .navbar.subnav .nav-item .nav-link svg path {
    stroke: #000000;
}

.cmp-sec-nav-wid .navbar.subnav .nav-item .nav-link.active svg path {
    stroke: #ffffff !important;
}

.cmp-sec-nav-wid .navbar.subnav {
    padding: 0;
}

.cmp-sec-nav-wid .navbar.subnav .navbar-toggler {
    padding: 6px 10px;
    border: 1px solid #e4e4e5;
    border-radius: 6px;
    background-color: #f5f4f7a1;
    color: #121212;
    height: 46px;
    font-size: 30px;
}

.cmp-sec-nav-wid .collapse.navbar-collapse {
    background: transparent;
    height: auto;
}

.cmp-nav-res-bac {
    margin-bottom: 0 !important;
    margin-top: 4px;
}

.cmp-nav-res-bac {
    border-radius: 5px;
}

.cmp-whi-sal-blo {
    background-color: #ffffff;
    padding: 0 30px 30px 30px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);

}

.cmp-whi-dem-blo {
    background-color: #ffffff;
    padding: 30px 30px 30px 30px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
}

.cmp-pge-hdr-div {
    border-bottom: 1px solid #DDE1EC;
    padding: 0 30px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.cmp-sub-hdr-div {
    border: 0;
    padding: 15px 30px;
    height: 94px;
}

.cmp-ser-con-cus input,
.cmp-ser-con-cus .input-group-text {
    /* height: 43px !important; */
}

.cmp-ser-con-cus label {
    /* height: 43px; */
    padding: 1px 12px;

}

.cmp-pge-hdr-div .header-end-div {
    margin-right: 0;
}

.cmp-pge-hdr-div .header-end-div button,
.cmp-pge-hdr-div .header-end-div a {
    border-radius: 5px;
    transition: all .4s;
    border: none;
}

.cmp-pge-hdr-div .header-end-div button:hover {
    transition: all .4s;
}

.cmp-pge-hdr-div .header-end-div a:hover {
    transition: all .4s;
    border: none;
}

.ctl-sav-rep-btn,
.ctl-bak-ico-gre svg,
.ctl-cre-grn-btn {
    background: #00dea3;
    color: #ffffff;
    border: none;
    transition: all .4s;
}

.ctl-bak-ico-gre svg {
    /* border-radius: 5px; */
}

.ctl-sav-rep-btn svg path,
.ctl-bak-ico-gre svg path,
.ctl-cre-grn-btn svg path {
    stroke: #ffffff;
    transition: all .4s;
}

.ctl-sav-rep-btn:hover,
.ctl-bak-ico-gre svg:hover,
.ctl-cre-grn-btn:hover {
    background: #069f73;
    transition: all .4s;
}

.btn-status {
    background: #1e4c99;
    color: white;
}

.btn-status:hover {
    background: #153468;
    color: white;
}

.btn-shortfall {
    background: #2196F3;
    color: white;
}

.btn-shortfall:hover {
    background: #0082EA;
    color: white;
}

.btn-instock {
    background: #00cE92;
    color: white;
}

.btn-instock:hover {
    background: #069f73;
    color: white;
}

.cmp-bod-ani-dur {
    animation-duration: 1.8s;
}

.cmp-pag-cus-col button,
.ctl-pag-sub-col button {
    background: #00dea3;
    border: 2px solid transparent !important;
    transition: all .4s;
    color: #FFFFFF;
}

.cmp-pag-cus-col button:hover,
.ctl-pag-sub-col button:hover {
    background: #069f73;
    transition: all .4s;
}

.cmp-pag-cus-col button:hover svg path,
.ctl-pag-sub-col button:hover svg path {
    stroke: #ffffff;
}

.cmp-pag-cus-col button.disabled:hover {
    background-color: #F5F4F7;
}

.cmp-pag-cus-col button.disabled:hover svg path,
.ctl-pag-sub-col button.disabled:hover svg path {
    stroke: #2D3B3680 !important;
}

/*  */
.cmp-del-frm-cus {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
    border: 0;
    padding: 0;
}

.cmp-emp-zer-top {
    padding-top: 0 !important;
}

.cmp-det-pag-hdr {
    padding: 15px 25px;
    border-bottom: 1px solid #f3f3f9;
    margin-bottom: 0 !important;
}

.cmp-cus-po-blo {
    padding: 25px 25px 25px 25px;
}

.cmp-del-pag-nav {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
    border: 0;
    color: #000000;
    /* transition: all .3s; */
}

.cmp-del-pag-nav .detail-page-nav-item.active {
    background: #00dea3;
    color: #ffffff;
    /* transition: all .4s; */
}

.cmp-txt-are-hie {
    height: auto !important;
}

.cmp-txt-are-hie textarea:focus {
    box-shadow: none;
    border-color: transparent;
}

.cmp-btn-clo-ico {
    color: #ffffff;
    background-color: #ef4f4c;
    border-radius: 9px;
    transition: all .4s;
    border: 0 !important;
}

.cmp-btn-clo-ico svg path {
    stroke: #ffffff;
}

.cmp-btn-can {
    color: #ffffff;
    background-color: #ef4f4c;
    border-radius: 5px;
    transition: all .4s;
    border: 0;
}



.cmp-btn-can:hover {
    background-color: #da3734;
    transition: all .4s;
}

.cmp-btn-sav {
    color: #ffffff;
    background-color: #00dea3;
    border-radius: 5px;
    transition: all .4s;
    border: 0;
}

.cmp-btn-sav:hover {
    background-color: #069f73;
    transition: all .4s;
}

.cmp-btn-sav svg path {
    stroke: #ffffff;
}

.cmp-sub-hdr-btn {
    padding-right: 0;
}

.cmp-chk-int-btn,
.cmp-add-itm-btn {
    border-radius: 5px;
    min-height: 35px
}

.theme-body-modal-div .theme-body-container {
    top: 70px;
    width: 100%;
    height: calc(100% - 69px);
    /* border-top-right-radius: 23px; */
    /* border-top-left-radius: 23px; */
    border-radius: 5px;
    left: 50%;
    transform: translateX(-50%);
}



.cmp-det-pag-con {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
    border: 0;
    padding: 0;
}

.cmp-det-pag-con .tag-item {
    padding: 15px 15px;
    border-bottom: 1px solid #f3f3f9;
}

.cmp-pat-btn-bar {
    padding: 0px 25px 25px 25px;
}

.cmp-tag-blo-pad {
    padding: 15px 15px;
}

.cmp-tag-blo-sid input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.ctl-tag-add-btn {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    background: #00DEA3;
    border: 1px solid #00DEA3;
    transition: all .4s;
}

.ctl-tag-add-btn:hover {
    background: #069f73;
    border: 1px solid #069f73;
    transition: all .4s;
}

.cmp-lis-box-rit li {
    margin-bottom: 15px;
    border: 0 !important;
    padding: 10px !important;
}

.cmp-lis-box-rit li button:focus,
.cmp-lis-box-rit li button:active {
    outline: none;
    box-shadow: none;
    border: 0;
}

.cmp-lis-box-rit .list-item button {
    border: 0;
}

.cmp-lis-box-rit li:nth-child(odd) {
    background-color: #fde8e4;
    color: #f06447;
}

.cmp-lis-box-rit li:nth-child(odd) button svg path {
    stroke: #f06447;
}

.cmp-lis-box-rit li:nth-child(even) {
    color: #0ab39c;
    background-color: #daf4f0;
}

.cmp-lis-box-rit li:nth-child(even) button svg path {
    stroke: #0ab39c;
}

.cmp-pge-con-pad {
    padding: 30px 15px;
}

.cmp-mod-pop-rad {
    border-radius: 5px;
    padding: 0;
}

.cmp-mod-hdr-pag {
    border-bottom: 1px solid #e9ecef !important;
    padding: 15px 20px !important;
}

.cmp-mod-pad-all {
    padding: 20px 20px 20px 20px;
}

.cmp-lad-fot-btn {

    padding: 0 20px 20px 20px !important;
}

.ctl-btn-pop-can {
    background-color: #ef4f4c;
    color: #ffffff;
    transition: all .4s;
}

.ctl-btn-pop-can:hover {
    background-color: #da3734;
    color: #ffffff;
    transition: all .4s;
}


.ctl-btn-pop-und {
    background-color: #3f51b5;
    color: #ffffff;
    transition: all .4s;
}

.ctl-btn-pop-und:hover {
    background-color: #303f96;
    color: #ffffff;
    transition: all .4s;
}

.ctl-btn-pop-sav {
    background-color: #00dea3;
    color: #ffffff;
    transition: all .4s;
}

.ctl-btn-pop-sav:hover {
    background-color: #069f73;
    color: #ffffff;
    transition: all .4s;
}

.ctl-btn-pop-res {
    background-color: #299cdb;
    color: #ffffff;
    transition: all .4s;
}

.ctl-btn-pop-res:hover {
    background-color: #167fb8;
    color: #ffffff;
    transition: all .4s;
}

.ctl-btn-pop-can,
.ctl-btn-pop-und,
.ctl-btn-pop-sav,
.ctl-btn-pop-res {
    height: auto;
    border-radius: 5px;
    font-size: 14px;
    min-height: auto;
    padding: 6px 19px;
    border: 0;
}

.ctl-btn-pop-can:hover,
.ctl-btn-pop-und:hover,
.ctl-btn-pop-sav:hover,
.ctl-btn-pop-res:hover {
    border: 0;
}

.btn-close:focus {
    box-shadow: none;

}

.ctl-sta-suc-whi svg path {
    stroke: #ffffff;
}

.ctl-fon-rud-siz .detail-page-nav-item {
    font-size: 13px;
    padding-right: 12px;
    padding-left: 12px;
}

.ctl-gre-les-ico .dual-listbox .dual-listbox__buttons button {
    background-color: #00dea3 !important;
    transition: all 0.4s;
}

.ctl-gre-les-ico .dual-listbox .dual-listbox__buttons button:hover {
    background-color: #069f73 !important;
    transition: all 0.4s;
}

.input-theme-div.form-floating>.form-control:focus~label,
.input-theme-div.form-floating>.form-control:not(:placeholder-shown)~label,
.input-theme-div.form-floating>.form-select~label {
    height: 22px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.table.theme-table .ss-main {
    border-color: #dde1ec !important;
}

.ctl-txt-pad-top {
    padding-top: 5px;
}

.ctl-txt-tra-low {
    text-transform: lowercase !important;
}

.theme-table tbody td span button {
    font-size: 15px;
}

/* start font */
.ctl-nav-lis-cus li .nav-link {
    color: #121212;
    cursor: pointer;
}

.ctl-fon-ope-san li a span {
    font-weight: 600;
    font-size: 16px;
}

.ctl-fon-ope-san li a span,
.cmp-sec-nav-wid .navbar.subnav .nav-item .nav-link,
.ctl-log-drp-men li a,
.theme-card-home .card-title,
.theme-card-home .card-text,
.theme-card-header,
.ctl-cus-btn-blo a,
.theme-primary-btn,
.theme-table thead th,
.theme-table tbody td,
.theme-outline-btn {
    font-family: 'Open Sans', sans-serif !important;
}

.detail-page-header,
.input-theme-div input,
.input-theme-div select,
.input-theme-div.form-floating>label,
.floating-label label,
.detail-page-nav .detail-page-nav-item,
.ss-main .ss-values .ss-single,
.theme-modal-secondary-btn,
.theme-modal-primary-btn,
.theme-secondary-btn,
.detail-page-tags-div .tag-item,
.form-control,
.file-download-div .theme-link,
#secondary-roles-div {
    font-family: 'Open Sans', sans-serif !important;
}

#secondary-roles-div {
    font-weight: normal;
}

.home-body .home-header-text,
.home-body .home-subtext,
.ctl-log-btn a,
.ctl-txt-psw-bot {
    font-family: 'Open Sans', sans-serif !important;
}

.ctl-fon-ope-sou h2 {
    font-family: 'Open Sans', sans-serif !important;
    overflow: visible;
}

#navbar-display-name,
#navbar-display-id,
.header-end-div button {
    font-family: 'Open Sans', sans-serif !important;
}

.ctl-fon-rob-oto {
    font-family: 'Roboto', sans-serif;
}

/* end font */

.cmp-log-blo-bck {
    display: table-cell;
    vertical-align: middle;
    padding-right: 90px;
}


.cmp-log-hei-vh,
.ctl-pic-hei-vh img {
    height: 100vh;
}

.ctl-pic-hei-vh {
    padding-right: 0;
    padding-left: 0;

    overflow: hidden;
    height: 100%;
}

.ctl-log-pic-cus {
    width: 100%;
    height: auto !important;
    display: block;
}

.cmp-lft-blo-pad {
    /* padding: 0; */
    height: 100vh;
    border-top-right-radius: 100px;
    background: #f3f3f9;
    border-bottom-right-radius: 100px;
    position: relative;
    left: 80px;
    display: table;
}

.ctl-act-sta-txt {
    background-color: #00DEA3;
    transition: all 0.4s;
    color: #ffffff;
}

.ctl-act-sta-txt:hover {
    background-color: #069f73;
    transition: all 0.4s;
    color: #ffffff;
}





.cmp-inv-pop-wid {
    width: 96% !important;
}

.cmp-mod-inv-hdr {
    border-bottom: 1px solid #DDE1EC;
    padding: 0 30px !important;
}

.cmp-inv-bor-non {
    border: 0;
    padding: 15px 20px 0 20px;
    height: 94px;
}

.cmp-mod-inv-bod {
    padding: 20px 20px 20px 20px;
}

.cmp-inv-bod-lar {
    padding: 0 15px;
}

.cmp-pop-bot-non {
    border: 0;
}

.cmp-mod-gio-itm {
    padding: 30px;
}


.cmp-gio-itm-clo.theme-body-modal-div .theme-body-container .theme-body-footer {
    padding: 0 30px 30px 30px !important;
}

.cmp-mod-gio-hdr {
    border-bottom: 1px solid #e9ecef !important;
    padding: 15px 20px !important;
}

.cmp-the-bod-pad {
    padding: 0 20px 20px 20px;
}

.ctl-ali-sor-ico thead tr th span:after {
    width: 15px;
    margin-left: 5px;
}

/* .sortable th span::after,
.sortable-main th span:hover::after {
    width: 15px;
    padding-left: 5px;
    padding-bottom: 1px;
} */

.cmp-txt-are-hie textarea {
    border-color: transparent;
}


.cmp-btn-bck {
    font-size: 15px;
    color: #ffffff;
    background-color: #00dea3;
    border-radius: 5px;
    transition: all .4s;
    border: 0;
    padding: 8px 20px;
}

.cmp-btn-bck:hover {
    background-color: #069f73;
    transition: all .4s;
}

.cmp-btn-bck svg {
    margin-right: 3px;
    height: 16px;
    width: 16px;
}

.cmp-btn-bck svg path {
    stroke: #ffffff;
}

/*  */
.ctl-tag-mar-bot {
    margin-bottom: 30px;
}

.cmp-res-das-blo,
.cmp-com-mar-bot {
    margin-bottom: 25px;
}

.cmp-res-das-grd {
    grid-template-columns: repeat(auto-fit, minmax(350px, 33.33%));
    display: grid;
}

.cmp-com-mar-bot {

    width: 100%;
}

.cmp-com-mar-blo {
    margin-top: 25px;
    margin-bottom: 25px;
}

.cmp-nes-nav-blo .header-end-div button#print-grn-btn,
.cmp-nes-nav-blo .header-end-div button#create-order-btn,
.cmp-nes-nav-blo .header-end-div button.theme-approve-btn,
.cmp-nes-nav-blo .header-end-div button#print-sof-btn,
.cmp-nes-nav-blo .header-end-div button#print-spo-btn {
    border-radius: 5px;
    border: none;
    background-color: #00dea3;
}

.cmp-nes-nav-blo .header-end-div button#create-order-btn {
    opacity: 1;
}

.cmp-nes-nav-blo .header-end-div button#print-so-btn {
    border-radius: 5px;
    border: none;
    background-color: #00dea3;
    color: #ffffff;
}

.cmp-nes-nav-blo .header-end-div button#update-gio-btn,
.cmp-nes-nav-blo .header-end-div button#print-gio-btn,
.cmp-nes-nav-blo .header-end-div button#create-customer-btn {
    border-radius: 5px;
    border: none;
    background-color: #00dea3;
}

.cmp-nes-nav-blo .header-end-div button#waiting-for-approval,
.cmp-nes-nav-blo .header-end-div button.theme-secondary-header-btn {
    border: none;
    background-color: #2196F3;
    border-radius: 5px;
    color: #ffffff;
}

.cmp-nes-nav-blo .header-end-div button#sent-for-approval-btn,
.cmp-nes-nav-blo .header-end-div button.theme-outline-btn,
.cmp-nes-nav-blo .header-end-div button#update-grn-btn {
    border: none;
    background-color: #00dea3;
    border-radius: 5px;
    color: #ffffff;
}

.cmp-nes-nav-blo .header-end-div button.theme-outline-btn svg path {
    stroke: #ffffff;
}



.cmp-nes-nav-blo .header-end-div button.theme-reject-btn {
    border: none;
    background-color: #ef4f4c;
    border-radius: 5px;
    color: #ffffff;
}


/* Table Css  */
.table-responsive{
    height: auto !important;
    overflow: auto !important;
}
.theme-table thead{
    position: sticky;
    top: -1px;
    background-color: #fff !important;
}
.theme-table thead tr{
    background-color: #fff !important;
}
.mip-row.red:hover{
    background-color: #c4334f !important;
}
.mip-row.green:hover{
    background-color: #09a87e !important ;
}
.mis-row.yellow:hover{
    background-color: #dada00 !important;
}
.mis-row.green:hover{
    background-color: #09a87e !important ;
}
.mis-row.red:hover{
    background-color: #c4334f !important;
}
.mis-row.blue:hover{
    background-color: #149dce !important;

}
/* UI Issue  */
.ss-content.ss-open-below{
    z-index: 999;
}
.modal-date-container{
    justify-content: center;
}
.modal-date-content{
    width: 50% !important;
}
.scroll-aliment{
  overflow: auto;
}
 @media(max-width: 320px){
     .user-names{
       font-size: 11px !important;
     }
     .user-emails{
         font-size: 11px !important;
     }
     .logo-img{
        max-width: 50px !important;
     }
     .cmp-nav-res-btn{
        padding: 5px 8px !important;
     }
     .profile-pic-btn {
        font-size: 22px !important;
        width: 28px !important;
     }
     .modal-date-content{
        width: 100% !important;
    }
    .create-btn{
        margin-left: 0px !important;
    }
    .create-btn-aliment{
        overflow: unset !important;
    }
    .theme-checkbox {
        width: 40px !important;
    }
 }
 @media (min-width: 321px) and (max-width: 766px){
    .user-names{
        font-size: 12px !important;
      }
      .user-emails{
          font-size: 12px !important;
      }
      .logo-img{
         max-width: 50px !important;
      }
      .modal-date-content{
        width: 100% !important;
    }
    .theme-checkbox {
        width: 32px !important;
    }
 }
 .search-container-div label{
    top: 2px !important;
  }
.file_upload_text{
    padding: 0px 15px;
}
.border_0{
    border: 0px;
}
.close_svg_btn{
    padding: 6px;
}
.close_svg_icon{
    margin-top: -7px; 
} 
.all_order_head{
    height: 75px !important; 
}
.search-container-div label.order_search_input{
    top: -1px !important;
}
.succes_status_icon{
    margin-left: 3px !important; 
}