@charset "utf-8";
/* CSS Document */

.page-wrap {
  max-width: 75rem;
  margin: 0 auto;
}


/* input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
 font-size: 12px;
 color:#0095da;
 top: -2.25rem;
 -webkit-transition: all 0.125s ease;
 transition: all 0.125s ease;
 padding-top:12px;
} */
/* add css 16 june */
input:focus ~ label, textarea:focus ~ label{
 font-size: 12px;
 color:#0095da;
 top: -1.25rem;
 -webkit-transition: all 0.125s ease;
 transition: all 0.125s ease;
}

 input:valid ~ label, textarea:valid ~ label{
font-size: 12px;
 color:#0095da;
 }

label span, .required{
color:red;
font-weight:bold;
}

.styled-input {
/*   float: left; */
  width: 100%;
  margin: 2rem 0 1rem;
  position: relative;
/* border-bottom: 1px solid #0095da;*/
}

.styled-input input, textarea, select { 
	border-bottom: 1px solid #0095da !important;
 }

/* .styled-input label {
  color: #626262;
  font-size:14px;
 padding: 0rem; 
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  pointer-events: none;
  
} */


.styled-input label {
  color: #626262 !important;
  font-size:14px;
  margin-top:-14px; /*9 june*/
 /*  padding: 1rem; */
  position: absolute;
  top: 0;
  left: 0;
  
  
}
.styled-input.wide { width: 100%; }

.input,
textarea {
  /* padding: 1rem 1rem; */
  border: 0;
  width: 100%;
  font-size: 1rem;
  
  
}

.input ~ span,
textarea ~ span {
  display: block;
  /*width: 0;*/
  height: 3px;
  /* background: #0095da; */
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.125s ease;
  transition: all 0.125s ease;
 
}

.input:focus,
textarea:focus { outline: 0;}

input:focus ~ span,
textarea:focus ~ span {
  width: 100%;

  -webkit-transition: all 0.075s ease;
  transition: all 0.075s ease;
}

textarea {
  width: 100%;
  /* min-height: 2em; */

  
}

#css-script-menu {
position: fixed;
height: 90px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #16a1e7;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
padding: 10px 0;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}

.checkbox{
/* margin-top:46px; */

}

/* Write your CSS code below */
.checkbox {
  /* padding-left: 20px;  */}
.checkbox label {
  top:0px !important;
  display: inline-block;
  vertical-align: middle;
  position: relative;
    padding-left: 5px;
color:#626262 !important;
	}
.checkbox label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  margin-left: -20px;
  border: 1px solid #0095da;
  border-radius: 3px;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
.checkbox label::after {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
 /*  top: 8px; */ 
 top: -4px; /* add 16 june*/
  margin-left: -20px;
  padding-left: 3px;
  padding-top: 1px;
  font-size: 11px;
   color: #0095da;
   

	  }
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
  opacity: 0;
    z-index: 1; }
.checkbox input[type="checkbox"]:focus + label::before,
.checkbox input[type="radio"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px; }
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
  font-family: "FontAwesome";
  content: "\f00c";
  color:#FFFFFF;
 }
.checkbox input[type="checkbox"]:indeterminate + label::after,
.checkbox input[type="radio"]:indeterminate + label::after {
  display: block;
  content: "";
  width: 10px;
  height: 3px;
  background-color: #0095da;
  border-radius: 2px;
  margin-left: -16.5px;
  /* margin-top: 7px; */
}
.checkbox input[type="checkbox"]:disabled + label,
.checkbox input[type="radio"]:disabled + label {
      opacity: 0.65;
	  }
.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="radio"]:disabled + label::before {
  background-color: #0095da;
        cursor: not-allowed; }
.checkbox.checkbox-circle label::before {
    border-radius: 50%; }
.checkbox.checkbox-inline {
   /*  margin-top: 46px;  */}
.checkbox input[type="checkbox"]:checked + label::before,
.checkbox input[type="radio"]:checked + label::before {
  background-color: #0095da;
  border-color: #0095da;
  
  }
.checkbox-success input[type="checkbox"]:checked + label::after,
.checkbox-success input[type="radio"]:checked + label::after {
  color: #fff;}
.radio {
  padding-left: 20px; }
.radio label {
 top:0px !important;
  display: inline-block;
  vertical-align: middle;
  position: relative;
    padding-left: 5px;
color:#626262 !important;

	}
.radio label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  margin-left: -20px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out;
      transition: border 0.15s ease-in-out; }
.radio label::after {
  display: inline-block;
  position: absolute;
  content: " ";
  width: 11px;
  height: 11px;
  left: 3px;
  /* top: 15px; */
   top: 3px; /*16 june*/
  margin-left: -20px;
  border-radius: 50%;
  background-color: #0095da;
  -webkit-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
.radio input[type="radio"] {
  opacity: 0;
    z-index: 1; }
.radio input[type="radio"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px; }
.radio input[type="radio"]:checked + label::after {
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
      transform: scale(1, 1); }
.radio input[type="radio"]:disabled + label {
      opacity: 0.65; }
.radio input[type="radio"]:disabled + label::before {
        cursor: not-allowed; }
.radio.radio-inline {
    margin-top: 0px; }



.radio-info input[type="radio"] + label::after {
  background-color: #0095da; }
.radio-info input[type="radio"]:checked + label::before {
  border-color: #0095da; }
.radio-info input[type="radio"]:checked + label::after {
  background-color:#0095da; }



input[type="checkbox"].styled:checked + label:after,
input[type="radio"].styled:checked + label:after {
  font-family: 'FontAwesome';
  content: "\f00c"; }
input[type="checkbox"] .styled:checked + label::before,
input[type="radio"] .styled:checked + label::before {
  color: #fff; }
input[type="checkbox"] .styled:checked + label::after,
input[type="radio"] .styled:checked + label::after {
  color: #fff; }


.icon-addon {
    position: relative;
    color: #0095da;
    display: block;
}
.icon-addon .fa {
    position: absolute;
    z-index: 2;
    left: 0px;
    font-size: 14px;
    width: 20px;
    margin-left: -2.5px;
    text-align: center;
    padding: 10px 0;
    top: -4px;
	color:#0095da;
}
.text{
padding-left:25px;

}


.autocomplete-suggestions { border: 1px solid #0095da; background: #fff; cursor: default; overflow: auto; color:#626262;}
.autocomplete-suggestion { padding: 10px 5px; font-size: 1.2em; white-space: nowrap; overflow: hidden; color:#626262 }
.autocomplete-selected { background: #0095da; color:#ffffff; }
.autocomplete-suggestions strong { font-weight: normal; }

#searchfield { display: block; width: 100%; text-align: left; margin-left:25px; color:#626262}

.styled-option {
/*   float: left; */
  width: 100%;
 margin-top:6%;
  /* position: relative;
  border-bottom: 1px solid #0095da; */
}
.btn-input {border: 2px solid #0095da; color: #ffffff; background-color: #0095da;  border-radius: 5px;}


div.browse-wrap {
/*width:150px;*/
        top:0;
        left:0;
      /*margin:20px;  */
        cursor:pointer;
        overflow:hidden;
        padding:2px 0px;
        text-align:left;
        position:relative;
        /* background-color:#f6f7f8;
        border:solid 1px #d2d2d7; */
		}
    div.title {
        color:#626262;
        font-size:14px;
        font-style: italic;
         }
		 div.browse-wrap:hover {
		 background-color:#f6f7f8;
		 opacity:0.6;
         color:#626262;
        font-size:14px;
        font-style: italic;
         }
    input.upload {
        right:0;
        margin:0;
        bottom:0;
        padding:0;
        /*opacity:0;
        height:300px;*/
        outline:none;
        cursor:inherit;
        position:absolute;
        font-size:1000px !important;}
    span.upload-path {
        text-align: center;
        /* margin:20px;  */
        display:block;
        font-size: 80%;
        color:#3b5998;
        font-weight:bold;
        font-family:tahoma, arial, sans-serif;
		 float:right;
	    width: 200px;
		margin-top:-44px;
}

.input-button-form {
    width: 137px !important;
	margin:4px 8px;
	padding:8px 2px;
}

/*Date picker start from here*/
div.datepicker {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 196px;
	height: 147px;
	position: absolute;
	cursor: default;
	top: 0;
	left: 0;
	display: none;
}
.datepickerContainer {
	background: #121212;
	position: absolute;
	top: 10px;
	left: 10px;
}
.datepickerBorderT {
	position: absolute;
	left: 10px;
	top: 0;
	right: 10px;
	height: 10px;
	background: url(../img/datepicker_t.png);
}
.datepickerBorderB {
	position: absolute;
	left: 10px;
	bottom: 0;
	right: 10px;
	height: 10px;
	background: url(../img/datepicker_b.png);
}
.datepickerBorderL {
	position: absolute;
	left: 0;
	bottom: 10px;
	top: 10px;
	width: 10px;
	background: url(../img/datepicker_l.png);
}
.datepickerBorderR {
	position: absolute;
	right: 0;
	bottom: 10px;
	top: 10px;
	width: 10px;
	background: url(../img/datepicker_r.png);
}
.datepickerBorderTL {
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background: url(../img/datepicker_tl.png);
}
.datepickerBorderTR {
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background: url(../img/datepicker_tr.png);
}
.datepickerBorderBL {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background: url(../img/datepicker_bl.png);
}
.datepickerBorderBR {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background: url(../img/datepicker_br.png);
}
.datepickerHidden {
	display: none;
}
div.datepicker table {
	border-collapse:collapse;
}
div.datepicker a {
	color: #eee;
	text-decoration: none;
	cursor: default;
	outline: none;
}
div.datepicker table td {
	text-align: right;
	padding: 0;
	margin: 0;
}
div.datepicker th {
	text-align: center;
	color: #999;
	font-weight: normal;
}
div.datepicker tbody th {
	text-align: left;
}
div.datepicker tbody a {
	display: block;
}
.datepickerDays a {
	width: 20px;
	line-height: 16px;
	height: 16px;
	padding-right: 2px;
}
.datepickerYears a,
.datepickerMonths a{
	width: 44px;
	line-height: 36px;
	height: 36px;
	text-align: center;
}
td.datepickerNotInMonth a {
	color: #666;
}
tbody.datepickerDays td.datepickerSelected{
	background: #136A9F;
}
tbody.datepickerDays td.datepickerNotInMonth.datepickerSelected {
	background: #17384d;
}
tbody.datepickerYears td.datepickerSelected,
tbody.datepickerMonths td.datepickerSelected{
	background: #17384d;
}
div.datepicker a:hover,
div.datepicker a:hover {
	color: #88c5eb;
}
div.datepicker td.datepickerNotInMonth a:hover {
	color: #999;
}
div.datepicker tbody th {
	text-align: left;
}
.datepickerSpace div {
	width: 20px;
}
.datepickerGoNext a,
.datepickerGoPrev a,
.datepickerMonth a {
	text-align: center;
	height: 20px;
	line-height: 20px;
}
.datepickerGoNext a {
	float: right;
	width: 20px;
}
.datepickerGoPrev a {
	float: left;
	width: 20px;
}
table.datepickerViewDays tbody.datepickerMonths,
table.datepickerViewDays tbody.datepickerYears {
	display: none;
}
table.datepickerViewMonths tbody.datepickerDays,
table.datepickerViewMonths tbody.datepickerYears,
table.datepickerViewMonths tr.datepickerDoW {
	display: none;
}
table.datepickerViewYears tbody.datepickerDays,
table.datepickerViewYears tbody.datepickerMonths,
table.datepickerViewYears tr.datepickerDoW {
	display: none;
}
td.datepickerDisabled a,
td.datepickerDisabled.datepickerNotInMonth a{
	color: #333;
}
td.datepickerDisabled a:hover {
	color: #333;
}
td.datepickerSpecial a {
	background: #700;
}
td.datepickerSpecial.datepickerSelected a {
	background: #a00;
}
.wrapper {
	width: 700px;
	margin: 0 auto;
	text-align: left;
}
h1 {
	font-size: 21px;
	/*height: 47px;*/ /* commented by balu - causing rsvp banner in mobile view */
	line-height: 47px;
	text-transform: uppercase;
}
.navigationTabs {
	height: 23px;
	line-height: 23px;
	border-bottom: 1px solid #ccc;
}
.navigationTabs li {
	float: left;
	height: 23px;
	line-height: 23px;
	padding-right: 3px;
}
.navigationTabs li a{
	float: left;
	dispaly: block;
	height: 23px;
	line-height: 23px;
	padding: 0 10px;
	overflow: hidden;
	color: #52697E;
	background-color: #eee;
	position: relative;
	text-decoration: none;
}
.navigationTabs li a:hover {
	background-color: #f0f0f0;
}
.navigationTabs li a.active {
	background-color: #fff;
	border: 1px solid #ccc;
	border-bottom: 0px solid;
}
.tabsContent {
	border: 1px solid #ccc;
	border-top: 0px solid;
	width: 698px;
	overflow: hidden;
}
.tab {
	padding: 16px;
	display: none;
}
.tab h2 {
	font-weight: bold;
	font-size: 16px;
}
.tab h3 {
	font-weight: bold;
	font-size: 14px;
	margin-top: 20px;
}
.tab p {
	margin-top: 16px;
	clear: both;
}
.tab ul {
	margin-top: 16px;
	list-style: disc;
}
.tab li {
	margin: 10px 0 0 35px;
}
.tab a {
	color: #8FB0CF;
}
.tab strong {
	font-weight: bold;
}
.tab pre {
	font-size: 11px;
	margin-top: 20px;
	width: 668px;
	overflow: auto;
	clear: both;
}
.tab table {
	width: 100%;
}
.tab table td {
	padding: 6px 10px 6px 0;
	vertical-align: top;
}
.tab dt {
	margin-top: 16px;
}

#colorSelector {
	position: relative;
	width: 36px;
	height: 36px;
	background: url(../img/select.png);
}
#colorSelector div {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 30px;
	height: 30px;
	background: url(../img/select.png) center;
}

#colorpickerHolder2 {
	top: 32px;
	left: 0;
	width: 356px;
	height: 0;
	overflow: hidden;
	position: absolute;
}
#colorpickerHolder2 .colorpicker {
	background-image: url(../img/custom_background.png);
	position: absolute;
	bottom: 0;
	left: 0;
}

#colorpickerHolder2 .colorpicker input {
	color: #778398;
}
#customWidget {
	position: relative;
	height: 36px;
}

input.inputDate {
	border: 1px solid #999;
	padding: 4px;
	border-bottom-color: #ddd;
	border-right-color: #ddd;
	width: 65px;
}
#widget {
	position: relative;
}
#widgetField {
	width: 360px;
	height: 26px;
	/* background: url(../img/field.png); */
	overflow: hidden;
	position: relative;
}
#widgetField a 	{
	display: block;
	position: absolute;
	width: 26px;
	height: 26px;
	top: 0;
	right: 0px;
	text-decoration: none;
	/* text-indent: -3000px; */
}
#widgetField span	{
	font-size: 12px;
	font-weight: bold;
	color: #000;
	/* position: absolute; */
	top: 0;
	height: 26px;
	line-height: 26px;
	left: 5px;
	width: 250px;
	text-align: center;
}
#widgetCalendar {
	position: absolute;
	top: 26px;
	left: 0;
	height: 0px;
	overflow: hidden;
	width: 588px;
	background: #B9B9B9;
	z-index:9999;
}
#widgetField  .fa{
    color: #0095da;
}
#widgetCalendar .datepicker {
	position: absolute;
	bottom: 0;
	top: auto;
}
#widgetCalendar .datepickerContainer,
#widgetCalendar .datepickerBorderT,
#widgetCalendar .datepickerBorderB,
#widgetCalendar .datepickerBorderL,
#widgetCalendar .datepickerBorderR,
#widgetCalendar .datepickerBorderTL,
#widgetCalendar .datepickerBorderTR,
#widgetCalendar .datepickerBorderBL,
#widgetCalendar .datepickerBorderBR {
	background: transparent !important;
}
#widgetCalendar .datepicker a:hover{
	color: #b6f063;
}
/*Date picker start end here*/
.error { color:#F00; }