.tgr-enter {
    opacity: 0;
}

.tgr-enter-active {
    opacity: 1;
    transition: opacity 500ms;
}

.tgr-exit {
    opacity: 1;
}

.tgr-exit-active {
    opacity: 0;
    transition: opacity 500ms;
}

.file-preview-container {
    position: relative;
}

.file-preview-container span, .file-preview-container a {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: 1s ease;
    backface-visibility: hidden;
}

.file-view {
    transition: .5s ease;
    color: #2196F3;
/ / background-color: #2196F3 !important;
    font-weight: 700;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}


.file-preview-container:hover > span {
    cursor: pointer;
    opacity: 0.2;
}

.file-preview-container:hover > a {
    cursor: pointer;
    opacity: 0.3;
}

.file-preview-container:hover > .file-view {
    cursor: pointer;
    opacity: 1;

}


.modalnode-enter {
    opacity: 0;
    transform: scale(0.9);
}

.modalnode-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 800ms, transform 800ms;
}

.modalnode-exit {
    opacity: 1;
}

.modalnode-active {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 300ms, transform 300ms;
}


.scroll-hide::-webkit-scrollbar {
    display: none;
}

.scroll-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

html {
    height: 100%;
}

body {
    height: 98%;
}

.height-without-header {
    height: -o-calc(100% - 5px); /* opera */
    height: -webkit-calc(100% - 5px); /* google, safari */
    height: -moz-calc(100% - 5px); /* firefox */
}

.full-height {
    height: 100%;
}

#main {
    height: 100% !important;
    padding-top: 80px;
    padding-bottom: 10px !important;
}

#content {
    height: 100% !important;
}


/*center modal*/
.modal {
    text-align: center;
    padding: 0 !important;
}

.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

body.modal-open {
    overflow: auto;
}

/**************************/

/*for notify.js*/
[data-notify="progressbar"] {
    margin-bottom: 0px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 5px;
}


.size-extra-wide .modal-dialog {
    width: 95%;
    max-width: 1500px;
}


/**************************/

/* Table row strike*/

table {
    border-collapse: collapse
}

/* Ensure no space between cells   */
tr.strikeout td {
    position: relative
}

/* Setup a new coordinate system   */
tr.strikeout td:before { /* Create a new element that       */
    content: " "; /* …has no text content            */
    position: absolute; /* …is absolutely positioned       */
    left: 0;
    top: 50%;
    width: 100%; /* …with the top across the middle */
    border-bottom: 1px solid #000; /* …and with a border on the top   */
}

.chosen-container-single .chosen-single abbr {
    width: 15px;
}

.chosen-container .chosen-drop {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    margin-top: 1px;
    border: 0;
    top: 0;
    border-radius: 2px;
}


.search-choice-close:before {
    background: #ffffff;
}

.animate-option {
    -vendor-animation-duration: 6s;
    -vendor-animation-delay: 2s;
    -vendor-animation-iteration-count: infinite;
}

.h-100 {
    height: 100% !important;
    min-height: 100%;
    max-height: 100% !important;
}

.note-toolbar {
    padding: 0 !important;
}

span.step {
    background: #cccccc;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 5px;
    text-align: center;
    width: 1.6em;
}

.btn > .him-counts {
    /*position: absolute;*/
    color: #fff;
    font-style: normal;
    background: #F44336;
    padding: 1px 3px;
    border-radius: 2px;
    left: 0;
    /*top: -2px;*/
    font-size: 12px;
    line-height: 15px
}

.btn-counts {
    position: absolute;
    font-style: normal;
    background: #F44336;
    padding: 1px 5px;
    border-radius: 2px;
    right: -7px;
    top: -7px;
    font-size: 10px;
    line-height: 15px;
}

/****************Calendar********************/

#calendar {
    padding: 15px 0 5px;
    /*width: 70%;*/
    /*right: -70%;*/
    box-shadow: 0 0 20px rgba(14, 18, 21, .38)
}

#calendar.toggled {
    left: 0
}

@media (min-width: 768px) and (max-width: 1279px) {
    #calendar .fc-toolbar {
        height: 40px;
    }
}

@media (min-width: 1280px) and (max-width: 2559px) {
    #calendar .fc-toolbar {
        height: 40px;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    #calendar .fc-toolbar {
        height: 40px;
    }
}


#calendar .chat-search {
    padding: 20px 20px 15px
}


#calendar .chat-search .form-control {
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 30px;
    background-color: transparent
}

#calendar .chat-search .form-control:focus {
    padding: 0 30px 0 0
}

#calendar .chat-search .form-control:focus + .zmdi-search {
    left: calc(100% - 15px)
}

#calendar .chat-search .form-control, #work_side .chat-search .zmdi-search {
    -webkit-transition: all;
    -o-transition: all;
    transition: all;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

#calendar .chat-search .zmdi-search {
    position: absolute;
    left: 0;
    bottom: 6px;
    font-size: 20px
}

#calendar .lg-body {
    height: calc(100% - 70px)
}

.fc-today > span {
    color: #FA8A00 !important;
    font-weight: bold;
}


[class*=chat-status] {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: -3px;
    right: 12px;
    border: 2px solid #FFF

}

.fc-time-grid-event {
    border: 1px solid white !important;
}


/*Shadows for events*/
/*.fc-event{*/
/*box-shadow: 2px 2px 2px #706868;*/
/*}*/

.fc-day-header {
    font-size: 2em;
    color: #c2c2c2;
    text-align: left;
    border-bottom-width: 0;
    border-right-color: #eee;
    /*padding: 10px 12px;*/
    text-transform: uppercase;
    font-weight: 100 !important;
}

/*Background font-awesome*/

.element {
    position: relative;
}

/*replace the content value with the
corresponding value from the list below*/

/*.element:before {*/
/*!*content: "\f070";*!*/
/*content: "\f111";*/
/*font-family: FontAwesome;*/
/*font-style: normal;*/
/*font-weight: normal;*/
/*text-decoration: inherit;*/
/*!*--adjust as necessary--*!*/
/*color: #F7F7F7;*/
/*font-size: 50px;*/
/*left:-14px;*/
/*top:-45px;*/
/*position: absolute;*/
/**/
/*}*/
/***************************************/

/*A fix for a changing page width bug, when modal opens*/

body {
    padding-right: 0px !important
}

.modal-open {
    overflow-y: auto;
}

.jstree-anchor {
    /*enable wrapping*/
    white-space: normal !important;
    /*ensure lower nodes move down*/
    height: auto !important;
    /*offset icon width*/
    padding-right: 24px;
}

ins {
    background-color: #32CAB7;
    /*color:black;*/
}

del {
    background-color: #FA7A98;
    /*color:white;*/
}

/*
 * Row with equal height columns
 * --------------------------------------------------
 */
.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

/* USAGE
<div class="row">
  <div class="row-height">
    <div class="col-xs-2 col-xs-height col-xs-middle">
      <div class="inside"></div>
    </div>
    <div class="col-xs-4 col-lg-5 col-xs-height col-xs-middle">
      <div class="inside"></div>
    </div>
  </div>
</div>
*/

/* content styles */

.inside {
    margin-top: 20px;
    margin-bottom: 20px;
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f4f4), color-stop(100%, #ededed));
    background: -moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
    background: -ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
}

.inside-full-height {
    /*
    // if you want to give content full height give him height: 100%;
    // with content full height you can't apply margins to the content
    // content full height does not work in ie http://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100
    */
    height: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

.content {
    padding: 12px 3px;
}

/* columns of same height styles */

.row-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
}

.col-height {
    display: table-cell;
    float: none;
    height: 100%;
}

.col-top {
    vertical-align: top;
}

.col-middle {
    vertical-align: middle;
}

.col-bottom {
    vertical-align: bottom;
}

.row.match-my-cols {
    /*display: table;*/
    /*overflow: hidden;*/
    /*position: relative;*/
    /*z-index: -1;*/

}

.row.match-my-cols [class*="col-"] {
    /*display: table;*/
    /*position: relative;*/

    /*margin-bottom: -99999px;*/
    /*padding-bottom: 99999px;*/
}

.match-my-cols .box {
    background: none;
    position: static;
    display: table-cell;
}

.match-my-cols [class*="col-"] {
    background: #fff;
    /*display: table-cell;*/
}

.match-my-cols .box a {
    position: relative;
}

.focused {
    border: 1px dashed blue;
}

/*@media (min-width: 480px) {*/
/*.row-xs-height {*/
/*display: table;*/
/*table-layout: fixed;*/
/*height: 100%;*/
/*width: 100%;*/
/*}*/

/*.col-xs-height {*/
/*display: table-cell;*/
/*float: none;*/
/*height: 100%;*/
/*}*/

/*.col-xs-top {*/
/*vertical-align: top;*/
/*}*/

/*.col-xs-middle {*/
/*vertical-align: middle;*/
/*}*/

/*.col-xs-bottom {*/
/*vertical-align: bottom;*/
/*}*/
/*}*/

/*@media (min-width: 768px) {*/
/*.row-sm-height {*/
/*display: table;*/
/*table-layout: fixed;*/
/*height: 100%;*/
/*width: 100%;*/
/*}*/

/*.col-sm-height {*/
/*display: table-cell;*/
/*float: none;*/
/*height: 100%;*/
/*}*/

/*.col-sm-top {*/
/*vertical-align: top;*/
/*}*/

/*.col-sm-middle {*/
/*vertical-align: middle;*/
/*}*/

/*.col-sm-bottom {*/
/*vertical-align: bottom;*/
/*}*/
/*}*/

/*@media (min-width: 992px) {*/
/*.row-md-height {*/
/*display: table;*/
/*table-layout: fixed;*/
/*height: 100%;*/
/*width: 100%;*/
/*}*/

/*.col-md-height {*/
/*display: table-cell;*/
/*float: none;*/
/*height: 100%;*/
/*}*/

/*.col-md-top {*/
/*vertical-align: top;*/
/*}*/

/*.col-md-middle {*/
/*vertical-align: middle;*/
/*}*/

/*.col-md-bottom {*/
/*vertical-align: bottom;*/
/*}*/
/*}*/

/*@media (min-width: 1200px) {*/
/*.row-lg-height {*/
/*display: table;*/
/*table-layout: fixed;*/
/*height: 100%;*/
/*width: 100%;*/
/*}*/

/*.col-lg-height {*/
/*display: table-cell;*/
/*float: none;*/
/*height: 100%;*/
/*}*/

/*.col-lg-top {*/
/*vertical-align: top;*/
/*}*/

/*.col-lg-middle {*/
/*vertical-align: middle;*/
/*}*/

/*.col-lg-bottom {*/
/*vertical-align: bottom;*/
/*}*/
/*}*/

.bgm-lightgray {
    background-color: #D3D3D3 !important
}

.bgm-lighter {
    background-color: #ececec !important
}

.bgm-ch {
    background-color: #F7F7F7 !important
    /*#F7F7F7*/
    /*#f9f9f9*/
}

.c-lightgray {
    color: #D3D3D3 !important
}

.c-lighter {
    color: #ececec !important
}

.c-ch {
    color: #f9f9f9 !important
}

.c-darkgray {
    color: #7e7e7e !important
}

.brd-darkgray {
    border-color: #7e7e7e !important
}

.brd-lighter {
    border-color: #ececec !important
}

.brd-lightgray {
    border-color: #D3D3D3 !important
}

.brd-dashed {
    border-style: dashed !important;
}

.brd-solid {
    border-style: solid !important;
}

.agile:hover {
    background-color: white !important;
}

.brd-left {
    border: none !important;
    border-left: 1px solid #ececec !important;;
}

.brd-bottom {
    border: none !important;
    border-bottom: 1px solid #ececec !important;
}

.brd-top {
    border: none !important;
    border-top: 1px solid #ececec !important;;
}

.brd-right {
    border: none !important;
    border-right: 1px solid #ececec !important;;
}


.brd-thin {
    border-width: thin;
}

.brd-thick {
    border-width: thick !important;
}

.brd-medium {
    border-width: medium !important;
}

.agile-white {
    border-left: 4px solid #fff !important
}

.agile-black {
    border-left: 4px solid #000 !important
}

.agile-brown {
    border-left: 4px solid #795548 !important
}

.agile-pink {
    border-left: 4px solid #E91E63 !important
}

.agile-red {
    border-left: 4px solid #F44336 !important
}

.agile-blue {
    border-left: 4px solid #2196F3 !important
}

.agile-purple {
    border-left: 4px solid #BA68C8 !important
}

.agile-deeppurple {
    border-left: 4px solid #673AB7 !important
}

.agile-lightblue {
    border-left: 4px solid #03A9F4 !important
}

.agile-cyan {
    border-left: 4px solid #00BCD4 !important
}

.agile-teal {
    border-left: 4px solid #009688 !important
}

.agile-green {
    border-left: 4px solid #4CAF50 !important
}

.agile-lightgreen {
    border-left: 4px solid #8BC34A !important
}

.agile-lime {
    border-left: 4px solid #CDDC39 !important
}

.agile-yellow {
    border-left: 4px solid #FFEB3B !important
}

.agile-amber {
    border-left: 4px solid #FFC107 !important
}

.agile-orange {
    border-left: 4px solid #FF9800 !important
}

.agile-deeporange {
    border-left: 4px solid #FF5722 !important
}

.agile-bluegray {
    border-left: 4px solid #607D8B !important
}

.agile-indigo {
    border-left: 4px solid #3F51B5 !important
}

.brd-white {
    border-color: #fff !important
}

.brd-black {
    border-color: #000 !important
}

.brd-brown {
    border-color: #795548 !important
}

.brd-pink {
    border-color: #E91E63 !important
}

.brd-red {
    border-color: #F44336 !important
}

.brd-blue {
    border-color: #2196F3 !important
}

.brd-purple {
    border-color: #BA68C8 !important
}

.brd-deeppurple {
    border-color: #673AB7 !important
}

.brd-lightblue {
    border-color: #03A9F4 !important
}

.brd-cyan {
    border-color: #00BCD4 !important
}

.brd-teal {
    border-color: #009688 !important
}

.brd-green {
    border-color: #4CAF50 !important
}

.brd-lightgreen {
    border-color: #8BC34A !important
}

.brd-lime {
    border-color: #CDDC39 !important
}

.brd-yellow {
    border-color: #FFEB3B !important
}

.brd-amber {
    border-color: #FFC107 !important
}

.brd-orange {
    border-color: #FF9800 !important
}

.brd-deeporange {
    border-color: #FF5722 !important
}

.brd-bluegray {
    border-color: #607D8B !important
}

.brd-indigo {
    border-color: #3F51B5 !important
}


.cell {
    display: table-cell;
}

.panel-group[data-collapse-color=bluegray] .panel-collapse .panel-heading.active .panel-title > a:after {
    background: #607D8B
}

.panel-group[data-collapse-color=lightgray] .panel-collapse .panel-heading.active .panel-title > a:after {
    background: #D3D3D3
}

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
}

.col-8-custom {
    width: 12.5%;
}

.col-7-custom {
    width: 14.2%;
}

@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

.event-tag-small > span {
    width: 20px;
    height: 20px;
    margin: 0 0 1px;
    position: relative;
    display: inline-block;
    vertical-align: top
}

.event-tag-small > span.color-tag__default {
    border: 1px solid #eee;
    background-color: #fff !important
}

.event-tag-small > span.color-tag__default > i:before {
    color: #333
}

.event-tag-small > span, .event-tag-small > span > i {
    -webkit-transition: all;
    -o-transition: all;
    transition: all;
    -webkit-transition-duration: .2s;
    transition-duration: .2s
}

.event-tag-small > span > input[type=radio] {
    margin: 0;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0)
}

.event-tag-small > span > input[type=radio]:checked + i {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
}

.event-tag-small > span:hover {
    opacity: .8;
    filter: alpha(opacity=80)
}

.event-tag-small > span > i {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 2px 0 0 4px;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0)
}

.event-tag-small > span > i:before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Pro' !important;
    color: #fff;
    font-size: 12px;
    z-index: 1
}

.event-tag-small > span {
    border-radius: 50%;
    cursor: pointer
}

div.bootstrap-dialog-title {
    text-align: center !important;
}

.actions .open {
    z-index: 10 !important;
}

.popover {
    /*background-color:#b94a48;*/
    /*border:none;*/
    /*border-radius:unset;*/
    min-width: 100px;
    /*width:100%;*/
    max-width: 400px;
    overflow-wrap: break-word;
    z-index: 2060; /* A value higher than 1010 that solves the problem */
}

#profile-main.img-height {
    max-height: 266px !important;
}

.clickable-row:hover {
    cursor: pointer;
}

.fc-event {
    cursor: pointer;
}

.ellipsis {
    text-overflow: ellipsis;

    /* Required for text-overflow to do anything */
    /*white-space: nowrap;*/
    overflow: hidden;
}

.fc-today {
    background: #d6fae5 !important;
    border: none !important;
    border-top: 3px solid #0f9560 !important;
    font-weight: 900 !important;
    color: #FA8A00 !important;
}


div.fc-cell-content, div.fc-widget-content {
    min-height: 50px;
    /*max-height: 50px;*/
}

#meterplanCalendar span.fc-cell-text {
    padding-left: 0;
    padding-right: 26px;
    margin-right: 16px;
}

#calendar .fc-day-number {
    padding-left: 10px;
    color: #929292;
    text-align: left;
    float: left;
}

#calendar .fc-today > a.fc-day-number {
    color: #FA8A00 !important;
}

#calendar .fc-today > a[data-goto] {
    color: #FA8A00 !important;
    font-weight: 700;
}

#calendar th {
    border-color: transparent;
}


/*div.fc-bg:after {*/
/*content: "\f087";*/
/*font-family: FontAwesome;*/
/*font-style: normal;*/
/*font-weight: normal;*/
/*text-decoration: inherit;*/
/*position: absolute;*/
/*font-size: 10px;*/
/*color: blue;*/
/*top: 25%;*/
/*left: 50%;*/
/*!*margin: -300px 0 0 -200px;*!*/
/*z-index: 1000;*/
/*}*/
.isok:after {
    content: "\f058";
    font-family: 'Font Awesome 5 Pro' !important;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    position: absolute;
    font-size: 30px;
    color: green;
    top: 30%;
    left: 20%;
    /*margin: -300px 0 0 -200px;*/
    z-index: 1000;
}

.btn-toolbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.btn-toolbar .input-group {
    width: auto;
}

.toolbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    height: 4.5rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.05rem 1rem 0 0.5rem;
    position: relative;
}

.toolbar:not(.toolbar--inner) {
    background-color: #FFFFFF;
    border-radius: 2px;
    margin-bottom: 30px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
}

.toolbar .actions {
    margin: 0.05rem -0.8rem 0 auto;
}

.toolbar--inner {
    border-bottom: 1px solid #f6f6f6;
    margin-bottom: 1rem;
    border-radius: 2px 2px 0 0;
}

.toolbar__nav {
    white-space: nowrap;
    overflow-x: auto;
}

.toolbar__nav > a {
    color: #9c9c9c;
    display: inline-block;
    transition: color 300ms;
}

.toolbar__nav > a + a {
    padding-left: 1rem;
}

.toolbar__nav > a.active, .toolbar__nav > a:hover {
    color: #747a80;
}

.toolbar__search {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    border-radius: 2px;
    padding-left: 3rem;
    display: none;
}

.toolbar__search input[type=text] {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0 1.6rem;
    font-size: 1.2rem;
    color: #495057;
}

.toolbar__search__close {
    transition: color 300ms;
    cursor: pointer;
    position: absolute;
    top: 1.5rem;
    left: 1.8rem;
    font-size: 1.5rem;
    color: #9c9c9c;
}

.toolbar__search__close:hover {
    color: #747a80;
}

.toolbar__label {
    margin: 0;
    font-size: 1.1rem;
}

.mbl-compose {
    border-top: 1px solid #eee;
    height: 80px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 52px 15px 112px;
}

.mbl-compose textarea {
    height: 100%;
    width: 100%;
    border-radius: 2px;
    border: 0;
    resize: none;
    background: #eee;
    padding: 5px 10px;
    font-size: 1.4em;
    color: #5E5E5E;
    -webkit-transition: background-color;
    -o-transition: background-color;
    transition: background-color;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    min-height: 49px;
}

.mbl-compose button.send {
    position: absolute;
    bottom: 8px;
    right: 0px;
    background: transparent;
    border: 0;
    font-size: 25px;
}

.mbl-compose button.attach {
    position: absolute;
    left: 60px;
    bottom: 8px;
    background: transparent;
    border: 0;
    font-size: 25px;
}

.mbl-compose button.image {
    position: absolute;
    bottom: 8px;
    left: 0;
    background: transparent;
    border: 0;
    font-size: 25px;
}


.mbl-compose button:hover {
    background-color: #0c7cd5 !important;
    color: white;
}

.mbl-compose {
    position: relative !important;
    top: auto !important;
}

.zmdi-hc-rotate-45 {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.lgi-img-60 {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.lgi-img-100 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

ul.help-block > li {
    display: inline;
    padding: 5px;
    color: red;
    font-size: 1em;
    /*font-weight: bolder;*/
    background-color: white;

}

#comment-file-container > div a {
    /*top:-2px ;*/
    /*width: 2em;*/
    /*border-radius: 50%;*/
}


.chosen-drop {
    top: auto !important;
}


.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border: 1px solid #EAEAEA;
}


/****************WorkSide********************/

#work_side {
    padding: 15px 0 5px;
    /*width: 70%;*/
    /*right: -70%;*/
    box-shadow: 0 0 20px rgba(14, 18, 21, .38)
}

#work_side.toggled {
    left: 0
}

#work_side .chat-search {
    padding: 20px 20px 15px
}

#work_side .chat-search .form-control {
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 30px;
    background-color: transparent
}

#work_side .chat-search .form-control:focus {
    padding: 0 30px 0 0
}

#work_side .chat-search .form-control:focus + .zmdi-search {
    left: calc(100% - 15px)
}

#work_side .chat-search .form-control, #work_side .chat-search .zmdi-search {
    -webkit-transition: all;
    -o-transition: all;
    transition: all;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

#work_side .chat-search .zmdi-search {
    position: absolute;
    left: 0;
    bottom: 6px;
    font-size: 20px
}

#work_side .lg-body {
    height: calc(100% - 90px)
}

.vakata-context {
    z-index: 10000;
}


.wi-preview .wip-item {
    width: 10% !important;
    padding-bottom: 10% !important;
}

.him-counts2 {
    position: absolute;
    margin-top: -1.1em;
    margin-left: -.85em;
    color: white !important;
    font-style: normal;
    padding: 2px;
    font-weight: 700;
    background: #2196F3;
    font-size: 10px;
    line-height: 15px;
}

.bootstrap-datetimepicker-widget .glyphicon {
    font-family: 'Font Awesome 5 Pro' !important;
    font-size: 18px;
}

.bootstrap-datetimepicker-widget .glyphicon-chevron-left:before {
    content: "\f060";
}

.bootstrap-datetimepicker-widget .glyphicon-chevron-right:before {
    content: "\f061";
}

.bootstrap-datetimepicker-widget .glyphicon-time:before {
    content: "\f017";
}

.bootstrap-datetimepicker-widget .glyphicon-calendar:before {
    content: "\f274";
}

.bootstrap-datetimepicker-widget .glyphicon-chevron-up:before {
    content: "\f062";
}

.bootstrap-datetimepicker-widget .glyphicon-chevron-down:before {
    content: "\f063";
}

.glyphicon-screenshot:before {
    font-family: 'Font Awesome 5 Pro' !important;
    content: "\f140";
}

.glyphicon-trash:before {
    font-family: 'Font Awesome 5 Pro' !important;
    content: "\f2ed";
}

.glyphicon-remove:before {
    font-family: 'Font Awesome 5 Pro' !important;
    content: "\f00d";
}

@media (min-width: 1440px) {
    #content:not(.content-alt) {
        padding-left: 283px;
        padding-right: 5px;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    #content {
        padding-left: 5px;
        padding-right: 5px;
    }
}

#content.content-alt {
    max-width: 1200px;
    margin: 0 auto;
}

.d-none {
    display: none;
}


.lock-comment {
    /*border-left: 2em solid #E7E7E7 !important;*/
    position: relative;
    overflow: hidden;
    margin-left: 4em;
    padding-left: 4em !important;
}

.lock-comment:before {
    position: absolute;
    font-weight: 300;
    color: #6297fc;
    top: .5em;
    left: .5em;

    font-family: 'Font Awesome 5 Pro' !important;
    font-size: 2em;
    content: "\f30d";
}

.parsley-errors-list.filled li {
    color: red;
}

.typeahead-spinner {
    position: absolute;
    top: 32px;
    right: 7px;
    display: none;
    width: 16px;
    height: 14px;
}


select {
    font-family: 'Font Awesome 5 Pro' !important;
}


/*Kanban table*/


.kanban-col {
    height: 75vh;
    min-height: 600px;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    border: 1px solid #E7E7E7;
    position: relative;;

}

.kanban-col > .panel-collapse .panel-body {
    position: absolute;;
    top: 40px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    overflow-y: scroll;
}

.kanban-col > .panel-collapse .panel-heading {
    height: 46px;
    width: auto;
    border-bottom-width: 1px;
}


.panel-group-v {
    position: relative;
    background-color: #F1F1F1;
    /*transform: rotate(180deg);*/
    /*-webkit-backface-visibility: hidden;*/
    /*-webkit-transform: translateX(0%) rotate(90deg);*/
    /*-webkit-transform-origin: right top;*/
    /*-moz-transform: translateX(0%) rotate(90deg);*/
    /*-moz-transform-origin: left top;*/
    /*-o-transform: translateX(0%) rotate(90deg);*/
    /*-o-transform-origin: left top;*/
    /*transform: translateX(0%) rotate(90deg);*/
    /*transform: translate(866px, 867px) rotate(90deg);*/
    /*transform-origin: left top;*/
    /*height: 86.2rem;*/
}

.panel-group-v > .panel-heading {
    /*width: 100% ;*/
    /*background-color: #f5f5f5;*/
    background-color: #606060;
    background-image: none;;
    color: white;
    height: 47px;
    /*transform: rotate(270deg);*/
    transform: rotate(90deg);
    /*translate(0,0);*/
    white-space: nowrap;
    /*writing-mode: vertical-rl;*/
}

.panel-group-v > .panel-heading > h4 > a {
    text-decoration: none;
}

.kanban-col {
    /*z-index: 100;*/
}

.kanban-col .card {
    margin: 0 0 3px;
    padding: 3px;
    border: 1px solid darkgrey;
}

.kanban-col .card:hover {
    border: 1px solid green;
    background-color: #F1F1F1;
}

.kanban-item {

}

.kanban-task {
    /*border-bottom: 1px solid lightgray;*/
    font-size: 0.9em;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.kanban-col > .panel-collapse > .panel-body {
    padding: 0;
}


/*end of a kanban table*/


/**
spectrum picker
 */
.sp-preview {
    position: relative;
    width: 70px !important;
    height: 29px !important;
    border: none !important;
    margin-right: 5px;
    float: left;
    z-index: 0;
}

.sp-palette-container {
    background-color: #F7F7F7 !important;
}

.sp-replacer {
    border: 1px solid #CACACA !important;
    background-color: #F7F7F7 !important;
    padding: 0px !important;
    /*background: #333 !important;;*/
    /*color: #eee !important;;*/
    /*vertical-align: middle;*/
}


.sp-replacer:hover, .sp-replacer.sp-active {
    border-color: #CACACA !important;;
    color: #fff !important;;
}


/*//////////////////////////////////////*/


.progress-bar-gray {
    background-color: #F1F1F1;
}


.table-condensed-2 > thead > tr > th,
.table-condensed-2 > tbody > tr > th,
.table-condensed-2 > tfoot > tr > th,
.table-condensed-2 > thead > tr > td,
.table-condensed-2 > tbody > tr > td,
.table-condensed-2 > tfoot > tr > td {
    padding: 2px;
}

.table-condensed-3 > thead > tr > th,
.table-condensed-3 > tbody > tr > th,
.table-condensed-3 > tfoot > tr > th,
.table-condensed-3 > thead > tr > td,
.table-condensed-3 > tbody > tr > td,
.table-condensed-3 > tfoot > tr > td {
    padding: 3px;
}

.table-condensed-4 > thead > tr > th,
.table-condensed-4 > tbody > tr > th,
.table-condensed-4 > tfoot > tr > th,
.table-condensed-4 > thead > tr > td,
.table-condensed-4 > tbody > tr > td,
.table-condensed-4 > tfoot > tr > td {
    padding: 4px;
}

.table-condensed-5 > thead > tr > th,
.table-condensed-5 > tbody > tr > th,
.table-condensed-5 > tfoot > tr > th,
.table-condensed-5 > thead > tr > td,
.table-condensed-5 > tbody > tr > td,
.table-condensed-5 > tfoot > tr > td {
    padding: 5px;
}


.icon-count-container {
    position: relative;
}

.icon-count {
    position: absolute;
    border-radius: 1em;
    top: -.5em;
    right: -.7em;;
    color: white;
    background-color: rgb(124, 124, 124);
    padding: 2px 4px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: .5em;
}


.checked-overlay {
    position: absolute;
    font-family: 'Font Awesome 5 Pro' !important;
    left: 50%;
    top: 50%;
    content: "\f005";
    z-index: 100;
}

.p-1 {
    padding: 1px !important;
}

.p-2 {
    padding: 2px !important;
}

.p-3 {
    padding: 3px !important;
}

.m-1 {
    margin: 1px !important;
}

.m-2 {
    margin: 2px !important;
}

.m-3 {
    margin: 3px !important;
}


.checkbox .input-helper.big:before {
    width: 25px !important;
    height: 25px !important;;
}

.checkbox .input-helper.big:after {
    font-size: 17px;
}


#dropzone {
    background: palegreen;
    width: 150px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
}

#dropzone.in {
    width: 600px;
    height: 200px;
    line-height: 200px;
    font-size: larger;
}

#dropzone.hover {
    background: lawngreen;
}

#dropzone.fade {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    opacity: 1;
}

.custom-swal-class {
    overflow-x: visible;
    overflow-y: visible;
    max-height: 550px !important;
    min-height: 550px !important;

}


.border-edit-h {
    /*Horizontal*/
    background-image: linear-gradient(to right, blue 33%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 4px 2px;
    background-repeat: repeat-x;

}

.border-edit-v {

    /*Vertical*/
    background-image: linear-gradient(blue 33%, rgba(255, 255, 255, 0) 0%);
    background-position: right;
    background-size: 1px 3px;
    background-repeat: repeat-y;
}

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1199px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

.text-white {
    color: white;
}

.lgi-attrs-inline {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lgi-attrs-inline > li {
    display: inline-block;
    border: 1px solid #f0f0f0;
    margin: 2px 2px 2px 0;
    padding: 2px 5px;
    font-size: 12px;
    color: #777777;
}

.lgi-attrs-inline > li > a {
    display: inline-block;
}

#footer {
    position: static;
}


tr.strikeout td:before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 0;
    border-bottom: 1px solid #a2a5aa;
    width: 100%;
}

.element-pointer {
    cursor: pointer;
}