/* Base Styles */
body {
    background: orange;
}

div.screen {
    background: #F2F2F2;
    min-height: 100vh;
    width: 100vw;
}

aside.menu.sidebar {
    background: white;
    height: 100vh;
    left: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1vh;
    padding-bottom: 1vh;
    position: fixed;
    top: 0;
    width: 190px;
}

@media (max-width: 767px) { /* Mobile */
     div.primary-container {
        align: center;
        width: 100vw;
    }

    .login-container,
    .home-container,
    .school-container,
    .person-container,
    .competition-container,
    .division-container,
    .search-container {
        background-color: white;
        margin-left: auto;
        margin-right: auto;
        margin-top: 7vh;
        padding-bottom: 1vh;
        padding-left: 1vw;
        padding-right: 1vw;
        padding-top: 2vh;
        height: 100vh;
        width: 100vw;
    }

    .login-container {
        padding-top: 20vh;
    }
}

@media (min-width: 768px) { /* Desktop */
    div.primary-container {
        padding-left: 1vw;
        padding-right: 1vw;
        padding-top: 1vh;
        padding-bottom: 1vh;
        align: center;
        width: 100vw;
    }

    .login-container,
    .home-container,
    .school-container,
    .person-container,
    .competition-container,
    .division-container,
    .search-container {
        background-color: white;
        min-height: 80vh;
        margin-left: auto;
        margin-right: auto;
        margin-top: 7vh;
        padding-bottom: 1vh;
        padding-left: 1vw;
        padding-right: 1vw;
        padding-top: 2vh;
        max-width: 1080px;
    }

    .login-container {
        padding-top: 15vh;
    }
}

hr {
    background-color: rgba(34,36,38,.15);
    color: rgba(0,0,0,.85);
}

ul.bullets {
    list-style-type: disc !important;
}

.sticky {
    background-color: white;
    position: sticky;
    top: 0;
}

.scrollable {
    overflow-y: scroll;
}
.scrollable::-webkit-scrollbar {
    display: none;
}

.competition-division-table {
    max-height: 50vh;
}

.competition-participants.columns,
.competition-schools.columns {
    max-height: 35vh;
}

.inline {
    display: inline;
}

div.grid.shadowed .cell {
    border-radius: .75rem;
    border: 1.5px solid rgba(34, 36, 38, .20);
    box-shadow: rgba(9, 10, 12, 0.3) 0px 2px 4px -1px, rgba(9, 10, 12, 0.02) 0px 0px 0px 1px;
}

/* Search Styles */
.rank-color {
    border-style: solid;
    border-width: .5px;
    display: inline-block;
    height: 15px;
    margin-bottom: -2px;
    margin-right: 8px;
    width: 15px;
}

.search-container .table-container {
    max-height: 70vh;
}

.card.score-card-clickable {
    height: 50vh;
    touch-action: none;
}

/* Modal Styles */
.modal .modal-card .modal-card-foot {
    justify-content: flex-end;
}

/* Input Styles */
.field > .control > .checkbox {
    display: flex;
    height: 32px;
}

.field > .control > .checkbox > input[type=checkbox] {
    height: 24px;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 10px;
    width: 24px;
}

.field > .control > .checkbox > span.checkbox-label {
    margin-top: auto;
    margin-bottom: auto;
}

/* Tag Styles */
span.tag.division-match {
    height: auto !important;
    min-width: 100px;
}

/* Text styles */
.strike-through {
    text-decoration: line-through
}

.winner-shadow {
    text-shadow: 2px 2px 5px green;
}

/* Test Styles */
.default-error {
    margin-top: 40vh;
}

/* Registration Styles */

#registration-form {
    margin-bottom: 2vh;
}

@media (max-width: 767px) { /* Mobile */
    .registration-container {
        background-color: white;
        min-height: 100vh;
        padding-bottom: 1vh;
        padding-top: 2vh;
    }

    .navbar-logo {
        max-height: 5vh;
        margin-left: 2vw;
        margin-right: 2vw;
    }

    .navbar-title {
        margin-top: auto;
        margin-bottom: auto;
    }
    .navbar-title > .title {
        font-size: 1.25rem;
    }
    .navbar-title > .subtitle {
        font-size: 1.0rem;
    }

    .registration-container .registration-sub-container > #registration-form > .signature.modal > .modal-card {
        width: 100vw;
    }

    .registration-container .registration-sub-container > #registration-form #signature {
        border: solid black 1px;
        height: 12vh;
        width: 100%;
    }
}

@media (min-width: 768px) { /* Desktop */
    .registration-container {
        background-color: white;
        min-height: 98vh;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 1vh;
        padding-top: 2vh;
        max-width: 70vw;
    }

    .navbar-logo {
        max-height: 10vh;
        margin-left: 2vw;
        margin-right: 2vw;
    }

    .navbar-title {
        margin-top: auto;
        margin-bottom: auto;
    }

    #registration-form .field.is-horizontal .field-body .field {
        width: 50%;
    }

    .registration-container .registration-sub-container > #registration-form > .signature.modal > .modal-card {
        width: 45vw;
    }

    .registration-container .registration-sub-container > #registration-form #signature {
        border: solid black 1px;
        height: 12vh;
        width: 40vw;
    }
}

.registration-container > .navbar {
    margin-bottom: 2vh;
}

.registration-sub-container {
    padding-left: 3vw;
    padding-right: 3vw;
}

.registration-container .competition-info {
    margin-top: 2vh;
}

.registration-container .competition-info table td {
    border: none;
    margin: 0px;
    padding: 0px;
}

.registration-container .competition-info table td:first-child {
    padding-right: 1vw;
}