/* START OF THE CODE FOR PLAY.HTML PAGE*/
/* Common styles for the logo */
#logo {
  object-fit: contain;
}

/* Styles for desktop */
@media only screen and (min-width: 768px) {
  #logo {
     width: 45%;
  }
}

/* Styles for mobile */
@media only screen and (max-width: 767px) {
  #logo {
     width: 35%;
  }
}

@media only screen and (min-width: 768px) {
  #logo2 {
     width: 20%;
  }
}

/* Styles for mobile */
@media only screen and (max-width: 767px) {
  #logo2 {
     width: 35%;
  }
}
/* END OF THE CODE FOR HOME.HTML PAGE*/


/* START OF THE CODE FOR PLAY.HTML PAGE*/
/* (A) SPEECH BOX */
.speech {
  /* (A1) FONT */
  font-size: 1.0em;

  /* (A2) COLORS */
  color: #EB5B5D;
  background: white;

  /* (A3) DIMENSIONS + POSITION */
  position: relative;
  padding: 30px;
  border-radius: 90px;
  max-width: 320px;
}

/* (B) ADD SPEECH "CALLOUT TAIL" */
/* (B1) USE ::AFTER TO CREATE THE "TAIL" */
.speech::after {
  /* (B1-1) ATTACH TRANSPARENT BORDERS */
  content: "";
  border: 20px solid transparent;

  /* (B1-2) NECESSARY TO POSITION THE "TAIL" */
  position: absolute;
}

/* (C2) LEFT */
.left.speech::after {
  /* (C2-1) LEFT TRIANGLE */
  border-right-color: white;
  border-left: 0;

  /* (C2-2) POSITION AT LEFT */
  left: -15px;
  top: 50%;
  margin-top: -20px;
}

/* WIDGET */
.widget-wrap {
  max-width: 500px;
  border-radius: 20px;
  background: transparent
}

/*The following is for the background of the display message*/
.resultMessageBox {
  padding: 20px;
  color: white;
}

/* The following is for the background of the incorrect display message*/
#secondMessageresult {
  color: #CE3825;
}

.game_numbers {
  color: #a53d38;
}

#hideTimer,
#showTimer {
  cursor: pointer;
  color: #EB5B5D;
}

/* play-game class is used for both play and home page */
.play-game {
  display: inline-block;
  outline: none;
  cursor: pointer;
  line-height: 20px;
  font-weight: 600 !important;
  border-radius: 8px;
  padding: 13px 24px;
  border: none;
  transition: box-shadow 0.2s ease 0s, -ms-transform 0.1s ease 0s, -webkit-transform 0.1s ease 0s, transform 0.1s ease 0s;
  background-image: radial-gradient(circle at center center, #ff385c 0, #e61e4d 27.5%, #e31c5f 40%, #d70466 57.5%, #bd1e59 75%, #bd1e59 100%);
  color: #fff;
}


#submitButton {
  display: inline-block;
  outline: none;
  cursor: pointer;
  line-height: 20px;
  font-weight: 600 !important;
  border-radius: 8px;
  padding: 13px 24px;
  border: none;
  transition: box-shadow 0.2s ease 0s, -ms-transform 0.1s ease 0s, -webkit-transform 0.1s ease 0s, transform 0.1s ease 0s;
  background-image: radial-gradient(circle at center center, #ff385c 0, #e61e4d 27.5%, #e31c5f 40%, #d70466 57.5%, #bd1e59 75%, #bd1e59 100%);
  color: #fff;
}

#close_operator_instruction_modal{
  background-image: radial-gradient(circle at center center, #ff385c 0, #e61e4d 27.5%, #e31c5f 40%, #d70466 57.5%, #bd1e59 75%, #bd1e59 100%);
  width: 100%;
  color: white;
}

.character_image_play {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #FEF1A8;
}


/* General styles for the select element */
select {
  outline: none;
  background-color: white;
  -webkit-appearance: none; /* Hide arrow in Safari */
  -moz-appearance: none; /* Hide arrow in Firefox */
  appearance: none; /* Hide arrow in other browsers */
  width: 100%;
  margin-top: 5px !important;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-position: right 10px center; /* Position the arrow */
}

/* Hide the arrow in IE */
select::-ms-expand {
  display: none;
}

/* Show the arrow only in Safari */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    select {
      -webkit-appearance: menulist; /* Show arrow in Safari */
      text-indent: 1px !important;
    }
  }
}

/* Set text-indent for Firefox */
@-moz-document url-prefix() {
  select {
    text-indent: 9px !important;
  }
}


.timertext {
  color: #EB5B5D;
}

/* Custom CSS for the blur effect */
.blur {
  filter: blur(10px);
  /* Increase the blur effect */
  transition: filter 0.3s ease;
}

.modal-content {
  border-radius: 10px;
  /* Optional: Add rounded corners to the modal */
}

.modal-backdrop.show {
  filter: blur(500px);
  /* Increase the blur effect for the background */
}

#rules_button {
  color: rgb(255, 165, 0);
}

.vertical_container {
  position: relative;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.bi-twitter-x {
  height: 16px;
  width: 16px;
}

circle {
  fill: transparent;
  stroke: black;
  stroke-width: 3;
}

.solid {
  stroke-dasharray: none;
}

.dashed {
  stroke-dasharray: 8, 8.5;
}

.dotted {
  stroke-dasharray: 0.1, 12.5;
  stroke-linecap: round;
}

.seventh {
  height: 100px;
  width: 100px;
  color: orange;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
}

.operator_select_desktop{
  height:80%;
}

#subtitle_p_class {
  font-size: 22px !important; 
  font-weight: 600 !important;
}
/* END OF THE CODE FOR PLAY.HTML PAGE*/


/* START OF THE CODE FOR INDEX.HTML PAGE*/

/* Styles for desktop */
@media only screen and (min-width: 768px) {
  .log-in {
     width: 45%;
  }
}

/* Styles for mobile */
@media only screen and (max-width: 767px) {
  .log-in {
     width: 50%;
  }
}

/* END OF THE CODE FOR INDEX.HTML PAGE*/