/*****************************************************************
*
*          SCHOOL ERP PREMIUM 2026
*          SECTION 1 - GLOBAL DESIGN
*
******************************************************************/

body{
    background:#edf3f8;
    color:#2c3e50;
    font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
    overflow-x:hidden;
}

.content-wrapper{
    background:#edf3f8;
}

.wrapper{
    background:#edf3f8;
}

/************************************************************
                        HEADER
*************************************************************/

.main-header{

    border:none;

    box-shadow:0 5px 25px rgba(0,0,0,.08);

    z-index:9999;

}

.main-header .logo{

    background:linear-gradient(135deg,#00c0ef,#00a6d8);

    color:#fff;

    font-weight:700;

    letter-spacing:.8px;

    border-right:none;

    transition:.35s;

}

.main-header .logo:hover{

    background:linear-gradient(135deg,#14d4ff,#00b8e8);

}

.main-header .navbar{

    background:linear-gradient(90deg,#00c0ef,#00acd8,#0094c3);

    border:none;

}

.main-header .navbar-nav>li>a{

    color:#fff;

    transition:.3s;

    height:50px;

    line-height:20px;

}

.main-header .navbar-nav>li>a:hover{

    background:rgba(255,255,255,.12);

}

.main-header .sidebar-toggle:hover{

    background:rgba(255,255,255,.12);

}

.navbar-custom-menu>.navbar-nav>li>.dropdown-menu{

    border:none;

    border-radius:14px;

    margin-top:10px;

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

/************************************************************
                    SIDEBAR
*************************************************************/

.main-sidebar{

    background:#1f2937;

    box-shadow:5px 0 25px rgba(0,0,0,.10);

}

.sidebar{

    padding-top:18px;

}

.sidebar-menu{

    margin-top:15px;

}

.sidebar-menu>li{

    margin:7px 12px;

}

.sidebar-menu>li>a{

    border-radius:12px;

    color:#d7e3ee;

    padding:13px 16px;

    transition:.35s;

    font-size:14px;

    font-weight:500;

}

.sidebar-menu>li>a i{

    width:24px;

    text-align:center;

    margin-right:8px;

    transition:.3s;

}

.sidebar-menu>li:hover>a{

    background:#2c3d4f;

    color:#fff;

}

.sidebar-menu>li:hover>a i{

    color:#00c0ef;

}

.sidebar-menu>li.active>a{

    background:linear-gradient(90deg,#00c0ef,#00a7d7);

    color:#fff;

    box-shadow:0 10px 22px rgba(0,192,239,.35);

}

.sidebar-menu>li.active>a i{

    color:#fff;

}

.treeview-menu{

    background:#263544;

    border-radius:12px;

    margin-top:8px;

    padding:8px;

}

.treeview-menu>li>a{

    color:#c7d3de;

    border-radius:8px;

    transition:.3s;

}

.treeview-menu>li>a:hover{

    background:rgba(255,255,255,.08);

    color:#fff;

}

/************************************************************
                    USER PANEL
*************************************************************/

.user-panel{

    padding:18px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.user-panel>.image>img{

    border:3px solid rgba(255,255,255,.25);

    transition:.35s;

}

.user-panel>.image>img:hover{

    transform:scale(1.08);

}

.user-panel>.info{

    padding-top:10px;

}

.user-panel>.info>p{

    color:#fff;

    font-size:15px;

    font-weight:600;

}

.user-panel>.info>a{

    color:#8edfff;

}

/************************************************************
                    BOXES
*************************************************************/

.box{

    border:none;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.box:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.box-header{

    border-bottom:1px solid #edf2f7;

    padding:18px 22px;

}

.box-title{

    font-size:18px;

    font-weight:700;

    color:#34495e;

}

.box-body{

    padding:24px;

}

.box-footer{

    background:#fafcfd;

    border-top:1px solid #edf2f7;

}

.box.box-primary{

    border-top:4px solid #00c0ef;

}

.box.box-success{

    border-top:4px solid #00b894;

}

.box.box-warning{

    border-top:4px solid #f39c12;

}

.box.box-danger{

    border-top:4px solid #e74c3c;

}

/************************************************************
                CONTENT HEADER
*************************************************************/

.content-header{

    padding:20px;

}

.content-header h1{

    font-weight:700;

    color:#2c3e50;

    font-size:28px;

}

.content-header small{

    color:#7f8c8d;

}

.breadcrumb{

    background:#fff;

    border-radius:30px;

    padding:10px 18px;

    box-shadow:0 5px 18px rgba(0,0,0,.05);

}

.breadcrumb>li>a{

    color:#00c0ef;

}

/************************************************************
                    FOOTER
*************************************************************/

.main-footer{

    background:#fff;

    border-top:1px solid #e7edf3;

    color:#7d8b99;

    padding:18px 25px;

}
/*****************************************************************
*
*      SCHOOL ERP PREMIUM
*      SECTION 2 - MICRO INTERACTIONS
*
******************************************************************/

/***************************************************
                    GENERAL
****************************************************/

*{
    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

/***************************************************
                    SCROLLBAR
****************************************************/

::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:#eef3f8;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(#00c0ef,#009ed2);
    border-radius:30px;
}

::-webkit-scrollbar-thumb:hover{
    background:#0093c3;
}

/***************************************************
                    LINKS
****************************************************/

a{
    transition:.25s;
}

a:hover{
    text-decoration:none;
}

/***************************************************
                PAGE ANIMATION
****************************************************/

.content-wrapper{

    animation:pageFade .35s;

}

@keyframes pageFade{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/***************************************************
                    BOX HEADER
****************************************************/

.box-header{

    position:relative;

}

.box-header:after{

    content:"";

    position:absolute;

    left:22px;

    bottom:0;

    width:60px;

    height:4px;

    border-radius:20px;

    background:#00c0ef;

}

/***************************************************
                    BOX HOVER
****************************************************/

.box{

    position:relative;

}

.box:before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#00c0ef,#32d9ff);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.box:hover:before{

    transform:scaleX(1);

}

/***************************************************
                    SIDEBAR
****************************************************/

.sidebar-menu>li>a{

    position:relative;

    overflow:hidden;

}

.sidebar-menu>li>a:before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:rgba(255,255,255,.05);

    transition:.35s;

}

.sidebar-menu>li:hover>a:before{

    left:0;

}

.sidebar-menu>li.active>a:after{

    content:"";

    position:absolute;

    right:15px;

    top:50%;

    width:8px;

    height:8px;

    margin-top:-4px;

    border-radius:50%;

    background:#fff;

}

/***************************************************
                SIDEBAR ICONS
****************************************************/

.sidebar-menu i{

    transition:.35s;

}

.sidebar-menu li:hover i{

    transform:scale(1.15);

}

/***************************************************
                    USER IMAGE
****************************************************/

.user-panel img{

    transition:.4s;

}

.user-panel img:hover{

    transform:scale(1.08) rotate(2deg);

}

/***************************************************
                NAVBAR ICONS
****************************************************/

.navbar-nav>.notifications-menu>a>.fa,
.navbar-nav>.messages-menu>a>.fa,
.navbar-nav>.tasks-menu>a>.fa,
.navbar-nav>.user-menu>a>.fa{

    transition:.35s;

}

.navbar-nav>li>a:hover .fa{

    transform:translateY(-2px);

}

/***************************************************
                    DROPDOWN
****************************************************/

.dropdown-menu{

    animation:dropdownFade .25s;

}

@keyframes dropdownFade{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/***************************************************
                BUTTON ICONS
****************************************************/

.btn i{

    transition:.25s;

}

.btn:hover i{

    transform:translateX(3px);

}

/***************************************************
                    LABELS
****************************************************/

.label{

    box-shadow:0 4px 10px rgba(0,0,0,.08);

}

/***************************************************
                    BADGES
****************************************************/

.badge{

    animation:badgePulse 2s infinite;

}

@keyframes badgePulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.12);

    }

    100%{

        transform:scale(1);

    }

}

/***************************************************
                TABLE ROWS
****************************************************/

.table-hover tbody tr{

    transition:.25s;

}

.table-hover tbody tr:hover{

    transform:scale(1.003);

}

/***************************************************
                DATATABLE SEARCH
****************************************************/

.dataTables_filter input{

    transition:.3s;

}

.dataTables_filter input:focus{

    transform:scale(1.02);

}

/***************************************************
                INPUTS
****************************************************/

.form-control{

    transition:.3s;

}

.form-control:hover{

    border-color:#7dddf7;

}

.form-control:focus{

    transform:translateY(-1px);

}

/***************************************************
                LOGIN PANEL
****************************************************/

.login-box,
.register-box{

    animation:loginFade .45s;

}

@keyframes loginFade{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*****************************************************************
*
*      SCHOOL ERP PREMIUM
*      SECTION 3 - SMALL BOX PREMIUM
*
******************************************************************/

.small-box{

    position:relative;

    overflow:hidden;

    border:none;

    border-radius:18px;

    color:#fff;

    box-shadow:0 15px 35px rgba(0,0,0,.10);

    transition:all .35s ease;

}

.small-box:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 45px rgba(0,0,0,.18);

}

.small-box>.inner{

    padding:28px;

    position:relative;

    z-index:2;

}

.small-box h3{

    font-size:42px;

    font-weight:700;

    margin-bottom:12px;

    letter-spacing:1px;

}

.small-box p{

    font-size:15px;

    opacity:.95;

    font-weight:500;

}

.small-box .icon{

    position:absolute;

    right:20px;

    top:20px;

    font-size:78px;

    opacity:.12;

    transition:.35s;

}

.small-box:hover .icon{

    transform:scale(1.18) rotate(-6deg);

    opacity:.18;

}

.small-box-footer{

    position:relative;

    z-index:2;

    background:rgba(255,255,255,.12)!important;

    color:#fff!important;

    font-weight:600;

    padding:12px;

    transition:.30s;

}

.small-box-footer:hover{

    background:rgba(255,255,255,.20)!important;

}

/************************************************
            GLOW EFFECT
*************************************************/

.small-box:before{

    content:"";

    position:absolute;

    top:-60px;

    right:-60px;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(255,255,255,.10);

}

.small-box:after{

    content:"";

    position:absolute;

    bottom:-70px;

    left:-70px;

    width:160px;

    height:160px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

}

/************************************************
        PREMIUM COLORS
*************************************************/

.bg-aqua{

    background:linear-gradient(
        135deg,
        #00c0ef,
        #00acd8,
        #0093c2
    )!important;

}

.bg-green{

    background:linear-gradient(
        135deg,
        #00b894,
        #00a07c,
        #008d6d
    )!important;

}

.bg-yellow{

    background:linear-gradient(
        135deg,
        #f39c12,
        #f1a208,
        #e67e22
    )!important;

}

.bg-red{

    background:linear-gradient(
        135deg,
        #e74c3c,
        #d63031,
        #c0392b
    )!important;

}

.bg-light-blue{

    background:linear-gradient(
        135deg,
        #3498db,
        #2d8ac7,
        #2575b5
    )!important;

}

.bg-purple{

    background:linear-gradient(
        135deg,
        #8e44ad,
        #7d3c98
    )!important;

}

.bg-maroon{

    background:linear-gradient(
        135deg,
        #8e2c4f,
        #7b1f42
    )!important;
}

/************************************************
        ANIMATED BORDER
*************************************************/

.small-box span{

    position:relative;

}

.small-box:hover{

    animation:premiumFloat .6s ease;

}

@keyframes premiumFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(-8px);

    }

}
/*****************************************************************
*
*      SCHOOL ERP PREMIUM
*      SECTION 4 - PREMIUM BUTTONS
*
******************************************************************/

/************************************************
                BUTTONS
*************************************************/

.btn{

    border:none;

    border-radius:10px;

    font-weight:600;

    letter-spacing:.3px;

    padding:8px 18px;

    transition:all .30s ease;

    position:relative;

    overflow:hidden;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

}

.btn:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 24px rgba(0,0,0,.15);

}

.btn:active{

    transform:scale(.98);

}

/************************************************
            SHINE EFFECT
*************************************************/

.btn:before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:rgba(255,255,255,.30);

    transform:skewX(-25deg);

    transition:.55s;

}

.btn:hover:before{

    left:140%;

}

/************************************************
            PRIMARY
*************************************************/

.btn-primary{

    background:linear-gradient(
        135deg,
        #00c0ef,
        #00acd8
    );

    color:#fff;

}

.btn-primary:hover{

    background:linear-gradient(
        135deg,
        #00b3e0,
        #009fca
    );

}

/************************************************
            SUCCESS
*************************************************/

.btn-success{

    background:linear-gradient(
        135deg,
        #00b894,
        #00a37d
    );

}

/************************************************
            INFO
*************************************************/

.btn-info{

    background:linear-gradient(
        135deg,
        #3498db,
        #2b84c5
    );

}

/************************************************
            WARNING
*************************************************/

.btn-warning{

    background:linear-gradient(
        135deg,
        #f39c12,
        #e67e22
    );

    color:#fff;

}

/************************************************
            DANGER
*************************************************/

.btn-danger{

    background:linear-gradient(
        135deg,
        #e74c3c,
        #c0392b
    );

}

/************************************************
            DEFAULT
*************************************************/

.btn-default{

    background:#fff;

    border:1px solid #dfe6ec;

    color:#34495e;

}

.btn-default:hover{

    background:#f7fafc;

}

/************************************************
            BUTTON ICON
*************************************************/

.btn i{

    margin-right:6px;

    transition:.30s;

}

.btn:hover i{

    transform:translateX(3px);

}

/************************************************
            BUTTON GROUP
*************************************************/

.btn-group .btn{

    border-radius:8px;

}

/************************************************
            CIRCLE BUTTON
*************************************************/

.btn-circle{

    width:42px;

    height:42px;

    border-radius:50%;

    padding:0;

    text-align:center;

    line-height:42px;

}

.btn-circle i{

    margin:0;

}
/*****************************************************************
*
*      SCHOOL ERP PREMIUM
*      SECTION 5 - PREMIUM FORMS
*
******************************************************************/

/************************************************
                FORM GROUP
*************************************************/

.form-group{
    margin-bottom:22px;
}

/************************************************
                LABEL
*************************************************/

.control-label,
label{

    color:#34495e;

    font-weight:600;

    margin-bottom:8px;

}

/************************************************
                INPUTS
*************************************************/

.form-control{

    height:42px;

    border-radius:10px;

    border:1px solid #dbe4ec;

    background:#fff;

    color:#34495e;

    box-shadow:none;

    transition:all .30s ease;

}

.form-control:hover{

    border-color:#9ddff4;

}

.form-control:focus{

    border-color:#00c0ef;

    box-shadow:
        0 0 0 4px rgba(0,192,239,.15);

    background:#fff;

}

/************************************************
                TEXTAREA
*************************************************/

textarea.form-control{

    height:auto;

    min-height:120px;

    resize:vertical;

}

/************************************************
                SELECT
*************************************************/

select.form-control{

    cursor:pointer;

}

/************************************************
            PLACEHOLDER
*************************************************/

.form-control::placeholder{

    color:#a8b3bd;

}

/************************************************
            INPUT GROUP
*************************************************/

.input-group-addon{

    background:#f8fafc;

    border:1px solid #dbe4ec;

    color:#00c0ef;

    border-radius:10px 0 0 10px;

}

/************************************************
            INPUT GROUP RIGHT
*************************************************/

.input-group .form-control:last-child{

    border-radius:0 10px 10px 0;

}

/************************************************
            CHECKBOX
*************************************************/

.checkbox label{

    font-weight:500;

}

/************************************************
            RADIO
*************************************************/

.radio label{

    font-weight:500;

}

/************************************************
            FILE INPUT
*************************************************/

input[type=file]{

    padding:8px;

    border-radius:10px;

    border:1px solid #dbe4ec;

    background:#fff;

}

/************************************************
            HELP BLOCK
*************************************************/

.help-block{

    color:#7f8c8d;

    font-size:12px;

}

/************************************************
            VALIDATION
*************************************************/

.has-error .form-control{

    border-color:#e74c3c;

}

.has-error .form-control:focus{

    box-shadow:0 0 0 4px rgba(231,76,60,.12);

}

.has-success .form-control{

    border-color:#2ecc71;

}

.has-success .form-control:focus{

    box-shadow:0 0 0 4px rgba(46,204,113,.12);

}

/************************************************
            DISABLED
*************************************************/

.form-control[disabled]{

    background:#f3f6f9;

    cursor:not-allowed;

    opacity:.8;

}
/*****************************************************************
*
*      SCHOOL ERP PREMIUM
*      SECTION 6 - PREMIUM DATATABLES
*
******************************************************************/

/************************************************
                    TABLE
*************************************************/

.table{

    margin-bottom:0;

    background:#fff;

}

.table>thead>tr>th{

    background:linear-gradient(135deg,#00c0ef,#00acd8);

    color:#fff;

    border:none;

    padding:14px;

    font-size:13px;

    font-weight:600;

    letter-spacing:.4px;

    vertical-align:middle;

}

.table>tbody>tr{

    transition:all .25s ease;

}

.table>tbody>tr:nth-child(even){

    background:#fafcfe;

}

.table>tbody>tr:hover{

    background:#eefbff;

    transform:scale(1.003);

    box-shadow:0 2px 10px rgba(0,192,239,.08);

}

.table>tbody>tr>td{

    padding:13px;

    vertical-align:middle;

    border-top:1px solid #edf2f7;

}

/************************************************
                DATATABLE WRAPPER
*************************************************/

.dataTables_wrapper{

    padding:10px;

}

/************************************************
                SEARCH
*************************************************/

.dataTables_filter{

    margin-bottom:15px;

}

.dataTables_filter label{

    font-weight:600;

    color:#34495e;

}

.dataTables_filter input{

    border-radius:30px;

    border:1px solid #dbe4ec;

    height:40px;

    padding:0 18px;

    margin-left:8px;

    background:#fff;

    transition:.30s;

}

.dataTables_filter input:focus{

    border-color:#00c0ef;

    box-shadow:0 0 0 4px rgba(0,192,239,.15);

}

/************************************************
                LENGTH
*************************************************/

.dataTables_length select{

    border-radius:25px;

    height:38px;

    border:1px solid #dbe4ec;

    padding:0 10px;

}

/************************************************
                INFO
*************************************************/

.dataTables_info{

    color:#7f8c8d;

    padding-top:18px!important;

}

/************************************************
                PAGINATION
*************************************************/

.dataTables_paginate{

    padding-top:15px!important;

}

.pagination{

    margin:0;

}

.pagination>li>a,
.pagination>li>span{

    margin:0 3px;

    border:none;

    border-radius:10px;

    color:#34495e;

    box-shadow:0 2px 8px rgba(0,0,0,.05);

    transition:.30s;

}

.pagination>li>a:hover{

    background:#00c0ef;

    color:#fff;

}

.pagination>.active>a,
.pagination>.active>span{

    background:linear-gradient(135deg,#00c0ef,#009fd2);

    color:#fff;

}

/************************************************
                PROCESSING
*************************************************/

.dataTables_processing{

    border-radius:12px;

    border:none;

    background:#fff;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

    padding:18px;

}

/************************************************
                EMPTY TABLE
*************************************************/

.dataTables_empty{

    padding:35px!important;

    color:#95a5a6;

    font-size:15px;

}

/************************************************
                SORT ICON
*************************************************/

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after{

    opacity:.6;

}

/************************************************
                RESPONSIVE
*************************************************/

.table-responsive{

    border:none;

}

/************************************************
            CHECKBOX COLUMN
*************************************************/

.table input[type=checkbox]{

    transform:scale(1.15);

    cursor:pointer;

}
/*****************************************************************
*
*      SCHOOL ERP PREMIUM
*      SECTION 7 - PREMIUM MODALS
*
******************************************************************/

/************************************************
                MODAL BACKDROP
*************************************************/

.modal-backdrop{

    background:#102a43;

    opacity:.55 !important;

}

/************************************************
                MODAL DIALOG
*************************************************/

.modal-dialog{

    animation:modalZoom .35s ease;

}

@keyframes modalZoom{

    from{

        opacity:0;

        transform:scale(.88) translateY(-20px);

    }

    to{

        opacity:1;

        transform:scale(1) translateY(0);

    }

}

/************************************************
                MODAL CONTENT
*************************************************/

.modal-content{

    border:none;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 30px 80px rgba(0,0,0,.25);

}

/************************************************
                MODAL HEADER
*************************************************/

.modal-header{

    background:linear-gradient(135deg,#00c0ef,#009fd2);

    color:#fff;

    border-bottom:none;

    padding:18px 25px;

}

.modal-title{

    font-size:20px;

    font-weight:600;

    color:#fff;

}

/************************************************
                CLOSE BUTTON
*************************************************/

.modal-header .close{

    color:#fff;

    opacity:.9;

    font-size:26px;

    transition:.3s;

}

.modal-header .close:hover{

    opacity:1;

    transform:rotate(90deg);

}

/************************************************
                MODAL BODY
*************************************************/

.modal-body{

    background:#fff;

    padding:25px;

}

/************************************************
                MODAL FOOTER
*************************************************/

.modal-footer{

    background:#f8fafc;

    border-top:1px solid #edf2f7;

    padding:18px 25px;

}

/************************************************
                FORM INSIDE MODAL
*************************************************/

.modal-body .form-group:last-child{

    margin-bottom:0;

}

/************************************************
                BUTTON SPACING
*************************************************/

.modal-footer .btn{

    min-width:110px;

    margin-left:6px;

}

/************************************************
                SCROLLBAR
*************************************************/

.modal-body::-webkit-scrollbar{

    width:8px;

}

.modal-body::-webkit-scrollbar-thumb{

    background:#00c0ef;

    border-radius:20px;

}
/*****************************************************************
*
*      SCHOOL ERP PREMIUM
*      SECTION 8 - PREMIUM BOXES & WIDGETS
*
******************************************************************/

/************************************************
                PREMIUM BOX
*************************************************/

.box{

    position:relative;

    border:none;

    border-radius:18px;

    background:#fff;

    overflow:hidden;

    box-shadow:0 10px 35px rgba(25,42,70,.08);

}

.box:before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#00c0ef,#00d4ff);

}

/************************************************
                HEADER
*************************************************/

.box-header{

    padding:18px 22px;

    background:#fff;

    border-bottom:1px solid #edf2f7;

}

.box-title{

    font-size:18px;

    font-weight:700;

    color:#2f4050;

}

/************************************************
                TOOLS
*************************************************/

.box-tools .btn{

    width:34px;

    height:34px;

    border-radius:50%;

    padding:0;

    background:#f5f8fb;

    color:#6c7a89;

    box-shadow:none;

}

.box-tools .btn:hover{

    background:#00c0ef;

    color:#fff;

}

/************************************************
                BODY
*************************************************/

.box-body{

    padding:22px;

}

/************************************************
                FOOTER
*************************************************/

.box-footer{

    background:#fafcfd;

    border-top:1px solid #edf2f7;

}

/************************************************
            SOLID PRIMARY
*************************************************/

.box.box-primary{

    border-top:none;

}

.box.box-primary>.box-header{

    background:linear-gradient(135deg,#00c0ef,#00a6d8);

    color:#fff;

}

.box.box-primary>.box-header .box-title{

    color:#fff;

}

.box.box-primary>.box-header .btn{

    background:rgba(255,255,255,.18);

    color:#fff;

}

/************************************************
            SUCCESS
*************************************************/

.box.box-success>.box-header{

    background:linear-gradient(135deg,#00b894,#00a37b);

    color:#fff;

}

/************************************************
            WARNING
*************************************************/

.box.box-warning>.box-header{

    background:linear-gradient(135deg,#f39c12,#e67e22);

    color:#fff;

}

/************************************************
            DANGER
*************************************************/

.box.box-danger>.box-header{

    background:linear-gradient(135deg,#e74c3c,#c0392b);

    color:#fff;

}

/************************************************
            INFO
*************************************************/

.box.box-info>.box-header{

    background:linear-gradient(135deg,#3498db,#2980b9);

    color:#fff;

}

/************************************************
            COLLAPSE
*************************************************/

.box.collapsed-box{

    opacity:.95;

}

/************************************************
            HOVER
*************************************************/

.box:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(25,42,70,.15);

}

/************************************************
            WIDGETS
*************************************************/

.info-box{

    border:none;

    border-radius:18px;

    overflow:hidden;

    background:#fff;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.info-box-icon{

    width:90px;

    background:linear-gradient(135deg,#00c0ef,#009fd2);

    color:#fff;

    font-size:34px;

}

.info-box-content{

    padding:15px 18px;

}

.info-box-text{

    font-weight:600;

    color:#7f8c8d;

}

.info-box-number{

    font-size:28px;

    font-weight:700;

    color:#2f4050;

}

/************************************************
            PROGRESS BAR
*************************************************/

.progress{

    height:8px;

    border-radius:20px;

    background:#edf2f7;

}

.progress-bar{

    background:linear-gradient(90deg,#00c0ef,#00d4ff);

}

/************************************************
            ALERTS
*************************************************/

.alert{

    border:none;

    border-radius:12px;

    box-shadow:0 5px 15px rgba(0,0,0,.05);

}

.alert-success{

    background:#e9fff6;

    color:#00875a;

}

.alert-danger{

    background:#fff0f0;

    color:#d63031;

}

.alert-warning{

    background:#fff9eb;

    color:#d68910;

}

.alert-info{

    background:#edfaff;

    color:#0078a8;

}

/************************************************
            PANELS
*************************************************/

.panel{

    border:none;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.panel-heading{

    border-radius:18px 18px 0 0;

    font-weight:700;

}