.w3-theme {color:#FFF !important; background-color:#0DAE91 !important;}
.w3-theme-l1, .w3-button:hover {color:#FFF !important; background-color:#DCEBE8 !important;}
.w3-theme-l2 {color:#505050 !important; background-color:#DCEBE8 !important;}
.w3-theme-l3 {color:#505050 !important; background-color:#FFF !important;}
.w3-theme-l4 {color:#0DAE91 !important; background-color:#FFF !important;}
.w3-theme-l5 {color:#FFF !important; background-color:#505050 !important;}
.w3-text-theme {color:#505050 !important;}
.w3-input {border-bottom-color: #0DAE91 !important; padding: 3px 0 !important}
.w3-input:focus-visible {outline: none;}
.w3-hover-theme:hover {background-color:#DCEBE8 !important;}
.w3-input {padding: 8px 16px !important; font-size: 1rem !important;}
.w3-check {height: 12px !important; width: 12px !important; vertical-align: top;}
.w3-table th, .w3-table td {padding-top: 12px !important; padding-bottom: 12px !important; vertical-align: middle !important;}
.w3-win8-crimson {color: #fff !important; background-color: #a20025 !important;}
.w3-win8-amber {color: #fff !important; background-color: #f0a30a !important;}
#calendarTable td {vertical-align: middle !important; background: content-box; padding: 5px !important;}

.green {color:#0DAE91 !important;}
.light-green {color:#DCEBE8 !important;}
.light-grey {background-color: #F1F1F1 !important;}
.lighter-grey {background-color: #F9F9F9 !important;}
.icons {font-size: 1.7rem; padding: 0 8px; vertical-align: middle;}
.border-right-th { border-right: 1px solid #FFF !important; }
.border-right-td { border-right: 1px solid #DDD !important; }
.calendar-width-avg { width: calc(100% / 7); }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  --sb-width: 13rem;
  height: 100%;
  font-family: "Montserrat", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  background-color: #fff;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.sb-expanded {
  --sb-width: 5.2rem;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif !important;
  font-weight: bold !important;
}

h6 {
	font-size: 15px !important;
	margin: 0 !important;
}

hr {margin: 10px 0 !important;}

select {border: none !important; border-right: 15px solid transparent !important;}

select:required:invalid {
        color: #CCC !important;
}

option[value=""][disabled] {
        display: none;
}

input[type=time] {
	font-size: 0.9rem;
	border: none;
	padding: 0 10px;
	margin: 0 10px 0 5px;
}

.toggle-time-pt {
    display: none;
}

input[type=checkbox]:checked + .toggle-time-pt {
    display: inline-block;
}


input#email_to, input#receipt_to {
	display: none;
}

input#send_email:checked + input#email_to, input#send_receipt:checked + input#receipt_to {
	display: block;
}

::placeholder {
  color: #CCC;
  opacity: 1;
}

::-ms-input-placeholder { 
  color: #CCC;
}

input[type=file]::file-selector-button {
	color:#FFF !important;
	background-color:#0DAE91 !important;
	border-radius: 32px;
	display: inline;
	border: none;
	padding: 8px 32px;
	margin-right: 16px;
    vertical-align: middle;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
    white-space: nowrap;
}

input[type=file]::file-selector-button:hover {
	color: #fff !important;
    background-color: #009688 !important;
}

b {font-weight: bold !important;}

.link {text-decoration: none; padding: 5px 15px;}


header {
	width: 100%;
	position: fixed;
}

aside {
  position: fixed;
  inset: 6rem auto 2rem 0;
  width: var(--sb-width);
  background-color: #F1F1F1;
  transition: width 0.3s ease-in-out;
  overflow: auto;
  scrollbar-width: none;
}

nav {
  height: 100%;
  padding: 0.75rem;
}

nav ul {
  list-style: none;
  height: 100%;
  display: flex;
  flex-flow: column;
  gap: 0.75rem;
}

nav li:last-child {
  margin-top: auto;
}

nav a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 1rem;
  font-size: 1.7rem;
  line-height: 1;
  color: #505050;
  text-decoration: none;
  border-radius: 100rem;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

nav a.active,
nav a:hover,
nav a:focus-visible {
  outline: none;
  background-color: #DCEBE8;
}

nav a span {
  font-size: 0.875rem;
  opacity: 1;
  visibility: visible;
  white-space: nowrap;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.sb-expanded nav a span {
  opacity: 0;
  visibility: hidden;
}

main {
  margin-left: 5.2rem;
  padding: 6.5rem 2rem 2rem 2rem;
  transition: margin-left 0.3s ease-in-out;
}

.tabs {
	border-radius: 15px 15px 0 0;
	margin-right: 5px;
	overflow: hidden;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}

.tabs:hover, .tabs.active {
	background-color: #DCEBE8 !important;
}

.tags { 
	display:flex; 
	flex-wrap:wrap; 
	gap:6px; 
	padding:8px; 
	min-height:44px; 
}

.tag {
    background: #0DAE91;
    padding: 6px 10px;
    border-radius: 50px;
    display: flex;
    gap: 10px;
    align-items: center;
    color: #FFF;
}

.tag .x { 
	cursor: pointer;
    background-color: #FFF;
    border-radius: 50px;
    padding: 0 9px;
    color: #0DAE91;
}

.tags input { 
	border:none; 
	outline:none; 
	min-width:120px; 
}

.autocomplete-results div, .autocomplete-suggestions div { 
	padding:6px; 
	cursor:pointer; 
}

.autocomplete-results div:hover, .autocomplete-suggestions div:hover { 
	background:#0DAE91; 
	color:#FFFFFF;
	border-radius: 50px;
}

.slot {
	cursor:pointer;
	padding:4px 20px;
	min-height:26px;
	text-align: left;
}

table {
	line-height: 1.7 !important;
	font-size: 15px !important;
}

td img {
	width: 100px;
}

#newTraining_btn {
	background: #000 url("../imgs/new-training.jpg") no-repeat center !important;
}

#exercising_btn {
	background: #000 url("../imgs/exercises.jpg") no-repeat center !important;
}

#newTraining_btn:hover {
	background-image: url("../imgs/new-training-dark.jpg") !important;
	color: #FFF !important;
}

#exercising_btn:hover {
	background-image: url("../imgs/exercises-dark.jpg") !important;
	color: #FFF !important;
}

@media (min-width: 768px) {
  main {
    margin-left: var(--sb-width);
  }
}

footer {

	height: 2rem;
	width: 100%;
	position: fixed !important;
}

footer p {
	font-size: 0.8rem;
	margin: 0;
}



/****************************************/
/********* Toggle Switch Styles *********/
/****************************************/
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #CCC;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #0DAE91;
}

input:focus + .slider {
  box-shadow: 0 0 1px #0DAE91;
}

input:checked + .slider:before {
  -webkit-transform: translateX(22px);
  -ms-transform: translateX(22px);
  transform: translateX(22px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/****************************************/
/****************************************/