/* updated 05-06-2021 */
.screenSizeLblPos {
    top: 300px;
}

body {
    line-height: 1.3;
    color: #5A5A5A;
    background-color: white;
    width: 100%;
    height: 100%;
    font-family: Arial, Calibri, sans-serif;
    font-size: 14px;
}

/*body {
    margin: 0;
    padding: 0;
    background-color: #CCCCCC;
    color: #333333;
    font-size: 100%;
}*/

ul {
    list-style-type: none;
    margin-left: -15px;
}

ul li ul{
    margin-left:10px;
}

.borderRadiusZero {
    border-radius: 0px;
}

.textbox_styling {
    border: 2px solid #5A5A5A; /* #EAEAEA; /*grey border color*/
    border-radius:4px;
}

.textbox_sizing_125px{
    width:125px !important;
}
.DDL_sizing_100px {
    width: 100px !important;
}
.DDL_sizing_150px {
    width: 150px !important;
}
.DDL_sizing_200px {
    width: 200px !important;
}

.table-row-green {
    color: #5A5A5A;
    background-color: #99CCCC;
}

.table-row-white {
    color: #5A5A5A;
    background-color: #fefefe;
}

.table-group-text { /** based on input-group-text */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.375rem 0.75rem;
    margin-bottom: 0;
    font-size: 0.8rem; /* changed from bootstrap */
    font-weight: 400;
    line-height: 1.5;
    color: #5A5A5A; /* changed from bootstrap */
    text-align: center;
    white-space: nowrap;
    border: 1px solid #ced4da;
    border-radius: 0px; /* changed from bootstrap */
}

#HeaderRow {
    border: 0px solid blue;
    background-color: #2C2C2C;
    height: 65px;
    /*align-content: center;*/
    margin-left: -15px; /* needed to undo .row margin */
    margin-right: -15px; /* needed to undo .row margin */
}

#HeaderRowTopMenu {
    border: 0px solid blue;
    background-color: #2C2C2C;
    height: 37px;
    margin-left: -15px; /* needed to undo .row margin */
    margin-right: -15px; /* needed to undo .row margin */
}

#SmallMenuRow {
    border-bottom: 1px solid #5A5A5A;
    background-color: #fff;
    margin-left: -15px; /* needed to undo .row margin */
    margin-right: -15px; /* needed to undo .row margin */
}

#InfoAreaCol {
    border: 0px solid orange;
    margin-top: 20px;
    margin-left: 0px;
    margin-right: 10px;
    padding-right: 10px;
}


/*Used for info. area background color and styling */
.InfoAreaGeneral {
    background-color: #fff;
    margin-top: 10px;
    margin-left: 10px;
    padding: 15px 20px 15px 20px;
}
.InfoAreaTabsNav {
    background-color: #fff;
    margin-top: 15px;
    margin-left: 10px;
    padding: 15px 20px 0px 15px;
}

/* left menu styles */
#LeftMenuCol {
    position: sticky;
    border: 0px solid red;
    background-color: #333333; /* #2C2C2C */
    color: #FFFFFF;
    height:auto;
    min-width: 290px;
    padding-top: 10px;
    /* margin-left: -15px; /* needed to undo .row margin */
    margin-left: -15px;
}

.leftMenuDiv {
    position: relative;
    top: 10px;
    left: 0px;
    height: auto;
    padding-right: 5px;
}

.leftMenuOptions li { /*not used*/
    padding-bottom: 15px;
}

.leftMenuLinkULHeader {
    color: white;
    font-size: 1.2em;
    line-height: 2;
    margin-left: -25px; /* needed to undo .row margin */
}

    .leftMenuLinkULHeader li ul li {
        list-style-type: none;
        margin-left: -17px; /* adjusts list to heading left margin */
        font-size: 1.0em;
        line-height: 3;
    }

        .leftMenuLinkULHeader li ul li a {
            color: #D4D4D4; /* grey */
        }

        .leftMenuLinkULHeader li ul li a:hover {
            color: orange;
        }

        .leftMenuLinkULHeader li ul li a:active { /* selected link */
            color: orange;
        }

.headingLabel {
    border-top: 2px;
    border-bottom: 2px;
    border-left: 0px;
    border-right: 0px;
    border-style: solid;
    border-color: #EAEAEA;
    padding:5px;
    padding-left: 11px;
    padding-right: 40px;
}

.ViewEditBookingLblWidth1 {
    max-width: 150px;
}
.ViewEditBookingLblWidth2 {
    max-width: 100px;
}
.ViewEditBookingLblWidth3 {
    max-width: 250px;
}
.LblWidth300 {
    width: 300px;
}
.AdditionalInfoTextboxWidth {
    width: 325px !important;
}
.Width40 {
    width: 40px;
}

.Width50 {
    width: 50px;
}

#LeftMenuText {
    position: relative;
    top: 0px;
    right: -47px;
    background-color: #333333;
    overflow:hidden;
}

/* Used on 1row2cols.aspx */
.BookingsTakenGVStyling {
    background-color: #FFFFFF;
    margin: 5px 0 10px 0;
    padding: 2px;
    border: thin solid #CCCCCC;
    border-collapse: collapse;
    font-size: 0.8em;
    table-layout: auto;
}
    .BookingsTakenGVStyling .header {
        background: #e2e3e5;
    }

    .BookingsTakenGVStyling .alt {
        background: #99CCCC;
    }

#bookingsTaken_LeftCol {
    height:auto;
}
#bookingsTaken_RightCol {
    height: 530px;
}

/* end of 1row2cols.aspx */

/* used on 3rows.aspx */
.AgentsBookings_AlertLight_Div_Style{
    width:100%;
}

/* Used on all GridViews */
.GridViewStyling_General {
    background-color: #FFFFFF;
    margin: 5px 0 10px 0;
    padding: 2px;
    border: thin solid #F0F0F0;
    border-collapse: collapse;
    font-size: 1em;
    table-layout: auto;
    line-height: 1.9em; /* each rows height */
}

    .GridViewStyling_General .header {
        background: #C2C3C3; /*#e2e3e5 */
        color: #5A5A5A;
    }

    .GridViewStyling_General .alt {
        background: #E4E4E4; /* #99CCCC blue/green */
    }

.GridViewStyling_Smaller {
    font-size: 0.7em !important;
}
    /* end of used on GridViews */
    /* Used on ListViews */
    .ListView_GeneralStyling {
        background-color: #FFFFFF;
        border: thin solid #F0F0F0;
        border-collapse: collapse;
        /*font-family: Verdana, Arial, Helvetica, sans-serif;*/
        font-size: 0.8em;
    }

.ListView_GeneralStyling_TR_Styling {
    border-style: none none solid none;
    border-color: #CCCCCC;
    background-color: #FFFFFF;
    color: #666666;
    text-align: center;
    border-top: 0px;
    border-bottom-width: 1px;
    padding-bottom: 30px;
}

.ListView_GeneralStyling_Alt_TR_Styling {
    background: #E4E4E4;
}

.ListView_GeneralStyling_Header_TR_Styling {
    background-color: #C2C3C3; /* 505598 = mauve. 0053CE = royal blue. 1680B8 = lighter blue  */
    color: #5A5A5A;
    /*font-size:1em;*/
}

.ListView_GeneralStyling_TH_Styling {
    font-size: 0.8em;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 5px;
    padding-right: 5px;
}

.ListView_GeneralStyling_Td_Styling {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 5px;
    padding-right: 5px;
    border: thin solid #F0F0F0;
}
/* end of used on ListViews */

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

.labelMargins /* see printonly.css for print margins*/ {
    margin-top: 5px;
    margin-left: 0px;
    margin-right: 0px;
}

/* used on Daily Collections Management */
#titleWrapper {    
    background-color: #333333;    
    width: 100%;
    height: 70px;
   /* position: fixed;*/
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    z-index: 100;
}

/* new for QRCode single label print 
prints on 38mm x 90mm Labels */
/* unique to LargeQRcode labels (MG only sheet) */
.QRCMGlabelMargins {
    margin-top: 0px; /* adjust this for print view only */
    margin-left: 10px; /* adjust this for print view only */
    margin-right: 2px;
    padding: 0px;
}

.QRCMGtableSize {
    padding-left: 0px;
    padding-top: 4px;
    border: 0px solid Red;
}

.QRMGGroupSeperatorTempleteStyle {
    height: 6px; /* sets height of gap */
    width: 1px;
    padding: 0px;
}

.QRCMGGroupTemplateTR {
    /*height: 1px;*/
}

.QRCMGitemtemplateTD {
    margin: 0px;
    padding: 0px;
    width: 400px; /* set width of label here */
    height: 150px; /* set height of label here */
    border: 0px solid red; /* turn on border here */
}

.QRCMGcol1 {
    /*height:10px;*/
    width: 100px;
    border: 0px solid blue;
    padding: 0px;
    padding-top: 5px;
    vertical-align: top;
}

.QRCodeMGImgStyle {
    height: 100px;
    width: 100px;
    border: 0px solid blue;
    padding: 0px;
}

.QRCMGcol2 {
    vertical-align: top;
}

.QRCMGcol2a {
    width: 100px;
    padding: 0px;
    vertical-align: top;
}

.QRCMGbookingLabel {
    float: right;
    border: 0px solid Black;
    padding: 1px;
    padding-left: 3px;
    padding-right: 2px;
}

    .QRCMGbookingLabel.NoBorder {
        border: 0px solid Black;
        padding: 0px;
    }

.QRCMGcol3 {
    padding: 0px;
    padding-top: 40px;
    padding-right: 15px;
    height: 10px;
    width: 30px;
    float: right;
    vertical-align: middle;
}

.QRCMGParkingTypeStyle {
    padding-left: 0px;
}

.QRCMGtextSizeSml {
    font-size: 16px;
}

.QRCMGtextSizeMed {
    font-size: 18px;
}

.QRCMGtextSizeLarge {
    font-size: 22px;
}

.QRCMGtextSizeXLarge {
    font-size: 24px;
}
/* End of Print Large M&G Labels */


/*Bootstrap overrides */
a {
    color: #5A5A5A;
    text-decoration: none;
    background-color: transparent;
}

    a:hover {
        color: orange;
        text-decoration: none;
        border-top: 1px solid grey;
        border-bottom: 1px solid grey;
    }

/* sets borders on textboxes, dropdown lists */
.form-control:focus {
    border-color: #EAEAEA;
    box-shadow: 0 0 0 0.2rem rgba(234, 234, 234, 0.5);
}

.btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}

.btn-group .noroundcorners {
    border-radius: 0;
}

.btn-primary {
    background-color: #0082C3; /* blue */
    border-color: #007bff;
}
.btn-info {
    background-color: #880E4F; /* burgandy */
    border-color: #880E4F;
}

/*.btn-warning {
    border:none;
}*/

.btn-danger {
    color: #fff;
    background-color: #6600FF; /* purple */
    border-color: #5A00E1;
}
    .btn-danger:hover {
        background-color: #5A00E1;
        border-color: #7800E1;
    }
    .btn-danger:focus, .btn-danger.focus {
        box-shadow: 0 0 0 0.2rem rgba(120, 0, 225, 0.5);
    }

.dropdown-item {
    margin-bottom: 0.75rem;
}
.dropdown-item:last-child {
    margin-bottom: 0.25rem;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #ffff;
    background-color: #0082C3;
}

.nav-tabs .nav-link.active {
    color: #ffff;
    background-color: #0082C3;
}

/*** Media Queries ***/
@media (max-width: 330px) /* col-xxs-xx */ /* 320px is about right for portrait width of phone, set to 330px to cover slightly larger screens */ {
    .AdditionalInfoTextboxWidth {
        width: 325px !important;
    }
    .ViewEditBookingLblWidth1 {
        max-width: 250px;
    }
}

@media (min-width: 576px) /* col-sm-xx */ {
    .AdditionalInfoTextboxWidth {
        width: 400px !important;
    }
    .ViewEditBookingLblWidth1 {
        max-width: 250px;
    }
}

@media (min-width: 768px) /* col-md-xx */ {
        
    .AgentsBookings_AlertLight_Div_Style {
    width: 450px;
    }
    .ViewEditBookingLblWidth1 {
        max-width: 250px;
    }
}

@media (min-width: 992px) /* col-lg-xx */ {
    body {
        background-color: lightgray;
    }

    .GridViewStyling_General {
        font-size: 0.9em;
    }
}

@media (min-width: 1200px) /* col-xl-xx */ {
    #bookingsTaken_LeftCol {
        height: 530px;
    }

    #bookingsTaken_RightCol {
        height: 530px;
    }

    .ColumnXLMaxWidth300 {
        max-width: 301px !important;
    }

    .leftMenuLinkULHeader li ul li {
        list-style-type: none;
        margin-left: -17px; /* adjusts list to heading left margin */
        font-size: 0.8em;
        line-height: 2;
    }
}

/* Additional to Bootstrap 4 */
@media (min-width: 1500px) {
    .d-xxl-block {
        display: block !important;
    }
    .col-xxl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-xxl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-xxl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xxl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xxl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xxl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xxl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xxl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xxl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xxl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xxl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xxl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .order-xxl-first {
        -ms-flex-order: -1;
        order: -1;
    }

    .order-xxl-last {
        -ms-flex-order: 13;
        order: 13;
    }

    .order-xxl-0 {
        -ms-flex-order: 0;
        order: 0;
    }

    .order-xxl-1 {
        -ms-flex-order: 1;
        order: 1;
    }

    .order-xxl-2 {
        -ms-flex-order: 2;
        order: 2;
    }

    .order-xxl-3 {
        -ms-flex-order: 3;
        order: 3;
    }

    .order-xxl-4 {
        -ms-flex-order: 4;
        order: 4;
    }

    .order-xxl-5 {
        -ms-flex-order: 5;
        order: 5;
    }

    .order-xxl-6 {
        -ms-flex-order: 6;
        order: 6;
    }

    .order-xxl-7 {
        -ms-flex-order: 7;
        order: 7;
    }

    .order-xxl-8 {
        -ms-flex-order: 8;
        order: 8;
    }

    .order-xxl-9 {
        -ms-flex-order: 9;
        order: 9;
    }

    .order-xxl-10 {
        -ms-flex-order: 10;
        order: 10;
    }

    .order-xxl-11 {
        -ms-flex-order: 11;
        order: 11;
    }

    .order-xxl-12 {
        -ms-flex-order: 12;
        order: 12;
    }

    .offset-xxl-0 {
        margin-left: 0;
    }

    .offset-xxl-1 {
        margin-left: 8.333333%;
    }

    .offset-xxl-2 {
        margin-left: 16.666667%;
    }

    .offset-xxl-3 {
        margin-left: 25%;
    }

    .offset-xxl-4 {
        margin-left: 33.333333%;
    }

    .offset-xxl-5 {
        margin-left: 41.666667%;
    }

    .offset-xxl-6 {
        margin-left: 50%;
    }

    .offset-xxl-7 {
        margin-left: 58.333333%;
    }

    .offset-xxl-8 {
        margin-left: 66.666667%;
    }

    .offset-xxl-9 {
        margin-left: 75%;
    }

    .offset-xxl-10 {
        margin-left: 83.333333%;
    }

    .offset-xxl-11 {
        margin-left: 91.666667%;
    }
}

    /* Print styles (to fix col sizing issues when printing) */
    /* https://stackoverflow.com/questions/22199429/bootstrap-grid-for-printing */
    @media print {
        .bookingsTaken_LeftCol_Print {
            width: 320px !important;
            max-width: 320px;
        }
    }

    /*
.row {
    /* added to remove right hand gap!! * /
    margin: 0px;
}
a {
    color: #E8E8E8;
    text-decoration: none;
    background-color: transparent;
}*/

/* Used on Checkin.aspx page */
.BlackHeaderRow {
    border: 0px solid blue;
    background-color: #333333;
    height: 35px;
    /*align-content: center;*/
    margin-left: -15px; /* needed to undo .row margin */
    margin-right: -15px; /* needed to undo .row margin */
}

.MaxWidth700 {
    max-width:680px;
}

/******* End of Checkin.aspx page *****************/