@import url('../css/dxconfont/font.css');


.mitimg{
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #dbdada;
  background-color: #6a9f15;
}

.mitapp{
  /*position: absolute!important;
  right: 11px!important;
  top: 12px!important;*/
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #3e8e41;
  border: 2px solid #2222;
}

.dropdown {
  position: absolute!important;
  right: 11px!important;
  top: 12px!important;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f162;
  min-width: /*160px*/auto;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  right: 0;
  z-index: 1;
  height: 250px;
  border-radius: 20px;
}

.drohrf {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.btrhover:hover {
  background-color: #ddd;
}

.show {
  display: block;
}



.tebouheader {
  position: fixed!important;
  z-index: 1!important;
  background-color: #202940!important;
  padding: 18px!important;
  width: 100%!important;
  box-sizing: border-box!important;
  color: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28)!important;
  height: 65px!important;
}

.titulolog {
  /*font-family: "Arial", serif!important;*/
  text-align: center!important;
  font-size: 30px!important;
  color: #f7f7f78f!important;
  margin: 0!important;
  padding: 0!important;
}

.btmenus {
  position: absolute!important;
  left: 5px!important;
  top: 11px!important;
  background-color: #202940!important;
  border: none!important;
  color: white!important;
  cursor: pointer!important;
  text-align: center!important;
  text-decoration: none!important;
  display: inline-block!important;
}

.btmenus:hover {
  background-color: #00000030!important;
  color: #fff8!important;
  border-radius: 11px!important;
}

.bt-listas {
  background-color: #323a4f!important;
  border: none!important;
  color: white!important;
  padding: 5px 5px!important;
  text-align: left!important;
  text-decoration: none!important;
  display: inline-flex!important;
  font-size: 16px!important;
  margin: 4px 0px!important;
  cursor: pointer!important;
  width: 100%!important;
  text-transform: uppercase!important;
}

/*modal*/
.btn-outline-success {
  background-color: #018934;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.bt-hover:hover {
  background-color: #555555!important;
  color: #fff8!important;
}
.modal {
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* Ocultar a janela modal */
  display: none;
  font-family: "Arial", serif;
}

.conteudo-modal {
  margin: 0 auto!important;
  max-width: 258px!important;
  background-color: #202940;
  color: #fff9;
  border-radius: 0px;
  left: 0;
  position: absolute;
  height: -webkit-fill-available;
}

.cabecalho-modal {
  padding: 4px 8px!important;
  display: flex!important;
  justify-content: space-between!important;
  background-color: #202940!important;
  color: #d1cecb!important;
  box-shadow: 0 0 4px rgb(0 0 0 / 14%), 0 4px 8px rgb(0 0 0 / 28%)!important;
}

.cabecalho-modal .cabecalho-titulo-modal {
  font-weight: bold!important;
  margin: 10px 0!important;
  font-size: 31px;
  text-transform: uppercase!important;
}

.cabecalho-modal .cabecalho-modal-fechar {
  padding: 18px 10px;
  cursor: pointer;
}

.corpo-modal {
  padding: 1px 8px 8px 8px!important;

  overflow: auto;
  height: 67%;

}

.rodape-modal {
  border-top: solid #eee 1px;
  padding: 3px;
  background-color: #202940;
  text-align: right;
  bottom: 0px;
  position: inherit;
  width: -webkit-fill-available;
}







* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  text-align: center;
}

body {
  background: #202940;
  background-image: url(../img/lkog.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size:contain;
  background-attachment: fixed;
}



textarea {
  opacity: 0;
  height: 0px;
  width: 0px;
  overflow: hidden;
  position: absolute;
  top: 300px;
  left: -1000px;
  z-index: -5;
}

.teboulabel {
  background: #4f7096;
  cursor: pointer;
  color: #fff;
  padding: 6px;
  display: inline-block;
  transition: all .5s;
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
}

.tlabe{
  position: fixed;
  top: 18px;
  right: 63px;
  z-index: 888;
}

.teboulabel:hover {
  background: #054;
  color: #fff;
}

textarea:focus+.teboulabel {
  background: #054;
  color: #054;
}

textarea:focus+.teboulabel:after {
  content: "🎹";
  color: #eee;
}

textarea:focus+label:before {
  content: "a, w, s, e, d, f, t, g, etc...";
  color: #111;
}



#full-keyboard {
  /*border: 20px solid black;*/
  /*border-top: 100px solid ;*/
  /*margin: 10px auto;*/
  /*width: 95%;*/
  max-width: 1350px;
  /*border-radius: 10px;*/
  /*box-shadow: 0px -2px 8px 4px rgba(0,0,0,0.25);*/
  overflow: auto;
  position: fixed;
    width: 100%;
}

.keyboard {
  position: relative;
  width: 50%;
  float: left;
  height: 302px;
  /*border: black 2px solid;*/
  border-left: none;
  border-right: none;
  /*background: #111;*/
  cursor: alias;
  
}

.white-key {
  float: left;
  background: #fff;
  width: 14.286%;
  height: 300px;
  border: 2px solid black;
  transition: border .1s;
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.65);
}

.white-pressed {
  height: 300px;
  border-width: 6px;
  border-style: solid;
  border-image: linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%;
  border-top: none;
  border-bottom: none;
  background: rgba(255, 255, 255, 1);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(245, 245, 245, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
  
box-shadow: 0px 3px 2px 0px rgba(0,0,0,0.2);
}

.black-key {
  position: absolute;
  float: left;
  width: 8%;
  height: 180px;
  border: 2px solid black;
  background: #212121;
  
  box-shadow: 0px 3px 12px 0px rgba(0,0,0,0.2);
}

.black-pressed {
  box-shadow: 0px 5px 21px -1px rgba(0, 0, 0, 0.75);
  background: rgba(19, 19, 19, 1);
  background: linear-gradient(to bottom, rgba(19, 19, 19, 1) 0%, rgba(0, 0, 0, 1) 35%, rgba(43, 42, 43, 1) 78%, rgba(43, 42, 43, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#131313', endColorstr='#2b2a2b', GradientType=0);
}

.keyboard .black-key:nth-child(2) {
  left: 10.5%;
}

.keyboard .black-key:nth-child(4) {
  left: 24.5%;
}

.keyboard .black-key:nth-child(7) {
  left: 53%;
}

.keyboard .black-key:nth-child(9) {
  left: 67.5%;
}

.keyboard .black-key:nth-child(11) {
  left: 81.5%;
}

@media all and (max-width: 650px) {
  .keyboard {
    width: 100%;
  }
  .hide-sm {
    display:none;
    max-height: 0px;
    max-width: 0px;
  }
}