/* --------------------------- */
/* Main website color
/* --------------------------- */

:root {
    /* Change here the website main color */
    /* --main-color: #263238; */
    --main-color : #7852a9;
    --main-color-trans: rgba(38, 50, 56, 0.95);
    --main-color-light: #8f76af;
    --main-color-extra-light: #bba7d4;
    --main-color-dark: #422d5e;
    --main-color-extra-dark: #2f1f42;
    --main-color-hover: #7c5de1;
    --main-background-color: #ffffff;
    --text-main-color: white;
}

/* --------------------------- */
/* Global
/* --------------------------- */

body {
    background-color: var(--main-background-color);
    font-family: 'Quicksand', sans-serif;
}

main {
    top: 0;
}

strong {
    font-weight: bold;
}

a.classic:hover {
    text-decoration: underline;
}

.font-montserrat {
    font-family: 'Montserrat', sans-serif !important;
}

.font-muli {
    font-family: 'Muli', sans-serif !important;
}

/* --------------------------- */
/* Colors
/* --------------------------- */

.text-main-color {
    color: var(--main-color) !important;
}

.text-main-text-color {
    color: var(--text-main-color) !important;
}

.text-main-color-hover {
    color: var(--main-color-hover) !important;
}

.main-color {
    background-color: var(--main-color) !important;
}

.main-color-extra-light {
    background-color: var(--main-color-extra-light) !important;
}

.main-color-light {
    background-color: var(--main-color-light) !important;
}

.main-color-extra-dark {
    background-color: var(--main-color-extra-dark) !important;
}

.main-color-dark {
    background-color: var(--main-color-dark) !important;
}

.main-background-color {
    background-color: var(--main-background-color) !important;
}

.main-color-trans {
    background-color: var(--main-color-trans) !important;
}

.main-color-border {
    border-color: var(--main-color) !important;
}

.custom-control-input:checked ~ .checkbox-main-color.custom-control-label::before {
    color: var(--text-main-color) !important;
    border-color: var(--main-color) !important;
    background-color: var(--main-color) !important;
}

.btn-outline-main-color {
    border: 2px solid var(--main-color) !important;
    background-color: transparent !important;
    color: var(--main-color) !important;
}

.btn-main-color {
    background-color: var(--main-color) !important;
    color: var(--text-main-color) !important;
}

.border-main-color {
    border-color: var(--main-color);
}

/* --------------------------- */
/* Website default background
/* --------------------------- */

div.default-background-img {
    background-image: url('/storage/img/background.jpg');
    filter: blur(10px);
    -webkit-filter: blur(10px);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
}

/* --------------------------- */
/* Website constants
/* --------------------------- */

:root {
    --navbar-height: 56px;
    --screen-height: calc(100vh - 56px);
    --action-header-height: 5em;
}

/* --------------------------- */
/* Navbar
/* --------------------------- */

#navbar-computer .nav-link {
    font-family: 'Muli', sans-serif !important;
    font-weight: 900;
    transition: 0.3s;
}

.nav-link:not(.dropdown-toggle) {
    color: #a4a4a4 !important;
}

.nav-link.dropdown-toggle {
    color: #474747 !important;
}

.nav-link:hover {
    color: var(--main-color-hover) !important;
}

nav .lang-flag {
    width: 25px;
    height: 17px;
}

#navbar-mobile .nav-item {
    margin-left: 2vw;
    margin-right: 2vw;
}

.navbar .dropdown-menu a:hover i {
    color: var(--main-color-hover);
}

.navbar .nav-link:hover i {
    color: var(--main-color-hover);
}

#login-btn {
    color: var(--main-color) !important;
}

#login-btn:hover {
    color: var(--text-main-color) !important;
    background-color: var(--main-color) !important;
}

/* --------------------------- */
/* Footer
/* --------------------------- */

#before-footer {
    min-height: 100vh;
}

footer button.btn.btn-link {
    color: white !important;
}

/* --------------------------- */
/* Cookies
/* --------------------------- */

#accept-cookies button.btn.btn-link {
    color: white !important;
}

#accept-cookies a {
    text-decoration: underline !important;
}

/* --------------------------- */
/* Modals
/* --------------------------- */

body.modal-open {
    overflow-x: hidden !important;
}

.modal-dialog .modal-header,
.modal-dialog .modal-footer {
    border: none;
}

.modal-dialog div {
    border-radius: 0 !important;
}

.modal-dialog .modal-body {
    max-height: 60vh;
    overflow-y: scroll;
}

.modal .close {
    font-family: Roboto, sans-serif;
}

.modal-dialog.modal-notify.modal-main-color .modal-header {
    background-color: var(--main-color);
    color: var(--text-main-color);
}

.modal-rounded .modal-content {
    border-radius: 30px !important;
}

.modal-rounded .modal-header {
    border-radius: 30px 30px 0 0 !important;
}

/* --------------------------- */
/* Switch
/* --------------------------- */

.night-switch-wrap {
    cursor: pointer;
    background: #383e4f;
}

.night-switch-wrap.disabled {
    background: #292b3a;
}

.night-switch-wrap.switch-sm {
    padding: 1px;
    width: 34px;
    height: 18px;
    border-radius: 9px;
    transform: translateY(1px);
}

.night-switch-wrap.switch-md {
    padding: 2px;
    width: 50px;
    height: 27px;
    border-radius: 14px;
    transform: translateY(4px);
}

.night-switch-wrap.switch-lg {
    padding: 3px;
    width: 64px;
    height: 35px;
    border-radius: 18px;
    transform: translateY(7px);
}

.night-switch-wrap input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.night-switch {
    height: 100%;
    display: grid;
    grid-template-columns: 0fr 1fr 1fr;
    transition: 0.2s;
}
.night-switch::after {
    content: '';
    border-radius: 50%;
    background: #e8e8e8;
    grid-column: 2;
    transition: background 0.2s;
}

input:checked + .night-switch {
    grid-template-columns: 1fr 1fr 0fr;
}

input:checked + .night-switch::after {
    background-color: #52cf71;
}

input:checked:disabled + .night-switch::after {
    background-color: #328448;
}

/* --------------------------- */
/* Text indent
/* --------------------------- */

.indent-1 {
     text-indent: 7px;
}

.indent-2 {
    text-indent: 20px;
}

.indent-3 {
    text-indent: 50px;
}

/* --------------------------- */
/* Buttons
/* --------------------------- */

.btn {
    border-radius: 0.25em;
}

.btn-outline.font-weight-bold {
    font-family: 'Montserrat', sans-serif;
}

.btn-invisible {
    border: none;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
}

/* --------------------------- */
/* Font sizes
/* --------------------------- */

.title {
    font-size: calc(1.5em + 1vw);
}

/* --------------------------- */
/* Calendar
/* --------------------------- */

.fc-view-container {
    background-color: white;
    font-family: 'Quicksand', sans-serif;
}

.fc-toolbar button:not(.fc-prev-button):not(.fc-next-button) {
    background-color: var(--main-color) !important;
    color: #fff !important;
    border-radius: 50rem !important;
}

.fc-toolbar.fc-header-toolbar {
    max-width: 100%;
    margin-bottom: 0.5em !important;
}

.fc-view-container .fc-body tbody tr {
    height: 72px;
}

.fc-view-container .fc-body tbody tr td.fc-time span {
    font-size: 18px;
}

.fc-view-container .fc-head thead tr {
    height: 35px;
}

.fc-view-container .fc-head thead tr span {
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
}

.fc-event span {
    font-size: 18px;
    font-weight: normal;
}

.fc-event div {
    font-size: 18px;
    font-weight: bold;
}

.fc-view-container table {
    border-bottom: none;
}

.fc-head-container {
    border: none !important;
    border-bottom: 1px solid #bfbfbf !important;
}

.fc-view-container .fc-day-number {
    height: 30px;
    width: 30px;
    justify-content: center;
    color: var(--main-color);
    font-weight: bolder !important;
}

.fc-view-container .fc-today .fc-day-number {
    background-color: var(--main-color) !important;
    border: none !important;
    color: white !important;
}

.fc-view-container .fc-day-header.fc-active .fc-day-number {
    background-color: #38d32a !important;
    border: none !important;
    color: white !important;
}

.fc-view-container .fc-day-header {
    padding-top: 2px;
}

td.fc-day.fc-today {
    background-color: #ededed;
}

td.fc-day.fc-active {
    background-color: #d9ffcb;
}

.fc-toolbar h2 {
    text-transform: capitalize;
    font-family: 'Quicksand', sans-serif;
    display: inline-block;
    vertical-align: middle;
}

.fc-toolbar {
    padding-left: 4px;
    padding-right: 4px;
}

#calendar-error {
    z-index: 2;
    border: 1px solid black;
}

#calendar-error-content {
    margin-top: 225px;
}

#calendar-error-content h3 {
    font-size: 25px;
}

.fc-prev-button,
.fc-prev-button:hover,
.fc-prev-button:active,
.fc-prev-button:focus,
.fc-next-button,
.fc-next-button:hover,
.fc-next-button:active,
.fc-next-button:focus {
    color: #1b1e21;
    border: none;
    box-shadow: none;
    padding: 0.5em 1em 0.5em 1em;
}

.fc-prev-button,
.fc-next-button {
    background-color: transparent !important;
}

.fc-prev-button:hover,
.fc-next-button:hover {
    background-color: #f0f0f0 !important;
}

.fc-event {
    text-align: center;
}

.fc-event .fc-content {
    padding: 5px;
}

.fc-event .fc-time {
    font-size: 110%;
}

.fc-event .fc-title {
    font-size: 120%;
    line-height: 25px;
    margin-bottom: 15px;
}

/* --------------------------- */
/* Validation
/* --------------------------- */

.error {
    color: var(--danger);
    font-weight: 300;
}

input.invalid,
input:invalid,
select.invalid,
select:invalid {
    border: 1px solid var(--danger);
    box-shadow: 0px 0px 2px var(--danger);
}

/* --------------------------- */
/* Cards
/* --------------------------- */

.card-footer {
    bottom: 0;
    width: 100%;
}

.card-small {
    width: 100%;
    max-width: 30em;
}

.main-card {
    min-height: var(--screen-height);
    box-shadow: none;
}

.action-header + .main-card,
.action-header + * .main-card {
    min-height: calc(var(--screen-height) - var(--action-header-height));
}

/* --------------------------- */
/* Buttons
/* --------------------------- */

.btn.btn-link {
    color: inherit !important;
}

.btn.btn-rounded {
    border-radius: 50rem;
}

/* --------------------------- */
/* Alerts
/* --------------------------- */

.alert {
    border-radius: 0;
}

.alert-dismissible .close {
    font-family: Roboto, sans-serif;
}

/* --------------------------- */
/* Icons
/* --------------------------- */

.fa-1-5x {
    font-size: 1.35em;
    padding-top: 5px;
}

/* --------------------------- */
/* Rounded
/* --------------------------- */

.rounded-bottom-big {
    border-radius: 0 0 2rem 2rem !important;
}

.rounded-top-big {
    border-radius: 2rem 2rem 0 0 !important;
}

.rounded-right-big {
    border-radius: 0 2rem 2rem 0 !important;
}

.rounded-left-big {
    border-radius: 2rem 0 0 2rem !important;
}

.rounded-pill-right {
    border-radius: 0 50rem 50rem 0 !important;
}

.rounded-pill-left {
    border-radius: 50rem 0 0 50rem !important;
}

/* --------------------------- */
/* Fieldset
/* --------------------------- */

fieldset {
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding: 0.35em 0.75em 0.625em 0.75em;
    border-top: 1px #e2e2e2 groove;
}

fieldset legend {
    width: auto;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 1.3em;
}

fieldset div.fieldset-body {
    background-color: #eeeeee;
    padding: 2em;
}

/* --------------------------- */
/* Action header
/* --------------------------- */

.action-header {
    background-color: var(--main-color);
    color: var(--text-main-color);
    padding-top: 1.6em;
    padding-bottom: 1.6em;
}

.action-header .action-header-text {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: calc(0.6em + 0.7vw);
    margin-bottom: 0;
}

.action-header a {
    white-space: nowrap;
}

/* --------------------------- */
/* Boxes
/* --------------------------- */

.box-warning {
    background-color: #ffd379;
    border-left: 3px solid var(--warning);
    padding: 0.25em 0.5em 0.25em 0.5em;
}

/* --------------------------- */
/* Labels
/* --------------------------- */

label.mb-label {
    font-size: 1em;
    color: #757575;
}

/* --------------------------- */
/* Pre
/* --------------------------- */

pre {
    font-family: 'Quicksand', sans-serif;
    font-size: 100%;
    color: inherit;
    white-space: pre-wrap;
}

/* --------------------------- */
/* Global alert
/* --------------------------- */

#global-alert {
    margin-top: 20px;
    margin-left: 10%;
    width: 80%;
    z-index: 1050;
}

/* --------------------------- */
/* List
/* --------------------------- */

ul.no-dot li {
    list-style-type: none;
}

li.no-dot {
    list-style-type: none;
}

/* --------------------------- */
/* Nav Tabs
/* --------------------------- */

.nav-tabs.flat .nav-link {
    border: none;
    border-radius: 0;
    color: initial;
}

.nav-tabs.flat .nav-link.active {
    border-top: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
    border-left: 1px solid lightgrey;
    background-color: #eeeeee;
}

.tab-content.flat {
    background-color: #eeeeee;
}

/* --------------------------- */
/* Page loader
/* --------------------------- */

.page-loader {
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.6);
    position: fixed;
    padding-top: 32vh;
    z-index: 10000;
}

.page-loader .lds-ring {
    padding-left: 0.6em;
}

.page-loader .message {
    font-size: 1.1em;
    margin-top: 4.5em;
}

/* --------------------------- */
/* Widths
/* --------------------------- */

.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-15 { width: 15%; }
.w-25 { width: 25%; }
.w-35 { width: 35%; }
.w-45 { width: 45%; }
.w-65 { width: 65%; }
.w-75 { width: 75%; }
.w-85 { width: 85%; }
.w-95 { width: 95%; }

/* --------------------------- */
/* Heights
/* --------------------------- */

.h-10 { height: 10%; }
.h-20 { height: 20%; }
.h-30 { height: 30%; }
.h-40 { height: 40%; }
.h-60 { height: 60%; }
.h-70 { height: 70%; }
.h-80 { height: 80%; }
.h-90 { height: 90%; }
.h-15 { height: 15%; }
.h-25 { height: 25%; }
.h-35 { height: 35%; }
.h-45 { height: 45%; }
.h-65 { height: 65%; }
.h-75 { height: 75%; }
.h-85 { height: 85%; }
.h-95 { height: 95%; }