/*--------------------------------------------------
----------------------------------------------------
----------------------------------------------------

	Zartis WP Styles

	Unique styles to stop overriding of
	WordPress system styles

	$hh-yellow:  				rgb(245,196,0);
	$hh-green:				    rgb(0,196,131);
	$hh-blue: 				    rgb(0,147,196);
	$hh-black:				    rgb(14,14,14);
	$hh-orange:					rgb(245,98,0);
	$hh-red:					rgb(245,0,0);
	$hh-hot: 					rgb(208,0,121);

----------------------------------------------------
----------------------------------------------------
--------------------------------------------------*/
.zar_body {
	font: 100% 'Roboto', Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; /* 14px */
	line-height: 1.5;/* 21px */
	color: rgb(94, 94, 106);
	padding: 0;margin: 0;
	background: white;
    font-size:100%;
    font-weight: 300;
}

.zar_body * {
		box-sizing: border-box;
}

.zar_body .wrap {
	position: relative;
	z-index: 1;
	min-width: 380px;
	max-width: 1400px;
	padding: 20px;
	background: white;
}

.zar_body #main {
	
	overflow: hidden;/* Clearfix */
	width: 100%;
	padding: 2rem;    
	border: 1px solid rgb(233,233,238);
   	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius:3px;
	background: rgb(251, 251, 251);
}

.zar_body .content {
	position: relative;	
    width: 100%;
}

/* Branding
============================= */

.zar_body .branding {
    width:160px;
}

.zar_body .branding img{
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: none;
	-moz-box-shadow:  none;
	box-shadow: none;
}

/* Grids
============================= */
.zar_body .c6,
.zar_body .c7,
.zar_body .c8,
.zar_body .c9,
.zar_body .c16   {
	margin-left: 1.25%;
	margin-right: 1.25%;
	
	display: block;
}

.zar_body .c6:first-child,
.zar_body .c7:first-child,
.zar_body .c8:first-child,
.zar_body .c9:first-child,
.zar_body .c16:first-child   {
	margin-left: 0;
}

.zar_body .c6:last-child,
.zar_body .c7:last-child,
.zar_body .c8:last-child,
.zar_body .c9:last-child,
.zar_body .c16:last-child   {
	
	margin-right: 0;
}

.zar_body .c6 {
	width: 37.15%;
}

.zar_body .c7 {
	width: 41.25%;
}

.zar_body .c8 {
	width: 47.5%;
}

.zar_body .c9 {
	width: 53.75%;
}

.zar_body .c16 {
	width: 97.5%;
}

@media only screen and (max-width: 900px) {
	.zar_body .c6,
	.zar_body .c7,
	.zar_body .c8,
	.zar_body .c9,
	.zar_body .c16   {
		width: 100%;
	}
}

/* Callouts
============================= */

.zar_body .callout {
 display: inline-block;
 padding: 10px 20px;
 margin: 0 0 18px;
 border: 1px solid #ccc;
 border: 1px solid rgba(0, 0, 0, 0.15);
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 background-color: #fcfcfc;
}

.zar_body .callout.code {
		width: 100%;
	 padding-left:20px;
	 background-color: #fcfcfc;
}

/* Type
============================= */

.zar_body p {
	font-size: 1rem;
    margin:.75em 0 1em 0;
}

.zar_body a:link,
.zar_body a:visited {
	color: rgb(0,196,131);
	text-decoration: none;
	-webkit-transition: all 0.3s ease-out;
	outline: none;
}

.zar_body a:hover,
.zar_body a:focus,
.zar_body a:active {
	opacity: .6;
	text-decoration: none;
}

.zar_body p,
.zar_body a,
.zar_body h2,
.zar_body h3 {
	font-weight:300;
}

.zar_body h2 {
    font-weight:500;
	color: rgb(55,55,65);
  	font-size: 24px;
 	line-height: 1.2em;
 	margin-bottom: .5rem;
}

.zar_body h3 {
    font-weight:500;
	color: rgb(55,55,65);
  	font-size: 18px;
 	line-height: 1.0909em;
}

.zar_body ul.list {
	margin: 1.5em 0;
	padding: 0;
	font-size: 16px;
  	list-style-type: none;
}

.zar_body ul.list li {
	padding-left: 25px;
	margin-left: 5px;
	color: rgb(55,55,65);
	margin-bottom: .85em;
	line-height: 1.6;
	background: url(../images/check_alt_16x16.png) no-repeat 0 3px;
}

.zar_body strong {
	    font-weight:500;
}
/* Code
============================= */
.zar_body code, .zar_body pre {
 font-family: "Andale Mono","Courier New", Courier, "Lucida Console", monospace;
 font-size: 12px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}

.zar_body code {
 font-size: 14px;
 color: rgba(0, 0, 0, 0.75);
 padding: 5px 8px;
 /*background-color: rgb(247, 247, 234);*/
 background: none;
}

.zar_body pre {

 display: block;
 padding: 8.5px;
 margin: 0 0 18px;
 line-height: 18px;
 font-size: 12px;
 border: 1px solid #ccc;
 border: 1px solid rgba(0, 0, 0, 0.15);
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 white-space: pre;
 white-space: pre-wrap;
 word-wrap: break-word;

}

/* Messaging
============================= */

/* For show hide dialog  */
.zar_body .dialog {
    width: 94%;
    padding: 5px 3%;
    margin: 10px 0;
       -moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background: rgb(1,160,198);
}

.zar_body .dialog h2 {
	color: rgb(255,255,255);
	margin: inherit;
}

.zar_body .dialog p {
	color: rgb(255,255,255);
}

.zar_body .info-banner.dialog a {
	color: rgb(255,255,255);
}

/* For nav arrow  */
.zar_info-txt{
	z-index: 100;
	position: fixed;
	background: none repeat scroll 0 0 #111;
	border-radius: 0.3em 0.3em 0.3em 0.3em;
	color: #FFFFFF;
	font-weight:bold;
	text-align: center;
	padding:15px;
	width: 250px;
	opacity: 0.1;
	top: 0;
	left:0;
}

.zar_message_arrow {
	border-color: transparent #111 transparent transparent;
	border-style: solid;
	border-width: 10px;
	height:0;
	width:0;
	position:absolute;
	left:-20px;
	top:8px;
}

/* Helpers
============================= */

.zar_body .cent {
	text-align: center;
}

.zar_body img {
    max-width:100%;
    border: 1px solid rgb(225,225,225);
    padding:2px;
	-webkit-border-radius: .3em;
	-moz-border-radius: .3em;
	border-radius:  .3em;


}

.zar_body .hide {
	display: none;
}

.zar_body .hint {
	padding: 5px 0 0;
	font-size: .95em;
	margin: 0;
	width: 60%;	
    color: #DC0104;
}

/* Buttons
============================= */

.zar_body button {
	 background: none;
}

.zar_body .btn {
	color: rgb(55,55,65);
    display: inline-block;
    width: auto !important;
    margin: 13px 0 0 0;
    border: 0;
    -webkit-background-clip: padding;
	-moz-background-clip: padding;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius:  2px;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
    position: relative;
    cursor: pointer;
	background: rgb(0,196,131);
	zoom: 1;
	color: rgb(255,255,255) !important;
    font-size: 1.25rem;
    text-decoration: none;
	padding: .7rem 1rem .7rem 2rem;

}

.zar_body .btn-sm {
	font-size: 1rem;
	padding: .35rem .5rem .35rem 2rem;
}

.zar_body .btn:hover{
	opacity: .6;
	filter:Alpha(Opacity=60);
	background-image:none;
}

.zar_body .btn:hover {
	color: #fff;
    background-image: none;
}

.zar_body .btn:active {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
	-webkit-transform: translate(0, 2px);
	-moz-transform: translate(0, 2px);
	-o-transform: translate(0, 2px);
	transform: translate(0, 2px);
}

/* No icon */
.zar_body .btn.norm{
	padding: 5px 13px;
}

/* Save/Submit */
.zar_body .btn.save,
.zar_body .btn.submit {
	background-image: url(../images/check_12x10.png);
	background-position:  10px 49% !important;
	background-repeat: no-repeat !important;
}

/* Next (For signup) */
.zar_body .btn.next  {
	padding: 8px 3% 8px 1%;
}

.zar_body .btn.next  {
	font-size: 1.4em;
	padding: 0 35px 0 18px;
	background:  url(../images/arrow_right_alt1_24x24.png) no-repeat 100% 50%  !important;
}

/* -------- Forms -------- */

.zar_body fieldset {
	position: relative;	
	width: 100%;
	padding: 0;
}

.zar_body ol {
	
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
    background-color: white;
    padding: .5rem;
    border: 1px solid rgb(235,235,235);
}

.zar_body ol li {
	position: relative;
	width: 99%;	
    margin-left: 0;
}

.zar_body label {	
	width: 100%;
	font-size: 1.1em;
	margin-right: 3%;
	margin-top: 5px;
}

.zar_body input  {	
	color: rgb(131,131,145);
	width: 99%;
	padding: 8px 5px;
	margin-top: 6px;
    font-size: 1.2em;
	border: 1px solid rgb(205,205,206);
   	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius:3px;	
	background-color: rgb(255,255,255);
}

.zar_body .sm input  {
	width: 55%;
}

.zar_body .token-input {
	font-size: 14px;
}

/* -------- Tabs -------- */

/* ---- More Info Tabs for Details Pages. For V1.1  ---- */
.zar_body .tabs {
  list-style: none;
  zoom: 1;
  margin-top: 0;
  margin-bottom: 2rem;
}
.zar_body .tabs:before,
.zar_body .tabs:after {
  display: table;
  content: "";
  zoom: 1;
  *display: inline;
}
.zar_body .tabs:after{
  clear: both;
}
.zar_body .tabs > li{
  outline: none;  
  cursor: pointer;
}
.zar_body .tabs > li > a{
  display: block;
  outline: none;
}
.zar_body .tabs {  
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
}
.zar_body .tabs > li {
	display: inline-block;
  position: relative;
  top: 1px;
  margin-bottom: 0;
  z-index: 0;
}
.zar_body .tabs > li > a {
	display: inline-block;
  padding: 0 15px;
  margin-right: 1rem;
  line-height: 36px;
  border: 1px solid transparent;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  font-size: 1.1rem;
   outline: none;
   cursor: pointer;
}
.zar_body .tabs > li > a:hover,
.zar_body .tabs > li > a:focus {
  text-decoration: none;
  background-color: #eee;
  border-color: #eee #eee #ddd;
}
.zar_body .tabs > li.active > a {
	background: rgb(251, 251, 251);
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}
.zar_body .tabs .menu-dropdown, .zar_body .tabs .dropdown-menu {
  top: 35px;
  border-width: 1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px 6px;
  border-radius: 0 6px 6px 6px;
}
.zar_body .tabs a.menu:after, .zar_body .tabs .dropdown-toggle:after {
  border-top-color: #999;
  margin-top: 15px;
  margin-left: 5px;
}
.zar_body .tabs li.open.menu .menu, .zar_body .tabs .open.dropdown .dropdown-toggle {
  border-color: #999;
}
.zar_body .tabs li.open a.menu:after, .zar_body .tabs .dropdown.open .dropdown-toggle:after {
  border-top-color: #555;
}
.zar_body .tab-content {
  clear: both;
}

.zar_body .tab-content > *{
  display: none;
}
.zar_body .tab-content > .active{
  display: block;
}

/* -------- Flexbox styles -------- */ 
.zar_body .flex {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.zar_body .flex-col {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.zar_body .flex-1 {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.zar_body .flex-v-center {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.zar_body .flex-h-center {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.zar_body .flex-end {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.zar_body .flex-start {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start
}