/* Contact app specific styles */
.contact-col-wrap .cc-left {
  width: 25%;
  min-width: 25%;
  position: relative;
  margin-right: 40px;
  padding-right: 40px;
  border-right: 1px solid rgb(0 0 0 / 30%);
}

.contact-col-wrap .cc-right {
  flex: 1;
}

.cc-box-grid.col-3 > div:nth-child(3n + 1) {
  clear: left;
}

.cc-box {
  position: relative; 
  background-color: #fff;
  box-shadow: 1px 2px 9px rgb(0 0 0 / 15%);
}

.dark-mode .cc-box {
  position: relative;
  background-color: var(--dark-secondary-color);
  box-shadow: 1px 2px 9px rgb(0 0 0 / 15%);
}

.cc-box .cc-box-content {
  padding: 20px;
}

.cc-b-head a {
  color: inherit;
}

.cc-b-head a:hover {
  color: var(--tertiary-color);
}

.cc-b-fields .hidden {
  display: none;
}

.cc-box .cc-b-image {
  height: 200px;
  overflow: hidden;
}

.cc-box .cc-b-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  position: relative;
  z-index: 1;
}

.cc-bh-title .cc-bh-role {
  position: relative;
  font-size: 13px;
  font-weight: 400;
  padding-left: 7px;
  margin-left: 5px;
}

.cc-bh-title .cc-bh-role:before {
  position: absolute;
  content: "";
  left: 0;
  top: -4px;
  height: 20px;
  width: 1px;
  background-color: var(--headings-color);
}

.cc-box .cc-b-cta {
  padding-right: 40%;
}

.cc-b-cta .cc-bc-item {
  border-bottom: 1px solid rgba(77, 81, 86, 0.3);
  padding-bottom: 5px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
}

.cc-b-cta .cc-bc-item > a {
  color: inherit;
  display: block;
  line-height: 1;
}

.cc-b-cta .cc-bc-item > a:hover {
  color: var(--tertiary-color);
}

.cc-bc-item .cc-bci-icon {
  display: inline-block;
  width: 26px;
}

.cc-b-tags .cc-bt-tag {
  display: inline-block;
  background-color: #ededed;
  border-radius: 2px;
  padding: 5px 8px;
  font-size: 14px;
  line-height: 1;
  margin-right: 5px;
  margin-bottom: 5px;
}

.cc-b-tags .cc-bt-tag .cc-bt-icon {
  margin-right: 5px;
}

.cc-no-results {
  display: flex;
  justify-content: center;
  height: 500px;
  width: 100%;
  align-items: center;
  flex-direction: column;
}

.cc-no-results .cc-no-icon {
  font-size: 50px;
  color: #cbcbcb;
}

.cc-no-results .cc-no-icon-container {
  background: var(--Senary-color);
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  border: 1px solid var(--Senary-color);
}

.dark-mode .cc-no-results .cc-no-icon{
  font-size: 50px;
  color: var(--secondary-color);
}

.dark-mode .cc-no-results .cc-no-icon-container {
  background: #555555;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  border: 1px solid #efefef;
}

.cc-no-results .cc-no-header {
  font-size: 22px;
  margin-top: 10px;
  font-weight: 500;
}

.cc-no-results .cc-no-desc {
  font-size: 16px;
  color: #d3d3d3;
  font-weight: 300;
}

.cc-as-image-icon {
  filter: drop-shadow(1px 2px 9px rgba(0, 121, 192, 0.15));
  border: 0.001em solid #e4dfdf;
  border-radius: 50px;
  height: 40px;
  justify-content: center;
  overflow: hidden;
  margin-right: 5px;
  width: 40px;
}

.cc-as-head-txt {
  font-size: 15px;
  font-weight: 500;
}
.cc-as-occu-txt {
  font-size: 12px;
}
.cc-as-container {
  min-height: 300px;
  max-height: 350px;
  overflow-x: auto;
}

.cc-as-card {
  border-bottom: 1px solid #d5d5d5;
  padding: 5px 0;
}
.dark-mode .cc-as-card {
  background-color: #2f2f2f;
}
.light-mode .cc-as-card{
  
}
.cc-as-image-icon {
  background-size: cover;
  background-position: center;
}
.cc-as-card:hover {
  background-color: rgb(223 223 223 / 28%);
  cursor: pointer;
}
.light-mode .cc-as-card:hover {
  background-color: rgb(223 223 223 / 28%);
  cursor: pointer;
}
.dark-mode .cc-as-card:hover {
  background-color: rgb(28 28 28 / 28%);
  cursor: pointer;
}
.as-pop {
  top: 500px !important;
}
.cc-as-selected {
  background-color: #fbfbfb;
}

.dark-mode .cc-as-selected {
  background-color: #272727;
}

.light-mode .cc-as-selected {
  background-color: #fbfbfb;
}

.dark-mode .cc-as-text-company {
  color: #00b6ff;
}

.light-mode .cc-as-text-company {
  color: #00729f
}

.cc-tabs {
  margin-top: -30px;
}

.cc-desc {
  text-overflow: ellipsis;
}

.cc-nav .cc-nav-item {
  padding: 10px 15px;
  line-height: 1;
  color: white;
  position: relative;
  display: inline-block;
  cursor: pointer;
  background-color: var(--dark-senary-color);
}
.dark-mode .cc-nav .cc-nav-item {
  background-color: #515151;
  color: #d3d3d3;;
}
.light-mode .cc-nav .cc-nav-item {
  background-color: #ffffff;
  color: #7f7676;
}
.cc-content-tabs .cc-nav {
  margin-bottom: 25px;
  border-bottom: 1px solid var(--dark-senary-color);
}


.cc-nav .cc-nav-item.active {
  background-color: #242424;
  color: white;
}

.dark-mode .cc-nav .cc-nav-item.active {
  background-color: #515151;
  color: white;
}


.light-mode .cc-nav .cc-nav-item.active {
  background-color: #ffffff;
  color: black;
}

.dark-mode .cc-nav .cc-nav-item:hover:before,
.dark-mode .cc-nav .cc-nav-item.active:before {
  background-color: #000000;
}

.light-mode .cc-nav .cc-nav-item:hover:before,
.light-mode .cc-nav .cc-nav-item.active:before {
  background-color: #000000;
}


.cc-nav-ellipsis {
  display: inline-block;
  width: 145px;
}

.cc-content-tabs .cc-tab {
  display: none;
}
.cc-content-tabs .cc-tab.active {
  display: block;
}

.cc-nav .cc-nav-item:not(:last-child):after {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 0;
    width: 1px;
    background-color: #ddd;
}


.cc-nav .cc-nav-item:before {
    content: '';
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: -1px;
    height: 3px;
    background-color: transparent;
}
.cc-no-header{
    color: var(--Senary-color);
}

.contacts-menu {
  margin-right: 10px;
  display: flex;
  justify-content:flex-end;
}

.cc-p-card{
  max-width: 360px !important;
  min-width: 360px !important;
  margin-left: 15px !important;
}

/*
* Mobile View
*/

@media screen and (min-width: 320px) and (max-width: 766px) and (orientation: portrait) {

.contact-col-wrap{
  flex-direction: column-reverse;
}

.contact-col-wrap .cc-left {
  width: 100%;
  min-width: 25%;
  position: relative;
  margin-right: 0;
  padding-right: 0;
  margin-top: 10px;
  padding-top: 20px;
  border-right: 0;
  border-top: 1px solid rgb(0 0 0 / 30%);
}

.contact-col-wrap .cc-right {
  flex: 1;
}

.contacts-menu {
  margin-left: 0;
  flex-direction: column-reverse;
}

.contacts-select-company-container{
  margin-bottom: 15px;
}

.cc-nav{
  margin-top: 20px;
}

.cc-p-card{
  width: 100%;
  min-width: 100% !important;
  margin-left: 0 !important;
}

} .emd-coming-soon-container {
    position: relative;
    top: 30%;
    transform: translateY(30%);
}

#an-footer{
height: 20px;
position: relative;
top: -25px;
width:100%;
background-color:#515151;
} .inv-cards-container {
    display: flex;
    width: 100%;
    margin-bottom: 30px;
    justify-content: space-between;
}

.inv-card {
    width: 19%;
    height: 130px;
    background-color: var(--secondary-color);
    color: var(--color-text);
    border-radius: 15px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.dark-mode .inv-card {
    background-color: var(--dark-secondary-color);
    color: var(--dark-color-text);
}

.light-mode .inv-card {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}

.inv-card-title {
    font-size: 23px;
    flex-grow: 1;
    font-weight: 300;
}

.inv-card-values {
    font-size: 25px;
    font-weight: 900;
    flex-grow: 1;
}

.inv-card-description {
    font-size: 13px;
    font-weight: 300;
    flex-grow: 1;
}

.inv-bar {
    border-radius: 5px;
    padding: 10px 10px;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    background-color: var(--secondary-color);
    color: var(--quaternary-color);
    position: relative;
}

.dark-mode .inv-bar {
    background-color: var(--dark-secondary-color);
    color: var(--dark-quaternary-color);
}

.light-mode .inv-bar {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}

.inv-bar-left {
    display: flex;
    align-items: center;
    position: relative;
}

.inv-bar-left-title {
    font-size: 20px;
    font-weight: 200;
    margin: 0;
    top: 55%;
    position: absolute;
    transform: translateY(-50%);
}

.inv-bar-right {
    display: flex;
    align-items: center;
}

.inv-bar-right-block {
    width: 140px;
    margin-right: 10px;
}

.inv-bar-right-search {
    width: 300px;
    margin-right: 10px;
}

.ui-button:hover {
    border: 1px solid #939393;
    background: #242424;
    font-weight: normal;
    color: #ffffff;
}

.do-daterangepicker-triggerbutton {
    background-color: #242424;
    border: 1px solid #939393;
    height: 40px;
    color: #ffffff;
}

.light-mode .do-daterangepicker-triggerbutton {
    background-color: #ffffff;
    border: 1px solid #939393;
    height: 40px;
    color: #000000;
}

.light-mode .do-daterangepicker-triggerbutton:focus {
    color: #000000;
    background: #d1d1d1;
}

.do-daterangepicker-triggerbutton:focus {
    color: #ffffff;
    background: #242424;
}

.ui-widget-content {
    border: 1px solid #939393;
    background: #1a1a1a !important;
    color: #fff;
}

.light-mode .ui-widget-content {
    border: 1px solid #939393;
    background: #e7e7e7 !important;
    color: #000;
}

.light-mode .ui-widget-header {
    border: 1px solid #898989;
    background: #afafaf;
    color: #2f2b2b;
    font-weight: bold;
}

.ui-widget-header {
    border: 1px solid #ddd;
    background: #1a1a1a;
    color: #fff;
    font-weight: bold;
}

.do-daterangepicker-calendar .ui-state-highlight a.ui-state-default {
    background: #454545 !important;
    color: #fff !important;
}

.ui-state-default,
.ui-state-active,
.ui-widget-content .ui-state-default {
    border: 1px solid #c5c5c5;
    background: #6b6b6b;
    font-weight: normal;
    color: #ffffff;
}

.mobile-filters {
    display: none;
}

.inv-action-btn {
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.inv-action-btn-container{
    position: relative;
}
.inv-action-btn-container.doing-ajax {
    pointer-events: none;
}

.inv-action-btn-container.doing-ajax .ajax-ellipsis-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--primary-color);
}

@media screen and (min-width: 320px) and (max-width: 766px) and (orientation: portrait) {
    .inv-cards-container {
        display: flex;
        width: 100%;
        margin-bottom: 15px;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .inv-card {
        margin-bottom: 10px;
        width: 150px;
        height: 100px;
        background-color: var(--secondary-color);
        color: var(--color-text);
        border-radius: 15px;
        padding: 13px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .inv-card-title {
        font-size: 16px;
        flex-grow: 1;
        font-weight: 300;
    }

    .inv-card-values {
        font-size: 15px;
        font-weight: 900;
        flex-grow: 1;
    }

    .inv-card-description {
        font-size: 11px;
        font-weight: 300;
        flex-grow: 1;
    }

    .inv-bar-left {
        position: relative !important;
    }

    .inv-bar-right {
        position: absolute;
        top: 70px;
        left: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
    }

    .inv-bar-right .inv-bar-right-block {
        margin-bottom: 15px;
        margin-right: 0;
    }

    .inv-bar-right-search {
        margin-bottom: 10px;
    }

    .invoice-table-container {
        position: relative;
        top: 212px;
        margin-bottom: 200px;
    }
    .ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all{
        width: 198px;
    }
} .ml-container {
    display: flex;
    flex-direction: column;
    max-width: 85rem;
    height: 42rem;
}

.ml-top {
    padding: 15px 15px 5px;
    display: flex;
    justify-content: space-between;
}

.ml-top .heading {
    margin: 0;
}

.ml-top .close-icon {
    font-size: 30px;
    height: 29px;
    padding: 0;

}
.delete_image_container{
    position: absolute;
    bottom: 60px;
}
.ml-side-right {
    background-color: #f6f7f7;
    width: 23rem;
    border-left: 1px solid #b9b9b9;
    border-top: 1px solid #b9b9b9;
}

.ml-middle {
    display: flex;
    justify-content: space-between;
    height: 585px;
    flex-grow: 1;
}

.ml-filter-container {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

.ml-filter-items {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.ml-filter-items div {
    margin-left: 8px;
}

.ml-content {
    width: 100%;
    height: 100%;

}

.ml-tabs {
    position: relative;
    top: 1px;
    padding: 10px;
    margin-right: 5px;
}

.ml-search {
    margin-right: 5px;
    padding: 5px;
}

.ml-bottom {
    background-color: #f6f7f7;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #b9b9b9;
}

.ml-bottom div {
    padding: 5px;
}

.ml-popup {
    padding: 0 !important;
    height: 674px;
    z-index: 101 !important;
    width: 70%;
}

.ml-popup-overlay {
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 102 !important;
}

.ml-content-container {
    width: 100%;
    height: 100%;
}

.ml-select {
    min-width: 70px !important;

}

.ml-tab {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #b9b9b9;
    padding-left: 15px;
}

.ml-filter-select {
    width: 150px !important;
}

.ml-selected-tab {
    background-color: white;
    border: 1px solid #b9b9b9;
    border-bottom: none;
    color: white;
}

.ml-thumbnails-container {
    height: 100%;
}

.ml-thumbnail-list {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    padding-left: 7px;
    align-items: center;
}

.ml-thumbnail-list div {
    margin: 5px;
}

.ml-thumbnail-list div div {
    height: 100%;
    width: 100%;
    text-align: center;
}

.ml-thumbnail-list img {
    padding-top: 5px;
    margin-bottom: -1px;
}

.ml-thumb{
    border: 2px solid #e7e7e7;
}

.ml-selected-thumb {
    position: relative;
    border: 2px solid var(--primary-color);
}

.ml-selected-thumb::before {
    position: absolute;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f058";
    z-index: 1;
    font-size: 24px;
    top: 5px;
    left: 8px;
    color: #09c6d9;
}

.ml-attachment-details {
    padding: 5px;
}

.ml-attachment-details .ml-img {
   width: 270px;
   height: 180px;
}

.ml-attachment-details span {
    font-weight: 600;
}

.ml-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ml-upload-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ml-upload .ml-header{
    font-weight: 500;
    font-size: 1.3rem;
}
.ml-upload-btn{
    margin: 14px;
    padding: 10px 20px;
    border: 1px solid #048ec3;
    background-color: white;
    border-radius: 4px;
    color: #048ec3;
    cursor: pointer;
}
.ml-upload-btn-container{
    margin-top: 20px;
    margin-bottom: 25px;
}
.ml-preview-container{
    max-height: 370px;
}
.ml-upload-preview-img{
    max-width: 120px;
    max-height: 120px;
    width: 120px;
    height: 120px;
    object-fit: cover;
}
.ml-preview-card{
    position: relative;
}
.ml-up-thumb{
    align-items: flex-start !important;
}
.ml-upload-remove-btn{
    position: absolute;
    top: 16px;
    left: 17px;
    color: #ffffff;
    background-color: #a10505;
    border: 1px solid #e30000;
    cursor: pointer;
    height: 24px;
}
.ml-draged{
    padding: 111px 279px;
    border: 4px dashed #048ec3;
}
.ml-draged-2{
    padding: 5px 0;
    border: 4px dashed #048ec3; 
}
.ml-attachment-details-texts{
    overflow-y: auto;
    height: 28vh;
}
.ml-attachment-details-texts div div span{
    font-weight: 600;
}
.ml-delete-text{
    color: #a10505;
    bottom: 60px;
    cursor: pointer;
} 

.ml_no_results {
    position: absolute;
    top: 291px;
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    flex-direction: column;
    left: -131px;
}

.ml_no_results-container {
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ml_no_results-icon {
    font-size: 35px;
    color: #cbcbcb;
}

.ml_no_results-header {
    font-size: 20px;
    margin-top: 5x;
    font-weight: 500;
}

.ml-delete-popup{
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 105 !important;
} .pb-page-builder {
  width: 100%;
  border: 1px solid #d9d9d9;
}

.pb-page-builder-view {
  width: 100%;
  padding: 0 10px;
}

.pb-page-builder-box {
  cursor: pointer;
  height: 75px;
  margin: 5px;
  border: 1px dashed #cdcdcd;
}

.pb-page-builder-add-element {
  cursor: pointer;
  padding: 20px 0;
}

.pb-page-builder-add-element .pb-box-icon {
  font-size: 2.2rem;
}

.pb-page-builder-box .pb-box-icon {
  font-size: 2.2rem;
}

.pb-img-thumb {
  border-radius: 5px;
}

.pb-page-builder-side-menu {
  background-color: white;
  height: 100%;
  position: fixed;
  right: 0;
  z-index: 2;
  top: 70px;
  padding: 40px 20px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.pb-grid-placeholder {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.pb-side-menu-item {
  padding: 10px;
  width: calc((100% - 10px) / 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-height: 90px;
  margin-right: 5px;
  margin-bottom: 5px;
}

.pb-side-menu-icon-list .pb-side-menu-item:nth-child(3n) {
  margin-right: 0;
}

.pb-side-menu-item:hover {
  background-color: var(--secondary-color);
  color: white;
  cursor: pointer;
}

.pb-side-menu-icon-list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  max-width: 300px;
}

.pb-side-menu-section-text {
  font-weight: 500;
  margin-top: 25px;
  margin-bottom: 25px;
}

.pb-side-menu-icon {
  font-size: 1.7rem;
}

.pb-side-menu-name {
  text-overflow: ellipsis;
  overflow: hidden;
}

.pb-page-builder-preview {
  padding: 0 10px 10px 10px;
}

.pb-edit-mode {
  background-color: lightgrey;
}

.pb-block {
  margin: 5px;
  background-color: white;
  border-radius: 5px;
  justify-content: flex-start;
}

.pb-page-builder .pb-component>div {
  position: relative;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.slide-fade-enter-active {
  transition: all 0.1s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.2s ease-out;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}


/* grid layouts  */
.pb-w-25p {
  width: 25%;
}

.pb-w-30p {
  width: 30%;
}

.pb-w-33p {
  width: 33.33%;
}

.pb-w-50p {
  width: 50%;
}

.pb-w-70p {
  width: 70%;
}

.pb-w-100p {
  width: 100%;
}

.pb-column {
  position: relative;
  margin-top: 40px;
}

.pb-column-border {
  border: 3px solid #0094cb;
}

.pb-column-layout {
  width: 37px;
  height: 30px;
}

.pb-column-100 {}

.pb-column-55 {
  border-right: 3px solid #0094cb;
  width: 16px;
  height: 24px;
}

.pb-column-30 {
  border-right: 3px solid #0094cb;
  width: 10px;
  height: 24px;
}

.pb-column-70 {
  border-right: 3px solid #0094cb;
  width: 24px;
  height: 24px;
}

.pb-column-333 {
  border-right: 3px solid #0094cb;
  border-left: 3px solid #0094cb;
  width: 14px;
  margin-left: 8px;
  height: 24px;
}

.pb-column-255 {
  border-right: 3px solid #0094cb;
  border-left: 3px solid #0094cb;
  width: 22px;
  margin-left: 4px;
  height: 24px;
}

.pb-column-outline {
  cursor: pointer;
  padding: 15px;
  border: 1px solid gainsboro;
}

.pb-column-outline:hover {
  background-color: #0094cb;
  border-color: #0094cb;
}

.pb-column-outline:hover div {
  border-color: white;
}

.pb-popup-menu-bar {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.pb-popup-menu-bar-group {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.pb-align-item {
  cursor: pointer;
  margin-right: 15px;
  color: #006da1;
  width: 38px;
  height: 33px;
  font-size: 19px;
  text-align: center;
  border: 1px solid #cfcfcf;
  padding: 5px;
}

.pb-selected-align-item {
  background-color: #006da1;
  color: white;
}

.pb-column-subtext {
  font-size: 10px;
}

.pb-page-builder-add-element:hover {
  background-color: #f0f0f0;
}

.pb-page-builder-box:hover {
  background-color: #f0f0f0;
}

.pb-column-menu {
  position: relative;
  right: 10px;
}

.pb-grid-side-menu {
  position: absolute;
  right: 0px;
  z-index: 1;
  top: -23px;
  display: flex;
  background-color: #e9e9e9;
}

.pb-grid-side-menu a {
  color: #929395 !important;
}

.pb-grid-side-menu-btn {
  display: block;
  width: 25px;
  height: 23px;
  color: #b1b3b5;
  padding: 3px;
  font-size: 15px;
  text-align: center;
  line-height: 22px;
}

.pb-grid-side-menu-btn:hover {
  background-color: #006da1;
  color: white !important;
}

.pb-grid-background {
  background-color: #e9e9e9;
}

.pb-editable {
  height: auto !important;
  width: 33rem !important;
  min-height: 10rem;
}

.pb-ImagePlaceholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.pb-ImagePlaceholder:hover img {
  border: 1px dashed #006da1 !important;
  padding: 5px;
  cursor: pointer;
}

.pb-ImagePlaceholder img {
  cursor: pointer;
  max-width: 500px;
  max-height: 300px;
  width: 500px;
  height: 300px;
  min-width: 500px;
  min-height: 300px;
  object-fit: cover;
  padding: 5px;
  border: 1px solid white;
}

.pb-Image-overlay {
  z-index: 1 !important;
}

.pb-block-icon {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 27px;
  border-radius: 5px;
  color: #fbfbfb;
  padding-top: 3px;
}

.pb-block-icon.orange {
  background-color: #ff8d00;
}

.pb-block-icon.burgundy {
  background-color: #800020;
}

.pb-block-icon.navyblue {
  background-color: #040458;
}

.pb-block-icon.green {
  background-color: #7c9c5d;
}

.pb-block-icon.lightblue {
  background-color: #54b4d3;
}
.pb-block-title {
  font-size: 20px;
  font-weight: 500;
} 
 
.pb-block-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: pre-wrap;
}

.pb-block-text p {
  margin: 0;
}  

.pb-singleImagePlaceholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.pb-singleImagePlaceholder:hover img {
  border: 1px dashed #006da1 !important;
  padding: 5px;
  cursor: pointer;
}

.pb-singleImagePlaceholder img {
  cursor: pointer;
  max-width: 500px;
  max-height: 300px;
  width: 500px;
  height: 300px;
  min-width: 500px;
  min-height: 300px;
  object-fit: cover;
  padding: 5px;
  border: 1px solid white;
}

.pb-image-preview-container {
  top: 500px !important;
}

.pb-h1 {
  display: block;
  font-size: 2em;
  /* margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0; */
  font-weight: bold;
}
 
.pb-h2 {
  display: block;
  font-size: 1.5em;
  /* margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0; */
  font-weight: bold;
}

.pb-h3 {
  display: block;
  font-size: 1.17em;
  /* margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0; */
  font-weight: bold;
}

.pb-h4 {
  display: block;
  font-size: 1em;
  /* margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0; */
  font-weight: bold;
}

.pb-h5 {
  display: block;
  font-size: .83em;
  /* margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0; */
  font-weight: bold;
}

.pb-h6 {
  display: block;
  font-size: .67em;
  /* margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0; */
  font-weight: bold;
}

.pb-header {
  padding: 12px 15px;
}


.child-component:nth-child(n + 2):nth-last-child(n + 2) div {
  margin-right: 5px;
}

.pb-subItemMenu {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
}

.pb-subItemMenu a {
  color: #b1b3b5;
}

.pb-subItemMenu a:hover {
  color: #929395;
}

.pb-pencil {
  font-size: 13px !important;
}

.pb-block:hover .pb-subItemMenu {
  display: block;
}

.pb-ql-txt-cont .ql-container {
  height: 300px;
}

.pb-element-button {
  font-family: inherit;
  font-size: 15px;
  font-weight: normal;
  display: inline-block;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  margin-bottom: 0;
  height: 40px;
  border: 1px solid var(--primary-color);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  border-radius: 3px;
  outline: 0;
  white-space: nowrap;
  background-color: var(--primary-color);
  text-shadow: none;
  box-shadow: none;
  line-height: 1.6;
  padding: 9px 20px 8px;
  position: relative;
  -webkit-transition: all ease-in-out 0.15s;
  -moz-transition: all ease-in-out 0.15s;
  transition: all ease-in-out 0.15s;
}

.pb-element-button:hover {
  background-color: #0079c0;
  color: #fff;
}

.pb-component .ql-snow .ql-editor {
  padding: 0;
}

.pb-row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;

}

.pb-page-builder-view .pb-row{
  margin-top: 15px;
  margin-bottom: 15px;
}

.pb-row .pb-component:not(.child-component){
  margin-right: 0;
}

.column-row{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}


.pb-row .pb-component.column-row:not(.child-component):not(:last-child) .pb-component{
  margin-right: 0;
}

.pb-row .pb-component:not(.child-component):not(:last-child){
  margin-right: 25px;
}

.column-row.child-component .pb-component{
  margin-right: 3px !important;
}

.pb-addElementBelow{
  display: none;
  position: absolute;
  bottom: 0;
  right: 50%;
  left: 50%;
  text-align: center;
}

.pb-addElementBelow a {
  display: block;
  width: 20px;
  height: 18px;
  color: #b1b3b5;
  padding: 2px 3px 3px 3px;
  font-size: 15px;
  text-align: center;
  background: #e8e9e9;
}

.pb-addElementBelow a:hover {
  color: #929395;
}

.pb-pencil {
  font-size: 13px !important;
}

.pb-row .pb-component .pb-block:hover .pb-addElementBelow {
  display: block;
}

.pb-row .pb-component.column-row .pb-block:hover .pb-addElementBelow {
  display: none;
}

.column-row.child-component .pb-component .pb-addElementBelow {
  display: none;
}

.column-row .pb-component:only-child .pb-block:hover .pb-addElementBelow {
  display: block;
}

.column-row .pb-component:last-child .pb-block:hover .pb-addElementBelow {
  display: block;
}


.pb-slider {

}

.pb-slider input[type="range"] {
  width: 420px;
  height: 2px;
  background: black;
  border: none;
  outline: none;
}

.column-row .pb-component:not(:last-child) .pb-block{
margin-bottom: 0 !important;
}

.pb-row .child-component:nth-child(2n) {
background-color: whitesmoke;
}

.pb-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pb-video-container{
  position: relative;
  width: 100%;
  height: 100%;
}
.pb-video-container::after{
  position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0f1b34;
    background: linear-gradient(180deg,rgba(0,29,53,0) 0%,#001d35 100%);
    box-shadow: 0 10px 20px 0 rgba(0,121,192,.2);
    width: 100%;
}

.pb-video-play-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 75px;
  height: 75px;
  background-image: url(/apps/page_builder/assets/images/Play.svg);
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform .3s;
  animation: white-pulse-animation 1.5s linear infinite;
  border-radius: 100%;
  z-index: 1;
}
.pb-video-heading{
  position: absolute;
  bottom: 20px;
  font-size: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: #fff;
  font-weight: 400;
  width: 100%;
  text-align: center;
  padding: 0 15px;
}
@keyframes white-pulse-animation {
  0% {
      -webkit-box-shadow: 0 0 0 0 #fff;
      box-shadow: 0 0 0 0 #fff
  }

  to {
      -webkit-box-shadow: 0 0 0 10px transparent;
      box-shadow: 0 0 0 10px transparent
  }
}

.pb-width-auto{
  width: auto !important;
}
.pb-width-100{
  width: 100% !important;
} /**
 * Declarations
 */
:root {
    
    --dark-primary-color: #181818;
    --dark-secondary-color: #242424;
    --dark-tertiary-color: #424242;
    --dark-quaternary-color: #ffffff;
    --dark-quinary-color:#000000;
    --dark-senary-color: #7b7b7b;
    --dark-seven-color: #c7c7c7;
    --dark-eight-color:#3e3e3f;
    --dark-color-text: #ffffff;
    --dark-headings-color: #ffffff;
    --dark-background-color: #515151;
    
    --light-primary-color: #1f1f1f;
    --light-secondary-color: #000000;
    --light-tertiary-color: #ffffff;
    --light-quaternary-color: #ffffff;
    --light-quinary-color:#dbdbdb;
    --light-senary-color: #7b7b7b;
    --light-color-text: #000000;
    --body-color: #000000;
    --light-headings-color: #000000;
    --success-color: #06c349;
    --error-color: #dd0707;
    --warning-color: #dd6007;
    --menu-selected-color:  rgba(0, 0, 0, 1);
}

/**
 * Normalization
 */
html,
body {
    margin: 0;
    padding: 0;
}

body {
    color: var(--body-color);
    overflow-x: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}

body.dark-mode {
    color: var(--dark-color-text);
}

body.light-mode {
    color: var(--light-color-text);
}


*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

a:hover,
a:focus {
    color: #ffffff;
    text-decoration: none;
    outline: 0;
    cursor: pointer;
}

.dark-mode a:hover,
.dark-mode a:focus {
    color: inherit;
    text-decoration: none;
    outline: 0;
    cursor: pointer;
}

.light-mode a:hover,
.light-mode a:focus {
    color: inherit;
    text-decoration: none;
    outline: 0;
    cursor: pointer;
}

p {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

input,
button,
select,
textarea {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--dark-headings-color);
}

.dark-mode
h1,
.dark-mode
h2,
.dark-mode
h3,
.dark-mode
h4,
.dark-mode
h5,
.dark-mode
h6 {
    color: var(--dark-headings-color);
}

.light-mode
h1,
.light-mode
h2,
.light-mode
h3,
.light-mode
h4,
.light-mode
h5,
.light-mode
h6 {
    color: var(--light-headings-color);
}

/**
 * Helpers
 */

.validation_errors {
    background-color: rgb(131, 0, 0);
    border-radius: 3px;
    height: auto;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.4;
    max-width: 285px;
    position: absolute;
    text-align: left;
    bottom: 70px;
    width: auto;
    z-index: 99993;
    padding: 10px 0px;
}

.validation_errors:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #700202;
    top: 100%;
    left: 50%;
}

.validation_errors ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 15px;
    list-style-type: none;
}

.validation_errors li {
    padding-right: 12px;
    word-wrap: break-word;
}

.relative {
    position: relative !important;
}

.initial {
    position: initial !important;
}

.center-div {
    margin: 0 auto;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-justify {
    text-align: justify !important;
}

.f-w-500 {
    font-weight: 500;
}

.f-w-600 {
    font-weight: 600;
}

.f-w-700 {
    font-weight: 700;
}

.f-s-20 {
    font-size: 20px;
}

.f-s-35 {
    font-size: 35px;
}
.l-h-1 {
    line-height: 1;
}

.line-height-1 {
    line-height: 1;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

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

.m-t-0 {
    margin-top: 0 !important;
}

.m-t-5 {
    margin-top: 5px !important;
}

.m-t-10 {
    margin-top: 10px !important;
}

.m-t-15 {
    margin-top: 15px !important;
}

.m-t-20 {
    margin-top: 20px !important;
}

.m-t-25 {
    margin-top: 25px !important;
}

.m-t-40 {
    margin-top: 40px !important;
}

.m-t-50 {
    margin-top: 50px !important;
}

.m-b-0 {
    margin-bottom: 0 !important;
}

.m-b-5 {
    margin-bottom: 5px !important;
}

.m-b-10 {
    margin-bottom: 10px !important;
}

.m-b-15 {
    margin-bottom: 15px !important;
}

.m-b-20 {
    margin-bottom: 20px !important;
}

.m-b-25 {
    margin-bottom: 25px !important;
}

.m-b-30 {
    margin-bottom: 30px !important;
}

.m-r-auto {
    margin-right: auto !important;
}

.m-r-0 {
    margin-right: 0px !important;
}

.m-r-5 {
    margin-right: 5px !important;
}

.m-r-10 {
    margin-right: 10px !important;
}

.m-r-15 {
    margin-right: 15px !important;
}

.m-r-20 {
    margin-right: 20px !important;
}

.m-r-30 {
    margin-right: 30px !important;
}

.m-r-50 {
    margin-right: 50px !important;
}

.m-l-auto {
    margin-left: auto !important;
}

.m-l-0 {
    margin-left: 0px !important;
}

.m-l-5 {
    margin-left: 5px !important;
}

.m-l-10 {
    margin-left: 10px !important;
}

.m-l-15 {
    margin-left: 15px !important;
}

.m-l-20 {
    margin-left: 20px !important;
}

.m-l-30 {
    margin-left: 30px !important;
}

.m-lr-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

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

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

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

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

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

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

.p-t-0 {
    padding-top: 0px !important;
}

.p-t-5 {
    padding-top: 5px !important;
}

.p-t-10 {
    padding-top: 10px !important;
}

.p-t-15 {
    padding-top: 15px !important;
}

.p-t-35 {
    padding-top: 35px !important;
}

.p-b-0 {
    padding-bottom: 0px !important;
}

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

.p-b-5 {
    padding-bottom: 5px !important;
}

.p-b-10 {
    padding-bottom: 10px !important;
}

.p-b-15 {
    padding-bottom: 15px !important;
}

.p-b-20 {
    padding-bottom: 20px !important;
}

.p-b-35 {
    padding-bottom: 35px !important;
}

.p-r-0 {
    padding-right: 0px !important;
}

.p-r-5 {
    padding-right: 5px !important;
}

.p-r-10 {
    padding-right: 10px !important;
}

.p-r-15 {
    padding-right: 15px !important;
}

.p-r-20 {
    padding-right: 20px !important;
}

.p-r-35 {
    padding-right: 35px !important;
}

.p-l-0 {
    padding-left: 0px !important;
}

.p-l-5 {
    padding-left: 5px !important;
}

.p-l-10 {
    padding-left: 10px !important;
}

.p-l-15 {
    padding-left: 15px !important;
}

.p-l-20 {
    padding-left: 20px !important;
}

.p-l-35 {
    padding-left: 35px !important;
}

.p-lr-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.color-inherit {
    color: inherit;
}

.text-success {
    color: #69bb67 !important;
}

.text-warning {
    color: #dd992d !important;
}

.text-danger {
    color: #ed1010 !important;
}

.text-notice {
    color: #4e4e4e !important;
}

.text-grey {
    color: #b3b3b3 !important;
}


.line-clamp-8 {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-7 {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-6 {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.overflow-wrap-anywhere{
    overflow-wrap: anywhere;
}
.float-right{
    float: right;
}
.float-left{
    float: left;
}
.w-20 {
    width: 20px;
}

.w-30 {
    width: 30px;
}

.w-40 {
    width: 40px;
}

.w-50 {
    width: 50px;
}

.w-70 {
    width: 70px;
}

.w-100 {
    width: 100px;
}

.w-200 {
    width: 200px;
}

.w-250 {
    width: 250px;
}

.w-300 {
    width: 300px;
}

.w-400 {
    width: 400px;
}

.w-450 {
    width: 450px;
  }
  
.w-500 {
    width: 500px;
}

.w-600 {
    width: 600px;
}

.w-10p {
    width: 10%;
}

.w-50p {
    width: 50%;
}

.min-w-50p {
    min-width: 50%;
}

.max-w-50 {
    max-width: 50px !important;
}

.max-w-100 {
    max-width: 100px !important;
}

.max-w-145 {
    max-width: 145px !important;
}

.max-w-200 {
    max-width: 200px !important;
}

.max-w-250 {
    max-width: 250px !important;
}

.max-w-300 {
    max-width: 300px !important;
}

.max-w-360 {
    max-width: 360px !important;
}

.max-w-400 {
    max-width: 400px !important;
}

.max-w-500 {
    max-width: 500px !important;
}

.max-w-600 {
    max-width: 600px !important;
}

.max-w-900 {
    max-width: 900px !important;
}

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

.max-h-150 {
    max-height: 150px !important;
}

.max-h-200 {
    max-height: 200px !important;
}

.max-h-270 {
    max-height: 270px !important;
}

.max-h-300 {
    max-height: 300px !important;
}

.max-h-350 {
    max-height: 350px !important;
}

.max-h-400 {
    max-height: 400px !important;
}

.max-h-500 {
    max-height: 500px !important;
}

.max-h-600 {
    max-height: 600px !important;
}

.h-0{
    height: 0 !important;
}

.h-75{
    height: 75px !important;
}

.h-150 {
    height: 150px !important;
}
.h-170 {
    height: 170px !important;
}
.h-200 {
    height: 200px !important;
}

.h-300 {
    height: 300px !important;
}

.h-500 {
    height: 500px !important;
}

.min-w-40 {
    min-width: 40px !important;
}

.min-w-50 {
    min-width: 50px !important;
}

.min-w-70{
    min-width: 70px !important;
}

.min-w-100 {
    min-width: 100px !important;
}

.min-w-200 {
    min-width: 200px !important;
}

.min-w-300 {
    min-width: 300px !important;
}

.min-w-360 {
    min-width: 360px !important;
}

.min-w-400 {
    min-width: 400px !important;
}

.min-w-500 {
    min-width: 500px !important;
}

.min-w-600 {
    min-width: 600px !important;
}

.min-h-50 {
    min-height: 50px !important;
}

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

.min-h-200 {
    min-height: 200px !important;
}

.min-h-250 {
    min-height: 250px !important;
}

.min-h-270 {
    min-height: 270px !important;
}

.min-h-300 {
    min-height: 300px !important;
}

.min-h-350 {
    min-height: 350px !important;
}

.min-h-450 {
    min-height: 450px !important;
}

.min-h-500 {
    min-height: 500px !important;
}

.min-h-600 {
    min-height: 600px !important;
}

.min-h-650 {
    min-height: 650px !important;
}

.display-none {
    display: none;
}

.flex-item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.display-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-directions-column {
    flex-direction: column;
}

.flex-directions-row {
    flex-direction: row;
}

.inline-block {
    display: inline-block;
}

.inline-flex {
    display: inline-flex;
}

.align-center {
    align-items: center;
}

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

.align-end {
    align-items: flex-end;
}

.align-baseline {
    align-items: baseline;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-space-between {
    justify-content: space-between;
}

.justify-space-around {
    justify-content: space-around;
}

.border-bottom {
    border-bottom: 1px solid #dcdcdc;
}

.red-border {
    border: 1px solid red !important;
}

.box-shadow-none {
    box-shadow: none;
}

.ellipsis {
    text-overflow: ellipsis;
    /* enables ellipsis */
    white-space: nowrap;
    /* keeps the text in a single line */
    overflow: hidden;
    /* keeps the element from overflowing its parent */
}

.text-overflow-ellipsis {
    text-overflow: ellipsis;
}

.white-space-nowrap {
    white-space: nowrap;
}

.overflow-hidden {
    overflow: hidden;
}

.no-border {
    border: none;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

.r-45 {
    -ms-transform: rotate(45deg);
    /* IE 9 */
    transform: rotate(45deg);
}

.r-222 {
    -ms-transform: rotate(222deg);
    /* IE 9 */
    transform: rotate(222deg);
}


/*
* Image
*/
.object-fit_cover {
    object-fit: cover;
}

/**
 * Form elements
 */
 .light-mode .form-group input[type=text],
 .light-mode .form-group input[type=password],
 .light-mode .form-group input[type=email]{
    border: 1px solid #939393 !important;
    border-radius: 5px;
}

 .dark-mode .form-group input[type=text] {
        background-color: #242424 !important;
        border: 1px solid #939393 !important;
        border-radius: 5px;
 }

 .dark-mode .form-group input[type=password] {
    background-color: #242424 !important;
    border: 1px solid #939393 !important;
    border-radius: 5px;
 }

 .dark-mode .form-group input[type=email] {
    background-color: #242424 !important;
    border: 1px solid #939393 !important;
    border-radius: 5px;
 }
 .dark-mode .form-group
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    background-color: #000000 !important;
    border: 1px solid #939393 !important;
}

.form-group {
    margin-bottom: 20px;
}

.form-group.horizontal {
    display: table;
    width: 100%;
}

.form-group.horizontal>* {
    display: table-cell;
}

.form-group.horizontal>.fld-label {
    width: 33%;
}

.form-group.horizontal>.fld-label.with-colon {
    position: relative;
}

.form-group.horizontal>.fld-label.with-colon:after {
    content: ':';
    position: absolute;
    right: 5px;
}

.fld-label {
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
    font-size: 15px;
    color: var(--color-text);
}

.form-control {
    display: block;
    width: 100%;
    height: 40px;
    padding: 8px 10px 5px;
    font-size: 15px;
    line-height: normal;
    color: #555555;
    outline: 0;
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #939393;
    -webkit-transition: border-color ease-in-out 0.15s;
    -moz-transition: border-color ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s;
}

.dark-mode .form-control {
    color: #fdfdfd;
    background-color: var(--dark-secondary-color);
}

textarea.form-control {
    min-height: 110px;
    max-width: 100%;
    max-height: 200px;
    min-width: 100%;
    line-height: 1.6;
}

textarea.form-control.no-resize {
    resize: none;
}

.form-control:focus {
    border-color: var(--primary-color);
    background-color: #fff;
    outline: 0 !important;
    box-shadow: 0 0 7px rgba(86, 179, 190, 0.15);
}

.dark-mode .form-control:focus {
    border-color: var(--dark-primary-color);
    border: 1px solid #939393;
    box-shadow: 0 0 7px rgba(86, 179, 190, 0.15);
    background-color:  var(--dark-secondary-color);
}

.form-control:disabled {
    background-color: #ebebeb;
}

.form-control::-webkit-input-placeholder {
    color: #c8c8c8;
    /* Chrome/Opera/Safari */
    font-weight: 300;
}

.form-control::-moz-placeholder {
    color: #c8c8c8;
    /* Firefox 19+ */
    font-weight: 300;
}

.form-control:-ms-input-placeholder {
    color: #c8c8c8;
    /* IE 10+ */
    font-weight: 300;
}

.form-control:-moz-placeholder {
    color: #c8c8c8;
    /* Firefox 18- */
    font-weight: 300;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset;
}

.dark-mode .form-control:-webkit-autofill,
.dark-mode .form-control:-webkit-autofill:hover,
.dark-mode .form-control:-webkit-autofill:focus,
.dark-mode .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px rgb(77, 77, 77) inset;
    -webkit-text-fill-color: #ffffff;
}

.form-control.has-error {
    border-color: var(--error-color);
}

.icon-control {
    position: relative;
}

.icon-control .ic-icon {
    position: absolute;
    top: 1px;
    right: 1px;
    display: inline-block;
    width: 38px;
    height: 38px;
    line-height: 41px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    -webkit-transition: color ease-in-out 0.15s;
    -moz-transition: color ease-in-out 0.15s;
    transition: color ease-in-out 0.15s;
}

.icon-control .ic-icon:hover {
    color: var(--dark-secondary-color);
}

.dark-mode .icon-control input{
    background-color:var(--dark-secondary-color)
}

.dark-mode .icon-control .ic-icon:hover {
    color: var(--dark-Senary-color);
}

.radio,
.checkbox {
    position: relative;
    display: block;
    margin-top: 10px;
}

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
    position: absolute;
    margin-left: -20px;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 4px 0 0;
    line-height: normal;
    cursor: pointer;
    box-sizing: border-box;
}

.radio label,
.checkbox label {
    display: inline-block;
    min-height: 20px;
    cursor: pointer;
    position: relative;
    padding-left: 25px !important;
    margin-right: 15px;
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 20px;
}

.radio label:before,
.checkbox label:before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
}

.radio label:before {
    bottom: 2.5px;
    border-radius: 99px;
    border-color: #c2c2c2;
    -webkit-transition: border 0.3s 0s cubic-bezier(0.455, 0.03, 0.215, 1.33);
    transition: border 0.3s 0s cubic-bezier(0.455, 0.03, 0.215, 1.33);
}

.checkbox label:before {
    top: -0.6px;
    border-radius: 3px;
    border-color: #c2c2c2;
    -webkit-transition: border 0.2s linear 0s, color 0.2s linear 0s;
    transition: border 0.2s linear 0s, color 0.2s linear 0s;
}

.radio input[type=radio]:checked+label:before {
    border-width: 5px;
    border-color: var(--light-primary-color);
}

.checkbox input[type=checkbox]:checked+label:before {
    border-width: 8.5px;
    border-color: var(--light-primary-color);
}

.checkbox label {
    -webkit-transition: border 0.2s linear 0s, color 0.2s linear 0s;
    transition: border 0.2s linear 0s, color 0.2s linear 0s;
}

.checkbox label:after {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 3px;
    top: -2px;
    font-size: 11px;
    -webkit-transition: border 0.2s linear 0s, color 0.2s linear 0s;
    transition: border 0.2s linear 0s, color 0.2s linear 0s;
    border-radius: 3px;
}

.checkbox input[type=checkbox]:checked+label:after {
    font-family: 'Font Awesome 5 Pro';
    content: "\f00c";
    color: #fff;
    font-weight: 700;
}

.radio input[type="radio"]:disabled+label,
.checkbox input[type="checkbox"]:disabled+label {
    cursor: not-allowed;
}

.button {
    font-family: inherit;
    font-size: 15px;
    font-weight: normal;
    display: inline-block;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin-bottom: 0;
    height: 40px;
    border: 1px solid var(--quaternary-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: var(--primary-color);
    border-radius: 3px;
    outline: 0;
    white-space: nowrap;
    background-color: var(--quaternary-color);
    text-shadow: none;
    box-shadow: none;
    line-height: 1.6;
    padding: 9px 20px 8px;
    position: relative;
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
}

.dark-mode .button.login {
    background-color: var(--dark-primary-color);
    border: 1px solid #939393;
}

.dark-mode .button {
    background-color: var(--dark-primary-color);
    border: 1px solid #939393;
}

.light-mode .button.login {
    background-color: var(--light-quaternary-color);
    border: 1px solid #939393;
    color: black;
}

.light-mode .button {
    background-color: var(--light-primary-color);
    border: 1px solid #939393;
    color: white;
}

/*
VS Button Style
 */

.button.button-blue {
     border:1px solid #025281 !important;
     color: #fff;
     background-color: #025281 !important;
 }

.button.button-blue:hover {
    background-color: #0079c0 !important;

}

.button.button-white-blue {
    border:1px solid transparent !important;
    color: #0079c0;
    background-color: #fff !important;
}

.button.button-white-blue:hover {
    background-color: #0079c0 !important;

}

.button.button-flat-transparent {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #757575;
}

.button.button-flat-transparent.red-text {
    color: rgb(207 4 4);
}

.button.button-flat-transparent:hover {
    background-color: transparent !important;
    color: inherit;
}

.button.button-flat-transparent:hover.red-text {
    color: rgb(105, 9, 9);
}


.button-negative {
    background-color: #c8c8c8;
    border-color: #c8c8c8;
}

.button-transparent {
    background-color: transparent;
    border-color: #ffffff;
    color: #757575;
}

.button-flat-light {
    background-color: #0079C0;
    border-color: #0079C0;
    border-radius: 0;
}



.button.action-btn {
    padding: 3px 11px 22px 11px !important;
    height: 20px !important;
    text-align: center !important;
}

.button.action-btn:hover {
    background-color: #efefef !important;
}

.button:hover {
    background-color: var(--primary-color) !important;
    color: var(--quaternary-color);
    border-color: var(--primary-color);
}
.dark-mode .button:hover {
    background-color: var(--dark-quinary-color) ;
    color: var(--dark-quaternary-color);
    border: 1px solid #939393;
}

.light-mode .button:hover {
    background-color: var(--light-secondary-color) !important;
    color: var(--light-quaternary-color);
    border: 1px solid #939393;
}

.button:active {
    -webkit-transform: translateY(2px);
    -moz-transform: translateY(2px);
    transform: translateY(2px);
}

.button-transparent:hover {
    background-color: #ededed;
    color: white;
}

.button:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.button.doing-ajax {
    pointer-events: none;
    border: 1px solid var(--dark-primary-color);
}

.dark-mode .button.doing-ajax ,
.light-mode .button.doing-ajax {
    pointer-events: none;
    border: 1px solid var(--dark-primary-color);
}

.button-minwidth {
    min-width: 100px;
}

.mini-button {
    min-width: 23px;
    max-width: 23px;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    height: 15px !important;
    line-height: 1 !important;
    padding: 5px 1px 15px !important;
}

.mini-button i {
    background-color: transparent !important;
}

.button .ajax-ellipsis-wrap {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--dark-primary-color);
    border:  var(--dark-primary-color);
}

.ajax-ellipsis {
    display: inline-block;
    position: absolute;
    width: 54px;
    height: 9px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ajax-ellipsis div {
    position: absolute;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.ajax-ellipsis div:nth-child(1) {
    left: 5px;
    animation: ajax-ellipsis1 0.6s infinite;
}

.ajax-ellipsis div:nth-child(2) {
    left: 5px;
    animation: ajax-ellipsis2 0.6s infinite;
}

.ajax-ellipsis div:nth-child(3) {
    left: 23px;
    animation: ajax-ellipsis2 0.6s infinite;
}

.ajax-ellipsis div:nth-child(4) {
    left: 41px;
    animation: ajax-ellipsis3 0.6s infinite;
}

.button.doing-ajax .ajax-ellipsis-wrap {
    display: block;
}

.dark-mode .button.doing-ajax .ajax-ellipsis-wrap,
.light-mode .button.doing-ajax .ajax-ellipsis-wrap {
    display: block;
}

@keyframes ajax-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ajax-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes ajax-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(18px, 0);
    }
}

/**
Data loader
**/
.data-loader {
    display: inline-block;
    height: 9px;
    width: 54px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    
}

.data-loader div {
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
    background: var(--dark-secondary-color);
    border-radius: 50%;
    height: 8px;
    position: absolute;
    top: 0;
    width: 8px;
}
.dark-mode .data-loader div {
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
    background: var(--dark-quaternary-color);
    border-radius: 50%;
    height: 8px;
    position: absolute;
    top: 0;
    width: 8px;
}

.light-mode .data-loader div {
    background: var(--light-primary-color);
}

.data-loader div:nth-child(1) {
    animation: data-loader1 0.6s infinite;
    left: 5px;
}

.data-loader div:nth-child(2) {
    animation: data-loader2 0.6s infinite;
    left: 5px;
}

.data-loader div:nth-child(3) {
    animation: data-loader2 0.6s infinite;
    left: 23px;
}

.data-loader div:nth-child(4) {
    animation: data-loader3 0.6s infinite;
    left: 41px;
}

.data-loader-wrap {
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgb(255, 255, 255);

}

.light-mode .data-loader-wrap {
    background-color: var(--light-quaternary-color);
}

.dark-mode .data-loader-wrap {
    background-color:var(--dark-secondary-color);
}

.dark-mode .data-loader-transparent,
.light-mode .data-loader-transparent {
    background-color: transparent !important;
}

@keyframes data-loader1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes data-loader3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes data-loader2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(18px, 0);
    }
}

/* Select wrapper */
.select-wrapper {
    position: relative;
}

.select-wrapper select {
    min-width: 100px;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.select-wrapper:after,
.search-selection:after {
    position: absolute;
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    font-size: 18px;
    font-weight: 400;
    z-index: 1;
    top: 2px;
    right: 2px;
    bottom: 2px;
    color: #999999;
    width: 30px;
    text-align: center;
    padding: 6px 2px;
    pointer-events: none;
    background-color: #fff;
}

.dark-mode .select-wrapper:after,
.dark-mode .search-selection:after {
    position: absolute;
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    font-size: 18px;
    font-weight: 400;
    z-index: 1;
    top: 2px;
    right: 2px;
    bottom: 2px;
    color: #999999;
    width: 30px;
    text-align: center;
    padding: 6px 2px;
    pointer-events: none;
    background-color: var(--secondary-color);
}
.dark-mode .select-wrapper::before,
.dark-mode .search-selection:before {
    position: absolute;
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    font-size: 18px;
    font-weight: 400;
    z-index: 1;
    top: 2px;
    right: 2px;
    bottom: 2px;
    color: #999999;
    width: 30px;
    text-align: center;
    padding: 6px 2px;
    pointer-events: none;
    background-color:  var(--secondary-color);
}

/*.select-wrapper select:invalid {
    color: #c2c3c5;
}*/
.select-wrapper.with-icon:after {
    width: 25px;
    top: 0;
    bottom: 0;
    border-left: 1px solid #c8c8c8;
    background-color: transparent;
}

.select-wrapper.with-icon select {
    padding-right: 40px;
}

/*.select-wrapper select option,
.select-wrapper select optgroup {
    color: initial;
}*/
.select-wrapper option[value='?'],
.select-wrapper option[value='? undefined:undefined ?'] {
    display: none;
}

/**
 * Media Library
 */
.ml-popup {
    top: 500px !important;
}

/**
 * UI Components
 */
.ajax-notice {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 999;
    background-color: var(--secondary-color);
    border-radius: 3px;
    text-align: left;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.10);
    padding: 15px 15px 13px;
    width: 300px;
    max-width: 320px;
    border-left: 5px solid transparent;
    cursor: default;
    color: var(--color-text);
}

.dark-mode .ajax-notice {
    background-color: var(--dark-secondary-color);
    color: var(--dark-color-text);
}


.light-mode .ajax-notice {
    background-color: var(--light-primary-color);
    color: var(--light-quaternary-color);
}

.ajax-notice .an-message {
    padding-right: 30px;
    font-size: 14px;
}

.ajax-notice .an-dismisser {
    position: absolute;
    top: 11px;
    right: 9px;
    width: 22px;
    height: 22px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    background-color: var(--tertiary-color);
    border-radius: 100%;
    font-size: 16px;
    font-weight: 600;
}

.ajax-notice .an-dismisser:hover {
    background-color: #c9c5c5;
}

.ajax-notice.success {
    border-left-color: var(--success-color);
}

.ajax-notice.error {
    border-left-color: var(--error-color);
}

.ajax-notice.warning {
    border-left-color: var(--warning-color);
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 180px;
    padding: 5px 0;
    margin: 0;
    list-style: none;
    text-align: left;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background-clip: padding-box;
}

.dropdown-menu.right {
    left: auto;
    right: 0;
}
.dark-mode .dropdown-menu{
    background-color: #5d5d5d;
}

.dropdown-menu.table-action-left {
    left: 50px !important;
}

.dropdown .dropdown-menu.notification {
    cursor: auto;
    min-width: 410px;
    left: -340px;
    top: 71px;
    bottom: auto;
    padding: 0;
    padding-bottom: 5px;
}

.dropdown-menu.megaSearch {
    cursor: auto;
    min-width: 410px;
    left: -2x;
    top: 51px;
    bottom: auto;
    padding: 0;
    padding-bottom: 5px;
}

.dropdown-menu.bottom-left {
    left: 80px;
    top: auto;
    bottom: 0;
}

.dropdown.open .dropdown-menu {
    display: block;
}

.dropdown-menu>li {
    display: block;
    position: relative;
}

.dropdown-menu>li>a {
    display: block;
    padding: 13px 20px;
    text-align: left;
    white-space: nowrap;
    line-height: 1;
    color: inherit;
    position: relative;
}

.dropdown-menu>li>a>i {
    width: 16px;
    margin-right: 3px;
}

.dropdown-menu>li>a:hover {
    color: #fff;
    background-color: var(--secondary-color);
}

.dropdown-menu>li>a:hover .notification-icon {
    color: #fff;

}

.dark-mode .dropdown-menu>li>a:hover {
    color: #fff;
    background-color: var(--dark-quinary-color);
}

.dark-mode .dropdown-menu>li>a:hover .notification-icon {
    color: #fff;

}

.light-mode .dropdown-menu>li>a:hover {
    color: var(--light-quaternary-color);
    background-color: var(--light-secondary-color);
}

.light-mode .dropdown-menu>li>a:hover .notification-icon {
    color: var(--light-quaternary-color);
}

.dropdown-menu.light>li>a:hover {
    color: var(--secondary-color);
    background-color: rgba(0, 121, 192, 0.15);
}


.dropdown-menu>li>a.doing-ajax {
    pointer-events: none;
}

.dropdown-menu>li>a.doing-ajax .ajax-ellipsis-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--dark-quinary-color);
}

.dropdown-menu.rounded{
    border-radius: 5px;
}



/* Dropdown search */
.search-selection {
    position: relative;
}

.search-selection .output {
    cursor: default;
    padding-right: 30px;
}

.search-selection .search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 99;
    padding: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    min-width: 160px;
    margin-bottom: 35px;
}

.search-selection.open .search-dropdown {
    display: block;
}

.search-selection .search-filter {
    padding-left: 6px;
    padding-right: 6px;
    height: 30px;
    font-size: 13px;
}

.search-selection .result-list {
    padding: 0;
    margin: 5px 0 0;
    list-style-type: none;
    max-height: 210px;
}

.search-selection .result-list li label {
    padding: 5px 10px;
    cursor: pointer;
    background-color: #fff;
    font-size: 13px;
    color: inherit;
    display: block;
    width: 100%;
    margin-bottom: 0;
    font-weight: normal;
    position: relative;
    border-bottom: 1px solid #f3f3f3;
    text-align: left;
}

.search-selection .result-list li label .rl-item-additional {
    display: block;
    font-size: 12px;
    color: #b3b3b3;
    margin-top: 2px;
}

.search-selection .result-list li:last-child label {
    border-bottom: none;
}

.search-selection .result-list li label input[type="radio"] {
    visibility: hidden;
    position: absolute;
}

.search-selection .result-list li label:hover,
.search-selection .result-list li label:focus,
.search-selection .result-list li.active label {
    background-color: #e5e5e5;
}

.flip-horizontal {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

/**
 * UI Transitions
 */
.fade-up-enter-active,
.fade-up-leave-active {
    transition: all 0.2s ease-out;
}

.fade-up-enter-from,
.fade-up-leave-to {
    transform: translateY(100px);
    opacity: 0;
}

/**
 * Layout
 */
.scroll-container {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.scroll-container::-webkit-scrollbar-track {
    background-color: transparent;
}

.scroll-container::-webkit-scrollbar {
    width: 7px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background-color: #c0bdbd;
    border-radius: 10px;
}

@media screen and (min-width: 768px) {
    .row.mini-gap {
        margin-left: -7.5px;
        margin-right: -7.5px;
    }

    .row.mini-gap [class*="col-"] {
        padding-left: 7.5px;
        padding-right: 7.5px;
    }
} 
/************************
 *    XP LINK STYLES    *
 ************************/

.dark-mode .xp-link a:hover,a:focus {
    color: #d7d7d7;
    text-decoration: none;
    outline: 0;
    cursor: pointer;
}

/*********************************
 *    XP FileUploader STYLES     *
 *********************************/


.xp-file-uploader.inputfile{
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.xp-file-uploader.inputfile + label{
    max-width: 80%;
    font-size: 17px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
}

.xp-file-uploader.style-1.inputfile + label {
    color: #f1e5e6;
    background-color: #1f1f1f;
}

.xp-file-uploader.style-2.inputfile + label {
    border: 1px solid #343234;
    background-color: #f1e5e6;
    padding: 0;

}

.xp-file-uploader.style-2.inputfile + label span {
    width: 200px;
    min-height: 2em;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
    color: black;
}

.xp-file-uploader.style-2.inputfile + label strong {
    height: 100%;
    color: #f1e5e6;
    background-color: #000000;
    display: inline-block;
}

.xp-file-uploader.style-2.inputfile + label span, .xp-file-uploader.style-2.inputfile + label strong {
    padding: 0.625rem 1.25rem;
}

.xp-file-uploader.style-1.inputfile:focus + label,
.xp-file-uploader.style-1.inputfile + label:hover {
    background-color: #6f6f6f;
}

.xp-file-uploader.style-1.inputfile + label {
    cursor: pointer; /* "hand" cursor */
}

.xp-file-uploader.style-1.inputfile:focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.xp-file-uploader.style-2.inputfile:focus + label, .xp-file-uploader.style-2.inputfile.has-focus + label, .xp-file-uploader.style-2.inputfile + label:hover {
    border-color: #626262;
}
.xp-file-uploader.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    margin-right: 0.25em;
}

 :root {
  --app-font-family: "Overpass", sans-serif;
  --content-guard: 1920px;
  --topbar-height: 70px;
  --sidebar-width: 90px;
}

html,
body,
#app,
.xp-content-guard {
  height: 100%;
  overflow-y: auto !important;
}

body {
  background-color: #ededed;
  font-family: var(--app-font-family);
  font-size: 15px;
}

p {
  line-height: 1.5;
}

.dark-mode .xp-content-guard {
  max-width: var(--content-guard);
  margin: 0 auto;
  background-color: var(--dark-background-color);
  overflow: hidden;
  position: relative;
}

.light-mode .xp-content-guard {
  max-width: var(--content-guard);
  margin: 0 auto;
  background-color: var(--light-tertiary-color);
  overflow: hidden;
  position: relative;
}

#xp-default-banner {
  text-align: center;
  margin: 10% auto;
  max-width: 992px;
}

#xp-default-banner .xp-db-text-head {
  margin-bottom: 0;
  font-weight: 300;
  font-size: 35px;
}

#xp-default-banner .xp-db-icon {
  width: 70px;
  height: 70px;
  line-height: 70px;
  font-size: 25px;
  display: inline-block;
  border-radius: 100%;
  background-color: #eee;
  color: #959595;
}

.bg-gradient-blue {
  background: linear-gradient(261.96deg, #00578c 29.34%, #001a30 121.48%);
}

.bg-full-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.bg-full-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(270deg, rgba(0, 29, 53, 0) 29.44%, #001d35 94.6%);
}

.bg-full-image .graphic-circuit-lines {
  position: absolute;
  width: 200px;
  top: calc(50% - 140px);
  left: 0;
  pointer-events: none;
}

.ve-circle-avatar {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 100%;
  overflow: hidden;
}

/**
 * Form elements
 */
input,
button,
select,
textarea {
  font-family: var(--app-font-family);
}

.cp-v-card {
  border-bottom: 1px solid #4b4b4b;
  padding: 10px 0;
}

/*
* Loris
*/
.hide-input-file {
  visibility: hidden !important;
  position: absolute !important;
  height: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
}

.hide-element {
  visibility: hidden !important;
  opacity: 0 !important;
}

select.form-control {
  cursor: pointer;
}

/**
 * Authentication
 */
.ve-full-page-knife-cut {
  height: 100%;
}

.ve-full-page-knife-cut .kc-columns {
  width: 100%;
  height: 100%;
  position: relative;
}

.ve-full-page-knife-cut .kc-columns::after {
  content: "";
  clear: both;
  display: table;
}

.kc-columns .kc-col-left,
.kc-columns .kc-col-right {
  float: left;
  width: calc(50% + 150px);
  height: 100%;
  display: flex;
  align-items: center;
}

.kc-columns .kc-col-left {
  justify-content: flex-start;
  padding-left: 12%;
}

.kc-columns .kc-col-right {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  justify-content: flex-end;
  padding-right: 12%;
}

.kc-columns .kc-col-right .kc-skew {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  overflow: hidden;
}

.kc-columns .kc-col-right .kc-skew::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(261.96deg, #00578c 29.34%, #001a30 121.48%);
  -ms-transform: skew(14deg, 0deg);
  -webkit-transform: skew(14deg, 0deg);
  transform: skew(14deg, 0deg);
  transform-origin: left top;
}

#ve-page-auth .pa-left-content {
  position: inherit;
  max-width: 480px;
  text-align: justify;
}

.pa-left-content .pa-lc-logo {
  max-width: 100%;
  height: auto;
}

.pa-left-content .pa-lc-text {
  color: #fff;
  margin-top: 10px;
}

.auth-logo {
  text-align: center;
  margin-bottom: 40px;
  height: 66px;
}

.auth-card-panel {
  width: 440px;
}

.dark-mode .auth-card-panel .acp-boxer {
  background-color: var(--dark-secondary-color);
  padding: 40px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  color: var(--dark-color-text);
}

.dark-mode .auth-card-panel .acp-boxer a {
  color: #faf7f7;
}

.dark-mode .auth-card-panel .acp-boxer a:hover {
  color: #808080;
}

.light-mode .auth-card-panel .acp-boxer a {
  color: #020202;
}

.light-mode .auth-card-panel .acp-boxer a:hover {
  color: #808080;
}

.light-mode .auth-card-panel .acp-boxer {
  padding: 40px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  color: var(--light-color-text);
}

.auth-card-panel .acp-heading {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.dark-mode .auth-card-panel .acp-heading {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--dark-color-text);
}

.light-mode .auth-card-panel .acp-heading {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--light-color-text);
}

.auth-card-panel .acp-description {
  line-height: 1.3;
  color: #8d8d8d;
  font-size: 14px;
}

.dark-mode .auth-card-panel .acp-footer {
  color: var(--dark-quaternary-color);
  font-weight: 200;
  font-size: 14px;
  padding-top: 20px;
  line-height: 1;
}

.light-mode .auth-card-panel .acp-footer {
  color: var(--light-secondary-color);
  font-weight: 200;
  font-size: 14px;
  padding-top: 20px;
  line-height: 1;
}

.auth-card-panel .acp-boxer.head-tail-gapped {
  padding-top: 150px;
  padding-bottom: 150px;
}

.text-separator {
  position: relative;
  text-align: center;
  line-height: 1;
}

.text-separator span {
  display: inline-block;
  background-color: #fff;
  padding: 0 15px;
  position: relative;
}

.text-separator::before {
  position: absolute;
  content: "";
  height: 1px;
  background-color: #dedede;
  left: 10px;
  right: 10px;
  top: 48%;
}

/**
 * Top bar
 */
#app-topbar {
  width: 100%;
  height: var(--topbar-height);
  position: fixed;
  max-width: var(--content-guard);
  top: 0;
  left: 50%;
  z-index: 90;
  padding: 0 15px;
  padding-left: calc(var(--sidebar-width) + 15px);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #424242;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}

.dark-mode #app-topbar {
  background-color: var(--dark-tertiary-color);
}

.light-mode #app-topbar {
  background-color: #c1c1c1;
}

#app-topbar .at-content {
  height: 100%;
  width: 100%;
}

.at-content .at-logo {
  max-width: 280px;
  min-width: 194px;
  height: 30px;
  display: inline-block;
}

.at-content .at-logo img {
  max-height: 100%;
  max-width: 100%;
  min-height: 30px;
}

.at-lu-content>div:not(:last-child) {
  margin-right: 13px;
}

.at-lu-content .at-lu-details span {
  display: block;
  line-height: 1;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.at-lu-content .at-lu-details .at-lud-sub {
  font-size: 12px;
  font-weight: 200;
}

.dark-mode .at-lu-content .at-lu-details,
.dark-mode .at-lu-content .at-icon-dropdown {
  color: #fff;
}

.light-mode .at-lu-content .at-lu-details,
.light-mode .at-lu-content .at-icon-dropdown {
  color: #000000;
}

.at-content .at-elem-separator {
  width: 1px;
  height: calc(100% - 20px);
  margin: 0 25px;
  background-color: var(--dark-seven-color);
}

.light-mode .at-content .at-elem-separator {
  background-color: #999999;
}


.at-content .at-icon-item {
  position: relative;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 70px;
  text-align: center;
  cursor: pointer;
}

.at-icon-item .at-ii-icon {
  display: inline-block;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  position: relative;
}

.light-mode .at-icon-item .at-ii-icon {
  color: #313131;
}

.light-mode .at-content .at-icon-item:hover  {
  color: #d3d3d3;
  background-color: var(--light-senary-color);
}


.at-content .at-icon-item:hover {
  background-color: var(--dark-senary-color);
}

.at-content .at-icon-item:hover .at-ii-icon {
  color: var(--quaternary-color);
}

.icon-bubble {
  position: absolute;
  display: inline-block;
  min-width: 20px;
  height: 20px;
  line-height: 16px;
  border-radius: 100px;
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  z-index: 1;
  padding: 3px;
  top: -5px;
  left: 50%;
  background-color: #fff;
  white-space: nowrap;
}

.icon-bubble.bubble-red {
  background-color: #f00;
}

.at-content .at-search {
  width: 412px;
}

.at-search .form-control {
  background-color: transparent;
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  box-shadow: none;
  color: #fff;
  padding-right: 50px;
}

.light-mode .at-search .form-control {
  color: #000000;
}

.at-search .icon-control .ic-icon {
  background-color: transparent;
  color: #fff;
  font-size: 20px;
  width: 40px;
}

.light-mode .at-search .icon-control .ic-icon {
  background-color: transparent;
  color: #000000;
  font-size: 20px;
  width: 40px;
}

.light-mode #megaSearch::placeholder {
  color: #000;
}

#tb-mega-menu1 {
  min-height: 265px;
  position: absolute;
  background-color: #fff;
  left: 0;
  right: 0;
  padding: 40px 8%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

#tb-mega-menu1 .tb-mm-wrap {
  flex-wrap: wrap;
}

#tb-mega-menu {
  position: absolute;
  background-color: #fff;
  left: 0;
  right: 0;
  padding: 40px 8%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

#tb-mega-menu .tb-mm-wrap {
  flex-wrap: wrap;
}

.tb-mm-wrap .tb-mm-item {
  width: 20%;
  padding-right: 30px;
  margin-bottom: 20px;
}

.tb-mm-item>a {
  padding: 13px 13px;
}

.tb-mm-item .tb-mmi-icon {
  width: 35px;
  min-width: 35px;
  font-size: 18px;
}

.tb-mm-item .tb-mmi-text {
  color: var(--body-color);
  flex: 1;
}

.tb-mmi-text .tb-mmi-label {
  margin-bottom: 5px;
  line-height: 1;
}

.tb-mmi-text .tb-mmi-desc {
  font-size: 12px;
}

.tb-mm-item>a:hover {
  background-color: rgba(0, 121, 192, 0.15);
}

/**
* View as company top bar
*/
.viewASCompany-container {
  display: flex;
  align-items: center;
  height: 100%;
}

.viewASCompany-container .viewASCompany-logo {
  filter: drop-shadow(1px 2px 9px rgba(0, 121, 192, 0.15));
  border: 0.001em solid #3f3f3f;
  border-radius: 50px;
  height: 2.2rem;
  justify-content: center;
  overflow: hidden;
  margin-right: 10px;
  width: 2.2rem;
  min-width: 2.2rem;
}

.viewASCompany-container .viewASCompany-logo img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.viewASCompany-container .viewAsCompany-text {
  font-size: 15px;
  color: white;
  margin-right: 10px;
}

.light-mode .viewASCompany-container .viewAsCompany-text {
  font-size: 15px;
  color: inherit;
  margin-right: 10px;
}

.viewASCompany-container .viewASCompany-downArrow {
  font-size: 15px;
  color: white;
  margin-right: 10px;
}

.light-mode .viewASCompany-container .viewASCompany-downArrow {
  font-size: 15px;
  color: rgb(0, 0, 0);
  margin-right: 10px;
}

.vw-company-list {
  width: 240px;
}

.vw-container>li>a.doing-ajax {
  pointer-events: none;
}

.vw-container>li>a.doing-ajax .ajax-ellipsis-wrap {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: var(--dark-quinary-color);
}
.dark-mode .vw-search-input {
  background-color: #5d5d5d !important;
}
.vwbar.signout {
  cursor: pointer;
  height: 44px;
  line-height: 30px;
  border-top: 1px black solid;
  text-align: center;
  margin-top: 5px;
  font-weight: 300;
}

.vwbar.signout:hover {
  background-color: black;
}

.light-mode .vwbar.signout:hover {
  background-color: #dddddd;
}

.vw-view-container {
  width: 240px;
  padding: 0;
}

.vw-company-list:hover {
  cursor: pointer;
  background-color: var(--dark-quinary-color);
}

.light-mode .vw-company-list:hover {
  cursor: pointer;
  background-color: var(--light-secondary-color);
  color: var(--light-tertiary-color);
}

.vw-search-container {
  padding: 10px 15px;
  border-bottom: 1px solid black;
}

.megasearch {
  height: 35px;
}

#tb-search .ic-icon {
  height: 35px;
  line-height: 36px;
  font-size: 15px;
}



/**
* Field set
*/
.fl-fieldset {
  border-color: #d3d3d3;
  border-width: 1px;
  padding-bottom: 5px;
}

/**
 * Side bar
 */
#app-sidebar {
  width: var(--sidebar-width);
  position: fixed;
  background-color: var(--secondary-color);
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 99;
  color: var(--color-text);
}

.dark-mode #app-sidebar {
  background-color: var(--dark-secondary-color);
  color: var(--dark-color-text);
}

.light-mode #app-sidebar {
  background-color: #999999;
  color: var(--light-color-text);
}

.as-do-logo {
  text-align: center;
  height: var(--topbar-height);
  display: flex;
  justify-content: center;
  align-items: center;
}

.as-nav .as-nav-item {
  text-align: center;
}

.dark-mode .as-nav .as-nav-item.active,
.dark-mode .as-nav .as-nav-item:hover {
  background-color: var(--menu-selected-color);
  color: var(--dark-quaternary-color) !important;
}

.light-mode .as-nav .as-nav-item.active,
.light-mode .as-nav .as-nav-item:hover {
  background-color: var(--menu-selected-color);
  color: var(--light-tertiary-color) !important;
}

.light-mode .as-nav .as-nav-item.active a,
.light-mode .as-nav .as-nav-item:hover a {
  color: var(--light-tertiary-color) !important;
}

.as-nav .as-nav-item>a {
  display: block;
  padding: 13px 5px;
}

.as-nav-item .as-ni-icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 1px;
}

.as-nav-item .as-ni-label {
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

/**
 * App container
 */
#app-container {
  position: relative;
  margin-left: var(--sidebar-width);
  margin-top: var(--topbar-height);
  display: block;
  min-height: 100%;

  padding: 60px 135px 25px;
}

/**
*Nuwan
*/
.app-qb-thumb {
  width: 250px;
}

.app-qb-thumb.btn:hover {
  cursor: pointer;
}

.ss-app-container {
  width: 280px;
  height: 160px;
  padding: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 5px;
  border: 1px solid #ffffff;
}

.dark-mode .ss-app-container {
  background-color: var(--dark-tertiary-color);
  border: 1px solid var(--dark-tertiary-color);
}

.light-mode .ss-app-container {
  background-color: #e5e5e5;
  border: 1px solid #e5e5e5;
}

.side-box {
  width: auto;
  margin-left: 100px;
  margin-top: 20px;
  margin-right: 6px;
  border: 1px solid #d3cfcf;
  padding: 24px;
}

.no-notification-icon {
  font-size: 100px;
  padding-top: 65px;
  color: var(--secondary-color);
}

/*
*Radio button
*/
/* input[type=radio].vs-Radio {
  padding: 5px;
  margin-right: 5px;
  -webkit-appearance: none;
  outline: 0.1em solid black;
  outline-offset: 0.1rem;
}

input[type=radio]:checked.vs-Radio {
  display: inline-block;
  background-color: var(--secondary-color);
} */

.two-fa {
  border: 1px solid #c8c8c8;
  padding: 10px;
}

.xp_under_construction {
  text-align: center;
}

.text-under-logo {
  display: none;
}

.text-under-logo.show {
  display: block;
  position: absolute;
  right: 0px;
  color: white;
  line-height: 1px;
  font-size: 11px;
  bottom: -7px;
}

.fa-icon {
  font-size: 25px;
  color: var(--secondary-color);
}

/*
*Assign Employees
*/
.ase_no_results {
  position: absolute;
  top: 248px;
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
  flex-direction: column;
  left: 7px;
}

.ase_no_results-container {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ase_no_results-icon {
  font-size: 35px;
  color: #cbcbcb;
}

.ase_no_results-header {
  font-size: 20px;
  margin-top: 5x;
  font-weight: 500;
}

/*
*Mega Search
*/
.mega_search_no_results {
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
  flex-direction: column;
}

.mega_search_no_results-container {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mega_search_no_results-icon {
  font-size: 35px;
  color: #cbcbcb;
}

.mega_search_no_results-header {
  font-size: 20px;
  margin-top: 5x;
  font-weight: 500;
}

.megaSearch .megaSearch-main-title {
  padding: 0px 15px;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 1px solid #d2d5d7;
  min-height: 60px;
}

.megaSearch .megaSearch-main-item {
  padding-top: 14px;
  padding-bottom: 9px;
}

.megaSearch-bar-ul li.megaSearch-main-item {
  border-bottom: 1px solid #d2d5d7;
}

.megaSearch-bar-ul li:last-child.megaSearch-main-item {
  border-bottom: 0;
}

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

.megaSearch-description ul {
  list-style: none;
  padding-left: 0;
}

.megaSearch-sub-list {
  border-bottom: 1px solid #d7d7d7;
  font-size: 15px;
  font-weight: 400;
  margin: 0;
  list-style: inside;
}

.megaSearch-sub-list li {
  padding-left: 0 !important;
}

/* .notification-sub-list :hover {
  background-color:#e9f7ff;;
} */
.megaSearch-sub-list li::marker {
  font-size: 20px !important;
}

.sub-megaSearch-title {
  font-size: 15px;
}

.sub-megaSearch-date {
  font-size: 12px;
}

.megaSearch-no-results-text {
  position: absolute;
  left: 120px;
  top: 60px;
  font-size: 20px;
  font-weight: 600;
  list-style: none;
}

.megaSearch-sub-list .unread {
  color: var(--secondary-color);
  font-weight: 600;
  background-color: #f2faff;
  cursor: pointer;
}

.megaSearch-container {
  max-width: 775px;
  margin: 0 auto;
}

.megaSearch-main-date {
  font-size: 12px;
  color: #8d8d8d;
}

.megaSearch-icon-main {
  font-size: 18px;
  max-width: 18px;
  min-width: 18px;
  color: var(--secondary-color);
}

.megaSearch-main-container {
  padding-top: 15px;
  padding-bottom: 5px;
  padding-left: 30px;
}

.megaSearch-main-title {
  font-size: 20px;
  padding-left: 25px;
}

.megaSearch-icon {
  max-width: 18px;
  min-width: 18px;
  font-size: 18px;
  color: black;
}

.dark-mode .megaSearch-icon {
  color: #f7f7f7;
}

.dark-mode .megaSearch-title {
  color: #f7f7f7;
  font-size: 13px;
}

.dark-mode .megaSearch-title:hover {
  color: #8d8d8d;
}

.megaSearch-title {
  color: #000;
  font-size: 13px;
}

.megaSearch-title:hover {
  color: var(--dark-senary-color);
}

.megaSearch-description {
  font-size: small;
}

.megaSearch-description ul {
  list-style: none;
  padding-left: 0;
}

.megaSearch-description ul :last-child {
  padding-bottom: 0;
}

.megaSearch-description ul li {
  padding-left: 85px !important;
  margin-bottom: 5px;
  cursor: pointer;
}

.megaSearch-description ul li span {
  color: #8d8d8d;
}

.megaSearch-description ul li.highlight {
  color: var(--secondary-color);
  font-weight: 600;
  padding-top: 5px;
}

.dark-mode .megaSearch-description ul li.highlight {
  color: white;
}

.dark-mode .megaSearch-description ul li a {
  color: rgb(226, 226, 226);
}

.megaSearch-description ul li a {
  color: black;
}

.megaSearch-description .megaSearch-bar-ul li {
  padding-left: 15px !important;
}

.megaSearch-description ul li a:hover {
  color: #a8a8a8;
}

.dark-mode .megaSearch-description ul li a:hover {
  color: #c3c3c3;
}

/*
*Registration
*/
.registrations-action-btn {
  font-size: 20px !important;
}

/*
*Notification bar and Notifications
*/

.notification .notification-main-title {
  padding: 0px 15px;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 1px solid #d2d5d7;
}

.notification .notification-main-item {
  padding-top: 11px;
}

.notification-bar-ul li.notification-main-item {
  border-bottom: 1px solid #d2d5d7;
}

.notification-bar-ul li:last-child.notification-main-item {
  border-bottom: 0;
}

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

.notification-bar-ul li:nth-of-type(1n + 4) {
  display: none;
}

.notification-description ul {
  list-style: none;
  padding-left: 0;
}

.notification-sub-list {
  border-bottom: 1px solid #d7d7d7;
  font-size: 15px;
  font-weight: 400;
  margin: 0;
  list-style: inside;
}

.notification-sub-list li {
  padding-left: 0 !important;
}

/* .notification-sub-list :hover {
  background-color:#e9f7ff;;
} */
.notification-sub-list li::marker {
  font-size: 20px !important;
}

.sub-notification-title {
  font-size: 14px;
}

.sub-notification-date {
  font-size: 12px;
}

.notification-sub-list .unread {
  color: var(--secondary-color);
  font-weight: 600;
  background-color: #f2faff;
  cursor: pointer;
}

.notification-container {
  max-width: 775px;
  margin: 0 auto;
}

.notification-main-date {
  font-size: 12px;
  color: #8d8d8d;
}

.notification-icon-main {
  font-size: 24px;
  width: 70px;
  min-width: 70px;
  text-align: center;
  color: var(--secondary-color);
}

.notification-main-container {
  padding-top: 15px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

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

.notification-icon {
  max-width: 35px;
  min-width: 20px;
  font-size: 20px;
  color: var(--secondary-color);
  text-align: center;
}

.notification-description {
  font-size: small;
}

.notification-description ul {
  list-style: none;
  padding-left: 0;
}

.notification-description ul :last-child {
  padding-bottom: 0;
}

.notification-description ul li {
  padding-left: 5px !important;
  margin-bottom: 5px;
  padding-right: 5px;
  cursor: pointer;
}

.notification-description ul li span {
  color: #8d8d8d;
}

.dark-mode .notification-description ul li span {
  color: #b7b6b6;
}

.notification-description ul li.unread {
  background-color: #f2faff;
  color: var(--secondary-color);
  font-weight: 600;
  padding-top: 10px;
}

.dark-mode .notification-description ul li.unread {
  background-color: #6e6e6e;
}

.dark-mode .notification-page .notification-description ul li.unread {
  background-color: #2f2f2f;
}

.notification-description ul li a {
  color: black;
}

.dark-mode .notification-description ul li a {
  color: #f9f9f9;
}

.notification-description .notification-bar-ul li {
  padding-left: 5px !important;
  padding-right: 5px;
}

.notification-description ul li a:hover {
  color: rgb(187, 187, 187);
}

.dark-mode .notification-description ul li a:hover {
  color: rgb(187, 187, 187);
}


.notification .mark-as-read {
  font-size: 15px;
  font-weight: 400;
  color: #2491c7;
  cursor: pointer;
}

.dark-mode .notification .mark-as-read {
  color: #ffffff;
}

.mark-as-read-icon {
  letter-spacing: -5px;
}

.view-all-notifcations {
  text-decoration: none;
}

.image-icon-text:hover {
  color: #e1dede;
}

.viewall-ul {
  padding: 0;
  margin: 0;
  border-top: 1px solid #d3d2d2;
  list-style: none;
}

.dark-mode .action-btns {
  color: var(--dark-quaternary-color);
}

.dark-mode .action-btns:hover {
  color: #9d9c9c;
}

.light-mode .action-btns {
  color: var(--light-primary-color);
}

.light-mode .action-btns:hover {
  color: var(--light-senary-color);
}

.data-loader-container {
  position: relative;
  min-height: 300px;
}

.link-box {
  margin: 0 15px 15px 15px;
  padding: 22px 22px 22px 22px;
  border: 1px solid #d5d5d5;
  width: 96.6%;
}

.link-box-remove {
  position: absolute;
  right: 6px;
  top: 3px;
  font-size: 20px;
}

.link-box-remove.edit-service-link {
  right: 0 !important;
  top: -5px !important;
}

.sub-text {
  color: #8d8d8d;
  font-size: 13px;
}

.bgcolor-light-gray {
  background-color: #f1f1f1;
}

.light-gray {
  color: #787878;
}

.red {
  color: #ce9696 !important;
}

.blue {
  color: #0b79c0 !important;
}

.user-image-placeholder {
  position: relative;
  background-color: #fdfdfd;
}

.user-image-placeholder::before {
  display: inherit;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f007";
  font-size: 50px;
  color: #c5c5c5;
  text-align: center;
}

.sph-container {
  background-color: #f5f5f5;
}

/*
*No result
*/
.no-results {
  display: flex;
  justify-content: center;
  height: 500px;
  width: 100%;
  align-items: center;
  flex-direction: column;
  padding-bottom: 165px;
}

.no-results .no-results-header {
  font-size: 22px;
  margin-top: 10px;
  font-weight: 500;
}

.no-results .no-results-icon {
  font-size: 50px;
  color: #cbcbcb;
}

.no-results-icon-container {
  background: #ebebeb;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  border: 1px solid #efefef;
}

/*
*No permissions
*/
.no-permission {
  display: flex;
  justify-content: center;
  height: 500px;
  width: 100%;
  align-items: center;
  flex-direction: column;
  padding-bottom: 165px;
}

.no-permission-icon-container {
  background: #ebebeb;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  border: 1px solid #efefef;
}

.no-permission-header {
  font-size: 22px;
  margin-top: 10px;
  font-weight: 500;
}

.no-permission-icon {
  font-size: 50px;
  color: #cbcbcb;
}

/*
*Scroll bar
*/
.side-bar-scroll {
  height: calc(100% - 104px);
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#show_scroll_up_down_btn {
  display: none;
}

/* .side-bar-scroll::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
} */

.side-bar-scroll::-webkit-scrollbar {
  display: none;
  /* width: 6px;
	background-color: #F5F5F5; */
}

/* .side-bar-scroll::-webkit-scrollbar-thumb
{
	background-color: #1881c6;
} */
.sidebar-bottom {
  height: 65px;
  bottom: 0;
  position: absolute;
  width: 100%;
}

.sidebar-company-logo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 100%;
  display: inline-block;
  height: 40px;
  overflow: hidden;
  width: 41px;
}

.sidebar-bottom-arrows {
  font-size: 20px;
}

.sidebar-up {
  color: #00578c;
  transition: 0.25s ease;
  transform: rotate(0deg);
}

.sidebar-arrow-animate {
  transform: rotate(180deg);
}

.sb-mega-menu-icon {
  height: 100%;
  font-size: 25px;
  text-align: center;
  line-height: 70px;
}

.sb-mega-menu-icon:hover {
  cursor: pointer;
  background-color: var(--quinary-color);
}

.side-mega-menu {
  background-color: var(--dark-tertiary-color);
  height: 100%;
  width: 100%;
  z-index: 9999999;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.light-mode .side-mega-menu {
  background-color: var(--light-tertiary-color);
}

.dark-mode .side-mega-menu {
  background-color: var(--dark-background-color);
}

.side-mega-container {
  width: 100%;
  height: 100%;
  padding: 60px 100px 0;
}

.side-mega-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.dark-mode .side-mega-top .close-icon {
  font-size: 30px;
  color: var(--dark-quaternary-color);
}

.dark-mode .side-mega-top .close-icon :hover {
  cursor: pointer;
  color: var(--dark-quinary-color);
}

.light-mode .side-mega-top .close-icon {
  font-size: 30px;
  color: var(--light-secondary-color);
}

.light-mode .side-mega-top .close-icon :hover {
  cursor: pointer;
  color: var(--light-quinary-color);
}

.mode .side-mega-top .close-icon {
  font-size: 30px;
  color: var(--quaternary-color);
}

.mode .side-mega-top .close-icon :hover {
  cursor: pointer;
  color: var(--quinary-color);
}

.side-mega-middle-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
}

.side-mega-middle-boxes {
  background-color: #3e3e3f;
  width: 300px;
  height: 100px;
  flex: 0 0 19%;
  margin-right: 0.85%;
  box-sizing: border-box;
  margin-top: 15px;
}

.dark-mode .side-mega-middle-boxes {
  background-color: var(--dark-eight-color);
  color: white;
}

.light-mode .side-mega-middle-boxes {
  background-color: #e3e3e3;
  color: rgb(0, 0, 0);
}

.side-mega-middle-boxes:hover {
  background-color: var(--dark-quinary-color);
  cursor: pointer;
}

.light-mode .side-mega-middle-boxes:hover {
  background-color: var(--light-secondary-color);
  color: var(--light-tertiary-color);
}

.dark-mode .side-mega-middle-boxes:hover {
  background-color: var(--dark-quinary-color);
  color: var(--dark-color-text);
}

.smm-content {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 15px;
}

.smm-icon {
  font-size: 40px;
}

.slide-fade-right-enter-active {
  transition: all 0.1s ease-out;
}

.slide-fade-right-leave-active {
  transition: all 0.2s ease-out;
}

.slide-fade-right-enter-from,
.slide-fade-right-leave-to {
  transform: translateX(-50px);
  opacity: 0;
}

.slide-fade-top-enter-active {
  transition: all 0.1s ease-out;
}

.slide-fade-top-leave-active {
  transition: all 0.2s ease-out;
}

.slide-fade-top-enter-from,
.slide-fade-top-leave-to {
  transform: translateY(-50px);
  opacity: 0;
}

/*
*Table
*/
.th-40 {
  width: 40%;
}

/*
company icon
*/
.image-icon-container {
  flex-direction: row;
}

.image-icon {
  filter: drop-shadow(1px 2px 9px rgba(0, 121, 192, 0.15));
  border: 0.001em solid #e4dfdf;
  border-radius: 50px;
  height: 2.2rem;
  justify-content: center;
  overflow: hidden;
  margin-right: 5px;
  width: 2.2rem;
}

.image-icon .company-icon {
  max-width: 100%;
  object-fit: cover;
  height: 100%;
}

.image-icon-nav {
  border: 0.15em solid #e4dfdf;
  border-radius: 50px;
  height: 40px;
  justify-content: center;
  overflow: hidden;
  margin-right: 5px;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
}

.image-icon-nav img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
}

/**
* table-menu
*/
.table-menu-bar {
  list-style: none outside none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.table-menu-bar a {
  margin: 25px;
}

/**
*popup open
*/
.pop-card-panel {
  background-color: #fff;
  box-shadow: 1px 2px 9px rgba(0, 121, 192, 0.15);
}

.popup {
  position: absolute;
  background-color: #fff;
  min-width: 650px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 25px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.dark-mode .popup {
  background-color: var(--dark-secondary-color);
}

.light-mode .popup {}

.popup-overlay {
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 100 !important;
}

.dark-mode .popup-close-container {
  position: absolute;
  right: 30px;
  top: 20px;
  color: var(--dark-senary-color);
  font-size: 30px;
  cursor: pointer;
}

.light-mode .popup-close-container {
  position: absolute;
  right: 30px;
  top: 20px;
  color: var(--light-senary-color);
  font-size: 30px;
  cursor: pointer;
}

.popup-close-container a {
  color: inherit;
}

/**
*Accordion
*/

.accordion {
  box-shadow: 1px 2px 9px rgb(0 121 192 / 15%);
  position: relative;
}

.accordion .head {
  align-items: center;
  background-color: #ffffff;
  color: #4d5156;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 0px 20px;
  transition: 0.2s ease-in-out;
}

.accordion .arrow {
  color: #4d5156;
  font-size: 20px;
  opacity: 1;
  transition: 0.25s ease;
  transform: rotate(-180deg);
}

.accordion .arrow-animate {
  opacity: 1;
  transform: rotate(0deg);
}

.accordion .content {
  /* opacity: 0; */
  background-color: #ffffff;
  border-top: 0.001em solid #dcdcdc;
  color: #333333;
  /* max-height: 0; */
  /* padding: 0 20px; */
  padding: 5px 20px;
  /* transition: 0.5s ease-in-out;; */
}

.accordion .content p {
  /* opacity: 0; */
  /* transition: 0.4s ease-in-out;; */
}

.accordion .content.show p {
  opacity: 1;
}

.accordion .show {
  opacity: 1;
  max-height: 10000px;
  /* height: auto; */
  padding: 5px 20px;
}

/*
*test
*/
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

/*
*Company avatar group
*/
.avatar-group-container {
  display: flex;
  justify-content: flex-start;
}

.avatar-group {
  display: flex;
  overflow: hidden;
  margin-left: -0.5rem;
}

.avatar-group-image {
  border-radius: 9999px;
  width: 2rem;
  height: 2rem;
}

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

.p-avatar {
  align-items: center;
  display: inline-flex;
  font-size: 1rem;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.p-avatar.p-avatar-image {
  background-color: transparent;
}

.p-avatar-circle img,
.p-avatar.p-avatar-circle {
  border-radius: 50%;
}

.p-avatar .p-avatar-icon {
  font-size: 1rem;
}

.p-avatar img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.p-avatar-group .p-avatar+.p-avatar {
  margin-left: -0.5rem;
}

.p-avatar-group {
  align-items: center;
  display: flex;
}

.p-avatar {
  background-color: #dee2e6;
  border-radius: 6px;
}

.p-avatar.p-avatar-lg {
  width: 2.2rem;
  height: 2.2rem;
  font-size: 0.8rem;
  margin-left: 0;
  cursor: auto;
}

.p-avatar.p-avatar-lg .p-avatar-icon {
  font-size: 0.8rem;
}

.p-avatar-group .p-avatar {
  border: 2px solid #ffffff;
}

/*
* App version
*/
.app-version {
  position: absolute;
  right: 136px;
  top: 92px;
  font-size: 15px;
  color: #8b8b8b;
}

.dark-mode {
  color: #ffffff;
}

.light-mode {
  color: #8b8b8b;
}

/*
*view as customers
*/
.viewAsCustomers>li>a.doing-ajax {
  pointer-events: none;
}

.viewAsCustomers>li>a.doing-ajax .ajax-ellipsis-wrap {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: var(--primary-color);
}

.viewAsCustomers {
  max-height: 300px;
  overflow-x: auto;
  list-style: none;
  padding: 0;
}

.viewAsCustomers li a {
  display: block;
  padding: 5px 10px;
  text-align: left;
  white-space: nowrap;
  line-height: 1;
  color: inherit;
  position: relative;
}

.viewAsCustomers-selected {
  background-color: #e7e7e7;
  pointer-events: none;
  cursor: default;
}

.viewAsCustomers li a:hover {
  color: var(--secondary-color);
  background-color: rgba(0, 121, 192, 0.15);
}

.viewAsCustomer-Btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: normal;
  display: inline-block;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  margin-bottom: 0;
  height: 35px;
  border: 1px solid var(--primary-color);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  border-radius: 3px;
  outline: 0;
  white-space: nowrap;
  background-color: var(--primary-color);
  text-shadow: none;
  box-shadow: none;
  line-height: 1.6;
  padding: 3.5px 4px 4px;
  position: relative;
  -webkit-transition: all ease-in-out 0.15s;
  -moz-transition: all ease-in-out 0.15s;
  transition: all ease-in-out 0.15s;
}

.viewAsCustomer-Btn .close {
  font-size: 20px;
}

.viewAsCustomer-Btn .close:hover {
  color: red;
}

.viewAsCustomer-Btn.rounded-long-button {
  border-radius: 50px 50px;
  color: var(--secondary-color);
  background-color: #ffffff;
  font-size: 12px;
}

.viewAsCustomer-logo {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 100%;
  overflow: hidden;
}

.viewAsCustomers.scroll-container::-webkit-scrollbar {
  position: relative;
  margin-right: 20px;
}

.dashboard-heading .dashboard-edit-dashboard-wrapper {
  opacity: 0;
  font-size: 20px;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.dashboard-heading:hover .dashboard-edit-dashboard-wrapper {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/**
*Chips
*/
.basic-chip {
  border-radius: 3px;
  display: inline-block;
  padding: 7px 6px 5px;
}

.chip_red {
  background: #f48fb1;
  color: #000000;
}

.chip_yellow {
  background: #fff176;
  color: #000000;
}

.chip_green {
  /* background: #69bb67; */
  background: #81c784;
  color: #000000;
}

.chip_blue {
  background: #4fc3f7;
  color: #000000;
}

.chip_gray {
  background: #f3f3f3;
  color: #000000;
}

/*
* Bar color
*/

.app-theme-employee #app-topbar {
  background: rgb(0, 24, 44);
  background: linear-gradient(0deg,
      rgba(0, 24, 44, 1) 0%,
      rgba(3, 91, 163, 1) 100%);
}

.app-theme-client #app-topbar {
  background: rgb(0, 24, 44);
  background: linear-gradient(0deg,
      rgba(0, 24, 44, 1) 0%,
      rgba(3, 91, 163, 1) 100%);
}

.app-theme-system-admin #app-topbar {
  background-color: #000;
}

/**
*Under maintenance
*/
.under-maintenance {
  height: 530px;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

.under-maintenance img {
  display: inline-block;
  height: 100%;
  width: auto;
  overflow: hidden;
  position: relative;
}

/* ---------------------------------
    Toggle Button
   --------------------------------- */

.tgl {
  display: none;
}

.tgl,
.tgl:after,
.tgl:before,
.tgl *,
.tgl *:after,
.tgl *:before,
.tgl+.tgl-btn {
  box-sizing: border-box;
}

.tgl::selection,
.tgl:after::selection,
.tgl:before::selection,
.tgl *::selection,
.tgl *:after::selection,
.tgl *:before::selection,
.tgl+.tgl-btn::selection {
  background: none;
}

.tgl+.tgl-btn {
  outline: 0;
  display: block;
  width: 3em;
  height: 1.6em;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.tgl+.tgl-btn:after,
.tgl+.tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}

.tgl+.tgl-btn:after {
  left: 0;
}

.tgl+.tgl-btn:before {
  display: none;
}

.tgl:checked+.tgl-btn:after {
  left: 50%;
}

.tgl-vario+.tgl-btn {
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  transition: all 0.4s ease;
  border: 1px solid #e8eae9;
}

.tgl-vario+.tgl-btn:after {
  border-radius: 2em;
  background: #fbfbfb;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.tgl-vario+.tgl-btn:hover:after {
  will-change: padding;
}

.tgl-vario+.tgl-btn:active {
  box-shadow: inset 0 0 0 2em #e8eae9;
}

.tgl-vario+.tgl-btn:active:after {
  padding-right: 0.8em;
}

.tgl-vario:checked+.tgl-btn {
  background: var(--secondary-color);
}

.tgl-vario:checked+.tgl-btn:active {
  box-shadow: none;
}

.tgl-vario:checked+.tgl-btn:active:after {
  margin-left: -0.8em;
}

/* ---------------------------------
    Info Tips
   --------------------------------- */
.info-tip {
  display: inline-block;
  font-size: inherit;
  color: inherit;
  margin-left: 5px;
  cursor: pointer;
  pointer-events: all;
}

.info-tip:hover {}

.info-tip-message {
  position: absolute;
  background-color: var(--dark-primary-color);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  padding: 10px 15px;
  border-radius: 3px;
  text-align: left;
  z-index: 99993;
  width: auto;
  height: auto;
  max-width: 300px;
}

.info-tip-message:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgb(0, 0, 0);
  top: 100%;
  left: 15px;
}

.info-tip-message.from-bottom:after {
  top: -8px;
  border-top: none;
  border-bottom: 8px solid rgb(0, 0, 0);
}

/* 
Table Dropdown
*/
.table-icon-dropdown {
  color: #000000;
}

/*
*Three Dots
*/
.three-dots:before {
  content: "\22EF";
  color: var(--secondary-color);
  font-size: 20px;
}

/*
*Overlay 
*/
.overlay-styles {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0);
  opacity: 1;
  overflow-x: hidden;
  transition: 2s;
}

.overlay-content-styles {
  position: absolute;
  top: 40%;
  left: 25%;
  text-align: center;
  width: 50%;
  transition: 0.2s;
  z-index: 1001;
}

.overlay-content-styles>h1 {
  color: #ccc;
  border: 2px solid #ccc;
  margin: 0;
  border-radius: 20px;
  padding: 0;
}

/*
*Data exchange
*/
.dx-box-m-l {
  margin-left: -10px;
}

/*
right arrow list
*/
.arrow-list {
  color: #0b79c0;
}

/*
*Settings
*/
.settings-border {
  background-color: #f7f7f7;
  border-top: 1px solid var(--Senary-color);
  margin-left: -15px;
  margin-right: -35px;
  padding-right: 15px;
  margin-bottom: -30px;
  padding-bottom: 15px;
  padding-top: 15px;
}

.dark-mode .settings-border {
  background-color: var(--dark-secondary-color);
  border-top: 1px solid var(--dark-quaternary-color);
}

.light-mode .settings-border {
  background-color: var(--light-tertiary-color);
  border-top: 1px solid var(--light-secondary-color);
}

.settings-profile-pic {
  width: 12%;
}

/*
*Settings External Apps
*/
.ss-disc-quickbooks {
  background-color: #389e2a;
  height: 40px;
  line-height: 42px;
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  border-radius: 5px;
}

/*
*Settings Nav
*/
.se-header {
  font-size: 25px;
  font-weight: 600;
}

.se-nav .se-nav-item {
  text-align: left;
}

.se-nav .se-nav-item.active,
.se-nav .se-nav-item:hover {
  background-color: rgba(0, 0, 0, 1);
}

.light-mode .se-nav .se-nav-item.active,
.light-mode .se-nav .se-nav-item:hover {
  background-color: rgba(0, 0, 0, 1);
  color: white;
}

.se-nav .se-nav-item>a {
  display: flex;
  padding: 13px 5px;
  text-align: center;
}

.se-nav-item .se-ni-icon {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 1px;
}

.se-nav-item .se-ni-label {
  font-size: 15px;
  line-height: 1;
}

/*
*Image Uploader
*/
/* Photo uploader */
.app-photo-uploader {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 100%;
  display: block;
  border: 3px solid var(--dark-quinary-color);
  text-align: center;
}

.app-photo-uploader .apu-prev {
  width: 100%;
  height: 100%;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  opacity: 0.6;
  border-radius: 100%;
  overflow: hidden;
}

.app-photo-uploader input[type="file"] {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.app-photo-uploader .apu-icon {
  position: absolute;
  font-size: 25px;
  color: var(--dark-secondary-color);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  cursor: pointer;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  overflow: hidden;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  text-shadow: 0 0 11px rgba(255, 255, 255, 0.5),
    0 0 2px rgba(255, 255, 255, 0.5);
}

.app-photo-uploader.has-error .apu-icon i:before {
  content: "\f071";
}

.app-photo-uploader .apu-remove {
  position: absolute;
  z-index: 1;
  width: 20px;
  height: 20px;
  z-index: 1;
  display: inline-block;
  color: #fff;
  background-color: #e30c0c;
  border-radius: 100%;
  top: 0;
  right: 0;
  font-size: 16px;
  line-height: 1.6;
  visibility: hidden;
  opacity: 0;
}

.app-photo-uploader .apu-remove:hover {
  background-color: var(--secondary-color);
}

.app-photo-uploader:not(.loaded) .apu-icon:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.app-photo-uploader.loaded .apu-prev {
  opacity: 1;
}

.app-photo-uploader.loaded .apu-icon {
  visibility: hidden;
  opacity: 0;
}

.app-photo-uploader.loaded:hover .apu-icon,
.app-photo-uploader.loaded:hover .apu-remove {
  visibility: visible;
  opacity: 1;
}

.app-photo-uploader.boxed {
  width: 100%;
  border-radius: 3px;
  border-width: 1px;
  border-color: #c8c8c8;
}

.app-photo-uploader.boxed .apu-prev {
  border-radius: 0;
  background-size: contain;
  background-position: center;
  width: 95%;
  height: 95%;
  max-width: 95%;
  max-height: 95%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.app-photo-uploader.boxed .apu-icon {
  border-radius: 0;
}

.app-photo-uploader.boxed .apu-remove {
  top: -10px;
  right: -10px;
}

.go-to-parent-arrow {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.go-to-parent-arrow:hover {
  color: var(--dark-senary-color);
}

.go-to-parent-arrow i {
  font-size: 25px;
  margin-right: 10px;
}

/* File selector directive */
.fus1-label {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 8px 10px 5px;
  font-size: 15px;
  line-height: normal;
  color: #555555;
  outline: 0;
  border-radius: 3px;
  background-color: #fff;
  border: 1px solid #c8c8c8;
  -webkit-transition: border-color ease-in-out 0.15s;
  -moz-transition: border-color ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s;
  cursor: pointer;
}

.fus1-label .fus1-l-icon {
  margin-right: 5px;
  font-size: 16px;
}

.fus1-label .fus1-l-file-remover {
  position: absolute;
  z-index: 1;
  width: 20px;
  height: 20px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #e30c0c;
  border-radius: 100%;
  top: -10px;
  right: -10px;
  font-size: 16px;
  line-height: 1.6;
  visibility: hidden;
  opacity: 0;
}

.fus1-label:hover .fus1-l-file-remover {
  visibility: visible;
  opacity: 1;
}

.fus1-label .fus1-l-file-remover:hover {
  background-color: var(--secondary-color);
}

.fus1-label .fus1-l-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/*
*button dashboard
*/
.dashboard_menu_btn {
  margin: 0;
  padding: 0;
}

.button-long:hover .dashboard_menu_btn {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(133deg) brightness(110%) contrast(101%);
}

.dash_chart_no_results {
  position: absolute;
  top: 130px;
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
  flex-direction: column;
}

.dash_chart_no_results-container {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dash_chart_no_results-header {
  font-size: 20px;
  margin-top: 5x;
  font-weight: 500;
}

.dash_chart_no_results-icon {
  font-size: 35px;
  color: #cbcbcb;
}

/*
*button long
*/
.button-long {
  background-color: #fff;
  border: 1px solid transparent;
  box-shadow: none;
  cursor: pointer;
  color: var(--dark-secondary-color);
  display: inline-block;
  font-family: inherit;
  font-size: 15px;
  font-weight: normal;
  height: 40px;
  letter-spacing: 0.01em;
  line-height: 1.6;
  margin-bottom: 0;
  min-width: 160px;
  outline: 0;
  padding: 9px 14px 22px;
  position: relative;
  text-shadow: none;
  text-align: center;
  transition: all ease-in-out 0.15s;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-transition: all ease-in-out 0.15s;
  -moz-transition: all ease-in-out 0.15s;
}

.button-long:hover {
  background-color: var(--secondary-color);
  color: #fff;
}

.button-long:active {
  transform: translateY(2px);
  -webkit-transform: translateY(2px);
  -moz-transform: translateY(2px);
}

.dark-mode .button-long {
  background-color: var(--dark-secondary-color);
  color: #fff;
}

.light-mode .button-long {
  background-color: var(--light-secondary-color);
  color: #fff;
}

/**
*border left
*/
.border-right {
  border-right: 2px solid #d3d4d5;
  height: 70%;
  right: 0px;
  top: 15%;
}

/**
*Color
*/
.text-color-blue {
  color: #0079c0;
}

/**
  *pagination
  */
.pagination {
  display: flex;
  flex-wrap: wrap;
}

.pb-button {
  align-items: center;
  background: #ffffff;
  border: 1px solid transparent;
  color: #00578c;
  cursor: pointer;
  display: inline-flex;
  font-size: 1rem;
  height: 2.2rem;
  justify-content: center;
  line-height: 1;
  margin-left: 0.2rem;
  width: 2.2rem;
}

.pb-button:hover {
  background: #cfcfcf;
  color: #1881c6;
}

.pb-button:disabled {
  background-color: #ebebeb;
  opacity: 1;
  cursor: auto;
}

.pagination-item {
  display: inline-block;
}

.pagination-item .active {
  background-color: #1881c6;
  color: #ffffff;
}

.pagination .pagination-item .icons {
  font-size: 1.3rem;
}

.dark-mode .pagination .pb-button:disabled {
  background-color: var(--Senary-color);
  opacity: 1;
  cursor: auto;
  color: #242424;
}

.dark_mode .pagination .pagination-item {
  background-color: #272323;
}

.dark-mode .pagination .pagination-item .active {
  background-color: #626567;
  color: #ffffff;
}

.dark-mode .pagination .pb-button:not(.pb-button:disabled):hover {
  background: #080808;
  color: #ffffff;
}

.dark-mode .pagination .pb-button {
  background: #3b3b3b;
  color: #ffffff;
}

/**
 * App elements
 */
.app-card-panel {
  border-radius: 5px;
  position: relative;
  background-color: #fff;
  box-shadow: 1px 2px 9px rgba(0, 121, 192, 0.15);
}

.dark-mode .app-card-panel {
  position: relative;
  background-color: var(--dark-secondary-color);
  box-shadow: 1px 2px 9px rgba(0, 26, 41, 0.15);
}

.light-mode .app-card-panel {
  position: relative;
  background-color: transparent;
  box-shadow: 1px 2px 9px rgba(0, 26, 41, 0.15);
}

.app-table {
  border-radius: 5px;
}

.app-table .at-table {
  width: 100%;
}

.dark-mode .app-table {
  background-color: #242424;
}

.dark-mode .at-table {
  background-color: #242424;
  color: white;
}

.app-table .at-table th,
.app-table .at-table td {
  text-align: left;
  padding: 10px 20px;
  border-bottom: 1px solid #242424;
  font-size: 14px;
}

.light-mode .app-table .at-table th,
.light-mode .app-table .at-table td {
  text-align: left;
  padding: 10px 20px;
  border-bottom: 1px solid #ffffff;
  font-size: 14px;
}

.app-table .at-table th {
  position: relative;
  color: #ffffff;
}

.app-table .at-table th div div i {
  cursor: pointer;
  color: #9d9b9b;
}

.app-table .at-table th div div i:hover {
  cursor: pointer;
  color: #696868;
}

.dark-mode .app-table .at-table th {
  position: relative;
  color: #ffffff;
}

.light-mode .app-table .at-table th {
  position: relative;
  color: var(--light-color-text);
}

.app-table .at-table th:not(:first-child):before {
  position: absolute;
  content: "";
  width: 2px;
  top: 4px;
  bottom: 4px;
  left: 3px;
  background-color: var(--dark-tertiary-color);
}

.light-mode .app-table .at-table th:not(:first-child):before {
  background-color: #dddddd;
}

.dark-mode .at-table tr:nth-child(even) {
  background-color: #2c2c2c;
}

.light-mode .at-table tr:nth-child(even) {
  background-color: #f3f3f3;
}

.dark-mode .at-table tr:not(.at-heading):not(.at-no-results):hover {
  background-color: #494949;
  color: white;
}

.light-mode .at-table tr:not(.at-heading):not(.at-no-results):hover {
  background-color: #d9d9d9;
  color: black;
}

/*
* Styles KD
*/
/* Content Tabs */
.content-tabs .ct-nav {
  margin-bottom: 25px;
  border-bottom: 1px solid var(--dark-senary-color);
}

.ct-nav .ct-nav-item {
  padding: 10px 15px;
  line-height: 1;
  color: inherit;
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: #858585;
}

.ct-nav .ct-nav-item:first-child {
  padding-left: 0;
}

.ct-nav .ct-nav-item:not(:last-child):after {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  right: 0;
  width: 1px;
  background-color: #ddd;
}

.ct-nav .ct-nav-item:before {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: -1px;
  height: 3px;
  background-color: transparent;
}

.ct-nav .ct-nav-item:first-child:before {
  left: 0;
}

.ct-nav .ct-nav-item.active {
  color: var(--dark-quaternary-color);
}

.light-mode .ct-nav .ct-nav-item.active {
  color: var(--dark-quinary-color);
}

.dark-mode .ct-nav .ct-nav-item:hover:before,
.dark-mode .ct-nav .ct-nav-item.active:before {
  background-color: var(--dark-quaternary-color);
}

.light-mode .ct-nav .ct-nav-item:hover:before,
.light-mode .ct-nav .ct-nav-item.active:before {
  background-color: var(--light-secondary-color);
}

.ct-nav-ellipsis {
  display: inline-block;
  width: 145px;
}

.content-tabs .ct-tab {
  display: none;
}

.content-tabs .ct-tab.active {
  display: block;
}

/* Popup Modifications */
.popup .pop-action-bottom {
  background-color: #f7f7f7;
  border-top: 1px solid var(--dark-senary-color);
  margin: 10px -25px -25px;
  padding: 15px 25px;
}

.dark-mode .popup .pop-action-bottom {
  background-color: #353535 !important;
  border-top: 1px solid var(--dark-quaternary-color);
}

.light-mode .popup .pop-action-bottom {
  background-color: #cdcdcd !important;
  border-top: 1px solid #b1aaaa;
}

.popup .app-photo-uploader {
  width: 80px;
  height: 80px;
}

.popup .popup-close-container {
  right: 25px;
}

.pop-advanced .popup-close-container {
  top: 25px;
  right: 25px;
  font-size: initial;
}

.popup .popup-close-container a:hover,
.popup .popup-close-container a:focus {
  color: var(--primary-color);
}

.dark-mode .popup .popup-close-container a:hover,
.dark-mode .popup .popup-close-container a:focus {
  color: var(--dark-primary-color);
}

.light-mode .popup .popup-close-container a:hover,
.light-mode .popup .popup-close-container a:focus {
  color: var(--dark-primary-color);
}

.pop-advanced .popup-close-container .button {
  width: 25px;
  height: 25px;
  line-height: 1;
  padding: 0;
  font-size: 25px;
}

.pop-action-bottom .button-transparent {
  border-color: transparent;
}

.pop-advanced .popup-close-container .button:hover {
  background-color: transparent !important;
  color: inherit;
}

/* Photo Uploader */
.app-photo-uploader.full-boxed {
  width: 100%;
  height: 200px;
  border-radius: 2px;
  border: 1px solid #c8c8c8;
}

.app-photo-uploader.full-boxed .apu-icon {
  border-radius: 0;
}

.app-photo-uploader.full-boxed .apu-prev {
  opacity: 1;
  background-position: center;
  border-radius: 0;
}

.app-photo-uploader.full-boxed .apu-remove {
  top: -5px;
  right: -5px;
}

/* Editor view card infos */
.card-info-list>div {
  margin-bottom: 10px;
  position: relative;
  padding-left: 25px;
}

.card-info-list .cil-label {
  font-weight: 600;
}

.card-info-list .cil-icon {
  display: inline-block;
  position: absolute;
  left: 0;
  width: 20px;
  text-align: center;
}

/* Quill Editor Overwrites */
.no-padding .ql-editor {
  padding: 0;
}

/* Static Page Layout */
.static-page-layout {
  max-width: 900px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

.static-page-header {
  position: relative;
  /* margin-bottom: 30px; */
}

.static-page-header .sph-col-left,
.static-page-header .sph-col-right {
  width: 50%;
  position: relative;
}

.static-page-header .sph-col-left {
  z-index: 1;
  padding: 25px;
}

.static-page-header .sph-col-right:before {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: -50%;
  right: 0;
  width: 50%;
  background-color: #f5f5f5;
  z-index: 0;
  box-sizing: border-box;
  transform-origin: bottom left;
  transform: skew(-20deg) !important;
  pointer-events: none;
}

.static-page-header .sph-col-left h1 {
  font-size: 35px;
  line-height: 1.1;
}

.static-page-header .sph-col-left .sub-heading {
  font-size: 14px;
  color: #8d8d8d;
}

.static-page-header .sph-image {
  width: 100%;
  height: 340px;
  overflow: hidden;
}

.static-page-header .sph-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* General Helpers */
.w-500 {
  width: 500px !important;
}

.min-w-90 {
  min-width: 90px !important;
}

.min-w-650 {
  min-width: 650px !important;
}

.min-w-360 {
  min-width: 360px !important;
}

.hori-center {
  margin: 0 auto !important;
}

.no-pointers,
.no-pointers * {
  pointer-events: none !important;
}

.button-negative-actions {
  background-color: #e7e7e7;
  border-color: #e7e7e7;
}

.button-negative-actions:hover {
  color: #fff !important;
}

.top-mega-bar {
  display: none;
}

.app-menus {
  margin-bottom: 10px;
  text-align: right;
}

.light-mode .app-menus a:hover {
  color: var(--light-senary-color);
}

.dark-mode .app-menus a:hover {
  color: #d7d7d7;
}

.ac-title-container {
  justify-content: space-between;
  display: flex;
}

.at-logged-user-logo-only {
  display: none;
}

.at-logged-details {
  display: flex;
  flex-direction: row-reverse;
  color: white;
  margin-top: 25px;
  align-items: center;
}

.light-mode .at-logged-details {
  color: black;
}

.at-logged-details .at-lu-content .at-lu-details span {
  display: block;
  line-height: 1;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.at-logged-details>div:not(:last-child) {
  margin-left: 13px;
}

.at-logged-details .at-lu-details span {
  display: block;
  line-height: 1;
  max-width: 200px;
  overflow: hidden;
  font-size: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.at-logged-details .at-lu-details .at-lud-sub {
  font-size: 13px;
  font-weight: 200;
}

.at-logged-details .ve-circle-avatar {
  display: inline-block;
  width: 53px;
  height: 53px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 100%;
  overflow: hidden;
}

.cp-single-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.cp-single-details {
  margin-top: 5px;
  margin-bottom: 0;
  line-height: 1;
}

.cp-single-details-margin {
  margin-left: 15px;
}

.sc-container {
  display: flex;
  min-height: 650;
}

.sc-sub-container {
  min-height: 650px;
}

.sc-nav {
  margin-top: 10px;
}

.viewAsCompany-select-text {
  font-size: 15px;
  color: white;
  margin-right: 10px;
}

.light-mode .viewAsCompany-select-text {
  color: var(--light-color-text);
}

.view_as_company_mobile_view {
  display: none;
}

.left-top-bar-container {
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
}

.mobile-search-icon-container {
  display: none;
}

/*
* Media Queries
*/
@media screen and (min-width: 1921px) {
  .ve-full-page-knife-cut {
    max-height: 1200px;
  }

  #app-sidebar {
    left: calc((100% - var(--content-guard)) / 2);
  }
}

@media screen and (max-width: 1679px) {
  .kc-columns .kc-col-left {
    padding-left: 8.5%;
  }

  .kc-columns .kc-col-right {
    padding-right: 8.5%;
  }

  #ve-page-auth .pa-left-content {
    max-width: 400px;
  }

  .bg-full-image .graphic-circuit-lines {
    width: 140px;
    top: calc(50% - 160px);
  }

  .auth-card-panel {
    width: 460px;
  }

  .auth-card-panel .acp-boxer {
    padding: 30px;
  }

  #app-container {
    padding: 50px 75px 20px;
  }

  #app-container::before {
    top: 40px;
    left: -150px;
    width: 218px;
    height: 100px;
  }
}

@media screen and (max-width: 1441px) {
  #app-container::before {
    top: 40px;
    left: -150px;
    width: 217px;
    height: 100px;
  }
}

@media screen and (max-width: 1025px) {
  #app-container::before {
    top: 40px;
    left: -150px;
    width: 200px;
    height: 100px;
  }
}

@media screen and (max-width: 991px) {

  .kc-columns .kc-col-left,
  .kc-columns .kc-col-right {
    width: 100%;
  }

  .kc-columns .kc-col-right .kc-skew {
    display: none;
  }
}

/*
* Mobile View
*/

@media screen and (min-width: 320px) and (max-width: 766px) and (orientation: portrait) {
  .auth-card-panel {
    width: 100%;
  }

  .auth-card-panel .auth-logo {
    text-align: center;
    margin-bottom: 16px;
    height: 100px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .dark-mode .auth-card-panel .acp-boxer,
  .light-mode .auth-card-panel .acp-boxer {
    background-color: transparent;
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
    color: var(--color-text);
  }

  .light-mode .auth-card-panel .acp-boxer {
    box-shadow: none;
  }

  .dark-mode .auth-card-panel .acp-boxer .form-group {
    background-color: transparent;
  }

  .side-mega-menu {}

  .side-mega-menu .side-mega-container {
    padding: 30px 20px 0;
  }

  .side-mega-menu .side-mega-container .side-mega-top {}

  .side-mega-menu .side-mega-container .side-mega-middle-container {
    flex-direction: column;
    align-items: center;
    height: 80%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  .side-mega-menu .side-mega-container .side-mega-middle-container .side-mega-middle-boxes {
    margin-right: 0;
    flex: 0 0 15%;
    width: 100%;
    height: 100px;
  }

  .side-mega-menu .side-mega-container .side-mega-top {
    align-items: flex-start;
  }

  #app-sidebar {
    display: none;
  }

  #app-container {
    position: relative;
    margin-left: 0;
    margin-top: var(--topbar-height);
    display: block;
    min-height: 100%;
    padding: 25px 25px;
  }

  #app-topbar {
    padding-left: 15px;
    background-color: #181818 !important;
  }

  .top-mega-bar {
    display: block;
    color: white;
    height: 50px;
    width: 50px;
  }

  .tb-mega-menu-icon {
    height: 100%;
    font-size: 30px;
    text-align: center;
    line-height: 58px;
  }

  .app-card-panel .app-table {
    overflow-x: auto;
  }

  .app-menus {
    text-align: left;
  }

  .ac-title-container {
    flex-direction: column;
  }

  .app-menus div {
    margin-top: 10px;
    width: 100%;
  }

  .popup {
    width: 100%;
    height: 100%;
    min-width: 0;
  }

  .at-logged-user {
    display: none;
  }

  .at-logged-user-logo-only {
    display: block;
  }

  .at-profile_menu {
    display: flex;
    flex-direction: column;
    height: 80%;
    color: white;
  }

  .at-profile_sub_menu {
    flex: 1;
  }

  .at-profile_box {
    background-color: #4d4d4d;
    padding: 25px;
    color: white;
    flex-wrap: nowrap;
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    position: relative;
  }

  .at-profile_box:hover {
    background-color: black;
  }

  .app-table .at-table th,
  .app-table .at-table td {
    white-space: nowrap;
  }

  .as-pop {
    top: 50% !important;
  }

  .cp-single-container {
    flex-direction: column;
  }

  .cp-single-details {
    display: flex;
    flex-direction: column;
  }

  .cp-single-status {
    width: fit-content;
  }

  .cp-menu-container {
    margin-top: 15px;
    display: flex;
  }

  .cp-menu-tabs {
    margin-top: 15px;
    overflow-y: hidden;
    overflow-x: auto;
  }

  .cp-single-details-margin {
    margin-top: 10px;
  }

  .cp-single-details-margin h2 {
    overflow-wrap: anywhere;
  }

  .cp-single-wrap .app-photo-uploader {
    width: 70px;
    height: 70px;
    min-width: 70px !important;
  }

  .cp-single-userlist-container {
    height: 278px;
    overflow-y: auto;
  }

  #useraddform {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #useraddform .content-tabs {
    height: 80%;
  }

  #useraddform .pop-action-bottom {
    flex: 0 0 130px;
  }

  #useraddform .content-tabs .ct-tab.active {
    display: block;
    height: 80%;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  #usereditform {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #usereditform .content-tabs {
    height: 80%;
  }

  #usereditform .pop-action-bottom {
    flex: 0 0 130px;
  }

  #usereditform .content-tabs .ct-tab.active {
    display: block;
    height: 80%;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .app-version {
    position: absolute;
    right: 16px;
    top: 36px;
    font-size: 15px;
    color: #8b8b8b;
  }

  .sc-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .se-nav {
    display: flex;
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
  }

  .sc-sub-container {
    min-height: 650px;
    width: 100%;
  }

  .sc-nav {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0 5px;
  }

  .sc-nav-container {
    margin-bottom: 15px;
  }

  .ss-app-container {
    width: 100%;
  }

  .view_as_company_mobile_view {
    display: flex;
  }

  .view_as_company_desktop_view {
    display: none;
  }

  .mobile-drop-down-close {
    display: flex;
    justify-content: flex-end;
  }

  .mobile-drop-down-close .close-icon {
    font-size: 30px;
    color: var(--quaternary-color);
  }

  .mobile-drop-down-close .close-icon :hover {
    cursor: pointer;
    color: var(--quinary-color);
  }

  .mobile-vw-search-container {
    margin-top: 15px;
  }

  .mb-vw-title {
    font-size: 25px;
    font-weight: 400;
    color: white;
  }

  .mobile-vw-container {
    width: 100%;
  }

  .mobile-view-container {
    background-color: #4d4d4d;
    padding: 0 15px;
    margin-top: 10px;
    display: flex;
    height: 60px !important;
    justify-content: space-between;
  }

  .mobile-vw-icon {
    color: white;
  }

  .mb-p-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 90%;
  }

  .mb-switch-container {
    cursor: pointer;
    height: 38px;
    line-height: 30px;
    padding: 5px 15px;
    text-align: center;
    margin-top: 5px;
    font-weight: 300;
    color: white;
    background: #454545;
  }

  .mobile-view-container:hover {
    background-color: #000;
  }

  .sc-nav-container {
    max-width: none !important;
    width: 100% !important;
  }

  .se-nav .se-nav-item>a {
    display: flex;
    padding: 13px 5px;
    text-align: center;
    width: 110px;
    height: 50px;
  }

  .left-top-bar-container {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }

  .search-container {
    display: none;
  }

  .mobile-search-icon-container {
    display: flex;
    font-size: 23px;
    line-height: 3.2;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 50px;
    text-align: center;
    cursor: pointer;
  }

  .megaSearch-no-results-text {
    left: 88px;
  }

  .megaSearch-main-item {
    margin-bottom: 15px;
    margin-top: 15px;
  }

  .megaSearch-description {
    margin-top: 5px;
    margin-bottom: 15px;
  }

  .at-elem-separator {
    display: none;
  }

  #notification-icon {
    display: none;
  }

  .mark-as-red {
    font-size: 15px;
  }

  .no-notification {
    position: relative;
    top: 15px;
    height: 5vh;
  }

  .notification-container-mobile {
    max-height: 65vh;
  }

  .viewall-ul {
    position: relative;
    top: 10px;
  }

  .view-all-notifcations {
    margin-top: 10px;
    text-decoration: none;
  }
} .hsy-tooltip {
    position: relative;
    font-family: inherit;
    font-size: 10px;
  }
  .hsy-tooltip>.outlet,
  .hsy-tooltip>.tooltip {
    font-size: 1.4em;
  }
  .hsy-tooltip>.tooltip {
    display: none;
    position: absolute;
    background-color: rgb(0, 0, 0);
    color: #fff;
    border-radius: 3px;
    border: 0px;
    outline: none;
    padding: 10px 15px;
    z-index: 100;
  }
  .hsy-tooltip .arrow {
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
  }