/*================================================================================
	Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
	Version: 1.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.  */
/*------------------------Snack Bar---------------------------------*/

#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 15px;
}

#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}
.white-screen {
    position:fixed;
    top:35%;
    left:35%
}

.loading-gif {
    width: 20%;
}
.white-screen-dashboard {
    position:fixed;
    top:40%;
    left:45%
}

.loading-gif-dashboard {
    width: 50%;
}
.white-btn-background{
    background-color:white ;
}

.scrollbar
{
    overflow-y: scroll;
    max-height: 100%;

}

/*
.force-overflow
{
    min-height: 450px;
}

#wrapper
{
    text-align: center;
    width: 500px;
    margin: auto;
}
*/

#table-ticket-view::-webkit-scrollbar-track
{
    background-color: #F5F5F5;
}

#table-ticket-view::-webkit-scrollbar
{
    width: 8px;
    background-color: #F5F5F5;
}

#table-ticket-view::-webkit-scrollbar-thumb
{
    background-color: #A8A8A8;
}

#normal-ticket-view::-webkit-scrollbar-track
{
    background-color: #F5F5F5;
}

#normal-ticket-view::-webkit-scrollbar
{
    width: 8px;
    background-color: #F5F5F5;
}

#normal-ticket-view::-webkit-scrollbar-thumb
{
    background-color: #A8A8A8;
}
#table-ticket-reporter-view::-webkit-scrollbar-track
{
    background-color: #F5F5F5;
}

#table-ticket-reporter-view::-webkit-scrollbar
{
    width: 8px;
    background-color: #F5F5F5;
}

#table-ticket-reporter-view::-webkit-scrollbar-thumb
{
    background-color: #A8A8A8;
}

#normal-ticket-reporter-view::-webkit-scrollbar-track
{
    background-color: #F5F5F5;
}

#normal-ticket-reporter-view::-webkit-scrollbar
{
    width: 8px;
    background-color: #F5F5F5;
}

#normal-ticket-reporter-view::-webkit-scrollbar-thumb
{
    background-color: #A8A8A8;
}


/*kanaban board styles*/
.modal-lg-kanban {
    max-width: 60%;
}

#myKanban{overflow-x: auto; padding:20px 0;}

.kanban-success{background: #00EFC0; color:#fff}
.kanban-info{background: #29A8D3; color:#fff}
.kanban-warning{background: #F4CE46; color:#fff}
.kanban-light{background: #B9BBC7; color:#fff}
.kanban-error{background: #FB7D44; color:#fff}

/*------------------------Snack Bar---------------------------------*/



[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

.blur-style{
    color: transparent !important;
    text-shadow: 0 0 5px rgba(0,0,0,0.5) !important;
}


/*attachment view scroll bar style start */
.attachment-view-scrollbar {
    max-height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.force-overflow {
    min-height: 450px;
}
#style-1::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb {
    background-color: #9d9d9d;
}
/*attachment view scroll bar style end */

/*attachment view for different screens start*/
@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}
@media only screen and (min-width: 1524px) {
    .attachment-list-item {
        width: 50%;
    }
}
@media only screen and (max-width: 1524px) {
    .attachment-list-item {
        width: 100%;
    }
}
/*attachment view for different screens end*/

/*sidebar logo for different screen*/
@media only screen and (min-width: 1524px) {
    .sidebar-logo-css {
        height: 100%;
    }
}
/*sidebar logo for different screen*/

/*notepad css*/
.notePadModal {
    position: absolute;
    z-index: 100000;
    background-color: #f1f1f1;
    text-align: center;
    border: 1px solid #d3d3d3;
    min-width: 400px;
    min-height: 120px;
}

.notePadModalheader {
    padding: 10px;
    cursor: move;
    z-index: 1002;
}

/*todo panel css*/
.todoModal {
    position: absolute;
    z-index: 100000;
    background-color: #ffffff;
    text-align: left;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    min-width: 320px;
    max-width: 450px;
    width: 90vw;
    min-height: 300px;
    max-height: 85vh;
    height: auto;
    display: flex;
    flex-direction: column;
}

/* field help icon */
[field-help],
.field-help-icon {
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    border-radius: 50%;
    border: 1px solid #17a2b8;
    background-color: #eaf9fc;
    color: #17a2b8 !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: help !important;
    vertical-align: middle;
    user-select: none;
    transition: all 0.15s ease-in-out;
}

[field-help]:hover,
[field-help]:focus,
.field-help-icon:hover,
.field-help-icon:focus {
    background-color: #17a2b8;
    color: #ffffff !important;
    border-color: #138496;
    box-shadow: 0 0 0 2px rgba(23, 162, 184, 0.2);
    outline: none;
}

.field-help-tooltip .tooltip-inner {
    max-width: 320px;
    text-align: left;
}

@media (min-width: 576px) {
    .todoModal {
        min-width: 400px;
        width: auto;
        min-height: 400px;
    }
}

@media (min-width: 768px) {
    .todoModal {
        max-height: 90vh;
    }
}

.todo-header {
    padding: 10px;
    cursor: move;
    z-index: 1002;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.todo-task-item {
    transition: all 0.2s ease;
    position: relative;
}

.todo-task-item:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.todo-task-item .dropdown-menu {
    z-index: 100005;
}

.todo-task-expanded {
    border-color: #007bff !important;
}

.todo-list-container {
    overflow-y: auto;
    overflow-x: hidden;
}

.todo-list-container::-webkit-scrollbar {
    width: 6px;
}

.todo-list-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.todo-list-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.todo-list-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Quick Lead Panel Styles */
.quickLeadModal {
    position: absolute;
    z-index: 100000;
    background-color: #ffffff;
    text-align: left;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    min-width: 320px;
    max-width: 600px;
    width: 95vw;
    min-height: 400px;
    max-height: 90vh;
    height: auto;
    display: flex;
    flex-direction: column;
}

@media (min-width: 576px) {
    .quickLeadModal {
        min-width: 450px;
        width: auto;
        min-height: 500px;
    }
}

@media (min-width: 768px) {
    .quickLeadModal {
        min-width: 550px;
        min-height: 600px;
    }
}

.quick-lead-header {
    padding: 10px;
    cursor: move;
    z-index: 1002;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.quick-lead-item {
    transition: all 0.2s ease;
    position: relative;
}

.quick-lead-item:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.quick-lead-container {
    overflow-y: auto;
    overflow-x: hidden;
}

.quick-lead-container::-webkit-scrollbar {
    width: 6px;
}

.quick-lead-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.quick-lead-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.quick-lead-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Quick Lead Creation Modal Styles */
#quickLeadCreateModal .modal-content {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

#quickLeadCreateModal .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
}

#quickLeadCreateModal .modal-footer {
    flex-shrink: 0;
    border-top: 1px solid #dee2e6;
    background-color: #f8f9fa;
    padding: 15px;
}

.modal-appear-place{
    z-index: 2000;
}

.swal2-container {
    z-index: 2001 !important;
}

/*toaster black text*/
.toast{
    color: black !important;
}

/*loading page */
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: /*url(/loading/load_1.gif) center no-repeat*/ #fff;
}
/*loading page end */

/*color input styles start*/
.colors {
    text-align: center;
    padding-top: 20px;
}
.colors > li {
    list-style: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border-bottom: 5px solid rgba(0, 0, 0, 0.1);
    display: inline-block;
    margin: 0 10px;
    cursor: pointer;
    transition-duration: .2s;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}
.colors > li:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    border-bottom: 10px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
.colors > li.active-color {
    -webkit-transform: scale(1.2) translateY(-10px);
    transform: scale(1.2) translateY(-10px);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    border-bottom: 20px solid rgba(0, 0, 0, 0.15);
}
.colors > li:nth-child(1) {
    background-color: #2ecc71;
}
.colors > li:nth-child(2) {
    background-color: #D64A4B;
}
.colors > li:nth-child(3) {
    background-color: #8e44ad;
}
.colors > li:nth-child(4) {
    background-color: #46a1de;
}
.colors > li:nth-child(5) {
    background-color: #bdc3c7;
}

.color-circle{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border-bottom: 5px solid rgba(0, 0, 0, 0.1);
}
.colors-complain > li {
    list-style: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border-bottom: 5px solid rgba(0, 0, 0, 0.1);
    display: inline-block;
    margin-right: 5px;
    margin-top: 5px;
    cursor: pointer;
    transition-duration: .2s;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}
.colors-complain > li:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    border-bottom: 10px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
.colors-complain > li.active-color {
    -webkit-transform: scale(1.2) translateY(-10px);
    transform: scale(1.2) translateY(-10px);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    border-bottom: 20px solid rgba(0, 0, 0, 0.15);
}

.image-complain {
    width: 25px;
    height: 25px;
    border-radius: 50%;
}


.table-min-height{
    min-height:300px !important;
}
/*color input styles end*/

.call-actions {
    display: flex;
    gap: 2px;
    margin-top: 3px;
}

.call-actions .call-action {
    border: none;
    background: transparent;
    color: #8a9099;
    padding: 2px 4px;
    font-size: 13px;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
}

.call-actions .call-action:hover {
    background: #eef1ff;
    color: #667eea;
}

.call-actions .call-action-call {
    color: #10b981;
}

.call-actions .call-action-call:hover {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}