/* ===================================================================
   COLLEGE OF EASTERN IDAHO - ENROLE PORTAL COLOR UPDATES
   Based on CEI Brand Guidelines
   Overwrites default Enrole CSS colors
   =================================================================== */

/* ===================================================================
   COLOR VARIABLES - Per Brand Guide
   =================================================================== */
:root {
  /* Primary Colors */
  --cei-blue: #0060A9;
  --cei-blue-dark: #004F8C;
  --cei-blue-deeper: #003D6E;

  /* Secondary / Menu Hierarchy */
  --cei-blue-mid: #1A7BBF;
  --cei-blue-light: #59A8D4;
  --cei-blue-pale: #D6EAF5;

  /* Neutrals */
  --cei-black: #222222;
  --cei-light-gray: #EFEFEF;
  --cei-white: #FFFFFF;
}

/* ===================================================================
   HEADER COLORS
   =================================================================== */
#header {
  background-color: var(--cei-blue) !important;
}

#header_title {
  background-color: var(--cei-blue) !important;
}

#login {
  background-color: var(--cei-blue) !important;
}

#cartCount {
  background-color: var(--cei-blue) !important;
}

#cartCount a {
  background-color: var(--cei-blue) !important;
}

#login a {
  background-color: var(--cei-blue) !important;
}

.logform {
  background: var(--cei-blue) !important;
}

#login input.submit {
  background-color: var(--cei-white) !important;
  color: var(--cei-blue) !important;
}

#login input.submit:hover {
  background-color: var(--cei-blue-dark) !important;
  color: var(--cei-white) !important;
}

/* ===================================================================
   HEADER TEXT & LINK CONTRAST UPDATES
   =================================================================== */


#login {
    color: var(--cei-white) !important;
    text-shadow: none !important; 
}


#login a {
    color: var(--cei-white) !important;
    background-color: transparent !important;
    text-decoration: underline;
}

#login a:hover {
    color: var(--cei-blue-pale) !important;
}


#cartCount a {
    color: var(--cei-white) !important;
    background-color: transparent !important;
    text-shadow: none !important;
}

#cartCount a:hover {
    color: var(--cei-blue-pale) !important;
    text-decoration: underline;
}


.image_cart {
    filter: brightness(0) invert(1); 
    margin-right: 5px;
}

/* ===================================================================
   HEADER LOGO UPDATES
   =================================================================== */

#header,
#header table,
#header table tr td:first-child {
  overflow: visible !important;
}

#header_title {
  padding-left: 0 !important;
  width: auto !important;
  margin-right: 192px !important;
  overflow: visible !important;
  transform: translateY(-.30in);
  position: relative;
  left: -51px;
}

.image_header {
  height: 215% !important;
  width: auto !important;
  margin-left: -260px !important;
}


#login input[name="username"],
#login input[name="password"],
#login input[type="submit"] {
  position: relative;
  transform: translate(-2px, -5px);
  left: -80px;
}

#login input[name="username"] {
  left: -70px;
}

#login input[name="username"],
#login input[name="password"] {
  width: 192px;
  height: 23px;
  top: 0;
}

#cartCount a {
  position: relative;
  left: 196px;
  top: 25px;
  transition: none;
}

@media (max-width: 1700px) {
  #header_title img,
  .image_header {
    margin-left: 50px !important;
    height: 100px !important;
    width: auto !important;
  }
}

@media (max-width: 1300px) {
  #login.not-in-mobile {
    display: none !important;
  }
}

@media (max-width: 1200px) {
  .image_header {
    margin-left: 0 !important;
  }
  #header_title {
    margin-right: 0 !important;
  }
}

@media (max-width: 900px) and (min-width: 700px) {
  #header table td:nth-child(2) { width: 60% !important; }
  #login { padding-top: 25px !important; }
  #login input.text {
    width: 120px !important;
    font-size: 0.75rem !important;
    margin-bottom: 0 !important;
    display: inline-block !important;
  }
  #login input.submit {
    padding: 0 10px !important;
    font-size: 0.75rem !important;
  }
}
@media (max-width: 1700px) and (min-width: 1300px) {
  #cartCount a {
    left: 50px !important;
    top: 25px;
  }
}

@media (max-width: 1300px) {
  #cartCount a {
    left: 0 !important;
    top: 0 !important;
    position: static !important;
  }
  #login.not-in-mobile {
    display: none !important;
  }
}
/* ===================================================================
   FOOTER COLORS
   =================================================================== */
#footer {
  background-color: var(--cei-blue) !important;
}

#footer table {
  background-color: var(--cei-blue) !important;
}

#footer a {
  background-color: var(--cei-blue) !important;
  color: var(--cei-white) !important;
}

#footer a:hover {
  background-color: var(--cei-blue) !important;
  color: var(--cei-blue-pale) !important;
}

/* ===================================================================
   LEFT MENU COLORS
   =================================================================== */
.leftMenu ul li a {
  background-color: var(--cei-blue) !important;
  color: var(--cei-white) !important;
}

.leftMenu ul.Level00 li a {
  background-color: var(--cei-blue) !important;
  color: var(--cei-white) !important;
}

.leftMenu ul.Level01 li a {
  background-color: var(--cei-blue-mid) !important;
  color: var(--cei-white) !important;
}

.leftMenu ul.Level02 li a {
  background-color: var(--cei-blue-light) !important;
  color: var(--cei-white) !important;
}

.leftMenu ul.Level03 li a {
  background-color: var(--cei-light-gray) !important;
  color: var(--cei-blue) !important;
}

.leftMenu ul li a:hover,
.leftMenu ul.Level00 li a:hover,
.leftMenu ul.Level01 li a:hover,
.leftMenu ul.Level02 li a:hover,
.leftMenu ul.Level03 li a:hover {
  background-color: var(--cei-blue-dark) !important;
  color: var(--cei-white) !important;
}

/* ===================================================================
   BUTTON COLORS
   =================================================================== */
.logform button {
  background: var(--cei-blue-dark) !important;
  color: var(--cei-white) !important;
}

.logform button:hover,
.logform button:active,
.logform button:focus {
  background-color: var(--cei-blue-deeper) !important;
  color: var(--cei-white) !important;
}

.cartOption input.submit {
  background-color: var(--cei-blue-dark) !important;
  color: var(--cei-white) !important;
}

.cartOption input.submit:hover {
  background-color: var(--cei-blue-deeper) !important;
}

.profileOption input.submit {
  background-color: var(--cei-blue-dark) !important;
  color: var(--cei-white) !important;
}

.profileOption input.submit:hover {
  background-color: var(--cei-blue-deeper) !important;
}

.loginContent input.submit {
  background-color: var(--cei-blue-dark) !important;
  color: var(--cei-white) !important;
}

.loginContent input.submit:hover {
  background-color: var(--cei-blue-deeper) !important;
}

/* ===================================================================
   CART & PROFILE OPTIONS
   =================================================================== */

.profileOption a {
  background-color: var(--cei-blue) !important;
  color: var(--cei-white) !important;
}

.profileOption a:hover {
  background-color: var(--cei-blue-dark) !important;
  color: var(--cei-white) !important;
}

.loginContent input.button {
  background-color: var(--cei-blue) !important;
}

.loginContent input.button:hover {
  background-color: var(--cei-blue-dark) !important;
  color: var(--cei-white) !important;
}

.cartOption input.cancel {
  background-color: var(--cei-blue) !important;
  color: var(--cei-white) !important;
}

.cartOption input.cancel:hover {
  background-color: var(--cei-blue-dark) !important;
  color: var(--cei-white) !important;
}

.profileinner .cartOption a,
.profileinner .cartOption a:visited {
  background-color: var(--cei-blue) !important;
  color: var(--cei-white) !important;
}
 
.profileinner .cartOption a:hover {
  background-color: var(--cei-blue-dark) !important;
  color: var(--cei-white) !important;
}


/* ===================================================================
   LINK COLORS
   =================================================================== */
a:not(.card) {
  color: var(--cei-blue) !important;
}

a:not(.card):hover {
  color: var(--cei-blue-dark) !important;
}

#breadcrumb a,
#breadcrumbTop a {
  color: var(--cei-blue) !important;
}

#breadcrumb a:hover {
  background-color: var(--cei-blue-pale) !important;
}

.courses a {
  color: var(--cei-blue) !important;
}

.courses a:hover {
  color: var(--cei-blue-dark) !important;
}

.subheadinglink a {
  color: var(--cei-blue) !important;
}

.subheadinglink a:hover {
  color: var(--cei-blue-dark) !important;
}

.cart a {
  color: var(--cei-blue) !important;
}

.cart a:hover {
  color: var(--cei-blue-dark) !important;
}

.cartOption a,
.cartOption a:visited {
  background-color: var(--cei-blue) !important;
  color: var(--cei-white) !important;
}

.cartOption a:hover {
  background-color: var(--cei-blue-dark) !important;
  color: var(--cei-white) !important;
}

.history a {
  color: var(--cei-blue) !important;
}

.history a:hover {
  color: var(--cei-blue-dark) !important;
}

.profile a {
  color: var(--cei-blue) !important;
}

.profile a:hover {
  color: var(--cei-blue-dark) !important;
}

.loginContent a {
  color: var(--cei-blue) !important;
}

/* ===================================================================
   HEADING COLORS
   =================================================================== */
#navigation h3,
#popularContainer h3 {
  color: var(--cei-blue) !important;
}

.courseinner table tr td.tableheading,
.cartinner table tr td.tableheading,
.historyinner table tr td.tableheading {
  color: var(--cei-blue) !important;
}

#subHeader,
.subHeader {
  color: var(--cei-blue) !important;
  border-bottom-color: var(--cei-blue-dark) !important;
}

#subHeaderWithNote {
  color: var(--cei-blue) !important;
}

#subHeaderNote {
  color: var(--cei-blue) !important;
}

#note,
.note {
  color: var(--cei-blue) !important;
}

/* ===================================================================
   NAVIGATION MENU COLORS
   =================================================================== */
#navigation ul li a {
  background-color: var(--cei-light-gray) !important;
  color: var(--cei-blue) !important;
}

#navigation ul li a:hover {
  color: var(--cei-white) !important;
  background-color: var(--cei-blue) !important;
}

#subCategories a {
  background-color: var(--cei-light-gray) !important;
  color: var(--cei-blue) !important;
}

#subCategories a:hover {
  background-color: var(--cei-blue) !important;
  color: var(--cei-white) !important;
}

/* ===================================================================
   CALENDAR COLORS
   =================================================================== */
.calHeader,
.calSubheaderDOW,
.calFooterLeft,
.calFooterCenter,
.calFooterRight {
  background-color: var(--cei-blue) !important;
}

.calCatSelect,
.calCatOption {
  color: var(--cei-blue-mid) !important;
}

/* ===================================================================
   INSTRUCTOR SECTION
   =================================================================== */
.instructorbreak {
  background-color: var(--cei-blue) !important;
}

/* ===================================================================
   CARD COLORS
   =================================================================== */
a.card {
  border-color: var(--cei-blue) !important;
}

a.card:hover {
  box-shadow: inset 0px 0px 0px 1000px rgba(0, 96, 169, 0.15) !important;
}

a.imageCard span.cardText {
  border-top-color: var(--cei-blue) !important;
}

/* ===================================================================
   FORM FOCUS STATES
   =================================================================== */
:focus-visible {
  outline: 3px solid var(--cei-blue-dark) !important;
}

/* ===================================================================
   MFA CONTAINER BUTTONS
   =================================================================== */
.mfaContainer button {
  background-color: var(--cei-blue) !important;
  color: var(--cei-white) !important;
}

.mfaContainer button:hover {
  background-color: var(--cei-blue-dark) !important;
  color: var(--cei-white) !important;
}

/* ===================================================================
   SELFREG PORTAL SPECIFIC
   =================================================================== */
.selfreg-portal .forgotPw a {
  color: var(--cei-white) !important;
}

.selfreg-portal .forgotPw {
  color: var(--cei-white) !important;
}

.logform .forgotPw a,
.logform .forgotPw a:visited {
  color: var(--cei-white) !important;
}

.logform .forgotPw a:hover {
  color: var(--cei-blue-pale) !important;
}

/* ===================================================================
   BORDER COLORS
   =================================================================== */
#header {
  border-bottom-color: var(--cei-blue-dark) !important;
}

#footer {
  border-top-color: var(--cei-blue-dark) !important;
}

.cartinner #addedAttendee {
  border-color: var(--cei-blue) !important;
}

/* ===================================================================
   HR / DIVIDER COLORS
   =================================================================== */
.historyinner hr {
  background-color: var(--cei-blue-dark) !important;
}

.profileinner hr,
.cartinner hr {
  background-color: var(--cei-blue-dark) !important;
}

/* ===================================================================
   SELFREG PORTAL header
   =================================================================== */


.selfreg-portal #header {
  overflow: visible !important; 
  align-items: center !important;
}

.selfreg-portal #header table {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  min-width: unset !important;
  overflow: visible !important;
}


.selfreg-portal #header_title {
  position: relative !important;
  left: -150px !important; 
  transform: none !important;
  margin-right: 0 !important;
  padding-left: 8px !important;
  overflow: visible !important;
}


.selfreg-portal .image_header {
  height: 80px !important;
  max-height: 80px !important;
  width: auto !important;
  margin-left: 0 !important;
}


.selfreg-portal #header table td:first-child {
  overflow: visible !important;
}


.selfreg-portal #cartCount a,
.selfreg-portal #login input[name="username"],
.selfreg-portal #login input[name="password"],
.selfreg-portal #login input[type="submit"] {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
}


@media (max-width: 1300px) {
  .selfreg-portal .image_header {
    height: 60px !important;
    max-height: 60px !important;
  }
  
  .selfreg-portal #header_title {
    left: -50px !important;
  }
}

@media (max-width: 900px) {
  .selfreg-portal .image_header {
    height: 45px !important;
    max-height: 45px !important;
  }
  .selfreg-portal #header_title {
    left: 0 !important; 
  }
}