/*****SKINS TOC*****/
/* Try to keep it alphabetical. Add new numbers if need to add new skin. Use XXX) to search to code location.
010) Alert Bar
020) Default
030) FAQs
040) Features
050) Fixed Graphic Buttons
060) Footer
070) Graphic Buttons
080) Home Calendar
090) Home Header Dark
100) Home Header LIght
110) Home Links
120) Home News
130) Home Spotlight Slideshow
140) Mega Menu
160) Search
170) Social Buttons
200) Default/Features shared elements (grid cal and tabs)
*/


/* ----THEME VARIABLES----*/
.widget {
    --color-title-ts: #093547;
    --color-subhead1-ts: #03151C;
    --color-subhead2-ts: #365B2D;
    --color-link-ts: #566E2A;
    --color-text-ts: #222222;
    --font-family-ts: "Poppins", sans-serif;
    --box-shadows-ts: 0px 3px 10px rgba(0, 0, 0, 0.2);
    --transition-ts: all .3s ease-in-out;
}

.widget .widgetHeader h2,
.widget .widgetHeader h3 {
    margin: 0;
}

body.narrow #divToolbars a.nav-btn {
    width: 100%;
}


/**** WIDGET SKINS START*****/

/*---- 010) ALERT BAR SKIN START----*/
/* Skin ID: 84 */

/* Wrapper */
.widget.skin84 {
    color: #FFFFFF;
    text-align: center;
    padding: 1em 0;
}

/* Title */
.widget.skin84 .widgetTitle {
    font-size: 1.1em;
}

/* Description */
.widget.skin84 .widgeDesc {
}

/* Box containing all the text. Mobile is vertical */
.widget.skin84 .widgetText {
    display: flex;
    flex-direction: column;
}

/* Link */
.widget.skin84 .widgetItem a {
    color: #ffffff;
}

/* Remove the default p margin from the skin */
.widget.skin84 p {
    margin: 0;
}

@media (min-width: 750px) {
    /* Box containing all the text. Desktop is horizontal */
    .widget.skin84 .widgetText {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
}
/*---- ALERT BAR SKIN END----*/


/*---- 020) DEFAULT SKIN START----*/
/* Skin ID: 87 */

/* Header */
.widget.skin87 .widgetHeader h3,
.widget.skin87 .widgetHeader h3 a {
    font-family: var(--font-family-ts);
    font-size: 1.4em;
    color: var(--color-subhead1-ts) !important;
    font-weight: 700;
    line-height: 1.2;
    margin-top: .167em;
    margin-bottom: 0;
}

/*----Item Title----*/
.widget.skin87 .widgetTitle,
.widget.skin87 .widgetTitle a {
    font-size: 1.2em;
    color: var(--color-subhead2-ts);
    font-weight: 600;
}

/*----Item Image----*/
.widget.skin87 .widgetItem img {
    border-radius: 10px;
    box-shadow: var(--box-shadows-ts);
}

/*----Directory Titles----*/
.widget.skin87 .widgetItem .cp-contentLabels-header {
    padding-left: 0;
}

/*----Read On Link----*/
.widget.skin87 .readOn {
    margin-top: 5px;
}


/*----Slideshow----*/
/* Item Text */
.widget.skin87.cp-format--slideshow .widgetText {
    font-size: 18px;
    color: var(--color-text-ts);
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: var(--box-shadows-ts);
    padding: 16px 18px;
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 32px;
    z-index: 2;
}

/* Item Title */
.widget.skin87.cp-format--slideshow .widgetTitle {
    color: var(--color-subhead1-ts);
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 10px;
}

/* Image */
.widget.skin87.cp-format--slideshow .cp-format-media img {
    border-radius: 10px;
    width: 100%;
}

/* Image Wrapper */
.widget.skin87.cp-format--slideshow .cp-format-media {
    float: none;
    margin: 0 auto;
    max-width: none;
}

/* Widget Item */
.widget.skin87.cp-format--slideshow .widgetItem {
    position: relative;
}

/* FR View */
.widget.skin87.cp-format--slideshow .widgetDesc .fr-view p {
    margin: 0;
}
/*----DEFAULT SKIN END----*/


/*---- 030) FAQs SKIN START----*/
/* Skin ID: 85 */

/* Wrapper */
.widget.skin85 {
    margin-bottom: 2em; 
}

/* Header */
.widget.skin85 .widgetHeader h3,
.widget.skin85 .widgetHeader h3 a {
    font-family: var(--font-family-ts);
    font-size: 1.4em;
    color: var(--color-subhead1-ts) !important;
    font-weight: 700;
    line-height: 1.2;
    padding-bottom: .25em;
    margin-top: .167em;
    margin-bottom: .5em;
    position: relative;
}

/* Psuedo Element */
.widget.skin85 .widgetHeader h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80px;
    height: 3px;
    background: transparent linear-gradient(90deg, #D4D34B 0%, #ACC657 50%, #80A43F 100%);
}

/*----Item Title----*/
.widget.skin85 .widgetTitle,
.widget.skin85 .widgetTitle a {
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-subhead2-ts);
}

/*----FAQ Box----*/
.widget.skin85 .widgetText {
    padding-bottom: 12px;
}

.widget.skin85 .widgetText .widgetDesc p {
    padding: 8px;
    border-left: 2px solid var(--color-subhead2-ts);
    margin: 0;
}

/* Read On */
.widget.skin87 .readOn {
    margin-top: 5px;
}
/*----FAQ SKIN END----*/


/*---- 040) FEATURES SKIN START----*/
/* Skin ID: 86 */

/* Wrapper */
.widget.skin86 {
    margin-bottom: 2em; 
}

/* Header */
.widget.skin86 .widgetHeader h3,
.widget.skin86 .widgetHeader h3 a {
    font-family: var(--font-family-ts);
    font-size: 1.4em;
    color: var(--color-subhead1-ts) !important;
    font-weight: 700;
    line-height: 1.2;
    padding-bottom: .25em;
    margin-top: .167em;
    margin-bottom: .5em;
    position: relative;
}

/* Psuedo Element */
.widget.skin86 .widgetHeader h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80px;
    height: 3px;
    background: transparent linear-gradient(90deg, #D4D34B 0%, #ACC657 50%, #80A43F 100%);
}

/*----Item Title----*/
.widget.skin86 .widgetTitle,
.widget.skin86 .widgetTitle a {
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-subhead2-ts);
}
 
/*----Item Image----*/
.widget.skin86 .widgetItem img {
    border-radius: 10px;
    box-shadow: var(--box-shadows-ts);
    margin-bottom: 10px;
}

/*----Directory Titles----*/
.widget.skin86 .widgetItem .cp-contentLabels-header {
    padding-left: 0;
}


/*----Read On Link----*/
.widget.skin86 .readOn {
    margin-top: 5px;
}

/*----FEATURES SKIN END----*/


/*---- 050) FIXED GRAPHIC BUTTONS SKIN START----*/
/* Skin ID: 78 */
/* Normal State */
.widget.skin78 .cp-fancierButton {
    width: 100%;
    background-color: #093547E6;
    border-radius: 0px 10px 10px 0px;
    position: relative;
    z-index: 1;
}

.widget.skin78 .cp-fancierButton::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: #80A43F;
    z-index: 0;
    transition: var(--transition-ts);
}

.widget.skin78 .cp-fancierButton-inner {
    width: 100%;
    background-position: center top 8px;
    padding: 55px 5px 5px;
    position: relative;
    z-index: 2;
    transition: var(--transition-ts);
}

.widget.skin78 .cp-fancierButton-textContainer {
    color: #fff;
    font-size: .8em;
    font-weight: 500;
    line-height: 1.1;
    transition: var(--transition-ts);
}

/* Hover State */
.widget.skin78 .cp-fancierButton:is(:hover,:focus,:active)::after {
    width: 100%;
    border-radius: 0px 10px 10px 0px;
}

.widget.skin78 .cp-fancierButton:is(:hover,:focus,:active) .cp-fancierButton-textContainer {
    text-decoration: underline;
    color: #093547;
}

/*----Widget Item----*/
.widget.skin78 .widgetItem {
    width: 80px;
    margin: 5px auto;
    text-align: center;
}

/*----FIXED GBs SKIN END----*/


/*---- 060) FOOTER SKIN START----*/
/* Skin ID: 83 */

/*----Wrapper----*/
.widget.skin83 {
    color: #FFFFFF;
    margin: 16px 16px 32px;
    padding: 16px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    border: 2px solid rgba(37, 91, 113, 1);
    border-radius: 10px;
}

.widget.skin83:is(:hover,:focus,.active,.focus-within) {
    border-color: rgba(212, 211, 75, 1);
}

/*----Center Align When Container Breaks----*/
/* Text */
.row.outer:not(.wide) .widget.skin83 {
    max-width: 325px;
    margin: 16px auto;
}

/* Image */
.row.outer:not(.wide) .widget.skin83 .widgetItem img {
    margin: 0 auto!important;
}

/*----Header----*/
/* Text */
.widget.skin83 .widgetHeader {
    color: #FFFFFF;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: .5em; 
    padding-bottom: .25em;
    position: relative;
}

/* Psuedo Element */
.widget.skin83 .widgetHeader:after {
    content: "";
    position: absolute;
    background: linear-gradient(90deg, #D4D34B 0%, #ACC657 50%, #80A43F 100%);
    width: 80px;
    height: 3px;
    left: 0;
    bottom: 0;
}

/*----Item----*/
.widget.skin83 .widgetItem {
    padding: 2px 0;
}

/*----Footer Logo----*/
.widget.skin83 .widgetItem img {
    width: auto!important;
}

/*----Item Links----*/
.widget.skin83 .widgetItem a {
    color: #ffffff;
}

/* FR View */
.widget.skin83 .widgetDesc .fr-view p {
    margin: 0;
}

/*----FOOTER SKIN END----*/


/*---- 070) GRAPHIC BUTTONS SKIN START----*/
/* Skin ID: 74 */

/* Normal State */
.widget.skin74 .cp-fancierButton {
    width: 100%;
    background-position: center top 10px;
    transition: var(--transition-ts)
}

.widget.skin74 .cp-fancierButton-inner {
    width: 100%;
    padding: 135px 5px 5px;
    background-position: center top 30px;
    transition: var(--transition-ts)
}

.widget.skin74 .cp-fancierButton-textContainer {
    color: var(--color-text-ts);
    font-size: 1.1em;
    font-weight: 500;
    line-height: 1.1;
}

/* Hover State */
.widget.skin74 .cp-fancierButton:is(:hover,:focus,:active) {
    background-position: center top 0;
}

.widget.skin74 .cp-fancierButton:is(:hover,:focus,:active) .cp-fancierButton-inner {
    background-position: center top 20px;
}

.widget.skin74 .cp-fancierButton:is(:hover,:focus,:active) .cp-fancierButton-textContainer {
    text-decoration: underline;
}

/*----Widget Item----*/
.widget.skin74 .widgetItem {
    padding: 10px 0;
    max-width: 200px;
    margin: 0 auto;
    text-align: center;
}

/*----GRAPHIC BUTTONS SKIN END----*/


/*---- 080) HOME CALENDAR SKIN START----*/
/* Skin ID: 81 */

.widget.skin81 {
    margin-bottom: 2em;
}

/* Container */
.widget.skin81 .widgetItem {
    border: 2px solid #255B71;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 10px;
    color: #fff;
    overflow: hidden;
    margin-bottom: 1em;
    padding: 1em 1em 2.25em;
    position: relative;
    transition: var(--transition-ts);
}

.widget.skin81 .widgetItem:is(:hover,:focus,:active,:focus-within) {
    border: 2px solid #80A43F;
}

/* Psuedo Arrow */
.widget.skin81 .widgetItem::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 0;
    width: 0;
    z-index: 2;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;    
    border-bottom: 20px solid #255B71;
    transition: var(--transition-ts);
}

.widget.skin81 .widgetItem:is(:hover,:focus,:active,:focus-within)::after {
    border-bottom: 28px solid #80A43F;
}

/* Title */
.widget.skin81 .widgetTitle,
.widget.skin81 .widgetTitle > a:link {
    color: #fff;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: .75em; 
    padding-bottom: .5em;
    position: relative;
}

/* Psuedo Element */
.widget.skin81 .widgetTitle::after {
    content: "";
    position: absolute;
    background: linear-gradient(90deg, #D4D34B 0%, #ACC657 50%, #80A43F 100%);
    width: 100%;
    max-width: 80px;
    height: 3px;
    left: 0;
    bottom: 0;
    transition: var(--transition-ts);
}

.widget.skin81 .widgetTitle:is(:hover,:focus,:active)::after {
    max-width: 120px;
}

/* VIEW ALL LINK */
.widget.skin81 .widgetViewAll {
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    border: 2px solid #80A43F;
    border-radius: 6px;
    padding: .75em 2em;
    margin: 1em auto 0 !important;
    transition: var(--transition-ts);
    float: none;
    display: table;
}

.widget.skin81 .widgetViewAll:is(:hover,:focus,:active) {
    text-decoration: underline;
    color: #093547;
    background: #80A43F;
    padding: .75em 3em;
}

/*----Tabs----*/
/* Default State */
.widget.skin81 .cpTabs > li > a {
    font-size: 1.3em;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    border-radius: 8px;
    padding: 1em;
    position: relative;
    margin: 0 5px !important;
    text-transform: uppercase;
}

.widget.skin81 .cpTabs > li:first-child > a {
    margin-left: 0 !important;
}

.widget.skin81 .cpTabs > li:last-child > a {
    margin-right: 0 !important;
}

/* Hover State */
.widget.skin81 .cpTabs > li > a:is(:hover,:focus,:active) {
    text-decoration: underline !important;
}

/* Active Tab */
.widget.skin81 .cpTabs > .active > a {
    color: #093547;
    background-color: #ACC657;
}

/* Psuedo Arrow */
.widget.skin81 .cpTabs > .active > a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 10px solid #093547;
}

/* Tab List */
.widget.skin81 .cpTabs {
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0px 3px 6px #00000029;
    border: 2px solid #80A43F !important;
    border-radius: 14px;
    padding: 10px;
}

/* Tab Panel */
.widget.skin81 .cpTabPanel {
    padding: 15px 0;
}

/*----Grid Calendar----*/
.wide.widget.skin81 .cp-format-inner--mediaLeft {
    gap: 20px;
}

.widget.skin81 .react-calendar {
    font-family: var(--font-family-ts);
    margin-bottom: 1em;
    width: 100%;
}

.widget.skin81 .react-calendar__navigation {
    padding: 1em;
}

.widget.skin81 .react-calendar.miniCalendar .react-calendar__month-view__weekdays__weekday {
    padding: .75em 0;
    border: 0 solid #80A43F;
    border-width: 2px 0;
    text-transform: uppercase;
}

/* Calendar Title */
.widget.skin81 .react-calendar.miniCalendar .react-calendar__navigation__label span {
    font-family: var(--font-family-ts);
    font-weight: 700;
    font-size: 1.5em;
    line-height: 1;
    text-transform: uppercase;
}

/* Arrow sizing */
.widget.skin81 .react-calendar.miniCalendar .react-calendar__navigation__arrow {
    min-width: 20px;
    width: 8%;
}

/* Days */
.widget.skin81 .react-calendar abbr,
.widget.skin81 .react-calendar button {
    font-family: var(--font-family-ts);
    color: #fff;
}

/* Day w/ Event */
.widget.skin81 .react-calendar button > a {
    position: relative;
    z-index: 0;
    color: #093547;
    font-weight: 700;
    text-decoration: none !important;
} 

.widget.skin81 .react-calendar button > a:is(:hover,:focus,:active) {
    text-decoration: underline !important;
}

/* Psuedo Background */
.widget.skin81 .react-calendar button > a::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2em;
    height: 2em;
    border-radius: 6px;
    z-index: -1;
    background-color: #ACC657;
}

/*---- HOME CALENDAR SKIN END ----*/


/*---- 090) HOME HEADER DARK SKIN START----*/
/* Skin ID: 76 */

.widget.skin76 {
    color: var(--color-text-ts);
    text-align: center;
    font-size: 1.1em;
    background: url(https://content.civicplus.com/api/assets/ca-bakersfield/ba80eed5-1493-4f8c-9347-fe3d0b886072/heading-b-icon-green.png) center top no-repeat;
    padding: 80px 0 30px;
}

.widget.skin76 .widgetTitle,
.widget.skin76 .widgetTitle > a:link {
    color: #093547;
    font-size: 2em;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}

.widget.skin76 p {
    margin: 0;
}

/*---- HOME HEADER DARK SKIN END----*/


/*---- 100) HOME HEADER LIGHT SKIN START----*/
/* Skin ID: 77 */

.widget.skin77 {
    color: #ffffff;
    text-align: center;
    font-size: 1.1em;
    background: url(https://content.civicplus.com/api/assets/ca-bakersfield/8f41e385-322b-49d2-8dcb-e53021517faf/heading-b-icon-white.png) center top no-repeat;
    padding: 80px 0 30px;
}

.widget.skin77 .widgetTitle,
.widget.skin77 .widgetTitle > a:link {
    color: #ffffff;
    font-size: 2em;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}

.widget.skin77 p {
    margin: 0;
}

/*---- HOME HEADER LIGHT SKIN END----*/


/*---- 110) HOME LINKS SKIN START----*/
/* Skin ID: 82 */

/* Item */
.widget.skin82 .widgetItem {
    margin-bottom: 1.5em;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 2px solid #80A43F;
    border-radius: 8px;
    position: relative;
    transition: var(--transition-ts);
}

/* Psuedo Arrow */
.widget.skin82 .widgetItem::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 0;
    width: 0;
    z-index: 2;
    border-top: 27px solid transparent;
    border-bottom: 27px solid transparent;    
    border-right: 12px solid #ACC657;
    transition: var(--transition-ts);
}

/* Psuedo Box */
.widget.skin82 .widgetItem::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 0;
    width: 0;
    background: #093547;
    border-radius: 6px;
    z-index: 1;
    transition: var(--transition-ts);
}

.widget.skin82 .widgetItem:is(:hover,:focus,:active,:focus-within)::before {
    opacity: 0;
}

.widget.skin82 .widgetItem:is(:hover,:focus,:active,:focus-within)::after {
    width: 100%;
    height: 100%;
}

/* Links */
.widget.skin82 .widgetItem a {
    font-size: 1.2em;
    font-weight: 600;
    color: #093547;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 68px;
    z-index: 2;
    padding: 5px 30px 5px 30px;
    position: relative;
}

.widget.skin82 .widgetItem a:is(:hover,:focus,:active) {
    color: #fff;
}


/*---- HOME LINKS SKIN END----*/


/*---- 120) HOME NEWS SKIN START----*/
/* Skin ID: 80 */

/* Container */
.widget.skin80 .widgetItem {
    background: #FFFFFF;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1em;
}

/* Image */
.widget.skin80 .cp-format-media--stacked {
    float: none;
    margin: 0;
    max-width: 100%;
    padding: 0;
    position: relative;    
}

.widget.skin80 .cp-format-media--stacked::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 22px;
    background: url(https://content.civicplus.com/api/assets/ca-bakersfield/f4f0b085-2dfa-4faa-8b04-6593f439939b/news-white-arrow-cutout.svg) no-repeat center bottom -1px;
    background-size: 100% auto;
    z-index: 1;
}

/* Text */
.widget.skin80 .widgetText {
    background: #ffffff;
    color: #222222;
    padding: 1em 1em 2.25em;
    position: relative;
    z-index: 1;
    transition: var(--transition-ts);
}

/* Psuedo Arrow */
.widget.skin80 .widgetItem .widgetText::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 0;
    width: 0;
    z-index: 2;
    border-left: 140px solid transparent;
    border-right: 140px solid transparent;    
    border-bottom: 20px solid #ACC657;
    transition: var(--transition-ts);
}

.widget.skin80 .widgetItem:is(:hover,:focus,:active,:focus-within) .widgetText::after {
    border-bottom: 28px solid #093547;
}

/* Title */
.widget.skin80 .widgetTitle,
.widget.skin80 .widgetTitle > a:link {
    color: #093547;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: .75em; 
    padding-bottom: .5em;
    position: relative;
}

/* Psuedo Element */
.widget.skin80 .widgetTitle::after {
    content: "";
    position: absolute;
    background: linear-gradient(90deg, #D4D34B 0%, #ACC657 50%, #80A43F 100%);
    width: 100%;
    max-width: 80px;
    height: 3px;
    left: 0;
    bottom: 0;
    transition: var(--transition-ts);
}

.widget.skin80 .widgetTitle:is(:hover,:focus,:active)::after {
    max-width: 120px;
}

/* Read On Link */
.widget.skin80 .readOn {
    margin: 10px 0 0;
    color: #093547;
    text-decoration: none;
    position: relative;
}

.widget.skin80 .readOn:is(:hover,:focus,:active) {
    text-decoration: underline;
}

/* VIEW ALL LINK */
.widget.skin80 .widgetViewAll {
    font-weight: 600;
    color: #093547;
    line-height: 1.2;
    background-color: #FFFFFF;
    border: 2px solid #80A43F;
    border-radius: 6px;
    padding: .75em 2em;
    margin: 1em auto 0 !important;
    transition: var(--transition-ts);
    float: none;
    display: table;
}

.widget.skin80 .widgetViewAll:is(:hover,:focus,:active) {
    text-decoration: underline;
    color: #093547;
    background: #80A43F;
    padding: .75em 3em;
}

/*----Tabs----*/
/* Default State */
.widget.skin80 .cpTabs > li > a {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--color-title-ts);
    line-height: 1.2;
    background-color: #ACC657;
    border-radius: 8px;
    padding: 1em;
    position: relative;
    margin: 0 5px !important;
    text-transform: uppercase;
}

.widget.skin80 .cpTabs > li:first-child > a {
    margin-left: 0 !important;
}

.widget.skin80 .cpTabs > li:last-child > a {
    margin-right: 0 !important;
}

/* Hover State */
.widget.skin80 .cpTabs > li > a:is(:hover,:focus,:active) {
    text-decoration: underline !important;
}

/* Active Tab */
.widget.skin80 .cpTabs > .active > a {
    color: #ffffff;
    background-color: #093547;
}

/* Psuedo Arrow */
.widget.skin80 .cpTabs > .active > a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 10px solid #ACC657;
}

/* Tab List */
.widget.skin80 .cpTabs {
    margin-bottom: 15px;
}

/* Tab Panel */
.widget.skin80 .cpTabPanel {
    padding-bottom: 15px;
}
/*---- HOME NEWS SKIN END----*/


/*---- 130) HOME SLIDESHOW SKIN START----*/
/* Skin ID: 79 */

.widget.skin79 {
    width: 100%;
    max-width: 450px;
    margin: 0 auto 1em;
}

/* Container */
.widget.skin79 .widgetItem {
    background: #093547;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 12px;
    overflow: hidden;
}

/* Image */
.widget.skin79 .cp-format-media--stacked {
    float: none;
    height: 500px;
    margin: 0;
    max-width: 100%;
    padding: 0;
    position: relative;    
}

.widget.skin79 .cp-format-media--stacked img {
    object-fit: cover;
    height: 500px;
}

.widget.skin79 .cp-format-media--stacked::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: url(https://content.civicplus.com/api/assets/ca-bakersfield/7cd48ce4-ef1f-43a8-9e82-319523bdb17c/slideshow-blue-arrow-cutout.svg) no-repeat center bottom;
    background-size: 100% 30px;
    z-index: 1;
}

/* Text */
.widget.skin79 .widgetText {
    background: #093547;
    color: #ffffff;
    padding: 1em;
    position: relative;
    z-index: 1;
}

/* Title */
.widget.skin79 .widgetTitle,
.widget.skin79 .widgetTitle > a:link {
    color: #FFFFFF;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: .75em; 
    padding-bottom: .5em;
    position: relative;
}

/* Psuedo Element */
.widget.skin79 .widgetTitle::after {
    content: "";
    position: absolute;
    background: linear-gradient(90deg, #D4D34B 0%, #ACC657 50%, #80A43F 100%);
    width: 100%;
    max-width: 80px;
    height: 3px;
    left: 0;
    bottom: 0;
    transition: var(--transition-ts);
}

.widget.skin79 .widgetTitle:is(:hover,:focus,:active)::after {
    max-width: 120px;
}

/* Read On Link */
.widget.skin79 .readOn {
    border: 2px solid #80A43F;
    border-radius: 6px;
    color: #fff;
    font-weight: 500;
    max-width: 180px;
    margin: 10px auto 5px;
    padding: .5em;
    text-align: center;
    text-decoration: none;
    transition: var(--transition-ts);
    width: 100%;
}

.widget.skin79 .readOn:is(:hover,:focus,:active) {
    background: #80A43F;
    color: #093547;
    max-width: 100%;
    text-decoration: underline;
}

/*---- HOME SLIDESHOW SKIN END----*/


/*---- 140) MEGA MENU SKIN START----*/
/* Skin ID: 89 */

/*----Wrapper----*/
.widget.skin89  {
    color: #ffffff;
}

/*----Header----*/
.widget.skin89 .widgetHeader {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 20px;
}

/*----Title----*/
.widget.skin89 .widgetTitle {
    margin-bottom: 10px;
}

.widget.skin89 .widgetTitle a {
    font-size: 1.1em !important;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.2;
}

/*----Item----*/
.widget.skin89 .widgetItem {
    margin: 1em;
    padding: 1em;
    background: #093547;
    box-shadow: 0px 3px 6px #00000029;
    border: 2px solid #255B71;
    border-radius: 10px;
    transition: var(--transition-ts);
}

.widget.skin89 .widgetItem:is(:hover,:focus,:active) {
    border-color: #D4D34B;
}

/*----Level 1----*/
.widget.skin89 .level1 .semanticList {
    margin-left: 4px;
}

/*----Level 2----*/
.widget.skin89 .level2 a {
    display: block;
    padding: 3px 0 3px 10px;
    border-left: 2px solid #255B71;
    color: #ffffff;
    transition: var(--transition-ts);
}

.widget.skin89 .level2 a:is(:hover,:focus,:active) {
    border-color: #D4D34B;
}

/*----MEGA MENU SKIN END----*/


/*---- 160) SEARCH SKIN START----*/
/* Skin ID: 88 */

/*----Wrapper----*/
.widget.skin88 {
    font-family: var(--font-family-ts);
}

/*----Search----*/
/* Wrapper */
.widget.skin88 .cp-format--fullSearch .cp-searchWidget {
    color: var(--color-text-ts);
    background: #FFFFFF;
    border: 2px solid #80A43F;
    border-radius: 8px;
    height: 60px;
}

.widget.skin88 .cp-format--fullSearch input.cp-search-input {
    padding-bottom: 0;
}

/* Text */
.widget.skin88 .cp-format--fullSearch .cp-search-submit {
    padding: 0;
    margin: -2px 0 0;
    height: 60px;
    width: 60px;
}

/*----SEARCH SKIN END----*/


/*---- 170) SOCIAL BUTTONS SKIN START----*/
/* Skin ID: 75 */

.widget.skin75 .widgetItem {
    text-align: center;
    padding-top: 6px;
    margin: 0 auto 6px;
    width: 24px;
    height: 30px;
    box-sizing: conte-box;
    border-bottom: 2px solid #ffffff00;
    transition: var(--transition-ts);
}

.widget.skin75 .widgetItem a {
    transition: var(--transition-ts);
}

/* Hover State */
.widget.skin75 .widgetItem:is(:hover,:focus,:active,:focus-within) {
    border-bottom: 2px solid #ffffff;
}

.widget.skin75 .widgetItem a:is(:hover,:focus,:active) {
    transform: translateY(-6px);
}

/*----SOCIAL SKIN END----*/


/*---- 200) SHARED DEFAULT/FEATURES SKIN START----*/
/* Skin ID: 87/86 */


/* VIEW ALL LINK */
.widget.skin86 .widgetViewAll,
.widget.skin87 .widgetViewAll {
    font-family: var(--font-family-ts);
    font-weight: 500;
    color: #093547;
    line-height: 1.2;
    background-color: #FFFFFF;
    border: 2px solid #80A43F;
    border-radius: 6px;
    padding: 10px 28px;
    margin: 1em auto 0 auto;
    transition: var(--transition-ts);
}

.widget.skin86 .widgetViewAll:is(:hover,:focus,:active),
.widget.skin87 .widgetViewAll:is(:hover,:focus,:active) {
    text-decoration: underline;
    color: #093547;
    background: #80A43F;
}

/*----Tabs----*/
/* Default State */
.widget.skin86 .cpTabs > li > a,
.widget.skin87 .cpTabs > li > a {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--color-title-ts);
    line-height: 1.2;
    background-color: #F2F6FB;
    border: 2px solid #365B2D;
    border-radius: 6px;
    padding: 0.75em 1em;
    margin: 0 5px !important;
    position: relative;
}

.widget.skin86 .cpTabs > li:first-child > a,
.widget.skin87 .cpTabs > li:first-child > a {
    margin-left: 0 !important;
}

.widget.skin86 .cpTabs > li:last-child > a,
.widget.skin87 .cpTabs > li:last-child > a {
    margin-right: 0 !important;
}

/* Hover State */
.widget.skin86 .cpTabs > li > a:is(:hover,:focus,:active),
.widget.skin87 .cpTabs > li > a:is(:hover,:focus,:active) {
    text-decoration: underline !important;
}

/* Active Tab */
.widget.skin86 .cpTabs > .active > a,
.widget.skin87 .cpTabs > .active > a {
    color: #ffffff;
    background-color: #365B2D;
}

/* Psuedo Arrow */
.widget.skin86 .cpTabs > .active > a::after,
.widget.skin87 .cpTabs > .active > a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 8px solid rgba(255, 255, 255, 1);
}

/* Tab List */
.widget.skin86 .cpTabs,
.widget.skin87 .cpTabs {
    margin-bottom: 15px;
}

/* Tab Panel */
.widget.skin86 .cpTabPanel,
.widget.skin87 .cpTabPanel {
    padding-bottom: 15px;
}

/*----Grid Calendar----*/
.wide.widget.skin86 .cp-format-inner--mediaLeft,
.wide.widget.skin87 .cp-format-inner--mediaLeft {
    gap: 20px;
}

.widget.skin86 .react-calendar,
.widget.skin87 .react-calendar {
    font-family: var(--font-family-ts);
    margin-bottom: 1em;
    width: 100%;
}

.widget.skin86 .react-calendar__navigation,
.widget.skin87 .react-calendar__navigation {
    padding: 1em;
}

.widget.skin86 .react-calendar.miniCalendar .react-calendar__month-view__weekdays__weekday,
.widget.skin87 .react-calendar.miniCalendar .react-calendar__month-view__weekdays__weekday {
    padding: .75em 0;
    border: 0 solid #80A43F;
    border-width: 2px 0;
    text-transform: uppercase;
}

/* Calendar Title */
.widget.skin86 .react-calendar.miniCalendar .react-calendar__navigation__label span,
.widget.skin87 .react-calendar.miniCalendar .react-calendar__navigation__label span {
    font-family: var(--font-family-ts);
    font-weight: 700;
    font-size: 1.5em;
    line-height: 1;
    text-transform: uppercase;
}

/* Arrow sizing */
.widget.skin86 .react-calendar.miniCalendar .react-calendar__navigation__arrow,
.widget.skin87 .react-calendar.miniCalendar .react-calendar__navigation__arrow {
    min-width: 20px;
    width: 8%;
}

/* Days */
.widget.skin86 .react-calendar abbr,
.widget.skin86 .react-calendar button,
.widget.skin87 .react-calendar abbr,
.widget.skin87 .react-calendar button {
    font-family: var(--font-family-ts);
    color: var(--color-text-ts);
}

/* Day w/ Event */
.widget.skin86 .react-calendar button > a,
.widget.skin87 .react-calendar button > a {
    position: relative;
    z-index: 0;
    color: #093547;
    font-weight: 700;
    text-decoration: none !important;
} 

.widget.skin86 .react-calendar button > a:is(:hover,:focus,:active),
.widget.skin87 .react-calendar button > a:is(:hover,:focus,:active) {
    text-decoration: underline !important;
}

/* Psuedo Background */
.widget.skin86 .react-calendar button > a::after,
.widget.skin87 .react-calendar button > a::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2em;
    height: 2em;
    border-radius: 6px;
    z-index: -1;
    background-color: #ACC657;
}

/*----SHARED DEFAULT/FEATURE SKIN END----*/