body {
            align-items: center;
            justify-content: center;
             font-family: "Noto Sans", sans-serif;

        }
        a { text-decoration: none; }

        .login-card {
            width: 360px;
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 25px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
            background: #f2f2f2;
        }

        .login-title {
            text-align: center;
            font-weight: bold;
            margin-bottom: 10px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 15px;
            font-size: 20px;
        }

        .btn-login {
            background-color: #333;
            color: #fff;
            width: 100%;
        }

        .btn-login:hover {
            background-color: #000;
        }



/* TOP BAR */
.top-bar{
    background:#4c4c4c;
    color:#fff;
    padding:6px 12px;
    font-size:12px;
    height: 33px;
}
.top-bar-right{
    float:right;
}
.top-bar a{ color:#fff; }

/* SITE HEADER */
.site-header{
    background:#666;
    color:#ccc;
    padding:10px 12px;
    font-size:22px;
    font-weight:bold;
}

/* MENU */
.menu-bar{
    background:linear-gradient(#f2f2f2,#e0e0e0);
    border-bottom:1px solid #bdbdbd;
    padding:6px 8px;
}
.menu-bar a{
    font-weight:bold;
    margin-right:15px;
}

/* LAYOUT */
.wrapper{padding:15px;color: #000;font-size: 16px;}


/* BOX */
.box{
    border:1px solid #cfcfcf;
    margin-bottom:15px;
}
.box-header{
    background:#dedede;
    padding:6px 8px;
    font-weight:bold;
    border-bottom:1px solid #cfcfcf;
}
.box-body{ padding:8px; }
.green{ color:green; }

/* STATS */
.stat-box{
    border:1px solid #cfcfcf;
    margin-bottom:15px;
}
.stat-header{
    background:#dedede;
    padding:6px 8px;
    font-weight: 600;
    font-size: 15px;
}
.stat-body{padding: 13px;font-size: 13px;font-family: "Arial", Verdana, Tahoma;line-height: 27px;}
.bar{ height:8px; background:green; margin:4px 0; }

/* SIDEBAR */
.sidebar{
    border:1px solid #cfcfcf;
}
.sidebar-header{
    background:#dedede;
    padding:6px 8px;
    font-weight:bold;
}
.sidebar ul{
    list-style:none;
    margin:0;
    padding:8px;
}
.sidebar li{ margin-bottom:6px; }
.sidebar li ul{ padding-left:15px; }

/* FOOTER */
.footer{
    clear:both;
    font-size:12px;
    color:#555;
    padding:10px;
}
/* ===== MAIN MENU ===== */
.menu-bar{
    background:linear-gradient(#f5f5f5,#e1e1e1);
    border-bottom:1px solid #bcbcbc;
    padding:6px 10px;
}
.menu-bar a{
    color:#000;
    font-weight: 500;
    margin-right: 27px;
    text-decoration:none;
    font-size: 13px;
}
.menu-bar a:hover{
    text-decoration: none;
    background: #ffffff;
}

/* ===== BOX STYLE ===== */
.box{
    border:1px solid #cfcfcf;
    margin-bottom:15px;
    background:#fff;
}
.box-header{
    background:#e0e0e0;
    padding:6px 10px;
    font-weight: 600;
    border-bottom:1px solid #cfcfcf;
    font-size: 15px;
}
.box-body{
    padding:10px;
    font-size: 13px;
    font-family: "Arial", Verdana, Tahoma;
    min-height: 123px;
    background: #f9f9f9;
}
.box-body p{
    margin-bottom:6px;
}

/* ===== LINKS ===== */
.box-body a{
    display:block;
    color:#006600;
    text-decoration:none;
    margin-bottom:4px;
}
.box-body a:hover{
    text-decoration:underline;
}

/* ===== RIGHT SIDEBAR ===== */
.sidebar{
    border:1px solid #cfcfcf;
    background: #ededed;
}
.sidebar-header{
    background: #666666;
    padding:6px 10px;
    font-weight: 600;
    border-bottom:1px solid #cfcfcf;
    font-size: 15px;
    color: #fff;
}
.sidebar ul{
    list-style:none;
    padding:10px;
    margin:0;
    font-size: 13px;
}
.sidebar li{
    margin-bottom: 8px;
    font-family: "Arial", Verdana, Tahoma;
}
.sidebar li ul{
    padding-left:15px;
}

/* ===== FOOTER ===== */
footer{
    font-size:12px;
    color:#fff;
    padding:10px;
    background: #444; text-align: center;
}

/* ===== STATS ===== */
.stat{
    margin-bottom:6px;
}
.green{ color:green; }
.red{ color:red; }


/* MENU BAR */
.menu-bar{
    background:linear-gradient(#f5f5f5,#e1e1e1);
    border-bottom:1px solid #bcbcbc;
    padding: 0px 10px;
}

/* LINKS */
.menu-bar a{
    font-weight: 500;
    color:#000;
    text-decoration:none;
    display:inline-block;
    border-right: 1px solid #ccc;
    margin-right: 0;
    padding: 10px 10px 10px 10px;
    text-decoration: none;
}

/* DROPDOWN */
.menu-dropdown{
    position:relative;
    display:inline-block;
}


.menu-dropdown-content{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:200px;
    background:#f5f5f5;
    border:1px solid #bcbcbc;
    z-index:1000;
}

.menu-dropdown-content a{
    display:block;
    padding:6px 12px;
    border-bottom:1px solid #d5d5d5;
}

.menu-dropdown-content a:hover{
    background:#e1e1e1;
}

/* DESKTOP HOVER */
@media (min-width: 768px){
    .menu-dropdown:hover .menu-dropdown-content{
        display:block;
    }
    .menu-toggle{
        display:none;
    }
}

/* MOBILE */
.menu-toggle{
    display:none;
    background:#666;
    color:#fff;
    padding:8px 12px;
    cursor:pointer;
    font-weight:bold;
}

@media (max-width: 767px){
    .menu-toggle{
        display:block;
    }

    .menu-bar{
        display:none;
    }

    .menu-bar a,
    .menu-dropdown{
        display:block;
        margin:0;
        padding:8px 10px;
        border-bottom:1px solid #ccc;
    }

    .menu-dropdown-content{
        position:static;
        border:none;
        background:#eee;
    }

    .menu-dropdown.open .menu-dropdown-content{
        display:block;
    }
}

.box-body ul { margin-top: 10px; }


.sidebar ul li a{color: #000;text-decoration: none;border-bottom: 1px  solid #ccc;width: 100%;display: block;line-height: 23px;}

.sub-linl-main li a {border-bottom: 1px  dashed #ccc !important;background: #f7f7f7;padding: 5px;}



/* TABLE */
.table  th{
    background:#b6c0d1;
    color:#fff;
    border:1px solid #ccc;
    font-weight:bold;
    font-size: 14px;
}
.table td{
    border:1px solid #ccc;
    font-size: 13px;
    padding: 10px;
}
.table-striped tbody tr:nth-child(even){
    background:#f0f3f8;
}
.table  select  {border: 1px solid #ccc;font-size: 12px;padding: 0px 0px 0px 10px;border-radius: 3px;}
.page-title { font-size: 20px; font-weight: 600; }
.search-box {background: #e9e9e9;padding: 10px;border-radius: 5px;margin-top: 12px;font-size: 14px;}
.add-box {margin-top: 15px;padding-bottom: 8px;display: block;}
.add-box a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 600 !important; margin-left: 15px;
}
.add-box span  { background: green;
    color: #fff;
    border-radius: 40px;
    height: 20px;
    width: 20px;
    display: inline-block;
    text-align: center;
    line-height: 21px; }

.status { font-size: 14px;  }
.edit-btns a { text-decoration: none; }


/* FORM WRAPPER */
.form-wrapper{
    border:1px solid #cfcfcf;
    margin:15px;
}

/* HEADER */
.form-header{
    background:#dedede;
    padding:6px 10px;
    font-weight:bold;
}

/* ROWS */
.form-row{
    border-bottom:1px dotted #ccc;
    padding:8px 10px;
}
.form-row:last-child{
    border-bottom:none;
}

.label-col{
    width:200px;
    float:left;
    font-weight: 500;
    font-size: 14px;
}
.field-col{
    margin-left:210px;
}

/* INPUTS */
.form-control,
.form-select{
    display:inline-block;
    border: 1px solid #c5c5c5;
}

.note{
    font-size:12px;
    color:#000;
    margin-left:10px;
}

/* EDITOR PLACEHOLDER */
.editor-box{
    border:1px solid #ccc;
    background:#f5f5f5;
    height:260px;
}



/* Legacy panel look */
.panel{
    border:1px solid #cfcfcf;
    margin:15px;
}
.panel-header{
    background:#dedede;
    padding:6px 10px;
    font-weight:bold;
}
.panel-body{
    padding:10px;
}
.form-note{
    font-size:12px;
}
.editor-box{
    border:1px solid #ccc;
    background:#f5f5f5;
    height:260px;
}

.panel-body label { font-size: 14px;  }

.panel-body .row {border-bottom: 1px solid #e5e5e5;padding: 10px 0px 12px 0px;}

.login-box { width: 100%;  }
.login-card {margin: 0 auto;margin-top: 9%;}

.modal-header {
  cursor: move;
}

.pagination a {
    border: 1px solid #ccc;
    padding: 3px 10px;
    margin: 0px 3px;
    font-weight: bold;
    background: #d5d5d5;
}
.pagination .active a {
    background: #0d6efd;
    color: #fff;
}
.paginationnext a {}
 .bulk .select{ display: inline-block;}
.bulk {     margin-top: 15px;
    padding-bottom: 8px;}