/*  Login */

   @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

   .panel-wf > div{
      margin: 0;
      padding: 0;
      
   }
   .panel-wf{
      padding-right: 1rem;
      padding-top: 1rem;
      margin-bottom: 1rem;
      margin-right: 1rem;
   }
   .panel-wf > div:nth-child(2){
      border-radius: 1rem;
   }
        .login {
            font-family: "Montserrat", sans-serif;;
            background-image: url('../img/ESTELA-PANEL.jpeg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            background-position: center;
            opacity: 0.9;
            overflow: hidden;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .form-container {
         margin-top: 100px;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
            padding: 30px;
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.7);
        }
        form {
            margin-top: 20px;
        }
        label {
            font-weight: bold;
        }
        input {
            border-radius: 5px;
            padding: 5px;
            background-color: rgba(255, 255, 255, 0.7);
        }
        button {
            border-radius: 5px;
            padding: 5px;
        }
        .btn-primary {
            background-color: #465130;
            border-color: #465130;
        }
        .btn-primary:hover,.swal2-styled.swal2-confirm{
          background-color: rgb(209, 119, 74) !important;
          border-color: #d1774a !important;
        }

       .swal2-styled:focus {
         box-shadow: 0 0 0 3px rgba(209, 119, 74,.5) !important;
      }
      body {
         font-family:  "Montserrat", sans-serif;
      }
      body, html {
         width: 100vw;
         overflow-x: hidden;
      }
      .container-fluid {
         padding-right: 0;
         padding-left: 0;
      }
      .nav-sidebar {
         background-color: #343a40;
         padding-top: 20px;
      }
      .nav-sidebar .nav-link {
         color: #d8d8d8;
      }
      .nav-sidebar .nav-link:hover {
         color: #fff;
      }
      .main-content {
         padding: 2rem;
      }
      .table-container {
         margin-top: 20px;
      }
      .sidebar-sticky {
         margin-top: 100px;
         margin-left: 2rem;
      }
      .pl-16{
         padding-left: 16px !important;
      }
      select{
         border-radius: 16px !important;
      }
      .btn-blue {
         background: #5e86cc !important;
         border-color: #5e86cc !important;
         color: white;
     }
     .btn-green{
      background: #5f6f4b !important;
      border-color: #5f6f4b !important;
     }
     .btn-orange{
      background-color: #e28343 !important;
      border-color: #e28343 !important;
     }
     /* Invitacion enviada, esperando que el invitado confirme. */
     .btn-teal{
      background-color: #2f7d75 !important;
      border-color: #2f7d75 !important;
      color: white;
     }
     .btn-red{
   background: #bc3f29 !important;
   border-color: #bc3f29 !important;
     }
      /*.sidebar {
         height: 100vh !important;
      }*/
      .nav-link,.nav-link:hover{
         cursor: pointer;
         color: #fff
      }
      .number-totals {
         font-size: 13px;
         text-decoration: none;
      }
      .ml-2 {
         margin-left: 8px;
      }
      .main-content {
         padding: 2rem;
         background: white;
         margin: 20px 2rem;
         box-shadow: 0px 0px 0px 3px rgba(243,242,240,1);
         border-radius: 16px;
         border-top-left-radius: 0px;
     }
      .import-div,.add-div {
         position: fixed;
         background: white;
         padding: 20px;
         border-radius: 8px;
         box-shadow: 0px 1px 0px rgba(0,0,0,0.2);
         left: 50%;
         top: 50%;
         transform: translate(-50%,-50%);
         z-index: 99;
      }
      .text-r{
         text-align: right;
      }
      .overlay-import-export {
         position: fixed;
         width: 100%;
         height: 100%;
         left: 0;
         top: 0;
         background-color: rgba(0,0,0,0.10);
         z-index: 3;
      }
      .float-r{
         float: right;
      }
      .btn-exit {
         border: none;
         background: transparent;
      }
      .table-container {
         max-height: 65vh;
         margin-top: 20px;
         overflow-y: scroll;
      }
      thead{
         position: sticky;
         top: -10px;
         z-index: 2;
      }
      .actions{
         display: flex;
         justify-content: center;
         gap: 6px;
      }
      table input[type="number"] {
         width: 55px;
         display: inline-block;
      }
      .img_whats{
         width: 50%;
         height: 100px;
      }
      .form-control{
         -webkit-appearance: listbox !important;
      }
      .p-0{
         padding: 0 !important;
      }
      .h-38{
         height: 38px;
      }
      .invitaciones-edit .row {
         align-items: center;
         margin-right: 20px;
      }
      .invitaciones-edit{
         height: 250px;
         overflow-y: scroll;
         overflow-x: hidden;
      }
      .total-inv, .sub-total-inv {
         display: block;
         font-size: 12px;
         margin: -2px 0;
      }
      .total-inv{
         font-weight: bold;
      }
      .total-inv i {
         float: right;
      }
      .total-inv i {
         float: right;
         margin-top: 2px;
         font-size: 10px;
         font-weight: bold;
         cursor: pointer;
      }

      .actions-div {
         position: relative;
      }
      .toltip {
         display: none;
         position: absolute;
         top: -29px;
         left: 50%;
         width: 160px;
         transform: translate(-50%);
         z-index: 999;
         border-radius: 6px;
         background: black;
         padding: 2px 0;
         color: white;
         text-align: center;
         font-size: 12px;
      }
      .actions-div:hover .toltip{
         transition: 0.3s ease;
      display: block;
      }
      .actions-div:hover .no-toltip{
      display: none;
      }
      .question-event {
         background: #d1774a;
         padding: 4px 6px;
         border-radius: 100%;
         color: white;
         cursor: pointer;
         font-size: 10px;
      }
      .question-event:hover + div{
         display: block;
         transition: 0.3s ease-in-out;
      }
      .info-var-questions p {
         font-size: 14px;
      }
      .info-var-questions {
         padding: 10px;
         border-radius: 8px;
         box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
         background-color: #fff;
         position: absolute;
         left: -118px;
         top: -110px;
         display:none;
         
      }
      .form-label {
         position: relative;
      }
      input[type="checkbox"]{
         display: none;
      }
      input[type="checkbox"] + label {
         margin: 0 auto;
         width: 13px;
         height: 13px;
         border: 1px solid rgba(0,0,0,0.2);
         cursor: pointer;
         border-radius: 3px;
     }
     input[type="checkbox"]:checked + label {
       background: #d1774a;
       border-color: #d1774a;
     }
     td, th, tr {
      border: none;
      font-weight: bold;
      color: #8a8a8a;
      font-size: 14px;
  }
  
  td {
   vertical-align: middle;
}
.panel-wf > .col-md-10 {
   border-radius: 1rem;
}
.actions button,.invitaciones-edit .btn-danger {
   border-radius: 10px !important;
}
 tr td:nth-child(4), tr th:nth-child(n+4) {
   text-align: center;
}
  .weddify-logo {
      color: #4d4d4d;
      font-size: 24px;
      font-style: italic;
      text-decoration: none;
  }
  .sidebar-sticky a:hover {
      color: #4d4d4d !important;
      text-decoration: underline;
   }
   .sidebar-sticky a{
      color: #4d4d4d !important;
      transform: 0.3s ease;
      font-weight: 600;
   }
   .point-wf {
      width: 18px;
      height: 18px;
      background-color: #4d4d4d;
      display: inline-block;
      border-radius: 100%;
  }
  .gap-10x{
   gap:10px;
  }
  .gap-4px{
   gap: 4px;
  }
  .time-box {
      width: 200px;
   }
   .time-box span {
      font-size: 18px;
      font-weight: bold;
  }
  .number{
      display: inline-block;
      margin-left: 10px;
      padding: 0 10px;
      border-radius: 9px;
      color: white !important;
  }
  .tags-nav {
      padding: 0 20px;
      margin: 0 12px;
      margin-top: 20px;
      margin-bottom: -28px;
   }
  .box-time {
      display: block;
      padding: 8px;
      color: white;
      width: 150px;
      border-radius: 16px;
      padding-left: 22px;
   }
   .number-totals {
    display: inline-block;
    /* padding: 20px; */
    /* background: white; */
    border-right: 20px solid transparent;
    border-bottom: 10px solid;
    border-bottom: 40px solid #f2f2f2;
    width: 200px;
    filter: drop-shadow(0px -2px 5px #ddd3d2);
    position: relative;
}
.number-totals.active{
   border-bottom-color: white;
}
table tr:nth-child(2n) td, table thead th {
   background: #f2f2f2 !important;
}
td.actions button {
   border-radius: 12px;
}
.number-totals > span {
   position: absolute;
   top: 20px;
   left: 20px;
   transform: translateY(-50%);
}
   .text-blue{
      color: #5e86cc !important; 
   }
   .box-blue-time,.text-blue .number {
      background: #5e86cc;
   }
   .box-green-time,.text-green .number {
      background: #5f6f4b;
  }
  .box-orange-time,.text-orange .number{
   background: #e28343;
  }
  .box-red-time,.text-red .number{
   background: #bc3f29;
  }
  .text-red{
      color: #bc3f29 !important;
  }
  .faltan{
   font-size: 20px;
  }
  input[type="search"] {
      border-radius: 16px;
      background: transparent;
      border: 1px solid #918987;
      color: #918987 !important;
   }
   .ml-20{
      margin-left: 20px;
   }
  .bg-custom-gray{
    background-color: #f7f6f4;
  }
  .container-90{
   width: 90%;
   margin: 0 auto;
  }
  .btn-green-1{
   background-color: #9fa892;
   color: #fff;
  }
  .btn-green-1:hover{
   background-color: #5f6f4b;
   color: #fff;
   transition: 0.2s;
  }
  .text-green{
   color: #5f6f4b !important;
  }
  .text-orange{
   color: #e28343 !important;
  }
  .w-600{
   font-weight: 600;
  }
  .btn {
      border-radius: 2rem;
   }
   .level-2-wf{
      background-color: #ddd3d2;
      padding: 40px 20px;
      border-radius: 2rem;
      position: relative;
   }
   .w-30{
      width: 30%;
   }
   .w-70{
      width: 70%;
   }
   .tags-nav > a:not(:first-child) {
      width: 220px;
  }
  
  .number-totals:not(:first-child) > span {
      left: 60px;
  }
  
  .tags-nav a:first-child {
      position: relative;
      z-index: 9;
  }
  .tags-nav a:nth-child(2) {
      position: relative;
      transform: translateX(-20px);
      z-index: 8;
  }
  .tags-nav a:nth-child(3) {
      position: relative;
      transform: translateX(-40px);
      z-index: 7;
  }
  .tags-nav a:nth-child(4) {
      position: relative;
      transform: translateX(-60px);
      z-index: 6;
  }
  .btn-menu-open-close {
   border: none;
   color: white;
   padding: 10px;
   font-size: 18px;
   background: #5e86cc;
   position: fixed;
   left: 0;
   width: 40px;
   top: 20px;
   z-index: 99;
   display: none;
}

[data-active="close"] .fa-left-long {
   display: none !important;
}
[data-active="close"] .fa-rigth-long {
   display: block;
}
[data-active="open"] .fa-right-long {
   display: none !important;
}
[data-active="open"] .fa-left-long {
   display: block;
}

.menu-wf[data-active="close"] {
   display: none;
}

.numero-de-whatsapp {
   width: 250px;
   position: absolute;
   right: 10px;
   top: 10px;
   padding: 10px;
   background: #f7f6f4;
   border-radius: 16px;
}
.numero-de-whatsapp > span {
   font-size: 14px;
}
.btn-mensaje {
    cursor: pointer;
    border: none;
    color: #e28343;
    background-color: transparent;
    padding: 0;
    float: right;
}
.mensaje-inv {
    position: fixed;
    z-index: 9999;
    width: 50vw;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    border-radius: 12px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 10px  !important;
    text-align: center;
    font-size: 16px;
}
.btn-close-mensaje {
    border-radius: 100%;
    padding: 4px 9px;
    background: #bc3f29;
    border: none;
    color: #fff;
    font-size: 16px;
}
.pos-rel{
   position: relative;
}
.delete-img-whats {
    border: none;
    background: transparent;
    position: absolute;
    left: 92%;
    top: 0;
    cursor: pointer;
}



   @media screen and (max-width: 1200px ) {
      .sidebar-sticky {
         margin-left: 0rem;
   }
   .box-time {
         width: 100px;
   }
   
      .number-totals:not(:first-child) > span {
         left: 20px;
      }
      .tags-nav > a:not(:first-child) {
         width: 220px;
         width: 180px;
   }
   .number-totals > span {
         left: 4px;
   }
   .tags-nav a:first-child {
         width: 180px;
   }
   }
   
     @media screen and (max-width: 1080px){
      .btn-menu-open-close {
         display: block;
      }
      .panel-wf {
         margin-left: 1rem;
     }
     .panel-wf > .col-md-10{
      width: 100%;
      }
      .menu-wf[data-active="open"] {
    position: fixed;
    z-index: 98;
    background: white;
    height: 100%;
    width: 20%;
    max-width: 200px;
    min-width: 200px;
    margin: 0 !important;
    padding: 0 !important;
    top: 0;
    box-shadow: 1px 4px 4px rgba(0,0,0,0.2);
}
      .menu-bar {
         color: #fff;
         background: transparent;
         cursor: pointer !important;
         border: none;
         font-size: 18px;
         display: block;
         width: 100%;
         text-align: right;
      }
         .menu-header {
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: flex-start;
         }
         .weddify-logo {
            display: none;
         }
         .p-16{
            padding: 16px;
         }
     }

     @media screen and (max-width: 902px){
         .panel-wf {
            margin: 0.5rem !important;
            padding: 0.5rem !important;
         }
         .tags-nav b {
            font-size: 10px;
         }
         .tags-nav a:first-child {
            width: 155px;
         }    
         .tags-nav > a:not(:first-child) {
            width: 150px;
         }
     }   
     @media screen and (max-width: 767px){
      .main-content {
         padding-top: 1rem;
      }
      .contador-and-search {
         flex-direction: column;
      }
      .contador-and-search .w-30,
      .contador-and-search .w-70{
         width: 100%;
      }
      .container-90 {
         width: 95%;
      }
      .table-container {
         height: auto !important;
         max-height: 100vh;
         margin-top: 20px;
         overflow-y: scroll;
         margin-bottom: 100px;
     }
      .main-content{
         padding-right: 20px;
         padding-left: 20px;
         padding-top: 65px;
      }
      .acciones-iniciales .col-md-6 {
            margin: 12px 0;
            display: flex;
            justify-content: space-between;
      }
      .acciones-lote-resp .col-md-5, .acciones-lote-resp .col-md-1,.acciones-iniciales .col-md-6 button {
         width: 50%;
      }
      .acciones-lote-resp button {
         width: 100%;
         margin-left: 0 !important;
      }
      input[type="search"]{
         margin-top: 8px;
      }
      .import-div, .add-div{
         width: 95vw;
      }
      .edit-div {
         height: 60vh;
         overflow-y: scroll;
     }
     }
     @media (min-width: 576px){
      .container, .container-sm {
         max-width: 100% !important;
      }
   }

      @media screen and (max-width: 530px){
            .contador-and-search .w-70 {
               flex-direction: column;
           }
           .level-2-wf > span {
               text-align: center;
           }
           .box-time,.time-box {
              margin-bottom: 10px;
              width: 100% !important;
           }
           .time-box span {
               text-align: center;
           }
           .tags-nav {
            padding: 0;
            margin-bottom: -10px;
            } 
            .tags-nav a {
               width: 50% !important;
               margin: 0 !important;
               transform: translate(0) !important;
               border-right: none;
           }
           .main-content {
               padding: 0;
               margin: 0;
            }    
             .paginacion-wf {
               flex-direction: column;
               gap: 12px;
            }
             .acciones-lote-resp > div {
               width: 100% !important;
               margin-top: 6px;
               padding: 0;
            }
         }
.paginacion-wf {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 18px;
   margin-bottom: 10px;
}
.paginacion-info {
   font-size: 14px;
   color: #5f6f4b;
   font-weight: 500;
}
.paginacion-controles {
   display: flex;
   align-items: center;
   gap: 6px;
   flex-wrap: wrap;
}
.pag-btn {
   min-width: 38px;
   height: 38px;
   padding: 0 10px;
   border: 1px solid #465130;
   background: #fff;
   color: #465130;
   border-radius: 8px;
   font-weight: 600;
   cursor: pointer;
   transition: all .2s ease;
}
.pag-btn:hover:not(:disabled) {
   background: #d1774a;
   border-color: #d1774a;
   color: #fff;
}
.pag-btn.pag-activa {
   background: #465130;
   border-color: #465130;
   color: #fff;
}
.pag-btn:disabled {
   opacity: .4;
   cursor: not-allowed;
}
.pag-ellipsis {
   color: #465130;
   padding: 0 4px;
   font-weight: 600;
}