nav {overflow:hidden; height:100% !important}
input[type=text] {border:1px solid #a9a9a9; padding:5px; line-height:45px; height:40px;}
select {border:1px solid #a9a9a9; padding:5px; line-height:45px; height:40px;}
textarea {border:1px solid #a9a9a9; width:96%; padding:0 2%}
.logout {background-color:transparent; border:none; padding:15px 0 10px 15px}
.responsive-img {width:100%; height:auto}
.col-md-6 img {width:100%; heigh:auto}
.form-wrapper {width:100%; float:left}
.col96 {width:96%; padding:0 2%}
.col100 {width:100%; padding:5px}
.col50 {width:48%; padding: 5px}
.onecol {width:96%; float:left; margin:2%}
.form-half {width:48%; float:left; margin:1%}
.txtcenter {text-align:center}
.infotxtw {font-size:.75em; color:#fff; font-weight:bold; padding:2% 0}
.formcol {width:30%; padding:1%; margin:1%; float:left}
.bhalf {width:46%; padding:1%; margin:1%; float:left}
.strikethru {text-decoration: line-through;}
.hptrio {width:33%; float:left; text-align:center}
.required {color:#f00}
.required-star {color: red}
.magtrio {background-color:#116cac; color: #fff; padding:5% 0!; margin:5%; min-height: 200px}
.mhdr1 {font-size:1.5em; padding:3% 0;}
.mhdr2 {font-size:4em; padding:3% 0}
.yellow {color:yellow; font-size:1em}
a.button:link { color:#fff; text-decoration:none; font-weight:normal; }
a.button:visited { color: #fff; text-decoration:none; font-weight:normal; }
a.button:hover { color: #fff; text-decoration:underline; font-weight:normal; }
a.button:active { color: #fff; text-decoration:none; font-weight:normal; }

@media all and (min-width:481px) and (max-width:991px) {
.col-md-6 {width:50%; float:left}
.form-half {width:100%; float:left}
.formcol {width:100%; float:left}
.hptrio {width:100%; float:left}
}

@media all and (min-width:120px) and (max-width:480px) {
.form-half {width:100%; float:left}
.formcol {width:100%; float:left}
.bhalf {width:100%; float:left}
.hptrio {width:100%; float:left}
}

/* 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 */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

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

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

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

.validation-summary-valid {
    display: none;
}

.multi-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    appearance: none; /* Remove default styling */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="gray" d="M7 10l5 5 5-5z" /></svg>'); /* Custom arrow icon */
    background-repeat: no-repeat;
    background-position: right 10px center; /* Position the arrow */
    cursor: pointer;
}

.select2-results__option, .select2-search__field, .select2-selection__rendered li, .select2-selection__rendered li span {
    font-size: 14px !important;
}

.multi-select:focus {
    border-color: #007bff; /* Change border color on focus */
    outline: none; /* Remove default outline */
}

#loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100vh;
    width: 100%;
    z-index: 9999;
    background: #00000085;
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}