/* Styling for External link popup model */

.ui-dialog.ui-widget-content.external-link-popup {
  display: block;  
  margin-left: auto;
  margin-right: auto;
  background: white;
  z-index: 999;
  padding: 0 0 24px 0;

  @media (min-width: 1312px) {
    width: 1184px !important;
  }
  

.modal-content{
  width: 100%;
  padding: 24px 64px 16px 64px;
}

  .close {
    top: 0;
    cursor: pointer;
    text-decoration: none;
  }


  h3 {
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 20px;
    color: #0E1728;
    font-family: "Poppins";
    line-height: 41.6px;
  }


  p {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0;
    color: #0E1728;
    font-family: "Poppins";
    line-height: 28px;
  }
  p a{
    color: #0972C3;
    text-decoration: underline;
    font-weight: 700;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 1px;
    text-underline-position: from-font;
  }


  .ui-dialog-titlebar {
    width: 100%;
    background-color: #F68920;
    position: relative;
    padding: .4em 1em;
    position: relative;

    button {
      position: absolute;
      right: 16px;
      top: 23px;
      width: 28px;
      height: 28px;
      background: unset;
      border: unset;
      border-radius: 8px;
      outline: unset;

      background-color: #14253f;

      span {
        display: none;
      }

      &::after {
        content: '';
        width: 14px;
        height: 2px;
        background-color: #fff;
        position: absolute;
        left: 7px;
        top: 50%;
        transform: translateY(-50%) rotate(50deg);
      }

      &::before {
        content: '';
        width: 14px;
        height: 2px;
        background-color: #fff;
        position: absolute;
        left: 7px;
        top: 50%;
        transform: translateY(-50%) rotate(130deg);
      }
    }
  }
  
  .external-link-popup-content.ui-dialog-content {
    padding: 0;
  }

  .ui-dialog-buttonpane {
    padding: 0 64px;
    background: unset;
    margin: 0;
    border: unset;

    .ui-dialog-buttonset {
      float: none;
      display: flex;
      flex-direction: column;

      button {
        padding: 16px 34px 16px 24px;
        background-color:#F68920 ;
        max-width: fit-content;
        color:#0E1728;
        font-size: 16px;
        line-height: 20px;
        font-weight: 700;
        border-radius: 16px;
        transition: all 0.4s;
        cursor: pointer;
        margin-bottom: 0;
        position: relative;
        &::after{
          content: '';
          width: 7px;
          height: 7px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%) rotate(45deg);
          right: 20px;
          border-right: 1px solid;
          border-top: 1px solid;
          border-color: #0E1728;
        }
        &:hover {
          background-color: #f68720c5;

        }

        &:first-of-type {
    
          padding-right: 47px;
          font-size: 16px;
          padding-left: 24px;
          line-height: 150%;

          @media screen and (max-width: 1022px) {
            /* padding-left: 16px; */
            border-radius: 8px;
            /* padding-right: 36px; */
            font-size: 14px;
            /* padding-top: 13px; */
            /* padding-bottom: 12px; */
            padding: 13px 36px 12px 16px;
            line-height: 150%;
            text-align: center;
          }          
        }

        

        &:last-of-type {
          background-color: transparent;
          color: #0972C3;
          border: unset;
          /* margin-top: 6px; */
          padding-left: 0;
          font-weight: 400;
          font-size: 20px;
          box-shadow: none;
          padding-top: 12px;
          padding-bottom: 12px;
          margin-top: 16px;

          &::after{
            border-color: #0972C3;
            border-right: 2px solid;
            border-top: 2px solid;
          }

          &:hover {
            color: #F68920;
            &::after{
            border-color: #F68920;

          }

          }
        }
      }
    }
  }

  @media screen and (max-width: 1022px) {
    width: 95% !important;
    max-width: 100%;
    right: 0;

    .ui-dialog {
      padding: 24px;
      box-sizing: border-box;
      width: 96%;
    }


    .external-link-popup-body .modal-logo {
      max-width: 420px;
      height: auto;
    }


    .ui-dialog-buttonpane {
      text-align: center;

      .ui-dialog-buttonset {
        display: flex;
        flex-direction: row;

        flex-wrap: wrap;
        gap: 16px;

        button {
          font-size: 16px;
          padding: 14px 32px;
          min-width: 120px;
          margin: 0;

          &:last-of-type {
            margin: 0;
            font-size: 18px;
            padding-right: 36px;
            min-width: 91px;
            padding-top: 12px;
            padding-bottom: 12px;
          }
        }
      }
    }
  }
  
  @media (max-width:720px) {
    .modal-content{
      padding: 24px 16px;
      text-align: left;
    }
      h3{
        text-align: left;
        margin-bottom: 16px;
      }
      p{
        text-align: left;
      }
      .ui-dialog-buttonset{
        flex-direction: column !important;
      }
      .ui-dialog-buttonpane.ui-widget-content {
        padding: 0 16px;
        background: none;
        border: 0px;
      }
    }
}

.coh-component-instance-240d388d-700c-4ba8-89d2-1ae1d277d51c {
  display: block;
}
.coh-component-instance-9f5d0951-4a97-404a-9c99-f7804b5243e3 {
  display: none;
}

@media (max-width:720px) {
  .coh-component-instance-240d388d-700c-4ba8-89d2-1ae1d277d51c {
    display: none;
  }
  .coh-component-instance-9f5d0951-4a97-404a-9c99-f7804b5243e3 {
    display: block;
  }
}

.external-link-popup .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button.button {
    font-family: "Poppins";
    /* Need to add !important, as dialog.css coming from gin theme, is adding 2px border with !important. */
    border: 0px !important; 
}