body{
    background: #4b4a4a;
    color: #fff;
    height: 100%;
    width: 100%;
    display: none;
}

.loader {
  border: 16px solid #303030;
  border-radius: 50%;
  border-top: 16px solid #ff8400;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: white !important;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.panel.panel-login{
    cursor: pointer;
    background-clip: content-box;
    margin-top: 5%;
    margin-left: 10px;
    margin-right: 10px;

}

.page-container{
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: Segoe UI Light;
}

.panel-heading{
    border-radius: 0;
    background-color: #303030;
    text-align: center;
    font-size: 40px;
}

.fivelic-logo-login{
    margin: 20px;
    width: 300px;
}
.panel.panel-login .panel-body{
    background: #3e3e3e;
    color: #fff;
}

.panel-body-top .alert{
    max-width: 400px;
}

.panel-body img{
    margin-bottom: 20px;
}

.user-image-login{
    max-width: 30%;
    border-radius: 100%;
}

.panel-body-currentver{
    margin-top: 20px;
    font-size: 50px;
}

.panel-body-inputs{
    margin-top: 20px;
    font-size: 40px;
}

.panel-body-inputs input{
    text-indent: 50px;
    width: 70%;
    color: white;
    text-align: center;
    background-color: #303030;
    border-style: none;
}

.panel-body-inputs input:focus, .panel-body-inputs input.focus{
    outline-width: 0;
}

.panel-body-inputs button:focus, .panel-body-inputs button.focus{
    outline-width: 0;
}


.panel-body-inputs button{
    width: 60px;
    background-color: #4b4b4b;
    border-style: none;
    transition: 0.5s;
}

.panel-body-inputs button:hover{
    background-color: #393939;
    color: #ff8400;
}

.panel-body-password{
    display: none;
}

/* ------------------------------------------------------------------------------------------- */

.tabela-licenca-novo{
  display: inline;
  margin: 5px;
  padding-top: 2.5px;
  padding-bottom: 2.5px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: white;
  color: black;
  border-radius: 10px;
  font-weight: bold;
}

.tabela-licenca-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  margin-top: -3px !important;
}

.tabela-licenca-switch-switch input {display:none;}

.tabela-licenca-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff8080;
  -webkit-transition: .4s;
  transition: .4s;
}

.tabela-licenca-switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .tabela-licenca-switch-slider {
  background-color: #00b300;
}

input:focus + .tabela-licenca-switch-slider {
  box-shadow: 0 0 1px #00b300;
}

input:checked + .tabela-licenca-switch-slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.tabela-licenca-switch-slider.round {
  border-radius: 34px;
}

.tabela-licenca-switch-slider.round:before {
  border-radius: 50%;
}

.index-navbar{
  display: flex;
  height: 50px;
  background-color: #303030;
}

.index-navbar-text{
  font-size: 32px;
  width: 100%;
}

.index-navbar-text span{
  color: #ff8400;
}

.index-menu-switch{
  width: 50px;
  margin: 5px;
}

.index-menu{
  display: none;
}

.index-menu-switch button{
  width: 40px;
  height: 40px;
  background-color: #ff8400; /* Green */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
    font-size: 20px;
}

.tabela-licenca-opcional{
    display: none;
}

.index-buttonsarea{
    position: fixed;
    bottom: 0;
    z-index: 1;
}

.index-messagearea{
    position: fixed;
    z-index: 1;
}

.index-messagearea-messages{
  margin: 10px;
}

.index-buttonsarea-button{
  margin-bottom: 30px;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 22px;
}

.index-buttonsarea-button button{
  background-color: #ff8400;
  border-radius: 10px;
  padding: 0px 80px 0px 80px;
  border: 3px solid #ff9900;
  transition: 0.5s;

}

.index-buttonsarea-button button:hover{
  transition: 0.5s;
  background-color: #ff9900;
}

.index-menu ul{
  list-style: none;
  padding: 0;
}

.index-menu li{
  padding: 10px;
  padding-left: 20px;
  font-size: 20px;
  transition: 0.5s;
}

.index-menu li:hover{
  background-color: #4d4d4d;
  padding-left: 40px;
  cursor: pointer;
  transition: 0.5s;
}

.index-menu-cadastro{
  height: calc(100% - 50px);
  position: relative;
}

.index-menu-cadastro-buttons{
  width: 100%;
  bottom: 0;
}

.index-menu-cadastro-buttons button{
  font-size: 30px;
  margin-top: 10px;
  border-radius: 10px;
  width: 100%;
}

.index-menu-cadastro-btnsalvar{
  background-color: #00b300;
  border: 3px solid #00cc00;
  transition: 0.5s;
  font-family: Segoe UI;
}

.index-menu-cadastro-btnsalvar:hover{
  background-color: #33ff33;
  transition: 0.5s;
}

.index-menu-cadastro-btncancelar{
  background-color: #ff8080;
  border: 3px solid #ff9999;
  color: white;
  transition: 0.5s;
  font-family: Segoe UI;
}

.index-menu-cadastro-btncancelar:hover{
  background-color: #ffb3b3;
  transition: 0.5s;
}

.index-menu-dadosuser-btnsalvar{
  background-color: #00b300;
  border: 3px solid #00cc00;
  transition: 0.5s;
  font-family: Segoe UI;
}

.index-menu-dadosuser-btnsalvar:hover{
  background-color: #33ff33;
  transition: 0.5s;
}

.index-menu-dadosuser-btncancelar{
  background-color: #ff8080;
  border: 3px solid #ff9999;
  color: white;
  transition: 0.5s;
  font-family: Segoe UI;
}

.index-menu-dadosuser-btncancelar:hover{
  background-color: #ffb3b3;
  transition: 0.5s;
}

.index-menu-editar-btnsalvar{
  background-color: #00b300;
  border: 3px solid #00cc00;
  transition: 0.5s;
  font-family: Segoe UI;
}

.index-menu-editar-btnsalvar:hover{
  background-color: #33ff33;
  transition: 0.5s;
}

.index-menu-editar-btncancelar{
  background-color: #ff8080;
  border: 3px solid #ff9999;
  color: white;
  transition: 0.5s;
  font-family: Segoe UI;
}

.index-menu-editar-btncancelar:hover{
  background-color: #ffb3b3;
  transition: 0.5s;
}

.index-menu-editar-btnexcluir{
  background-color: #ff5151;
  border: 3px solid #ff8080;
  color: white;
  transition: 0.5s;
  font-family: Segoe UI;
}

.index-menu-editar-btnexcluir:hover{
  background-color: #ff8080;
  transition: 0.5s;
}

.index-menu-cadastro .input-group{
  margin-top: 10px;
}

.index-menu-cadastro-texto{
  font-size: 30px;
}

.index-licenca table tr td{
  border-style: none;
  padding-top: 15px;
}

.index-licenca table tr{
  border-bottom-width: 1px;
}

.index-licenca table tr:hover{
  transition: 0.5s;
  background-color: #303030;
    cursor: pointer;
}

.index-licenca table{
  height: 100%;
  overflow: auto;
  margin-bottom: 100px;
}

.index-licenca .tabela-pdvs{
  background-color: #303030;
  padding-left: 40px;
}

.index-licenca .tabela-pdvs td{
  padding: 0px;
}

.index-licenca .table-pdv{
  margin-bottom: 0px;
  background-color: #4b4a4a;
}

.index-licenca .table-pdv td{
  padding: 9px;
}

.tabela-licenca{
  max-height: 100%;
}

.tabela-licenca-switch{

}

.tabela-pdvs{

}

/* --------------------- Modal Inserção ----------------------- */
.modal-content{
  background-color: #595959;
}

.modal-header{
  background-color: #ff8400;
  border-bottom: 1px solid #ff9c33;
}

.modal-footer{
  background-color: #303030;
  border-top: 1px solid #3a3a3a;
}
/* ------------------------------------------------------------ */

.user-image{
  width: 80%;
  padding: 20px;
  border-radius: 100%;
}

.tabela-licenca-cabecalho{
width: 100%;
margin-top: 10px;
font-size: 25px;
}

.tabela-licenca-cabecalho span{
  width: 100%;
}

@media(min-width:767px) {
  .index-container{
    min-height: 100%;
    min-width: 100%;
  }

  .index-navbar-text{
    width: 300px;
  }

  .index-navbar-tools{
    width: calc(100% - 300px);
    text-orientation: upright;
    display: inline;
  }

  .index-navbar-tools-searchbar{
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #595959;
    width: calc(100% - 5px);
    border-radius: 5px;
  }


  .index-navbar-tools-pesquisa{
    font-size: 1.5em;
    border-style: none;
    width: calc(100% - 90px);
    display: inline-table;
    background-color: #595959 !important;
    color: white;
  }

  .index-navbar-tools-pesquisa::placeholder{
    color: #afafaf;
  }

  .index-navbar-tools-pesquisa:focus{
    outline: none !important;
  }

  .index-navbar-tools-searchicon{
    font-size: 1.8em;
    height: 35px;
    width: 35px;
    margin-left: 10px;
    margin-bottom: 5px;
    display: inline-table;
  }

  .index-main-container{
    height: calc(100vh - 50px);
    white-space: nowrap;
    overflow: auto;
  }

  .index-menu{
    display: inline;
    float: left;
    background-color: #595959;
    width: 300px;
    height: 100%;
    transition: 0.5s;
  }

  .index-menu-switch{
    display: none;
  }

  .index-licenca{
    float: left;
    background-color: #4b4a4a;
    width: calc(100% - 300px);
    height: 100%;
    -webkit-box-shadow: inset 0px 0px 300px -100px rgba(0,0,0,1);
    -moz-box-shadow: inset 0px 0px 300px -100px rgba(0,0,0,1);
    box-shadow: inset 0px 0px 300px -100px rgba(0,0,0,1);
    }

  .tabela-licenca-opcional{
      display: table-cell;
  }

  .index-messagearea{
    padding-left: 300px;
    width: calc(100% - 10px);
  }

  .index-buttonsarea{
    width: calc(100% - 300px);
  }

}

@media(max-width:767px) {
  .index-main-container{
    height: calc(100vh - 80px);
    white-space: nowrap;
    margin-top: 50px;
    overflow: auto;
  }

  .index-messagearea{
    width: 100%;
  }

  .index-buttonsarea{
    width: 100%;
  }

  .index-menu li{
  text-align: center;
  }

  .index-navbar{
    top: 0;
    z-index: 1;
    position: fixed;
    width: 100%;
  }

  .index-menu{
    margin-top: 50px;
    height: calc(100% - 60px);
  }

  .tabela-licenca{
    border-style: none;
  }


  .index-menu-cadastro{
  height: calc(100%);
  }

}