﻿/* ********************************** Site Specific Override Elements ************************************* */

/* 
    We've made a change directly in the _ahca-bootstrap.css since we were unable to fix the issue with overrides.
    Line 3160 we changed "@media (min-width: 768px) {" to "@media (min-width: 769px) {" to make the menu collapse properly at a width of 768px
*/

:root {
    --light: #f8f9fa;
}

body {
    background-color: #F2F3F4;
}

/*****************************************
    OVERRIDES from ahca-bootstrap.css
*****************************************/

.container {
    max-width: 3600px;
    background-color: #ffffff;
}

.bg-light {
    background-color: #f8f9fa !important;
}

.border-light {
    /* overrides  border-color: #ced4da */
    border-color: #f8f9fa !important;
}

header #SiteNavBar .header-logo {
    padding: 5px;
}

h1 .navbar-brand a {
    display: flex;
    white-space: normal;
    font-size: .55rem;
}

@media (min-width: 370px) {
    h1.navbar-brand a {
        font-size: 1.0rem;
    }

    #piHead .labelCol {
        min-width: 124px;
    }

    @media (min-width: 576px) {
        h1.navbar-brand a {
            font-size: 1.0rem;
        }
    }

    @media (min-width: 768px) {
        h1.navbar-brand a {
            font-size: 1.25rem;
        }

    }

    @media (min-width: 992px) {
        h1.navbar-brand a {
            font-size: 1.5rem;
        }
    }

    @media (min-width: 1200px) {
        h1.navbar-brand a {
            font-size: 1.75rem;
        }
    }
}

@media (min-width: 1800px) {
    .modal-xl {
        max-width: 1700px;
    }
}

@media print {
    body {
        background-color: #ffffff;
    }
}

body {
    padding-top: 0px;
    padding-bottom: 20px;
}

section.main {
    padding-bottom: 20px;
}

.container {
    padding-right: 5px;
    padding-left: 5px;
}

#piHead .labelCol {
    min-width: 0;
}

h2 {
    /*text-align: center;*/
    margin-top: 8px;
    margin-bottom: 10px;
    font-size: 1.75rem;
}

h3 {
    text-align: center;
}

h4 {
    text-align: left;
}

h5 {
    text-align: left;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1,
.col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
.col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5,
.col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2,
.col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.row {
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}

.btn {
    min-width: 60px;
    /*margin-right: 20px; causing margin issues in some places such as */
    /*    padding: 5px 5px; */
}

.modal-header {
    padding: .5rem;
}

.modal-md {
    max-width: 50% !important;
}

.card-group {
    border: 1px solid #D3D3D3;
    padding: .3rem;
}

/* Card inherits L/R padding from the .col- stylel above, so reset to none */
.card {
    padding-left: 0px;
    padding-right: 0px;
}

.card-header {
    padding: .5rem;
}

.card-body {
    padding: .5rem;
}

label {
    cursor: pointer;
    font-weight: bold;
    margin-bottom: 0.3rem;
    color: #344e86;
    color: #555555;
}

legend {
    margin-bottom: 10px;
    display: none;
}

.alert {
    padding: 5px 5px 5px 10px;
    margin-top: 1px;
    margin-bottom: 8px;
    font-size: 1.2rem;
}

dl {
    margin-bottom: .3rem;
}

dt {
    margin-bottom: .2rem;
    color: #333333;
    font-weight: 700;
    min-height: 1.0rem;
}

dd {
    margin-bottom: .2rem;
    margin-left: .2rem;
    min-height: 1.0rem;
}

.rounded {
    border-radius: .5rem !important;
}

.form-group {
    margin-bottom: .5rem;
}

.form-control {
    padding: 0.25rem 0.25rem;
}

input:disabled {
    background: #dddddd;
}

.field-validation-error {
    color: #b94a48;
    display: inline-block;
    padding-top: 2px;
}

.field-validation-valid {
    display: none;
}

input[type=radio] {
    transform: scale(1.5);
}

input[type=checkbox] {
    transform: scale(1.5);
}

/* ****************************************** New Elements ********************************* */

.val-required {
    color: #b94a48;
}


.bg-light-blue {
    background-color: #b0c4df;
}

.bg-light-green {
    background-color: #c2f0c2;
}

.bg-light-gray {
    background-color: lightgray;
}


.dl-horizontal {
}

    .dl-horizontal dt {
    }

    .dl-horizontal dd {
    }

/* Notification Cards */
.notificationContainer {
    background-color: lightgray;
    padding: 6px
}

.filterNotification {
    cursor: pointer;
    -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
    box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
    transition: 0.2s;
    width: 10rem;
    margin: 10px;
}

    .filterNotification:hover {
        transform: translate(1px, 2px);
    }

    .filterNotification card-header {
        height: 62px;
        border-bottom-color: white
    }


.filterForm {
    background-color: lightgray;
}

/* needed on pages with the pdf viewer */
html body #pdfviewer {
    width: 100% !important;
}

.expiredPrints {
    color: darkred;
}

#providerSearchResults .providerResult {
    background-color: lightgray;
}

    #providerSearchResults .providerResult .btnRemove {
        display: none;
    }

#selectedProviders .providerResult {
    background-color: cornsilk;
}

    #selectedProviders .providerResult .btnAdd {
        display: none;
    }

.agencyLogo {
    height: 96px;
    width: 96px;
}

.aliasText {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*****************************************
    OVERRIDES for Kendo elements
*****************************************/
.k-grid-header {
    background-color: #445F94;
    color: white;
    padding-right: 0px !important; /* hide area for scrollbar */
}

/* kendo grid header (allow to wrap) */
.k-grid .k-grid-header .k-header .k-link {
    height: auto;
}

/* kendo grid header (allow to wrap) */
.k-grid .k-grid-header .k-header {
    white-space: normal;
}

/* Scrollable grid only show scroll if needed*/
.k-grid-content.k-auto-scrollable {
    overflow-y: auto !important;
    min-height: 200px;
}

/* overrides for links inside kendo grid */
.k-grid td a:not(.btn) {
    color: #18346A !important;
    text-decoration: underline !important;
}

.k-grid td a:hover :not(.btn) {
    color: #0a152c !important;
    text-decoration: underline !important;
}

.k-grid td a.btn-primary {
    color: #fff;
}

/* Kendo grid no-records fix height */
div.k-grid-norecords {
    height: auto;
}

/* Kendo grid no-records message template style override */
.k-grid-norecords-template {
    width: 40em;
    height: 4em;
    line-height: 4em;
    margin: 0 auto;
    /*margin-bottom: 25px;*/
    border: none;
}

/* Sort indicators in grid headings */
th.k-header .k-icon {
    color: yellow;
}

.k-pager-numbers .k-link, .k-pager-nav.k-link {
    border-color: #dee2e6;
    color: #445F94;
}

    .k-pager-numbers .k-link.k-state-selected {
        border-color: #445F94;
        background-color: #445F94;
    }

/*** End Kendo Overrides ***/

/* styles for reduced-font Kendo Grid */
.smallerKGrid .k-grid-content.k-auto-scrollable {
    min-height: 100px;
}

.smallerKGrid th, .smallerKGrid td {
    padding: 0.3rem 0.4rem !important;
}

.smallerKGrid th, .smallerKGrid .k-pager-info {
    font-size: 0.8rem;
}

.smallerKGrid td {
    font-size: 0.7rem !important;
}

.smallerKGrid .k-pager-info {
    margin-left: 6px;
    margin-right: 6px;
}

.smallerKGrid .k-pager-nav, .smallerKGrid .k-pager-numbers .k-link {
    min-width: calc(1.1em + 0.75rem + 2px);
    height: calc(1.1em + 0.75rem + 2px);
}

.bsxoverlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

/*****************************************
    Page section container styles
*****************************************/

.lightBlueSection {
    width: 100%;
    margin: 0;
    padding: 0.5rem;
    border-radius: .5rem !important;
    background-color: #b3ccff;
}

/*  The following media query is where to include your CSS for IE11 specifically */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}

/* CSS for side bar navigation*/
.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 225px;
    max-width: 225px;
    min-height: 100vh;
}

    #sidebar.active {
        margin-left: -225px;
        display: none;
    }

@media (max-width: 768px) {
    #sidebar {
        margin-left: -225px;
        display: none;
    }

        #sidebar.active {
            margin-left: 0;
        }

    #user-navbar {
        display: inline-block;
    }
}

@media (min-width: 768px) {
    #user-navbar {
        display: none;
    }
}

@media (min-width: 1600px) {
    .atabs-xl-none {
        display: none !important;
    }

    .atabs-xl-block {
        display: block !important;
    }
}

@media (max-width: 1600px) {
    #sidebar {
        min-width: 150px;
        max-width: 150px;
        min-height: 100vh;
    }
}
