body {
  /* background-color: #ffffff; */
  background-color: #f4f4f4;
  /* background-image: var(--logo_url); */
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  margin: 12px;
}

.tinted-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 1060; /* Higher than any content you want to tint */
}

.btn-primary.disabled {
  background-color: #787878;
}
.expandedsearchbar {
  position:absolute !important;
  z-index:auto !important;
  /* top:0 !important;
  left:0 !important;
  right: unset !important; */
}

.load-overlay {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(175, 175, 175, 0.3) !important;
  animation: fade-in 0.5s ease-in-out;
  z-index: 1061;
}

 .badge-application {
   border-color: #083c8e;
   border-style: solid;
   border-width: 1px;
   border-radius: 4px;
   padding: 0.25rem 0.4rem;
   font-size: 0.75rem;
   font-weight: 500;
   line-height: 1;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
   color: #3e5b88;
 }

.custom-popup {
  max-width:570px !important;
  min-width:240px;
}

#main-app-container {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

#filtercard {
  display:none;
  position:absolute;
  right:130%;
  z-index:100;

  & .sidenav-item-wrapper {
    border-radius: 4px;
    margin-bottom: 0.25rem !important;
  }

  & .sidenav-item-label {
    margin-bottom: 0.25rem !important;
  }
}


/* .custom-popup .mapboxgl-popup-content {
  overflow:auto;
} */

#popconfirm-button-confirm {
  background: #CC0000 !important;
}

#popconfirm-button-cancel {
  background:#787878 !important;
  color:#ffffff !important;
}

.mce-branding {
  display:none !important;
}

.select-option {
  font-size: 0.8rem !important;
}

.datatable-inner {
  position:initial !important;
}

.globalfilesuploadfilename {
  font-weight:bold;
}


.pointer {
  cursor:pointer;
}

.file-upload-wrapper {
  border: 1px dashed gray;
}

.file-upload-wrapper#mapcodeimportwrapper .file-upload {
  height: 100px;
}

.img-thumbnail {
  padding: 0.15rem;
  border-radius: 0.15rem;
}

.dot {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 50%;
  display: inline-block;
}

.navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

#top-nav-logo {
  padding-left: 8px;
  margin-right: 28px;
}

#top-nav-logo > img {
  width: 66px !important;
  height: 66px !important;
}

#top-nav-breadcrumb {
  max-width: 200px;
}

.main-content-blocks {
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

#saveusermodal.btn-disabled {
  background-color: #ccc !important;
  color:  rgb(41, 41, 41) !important;
  pointer-events: none;
}

.passwordshowhide, .genpass { 
  position: absolute;
  right: 5px;
  top: 6px;
  font-size: 20px;
  color: #ddd !important;
  cursor: pointer;
}

.single-line-breadcrumb {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}

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

.breadcrumb-item + .breadcrumb-item::before {
  content: var( --mdb-breadcrumb-divider, ">" );
  color: #757575 !important;
}

#topnav {
  margin-left: 12px !important;
  margin-right: 12px !important;
  height: 83px;
}

.navbar-nav {
  width: 100%;
  justify-content: space-between;
}

@media (min-width: 1315px) {
  .search-click {
    display: block !important;
  }

  #topNavCollapse {
    display: none !important;
  }
}

@media (max-width: 1314px) {
  #collectionsDropdown {
    display: none;
  }

  #peoplecommunitiesSubmenu {
    display: none;
  }

  #projectsSubmenu {
    display: none;
  }

  #tagsSubmenu {
    display: none;
  }

  #codescategoriesSubmenu {
    display: none;
  }

  #projectsSubmenu {
    display: none;
  }

  #collectionsSubmenu {
    display: block;
  }

  .search-click {
    display: none;
  }
}

@media (max-width: 1239px) {
  #tagsDropdown {
    display: none;
  }

  #tagsSubmenu {
    display: block;
  }
}

@media (max-width: 1158px) {
  #codesDropdown {
    display: none;
  }

  #codescategoriesSubmenu {
    display: block;
  }
}

@media (max-width: 992px) {
  #projectsDropdown {
    display: none;
  }

  #projectsSubmenu {
    display: block;
  }
}

@media (max-width: 954px) {
  #peopleDropdown {
  display: none;
  }

  #peoplecommunitiesSubmenu {
    display: block;
  }
}

#topButtonGroup {
  display: flex;
  flex-direction: row;
}

/* #content {
  margin-left: 124px;
  padding-left: 0px !important;
} */

#icon-container {
  right: 2px;
  justify-content: right;
}

.sidenavIcon {
  margin-right: 10px;
}

.sidenav-collapse>.sidenav-item {
  margin-top: 10px;
}

.sidenav-collapse .sidenav-link {
  font-size: 0.875rem;
}

.dropdown.show .sidenav-hover-item {
  background-color: #eceaee;
  color: #4B4A81 !important;
}

.sidenav {
  top: auto !important;
  bottom: auto !important;
  width: 190px;
  overflow: visible !important;
}

.main-sidenav-item {
  height: auto !important;
  overflow: visible !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  border: none;
  background-color: #fff;
  /* color: #4f4f4f; */
  color: #595959;
  & a {
    display: flex;
    flex-direction: column;
    height: auto;
    align-items: center;
    }
}

.main-sidenav-item>a {
  border-radius: 10px;
}

#sidenav-menu .sidenav-link {
  padding: 0 6px 0 6px;
}

.submenu {
  border-radius: 0 !important;
}

.sidenav-submenu>li:first-child>a.submenu {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

.sidenav-submenu>li:last-child>a.submenu {
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

.sidenav-selected, .sidenav-selected span.fas {
  background-color: #eceaee !important;
  color: #4B4A81 !important; /* icon colour */
}

#sidenav-menu .sidenav-link:hover {
  background-color: #eceaee !important;
  color: #4B4A81 !important;
}

#sidenav-menu .sidenav-link:hover span.fas {
  background-color: #eceaee !important;
  color: #4B4A81 !important;
}

.sidenav-text {
  width: 80px !important;
  text-align: center;
  font-size: 12px;
  padding-top: 1px;
}

.sidenav-submenu {
  border-radius: 10px;
}

.sidenav-submenu a {
  padding-left: 10px !important;
}

.sidenav-menu {
  padding-top: 4.4px; /* This is to match the side padding that gets applied to the mdb .side-menu class but is actually a little bigger to match */
}

#sidenav-menu {
  width: 102px !important;
  height: calc(100vh - 114px) !important;
  left: 0 !important;
  margin-left: 0px !important;
}

#sidenav-menu .dropdown-menu {
  /* background-color: #f4f4f4 !important; */
  background-color: #fff !important;
}

#sidenav-menu .dropdown-item {
  padding: 0px !important;
}

.dropdown-item:hover {
  background-color: #eceaee !important;
  color: #4B4A81 !important;
}

/* Shows and positions the dropdown menu when a nav item is hovered  */
.dropdown-hover:hover .dropdown-menu {
  display: block;
  position: fixed !important;
  top: auto;
  left: -59px;
  transform: translate(calc(100% + 10px), -63px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.nav-link {
  color: rgb(0 0 0 / 100%);
}

.icon.me-3 {
  margin-right: 0 !important;
}

#content-below-navbar {
  margin-top: 103px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* This is important for making sure content beside the sidenav fills the entire space - Ben */
.sidenav-container {
  width: 102px;
  padding-left: 0px !important;
  padding-right: 0px !important;
  margin-bottom: 0 !important;
  margin-right: 12px !important;
  z-index: 1003 !important; /* To make sure the nav items are always visible overtop of the main content to the right */
}

.navbar-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.navbar-action-button .btn-icon-only {
    display: none;
}

@media (max-width: 1100px) {
    .navbar-action-button .btn-full-text {
        display: none;
    }
    
    .navbar-action-button .btn-icon-only {
        display: inline-block;
    }
    
    .navbar-action-button {
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }
        
}

.text-body a:not(:hover) {
  color: #4f4f4f !important;
}
.text-body a:hover {
  text-decoration: underline !important;
}

.accordion-button.list-group-item.list-group-item-action.py-2.ripple-surface:not(.collapsed):after {
  background-image: none;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.fas {
  color: #595959;
  /* color: #4f4f4f; */
}

.filetype {
  margin-left: 10px;
  border: 1px solid #3c4043;
  border-radius: 2px;
  padding: 0px 4px;
  display: inline-block;
  height: 16px;
  line-height: 16px;
  color: #96999d;
  font-size: 10px;
  letter-spacing: 0.75px;
  vertical-align: middle;
  text-align: center;
  font-weight: 400;
}

/* .search-click {
  position: relative;
  overflow: visible;
  height: 50px;
}

.search-click input {
  background: #fff;
  border: 1px solid #ccc;
  outline: none;
  position: absolute;
  width: 70vw;
  height: 50px;
  left: 0%;
  padding: 0.3rem;
} */

.dropdown-submenu {
  position: relative;
}

.dropdown-menu.dropdown-submenu {
  left: 100%;
  top: 0px;
}

.datatable.datatable-sm td,
.datatable.datatable-sm th {
  padding: 0.5rem 0.4rem 0.5rem 1.2rem;
  vertical-align: middle;
}

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


.mrfields-10 .form-outline {
  margin-right: 10px !important;
}

.datatable-pagination {
  border-top: 0 none;
}

.tmselectable thead tr>th:first-of-type {
  width: 20px !important;
}

/* .tmselectable tbody tr > td:first-of-type {border-color: #fff !important;} */
.tmdatatablefilterwrap .input-group>div {
  margin-bottom: 10px !important;
}

.tmdatatablefilterwrap {
  margin-left: 0.5rem;
}

.datatable thead tr {
  border-bottom: 2px solid var(--datatable-border-color);
}

#tm-mainframe {
  background: white;
  width: 100% + 2px;
  height: calc(100vh - 114px);
  padding: 20px 8px;
  overflow: auto !important;
  box-sizing: border-box !important;
}

.tmmenubtn {
  background-color: transparent;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.tmmenubtn:hover,
.tmmenubtn:focus {
  background-color: #f1f1f1 !important;
}

td[data-mdb-field="dropdown"] {
  text-align: right;
}

.display-7 {
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.2;
}

.tab-invalid {
  color: #f93154 !important;
  border-color:#f93154 !important;
}

#tmpagetitle {
  color: #262626;
  padding: 0.5rem 0.4rem 0.5rem 1.2rem;
}
.nav-item>.btn-link {
  color: #616161;
}
.nav-item>.btn-link:hover {
  border-bottom: #5413ac;
  border-style: solid;
  border-bottom-width: 1px;
  background-color: transparent;
}

.nav-item>.btn-link:focus {
  color: #5413ac;
  border-bottom: #5413ac;
  border-style: solid;
  border-bottom-width: 1px;
  background-color: transparent;
}

.underline-on-hover:hover {
  text-decoration: underline;
}
.navpills > .btn-link.active,
.navpills > .btn-link.focus,
.navpills > .btn-link:active,
.navpills > .btn-link.active:focus,
.navpills > .btn-link:active:focus,
.navpills > .btn-link:focus,
.navpills > .btn-link:hover {
  color: #5413ac;
  border-bottom: #5413ac;
  border-style: solid;
  border-bottom-width: 1px;
  background-color: transparent;
}

.nav-pills>.nav-item>.btn {
  border-radius: 0;
}

.sidenav-toogle-icon-open {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

.sidenav-toogle-icon-closed {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

#sidenav-menu .ps__rail-y {
  display: none;
  height: 1px;
}

#sidenav-menu .ps__thumb-y {
  display: none;
}

.invalid-row {
  margin-bottom:1.5rem;
}

.circle {
  display: inline-block;
    background-color: #4f4f4f;
    border-radius: 50%;
}

.circle-inner {
  color: white;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  font-weight:bold;
  height: auto;
  width: auto;
  font-size: 15px;
}


.form-outline .required.active ~ label {
  color:#270950;
}

.form-outline .required:not(.active) ~ label{
  color:red
}

.datatable-inner .ps__rail-y {
  display: none;
}

.datatable-inner .ps__rail-x {
  display: none;
}

.form-outline.position-relative input {
  padding-right: 32px;
}

.form-clear {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #cecece;
  border-radius: 50% !important;
  bottom: 6px;
  color: rgba(0, 0, 0, .54);
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 24px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  right: 35px;
  width: 24px;
  z-index: 1001;
}

#pagesearchcontainer2 .form-clear {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #cecece;
  border-radius: 50% !important;
  bottom: 6px;
  color: rgba(0, 0, 0, .54);
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 24px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  right: 45px;
  width: 24px;
  z-index: 1001;
}

.form-text~.form-clear {
  bottom: calc(1rem + 18px);
}

.page-link {
  color: #4f4f4f;
}

#paginationwrap {
  display: flex;
}

#paginationwrap .select-wrapper{
  width:80px;
}

#topsearch {
  -webkit-transition: 0s !important;
  transition: 0s !important;
  margin-top:1px;
  margin-bottom:1px;
  padding-bottom:0px;
  padding-top:0px;
  align-self: center;
  align-content: center;
  min-height:33px;
  height:33px;
}

 #topsearch:focus {
    width: 70vw;
    background: white;
    -webkit-transition: 0s !important;
    transition: 0s !important;
  }

  #search-addon {
    border-left: none;
  }

  .autocomplete-items-list {
    overflow-y: auto;
  }

  .autocomplete-item {
    justify-content: start;
  }

  ul.search-results {
    max-width: 850px;
    list-style-type: none;
}

#bodysearchcontainer {
  max-width: 500px;
}

#firstlinewrap {
  display:flex;
}

#searchcontainer {
  padding-right: 0;
  padding-left:0;
  max-height: 35px;
  width: 180px;
  /* min-width: 120px; */
}

#pagesearchcontainer {
  max-width: 850px;
  padding-left: 0px;
  padding-right: 0px;
}

#pagesearchcontainer .btn.btn-link {
  padding: 0.5rem;
  width: 100%;
  background-color: unset;
  border: 2px rgba(0, 0, 0, 0.0) solid;
  border-radius: 0;
  color: #4f4f4f;
  font-weight: 400;
}

#pagesearchcontainer .btn.btn-link:hover {
  padding: 0.5rem;
  width: 100%;
  background-color: unset;
  border-bottom: 2px #4f4f4f solid;
  border-radius: 0;
  color: #4f4f4f;
  font-weight: 400;
}

#pagesearchcontainer .btn.btn-link.active {
  padding: 0.5rem;
  width: 100%;
  background-color: unset;
  border-bottom: 2px #4f4f4f solid;
  border-radius: 0;
  color: #4f4f4f;
  font-weight: 400;
}

#pagesearchcontainer #categorywrapper{
  background-color: unset;
}
#pagesearchcontainer .col {
  padding:0;
}

#pagesearchcontainer #customsearchdropdown {
  width:325px;
}

#pagesearch {
  border-right: none;
  /* border-top-right-radius: 0;
  border-bottom-right-radius: 0; */
}

/* I am keeping the following three search containers seperate in case the styling changes, otherwise I will merge it into a single class */
#searchcontainer .autocomplete-loader.spinner-border {
   border-radius: 50% !important;
   width: 30px;
   right: 31.6px;
   height: 30px;
   top:3px;
   z-index:1000;
}

#pagesearchcontainer2 .autocomplete-loader.spinner-border {
  border-radius: 50% !important;
  width: 30px;
  right: 41.6px;
  height: 30px;
  top:3px;
  z-index:1000;
}



#iconsearchcontainer .autocomplete-loader.spinner-border {
  border-radius: 50% !important;
  width: 30px;
  right: 31.6px;
  height: 30px;
  top:3px;
  z-index:1000;
}

#search-page-addon {
  border-left: none;
}

.selectwrapper > select{
  width:100%;
  padding: 0.33em 0.75em;
  border-radius: .25rem;
  border: 1px solid #bdbdbd;
  color: #616161;
  line-height: 1.6rem;
  font-weight: 400;
  font-size:1rem;
  font-stretch:100%;
  padding-bottom: 0.41rem;
  padding-top: 0.41rem;
}

.sidenav-right-filter-icon,#sidenav-right-export-icon {
  display:none;
  width: 35px;
  height: 35px;
  border-radius: 100%;
  padding: 0;
  background-color: #fff;
  color: #4f4f4f;
  -webkit-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  align-content: center;
  align-self: center;

  & i:hover {
    color: #5413ac;
  }
}

.sidenav-right-filter-icon:hover,#sidenav-right-export-icon:hover {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  padding: 0;
  -webkit-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  align-content: center;
  background-color: #F04E29;
  color: #5413ac;
  align-self: center;

  & i:hover {
    color: #5413ac;
  }
}

#documentoverlaymodal .modal-fullscreen {
  width: 90vw;
  margin: auto;
}

#documentoverlaymodal .modal-body {
  margin:0;
  padding:0;
}

#documentoverlaymodal .iframepdf {
  padding:0;
}
#documentoverlaymodal .modal-header {
  width: 100vw;
  color: #fff;
  position: relative;
  margin-left: -5.5%;
}

#documentoverlaymodal .row {
  height: 100%;
}

#searchwrapper {
  min-width: 124px;
}

#breadcrumb-card-container {
  background-color: #efefef;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.3rem;
}

.breadcrumb-item + .breadcrumb-item:before {
  padding-right: 0.3rem;
}

/* Styles for top-nav-logo when screen less 1100px wide */
@media (max-width: 1100px) {
  #top-nav-logo {
    padding-left: -8px !important;
  }
}

@media (max-width: 900px) {
  #searchcontainer {
      width: 160px;
    }
}

/* Hide dropdown-menu-icon by default on larger screens */
#dropdownMenuButtonIconContainer, #icons-dropdown-menu {
  display: none;
}

/* Styles for top-nav-logo when screen less 800px wide */
@media (max-width: 800px) {
  #icon-container {
    display: none !important;
  }

  #icons-dropdown-menu {
    display: block !important;
    left: -112px !important; /* Required to make the dropdown ul show within page */
  }

  #dropdownMenuButtonIconContainer {
    display: inline-block;
  }

    /* .navbar-expand .navbar-nav .dropdown-menu {
      left: 0 !important;
      right: auto !important;
    } */
    /* .icons-dropdown-menu {
      left: 0 !important;
      right: auto !important;
    } */
}

.acresult {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.ac-item-text {
  align-self: center;
}

#csvtable .datatable-inner .ps__rail-y {
  display:block;
}

.modal-body select:disabled {
  background-color: lightgray;
}

.exttitle {
  position: relative;
  padding: 5px;
  margin-bottom: 15px;
  background: rgba(222, 222, 222, 0.4) !important;
}

.exttitletext {
  color: var(--mdb-gray-600);
}

.exttitleactions {
  /*position: relative;*/
  /*bottom: 57px;*/
  /*left: 97%;*/
  /*z-index: 5;*/
  /*font-size: 1rem;*/
  float: right;
  margin-left:auto;
}

.exttitleactions i {
  cursor: pointer;
  color: var(--mdb-gray-600);
}

.mapcode-category-border {
  /* border-color should be added dynamically */
  padding: 3px;
  display:inline-block;
  overflow-x: hidden;
  text-overflow: ellipsis;
  border: 0.2em solid;
  border-radius:10px;
  text-align: center;
  max-width:80px;
  vertical-align: middle;
}

#mobilerecordstable .datatable-body>[scope='row'] {
  vertical-align: middle;
}

.search-button:hover {
  color: #270950;
  background-color: rgba(39, 9, 80, 0.1);
}

.search-button.active {
  color: #270950;
  background-color: rgba(39, 9, 80, 0.1) !important;
}

.search-button:focus {
  color: #270950;
  background-color: rgba(39, 9, 80, 0.1) !important;
}

.search-button.active:focus {
  color: #270950;
  background-color: rgba(39, 9, 80, 0.1) !important;
}

#applicationicon {
   color: unset;
}

.search-button .sidenavIcon {
  margin-bottom: 0.1rem;
}

 .js-delayed-fade-top:not(#map-container, #map-container *) {
   animation: js-delayed-f-top 2.5s ease-in-out;
 }

 @keyframes js-delayed-f-top {
   0% {
     opacity: 0;
     transform: translate3d(0,-20%,0);
   }
   50% {
     opacity:0;
     transform: translate3d(0,-20%,0);
   }
   100%{
     opacity: 1;
     transform: translate3d(0,0,0);
   }
 }

.js-fade-top:not(#map-container, #map-container *) {
  animation: js-f-top 1.5s ease-in-out;
}

@keyframes js-f-top {
  0% {
    opacity: 0;
    transform: translate3d(0,-20%,0);
  }
  100%{
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

 .js-delayed-fade-in {
   animation-name: delayed-opacity-in;
   animation-duration: 2.5s;
   animation-timing-function: ease-in;
 }

 @keyframes delayed-opacity-in{
   0% {
     opacity: 0;
   }
   50%{
     opacity: 0;
   }
   100%{
     opacity: 1;

   }
 }

.js-fade-in {
  animation-name: opacity-in;
  animation-duration: 2.5s;
  animation-timing-function: ease-in;
}

.js-spinner {
    animation: rotate 2s linear infinite;
    position: absolute;
    width: 500px;
    height: 500px;
    display: none;
    width: 500px;
    height: 500px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;

    & .path {
      stroke: hsl(265 79 17);
      opacity: 0.5;
      stroke-linecap: round;
      animation: dash 1.5s ease-in-out infinite;
    }

  }

  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes dash {
    0% {
      stroke-dasharray: 1, 150;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -35;
    }
    100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -124;
    }
  }

@keyframes opacity-in{
  0% {
    opacity: 0;
  }
  100%{
    opacity: 1;

    }
}

 .js-delayed-fade-left {
   animation: js-delayed-f-left 1.5s ease-in-out;
 }

 @keyframes js-delayed-f-left{
   0% {
     opacity: 0;
     transform: translate3d(-20%,0,0);
   }
   50%{
     transform: translate3d(-20%,0,0);
     opacity: 0;
   }
   100%{
     opacity: 1;
     transform: translate3d(0,0,0);
   }
 }

.js-fade-left {
  animation: js-f-left 1.5s ease-in-out;
}

@keyframes js-f-left{
  0% {
    transform: translate3d(-20%,0,0);
    opacity: 0;

  }
  100%{
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}
.progress-bar {
  line-height: 2;
  overflow: visible;
  & span {
    display:inline-block;
    vertical-align: middle;
    align-self:start;
    margin-left: .5rem;
    text-align:center;
  }
}
.progress {
  height:20px;
  align-items: center;
  border-radius:.25rem;
  border-style:solid;
  border-color: rgba(0, 0, 0, 0.5);
  border-width:thin;
 }
.js-pulse-success {
  background-color: #270950;
  animation: pulse-success 2s linear infinite;
}

 .js-pulse-failure {
   background-color: #270950;
   animation: pulse-fail 2s linear infinite;
 }
@keyframes pulse-success {
  0% {
    background-color: #270950;
  }
  50% {
   background-color: var(--mdb-success);
  }
  100% {
    background-color: #270950;
  }
}

 @keyframes pulse-fail {
   0% {
     background-color: #270950;
   }
   50% {
     background-color: var(--mdb-danger);
   }
   100% {
     background-color: #270950;
   }
 }
.js-pulse{
  animation: js-pulsing 1s linear infinite;
}

@keyframes js-pulsing {
  0% {
    opacity: 1;
    transform: scale3d(1,1,1);
  }
  50% {
    opacity: 0.25;
    transform: scale3d(1.1, 1.1, 1.1);
  }
  100%{
    opacity:1;
    transform: scale3d(1,1,1);
  }
}

@keyframes uploadedAnimation {
  0% {
    color: #4f4f4f;

  }
  100% {
    color: #F04E29;
  }
}

.card.tile, .card.tile .card-body {
  max-height:100%;
  overflow: hidden;
}

.info-text > p {
  font-size: .6rem;
}

.info-text > .app-name, .act-title, .act-updated > p, .w-content > .badge,  .act-title > a {
  width:100%;
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}

.row {
  & .act-title {
    font-size: 0.9rem;
  }

  & .act-updated {
    font-size: 0.8rem;
  }
}

  .act-title > a {
    display: block;
  }

  .search-app-text {
    overflow: hidden;
    font-size: .9rem;
    max-height: 1.1rem;
    width: 320px;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* justify-self: center; */
    /* vertical-align: middle; */
    /* text-align: center; */
    /* justify-content: center; */
  }

 i.fa-globe.cloud{
   animation: uploadedAnimation 1s linear;
   color: #F04E29;
 }

 #archivestoggle2 {
   cursor:pointer;
   font-size: 30px;
   color: #270950;
 }

 .asterisk {
  color: #CC0000;
  position: relative;
  bottom: 10px;
  font-size: 7px;
}