html{
overflow-x: hidden;
}
body{
color: var(--cassiopeia-color-text);
background-color: var(--cassiopeia-color-primary);
}
.site {
overflow-x: hidden;
position: relative;
width: 100%;
}
a:not([class]) {
text-decoration: underline; /* change */
}
a, .container-header a, .container-header .mod-menu > li > a, .container-header .mod-menu > li > span, .container-header .metismenu.mod-menu .mm-toggler, .container-header .offcanvas .metismenu.mod-menu .metismenu-item > a, .container-header .navbar-toggler, .back-to-top-link{
color: var(--cassiopeia-color-link);
}
a:hover, a:focus  {
/* MVL 05-01-25 broke the hover and focus two header and canva and overall site*/
color: var(--cassiopeia-color-hover);
/* text-decoration: underline; removed becasue it cause duplicate underline MVL 04-28-25 */
}
.container-header a:hover,.container-header a:focus, .container-header .mod-menu > li > a:hover, .container-header .mod-menu > li > a:focus, .container-header .mod-menu > li > span:hover, .container-header .metismenu.mod-menu .mm-toggler:hover, .container-header .offcanvas .metismenu.mod-menu .metismenu-item > a:hover,.container-header .offcanvas .metismenu.mod-menu .metismenu-item > a:focus{
color: #F7D9D9; /* MVL 05-01-25 changed link color to light red on hover and active for conatiner header menu aka main menu and canvas menu aka mobile menu */
text-decoration: underline; /* adding underline after removing it from main menu */
}
.container-header .site-description, .breadcrumb-item.active, .breadcrumb-item + .breadcrumb-item::before, .nav.nav-tabs .nav-link, .list-group-item, .list-group-item-action:active, .dropdown-item, .dropdown-item-text, .accordion-button, .popover-body, .container-header .mod-menu .parent > ul, .form-select.form-select-success option, .form-select-success.custom-select option, .form-select.custom-select-success option, .custom-select-success.custom-select option, .form-select.form-select-danger option, .form-select-danger.custom-select option, .form-select.custom-select-danger option, .custom-select-danger.custom-select option, .chosen-container.chosen-container-single .chosen-single, .metismenu.mod-menu .parent > ul, .form-control, .form-select, .custom-select, .dropdown-menu{
/* color: var(--cassiopeia-color-text); */
color: #F7D9D9; /* change white active text to light red */
}
.container-header {
color: var(--cassiopeia-color-text-thead);
background-color: var(--cassiopeia-color-primary-thead);
/*background-image: none;*/
background-image: linear-gradient(135deg, var(--cassiopeia-color-primary-thead) 54%, var(--cassiopeia-color-hover-thead) 150%);
}
.metismenu.mod-menu .mm-collapse {
background-color: var(--cassiopeia-color-primary-thead);
/* background-image: linear-gradient(135deg, var(--cassiopeia-color-primary-thead) 0%, var(--cassiopeia-color-hover-thead) 100%); */
}
.container-header .site-description, .container-header .navbar-brand, .container-header .navbar-brand:hover, .container-header .navbar-brand:focus{
color: var(--cassiopeia-color-text-thead);
}
.container-header a, .container-header .mod-menu > li > a, .container-header .mod-menu > li > span, .container-header .metismenu.mod-menu .mm-toggler, .container-header .offcanvas .metismenu.mod-menu .metismenu-item > a, .container-header .navbar-toggler{
color: var(--cassiopeia-color-link-thead);
}
.container-header a:hover,.container-header a:focus, .container-header .mod-menu > li > a:hover, .container-header .mod-menu > li > a:focus, .container-header .mod-menu > li > span:hover, .container-header .metismenu.mod-menu .mm-toggler:hover, .container-header .offcanvas .metismenu.mod-menu .metismenu-item > a:hover,.
 .offcanvas .metismenu.mod-menu .metismenu-item > a:focus {
/*color: var(--cassiopeia-color-hover-thead);*/
color: #f1b3b3; /*fixing color on mouse over*/
}
.topbar, .container-topbar{
color: var(--cassiopeia-color-text-topbar);
background-color: var(--cassiopeia-color-primary-topbar);
/*  background-image: linear-gradient(135deg, var(--cassiopeia-color-primary-topbar) 0%, var(--cassiopeia-color-hover-topbar) 100%);*/
}
.topbar a, .container-topbar a {
color: var(--cassiopeia-color-link-topbar);
}
.topbar a:hover,.topbar a:focus, .container-topbar a:hover, .container-topbar a:focus {
color: var(--cassiopeia-color-hover-topbar);
}
.topa .btn:focus {
color: var(--cassiopeia-color-text-btns);
}
.belowtop, .container-below-top{
color: var(--cassiopeia-color-text-belowtop);
background-color: var(--cassiopeia-color-primary-belowtop);
/*  background-image: linear-gradient(135deg, var(--cassiopeia-color-primary-belowtop) 0%, var(--cassiopeia-color-hover-belowtop) 100%);*/
}
.belowtop a, .container-below-top a{
color: var(--cassiopeia-color-link-belowtop);
}
.belowtop a:hover,.belowtop a:focus, .container-below-top a:focus, .container-below-top a:hover{
color: var(--cassiopeia-color-hover-belowtop);
}
.container-banner{
color: var(--cassiopeia-color-text-bnr);
background-color: var(--cassiopeia-color-primary-bnr);
/*  background-image: linear-gradient(135deg, var(--cassiopeia-color-primary-bnr) 0%, var(--cassiopeia-color-hover-bnr) 100%);*/
}
.container-banner a {
color: var(--cassiopeia-color-link-bnr);
}
.container-banner a:hover,.container-banner a:focus {
color: var(--cassiopeia-color-hover-bnr);
}
.container-header .grid-child.brand {
position:relative;
}
.container-header .grid-child.brand:before{
background-color: inherit;
}
.topa{
position:relative;
z-index:0;
color: var(--cassiopeia-color-text-topa);
background-color: var(--cassiopeia-color-primary-topa);
/*  background-image: linear-gradient(135deg, var(--cassiopeia-color-primary-topa) 0%, var(--cassiopeia-color-hover-topa) 100%);*/
}
.topa:before{
background-color: inherit;
background-image: inherit;
}
.topa a, .topa a:(.btn) {
color: var(--cassiopeia-color-link-topa);
}
.topa a:hover,.topa a:focus {
color: var(--cassiopeia-color-hover-topa);
}
.topb{
position:relative;
z-index:0;
color: var(--cassiopeia-color-text-topb);
background-color: var(--cassiopeia-color-primary-topb);
/*  background-image: linear-gradient(135deg, var(--cassiopeia-color-primary-topb) 0%, var(--cassiopeia-color-hover-topb) 100%);*/
}
.topb:before{
background-color: inherit;
background-image: inherit;
}
.topb a {
/*color: var(--cassiopeia-color-primary);*/
}
.topb a:hover,.topb a:focus {
color: var(--cassiopeia-color-link-topb);
}
.container-top-c > *{
flex: 1;
margin: 0.5em 0;
}
.container-top-c{
position: relative; grid-area: top-c;
}
.topc{
position:relative;
z-index:0;
color: var(--cassiopeia-color-text-topc);
/*background-image: linear-gradient(0.25turn, #e4f7ff, #ffffff, #aaf1ff);*/
/*background-color: var(--cassiopeia-color-primary-topc*/
  background-color: #c0deff;

/*  background-image: linear-gradient(135deg, var(--cassiopeia-color-primary-topc) 0%, var(--cassiopeia-color-hover-topc) 100%);*/
}
.topc:before{
background-color: inherit;
background-image: inherit;

}
.topc a {
/*color: var(--cassiopeia-color-link-topc);*/
  color: #861913;
  text-decoration: underline; /* 03-07-25 MVL adding underline to links to help with accessiblity */
}
.topc a:focus, .topc a:hover {
/*color: var(--cassiopeia-color-hover-topc);*/
  color: var(--cassiopeia-color-primary-thead);
}
.bottoma{
position:relative;
z-index:0;
color: var(--cassiopeia-color-text-bottoma);
background-color: var(--cassiopeia-color-primary-bottoma);
/*  background-image: linear-gradient(135deg, var(--cassiopeia-color-primary-bottoma) 0%, var(--cassiopeia-color-hover-bottoma) 100%);*/
}
.bottoma:before{
background-color: inherit;
background-image: inherit;
}
.bottoma a {
color: var(--cassiopeia-color-link-bottoma);
}
.bottoma a:hover,.bottoma a:focus {
color: var(--cassiopeia-color-hover-bottoma);
}
.bottomb{
position:relative;
z-index:0;
color: var(--cassiopeia-color-text-bottomb);
background-color: var(--cassiopeia-color-primary-bottomb);
/*  background-image: linear-gradient(135deg, var(--cassiopeia-color-primary-bottomb) 0%, var(--cassiopeia-color-hover-bottomb) 100%);*/
}
.bottomb:before{
background-color: inherit;
background-image: inherit;
}
.bottomb a {
color: var(--cassiopeia-color-link-bottomb);
}
.bottomb a:hover,.bottomb a:focus {
color: var(--cassiopeia-color-hover-bottomb);
}
.footer, [dir=rtl] .footer{
color: var(--cassiopeia-color-text-footer);
background-color: var(--cassiopeia-color-primary-footer);
/*background-image: none;*/
background-image: linear-gradient(135deg, var(--cassiopeia-color-primary-thead) 54%, var(--cassiopeia-color-hover-thead) 150%);
}
.footer a {
color: var(--cassiopeia-color-hover-footer);
}
.footer a:hover,.footer a:focus {
/*color: var(--cassiopeia-color-link-footer);*/
  color: #FF9E9E; /*changes to hard color pink*/
}
.view-featured .container-component {
padding: 40px 0 10px 0;
}
.container-header .grid-child.brand:before, .topa:before, .topb:before, .topc:before, .bottoma:before, .bottomb:before{
content:"";
z-index: -1;
position:absolute;
top:0;
bottom:0;
left:-100vw;
right:-100vw;
}
.site .swiper-pagination-bullet-active {
background: var(--cassiopeia-color-link);
}
.container-top-a > *, .container-top-b > *, .container-bottom-a > *, .container-bottom-b > *, .container-banner, .footer, .container-component > * + *, .container-sidebar-left > * + *, .container-sidebar-right > * + * {
margin: 0;
min-width:0;
}
.bgimages{
background-repeat: no-repeat !important;
background-position: center center  !important;
background-size: cover  !important;
}
.offcanvas.show {
background-color: var(--cassiopeia-color-primary);
background-color: var(--cassiopeia-color-primary-thead);
}
.offcanvas-header > *:only-child {
margin-left: auto;
}
.btn-primary, .grid-child a.btn-primary {
color: var(--cassiopeia-color-link-btns);
background-color: var(--cassiopeia-color-primary-btns);
border-color: var(--cassiopeia-color-primary-btns);
}

.container-banner a.btn-primary:hover, .container-banner a.btn-primary:focus, .grid-child a.btn-primary:hover, .grid-child a.btn-primary:focus, .btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus,.btn-primary:hover, .btn-primary:focus, .btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle,.btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary:hover, .btn-check:focus + .btn, .btn:focus  {
color: var(--cassiopeia-color-text-btns);
background-color: var(--cassiopeia-color-hover-btns);
border-color: var(--cassiopeia-color-hover-btns);
}
.card {
background-color: var(--cassiopeia-color-primary-tcard);
border: 1px solid var(--cassiopeia-color-text-tcard);
/*box-shadow: 0px 10px 30px rgba(61, 90, 125, 0.20);*/
}
.card-header {
background-color: var(--cassiopeia-color-hover-tcard);
border-bottom: 1px solid var(--cassiopeia-color-link-tcard);
}
:root {
--ph-error: #dc3545;
--ph-success: #28a745;
--ph-warning: #ffc107;
--ph-info: #17a2b8;
--ph-grey: #999;
--ph-grey-bg: #f9f9f9;
--ph-white-bg: #fff;
--ph-grey-color: #999;
--ph-grey-border: #f0f0f0;
--ph-loading-1: #c1e2f1;
--ph-loading-2: #45a7d4;
--ph-price-filter-bg: #08b2d9;
--ph-price-filter-border: #079ec0;
--ph-icon-default: #d0d0d0;
--ph-icon-featured: #f0ad4e;
--ph-icon-hot: #d9534f;
--ph-icon-new: #337ab7;
}

/* Linelab Theme 1 */
.brand-logo img {
max-width: 340px; /* changed to 340px to adjust for padding and make the logo bigger from 230px*/
padding: 0 20px;
}
.container-header .container-search {
padding: 0
}
.container-top-a .swiper-wrapper {
display: grid;
grid-template-columns: auto auto auto;
}
.container-top-a > .no-card {
background-color: var(--cassiopeia-color-primary-topa);
}
.metismenu.mod-menu .metismenu-item:not(.level-2) > ul {
padding: 15px;
}
.metismenu.mod-menu .metismenu-item:not(.level-1) > li:hover {
text-decoration: underline;
}
.metismenu.mod-menu .mm-collapse > li.parent > ul {
background-color: transparent;
}
.container-header .navbar-toggler {
border: 0;
font-size: 2.0rem;
}
.container-header {
box-shadow: 0 10px 20px 0 rgba(8,0,42,.08);
}
.container-banner .banner-overlay {
color: var(--cassiopeia-color-text-bnr);
background-repeat: no-repeat;
/*background-attachment: fixed; cause issues with mobile specially apple devices */
background-position: top, center;
/*background-size: unset; causing issues on mobile specially apple devices ipad and iphones*/
background-size: cover;/*add this line to try to fix it*/
background-attachment: scroll;/*add this to add consistency between devices and fix issues specially with apple devices*/
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
}
/*below is the catch all for touch screen targeting apple devices using safari engine*/
@supports ( -webkit-touch-callout : none) {
.container-banner .banner-overlay {
background-attachment:scroll
}
}

@supports not ( -webkit-touch-callout : none) {
.container-banner .banner-overlay {
/*background-attachment: fixed;*/
background-attachment: scroll;/*add this to add consistency between devices and fix issues specially with apple devices*/
}
}
/*end of catch all for touch screen */
.metismenu.mod-menu .metismenu-item ul li {
font-size: 0.9rem;
}
.container-banner .banner-overlay .overlay .text-thin::after {
background: var(--cassiopeia-color-text-bnr);
height: 2px;
margin: 1rem auto 1rem;
}
.container-banner p.lead {
margin-bottom: 0;
}
.container-banner .banner-overlay .overlay .text-thin {
font-weight: 700;
}
.container-banner .banner-overlay .overlay {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
/*padding: 1em; remove edge must re-look at*/
text-align: center;
background-color: rgba(0,0,0,0);/*change alpha from .2 to 0*/
}
.mod-breadcrumbs__wrapper {
margin: 0;
}
.breadcrumb {
background-color: transparent;
margin-bottom: 25px;
padding: 0 !important;
}
.site .mod-breadcrumbs__wrapper{
margin:0;
}
.tags a.btn{
color: var(--white);
}
.newsflash-body{
padding: 0 10px;
}
.container-top-a > .no-card {
overflow: hidden;
margin: -130px 8px 0 8px;
}
.topa, .topb, .bottoma {
padding: 80px 0;
}
.container-component {
padding: 40px 0 10px 0; /*03-04-25 MVL change bottom maring to 0 from 80px because it pushed the side menu really far from the content on top of it in mobile */
}
.com-content-article, .com-users-login, .com-users-reset, .com-users-remind, .ph-item-price-panel, .ph-checkout-cart-box, #member-registration, .com-finder, .com-content-category.category-list {
background-color: var(--white);
padding: 1.5rem;
}
.blog-items[class*=" columns-"] .item-content {
padding: 1.5rem;
}
.blog-items[class*=" columns-"] > div{
background-color: var(--white);
}
.container-top-c > .card{
padding: 80px 30px 80px 0;
}
.container-top-c > .card:last-child{
padding: 80px 0 80px 30px;
}
.bottoma .card, .boxed .blog-item, .item-page, .blog-items[class*=" columns-"] > div {
box-shadow: 0px 10px 30px rgba(61, 90, 125, 0.20);
border-radius: 3px;
margin-bottom: 1em; /* 03-04-25 MVL adding buffer to show shadow of content card*/
}
.container-bottom-b > .card{
/*margin-top: -60px; taking this out because it pushes up the modules in bottom-b position */
/* padding: 20px; changing paddding for containter-bottom-b*/
padding: 20px 0px;
border-radius: 0;
/* modding the spacing in card in bottom-b */
--card-spacer-x: 0.5rem;
--card-spacer-y: 0.4rem;
}
.container-bottom-b .nav {
margin-bottom: 5px;
}
.badge {
margin: 5px 0;
}
/* remove footer size to use default font size
.footer{
 font-size: 13px;
}
*/
.bottomb .card-header {
margin: 0;
/* padding: 0 0 13px 0; change padding to one below */
padding: var(--card-spacer-y) var(--card-spacer-x);
border-bottom: 1px solid var(--cassiopeia-color-link-bottomb);
position: relative;
}
/* adding code below to add bar under header of h2 for all articles displayed */
.page-header > h2{
border-bottom: solid thick var(--cassiopeia-color-primary-thead);
/*border-bottom: solid thick var(--cassiopeia-color-link); change to blue using varible ontop */
}

.bottomb .card-header::after, .blog-featured .page-header::after, .newsflash-title::after, .blog .page-header::after  {
position: absolute;
width: 40px;
height: 3px;
content: '';
bottom: -2px;
left: 0;
padding: 25px 0px; /* added this to give space for module below and above the for bottom-b overall */
}
.container-sidebar-left .card-header, .container-sidebar-right .card-header  {
padding: .5rem 0;
border-bottom: 5px solid var(--red) !important;
margin: 1rem;
}
.blog-featured .page-header, .newsflash-title, .blog .page-header {
padding: 10px 0;
position: relative;
margin: 0 0 0 0; /* 03-04-25 MVL removed 30px from bottom and replaced it with 0px to remove head space under headings*/
}

/* Removing all of these because it makes this annoying ugly red bar under all headers
.bottomb .card-header::after {
background: var(--cassiopeia-color-link-bottomb);
}
.blog-featured .page-header::after, .blog .page-header::after {
background: var(--cassiopeia-color-link);
}
.newsflash-title::after {
background: var(--cassiopeia-color-text-topa);
}
*/

.blog-item .item-image {
margin: 0;
}
.blog-item {
margin: 0 0 40px 0;
}
.item-page .page-header {
margin: 0 0 20px 0;
}
legend {
font-size: 1.2rem;
}
.page-item.active .page-link {
background-color: inherit;
border-color: inherit;
color: inherit;
}
.items-more {
padding: 1rem 0;
}
.form-check-input:checked {
background-color: var(--success);
border-color: var(--success);
}
.pagination__wrapper {
  margin-bottom: 3rem;
}
p.counter {
  padding-top: 7px !important;
}
/* Phoca Cart Theme 1 */
.container-header .grid-child .cart {
display: flex;
}
.ph-item-box .ph-item-content {
padding: 0;
}
.ph-cart-link-compare {
margin-top: 10px;margin-right: 2px
}
.com-content-article, .ph-item-price-panel, .ph-checkout-cart-box, #member-registration {
background-color: var(--white);
padding: 1.5rem;
}
.cart .ph-small {
font-size: inherit;
}
.ph-filter-box h4 {
font-size: 1.1rem;
margin: 0 0 20px 0;
}
.cart .ph-cart-module-box {
display: flex;
padding-right: 10px;
margin-top: auto;
margin-bottom: 17px;
}
.ph-item-box .ph-item-action-box.list .ph-item-action-fade, .ph-item-box .ph-item-action-box.gridlist .ph-item-action-fade
{top: auto}
.cart  .metismenu.mod-menu .metismenu-item:not(.level-2) > ul {
margin-right: 0;
}
.ph-currency-count-sup, .ph-wishlist-count-sup, .ph-compare-count-sup, .ph-cart-count-sup {
background: var(--cassiopeia-color-hover-btns);
color: var(--cassiopeia-color-text-thead);
width: 1.5em;
height: 1.5em;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -0.6em;
right: 0.75em;
}
.cart .ph-currency-list {
list-style-type: none;
}
.ph-cart-module-compare-box div, .ph-cart-module-wishlist-box div, .ph-cart-module-cart-box div{
color: var(--cassiopeia-color-text-thead);
}
.container-header .grid-child .cart .metismenu.mod-menu .metismenu-item {
padding: 0;
}
.container-header .grid-child .cart .metismenu.mod-menu .metismenu-item > button, .cart .metismenu.mod-menu .metismenu-item > span {
overflow: visible;
}
.metismenu.mod-menu .metismenu-item > ul, .container-header .metismenu > li > a:hover::after {
/*right: 0; code making sub menu go off screen*/
}
.container-header .metismenu > li.active > button::before {
background: none;
}
.ph-comparison-items, .pc-wishlist-view {
background-color: var(--cassiopeia-color-primary-tcard);
border: 1px solid var(--cassiopeia-color-text-tcard);
padding: 15px;
}
.ph-item-box {
box-shadow: 0 3px 10px 3px rgba(64,72,76,.08);
border-radius: 3px;
padding: 20px;
background-color: var(--white);
}
.ph-pagination-top .btn.active span {
color: var(--white);
}
.ph-item-box .ph-item-action-box .ph-item-action-fade {
background:  var(--white);
padding: 0;
top: -10%;
bottom: auto;
}
.ph-item-box .ph-item-action-fade a {
border: 0;
font-size:22px;
color: var(--cassiopeia-color-link);
}
.ph-item-box:hover {
z-index: 9;
}
.ph-product-scroller-module-box .ph-item-content.grid a {
  margin: 0 auto;
}
.site .card-body .ph-category-add-to-cart-box .btn-primary {
  margin: 10px 0 0 0;
}
.pc-categories-view .ph-row-flex.grid .row-item .ph-item-box .ph-thumbnail-c .ph-item-content .ph-item-action-box .ph-pull-right, .ph-mod-desc {
float: none;
text-align: center;
}
.swiper-container.ph-mod-brands-swiper-container .swiper-wrapper .swiper-slide, .swiper-container.ph-mod-product-scroller-swiper-container .swiper-wrapper .swiper-slide {
justify-content: center;
background-color: var(--white);
height: 100%;
overflow: hidden;
border-radius: 3px;
}
.ph-mod-product-scroller-swiper-wrapper .ph-item-box .ph-thumbnail-c .ph-item-content h3, .ph-item-box h3 {
font-size: 14px;
margin-top: 15px;
text-align: center;
}
.bottoma .card-header{
text-align: center;
padding: 20px 0;
}
.topb .card, .topb .card-header, .topc .card-header {
background-color: transparent;
border: 0;
}
.topb .card-header, .topc .card-header{
text-align: center;
}
.swiper-container.ph-mod-brands-swiper-container .swiper-wrapper .swiper-slide::after {
content: "";
position: absolute;
bottom: 0;
top: 0;
right: 0;
width: 1px;
height: auto;
background-color: var(--cassiopeia-color-primary);
}
.swiper-container.ph-mod-brands-swiper-container .swiper-wrapper .swiper-slide:last-child::after {
background-color: transparent;
}
.card-body .btn-primary {
margin:10px 0 0 0;
}
#phPriceFilterRange.ui-slider-horizontal .ui-slider-handle, #phPriceFilterRange .ui-widget-header {
background: var(--cassiopeia-color-link);
}
.ph-stars-box, span.ph-stars {
margin: 0 auto;
}
.ph-category-price-box {
font-size: 1.2rem;
}
@supports (display: grid) {
.site-grid {
display: grid;
grid-template-areas:
". banner banner banner banner ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". top-c top-c top-c top-c ."
". comp comp comp comp ."
". side-r side-r side-r side-r ."
". side-l side-l side-l side-l ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b .";
}
}

/* Media Query - CSS */
@media (max-width: 575.98px) {
  .image-alternate.image-left .blog-item:nth-of-type(2n+1) .item-image {
  margin-right: 0;
  margin-left: 0;
  order: 0;
  }
  .container-top-c > .card, .container-top-c > .card:last-child{
  padding: 80px 0;
  }
}
@media (min-width: 768px) {
}
@media (max-width: 991.98px) {
  .offcanvas .metismenu.mod-menu .metismenu-item > ul {
  position: relative;
  width: 100%;
  margin-top: 1rem;
  box-shadow: none;
}
/* code not acting correctly and breaking header on all platforms
@media (max-width: 576px) {
  .container-banner .banner-overlay {
    background-size: 600% !important; attemping to fix iphone display
  }
}
@media (max-width: 1025px) {
  .container-banner .banner-overlay {
    background-size: 300% !important; attemping to fix iphone display
  }
}
*/
.offcanvas .metismenu.mod-menu .mm-collapse {
background-color: transparent;
}

.offcanvas .metismenu.mod-menu .metismenu-item > a {
color: var(--white);
}
.image-left .blog-item .item-image, .image-right .blog-item .item-image {
flex: 1 1 40%;
}
.container-top-c {
flex-direction: column;
}
.container-top-c > * {
flex: 0 1 auto;
}
.mod-list li , .tag{
padding: 1em 0;
}
.mod-footer {
text-align: center;
}
.site {
  padding: 0 !important;
}
.awesomplete > input {
  max-width: 160px;
}
}
@media (min-width: 992px) {

@supports (display: grid) {
.site-grid {
grid-template-areas:
". banner banner banner banner ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". top-c top-c top-c top-c ."
". side-l comp comp side-r ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b .";
}
}
.header.mhover .metismenu.mod-menu li:hover > ul {
display: block;
min-width:250px;
}
.offcanvas-start {
width: 100%;
}
}
@media (min-width: 1200px) {
h3, .h3 {
font-size:1.5rem;
}
}
@media (max-width: 1025px) {
  .container-header {
    display:flex;
  }
}
@media (max-width: 1025px) {
  .container-header {
    display:flex;
  }
}
@media (max-width: 450px) {
  .container-header {
    display:flex;
    flex-direction: column;
  }
}
/*
Override-Top-News-J4 CSS below
*/
div.rectangle_12 > h6 {
	margin-top:25px;
	color:#0066b2;
}
div.rectangle_12 > h3 > a.mod-articles-category-title {
	/*color:#000;*/
	font-weight:600;
  font-size: .8em;
}
img.rectangle_12 {
	width: 100%;
	height: 450px;
	object-fit: cover;
}
.rectangle_12 .mod-articles-category-introtext {
	height: 70px;
	overflow: hidden;
	/*width: 80%;*/
	line-height: 1.5 !important;
	word-break: break-word;
}
.rectangle_12 .mod-articles-category-introtext a{
	text-decoration: underline !important;
}
/** this section removes horizontal bar hr after 3rd article on the right side and removes the first block on articles to offset
.col-md-12.actualites-title-0, div.col-md-12.actualites-title-3 > hr {
	display: none;
}
**/
/**added code below to hide first article on the loop **/
.col-md-12.actualites-title-0 {
    display: none;
}
h4.actualites-title > a {
	color: #000;
	font-size: 22px;
	line-height:28px;
}
span.mod-articles-category-category.date {
	color: #0066B2;
	font-size: 12px;
}
.col-md-8.rectangle_12 hr {
	/*display:none; removes line under feature main slide*/
}
.actualities-side {
	padding-left:30px;
}
@media (max-width: 767px) {
  .actualities-side {
	padding-left:0px;
}
}
/*
End Override-Top-News-J4 CSS
*/

/*
Begining of Table styles
Allows table pop out and repsonive with scroll bar
class to add to table for scrollable mobile tables and desktop
*/
.table {
   /*display: block !important;*/
   overflow-x: auto !important;
   width: 100% !important;
}

/*
beginning of directory table
Caption dark blue bar with white text
thead with light blue with black text
th row with bold text
starting from row 2 striped background
no wrap text
*/

table.directorytable th {
  font-weight: bold;
  text-align: left;
  padding: 0.75rem;
  color:#000;
  background: transparent;
}
table.directorytable td {
  text-align: left;
  padding: 0.75rem;
  background: transparent;
}
table.directorytable {
  border-collapse: collapse;
  width: 100%;
  caption-side: top;
}

/* set color for striped table rows and first table row color to blue with black text */
table.directorytable tr:nth-child(even) {
  background-color: #DFE3E8;
}
table.directorytable tr:nth-child(odd) {
  background-color: #FAFAFA;
}
table.directorytable thead tr:nth-child(1) {
  background-color: #56C2E6;
}

/* set ratio for columns*/
table.directorytable tr th:nth-child(1) {
  width:20%;
}
table.directorytable tr th:nth-child(2) {
  width:20%;
}
table.directorytable tr th:nth-child(3) {
  width:17%;
}
table.directorytable tr th:nth-child(4) {
  width:53%;
}

/* Changes wrapping for words and text for columns*/
table.directorytable tr th:nth-child(1) {
  white-space: nowrap;
}
table.directorytable tr td:nth-child(2) {
  white-space: nowrap;
}
table.directorytable tr td:nth-child(3) {
  white-space: nowrap;
}
table.directorytable tr td:nth-child(4) {
  white-space: nowrap;
}

table.directorytable caption {
  text-align: left;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #004971;
  padding: 15px;
}
/* ending of directory table */


/*
table for datatable styling
centered caption now style
thead blue with white text
th left row with blue and white text
bordered with white background data
*/

table.datatable {
  border-collapse: collapse;
  width: 100%;
  caption-side: top;
}

table.datatable caption {
  text-align: center;
  font-weight: bold;
  color: #000;
  padding: 15px;
  font-size: 20px;
}

/* set ratio for columns*/
table.datatable tr th:nth-child(1) {
  white-space: nowrap;
}
table.datatable tr th:nth-child(2) {
  white-space: nowrap;
}
table.datatable tr th.textarea:nth-child(2) {
  width: 300px;
  white-space: nowrap;
}

table.datatable th {
  border: 1px solid black;
  text-align: left;
  white-space: nowrap;
  font-weight: bold;
}

table.datatable td {
  border: 1px solid black;
  text-align: left;
  vertical-align: top;
}
/* end of table for datatable styling */

/*
table for plain contact table styling
thead blue bg with white text
white bg with data
*/
table.contacttable th {
  border: 1px solid black;
  font-weight: bold;
  text-align: left;
  padding: 5px;
}
table.contacttable td {
  border: 1px solid black;
  text-align: left;
  padding: 5px;
}
table.contacttable {
  border-collapse: collapse;
  width: 100%;
}
/*
end of table for plain contact table styling
end of Table styling
*/


/* next section is coloring blocks that is used for enrollment */
/* div block colors background with a radius on its corners */
div.block-red{
  background-color: #F6CCDA;
  color: #000;
  padding: 20px;
  border-radius: 25px;
}
div.block-yellow{
  background-color: #FFFACD;
  color: #000;
  padding: 20px;
  border-radius: 25px;
}
div.block-green{
  background-color: #98FB98;
  color: #000;
  padding: 20px;
  border-radius: 25px;
}
div.block-blue{
  background-color: #87CEFA;
  color: #000;
  padding: 20px;
  border-radius: 25px;
}
/*end of block styling used in enrollment */

/*
---- beginning of notification styles ----
*/

/* beginning of emergencyred */
div.block-emergencyred{
  background-color: #F6CCDA;
  color: #000;
  padding: 10px;
  text-align: center;
}
div.block-emergencyred hr {
    border-color: #09c;
    margin: 10px 0px;
}
div.block-emergencyred a{
  text-decoration: underline;
  color: #0000FF;
}
div.block-emergencyred a:hover{
  color: #761E1E;
}
div.block-emergencyred a:visited{
  color: #0000FF;
}
div.block-emergencyred a:active{
  color: #761E1E;
}
/*end of emergencyred */

/* beginning of publicgold */
div.block-publicgold{
  background-color: #FFFAE0;
  color: #000;
  padding: 10px;
  text-align: center;
}
div.block-publicgold hr {
    border-color: #09c;
    margin: 10px 0px;
}
div.block-publicgold a{
  text-decoration: underline;
  color: #0000FF;
}
div.block-publicgold a:hover{
  color: #761E1E;
}
div.block-publicgold a:visited{
  color: #0000FF;
}
div.block-publicgold a:active{
  color: #761E1E;
}
/*end of publicgold */

/*
---- end of notification styles ----
*/

/*
beginning of footer custom css
*/

/* card bottom-b padding to make logo evenly spaced using bottom-b as extended footer */
.addpaddingfooterimg{
  margin-top:1.5vw;
  margin-bottom:1vw;
}

.bottomb{
  /* cant add this to the other bottomb because those are tied to other classes */
  text-align: left;
}

.infofooterbody{
  border-left: 7px solid #ACC8E5;
  padding-left: 12px;
  color: var(--cassiopeia-color-primary);
}
.footertext{
  text-align: left;
  padding: 15px;
  color: var(--cassiopeia-color-primary);
}
.footertext a{color:#c1e2f1 !important; text-decoration: underline;}
.footertext a:hover{color: #f1b3b3 !important; text-decoration: underline;}
.footertext a:visited{color:#c1e2f1; text-decoration: underline;}
.footertext a:active{color: #FF9E9E !important; text-decoration: underline;}


/* redundant code already used
.container-bottom-b > .card {
  --card-spacer-x: 0.5rem;
  --card-spacer-y: 0.4rem;
}
*/

/* coloring and text and links for bottom-b being used as the footer */
/*
not using this below
.bottom-bfooterblack{
  background-color:rgba(0,0,0,0);
  --card-border-color: rgba(0,0,0,0);
  color: #fff;
}
*/
/* changes header coloring */
/*
.bottom-b-card-body > .card-body{
  background-color:rgba(0,0,0,0);
  border-left: 8px solid #ACC8E5 !important;
  padding-top: 10px;
  padding-left: 20px;
  margin-bottom: 1rem;
}
*/

/* removes the thin bar in the heading */
.bottom-b-card-header {
  border-bottom: 0px !important;
  color: #ACC8E5;
}

.bottom-b-card-body > h3.card-header {
  font-size: 1.7em;
}


/* removes the small bar after module h3 heading */
.bottom-b-card-header::after {
    background: rgba(255,255,255,0) !important;
}

.bottom-b-card-body a:link { color: #FF9E9E; }
.bottom-b-card-body a:visited { color: #FF9E9E; }
.bottom-b-card-body a:hover { color: #A3BFFF; }
.bottom-b-card-body a:active { color: #A3BFFF; }


/* moving back to top button ontop of the translate dropdown and changing the z-index behind the translate module that floating*/
.back-to-top-link {
 bottom:1.7rem;
 z-index: 0;
}

/*
end of footer custom css
*/




/*


/*
artist of the week code below blue white gradient
*/
/* artist of the week profile css below*/
.aotw-bg {
  background-attachment: fixed;
  background-size: unset;
  background-position: top, center;
  background: linear-gradient(148deg, rgba(149,212,255,1) 0%, rgba(255,255,255,1) 35%, rgba(149,212,255,1) 100%);

  /* below forces color override */
  /*background-image: linear-gradient(0.25turn, #e4f7ff, #ffffff, #aaf1ff);*/
}
div.aotw_profile_image > h6 {
	margin-top:25px;
	color:#0066b2;
}
div.aotw_profile_image > h3 > a.mod-articles-category-title {
	color:#000;
	font-weight:600;
}
img.aotw_profile_image {
	height: 400px;
	/*width: 300px;*/
    border-radius: 1%;
  	-webkit-filter: drop-shadow(5px 5px 5px #222);
  	filter: drop-shadow(5px 5px 5px #222);
}
.aotw_profile_image .mod-articles-category-introtext {
	height: 70px;
	overflow: hidden;
	width: 80%;
	line-height: 1.5 !important;
	word-break: break-word;
}

div.aotw_profile_image_circle{
  padding: 10px 0px;
}

img.aotw_profile_image_circle {
	/*height: 300px;
	width: 300px;*/
	border:5px solid rgba(190,149,255,.5);
  border-radius: 50%;
	-webkit-filter: drop-shadow(5px 5px 5px #222);
	filter: drop-shadow(5px 5px 5px #222);
  float: left;
  display: inline-block;
}

img.aotw_art_image {
	/*border-radius: 1%;*/
	border:5px solid rgba(0,0,0,1);
	-webkit-filter: drop-shadow(5px 5px 5px #222);
	filter: drop-shadow(5px 5px 5px #222);
}
.aotwintrotext{
  padding-top:1vw;
  text-align:center;
}
.aotwart{
  padding-bottom: .4vw;
}
.aotwprofile{
  padding: 50px 25px;
}


.aotwintrotext a:link { color: #700000; text-decoration: underline;}
.aotwintrotext a:visited { color: #700000; }
.aotwintrotext a:hover { color: #1a37c2; }
.aotwintrotext a:active { color: #A3BFFF; }

/*
03-06-25 MVL removed section becasue this code affected overall site
.top-c h3{
  font-size: 2.5em; /*Makes header size for top-c and artist of the week text bigger
}
.top-b h3{
  font-size: 2.5em; /*Makes header size for top-c and artist of the week text bigger
}
.bottom-a h3{
  font-size: 2.5em; /*Makes header size for top-c and artist of the week text bigger
}
*/
@media (max-width: 767px) {
    img.aotw_profile_image_circle {
      height: auto;
      width: 250px;
      border:6px solid rgba(190,149,255,.5);
      margin-top: 20px;
      /*margin-bottom: 10px;*/
      float: none;
    }
    div.aotw_profile_image_circle{
      text-align: center;
      padding: 0px 0xp !important;
    }
    .aotwart{
      text-align:center;
      padding-top: 7vw;
      padding-bottom: 0vw;
    }
    .aotwprofile{
      text-align:center;
      padding: 0px 10px;
    }
}

@media (max-width: 360px) {
    img.aotw_profile_image_circle {
      height: auto;
      border:3px solid rgba(190,149,255,.5);
    }
}

/*
end of artist of the week code blue white gradient
*/

/*
artist of the week code below red dusk gradient
*/

/* artist of the week profile css below*/
.aotw-bg-1 {
  background-attachment: fixed;
  background-size: unset;
  background-position: top, center;
  background: linear-gradient(0deg, rgba(255,177,190,1) 0%, rgba(255,194,163,1) 100%);

  /* below forces color override */
  /*background-image: linear-gradient(0.25turn, #e4f7ff, #ffffff, #aaf1ff);*/
}
div.aotw_profile_imageB > h6 {
	margin-top:25px;
	color:#0066b2;
}
div.aotw_profile_imageB > h3 > a.mod-articles-category-title {
	color:#000;
	font-weight:600;
}
img.aotw_profile_imageB {
	height: 400px;
	/*width: 300px;*/
    border-radius: 1%;
  	-webkit-filter: drop-shadow(5px 5px 5px #222);
  	filter: drop-shadow(5px 5px 5px #222);
}
.aotw_profile_imageB .mod-articles-category-introtext {
	height: 70px;
	overflow: hidden;
	width: 80%;
	line-height: 1.5 !important;
	word-break: break-word;
}

div.aotw_profile_image_circleB {
  padding: 10px 0px;
}

img.aotw_profile_image_circleB {
	/*height: 300px;
	width: 300px;*/
	border:5px solid rgba(170,191,109,.5);
  border-radius: 50%;
	-webkit-filter: drop-shadow(5px 5px 5px #222);
	filter: drop-shadow(5px 5px 5px #222);
  float: left;
  display: inline-block;
}

img.aotw_art_imageB {
	/*border-radius: 1%;*/
	border:2px solid rgba(0,0,0,1);
	-webkit-filter: drop-shadow(5px 5px 5px #222);
	filter: drop-shadow(5px 5px 5px #222);
}
.aotwintrotextB {
  padding-top:1vw;
  text-align:center;
}
.aotwartB {
  padding-bottom: .4vw;
}
.aotwprofileB {
  padding: 50px 25px;
}


.aotwintrotextB a:link { color: #0000B3; text-decoration: underline;}
.aotwintrotextB a:visited { color: #0000B3; }
.aotwintrotextB a:hover { color: #574667; }
.aotwintrotextB a:active { color: #574667; }

/*
03-06-25 MVL removed this code because this affected the overall site, i dont know what i was thinking when i wrote this code
.top-c h3{
  font-size: 2.5em; /*Makes header size for top-c and artist of the week text bigger
}
.top-b h3{
  font-size: 2.5em; /*Makes header size for top-c and artist of the week text bigger
}
.bottom-a h3{
  font-size: 2.5em; /*Makes header size for top-c and artist of the week text bigger
}
*/
h3.aotw {
  font-size: 1.5em;
}


@media (max-width: 767px) {
    img.aotw_profile_image_circleB {
      height: 250px;
      width: 250px;
      border:6px solid rgba(170,191,109,.5);
      margin-top: 20px;
      /*margin-bottom: 10px;*/
      float: none;
    }
    div.aotw_profile_image_circleB  {
      text-align: center;
      padding: 0px 0xp !important;
    }
    .aotwartB {
      text-align:center;
      padding-top: 7vw;
      padding-bottom: 0vw;
    }
    .aotwprofileB {
      text-align:center;
      padding: 0px 10px;
    }
}

@media (max-width: 360px) {
    img.aotw_profile_image_circleB {
      height: auto;
      border:3px solid rgba(170,191,109,.5);
    }
}
/*
end of artist of the week code for red dusk gradient
*/




@media (max-width: 990px) {
  .setinverselinks{
    padding-bottom:35px;
  }
  .bottomb{
    /* cant add this to the other bottomb because those are tied to other classes */
    text-align: center;
  }
  .infofooterbody{
    border-left: 0px solid #ACC8E5;
    padding-left: 0px;
  }
  .footertext{
    text-align: center;
    padding-bottom: 50px;
  }
}
.setinverselinks a{
  font-size:1.1em;
  font-weight:500;

}
.icontextsize{
  font-size:1em;
  line-height:2em;
}
/*#FF9E9E this is pink color on dark*/
.setinverselinks a:link { color: #ffffff; text-decoration: underline; }
.setinverselinks a:visited { color: #ffffff; }
.setinverselinks a:hover { color: #A3BFFF; }
.setinverselinks a:active { color: #A3BFFF; }

/*news link title color */
.actualites-title a:link { color: var(--cassiopeia-color-link); }
.actualites-title a:visited { color: var(--cassiopeia-color-link); }
.actualites-title a:hover { color: var(--cassiopeia-color-hover); }
.actualites-title a:active { color: var(--cassiopeia-color-hover); }


.feature-news-titles a:link { color: var(--cassiopeia-color-link); }
.feature-news-titles a:visited { color: var(--cassiopeia-color-link); }
.feature-news-titles a:hover { color: var(--cassiopeia-color-hover); }
.feature-news-titles a:active { color: var(--cassiopeia-color-hover); }




/*
youtube styling
*/
.ytfBlock.swiper-slide{
  text-align: center;
  background-color: rgba(255, 255, 255, 0);
  border-radius: 5%;
}
.ytfMeta{
  padding: 0px 5px;
}
.ytfDesc{
  background-color: rgba(255, 255, 255, 0) !important;
}


/* superintendent layout */


.super-header {
  height:20vw;
  background-repeat: no-repeat;
  background-attachment: scroll;
  /*background-position: right 60% top 75%;*/
  --card-spacer-y: 0rem;
  --card-spacer-x: 0rem;
}
.customsuperseachintro {
  z-index: 100;
  background-color: #004d80;
  padding: 20px 50px;
  color: #ffffff;
  position: relative;
  top: -3vw;
  margin-bottom: -4vw;
}
.customsuperseachintro h2 {
  color:#b2dfee;
  font-size: 1.9em;
}

/*added 05-31-24 */
.customsuperseachintro a {
  color: #FFC2C7;
  /*text-decoration: none; changed this to be underline below to improve accessiblity for link */
  text-decoration: underline;
  &:hover {
    color: #d2edff !important;
    text-decoration: underline;
  }
  &:visited {
    color: #FFC2C7;
    text-decoration: underline;
  }
}

.superintendentsearchtimeline h2{
  text-align: center;
}
.superintendentsearchtimeline h3{
  font-size: 16px;
  margin-bottom: 30px; /*after paragraph */
}
.supertimeline-container{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
}
.supertimeline-item5 {
  background: #C7E3FF;
  text-align: center;
  width: 19%;
  box-shadow: 0px 10px 30px rgba(61, 90, 125, 0.20);
  border-radius: 3px;
}
.supertimeline-item4 {
  background: #C7E3FF;
  text-align: center;
  width: 24%;
  box-shadow: 0px 10px 30px rgba(61, 90, 125, 0.20);
  border-radius: 3px;
}
.supertimeline-item4 h4{
  font-size: 35px;
}
.supertimeline-item5 h4{
  font-size: 35px;
}
.supertimeline-header{
  background: #ffffff;
  padding: 20px 10px;
  border-top: 10px solid #34373a
}
.supertimeline-year{
  font-size: 40px;
  line-height:40px;
  font-weight: bold;
}
.supertimeline-body{
  padding: 30px 13px;
}
.supertimeline-body p {
  line-height: 32px;   /* within paragraph */
  margin-bottom: 20px; /*after paragraph */
  font-size: 13px;
}
.supertimeline-item4.supertimeline-item5:nth-child(odd) {
  background: #C7E3FF;
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}
.supertimeline-item4.supertimeline-item5:nth-child(even) {
  background: #DBEEFF;
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}
#triangle-down {
  width: 0;
  height: 0;
  position:relative;
  left:35%;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 30px solid #fff;
  text-align: center;
}
@media (max-width: 1550px) {
  .super-header {
    height:30vw;
    /*background-position: right 45% top 60%;*/
  }
}
@media (max-width: 1200px) {
  .supertimeline-container{
    flex-direction: column !important;
  }
  .supertimeline-item4{
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  .supertimeline-item5{
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  #triangle-down {
    left: 45%;
  }
  .super-header {
    height:30vw;
    /*background-position: right 38% top 65%;*/
  }
  .customsuperseachintro {
    top: -9vw;
    margin-bottom: -10vw;
  }
}
@media (max-width: 910px) {
  #triangle-down {
    left: 45%;
  }
}
@media (max-width: 750px) {
  #triangle-down {
    left: 43%;
  }
}
@media (max-width: 650px) {
  #triangle-down {
    left: 40%;
  }
}
@media (max-width: 500px) {
  #triangle-down {
    left: calc(50%-10);
  }
  .super-header {
    height:0vw;
    /*background-position: right 31% top 65%;*/
  }
  table.supertable th {
  	text-align: center !important;
  }
  table.supertable td {
    text-align: center !important;
  }
  table.supertablealt caption {
    text-align: center !important;
  }
  table.supertablealt th {
  	text-align: center !important;
  }
  table.supertablealt td {
    text-align: center !important;
  }
  .superjob {
    text-align: center;
  }
}
.superjob {
    /*display: block;
 	 width: 100%; something wonky */
    background: #c7e3ff;
    box-shadow: 0 10px 30px rgba(61,90,125,0.2);
    border-radius: 3px;
  	padding: 20px 50px;
}

table.supertable {
  /*display: block !important;*/
  border-collapse: collapse;
  width: 100%;
}
table.supertable caption {
  text-align: left;
  font-weight: bold;
  color: #ffffff;
  background-color: #004d80;
  padding: 1.5rem 1rem;
  caption-side: top;
}
table.supertable th {
  font-weight: bold;
  text-align: left;
  padding: 1rem;
  color:#000000;
  background: transparent;
}
table.supertable td {
  text-align: left;
  padding: 1rem;
  background: transparent;
}
table.supertable tr:nth-child(even) {
  background-color: #DFE3E8;
}
table.supertable tr:nth-child(odd) {
  background-color: #FAFAFA;
}
table.supertable thead tr:nth-child(1) {
  background-color: #c7e3ff;
}
table.supertable tr th:nth-child(1) {
  width:50%;
}
table.supertable tr th:nth-child(2) {
  width:50%;
}
table.supertable tr td:nth-child(1) {
  white-space: normal;
}
table.supertable tr td:nth-child(2) {
  white-space: normal;
}
table.supertablealt {
  /*display: block !important;*/
  border-collapse: collapse;
  overflow-x: auto !important;
  width: 100%;
}
table.supertablealt caption {
  text-align: left;
  font-weight: bold;
  color: #ffffff;
  background-color: #004d80;
  padding: 1.5rem 1rem;
  caption-side: top;
}
table.supertablealt th {
  font-weight: bold;
  text-align: left;
  padding: 1rem;
  color:#000000;
  background: transparent;
}
table.supertablealt td {
  text-align: left;
  padding: 1rem;
  background: transparent;
}
table.supertablealt tr:nth-child(even) {
  background-color: #DFE3E8;
}
table.supertablealt tr:nth-child(odd) {
  background-color: #FAFAFA;
}
table.supertablealt thead tr:nth-child(1) {
  background-color: #c7e3ff;
}
table.supertablealt tr th:nth-child(1) {
  width:34%;
}
table.supertablealt tr th:nth-child(2) {
  width:33%;
}
table.supertablealt tr th:nth-child(3) {
  width:33%;
}
table.supertable tr td:nth-child(1) {
  white-space: normal;
}
table.supertable tr td:nth-child(2) {
  white-space: normal;
}

.superhomepage{
  background-color: #00406B;
  color: #ffffff;
  padding: 10px 0px;
  text-align: center;
  font-size: 1.1em;
  --card-border-radius: 0rem !important;
}
.superhomepageBottomBuffer {
  margin-bottom: 40px;
}
.superhomepage a {
  color: #FFC2C7;
  /*text-decoration: none; changed this to be underline below to improve accessiblity for link */
  text-decoration: underline;
  &:hover {
    color: #d2edff !important; /* added important on 05-31-24 */
    text-decoration: underline;
  }
  &:visited {
    color: #FFC2C7;
    text-decoration: underline;
  }
}
.superhomepage h3 {
  font-size: 2em;
  color: #b2dfee;
}
@media(max-width: 1124px){
  .container-header .container-nav {
    align-items: center;
    justify-content: center;
  }
}
.skip-to-link {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    z-index: 9999
}
.skip-to-link>li {
    left: 0;
    position: absolute !important;
    top: 0;
}
.skip-to-link>li+li {
	margin-left:0em !important;
}
.skip-to-link>li>a {
    color: #093766 !important;
    background: #ffffff;
    position: absolute;
    top: 0;
    left: -9999px;
    right: auto;
    white-space: nowrap;
    padding: 10px 20px
}
.skip-to-link>li>a:focus {
    left: 0;
    position: absolute;
    top: 0;
}
.skip-to-link>li.nav-item {

}
.blog-item{
    padding: 1.5em !important;
    box-shadow: 0px 10px 30px rgba(61, 90, 125, 0.20);
}

.com-content-category-blog__child h3{
    padding: 1em !important;
    box-shadow: 0px 10px 30px rgba(61, 90, 125, 0.20);
}

/* 03-04-25 MVL fixed heading sequence for child category links in an component override, this applys the heading styling from h3 tp h2 and adds bottom margin for shadow spacing*/
.com-content-category-blog__child h2{
    font-size: calc(1.3rem + .6vw);
    padding: 1em !important;
    margin-bottom: .5em !important;
    box-shadow: 0px 10px 30px rgba(61, 90, 125, 0.20);
}

/* testing side bar navigation layout and design*/
.sidebar-menu>li.nav-item{
  border-bottom: 1px solid var(--cassiopeia-color-primary-thead);
}
.sidebar-menu>li.nav-item:last-child{
  border-bottom: 0px;
}
.sidebar-menu>li{
  padding: 1em 0;
}
/*-- working on sub menus below --*/
.sidebar-menu>li>ul{
  margin-top: 1em;
}
.sidebar-menu>li>ul>li{
  list-style-type: none;
  margin-bottom: 1rem;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOC4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBiYXNlUHJvZmlsZT0idGlueSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQoJIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIG92ZXJmbG93PSJ2aXNpYmxlIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiMwMDcxQkMiIHBvaW50cz0iMjAsMTAgMCwwIDAsMjAgIi8+DQo8L3N2Zz4NCg==) no-repeat left top;
  padding: 0px 0 3px 24px;
  background-size: 20px 20px;
}
.sidebar-menu>li>ul>li:first-child{
    margin-top: 2em;
}
.sidebar-menu>li>ul>li>ul>li{
  list-style-type: none;
  margin-bottom: 1rem;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOC4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBiYXNlUHJvZmlsZT0idGlueSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQoJIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIG92ZXJmbG93PSJ2aXNpYmxlIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiNCM0IzQjMiIHBvaW50cz0iMjAsMTAgMCwwIDAsMjAgIi8+DQo8L3N2Zz4NCg==) no-repeat left top;
  padding: 0px 0 3px 24px;
  background-size: 20px 20px;
}
.sidebar-menu>li>ul>li>ul>li:first-child{
    margin-top: 2em;
}
.sidebar-card-box-shadow{
  padding: 0.5em !important;
  box-shadow: 0px 10px 30px rgba(61, 90, 125, 0.20);
  margin-bottom: 2.5em;
}
.sidebar-menu-header{
  font-size: 1.5rem;
}
/* removed becasue confliected with module headers instead of just nav
.sidebar-card-box-shadow>h3{
  border-bottom: 5px solid var(--red) !important;
}
*/

.card-alt1 {
  padding: 0.5em !important;
  box-shadow: 0px 10px 30px rgba(61, 90, 125, 0.20);
}
.card-header-alt1 {
  border-bottom: 5px solid var(--red) !important;
  font-size: 2em;
  margin-left: var(--card-cap-padding-x);
  padding-left: 0px;
}
.card-alt1>.card-body>.mod-list {
  list-style: disc;
  margin-left: 1em;
}

figure.float-middle {
  text-align: center;
}


/* reponive iframe video */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;/*Equals 16:9 */
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* end of repsonive iframe video */

/* custom buttons */
a.button-blue{
  background-color: #FFFFFF;
  color: #000000;
  border: 2px solid #104E8B;
  font-size: 125%;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  line-height: normal;
}
a.button-blue:hover {
  background-color: #104E8B;
  color: #FFFFFF;
}
a.button-red{
  background-color: #FFFFFF;
  color: #000000;
  border: 2px solid #891010;
  font-size: 125%;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  line-height: normal;
}
a.button-red:hover {
  background-color: #891010;
  color: #FFFFFF;
}
a.button-inverse-blue{
  background-color: #104E8B;
  color: #FFFFFF !important;
  border: 2px solid #104E8B;
  font-size: 125%;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  line-height: normal;
}
a.button-inverse-blue:hover {
  background-color: #FFFFFF;
  color: #000000 !important;
}
a.button-inverse-red{
  background-color: #891010;
  color: #FFFFFF !important;
  border: 2px solid #891010;
  font-size: 125%;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  line-height: normal;
}
a.button-inverse-red:hover {
  background-color: #FFFFFF;
  color: #000000 !important;
}
@media (max-width: 991.98px) {
  a.button-blue{
    text-align:center;
  }
  a.button-red{
    text-align:center;
  }
  a.button-inverse-blue{
    text-align:center;
  }
  a.button-inverse-red{
    text-align:center;
  }
}
/* end of custom buttons

/*
beginning of schedday table
Caption dark blue bar with white text
thead with light blue with black text
th row with bold text
starting from row 2 striped background
no wrap text
*/

table.schedday th {
  font-weight: bolder;
  text-align: left;
  padding: 0.75rem;
  color:#000;
  background: transparent;
}
table.schedday thead tr th {
  font-size: 2em !important;
}
table.schedday td {
  font-weight: bold;
  text-align: left;
  padding: 0.75rem;
  background: transparent;
}
table.schedday {
  border-collapse: collapse;
  width: 100%;
  caption-side: top;
  border: 1px solid;
}

/* set color for striped table rows and first table row color to blue with black text */
table.schedday tr:nth-child(even) {
  background-color: #DFE3E8;
}
table.schedday tr:nth-child(odd) {
  background-color: #FAFAFA;
}
table.schedday thead tr:nth-child(1) {
  background-color: #56C2E6;
}

/* set ratio for columns*/
table.schedday tr th:nth-child(1) {
  width:5%;
  border-right: 1px solid;
}
table.schedday tr th:nth-child(2) {
  width:95%;
}

/* Changes wrapping for words and text for columns*/
table.schedday tr th:nth-child(1) {
  white-space: nowrap;
  text-align: right;
  font-size: 1.2em;
}
table.schedday tr td:nth-child(2) {
  white-space: break-spaces;
}

table.schedday caption {
  text-align: left;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #004971;
  padding: 15px;
}

.schedam {
  white-space: nowrap;
  font-size: 1em;
  color: #6B3E00;
}
.schedpm {
  white-space: nowrap;
  font-size: 1em;
  color: #00047A;
}
/* ending of schedday table */


/*team stylize code */
.heading.heading-icon {
    display: block;
}
.padding-lg {
	display: block;
	padding-top: 60px;
	padding-bottom: 60px;
}
.practice-area.padding-lg {
    padding-bottom: 55px;
    padding-top: 55px;
}
.practice-area .inner{
     border:1px solid #999999;
	 text-align:center;
	 margin-bottom:28px;
	 padding:40px 25px;
}
.our-team .cnt-block:hover {
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    border: 0;
}
.practice-area .inner h3{
    color:#3c3c3c;
	font-size:24px;
	font-weight:500;
	font-family: 'Poppins', sans-serif;
	padding: 10px 0;
}
.practice-area .inner p{
  font-size:14px;
	line-height:22px;
	font-weight:400;
}
.practice-area .inner img{
	display:inline-block;
}
.our-team .cnt-block{
   float:left;
   width:100%;
   background:#fff;
   padding:30px 10px;
   text-align:center;
   border:2px solid #d5d5d5;
   margin: 0 0 28px;
}
.our-team .cnt-block figure{
   width:148px;
   height:148px;
   border-radius:100%;
   display:inline-block;
   margin-bottom: 15px;
}
.our-team .cnt-block img{
   width:148px;
   height:148px;
   border-radius:100%;
}
.our-team .cnt-block h3{
   color:#2a2a2a;
   font-size:20px;
   font-weight:500;
   padding:6px 0;
   text-transform:uppercase;
}
.our-team .cnt-block h3 a{
  text-decoration:none;
	color:#2a2a2a;
}
.our-team .cnt-block h3 a:hover{
	color:#337ab7;
}
.our-team .cnt-block p{
   color:#2a2a2a;
   font-size:13px;
   line-height:20px;
   font-weight:400;
}
.ourteam-block {
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .ourteam-block {
    padding-left: 0px;
    padding-right: 0px;
  }
  .our-team .sup-block p{
     text-align: center;
  }
}
/*end team stylize code */

/* team styling for superintendent*/
.our-team .sup-block:hover {
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    border: 0;
}
.our-team .sup-block{
   float:left;
   width:100%;
   background:#fff;
   padding:30px 15px;
   text-align:center;
   border:2px solid #d5d5d5;
   margin: 0 0 28px;
}
.our-team .sup-block figure{
   width:148px;
   height:148px;
   border-radius:100%;
   display:inline-block;
   margin-bottom: 15px;
}
.our-team .sup-block img{
   width:285px;
   height:285px;
   border-radius:100%;
}
.our-team .sup-block h3{
   color:#2a2a2a;
   font-size:30px;
   font-weight:700;
   padding:20px 0;
   /*text-transform:uppercase;*/
}
.our-team .sup-block h3 a{
  text-decoration:none;
	color:#2a2a2a;
}
.our-team .sup-block h3 a:hover{
	color:#337ab7;
}
.our-team .sup-block p{
   color:#2a2a2a;
   font-size:18px;
   font-weight:400;
   text-align: justify;
   line-height: normal;
}
/*end team styling for superintendent*/




/*start of youtube flex card */

.module-card-wrap {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}
.module-card {
  background: #fff;
  border: 1px solid #f1f1f1;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
  min-width: 100%;
  padding: 10px;
  margin-bottom: 5%;
  display: flex;
  flex-direction: column;
}
.module-card-title {
  font-size: 120%;
  font-weight: 700;
}
.module-card-meta {
  display: flex;
}
.module-card-category, .module-card-author {
  flex: 1;
}
.module-card-author {
  text-align: right;
}
.module-card-bottom {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* a flex: 1 also works here, but is buggy on IE11 */
}
.module-card-img {
  margin: 0 0;
  align-self: center;
  width: 100%;
  height: auto;
}
.module-card-button {
  background: seagreen;
  color: white;
  border: none;
  margin-top: auto;
  padding: 10px;
}
.imgThumbContainer {
    float:left;
    position:relative;
}
.imgThumbContainer:hover .play{
  display:block;
}
.imgThumbContainer:hover .overlay{
  display:block;
  background: rgba(20, 50, 100, .7);
}
.play{
  position : absolute;
  display:none;
  top:50%;
  width:200px;
  margin:0 auto;
  left:0px;
  right:0px;
  z-index:100;
  text-align: center;
}
.play a{
  color: var(--cassiopeia-color-link-topc);
}
.play a:hover{
  color: var(--cassiopeia-color-link);;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}
@media screen and (min-width: 600px) {
  .module-card {
    width: 24%;
    margin: 0 auto 2%;
    min-width: 0;
  }
}

/*css play button*/
@import "compass/css3";

/* Spin animation*/
@keyframes spin {
  to { transform: rotate(360deg); }
}

.play-stroke-solid {
  stroke-dashoffset: 0;
  stroke-dashArray: 300;
  stroke-width: 10px;
  transition: stroke-dashoffset 1s ease, opacity 1s ease;
  transform: scale(0.7);
  transform-origin: 50% 50%;
}
.play-icon {
  transform: scale(0.8);
  transform-origin: 50% 50%;
  transition: transform 200ms ease-out;
}

/* Hover*/
#play-icon-id .stroke-solid:hover {
    opacity: 1;
    stroke-dashoffset: 300;
}
#play-icon-id .icon:hover {
    transform: scale(0.9);
}

#play-icon-id {
  cursor: pointer;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
/*css end of play button*/

/* styling for youtube link at bottom of module*/
.YouTube-Link-Style{
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  width: -webkit-fill-available;
  text-align: center;
}
/* end for styling of youtube link at bottom of module*/

/*end of youtube flexbox card */



.container-no-padding{
  padding:25px 0 25px 0 !important;
}

/* switches hero slideshow from mobile to desktop depending on width of browser */

#content-desktop {display: block;}
#content-mobile {display: none;}

@media screen and (max-width: 539px) {

  #content-desktop {display: none;}
  #content-mobile {display: block;}

}
/* end of heading switching content for header hero slideshow for mobile and desktop */


/* stretch website header width */
.container-banner img {
  width: -webkit-fill-available;
  width: 100%; /*fix for firefox broswers*/
}

/* next section Add icon for links */
a[href$=".pdf"]:before,a[href$=".zip"]:before,a[href$=".doc"]:before,a[href$=".docx"]:before,a[href$=".xls"]:before,a[href$=".xlsx"]:before,a[href$=".xlsm"]:before,a[href$=".ppt"]:before,a[href$=".pptx"]:before {
    content: "";
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    margin-right: 5px;
}
a[href^="tel:"]:before,a[href*='google.com/document']:before,a[href*='google.com/form']:before,a[href*='forms.gle']:before,a[href*='.gov']:before,a[href*="google.com/presentation"]:before/*,a[href*="drive.google.com"]:before*/ {
  content: "";
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  margin-right: 5px;
}
a[href^="mailto:"]:after {
  content: "";
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  margin-left: 5px;
}

a[href$=".pdf"]:before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f1c1' !important;
  margin-right: 5px !important;
  margin-left: 0px !important;
}

a[href$=".zip"]:before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f1c6' !important;
}

a[href$=".doc"]:before,a[href$=".docx"]:before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f1c2' !important;
}

a[href$=".xls"]:before,a[href$=".xlsx"]:before,a[href$=".xlsm"]:before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f1c3' !important;
}

a[href$=".ppt"]:before,a[href$=".pptx"]:before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f1c4' !important;
}

a[href^="mailto:"]:after {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f658';
}

a[href^="tel:"]:before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f095';
  transform: rotateY(180deg);
}

a[href*="google.com/document"]:before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f15c';
}

a[href*="google.com/form"]:before,a[href*="forms.gle"]:before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f570';
}


a[href*="google.com/presentation"]:before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f15b';
}
/*
a[href*="drive.google.com"]:before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f3aa';
}
*/
a[href*='.gov']:before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f66f';
  margin-right: 2px;
  margin-left: -2px;
}

a[href*='.edu']:before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f19c';
  margin-right: 2px;
  margin-left: -2px;
}

a[href^="http"]:not(a[href*="lawrence.k12.ma.us"],a[href*="lps-alph.org"]):after {
  content: "";
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  margin-left: 5px;
}
a[href^=http]:not(a[href*="lawrence.k12.ma.us"],a[href*="lps-alph.org"]):after {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f35d';
}
a[href^="http"]:not(a[href*="lawrence.k12.ma.us"],a[href*="lps-alpha.org"],a[href*="lawrence.incidentiq.com"],a[href*='.gov'],a[href*='.edu'],a[href*="google.com/form"],a[href*="forms.gle"],a[href*="google.com/document"],a[href*="google.com/presentation"]/*,a[href*="drive.google.com"]*/):before {
  /*content: "";*/
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  margin-right: 5px;
}
li a[href^="http"]:not(a[href*="lawrence.k12.ma.us"],a[href*="lps-alpha.org"],a[href*="lawrence.incidentiq.com"],a[href*='.gov'],a[href*='.edu'],a[href*="google.com/form"],a[href*="forms.gle"],a[href*="google.com/document"],a[href*="google.com/presentation"]/*,a[href*="drive.google.com"]*/):before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f0ac';
  margin-left: -2px;
  margin-right: 4px;
}

.metismenu.mod-menu .metismenu-item ul li a[href^="http"]:not(a[href*="lawrence.k12.ma.us"],a[href*="lps-alpha.org"],a[href*="lawrence.incidentiq.com"],a[href*='.gov'],a[href*='.edu'],a[href*="google.com/form"],a[href*="forms.gle"],a[href*="google.com/document"],a[href*="google.com/presentation"]):before {
  content: '';
  margin-left: -4px;
}
.mod-list li a[href^="http"]:not(a[href*="lawrence.k12.ma.us"],a[href*="lps-alpha.org"],a[href*="lawrence.incidentiq.com"],a[href*='.gov'],a[href*='.edu'],a[href*="google.com/form"],a[href*="forms.gle"],a[href*="google.com/document"],a[href*="google.com/presentation"]):before {
  content: '';
}

.infofooterbody a[href^="http"]:not(a[href*="lawrence.k12.ma.us"],a[href*="lps-alpha.org"],a[href*="lawrence.incidentiq.com"],a[href*='.gov'],a[href*='.edu'],a[href*="google.com/form"],a[href*="forms.gle"],a[href*="google.com/document"]):before {
  content: '';
}
.infofooterbody a[href^="http"]:not(a[href*="lawrence.k12.ma.us"],a[href*="lps-alpha.org"],a[href*='.gov'],a[href*='.edu'],a[href*="google.com/form"],a[href*="forms.gle"],a[href*="google.com/document"]):after {
  content: '';
  margin-left: 0px;
}

a.icon-except-all:before, a.icon-except-all:after{
  content: '' !important;
}

a.icon-except-before:before {
  content: '' !important;
}

a.icon-except-after:after{
  content: '' !important;
}

/* quick fixes for profile for superintendent search finalists*/
.align-center{
  text-align: center !important;
}

.padding-15{
  padding: 15px !important;
}

.margin-bottom-50{
  margin-bottom: 50px;
}

.sup-youtube-links {
  line-height: 2;
}

/* end quick fixes for profile for superintendent search finalists*/


/* fix change form drop down text to black */
.form-select optgroup,.custom-select optgroup,.form-select option,.custom-select option{
  color: #000;
}
/* end fix change form drop down text to black */


/* slider carousel play pause button */

#carouselForMobileAndDesktop{
  background: url("images/backgroundimage.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}

#carouselButtons {
    margin-left: 100px;
    position: absolute;
    top: 5px;
    right: 25px;
    /* bottom: 0px; reposition to top right */
    z-index: 3;
}
#playButton {
    color: rgba(255,255,255, 1);
    background-color: rgba(29,63,100, 1);
}
#playButton:hover{
    /*color: rgba(241,179,179, 1);*/
    background-color: rgba(173, 0, 0, 1);
}
#pauseButton {
    color: rgba(255,255,255, 1);
    background-color: rgba(39,63,100, 1);
}
#pauseButton:hover{
  /*color: rgba(241,179,179, 1);*/
  background-color: rgba(173, 0, 0, 1);
}

#prevButton{
  color: rgba(255,255,255, 1);
  background-color: rgba(39,63,100, 1);
  padding: 10px;
  padding-top: 12px;
  display: inline-block;
  border-radius: 5px;
}

#prevButton:hover{
  /*background-color: rgba(39,63,100, 1);*/
  background-color: rgba(173, 0, 0, 1);
}

#nextButton{
  color: rgba(255,255,255, 1);
  background-color: rgba(39,63,100, 1);
  padding: 10px;
  padding-top: 12px;
  display: inline-block;
  border-radius: 5px;
}

#nextButton:hover{
  /*background-color: rgba(39,63,100, 1);*/
  background-color: rgba(173, 0, 0, 1);
}


.carousel-control-prev,.carousel-control-next{
  opacity: 1;
}

.carousel-control-prev:hover,.carousel-control-prev:focus,.carousel-control-next:hover,.carousel-control-next:focus {
  opacity: 1;
}

.carousel-indicators [data-bs-target] {
  box-sizing: unset;
  background-clip: unset;
  text-indent: unset;
  color: #ffffff;
  background-color: #273f64; /* rgba(39,63,100, 1); */
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 10px;
  padding-right: 10px;
  height: auto;
  width: auto;
  border: 0px;
  opacity: 1;
  border-radius: 2px;
}

.carousel-indicators .active{
  background-color: rgba(173, 0, 0, 1);
}

.carousel-indicators [data-bs-target]:hover{
  background-color: rgba(173, 0, 0, 1);
}


/* end of carousel play pause button */

/* change image caption text color to be AAA accessible */
.figcaption {
  	color: #53595F;
}

/* end of image caption change */

/* 03-04-25 MVL container-sidebar-left overriding bottom spacing to add bigger buffer for mobile and desktop, original was 1em*/

.container-sidebar-left .sidebar-left:last-child {
    margin-bottom: 2em;
}


/* 03-04-25 MVL pushes 1em bottom margin for blog heading 1 */
.blog h1 {
  margin-bottom: 1rem;
}

/* responive code below changes the page title of header 1 to be center on any devices viewing it at 912px and below */
@media (max-width: 912px) {
  .page-header h1{
    text-align: center;
  }
}



.container-top-a {
  flex-wrap: wrap;
}
.topa-title {
  min-width: 100%;
  text-align: center;
  margin-bottom: 2em;
}
.topa-icon {
  flex-grow: 1;
}
.topa-links {
  flex-grow: 2;
}

.carouselBTN {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(39,63,100, 1);
  border: none;
  padding: 5px 10px;
  margin: 5px;
  border-radius: 3px;
}
.carouselBTN:active {
  background-color: rgba(173, 0, 0, 1);
}
.carouselBTN:hover {
  background-color: rgba(173, 0, 0, 1);
}

.carousel-indicators [data-bs-target] {
  opacity: 1;
}

/* MVL 03-26-25 changing offcavas close meny button to white for color contrast */
.btn-close {
  --btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl%280, 0%, 100%%29'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  --btn-close-opacity: 1;
}

/* MVL 04-22-25 adding code below for strategic plan page */
.strategicplanshadowbox {
  box-shadow: 0px 5px 10px rgba(61, 90, 125, 0.20);
  padding: 25px 10px 20px 10px !important;
  margin-bottom: 40px
}

.strategicplaninput {
  padding: 25px 0 25px 0px !important;
  text-align: center;
}

.strategicplaninput a {
  color: #570000;
  /*text-decoration: none; changed this to be underline below to improve accessiblity for link */
  text-decoration: underline;
  &:hover {
    color: #072646 !important; /* added important on 05-31-24 */
    text-decoration: underline;
  }
  &:visited {
    color: #570000;
    text-decoration: underline;
  }
}

.strategicplaninput .button-red {
  color: #570000;
  /*text-decoration: none; changed this to be underline below to improve accessiblity for link */
  text-decoration: underline;
  &:hover {
    color: #ffffff !important; /* white on 04-24-25 */
    text-decoration: underline;
  }
  &:visited {
    color: #570000;
    text-decoration: underline;
  }
}

.strategicplancontainer-row {
  display:flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
  padding: 10px 0 25px 0px !important;
  flex-direction: row;
  flex-wrap: wrap;
}

.strategicplanitem-row {
  /* background: #C7E3FF; */
  flex-grow: 1;
  min-width: 40px;
  width: 30%;
  box-shadow: 0px 5px 10px rgba(61, 90, 125, 0.20);
  text-align: center;
  padding: 30px 20px 10px 20px;
  word-wrap: normal;
}


.strategicplanitem-row img{
  width: auto;
  height: auto;
  max-height: 200px;
  max-width: 150px;
}

.strategicplancontainer-col {
  display:flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
  padding: 10px 0 25px 0px !important;
  flex-direction: row;
  flex-wrap: wrap;
}

.strategicplanitem-col-icon {
  flex-grow: 0;
  box-shadow: 0px 5px 10px rgba(61, 90, 125, 0.20);
  text-align: center;
  padding: 10px 20px 10px 20px;
}

.strategicplanitem-col-icon img {
  min-width: 140px;
  width: 140px;
  height: auto;
}

.strategicplanitem-col {
  /* background: #C7E3FF; */
  flex-grow: 1;
  box-shadow: 0px 5px 10px rgba(61, 90, 125, 0.20);
  text-align: left;
  padding: 30px 20px 10px 20px;
  flex: 2 0;
  word-wrap: normal;
}

/* strategic plan part for items and title */
.strategicplanitemprocess-row {
  /* background: #C7E3FF; */
  flex-grow: 1;
  min-width: 40px;
  width: 30%;
  box-shadow: 0px 5px 10px rgba(61, 90, 125, 0.20);
  text-align: left;
  padding: 10px 20px 10px 20px;
}

.flexbreakline {
  flex-basis: 100%;
  height: 0;
}

.strategicplancontainertitle-col {
  display:flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 0px;
  padding: 10px 0 25px 0px !important;
  flex-direction: row;
  flex-wrap: wrap;
}

.strategicplanitemtitle-col-icon {
  flex-grow: 1;
  max-width: 150px;
  /* box-shadow: 0px 5px 10px rgba(61, 90, 125, 0.20); */
  text-align: center;
  /* padding: 15px 20px 10px 20px; */
}

.strategicplanitemtitle-col-icon img {
  max-width: 100px;
}

.strategicplanitemtitle-col {
  /* background: #C7E3FF; */
  flex-grow: 1;
  /* width: 70%; */
  /* box-shadow: 0px 5px 10px rgba(61, 90, 125, 0.20); */
  text-align: left;
  min-width: 145px;
  padding: 10px 20px 10px 0;
  flex: 2 0;
  word-wrap: normal;
}


/* strategic plan intro */
.customstrategicplanintro {
  z-index: 100;
  background-color: #004d80;
  padding: 30px 30px;
  color: #ffffff;
  position: relative;
  top: -3vw;
  margin-bottom: -4vw;
}
.customstrategicplanintro h2 {
  color:#b2dfee;
  font-size: 1.9em;
}

/*added 05-31-24 */
.customstrategicplanintro a {
  color: #FFC2C7;
  /*text-decoration: none; changed this to be underline below to improve accessiblity for link */
  text-decoration: underline;
  &:hover {
    color: #d2edff !important;
    text-decoration: underline;
  }
  &:visited {
    color: #FFC2C7;
    text-decoration: underline;
  }
}

/*Header alignment for strategic plan */
.strategicplan-header {
  height: 20vw;
  --card-spacer-y: 0rem;
  --card-spacer-x: 0rem;
}
.strategicplan-header .mod-custom{
  background-size: 160%;
  background-position: 52.5% 2%;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* responsive display for strategic plan */
@media (max-width: 1550px) {
  .strategicplan-header {
    height:30vw;
  }
}
/*
@media (max-width: 1400px) {
  .strategicplanitem-col-icon {
    width: 12%;
  }
  .strategicplanitem-col {
    width: 83%;
  }
}
*/
@media (max-width: 1200px) {
  .strategicplan-header {
    height:30vw;
  }
  .customstrategicplanintro {
    top: -9vw;
    margin-bottom: -10vw;
  }
  /*
  .strategicplanitem-col-icon {
    width: 12%;
  }
  .strategicplanitem-col {
    width: 83%;
  }
  */
}

@media (max-width: 650px) {
  /* moble for strategic plan row */
  .strategicplancontainer-row {
    flex-direction: column;
  }
  .strategicplanitem-row {
    width: 100%;
  }
  .strategicplanitem-row img{
    width: 50vw;
    height: auto;
  }

  /* mobile for strategic plan col */
  .strategicplancontainer-col {
    flex-direction: column;
  }
  .strategicplanitem-col-icon {
    width: 100%;
  }
  .strategicplanitem-col {
    width: 100%;
  }

  /* strategic plan col title */
  .strategicplanitemtitle-col-icon img{
    width: auto;
    height: auto;
    max-width: 150px;
    max-width: 150px;
  }

  /* mobile for strategic plan process*/
  .strategicplanitemprocess-row {
    width: 100%;
  }
}


.container-header .mod-menu>li.active:after, .container-header .mod-menu>li:hover:after {
  background: none; /* MVL 04-28-25 Causes issues with hidden menu on mouseover or hover */
}

.breadcrumb-item.active, .breadcrumb-item::before {
  color: var(--cassiopeia-color-text); /* breadcrumb issues for color font*/
}


/* below is code for color blocks MVL 04-58-25 */
.purple-dark-background {
  background-color: #64174b;
  color: #ffffff;
}
.green-dark-background {
  background-color: #1c6417;
  color: #ffffff;
}
.blue-dark-background {
  background-color: #173a65;
  color: #ffffff;
}
.orange-dark-background {
  background-color: #804a00;
  color: #ffffff;
}
.orange-dark-background :is( h1, h2, h3, h4, h5), .blue-dark-background :is( h1, h2, h3, h4, h5), .green-dark-background :is( h1, h2, h3, h4, h5), .purple-dark-background :is( h1, h2, h3, h4, h5) {
  color: #ffffff;
}

.purple-light-background {
  background-color: #ebacec;
  color: #000000;
}
.green-light-background {
  background-color: #c2ecac;
  color: #000000;
}
.blue-light-background {
  background-color: #acd9ec;
  color: #000000;
}
.orange-light-background {
  background-color: #ffc16b;
  color: #000000;
}
.orange-light-background :is( h1, h2, h3, h4, h5), .blue-light-background :is( h1, h2, h3, h4, h5), .green-light-background :is( h1, h2, h3, h4, h5), .purple-light-background :is( h1, h2, h3, h4, h5) {
  color: #000000;
}
/* end code for generic blocks */


/* tables for data*/
.table-borders, .table-borders th, .table-borders td{
  border: 1px solid black;
}
@media (max-width: 768px) {
    a {
      word-break: normal;
      overflow-wrap: break-word;
    }
}

/* 06-17-25 MVL add spacing for bullet points for superintendent messages*/
.com-content-article__body ul.superintendent-message > li {
  margin: 20px 0;
}

/* form fields color change update on new version. forcing it back to default for form select */
.form-select {
  color: var(--cassiopeia-color-text--)
}


.container-nav .mod-menu > li.active > a::after, /* get rid of stupid underline */
.container-nav .mod-menu > li.active > button::before,
.container-nav .mod-menu > li > a:hover::after,
.container-nav .mod-menu > li > button:hover::before {
background: none;
}