html body .font-48 { font-size: 48px; }
html body .font-36 { font-size: 36px; }
html body .font-24 { font-size: 24px; }
html body .font-20 { font-size: 20px; }
html body .font-18 { font-size: 18px; }
html body .font-16 { font-size: 16px; }
html body .font-14 { font-size: 14px; }
html body .font-13 { font-size: 13px; }
html body .font-12 { font-size: 12px; }
html body .font-10 { font-size: 10px; }

a.link { color: var(--primary); text-decoration: underline; }
a.link:hover { color: var(--gray-dark); }

/* .form-group { margin-bottom: 0; } */
.auth-wrapper .authentication-form .form-group .input-group-text { background-color: #f9f9f9; }
.ps-container { position: relative; padding-right: 15px; }

.bb { border-bottom: 1px solid #f1f1f1; }
.d-flex.bb:last-child { border-bottom:none; margin-bottom:0 !important; padding-bottom:0 !important; }

.rounded-circle { border-radius: 50% !important; }

/* MAIN MENU */
.main-menu .navbar-brand img { max-height: 35px;  }
.main-menu .nav-item .nav-link { font-size: 14px; font-weight: 400; padding: 12px 15px; }
.main-menu.navbar-light .nav-item .nav-link, .main-menu.navbar-light .navbar-text { color: #222; }
.main-menu .nav-item:hover .nav-link, .main-menu .nav-item.active .nav-link { color: var(--primary); }
.main-menu .mm-dropdown { background-color: #fff; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -webkit-box-shadow: 0 2px 30px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0 2px 30px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 30px rgba(0, 0, 0, 0.08); }

.main-menu .megamenu { position: static; }
.main-menu .megamenu .dropdown-menu { background: none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; border: none; width: 100%; padding: 0; margin: 0 }
.main-menu .megamenu .dropdown-menu:after { display: none; }

.main-menu .navbar-nav .dropdown-menu { padding: 10px 20px; }
.main-menu .navbar-nav .megamenu .dropdown-menu { padding: 0; }
.main-menu .navbar-nav .megamenu .dropdown-menu .container-fluid { padding-right: 0; padding-left: 0; }

.main-menu .dropdown-menu .dropdown-item, .mm-dropdown .mm-link { padding: 5px 0px; display: inline-block; font-size: 13px; }
.mm-dropdown .mm-link:hover { color: var(--primary); }
.mm-dropdown .mm-heading { font-size: 14px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.mm-dropdown .mm-link { white-space: nowrap; }

.main-menu .dropdown-menu .dropdown-item:hover { color: var(--primary); background: none !important; }
.main-menu .profile-picture { width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; }

.main-menu .navbar-brand .logo-sm { display: none; }
.main-menu .navbar-brand .logo-lg { display: inline; }

.main-menu.fixed, .main-menu.st, .mobile-menu-area.st { width: 100%; position: fixed; z-index: 20; border-bottom: 1px solid #ccc; }


@media only screen and (max-width: 1150px) {
    .main-menu .navbar-brand .logo-sm { display: inline; }
    .main-menu .navbar-brand .logo-lg { display: none; }
}

@media only screen and (max-width: 1065px) {
    .main-menu .navbar-brand .logo-sm { display: none; }
    .main-menu .navbar-brand .logo-lg { display: none; }
    .main-menu .nav-item .nav-link { padding: 12px 10px; }
}

/* MOBILE MENU */
.mobile-menu-area { padding: 10px 0px; position: fixed; top:0; width: 100%; display: block; z-index: 20; background: rgba(255,255,255, 0.8); }
.mobile-menu-area img { max-height: 35px; }
.mobile-menu-area.st { width: 100%; position: fixed; z-index: 20; background: #fff; top:0; -webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1); box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1); }

.nav-icon {
    width: 24px; height: 24px; position: relative; margin: 0 auto; margin-top: 10px; margin-right: 15px; cursor: pointer; float: right;
    -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;
}
.nav-icon span { display: block; position: absolute;
    height: 3px; width: 100%; background: #19578d; border-radius: 5px; opacity: 1; left: 0;
    -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;
}

.nav-icon span:nth-child(1) { top: 0px; }
.nav-icon span:nth-child(2), .nav-icon span:nth-child(3) { top: 8px; }
.nav-icon span:nth-child(4) { top: 16px; }

.nav-icon.open span:nth-child(1) { top: 18px; width: 0%; left: 50%; }
.nav-icon.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.nav-icon.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.nav-icon.open span:nth-child(4) { top: 18px; width: 0%; left: 50%; }

.mobile-menu { width: 250px; height: 100%; top: 0; z-index: 2000; left: -250px; background: #2d2e2d; position: fixed; }
.mobile-menu.mobile-menu-open { left: 0px; }
.mobile-menu { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }

.sidebar-nav ul { padding: 0; margin: 0; list-style: none; }
.sidebar-nav .metismenu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.sidebar-nav .metismenu li + li { margin-top: 1px; }
.sidebar-nav .metismenu li:first-child { margin-top: 5px; }
.sidebar-nav .metismenu li:last-child { margin-bottom: 5px; }
.sidebar-nav .metismenu > li { background: #1C1C1C; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; }
.sidebar-nav .metismenu a { position: relative; display: block; padding: 5px 0px 5px 15px; color: #adb5bd; outline-width: 0; transition: all .3s ease-out; }
.sidebar-nav .metismenu ul a { padding: 5px 0px 5px 30px; }
.sidebar-nav .metismenu ul ul a { padding: 5px 0px 5px 45px; }
.sidebar-nav .metismenu a:hover, .sidebar-nav .metismenu a:focus, .sidebar-nav .metismenu a:active, .sidebar-nav .metismenu .mm-active > a { color: var(--primary); text-decoration: none; }
.sidebar-nav .metismenu i.ik { padding-right: 10px;}

/**
 * Nestable
 */

.dd { position: relative; display: block; margin: 0; padding: 0; max-width: 600px; list-style: none; font-size: 13px; line-height: 20px; }

.dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
.dd-list .dd-list { padding-left: 30px; }
.dd-collapsed .dd-list { display: none; }

.dd-item,
.dd-empty,
.dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; }

.dd-handle { display: block; height: 30px; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
    background: #fafafa;
    -webkit-border-radius: 3px;
            border-radius: 3px;
    box-sizing: border-box; -moz-box-sizing: border-box;
}
.dd-handle:hover { color: var(--primary); background: #fff; }

.dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; }
.dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }
.dd-item > button[data-action="collapse"]:before { content: '-'; }

.dd-placeholder,
.dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; }
.dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5;
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}

.dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
.dd-dragel > .dd-item .dd-handle { margin-top: 0; }
.dd-dragel .dd-handle {
    -webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
            box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
}

@media only screen and (max-width: 991px) {
    .wrapper { padding-top: 60px; }
}

/* JARALLAX */
.jarallax { position: relative; z-index: 0; }
.jarallax > .jarallax-img { position: absolute; object-fit: cover;
    /* support for plugin https://github.com/bfred-it/object-fit-images */
    font-family: 'object-fit: cover;'; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }

/* PAGE PRELOADER */
.page-preloader { height: 100vh; width: 100vw; font-size: 16px; font-weight: 300; }

.loader { height: 20px; width: 200px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.loader--dot { height: 20px; width: 20px; background-color: black; position: absolute; border: 2px solid white; animation-name: loader; animation-timing-function: ease-in-out; animation-duration: 3s; animation-iteration-count: infinite; }
.loader--dot:first-child { background-color: #66cc00; animation-delay: 0.4s; }
.loader--dot:nth-child(2) { background-color: #0099ff; animation-delay: 0.2s; }
.loader--dot:nth-child(3) { background-color: #ff3300; animation-delay: 0s; }
.loader--text { position: absolute; top: 200%; left: 0; right: 0; width: 4rem; margin: auto; white-space: nowrap; }
.loader--text:after { content: "Loading"; font-weight: bold; animation-name: loading-text; animation-duration: 3s; animation-iteration-count: infinite; }

.btn.dropdown-toggle::after { display: inline-block; width: 0; height: 0; margin-left: .255em; vertical-align: .255em; content: ""; border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent; }

.auth-wrapper .lavalite-bg { background-position: right; }
.flex-break { flex-basis: 100%; height: 0; }

@keyframes loader {
  15% { transform: translateX(0); }
  45% { transform: translateX(200px); }
  65% { transform: translateX(200px); }
  95% { transform: translateX(0); }
}
@keyframes loading-text {
  0% { content: "Loading"; }
  25% { content: "Loading."; }
  50% { content: "Loading.."; }
  75% { content: "Loading..."; }
}