/* vim: sw=4 ts=4 et :
*/
body {
    color: #ccc;
    font-family: 'Open Sans';
}

.rtl {
  font-family: 'David Libre';
  font-size: 120%;
  direction: rtl;
}
.ltr {
  font-family: 'Open Sans';
  font-size: 100%;
  direction: ltr;
}

.pure-img-responsive {
	max-width: 100%;
	height: auto;
}

.header {
	margin: 0;
	color: #FFF;
	background: #28486f fixed top center;
	text-align: center;
	padding: 2.5em 2em 0;
	border-bottom: 1px solid #eee;
}
.header h1 {
	margin: 0.2em 0;
	font-size: 3em;
	font-weight: 300;
}
.header h2 {
	font-weight: 300;
	color: #ccc;
	padding: 0;
	margin-top: 0;
}
h2 {
	color: #4bb2ec !important; 
}
a {
	color: #33f;
	text-decoration: none;
}
.pure-button-primary {
	background:  #28486f !important; 
	padding: 0.75em;
	border-radius: 8px;
	white-space: nowrap !important;

}
.get-now {
	background:  #28486f !important; 
	color: #fff;
	padding: 0.25em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	display: inline-block;
	margin-top: 0.25em;
	border-radius: 8px;
	white-space: nowrap !important;
}

.content {
	margin: 0 auto;
	padding: 0 1em;
	max-width: 800px;
	margin-bottom: 1px;
	line-height: 1.6em;
	color: #555;
}
.content-subhead {
	margin: 50px 0 20px 0;
	font-weight: 300;
	color: #999;
}

h2.content-subhead {
	color: #28486f !important;
}

.logo {
	height: 48px;
	padding: .1em;
}
.subhead-img {
	height: auto;
	padding: .1em;
}

.learn-more {
	background: #28486f;
	color: #ddd;	
	margin-top: 16px;
	padding: 0.3em;
	display: block;
}
.footer {
	color: #FFF;
	background: #28486f fixed top center;
	text-align: center;
	margin-top: 4em;
	padding: 2em;
}
.space1em {
	height: 1em;
}

.code {
	font-family: 'Open Mono', monospace;
	background: #aaa;
	margin: 1em;
	padding: 0.5em;
	white-space: pre !important;
}

tt {
	font-family: 'Open Mono', monospace !important;
	font-size: 1em !important;
}
.center {
	display: table;
	margin: 0 auto;
}

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

.mb-1 { margin-bottom: 1em !important; }
.mb-2 { margin-bottom: 2em !important; }
.mb-3 { margin-bottom: 3em !important; }
.mb-4 { margin-bottom: 4em !important; }
.mt-1 { margin-top: 1em !important; }
.mt-2 { margin-top: 2em !important; }
.mt-3 { margin-top: 3em !important; }
.mt-4 { margin-top: 4em !important; }
.ml-1 { margin-left: 1em !important; }
.hi-1 { height: 1em !important; }
.hi-2 { height: 2em !important; }
.hi-3 { height: 3em !important; }
.hi-4 { height: 4em !important; }

.ms-1 { margin-start: 1em !important; }
.ms-2 { margin-start: 2em !important; }
.ms-3 { margin-start: 3em !important; }
.ms-4 { margin-start: 4em !important; }

.ps-1 { padding-start: 1em !important; }
.ps-2 { padding-start: 2em !important; }
.ps-3 { padding-start: 3em !important; }
.ps-4 { padding-start: 4em !important; }

.pl-1 { padding-left: 1em !important; }
.pl-2 { padding-left: 2em !important; }
.pl-3 { padding-left: 3em !important; }
.pl-4 { padding-left: 4em !important; }
.pr-1-2 { padding-right: 0.5em !important; }
.pr-1 { padding-right: 1em !important; }
.pr-2 { padding-right: 2em !important; }
.pr-3 { padding-right: 3em !important; }
.pr-4 { padding-right: 4em !important; }

.p1-4 { padding: 0.25em !important; }
.p1-2 { padding: 0.5em !important; }
.p1 { padding: 1em !important; }
.p2 { padding: 2em !important; }
.p3 { padding: 3em !important; }
.p4 { padding: 4em !important; }

.me-1 { margin-end: 1em !important; }
.me-2 { margin-end: 2em !important; }
.me-3 { margin-end: 3em !important; }
.me-4 { margin-end: 4em !important; }

.cont {
    display: contents;
}

.indent {
  padding: 0.25em !important;
  padding-left: 1em !important;
  background: #EAD8D7;
}
.indent2 {
  padding: 0.25em !important;
  padding-left: 1em !important;
  background: #d2c2c1;
}

.msg_fail {
    background: #F7BBBB !important;
    color: black !important;
	text-align: center;
    padding: 1em;
}
.msg_ok {
	text-align: center;
    background: #C8F4A8 !important;
    color: black !important;
    padding: 1em;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed !important; /* Stay in place */
  z-index: 9998; /* Sit on top */
  left: 0;
  top: 0;
  width: 100% !important; /* Full width */
  height: 100% !important; /* Full height */
  background: #00000000;
  overflow: auto; /* Enable scroll if needed */
}
.modal-on {
    display: block !important;
}
.modal-off {
    display: none !important;
}

/* Modal Content/Box */
.modal-content {
  margin: 15% auto; /* 15% from the top and centered */
  padding: 2em;
  text-align: center;
  width: 80%; /* Could be more or less, depending on screen size */
}

.space1em {
    height: 1em;
}
.fright {
    float: right;
}
.fleft  {
    float: left;
}
[x-cloak] {
    display: none !important;
}

dialog::backdrop {
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 1px,
    rgba(0, 0, 0, 0.3) 1px,
    rgba(0, 0, 0, 0.3) 20px
  );
  backdrop-filter: blur(3px);
}

.odd {
    background: #D6D6D6;
}
.dark { color: #000; }
.red { border-right: 4px solid #F00;}

.ellipsis {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}
.img {
    padding: 1em;
}
.img:hover {
    background: lightblue ;
}