@import url("https://fonts.googleapis.com/css2?family=:wght@400;600;700&display=swap");
:root{
    --bs-primary: #42c8f3;
  --bs-primary-rgb: 124, 43, 40;
 --bs-font-sans-serif: "", sans-serif;
  --header-height: 2rem;
  --nav-width: 68px;
  --first-color: #01B6AD;
  --first-color-light:  #F7F6FB;
  --white-color: #F7F6FB;
  --green-color: #42c8f3;
  --color-gray-rgb: rgb(144, 144, 144);
  --color-dark-gray: #01B6AD;
  --bs-link-hover: #42c8f3;
  /* Table */
  --bs-table-striped-bg: #833633;
  --bs-table-active-bg: #89403e;
  --bs-table-hover-bg: #863b38;
  /* Alert - List group */
  --bs-alert-primary: #42c8f3;
  --bs-alert-primary-link: #3b1513;
  --bs-alert-background-color: #e5d5d4;
  --bs-alert-border-color: #d8bfbf;
  --bs-list-primary-bg-hover: #cec0bf;

  --bs-box-shadow: 144, 75, 72;
  --bs-btn-bg-hover: #42c8f3;
  --bs-btn-primary-border: #42c8f3;

  /*--body-font: Nunito, sans-serif;*/
  --normal-font-size: 1rem;
  --z-fixed: 100;
}
    *,::before,::after{
        box-sizing: border-box
    }

    body{
        font-family: var(--bs-font-sans-serif);
        position: relative;
        margin: var(--header-height) 0 0 0;
        padding: 0 1rem;
        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 1rem;
        background-color: var(--white-color);
        z-index: var(--z-fixed);
        transition: .5s
    }
    .header_toggle{
        color: var(--first-color);
        font-size: 1.5rem;
        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: column;
        justify-content: space-between;
        overflow: hidden
    }
    .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: 2rem;
        padding-left: 1rem !important;
    }
    .nav_logo-icon{
        width: 40px;
        /* border: solid 2px var(--white-color);
        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
    }
        .show{
            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 2rem 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
        }
        .show_menu{
            width: calc(var(--nav-width) + 200px)
        }
        .body-pd{
            padding-left: calc(var(--nav-width) + 210px)
        }
    }

    @media screen and (max-width: 768px){

      body{
              margin: calc(var(--header-height) + 1rem) 0 0 0;
              padding-left: calc(var(--nav-width) -50px)
          }

        .header_img{
            width: 40px;
            height: 40px
        }
        .header_img img{
            width: 45px
        }

        .show_menu{
          width: calc(var(--nav-width) + 400px);
          padding-left: 210;
      }

        .show{
            width: calc(var(--nav-width) + 200px)
        }

        .body-pd{
            padding-left: calc(var(--nav-width) + 210px)
        }


        .nav-item
        {
          margin-top: 10px;
          margin-bottom: 10px;
        }

    }


.font-size-21{
    font-size: 1.16em;
}
.font-size-18{
    font-size: 1em;
}


.form-check-input:checked {
    background-color: var(--green-color);
    border-color: var(--white-color);
}

.form-switch .form-check-input-verde {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23afd528'/%3e%3c/svg%3e");
  border: solid #2d2d2d 1px!important;
}
.form-switch .form-check-input-verde:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000000'/%3e%3c/svg%3e");
}
.form-switch .form-check-input-verde:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000000'/%3e%3c/svg%3e");
}
.form-switch .form-check-input-verde:active {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000000'/%3e%3c/svg%3e");
}
.form-switch .form-check-input-verde:focus:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23afd528'/%3e%3c/svg%3e");
}



@media screen and (max-width: 768px){
    .table th:nth-child(2),
    .table td:nth-child(2) {
        min-width: 200px;
        left: 30.4px;
    }
}
.table td:nth-child(-n+2) {

  }
.table td, .table th {
    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 var(--color-gray-rgb);
    border-radius: 50%;
    width: 180px;
}


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

  .file-select::before {
    background-color: var(--color-dark-gray);
    color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    content: "Seleccionar"; /* texto 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;
  }

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


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

        thead tr {
          background-color: var(--bs-secundary);
          height: 30px;

        }
        thead th {
          background-color: var(--bs-secundary);
          height: 30px;
          color: #ffffff;
        }


        thead th:first-child {
          border-radius: 4px 0px 0px 4px;
        }
        thead th:last-child {
          border-radius: 0px 4px 4px 0px;
        }

        .loading {
            position: fixed;
            top: 0; right: 0;
            bottom: 0; left: 0;
        }
        .loader {
            left: 50%;
            margin-left: -4em;
            font-size: 10px;
            border: .8em solid rgba(218, 219, 223, 1);
            border-left: .8em solid rgba(58, 166, 165, 1);
            animation: spin 1.1s infinite linear;
        }
        .loader, .loader:after {
            border-radius: 50%;
            width: 8em;
            height: 8em;
            display: block;
            position: absolute;
            top: 50%;
            margin-top: -4.05em;
        }

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

        .text-verde {
          color: #afd528 !important; }