:root {
   --animate-delay: 0.1s;
}

/* Custom Colors, text */
html * {
   font-family: Arial, Helvetica, sans-serif;
} 

input, select, textarea, label {
   color : #5f6b77 !important;
   font-size: 12px !important;
}

input:focus,
select:focus,
textarea:focus  {
   border-color: #ff8f34b6 !important;
}

input:disabled,
select:disabled,
.select2-container--default.select2-container--disabled .select2-selection--single {
   background-color: #e3e5ed58 !important;
}

label {
   font-weight: normal !important;
   color: #3e454d !important;
   margin-bottom: .3rem !important;
}

h1, h2,  h3, h4, h5, h6, small {
   color : #3e454d !important;
}
.text-xxs {
   font-size: 10px !important;
}
.text-xs, small {
   font-size: 11px !important;
}

.text-small, p, li {
   font-size: 12px !important;
}

.p-1 {
   padding: 5px !important
}

.text-height { line-height: 110% }
.text-sm-height { line-height: 100%; }
.text-md-height { line-height: 1.6 }
.text-lg-height { line-height: 200%; }

.alert-danger, .badge-danger {background-color: #c44a56 !important;}
.alert-warning {
   background-color: #fdf4cd !important;
   border-color: #fcefb9 !important;
   color: #826500 !important;
}
.alert-warning small {
   color: #826500 !important;
}

.bt-primary {border-top: 4px solid #007bff;}
.bt-secondary {border-top: 4px solid #6c757d;}
.bt-success {border-top: 4px solid #28a745;}
.bt-info {border-top: 4px solid #17a2b8;}
.bt-warning {border-top: 4px solid #ffc107;}
.bt-danger {border-top: 4px solid #c44a56;}
.bt-purple {border-top: 4px solid #8a94ee;}

.bl-primary {border-left: 4px solid #007bff;}
.bl-secondary {border-left: 4px solid #6c757d;}
.bl-success {border-left: 4px solid #28a745;}
.bl-info {border-left: 4px solid #17a2b8;}
.bl-warning {border-left: 4px solid #ffc107;}
.bl-danger {border-left: 4px solid #c44a56;}

.bb-primary {border-bottom: 4px solid #007bff;}
.bb-secondary {border-bottom: 4px solid #6c757d;}
.bb-success {border-bottom: 4px solid #28a745;}
.bb-info {border-bottom: 4px solid #17a2b8;}
.bb-warning {border-bottom: 4px solid #ffc107;}
.bb-danger {border-bottom: 4px solid #c44a56;}

.br-primary {border-right: 4px solid #007bff;}
.br-secondary {border-right: 4px solid #6c757d;}
.br-success {border-right: 4px solid #28a745;}
.br-info {border-right: 4px solid #17a2b8;}
.br-warning {border-right: 4px solid #ffc107;}
.br-danger {border-right: 4px solid #c44a56;}

.bg-secondary {background-color: #e3E5ED !important;}
.bg-danger {background-color: #c44a56 !important;}
.bg-orange {background-color: #FD7E14 ;}
.bg-notification {background-color: #ff990017 ;}

.text-danger {color: #c44a56 !important;}
.text-dark {color: #3e454d !important;}

.btn-light {
   background-color: #ffffff !important;
   border-color: #cdd5df;
   color:#5f6b77 !important;
}
.btn-light:hover {
   background-color: #fbfbfb !important;
   color:#475058 !important;
}
.btn-light:active {
   background-color: #f1f1f1 !important;
   box-shadow: none, 0 0 0 0 #f5f4f4;
}

.btn-danger {
   background-color: #c44a56 !important;
   border-color: #c44a56;
   color:#fff !important;
}
.btn-danger:hover {
   background-color: #ae3743 !important;
   border-color: #9e353f;
   color:#fff !important;
}
.btn-danger:active {
   background-color: #9e353f !important;
   box-shadow: none, 0 0 0 0 #9e353f72;
}
.btn-outline-danger {
   border-color: #c44a56 !important;
   color: #c44a56 !important; 
}
.btn-outline-danger:hover {
   border-color: #ae3743 !important;
   background-color: #ae3743 !important;
   color: #fff !important; 
}

.btn-orange {
   background-color: #FD7E14;
   border-color: #e77619;
   color:#fff;
}
.btn-orange:hover {
   background-color: #e77619;
   color:#e3E5ED;
}
.btn-orange:active {
   background-color: #d36c19;
   box-shadow: none, 0 0 0 0 #fd7d145d;
}

.btn-outline-orange {
   border:1px solid #FD7E14;
   color:#FD7E14;
}
.btn-outline-orange:hover {
   background-color: #FD7E14;
   color:#fff;
}

.btn-link-neutral {
   color: #59626b;
}
.btn-link-orange {
   color: #FD7E14;
}
.btn-link-orange:hover,
.btn-link-orange:focus,
.btn-link-orange:active,
.btn-link-neutral:hover  {
   color: #e77619;
}
.btn-link-secondary {
   color: #6c757d;
}
.btn-link-secondary:hover,
.btn-link-secondary:focus,
.btn-link-secondary:active,
.btn-link-secondary:hover  {
   color: #494f54;
}
.btn {
   border-radius: 5px !important;
   padding: 4px 10px;
}
.btn span {
   font-size: 12px;
}
.btn-tool {
   margin: 0 !important;
   border: 0 !important;
   padding: 0 10px !important;
}
.badge-orange {
   background-color: #FD7E14;
   color: #fff;
}
.badge-orange-pastel {
   background-color: #ffe9d7;
   color: #FD7E14;
}
.badge-blue-pastel {
   background-color: #d7e7ff;
   color: #21598d;
}
.badge-light2 {
   background-color: #e6e6e6;
   color: #3e454d
}
.badge-light3 {
   background-color: #f5f5f5;
}
.line-clamp {
   display: -webkit-box !important;
   -webkit-line-clamp: 1 !important;
   -webkit-box-orient: vertical !important;  
   overflow: hidden !important;
   padding-right: 10px;
}

/* Sidebar */
.sidebar .user-panel:hover {
   color: #fff !important;
}

.sidebar .user-panel .img-circle {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   vertical-align: middle;
   background-color: #fccfaa;
   font-size: 12px;
   font-weight: bold;
   color: #997867;
   text-transform: uppercase;
}

.sidebar .user-panel a.active  {
   color: #fff !important;
}

.sidebar .user-panel .online-status   {
   position: absolute;
   top: 25px;
   left: 30px;
   bottom:0;
   right: 0;
   padding: auto;
   display: flex;
   justify-content: center;
   align-items: center;
   vertical-align: middle;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   border: 1px solid #fff;
}

.sidebar .nav .nav-header {
   font-size: 10px !important;
   text-transform: uppercase;
   color:#7b848f;
   padding: 20px 12px 8px 12px;
}
.sidebar .nav .nav-item .nav-link {
   padding: 8px;
   display: flex;
   align-items: center;  
}
.sidebar .nav .nav-link-add i.nav-icon-add,
.sidebar .nav .nav-link-add p {
   color: #FD7E14 !important;
}
.sidebar .nav .nav-link-add:hover i.nav-icon-add,
.sidebar .nav .nav-link-add:hover p {
   color: #ff9e4e !important;
}
.sidebar .nav .nav-link-add.active i.nav-icon-add,
.sidebar .nav .nav-link-add.active p {
   color: #1f2d3d !important;
}
.sidebar .nav .nav-item .nav-link .nav-icon {
   font-size: 12px !important;
}
.sidebar .nav.nav-legacy .nav-item a.nav-link.active {
    background-color: rgba(0, 0, 0, 0.1);
}
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link span {
   display: none;
}

@media (min-width: 992px) {
   .sidebar-mini.sidebar-collapse .main-sidebar, 
   .sidebar-mini.sidebar-collapse .main-sidebar::before {
      margin-left: 0;
      width: 4rem !important;
   }

   .sidebar-mini.sidebar-collapse 
   .main-sidebar.sidebar-focused, 
   .sidebar-mini.sidebar-collapse 
   .main-sidebar:hover {
      width: 250px !important;
   }
  
   .sidebar-mini.sidebar-collapse .content-wrapper, 
   .sidebar-mini.sidebar-collapse .main-footer, 
   .sidebar-mini.sidebar-collapse .main-header {
      margin-left: 4rem!important;
   }
}

/* Tables & Datatables set default styles */
table,
.dataTables_wrapper {
   font-size: 12px;
}

table.dataTable {
   border: none !important;
}

table.dataTable th {
   font-size:10px;
   font-weight: 700;
   text-transform: uppercase;
   padding:8px 24px 8px 14px!important;
   border: none !important;
   color : #717c87 !important;
   white-space:nowrap;
}

table.dataTable td  {
   font-size: 11px;
   font-weight: 600;
   padding:10px 14px !important;
   color: #59626b !important;
   vertical-align: middle;
}

table.dataTable td  > a.action-link i {
   font-size: 14px !important;
   margin-right: 6px;
}

table.dataTable td  > p.title,
table.dataTable td  > div > div > p.title,
table.dataTable td  > a > div > p.title,
table.dataTable td  > a > div > div > p.title {
   font-size: 11px !important;
   margin: 0 !important;
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

table.dataTable td  > span.sub-title,
table.dataTable td  > a > div > span.sub-title,
table.dataTable td  > a > div > div > span.sub-title {
   font-weight: normal;
   font-size: 10px !important;
   margin: 0 !important;
}

table.dataTable td span.td-badge {
   width: auto !important;
   padding: 4px 6px !important;
   border-radius: 5px;
   font-size: 10px;
}

table.dataTable tbody tr:hover {
   background-color: #f2f4fa;
 }
  
 table.dataTable tbody tr:hover > .sorting_1 {
   background-color: #f2f4fa;
 }

.dataTables_length {
   margin:10px 12px;
   margin-bottom: 4px;
}

.dataTables_length > label {
   margin: 0;
}

.dataTables_info,
.dataTables_paginate {
   margin:10px 12px !important;
   margin-top: 4px !important;
   font-size: 11px !important;
}

.dataTables_info {
   color:#5f6b77;
   font-size: 10px !important;
}

.dataTables_paginate .page-link {
   color: #FD7E14;
   box-shadow: none;
   line-height: 1.3em;
   height: 30px;
}

.dataTables_paginate .page-item.active .page-link {
   background-color: #FD7E14 !important;
   border-color: #FD7E14 !important;
   box-shadow: none;
}

.container-fluid .row-actions .btn-new {
   width: auto;
   height: auto;
   padding:4px 10px;
   border-radius: .2rem;
}

.container-fluid .row-actions .btn-new span{
   font-size: 12px;
   margin: 0;
}

.card-table {
   background-color: transparent !important;
   border:none;
   box-shadow: none;
}

.card-footer {
   background-color: transparent;
   border-top: 1px solid #f2f4fa;
}

.hide {
   display: none !important;
}

/* Modals */
.modal .modal-header,
.modal .modal-body,
.modal .modal-footer {
   padding: 10px 16px !important;
}

.modal-title {
   font-size: 14px;
}

/* Forms */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple {
   border-color: #ff8f34b6 !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
   color: #999 !important;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple {
   border-color: #ff8f34b6 !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected], 
.select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
   background-color: #FD7E14;
   color: #fff;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
   background-color: #FD7E14;
   border-color: #e77619;
   color: #fff;
   padding: 0 10px;
   margin-top: .31rem;
   font-size: 12px;
}
.select2-container--default .select2-selection--single {
   font-size: 12px !important;
}
.select2-container--default .select2-selection--single {
   font-size: 12px !important;
}
.select2-container--default .select2-selection__rendered,
.select2-container--default .select2-results {
   color: #5f6b77 !important;
}
.select2-container--default.select2-error .select2-selection--single,
.select2-container--default.select2-error .select2-selection--multiple {
   border-color:#dc3546a2 !important;
}

[class*="icheck-material"]>input:first-child + label::before {
   border: 1px solid #ced4da;
   border-radius: 4px;
   height: 16px;
   width: 16px;
   margin-top: 3px;
   margin-left: -26px;
}

[class*="icheck-material"]>input:first-child + label::before:hover{
   border-color: #ff9800;
}


[class*="icheck-material"]>input[type="checkbox"]:first-child:checked+label::after {
   width: 4px;
   height: 10px;
   transform: translate(9.5px,5.5px) rotate(45deg);
}

.icheck-material-green>input[type="checkbox"]:first-child:not(:checked):not(:disabled):hover+label::before {
   border: 1px solid #4caf50 !important;
   border-radius: 4px !important;
}

.form-error {
   border-color:#dc3546a2 !important;
}

.error-info {
   color: #dc3545 !important;
}

.form-group {
   margin-bottom: 8px !important;
}
/* .form-control-sm {
   height: 30px !important;
   border-color:transparent;
} */

.input-group {
   border-radius: .25rem ;
}

.input-group .form-control,
.input-group .input-group-append .btn {
   border-color: #ffffff;
}

.input-group .input-group-append .btn {
   background-color: #fff;
}

.input-group .form-control,
.input-group .form-control:focus {
   border-right: 0;
}
.input-group .input-group-append .btn {
   border-left: 0;
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
   margin-left: 1px;
}

.input-group .form-control:focus + .input-group-append .btn {
   border-color: #ff8f34b6 !important;
   color: #FD7E14;
}

.input-group .input-group-append .btn:hover,
.input-group .form-control:focus + .input-group-append .btn:hover {
   color: #ff7300;
}

.input-group .input-group-append .btn:focus,
.input-group .input-group-append .btn:active,
.input-group .input-group-append .btn:visited,
.input-group .form-control:focus + .input-group-append .btn:active,
.input-group .form-control:focus + .input-group-append .btn:focus,
.input-group .form-control:focus + .input-group-append .btn:visited {
   background-color: #fff;
   border-color: #fff !important;
}

/* Sweet alert */
.swal2-popup {
   width:22rem !important;
}

.swal2-title {
   font-size: 16px !important;
}
.swal2-content {
   padding: 4px !important;
}
.swal2-actions {
   margin-top: 12px !important;
}
.swal2-confirm,
.swal2-cancel {
   font-size: 12px !important;
}

.swal2-validation-message {
   padding: 0 !important;
   margin: 0 !important;
   background: transparent !important;
   color: #666;
   font-size: 11px !important;
   font-weight: 300;
}

/* Scrollbar */
/* width */
::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
 
 /* Track */
 ::-webkit-scrollbar-track {
   background-color: #e3E5ED;
 }
  
 /* Handle */
 ::-webkit-scrollbar-thumb {
   background: #b7b9bd;
   border-radius: 10px;
   margin:0 2px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
   background: #888a8d; 
 }

.card-filters .card-header {
   background-color: #e3E5ED 
}

.card-filters .card-header .card-title {
   font-size: 10px;
   font-weight: bold;
   text-transform: uppercase;
   color: #717c87;
}
.card-header .card-title span.badge {
   font-size: 10px !important;
   background-color: #adb5bd;
   padding: 2px 4px;
}


/* Dropdown */
/* .dropdown-filter .dropdown-filter-menu .scrollable-menu {         
   max-height: 400px;
   overflow-x: hidden;
} */
.dropdown-filter .btn-light {
   border-color: #fff !important;
}
.dropdown-filter .btn-light:hover,
.dropdown-filter .btn-light:active,
.dropdown-filter .btn-light:focus,
.dropdown-filter .btn-light:visited {
   background-color: #fbfbfb !important;
   border-color: #ff8f34b6 !important;
}

/* Spinners */
.spinner-border-sm {
   width: 0.90rem !important;
   height: 0.90rem !important;
}

/* Spinners */
.spinner-border-xs {
   width: 0.75rem !important;
   height: 0.75rem !important;
   border-width: .2em !important;
}

.alert-debug {
   border-radius: 0 !important;
}

/* Verification */
.verification-status {
   font-size: 5px;
}
.verification-status > i {
   vertical-align: middle;
}

/* Progresss */

.progress-table {
   height: 5px;
   border-radius: .2rem;
}

/* Accordion */
.card-tools {
   float: unset !important;
   padding-right: 10px;
}
.card .card-tools .btn-tool {
   font-family: "Font Awesome 5 Free";
   font-size: 10px !important;
   font-weight: 900 !important;
   padding: 0 4px !important;
}
.card .card-tools .btn-minimize:after { /* MINUS */
   content: "\f068";
}
.card .card-tools .btn-minimize.collapsed:after { /* PLUS */
   content: "\f067";  
}
.card .card-tools .btn-compress:after { /* COMPRESS ALT */
   content: "\f422";
}
.card .card-tools .btn-compress.collapsed:after { /* EXPAND ALT */
   content: "\f424";  
}

/* Tour JS */
/* .introjs-tooltip {
   min-width: 280px !important;
   max-width: 310px !important;
} */
.introjs-tooltip-header {
   display:flex;
   align-items: center;
}
.introjs-skipbutton {
   font-size: 10px;
   padding: 0;
   margin-left: auto;
   /* text-decoration: underline !important;
   color: #fd7e14 !important; */
}
.introjs-tooltip-title {
   font-size: 16px;
}
.introjs-tooltiptext {
   font-size: 12px;
}
.introjs-button {
   padding: 6px 16px;
   font-size: 12px;
}
.introjs-nextbutton,
.introjs-donebutton {
   background-color: #FD7E14 !important;
   border-color: #e77619 !important;
   color:#fff !important;
   text-shadow: none;
}
.introjs-nextbutton:hover,
.introjs-donebutton:hover {
   background-color: #e77619 !important;
   color:#e3E5ED !important;
}
.introjs-nextbutton:active, .introjs-donebutton:active {
   background-color: #d36c19 !important;
   /* box-shadow: none, 0 0 0 0 #fd7d145d !important; */
}
.introjs-nextbutton:focus, .introjs-donebutton:focus {
   box-shadow: 0 0 0 0.2rem #fd7d145d !important;
}
.introjs-disabled { 
   display: none !important;
}


.modal-body .list-flush-dashed .list-group-item, 
.list-flush-dashed .list-group-item {
   border-style: dashed;
   border-color: #eee !important;
   color: #59626b;
}

/* Bootstrap tooltip */
.tooltip .tooltip-inner { 
   background-color: #343a40 !important;
   font-size: 12px;
}
.tooltip.bs-tooltip-right .arrow::before {
   border-right-color: #343a40 !important;
}
.tooltip.bs-tooltip-left .arrow::before {
   border-left-color: #343a40 !important;
}
.tooltip.bs-tooltip-bottom .arrow::before {
   border-bottom-color: #343a40 !important;
}
.tooltip.bs-tooltip-top .arrow::before {
   border-top-color: #343a40 !important;
}

.member-profile {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   vertical-align: middle;
   background-color: #ffe5d0;
   font-size: 11px;
   font-weight: bold;
   color: #997867;
   text-transform: uppercase;
   cursor: default;
}
.member-profile-sm {
   width: 28px;
   height: 28px;
}
.member-profile-lg {
   width: 36px !important;
   height: 36px !important;
   font-size: 12px !important;
}
.member-overlap-item {
   margin-right: -10px;
   border: 1px solid rgb(255, 255, 255);
}

.member-link:hover .member-profile,
.member-link:active .member-profile {
   background-color: #ffd0aa;
   color: #83614f;
}

.shadow-border {
   box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
}