/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/*
Colores Personalizados
 */

.auth-login-form a, .text-center a{
    color: #007AFF !important;
}
.dropdown-item:hover, .dropdown-item:focus {
    color: #007AFF;
    background-color: rgba(115, 103, 240, 0.12);
}
.form-control:focus {
    /*color: #6e6b7b;*/
    /*background-color: #fff;*/
    border-color: #007AFF !important;
    /*outline: 0;*/
    /*box-shadow: 0 3px 10px 0 rgb(34 41 47 / 10%);*/
}
.input-group:not(.bootstrap-touchspin):focus-within .form-control, .input-group:not(.bootstrap-touchspin):focus-within .input-group-text {
    border-color: #007AFF!important;
    /*box-shadow: none;*/
}
.search-chat-app-form {
    width: 80%;
}
.form-select:focus {
    border-color: #007AFF !important;
}

.btn-primary {
    border-color: #007AFF !important;
    background-color: #007AFF !important;
    color: #fff !important;
}
primary:hover:not(.disabled):not(:disabled) {
    box-shadow: 0 8px 25px -8px #007AFF!important;
}
.btn {

}
:root {
    --bs-recibido-rgb: 42, 157, 143;
    --bs-enviado-rgb: 38, 70, 83;
}
.text-recibido {
    --bs-text-opacity: 1;
    color: #2a9d8f !important;
    /*color: rgba(var(--bs-recibido-rgb), 1) !important;*/
}
.text-enviado {
    --bs-text-opacity: 1;
    color: #264653 !important;
    /*color: rgba(var(--bs-enviado-rgb), 1) !important;*/
}
.text-lastchat{
    color: #667781 !important;
}
.bg-nuevo-mensaje {
    --bs-bg-opacity: 1;
    background-color: #25d365 !important;
}

.chat-application .user-profile-sidebar {
    width: 450px;
    /*border-radius: 0.25rem;*/
    /*border-top-left-radius: 0;*/
    /*border-bottom-left-radius: 0;*/
    /*background-color: #fff;*/
    /*position: absolute;*/
    /*transform: translateX(110%);*/
    /*transition: all 0.3s ease, background 0s, border 0s, color 0s;*/
    /*z-index: 6;*/
    /*right: 0;*/
    /*bottom: 0;*/
    /*top: 0;*/
}
/*.chat-user-list-wrapper li:hover {*/
/*    cursor: pointer;*/
/*    background: red!important;*/
/*}*/

/*.main-menu.menu-light .navigation .navigation-header {*/
/*    color: #a6a4b0;*/
/*    margin: calc(1rem + 0.286rem) 0 0.8rem 2.2rem !important;*/
/*    padding: 0;*/
/*    line-height: 1.5;*/
/*    letter-spacing: 0.01rem;*/
/*}*/

.alert-primary {
    background: rgba(115, 103, 240, 0.12) !important;
    color: red !important;
}

.form-group label{
    margin-top: 5px!important;
    margin-bottom: 5px!important;
}

.main-menu.menu-light .navigation > li.active > a,
.main-menu.menu-light .navigation > li ul .active {
    background: linear-gradient(118deg, #007AFF, rgba(15, 103, 240, 0.7));
    box-shadow: 0 0 0px 0px!important;
    border-radius: 4px;
    z-index: 1;
}

.badge.badge-light-primary {
    background-color: rgba(0, 122, 255, 0.12);
    color: #007AFF !important;
}

.badge.badge-light-principal {
    background-color: rgba(0, 122, 255, 0.12)!important;
    color: #007AFF !important;
}

.chat-app-window .chats .chat-body {
    display: block;
    margin: 10px 0px 0 0 !important;
    overflow: hidden;
}

.chat-application .sidebar-content .chat-user-list-wrapper{
     margin-top: -10px !important;
}

.chat-application .chat-app-window .start-chat-area, .chat-application .chat-app-window .user-chats {
    background-image: url('../../samo/img/bg-chat.png')!important;
    background-color: #EEEAE3!important;
    background-size: 510px!important;
}

/*.chat-application .sidebar-content .chat-user-list-wrapper li.active h1, .chat-application .sidebar-content .chat-user-list-wrapper li.active h2, .chat-application .sidebar-content .chat-user-list-wrapper li.active h3, .chat-application .sidebar-content .chat-user-list-wrapper li.active h4, .chat-application .sidebar-content .chat-user-list-wrapper li.active h5, .chat-application .sidebar-content .chat-user-list-wrapper li.active h6, .chat-application .sidebar-content .chat-user-list-wrapper li.active .card-text, .chat-application .sidebar-content .chat-user-list-wrapper li.active  absolute-layout*/
.chat-nombre{
    color: #111B21 !important;
}


.chat-user-list-wrapper li {
    display: flex;
    flex-wrap: wrap;               /*  added  */
    align-content: flex-start;     /*  added, so they align at the top  */
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid #E9EEF0 !important;
    /*display: flex;*/
    /*background-color: #33ca76 !important;*/
    /*padding: 0.786rem 1.286rem;*/
}
.imgBox2 {
    width: 40%;
    background: lightgray;
    margin: 2px;
}
.imgBox {
    width: 33%;
    background: lightgray;
    margin: 2px;
}

.wrapload{
    width: 65%;
    height: 100px;
    display: inline-block;
    position:absolute;
    bottom: 64px;
    border-radius: 10px 10px 0px 0px;
    border: 1px solid #e8e9ea;
    border-bottom-width: 0px;
    background-color: #fff;
    padding-left: 10px;
}
.wrapload .header{
    padding-top: 5px;
    padding-bottom: 3px;
}
.wrapload .column{
    float: left;

}

/* Burbujas del Chat*/
.chat-application .sidebar-content .chat-user-list-wrapper li.active {
    background-image: linear-gradient(80deg, #f0f2f5, #f0f2f5) !important;
}

.chat-left .chat-content {
    font-size: 12px;
    color: #424147 !important;
    /*background-image: linear-gradient(80deg, #7367f0, #9e95f5)!important;*/
    background-image: linear-gradient(80deg, #FFFFFF, #FFFFFF) !important;
}
.chat-content {
    font-size: 12px;
    color: #424147 !important;
    /*background-image: linear-gradient(80deg, #7367f0, #9e95f5)!important;*/
    background-image: linear-gradient(80deg, #E0FCD6, #E0FCD6) !important;
}
.fs-8{
    font-size: 0.85rem !important;
}
.mw-lg-300px {
    max-width: 320px !important;
}
.mw-lg-400px {
    max-width: 400px !important;
}
.mw-lg-450px {
    max-width: 450px !important;
}
.card-profile-sidebar {
    padding: 0.5rem 0.5rem!important;
}

/*.text-end {*/
/*    text-align: right !important;*/
/*}*/

/*.chat-content .fechaEnvio{*/
/*    font-size: 10.5px;*/
/*    text-align: right;*/
/*    margin-top: 5px;*/
/*}*/

/*
LA PARTE DARK
 */
.btn-dark {
    border-color: #646a6d !important;
    background-color: #646a6d !important;
    color: #fff !important;
}
.dark-layout .badge-light-dark {
    background-color: rgba(255, 255, 255, 0.62) !important;
    color: #4b4b4b !important;
}
.dark-layout .bg-nuevo-mensaje{
    --bs-bg-opacity: 1;
    color: #111b21;
    background-color: #00a884 !important;

}
.dark-layout .chat-content .text-muted {
    color: #cecece !important;
}
.dark-layout .chat-content {
    color: #e9edef !important;
    background-image: linear-gradient(80deg, #005c4b, #005c4b) !important;
}

.dark-layout .chat-left .chat-content {
    font-size: 12px;
    color: #E9EDEF !important;
    /*background-image: linear-gradient(80deg, #7367f0, #9e95f5)!important;*/
    background-image: linear-gradient(80deg, #30394c, #30394c) !important;
}
.dark-layout .chat-application .sidebar-content .chat-user-list-wrapper li.active {
    background-image: linear-gradient(80deg, #30394c, #30394c) !important;
}
.dark-layout .text-lastchat{
    color: #8696A0 !important;
}
.dark-layout .chat-user-list-wrapper li {
    border-bottom: 1px solid #1F2D34 !important;
}
.dark-layout .chat-nombre{
    color: #d0d2d6!important;
}

.dark-layout .chat-application .chat-app-window .start-chat-area, .dark-layout .chat-application .chat-app-window .user-chats {
    background-image: url('../../samo/img/bg-chat-tile-dark.png')!important;
    background-color: #07131d!important;
    background-size: 510px!important;
}

.dark-layout .wrapload{
    width: 65%;
    height: 100px;
    display: inline-block;
    position:absolute;
    bottom: 64px;
    border-radius: 10px 10px 0px 0px;
    border: 1px solid #404656;
    border-bottom-width: 0px;
    background-color: #283046;
    padding-left: 10px;
}