@import url("../icons/fontawesome/css/fontawesome.min.css");
@import url("../icons/fontawesome/css/solid.min.css");

/* -------------------*
 *       GLOBAL       
 *------------------- */
html,
body { font-size: 14px; font-weight: 400; color: #222; background:#f2f2f2; font-family:'Muli', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
input, select, textarea, button { font-size:16px; font-family:'Muli', Helvetica, Arial, sans-serif; }
ol, ul, p { margin-bottom: 1.5rem; line-height: 1.6em; }
a { color:#008cf8; text-decoration:underline; -webkit-transition:0.3s; -moz-transition:0.3s; -ms-transition:0.3s; -o-transition:0.3s; transition:0.3s; }
a:hover, a:focus { color:#008cf8; text-decoration: none; } 
.nowrap { white-space:nowrap; }
img { max-width:100%; height:auto; }
button { width:auto; padding:0; overflow:visible; cursor:pointer; line-height:normal !important; }
button::-moz-focus-inner { border:0; padding:0;  margin:-1px 0 0 0; }
button:active { box-shadow:inset 1px 1px 2px rgba(0,0,0,0.3); }
.align-middle { display:flex; align-items:center; }
.lead { font-size: 19px; font-weight: 400; line-height: 1.6em; margin-bottom: 2rem; }
.caps { text-transform:uppercase; }
.color { color: #e66b2f; }
hr { margin-top:30px; margin-bottom:30px; }
strong { font-weight: 700; }

/* headlines
----------------------------------------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-weight: 700; font-family:'Muli', Helvetica, Arial, sans-serif; }
h1 { margin-bottom: 2rem; }

/* clear 
----------------------------------------- */
.clear { clear:both; }

/* alerts
---------------------------------------- */
.alert button { padding: 0; background: none; border: 0; outline: none !important; box-shadow: none !important; }
.alert button:hover { opacity: 0.5; }
.notify-alert { z-index: 99999 !important; padding-left: 40px; padding-right: 30px; }
.notify-alert .icon { font-size: 20px; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); }
.notify-alert .progress { height: 4px; border-radius: 0; position: absolute; top: 0; left: 0; right: 0; background: none; }
.notify-alert .progress .progress-bar { height: 4px; border-radius: 0; background: rgba(0,0,0,0.1); }

.alert a:not(.btn):hover { text-decoration: none; }
.alert ul:last-child,
.alert ol:last-child,
.alert p:last-child { margin-bottom: 0; padding-bottom: 0; }
.alert.alert-icon { padding-left: 3.5rem; position: relative; }
.alert.alert-icon .alert-i { font-size: 20px; position: absolute; top: 9px; left: 1.5rem; line-height: 1em;  display: block; height: 20px; }
.alert .alert-title { display: block; }
.alert .buttons-group { padding-top: 0.5rem; margin-bottom: -5px; }
.notify-alert { z-index: 99999 !important; padding-left: 40px; padding-right: 30px; }
.notify-alert .icon { font-size: 20px; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); }
.notify-alert .progress { height: 4px; border-radius: 0; position: absolute; top: 0; left: 0; right: 0; background: none; }
.notify-alert .progress .progress-bar { height: 4px; border-radius: 0; background: rgba(0,0,0,0.1); }

.main-sidebar .alert { font-size: 0.9rem; padding-left: 2.9rem; margin: 0; }
.main-sidebar .alert.alert-icon .alert-i { left: 1.3em; font-size: 1.1rem; top: 13px; }
.main-sidebar .alert .buttons-group { padding-top: 0; }

/* loader
---------------------------------------- */
.loader { display: inline-block; position: relative; width: 64px; height: 64px; }
.loader div { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); border: 4px solid #0ba4b3; opacity: 1; border-radius: 50%; animation: loader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; }
.loader div:nth-child(2) { animation-delay: -0.5s; }
@keyframes loader { 0% { width: 0; height: 0; opacity: 1; } 100% { width: 58px; height: 58px; opacity: 0; } }

.page-loader-wrap,
.listing-loader-wrap { display: none; position: absolute; z-index: 50; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255,255,255,0.9); }
.page-loader-wrap { z-index: 99999; }
.page-loader-wrap.loading,
.listing-loader-wrap.loading { display: block; }
.page-loader-wrap .page-loader,
.listing-loader-wrap .listing-loader { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); text-align: center; }
.page-loader-wrap .page-loader-text,
.listing-loader-wrap .listing-loader-text {  display: block; }

/* -------------------*
 *       LAYOUT       *
 *------------------- */

/* header
---------------------------------------- */
header { position: sticky; top: 0; background:#fff; z-index: 50; box-shadow: 0 0 15px rgba(0, 0, 0, 0.05); }
header .navbar { padding: 10px 0; }
header .navbar-brand { width: 175px; display: block; padding: 0; }
header .navbar-nav li { padding-left: 10px; }

.search { position: relative; margin-bottom: 20px; }
.search .form-control { padding-left: 40px; }
.search button { position: absolute; top: 0; left: 0; padding: 0; width: 38px; height: 38px; text-align: center; }
.search button i { margin: -3px 0 0; display: inline-block; vertical-align: middle; }
.search .cancel { position: absolute; top: 0; right: 0; width: 38px; line-height: 38px; text-align: center; display: block; }

/* main
---------------------------------------- */
main { position: relative; z-index: 1; }

/* section
---------------------------------------- */
.section { padding: 40px 0 20px; position: relative; }

/* login
---------------------------------------- */
.form-signin { min-height: 100vh; padding: 20px; display: flex; align-items: center; justify-content: center; }
.form-signin form { width: 350px; }
.form-signin .form-signin-logo { text-align: center; }
.form-signin .form-signin-logo img { width: 200px; height: auto; }
.form-signin .form-floating { margin-bottom: 10px; }

.form-control-wrap { position: relative; }
.validation-icon { color: #dc3545; }
.validation-icon-absolute { color: #dc3545; font-size: 20px; position: absolute; right: 0.7rem; top: calc(50% + 15px); transform: translateY(-50%); }
.validation-text,
div:not(.form-control-wrap) > .error-message { color: #fff; background: #dc3545; padding: 3px 10px; font-size: 0.95rem; margin-bottom: 0.5rem; padding-left: 1.8rem; position: relative; display: inline-block; border-radius: 4px; }
.validation-text i,
div:not(.form-control-wrap) > .error-message i { font-size: 1rem; position: absolute; top: 5px; left: 0.5rem; display: block; line-height: 1em; }
.form-control-wrap .error-message { color: #dc3545 !important; font-size: 20px !important; position: absolute; right: 0.7rem; top: calc(50%); transform: translateY(-50%); }
.form-control-wrap .redactor-box.error~.error-message { top: 5rem; }
.form-control-wrap textarea.error~.error-message { top: 1.5rem; }
.form-control-wrap select.error~.error-message { right: 2rem; }

.form-signin { --input-padding-x: .90rem; --input-padding-y: .90rem; }
.form-signin form .form-group { position: relative; margin: 0 -1.5rem 1rem; border: 0; padding: 0 1.5rem; }
.form-signin form .form-group .field input,
.form-signin form .form-group .field label:not(.error-message) { padding: var(--input-padding-y) var(--input-padding-x); }
.form-signin form .form-group .field .form-control { height: 50px; }
.form-signin form .form-group .field label:not(.error-message) { font-size: 15px; font-weight: 400; position: absolute; top: 0; left: 0; display: block; width: 100%; margin-bottom: 0; line-height: 1.5; color: #B2B2B2; border: 1px solid transparent; border-radius: 4px; transition: all .1s ease-in-out; }
.form-signin form .form-group .field input:not(.error-message)::-webkit-input-placeholder { color: transparent; }
.form-signin form .form-group .field input:not(.error-message):-ms-input-placeholder { color: transparent; }
.form-signin form .form-group .field input:not(.error-message)::-ms-input-placeholder { color: transparent; }
.form-signin form .form-group .field input:not(.error-message)::-moz-placeholder { color: transparent; }
.form-signin form .form-group .field input::placeholder { color: transparent; }
.form-signin form .form-group .field input:not(.error-message):not(:placeholder-shown) { padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3)); padding-bottom: calc(var(--input-padding-y) / 3); }
.form-signin form .form-group .field input:not(.error-message):not(:placeholder-shown) ~ label { padding-top: calc(var(--input-padding-y) / 3); padding-bottom: calc(var(--input-padding-y) / 3); font-size: 12px; color: #888; }

/* pagination
---------------------------------------- */
.pagination .page-item { margin: 0 3px 5px; }
.pagination span { line-height: 34px; min-height: 34px; padding: 0 5px }
.pagination .page-item .page-link { font-size: 14px; color: #222; border-color: #ddd; border-radius: 4px; text-decoration: none !important; }
.pagination .page-item .page-link i { display: inline-block; vertical-align: middle; margin: -2px -2px 0 -2px; }
.pagination .page-item.disabled { opacity: 0.4; }
.pagination .page-item.active .page-link { background: #ddd; }

/* card
---------------------------------------- */
.card { border: 0; margin-bottom: 25px; }
.card,
.card-body { min-height: 100%; }
.card-body > div.col-lg-6 { padding-bottom: 15px; }
.card-body { padding: 20px 20px 5px; }
.card-body p { margin-bottom: 10px; }
.card-body p:last-child { margin-bottom: 0; }
.card-body hr { margin: 10px 0; background: #999; }
.card-title { margin-bottom: 10px; }

/* listing
---------------------------------------- */
.listing { display: flex; flex-wrap: wrap; margin: 0 -5px 15px; }
.listing .listing-item {  width: 20%; padding: 0 5px 10px; }
.listing .listing-item a { color: #222; text-decoration: none; border: 2px solid #eee; display:  block; padding: 8px 15px; border-radius: 5px; }
.listing .listing-item a:hover { background: #f4f4f4; }
.listing .listing-item a i { margin-right: 5px; color: #999; }

.accordion-item .accordion-button { display: flex; justify-content: space-between; padding-right: 45px; }
.accordion-item .accordion-button::after { margin: 0; position: absolute; top: 15px; right: 15px; }
.accordion-item .accordion-button:not(.collapsed) { background: #fff; box-shadow: none; }
.accordion-item .accordion-body { padding-top: 1px; }
.accordion-item:first-of-type .accordion-button { border-top-left-radius: 5px; border-top-right-radius: 5px; }
.accordion-item:last-of-type .accordion-collapse,
.accordion-item:last-of-type .accordion-button.collapsed { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }

/* footer
---------------------------------------- */
footer { font-size: 12px; padding-bottom: 30px; }
footer a { color: #000; }

/* buttons
---------------------------------------- */
.btn { font-size: 14px; font-weight: 600; box-shadow: none !important; text-transform: uppercase; letter-spacing: 1px; border-width: 0; padding: 8px 15px; white-space: normal; border-radius: 5px !important; text-decoration: none !important; font-family:'Open Sans', Helvetica, Arial, sans-serif; -webkit-transition:0.3s; -moz-transition:0.3s; -ms-transition:0.3s; -o-transition:0.3s; transition:0.3s; }
.btn.btn-lg { font-size: 18px; padding: 12px 30px; }
.btn.btn-xs { font-size: 16px; padding: 10px 20px; font-weight: 400; }
.btn.btn-block { width: 100%; }
.btn i { margin-right: 7px; }

.btn.btn-link { color: #0060ff; padding: 0; }
.btn.btn-link:hover { color: #0060ff; }

.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:disabled { color: #fff; box-shadow: none !important; background: rgb(153,153,153); background: -moz-radial-gradient(circle, rgba(153,153,153,1) 0%, rgba(102,102,102,1) 100%); background: -webkit-radial-gradient(circle, rgba(153,153,153,1) 0%, rgba(102,102,102,1) 100%); background: radial-gradient(circle, rgba(153,153,153,1) 0%, rgba(102,102,102,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#999999",endColorstr="#666666",GradientType=1); }
.btn-primary:hover { color: #fff !important; background: rgb(68,68,68); background: -moz-radial-gradient(circle, rgba(68,68,68,1) 0%, rgba(0,0,0,1) 100%); background: -webkit-radial-gradient(circle, rgba(68,68,68,1) 0%, rgba(0,0,0,1) 100%); background: radial-gradient(circle, rgba(68,68,68,1) 0%, rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#444444",endColorstr="#000000",GradientType=1); }

.btn-outline-primary,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:disabled { color: #444; border: 1px solid #ddd; padding: 7px 15px; }
.btn-outline-primary:hover { color: #fff; background-color: #777;; border-color: #777; }

.btn.btn-loading { color: transparent !important; position:relative; }
.btn.btn-loading:before { color: #fff; position: absolute; top: 50%; left: 50%; font-size: 20px; display: block; width: 22px; height: 22px; line-height: 22px; text-align: center; margin: -11px 0 0 -11px; content: "\e1d4"; font-family: 'Font Awesome 6 Pro' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; animation: load_icon 3s linear infinite; }
.btn-secondary.btn-loading:before { color: #222; }
.btn.btn-loading:after { content:''; position:absolute; top:0; bottom:0; left:0; right:0; display:block; }
.btn.disabled { cursor:default; }

@keyframes load_icon { from {transform: rotate(0deg);} to {transform: rotate(360deg);} }

/* forms
---------------------------------------- */
.form-control { font-size: 14px; height: 38px; border-color: #ddd; border-radius: 5px; }

.form-control::placeholder { color: #222; opacity: 0.4; }
.form-control:-ms-input-placeholder { color: #222; opacity: 0.4; }
.form-control::-ms-input-placeholder { color: #222; opacity: 0.4; }

/* custom
---------------------------------------- */
.icon-404 i{font-size:6rem}

/* -------------------*
 *         IE         *
 *------------------- */
.clearfix { zoom:1\9; }

/* -------------------*
 *     RESPONSIVE     *
 *------------------- */
@media all and (max-width:1399px) {
    
}
@media all and (max-width:1199px) {
   .listing .listing-item {  width: 25%; }
}
@media all and (min-width:992px) {
	header .navbar-expand-lg .navbar-collapse { flex-grow: inherit !important; }
}
@media all and (max-width:991px) {
    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { padding-left: 20px; padding-right: 20px; }

    .listing .listing-item {  width: 33.3333%; }
}
@media all and (max-width:767px) {
}
@media all and (max-width:575px) {
	.section { padding: 30px 0 10px; }
	.listing .listing-item {  width: 50%; }
}
@media all and (max-width:475px) {
   h1 { font-size: 1.7rem; margin-bottom: 1.5rem; }
   .accordion-item .accordion-button { flex-wrap: wrap; }
   .accordion-item .accordion-button strong { width: 100%; }

   header .navbar-brand { width: 140px; margin-right: 0; }
   .btn-outline-primary, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary:disabled { font-size: 13px; padding: 4px 10px; }
   .btn i { margin-right: 5px; }
}
@media all and (max-width:370px) {
    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { padding-left: 15px; padding-right: 15px; }
    .listing .listing-item {  width: 100%; }
}