@font-face {
    font-family: 'Neuland';
    src: url('fonts/neulandgrotesk-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'BlogScript';
    src: url('fonts/BlogScript.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'Supercell';
    src: url('fonts/Supercell.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }

  *,body,p,a,div,span,h1,h2,h3,h4,h5,h6 {
    font-family: 'Neuland', sans-serif;
    font-size:1em;
    color:#fff;
  }
  .blogscript{font-family: 'BlogScript', sans-serif;}
  .supercell{font-family: 'Supercell', sans-serif;}
  .text-white{color:#fff}
  .text-yellow{color: #f9cc15;}
  .text-black{color: #000;}
  .text-start{text-align:left;}
  .text-center{text-align:center;}
  .text-left{text-align:left;}
  .m-auto{margin:auto;}
  .fs-15{font-size:1.5em;}
  .fs-14{font-size:1.4em;}
  .fs-13{font-size:1.3em;}
  .fs-12{font-size:1.2em;}
  .fs-11{font-size:1.1em;}
  .fs-10{font-size:1em;}
  .fs-9{font-size:0.9em;}
  .fs-8{font-size:0.8em;}
  .fs-7{font-size:0.7em;}
  .p-0{padding:0px !important;}
  .d-block{display:block;}
  .d-none{display:none;}
  .d-flex{display:flex;}
  .align-items-center{align-items: center;}
  .w-100{width:100%;}
  .h-100{height:100vh;} 
  .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1* var(--bs-gutter-y));
    margin-right: calc(-.5* var(--bs-gutter-x));
    margin-left: calc(-.5* var(--bs-gutter-x));
  }
  [class^="col"], [class^="col"]>*,[class*="grid"]>* {
    padding-top: .5rem;
    padding-bottom: .75rem;
    background-color: rgba(var(--bd-violet-rgb), 0.15);
    border: 1px solid rgba(var(--bd-violet-rgb), 0.3);
  }
  .col-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  td{text-align:center;}
  .user-ranking{background:#fe036c;}
  .btnRose{
  	color:#fff;
	border:solid 2px #fff;
	border-radius:7px;
	background:#fe036c;
	padding:10px 30px;
	text-decoration:none;
  }
  .col-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .form-control {
    display: block;
    width: 100%;
    padding: .3rem .75rem;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-clip: padding-box;
    border: solid 1px #eee;
    border-radius: 5px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
 }
 /* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 5px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}