/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made by Sirea
 */
:root {
  --main-bgcolor : #01A49E;
  --main-textcolor : #FFFFFF;
}

/* NAV BAR
-------------------------------------------------------------------------- */
a {
    color: var(--main-bgcolor);
}
nav {
  background-color: var(--main-bgcolor);
}
nav .nav-wrapper,
.widget.widget-type-pages nav .dropdown-content {
  background-color: var(--main-bgcolor);
}

nav .nav-wrapper .sidenav li a,
nav .nav-wrapper .sidenav li a i.mdi {
  color: var(--main-bgcolor);
}
nav .nav-wrapper .sidenav li.active {
  background-color: var(--main-bgcolor);
}
nav .nav-wrapper .sidenav li.active a,
nav .nav-wrapper .sidenav li.active a i.mdi {
  color: var(--main-textcolor);
}
 
.dropdown-content li > span {
  color: var(--main-bgcolor);
}

nav .nav-wrapper ul li a,
.widget.widget-type-pages nav .dropdown-content li > a {
  color: var(--main-textcolor);
}

/* BUTTONS 
-------------------------------------------------------------------------- */
.btn, 
.btn-large, 
.btn-small,
.btn:hover, 
.btn-large:hover, 
.btn-small:hover,
.btn:focus, 
.btn-large:focus, 
.btn-small:focus, 
.btn-floating:focus {
  background-color: var(--main-bgcolor);
  color: var(--main-textcolor);
}

.btn-floating i {
  color: var(--main-textcolor);
}

.widget-options .btn-option:hover {
  color: var(--main-bgcolor);
}

.widget:not(.widget-type-pages).editable .widget-options {
  background-color: rgba(255, 255, 255, .5);
}

.widget.editable .widget-options .widget-type-label-group .widget-visibility-personal {
  color: var(--main-bgcolor);
  background-color: var(--main-textcolor);
}
.widget.editable .widget-options .widget-type-label-group .widget-visibility-all {
  color: var(--main-textcolor);
  background-color: var(--main-bgcolor);
}

.widget.widget-type-pages.editable > .widget-options {
  border-left-width: 1px;
  border-left-style: dashed;
  border-left-color: var(--main-textcolor);
}

.widget.widget-type-pages.editable > .widget-options .btn-option {
  color: var(--main-textcolor);
}


/* INPUTS
-------------------------------------------------------------------------- */
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: 2px solid var(--main-bgcolor);
}

select:focus {
  border-color: var(--main-bgcolor);
}

span.select2.select2-container--focus span.selection span.select2-selection {
  border-color: var(--main-bgcolor);
}

span.select2-dropdown li.select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option.select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
  background-color: var(--main-bgcolor);
  color: var(--main-textcolor);
}

[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
  border: 2px solid var(--main-bgcolor);
}

[type="radio"]:checked + span:after, 
[type="radio"].with-gap:checked + span:after {
  background-color: var(--main-bgcolor);
}

[type="checkbox"].filled-in:checked + span:not(.lever):after {
  border: 2px solid var(--main-bgcolor);
  background-color: var(--main-bgcolor);
}


/* TABLE
-------------------------------------------------------------------------- */
td a.forcable {
  background-color: var(--main-bgcolor);
  color: var(--main-textcolor);
}

table.clickable-cells tbody td a.forcable {
  background-color: var(--main-bgcolor);
  color: var(--main-textcolor);
}


/* TABLE
-------------------------------------------------------------------------- */
li.monthtoweek:hover > span {
  background-color: var(--main-bgcolor);
}


/* PAGINATION
-------------------------------------------------------------------------- */
.pagination li.active {
  background-color: var(--main-bgcolor);
  color: var(--main-textcolor);
}


/* WIDGET CARD TAB
-------------------------------------------------------------------------- */
.tabs .tab a {
  color: var(--main-bgcolor);
}

.tabs .tab a:hover,
.tabs .tab a.active {
  color: var(--main-bgcolor);
}

.tabs .indicator {
  background-color: var(--main-bgcolor);
}