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

@font-face {
    font-family: 'Montserrat';
    src: url('../assets/fonts/MontserratBold.ttf'), url('../assets/fonts/MontserratSemiBold.ttf') format('truetype');
}

body {
    background-color: rgb(237, 242, 244);
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 2rem;
    position: relative;
}

html {
    font-family: 'Montserrat', sans-serif;
    font-size: 62.5%;
    font-weight: 600;
    scroll-behavior: smooth;
    color: rgb(25, 17, 43);
}

main {
    padding: 0 2rem; 
    width: 100%;
    max-width: 100rem;
    margin: 0 auto;
}

.logo { width: 5rem; }

.text { font-size: 1.8rem; }
.text--bold { font-weight: bold; }
.text--mid { font-size: 2.2rem; }
.text--big { font-size: 2.7rem; }
.text--center { text-align: center; }
.text--error { color: rgb(197, 43, 43); }

.opacity08 { opacity: .8; }

.flex { display: flex; }
.flex--center { align-items: center; justify-content: center; }
.flex--column { flex-direction: column; }
.gap05 { gap: .5rem; }
.gap1 { gap: 1rem; }
.gap15 { gap: 1.5rem; }
.gap2 { gap: 2rem; }
.gap3 { gap: 3rem; }

.grid { display: grid; } 
.grid1x2 { grid-template-columns: 1fr 1fr; }

header {
    background-color: rgb(25, 17, 43);
    color: rgb(237, 242, 244);
    width: 100%;
    padding: 1.5rem 1rem;
    box-shadow: 0 1rem 1rem rgba(25, 17, 43, .2);
    position: relative;
}

.card {
    border: .2rem solid rgb(25, 17, 43);
    border-radius: .5rem;
    padding: 2rem;
    fill: rgb(25, 17, 43);
    cursor: pointer;
    user-select: none;
    height: 100%;
}

.card svg { fill: inherit; width: 6rem; }
.activeCard { background-color: rgb(25, 17, 43); color: rgb(237, 242, 244); fill: rgb(237, 242, 244);}

.link--none { color: inherit; text-decoration: none; }

form { 
    display: flex;
    flex-direction: column;
    max-width: 50rem;
    margin: 0 auto;
    padding: 2rem;
}
.formn--none {
    padding: 0;
}
form div {
    display: grid;
    grid-template-columns: minmax(6rem, 12rem) 1fr;
    gap: .5rem;
    align-items: center;
}
form label {
    margin-right: .5rem;
    width: 12rem;
    text-align: right;
    display: inline-block;
}
form input {
    border: none;
    border-bottom: .2rem solid rgb(25, 17, 43);
    background-color: transparent;
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    padding: .3rem .6rem .1rem;
}
form textarea,
textarea {
    resize: none;
    border: none;
    border-bottom: .2rem solid rgb(25, 17, 43);
    background-color: transparent;
    color: inherit;
    font-family: inherit;
    padding: .1rem 0;
    width: 100%;
    height: 20vh;
}
.input__date {
    max-width: 15rem;
    font-family: inherit;
    font-weight: inherit;
    border: none; border-bottom: .2rem solid rgb(25, 17, 43);
    background-color: transparent;
    margin: 0 auto;
    padding: .2rem 0;
    cursor: pointer;
}
.input__hidden {
    opacity: 0;
    border: none;
    position: absolute;
    pointer-events: none;
}
.input__hidden:first-child { left: 2rem; }
.input__hidden:last-child { right: 2rem; }

.input--small { max-width: 15rem; }
.input--big { width: 100%; max-width: 35rem; }
.readonly {
    text-align: center;
    background-color: rgb(215, 215, 215);
    border-top-left-radius: .5rem; 
    border-top-right-radius: .5rem;
}
form button {
    border: .2rem solid rgb(25, 17, 43);
    background-color: rgb(25, 17, 43);
    color: rgb(237, 242, 244);
    font-family: inherit;
    font-weight: inherit;
    padding: .6rem 1rem;
    border-radius: .5rem;
    cursor: pointer;
}
.button--secondary { border: .1rem solid rgb(25, 17, 43); color: rgb(25, 17, 43); background-color: rgb(237, 242, 244); }
.button--inverted { background-color: rgb(237, 242, 244); color: rgb(25, 17, 43); border: none; }
.button--delete { background-color: rgb(237, 242, 244); fill: rgb(204, 36, 36); width: 3rem; height: 3rem; }
.button--none { padding: 0; border: none; background-color: transparent; }
table {
    border-collapse: collapse;
    border: .1rem solid rgb(25, 17, 43);
}
tr { min-height: 5rem; }
tr:nth-child(odd) { background-color: rgba(190, 230, 247, 0.7); }
th, td { border: .1rem solid rgb(25, 17, 43); font-size: 1.6rem; padding: .4rem .2rem; }
td { text-align: center; }
.cell { max-width: 20rem; }
.cellReserved { background-color: rgb(87, 190, 74); user-select: none; cursor: pointer; }
.cellReserved--nobg { user-select: none; cursor: pointer; }
.cellEmpty { cursor: pointer; }
.plus { fill: rgb(25, 17, 43); width: 2rem; height: 2rem; }
.arrow { fill: rgb(25, 17, 43); width: 4rem; height: 4rem; }
#addBox {
    position: fixed;
    top: 50%; left: -120%;
    transform: translate(-50%, -50%);
    border-radius: 1rem;
    background-color: rgb(237, 242, 244);
    width: calc(100% - 4rem);
    max-width: 50rem;
    z-index: -200;
    transition: all .3s;
}
#editBox {
    position: fixed;
    top: 50%; left: -120%;
    transform: translate(-50%, -50%);
    border-radius: 1rem;
    background-color: rgb(237, 242, 244);
    width: calc(100% - 4rem);
    max-width: 50rem;
    z-index: 200;
    transition: all .3s;
    padding: 2rem;
}
#overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0; left: -120%;
    background-color: rgba(0, 0, 0, .65);
    z-index: -100;
    transition: all .3s;
    cursor: pointer;
}
#logout {
    padding: .5rem 1rem .5rem .5rem;
    background-color: rgb(244, 40, 40);
    position: fixed;
    top: .7rem; right: -5.5rem;
    cursor: pointer;
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
    transition: all .3s;
}
#logout:hover { right: 0; }
#logout--icon {
    width: 4rem; height: 4rem;
    fill: rgb(237, 242, 244);
    color: rgb(237, 242, 244);
}
footer { padding: 2rem .2rem; }