/*General body*/
body {
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  margin: 0;

  /*Can't select text*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*invisible hr*/
hr {
  border: 0;
  height: 1px;
  background: rgba(193, 180, 180, 0);
}

/*Class used to show and hide elements*/
.invisible {display: none !important;}

/*Color selector*/
#color_container {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px 5px 0px;
}
.color_container_hide {
  top: -160px;
  margin: 0px 0px -130px 0px;

  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.color_container_show {
  top: 0px;
  margin: 0px 0px 30px 0px;

  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.color {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.color img{
  width: 40px;
  border-radius: 100px;
  opacity: 1;
  border: 5px solid rgba(0, 0, 0, 0);
}
.color_selected {
  border: 5px solid #f0ffff !important;
  opacity: 1 !important;
}
.color_selected_white {
  border: 5px solid black !important;

  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#arrow {
  font-size: 18pt;
  margin: 0;
  color: #ffffdd;
}
/*END Color selector*/
/*BACKGROUND COLORS*/
.white {background: #ffffdd; color: #4f4f4f; transition: all 0.5s;}
.blue  {background: #378bc6;  color: #ffffdd; transition: all 0.5s;}
.grey {background: #4f4f4f; color: #ffffdd; transition: all 0.5s;}
.red   {background: #af1d1d;   color: #ffffdd;transition: all 0.5s;}
.green {background: #5bd387; color: #ffffdd;transition: all 0.5s;}
.pink {background: #bc198c; color: #ffffdd; transition: all 0.5s;}
.yellow {background: #e5ad00; color: #ffffdd; transition: all 0.5s;}
/*more colors*/
.darkred {background: #700000; color: #ffffdd; transition: all 0.5s;}
.gray {background: #969696; color: #ffffdd; transition: all 0.5s;}
.darkblue {background: #000370; color: #ffffdd; transition: all 0.5s;}
.black {background: #000; color: #ffffdd; transition: all 0.5s;}
.darkgreen {background: #207244; color: #ffffdd; transition: all 0.5s;}
.purple {background: #4b00a4; color: #ffffdd; transition: all 0.5s;}
.orange {background: #ff6600; color: #ffffdd; transition: all 0.5s;}
/*gradient colors...*/
.gradient1 {background: linear-gradient(0deg, rgb(154, 7, 2) 0%, rgb(75, 3, 113) 80%, rgb(7, 4, 173) 89%); color: #ffffdd; transition: all 0.5s;}
.gradient1 {background: linear-gradient(0deg, rgba(63,94,251,1) 0%, rgba(171,80,166,1) 40%, rgba(252,70,86,1) 89%); color: #ffffdd; transition: all 0.5s;}
.gradient2 {background: linear-gradient(0deg, rgb(10, 10, 10) 0%, rgb(43, 52, 59) 40%, rgb(7, 48, 182) 89%); color: #ffffdd; transition: all 0.5s;}
.gradient3 {background: linear-gradient(0deg, rgb(254, 65, 65) 0%, rgb(186, 5, 5) 40%, rgb(0, 0, 0) 89%); color: #ffffdd; transition: all 0.5s;}
.gradient4 {background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 40%, rgb(248, 4, 4) 89%); color: #ffffdd; transition: all 0.5s;}
.gradient5 {background: linear-gradient(0deg, rgb(34, 118, 154) 0%, rgb(80, 171, 156) 40%, rgb(2, 90, 43) 89%); color: #ffffdd; transition: all 0.5s;}
.gradient6 {background: linear-gradient(0deg, rgb(154, 7, 2) 0%, rgb(75, 3, 113) 80%, rgb(7, 4, 173) 89%); color: #ffffdd; transition: all 0.5s;}
.gradient7 {background: linear-gradient(0deg, rgba(227,224,0,1) 33%, rgba(255,102,0,1) 65%); color: #ffffdd; transition: all 0.5s;}
/*END BACKGROUND COLORS*/

/*Life Counter*/
#counter {
  margin: 40px 0px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  justify-content: space-between;
  height: 475px;
}
#life {
  font-size: 12em;
  line-height: .7em;
  margin: 50px 0;
}
.button {
  font-size: 10em;
  line-height: 120px;
}
/*END Life Counter*/

/*Other Counters*/
#oc {
  display: flex;
  justify-content: space-between;
  margin: 0px 0 35px 0;
  font-size: 50pt;
}
.oc_text {
  font-size: 17pt;
  font-weight: 200;
}
.oc_num {
  line-height: 60px;
  width: 100px;
}
/*END Other Counters*/

/*DICES*/
#dices {
  margin-top: 50px;
}
#dices4_8, #dices10_20 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: 20px 0;
  height: 150px;
}
#dices4_8 p, #dices10_20 p {
  margin: 0;
  font-size: 17pt;
  font-weight: 200;
}
#dices4_8 div, #dices10_20 div, #dices4_8 div span, #dices10_20 div span {
  width:90px;
}
#dices4_8 div img, #dices10_20 div img  {
  width: 100%;
}
#dices4_8 span, #dices10_20 span {
  font-size: 48pt;
}
/*END DICES*/

/*SWITCH screen on*/
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #f0ffff;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #2196F3;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
/*END SWITCH screen on*/

/*BUTTONS*/
#buttons {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 0 10%;
}
#reset_and_switch {
  font-weight: 200;
  margin-bottom: 25px;
}
#reset_confirm {
  font-size: 1.5em;
  position:fixed;
  top: 0; bottom:0;left: 0;
  width: 100%;
  color: #f0ffff;
  background: rgba(0, 0, 0, 0.8);
}
#reset_message  {
  margin: 150px 0;
  padding: 0 30px;
}
#reset_message p {
  font-weight: 100;
}
.reset_all_counters_button, .library_button {
	background-color:#a73f2d;
  border: 4px solid #f0ffff;
  border-radius: 4px;
	color:#ffffff;
	font-size:17pt;
	padding: 9px 23px;
	text-decoration:none;
  margin-bottom: 10px;
}
.reset_button {
  padding: 3px 15px;
  font-size: 1.2em;
  border-radius: 4px;
  color: #f0ffff;
}
.library_button {
  background-color: #421E3E;
}
.reset_yes {
  border: 4px solid #a73f2d;
  background-color:#a73f2d;
}
.reset_no {
  border: 4px solid #f0ffff;
}

#players_select {
  display: flex;
  justify-content: space-between;
}
.player_mode {
  padding: 3px 15px;
  font-size: 1.2em;
  border-radius: 4px;
  border: 4px solid #f0ffff;
  color: #f0ffff;
  background: #2d60a7;
}
.not_selected { opacity: .4;}
/*END BUTTONS*/

/*2P MODE*/
#counter_1p, #counter_2p {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
#life_1p, #life_2p {
  font-size: 125pt !important;
  width: 70%;
  height: 250px;
}
#counter_1p { flex-direction: row;}
#counter_2p { flex-direction: row-reverse;}
#life_2p { /*reversed number*/
  -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
#life_2p, .button_2p, #life_1p, .button_1p{
  font-size: 70pt;
}
#min_max_2p {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
}
#space_1p, #space_2p {
  width: 24px;
}
/*END 2P MODE*/

/*Footer Credits*/
#footer {
  font-weight: 200;
  font-size: 11pt;
  text-align: center;
  line-height: 5pt;
  padding-bottom: 15px;
}
#footer img {
  width: 45px;
}
#footer .contact {
  color: inherit;
}
/*END Footer Credits*/


/*COMMANDER MODE STYLES*/
#commander-container .button {
  font-size: 50pt !important;
  line-height: 70px;
}
.commander_life {
  align-self: center;
  width: 100%
}
.group {
  display: flex;
  font-size: 60pt;
  margin-bottom: 70px;
}

.left, .right {
  display: flex;
  justify-content: center;
  width: 50%;
}
.left  {rotate: 90deg;}
.right {rotate: 270deg;}

.player-name {font-size: 11pt;}
/*END COMMANDER MODE*/