body {
    /*font-family: 'Balsamiq Sans', cursive;*/
    font-family: Arial Narrow,Arial,sans-serif;
    background-color: #EBECF0;
    /*background-color: #F8F8F8;*/
    margin-top: 0px;
}
/*
.form-floating {
    position: relative;
    margin: 5px;
}*/

input[type="text"].float2-form-control:focus:not(:read-only),
input[type="password"].float2-form-control:focus:not(:read-only),
input[type="datetime"].float2-form-control:focus:not(:read-only),
input[type="datetime-local"].float2-form-control:focus:not(:read-only),
input[type="date"].float2-form-control:focus:not(:read-only),
input[type="month"].float2-form-control:focus:not(:read-only),
input[type="time"].float2-form-control:focus:not(:read-only),
input[type="week"].float2-form-control:focus:not(:read-only),
input[type="number"].float2-form-control:focus:not(:read-only),
input[type="email"].float2-form-control:focus:not(:read-only),
input[type="url"].float2-form-control:focus:not(:read-only),
input[type="search"].float2-form-control:focus:not(:read-only),
input[type="tel"].float2-form-control:focus:not(:read-only),
input[type="color"].float2-form-control:focus:not(:read-only),
.uneditable-input.float2-form-control:focus:not(:read-only),
.form-select.float2-form-control:focus:not(:read-only),
.select2-container--focus .selection .select2-selection {
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: #2b78e4 2px solid;
    outline: 0 none;
}

::-webkit-input-placeholder { /* Edge */
    font-weight: normal !important;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-weight: normal !important;
}

::placeholder {
    font-weight: normal !important;
}


input[type="text"].float2-form-control,
input[type="password"].float2-form-control,
input[type="datetime"].float2-form-control,
input[type="datetime-local"].float2-form-control,
input[type="date"].float2-form-control,
input[type="month"].float2-form-control,
input[type="time"].float2-form-control,
input[type="week"].float2-form-control,
input[type="number"].float2-form-control,
input[type="email"].float2-form-control,
input[type="url"].float2-form-control,
input[type="search"].float2-form-control,
input[type="tel"].float2-form-control,
input[type="color"].float2-form-control,
.uneditable-input,
.form-select {

    font-weight: normal;   /*bold*/
}



.required::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: auto;
    color: #cc0000;
    content: "*";
}

input[type='radio'].float2-form-control:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #eeeeee;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid grey;
}

input[type='radio'].float2-form-control:checked:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: black;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid black;
}


input[type='checkbox'].float2-form-control:after {
    width: 15px;
    height: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #eeeeee;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid grey;
}

input[type='checkbox'].float2-form-control:checked:after {
    width: 15px;
    height: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #eeeeee;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid black;
    background-image: url("/Images/iconfinder_check.svg");
}

/*//validation*/

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #cc0000;
}


.invalid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: 0.25rem 0.5rem;
    margin-top: 0.1rem;
    font-size: 0.875rem;
    color: #fff;
    background-color: rgba(220, 53, 69, 0.9);
    border-radius: 0.25rem;
}

.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.input-validation-error ~ .invalid-feedback,
.input-validation-error ~ .invalid-tooltip {
    display: block;
}

.was-validated .float2-form-control:invalid, .float2-form-control.input-validation-error {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
}

    .was-validated .float2-form-control:invalid:focus, .float2-form-control.input-validation-error:focus {
        border-top: none;
        border-right: none;
        border-left: none;
        border-bottom: #dc3545 2px solid;
    }

.was-validated textarea.float2-form-control:invalid, textarea.float2-form-control.input-validation-error {
    padding-right: calc(1.5em + 0.75rem);
    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .float2-form-select:invalid, .float2-form-select.input-validation-error {
    border-color: #dc3545;
    padding-right: 4.125rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-position: right 0.75rem center, center right 2.25rem;
    background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

    .was-validated .float2-form-select:invalid:focus, .float2-form-select.input-validation-error:focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    }

.was-validated .form-check-input:invalid, .form-check-input.input-validation-error {
    border-color: #dc3545;
}

    .was-validated .form-check-input:invalid:checked, .form-check-input.input-validation-error:checked {
        background-color: #dc3545;
    }

    .was-validated .form-check-input:invalid:focus, .form-check-input.input-validation-error:focus {
        box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    }

    .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.input-validation-error ~ .form-check-label {
        color: #dc3545;
    }

.form-check-inline .form-check-input ~ .invalid-feedback {
    margin-left: 0.5em;
}

.was-validated .input-group .form-control:invalid, .input-group .form-control.input-validation-error,
.was-validated .input-group .form-select:invalid,
.input-group .form-select.input-validation-error {
    z-index: 3;
}


/* 2nd option for labels and input style*/

/*<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" >*/


.float2-input-wrapper {
    position: relative;
    /*margin: 15px auto; */   /*20px*/
    /*margin-top:15px;*/
    border: none;
}

/*.float2-form-control {
    display: block;
    line-height: 1.5em;*/ /*2em*/
    /*margin: 0;
    padding-left: 10px;
    width: 100%;
    font-size: medium;
    border: none;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: darkgray;*/
    /*border: 1px solid #f4f4f4;
  background-color: #f4f4f4;
  border-radius: 5px;*/
    /*-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #F2F3F4;*/
    /*box-sizing: border-box;*/
    /*font-weight: 500;
    font-family: Arial Narrow,Arial,sans-serif;
}*/

.float2-form-control {
    display: block;
    line-height: 25px; /*2em*/
    //padding-left: 8px;
    width: 100%;
    font-size: medium;
    /*    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #F2F3F4;*/
    /*box-sizing: border-box;*/
    font-weight: 500;
    font-family: Arial Narrow,Arial,sans-serif;
    /* covid style */
    border: none;
    outline: none;
    /*background: none;*/
    background-color: whitesmoke;
    /*font-size: 16px;*/
    color: #333333;
    /*padding: 10px 10px 10px 5px;*/
    /*padding: 2px 10px 2px 10px;*/ /*2021/06/13 njb*/
    padding: 0px 10px 0px 10px;
    /*margin-bottom: 30px;*/
    /*margin-bottom: 5px;*/ /*2021/06/13 njb*/
    margin-bottom: 1px;
    margin-left: 2px;
    border-radius: 5px;
    /*box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #ffffff;*/
    box-shadow: inset 2px 2px 5px #cbced1, inset -5px -5px 10px #ffffff;
}

    .float2-form-control:focus {
        /*border: 1px solid #2c7ac9;*/
        border: none;
        border-color: red;
    }
    .float2-form-control:read-only,
    .float2-form-control:disabled {
        border: 1px solid darkgrey;
        border-color: darkgrey;
        border-style: solid;
        /*border-width: 1px;  //JH Removed */
        /*box-shadow: inset 0px 0px 0px #BABECC, inset 2px 2px 2px #FFF; //JH Removed*/
    }

.float2-control-label {
    display: block;
    position: absolute;
    /*opacity: 0;*/
    bottom: 2.3rem;
    color: #336699;
    transition: 0.2s ease-in-out transform;
    font-size: 14px;
    font-weight: bold !important;
    /*copied from below*/
    visibility: visible;
    z-index: 1;
    /*opacity: 1;*/
    transform: translateY(5px); /*-10px*/
    transition: 0.2s ease-in-out transform;
}

.float2-form-control:placeholder-shown + .float2-control-label {
    visibility: hidden;
    z-index: -1;
    transition: 0.2s ease-in-out;
}

.float2-form-control:not(:placeholder-shown) + .float2-control-label,
.float2-form-control:focus:not(:placeholder-shown) + .float2-control-label {
    visibility: visible;
    z-index: 1;
    opacity: 1;
    transform: translateY(5px);   /*-10px*/
    transition: 0.2s ease-in-out transform;
}

.float2-enabled {
    background-color:white !important;
}




/*http://jsfiddle.net/z7L6m2sc/*/
/*https://stackoverflow.com/questions/2547354/how-to-standardize-the-height-of-a-select-box-between-chrome-and-firefox*/
/*.select2-dropdown.select2-dropdown--below {
    width: 148px !important;
}*/

.select2 {
    display: grid;
}

.select2-container--default .select2-selection--single {
    /*padding: 6px;*/
    height: 25px;
    width: 148px;
    font-size: 1.2em;
    position: relative;
    display: block;
    line-height: 25px;
    margin: 0;
    /* padding-left: 10px;*/
    width: 100%;
    font-size: medium;
    /*    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #F2F3F4;*/
    /*box-sizing: border-box;*/
    font-weight: 500;
    font-family: Arial Narrow,Arial,sans-serif;
    /* covid style */
    border: none;
    outline: none;
    /*background: none;*/
    background-color: white;
    /*font-size: 16px;*/
    color: #555;
    /*padding: 10px 10px 10px 5px;*/
    padding: 2px 10px 2px 10px;
    vertical-align:central;
    /*margin-bottom: 30px;*/
    margin: 2px;
    border-radius: 5px;
    /*box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #ffffff;*/
    box-shadow: inset 2px 2px 5px #cbced1, inset -5px -5px 10px #ffffff;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    margin-top: -4px;
    padding-left: 0px;
}

.select2-container .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    margin-top: 5px;
}

/*    .select2-container--default .select2-selection--single .select2-selection__arrow {
        background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
        background-image: -moz-linear-gradient(top, #424242, #030303);
        background-image: -ms-linear-gradient(top, #424242, #030303);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
        background-image: -webkit-linear-gradient(top, #424242, #030303);
        background-image: -o-linear-gradient(top, #424242, #030303);
        background-image: linear-gradient(#424242, #030303);
        width: 40px;
        color: #fff;
        font-size: 1.3em;
        padding: 4px 12px;
        height: 27px;
        position: absolute;
        top: 0px;
        right: 0px;
        width: 20px;
    }*/

/*njb 2021/08/01*/
label {
    color: #336699;
    font-size: 14px;
    font-weight: bold !important;
}

label bold{
    color: #336699;
    font-size: 14px;
    font-weight: bolder !important;
}


.label-top-std {
    display: block;
    /*position: absolute;*/
    /*opacity: 0;*/
    /*bottom: 2.3rem;*/
    color: #336699;
    /*transition: 0.2s ease-in-out transform;*/
    font-size: 14px;
    font-weight: bold !important;
    /*copied from below*/
    visibility: visible;
    padding-left: 5px;
    /*z-index: 1;*/
    /*opacity: 1;*/
    /*transform: translateY(5px); /*-10px*/
    /*transition: 0.2s ease-in-out transform;*/
}
.label-left-std {
    display: block;
    /*position: absolute;*/
    /*opacity: 0;*/
    /*bottom: 2.3rem;*/
    color: #336699;
    /*transition: 0.2s ease-in-out transform;*/
    font-size: 14px;
    font-weight: bold !important;
    /*copied from below*/
    visibility: visible;
    padding-left: 10px;
    /*z-index: 1;*/
    /*opacity: 1;*/
    /*transform: translateY(5px); /*-10px*/
    /*transition: 0.2s ease-in-out transform;*/
}

.field-validate-error {
    background-color: #F73229 !important
}

.field-validate-good {
    background-color: limegreen !important
}

/*Overwrite jquery ui tab styles*/
.ui-widget {
    font-family: inherit;
    font-size: inherit;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: inherit;
    font-size: inherit;
}


/*
    https://codepen.io/jackdomleo7/pen/mdeowoz  ** list 
    https://codepen.io/swapnet/pen/QWwPVwE

   https://codverter.com/src/webeditor

    https://neumorphism.io/#e0e0e0

    https://bashooka.com/coding/css-neomorphic-ui-design-examples/
   https://codepen.io/braydoncoyer/pen/poJzLLO       **** active keyboard on screen!!
    https://codepen.io/CAWeissen/pen/dyPWqLE

    https://webdesign.tutsplus.com/articles/soft-ui-and-neumorphic-ui-kits--cms-36518

*/




.scan-docs-folder-titles {
    font-weight: bolder;
    font-size: 15px
}

.scan-docs-section {
    /*border: 2px solid black;*/
    border: none;
    margin: 3px;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 90%;
}

.scan-docs-folder-div {
    width: 100%;
    min-height: 25%;
}

/*.scan-docs-list-section {
    width: auto;
    min-height: 70px;
    background-color: white;
    padding: 5px;
}*/

.scan-docs-list-section {
    width: auto;
    min-height: 20%;
    border-radius: 21px;
    background: #f5f5f5;
    box-shadow: inset 5px 5px 0px #dddddd, inset -5px -5px 0px #ffffff;
    margin: 6px 6px 0px 6px;
}

.scan-docs-list-section > li {
    list-style: none;
}


/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible-custom:hover {
    background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content-custom {
    display: none;
    overflow: hidden;
    background-color: lightgray !important;
}


.field-validation-error {
    color: red;
    font-weight: bold;
}

.validation-summary-errors {
    color: red;
    font-weight: bold;
}

.select2-input-validation-error, 
.input-validation-error {
    background: pink !important;
    border: 1px solid red !important;
}


div.covid,
div.covid-footer,
.container-order-fields-and-buttons .container-buttons {
    padding: 5px 10px 10px 10px;
    border-radius: 10px;
    background: #ecf0f3;
    box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff;
    margin: 5px;
    overflow: auto;
    max-width: 100%;
}

div.covid-footer {
    position: fixed;
    bottom: 2px;
    left: 2px;
    width: calc(100% - 13px);
    height: 50px;
    overflow: visible;
    padding-top: 3px;
}

div.covid > h1,
div.covid > h2,
div.covid > h3,
div.covid > h4,
div.covid > h5 {
    margin: -5px -10px 0 -10px;
}

.ui-dialog,
div.covid-dialog {
    /*padding: 5px 10px 10px 10px;*/
    border-radius: 10px;
    background: #ecf0f3;
    box-shadow: 20px 20px 10px #4e4e4f;
    /*margin: 5px;*/
    /*overflow: auto;*/
}



#div-sms-pv {
    min-width: 20%;
    max-width: 20%;
    display:none;
}

/*#div-sms-pv {
    min-width: 20%;
    max-width: 20%;
    display: block;
}*/

#sms-toggle{
    font-size: 20px;
    color: white;
    cursor: pointer;
    margin-right: 3px;
    float: right;
}

@media print {
    @page {
        size: auto;
        margin: 0;
    }

    body {
        display: block;
    }
}