* {
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
} html {
	height: 100%;
} body {
	color: #444;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	font-size: 0.9em;
	min-height: 100%;
	background-color: #fff;
	-webkit-flex-direction: column;
	flex-direction: column;
} input {
	width: 100%;
    border: 1px solid #ddd !important;
    margin: 0.75em 0;
    padding: 0.75em 0.8em;
    border-radius: 6px;
    background-color: #fff;
    color: #333;
} input:focus {
	outline: none;
} dl {
	margin: 0.25em 0 2em 1.25em;
	font-size: 0.9em;
} dt {
	color: #555;
	margin: 1.25em 0 0.25em 0;
	font-size: 1.2em;
	font-weight: 700;
} dt > i {
	margin: 0 0.25em 0 0;
} dd {
	color: #666;
	font-style: italic;
} pre {
	font-family: monospace;
} p {
	line-height: 1.4em;
} a {
	transition: all 0.25s ease;
	text-decoration: none !important;
	color: #000 !important;
	cursor: pointer;
	font-weight: 600;
} a:hover {
	color: #d6262b !important;
} table {
	width: 100%;
} table th {
	text-align: left;
	padding: 0.25em 0;
} footer {
	color: #6f7c82;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	padding: 0 1em;
	font-size: 0.8em;
	min-height: 10em;
	border-top: 1px solid #eff3f5;
	background-color: #fafbfc;
	-webkit-flex-direction: row;
	flex-direction: row;
} h1, h2, h3, h4, h5 {
	cursor: default;
} h1 {
	font-size: 1.5em;
	font-weight: 200;
} 

/* font-weights */
.bold {
	font-weight: 700;
}

/* Sign In */
.login-btn {
    color: white;
    border: none;
    border-radius: 25px;
    letter-spacing: 4px;
    font-size: 11px;
    padding: 9px 16px;
    margin: 0;
    float: none;
    background: #0076a8;
    transition: all 0.3s;
    width: 200px;
    height: 38px !important;
    background: #d6262b;
} .login-btn:hover {
	background: #21243d !important;
} .separator {
	border-top: 2px solid #e6e6e6;
	opacity: 1 !important;
} .form-control {
    padding: 0.55rem 0.75rem !important;
} .h1-signin {
	color: white;
	opacity: .2;
	font-size: 95px;
	line-height: 60px;
} .h1-sign {
	margin-left: 152px;
} .top-red {
	background: #d6262b;
	color: white;
} .top-red span {
	font-size: 60px;
}


.flip-card-3D-wrapper {
  /*position: relative;*/
  -o-perspective: 1000px;
  -webkit-perspective: 1000px;
  -ms-perspective: 1000px;
  perspective: 900px;
  min-height: 500px;
}
#flip-card {
  width: 100%;
  height: 100%;
  position: absolute;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -o-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.do-flip {
  -o-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
#flip-card .flip-card-front, #flip-card .flip-card-back{
  width: 100%;
  height: 100%;
  position: absolute;
  -o-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 2;
}
#flip-card .flip-card-back {
    -o-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}


#content {
	min-height: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex: 1;
	flex: 1;
	-webkit-flex-direction: column;
	flex-direction: column;
}

.flexcenter {
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-webkit-box-pack: center;
	align-items: center;
} .grantbox {
	border-radius: 6px;
	background-color: #fff;
} .login, .grantbox {
	width: 85%;
	padding: 1.5em;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
} .grantbox h3 {
	color: #888;
	padding: 0 0 0.5em 0;
	font-weight: 200;
	border-bottom: 1px solid #ccc;
	text-transform: uppercase;
} .grantbox dl {
	max-width: 70%;
} .grantbox img.productIcon {
	width: 18px;
	height: 18px;
	margin: 0 0.25em 0 0;
	display: inline-block;
}

/* Footer */
footer > div {
	-webkit-flex: 1;
	flex: 1;
} footer > div.logo {
	-webkit-flex: 0.25;
	flex: 0.25;
	min-width: 170px;
} footer a {
	color: #aaa;
	display: block;
} footer a:hover {
	color: #000;
} footer table {
	margin: 2em 0 0 0;
} footer table thead th {
	cursor: default;
	padding: 0 0 0.5em 0;
	min-width: 12em;
	text-align: left;
}

/* Grant box specific */
.grantbox header {
	padding: 0.5em 0.25em 1.0em 0.25em;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	border-bottom: 1px solid #eee;
} .grantbox header .logos {
	flex: 0.25;
} .grantbox header h1 {
	-webkit-flex: 0.75;
	flex: 0.75;
	font-size: 2em;
	text-align: right;
	text-transform: uppercase;
} .grantbox .verification {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
} .grantbox .verification div {
	flex: 0.6;
	padding: 0 0.5em 0 0;
	font-size: 0.75em;
} .grantbox .verification button {
	flex: 0.3;
	padding: 1.0em;
}

/* Login form specific */
::placeholder { /* Most modern browsers support this now. */
   color: #898993;
} .notification {
	cursor: default;
	border: 1px solid;
	margin: 0.5em 0;
	padding: 0.5rem 1.25rem;
	border-radius: 3px;
} .notification i {
	margin: 0 1em 0 0;
} .notification.error {
	color: #dc3545 !important;
	border-color: #f5c6cb;
	background-color: #fce8ea;
} .notification.warning {
	color: #8a6d3b;
	border-color: #faebcc;
	background-color: #fcf8e3;
} .danger-icon {
    background: #dc3545;
    color: #f8d7da;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    display: inline-block;
    font-size: 13px;
    padding-top: 2px;
} .notification.info {
	color: #31708f;
	border-color: #bce8f1;
	background-color: #d9edf7;
} .notification.success {
	color: #3c763d;
	border-color: #d6e9c6;
	background-color: #dff0d8;
} .ubilogix {
	color: white;
	font-size: 76px;
} .logo {
	text-align: center;
} #logo {
	width: 9.1em;
	height: 7em;
	background-image: url('/img/ubilogix-logo.svg');
	/*
	width: 10em;
	height: 2.7em;
	background-image: url('/img/ubiAuth-logo.svg');
	*/
	padding: 0.25em;
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
}
.gray-border {
	border: 2px solid #e6e6e6;
	width: 65px;
	height: 65px;
	padding-top: 3px;
}
.red-circle {
	width: 55px;
	height: 55px;
	background: #d6262b;
	color: white;
	font-size: 35px;
	padding-top: 3px;
} .inputs {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 10px;
}
.inputs > * {
  border: 1px solid black;
  width: 100%;
  padding: 6px;
  text-align: center;
  font-size: 20px;
  line-height: 2.5;
}

/* Dashboard */
nav#main > ul {
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	flex-grow: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
	border-bottom: 1px solid #ccc;
	list-style: none;
} nav#main > ul > li {
	flex: 0 1 auto;
	/*position: relative;*/
} nav#main > ul > li > a {
	color: #444;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	align-items: flex-end;
	padding: 0.25em 1.5em;
	line-height: 40px;
} nav#main > ul > li > a > i {
	line-height: 40px;
	margin: 0 0 0 5px;
} nav#main > ul > li > a:hover {
	color: #000;
	background-color: #fafbfc;
} nav#main > ul > li > ul {
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	background-color: #fff;
	text-align: center;
	list-style: none;
	position: absolute;
	padding: 1em 0;
	right: 0;
	border: 1px solid #ccc;
	border-top: none;
	border-bottom-left-radius: 1em;
	transition: all linear 0.2s;
} nav#main > ul > li > ul > li > a {
	display: block;
	padding: 0.25em 3em;
	color: #666;
} nav#main > ul > li > ul > li > a:hover {
	color: #000;
	background-color: #ccc;
} nav#main > ul > li > ul > li {
	display: inline-block;
} nav#main > ul > li > ul > li:first-child {
	color: #666;
	cursor: default;
	padding: 0 2em 0.5em 2em;
} #dashTabs {
	margin: 1em 2em;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
} #dashTabs nav {
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
} #dashTabs nav a {
	padding: 1.25em 1.5em;
	color: #888;
} #dashTabs nav a:hover {
	color: #000;
} #dashTabs nav a.active {
	color: #000;
	font-weight: bold;
} #dashTabs .tab {
	display: none;
	-webkit-flex-direction: column;
	flex-direction: column;
} #dashTabs .tab.active {
	display: flex;
} #dashTabs .tab h3 {
	margin: 2em 0 0.5em 0;
} #basic {
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
} #basic > div:first-child {
	flex-grow: 0;
	flex-basis: 150px;
} .avatar {
	background-color: #fff;
	border-radius: 100%;
	border: 1px solid #ccc;
}

@media(min-width: 768px) {
	.bi-color {
		background: rgb(214,38,43);
		background: linear-gradient(90deg, rgba(214,38,43,1) 0%, rgba(214,38,43,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
	}
}
@media(min-width: 992px) {
	.login {
		max-width: 450px;
	} .grantbox {
		max-width: 700px;
	} footer {
		padding: 0 8em;
	}
} @media only screen and (-moz-min-device-pixel-ratio: 1.5),
		 only screen and (-o-min-device-pixel-ratio: 3/2),
		 only screen and (-webkit-min-device-pixel-ratio: 1.5),
		 only screen and (min-devicepixel-ratio: 1.5) {
	}
} @media only screen and (orientation: portrait) {
	input {
		line-height: 3em;
	}
}