.title h1 {
    font-size: 3.5em;
    color: #A8AD00;
  }
  
  .bar {
    height: .25em;
    width: 100%;
    background: #fff;
    margin: 1.5em auto 0;
  }
  
  .main {
  /*  background: $trans-orange;*/
    min-height: 50vh;
    position: relative;
    top: 20vh;
  }
  
  input[type=text], input[type=password] {
    font-size: 1.75em;
    padding: .55em;
    width: 100%;
    margin-bottom: 1em;
    
  
    &::placeholder {
     color: #aaaaaa;
     position:relative;
     padding:0;
     transition: all 0.5s ease;
    }
  
    &:hover::placeholder, &:focus::placeholder {
      padding-top: 3em;
    }
  }
  
  .form {
    h2 {
      text-align: left;
      font-weight: 100;
      color: #fff;
      margin-bottom: .5em;
    }
    h4 {
      font-weight: 100;
      color: #fff;
      margin-top: 2em;
    }
  }
  
  .login {
    color: rgba(255, 255, 255, 1);
    width: 6em;
    font-family: $font;
    font-weight: 100;
    font-size: 1.75em;
    border: 1px solid rgba(255, 255, 255, .75);
    background: transparent;
    transition: all 200ms ease-in;
    border-radius: .65em;
  
    &:hover, &:focus {
      background: #fff;
      color: $orange;
      border: none;
    }
  }
  
  .signup {
    @extend .login;
    font-size: 1em;
    position: relative;
    left: 1.5em;
  }
  
  // base
  h1, h2 h3, h4, h5, h6, input {
    font-weight: 100;
  }
  
  #containerLogin {
    position: absolute;
      top: 30px;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: space-around;
  }
  /* #loginBtn{
    
           width: 112%;
           text-align: center;
           background-color: #003057;
           padding: 18px;
           text-decoration: unset;
  } */
  #paga{
  
           width: 107%;
           text-align: center;
           background-color: #003057;
           padding: 18px;
           text-decoration: unset;
         
  }
  #paga:hover{
    background-color: rgb(24, 53, 27) !important;
  }
  /* #loginBtn:hover{
    background-color: rgb(24, 53, 27) !important;
  } */
  
  .flexcontainer > div {
    flex: 1; /*grow*/
    text-align: center;
    color: black;
    padding: 100px;
    border-radius: 95px;
    
  }
  .flexcontainera > div {
    flex: 1; /*grow*/
    text-align: center;
    color: black;
    padding-right: 90px;
    padding-left: 60px;
    padding-bottom: 30px;
    border-radius: 95px;
    
    margin-bottom: 20px;
  }
  

  
  
  
  
  .fa-file-invoice-dollar{
    font-size: 100px;
    color: #fff;
  }
  
  .marginTo120{
    margin-top: 70px;
  }
  
  .font-text-fac{
    font-weight: bold;
    font-size: 1.5em;
  }
  
  
  @media (max-width: 600px) {
    .toxicbox{
      display: flex;
      justify-content: center;
    }.flexcontainer > div{
      padding: 80px;
    }
  
    #containerLogin{
      top: 30px;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
    }
  
    .marginTo120 {
      margin-top: 31px;
  }
  
  .verTitleDos{
    display: block !important;
  }
  
  .verTitle{
    display: none !important;
  }
  
  }
  
  @media (max-width: 671px) {
     .verticalLine{
        display: none !important;
     }
  }
  
  .verTitle{
    display: block;
  }
  
  .verTitleDos{
    display: none;
  }
  
  .inpAll{
    width: 70% !important;
    font-size: medium !important;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  .inpAll:focus{
     outline:none;
     border: 1px solid green;
     box-shadow: 0 0 5px rgba(0, 255, 0, 1);
  }
  
  .input-index{
      font-size: 1.75em !important;
      padding: .55em !important;
      width: 100% !important;
      margin-bottom: 1em !important;
  }
  
  .input-index:focus{
     outline:none;
     border: 1px solid green;
     box-shadow: 0 0 5px #A8AD00;
  }
  
  .verticalLine { 
    border-left: thick solid #A8AD00; 
    height: 420px !important;
  }
  
  
  table{
      background-color: white;
      text-align: left;
      border-collapse: collapse;
      width: 100%;
  }
  
  th, td{
      padding: 20px;
  }
  
  thead{
      background-color: #003057;
      border-bottom: solid 5px #A8AD00;
      color: white;
  }
  
  tr:nth-child(even){
      background-color: #ddd;
  }
  
  tr:hover td{
      background-color: #fff;
      color: rgb(3, 0, 0);
  }
  
  
  .contentFactAlert {
      text-align: center;
      overflow-y: scroll;
      max-height: 30em;
  }
  button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 100%;
    vertical-align: baseline;
    font-family: inherit;
    color: inherit;
    -webkit-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}
@media (min-width: 1400px) { 
  .flexcontainera > div {
    flex: 1; /*grow*/
    text-align: center;
    color: black;
    padding-right: 120px;
    padding-left: 90px;
    padding-bottom: 50px;
    padding-top: 20px;
    border-radius: 95px;
    
    margin-bottom: 20px;
  }
}