:root {
  --sp-dark:  #003DA5;
  --sp-pink:  #0075b9;
  --sp-blue:  #0075b9;
  --sp-dark-2: #002780;
  --sp-pink-2: #1a7db6;
  --sp-blue-2: #77c0eb;
  --sp-text-light: #ffffff;
  --sp-bg: #0075b9;
  /* legacy aliases kept for any remaining references */
  --os-ink: #003DA5;
  --os-cream: #FFFDE7;
  --os-cream-strong: #FFF9C4;
  --sp-red: #E8400C;
}

body{

font-family: 'Paytone One', sans-serif !important;



background: var(--sp-bg);

padding-top: 20px;

color: var(--sp-dark);


}
.checkbox label{

  color: var(--sp-dark);


}
form#Tombola {

  margin-top: 0px;

  margin-bottom: 20px;
  background: var(--sp-text-light);
  padding: 10px;
  border-radius: 12px;
  animation: formSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;


}

@keyframes formSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Hide scrollbar for Chrome, Safari and Opera */

.container::-webkit-scrollbar {

  display: none;

}



/* Hide scrollbar for IE, Edge and Firefox */

.container {

  -ms-overflow-style: none;  /* IE and Edge */

  scrollbar-width: none;  /* Firefox */

}

.text-justify {

    text-align: justify;

}

.blacktext{

  color: var(--sp-dark)



}

.oldspice-ar-page {

  text-align: left;
}

.oldspice-ar-page .form-control,
.oldspice-ar-page .input-group-addon,
.oldspice-ar-page .checkbox,
.oldspice-ar-page .modal-body,
.oldspice-ar-page .modal-title,
.oldspice-ar-page .small {
  /* text-align: left; */
}

.oldspice-ar-page .input-group-addon {
  line-height: 1.7;
}

.oldspice-title {
  display: block;
  width: 100%;
  margin: 10px 0px 20px 0px;
  padding: 10px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, #FFF 0%, #FFF 100%);
  color: var(--sp-bg);
  font-weight: bold;
  font-size: 30px;
  letter-spacing: 0.4px;
  text-align: center;
  border: 3px solid var(--sp-pink);
  box-shadow: 0 0 0 1px var(--sp-pink-2), 0 0 0 6px var(--sp-pink), 0 0 0 7px var(--sp-pink), 0 14px 12px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 8px var(--sp-pink);
  animation: titleDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes titleDrop {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.form-control {
  border: 2px solid rgba(221, 221, 221, 0.65);
  background: #ffffff;
  color: var(--sp-dark);
}

.form-control:focus {
  border-color: var(--sp-pink);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.22);
}

.input-group-addon {
  background: rgba(240, 234, 208, 0.18);
  color: var(--sp-dark);
  border: 1px solid rgba(141, 141, 141, 0.45);
}

.checkbox a {
  color: var(--sp-dark);
}

.modal-content {
  background: #FFFDE7;
  border: 2px solid var(--sp-pink);
}

.modal-header {
  background: linear-gradient(135deg, var(--sp-dark) 0%, var(--sp-dark-2) 100%);
  color: var(--sp-text-light);
}

.modal-header .close {
  color: var(--sp-text-light);
  opacity: 0.95;
}

.modal-footer .btn-default {
  background: linear-gradient(135deg, var(--sp-pink) 0%, var(--sp-pink-2) 100%);
  border: 0;
  color: #fff;
  box-shadow: 0 4px 12px rgba(249, 168, 37, 0.45);
}

#btnParticiper{

	cursor: pointer;
  border: 0;
  outline: 0;



}

.participation-button {
  min-width: 260px;
  max-width: 100%;
  padding: 16px 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sp-pink) 0%, var(--sp-pink-2) 46%, var(--sp-pink) 100%);
  box-shadow: 0 14px 30px rgba(0, 61, 165, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.25);
  color: var(--sp-text-light);
  font-family: 'Paytone One', sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  text-transform: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.participation-button:hover,
.participation-button:focus {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0, 61, 165, 0.42), inset 0 2px 0 rgba(255, 255, 255, 0.32);
  filter: saturate(1.08);
  color: #fff;
}

.participation-button:active {
  transform: translateY(1px);
  box-shadow: 0 10px 18px rgba(0, 61, 165, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.2);
}

.participation-button[disabled] {
  opacity: 0.75;
  cursor: wait;
}

@media (max-width: 767px) {
  .oldspice-title {
    font-size: 19px;
    padding: 8px 12px;
  }

  .participation-button {
    min-width: 100%;
    font-size: 21px;
    padding: 14px 24px;
  }
}

.is-error{

	border-color: #ff0000;

}

.loader {

position : fixed;

z-index: 9999;

background: rgba(0, 61, 165, 0.88);

background: radial-gradient(circle, rgba(255, 215, 0, 0.92) 0%, rgba(0, 61, 165, 0.96) 100%);

top : 0px;

left : 0px;

height : 100%;

width : 100%;



}

#loading {

  position: absolute;

  left: 50%;

  top: 50%;

  z-index: 1;

  width: 150px;

  height: 150px;

  margin: -75px 0 0 -75px;

  border: 16px solid var(--sp-blue);

  border-radius: 50%;

  border-top: 16px solid var(--sp-dark);

  width: 120px;

  height: 120px;

  -webkit-animation: spin 1s linear infinite;

  animation: spin 1s linear infinite;

}



@-webkit-keyframes spin {

  0% { -webkit-transform: rotate(0deg); }

  100% { -webkit-transform: rotate(360deg); }

}

.showSuccess{

	padding-top: 70px;

}

.showSuccess img{

	max-width: 90%

}



@keyframes spin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}



/* Add animation to "page content" */

.animate-bottom {

  position: relative;

  -webkit-animation-name: animatebottom;

  -webkit-animation-duration: 1s;

  animation-name: animatebottom;

  animation-duration: 1s

}



@-webkit-keyframes animatebottom {

  from { bottom:-100px; opacity:0 }

  to { bottom:0px; opacity:1 }

}



@keyframes animatebottom {

  from{ bottom:-100px; opacity:0 }

  to{ bottom:0; opacity:1 }

}





.image-clignote  {

   animation-duration: .9s;

   animation-name: clignoter;

   animation-iteration-count: infinite;

   transition: none;

}



@keyframes clignoter {

  0%   { opacity:1; }

  40%   {opacity:0; }

  100% { opacity:1; }

}

.modal-title {
  color: #ffffff;
}