/* Styles for eTRAC - Epiphany Management Group*/
*,
*::before,
*::after {
  box-sizing: content-box;
}

html, body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background:url(../images/bkgd.jpg);
	background-repeat:repeat-x;
	background-position:top;
	background-color: #666;
	margin:0;
	text-align: center;
	color: #000000;
	font-size:100%;
	height:100% /* to push the footer to the bottom */
}
div.fadeMe {
  opacity:    0.5; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    101;
  top:        0; 
  left:       0; 
  position:   fixed; 
}
h1, h2, h3, h4 {
	font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
div.editable{
	[contenteditable:="true"]	
}
h1 {
	font-size:160%;
}
h2 {
	font-size:140%;
}
h3 {
	font-size:110%;
	padding:6px;
	margin:0;
	background-color:#DADFE9;
	border-top:1px solid #999;
	border-right:1px solid #999;
	border-left:1px solid #999;
	border-spacing:0px;
	border-collapse: collapse;
	background-image:url(../images/titleBk.gif);
	border-radius: 6px 6px 0 0;
	-moz-border-radius: 6px 6px 0 0;
}
h4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background:url(http://prs.newpointeducation.com/images/bkgd.jpg);
	background-repeat:repeat-x;
	background-position:top;
	background-color: #666;
	margin:0;
	text-align: center;
	color: #CCCCCC;
	font-size:140%;
	height:100% /* to push the footer to the bottom */
}
h6 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	/*background:url(http://etrac.epiphanymgmt.com/images/bkgd.jpg); */
	background-repeat:repeat-x;
	background-position:bottom;
	background-color: #DADADA;
	margin:5;
	text-align: bottom;
	color: #1B27AA;
	font-size:100%;
	font:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
	/* height:100% /* to push the footer to the bottom */
}
p, td {
	font-size:80%;
	box-sizing:inherit;
}
td.half {
	font-size:80%;
	box-sizing:inherit;
	width:50%;
}
th {
	font-size:80%;
}
form {
	margin:0;
	padding:0;
}
/*
input { 
	background-color:#F3F3F8;
	border-top:1px inset #666;

	}

select {
	background-color:#F9F9F9;
	border:1px solid #666;
	color:#666666;
	}
	 */

img {
	border:none;
}
a {
	text-decoration:none;
}
a:visited {
	color:#0000CC;
}
a:hover {
	text-decoration:underline;
	color:#C30;
	font-weight:bold;
}
hr {
	border: 0;
	color: #DBD3C2;
	background-color: #DBD3C2;
	height: 1px;
	width: 90%;
	text-align: center;
	margin:20px;
}
/* 	Structure */
#body {
	padding-bottom:64px; /* padding  64px for footer */
}
#navcontainer {
	height:20px;
	background-color:#DDD;
	margin:0;
	padding:0;
	/* border-left: 2px solid #00539F;	*/
	border-top: 1px solid #666;
	border-bottom: 1px solid #CCC;
	/* border-right: 2px solid #00539F;	 */	
	min-width:1000px;
}
#navcontainer UL {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}
#navcontainer UL2{
	display: block;
	margin: 0;
	padding:0;
	float: left;
 width: auto%;
}
#navcontainer li{
	display: block;
	margin: 0;
	padding:0;
	float: left;
 width: auto%;
}
#navcontainer li#subnav:hover ul#minisubnav{
	display:block;
	margin: 0;
	padding:0;
	float: left;
	width: auto%;
	position: absolute;
 	z-index:100;
	font-size:10px;
	background: #BBBBBB;
	height:20px;
	color:#000000;
	font-weight:normal;
}
ul#minisubnav {
    display: none;
	position:absolute;
	z-index:100;
}
#navcontainer lir {
	display: block;
	margin: 0;
	padding:0;
	float: right;
 width: auto%;
}
#navcontainer A#subnav {
	color: #444;
	height:16x;
	font-size:11px;
	display: block;
	width: auto;
	text-decoration: none;
	background: #DDD;
	margin: 0;
	padding: 3px 10px 0 10px;
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
	border-right: 2px solid #aaa;
	border-bottom: 1px solid #aaa;
}
#navcontainer A {
	color: #444;
	height:16px;
	font-size:11px;
	display: block;
	width: auto;
	text-decoration: none;
	background: #DDD;
	margin: 0;
	padding: 3px 10px 0 10px;
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
	border-right: 2px solid #aaa;
	border-bottom: 1px solid #aaa;
}
a.disabled {
	color: #666666;
	pointer-events: none;
    cursor: default;
	height:16px;
	font-size:11px;
	display: block;
	width: auto;
	text-decoration: none;
	background: #DDD;
	margin: 0;
	padding: 3px 10px 0 10px;
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
	border-right: 2px solid #aaa;
	border-bottom: 1px solid #aaa;
}
#navcontainer A:hover, #navcontainer A:active {
	background: #BBBBBB;
	color:#000000;
	font-weight:normal;
}
#navcontainer A.active:link, #navcontainer A.active:visited {
	position: relative;
	z-index: 102;
	background: #BBBBBB;
	font-weight: bold;
}
#subnav {
	position: relative;
	top: -1px;
	z-index: 101;
	margin: 0;
	padding: 0px 0 3px 0;
	background: #BBBBBB;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #aaa;
}
#subnav UL {
	list-style: none;
	margin: 1px 0 0px 13px;
	padding: 0px;
	border-right: 1px solid #fff;
	border-left: 1px solid #aaa;
}
#subnav LI {
	position: relative;
	z-index: 102;
	display: block;
	margin: 0;
	padding: 0;
	float: left;
	width: auto;
}
#subnav LIR {
	position: relative;
	z-index: 102;
	display: block;
	margin: 0;
	padding: 0;
	float: left;
	width: auto;
}
#subnav A {
	color: #fff;
	display: block;
	width: auto;
	text-decoration: none;
	margin: 0;
	padding: 2px 12px 2px 10px;
}
#subnav A:hover, .subnav A:active {
	color: #444;
}
#subnav A.active:link, .subnav A.active:visited {
	color: #444;
}
#subnav BR, .navcontainer BR {
	clear: both;
}
#container {
	min-height:100%;
	position:relative;
	text-align: left;
}
#header {
	background-color: #6B7CA8;
    background-color: #FFF;
	padding: 0;
	margin:0;
}
#mainContent {
	padding: 24px 20px 88px 24px;
}
#footer {
	border-top: 1px solid #ccc;
	clear: both;
/*	background-color: #6B7CA8; */
	background-color:rgba(129,213,224,1.00);
	width: 100%;
	height: 63px;
	position: absolute;
	bottom: 0px;
	left: 0px;
}
#footer p {
	margin: 0;
	padding: 20px 24px 0 0px;
	color:rgba(62,62,62,1.00);
	font-size:70%;
	text-align:right;
}
#footer p a {
	color:rgba(62,62,62,1.00);
	text-decoration:underline;
}
#footer p a:hover {
	font-weight:normal;
}
/* Tables */

table a {
	display: block;
	width: 100%;
}
.tableDetails1 {
	margin-left:auto;
	margin-right:auto;
	border:none;
}
.tableDetails1 td {
	padding: 0px 20px;
}
.sortable {
	border-width: 1px;
	border-spacing:0px;
	border-style: solid;
	border-color: #999;
	border-collapse: collapse;
	background-color:#FFFFFF;
	width:100%;
	font-size: 80%;
	table-layout:auto;
}
.sortable th {
	border-width: 1px;
	border-style: solid;
	border-color: #999;
	padding: 5px;
	background-color: #F2EFE9;
	text-align:center;
	color:#333;
}
.sortable td2 {
	border-style: none;
	padding: 5px;
	background-color: #F2EFE9;
	text-align:center;
	color:#333;
}
.sortable td {
	border-width: 1px;
	border-style: solid;
	border-color: #999;
	padding: 5px;
	text-align:center;
	color:#333;
	word-wrap:break-word;
}
.sortable input[type="text"] {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
}

/* Sortable tables */
table.sortable thead {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    cursor: default;
}

.sortable2 {
	border-width: 1px;
	border-spacing:0px;
	border-style: solid;
	border-color: #999;
	border-collapse: collapse;
	background-color:#FFFFFF;
	table-layout:fixed;
	width:100%;
	font-size: 80%;
}
.sortable2 th {
	border-width: 1px;
	border-style: solid;
	border-color: #999;
	padding: 5px;
	background-color: #F2EFE9;
	text-align:center;
	color:#333;
	width:auto;
}
.sortable2 td {
	border-width: 1px;
	border-style: solid;
	border-color: #999;
	padding: 5px;
	text-align:center;
	color:#333;
	word-wrap:break-word;
}
.table2 {
	border-width: 1px;
	border-spacing:0px;
	border-style: solid;
	border-color: #CCC;
	border-collapse: collapse;
	border-top:none;
	background-color: #F8F8F8;
	border-bottom-width:medium;
	text-align:center;
	border-bottom-color:#03C;
}
.table2 th {
	border-width: 1px;
	padding: 5px 10px;
	border-style: solid;
	border-color: #CCC;
	border-top:none;
	background-color: #EFEFEF;
	text-align:center;
	color:#333;
}

.table2 tr.row1:nth-child(even){
	background-color: #F8F8F8;
}
.table2 tr.row1:nth-child(odd){
	background-color: #C6C6C6;
}
.table2 tr.row2:nth-child(even){
	background-color: #C6C6C6;
}
.table2 tr.row2:nth-child(odd){
	background-color: #F8F8F8;
}
.table2 td {
	border-width: 1px;
	padding: 5px 10px;
	border-style: solid;
	border-color: #3F3F3F;

	color:#333;
}

.table2 td.row1{
	text-align:center;
	border-top-width:medium;
	border-top-color:#03C;
}
.table2 td.row2{
	border-bottom-width:medium;
	text-align:center;
	border-bottom-color:#03C;
}
.tableHome {
	width:100%;
	border-width: 1px;
	border-spacing:0px;
	border-style: solid;
	border-color: #999;
	border-collapse: collapse;
	background-color:#FFFFFF;
	margin:0 auto;
}
.tableHome th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #999;
	background-color: #F2EFE9;
	text-align:left;
	color:#333;
}
.tableHome td {
	border-width: 1px;
	padding: 0px;
	border-style: solid;
	border-color: #999;
	text-align:left;
	color:#333;
}
.tableHome a {
	display: block;
	width: 100%;
}
.tableHome a:hover {
	background-color:#336699;
}
.tableDetails {
	width:90%;
	border-collapse: collapse;
}
.tableDetails th {
	padding: 4px;
	border: 4px solid #F2EFE9; /* 'cellspacing' */
	text-align:right;
	color:#333;
	font-weight:bold;
	width:134px;
}
.tableDetails td {
	padding: 4px;
	border: 4px solid #F2EFE9; /* 'cellspacing' */
	margin: 6px;
	text-align:left;
	color:#333;
	background-color:#FFFFFF;
}
.tableDetails pre {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size:100%;
	maring:0px;
	padding:0px;
}
.tableSearch {
	border-collapse: collapse;
}
.tableSearch th {
	padding: 8px 0px;
	/* border: 4px solid #F2EFE9;*/ /* 'cellspacing' */
	text-align:right;
	color:#333;
	font-weight:bold;
	width:160px;
}
.tableSearch td {
	padding: 8px 5px;
	/* border: 4px solid #F2EFE9;*/ /* 'cellspacing' */
	margin: 6px;
	text-align:left;
	color:#333;
}
.tableSearch select {
	width:146px;
}
.tableNav ul {
	list-style:none;
	margin: 0;
	padding: 0;
	border: none;
}
.tableNav li {
	display:block;
	margin:0;
	padding:0;
	width: auto;
}
.tableNav a {
	color: #444;
	display: block;
	width: auto;
	text-decoration: none;
	background: #FFF;
	margin: 0;
	padding: 8px 20px;
	border-top:1px solid #fff;
	border-bottom:1px dashed #eee;
	border-collapse: collapse;
}
.tableNav a:hover, #tableNav a:active {
	background: #EFEFEF;
	color:#C30;
	font-weight:bold;
	border-top:1px solid #AAA;
	border-bottom:1px solid #AAA;
	border-collapse: collapse;
}
.tableNav a.active:link, #tableNav a.active:visited {
	position: relative;
	z-index: 102;
	background: #EFEFEF;
	font-weight: bold;
}
td.tdNone {
	border: none;
}
td.green {
	background-color:#F9FFF9
}
td.red {
	background-color:#FFF4F5
}
.closer {
	background-image:url(../images/titleBk1.gif);
}
/* Pagination table footer */	
.pagination {
	width:100%;
	border-width: 1px;
	border-spacing:0px;
	border-style: solid;
	border-top:none;
	border-color: #999;
	background-color:#FFFFFF;
	background-image:url(../images/titleBk1.gif);
	margin:0 auto;
	border-radius: 0 0 6px 6px;
	-moz-border-radius:0 0 6px 6px;
}
.pagination td {
	padding: 3px 10px;
	text-align:left;
	color:#666;
	font-size:68%;
}
.pagination1 {
	background-image:url(../images/titleBk1.gif);
	margin:0;
	padding:0;
	border-radius: 0 0 8px 8px;
	-moz-border-radius:0 0 8px 8px;
}
.pagination1 td {
	border-style:none;
	padding: 0 10px;
	text-align:left;
	color:#666;
	font-size:68%;
}
/* FORMS */
fieldset {
	margin:0 auto; /* Center the fieldset on the page */
	margin-top:10px;
	margin-bottom:10px;
	padding: 1em;
	font:100%/1 arial;
	border: 1px solid #666;
	border-radius: 6px;
	-moz-border-radius: 6px;
	box-shadow: 5px 5px 6px #333;
	width: fit-content;
	clear: both;
	background-color: #F2EFE9;
}

fieldset.overview {
	margin:0 auto; /* Center the fieldset on the page */
	margin-top:10px;
	margin-bottom:10px;
	padding: 1em;
	font:100%/1 arial;
	border: 1px solid #666;
	border-radius: 6px;
	-moz-border-radius: 6px;
	box-shadow: 5px 5px 6px #333;
	width: auto;
	clear: both;
	background-color: #F2EFE9;
}

fieldset.overviewRight {
	margin:0 auto; /* Center the fieldset on the page */
	margin-top:10px;
	margin-bottom:10px;
	padding: 1em;
	font:100%/1 arial;
	border: 1px solid #666;
	border-radius: 6px;
	-moz-border-radius: 6px;
	box-shadow: 5px 5px 6px #333;
/*	width: 1325px; */
	clear: both;
	background-color: #F2EFE9;
}

fieldset.content  {
	margin:0 auto; /* Center the fieldset on the page */
	margin-top:10px;
	margin-bottom:10px;
	padding: 1em;
	font:100%/1 arial;
	border: 1px solid #666;
	border-radius: 6px;
	-moz-border-radius: 6px;
	box-shadow: 5px 5px 6px #333;
	width:fit-content;
	clear: both;
	background-color: #F2EFE9;
}
callcenter fieldset{
	margin:0 auto; /* Center the fieldset on the page */
	margin-top:10px;
	margin-bottom:10px;
	padding: 1em;
	font:100%/1 arial;
	border: 1px solid #666;
	border-radius: 6px;
	-moz-border-radius: 6px;
	box-shadow: 5px 5px 6px #333;
	width:10%;
	clear: both;
	background-color: #E11E21;
}
.FloatLeft { 
	margin:0 auto; /* Center the fieldset on the page */
	margin-top:10px;
	margin-bottom:10px;
	padding: 1em;
	float:left;
	font:100%/1 arial;
	border: 1px solid #666;
	border-radius: 6px;
	-moz-border-radius: 6px;
	box-shadow: 5px 5px 6px #333;
/*	width:444px; */
	clear: both;
	background-color: #F2EFE9;
}
legend {
	width:auto;
	padding: 0.4em 1.4em;
	border:1px solid #666;
	border-radius: 4px;
	-moz-border-radius: 4px;
	box-shadow: 1px 1px 6px #666;
	color:#333;
	font-size:110%;
	text-align:left;
	background: #FFF;
	background-image:url(../images/titleBk.gif);
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
label {
	float:left;
	width:32%;
	margin-right:0.5em;
	margin-left:0.5em;
	padding-top:0.2em;
	text-align:left;
	font-weight:bold;
	display: block;
	font-size:100%;
}
label faq{
	float:left;
	margin-right:0.5em;
	margin-left:0.5em;
	padding-top:0.2em;
	text-align:left;
	font-weight:bold;
	display: block;
	font-size:100%;
}
.submit {
	padding:0;
	margin:0;
}
.submit input {
	margin-left: 45%;
}
.Ok-Button{
	padding:0;
	margin:0;
	/*margin-left: 11.0em;*/
	margin-left:45%;
}
/* Custom classes */	
.tiny {
	font-size:10px;
	color:#666;
}
.note_entry * {
	vertical-align:middle;
	display:inline-block;
	width:100%;	
}

a.tooltip span {
    font-size: 10px;
    position:absolute;
    z-index: 999;
    white-space:nowrap;
    bottom:9999px;
    left: 50%;
    background:#000;
    color:#e0e0e0;
    padding:0px 7px;
    line-height: 24px;
    height: 24px;
     
    opacity: 0; 
    transition:opacity 0.4s ease-out; 
    }       
     
a.tooltip span::before {
    content: "";
    display: block;
    border-left: 6px solid #000000;
    border-top: 6px solid transparent;
    position: absolute;
    top: -6px;
    left: 0px;
    }
     
a.tooltip:hover span {
    opacity: 1;
    bottom:-35px;
}

label.tooltip span {
    font-size: 10px;
    position:absolute;
    z-index: 999;
    white-space:nowrap;
    bottom:9999px;
    left: 50%;
    background:#000;
    color:#e0e0e0;
    padding:0px 7px;
    line-height: 24px;
    height: 24px;
     
    opacity: 0; 
    transition:opacity 0.4s ease-out; 
    }       
     
label.tooltip span::before {
    content: "";
    display: block;
    border-left: 6px solid #000000;
    border-top: 6px solid transparent;
    position: absolute;
    top: -6px;
    left: 0px;
    }
     
label.tooltip:hover span {
    opacity: 1;
    bottom:-35px;
}

h5 {
	text-align:left;
	width:100%;
	text-decoration:underline;
}
#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}
.tt-hint,
.agency_name {
	border: 2px solid #CCCCCC;
	border-radius: 8px 8px 8px 8px;
/*	height: 32%; */
/*	line-height: 30px;  */
	outline: medium none;
	padding: 8px 12px;
	width:75%;
/*	width: 200px;  */
	float:left;
	margin-right:0.5em;
	padding-top:0.2em;
	padding-bottom:1.5em;
	text-align:left;
	font-weight:bold;
	display: block;
	font-size:100%;
}

.tt-dropdown-menu {
/*	width: 50px; */
	width:75%;
	margin-top: 5px;
	padding: 8px 12px;
	background-color: #fff;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 8px 8px 8px 8px;
	font-size: 110%;  
	color: #111;
}
div.tt {
	float:left;
	width:32%;
	margin-right:0.5em;
	margin-left:0.5em;
	padding-top:0.2em;
	text-align:left;
	font-weight:bold;
	display: block;
	font-size:100%;
}
.filter-table .quick { margin-left: 0.5em; font-size: 0.8em; text-decoration: none; }
.fitler-table .quick:hover { text-decoration: underline; }
td.alt {
	background-color: #ffc;
	background-color: rgba(255, 255, 0, 0.2);
}
#time-range p {
    font-family:"Arial", sans-serif;
    font-size:14px;
    color:#333;
}
.ui-slider-horizontal {
    height: 8px;
    background: #D7D7D7;
    border: 1px solid #BABABA;
    box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset;
    clear: both;
    margin: 8px 0;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}
.ui-slider {
    position: relative;
    text-align: left;
}
.ui-slider-horizontal .ui-slider-range {
    top: -1px;
    height: 100%;
	background: #81B8F3;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    height: 8px;
    font-size: .7em;
    display: block;
    border: 1px solid #5BA8E1;
    box-shadow: 0 1px 0 #AAD6F6 inset;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    background: #81B8F3;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #A0D4F5), color-stop(100%, #81B8F3));
    background-image: -webkit-linear-gradient(top, #A0D4F5, #81B8F3);
    background-image: -moz-linear-gradient(top, #A0D4F5, #81B8F3);
    background-image: -o-linear-gradient(top, #A0D4F5, #81B8F3);
    background-image: linear-gradient(top, #A0D4F5, #81B8F3);
}
.ui-slider .ui-slider-handle {
    border-radius: 50%;
    background: #F9FBFA;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #C7CED6), color-stop(100%, #F9FBFA));
    background-image: -webkit-linear-gradient(top, #C7CED6, #F9FBFA);
    background-image: -moz-linear-gradient(top, #C7CED6, #F9FBFA);
    background-image: -o-linear-gradient(top, #C7CED6, #F9FBFA);
    background-image: linear-gradient(top, #C7CED6, #F9FBFA);
    width: 22px;
    height: 22px;
    -webkit-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
    -moz-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
    box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
    -webkit-transition: box-shadow .3s;
    -moz-transition: box-shadow .3s;
    -o-transition: box-shadow .3s;
    transition: box-shadow .3s;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 22px;
    height: 22px;
    cursor: default;
    border: none;
    cursor: pointer;
}
.ui-slider .ui-slider-handle:after {
    content:"";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    top: 50%;
    margin-top: -4px;
    left: 50%;
    margin-left: -4px;
    background: #30A2D2;
    -webkit-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF;
    -moz-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 white;
    box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.5em;
    margin-left: -.6em;
}
.ui-slider a:focus {
    outline:none;
}

.ui-widget-overlay.modal-opened{
  background: rgb(0, 0, 0);
  opacity: 0.5;
  filter: Alpha(Opacity=50);         
}


#slider-range {
  width: 90%;
  margin: 0 auto;
}
#time-range {
  width: 400px;
}