/****

* OC CTA Buttons
* GovAccess - 2023
* Version 0.15

****/

/****** FROM TEST ******/

/**** Alert Banner ****/
/***************
Callout Package
***************/
/** ============
Available Color:
- Green
- Blue
- Orange
Available Icons:
- alert
- audio
- calendar
- calculator
- checkmark
- email
- hours
- info
- link
- mobile
- news
- phone
- printer
- news
- info
- question
============ **/
/***** Pseudo Element Setup *****/
.ga-full::before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/***** Callout Styling *****/
/** Container **/
.ga-full { display: block; width: 100%; padding: 20px 20px 20px 100px; color: white; box-sizing: border-box; border-radius: 8px; font-weight: bold; text-align: left; line-height: 27px!important; position: relative; overflow: hidden; margin: 0 0 15px 0!important; background: #ababab; }
/** Icon **/
.ga-full::before { display: flex; content: "\f06a"; justify-content: center; align-items: center; width: 75px; height: 100%; position: absolute; left: 0; top: 0; font-size: 30px; background: #333; }
/** Link Accomodation **/
.ga-full a { color: white; text-decoration: underline; }
.ga-full a:hover { opacity: 0.8; }
/** Multiples Accomodation**/
.ga-full:nth-child(1) { margin-bottom: 30px!important; }
.ga-full:nth-child(2) { margin-top: -15px!important; }
.ga-full:last-child { margin-bottom: 30px!important; }
/***** Color Swap *****/
.ga-full.green::before { background: #00492b!important; }
.ga-full.green { background: #009448!important; }
.ga-full.orange::before { background: #803300!important; }
.ga-full.orange { background: #bd550f!important; }
.ga-full.blue::before { background: #005089!important; }
.ga-full.blue { background: #009ad9!important; }
/***** Info Box Color Swap *****/
.info-box.green::before { background: #009448!important; }
.info-box.green { background: #00944826!important; }
.info-box.orange::before { background: #f58131!important; }
.info-box.orange { background: #f581311a!important; }
.info-box.blue::before { background: #005089!important; }
.info-box.blue { background: #ddeff7!important; }
/***** Icon Swap *****/
.ga-full.alert::before { content: "\f06a"!important; font-size: 30px!important; }
.ga-full.audio::before { content: "\f028"!important; font-size: 30px!important; }
.ga-full.audio a { text-decoration: none!important; }
.ga-full.audio a:hover { text-decoration: underline!important; }
.ga-full.calendar::before { content: "\f073"!important; font-size: 30px!important; }
.ga-full.calculator::before { content: "\f1ec"!important; font-size: 30px!important; }
.ga-full.check::before { content: "\f00c"!important; font-size: 30px!important; }
.ga-full.check a { text-decoration: underline!important; }
.ga-full.email::before { content: "\f003"!important; font-size: 30px!important; }
.ga-full.hours::before { content: "\f017"!important; font-size: 30px!important; }
.ga-full.info::before { content: "\f05a"!important; font-size: 30px!important; }
.ga-full.info a { text-decoration: underline!important; }
.ga-full.link::before { content: "\f0c1"!important; font-size: 30px!important; }
.ga-full.link a { text-decoration: none!important; }
.ga-full.link a:hover { text-decoration: underline!important; }
.ga-full.mobile::before { content: "\f10b"!important; font-size: 40px!important; }
.ga-full.news::before { content: "\f1ea"!important; font-size: 30px!important; }
.ga-full.news a { text-decoration: none!important; }
.ga-full.news a:hover { text-decoration: underline!important; }
.ga-full.phone::before { content: "\f095"!important; font-size: 30px!important; }
.ga-full.phone a { text-decoration: underline; }
.ga-full.printer { display: block; }
.ga-full.printer::before { content: "\f02f"!important; font-size: 30px!important; }
.ga-full.printer a { text-decoration: none!important; margin: 0!important; }
.ga-full.printer a:hover { text-decoration: underline!important; }
.ga-full.question::before { content: "\f059"!important; font-size: 30px!important; }
.ga-full.question a { text-decoration: underline!important; }

/***** Begin OC CTA BUTTONS ******/

/* Basic Green Button */

span.ga-full-green-link a {
    background: var(--oc-green);
    border: 1px solid var(--oc-dark-green);
    border-radius: 50px;
    color: white!important;
    display: inline-block;
    padding: .5em 1.5em;
    text-align: center;
    text-decoration: none!important;
    transition: 0.2s ease-in-out;
    width: auto;
}

span.ga-full-green-link a:hover,
span.ga-full-green-link a:focus {
    background-color: var(--oc-dark-green);
}

/** Email Stuff **/

a:has(span.ga-full-green-email) { text-decoration: none!important; }

.ga-full-green-email { line-height: 100%; }

/********* Info Box ********/
/***** Pseudo Element Setup *****/
.info-box::before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/***** Icon Insert *****/
.info-box::before { content: "\f05a"; }
/***** Callout Styling *****/
/** Container **/
.info-box { display: block; padding: 20px 20px 20px 100px; background: #ddeff7; color: #333; box-sizing: border-box; border-radius: 8px; text-align: left; position: relative; overflow: hidden; line-height: 20px!important; }
.info-box.long { padding: 100px 40px 30px 40px; }
.info-box strong { font-weight: 600; }
.info-box span { display: block; clear: both; margin-bottom: 10px; }
.info-box span:nth-child(1) { margin-bottom: 15px; font-weight: 700; line-height: 25px!important; }
.info-box.long span:nth-child(1) { font-size: 25px; line-height: 30px!important; }
.info-box span:last-child { margin-bottom: 0; }
.info-box p:last-child { margin-bottom: 0; }
.info-box hr { border-color: #00528a; }
.info-box.long ul { padding-left: 19px; }
.info-box li::before { border-color: #029ada; }
.info-box ul ul li::before { background: #029ada; }
/** Icon **/
.info-box::before { display: flex; justify-content: center; align-items: center; width: 75px; height: 100%;  background: #009ad9; position: absolute; left: 0; top: 0; font-size: 30px; color: white; }
.info-box.long::before { width: 100%; height: 75px; }
/** Link Accomodation **/
.info-box a { color: #00528a; text-decoration: underline; }
.info-box a:hover { opacity: 0.6; }

.info-box a.oc-btn,
.info-box p.oc-btn > a {
    background-color: var(--oc-blue);
    border-color: var(--oc-dark-blue);
    border-radius: 8px;
    font-weight: 600;
    padding: 10px 20px;
}

.info-box a.oc-btn:hover,
.info-box p.oc-btn > a:hover {
    background-color: var(--oc-dark-blue);
    border-color: var(--oc-dark-blue);
}
.info-box + hr {
    margin-top: 30px;
}
/** Multiples Accomodation**/
.info-box:nth-child(1) { margin-top: 10px; }
.info-box:nth-child(2) { margin-top: 20px!important; }

.info {
    grid-template-columns: calc((100% - 20px) / 3);
    --minmax-three-col: calc((100% - 20px) / 3);
    grid-template-columns: repeat(auto-fill, minmax(var(--minmax-three-col), 1fr));
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.info-box > *:nth-child(1) { margin-top: 5px; }
/* .info-box:last-child { margin-bottom: 30px!important; } */
.info-box.bottom { margin-top: 30px; margin-bottom: 0!important; }
/***** Info Button *****/
.content_area a.oc-cta,
p.oc-cta a,
p.oc-alert a {
    background-color: #009ad9;
    border-radius: 8px;
    color: white;
    display: block;
    margin-top: 28px;
    overflow: hidden;
    padding: 20px 65px 20px 100px;
    position: relative;
    text-decoration: none;
    transition: 0.2s ease-in-out;
    width: 100%;
}
p.oc-alert {
    cursor: text;
}
p.oc-alert a {
    pointer-events: none;
}
p.oc-alert a::before,
p.oc-cta a::before,
.content_area a.oc-cta::before {
    content: '';
    background-color: #005089;
}
p.oc-cta a:hover,
.content_area a.oc-cta:hover {
    background-color: #006fb9;
    text-decoration: none;
}

p.oc-alert a::before,
p.oc-cta a::before,
p.oc-cta a::after,
.content_area a.oc-cta::before,
.content_area a.oc-cta::after	{
    content:'';
    align-items: center;
    display: flex;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    height: 100%;
    justify-content: center;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    text-rendering: auto;
    top: 0;
    transition: all 0.2s ease-in-out;
    -webkit-font-smoothing: antialiased;
}
p.oc-alert a::before,
p.oc-cta a::before,
.content_area a.oc-cta::before {
    content: "\f05a";
    font-size: 30px;
    left: 0;
    width: 75px;
}
p.oc-cta a::after,
.content_area a.oc-cta::after {
    content: "\f054";
    font-size: 22px;
    right: 25px;
}
p.oc-cta:hover a::after,
.content_area a.oc-cta:hover::after {
    right: 20px;
    transition: all 0.2s ease-in-out;
}
/*** OC Alert Button ***/
a.oc-alert-button {
    background-color: var(--oc-blue);
    border-radius: 8px;
    color: white!important;
    display: block;
    margin-top: 35px;
    overflow: hidden;
    padding: 20px 20px 20px 95px;
    position: relative;
    text-decoration: none!important;
}
a.oc-alert-button::before,
a.oc-alert-button::after {
    font: normal normal normal 20px/1 FontAwesome;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
a.oc-alert-button::before {
    align-items: center;
    background-color: var(--oc-dark-blue);
    content: '\f05a';
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 65px;
}
a.oc-alert-button::after {
    align-items: center;
    content: '\f054';
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    right: 40px;
    top: 0;
    transition: 0.2s ease-in-out;
}
a.oc-alert-button:hover::after {
    transform: translate(10px,0);
}

/* Color Swap */

p.oc-cta.green a { background-color: var(--oc-green); }
p.oc-cta.green a::before { background-color: var(--oc-dark-green); }
p.oc-cta.green a:hover::before { background-color: var(--oc-darkest-green); }

p.oc-cta.orange a { background-color: var(--oc-ada-orange); }
p.oc-cta.orange a::before { background-color: var(--oc-dark-orange); }
p.oc-cta.orange a:hover::before { background-color: var(--oc-darkest-orange); }

p.oc-alert.green a { background-color: var(--oc-green); }
p.oc-alert.green a::before { background-color: var(--oc-dark-green); }

p.oc-alert.orange a { background-color: var(--oc-ada-orange); }
p.oc-alert.orange a::before { background-color: var(--oc-dark-orange); }

/***** Icon List *****/

p.oc-cta a#alert::before { content: "\f06a"!important; }
p.oc-cta a#audio::before { content: "\f028"!important; }
p.oc-cta a#calculator::before { content: "\f1ec"!important; }
p.oc-cta a#calendar::before { content: "\f073"!important; }
p.oc-cta a#check::before { content: "\f00c"!important; }
p.oc-cta a#dashboard::before { content: "\f0e4"!important; }
p.oc-cta a#document::before { content: "\f15c"!important; }
p.oc-cta a#email::before { content: "\f003"!important; }
p.oc-cta a#excel::before { content: "\f1c3"!important; }
p.oc-cta a#gallery::before { content: "\f03e"!important; }
p.oc-cta a#hours::before { content: "\f017"!important; }
p.oc-cta a#info::before { content: "\f05a"!important; }
p.oc-cta a#laptop::before { content: "\f109"!important; }
p.oc-cta a#list::before { content: "\f03a"!important; }
p.oc-cta a#link::before { content: "\f0c1"!important; }
p.oc-cta a#medkit::before { content: "\f0fa"!important; }
p.oc-cta a#mobile::before { content: "\f10b"!important; }
p.oc-cta a#money::before { content: "\f155"!important; }
p.oc-cta a#news::before { content: "\f1ea"!important; }
p.oc-cta a#new.user::before { content: "\f234"!important; }
p.oc-cta a#pdf::before { content: "\f1c1"!important; }
p.oc-cta a#pen::before { content: "\f040"!important; }
p.oc-cta a#pencil::before { content: "\f040"!important; }
p.oc-cta a#phone::before { content: "\f095"!important; }
p.oc-cta a#printer::before { content: "\f02f"!important; }
p.oc-cta a#question::before { content: "\f059"!important; }
p.oc-cta a#search::before { content: "\f002"!important; }
p.oc-cta a#user::before { content: "\f007"!important; }
p.oc-cta a#users::before { content: "\f0c0"!important; }

p.oc-alert a#alert::before { content: "\f06a"!important; }
p.oc-alert a#audio::before { content: "\f028"!important; }
p.oc-alert a#calculator::before { content: "\f1ec"!important; }
p.oc-alert a#calendar::before { content: "\f073"!important; }
p.oc-alert a#check::before { content: "\f00c"!important; }
p.oc-alert a#dashboard::before { content: "\f0e4"!important; }
p.oc-alert a#document::before { content: "\f15c"!important; }
p.oc-alert a#email::before { content: "\f003"!important; }
p.oc-alert a#excel::before { content: "\f1c3"!important; }
p.oc-alert a#gallery::before { content: "\f03e"!important; }
p.oc-alert a#hours::before { content: "\f017"!important; }
p.oc-alert a#info::before { content: "\f05a"!important; }
p.oc-alert a#laptop::before { content: "\f109"!important; }
p.oc-alert a#list::before { content: "\f03a"!important; }
p.oc-alert a#link::before { content: "\f0c1"!important; }
p.oc-alert a#medkit::before { content: "\f0fa"!important; }
p.oc-alert a#mobile::before { content: "\f10b"!important; }
p.oc-alert a#money::before { content: "\f155"!important; }
p.oc-alert a#news::before { content: "\f1ea"!important; }
p.oc-alert a#new.user::before { content: "\f234"!important; }
p.oc-alert a#pdf::before { content: "\f1c1"!important; }
p.oc-alert a#pen::before { content: "\f040"!important; }
p.oc-alert a#pencil::before { content: "\f040"!important; }
p.oc-alert a#phone::before { content: "\f095"!important; }
p.oc-alert a#printer::before { content: "\f02f"!important; }
p.oc-alert a#question::before { content: "\f059"!important; }
p.oc-alert a#search::before { content: "\f002"!important; }
p.oc-alert a#user::before { content: "\f007"!important; }
p.oc-alert a#users::before { content: "\f0c0"!important; }

/***** Media Queries *****/
@media screen and (max-width: 425px) {
    .info-box::before { width: 100%; height: 75px; margin-bottom: 20px; }
    .info-box { padding: 100px 20px 20px 20px; }
    .info-box span:nth-child(1) { line-height: 20px!important; }
}

@media screen and (max-width: 1199px) {
    .content_area a.oc-cta, p.oc-cta a, p.oc-alert a { padding-left: 60px; }
    p.oc-alert a::before, p.oc-cta a::before, .content_area a.oc-cta::before { font-size: 20px; width: 40px; }
}

/* Info Box */

.item.fa-circle-info > :first-child {
    margin-bottom: .5em;
}

.item.fa-circle-info > :last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 600px) {
    .ga-block-list .item {
        padding: 65px 25px 15px 25px;
    }

    .ga-block-list .item:before {
        height: 50px;
        width: 100%;
    }
}
