/****************************************************************
*
*           PREMIUM ADMINLTE 2 THEME
*           Version 1.0
*
****************************************************************/

html,
body{
    background:#ecf3f8;
    color:#3b4b5a;
    font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}

/**************************************************************
                        VARIABLES
**************************************************************/

:root{

    --primary:#00c0ef;
    --primary-dark:#009fc8;
    --primary-light:#59dfff;

    --secondary:#263544;

    --success:#00b894;

    --warning:#f39c12;

    --danger:#e74c3c;

    --info:#3498db;

    --gray:#7f8c8d;

    --light:#ffffff;

    --bg:#f4f8fb;

}

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

.main-header{

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

    border:none;

}

.main-header .logo{

    background:linear-gradient(
        135deg,
        #00c0ef,
        #00abd8,
        #0095c4
    );

    color:#fff;

    font-weight:700;

    letter-spacing:1px;

    border-right:none;

    transition:.35s;

}

.main-header .logo:hover{

    background:linear-gradient(
        135deg,
        #00d7ff,
        #00b6e5,
        #009fd0
    );

}

.main-header .navbar{

    background:linear-gradient(
        90deg,
        #00c0ef,
        #00acd9,
        #0097c7
    );

    border:none;

}

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

    color:#fff;

    transition:.30s;

}

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

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

}

.main-header .sidebar-toggle{

    color:#fff;

}

.main-header .sidebar-toggle:hover{

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

}

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

.main-sidebar{

    background:#1f2937;

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

}

.sidebar{

    padding-top:20px;

}

.user-panel{

    padding-bottom:20px;

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

}

.user-panel>.info{

    padding-top:10px;

}

.user-panel>.info>p{

    color:#fff;

    font-size:15px;

}

.user-panel>.info>a{

    color:#a8d8ff;

}

.sidebar-menu{

    margin-top:20px;

}

.sidebar-menu>li{

    margin:6px 12px;

}

.sidebar-menu>li>a{

    border-radius:10px;

    padding:12px 15px;

    transition:.30s;

    color:#d5dde5;

}

.sidebar-menu>li>a>i{

    width:22px;

    text-align:center;

    margin-right:10px;

    color:#8db7d6;

}

.sidebar-menu>li:hover>a{

    background:#2b3948;

    color:#fff;

}

.sidebar-menu>li.active>a{

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

    color:#fff;

    box-shadow:0 8px 18px rgba(0,192,239,.35);

}

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

    color:#fff;

}

.treeview-menu{

    background:#263544;

    border-radius:10px;

    margin-top:8px;

    padding:8px;

}

.treeview-menu>li>a{

    border-radius:8px;

    color:#c9d5df;

    transition:.25s;

}

.treeview-menu>li>a:hover{

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

    color:#fff;

}

/**************************************************************
                    CONTENT
**************************************************************/

.content-wrapper{

    background:#edf3f8;

}

.content-header{

    padding:20px 20px 10px;

}

.content-header h1{

    font-weight:600;

    color:#2f4353;

}

.content-header>.breadcrumb{

    background:#fff;

    padding:10px 18px;

    border-radius:30px;

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

}

.content-header>.breadcrumb>li>a{

    color:#00a7d6;

}
/****************************************************************
*
*                 PREMIUM BOXES
*
****************************************************************/

.box{

    border:none;

    border-radius:16px;

    overflow:hidden;

    background:#fff;

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

    transition:all .35s ease;

}

.box:hover{

    transform:translateY(-4px);

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

}

.box-header{

    border:none;

    padding:18px 25px;

    background:#fff;

}

.box-header.with-border{

    border-bottom:1px solid #edf2f7;

}

.box-title{

    color:#34495e;

    font-size:18px;

    font-weight:700;

}

.box-body{

    padding:25px;

}

.box-footer{

    background:#fafcfd;

    border-top:1px solid #edf2f7;

    padding:18px 25px;

}

/******************************************************/

.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;

}

.box.box-info{

    border-top:4px solid #3498db;

}

/******************************************************/

.box-header>.box-tools{

    margin-top:-3px;

}

.btn-box-tool{

    color:#95a5a6;

    transition:.3s;

}

.btn-box-tool:hover{

    color:#00c0ef;

    transform:rotate(90deg);

}

/****************************************************************
*
*                     SMALL BOX
*
****************************************************************/

.small-box{

    border-radius:18px;

    overflow:hidden;

    border:none;

    color:#fff;

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

    transition:.35s;

}

.small-box:hover{

    transform:translateY(-6px);

}

.small-box>.inner{

    padding:25px;

}

.small-box h3{

    font-size:38px;

    font-weight:700;

    margin-bottom:10px;

}

.small-box p{

    font-size:15px;

    opacity:.95;

}

.small-box .icon{

    top:18px;

    right:20px;

    font-size:75px;

    opacity:.18;

    transition:.35s;

}

.small-box:hover .icon{

    transform:scale(1.15);

    opacity:.25;

}

.small-box>.small-box-footer{

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

    color:#fff;

    padding:12px;

    font-weight:600;

}

.small-box>.small-box-footer:hover{

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

}

/******************************************************/

.bg-aqua{

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

}

.bg-green{

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

}

.bg-yellow{

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

}

.bg-red{

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

}

.bg-light-blue{

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

}

/****************************************************************
*
*                     WIDGET USER
*
****************************************************************/

.box-widget{

    border-radius:18px;

}

.widget-user{

    border-radius:18px;

    overflow:hidden;

}

.widget-user .widget-user-header{

    height:170px;

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

}

.widget-user .widget-user-image img{

    border:5px solid #fff;

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

}

.widget-user .widget-user-username{

    font-size:24px;

    font-weight:700;

}

.widget-user .widget-user-desc{

    opacity:.95;

}

/****************************************************************
*
*                     INFO BOX
*
****************************************************************/

.info-box{

    border:none;

    border-radius:18px;

    overflow:hidden;

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

    transition:.35s;

}

.info-box:hover{

    transform:translateY(-5px);

}

.info-box-icon{

    border-radius:0;

    font-size:30px;

}

.info-box-content{

    padding:18px;

}

.info-box-text{

    color:#7f8c8d;

    text-transform:uppercase;

    font-weight:600;

}

.info-box-number{

    font-size:24px;

    color:#34495e;

}

/****************************************************************
*
*                       PANEL
*
****************************************************************/

.panel{

    border:none;

    border-radius:16px;

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

}

.panel-heading{

    border:none;

    font-weight:700;

    padding:18px 22px;

}

.panel-footer{

    background:#fafbfc;

    border-top:1px solid #edf2f7;

}

/****************************************************************
*
*                     CALLOUT
*
****************************************************************/

.callout{

    border-radius:14px;

    border-left-width:5px;

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

}

.callout.callout-info{

    border-left-color:#00c0ef;

}

.callout.callout-success{

    border-left-color:#00b894;

}

.callout.callout-warning{

    border-left-color:#f39c12;

}

.callout.callout-danger{

    border-left-color:#e74c3c;

}
/****************************************************************
*
*                PREMIUM BUTTONS
*
****************************************************************/

.btn{

    border-radius:8px;

    border:none;

    font-weight:600;

    transition:all .25s ease;

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

}

.btn:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}

.btn:focus{

    outline:none!important;

}

.btn-primary{

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

    color:#fff;

}

.btn-primary:hover{

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

}

.btn-success{

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

}

.btn-warning{

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

}

.btn-danger{

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

}

.btn-info{

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

}

.btn-default{

    background:#fff;

    color:#34495e;

    border:1px solid #dfe6ec;

}

/****************************************************************
*
*                FORM CONTROLS
*
****************************************************************/

.form-control{

    height:42px;

    border-radius:10px;

    border:1px solid #dbe6ef;

    box-shadow:none;

    transition:.3s;

}

textarea.form-control{

    height:auto;

}

.form-control:focus{

    border-color:#00c0ef;

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

}

.control-label{

    color:#34495e;

    font-weight:600;

}

.input-group-addon{

    border-radius:10px 0 0 10px;

    border:1px solid #dbe6ef;

    background:#f7fafc;

}

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

    border-radius:0 10px 10px 0;

}

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

select.form-control{

    cursor:pointer;

}

/****************************************************************
*
*                  TABLES
*
****************************************************************/

.table{

    background:#fff;

}

.table>thead>tr{

    background:#00c0ef;

    color:#fff;

}

.table>thead>tr>th{

    border:none;

    padding:14px;

    font-weight:600;

}

.table>tbody>tr>td{

    vertical-align:middle;

    padding:12px;

}

.table-hover>tbody>tr:hover{

    background:#f3fbfe;

}

.table-striped>tbody>tr:nth-of-type(odd){

    background:#fafcfd;

}

/****************************************************************
*
*                  DATATABLES
*
****************************************************************/

.dataTables_wrapper{

    padding-top:10px;

}

.dataTables_filter input{

    border-radius:30px;

    border:1px solid #d8e5ec;

    padding:7px 15px;

    margin-left:8px;

}

.dataTables_length select{

    border-radius:8px;

    border:1px solid #d8e5ec;

}

.dataTables_paginate .paginate_button{

    border-radius:6px!important;

    margin:0 2px;

}

.dataTables_paginate .paginate_button.current{

    background:#00c0ef!important;

    color:#fff!important;

    border:none!important;

}

.dataTables_paginate .paginate_button:hover{

    background:#00a7d4!important;

    color:#fff!important;

}

.dataTables_info{

    color:#7f8c8d;

}

/****************************************************************
*
*                  MODALS
*
****************************************************************/

.modal-content{

    border:none;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.25);

}

.modal-header{

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

    color:#fff;

    border:none;

    padding:18px 25px;

}

.modal-title{

    font-weight:700;

}

.modal-header .close{

    color:#fff;

    opacity:1;

}

.modal-body{

    padding:25px;

}

.modal-footer{

    border-top:1px solid #edf2f7;

    padding:18px 25px;

}

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

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

    border:none;

    margin:0 3px;

    border-radius:8px;

    color:#34495e;

}

.pagination>.active>a{

    background:#00c0ef;

}

.pagination>li>a:hover{

    background:#00c0ef;

    color:#fff;

}

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

.label{

    border-radius:20px;

    padding:6px 12px;

    font-weight:600;

}

.label-primary{

    background:#00c0ef;

}

.label-success{

    background:#00b894;

}

.label-warning{

    background:#f39c12;

}

.label-danger{

    background:#e74c3c;

}

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

.badge{

    border-radius:30px;

    padding:6px 10px;

    background:#00c0ef;

}

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

.progress{

    height:10px;

    border-radius:20px;

    overflow:hidden;

    background:#edf2f7;

}

.progress-bar{

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

}
/****************************************************************
*
*               PREMIUM EFFECTS & ANIMATIONS
*
****************************************************************/

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

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-track{

    background:#eef4f8;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(180deg,#00c0ef,#0095c4);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#008db9;

}

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

.content-wrapper{

    animation:fadeContent .45s;

}

@keyframes fadeContent{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

a{

    transition:.25s;

}

a:hover{

    text-decoration:none;

}

/***********************
        CARDS
************************/

.card-premium{

    background:#fff;

    border-radius:18px;

    padding:25px;

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

    transition:.35s;

}

.card-premium:hover{

    transform:translateY(-6px);

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

}

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

.user-panel{

    padding:20px;

}

.user-panel img{

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

    transition:.35s;

}

.user-panel img:hover{

    transform:scale(1.08);

}

/***********************
      SIDEBAR MENU
************************/

.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,.08);

    transition:.35s;

}

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

    left:0;

}

/***********************
       TREEVIEW
************************/

.treeview-menu{

    animation:fadeMenu .25s;

}

@keyframes fadeMenu{

    from{

        opacity:0;

        transform:translateY(-10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

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

    transition:.3s;

}

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

    transform:scale(1.15);

}

/***********************
      DROPDOWNS
************************/

.dropdown-menu{

    border:none;

    border-radius:14px;

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

    padding:8px;

}

.dropdown-menu>li>a{

    border-radius:8px;

    padding:10px 15px;

    transition:.25s;

}

.dropdown-menu>li>a:hover{

    background:#f4fbfd;

    color:#00c0ef;

}

/***********************
       NOTIFICATIONS
************************/

.label-warning{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

    }

}

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

.box-header{

    position:relative;

}

.box-header:after{

    content:"";

    position:absolute;

    left:25px;

    bottom:0;

    width:55px;

    height:4px;

    background:#00c0ef;

    border-radius:5px;

}

/***********************
       TIMELINE
************************/

.timeline>li>.timeline-item{

    border-radius:15px;

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

    border:none;

}

.timeline>li>.fa{

    background:#00c0ef;

}

/***********************
      CHAT BOX
************************/

.direct-chat-messages{

    padding:20px;

}

.direct-chat-text{

    border-radius:15px;

}

.direct-chat-primary .right>.direct-chat-text{

    background:#00c0ef;

    border-color:#00c0ef;

}

/***********************
      LOGIN BUTTON
************************/

.login-btn{

    transition:.35s;

}

.login-btn:hover{

    transform:translateY(-2px);

}

/***********************
     TABLE HOVER
************************/

.table-hover tbody tr{

    transition:.25s;

}

.table-hover tbody tr:hover{

    transform:scale(1.003);

}

/***********************
      INPUT ICON
************************/

.input-group-addon{

    transition:.3s;

}

.form-control:focus+.input-group-addon{

    background:#00c0ef;

    color:#fff;

}

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

.badge{

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

}

/***********************
        TOOLTIPS
************************/

.tooltip-inner{

    border-radius:8px;

    padding:8px 12px;

}

/***********************
      BREADCRUMB
************************/

.breadcrumb>li+li:before{

    color:#00c0ef;

}

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

.content-header h1{

    letter-spacing:.5px;

}

/***********************
      HOVER ICONS
************************/

.fa{

    transition:.25s;

}

.btn:hover .fa{

    transform:rotate(-8deg);

}

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

.main-footer{

    background:#fff;

    border-top:1px solid #e7edf2;

    color:#7f8c8d;

    padding:18px 25px;

}

/***********************
        LOADER
************************/

.loading-overlay{

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

}

.loading-img{

    animation:rotateLoader 1s linear infinite;

}

@keyframes rotateLoader{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}
/****************************************************************
*
*          PREMIUM UI 2026
*
****************************************************************/

/***************************
        GLASS CARDS
****************************/

.glass-card{

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

    backdrop-filter:blur(15px);

    border-radius:18px;

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

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

}

/***************************
      DASHBOARD TITLE
****************************/

.content-header h1{

    font-size:30px;

    font-weight:700;

    position:relative;

    display:inline-block;

}

.content-header h1:after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:80px;

    height:5px;

    border-radius:20px;

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

}

/***************************
       PAGE TITLE
****************************/

h1,h2,h3,h4,h5{

    color:#263544;

    font-weight:700;

}

/***************************
      ICON CIRCLE
****************************/

.icon-circle{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    color:#fff;

    font-size:22px;

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

}

/***************************
      STATISTICS CARD
****************************/

.stat-card{

    border-radius:18px;

    background:#fff;

    overflow:hidden;

    position:relative;

    transition:.35s;

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

}

.stat-card:hover{

    transform:translateY(-6px);

}

.stat-card:before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:5px;

    height:100%;

    background:#00c0ef;

}

/***************************
        WIDGET ICON
****************************/

.widget-icon{

    width:70px;

    height:70px;

    line-height:70px;

    border-radius:50%;

    text-align:center;

    font-size:30px;

    color:#fff;

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

}

/***************************
      PROFILE IMAGE
****************************/

.img-circle{

    transition:.4s;

}

.img-circle:hover{

    transform:scale(1.08);

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

}

/***************************
      SEARCH INPUT
****************************/

.navbar-form .form-control{

    border-radius:25px;

    border:none;

    box-shadow:none;

}

/***************************
        NAV PILLS
****************************/

.nav-pills>li>a{

    border-radius:25px;

    transition:.3s;

}

.nav-pills>li.active>a{

    background:#00c0ef;

}

.nav-pills>li>a:hover{

    background:#e9faff;

    color:#00c0ef;

}

/***************************
      LIST GROUP
****************************/

.list-group-item{

    border:none;

    border-bottom:1px solid #eef2f7;

    transition:.3s;

}

.list-group-item:hover{

    padding-left:22px;

    background:#fbfdff;

}

/***************************
       BLOCKQUOTE
****************************/

blockquote{

    border-left:5px solid #00c0ef;

    background:#f7fcff;

    border-radius:8px;

    padding:18px;

}

/***************************
      CODE
****************************/

pre{

    border:none;

    border-radius:12px;

}

/***************************
      NAV TABS
****************************/

.nav-tabs{

    border-bottom:none;

}

.nav-tabs>li>a{

    border-radius:10px 10px 0 0;

}

.nav-tabs>li.active>a{

    background:#00c0ef;

    color:#fff;

}

/***************************
      HR
****************************/

hr{

    border-color:#edf2f7;

}

/***************************
      LOADING BUTTON
****************************/

.btn.loading{

    pointer-events:none;

    opacity:.75;

}

.btn.loading:after{

    content:"";

    display:inline-block;

    width:16px;

    height:16px;

    margin-left:10px;

    border:2px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    border-radius:50%;

    animation:spin .7s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/***************************
      HOVER ZOOM
****************************/

.zoom{

    transition:.35s;

}

.zoom:hover{

    transform:scale(1.04);

}

/***************************
      SHADOW
****************************/

.shadow{

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

}

.shadow-lg{

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

}

/***************************
      RADIUS
****************************/

.radius{

    border-radius:18px;

}

.radius-sm{

    border-radius:10px;

}

.radius-lg{

    border-radius:24px;

}

/***************************
      BACKGROUND
****************************/

.bg-gradient-primary{

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

    color:#fff;

}

.bg-gradient-success{

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

    color:#fff;

}

.bg-gradient-danger{

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

    color:#fff;

}

.bg-gradient-warning{

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

    color:#fff;

}

/***************************
      TRANSITION
****************************/

*{

    transition:
        background .25s,
        color .25s,
        border-color .25s,
        box-shadow .25s;

}