html,
body {
    font-family: 'Roboto', 'Helvetica', sans-serif;
    /*font-family: 'Poppins', sans-serif;*/
    font-size: 14px;
}

.dropright .dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid transparent;
    border-right: 0;
    border-bottom: .3em solid transparent;
    border-left: .3em solid;
    position: absolute;
    right: 7px;
}

/*fonts*/


/* @font-face {
                      font-family: 'BLOKKRegular';
                      src: url('BLOKKRegular/webfonts/BLOKKRegular.eot');
     }

    @font-face {
                      font-family: 'BLOKKRegular';
                      src: url('BLOKKRegular/webfonts/BLOKKRegular.woff') format('woff'),
                      url('BLOKKRegular/webfonts/BLOKKRegular.svg#BLOKKRegular') format('svg');
     } */

.mdl-tabs__tab, .mdl-nav-tab .nav-link {
    text-transform: capitalize;
}

.btn{
    cursor: pointer;
}


.inner {
    scroll-behavior: unset;
}

.dropdown-menu .inner {
    max-height: 280px !important;
}


body.mdl-base {
    overflow: hidden;
}

.mdl-layout__header-row .material-icons {
    vertical-align: middle;
}


.searcclosebtn {
    opacity: 0;
    visibility: hidden;
}


.focusin-search .withicon .searcboxbtn {
    right: 30px;
    margin-right: 6px;
}

.focusin-search .searcclosebtn {
    opacity: 1;
    visibility: visible;
}

 


.custom-nav {
    padding: 0;
    display: flex;
    padding: 0 15px;
    padding-right: 0;
}

.custom-nav a {
    padding: 5px 15px;
    border-bottom: 0px solid transparent;
    color: #828282;
    overflow: hidden;
    font-size: 16px;
    font-size: 18px;
    font-weight: 500;
    border-left: 1px solid #b9b9b9;
    display: none;
}

.layout--header svg {
    fill: rgba(116, 116, 116, 0.76);
    width: 21px;
    margin-top: -2px;
}

.mdl-layout__header .mdl-button:hover svg {
    fill: rgba(76, 75, 75, 0.76);
}

.custom-nav a:hover,
.custom-nav a:not([href]):not([tabindex]):focus,
.custom-nav a:not([href]):not([tabindex]):hover {
    color: #9f9f9f;
}

.custom-nav a.active {
    color: #39558d;
}


.custom-nav a.active {
    position: relative;
    display: initial;
}

.custom-nav a.active:before {
    /*    content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  background: #39558d;
  width: 15px;
  height: 15px;
  margin: auto;
  transform: rotate(45deg);
  border-radius: 4px 0 0 0;*/
}

.main--asap .custom-nav a.active:before {
    background: #028940 !important;
}

.main--osca .custom-nav a.active:before {
    background: #b00e23 !important;
}


.filtertags .filtertags-ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.clear-btn {
    color: #39558d;
    display: inline-block;
    padding: 2px 5px 2px 5px;
    transition: all 0.5s;
    background: transparent;
    color: #ed1b3b;
    border-radius: 4px !important;
    position: relative;
    padding-left: 0;
}

.searchbox-li {
    display: inline-block !important;
    position: relative;
}

.active-search-list .searchbox-li:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 5px;
    margin-top: 0px;
    background: white;
    bottom: 0;
    z-index: 11;
}

.filter-selection-main {
    display: flex;
    align-items: center;
}

.main--bar-btn {
    color: #fff;
    background: transparent !important;
    box-shadow: none;
    padding: 0;
    min-width: initial;
    margin: 0;
    width: 24px;
    position: relative;
    margin-right: auto;
    display: block;
    margin-left: 11px;
    margin-top: 5px;
}

.main--bar-btn svg {
    fill: #fff;
}

.filter-content {
    padding: 7px 15px;
    width: 100%;
    position: relative;
    -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    transition-duration: .2s;
    background: #ffffff !important;
    z-index: 99;
    height: 50px;
}
/*.main--asap .filter-content{
    background: #028940 !important;
}

.main--osca .filter-content{
    background: #b00e23 !important;
}
*/



.main--asap .custom-nav a.active {
    color: #028940;

}


.main--osca .custom-nav a.active {
    color: #b00e23 !important
}





.main--asap .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
    background: rgb(2, 137, 64);
}

.main--asap .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: rgb(2, 137, 64) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiI…lsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K);
}

.main--asap .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
    border: 2px solid rgb(2, 137, 64);
}

.main--asap .mdl-checkbox__ripple-container .mdl-ripple {
    background: rgb(2, 137, 64);
}

.main--asap .mdl-tabs__tab .mdl-tabs__ripple-container .mdl-ripple {
    background: rgb(2, 137, 64);
}

.main--asap .mdl-list__item-avatar,
.main--asap .mdl-list__item-avatar.material-icons {
    background-color: rgba(2, 137, 64, 0.1);
}

.main--asap .mdl-list__item--three-line:hover {
    background: rgba(2, 137, 64, 0.0784313725490196);
    color: #028940;
}



.main--osca .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
    background: rgb(176, 14, 35);
}

.main--osca .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: rgb(176, 14, 35) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiI…lsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K);
}

.main--osca .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
    border: 2px solid rgb(176, 14, 35);
}

.main--osca .mdl-checkbox__ripple-container .mdl-ripple {
    background: rgb(176, 14, 35);
}

.main--osca .mdl-tabs__tab .mdl-tabs__ripple-container .mdl-ripple {
    background: rgb(176, 14, 35);
}

.main--osca .mdl-list__item-avatar,
.main--osca .mdl-list__item-avatar.material-icons {
    background-color: rgba(176, 14, 35, 0.1);
}

.main--osca .mdl-list__item--three-line:hover {
    background: rgba(176, 14, 35, 0.08);
    color: #b00e23;
}


.searchbox-li .form-group {
    margin-bottom: 0;
    position: relative;
    width: 100%;
    /*min-width: 320px;*/
}

.searchbox-li .form-group {
    /*min-width: 236px;*/
}

.active-search-list .main-search-list {
    max-height: 280px;
    border-radius: 0 0 4px 4px;
}

.filter-content label {
    margin: 0;
    transition: all 0.5s;
}

.main-search-input {
    border: none;
    box-shadow: 1px 1px 10px -3px #888;
    border-radius: 0;
    min-height: 40px;
    border-radius: 4px;
    border: 1px solid #b9b9b9;
    box-shadow: none;
    height: 35px;
    min-height: 50px;
    border: none;
    border-left: 1px solid #ededed;
}

.active-search-list .main-search-input {
    /*border-radius: 4px 4px 0 0;*/
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    cursor: pointer;
    border: none;
    box-shadow: 0px 0px 4px -1px #696868;
    color: #37474f;
}

.datepicker-field .mdl-button--icon,
.withicon .mdl-button--icon {
    border-radius: 50%;
    font-size: 24px;
    height: 30px;
    margin-left: 0;
    margin-right: 0;
    min-width: 30px;
}




span.mdl-layout-title {
    font-size: 18px;
    font-weight: 400;
    color: #696969;
}

span.mdl-layout-title strong {
    font-weight: 500;

}

.mdl--layout__drawer {
    width: 50px;
    height: calc(100% - 50px);
    /* background: #e6e6e6; */
    background: #fafafa;
    transition: all 0.5s;
    box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.09), 0 1px 0px -2px rgba(0, 0, 0, 0), 0 0px 1px 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
}

.opendetail .mdl--layout__drawer {
    margin-top: 64px;
    height: calc(100% - 64px);
}


.demo-navigation .mdl-navigation__link .material-icons {
    font-size: 24px;
    margin-right: 32px;
    display: block;
    margin: auto;
}


.demo-navigation .mdl-navigation__link svg {
    width: 20px;
    display: block;
    margin: auto;
    fill: #747474;
}

.demo-layout .demo-navigation .mdl-navigation__link {
    font-weight: 400;
    text-align: center;
    padding: 9px 3px;
    font-size: 12px;
    cursor: pointer;
    /* border-left: 3px solid transparent; */
    /* border-right: 3px solid transparent !important; */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-bottom: 3px;
}

.demo-layout .demo-navigation .mdl-tooltip {
    top: 13px !important;
    margin-top: 0 !important;
    background: #000;
    position: absolute;
    width: max-content;
}

.demo-layout .demo-navigation .show .mdl-navigation__link {
    background: #fff;
    position: relative;
}

.mdl--layout__drawer-button {
    display: none;
}

.filtertags {
    display: flex;
    width: 100%;
}

.filtertags .filtertags-ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    display: none;
}

.filteritemshow .filtertags .filtertags-ul {
    display: flex;
    margin-left: 10px;
    margin: 0;
    align-items: center;
    border-left: 1px solid #b9b9b9;
    padding-left: 18px;
    margin-left: 15px;
}

.filteritemshow .filtertags .filtertags-ul li {
    display: none;
}

.filteritemshow .filtertags .filtertags-ul li.show {
    display: inline-block;
}

.filtertags .filter-tab-box {
    display: inline-block;
    padding: 5px 5px 5px 10px;
    margin-right: 10px;
    transition: all 0.5s;
    font-size: 14px;
    text-align: center;
    background: #39558d;
    color: #ffffff;
    line-height: normal;
    height: auto;
    border: 1px solid #39558d !important;
    border-radius: 4px !important;
}

.filtertags .filter-tab-box:hover {
    opacity: 0.9;
}

.filtertags li .close-btn {
    width: 12px;
    height: 15px;
    min-width: auto;
    color: #fff;
    box-shadow: none;
    background: none;
}

.filtertags li .close-btn i {
    font-size: 14px;
}

body .demo-header.mdl-layout__header {
    margin-left: 0;
    width: 100%;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    z-index: 10;
    z-index: 9999;
    box-shadow: none;
    position: relative;
    background: rgb(255, 255, 255) !important;
    border-top: 1px solid #ededed;
    -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
}

.mdl-layout--fixed-drawer .mdl-layout__content {
    margin-left: 50px
}



/*.mdl-layout__content .mdl-button .material-icons{
    
}*/




/* iOS Safari specific workaround */
.demo-drawer .mdl-menu__container {
    z-index: -1;
}

.demo-drawer .demo-navigation {
    z-index: -2;
    padding: 0;
    margin: 0;
    padding-top: 8px !important;
}

/* END iOS Safari specific workaround */
.demo-drawer .mdl-menu .mdl-menu__item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.demo-drawer-header {
    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 16px;
    height: 130px;
}

.demo-avatar-dropdown {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}


.demo-avatar-dropdown .material-icons {
    margin-right: 8px;
}

.demo-navigation {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}





.demo-layout .demo-navigation .mdl-navigation__link:hover {
    background: #9ea1a430;
    opacity: 1;
    color: #595959 !important;
    border-color: #39558d;
}


.demo-layout .demo-navigation .mdl-navigation__link.active .material-icons,
.demo-layout .demo-navigation .mdl-navigation__link:focus .material-icons,
.demo-layout .demo-navigation .mdl-navigation__link:active .material-icons {
    color: #595959 !important;
}

.demo-layout .demo-navigation .mdl-navigation__link.active svg,
.demo-layout .demo-navigation .show .mdl-navigation__link svg {
    fill: #39558d !important;
}

.main--osca .demo-layout .demo-navigation .mdl-navigation__link.active svg,
.main--osca .demo-layout .demo-navigation .show .mdl-navigation__link svg {
    fill: #b00e23 !important;
}

.main--asap .demo-layout .demo-navigation .mdl-navigation__link.active svg,
.main--asap .demo-layout .demo-navigation .show .mdl-navigation__link svg {
    fill: #028940 !important;
}

.demo-layout .demo-navigation .mdl-navigation__link.active,
.demo-layout .demo-navigation .mdl-navigation__link:focus,
.demo-layout .demo-navigation .mdl-navigation__link:active {
    background-color: #f6f6f6 !important;
    color: #595959 !important;
    cursor: pointer;
    opacity: 1;
    outline: none;
}

.main--asap .demo-layout .demo-navigation .mdl-navigation__link.active,
.main--asap .demo-layout .demo-navigation .mdl-navigation__link:focus,
.main--asap .demo-layout .demo-navigation .mdl-navigation__link:active {
    border-left: 3px solid #028940 !important;

}

.main--osca .demo-layout .demo-navigation .mdl-navigation__link.active,
.main--osca .demo-layout .demo-navigation .mdl-navigation__link:focus,
.main--osca .demo-layout .demo-navigation .mdl-navigation__link:active {
    border-left: 3px solid #b00e23 !important;
}

.main--asap .demo-layout .demo-navigation .mdl-navigation__link:hover {
    border-color: #028940;
}

.main--osca .demo-layout .demo-navigation .mdl-navigation__link:hover {
    border-color: #b00e23;
}


.demo-navigation .mdl-navigation__link .material-icons {
    font-size: 24px;
    color: #747474 !important;
}

.demo-content {
    max-width: 1090px;
}

.demo-charts {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.demo-chart:nth-child(1) {
    color: #ACEC00;
}

.demo-chart:nth-child(2) {
    color: #00BBD6;
}

.demo-chart:nth-child(3) {
    color: #BA65C9;
}

.demo-chart:nth-child(4) {
    color: #EF3C79;
}

.demo-graphs {
    padding: 16px 32px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

/* TODO: Find a proper solution to have the graphs
* not float around outside their container in IE10/11.
* Using a browserhacks.com solution for now.
*/
_:-ms-input-placeholder,
:root .demo-graphs {
    min-height: 664px;
}

_:-ms-input-placeholder,
:root .demo-graph {
    max-height: 300px;
}

/* TODO end */
.demo-graph:nth-child(1) {
    color: #00b9d8;
}

.demo-graph:nth-child(2) {
    color: #d9006e;
}

.demo-cards {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
}

.demo-cards .demo-separator {
    height: 32px;
}

.demo-cards .mdl-card__title.mdl-card__title {
    color: white;
    font-size: 24px;
    font-weight: 400;
}

.demo-cards ul {
    padding: 0;
}

.demo-cards h3 {
    font-size: 1em;
}

.demo-updates .mdl-card__title {
    min-height: 200px;

    background-position: 90% 100%;
    background-repeat: no-repeat;
}

.demo-cards .mdl-card__actions a {
    color: #00BCD4;
    text-decoration: none;
}

.demo-options h3 {
    margin: 0;
}

.demo-options .mdl-checkbox__box-outline {
    border-color: rgba(255, 255, 255, 0.89);
}

.demo-options ul {
    margin: 0;
    list-style-type: none;
}

.demo-options li {
    margin: 4px 0;
}

.demo-options .material-icons {
    color: rgba(255, 255, 255, 0.89);
}

.demo-options .mdl-card__actions {
    height: 64px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    box-sizing: border-box;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}



/*custome style css*/


.mdl-layout__tab-bar {
    width: 100%;
}

.mdl-layout__tab-bar-button {
    background: transparent;
}

.mdl-layout.is-upgraded .mdl-layout__tab-panel.is-active {
    display: block;
    padding: 15px;
}


.profile-dropdown {
    margin-left: auto;
}

.withicon {
    position: relative;
}

.withicon .back-btn {
    left: 0;
    background: #fff;
    right: inherit;
}

.datepicker-field .mdl-button--icon {
    top: 0;
    right: 8px;
    bottom: 0;
    margin: auto;
}

.withicon .mdl-button--icon {
    top: 0;
    right: 8px;
    bottom: 0;
    margin: auto;
    left: inherit;
    position: absolute;
}

.datepicker-field .mdl-button--icon .material-icons,
.withicon .mdl-button--icon .material-icons {
    font-size: 18px;
    color: #8d8989;
}

section.main-section--panel {
    position: relative;
}

.sidebar--panel.fixed-panel {
    width: 320px;
    position: relative;
    margin-left: -320px;
    transition: all 0.5s;
    background: #fff;
    box-shadow: 0 3px 9px 0 rgba(0, 0, 0, .14), 0 5px 1px -2px rgba(0, 0, 0, .2), 0 2px 5px 0 rgba(0, 0, 0, .12);
    position: fixed;
    z-index: 2;
    bottom: 0;
    top: 100px;
    left: 50px;
}

.opensidebarmenu .sidebar--panel {
    margin-left: 0;
    background: #ffffff;
    width: calc(100% - 5px);
}

.map-inner-detail {
    padding: 0 15px 15px 15px;
    overflow: auto;
    height: 100%;
    border-right: 1px solid #cccccc;
    position: relative;
    background: #f6f6f6;
}




.map-div button.toggle-btn {
    position: absolute;

    left: 0;
    right: 0;
    margin: auto;
    width: 110px;
    height: 30px;
    background: #fff !important;

}

.openmapbox .map-div button.toggle-btn {
    transform: rotate(0);
    -webkit-transform: rotate(0);
    bottom: 0;
}



.map-div button.toggle-btn {
    bottom: -34px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    line-height: 1;

}

button.toggle-btn-map {
    position: sticky;
    top: 0;
    z-index: 99;
}

button.toggle-btn-map {
    width: 60px;
    height: 25px;
    text-align: center;
    padding: 0;
    background: #ffffff !important;
    border: none;
    min-width: auto;
    border-radius: 0;
    transition: all 0.5s;
    box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.3);
    margin: auto;
    margin-top: -25px;
    display: block !important;
    color: #676d6f;
}

.opendetail button.toggle-btn-map {
    display: none !important;
}

button.toggle-btn-map i {
    line-height: 0 !important;
    margin-top: -8px;
    transform: rotate(180deg);
}

.openmapbox button.toggle-btn-map i {
    transform: rotate(0);
}

.daterangepicker td.in-range {
    background-color: #6f86914f;
    border-color: transparent;
    color: #000;
    border-radius: 0;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #37474f;
    border-color: transparent;
    color: #fff;
}

.map-box {
    margin-top: -500px;
    position: relative;
    transition: all 0.5s;
    z-index: 1;
}

/*.opendetail .map-box{
display: none;
}*/

.map-box button.viewlistbtn {
    position: absolute;
    top: 60px;
    right: 12px;
    z-index: 1;
    background: #fff;
    color: #636363;
    min-width: 50px;
    height: 50px;
    padding: 0;
    line-height: 50px;
    width: 50px;
}

.openmapbox .map-box {
    margin-top: 0;

}

.map-box .map-main-div {
    height: 500px;
    width: 100%;
    transition: all 0.5s;
}

.map-check .map-box .map-main-div {
    width: 100%;
    min-height: calc(100vh - 110px);
}

.map-check .map-box {
    margin: 0;
}

.map-check button.toggle-btn-map,
.list-check button.toggle-btn-map {
    display: none !important;
}

.map-check .caselist-dashboard-reset,
.map-check .map-worklocationlist {
    display: none !IMPORTANT;
}


.list-check .map-div {
    display: none;
}

.sidebar--panel .panel {
    padding: 10px 0;
    /* border: 1px solid #ededed; */
    margin-bottom: 0 !important;
    margin: 0 10px 15px 10px;
    /* background: white; */
    padding-bottom: 0;
    border-radius: 0px;
    overflow: hidden;
    padding-left: 10px;
}

.sidebar--panel .panel-body {
    padding: 0 0;
    border-top: 0px solid #cccccc;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 10px;
}

.sidebar--panel .panel h4.panel-title {
    margin: 0;
    font-size: 16px;

}




.showNav {
    -webkit-animation-duration: 1.5s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.showNav {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}


.sidebar--panel .close-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    transition: all 0.5s;
    color: rgb(134, 134, 134);
    background: #fff;
    box-shadow: 0px 0px 4px -2px #000;
    z-index: 99;
}

.showingmap .closedmapbox .sidebar--panel .close-icon {
    visibility: visible;
    opacity: 1;
}


.showingmap .sidebar--panel .close-icon {
    visibility: hidden;
    opacity: 0;
}

.sidebar--panel button.toggle-btn {
    position: absolute;
    right: -25px;
    top: 25px;
    height: 50px;
    width: 25px;
    text-align: center;
    padding: 0;
    border: none;
    min-width: auto;
    border-radius: 0;
    z-index: 1;
    transition: all 0.5s;
    box-shadow: 3px 1px 4px rgba(0, 0, 0, 0.3);
    background: #f6f6f6;
    color: #676d6f;
}

.mdl-tooltip.mdl-tooltip--right.close-tooltip {
    display: block !important;
}

.mdl-tooltip.mdl-tooltip--right.open-tooltip {
    display: none !important;
}

.opensidebarmenu .mdl-tooltip.mdl-tooltip--right.close-tooltip {
    display: none !important;
}

.opensidebarmenu .mdl-tooltip.mdl-tooltip--right.open-tooltip {
    display: block !important;
}

.sidebar--panel button.toggle-btn i.material-icons {
    transform: rotate(180deg);
}

.opensidebarmenu .sidebar--panel button.toggle-btn i.material-icons {
    transform: rotate(0);
}



.sidebar--panel .panel h4.panel-title a {
    display: block;
    margin: -10px;
    margin-bottom: 0;
    padding: 15px 10px;
    padding-left: 0;
    /* background-color: #ededed; */
    font-size: 14px;
    color: #525151;
    position: relative;
    border-top: 1px solid #e0e0e0;
}

.sidebar--panel .panel h4.panel-title a i {
    transform: rotate(45deg);
    transition: all 0.2s;
    font-size: 20px;
    margin-right: 0;
    display: inline-block;
    line-height: 1px;
    position: absolute;
    right: 8px;
    top: 22px;
}


.sidebar--panel .panel h4.panel-title a.collapsed i {
    transform: rotate(0deg);
}

.sidebar--panel .panel h4.panel-title a.collapsed i:before {
    content: "\F415" !important;
}

.sidebar--panel .panel:hover h4.panel-title a,
.sidebar--panel .panel:hover {
    /*background-color: #f7f6f6;*/
}

.modal-backdrop {
    background-color:rgba(0, 0, 0, 0.38823529411764707);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: #fff;
}



::-webkit-scrollbar-thumb {
    background-color: #b9b9b9;
    border-radius: 20px;
    /*outline: 1px solid slategrey;*/
}


div::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: #fff;
    transition: all 0.5;
}

div::-webkit-scrollbar-thumb {
    width: 6px;
    height: 6px;
}



.company-detail-box {
    display: flex;
    display: flex;
    /*background: #f2f2f2;*/
    padding: 10px;
    margin-bottom: 0;
    align-items: center;
    border-radius: 8px;
}

.companynameadderss {
    width: 100%;
}


.company-detail-box h4 {
    margin: 0;
    font-size: 17px;
    color: #17262a;
}

.company-detail-box p {
    margin: 0;
    font-size: 12px;
    line-height: normal;
}

.company-detail-box img {
    height: 55px;
    margin-right: 8px;
}

h3.filter-title {
    margin-top: 10px;
    font-size: 18px;
    position: relative;
    padding-top: 0;
    border-top: 1px solid rgb(224, 224, 224);
    margin-bottom: 0;
    color: #17262a;
}

.mobile-on {
    display: none !important;
}

.mobile-off {
    display: initial !important;
}

.main-content-details {
    padding: 0 15px;
    background: #fff;
    /* z-index: 10; */
    position: relative;
}

/*.work-location-detail-stickey-box {
  position: sticky;
  top: 2px;
}*/


.opendetail .map-worklocationlist,
.opendetail .sidebar--panel,
.opendetail .map-box,
.opendetail .filter-content-main-section {
    display: none !important;
}


.location-details-div {
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    padding: 15px 0;
    transition: all 0.5s;
    transform: translatey(50%);
    opacity: 0;
    visibility: hidden;
    height: 100px;
    overflow: hidden;
    /*position: absolute;*/
    top: 0;
    left: 0;
    right: 0;
    /*bottom: 0;*/
    background: #fff;
    padding: 0 10px;
}

.opendetail .location-details-div {
    transform: translate(0);
    opacity: 1;
    visibility: visible;
    height: auto;
    overflow: inherit;
    background: transparent;
    border-radius: 10px;
    padding: 0;
}




.map-popup {

    box-shadow: 0 -2px 9px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    margin: auto;
}

.map-popup p {
    margin: 0;
    font-size: 13px;
}

.map-popup p a {
    font-size: 14px;
}

.mapclick {
    text-decoration: underline;
}

.map-popup .mdl-button--accent.mdl-button--accent {
    margin-top: 5px;
}

h4.main-title {
    font-size: 20px;
}

.stickey-title h4 {
    /*padding-right: 10px;*/
    /*margin: 15px 0 10px 0;*/
}



a.backto-btn {
    font-size: 14px;
}

.main-title {
    position: relative;
    margin: 0;
    border-bottom: 1px solid #dedada;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 40px;
    padding-bottom: 4px;
}

.stickey-title .main-title .mdl-button--fab {
    background: no-repeat;
    box-shadow: none;
}

.main-title:before {
    border-bottom: 2px solid;
    content: "";
    bottom: -1px;
    width: 100px;
    left: 0;
    position: absolute;
}

.main-title a {
    cursor: pointer;
}




.main-search-list {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    z-index: 2;
    padding: 50px 0 50px 0;
    transition: all 0.5s;
    margin-top: 50px;
    opacity: 0;
    visibility: hidden;
    max-height: calc(100vh - 160px);
    width: 100%;
}

.main-search-list .mdl-list {
    height: 100%;
    overflow: hidden;
    padding: 0;
}

.active-search-list .main-search-list {
    margin-top: 0;
    opacity: 1;
    visibility: visible;
    position: absolute;
    left: 0;
    bottom: inherit;
    max-height: calc(100vh - 160px);
    overflow: auto;
    top: 100%;
    right: 0;
    box-shadow: 0 4px 9px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    padding: 0;
    border-top: 1px solid #cccccc73;

}


.main-search-list .stickey-title {
    margin: 0;
    background: #fff;
}

.main-search-list h4.main-title {
    font-size: 16px;
    color: #39558d;
}

/*table start*/

/*.map-worklocationlist {
  padding: 15px 0;
}
*/

.work-location-detail .card-body {
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    padding: 15px;
}


.main-custom-table {
    border-radius: 8px;
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
}

.main-table-row.main-table-header {
    background: rgba(0, 0, 0, 0.07) !important;
    padding: 11px 20px;
    /*border-radius: 10px 10px 0 0;*/
    border-bottom: 2px solid rgba(48, 64, 73, 0.6);
    padding-right: 10px;
    padding-left: 0;
    color: #1a292e;
    font-weight: 500;
}

.main-table-row.main-table-header .table-col.table-col-1 {
    border: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.main-table-row {
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    padding: 5px 0;
    padding-right: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    width: 100%;
    font-size: 13px;
}

.main-table-row:hover {
    background: rgba(0, 0, 0, 0.07);
    box-shadow: none !important;
}

.table-col {
    display: table-cell;
    vertical-align: middle;
}

.main-custom-table.nowrap-table .table-col {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-table-row .table-col:first-child {
    padding: 7px 15px;
    border-left: 3px solid #dfdede;
    text-align: left;
}

.main-table-row:hover .table-col:first-child {
    border-color:#242a30;
}

.main-table-row .table-col-6 .mdl-button--fab {
    background: transparent;
    box-shadow: none;
}

.main-table-row:hover .table-col:first-child a {
    color: #212529;
}

label.label-asap {

    border: none;
    padding: 5px 15px;
    border-radius: 25px;
    color: #fff !important;
    text-transform: uppercase;
    min-width: 60px;
    text-align: center;
    margin: 0;
}


.yes-label {
    background: #74c549;
}

.no-label {
    background: #f16363;
}




.main-table-row {
    flex-wrap: wrap;
    cursor: pointer;
}

/*table end*/




b,
strong {
    font-weight: 400;
}

@keyframes googleClick {
    to {
        transform: scale(2);
        opacity: 0;
    }
}

.wave.dark {
    background: rgba(33, 33, 33, 0.5);
}

.wave.light {
    background: rgba(255, 255, 255, 0.8);
}

.wave {
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 5px;
    background: #757575;
    animation: googleClick 350ms linear forwards;
    opacity: 0.75;
    transform: scale(0);
    border-radius: 50%;
    pointer-events: none;
}


/* main location */
.pagination-main {
    padding: 10px;
}

.table-responsive {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.18);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.18);
}

.pagination-main.ng-isolate-scope {
    margin-top: 15px;
    padding: 0 15px;
}

table.table--default thead {
    color: #304049;
    background: rgba(0, 0, 0, 0.07) !important;
}

table.table--default {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    background-color: transparent;
    /*border-radius: 15px 15px 0 0;*/
    overflow: hidden;
}

ex: 9;
    min-height: 80px;
    background: #2d4471;
}

.company-name-detail .company-detail-box transparent;
    padding-left: 0;
    min-width: 50%;
}

.company-name-detail .company-detail-box h4 {
    color: #e9ecef}

table.table--default thead th {
    vertical-align: bottom;
    border-bottom: 1px solid #dee2e6;
    color: rgba(9, 9, 9, 0.8392156862745098);
    font-weight: 600;
    /* white-space: nowrap; */
    vertical-align: middle;
    border: none !important;
}

.table td:first-child {
    position: relative;
}

.table--default td:first-child:before {
    position: absolute;
    content: "";
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 3px;
    background: #dfdede;
}

a.employee-id {
    text-decoration: underline;
}




.table tr:hover td:first-child:before,
.checkbox_checked_row tr td:first-child:before {
    background:#242a30;
}

.form-control {
    border-radius: 0;
    min-height: 35px;
}

.detail-card {
    margin-bottom: 15px;
}

.detail-card .main-title {
    margin-bottom: 15px;
}


.detail-card .main-title label {
    font-size: 14px;
    margin: 0;
    color: #304049;
    line-height: normal;
    margin-bottom: -10px
}

.company-name-detail {
    background: #fff;
    margin: 0 -15px;
    padding: 0 15px;
    margin-bottom: 15px;
    display: none;
}




.mdl-layout__content .company-name-detail .mdl-button .material-icons {
    color: #efefef;
}

.opendetail .company-name-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-size: cover;
    background-position: top;
    position: sticky;
    top: 0;
    z-index: 9;
    min-height: 80px;
    background: #2d4471;
}

.company-name-detail .company-detail-box {
    background: transparent;
    padding-left: 0;
    min-width: 50%;
}

.company-name-detail .company-detail-box h4 {
    color: #e9ecef;
}

.company-name-detail .company-detail-box p {
    color: #e9e8e8;
    line-height: normal;
    margin-bottom: 4px;
}

.company-name-detail .company-detail-box img {
    margin-right: 10px;
    border: 2px solid #efefef;
}

.map-detail-box {
    border-radius: 10px;
    overflow: hidden;
    -webkit-box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, .07);
    box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, .07);
}

.detailed-card {
    border-radius: 10px;
    -webkit-box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, .07);
    box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, .07);
    margin-bottom: 20px;
    overflow: hidden;
    background: #fff;
    margin-top: 2px;
}

.detailed-card h5.boxed-title {
    margin: 0;
    /* background: #eaedef; */
    padding: 15px 15px 15px 15px;
    color: rgba(48, 64, 73, 0.8392156862745098);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

.detailed-card-content {
    padding: 15px;
}

.dotted-box.card-body {
    padding: 1.875rem;
    flex: 1 1 auto;
    background: #39558d;
    position: relative;
}

.dotted-box h4 {
    font-size: .9375rem;
    line-height: 34px;
}

.dotted-box {
    font-size: 1.25rem;
    line-height: 1;
    position: relative;
}

.dotted-box i {
    font-size: 40px;
    color: #fff;
}

.max-h-400 .detailed-card-content {
    /*height: 350px;*/
    overflow: auto;
}

ul.notifytext-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

li.contacts-cards {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e4e4e4;
}


li.contacts-cards p {
    margin: 0;
    line-height: 25px;
}

li.contacts-cards img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 15px;
}

.card-img-absolute {
    position: absolute;
    top: 0;
    right: -1px;
    height: 100%;
    border-bottom-right-radius: 7px;
    border-top-right-radius: 7px;
}

.media {
    display: flex;
    align-items: flex-start;
}

.media-body.text-left {
    color: #fff;
}

.classstaff-section span {
    display: inline-block;
    padding: 5px 8px;
    background: rgb(23, 38, 42);
    border-radius: 18px;
    font-size: 13px;
    color: #ebeaea;
    margin: 3px;

}

.btn-secondary:hover,
.btn-secondary {
    color: #fff;
    background-color: #37474f;
    border-color: #37474f;
}

.btn-secondary.disabled,
.btn-secondary:disabled {
    color: #fff;
    background-color: #17262a;
    border-color: #17262a;
}



ul.dotted-ul {
    padding: 0;
    margin: 0;
}

/*.dotted-ul li {
  position: relative;
  border-left: 1px solid #dddddd;
}*/

.dotted-ul li a {
    display: block;
    overflow: hidden;
    padding: 8px;
    padding-left: 20px;
    cursor: pointer;
    border-left: 2px solid #2d447152;
    margin-bottom: 8px;
}

.dotted-ul li a:hover {
    border-left: 2px solid #2d4471;
}

.dotted-ul li a:hover {
    color: #39558d !important;
}

.location-detail-card {
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 0px 1px -2px rgba(0, 0, 0, .2), 0 0px 4px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    padding: 15px;
}

.location-detail-name {
    display: flex;
    align-items: center;
    vertical-align: middle;
    border-bottom: 1px solid #ebebeb;
    margin: -15px;
    margin-bottom: 15px;
    line-height: normal;
    background: #f3f3f8;
    padding: 10px;
}

.location-detail-name p {
    margin: 0;
    line-height: 26px;
    color: #39558d;
}

.location-detail-name .material-icons {
    font-size: 18px;
    color: #899ea8;
    vertical-align: sub;
}

.location-detail-name i.locationnameicon {
    font-size: 50px;
    color: #526a9b;
    margin-right: 10px;

}

h3.company-name {
    font-size: 16px;
    line-height: 26px;

}

label.detailcard-label {
    font-size: 14px;
    text-transform: uppercase;
    color: #39558d;
}

ul.Employees-list {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.Employees-list li {
    margin-right:10px;
        margin-bottom: 10px;
        display: flex;
        position: relative;
}

.Employees-list li .delete-btn .material-icons {
    font-size: 16px;
    color: #b00e23;
    font-weight: bold;
    margin: 0;
}


.Employees-list li .delete-btn{
    border: none;
    background: white;
    box-shadow: 0px 0px 4px -2px #000;
    padding: 0;
    height: 22px;
    width: 22px;
    align-self: center;
    border-radius: 50%;
    left: -10px;
    position: relative;
    top: -11px;
    cursor: pointer;
}

.Employees-list .add-new-btn-pill {
    align-self: center;
    margin-right: 10px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #dedede;
    color: #424747;
    font-weight: 500;
    box-shadow: 0 0px 1px -2px rgba(0, 0, 0, .2), 0 0px 4px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    border-radius: 4px;
}

.Employees-list .add-new-btn-pill:hover{
        background: #ececec;
}

.Employees-list li button.mdl-chip__action {
    border: none;
    background: white;
    box-shadow: 0px 0px 4px -2px #000;
    padding: 0;
    height: 22px;
    width: 22px;
    align-self: center;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    margin-right: 15px;
    opacity: 1;
    margin-left: -29px;
}

.Employees-list li button.mdl-chip__action .material-icons {
    font-size: 16px;
    color: #b00e23;
    font-weight: bold;
    margin: 0;
}

.Employees-list li a {
    outline: none;
    padding: 8px 15px;
    box-shadow: 0 0px 1px -2px rgba(0, 0, 0, .2), 0 0px 4px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    margin-right: 5px;
    color: #787878;
    font-weight: 300;
    border-radius: 20px;
    background: rgba(234, 234, 234, 0.6784313725490196);
    display: flex;
    line-height: 17px;
    margin-right: 0;
    align-items: center;
}

.Employees-list li span.email--text {
    display: flex;
    font-weight: 400;
    color:#242a30;
}

.Employees-list li .material-icons {
    font-size: 20px;
    margin-right: 5px;
}

.asap-pills,
.cos-pills,
.osca-pills {
    margin-top: 0;
}

.asap-pills a,
.cos-pills a,
.osca-pills a {
    border-radius: 4px !important;
}

.asap-pills a {
    background: #028940 !important;
    color: #fff !important;
}

.cos-pills a {
    background: #39558d !important;
    color: #fff !important;
}

.osca-pills a {
    background: #b00e23 !important;
    color: #fff !important;
}

.worklocation--notification .detailed-card {
    margin-bottom: 0;
    box-shadow: none;
}

.Employees-list li a:hover,
.Employees-list li a:focus,
.Employees-list li a:active {
    background-color: #f2f3f8;
    color: #3b5998;
    cursor: pointer
}

ul.filter-libox {
    padding: 0;
    list-style: none;
    margin: 0;
    color: #525151;
}

.caselist-main-dashbpardbox td:last-child {
    display: none;
}

ul.filter-libox li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666; /*color: #898989;*/
    position: relative;
}

ul.filter-libox li label.c-label-check {
    width: 100%;
    margin: 0;
    padding: 2px 0;
}

ul.filter-libox li label.c-label-check .mdl-checkbox__input {
    display: none;
}

ul.filter-libox .mdl-checkbox__input:checked~.mdl-checkbox__label,
ul.filter-libox li label.c-label-check .mdl-checkbox__label:hover {
    background: #ededed;
    color: #39558d;
}

ul.filter-libox li label.c-label-check .mdl-checkbox__label {
    padding-left: 8px;
    display: block;
    font-weight: 500;
    line-height: 25px;
}


.dotted-ul li:first-child:after,
.dotted-ul li:last-child:after {
    width: 5px;
    height: 15px;
    content: "";
    position: absolute;
    background: white;
    left: -2px;
    top: 0;
    margin: auto;
    z-index: 1;
}

.dotted-ul li:last-child:after {
    top: inherit;
    bottom: 0;
}

/*.dotted-ul li:before {
  width: 10px;
  height: 10px;
  content: "";
  position: absolute;
  background: white;
  border-radius: 50%;
  border: 1px solid #39558d;
  left: -5px;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
}*/

.filter-btn {
    color: #ebebeb;
}

.main-section--panel {
    transition: all 0.5s;
}

.opensidebarmenu .main-section--panel {
    margin-left: 320px;
}

.opendetail .main-section--panel {
    margin-left: 0;
}

.bx--date-picker--range {
    display: -ms-flexbox;
    display: flex;
    position: relative;
    width: 100%;
}

.bx--date-picker-container {
    flex-direction: initial;
}

.bx--date-picker--range .bx--date-picker__input {
    width: 50%;
    text-align: center;
    border-right: 1px solid #d7d7d7;
    cursor: pointer;
}

.btn-group.tab-btn-group {
    display: flex;
    padding: 8px 5px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 10px;
}

.btn-group.tab-btn-group .btn {
    /* flex: 1; */
    border: 1px solid #d7d7d7;
    background: #fff;
    padding: 5px 15px;
    min-width: 40%;
}


.btn-group.tab-btn-group .btn .mdi {
    font-size: 18px;
}


.tab-btn-group .btn.btn-light:hover {
    color: #39558d;
}

.bx--date-picker--range label.bx--date-picker__icon.mdl-button.mdl-js-button.mdl-button--icon {
    /* display: none; */
    left: inherit;
    right: -40px;
}

.tab-btn-group .btn.btn-light.active {
    background: #39558d;
    color: #ffffff;
    border-color: transparent;
}

.filter-option-btn.dropdown {
    margin-right: 10px;
}

.filter-option-btn.dropdown button#menu1 {
    margin-top: 6px;
}

.bx--date-picker--range .bx--date-picker__input:last-child {
    border: none;
}

.bx--date-picker--range {
    display: -ms-flexbox;
    display: flex;
    position: relative;
    width: calc(100% - 30px);
    background: #fff;
    border-radius: 5px;
    /*overflow: hidden;*/
    flex-direction: row-reverse;
    padding: 5px 0;
    border: 1px solid #d7d7d7;
}

.bx--date-picker--range label.to-sp {
    font-weight: 400;
    line-height: 43px;
    margin: 0;
}

/*.main-detail-page {
  visibility: hidden;
}

.opendetail .work-location-parent{
display: block;
} */



/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
.modal.left .modal-dialog,
.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
    max-width: 1300px;
}

.modal.left .modal-content,
.modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
    border-radius: 0;
    top: 0;
}

.modal.left .modal-body,
.modal.right .modal-body {
    padding: 15px 15px 50px;
    height: 100%;
    overflow: auto;
    margin-top: 15px;
    padding-top: 0;
    scroll-behavior: smooth;
}

/*Left*/
.modal.left.fade .modal-dialog {
    left: -320px;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
    transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.show .modal-dialog {
    left: 0;
}

/*Right*/
.modal.right.fade .modal-dialog {
    right: -320px;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.show .modal-dialog {
    right: 0;
}

.modal {
    /* background: rgba(100, 111, 121, 0.6); */
}




.modal-header .close {
    padding: 0;
    margin: 0;
    color: #fff;
    opacity: 0.9;
    background-color: transparent;
    position: absolute;
    right: 15px;
    top: 0;
    width: 42px;
    height: 42px;
    min-width: 42px;
    box-shadow: none;
    bottom: 0;
    margin: auto;
    background: rgba(0, 0, 0, 0.47058823529411764);
}

.modal-header .close:hover {
    opacity: 1;
    background-color: #ff0000 !important;
}

.modal-header {
    align-items: center;
    position: relative;
}

.modal-header {
    align-items: center;
    background:#242a30;
    border-radius: 0;
    min-height: 90px;
    color: #fff;
}

.main-popup--detail-box-detail {
    display: flex;
    width: 100%;
    align-items: center;
}

.main-popup--detail-box.caselist-detail {
    border-right: 2px solid #848383;
    padding: 5px 30px 0 0;
}


/*.caseindent {
  display: flex;
  align-items: center;
  justify-content: space-between;
}*/

/*.caseindent  p.employee-name {
  margin-right: 50px;
}
*/
.profile-pic {
    width: 70px;
    height: 70px;
    overflow: hidden;
    margin-right: 15px;
    display: flex;
    box-shadow: 0px 0px 9px -3px #000;
    border: 2px solid #828080;
    border-radius: 7px;
    position: relative;
}


label.btn.btn-edit-camera {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:#242a30a6;
    width: 35px;
    height: 35px;
    margin: auto;
    border-radius: 50%;
    outline: none;
    color: #ffffff;
    text-align: center;
    padding: 0;
    opacity: 0;
}


.profile-pic:hover label.btn.btn-edit-camera , .modal-content:hover label.btn.btn-edit-camera{
    opacity: 1;
}

label.btn.btn-edit-camera .mdi {
    font-size: 18px;
    vertical-align: middle;
    top: 4px;
    position: relative;
    left: 1px;
}

.profile-pic img {
    max-width: 100%;
    max-height: 100%;
}

.employeeid {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgb(255, 255, 255);
    letter-spacing: 1px;
}

.employeeid small {
    font-size: 68%;
    font-weight: 400;
    opacity: 0.8;
}


.main-popup--detail-box h4 {
    color: #ffffff;
    font-size: 16px;
}


span.employee-id {
    font-size: 14px;
    font-weight: normal;
    opacity: 0.9;
}

p.employee-location {
    color: #cecccc;
    margin: 0;
    margin-top: 2px;
}



p.employee-location span {
    color: rgb(218, 218, 218);
    margin-left: 25px;
}


p.employee-location i {
    color: inherit;
    font-size: 18px;
    /*vertical-align: sub;*/
}


.table-hover tbody tr:hover {
    background-color: rgb(237, 237, 237);
}

.caselist-table td {
    cursor: pointer;
}




.locationdetaillist {
    list-style: none;
    padding: 15px 10px;
    margin: 0;
}



.pagination {
    margin: 0;
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #39558d;
    border-color: #39558d;
}

.page-link {
    color: #39558d;
}

.pagination-main .btn-group.dropdown label {
    margin-left: 10px;
}


.main-details-model-cards {
    padding-bottom: 50px;
    padding-top: 2px;
}



.main-details-model-cards .detailed-card {
    margin-bottom: 0;
}

.main-details-model-cards .card-header {
    background: #ffffff;
    color: rgba(48, 64, 73, 0.8392156862745098);
    border: none;
    border-top: 3px solid rgb(66, 71, 71);
    padding: 6px 15px;
    border-radius: 0;
    box-shadow: 0px 0px 5px -2px #2d4471;
    border-bottom: 0 solid rgba(66, 71, 71, 0.02);
    position: relative;
    padding-left: 50px;
    transition: all 0.5s;
}



.main-details-model-cards .card-header span.card-header-icon {
    position: absolute;
    left: 0;
    background: #ffffff;
    top: 0px;
    bottom: 0;
    width: 50px;
    text-align: center;
    font-size: 26px;
    line-height: 43px;
    color:#242a30;
}


.main-details-model-cards .closed-acc .card-header {
    border-top: 0 solid rgba(66, 71, 71, 0.02) !important;

}

.main-details-model-cards .telephonic-service-encounter .card-header {
    border-top-color: #8e49bf;
}

span.service-color {
    color: #8e49bf;
}

.main-details-model-cards .telephonic-service-encounter .card-header .mdl-button {
    background: #8e49bf;
}


.main-details-model-cards .card-header .mdl-button .material-icons {
    -webkit-transform: translate(-12px, -12px);
    transform: translate(-12px, -12px);
}

.main-details-model-cards .card-header .mdl-button.collapsed .material-icons {
    -webkit-transform: translate(-11px, -11px);
    transform: translate(-11px, -11px);
}

.main-details-model-cards .telephonic-service-encounter .card-header .mdl-button.collapsed {
    background: #8e49bf24;
    color: #8e49bf;
}



.work-location-detail table.table--default td,
.work-location-detail table.table--default th {
    font-size: 13px;
}

.main-details-model-cards .card-header .mdl-button--white {
    background:#242a30;
    color: #ffffff;
    box-shadow: none;
    transform: rotate(180deg);
    width: 30px;
    height: 30px;
    min-width: 30px;
}

.main-details-model-cards .card-header .dropdown .mdl-button {
    background: transparent;
    color: #b3b0b0;
    margin-left: 8px;
}

.dropdown-menu a.dropdown-item.hide-info,
.dropdown-menu a.dropdown-item.show-info {
    display: none;
}

a.dropdown-item.show-info.collapsed {
    display: block;
}

.active-acc .dropdown-menu a.dropdown-item.hide-info {
    display: block;
}

.main-details-model-cards .card-header .mdl-button.collapsed {
    background:#242a3014;
    color:#242a30;
    box-shadow: none;
    transform: rotate(0deg);
}

.savechanges-option {
    display: none;
}

.enable-edit-form .more-options {
    /*display: none;*/
}

.enable-edit-form .savechanges-option {
    display: block;
}

.assessment-box {
    padding: 12px 15px;
    background: #8e49bf1f;
    border-left: 5px solid #8e49bf;
    margin-bottom: 15px;
}


.assessment-box.dtp-service-ass {
    border-color: #74c549;
    background: #74c54924;
}

.assessment-box label {
    width: 100%;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color:#242a30db;
    text-transform: uppercase;
}

.assessment-box label span {
    opacity: 0.8;
    font-weight: 500;
}

.assessment-box p {
    margin: 0;
    color: #5f5e5e;
}


.signcloseby {
    /*box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);*/
    /*padding: 15px;
  margin-bottom: 15px;*/
    background: #fcfbff;
}

.signcloseby h2 {
    font-size: 22px;
    font-weight: normal;
    margin-bottom: 15px;
}

.signcloseby h3 {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: #888484;
    margin-bottom: 18px;
    margin-top: 5px;
}

.signcloseby img {
    display: block;
}

.signcloseby p {
    margin: 0;
    display: inline-block;
    text-align: center;
}


.main-details-model-cards .card {
    margin-bottom: 15px;
    border-radius: 0;
    overflow: hidden;
    border: none;
    box-shadow: 0px 0px 6px -3px #000;
}


.main--filter-box .mdl-tabs__tab-bar {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
}

.main--filter-box .mdl-tabs__tab-bar .mdl-tabs__tab {
    width: 50%;
}

.right-popup-withheader {
    padding-top: 50px;
}

.main-details-model-cards .card {
    border: none;
    background: #fff;
    -webkit-box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, .07);
    box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, .07);
    margin-bottom: 15px;
}

.main-details-model-cards .card .card-body {
    /* padding-bottom: 0; */
}

.main-details-model-cards .card-header h5 {
    font-size: 16px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: capitalize;
    color: #404040;
        min-height: 34px;
}

.incident-no {
    color: red;
}

.subtitle-caselist {
    width: 100%;
    padding: 5px 0 10px 0;
    font-size: 14px;
    margin-bottom: 5px;
    color: #404040;
    text-transform: capitalize;
    border-bottom: 1px solid rgba(185, 185, 185, 0.4);
    position: relative;
}

.subtitle-caselist:before {
    border-bottom: 2px solid;
    content: "";
    bottom: 0;
    width: 100px;
    left: 0;
    position: absolute;
    color: #727474;
}

.date-on {
    font-size: 14px;
    font-weight: 300;
    color: #f9f9f9;
    margin-top: 2px;
}

.send-message {
    color: #fff;
    margin-right: 25px;
    width: 300px;
    max-width: 100% !IMPORTANT;
    background: #489db8;
}


.caselist-detail p.employee-location {
    color: rgb(245, 245, 245);
    margin: 2px 0px 0px -2px;
}

p.date-m {
    margin: 0;
    color: #c6c6c6;
    font-weight: 500;
    display: inline-block;
}

p.date-m span {
    color: #d0d0d0;
    font-weight: 400;
}





.info-row {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 15px;
}

.card-body .info-row {
    margin-bottom: 10px;
    margin-top: 10px;
}

/*.hsi-label {
  color: #fff;
  margin-bottom: 0px;
  margin-left: 5px;
  background: #888;
  padding: 5px 8px;
  font-size: 12px;
  vertical-align: middle;
  border-radius: 3px;
  font-weight: normal;
  top: -2px;
  position: relative;
}*/

.hsi-label {
    color: #fff;
    margin-bottom: 0px;
    margin-left: 5px;
    background: #888;
    padding: 0px 8px;
    font-size: 12px;
    vertical-align: middle;
    border-radius: 3px;
    font-weight: normal;
    top: -2px;
    position: relative;
    line-height: 23px;
}


label.hsi-label.attachment-label {
    width: 40px;
    margin: 0;
    background: #489db8;
    padding: 2px 8px;
}

label.hsi-label.attachment-completed {
    width: auto;
    margin: 0;
    background: #74c549;
    padding: 2px 8px;
    display: inline-block;
    width: 50px;
    text-align: center;
}

label.jobtimelabel {
    background: #74c549;
}

.timezon {
    background: #489db8 !important;
}

label.reportedby-label {
    background: #489db8;
}




.open-label {
    color: #ffffff;
    background: #74c549;
    vertical-align: middle;
    margin-bottom: 0px;
}

.closed-label {
    color: #fff;
    background: #f22613;
}

.pending-label {
    background: #feb342;
    color: #fff;
}

/*
.info-row:last-child{
margin-bottom: 0;
}*/

.info-div .info-label {
    font-size: 14px;
    margin: 0;
    font-weight: 500;
}

.info-div p {
    margin: 0;
    color: rgba(48, 64, 73, 0.8392156862745098);
    line-height: normal;
    font-size: 13px;
    word-break: break-all;
}

.info-div p a {
    color: #39558d;
    text-decoration: underline;
}

.info-row .info-icon {
    margin-right: 12px;
    color: rgba(66, 71, 71, 0.54);
}

.info-row .info-icon .svg-icon svg {
    width: 24px;
    fill: #999b9b;
}

.employee-work-information {
    position: sticky;
    top: 0;
}


.card.map-card {
    height: 278px;
}

.employee-work-information h3.card-header {
    text-transform: uppercase;
    padding: 0;
    margin-bottom: 15px;
}


.employeecase table.table--default td,
.employeecase table.table--default th {
    padding: 20px 5px;
    font-size: 13px;
}

.employeecase .detail-card .main-title {
    margin-bottom: 25px;
    color: #4b71a6;
}

#worklocationlist-dashboard,
#caselist-dashboard {
    display: none;
}

.open-entities-tab #worklocationlist-dashboard {
    display: block;
}

.open-cases-tab #caselist-dashboard {
    display: block;
}



.main-loader-div {
    position: fixed;
    z-index: 99999999;
    left: 0;
    right: 0;
    background: #39558d !important;
    top: 0;
    bottom: 0;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.main-loader-div h1 {
    position: relative;
    margin: 0;
    color: #fff;
    font-size: 34px;
    font-weight: 400;
    text-align: center;
    letter-spacing: 80px
}

.main-loader-div h2 {
    margin: 5em 0 1em;
    color: #fff;
    font-size: 30px;
    text-align: center;
    font-weight: 400;
}

/* common */
.main-loader-div .loading {
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 2px;
}

.main-loader-div .loading span {
    display: inline-block;
    margin: 0 -.05em;
}


/* code #7 */
.loading07 span {
    position: relative;
    color: rgba(0, 0, 0, 0.2);
}

.loading07 span::after {
    position: absolute;
    top: 0;
    left: 0;
    content: attr(data-text);
    color: #fff;
    opacity: 0;
    transform: scale(1.5);
    animation: loading07 3s infinite;
}

.loading07 span:nth-child(2)::after {
    animation-delay: 0.1s;
}

.loading07 span:nth-child(3)::after {
    animation-delay: 0.2s;
}

.loading07 span:nth-child(4)::after {
    animation-delay: 0.3s;
}

.loading07 span:nth-child(5)::after {
    animation-delay: 0.4s;
}

.loading07 span:nth-child(6)::after {
    animation-delay: 0.5s;
}

.loading07 span:nth-child(7)::after {
    animation-delay: 0.6s;
}

.loading07 span:nth-child(8)::after {
    animation-delay: 0.7s;
}

.loading07 span:nth-child(9)::after {
    animation-delay: 0.8s;
}

.loading07 span:nth-child(10)::after {
    animation-delay: 0.9s;
}

.loading07 span:nth-child(11)::after {
    animation-delay: 1s;
}

.loading07 span:nth-child(12)::after {
    animation-delay: 1.1s;
}

@keyframes loading07 {

    0%,
    75%,
    100% {
        transform: scale(1.5);
        opacity: 0;
    }

    25%,
    50% {
        transform: scale(1);
        opacity: 1;
    }
}

.pageLoad {
    overflow: hidden;
}

.pageLoad .mdl-layout__container {
    opacity: 0;
}

.main-loader-div {
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
}

.pageLoad .main-loader-div {
    opacity: 1;
    visibility: visible;
}

/*.mdl-tabs.is-upgraded .mdl-tabs__panel {
  display: block;
}*/

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.center-popup-withheader {
    padding-top: 62px;
}

.center-popup-withheader .modal-dialog {
    position: fixed;
    margin: auto;
    width: 100%;
    height: 100%;
    max-width: 1300px;
    left: 0;
    right: 0;
}

.center-popup-withheader .modal-dialog .modal-content {
    height: 100%;
    overflow-y: auto;
    border-radius: 0;
    top: 0;
}

.center-popup-withheader .modal-body {
    padding: 15px 15px 50px;
    height: 100%;
    overflow: auto;
}


.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    background: no-repeat;
    border: none;
}


.message-box {
    margin-bottom: 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.message-box-footer {
    padding: 10px 15px;
    text-align: right;
    border-top-color: rgba(0, 0, 0, .12);
    background: #e5e5e5;
}

.message-box .form-control {
    outline: none;
    box-shadow: none !important;
}

.message-section .main-title span {
    margin-right: auto;
    margin-left: 10px;
    color: #868888;
}

.import-export-button {
    display: flex;
    align-items: center;
}

.export-csv-button {
    display: flex;
}


.import-export-button button {
    border-radius: 0 !important;
    margin-left: 0;
    font-weight: 400;
    font-size: 14px;
    background: rgba(57, 85, 141, 0.88) !important;
    height: 30px;
    line-height: 30px;
    box-shadow: none;
}

.export-csv-button {
    display: flex;
    margin-left: 15px;
}


span.export-pdf-button {
    background: #39558d;
    width: 34px;
    text-align: center;
    line-height: 28px;
    color: white;

}

.export-pdf-button .material-icons {
    font-size: 19px;

}

div#starks-panel {
    display: block;
    padding: 0;
}

.showingmap {}


.map-controls {
    text-align: right;
    background: white;
    display: flex;
    border-radius: 0;
    overflow: hidden;
}



.map-controls {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
    padding: 0px;
}


.map-controls .material-icons {
    margin-right: 5px;
}

.map-controls input[type=radio] {
    display: none;
}


.map-controls label.switch {
    margin: 0;
    padding: 3px 15px;
    cursor: pointer;
    transition: all 0.5s;
    position: relative;
    display: flex;
    align-items: center;
    color: #868888;
    height: 30px;
}




.round-controllar.map-controls {
    box-shadow: none !important;
    background: none;
    border: none;
    overflow: visible;
    transition: all 0.3s;
    /* box-shadow: 0px 0px 12px -3px #00000073; */
    position: relative;
}

.with-map .round-controllar.map-controls {
    visibility: visible;
    opacity: 1;
}

.round-controllar.map-controls .switchToggle {
    position: relative;
    overflow: visible;
    height: 30px;
    margin-right: 10px;
    outline: none;
    margin-right: 0;
    width: 60px;
}

button.clear-map-control {
    background: no-repeat;
    border: none;
    visibility: hidden;
    margin: 0;
    padding: 0;
    cursor: pointer;
    transition: all 0.5s;
    position: relative;
    align-items: center;
    color: #868888;
    height: 30px;
    font-weight: 500;
    width: 0;
    overflow: hidden;

}

button.clear-map-control:hover {
    opacity: 1;
}

.view-full-list button.clear-map-control,
.view-full-map button.clear-map-control {
    transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 1;
    visibility: visible;
    width: auto;
    padding: 3px 15px;
    border-left: 1px solid rgba(204, 204, 204, 0.61);
}



.round-controllar .switchToggle:first-child {
    border-right: 1px solid #cccccc;
}



.round-controllar.map-controls label.switch .mdi {
    margin: 0;
    font-size: 20px;
    margin: auto;
}

.round-controllar.map-controls label.switch {
    background: #fff;
    padding: 0;
}








.svg-icon {
    width: 20px;
    margin-right: 5px;
}

.svg-icon svg,
.svg-icon svg g {
    fill: #868888;
}



.map-controls label.switch:hover {
    color: #505050;
    background: #ededed;

}



.map-controls input[type=radio]:checked~label {
    color: #39558d !important;
}




.map-controls label.switch:hover {
    color: #39558d;
    background-color: rgba(57, 85, 141, 0.09) !important;
}








.round-controllar.map-controls label.switch {
    background: transparent !important;
    width: auto !important;
    text-align: center !important;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
}



.filedownloadbtn {
    color: #868888;
    margin-right: 0;
    width: 40px;
    height: 40px;
}

.map-controls .switchToggle {
    position: relative;
    width: 50%;
}






.main--osca .profile--btn .profile-btn-name {
    background: #b00e23 !important
}

.main--asap .profile--btn .profile-btn-name {
    background: #028940 !important
}



label.switch.map-view-switch {
    border-right: 1px solid #cccccc9e;
    border-left: 1px solid rgba(204, 204, 204, 0.61);
}



.map-check .map-controls .map-view-switch,
.view-full-map .map-controls .map-view-switch {
    color: #fff !important;

}



.map-controls input[type=radio]:checked~label svg g,
.map-controls input[type=radio]:checked~label svg {
    fill: #fff !important;
}

.list-check .map-controls .list-view-switch,
.view-full-list .map-controls .list-view-switch {
    color: #fff !important;
    border-right: 0px solid #cccccc9e;
}



/*
.outerDivFull { margin:50px; } 

.switchToggle input[type=checkbox]{height: 0; width: 0; visibility: hidden; position: absolute; }
.switchToggle label {cursor: pointer; text-indent: -9999px; width: 70px; max-width: 70px; height: 30px; background: #d1d1d1; display: block; border-radius: 100px; position: relative; }
.switchToggle label:after {content: ''; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; background: #fff; border-radius: 90px; transition: 0.3s; }
.switchToggle input:checked + label, .switchToggle input:checked + input + label  {background: #3e98d3; }
.switchToggle input + label:before, .switchToggle input + input + label:before {content: 'No'; position: absolute; top: 5px; left: 35px; width: 26px; height: 26px; border-radius: 90px; transition: 0.3s; text-indent: 0; color: #fff; }
.switchToggle input:checked + label:before, .switchToggle input:checked + input + label:before {content: 'Yes'; position: absolute; top: 5px; left: 10px; width: 26px; height: 26px; border-radius: 90px; transition: 0.3s; text-indent: 0; color: #fff; }
.switchToggle input:checked + label:after, .switchToggle input:checked + input + label:after {left: calc(100% - 2px); transform: translateX(-100%); }
.switchToggle label:active:after {width: 60px; } 
.toggle-switchArea { margin: 10px 0 10px 0; }*/

.demo-drawer .mdl-menu__container {
    left: 90px !important;
    margin-top: -78px;
}

.demo-drawer .demo-navigation li {
    position: relative;
    padding: 1px 5px;
    height: 40px;
    margin-bottom: 8px;
}

.profile--btn {
    padding: 0 !important;
}

.dropdown-menu {
    -webkit-box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, .07);
    box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, .07);
    border-radius: 0;
    padding: 8px;
    min-width: 230px;
}

.dropdown-menu.show,
.open>.dropdown-menu {
    border: none;
}

.dropdown-item {
    color: #565b5f;
    /* border-bottom: 1px solid rgba(227, 227, 227, 0.6196078431372549); */
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    line-height: 26px;
}

.dropdown-item svg,
.dropdown-item i,
.dropdown-item .mdi {
    fill: rgba(109, 108, 108, 0.76);
    color: rgba(109, 108, 108, 0.76);
    width: 20px;
    margin-top: 0px;
    margin-right: 5px;
    font-size: 20px;
    text-align: center;
}

.dropdown-item .material-icons {
    font-size: 18px;
    margin-right: 10px;
    color: inherit;
}



.demo-drawer .demo-navigation .dropdown-menu i.material-icons {
    color: #909090;
}



.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:hover {
    color: inherit;
    text-decoration: none;
    background-color: rgb(238, 238, 238);
}

.dropdown-item:hover svg,
.dropdown-item:hover i,
.dropdown-item:hover .mdi {
    fill: rgba(66, 64, 64, 0.76);
    color: rgba(66, 64, 64, 0.76);
}

.dropdown.dropright.show:before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3803921568627451);
    transform: scale(500);
        z-index: 1;
}

ul.navbar-nav.mdl-nav-tab {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    justify-content: left;
    -webkit-align-content: space-between;
    -ms-flex-line-pack: justify;
    align-content: space-between;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    /*height: 48px;*/
    padding: 0 0 0 0;
    margin: 0;
    border-bottom: 0px solid rgb(224, 224, 224);
    width: 100%;
    padding: 0 20px;
}

/*
nav.navbar.navbar-expand-sm {
  margin: -15px;
  background: white;
  margin-bottom: 15px;
  position: sticky;
  top: -16px;
  z-index: 11;
}*/

.caselist-detail-main--popup .modal-header {
    align-items: center;
    background:#242a30;
    border-radius: 0;
    min-height: 75px;
    position: relative;
}


nav.navbar.navbar-expand-sm {
    padding: 0;
    border: none;
    box-shadow: 0 1px 3px -1px rgba(0, 0, 0, .2), 0 2px 7px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
    background: #fff;
}

.mdl-layout__header-row,
.mdl-layout__header {
    height: 50px;
    min-height: 50px;
}

/*rgb(66, 71, 71)*/


.mian-ab-loader {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: white;
    z-index: 99999999999;
    margin: auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
}

.worklocation-form .row>.col-sm-3 {
    padding-left: 5px;
}


.mdl-c--tabs .mdl-nav-tab .nav-link {
    height: 40px;
    line-height: 40px;
    padding: 0 15px !important;
}

.mdl-c--tabs .mdl-nav-tab .nav-link.active {
    /*background: #e9e9e9;*/
}

.mdl-c--tabs .mdl-nav-tab .nav-link:hover {
    background: #e9e9e9;
}

ul.navbar-nav.mdl-nav-tab {}

.mdl-c--tabs .mdl-nav-tab .nav-link i {
    font-size: 18px;
}

.dropdown-toggle::after {
    border: none;
}

.mdl-tabs {
    display: block;
    width: 100%;
    padding-bottom: 0;
}

nav.navbar.navbar-expand-sm .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after,
nav.navbar.navbar-expand-sm .mdl-nav-tab .nav-link.active:after {
    background: rgb(163, 163, 163);
}


.dashboard-services-box-main {
    display: flex;
    flex-wrap: wrap;
    /* width: 100%;
    margin: 0px 0px 15px 0px;
    padding: 0px 4px; */
}

.dashboard-services-boxes {
    margin-bottom: 20px;
    width: 20%;
    padding: 0 10px;
}

.dashboard-services-boxes-description {
    position: relative;
    height: 100%;
    min-height: 150px;
}

.dashboard-services-front {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    visibility: visible;
    width: 100%;
    opacity: 1;
    transition: visibility 0s ease-in .2s, opacity 0s ease-in .2s, -webkit-transform .5s ease-out 0s;
    transition: transform .5s ease-out 0s, visibility 0s ease-in .2s, opacity 0s ease-in .2s;
    transition: transform .5s ease-out 0s, visibility 0s ease-in .2s, opacity 0s ease-in .2s, -webkit-transform .5s ease-out 0s;
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #fff;
    padding: 12px;
    position: relative;
    border-radius: 0;
    border: 1px solid;
    border-color: rgba(0, 0, 0, .12);
    justify-content: space-between;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 0;
}

.dashboard-services-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    padding: 5px;
}

.dashboard-services-front .widget-content {
    position: relative;
    top: -14px;
}

.dashboard-services-front .title {
    font-size: 30px;
    margin-bottom: 10px;
}

.navy-header-color {
    color:#242a30;
}

.sub-title.h5 {
    letter-spacing: 1px;
    margin-left: 5px;
    color: #888888;
    font-weight: normal;
    font-size: 15px;
}

.dashboard-services-back {
    display: block;
    /*justify-content: space-between;*/
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    z-index: 10;
    transition: visibility 0s ease-in .2s, opacity 0s ease-in .2s, -webkit-transform .5s ease-out 0s;
    transition: transform .5s ease-out 0s, visibility 0s ease-in .2s, opacity 0s ease-in .2s;
    transition: transform .5s ease-out 0s, visibility 0s ease-in .2s, opacity 0s ease-in .2s, -webkit-transform .5s ease-out 0s;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding: 10px;
    margin: auto;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 1px solid;
    border-color: rgba(0, 0, 0, .12);
    display: flex;
    flex-direction: column;
    padding-top: 0;
}

.dashbord-multiline {
    display: inline-block;
    font-size: 14px;
    width: 100%;
}

.dashboard-services-multiline {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    margin: 8px 0;
}

.flipped .dashboard-services-front {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

.flipped .dashboard-services-back {
    visibility: visible;
    opacity: 1;
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
}




.dashboard-services-title p {
    margin: 0;
    text-transform: capitalize;
    font-weight: 500;
}

.onsite-font-color {
    color: #028940 !important;
}

.telemedicine-font-color {
    color: #8e49bf !important;
}

.dtp-font-color {
    color: #ffc20d !important;
}

.dashboard-services-multiline span {
    font-weight: 600;
    color: #5d5d5d;
}


.dashboard-services-boxes-description .mdl-button {
    color: rgb(89, 89, 89);
}

.dashboard-services-boxes-description .dashboard-services-title .mdl-button {
    color: rgb(89, 89, 89);
    background: none;
    box-shadow: none;
    width: 30px;
    height: 30px;
    min-width: 30px;
    margin-right: -13px !important;
}

.dashboard-services-boxes-description .dashboard-services-back .dashboard-services-title .mdl-button {
    margin-left: -13px !important;
}

.dashboard-services-boxes-description .dashboard-services-title .mdl-button:hover {
    background:#242a302e;
}

/*MESSAGE MAIN*/




#frame {
    width: 95%;
    min-width: 360px;
    /*max-width: 1000px;*/
    height: 92vh;
    min-height: 300px;
    max-height: 720px;
    background: #E6EAEA;
}

@media screen and (max-width: 360px) {
    #frame {
        width: 100%;
        height: 100vh;
    }
}

#frame #sidepanel {
    float: left;
    min-width: 280px;
    max-width: 340px;
    width: 40%;
    height: 100%;
    background: #2c3e50;
    color: #f5f5f5;
    overflow: hidden;
    position: relative;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel {
        width: 58px;
        min-width: 58px;
    }
}

#frame #sidepanel #profile {
    width: 80%;
    margin: 25px auto;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile {
        width: 100%;
        margin: 0 auto;
        padding: 5px 0 0 0;
        background: #32465a;
    }
}

#frame #sidepanel #profile.expanded .wrap {
    height: 210px;
    line-height: initial;
}

#frame #sidepanel #profile.expanded .wrap p {
    margin-top: 20px;
}

#frame #sidepanel #profile.expanded .wrap i.expand-button {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

#frame #sidepanel #profile .wrap {
    height: 60px;
    line-height: 60px;
    overflow: hidden;
    -moz-transition: 0.3s height ease;
    -o-transition: 0.3s height ease;
    -webkit-transition: 0.3s height ease;
    transition: 0.3s height ease;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap {
        height: 55px;
    }
}

#frame #sidepanel #profile .wrap img {
    width: 50px;
    border-radius: 50%;
    padding: 3px;
    border: 2px solid #e74c3c;
    height: auto;
    float: left;
    cursor: pointer;
    -moz-transition: 0.3s border ease;
    -o-transition: 0.3s border ease;
    -webkit-transition: 0.3s border ease;
    transition: 0.3s border ease;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap img {
        width: 40px;
        margin-left: 4px;
    }
}

#frame #sidepanel #profile .wrap img.online {
    border: 2px solid #2ecc71;
}

#frame #sidepanel #profile .wrap img.away {
    border: 2px solid #f1c40f;
}

#frame #sidepanel #profile .wrap img.busy {
    border: 2px solid #e74c3c;
}

#frame #sidepanel #profile .wrap img.offline {
    border: 2px solid #95a5a6;
}

#frame #sidepanel #profile .wrap p {
    float: left;
    margin-left: 15px;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap p {
        display: none;
    }
}

#frame #sidepanel #profile .wrap i.expand-button {
    float: right;
    margin-top: 23px;
    font-size: 0.8em;
    cursor: pointer;
    color: #435f7a;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap i.expand-button {
        display: none;
    }
}

#frame #sidepanel #profile .wrap #status-options {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    width: 150px;
    margin: 70px 0 0 0;
    border-radius: 6px;
    z-index: 99;
    line-height: initial;
    background: #435f7a;
    -moz-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap #status-options {
        width: 58px;
        margin-top: 57px;
    }
}

#frame #sidepanel #profile .wrap #status-options.active {
    opacity: 1;
    visibility: visible;
    margin: 75px 0 0 0;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap #status-options.active {
        margin-top: 62px;
    }
}

#frame #sidepanel #profile .wrap #status-options:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #435f7a;
    margin: -8px 0 0 24px;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap #status-options:before {
        margin-left: 23px;
    }
}

#frame #sidepanel #profile .wrap #status-options ul {
    overflow: hidden;
    border-radius: 6px;
}

#frame #sidepanel #profile .wrap #status-options ul li {
    padding: 15px 0 30px 18px;
    display: block;
    cursor: pointer;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap #status-options ul li {
        padding: 15px 0 35px 22px;
    }
}

#frame #sidepanel #profile .wrap #status-options ul li:hover {
    background: #496886;
}

#frame #sidepanel #profile .wrap #status-options ul li span.status-circle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 5px 0 0 0;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap #status-options ul li span.status-circle {
        width: 14px;
        height: 14px;
    }
}

#frame #sidepanel #profile .wrap #status-options ul li span.status-circle:before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -3px 0 0 -3px;
    background: transparent;
    border-radius: 50%;
    z-index: 0;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap #status-options ul li span.status-circle:before {
        height: 18px;
        width: 18px;
    }
}

#frame #sidepanel #profile .wrap #status-options ul li p {
    padding-left: 12px;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap #status-options ul li p {
        display: none;
    }
}

#frame #sidepanel #profile .wrap #status-options ul li#status-online span.status-circle {
    background: #2ecc71;
}

#frame #sidepanel #profile .wrap #status-options ul li#status-online.active span.status-circle:before {
    border: 1px solid #2ecc71;
}

#frame #sidepanel #profile .wrap #status-options ul li#status-away span.status-circle {
    background: #f1c40f;
}

#frame #sidepanel #profile .wrap #status-options ul li#status-away.active span.status-circle:before {
    border: 1px solid #f1c40f;
}

#frame #sidepanel #profile .wrap #status-options ul li#status-busy span.status-circle {
    background: #e74c3c;
}

#frame #sidepanel #profile .wrap #status-options ul li#status-busy.active span.status-circle:before {
    border: 1px solid #e74c3c;
}

#frame #sidepanel #profile .wrap #status-options ul li#status-offline span.status-circle {
    background: #95a5a6;
}

#frame #sidepanel #profile .wrap #status-options ul li#status-offline.active span.status-circle:before {
    border: 1px solid #95a5a6;
}

#frame #sidepanel #profile .wrap #expanded {
    padding: 100px 0 0 0;
    display: block;
    line-height: initial !important;
}

#frame #sidepanel #profile .wrap #expanded label {
    float: left;
    clear: both;
    margin: 0 8px 5px 0;
    padding: 5px 0;
}

#frame #sidepanel #profile .wrap #expanded input {
    border: none;
    margin-bottom: 6px;
    background: #32465a;
    border-radius: 3px;
    color: #f5f5f5;
    padding: 7px;
    width: calc(100% - 43px);
}

#frame #sidepanel #profile .wrap #expanded input:focus {
    outline: none;
    background: #435f7a;
}

#frame #sidepanel #search {
    border-top: 1px solid #32465a;
    border-bottom: 1px solid #32465a;
    font-weight: 300;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #search {
        display: none;
    }
}

#frame #sidepanel #search label {
    position: absolute;
    margin: 10px 0 0 20px;
}

#frame #sidepanel #search input {
    font-family: "proxima-nova", "Source Sans Pro", sans-serif;
    padding: 10px 0 10px 46px;
    width: calc(100% - 25px);
    border: none;
    background: #32465a;
    color: #f5f5f5;
}

#frame #sidepanel #search input:focus {
    outline: none;
    background: #435f7a;
}

#frame #sidepanel #search input::-webkit-input-placeholder {
    color: #f5f5f5;
}

#frame #sidepanel #search input::-moz-placeholder {
    color: #f5f5f5;
}

#frame #sidepanel #search input:-ms-input-placeholder {
    color: #f5f5f5;
}

#frame #sidepanel #search input:-moz-placeholder {
    color: #f5f5f5;
}

#frame #sidepanel #contacts {
    height: calc(100% - 177px);
    overflow-y: scroll;
    overflow-x: hidden;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #contacts {
        height: calc(100% - 149px);
        overflow-y: scroll;
        overflow-x: hidden;
    }

    #frame #sidepanel #contacts::-webkit-scrollbar {
        display: none;
    }
}

#frame #sidepanel #contacts.expanded {
    height: calc(100% - 334px);
}

#frame #sidepanel #contacts::-webkit-scrollbar {
    width: 8px;
    background: #2c3e50;
}

#frame #sidepanel #contacts::-webkit-scrollbar-thumb {
    background-color: #243140;
}

#frame #sidepanel #contacts ul li.contact {
    position: relative;
    padding: 10px 0 15px 0;
    font-size: 0.9em;
    cursor: pointer;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #contacts ul li.contact {
        padding: 6px 0 46px 8px;
    }
}

#frame #sidepanel #contacts ul li.contact:hover {
    background: #32465a;
}

#frame #sidepanel #contacts ul li.contact.active {
    background: #32465a;
    border-right: 5px solid #435f7a;
}

#frame #sidepanel #contacts ul li.contact.active span.contact-status {
    border: 2px solid #32465a !important;
}

#frame #sidepanel #contacts ul li.contact .wrap {
    width: 88%;
    margin: 0 auto;
    position: relative;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #contacts ul li.contact .wrap {
        width: 100%;
    }
}

#frame #sidepanel #contacts ul li.contact .wrap span {
    position: absolute;
    left: 0;
    margin: -2px 0 0 -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #2c3e50;
    background: #95a5a6;
}

#frame #sidepanel #contacts ul li.contact .wrap span.online {
    background: #2ecc71;
}

#frame #sidepanel #contacts ul li.contact .wrap span.away {
    background: #f1c40f;
}

#frame #sidepanel #contacts ul li.contact .wrap span.busy {
    background: #e74c3c;
}

#frame #sidepanel #contacts ul li.contact .wrap img {
    width: 40px;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #contacts ul li.contact .wrap img {
        margin-right: 0px;
    }
}

#frame #sidepanel #contacts ul li.contact .wrap .meta {
    padding: 5px 0 0 0;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #contacts ul li.contact .wrap .meta {
        display: none;
    }
}

#frame #sidepanel #contacts ul li.contact .wrap .meta .name {
    font-weight: 600;
}

#frame #sidepanel #contacts ul li.contact .wrap .meta .preview {
    margin: 5px 0 0 0;
    padding: 0 0 1px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -moz-transition: 1s all ease;
    -o-transition: 1s all ease;
    -webkit-transition: 1s all ease;
    transition: 1s all ease;
}

#frame #sidepanel #contacts ul li.contact .wrap .meta .preview span {
    position: initial;
    border-radius: initial;
    background: none;
    border: none;
    padding: 0 2px 0 0;
    margin: 0 0 0 1px;
    opacity: .5;
}

#frame #sidepanel #bottom-bar {
    position: absolute;
    width: 100%;
    bottom: 0;
}

#frame #sidepanel #bottom-bar button {
    float: left;
    border: none;
    width: 50%;
    padding: 10px 0;
    background: #32465a;
    color: #f5f5f5;
    cursor: pointer;
    font-size: 0.85em;
    font-family: "proxima-nova", "Source Sans Pro", sans-serif;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #bottom-bar button {
        float: none;
        width: 100%;
        padding: 15px 0;
    }
}

#frame #sidepanel #bottom-bar button:focus {
    outline: none;
}

#frame #sidepanel #bottom-bar button:nth-child(1) {
    border-right: 1px solid #2c3e50;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #bottom-bar button:nth-child(1) {
        border-right: none;
        border-bottom: 1px solid #2c3e50;
    }
}

#frame #sidepanel #bottom-bar button:hover {
    background: #435f7a;
}

#frame #sidepanel #bottom-bar button i {
    margin-right: 3px;
    font-size: 1em;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #bottom-bar button i {
        font-size: 1.3em;
    }
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #bottom-bar button span {
        display: none;
    }
}

#frame .content {
    float: right;
    width: 60%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

@media screen and (max-width: 735px) {
    #frame .content {
        width: calc(100% - 58px);
        min-width: 300px !important;
    }
}

@media screen and (min-width: 900px) {
    #frame .content {
        width: calc(100% - 340px);
    }
}

#frame .content .contact-profile {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #f5f5f5;
    align-items: center;
    display: flex;
    padding: 0 15px;
}

#frame .content .contact-profile img {
    width: 43px;
    border-radius: 50%;
    float: left;
    margin: 9px 12px 0 9px;
    background: #ffffff4d;
    height: 43px;
}

#frame .content .contact-profile p {
    float: left;
    margin: 0;
    margin-top: 19px;
    color: white;
}

#frame .content .contact-profile .social-media {
    float: right;
    display: none;
}

#frame .content .contact-profile .social-media i {
    margin-left: 14px;
    cursor: pointer;
}

#frame .content .contact-profile .social-media i:nth-last-child(1) {
    margin-right: 20px;
}

#frame .content .contact-profile .social-media i:hover {
    color: #435f7a;
}

#frame .content .messages {
    height: auto;
    min-height: calc(100% - 93px);
    max-height: calc(100% - 93px);
    overflow-y: scroll;
    overflow-x: hidden;
}

@media screen and (max-width: 735px) {
    #frame .content .messages {
        max-height: calc(100% - 105px);
    }
}

#frame .content .messages::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}

#frame .content .messages::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
}

#frame .content .messages ul li {
    display: inline-block;
    clear: both;
    float: left;
    margin: 15px 15px 5px 15px;
    width: calc(100% - 25px);
    font-size: 0.9em;
}

#frame .content .messages ul li:nth-last-child(1) {
    margin-bottom: 20px;
}

#frame .content .messages ul li.sent img {
    margin: 6px 8px 0 0;
}

#frame .content .messages ul li.sent p {
    background: #435f7a;
    color: #f5f5f5;
    border-radius: 0px 20px 20px 20px;
}

#frame .content .messages ul li.replies img {
    float: right;
    margin: 6px 0 0 8px;
}

#frame .content .messages ul li.replies p {
    background: #e6eaea;
    float: right;
    border-radius: 20px 0 20px 20px;
}

#frame .content .messages ul li img {
    width: 22px;
    border-radius: 50%;
    float: left;
}

#frame .content .messages ul li p {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 20px;
    max-width: 205px;
    line-height: 130%;
}

@media screen and (min-width: 735px) {
    #frame .content .messages ul li p {
        max-width: 300px;
    }
}

#frame .content .message-input {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 99;
}

#frame .content .message-input .wrap {
    position: relative;
}

#frame .content .message-input .wrap input {
    font-family: "proxima-nova", "Source Sans Pro", sans-serif;
    float: left;
    border: none;
    width: calc(100% - 90px);
    padding: 11px 32px 10px 8px;
    font-size: 0.8em;
    color: #32465a;
}

@media screen and (max-width: 735px) {
    #frame .content .message-input .wrap input {
        padding: 15px 32px 16px 8px;
    }
}

#frame .content .message-input .wrap input:focus {
    outline: none;
}

#frame .content .message-input .wrap .attachment {
    position: absolute;
    right: 60px;
    z-index: 4;
    margin-top: 10px;
    font-size: 1.1em;
    color: #435f7a;
    opacity: .5;
    cursor: pointer;
}

@media screen and (max-width: 735px) {
    #frame .content .message-input .wrap .attachment {
        margin-top: 17px;
        right: 65px;
    }
}

#frame .content .message-input .wrap .attachment:hover {
    opacity: 1;
}

#frame .content .message-input .wrap button {
    float: right;
    border: none;
    width: 50px;
    padding: 12px 0;
    cursor: pointer;
    background: #32465a;
    color: #f5f5f5;
}

@media screen and (max-width: 735px) {
    #frame .content .message-input .wrap button {
        padding: 16px 0;
    }
}

#frame .content .message-input .wrap button:hover {
    background: #435f7a;
}

#frame .content .message-input .wrap button:focus {
    outline: none;
}


/*CSS DFF*/
#frame .content {
    width: 100%;
}

#frame .content .message-input {
    DISPLAY: NONE;
}

.messages ul {
    padding: 0;
    margin-top: auto;
}

#frame .content .messages {
    height: auto;
    min-height: calc(100% - 58px);
    max-height: calc(100% - 58px);
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid #e7e5e5;
    background: white;
    display: flex;
    flex-direction: column;
}

div#sidepanel {
    display: none;
}

#frame {
    width: 100%;
}

#frame .content .messages ul li.sent img,
#frame .content .messages ul li.replies img {
    background:#242a3038;
    height: 22px;
}

#frame .content .contact-profile {
    background: #e6eaea;
    border: 1px solid #e7e5e5;
}

#frame {
    width: 100%;
    height: 400px;
}

#frame .content .contact-profile p {
    float: none;
    margin: 0;
    margin-top: 0;
    color:#242a30;
}

frame .content .contact-profile {
    background:#242a30;
    display: flex;
    align-items: center;
    padding: 0 15px;
}

#frame .content .contact-profile img {
    width: 43px;
    border-radius: 50%;
    float: left;
    margin: 0;
    background: #9fa8a8;
    height: 43px;

    margin-right: 15px;
}

#frame .content .contact-profile p {
    line-height: 18px;
}

.Superviser-info {
    color: #74c549 !important;
}

.Superviser-info strong {
    font-weight: 500;
}


.Superviser-info strong {
    font-weight: 500;
    color: #8c8b8b;
}

p.company--name {
    font-size: 16px;
    color: #435f7a !important;
}

.right--nagivation .right--nagivation-menu {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}


.dropdown--right .dropdown-menu,
.dropdown--left .dropdown-menu {
    margin-top: 15px;
}


.dropdown--right .dropdown-menu:before,
.dropdown--left .dropdown-menu:before {
    content: "";
    width: 13px;
    height: 13px;
    position: absolute;
    background: white;
    margin-top: -15px;
    right: 11px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    border-radius: 0;
    z-index: -1;
    border-radius: 4px 0 0 0;
}


.dropdown--left .dropdown-menu:before {
    right: inherit;
    left: 11px;
}

/*.right--nagivation-menu > li {
  padding: 0 0;
  border-left: 1px solid #cccccc;
  height: 45px;
  align-items: center;
  display: flex;
  justify-content: center;
}*/

.profile--btn .profile-btn-name {
    background: #39558d !important;
    text-align: center;
    color: #fff;
    font-size: 14px;
    border: 3px solid #fff;
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 50%;
    margin: 0;
    margin: auto;
    line-height: 34px;
    margin: 0 !important;
}

.profile--btn {
    padding: 0 !important;
}

.profile--btn .profile-btn-name:hover {
    border: 3px solid #ececec;
}

.right--nagivation-menu>li .mdl-nav--btn {
    height: 40px;
    min-width: 40px;
    width: 40px;
    margin-right: 10px;
    /* border-radius: 0; */
}

.right--nagivation-menu>li .mdl-nav--btn i {
    color: #959595;
}

.right--nagivation-menu>li .mdl-nav--btn .mdl-button__ripple-container {
    border-radius: 0;
}

.active-notification-list .notification--btn {
    background-color: rgba(158, 158, 158, 0.20);
}

.active-notification-list .notification--btn:hover svg {
    fill: rgba(76, 75, 75, 0.76);
}


.dropdown.show .mdl-button,
.dropdown .show .mdl-button {
    background-color: rgba(158, 158, 158, 0.20);
}

.mdl-button {
    transition: all 0.5s;
}

.dropdown.action-dropdown.show .mdl-button,
.dropdown.action-dropdown .show .mdl-button {
    background-color: rgb(66, 71, 71);
    z-index: 99999;
    color: #fff;
    transform: rotate(90deg);
}

.dropdown.action-dropdown.show .mdl-button .mdi:before,
.dropdown.action-dropdown .show .mdl-button .mdi:before {
    content: "\F156";
}


.action-dropdown .dropdown-menu[x-placement^=bottom],
.action-dropdown .dropdown-menu[x-placement^=top] {
    margin-top: 20px;
    margin-right: 12px !important;
    transform: none !important;
    right: 0 !important;
    left: inherit !important;
}

.action-dropdown .dropdown-menu[x-placement^=top] {
    bottom: 10px;
    top: initial !IMPORTANT;
}

.dropdown.show .mdl-button svg,
.dropdown .show .mdl-button svg {
    fill: rgb(80, 80, 80);
}

.notifications--popup .modal-dialog,
.filter--popup .modal-dialog {
    max-width: 470px !important;
}

.modal.notifications--popup,
.modal.filter--popup {
    background: rgba(100, 111, 121, 0.04);
}


.notifications--popup .modal-body,
.filter--popup .modal-body {
    margin: 0 !important;
}

.notifiaction--list {
    margin: 0 -15px;
}


.notifications--popup .modal-header,
.filter--popup .modal-header {
    min-height: 50px;
    background:#242a30;
    color: #ffffff;
    border-bottom: 1px solid #dee2e6;
}

.notifications--popup .modal-header h5,
.filter--popup .modal-header h5 {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 15px;
}

.notifications--popup .modal-header a,
.filter--popup .modal-header a {
    color: rgb(195, 195, 195);
    font-weight: 400;
}


.notifiaction--list .media-list-link {
    display: block;
    color: #65696d;
}

.notifiaction--list .media-list-link .media p strong {
    font-weight: 500;
}

.notifiaction--list .media-list-link .media .highlighted--blue {
    color: #39558d;
}

.notifiaction--list .media-list-link:hover,
.notifiaction--list .media-list-link:focus,
.media-list-link.unread {
    background-color: rgb(237, 237, 237);
}

.notifiaction--list .media-list-link .media {
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: flex-start;
    align-items: center;
    padding: 10px 15px;
}


.n-icon {
    padding: 5px;
    background: #65696d26;
    border-radius: 5px;
}

.notifiaction--list .media-list-link .media p {
    margin-bottom: 0;
    font-weight: 300;
}

.notifiaction--list .media-body {
    margin-left: 15px;
}


.notifiaction--list .media-list-link .date--name {
    color: #868e96;
    font-weight: 400;
    font-size: 12px;
}

.service-start-form {
    display: flex;
    align-items: center;
    flex-direction: column;
    background: white;
    max-width: 500px;
    padding: 20px;
    margin: 20px auto;
    box-shadow: 0px 0 19px -6px #8686865c;
}

.service-start-form .mdl-textfield {
    width: 100%;
}

.service-start-form img {
    max-width: 214px;
    margin: 20px auto;
    display: block;
    width: 100%;
}

.all-center--box {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.service-start-form .bx--date-picker {
    width: 100%;
}

.filter--popup .modal-body {
    padding: 0 !important;
}


.filter--popup .main--filter-box {
    position: relative;
    padding: 20px;
}

.filter--popup .modal-body {
    max-height: calc(100% - 164px) !important;
}


.calendar-input {
    position: relative;
}

.calendar-input .bx--date-picker__icon {
    position: absolute;
    right: 11px;
    left: inherit;
    top: 12px;
}

.service-start-form h3.title--form {
    font-size: 22px;
    text-align: center;
}

.bx--date-picker__day,
.flatpickr-day {
    font-weight: 600;
    font-size: 12px;
}

.dropdown-menu {
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.18);
    box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.18);
}

.dropright .dropdown-menu {
    margin-left: 13px;
    width: 305px;
}


.dropdown-submenu .dropdown-menu {
    margin-left: 5px;
}

.dropdown.dropright.show:after {
    content: "";
    width: 13px;
    height: 13px;
    position: absolute;
    background: #ffffff;
    right: -21px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    border-radius: 0;
    z-index: 111;
    left: inherit;
    top: 16px;
    border-radius: 0 7px 0 4px;
}
.mian--menu--btn {
    margin-left: 0;
    margin-right: 6px;
    height: 50px;
    min-width: 50px;
    width: 50px;
    border-radius: 0;
}

.sidebar-menu-navigation .dropdown-item{
        padding: 5px 15px;
}

span.services-name {
    font-weight: 500;
     color: rgb(57, 85, 141);
}

span.services-name{
    opacity: 0.8;
}

.mian--menu--btn .mdi {
    font-size: 20px;
    vertical-align: middle;
    margin-left: -4px;
}





.mdl-layout--fixed-drawer .mdl-layout__content {
    transition: all 0.5s;
    position: relative;
    width: calc(100% - 50px);
}

.open-small--menu .mdl-layout--fixed-drawer .mdl-layout__content {
    margin-left: 0;
    transition: all 0.5s;
}

.open-small--menu .sidebar--panel {
    left: 0;
}




.main-services-menu .dropdown-menu {
    width: 360px;
    padding: 10px;
    border: none;
}

.main-services-menu .dropdown-menu .dropdown-item {
    display: inline-block;
    width: 50%;
    float: left;
    white-space: normal;
    clear: inherit;
    text-align: center;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 6px;
    transition: all 0.2s;
    padding: 10px;
    background: transparent;
}

.img--box {
    width: 90px;
    height: 90px;
    margin: auto;
}

.img--box img {
    max-width: 100%;
    max-height: 100%;
    /*filter: grayscale(1);*/
    opacity: 0.8;
}

.img--box svg,
.img--box g,
.img--box path {
    width: 100%;
    height: 100%;
    margin: 0;
    fill: #efeeee !important;
}



.img--box svg {
    transform: scale(1.1);
}

a.service--grid-box p {
    margin: 0;
    padding-bottom: 8px;
    font-weight: 500;
    font-size: 17px;
    color: #fff;
}

.dropdown--left.main-services-menu .dropdown-menu:before {
    margin-top: -17px;
}



.main-services-menu .dropdown-menu .service--grid-box {
    display: block;
    cursor: pointer;
    transition: all 0.3s;
    height: 130px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 0 12px;
}


.dropdown-item.other--menulink p {
    border: 5px solid white;
    font-size: 14px;
    text-transform: none;
    padding: 10px !important;
    line-height: 18px;
    border-radius: 15px;
    margin-top: 1px !important;
    font-weight: normal;
}

.main-services-menu .dropdown-menu .service--grid-box:hover {
    box-shadow: 1px 1px 8px -1px #8c8c8c;
}

.main-services-menu .dropdown-menu .dropdown-item.asap--menulink .service--grid-box {
    background: #028940 !important;
}

.main-services-menu .dropdown-menu .cos--menulink .service--grid-box {
    background: #39558d !important;
}

.main-services-menu .dropdown-menu .osca--menulink .service--grid-box {
    background: #b00e23 !important;
}

.main-services-menu .dropdown-menu .other--menulink .service--grid-box {
    background: #FE8500 !important;
}



img.png--icon {
    width: 18px;
    margin-right: 10px;
    color: inherit;
}



.main-content--body {
    padding: 20px;
    margin: 0;
}

.workspace--profile-section .basiclocation-detail {
    padding: 0 0 15px 0;
}


.workspace--main-section .detailed-card {
    padding: 0 15px;
    overflow: visible;
    -webkit-box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, .07);
    box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, .07);
}

.workspace--main-section .detailed-card h4.main-title {
    font-size: 20px;
    margin-bottom: 15px;
}

.workspace-details--card {
    margin-bottom: 15px;
}

.detailed-profile-box {
    position: relative;
    margin-top: 60px;
    height: 60px;
    margin-bottom: 10px;
}

.detailed-profile-pic {
    width: 120px;
    height: 120px;
    background: #ededed;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 5px -1px #000;
    border: 2px solid #fff;
    top: -60px;
    display: flex;
}

.detailed-profile-pic img {
    max-width: 100%;
    border-radius: 50%;
    width: 100%;
}

.workspace--profile-section .info-row .info-icon {
    margin-right: 12px;
    color: rgba(66, 71, 71, 0.54);
    padding: 5px;
    background: #65696d26;
    border-radius: 5px;
}

.workspace--profile-section .info-row .info-icon i {
    font-size: 20px;
}

.workspace--profile-section {
    position: sticky;
    top: 80px;
}

.mdl-button--fab.mdl-button--mini-fab {
    background: transparent;
    color: #868181;
    box-shadow: none;
    width: 30px;
    height: 30px;
    min-width: 30px;
}

.indent10px {
    margin-left: 10px;
}

.delete-btn.mdl-button--fab.mdl-button--mini-fab {
    color: #d93025;
    box-shadow: none;
}

.delete-btn.mdl-button--fab.mdl-button--mini-fab:hover {
    background: rgba(244, 67, 54, 0.16862745098039217);
}

.delete-btn .mdl-ripple {
    background: rgb(244, 67, 54);
}


.attachments-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: calc(100% + 15px);
    padding: 15px;
}

label.addattachment-btn {
    position: absolute;
    left: 25px;
    right: 25px;
    top: 25px;
    bottom: 25px;
    border: 1px dashed #a4adad;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


label.addattachment-btn .mdi {
    font-size: 4rem;
    vertical-align: middle;
    color: #adadad;
}

.attachment-box {
    display: flex;
    margin: 0 15px 15px 0;
    background-color: rgba(232, 232, 232, 0.62);
    border-radius: 4px 0 4px 4px;
    font-weight: 600;
    padding: 10px 15px;
    padding-bottom: 10px;
    padding-right: 20px;
    flex-direction: column;
    color: #666;
    position: relative;
    transition: .3s;
    flex: 0 1 calc(33.3% - 15px);
    cursor: default;
    position: relative;
    justify-content: space-between;
}

.test-report .attachment-box {
    flex: 0 1 calc(25% - 24px);
    margin: 10px 10px;
}

.attachment-box p.attachment-Date {
    color: #a7a7a7;
    display: flex;
    justify-content: space-between;
    font-weight: 400;
    margin-bottom: 15px;
}

.attachment-box:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 20px 20px 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, .15) #fff;
    transition: .3s;
    border-radius: 0 0 0 4px;
}



.actions--btn {
    display: flex;
    justify-content: flex-end;
    margin-right: -15px;
}

.actions--btn .mian--menu--btn {
    margin-right: 10px;
    margin-left: 0;
    width: 35px;
    height: 35px;
    min-width: 35px;
}

.actions--btn .mian--menu--btn i {
    color: #7d7d7d;
    font-size: 22px;
}

.attachment-box p {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    margin-bottom: 10px;
    color: #4f5050;
}

.btn--hover {
    position: relative;
}

.btn--hover .mdl-tooltip {
    position: absolute !important;
    left: 19px !important;
    top: 40px !important;
    right: 0;
    background: #555656;
    width: 70px;
}


/*profile content*/

/*my profile*/

.profile-setting {
    padding: 50px 0;
}

.profile-setting ul.main-menu-left-side li a {
    display: block;
    position: relative;
    padding: 10px;
    padding-left: 45px;
    border-left: 5px solid transparent;
    color: #4e4e4e;
}

.profile-setting ul.main-menu-left-side li a img {
    width: 20px;
    margin-right: 5px;
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    filter: grayscale(1);
}

.profile-setting ul.main-menu-left-side li a:hover {
    background: #a326380f;
    border-color: #c1c1c185;
}

.profile-setting ul.main-menu-left-side .active a img,
.profile-setting ul.main-menu-left-side li a.active img {
    filter: grayscale(0);
}

.profile-setting ul.main-menu-left-side li a.active,
.profile-setting ul.main-menu-left-side .active a {
    background: #a326380f;
    border-color: #a32638;
    color: #a32638;
}


.profile-content {
    display: inline-block;
    width: 100%;
    box-shadow: 0px 0px 16px -6px #827b7b;
    min-height: 150px;
    padding: 20px;
}

.profile-content .myprofileimg {
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin: 0 auto;
}


.profile-content h4.main-title {
    line-height: 30px;
}



.profile-content .form-control {
    width: 100%;
    padding: 8px 10px;
    border: 2px solid #c9c9c9;
    margin-top: 0px;
    outline: none;
    font-weight: 500;
    color: #656363;
    background-color: #fff;
    border-radius: 0;
    font-size: 14px;
    min-height: 40px;
}


.profile-content .password-div {
    position: relative;
}

.profile-content a.btn.hide-password {
    position: absolute;
    right: 8px;
    top: 0;
    padding: 0;
    line-height: 44px;
    font-size: 12px;
}

.profile-content .form-control:focus {
    box-shadow: none;
    border-color: #656363;
}

.profile-content .form-control.is-invalid {
    border-color: #e35d6a;
    color: #e35d6a;
}

.profile-content .form-control.is-valid {
    border-color: rgba(40, 167, 69, 0.8);
    color: rgba(40, 167, 69, 0.8);
}

.profile-content label {
    font-weight: normal;
    color: #888888;
    width: 100%;
    padding: 0;
    margin: 0;
    margin-top: 10px;
    text-transform: capitalize;
    margin-bottom: 2px;
}

.profile-content button.save-button {
    width: 100%;
    max-width: 320px;
    background: #a32638;
    color: #fff;
    margin-top: 15px;
    margin-bottom: 10px;
}


/*my profile*/

.profile-setting {
    padding: 50px 0;
}

.profile-setting ul.main-menu-left-side {
    display: inline-block;
    width: 100%;
    padding: 0;
    -webkit-box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, .07);
    box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, .07);
    background: #fff;
}

.profile-setting ul.main-menu-left-side li a {
    display: block;
    position: relative;
    padding: 10px;
    border-left: 5px solid transparent;
    color: #4e4e4e;
}

.profile-setting ul.main-menu-left-side li a svg {
    width: 20px;
    margin-right: 10px;
    fill: #4e4e4e;
}

.profile-setting ul.main-menu-left-side li a:hover {
    background: rgb(231, 234, 238);
    border-color: rgba(57, 85, 141, 0.14901960784313725);
}

.profile-setting ul.main-menu-left-side .active a svg,
.profile-setting ul.main-menu-left-side li a.active svg {
    fill: rgb(57, 85, 141);
}

.profile-setting ul.main-menu-left-side li a.active,
.profile-setting ul.main-menu-left-side .active a {
    background: #39558d14;
    border-color: #39558d;
    color: #39558d;
}

.profile-content {
    display: inline-block;
    width: 100%;
    min-height: 150px;
    -webkit-box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, .07);
    box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, .07);
    /*background: #fff;*/
}

.editprofile-pic {
    position: relative;
}

.editprofile-pic .mdl-button--fab {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 40px;
    background: #fff;
}

.profile-content .myprofileimg {
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
}

.profile-content .myprofileimg:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: "";
    background: #00000024;
    border-radius: 50%;
}

.profile-content .form-control {
    width: 100%;
    border: 2px solid #c9c9c9;
    margin-top: 0px;
    outline: none;
    font-weight: 500;
    color: #656363;
    background-color: #fff;
    border-radius: 4px;
    font-size: 14px;
}



.profile-content .form-control:focus,
.profile-content .form-control:active {
    color: #28343b;
}

.profile-content .password-div {
    position: relative;
}

.profile-content a.btn.hide-password {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    line-height: 40px;
    font-size: 12px;
    outline: none;
    box-shadow: none;
    padding: 0 8px;
    bottom: 0;
}

.profile-content .form-control:focus,
.profile-content .form-control:hover {
    box-shadow: none;
    border-color: #656363;
}

.profile-content .form-control:hover {
    border-color: #969595;
}

.profile-content .form-control.is-invalid {
    border-color: #e35d6a;
    color: #e35d6a;
}

.profile-content .form-control.is-valid {
    border-color: rgba(40, 167, 69, 0.8);
    color: rgba(40, 167, 69, 0.8);
}

.profile-content label {
    font-weight: normal;
    color: #5f5f5f;
    width: 100%;
    padding: 0;
    margin: 0;
    margin-top: 10px;
    text-transform: capitalize;
    margin-bottom: 2px;
    font-weight: 500;
}

.profile-content button.save-button {
    width: 100%;
    max-width: 320px;
    background: #a32638;
    color: #fff;
    margin-top: 15px;
    margin-bottom: 10px;
}




/*new html layout*/


.full-page-container,
.dashboard-container {
    height: calc(100vh - 50px);
    overflow: hidden;
}



.full-page-container {
    display: flex;
    width: 100%;
    /* flex-wrap: wrap; */
    background: #fff;
}

.full-page-container .full-page-sidebar,
.full-page-container .full-page-navigation {
    flex: 0 0 320px;
    visibility: visible;
    opacity: 1;
    max-width: 300px;
    min-width: 300px;
    position: relative;
    transition: all 0.3s linear;
    background: #f6f6f6;
}


/*.full-page-sidebar.hidden-sidebar.enabled-sidebar {
  visibility: visible;
  opacity: 1;
  max-width: 300px;
      min-width: 300px;
}*/
/*.full-page-sidebar.hidden-sidebar {
  visibility: hidden;
  transition: .4s;
  position: relative;
  opacity: 0;
  max-width: 0;
}*/
.full-page-sidebar.hidden-sidebar {
    /* visibility: hidden; */
    /* transition: .4s; */
    /* position: relative; */
    /* opacity: 0; */
    /* max-width: 0; */
    min-width: 300px;
    max-width: 300px;
}

.full-page-container.with-map .full-page-content-container {
    /* overflow: hidden !important;*/
    /*padding-right: 15px;*/
}

.full-page-content-container {
    background-color: #fff;
    padding: 0;
    position: relative;
    width: 100%;
}

.full-page-container.with-map .full-page-content-container {
    /*width: 60%;*/
}

.full-page-map-container {
    flex: auto;
    position: relative;
    background-color: #e5e3df;

}

.with-map .full-page-map-container {
    width: 300px;
    transition: all 0.5s;
}


.full-page-map-container .map-main-div {
    height: 100%;
}

h3.page-title {
    font-size: 18px;
    line-height: 32px;
    color: #000;
    font-weight: 400;
}


.full-page-content-inner {
  padding: 0 15px;
  padding-bottom: 0;
  display: block;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  margin-bottom: 35px;
  background-color: #fff;
  transition: .3s;
  position: relative;
  height: 100%;
  /* overflow: auto; */
  margin: 0;
  position: relative;
}


.full-page-content-inner-body {
  overflow: auto;
  height: calc(100% - 60px);
}



.with-map .full-page-content-container {
  width: calc(100% - 400px);

}

.vertical-separator {
  width: 1px;
  margin: 0 5px;
  height: 38px;
  background: #b9b9b9;
}

.notify-box {
  width: 100%;
  padding: 0px 15px 0 20px;
  line-height: 28px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9;
  position: relative;
  align-items: center;
  /*box-shadow: 0 0 18px 0 rgba(0,0,0,.12);*/
  margin: 0 -15px;
  width: calc(100% + 30px);
}

.sort-by {
  margin-left: auto;
}

.sort-by .bootstrap-select > .dropdown-toggle {
  flex: 1;
  position: relative;
  right: 0;
  top: 0;
  font-weight: 500;
  margin-left: 2px;
  width: auto;
  padding: 0;
  padding-right: 12px;
  background-color: transparent;
  box-shadow: none;
  height: 24px;
  color: #333;
  border: 0 !important;
}

.sort-by .dropdown-toggle::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid #aaa;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}


.sort-by .bootstrap-select .dropdown-menu {
  padding-top: 15px;
  top: 40px;
  right: 0;
  left: initial !important;
  position: absolute;
  min-width: 160px!important;
  flex: 1;
  box-shadow: 0 0 4px 0 rgba(0,0,0,.14);
      transform: none !important;
  top: 100% !important;
}

.sort-by .bootstrap-select .dropdown-item.active, .sort-by .bootstrap-select .dropdown-item:active {
  color: inherit;
  text-decoration: none;
  background-color: rgb(255, 255, 255);
  font-weight: 500;
}

.bootstrap-select .dropdown-menu {
  opacity: 0;
  /*transition: .4s;*/
  display: block;
  pointer-events: none;
  visibility: hidden;
  cursor: default;
  border-radius: 0 !important;
}

.bootstrap-select.show .dropdown-menu {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}





.compact-list-layout {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}



.compact-listing-items {
  padding: 5px 0;
  border-bottom: 1px solid #e7eaf1;
  transition: all 0.5s;
}

.compact-listing-items:hover {
  background: #f5f7f9;
  box-shadow: 0px 0px 16px -6px #39558d;
  transform: translatey(-3px);
  position: relative;
  z-index: 1;
}


.main--asap .compact-listing-items:hover {
  background:#e8f4ee;
  box-shadow: 0px 0px 16px -6px #028940;
}

.compact-listing-items:hover .compact-listing-row{
  border-color: #39558d !important;
}

.main--asap .compact-listing-items:hover .compact-listing-row {
  border-color: #028940 !important;
}
.main--asap h4.caselist-number {
  color: #028940 !important;
}

.compact-listing-row {
  display: flex;
  padding: 10px 0;
  transition: all 0.5s;
  align-items: center;
  border-left: 4px solid #e7eaf1;
}

.compact-listing-description {
  width: 100%;
   color: #777;
   padding-left: 10px;
}


.compactlisting-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}


.incompletelistview .compactlisting-ul {
  /*justify-content: space-between;*/
}

.more-filter {
  border-radius: 0;
  height: 32px;
  padding: 0 10px;
}
.compactlisting-ul li {
  margin-right: 20px;
  line-height: 26px;
  padding: 0px 0;
}
.compactlisting-ul li i {
  position: relative;
  margin-right: 3px;
  font-size: 18px;
}

.incompletelistview .compactlisting-ul li i {
      font-size: 17px;
  color: #a0a0a0;
}

.mdi {
  font-size: 24px;
  vertical-align: middle;
}

.job-listing-top {
  display: flex;
  align-items: center;
}

.job-listing-top label , .job-listing-top p{
  transition: all 0.5s;
  margin-bottom: 0;
}


.compact-icon {
  margin: 0 15px;
  position: relative;
  top: 3px;
  width: 80px;
  min-width: 80px;
  height: 80px;
  text-align: center;
  display: flex;
  align-items: center;
  background: #88898c1f;
  border-radius: 5px;
  justify-content: center;
  transition: all 0.5s;
  color: #a2a2a2;
  overflow: hidden;
}

.incompletelistview .compact-icon {
  width: 50px;
  min-width: 50px;
  height: 50px;
}

.compact-icon img {
  max-width: 100%;
}

.compact-icon .mdi {
  font-size: 20px;
  vertical-align: middle;
}

.compact-listing-row:hover .compact-icon {
  background: #e9f0f7;
  color: #39558d;
}

.compactlisting-ul label , .compactlisting-ul p{
  margin-bottom: 0;
}


.main--asap h4.compact--name {
  color: #38b653;
}



.compactlisting-ul h4 {
  font-size: 15px;
  line-height: 26px;
  position: relative;
  transition: all 0.5s;
  top: 1px;
}




h4.caselist-number {
    color: #39558d;
    cursor: pointer;
    font-weight: 600;
}

.visited-label {
    background: #38b653;
    line-height: 29px;
    padding: 0 10px;
    border-radius: 0;
    color: #fff;
    position: relative;
    display: flex;
    font-weight: 500;
    letter-spacing: 0.9px;
    height: 28px;
}

.visited-label span {
    position: relative;
    padding: 0 5px;
    background: #0000002e;
    margin-right: 10px;
    margin-left: -10px;
    min-width: 28px;
    text-align: center;
}


.visited-label span i {
    position: relative;
    margin-right: 0;
    font-size: 15px;
}


label.status-label {
    font-weight: 500;
    min-width: 70px;
    text-align: center;
    color: #868888;
    border-radius: 3px;
    padding: 0;
    text-align: center;
}

label.status-label.status-open {
    color: #fff;
    background: #38b653;
}

label.status-label.status-closed {
    color: #fff;
    background: #d93025;
}

label.status-label i {
    margin: 0;
    font-size: 20px;
    display: none;
}


.visited-label.light--label {
    background: #f2f2f2;
    color: #717171;
}

.visited-label.light--label span {
    background: #eaeaea;
}

.visited-label span.mdi {
    font-size: 14px;
}

.compact-listing-bottom ul {
    margin-bottom: 0;
    justify-content: space-between;
}

.compact-listing-bottom span {
    font-weight: 500;
}


.compactlisting-ul small {
    font-size: 93%;
    font-weight: 400;
}

.cursor--pointer {
    cursor: pointer;
}

.full-page-sidebar-inner {
    /*overflow: auto;*/
    height: 100%;
    position: relative;
        background: #f6f6f6;
}

.full-page-sidebar-inner .map-inner-detail {
    background: #f6f6f6 !important;
    border: none;
}

.filter-button-container {
    position: absolute;
    left: 40px;
    top: 20px;
    width: calc(100% - 40px);
    overflow-x: hidden;
    padding: 20px 0;
}

.enable-filters-button {
    position: relative;
    top: 0;
    z-index: 100;
    background-color: #39558d;
    color: #333;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    height: 48px;
    line-height: 48px;
    padding: 0;
    transition: .3s;
    min-width: 126px;
    text-align: center;
    border: none;
    padding-left: 48px;
    overflow: hidden;
    outline: none;
    cursor: pointer;
}

.side-bar-header .enable-filters-button {
    height: 40px;
    width: 40px;
    min-width: 40px;
    padding: 0;
}


.btn-white-default {
    background: #fff;
    box-shadow: 0px 0px 7px -3px #000 !important;
    margin-right: 2px;
    color: dimgrey;
    font-weight: 500;
    outline: none;
}

.filter-change,
.column-toggle {
    position: relative;
    padding-left: 30px;
    width: 80px;
    color: #028940;
}

.column-toggle {
    width: auto;
}

.btn-white-default:hover {
    background: rgba(237, 237, 237, 0.5411764705882353);
}


.filter-change:before,
.column-toggle:before {
    content: "\FB87";
    font: normal normal normal 20px/1 "Material Design Icons";
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    line-height: 33px;
}

.column-toggle:before {
    content: "\f9a5";
}

.filter-change:hover {}

.filter-change.active:before {
    content: "\f236";
}

.btn-white-default .show-text {
    /*display: block;*/
}

a#createauthorization-btn {
    margin-left: 8px;
}

.btn-white-default .hide-text {
    display: none;
}

.btn-white-default.active .show-text {
    display: none;
}

.btn-white-default.active .hide-text {
    display: block;
}



.side-bar-header .block {
    height: 40px;
    width: 40px;
}

.enable-filters-button i {
    position: absolute;
    z-index: 90;
    left: 0;
    height: 100%;
    color: #fff;
    width: 48px;
    background: #0000001c;
}

.enable-filters-button span {
    position: relative;
    padding: 0 15px;
    color: #fff;
    width: 100%;
    z-index: 100;
    border-radius: 0 4px 4px 0;
    transition: .3s;
}

.enable-filters-button.active {
    background: #525151;
}

.enable-filters-button.active .show-text,
.enable-filters-button .hide-text {
    display: none;
}

.enable-filters-button .show-text,
.enable-filters-button.active .hide-text {
    display: inline-block;
}

.filter-button-tooltip {
    position: absolute;
    width: auto;
    left: 15px;
    top: 24px;
    z-index: 100;
    border-radius: 4px;
    width: auto;
    animation: tooltip-bounce 2s infinite;
    margin-left: 15px;
    white-space: nowrap;
    opacity: 0;
    overflow: visible;
    transition: opacity .3s;
    pointer-events: none;
    padding: 0 20px;
    background-color: #fff;
    color: #555;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    font-size: 15.7px;
    line-height: 48px;
    top: 20px;
}

.filter-button-tooltip.tooltip-visible {
    opacity: 1;
}

@keyframes tooltip-bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(0)
    }

    40% {
        transform: translateX(14px)
    }

    60% {
        transform: translateX(7px)
    }
}

.filter-button-tooltip:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: calc(50% - 3px);
    content: "";
    left: -3px;
    box-sizing: border-box;
    border: 5px solid #000;
    border-color: transparent transparent #fff #fff;
    transform-origin: 0 0;
    transform: rotate(45deg) translateY(-50%);
    box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, .04);
}


.export-btn.mdl-button--icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    line-height: 0;
}

.export-btn.mdl-button--icon i {
    font-size: 18px;
    color: #868888;
}

.dropdown-header {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #464646;
    margin-top: -5px;
}

.sidebar--menu ul {
    padding: 0;
    margin: 0;
}

.sidebar--menu {
    /*padding: 15px;*/
    position: relative;
    height: 100%;
    /*overflow: auto;*/
}

.side-bar-header {
    padding: 5px 0;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 15px;
    margin-bottom: 0;
    color: #616161;
}

.sidebar--menu ul li a,
.sidebar--menu ul li a:not([href]):not([tabindex]) {
    color: #565b5f;
    padding: 8px 15px;
    cursor: pointer;
    transition: all 0.3s;
    display: block;
    font-weight: 500;
}

.sidebar--menu ul li a.btn-link.active,
.sidebar--menu ul li a.btn-link:active,
.sidebar--menu ul li a.btn-link:hover,
.sidebar--menu ul .active-acc a.btn-link {
    color: #545454;
    text-decoration: none;
    background-color: rgb(238, 238, 238);
}

.full-page-sidebar.sidebar-navigation {
    width: 100%;
    max-width: 320px;
}

.sidebar--menu ul .sidebar-sub-menu {
    padding-left: 30px;
    border-top: 1px solid #e8e8e8;
}

.sidebar--menu ul .sidebar-sub-menu a:before {
    content: "\F901";
    font: normal normal normal 11px/1 "Material Design Icons";
    margin-right: 5px;
    vertical-align: top;
    top: 5px;
    position: relative;
}


.sidebar--menu ul .sidebar-sub-menu a:hover,
.sidebar--menu ul .sidebar-sub-menu a.active {
    color: #028940;
    text-indent: 2px;
}


.sidebar--menu>ul>li {
    transition: all 0.5s;
    display: inline-block;
    width: 100%;
    box-shadow: 0 1px 0px 0 rgba(199, 197, 197, 0.12);
    border-radius: 5px;
    background: #fff;
    margin: 0;
    border-radius: 0;
    margin-bottom: 1px;
}


.sidebar--menu>ul>li.active-acc {
    /*box-shadow: 0 1px 4px 0 rgba(0,0,0,.12);
  border-radius: 5px;*/
    background: #fff;
    /*transform: scale(1.02);
  margin: 15px 0;*/
}

.main-sidebar--menu .main-sidebar--ul li a i {
    transform: rotate(90deg);
    transition: all 0.5s;
}

.main-sidebar--menu .main-sidebar--ul li a.collapsed i {
    transform: rotate(0deg);
}

.sidebar--menu ul li a i {
    font-size: 19px;
    margin-right: 5px;
    width: 22px;
    display: inline-block;
}


.stickey-title-second h4.main-title {
    text-transform: uppercase;
    font-size: 15px;
    padding: 12px 0;
    margin-bottom: 15px;
    color: #616161;
}


.buttons--column ul {
    padding: 0;
    margin: 0;
    display: flex;
    margin-left: 15px;
}

.buttons--column ul a {
    background: #636363;
    display: block;
    margin-left: 15px;
    padding: 15px 15px;
    min-width: 70px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 9px -3px #000;
    border: 2px solid #717171;
    transition: all 0.5s;
}


.buttons--column ul a svg {
    fill: #f5f5f5;
}

.buttons--column ul a:hover {
    background: #3a3a3a;
    border: 2px solid #6b6a6a;
}

.buttons--column ul p {
    margin: 0;
}

.employeeinfo--popup .modal-dialog {
    max-width: 900px !important;
}


.modal.left.employeeinfo--popup .modal-content,
.modal.right.employeeinfo--popup .modal-content {
    height: calc(100% - 48px);
    overflow-y: auto;
    border-radius: 0;
    top: 0;
}





/*new bg layoput*/

/*.mdl--layout__drawer {
  background: #fff;
}

.demo-drawer .demo-navigation {
  padding: 4px !important;
}
.demo-layout .demo-navigation .mdl-navigation__link {
  margin: 0 0 6px 0 !important;
  border: none !important;
      border-radius: 4px;
      padding: 10px 3px;
}

.demo-layout .demo-navigation .mdl-navigation__link.active, .demo-layout .demo-navigation .mdl-navigation__link:focus, .demo-layout .demo-navigation .mdl-navigation__link:active {
  background-color: #39558d !important;
  }
.demo-layout .demo-navigation .mdl-navigation__link.active svg, .demo-layout .demo-navigation .show .mdl-navigation__link svg {
  fill: #fff !important;
}*/



span.bookmark-icon {
    font-size: 20px;
    z-index: 101;
    cursor: pointer;
    background-color: #5a5a5a;
    color: #e6e0e0;
    display: block;
    height: 39px;
    width: 39px;
    border-radius: 50%;
    transition: all .4s;
    line-height: 27px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
}

.bookmark-icon.bookmarked {
    animation: bookmarked-shadow .3s
}

@keyframes bookmarked-shadow {
    0% {
        box-shadow: 0 0 0 0 rgba(254, 179, 66, .8)
    }

    100% {
        box-shadow: 0 0 0 10px transparent
    }
}

.bookmark-icon:before {
    transition: transform .4s cubic-bezier(.8, -.41, .19, 2.5);
    position: absolute;
    right: 0;
    left: 0;
    text-align: center;
    top: 6px;
    content: "\F4CE";
    font: normal normal normal 24px/1 "Material Design Icons";
}

.bookmark-icon:hover {
    background-color: #333;
    color: #fff
}

.bookmark-icon.bookmarked {
    background-color: #fed500;
    color: #fff
}

.bookmark-icon.bookmarked:before {
    animation: bookmark-icon .5s
}

@keyframes bookmark-icon {
    0% {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }

    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.bookmark-button {
    background-color: #404040;
    display: inline-block;
    padding: 0;
    position: relative;
    height: 44px;
    line-height: 44px;
    color: #fff;
    padding: 0 15px;
    padding-left: 59px;
    border-radius: 4px;
    transition: .4s;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .1)
}

.bookmark-button .bookmark-icon,
.bookmark-button:hover .bookmark-icon {
    background-color: rgba(255, 255, 255, .05)
}

.bookmark-button .bookmark-icon {
    border-radius: 4px;
    position: absolute;
    left: 0;
    right: auto;
    top: auto;
    height: 44px;
    width: 44px;
    border-radius: 4px 0 0 4px;
    pointer-events: none;
    transition: .4s;
    animation: none
}

.bookmark-button .bookmark-icon:before {
    top: 8px;
    color: #fff;
    transition: .4s;
    font-size: 18px
}

.bookmark-button.bookmarked {
    background-color: #feb342;
    color: #fff;
    box-shadow: 0 3px 12px rgba(254, 179, 66, .2)
}

.bookmark-button.bookmarked .bookmark-icon:before,
.bookmark-button:hover .bookmark-icon:before {
    color: #fff
}

.bookmark-button.bookmarked .bookmark-icon,
.bookmark-button.bookmarked:hover .bookmark-icon {
    background-color: rgba(255, 255, 255, .16)
}

.bookmark-button.bookmarked .bookmarked-text,
.bookmark-button .bookmark-text {
    display: block
}

.bookmark-button.bookmarked .bookmark-text,
.bookmark-button .bookmarked-text {
    display: none
}

p.employee-name {
    font-size: 16px;
    font-weight: 500;
    color: #ded8d8;
    margin: 0;
}

span.job-title {
    font-weight: normal;
    color: #d6d6d6;
    font-size: 14px;
    margin-left: 5px;
    margin-right: 15px;
    vertical-align: baseline;
    font-weight: 400;
}

.dropdown,
.dropleft,
.dropright,
.dropup {
    position: relative;
    display: inline-block;
}

.demo-drawer .demo-navigation li .dropdown.dropright {
    width: 100%;
}


.no-border-head thead th {
    border: none !important;
}

.no-border-head .table-responsive {
    /* border: none !important;
  box-shadow: none !important;*/
}


.page-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    transition: all 0.5s;
}


.view-full-list .page-content-header {
    padding: 15px 0;
}

.sort-by .btn-light.dropdown-toggle,
.sort-by .btn-light.active:focus,
.btn-light:active:focus,
.sort-by .show>.btn-light.dropdown-toggle:focus {
    /*border: none !important;
  background: no-repeat !important;
  outline: none !important;
  box-shadow: none !important;*/
}

.page-content-header h4 {
    margin-bottom: 0;
}

.grid-buttons .mdl-button {
    transition: all 0.5s;
    color: #868888;
    width: 40px;
    height: 40px;
}

.grid-buttons .mdl-button .mdi {
    font-size: 20px;
}

.grid-buttons .mdl-button i.svg-icon {
    margin-right: 0;
    width: auto;
    top: -2px;
    position: relative;
}


.grid-buttons .mdl-button.active {
    color: #39558d;

}

.grid-buttons .svg-icon svg,
.grid-buttons .svg-icon svg g {
    fill: #868888;
    width: 25px !important;
}


.grid-buttons .mdl-button.active .svg-icon svg,
.grid-buttons .mdl-button.active .svg-icon svg g {
    fill: #39558d !important;
}


/*grid view*/

.grid--view .compact-listing-main {
    flex-wrap: wrap;
    display: flex;
    margin: 0 -10px;
}

.grid--view .compact-listing-items {
    width: 50%;
}

.grid--view .compact-listing-items {
    width: calc(50% - 20px);
    margin: 0 10px;
    padding: 0 !important;
    margin-bottom: 15px;
}

.grid--view .compact-listing-row {
    flex-flow: column;
    border: none;
    padding: 0 !important;
    position: relative;
}

.grid--view .compact-icon {
    width: 100%;
    height: 200px;
    margin-bottom: 10px;
}

.grid--view .compact-icon img {
    max-width: 100%;
    width: 100%;
    height: auto;
}


.grid--view .compact-listing-bottom .compactlisting-ul li i {
    display: none;
}

.grid--view .compactlisting-ul li:last-child {
    margin: 0;
}

.grid--view .compactlisting-ul li {
    margin-right: 10px;
}

.grid--view .compact-listing-description {
    width: 100%;
    color: #777;
    padding: 15px;
}



.grid--view .compact-listing-description .compact-listing-top {
    position: absolute;
    top: 0;
    padding: 15px;
    right: 0;
    left: 0;
}


.grid--view .compact-listing-description .compact-listing-center {
    margin-top: -71px;
    margin-bottom: 38px;
}

.grid--view .compactlisting-ul h4 {
    color: #fff;
}


.grid--view .compact-listing-bottom ul {
    flex-wrap: wrap;
}

.grid--view .compact-listing-bottom .compactlisting-ul li:first-child {
    width: 100%;
}


.grid--view .compact-icon:before {
    content: "";
    POSITION: ABSOLUTE;
    left: 0;
    right: 0;
    bottom: 0;
    background: #39558d4d;
    top: 0;
}

.grid--view .visited-label.light--label {
    background: transparent;
    color: #fff;
}

.grid--view .visited-label.light--label span {
    background: #49484842;
    border-radius: 4px;
}

.listings-container.compact-list-layout.grid--view {
    padding: 10px 12px;
}


.modal-content {
    background-color: #f6f6f6;
    border: none;
    box-shadow: 1px 2px 14px -2px #000;
}

.popover {
    border: none;
    /* -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.18); */
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.18);
    min-width: 250px;
}

.popover-header {
    padding: 10px 15px;
    background-color:#242a30;
}

.bs-popover-auto[x-placement^=bottom] .arrow::after,
.bs-popover-bottom .arrow::after {
    top: 1px;
    border-bottom-color:#242a30;
}

.bs-popover-auto[x-placement^=bottom] .popover-header::before,
.bs-popover-bottom .popover-header::before {
    border-bottom: none;
}

.jobtitlename {
    font-size: 12px;
}

.jobtitlename b {
    font-weight: 600;
    color: #ffffff;
    font-size: 16px;
}

.jobtitlename span {
    color: #e4e4e4;
    font-weight: normal;
    margin-top: 5px;
    display: inline-block;
}

.jobtitlename p {
    margin-bottom: 0px;
}

.pin-popover i {
    font-size: 16px;
    font-weight: 100;
    background: #eaeaea;
    padding: 5px;
    border-radius: 3px;
    margin-right: 7px;
    color: #807e7e;
}

.pin-popover p {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.pin-popover p:hover a {
    color: #39558d;
}

button,
a {
    outline: none !important;
}



.profile-services-pills {
    margin: 0;
    margin-top: 4px;
}

.profile-services-pills li a {
    padding: 0;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 0;
}


.percent-mark {
    position: absolute;
    right: 0;
    top: 82px;
    font-size: 26px;
    right: 28px;
}

.percent-mark.up i.material-icons {
    color: green;
}

.percent-mark.down i.material-icons {
    color: red;
}


.modal-content.note-popup {
    background: #fff;
}

.note-popup .modal-body {
    padding: 30px;
    position: relative;
    z-index: 10;
    display: inline-block;
    width: 100%;
}

.note-popup .modal-header {
    align-items: center;
    border-radius: 0;
    min-height: 20px;
    padding: 0;
    position: relative;
}


.note-popup .modal-header .close {
    min-width: 50px;
    height: 100%;
    right: 0;
    background: transparent;
}

.note-popup .modal-header .modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    padding: 15px 30px;
    font-weight: normal;
}

.note-popup .modal-footer .mdl-button {
    min-width: 158px;
    margin: 0 10px;
}

.ui-resizable-e {
    cursor: w-resize;
    width: 12px;
    right: -10px;
    top: 0;
    bottom: 0;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    border-left: 2px solid #cacaca;
}


.ui-resizable-e:hover {
    border-color: #39558d;
}


.main--asap .ui-resizable-e:hover {
    border-color: #028940 !important;
}







.ui-resizable-handle.ui-resizable-e:before {
  content: "";
  cursor: -webkit-grab;
  cursor: grab;
  width: 28px;
  right: -4px;
  border-radius: 50% !important;
  top: 10px;
  height: 28px;
  background: white;
  border: 2px solid #cacaca;
  text-align: center;
  padding-top: 3px;
  position: absolute;
  transition: all 0.3s;
  color: white;
  background-image: url(../images/icons/drag.png);
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  top: 17px;
}

.ui-resizable-handle.ui-resizable-e:hover:before {
  background-color: #39558d !important;
  border-color: #39558d;
  background-image: url(../images/icons/drag_white.png);;
}



.view-full-list .ui-resizable-handle.ui-resizable-e {
    display: none !important;
}


.ui-resizable-e .resizable-btn:focus,
.ui-resizable-e .resizable-btn:active {
    cursor: grabbing !important;
}

.bootstrap-select>.dropdown-toggle {
    border-radius: 0 !important;
    border: 1px solid #ececec !important;
}







/*block btn*/

.block {
    height: 45px;
    width: 45px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    transition: all 1s ease;
    background-image: linear-gradient(90deg, #209656, #016931);
    box-shadow: 0 2px 18px 0 rgba(2, 137, 64, 0.12), 0 1px 2px 0 rgba(150, 150, 150, 0.33);
    border: none;
}

.cta {
    height: 40px;
    width: 40px;
    cursor: pointer;
}

.map-inner-detail .toggle-btn {
    height: 2px;
    width: 25px;
    background-color: #fff;
    position: relative;
    top: 50%;
    left: 0;
    margin: auto;
    transition: all 0.3s ease-in-out;
}

.map-inner-detail .toggle-btn:before {
    content: "";
    height: 2px;
    width: 25px;
    box-shadow: 0 -10px 0 0 #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease-in-out;
}

.map-inner-detail .toggle-btn:after {
    content: "";
    height: 2px;
    width: 25px;
    box-shadow: 0 10px 0 0 #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease-in-out;
}

.map-inner-detail .type17:before {
    width: 12px;
}

.map-inner-detail .type17:after {
    width: 12px;
    box-shadow: 13px 10px 0 0 #fff;
}

.map-inner-detail .active .type17 {
    transform: rotate(45deg);
    background-color: #fff;
    transition: all 0.6s ease-in-out;
}

.map-inner-detail .active .type17:before {
    transform: translate(-4px, -6px) rotate(90deg);
}

.map-inner-detail .active .type17:after {
    transform: translate(16px, -7px) rotate(90deg);
}







@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.caselist-table .mdl-checkbox.is-upgraded {
    padding-left: 0;
    margin: 0 10px;
}

tr.checkbox_checked_row {
    background: rgba(0, 0, 0, 0.07);
}




/*authorization*/


.authorization-selection-main {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.autho-radio .mdl-radio.is-upgraded {
    padding-left: 24px;
    display: inline-block;
    width: auto;
    margin-right: 15px;
    font-size: 14px;
}



.authorization-selection-main .bootstrap-select>.dropdown-toggle {
    position: relative;
    width: 100%;
    z-index: 1;
    text-align: right;
    white-space: nowrap !important;
    width: 100% !important;
    border: 2px solid #c9c9c9 !important;
    margin-top: 0px;
    outline: none;
    font-weight: 500;
    color: #656363;
    background-color: #fff;
    border-radius: 4px !important;
    font-size: 14px !important;
    height: 40px !important;
    line-height: 26px !important;
}



.dataTables_wrapper .bottom {
    display: flex;
    justify-content: space-between;
    /*padding:10px 15px;*/
}

.dataTables_wrapper .top {
    display: none;
}

table.dataTable {
    clear: both;
    margin-top: 0px !important;
    white-space: nowrap;
}


table.dataTable label.label.label-primary {
    color: #797878;
    font-size: 12px;
    margin-bottom: 0;
    font-weight: 500;
}

table.dataTable label.label.label-primary:after {
    content: ",";
}

table.dataTable td.text-center p {
    text-align: left !important;
    font-weight: bold !important;
}

table.dataTable p {
    margin: 5px;
}


.random-selection-main table.dataTable td,
.random-selection-main table.dataTable th {
    padding-left: 5px;
}


.random-selection-main .full-page-content-inner {
    /*padding: 0;*/
}

.random-selection-main .stickey-title-second {
    /*padding: 0px 15px;*/
}

.map-inner-detail {
    border: none;
}


.filter-button-container.infilter-menu {
    position: relative;
    left: initial;
    top: unset;
    width: auto;
    padding: 0;
    margin-bottom: 15px;
}

.filter-button-container.infilter-menu .block {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: auto;
    background: #028940;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}




.filter-button-container.infilter-menu .enable-filters-button {
    background-color: #028940;
}

.filter-button-container.infilter-menu .active.enable-filters-button {
    background-color: #616161;
}

.filter-button-container.infilter-menu .active .block {
    background: #3e3c3c;

}

.form-group.text-center.bottom-stickey-btn {
    position: sticky;
    bottom: -15px;
    background: white;
    z-index: 99;
    padding: 15px;
}



.commingsooonbox {
    margin: auto;
}

.commingsooonbox img {
    max-width: 650px;
}

.bx--content-switcher-btn {
    font-size: 15px;
    padding: 24px;
    height: unset;
    line-height: 0;
    text-decoration: none !important;
}

.bx--content-switcher {
    height: auto;
}

.authofooter {
    position: sticky;
    bottom: 0;
    padding: 15px;
    background: #e6e6e6;
    text-align: right;
    z-index: 9;
}

.review-table h4.subtitle-caselist {
    margin: 0;
    margin-bottom: 15px;
}



table.DTFC_Cloned tr td:before {
    border: none !important;
    background: no-repeat !important;
}

table.DTFC_Cloned tr {
    background-color: white;
    margin-bottom: 0;
}

.dataTables_scrollBody .ps__rail-x,
.dataTables_scrollBody .ps__rail-y {
    /*background: rgb(255, 255, 255) !important;*/
    opacity: 1 !important;
}


.divider {
    width: 100%;
    margin: 15px 20px;
    background: #999b9b5e;
    height: 1px;
}

.dropdown-item {
    position: relative;
}

span.text-alcohol {
    color: #489db8;
}

span.text-drug {
    color: #4da018;
}

button.edit-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    box-shadow: none;
    padding-left: 50px;
}

button.edit-btn span.mdi {
    position: absolute;
    left: 0;
    width: 40px;
    background: #162023;
}

.enable-edit-form .info-div {
    width: 100%;
    position: relative;
}


.enable-edit-form .info-div .form-control {
    /*box-shadow: none !important;
    min-height: 50px;*/
}

.enable-edit-form .info-div .info-label {
   /* font-size: 12px;
    margin: 0;
    font-weight: 400;
    position: absolute;
    top: -9px;
    left: 12px;
    background: white;
    padding: 0 5px;*/
}

.enable-edit-form .info-div p.info-result {
    /*display: none;*/
}

.editable-div {
    display: none;
}

.enable-edit-form .editable-div {
    display: block;
}




/* TOGGLE STYLING */
.toggle {
    margin: 0 0 15px 0;
    box-sizing: border-box;
    font-size: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.toggle input {
    width: 0;
    height: 0;
    position: absolute;
    left: -9999px;
}

.toggle input+label {
    margin: 0;
    padding: .75rem 2rem;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    border: solid 1px #DDD;
    background-color: #FFF;
    font-size: 14px;
    line-height: 140%;
    /* font-weight: 600; */
    text-align: center;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    transition: border-color .15s ease-out, color .25s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
    text-transform: uppercase;
    cursor: pointer;
}

.toggle input+label:first-of-type {
    border-radius: 6px 0 0 6px;
    border-right: none;
    color: #028940;
}

.toggle input+label:last-of-type {
    border-radius: 0 6px 6px 0;
    border-left: none;
    color: #4b9dea;
}

.toggle input+label {
    color: #f4942d;
}

.toggle input:checked+label {
    background-color: #4B9DEA;
    color: #FFF;
    box-shadow: 0 0 10px rgba(75, 157, 234, 0.58);
    border-color: #4B9DEA;
    z-index: 1;
}

.toggle input:checked+label.eccf-label {
    background-color: #f4942d;
    color: #FFF;
    box-shadow: 0 0 10px rgba(244, 148, 45, 0.61);
    border-color: #f4942d;
    z-index: 1;
}

.toggle input:checked+label.Preferred-label {
    background-color: #028940;
    color: #FFF;
    box-shadow: 0 0 10px rgba(2, 137, 64, 0.65);
    border-color: #028940;
    z-index: 1;
}


/*.toggle input:focus + label {
outline: dotted 1px #CCC;
outline-offset: .45rem;
}*/
@media (max-width: 800px) {
    .toggle input+label {
        padding: .75rem .25rem;
        flex: 0 0 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* STYLING FOR THE STATUS HELPER TEXT FOR THE DEMO */
.status {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
}

.status span {
    font-weight: 600;
    color: #B6985A;
}

.status span:first-of-type {
    display: inline;
}

.status span:last-of-type {
    display: none;
}

@media (max-width: 800px) {
    .status span:first-of-type {
        display: none;
    }

    .status span:last-of-type {
        display: inline;
    }
}




.searchbar-map {
    position: absolute;
    left: 15px;
    right: 60px;
    background: white;
    top: 11px;
    z-index: 1;
    border: none;
    box-shadow: 1px 1px 10px -3px #888;
    border-radius: 0;
    border-radius: 4px;

}

.searchbar-map input {
    box-shadow: none !important;
    outline: none;
    border: none;
    border-radius: 5px;
}

.searchbar-map .input-group {
    height: 40px;
}

.searchbar-map .btn {
    padding: 0 10px;
    border: none;
}

h4.noborder-title {
    text-transform: uppercase;
    font-size: 15px;
    padding: 5px 0;
    margin-bottom: 15px;
    color: #616161;
}


.test-edit-details p {
    margin: 0;
}

.test-edit-details p.nameid {
    font-size: 16px;

}

.company-name-location {
    display: flex;
}

.company-name-location p {
    margin-right: 8px;
}

.test-edit-details .mdi {
    font-size: 18px;
    margin-right: 4px;
    color: #fff;
}

p.Scheduled-date strong {
    color: #fff;
    margin-right: 4px;
    font-weight: 400;
}


.edit-test-modal .card {
    overflow: visible;
}

.edit-test-modal .closed-acc .card-header {
    box-shadow: none !important;
}


.main--asap .grid-buttons .mdl-button.active .svg-icon svg,
.main--asap .grid-buttons .mdl-button.active .svg-icon svg g {
    fill: #028940 !important;
}

.main--asap .grid-buttons .mdl-button.active {
    color: #028940;
}

p.sampletype {
    font-weight: 500;
}

span.sampletag {
    background: #489db8;
    padding: 4px 5px;
    margin-right: 4px;
    border-radius: 4px;
    font-weight: 400;
    color: #fff;
    font-size: 12px;
}

.incompletesample span.sampletag {
    background: transparent;
    color: #616060;
    font-size: 14px;
    font-weight: 500;
}









.hide-filter-option.full-page-container .full-page-sidebar {
    min-width: 0;
    max-width: 20px;
    overflow: visible;
    margin-right: 0;
    background: #ffffff;
}

.hide-filter-option.full-page-container.with-sidebar .full-page-sidebar {
    /*max-width: 0;*/
}

.hide-map-option.full-page-container .full-page-content-container {
    width: 100%;
    max-width: 100%;
    padding-right: 24px;
}

.hide-map-option.full-page-container .full-page-map-container {
    max-width: 0;
    width: 0;
}


.hide-list-option.full-page-container .full-page-content-container {
    max-width: 0;
    width: 0;
    opacity: 0;
    visibility: hidden;
}

.hide-filter-option.hide-list-option.full-page-container .full-page-sidebar .size-controller-box {
    opacity: 1 !important;
    visibility: visible !important;
    background: #39558d !important;
}

.hide-list-option.full-page-container.with-map .full-page-map-container {
    width: 100%;
    max-width: 100%;
}


.hide-filter-option.full-page-container .full-page-sidebar * {
    display: none;
}

.size-controller-box,
.size-controller-box * {
    display: inline-block !important;
}




.size-controller-box {
    position: absolute;
    width: 5px;
    top: 0;
    bottom: 0;
    z-index: 999;
    transition: all 0.3s;
    border-left: 2px solid #cacaca;
    margin-right: -4px;
}


.size-controller-box .btn {
    width: 25px;
    background: #fff;
    border-radius: 50%;
    height: 25px;
    line-height: 25px;
    margin-left: -13px;
    box-shadow: none;
    margin-top: 17px;
    padding: 0;
    text-align: center;
    transition: all 0.5s;
    line-height: 0;
    border: 2px solid #cacaca;
    color: #6b6969;
}

.size-controller-box .btn .mdi {
    font-size: 21px;
    vertical-align: middle;
}


.full-page-sidebar .size-controller-box {
    right: 0px;
    left: initial;
}


.size-controller-box:hover {
    border-left: 2px solid #39558d;
}

.size-controller-box:hover .btn {
    background: #39558d;
    color: #fff;
    border: 2px solid #39558d;

}


.main--asap .size-controller-box:hover {
    border-left: 2px solid #028940 !important;
}

.main--asap .size-controller-box:hover .btn {
    background: #028940 !important;
    color: #fff;
    border: 2px solid #028940 !important;

}


.hide-filter-option .full-page-sidebar .size-controller-box .btn {
    transform: rotate(180deg) !important;

}


.hide-filter-option .full-page-sidebar .size-controller-box .btn .mdi:before {
    /*  content: "\f35c";
  font-size: 17px;*/
}


.full-page-container.with-map.size-controller.hide-map-option .size-controller-box.size-controller-right {
    right: 15px;
}

/*.full-width-controllar {
  position: absolute;
  right: 15px;
  z-index: 99;
  top: 10px;
  margin: 0;
}
*/

.view-full-list .full-page-container .full-page-content-container {
    width: 100% !important;
    padding: 0;
}

.view-full-list .full-page-container .full-page-map-container {
    min-width: 0;
    width: 0;
}

.view-full-map .full-page-content-container {
    width: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

.view-full-map .full-page-map-container {
    width: 100% !IMPORTANT;
}

.full-page-inner-stickey-header {
    position: relative;
    top: 0;
    z-index: 9;
    background: #fff;
    margin: 0 0px;
}



.map-controls label.switch {
    font-weight: 500;
}


.map-controls label.switch .mdi {
    font-size: 18px;
    margin-right: 4px;
}







.sidebar-megamenu .sidebar--menu.submenu-services {
    position: fixed;
    left: 55px;
    bottom: 0;
    overflow: auto !important;
    width: 290px;
    padding: 15px 10px;
    background: #f6f6f6;
    visibility: hidden;
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.3s;
}

.sidebar-megamenu:hover .sidebar--menu.submenu-services {
    visibility: visible;
    opacity: 1;
    transform: translateY(0px);
}



.caselist-main-box.detail-card {
    /*padding: 0 15px;*/
}

.main--sidemenu-box .map-inner-detail.main--filter-box {
    padding: 0;
}


.full-page-container .main--sidemenu-box .side-bar-header {
    margin: 0 15px;
    margin-bottom: 13px;
}

.full-page-container .main--sidemenu-box {
    min-width: 250px;
    max-width: 250px;
}


.full-page-container .main--filternew-box {
    min-width: 270px;
    max-width: 270px;
}


.full-page-navigation.main--sidemenu-box {
    flex: 0 0 250px;
    background-color: #fff;
    position: relative;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
    z-index: 100;
    min-width: 260px;
    max-width: 260px;
}

.full-page-container .main--filter-box .mdl-button {
    transition: all 0.5s;
    padding: 0 0px;
    font-size: 12px;
    left: 8px;
    right: inherit;
}

.full-page-navigation-inner {
    height: 100%;
}



@-webkit-keyframes dropfade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes dropfade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes dropfade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes dropfade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.bootstrap-select .dropdown-menu.inner {
    -webkit-animation: dropfade 0.5s;
    /* Safari 4+ */
    -moz-animation: dropfade 0.5s;
    /* Fx 5+ */
    -o-animation: dropfade 0.5s;
    /* Opera 12+ */
    animation: dropfade 0.5s;
    /* IE 10+, Fx 29+ */

}




.main-sidebar--menu ul {
    list-style: none;
    padding: 0;
}

.main-sidebar--menu .main-sidebar--ul>li:hover>a {
    background: #ededed;
}

.main-sidebar--menu .main-sidebar--ul>li>a.active {
    background: #ededed;
    color: #000;
}

.main-sidebar--menu .main-sidebar--ul>li>a {
    color: #565b5f;
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.3s;
    display: block;
    font-weight: 500;
}

.main-sidebar--menu .main--submenu>li>a {
    color: #898989;
    padding: 3px 10px;
    cursor: pointer;
    transition: all 0.3s;
    display: block;
    font-weight: 400;
    border-left: 1px solid transparent;
}

.main-sidebar--menu .main--submenu>li>a:hover {
    color: #028940;
}

.main-sidebar--menu .main-sidebar--ul li a i {
    font-size: 16px;
    margin-right: -1px;
    display: inline-block;
    vertical-align: bottom;
}

ul.main--submenu {
    padding-left: 16px;
}

.main--filter-box {
    position: relative;
    padding: 0 5px;
}


.bx--form-item {
    padding: 0 10px;
}


.view-full-list .grid--view .compact-listing-items {
    width: calc(33.3% - 20px);
}





/*work space */

.workspace--row {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-top: 1px solid #edeef0;
    transition: all 0.3s;
        cursor: pointer;
}

.workspace--cards {
    /*margin-bottom: 15px;*/
}

.workspace--row:hover {
    background: rgb(249, 249, 249);
}

.view-on-hover {
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
    border-left: 1px solid darkgrey;
    display: none;
}

.workspace--row:hover .view-on-hover {
    visibility: visible;
    opacity: 1;
}


.workspace--main {
    padding: 0 10px;
    width: 100%;
}


.workspace-main-title.workspace-title {
    font-size: 16px;
     margin-bottom: -10px;
    padding: 10px;
    background:#242a30;
    color: #fff;
    font-weight: 400;
    display: flex;
    align-items: center;
    border-radius: 0;
}

.workspace-main-title.workspace-title .last-login {
    font-size: 12px;
    opacity: 0.7;
    margin-left: auto;
}


 .workspace-title {
    font-size: 14px;
    margin-bottom: 0;
    padding: 10px 15px;
    font-weight: 500;
}

.work-space-detail {
    /*min-width: 250px;
  margin-right: 15px;*/
}

.w-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e6e6e6;
    margin-right: 15px;
    color: #949494;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
        padding: 0 2px;
    font-size: 13px;
    font-weight: 500;
}



.w-icon img {
    max-width: 100%;
    border-radius: 50%;
}

.w-icon.blue-bg {
    background: #39558d;
    color: #fff;
}

.w-icon.green-bg {
    background: #028940;
    color: #fff;
}

.w-icon.red-bg {
    background: #b00e23;
    color: #fff;
}

.w-icon.cos-icon {
    background: #233353;
    color: #fff;
}

.w-icon.asap-icon {
    background: #5f81bc;
    color: #fff;
}

.w-icon.osca-icon {
    background: #af332d;
    color: #fff;
}



.outlined-icons .w-icon.cos-icon {
    background: #fff;
    color: #233353;
    border:1px solid;
}

.outlined-icons .w-icon.asap-icon {
    background: #fff;
    color: #5f81bc;
    border:1px solid;
}

.outlined-icons .w-icon.osca-icon {
    background: #fff;
    color: #af332d;
    border:1px solid;
}


.outlined-icons .workspace--row:hover .w-icon.cos-icon {
    background: #233353;
    color: #fff;
    border:1px solid #233353;
}

.outlined-icons .workspace--row:hover .w-icon.asap-icon {
    background: #5f81bc;
    color: #fff;
    border:1px solid #5f81bc;
}

.outlined-icons .workspace--row:hover .w-icon.osca-icon {
    background: #af332d;
    color: #fff;
    border:1px solid #af332d;
}


.work-space-column h4 {
    font-size: 14px;
    font-weight: 400;
    color: #000;
}

p.scheduled-time {
    margin: 3px 0 0 0;
    font-size: 12px;
    color: #898989;
    line-height: normal;
}

ul.workspace-pills,
.message-details {
    padding: 0 15px;
    margin: 0;
    display: flex;
}

.message-details {
    color: #898989;
}

ul.workspace-pills li a {
    outline: none;
    padding: 5px 10px;
    box-shadow: 0 0px 1px -2px rgba(0, 0, 0, .2), 0 0px 4px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    color: #787878;
    font-weight: 400;
    border-radius: 20px;
    background: rgba(234, 234, 234, 0.6784313725490196);
    display: flex;
    line-height: 16px;
    margin-right: 10px;
    align-items: center;
    font-size: 13px;
}

.message-details span:before,
.message-details span:after {
    content: "";
    width: 30px;
    display: inline-block;
    height: 24px;
    vertical-align: middle;
    background-image: url(../images/icons/commaleft.png);
    background-size: 24px;
    background-repeat: no-repeat;
    margin-right: 0px;
}

.message-details span:after {
    background-image: url(../images/icons/commaright.png);
    position: absolute;
}


table p {
    margin-bottom: 0;
}


table .employee-info {
    text-align: left;
}

table .employee-info .employee--name {
    display: block;
}

table .employee-info .hsi-label.randomnoshow {
    background: transparent;
    margin: 0;
    font-size: 12px;
    top: 0;
    line-height: 18px;
    color: #f97b7b;
    padding: 0;
    font-weight: 500;
}

table .employee-info .mdi,
p.work-location-p .mdi {
    font-size: 15px;
}

p.work-location-p {
    white-space: normal;
    /* max-width: 200px; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    /* font-size: 14px; */
    /* color: rgb(111, 111, 111); */
}



.hide-filter-option p.work-location-p {
    white-space: normal;
    max-width: unset;
}

label.hsi-label.randomnoshow {
    background: #f97b7b;
}


.Specimen-fields {
    display: flex;
}

th .Specimen-fields p {
    width: 50%;
}


th .Specimen-fields {
    display: none;
}

.Specimen-fields strong {
    font-weight: 600;
}


.Specimen-fields span {
    display: block;
    white-space: nowrap;
    padding: 5px;
    background: #489db8;
    border-radius: 5px;
    margin-top: 4px;
    font-size: 11px;
    color: #fff;
    margin-right: 5px;
}

span.head {
    background: transparent;
    font-size: 12px;
    top: 0;
    line-height: 20px;
    color: #000;
    margin-top: 0;
}


table.table--default.random-selection-table td {
    padding: 10px 5px;
}


.random-selection-table .mdl-checkbox.is-upgraded {
    padding-left: 0;
    margin: 0 10px;
    margin-right: 18px;
}


p.regulation-pool {
    font-size: 12px;
    font-weight: 500;
}

p.regulation-pool span {
    display: block;
    font-weight: normal;
    line-height: normal;
}



.table .checkbox_checked_row td:before {
    background: #616161;
}

p.starttimedeadline {
    font-weight: 500;
    color: rgb(111, 111, 111);
}

.test-status {
    font-size: 12px;
}

.random-selection-table p {
    line-height: normal;
}





/*/// filter*/


.filter-main-box {
    display: flex;
    padding: 0 10px;
    margin: 0;
    border-left: 2px solid #006b31;
    margin-left: 14px;
}

.filter-main-box .form-group {
    margin: 0 8px;
}


.main-filter {
    padding-top: 0;
    align-items: center;
    display: flex;
    width: 100%;
}



.more-filter .mdi {
    font-size: 18px;
    line-height: normal;
    margin-right: 4px;
}

.filter--popup .opensidebarmenu .sidebar--panel {
    margin-left: 0;
    background: #fafafa;
}



.viewmap--label.ml-auto {
    width: 126px;
    color: #f8f9fa;
}

span.view-map-label {
    margin-right: 10px;
}

.viewmap--label .mdl-switch.is-upgraded {
    padding-left: 0;
    width: auto;
    white-space: nowrap;
    padding-right: 28px;
}

.viewmap--label .mdl-switch.is-checked .mdl-switch__track {
    background: rgb(0, 111, 51);
}

.viewmap--label .mdl-switch.is-checked .mdl-switch__thumb {
    background: rgb(255, 255, 255);
}



.dataTables_scrollHeadInner {
    min-width: 100%;
}


.dataTables_scrollHeadInner .table {
    min-width: 100%;
}

div.dataTables_scrollBody table {
    min-width: 100%;
    max-width: 100% !important;
}



.main--filter-box .mdl-tabs__panel {
    max-height: 100%;
    overflow: auto;
    max-height: calc(100vh - 210px);
    padding: 0 10px;
    margin: 0 -5px;
}

.no-icon-detail .info-icon,
.main-details-model-cards .info-icon {
    display: none;
}

.locationdetaillist .info-row .info-icon {
    display: block;
}

.perfactscrollbar {
    position: relative;
}


.ps:hover>.ps__rail-x,
.ps:hover>.ps__rail-y,
.ps--focus>.ps__rail-x,
.ps--focus>.ps__rail-y,
.ps--scrolling-x>.ps__rail-x,
.ps--scrolling-y>.ps__rail-y {
    opacity: 0.6;
    z-index: 9;
}

/*workspace calendar*/

.workspace-calendar-row {
    display: flex;
    width: 100%;
}

.calendar-left-menu {
    min-width: 230px;
    margin-right: 20px;
}




.widget {
    background: #fff;
    border-radius: 0;
    border: none;
    margin-bottom: 30px;
}

.has-shadow {
    box-shadow: 0 1px 15px 1px rgba(52, 40, 104, .08);
}

.widget-header {
    background: #fff;
    padding: .85rem 1.4rem;
    position: relative;
    width: 100%;
}

.widget-header.bordered {
    border-bottom: .07rem solid #eee;
}

.widget-header.no-actions {
    padding: 1.49rem;
}

.widget-body {
    padding: 1rem 1.4rem;
}

#external-events .fc-event {
    margin: 1em 0;
    cursor: grab;
    overflow: hidden;
    border: none;
    border-left: 2px solid #39558d;
    border-radius: 0;
}

.fc-event,
.fc-event:hover {
    color: #fff;
    text-decoration: none;
}

.fc-event {
    position: relative;
    display: block;
    font-size: .85rem;
    line-height: 1.3;
    border-radius: 3px;
    border: 1px solid #eee;
    box-shadow: 0 1px 15px 1px rgba(0, 0, 0, .05);
}

.fc-bg-default {
    border-left-color: #2c304d !important;
}

.fc-event .fc-content {
    color: #2c304d;
    position: relative;
    z-index: 2;
    padding: .5rem;
}

.fc-bg-default .fc-title,
.fc-bg-default .fc-time {
    color: #2c304d !important;
}

.fc-event .fc-title {
    font-weight: 600;
}


.fc-bg-default,
.fc-bg-violet,
.fc-bg-orange,
.fc-bg-blue,
.fc-bg-green {
    background-color: #fff !important;
    position: relative;
}

.full-page-calendar {
    background: #ffffff;
    padding: 0 15px;
    justify-content: space-between;
}


.calendar-main--section .full-page-content-container {
    max-width: 420px;
    width: 100%;
}




.fc-event,
.fc-event-dot {
    background-color: #39558d;
    color: #fff !important;
}


table .fc-event-container .fc-content {
    color: #ffffff;
}


.fc-state-default {
    background-color: #ffffff;
    border-color: #e2e2e2;
    color: #2c304d;
    background-image: none;
    box-shadow: none;
    border-right: 0;
}

.fc-state-down,
.fc-state-active {
    background-color: rgb(57, 85, 141);
    border-color: rgb(57, 85, 141);
    background-image: none;
    color: #fff;
    box-shadow: none;
}

.fc-state-hover,
.fc-state-down,
.fc-state-active,
.fc-state-disabled {
    color: #2c304d;
    background-color: #e4e8f0;
    box-shadow: none;
}

.fc button {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    height: 2.75rem;
    padding: 8px 15px;
    font-size: 1rem;
    font-weight: 400 !important;
    white-space: nowrap;
    cursor: pointer;
}

.fc-state-default.fc-corner-left {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.fc .fc-button-group>* {
    float: left;
    margin: 0 0 0 -1px;
}

.fc-toolbar .fc-state-active,
.fc-toolbar .ui-state-active {
    z-index: 4;
}

.fc .fc-button-group>:first-child {
    margin-left: 0;
}

.fc button:focus {
    color: #2d2d2d;
    background-color: rgb(218, 223, 234);
    border-color: rgb(218, 223, 234);
}

.fc-state-default.fc-corner-right {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.fc-state-down,
.fc-state-active {
    background-color: rgb(246, 246, 246);
    border-color: rgb(226, 226, 226);
    background-image: none;
    color: #000;
    box-shadow: none;
}

button.fc-month-button.fc-button.fc-state-default {
    border-right: 1px solid #e2e2e2;
}

button.fc-prev-button.fc-button.fc-state-default,
button.fc-next-button.fc-button.fc-state-default {
    border: 1px solid #e2e2e2 !important;
}

button.fc-prev-button.fc-button.fc-state-default {
    margin-left: 10px;
}

button.fc-next-button.fc-button.fc-state-default {
    margin-right: 10px;
    border-left: none !important;
}





.fc .fc-row .fc-content-skeleton table,
.fc .fc-row .fc-content-skeleton td,
.fc .fc-row .fc-helper-skeleton td {
    background: none;
    border-color: transparent;
    padding: .5rem .5rem;
}

.fc-unthemed th.fc-day-header {
    color: #2c304d;
    padding: .75rem .5rem;
    font-size: 1rem;
    font-weight: 500;
}

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
    float: right;
    color: rgb(98, 101, 107);
}

.fc-center h2 {
    font-size: 20px;
    line-height: 32px;
    color: #333;
    font-weight: 400;
}


/*random page css*/

.main--bar-btn svg {
    fill: #8b8d8d !important;
}



.filtertags {
    display: flex;
    width: 100%;
    align-items: center;
}

.mdl--layout__drawer {
    width: 50px;
    margin-top: 50px;
}


.filter-main-box {
    display: flex;
    padding: 0;
    margin: 0;
    border-left: 0px solid #006b31;
    margin-left: 14px;
    align-items: center;
    margin: 0;
}


.searchbox-li {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    transition: all 0.5s;
    top: 6px;
    z-index: 1;
    max-width: 655px;
    margin: auto !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    transform: translate(20px);
}

.open-search-box .searchbox-li {
    transform: translate(0);
}

.main-search-input:hover,
.main-search-input:focus {
    /*box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
  border-color: rgba(223,225,229,0);*/
}


.active-search-list .main-search-input {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-color: rgba(223, 225, 229, 0);
    outline: none !important;
    box-shadow: none !important;
}


.active-search-list .main-search-list {
    max-height: 280px;
}

.active-search-list .searchbox-li:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 5px;
    margin-top: 0px;
    background: #ffffff;
    z-index: 11;
    left: 1px;
    right: 1px;
    border-left: 20px solid white;
    border-right: 20px solid white;
    bottom: 0px;
}







.mdl-toggle-btn {
    margin-left: 8px;
    color: #028940;
}

.mdl-toggle-btn .mdi {
    font-size: 20px;
}

.mdl-button--icon .mdl-button__ripple-container {
    border-radius: 0;
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}



.toggle-btn-icon {
    display: block;
    position: absolute;
    top: 17px;
    height: 2px;
    min-height: 2px;
    width: 90%;
    border-radius: 2px;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    background: #959595;
    right: 0;
}

.toggle-btn-icon:before {
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    left: auto;
    right: 0px;
    position: absolute;
    display: block;
    width: 70%;
    height: 2px;
    min-height: 2px;
    content: "";
    border-radius: 2px;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    top: -7px;
    background: #959595;
}

.toggle-btn-icon:after {
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    left: auto;
    right: 0px;
    width: 75%;
    position: absolute;
    display: block;
    right: 0;
    height: 2px;
    min-height: 2px;
    content: "";
    border-radius: 2px;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    top: 7px;
    background: #959595;
}


.main--bar-btn:hover .toggle-btn-icon,
.main--bar-btn:hover .toggle-btn-icon:before,
.main--bar-btn:hover .toggle-btn-icon:after {
    width: 100%;
    background: #39558d;
}

.main--asap .main--bar-btn:hover .toggle-btn-icon,
.main--asap .main--bar-btn:hover .toggle-btn-icon:before,
.main--asap .main--bar-btn:hover .toggle-btn-icon:after {
    background: #028940;
}

.main--osca .main--bar-btn:hover .toggle-btn-icon,
.main--osca .main--bar-btn:hover .toggle-btn-icon:before,
.main--osca .main--bar-btn:hover .toggle-btn-icon:after {
    background: #b00e23;
}


.open-small--menu .toggle-btn-icon,
.open-small--menu .toggle-btn-icon:before,
.open-small--menu .toggle-btn-icon:after {
    left: 0;
    right: inherit;
}


span.main-budge.notification-budge {
    font-size: 10px;
    position: absolute;
    background: #39558d;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    line-height: 17px;
    color: #fff;
    right: 7px;
    top: 8px;
}

.main--asap span.main-budge.notification-budge {
    background: #028940;
}

.main--osca span.main-budge.notification-budge {
    background: #b00e23;
}

.indent-columns .info-row {
    padding-left: 3rem;
}

.ui-dialog .ui-dialog-titlebar {
    background: #2d323e;
    border-radius: 0;
    padding: 16px 10px;
}

#suiteDialog td, #suiteDialog th {
    padding: 10px 8px;
}

 .ui-resizable-handle.ui-resizable-e:before {
    display:none;
}

.ui-widget.ui-widget-content {
    padding: 0;
    border: 1px solid #c3c2c2;
}

.ui-widget-header .ui-icon.ui-icon-closethick {
    background: rgb(255, 255, 255);
    width: 25px;
    height: 25px;
    right: 10px !important;
    left: inherit;
    top: 6px;
    border-radius: 50%;
    text-align: center;
}


    .ui-widget-header .ui-icon.ui-icon-closethick:before {
        content: "X";
        color: #5c3a3a;
        position: absolute;
        left: 0px;
        height: 24px;
        width: 100%;
        top: 4px;
        text-indent: 0;
        font-weight: bold;
    }

.ui-button:hover, .ui-button:focus {
    border: initial;
    background: initial;
    font-weight: bold;
    color: #1d5987;
}

/*calendar css*/
.ui-widget-content {
    /*width: 100%;
    border: none !important;
    background: #fff !important;
    box-shadow: none !important;*/
}

.workspace-calendar-custom {
    width: 100%;
    font-family: 'Roboto', 'Helvetica', sans-serif;
    max-width: 400px;
}


.ui-datepicker td span,
.ui-datepicker td a {
    text-align: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    line-height: 26px;
    color: #898989 !important;
    font-family: 'Roboto', 'Helvetica', sans-serif;
    font-weight: 400;
    transition: all 0.5s;
}

.ui-datepicker td span:hover,
.ui-datepicker td a:hover {
    background: #cccccc7a;
    color: #868888 !important;
}







.ui-datepicker td span.ui-state-active,
.ui-datepicker td a.ui-state-active {
    background: #39558d24 !important;
    color: #39558d !important;
}



.ui-datepicker .ui-datepicker-header {
    position: absolute;
    top: 0;
    background: #ffffff;
    border: none;
    left: 0;
    right: 0;
    height: 46px;
    display: flex;
    align-items: center;
    border-radius: 0;
    padding-left: 12px;
}

body .ui-datepicker .ui-datepicker-today span,
.ui-datepicker .ui-datepicker-today a,
.ui-datepicker td.ui-datepicker-today a.ui-state-active {
    background: #39558d !important;
    color: #fff !important;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: none;
}


.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    background: #f6f6f6;
    margin-top: 8px !important;
    margin-left: 8px;
    border: none !important;
    color: black;
    cursor: pointer;
    border: 1px solid #e2e2e2 !IMPORTANT;
    border-radius: 0 !important;
    text-align: center;
    top: 0 !important;
}

.ui-datepicker .ui-datepicker-next {
    margin-left: 0;
    margin-right: 8px;
}

a.ui-datepicker-prev.ui-corner-all:before {
    content: "\F141";
    font: normal normal normal 24px/26px "Material Design Icons";
    color: #999;
    margin-left: 0;
}

a.ui-datepicker-next.ui-corner-all:before {
    content: "\F142";
    font: normal normal normal 24px/1 "Material Design Icons";
    color: #999;
    margin-left: 2px;
}


.calendar-event-title {
    margin-bottom: 15px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 45%;
    background: #ffffff;
    border: none;
    padding: 5px;
    color: #616161;
    cursor: pointer;
    outline: none;
    width: 67px;
    -webkit-appearance: none;
    padding: 0 8px;
    text-align: center;
    -webkit-appearance: none;
    /* box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, .07); */
    background-image: url(../images/down-arrow.svg) !important;
    background-size: cover;
    background-size: 9px;
    background-repeat: no-repeat;
    background-position: 87% center;
    border: 1px solid #e2e2e2 !IMPORTANT;
    margin-right: 5px;
    background-color: #f6f6f6;
}

.workspace-calendar-custom {
    color: #222222;
    -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    /* -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16); */
    /* box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16); */
    border: none !important;
    width: 100%;
    padding: 10px;
    background: #fff;
    position: relative;
    max-width: 320px;
    padding-top: 50px;
    min-width: 320px;
    border: 1px solid #dddddd !IMPORTANT;
}

.main_date.today.today_date_top {
    width: 100%;
    text-align: left;
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 0;
}

.year_new {
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
}

.date_new {
    font-size: 17px;
    font-weight: 500;
    line-height: 35px;
    color: #62656b;
}

div#calendar {
    width: 100%;
}

.calendar-right-section {
    width: 100%;
    padding: 0 15px;
    background: #fff;
    padding-right: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: left;
    opacity: 1;
    background: #39558d;
    color: #fff;
    margin: 0;
    padding: 8px 15px;
    display: none;
}

.full-calendar-column-row {
    width: 100%;
    display: flex;
}


.calendar-filter-options ul.demo-list-control.mdl-list li.heading-li {
    margin-bottom: 7px;
    font-weight: 500;
    padding-left: 0;
    color: inherit;
}

.calendar-filter-options ul.demo-list-control.mdl-list li {
    margin-bottom: 7px;
    font-weight: 400;
    padding: 0;
    padding-right: 15px;
    color: #8e8685;
    padding-left: 0;
}

.calendar-filter-options ul.demo-list-control.mdl-list li a.btn-link.toggle-collasped {
    font-size: 14px;
    font-weight: 500;
    padding: 2px 0;
    display: block;
    margin-bottom: 4px;
    cursor: pointer;
    color: #616060;
}

.calendar-filter-options ul.demo-list-control.mdl-list li a.btn-link i {
    font-size: 16px;
    margin-right: -1px;
    display: inline-block;
    vertical-align: bottom;
    transform: rotate(90deg);
    transition: all 0.5s;
}


.calendar-filter-options ul.demo-list-control.mdl-list li a.btn-link.collapsed i {
    transform: rotate(0deg);
}

.calendar-filter-options ul.demo-list-control.mdl-list li ul.main--submenu {
    padding-left: 28px;
}

.calendar-filter-options ul.demo-list-control.mdl-list {
    margin: 0 0 15px 0;
    padding: 0;
    border-top: 1px solid #efefef;
    padding-top: 15px;
    overflow: auto;
    max-height: calc(100vh - 390px);
    margin-bottom: 0;
}

.red-check .mdl-checkbox.is-checked .mdl-checkbox__box-outline,
.red-check .mdl-checkbox__box-outline {
    border: 2px solid #e74c3c;
}

.red-check .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: #e74c3c;
}

.red-check .mdl-checkbox__ripple-container .mdl-ripple {
    background: #e74c3c;
}

/*//*/


.blue-check .mdl-checkbox.is-checked .mdl-checkbox__box-outline,
.blue-check .mdl-checkbox__box-outline {
    border: 2px solid rgb(176, 14, 35);
}

.blue-check .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: rgb(176, 14, 35);
}

.blue-check .mdl-checkbox__ripple-container .mdl-ripple {
    background: rgb(176, 14, 35);
}


/*//*/


.yellow-check .mdl-checkbox.is-checked .mdl-checkbox__box-outline,
.yellow-check .mdl-checkbox__box-outline {
    border: 2px solid #f39c12;
}

.yellow-check .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: #f39c12;
}

.yellow-check .mdl-checkbox__ripple-container .mdl-ripple {
    background: #f39c12;
}


/*//*/


.pink-check .mdl-checkbox.is-checked .mdl-checkbox__box-outline,
.pink-check .mdl-checkbox__box-outline {
    border: 2px solid #9b59b6;
}

.pink-check .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: #9b59b6;
}

.pink-check .mdl-checkbox__ripple-container .mdl-ripple {
    background: #9b59b6;
}


/*//*/


.green-check .mdl-checkbox.is-checked .mdl-checkbox__box-outline,
.green-check .mdl-checkbox__box-outline {
    border: 2px solid #2ecc71;
}

.green-check .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: #2ecc71;
}

.green-check .mdl-checkbox__ripple-container .mdl-ripple {
    background: #2ecc71;
}



/*//*/


.red-check .mdl-checkbox.is-checked .mdl-checkbox__box-outline,
.red-check .mdl-checkbox__box-outline {
    border: 2px solid #e74c3c;
}

.red-check .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: #e74c3c;
}

.red-check .mdl-checkbox__ripple-container .mdl-ripple {
    background:#e74c3c;
}



/*//*/


.voilet-check .mdl-checkbox.is-checked .mdl-checkbox__box-outline,
.voilet-check .mdl-checkbox__box-outline {
    border: 2px solid #8e44ad;
}

.voilet-check .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: #8e44ad;
}

.voilet-check .mdl-checkbox__ripple-container .mdl-ripple {
    background: #8e44ad;
}


/*/*/
/*/ searchbox new*/

.mdl-layout__header-row {
    position: relative;
}

.searchbox-li {
    margin-left: 0105px;
    visibility: hidden;
    opacity: 0;
}

.open-search-box .searchbox-li {
    margin-left: 0;
    visibility: visible;
    opacity: 1;
}

.weather-info{
    display: none;
}

.filteritemshow .weather-info {
    display: none;
}

.weather-info {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 134px;
    font-size: 16px;
    font-weight: 500;
    top: 14px;
}

.weather-info span.weather-time {
    border-left: 1px solid #ccc;
    padding-left: 10px;
}

.weather-info span.weather-temp i {
    font-size: 18px;
}

.weather-info span.weather-temp {
    color: #39558d;
    margin-right: 8px;
}

.main--asap .weather-info span.weather-temp {
    color: #1f9656;
}



.perfactscrollbar.ps--active-y,
.dataTables_scrollBody.ps--active-y {
    padding-right: 10px !important;
}


.sidebar--panel .bootstrap-select>.dropdown-toggle {
    position: relative;
    width: 100%;
    z-index: 1;
    text-align: right;
    white-space: nowrap;
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    min-height: 34px;
    line-height: 28px;
    /* -webkit-box-shadow: 0px 1px 5px 0 rgba(0,0,0,.07); */
    /* box-shadow: 0px 1px 5px 0 rgba(0,0,0,.07); */
    background-image: url(../images/down-arrow.svg) !important;
    background-size: cover;
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: 95% center;
    border-color: #d7d7d7 !important;
    box-shadow: none !important;
}

.dropup .dropdown-toggle::after {
    display: none;
}


.new-sidebar-demo .sidebar--panel .panel {
    border: 1px solid #ededed;
    margin-bottom: 15px;
    margin: 0 10px 15px 10px;
    background: white;
    padding-bottom: 0;
}

.new-sidebar-demo .sidebar--panel .panel-body {
    padding: 10px 0;
    border-top: 0px solid #cccccc;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 10px;
}

.new-sidebar-demo .sidebar--panel .panel h4.panel-title a {
    position: relative;
}

.new-sidebar-demo .sidebar--panel .panel h4.panel-title a i {
    transform: rotate(90deg);
    transition: all 0.5s;
    font-size: 20px;
    margin-right: 10px;
    display: inline-block;
    line-height: 16px;
    position: absolute;
    right: 0;
}

.new-sidebar-demo .sidebar--panel .panel h4.panel-title a.collapsed i {
    transform: rotate(-90deg);
}

.workspace-calendar-row {
    position: relative;
        height: calc(100vh - 90px)
}


.fc-unthemed th.fc-day-header {
    text-align: left;
}

.fc-unthemed th.fc-day-header {
    text-align: center !important;
}

.fc-toolbar h2 {
    font-size: 16px;
    font-weight: normal;
    line-height: 40px;
    color: #828080;
    display: inline-block;
}

.fc-next-button,
.fc-prev-button {
    background: transparent !important;
    color: #999 !important;
    box-shadow: none !important;
    border: none !important;
}

a.view-more {
    margin-left: 15px;
    margin-top: 12px;
    display: inline-block;
    color: #39558d;
    margin-bottom: 15px;
}

.workspace--main .nav-tabs {
    border: none;
    border-bottom: 0px solid #8c8c8c;
    margin: 0;
}

.workspace--main .mdl-tabs__tab {
    padding: 0 10px;
}


.workspace--main .nav-tabs .nav-item {
    margin-bottom: 0;
}


.dashboard-cards-row {
    display: flex;
    margin-bottom: 0;
    padding-top: 16px;
    justify-content: space-between;
    border-bottom: 1px solid #f5f4f4;
    margin-bottom: 10px;
}

.dashboard-card {
    border-left: 1px solid;
    padding: 10px 8px;
    background: #fff;
    border-left-color: rgba(0, 0, 0, .12);
    position: relative;
    min-width: 12%;
}

.dashboard-card:first-child {
    border: none;
}

.dashboard-card p {
    margin-bottom: 2px;
    color: rgba(0, 0, 0, .54);
    font-weight: 500;
    line-height: 16px;
    height: 35px;
    font-size: 13px;
}

.dashboard-card h3 {
    color: #58707b !important;
    line-height: 0.2;
}

button.btn.btn-right-link {
    position: absolute;
    right: 10px;
    bottom: 28px;
    bottom: 0;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: rgba(166, 166, 166, 0.17);
    margin: auto;
    color: #959595;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

.dashboard-card:hover button.btn.btn-right-link {
    opacity: 1;
    visibility: visible;
}

button.btn.btn-right-link .mdi {
    font-size: 20px;
    vertical-align: middle;
    margin-left: -6px;
    top: -5px;
    position: relative;
}



.dashboard-card.no-show-card h3 {
    color: #d93025 !important;
}

.dashboard-card.no-show-card button.btn.btn-right-link {
    background: #f4433c1c;
    color: #f4433c;
}




.dashboard-card.pending-card h3 {
    color: #ff9800 !important;
}

.dashboard-card.pending-card button.btn.btn-right-link {
    background: #ff980021 !important;
    color: #ff9800 !important;
}


a.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.dotted-cal {
    width: 24px;
    height: 24px;
    background: red;
    border-radius: 50%;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    padding: 0;
    color: #39558d;
}

.fc-event .fc-content {
    color: #2c304d;
    position: relative;
    z-index: 2;
    padding: 0;
    text-align: center;
    line-height: 26px;
}


a.fc-more {
    margin-left: 15px;
}

.fc-more-popover .fc-event-container a.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.dotted-cal {
    width: auto;
    height: auto;
    display: block;
    border-radius: 0;
    color: #fff;
    text-align: left;
}

.fc-more-popover .fc-event-container .fc-title {
    font-weight: 600;
    color: #fff;
}


.fc-more-popover .fc-event-container  .fc-content {
    text-align: left;
    padding-left: 8px;
}

a.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.dotted-cal .fc-time{
    display: none;
}

td.fc-event-container {
    padding: 0 !important;
}

td.fc-more-cell {
    padding: 0 !important;
}


td.fc-more-cell {
    margin-top: -19px;
    margin-left: 20px;
    display: block;
}

.red-dot {
    background: #e74c3c !important;
}


.blue-dot {
    background: rgb(176, 14, 35) !important;
}

.yellow-dot {
    background: #d35400 !important;
}


.pink-dot {
    background: #2c3e50 !important;
}

.green-dot {
    background: #2ecc71 !important;
}

.voilet-dot {
    background: #8e44ad !important;
}


.drug-test-result-list .workspace--row {
    background: #fff;
}

.drug-test-result-list .work-space-column h4 {
    font-size: 15px;
    margin-bottom: 5px;
}

.workspace-dflex {
    display: flex;
    justify-content: space-between;
}



.drug-test-result-list p.work-location-p {
    color: rgb(111, 111, 111);
    line-height: 18px;
}

.drug-test-result-list .work-space-column {
    width: 100%;
}

.drug-test-result-list p.scheduled-time {
    text-align: right;
}

.drug-test-result-list .workspace--row {
    cursor: pointer;
}

.drug-test-result-list .workspace--row:hover {
    background: #f1f3f7;
}


.drug-test-result-list p .mdi,
.drug-test-result-list p .mdi {
    font-size: 15px;
    margin-right: 3px;
}

.tester-name span {
    font-size: 12px;
    font-weight: 400;
    color: #afafaf;
}

.drug-test-result-list .test-status {
    font-size: 12px;
    margin-top: 8px;
}

.drug-test-result-list p.scheduled-time {
    text-align: right;
    display: inline-block;
    margin-left: auto;
    float: right;
}

label.hsi-label.drug-result {
    background: #74c549;
}

label.hsi-label.test-type {
    margin: 0;
    background: #489db8;
}

label.hsi-label.Substance-Type-label {
    background: #58707b;
}





.filter-main-box .form-group .dropdown-menu .inner {
    /* max-height: 280px !important; */
    margin-bottom: 10px;
}

.filter-main-box .form-group button.actions-btn.bs-deselect-all.btn.btn-light {
    position: absolute;
    bottom: 0;
    background: red;
}

.filter-main-box .form-group .btn-group.btn-group-sm.btn-block {
    position: inherit;
}




.filter-main-box .form-group button.actions-btn.bs-select-all.btn.btn-light {
    position: absolute;
    left: 15px;
    top: 18px;
    background: #5d5d5d;
    width: 132px;
    height: 37px;
    color: #fff;
    font-size: 14px;
}

.filter-main-box .form-group button.actions-btn.bs-deselect-all.btn.btn-light {
    position: absolute;
    bottom: 10px;
    background: red;
    background: #dcd3d3;
    width: 132px;
    height: 37px;
    color: #656565;
    left: 15px;
    font-size: 14px;
}

.fc-toolbar .fc-left {
    float: left;
    width: 100%;
}

.fc-unthemed td.fc-today {
    background: #f1f3f7;
}



/*// Filter plugin*/

.custom-filter-dropdown {
        position: absolute;
    overflow: hidden;
    border-radius: 0;
    padding: 0;
    width: 360px;
    border-radius: 0;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .12);
    background-color: #fff;
    padding: 0;
    right: -15px;
    text-align: left;
    z-index: 100;
    transform: scale(.95) !important;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    pointer-events: none;
    display: block;
    top: 100% !important;
}

.custom-filter-dropdown.show {
    transform: scale(1) !important;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}


.custom-filter-box.show:before {
    content: "";
    position: fixed;
    left: 0;
    top: 100px;
    bottom: 0;
    background: rgba(9, 30, 66, 0.35);
    right: 0;
    z-index: 9;
}



ul.dropdown-filter-list {
    padding: 0;
    max-height: 300px;
    /*overflow: auto;*/
    margin-bottom: 0;
    min-width: 300px;
}


li.filter-list__item {
    padding: 6px 10px;
    cursor: pointer;
}


li.filter-list__item:hover {
    background: rgba(180, 180, 180, 0.16);
}

.filter-dropdown-header,
.filter-dropdown-footer {
    display: flex;
    background: #ededed;
    padding: 10px;
    justify-content: space-between;
    align-items: center;
}

.filter-dropdown-header {
    margin-bottom: 0px;
}

.filter-dropdown-footer {
    margin-top: 0px;

}

.filter-dropdown-header .mdl-checkbox.is-upgraded {
    padding-left: 24px;
    width: auto;
    white-space: nowrap;
    margin-right: 10px;
    line-height: 24px;
}

.filter-content .filter-dropdown-header label {
    width: auto;
}

.filter-list__item label {
    cursor: pointer;
}

.btn-filter-select {
    position: relative;
    border-radius: 0;
    background: #ffffff;
    color: #5a5a5a;
    font-weight: 400;
    border: 1px solid rgba(55, 71, 79, 0.2784313725490196);

}

.show .btn-filter-select {
    z-index: 11;
    background: #028940;
    color: white;
    font-weight: 400;
    box-shadow: none;
}

.btn-filter-select i.mdi.mdi-chevron-down {
    line-height: 1px;
}




.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #dadada;
    outline: 0;
    box-shadow: none;
}


td.completed-status {
    font-weight: 500;
    color: #74c549;
}

td.Pending-status {
    font-weight: 500;
    color: #ffcc00;
}


.no-pending-btn .mdl-button--fab[disabled][disabled],
.no-pending-btn .mdl-button--fab.mdl-button--disabled.mdl-button--disabled {
    background-color: #ffcc001a;
    color: #ffcc00;
}

.no-reports-btn .mdl-button--fab[disabled][disabled],
.no-pending-btn .mdl-button--fab.mdl-button--disabled.mdl-button--disabled {
    background-color: #f5433729;
    color: #f54337;
}

span.name-id {
    color: #d0d0d0;
    font-weight: 400;
    font-size: 14px;
    vertical-align: middle;
    display: inline-block;
}

p.date-m span.package {
    margin-left: 10px;
}

label.hsi-label.noshow {
    background: #f54337;
}

label.hsi-label.pending {
    background: #ffcc00;
}


.location-country-state p {
    display: inline-block;
    margin-right: 8px;
}

.location-country-state p.country {
    font-weight: 500;
    font-size: 14px;
}

.location-country-state .mdi {
    font-size: 16px;
}


.icon-inside .bx--form-item {
    max-width: 258px;
    border: 1px solid #d7d7d7;
    padding: 0;
}

.icon-inside .bx--date-picker--range {
    border: none;
    padding: 0;
}

.icon-inside .bx--date-picker--range label.bx--date-picker__icon.mdl-button.mdl-js-button.mdl-button--icon {
    right: -30px;
}

div#datepicker {
    height: 260px;
}

.mdl-checkbox {
    color: dimgrey;
}

span.number-budge {
    font-weight: 300;
    position: absolute;
    right: 8px;
}


.material-icons.no-pending-btn {
    color: rgba(255, 206, 12, 0.5294117647058824);
}

.material-icons.no-reports-btn {
    color: rgba(245, 67, 55, 0.5294117647058824);
}



.fc-time-grid .fc-slats td {
    height: 4em;
    border-bottom: 0;
}

.table--default td strong {
    font-weight: 600;
}


.open-search-box .mdl-layout__header-row:before {
    content: "";
    position: absolute;
    left: 330px;
    top: 0;
    bottom: 0;
    background: white;
    right: 0;
}

/*new header*/


.layout--header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    box-sizing: border-box;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    max-height: 1000px;
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-property: max-height, box-shadow;
    position: relative;
    z-index: 99999;
    box-shadow:0 2px 3px 0px rgba(0, 0, 0, 0.03);
    color: rgb(117, 117, 117);
        border-bottom: 1px solid #e7eaf3;
}

.layout--header-row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 50px;
    margin: 0;
}

.active-servicename {
    color: #39558d;
    font-size: 16px;
    font-weight: 500;
    margin-left: 15px;
}

.main--asap .active-servicename {
    color: #1f9656;
}

.right--nagivation {
    margin-left: auto;
}


.layout--content {
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    -webkit-overflow-scrolling: touch;
    transition: all 0.5s;
    position: relative;
    width: calc(100% - 50px);
    margin-left: 50px;
    z-index: 1;
}

.open-small--menu .layout--content{
    width: calc(100% - 220px);
    margin-left: 220px;
}

/*sidebar*/
.sidebar--navigation {
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 100vh;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 0;
    padding-top: 0;
    -webkit-transition: background-color 0.3s cubic-bezier(0.2, 0, 0, 1), color 0.3s cubic-bezier(0.2, 0, 0, 1);
    transition: background-color 0.3s cubic-bezier(0.2, 0, 0, 1), color 0.3s cubic-bezier(0.2, 0, 0, 1);
    top: 50px;
    width: 50px;
    height: calc(100% - 50px);
    background: #e6e6e6;
    transition: all 0.5s;
    /*box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.09), 0 1px 0px -2px rgba(0, 0, 0, 0), 0 0px 1px 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 20px 0 rgba(0,0,0,.1);*/
    position: fixed;
    left: 0;
    z-index: 11;
    bottom: 0;
    top: 50px;
    box-shadow: none;
    border-right: 1px solid gainsboro;

}




.open-small--menu .sidebar--navigation{
        width: 220px;
}

.open-small--menu.small--menu-hover .sidebar--navigation{
        width: 220px;
}


.sidebar-menu-navigation {
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    margin: 0;
    padding-bottom: 16px;
}


.navigation--bottom {
    padding: 0;
}


.sidebar-menu-navigation>li {
    position: relative;
    padding: 0;
    margin-bottom: 0;
    width: 100%;
}


.layout-navigation__link {
    font-weight: 400;
    text-align: center;
    padding: 10px 14px;
    font-size: 12px;
    cursor: pointer;
    height: 38px;
    margin-bottom: 0px;
    display: block;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin: 0;
    color: #909090;
    opacity: 1;
    line-height: 21px;
    letter-spacing: 0;
    text-decoration: none;
    display: flex;
    align-items: center;
} 

.open-small--menu .sidebar--navigation .layout-navigation__link span.menu-text, .open-small--menu.small--menu-hover .sidebar--navigation .layout-navigation__link span.menu-text {
    font-size: 14px;
    font-weight: 500;
    margin-left: 12px;
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    width: auto;
}

.open-small--menu .dropright .dropdown-toggle::after {
    font-size: 17px;
    position: absolute;
    right: 16px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.open-small--menu .sidebar--navigation .mdl-tooltip , .open-small--menu.small--menu-hover .sidebar--navigation .mdl-tooltip {
    display: none;
}

span.menu-text {
    /* display: none; */
    visibility: hidden;
    opacity: 0;
    transform: scale(0.5);
    width: 0;
    transition: all 0.5s;
    overflow: hidden;
}
.open-small--menu .sidebar--navigation .layout-navigation__link svg , .open-small--menu.small--menu-hover .sidebar--navigation .layout-navigation__link svg  {
    margin: 0;
}

.open-small--menu .sidebar--navigation span.menu-text , .open-small--menu.small--menu-hover .sidebar--navigation span.menu-text{
    display: inline-block;
}

.layout-navigation__link svg {
    width: 20px;
    display: block;
    /* margin: auto; */
    fill:#909090;
    height: 20px;
}

.layout-navigation__link .mdi{
    font-size: 20px;
}

.show .layout-navigation__link {
    z-index: 1;
    position: relative;
    background: #fff;
}

.layout-navigation__link:hover {
    background: #f6f6f6;
}

.layout-navigation__link.active {
    background-color: #f6f6f6 !important;
    color: #595959 !important;
    border-left: 3px solid #39558d;
    cursor: pointer;
    opacity: 1;
    outline: none;
}

.main--asap  .layout-navigation__link.active {
    background-color: #f6f6f6 !important;
    border-left: 3px solid #1f9656;
}

.main--asap .layout-navigation__link.active svg {
    fill: #1f9656 !important;
}

.layout-navigation__link.active svg {
    fill: #39558d !important;
}

.layout-navigation__link:hover svg {
    fill: #404040;
}

.layout-navigation__link.active .mdi {
    color: #39558d !important;
    position: relative;
    left: -2px;
}

.layout-navigation__link:hover .mdi {
    color: #404040;
}


.sidebar-menu-navigation>li .dropdown {
    width: 100%;
}


.filter-content-main-section {
    display: none;
}

.filter-content-main-section.filteritemshow {
    position: absolute;
    left: 295px;
    top: 0;
    z-index: 99999;
    overflow: hidden;
    height: 50px;
    right: 188px;
    background: #ffffff;
    justify-content: center;
    align-items: center;
    display: flex;
    transition: all 0.2s;
}

svg {
    fill: #757575;
}


.active-notification-list .sidebar--navigation {
    z-index: 9999;

}

.active-notification-list .modal.fade.show .modal-dialog {
    margin-left: 50px;
}

.open-search-box .filter-content-main-section.filteritemshow {
    z-index: 1;
}


.viewallfilter .filter-content-main-section.filteritemshow {
    height: auto;
    background: white;
    left: 0;
    right: 0;
    z-index: 999999;
    box-shadow: 1px 1px 9px -4px #000;
    padding: 15px;
    padding-right: 25px;
}

.viewallfilter .viewallfilter-btn {
    position: absolute;
    right: 15px;
    top: 13px;
    background: #cac8c8;
    color: #525252;
}

.viewallfilter-btn .view-text {
    display: block;
}

.viewallfilter-btn .hide-text {
    display: none;
}

.viewallfilter .viewallfilter-btn .view-text {
    display: none;
}

.viewallfilter .viewallfilter-btn .hide-text {
    display: block;
}

.viewallfilter .filteritemshow .filtertags .filtertags-ul {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}


.online-order-add-button-section {
    position: relative;
       padding: 20px 15px;
    text-align: justify;
    color: #797979;
    background: #ffffff;
    margin: auto 20px;
    border: 1px solid #fbfbfb;
    box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.26);
    max-width: 700px;
    margin: auto;
    border-radius: 4px;
}
.online-order-add-button-section strong {
    font-weight: 500;
}

i.info-icon {
    font-size: 50px;
    color: #b3b3b3;
    margin-bottom: 0;
    display: block;
}


.onlineorder-front-page {
    height: calc(100vh - 52px );
    display: flex;
}

.online-order-add-product {
    display: none;
}

.add--neworder .onlineorder-front-page {
    display: none;
}

.add--neworder .online-order-add-product{
display: block;
}


.col-sm-12.info-row.big-info p {
    margin: 0;
    color: rgba(48, 64, 73, 0.8392156862745098);
    line-height: normal;
    font-size: 14px;
    word-break: break-all;
    margin: 7px 0;
    line-height: 19px;
}




 #success_tic .page-body{
  max-width:300px;
  background-color:#FFFFFF;
  margin:10% auto;
}
 #success_tic .page-body .head{
  text-align:center;
}
/* #success_tic .tic{
  font-size:186px;
} */
#success_tic .close{
      opacity: 1;
    position: absolute;
    right: 0px;
    font-size: 30px;
    padding: 3px 15px;
  margin-bottom: 10px;
}
#success_tic .checkmark-circle {
  width: 110px;
  height: 110px;
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.checkmark-circle .background {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #28a745;
    position: absolute;
}
#success_tic .checkmark-circle .checkmark {
  border-radius: 5px;
}
#success_tic .checkmark-circle .checkmark.draw:after {
  -webkit-animation-delay: 300ms;
  -moz-animation-delay: 300ms;
  animation-delay: 300ms;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-name: checkmark;
  -moz-animation-name: checkmark;
  animation-name: checkmark;
  -webkit-transform: scaleX(-1) rotate(135deg);
  -moz-transform: scaleX(-1) rotate(135deg);
  -ms-transform: scaleX(-1) rotate(135deg);
  -o-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
#success_tic .checkmark-circle .checkmark:after {
  opacity: 1;
  height: 75px;
  width: 37.5px;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
  border-right: 15px solid #fff;
  border-top: 15px solid #fff;
  border-radius: 2.5px !important;
  content: '';
      left: 16px;
    top: 64px;
  position: absolute;
}

@-webkit-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}
@-moz-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}
@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}



div#work-location-table {
    display: none;
}

.open-entities-tab div#work-location-table {
    display: block;
}


.open-entities-tab div#caselist-main-table {
    display: none;
}

.d-flex-body {
    max-height: calc(100vh - 180px);
    overflow: auto;
}


span.ccstatus.inctive {
    color: red;
    font-weight: 500;
}
span.ccstatus.active {
    color: #00b352;
    font-weight: 500;
}

span.ccstatus strong {
    font-weight: 400;
    font-size: 11px;
    display: block;
    opacity: 0.6;
    line-height: 10px;
}



.main-sidebar--menu .main--submenu>li>a.active {
    color: #1f9656;
}


body.main--asap .ui-datepicker .ui-datepicker-today span, .main--asap .ui-datepicker .ui-datepicker-today a, .main--asap .ui-datepicker td.ui-datepicker-today a.ui-state-active {
    background: #028940 !important;
    color: #fff !important;
}


.modal-open main.layout--content  {
    filter: blur(3px);
}



.cart-card-body {
    height: 200px;
}

.cart-card-header {
    padding: 15px;
    background: #e6e6e6;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    color: #17262a;
}

.card.shadow.cart-card-main {
    margin-bottom: 20px;
}

.cart-card-header h4 {
    font-size: 20px;
    font-weight: 500;
}



.profile-header-option .mdl-button--mini-fab{
    /* background-color: #5a5a5a;
    color: #e6e0e0; */
    height: 39px;
    width: 39px;
}

label.table-label {
    margin: 0;
    font-weight: 500;
    
}

label.table-label.inctive{
    color: red;
}

label.table-label.active{
    color: #00b352;
}




.employee-roster-filter-section {
    padding: 8px 0 8px 0;
    border-bottom: 1px solid #dadce0;
}

.employee-roster-filter-section .btn-filter-select {
    padding: 2px 8px;
    font-weight: 500;
    font-size: 14px;
}

.employee-roster-filter-section .btn-filter-select i.mdi.mdi-chevron-down {
    font-size: 20px;
    top: 2px;
    line-height: 1px;
    position: relative;
}

.employee-roster-filter-section .custom-filter-box.show:before{
    background: transparent;
}

.employee-roster-filter-section .custom-filter-dropdown.show {
    box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
    border-color: transparent;
}

.employee-roster-main .btn-white-default  , .employee-roster-main .column-toggle{
     box-shadow: none !important; 
    margin-right: 2px;
    color: dimgrey;
    font-weight: 500;
    outline: none;
    border: 1px solid #c7ccce;
}

button.btn.btn-secondary.mr-2.employeeaddbtn span.mdi-plus.mdi {
    line-height: 1px;
}

.employee-roster-main .compact-icon {
    display: flex;
}

.employee-roster-main .compact-listing-description {
    padding-left: 0;
}

.employee-roster-main .notify-box {
    margin: 0;
    padding: 0;
    width: auto;
}

.employee-roster-main .more-filter{

    height: 28px;
}

.employee-roster-main .compact-listing-center span {
    font-weight: 500;
}

.employee-roster-main .compact-listing-bottom span.ccstatus strong {
    display: inline-block;
}
.employee-roster-main .compact-listing-bottom span.ccstatus {
    margin-left: 10px;
}

.employee-roster-main .compactlisting-ul {
    justify-content: space-between;
}

.employee-roster-main .compactlisting-ul h4 {
    font-size: 14px;
    line-height: 21px;
    position: relative;
    transition: all 0.5s;
    top: 1px;
}

span.empid-ssn {
    color: #9a9a9a;
    margin-left: 10px;
}

.employee-roster-main .compact-list-layout {
    height: calc(100vh - 188px);
    overflow: auto;
}

.main--asap .compact-listing-items:hover {
    background: #e8f4ee;
    box-shadow: none;
    transform: none;
}

div#questioncollapse0002 p.info-result {
    margin-top: 9px;
}

div#questioncollapse0002 .info-result label {
    margin-right: 15px !important;
}


.message-box  .bootstrap-tagsinput {
    min-height: 80px;
    border-radius: 0;
}

.verification-title .main-title{
        padding-bottom: 4px;
}

.verification-title p {
    padding: 10px;
    background: #f1eeee;
    font-weight: 500;
}

.status-verification-section-main {
    padding: 10px 10px;
}

.message-box-footer button {
    min-width: 90px;
}



.statusverification-center .status-verification-table {
    display: none;
}

.status-verification-section-main.statusverification-center {
    height: calc(100vh - 60px);
    align-items: center;
    justify-content: center;
    display: flex;
}

.status-verification-section-main.statusverification-center h4.main-title:before {
    display: none;
}

.status-verification-section-main.statusverification-center h4.main-title {
    font-size: 20px;
    text-align: center;
    border: none;
}


.status-verification-section-main.statusverification-center h4.main-title {
    font-size: 18px;
    text-align: center;
    border: none;
    margin: 0 !important;
    padding: 0;
    line-height: normal;
    font-weight: 400;
}


.status-verification-section-main.statusverification-center .verification-title {
    justify-content: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding: 14px;
}

.status-verification-section-main.statusverification-center .message-box {
    box-shadow: none;
    overflow: visible;
}



.status-verification-section-main.statusverification-center .verification-title p {
    padding: 0;
    background: transparent;
    font-weight: 500;
    margin: 0;
    opacity: 0.8;
}


.status-verification-section-main.statusverification-center  .status-searchbox {
    width: 100%;
    max-width: 750px;
}

.status-verification-section-main.statusverification-center .message-box-footer {
    text-align: center;
    background: transparent;
    margin-top: 13px;
}

.status-verification-section-main.statusverification-center .message-box .bootstrap-tagsinput {
    border-radius: 0;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.verification-image{
    display: none;
}

.status-verification-section-main.statusverification-center .verification-image{
    display: block;
}

.status-verification-section-main table.dataTable {
    min-width: 100%;
}


.status-verification-table table.table--default thead th{
    border-right: 1px solid #e0e0e0 !important;
    border-top: 1px solid #e0e0e0 !important;
}

.status-verification-table table.table--default thead th:first-child{
    border-left: 1px solid #e0e0e0 !important;
}

.status-verification-table .message-box-footer {
    text-align: center;
}

ul.status-ul {
    padding: 0;
    margin: 0;
    white-space: nowrap;
}

ul.status-ul span.ccstatus strong {
    display: inherit;
}

.table.table-no-border td:first-child:before{
    display: none;
}
.select-option-box label {
    text-align: left;
    display: block;
    font-weight: 600;
}


.asap-status-section {
    padding: 15px;
}

.asap-status-section {
    padding: 15px;
}


.main-details-model-cards .asap-status-section .card {
    border: 1px solid #ededed;
    box-shadow: none !important;
}

.main-details-model-cards .asap-status-section .card-body {
        padding: 0;
}

.main-details-model-cards .asap-status-section .card-header{
    padding: 10px;
    border: 1px solid#242a30;
    box-shadow: none;
    font-weight: 500;
    background:#242a30;
    color: #fff;
}


h3.page-title span.badge {
    font-weight: 500;
    padding: 5px 8px;
}

.employee-search-box  {
    position: relative;
    border-radius: 0;
    background: #ffffff;
    color: #5a5a5a;
    font-weight: 400;
    border: 1px solid rgba(55, 71, 79, 0.2784313725490196);
    padding: 0px 5px;
    height: 27px;
    outline: none;
}


.form-group.dropdown.more-filter-full-menu {
    position: inherit;
}


.more-filter-full-menu .custom-filter-dropdown.show {
    top: 54px !IMPORTANT;
    width: calc(100% - 30px);
    left: 15px !important;
    right: 15px !important;
}

.filter-main-box .more-filter-full-menu .form-group {
    margin: 0 0 15px 0;
}

.more-filter-full-menu ul.dropdown-filter-list {
    min-height: 400px;
    padding: 10px 10px;
    position: relative;
}

ul.dropdown-filter-list .bootstrap-select>.dropdown-toggle {
    border-radius: 0 !important;
    border: 1px solid #ececec !important;
    width: 100%;
    border: 1px solid #c9c9c9 !IMPORTANT;
    margin-top: 0px;
    outline: none;
    font-weight: 500;
    color: #656363 !important;
    background-color: #fff;
    border-radius: 4px;
    font-size: 14px;
}

ul.dropdown-filter-list .bootstrap-select>.dropdown-toggle:after{
    content: "\F140";
    margin-right: 18px;
    top: 11px;
    position: relative;
    font: normal normal normal 23px/0 "Material Design Icons";
    display: inline-block;
}

.upload-csv i {
    font-size: 14px;
}

.upload-csv {
    padding: 3px 7px;
    display: block;
    margin-top: 6px;
    position: absolute;
    right: 8px;
    bottom: 11px;
}

.map-popup span.badge {
    font-weight: 500;
    padding: 8px 8px;
    font-size: 12px;
    margin-top: 2px;
}

.map-popup span.badge .mdi {
    font-size: 15px;
    vertical-align: middle;
    margin-left: 4px;
}
.home-tabs-panel .tab-pane {
    overflow: auto;
        max-height: calc(100vh - 120px);
    padding: 0 10px;
    margin: 0 -5px;
}


#emploee-add--popupblack .modal-body , #emploee-detail--popup .modal-body{
    max-height: calc(100vh - 265px);
}

#emploee-add--popupblack .col-sm-9.profile-content , #emploee-detail--popup .col-sm-9.profile-content{
    box-shadow: none;
    padding-bottom: 0;
}

#emploee-add--popupblack .main-details-model-cards , #emploee-detail--popup .main-details-model-cards{
    padding-bottom: 0;
}

#emploee-add--popupblack .modal-body , #emploee-detail--popup .modal-body{
    padding-bottom: 0 !important;
}
.filter-dropdown-header label {
    margin: 0;
    font-weight: 500;
}


.custom-filter-box .bx--date-picker--range {
    border-radius: 0;
    padding: 1px 0;
}

.custom-filter-box .bx--date-picker--range>.bx--date-picker-container:first-child {
    width: 100%;
}

.custom-filter-box .bx--form-item {
    padding: 0;
}


.matrics-navbar {
    margin: 0 -15px;
}

.matrics-scroll .map-div {
    max-height: calc(100vh - 100px);
    overflow: auto;
}

.matrics-scroll .mdl-tabs__tab, .matrics-scroll .mdl-nav-tab .nav-link {
    margin: 0 5px;
    padding: 0 10px;
}


.matrics-scroll nav.navbar.navbar-expand-sm {
    padding: 0;
    border: none;
    box-shadow: inset 0 0px 5px -3px #000000;
    background: #fff;
}

.activeenable-focus-mode button.closebtn.btn.btn-default {
    display: inline-block !important;
}

.activeenable-focus-mode  .dropdown.action-dropdown {
    display: none;
}



.employee-tab-overlay{
    display: none;
}

.active-caselist-on-employee .employee-tab-overlay {
    max-width: 60px;
    height: 60px;
    position: absolute;
    left: -66px;
    border-radius: 50%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    display: block;
    padding: 0;
    top: 8px;
}
.employee-tab-overlay img {
    max-width: 100%;
    border-radius: 50%;
}

.employee-tab-overlay-btn {
    background: no-repeat;
    border: none;
    width: 60px;
    height: 60px;
    padding: 0;
    cursor: pointer;
}

.employee-tab-overlay span.mdi-close.mdi {
    position: absolute;
    right: 0px;
    top: 1px;
    background: #ff0000 !important;
    border-radius: 50%;
    font-size: 14px;
    width: 20px;
    height: 20px;
    color: #fff;
    text-align: center;

}


.main-workspace-section {
    width: 100%;
    padding: 10px 20px;
    /*background: #f5f6fa;*/
}

.workspace-column-height {
    height: calc(100vh - 170px);
}

.work-space-card.card {
    margin-bottom: 15px;
}



.main-workspace-section .dashboard-cards-row {
    display: flex;
    margin-bottom: 0;
    padding-top: 16px;
    justify-content: unset;
    border-bottom: 1px solid #f5f4f4;
    margin-bottom: 10px;
    flex-wrap: wrap;
}


.main-workspace-section .dashboard-card {
    border: none;
    padding: 7px 10px;
    background: #fff;
    border-bottom: 1px dashed #edeef0;
    position: relative;
    min-width: 100%;
    margin-bottom: 0;
    height: auto;
    display: flex;
    margin-right: 0;
    margin-left: 0;
    align-items: center;
    padding-left: 31px;
    margin-bottom: 5px;
    cursor: pointer;
    line-height: normal;
}

.main-workspace-section .dashboard-card:last-child{
    margin: 0;
}

.main-workspace-section .dashboard-card p {
    margin-bottom: 2px;
    color: rgba(0, 0, 0, .54);
    font-weight: 500;
    line-height: 16px;
    height: auto;
    font-size: 13px;
    margin: 0;
}
.main-workspace-section .dashboard-card h3 {
    line-height: 24px;
    font-size: 15px;
    display: block;
    padding: 3px 4px;
    min-width: 43px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    margin: -10px;
    margin-left: auto;
    border-radius: 0;
    color: #ececec;
    position: relative;
}

 .dashboard-card i.mdi-dot {
    position: absolute;
    left: 11px;
    background: #5c707b;
    width: 7px;
    height: 7px;
    background: #5c707b;
    margin-left: 10px;
    border-radius: 50%;
    top: 0;
    bottom: 0;
    margin: auto;
}

.main-workspace-section .dashboard-card h3 a {
    color: initial;
    cursor: pointer;
}


.dashboard-card.no-show-card h3:before , .dashboard-card.no-show-card i.mdi-dot{
     background-color: rgb(244, 67, 54) !important;
}




.dashboard-card.pending-card h3:before , .dashboard-card.pending-card i.mdi-dot{
    background-color: rgb(255, 152, 0) !important;
}




.main-workspace-section .dashboard-card:hover p {
    color: rgba(0, 0, 0, 0.78);
}

.dashboard-card i.mdi.mdi-information-outline {
    position: absolute;
    opacity: 0.3;
    font-size: 18px;
    left: 7px;
}
.main-workspace-section .mdl-tabs__tab {
    padding: 0 8px;
    margin-right: 10px;
    text-transform: capitalize;
}

.main-workspace-section .workspace-main-card {
    padding: 0;
}
.main-workspace-section .workspace-main-card .card-body {
    padding: 10px;
}

.main-workspace-section .workspace-main-card   .work-space-card {
    margin: 15px 0;
}

.main-workspace-section .mdl-tabs__tab-bar {
    justify-content: unset;
}

.main-workspace-section button.btn.btn-right-link {
    bottom: 26px;
    }

.dashboard-card-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: -10px;
    border-bottom: 0;
}


button.btn.btn-placeholder {
    color: #39558d;
    background: #e6e6e6;
    margin-right: 10px;
}

button.btn.btn-placeholder .mdi {
    font-size: 20px;
    vertical-align: middle;
    line-height: 1px;
    color: #6b6b6b;
}

.Progress-report-header {
    background: #39558d;
    padding: 10px 15px;
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
}

span.progress-img {
    width: 55px;
    background: #0000002e;
    height: 55px;
    display: block;
    text-align: center;
    padding: 5px;
    margin-right: 10px;
    border-radius: 5px;
    margin-right: 15px;
}

span.progress-img img{
    width: 100%;
}

.Progress-report-header a.open-link {
    margin-left: auto;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    margin-right: 0;
    text-transform: uppercase;
}

.Progress-report-header{
    cursor: pointer;
}

.Progress-report-header:hover{
    opacity: 0.9;
}


.Progress-report-header a.open-link:hover{
    opacity: 0.6;
}

.Progress-report-header h4 {
    font-size: 24px;
    display: flex;
    align-items: center;
}


.Progress-report-header p {
    margin: 0;
    font-size: 13px;
    /* text-transform: uppercase; */
    opacity: 0.8;
}

.progress-report-section .workspace-content {
    margin-bottom: 15px;
}

.Progress-report-header.completed-bg {
    background: #74c549;
}

.Progress-report-header.left-bg{
    background: #d93025;
}

.Progress-report-header.not-started-bg{
    background: #4e4e4e;
}

.Progress-report-header.inprogress-bg {
    background: #ff9800;
}


.progress-popup .modal-dialog {
    max-width: 720px !important;
}


.progress-popup-main .mdl-tabs__tab-bar {
    height: auto;
    border: none;
    margin-bottom: 20px;
}

.progress-popup-main .mdl-tabs__tab-bar a {
    width: 25%;
    background: #fff;
    padding: 15px 3px;
    height: auto;
    padding-bottom: 36px;
    border: 1px dashed;
    margin: 0 5px;
    border-radius: 6px;
    font-size: 12px;
}


.progress-popup-main .mdl-tabs__tab-bar a.not-started-tab{
    color: #4e4e4e;
}

.progress-popup-main .mdl-tabs__tab-bar a.progress-tab{
 color: #ff9800;
}


.progress-popup-main .mdl-tabs__tab-bar a.completed-tab{
 color: #74c549;
}

.progress-popup-main .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active, .progress-popup-main .mdl-nav-tab .nav-link.active {
    color: rgb(255, 255, 255);
    background: #39558d;
    font-weight: 500;
    border-radius: 5px;
}


.progress-popup-main .mdl-tabs__tab-bar a.not-started-tab.is-active{
   background: #4e4e4e !important;
}

.progress-popup-main .mdl-tabs__tab-bar a.progress-tab.is-active{
 background: #ff9800 !important;
}


.progress-popup-main .mdl-tabs__tab-bar a.completed-tab.is-active{
 background: #74c549 !important;
}


.progress-popup-main .mdl-tabs__tab-bar a:after{
    display: none !important;
}

.progress-popup-main .mdl-tabs__tab-bar a span.budge {
    display: block;
    height: 34px;
    font-size: 26px;
    position: absolute;
    top: 44px;
    margin: auto;
    left: 0;
    right: 0;
}



.worksace-navbar-pills {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dfdfdf;
    padding-bottom: 10px;
    align-items: center;
}

.worksace-navbar-pills  .nav-pills .nav-link.active, .worksace-navbar-pills  .nav-pills .show>.nav-link {
    color: #028940;
    background-color: #02894026;
}


ul.workspace-nav.nav {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    height: 48px;
    padding: 0 0 0 0;
    margin: 0;
    border-bottom: 1px solid rgb(224,224,224);
    justify-content: flex-start;
}

a.tab-item {
    margin: 0;
    border: none;
    padding: 0 5px 0 5px;
    float: left;
    position: relative;
    display: block;
    text-decoration: none;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    color: rgba(0,0,0, 0.54);
    overflow: hidden;
}

a.tab-item.active {
    border-bottom: 2px solid #39558d;
    color: #000;
}
a.tab-item span.budge {
    color: #39558d;
}


.count-big {
    height: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 4rem;
    flex-direction: column;
    padding:35px;
}

.count-big span {
    display: block;
    line-height: normal;
    color: #d93025;
}

.count-big span.label-count {
    font-size: 16px;
    color: #888;
}

.progresschart-div {
    height: 100%;
    display: flex;
    align-items: center;
}

ul.progress-chart {
    width: 100%;
    margin: 0;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.progress-chart a {
    display: block;
    margin: 6px 0;
    text-transform: uppercase;
    color: #757575;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
    font-size: 11px;
    flex-direction: column-reverse;
    cursor: pointer;
}

.progress--card.card {
    margin-bottom: 8px;
    border: 1px dashed #dfdfdf;
}

.progress-chart a span.budge {
    width: 40px;
    height: 40px;
    display: block;
    background: #e8e8e8;
    text-align: center;
    font-weight: 400;
    line-height: 45px;
    margin-left: 0;
    font-size: 16px;
    border-radius: 50%;
    margin-bottom: 3px;
}

.progress-content {
    height: 100%;
    padding: 5px 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.progress-content h4 {
    font-weight: 500;
    font-size: 16px;
    color: #5c707b;
}

.progress-content p {
    margin: 0;
    font-size: 14px;
    text-transform: uppercase;
    color: #fc8e22;
    position: relative;
}

.progress-content img{
        width: 110px;

}

.progress-content p strong{
    font-weight: bold;
}

.progress-chart a.not-started-color span.budge {
    background: #4e4e4e3b;
    color: #4e4e4e;
}

.progress-chart a.in-progress-color span.budge {
    background: #ff98003b;
    color: #ff9800;
}

.progress-chart a.late-color span.budge {
    background: #39558d29;
    color: #39558d;
}

.progress-chart a.completed-color span.budge {
    background: #74c54945;
    color: #74c549;
}



.progress-chart a.not-started-color:hover span.budge {
    color:  #fff;
    background-color: #4e4e4e;
}

.progress-chart a.in-progress-color:hover span.budge {
    color:  #fff;
    background-color: #ff9800;
}

.progress-chart a.late-color:hover span.budge {
    color:  #fff;
    background-color: #39558d;
}

.progress-chart a.completed-color:hover span.budge {
    color:  #fff;
    background-color: #74c549;
}



.progress-chart a.not-started-color:hover {
    color:  #4e4e4e;
}

.progress-chart a.in-progress-color:hover {
    color:  #ff9800;
}

.progress-chart a.late-color:hover {
    color:  #39558d;
}

.progress-chart a.completed-color:hover{
    color:  #74c549;
}




a.progress--card-showmore {
    margin-left: auto;
    display: block;
    color: #39558d;
    text-align: right;
    cursor: pointer;
}

.divider-main {
    width: 100%;
    height: 1px;
    background: #e4e4e4;
    margin: 15px;
    margin-top: 20px;
}




.sidebar-menu-navigation .dropdown-item {
    position: relative;
}

.sidebar-menu-navigation .dropdown-item span.budge {
    width: 30px;
    height: 25px;
    background: #f3f0f0;
    margin-left: auto;
    position: absolute;
    right: 0;
    text-align: center;
    color: #7d7c7c;
}

.dropright .dropdown-submenu .dropdown-toggle::after {
    float: right;
    font-size: 18px;
    top: 7px;
    position: relative;
    color: #b0b2b0;
}

.full-page-calendar {
    padding: 15px;
}

.main--submenu .mdl-checkbox.is-upgraded {
    padding-left: 24px;
    height: auto;
}
.profile--btn {
    padding-left: 5px !important;
}



.caselist-detail-list-view .closed-row.compact-listing-row {
    border-color: #d930258a !important;
}

.caselist-detail-list-view .closed-row.compact-listing-row:hover {
    border-color: #d93025 !important;
}

.caselist-detail-list-view .open-row.compact-listing-row {
    border-color: rgba(46, 204, 113, 0.5490196078431373) !important;
}

.caselist-detail-list-view .open-row.compact-listing-row:hover {
    border-color: #2ecc71 !important;
}

.caselist-detail-list-view .pending-row.compact-listing-row {
    border-color: rgba(241, 196, 15, 0.49) !important;
}

.caselist-detail-list-view .pending-row.compact-listing-row:hover {
    border-color: #f1c40f !important;
}


.caselist-list-des {
    max-width: calc(100% - 438px);
    display: flex;
    height: 90px;
    overflow: hidden;
}

.caselist-list-des span.ass-label {
    font-size: 12px;
    font-weight: 500;
    display: block;
}

.caselist-list-des p{
    font-size: 13px;
        text-align: justify;
    padding: 0 8px;
}

.caselist-list-des .caselist-assessment p:first-child {
    border-right: 1px solid #e0dede;
}


.caselist-detail-list-view .Employees-list li a {
    box-shadow: none;
    border-radius: 0 !important;
}

.caselist-detail-list-view ul.Employees-list {
    margin: 5px 0;
}

.caselist-detail-list-view .osca-pills a {
    background: rgb(228, 228, 228) !important;
    color: #353535 !important;
}

.caselist-detail-list-view .cos-pills a {
    background: rgb(228, 228, 228) !important;
    color: #353535 !important;
}
.caselist-detail-list-view .asap-pills a {
    background: rgb(228, 228, 228) !important;
    color: #353535 !important;
}



.workspace-dashboard-cards-main {
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
    margin: 0 -10px;
    width: calc(100% + 20px);
}
.workspace-dashboard-card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    margin: 12px 6px;
    padding: 10px;
    width: calc(25% - 12px);
    transition: all 0.5s;
    cursor: pointer;
    border-right: 1px solid #e0e0e0;
    margin-bottom: 0;
    background-color: #fff;
    border: none;
    border-radius: .625rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    border-radius: 0;
}

.workspace-dashboard-card:hover {
    opacity: 0.8;
    transform: scale(0.99);
}

.workspace-dashboard-card h4.w-number {
    font-size: 26px;
    margin-top: 5px;
    font-weight: 400;
}

p.w-titlw {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
}


.wo-icon{
    display: none;
}

.wo-icon g [fill] {
    fill: #5d78ff;
}

.wo-icon svg.kt-svg-icon {
    width: 31px;
    height: 31px;
}


.progress-report-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    /*padding-top: 10px;*/
}

.right-divider{
    border-right: 1px solid #e2e2e2;
}

.progress-report-card  .workspace-main-title.workspace-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.dashboard-progress-report {
    width: 100%;
}
.pr-chart {
    width: 38%;
    text-align: center;
}
.pr-list {
    width: 50%;
}

.prlist-ul {
    margin-bottom: 0;
    padding-left: 20px;
}

ul.prlist-ul li {
    margin-bottom: 0px;
    font-size: 13px;
}

ul.prlist-ul li  svg{
    width: 18px;
    height: 18px;
}

.prlist-ul .list-item:before {
    content: "";
    position: relative;
    display: inline-block;
    width: 15px;
    height: 5px;
    background:#242a30;
    border-radius: 8px;
    margin-right: 12px;
    top: -1px;
}

.prlist-ul .step1-color:before {
    background-color: #46bfbd;
}

.prlist-ul .step2-color:before {
    background-color: #f7464a;
}
.prlist-ul .step3-color:before {
    background-color: #fdb45c;
}
.prlist-ul .step4-color:before {
    background-color: #8c7ae6;
}
.prlist-ul .step5-color:before {
    background-color: #44bd32;
}
.prlist-ul .step6-color:before {
    background-color: #f7464a;
}
.prlist-ul .step7-color:before {
    background-color: #44bd32;
}
.prlist-ul .step8-color:before {
    background-color: #8c7ae6;
}



.pr-list g [fill] {
    fill: #5d78ff;
}

.prlist-ul .step1-color:hover {
    color: #f7464a;
}

.prlist-ul .step1-color:hover {
    color: #46bfbd;
}

.prlist-ul .step2-color:hover {
    color: #f7464a;
}
.prlist-ul .step3-color:hover {
    color: #fdb45c;
}
.prlist-ul .step4-color:hover {
    color: #8c7ae6;
}
.prlist-ul .step5-color:hover {
    color: #44bd32;
}
.prlist-ul .step6-color:hover {
    color: #f7464a;
}
.prlist-ul .step7-color:hover {
    color: #44bd32;
}
.prlist-ul .step8-color:hover {
    color: #8c7ae6;
}


.prlist-ul li:hover svg{
    transition: all 0.5s;
}
.prlist-ul li:hover svg{
    transform: translatex(10px);
}


.color-red   p.w-titlw{
    color:#e74c3c ;
}

.color-blue  p.w-titlw{
    color: #2980b9;
}
.color-yellow   p.w-titlw{
    color:#f39c12 ;
}
.color-green   p.w-titlw{
    color:#2ecc71 ;
}
.color-silver   p.w-titlw{
    color:#95a5a6 ;
}
.color-dark-yellow   p.w-titlw{
    color:#d35400 ;
}
.color-gray   p.w-titlw{
    color: #34495e;
}
.color-light-red   p.w-titlw{
    color:#c0392b ;
}
.color-second-blue   p.w-titlw{
    color: #3498db;
}



.color-red  g [fill]{
    fill:#e74c3c ;
}

.color-blue  g [fill]{
    fill: #2980b9;
}
.color-yellow  g [fill]{
    fill:#f39c12 ;
}
.color-green  g [fill]{
    fill:#2ecc71 ;
}
.color-silver  g [fill]{
    fill:#95a5a6 ;
}
.color-dark-yellow  g [fill]{
    fill:#d35400 ;
}
.color-gray  g [fill]{
    fill: #34495e;
}
.color-light-red  g [fill]{
    fill:#c0392b ;
}
.color-second-blue  g [fill]{
    fill: #3498db;
}

.message-section .nav{
    ms-flex-line-pack: stretch!important;
    align-content: stretch!important;
    height: 100%;
}


.message-section .nav-link {
    display: block;
    padding: .5rem 1rem;
    text-align: left;
    /*border-bottom: 1px solid #ded6d6;*/
    position: relative;
    width: 100%;
}

.message-section svg.kt-svg-icon {
    display: block;
    margin-bottom: 6px;
    width: 35px;
    height: 35px;
}

.message-section .nav-link span.badge {
    position: absolute;
    right: 15px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 33px;
    line-height: 24px;
    font-size: 15px;
    padding: 5px 10px;
    min-width: 35px;
}

.message-section .nav-link.color-yellow span.badge {
    background: #f39c124a;
    color: #f39c12;
}


.message-section .nav-link.color-red span.badge {
       background: rgba(231, 76, 60, 0.32);
    color: #e74c3c;
}


.message-section .nav-link.active.color-yellow , .message-section .nav-link.active.color-yellow:before  {
    background: #f39c12;
    color: #e6e6e6;
}


.message-section .nav-link.active.color-red , .message-section .nav-link.active.color-red:before  {
    background: #e74c3c;
    color: #e6e6e6;
}

.message-section .nav-link.active span.badge {
    background: #0000003b;
    color: #ffffff;
}

.message-section .nav-link.active  g [fill]{
    fill: #fff;
}

.message-section .nav-link.active:before {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 4px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -6px;
    background: #f39c12;
    margin: auto;
    transform: rotate(45deg);
}



.workspace--row:first-child {
    border: none;
}

.nav-tabs .nav-link.color-yellow.active {
    border-color: rgba(253, 180, 92, 0.25) rgba(253, 180, 92, 0.25) #fff;
    background: rgba(253, 180, 92, 0.25);
        margin-bottom: -1px;
}

.nav-tabs .nav-link.color-red.active {
    border-color: rgba(231, 76, 60, 0.41) rgba(231, 76, 60, 0.41) #fff;
    background: rgba(235, 103, 86, 0.31);
        margin-bottom: -1px;
}

.nav-tabs .nav-link.color-yellow .badge-light {
    color: #f39c12;
    background-color: #00000014;
    font-size: 14px;
    padding: 4px 8px;
}

.nav-tabs .nav-link.color-red .badge-light {
    color: #e74c3c;
    background-color: rgba(231, 76, 60, 0.1411764705882353);
    font-size: 14px;
    padding: 4px 8px;
}

.caselist-des-section{
    width: 100%;
}

.caselist-des-box-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    z-index: 9;
    position: relative;
}

.caselist-des-box {
    padding: 5px;
    border: 1px solid #e7eaf1;
    margin-right: 10px;
}


.caselist-des-box p {
    margin: 0;
    font-size: 13px;
    line-height: 16px;
    margin-top: 5px;
    color: #848484;
}

.caselist-des-box  g [fill]{
    fill:#39558d;
}

.caselist-des-box:hover p {

    color: #39558d;
}



.caselist-des-section .main-step-ul{
    width: 500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    padding: 0px;
    margin: 10px 0px 0px 0px;
    position: relative;
}
.caselist-des-section .main-step-ul::before{
    content: '';
    width: 100%;
    height: 2px;
    display: block;
    background: #e1e1e1;
    position: absolute;
    z-index: -2;
}
.caselist-des-section .main-step-ul::after{
    content: '';
    height: 2px;
    display: block;
    background: #5fdb6a;
    position: absolute;
    z-index: -1;
}
.caselist-des-section .main-step-ul.step-1::after{
    width: 0%;
}
.caselist-des-section .main-step-ul.step-2::after{
    width: 50%;
}
.caselist-des-section .main-step-ul.step-3::after{
    width: 100%;
}
.caselist-des-section .main-step-ul li span{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0e0e0;
    color: #999;
    border-radius: 50px;
    border: 2px solid white;
    box-shadow: 0px 0px 5px #ccc;
    font-weight: bold;
}
.caselist-des-section .main-step-ul li.active span{
    background: #5fdb6a;
    box-shadow : 0px 0px 5px #5fdb6a;
    color: white;
}

#timeline .timeline-movement .timeline-item .timeline-panel:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: -20px;
    right: -26px;
    top: 6px;
    bottom: auto;
    border: 15px solid;
    border-color: transparent transparent white white;
}

ul.main-step-ul {
    visibility: hidden;
    opacity: 0;
}

.progress-view {
    position: relative;
}



ul.answer-list {
    padding: 0;
    padding-left: 15px;
}


ul.answer-list  li.message--list {
    margin-bottom: 13px;
}

p.chat-name {
    font-size: 13px;
    margin: 0;
}

ul.answer-list .chat-detail p.chat-message {
    margin-bottom: 0;
    padding: 2px 8px;
        color: #242a30;
    background: #eaeaea;
    display: inline-block;
}

ul.answer-list p.chat-message {
    background: #f7f7f7;
    display: inline-block;
    padding: 3px 10px;
    margin: 0;
}

ul.answer-list p.chat-message {
    background: #f7f7f7;
    display: inline-block;
    padding: 2px 8px;
    margin: 0;
}

label.view-progress {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    line-height: 38px;
    color: #39558d;
}

.compact-listing-row:hover ul.main-step-ul {
    visibility: visible;
    opacity: 1;
}

.compact-listing-row:hover label.view-progress{
    opacity: 0;
    visibility: hidden;
}


.prlist-ul {
    margin-bottom: 0;
    padding-left: 20px;
    max-height: 150px;
    overflow: auto;
    padding-left: 10px;
}

.pr-list {
    width: 60%;
}

span.light-text {
    opacity: 0.8;
    font-weight: normal;
}



.metrics-layout .full-page-sidebar.hidden-sidebar {
    min-width: 350px;
    max-width: 350px;
}

.metrics-layout .full-page-content-container {
    width: calc(100% - 350px);
    transition: all 0.5s;
}

.metrics-layout .hide-filter-option .full-page-content-container{
     width: calc(100% - 20px);
}

.metrics-layout .hide-filter-option.full-page-container.with-sidebar .full-page-sidebar {
    max-width: 20px !important;
    min-width: 0 !important;
}

.metrics-layout .bx--form-item {
    padding: 0;
}






/*//// metrics summary*/

.metrics-main-section .metrics--card .dashboard-services-back {
    position: absolute;
    top: 0;
    bottom: 0;
}


.metrics-main-section .metrics--card {
    margin-top: 15px;
}

.widget-content ul {
    margin: 0;
    padding: 10px 5px;
}

.widget-content a {
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    width: 100%;
}

.widget-content span.badge {
    font-size: 14px;
}


.dashboard-services-hover {
    position: absolute;
    top: 35px;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    transform: translatey(100%);
    transition: all 0.5s;
    padding: 10px 10px 10px 10px;
}

.metrics-main-section .metrics--card:hover .dashboard-services-hover{
transform: translatey(0%);
}

.metrics-main-section .metrics--card .table td, .metrics-main-section .metrics--card .table th {
    padding: 7px 0;
    font-size: 13px;
}


.metrics-main-section .metrics--card.border-with {
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    padding:0    10px;
    transition: all 0.5s;
    cursor: pointer;
    border-right: 1px solid #e0e0e0;
    margin-bottom: 0;
    box-shadow: 0 2px 0 rgba(90,97,105,.11), 0 4px 8px rgba(90,97,105,.12), 0 10px 10px rgba(90,97,105,.06), 0 7px 70px rgba(90,97,105,.1);
    background-color: #fff;
    border: none;
    /* border-radius: .625rem; */
        min-height: 150px;
}

.metrics-main-section .metrics--card.border-with table.table {
    margin: 0;
}

.metrics-main-section .metrics--card.border-with table.table th {
    border-top: 0px solid #dee2e6;
}



.dashboard-services-hover:before {
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    margin: auto;
    width: 10px;
    display: inline-block;
    content: "\F143";
    font: normal normal normal 24px/1 "Material Design Icons";
    transition: all 0.5s;
    color: #ccc;
}


.metrics-main-section .metrics--card:hover .dashboard-services-hover:before{
    visibility: hidden;
    opacity: 0;
}

/*.metrics-main-section .metrics--card:hover  .dashboard-services-front {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

.metrics-main-section .metrics--card:hover  .dashboard-services-back {
    visibility: visible;
    opacity: 1;
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
}*/

.metris-h-scroll {
    height: calc(100vh - 110px);
}


.title-box {
    padding: 10px;
    background: #f6f6f6;
    margin: 0 -10px;
    border-radius: 0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title-box h4.title-metrics {
    font-size: 16px;
}

.title-box h4.title-metrics span.counter {
    display: flex;
    width: 100%;
    font-size: 25px;
    align-items: center;
}

.title-box h4.title-metrics span.counter small {
    font-size: 14px;
    margin-right: 8px;
}

.open-close-graph {
    display: flex;
}

.open-close-graph p {
    font-size: 14px;
    margin: 0;
    text-align: right;
    /*padding: 0 15px;*/
    border-left: 1px solid #ccc;
}

.open-close-graph p:first-child {
    border-left: 0px solid #ccc;
    text-align: left;
}

.open-close-graph span.badge {
    font-size: 16px;
}

img.chart-img {
    display: block;
    margin: auto;
    max-width: 100%;
}

.open-close-graph span.text {
    margin-right: 7px;
    opacity: 0.8;
}


.metrics-main-section .metrics--card.border-with .subtitle-caselist {
    font-size: 13px;
    margin: 10px 0 15px 0;

    }


.cart-card-body {
   min-height: 238px !important;
    padding: 10px 0;
}

.dashboard-services-front .metrics-min-max .widget-content{
    top: 0;
}

.metrics-min-max {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: -14px;
}

.min-max-box p{
    font-size: 18px;
    margin: 0 0 5px 0;
}

.min-max-box p small {
    margin-right: 8px;
    font-size: 12px;
}

   p.min-p   small {
    color: #ff1f1f;
}

 p.max-p   small {
    color: #028940;
}


.mdl-tabs__tab-bar {
    justify-content: left;
}

.title-box {
    padding: 10px;
    background: #37474f;
    margin: 0 -10px;
    border-radius: 0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}



.square-card h5 {
    font-size: 14px;
    line-height: 29px;
    border-bottom: 1px solid #e0dede;
    margin-bottom: 10px;
    color: #888787;
}

p.square-text {
    color: #888888;
}

.t-down i.material-icons {
    color: red;
}

.t-up i.material-icons{
    color: #028940 !important
}

.open-pending-badges {
    align-items: center;
    display: flex;
}

.open-pending-badges p {
    font-size: 20px;
    line-height: 20px;
    margin-right: 15px;
    margin-bottom: 5px;
}

.open-pending-badges p span.text {
    margin-left: 4px;
    font-size: 13px;
}

h4.subtitle-metrics {
    font-size: 16px;
    font-size: 14px;
    line-height: 29px;
    margin-bottom: 10px;
    color: #000000;
}


.metric-card--main {
    align-items: center;
    background:#242a30;
    border-radius: 0;
    min-height: 150px;
    color: #fff;
    padding: 10px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: baseline;
    box-shadow: 0 2px 0 rgba(90,97,105,.11), 0 4px 8px rgba(90,97,105,.12), 0 10px 10px rgba(90,97,105,.06), 0 7px 70px rgba(90,97,105,.1);
}


.description-mat {
    width: 100%;
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

h4.counter-mat {
    font-size: 30px;
    width: 100%;
    text-align: center;
}

.description-mat span.counter {
    margin-left: 10px;
}


.description-mat ul {
    margin: 0;
    text-align: right;
    display: block;
    padding: 0;
    line-height: 16px;
}

.description-mat ul li {
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
        line-height: 20px;
}

p.title-mat {
    margin: 0;
    font-weight: 600;
    line-height: normal;
}


h4.counter-mat {
    font-size: 30px;
    margin: 10px 0;
}

.metric-card--main table.table {
    margin: 0;
}

.metric-card--main  .table td, .metric-card--main  .table th {
    padding: 2px 0;
    vertical-align: top;
    border-top: 0px solid #dee2e6;
}

.metric-card--main .table th {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
}


.metric-card--main.metrics-white {
    background: #fff;
    color:#515151;
}

.description-two-col{
    border-top: 1px solid #fcfcfc;
    padding-top: 10px;
}

.description-mat.description-two-col {
    justify-content: space-between;
    align-items: center;
}

.description-two-col ul:first-child {
    border-right: 1px solid white;
    padding-right: 15px;
    width: 50%;
    text-align: left;
}





/*// filter metrics*/

ul.mat-radio-selection {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}

ul.mat-radio-selection li {
    -ms-flex: none;
    flex: none;
    width: 50%;
}

ul.mat-radio-selection li  label{
    display: block;
}

.mat-radio-selection .mat-check-div {
    position: relative;
    background: #fff;
    border-radius: 6px;
    border: 2px solid #cecece;
    padding: 20px;
    margin: 10px;
    overflow: visible;
    cursor: pointer;
    transition: all .3s;
    text-transform: uppercase;
    font-size: 90%;
    color: #afafaf;
    display: block;
    text-align: center;
    padding: 10px 10px;
}

.mat-radio-selection .mat-check-div:hover {
    border-color: #999;
    color: #999;
}


span.mat-check-div span.mdi {
    display: block;
    margin: auto;
    width: 25px;
    margin-bottom: 5px;
}

ul.mat-radio-selection li  label  input {
    display: none;
}

ul.mat-radio-selection li  label  input:checked ~ .mat-check-div {
    border-color:#3f51b5;
    color:#3f51b5;
}


.em-btn .mdi {
    font-size: 18px;
    vertical-align: middle;
    line-height: normal;
    margin-right: 4px;
}


.mat-chart {
    margin: -10px;
    margin-top: -10px;
    width: calc(100% + 20px);
}

.mat-chart .img-fluid {
    max-width: 100%;
    height: auto;
    height: 110px;
    width: 100%;
}

.metrics-bars {
    overflow: hidden;
    padding: 0 4px;
}

.new-metrics-chart-box .card-title {
    text-transform: capitalize;
    font-weight: 500;
    /*margin-bottom: 5px;*/
}

.new-metrics-chart-box .metric-card--main .table td, .new-metrics-chart-box .metric-card--main .table th {
    padding: 8px 0;
    vertical-align: top;
    border-top: 0px solid #dee2e6;
}

.distribution-chart {
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    margin-top: 30px;
}

.distribution-chart  p {
    color: #9b9b9b !important;
    margin:4px 0 10px 0;
}

.distribution-chart .item {
    
    width: 45%;
}

.distribution-chart .item:first-child {
    border-right: 1px solid #cecece;
}

.new-metrics-chart-box .metric-card--main.metrics-white {
    min-height: 210px;
}

 i.mdi.mdi-arrow-up.mr-1 {
    font-size: 18px;
}

i.des-icon.material-icons {
    font-size: 18px;
    margin-right: 5px;
    position: relative;
    top: 3px;
}

.metrics-card-two {
    width: 100%;
    display: flex;
    align-items: center;
}

.metrics-card-two .mat-des {
    width: calc(50% - 10px);
    border-right: 1px solid lightgrey;
    padding-right: 10px;
}   

.metrics-card-two .pr-list {
    width: 50%;
}

.square-card {
    width: 100%;
}




/*///*/


/*employee detail section*/


.profile-detail-box {
    display: flex;
    align-items: center;
}

.profile-detail-box .profile-pic {
    width: 50px;
    height: 50px;
    box-shadow: none;
    border:1px solid  #ccc;
    margin-right: 10px;
}


.employee-detail-main-directory .employee-des .emp-name {
    font-weight: 500;
    margin: 0;
}

.employee-des p.emp-email.text-muted {
    margin: 0;
    text-align: left;
}

.full-page-small-detail-container {
    width: 0;
    /*visibility: hidden;
    overflow: hidden;*/
    transition: all 0.5s;
    max-width: 320px;
    min-width: 320px;
}



.employee-detail-header {
    background:#242a30;
    display: flex;
    align-items: center;
    padding: 12px;
    flex-direction: column;
}

.profile-top-view {
    display: flex;
    width: 100%;
}





.info-row .info-icon {
    margin-right: 12px;
    color: rgba(66, 71, 71, 0.54);
    display: none;
}

.full-page-container.employee-detail-main-directory.hide-filter-option .full-page-content-container{
     width: calc(100% - 420px) !important;
}

.full-page-container.employee-detail-main-directory  .full-page-content-container {
    width: calc(100% - 700px) !important;
}

.full-page-container.employee-detail-main-directory  .full-page-small-detail-container {
    width: 0;
    transition: all 0.5s;
    max-width: 320px;
    min-width: 400px;
    overflow: hidden;
}


.employee-detail-card.perfactscrollbar.ps {
    max-height: calc(100vh - 230px);
}


.main-popup--detail-box.caselist-detail {
    border-right: 0px solid #848383;
    padding: 5px 00px 0 0;
}


.main-popup--detail-box.caselist-detail span.job-title{

}



.employee-detail-main-directory .buttons--column ul {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #d8d5d5;
    padding-bottom: 15px;
    align-items: center;
    justify-content: center;
    margin-left: 0 !important;
}

.employee-detail-main-directory .buttons--column.mb-3.mt-3 ul li{
    width: 110px;
}


.employee-detail-main-directory .buttons--column ul a {
    background: transparent;
    color:#242a30;
    box-shadow: none;
}

.employee-detail-main-directory .buttons--column ul a:hover {
    color: #fff !important;
}


.mat-des-row {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #e6e6e6;
    padding-top: 10px;
}

.metrics-case-detail .mat-des p.title-mat {
    font-size: 14px;
    font-weight: 500;
}

.metrics-case-detail .mat-des {
    padding-top: 10px;
    text-align: left;
    border-right: 1px solid #e2e2e2;
    width: calc(50% - 10px);
    margin: 0 3px;
    padding: 6px;
}

.metrics-case-detail .mat-des:last-child{
    border-right: 0;
}

.metrics-case-detail h4.counter-mat {
    text-align: left;
    margin-bottom: 5px;
}

.metrics-case-detail .description-mat {
    justify-content: end;
    display: block;
}

.metrics-case-detail .description-mat ul {
    text-align: left;
    display: flex;
}

.metrics-case-detail .description-mat ul li:first-child{
    margin: 0;
}

.metrics-case-detail .description-mat ul li{
    margin-left: 10px;
}


.metrics-case-detail .description-mat span.counter {
    margin-left: 8px;
}

.metrics-case-detail .pr-list {
    width: auto;
}

.metrics-case-detail p.title-mat {
    margin: 0;
    font-size: 18px;
}

.metrics-case-detail {
    padding: 10px 0;
}

.metrics-case-detail .prlist-ul {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.metrics-case-detail .mat-des-row h4.counter-mat {
    font-size: 24px;
    margin-top: 15px;
    margin-bottom: 10px;
}


.metrics-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 8px;
}

.metrics-detail-header  .description-mat {
    margin-left: auto;
    width: auto;
}

.metrics-case-detail .metrics-detail-header .description-mat ul li {
    margin-left: 10px;
    border: 1px solid #efefef;
    padding: 2px 8px;
}

div.chart-con canvas {
    top: -55px !important;
}

div#container8a {
    overflow: hidden;
    margin-top: 6px;
}

.chart-div.height-chart {
    height: 220px;
    overflow: hidden;
}

.metrics-case-detail .mat-des-row .description-mat ul li {
    font-size: 14px;
}
.etc-chart {
    height: 129px;
    display: flex;
    align-items: center;
    overflow: hidden;
}


.etc-chart canvas {
    top: 29px !important;
    height: 214px !important;
    /*width: 291px !important;*/
    /*left: -29px !important;*/
}


.main-details-model-cards .card.closed-acc {
    overflow: visible;
}

.main-clientsetup-section  .mdl-tabs__tab {
    padding: 0 8px;
    margin-right: 10px;
    text-transform: capitalize;
}

.main-clientsetup-section {
    width: 100%;
}

.main-clientsetup-section  .workspace-dashboard-cards-main {
    padding-bottom: 10px;
}


/*ask questions*/


/**************Who View Your Profile CSS Start Here****************/
#timeline {
      list-style: none;
    position: relative;
    margin: 50px auto;
    width: 96%;
}
#timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 2px;
  background-color: #909090;
  left: 50%;
  margin-left: -1.5px;
}
#timeline .clearFix {
  clear: both;
  height: 0;
}
#timeline .timeline-badge {
    color: #fff;
    width: 25px;
    height: 25px;
    font-size: 1.2em;
    text-align: center;
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -13px;
    background-color: #fff;
    z-index: 6;
    border-radius: 50%;
    border: 2px solid #909090;
}
#timeline .timeline-badge span.timeline-balloon-date-day {
  font-size: 1.4em;
}
#timeline .timeline-badge span.timeline-balloon-date-month {
  font-size: .7em;
  position: relative;
  top: -10px;
}
#timeline .timeline-badge.timeline-filter-movement {
  background-color: #ffffff;
  font-size: 1.7em;
  height: 35px;
  margin-left: -18px;
  width: 35px;
  top: 40px;
}
#timeline .timeline-badge.timeline-filter-movement a span {
  color: #4997cd;
  font-size: 1.3em;
  top: -1px;
}
#timeline .timeline-badge.timeline-future-movement {
    background-color: #ffffff;
    height: auto;
    width: auto;
    font-size: 1.7em;
    top: -16px;
    margin-left: -60px;
    border: 2px solid #909090;
    padding: 14px;
    border-radius: 0;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
#timeline .timeline-badge.timeline-future-movement p {
    color: #242a30;
    font-weight: 500;
    margin: 0;
}
#timeline .timeline-badge.timeline-future-movement a span {
  color: #4997cd;
  font-size: .9em;
  top: 0;
  left: 1px;
}
#timeline .timeline-movement {
/*   border-bottom: dashed 1px #4997cd; */
  position: relative;
  margin-bottom: 10rem;
      margin-bottom: 3rem;
}
#timeline .timeline-movement.timeline-movement-top {
    height: 60px;
    margin-bottom: 70px;
}
/* #timeline .timeline-movement .timeline-item {
  padding: 20px 0;
} */
#timeline .timeline-movement .timeline-item .timeline-panel {
    /* border: 1px solid #d4d4d4; */
    border-radius: 0;
    background-color: #FFFFFF;
    color: #666;
    padding: 10px;
    position: relative;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
#timeline .timeline-movement .timeline-item .timeline-panel .timeline-panel-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #dedede;
    margin-bottom: 15px;
}

#timeline .timeline-movement .timeline-item .timeline-panel.credits  .timeline-panel-ul .lefting-wrap {
    float: right;
    width: 30%;
    height: 130px;
    background-color: floralwhite;
}
#timeline .timeline-movement .timeline-item .timeline-panel.credits  .timeline-panel-ul .righting-wrap {
    float: left;
    width: 100%;
    height: auto;
    padding: 0 12px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul li {
  color: #666;
  width: 100%;
}
#timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul li p {
    margin: 0;
}
.clear {
    clear:both;
}
#timeline .timeline-movement .timeline-item .timeline-panel.debits  .timeline-panel-ul .lefting-wrap {
    float: left;
    width: 30%;
    height: 130px;
    background-color: floralwhite;
}
#timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul .righting-wrap {
    float: right;
    width: 100%;
    padding: 0 0 0 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

 #timeline .timeline-right.timeline-movement .timeline-item .timeline-panel:before{
    left: -26px;
    right: unset;
    transform: scale(-1);
}

 #timeline .timeline-right.timeline-movement  p {
    margin-bottom: 0;
}

#timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul li.img-wraping {
    width: 100%;
}
#timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul li.img-wraping a img, #timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul li.img-wraping a img {
    width: 100%;
    height: 130px;
}
#timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul li {
    color: #666;
    width: 100%;
}
#timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul li a.importo {
    color: #242a30;
    font-size: 1.3em;
    font-weight: 400;
}
#timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul {
  text-align: left;
}
#timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul a.importo {
  color: #636363;
  font-size: 1.3em;
  font-weight: 500;
}



h4.main-title {
    font-size: 15px;
}

button.add-new-btn-pill.btn.btn-sm.btn-white {
    align-self: center;
    margin-right: 10px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #dedede;
    color: #424747;
    font-weight: 500;
    box-shadow: 0 0px 1px -2px rgba(0, 0, 0, .2), 0 0px 4px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    border-radius: 4px;
}

.no-records-btn-big {
    min-height: 150px;
    text-align: center;
    background: #e5e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 1px dashed #c3c3c3;
    cursor: pointer;
}


.no-records-btn-big .btn-white{
    border-radius: 0 !important;
}

.notification-tab-cards button.delee-btn {
    color: #d93025;
    background: rgba(255, 0, 0, 0.058823529411764705);
    width: 34px;
    height: 34px;
    font-size: 14px;
    min-width: 28px;
}

.notification-tab-cards button.delee-btn  .mdi {
    font-size: 16px;
    vertical-align: middle;
}

.notification-tab-cards-title {
    display: flex;
    padding: 15px 15px 15px 15px;
    width: 100%;
    justify-content: space-between;
}

.notification-tab-cards ul.nav.nav-tabs {
    border: none;
}

.notification-tab-cards ul.nav.nav-tabs .mdi {
    font-size: 19px;
    margin-left: 7px;
}

.notification-tab-cards ul.nav.nav-tabs .mdi {
    color: #a0a0a0;
}


.notification-tab-cards ul.nav.nav-tabs a.active.show .mdi {
    color: #39558d;
    font-weight: 600;
}

.detailed-card .notification-tab-cards h5.boxed-title {
    padding: 0;
    line-height: 22px;
}

.notification-tab-cards .table td{
    padding: 5px 8px;
    vertical-align: middle;
    cursor: pointer;
}

 .notification-tab-cards .table th{
    padding: 10px;
 }

.notification-tab-cards table.table {
    margin: 0;
}


/*// modal tab*/


.modal-tab {
    position: fixed;
    right: 0;
    z-index: 99999;
    text-orientation: sideways;
    background: transparent;
    top: 50px;
    width: 100%;
    background: transparent;
    max-width: 1299px;
}

.modal-tab ul{
    margin: 0;
    display: flex;
    background: #fff;
    border-top: 1px solid #efeaea;
    padding: 0 10px;
}

.modal-tab ul li a{
    background: #dedede;
    padding: 4px 15px;
    display: inline-block;
    border-radius: 6px 6px 0 0;
    margin-top: 6px;
    margin-right: 10px;
    opacity: 0.6;
}

.modal-tab ul li a.active{
    opacity: 1;
    background: #242a30;
    color: #fff;
}

.modal-tab ul li a .material-icons {
    font-size: 15px;
    font-weight: 600;
    position: relative;
    top: -1px;
}



/*message question section*/

ul.suggestion-list {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

ul.suggestion-list li a {
    border: 1px solid #d4d4d4;
    margin: 8px 5px;
    display: block;
    padding: 3px 10px;
}

ul.suggestion-list li a:hover{
    background: #eaeaea;
}

ul.suggestion-list li:first-child a {
    margin-left: 0;
}



.text-box {
    position: relative;
}

.text-box input.text-control {
    min-height: 45px;
    border: 1px solid #cccbcb;
    width: 100%;
    padding-left: 13px;
}

button.send-btn {
    position: absolute;
    background: none;
    border: none;
    top: 5px;
    right: 4px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
}

button.send-btn i{
    color: #828282;
}

button.send-btn:hover{
    background: #eaeaea;
}

.write-message {
    margin-top: 18px;
}

ul.answer-list li.message--list , .righting-wrap{
    position: relative;
    padding-left: 40px !important;
    padding-right: 0 !important;
}

ul.answer-list li.message--list:before , .righting-wrap:before{
    content: "A";
    width: 33px;
    height: 33px;
    background: transparent;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    font-weight: 500;
    border: 1px solid #b9b9b9;
}

.righting-wrap:before{
     content: "Q";
     top: 7px;
}



.modal-tabs-vertical {
    position: absolute;
    right: 100%;
    background: #ffffff;
    z-index: 1;
    height: 100%;
    width: 80px;
    text-align: center;
    border: 1px solid #e4e0e0;
}

ul.tabs-ul {
    padding:15px 0;
    margin-bottom: 0;
}

ul.tabs-ul li {
    width: 62px;
    min-height: 62px;
    background: transparent;
    border-radius: 50px;
    z-index: -1;
    margin: auto;
    padding: 0 5px;
    border: 1px solid transparent;
}

 ul.tabs-ul li.active-acc {
    border: 1px solid #37474f;
}



ul.tabs-ul a {
    width: 50px;
    height: 50px;
    position: relative;
    border: 1px solid #e5e5e5;
    display: block;
    margin: 15px auto;
    border-radius: 50%;
    line-height: 47px;
    font-size: 17px;
}

ul.tabs-ul a:hover .badge{
    visibility: visible;
    opacity: 1;
}

ul.tabs-ul  a i.material-icons {
    position: absolute;
    background: #fff;
    font-size: 12px;
    border-radius: 50%;
    text-align: center;
    padding: 2px;
    text-indent: 1px;
    width: 18px;
    height: 18px;
    border: 1px solid #e5e5e5;
    color: #ff0000 !important;
    right: -6px;
}

ul.tabs-ul .badge {
    position: absolute;
    bottom: 0;
    background: #e2e2e2;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    line-height: 46px;
    text-align: center;
    right: -1px;
    font-size: 15px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;
}


ul.tabs-ul li a.active {
    background: #37474f;
    box-shadow: 1px 1px 9px -5px rgba(0, 0, 0, 0.65);
    border: 3px solid #fff;
    color: #fff;
}

ul.tabs-ul li  a{
        font-size: 14px;
}

ul.tabs-ul li.active-acc a i.material-icons{
    opacity: 0;
    visibility: hidden;
}

ul.tabs-ul li.active-acc  a:hover i.material-icons , ul.tabs-ul li.active-acc:hover a.active i.material-icons{
    opacity: 1;
    visibility: visible;
}


ul.tabs-ul li .collapse a.active {
    background: #e5e5e5;
    color: #37474f;
    box-shadow: none;
    border: 1px solid #d4d3d3;
    font-size: 14px;
}










/*/// new Client setup*/

.main-clientsetup-section {
    width: 100%;
    height: calc(100vh - 50px);
    overflow: auto;
}


.main-clientsetup-section h5.card-title {
    background: #242a30;
    color: #fff;
    text-align: left;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 400;
}


.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid rgba(0,0,0,.125);
    background: initial;
    color: initial;
}





.workspace-main-title.workspace-title .dropdown.action-dropdown {
    margin-left: auto;
}


h5.workspace-title.workspace-main-title.sub-main {
    background: #6d6d6d;
}

h5.workspace-title.workspace-main-title.sub-main-sub {
    background: #484848;
}

h5.workspace-title.workspace-main-title span.mdi.mdi-dots-vertical {
    color: #e8e5e5;
}



.get-started-div {
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

img.started-image {
    max-width: 108px;
    opacity: 0.9;
    margin-bottom: 15px;
}

h3.get-started-title {
    font-size: 16px;
}
.get-started-div p {
    margin-top: 8px;
}

button.add-new-btn-pill.btn.btn-sm.btn-white {
    margin: 0;
}



.started-center-div {
    width: 100%;
    max-width: 350px;
}

.started-center-div button.add-new-btn-pill.btn.btn-sm.btn-white {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: #4d6599;
    color: #fff;
    padding: 6px 10px;
    height: 50px;
    border-radius: 50%;
    width: 50px;
}

img.arrow-img {
    margin: 0;
    display: block;
    max-width: 84px;
    transform: rotate(-9deg);
    margin: auto;
    margin-bottom: 12px;
}

.started-center-div button.add-new-btn-pill {
    margin: -70px !important;
    margin-left: 30px !important;
}

img.started-image {
    max-width: 108px;
    opacity: 0.9;
    margin-bottom: 15px;
}



.modal.fade.level-popup .modal-dialog {
    max-width: 600px;
}

.modal.fade.level-popup p {
    margin: 0;
    margin-top: 7px;
    font-size: 15px;
    font-weight: 500;
    color: #818181;
}

.modal.fade.level-popup .modal-header {
    min-height: 55px;
}

.modal.fade.level-popup .modal-body {
    max-height: calc(100% - 180px);
}

.portlet-header.workspace-title.workspace-main-title {
    background: #39558d;
}


ul.color-select-list {
    padding: 10px;
    margin: 0;
}

ul.color-select-list li{
    margin-right: 6px;
    display: inline-block;
}

ul.color-select-list input[type="radio"] {
    display: none;
}

ul.color-select-list label.color-select-label {
    width: 20px;
    height: 20px;
    background: #ffffff;
    margin-right: 5px;
    box-shadow: 0px 0px 6px -2px #000000f0;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
}

ul.color-select-list input:checked ~ label{
    border: 2px solid #fff;
}

.ui-widget-header .ui-icon {
    background-image: url(../images/icons/ui-icons_444444_256x240.png);
}

.layout-main-card.with--sidebar {
    display: flex;
    justify-content: space-between;
    flex: 1 1;
}

.main-slider-content {
    width: 100%;
}

.draggable-list {
    height: calc(100% - 15px);
    box-shadow: 0px 0px 5px -4px #000;
    margin-right: 15px;
    width: 100%;
    width: 330px;
        padding: 5px 15px;
}

.layout-main-card.with--sidebar  .column {
    width: 50% !important;
    float: left;
    padding-bottom: 100px;
}


.service-box-body ul {
    list-style: none;
    padding: 10px 0 0 0;
    margin: 0;
}

.service-box-body ul li {
    border: 1px dashed #ccc;
    margin-bottom: 10px;
    padding: 10px;
    cursor: pointer;
        max-width: 350px;
}

.service-box-body ul li:hover{
    border-color: #888;
}

.service-box-body ul li p{
    margin: 0;
}

p.location-title {
    font-weight: 500;
    margin-bottom: 5px !important;
}

.service-box-body ul li p.address {
    color: #737272;
}

.service-box-body ul li p.address  .mdi {
    font-size: 18px;
}




.location-added .location-box.pills-added p.address {
    display: none;
}


.location-added ul.gallery.ui-helper-reset.pills-list li.ui-draggable.ui-draggable-handle , .location-added ul.gallery2.ui-helper-reset.pills-list li.ui-draggable.ui-draggable-handle{
    position: relative;
    background: white;
    margin-bottom: 15px;
    display: inline-block !important;
    width: auto !important;
    margin-right: 15px;
    padding: 5px 15px;
    box-shadow: 0px 0px 5px -4px #000;
        padding-right: 40px;
        cursor: pointer;
}

.location-added ul.gallery.ui-helper-reset.pills-list li.ui-draggable.ui-draggable-handle:hover , .location-added ul.gallery2.ui-helper-reset.pills-list li.ui-draggable.ui-draggable-handle:hover {
    background: #efe8e8;
}

.location-added ul.gallery.ui-helper-reset.pills-list li.ui-draggable.ui-draggable-handle a.ui-icon.ui-icon-refresh ,.location-added ul.gallery2.ui-helper-reset.pills-list li.ui-draggable.ui-draggable-handle a.ui-icon.ui-icon-refresh {
    position: absolute;
    right: 11px;
    top: 14px;
}


ul.ui-helper-reset.pills-list {
    min-height: 113px;
}


div#no-record-02 {
    margin-top: 15px;
}



.ui-droppable-active{
    opacity: 0.3;
     background: #f7f7f759 !important;
}


.regulation-box p {
    margin: 0;
}

div#trash2 {
    margin-top: 20px;
}


span.ui-icon.ui-icon-minusthick.portlet-toggle {
    position: absolute;
    right: 9px;
    top: 16px;
}

p.location-title {
    font-weight: 500;
    margin-bottom: 0 !important;
}


.ui-widget {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1em;
    font-family: 'Roboto', 'Helvetica', sans-serif;
    /* font-family: 'Poppins', sans-serif; */
    font-size: 14px;
}


.regulation-box p {
    margin: 0;
    font-weight: 500;
}


.check-td {
    display: none;
}


.second-btn button.btn.btn-white-default {
    display: none;
}


.second-btn .view-column-toggle.mr-2.d-none {
    display: block !important;
}

.second-btn .view-column-toggle.mr-2.d-none  .column-toggle{
display: block;
}



.injury-report--main .form-group {
    margin-bottom: 20px;
    max-width: 800px;
}

.input-div {
    max-width: 650px;
}

.injury-report--main  h4.main-title {
    font-size: 18px;
    color: #39558d;
    margin-top: -10px;
}

.injury-report--main label {
    font-weight: 500;
    color: #5f5e5e;
}

.injury-report--main .strong-content.form-group label{
font-weight: 400;
}

.injury-report--main b , .injury-report--main strong{
    font-weight: 500;
    color: #000;
}

/*--thank you pop starts here--*/
.thank-you-pop{
    width:100%;
    padding:20px;
    text-align:center;
}
.thank-you-pop img{
    width:76px;
    height:auto;
    margin:0 auto;
    display:block;
    margin-bottom:25px;
}

.thank-you-pop h1{
    font-size: 42px;
    margin-bottom: 25px;
    color:#5C5C5C;
}
.thank-you-pop p{
    font-size: 20px;
    margin-bottom: 27px;
    color:#5C5C5C;
}
.thank-you-pop h3.cupon-pop{
    font-size: 25px;
    margin-bottom: 40px;
    color:#222;
    display:inline-block;
    text-align:center;
    padding:10px 20px;
    border:2px dashed #222;
    clear:both;
    font-weight:normal;
}
.thank-you-pop h3.cupon-pop span{
    color:#03A9F4;
}
.thank-you-pop a{
    display: inline-block;
    margin: 0 auto;
    padding: 9px 20px;
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    background-color: #8BC34A;
    border-radius: 17px;
}
.thank-you-pop a i{
    margin-right:5px;
    color:#fff;
}
#ignismyModal .modal-header{
    border:0px;
}
/*--thank you pop ends here--*/


.modal-header .close {
    border-radius: 50%;
}




/*schedule-appointment*/



.schedule-appointment-main {
    display: flex;
    width: 100%;
}

.scheduled-appointment-inner {
    display: flex;
    min-height: 100%;
}

.scheduled-appointment--col {
    min-width: 200px;
}

.scheduled-appointment--col.scheduled-appointment-tabs-content{
    min-width: 350px;
}

.scheduled-appointment--col.scheduled-appointment-tabs {
    background-color: #eaeaea;
}



.scheduled-appointment--col .nav-pills .nav-link.active, .scheduled-appointment--col .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #f6f6f6;
    border-radius: 0;
    color: #000;
}


.Appointment-tab-content {
    padding: 15px;
}

.Appointment-tab-content-inner {
    max-height: calc(100vh - 115px);
    margin: 0 -15px;
    padding: 0 15px;
}

p.Appointment-label {
    margin-bottom: 0;
    font-weight: 600;
}


.pickupProvider ul.mat-radio-selection {
    display: block;
    width: 100%;
}

.pickupProvider ul.mat-radio-selection li {
    width: 100%;
}

.pickupProvider .mat-radio-selection .mat-check-div {
    display: flex;
    width: 100%;
    margin-left: 0;
    font-weight: 500;
}

.pickupProvider span.mat-check-div span.mdi {
    margin: 0;
    margin-right: 8px;
}



.main--login {
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    overflow: auto;
    max-height: 100vh;
    align-items: center;
    justify-content: center;
        background-image: url(../images/loginbg.png);
    background-size: cover;

}

.login-form {
    -webkit-border-radius: 8px;
    border-radius: 8px;
    border: 1px solid #dadce0;
    display: block;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin: 0 auto;
    min-height: 0;
    -webkit-transition: .2s;
    transition: .2s;
    padding: 48px 29px 36px;
    width: 450px;
    position: relative;
    overflow: hidden;
    min-height: 500px;
    background-color: #fff;
}

.link {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: #1a73e8;
    display: inline-block;
    font-weight: 500;
    letter-spacing: .25px;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    font-size: inherit;
    outline: 0;
    padding: 0;
    text-align: left;
}

.loginn-header {
    text-align: left;
    color: #202124;
}

.loginn-header h4 {
    margin: 10px 0;
}

.loginn-header img {
    width: 80px;
}

.loginn-header p {
    font-size: 15px;
}


.other-option-message {
    margin: 25px 0;
}


button.btn.btn-submit {
    background: #1a73e8;
    color: #fff;
    padding: 5px 26px;
}

.login-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0 0 0;
}




.pure-material-textfield-outlined {
    width: 100%;
    position: relative;
}

/* Input, Textarea */
.pure-material-textfield-outlined > input,
.pure-material-textfield-outlined > textarea {
            width: 100%;
    border: 1px solid #dadce0;
    outline: none;
    border-radius: 4px;
    color: #202124;
    font-size: 16px;
    margin: 1px 1px 0 1px;
    padding: 13px 15px;
    z-index: 1;
    font-size: 18px;
}

/* Span */
.pure-material-textfield-outlined > input + span, .pure-material-textfield-outlined > textarea + span {
    position: absolute;
    top: 17px;
    left: 16px;
    background: #fff;
    bottom: 17px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #80868b;
    font-size: 16px;
    font-weight: 400;
    left: 3px;
    max-width: -webkit-calc(100% - (2*8px));
    max-width: calc(100% - (2*8px));
    overflow: hidden;
    padding: 0 8px;
    text-overflow: ellipsis;
    -webkit-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
    transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
    white-space: nowrap;
    width: auto;
    z-index: 1;
    -webkit-transform: scale(.75) translateY(-39px);
    transform: scale(0.75) translateY(-36px);
     
}



/* Hover */
.pure-material-textfield-outlined:hover > input,
.pure-material-textfield-outlined:hover > textarea {
    
}



.pure-material-textfield-outlined > input:not(:focus):placeholder-shown + span {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    color: #9e9e9e !important;
}



/* Focus */
.pure-material-textfield-outlined > input:focus,
.pure-material-textfield-outlined > textarea:focus {
   border:2px solid #1a73e8;
}

.pure-material-textfield-outlined > input:focus + span,
.pure-material-textfield-outlined > textarea:focus + span {
    color: #1a73e8 !important;
       font-weight: 500;
}



.pure-material-textfield-outlined > input:disabled:placeholder-shown,
.pure-material-textfield-outlined > input:disabled:placeholder-shown + span,
.pure-material-textfield-outlined > textarea:disabled:placeholder-shown,
.pure-material-textfield-outlined > textarea:disabled:placeholder-shown + span {
    -webkit-transform: scale(.75) translateY(-39px);
    transform: scale(.75) translateY(-39px);
    color: red !important;
}


/*is-invalid*/
.is-invalid.pure-material-textfield-outlined > input{
    border:2px solid #d93025 !important;
}

.is-invalid.pure-material-textfield-outlined > input + span{
        color: #d93025 !important;
    font-weight: 500;
}

.invalid.error {
    color: #d93025 !important;
    font-weight: 500;
    padding-left: 22px;
    background-image: url(../images/error.png);
    background-repeat: no-repeat;
    background-size: 15px;
    margin-bottom: 5px;
    display: block;
    background-position: 1px;
    font-size: 13px;
}

.is-valid.pure-material-textfield-outlined > input{
    border:2px solid #00a65a !important;
}

.is-valid.pure-material-textfield-outlined > input + span{
    color: #00a65a !important;
}

.valid.error {
    color: #00a65a !important;
}



.is-warning.pure-material-textfield-outlined > input{
    border:2px solid #ff8800 !important;
}

.is-warning.pure-material-textfield-outlined > input + span{
    color: #ff8800 !important;
}

.warning.error {
    color: #ff8800 !important;
}
.password-strenth-status {
    margin-bottom: 20px;
}


.password-strenth-status span {
    font-weight: 500;
    font-size: 13px;
}

.password-strenth-status span.short {
    color: #d93025;
}
.password-strenth-status span.weak {
    color: #d93025;
}
.password-strenth-status span.good {
    color:#ff8800;
}
.password-strenth-status span.strong {
    color: #00a65a;
}



.form-col {
    margin-bottom: 10px;
}




/* Progress Bar */
.progress {
  position: relative;
  height: 5px;
  display: block;
  width: 100%;
  background-color: #dcebff;
  border-radius: 2px;
  background-clip: padding-box;
  margin: 0.5rem 0 1rem 0;
  overflow: hidden; }
  .progress .determinate {
    position: absolute;
    background-color: inherit;
    top: 0;
    bottom: 0;
    background-color: #26a69a;
    transition: width .3s linear; }
  .progress .indeterminate {
    background-color: #1a73e8; }
    .progress .indeterminate:before {
      content: '';
      position: absolute;
      background-color: inherit;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
              animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
    .progress .indeterminate:after {
      content: '';
      position: absolute;
      background-color: inherit;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
              animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      -webkit-animation-delay: 1.15s;
              animation-delay: 1.15s; }

@-webkit-keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%; }
  60% {
    left: 100%;
    right: -90%; }
  100% {
    left: 100%;
    right: -90%; } }
@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%; }
  60% {
    left: 100%;
    right: -90%; }
  100% {
    left: 100%;
    right: -90%; } }
@-webkit-keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%; }
  60% {
    left: 107%;
    right: -8%; }
  100% {
    left: 107%;
    right: -8%; } }
@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%; }
  60% {
    left: 107%;
    right: -8%; }
  100% {
    left: 107%;
    right: -8%; } }


    .loader {
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
}



button.username--btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    color: #525252;
    background: #efefef;
    border: 1px solid #d8d8d8;
    border-radius: 20px;
    padding: 4px 8px;
    margin-bottom: 38px;
    cursor: pointer;
    font-size: 14px;
        font-weight: 500;
}

svg.stUf5b:first-child {
    margin-right: 4px;
}

svg.stUf5b:last-child {
    margin-left: 4px;
}



.verification--img {
    background-image: -webkit-linear-gradient(to bottom,rgba(233,233,233,0) 0%,rgba(233,233,233,0) 62.22%,rgba(233,233,233,1) 40.22%,rgba(233,233,233,0) 100%);
    background-image: linear-gradient(to bottom,rgba(233,233,233,0) 0%,rgba(233,233,233,0) 62.22%,rgba(233,233,233,1) 40.22%,rgba(233,233,233,0) 100%);
    height: 100%;
    left: 0;
    overflow: hidden;
    margin: 0 -40px;
    margin-bottom: 10px;
}


.verification-description {
    text-align: left;
    font-size: 13px;
    margin-bottom: 20px;
}


.verification-description h5.title-v {
    font-size: 16px;
}

.loginn-header .verification-description  p {
    font-size: 14px;
}


.success-message {
    text-align: center;
}


.success-message img {
    width: 67px;
    margin-bottom: 15px;
}


.success-message strong {
    font-weight: 600;
}