html {
        position: relative;
        min-height: 100%;
        font-size: 13px;
    }
    body {
        background-image: linear-gradient(to bottom, white 0px, white 0px, #f5f3f7 130px,#f5f3f7 100%);
        padding-bottom: 60px;
    }

    .navbar-dark {
        background-color: #c71e47 !important;
    }
    
    .navbar-dark .navbar-nav .nav-link {
        color: rgba(255,255,255,0.9);
    }
    
    .navbar-dark .navbar-nav .nav-link:hover,
    .navbar-dark .navbar-nav .nav-link:focus {
        color: rgba(255,255,255,1);
    }
    
    .navbar-dark .navbar-nav .active > .nav-link,
    .navbar-dark .navbar-nav .nav-link.active {
        color: #fff;
        font-weight: bold;
        border-bottom: 2px solid white;
    }
    
    .dropdown-menu {
        border-radius: 0;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    
    .card {
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }
    
    .card-header {
        border-radius: 8px 8px 0 0 !important;
    }
    
    .list-group-item-action:hover {
        background-color: #f8f9fa;
    }

    .loader {
        background-image: url('/images/loading.svg');
        background-position: center center;
        background-size: cover;
        filter: blur(3px);
        width: 100%;
        height: 100%;
    }


    .modal-large {
        width: 95%;
        max-width: 1800px;
    }

    .modal-vlarge {
        width: 99%;
        max-width: 2200px;
    }


    .modal-full {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
    }


    .panel.stock{
    color: #ffffff;
    background-color: #c71e47;
    /* background-image: url(../images/logo.png);
    background-repeat: no-repeat; */
    display: block;
    margin-top: 15px;
    margin-bottom: 10px;
    padding-top: 30px;
    padding-bottom: 50px;
    padding-right: 20px;
}

.panel.stock button{
    background-color: white;
    color: #c71e47;
    border: unset;
    width: 150px;
}

.panel{
    color: #c71e47;
    background-color: #ffffff;
    /*background-image: url(../images/logo.gif);
    background-repeat: no-repeat; */
    display: block;
    margin-top: 15px;
    margin-bottom: 10px;
    padding-top: 30px;
    padding-bottom: 50px;
    padding-right: 20px;
}

.panel button{
    background-color: #c71e47;
    color: white;
    border: unset;
    width: 150px;
}

#midPanelOuter {
    /*background-color: #f5f3f7;*/
    padding-top: 25px;
    padding-bottom: 25px;
}
.row {
    display: flex;
    flex-wrap: wrap;
}

.row.stock {
        display: flex;
        flex-wrap: wrap;
    }

.col{
    margin-bottom: 15px;
}
.light-shadow {
    box-shadow: 0 6px 6px 0 rgba(163, 163, 163, 0.11);
}
.midPanel {
    color: #c71e47;
    background-color: white;
    height: 100%;
    max-width: 360px;
    /*border: 1px solid #b8a2a7;*/
    border-radius: 8px;
    padding-top: 25px;
    padding-bottom: 25px;
}

    input.flex-fill {
        margin-left: 15px;
        margin-right: 15px;
}

   .form-check-inline .form-check-input {
        margin-left: 15px;
        margin-right: 15px;
    }

   .login{
       width: 30%;
   }


    .table{
        background-color: #ffffff;
        box-shadow: 0 6px 6px 0 rgba(43, 43, 43, 0.11);
    }

    .table thead th{
        color: #ffffff;
        background-color: #c71e47;
        border-color: white;
        border-style: solid ;
        border-width: 1px;
        box-shadow: 0 6px 6px 0 rgba(43, 43, 43, 0.11);
    }

    .table td, .table th {
        border-top: 1px solid #c6c6c6;
    }

    .table-hover tbody tr:hover {
        background-color: rgba(195, 127, 127, 0.5);
    }

    h2.current {
        color : #ee199c;
    }

    .current thead th{
        color: #ffffff;
        background-color: #ee199c;
        border-color: white;
        border-style: solid ;
        border-width: 1px;
        box-shadow: 0 6px 6px 0 rgba(43, 43, 43, 0.11);
    }


    h2.pending {
        color : #03a9f4;
    }

    .pending thead th{
        color: #ffffff;
        background-color: #03a9f4;
        border-color: white;
        border-style: solid ;
        border-width: 1px;
        box-shadow: 0 6px 6px 0 rgba(43, 43, 43, 0.11);
    }

    h2.unscheduled {
        color : #9c27b0;
    }

    .unscheduled thead th{
        color: #ffffff;
        background-color: #9c27b0;
        border-color: white;
        border-style: solid ;
        border-width: 1px;
        box-shadow: 0 6px 6px 0 rgba(43, 43, 43, 0.11);
    }

    .modal-header {
        color: #ffffff;
        background-color: #c71e47;
    }

    .toast-header {
        color: #FFFFFF;
        background-clip: padding-box;
        border-bottom: 1px solid rgba(0,0,0,.05);
        border-top-left-radius: calc(.25rem - 1px);
        border-top-right-radius: calc(.25rem - 1px);
    }

    .toast-body {
        color: #000000;
        background-color: #ffffff;
    }


    .form-row>.col, .form-row>[class*=col-] {
        padding-bottom: 5px;
    }

    .badge-larger{
        font-size: 95%;
        font-weight: 500;
    }

    .badge-link{
       /*color: #fff;*/
      background-color: #dddfe5;
    }

    .xl-text {
        font-size: 140%;
    }

    .blueTextBold {
        font-weight: bold;
        color: #0000CC;
    }

    .orangeTextBold {
        font-weight: bold;
        color: #ffae05;
    }

    .greenTextBold {
        font-weight: bold;
        color: #00ff00;
    }

    .redTextBold {
        font-weight: bold;
        color: #ff0000;
    }


    .inTextBold {
        font-weight: bold;
        color: #ffffff;
        background-color: #009900;
    }

    .outTextBold {
        font-weight: bold;
        color: #ffffff;
        background-color: #990000;
    }

    .logTextBold {
        font-weight: bold;
        color: #000000;
        background-color: #ffae05;
    }

    .cameraImg {
        max-width: 100%;
        height: auto;
        image-orientation: from-image;
    }

    .imgList {
        max-width: 90%;
        height: auto;
        image-orientation: from-image;
    }

    .imgPanel {
        max-width: 95%;
        height: auto;
        border: 1px solid #ecc6cd;
        margin: 5px;
    }

    .imgName {
        //max-width: 375px;
        text-align: center;
    }

    .blueBack {
        background-color: rgba(206, 236, 253, 0.56);
    }

    .redBack {
        background-color: rgba(253, 206, 208, 0.51);
    }

    .greenBack {
        background-color: rgba(209, 253, 206, 0.55);
    }

    .yellowBack {
        background-color: rgba(253, 242, 206, 0.68);
    }


    .purpleBack {
        background-color: rgba(248, 206, 253, 0.68);
    }

    .table-hover tbody tr:hover :is( .blueBack, .redBack, .greenBack, .purpleBack ) {
        background-color: rgba(195, 127, 127, 0.5);
    }


    .jobDocket{
        border-top: 1px solid #dee2e6;
    }

    .jobDocket .col-sm-8{
        max-width: 90%;
    }

    .jobDocket .col-sm-4{
        max-width: 90%;
    }

    .jobDocket label{
        padding-left: 5px;
    }


    .btn-warning.disabled, .btn-warning:disabled {
        color: #b6ac8e;
        background-color: #212529;
        border-color: #212529;
    }