body, html {
    min-width:400px;
    overflow-y:auto;	
	background-size: cover;
	height: 100%;
    font-family: 'Roboto', sans-serif;
}

a {
	color: #6B99EE;
	text-decoration: none;
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}

a:hover, a:focus {
	color: #6B99EE;
	text-decoration: none;
}

.footer {
  height:36px;
  background-color: #d3d7cf;
}

.footer-transoarent {
  height:36px;
}

.footer-extend-button {
  margin-top: 1px;
}

.footer-extend {
  color: white;
  background-color: black;
  border: 1px solid #31611b;
}

.push-footer {
  height:36px;
}

.card { 
  background-color: rgba(0,0,0,0.5) !important; 
}

.info-box { 
  background-color: rgba(0,0,0,0.05) !important;
  border: 1px solid rgba(0,0,0,0.5) !important;
  border-radius: 8px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.info-box-title {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: rgba(0,0,0,0.5) !important;
  color: white;
}

.info-box-text {
  margin-top: 8px;
  margin-bottom: 16px;
  margin-left: 16px;
}

.info-box-icon {
  margin-top: -36px;
  margin-right: 16px;
}

.info-box-icon > i {
  margin-left: auto;
  padding-top: 16px;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  color: rgba(0,0,0,0.7) !important;
  border-radius: 50px;
  background-color: #9ABDDC;
}

.info-table-row-right {
  padding-top: 3px;
  padding-bottom: 3px;
  padding-right: 16px;
  padding-left: 8px;
  text-align: right;
  width: 40%;
  background-color: rgba(0,0,0,0.05);
}

.info-table-row-left {
  padding-top: 3px;
  padding-bottom: 3px;
  padding-right: 8px;
  text-align: left;
  background-color: rgba(0,0,0,0.05);
}

.modal-title-bar {
  background-color: #9ABDDC !important;
  color: white !important;
}

.modal-title-bar > button > span {
  color: white !important;
}

.modal-content-area {
  padding: 16px;
}

.modal-content-label {
  padding-right:0px !important;
  margin-right:0px !important;
}

.modal-content-text {
  padding-left:0px !important;
  margin-left:0px !important;
}

.modal-label-area {
  padding-right: 8px;
  padding-bottom: 8px;
  padding-top: 8px;
  background-color: rgba(0,0,0,0.1);
  text-align:right;
  float: right;
  width:100%;
  height:100%;
}

.modal-text-area {
  padding-bottom: 8px;
  padding-top: 8px;
  background-color: rgba(0,0,0,0.1);
  word-wrap:anywhere;
  width:100%;
  height:100%;
}

.modal-icon-area {
  padding-bottom: 8px;
  padding-top: 8px;
  padding-right: 20px;
  background-color: rgba(0,0,0,0.1);
  text-align:right;
  width:100%;
  height:100%;
}

#dropdown-menu-transparent {
   background-color: transparent !important;
   border: none;
}

#dropdown-menu-item>a {
  color:grey;
}

#dropdown-menu-item:hover, #dropdown-menu-item:focus {
  background-color:#eeeeee;
  border: none !important;
}

.btn-on-image {
  background-color: rgba(0,0,0,0.5);
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 16px;
  -moz-box-shadow: 0 0 3px #ccc;
  -webkit-box-shadow: 0 0 3px #ccc;
  box-shadow: 0 0 36px #000000;
}

#login-card {
  border:none;
  padding-top:28px;
  padding-left:28px;
  padding-right:28px;	
}

.company-login-head {
  background-color: rgba(0,0,0,0.5);
  color: white;
  padding-top:1.5rem;
  padding-left:2rem;
  padding-right:2rem;  
}

.company-login-content {
  background-color: rgba(0,0,0,0.5);
  color: white;
  line-height: 1.3;
}

.company-login-textarea {
  resize:none;
  height:110px;
}

.list-group-item.active {
  background-color: #6899EE !important;
  border-color: #6899EE !important;
}

.line-search {
	position:relative;
	padding-top: 16px;
	padding-left: 10%;
	padding-right: 10%;
}

.line-search-icon {
    color: #ccc;
	padding-left: 8px;
	position: absolute;
	padding-top: 12px;
}

.line-search-control {
    padding-left: 34px;
}

.grid-minus-lines-2 {
  /* One line is 48px, The top padding is 60px and the footer is 42px. */
  min-height: calc(100vh - 48px - 48px - 60px - 42px);
  padding: 24px;
  display: grid;
  /*grid-template-rows: repeat(2, minmax(180px, min-content));*/
  grid-template-columns: repeat(auto-fill, 350px);
  grid-template-columns: repeat(auto-fit, 350px);
  grid-template-columns: repeat(auto-fit, 350px);
  justify-content: center;
  align-content: start;
}

.grid-item {
  min-height: 150px;
  margin: 8px;
  padding: 4px;
  color: darkslategray;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgb(209, 213, 219, 1) 0px 0px 0px 1px inset;
}

.grid-item:hover {
  box-shadow: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgb(87, 184, 70, 1) 0px 0px 0px 1px inset;
}

.grid-item span {
/*  white-space: nowrap;
  text-overflow: ellipsis; */
  display: block;
  overflow: hidden;
}

.grid-item .icon {
  position: relative;
  float: left;
  top: 20px;
  left: 20px;
  z-index: 500;
}

.grid-item .head {
  margin-left: 120px;
  padding: 30px 5px 0px 0px;
}

.grid-item .head .card-title {
  font-weight: bold;
  text-transform: uppercase;
  min-height: 50px;
  display: flex;
  align-items: center;
}

.grid-item .badge {
  /* Set Width/height basically by parent class icon. */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  width: 80px;
  background-color: rgba(0, 0, 0, .02);
  overflow: hidden;
}

.grid-item .icon .circle {
  border-radius: 100%;
}

.grid-item .body {
  display: block;
  text-align: left;
}

.grid-item .body .scroll {
  /* Set height for scroll area. */
  height: 70px;
  margin-top: 35px;
  overflow-y: auto;
  overflow-x: hidden;
}

.grid-item .body .scroll .content {
  height: 100%;
  padding: 0px 15px;
  display: flex;
  align-items: center;
  line-height: 1.2em;
}

.grid-item .body .scroll .content>p {
  word-break: break-word;
  color: white;
}

.table-container {
	margin-top: 24px;
	min-height: 48px;
}

.table-loading-spinner {
  width: 100%;
  height: 100%;
  min-width: 40px;
  min-height: 40px;
  max-width: 200px;
  max-height: 200px;
}

.table-loading-text, .table-error-text  {
  margin-bottom: 10vh;
  text-align:center;
}

thead {
  font-weight: bold;
  color: grey;
}

.bg-table-row {
    background-color: #eeeeee;
    border-radius: 8px;
}

.bg-table-row:hover {
    background-color: #f3f3f3;
/*    cursor: pointer; */
}

.table thead th,
.table td {
    border: none
}

.table tbody td:first-child {
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px
}

.table tbody td:last-child {
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px
}

#spacing-row {
    height: 10px
}

.input-group-prepend span {
  background-color: #6B99EE;
  color: black;
  border:0 !important;
}

.fa-clickable {
  cursor:pointer;
}

.fa-clickable:hover {
  color: #6B99EE;
}

.input-error {
  border: 1px solid #ff0000;
}

.input-error-text {
  color: #ff0000;
}

.text-online {
  color: #4e9a06;
  font-weight: bold;
}

.copyright {
  background-color: #babdb6;
  padding-top:4px;
  padding-bottom:5px;
  color: #eeeeec;
}

.section-box {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  padding:3em;
  background-color: #efefef;	
}

.text-white { color: white; }
.text-red { color: red; }
.text-green { color: #4e9a06; }
.text-grey { color: grey !important; }

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

.nowrap { white-space: nowrap; }

.ml-0 { margin-left: 0px !important; }
.ml--30 { margin-left: -30px; }

.mt-1 { margin-top: 0.25em; }
.mt-2 { margin-top: 0.5em; }
.mt-3 { margin-top: 0.75em; }
.mt-4 { margin-top: 1em; }
.mt-5 { margin-top: 1.25em; }
.mt-6 { margin-top: 1.5em; }
.mt-7 { margin-top: 1.75em; }
.mt-8 { margin-top: 2em; }

.mb-1 { margin-bottom: 0.25em; }
.mb-2 { margin-bottom: 0.5em; }
.mb-3 { margin-bottom: 0.75em; }
.mb-4 { margin-bottom: 1em; }
.mb-5 { margin-bottom: 1.25em; }
.mb-6 { margin-bottom: 1.5em; }
.mb-7 { margin-bottom: 1.75em; }
.mb-8 { margin-bottom: 2em; }
.mb-9 { margin-bottom: 3em; }
.mb-10 { margin-bottom: 10px; }

::-moz-selection { background: #6B99EE; color: #fff; text-shadow: none; }
::selection { background: #6B99EE; color: #fff; text-shadow: none; }
 
.cookie-msg {
   background-color: #555753;
   background: #555753;
   position:fixed;
   bottom:0px; 
   z-index:10000; 
   width:100%; 
   line-height:16px;
   color: #f3f3f3;
   margin: 0 auto;
   padding: 1em;
   display: none;
}

.noscript-msg {
	height:100%;
	width:100%;
	z-index:30000;
	position:fixed;
	top:0;
	left:0;
	background-color:#000;
	opacity:0.8;
	display:none;
}

.noscript-wrapper {
    height: 100%;
    width: 80%;
    margin-left:10%;
    position: relative 
}

.noscript-content {
    position: absolute;
    color: white;
    font-size: large;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}

.fpc-center-with-bg {
 	min-height:100%;
    height: auto !important;
	height: 100%;
    margin: 0 auto -36px;
    display: flex;
    align-items:center;
    background-image: url('../ico/login-bg2.jpg'); 
    background-position: 0 0; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;
}

.fpc-center {
 	min-height:100%;
    height: auto !important;
	height: 100%;
    margin: 0 auto -36px;
    display: flex;
    align-items:center;
}

.fpc-nav {
 	min-height:100%;
    height: auto !important;
	height: 100%;
    margin: 0 auto -36px;
}

.fpc-nav-with-bg {
 	min-height:100%;
    height: auto !important;
	height: 100%;
    margin: 0 auto -36px;
    background-image: url('../ico/login-bg2.jpg'); 
    background-position: 0 0; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;
}

.fpc-nav-container {
  	padding-top: 60px;
}

.fpc-center .dropdown-toggle:active, .dropdown-toggle:hover, .dropdown-toggle:focus {
  background-color: white !important;
  color: black;
}

.navbar-transparent {
  background: none;
}

.navbar-transparent a {
  color: white;
}

/* Center the modal dialog vertically. */
.modal-centered {
  text-align: center;
  padding: 0!important;
}

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

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

/* Profile images. */
.avatar-lg {
  color: rgb(255, 255, 255); 
  background-color: #c6c699;
  font-size: 36px; 
  font-weight: bold;
  border-radius: 80px; 
  width: 80px; 
  height: 80px; 
  line-height: 80px; 
  margin-left: auto;
  margin-right:0px;
  margin-top:5px;
  margin-bottom:5px;
  text-align: center;
}    

.avatar-xs {
  color: rgb(255, 255, 255); 
  background-color: #c6c699;
  font-size: 18px; 
  font-weight: bold;
  border-radius: 40px; 
  width: 40px; 
  height: 40px; 
  line-height: 40px; 
  margin-left: auto;
  margin-right:0px;
  margin-top:5px;
  margin-bottom:5px;
  text-align: center;
}

.loader-spinner {
    width:40px;
    height:40px;
    position:absolute;
    left:calc(50% - 20px);
    top:calc(50vh - 20px);
}

.alerts {
    position: fixed;
    top: 60px;
    left: 5%;
    width: 90%;
    z-index:20001;    
}

@media screen and (min-width: 1400px) {
  .container {
    max-width: 1370px;
    width: 1370px;
  }
}
@media screen and (min-width: 1600px) {
  .container {
    max-width: 1570px;
    width: 1570px;
  }
}
@media screen and (min-width: 1900px) {
  .container {
    max-width: 1870px;
    width: 1870px;
  }
}
@media screen and (min-width: 2500px) {
  .container {
    max-width: 2470px; 
	width: 2470px; 
  }
}
@media screen and (min-width: 3100px) {
  .container {
    max-width: 3070px; 
	width: 3070px; 
  }
}
@media screen and (min-width: 3800px) {
  .container {
    max-width: 3770px; 
	width: 3770px; 
  }
}
@media screen and (min-width: 7500px) {
  .container {
    max-width: 7470px; 
	width: 7470px; 
  }
}