.loading-font {
    font-family: "Segoe UI",Roboto,"Helvetica Neue","-apple-system",BlinkMacSystemFont,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: .88rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

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

.loading-border-primary {
    border-color: #bfbfbf;
}

.loading {
    width: 140px;
    height: 140px;
}

.loading-caption {
    font-size: 1.5rem;
    font-weight: 600;
}

.loading-border {
    border-width: 4px;
    border-style: solid;
}

.loading-image-wrapper {
    width: 120px;
    height: 120px;
    opacity: 0;
}
.logo-container .logo-dds {
    background-color: #e6e6e6;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    cursor: pointer;
    margin-left: 16px;
    width: 80px;
    height: 26px;
    mask-image: url("../images/dds-white-logo.svg");
    -webkit-mask-image: url("../images/dds-white-logo.svg");
}

.logo-container .logo-ct {
    background-image: url("../images/ctgov-logo.svg");
    background-repeat: no-repeat;
    background-size: auto;
    width: 60px;
    height: 32px;
    margin: auto;
}

.sidebar, .logo-container {
    background-color: #343a40 !important;
}

.app-sidebar {
    height: 95%;
    color: #e6e6e6
}

.logo-container .dx-menu-item {
    color: #ffffff
}

.logo-container .dropdown-menu {
    background-color: #343a40;
}

.navbar .dx-menu-item-text {
    font-size: 1.1em;
}

body {
    background-color: #dee2e6;
}
.form-header {
    padding-left: 15px;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.page-description {
    margin-bottom: 24px;
}

.card {
    box-shadow: 0 0px 4px 1px #007bff
}

.table-bordered th, .table-bordered td {
    border: 1px solid #a3a8ad;
}

textarea, textarea.form-control, input.form-control, input[type=text],
input[type=password], input[type=email], input[type=number], [type=text].form-control,
[type=password].form-control, [type=email].form-control, [type=tel].form-control,
[contenteditable].form-control {
    box-shadow: inset 0 -1px 0 #9cd1fb;
}

.card-header {
    background-color: #007bff54;
}

.sidebar {
    box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 62%);
}


@media (min-width: 1200px) {

    .footer {
        box-shadow: 0px 0px 8px 0px rgb(0 0 0 / 62%);
    }
}

.navbar {
    box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 62%);
}


.popup {
    height: calc(100vh - 3.5rem);
    max-width: 900px
}

    .popup > .modal-content {
        top: 50%;
        transform: translate(0%, -50%);
    }

#blazor-error-ui {
    z-index : 2000;
}
.individual-dropdown .dropdown-menu {
    min-width: 450px !important;
}

.dxbs-tagbox .dx-blazor-tag:before {
    background-color: #2196f3;
    opacity: 0.55;
}

.blazored-toast-container {
    position: absolute;
    z-index: 2000;
    padding-left:0rem !important;
}

.blazored-toast {
    padding: 0.5rem 1.25rem;
    position:fixed
}

@media (min-width: 576px) {
    .position-topleft {
        top: 0rem;
        left: 0rem;
    }
    .blazored-toast {
        width: 80%;
    }
}
.bg-state-ct {
    background-color: #3a95d2
}

.phone-contact-icon {
    background-image:url("../images/phone-contact.svg")
}
.envelope-icon {
    background-image: url("../images/envelope.svg")
}
.help-icon {
    width:33px;
    height:33px;
    display:inline-block;  
}
.help-contact-group {
    display:flex;
    justify-content:center;
    align-items:center;
}
.help-container {
    font-size:1rem;
    width:80%;
    margin:auto;
}
/*This is added to fix the Date controls not showing a red border when not valid*/
.dxbs-textbox.invalid .form-control, .dxbs-memo.invalid .form-control, .dxbs-spin-edit.invalid .form-control, .dxbs-combobox.invalid .form-control, .dxbs-date-edit.invalid .form-control, .dx-listbox-scrollable.invalid.form-control, .dx-listbox-scrollable.invalid .form-control, .dxbs-listbox.invalid.form-control, .dxbs-listbox.invalid .form-control, .dxbs-calendar.invalid, .dxbs-checkbox.invalid .custom-checkbox .custom-control-input + .custom-control-label::before {
    box-shadow: none;
    border-bottom: 1px dotted red;
}

/*This is to show blue color for row deatils and it's Tab Buttons*/
.dxbs-gridview-row-details .nav-link.active[role="tab"],
.dxbs-gridview-row-details {
    background-color: #c0f0f7
}

/*This is to change background color in selected dates for calendar*/
.dxbs-calendar .dxbs-calendar-table-container .dxbs-calendar-table .dxbs-calendar-selected-item {
    background-color: rgb(213 206 206);
}