:root {
/* website colors */
    --primary-color: #59a2f3;
    --secondary-color: #003e82;
    --darkest-color: #171717;
    --lightest-color: #ffffff;
    --body-font-color: #000000;
    --background-highlight-color-03: rgb(98,0,0,.03);


/*    --accent-color-1: #00b3b2;
    --accent-color-2: rgb(from var(--secondary-color) r g b /.1);
    --dropdown-accent-color: #dce2ff;
    --link-color:var(--secondary-color);
    --link-hover-color: var(--primary-color);
    --menu-hover-color: #f57923;
    --body-background-color: #e5e5e5;
    --body-font-accent-color:#666666;
    --dk-gray: #444444;
    --background-highlight-color-03: rgb(98,0,0,.03);
    --background-highlight-color-05: rgb(98,0,0,.05);
    --background-highlight-color-07: rgb(98,0,0,.07);
    --background-highlight-color-10: rgb(98,0,0,.1);
    --background-highlight-color-20: rgb(98,0,0,.2);
    --background-highlight-color-50: rgb(0,0,0,.5);
    --background-highlight-color-70: rgb(0,0,0,.8);
  	--button-color: #ffffff;
  	--button-hover-color: #e5e5e5;
    --padding-margin: 5px;
    --map-width: 800px;
    --map-height: 450px;
    --highlight-plan-number: 4;
*/
}

/*------------------------ Begin Master Page Layout ------------------------*/

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

.btn-primary {
  border-radius: 0px;
  border-color: var(--primary-color);    
  color: var(--lightest-color);
  background: var(--primary-color);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-within,
.btn-primary:active {
  border-color: var(--secondary-color);    
  color: var(--lightest-color);
  background: var(--secondary-color);
}


.page-with-logo {
  min-height: 70dvh;
  #sp-title {
    padding: 120px 8svw 0px 8svw;
  }
  #sp-main-body {
    padding: 0px 8svw 50px 8svw;
  }
  .sppb-btn-primary,
  .btn-primary {
    padding: 15px 25px;
    border-radius: 0px;
    border: none;
    font-size: var(--fluid-type);
    color: var(--lightest-color);
    background: var(--primary-color);
    scale: 105%;
    box-shadow: 5px 5px 10px 0px var(--secondary-color) !important;
  }
  .sppb-btn-primary:hover,
  .sppb-btn-primary:focus,
  .sppb-btn-primary:focus-within,
  .sppb-btn-primary:active,
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:focus-within,
  .btn-primary:active {
    border: none;    
    color: var(--lightest-color);
    background: color-mix(in oklab, var(--primary-color) 90%, var(--secondary-color) 10%);
    scale: 100%;
    box-shadow: none!important;
  }

  .sppb-btn-secondary,
  .btn-secondary:not(.input-password-toggle) {
    padding: 15px 25px;
    border-radius: 0px;
    border: none;
    font-size: var(--fluid-type);
    color: var(--lightest-color);
    background: var(--secondary-color);
    scale: 105%;
    box-shadow: 5px 5px 10px 0px var(--secondary-color) !important;
  }
  .sppb-btn-secondary:hover,
  .sppb-btn-secondary:focus,
  .sppb-btn-secondary:focus-within,
  .sppb-btn-secondary:active,
  .btn-secondary:hover,
  .btn-secondary:focus,
  .btn-secondary:focus-within,
  .btn-secondary:active {
    border: none;    
    color: var(--lightest-color);
    background: color-mix(in oklab, var(--secondary-color) 90%, var(--primary-color) 10%);
    scale: 100%;
    box-shadow: none!important;
  }

  .form-control {
    border-radius: 0px;
  }
  
  .login .list-group > a {
    display: none; visibility: hidden;
  }

  .osm-container {
    max-width: 50dvw;
    margin: 0 auto;
  }

  .osm-container .form-group.form-row {
    max-width: 60%;
    margin: 0 auto 10px auto;
  }

  @media (width < 1199px) {
    .osm-container {
      max-width: 90dvw;
      margin: 0 auto 10px auto;
    }
    .osm-container .form-group.form-row {
      max-width: 90%;
      margin: 0 auto;
    }
  }
  .form-actions {
    margin-top: 20px;
  }
}


.aanr-election-page #sp-main-body {
  min-height: 70dvh;
  padding: 120px 6svw 50px 6svw;

  * {
    border-radius: 0px;
  }

  .card-body {
    padding: 5px;
  }

  h3.card-title,
  h3.card-title > a {
    margin-bottom: 0px;
    font-size: calc(var(--fluid-type) * 1.2);
  }
  
  .rounded-pill {
    display: none;
  }

  .mb-2 {
    margin-bottom: 0px!important;
  }

  .candidate-description {
    font-style: italic;
    font-size: calc(var(--fluid-type) * .8);
  }

  #jb-template {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    width: 100%;
  }

  .mb-4 {
    margin-bottom: 0px !important;
    flex: 0 0 calc(25% - 12px);
  }

  .card-img {
    max-width: 50%;
    margin-inline: auto;
  }

  .card-img-top {
    width: 20%;
    max-width: 200px;
    margin-inline: auto;
    height: auto!important;
    padding-top: 10px;
  }

   .row-cols-lg-3 > * {
      flex: 0 0 calc(50% - 1px);
      width: 100%;
      margin: 5px 0;
    }

  .h-100,
  .sticky-bottom {
    width: 100%;
  }

  @media (width < 1199px) {
    padding: 80px 5svw 40px 5svw;
    .mb-4 {
      margin-bottom: 0px !important;
      flex: 0 0 calc(50% - 12px);
    }
    .card-img {
      max-width: 35%;
      margin-inline: auto;
    }
    .card-img-top {
      max-width: 25%;
    }

  }
    
  @media (width < 768px) {
    padding: 80px 3svw 30px 3svw;
    .mb-4 {
      margin-bottom: 0px !important;
      flex: 0 0 100%;
    }
    .card-img {
      max-width: 25%;
      margin-inline: auto;
    }
    .card-img-top {
      max-width: 20%;
    }

  }

  @media (width < 992px) {
    .row-cols-lg-3 > * {
      flex: 0 0 100%;
      width: 100%;
    }

  }

  .col-md-3 {
    width: 100%;
  }

  .col-md-9 {
    width: 100%;
  }

  .alert-info {
    color: var(--body-font-color);
    background: rgb(from var(--body-font-color) r g b / .05);
    border-color: var(--body-font-color);
    width: 100%;
}
  
  .alert-success {
    background: transparent;
    color: var(--body-font-color);
    border: none;
    padding: 0px;
  }

  .alert-success div:first-child {
    display: none;
  }

  .card-footer:not(.mt-auto),
  .table-responsive,
  div.candidate_list_tabs_no_list_tabs {
    display: none;
  }
}

/*
.com-osmembership #sp-main-body {
  padding: 100px 8svw 50px 8svw;
}
*/

@media (width < 768px) {
  .com-osmembership #sp-main-body {
    padding: 0px 3dvw;
    background: var(--background-highlight-color-03);
    min-height: 50svh;
  }
}

@media (width < 768px) {
  .arizota-calendar #sp-main-body {
    padding: 100px 3svw 50px 3svw;
  }
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

input, text-area, button, select {
  font: inherit;
}

html {
  color-scheme: dark light;
  color: var(--body-font-color);
  scrollbar-gutter: stable;
}

body,
.sppb-addon-table-main td {
  min-block-size: 80svh;
  color: var(--body-font-color);
  font-weight: 400;
}


/* This has been added to test the variable font scaling from Syntax */
body, h1, h2, h3, h4, h5, h6, p, a, li, .fluid, textarea, input, select, th, td,
.sppb-btn, .sppb-btn-custom, btn-success, btn-danger,
.sppb-addon-button-group .sppb-btn-custom,
#oscampus.osc-container, #oscampus.osc-container .page-header {
	--fl: 0;
	--font-size-min: 14;
	--font-size-max: 22;
	--font-ratio-min: 1.125;
	--font-ratio-max: 1.125;
	--font-width-min: 320;
	--font-width-max: 1500;
	--fluid-min: calc(var(--font-size-min) * pow(var(--font-ratio-min), var(--fl, 0)));
	--fluid-max: calc(var(--font-size-max) * pow(var(--font-ratio-max), var(--fl, 0)));
	--fluid-preferred: calc((var(--fluid-max) - var(--fluid-min)) / (var(--font-width-max) - var(--font-width-min)));
	--fluid-type: clamp(
		(var(--fluid-min) / 16) * 1rem,
		((var(--fluid-min) / 16) * 1rem) -
			(((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
			(var(--fluid-preferred) * var(--variable-unit, 100vi)),
		(var(--fluid-max) / 16) * 1rem
	);
	font-size: var(--fluid-type);
    font-family: system-ui, san-serif;
}

/* This makes containers, with container queries use a cqi unit instead of vi */
.fluid-text-container {
	container-type: inline-size;
  --variable-unit: 100cqi;
}

.hero-section-header h1 {
  --fl: 8;
  font-weight: 600;
}

h2, .h2 {--fl: 5;}

h3, .h3 {--fl: 3;}

h4, .h4 {--fl: 2;}

h5, .h5 {--fl: 1;}

h6, .h6 {--fl: 0;}

p, li, body, span {--fl: 0; line-height: 1.25;}

.fs-xs{--fl: -1;}

.fs-base{--fl: 0;}

.fs-s{--fl: 1;}

.fs-m{--fl: 2;}

.fs-l{--fl: 3;}

.fs-xl{--fl: 4;}

.fs-xxl{--fl: 5;}

.fs-xxxl{--fl: 6;}
/* This is the end of what has been added to test the variable font scaling from Syntax */

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1;
  text-wrap: balance;
}

b, strong {
  font-weight: 500;
}

p, ul, li {
    margin: 0px 0px var(--padding-margin) 0px;
    font-weight: 300;
}
a,
.sppb-btn-link {
    color: var(--link-color);
    line-height: var(--line-height);
    margin: 0px 0px var(--padding-margin) 0px;
    font-weight: 400;
}
a:hover, a:focus, a:active,
.sppb-btn-link:focus,
.sppb-btn-link:hover {
    color: var(--link-hover-color);
}

.standout-text p {
  font-weight: 500;
  font-size: 110%;
}

h1,h2,h3,h4,h5,h6 {
  line-height: 1;
    margin: var(--padding-margin) 0px;
    padding: 0px;
}

h1,h2,h3 {
  color: var(--secondary-color);
}
h4,h5,h6 {
    color: var(--body-font-color);
}

.white-heading {
  h1,h2,h3,h4,h5,h6 {    
    color: var(--lightest-color);
  }
}

h1 {
    font-weight: 700;
}
h2 {
    font-weight: 600;
}
h3,h4 {
    font-weight: 500;
}
h5,h6 {
    font-weight: 400;
}

/*------------------------- End Master Page Layout -------------------------*/
@media (width > 767px) {
  .break-on-mobile {
    display: none;
  }
}

.com-users-login__image.login-image {
  display: none;
}

.com-sppagebuilder #sp-main-body {
    padding: 80px 0px 0px 0px;
}

@media (width < 768px) {
  .com-sppagebuilder #sp-main-body {
    padding-top: 60px;
  }
}

.registrants-list #sp-main-body, {
  padding: 120px 10% 100px 10%;
  min-height: 80dvh;
}

@media (width < 992px) {
  .registrants-list #sp-main-body {
    padding: 80px 10% 50px 10%;
  }
}

#sp-top-bar {
    background: transparent; 
    padding: 0px;
}
#sp-top-bar .sp-module {
    display: contents;
    margin: 0px;
}

#sp-top-bar .sppb-icons-group-list a,
#sp-top-bar .top-bar-links a {
  margin-bottom: 0px;
  color: rbg(from var(--lightest-color) r g b /.6);
  transition: color 350ms ease-in-out;
}

#sp-top-bar .sppb-icons-group-list a:hover,
#sp-top-bar .sppb-icons-group-list a:focus-within,
#sp-top-bar .top-bar-links a:hover,
#sp-top-bar .top-bar-links a:focus-within {
  color: var(--lightest-color);
}

@media (width > 1199px) {
  #sp-top-bar .top-bar-links a {
    font-size: calc(var(--fluid-type) * .8);
  }
}

#sp-footer1 .sppb-icons-group-list a,
#sp-top-bar .sppb-icons-group-list a {
  padding-inline: 10px;
}

@media (width < 768px) {
  #sp-top-bar .sppb-icons-group-list a {
    padding-inline: 5px;
  }
}

/* settings for header/menu bar */
#sp-header {
  position: absolute;
  top: auto;
  height: 90px;
  width: 100%;
  background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
  box-shadow: 0px 0px 10px rgb(from var(--darkest-color) r g b / .1);
}

#sp-header.header-sticky {
    top: 0px;
}

#sp-header, #sp-header.header-sticky {
    animation: none;
}

#sp-header .logo {
  height: 90px;
  display: inline-flex;
  margin: 0;
  align-items: center;
}

#sp-header .logo img {
  height: 80px;
}

@media (width < 768px) {
  #sp-header .logo img {
    height: 60px;
  }
}
  
.sp-megamenu-parent > li > span,
.sp-megamenu-parent > li > a {
  color: rgb(from var(--lightest-color) r g b / .6);
  font-size: calc(var(--fluid-type) * .9);
  font-weight: 500;
}

.sp-megamenu-parent > li > span:hover,
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active:hover > a {
  color: var(--lightest-color);
}
/* set all pages to a minimum height of 70% */
body {
    min-height: 70vh;
}


/* settings for hero menu bar */
ul.menu.hero-menu-module {
  display: flex;
  list-style: none;
  justify-content: center;

  li.item-101 {
    display: none;
  }

  li.item-148:after,
  li.item-170:after,
  li.item-171:after,
  li.item-182:after,
  li.item-216:after,
  li.item-234:before {
    content: "|";
    padding: 0px 8px;
    color: var(--link-color);
  }
  
  a:hover,
  a:focus,
  a:active {
    color: var(--link-color);
  }
}


/* ----------settings for specific website---------- */
body.ltr .sp-megamenu-parent > li.sp-has-child > a::after,
body.ltr .sp-megamenu-parent > li.sp-has-child > span::after {
  font-family: "Font Awesome 6 Pro";
  content: "";
  float: right;
  margin-left: 5px;
  font-weight: 300;
}
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: var(--dropdown-accent-color);
  box-shadow: 0px 0px 5px 5px rgb(from var(--darkest-color) r g b / .2);
  border: 1px solid var(--primary-color);
}

body.ltr .sp-megamenu-parent .sp-dropdown.sp-dropdown-main.sp-menu-right {
  left: -10px;
  width: max-content!important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge) {
  color: var(--primary-color);
  font-size: calc(var(--fluid-type) * .9);
  font-weight: 500;
  padding-inline: 5px;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:focus-within {
  color: var(--lightest-color);
  background: var(--primary-color);
}

@media (width < 992px) {
  .logo-image-phone {
    height: 80px!important;
  }
}


@media (width < 768px) {
  #sp-header,
  #sp-header .logo,
  .logo-image-phone {
    height: 60px!important;
  }
  #offcanvas-toggler {
    padding-right: 5vw;
  }
}

.burger-icon > span,
.offcanvas-active .burger-icon > span,
#modal-menu-toggler.active .burger-icon > span {
  background-color: var(--lightest-color);
}

.offcanvas-menu {
  background-color: #003597;
}
.offcanvas-menu .offcanvas-inner ul.menu > li a,
.offcanvas-menu .offcanvas-inner ul.menu > li span {
  color: #ffffff;
  font-weight: 500;
}
.offcanvas-menu .offcanvas-inner ul.menu li.active a {
  color: #fff !important;
  font-weight: 700 !important;
  opacity: 1;
}
.offcanvas-menu .offcanvas-inner ul.menu li.active a:before {
  font-family: 'Font Awesome 6 Pro';
  content: "\f356";
  font-weight: 300 !important;
  padding-right: 5px;
}

.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent .menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu > li li a {
  color: rgb(from var(--lightest-color) r g b /.8);
}

.offcanvas-menu .offcanvas-inner ul.menu > li > ul li a {
  font-size: calc(var(--fluid-type) * 1.1);
  line-height: 1.4em;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li .menu-toggler{
    width: 100%;
    text-align: right;
}


.highlight-box-sizing {
  height: auto;
}
 
/* set page paddings and font sizes for different width screens */
@media (min-width:992px) {
    .arizota-subscriptions #sp-main-body {
      padding: 150px 20svw 50px 20svw;
    }
}

@media (max-width:991px) {
  .arizota-subscriptions #sp-main-body {
    padding: 50px 10vw;
  }
}

@media (max-width:767px) {
  .arizota-subscriptions #sp-main-body {
    padding: 50px 3vw;
  }
}

/* Registration Form Page Settings */
.registrationForm_page {
  & #sp-main-body {
      width: 60dvw;
      padding: 100px 0px 50px 0px;
      margin: 0 auto;
      min-height: 80dvh;
    }
  & .osm-container h1 {
     font-weight: 400;
  }
  & input[type="text"]:not(.form-control),
    select:not(.form-select):not(.form-control),
    .form-control,
    .form-select,
    .btn-primary,
    .btn-secondary,
    .input-group-text {
      border-radius: 0px;
      font-size: 1.2rem;
    }
  & .btn-primary {
      border-color: var(--secondary-color);
      background-color: var(--secondary-color);
      border: 1px solid var(--secondary-color);
      padding: 5px 10px;
      color: var(--button-color);
    }
  & .btn-primary:hover {
      border-color: var(--primary-color);
      background-color: var(--primary-color);
    }
  & .btn-secondary {
      background-color: var(--body-font-accent-color);
      border: 1px solid var(--body-font-accent-color);
      padding: 5px 10px;
      color: var(--button-color);
    }
  & .btn-secondary:hover {
      border-color: var(--darkest-color);
      background-color: var(--darkest-color);
      color: var(--button-color);
    }
  & .form-check-input {
    vertical-align: middle;
    margin: 5px 5px 5px 0px;
  }
}

@media (width < 1400px) {
  .registrationForm_page {
  & #sp-main-body {
      width: 90dvw;
    }
  }
}

@media (width < 768px) {
  .registrationForm_page {
  & #sp-main-body {
      width: 90dvw;
      padding: 70px 0px 30px 0px;
      margin: 0 auto;
    }
  }
}

/* Login & Create Account Form  Settings */
.createForm_page,
.loginForm_page {
  & #sp-main-body {
      width: 80svw;
      padding: 100px 0px 50px 0px;
      margin: 0 auto;
      min-height: 80dvh;
    }
  & input[type="text"]:not(.form-control),
    select:not(.form-select):not(.form-control),
    .form-control,
    .form-select,
    .btn-primary,
    .btn-secondary,
    .input-group-text {
      border-radius: 0px;
      font-size: 1rem;
    }
  & .btn-primary {
      border-color: var(--secondary-color);
      background-color: var(--secondary-color);
      border: 1px solid var(--secondary-color);
      padding: 5px 10px;
      color: var(--button-color);
    }
  & .btn-primary:hover {
      border-color: var(--primary-color);
      background-color: var(--primary-color);
    }
  & .btn-secondary {
      background-color: var(--primary-color);
      border: 1px solid var(--primary-color);
      padding: 5px 10px;
      color: var(--button-color);    
  }
  & .btn-secondary:hover {
      border-color: var(--darkest-color);
      background-color: var(--darkest-color);
      color: var(--button-color);
    }
  & .btn-danger,
    .btn-success {
    border-radius: 0px;
  }
  & .page-header h1 {
      font-weight: 300;
      text-align: center;
  }
  & .login-description img {
      display: block;
      max-width: 60%;
      margin: 0px auto 20px auto;
  }
}

@media (width < 992px) {
  .loginForm_page #sp-main-body {
    padding-block: 5dvw;
  }
}


.ceuSubscribers #sp-main-body,
.createForm_page #sp-main-body {
  padding-top: 100px;
}

.ceuSubscribers #sp-main-body {
  width: 100dvw;
  padding-inline: 3dvw;
}  

@media (width < 992px) {
  .createForm_page,
  .loginForm_page {
    & #sp-main-body {
      width: 90svw;
      padding: 0px 0px 50px 0px;
    }
  }
  & .createForm_page #sp-main-body {
    padding-top: 70px;
  }
}

/*<---------- OS Membership Subscription Plan Page Settings ---------->*/
.osm-container h1,
.osm-container h2 {
  margin: 5px 0px 20px 0px;
  text-align: center;
}

.osm-pricing-table-flat h2.osm-plan-title {
  border-bottom: 4px solid var(--menu-hover-color);
}  

.osm-pricing-table-flat .osm-plan {
  border-radius: 0px;
  padding: 0px 0px 20px 0px;
}

.osm-plan .osm-plan-header {
  background-color: var(--primary-color)!important;
  color: var(--lightest-color);
  padding-top: 20px;
}

.osm-pricing-table-flat .osm-plan {
  border-radius: 0px;
  padding: 0px;
  margin: 0px 1svw 20px 1svw;
  background: var(--lightest-color)!important;
  border: 1px solid var(--body-font-accent-color);

  &.osm-plan-4 {
    background: rgb(from var(--primary-color) r g b / .15)!important;
  }
}

.osm-pricing-table-flat .osm-plan-price p,
.osm-pricing-table-flat, .osm-pricing-table-flat * {
  color: var(--menu-hover-color);
}

.osm-pricing-table-flat .osm-plan-price {
  text-align: center;
}

.osm-pricing-table-flat .osm-plan-price p {
  line-height: 1;
}

.osm-pricing-table-circle .btn-signup,
.osm-pricing-table-flat .btn-signup {
  background-color: var(--lightest-color);
  color: var(--darkest-color);
  margin: 10px 0;
  font-size: var(--fluid-type);
  overflow: hidden;
  padding: 12px 24px;
  border-radius: 0px;
  border: 1px solid var(--darkest-color);
}

.osm-plan-4 .osm-plan-price:after {
  content: "Our Best Deal!";
  text-transform: uppercase;
  display: block;
  font-size: 16px;
  line-height: 18px;
  font-weight: 700;
  margin: 0px;
}

#sp-footer,
#sp-bottom {
  background: transparent;
  color: inherit;
}

.footer-osc-logo img {
  opacity: .5;
  filter: grayscale(1);
  transition: all .3s ease;
}
.footer-osc-logo img:hover {
  filter: grayscale(0);
  opacity: 1;
}

.splide__arrow {
  display: none;
}