.dz-upload {
    display: block; 
    background-color: red; 
    height: 10px;
    width: 0%;
}
.btn-oauth-google {
    background:url('../images/btn_google_signin_dark_normal_web.png');
    width:149px;
    height:36px;
    border: 0;
}
.btn-oauth-google:focus {
    background:url('../images/btn_google_signin_dark_focus_web.png');
     border: 0;
}
.btn-oauth-google:active {
    background:url('../images/btn_google_signin_dark_pressed_web.png');
    border: 0;
}
.info-modal {
    z-index: 75;
}
.loading-modal {
    z-index: 100;
}
.modal-backdrop {
    z-index: 10;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 99;
}
.spinner {
  margin: 100px auto;
  width: 100vh;
  height: 100vh;
  text-align: center;
  font-size: 10px;
}
.spinner > div {
  background-color: #fff;
  margin-top:40%;
  height: 100px;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
.glyphicon {
    font-size: 25px;
}
.fa {
    font-size: 25px;
}
.alt-1 {
    background-color: #fafafa;
}
.alt-2 {
    background-color: #e0e0e0;
}
.accent-1, .nav-blue-link {
    background-color: #00326D;
    color:#fff;
}
.accent-2 {
    background-color: #eee;
    color:#000;
}
.accent-3 {
    background-color: #fff;
    color:#000;
}
.color-of-the-year {
    background-color: #BE3455;
}
.title {
    text-transform: uppercase;
}
.btn-hatteras-blue {
  --bs-btn-color: #fff;
  --bs-btn-bg: #00326D;
  --bs-btn-border-color: #00326D;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #51585e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #00326D;
  --bs-btn-disabled-border-color: #00326D;
}
.dashboard-tile {
    width:100%;
    height:100%;
    padding:0px;
}
.dashboard-tile > img {
    width:125px;
    height:125px;
}
.dashboard-tile > span {
    font-weight:bold;
    color:#fff;
    font-size:14px
}
.btn-category-toggle, .category {
    text-shadow: -1px 1px 2px rgba(0, 0, 0, 0.45);
    font-weight: 500;
    transition: none;
    &:not(button:is(:active, :hover), .disabled) {
        background: linear-gradient(
                var(--bs-btn-bg),
                var(--bs-btn-active-bg)
        );
    }
    &.disabled {
        background: var(--bs-btn-disabled-bg);
        color: var(--bs-btn-disabled-color);
        text-shadow: none;
        pointer-events: all !important;
        --bs-btn-disabled-opacity: 1;
    }
}
.sent {
    --bs-btn-bg: #42BB50;
    --bs-btn-color: #fff;
    --bs-btn-border-color: #42BB50;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #42BB50;
    --bs-btn-hover-border-color: #42BB50;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #34933F;
    --bs-btn-active-border-color: #34933F;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #42BB50;
    --bs-btn-disabled-bg: #DBFFE0;
    --bs-btn-disabled-border-color: #42BB50;
}
.errors {
    --bs-btn-bg: #FF6384;
    --bs-btn-color: #fff;
    --bs-btn-border-color: #FF6384;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #FF6384;
    --bs-btn-hover-border-color: #FF6384;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #C5415D;
    --bs-btn-active-border-color: #C5415D;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #FF6384;
    --bs-btn-disabled-bg: #FFE8ED;
    --bs-btn-disabled-border-color: #FF6384;
}
.pages {
    --bs-btn-bg: #9966FF;
    --bs-btn-color: #fff;
    --bs-btn-border-color: #9966FF;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #9966FF;
    --bs-btn-hover-border-color: #9966FF;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7D54CF;
    --bs-btn-active-border-color: #7D54CF;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #9966FF;
    --bs-btn-disabled-bg: #E5D8FF;
    --bs-btn-disabled-border-color: #9966FF;
}
.printed {
    --bs-btn-bg: #FF9F40;
    --bs-btn-color: #fff;
    --bs-btn-border-color: #FF9F40;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #FF9F40;
    --bs-btn-hover-border-color: #FF9F40;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #D07820;
    --bs-btn-active-border-color: #D07820;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #FF9F40;
    --bs-btn-disabled-bg: #ffe2c6;
    --bs-btn-disabled-border-color: #FF9F40;
}
.blocked {
    --bs-btn-bg: #4BC0C0;
    --bs-btn-color: #fff;
    --bs-btn-border-color: #4BC0C0;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4BC0C0;
    --bs-btn-hover-border-color: #4BC0C0;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #349797;
    --bs-btn-active-border-color: #349797;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #4BC0C0;
    --bs-btn-disabled-bg: #E4F2F2;
    --bs-btn-disabled-border-color: #4BC0C0;
}
.emailed {
    --bs-btn-bg: #FCC952;
    --bs-btn-color: #fff;
    --bs-btn-border-color: #FCC952;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #FCC952;
    --bs-btn-hover-border-color: #FCC952;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #CA9823;
    --bs-btn-active-border-color: #CA9823;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #D09300;
    --bs-btn-disabled-bg: #FFEBBD;
    --bs-btn-disabled-border-color: #D09300;
}
.texted {
    --bs-btn-bg: #36A2EB;
    --bs-btn-color: #fff;
    --bs-btn-border-color: #36A2EB;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #36A2EB;
    --bs-btn-hover-border-color: #36A2EB;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2777AD;
    --bs-btn-active-border-color: #2777AD;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #36A2EB;
    --bs-btn-disabled-bg: #d4efff;
    --bs-btn-disabled-border-color: #36A2EB;
}
.fancy-table {
    /*  Always put a fancy table inside of a div that has two children: first, an
        empty div with class left-col-shadow, and then the table itself.
        Also, sizes must be specified for expandable columns. */
    border-collapse: collapse;
    div:has(>&) {
        border-radius: 10px;
        overflow: auto;
        width: fit-content;
        max-width: 100%;
        max-height: 85vh;
        clip-path: content-box;
    }
    * {
        text-align: center;
    }
    td, th, .expandable {
        transition: max-width 0.25s ease-out,
                    min-width 0.25s ease-out,
                    max-height 0.25s ease-out,
                    min-height 0.25s ease-out;
    }
    .expandable .expanded-row {
        box-shadow: #a2aeb9 0 -1px inset;
        padding: 5px 0 5px 0;
    }
    .hidden {
        max-width: 0 !important;
        min-width: 0 !important;
        max-height: 0 !important;
        padding: 0;
        margin: 0;
    }
    tbody {
        background-color: #001;
    }
    tr.grayed {
        opacity: 0.5;
    }
    th, td {
        overflow: hidden;
        max-width: 250px;
        min-width: 250px;
    }
    .left-sticky {
        position: sticky;
        left: 0;
        thead & {
            z-index: 2;
        }
    }
    th {
        z-index: 1;
        position: sticky;
        thead & {
            top: 0;
            color: white;
            text-shadow: -1px 1px 2px rgba(0, 0, 0, 0.45);
            font-weight: 500;
            &:not(.category) {
                background: linear-gradient(#989BB7, #6D6F83);
            }
        }
        tbody & {
            left: 0;
        }
    }
    :is(th,td):not(.hidden) {
        padding: 0.75em 0 0.75em 0;
    }
    .cell-interior {
        width: 250px;
    }
    tbody {
        td, th {
            max-height: 24px;
            min-height: 24px;
            background: #fff;
        }
        tr:not(:hover) :is(td, th):not(.hidden) {
            box-shadow: #818181 -1px 0 inset;
        }
        tr:nth-child(even):is(tr.grayed, :not(:has(~.grayed))) :is(td, th) {
            background-color: #e0ebef;
        }
        tr.expandable:hover {
            cursor: pointer;
            td, th {
                box-shadow: #2ba6cb 0 1px inset,
                            #2ba6cb 0 -1px inset,
                            #818181 -1px 0 inset;
                &.hidden {
                    box-shadow: #2ba6cb 0 1px inset,
                                #2ba6cb 0 -1px inset;
                }
                &:first-child {
                    box-shadow: #2ba6cb 0 1px inset,
                                #2ba6cb 0 -1px inset,
                                #2ba6cb 1px 0 inset,
                                #818181 -1px 0 inset;
                }
                &:last-child {
                    box-shadow: #2ba6cb 0 1px inset,
                                #2ba6cb 0 -1px inset,
                                #2ba6cb -1px 0 inset;
                }
            }
        }
    }
    .left-col-shadow:has(~&) {
        box-shadow: rgba(0, 0, 0, 0.5) 1px 0 28px;
        width: 70px;
        height: 100%;
        position: absolute;
        z-index: 5;
        pointer-events: none;
        transition: opacity 0.5s, width 0.25s ease-out;
        &.hidden {
            opacity: 0;
            transition: opacity 0.25s, width 0.25s ease-out;
        }
    }
}
.trends-screen {
    > div {
        margin-bottom: 20px;
    }
    .trends-buttons button {
        margin-left: 10px;
        margin-right: 10px;
    }
    .chart-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .chart-container >div {
        width: 70%;
        min-width: 400px;
        min-height: 400px;
        display: flex;
        justify-content: center;
    }
    div:has(>.trends-table-container) {
        width: 97vw;
        position: absolute;
        left: 1vw;
    }
    .trends-table-container {
        .letter-code-col {
            left: 70px;
        }
        :is(.day-col):not(.hidden) {
            min-width: 70px;
            max-width: 70px;
        }
        :is(th, td):not(.hidden, .day-col, .letter-code-col) {
            max-width: 250px;
            min-width: 250px;
        }
        .letter-codes {
            overflow: hidden;
            max-height: 0;
            min-height: 0;
        }
    }
}