@charset "utf-8";
/* CSS Document */
.full-img img{ width:100%; height:auto;}
.ratio .full-img{min-width:initial; position:absolute; top:0; right:0; bottom:0; left:0; overflow:hidden; flex:0 0 auto; display:flex;}
.ratio .full-img img{flex:1 1 auto; align-self:center; justify-self:center; object-fit:cover; height:100%; min-width:100%; width:auto;}
.image-fit{min-width:initial; position:relative; overflow:hidden; flex:0 0 auto; display:flex;}
.image-fit img{flex:1 1 auto; align-self:center; justify-self:center; object-fit:cover; height:100%; min-width:100%; width:auto;}

html, body {
    width: 100%;
    height: 100%;
}

.login-body, .inner-body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.login-main, .inner-content {
    flex-grow: 1;
}

.login-header, .login-main, .login-footer {
    flex-shrink: 0;
}

.login-header{ padding:20px 0; background:#fff; }
.login-header .login-btn{ color:#fff; font-weight:700; text-transform:uppercase; border-radius:6px; background:#195ea1; padding:14px 25px; margin-left:auto; text-decoration:none; font-size:18px;}
.login-main{ background:#34343c; padding:100px 0;}
.login-main .container{ position:relative; z-index:2;}
.login-main .image-sm{ position:absolute; z-index:1; top:0; left:0; right:0;}
.login-footer{ background:#ecf7fd; padding:30px 0; text-align:center; color:#2a2b32; font-size:14px;}
.login-footer ul{ margin:0; padding:0; list-style:none;}
.login-content{ background:#fff;}
.login-content .content{ padding:30px;}
.login-content .content h2{ margin:0; font-size:44px; font-weight:300; color:#000;}
.login-content .content h3{ color:#0070cc; font-weight:600;}
.login-content .content h3 span{ color:#34343c; font-size:24px;}
.login-content .content h5{ font-weight:400; font-family: var(--bs-body-font-family); color:#8c8c8c;}
.login-content .content form{ font-weight:500;}
.login-content .content form .form-control{ border-color:#707073; padding-left:40px;}
.login-content .content form .mb-4 label{ margin-bottom:8px; color:#8c8c8c; font-weight:500;}
.login-content .content form input[type=text]{ background-image:url(images/mail.png); background-repeat:no-repeat; background-position:10px 50%;}
.login-content .content form input[type=password]{ background-image:url(images/padlock.png); background-repeat:no-repeat; background-position:10px 50%;}
.login-content .content form input[type=submit]{ display:block; width:100%; color:#fff; font-weight:700; text-transform:uppercase; border-radius:6px; background:#195ea1; height:60px; border:none; cursor:pointer;}
.login-content .content form a{ color:#0070cc; text-decoration:none; margin-left:auto;}
.inner-content{ padding:100px 0; background:#fff; border-top:5px solid #c6c6c8;}

.sidebar{ width:260px; position:fixed; background:#34343c; color:#fff; top:0; left:0; bottom:0; display:flex; flex-direction:column; z-index:1000;}
.sidebar-logo{display:flex; flex-shrink:0; padding:24px;}
.sidebar-body{overflow-y:auto; flex:1 1 auto; padding:24px 0; font-size:14px;}
.sidebar-body h6{ font-size:14px; padding-left:38px; padding-right:38px; margin-bottom:30px;}
.sidebar-body .menu-item + .menu-item{ margin-top:55px;}
.sidebar-body .menu-item ul{ margin:0; padding:0; list-style:none;}
.sidebar-body .menu-item ul li a{ height:39px; display:flex; align-items:center; padding-left:38px; padding-right:38px; color:#fff; text-decoration:none;}
.sidebar-body .menu-item ul li a:hover, .sidebar-body .menu-item ul li.active a{ background:#195ea1; color:#fff;}
.sidebar-body .menu-item ul li a i{ font-size:18px; margin-right:16px;}
.sidebar-body .menu-item ul li a:hover i, .sidebar-body .menu-item ul li.active a i{ color:#92d0f1;}

.wrapper{ padding:20px 40px 40px 40px; margin-left:0px; position:relative; z-index:100; min-height:calc(100vh - 50px);}
.wrapper .box{ background:#fff; -webkit-box-shadow:0 0 20px 0 rgba(0,0,0,0.1); box-shadow:0 0 20px 0 rgba(0,0,0,0.1);}
.wrapper .content{ padding:30px;}
.wrapper .box .box-title{ position:relative; padding-right:60px;}
.wrapper .box .box-title h4{ font-size:20px; font-weight:400;}
.wrapper h3{ font-size:28px;}
.wrapper .box .box-title .action{ position:absolute; top:50%; right:0; margin:0; margin-top:-10px; padding:0; list-style:none !important;}
.wrapper .box .box-title .action li{ float:left; margin-right:10px;}
.wrapper .box .box-title .action li:last-child{ margin-right:0;}
.wrapper .box .box-title .action li a{ height:20px; width:20px; background-size:100%; background-position:center; background-repeat:no-repeat; display:block;}
.wrapper .box .box-title .action li a.setting{ background-image:url(images/settings.svg);}
.wrapper .box .box-title .action li a.close-btn{ background-image:url(images/close.svg);}
.wrapper .box .form-control, .wrapper .box .form-control:focus{ height:60px; border:1px solid #f3f3f7; border-radius:0; background:#f3f3f7;}
.wrapper .box input[type=submit]{ color:#000; text-align:center; text-transform:uppercase; height:60px; background:#f2d62a; width:100%; border:none; border-radius:0;}
.wrapper .box [class*=col-] ul{ margin:0; padding:0; list-style:none;}
.wrapper .box [class*=col-] ul li{ background:url(images/bullet.png) no-repeat left; padding-left:16px; margin-bottom:8px;}
.wrapper .box [class*=col-] ul li:last-child{ margin-bottom:0;}
.form-group{margin:10px;}

.dash-body{ background:#ecf7fd; padding:0; min-height:100vh; margin-left:260px; position:relative; z-index:100; color:#1c2136;}
.dash-body .header{ padding:40px 40px; height:40px;}
.dash-body .header .logo { color:#000; font-size:15px; text-transform:uppercase; letter-spacing:1px;}
.dash-body .header .logo span + span{ margin-left:16px; font-weight:700;}
.dash-body .header form{ width:300px; margin-left:40px;}
.dash-body .header form .form-control{ height:40px; border-radius:6px; border:none; background-image:url(images/search.png); background-repeat:no-repeat; background-position:right 15px center; padding-right:45px; text-align:right;}
.dash-body .header form .form-control:focus{ box-shadow:none; border:none;}
.dash-body .header .notify{ background:url(images/notification.png) no-repeat center; height:40px; width:40px; position:relative; margin-left:auto; position:relative;}
.dash-body .header .notify span.dot{ background:#3ebf8d; height:15px; width:15px; border-radius:30px; position:absolute; top:5px; left:5px;}
.dash-body .header .user{ margin-left:24px; font-size:14px; font-weight:600; color:#1c2136; line-height:1;}
.dash-body .header .user-img{ display:block; width:40px; overflow:hidden; border-radius:6px; margin-right:10px;}
.dash-body .header .user small{ display:block; opacity:0.6; font-weight:400;}
.dash-body .header .down-arrow{ background:url(images/arrow-down.png) no-repeat center; height:30px; width:30px; display:block; margin-left:55px;}

.dash-body .dash-content{ padding:40px 40px 15px;}
.dash-body .dash-content .date-field{ font-size:14px;}
.dash-body .dash-content .date-field span{ position:relative; padding-left:70px; color:#1c2136; font-weight:500; opacity:0.6;}
.dash-body .dash-content .date-field span:before{ content:''; position:absolute; height:1px; width:50px; content:''; left:0; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); background:#1c2136;}
.dash-body .dash-content .date-field input{ margin-left:20px; background:url(images/arrow-down.png) no-repeat right; background-size:20px; padding-right:40px; color:#1c2136; font-weight:500; font-size:14px; border:none; outline:0;}
.dash-body .dash-content .date-field input::-moz-placeholder { color:#1c2136; opacity: 1;}
.dash-body .dash-content .date-field input::placeholder { color:#1c2136; opacity: 1;}

.box-content{ background-color:#fff; border-radius:25px;}
.box-content.p-md-5{ padding:37px !important;}
.box-shadow{box-shadow: rgba(100, 100, 111, 0.05) 0px 7px 29px 0px;}
.box-bg{ background:url(images/box-bg.jpg) no-repeat center; background-size:cover;}
.box-content .title button{ background:url(images/arrow-down.png); height:30px; width:30px; border:none; margin-left:auto; cursor:pointer;}
.box-content h5{ font-size:18px; margin-bottom:0;}
.box-content .title h5 span{ color:#55aade; font-size:14px; margin-left:10px;}
.box-content .title a{ color:#55aade; font-size:14px; margin-left:auto; text-decoration:none; font-weight:500;}
.box-content .tr{ background:url(images/Icon-metro-arrow-up.png) no-repeat left; padding-left:65px;}
.box-content .tr h5{ margin:0;}
.box-content .tr h4{ font-size:28px; color:#55aade;}
.box-content .tr .graphic{ width:90px; margin-left:16px;}

.top-activity{ margin:0; padding:0; list-style:none;}
.top-activity li{ margin-top:12px; display:flex; align-items:center; font-weight:500; position:relative; font-size:14px;}
.top-activity li span{ margin-left:auto; background:#fff; padding-left:30px; position:relative; z-index:2;}
.top-activity li strong{ background:#fff; padding-right:30px; position:relative; z-index:2; min-width:55%;}
.top-activity li:before{ content:''; position:absolute; height:1px; width:100%; left:0; right:0; z-index:1; content:''; left:0; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); background:#d8d8d8;}

.top-programs { margin:0; padding:0; list-style:none;}
.top-programs li{ margin-top:12px; display:flex; align-items:center; font-weight:500; position:relative; font-size:14px;}
.top-programs li span{ margin-left:auto;}
.top-programs li small{ font-size:8px; margin-left:10px; opacity:0.5;}
.program h2{ color:#55aade; font-weight:600; font-size:42px; margin:0;}
.program a{color:#55aade; text-decoration:none;}

.header-sm{ background:#ebf6fc; padding:0 16px; height:70px;}
.menu-btn{display:none;}
.menu-btn{ background:url(images/menu-icon.png) no-repeat left; height:30px; width:100px; border:none; cursor:pointer; padding:0;}
.sidebar .menu-btn{ background:url(images/menu-icon-white.png) no-repeat left center; height:30px;}
.header-sm .logo{ margin-left:auto; width:75px;}
.header-sm .search-btn{ background:url(images/search.png) no-repeat center; border:none; cursor:pointer; margin-left:auto; height:18px; width:18px; padding:0;}
.header-sm .notify{ background:url(images/notification.png) no-repeat center; background-size:18px; height:18px; width:18px; position:relative; margin-left:15px; position:relative; padding:0;}
.header-sm .notify span.dot{ background:#3ebf8d; height:10px; width:10px; border-radius:30px; position:absolute; top:0; left:0;}
.header-sm .user{ width:30px; height:30px; overflow:hidden; border-radius:6px; margin-left:15px;}

.logo-title { color:#000; font-size:10px; text-transform:uppercase; letter-spacing:1px;}
.logo-title span + span{ margin-left:10px; font-weight:700;}
.logo-title img{ height:14px; width:auto;}

.footer{ padding:16px 16px 24px; font-size:16px;}
.footer ul{ margin:0; padding:0; list-style:none;}

@media(min-width:768px){
.login-footer{ font-size:17px;}
.login-footer ul, .footer ul{ display:flex; justify-content:center; align-items:center;}
.login-footer ul li + li:before, .footer ul li + li:before{ content:"|"; float:left; margin:0 10px;}
}

@media(min-width:992px){

.login-content .content{ padding:60px;}	
.login-header{ padding-left:50px; padding-right:50px;}
}