/*
 * Meshki v3.0.0 (https://borderliner.github.io/Meshki/)
 * Copyright 2016-2024 Mohammadreza Hajianpour <hajianpour.mr@gmail.com>
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/*
 * Meshki v3.0.0 (https://borderliner.github.io/Meshki/)
 * Copyright 2016-2024 Mohammadreza Hajianpour <hajianpour.mr@gmail.com>
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
html.light-mode {
  /* Switch */
}
html.light-mode body {
  background-color: #e2e2e2;
  color: #222;
}
html.light-mode hr {
  border-color: #222;
}
html.light-mode ::selection {
  color: #e2e2e2;
}
html.light-mode ::-moz-selection {
  color: #e2e2e2;
}
html.light-mode a {
  color: #1098ff;
}
html.light-mode a:hover {
  color: #59b7ff;
}
html.light-mode nav ul,
html.light-mode .nav ul {
  background-color: #d6d6d6;
  border-color: #e2e2e2;
}
html.light-mode nav ul li,
html.light-mode .nav ul li {
  /* Navigation Dropdown Button */
}
html.light-mode nav ul li > a,
html.light-mode .nav ul li > a {
  color: #222;
}
html.light-mode nav ul li > a:hover, html.light-mode nav ul li.nav-dropdown:hover .nav-dropdown-button,
html.light-mode .nav ul li > a:hover,
html.light-mode .nav ul li.nav-dropdown:hover .nav-dropdown-button {
  background-color: #c7c7c7;
}
html.light-mode nav ul li > a.active,
html.light-mode .nav ul li > a.active {
  background-color: #222;
}
html.light-mode nav ul li:first-child a.logo,
html.light-mode .nav ul li:first-child a.logo {
  background-color: #e2e2e2;
  color: #222;
}
html.light-mode nav ul li:first-child a.logo:hover,
html.light-mode .nav ul li:first-child a.logo:hover {
  background-color: rgb(29, 29, 29);
  color: white;
}
html.light-mode nav ul li.nav-dropdown,
html.light-mode .nav ul li.nav-dropdown {
  /* Dropdown content attributes */
  /* Each link in dropdown's content */
  /* When the mouse is on each option */
}
html.light-mode nav ul li.nav-dropdown:hover,
html.light-mode .nav ul li.nav-dropdown:hover {
  /* When the dropdown is open, change the color of dropdown's button */
}
html.light-mode nav ul li.nav-dropdown:hover .nav-dropdown-button,
html.light-mode .nav ul li.nav-dropdown:hover .nav-dropdown-button {
  background-color: #c7c7c7;
}
html.light-mode nav ul li.nav-dropdown .nav-dropdown-content,
html.light-mode .nav ul li.nav-dropdown .nav-dropdown-content {
  background-color: #c7c7c7;
}
html.light-mode nav ul li.nav-dropdown .nav-dropdown-content a,
html.light-mode .nav ul li.nav-dropdown .nav-dropdown-content a {
  color: #222;
}
html.light-mode nav ul li.nav-dropdown .nav-dropdown-content a:hover,
html.light-mode .nav ul li.nav-dropdown .nav-dropdown-content a:hover {
  background-color: #e6e6e6;
}
html.light-mode .sidenav {
  background-color: rgb(247, 247, 247);
  scrollbar-color: #222 rgb(247, 247, 247);
}
html.light-mode .sidenav:hover {
  scrollbar-color: black rgb(247, 247, 247);
}
html.light-mode .sidenav ::-webkit-scrollbar-track {
  background: #bebebe;
}
html.light-mode .sidenav ::-webkit-scrollbar-thumb {
  background-color: #222;
  border-color: #bebebe;
}
html.light-mode .sidenav hr {
  border-color: #494949;
  width: 80%;
}
html.light-mode .sidenav a {
  color: #494949;
}
html.light-mode .sidenav a:hover {
  color: #000000;
}
html.light-mode .sidenav a[disabled]:hover {
  color: #494949;
}
html.light-mode footer,
html.light-mode .footer {
  background-color: #d6d6d6;
  border-color: #222;
}
html.light-mode code {
  background-color: transparent;
  color: #222;
}
html.light-mode code.filled {
  background-color: #222;
  color: #e2e2e2;
}
html.light-mode pre {
  background-color: transparent;
  border-color: #222;
  color: #222;
}
html.light-mode pre.filled {
  background-color: #222;
  color: #e2e2e2;
}
html.light-mode pre.filled > code {
  background-color: #222;
  color: #e2e2e2;
}
html.light-mode button,
html.light-mode a.button,
html.light-mode input[type=submit],
html.light-mode input[type=reset],
html.light-mode input[type=button] {
  border-color: rgb(85, 85, 85);
  color: rgb(85, 85, 85);
}
html.light-mode button:hover,
html.light-mode a.button:hover,
html.light-mode input[type=submit]:hover,
html.light-mode input[type=reset]:hover,
html.light-mode input[type=button]:hover {
  background-color: rgb(85, 85, 85);
  border-color: rgb(85, 85, 85);
  color: #e2e2e2;
}
html.light-mode button:active,
html.light-mode a.button:active,
html.light-mode input[type=submit]:active,
html.light-mode input[type=reset]:active,
html.light-mode input[type=button]:active {
  background-color: rgb(39, 39, 39);
  border-color: rgb(39, 39, 39);
  color: #e2e2e2;
}
html.light-mode button.yellow,
html.light-mode a.button.yellow,
html.light-mode input[type=submit].yellow,
html.light-mode input[type=reset].yellow,
html.light-mode input[type=button].yellow {
  border: 2px #d8d400 solid !important;
  color: #979500 !important;
}
html.light-mode button.yellow:hover,
html.light-mode a.button.yellow:hover,
html.light-mode input[type=submit].yellow:hover,
html.light-mode input[type=reset].yellow:hover,
html.light-mode input[type=button].yellow:hover {
  background-color: #d8d400 !important;
  border-color: #d8d400 !important;
  color: #222 !important;
}
html.light-mode button.yellow:active,
html.light-mode a.button.yellow:active,
html.light-mode input[type=submit].yellow:active,
html.light-mode input[type=reset].yellow:active,
html.light-mode input[type=button].yellow:active {
  background-color: #ccc900 !important;
  border-color: #ccc900 !important;
}
html.light-mode button.blue,
html.light-mode a.button.blue,
html.light-mode input[type=submit].blue,
html.light-mode input[type=reset].blue,
html.light-mode input[type=button].blue {
  border: 2px #55acee solid;
  color: #55acee;
}
html.light-mode button.blue:hover,
html.light-mode a.button.blue:hover,
html.light-mode input[type=submit].blue:hover,
html.light-mode input[type=reset].blue:hover,
html.light-mode input[type=button].blue:hover {
  background-color: #55acee;
  border-color: #55acee;
  color: #222;
}
html.light-mode button.blue:active,
html.light-mode a.button.blue:active,
html.light-mode input[type=submit].blue:active,
html.light-mode input[type=reset].blue:active,
html.light-mode input[type=button].blue:active {
  background-color: #4b82b7;
  border-color: #4b82b7;
  color: #222;
}
html.light-mode button.green,
html.light-mode a.button.green,
html.light-mode input[type=submit].green,
html.light-mode input[type=reset].green,
html.light-mode input[type=button].green {
  border: 2px #2ecc71 solid;
  color: #2ecc71;
}
html.light-mode button.green:hover,
html.light-mode a.button.green:hover,
html.light-mode input[type=submit].green:hover,
html.light-mode input[type=reset].green:hover,
html.light-mode input[type=button].green:hover {
  background-color: #2ecc71;
  border-color: #2ecc71;
  color: #222;
}
html.light-mode button.green:active,
html.light-mode a.button.green:active,
html.light-mode input[type=submit].green:active,
html.light-mode input[type=reset].green:active,
html.light-mode input[type=button].green:active {
  background-color: #21a057;
  border-color: #21a057;
  color: #222;
}
html.light-mode button.red,
html.light-mode a.button.red,
html.light-mode input[type=submit].red,
html.light-mode input[type=reset].red,
html.light-mode input[type=button].red {
  border: 2px #e74c3c solid;
  color: #e74c3c;
}
html.light-mode button.red:hover,
html.light-mode a.button.red:hover,
html.light-mode input[type=submit].red:hover,
html.light-mode input[type=reset].red:hover,
html.light-mode input[type=button].red:hover {
  background-color: #e74c3c;
  border-color: #e74c3c;
  color: #222;
}
html.light-mode button.red:active,
html.light-mode a.button.red:active,
html.light-mode input[type=submit].red:active,
html.light-mode input[type=reset].red:active,
html.light-mode input[type=button].red:active {
  background-color: #bd382a;
  border-color: #bd382a;
  color: #222;
}
html.light-mode button.orange,
html.light-mode a.button.orange,
html.light-mode input[type=submit].orange,
html.light-mode input[type=reset].orange,
html.light-mode input[type=button].orange {
  border: 2px #e67e22 solid;
  color: #e67e22;
}
html.light-mode button.orange:hover,
html.light-mode a.button.orange:hover,
html.light-mode input[type=submit].orange:hover,
html.light-mode input[type=reset].orange:hover,
html.light-mode input[type=button].orange:hover {
  background-color: #e67e22;
  border-color: #e67e22;
  color: #222;
}
html.light-mode button.orange:active,
html.light-mode a.button.orange:active,
html.light-mode input[type=submit].orange:active,
html.light-mode input[type=reset].orange:active,
html.light-mode input[type=button].orange:active {
  background-color: #c16819;
  border-color: #c16819;
  color: #222;
}
html.light-mode input[type=email],
html.light-mode input[type=number],
html.light-mode input[type=search],
html.light-mode input[type=text],
html.light-mode input[type=tel],
html.light-mode input[type=url],
html.light-mode input[type=password],
html.light-mode textarea,
html.light-mode select {
  background-color: #ececec;
  border-color: #b4b4b4;
  color: black;
}
html.light-mode input[type=email]:focus,
html.light-mode input[type=number]:focus,
html.light-mode input[type=search]:focus,
html.light-mode input[type=text]:focus,
html.light-mode input[type=tel]:focus,
html.light-mode input[type=url]:focus,
html.light-mode input[type=password]:focus,
html.light-mode textarea:focus,
html.light-mode select:focus {
  border-color: rgba(55, 175, 255, 0.781);
}
html.light-mode fieldset {
  border-color: #3f3f3f;
}
html.light-mode input[type=checkbox] + label.checkbox::before,
html.light-mode input[type=radio] + label.radio::before {
  background-color: transparent;
  border-color: #222;
}
html.light-mode input[type=checkbox]:checked + label.checkbox:before {
  background-color: #4cc1f0;
}
html.light-mode input[type=radio]:checked + label.radio:before {
  background-color: #4cc1f0;
}
html.light-mode .switch .slider {
  border: 2px solid #222;
}
html.light-mode .switch .slider:before {
  background-color: #222;
}
html.light-mode .switch input:checked + .slider {
  box-shadow: 0 0 10px rgba(34, 34, 34, 0.7254901961);
}
html.light-mode .switch.blue input:checked + .slider {
  box-shadow: 0 0 10px rgba(9, 117, 241, 0.8);
  border: 2px solid #0974f1;
}
html.light-mode .switch.green input:checked + .slider {
  box-shadow: 0 0 10px rgba(46, 204, 112, 0.8156862745);
  border: 2px solid #2ecc71;
}
html.light-mode .switch.orange input:checked + .slider {
  box-shadow: 0 0 10px rgba(230, 125, 34, 0.8235294118);
  border: 2px solid #e67e22;
}
html.light-mode .switch.red input:checked + .slider {
  box-shadow: 0 0 10px rgba(231, 77, 60, 0.8);
  border: 2px solid #e74c3c;
}
html.light-mode input[type=range] {
  background-color: transparent;
}
html.light-mode input[type=range]::-webkit-slider-runnable-track {
  background: transparent;
  border-color: #222;
}
html.light-mode input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #222;
  border-color: #222;
}
html.light-mode input[type=range]::-moz-range-track {
  background-color: transparent;
  border-color: #222;
}
html.light-mode input[type=range]::-moz-range-thumb {
  background-color: #222;
  border-color: #222;
}
html.light-mode input[type=range]::-ms-thumb {
  background-color: #222;
  border-color: #222;
}
html.light-mode input[type=range]::-ms-track {
  background-color: transparent;
  border-color: transparent;
  color: transparent;
}
html.light-mode input[type=range]::-ms-fill-lower, html.light-mode input[type=range]::-ms-fill-upper {
  background-color: transparent;
  border-color: #222;
}
html.light-mode table.striped tr:nth-child(even) {
  background-color: #d1d1d1;
}
html.light-mode table.hoverable > tbody tr:hover {
  background-color: #afafaf;
}
html.light-mode th,
html.light-mode td {
  border-color: #7c7c7c;
}

.light-mode,
.light-mode body,
.light-mode .container,
.light-mode .content {
  scrollbar-color: #222 #e2e2e2;
}
.light-mode ::-webkit-scrollbar-track,
.light-mode body ::-webkit-scrollbar-track,
.light-mode .container ::-webkit-scrollbar-track,
.light-mode .content ::-webkit-scrollbar-track {
  background: #e2e2e2;
}
.light-mode ::-webkit-scrollbar-thumb,
.light-mode body ::-webkit-scrollbar-thumb,
.light-mode .container ::-webkit-scrollbar-thumb,
.light-mode .content ::-webkit-scrollbar-thumb {
  background-color: #222;
  border-color: #bebebe;
}