:root {
  /* --main-color: ; */
  --main-color: #393186;
  --second-color: #fedd0d;
  --btn-color: #d3bb1a;
  --funky-font: "Peralta", serif;
}

.field {
  display: flex;
  height: 40px;
  width: 33px;
  background-color: var(--main-color);
  margin: 3px;
  border-radius: 5px;
  color: var(--main-color);
  justify-content: center;

  flex-direction: row;
  font-size: 26px;
  align-items: center;

  font-family: "Peralta", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}

.letterfields {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.firstRowLettersField {
  display: flex;
  flex-direction: row;
}
.secondRowLettersField {
  display: flex;
  flex-direction: row;
}
.thirdRowLettersField {
  display: flex;
  flex-direction: row;
}
.fourthRowLettersField {
  display: flex;
  flex-direction: row;
}

.open {
  background-color: whitesmoke;
  -webkit-box-shadow: 0px 0px 0px 2px var(--main-color);
  -moz-box-shadow: 0px 0px 0px 2px var(--main-color);
  box-shadow: 0px 0px 0px 2px var(--main-color);
}

.gameContainer {
  margin: 1px;

  /* box-shadow: 0 4em 5em rgba(27, 8, 53, 0.2); */
}
.inputContainer 
{
      background:rgba(255, 255, 255, 0.95);
      width: 400px;
      padding: 25px;
      border-radius: 5px;
      border: solid 1px #cfcfcf;
      margin: 0 auto;
      position: absolute;
      box-shadow: 0 5px 5px rgba(27, 8, 53, 0.2);
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      z-index:20;
}

/* alphabet */

#alphabet {
  /* @include clear; */
  margin: 0;
  text-align: center;
}
.alpha_title {
  font-family: "Peralta", sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #37363a;
}

#alphabet button {
  display: inline-block;
  border-radius: 5px;
  margin: 5px;
  list-style: none;
  width: 42px;
  height: 38px;
  padding-top: 0px;
  background: white;
  /* color: base-color; */
  cursor: pointer;
  /* @include corners(5px); */
  border: solid 1px white;

  font-family: "Peralta", sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #37363a;

  &:hover {
    /* background: $base-color; */
    border: solid 1px grey;
  }
}

/*


navBar


*/
.controlPanel {
  /*
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 3rem;
      width: 100%;
      background-color: rgb(230, 230, 230, 1);*/
  min-height: 70px;
}
.lifeBar {
  margin: 3px 0 0 10px;
  width: 100px;
  height: 16px;

  /*
display: flex;
flex-direction: row;*/
}

.hearth {
  float: left;
  width: 19px;
  height: 16px;
  background: url("images/img/heart.png") no-repeat 50% 50%;
  margin: 0 1px 0 0;
}

.lost {
  background: url("images/img/heart_no.png") no-repeat 50% 50%;
}

.nameContainer {
}
.user {
  /*
margin-left: 10px;*/
  float: left;
  width: 30%;
}
.userName {
  /* padding-left: 5px; 
  align-items: center;
  justify-content: center;*/
  font-family: "Peralta", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #393186;
}
.nameWithHearth {
  /*
  display: flex;
  flex-direction: row;*/
}
.pointContainer {
  /*
      text-align: right;
      margin-right: 10px;*/
  float: right;
  width: 30%;
  text-align: right;
}

.category {
  float: left;
  width: 40%;
  background: #fff;
  text-align: center;
  font-family: "Peralta", sans-serif;
  font-weight: 400;
  font-size: 25px;
  color: #393186;
  text-transform: uppercase;
  /*
font-size: 30px;
background-color: #f9f9f9;
border-radius: 8px;
padding: 0 24px 0 24px;
border: #f9f9f9 1px solid;
color: var(--main-color);*/
}
.points {
  font-family: "Peralta", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #393186;
}
/* 


wheel style


*/
.subwheel {
  position: absolute;
  height: 110%;
  width: 110%;
  background-color: var(--main-color);
  z-index: -10;
  /* padding: 10px 10px 10px 10px; */
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 100%;
}
.arrow {
  position: absolute;
  height: 30px;
  width: 20px;
  background-color: hsl(247, 10%, 35%);
  z-index: 10;
  /* padding: 10px 10px 10px 10px; */
  transform: translate(-50%, -50%);
  top: 1%;
  left: 50%;

  background-color: rgba(57, 49, 134, 1);
  background-image: linear-gradient(
    180deg,
    rgba(57, 49, 134, 1) 50%,
    rgba(152, 176, 255, 1) 100%
  );

  clip-path: polygon(100% 0, 0 0, 50% 100%);
}

.wheelContainer {
  display: flex;
  height: 100%;
  justify-content: center;
  flex-direction: row;
  justify-content: space-evenly;
}
/*
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
*/

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  max-width: 26em;
  max-height: 65em;
  /* max-height: 65vh; */

  background: rgba(0, 0, 0, 0);

  /* position: absolute; */
  /* transform: translate(-50%, -50%); */
  /* top: 65%; */
  /* left: 50%; */
  /* margin: 3em; */
  padding-top: 20px;
  border-radius: 1em;
  /* box-shadow: 0 4em 5em rgba(27, 8, 53, 0.2); */
}
.container {
  position: relative;
  /* width: 100%;
  height: 100%; */
  height: 350px;
  min-height: 350px;
  width: 350px;
}

.imgContainer {
  position: relative;
  height: 100%;
  top: -50%;
  right: -50%;
  translate: (50%, 50%);
  z-index: 3;
}

#wheel {
  max-height: inherit;
  width: inherit;
  top: 0;
  padding: 0;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
#spin-btn {
  margin-top: 25px;
  /*
  height: 36px;
  width: 130px;
  border-radius: 20px;
  cursor: pointer;
  margin-top: 30px;
  justify-content: center;

  border: 0;
  background-color: #d3bb1a;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 26px;
  font-weight: 700;*/

  /* letter-spacing: 0.1em; */
  /* background: radial-gradient(#fdcf3b 50%, #d88a40 85%); */
}
/*
img {
  position: absolute;
  width: 4em;
  top: 50%;
  right: 50%;
   transform: translate(0); 
}*/
#final-value {
  font-size: 1.5em;
  text-align: center;
  margin-top: 12px;
  color: #202020;
  font-weight: 500;
}
.btnContainer {

}
/* 
@media screen and (max-width: 768px) {
  .wrapper {
    font-size: 12px;
  }
  img {
    right: -5%;
  }
} */

.disabled-btn {
  background-color: grey;
}

#chartjs-datalabels {
  transform: rotate(45deg);
}

/*

 popUp section

*/

.popupWindow {
  /* 
  z-index: 100;
  position: absolute;
  height: 100%;
  width: 100%;*/

}

.popMessageContainer 
{

}

.popupWindow {
  /* */
  position: static;
  background-color: white;
}

.popupTest {
  /* display: none; */
  z-index: 1000;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 30%;
  left: 50%;
  height: 180px;
  width: 250px;
  background-color: transparent;
}

.popupContainer 
{
  /* height: 100%; */
margin:0 auto;
}

.winContainer, .loseContainer
{
      background-color: var(--main-color);
      height: auto;
      text-align: center;
      padding: 25px;
      border-radius: 20px;
      color: white;
      
      font-family: "Peralta", sans-serif;
      font-weight: 400;
      font-size: 17px;
      width: 320px;
}    

.loseContainer input {
  border-radius: 10px;
  height: 18px;
  margin: 20px 0 40px;
  padding: 10px;
  font-size: 17px;
  color: #37363a;
  font-family: "Peralta", sans-serif;
  font-weight: 400;
  width: 240px;
}

.loseContainer p {
  font-family: "Peralta", sans-serif;
  font-weight: 400;
  font-size: 25px;
}

.playerContainer 
{
      display: block;
      background-color: var(--main-color);
      height: auto;
      padding: 10px 30px 30px;
      border-radius: 20px;
      color: white;
      text-align: center;
      width: 320px;
      margin:0 auto;
}
.playerContainer input {
  border-radius: 10px;
  height: 18px;
  margin: 20px 0 20px;
  padding: 10px;
  font-size: 17px;
  color: #37363a;
  font-family: "Peralta", sans-serif;
  font-weight: 400;
  width: 240px;
}

.playerContainer p {
  font-family: "Peralta", sans-serif;
  font-weight: 400;
  font-size: 25px;
}   




.closePopup {
  position: absolute;
  left: 85%;
  top: 5%;
  height: 40px;
  width: 40px;
}

.disablePopup {
  display: none;
}

/* 
  All purpose class
*/

.shadowElement {
  -webkit-box-shadow: 8px 8px 24px -5px rgba(66, 68, 90, 1);
  -moz-box-shadow: 8px 8px 24px -5px rgba(66, 68, 90, 1);
  box-shadow: 8px 8px 24px -5px rgba(66, 68, 90, 1);
}

.basicFont {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.btn-yellow {
  /*
  border-radius: 60px;
  font-family: "Inter", sans-serif;
  color: #ffffff;
  margin: 12px, 36px, 10px, 36px;
  width: 168px;
  height: 36px;
  background-color: var(--btn-color);

  box-shadow: 0px -4px 10px 1px rgba(254, 237, 13, 1);*/      
    
}

#playerValidationDiv {
  font-family: "Peralta", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  height:18px;
}

.showValue
{
      height:25px;
      font-family: "Peralta", sans-serif;
      font-weight: 400;
      font-size: 17px;    
      color: #393186;  
      margin-bottom: 10px;      
}

#wheelImg {
  position: absolute;
  width: 4em;
  top: 50%;
  right: 50%;
  height: 100%;
  width: 100%;

  transition: transform 2s ease-in-out;
}
.popupWindowAfter 
{
      /* display: none; */
      z-index: 1000;
      position: absolute;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      height: 180px;
      width: 370px;
      background-color: transparent;

}