/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px)
{
    /* Hide captions */
    .carousel-caption
    {
        display: none;
    }
}

.container-fluid > .animated {
    margin-top: 24px !important;
}

.hidden
{
    /* Why important? Because everything in bootstrap uses it, making this class unable to override styles without it. */
    display: none !important;
}

/*
    Ensure all containers down to the sidebar are 100%
    So it can be dynamically sized to fit between the header and footer.
*/
html
{
    height: 100%;
}

body
{
    overflow: hidden;
}

/* Constrain the dashboard content to only overflow vertically. */
.dashboard-content
{
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Fix the sidebars when on mobile */
.c-sidebar
{
    position: relative !important;
}

/* Fix the checkboxes */
input[type=checkbox]
{
    vertical-align: middle;
}

/* Center the modal popup */

.modal
{
    text-align: center;
}

@media screen and (min-width: 768px)
{
    .modal:before
    {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }
}

@media screen and (min-width: 312px) {
    .modal-content
    {
        min-width: 20em;
    }
}

.modal-dialog
{
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    max-width: 100%;
}

/* Fix the header sizing */

.c-header, .c-header-brand, .c-header-nav
{
    min-height: 0;
}

.c-header
{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Make the tables look just a little nicer */

table tr:first-child td, table tr:first-child th
{
    border-top: none;
}

/* Utilities */

.cursor-pointer
{
    cursor: pointer;
}

.delete-button
{
    color: black;
}

.delete-button:hover
{
    color: rgb(229, 0, 0);
}

.vertical-align-middle
{
    vertical-align: middle;
}

/* Extra breakpoints */

/* Massive */
@media (min-width: 1400px)
{
    .col-ma-2
    {
        -ms-flex: 0 0 16.66%;
        flex: 0 0 16.66%;
        max-width: 16.66%;
    }
    .col-ma-6
    {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
   
    .d-ma-table-cell
    {
        display: table-cell !important;
    }
    .d-ma-block
    {
        display: block !important;
    }
}

/* Extra massive */
@media (min-width: 1600px)
{
    .col-xm-1
    {
        -ms-flex: 0 0 8.33%;
        flex: 0 0 8.33%;
        max-width: 8.33%;
    }
    .col-xm-2
    {
        -ms-flex: 0 0 16.66%;
        flex: 0 0 16.66%;
        max-width: 16.66%;
    }
    .col-xm-4
    {
        -ms-flex: 0 0 33.33%;
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
    .col-xm-6
    {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .d-xm-table-cell
    {
        display: table-cell !important;
    }
    .d-xm-block
    {
        display: block !important;
    }

    .mt-xm-0
    {
        margin-top: 0 !important;
    }
}

/* Huge */
@media (min-width: 1700px)
{
    .col-xm-6
    {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .d-hg-table-cell
    {
        display: table-cell !important;
    }
}

/* Spinners */

.spinner-wrapper, .overlay
{
    position: absolute;
    z-index: 1000;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: rgba(50, 50, 50, 0.6);
}

.spinner-wrapper > .spinner-border
{
    width: 5em;
    height: 5em;
}

/* Carousels */

.carousel-indicators li
{
    background-color: black;
}

.carousel-caption
{
    color: black;
}

.carousel-control-prev-icon
{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e")
}
.carousel-control-next-icon
{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e")
}

/*
Tables 

To all future editors: it's probably not worth your time to try and find a better solution to this problem.
By this point in time I have spent more time than I would like to admit trying every combination of flexbox and css grid under the sun.
None of it worked. So far as I can determine there is no way (as of the writing of this comment) to auto size the columns
and permit scrolling in the desire way. If you so dare, continue on, but you do so at risk to your own sanity.
The only aid I can give is that flexbox is almost certaintly your best shot.
Unless CSS grid has added official support for the header remaining fixed, then don't even bother.
*/

.table-scroll
{
    width: 100%;
}

/* This is the element you want to assign your max height to. */
.table-scroll tbody
{
    width: 100%;
    overflow-y: auto;
}

.table-scroll thead, .table-scroll tbody, .table-scroll tr, .table-scroll td, .table-scroll th
{
    display: block;
}

.table-scroll tbody td, .table-scroll thead tr th
{
    float: left;
}