:root{
   --main-color: #111e38;
   --main-dark-color: #0b1424;
   --main-light-color: #2e3951;
   --light-color: #8596b9;
   --lighter-color: #bcdcf9;
   --logo-color: #6188FF;

   --gray-color: #a1a7bb;
   --green-color: #06D6A0;
   --red-color: #e2325e;
   --yellow-color: #FFF100;
   --orange-color: #EBAF33;
   --blue-color: #4168de;
}

*{ margin:0; padding:0; outline:none; box-sizing:border-box!important; user-select:none; }
body{ background:linear-gradient(var(--main-color), var(--main-light-color)); color:var(--gray-color); font-family:'Roboto', sans-serif; font-size:14px; padding-top:145px; overflow-x:hidden; }
a{ text-decoration:none; color:var(--gray-color); }

/* Logo */
.logo{ font-family:'Philosopher', cursive; font-weight:bold; font-size:35px; color:var(--light-color); text-decoration:none; user-select:none; text-shadow: 1px 1px 2px rgb(0,0,0,0.85); }

/* Main */
.wlib-wrapper{ display:block; width:100vw; min-height:100vh; overflow:auto; position:relative; }

/* Loading backdrop */
.loading-backdrop{ position:fixed; top:0; left:0; width:100vw; height:100vh; background:linear-gradient(var(--main-color), var(--main-light-color)); opacity:1; z-index:9999; }
.loading-backdrop.unloading{ background:rgba(0,0,0,.45); opacity:1; }

/* Containers */
.wlib-container{ color:var(--gray-color); width:1200px; margin:0 auto; padding:45px 25px 120px 25px; min-height:calc( 100vh ); overflow-x:hidden; }
@media (max-width:1200px){
   .wlib-container{ width:980px; }
}
@media (max-width:840px){
   .wlib-container{ width:100vw; }
}

body.home .wlib-container{ padding: 100px 25px 110px 25px; }

.error-container{ margin:15px; border-radius:5px; border:solid 1px rgba(255,255,255,0.15); padding:15px; background:rgba(255,255,255,0.05); }
.error-container .fas{ font-size:16px; margin-right:10px; }

/* Block icon */
.icon-block{ display:inline-block; width:20%; padding:25px 15px; border-radius:5px; margin:0 2.5% 25px 2.5%; text-align:center; background:rgba(255,255,255,0.05); vertical-align:top; }
.icon-block .fas{ display:block; font-size:42px; margin-bottom:20px; opacity:0.35; }
.icon-block span{ display:block; font-size:12px; text-transform:uppercase; }
.icon-block span.nb{ font-size:18px; color:#fff; margin-bottom:5px; font-weight:bold; }

/* Badges */
.badge{ opacity:0.2; display:inline-block; width:120px; height:83px; margin:25px 20px; position:relative; text-align:center; }
.badge:hover{ opacity:0.3; }
.badge.active{ opacity:1; }
.badge img{ width:80px; margin-bottom:10px; border-radius:50%; box-shadow:0 1px 3px 0 rgba(0,0,0,0.35); }
.badge .title{ color:#fff; font-weight:bold; border-radius:3px; background:var(--gray-color); padding:3px 8px; position:absolute; bottom:-3px; left:0; width:120px; font-size:10px; text-transform:uppercase; box-shadow:0 1px 3px 0 rgba(0,0,0,0.35); }
.badge.active .title{ background:var(--red-color); }

/* Badge Notification */
.badge-notification{ background:var(--red-color); border-radius:50%; display:inline-block; width:15px; height:15px; text-align:center; font-size:8px; color:#fff; padding:2px 0; }
.badge-notification.orange{ background:var(--orange-color); }
.badge-notification.green{ background:var(--green-color); }
.badge-notification.blue{ background:var(--blue-color); }
.wlib-table .badge-notification{ position:relative; top:-2px; margin-left:5px; }

/* Buttons */
.wlib-button{ display:inline-block; cursor:pointer; text-decoration:none; padding:5px 18px; border:solid 1px #000; background:#fff; color:#000; border-radius:5px; user-select:none; transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; }
.wlib-button.small{ padding:4px 5px 3px 9px; }
.wlib-button.large{ padding:9px 22px; font-size:15px; }
.wlib-button:hover{ background:#cfcfcf; }
.wlib-button.inactive{ cursor:default; opacity:0.5; }

.wlib-button .fas{ font-size:12px; margin:0 5px 0 -4px; }
.wlib-button.small .fas{ margin:0 3px 0 -3px; }
.wlib-button.large .fas{ margin-right:5px; }

.wlib-button.transparent{ background:none; color:rgba(255,255,255,0.75); border:solid 1px rgba(255,255,255,0.75); }
.wlib-button.transparent:hover{ background:rgba(255,255,255,0.10); }
.wlib-button.red{ background:none; color:var(--red-color); border:solid 1px var(--red-color); }
.wlib-button.red:hover{ color: #fff; background:var(--red-color); }
.wlib-button.green{ background:none; color:var(--green-color); border:solid 1px var(--green-color); }
.wlib-button.green:hover{ color: #fff; background:var(--green-color); }
.wlib-button.blue{ background:none; color:var(--blue-color); border:solid 1px var(--blue-color); }
.wlib-button.blue:hover{ color: #fff; background:var(--blue-color); }
.wlib-button.orange{ background:none; color:var(--orange-color); border:solid 1px var(--orange-color); }
.wlib-button.orange:hover{ color: #fff; background:var(--orange-color); }

.wlib-button.noborder{ border-color:transparent; }

.wlib-button.submit{ padding:10px 20px; }

.wlib-button.back{ margin-bottom:5px; }

/* Titles */
.wlib-title{ color:#fff; margin-bottom:22px; font-size:18px; user-select:none; font-weight:500; }
.wlib-title .fas{ margin-right:8px; color:var(--gray-color); }
.wlib-title small{ color:var(--gray-color); text-transform:lowercase; font-size:65%; margin-left:15px; font-style:italic; font-weight:normal; opacity:0.5; }
h1.wlib-title{ font-size:22px; text-transform:uppercase; }
h2.wlib-title{ font-size:18px; text-transform:uppercase; }
h3.wlib-title{ font-size:16px; }

/* Toaster */
.wlib-toast{ position:fixed; right:-100%; top:125px; padding:15px 35px 15px 25px; background:var(--gray-color); color:var(--main-color); border-radius:5px 0 0 5px; box-shadow:1px 1px 1px 0 rgb(0,0,0,0.5); transition:right 0.25s; user-select:none; }
.wlib-toast.red{ background:var(--red-color); color:#fff; }
.wlib-toast.orange{ background:var(--orange-color); color:#fff; }
.wlib-toast.green{ background:var(--green-color); color:#fff; }
.wlib-toast.open{ right:6px; }
.wlib-toast .fas{ margin-right:8px; opacity:0.75; top:2px; }

/* Tables */
.wlib-table{ width:100%; border-spacing:0; margin:40px 0 25px 0; user-select:none; }
.wlib-table thead th{ text-align:left; color:#fff; border-bottom:solid 1px rgba(255,255,255,0.05); }
.wlib-table th{ padding:9px 7px 15px 7px; }
.wlib-table td{ padding:9px 7px; }
.wlib-table tbody tr:nth-child(2n+1) td{ background:rgba(0,0,0,0.15); }
.wlib-table tbody tr:nth-child(2n) td{ background:rgba(0,0,0,0.08); }
.wlib-table.hover tbody tr{ transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; }
.wlib-table.hover tbody tr:hover{ background:rgba(0,0,0,0.1); color:var(--orange-color); }

.wlib-table tbody td small{ margin-left:3px; opacity:0.75; }
.wlib-table tbody td .fas{ opacity:0.70; transition:opacity 0.2s ease-in-out; }
.wlib-table tbody tr:hover td .fas{ opacity:1; }

.wlib-table-filters{ position:relative; }
.wlib-table-filters label{ position:absolute; font-weight:bold; margin-right:10px; top:5px; left:7px; user-select:none; }
.wlib-table-filters input, .wlib-table-filters select{ border-radius:3px; border:none; padding:5px 10px 5px 30px; width:150px; color:var(--main-light-color); }
.wlib-table-filters select{ padding:5px 5px 4px 5px; margin-left:25px; width:185px; }
textarea{ width:100%; min-height:120px; padding:8px; border-radius:5px; }
input, select, textarea{ background:#e6e9f0; }
input:disabled, select:disabled, textarea:disabled{ background:rgba(0,0,0,0.25); cursor:not-allowed; }

/* Thumbnails */
.thumbnail{ position:relative; display:inline-block; margin:5px 15px 20px 15px; padding:15px; border:solid 1px transparent; background:rgba(0,0,0,0.15); font-size:12px; width:250px; border-radius:5px; vertical-align:top; }
.thumbnail:hover{ border-color:rgba(0,0,0,0.10); }

/* Forms */
.wlib-form{ background:rgba(0,0,0,0.15); padding:25px; border-radius:7px; }
.wlib-form.small{ width:480px; margin:0 auto; }

.wlib-form-title{ color:#fff; text-transform:uppercase; text-align:center; margin-bottom:35px; user-select:none; font-weight:500; }
.wlib-form .input-wrapper{ margin-bottom:15px; padding:15px; }

.wlib-form .input-wrapper .label{ margin-bottom:5px; font-size:12px; }
.input-wrapper input, .input-wrapper select{ width:100%; border-radius:3px; border:none; padding:5px 10px; }
.input-wrapper input[type="checkbox"]{ width:20px; }
.input-wrapper label{ cursor:pointer; }
.wlib-form .input-wrapper-submit{ text-align:center; margin-top:30px; }

/* MODAL & CONFIRM */
.modal, .confirm{ position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.65); display:none; z-index:9998; }
.modal.open, .confirm.open{ display:block; }
.modal-wrapper, .confirm-wrapper{ position:relative; color:var(--gray-color); background:var(--main-color); border:solid 1px rgba(255,255,255,0.1); width:820px; padding:30px 20px 20px 20px; margin:50vh auto 0 auto; border-radius:5px; transform:translateY(-50%); }
.confirm-wrapper{ width:640px; }
.modal-wrapper .close{ position:absolute; top:3px; right:9px; font-size:26px; color:var(--light-color); cursor:pointer; user-select:none; transition:color 0.2s ease-in-out; }
.modal-wrapper .close:hover{ color:var(--lighter-color); }

.confirm-wrapper{ width:400px; margin-top:50vh; transform:translateY(-50%); color:#fff; text-align:center; }
.confirm-footer{ margin-top:35px; text-align:left; }
.confirm-footer .wlib-button.small{ padding:4px 9px 3px 9px; }

/* PROGRESS BAR */
.progressbar{ height:28px; background:rgba(255,255,255,.35); position:relative; border-radius:3px; overflow:hidden; padding:2px; }
.progressbar .progress-inner{ display:inline-block; height:24px; background:var(--green-color); border-radius:3px; opacity:0.75; }
.progressbar .progress-label{ position:absolute; left:0; top:5px; width:100%; text-align:center; color:#fff; }
.progressbar .progress-label .fas{ margin:0 0 0 10px; }

.progressbar.small{ height:22px; }
.progressbar.small .progress-inner{ height:18px; }
.progressbar.small .progress-label{ top:5px; }

.progressbar.red .progress-inner{ background:var(--red-color); }
.progressbar.yellow .progress-inner{ background:var(--yellow-color); }
.progressbar.orange .progress-inner{ background:var(--orange-color); }
.progressbar.transparent .progress-inner{ background:rgba(255,255,255,0.05); }
.progressbar.white .progress-inner{ background:#fff; }
.progressbar.white .progress-label{ color:var(--main-color); }

/* Tabs */
.tabs ul{ display:inline-block; }
.tabs li{ display:inline-block; list-style:none; padding:8px 20px; background:rgba(0,0,0,0.15); margin:0; cursor:pointer; user-select:none; font-size:15px; transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; }
.tabs li:hover{ background:rgba(0,0,0,0.25); }
.tabs li.active{ background:rgba(0,0,0,0.5); cursor:default; color:var(--orange-color); }
.tabs li.separator{ margin-left:15px; background:none; cursor:default; }

.tabs .items{ border-top:solid 1px rgba(0,0,0,0.5); }
.tabs .items .item{ display:none; width:100%; min-height:180px; background: rgba(0,0,0,0.25); padding:15px; }
.tabs .items .item.active{ display:block; }

/* Togglers */
.toggler ul{ display:inline-block; border:solid 1px rgba(0,0,0,0.25); border-radius:3px; overflow:hidden; margin-bottom:25px; user-select:none; }
.toggler ul li{ display:inline-block; background:rgba(0,0,0,0.15); list-style:none; padding:8px 20px; cursor:pointer; transition:opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; }
.toggler ul li:hover{ background:rgba(0,0,0,0.25); color:#fff }
.toggler ul li.active{ color:#fff; background:rgba(0,0,0,0.30); cursor:default; font-weight:500; }
.toggler ul li.inactive{ opacity:0.25; color:var(--gray-color); background:none; cursor:default; }

/* Popover */
.popover{ position:absolute; left:25px; width:380px; min-height:100px; padding:3px 3px 0px 3px; border-radius:5px; background:var(--main-light-color); z-index:998; box-shadow:1px 1px 4px 0 rgba(0,0,0,0.45); opacity:0; transition:opacity 0.35s ease-in-out; transform:translateY(-110%); }
.popover img{ width:100%; height:auto; }
.popover pre{ position:absolute; max-width:250px; white-space:pre-wrap; font-size:13px; right:0; background:var(--main-light-color); top:5px; transform:translateX(100%); padding:15px; color:#fff; border-radius:0 5px 5px 0; box-shadow:1px 1px 4px 0 rgba(0,0,0,0.45); }
.popover pre:empty{ display:none; }
.popover.open{ opacity:1; }

/* Slider */
.slick-slider{ padding:15px 0 0 0; }
.slick-dots li button:before, .slick-dots li.slick-active button:before{ color:var(--gray-color); }
.slick-prev, .slick-next{ width:25px; height:25px; }
.slick-prev, .slick-next{ width:25px; height:25px; }
.slick-prev:before, .slick-next:before{ font-size:25px; }

/* Marker2 */
.__markerjs2_{ box-sizing:content-box!important; }
.__markerjs2_ *{ box-sizing:content-box!important; }

/* Utils */
.center{ text-align:center; }
.left{ text-align:left; }
.right{ text-align:right; }
.float-left{ float:left; }
.float-right{ float:right; }
.hidden{ display:none!important; }
.size25{ display:inline-block; width:24.5%; vertical-align:top; }
.size33{ display:inline-block; width:32.9%; vertical-align:top; }
.size50{ display:inline-block; width:49%; vertical-align:top; }
.size66{ display:inline-block; width:66%; vertical-align:top; }
.size75{ display:inline-block; width:74.5%; vertical-align:top; }
.size100{ display:inline-block; width:100%; vertical-align:top; }

td .confidence{ cursor:help; }
td .confidence .fas{ margin-left:5px; font-size:10px; }

.light-color, .grade-1{ color:var(--light-color)!important; }
.white-color{ color:#fff!important; }
.yellow-color, .grade-4{ color:var(--yellow-color)!important; }
.orange-color, .grade-5, .confidence-1{ color:var(--orange-color)!important; }
.green-color, .grade-2, .approved, .up, .confidence-3{ color:var(--green-color)!important; }
.red-color, .grade-7, .grade-6, .rejected, .down, .confidence-0{ color:var(--red-color)!important; }
.gray-color, .confidence--1{ color:var(--gray-color)!important; }
.blue-color, .un-approved, .confidence-2{ color:var(--blue-color)!important; }

.bg-lighter{ background:rgba(0,0,0,0.05); }
.bg-light{ background:rgba(0,0,0,0.10); }
.bg-dark{ background:rgba(0,0,0,0.15); }
.bg-darker{ background:rgba(0,0,0,0.2); }

.row{ position:relative; display:block; padding:0 10px 15px 10px; }
.row .label{ display:inline-block; width:150px; }
.row .value{ display:inline-block; color:#fff; margin-right:5px; }
.title .wlib-button{ position:absolute; right:15px; top:0; }

.opacity25{ opacity:0.25; }
.opacity50{ opacity:0.5; }
.opacity75{ opacity:0.75; }

.bold{ font-weight:bold; }
.italic{ font-style:italic; }
.underline{ text-decoration:underline; }

.m0{ margin:0; }
.ml5{ margin-left:5px; }
.ml10{ margin-left:10px; }
.ml15{ margin-left:15px; }
.ml20{ margin-left:20px; }
.ml25{ margin-left:25px; }
.mr5{ margin-right:5px; }
.mr10{ margin-right:10px; }
.mr15{ margin-right:15px; }
.mr20{ margin-right:20px; }
.mr25{ margin-right:25px; }
.mb0{ margin-bottom:0px; }
.mb5{ margin-bottom:5px; }
.mb10{ margin-bottom:10px; }
.mb15{ margin-bottom:15px; }
.mb20{ margin-bottom:20px; }
.mb25{ margin-bottom:25px; }
.mt5{ margin-top:5px; }
.mt10{ margin-top:10px; }
.mt15{ margin-top:15px; }
.mt20{ margin-top:20px; }
.mt25{ margin-top:25px; }

.p0{ padding:0; }
.p15{ padding:15px; }
.pt15{ padding-top:15px; }
.pt25{ padding-top:25px; }
.pb15{ padding-bottom:15px; }
.pb25{ padding-bottom:25px; }

.uppercase{ text-transform:uppercase; }
.lowercase{ text-transform:lowercase; }
.capitalize{ text-transform:capitalize; }

.responsive{ width:100%; height:auto; }

.visible-xs{ display:none; }

/* Scrollbar */
*{ scrollbar-width:auto; scrollbar-color:#25acb6 #ffffff; }
*::-webkit-scrollbar{ width:5px; height:5px; }
*::-webkit-scrollbar-track{ background:rgba(255,255,255,0.35); }
*::-webkit-scrollbar-thumb{ background-color:var(--gray-color); border-radius:10px; }


/* MOBILE AND WIDGET */
@media(max-width:720px){
   .wlib-container{ padding:15px 0 120px 0; }
   body.home .wlib-container{ padding:60px 15px 110px 15px; }
   .wlib-button.back{ margin-bottom:15px; }
   h1.wlib-title, .wlib-form-title{ font-size:18px; }
   .wlib-title small{ display:none; }
   .wlib-form, .wlib-form.small{ width:100%; }
   .size25, .size33, .size50, .size66{ width:100%; margin-bottom:25px; }
   .size50.right{ text-align:left; }
   .row.title .wlib-button{ top:40px; }

   .modal-wrapper, .confirm-wrapper{ width:320px; }

   .wlib-toast{ top:175px; }

   .toggler ul li{ padding:8px 11px; }

   .tabs .items .item.active{ overflow-x:auto; }

   .hidden-xs{ display:none; }
   .visible-xs{ display:initial; }
}