:root{
    --color-principal: #289435;

    --wd-anim: 0;
}
body{
    background: white;
}

html {
    overflow: hidden;
}

:focus-visible{
    outline: transparent auto 1px;
}

textarea{
    resize:none;
    padding: 15px 12px 0px 12px !important;
}
.green-text {
    padding: 10px 10px;
    color: #4CAF50 !important;
    background: #4cc73e;
    border-radius: 5px;
    border: 1px solid #00000036;
    text-align: center;
    width: 60%;
    display: block;
    color: #060606 !important;
}
.blue-text.text-darken-2 {
    color: #1976D2 !important;
    padding: 10px;
    background: #2a82f3cf;
    border-radius: 5px;
    border: 1px solid #a7a1a1eb;
    width: 60%;
    display: block;
    color: black !important;
    text-align: center;
}
.orange-text {
    color: #ff9800 !important;
    padding: 10px;
    background: #ebca1ec7;
    width: 60%;
    display: block;
    border: 1px solid #d1d1d1;
    border-radius: 5px;
    color: black !important;
    text-align: center;
}
.overflow-auto{
    overflow: auto !important;
}

*::-webkit-scrollbar{
    width: 8px  !important;
    height: 8px  !important;
}

*::-webkit-scrollbar-thumb{
    background: rgb(29 27 27 / 21%) !important;
}

*::-webkit-scrollbar-track{
    background: rgb(236 236 236) !important;
}
.iconwhatsapp{
    width: 50px !important;
    border-radius: 50% !important;
    position: absolute;
    margin-bottom: 2px;
    
}

.login{
    width: 100% !important;
    height: 100vh;
    /*background: var(--color-principal);*/
    background:white;
    display: flex;
    position: relative;
    overflow: hidden;
    object-fit: cover;
}
h3 {
    font-size: 2.92rem;
    line-height: 110%;
    margin: 1.9466666667rem 0 1.168rem 0;
    margin: 0px;
}
.contenidohelpcenter{
    font-size: 18px;
    margin: 0px;
}

.login .imagen{
    width: 55%;
    height: 100vh;
    background-image: url('../almacenamiento/img/indexwdc2.webp');
    background-repeat: no-repeat;
    background-size: 85%;
    background-position: center;
    /*animation-name: example;
    animation-duration: 8s;
    animation-iteration-count: infinite;*/
    animation: carrusel-login 5s ease infinite alternate;
}
/*
@keyframes example {
    0% { transform: rotateX(1deg);}
    50% {transform: rotateX(90deg);}
    100% {transform: rotatey(1deg); background-image: url('../almacenamiento/img/indexwdc.webp');}
  }*/
.imagen2{
    background-image: url('../almacenamiento/img/logo.png');
    width: 79%;
    height: 200px;
    background-repeat: no-repeat;
    justify-content: center;
}


@keyframes carrusel-login {
    0% { 
        background-image: url('../almacenamiento/img/indexwdc2.webp');
        opacity:1;
    }

    40% {
        opacity:1;
        background-image: url('../almacenamiento/img/indexwdc2.webp');
    }

    45%, 55% {
        opacity:0;
    }

    60% {
        opacity:1;
        background-image: url('../almacenamiento/img/indexwdc.webp');
    }

    100% {
        opacity:1;
        background-image: url('../almacenamiento/img/indexwdc.webp');
    }
}

.logoimg{
    background-image: url('../almacenamiento/img/favicon.png');
    width: 60px;
    height: 30px;
    background-repeat: no-repeat;
    justify-content: center;
    background-size: contain;
}
.centerimg{
        justify-content: center !important;
        display: flex !important;
}
.login .formulario{
    width: 45%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.09);
    display: flex;
    align-items: center;
    justify-content: center;
}
.autocomplete{
    border-radius: 20px !important;
}
.login .formulario .form_cont h1{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: oblique;
    color: black;
    text-align: center;
    margin-top: 15px;
}
.login .formulario .form_cont{
    width: 85%;
    background-color: white;
    box-shadow: 0 0 20px -7px rgb(141, 141, 141);
    border-radius: 6px;
    padding: 10px;
}

.form_cont.interno{
    padding: 0 20px;
}
.form_cont .rec-contr{
    height: 33px;
    width: 100%;
    padding: 0 10px;
    display: flex;
    justify-content: center;
}
.login .formulario .form_cont {
    width: 85%;
    background-color: white;
    box-shadow: 0 0 20px -7px rgb(141 141 141);
    border-radius: 6px;
    padding: 30px;
}

.form_cont .input-cont{
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.form_cont .input-cont.lateral{
    flex-direction: row;
}

.form_cont .input-cont.lateral .inp {
    width: 80%;
    
}
.inp textarea{
    width: calc(100% - 18px) !important;
}

.form_cont .input-cont.lateral.interno .inp{
    margin: 0 10px;
    margin-bottom: 5px;
}


.form_cont .input-cont.lateral .inp.tam_5{
    width: calc(80% / 2);
}

.form_cont .input-cont.lateral .btn-per.aprov{
    margin: 0;
    width: 20%;
    border-radius: 0 6px 6px 0;
}

.form_cont .input-cont.lateral .inp input,.form_cont .input-cont.lateral .inp textarea {
    margin: 0;
    width: 97%;
    border-radius: 6px 0 0 6px;
}

.form_cont .input-cont.lateral.interno .inp input, .form_cont .input-cont.lateral.interno .inp textarea{
    border-radius: 6px;
}

.form_cont .input-cont.lateral .inp .anima {
    left: 0px;
    bottom: 0px;
}

.form_cont .input-cont.lateral .inp input:focus:not([readonly])+.anima,.form_cont .input-cont.lateral .inp textarea:focus:not([readonly])+.anima{
    --wd-anim:100%;
}

.inp {
    position: relative;
    margin: 4px 0;
}

.inactive.inactive{
    margin: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}

.inp label{
    position: absolute;
    left: 18px;
    top: -0.4rem;
    opacity: 1;
    transform: translateY(0);
    transition: all .8s;
    font-size: 0.7rem;
}

.inp input:placeholder-shown+.anima+label, .inp textarea:placeholder-shown+.anima+label{
    opacity: 0;
    transform: translateY(1rem);
}

.inp input:focus:not([readonly])+.anima+label, .inp textarea:focus:not([readonly])+.anima+label{
    color: var(--color-principal);
}

.inp input.valid+.anima+label, .inp textarea.valid+.anima+label{
    color: var(--color-principal);
}

.inp input.invalid+.anima+label, .inp textarea.invalid+.anima+label{
    color: red;
}

.form_cont .input-cont .inp input, .form_cont .input-cont .inp textarea{
    width: calc(100% - 40px);
    padding: 2px 10px;
    background: rgba(201, 201, 201, 0.178);
    border-radius: 6px;
    border: 0;
    margin: 10px 10px;
}

.form_cont .input-cont .inp input:focus, .form_cont .input-cont .inp input.invalid, .form_cont .input-cont .inp input.valid,
.form_cont .input-cont .inp textarea:focus, .form_cont .input-cont .inp textarea.invalid, .form_cont .input-cont .inp textarea.valid

{
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.form_cont .input-cont .inp input:focus:not([readonly])+.anima,
.form_cont .input-cont .inp textarea:focus:not([readonly])+.anima{
    --wd-anim:calc(100% - 20px);
}


.form_cont .input-cont .inp input.invalid+.anima, .form_cont .input-cont .inp textarea.invalid+.anima{
    --wd-anim:calc(100% - 20px);
    --color-principal:red;
}

.form_cont .input-cont.lateral .inp input.invalid+.anima, .form_cont .input-cont.lateral .inp textarea.invalid+.anima{
    --wd-anim:100%;
}


.form_cont .input-cont .inp input.valid+.anima, .form_cont .input-cont .inp textarea.valid+.anima{
    --wd-anim:calc(100% - 20px);
}

.form_cont .input-cont.lateral .inp input.valid+.anima, .form_cont .input-cont.lateral .inp textarea.valid+.anima{
    --wd-anim: 100%;
}

.form_cont .input-cont .inp .anima{
    content: '';
    position: absolute;
    bottom: 6px;
    left: 10px;
    /*calc(100% - 20px)*/
    width: var(--wd-anim);
    height: 4px;
    background: var(--color-principal);
    transition: all .5s;
}

.form_cont .input-cont .ck-cont{
    padding: 0 20px;
    margin-bottom: 10px;
}

.form_cont .input-cont .ck-cont .ckbox{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin: 0 0 20px 0;
    row-gap: 30px;
    border: 1px solid rgb(214 214 214);
    border-radius: 8px;
    padding: 20px 18px 20px 18px;
    background: rgb(245 245 245);
}

.cont-ckbox{
    margin-bottom: 35px;
}

.title-check{
    border: 1px solid rgb(214 214 214);
    border-radius: 8px 8px 0px 0px;
    padding: 0px 18px 0px 18px;
    background: rgb(245 245 245);
    margin: 0;
    min-width: 200px;
    max-width: 30%;
    margin-left: 17px;
    transition: all 0.1s;
}

.cont-ckbox:has([type="checkbox"]:checked) .title-check{
    background: var(--color-empr);
    border: 1px solid var(--color-empr);
    color: white;
}

.title-check h4{
    margin: 8px 0 5px 0;
    text-align: center;
    font-size: 2rem;
    text-transform: capitalize;
}

.form_cont .input-cont .left-check{
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
}

.btn-per{
    --back-color:rgba(201, 201, 201, 0.178);
    --text-color:rgb(56, 56, 56);
    height: auto;
    line-height: initial;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
    text-shadow: 0 0 rgba(0, 0, 0, 0.185);
    padding: 10px 15px !important;
    background: var(--back-color);
    border-radius: 6px;
    border: 1px solid rgba(83, 83, 83, 0.123);
    box-shadow: none;
    margin: 10px 10px;
    color: var(--text-color);
    transition: all .5s;
}

.btn-per.simple{
    --back-color:#289435;
    --text-color:white;
}

.form_cont .btn-per.aprov{
    --back-color:#289435
    --text-color:white;
}

.form_cont .btn-per:hover{
    background: var(--text-color);
    color: var(--back-color);
}

.form_cont.fotr_chat{
    overflow: visible;
}

.form_cont.fotr_chat .input-cont{
    overflow: visible;
}

.form_cont.fotr_chat .input-cont.lateral.interno .inp {
    margin: 0;
}

.form_cont.fotr_chat .input-cont.lateral .inp input, .form_cont.fotr_chat .input-cont.lateral .inp textarea {
    width: 100%;
    border-radius: 6px 0 0 6px;
}

.form_cont.fotr_chat .inp label {
    left: 10px;
    top: -1rem;
}

.form_cont.fotr_chat .input-cont.lateral .inp {
    width: 90%;
}

.form_cont.fotr_chat .input-cont.lateral .btn-per.aprov {
    width: 10%;
}

.confirm_form .sub-tittle{
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 2rem;
}

.confirm_form .btn-per.aprov{
    --back-color:#289435;
    --text-color:white;
}

.btn-per.take{
    --back-color:#289435;
    --text-color:white;
}

.trigger-take:hover+.btn-per.take{
    background: var(--text-color);
    color: var(--back-color);
}

.btn-per.remove{
    --back-color:rgb(243, 46, 46);
    --text-color:white;
}

.confirm_form .btn-per.deneg{
    --back-color: rgb(243, 46, 46);
    --text-color:white;
}

.confirm_form .btn-per:hover{
    background: var(--text-color);
    color: var(--back-color);
}


.confirm_form .btns .col{
    display: flex;
    justify-content: center;
    align-items: center;
}

.confirm_form .btns .btn-per{
    width: 70%;
    min-width: 100px;
}


.file-inp{
    --hg: 50px;
    --wd: auto;

    position: relative;
    overflow: hidden;
    width: var(--wd);
    height: var(--hg);
}

.file-inp input[type=file]{
    position: absolute;
    overflow: hidden;
    width: var(--wd);
    height: var(--hg);
    opacity: 0;
}

.form_container{
    --wd: 100%;
    width: var(--wd);
    margin: 0 calc((100% - var(--wd)) / 2);
}

.main{
    width: 100%;
    height: 100vh;
    display: flex;
    overflow: hidden;
}

.main .contenido{
    width: 96%;
    position: relative;
    padding: 28px;
    transition: all .1s;
}

.g_c_info .contenido p{
    margin: 3px 0;
}

.main .menu{
    width: 4%;
    box-shadow: 3px 0 11px -7px rgb(83 83 83);
    background: white;
    padding: 15px 0;
    /* padding: 10px 20px; */
    display: flex;
    flex-direction: column;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: space-between;
}

.btn-menu{
    width: 30px;
    height: 30px;
    z-index: 10;
    color: var(--color-principal);
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .5s;
}

.btn-menu.active{
    color: white;
}
.midle{
    z-index: 2;
}
.midle .btn-menu{
    margin: 20px 0;
}

.sen-anima{
    --tam: 35px;
    --mov: 13px;
    --mov-left: calc(50% - calc(var(--tam)/2));
    
    width: var(--tam);
    height: var(--tam);
    background: var(--color-principal);
    border-radius: 4px;
    position: absolute;
    z-index: 1;
    top: var(--mov);
    left: var(--mov-left);

    transition: all .4s;
    /*animation: moved 2s 4 forwards;*/
}

.sen-anima.click{
    animation: click .3s 1 forwards;
}

@keyframes click {
    20% {transform: scale(0.8)  ;}
    40% {transform: scale(1.1);}
    60% {transform: scale(1.2)  ;}
    80% {transform: scale(1.1);}
    100%{transform: scale(1)  ;}
}

.sen-anima.moved{
    animation: moved .3s 1 forwards;
}

@keyframes moved {
    20% {transform: scaleX(1)   scaleY(1);}
    40% {transform: scaleX(0.5) scaleY(2);}
    60% {transform: scaleX(0.7) scaleY(1.5);}
    80% {transform: scaleX(0.9) scaleY(0.8);}
    100% {transform: scaleX(1)   scaleY(1);}
}

.sub-tittle{
    font-weight: lighter;
}

.margin-top{
    margin-top: 10px;
}

.margin-bottom{
    margin-bottom: 10px;
}

.user_info p{
    font-weight: bolder;
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.user_info p span{
    font-weight: 200;
}

.user_info .user-img{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
}

.user_info .user-img .img-circle img{
    width: 100%;
    min-height: 100%;
}

.sidenav .user-img{
    background-color: #ffffff;

    background-image: linear-gradient(
        137deg, 
        #EEEEEE 0%, #EEEEEE 40%,
        #f8f8f8ad 50%, #f8f8f8ad 55%,
        #EEEEEE 65%, #EEEEEE 100%
    );
    background-size: 400%;
    overflow: hidden;
    animation: shinmer 1500ms 1s infinite;
}

.sidenav .user-img img{
    width: 100%;
    min-height: 100%;
}

.user_info .user-img .img-circle{
    --diamtro-circle: 200px;
    width: var(--diamtro-circle);
    height: var(--diamtro-circle);
    border-radius: var(--diamtro-circle);
    background-color: #ffffff;

    background-image: linear-gradient(
        137deg, 
        #EEEEEE 0%, #EEEEEE 40%,
        #f8f8f8ad 50%, #f8f8f8ad 55%,
        #EEEEEE 65%, #EEEEEE 100%
    );
    background-size: 400%;
    overflow: hidden;
    border: 3px solid #e9e9e9;
    animation: shinmer 1500ms 1s infinite;
}

@keyframes shinmer {
    from{background-position: 0 0;}
    to  {background-position: 100% 100%;}
}

.photo-contain{
    --diamtro-circle: 280px;
    height: var(--diamtro-circle);
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.photo-contain .circle-img{
    width: var(--diamtro-circle);
    height: var(--diamtro-circle);
    border-radius: var(--diamtro-circle);
    background-color: #ffffff;

    background-image: linear-gradient(
        137deg, 
        #EEEEEE 0%, #EEEEEE 40%,
        #f8f8f8ad 50%, #f8f8f8ad 55%,
        #EEEEEE 65%, #EEEEEE 100%
    );
    background-size: 400%;
    overflow: hidden;
    border: 3px solid #e9e9e9;
    animation: shinmer 1500ms 1s infinite;

    display: flex;
    justify-content: center;
}

.photo-contain .circle-img video, .photo-contain .circle-img canvas, .photo-contain .circle-img .img{
    width: 525px;
    height: 394px;
    display: none;
    background: #8f8f8f;
}

.photo-contain .circle-img .img img{
    height: inherit;
    min-width: 100%;
    max-width: 120%;
}
.form_cont.interno {
    padding: 0 20px;
    margin-top: 60px;
}
.photo-contain .acciones{
    position: absolute;
    width: var(--diamtro-circle);
    bottom: 20px;
    display: flex;
    justify-content: center;
}

.photo-contain .acciones .btn i{
    margin: 0;
}
.form_cont .btn-per.aprov {
    --back-color:#289435;
    --text-color: white;
    width: 98%;
}

.modal{
    height: 100vh;
    overflow: hidden;
    border-radius: 7px;
}

.modal .modal-content {
    height: 100%;
    position: relative;
}

.modal .btn_modal_main{
    position: absolute;
    top: 13px;
    right: 11px;
}

.modal .btn_modal_main .modal-close{
    background: rgb(40 148 53);
    color: rgb(255 255 255);
    border-radius: 20px;
    padding: 1px;
    font-size: 23px;
}

#modal_confirm {
    --hg-modal: 170px;
    max-width: 500px;
    height: var(--hg-modal);
    top: calc(50% - (var(--hg-modal)/2)) !important;
}

.pagination li.active {
    background-color: var(--color-principal);
}

.margin-top-18{
    margin-top: 16px !important;
}

/*Loader prototipo*/
   :root {
    --color-empr: #289435 !important;
    --size: 25;
    --color-one: #ea4335;
    --color-two:#289435;
    --color-three: #289435;
    --color-four: #fbbc05;
    --spin-speed: 3.25;
    --speed: 2.5;
    --width: 5;
    --tail: 1;
    --nose: 1;
  }
  
  @property --nose {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
  }
  @property --tail {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
  }

  .loader {
    height: calc(var(--size) * 1vmin);
    width: calc(var(--size) * 1vmin);
    border-radius: 50%;

    -webkit-mask: conic-gradient( 
        from 45deg, 
        transparent 0 var(--tail), 
        #000 0 var(--nose), 
        transparent 0 var(--nose) 
    );

    mask: conic-gradient(
      from 45deg,
      transparent 0 var(--tail),
      #000 0 var(--nose),
      transparent 0 var(--nose)
    );
    border-style: solid;
    border-width: calc(var(--width) * 1vmin);
    border-top-color: var(--color-one);
    border-right-color: var(--color-two);
    border-bottom-color: var(--color-three);
    border-left-color: var(--color-four);
    animation: load calc(var(--speed) * 1s) both infinite ease-in-out, spin calc(var(--spin-speed) * 1s) infinite linear;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  
  @keyframes load {
    0% {
      --tail: 0%;
      --nose: 0%;
    }
    40%,
    60% {
      --nose: 100%;
      --tail: 0%;
    }
    100% {
      --nose: 100%;
      --tail: 100%;
    }
  }
/*Loader prototipo*/

    :root{
        --chat-wd:250px;
    }

    .grid-container{
        display: grid;
        gap: 25px 30px;
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    .grid-container .p-card{
        width: 100%;
        height: 100px;
        background: white;
        border: 1px solid #289435;
        border-radius: 6px;
    }
    
    .chat-content{
        width: var(--chat-wd) !important;
    }

    .medie-cont.chat{
        width: calc(100% - var(--chat-wd)) !important;
        padding: 0 !important;
    }

    .p-chat{
        width: 100%;
        height: 60px;
        background: white;
        border: 1px solid rgba(0, 0, 0, 0);
        border-radius: 5px;
        margin: 10px 0px;
        padding: 10px;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: all 0.2s;
    }

    .p-chat:hover, .p-chat.active{
        border: 1px solid#289435;
    }

    .p-chat.active{
        background: var(--color-principal);
        color: white;
    }

    .p-chat .user-img{
        margin-right: 20px;
    }

    .p-chat .user-img .img-circle{
        width: 50px;
        height: 50px;
        overflow: hidden;
        border-radius: 100%;
        background: var(--bk-color,#289435);
    }


    .p-chat .user-img .img-circle img{
        min-width: 100%;
        max-height: 150%;
    }

    .inicio{
        opacity: 0;
    }

    .inicio.active{
        animation: show 1s forwards;
    }

    .inicio h1, .inicio p{
        opacity: 0;
        transition: all 0.8s;  
    }


    .inicio.active h1, .inicio.active p{
        animation: show-in 1s forwards;
    }

    @keyframes show {
        0%  {opacity: 0;}
        100%{opacity: 1;}
    }

    @keyframes show-in {
        0%  {opacity: 0;transform: translateY(10px);}
        100%{opacity: 1;transform: translateY(0);}
    }

/*Estilos para el buscador*/

    mark {
        background: #3380fd3b;
        color: inherit;
    }

    .searh{
        position: relative;
    }

    .searh .cont-search{
        position: absolute;
        right: 0;
        width: 0;
        height: auto;
        top: -22px;
        overflow: hidden;
        transition: all 0.5s;
    }
    .searh .cont-search.active{
        width: 100%;
    }

    .searh .cont-search #search{
        background: rgb(244 244 244);
        border-radius: 8px;
        border: 1px solid rgb(218 218 218);
        padding: 0 10px;
        width: calc(100% - 22px);
        margin: 0;
        margin-top: 10px;
    }

    .open-search{
        cursor: pointer;
    }

    .searh .cont-search .close-search{
        cursor: pointer;
        --radio: 25px;
        width: var(--radio);
        height: var(--radio);
        border-radius: var(--radio);
        position: absolute;
        right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        top: calc(57% - (var(--radio) / 2));
    }

/*Estilos para el buscador*/

/*Estilos para la tabla*/
    table.class-tb .config{
        width: 50px;
        text-align: center;
        position: relative;
        overflow: visible;
    }

    table.class-tb .config .material-icons{
        cursor: pointer;
        transition: all 0.7s;
    }

    table.class-tb .config:hover .main-i.material-icons{
        transform: rotate(180deg);
    }

    table.class-tb .config .cont-opcion{
        width: 0;
        overflow: hidden;
        height: -webkit-fill-available;
        background: #ffffff;
        border-radius: 8px 0 0 8px;
        border: 0px solid #e0e0e0;
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
        transition: all .3s, border 0s;
    }

    table.class-tb .config:hover .cont-opcion{
        width: 200px;
        border: 1px solid #e0e0e0;
    }

    table.class-tb .config .cont-opcion p.option:hover i.material-icons{
        transform: rotate(360deg);
        color: var(--color-principal);
    }

    table.class-tb .config .cont-opcion p.option.danger:hover i.material-icons{
        color: red;
    }

    table.class-tb .config .cont-opcion p.option.accept:hover i.material-icons{
        color: #289435;
    }

    table.class-tb .config .cont-opcion p{
        margin: 0 1px;
        width: 100%;
        height: inherit;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    table.class-tb .config .cont-opcion p:hover{
        background: rgba(255, 255, 255, 0.363);
    }

    table.class-tb thead tr{
        color: black;
        font-weight: 400;
        border-bottom: 2px solid rgb(0 0 0);
        overflow: hidden;
    }

    table.class-tb tbody tr:nth-child(2n){
        background: rgba(223, 223, 223, 0.349);
    }

    table.class-tb tbody tr:hover{
        background: rgba(201, 201, 201, 0.349) !important;
    }

    table.class-tb td, table.class-tb th {
        padding: 8px 8px;
        text-overflow: clip;
        overflow: hidden;
        border-radius: 0;
        
    }

    /*Sub estilos para las tablas que se ordenan*/

    .tabla_orden thead th:not(.config){
        cursor: pointer;
        position: relative;
    }
    
    .tabla_orden thead th::selection {
        background-color: rgba(225, 216, 207, 0);
        color: auto;
    }
     
    .tabla_orden thead th::-moz-selection {
        background-color:rgba(225, 216, 207, 0);
        color: auto;
    }
    
    .tabla_orden thead th:not(.config):hover {
        background: #9a9a9a2a;
    }
    
    .tabla_orden thead th.active::after{
        content: '';
        width: 0;
        height: 0;
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        position: absolute;
        right: 5px;
        top: calc(50% - 5px);
    }
    
    .tabla_orden thead th.active.asc::after{
        border-top: 10px solid var(--color-principal);
    }
    
    .tabla_orden thead th.active.dsc::after{
        border-bottom: 10px solid var(--color-principal);
    }

    .container_order{
        width: 100%;
        overflow: hidden;
    }
    .title{
        font-weight: bolder;
        display: flex;
        justify-content: center !important;
        font-size: x-large;
        background-color: #289435 !important;
        border-radius: 5px 5px 0px 0px;
        color: white;
        padding-bottom: 10px;
        padding-top: 10px;
        margin: 0px;
    }
    .col.contenido{
            border: 1px solid #ddd;
            width: 100%;
            margin-left: auto;
            left: auto;
            right: auto;
            border-radius: 5px 5px 0px 0px;
            padding-left: 0px;
            padding-right: 0px;
            padding-bottom: 25px !important;
            margin-bottom: 8px;
    }
    .subtitulo{
        margin-bottom: 30px;
    }
    div .vista{
        margin-top: 20px;
        margin-bottom: 25px;
        padding-left: 40px;
        padding-right: 40px;
    }
    ul.collapsible{
  
    margin: 0.5rem 0 1rem 0;
    margin-left: 40px;
    margin-right: 40px;
    padding-bottom: 1px;
    margin-top: 17px;
    margin-bottom: -13px;
    box-shadow: none;
    }
  
    .col.titulos{
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto;
        margin: 0px;
        padding: 3px;
    }
    .remove_orden{
        color: #c1c1c1;
        cursor: pointer;
        transform: translateX(100%);
        transition: all 0.3s;
    }

    .remove_orden.active{
        transform: translateX(0);
    }

    .remove_orden:hover{
        color: var(--color-principal);        
    }

    span.sen{
        font-weight: 300;
    }

    span.sen.g{
        color: #289435;
    }

    span.sen.r{
        color: #ff5b5b;
    }
/*Estilos para la tabla*/

.error_404{
    width: 100%;
    height: 100%;
    position: relative;
    justify-content: center;
    text-align: center;
}
.imagenentrada{
    width: 60%;
    height: 80%;
    background: url(../almacenamiento/img/depositphotos.jpg) no-repeat;
    background-size: cover;
    margin-left: auto;
}
.bienvenido{
    margin: 0px;
}
/*
.material-icons{
    width: 10px;
    height: 20px; 
    overflow: hidden;
    border: 1px solid #c1c1c1c1;
    color: transparent;
}

.material-icons.load{
    width: auto;
    height: auto; 
    overflow: visible;
    border: none;
    color: inherit;
}


*/

.Toast_personalizado{
    border-radius: 8px;
}

.chat-detail{
    height: 100%;
}

.chat-detail .ch{
    width: 100%;
    height: 90%;
    padding: 15px 20px;
    background: var(--bk-color,#0046cc2b);
}

.form_cont.fotr_chat{
    padding: 14px 5px 0px 5px;
    height: 10%;
}

.chat-detail article.content-chat{
    display: flex;
    align-items: flex-start;
    margin: 10px 0;
    padding: 14px 0;
    max-width: 500px;
}

.chat-detail article.content-chat.propio{
    flex-direction: row-reverse;
    margin-left: auto;
}

.content-chat .cont{
    width: 100%;
}

.content-chat .cont p{
    margin: 0;
    text-align: justify;
    position: relative;
}

.content-chat .cont p.mg{
    background: #289435;
    border-radius: 0 10px 10px 10px;
    padding: 10px;
}

.content-chat.propio .cont p.mg{
    background: #62ff70;
    border-radius: 10px 0 10px 10px;
}

.content-chat .cont p.mg::after{
    content: '';
    position: absolute;
    top: 0;
    left: -6px;
    border-right: 0px solid transparent;
    border-left: 6px solid transparent;
    border-top: 10px solid #289435;
}

.content-chat.propio .cont p.mg::after{
    right: -6px;
    left: inherit;
    border-right: 6px solid transparent;
    border-left: 0px solid transparent;
    border-top: 10px solid #289435;
}

.content-chat .cont p.title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 400;
}

.content-chat.propio .cont p.title{
    flex-direction: row-reverse;
}

.content-chat .cont p.title span{
    font-weight: 300;
    font-size: 0.8rem;
}

.chat-detail .ch .user-img{
    margin: 0 10px;
}

.chat-detail .ch .user-img .img-circle{
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 100%;
    background: #289435;
}

.chat-detail .ch .user-img .img-circle img{
    min-width: 100%;
    max-width: 120%;
    max-height: 150%;
    min-height: 100%;
}

.color-cont{
    --lado:34px;
    width: var(--lado);
    height: var(--lado);
    border-radius: 8px;
    background: var(--col, red);
    box-shadow: 0 0 1px 0px black;
}

.new-color-selector{
    --lado: 100%;
    width: var(--lado);
    height: 50px;
    border-radius: 8px;
    background: #f6f6f6;
    border: 1px solid #d6d6d6;

    display: flex;
    align-items: center;
}

.new-color-selector .color-muestra{
    --lado: 30px;
    width: var(--lado);
    height: var(--lado);
    background: rgb(0, 0, 0);
    border-radius: 8px;
    /*border: 1px solid rgb(116, 116, 116); */
    margin: 0 10px;
    box-shadow: 0 0 16px -1px #0000003b;
}
i.right.open-search {
    border-radius: 10px;
    float: right;
    margin-left: 15px;
    background: #f4f4f4;
    width: 39px;
    height: 30px;
    display: flex;
    justify-content: center;
    padding-top: 4px;
}
.new-color-selector .input-color{
    width: calc(100% - 30px);
}

.new-color-selector .input-color input{
    border-bottom: none;
    margin: 0;
}

.input-color{
    position: relative;
    margin: 10px 10px;
}

.input-color input[type=color]{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.overflow-v{
    overflow: visible !important;
}

.fixed-scroll-btn{
    width: 40px;
    height: 40px;
    background: var(--color-empr);
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    box-shadow: inset 0px 0px 9px 0px #0000005c, 0px 0px 9px 0px #0000008a;
    cursor: pointer;
}

.fixed-scroll-btn i{
    font-size: 2.5rem;
    transition: all 0.8s;
}

.fixed-scroll-btn.down i{
    transform: rotate(180deg);
}
/*------------------------------------*/
    
    .sidenav .user-view .background{
        filter: brightness(0.5);
    }

    input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]), textarea:focus:not([readonly]) {
        border-bottom: 0 solid transparent;
        -webkit-box-shadow: 0 1px 0 0 transparent;
        box-shadow: 0 1px 0 0 transparent;
    }

    input.valid:not([type]), input.valid:not([type]):focus, input.valid[type=text]:not(.browser-default), input.valid[type=text]:not(.browser-default):focus, input.valid[type=password]:not(.browser-default), input.valid[type=password]:not(.browser-default):focus, input.valid[type=email]:not(.browser-default), input.valid[type=email]:not(.browser-default):focus, input.valid[type=url]:not(.browser-default), input.valid[type=url]:not(.browser-default):focus, input.valid[type=time]:not(.browser-default), input.valid[type=time]:not(.browser-default):focus, input.valid[type=date]:not(.browser-default), input.valid[type=date]:not(.browser-default):focus, input.valid[type=datetime]:not(.browser-default), input.valid[type=datetime]:not(.browser-default):focus, input.valid[type=datetime-local]:not(.browser-default), input.valid[type=datetime-local]:not(.browser-default):focus, input.valid[type=tel]:not(.browser-default), input.valid[type=tel]:not(.browser-default):focus, input.valid[type=number]:not(.browser-default), input.valid[type=number]:not(.browser-default):focus, input.valid[type=search]:not(.browser-default), input.valid[type=search]:not(.browser-default):focus, textarea.materialize-textarea.valid, textarea.materialize-textarea.valid:focus, .select-wrapper.valid>input.select-dropdown, textarea.valid:focus {
        border-bottom: 0px solid #4caf4f00;
        -webkit-box-shadow: 0 0px 0 0 #4caf4f00;
        box-shadow: 0 0px 0 0 #4caf4f00;
    }

    input.invalid:not([type]), input.invalid:not([type]):focus, input.invalid[type=text]:not(.browser-default), input.invalid[type=text]:not(.browser-default):focus, input.invalid[type=password]:not(.browser-default), input.invalid[type=password]:not(.browser-default):focus, input.invalid[type=email]:not(.browser-default), input.invalid[type=email]:not(.browser-default):focus, input.invalid[type=url]:not(.browser-default), input.invalid[type=url]:not(.browser-default):focus, input.invalid[type=time]:not(.browser-default), input.invalid[type=time]:not(.browser-default):focus, input.invalid[type=date]:not(.browser-default), input.invalid[type=date]:not(.browser-default):focus, input.invalid[type=datetime]:not(.browser-default), input.invalid[type=datetime]:not(.browser-default):focus, input.invalid[type=datetime-local]:not(.browser-default), input.invalid[type=datetime-local]:not(.browser-default):focus, input.invalid[type=tel]:not(.browser-default), input.invalid[type=tel]:not(.browser-default):focus, input.invalid[type=number]:not(.browser-default), input.invalid[type=number]:not(.browser-default):focus, input.invalid[type=search]:not(.browser-default), input.invalid[type=search]:not(.browser-default):focus, textarea.materialize-textarea.invalid, textarea.materialize-textarea.invalid:focus, .select-wrapper.invalid>input.select-dropdown, .select-wrapper.invalid>input.select-dropdown:focus, textarea.invalid:focus{
        border-bottom: 0px solid #f4433600;
        -webkit-box-shadow: 0 0px 0 0 #f4433600;
        box-shadow: 0 0px 0 0 #f4433600;
    }

    [type="checkbox"]:checked+span:not(.lever):before {
        border-right: 2px solid var(--color-principal);
        border-bottom: 2px solid var(--color-principal);
    }

    .dropdown-content li>a, .dropdown-content li>span {
        color: #000000;
    }

    .select-wrapper input.select-dropdown:focus {
        border-bottom: none;
    }

    .input-select{
        margin: 10px 10px;
    }

    .input-select .select-wrapper input.select-dropdown{
        width: calc(100% - 20px);
        background: #f2f2f2;
        border-radius: 6px;
        border: none;
        padding: 2px 10px;
    }

    .tabs .tab a:hover, .tabs .tab a.active {
        color: #000000;
    }

    .tabs{
        border-bottom: 2px solid #e0e0e0;
    }

    .tabs .tab{
        background: #f4f4f4;
        border-radius: 10px 10px 0 0;
        line-height: 0;
        font-size: 25px;
        margin-right: 10px;
        border: 1px solid #e0e0e0;
    }

    .tabs .tab a {
        color: #000000;
        display: flex;
        align-items: center;
        margin: 10px 0;
        padding: 0 13px;
        height: 63%;
    }

    .tabs .tab a:focus, .tabs .tab a:focus.active {
        background-color: transparent;
    }

    .tabs .tab a:focus i, .tabs .tab a.active i{
        color: var(--color-principal);
    }

    .tabs .indicator {
        background-color: var(--color-principal);
        max-width: 50px;
    }

    .waves-effect.waves-personaliced .waves-ripple {
        background-color: var(--back-color);
    }
    
    .material-tooltip{
        overflow: visible !important;
        border-radius: 4px;
    }

    .material-tooltip::after{
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8px 8px 8px 0;
        border-color: transparent #323232 transparent transparent;
        position: absolute;
        top: calc(50% - 8px);
        left: -8px;
    }

    .modal_recuperar_contrasena{
        --hg: 218px;
        height: var(--hg);
        top: calc(45% - (var(--hg) / 2)) !important;
        border-radius: 5px;
    }

    .modal_recuperar_contrasena h4{
        text-transform: capitalize;
        font-weight: lighter;
        /* text-align: center; */
        padding-left: 10px;
        margin-bottom: 28px;
    }

    .modal_recuperar_contrasena.modal .modal-footer{
        padding-right: 34px;
    }

    .progress {
        background-color: #e7e7e7;
        width: calc(100% - 20px);
        margin: .5rem 10px 1rem 10px;
        height: 8px;
    }

    .progress .determinate {
        background-color: var(--color-principal);
    }

    .progress .determinate.normal{
        background-color: rgb(80, 80, 80);
    }
    .progress .determinate.media-baja{
        background-color: rgb(120, 177, 120);
    }
    .progress .determinate.media-alta{
        background-color: rgb(67, 185, 67);
    }
    .progress .determinate.segura{
        background-color: rgb(0,255,0);
    }

    .material-icons {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none; 
    }

    .align-items-center{
        display: flex;
        align-items: center;
    }

    .toast .toast-action{
        color: rgb(243, 46, 46);
    }

    .toast.acept .toast-action{
        color: rgb(46, 243, 56);
    }

    .btn:focus, .btn-large:focus, .btn-small:focus, .btn-floating:focus, button:focus{
        color: var(--back-color);
        background-color: var(--text-color);
    }

    .sub-menu{
        position: absolute;
        z-index: 100;
        min-width: 200px;
        margin: 0;

        display: none;

        top: inherit;
        bottom: inherit;
        left: inherit;
        right: inherit;
    }

    .sub-menu .collection-item{
        color: #000 !important;
        cursor: pointer;
    }

    .sub-menu .collection-item:first-child,  .sub-menu .collection-item:first-child:hover{
        cursor: auto;
        background: var(--color-principal) !important;
        color: white !important;
    }

    .sub-menu .collection-item span.badge{
        pointer-events: none;
        color: var(--color-principal);
    }

    .main-preloader-contain{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;
    }

    .select-wrapper+label {
        position: absolute;
        top: -33px;
        font-size: .8rem;
    }
/*------------------------------------*/

/*Media query para moviles*/

@media only screen and (max-width: 1000px){
    .login .imagen {
        width: 0;
    }

    .login .formulario {
        width: 100%;
    }

    /*Menu*/

    .main {
        flex-direction: column;
    }
    .main .contenido {
        width: 100%;
        height: 90vh
    }

    .main .menu {
        width: 100%;
        height: 10vh;
        padding: 10px 20px;
        position: relative;
        box-shadow: 0 -3px 11px -7px rgb(83 83 83);
        order: 2;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: white;
        z-index: 10;
    }
    .sen-anima {
        --tam: 36px;
        --mov: calc((10vh / 2) - (var(--tam)/2));
    }
    .midle {
        display: flex;
        align-items: center;
    }

    .midle .btn-menu {
        margin: 0 20px;
    }

    @keyframes moved {
        20% {transform: scaleY(1)   scaleX(1);}
        40% {transform: scaleY(0.5) scaleX(2);}
        60% {transform: scaleY(0.7) scaleX(1.5);}
        80% {transform: scaleY(0.9) scaleX(0.8);}
        100% {transform: scaleY(1)   scaleX(1);}
    }

    .tabs .tab {
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
    }

    .form_cont.interno {
        padding: 0;
    }

    .modal {
        width: 100%;
        top: 0 !important;
        border-radius: 0;
        max-height: 90%;
    }

    .modal_recuperar_contrasena{
        width: 100%;
    }

    #modal_confirm{
        width: 95%;
        border-radius: 2px;
    }

    #toast-container{
        top: 0 !important;
        max-height: 50px;
    }

    .toast{
        margin: 0;
        top: 0 !important;
    }

    .login .formulario .form_cont {
        width: 100%;
        border-radius: 0;
    }
}

@media (max-width: 800px) {
    .form_container{
        --wd: 100%;
    }    
}
@media screen and (max-width: 1440px){
    .login .formulario{
        width: 100%;
        height: 100vh;
        background:rgba(255, 255, 255, 0.09);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .imagenentrada {
        width: 100%;
        height: 80%;
        background: url(../almacenamiento/img/depositphotos.png) no-repeat;
        background-size: cover;
        margin-right: auto;
    }
}
@media screen and (max-width: 1024px){
    .login .formulario{
      
        padding: 0px;
    }
    .login .imagen {
        width: 40%;
        height: 100vh;
     
    }
    .imagenentrada {
        background-size: contain;
    }
}
@media screen and (max-width: 375px){
    .login .formulario{
      
        padding: 0px;
        margin: -10px;
    }
    .login .imagen {
        width: 0%;
        height: 100vh;
       
    }
    .imagen2{
        background-image: url('../almacenamiento/img/logo.png');
        width: 79%;
        height: 200px;
        background-repeat: no-repeat;
        justify-content: center;
        background-size: 201px;
        
    }
    .login .formulario .form_cont {
        width: 85%;
        background-color: white;
        box-shadow: 0 0 20px -7px rgb(141 141 141);
        border-radius: 6px;
        /* padding: 30px; */
    }
}
@media screen and (max-width: 768px){
    .login .formulario{
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.09);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px;
        margin: 10px;
    }
    .login .imagen {
        width: 0%;
        height: 100vh;
        
    }
}
@media screen and (max-width: 425px){
    .login .formulario{
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.09);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px;
        margin: 10px;
    }
    .login .imagen {
        width: 0%;
        height: 100vh;
        /*filter: blur(3px);*/
    }
    .imagen2{
        background-image: url('../almacenamiento/img/logo.png');
        width: 79%;
        height: 200px;
        background-repeat: no-repeat;
        justify-content: center;
        background-size: 265px;
        
    }
}

@media only screen and (max-width: 500px){
    .align-items-center {
        flex-direction: column;
    }

    .form_cont .input-cont.lateral {
        flex-direction: column; 
    }

    .form_cont .input-cont.lateral.interno .inp input {
        width: calc(100% - 40px);
    }
    .form_cont .input-cont.lateral .inp {
        width: 100%;
    }

    .form_cont .input-cont.lateral.interno .inp {
        margin-bottom: 10px;
    }    

    .form_cont .input-cont.lateral .inp input:focus:not([readonly])+.anima,
    .form_cont .input-cont.lateral .inp input.valid+.anima,
    .form_cont .input-cont.lateral .inp input.invalid+.anima {
        --wd-anim: calc(100% - 20px);
    }

    .photo-contain {
        --diamtro-circle: 150px;
    }
}

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

    .medie-cont.chat {
        width: 100% !important;
        padding: 0 !important;
    }

    .form_cont.fotr_chat .input-cont {
        flex-direction: row !important;
    }

    .form_cont.fotr_chat .input-cont.lateral .inp input {
        width: 94%;
    }

    .form_cont.fotr_chat .input-cont.lateral .btn-per.aprov {
        width: 16%;
    }

    .form_cont.fotr_chat {
        padding: 10px 0;
    }

    .chat-detail article.content-chat {
        font-size: 0.8rem;
    }
}