/*================================================================================
	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.  */

/* .chat-content {
    display: none;
    position: relative;
    right: 15px;
    top: 100px;
    bottom: 0;
    z-index: 9999;
    float: left;
    height: 616px;
} */

.open-button {
    background-color: #555;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    position: fixed;
    bottom: 23px;
    right: 28px;
    width: 280px;
}

/* The popup chat - hidden by default */
.chat-popup {
    display: none;
    /*position: fixed;*/
    bottom: 0;
    /*right: 15px;*/
    border: 3px solid #f1f1f1;
    z-index: 9;
    float: left;
}

.chat-popup2 {
    display: none;
    /*position: fixed;*/
    bottom: 0;
    /*right: 15px;*/
    border: 3px solid #f1f1f1;
    z-index: 9;
    float: left;
}

.chat-popup3 {
    display: none;
    /*position: fixed;*/
    bottom: 0;
    /*right: 15px;*/
    border: 3px solid #f1f1f1;
    z-index: 9;
    float: left;
}

/* Add styles to the form container */
.form-container {
    max-width: 300px;
    padding: 10px;
    background-color: white;
}

/* Full-width textarea */
.form-container textarea {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
    resize: none;
    min-height: 200px;
}

.form-container .msg-input {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
    /*resize: none;*/
    /*min-height: 200px;*/
}

/* When the textarea gets focus, do something */
.form-container textarea:focus {
    background-color: #ddd;
    outline: none;
}

/* Set a style for the submit/send button */
.form-container .btn {
    /*background-color: #04AA6D;*/
    background-color: #7367F0;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom: 10px;
    opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
    background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover,
.open-button:hover {
    opacity: 1;
}

.chat-msg-list {
    list-style: none;
    height: 250px;
    padding: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}

.chat-msg-list li {
    height: 30px;
    /*background: #ccc;*/
    /*border-bottom: black 1px solid;*/
}
.fTYhnd {
    padding: 0.571429rem 1rem;
    background: #0957a4 !important;
    border-radius: 5px 5px 0px 0px;
}       
.fTYhnd h2 {
    color: #fff;
    font-size: 17px;
    padding: 0px;
    margin: 0px;
}
li.msgList{
    padding: 12px;
    background-color: #e8f2f7;
    display: table;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-bottom: 7px;
    color:#000;
}
li.msgList:nth-child(odd){ background:#c4e3f3;}
ul.btn-side-by-side {
    list-style-type: none;
    padding: 0px;
    width: 280px;
    margin:0px;
}
ul.btn-side-by-side li {
    display: inline-block;
    width: 48%;
    vertical-align:top;
}
ul.btn-side-by-side li .btn {
    padding: 10px 20px;
    margin-bottom: 10px;
    border-radius: 23px;
    font-size: 18px;
}
.msg-input-new{
    width: 100%;
    padding: 15px;
    margin: 5px 0 5px 0;
    border: none;
    background: #f1f1f1;
}
.chat-msg-list {
    margin-bottom: 0px;
}
.list-group-item-new{display: inline!important;position: relative;z-index:99;}
/*.list-group-item-new {
    display: inline!important;
    position: fixed;
    bottom: -87px;	
}*/
div#chat-pan {
    position: fixed;
    z-index: 99;
    bottom: -44px;
}
.chat-msg-list::-webkit-scrollbar {
  width: 10px;
}
.chat-msg-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.chat-msg-list::-webkit-scrollbar-thumb {
  background: #888;
}
.chat-msg-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/*--04-01-2022--*/
.menu-expanded .main-menu .navbar-header{ height:10rem!important;}
.menu-expanded .main-menu .navbar-header.expanded{ height:10rem!important;}
.menu-expanded .navbar-header ul li.nav-item.mr-auto{ width:88%;}
.menu-expanded .navbar-header.expanded ul li.nav-item.mr-auto{ width:88%;}
.menu-collapsed ul li.nav-item.mr-auto{display:none;}
.menu-collapsed ul li.nav-item.nav-toggle{display:block; width:50px;}
.menu-collapsed ul li.nav-item.nav-toggle .modern-nav-toggle { display: block!important; text-align: center; margin-left: -5px;}

.media-body {
    background: #fbfbfb;
    padding: 15px;
    border-radius: 5px;
    font-size: 15px;
}
.media-body p {
    margin-bottom: 15px;
}
.email-user-list ul.users-list-wrapper.media-list {
    padding-left: 0px;
}
.inline_link{ display:inline-block; vertical-align:top; margin-left:5px;}

li.custom-padding {
    padding: 16px 5px !important;
    margin-right: 5px !important;
}

li.custom-padding i {
    margin-right: 15px !important;
}

li.custom-padding .menu-title {
    /* width: 100px; */
}

li.custom-padding.nav-item.dept_avail_status {
    padding-top: 20px !important;
    color: #4ed338;
    font-weight: bold;
    padding-right: 0px !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #FFFFFF;
    border-color: #4ed338;
    background-color: #4ed338;
}