.primary {
  color: #00ad67;
}

.secondary {
  color: #3986ac;
}

.btn-header .tooltip {
  margin-top: 7px;
}

.btn-header > :first-child > a {
  /* normal anchor pointer */
  cursor: pointer !important;
}


/* ------------------- begin sticky menu ------------------- */

.sticky-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: sticky;
  top: 59px;
  z-index: 952;
  transform: translateX(-10px);
  padding: 10px 10px 5px 10px;
  width: calc(100% + 20px); /* 16px extra on each side */
  margin: 0px 0px 15px 0px; /* Adjust margin to match width change */
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(2) blur(10px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.top-menu-fixed-width {
  margin-bottom: 5px;
  padding-right: 5px;
}

.sticky-menu-container {
  margin: 0px; /* Center the menu */
}

.sticky-submenu {
  position: relative;
  padding: 22px 10px 5px 10px;
  margin: 0px 5px 5px 0px;
  border-radius: 10px;
  background-color: rgba(244, 244, 244, 1);

  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.sticky-submenu.open {
  width: 100%;
}

.sticky-submenu .menu-buttons {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: none;
}

.sticky-submenu .menu-buttons.open {
  display: flex;
}


@media (max-width: 768px) {
  .sticky-menu {
    width: 100%;
    transform: translateX(0px);
  }
}

/* Fixed (sticky) state: glassy, blurred, shadowed */
/* this only works on desktop */
@media (min-width: 1200px) {
  .sticky-submenu {
    position: sticky;
    top: 59px;
    left: 0;
    right: 0;
  }
}

@media screen and (max-width: 1200px) {
  .sticky-submenu {
    width: 100% ;
  }
  /* hide the return to top arrow */
  .top-menu-fixed-width {
    display: none;
  }
  
}

.sticky-menu .menu-button {
  margin: 3px;
  padding: 7px;
  line-height: 8px;

  font-size: 12px;
  font-weight: 700;
  /* text-transform: uppercase; */
  text-decoration: none;
  text-align: center;

  color: #fff;
  background: rgb(0 161 97);
  border: 2px solid rgb(0 161 97);
  border-radius: 3px;

  transition: all 0.1s ease;
}

.sticky-menu .menu-icon {
  margin: 3px;
  padding: 2px;

  width: 26px;
  height: 26px;
  text-align: center;

  color: #fff;
  background: rgb(0 161 97);
  border: 2px solid rgb(0 161 97);
  border-radius: 100%;

  transition: all 0.1s ease;
}

.sticky-menu .menu-icon:hover {
  color: rgb(0 161 97);
  background-color: transparent;
  border: 2px solid rgb(0 161 97);
  border-radius: 100%;
}

.sticky-menu .menu-button:hover {
  color: rgb(0 161 97);
  background-color: transparent;
  border: 2px solid rgb(0 161 97);
  border-radius: 3px;
}

.menu-button.active {
  color: rgb(0 161 97);
  background-color: transparent;
  border: 2px solid rgb(0 161 97);
  border-radius: 3px;
}

.sticky-menu .section-name {
  font-size: 14px;
  font-weight: 700;
  color: rgb(0 161 97);
  position: absolute;
  top: 3px;
}

.top-menu-fixed-width .menu-button {
  padding: 4px;
  display: block;
  border-radius: 100%;
  width: 25px;
  height: 25px;
}

.top-menu-fixed-width .menu-button:hover {
  border-radius: 100%;
}

/* smoothly animate scroll */
html {
  scroll-behavior: smooth;
}

/* a with id */
.news-body a[id]{
  scroll-margin-top: 180px; /* height of your sticky menu + a little extra */
}

/* ------------------- end sticky menu ------------------- */

/* Campus News */
.news-body {
  font-size: 14px;
}

/*  */
.tooltip-inner {
  background-color: white !important;
  color: #3986ac !important;
  /* remove border */
  /* border: none !important; */
  border-color: white !important;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.45) !important;
  /* lessen padding */
  padding: 10px !important;
}

.btn-header .tooltip-inner {
  /* stop wrapping text */
  white-space: nowrap !important;
  word-break: keep-all !important;
}

.tooltip-arrow {
  border-bottom-color: white !important;
}

.jarviswidget-color-secondary > header {
  border-color: #3986ac !important;
  background: #3986ac;
  color: #fff;
}

.jarviswidget-color-secondary .nav-tabs li:not(.active) a,
.jarviswidget-color-secondary > header > .jarviswidget-ctrls a {
  color: #fff !important;
}
.jarviswidget-color-secondary .nav-tabs li a:hover {
  color: #333 !important;
}

.smart-style-5 .jarviswidget-color-secondary > header {
  border-color: rgba(59, 184, 235, 0.43) !important;
  background: rgba(59, 184, 235, 0.43) !important;
  color: #fff;
}

tr.selected {
  border-color: #92d5e0 !important;
  background-color: #92d5e0 !important;
}

.breadicon {
  margin-right: 5px !important;
  margin-left: 5px !important;
}

.well {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15) !important;

  /* background-color: #fbfbfb; */
  border: 0px solid #ddd;
  box-shadow: 0 1px 1px #ececec;
  -webkit-box-shadow: 0 1px 1px #ececec;
  -moz-box-shadow: 0 1px 1px #ececec;
  position: relative;
}

.well-simple {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  padding: 4px;
  border: 0px solid #ddd;
  box-shadow: 0 1px 1px #ececec;
  -webkit-box-shadow: 0 1px 1px #ececec;
  -moz-box-shadow: 0 1px 1px #ececec;
  display: inline-block;
}

.art-height {
  height: 100vh;
  padding: 0px;
  margin: 0px;
}
@media (max-width: 768px) {
  .art-height {
    height: 50vh;
  }
}
.btn-round {
  border-radius: 30px;
}

/* add centered background image with green overlay */
.art-area {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
}

.justify-content-center {
  justify-content: center;
}
.align-items-bottom {
  align-items: flex-end;
}

/* show case well with rounded borders and white blur bg */
.glass-well {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  margin: 20px;
  color: white;
  z-index: 902;
}

.smart-form header {
  border-radius: 10px 10px 0px 0px;
}

.smart-form footer {
  border-radius: 0px 0px 10px 10px;
}

.alert-warning {
  padding: 10px !important;
  margin-bottom: 10px !important;
  border: 0px solid #f9a825 !important;
  border-left-width: 5px !important;
}

.alert .alert-heading {
  font-size: 14px !important;
  margin-bottom: 0px !important;
}

body.smart-style-6 #header {
  background: rgba(0, 173, 103, 0.5); /* Base color with transparency */
  border-bottom: 0px;
}

body.smart-style-6 #header::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  /* use filters hue-rotate saturate brightness to remove some red to achieve rgb(0, 173, 103) */
  filter: brightness(0.7) saturate(3) hue-rotate(1deg);
}

body.smart-style-6 .page-footer {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: rgb(0, 173, 103);
  height: 50px;
  padding: 14px 5px 0;
  border-top: 0px;
  width: 100%;
  position: absolute;
  display: block;
}

#header > div.mainMenuHover:hover {
  color: black !important;
  background-color: rgba(0, 127, 76, 0.5);
}
#header > div.mainMenuHover > span {
  cursor: default !important;
}

.dropdown-menu > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
}

.dropdown-menu > li > a:hover {
  /* color: black; */
  background-color: rgba(0, 127, 76, 0.5) !important;
}
.dropdown-menu {
  background: rgba(0, 173, 103, 0.7);
  margin-top: 0px !important;
  z-index: 1000;
  border: 0px;
  padding-top: 0px;
  padding-bottom: 10px;
  border-radius: 0px 0px 10px 10px;
}

.dropdown-menu::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0px 0px 10px 10px;

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  /* use filters hue-rotate saturate brightness to remove some red to achieve rgb(0, 173, 103) */
  filter: brightness(0.68) saturate(2) hue-rotate(1deg);
}

.hta-loader {
  width: 100%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  position: absolute; /*or fixed*/
  left: 50%;
  top: 50%;
  text-align: center;
}

#left-panel {
  top: 49px;
  bottom: 50px;
  padding-top: 0px;
}

.dt-toolbar-footer {
  padding: 0px 10px;
  border-top: 0px;
}

.jarviswidget .widget-body {
  padding-bottom: 4px;
}

.jarviswidget > div {
  padding: 8px 8px;
}

.profile-pic > img {
  top: 10px !important;
}

/* 
888     888                                        888               888      8888888b.                            888          
888     888                                        888               888      888   Y88b                           888          
888     888                                        888               888      888    888                           888          
888     888 88888b.   .d88b.  888d888 8888b.   .d88888  .d88b.   .d88888      888   d88P 8888b.  88888b.   .d88b.  888 .d8888b  
888     888 888 "88b d88P"88b 888P"      "88b d88" 888 d8P  Y8b d88" 888      8888888P"     "88b 888 "88b d8P  Y8b 888 88K      
888     888 888  888 888  888 888    .d888888 888  888 88888888 888  888      888       .d888888 888  888 88888888 888 "Y8888b. 
Y88b. .d88P 888 d88P Y88b 888 888    888  888 Y88b 888 Y8b.     Y88b 888      888       888  888 888  888 Y8b.     888      X88 
 "Y88888P"  88888P"   "Y88888 888    "Y888888  "Y88888  "Y8888   "Y88888      888       "Y888888 888  888  "Y8888  888  88888P' 
            888           888                                                                                                   
            888      Y8b d88P                                                                                                   
            888       "Y88P"                                                                                                     */

.panel-heading {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
.panel {
  border-radius: 10px;
}

.panel-primary > .panel-heading {
  color: #fff;
  background: rgb(0, 162, 97);
  border-color: rgb(0, 162, 97);
}

.panel-primary {
  border-color: rgb(0, 162, 97);
}

.panel-secondary > .panel-heading {
  color: #fff;
  background: #3986ac;
  border-color: #3986ac;
}

.panel-secondary {
  border-color: #3986ac;
}

/* 
88888b.   .d88b.  888  888  888 .d8888b     
888 "88b d8P  Y8b 888  888  888 88K         
888  888 88888888 888  888  888 "Y8888b.    
888  888 Y8b.     Y88b 888 d88P      X88    
888  888  "Y8888   "Y8888888P"   88888P'    
                                           */

.equal {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 18px;
}

.equal .panel {
  width: 100%;
  height: 100%;
}

.equal .panel-body {
  padding-bottom: 0px;
}

.lg-backdrop.in {
  opacity: 0.8 !important;
}

.slide-modal .modal-body {
  padding: 2px;
}

.slide-modal .modal-header {
  padding: 10px;
}

.slide-preview {
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.05);
  transition: 0.3s transform cubic-bezier(0.155, 1.105, 0.295, 1.12), 0.3s box-shadow,
    0.3s -webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12);
  cursor: pointer;
}

.slide-preview:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
  transform: scale(1.05);
}

/* This element defines the size the iframe will take.
   In this example we want to have a ratio of 16/9 */
.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 61%;
}

/* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

/* 
888                                                  .d888  .d888                  888         
888                                                 d88P"  d88P"                   888         
888                                                 888    888                     888         
88888b.   .d88b.  888  888  .d88b.  888d888 .d88b.  888888 888888 .d88b.   .d8888b 888888      
888 "88b d88""88b 888  888 d8P  Y8b 888P"  d8P  Y8b 888    888   d8P  Y8b d88P"    888         
888  888 888  888 Y88  88P 88888888 888    88888888 888    888   88888888 888      888         
888  888 Y88..88P  Y8bd8P  Y8b.     888    Y8b.     888    888   Y8b.     Y88b.    Y88b.       
888  888  "Y88P"    Y88P    "Y8888  888     "Y8888  888    888    "Y8888   "Y8888P  "Y888       */

.hovereffect {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: pointer;
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}

.hovereffect .overlay {
  background: linear-gradient(rgba(0, 140, 0, 0.9) 0%, rgba(255, 255, 255, 0) 100%);

  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  /* opacity: 0; */
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover .overlay {
  opacity: 0;
}

.hovereffect h1 {
  text-transform: uppercase;
  font-weight: bolder;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  background: rgba(0, 0, 0, 0.6);
  -ms-transform: translatey(0);
  -webkit-transform: translatey(0);
  transform: translatey(0);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  padding: 10px;
}

.hovereffect .info {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  font-weight: normal;
  margin: 0%;
}

.hovereffect:hover .info {
  opacity: 0;
}

.hovereffect:hover h1 {
  -webkit-transform: translatey(-100px);
  -ms-transform: translatey(-100px);
  transform: translatey(-100px);
}
.hovereffect:hover h1 {
  -webkit-transform: translatey(-100px);
  -ms-transform: translatey(-100px);
  transform: translatey(-100px);
}

.hovereffect:hover .info {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

/* 
888                                    888                                         888      
888                                    888                                         888      
888                                    888                                         888      
88888b.  888d888 .d88b.   8888b.   .d88888  .d8888b 888d888 888  888 88888b.d88b.  88888b.  
888 "88b 888P"  d8P  Y8b     "88b d88" 888 d88P"    888P"   888  888 888 "888 "88b 888 "88b 
888  888 888    88888888 .d888888 888  888 888      888     888  888 888  888  888 888  888 
888 d88P 888    Y8b.     888  888 Y88b 888 Y88b.    888     Y88b 888 888  888  888 888 d88P 
88888P"  888     "Y8888  "Y888888  "Y88888  "Y8888P 888      "Y88888 888  888  888 88888P"   */

#breadcrumb {
  /* width: 1000px; */
  padding-top: 16px;
  list-style: none;
  display: inline-block;
  padding-left: 0px;
  margin-bottom: -5px;
  font-size: 14px;
  /*overflow: auto;*/
}
#breadcrumb .icon {
  font-size: 19px;
}
#breadcrumb li {
  margin-top: 5px;
  float: left;
  white-space: nowrap;
}
#breadcrumb li:first-child {
  padding-left: 20px;
}

.finalBreadCrumb {
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  #breadcrumb {
    font-size: 12px;
    padding-top: 2px;
  }

  #breadcrumb li:first-child {
    padding-left: 5px;
  }

  .breadCrumbText {
    max-width: 150px;
  }
}

.linkedBreadCrumb {
  font-style: italic;
  font-weight: bold;
  color: #00b3ee;
}

/* set variable colors */
:root {
  --primary-color: rgb(0, 173, 103);
  --breadcrumb-main-color: rgb(0, 194, 124);
  --breadcrumb-secondary-color: rgb(0, 162, 97);
}

#breadcrumb li div {
  cursor: default;
  color: #fff;
  display: block;
  background: var(--breadcrumb-main-color);
  text-decoration: none;
  position: relative;
  height: 30px;
  padding: 0 5px 0 4px;
  margin-right: 12px;
  line-height: 30px;
}

#breadcrumb li .breadcrumbLink {
  background: var(--breadcrumb-main-color);
}

#breadcrumb li a {
  /* cursor: default; */
  text-align: center;
  color: #fff;
  text-decoration: none;
  /* margin-right: 12px; */
}

.breadCrumbText {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}

#breadcrumb li:nth-child(even) div {
  background-color: var(--breadcrumb-secondary-color);
}
#breadcrumb li:nth-child(even) div:before {
  border-color: var(--breadcrumb-secondary-color);
  border-left-color: transparent;
}
#breadcrumb li:nth-child(even) div:after {
  border-left-color: var(--breadcrumb-secondary-color);
}

#breadcrumb li:nth-child(odd) div:before {
  border-color: var(--breadcrumb-main-color);
  border-left-color: transparent;
}
#breadcrumb li:nth-child(odd) div:after {
  border-left-color: var(--breadcrumb-main-color);
}
#breadcrumb li:first-child div {
  padding-left: 10px;
  -moz-border-radius: 9px 0 0 9px;
  -webkit-border-radius: 9px;
  border-radius: 15px 0 0 15px;
}
#breadcrumb li:first-child div:before {
  border: none;
}

#breadcrumb li:last-child div {
  padding-right: 15px;
  -moz-border-radius: 0 9px 9px 0;
  -webkit-border-radius: 0;
  border-radius: 0 15px 15px 0;
}

#breadcrumb li:last-child div span {
  font-weight: bold;
}

#breadcrumb li:last-child div:after {
  border: none;
}
#breadcrumb li div:before,
#breadcrumb li div:after {
  content: '';
  position: absolute;
  top: 0;
  border: 0 solid;
  border-width: 15px 7px;
  width: 0;
  height: 0;
}
#breadcrumb li div:before {
  left: -10px;
  border-left-color: transparent;
}
#breadcrumb li div:after {
  left: 100%;
  border-color: transparent;
}
#breadcrumb li:not(:last-child) .breadcrumbLink:hover {
  background-color: var(--breadcrumb-secondary-color);
}
#breadcrumb li:not(:last-child) .breadcrumbLink:hover:before {
  border-color: var(--breadcrumb-secondary-color);
  border-left-color: transparent;
}
#breadcrumb li:not(:last-child) .breadcrumbLink:hover:after {
  border-left-color: var(--breadcrumb-secondary-color);
}
#breadcrumb li:not(:last-child) .breadcrumbLink:active {
  background-color: var(--breadcrumb-main-color);
}
#breadcrumb li:not(:last-child) .breadcrumbHoverable:active:before {
  border-color: var(--breadcrumb-main-color);
  border-left-color: transparent;
}
#breadcrumb li:not(:last-child) .breadcrumbLink:active:after {
  border-left-color: var(--breadcrumb-main-color);
}

/* 
 888                   d8b          
 888                   Y8P          
 888                                
 888  .d88b.   .d88b.  888 88888b.  
 888 d88""88b d88P"88b 888 888 "88b 
 888 888  888 888  888 888 888  888 
 888 Y88..88P Y88b 888 888 888  888 
 888  "Y88P"   "Y88888 888 888  888 
                   888              
              Y8b d88P              
               "Y88P"                */

#login_button {
  text-align: center;
  display: flex;
  justify-content: center;
}

.google {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  background-color: #ffffff;
  text-decoration: none;
  font-size: 25px;
  /* font-weight: 900; */
  margin: 2px 2px;
  width: 275px;
  color: rgb(87, 87, 87);
  text-align: right;
  padding: 0.6em;
  padding-right: 1em;
}

.google:hover {
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.15);
  background-color: #efffe5;
}

.google img {
  float: left !important;
  margin-left: auto;
  width: 38px;
}

/* #Progress
================================================== */

.progress-wrap {
  position: fixed;
  right: 20px;
  bottom: 62px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 6px rgba(0, 173, 103, 0.4);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.progress-wrap::after {
  position: absolute;
  content: '';
  -webkit-mask: url(/system/_lib/images/honu.svg) no-repeat 50% 50%;
  mask: url(/system/_lib/images/honu.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  text-align: center;
  line-height: 46px;
  font-size: 24px;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.progress-wrap:after {
  background-color: rgb(0, 173, 103);
}

.progress-wrap:hover::after {
  opacity: 0;
}
.progress-wrap::before {
  position: absolute;
  content: '';

  -webkit-mask: url(/system/_lib/images/honu.svg) no-repeat 50% 50%;
  mask: url(/system/_lib/images/honu.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
  text-align: center;
  line-height: 46px;
  font-size: 24px;
  opacity: 0;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: inline-block;
  z-index: 2;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap::before {
  background-color: rgb(0, 173, 103);
}
.progress-wrap:hover::before {
  opacity: 1;
}
.progress-wrap svg path {
  fill: none;
}
.progress-wrap svg.progress-circle path {
  stroke: rgb(0, 173, 103);
  stroke-width: 8;
  box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

/* TOGGLES */

.cubeToggle {
  --dur: 0.3s;
  --timing: cubic-bezier(0.3, 1.7, 0.6, 0.6);
  --offColor: #565656;
  --onColor: #1a1a1a;
  font-size: 20px;
  transform: translate(-23px, 9px);
}

.toggleTab {
  position: absolute;
  left: -75px;
  bottom: 75px;
  border-radius: 16px;
  padding: 4em 4em 3.5em 10em;
  box-shadow: #aaa 0px 0px 20px 0px;
  background-color: white;
  transition: all 0.3s ease-out;
}

.surface .label-text {
  top: calc(100% + 0.5em);
  line-height: 1em;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(0, 0, 0);
}

.tabToggler {
  transform: translate(-20px, -55px);
  cursor: pointer;
  color: #2d7a06;
  rotate: 90deg;
  width: 100px;
  position: absolute;
  text-align: center;
}
.tabToggler-label {
}

#tabToggler {
  visibility: hidden;
}

/* END Toggles */

/* Fix padding problem on smart admin for condense tables and collapsible responsive */
.table-condensed.table > tbody > tr > .dtr-control,
.table-condensed.table > tbody > tr > .dtr-control,
.table-condensed.table > tfoot > tr > .dtr-control,
.table-condensed.table > tfoot > tr > .dtr-control,
.table-condensed.table > thead > tr > .dtr-control,
.table-condensed.table > thead > tr > .dtr-control {
  padding: 5px 30px !important;
}

/* turn DT class button green */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
  background-color: #30aa30 !important;
}

.dt-toolbar {
  padding: 5px !important;
  padding-top: opx !important;
  border-bottom: 0px;
  background: #fff;
}

.dt-toolbar-footer {
  background: #fff;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  top: auto !important;
  margin-top: 0px !important;
}
/* 
                   .d8888b.                d8b 888            888      
                  d88P  Y88b               Y8P 888            888      
                  Y88b.                        888            888      
88888b.  888  888  "Y888b.   888  888  888 888 888888 .d8888b 88888b.  
888 "88b `Y8bd8P'     "Y88b. 888  888  888 888 888   d88P"    888 "88b 
888  888   X88K         "888 888  888  888 888 888   888      888  888 
888 d88P .d8""8b. Y88b  d88P Y88b 888 d88P 888 Y88b. Y88b.    888  888 
88888P"  888  888  "Y8888P"   "Y8888888P"  888  "Y888 "Y8888P 888  888 
888                                                                    
888                                                                    
888                                                                     */

/* 2016-03-18 Switch Toggle */
.pxSwitch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.pxSwitch input {
  display: none;
}

.pxSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
}

.pxSlider:before {
  position: absolute;
  content: '';
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .pxSlider {
  background-color: #2ab934;
}

input:focus + .pxSlider {
  box-shadow: 0 0 1px #3986ac;
}

input:checked + .pxSlider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(55px);
}

.pxSlider:after {
  content: 'NO';
  color: white;
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked + .pxSlider:after {
  content: 'YES';
}

/* -------------------------------- */
/* switch more standardized */

.pxSwitch-standard {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 25px;
}

.pxSwitch-standard input {
  display: none;
}

.pxSlider-standard {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #dfdfdf;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
}

.pxSlider-standard:before {
  position: absolute;
  content: '';
  height: 21px;
  width: 21px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .pxSlider-standard {
  background-color: #3986ac;
}

input:focus + .pxSlider-standard {
  box-shadow: 0 0 1px #3986ac;
}

input:checked + .pxSlider-standard:before {
  -webkit-transform: translateX(19px);
  -ms-transform: translateX(19px);
  transform: translateX(35px);
}

.pxSlider-standard:after {
  content: 'NO';
  color: rgb(53, 53, 53);
  display: block;
  position: absolute;
  transform: translate(-5%, -50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked + .pxSlider-standard:after {
  color: white;
  transform: translate(-95%, -50%);
  content: 'YES';
}

/* 
888    888          888 d8b      888                         .d8888b.           888                    88888888888                         888          
888    888          888 Y8P      888                        d88P  Y88b          888                        888                             888          
888    888          888          888                        888    888          888                        888                             888          
8888888888  .d88b.  888 888  .d88888  8888b.  888  888      888        888  888 88888b.   .d88b.           888   .d88b.   .d88b.   .d88b.  888  .d88b.  
888    888 d88""88b 888 888 d88" 888     "88b 888  888      888        888  888 888 "88b d8P  Y8b          888  d88""88b d88P"88b d88P"88b 888 d8P  Y8b 
888    888 888  888 888 888 888  888 .d888888 888  888      888    888 888  888 888  888 88888888          888  888  888 888  888 888  888 888 88888888 
888    888 Y88..88P 888 888 Y88b 888 888  888 Y88b 888      Y88b  d88P Y88b 888 888 d88P Y8b.              888  Y88..88P Y88b 888 Y88b 888 888 Y8b.     
888    888  "Y88P"  888 888  "Y88888 "Y888888  "Y88888       "Y8888P"   "Y88888 88888P"   "Y8888           888   "Y88P"   "Y88888  "Y88888 888  "Y8888  
                                                   888                                                                        888      888              
                                              Y8b d88P                                                                   Y8b d88P Y8b d88P              
                                               "Y88P"                                                                     "Y88P"   "Y88P"               
                                                                                                                                                         */

.cubeToggle {
  --dur: 0.3s;
  --timing: cubic-bezier(0.3, 1.7, 0.6, 0.6);
}

.surface,
.cube__front,
.cube__left,
.cube__top {
  background-color: var(--offColor);
}

.surface,
.surface span {
  display: block;
}

.surface,
.cube {
  transform-style: preserve-3d;
}

.surface {
  box-shadow: 0 0 1em transparent;
  transition: all var(--dur) ease-out;
  cursor: pointer;
  margin: auto;
  position: relative;
  transform: rotateX(45deg) rotateZ(-45deg) translateY(-0.5em);
  width: 4em;
  height: 2em;
  -webkit-tap-highlight-color: transparent;
}

.cube,
.cube span,
.label-text {
  position: absolute;
  left: 0;
}

.cube,
.cube span {
  top: 0;
}

.cube__front,
.cube__left,
.cube__top,
.cube__reflection {
  height: 2em;
  width: 2em;
}

.cube__front,
.cube__left,
.cube__top {
  transition: background-color var(--dur) ease-out, transform var(--dur) var(--timing);
}

.cube__front {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
  transform: rotateX(-90deg);
  transform-origin: 50% 100%;
}

.cube__left {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  transform: rotateY(-90deg);
  transform-origin: 0 50%;
}

.cube__top {
  transform: translateZ(2em);
}

.cube__reflection {
  background-color: #000;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%, 0 100%);
  opacity: 0.04;
  transform: rotate(45deg) scale(0.707);
  transform-origin: 0 0;
  transition: clip-path var(--dur) var(--timing), -webkit-clip-path var(--dur) var(--timing);
}

.cube:nth-child(2) {
  transform: translate(2em, 0);
}

.cube:nth-child(2) .cube__front {
  transform: rotateX(-90deg) scaleY(0.25);
}

.cube:nth-child(2) .cube__left {
  transform: rotateY(-90deg) scaleX(0.25);
}

.cube:nth-child(2) .cube__top {
  transform: translateZ(0.5em);
}

.cubeToggle input[type='checkbox'] {
  position: fixed;
  visibility: hidden;
  top: -1.5em;
  left: -1.5em;
}

.cubeToggle input[type='checkbox']:checked + .surface {
  box-shadow: 0 0 1em var(--onColor);
}

.cubeToggle input[type='checkbox']:checked + .surface,
.cubeToggle input[type='checkbox']:checked + .surface .cube__front,
.cubeToggle input[type='checkbox']:checked + .surface .cube__left,
.cubeToggle input[type='checkbox']:checked + .surface .cube__top {
  background-color: var(--onColor);
}

.cubeToggle input[type='checkbox']:checked + .surface .cube__front {
  transform: rotateX(-90deg) scaleY(0.25);
}

.cubeToggle input[type='checkbox']:checked + .surface .cube__left {
  transform: rotateY(-90deg) scaleX(0.25);
}

.cubeToggle input[type='checkbox']:checked + .surface .cube__top {
  transform: translateZ(0.5em);
}

.cubeToggle input[type='checkbox']:checked + .surface .cube__reflection {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 67% 100%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 67% 100%, 0 33%);
}

.cubeToggle input[type='checkbox']:checked + .surface .cube:nth-child(2) .cube__front {
  transform: rotateX(-90deg);
}

.cubeToggle input[type='checkbox']:checked + .surface .cube:nth-child(2) .cube__left {
  transform: rotateY(-90deg);
}

.cubeToggle input[type='checkbox']:checked + .surface .cube:nth-child(2) .cube__top {
  transform: translateZ(2em);
}

/* disallow select text on .tabToggler-label */
.tabToggler-label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}