.left_menu_item{
	    font-family: inherit;
	  padding-top: 10px;
	  padding-bottom: 10px;
  padding-left: 20px;
  width: 148px;
	  margin-left: 12px;
	  border-bottom: 1px solid #E8E8E8;
	  position: relative;
	  cursor:pointer;
	  color:#333;
}

.left_menu_item:hover{
	 background-color:#8F8B8B;	
}

.left_menu_item_selected{
 	 background: #8F8B8B !important;
	    font-family: inherit;
		font-weight:bold;
	  padding-top: 10px;
	  padding-bottom: 10px;
	  padding-left: 20px;
	  width: 148px;
	  margin-left: 12px;
	  border-bottom: 1px solid #E8E8E8;
	  position: relative;
	  cursor:pointer;
	  color:#FFF !important;
}

.left_menu_title{
		width: 224px;
	  /* text-align: center; */
	  padding-left: 10px;
	  font-size: 15px;
	  color: #FFF;
	  font-weight: bold;
	  padding-top: 14px;
	  padding-bottom: 14px;
	  margin-bottom: 14px;
	  margin-top: -1px;
	background: rgb(2,101,176); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(160, 0, 0, 1) 0%, rgba(167,207,223,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(160, 0, 0, 1)), color-stop(100%,rgba(255, 136, 133, 1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(160, 0, 0, 1) 0%,rgba(255, 136, 133, 1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(160, 0, 0, 1) 0%,rgba(255, 136, 133, 1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(160, 0, 0, 1) 0%,rgba(255, 136, 133, 1) 100%); /* IE10+ */
	background: linear-gradient(to right, rgba(160, 0, 0, 1) 0%,rgba(255, 136, 133, 1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0265b0', endColorstr='#a7cfdf',GradientType=1 ); /* IE6-9 */

}





.notification_msg{
	width: 100%;
	padding-top: 3px;
	padding-bottom: 3px;
 	margin-bottom: 6px;
	border-radius: 8px;
 	color: #000;
	font-size: 14px;
	font-size: 14px;
	padding-left: 9px;
	padding-bottom: 11px;
	padding-top: 10px;
	margin-left: -2px;
	  background: #EEE;
}

.notification_list_item{
	width: 100%;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-bottom: 6px;
	border-radius: 8px;
	background: #E3E3E3;
	color: #1E1919;
	font-size: 14px;
}

.msg_cnt{
	font-size:18px;
	font-weight:bold;	
}



#splash_body{
	background-color:#FFFFFF;
	color:#000;	
}

.form_elements td{
	padding-top:5px;
}

.grey_to_white_gradient{
	background: transparent !important;	
}

#account_slider{
	margin-top:-7px !important;	
}

#search_area #search{
	/*border: 1px solid #969191 !important;
 	 border-radius: 0px;*/
}

#list_button{
	color:#FFF;	
}






#top_bar{
	height:50px;
	width:100%;

	background: rgb(59,103,158); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(59,103,158,1) 0%, rgba(59,154,226,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(59,103,158,1)), color-stop(100%,rgba(59,154,226,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(59,154,226,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(59,154,226,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(59,154,226,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(59,103,158,1) 0%,rgba(59,154,226,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#3b9ae2',GradientType=0 ); /* IE6-9 */
	
}



.button_style {
	/* background: url(theme1_images/buttonbg.png); */

  background-color: #ee3124;
  color: white;
  background: rgb(170,0,0);
  background: -moz-linear-gradient(top, rgba(170,0,0,1) 0%, rgba(238,49,36,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(170,0,0,1)), color-stop(100%,rgba(238,49,36,1)));
  background: -webkit-linear-gradient(top, rgba(170,0,0,1) 0%,rgba(238,49,36,1) 100%);
  background: -o-linear-gradient(top, rgba(170,0,0,1) 0%,rgba(238,49,36,1) 100%);
  background: -ms-linear-gradient(top, rgba(170,0,0,1) 0%,rgba(238,49,36,1) 100%);
  background: linear-gradient(to bottom, rgba(170,0,0,1) 0%,rgba(238,49,36,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa0000', endColorstr='#ee3124',GradientType=0);



	padding: 5px;
	padding-left: 33px;
	padding-right: 33px;
	border: 0px solid #EEE;
	border-radius: 4px;
	color: #FFFFFF;
	cursor: pointer;
	/* width: 168px; */
	padding-bottom: 8px;
	padding-top: 8px;
	margin-right: 6px;
	-webkit-box-shadow: 2px 4px 5px rgba(0,0,0,.5);
	-moz-box-shadow: 2px 4px 5px rgba(0,0,0,.5);
	box-shadow: 2px 2px 5px rgba(0,0,0,.5);
}


.button_style:hover {
	/*background-color:#000099;*/
}


.button_style:active {
	position:relative;
	top:1px;
}












/*   SMALL MENU  START  */

.small_menu_links{
	width:92.5%;
	padding-top:8px;
	padding-bottom:8px;
	border-bottom:1px solid #FFF;	
	padding-left:20px;
	color:#FFFFFF;
	font-size:14px;
	cursor:pointer;
	background-color:#1570a6;	
}

.small_menu_links:hover{
	background-color:#083047;
}


.bottom_text{
	font-size:14px;	
	font-weight:bold;
	color:#999999;
}

.have_submenu{
	background:url(../images/arrow_down.png);
	background-repeat:no-repeat;
	width:20px;
	height:20px;
	float:right;
	margin-right:30px;
}

.small_menu_links_submenu{
	width:88%;
	padding-top:8px;
	padding-bottom:8px;
	border-bottom:1px solid #FFFFFF;	
	border-left:.5em solid #083047;
	padding-left:25px;
	color:#FFFFFF;
	font-size:14px;
	cursor:pointer;	
	background-color: #1570a6;
}

.small_menu_links_submenu:hover{
	background-color:#083047;	
}


.small_menu_links_subsubmenu{
	width: 82.5%;
	padding-top: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid #FFFFFF;
	border-left: 12px solid #083047;
	padding-left: 35px;
	color: #FFFFFF;
	font-size: 14px;
	cursor: pointer;
	background-color:#5F8FAC;
}

.small_menu_links_subsubmenu:hover{
	background-color:#083047;	
}











/*   -------------------  NEW ADDED   ------------------- */



.listbox_label{
	width:400px;
	height: 14px;
	overflow: hidden;	
}



.block{
	width: 92%;
	margin: 4%;
	margin-top:5px;
	color:#000;
}

.block .block_title{
	height: 30px;
	/* background: url('theme1_images/bottombarbg.png') repeat scroll 0% 0% transparent; */
	position: relative;
	/* -webkit-box-shadow: 2px 1px 10px 4px rgba(0, 0, 0, 0.75); */
	-moz-box-shadow: 2px 1px 10px 4px rgba(0, 0, 0, 0.75);
	/* box-shadow: 2px 1px 10px 4px rgba(0, 0, 0, 0.75); */
	padding-top: 11px;
	font-size: 16px;
	z-index: 1001;
	/* border-radius: 5px 5px 4px 4px; */
	text-align: center;
	font-weight: bold;
	color: #414477;
}

.block .block_content{
	background-color:#FFFFFF;
	min-height:30px;
	border-radius:0px 0px 5px 5px;
	margin-top:0px;
	z-index:1000;
	font-size:14px;
	padding:8px;
	width: 96%;
	margin-left: 2%;
	
}

.bold{
	font-weight:bold;	
}












.dialog{
	border: 3px solid transparent;
	border-radius: 6px;
	background: url("theme1_images/bg.png");
	margin: calc((100% - 400px)/2);
	width: 400px;
	padding: 5px;
}

#messagebox_img{
	float: left;
	width: 37px;
	margin-right: 10px;
	margin-left: 1px;
}

/*
#messagebox_content{
	padding:13px;	
	font-size:13px;
}
*/
#messagebox_content {
  padding: 13px;
  font-size: 15px;
}

/*
#messagebox_title{
	margin-top: 9px;
	width: 101%;
	font-size: 18px;
	color: #676262;
	margin-bottom: 4px;
	padding-bottom: 8px;
	border-bottom: 1px solid #EEE;
}
*/
#messagebox_title {
      margin-top: -17px;
	  width: 416px;
	  font-size: 18px;
	  color: white;
	  padding-top: 10px;
	  border-top-left-radius: 4px;
	  border-top-right-radius: 4px;
	  margin-bottom: 4px;
	  background: #d72a1e;
	  margin-left: -11px !important;
	  padding-bottom: 10px;
}

#messagebox_buttons{
	padding-bottom:20px;	
}




.username_icon{
	background:url(../../images/icons/user.png) 6px 10px #FFF no-repeat !important;
}

.password_icon{
	background:url(../../images/icons/password.png) 7px 4px #FFF no-repeat !important;
}


.amount_icon{
	background: url(../../images/icons/amount.png) 4px 5px #FFF no-repeat !important;
}

.description_icon{
	background:url(../../images/icons/description.png) 5px 6px #FFF no-repeat !important;
}

.account_icon{
	background:url(../../images/icons/account_icon.png) 2px 6px #FFF no-repeat !important;
}

.search_icon{
	background:url(../../images/icons/search_icon.png) 8px 10px #FFF no-repeat !important;
}

.address_icon{
	background:url(../../images/icons/address_icon.png) 0px 4px #FFF no-repeat !important
}


.date_icon{
	background:url(../../images/icons/date.png) 6px 5px #FFF no-repeat !important;
	padding-left:36px !important;
}

.email_icon{
	background:url(../../images/icons/email.png) 5px 5px #FFF no-repeat !important;
	padding-left:10px !important;
}

.time_icon{
	background:url(../../images/icons/time.png) 4px 5px #FFF no-repeat !important;
	padding-left:10px !important;
}

.phone_icon{
	background:url(../../images/icons/phone_icon.png) 4px 5px #FFF no-repeat !important;
}

.input_box .listbox select{
	display:none;	
}

/*.listbox:focus {
    outline: none;
}*/

#list_box .block_content{
	height:300px !important;	
}


#listbox_content{
	overflow:auto;	
	max-height: 300px;
  	display: block;
}


.listbox select{
	display:none;	
}

.listbox_item{
  height: auto;
  margin-bottom: 1px;
  overflow: hidden;
  background: #F7F7F7;
  background-repeat: repeat-x;
  padding-top: 6px;
  color: #121010;
  padding-left: 7px;
  border: 1px solid #E0E0E0;
  border-radius: 0px;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
}


.cancel_btn{
  background: #EAEAEA !important;
  color: #6F6F6F !important;	
}


.listbox_item:hover{
	background: #F0F0F0;
}


.listbox_item_checked{
	float: right;
	width: 31px;
	margin-right: 4px;
	height: 31px;
	margin-top: -7px;
	margin-bottom: -11px;

	background-image: url(../../images/checkin.png);

	z-index: 10000;
}


.listbox_field{
	width: 400px;
	height: 20px;
	margin-bottom: 0px;
	background-repeat: repeat-x;
	padding-top: 6px;
	padding-left: 10px;
	padding-bottom: 4px;
	color: #434343;
	border: 1px solid #AAC1AD;
	border-radius: 0px;
	text-align: left;
	background: url(theme1_images/buttonbg.png);
	background: #FFFFFF !important;
	font-weight: bold;
	font-size: 13px;
}

.listbox_field:focus {
    outline: -webkit-focus-ring-color auto 5px;
}


.listbox_arrow {
	float: right;
	width: 19px;
	margin-right: 3px;
	height: 19px;
	margin-top: 0px;
	background: url(theme1_images/arrow_left.png);
}

.list_item_block, .list_item_block2  {
	width: 96%;
	margin: 2px;
	padding: 1%;
	margin-bottom: 3px;
	border: #CCCCCC 1px solid;
	border-radius: 4px;
	min-height: 26px;
	background-color: #FFFFFF;
	-webkit-box-shadow: 1px 1px 1px 0px rgba(50, 50, 50, 0.35);
	-moz-box-shadow: 1px 1px 1px 0px rgba(50, 50, 50, 0.35);
	box-shadow: 1px 1px 1px 0px rgba(50, 50, 50, 0.35);
}


.top_bottom_11_padding{
	padding-top: 7px !important;
	padding-bottom: 7px !important;	
}


.top_bottom_11_padding img{
	width:25px !important;
}

.account_name{
	font-size:14px !important;	
}

/*  CHECKBOX text1 Text2            END*/




.zebra_odd{
	background-color:#FFFFFF;	
}

.zebra_event{
	background-color:#ECF2FE;	
}


.inbox_title{
	font-size:18px !important;
	font-weight:bold !important;
	margin-left:8px !important;
	margin-top:8px !important;
	margin-bottom:10px !important;	
	color:#000000;
}



.workflow_item{


	-moz-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
	-webkit-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
	box-shadow:inset 0px 1px 0px 0px #7a8eb9;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #637aad), color-stop(1, #5972a7));
	background:-moz-linear-gradient(top, #637aad 5%, #5972a7 100%);
	background:-webkit-linear-gradient(top, #637aad 5%, #5972a7 100%);
	background:-o-linear-gradient(top, #637aad 5%, #5972a7 100%);
	background:-ms-linear-gradient(top, #637aad 5%, #5972a7 100%);
	background:linear-gradient(to bottom, #637aad 5%, #5972a7 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#637aad', endColorstr='#5972a7',GradientType=0);
	background-color:#637aad;
	border:1px solid #314179;

	font-size:16px;
	text-align:center;
	margin-bottom:7px;
	padding-top:5px;
	padding-bottom:5px;
	text-align:center;
	color:#FFFFFF;
	
}



.workflow_item_selected{

	-moz-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
	-webkit-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
	box-shadow:inset 0px 1px 0px 0px #7a8eb9;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3f495c), color-stop(1, #495670));
	background:-moz-linear-gradient(top, #3f495c 5%, #495670 100%);
	background:-webkit-linear-gradient(top, #3f495c 5%, #495670 100%);
	background:-o-linear-gradient(top, #3f495c 5%, #495670 100%);
	background:-ms-linear-gradient(top, #3f495c 5%, #495670 100%);
	background:linear-gradient(to bottom, #3f495c 5%, #495670 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f495c', endColorstr='#495670',GradientType=0);
	background-color:#3f495c;
	border:1px solid #314179;


	text-align:center;
	color:#FFFFFF;
	font-size:16px;
	font-weight:bold;
	padding-top:5px;
	padding-bottom:5px;	
}






.active_item{
	width: 94%;
	background-color: #5280b1;
	border: #666666 1px solid;
	color: #000;
	font-size: 12px;
	height: 10px;
	float: left;
	margin-left: 3%;
	margin-right: 3%;
	cursor: pointer;
	text-align: center;
}


.unactive_item{
	width: 94%;
	background-color: #FFFFFF;
	border: #B4B1B1 1px solid;
	color: #B4B1B1;
	font-size: 12px;
	height: 10px;
	float: left;
	margin-left: 3%;
	margin-right: 3%;
	cursor: pointer;
	text-align: center;	
}


.finished_item{
	width: 94%;
	background-color: #FFFFFF;
	border: #000000 1px solid;
	color: #000000;
	font-size: 12px;
	height: 10px;
	float: left;
	margin-left: 3%;
	margin-right: 3%;
	cursor: pointer;
	text-align: center;	
}

#small_screen_menu, #small_screen_menu_right{
	background:url(theme1_images/bg.png);	
	overflow:auto;
}

h4#account_top_info{
	color:#003366;	
}











	#block_footer{
		width:100%;
		height:21px;
		position:fixed;
		bottom:0px;
		left:0px;
	}

	#block_footer marquee{
		font-size:14px;
	}
	
	#block_top_div{
		width: 100%;
		height: 34px;
		background: #343434;
		margin-bottom: 15px;
		text-align: center;
		padding-top: 10px;
	}
	
	.icon_content{
		float: left;
		width: 25%;
		height:97px;
		/*border: 1px solid #033;*/
		text-align: center;
		font-size:11px;
		color:#000000;
		font-weight:bold;
	}
	
	.icon_content img{
		width: 74%;
		max-width: 60px;
	}
	
	
	.icon_content .name{
		padding-top:0px !important;	
		line-height: 11px !important;
	}
	
	#top_back_button{
		background: url(theme1_images/backbarbutton.png);
		height: 29px;
		width: 55px;
		position: absolute;
		top: 7px;
		left: 10px;
	}
	
	#top_back_icon{
		background: url(theme1_images/backicon.png);
		height: 23px;
		width: 43px;
		position: absolute;
		top: 10px;
		left: 18px;
	}
	
	
	.title{
		color:#000;	
		font-weight:bold;	
		font-size:16px;
	}
	
	.title img{
		width: 25px;
		margin-top: 5px;	
	}
	
	
	:root input[type="checkbox"].ios-switch_yes_no + div{
		background-image:linear-gradient(rgba(0,0,0,.1), transparent), linear-gradient(90deg, hsl(247, 31%, 48%) 50%, transparent 50%) !important;	
	}
	
	
	.button_type2{
		background: #e5e4e9 !important; /* Old browsers */
		background: -moz-linear-gradient(top,  #e5e4e9 0%, #e0e0e0 31%, #dfddde 49%, #dad8d9 51%, #dadad8 71%, #dfdbdc 100%) !important; /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e4e9), color-stop(31%,#e0e0e0), color-stop(49%,#dfddde), color-stop(51%,#dad8d9), color-stop(71%,#dadad8), color-stop(100%,#dfdbdc)) !important; /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #e5e4e9 0%,#e0e0e0 31%,#dfddde 49%,#dad8d9 51%,#dadad8 71%,#dfdbdc 100%) !important; /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #e5e4e9 0%,#e0e0e0 31%,#dfddde 49%,#dad8d9 51%,#dadad8 71%,#dfdbdc 100%) !important; /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #e5e4e9 0%,#e0e0e0 31%,#dfddde 49%,#dad8d9 51%,#dadad8 71%,#dfdbdc 100%) !important; /* IE10+ */
		background: linear-gradient(to bottom,  #e5e4e9 0%,#e0e0e0 31%,#dfddde 49%,#dad8d9 51%,#dadad8 71%,#dfdbdc 100%) !important; /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e4e9', endColorstr='#dfdbdc',GradientType=0 ) !important; /* IE6-9 */
		color:#333333 !important;
	}
	
	.color1{
		color:#000 !important;	
	}
	
	.size1{
		font-size:12px;	
	}
	
	.block_type_2{
			width: 92%;
		  margin-left: 2%;
		  border-radius: 0px;
		  border: #CCCCCC 1px solid;
		  padding: 5px;
		  margin-bottom: -1px;
		 /* background-color: #E6E6E6;*/
		  color: #5D5C5C;
		  cursor: pointer;
	}
	
	.block_type_2:hover{
		/*background-color:#B9B9B9;*/	
	}
	
	.free_label{
		font-size:14px;
		padding:5px;	
		margin-bottom:8px;
	}
	
	#map_button{
		color:#FFF !important;	
	}
	
	.top_button{
		background: url(theme1_images/top_button.png);
		height: 24px;
		width: 77px;
		position: absolute;
		top: 9px;
		right: 10px;
		border: 1px solid #D5D5D5;
	}
	
	#block_top_div > img, #small_logo{
		content:url("theme1_images/logo.png");
		height: 43px !important;
		margin-top: -12px !important;	
	}
	

	.btn_settings{
		background-color: #CE0000 !important;
		color:#FFF !important;
	}
	
	.checking_account{
		color:#FFF !important;
		background: #777777 !important;
		width: 267px !important;
		text-align: left !important;
		border-radius: 0px !important;
		padding-top: 9px !important;
		padding-left: 9px !important;
		padding-bottom: 0px !important;
	}
	
	#current_display{
		margin-top:5px;
		color:#000;	
	}
	
	.account_name, #username, #account_top_info{
		color:#5E5E5E !important;	
	}
	
	.block span#username, .block #account_top_info{
		color:#FFF !important;	
	}
	

	#content[view_mode=list_view] .block{
		margin-top:16px !important;	
	} 
	
	#content[view_mode=cards_view] .block{
		margin-top:16px !important;	
	} 
	
	#content[view_mode=icon_view] .block{
		margin-top:16px !important;	
	} 
	
	#search_area{
		margin-top: 38px;
	}
	
	#content #search_area{
		margin-top: 0px !important;
	}
	
	
	
	
	
	
	
	
	
	
	
		
	
	
	/*  CHECKBOX YES NO            START*/
	
	:root input[type="checkbox"].ios-switch_yes_no + div {
		display: inline-block;
		vertical-align: middle;
		width: 3em;	height: 1em;
		border: 1px solid rgba(0,0,0,.3);
		border-radius: 999px;
		margin: 0 .5em;
		background: white;
		background-image: linear-gradient(rgba(0,0,0,.1), transparent),
						  linear-gradient(90deg, hsl(92, 47%, 50%) 50%, transparent 50%);
		background-size: 200% 100%;
		background-position: 100% 0;
		background-origin: border-box;
		background-clip: border-box;
		overflow: hidden;
		transition-duration: .4s;
		transition-property: padding, width, background-position, text-indent;
		box-shadow: 0 .1em .1em rgba(0,0,0,.2) inset,
					0 .45em 0 .1em rgba(0,0,0,.05) inset;
		font-size: 150%; /* change this and see how they adjust! */
	}
	
	:root input[type="checkbox"].ios-switch_yes_no:checked + div {
		padding-left: 2em;	width: 1em;
		background-position: 0 0;
	}
	
	:root input[type="checkbox"].ios-switch_yes_no + div:before {
		content: 'Yes';
		float: left;
		width: 1.65em; height: 1.65em;
		margin: -.1em;
		border: 1px solid rgba(0,0,0,.35);
		border-radius: inherit;
		background: white;
		background-image: linear-gradient(rgba(0,0,0,.2), transparent);
		box-shadow: 0 .1em .1em .1em hsla(0,0%,100%,.8) inset,
					0 0 .5em rgba(0,0,0,.3);
		color: white;
		text-shadow: 0 -1px 1px rgba(0,0,0,.3);
		text-indent: -2.5em;
	}
	
	:root input[type="checkbox"].ios-switch_yes_no:active + div:before {
		background-color: #eee;
	}
	
	:root input[type="checkbox"].ios-switch_yes_no:focus + div {
		box-shadow: 0 .1em .1em rgba(0,0,0,.2) inset,
					0 .45em 0 .1em rgba(0,0,0,.05) inset,
					0 0 .4em 1px rgba(255,0,0,.5);
	}
	
	:root input[type="checkbox"].ios-switch_yes_no + div:before,
	:root input[type="checkbox"].ios-switch_yes_no + div:after {
		font: bold 60%/1.9 sans-serif;
		text-transform: uppercase;
	}
	
	:root input[type="checkbox"].ios-switch_yes_no + div:after {
		content: 'No';
		float: left;
		text-indent: .5em;
		color: rgba(0,0,0,.45);
		text-shadow: none;
	
	}
	
	:root input[type="checkbox"] { 
		position: absolute;
		opacity: 0;
		display:none;
	}
	
	
	
	/*  CHECKBOX YES NO            END */
	
	
	
	
	
	
	
	
	/*  CHECKBOX ON OFF            START*/
	
	:root input[type="checkbox"].ios-switch_on_off + div {
		display: inline-block;
		vertical-align: middle;
		width: 3em;	height: 1em;
		border: 1px solid rgba(0,0,0,.3);
		border-radius: 999px;
		margin: 0 .5em;
		background: white;
		background-image: linear-gradient(rgba(0,0,0,.1), transparent),
						  linear-gradient(90deg, hsl(92, 47%, 50%) 50%, transparent 50%);
		background-size: 200% 100%;
		background-position: 100% 0;
		background-origin: border-box;
		background-clip: border-box;
		overflow: hidden;
		transition-duration: .4s;
		transition-property: padding, width, background-position, text-indent;
		box-shadow: 0 .1em .1em rgba(0,0,0,.2) inset,
					0 .45em 0 .1em rgba(0,0,0,.05) inset;
		font-size: 150%; /* change this and see how they adjust! */
	}
	
	:root input[type="checkbox"].ios-switch_on_off:checked + div {
		padding-left: 2em;	width: 1em;
		background-position: 0 0;
	}
	
	:root input[type="checkbox"].ios-switch_on_off + div:before {
		content: 'On';
		float: left;
		width: 1.65em; height: 1.65em;
		margin: -.1em;
		border: 1px solid rgba(0,0,0,.35);
		border-radius: inherit;
		background: white;
		background-image: linear-gradient(rgba(0,0,0,.2), transparent);
		box-shadow: 0 .1em .1em .1em hsla(0,0%,100%,.8) inset,
					0 0 .5em rgba(0,0,0,.3);
		color: white;
		text-shadow: 0 -1px 1px rgba(0,0,0,.3);
		text-indent: -2.5em;
	}
	
	:root input[type="checkbox"].ios-switch_on_off:active + div:before {
		background-color: #eee;
	}
	
	:root input[type="checkbox"].ios-switch_on_off:focus + div {
		box-shadow: 0 .1em .1em rgba(0,0,0,.2) inset,
					0 .45em 0 .1em rgba(0,0,0,.05) inset,
					0 0 .4em 1px rgba(255,0,0,.5);
	}
	
	:root input[type="checkbox"].ios-switch_on_off + div:before,
	:root input[type="checkbox"].ios-switch_on_off + div:after {
		font: bold 60%/1.9 sans-serif;
		text-transform: uppercase;
	}
	
	:root input[type="checkbox"].ios-switch_on_off + div:after {
		content: 'Off';
		float: left;
		text-indent: .5em;
		color: rgba(0,0,0,.45);
		text-shadow: none;
	
	}
	
	:root input[type="checkbox"] { 
		position: absolute;
		opacity: 0;
		display:none;
	}
	
	
	
	/*  CHECKBOX ON OFF            END*/
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*  CHECKBOX text1 Text2            START*/
	
	:root input[type="checkbox"].ios-switch_text1_text2 + div {
		display: inline-block;
		vertical-align: middle;
		width: 3em;	height: 1em;
		border: 1px solid rgba(0,0,0,.3);
		border-radius: 999px;
		margin: 0 .5em;
		background: white;
		background-image: linear-gradient(rgba(0,0,0,.1), transparent),
						  linear-gradient(90deg, hsl(92, 47%, 50%) 50%, transparent 50%);
		background-size: 200% 100%;
		background-position: 100% 0;
		background-origin: border-box;
		background-clip: border-box;
		overflow: hidden;
		transition-duration: .4s;
		transition-property: padding, width, background-position, text-indent;
		box-shadow: 0 .1em .1em rgba(0,0,0,.2) inset,
					0 .45em 0 .1em rgba(0,0,0,.05) inset;
		font-size: 150%; /* change this and see how they adjust! */
	}
	
	:root input[type="checkbox"].ios-switch_text1_text2:checked + div {
		padding-left: 2em;	width: 1em;
		background-position: 0 0;
	}
	
	:root input[type="checkbox"].ios-switch_text1_text2 + div:before {
		content: 'AA';
		float: left;
		width: 1.65em; height: 1.65em;
		margin: -.1em;
		border: 1px solid rgba(0,0,0,.35);
		border-radius: inherit;
		background: white;
		background-image: linear-gradient(rgba(0,0,0,.2), transparent);
		box-shadow: 0 .1em .1em .1em hsla(0,0%,100%,.8) inset,
					0 0 .5em rgba(0,0,0,.3);
		color: white;
		text-shadow: 0 -1px 1px rgba(0,0,0,.3);
		text-indent: -2.5em;
	}
	
	:root input[type="checkbox"].ios-switch_text1_text2:active + div:before {
		background-color: #eee;
	}
	
	:root input[type="checkbox"].ios-switch_text1_text2:focus + div {
		box-shadow: 0 .1em .1em rgba(0,0,0,.2) inset,
					0 .45em 0 .1em rgba(0,0,0,.05) inset,
					0 0 .4em 1px rgba(255,0,0,.5);
	}
	
	:root input[type="checkbox"].ios-switch_text1_text2 + div:before,
	:root input[type="checkbox"].ios-switch_text1_text2 + div:after {
		font: bold 60%/1.9 sans-serif;
		text-transform: uppercase;
	}
	
	:root input[type="checkbox"].ios-switch_text1_text2 + div:after {
		content: 'BB';
		float: left;
		text-indent: .5em;
		color: rgba(0,0,0,.45);
		text-shadow: none;
	
	}
	
	:root input[type="checkbox"] { 
		position: absolute;
		opacity: 0;
		display:none;
	}