@import url("normalize.css");

html, body form {
    margin: 0;
    padding: 0;
    height: 99%;
}

body {
    font-family: Arial, Helvetica, sans-serif, Georgia, serif, Verdana, Geneva, Verdana;
    font-size: 15px;
    background-color: #FFFFFF;
    color: rgba(0,0,0,1.00);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

textarea:focus, input:focus, div:focus {
    outline: 0;
}

input, textarea {
    max-width: 100%;
    box-sizing: border-box;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 26pt;
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22pt;
}

h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18pt;
}

p {
    margin: 0 0 0.5rem 0;
}

.imageLink {
    text-decoration: none;
    color: rgba(255, 255, 255,0);
}

a:hover .imageLink {
    cursor: pointer;
}

/* Rounded borders */
.roundedAll {
    border-radius: 5px;
}

.roundedTop {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.roundedBottom {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.roundedShadedBorder {
    border-radius: 5px;
    border: thin solid rgba(188,193,197,0.60);
    /* box-shadow: 0 0 10px rgba(137, 145, 152, 0.55); */
    box-shadow: inset 0 0px 5px rgba(137, 145, 152, 0.55);
}



.boxShadow {
    box-shadow: 0 0 3px rgba(137, 145, 152, 0.55);
}

/* border between some rows */
.white-row-border {
    border-bottom: 2px;
    border-color: white;
    border-bottom-style: solid;
}
/* border between some rows */
.white-border {
    border: 2px;
    border-color: white;
    border-style: solid;
}
.masterContentWrap {
    margin-bottom:15px;
}

.wrapper {
    background-color: #FFFFFF;
    border: thin solid rgba(137, 145, 152, 0.7);
    box-shadow: 0 0 7px rgba(137, 145, 152, 0.65);
    color: #000000;
    margin: auto;
    max-width: 1020px;
    font-family: Arial, sans-serif;
    /*	max-height: 720px; */
    border-radius: 9px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
        /* to do: only with size xs*/
}

@media screen and (max-width: 480px) {
    .xs-view-height {
        min-height: calc(100vh - 80px);
    }
}
@media screen and (min-width: 481px) {
    /* .sm-view-height: */
}



img {
    max-width: 100%;
}

    IMG.displayed { /*to center and image horozontaly in a div*/
        display: block;
        margin-left: auto;
        margin-right: auto;
    }


.loginNameAndStatus {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: right;
    color: rgb(240,240,240);
    /*  display:table-cell; */
    padding-top: 0.5em;
}

.dateTime {
    padding: 0.5em 0px 5px 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.loginAndDate {
    padding: 0.5em 0px 5px 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-top: 0px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 0px;
    color: #F1F5F9;
    background-color: #024097; /*rgb(2, 62, 153); JW 10/2017 */
    font-family: Arial, sans-serif;
    font-size: 0.72em;
    vertical-align: middle;
    line-height: 1.25em;
    width: 100%;
}

.mast {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 100%;
    color: #FFFFFF;
    clear: both;
    /* border-bottom: thin solid #04789E; JW 10/2017*/
    max-height: 50px;
    /* background-image: url(../images/gradMastBG.png); JW 10/2017*/
    /* background-size: cover; JW 10/2017*/
    padding-left: 2%;
    /*Changes made JW 10/2017*/
    background-image: url(../images-jw/banner-logo-bg-65.png);
    text-align: left;
}

    .mast .logo {
        max-width: 90vw;
    }

.menu {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 5px;
    padding-left: 2%;
    padding-right: 1.25%;
    padding-bottom: 3px;
    color: #F1F5F9;
    font-family: Arial, sans-serif;
    line-height: 130%;
    background-color: rgba(255,255,255,0); /*#0183ac; JW 10/2017 */
    font-size: 0.76em;
    overflow-x: hidden;
    overflow-y: hidden;
    font-weight: bold;
    width: 100%;
    text-align: left;
}

.rslHeadr {
    text-align: left;
    padding-left: 0.5em;
    font-family: questrial;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.3em;
    background-color: rgb(48, 102, 174);
    color: rgb(250, 250, 250);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}


.titleBar {
    font-family: questrial;
    font-weight: 400;
    line-height: 1.3em;
    background-color: rgb(48, 102, 174);
    color: White;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/* For page Title "PlaceHolderTitle" */
/* font-size is for xs screens */
.divTitle {
    color: #02429d;
    background-color: transparent;
    font-family: questrial;
    font-size: 24px;
    font-style: normal;
    font-weight: normal;
    padding: 10px 32px 20px 32px;
    position: relative;
    margin: auto;
    text-align: left;
}

@media (max-width: 768px) {
    .divTitle {
        padding: 10px 20px 20px 20px;
    }
    
    /* Add padding to footer on mobile */
    .footer {
        padding: 15px 0 !important;
    }
}

/* for use with the top title area: large title w/ smaller font subtitle
	Use with sm- or md-flex-row 
*/
.title-flex {
    display: flex;
    column-gap: 1em;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    flex-direction: column;
}

@media screen and (min-width: 481px) {
    .sm-title-fontsize {
        font-size: 32px;
    }
}

@media screen and (min-width: 481px) {
    .sm-btn-fontsize {
        font-size: 26px;
    }
}
.print-btn-fontsize {
    font-size: 18px;
}

.divTitleCnt {
    font-size: 1.2rem;    
}

.divMain {
    padding: 0;
    margin: auto;
    width: 90%;
    background-color: White;
}


.divButtonBar {
    color: rgb(240,240,240);
    background-color: transparent;
    font-size: 14pt;
    line-height: 130%;
    font-style: normal;
    font-weight: normal;
    display: block;
    padding-left: 25px;
}

.divTable {
}

.divCmd {
}


/*  Style re-def's for using jquery - dialog with Lissie Fein's mods */
.ui-dialog .divTitle {
    padding: 15px 15px 0;
}

.ui-widget-header {
    border: none;
}

.ui-dialog .ui-dialog-titlebar {
    background-color: #f3a132;
    background-image: none;
    color: #fef6eb;
    font-size: 20px;
    padding-left: 1em;
    overflow: visible;
}

.ui-dialog .ui-dialog-content {
    font-size: 15px;
    color: #000000;
    padding: 0;
}

.ui-dialog {
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 0;
    max-width: 100%;
    box-shadow: 10px 10px 20px rgba(0,0,0, 0.5);
}

    .ui-dialog .divTitleb {
        padding: 15px 0;
    }

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
    border-top-left-radius: 0px;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-top-right-radius: 0px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
    border-bottom-left-radius: 0px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
    border-bottom-right-radius: 0px;
}

/* page footer control style - admin pages */
.footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 11px;
    /*	height: 2em; */
    width: 100%;
    background-color: #024097; /* #507BB2; JW 10/2017 */
    border-top: 1px solid #fff;
    filter: alpha(opacity=75);
    -moz-opacity: 1.0;
    -khtml-opacity: 1.0; /*0.75; JW 10/2017 */
    opacity: 1.0; /*0.75; JW 10/2017 */
}

.footerTitleText {
    margin: 0 20px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.4px;
    line-height: 25px;
}

    .footerTitleText a, .footerTitleText a:link, .footerTitleText a:hover, .footerTitleText A:visited, .footerTitleText A:active {
        color: #fff;
        text-decoration: underline;
    }

.footerPhone {
    color: #507BB2;
    background-color: White;
    line-height: 1.2em;
    border-radius: 8px;
    padding: 3px;
}

/*** helpers ***/
.center-hv {
    text-align: center;
    vertical-align: middle;
}

.center-xy { /*Center h&v using transform*/
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.button-sprite-turq {
    background: url(../images/turq-sprite.png) no-repeat;
}

.button-sprite-blue {
    background: url(../images/colb-sprite.png) no-repeat;
}


.button-sprite-blue-back {
    background: url(../images/colb-spriteback.png) no-repeat;
}

.button-sprite {
    font-size: 11pt;
    width: 165px;
    height: 36px;
    background-position: 0px 0px;
    color: #FFFFFF;
    font-family: Arial, sans-serif;
    font-weight: bold;
    line-height: 36px;
    cursor: pointer;
}

    .button-sprite:hover {
        background-position: 0px -46px;
        color: #eef9fc;
        /*    
   width: 165px;
    height: 36px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-indent: 15px;
    font-family: Arial, sans-serif;
    line-height: 36px; 
*/
    }

    .button-sprite:active {
        background-position: 0px -92px;
        color: #EEEAEF;
        /*    
    width: 165px;
    height: 36px;
    color: #EEEAEF;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-indent: 15px;
    font-family: Arial, sans-serif;
    line-height: 36px; 
*/
    }

/*** blue-arrow control ***/
.blue-arrow {
    /*    background-image:url(~/images-jw/blue-arrow.png); must establish programatically  */
    background-repeat: no-repeat;
    background-color: transparent;
    width: 190px;
    height: 34px;
    /* display:table-cell; */
    text-align: center;
    vertical-align: middle;
    color: White;
}

/*** helpers ***/
.dlgTitle {
    width: 90%;
    font-size: 24px;
    font-weight: bold;
    line-height: 28px;
    color: Black;
    padding: 10px 0;
    margin: 0 2rem;
}

.dlgText {
    width: 90%;
    text-align: left;
    min-height: 200px;
    max-height: 400px;
    border: 1px solid rgb(230,230,230);
    overflow-y: scroll;
    padding: 5px 10px;
    margin: auto;
    font-size: 18px;
    color: rgba(0,0,0,0.7);
    margin-bottom: 5px;
    line-height: 20px;
}

.dlgPopup {
    text-align: left;
    border: 1px solid rgb(230,230,230);
    overflow: auto;
    padding: 5px 5px;
    margin: 0px 25px;
    font-size: 18px;
    color: rgba(0,0,0,0.7);
    margin-bottom: 1em;
    line-height: 1.4em;
}
.floatL {
    float: left;
}

.floatR {
    float: right;
}

.clearBoth {
    float: none;
    clear: both;
}

.alignC {
    text-align: center;
}

.alignL {
    text-align: left;
}

.alignR {
    text-align: right;
    display: flex;
    justify-content: end;
}

.bold {
    font-weight: bold;
}

@media screen and (min-width: 769px) {
    .md-w-60 {
        width: 60%;
    }

    .md-w-80 {
        width: 80%;
    }
}

.flex {
    display: flex;
}

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: 1fr;
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media only screen and (min-width: 481px) {
    .sm-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}
@media screen and (min-width: 769px) {
    .md-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.grid-align-center {
    align-items: center;
}

.gap-1 {
    gap: .25rem;
}

.gap-2 {
    gap: .50rem;
}
.gap-3 {
    gap: .75rem;
}

.gap-5 {
    gap: 1.25rem;
}
.gap-col-1 {
    column-gap: .25rem;
}
.gap-col-2 {
    column-gap: .5rem;
}

.gap-col-5 {
    column-gap: 1.25rem;
}

.wrap {
    flex-wrap: wrap;
}

.flex-column {
    flex-direction: column;
}
.flex-column-reverse {
    flex-direction: column-reverse;
}
.flex-1 {    
    flex: 1;
}
.flex-2 {
    flex: 2;
}
.flex-3 {    
    flex: 3;
}
.flex-5 {
    flex: 5;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: start !important;
}

.items-stretch {
    align-items: stretch !important;
}

.items-baseline {
    align-items: baseline;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}
.justify-start {
    justify-content: flex-start;
}
.justify-center {
    justify-content: center;
}
.justify-end {
    justify-content: end;
}

.w-100 {
    width: 100%;
}
.w-50 {
    width: 50%;
}

.w-2\/5 {
    width: 40%;
}

.m-0 {
    margin: 0;
}
/* change to tw*/
.m-10 {
    margin: 10px;
}
.mb-1 {
    margin-bottom: 0.25rem;
}
.mb-2 {
    margin-bottom: .5em;
}
.mb-3 {
    margin-bottom: 0.75rem;
}
.mb-5 {
    margin-bottom: 1.25rem;
}
.mb-10 {
    margin-bottom: 2.5rem;
}
.mb-20 {
    margin-bottom: 5rem;
}
@media screen and (min-width: 481px) {
    .sm-mb-0 {
        margin-bottom: 0;
    }
}
    .mr-3 {
        margin-right: 0.75rem;
    }

    .mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .my-1 {
        margin-top: .25rem;
        margin-bottom: .25rem;
    }

    .my-2 {
        margin-top: .5rem;
        margin-bottom: .5rem;
    }

    .my-4 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .mt-4 {
        margin-top: 1rem;
    }

    .p-1 {
        padding: .25rem;
    }

    .p-2 {
        padding: .5rem;
    }

    .p-4 {
        padding: 1rem;
    }

    .p-0 {
        padding: 0px;
    }

    .p-10 {
        padding: 10px;
    }

    .py-0 {
        padding-top: 0;
        padding-bottom: 0;
    }

    .py-2 {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    .py-10 {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .pb-1 {
        padding-bottom: .25em;
    }

    .pb-2 {
        padding-bottom: .5em;
    }

    .pt-1 {
        padding-top: .25em;
    }

    .pt-2 {
        padding-top: .5em;
    }

    .pt-3 {
        padding-top: 1em;
    }

    .pb-3 {
        padding-bottom: 1em;
    }


    .px-2 {
        padding-right: .5em;
        padding-left: .5em;
    }

    .px-5 {
        padding: 1.25rem;
    }

    .pl-2 {
        padding-left: .5em;
    }

    /* todo - mkae these tailwind units*/
    .pr-10 {
        padding-right: 10px !important;
    }

    .pl-10 {
        padding-left: 10px;
    }

    .text-right {
        text-align: right
    }

    @media screen and (min-width: 481px) {
        .sm-nowrap {
            flex-wrap: nowrap;
        }

        .sm-items-start {
            align-items: start;
        }
    }

    @media screen and (min-width: 769px) {
        .md-nowrap {
            flex-wrap: nowrap;
        }
    }

    .m-auto {
        margin: auto;
    }

    .overflow-auto {
        overflow: auto;
    }

    .tbl {
        display: flex;
    }

    .tbl-row {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0.5rem 1rem;
        text-align: left;
    }

    #tblMain > .tbl-row {
        flex-wrap: wrap;
        border-bottom: 1px solid #ffffff;
    }

    .tbl-row-np {
        display: flex;
        align-items: center;
        width: 100%;
        text-align: left;
    }

    .tbl-cell {
        display: flex;
    }

    .form-row {
        display: flex;
        align-items: center;
        width: 100%;
        text-align: left;
        margin-bottom: 3px;
    }

    .form-section {
        border: 2px;
        border-color: white;
        border-style: solid;
        padding: .5em;
    }

    @media screen only and (min-width: 480px) {
        .col1 {
            width: 30%;
        }

        .col2 {
            width: 65%;
        }
    }

    .valignT {
        vertical-align: top;
    }

    .valignM {
        vertical-align: middle;
    }

    .halignC {
        text-align: center;
    }

    .hiddenButton {
        width: 1px;
        height: 1px;
        display: none;
        overflow: hidden;
    }

    .marginAuto {
        margin: auto;
    }

    .ml-auto {
        margin-left: auto;
    }

    .ml-8 {
        margin-left: 2rem;
    }

    .width100 {
        width: 100%;
    }

    .width90 {
        width: 90%;
    }

    .width50 {
        width: 50%;
    }

    .smallVSpace {
        height: 6px;
        width: 100%;
    }

    .divInline {
        display: inline;
    }

    .divInlineBlock {
        display: inline-block;
    }

    .button-sprite-turq {
        background: url(../images-jw/turq-sprite.png) no-repeat;
    }

    .button-sprite-blue {
        background: url(../images-jw/colb-sprite.png) no-repeat;
    }


    .button-sprite-blue-back {
        background: url(../images-jw/colb-spriteback.png) no-repeat;
    }

    .button-sprite {
        font-size: 11pt;
        width: 165px;
        height: 36px;
        margin: auto;
        background-position: 0px 0px;
        color: #FFFFFF;
        font-family: Arial, sans-serif;
        font-weight: bold;
        line-height: 36px;
        cursor: pointer;
    }

        .button-sprite:hover {
            background-position: 0px -46px;
            color: #eef9fc;
        }

        .button-sprite:active {
            background-position: 0px -92px;
            color: #EEEAEF;
        }

    .emphasis {
        font-weight: 500;
        color: rgb( 47, 143, 229);
        font-style: italic;
    }

    .displayNone {
        display: none;
    }

    .example-tab {
        background-color: #f18b00;
        color: white;
        width: fit-content;
        font-size: 18px;
        font-weight: bold;
        padding: .5rem;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .example-border {
        border: 2px;
        border-color: #f18b00;
        border-style: solid;
    }

    /*** hoverButton  ***/

    .hoverButton {
        /* width:70px; */
        border-radius: 5px;
        cursor: pointer;
        font-family: Arial, sans-serif;
        font-size: 15px;
        /*line-height: 25px;*/
        padding: 3px;
        text-align: center;
        vertical-align: middle;
        background-color: #2573b6;
        color: #fff;
    }

    .hoverButton:hover {
        background-color: #5793c7;
    }

    @media (hover: none) {
        .hoverButton:hover {
            background-color: #2573b6;
        }
    }

    @media screen and (min-width: 481px) {
        .sm-hoverbutton-fontsize {
            font-size: 15px;
        }
    }

    .liteBlueBG {
        background-color: rgb(225,245,255);
    }
    /* orange store image - none on small screens */
    #ctl00_ctl00_ContentPlaceHolderMast_aStore img {
        display: none;
    }

    @media screen and (min-width: 481px) {
        #ctl00_ctl00_ContentPlaceHolderMast_aStore img {
            display: block;
        }
    }
    /* hide on small screens and up (sm).  Small phones are xs. */
    /* temp - attempt to show store link in top area only when we hide big orange store image 
 on small devices when o admin line 
	query not working */
    .sm-only-show {
        display: inline;
    }

    @media screen and (min-width: 481px) {
        .sm-only-show {
            display: hide;
        }
    }

    @media screen and (min-width: 481px) {
        .sm-flex-row {
            flex-direction: row;
        }

        .sm-pt-2 {
            padding-top: .5rem;
        }
    }
    /* for flex col on tiny screens; choose a break for larger */
    @media screen and (min-width: 768px) {
        .md-flex-row {
            flex-direction: row;
        }

        .md-display-block {
            display: block;
        }
    }

    @media screen and (min-width: 860px) {
        .mdlg-flex-row {
            flex-direction: row;
        }
    }

    @media screen and (min-width: 481px) {
        .sm-nowrap {
            flex-wrap: nowrap;
        }
    }

    @media screen and (min-width: 481px) {
        .sm-flex-column {
            flex-direction: column;
        }
    }

    /* used on xs - grey bar*/
    .bottom-50 {
        bottom: 50px;
    }
    .bottom-80 {
        bottom: 80px;
    }

    @media screen and (min-width: 481px) {
        .sm-bottom-25 {
            bottom: 25px;
        }

        .sm-w-1\/2 {
            width: 50%;
        }

        .sm-w-100 {
            width: 100%;
        }

        .sm-flex-3 {
            flex: 3;
        }
    }
    /* placement for grey bar on popup instructions, which do not have the blue footer */
    .ui-dialog-content .bottom-50 {
        bottom: 0px;
    }
    .ui-dialog-content .bottom-80 {
        bottom: 0px;
    }

    .ui-dialog-content .sm-bottom-25 {
        bottom: 0px;
    }

#ctl00_PlaceHolderMain_action_tsbNext_imgButton, #ctl00_PlaceHolderMain_action_tsbBack_imgButton {
    height: auto;
}

#ctl00_ctl00_PlaceHolderMain_PlaceHolderDialogs_actionCancel_spanAnnounce {
    font-size: 13px;
}
@media only screen and (min-width: 481px) {
    #ctl00_ctl00_PlaceHolderMain_PlaceHolderDialogs_actionCancel_spanAnnounce {
        font-size: 16px;
    }
}