/* General Styling */

html, body, main {
    height: 100%;
    width: 100%;
}

#page_body {
    background: url("../../images/subtle-prism.svg");
    font-family: 'Roboto', sans-serif;
}

.table-container {
    background-color: #fff;
    max-height: 500px;
    overflow: auto
}

.debug-strip {
    box-shadow: 0px 0px 10px inset white;
    background: repeating-linear-gradient( 45deg, #ffd800, #ffd800 10px, #000000 10px, #000000 20px );
}

.debug-text {
    background: rgba(0,0,0,.8);
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-family: Copperplate,fantasy;
    animation: fade 1s linear infinite alternate;
}

/* Sidebar & Offcanvas */

#sidebar {
    position: fixed;
    height: 70px;
    width: 100%;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.75);
    background-color: #142D55;
    z-index: 1040;
}

#profileIcon {
    border-radius: 23px;
}

#profileName {
    color: greenyellow;
    background: rgba(0, 0, 0, 0.6);
    transition: all .2s ease-out;
}

#profileImage:hover #profileName {
    opacity: 0
}

#logo {
    transition: all .2s ease-out;
}

#logo:hover {
    box-shadow: inset 0 0 10px grey;
}

.offcanvas {
    background-color: #142D55 !important;
}

.offcanvas-header {
    max-height: 180px;
    border-bottom: 1px solid grey;
}

#refresh_area {
    display: none;
}

#refresh_area.active {
    display: flex;
}

#refresh_button {
    transition: all .2s ease-out;
}

.navtile {
    width: 46px;
    height: 46px;
}

.navsvg {
    width: 44px;
    height: 44px;
}

/* Badges */

.day-badge-width {
    min-width: 30px;
}

.badge-builder > .badge {
    border-radius: 0;
}

.badge-builder > .badge:first-child {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.badge-builder > .badge:last-child {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

/* Icons */

.mini-icon {
    width: 12px;
    height: 12px;
}

.small-icon {
    width: 20px;
    height: 20px;
}

.medium-icon {
    width: 40px;
    height: 40px;
}

.huge-icon {
    width: 350px;
    height: 350px;
}

/* Scrollbar */

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px grey;
    border-radius: 4px;
    background: none;
}

::-webkit-scrollbar-thumb {
    border: 4px solid transparent;
    border-radius: 9px;
    background: #808080;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    border: 3px solid transparent;
    border-radius: 11px;
    background: #909090;
    background-clip: content-box;
}

::-webkit-scrollbar-corner {
    box-shadow: inset 0 0 2px grey;
    border-radius: 2px;
    background: none;
}

/* BG-Colors & Darkmode */
.accordion-body {
    background-color: #e7f1ff;
}

.bg-darkmode {
    background-color: #f8f9fa;
}

#page_body.dark {
    background: url("../../images/subtle-prism-dark.svg");
}

.dark .form-control, .dark .form-select, .dark .form-control:read-only, .dark .form-control:disabled, .dark textarea, .dark .input-group-text, .dark .accordion-button, .dark .accordion-button:not(.collapsed), .dark .list-group-item, .dark .popover-body {
    background-color: #343a40;
    color: #dee2e6;
}

.dark main form, .dark .card, .dark .swal2-popup, .dark .swal2-popup.swal2-toast, .dark .table-container, .dark .popover-header, .dark .popover {
    background-color: #212529;
}

.bg-gray, .dark .bg-darkmode, .dark .card-footer, .dark .accordion-body {
    background-color: #343a40;
}

.dark .swal2-title, .dark .swal2-content {
    color: #dee2e6;
}

.dark .popover {
    border-color: rgba(255,255,255,.2);
}

.dark .popover-header {
    border-bottom-color: rgba(255,255,255,.2);
}

.dark .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.dark .day-badge, .dark .time-badge {
    color: #fff !important;
}

.dark .time-badge {
    border-color: #f8f9fa !important;
}

.dark .date-badge {
    color: #212529;
    background-color: #f8f9fa !important;
    border-color: #f8f9fa !important;
}

/* Animations */

@keyframes fade {
    from {
        color: yellow;
    }
    to {
        color: rgba(0, 0, 0, 0);
    }
}