/*
 * Legal Disclaimer
 *
  * These web fonts are licensed exclusively for use on the following:
 * Web domains belonging to this customer.
 * U.S. Bank
 * It is strictly forbidden to download or use these fonts on any other website domain or media.
    
 *
 * While the @font-face statements below may be modified by the client, this
 * disclaimer may not be removed.
 *
 * Lineto.com, 2023
 */

/*********************************************************************************/
/* styles for the email pop-up privacy policy in the footer, the email opt-out code
/* is located in the customComponents > components > footer > atoms > layout >
/* footer-sitemap > FooterSiteMap.jsx
/*********************************************************************************/
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  color: #0c2074;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

.email-input-container {
  display: flex;
  align-items: center;
  margin: 15px 0;
}

.email-input-container input {
  flex: 1;
  padding: 8px;
  margin-right: 10px;
  border: 1px solid #ccc;
}

.opt-out-button {
  padding: 8px 16px;
  background-color: #0073e6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.opt-out-button:hover {
  background-color: #005bb5;
}

/* Overlay container for the grayed-out background after user submits email for privacy opt-out */
.success-banner-overlay-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.success-banner-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #005bb5;
  color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 400px;
  text-align: center;
  z-index: 1000;
}

.close-success-message {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #005bb5;
  color: white;
  border: none;
  font-size: 1rem;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*********************************************************************************/
/* Merchant.html page styles - hero and merchant paragraph and form components   */
/*********************************************************************************/
#PageOrderableContainerMerchantPage
  .pageOrderableContainer_container
  > *:first-child {
  flex: 1 1 100%;
  max-width: 100%;
}

#PageOrderableContainerMerchantPage
  .pageOrderableContainer_container
  > *:nth-child(2),
#PageOrderableContainerMerchantPage
  .pageOrderableContainer_container
  > *:nth-child(3) {
  display: inline-block;
  vertical-align: top;
  width: 48%;
}

#PageOrderableContainerMerchantPage
  .pageOrderableContainer_container
  > *:nth-child(2) {
  padding-right: 4%;
  padding-top: 0;
  padding-bottom: 10%;
}

@media (max-width: 990px) {
  #PageOrderableContainerMerchantPage .pageOrderableContainer_container {
    display: flex;
    flex-direction: column;
  }

  #PageOrderableContainerMerchantPage
    .pageOrderableContainer_container
    > *:nth-child(2) {
    display: block;
    width: 100%;
    order: 2;
    padding-top: 2%;
    padding-bottom: 10%;
    padding-right: 0;
  }

  #PageOrderableContainerMerchantPage
    .pageOrderableContainer_container
    > *:nth-child(3) {
    display: block;
    width: 100%;
    order: 1;
    padding-bottom: 0;
  }
}

/*********************************************************************************/
/* Partner.html page styles - hero and partner paragraph and form components    */
/********************************************************************************/
#PageOrderableContainerPartnerPage
  .pageOrderableContainer_container
  > *:first-child {
  flex: 1 1 100%;
  max-width: 100%;
}

#PageOrderableContainerPartnerPage
  .pageOrderableContainer_container
  > *:nth-child(2),
#PageOrderableContainerPartnerPage
  .pageOrderableContainer_container
  > *:nth-child(3) {
  display: inline-block;
  vertical-align: top;
  width: 48%;
}

#PageOrderableContainerPartnerPage
  .pageOrderableContainer_container
  > *:nth-child(2) {
  padding-right: 4%;
  padding-top: 0;
  padding-bottom: 10%;
}

@media (max-width: 990px) {
  #PageOrderableContainerPartnerPage .pageOrderableContainer_container {
    display: flex;
    flex-direction: column;
  }

  #PageOrderableContainerPartnerPage
    .pageOrderableContainer_container
    > *:nth-child(2) {
    display: block;
    width: 100%;
    order: 2;
    padding-top: 2%;
    padding-bottom: 10%;
    padding-right: 0;
  }

  #PageOrderableContainerPartnerPage
    .pageOrderableContainer_container
    > *:nth-child(3) {
    display: block;
    width: 100%;
    order: 1;
    padding-bottom: 0;
  }
}

/*********************************************************************************/
/* there is a legal disclaimer in the FooterMenu.jsx, it is under the social media
/* icons so it takes the width of that column, the client wants it extended to the 
/* edge of the screen, but the FooterMenu is an atom and doesn't have styles at the
/* same level, because only one element needs to be styled and the width of the text
/* needs to change to be responsive, here are the widths for the different screen 
/* styles, a note will be made in the component itself
/********************************************************************************/
.legal-disclaimer {
  width: 21vw;
}

@media (max-width: 1330px) {
  .legal-disclaimer {
    width: 20vw;
  }
}

@media (max-width: 1199px) {
  .legal-disclaimer {
    width: 60vw;
  }
}

@media (max-width: 720px) {
  .legal-disclaimer {
    width: 50vw;
  }
}

@media (max-width: 479px) {
  .legal-disclaimer {
    width: 80vw;
  }
}