/**
 * Utility
 */
.p-4 {
  padding: 1.5rem !important;
}
.mb-4 {
  margin-bottom: 1.5rem !important;
}
.my-4 {
  margin: 1.5rem 0 !important;
}
.pt-3 {
  padding-top: 1rem !important;
}
.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* Text colors */
.purple {
  color: #7F2B7B;
}
.black {
  color: #000;
}
.white {
  color: #FFF;
}
.grey {
  color: #4D4D4D;
}

/**
 * Font files
 */
@font-face {
  font-family: "aspira-bold";
  src: url("../../../../../etc.clientlibs/frontdoor/clientlibs/resources/fonts/aspira-bold-webfont.eot");
  src: url("../../../../../etc.clientlibs/frontdoor/clientlibs/resources/fonts/aspira-bold-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../../../../../etc.clientlibs/frontdoor/clientlibs/resources/fonts/aspira-bold-webfont.woff")
      format("woff"),
    url("../../../../../etc.clientlibs/frontdoor/clientlibs/resources/fonts/aspira-bold-webfont.svg")
      format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "aspira-regular";
  src: url("../../../../../etc.clientlibs/frontdoor/clientlibs/resources/fonts/aspira-regular-webfont.eot");
  src: url("../../../../../etc.clientlibs/frontdoor/clientlibs/resources/fonts/aspira-regular-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../../../../../etc.clientlibs/frontdoor/clientlibs/resources/fonts/aspira-regular-webfont.woff")
      format("woff"),
    url("../../../../../etc.clientlibs/frontdoor/clientlibs/resources/fonts/aspira-regular-webfont.svg")
      format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "aspira-demi";
  src: url("../../../../../etc.clientlibs/frontdoor/clientlibs/resources/fonts/aspira-demi-webfont.eot");
  src: url("../../../../../etc.clientlibs/frontdoor/clientlibs/resources/fonts/aspira-demi-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../../../../../etc.clientlibs/frontdoor/clientlibs/resources/fonts/aspira-demi-webfont.woff")
      format("woff"),
    url("../../../../../etc.clientlibs/frontdoor/clientlibs/resources/fonts/aspira-demi-webfont.woff2")
      format("woff2"),
    url("../../../../../etc.clientlibs/frontdoor/clientlibs/resources/fonts/aspira-demi-webfont.svg")
      format("svg");
  font-weight: 400;
  font-style: normal;
}

/**
 * Fonts
 */
body,
select,
.body {
  font-size: 16px;
  line-height: 22px;
  font-family: "aspira-regular", sans-serif;
}
body,
select {
  color: #4d4d4d;
}

p {
  margin-bottom: 1.1em;
}

@media (min-width: 768px) {
  body,
  .body {
    line-height: 24px;
  }
  p {
    font-size: 1.125em;
    line-height: 1.7em;
  }
}
a {
  text-decoration: underline;
  color: #4d4d4d;
}
h1,
.h1,
h3,
.h3,
h4,
.h4 {
  font-family: "aspira-bold", sans-serif;
  font-style: normal;
}
h2,
.h2,
h5,
.h5,
h6,
.h6 {
  font-family: "aspira-demi", sans-serif;
  font-style: normal;
}
h1,
.h1 {
  font-size: 22px;
  line-height: 26px;
}
@media (min-width: 768px) {
  h1,
  .h1 {
    font-size: 26px;
    line-height: 28px;
  }
}
@media (max-width: 991px) {
  .h1-mobile {
    font-size: 22px;
  }
}
h2,
.h2 {
  font-size: 18px;
  line-height: 28px;
}
@media (min-width: 768px) {
  h2,
  .h2 {
    font-size: 22px;
  }
}
@media (max-width: 991px) {
  .h2-mobile {
    font-size: 16px;
  }
}
h3,
.h3 {
  font-size: 16px;
  line-height: 18px;
}
@media (min-width: 768px) {
  h3,
  .h3 {
    font-size: 18px;
    line-height: 24px;
  }
}
h4,
.h4 {
  font-size: 16px;
  line-height: 22px;
}
@media (min-width: 768px) {
  h4,
  .h4 {
    font-size: 16px;
    line-height: 20px;
  }
}
h5,
.h5,
h6,
.h6 {
  font-size: 16px;
}

/**
 * Styled Form
 */
.guideRootPanel.styled-panel {
  padding: 3em 1.5em;
  margin: 0;
}
@media (max-width: 768px) {
  .guideRootPanel.styled-panel {
    padding: 0;
  }
}
.styled-panel-container {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100%;
}

/**
 * Date Fields
 */
.guideFieldWidget input[type="text"].comb-form-group-month {
  width: 3.9em;
}
.guideFieldWidget input[type="text"].comb-form-group-day {
  width: 3.5em;
}
.guideFieldWidget input[type="text"].comb-form-group-year {
  width: 4.6em;
}

/**
  * Select
  */
.guideDropDownList.bold label {
  font-weight: bold;
}
.width-50 .dropDownList {
  width: 100%;
}
.toggle-description {
  position: relative;
}
.toggle-description .long {
  display: none;
}
.toggle-description .long {
  background: #eee;
  position: absolute;
  padding: 1.5em;
  top: 36px;
  width: 100%;
  z-index: 10;
}
.toggle-description:hover .long {
  display: block;
}
/**
 * Radio Buttons
 */
.guideRadioButtonItem {
  display: inline-block;
  max-width: 100px;
}
.guideRadioButtonItem input[type="radio"] {
  position: relative;
  width: auto;
  height: auto;
}
.guideRadioButtonItem .guideWidgetLabel {
  display: inline;
}
.guideRadioButtonItem .guideWidgetLabel label {
  line-height: 24px;
}
.guideradiobutton .guideFieldError {
  float: left;
}

/* branch appointment form : appointment time error css*/
.branchAppointmentPanel .guideradiobutton .appointmentTime .guideFieldError{
    float: right;
}

/**
 * Button
 */
a[title="button-secondary"],
a[title="button-primary"],
.button-primary button,
.btn-secondary-outline button {
  text-decoration: none;
  border-radius: 1.5em;
  padding: 0.3rem 2rem;
  font-size: 1rem;
  font-weight: normal;
  font-family: "aspira-demi", sans-serif;
  line-height: 24px;
}
@media (max-width: 768px) {
  a[title="button-secondary"],
  a[title="button-primary"] {
    line-height: 32px;
  }
}
@media (min-width: 992px) {
  a[title="button-secondary"],
  a[title="button-primary"],
  .button-primary button,
  .btn-secondary-outline button {
    padding: 0.7rem 5rem;
  }
}

.btn-secondary-outline button,
a[title="button-secondary"] {
  background-color: #fff !important;
  border: 3px solid transparent !important;
  border-color: #00856a !important;
  color: #00856a !important;
}
.btn-secondary-outline button:hover,
a[title="button-secondary"]:hover {
  background-color: #cce7e1 !important;
  border-color: #00856a !important;
  color: #00856a !important;
  cursor: pointer;
}
.button-primary button,
a[title="button-primary"] {
  background-color: #32a685 !important;
  border: 3px solid transparent !important;
  border-color: #32a685 !important;
  color: #fff !important;
}
.button-primary button:hover,
a[title="button-primary"]:hover {
  background-color: #00856a !important;
  border-color: #00856a !important;
  color: #fff !important;
  cursor: pointer;
}

a[title~="icon-info"] {
  background: #fff;
  border-radius: 50%;
  border: 2px solid #7f2b7b;
  box-sizing: border-box;
  color: #7f2b7b;
  line-height: 1;
  margin: 0;
  padding: 0 0.3em;
  text-decoration: none;
}
a[title~="icon-info"]:hover {
  cursor: pointer;
}

/**
 * Common CSS
 */
ul.green-chevron li {
  margin-bottom: 10px;
}
.left {
  float: left !important;
}
.width-50 {
  width: 50%;
}

.inline-display .guideLayout:first-child .row {
  float: left;
  width: 100%;
}
@media (min-width: 1200px) {
  .inline-display .guideLayout:first-child .row:nth-child(2) {
    width: 440px;
    float: right;
  }
  .inline-display .guideLayout:first-child .row:nth-child(1) {
    width: 50%;
  }
}

.left .guideFieldError,
.inline-display .guideFieldError {
  float: left;
}
.inline-display .dropDownList {
  width: 100%;
}
.inline-display p {
  margin-top: 0;
}

/**
 * Modal
 */
body.fixed {
  overflow: hidden;
}
.modal {
  padding: 3em 1.5em;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden !important;
  z-index: 1080;
}
.modal.activate {
  display: block;
}
.modal .gridFluidLayout {
  background-color: #ffffff;
  background-clip: border-box;
  border: 0px solid rgba(0, 0, 0, 0.125);
  border-radius: 4px;
  box-shadow: 0 0px 7px 0 rgba(0, 0, 0, 0.1);
  max-height: 65vh;
  max-width: 700px;
  margin: 0 auto;
  overflow-y: scroll;
  padding: 1.5em;
  position: relative;
  top: 10vh;
  width: 80%;
}

@media (min-width: 1200px) {
  .modal .gridFluidLayout {
    width: 40%;
  }
  .modal .gridFluidLayout::-webkit-scrollbar {
    width: 1em;
  }
  .modal .gridFluidLayout::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  }
  .modal .gridFluidLayout::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
  }
}
.modal .row {
  width: 100% !important;
}

/**
 * Accordion
 */
.toggle .toggle-item {
  display: none;
}
.toggle.toggle--active .toggle-item {
  display: block;
}

/**
 * .act-as-checkbox terms and conditions restyling.
 */
.act-as-checkbox .afTermsAndConditions {
  margin: 0;
  padding: 0;
}
.act-as-checkbox .guide-tnc-checkbox {float: left;}
.act-as-checkbox .guide-tnc-checkbox input{
  height: 13px;
  margin: 3px 3px 3px 4px;
  width: 13px;
}
.act-as-checkbox .afTncContentArea {
  float: right;
  width: calc(100% - 28px);
}
.act-as-checkbox .afTncContentArea p {
  margin: 0 0 0.5em;
  line-height: 24px;
}
.act-as-checkbox .guideFieldError {
  display: inline-block;
}
.guide-tnc-checkbox input {
  z-index: 10;
}

 /**
  * /etc.clientlibs/fd/af/runtime/clientlibs/guidetheme2/common.css is taking precedence over frontdoor common.css 
  * in page using AEM form - have overidden those properties for header 
  */
.header .btn-lg,
.header .btn-group-lg > .btn {
  line-height: 1.5;
  border-radius: 0.3rem;
}
.header .btn {
  font-weight: 700;
  border: 3px solid transparent;
  font-size: 1rem;
  line-height: 1.5;
}
.header .btn-secondary:hover, .header .btn-secondary:focus {
  color: #ffffff;        
  background-color: #29896d;
  border-color: #29896d;
}
#primary-nav .row:not(.row-double-md), #secondary-nav .row, .searchbox .row, .nav-topbar .row {
  margin-right: -18px;
  margin-left: -18px;
}
.login-popover .col-lg-12 {
  padding-right: 18px;
  padding-left: 18px;
}
.nav-login-mobile {
  padding: 0.3em 1em 0.3em 2.5em;
}
.login-inner .icon-left:before, .login-inner .icon-right:before {
  content: '';
}
.nav-login-mobile .icon-left:before {
    content: '';
}
/* End */

/** GWW-1457 - Terms and conditions **/
.enable-checkbox .afTncContentArea {max-height: none;}


/** GWW-2466 - Investor Relations, Disclaimer Form **/
.form__field-center {
  margin: 0 auto;
}
.form__field-center button{
  margin: 0 auto;
  display: block;
}
.display__flex .gridFluidLayout {
  width: 100%;
}
.display__flex .guideLayout {
  display: flex;
  justify-content: space-around;
}

.formSubmissionModal .gridFluidLayout {
  overflow-y: unset;
  width: 50%;
}

.formModalButton {
  display: block;
  margin-top: 15px;
  margin-left: 45%;
  border-radius: 15px;
  font-size: 18px;
  padding: 7px 18px;
}

/** CSS for Fraud Form Fields Spacing **/
.field-spacing {
  padding-bottom: 65px;
}

/**
 * GWW-5571
 */
@media (max-width: 768px) {
  .frontdoorHomepage .datetimepicker.datePickerTarget {
    width: calc(100% - 20px) !important;
    left: 10px!important;
  }
}
/**
 * GWW-3446
 */

.tooltip__primary .tooltip {
  width: 450px;
  max-width: 100%;
  
  font-family: "aspira-regular", sans-serif;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important
}

.tooltip__primary .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #7F2B7B;
}
.tooltip__primary .tooltip .tooltip-inner {
  background: #7F2B7B;
  max-width: 100%;
}

.tooltip__primary .tooltip ul li {
  font-size: 14px;
}
/**
 * Mixins for Media Queries
 * Use: .mixin__respond-to-min(@small, {color: blue;});
 * Use: .mixin__respond-to-max(@large - 1, {color: blue;});
 * Use: .mixin__respond-to-min-max(@small, @medium - 1, {color: blue;});
 */
.small-description__right .guideFieldDescription.short {
  float: right;
  width: 60%;
}
.small-description__right .guideFieldDescription.short p {
  font-size: 14px;
}
@media (max-width: 992px) {
  .small-description__right .guideFieldDescription.short {
    width: 100%;
  }
}