.unread-badge {
    position: absolute;
    top: 0;        /* adjust */
    right: -30px;  /* adjust */
    background: red;
    color: white;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 50%;
    font-weight: bold;
    z-index: 9999;
}


body a,



body a:hover {



  color: inherit;



  text-decoration: none;



  transition: all .4s ease;



}





.text-main {
    color: #2cc8e5 !important;
}



.link:hover {

    color: #e8ab18 !important

}







.fs-18 {



    font-size: 1.125rem !important;



}



.fs-14 {



    font-size: .875rem !important;



}



.fs-12 {



    font-size: .75rem !important;



}















nav.navbar .navbar-brand-wrapper .logo-text {



    font-size: 1.4rem;



    color: #e8ab18 !important;



    font-weight: 500;



    font-family: "ubuntu-medium", sans-serif;



}







.brand-logo.logo-text{



    font-size: 1.75rem;



    color: #e8ab18 !important;



    font-weight: 500;



    font-family: "ubuntu-medium", sans-serif;



}











table.dataTable.table-striped>tbody>tr.odd>* {



    background: #f0f6fd;



    box-shadow: none !important;



}







.table thead th .form-check .form-check-label input[type="checkbox"] + .input-helper:before {



    border-color: white;



}











.table thead {



    color: #fff;



    background: #2cc8e5;



}



.page-item .page-link {



    padding: 8px 15px;



    box-shadow: none;



    outline: none;



}



.page-item.active .page-link {



    border-color: #e8ab18;



    background: #e8ab18;



}











.modal1 .modal-header {



    padding: 24px;



}







.modal1 .modal-body {



    padding: 24px;



}







.modal1 .modal-footer {



    padding: 24px;



}







.modal1 button.btn-close {



    box-shadow: none;



    outline: none;



    padding: 5px 10px;



}







.icon-box {



    position: relative;



}







.icon-box .form-control {



    padding-right: 50px;



}







.icon-box .icon {



    position: absolute;



    top: 11px;



    right: 16px;



    font-size: 1.25rem;



}







.ck.ck-editor__main>.ck-editor__editable {



    height: 200px;



}



.ck.ck-powered-by {



    display: none;



}







.gallery-box {



  background: #fff;



  box-shadow: 0 4px 20px rgb(0 0 0 / 15%);



  border-radius: 5px;



  padding: 0;



  transition: all .4s ease;



  position: relative;



}







.gallery-box .icon {



  position: absolute;



  top: -10px;



  right: -10px;



  background: red;



  color: #fff;



  width: 30px;



  height: 30px;



  line-height: 30px;



  border-radius: 100%;



  text-align: center;



}







.gallery-box img {



  border-radius: 5px;



  height: 200px;



  object-fit: cover;



}







.fr-box a[href="https://www.froala.com/wysiwyg-editor?k=u"] {



  display: none !important;



}



#fr-logo {



    display: none;



}











/*create by me*/



.error{



    color: rgb(225 54 71) !important;



    margin-top: 3px;



}



nav[role="navigation"] {

    text-align: center;

    margin-top: 24px;

}



nav[role="navigation"] svg {

    width: 20px;

}

nav[role="navigation"] p.text-sm.text-gray-700.leading-5 {

    margin-top: 15px;

}


.chat-div {
    width: 100%;
    border-left: 1px solid rgb(0 0 0 / 10%);
}
.chat-div .chat-box {
    padding: 16px;
    height: calc(100% - 52px - 78px);
}
.chat-box .send-div {
    text-align: end;
    width: 90%;
    margin-left: auto;
    margin-bottom: 16px;
}
.chat-box .reseive-div {
    width: 90%;
    margin-bottom: 16px;
}

.chat-box .text {
    display: inline-block;
    padding: 16px 16px 0;
    border-radius: 10px;
    font-size: .875rem;
}
.chat-box .send-div .text {
    background: #3bc8e7;
    color: #fff;
    text-align: left;
    border-bottom-right-radius: 0;
}
.chat-box .reseive-div .text {
    background: rgb(0 0 0 / 10%);
    border-bottom-left-radius: 0;
}

.chat-div .chat-head {
    padding: 16px;
    border-bottom: 1px solid rgb(0 0 0/ 10%);
}

.chat-div .chat-foot {
    padding: 16px;
    border-top: 1px solid rgb(0 0 0/ 10%);
}

.chat-div .chat-input-box {
    position: relative;
}

.chat-div .chat-input-box .form-control {
    background: #fff;
    border-radius: 50px;
    padding-right: 45px;
    height: 45px;
    color: #000;
}

.chat-div .chat-input-box .btn.btn-send {
    box-shadow: none !important;
    outline: none !important;
    border: 0;
    background: #3bc8e7;
    border-radius: 50%;
    color: #fff;
    width: 34px;
    height: 34px;
    line-height: 35px;
    position: absolute;
    top: 5.5px;
    right: 6px;
    font-size: 1rem;
    text-align: center;
    display: block;
    padding: 0;
    min-width: auto;
}
.ticket-container {
    display: flex;
    height: 85vh;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background: #fff;
}

.ticket-container .chat-sidebar {
    min-width: 280px;
    width: 280px;
}

.ticket-container .chat-sidebar .chatuser-search {
    padding: 16px;
}


.nav.nav1 .item-link {
    padding: 14px 18px;
    border-bottom: 1px solid rgb(0 0 0 / 10%);
}

.nav.nav1 .item-link:first-child {
    border-top: 1px solid rgb(0 0 0 / 10%);
}
.nav.nav1 .item-link:hover {
    background: #f3f3f3;
}
.nav.nav1 .item-link.active {
    background: #3bc8e7;
    color: #fff;
}

.ticket-container .chat-sidebar .chatuser-search .form-control {
    border-radius: 50px;
    height: 42px;
}

.ticket-container .chat-sidebar .chatuser-box {
    height: calc(100% - 74px);
}













/* scrollbar */
.scrollbar
{
  overflow-y: auto;
  overscroll-behavior: contain;

}
.scrollbar::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #e5e5e5;
}

.scrollbar::-webkit-scrollbar
{
  width: 5px;
  height: 4px;
  background-color: #e5e5e5;
}

.scrollbar::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #444;
}

/*responsive css*/
@media screen and (max-width: 767px){
    .ticket-container {
        display: block;
        height: auto;
    }

    .ticket-container .chat-sidebar {
        width: 100%;
    }
}