/*-----------------------------------------------------------------------------
    font
-----------------------------------------------------------------------------*/
/* montserrat-regular - latin */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/Montserrat/montserrat-v14-latin-regular.eot");
    /* IE9 Compat Modes */
    src: local("Montserrat Regular"), local("Montserrat-Regular"),
        url("/fonts/montserrat-v14-latin-regular.eot?#iefix")
            format("embedded-opentype"),
        /* IE6-IE8 */
            url("/fonts/Montserrat/montserrat-v14-latin-regular.woff2")
            format("woff2"),
        /* Super Modern Browsers */
            url("/fonts/Montserrat/montserrat-v14-latin-regular.woff")
            format("woff"),
        /* Modern Browsers */
            url("/fonts/Montserrat/montserrat-v14-latin-regular.ttf")
            format("truetype"),
        /* Safari, Android, iOS */
            url("/fonts/Montserrat/montserrat-v14-latin-regular.svg#Montserrat")
            format("svg");
    /* Legacy iOS */
}

@font-face {
    font-family: "Montserrat-SemiBold";
    src: url("/fonts/Montserrat/Montserrat-SemiBold.ttf.woff") format("woff"),
        url("/fonts/Montserrat/Montserrat-SemiBold.ttf.svg#Montserrat-SemiBold")
            format("svg"),
        url("/fonts/Montserrat/Montserrat-SemiBold.ttf.eot"),
        url("/fonts/Montserrat/Montserrat-SemiBold.ttf.eot?#iefix")
            format("embedded-opentype");
    font-weight: normal;
    font-style: normal;
}

/*-----------------------------------------------------------------------------
      header
  -----------------------------------------------------------------------------*/
div#header {
    font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial;
}

div#header h1 {
    text-align: center;
}

div#header img {
    float: left;
}

/* MAC */
div#header {
    position: fixed;
    z-index: 1000;
    height: 118px;
    background-image: linear-gradient(to bottom, white 58px, transparent);
    border: 0px solid red;
}

/*-----------------------------------------------------------------------------
      menu
  -----------------------------------------------------------------------------*/
div.menu {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 130px);
    width: 288px; /* Match width of sidebar-container */
    font-size: 0.8em;
    font-family: "Montserrat-SemiBold", Verdana, Arial, Helvetica, sans-serif;
    float: left;
    background-color: #2a6987 !important;
    padding-bottom: 30px;
    padding-right: 4px;
    border-radius: 0 0 30px 0;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

div.menu::-webkit-scrollbar {
    /* Chrome, Safari and Opera */
    display: none;
}

ul.menu {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

ul.menu li {
    list-style: none;
    position: relative;
    white-space: nowrap;
    top: 0;
    margin: 1px 0.2em 0 0;
    border-bottom-width: 0;
    padding: 0;
}

ul.menu li a {
    cursor: pointer;
    padding: 0.5em 1em;
    text-decoration: none;
    float: left;
    width: 270px;
    border: none;
    color: rgb(255, 255, 255) !important;
}

ul.menu li a:hover {
    background-color: #eea320 !important;
    color: black !important;
}

ul.menu li a.selected {
    cursor: pointer;
    border: none;
    background-color: #9abb50 !important;
}

ul.menu li a.selected:hover {
    background-color: #eea320 !important;
    color: black !important;
}

/* ul.menu li a.ecpadmin {
    float: left;
    cursor: pointer;
    padding: .5em 1em;
    text-decoration: none;
    color: #0073ea;
    background-color: #FCF1B8;
    border: none;
} */

/* ul.menu li a.ecpadmin-selected {
    color: #12076F;
    pointer-events: none;
    cursor: default;
    border: none;
    background-color: #9abb50 !important;
} */

ul.menu li.menuParent a {
    padding-left: 20px;
}

ul.menu li.menuChild a {
    padding-left: 60px;
}

ul.menu li.menuParent.selectedParent a:hover {
    cursor: default;
}

ul.menu li img {
    margin-right: 8px;
    height: 17px;
    width: 17px;
}

/*-----------------------------------------------------------------------------
      logo
  -----------------------------------------------------------------------------*/
div#alveo-logo {
    height: 130px;
    width: 100%;
    background-color: #2a6987;
    float: left;
}

div#alveo-account-logo,
div#alveo-account-name,
div#alveo-account-contact,
div#alveo-logoff,
div#alveo-idot-navpage {
    height: 40px;
    width: 40px;
}

div#alveo-account-name {
    text-align: center;
}

div#alveo-account-logo img {
    max-width: 170px;
    max-height: 40px;
}

/*-----------------------------------------------------------------------------
      content
  -----------------------------------------------------------------------------*/
div#content {
    background-color: #ffffff;
    padding: 1em;
    left: 0;
}

/* MAC */
div#content {
    width: 82%;
    float: left;
    padding-left: 10px;
    margin-left: 290px;
    margin-top: 80px;
}

/*-----------------------------------------------------------------------------
      modal popup content
  -----------------------------------------------------------------------------*/
.modal-display {
    position: fixed;
    z-index: 10000;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}

img#modal-close {
    position: absolute;
    top: -2px;
    right: -2px;
}

div#modal-contact-support {
    display: none;
}

div#modal-contactSupport {
    border: 2px solid #eea320;
    width: 300px;
    height: 150px;
    position: relative;
    left: 50%;
    margin-left: -150px;
    top: 30%;
    margin-top: -60px;
    padding: 20px;
    z-index: 11000;
    color: white;
    border-radius: 12px;
    background: rgba(6, 80, 110, 0.8);
    font-weight: bold;
}

div#modal-contact-support .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(5, 153, 110, 0.5);
}

div#modal-view-account {
    display: none;
}

div#modal-viewAccount {
    border: 2px solid rgb(230, 219, 90);
    width: 300px;
    height: 150px;
    position: relative;
    left: 50%;
    margin-left: -150px;
    top: 30%;
    margin-top: -60px;
    padding: 20px;
    z-index: 11000;
    color: white;
    border-radius: 12px;
    background: rgba(5, 153, 110, 0.8);
    font-weight: bold;
}

div#modal-view-account .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(6, 80, 110, 0.5);
}

.modal-effect {
    -webkit-filter: blur(2px);
    filter: blur(2px);
}

/*-----------------------------------------------------------------------------
      footer
  -----------------------------------------------------------------------------*/
footer {
    clear: both;
    background-color: #ffffff /*#e2e2e2*/;
    font-size: 0.8em;
    position: relative;
    width: 100%;
    bottom: 0;
    font-family: "Montserrat-SemiBold", Verdana, Arial, Helvetica, sans-serif;
    margin: 24px 0 16px 0;
}

div.footer {
    float: none;
    text-align: center;
    /*background-color: rgb( 6, 80, 110 );*/
    background-color: #2a6987;
    color: white;
    line-height: 30px;
    font-weight: bold;
    margin: 0 30px;
    border-radius: 2px;
    max-width: calc(100% - 60px); /* Match main content width */
    margin-left: auto;
    margin-right: auto;
}

div.footer p {
    margin: 0;
}

div.footer a:link {
    color: rgb(230, 219, 90);
    text-decoration: none;
}

div.footer a:visited {
    color: rgb(255, 255, 255);
    text-decoration: none;
}

div.footer a:hover {
    color: #eea320;
    text-decoration: none;
}

div.footer a:active {
    color: #9abb50;
    text-decoration: none;
}

/*-----------------------------------------------------------------------------
    CSS color constants (themes)
  -----------------------------------------------------------------------------*/
.alveo-yellow {
    background-color: rgb(230, 219, 90);
}

.alveo-orange {
    background-color: #eea320;
}

.alveo-blue {
    background-color: #2a6987;
}

.alveo-green {
    background-color: #9abb50;
}

/* -=- */
.menuField-green {
    background-color: #2a6987;
}

.menuHilightActive-blue {
    background-color: #2a6987;
}

/* -=- */
.menuField-blue {
    background-color: #2a6987;
}

.menuHilightActive-green {
    background-color: #9abb50;
}

/* -=- */
.menuHilightHover-orange {
    background-color: #eea320;
}

/* -=- */
/* .menuGradient-greenblueHOLD {
    background: #2a6987;
    background-image: -moz-linear-gradient(top, #2a6987 0%, #2a6987 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2a6987), color-stop(100%, #2a6987));
    background-image: -webkit-linear-gradient(top, #2a6987 0%, #2a6987 100%);
    background-image: -o-linear-gradient(top, #2a6987 0%, #2a6987 100%);
    background-image: -ms-linear-gradient(top, #2a6987 0%, #2a6987 100%);
    background-image: linear-gradient(to bottom, #2a6987 0%, #2a6987 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='##2a6987', endColorstr='#2a6987', GradientType=0);
    background-color: transparent !important;
} */

/* .menuGradient-bluegreenHOLD {
    background: #2a6987;
     Old browsers 
    background-image: -moz-linear-gradient(top, #2a6987 0%, #2a6987 100%);
     FF3.6-15 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2a6987), color-stop(100%, #2a6987));
    /* Chrome4-9,Safari4-5 
    background-image: -webkit-linear-gradient(top, #2a6987 0%, #2a6987 100%);
    /* Chrome10-25,Safari5.1-6 
    background-image: -o-linear-gradient(top, #2a6987 0%, #2a6987 100%);
    /* Opera 11.10-11.50 
    background-image: -ms-linear-gradient(top, #2a6987 0%, #2a6987 100%);
    /* IE10 preview 
    background-image: linear-gradient(to bottom, #2a6987 0%, #2a6987 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a6987', endColorstr='##2a6987', GradientType=0);
    /* IE6-9 
    background-color: transparent !important;
    /* reset 
} */

/*-----------------------------------------------------------------------------
      MAIN Main main
  ------------------------font-size: .85em; -----------------------------------------------------*/
.LegacyFrame {
    border: 0px;
    padding: 0px;
    width: 80%;
    height: 75%;
}

html {
    background-color: #ffffff;
    margin: 0;
    padding: 0;
}

body,
td {
    font-family: Verdana;
    font-size: 9pt;
}

header,
footer,
hgroup,
nav,
section {
    display: block;
}

.content-wrapper {
    margin: 0 auto;
    max-width: 960px;
}

#body {
    background-color: #666666 /*#efeeef*/;
    clear: both;
    padding-bottom: 35px;
}

mark {
    background-color: #a6dbed;
    padding-left: 5px;
    padding-right: 5px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

/* taking h2 out of this list*/
h1,
h3,
h4,
h5,
h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.25em;
}

/* 1.75 */
h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5,
h6 {
    font-size: 1em;
}

h5 a:link,
h5 a:visited,
h5 a:active {
    padding: 0;
    text-decoration: none;
}

iframe {
    position: relative;
}

/*-----------------------------------------------------------------------------
      site title
  -----------------------------------------------------------------------------*/
.site-title {
    color: #c8c8c8;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 2.3em;
    margin: 0;
}

.site-title a,
.site-title a:hover,
.site-title a:active {
    background: none;
    color: #c8c8c8;
    outline: none;
    text-decoration: none;
}

/*-----------------------------------------------------------------------------
      login
  -----------------------------------------------------------------------------*/
#login {
    display: block;
    font-size: 0.85em;
    text-align: right;
}

#login a {
    background-color: #ccc;
    margin-left: 10px;
    margin-right: 3px;
    padding: 2px 3px;
    text-decoration: none;
    border: 1px #666;
}

#login a.username {
    background: none;
    margin: 0;
    padding: 0;
    text-decoration: underline;
}

#login ul {
    margin: 0;
}

#login li {
    display: inline;
    list-style: none;
}

/*-----------------------------------------------------------------------------
    page elements
    featured
  -----------------------------------------------------------------------------*/
.featured {
    background-color: #ffffff /*#fff*/;
}

.featured .content-wrapper {
    background-color: #7ac0da;
    background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
    background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0, #7ac0da),
        color-stop(1, #a4d4e6)
    );
    background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
    background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
    color: #3e5667;
    padding: 20px 40px 30px 40px;
}

.featured hgroup.title h1,
.featured hgroup.title h2 {
    color: #fff;
}

.featured p {
    font-size: 1.1em;
}

/*-----------------------------------------------------------------------------
    page titles
  -----------------------------------------------------------------------------*/
hgroup.title {
    margin-bottom: 10px;
}

hgroup.title h1,
hgroup.title h2 {
    display: inline;
}

hgroup.title h2 {
    font-weight: normal;
    margin-left: 3px;
}

/*-----------------------------------------------------------------------------
    features
  -----------------------------------------------------------------------------*/
section.feature {
    width: 300px;
    float: left;
    padding: 10px;
}

/*-----------------------------------------------------------------------------
    ordered list
  -----------------------------------------------------------------------------*/
ol.round {
    list-style-type: none;
    padding-left: 0;
}

ol.round li {
    margin: 25px 0;
    padding-left: 45px;
}

ol.round li.zero {
    background: url("../Images/orderedList0.png") no-repeat;
}

ol.round li.one {
    background: url("../Images/orderedList1.png") no-repeat;
}

ol.round li.two {
    background: url("../Images/orderedList2.png") no-repeat;
}

ol.round li.three {
    background: url("../Images/orderedList3.png") no-repeat;
}

ol.round li.four {
    background: url("../Images/orderedList4.png") no-repeat;
}

ol.round li.five {
    background: url("../Images/orderedList5.png") no-repeat;
}

ol.round li.six {
    background: url("../Images/orderedList6.png") no-repeat;
}

ol.round li.seven {
    background: url("../Images/orderedList7.png") no-repeat;
}

ol.round li.eight {
    background: url("../Images/orderedList8.png") no-repeat;
}

ol.round li.nine {
    background: url("../Images/orderedList9.png") no-repeat;
}

/*-----------------------------------------------------------------------------
    content
  -----------------------------------------------------------------------------*/
article {
    float: left;
    width: 70%;
}

aside {
    float: right;
    width: 25%;
}

aside ul {
    list-style: none;
    padding: 0;
}

aside ul li {
    background: url("../Images/bullet.png") no-repeat 0 50%;
    padding: 2px 0 2px 20px;
}

.label {
    font-weight: 700;
}

/*-----------------------------------------------------------------------------
    login page
  -----------------------------------------------------------------------------*/
#loginForm {
    border-right: solid 2px #c8c8c8;
    float: left;
    width: 55%;
}

#loginForm .validation-error {
    display: block;
    margin-left: 15px;
}

#loginForm .validation-summary-errors ul {
    margin: 0;
    padding: 0;
}

#loginForm .validation-summary-errors li {
    display: inline;
    list-style: none;
    margin: 0;
}

#loginForm input {
    width: 250px;
}

#loginForm input[type="checkbox"],
#loginForm input[type="submit"],
#loginForm input[type="button"],
#loginForm button {
    width: auto;
}

#socialLoginForm {
    margin-left: 40px;
    float: left;
    width: 40%;
}

#socialLoginForm h2 {
    margin-bottom: 5px;
}

#socialLoginList button {
    margin-bottom: 12px;
}

#logoutForm {
    display: inline;
}

/*-----------------------------------------------------------------------------
    contact
  -----------------------------------------------------------------------------*/
.contact h3 {
    font-size: 1.2em;
}

.contact p {
    margin: 5px 0 0 10px;
}

.contact iframe {
    border: 1px solid #333;
    margin: 5px 0 0 10px;
}

/*-----------------------------------------------------------------------------
      Styles for basic forms
  -----------------------------------------------------------------------------*/
fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

.editor-label {
    margin: 1em 0 0 0;
}

.editor-field {
    margin: 0.5em 0 0 0;
}

/*-----------------------------------------------------------------------------
    info and errors
  -----------------------------------------------------------------------------*/
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success {
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.error {
    color: #e80c4d;
}

/*-----------------------------------------------------------------------------
    Styles for validation helpers
  -----------------------------------------------------------------------------*/
.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #e80c4d;
    font-size: 1.1em;
}

/*color: #ff0000;*/
.validation-summary-valid {
    display: none;
}

.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
    font-size: 0.8em;
}

/*color: #ff0000;*/
.field-validation-warning {
    color: #daa520;
    font-weight: bold;
    font-size: 0.8em;
}

/*color: #ff0000;*/
/*#FFEC8B*/
/*#FDB813*/
.field-validation-valid {
    display: none;
}

.field-validation-valid-display {
    color: #3b5323;
    font-weight: bold;
    font-size: 0.8em;
}

/*green*/
input.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

/*-----------------------------------------------------------------------------
  -----------------------------------------------------------------------------*/
DIV.item {
    border-top: 1px dotted gray;
    padding-top: 0.7em;
    margin-bottom: 0.7em;
}

DIV.item:first-child {
    border-top: none;
    padding-top: 0;
}

DIV.item H3 {
    font-size: 1.3em;
    margin: 0 0 0.25em 0;
}

DIV.item H4 {
    font-size: 1.1em;
    margin: 0.4em 0 0 0;
}

DIV.pager {
    font-size: 9px;
    text-align: left;
    border-top: 2px solid silver;
    padding: 0.5em 0 0 0;
    margin-top: 1em;
}

DIV.pager A:hover {
    font-size: 9px;
    background-color: Silver;
}

DIV.pager A.selected {
    font-size: 9px;
    background-color: #353535;
    color: White;
}

DIV.pager A {
    font-size: 9px;
    font-size: 1.1em;
    color: #666;
    text-decoration: none;
    padding: 0 0.4em 0 0.4em;
}

form {
    margin: 0;
    padding: 0;
}

/*DIV.item FORM { float:right; }
  DIV.item INPUT { color: White; background-color: #333; border: 1px solid black; cursor: pointer; }
  H2 { margin-top: 0.3em }*/
TFOOT TD {
    border-top: 1px dotted gray;
    font-weight: bold;
}

.actionButtons A,
INPUT.actionButtons {
    font: 0.8em Arial;
    color: #0073ea;
    margin: 0.5em;
    cursor: pointer;
    text-decoration: none;
    padding: 3px;
    background-color: #d3dce0;
    border: 1px solid #787878;
}

/*padding: .15em 1.5em .2em 1.5em;background-color: #353535;border: 1px solid black;color: White*/

.ActionButton {
    background-color: #d3dce0;
    border: 1px solid #787878;
    cursor: pointer;
    padding: 3px;
    font: 0.8em Arial;
    color: #0073ea;
    margin: 0.5em;
    width: auto;
    text-decoration: none;
}

ul {
    list-style-type: none;
    list-style-image: none;
    list-style-position: inside;
}

/*-----------------------------------------------------------------------------
  -----------------------------------------------------------------------------*/

/********************#000 *****#fff ********************** center center***************/
/* http://www.jquerybyexample.net/2012/06/show-loading-image-while-page-is.html */
#dvLoading {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    margin: -25px 0 0 -25px;
    display: block;
    background-repeat: no-repeat;
}

/**************************************************************/
/* http://hungred.com/how-to/tutorial-simple-screen-grey-effect-jquery/ */
#screen {
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
}

/*-----------------------------------------------------------------------------
      Fixed Header   background-color: white !important;
  -----------------------------------------------------------------------------*/

div.FixedHeader_Cloned th,
div.FixedHeader_Cloned td {
    background-color: white !important;
    font-size: 0.8em;
    margin: 0px;
    padding: 0px;
}

/*-----------------------------------------------------------------------------
      DataTables
  #DataTableBatch_paginate {visibility:hidden;}
  -----------------------------------------------------------------------------*/
.DataTableClaim {
    background: none !important;
}

.ClaimForm table {
    padding: 0px;
    margin: 0px;
}

.ClaimForm th {
    font-size: x-small;
    color: #383838;
    text-align: left;
    vertical-align: bottom;
    font-weight: normal;
    padding-top: 3px;
    padding-right: 6px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-bottom: 0px;
}

.ClaimForm td {
    text-align: left;
    vertical-align: top;
    padding-top: 3px;
    padding-right: 6px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
}

.ClaimForm input {
    border: solid 1px #dddddd;
    padding: 0px;
    margin: 0px;
}

.ClaimForm select {
    border: solid 1px #dddddd;
    padding: 0px;
    margin: 0px;
}

.ClaimForm label {
    padding: 0px;
    margin: 0px;
}

.GroupSegTitle {
    font-weight: bold;
    padding-top: 1em;
}

.GroupTitle {
    font-size: large;
    font-weight: bold;
    padding-top: 1em;
}

.GroupTitle_strikethrough {
    text-decoration: line-through;
    font-size: large;
    font-weight: bold;
    padding-top: 1em;
}

.code2 {
    width: 2em;
}

.code3 {
    width: 3em;
}

.code4 {
    width: 4em;
}

.code5 {
    width: 5em;
}

.code6 {
    width: 5em;
}

.code7 {
    width: 7em;
}

.code8 {
    width: 8em;
}

.code9 {
    width: 9em;
}

.code10 {
    width: 10em;
}

.code11 {
    width: 11em;
}

.code12 {
    width: 12em;
}

.code13 {
    width: 13em;
}

.code14 {
    width: 14em;
}

.code15 {
    width: 15em;
}

.code16 {
    width: 16em;
}

.code17 {
    width: 17em;
}

.code18 {
    width: 18em;
}

.code19 {
    width: 19em;
}

.code20 {
    width: 20em;
}

.code25 {
    width: 25em;
}

.code26 {
    width: 26em;
}

.code27 {
    width: 27em;
}

.code28 {
    width: 28em;
}

.code29 {
    width: 29em;
}

.code30 {
    width: 30em;
}

.code40 {
    width: 40em;
}

.code50 {
    width: 50em;
}

.DivSegDTP {
    display: inline-block;
    min-width: 300px;
}

.DivSegREF {
    display: inline-block;
    min-width: 400px;
}

.DivSegCRC {
    display: inline-block;
    min-width: 400px;
}

.ShowHideBlock {
    display: inline-block;
}

.RemoveUndo {
    display: inline-block;
    min-width: 5px;
    vertical-align: top;
    padding-top: 1.3em;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    font-size: 9px;
    color: #800000;
    vertical-align: bottom;
}

/*red*/
.Remove {
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    color: #800000;
}

/*red*/
.CountryCode {
    display: inline-block;
    min-width: 100px;
    vertical-align: top;
    padding-top: 2em;
    font-size: 0.8em;
    text-align: left;
    font-weight: bold;
}

.ShowHideInlineBlock {
    display: inline-block;
    min-width: 5px;
    vertical-align: top;
    padding-top: 1.5em;
    cursor: pointer;
}

.ShowHideFlag {
    cursor: pointer;
}

.ShowHideHidden {
    visibility: hidden;
    display: none;
}

.InlineBlockLabel {
    font-size: 9px;
    font-weight: bold;
}

#vtabs-main hr {
    width: 70em;
    margin: 0px 0px 0px 0px;
    text-align: left;
    border: solid 1px #ccc;
}

/*#e80c4d*/
#vtabs-main hr.code30 {
    width: 30em;
    margin: 0px 0px 0px 0px;
    text-align: left;
    border: solid 1px #ccc;
}

#vtabs-main hr.code25 {
    width: 25em;
    margin: 0px 0px 0px 0px;
    text-align: left;
    border: solid 1px #ccc;
}

#vtabs-main hr.code20 {
    width: 20em;
    margin: 0px 0px 0px 0px;
    text-align: left;
    border: solid 1px #ccc;
}

#vtabs-main .htabs-nested hr {
    width: 65em;
    margin: 0px 0px 0px 0px;
    text-align: left;
    border: solid 1px #ccc;
}

/*#12076F*/
#vtabs-main .htabs-nested hr.code30 {
    width: 30em;
    margin: 0px 0px 0px 0px;
    text-align: left;
    border: solid 1px #ccc;
}

#vtabs-main .htabs-nested hr.code25 {
    width: 25em;
    margin: 0px 0px 0px 0px;
    text-align: left;
    border: solid 1px #ccc;
}

#vtabs-main .htabs-nested hr.code20 {
    width: 20em;
    margin: 0px 0px 0px 0px;
    text-align: left;
    border: solid 1px #ccc;
}

#vtabs-main .htabs-nested .htabs-nested hr {
    width: 60em;
    margin: 0px 0px 0px 0px;
    text-align: left;
    border: solid 1px #ccc;
}

/*#b200ff*/
#vtabs-main .htabs-nested .htabs-nested hr.code30 {
    width: 30em;
    margin: 0px 0px 0px 0px;
    text-align: left;
    border: solid 1px #ccc;
}

#vtabs-main .htabs-nested .htabs-nested hr.code25 {
    width: 25em;
    margin: 0px 0px 0px 0px;
    text-align: left;
    border: solid 1px #ccc;
}

#vtabs-main .htabs-nested .htabs-nested hr.code20 {
    width: 20em;
    margin: 0px 0px 0px 0px;
    text-align: left;
    border: solid 1px #ccc;
}

div.BatchScrollBox {
    overflow: scroll;
    height: 4.8em;
    overflow-x: hidden;
    width: 51em;
}

/*-----------------------------------------------------------------------------
  -----------------------------------------------------------------------------*/
.extraTemplate {
    display: none;
}

.cloneTemplate {
    display: none;
}

/*-----------------------------------------------------------------------------
  -----------------------------------------------------------------------------*/
.xxshort {
    width: 25px;
}

.xshort {
    width: 50px;
}

.short {
    width: 75px;
}

.med {
    width: 100px;
}

.long {
    width: 150px;
}

.xlong {
    width: 200px;
}

.xxlong {
    width: 250px;
}

.xxxlong {
    width: 300px;
}

.xxxxxxxxlong {
    width: 550px;
}

.date {
    text-align: right;
}

.count {
    text-align: right;
}

.money {
    text-align: right;
}

/*-----------------------------------------------------------------------------
      banner
  -----------------------------------------------------------------------------*/

.pageBanner {
    /*background-color: #eea320;*/
    /* Alveo orange */
    background-color: #eea320;
    color: white;
    border-color: darkgrey;
    border-radius: 8px;
    padding: 5px;
}

.informational {
    /*background-color: #9abb50;*/
    /* #eea320 is Alveo orange */
    background-color: #9abb50;
    color: white;
    border-color: darkgrey;
    border-radius: 8px;
    padding: 5px;
    font-size: small;
}

/*-----------------------------------------------------------------------------
  -----------------------------------------------------------------------------*/

.mw100 {
    max-width: 100px;
}

.mw150 {
    max-width: 150px;
}

.mw200 {
    max-width: 200px;
}

.mw250 {
    max-width: 250px;
}

/*-----------------------------------------------------------------------------
      jquery datatables 
  -----------------------------------------------------------------------------*/
.paginate_button {
    margin: 3px 3px 3px 3px;
    text-decoration: underline;
    cursor: pointer;
}

.current {
    text-decoration: none;
    font-weight: bold;
}

.DataNowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-striped > thead > tr > * {
    /* TODO: Need to decide on header color */
    background-color: #2882ac;
    /* background-color: #008fd1; */
    /* background-color: #2a6987; */
    color: white;
}

.table-striped > tbody > tr:nth-child(odd) > * {
    background-color: white;
    --bs-table-bg-type: none;
}

.table-striped > tbody > tr:nth-child(even) > * {
    background-color: #e2eff8;
    --bs-table-bg-type: none;
}

/* TODO: This is another possible row highlight option */
.table-hover > tbody > tr:not(.no-data):hover {
    outline: 3px solid #00aaff;
}

.table-hover > tbody > tr:not(.no-data):hover > * {
    /* TODO: Reivew both style options with the team/Evan, leaning more towards the gradient from blue to white */
    /* background-image: linear-gradient(#e4f7ff56, 70%, #3eccff69); */
    /* background-image: linear-gradient(#3eccff4f, #3eccff4f); */
}

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-type: none;
    --bs-table-bg-state: none;
}

/* TODO: See if there's a way to get these colors to take priority over the coloring defined above for the '.table-striped' for each row.
         Currently we need to add '!important" in order for it to prioritize these specific colors. */
.table-cell-error-bg {
    background-color: #f8d7da !important;
}

.table-cell-error {
    color: #721c24 !important;
}

.table-cell-warning-bg {
    background-color: #fff3cd !important;
}

.table-cell-warning {
    color: #856404 !important;
}

.table-cell-success-bg {
    background-color: #d4edda !important;
}

.table-cell-success {
    color: #155724 !important;
}

.table-cell-suspended-bg {
    background-color: #d6d6d6 !important;
}

.table-cell-suspended {
    color: #535353 !important;
}

/* Adds a small space between the "Entries per page" text and the entries-per-page selector/dropdown */
.dt-length {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Makes the loading indicator for datatables a little easier to see / read what it says */
.dt-processing {
    background-color: #abd9ffd7;
    border-radius: 10px;
    padding: 10px !important;
    width: 100% !important;
    max-width: 250px;
}

/*-----------------------------------------------------------------------------
  -----------------------------------------------------------------------------*/

.basicBorder {
    border: 1px solid black;
}

.stripe {
    color: black;
    background: repeating-linear-gradient(45deg, #fff, #d3d6ff 10px);
}

/*-----------------------------------------------------------------------------
  eligibility realTime
  -----------------------------------------------------------------------------*/

.errorWarning {
    /*border: 1px solid #AA0114;*/
    /*background: #f4d7e1;*/
    color: #aa0114;
}

.noBreak {
    text-wrap: none;
    white-space: nowrap;
}

.cursorPointer {
    cursor: pointer;
}

.roundButton8 {
    border-radius: 8px;
}

/*-----------------------------------------------------------------------------
  edits by Mac
  -----------------------------------------------------------------------------*/

body {
    font-family: Arimo, sans-serif !important;
    font-size: 16px !important;
    /*  1em;  */
}

.altTextFont {
    font-family: "Roboto Condensed", sans-serif !important;
    font-size: 12px !important;
}

/*-----------------------------------------------------------------------------
  eligibility realTime
  -----------------------------------------------------------------------------*/

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
  */
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* Set padding to display errors that occur during databinding */
.padding-error {
    padding-top: 20px;
}

@media only screen and (max-width: 767px) {
    .nofloat {
        float: none;
        padding: 10px 15px;
    }
}

.req:after {
    content: "   Enrollment Required";
    text-transform: none;
    font-size: smaller;
    color: blue;
}

.loader,
.loader:before,
.loader:after {
    border-radius: 50%;
}

.loader {
    /*color: #ffffff;*/
    color: #157efb;
    font-size: 11px;
    text-indent: -99999em;
    margin: 55px auto;
    position: relative;
    width: 10em;
    height: 10em;
    box-shadow: inset 0 0 0 1em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.loader:before,
.loader:after {
    position: absolute;
    content: "";
}

.loader:before {
    width: 5.2em;
    height: 10.2em;
    background: #ffffff;
    border-radius: 10.2em 0 0 10.2em;
    top: -0.1em;
    left: -0.1em;
    -webkit-transform-origin: 5.2em 5.1em;
    transform-origin: 5.2em 5.1em;
    -webkit-animation: load2 2s infinite ease 1.5s;
    animation: load2 2s infinite ease 1.5s;
}

.loader:after {
    width: 5.2em;
    height: 10.2em;
    background: #ffffff;
    border-radius: 0 10.2em 10.2em 0;
    top: -0.1em;
    left: 5.1em;
    -webkit-transform-origin: 0px 5.1em;
    transform-origin: 0px 5.1em;
    -webkit-animation: load2 2s infinite ease;
    animation: load2 2s infinite ease;
}

.primaryActionButton,
.primaryActionButton:hover,
.primaryActionButton:visited,
.primaryActionButton:active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    /*background-color: #eea320;*/
    background-color: #eea320;
    color: white;
    border-color: darkgrey;
    border-radius: 8px;
}

.chart-title {
    color: white;
    /*background-color: #2a6987;*/
    /* Alveo navy*/
    background-color: #2a6987;
    text-align: center;
    text-transform: uppercase;
}

.chart-serviceType th {
    padding: 10px;
}

.chart-serviceType td {
    padding-left: 10px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    /*border-bottom-color: #eea320;*/
    border-bottom-color: #eea320;
    text-align: center;
}

.chart-field {
    padding: 3px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    /*border-bottom-color: #eea320;*/
    border-bottom-color: #eea320;
}

.padRight5 {
    padding-right: 5px;
}

/* make valid html input controls regular (not green) FROM: #28a745 TO: #ced4da, FROM: rgba(40,167,69,.25) TO: rgba(206, 212, 218, 1) */
.custom-select.is-valid,
.form-control.is-valid,
.was-validated .custom-select:valid,
.was-validated .form-control:valid {
    border-color: #ced4da;
}

.custom-select.is-valid:focus,
.form-control.is-valid:focus,
.was-validated .custom-select:valid:focus,
.was-validated .form-control:valid:focus {
    border-color: #ced4da;
    box-shadow: 0 0 0 0.2rem rgba(206, 212, 218, 1);
}

.custom-select.is-valid ~ .valid-feedback,
.custom-select.is-valid ~ .valid-tooltip,
.form-control.is-valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-tooltip,
.was-validated .custom-select:valid ~ .valid-feedback,
.was-validated .custom-select:valid ~ .valid-tooltip,
.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-control:valid ~ .valid-tooltip {
    display: block;
}

.form-control-file.is-valid ~ .valid-feedback,
.form-control-file.is-valid ~ .valid-tooltip,
.was-validated .form-control-file:valid ~ .valid-feedback,
.was-validated .form-control-file:valid ~ .valid-tooltip {
    display: block;
}

.form-check-input.is-valid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label {
    color: #ced4da;
}

.form-check-input.is-valid ~ .valid-feedback,
.form-check-input.is-valid ~ .valid-tooltip,
.was-validated .form-check-input:valid ~ .valid-feedback,
.was-validated .form-check-input:valid ~ .valid-tooltip {
    display: block;
}

.custom-control-input.is-valid ~ .custom-control-label,
.was-validated .custom-control-input:valid ~ .custom-control-label {
    color: #ced4da;
}

.custom-control-input.is-valid ~ .custom-control-label::before,
.was-validated .custom-control-input:valid ~ .custom-control-label::before {
    background-color: #e4e8eb;
    /*#71dd8a*/
}

.custom-control-input.is-valid ~ .valid-feedback,
.custom-control-input.is-valid ~ .valid-tooltip,
.was-validated .custom-control-input:valid ~ .valid-feedback,
.was-validated .custom-control-input:valid ~ .valid-tooltip {
    display: block;
}

.custom-control-input.is-valid:checked ~ .custom-control-label::before,
.was-validated
    .custom-control-input:valid:checked
    ~ .custom-control-label::before {
    background-color: #f0f1f3;
    /*#34ce57*/
}

.custom-control-input.is-valid:focus ~ .custom-control-label::before,
.was-validated
    .custom-control-input:valid:focus
    ~ .custom-control-label::before {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(206, 212, 218, 1);
}

.custom-file-input.is-valid ~ .custom-file-label,
.was-validated .custom-file-input:valid ~ .custom-file-label {
    border-color: #ced4da;
}

.custom-file-input.is-valid ~ .custom-file-label::before,
.was-validated .custom-file-input:valid ~ .custom-file-label::before {
    border-color: inherit;
}

.custom-file-input.is-valid ~ .valid-feedback,
.custom-file-input.is-valid ~ .valid-tooltip,
.was-validated .custom-file-input:valid ~ .valid-feedback,
.was-validated .custom-file-input:valid ~ .valid-tooltip {
    display: block;
}

.custom-file-input.is-valid:focus ~ .custom-file-label,
.was-validated .custom-file-input:valid:focus ~ .custom-file-label {
    box-shadow: 0 0 0 0.2rem rgba(206, 212, 218, 1);
}

.bootstrap-select.is-valid .dropdown-toggle,
.was-validated .bootstrap-select .selectpicker:valid + .dropdown-toggle {
    border-color: #ced4da;
}

/* make invalid html input controls orange (not red) FROM: #dc3545 TO: #faa31b, FROM: rgba(220,53,69,.25) TO: rgb(250,163,27) */
.custom-select.is-invalid,
.form-control.is-invalid,
.was-validated .custom-select:invalid,
.was-validated .form-control:invalid {
    /*border-color: #faa31b;*/
    border-color: #eea320;
}

.custom-select.is-invalid:focus,
.form-control.is-invalid:focus,
.was-validated .custom-select:invalid:focus,
.was-validated .form-control:invalid:focus {
    /*border-color: #faa31b;*/
    border-color: #eea320;
    box-shadow: 0 0 0 0.2rem rgb(250, 163, 27);
}

.custom-select.is-invalid ~ .invalid-feedback,
.custom-select.is-invalid ~ .invalid-tooltip,
.form-control.is-invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-tooltip,
.was-validated .custom-select:invalid ~ .invalid-feedback,
.was-validated .custom-select:invalid ~ .invalid-tooltip,
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-tooltip {
    display: block;
}

.form-control-file.is-invalid ~ .invalid-feedback,
.form-control-file.is-invalid ~ .invalid-tooltip,
.was-validated .form-control-file:invalid ~ .invalid-feedback,
.was-validated .form-control-file:invalid ~ .invalid-tooltip {
    display: block;
}

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

.form-check-input.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-tooltip,
.was-validated .form-check-input:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-tooltip {
    display: block;
}

.custom-control-input.is-invalid ~ .custom-control-label,
.was-validated .custom-control-input:invalid ~ .custom-control-label {
    color: #dc3545;
}

.custom-control-input.is-invalid ~ .custom-control-label::before,
.was-validated .custom-control-input:invalid ~ .custom-control-label::before {
    background-color: #efa2a9;
}

.custom-control-input.is-invalid ~ .invalid-feedback,
.custom-control-input.is-invalid ~ .invalid-tooltip,
.was-validated .custom-control-input:invalid ~ .invalid-feedback,
.was-validated .custom-control-input:invalid ~ .invalid-tooltip {
    display: block;
}

.custom-control-input.is-invalid:checked ~ .custom-control-label::before,
.was-validated
    .custom-control-input:invalid:checked
    ~ .custom-control-label::before {
    background-color: #e4606d;
}

.custom-control-input.is-invalid:focus ~ .custom-control-label::before,
.was-validated
    .custom-control-input:invalid:focus
    ~ .custom-control-label::before {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgb(250, 163, 27);
}

.custom-file-input.is-invalid ~ .custom-file-label,
.was-validated .custom-file-input:invalid ~ .custom-file-label {
    /*border-color: #faa31b;*/
    border-color: #eea320;
}

.custom-file-input.is-invalid ~ .custom-file-label::before,
.was-validated .custom-file-input:invalid ~ .custom-file-label::before {
    border-color: inherit;
}

.custom-file-input.is-invalid ~ .invalid-feedback,
.custom-file-input.is-invalid ~ .invalid-tooltip,
.was-validated .custom-file-input:invalid ~ .invalid-feedback,
.was-validated .custom-file-input:invalid ~ .invalid-tooltip {
    display: block;
}

.custom-file-input.is-invalid:focus ~ .custom-file-label,
.was-validated .custom-file-input:invalid:focus ~ .custom-file-label {
    box-shadow: 0 0 0 0.2rem rgb(250, 163, 27);
}

.bootstrap-select.is-invalid .dropdown-toggle,
.error .bootstrap-select .dropdown-toggle,
.has-error .bootstrap-select .dropdown-toggle,
.was-validated .bootstrap-select .selectpicker:invalid + .dropdown-toggle {
    /*border-color: #faa31b;*/
    border-color: #eea320;
    /*#b94a48*/
}

/* Put these css rules after the bootstrap ones. */
.formInputReqHighlight {
    background-color: #e6db5a;
    /*border-color: #eea320;*/
    /*#dc3545*/
    border-color: #eea320;
}

.formInputReqHighlight .btn {
    background-color: #e6db5a;
    /*border-color: #eea320;*/
    /*#dc3545*/
    border-color: #eea320;
}

.formInputReqHighlight.bootstrap-select .btn {
    background-color: #e6db5a;
    /*border-color: #eea320;*/
    /*#dc3545*/
    border-color: #eea320;
}

.formInputReqHighlight .filter-option,
.formInputReqHighlight .filter-option-inner,
.formInputReqHighlight .filter-option-inner-inner {
    background-color: #e6db5a;
    /*border-color: #eea320;*/
    /*#dc3545*/
    border-color: #eea320;
}

/*-----------------------------------------------------------------------------
      icons
  -----------------------------------------------------------------------------*/
div#alveo-account-contact {
    background: url("/content/icons/AlveoPlusGreen40.png");
    background-position: 0 0;
    width: 40px;
    height: 40px;
}

div#alveo-account-contact:hover {
    background: url("/content/icons/AlveoPlusBlue40.png");
    background-position: 0 0;
}

div#alveo-account-name {
    background: url("/content/icons/AlveoUsersGreen40.png");
    background-position: 0 0;
    width: 40px;
    height: 40px;
}

div#alveo-account-name:hover {
    background: url("/content/icons/AlveoUsersBlue40.png");
    background-position: 0 0;
}

div#alveo-idot-navpage {
    background: url("/content/icons/AlveoIotGreen40.png");
    background-position: 0 0;
}

div#alveo-idot-navpage:hover {
    background: url("/content/icons/AlveoIotBlue40.png");
    background-position: 0 0;
}

div#logoff-service {
    background: url("/content/icons/AlveoArrowGreen40.png");
    background-position: 0 0;
    width: 40px;
    height: 40px;
}

div#logoff-service:hover {
    background: url("/content/icons/AlveoArrowBlue40.png");
    background-position: 0 0;
}

/*-----------------------------------------------------------------------------
    Scrollbar
-----------------------------------------------------------------------------*/
/* TODO: Currently this changes the way ALL scrollbars look when we only want the scrollbars on our components not the whole page, might need
to have something like...

div,body,etc::-webkit-scrollbar { ... }

...or something like that so that way only the scrollbars on our components are changed and not for the base page. You can easily see
what I'm referring to by zooming in by a lot (500%+) and then looking at the scrollbars on the bottom/right side of your screen.
*/
/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #90c7e0;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #7ab0c9;
}

/* Firefox-only styles */
@-moz-document url-prefix() {
    * {
        scrollbar-width: auto;
        scrollbar-color: #90c7e0 transparent;
    }
}

/*-----------------------------------------------------------------------------
    Form Styling
-----------------------------------------------------------------------------*/
.form-select {
    cursor: pointer;
}

/*-----------------------------------------------------------------------------
    Header Customer Chooser Styling
-----------------------------------------------------------------------------*/
#header-customer-chooser {
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
}

#header-customer-chooser .card {
    margin-bottom: 0 !important;
    border: none;
    box-shadow: none;
    width: auto !important;
}

#header-customer-chooser .card-header {
    display: none;
    padding: 0.25rem 0.5rem;
    background-color: transparent;
    border: none;
}

#header-customer-chooser .card-header div {
    font-size: 0.875rem !important;
    font-weight: normal !important;
    margin: 0;
}

#header-customer-chooser .card-body {
    padding: 0.25rem 0.5rem;
    min-width: auto !important;
}

#header-customer-chooser .form-select {
    font-size: 0.875rem;
    padding: 0.25rem 1.75rem 0.25rem 0.5rem;
    min-width: 400px !important;
    max-width: 800px !important;
    width: auto !important;
}

#header-customer-chooser .form-select option {
    white-space: normal;
    word-wrap: break-word;
    padding: 0.25rem 0.5rem;
}