@import url("./customCss/serviceTile.css");
@import url("./customCss/tables.css");
@import url("./customCss/accessibility.css");
@import url("./customCss/hero.css");
@import url("./customCss/navigation.css");
@import url("./customCss/cards.css");
@import url("./customCss/benefitCalculator.css");
@import url("./customCss/printScreen.css");
@import url("./customCss/events-new.css");
@import url("./customCss/blogTiles.css");

/* updating the color for horizontal rules */
hr {
    border-top: 1px solid #d6d6d6 !important;
}

/*create new class for html element examples*/
.html {
    color: #007A11;
}

/*forces top alignment of table headers*/
.table thead th {
    vertical-align: top !important;
}

/* CSS Document - Custom styles that overwrite the template CSS code*/
.columnImage {
    width: 100%;
}

.red_text {
    color: #C90000;
}

.new_highlight {
    color: #FF0000;
    font-size: 0.8em;
}

/* begin responsive video */
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* end responsive video */

/* begin jQuery expand/collapse behavior */
.question, .question_nested, .collapseAll, .expandAll {
    cursor: pointer;
}

.question, .question_nested {
    color: #333;
    font-size: 1.6em;
    line-height: 1.5em;
}

.question a, .question a:hover, .question a:visited {
    color: #333;
}

.question_nested a, .question_nested a:hover, .question_nested a:visited {
    color: #333;
}

.answer, .answer_nested {
    padding-left: 2.5%;
}
/* end jQuery expand/collapse behavior */

/* begin custom table color to provide alternative for zebra striped table to have darker header matching default table */
.table.table-striped.alt-table-header > thead > tr > th,
.table.table-striped.alt-table-header > thead > tr > td {
    background: #d9d9d9;
    border: 2px solid #fff;
}
/* end custom table color to provide alternative for zebra striped table to have darker header matching default table */

.red-alert {
    border-color: #C90000;
}

.red-alert .panel-heading {
    border-color: #C90000;
    background-color: #C90000;
    color: #fff;
}

.red-alert .panel-heading h4 span[class^="ca-gov-icon-"] {
    color: #fff;
}

.yellow-alert {
    border-color: #FBAD23;
}

.yellow-alert .panel-heading {
    border-color: #FBAD23;
    background-color: #FBAD23;
}

.green-alert {
    border-color: #178300;
}

.green-alert .panel-heading {
    border-color: #178300;
    background-color: #178300;
    color: #fff;
}

.green-alert .panel-heading h4 span[class^="ca-gov-icon-"] {
    color: #fff;
    }

.home-icon {
    color: #333;
}

.opener {
    cursor: pointer;
}

/*-----------------------------------------------------*/
/* Hiding the search menu from the main menu in mobile */
/*-----------------------------------------------------*/
@media (max-width: 768px) {
    button.toggle-search {
        display: none;
    }
}



/*----------------------------------------------*/
/* Adds top margin to tabs panel(office locator */
/* page, maybe other tab panel pages) */
/*----------------------------------------------*/
.tab-group.responsive {
    margin-top: 20px;
}

/*-------------------------------*/
/* This makes the footer and google 
translate stack better in mobile */
/*-------------------------------*/
@media (max-width: 992px) {
    .section.section-impact.p-b-lg div.container .quarter {
        float: left;
        width: 50%;
    }

    #google_translate_element {
        margin-left: 20px;
    }

    .section.section-impact.p-b-lg div.container .quarter a.opener {
        margin-left: 20px;
    }

    /* this section below is for all page footers and manipulates the view disclaimer text for translate*/
    .section.section-impact.p-b-lg div.container .quarter.p-t-sm a.opener {
        margin-left: 20px;
    }
}

@media (max-width: 768px) {
    .section.section-impact.p-b-lg div.container .quarter {
        float: none;
        width: 100%;
    }
}

ul.m-b-md li {
    margin-bottom: 10px;
}

ul.p-b-md li {
    margin-bottom: 10px;
}

/*The following is the jumplink anchors for the accordions. They should be placed directly above the desired accordion.*/
.accordDivider {
    border-bottom: 1px;
    width: 200px;
}

/*targets twitter color issues*/
.Identity-screenName {
    color: #333 !important;
}

/*creating skip-to-chatbot functionality*/
#skip-to-chat {
    position: relative;
    left: 50% !important;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    z-index: 999;
}

#skip-to-chat a {
    width: 0;
    height: 0;
    text-align: center;
    position: absolute !important;
    left: 50% !important;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    clip: unset;
    background-color: white;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    overflow: hidden;
}

#skip-to-chat a:focus {
    width: 160px;
    height: 27px;
}

i.clickable.reaction_option.si-fb_like, 
i.clickable.reaction_option.si-fb_dislike {
    color: #046B99 !important;
}

/*--Modal overlay formatting--*/
h2.modal-title, 
h3.modal-title, 
h4.modal-title, 
h5.modal-title {
    font-size: 1.5rem !important;
}

div.modal-content {
    color: #000 !important;
}

/* teaser tile corrections. */
.teaser span.title {
    font-size: 1.25rem !important;
}

.teaser h2, .teaser h3, .teaser h4, .teaser h5 {
    font-size: 1.25rem !important;
}

/*creates a gray background for sections*/
.graySectionBg {
    background-color: #eee;
}

/*styling for spanish links on UI redesign pages*/
.spanishLinks {
    float: right;
}

@media (max-width: 768px) {
    .spanishLinks {
        float: none;
    }
}

/*allows for footer text to be smaller, like a subscript would. Use for UI dashboard, etc.*/
.addendum {
    font-size: .9em;
}

/*fixing breadcrumb stack issue */
.breadcrumb li {
    margin: 10px 0px;
    height: 15px !important;
    line-height: 15px !important;
}

/* new yellow border blockquote styling */
.highlight-blockquote {
    padding: 0 1rem;
    margin: 1rem 0;
    border-left: .3rem solid #fdb81e;
    font-weight: 400;
    line-height: 1.7;
}

/* updating button stylings */
button, 
.btn, 
input[type=button], 
input[type=submit], 
input[type=reset] {
    min-width: 80px;
}

.btn-row .btn {
    margin-right: 1rem !important;
}

@media (max-width: 767px) {
    .btn, .btn-row .btn {
        width: 100%;
        margin-left: 0px !important;
        margin-right: 0px !important;
        margin-bottom: 1rem !important;
    }

    .hide {
        display: none;
    }

    .showDashboard {
        display: block;
    }
}

@media (min-width: 768px) {
    .hide {
        display: block;
    }

    .showDashboard {
        display: none;
    }
}

.input-group-addon {
    font-size: 1.5rem !important;
}

.pull-right {
    padding-left: 8px;
}

/*--creating a white background on radio and checkboxes
so that when placed on different color sections, the color
does not bleed through the form controls. --*/
.check-icon-radio, .check-icon-checkbox {
    background-color: #fff;
}

/* capitalize the folders in the dynamic breadcrumbs */
.breadcrumb.dynamic {
    text-transform: capitalize;
}

/* help text icon formatting */
.ca-gov-icon-question-fill {
    color: #046b99;
    margin-left: .5rem;
}

/* creating non-wrapping text for long checkbox labels */
input[type=checkbox], input[type=radio] {
    float: left;
    margin-top: 0.35rem;
    margin-right: 0.5rem;
}

.form-checkbox-item {
    width: 95%;
    display: block;
    float: left;
    margin-left: 0.5rem;
}

form fieldset label.long-label {
    display: block;
    margin-bottom: 5px;
    margin-left: 1.375rem;
}

@media (max-width: 470px) {
    .form-checkbox-item {
        width: 90%;
    }
}

/****Creating text-wrap for numbered items that
are made to look like an ordered list *****/
.col-content, .col-num {
    position: relative;
    width: 100%;
    padding-left: 15px;
}

.col-num {
    flex: 0 0 4.33333%;
    max-width: 4.33333%;
    text-align: right;
}

.col-content {
    flex: 0 0 95.66667%;
    max-width: 95.66667%;
}

.col-content label {
    margin-left: .3rem;
}

@media (max-width: 767px) {
    .col-num {
        flex: 0 0 7.33333%;
        max-width: 7.33333%;
        text-align: right;
    }

    .col-content {
        flex: 0 0 92.66667%;
        max-width: 92.66667%;
    }
}

/*create a consistent font-size for headers */
.h4-font {
    font-size: 1.25rem;
    margin-top: 1.33em;
    margin-bottom: 1em;
}

/******Making the tab headers consistent****/
ul#tabs li a h2, ul#tabs li a h3, ul#tabs li a h4 {
    font-size: 1rem !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    line-height: 1.2 !important;
}

/* create a way to flip an image/icon 180 degrees */
.rotate-180 {
    display: inline-block;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.full-width-title {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

a.contact-logo {
    background-image: none !important;
}

/********Feedback Button Styling*********/
#QSIFeedbackButton-btn {
    min-width: 0;
    padding: 10px;
    padding: 3px 5px 3px 5px !important;
    background-color: #E6E8E8 !important;
    border: 1px solid #046B99 !important;
    border-right: none !important;
}

.QSIFeedbackButton div {
    font-size: 1rem !important;
    background-color: #E6E8E8 !important;
    color: #046b99;
}

#QSIFeedbackButton-close-btn-container {
    background-color: transparent !important;
}

#QSIFeedbackButton-close-btn-background {
    top: -3.2px !important;
    right: 26.8px !important;
}
/*******End of Feedback Button Styling***********/
/**** Chatbot ****/
.lex-web-ui-iframe {
    width: 70vw;
    max-width: 375px;
    max-height: 500px;
    min-width: unset;
}
    .lex-web-ui-iframe.lex-web-ui-iframe--minimize {
        z-index: 100000000;
    }

@media screen and (max-width: 556px) {
    .lex-web-ui-iframe {
        width: 100% !important;
        max-width: unset;
        margin-right: 0;
        bottom: 0;
    }

        .lex-web-ui-iframe.lex-web-ui-iframe--minimize {
            margin-right: 2vw;
        }
}