/*NEW*/

@font-face {
  font-family: 'Futura PT Book';
  src: url('../fonts/FuturaPT/FuturaPTBook.otf');
}

@font-face {
  font-family: 'Futura PT Medium';
  src: url('../fonts/FuturaPT/FuturaPTMedium.otf');
}

@font-face {
  font-family: 'Futura PT Bold';
  src: url('../fonts/FuturaPT/FuturaPTBold.otf');
}
html,
body {
  height: 100%;
}


body {
  font-family: 'Futura PT Book', Arial;
  background-color: #F1F1F1;
}


h1 {
  color: #ff4713;
  font-size: 35px;
  font-family: 'Futura PT Book'; }

h2 {
  color: #5e5e5e;
  font-size: 32px;
  font-family: 'Futura PT Book'; }

h3 {
  color: #5e5e5e;
  font-size: 29px;
  font-family: 'Futura PT Book'; }

h4 {
  color: #5e5e5e;
  font-size: 18px;
  font-family: 'Futura PT Book'; }

  button {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #ff4713;
    border: 1px solid #ff4713;
    color: #fff;
    padding: 10px 34px;
    text-align: center;
    font-family: 'Futura PT Book';
    font-size: 15px;
    text-transform: uppercase;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transition: all .5s; }

  button.trasparente {
    background-color: transparent;
    border: 1px solid #fff;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transition: all .5s; }

  button.negro {
    background-color: #000;
    border: 1px solid #000;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transition: all .5s; }

  button.blanco {
    background-color: #fff;
    border: 1px solid #7c7c7c;
    color: #7c7c7c;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transition: all .5s; }

  button.gris {
    background-color: #f6f6f6;
    border: 1px solid #7c7c7c;
    color: #7c7c7c;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transition: all .5s; }

/*LOGIN*/
    body.login {
      display: flex;
      align-items: top;
      padding-bottom: 40px;
      background: rgb(233,124,41);
      background: linear-gradient(-90deg, rgba(233,124,41,1) 0%, rgba(237,95,38,1) 100%);
    }

    .form-signin {width: 100%; max-width: 380px; padding: 0px; margin: auto;}
    .form-signin .checkbox {font-weight: 400;}
    .form-signin .form-floating:focus-within {z-index: 2;}
    .form-signin input[type="email"] {margin-bottom: -1px; border-bottom-right-radius: 0;border-bottom-left-radius: 0;}
    .form-signin input[type="password"] {/*margin-bottom: 10px; */border-top-left-radius: 0; border-top-right-radius: 0;}
    .card-code{ background-color: #F1F1F1 !important;}
    .form-signin {}
    .form-signin button[type="submit"]:hover{border:1px solid #ff4713; background-color: #fff; color: #ff4713}
/**/

/*CODE INPUT*/
.code-input {width: 100%; max-width: 380px; padding: 0px; margin: auto;}
.code-input input[type="text"] { color: #ff4713; font-size: 1.5rem;}
.code-input i.fa{ color:  #ff4713}
.card-code{ background-color: #F1F1F1 !important;}
#code-input.input-group input[type="text"]{ border-radius: 5px;}

/**/

  .bg-code{background-color: #ff4713 !important;}
  .txt-orange{ color: #ff4713;}
  .txt-28{ font-size: 28px}
  .txt-18{ font-size: 18px}
  .txt-uppercase{ text-transform: uppercase;}
  .devices-list{ }
    .devices-list a{ background-color: #fff; padding: 1.5rem; /*border-radius: 8px; */text-decoration: none; color:#63666A; text-transform: uppercase;}
    .devices-list a:hover,
    .devices-list a.active{
      background-color: #ff4713; color: #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.3)}
    .devices-list .devices-name{}
    .devices-list .devices-name span{ font-weight: bold; padding-right: 1.5rem;}
    .devices-list .devices-name p{ margin: 0; font-size: 0.8rem; text-transform: none;}

    .devices-list .device-delete{ font-size: 0.90rem;}


    .devices-list-v2{}
      .devices-list-v2 .btn-group > .btn{ background-color: #fff;padding: 1.5rem; color:#63666A; }
      .devices-list-v2 .btn-group > .btn:nth-child(1){ margin-right: 5px;}
      .devices-list-v2 .btn-group > .btn:nth-child(2){ margin-left: 5px;}
      .devices-list-v2 .btn-group > .btn:hover{background-color: #ff4713; color: #fff;box-shadow: 0 4px 8px rgba(0,0,0,0.3)}
      .devices-list-v2 .btn-group *:focus{  outline: none;}

      .devices-list-v2 .btn-devices-edit{ text-align: left;}
      .devices-list-v2 .btn-devices-delete{text-align: right;font-size: 0.90rem;}

      .devices-list-v3{}
        .devices-list-v3 > *{color:#63666A; }
        .devices-list-v3 .devices-name{background-color: #fff;border-radius: 5px; text-transform: uppercase;padding: 1.5rem; margin-right: 10px;}
        .devices-list-v3 .btn{padding: 1.5rem;background-color: #fff;}
        .devices-list-v3 .btn:hover{background-color: #ff4713; color: #fff;box-shadow: 0 4px 8px rgba(0,0,0,0.3)}
        .devices-list-v3 .btn:nth-child(1){margin-right: 10px;}
/*
.btn-secondcolor{background-color: #fff;border:1px solid #c4d600;padding: 1rem; color:#63666A; margin-bottom: 3rem; text-transform: uppercase;}
.btn-secondcolor span{ margin-left: 1rem}
  .btn-secondcolor:hover{background-color: #c4d600;padding: 1rem; border-color: transparent; color: #fff;box-shadow: 0 4px 8px rgba(0,0,0,0.3)}
*/

  .btn-secondcolor{background-color: #fff;border:1px solid #981d97;padding: 1rem; color:#981d97; margin-bottom: 3rem; text-transform: uppercase;}
  .btn-secondcolor span{ margin-left: 1rem}
    .btn-secondcolor:hover{background-color: #981d97;padding: 1rem; border-color: transparent; color: #fff;box-shadow: 0 4px 8px rgba(0,0,0,0.3)}

.modal h1 b, .modal h1 strong { color:#63666A;}
.modal .link-orange{color: #ff4713;}

/*MODAL BUTTON*/
.modal .btn-group .btn, .btn-group .btn  { background-color: #fff;padding: 1rem; color:#63666A; }
.modal .btn-group .btn:nth-child(1), .btn-group .btn:nth-child(1){ margin-right: 5px;}
.modal .btn-group .btn:nth-child(2), .btn-group .btn:nth-child(2){ margin-left: 5px;}
.modal .btn-group .btn-outline-orange, .btn-group .btn-outline-orange{ border:1px solid #ff4713; }
.modal .btn-group .btn-outline-orange:hover, .btn-group .btn-outline-orange:hover{background-color: #ff4713; border-color: transparent; color: #fff;box-shadow: 0 4px 8px rgba(0,0,0,0.3)}
.modal i.fa{ color:  #ff4713}
.modal .btn-group .btn-orange, .btn-group .btn-orange  { 
  border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #ff4713;
    border: 1px solid #ff4713;
    color: #fff;
    padding: 10px 34px;
    text-align: center;
    font-family: 'Futura PT Book';
    font-size: 15px;
    text-transform: uppercase;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transition: all .5s; }

    :root {
      --svg-eye-open: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj4gPHBhdGggZD0iTTEyIDRDNCA0IDEgMTIgMSAxMkMxIDEyIDQgMjAgMTIgMjBDMjAgMjAgMjMgMTIgMjMgMTJDMjMgMTIgMjAgNCAxMiA0IHogTSAxMiA3QzE0Ljc2MSA3IDE3IDkuMjM5IDE3IDEyQzE3IDE0Ljc2MSAxNC43NjEgMTcgMTIgMTdDOS4yMzkgMTcgNyAxNC43NjEgNyAxMkM3IDkuMjM5IDkuMjM5IDcgMTIgNyB6IE0gMTIgOSBBIDMgMyAwIDAgMCA5IDEyIEEgMyAzIDAgMCAwIDEyIDE1IEEgMyAzIDAgMCAwIDE1IDEyIEEgMyAzIDAgMCAwIDEyIDkgeiIgZmlsbD0iIzIxMjUyOWJmIiAvPjwvc3ZnPg==");
      --svg-eye-close: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj48cGF0aCBkPSJNNC4yMDcwMzEyIDIuNzkyOTY4OEwyLjc5Mjk2ODggNC4yMDcwMzEyTDUuMDc2MTcxOSA2LjQ5MDIzNDRDMi4xOTkzNDQ3IDguODM4MjAwNSAxIDEyIDEgMTJDMSAxMiA0IDIwIDEyIDIwQzE0LjA3NTU2OCAyMCAxNS44MDYwMDMgMTkuNDU0NzMgMTcuMjQyMTg4IDE4LjY1NjI1TDE5Ljc5Mjk2OSAyMS4yMDcwMzFMMjEuMjA3MDMxIDE5Ljc5Mjk2OUw0LjIwNzAzMTIgMi43OTI5Njg4IHogTSAxMiA0QzEwLjc4OCA0IDkuNzA1Nzk2OSA0LjE5OTcxODcgOC43MTY3OTY5IDQuNTExNzE4OEwxMS4yNzczNDQgNy4wNzIyNjU2QzExLjUxNDM0NCA3LjAzNzI2NTYgMTEuNzUzIDcgMTIgN0MxNC43NjEgNyAxNyA5LjIzOSAxNyAxMkMxNyAxMi4yNDcgMTYuOTYyNzM0IDEyLjQ4NTY1NiAxNi45Mjc3MzQgMTIuNzIyNjU2TDIwLjM1NzQyMiAxNi4xNTIzNDRDMjIuMjA0NDIyIDE0LjEwMjM0NCAyMyAxMiAyMyAxMkMyMyAxMiAyMCA0IDEyIDQgeiBNIDcuODMzOTg0NCA5LjI0ODA0NjlMOS4yOTY4NzUgMTAuNzEwOTM4QzkuMTA4MTU5NSAxMS4xMDA4MjkgOSAxMS41MzY1NjYgOSAxMkM5IDEzLjY1NyAxMC4zNDMgMTUgMTIgMTVDMTIuNDYzNDM0IDE1IDEyLjg5OTE3MSAxNC44OTE4NCAxMy4yODkwNjIgMTQuNzAzMTI1TDE0Ljc1MTk1MyAxNi4xNjYwMTZDMTMuOTYyMDM5IDE2LjY4OTc1OCAxMy4wMTkyNzEgMTcgMTIgMTdDOS4yMzkgMTcgNyAxNC43NjEgNyAxMkM3IDEwLjk4MDcyOSA3LjMxMDI0MTUgMTAuMDM3OTYxIDcuODMzOTg0NCA5LjI0ODA0NjkgeiIgZmlsbD0iIzIxMjUyOWJmIiAvPjwvc3ZnPg==");
    }
    .btn-toggle-password-visibility {
      width: 21px;
      height: 21px;
      background-image: var(--svg-eye-close);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
    }
    
    /* .input-group-sm .btn-toggle-password-visibility {
      width: 16px;
      height: 16px;
    } */
    
    /* .form-floating+.input-group-text .btn-toggle-password-visibility,
    .input-group-lg .btn-toggle-password-visibility {
      width: 28px;
      height: 28px;
    } */
    
    .input-group:has(input:not([type="password"])) .btn-toggle-password-visibility {
      background-image: var(--svg-eye-open);
    }
    
    .input-group:has(input.is-valid) .input-group-text {
      border-color: #198754;
    }
    
    .input-group:has(input.is-invalid) .input-group-text {
      border-color: #dc3545;
    }
    .was-validated .form-control:valid {
      background-image: none;
    }
    .was-validated .form-control:invalid {
      background-image: none;
    }