/* Minification failed. Returning unminified contents.
(701,47): run-time error CSS1046: Expect comma, found '0'
(701,51): run-time error CSS1046: Expect comma, found '/'
(701,74): run-time error CSS1046: Expect comma, found '175'
(701,82): run-time error CSS1046: Expect comma, found '/'
(702,39): run-time error CSS1046: Expect comma, found '0'
(702,43): run-time error CSS1046: Expect comma, found '/'
(702,66): run-time error CSS1046: Expect comma, found '175'
(702,74): run-time error CSS1046: Expect comma, found '/'
 */
html * {
    font-size: 16px; /* bootstrap 5 default is 16px */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* override bootstrap 5. NOTE: don't use !important. Otherwise  Font Awesome  icons are incorrectly displayed!'*/
}

.card-header-submit {
    background-image: linear-gradient(to bottom, #e6f9d2, #ffffff);
    border: none !important;
}

.collapse-default {
    background: #ffffff;
    border-radius: 0 0 8px 8px !important;
}

body {
    margin: 0px !important;
    padding: 0px !important;
    width: 100% !important;
}

.checkbox label
/* BEGIN: This makes contents (e.g. AG logo, menu items on nav bar, page contents) left justify on full screen */
.container {
    margin-left: 85px !important;
}

.container-fluid {
    margin-left: 85px !important;
}
/* END: */

.live-help-container {
    width: 250px;
    flex-basis: 250px;
    margin-left: 15px;
}

#life-chat-info p {
    font-size: 0.92em !important;
    color: #757575;
}

/* BEGIN: Prevent unnecessary horizontal scroll bar when accordion panel on small screen. Min value 1240px */
/* This works in conjunction with .center-div */
@media (max-width: 1240px) {
    /*  .body-content {
        background: #9acffe;
    }*/

    .container {
        margin-left: 2% !important;
    }

    .container-fluid {
        margin-left: 2% !important;
    }
}
/* END */

.navbar-right {
    margin-right: 10px !important; /* "About" menu item */
}

a, input[type='checkbox'] {
    cursor: pointer;
}

/* define inputs widths .card { */
.accordion-item {
    min-width: 325px !important; /* smallest possible without truncated when browser has smallest width */
    border-radius: 9px !important;
    background-image: linear-gradient(to bottom, #b4c3cb, #f0f3f5);
}

form {
    /* Set the width to match that of the viewport. */
    /*width: 70vw;*/ /* this makes accordion panels expand when screen expands*/
}

/* 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 custom default width on the form input elements since they're 100% wide by default */
/* DO not set width here! set width of .card instead */
input,
/*select,
textarea {
    max-width: 700px!important;
}
*/
/* override default max-width*/
input.midWidthInput {
    /*width:500px!important;*/
    /*min-width: 230px!important;*/
}

.modal-backdrop {
    opacity: 0.5;
    z-index: 999; /* Must be 0 or greater to cover accordion panels.*/
    background: #505050; /* must specify background color. Otherwise input fields background is not totally covered. */
}

/* Transparent in-progress modal */
/*.modal-inprogress .modal-backdrop {
    opacity: 0.0 !important;
    z-index: 999 !important;
    background: transparent !important;
}*/

/* non-Transparent in-progress modal */
/*.modal-inprogress .modal-backdrop {
    opacity: 0.5 !important;
    z-index: 999 !important;
    background: #505050;
}*/

.inprog-modal-center-dialog {
    top: 35% !important; /* 35% show in progress modal vertically center of the page , 10% is just below the nav bar */
}

/* smallest browser width on PC */
@media screen and (max-width: 460px) {
    .modal-dialog {
        left: 2% !important;
        width: auto !important;
    }

    .inprog-modal-center-dialog {
        top: 3% !important;
        left: 25% !important;
        position: fixed !important;
        height: 200px;
    }

    /*    .body-content {
        background: green !important;
    }*/
}

/* mobile vertical screen - defined AFTER css for  smallest browser width */
@media screen and (max-width: 415px) {
    .modal-dialog {
        position: fixed !important;
        left: 2% !important;
        width: 95% !important;
    }

    .inprog-modal-center-dialog {
        top: 3% !important;
        left: 25% !important;
        position: fixed !important;
        height: 200px;
    }

    /*    .body-content {
        background: greenyellow !important;
    }*/
}

/* for mobile landscape */
@media screen and (max-width: 700px) {
    .modal-dialog {
        width: 100%;
        left: 12%;
        top: 2%;
        margin: 0;
        padding: 0;
    }

    .modal-content {
        height: auto;
        min-height: 70%;
    }

    .inprog-modal-center-dialog {
        top: 10% !important;
        position: fixed !important;
        left: 25%;
        width: 50% !important;
    }

    .modal-body {
        margin-bottom: -20px !important;
    }
}

.modal-footer {
    border: none;
}

.no-shadow-modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0);
    -moz-box-shadow: 0 5px 15px rgba(0,0,0,0);
    -o-box-shadow: 0 5px 15px rgba(0,0,0,0);
    box-shadow: 0 5px 15px rgba(0,0,0,0);
    background: transparent !important;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

/*.numberCircle {
    border-radius: 50%;
    width: 15px;
    height: 15px;
    padding: 8px;
    background: #fff;
    border: 2px solid darkblue;*/
/* color: red;*/
/*text-align: center;
}*/
.numberCircle {
    height: 30px;
    width: 30px;
    padding: 5px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    color: black;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #005fb3;
    /* color: red;*/
    text-align: center;
}

/* JQuery validation error text color */
/* Also Using this for the popup received when server validation fails*/
.error, ul#errorsList li {
    color: #d9534f !important; /* bootstrap red d9534f*/
    font-size: 14pt;
    font-weight: 500 !important; /* 500 is normal weight, 600 is bold */
}

/* for input within label */
label:focus-within {
    color: #025197;
    font-weight: bold !important;
}

/* 700px is when in-line radio buttons start to wrap */
@media (max-width: 700px) {
    .form-check-inline {
        display: block !important;
    }
}

/* Portrait phones and smaller */
/*@media (max-width: 480px) {
    .form-check-inline {
        display: block!important;
    }
}*/
/* radio buttons and label spacing */
.form-check-inline.checkboxes input {
    margin-right: 5px; /* must use margin-right */
}

.checkboxes label {
    display: inline-block;
    white-space: normal; /* to make label text wrapped for small screen */
    margin-left: 10px !important;
}

.checkboxes input, .form-check-label > input[type="checkbox"] {
    vertical-align: middle;
    margin-bottom: 5px;
    margin-right: 5px;
}

.big-checkbox {
    width: 2.7rem;
    height: 2.7rem;
}

.medium-checkbox {
    width: 2.2rem;
    height: 2.2rem;
}

.medium-radio {
    width: 2.2rem;
    height: 2.2rem;
}

.button-row {
    padding-bottom: 20px !important;
    padding-top: 10px !important;
}

/*Keeps the first form-group's label from overlapping with the highlighted accordion header */
.accordion-body > .form-group:first-child {
    margin-top: 15px;
}

.form-group {
    width: 90%;
    max-width: 700px; /* must defined!*/
    min-width: 345px; /*must be less than .card min-width */
}

.form-group .form-check .form-check-label {
    margin-top: 5px !important; /* vertical space between checkboxes/radio*/
}

.form-group .form-check-inline .form-check-label {
    margin-left: 5px !important; /* horizontal space between in-line checkboxes/radio */
}

.form-group.required .control-label:after {
    font-size: 12px;
    color: #ff6666;
    margin-left: 2px;
    font-family: 'Glyphicons Halflings';
    content: '●';
    font-weight: bold;
    padding-bottom: 35px;
}

.accordion-body-centered, .flex-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn-xs {
    /* margin-left: 10px!important;*/
    width: 90px !important;
    padding: 5px 5px !important;
    font-size: 12px !important;
    line-height: 1.0 !important;
    border-radius: 3px !important;
}

.btn-fix-length {
    width: 140px !important;
}

.not-bold {
    font-weight: normal !important;
}

.dropdown-menu > li > a:hover, div#dynamicCountyList > li > a:hover {
    background-image: none;
    background-color: #d9e6f2;
}

div#dynamicCountyList > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333333;
    white-space: nowrap;
}

.medium-spinner-border {
    vertical-align: top; /* this vertically align text with the circle*/
    width: 3.7rem;
    height: 3.7rem;
    margin-left: 10px !important;
}

.large-spinner-border {
    vertical-align: top; /* this vertically align text with the circle*/
    width: 6.2rem;
    height: 6.2rem;
}

/* Firefox, Chrome, Edge */
::placeholder {
    color: #c7c7c7 !important;
    white-space: normal !important;
    /*opacity: 1;*/ /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #c7c7c7 !important;
}

/* Firefox */
input:focus::-moz-placeholder {
    color: #9acffe !important;
    font-size: 0.9em !important;
    font-weight: 400 !important;
}

/* Chrome and Edge */
input:focus::-webkit-input-placeholder {
    color: #4eacfd !important;
    font-size: 0.9em !important;
    font-weight: 400 !important;
}

.control-label.labelBlueColor {
    font-weight: 500 !important; /* 500 is normal weight, 600 is bold */
    color: #025197;
    /* Do not use values below 0. Otherwise a label is not shown after a validation error message is not displayed. O is sufficient for a jQuery validation error message to overlay the label text */
    z-index: 0 !important;
}

label.control-label.labelBlueColor{
    /* So a multi-line label doesn't cover up the border on the top right */
    max-width: 90%;
}


.textOnInput, .radioContainer {
    position: relative;
}

/* float label above top left of container */
.textOnInput label {
    position: absolute;
    top: -13px;
    left: 10px;
    padding-top: 2px;
    padding-left: 5px;
    padding-right: 5px;
    z-index: 1;
    font-weight: normal !important;
    background: white;
}

/*Help line the text up with the radio button */
input[type="radio"] {
    margin-top: -1px;
    vertical-align: middle
}


/*Added to keep the subject dropdown label from covering the header background */
.dropdown {
    margin-top: 5px;
}

/*Center text for the General Help header button*/
#genHelpHeader {
    display: flex;
    align-items: center;
}
/*.textOnInput label:after {
    width: 100%;
    height: 13px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
}*/
.required.textOnInput .control-label:after, .required.radioContainer .control-label:after {
    position: relative;
    font-size: 12px;
    color: #ff6666;
    margin-left: 2px;
    font-family: 'Glyphicons Halflings';
    content: '●';
    font-weight: bold;
    z-index: -1;
    padding-bottom: 40px;
}

/* :focus if height is change other elements (e.g. buttons, checkboxes) needed to be clicked twice */
/* use padding less than 32px to change input height does cause "click twice" issue */
.form-control.onFocus:focus {
    /* color: #0275d8 !important;*/
    color: #025197 !important;
    padding-bottom: 30px; /* subtle height change is best! */
    padding-top: 30px; /* subtle height change is best! */
    font-size: 1.2em;
    font-weight: 500 !important;
}

/* "blur" */
.form-control.onFocus {
    min-height: 57px;
}

/* label must be immediately after input*/
.form-group input:focus + label, .form-group textarea:focus + label {
    font-weight: bold !important;
}

.bold {
    font-weight: bold !important;
}

.padding-1-5 {
    padding: 1.5rem;
}

.form-row .btn {
    margin-left: 20px;
}

.dropdown button:focus + label {
    font-weight: bold !important;
}

label.error {
    font-weight: bold !important;
    max-width: 90%;
}

.dropdown-menu {
    width: 100% !important; /* so that dropdown menu width is the same as dropdown box width */
}

.dropdown-item {
    white-space: normal !important;
}

.dropdown-toggle {
    width: 100% !important; /* works in conjunction with form-group max-width */
    white-space: normal !important;
    border: 1px solid #cccccc !important;
    border-radius: 7px !important;
    min-height: 55px;
    /*text-align: left!important;*/ /* dropdown button text alignment */
}

    .dropdown-toggle:focus {
        color: #0275d8 !important;
        border: 1px solid #4eacfd !important;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(2, 117, 216, 0.3) !important;
        outline: none !important; /* remove chrome black outline */
    }

/*Updated this to also need the 'required' class to put the red dot on dropdowns as I have a dropdown that is not required*/
.dropdown.required .control-label:after {
    position: relative;
    font-size: 12px;
    color: #ff6666;
    margin-left: 2px;
    font-family: 'Glyphicons Halflings';
    content: '●';
    font-weight: bold;
    z-index: -1;
    padding-bottom: 40px;
}

/* override bootstrap active blue background, which is too bright, used for drop-down active (selected) item */
a.active {
    background-color: #026dca !important;
}

.text-muted-light {
    color: #b8b8b8
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.accordion-card-reader {
    height: 45px;
    /*30px;*/
    /*display: table;*/
    display: flex;
    align-items: center;
    align-content: space-around;
    margin-top: 0;
    border-radius: 8px !important;
}

.accordion-card-reader-header {
    vertical-align: middle;
    margin-top: 0px !important;
    flex-grow: 1;
    /*display: table-cell;*/
}

.accordionCheckMark, .accordionAckFail {
    font-size: 1.5em !important;
    float: right;
}

.disabledCard {
    opacity: 0.4;
}

.google-translate {
    /*float: right;*/
    margin-top: -22px;
    margin-right: 5px;
}

/* This makes reCAPTCHA pop-up center on a smallest screen without horizontal scroll bar */
.g-recaptcha-bubble-arrow + div {
    position: fixed !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.form-control .medium-checkbox {
    margin-bottom: 8px;
}

.tab {
    margin-left: 4em;
}

#customHelpHtml {
    border: 1px solid #cccccc !important;
    border-radius: 7px !important;
    padding-left: 1em;
}

/*Added so the relevant dropdown errors completely covers the subject label and the error does not cover the title/header */
#victimAgeRange-error, #VictimSuspectRelationship-error {
    margin-top: 5px;
}

iframe[title="recaptcha challenge expires in two minutes"] {
    background: #f9f9f9;
    border: 2px solid #999999;
    border-radius: 4px;
}

ul.noListStyle {
    list-style-type: none;
}

ul.noPaddingInlineStart {
    padding-inline-start: 0px;
}


ul.subjectHelp button {
    margin: 0;
    padding: 0.125em;
    font-weight: bold;
    font-size: 110%;
    border: thin solid transparent;
    border-radius: 4px;
    background-color: transparent;
    word-spacing: -0.5em;
}

ul.subjectHelp button:focus {
    /*border-color: #4eacfd;*/
}

ul.subjectHelp button:active {
    background-color: #bbb;
}

ul.subjectHelp .desc {
    margin: 0;
    padding: 0.5em;
    font-size: 110%;
    display: none;
    background-color: #fffedb;
}

div.dropdown ul {
    max-height: 26em;
    overflow: auto;
}

#btnShowHelp {
    font-size: 15px !important;
}

.btn-link {
    color: #275176;
}

.btn-link[aria-disabled='true'] {
    color: #494f54 !important;
}

.btn-link[aria-disabled='false']:hover {
    color: #777 !important;
}

.dropdown-search {
    /* used in dropdowns.js to targe tall input fields for searching drop-down selections*/
    /* width set to 100% so the user can click anywhere in the row to start searching without closing the list of options */
    width: 100%;
}

/* From internal css*/
.bsInputFocus, textarea:focus {
    color: #212529 !important;
    background-color: #fff !important;
    border-color: #66afe9 !important;
    outline: 0 !important;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%) !important;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%) !important;
}

/* Yost's color pallete */
.topbar {
    background: #354851 !important;
}

.navbar-static-top {
    background-color: #465d6b !important;
    color: #fff;
    opacity: 1 !important;
    border-bottom: 3px solid #b8974d;
    background-image: none !important;
    padding: 0.5rem;
}

.btn-primary {
    background-color: #354851 !important;
    border-color: #354851 !important;
    background-image: none !important;
}

.btn-primary:hover {
    background-color: #465d6b !important;
    color: #333333;
}

.btn-success {
    background-color: #487870 !important;
    border-color: #487870 !important;
    background-image: none !important;
}

.btn-success:hover {
    background-color: #588880 !important;
    color: #333333;
}

.hidden-caret {
    caret-color: transparent;
}

input[type=checkbox] {
    accent-color: #d2dbe0 !important;
}

input[type=radio]:checked {
    background-color: #65869a !important;
}

h1 {
    margin-top: 0;   
}

.text-awarning {
    color: #a4621f; /*Accessibility close to orange/yellow */
    font-size: 16pt;
}

.accordion-container {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    flex-grow: 1;
    align-items: stretch;
    flex-basis: 75%;
    margin-left: 5px;
    margin-right: 5px;
    max-width: 1270px;
}

html,body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

footer {
    align-self: end;
    margin-right: 15px;
}

/*This is the max size for which the accordion will wrap in the flex container so we want the text for the live help to expand to fill the space*/
@media (max-width: 1118px) {
    .live-help-container {
        max-width: 1000px;
        flex-grow: 1;
    }
}

@media (min-width: 1118px){
    .accordion-item {
        max-width: 90%;
    }

    .live-help-container {
        position : fixed;
    }

    #sidebar-placeholder {
        width: 250px;
        margin-left:15px;
    }

}

/* AG logo click-able div */
#agLogoDiv {
    height: 100%;
    margin-left: 5px;
    width: 270px;
    cursor: pointer;
}

#agLogoDiv:hover {
    background: #8f99a3; /* lighter shade of nav-item-main background */
    opacity: 0.2;
}

/*
    
.accordionTitleButton {
        /* empty - used to access accordion button elements 
    }
    
.address.manual-entry {
    /* empty - used to add/remove required attribute based on anonymous and/or if address autocomplete is used 
}

.address.auto-entry {
    /* empty - used to add/remove required attribute based on anonymous and/or if address autocomplete is used 
}

.address-entry-option {
    /* empty - used to add/remove required attribute based on if is anonymous and isBiz 
}

.formNotValidated {
    /* empty - used to indicate a form that has never been validated
}

.show-inprog-modal {
    /* empty - used for in-progress modal 
}

.resetForm {
    /* empty - used for reset buttons 
}

.dropDownSelected {
    /* empty - used for drop-down selected hidden input 
}

.default-dropdown-item {
    /* empty - use to specify default selected item  
}

.addressVerified {
    /* empty - used for show/hide glyphicon
}

.static-label {
    /* empty - use to exclude label from hidden 
}

.modal-close-button {
    /* empty - used to target custom modal close buttons 
}

.phone {
    /* empty - used in InquiryFormInputMasks.js via jquery to set the input mask 
}

.optional-input-mask {
    /* empty - used in Handlers to validate these fields on click inside the form. Doing this because when leaving a form the value is checked before the mask is removed
}
.modal-focusable {
    /*empty - used to trap the tab key inside modals by only allowing to select elements with this class
}

.zip-input-mask {
    /*empty - used to set input mask for the varios zip code inputs 
}

.caller-self {
    /*empty - used for hiding/showing elements when the self/other radio button is checked 
}

.victim-current-address {
    /*empty - used for hiding/showing elements based on the 'Is Victim currently at this home address' radio button selection 
}

.business-input {
    /*empty - used for validating fields dependent on if submission is by an individual or a business 
}
.form-data {
    /*empty - used for jquery serializeArray() 
}
/*.focusOnHover {*/
/* empty - use to make elements (e.g. buttons) focus on hover to work with input hight resized on focus */
/*}*/