.night-blue {
  background-color: #21243c !important;
}

.night-blue-text {
  color: #21243c !important;
}

.comifo-cyan {
  background-color: #1DBADF !important;
}

.comifo-cyan-text {
  color: #1DBADF !important;
}

.comifo-cyan.lighten-4 {
  background-color: #83d5fb !important;
}

.comifo-cyan-text.text-lighten-4 {
  color: #83d5fb !important;
}

.comifo-cyan.lighten-5 {
  background-color: #b8e7fc !important;
}

.comifo-cyan-text.text-lighten-5 {
  color: #b8e7fc !important;
}

.comifo-green {
  background-color: #85BB24 !important;
}

.comifo-green-text {
  color: #85BB24 !important;
}

.comifo-green.lighten-4 {
  background-color: #a3d644 !important;
}

.comifo-green-text.text-lighten-4 {
  color: #a3d644 !important;
}

.comifo-green.lighten-5 {
  background-color: #badf77 !important;
}

.comifo-green-text.text-lighten-5 {
  color: #badf77 !important;
}

/*================================================================================
	Item Name: Materialize - Material Design Admin Template
	Version: 5.0
	Author: PIXINVENT
	Author URL: https://themeforest.net/user/pixinvent/portfolio
================================================================================

NOTE:
------
PLACE HERE YOUR OWN CSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* Cmf Online */

.cursor-zoom-in {
  cursor: zoom-in;
}

.cursor-zoom-out {
  cursor: zoom-out;
}

.modal-header span {
  font-size: 1.64rem;
  padding-left: 7px;
  color: white !important;
}

.modal-header i.material-icons {
  top: 3px;
  color: white !important;
  position: relative;
}

.modal-header {
  background-color: #00afd3;
  height: 56px;
  padding: 10px 24px !important;
}

.btn-link {
  cursor: pointer;
}

.btn-link:hover {
  font-weight: bold;
}

/* Troggle Sidebar */

.brand-sidebar {
  height: 84px !important;
}

.sidenav {
  top: 84px;
}

.brand-sidebar .logo-wrapper a.brand-logo img.troggler-screen-logo {
  vertical-align: top;
}

.brand-sidebar span.logo-text img {
  margin-left: 10px;
  height: 38px !important;
}

.brand-sidebar .brand-logo {
  padding: 22px 12px 12px 22px;
}

.nav-collapsed .brand-sidebar span.logo-text img {
  height: 24px !important;
  transition: height 300ms ease-in-out;
}

.nav-collapsed .brand-sidebar {
  height: 64px !important;
  transition: height 300ms ease-in-out;
}

.nav-collapsed .sidenav {
  top: 64px;
  transition: height 300ms ease-in-out;
}

.brand-sidebar .logo-wrapper a.brand-logo img {
  top: 0;
  height: 24px;
}

.brand-sidebar .logo-wrapper a.navbar-toggler i {
  color: #86bc25;
  font-size: 22px;
}

#breadcrumbs-wrapper .breadcrumbs .active {
  font-weight: bold;
  color: #a4ff00;
}

.nav-collapsed .brand-sidebar .logo-wrapper a.brand-logo img.hide-on-med-and-down {
  margin-left: 6px;
  -webkit-animation: fa-spin 2s linear;
  animation: fa-spin 2s linear;
}

/* Custom Color And Gradient */

.gradient-45deg-teal-green {
  background: #86bc25;
  background: linear-gradient(45deg, #86bc25, #00afd3) !important;
}

.gradient-45deg-teal-green.gradient-shadow {
  box-shadow: 0 6px 20px 0 rgba(29, 233, 182, 0.5) !important;
}

.gradient-45deg-grey-blue-grey-blue {
  background: #546e7a;
  background: linear-gradient(45deg, #546e7a, #cfd8dc) !important;
}

.gradient-45deg-grey-blue-grey-blue.gradient-shadow {
  box-shadow: 0 6px 20px 0 rgba(84, 110, 122, 0.5) !important;
}

/* Font Size */

.font-size-small {
  font-size: small !important;
}

.font-size-large {
  font-size: large !important;
}

.font-size-medium {
  font-size: medium !important;
}

.font-weight-normal {
  font-weight: normal !important;
}

.font-weight-lighter {
  font-weight: lighter !important;
}

.font-weight-bold {
  font-weight: bold !important;
}

.font-weight-bolder {
  font-weight: bolder !important;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-flex-start {
  align-items: flex-start;
}

.avatar-circle-sm {
  border-radius: 50%;
  width: 42px;
  height: 42px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}

.avatar-circle-md {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}

.avatar-circle-lg {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}

.table-col-action {
  white-space: nowrap;
  text-align: center;
  min-width: 60px !important;
  width: 60px !important;
}

/* Materialize Stepper */

ul.stepper .step.done::before {
  background-color: green;
}

ul.stepper .step .step-content .step-actions .btn {
  display: inline-flex;
}

/* Buttons */

.btn i {
  vertical-align: middle;
  font-size: 1.4rem;
}

.btn,
.btn-small,
.btn-large,
.btn:focus,
.btn-small:focus,
.btn-large:focus,
.btn-floating:focus {
  background-color: #86bc25;
}

.btn:hover,
.btn-small:hover,
.btn-large:hover {
  background-color: #95d129;
}

.navbar #profile-dropdown {
  width: 210px;
}

.navbar #profile-dropdown li a i {
  margin-right: 10px;
}

/*---------------------------------------- 
  Available Layout type names
-----------------------------------------*/

/*
 1. vertical-modern-menu-template
 2. vertical-menu-nav-dark-template
 3. vertical-gradient-menu-template
 4. vertical-dark-menu-template
 5. horizontal-menu-template

/* Need to change Layout name as per your requirement on below mentioned line.*/

/*
1. @import "../themes/vertical-gradient-menu-template/variables"; 
2. @import "../themes/vertical-gradient-menu-template/theme-variables";
*/

/*#323232 !default;*/

/*----------------*/

/* datatables css */

/*----------------*/

.dataTables_length label select {
  display: inline-block;
  width: auto;
  height: auto;
}

.dataTables_wrapper .dataTable {
  border-collapse: collapse;
}

.dataTables_wrapper .dataTable th {
  width: auto !important;
  border-bottom: 1px solid #e0e0e0;
  padding: 19px 15px;
}

.dataTables_wrapper .dataTable tbody td {
  padding: 0.8rem 0.8rem;
}

.dataTables_wrapper .dataTables_paginate {
  /* Pagination button styling */
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0.25em 0.65em;
  margin-top: 0.25rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-radius: 4px;
  background: #3f51b5;
  border: 1px solid #3f51b5;
  box-shadow: 0px 0px 8px 0px #3f51b5;
  color: white !important;
}

/*
* input-field <x-form-control>
*/

.input-x-wrapper {
  padding: 0;
}

label.input-x-label {
  position: absolute;
  left: 0;
  top: -17px !important;
  font-size: 0.9rem !important;
}

span.input-x-checkbox {
  margin-top: 7px !important;
}

.input-x-wrapper [type=checkbox]:checked + span:not(.lever):before {
  border-right: 2px solid #26a69a;
  border-bottom: 2px solid #26a69a;
}

.input-x-wrapper span.select2-selection {
  line-height: 46px !important;
}

ul.input-x-icons {
  list-style: none;
  display: table;
  position: absolute;
  right: 0;
  top: -16px !important;
  -webkit-margin-before: 0px;
          margin-block-start: 0px;
  -webkit-margin-after: 0px;
          margin-block-end: 0px;
}

ul.input-x-icons li {
  display: table-cell;
  vertical-align: top;
}

ul.input-x-icons i.hidden {
  display: none !important;
}

ul.input-x-icons i.required {
  margin-top: -5px;
  font-size: 0.6rem !important;
  color: red;
}

ul.input-x-icons i.required:hover {
  color: crimson;
  cursor: help;
}

ul.input-x-icons i.helper {
  margin-left: 5px;
  font-size: 1.35rem !important;
  color: cornflowerblue;
}

ul.input-x-icons i.helper:hover {
  color: dodgerblue;
  cursor: help;
}

.select2-search--dropdown {
  padding: 4px 15px;
}

label.select-x-label {
  position: absolute;
  left: 0;
  top: -17px !important;
  font-size: 0.9rem !important;
}

ul.select-x-icons {
  list-style: none;
  display: table;
  position: absolute;
  right: 0;
  top: -20px !important;
}

ul.select-x-icons li {
  display: table-cell;
  vertical-align: top;
}

ul.select-x-icons i.hidden {
  display: none !important;
}

ul.select-x-icons i.required {
  margin-top: -5px;
  font-size: 0.6rem !important;
  color: red;
}

ul.select-x-icons i.required:hover {
  color: crimson;
  cursor: help;
}

ul.select-x-icons i.helper {
  margin-left: 5px;
  font-size: 1.35rem !important;
  color: cornflowerblue;
}

ul.select-x-icons i.helper:hover {
  color: dodgerblue;
  cursor: help;
}

textarea.materialize-textarea {
  background-color: whitesmoke;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  text-transform: none;
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  text-transform: none;
}

::placeholder {
  /* Recent browsers */
  text-transform: none;
}