/*
CSS styling for fully JS EndofYear Sitenotice, init events etc
See detailed documentation in Dev/mediawiki
*/

html.client-nojs #donate-end-of-year {
       display: none !important;
}

#donate-end-of-year {
       height: 415px;
       border: 4px solid #fff;
       border-radius: 15px;
       max-width: 1000px;
       margin: 0 auto;
       background: #f6f5f4;
       box-shadow: 2px 2px 4px rgb(0 0 0 / 10%);
}

#donate-end-of-year .h1 {
       text-align: center;
       font-size: 21px;
       margin-bottom: 15px;
       color: white;
       background-color: #0080cf;
       padding: 10px 40px 10px 20px;
       border-radius: 12px 12px 0 0;
       position: relative;
}

#donate-end-of-year .h1 .dismiss {
       position: absolute;
       right: 20px;
       top: 12px;
       color: white;
       opacity: .7;
       cursor: pointer;
}

#donate-end-of-year .h1 .dismiss:hover {
       opacity: 1;
}

#donate-end-of-year .h2 {
       font-size: 18px;
       color: white;
       font-weight: bold;
       background: #c3c3c3;
       text-align: center;
       padding: 7px 0;
       border-radius: 8px 0 0 8px;
}

/* Slides */

#donate-end-of-year .slideshow  {
   width: calc( 100% - 270px );
   display: inline-block;
   vertical-align: top;
   margin-right: 9px;
   padding: 0 50px 0;
   text-align: justify;
   color: #555;
   position: relative;
       font-size: 19px;
}

#donate-end-of-year .slideshow .content {
       display: table-cell;
       vertical-align: middle;
}

#donate-end-of-year .slideshow .content > :not(.active)  {
       display: none;
}

#donate-end-of-year .slideshow .content i  {
       font-size: 64px;
       float: left;
       margin-right: 25px;
       padding: 8px 12px;
}

#donate-end-of-year .slideshow .control {
       text-align: center;
       width: max-content;
       margin: 5px auto 15px;
}

#donate-end-of-year .slideshow .progress {
       display: block;
       height: 3px;
       width: 0;
       background: white;
       box-shadow: 1px 1px 3px rgb(0 0 0 / 10%);
       margin-bottom: 6px;
}

#donate-end-of-year .slideshow .slide-buttons {
       display: inline-block;
}

#donate-end-of-year .slideshow .slide-buttons span {
       display: inline-block;
       width: 13px;
       height: 13px;
       background-color: #fff;
       box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
       border-radius: 100px;
       margin: 0 8px;
       cursor: pointer;
}

#donate-end-of-year .slideshow .slide-buttons span:hover,
#donate-end-of-year .slideshow .slide-buttons span.active {
       background-color: #32b1ff;
}

#donate-end-of-year .slideshow .flow {
       text-shadow: 2px 2px rgb(0 0 0 / 10%);
       color: #32b1ff;
       margin-left: 10px;
       display: inline-block;
}

#donate-end-of-year .slideshow .flow i:not(.active) {
       display: none;
}

#donate-end-of-year .slideshow .flow i {
       cursor: pointer;
}

#donate-end-of-year .slideshow .flow i:hover {
       transform: scale(1.1);
}

/* Payment */

#donate-end-of-year .payment {
       width: 250px;
       display: inline-block;
       position: relative;
       opacity: 0;
}

#donate-end-of-year .pay-via-paypal-module span {
       padding: 1px 0;
}

#donate-end-of-year .pay-via-paypal-module .error {
       font-size: 14px;
}

#donate-end-of-year .pay-via-paypal-module .amount,
#donate-end-of-year .pay-via-paypal-module .interval {
       margin-bottom: 5px;
}

#donate-end-of-year .pay-via-paypal-module .submit {
       margin: 0 0 12px;
}

#donate-end-of-year .payment .h2.crypto {
       display: inline-block;
       font-weight: normal;
       font-size: 14px;
       line-height: 18px;
       padding: 8px 7px;
       position: absolute;
       right: 0;
}

#donate-end-of-year .payment .crypto-container {
       text-align: center;
       margin: 16px 73px 0 0;
       height: 38px;
}

#donate-end-of-year .payment .crypto-container > div {
       margin: 0 5px;
}

#donate-end-of-year .payment a {
       color: #0080cf;
       text-decoration: none;
       padding: 3px 5px 4px;
       display: block;
       text-align: center;
       border-radius: 5px;
       font-size: 14px;
       border: 1px solid #93b3cf;
       margin: 20px auto 9px;
       width: 100%;
}

#donate-end-of-year .payment a:hover {
       border-color: #024ca1;
       color: #024ca1;
}

/* Mobile */

#donate-end-of-year .content .mobile-donate-button {
       display: block;
       text-align: center;
       background: #32b1ff;
       color: white;
       font-weight: bold;
       width: max-content;
       margin: 20px auto;
       padding: 2px 16px;
       cursor: pointer;
       border-radius: 3px;
}

#donate-end-of-year .content .mobile-donate-button:hover {
       background: #009eff;
}

@media (max-width: 820px) {
       #donate-end-of-year .slideshow .content {
               font-size: 17px;
       }
}

@media (max-width: 730px) {
       #donate-end-of-year .slideshow {
               padding-top: 11px;
       }
}

@media (max-width: 660px ) {
       #donate-end-of-year {
               height: 335px;
       }
       #donate-end-of-year .h1 {
               font-size: 18px;
       }
       #donate-end-of-year .h2 {
               border-radius: 8px;
       }
       #donate-end-of-year .payment .h2.crypto {
               margin-top: -5px;
       }
       #donate-end-of-year .slideshow {
               width: 100%;
               padding-left: 25px;
               padding-right: 25px;
       }
       #donate-end-of-year .slideshow .content {
               font-size: 16px;
       }
       #donate-end-of-year .payment {
               width: 92%;
               margin: 10px auto 20px;
               display: none;
       }
}

@media (max-width: 550px ) {
       #donate-end-of-year .slideshow .content {
               font-size: 14px;
       }
}

@media (max-width: 450px ) {
       #donate-end-of-year {
               height: 380px;
       }
}

/*
[[Category:MultiWiki]]
*/