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



/*
side bar blur*/
/*[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
        *//*display: none !important;*//*
        color: transparent !important;
        text-shadow: 0 0 5px rgba(0,0,0,0.5) !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;
}

.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:250px !important;
}
/*color input styles end*/