/*body {
    background: url("../Account/images/Restaurants-6.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-size: .80em;
    font-family: 'OpenSansRegular';
    margin: 0px;
    padding: 0px;
    color: White;
    -webkit-font-smoothing: antialiased;
}*/

.modal-overlay {
    display: none;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 0, 0, 0, .5 ) no-repeat;
}

body.loading .modal-overlay {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal-overlay {
    display: block;
}

.loginbody {
    text-align: center;
    margin: auto;
    background: url(../Account/images/Restaurants-6.jpg) no-repeat center center fixed;
    background-size: cover;
}

.page {
    /*width: 1000px;*/
    background-color: #FFF;
    margin: 20px auto 0px auto;
    border: 0px solid #496077;
}

@media only screen and (max-width: 600px) {
    .page {
        height: 100%;
        margin-top: 0px;
    }

    .loginbody
    {
        background:none;
    }
}

.NoDisplay {
    display: none;
}


.btn-small {
    width: 25px;
    height: 25px;
    line-height: 25px;
}

.jsgrid {
    font-size: 0.9em;
}

.modal {
    width: 95% !important;
    height: 95% !important;
    max-height: 85% !important;
    z-index: 10000;
}

.smallmodal {
    width: 55% !important;
    height: 75% !important;
    max-height: 75% !important;
    z-index: 10000;
}


.tallmodal {
    width: 55% !important;
    height: 95% !important;
    max-height: 90% !important;
    z-index: 10000;
}

.widemodal {
    width: 85% !important;
    height: 55% !important;
    max-height: 55% !important;
    z-index: 10000;
}

.tinymodal {
    width: 35% !important;
    height: 45% !important;
    max-height: 45% !important;
    z-index: 10000;
}

.biggermodal {
    width: 85% !important;
    height: 75% !important;
    max-height: 75% !important;
    z-index: 10000;
}

.biggestmodal {
    width: 85% !important;
    height: 95% !important;
    max-height: 90% !important;
    z-index: 10000;
}

.narrowmodal {
    width: 40% !important;
    height: 75% !important;
    min-height: 45% !important;
    max-height: 75% !important;
    z-index: 10000;
}

@media only screen and (max-width: 1200px) {
    .modal {
        width: 100% !important;
        height: 100% !important;
        z-index: 10000;
        top: 0 !important;
        max-height: 100% !important;
    }
}


.categoryColumn {
    /* Safari */
    -webkit-transform: rotate(-70deg);
    /* Firefox */
    -moz-transform: rotate(-70deg);
    /* IE */
    -ms-transform: rotate(-70deg);
    /* Opera */
    -o-transform: rotate(-70deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.jsgrid-header-row {
    /*height: 100px;*/
    background: none;
}

    .jsgrid-header-row > .jsgrid-header-cell {
        background: none;
    }

.gapGridUntouched {
    background: repeating-linear-gradient( 135deg, #ffffff, #e1e1e1 2px, #ffffff 0px, #ffffff 15px ) !important;
}

.gapGridWhite {
    background: white !important;
    
}


.gapGridBlue {
    background: dodgerblue !important;
}

.gapGridPurple {
    background: mediumpurple !important;
}

.gapGridGreen {
    background: forestgreen !important;
}


.gapGridGrey {
    background: lightgrey !important;
}

.gapGridYellow {
    background: yellow !important;
}

.gapGridOrange {
    background: orange !important;
}

.gapGridRed {
    background: red !important;
}



.cellClickClass {
    text-align: left;
}

.jsgrid-cell.cellClickClass:hover {
    border-color: black;
    border-width: 2px;
}


.disableAll {
    pointer-events: none;
    opacity: 0.4;
}

.dropdown-content {
    max-height: 250px;
}


.gapAnalysisLegend {
    list-style: none;
}

    .gapAnalysisLegend li {
        float: left;
        margin-right: 10px;
    }

    .gapAnalysisLegend span {
        border: 1px solid #ccc;
        float: left;
        width: 12px;
        height: 12px;
        margin: 2px;
    }


.collapsible-body {
    display: none;
    /* border-bottom: 1px solid #ddd; */
    /* box-sizing: border-box; */
    padding: 10px;
}


.collapsible-header {
    display: flex;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.5;
    padding: 1rem;
    background-color: none !important;
    border-bottom: 1px solid #ddd;
    font-size: x-large;
}

.NoShadow {
    box-shadow: none;
}

.tabs .tab a:hover, .tabs .tab a.active {
    color: #073a9d;
}


.tabs .tab a {
    color: #92a3ca;
}

.invalidborder {
    border: solid 4px;
    border-color: #fce4ec;
    padding: 10px;
}


.tabs .indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #073a9d;
    will-change: left, right;
}


.chartLegend li {
    margin: 5px;
    padding: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    list-style-type: none;
    min-width: 100px;
}

.borderless {
    border: none;
    box-shadow: none;
}

.thin-border {
    border: 1px solid LightGray;
    box-shadow: none;
}


.s5ths,
.m5ths,
.l5ths,
.xl5ths {
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s5ths {
    width: 20%;
}

@media only screen and (min-width: 601px) {
    .row .col.m5ths {
        width: 20%;
    }
}

@media only screen and (min-width: 993px) {
    .row .col.l5ths {
        width: 20%;
    }
}

@media only screen and (min-width: 1201px) {
    .row .col.xl5ths {
        width: 20%;
    }
}


.circle-text-white {
    display: table-cell;
    height: 50px;
    /*change this and the width for the size of your initial circle*/
    width: 50px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    /*make it pretty*/
    background: #fff;
    color: #000;
    border-width: 1px;
    border-color: #000;
    border-style: solid;
}

.circle-text-red {
    display: table-cell;
    height: 50px;
    /*change this and the width for the size of your initial circle*/
    width: 50px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    /*make it pretty*/
    background: red;
    color: #fff;
    /*change this for font-size and font-family*/
}

.circle-text-green {
    display: table-cell;
    height: 50px;
    /*change this and the width for the size of your initial circle*/
    width: 50px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    /*make it pretty*/
    background: green;
    color: #fff;
    /*change this for font-size and font-family*/
}

.circle-text-amber {
    display: table-cell;
    height: 50px;
    /*change this and the width for the size of your initial circle*/
    width: 50px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    /*make it pretty*/
    background: orange;
    color: #fff;
    /*change this for font-size and font-family*/
}


.KeyContainer {
    text-align: left;
}

.KeyContents {
    padding: 10px;
    background-color: #e0e0e0;
}

span.badge {
    font-size: 0.75rem;
}

.allergen-level-may .eicon {
    color: orange;
}

.allergen-level-no .eicon {
    color: lightgray;
}

.allergen-level-yes .eicon {
    color: red;
}

.invalidcell {
    color: #fce4ec;
}

.eicon {
    font-size: 50px;
}

.filter-container {
    background-color: white;
    margin-top: 15px;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}


.alert {
    border-radius: 0;
}



.alert-success {
    color: #3e884f;
    background-color: #d3e2d6;
    border-color: rgba(62, 136, 79, 0.1);
}

.alert-info {
    color: #3195a5;
    background-color: #d0e4e7;
    border-color: rgba(49, 149, 165, 0.1);
}

.alert-warning {
    color: #000;
    background-color: orange;
    border-color: rgba(182, 147, 41, 0.1);
}

.alert-danger {
    color: #c43d4b;
    background-color: #eed3d5;
    border-color: rgba(196, 61, 75, 0.1);
}