[theme="dark"] {
    --main-bg-color: #202123;
    --main-bg-color-2: #363739;
    --secondary-bg-color: #2d2d31;
    --main-font-color: #eeeeee;
    --secondary-font-color: #dddddd;
    --primary-color: #bf6e0b;
    --primary-color-2: #9C5600;
    --secondary-color: #0071A8;
    --danger-color: #ee5f5b;
    --danger-font-color: #eeeeee;
    --success-color: #62c462;
    --default-icon-color: #0071A8;
    --sidenav-item-hover-color: #3b4043;
    --sidenav-item-font-color: #3b4043;
    --red-danger-color: #F44336;
}
[theme="light"] {
    --main-bg-color: #dffaff;
    --main-bg-color-2: #c9e1e6;
    --secondary-bg-color: #BCE8FF;
    --main-font-color: #202123;
    --secondary-font-color: #2d2d31;
    --primary-color: #ffa538;
    --primary-color-2: #E89024;
    --secondary-color: #1daff5;
    --danger-color: #ba5151;
    --danger-font-color: #eeeeee;
    --success-color: #0f960f;
    --default-icon-color: #1daff5;
    --sidenav-item-hover-color: #6FCEED;
    --sidenav-item-font-color: #6FCEED;
    --red-danger-color: #F44336;
}
:root {
    /* Calender */
    --fc-page-bg-color: var(--secondary-color);
}

body, .modal {
    background-color: var(--main-bg-color);
    color: var(--main-font-color);
}
.modal .modal-footer {
    background-color: var(--secondary-bg-color);
    color: var(--main-font-color);
}
nav {
    background-color: var(--secondary-color);
}
.card {
    background-color: rgba(255, 255, 255, 0.2);
}
.btn, .btn-large, .btn-small {
    background-color: var(--primary-color);
    -webkit-transition: background-color .2s ease-out;
    transition: background-color .2s ease-out;
}
.btn:hover, .btn-large:hover, .btn-small:hover, .btn:focus, .btn-large:focus, .btn-small:focus {
    background-color: var(--primary-color-2);
}
.btn-flat {
    color: var(--main-font-color);
}
.divider {
    opacity: 0.4;
    background-color: var(--default-icon-color);
}
.sidenav {
    background-color: var(--secondary-bg-color);
}
.sidenav li a:not(.subheader) {
    color: var(--secondary-font-color);
}
.sidenav li a:not(.subheader):hover, table.highlight tbody tr:hover {
    background-color: var(--sidenav-item-hover-color);
}
.sidenav li.hover-bg-danger a:not(.subheader):hover {
    background-color: var(--danger-color);
}
.sidenav li.hover-bg-danger:hover  * {
    color: var(--danger-font-color);
}
.sidenav li a.subheader {
    color: #9AA0A6;
}
.sidenav li a [class^='fa-'] {
    color: var(--default-icon-color);
}
#sidenav-right-top {
    background-color: var(--secondary-color);
}
.secondary-content [class^='fa-'] {
    color: var(--primary-color);
}
.page-footer {
    background-color: var(--secondary-color);
}
.pagination li.active a, .pagination li.active a:hover {
    background-color: var(--primary-color);
    cursor: default;
}
.pagination li a {
    color: var(--secondary-font-color);
}
.pagination li a:hover {
    background-color: var(--secondary-color);
}
.pagination li.disabled a:hover {
    background-color: transparent;
}
.collection {
    margin: .5rem 0 1rem 0;
    border: 1px solid var(--main-bg-color-2);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.collection.with-header .collection-header {
    background-color: var(--secondary-color);
    border-bottom: 1px solid var(--secondary-bg-color);
    padding: 10px 20px;
}
.collection .collection-item {
    background-color: var(--main-bg-color-2);
    border-bottom: 1px solid var(--secondary-bg-color);
}
.collection a.collection-item {
    color: var(--secondary-font-color);
}
.collection a.collection-item:not(.active):hover {
  background-color: var(--sidenav-item-hover-color);
}
.tap-target {
    background-color: var(--primary-color);
}
/* Input Fields */
.dropdown-content {
    background-color: var(--secondary-bg-color);
}
.dropdown-content li > a, .dropdown-content li > span {
    color: var(--main-font-color);
}
input, textarea, .input-field .helper-text {
    color: var(--main-font-color);
}
.select-wrapper .caret {
  fill: var(--main-font-color);
}
.dropdown-content li:hover {
    background-color: var(--sidenav-item-hover-color);
}
input:not([type]):focus:not([readonly]),
input[type="text"]:not(.browser-default):focus:not([readonly]),
input[type="password"]:not(.browser-default):focus:not([readonly]),
input[type="email"]:not(.browser-default):focus:not([readonly]),
input[type="url"]:not(.browser-default):focus:not([readonly]),
input[type="time"]:not(.browser-default):focus:not([readonly]),
input[type="date"]:not(.browser-default):focus:not([readonly]),
input[type="datetime"]:not(.browser-default):focus:not([readonly]),
input[type="datetime-local"]:not(.browser-default):focus:not([readonly]),
input[type="tel"]:not(.browser-default):focus:not([readonly]),
input[type="number"]:not(.browser-default):focus:not([readonly]),
input[type="search"]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid var(--secondary-color);
  -webkit-box-shadow: 0 1px 0 0 var(--secondary-color);
  box-shadow: 0 1px 0 0 var(--secondary-color);
}
input:not([type]):focus:not([readonly]) + label,
input[type="text"]:not(.browser-default):focus:not([readonly]) + label,
input[type="password"]:not(.browser-default):focus:not([readonly]) + label,
input[type="email"]:not(.browser-default):focus:not([readonly]) + label,
input[type="url"]:not(.browser-default):focus:not([readonly]) + label,
input[type="time"]:not(.browser-default):focus:not([readonly]) + label,
input[type="date"]:not(.browser-default):focus:not([readonly]) + label,
input[type="datetime"]:not(.browser-default):focus:not([readonly]) + label,
input[type="datetime-local"]:not(.browser-default):focus:not([readonly]) + label,
input[type="tel"]:not(.browser-default):focus:not([readonly]) + label,
input[type="number"]:not(.browser-default):focus:not([readonly]) + label,
input[type="search"]:not(.browser-default):focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
  color: var(--secondary-color);
}
.select-wrapper input.select-dropdown:focus {
  border-bottom: 1px solid var(--secondary-color);
}
[type="checkbox"]:checked + span:not(.lever)::before {
  border-right-color: var(--success-color);
  border-bottom-color: var(--success-color);
}
/* Chips */
.chip:focus, .chip.active {
    background-color: var(--secondary-color);
    color: var(--main-font-color);
}
/* MFA Tab */
#mfa-tab-target {
    line-height: 1.5;
    background-color: var(--red-danger-color);
}
/* Tables */
table:not(.datepicker-table) thead {
    background-color: var(--secondary-color);
    color: var(--main-font-color);
}
table:not(.datepicker-table) thead tr th {
    border-left: 2px solid var(--main-bg-color-2);
    border-right: 2px solid var(--main-bg-color-2);
}
table:not(.datepicker-table) thead tr th:first-child {
    border-left: none;
}
table:not(.datepicker-table) thead tr th:last-child {
    border-right: none;
}
/* Datepicker */
.datepicker-date-display {
    -webkit-box-flex: 1;
    -webkit-flex: 1 auto;
    -ms-flex: 1 auto;
    flex: 1 auto;
    background-color: var(--secondary-color);
    color: #fff;
    padding: 20px 22px;
    font-weight: 500;
}
.datepicker-table td.is-today {
    color: var(--secondary-color);
}
.datepicker-day-button:focus {
    background-color: color-mix(in srgb, var(--secondary-color) 25%, transparent);
}
/* Timepicker */
.timepicker-digital-display {
    -webkit-box-flex: 1;
    -webkit-flex: 1 auto;
    -ms-flex: 1 auto;
    flex: 1 auto;
    background-color: var(--secondary-color);
    padding: 10px;
    font-weight: 300;
}
.timepicker-tick.active, .timepicker-tick:hover {
    background-color: color-mix(in srgb, var(--secondary-color) 25%, transparent);
}
.timepicker-canvas line {
  stroke: var(--secondary-color);
  stroke-width: 4;
  stroke-linecap: round;
}
.timepicker-canvas-bg {
  stroke: none;
  fill: var(--secondary-color);
}
.timepicker-canvas-bearing {
  stroke: none;
  fill: var(--secondary-color);
}