/* ================================================================
Individuals
================================================================= */
.individuals {
    display: flex;
    flex-flow: row wrap;
}

.individuals .individual-item {
    width: 100%;
    margin: 1em 0;
    text-align: center;
}

    .individuals .individual-item .individual-info {
        margin: 1em 0;
    }

.individuals.cards {
    display: block;
}

    .individuals.cards .individual-item {
        text-align: left;
        width: 100%;
        border: 1px solid #cccccc;
        padding: 1em;
    }

        .individuals.cards .individual-item .individual-info {
            margin: 0;
        }

        .individuals.cards .individual-item .name {
            font-weight: 600;
        }

            .individuals.cards .individual-item .name .job-title {
                font-style: italic;
            }

@media (min-width: 48em) {
    .individuals .individual-item {
        width: 50%;
    }
}

@media (min-width: 64em) {
    .individuals .individual-item {
        width: 33.33%;
    }
}

.individual-detail .contact-info {
    padding: 0;
    list-style: none;
}


/* ================================================================
To add room to the nav items on Employee Benefits 7/6/2022
================================================================= */
.main-navigation .navbar-collapse .navbar-nav > li > a {
    padding: 1rem .7rem 1rem .7rem !important;
}

@media (min-width: 1200px) {
    .container {
        width: 1270px !important;
    }
}

/*.container {
    width: 1270px !important;
}*/

.site-header .header-start {
    height: 95px !important;
}

@media (min-width: 48em) {
    .site-header .header-start {
        height: 95px !important;
    }
}

@media (min-width: 30em) {
    .site-header .header-start {
        height: 95px !important;
    }
}

img {
    max-width: 90% !important;
}

.site-name {
    padding-top: 12px;
}

.breadcrumb {
    margin-top: 30px !important;
}

/* ================================================================
Cuyhoga County Widgets
================================================================= */

.county-card {
    border: 0.0625rem solid;
    border-color: RGBA(0,85,135,.20);
    border-radius: 0.25rem;
    margin-bottom:1rem;
}

    .county-card.bgblue {
        background-color: RGBA(204,221,231,1);
    }
    .county-card img{
        max-width:100%!important;
        width:100%;
    }
    .county-card .inner-card {
        padding: 1rem;
    }
    .county-card .heading-s {
        font-family: Oswald, sans-serif;
        font-size: 1.25rem;
        line-height: 1.5625rem;
        font-weight: 400;
        color: #333;
        margin-bottom: 1rem;
    }

    .county-card p {
        font-family: Open Sans, sans-serif;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        color: #333;
    }

    .county-card a {
        font-family: Open Sans, sans-serif;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 600;
        /*color: #333;*/
        color: #006AA9;
        margin-bottom: 1rem;
        display: block;
    }
        .county-card a.btn {
            color: #fff;
            font-weight: 400;
        }


    .county-card .heading-l {
        font-family: Oswald, sans-serif;
        font-size: 1.75rem;
        line-height: 2.1875rem;
        font-weight: 400;
        color: #333;
        margin-bottom: 1.25rem;
        margin-top:0;
        padding-top:0;
    }
    .county-card .heading-m {
        font-family: Oswald, sans-serif;
        font-size: 1.5rem;
        line-height: 2.25rem;
        font-weight: 400;
        color: #333;
        margin-bottom: 1.25rem;
        margin-top: 0;
        padding-top: 0;
    }

    .county-card [class^=col-]:empty {
        display: none;
    }

.county-link {
}
        .county-link p.heading-s {
            font-family: Oswald, sans-serif;
            font-size: 1.25rem;
            line-height: 1.5625rem;
            font-weight: 400;
            color: #333;
            margin-bottom: 1rem;
        }

        .county-link p.heading-s a {
            color: #006AA9;
        }

        .county-link a:hover {
           /*background-color: #005587;*/ 
        }

.county-copy {
}
        .county-copy p {
            font-family: Open Sans, sans-serif;
            font-size: 1rem;
            line-height: 1.5rem;
            font-weight: 400;
            color: #333;
        }
        .county-copy p.long {
            font-family: Open Sans, sans-serif;
            font-size: 1.1rem;
            line-height: 1.6rem;
            font-weight: 400;
            color: #333;
        }

.county-headline {
}

    .county-headline h1.heading-xl {
        font-family: Oswald, sans-serif;
        font-size: 2rem;
        line-height: 2.5rem;
        font-weight: 400;
        color: #333;
        margin-bottom: 1.25rem;
    }
    .county-headline h2.heading-l {
        font-family: Oswald, sans-serif;
        font-size: 1.75rem;
        line-height: 2.1875rem;
        font-weight: 400;
        color: #333;
        margin-bottom: 1.25rem;
    }
    .county-headline h3.heading-m {
        font-family: Oswald, sans-serif;
        font-size: 1.5rem;
        line-height: 2.25rem;
        font-weight: 400;
        color: #333;
        margin-bottom: 1.25rem;
    }

    .county-headline h4.heading-s {
        font-family: Oswald, sans-serif;
        font-size: 1.25rem;
        line-height: 1.5625rem;
        font-weight: 400;
        color: #333;
        margin-bottom: 1rem;
    }

.county-messaging {
}
    .county-messaging .alert {
        padding: 1.5rem;
    }
    .county-messaging h4 {
        font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
        font-weight: 700;
        margin-bottom:0;
        padding-bottom:0;
    }


    .county-messaging .alert-info::before {
        float: left;
        content: "\f129";
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        font-size: 2em;
        padding-right: 1rem;
    }
    .county-messaging .alert-info a {
        color: #31708f;
    }
    .county-messaging .alert-primary::before {
        float: left;
        content: "\f129";
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        font-size: 2em;
        padding-right: 1rem;
    }
    .county-messaging .alert-primary a {
        color: #31708f;
    }
    .county-messaging .alert-success::before {
        float: left;
        content: "\f00c";
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        font-size: 2em;
        padding-right: 1rem;
    }
    .county-messaging .alert-success a {
        color: #3c763d;
    }
    .county-messaging .alert-warning::before {
        float: left;
        content: "\f071";
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        font-size: 2em;
        padding-right: 1rem;
        color: #f27d00;
    }
    .county-messaging .alert-warning a {
        color: #8a6d3b;
    }
    .county-messaging .alert-danger::before {
        float: left;
        content: "\f06a";
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        font-size: 2em;
        padding-right: 1rem;
        
    }
    .county-messaging .alert-danger a {
        color: #a94442;
    }

.county-image {
}
    .county-image img {
        border: 0.0625rem solid;
        border-color: RGBA(0,85,135,.20);
        border-radius: 0.25rem;
        margin-bottom: 1.25rem;
    }


/* use "*" instead of "$" because of sf querystrings. ie [href*='.pdf'] instead of [href$='.pdf']*/
a.xico[target=_blank]::after {
    padding-left: 10px;
    content: "\f35d";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
}
a.xico[href*='.pdf']::after {
    padding-left: 10px;
    content: "\f1c1";
    font-family: "Font Awesome 5 Free";
}

a.xico[href*='.xls']::after {
    padding-left: 10px;
    content: "\f1c3";
    font-family: "Font Awesome 5 Free";
}

a.xico[href*='.doc']::after {
    padding-left: 10px;
    content: "\f1c2";
    font-family: "Font Awesome 5 Free";
}


a.bcanchor {
    display: block;
    position: relative;
    top: -120px;
    visibility: hidden;
}

.clearitem {
    display: block; 
    width:100%;
    clear:both;

}

.how-do-i .dropdown-toggle {
    width: 147px !important;
    max-height: 53px;
    font-size: 85%;
    padding-left: 4px;
    padding-right: 4px;
}

@media only screen and (max-device-width: 480px) {
    .how-do-i .dropdown-toggle:after {
        border-left: 70px solid transparent;
        border-right: 70px solid transparent;
        margin-top: -1px
    }
}

/*used by forms that for some reason ignores 'form-control' class (by not applying it) to email field particularly*/
#Email-1 {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

/* ================================================================
Fiscal Office - Property Tax Widgets
================================================================= */
.fis_off_tax_widg {
    border: 1px solid #f5f5f5;
    padding: 1.3rem;
    margin: 1rem;
    /* max-width:21rem;*/
}

.pt-2 {
    padding-top: 0.5rem !important;
}

.mb-5,
.my-5 {
    margin-bottom: 3rem !important;
}

.estimator {
    border-top: 1px solid #FFF;
    color: #FFF;
    display: block;
    font-size: 1.2em;
    padding: 3px 0 3px 0px;
    text-decoration: none;
    color: #243e8f;
    font-family: Verdana, Sans-Serif;
    margin-top: 20px;
}

 .warningButton{font-size:100%; color:#fff!important; font-family: Oswald,sans-serif; margin-top:6px;border-radius: 24px;padding-top: 2px;padding-bottom: 3px;background-color: #FF8200;}
 a.warningButton:link {color: #fff!important; text-decoration:none}
 a.warningButton:visited {color: #fff!important; text-decoration:none}
 a.warningButton:hover {color: #fff!important; text-decoration:none}
 a.active:visited {color: #ffffff;text-decoration: none;}
 .warningButton>li>a{color:#ffffff!important; text-decoration:none}