/* ********** sofi banner ad modal styles ********** */


.sofiBannerAdDialog .bannerOverLayContainer {
   position: absolute;
   top: 20%;
   margin: 0 0 0 3%;
   text-align: center;
   width: 50%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}


.sofiBannerAdDialog .bannerOverLayContainer {
   top: 5%;
   left: 0;
}

img.mobileAppImage {
   width: 100%;
   height: auto;
}

.mobileAppAd {
   background-color: #F3FDFF;
}

.referralAd {
   background-color: #FFFFFF;
}

.referralAd h2 {
   color: #000000;
}

   .referralAd a {
      color: #00819D;
      text-decoration: underline;
   }


.sofiBannerAdDialog  .BannerAd .referralAd a:link {
   color: #00819D !important;
}


.sofiBannerAdDialog .BannerAd .referralAd a:hover {
   color: #00a9ce !important;
}

.sofiBannerAdDialog .BannerAd .referralAd a.visited {
   color: #00819D !important;
}

.sofiBannerAdDialog .BannerAd .referralAd a:active {
   color: #00819D !important;
}


@media only screen and (max-width: 900px) {
   .sofiBannerAdDialog .bannerOverLayContainer h2 {
      font-size: 1.6rem;
   }

   .sofiBannerAdDialog .bannerOverLayContainer {
      top: 0;
      width: 55%;
   }
}



@media only screen and (max-width: 800px) {
   .sofiBannerAdDialog .bannerOverLayContainer h2 {
      font-size: 1.4rem;
   }
}



@media only screen and (max-width: 750px) {
   .sofiBannerAdDialog .bannerOverLayContainer h2 {
      font-size: 1.6rem;
      margin-bottom: 20px;
   }
}

@media only screen and (max-width: 650px) {
   img.mobileAppImage {
      display: none;
   }

   .sofiBannerAdDialog .bannerOverLayContainer {
      position: static;
      width: 100%;
      min-height: 225px;
      padding: 20px;
      margin: 0;
      min-height: 300px;
   }

   .sofiBannerAdDialog .bannerOverLayItem {
      padding-top: 0;
      padding-bottom: 0;
      margin-bottom: 0;
   }


   .sofiBannerAdDialog .bannerOverLayContainer {
      width: 100%;
      min-height: 250px;
   }
}

@media only screen and (max-width: 400px) {
   .sofiBannerAdDialog .bannerOverLayContainer {
      min-height: 325px;
   }

      .sofiBannerAdDialog .bannerOverLayContainer h2 {
         font-size: 1.4rem;
      }
}

.sofiBannerAdDialog .bannerOverLayItem {
   margin-bottom: 10%;
}

.BannerAd a {
   outline: none;
}

   .BannerAd a:hover,
   .BannerAd a:link,
   .BannerAd a:visited,
   .ui-widget-content v a:hover {
      color: black;
   }

.sofiBannerAdDialog.ui-dialog {
   max-width: 850px;
}

.sofiBannerAdDialog .ui-widget-header {
   color: #FFFFFF;
   background-color: #FFFFFF;
   border: none;
}

.sofiBannerAdDialog.ui-dialog.ui-widget-content {
   padding: 0;
}

.sofiBannerAdDialog.ui-dialog .ui-widget-header {
   padding: 0;
}

/*.sofiBannerAdDialog.ui-dialog.ui-widget-content,
.sofiBannerAdDialog.ui-dialog .ui-widget-header,
.sofiBannerAdDialog.ui-dialog .ui-dialog-titlebar-close {
   background-color: #EEFDFF;
}*/

.sofiBannerAdDialog.ui-dialog .ui-dialog-titlebar-close {
   border: none;
}

.sofiBannerAd.ui-dialog-content {
   padding: 0;
}

.sofiBannerAdDialog.ui-dialog.ui-widget-content.ui-widget,
.sofiBannerAdDialog.ui-dialog-content.ui-widget-content {
    border: none;
}

/*@media only screen and (max-width: 800px) {

   div.sofiBannerAdDialog.ui-dialog.ui-widget-content {
      width: 75% !important;
   }
}
*/


div.sofiBannerAdDialog.ui-dialog.ui-widget-content {
   position: fixed !important;
   top: 50% !important;
   left: 50% !important;
   transform: translate(-50%, -50%) !important;
   min-width: 300px !important;
}

@media only screen and (max-width: 800px) {
   div.sofiBannerAdDialog.ui-dialog.ui-widget-content {
      width: 80% !important;
   }

}

@media only screen and (max-width: 600px) {
   div.sofiBannerAdDialog.ui-dialog.ui-widget-content {
      width: 90% !important;
   }

   .referralAd a.myButton {
      border-radius: 2px;
      padding: 0.5rem;
      font-size: 1.1rem;
      cursor: pointer;
      font-weight: bold;
      background-color: #0775bc;
      color: #ffffff !important;
      border: 2px solid #0775bc;
      font-size: 0.95rem;
      width: 95%;
   }

      .referralAd a.myButton:hover {
         background-color: #FFFFFF;
         border: 2px solid #0775bc;
         color: #0775bc !important;
      }

}