/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% + Drogafonte LTDA - 2020 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/*
===========================================================
    INDEX
===========================================================

    01) Reset
    02) Animations
    03) Utilities
    04) Typography
    05) Button
      5.1)Sidebar Buttons
    06) Card Login
    07) Content Alignment
    08) Sidebar
    09) Nabar
    10) Logo
    11) Pagination Log
    12) Forms
      12.1)Form Criar Folha
      12.2)Form Procurar/Editar Folha
      12.3)Form Procurar Folha
      12.4)Form Editar Folha
      12.5)Form Visualizar Folha   
    13) Responsive

===========================================================
    END INDEX
===========================================================


/* 01)RESET */

  html, body{
    font-family: 'Raleway', sans-serif;

  }
  .bg_primary{
  	background-color: #1d4d63;
  }


/* 02)ANIMATIONS */

  /* Simple CSS3 Fade-in-down Animation */
  .fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  @-webkit-keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  @keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }


/* 03)UTILITIES */

  .hidden{
    display: none;
  }

  .error{
    color: #FD1616;
    text-align: center;
    font-size: 18px;
  }

  .alert{
    margin: auto;
    margin-top: 15px;
    width: 85%;
  }

  .input-group-text span{
    background-color: #222;
    color: white;
    padding-top: 7px;
    position: absolute;
    left: 170px;
    top: 0px;
    width: 35px;
    height: 35px;
    text-align: center;
  }


/* 04)TYPOGRAPHY */

  .title{
    font-size: 18px;
  }

  .index-operacao{
    font-weight: bold;
    color: #1d4d63;
  }

  #title-create,#title-edit,#title-view,#title-nfr{
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    color: #031627;
  }

  #title-edit,#title-view{
    margin-top: 10px;
  }

  #title-log{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }

  .information{
    font-size: 14px;
    color: #515050;
  }


/* 05)BUTTON */

  .login_btn{
  	color: black;
  	background-color: #FFC312;
  	width: 100px;
  }

  .login_btn:hover{
  	background-color: #DBA901;
  	color: white;
  }

  #btn-search,#btn-save-create,#btn-search-page-edit, #btn-update, #btn-view-page, #btn-baixar-view, #btn-code, #btn-save-nfr{
    color: white;
  }

  #btn-edit_1,#btn-exit{
    color: white;
  }

  .btn-inline{
    background-color: #1d4d63;
    margin-top: 15px;
    color: white;
  }

  #ocr-edit,#btn-manual-edit{
    background-color: #1d4d63;
    color: white;
  }
  #ocr-edit:hover,#btn-manual-edit:hover{
    background-color: #008000;
  }

  /* 5.1)Sidebar Buttons */

    .btn-side-code,.btn-log,.btn-create,.btn-edit,.btn-side-search,.btn-log-notas,.btn-nfr {
      color: grey;
      display: block;
      text-decoration: none;
      font-size: 16px;
    }

    .btn-side-code:hover,.btn-log:hover,.btn-create:hover,.btn-edit:hover,.btn-side-search:hover,.btn-log-notas:hover,.btn-nfr:hover {
      color: #fff;
      background: rgba(255,255,255,0.2);
      text-decoration: none;
    }

    .btn-side-code:active,.btn-log:active,.btn-create:active,.btn-edit:active,.btn-side-search:active,.btn-log-notas:active,.btn-nfr:active{
      text-decoration: none;
    }


/* 06)Card Login */

  .card{
  	min-height: 290px;
  	margin-top: auto;
  	margin-bottom: auto;
  	width: 400px;
  	background-color: rgba(0,0,0,0.5) !important;
  }

  .card-header h3{
  	color: white;
  	display: inline;
  	margin-left: 5px;
  	text-align: center;
  }


/* 07)Content alignment */

  #page-content-wrapper {
    min-width: 100vw;
  }

  #wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
  }

  #form-search-view-page{
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  }

  .container-fluid{
    border: 1px solid #999;
    border-radius: 5px; 
    min-height: 57px;
    max-width: 600px;
    text-align: center;
    border-left: 5px solid #1d4d63;  
    line-height: 17px;  
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
    z-index: 1;
    margin-top: 20px;
  }

  .center{
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  }

  .no-border{
    border-width: 0px;
    width: 200px;
    box-shadow: none;
    margin-top: 90px;
  }

  .basic-content{
    padding-top: 7px;
    margin-top: 90px;
  }

/* 08)Sidebar */

  #sidebar-wrapper {
    min-height: 100vh;
    margin-left: -15rem;
    -webkit-transition: margin .25s ease-out;
    -moz-transition: margin .25s ease-out;
    -o-transition: margin .25s ease-out;
    transition: margin .25s ease-out;
  }

  #sidebar-wrapper .sidebar-heading {
    padding: 0.875rem 1.25rem;
    font-size: 1.2rem;
  }

  #sidebar-wrapper .list-group {
    width: 15rem;
  }

  .sidebar-heading{
    font-weight: bold;
    color: white;
  }


/* 09)Navbar */

  #buscar{
    width: 200px;
  }

  .navbar-expand-lg{ 
    min-height: 60px;
  }

  .mx-auto{
    margin-top: 17px;
  }

  #btn-responsive{
    position: absolute;
    right: 20px;
    top: 10px;
  }


/* 10)Logo */

  img{
    display: inline;
  }

  #icone{
    max-height: 50px;
    max-width: 60px;
  }

  #logo-home{
    height: 150px;
    width: 170px;
  }


/* 11)Pagination Log */

  .paginacao{
    height: 35px;
    display: flex;
    justify-content: center;
  }

  .numero{
    text-decoration: none;
    background: #1d4d63;
    text-align: center;
    padding: 3px 0;
    margin: 0 2px;
    width: 40px;
    color: #fff;
    margin-left: 3px;
    margin-top: 5px;
  }

  .numero:hover, .numativo, .controle:hover{
    background: #008000;
    color: white;
  }

  .controle{
    text-decoration: none;
    background: #1d4d63;
    text-align: center;
    padding: 3px 8px;
    margin: 0 3px;
    color: #fff;
    min-width: 54px;
    margin-left: 5px;
    margin-top: 5px;
  }

  td {                                          
      text-align: center;                                
  }    


/* 12)Forms */

  .form-group{
  	margin-top: 15px;
  }

  .input-group-prepend span{
  	width: 50px;
  	background-color: #37997d;;
  	color: black;
  	border:0 !important;
  }

  input:focus{
    outline: 0 0 0 0  !important;
    box-shadow: 0 0 0 0 !important;

  }

  /* 12.1)Form Criar Folha */

    .input-criar{
      width: 50%;
      margin-left: 25%;
      margin-top: 26px;
      border-color: #515050;
    }

    .input-criar:focus{
      border-color: #377EC2;
    }

    .file{
      width: 80%;
      margin-left: 18%;
    }

  /* 12.2)Form Procurar/Editar folha */

    #search-page-edit{
      width: 200px;
      margin-left: 5px;
    }

    #group-search-page-edit{
      margin: auto;
      margin-top: 8px;
    }

  /* 12.3)Form Procurar Folha */

    #search-view-page{
      width: 200px;
      margin-left: 5px;
    }

    #group-search-view-page{
      margin: auto;
      margin-top: 8px;
    }

  /* 12.4)Form Editar Folha */

    .input-editar,.input-editar1{
      width: 40%;
      margin-left: 20%;
      margin-top: 15px;
      border-color: #515050;
    }

    .input-editar:focus,.input-editar1:focus{
      border-color: #377EC2;
    }

    .group-edit-page{
      margin-top: 15px;
      margin-left: 20px;
    }

  /* 12.5)Form Visualizar Folha */

    .input-view,.input-view1{
      width: 50%;
      margin-left: 30%;
      margin-top: 15px;
      border-color: #515050;
    }

    .group-view-page{
      margin-top: 15px;
    }


/* 13)Responsive */

  @media only screen and (min-width: 700px) and (max-width: 1000px){
    .form-inline input[type=search]{
      width:150px !important;
    }
  }

  @media only screen and (min-width: 700px){
    .brand{
      margin-bottom: 15px;
    }
      #sidebar-wrapper {
          display: inline;
      }
  }

  @media only screen and (max-width: 700px){
    .form-inline input[type=search]{
      margin-left: 130px;
      width:150px !important; 
    }
    .navbar-default {
      max-height: 95px;
    }
  }

  @media (max-width: 1075px) {
      td{
        margin-left: 0px;
      }
  }

  @media (min-width: 1075px) {
      #sidebar-wrapper {
        display: inline;
      }
  }

  @media (max-width: 1075px){
    #div-exit{
      left: 85px;
    }
    #btn-show-menu{
      display: inline;
    }
  }

  @media (min-width: 768px) {
    #sidebar-wrapper {
      margin-left: 0;
    }

    #page-content-wrapper {
      min-width: 0;
      width: 100%;
    }

    #wrapper.toggled #sidebar-wrapper {
      margin-left: -15rem;
    }
  }

  @media (max-width: 991px){

    .mx-auto{
      display: none;
    }
    #btn-responsive{
      display: flex;
    } 

    #sidebar-wrapper {
      display: none;
    }
    #btn-hide-menu{
      display: none;
    }

  }

  @media (min-width: 991px){

    .navbar-expand-lg{
      height: 60px;
    }
    #navbarSupportedContent{
      display: none;
    }

  }

  @media (max-width: 577px){
    .input-view,.input-view1{
      margin-left: 25%;
    }
  }


    .modal-container {
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,.5);
      position: fixed;
      top: 0px;
      left: 0px;
      justify-content: center;
      align-items: center;
      display: flex;
    }


    @keyframes modal {
      from {
        opacity: 0;
        transform: translate3d(0, -60px, 0);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    .modal {
      animation: modal .3s;
    }

    .fechar {

      font-size: 1.2em;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      border: 4px solid white;
      background: #dc3545;
      color: white;
      font-family: "PT Mono", monospace;
      cursor: pointer;
      box-shadow: 0 4px 4px 0 rgba(0,0,0,.3);
      margin-left: 350px;
    }


/*size of the gray box inside legend*/
form#payment {
    background: white;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 400px;
    justify-content: center;
    align-items: center;
    padding: 15px;
    border: 1px solid #999;
    border-radius: 5px; 
    text-align: center;
    border-left: 5px solid #1d4d63;  
    line-height: 17px;  
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
}   

/*title in the legend/legend itself*/
form#payment legend {
    color:  #1d4d63;
    font-size: 18px;
    font-weight: bold;
}

/*gray box inside legend*/
form#payment ol li {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    line-height: 30px;
    list-style: none;
    padding: 5px 10px;
    margin-bottom: 2px;
}

/*input details/label*/
form#payment label {
    float: left;
    font-size: 13px;
    width: 63px;
}

form#payment input:not([type=radio]){
    width: 200px;
}

form#payment button {
    margin-top: -25px;
}

/* Style buttons */
.buttonload {
  background-color: #428bca; /* Green background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 12px 16px; /* Some padding */
  font-size: 16px /* Set a font size */
}

.add-row{
  margin-top: 1px;
}

#indicador{
  color: white;
}

.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin-left: 45%;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: black transparent black transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader {
  border: 4px solid #f3f3f3; /* Light grey */
  border-top: 4px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 15px;
  height: 15px;
  animation: spin 2s linear infinite;
}

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