* {
    margin: 0;
    padding: 0;
}

:root {
    --text-color: #584848;
    --input-text-color: #99681e;
    --border-color: black;
    --main-color: #F5EFE3;
    --second-color: #d3bfa0;
    --third-color: #8d7f6d;
    --missing-required-info-color: red;
    /* --text-color: black;
    --input-text-color: #99681e;
    --border-color: green;
    --main-color: lightgreen;
    --second-color: green; */
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

#main-div {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border: thin solid var(--border-color);
    border-radius: 20px;
    background-color: var(--main-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.datepicker-date-display {
    background-color: var(--second-color) !important;
}

.datepicker-date-display .date-text,
.datepicker-date-display,
.year-text {
    color: var(--text-color) !important;
}

.datepicker-cancel,
.datepicker-clear,
.datepicker-today,
.datepicker-done {
    color: var(--second-color) !important;
}

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

.datepicker-table td.is-selected {
    color: var(--text-color);
    background-color: var(--second-color);
}

#select-date-div {
    height: 100%;
    font-family: 'Times New Roman', Times, serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#confirm-date-button, #reload-page-button {
    width: 20%;
    max-width: 20%;
    background-color: var(--second-color);
    font-size: xx-large;
    border: 0;
    border-radius: 30px;
}

#reload-page-button {
    background-color: var(--third-color) !important;
}

#back-to-date-button {
    width: 10%;
    min-height: 5%;
    background-color: var(--second-color);
    font-size: x-large;
    border: 0;
    border-radius: 30px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#select-service-div {
    width: 90%;
    height: 90%;
}

#days {
    width: 100%;
    height: 90%;
    padding-top: 2%;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#days::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.day {
    font-family: 'Times New Roman', Times, serif;
    width: 100%;
    border: thin solid;
    border-radius: 15px;
    margin-bottom: 5%;
    /* font-size: x-large; */
    padding: 5%;
}

.selectable:hover {
    background-color: var(--second-color);
}

.day-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.day-footer {
    display: flex;
    justify-content: right;
}

.expand-day-arrow, .collapse-day-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
}

.services {
    margin-top: 5%;
}

.service {
    border: thin solid;
    border-radius: 15px;
    margin-bottom: 1%;
    padding: 3%;
}

.service-time {
    /* font-size: large; */
}

#back-to-service-button {
    margin-right: auto;
    width: 10%;
    min-height: 5%;
    background-color: var(--second-color);
    font-size: x-large;
    border: 0;
    border-radius: 30px;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#personal-information-div {
    width: 90%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#input-fields {
    font-size: 1rem;
    height: 100%;
    width: 100%;
    border: thin solid var(--border-color);
    overflow-y: scroll;
    padding: 5%;
    margin-top: 2%;
    border-radius: 15px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#input-fields::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.personal-information-input {
    font-weight: bold;
    color: var(--input-text-color);
    border-color: var(--border-color) !important;
}

#input-notes {
    font-weight: bold;
    color: var(--input-text-color);
}

.personal-information-input::placeholder {
    color: var(--second-color);
    font-weight: bold;
}

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

.dropdown-content li:hover {
    background-color: var(--second-color) !important;
}

.dropdown-content li > span {
    color: var(--text-color) !important;
}

.select-wrapper input.select-dropdown {
    font-weight: bold;
    color: var(--input-text-color) !important;
}

.select-wrapper input.select-dropdown:focus {
    border-bottom-color: var(--border-color) !important;
}

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

#submit-request-button {
    background-color: var(--second-color);
    font-size: large;
    border: 0;
    border-radius: 30px;
    padding: 2%;
    margin-top: 2%;
}

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: unset;
    opacity: 1;
    pointer-events: all
}

label {
    font-size: 1rem;
}

#message-div {
    width: 70%;
    height: 50%;
    display: flex;
    flex-direction: column;
}

#message-div-header {
    height: 30%;
    background-color: var(--third-color);
    font-size: 1.7rem;
}

#message-div-body {
    height: 70%;
    background-color: var(--second-color);
    font-size: 1.2rem;
}

#message-div-header, #message-div-body {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    padding: 2%;
}

.missing-required-info {
    color: var(--missing-required-info-color);
}

.missing-required-info-border {
    border: thin solid var(--missing-required-info-color);
}