/****************************************
  ==== OVERLAYS
****************************************/

div.main-overlay {
  position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 99; cursor: pointer; background: rgba(60,72,94,0.6); opacity: 0; visibility: hidden; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
div.main-overlay.open {
  opacity: 1; visibility: visible;
}

/****************************************
  ==== TOOLTIP
****************************************/

.tooltip {
  position: relative;
}
.tooltip:after {
  visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
}
.tooltip div.tip {
  height: 24px; line-height: 24px; position: absolute; left: -100000px; z-index: 9999; opacity: 0; background: #002835; color: #fff; border: 0; font-size: 1.4em; font-weight: 300; padding: 0 7px; white-space: nowrap; text-align: center; border-radius: 3px;
}
.tooltip div.bottom:after {
  content: ""; display: block; position: absolute; top: -8px; left: 50%; font-size: 0px; line-height: 0%; width: 0px; margin: 0 0 0 -3px; border: transparent 4px solid; border-bottom-color: #002835;
}
.tooltip div.top:after {
  content: ""; display: block; position: absolute; bottom: -8px; left: 50%; font-size: 0px; line-height: 0%; width: 0px; margin: 0 0 0 -4px; border: transparent 4px solid; border-top-color: #002835;
}
.tooltip div.tip-visible {
  left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%);
}


/****************************************
  ==== EXPAND/EXPANDED
****************************************/

.expand, .expand:hover, .expand:active, .expand:focus {
  display: block; float: left; color: #000000; font-size: 1em; text-decoration: none; padding: 0 0 0 40px; position: relative;
}
.expanded, .toggled {
  font-weight: 700;
}
.expand:before, .expanded:before, .toggled:before {
  content: '\f123'; display: block; width: 23px; height: 24px; line-height: 24px; padding: 0 0 0 1px; position: absolute; top: 2px; left: 0; background: #F7F4F2; font-size: 75%; text-align: center; font-family: 'icons8'; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.expanded:before, .toggled:before {
  content: '\f103'; width: 24px; padding: 1px 0 0 0; font-weight: normal; color: #fff; background: #0e38b1;
}

/****************************************
  ==== FORM FIELD HELPER
****************************************/

div.field-helper {
  padding: 15px 20px 6px 20px; background: #fff; position: absolute; border: #8c8986 1px solid; border-top: #9E007E 5px solid; border-radius: 3px; top: 46px; left: 5px; right: 5px; z-index: 999;
}
div.field-helper:before {
  content: ''; display: block; position: absolute; top: -24px; left: 50px; z-index: 18; border: transparent 10px solid; border-bottom-color: #9E007E;
}
div.field-helper p {
  margin-bottom: 9px; line-height: 1.5;
}

/****************************************
  ==== VALIDATION
****************************************/

.validation-summary-errors {
  align-self: start;
}
.validation-summary-errors > ul {
  list-style: none; padding-left: 0; margin: 0;
}
.validation-summary-errors > ul > li {
  color: #FC3B58; padding-left: 20px; font-size: 1.2em; line-height: 1.25; background-image: url('../images/global/icons/warn.svg'); background-repeat: no-repeat; background-position-y: center; text-align: left;
}
.field-validation-error {
  color: #FC3B58; font-size: 1.2em; line-height: 1.25; padding: 0 0 0 20px; background-image: url('../images/global/icons/warn.svg'); background-repeat: no-repeat; background-position-y: center;
}