﻿/*
    This is the main custom CSS file of the application. Most of the CSS features that the application use come from Bootstrap.
    If you edit this file, please add the desired selectors in alphabetical order to keep a well organized code structure.
    If you add CSS properties that use media queries for responsive-design, please add them at the bottom of the file.
*/

@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');

*:focus {
    outline: 0px;
}

#access-denied-image {
    max-width: 100%;
}

.active-button {
    background-color: #fff;
    color: forestgreen;
    padding: 2px 5px;
    border-radius: 5px;
}

#add-tenant-admin-button {
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
}

#advanced-search-wrapper {
    background-color: #F9F9F9;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    color: #111;
}

.application-in-progress-image {
    max-width: 100%;
}

.alert-container {
    font-size: 100%;
}

.bg-custom {
    background-color: var(--theme);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    height: 80px;
}

.bg-footer {
    background-color: var(--theme);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px 10px;
}

.bg-green {
    background-color: #24AC21;
}

.bg-light-info {
    background-color: #3276b1;
}

.bg-light-success {
    background-color: #51a351;
}

.bg-navy {
    background-color: #3672C0;
}

.bg-silver {
    background-color: #B6B4B4;
}

.bg-danger-custom {
    background-color: #C25A5A;
}

.bg-theme {
    background-color: var(--theme);
}

.blue-button {
    background-color: #157EC0;
    color: white;
}

.blue-button:hover {
    background-color: #166a9f;
    color: white;
}

body {
    margin-bottom: 100px;
    font-family: 'Rubik', 'Segoe UI';
}

.bolded-title {
    color: #4B4A4A;
    font-weight: 700;
    text-decoration: solid;
    letter-spacing: -0.25px;
}

.breadcrumb-link {
    color: #194A8B;
    text-decoration: none;
}

.breadcrumb-link-active {
    color: #5D616B;
    text-decoration: none;
}

.breadcrumb-login {
    margin-bottom: 30px;
}

.breadcrumb-login h1 {
    font-weight: 400;
}

.breadcrumb-generic {
    margin-bottom: 30px;
}

.breadcrumb-generic h1 {
    font-weight: 400;
    font-size: 200%;
}

.breadcrumb-generic h2 {
    font-weight: 400;
    font-size: 180%;
}

.breadcrumb-generic span {
    font-size: 100%;
}

.btn-aqua {
    background-color: #3fc3ee;
    color: white;
}

.btn-aqua:hover {
    background-color: #39AFD6;
    color: white;
}

.btn-dark-silver {
    background-color: #6b6b6b;
    color: white;
}

.btn-dark-silver:hover {
    background-color: #515151;
    color: white;
}

.btn-delete {
    background-color: #C25A5A;
    color: white;
}

.btn-delete:hover {
    background-color: #AE4646;
    color: white;
}

.btn-lime {
    background-color: #5cb85c;
    color: #fff;
}

.btn-lime:hover {
    background-color: #529e52;
    color: #fff;
}

.btn-navy {
    background-color: #3672C0;
    color: white;
}

.btn-navy:hover {
    background-color: #217dbb;
    color: white;
}

.btn-navy-dark {
    background-color: #365983;
    color: white;
}

.btn-navy-dark:hover {
    background-color: #3672C0;
    color: white;
}

.btn-silver {
    background-color: #B6B4B4;
    color: white;
}

.btn-silver:hover {
    background-color: #969696;
    color: white;
}

.btn-theme {
    background-color: var(--theme);
    color: var(--fore);
}

.btn-theme:hover {
    filter: brightness(115%);
    color: var(--fore);
}

.calendar-custom-title {
    color: #444;
    font-size: 26px;
    line-height: 20px;
    font-weight: 400;
}

.calendar-step-button {
    background-color: #1881C3;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    padding: 18px 28px;
    border: 0;
    text-transform: uppercase;
    border-radius: 5px;
}

.calendar-step-button:hover {
    background-color: #1874ae;
}

.calendar-step-title {
    color: #1881C3;
    font-size: 20px;
    font-weight: 500;
    text-decoration: underline;
}

.calendar-view-title {
    color: #444;
    font-size: 20px;
    font-weight: 400;
}

.clickable-card {
    cursor: pointer;
}

.copy-calendar-url-to-clipboard {
    cursor: pointer;
}

#schedules-table {
    border-collapse: separate;
    border-spacing: 5px;
}

#schedules-table .form-check-input:checked {
    background-color: #24AC21;
    border-color: #24AC21;
}

#schedules-table .header-checkbox:hover,
#schedules-table .header-checkbox-wrapper:hover,
#schedules-table .row-checkbox:hover,
#schedules-table .row-checkbox-wrapper:hover {
    cursor: pointer;
}

#schedules-table tbody tr {
    background-color: #f2f2f2;
    text-align: center;
    vertical-align: middle;
}

#schedules-table tbody tr td {
    border-radius: 5px;
    height: 40px;
}

#schedules-table thead tr {
    background-color: #d9d9d9;
    color: #444;
    text-align: center;
    vertical-align: middle;
}

#schedules-table thead tr th {
    border: 1px solid #c8c8c8;
    border-radius: 5px;
    font-weight: 600;
    height: 40px;
}

#schedules-table thead tr th#th-checkbox {
    width: 5%;
}

#schedules-table thead tr th#th-day {
    width: 20%;
}

#schedules-table thead tr th#th-schedule {
    width: 15%;
}

#schedules-table thead tr th#th-actions {
    width: 60%;
}

.schedules-table {
    border-collapse: separate;
    border-spacing: 5px;
    table-layout: fixed;
}

.schedules-table .column-checkbox:hover {
    cursor: pointer;
}

.schedules-table .header-checkbox:hover {
    cursor: pointer;
}

.schedules-table tr.table-row-body {
    background-color: #f2f2f2;
    text-align: center;
    vertical-align: middle;
}

.schedules-table tr.table-row-body td {
    border-radius: 5px;
    height: 40px;
}

.schedules-table tr.table-row-body td.reset-schedule {
    background-color: #C25A5A;
    font-weight: 500;
    color: white;
}

.schedules-table tr.table-row-body td.reset-schedule:hover {
    background-color: #AE4646;
    cursor: pointer;
}

.schedules-table tr.table-row-body td.set-schedule {
    background-color: darkgray;
    font-weight: 500;
    color: white;
}

.schedules-table tr.table-row-body td.set-schedule:hover {
    background-color: gray;
    cursor: pointer;
}

.schedules-table tr.table-row-header {
    background-color: #d9d9d9;
    text-align: center;
    color: #444;
}

.schedules-table tr.table-row-header th {
    border: 1px solid #c8c8c8;
    border-bottom-color: #c8c8c8 !important;
    border-radius: 5px;
    font-weight: 600;
}

.schedules-table tr.table-row-header th:hover {
    cursor: pointer;
}

.schedules-table tr.table-row-header th.all {
    width: 50px;
}

#counters-settings-table {
    border-spacing: 5px;
    border-collapse: separate;
    table-layout: fixed;
}

#counters-settings-table tbody {
    background-color: rgb(242, 242, 242);
    text-align: center;
    vertical-align: middle;
}

#counters-settings-table tbody td {
    border-radius: 5px;
    height: 40px;
}

#counters-settings-table tbody td.reset {
    background-color: #C25A5A;
    font-weight: 500;
    color: white;
}

#counters-settings-table tbody td.reset:hover {
    background-color: #AE4646;
    cursor: pointer;
}

#counters-settings-table tbody td.settings {
    background-color: #5cb85c;
    font-weight: 500;
    color: white;
}

#counters-settings-table tbody td.settings:hover {
    background-color: #4a934a;
    cursor: pointer;
}

#counters-settings-table thead {
    background-color: rgb(217, 217, 217);
    text-align: center;
    color: #444;
}

#counters-settings-table thead th {
    border-radius: 5px;
    border: 1px solid rgb(200, 200, 200);
    font-weight: 600;
}

.custom-bolded-title {
    font-size: 20px;
    color: #4b4a4a;
    font-weight: 700;
    text-decoration: solid;
    letter-spacing: -0.25px;
}

.custom-bootstrap-width {
    width: 75% !important;
}

.custom-card {
    height: 300px;
    background-color: #fff;
    border-radius: 10px;
    padding: 50px 0;
    border: 1px #efefef solid;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transition: 0.2s;
}

.custom-card:hover {
    background-color: #e1f5fe;
    cursor: pointer;
}

.custom-responsive-table {
    border-spacing: 5px;
    border-collapse: separate;
}

.custom-responsive-table tbody {
    background-color: rgb(242, 242, 242);
}

.custom-responsive-table td {
    border-radius: 3px;
    vertical-align: middle;
}

.custom-responsive-table th {
    border-radius: 3px;
    font-weight: 500;
    vertical-align: middle;
}

.custom-responsive-table thead {
    background-color: rgb(217, 217, 217);
}

#custom-table table {
    border-spacing: 5px;
    border-collapse: separate;
}

#custom-table table tbody {
    background-color: rgb(242, 242, 242);
}

#custom-table table td {
    border-radius: 3px;
}

#custom-table table th {
    background-color: rgb(217, 217, 217);
}

#custom-table table thead {
    background-color: rgb(217, 217, 217);
}

.danger-button {
    background-color: #C25A5A;
    color: white;
}

.danger-button:hover {
    background-color: #AE4646;
    color: white;
}

.dark-silver-button {
    background-color: #4a4a4a;
    color: white;
}

.dark-silver-button:hover {
    background-color: #3a3a3a;
    color: white;
}

.dropdown-item {
    color: #111111;
    font-weight: 400;
}

.form-switch .form-check-input:checked {
    background-color: rgb(52, 199, 89);
    border-color: transparent;
    width: 44px;
    height: 27px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.5' fill='white'/%3e%3c/svg%3e") !important;
}

.form-switch .form-check-input:not(:checked) {
    background-color: #E9E9EA;
    border-color: transparent;
    width: 44px;
    height: 27px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.5' fill='white'/%3e%3c/svg%3e") !important;
}

#header-checkbox {
    cursor: pointer;
}

#header-checkbox-cell {
    cursor: pointer;
}

html {
    font-size: 16px;
    position: relative;
    min-height: 100%;
}

.inactive-button {
    background-color: #fff;
    color: red;
    padding: 2px 5px;
    border-radius: 5px;
}

.info-small-button {
    color: blue;
    cursor: pointer;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 5000s ease-in-out 0s;
}

input[data-autocompleted] {
    background-color: transparent !important;
}

input[data-readonly] {
    pointer-events: none;
}

.is-invalid + .select2-container--bootstrap .select2-selection--single {
    border-color: #dc3545 !important;
}

.is-valid + .select2-container--bootstrap .select2-selection--single {
    border-color: #28a745 !important;
}

.light-silver-button {
    background-color: #F2F2F2;
    color: black;
}

.light-silver-button:hover {
    background-color: #DEDEDE;
    color: black;
}

.light-silver-button-outlined {
    background-color: #F2F2F2;
    color: black;
    border: 1px solid #B6B4B4;
}

.light-silver-button-outlined:hover {
    background-color: #DEDEDE;
    color: black;
}

.login-image {
    height: 175px;
    border-radius: 25px;
}

.login-option {
    background-color: #f5fcfb;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.login-option #auth-reset {
    color: #3672C0;
    text-decoration: none;
}

.login-option .auth-title {
    color: #3498db;
    font-size: 19px;
    font-weight: 400;
}

.login-option label {
    color: #6E7177;
}

.login-option #toggle-password-container {
    cursor: pointer;
}

.login-option #toggle-repeat-password-container {
    cursor: pointer;
}

.ml-1 {
    margin-left: 2px;
}

.ml-2 {
    margin-left: 4px;
}

.ml-3 {
    margin-left: 8px;
}

.ml-4 {
    margin-left: 16px;
}

.ml-5 {
    margin-left: 32px;
}

.mr-1 {
    margin-right: 2px;
}

.mr-2 {
    margin-right: 4px;
}

.mr-3 {
    margin-right: 8px;
}

.mr-4 {
    margin-right: 16px;
}

.mr-5 {
    margin-right: 32px;
}

.my-w-50 {
    width: 50%;
}

.my-w-90 {
    width: 90%;
}

nav ul li {
    color: red;
    display: inline-block;
    padding: 2px 0px;
    text-align: center;
    text-decoration: none;
    margin: 0 10px;
    line-height: 20px;
}

nav ul li a.nav-link.nav-text {
    border-bottom: 3px solid;
    border-color: var(--fore);
    color: var(--fore);
    font-weight: 500;
}

nav ul li a.nav-link.nav-text:active, nav ul li a.nav-link.nav-text:hover {
    border-color: gold;
    color: gold;
}

.nav-tabs.show, .nav-tabs .nav-link.active {
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}

.nav-tabs.show, .nav-tabs .nav-link {
    margin-bottom: -1px;
    background: 0 0;
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.nav-tabs-calendar .nav-item.show .nav-link, .nav-tabs-calendar .nav-link {
    color: #454545;
    font-weight: 500;
}

.nav-tabs-calendar .nav-item.show .nav-link, .nav-tabs-calendar .nav-link.active {
    color: #1881C3;
    font-weight: 500;
}

.navbar-brand {
    color: #f8f8f8;
    font-weight: 500;
}

.no-top-border {
    border-top: 0 !important;
}

.orange-button {
    background-color: #EEA45F;
    color: white;
}

.orange-button:hover {
    background-color: #d08f52;
    color: white;
}

#pdf-data-privacy-guideline-file {
    cursor: pointer;
}

#pdf-reservation-guideline-file {
    cursor: pointer;
}

.pdf-reservation-guideline-link {
    font-weight: bold;
    text-decoration: underline;
}

.pdf-data-privacy-guideline-link {
    font-weight: bold;
    text-decoration: underline;
}

.resend-email-for-clerk-button {
    background-color: deepskyblue;
    color: #fff;
    padding: 2px 5px;
    border-radius: 5px;
    cursor: pointer;
}

#resend-email-for-tenant-admin-button {
    cursor: pointer;
    font-weight: 600;
    color: red;
    text-decoration: underline;
}

.reservation-confirmed-uploaded-documents {
    background-color: #f5fcfb;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.reservation-confirmed-uploaded-documents .card {
    cursor: pointer;
}

.reservation-submitted-image {
    max-width: 100%;
}

.reservations-search-wrapper {
    background-color: var(--theme);
    color: var(--fore);
    cursor: pointer;
}

.reset-password-container {
    background-color: #f5fcfb;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.reset-password-container #back-to-login {
    color: #3672C0;
    text-decoration: none;
}

.reset-password-container label {
    color: #6E7177;
}

.reset-password-image {
    height: 175px;
    border-radius: 25px;
}

.responsive-image {
    max-width: 100%;
}

.responsive-text {
    font-size: 100%;
}

.responsive-title {
    font-size: 150%;
}

.row-checkbox {
    cursor: pointer;
}

.row-checkbox-cell {
    cursor: pointer;
}

.schedule-slot {
    cursor: pointer;
}

.schedule-slot:hover {
    background-color: #d9d9d9;
}

.select-action {
    width: 200px;
}

.silver-button {
    background-color: #B6B4B4;
    color: white;
}

.silver-button:hover {
    background-color: #969696;
    color: white;
}

.silver-button-outlined {
    background-color: #B6B4B4;
    color: white;
    border: 1px solid #8E8C8C;
}

.silver-button-outlined:hover {
    background-color: #969696;
    color: white;
}

.small-description {
    font-size: 86%;
}

.small-font {
    font-size: 80%;
}

.small-input-1 {
    width: 10%;
}

.small-input-2 {
    width: 20%;
}

.tenant-card-header {
    cursor: pointer;
    transition: 0.3s;
}

.tenant-card-header:hover {
    background-color: #E6E6E6;
}

#tenant-logo-image {
    cursor: pointer;
}

.terms-checkbox {
    flex: 0 0 auto;
}

.terms-container {
    display: flex;
    align-items: start;
    font-size: 12px;
    text-align: justify;
    padding-left: 0;
}

.terms-container > input, label {
    cursor: pointer;
}

textarea.is-invalid {
    border-color: #dc3545 !important;
}

textarea.is-valid {
    border-color: #28a745 !important;
}

.text-blue {
    color: #1F85DE;
}

.text-dark-gray {
    color: #555;
}

.text-footer {
    font-size: 15px;
    font-weight: 500;
}

.text-important {
    background-color: #f0ad4e;
}

.text-intro {
    font-size: 12px;
}

.text-intro-md {
    font-size: 13px;
}

.text-intro-wrapper {
    background-color: #efefef;
    padding: 10px;
    color: #444;
    font-size: 12px;
}

.text-large {
    font-size: 20px;
}

.text-navy {
    color: #8BA2DB;
}

.text-red {
    color: red;
}

.text-strike {
    text-decoration: line-through;
}

.text-terms {
    font-size: 12px;
    text-align: justify;
    margin: 1px;
}

.text-terms > input, label {
    cursor: pointer;
}

.text-theme {
    color: var(--fore);
}

.update-notes {
    cursor: pointer;
    font-size: 115%;
}

.user-resend-email-button {
    background-color: deepskyblue;
    color: #fff;
    padding: 2px 5px;
    border-radius: 5px;
    cursor: pointer;
}

.vertical-align-center {
    vertical-align: middle;
}

.warning-button {
    background-color: #d6a52a;
    color: white;
}

.warning-button:hover {
    background-color: #b38b28;
    color: white;
}

.was-validated .jquery-select:invalid + .select2 .select2-selection {
    border-color: #dc3545 !important;
}

.was-validated .jquery-select:valid + .select2 .select2-selection {
    border-color: #28a745 !important;
}

@media only screen and (max-width: 1399px) {
    #schedules-table thead tr th#th-checkbox {
        width: 5%;
    }

    #schedules-table thead tr th#th-day {
        width: 20%;
    }

    #schedules-table thead tr th#th-schedule {
        width: 20%;
    }

    #schedules-table thead tr th#th-actions {
        width: 45%;
    }
}
/*
    This media query only works for the devices with a width less than 1199 pixels (laptops, small screens, etc).
    Again, please add the desired selectors in alphabetical order to keep a well organized code structure.
*/

@media only screen and (max-width: 1199px) {
    .calendar-custom-title {
        font-size: 20px;
        text-align: center;
    }

    nav ul li {
        border: 1px solid #ddd;
        margin: 5px;
    }

    .nav-tabs .nav-item .nav-link {
        color: #495057;
        background-color: #fff;
        border-color: #dee2e6;
        width: 100%;
        text-align: center;
    }

    .nav-tabs .nav-item .nav-link.active {
        color: #1881C3;
        font-weight: 500;
        background-color: #efefef;
        border-color: #dee2e6;
    }

    #schedules-table thead tr th#th-checkbox {
        width: 5%;
    }

    #schedules-table thead tr th#th-day {
        width: 18%;
    }

    #schedules-table thead tr th#th-schedule {
        width: 18%;
    }

    #schedules-table thead tr th#th-actions {
        width: 59%;
    }

    .text-intro-wrapper {
        text-align: center;
    }

    .text-large {
        font-size: 18px;
    }

    ul.navbar-nav {
        background-color: var(--theme);
        color: var(--fore);
        position: relative;
        z-index: 10;
    }

    ul.navbar-nav > .nav-item > a.nav-link {
        color: #fff;
    }

    ul.navbar-nav > li > div.dropdown-menu {
        background-color: var(--theme);
        color: var(--fore);
        text-align: center;
        border: 0;
    }

    ul.navbar-nav > li > div.dropdown-menu > div.dropdown-divider {
        display: none;
    }

    ul.navbar-nav > li > div.dropdown-menu > a.dropdown-item {
        font-weight: 500;
        color: #fff;
        border-top: 1px solid #fff;
        padding-top: 12px;
        padding-bottom: 8px;
    }
}

/*
    This media query only works for the devices with a width less than 992 pixels (laptops, small screens, etc).
    Again, please add the desired selectors in alphabetical order to keep a well organized code structure.
*/

@media only screen and (max-width: 992px) {
    .custom-card {
        height: 250px;
    }

    .custom-responsive-data-table {
        border-spacing: 0;
    }

    .custom-responsive-data-table td {
        display: block;
        font-size: 1em;
    }

    .custom-responsive-data-table thead tr {
        display: none;
    }

    .custom-responsive-data-table tr {
        display: block;
    }

    .custom-responsive-table {
        border: 1px solid #c8c8c8;
        border-radius: 1px;
        border-spacing: 0;
    }

    .custom-responsive-table td {
        display: block;
        font-size: 1em;
        padding: 5px;
        text-align: right;
    }

    .custom-responsive-table td::before {
        content: attr(data-title) ":";
        float: left;
    }

    .custom-responsive-table thead tr {
        display: none;
    }

    .custom-responsive-table tr {
        display: block;
        padding: 5px;
    }

    .custom-responsive-table tr:nth-child(even) {
        background-color: #d9d9d9;
    }

    .my-w-50 {
        width: 100%;
    }

    #schedules-table thead tr th#th-checkbox {
        width: 10%;
    }

    #schedules-table thead tr th#th-day {
        width: 30%;
    }

    #schedules-table thead tr th#th-schedule {
        width: 30%;
    }

    #schedules-table thead tr th#th-actions {
        width: 30%;
    }

    .schedules-table {
        border-spacing: 0;
    }

    .schedules-table tr.table-row-header {
        background-color: transparent;
        border-radius: 5px;
    }

    .schedules-table tr.table-row-body {
        background-color: transparent;
        border-radius: 5px;
    }

    .schedules-table tr.table-row-header th {
        background-color: #d9d9d9;
        height: 50px;
    }

    .schedules-table tr.table-row-header th.all {
        width: 100%;
    }

    .schedules-table tr.table-row-body td {
        background-color: #d9d9d9;
        height: 50px;
    }

    .schedules-table td, .schedules-table th {
        display: block;
        margin-bottom: 7px;
    }

    .schedules-table tr {
        display: block;
        float: left;
        padding: 5px;
        width: 25%;
    }

    .schedules-table tr.table-row-body-set td {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .schedules-table tr.table-row-body-day td#remove-slots-button {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .schedules-table tr.table-row-body-reset td {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/*
    This media query only works for the devices with a width less than 767 pixels (tablets, iPads, etc).
    Again, please add the desired selectors in alphabetical order to keep a well organized code structure.
*/
@media only screen and (max-width: 767px) {
    #access-denied-image {
        max-width: 75%;
    }

    .breadcrumb-generic h1 {
        font-weight: 400;
        font-size: 150%;
    }

    .breadcrumb-generic h2 {
        font-weight: 400;
        font-size: 140%;
    }

    .calendar-custom-title {
        font-size: 18px;
        text-align: center;
    }

    .custom-bootstrap-width {
        width: 100% !important;
    }

    html {
        font-size: 16px;
    }

    #schedules-table {
        font-size: 80%;
    }

    .schedules-table tr {
        padding: 2px;
    }

    .text-large {
        font-size: 85%;
    }
}

/*
    This media query only works for the devices with a width less than 575 pixels (smartphones, smartwatches, etc).
    Again, please add the desired selectors in alphabetical order to keep a well organized code structure.
*/

@media only screen and (max-width: 575px) {
    .alert-container {
        font-size: 90%;
    }

    .application-in-progress-image {
        max-width: 75%;
    }

    .breadcrumb-generic h1 {
        font-weight: 400;
        font-size: 130%;
    }

    .breadcrumb-generic h2 {
        font-weight: 400;
        font-size: 120%;
    }

    .breadcrumb-generic span {
        font-size: 90%;
    }

    .custom-bootstrap-width {
        width: 100% !important;
    }

    .form-check-label {
        font-size: 85%;
    }

    .my-w-90 {
        width: 100%;
    }

    .nav-tabs-calendar {
        display: block;
        width: 100%;
        text-align: center;
    }

    .no-top-border {
        border-top: 1px solid #ddd !important;
        margin-top: 1.5rem;
    }

    .responsive-text {
        font-size: 85%;
    }

    .responsive-title {
        font-size: 100%;
    }

    #schedules-table {
        font-size: 60%;
    }

    #schedules-table thead tr th#th-checkbox {
        width: 10%;
    }

    #schedules-table thead tr th#th-day {
        width: 20%;
    }

    #schedules-table thead tr th#th-schedule {
        width: 50%;
    }

    #schedules-table thead tr th#th-actions {
        width: 20%;
    }

    .schedules-table tr {
        padding: 1px;
    }

    .schedules-table tr.table-row-header {
        width: 25%;
    }

    .schedules-table tr.table-row-body-day {
        width: 45%;
    }

    .schedules-table tr.table-row-body-set {
        width: 15%;
    }

    .schedules-table tr.table-row-body-reset {
        width: 15%;
    }

    .text-footer {
        font-size: 12px;
    }

    .text-intro {
        font-size: 12px;
        text-align: center;
    }
}
