.loader{display: none} 
 

body,html{}
body{font-family: 'Ubuntu', sans-serif; font-weight: normal; background: #eff4f6; font-size: 12px; line-height: 1.2; color: #36445a; position: relative; height: 100%; overflow-x: hidden;}
.form-control{font-size: 14px;}
.input-sm.form-control {
    font-size: 12px; height:28px;min-height:28px;
    padding: 4px;
}
.input-sm-sm.form-control {
    font-size: 12px;
    height: 24px;
    min-height: 24px;
}

.small_date.form-control {
    font-size: 12px;
    height: 28px;
    min-height: 28px;
    padding: 2px;
}
.light {
    font-weight: 300
}
.wrapper {
    min-height: calc(100vh - 38px)
}
.myloader{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:rgba(255,255,255,0.5);display:none}
    .myloader img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101}
    .regular {
        font-weight: normal
    }
.medium{font-weight: 500}
.semibold{font-weight: 600}
.bold{font-weight: bold}
.heavy{font-weight: 900}
p{margin-bottom: 20px; text-align: justify}
b,strong{font-weight: bold}
h1,h2,h3,h4,h5,h6{font-family: 'Poppins'; font-weight: 500;}
.text-center p{text-align: center}
h1{font-size:36px;}
h2{font-size:30px;}
h3{font-size:24px;}
h4{font-size:20px;}
h5{font-size:18px;}
h6{font-size:16px;}

a:hover,a:focus,a:active, button:hover,button:focus,button:active{outline: 0;}
button,a{outline: none; outline: 0}
.btn:focus{box-shadow: none!important}
a{color: #007fff}
.btn-primary{background: #007fff; border-color:#007fff;transition: ease-in-out 0.3s}
.btn-primary:hover{background: #0964bf;border-color: #0964bf;}
.btn-secondary{background: #f0f0f0; border-color:#eee;color: #000;transition: ease-in-out 0.3s}
.btn-secondary:hover,.btn-secondary:focus,.btn-secondary:active{background: #333;border-color: #000; color: #fff}
.btn-warning{background: #f60; border-color:#f60;color: #fff;transition: ease-in-out 0.3s}
.btn-warning:hover,.btn-warning:focus,.btn-warning:active{background: #d35907;border-color: #d35907; color: #fff}
.text-warning{color: #f60!important}

.loader{position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; background: #39b49a}
.loader img{position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto}

.loginpage {
    background:  url('../images/bg-login.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    position: relative
}
.loginbox{position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 320px; z-index: 5}
.loginlogo{background: #fff; box-shadow: 0 1px 10px #aaa; padding: 15px; border-radius: 5px; margin-bottom: 20px}
.loginlogo img{max-width: 290px}
.loginform{background: #fff; box-shadow: 0 1px 10px #aaa; padding: 15px; min-height: 200px; z-index: 5; border-radius: 5px}

.dashboardlogo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 320px;
    z-index: 5
}


.topnav {padding: 0 0px; background: url(../images/header-bg.jpg); border-bottom: 1px solid #fff; background-size: cover; position: fixed; left: 0; right: 0; z-index: 100}
    .topnav .navbar-brand {
        width: 160px;
        margin: 0;
        padding: 0
    }
.topnav .navbar-brand img{max-width: 180px; margin: 0 auto; display: block}
.topnav .nav-link{color: #000; padding: 12px 15px!important}
.topnav .nav-link i{font-size: 24px}

.leftbar{position: fixed; top: 50px; left: 0; width: 180px; bottom: 0; background: #0e8ee9; z-index: 5; padding: 0px 0; color: #fff; margin-left: -220px; transition: ease-in-out 0.3s}
.leftbar.open{margin-left: 0}
.leftbar ul li{display: block}
.leftbar ul li a{ color: #fff; display: block; padding: 5px 5px;  transition: ease-in-out 0.2s;}
.leftbar ul li a i{font-size: 20px; width: 30px}
.leftbar ul li a:hover{text-decoration: none; background: #337ab7}

.wrapper{margin-top: 0px; margin-left: 170px;transition: ease-in-out 0.2s; padding-top:55px}
body.fullwidth .wrapper{margin-left: 0;}

.pageheader{padding: 2px 5px 2px;}
.pageheader .ptitle{margin:0; color: #0e8ee9}
.pagecontent{padding: 5px; margin-bottom: 5px;}

.card-header{padding: 12px 15px}
.card-body{padding: 5px}
.btn-success{background: #a7d926; border-color: #a7d926;}
.btn-success:hover{background: #94c21e; border-color: #94c21e;}

.breadcrumb{background: #fff; margin: 15px 0 0}
.note-editable.panel-body{height:500px!important;}
.toggleLeftNav .la-bars {
    display: block
}
.toggleLeftNav .la-times{display: none}

.scrollToTop {position: fixed; width: 34px;height: 34px;bottom: 20px;right: 10px;z-index: 2001;display: none;text-align: center;background: #0e8ee9; color: #fff;border-radius: 50%; line-height: 34px; transition: ease-in-out 0.1s}
.scrollToTop:hover{background: #000; color: #fff;}
.progress{height: 10px; margin-top: 10px}
.card-dashboard{border-radius: 8px;}
.card-dashboard i{color: #aaa}
.btn{font-size: 13px;}
.btn-delete {
    font-size: 8px;
}
.list-dboard{}
.list-dboard li{display: block; position: relative; margin-bottom: 15px; text-transform: uppercase; font-size: 14px}
.list-dboard li:last-child{margin-bottom: 0;}
.list-dboard li span{position: absolute; top: 4.5px; right: 5px; z-index: 5}
.list-dboard li a{display: block; padding: 5px 3px; border: 1px solid #ccc; transition: ease-in-out 0.2s}
.list-dboard li a:hover{background: #f0f0f0; text-decoration: none}

.card-blue {border-color: #0e8ee9}
.card-blue .card-header{background: #0e8ee9; color: #fff;}
.card-green {border-color: #75b530}
.card-green .card-header{background: #75b530; color: #fff;}
.table td, .table th{padding: 5px 10px}
.table td .btn{white-space: nowrap}

.modal-backdrop{background-color:rgba(0,0,0,0.5)}

footer {
    display: block;
    width: 100%;
    background: #015f5f;
    padding: 12px 0;
    color: #fff;
    position: relative;
    z-index: 100;
}

label{margin-bottom:3px}
.form-group{margin-bottom:7px;}

.navbar-expand .navbar-nav .dropdown-menu {
    margin-top: -7px;
    margin-right: -15px;
    padding: 5px 0;
    min-width: 100px;
}
.navbar-nav { 
    padding-left: 10px!important; 
}
.dropdown-item {font-size:14px; padding:5px 10px; color:#c00}

.note-editor .note-toolbar, .note-popover .popover-content {
    background: #f0f0f0 !important;
    border-bottom: 1px solid #ddd !important;
}

.nav.nav-pills{background:#eee; padding:0;}
.nav-pills .nav-link {
    border: 1px solid #999;
    padding: 6px 30px;
    border-radius: 7px 7px 0 0;
    font-size: 14px;
    margin-bottom: -1px;
    background: #aaa;
    color: #fff;
    min-width: 200px;
    text-align: center;
}
.table-highlight tr td a{display:block}
.table-highlight tr td a, 
.table-highlight tr td a:hover {
    color: #333;
    text-decoration: none;
}
.table-highlight tr td {
    background: #fff;
}
.table-highlight tr:hover td {
    background: #eee;
}
.input-group > .input-group-append > .input-group-text {
    font-size: 12px;
    padding: 2px 4px
}

.table_form tr td {
    padding: 0 2px;
    vertical-align: middle;
    margin-bottom: 0.3rem!important;
}

.table_form tr td:first-child {
    width: 70%
}
.table_form {
    width: 100%;
    margin-bottom: 0.3rem;
    color: #212529;
}
.table.dataTable thead th {
 
    line-height: .6rem!important;
    vertical-align: middle!important;
}

.table.dataTable tbody tr {
    height: 18px!important; /* Set desired height */
    line-height: .9rem!important; /* Optional: tweak text vertical alignment */
}
.table.dataTable { 
    margin-top: 0px!important; /* Set */
    
}
.modal-header {
    background-color: #78cdee!important;
    color: white !important;
    height: 40px !important;
}
.modal-title {
    margin-bottom: 0;
    line-height: 1;
}
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 0.7;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}
.custom-modal-width {
    width: 600px;
    top: 80px !important;
}
/*.element.style {
    display: block;
    padding-right: 0px!important;
}*/

.label_pur {
    display: block; /* default for large screens */
    text-align: right;
}
.remove_padding {
    padding-left: 0px!important;
    padding-right: 0px!important;
}

.remove_left_padding {
    padding-left: 0px !important
}
.remove_left_padding2 {
    padding-left: 8px!important
}
.remove_left_padding3 {
    padding-left: 7px !important
}
.remove_right_padding {
    padding-right: 0px !important
}
.remove_right_padding2 {
    padding-right: 8px !important
}
.remove_right_padding3 {
    padding-right: 6px !important
}
.input-sm2.form-control {
    font-size: 12px;
    height: 23px;
    min-height: 23px;
    padding: 4px;
}

.center-div {
    display: flex;
    justify-content:right; /* horizontal center */
    align-items: center; /* vertical center */
    /*height: 200px;*/ /* set height to see vertical center */
    border: 1px solid #ffffff; /* optional: just to see the div */
}

.dropdown-menu {
    font-size: 0.8rem !important;
}

.horizon_line {
    margin-left: 0px !important;
    margin-right: 0px !important;
    /*padding-top: 5px;*/
    padding-bottom: 5px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    /*float: left;*/
    border-bottom: 1px solid #0e8ee9;
}

.input-sm.form-control {
    font-size: 12px;
    height: 23px;
    min-height: 23px;
    padding: 4px;
}

/*.modal-dialog {
    vertical-align: middle !important;
    margin-top: .2rem;
    width: 810px !important;
}*/

.card-title-label {
    position: absolute;
    top: -12px;
    left: 0.1rem;
    background: white;
    padding: 0 2px;
    font-weight: bold;
    font-size: 0.9rem;
    color: #999999;
    z-index: 1;
}

.card2 {
    border: 1px solid #0e8ee9;
    border-radius: 0.0rem;
    padding-top: 0.2rem;
}





.button-container {
    display: flex;
    justify-content: center; /* Horizontal center */
    /* align-items: center;  Vertical center */
    padding-right: 10px;
    /*height: 200px; /* Set height so vertical centering works * /
        border: 1px solid #ccc;*/ /* Optional: for visual reference */
}

.my-excel-button {
    background-color: #a7d926 !important;
    border-color: #a7d926;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    color: white !important;
    border-radius: .25rem;
    text-align: center;
    vertical-align: middle;
    font-weight: 500 !important;
    font-size: 12px !important;
}

    .my-excel-button.hover {
        background: #94c21e;
        border-color: #94c21e;
    }

    .modal-header .close {
        padding: .6rem .6rem !important;
        margin: -1rem -.6rem -.6rem auto !important;
    }

    .center-vertical {
        display: flex;
        align-items: center;
        justify-content: center;
    }
.dropdown-content {
     
    width: 350%; /* shrink to fit content */
    
}
.date-width {
    width: 85px;
}
/* Responsive adjustments for smaller screens for Sales Odr dropdown list of PurReq*/
    @media (max-width: 480px) {
        /*.dropdown-row {
        flex-direction: column;
        align-items: flex-start;
    }*/

        /*.column {
        width: 100%;
        flex: none;
    }*/
        /*.dropdown-row .job {
        display: none;
    }*/
        .dropdown-content {
            width: 100% !important;
        }

        .dropdown-row .so-no {
            flex: 0 0 36%; /* 15% of parent width */
        }

        .dropdown-row .so-date {
            flex: 0 0 28%;
        }

        .dropdown-row .job {
            flex: 0 0 36%; /* Takes the remaining space */
        }
    }
    /* Responsive for mobile */
    @media (max-width: 768px) {
        .dropdown-row {
            flex-direction: column;
            align-items: flex-start;
        }

        .column {
            width: 100%;
            flex: none;
        }
    }




    @media (min-width: 992px) {
        .modal-lg, .modal-xl {
            max-width: 1050px;
            width: 98%;
        }
    }

    @media screen and (min-width: 1250px) {
    }

    @media screen and (max-width: 1400px) {
    }

    @media screen and (max-width: 1200px) {
        .container {
            width: 100%;
            max-width: 100%
        }
    }

    @media screen and (max-width: 1199px) {
    }

    @media screen and (max-width: 1024px) {
    }

    @media screen and (max-width: 991px) {
    }

    @media screen and (max-width: 767px) {
    }

    @media screen and (max-width: 640px) {
    }

    @media screen and (max-width: 575px) {

        .loginbox {
            width: 90%;
        }

        .dashboardlogo {
            width: 80%;
            z-index: 1;
        }

        .leftbar.open {
            margin-left: -250px
        }

        .wrapper {
            margin-left: 0
        }

        .leftbar {
            margin-left: 0
        }

        .topnav .navbar-brand {
            width: 85px;
            margin-right: 0px
        }

            .topnav .navbar-brand img {
                width: 100%;
                max-width: 100%
            }

        .toggleLeftNav.active .la-bars {
            display: none
        }

        .toggleLeftNav.active .la-times {
            display: block
        }

        .custom-modal-width {
            margin: 0;
            width: 360px;
        }
    }

    @media screen and (max-width: 480px) {

        .card.bg-white.mx-auto {
            width: 100% !important;
        }

        .remove_left_padding {
            padding-left: 15px !important
        }

        .remove_right_padding {
            padding-right: 16px !important
        }

        .remove_left_padding2 {
            padding-left: 15px !important
        }
        .remove_left_padding3 {
            padding-left: 15px !important
        }
        .remove_right_padding2 {
            padding-right: 16px !important
        }
        .remove_right_padding3 {
            padding-right: 16px !important
        }
        .remove_padding {
            padding-left: 15px !important;
            padding-right: 16px !important;
        }
        .label_pur {
            display: inline !important; /* override block */
            text-align: left; /* optional: reset alignment */
        }
        .custom-modal-width {
            margin: 0;
            width: 360px;
        }

        .date-width {
            width: 100%;
        }
         
    }


    @media screen and (max-width: 375px) {
        .custom-modal-width {
            margin: 0;
            width: 360px;
        }
    }

    @media screen and (max-width: 360px) {
    }

    @media screen and (max-width: 320px) {
    }