﻿:root {
  --primary-color: #4e6584;
  --primary-dark-color: #03324a;
  --primary-light-color: #3d7e93;
  --base-background-color: white;
  --app-background-color: #f5f5f5;
  --label-color: dimgray;
  --header-color: #38474f;
  --shadow-color: silver;
  --disabled-color: dimgray;
  --offset-white: #f5f5f5;
  --border-color: dimgray;
  --border-light-color: rgba(0, 0, 0, 0.12);
  --color-green: #5cb85c;
  --color-red: #d9534f;
  --color-orange: #FFA501;
  --color-blue: #037499;
  --error-color: #d9534f;
  --border-radius-small: 5px;
  --border-radius: 9px;
}

.mdi-12px.mdi-set, .mdi-12px.mdi:before {
  font-size: 12px;
}

.mdi-red:before {
  color: #b71c1c;
}

.mdi-green:before {
  color: #1b5e20;
}

.mdi-orange:before {
  color: orange;
}

.mdi-blue:before {
  color: #04759a;
}

.mdi-primary:before {
  color: var(--primary-color);
}

.mdi-primarydark:before {
  color: var(--primary-dark-color);
}

.mdi-primarylight:before {
  color: var(--primary-light-color);
}

.mdi-hidden {
  display: none;
}

.mdi {
  vertical-align: middle;
}

.mdi-sub-icon {
  display: inline-block;
  position: relative;
}
.mdi-sub-icon::after {
  font: normal normal normal 24px/1 "Material Design Icons";
  font-size: inherit;
  text-rendering: auto;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: rgb(117, 117, 117);
  color: white;
  border-radius: 5px;
  font-size: 12px;
  position: relative;
  left: -10px;
  bottom: -4px;
}
.mdi-sub-icon.mdi-sub-mine::after {
  content: "\f0004";
}
.mdi-sub-icon.mdi-sub-add::after {
  content: "\f0415";
}
.mdi-sub-icon.mdi-sub-settings::after {
  content: "\f0493";
}
.mdi-sub-icon.mdi-sub-filter::after {
  content: "\f0233";
}
.mdi-sub-icon.mdi-sub-externallink::after {
  content: "\f03cc";
}

nav {
  background-color: #03324a;
  background-color: var(--primary-dark-color);
  height: 56px;
  line-height: 56px;
}
nav .nav-wrapper {
  height: 56px;
  line-height: 56px;
}
nav .nav-wrapper .brand-logo {
  font-size: 1.5rem;
}

.sidenav {
  width: 40%;
}

a {
  /*span.mdi {
  	vertical-align: sub;
  }*/
}
a span.mdi {
  vertical-align: middle;
}
a span.mdi + span {
  padding-left: 7px !important;
  vertical-align: middle;
}
a:not(.btn, .btn-small) {
  color: #03324a;
  color: var(--primary-dark-color);
}
a:not(.btn, .btn-small):hover {
  color: #4e6584;
  color: var(--primary-color);
}
a:not(.btn, .btn-small):active {
  opacity: 0.4;
}
a:not(.btn, .btn-small):active span.mdi {
  opacity: 0.8;
}

/* Hack, using mdi icons instead of Materialize Google font to show close icon in Chips*/
i.material-icons.close {
  font-family: "Material Design Icons";
  visibility: hidden;
  position: relative;
  width: 20px;
}

i.material-icons.close:before {
  content: "\f0156";
  visibility: visible;
}

.btn-small {
  font-size: 12px;
}

.btn, .btn-small, .btn-floating, .btn-flat {
  background-color: #4e6584;
  background: var(--primary-color);
  border-radius: 5px;
  border-radius: var(--border-radius-small);
}
.btn:hover, .btn:focus, .btn-small:hover, .btn-small:focus, .btn-floating:hover, .btn-floating:focus, .btn-flat:hover, .btn-flat:focus {
  background-color: #03324a;
  background: var(--primary-dark-color);
}
.btn.btn-reverse, .btn-small.btn-reverse, .btn-floating.btn-reverse, .btn-flat.btn-reverse {
  background-color: #03324a;
  background: var(--primary-dark-color);
}
.btn.btn-reverse:hover, .btn.btn-reverse:focus, .btn-small.btn-reverse:hover, .btn-small.btn-reverse:focus, .btn-floating.btn-reverse:hover, .btn-floating.btn-reverse:focus, .btn-flat.btn-reverse:hover, .btn-flat.btn-reverse:focus {
  background-color: #4e6584;
  background: var(--primary-color);
}
.btn:has(span.mdi-trash-can-outline):hover, .btn-small:has(span.mdi-trash-can-outline):hover, .btn-floating:has(span.mdi-trash-can-outline):hover, .btn-flat:has(span.mdi-trash-can-outline):hover {
  background-color: #d9534f;
  background: var(--color-red);
}
.btn.btn-light, .btn-small.btn-light, .btn-floating.btn-light, .btn-flat.btn-light {
  background-color: white;
  background: var(--base-background-color);
  color: #03324a;
  color: var(--primary-dark-color);
  /*	border: solid 1px $primary-color;
  border: solid 1px var(--primary-color);*/
}
.btn.btn-light span.mdi:before, .btn-small.btn-light span.mdi:before, .btn-floating.btn-light span.mdi:before, .btn-flat.btn-light span.mdi:before {
  color: #03324a;
  color: var(--primary-dark-color);
}
.btn.btn-light:hover, .btn.btn-light:focus, .btn-small.btn-light:hover, .btn-small.btn-light:focus, .btn-floating.btn-light:hover, .btn-floating.btn-light:focus, .btn-flat.btn-light:hover, .btn-flat.btn-light:focus {
  background-color: #3d7e93;
  background: var(--primary-light-color);
}

fieldset {
  border: none;
  min-width: 0;
}
fieldset legend {
  width: 100%;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 20px;
  border-bottom: solid 2px #4e6584;
  border-bottom: solid 2px var(--primary-color);
}

svg.caret {
  background-color: white;
  z-index: 10 !important;
  pointer-events: none;
}

summary {
  cursor: pointer;
}

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 #4e6584;
  border-bottom: 1px solid var(--primary-color);
  -webkit-box-shadow: 0 1px 0 0 #4e6584;
  -webkit-box-shadow: 0 1px 0 0 var(--primary-color);
  box-shadow: 0 1px 0 0 #4e6584;
  box-shadow: 0 1px 0 0 var(--primary-color);
  border-radius: 0 !important;
}

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: #4e6584;
  color: var(--primary-color);
}

input:not([type]):disabled, input:not([type])[readonly=readonly], input[type=text]:not(.browser-default):disabled, input[type=text]:not(.browser-default)[readonly=readonly], input[type=password]:not(.browser-default):disabled, input[type=password]:not(.browser-default)[readonly=readonly], input[type=email]:not(.browser-default):disabled, input[type=email]:not(.browser-default)[readonly=readonly], input[type=url]:not(.browser-default):disabled, input[type=url]:not(.browser-default)[readonly=readonly], input[type=time]:not(.browser-default):disabled, input[type=time]:not(.browser-default)[readonly=readonly], input[type=date]:not(.browser-default):disabled, input[type=date]:not(.browser-default)[readonly=readonly], input[type=datetime]:not(.browser-default):disabled, input[type=datetime]:not(.browser-default)[readonly=readonly], input[type=datetime-local]:not(.browser-default):disabled, input[type=datetime-local]:not(.browser-default)[readonly=readonly], input[type=tel]:not(.browser-default):disabled, input[type=tel]:not(.browser-default)[readonly=readonly], input[type=number]:not(.browser-default):disabled, input[type=number]:not(.browser-default)[readonly=readonly], input[type=search]:not(.browser-default):disabled, input[type=search]:not(.browser-default)[readonly=readonly], textarea.materialize-textarea:disabled, textarea.materialize-textarea[readonly=readonly] {
  color: rgba(0, 0, 0, 0.8);
  border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
}

label.active.disableactive {
  transform: translateY(12px) !important;
}

.input-field > label:not(.label-icon).active {
  -webkit-transform: translateY(-5px) scale(0.8);
  transform: translateY(-5px) scale(0.8);
}

.select-wrapper + label {
  top: -20px;
}

.input-field span.character-counter {
  position: absolute;
  right: 15px;
  bottom: 5px;
}

input.remote-invalid {
  border-bottom: 1px solid #F44336 !important;
  -webkit-box-shadow: 0 1px 0 0 #F44336 !important;
  box-shadow: 0 1px 0 0 #F44336 !important;
}
input.remote-invalid ~ .helper-text[data-remote-error]:after {
  content: attr(data-remote-error) !important;
  color: #F44336 !important;
}

[type=checkbox]:checked + span:not(.lever):before {
  border-right-color: #03324a;
  border-right-color: var(--primary-dark-color);
  border-bottom-color: #03324a;
  border-bottom-color: var(--primary-dark-color);
}

input[type=search] {
  -webkit-appearance: none;
  border-radius: 0 !important;
}

.switch label input[type=checkbox]:checked + .lever {
  background-color: var(--primary-color);
}
.switch label input[type=checkbox]:checked + .lever:before {
  background-color: var(--primary-light-color);
  opacity: 0.2;
}
.switch label input[type=checkbox]:checked + .lever:after {
  background-color: var(--primary-dark-color);
}

input[type=checkbox]:checked, input[type=checkbox]:not(:checked) {
  position: static !important;
}

input[type=radio]:checked + span:after, [type=radio].with-gap:checked + span:after {
  background-color: #4e6584;
  background-color: var(--primary-color);
}

input[type=radio]:checked + span:after, [type=radio].with-gap:checked + span:before, [type=radio].with-gap:checked + span:after {
  border-color: #03324a;
  border-color: var(--primary-dark-color);
}

input[type=range] + .thumb {
  background-color: #4e6584;
  background-color: var(--primary-color);
}
input[type=range] + .thumb .value {
  color: #4e6584;
  color: var(--primary-color);
}

input[type=range]::-webkit-slider-thumb {
  background: #4e6584;
  background: var(--primary-color);
  background-color: #4e6584;
  background-color: var(--primary-color);
}

.chips.input-field.focus {
  border-bottom: 1px solid #03324a;
  border-bottom: 1px solid var(--primary-dark-color);
}
.chips .chip {
  height: 26px;
  line-height: 26px;
}
.chips .chip .close {
  line-height: inherit;
}

.appSideBar .collapsible-body {
  background-color: #4e6584;
  background-color: var(--primary-color);
}

.pagination li.active {
  background-color: #4e6584;
  background-color: var(--primary-color);
}

.tabs .tab a {
  color: white;
  transition-property: padding;
  transition-duration: 0.3s;
}
.tabs .tab a:hover {
  color: white;
}
.tabs .tab a i.material-icons {
  position: relative;
  top: 6px;
  padding-right: 5px;
}
.tabs .tab a.active {
  color: white;
}
.tabs .tab a.active:focus {
  background-color: transparent;
}

.dropdown-content {
  max-height: 175px !important;
  border-radius: 5px;
  border-radius: var(--border-radius-small);
}
.dropdown-content li {
  min-height: 30px;
}
.dropdown-content li > span {
  color: #03324a;
  color: var(--primary-dark-color);
  padding: 5px 15px;
}

.appmodalcontent .dropdown-content {
  max-height: 125px !important;
}

table.condensed td, table.condensed th {
  padding: 3px 7px;
}
table td.border-left, table th.border-left {
  border-left: solid 1px var(--border-light-color);
}
table td.border-right, table th.border-right {
  border-right: solid 1px var(--border-light-color);
}
table td.border-top, table th.border-top tr.border-top {
  border-bottom: solid 1px var(--border-light-color);
}
table td.border-bottom, table th.border-bottom, table tr.border-bottom {
  border-bottom: solid 1px var(--border-light-color);
}

.select-wrapper.condensed ul {
  max-height: 200px;
}
.select-wrapper.condensed ul li {
  min-height: 30px;
}
.select-wrapper.condensed ul li span {
  padding: 5px 10px;
  font-size: 14px;
  line-height: 16px;
}

span.badge {
  border-radius: var(--border-radius-small);
}
span.badge.new {
  background-color: #03324a;
  background-color: var(--primary-dark-color);
}

.progress {
  background-color: transparent;
  border: solid 1px var(--primary-dark-color);
}
.progress .determinate, .progress .indeterminate {
  background-color: #4e6584;
  background-color: var(--primary-color);
}

.toast {
  background-color: white;
  background-color: var(--base-background-color);
  color: dimgray;
  color: var(--label-color);
  border-radius: 5px;
  border-radius: var(--border-radius-small);
}

.toast.error {
  color: #d9534f;
  color: var(--error-color);
}

.modal {
  border-radius: 9px;
  border-radius: var(--border-radius);
}

.chips .chip.small {
  height: 20px;
  font-size: 11px;
  font-weight: 300;
  line-height: 20px;
  padding: 0 8px;
  border-radius: 5px;
}
.chips .chip:focus {
  background-color: var(--primary-color) !important;
}
.chips input:not([type]):not(.browser-default).input {
  width: 250px !important;
}

#desktop.mobiledevice .modal {
  max-height: 80%;
}
#desktop.mobiledevice .modal.modal-fixed-footer {
  height: 80%;
}
#desktop.mobiledevice .modal .modal-content {
  padding: 15px;
}
@media only screen and (max-width: 992px) {
  #desktop.mobiledevice .modal {
    width: 90%;
  }
}

.pagebook .pagecontent blockquote {
  border-left-color: var(--primary-color);
}
.pagebook .pagecontent strong {
  font-weight: bold;
}
