@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");
:root{
    --header-height: 2rem;
    --nav-width: 68px;
    --first-color: #383538;
    --first-color-light: #ffffff;
    --white-color: #F7F6FB;
    --body-font: 'Nunito', sans-serif;
    --normal-font-size: .9rem;
    --z-fixed: 100}
    *,::before,::after{
        box-sizing: border-box
    }
    body{
        position: relative;
        margin: var(--header-height) 0 0 0;
        padding: 0 1rem;
        font-family: var(--body-font);
        font-size: var(--normal-font-size);
        transition: .5s
    }
    a{
        text-decoration: none
    }
    .header{
        width: 100%;
        height: var(--header-height);
        position: fixed;top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0rem;
        background-color: #323132;
    /*    z-index: var(--z-fixed);transition: .5s */
    }
    .header_toggle{
        color: #ffffff;
        font-size: 1rem;
        cursor: pointer
    }
    .header_img{
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        border-radius: 50%;
        overflow: hidden
    }
    .header_img img{
        width: 40px
    }
    .l-navbar{
        position: fixed;
        top: 0;
        left: -30%;
        width: var(--nav-width);
        height: 100vh;
        background-color: var(--first-color);
        padding: .5rem .4rem 0 0;
      /*  transition: .5s; */
        z-index: var(--z-fixed)
    }
    .nav{
        height: 100%;
        display: flex;
        flex-direction: row;
        overflow: hidden
    }
    .nav-menu {
        flex-direction: column;
        justify-content: space-between;
    }
    .nav_logo, .nav_link{
        display: grid;
        grid-template-columns: max-content max-content;
        align-items: center;
        column-gap: 1rem;
          padding: .5rem 0 .5rem 1.5rem
    }
    .nav_logo{
        margin-bottom: 1.2rem;
        margin-top: -2px;
        padding-top: 0rem !important;
        padding-left: 1.5rem !important;
    }
    .nav_logo-icon{
        width: 25px;
        /* border: solid 2px #fff; */
        border-radius: 50%;
    }
    .nav_logo-name{
        color: var(--white-color);
        font-weight: 700
    }
    .nav_link{
        position: relative;
        color: var(--first-color-light);
        /*margin-bottom: 1.5rem;*/
        transition: .3s
    }
    .nav_link:hover{
        color: var(--white-color)}
    .nav_icon{
        font-size: 1.25rem
    }
        .showmenu{
            left: 0
        }
    .body-pd{
        padding-left: calc(var(--nav-width) + 1rem);
    }
    .active{
        color: var(--white-color)
    }
    .active::before{
        content: '';
        position: absolute;
        left: 0;
        width: 4px;
        height: 32px;
        background-color: var(--white-color)
    }
    .height-100{
        height:100vh
    }
    @media screen and (min-width: 768px){
        body{margin: calc(var(--header-height) + 1rem) 0 0 0;padding-left: calc(var(--nav-width) + 2rem)}
        .header{height: calc(var(--header-height) + 1rem);padding: 0 0rem 0 calc(var(--nav-width) + 2rem)}
        .header_img{width: 40px;height: 40px}.header_img img{width: 45px}
        .l-navbar{
            left: 0;
            padding: 1rem .4rem 0 0
        }
        .showmenu{
            width: calc(var(--nav-width) + 180px)
        }
        .body-pd{padding-left: calc(var(--nav-width) + 190px)}
    }

body{
    font-family: 'Montserrat', sans-serif;
}
.font-size-21{
    font-size: 1.16em;
}
.font-size-18{
    font-size: 1em;
}

input[type="text"]
{
    font-size: var(--normal-font-size);
}

.form-check-input:checked {
    background-color: #198754;
    border-color: #fff;
}

.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23198754'/%3e%3c/svg%3e");
    width: 2em;
    margin-left: -2.5em;
    background-image: var(--bs-form-switch-bg);
    background-position: left center;
    border-radius: 2em;
    transition: background-position .15s ease-in-out;
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cccccc'/%3e%3c/svg%3e");
  }

  .input-lg {
    font-size: 50px;
  }



.table th:nth-child(2),
.table td:nth-child(2) {

  white-space: normal!important;
}


.table td, .table th {
    background-color: #fff;
    white-space: nowrap;
    line-height: 1;
  }
.table  {
   overflow: scroll;
   font-size: .9em;
}


/* floating labels ------------------------------ */
.form-floating>label {
    padding: 1.15rem 0.75rem;
    font-size: .8rem;
}


/* carga img productos ------------------------------ */
.no-img-circle {
    border: solid 1px rgb(144, 144, 144);
    border-radius: 50%;
    width: 180px;
}


/* style input file select */
.file-select {
    position: relative;
    display: inline-block;
  }

  .file-select::before {
    background-color: #6c757d;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    content: 'Seleccionar'; /* testo por defecto */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .file-select input[type="file"] {
    opacity: 0;
    width: 200px;
    height: 42px;
    display: inline-block;
    border: 1px solid #67ecf1;
    background-color: #67ecf1;
    border-color: #67ecf1;
  }

  #src-file1::before {
    content: 'CARGAR IMAGEN *';
  }


  /* Filtrarr resultados busqueda */
  .resultadoBusqueda tr[visible='false'],
    .no-result{
    display:none;
    }

    .resultadoBusqueda tr[visible='true']{
    display:table-row;
    }


/* acordion */

    .acordion-100.show {
        width: 100%;
    }


    nav .navbar-nav li a{
      color: white;
      }

.nav-link
{
  color: white;
  }

.nav-link:hover{
  color: white;
  }