.awesomplete [hidden] {
    display: none;
}

.awesomplete .visually-hidden {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
.awesomplete > ul {
    position: absolute;
    left: 0;
    z-index: var(--z-content-awesomplete);
    min-width: 100%;
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
}

.awesomplete > ul:empty {
    display: none;
}

.awesomplete > ul {
	border-radius: .3em;
	margin: .2em 0 0;
	background: hsla(0,0%,100%,.9);
	background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));
	border: 1px solid rgba(0,0,0,.3);
	box-shadow: .05em .2em .6em rgba(0,0,0,.2);
	text-shadow: none;
}

@supports (transform: scale(0)) {
	.awesomplete > ul {
		transition: .3s cubic-bezier(.4,.2,.5,1.4);
		transform-origin: 1.43em -.43em;
	}

	.awesomplete > ul[hidden],
	.awesomplete > ul:empty {
		opacity: 0;
		transform: scale(0);
		display: block;
		transition-timing-function: ease;
	}
}

	/* Pointer */
	.awesomplete > ul:before {
		content: "";
		position: absolute;
		top: -.43em;
		left: 1em;
		width: 0; height: 0;
		padding: .4em;
		background: white;
		border: inherit;
		border-right: 0;
		border-bottom: 0;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.awesomplete > ul > li {
		position: relative;
		padding: .2em .5em;
		cursor: pointer;
	}

	.awesomplete > ul > li:hover {
		background: hsl(200, 40%, 80%);
		color: black;
	}

	.awesomplete > ul > li[aria-selected="true"] {
		background: hsl(205, 40%, 40%);
		color: white;
	}

		.awesomplete mark {
			background: hsl(65, 100%, 50%);
		}

		.awesomplete li:hover mark {
			background: hsl(68, 100%, 41%);
		}

		.awesomplete li[aria-selected="true"] mark {
			background: hsl(86, 100%, 21%);
			color: inherit;
}

@font-face {
  font-family: Symbola;
  src: url(fonts/Symbola.ttf);
}
@font-face {
  font-family: SymbolaProposed;
  src: url(fonts/Symbola-hint.ttf);
}
body{
  height: 100% !important;
}
html{
  height: 100% !important;
}
:root{
  /* MediaMobil Color Definitions */
  /* Not to be used directly. Used in Site Colors  */
  --mmo-green-raw: 0, 170, 167;
  --mmo-green: rgba(var(--mmo-green-raw), 1.0) !important;
  --mmo-blue-raw: 20, 65, 86;
  --mmo-blue: rgba(var(--mmo-blue-raw), 1.0) !important;
  --mmo-light-raw: 255, 255, 255;
  --mmo-light: rgba(var(--mmo-light-raw), 1.0) !important;
  --mmo-dark-raw: 0, 0, 0;
  --mmo-dark: rgba(var(--mmo-dark-raw), 1.0) !important;

  --mmo-colorcoding-lightblue: #0079BF;
  --mmo-colorcoding-green: #07A60F;
  --mmo-colorcoding-orange: #FF781F;
  --mmo-colorcoding-red: #DD2100;

  /* Site Colors: General */
  --bg-main: var(--mmo-light) !important;
  --disabled-button-color: rgba(var(--mmo-dark-raw), 0.2) !important;
  --menu-border-strong: rgba(0, 0, 0, 0.4) !important;
  --menu-border-light: rgba(0, 0, 0, 0.2) !important;
  --mmo-text: rgba(var(--mmo-dark-raw), 0.7) !important;
  --mmo-text-hover: rgba(var(--mmo-dark-raw), 0.9) !important;
  --link-feature-disabled : rgba(255, 0, 0, 0.5) !important;

  /* Site Colors: Titlebar and its Popovers */
  --bg-menu: rgba(235, 235, 235, 1.0) !important;
  --bg-menu-light: rgba(248, 248, 248, 1.0) !important;
  --bg-titlebar: var(--bg-menu) !important;
  --bg-youtube-popover: var(--bg-titlebar) !important;
  --bg-google-popover: var(--bg-main) !important;
  --bg-navbar-popover: var(--bg-main) !important;
  --popover-text: rgba(var(--mmo-dark-raw), 0.7) !important;
  --popover-text-hover: rgba(var(--mmo-dark-raw), 0.9) !important;
  --titlebar-text: var(--mmo-text) !important;
  --titlebar-text-hover: var(--mmo-text-hover) !important;

  /* Site Colors: Navbar */
  --bg-navbar: var(--bg-titlebar) !important;
  --navbar-text: var(--mmo-text) !important;
  --navbar-text-hover: var(--mmo-text-hover) !important;
  --navbar-item-color: var(--bg-navbar) !important;

  /* Site Colors: Navcards */
  --bg-navcard: var(--bg-titlebar) !important;
  --navcard-text: var(--mmo-text) !important;
  --navcard-text-hover: var(--mmo-text-hover) !important;

  /* Site Colors: Profile */
  --bg-profile-sidebar: var(--mmo-light) !important;
  --profile-sidebar-text: var(--mmo-text) !important;
  --profile-sidebar-text-hover: var(--mmo-text-hover) !important;
  --profile-sidebar-pill-color: rgba(25, 103, 210, 0.25 ) !important; /* RGB from Google Profile */
  --profile-sidebar-pill-color-hover: var(--bg-titlebar) !important;
  --profile-form-row-highlight-color: var(--bg-menu) !important;
  --profile-form-input-selector-background: var(--profile-sidebar-pill-color) !important;
  --profile-form-input-selector-text: var(--mmo-text) !important;

  /* Others */
  --content-height: 94vh !important;

  /* Z-Index Management */
  /* We are getting rid of incomprehensible Magic Numbers by creating semantic relations between variables */
  /* Read up on the system in the Wiki should you need to alter variables. */
  --z-base: 0;
  --z-above: 1;
  --z-below: -1;

  --z-layout-background: var(--z-base);

  --z-layout-content: calc(var(--z-above) + var(--z-layout-background));
  --z-content-awesomplete: calc(var(--z-above) + var(--z-layout-content));
  --z-content-backarrow: calc(var(--z-above) + var(--z-layout-content));

  --z-table-cugrow: calc(var(--z-above) + var(--z-layout-content));
  --z-table-beamrow: calc(var(--z-above) + var(--z-table-cugrow));
  --z-table-head: calc(var(--z-above) + var(--z-table-beamrow));

  --z-layout-titlebar: calc(var(--z-above) + var(--z-layout-content));

  --z-profile-sidebar: calc(var(--z-above) + var(--z-layout-titlebar));

  --z-layout-navbar: calc(var(--z-above) + var(--z-profile-sidebar));
}
.mmo-colorcoding-info{
  color: var(--mmo-colorcoding-lightblue) !important;
}
.mmo-colorcoding-success{
  color: var(--mmo-colorcoding-green) !important;
}
.mmo-colorcoding-warning{
  color: var(--mmo-colorcoding-orange) !important;
}
.mmo-colorcoding-danger{
  color: var(--mmo-colorcoding-red) !important;
}
.bg-menu{
  background-color: var(--bg-menu) !important;
}
.bg-menu-light{
  background-color: var(--bg-menu-light)
}
.btn-disabled{
  background-color: var(--disabled-button-color);
}
.btn:hover{
  display: inline-block;
}
.display-if-parent-empty{
  display: none;
}
:empty .display-if-parent-empty{
  display: inherit;
}
.symbola {
  font-family: Symbola;
  font-size: 12px;
  font-weight: lighter;
  font-style: normal;
  height: 0;
  width: 0;
  overflow: show;
}
.symbola.proposed{
  font-family: SymbolaProposed;
}
.mmo-down-arrow::before{
  content: "\25bc";
}
.mmo-right-arrow::before{
  content: " \25ba";
}
.mmo-up-arrow::before{
  content: "\25b2";
}
.text-mmo-green{
  color: var(--mmo-green) !important;
}
.bg-mmo-green, .bg-mmo-green.dropdown-toggle{
  background-color: var(--mmo-green) !important;
}
.bg-mmo-green.dropdown-toggle:hover{
  background-color: rgb(10, 180, 177) !important;
}
.bg-mmo-green.dropdown-toggle::after{
  background-color: rgb(0, 170, 167) !important;
  border-color: var(--mmo-green) !important;
}
.bg-mmo-green.btn{
  text-decoration-color: var(--white) !important;
}
a.dropdown-item.disabled {
  color: gray !important;
}
.cursor-not-allowed {
    cursor:not-allowed;
}

/* General */
select.mmo-select{
  /* A copy of the bootstrap form-select with some annoying properties reworked */
  height: 100%;
  line-height: 1.5;
  color: var(--mmo-text);
  vertical-align: middle;
  border: 1px solid var(--menu-border-light);
  border-radius: .25rem;
}
.mmo-bottom-border{
  border: 1px dotted var(--menu-border-strong);
  border-style: none none dotted none;
}
.warning{
  color: red;
  font-weight: 300;
}
.loginOutButton{
  border: 1px solid var(--menu-border-strong);
  border-style: solid;
  padding: 3px;
  font-size: large;
  color: inherit;
}
a.disabled, .disabled a{
  color: var(--link-feature-disabled) !important;
}
.messagelist .debug{
  background-color: lightgrey;
}
.messagelist .info{
  background-color: lightblue;
}
.messagelist .success{
  background-color: lightgreen;
}
.messagelist .warning{
  background-color: lightyellow;
}
.messagelist .error{
  background-color: lightcoral;
}

/* Login */
#loginContainerAll{
  border: 1px solid var(--menu-border-light);
  border-radius: 8px; /* Google Border Radius */
  margin-top: 25% !important;
  margin-bottom: 25% !important;
}
#loginContainerAll li{
  color: red;
}
.login_wizard td input{
  margin-left: 5px;
}
.login_wizard h1{
  text-align: center;
}
.login_wizard p{
  text-align: center;
}
.login_wizard #forgotPasswordContainer{
  float: right;
}
.login_wizard .btn-primary{
  float: right;
}
.login_wizard .hiddenSubmit{
  display: none;
}
.login_wizard .btn-block{
  /* Fixes the login:backup button adding magins under it on hover, for some reason. */
  display: inline-block;
}

/* Navigation */
#titlebar{
  background-color: var(--bg-titlebar);
  border: 1px solid var(--menu-border-light) !important;
  border-style: none none solid none !important;
  min-height: 5vh !important;
  font-size: 0.65em; /* (also) scales fa-icon size */
  z-index: var(--z-layout-titlebar);
}
#titlebar a{
  color: var(--titlebar-text);
}
#titlebar img.pseudo-fa{
  opacity: 0.7;
}
#titlebar a:hover{
  color: var(--titlebar-text-hover);
}
#titlebar a:hover img.pseudo-fa{
  opacity: 0.9;
}
#navbarRow{
  z-index: var(--z-layout-navbar);
}
#navbar{
  background-color: var(--bg-navbar);
  margin-top: -1px; /* Titlebar border size. Pulls navbar over it to continue the element visually */
  border-top: 2px dashed var(--menu-border-strong);
}
#navbar a{
  color: var(--navbar-text) !important;
  font-size: 1.125em;
  font-weight: 300;
  background-color: var(--navbar-item-color);
}
#navbar a:hover, #navbar a:focus{
  color: var(--navbar-text-hover) !important;
  filter:brightness(0.95);
}
#navbar .flex-fill{
  border: 1px solid var(--menu-border-light);
  border-style: none solid none solid;
  border-bottom: 2px outset var(--menu-border-strong);
}

/* Navcards */
.navPageTitle{
}
.navPageTitle h1{
  font-size: 4em;
}
.navPageTitleBackArrow{
  /* Despite the arrow appearing, the title should remain centered! */
  /* -14% right and 6% left margin do just that, on all resolutions */
  margin-right: -14%;
  margin-left: 6%;
  /* Doing so effectively pulls the left element over the Arrow */
  /* Which in turn would prevent interaction, so we put it in the foreground */
  z-index: var(--z-content-backarrow);
}
.navPageTitleBackArrow a{
  color: var(--mmo-text) !important;
}
.navPageTitleBackArrow a:hover{
  color: var(--mmo-text-hover) !important;
}
.navCardsContainer{
  padding-left: 10%;
  padding-right: 10%;
  z-index: var(--z-layout-content);
}
.navCard{
  background-color: var(--bg-navcard);
  border: 1px solid var(--menu-border-light);
  border-radius: 10px;
  color: var(--navcard-text)
}
a:hover.navCard{
  color: var(--navcard-text-hover);
  background-color: var(--bg-navcard);
}
.navCard.disabled{
  color: var(--link-feature-disabled) !important;
}
.navCardTitle h1{
  font-size: 3em;
}
.navCardImage{
}

/* Popovers */
#youtube_popover .popover .popover-arrow {
  display: none
}
#youtube_popover .popover{
  border: 1px solid var(--menu-border-strong);
  border-style: none solid solid solid;
  border-radius: 3px;
  background-color: var(--bg-youtube-popover);
}
#youtube_popover .popover-body a{
  font-size: large;
  color: var(--popover-text);
}
#youtube_popover .popover-body a:hover{
  color: var(--popover-text-hover);
}
#google_popover .popover .popover-arrow {
  display: none
}
#google_popover .popover{
  border: 1px solid var(--menu-border-light);
  border-radius: 10px;
  background-color: var(--bg-google-popover);
  /* offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow: 0px 0px 10px 1px var(--menu-border-light);
}
#google_popover .loginOutButton{
  border-radius: 5px;
  border: 1px solid var(--menu-border-light);
}
#google_popover #profilePopoverInfoContent .loginOutButton{
  border-radius: 20px;
}
#google_popover .popover-body a{
  font-size: large;
  color: var(--popover-text);
}
#google_popover .popover-body a:hover{
  color: var(--popover-text-hover);
  background-color: var(--bg-titlebar);
}
#navbar_popover .popover{
  border: 1px solid var(--menu-border-light);
  border-style: solid solid solid solid;
  border-radius: 3px;
  background-color: var(--bg-navbar-popover);
}
#navbar_popover .bs-popover-top .popover-arrow:after{
  border-top-color: var(--bg-navbar-popover);
}
#navbar_popover .bs-popover-right .popover-arrow:after{
  border-right-color: var(--bg-navbar-popover);
}
#navbar_popover .bs-popover-bottom .popover-arrow:after{
  border-bottom-color: var(--bg-navbar-popover);
}
#navbar_popover .bs-popover-left .popover-arrow:after{
  border-left-color: var(--bg-navbar-popover);
}
#navbar_popover .popover-body a{
  font-size: large;
  color: var(--popover-text);
}
#navbar_popover .popover-body a:hover{
  color: var(--popover-text-hover);
}
#navbar_popover a:disabled{
  opacity: 0.5;
}

/* Profile Sidebar */
#profileSidebar{
  background-color: var(--bg-profile-sidebar);
  overflow-x: auto !important;
  scrollbar-width: none;
  z-index: var(--z-profile-sidebar);
}
#profileSidebar a{
  color: var(--profile-sidebar-text);
  margin-left: -35px;
  padding-right: 55px;
  border-radius: 50px;
  font-size: 1.3em;
  font-weight: 300;

  /* Limiting Content Size to make the Pills not appear huge on XXL screens  */
  /* The official XXL breakpoint is only added in BS5 sadly */
  max-width: 400px;
}
#profileSidebar a:hover{
  color: var(--profile-sidebar-text-hover);
  background-color: var(--profile-sidebar-pill-color-hover);
}
#profileSidebar a.active, #profileSidebar a.active a:hover{
  background-color: var(--profile-sidebar-pill-color);
}
#profileSidebar::-webkit-scrollbar {
    display: none;
}

/* Profile Pages */
.profileTitle{
  text-align: center;
  font-size: 2rem;
  font-weight: 400;
  width: 100%;
  word-wrap: break-word;
}
.profileDescription{
  text-align: center;
  width: 100%;
}
#profileAllContentWrapper{
  /* This is required to allow the transition LG -> XL to look decent,  */
  /* but keep the element from growing too large on XL. BS4 has no XXL category yet.. */
  max-width: 800px;
}
.profileContentBlock .profileTitle, .profileContentBlock h1{
  /* Applies styling to content-titles.
    Both: Ours and imported ones we wouldnt otherwise be able to style. */
  text-align: left;
  font-size: 1.375rem;
  font-weight: 350;
  word-wrap: break-word;
}
.profileContentBlock{
  background-color: var(--bg-main);
  border: solid 1px var(--menu-border-light);
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  text-align: left;
}
#profileAllContentWrapper .profileContentBlock{
  width: 100%;
}
.profileContentBlock, .profileContentBlock p, .profileContentBlock input{
  /* Make text look the same between our own content, imported .., input fields, .. */
  font-family: monospace;
  font-size: 0.9rem;
  font-weight: 200;
  line-height: 1.5;
}
#profileOverviewImage i{
  color: rgba(var(--mmo-dark-raw), 0.75);
}
#profileFormTopEntry:not(:hover){
  border-color: rgba(0, 0, 0, 0.0);
}
.profile-form-row {
  border-radius: 0px;
  border: 1px solid var(--menu-border-light);
  border-style: solid none none none;
}
.profile-form-row:hover, .profile-form-row:focus-within {
  border-radius: 15px;
  border-style: solid none none none !important;
  background-color: var(--profile-form-row-highlight-color)
}
.profile-form-row a, .profile-form-row a:not([href]){
  color: var(--mmo-text);
}
.profile-form-row a:hover, .profile-form-row a:not([href]):hover{
  color: var(--mmo-text-hover);
}
.profile-form-row .profile-form-field{
  min-height: 30px;
  display: inline-flex;
  justify-content: end;
  text-align: right;
  align-items: center;
}
.profile-form-row .profile-form-field input,
.profile-form-row .profile-form-field .mmo-select {
  position: relative;
  background-color: var(--mmo-light);

  width: 100%;
  max-width: 325px;
  min-height: 30px; /* prevent height-change when re-adding border */

  text-align: right !important;
  font-weight: 300;

  border: 1px solid var(--menu-border-light);
}
@-moz-document url-prefix() {
  /* Webkit browsers have select options centered by default,
     there is no good solution other than faking it for others where the layout works differently */
  .profile-form-row .profile-form-field .mmo-select {
      padding-top: 5px;
  }
}
.profile-form-row .profile-form-field .mmo-select option{
  min-height: 30px; /* does not work implicitely on some browsers, sync option and select size */
}
.profile-form-row .profile-form-field.disabled input[type=date]::-webkit-clear-button,
.profile-form-row .profile-form-field.disabled input[type=date] {
  /* Should do it elegantly for chrome (untested)*/
  -webkit-appearance: none;
  margin: 0;

  /* Workaround for other browsers */
  margin-right: -21px; /* Pull text to the right, where symbol would be*/
  border: none;
  clip-path: inset(0 20px 0 0);
  outline:none;
  outline:0;
}
.profile-form-row .profile-form-field input::selection,
.profile-form-row .profile-form-field textarea::selection {
  background-color: var(--profile-form-input-selector-background);
  color: var(--profile-form-input-selector-text);
}
.profile-form-row .profile-form-field.disabled input,
.profile-form-row .profile-form-field.disabled textarea {
  background-color: rgba(0,0,0,0.0); /* transparant */
  border-style: none;
  resize: none; /* text area specific, the little resize dragger */
}
.profile-form-row .profile-form-field input:focus,
.profile-form-row .profile-form-field textarea:focus {
  outline: none !important;
  border: 1px solid var(--menu-border-light);
  background-color: var(--mmo-light);
  box-shadow: none;
}
.hide-number-input-arrows input[type="number"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.hide-number-input-arrows input[type=number]::-webkit-inner-spin-button,
.hide-number-input-arrows input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.profileFormError{
  color: red;
}
/* A checkbox in a disabled profile-form-field should look disabled */
.profile-form-row .profile-form-field.disabled input[type=checkbox] {
  opacity: 0.25;
}
.profile-form-row .profile-form-field input[type=checkbox] {
  width: 25px;
}

/* Dynamic-Search Table Pages */
#dynamic-table-searchbar{
  background: var(--bg-navbar);
  min-height: 40px;
}

/* Lists (Pages) */
.mmo-clickable-tr{
  cursor:pointer;
}

.mmo-clickable-card{
  cursor:pointer;
}

#mobileFiltersCollapse {
  will-change: height;
}

.mmo-bordered-card{
  border: solid 1px var(--menu-border-light);
  border-radius: 8px;
  padding: 1rem;
}

/* Details (Pages) */
.A4container{
  /* A container for vertical/scroll based text content pages */
  width: 1000px;
  max-width: 1000px;
}
.detailsTitle{
  text-align: center;
  font-size: 2rem;
  font-weight: 400;
  width: 100%;
  word-wrap: break-word;
}
.detailsDescription{
  text-align: center;
  width: 100%;
}
.detailTitleBackArrow{
  /* Same as navPageTitleBackArrow, applied to other layout */
  margin-right: -8%;
  margin-left: 3%;
  z-index: var(--z-content-backarrow);
}
.detailTitleBackArrow a {
  color: var(--mmo-text) !important;
}
.detailTitleBackArrow a:hover {
  color: var(--mmo-text-hover) !important;
}
.detailsContentBlock{
  background-color: var(--bg-main);
  border: solid 1px var(--menu-border-light);
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  text-align: left;
  width: 100%;
}
.detailsContentBlock .detailsTitle{
  text-align: left;
  font-size: 1.375rem;
  font-weight: 350;
  word-wrap: break-word;
}
.detailsContentBlock, .detailsContentBlock p, .detailsContentBlock input{
  /* Standardize Text */
  font-family: monospace;
  font-size: 0.9rem;
  font-weight: 200;
  line-height: 1.5;
}

/* 2FA Style Adjustments */
.TFA th label{
  /* Fixes text-checkbox-layout in 2FA-disable */
  display: table-cell;
  vertical-align: middle;
}
.TFA.profileContentBlock form button[type=submit].btn-danger{
   /* Fixes disable button placement in 2FA-disable  */
   /* The buttons' direct parent is the form, so we have to cheat a bit here.. */
   /* Normal / text alignments dont work. So we use float: right and move the button up with negative margins */
  position: relative;
  float: right;
  margin-top: -35px;
}

/* Filter-Form  */
.filter-form .filter-field:not(.always-show-filter) {
  display: none;
}
.filter-form.show-all-filters .filter-field {
  display: inherit;
}
.filter-form .filter-field.always-show-filter {
  display: inherit;
}


/* MMO-Sections */
.mmo-sections > .mmo-section{
  display: inherit;
}
.mmo-sections > .mmo-section ~ .mmo-section {
  display: none;
}

input::before.form-control:required {
  content: '<div>*</div>';
  text-decoration-color: var(--red);
}

th[data-sortdirection="desc"] .mmo-display.sortdirection::before{
  content: "\25bc";
}
th[data-sortdirection="asc"] .mmo-display.sortdirection::before{
  content: "\25b2";
}
th .mmo-display.sortdirection::before{
  content: "=";
  transition: transform 1s;
}
tr.contract td{
  min-width: 1vw;
  max-width: 10rem;
  white-space: normal;
}
/* TODO: make this work */
th .mmo-display.sortdirection:hover::before{
  transform: rotate(90deg);
}
body {
  align-items: center;
}
p {
  font-family: monospace;
}
#mainFoot {
  height: 20vh !important;
  min-width: 100% !important;
  margin-top: 0px;
}
.mb-20vh {
  margin-bottom: 20vh !important;
}
.w-50 {
  width: 50%;
}

.max-w-50px{
  max-width: 50px;
}
.max-w-65px{
  max-width: 65px;
}

.h-100{
  height: 100%;
}
.empty-min-h-100:empty{
  min-height: 100% !important;
}
.min-h-100{
  min-height: 100% !important;
}
.min-w-100{
  min-width: 100% !important;
}
.min-w-3em {
  min-width: 4em !important;
}
.scroll-suggestions {
  overflow-x: visible;
  overflow-y: auto;
  max-height: 75vh !important;
}
.suggestion {
  min-width: 200px !important;
}
.suggestion div{
  max-height: 70vh !important;
  overflow-y: auto;
}
.small-number {
  width: 5rem !important;
}
div.small-number{
  width: 100% !important;
}
.btn.beam-color{
  background-color: rgb(115, 207, 23);
}
.btn.coverage-color{
  background-color: rgb(128, 204, 255);
}
.btn.hover-show .hover-text{
  visibility: collapse;
  overflow-x: hidden;
  width: 0 !important;
  height: 0 !important;
  -webkit-transition: width, height .5s; /* For Safari 3.1 to 6.0 */
  transition-property: width, height;
  transition-duration: .15s;
  transition-delay: .1s;
}
/* icons and buttons */
.mmo-no-caret.dropdown-toggle::after{
  display: none;
}
.mmo-fa-edit-btn.dropdown-toggle::after{
  content: "\f044" !important;
  border: none!important;
  font: normal normal normal 1em FontAwesome;
  vertical-align: 0;
}
.mmo-text-cutoff{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: '...';
}
.btn:not(:hover):not(:focus) .hover-text{
  display: none;
}
.btn:hover .hover-text, .btn:focus .hover-text{
  display: inherit;
}
.btn.hover-show .icon {
  font-size: 1.8em;
  min-width: 1.8em;
  min-height: 1.5em
}
.btn.hover-show:hover .hover-text{
  visibility: visible;
  overflow-x: visible;
  width: 18em !important;
  font-size: 1.2em;
  font-weight: bolder;
  transition-delay: 0;
  transition-duration: .05s;
}
.btn.hover-show{
  padding-left: 1em;
  display: flex;
  overflow-x: hidden;
  flex-direction: row !important;
  flex-flow: row !important;
  min-width: 10% !important;
  /* For Safari 3.1 to 6.0 */
  -webkit-transition-property: width, height;
  -webkit-transition-duration: .15s;
  transition-property: width, height;
  transition-duration: .15s;
}
.btn.hover-show:hover{
  width: 60% !important;
  transition-duration: .05s;
}
.row .col-12:empty {
  display: block;
  height: 50px;
  width: 100%;
  background-color: red;
}
.darkblue{
  background-color: rgb(0, 0, 153);
}

.div-table div.table-head{
  top: -1.25rem;
  z-index: var(--z-table-head);
}
.div-table div.beam-row{
  top: 1.75rem;
  z-index: var(--z-table-beamrow);
}
.div-table div.cug-row{
  top: 3.6rem;
  z-index: var(--z-table-cugrow);
}
thead.sticky-top {
  z-index: var(--z-table-head);
}
.z-index-0{
  z-index: var(--z-layout-background) !important;
}
/*
 * HEIGHT
 */
span.small-number {
  padding-left: .2rem !important;
  padding-right: .2rem !important;
}
.content-height{
  height: var(--content-height) !important;
}
.min-content-height {
  min-height: var(--content-height) !important;
}
.max-content-height{
  max-height: var(--content-height) !important;
}
.card.content-height {
  height: var(--content-height) !important;
}
.card-content-height {
  height: 80vh !important;
  padding-bottom: 20vh;
}
.dropdown-height{
  max-height: 60vh !important;
}
.vh-10 {
  max-height: 10vh !important;
}
.vh-60, .max-h-60{
  max-height: 60vh !important;
}
.vh-65, .max-h-65vh{
  max-height: 65vh !important;
}
.vh-70, .max-h-70vh{
  max-height: 70vh !important;
}
.vh-75, .max-h-75vh{
  max-height: 75vh !important;
}
.vh-80, .max-h-80vh{
  max-height: 80vh !important;
}
.vh-85, .max-h-85vh{
  max-height: 85vh !important;
}
.vh-90, .max-h-90vh{
  max-height: 90vh !important;
}
.vh-95, .max-h-95vh{
  max-height: 95vh !important;
}
.vh-93, .max-h-93vh{
  max-height: 93vh !important;
}
.min-vh-93, .min-h-93vh{
  min-height: 93vh !important;
}
.mh-70{
  max-height: 70% !important;
}
.mh-80{
  max-height: 80% !important;
}
.vert-scroll{
  overflow-y: auto !important;
}
.plus_button_dropdown{
  max-height: 40vh !important;
}
.contentdiv {
  /*padding-bottom: 20vh !important;*/
  min-height: 75vh;
  max-height: var(--content-height) !important;
  /*margin-bottom: 2vh !important;*/
  background-color: white;
  overflow-y: auto;
  vertical-align: top;
  align-self: center;
}
.contentdiv > p {
  text-align: center;
  color: black;
}
.contentdiv > div {
  max-width: 100% !important;
}
div.error_msg {
  border-style: solid;
  border-width: thick;
  border-color: darkred;
  background-color: salmon;
}
.error_msg > p {
  color: red;
}
div.success_msg {
  border-style: solid;
  border-width: thick;
  border-color: darkgreen;
  background-color: lightgreen;
}
.success_msg > p {
  color: green;
}

div.covbeam.removed input, div.covbeam.removed select {
  outline-color: var(--danger);
  outline-offset: .5rem;
  outline-width: .2rem;
  outline-style: dashed;
}