@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap&subset=latin-ext');

html,
body {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Lato', sans-serif;
}
b {
  font-weight: 700;
}
.mt-2 {
  margin-top: 16px;
}
.mb-2 {
  margin-bottom: 16px;
}



/*--- BUTTON ---*/
.btn {
  font-size: 14px;
  font-weight: 400;
  padding: 8px 16px;
  transition: .3s all ease-in-out;
}
.btn-sm {
  padding: 4px 12px;
}
.btn-lg {
  padding: 12px 22px;
}
.btn-primary {
  background-color: #3778D3;
  border-color: #3778D3;
}
.btn-primary:hover {
  background-color: #3778D3;
  border-color: #3778D3;
  opacity: .8;
}
.btn-primary:focus {
  background-color: #3778D3;
  border-color: #3778D3;
  opacity: .8;
}
.btn-success {
  background-color: #00A65A;
  border-color: #00A65A;
}
.btn-success:hover {
  background-color: #00A65A;
  border-color: #00A65A;
  opacity: .8;
}
.btn-success:focus {
  background-color: #00A65A;
  border-color: #00A65A;
  opacity: .8;
}
.btn-danger {
  background-color: #E24333;
  border-color: #E24333;
}
.btn-danger:hover {
  background-color: #E24333;
  border-color: #E24333;
  opacity: .8;
}
.btn-danger:focus {
  background-color: #E24333;
  border-color: #E24333;
  opacity: .8;
}
.btn-secondary {
  background-color: #9EA3A8;
  border-color: #9EA3A8;
  color: white;
}
.btn-secondary:hover {
  background-color: #9EA3A8;
  border-color: #9EA3A8;
  color: white;
  opacity: .8;
}
.btn-secondary:focus {
  background-color: #9EA3A8;
  border-color: #9EA3A8;
  color: white;
  opacity: .8;
}
.btn-dark {
  background-color: #31373D;
  border-color: #31373D;
  color: white;
}
.btn-dark:hover {
  background-color: #31373D;
  border-color: #31373D;
  color: white;
  opacity: .8;
}
.btn-dark:focus {
  background-color: #31373D;
  border-color: #31373D;
  color: white;
  opacity: .8;
}
.btn-light {
  background-color: #F2F4F8;
  border-color: #9EA3A8;
  color: #31373D;
}
.btn-light:hover {
  background-color: #F2F4F8;
  border-color: #9EA3A8;
  color: #31373D;
  opacity: .8;
}
.btn-light:focus {
  background-color: #F2F4F8;
  border-color: #9EA3A8;
  color: #31373D;
  opacity: .8;
}
/*--- /BUTTON ---*/



/*--- FORM, INPUT ---*/
.form-control,
.selectize-input {
  border: 1px solid #9EA3A8;
  border-radius: 3px;
  color: #32373C;
  font-weight: 400;
}
.form-control:focus,
.selectize-input:focus {
  border-color: #31373D;
  box-shadow: none;
}
select {

}



/* @arrowColor: #ffcc00;
@arrow: escape('@{arrowColor}'); */

select.form-control {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%39EA3A8%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: auto 50%;
  fill: #9EA3A8;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
select-ms-expand { display: none };
/*--- /FORM, INPUT ---*/



/*--- NAV TABS ---*/
.nav-tabs-custom {
  margin-top: 6px;
  box-shadow: none;
}
.nav-tabs-custom>.nav-tabs>li {
  border-top: none;
}
.nav-tabs-custom>.nav-tabs>li.active {
  border-top: 6px solid #31373D;
  border-radius: 5px 5px 0px 0px;
  margin-top: -6px;
}
.nav-tabs-custom>.nav-tabs>li>a,
.nav-tabs-custom>.nav-tabs>li:hover>a {
  color: #31373D;
  font-size: 16px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}
/* .nav-tabs-custom>.nav-tabs>li.active>a,
.nav-tabs-custom>.nav-tabs>li.active:hover>a {
  color: #31373D;
  font-size: 18px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
} */
.navbar-nav>.user-menu>.dropdown-menu>li.user-header {
  height: 64px;
}
.skin-blue .main-header li.user-header {
  background-color: #31373D;
}
.main-header .sidebar-toggle:before {
  content: "";
}
/*--- /NAV TABS ---*/



/*--- TABLE ---*/
table {
  font-size: 14px;
  color: #31373D;
}
thead {
  background-color: #F2F4F8;
  font-weight: 700;
  color: #31373D;
  text-transform: uppercase;
  opacity: 1;
}
thead>tr>th>.form-control {
  border: 1px solid #EEEEEE !important;
}
thead>tr>th>a {
  color: #31373D !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: white;
}
.table-striped > tbody > tr:nth-of-type(even) {
  background-color: #F8F9FB;
}
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
  vertical-align: middle;
  line-height: 1;
}
/*--- /TABLE ---*/



/*--- PAGINATION ---*/
.pagination {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.pagination > li > a, .pagination > li > span {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  color: #31373D;
  background-color: #EEEEEE;
  border: 1px solid #EEEEEE;
}
.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
  color: #31373D;
  background-color: #EEEEEE;
  border-color: #EEEEEE;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
  color: #fff;
  background-color: #31373D;
  border-color: #31373D;
}
.pagination > li.prev > a, .pagination > li.prev > span {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  font-weight: 700;
  font-size: 28px;
  padding: 2.7px 4px;
  line-height: 1;
}
.pagination > li.next > a, .pagination > li.next > span {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  font-weight: 700;
  font-size: 28px;
  padding: 2.7px 4px;
  line-height: 1;
}
/*--- /PAGINATION ---*/



/*--- LOGIN, FOROGOTTEN PASSWORD PAGE ---*/
.login-page,
.register-page {
  background: #23282D !important;
}
.login-box,
.register-box {
  width: 420px;
}
.login-logo,
.register-logo {
  color: white;
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 30px;
}
.login-box-body,
.register-box-body {
  background-color: #F2F4F8;
  border-radius: 5px;
}
.login-box-msg,
.register-box-msg {
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  color: #31373D;
  text-transform: uppercase;
}
.login-box-body label,
.register-box-body label {
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  color: #31373D;
}
.login-box-body .form-group,
.register-box-body .form-group  {
  margin-bottom: 24px;
}
.login-box-body .form-control,
.register-box-body .form-control {
  border: 1px solid #EEEEEE;
  border-radius: 3px;
}
.forgotten-password {
  text-decoration: underline;
  font-size: 16px;
  font-weight: 400;
  color: #9EA3A8;
}
/*--- /LOGIN, FOROGOTTEN PASSWORD PAGE ---*/



/*--- HEADER ---*/
.skin-blue .main-header .navbar {
  background-color: #31373D;
}
.skin-blue .main-header .logo {
  background-color: #23282D;
  transition: .3s all ease-in-out;
  text-align: left;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0px;
  color: #EEEEEE;
}
.skin-blue .main-header .logo:hover {
  background-color: #31373D;
  opacity: .9;
}
.skin-blue .main-header .logo:focus {
  background-color: #31373D;
  opacity: .9;
}
.logo-mini {
  padding-left: 12px;
}
.skin-blue .main-header .navbar .sidebar-toggle {
  transition: .3s all ease-in-out;
}
.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background-color: #23282D;
}
.skin-blue .main-header .navbar .sidebar-toggle:focus {
  background-color: #23282D;
}
/*--- /HEADER ---*/



/*--- SIDEBAR ---*/
.skin-blue .main-sidebar {
  background-color: #23282D;
}
.skin-blue .sidebar-menu>li.header {
  color: #9EA3A8;
  background: #23282D;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 14px;
  padding: 10px 0;
  margin: 0 15px 12px;
  border-bottom: 1px solid #3F4448;
}
.skin-blue .sidebar-menu>li>a {
  border-left: none;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  color: #9EA3A8;
}
.skin-blue .sidebar-menu>li:hover>a,
.skin-blue .sidebar-menu>li.active>a,
.skin-blue .sidebar-menu>li.menu-open>a {
  color: white;
  background: #3778D3;
}
.skin-blue .sidebar-menu>li:hover>a:after,
.skin-blue .sidebar-menu>li.active>a:after {
  content: "";
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right:10px solid #F1F1F1;
  position: absolute;
  right: 0;
}
.sidebar-menu>li>a>.fa {
  font-size: 20px;
  width: 30px;
}

.treeview-menu {
  padding-left: 0;
}
.treeview-menu>li>a {
  padding: 5px 5px 5px 24px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 14px;
}
.skin-blue .sidebar-menu .treeview-menu>li.active>a,
.skin-blue .sidebar-menu .treeview-menu>li>a:hover {
  color: #EEEEEE;
}
.skin-blue .sidebar-menu>li>.treeview-menu {
  margin: 0;
  background: #31373D;
}
.skin-blue .sidebar-menu .treeview-menu>li>a {
  color: #9EA3A8;
}
.sidebar-menu>li>a>.fa.pull-right {
  display: none;
}
/*--- /SIDEBAR ---*/



/*--- CONTENT ---*/
.content-wrapper {
  background-color: #F2F4F8;
}
.content-header {
  padding: 24px 36px 0 36px;
}
.content-header>h1 {
  font-family: 'Lato', sans-serif;
  font-size: 26px;
  font-weight: 400;
  max-width: 60%;
}
.content-header>.breadcrumb {
  top: 21px;
  right: 36px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  color: #32373C;
  max-width: 38%;
}
.breadcrumb > .active {
  color: #32373C;
}
.breadcrumb > li + li:before {
  color: #32373C;
}
.content-header>.breadcrumb>li+li:before {
  content: '/';
}
.content {
  padding: 21px 36px;
}
.box {
  border-top-width: 6px;
  border-radius: 6px;
  box-shadow: 0px 2px 1px #0000001A;
}
.box-header.with-border {
  border-bottom: none;
}
.box.box-primary {
  border-top-color: #31373D;
}
.box-body {
  padding: 10px 20px;
}
.box-footer {
  text-align: right;
}
/*--- /CONTENT ---*/




.summary {
  width: 40%;
  float: left;
  margin: 20px 0;
}
.floated-right {
  width: 58%;
  float: right;
  padding: 20px 10px;
  text-align: right;
}

.table-button-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}
.action-button {
  color: #31373D;
  transition: .3s all ease-in-out;
  font-size: 34px;
  margin: 0 2px;
}
.action-button:hover,
.action-button:focus {
  color: #31373D;
  opacity: .6;
}
.action-button .mdi-delete-circle {
  color: #E24333;
  transition: .3s all ease-in-out;
}
.action-button
.mdi {
  font-size: 34px;
}

.drag_and_drop_area {
  width: 100%;
  height: 150px;
  border: 1px solid #9EA3A8;
}
.drag_and_drop_area>span {
  padding: 12px;
}
.hint-block {
  display: block;
  margin-top: 16px;
  margin-bottom: 16px;
  color: #737373;
}
.alert-warning {
  background-color: #FFCD04 !important;
  border-color: #FFCD04 !important;
  color: #32373C !important;
}
.alert-warning>ul>li>a {
  color: #32373C !important;
}




.mb-1 {
  margin-bottom: 1rem;
}
.mb-2 {
  margin-bottom: 2rem;
}
label {
  font-size: 14px;
}
.overflow-wrapper {
  width: 100%;
  overflow-x: auto;
}
.overflow-wrapper .summary{
  position: absolute;
  top: 14px;
}




/**
 * Tooltip Styles
 */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  cursor: pointer;
  z-index: 99999999999;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 260px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 13px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -12px;
  width: 0;
  border-top: 12px solid #000;
  border-top: 12px solid rgba(0, 0, 0, 0.9);
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}





/**
 * Upload field
 */
 .file-preview {
   width: 240px !important;
 }
.file-drop-zone {
    border: none !important;
    min-height: 200px !important;
    margin: 0 !important;
    padding: 0 !important;
}
 .krajee-default.file-preview-frame {
    margin: 0px !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0px !important;
    float: unset !important;
}
 .krajee-default.file-preview-frame .kv-file-content {
    width: 100% !important;
    height: 200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.krajee-default.file-preview-frame .file-thumbnail-footer {
    display: none !important;
}
.krajee-default .file-footer-caption {
  display: none !important;
  margin-bottom: 0 !important;
}
.file-actions,
.file-sortable .file-drag-handle {
  display: none !important;
}