*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: '';*/

}
body{
    justify-content: center;
    align-items: center;
    /*min-height: 100vh;*/
    background-color: #fff;

    /*min-height: 1000px;*/
    /* Match the fixed .navigation rail width (70px) so full-bleed content
       (the footer) sits flush against the sidebar with no white gutter;
       80px left a ~5px gap past the rail's 5px box-shadow. */
    margin-left: 70px;
    padding-top: 60px;
    /*padding-left: 50px;*/
    padding-right: 20px;
    min-width: 600px;
}
.page-content{
    padding-top: 70px;
    padding-left: 80px;
    /* Fill at least the viewport and lay children out in a column so the
       footer can be pushed to the bottom even when the page is short
       (margin-top:auto on .footer-basic below). box-sizing keeps the
       padding inside the 100vh so there is no spurious scrollbar. */
    box-sizing: border-box;
    /* Subtract the body's own padding-top (60px) so 100vh worth of content
       fits WITHOUT overflowing into a spurious bottom scroll gap. */
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
}
ion-icon {
    pointer-events: none;
}
/* width */
::-webkit-scrollbar {
    width: 15px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 1px 1px 5px grey;
border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #4C7DF0;
border-radius: 20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #265092;
}

.navigation
{
    position: fixed;
    display: flex;
    left: 0;
    top: 60px;
    /*width: inherit;*/
    width: 70px;
    min-height: 100%;
    height: -webkit-fill-available;
    background-color: #0C1526;
    box-shadow: 5px 0 0 #4C7DF0;
    /*border-left: 10px solid #0C1526;*/
    overflow-x: hidden;
    transition: width 0.5s;
    margin-bottom: 60px;
}

/* width */
.navigation::-webkit-scrollbar {
    width: 5px;
}
/* Track */
.navigation::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}

/* Handle */
.navigation::-webkit-scrollbar-thumb {
background: #4C7DF0;
border-radius: 20px;
}

/* Handle on hover */
.navigation::-webkit-scrollbar-thumb:hover {
background: #265092;
}

.navigation:hover{
    width: 270px;
    /*width: inherit;*/
}
.navigation.static:hover{
    width: 70px;
    /*width: inherit;*/
}
.navigation.static.shownav:hover{
    width: 270px;
    /*width: inherit;*/
}
.shownav{
    width: 270px;
}

.navigation .submenu{
    /*display: none;*/
    position: fixed;
    display: flex;
    background-color: #4C7DF0;
    height: 100%;
    height: -webkit-fill-available;
    overflow-x: hidden;
    margin-left: 70px;
    width: 0;
    left: 0;
    transition: all 0.5s;
}
/* .navigation .submenu .sublist{
    display: none;
    position: fixed;
    display: none;
} */
.navigation .submenu .sublist ul{
    padding-bottom: 7px;
}
.navigation .submenu .sublist li{
    margin-left: 15px;
}
.navigation .submenu .sublist li a{
    width: 90%;
    border-radius: 15px;
}
.navigation .submenu .sublist li a:hover{
    background-color: #689ff7;
}
.navigation .submenu.current{
    box-shadow: 5px 0 0 #265092;
}
.navigation:hover .submenu{
    margin-left: 270px!important;
    /*padding-right: 10px;*/
}
.showsubmenu{
    width: 270px !important;
    margin-left: 270px!important;
    /*padding-right: 10px;*/
}
.navigation div.submenu:hover{
    display: flex !important;
    width: 270px !important;
    margin-left: 270px!important;
    /*padding-right: 10px;*/
}
.navigation.static div.submenu{
    margin-left: 270px!important;
    /*padding-right: 10px;*/
}
.navigation div ul li a{
    white-space: nowrap;
}

/* width */
.navigation .submenu::-webkit-scrollbar {
    width: 5px;
}
/* Track */
.navigation .submenu::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}

/* Handle */
.navigation .submenu::-webkit-scrollbar-thumb {
background: #4C7DF0;
border-radius: 20px;
}

/* Handle on hover */
.navigation .submenu::-webkit-scrollbar-thumb:hover {
background: #4C7DF0;
}

.navigation ul{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding-left: 5px;
    /*padding-top: 40px;*/

}

.navigation ul li{
    position: relative;
    list-style: none;
    width: 100%;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
}

.navigation ul li.active{
    background-color: #4C7DF0;

}

.navigation ul li a{
    position: relative;
    display: block;
    width: 100%;
    display: flex;
    text-decoration: none;
    color: #fff;
}
.navigation ul li button.sidebar-item-control{
    position: relative;
    display: flex;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.sidebar-submenu-toggle,
.submenu-back{
    display: none;
}

.active_submenu{
    background-color: #265092;
}

.active_submenu::before{
    content: '';
    position: absolute;
    top: -30px;
    right: 0;
    width: 30px;
    height: 30px;
    background-color: #4C7DF0;
    border-radius: 50%;
    box-shadow: 15px 15px 0 #265092;
    z-index: -1;
}

.active_submenu::after{
    content: '';
    position: absolute;
    bottom: -30px;
    right: 0;
    width: 30px;
    height: 30px;
    background-color: #4C7DF0;
    border-radius: 50%;
    box-shadow: 15px -15px 0 #265092;
    z-index: -1;
}

.navigation ul li.active a::before{
    content: '';
    position: absolute;
    top: -30px;
    right: 0;
    width: 30px;
    height: 30px;
    background-color: #0C1526;
    border-radius: 50%;
    box-shadow: 15px 15px 0 #4C7DF0;
    z-index: -1;
}

.navigation ul li.active a::after{
    content: '';
    position: absolute;
    bottom: -30px;
    right: 0;
    width: 30px;
    height: 30px;
    background-color: #0C1526;
    border-radius: 50%;
    box-shadow: 15px -15px 0 #4C7DF0;
    z-index: -1;
}

.navigation ul li a .icon,
.navigation ul li button.sidebar-item-control .icon{
    position: relative;
    display: block;
    min-width: 60px;
    height: 60px;
    line-height: 70px;
    text-align: center;
}

.navigation ul li a .icon.center_small{
    min-width: 11px;
    /* height: 10px; */
    top: 23px;
    left: 25px;
    max-width: 10px;
    line-height: 1px;
    position: absolute;
    /* text-align: center; */
    font-size: 8px;
}

.navigation ul li a .icon.center_smll{
   min-width: 10px;
   top: 14px;
   left: 26px;
   max-width: 10px;
   line-height: 1px;
   position: absolute;
   font-size: 5px;
}

.navigation ul li a .icon.top_small{
    min-width: 10px;
    /* height: 10px; */
    top: 11px;
    left: 37px;
    max-width: 10px;
    line-height: 1px;
    position: absolute;
    /* text-align: center; */
    font-size: 8px;
}

.navigation ul li a .subicon{
    position: relative;
    display: block;
    min-width: 60px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    transition: transform .5s;
}

.navigation ul li.hassubmenu a .subicon.toorotate {transform: rotate(90deg);}

.navigation ul li.collapsed.hassubmenu a .subicon.toorotate {transform: rotate(0deg);}

.navigation ul li a .icon ion-icon,
.navigation ul li button.sidebar-item-control .icon ion-icon{
    position: relative;
    font-size: 1.5em;
    z-index: 1;
}

.navigation ul li a .title,
.navigation ul li button.sidebar-item-control .title{
    position: relative;
    display: block;
    padding-left: 10px;
    height: 60px;
    line-height: 60px;
    white-space: nowrap;
}

.large_title{
    line-height: 20px !important;
    padding-top: 10px;
    white-space: normal !important;
}

.navigation ul li a .subtitle{
    position: relative;
    display: block;
    padding-left: 10px;
    height: initial;
    line-height: 40px;
    white-space: pre-wrap;
}

nav {
    height: 60px;
    width: 100%;
    background-color: #0C1526;
    position: fixed;

    left: 0;
    top: 0;
    /*display: -webkit-inline-box;*/
}
nav, .navigation{
    z-index: 1000;
}
label.logo{
    font-size: 25px;
    color: #fff;
    padding: 0;
    /*line-height: 60px;*/
    white-space: nowrap;
    font-weight: bold;
    margin-left: 10px;
    margin-bottom: 0 !important;
}

label.logo a{
    color: currentColor;
    font-weight: normal;
    font-size: 1rem;
    padding: 0!important;
}


label.logo a img{
    height: 58px;
    top: -6px;
    position: relative;
    margin-right: 20px;
    margin-top: 7px;
}

.img-icon{
    width: 24px;
    height: 24px;
    display: block;
    position: absolute;
    top: 18px;
    left: 18px;
}

nav ul.items{
    float: right;
    margin-right: 40px;
    padding-top: 5px;
}


nav ul.items li{
    display: inline-grid;
    margin: 0 8px;
    /*line-height: 60px;*/
}

nav ul.items li.notifs_go{
    display: none;
}

nav ul.items li h3{
    color: #fff;
}

nav ul.items li a{
    color: #fff;
    font-size: 14px;
    /*text-transform: uppercase;*/
    border: 1px solid transparent;
    padding: 7px 10px;
    border-radius: 5px;
}

nav ul.items li a.notif_button{
    border-radius: 50%;
    width: 35px;
}
nav ul.items li a.notif_button::after{
    position: relative;
    left: 10px;
}
nav ul.items li input{
    border: 1px solid grey;
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
    width: 70px;
    line-height: 30px;
}

nav ul.items li a.active,nav ul.items li a:hover{
    background-color:#4C7DF0;
    text-decoration: none;
}

nav ul.items li a.currently{
    border: 1px solid grey;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 20px;
}

nav ul.items li a.currently:hover{
    color: #fff;
}

nav .form-inline{
    justify-content: center;
}

nav #icon_togle{
    color: #fff;
    font-size: 25px;
    line-height: 60px;
    float: right;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}

.widget{
    min-height: 1000px;
    /*width: 80%;*/
    margin-left: 80px;
    padding-top: 60px;
    padding-left: 50px;
    padding-right: 50px;
    /*max-width: 400px;*/
    /*padding-right: 60px;*/
}

.pagination{
    display: flex !important;
}

.btn-4 {
  --clr: #4C7DF0;
  --outline: 2px solid #4C7DF0;
  color: var(--clr);
  outline: var(--outline);
  border: var(--outline);
  outline-offset: -2px;
  transition: outline-offset 200ms ease;
}

.btn-4:hover,
.btn-4:focus {
  outline: var(--outline);
  outline-offset: 2px;

  background-color: #4C7DF0 !important;
   /* because of normalize */
}
.num_notifs{
    position: absolute;
    top: -9px;
    left: 23px;
    padding: 1px 10px;
    border-radius: 50%;
    background-color: red;
    color: white;
    transition: all .2s;
}

.notifs_show:hover .num_notifs{
    top: -20px;
}

.notifs_show:hover .dropdown-menu-custom {
    height: 600px;
}
.dropdown-menu-custom {
    background-color: #9998a3;
    display: flex;
    position: fixed;
    top:48px;
    right: 29px;
    max-inline-size: min-content;
    border-radius: 10px;
    overflow-x: hidden;
    box-shadow: 5px 5px 5px #4C7DF0;
    height: 0;
    transition: all .2s;
    z-index: 1000;
}
.notif_date{
    display: block;
    font-size: 11px;
    opacity: .8;
}
.notifs_show:hover .dropdown-menu-custom{
    height: 600px;
}

.dropdown-menu-custom.show {
    height: 600px;
}

.btn_login{
    font-size: 1rem;
}

.btn_login a{
    font-size: 1.1rem !important;
    display: flex;
}

.login_icon{
    font-size: 1.2rem;
    margin-right: 5px;
}

.foot1{
    background-color: #4C7DF0;
    margin-top: 100px;
    /* display: flex; */
    position: relative;
    /* height: 150px; */
    width: auto;
    margin-left: -6px;
    margin-right: -20px;
    /* left: 0; */
    padding: 50px 90px;
    /* margin-left: 75px; */
    border-top: 5px solid #265092;
    /* border-left: 5px solid black; */
    box-shadow: 0px -11px 18px #265092;
    /* bottom: 0; */
}

.foot{
    background-color: #4C7DF0;
    margin-top: 100px;
    padding: 50px 90px;
    border-top: 5px solid #265092;
    box-shadow: 0px -11px 18px #265092;
    position: inherit;
    bottom: 0;
    width: 100%;
    margin-left: -80px;
}
.foot.inner{
    width: 100%;
}





.footer-basic {
    background: rgb(65,135,246);
    background: linear-gradient(0deg, rgba(65,135,246,1) 0%, rgba(65,135,246,0.8967512542126226) 100%);
    background: linear-gradient(0deg, rgba(65,135,246,1) 0%, rgba(65,135,246,0.75) 100%);
    padding:40px 0;
    position: absolute;

    color:#ffff;

    width: 100%;
    margin: auto;
    padding: 30px 100px 20px;
    margin-left: -80px;
    margin-top: 75px;
}

.footer-basic ul {
  padding:0;
  list-style:none;
  text-align:center;
  font-size:18px;
  line-height:1.6;
  margin-bottom:0;
}

.footer-basic li {
  padding:0 10px;
}

.footer-basic ul a {
  color:inherit;
  text-decoration:none;
  opacity:0.8;
}

.footer-basic ul a:hover {
  opacity:1;
}

.footer-basic .social {
  text-align:center;
  padding-bottom:25px;
}

.footer-basic .social > a {
  font-size:24px;
  width:40px;
  height:40px;
  line-height:40px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  border:1px solid #ccc;
  margin:0 8px;
  color:inherit;
  opacity:0.75;
}

.footer-basic .social > a:hover {
  opacity:0.9;
}

.footer-basic .copyright {
  margin-top:15px;
  text-align:center;
  font-size:13px;
  color:inherit;
  margin-bottom:0;
}


.footer-basic.fixed-bootom{
    position: absolute;
    bottom: 0;
}
.footer-basic.footer-hidden{
    display:none;
}
/* SPA: the footer flows inline at the end of .page-content (the legacy
   version is a JS-revealed absolute overlay). Undo the absolute
   positioning and the -80px rail offset so it spans the content column;
   margin-top:auto pushes it to the bottom of the flex column, so it stays
   pinned to the bottom regardless of how short the page content is. */
.page-content > .footer-basic{
    position: static;
    width: auto;
    /* margin-top:auto pins it to the bottom of the flex column. The
       negative left/right margins are a full-bleed: they cancel the
       page-content padding-left (80px) and the body padding-right (20px)
       so the blue band reaches the sidebar edge and the viewport's right
       edge instead of leaving white gutters. */
    margin: auto -20px 0 -80px;
}







.line_divisor{
    background-color:  #265092;
    display: flex;
    position: absolute;
    width: 4px;
    height: 100%;
    height: -webkit-fill-available;
    top: 0px;
    transition: all 0.5s;
}
.line_divisor.ldleft{
    left: 0px;
}
.line_divisor.ldright{
    right: 0px;
}

.navigation:hover .line_divisor{
    left: 200px;
}

.spaced{
    display: flex;
    justify-content: space-between;
}
.contact-details{
    display: flex;
    width: max-content;
    color: #ffff;
    padding-right: 60px;
}

.contact-details p,.contact-details a{
    color: #ffff;
    /*font-size: 14px;*/
    line-height: 1.86;
}

.social-links{
    display: flex;
    width: 450px;
    justify-content: flex-end;
}

.spaced a{
    color: #ffff;
}
.spaced a:hover{
     color: #ffc200 !important;
}
.vline-div{
    padding: 0 10px;

}
@media (max-width: 1048px){
    label.logo{
        font-size: 25px;
        /*padding-left: 100px;*/
    }
    nav ul.items{
        margin-right: 20px;
    }
    nav ul.items li a{
        font-size: 17px;
    }
    /*.widget{
        max-width: 400px;
    }*/
}

@media (max-width: 1066px){
    body{
        min-width: 0;
        margin-left: 0;
        padding-right: 0;
    }
    .page-content{
        width: 100%;
        padding: 12px 12px 80px;
    }
    /* Cancel the 12px side / 80px bottom padding here so the footer still
       reaches the viewport edges and the bottom (otherwise the 80px
       padding-bottom shows as a white gap under the footer on narrow
       windows). */
    .page-content > .footer-basic{
        margin: auto -12px -80px;
    }
    nav{
        display: block;
        /* One toggle opens BOTH the navbar strip and the sidebar rail here, so
           they coexist and can overlap: `ul.items` is height:auto and grows
           past the 120px the open rail starts at. `nav` and `.navigation` share
           z-index 1000 and are siblings, so DOM order decided it — the rail,
           which comes later, swallowed clicks on every navbar item below 120px
           (login, notifications). The strip the toggle just opened has to win.
           KEEP THIS. It only settles who paints on top; the overlap itself is
           fixed by `Widgets.Sidebar.navbarStripBottom`, which measures where the
           strip ends and starts the open rail there, since the 120px below is
           an ASSUMPTION about a height:auto element and was 38px short. Raising
           the rail above `nav` instead would just restore the older bug. */
        z-index: 1001;
    }
    nav #icon_togle{
        display: block;
        width: 60px;
        height: 60px;
        margin-right: 8px;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: center;
    }
    nav ul.items{
        position: fixed;
        width: 100%;
        height: auto;
        min-height: 60px;
        background-color: #4f4e5d;
        top: 60px;
        left: -100%;
        text-align: center;
        z-index: 2;
        transition: all .5s;
        margin: 0;
        padding: 8px 0;
        overflow-y: auto;
    }
    nav ul.items li{
        display: block;
        margin: 0;
        line-height: 30px;
    }
    nav ul.items li a{
        font-size: 20px;
    }
    /*nav ul.items li a.active,nav ul.items li a:hover{
        border: none;
        color:#4C7DF0;
    }*/
    nav ul.items.show{
        left: 0;
    }
    nav ul.items li.notifs_go{
        display: block;
    }
    nav ul.items li.notifs_show{
        display: block;
    }
    .navigation{
        top: 60px;
        bottom: 0;
        left: -100%;
        width: min(82vw, 320px);
        height: auto;
        min-height: 0;
        overflow-y: auto;
        transition: left .3s;
    }
    .navigation:hover,
    .navigation.mobile-open{
        left: 0;
        width: min(82vw, 320px);
    }
    .navigation.mobile-open{
        top: 120px;
    }
    .navigation .submenu,
    .navigation:hover .submenu{
        top: 120px;
        bottom: 0;
        left: 0;
        height: auto;
        margin-left: 0 !important;
        z-index: 1;
    }
    .navigation .submenu.showsubmenu{
        width: min(82vw, 320px) !important;
        margin-left: 0 !important;
    }
    .navigation .submenu-back{
        display: block;
        width: 100%;
        min-height: 48px;
        padding: 8px 15px;
        border: 0;
        border-bottom: 1px solid rgba(255,255,255,.35);
        background: #265092;
        color: #fff;
        text-align: left;
    }
    .navigation .sidebar-submenu-toggle{
        position: absolute;
        top: 8px;
        right: 8px;
        display: block;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #fff;
        z-index: 1;
    }
    .navigation #li_community > a{
        padding-right: 52px;
    }
    .dropdown-menu-custom{
        max-width: calc(100vw - 24px);
        right: 12px;
    }
    .chats_container{
        right: 12px;
        left: 12px;
        bottom: 12px;
    }
    /* The docked window needs the same span as the contact panel above it.
       Left on its desktop `right: 74px` (which only exists to clear the
       corner launcher), a .chat at max-width calc(100vw - 24px) started at
       390 - 74 - 366 = -50px, hanging off the left edge of the screen. */
    .chat_window_dock{
        right: 12px;
        left: 12px;
        bottom: 12px;
    }
    .chat{
        width: 100%;
        max-width: calc(100vw - 24px);
        margin-left: 0;
    }
    .chat .chat_content{
        max-height: calc(100vh - 210px);
    }
    .chat_msn,
    .chat_mesage_image{
        max-width: 100%;
    }
    /*.widget{
        max-width: 400px;
    }*/
}
@media (max-width: 600px){
    label.logo a img{
        margin-right: 0;
    }
    .brand-tagline{
        display: none;
    }
}
.alert{
    position: fixed;
    bottom: 0;
    width: 1140px;
    z-index: 11000;
    transition: all 1s 6s;
}
.hide_alert_normal{
    transform: translateY(70px);
}
.hide_alert_fast{
    transition: all 1s .5s;
    transform: translateY(70px);
}
.alert:hover{
    transform: translateY(0px);
}
@media (min-width: 1200px){
    .alert{
        width: 1140px;
}
}
@media (min-width: 992px){
    .alert {
        width: 960px;
    }
}
@media (min-width: 768px){
    .alert {
        width: 720px;
    }
}
@media (min-width: 576px){
    .alert {
        width: 540px;
    }
}
.alert.alert-default{
    background-color:#D9DEDE;
}

.chat_container{
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1040;
}
.chat_container ul{
    position: relative;
    display: flex;
    flex-direction: column-reverse;

}
.chat_container ul li{
    position: relative;
}
.chat_container .burble{
    padding: 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor:pointer;
    text-align: center;
}
.chat_container .burble.chat_burble{
    padding: 0;
    margin-bottom: 15px;
    background-color: black;
}
.chat_container .burble .icon_burble{
    font-size: 1.5rem;
}
.chat_container .burble.chats{
    background-color: #3653DA;
    color: white;
}
.send_message_user{
    height: 50px;
    align-self: center;
    padding: 10px;
    border-radius: 50%;
    width: 50px;
    font-size: 21px;
    color: white;
    background-color: #3653DA;
    border: none;
    margin-left: 15px;
}
.send_message_user:focus{
    outline:none;
}
.send_message_user span{
    position: relative;
    left: 0;
    top: 0;
}

.chat_conversation{
    display:none;
}
.chat_container .name_burble{
    position: absolute;
    right: 54px;
    bottom: 2px;
    padding: 5px;
    border: 1px solid;
    border-radius: 30px;
    background-color: rgba(217, 222, 222,0.8);
    opacity: 0;
    transition: all .3s;
    visibility: hidden;
}
.chat_container .name_burble.chat_name_burble{
    bottom: 20px;
}
.chat_container .name_burble.chat_name_burble p{
    width: max-content;
}
.chat_container ul li:hover .name_burble{
    opacity: 1;
    visibility: visible;
}
.chat_container .name_burble p{
    margin: 0;
    color: black;
}
.chats_container{
    display: flex;
    flex-direction: row-reverse;
    position: fixed;
    bottom: 14px;
    right: 74px;
}
/* Docked conversation window: fixed just LEFT of the corner launcher so it
   never widens .chat_container and pushes the launcher off the corner. */
.chat_window_dock{
    position: fixed;
    bottom: 14px;
    right: 74px;
    z-index: 1040;
}
.chat{
    position: relative;
    background-color: #5E5F6F;
    padding: 10px;
    border-radius: 15px;
    width: 450px;
    height: fit-content;
    margin-top: auto;
    margin-left: 12px;
}
.chat .chat_header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.chat.chats_div .chat_header{
    justify-content: flex-end;
}
.img_user_other{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #352B38;
}

.chat .chat_title a{
    color: #C0C7C8;
    font-size: 20px;
    margin-left: 8px;
}
.chat .chat_title a:hover{
    color: #ffff;
}
.chat .chat_content{
    display: flex;
    flex-direction: column-reverse;
    background-color: white;
    padding: 5px 15px;
    min-height: 70px;
    max-height: 500px;
    border-radius: 15px;
    overflow: auto;
}
.chat .chat_content input{
    display:block;
}
.chat .chat_content input.chat_conversation{
    display:none;
}

.chat_msn{
    border: solid 1px grey;
    padding: 4px;
    max-width: 300px;
    min-width: 70px;
    /* margin: 0; */
    border-radius: 12px;
    background-color: #eeeeee;
    position: relative;
    right: 0;
    display: block;
    max-height: 150px;
    overflow: hidden;
    transition: all .3s;
    transition: background-color 1s;
    border-bottom-left-radius: 0;
}
/*.chat_msn_div div p:before {
  border-bottom-right-radius: 0.8rem 0.7rem;
  border-left: 1rem solid red;
  left: -0.35rem;
  transform: translate(0, -0.1rem);
}

.chat_msn_div div p:after {
  background-color: green;
  border-bottom-right-radius: 0.5rem;
  left: 20px;
  transform: translate(-30px, -2px);
  width: 10px;
}
*/

.chat_msn_div.owner .chat_msn{
    text-align: end;
    background-color: #4C7DF0;
    color: #ffff;
    border: solid 1px #58B5FA;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 12px;
}


/*
.chat_msn_div.owner .chat_msn::before{
  border-bottom-left-radius: 0.8rem 0.7rem;
  border-right: 1rem solid #248bf5;
  right: -0.35rem;
  transform: translate(0, -0.1rem);
}
.chat_msn_div.owner .chat_msn::after{
  background-color: #eeeeee;
  border-bottom-left-radius: 0.5rem;
  right: -40px;
  transform:translate(-30px, -2px);
  width: 10px;
}
*/
.chat_msn.referenced{
    background-color: #a6a6a6;
    transition: background-color .3s;
}
.chat_msn.owner{
    right: -45px;
}
.chat button{
    padding: 3px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    text-align: center;
    background-color: transparent;
    border: none;
    transition: all .3s;
    color: #ffff;
    position: relative;
}
.chat button:focus{
    outline:none;
}
.chat button:hover{
    border: 1px solid #3C3343;
    background-color: #D9DEDE;
    color: black;
}
.chat button.btn_remove{
        margin-left: 5px;
}
.chat button span{
    top: 7px;
    position: absolute;
    left: 9px;
}
.chat .chat_footer{
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    position: relative;
}

.conversation_div{
    display: flex;
    border: 1px solid #A8AEB2;
    padding: 5px;
    border-radius: 7px;
    margin-top: 5px;
    cursor: pointer;
    transition: all .2s;
}
.conversation_div p{
    margin: 0;
    align-self: center;
    margin-left: 15px;
}
.conversation_div:hover{
    background-color: #8F959C;
}
.conversation_div:hover p{
    color: #ffff;
}
.num_not_read{
    position: absolute;
    top: -4px;
    right: -7px;
    background-color: red;
    color: white;
    padding: 5px;
    border-radius: 50%;
    width: 23px;
    height: 23px;
    text-align: center;
    font-size: 11px;
    transition: all 2s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 2;
    -webkit-animation-iteration-count: 2;
}
.num_not_read.one_more{
    -webkit-animation-name: bounce;
    animation-name: bounce;
}
@-webkit-keyframes bounce {
  0%, 30%, 60%, 100% {
    -webkit-transform: translateY(0);
  }
  15% {
    transform: translateY(-8px);
  }
  45% {
    transform: translateY(-5px);
  }
  80% {
    transform: translateY(-3px);
  }
}
@keyframes bounce {
  0%, 20%, 60%, 100% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-8px);
  }
  40% {
    transform: translateY(-5px);
  }
  80% {
    transform: translateY(-3px);
  }
}
.num_not_read.nothing{
    display: none;
}
.chat_mesage_answer, .chat_mesage_file{
    position: relative;
    display: flex;
    background-color: #767A86;
    border-radius: 17px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.chat_mesage_answer.no_answer, .chat_mesage_file.no_file{
    position:absolute;
    display:none;
}
.chat_mesage_file.yes_answer{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.chat_mesage_answer p, .chat_mesage_file p{
    width:100%;
}

.chat .chat_footer .chat_mesage{
    width: 100%;

}
.buttons_chat{
    display: flex;
    align-items: flex-end;
    padding-bottom: 4px;
}
.chat .chat_footer .chat_mesage textarea{
    width: 100%;
    border-radius: 17px;
    padding: 5px 10px;
    border: none;
    resize: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.chat .chat_footer .chat_mesage.no_files textarea{
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
}

.chat .chat_footer .chat_mesage textarea:focus{
    outline:none;
}

/* .chat .chat_footer .button_send{
    bottom: 6px;
    position: absolute;
    right: 0px;
} */
.chat_middle{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.chat_msn_div.owner .chat_middle {
    align-self: flex-end;
    align-items: flex-end;
}
.chat_middle_text{
    display: flex;
    align-items: center;
}
.chat_actions{
    display: flex;
    flex-direction: column;
}

.chat_middle_text .chat_actions .chat_action {
    transition: all .3s;
    opacity: 0;
}
.chat_middle:hover .chat_middle_text .chat_actions .chat_action{
    opacity: 1;
}
.chat_middle_text .chat_actions .chat_action.chat_reation.reacted{
    opacity: 1;
    color:  #dc3545;
    border: none;
    background-color: transparent;
}
.chat_reactions .reacted{
    color:  #dc3545;
    position: absolute;
    right: -6px;
    bottom: 15px;
}
.chat button.chat_action{
    color: black;
    width: 25px;
    height:25px;
}
.chat button.chat_action span{
    top: 3px;
    position: absolute;
    left: 4px;
}




.chat_msn_div{
    height: fit-content;
    position: relative;
    margin: auto 0;
    display: flex;
    flex-direction: column;
    margin: 5px 0;
}
.chat_msn_div p{
    margin:0;
}

.chat_reactions{
    display: flex;
    width: fit-content;
    /*position: absolute;
    bottom: -8px;
    right: 0;*/
}
.chat_msn_div.owner .chat_reactions{
    align-self: flex-end;
}
.chat_msn_div .chat_reactions p{
    font-size: 12px;
}
/* .chat_msn_div p.chat_date{
    margin-left: 15px;
} */
.chat button.chat_action.chat_reaction{
    width: 18px;
    height: 18px;
    font-size: 11px;
    position: absolute;
    transition:all .3s;
    opacity: 0;
}
.chat  button.chat_action.chat_reaction.up_reaction_chat{
    bottom: 8px;
}
.chat  button.chat_action.chat_reaction.down_reaction_chat{
    bottom: -9px;
}
.chat  .chat_reactions:hover button.chat_action.chat_reaction{
    opacity: 1;
}
.chat button.chat_action.chat_reaction span{
    top: 2px;
    left: 3px;
}
.chat_mesage_file p.chat_mesage_file_name {
    width: 0;
}

.chat_mesage_image{
    max-height: 200px;
    max-width: 350px;
    border-radius: 25px;
    padding: 10px;
}
.chat_mesage_answer_p {
    color: white;
    /* padding: 0px; */
    margin: 0 0 0 5px;
    align-self: center;
    border-radius: 25px;
    padding: 0 10px;
    background-color: #8F959C;
    max-height: 85px;
    overflow: hidden;
}
.chat_mesage_answer_icon{
    font-size: 20px;
    color: #423C4E;
    align-self: center;
    height: 100%;
}
.chat_msn_div.owner {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
}

.chat_msn_div.owner .chat_answer p{
    text-align: end;
}

.chat_msn_div img{
    max-width: 150px;
    max-height: 200px;
    border-radius: 25px;
    display: flex;
    align-self: flex-end;
    transition: transform .2s,opacity .2s;
    cursor: pointer;
    border: 1px solid grey;
}
.chat_msn_div img:hover{
    opacity: 0.7;
    transform: scale(1.05);
}

.chat_msn_div .chat_answers{
    border-radius: 5px;
    background-color: #A8AEB2;
    max-width: 250px;
    max-height: 85px;
    overflow: hidden;
    cursor: pointer;
    width: fit-content;
    display: flex;
    padding: 5px;
    left: 34px;
    position: relative;
    top:7px;
    min-height: 30px;
    transition: all .3s;
}
.chat_msn_div.owner .chat_answers{
    align-self: flex-end;
    padding: 5px;
    margin-right: 10px;
    left: 0;
    right: 10px;
}
.chat_answers p{
    font-size: 12px;
    transition: all .3s;
}
.chat_msn_div .chat_answers:hover{
    background-color: #0C1526;
    color:#fff;
}
.chat_msn_div .chat_answers:hover p{
    color:#fff;
}
.chat_msn_read{
    position: absolute;
    text-align: end;
    display: block;
    right: 6px;
    bottom: -3px;
    width: max-content;
    cursor: pointer;
    font-size: 12px;
}
.chat_msn_read.completed{
    display: none;
}
.chat_msn_read:hover{
    color:#3653DA;
}
.chat button.show_more_messages{

    width: 100%;
    /* opacity: 1; */
    border: 1px solid #3C3343;
    background-color: #D9DEDE;
    color: black;
    border-radius: 10px;
}
.msn_removed{
    color:#959595;
    font-size: 12px;
}
.msn_removed span{
    top: 2px;
    position: relative;
}



.s_icon{
    width: 100%;
    height: 100%;
}
.s_icon.p50{
    width: 50%;
    height: 50%;
}
.s_icon.p75{
    width: 75%;
    height: 75%;
}
.s_icon.s10{
    width: 10px;
    height: 10px;
}
.s_icon.s15{
    width: 15px;
    height: 15px;
}
.s_icon.s17{
    width: 17px;
    height: 17px;
}
.s_icon.s20{
    width: 20px;
    height: 20px;
}
.s_icon.s25{
    width: 25px;
    height: 25px;
}
.s_icon.s30{
    width: 30px;
    height: 30px;
}
.s_icon.s35{
    width: 35px;
    height: 35px;
}
.s_icon.s40{
    width: 40px;
    height: 40px;
}
.s_icon.s50{
    width: 50px;
    height: 50px;
}
.s_icon.s60{
    width: 60px;
    height: 60px;
}
.circle_state_customer{
    position: absolute;
    bottom: 5px;
}
.circle_state_customer.online{
    color: green;
}
.circle_state_customer.absent{
    color: orange;
}
.circle_state_customer.leave-alone{
    color: red;
}
.circle_state_customer.offline{
    color: black;
}
.circle_state_customer ion-icon{
    font-size: 20px;
    transition: all .5s;
}
.chat .chat_title .circle_state_customer{
    top: 45px;
    bottom: auto;
}