/*
Arquivo professormicro.css
Atualizado em 25/11/2021 18:55:16
*/

.li_config {list-style-type:none;border:solid 1px #f0f0f0;font-weight:normal;vertical-align:middle;}

.li_config:hover {background-color:#bcc0ff;cursor:pointer;}

.li_op_config  {background-color:#e0e0e0;list-style-type:none;cursor:pointer;font-family:Arial;
                font-size:14px}

.li_op_config:hover {background-color:#bcc0ff}

.div_op_config  {background-color:#e0e0e0;list-style-type:none;cursor:pointer;font-family:Arial;
                 font-size:14px}

.div_op_config:hover  {background-color:#bcc0ff}

.li_topo_config  {background-color:#e0e0e0;list-style-type:none;cursor:pointer;font-family:Arial;
                  font-size:14px;border-top:4px}

.li_topo_config:hover {background-color:#bcc0ff}

.hint_hover:hover {background-color:yellow;cursor:pointer;}

.carta {margin:5px;}
.carta:hover {cursor:hand} 

.selectTamMatriz:hover {cursor:pointer; border:thick solid blue;}

.botao_topo {font-size:16px;border:1px solid #808080;background-color:#d0d0d0;width:100%;}
.botao_topo:hover {cursor:hand;background-color:#bcc0ff;}
.div_topo {position:absolute;width:150px;}

.tab_botoes {table-layout:fixed;border-collapse:collapse;background-color:#d0d0d0;border:none;}
.tab_submenu {table-layout:fixed;border-collapse:collapse;text-align:left;background-color:#f0f0f0;}

.botoes_sub {width:100%;height:30px;border:none;text-align:left;font-size:16px;background-color:#f0f0f0;}
.botoes_sub:hover {cursor:hand;background-color:#bcc0ff;}

.div_submenu {border:1px solid black;}

td {border:none;margin:0px;padding:0px;}

.td_menu {border:1px solid black;}
.td_menu:hover {cursor:hand;}

.tab_list_cartas {table-layout:fixed;border-collapse:separate;}

.mensagens {position:absolute;left:100px;top:33%;width:500px;background-color:yellow;color:#000040;
            font-size:46px;border:solid 4px black;padding:2px;text-align:center;
            z-index:5000;visibility:hidden;}

.tab_msg {background-color:yellow;color:#000080;width:100%;
          font-size:38px;border:solid 2px black;padding:2px;text-align:center;}

.janela_escolha {position:absolute;visibility:hidden;left:100px;top:20%;width:290px;z-index:650;
                 border:4px solid #404060;padding:4px;background-color:#e0e0e0;}
                 
.tab_lin_col {table-layout:fixed;text-align:left;width:100%;}

.jan_def {visibility:hidden;position:absolute;font-size:26px;background-color:#d0d0d0;
          left:30%;top:30%;z-index:700;padding:4px;border:1px solid black;}

.tb_config {font-size:26px;table-layout:fixed;}

.im_verso {border:4px solid white;}
.im_verso:hover {border:4px solid black;cursor:hand;}

.td_grau_dif {text-align:center; border:1px solid black;background-color:#ffffc0;}
.td_nome_carta {text-align:center;border:1px solid black;background-color:#ffffc0;}

.td_tit_grau_dif {border:4px solid #d0d0d0;text-align:center;font-size:16px;}

.overlay_menu {position:absolute;width:650px;height:35px;
	             visibility:hidden;z-index:800;background-color:#e0e0e0;opacity:0.5;border:1px solid black;}

.mensagens_cmd {position:absolute;left:850px;top:880px;width:600px;height:100px;color:#000040;
                font-size:28px;padding:2px;text-align:left;
                z-index:500;display:none;}

.tab_msg_cmd {color:#000080;width:600px;left:0px;
              font-size:20px;padding:2px;text-align:center;}

.botao_msg_cmd {font-size:16px;border:1px solid black;background-color:#d0d0d0;}

.botao_msg_cmd:hover {cursor:hand;background-color:#808080;}

.imagem {border-radius:20px;}
.img_hov:hover {cursor:hand}

.movToStack {transition: left 1s linear, top 1s linear;} /* move matched cards to the stack at right  */

/* TOOLTIP:  */
.tooltip {
  position: relative;
  display: inline-block;
  border:none;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 240px;
  height: 50px;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 700;
  bottom: -220%; /* how far below the element the tip should appear */
  left: 20%; /* the tooltip should appear more to the left of the element */
  margin-left: -60px;
  opacity: 0;
  transition: opacity 1s;
  font-size:14px;
}
/* Tooltip arrowhead: */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: -17%; /* position the arrowhead touching the top of the tooltip */
  left: 10%; /* arrowhead near the left end of the tooltip */
  z-index:700;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent; /* arrowhead pointing up (sequence = down left up right)  */
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

#container {
  width: 1260px;
  height: 900px;
  position: relative;
  background: #e0e0e0;
}
.img_move {
  width: 200px;
  height: 200px;
  position: absolute;
  display:none;
}

.swell {
	transition: width 500ms, height 500ms, left 500ms, top 500ms;
	}

.td_titulo { border:1px solid #f0f0f0;}



/* ##########################################################################  */


/* STYLES TO FLIP THE CARDS BACK AND FORTH  */

.container
{
	/* Give some depth to the card */
	-webkit-perspective: 600;
	-moz-perspective: 600; /* para o Firefox (Mozilla) */
}


/* Applies 3D transform and transition effects to the card. The card has two states: regular and flipped.
   A card is in a regular state when there is an empty transform applied to it, and otherwise in a flipped
   state, where there is a rotational transformation applied. This class is used when the card is in the regular state.
   The "card flipped" class is used when the card is in the flipped state. 
*/
.card 
{
	width: 150px;
	height: 202px;
	
	/* Ensure that the card lives correctly in 3D space */
	-webkit-transform-style: preserve-3d; /* isso mantem as transforma??es ativas, ap?s a primeira */
	-moz-transform-style: preserve-3d;
	
	/* We apply this property to the card so it can smoothly flip between its sides */
  -webkit-transition-property: -webkit-transform;  
	/* Make the animation occur over a period of 1 second */
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-perspective: 600;
}


/* Applies the flip animation to the card */
.card.flipped
{
	/* Rotate the card 180 degrees along the y-axis. This animation allows the card to
	  toggle between its regular and flipped states. */
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}


/* Styles the card and hides its "back side" when the card is flipped */
.face 
{
	position: absolute;
	width: 150px;
	height: 200px;
	/* Give a round layout to the card */
	-webkit-border-radius: 10px;
	border-radius: 10px; /* aqui o Firefox e o IE n?o t?m prefixo */
	/* Drop shadow around the card */
    -webkit-box-shadow: 0px 4px 12px rgba(0, 0, 0, 1.0);
	/* Make sure that users will not be able to select anything on the card */
	
	/* We create the card by stacking two div elements at the exact same location. The back of the card 
	   is shown when we rotated the card 180 degrees along the y-axis. Setting this property to hidden
	   ensures that the "back side" is hidden when the card is flipped
	*/
	-webkit-backface-visibility: hidden;

}

/* Styles the front of the card */
.front 
{

}


/* Styles the back of the card */
.back 
{
	/* Ensure the "back side" is flipped already */
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}

/*------------ Styles for FIM DE JOGO: ------------------*/
.container_fim {
  display: flex;
  align-items: center;
  justify-content: center;
  width:30%;
}
.centered-element {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index:300;
}
.inout {
transition:500ms;
  width:250px;
  height:150px;
  border-radius: 15%;
}
/*-------------------------------------------------------*/