/* Scss Document */
/*
    COLORS
    _____
*/
/*
    COMPLEMENTARY COLORS
    ____________________
*/
/*new complementary colors*/
/*
    SECONDARY COLORS
    ________________
*/
/*New secondary palette colors*/
/*
    OTHER COLOR TOKENS
    __________________
*/
/*
    COLOR CLASSES
    _____________
*/
.color-1 {
  color: #492365;
}

.color-2 {
  color: #4a494d;
}

.color-3 {
  color: #70569e;
}

.color-4 {
  color: #814c9c;
}

.color-5 {
  color: #cbc3dc;
}

.color-6 {
  color: #d3c2df;
}

.color-7 {
  color: #a3d55d;
}

.color-8 {
  color: #009844;
}

.color-9 {
  color: #005c49;
}

.color-10 {
  color: #25cad3;
}

.color-11 {
  color: #005f71;
}

.color-12 {
  color: #346094;
}

.color-13 {
  color: #691940;
}

.color-14 {
  color: #a52428;
}

.color-15 {
  color: #d25d12;
}

.color-16 {
  color: #f6b221;
}

.color-17 {
  color: #84471e;
}

.color-18 {
  color: #483627;
}

/*New complementary color classes*/
.color-19 {
  color: #a597c2;
}

.color-20 {
  color: #a275b3;
}

.color-21 {
  color: #f3eff6;
}

.color-22 {
  color: #f3f0f4;
}

.color-23 {
  color: #9d9fa2;
}

.color-24 {
  color: #2c1c42;
}

/*New secondary palette color classes*/
.color-25 {
  color: #6fb6be;
}

.color-26 {
  color: #91c74f;
}

.color-27 {
  color: #efad21;
}

.color-28 {
  color: #f16357;
}

/*
    BACKGROUND COLOR CLASSES
    ________________________
*/
.bg-color-primary {
  background: #492365;
  color: #ffffff !important;
}

.bg-color-secondary {
  background: #4a494d;
  color: #ffffff !important;
}

.bg-color-alert {
  background: #960c03;
  color: #ffffff !important;
}

.bg-color-success {
  background: #03692d;
  color: #ffffff !important;
}

.bg-color-warning {
  background: #c05411;
  color: #ffffff !important;
}

.bg-color-info {
  background: #346094;
  color: #ffffff !important;
}

.bg-color-shade {
  background: #444444;
  color: #ffffff !important;
}

.bg-color-invert {
  background: white;
  color: #000000 !important;
}

.bg-color-1 {
  background: #492365;
  color: #ffffff !important;
}

.bg-color-2 {
  background: #4a494d;
  color: #ffffff !important;
}

.bg-color-3 {
  background: #70569e;
  color: #ffffff !important;
}

.bg-color-4 {
  background: #814c9c;
  color: #ffffff !important;
}

.bg-color-5 {
  background: #cbc3dc;
  color: #000000 !important;
}

.bg-color-6 {
  background: #d3c2df;
  color: #000000 !important;
}

.bg-color-7 {
  background: #a3d55d;
  color: #000000 !important;
}

.bg-color-8 {
  background: #009844;
  color: #000000 !important;
}

.bg-color-9 {
  background: #005c49;
  color: #ffffff !important;
}

.bg-color-10 {
  background: #25cad3;
  color: #000000 !important;
}

.bg-color-11 {
  background: #005f71;
  color: #ffffff !important;
}

.bg-color-12 {
  background: #346094;
  color: #ffffff !important;
}

.bg-color-13 {
  background: #691940;
  color: #ffffff !important;
}

.bg-color-14 {
  background: #a52428;
  color: #ffffff !important;
}

.bg-color-15 {
  background: #d25d12;
  color: #000000 !important;
}

.bg-color-16 {
  background: #f6b221;
  color: #000000 !important;
}

.bg-color-17 {
  background: #84471e;
  color: #ffffff !important;
}

.bg-color-18 {
  background: #483627;
  color: #ffffff !important;
}

/*New complementary background color classes*/
.bg-color-19 {
  background: #a597c2;
  color: #000000 !important;
}

.bg-color-20 {
  background: #a275b3;
  color: #000000 !important;
}

.bg-color-21 {
  background: #f3eff6;
  color: #000000 !important;
}

.bg-color-22 {
  background: #f3f0f4;
  color: #000000 !important;
}

.bg-color-23 {
  background: #9d9fa2;
  color: #000000 !important;
}

.bg-color-24 {
  background: #2c1c42;
  color: #ffffff !important;
}

/*New secondary palette background color classes*/
.bg-color-25 {
  background: #6fb6be;
  color: #000000 !important;
}

.bg-color-26 {
  background: #91c74f;
  color: #000000 !important;
}

.bg-color-27 {
  background: #efad21;
  color: #000000 !important;
}

.bg-color-28 {
  background: #f16357;
  color: #000000 !important;
}

/*
    OTHER COLOR CLASSES
*/
.primary-color {
  color: #492365;
}

.secondary-color {
  color: #4A494D;
}

.alert-color {
  color: #960c03;
}

.success-color {
  color: #03692d;
}

.warning-color {
  color: #C05411;
}

.info-color {
  color: #346094;
}

.primary-bg {
  background-color: #492365;
  color: #ffffff;
}

.secondary-bg {
  background-color: #4A494D;
  color: #ffffff;
}

.alert-bg {
  background-color: #960c03;
  color: #ffffff;
}

.success-bg {
  background-color: #03692d;
  color: #ffffff;
}

.warning-bg {
  background-color: #C05411;
  color: #ffffff;
}

.info-bg {
  background-color: #346094;
  color: #ffffff;
}

.portal-dropdown-color {
  background-color: #9682A6;
  color: #ffffff;
  font-weight: bold;
}

/*
    BUTTONS
    _______
*/
/* Button color mixing style */
.button.color-1 {
  background-color: #492365;
  color: #ffffff !important;
  border: 2px solid #492365;
}
.button.color-1:hover, .button.color-1:focus {
  background-color: #806593;
  color: #ffffff !important;
}

.button.color-2 {
  background-color: #4A494D;
  color: #ffffff !important;
  border: 2px solid #4A494D;
}
.button.color-2:hover, .button.color-2:focus {
  background-color: #6e6d71;
  color: #ffffff !important;
}

.button.color-3 {
  background-color: #70569e;
  color: #ffffff !important;
  border: 2px solid #70569e;
}
.button.color-3:hover, .button.color-3:focus {
  background-color: #9b89bb;
  color: #000000 !important;
}

.button.color-4 {
  background-color: #814C9C;
  color: #ffffff !important;
  border: 2px solid #814C9C;
}
.button.color-4:hover, .button.color-4:focus {
  background-color: #a782ba;
  color: #000000 !important;
}

.button.color-5 {
  background-color: #CBC3DC;
  color: #000000 !important;
  border: 2px solid #CBC3DC;
}
.button.color-5:hover, .button.color-5:focus {
  background-color: #dbd5e7;
  color: #000000 !important;
}

.button.color-6 {
  background-color: #D3C2DF;
  color: #000000 !important;
  border: 2px solid #D3C2DF;
}
.button.color-6:hover, .button.color-6:focus {
  background-color: #e0d4e9;
  color: #000000 !important;
}

.button.color-7 {
  background-color: #a3d55d;
  color: #000000 !important;
  border: 2px solid #a3d55d;
}
.button.color-7:hover, .button.color-7:focus {
  background-color: #bae086;
  color: #000000 !important;
}

.button.color-8 {
  background-color: #009844;
  color: #000000 !important;
  border: 2px solid #009844;
}
.button.color-8:hover, .button.color-8:focus {
  background-color: #00cb5b;
  color: #000000 !important;
}

.button.color-9 {
  background-color: #005c49;
  color: #ffffff !important;
  border: 2px solid #005c49;
}
.button.color-9:hover, .button.color-9:focus {
  background-color: #008f71;
  color: #000000 !important;
}

.button.color-10 {
  background-color: #25cad3;
  color: #000000 !important;
  border: 2px solid #25cad3;
}
.button.color-10:hover, .button.color-10:focus {
  background-color: #4bd8e0;
  color: #000000 !important;
}

.button.color-11 {
  background-color: #005f71;
  color: #ffffff !important;
  border: 2px solid #005f71;
}
.button.color-11:hover, .button.color-11:focus {
  background-color: #008aa4;
  color: #000000 !important;
}

.button.color-12 {
  background-color: #346094;
  color: #ffffff !important;
  border: 2px solid #346094;
}
.button.color-12:hover, .button.color-12:focus {
  background-color: #4178ba;
  color: #ffffff !important;
}

.button.color-13 {
  background-color: #691940;
  color: #ffffff !important;
  border: 2px solid #691940;
}
.button.color-13:hover, .button.color-13:focus {
  background-color: #922359;
  color: #ffffff !important;
}

.button.color-14 {
  background-color: #a52428;
  color: #ffffff !important;
  border: 2px solid #a52428;
}
.button.color-14:hover, .button.color-14:focus {
  background-color: #cf2d32;
  color: #ffffff !important;
}

.button.color-15 {
  background-color: #d25d12;
  color: #000000 !important;
  border: 2px solid #d25d12;
}
.button.color-15:hover, .button.color-15:focus {
  background-color: #ed762a;
  color: #000000 !important;
}

.button.color-16 {
  background-color: #f6b221;
  color: #000000 !important;
  border: 2px solid #f6b221;
}
.button.color-16:hover, .button.color-16:focus {
  background-color: #f8c352;
  color: #000000 !important;
}

.button.color-17 {
  background-color: #84471e;
  color: #ffffff !important;
  border: 2px solid #84471e;
}
.button.color-17:hover, .button.color-17:focus {
  background-color: #ae5d27;
  color: #ffffff !important;
}

.button.color-18 {
  background-color: #483627;
  color: #ffffff !important;
  border: 2px solid #483627;
}
.button.color-18:hover, .button.color-18:focus {
  background-color: #694f39;
  color: #ffffff !important;
}

/*New complementary button color classes*/
.button.color-19 {
  background-color: #A597C2;
  color: #000000 !important;
  border: 2px solid #A597C2;
}
.button.color-19:hover, .button.color-19:focus {
  background-color: #c0b5d6;
  color: #000000 !important;
}

.button.color-20 {
  background-color: #A275B3;
  color: #000000 !important;
  border: 2px solid #A275B3;
}
.button.color-20:hover, .button.color-20:focus {
  background-color: #be9eca;
  color: #000000 !important;
}

.button.color-21 {
  background-color: #F3EFF6;
  color: #000000 !important;
  border: 2px solid #F3EFF6;
}
.button.color-21:hover, .button.color-21:focus {
  background-color: #cbc3dc;
  color: #000000 !important;
}

.button.color-22 {
  background-color: #F3F0F4;
  color: #000000 !important;
  border: 2px solid #F3F0F4;
}
.button.color-22:hover, .button.color-22:focus {
  background-color: #d3c2df;
  color: #000000 !important;
}

.button.color-23 {
  background-color: #9D9FA2;
  color: #000000 !important;
  border: 2px solid #9D9FA2;
}
.button.color-23:hover, .button.color-23:focus {
  background-color: #b7b9bb;
  color: #000000 !important;
}

.button.color-24 {
  background-color: #2C1C42;
  color: #ffffff !important;
  border: 2px solid #2C1C42;
}
.button.color-24:hover, .button.color-24:focus {
  background-color: #442b66;
  color: #ffffff !important;
}

/*New secondary palette button color classes*/
.button.color-25 {
  background-color: #6FB6BE;
  color: #000000 !important;
  border: 2px solid #6FB6BE;
}
.button.color-25:hover, .button.color-25:focus {
  background-color: #81D6DC;
  color: #000000 !important;
}

.button.color-26 {
  background-color: #91C74F;
  color: #000000 !important;
  border: 2px solid #91C74F;
}
.button.color-26:hover, .button.color-26:focus {
  background-color: #b2d884;
  color: #000000 !important;
}

.button.color-27 {
  background-color: #EFAD21;
  color: #000000 !important;
  border: 2px solid #EFAD21;
}
.button.color-27:hover, .button.color-27:focus {
  background-color: #f4c664;
  color: #000000 !important;
}

.button.color-28 {
  background-color: #F16357;
  color: #000000 !important;
  border: 2px solid #F16357;
}
.button.color-28:hover, .button.color-28:focus {
  background-color: #f59289;
  color: #000000 !important;
}

.showcase-html-section {
  display: block;
  min-height: 300px;
  position: relative;
  background: #fff;
  /* box-shadow: inset 0 10px 20px 0px rgba(#000, .3); */
  padding-top: 20px;
}
.showcase-html-section h1 {
  font-family: "tradegothiclt-bold", sans-serif;
  font-size: 1.75rem;
  color: #4A494D;
}
.showcase-html-section h2 {
  font-family: "tradegothiclt-bold", sans-serif;
  font-size: 1.5rem;
  color: #4A494D;
  border: 0px;
  background-color: transparent;
  text-transform: none;
  font-weight: normal;
  margin: 0px;
  padding: 0px;
}
.showcase-html-section h3 {
  font-family: "tradegothiclt-bold", sans-serif;
  font-size: 1.25rem;
  color: #4A494D;
}
.showcase-html-section h4 {
  font-family: "tradegothiclt-bold", sans-serif;
  font-size: 1rem;
  color: #4A494D;
}
@media only screen and (max-width: 640px) {
  .showcase-html-section h1:first-of-type {
    font-size: 1.5rem !important;
  }
}
.showcase-html-section hgroup h1 {
  color: #492365;
  font-family: "tradegothicltstd-boldext", sans-serif;
  font-size: 2em;
  display: block;
  padding: 0px;
  margin: 0px;
}
.showcase-html-section hgroup h5 {
  font-family: "tradegothicltcom-bdcn20", sans-serif;
  font-size: 1.3em;
  padding: 0px;
  margin: 0px;
  display: block;
  color: #70569e;
  white-space: nowrap;
}

#dshowcasecarousel_pnlContainer .DisplayPanel {
  position: relative;
  min-height: 25px;
}

.hero-image, .hero {
  height: 416px;
}

.hero-text-top-left {
  position: absolute;
  top: 16px;
  text-align: left;
  padding: 1.5em;
  max-width: 60%;
}

.hero-text-bottom-left {
  position: absolute;
  top: 136px;
  text-align: left;
  padding: 1.5em;
  max-width: 60%;
}

.hero-text-top-right {
  position: absolute;
  right: 0px;
  top: 16px;
  text-align: left;
  padding: 1.5em;
  max-width: 60%;
}

.hero-text-bottom-right {
  position: absolute;
  right: 0px;
  top: 136px;
  text-align: left;
  padding: 1.5em;
  max-width: 60%;
}

.top-bar a {
  text-decoration: none !important;
}

.main-content-holder {
  background: #ffffff;
  min-height: 500px;
}

.main-content {
  padding: 30px 0;
  line-height: 1.6;
}
.main-content h1 {
  font-family: "tradegothiclt-bold", sans-serif;
  font-size: 1.75rem;
  color: #4A494D;
}
@media only screen and (max-width: 640px) {
  .main-content h1:first-of-type {
    font-size: 1.5rem !important;
  }
}
.main-content h2 {
  font-family: "tradegothiclt-bold", sans-serif;
  font-size: 1.5rem;
  color: #4A494D;
  border: 0 !important;
  background-color: transparent !important;
  text-transform: none !important;
  font-weight: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}
.main-content h3 {
  font-family: "tradegothiclt-bold", sans-serif;
  font-size: 1.25rem;
  color: #4A494D;
}
.main-content h4 {
  font-family: "tradegothiclt-bold", sans-serif;
  font-size: 1rem;
  color: #4A494D;
}
.main-content hgroup h1 {
  color: #492365;
  font-family: "tradegothicltstd-boldext", sans-serif;
  font-size: 2em;
  display: block;
  padding: 0px;
  margin: 0px;
}
.main-content hgroup h5 {
  font-family: "tradegothicltcom-bdcn20", sans-serif;
  font-size: 1.3em;
  padding: 0px;
  margin: 0px;
  display: block;
  color: #70569e;
  white-space: nowrap;
}

.template-header {
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
  background: url(/ui/images/site-manager-templates/blurry-lights-purple-background.jpg) left;
  border-bottom: 5px solid #70569e;
  background-size: cover;
  min-height: 105px;
}
.template-header h1 {
  color: #ffffff;
  font-size: 2.5em;
}

/*  below 1024px  */
@media only screen and (max-width: 1024px) {
  .template-header {
    /*padding-top:60px;*/
    padding-bottom: 10px;
    min-height: auto;
  }
}
.wsu-logo-for-templates {
  display: block;
  margin: 1em 0 1em 0;
  width: 100%;
  height: 41px;
  background: url(/ui/images/site-manager-templates/wsu-logo.png) no-repeat;
  background-size: contain;
}

.side-nav-desktop {
  padding-left: 15px;
}
.side-nav-desktop ul:first-child {
  margin-top: 10px;
}
.side-nav-desktop ul:last-child {
  margin-bottom: 10px;
}
.side-nav-desktop ul {
  padding: 0px;
}
.side-nav-desktop ul ul {
  margin-top: 10px;
}
.side-nav-desktop ul li {
  font-size: 0.95em;
  list-style: none;
  margin: 0;
}
.side-nav-desktop ul li a {
  line-height: 1.2;
  padding: 0.5em 0.1em 0.5em 0.2em;
  border-bottom: 1px solid rgba(203, 195, 220, 0.3);
}
.side-nav-desktop ul li a:hover {
  background: rgba(203, 195, 220, 0.2);
}
.side-nav-desktop ul ul li a {
  padding: 0.3em 0.1em 0.3em 0.2em;
  border-bottom: 0px;
  font-size: 0.8em;
  margin-left: 15px;
  margin-top: 2px;
}
.side-nav-desktop ul ul li a:hover {
  background-color: transparent;
  text-decoration: underline;
}

#sidebar2Content img {
  width: 100%;
}

#banner {
  width: 100%;
}
#banner img {
  width: 100%;
}

.primary-logo {
  max-height: 80px;
  padding-left: 15px;
  padding-right: 15px;
}

.secondary-logo-holder {
  display: inline-block;
}

.secondary-logo-holder img,
.secondary-logo {
  max-height: 80px;
  margin-left: 20px;
  padding: 0px;
  opacity: 0.5;
}

@media only screen and (max-width: 1024px) {
  .secondary-logo-holder {
    display: none;
  }
}
@media only screen and (min-width: 1024px) {
  .padding-left {
    padding-left: 20px;
  }
}
@media only screen and (max-width: 1024px) {
  .hero, .hero-image {
    height: 316px;
  }
  .hero-text-bottom-left, .hero-text-bottom-right, .hero-text-top-left, .hero-text-top-right {
    top: 0px;
    height: 316px !important;
    min-width: 45% !important;
    padding: 2em 3em 1.5em 3em;
  }
  .hero-text-bottom-left h1, .hero-text-bottom-right h1, .hero-text-top-left h1, .hero-text-top-right h1 {
    font-size: 2em;
  }
  .hero-text-bottom-left p, .hero-text-bottom-right p, .hero-text-top-left p, .hero-text-top-right p {
    font-size: 0.94em;
    margin-bottom: 0.5em;
  }
  .top-bar-section a {
    background: #cccac7;
    border-top: 1px solid rgb(228.308411215, 227.261682243, 225.691588785);
    border-bottom: 1px solid rgb(179.691588785, 176.738317757, 172.308411215);
  }
}
@media only screen and (max-width: 640px) {
  .hero, .hero-image {
    height: 230px;
  }
  .hero-text-bottom-left, .hero-text-bottom-right, .hero-text-top-left, .hero-text-top-right {
    padding: 1.5em 3em 2em 3em;
  }
  /*.main-content td, .main-content th{display:block !important;}*/
  .horizontal {
    text-align: center;
  }
  .horizontal li {
    list-style: none;
    display: block;
  }
  .horizontal li a {
    width: 100%;
    border-top: #4A494D 1px solid;
  }
}
/*  400px and Below  */
@media only screen and (max-width: 400px) {
  .hero-text-bottom-left h1, .hero-text-bottom-right h1, .hero-text-top-left h1, .hero-text-top-right h1 {
    font-size: 1.3em;
    margin-bottom: 0.4em;
    font-family: "tradegothiclt-bold", sans-serif;
  }
  .hero-text-bottom-left p, .hero-text-bottom-right p, .hero-text-top-left p, .hero-text-top-right p {
    font-size: 0.9em;
    margin-bottom: 0.8em;
  }
  .hero-text-bottom-left .button, .hero-text-bottom-right .button, .hero-text-top-left .button, .hero-text-top-right .button {
    padding: 0.7em 1em 0.9em 1em;
  }
}

/*# sourceMappingURL=dropdown.css.map */