/*=========================================================
    CDmx Contact Center Framework
    Theme.css
    Release 2.2.1
=========================================================*/
/* Theme CSS Release 2.2.2 */

/*=========================================================
    PANEL
=========================================================*/

#cc-panel{

    position:fixed;

    right:20px;

    bottom:100px;

    width:340px;

    background:#FFFFFF;

    border-radius:18px;

    box-shadow:0 12px 40px rgba(0,0,0,.18);

    overflow:hidden;

    display:none;

    z-index:999998;

}


/*=========================================================
    BOTON FLOTANTE
=========================================================*/

#cc-button{

    position:fixed;

    right:20px;

    bottom:20px;

    width:68px;

    height:68px;

    border-radius:50%;

    background:#25D366;

    color:#FFFFFF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    cursor:pointer;

    user-select:none;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

    z-index:999999;

}


/*=========================================================
    CARD
=========================================================*/

.cc-card{

    background:#FFFFFF;

}


/*=========================================================
    HEADER
=========================================================*/

.cc-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:12px 20px 8px;

    border-bottom:none;

}

.cc-brand{

    margin-bottom:6px;

}

/*==================================================
  Logos
==================================================*/

.cc-header-home .cc-brand img{

    width:155px;

    height:auto;

    display:block;

}

.cc-header-page .cc-brand img{

    width:95px;

    height:auto;

    display:block;

}

.cc-header-page{

    padding-top:8px;
    padding-bottom:4px;

}

.cc-title{

    font-size:20px;

    font-weight:700;

    color:#174A41;

    line-height:1.1;

    text-align:center;

}

.cc-slogan{

    margin-top:2px;

    color:#7A7A7A;

    font-size:14px;

    text-align:center;
    
    line-height:1.35;

}

/*=========================================================
    MENU
=========================================================*/

.cc-menu{

    padding:14px;

}

.cc-menu-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:12px 16px;
    
    margin-bottom:8px;

    background:#F7F8F9;

    border-radius:12px;

    cursor:pointer;

    transition:.20s;

}

.cc-menu-item:last-child{

    margin-bottom:0;

}

.cc-menu-item:hover{

    background:#E8F5EF;

}

.cc-menu-icon{

    width:40px;

    text-align:center;

    font-size:24px;

}

.cc-menu-title{

    flex:1;

    color:#174A41;

    font-size:17px;

    font-weight:600;

    display:flex;

    flex-direction:column;

}

.cc-menu-arrow{

    color:#B5B5B5;

    font-size:22px;

}

.cc-menu-content{

    display:flex;

    flex-direction:column;

    flex:1;

}

.cc-menu-description{

    margin-top:4px;

    font-size:.88rem;

    color:#666;

}

/*==================================================
  TOAST
==================================================*/

#cc-toast{

    position:fixed;

    top:20px;

    right:20px;

    width:320px;

    padding:16px;

    background:#1f2937;

    color:#fff;

    border-radius:12px;

    box-shadow:0 8px 25px rgba(0,0,0,.25);

    opacity:0;

    transform:translateY(-20px);

    transition:all .25s ease;

    z-index:999999;

    font-family:inherit;

}

#cc-toast.show{

    opacity:1;

    transform:translateY(0);

}

.cc-toast-title{

    font-weight:700;

    margin-bottom:8px;

}

.cc-toast-message{

    font-size:14px;

    line-height:1.4;

}

/*==================================================
  HEADER COMPACT
==================================================*/

.cc-header-compact{
    
    display:flex;

    align-items:center;

    padding:18px 20px;

}

.cc-header-row{

    display:flex;

    align-items:center;

}

.cc-header-row .cc-logo{

    width:56px;

    margin-right:14px;

}

.cc-header-row .cc-title{

    margin:0;

    font-size:32px;

}

.cc-header-row .cc-slogan{

    margin-top:2px;

}

.cc-header-compact .cc-brand{

    margin:0 14px 0 0;

    flex-shrink:0;

}

.cc-header-content{

    flex:1;

}

.cc-header-compact .cc-title{

    margin:0;

}

.cc-header-compact .cc-slogan{

    margin-top:4px;

}


/*==================================================
  Footer
==================================================*/

.cc-footer{

    margin-top:20px;

    padding:16px 0 10px;

    text-align:center;

}

.cc-footer-message{

    font-size:14px;

    color:#6B7280;

    margin-bottom:4px;

}

.cc-footer-version{

    font-size:12px;

    color:#9CA3AF;

    letter-spacing:.5px;

}