@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.eot);src:url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype"),url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")}
/* GENERAL */
body {background-color: #aec60a;background-image: url('../img/bg-1.png');background-position:center top;background-attachment: fixed;min-height:100vh;margin:0;color:#FFF;}
main {min-height: calc(100vh - 100px);}

* ::-webkit-scrollbar-track{background-color:transparent}
* ::-webkit-scrollbar{background-color:transparent;width:16px}
* ::-webkit-scrollbar-thumb{border:4px solid transparent;border-radius:8px;background-clip:content-box;background-color:rgba(30, 40, 45, 0.5)}
* ::-webkit-scrollbar-thumb:hover{border:3px solid transparent;background-color:#1d252b}

* {font-family: 'Open Sans', sans-serif;box-sizing: border-box;}

a {color:#335362;}
a:hover {color:#bd9e02;text-decoration:none;}

.text-left {text-align: left !important;}
.text-right {text-align: right !important;}

.rtl {direction: rtl !important;text-align: right !important;}
.ltr {direction: ltr !important;text-align: left !important;}

.w-auto {width: max-content !important;}

.section {position:relative;background: #FFF;color:#333;padding:1.5rem;margin-top:20px;margin-bottom: 2rem;min-height: calc(100vh - 220px);border-radius: 5px;box-shadow: 0 0 3px 3px rgb(175,175,175,0.25);}
.header-title {font-size: 1.2rem;margin-inline-end: 1.5rem;line-height: 1;color: #53535f;}

/* BACKGROUNDS */
.bg-0 {background: #3C5663;color:#FFF;}
.bg-1 {background: #128176;color:#FFF;}
.bg-2 {background: #f3b806;color:#FFF;}
.bg-3 {background: #17609C;color:#FFF;}
.bg-4 {background: #22a769;color:#FFF;}
.bg-5 {background: #fb5447;color:#FFF;}

.bg-0:hover {background: #284a5c;color:#FFF;}
.bg-1:hover {background: #01756a;color:#FFF;}
.bg-2:hover {background: #ffa600;color:#FFF;}
.bg-3:hover {background: #105288;color:#FFF;}
.bg-4:hover  {background: #197e4f;color:#FFF;}
.bg-5:hover {background: #e3524b;color:#FFF;}

/* HEADER */
header {position: relative;width: 100%;height: 80px;line-height: 80px;padding: 0;font-size: 20px;margin: 0;text-align: center;color: #FFF;background: #335362;margin-bottom: 10px;}
.logo {position: relative;display: inline-block;width: 100px;height: 80px;margin:0 auto;text-align: center;overflow: hidden;}
.logo img {height: 100px;padding: 8px;border:5px solid #f8f9fa;border-radius: 50%;margin-top: -10px;cursor:none;}
.logo:hover img {background:#f8f9fa;border-color:#bd9e02;-webkit-transition: -webkit-transform 2.5s ease-out;-moz-transition: -moz-transform 2.5s ease-out;-o-transition: -o-transform 2.5s ease-out;-ms-transition: -ms-transform 2.5s ease-out;transition: transform 2.5s ease-out;transform: rotate(360deg);}
.dashboard-logo {position: relative;float: left;width: max-content;height:80px;line-height: 80px;margin:0 auto;}
.dashboard-logo img {height: 60px;width:auto;}
.menu {position: relative;float: right;width:max-content;margin-left:15px;}
.menu a {color: #FFF !important;margin:0 10px;}
.menu a:hover i {transform: scale(1.2);color: #e2c80b !important;}

/* NAVIGATION */
.navigation {position:relative;width:100%;min-height:1.25rem;line-height:1.25rem;margin-top:10px;}
.navigation a,.navigation span {float:left;}
.navigation a {color:#335362;text-decoration:none;}
.navigation a:hover {color:#055160;text-decoration:none;}
.navigation .separator {float: left;background:url('../img/angle-double-right-solid.svg') no-repeat;width: 0.75rem;height:0.75rem;background-size: cover;margin: 0.25rem 6px;}

/* FORM VIEW */
.formview {padding-bottom:calc(4rem + 80px);overflow-y: hidden;}
.formview-header {background-color:#F6F6F6;margin:-1.5rem;margin-bottom:1.5rem;}
.formview-footer {position:absolute;bottom:1.5rem;right:1.5rem;left:1.5rem;}
.formview-footer .client-logo {position: relative;float:right;height:80px;}
.formview-footer .client-logo img {position:absolute;bottom:0;right:0;max-height:80px;width:auto;}

/* LOGIN */
.auth-box {position:relative;background:#FFF;color:#333;margin:auto;width: -webkit-fill-available;width: -moz-fill-available;width: fill-available;max-width: 450px;padding: 30px 25px;margin-top: 50px;margin-bottom: 20px;box-shadow: 0 0 6px 3px rgba(75,75,75,0.2);border-radius: 20px;border: 3px solid #d6b81d;}
.auth-box .form-check-input:checked {background-color: #e2c520;border-color: #caaf1c;}
.auth-box .form-check-input:focus {border-color: #caaf1c;box-shadow: 0 0 0 0.25rem rgba(210,180,30,0.2);}
.auth-box .btn-submit {background: linear-gradient(45deg, #ffe026, #bca219);border-color: #dcbd1f;color: #FFF;width: 100%;}
.auth-box .btn-submit:hover {background: linear-gradient(-45deg, #ffe026, #bca219);border-color: #dcbd1f;color: #FFF;}
.auth-box .btn-submit:focus {box-shadow: 0 0 0.25rem rgba(20,160,120,0.25);}
.auth-box .btn-draft {background-color:#fdbb00;border-color: #fdbb00;color: #FFF;width: 100%;}
.auth-box .btn-draft:hover {background-color: #ffb307;border-color: #ffb307;color: #FFF;}
.auth-box .btn-draft:focus {box-shadow: 0 0 0.25rem rgba(250,190,0,0.25);}
.auth-box .btn-submit i,.btn-draft i {padding-right:3px}
.auth-box .hidden {display: none;}
.auth-box input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
.auth-box input[type=number] {-moz-appearance: textfield;}
.auth-box .check-availability {position:absolute;right:7px;top:7px;z-index:3}

/* 404 PAGE */
.Error404Block {position: relative;background: #FFF;color:#333;width: 100%;height: auto;display: block;text-align:center;padding: 2rem;margin: 2rem auto;border: 5px solid #eecd23;border-radius: 2rem;}
.Error404Headline {position: relative;width:100%;font-size:3rem;font-weight: 600;}
.Error404Icon {position: relative;width:100%;font-size: 10rem;line-height: 12rem;color: #eecd23;}
.Error404Paragraph {position: relative;width:100%;font-size:2rem;}

/* FORM VIEW */
.formview {padding-bottom:calc(4rem + 80px);overflow-y: hidden;}
.formview-header {background-color:#F6F6F6;margin:-1.5rem;margin-bottom: 1.5rem;}
.formview-footer {position:absolute;bottom:1.5rem;right:1.5rem;left:1.5rem;}
.formview-footer .client-logo {position: relative;float:right;height:80px;}
.formview-footer .client-logo img {position:absolute;bottom:0;right:0;max-height:80px;width:auto;}

/* FORM REPORT */
.chart {position:relative;width:100%;padding: 0.5rem 1rem;padding-right: 2rem;padding-top:56.25%;background: #f6f6f6;margin-bottom: 1.5rem;border-radius: 5px;box-shadow: 0 0 3px 3px rgba(150,150,150,0.2);}
.chart-remove {position: absolute;top: 0.75rem;right: 0.78rem;background: #dc3545;color: #FFF;font-size: 1.2rem;line-height: 2rem;height: 2rem;width: 2rem;text-align: center;border-radius: 3px;cursor:pointer;z-index: 9999;}

/* ALERTS */
.success-alert {position: fixed;text-align: left;max-width: calc(100% - 30px);width: auto;height: 2.6rem;bottom: 15px;left: 30px;color: #FFF;line-height: 1.1rem;font-size: 1rem;padding: 0.5rem;padding-bottom:1rem;background: #0e9488;text-align: center;z-index: 99999;animation: loading-alert 1s;animation-direction: alternate;}
.failure-alert {position: fixed;text-align: left;max-width: calc(100% - 30px);width: auto;bottom: 15px;left: 30px;color: #FFF;line-height: 1.1rem;font-size: 1rem;padding: 0.5rem;padding-bottom:1rem;background: #F14538;text-align: center;z-index: 99999;animation: loading-alert 1s;animation-direction: alternate;}
.success-alert i,.failure-alert i {padding-right:5px;}
@keyframes loading-alert {0%   {bottom: -100%;}}
.loading-bar {position:absolute;bottom: 0px;left:0;right:0;width:100%;height: 5px;background: rgba(46,62,70,0.25);}
.loading {background-color: #ffae00;width: 0px;height: 5px;overflow: auto;transition-duration: 2s;transition-delay: 1s;}

/* OVERLAY */
.overlay {position:fixed;display: none;top:0;left:0;right:0;bottom:0;background: rgba(50,80,100,0.8);z-index:99999;}
.overlay-content {position:fixed;top:0;left:0;right:0;bottom:0;padding: 3rem;z-index:99999;overflow-y: auto;}
.overlay-content-block {position: relative;width:100%;height:100%;padding: 1rem 0;}
.closeBtn {position:absolute;color:#FFF;right: calc(50% - 2.75rem);top:0;font-size: 2rem;padding: 0.5rem 1.5rem;cursor:pointer;z-index:999999;}
.closeBtn:hover {transform: rotate(360deg);transition: all 0.5s ease-in-out 0s;}
.overlay-content::-webkit-scrollbar {display:none;}
.overlay-content::-moz-scrollbar {display:none;}

.form-block {position: relative;width: 100%;max-width: 600px;min-height:200px;float: none;margin: auto;background: #FFF;padding: 1rem 2rem;border-radius: 1rem;box-shadow:1px 3px 4px rgba(35,40,47,0.2);border-top: 3px solid #f9bb00;border-bottom: 3px solid #f9bb00;}

/* RESPONSIVE */
@media screen and (max-width:990px) {
    main,header {padding-inline:20px;}
    .container {width: 100% !important;max-width: 100% !important;}
}
@media screen and (max-width:780px) {
    main,header {padding-inline:10px;}
    body {font-size: 0.95rem;}
    header {height: 50px;line-height: 50px;font-size: 20px;}
    .dashboard-logo {height: 50px;line-height: 50px;}
    .dashboard-logo img {height: 40px;}
    .logo {width: 70px;height: 50px;}
    .logo img {height: 70px;}
}