#moreSupportDiv{
  display: none;
}

#buyForever{
  display: none;
}

.termsOfService{

  font-size: 20px;
  margin-top: 20px;
  color: rgb(33, 0, 63) !important;
}

#termsOfServiceChange{

  display: none;
}

#buttonForClosingPay:hover{

  transform: translateY(-50%) scale(1.1);
color: #800000;
}


#buttonForClosingPay {
  position: absolute;
  right: -50px;
  top: 50%;
  transform: translateY(-50%);
}

#buttonAndPay{

  position: relative;
}


#paySuccessAndCanceled{
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}

#paySuccess{

  display: none;
}

#cancelSuccessDiv{

  display: none;
}

#payCanceled{

  display: none;
  
}

#responseMessagePaymentInput{
  display: none;
}

#submitPeriodInput{
  margin-top: 25px;
}

#toggleButton{

display: flex;
justify-content: center;
gap: 20px;
align-items: center;
}

.toggle-button{

	position: relative;
	display: inline-block;
	width: 84px;
	height: 42px;
}
.toggle-button input{

	opacity: 0;
	width: 0;
	height: 0;
}
.toggle-button .knob{

	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, hsl(117deg 100% 43.56%), hsl(148deg 99.61% 11.01%)) !important;
	transition: .2s;
	border-radius: 50px;
}

.toggle-button .knob:before {
  position: absolute;
  content: '';
  height: 34px;
  width: 34px;
  left: 4px;
  bottom: 4px;
  transition: .2s;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff; 
  background-position: center;
  background-size: 24px;
}

.toggle-button input:checked + .knob{

	background: linear-gradient(to bottom, hsl(0, 100%, 53%), hsl(0, 100%, 30%)) !important;

}

.toggle-button input:checked + .knob:before {
  background-color: #000000; 
  content: '';
  color: #ffffff;
  -webkit-transform: translateX(43px);
  -ms-transform: translateX(43px);
  transform: translateX(43px);
  background-position: center;
  background-size: 24px; 
}

#formPeriodUserInput{

  margin-top: 25px;
}


#tytuł{

  font-size: 60px;
}

#boxDescription{

  padding: 0;
  padding-top: 10px;
  margin-bottom: -15px;
}

#mainTextMe{

  font-size: 40px;
  z-index: 1;
  padding-left: 30px;
  padding-right: 30px;
}
#myPhoto{

  max-width: 600px;
  margin: 0 auto;
  border-radius: 0px 0px 60px 0px;
  margin-left: 170px;
  margin-bottom: -11px;
}

#addFreeExpDiv{

  padding-top: 15px;
}

#buyCoffeeLogoAndName {

display: flex;
justify-content: center;
margin-top: 24px;

}

#butCoffeeThing{

  display: flex; 
  align-items: center;
  text-decoration: none
}

#spanName{

  position: relative;
  top: -2px;
}

#buyCoffee {
  width: 300px;
}

#buyCoffeeName {
  color: #7d00ae;
  font-size: 35px;
}

#bitcoinLogo{

  width: 80px;
}

#BitcoinLogoAndAddress, #ethereumLogoAndAddress{

display: flex;
justify-content: center;
margin-top: 15px;
margin-bottom: 15px;
align-items: anchor-center;
}

#bitcoinAdress, #ethAdress{

  font-size: 25px;
  margin-top: 18px;
  margin-left: 24px;
  overflow-wrap: break-word;
  word-break: break-all;
}

#ethLogo{
  width: 60px;
}

#noAds{

}

#pickSubPeriodText{

font-weight: 700;
margin-top: 10px;
}

#formPeriod{

display: flex;
flex-direction: column;
}

#submitPeriod{

 margin-top: 30px
}


.radioButton {
  appearance: none;
  position: relative;
  width: 25px;
  height: 25px;
  border: 14px solid #000000;
  border-radius: 9999px;
  cursor: pointer;
}

.radioButton:checked {
  border: 14px solid #83005c;

}

.radioButton:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 10px;
  height: 10px;
  margin: auto;
  border-radius: 9999px;
  background-color: #83005c;
}

li::marker {
    color: rgb(98 0 100);
    font-size: 30px;
}

#payingForSubDiv{

  position: relative;
  z-index: 0;
  opacity: 0.3;
  user-select: none;
}

#premiumContent{
  font-family: 'Times New Roman', Times, serif;
}

#logInToBuy{

display: none;
position: relative;
z-index: 1;
top: 180px;
transform: rotate(45deg);
margin-top: 10px;

}

#whenSubscribed{
  display: none;
}

#changeSubscription{

  margin-bottom: 20px;
}

#changeSubscriptionDiv{

  display: none;
}

.amountInput{
  
  font-size: 30px;
  font-family: 'Times New Roman', Times, serif;
  background: none;
  width: 577.5px;
  box-sizing: border-box;
  padding: 18px;
  outline: none;
  border: 3px solid black;
  box-sizing: border-box;
  border-radius: 20px;
  margin: 0 auto;
  margin-bottom: 20px;
  margin-top: 20px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.deleteAccountSub{
  
  font-size: 30px;
  font-family: 'Times New Roman', Times, serif;
  background: none;
  width: 577.5px;
  box-sizing: border-box;
  padding: 18px;
  border-radius: 20px;
  outline: none;
  border: 3px solid black;
  box-sizing: border-box;
  border-radius: 20px;
  margin: 0 auto;
  display: none;
  margin-top: 30px;
}

#changeSubscriptionPeriodActive{

  display: none;
  margin-top: 25px;
}

#cancelSubDiv{

  display: none;
  margin-top: 40px;
}


@media (max-width: 768px){

  .radioButton {

  width: 12px;
  height: 12px;
  border: 12px solid #000000;
}

.radioButton:checked {
  border: 12px solid #83005c;
}
  

  #bitcoinAdress, #ethAdress{

    margin-top: 0px;

  }

  #BitcoinLogoAndAddress, #ethereumLogoAndAddress{

    scale: 0.9;
  }
  



  #toggleButtonPay{

    transform: rotate(90deg);
    position: relative;
    scale: 0.75;
    left: 12px;
}
  .amountInput{

    width: 90vw;
  }

  #bitcoinLogo{

    height: 90px;
  }

  #butCoffeeThing{

    scale: 0.66;
  }

  #addFreeExpDiv{

    padding: 15px 17px 0px;
  }
  #buttonForClosingPay:hover{

    transform: scale(1.0);
  }

  
#buttonForClosingPay {
  right: 0px;

}

#mainTextMe{

  font-size: 24px;
  padding-left: 15px;
  padding-right: 15px;
}

#myPhoto{

  position: relative;
  width: 100vw;
  margin-left:0px;
  margin-bottom: -10px;
  border-radius: 0px 0px 35px 0px;
  left: 11%;
}
}