/* ######## @MTO Custom CSS Library | Index ######## */
/* General Rules */
:root {
  --primary-color: #525ded;
  --default-color: #ffa500;
  --dark-color: #334f55;
  --light-color: #ffffff;
  --muted-color: #f5f5f5;
  --dim-color: #747474;
  --light-dim-color: #dadada;
  --smoke-color: #adadad;
  --danger-color: #dc3545;
  --success-color: #2e8b57;
}

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

::-webkit-scrollbar {
  width: 12px;
  background: var(--light-color);
}
::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 25px;
  width: 12px;
}

@font-face {
  font-family: "Lexend Deca Regular";
  font-style: normal;
  font-weight: normal;
  src: local("Lexend Deca Regular"),
    url("../fonts/Lexand_Deca/LexendDecaRegular.woff") format("woff");
}

@font-face {
  font-family: "Noto Sans Regular";
  font-style: normal;
  font-weight: normal;
  src: local("Noto Sans Regular"),
    url("../fonts/Noto_Sans/NotoSans-Regular.woff") format("woff");
}

@font-face {
  font-family: "Noto Sans Italic";
  font-style: normal;
  font-weight: normal;
  src: local("Noto Sans Italic"),
    url("../fonts/Noto_Sans/NotoSans-Italic.woff") format("woff");
}

@font-face {
  font-family: "Noto Sans Bold";
  font-style: normal;
  font-weight: normal;
  src: local("Noto Sans Bold"),
    url("../fonts/Noto_Sans/NotoSans-Bold.woff") format("woff");
}

@font-face {
  font-family: "Noto Sans Extra Bold";
  font-style: normal;
  font-weight: normal;
  src: local("Noto Sans Bold"),
    url("../fonts/Noto_Sans/NotoSans-ExtraBold.woff") format("woff");
}

body {
  font-family: "Noto Sans Regular", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  background-color: var(--light-color);
  color: var(--dark-color);
}

a {
  color: var(--primary-color);
  text-decoration: none;
}
a:active {
  color: var(--default-color);
}
a:hover {
  text-decoration: none;
}

ul {
  list-style: none;
}

ul li a {
  margin: 0 1.5rem 0 0;
}

input,
textarea {
  border-radius: 5px;
  resize: none;
}

button {
  border: none;
  background: none;
  padding: 0;
}

/* Margins */
.mx-1 {
  margin: 0 1rem;
}
.my-2 {
  margin: 2rem 0;
}
.myb-1 {
  margin: 0 0 1rem 0;
}
.myb-2 {
  margin: 0 0 2rem 0;
}
.myb-4 {
  margin: 0 0 4rem 0;
}
.mxr-1 {
  margin: 0 0 0 1rem;
}
.mxr-2 {
  margin: 0 0 0 2rem;
}
.mxr-3 {
  margin: 0 0 0 3rem;
}
.mxl-1 {
  margin: 0 1rem 0 0;
}
.mxl-2 {
  margin: 0 2rem 0 0;
}
.mxy-4 {
  margin: 7rem 0 4rem 0;
}
.mxt {
  margin: 0.5rem 0 0 0;
}
.mxt-1 {
  margin: 1rem 0 0 0;
}
.mxl-10 {
  margin: 0 0 0 10rem;
}

/* Buttons */
.btn-custom {
  cursor: pointer;
  border-radius: 4px;
}
.btn-primary-custom {
  background: var(--primary-color);
  color: var(--light-color);
}
.btn-default-custom {
  background: none;
  color: var(--dark-color);
}
.btn-sign-up,
.btn-login {
  font-size: 13px;
  padding: 10px 20px;
}
.btn-submit,
.btn-custom-reset {
  font-size: 20px;
  padding: 10px;
  width: 100%;
  font-family: "Noto Sans Bold";
}
.btn-custom-reset {
  color: var(--dim-color);
  background: var(--muted-color);
  border: none;
}
.btn-filter {
  margin: 0 1rem 0 0;
  padding: 8px 25px;
  font-size: 12px;
  background: var(--light-color);
}
.btn-filter-overlay {
  margin: 0 1rem 0 0;
  padding: 8px 25px;
  font-size: 12px;
  background: var(--light-color);
}
.btn-view {
  padding: 6px 20px;
  border: none;
}
.btn-export {
  font-weight: bold;
  padding: 8px 25px;
  border: none;
}
.btn-download {
  padding: 6px 20px;
  border: 2px solid var(--default-color);
}
.btn-save {
  padding: 6px 20px;
  border: 2px solid var(--dark-color);
}
.btn-update {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px 30px;
  border-radius: 0 10px 0 0;
  border: none;
  font-weight: bold;
}
.btn-view-job {
  padding: 10px 40px;
}
.btn-save-job {
  background: var(--muted-color);
  color: var(--dim-color);
  border: 2px solid var(--smoke-color);
  padding: 9px 35px;
}

.btn-apply-job,
.btn-submit-job {
  background: var(--primary-color);
  color: var(--light-color);
  border: 2px solid var(--muted-color);
  padding: 10px 25px;
}
.btn-submit-job:hover,
.btn-apply-job:hover {
  border: 2px solid var(--primary-color);
  color: var(--light-color);
}
.btn-save-viewed-job,
.btn-view-saved {
  background: var(--light-color);
  color: var(--primary-color);
  border: 2px solid var(--muted-color);
  padding: 10px 25px;
}
.btn-view-saved:hover,
.btn-save-viewed-job:hover {
  border: 2px solid var(--light-color);
  color: var(--primary-color);
}

/* Displays */
.d-none {
  display: none;
}
.d-block {
  display: block;
}
.d-inline {
  display: inline;
}
.d-inline-block {
  display: inline-block;
}
.d-flex {
  display: flex;
}
.d-flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flex-column {
  flex-direction: column;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.font-weight-normal {
  font-weight: normal;
}
.space-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.align-center {
  align-items: center;
}
.align-start {
  align-items: flex-start;
}

/* Positions */
.position-relative {
  position: relative;
}
.position-absolute {
  position: absolute;
}
.position-sticky {
  position: sticky;
}

/* Text */
.text-bold {
  font-weight: bold;
}
.text-lead {
  font-size: 24px;
  font-weight: bold;
}
.text-right {
  text-align: right;
}
.font-normal {
  font-style: normal;
}
.fs {
  font-size: 12px;
}
.fs-x {
  font-size: 10px;
}
.fs-2x {
  font-size: 20px;
}

/* Colors */
.primary-color {
  color: var(--primary-color);
}
.default-color {
  color: var(--default-color);
}
.dim-color {
  color: var(--dim-color);
}
.muted-color {
  color: var(--muted-color);
}
.smoke-color {
  color: var(--smoke-color);
  font-size: 23px;
}
.danger-color {
  color: var(--danger-color);
}
.success-color {
  color: var(--success-color);
}

/* Bootstrap Override Rules */
.bootstrap-select.btn-group .dropdown-toggle .filter-option {
  color: var(--dim-color);
  font-family: "Noto Sans Bold";
  padding: 5px 7px;
}

/* Authentication Form */
.form .form-group {
  display: flex;
  flex-direction: column;
  margin: 0 0 30px 0;
  width: 100%;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="date"],
.form input[type="number"],
.form input[type="tel"],
.form textarea {
  width: 226px;
  height: 43px;
  padding: 10px 15px;
  font-size: 14px;
  border: 1px solid var(--light-dim-color);
  border-radius: 5px;
  background: var(--light-color);
  color: var(--dim-color);
  font-family: "Noto Sans Bold";
}
.form select {
  border: 1px solid var(--light-dim-color);
}
.mobile-number__input {
  width: 170px !important;
}
.form input[type="text"]:focus,
.form input[type="email"]:focus,
.form input[type="date"]:focus,
.form input[type="password"]:focus,
.form input[type="number"]:focus,
.form textarea:focus,
input[type="search"] {
  outline: none;
}
.form .form-group span {
  display: none;
}

/* Footer */
footer {
  margin: 0;
  padding: 0;
  text-align: center;
}

.footer {
  margin: 67px 0 0 0;
  font-size: 14px;
  color: var(--smoke-color);
  font-weight: bold;
  font-family: "Noto Sans Regular";
}

/* Miscelaneous */
.last {
  margin: 0;
}
.tag {
  background: var(--default-color);
  color: var(--light-color);
  margin: 0 0 15px 8px;
  padding: 4px 8px;
  border-radius: 15px;
  font-size: 9px;
  font-weight: bolder;
}
.w-100 {
  width: 100%;
}
.error {
  color: var(--danger-color);
  text-align: center;
  margin-bottom: 25px;
}
.success {
  color: var(--success-color);
  text-align: center;
  margin-bottom: 25px;
}
.border {
  border: 1px solid saddlebrown;
}
.monitor-day{
  font-size: 18px;
  color: #FFA500;
}
.monitor-count{
  font-weight: bold;
font-size: 18px;
color: #525DED;
}
.monitor-row{
  background-color: #f5f5f5;
}
.job-history-title{
  font-size: 24px;
  font-weight: bold;
  color: #747474;
}