@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,100;1,300;1,400&display=swap');


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.container {
    padding: 0;
    height: 700px;
}

.table-fixed {
    height: 100px !important;
    overflow: auto !important;
    overflow-x: hidden !important;
}

.scrollableX {
    display: block;
    border: none;
    min-width: 100% !important;
    height: 100% !important;
    overflow-y: visible !important;
    overflow-x: scroll !important;
}

/*.overflow-x{
    overflow-x :scroll;
}*/

/* === CONVERSATIONS === */

.chat {
    width: 100%;
}

.dropdown-toggle {
     white-space: normal; 
}

.header-chat {
    background-color: #FFF;
    height: 90px;
    box-shadow: 0px 3px 2px rgba(0,0,0,0.100);
    display: flex;
    align-items: center;
}

.chat .header-chat .icon {
    margin-left: 30px;
    color: #515151;
    font-size: 14pt;
}

.chat .header-chat .name {
    margin: 0 0 0 20px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-size: 13pt;
    color: #515151;
}

.chat .header-chat .right {
    position: absolute;
    right: 40px;
}

.chat .messages-chat {
    padding: 0px 35px;
    margin-bottom: 170px;
}

    .chat .messages-chat .message {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }

        .chat .messages-chat .message .photo {
            display: block;
            width: 45px;
            height: 45px;
            background: #E6E7ED;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }

    .chat .messages-chat .text {
        margin: 0 35px;
        background-color: #f6f6f6;
        padding: 15px;
        border-radius: 12px;
    }

.text-only {
    margin-left: 45px;
}

.time {
    font-size: 10px;
    color: lightgrey;
    margin-bottom: 10px;
    margin-left: 85px;
}

.response-time {
    float: right;
    margin-right: 40px !important;
}

.response {
    float: right;
    margin-right: 0px !important;
    margin-left: auto; /* flexbox alignment rule */
}

    .response .text {
        background-color: #e3effd !important;
    }

.footer-chat {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    width: 97%;
    border-top: 2px solid #EEE;
}

.chat .footer-chat .icon {
    margin-left: 30px;
    color: #C0C0C0;
    font-size: 14pt;
}

.chat .footer-chat .send {
    color: #fff;
    background-color: #4f6ebd;
    position: absolute;
    right: 50px;
    padding: 12px 12px 12px 12px;
    border-radius: 50px;
    font-size: 14pt;
    cursor: pointer;
}

.chat .footer-chat .name {
    margin: 0 0 0 20px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-size: 13pt;
    color: #515151;
}

.chat .footer-chat .right {
    position: absolute;
    right: 40px;
}

.write-message {
    border: none !important;
    width: 75%;
    height: 133px;
    margin-left: 20px;
    padding: 16px;
    resize: none;
}

.footer-chat *::-webkit-input-placeholder {
    color: #C0C0C0;
    font-size: 13pt;
}

.footer-chat input *:-moz-placeholder {
    color: #C0C0C0;
    font-size: 13pt;
}

.footer-chat input *::-moz-placeholder {
    color: #C0C0C0;
    font-size: 13pt;
    margin-left: 5px;
}

.footer-chat input *:-ms-input-placeholder {
    color: #C0C0C0;
    font-size: 13pt;
}

.clickable {
    cursor: pointer;
}

.btn-delete {
    display: none;
}

div.upload {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    display: inline-block;
    /*height: 30px;*/
    padding: 3px 16px 3px 3px;
    position: relative;
    width: auto;
}

    div.upload:hover {
        opacity: 0.95;
    }

    div.upload input[type="file"] {
        display: inline-block;
        width: 100%;
        height: 37px;
        opacity: 0;
        cursor: pointer;
        position: absolute;
        left: 0;
    }

.uploadButton {
    background-color: #425F9C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    height: 30px;
    margin-right: 15px;
    width: auto;
    padding: 0 20px;
    box-sizing: content-box;
}

.fileName {
    font-family: Arial;
    font-size: 14px;
}

.upload + .uploadButton {
    height: 38px;
}


.bg-white {
    background-color: white;
}

.pos-img {
    object-fit: cover;
    object-position: -4% 0;
    width: 43px !important;
    height: 56px;
}

h3 {
    font-size: 15px;
    font-style: italic;
    font-weight: 600;
    text-decoration: underline;
    color: #9a9a9a;
}


header .nav .nav-item {
    border-right: 1px solid #ddd;
}

.nopd {
    padding: 0 !important;
}

.sidebar-dark .sidebar-heading {
    color: white !important;
}

.sidebar .nav-item .nav-link {
    padding: 0 !important;
}

.sidebar .nav-item .nav-link {
    padding: 7px 12px !important;
}

.sidebar-dark .sidebar-heading {
    font-size: 14px;
}

.nav-item {
    border-bottom: 1px solid rgba(255,255,255,.15);
    padding: 5px;
}

.cust-link {
    font-size: 19px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
}

.icon-font {
    color: white;
    font-size: 17px;
}



.pos-ab {
    position: absolute !important;
    left: 200px !important;
    display: none;
}

.sub-link {
    color: white !important;
    font-size: 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.15);
    border-radius: 0 !important;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover, .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
    background-color: transparent !important;
}

li a:hover + #SubMenus, #SubMenus:hover {
    display: block;
}

li a:hover + #SubMenus1, #SubMenus1:hover {
    display: block;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    
}