/* SIDEBAR MENU  */
#sidebarCollapse > i{
    color: #eee;
}
#my_menu a{
    border-radius: 10px;
    margin: 10px 10px;
}
#my_menu a:hover{
    background-color: #f1f1f1 !important;
}
#my_menu li.current a{
    color: #34C987 !important;
    background-color: #f1f1f1 !important;
}
#my_menu a.text-primary > div > i{
    color: #34C987 !important;
}
#mysidebar > div > ul > div > li > div > a{
    padding-left: 2px !important;
    padding-right: 2px !important;
}

/* TOPBAR  */
#nav{
background: linear-gradient(160deg, #33C891 0%, #33C891 70%, #39C8AE 100%);
}
#nav > div > div:nth-child(2) > div > div > span{
    color: #eee;
}
#current_bot{
    max-width: none !important;
    border-radius: 8px;
    margin: 10px 10px;
    padding: 2px 8px;
}
#current_bot > i{
    color: #000 !important;
}
#current_bot > div > div > img{
    border-width: 1px;
    border-color: #ffffff24;
    border-style: solid;
}
#nav > div > div:nth-child(2)  span > div > i, #nav > div > div > div > div > span > span > a, #nav > div > div > div > div > span > span, #nav > div:nth-child(1) a{
    color: #fff !important;
}
/* Botón de opciones en edición de Flow*/
#div_edit_ctrls > a > i{
    color: #FFF !important;
}
#div_edit_ctrls.show > a > i{
    color: #000 !important;
}

/* Hover en Botón Guardar Cambios y Publicar */
#btt_save_changes:hover, #btt_publish:not(.disabled), #btt_publish:hover,{
    background-color: #45d696 !important;
}

/* Botones volver, adelante y label 'Guardando...' en edición de Flow*/
#btt_undo:not(.disabled) i, #btt_undo i, #btt_redo:not(.disabled) i, #btt_redo i, #info_saving{
    color: #FFF !Important;
}

div div.mt-nav.row{
    margin-top: 55px !important;
    height: calc(100vh - 55px) !important;
}
body > div.flex.py-3.pl-4.vueapp{
    display: flex;
    justify-content: center;
}
body > div.flex.py-3.pl-4.vueapp > div > p, body > div.flex.py-3.pl-4.vueapp > div > img, body > div.flex.justify-center.items-center.mt-4.pt-4 > div > div > div.flex.flex-row.items-center.my-8 > span{display: none;}

/* Button "Public" on Flows */
#btt_publish{
    border-width: 1px;
    border-color: #FFF;
}

/* Div Save Changes */
#nav #div_save_changes{
    background-color: unset !important;
}
#nav #div_save_changes #btt_save_changes, #nav #div_save_changes #btt_discart_changes{
    border-width: 1px !important;
    border-color: #FFF !important;
}

/* LOGIN */
body > div.flex.justify-center.items-center.mt-4.pt-4 > div > div{

}

/* Botón retroceso de login /en/login cuando pide correo */
body > div.flex.justify-center.items-center.mt-4.pt-4 > div > div.p-2.cursor-pointer{
    background-color: unset !important;
}

/* Botón continuar de login login cuando pide correo */
body > div.flex.justify-center.items-center.mt-4.pt-4 > div > div.flex.flex-col.justify-center.items-center.pl-4.pr-4.md\:pl-8.md\:pr-8.bg-white.rounded-xl.shadow-sm > div.w-100 > div > button:disabled{
    background-color: #33C891 !important;
    border-width: 0px !important;
}

/* Botones SSO */
body > div.flex.justify-center.items-center.mt-4.pt-4 > div > div > div:nth-child(2) > button{
    background-color: #33C891 !important;
    border-width: 0px !important;
}
body > div.flex.justify-center.items-center.mt-4.pt-4 > div > div > div:nth-child(2) > button:hover{
    background-color: #38db9f !important;
    border-width: 0px !important;
}
body > div.flex.justify-center.items-center.mt-4.pt-4 > div > div > div:nth-child(2) > button span{
    color: #eee !important;
}
body > div.flex.justify-center.items-center.mt-4.pt-4 > div > div > div:nth-child(2) > div > a:hover{
    color: #33C891 !important;
}
body > div.flex.justify-center.items-center.mt-4.pt-4 > div > div > div.vueapp.w-full.my-4.flex.flex-row.justify-evenly.hover\:text-blue-500 > a:hover{
    color: #33C891 !important;
}

body > div.flex.justify-center.items-center.mt-4.pt-4 > div > div > div:nth-child(2) > button:nth-child(3) > div > i{
    color: #FFF !important;
}

/* CARDS DE HERRAMIENTAS */
#mainapp > div.mt-nav.row > div.maincontainer.large > div.maincontainer1.mx-auto > div > div > div > a > div{
    border-color: #33C891;
    border-width: 1px;
    border-style: solid;
}

/* SETTINGS */

/* Channels Messenger */
#hMessenger{
    background-color: #D1E1FF !important;
    border-radius: 5px !important;
}

/* Channels Whatsapp */
#hWhatsApp{
    background-color: #E1F9EB !important;
    border-radius: 5px !important;
}

/* Channels Instagram */
#hInstagram{
    background-color: #F9DCEB !important;
    border-radius: 5px !important;
}

/* INBOX CONVERSACIONES */
#app2 > div.row > div.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 > div > div:nth-child(3) > div > div.px-2{
    padding: 0px !important;
}
#app2 > div.row > div.h-device.border.border-top-0.border-right-0.border-bottom-0.py-2.col-12.col-md-3 > div > div:nth-child(3) > div > div.px-2 > div{
    background-color: #ffff0057 !important;
    padding: 0px 8px !important;
    border-radius: 5px !important;
}

/* botón micrófono */
#app2 > div.row > div.h-device.p-0.col-12.col-md-6 > div > div > div.chat-input-c > div > div.d-flex.justify-content-between.align-items-center > div.d-flex.align-items-center > div > i{
    color: tomato !important;
}
/* botón AI */
#app2 > div.row > div.h-device.p-0.col-12.col-md-6 > div > div > div.chat-input-c > div > div.d-flex.justify-content-between.align-items-center > div.d-flex.align-items-center > span.el-tooltip > span > div > i{
    color: #007bff !important;
}

/* Input Prompt de Agentes AI */
#mainapp > div.mt-nav.row > div > div:nth-child(2) > div > div > div.div_text_c > textarea{
    max-height: 600px !important;
}

/* Span contador de mensajes */
#num_live_chat{
    color: #FFF !important;
}