@charset "utf-8";
/* presentation */

.cool-forms-form { border: 1px solid #ccc; /* background-color: #f1f9c2; */ }
.cool-forms-article-wrapper { margin: 30px 0px; border-radius: 10px; }

.cool-form .cool-form-header { margin-bottom: 15px; margin-top: -10px;}

/* unsetting the 'margin-top:0px' for single elements */
.cool-form .cool-form-header h1.cool-form-formtitle { margin-top: 20px; }


.cool-form .cool-form-info { margin-bottom: 15px; }

.cool-form-global-msg-text { display:block; clear: both; }
.cool-form-submit-ajax-msg-area { display: none; margin-bottom: 0px !important; }

.cool-spinner-image-wrapper {
	margin-right: 10px;
	margin-top: -2px;
	display:block;
	float:left;
}

.cool-spinner {
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
	animation: spin 2s linear infinite;
	height: 25px;
	width: 25px;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.cool-form {
	padding: 15px;	
    background: rgb(255, 255, 255) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(255, 255, 255, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF, endColorstr=#99FFFFFF);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF, endColorstr=#99FFFFFF)";
}
@media (min-width: 544px ) { .cool-form { padding: 15px 2rem; } }
@media (min-width: 768px ) { .cool-form { padding: 15px 3rem; } }

/* .field-long-block { position: relative; width: 100%; display: block; }
.field-long-description { display:none; position: absolute; bottom: 28px; right: -5px; padding: 5px 10px; background-color: #f0f0f0; color: #737373; z-index: 100; border: 1px solid #ccc; border-radius: 4px; };
*/

.help-block { color: #900; display: none;  }

.cool-form .size-10  { width: 10% !important; }
.cool-form .size-20  { width: 20% !important; }
.cool-form .size-30  { width: 30% !important; }
.cool-form .size-40  { width: 40% !important; }
.cool-form .size-50  { width: 50% !important; }
.cool-form .size-60  { width: 50% !important; }
.cool-form .size-70  { width: 60% !important; }
.cool-form .size-80  { width: 70% !important; }
.cool-form .size-90  { width: 80% !important; }
.cool-form .size-100 { width:100% !important; }


*:not(.searching-navbar ) select + span.form-control-feedback { right: 30px !important; }
*:not(.searching-navbar ) .form-normal select + span.form-control-feedback { bottom: 0px !important; }

/*
.form-inline select + span.form-control-feedback { right: -30px !important; }
.form-inline .radio 		+ span.form-control-feedback   { right: -20px !important; top: -8px;}
.form-inline .radio-inline  + span.form-control-feedback   { right: -20px !important; top: -8px;}
.form-inline .checkbox        + span.form-control-feedback { right: -20px !important; top: -5px;}
.form-inline .checkbox-inline + span.form-control-feedback { right: -20px !important; top: -5px;}
*/

@media (min-width: 768px ) {
.form-inline select + span.form-control-feedback, 
.form-inline .radio 		+ span.form-control-feedback,
.form-inline .radio-inline  + span.form-control-feedback,
.form-inline .checkbox        + span.form-control-feedback,
.form-inline .checkbox-inline + span.form-control-feedback { display: none; }
}

.radio-inline label, 
.checkbox-inline label { font-weight: normal }

.radio label,
.radio-inline label, 
.checkbox label, 
.checkbox-inline label { color: #939393; }

.form-normal .cool-form-label-radi, .form-inline .cool-form-label-radi { margin-right: 15px }
.form-normal .cool-form-label-chbx, .form-inline .cool-form-label-chbx { margin-right: 15px }
.form-normal .cool-form-label-mckb, .form-inline .cool-form-label-mckb { margin-right: 15px }

.checkbox-inline + .checkbox-inline { margin-left: 0px; }
.radio-inline    + .radio-inline { margin-left: 0px; }

.cool-form-label-for-checkbox, .cool-form-label-for-radio { margin-right: 10px; }

.form-inline .cool-form-label-for-checkbox, form-inline .cool-form-label-for-radio { margin-left: 5px; margin-right: 15px;  }






[data-cool-field-description] {
  z-index: 100;
  position: absolute; 
  transition: opacity 0.3s ease-in-out 0s;
}

[data-cool-field-description]   { top: 30px; right: 33px; }
.form-horizontal [data-cool-field-description]   { top: 0%; }
@media (min-width: 768px) {
[data-cool-field-description].inline     { top: 0%; right: 17px; }
[data-cool-field-description].horizontal { top: 0%; right: 33px; }
}


/* Hide the tooltip content by default */
[data-cool-field-description]:before,
[data-cool-field-description]:after {
  transition: opacity 0.3s ease-in-out 0s;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-cool-field-description]:before {
  position: absolute;
  bottom: 150%;
  left: -100px;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 200px; 
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-color: #909090;
/*  background-color: hsla(0, 0%, 20%, 0.9); */
  color: #FBFBFB;
  content: attr(data-cool-field-description) ;
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-cool-field-description]:after {
  position: absolute;
  bottom: 150%;
  left: 0px;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #909090;
/*  border-top: 5px solid hsla(0, 0%, 20%, 0.9); */
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

.group-type-area .field-part-control { position: relative; }

.form-horizontal .group-type-gcap .field-part-control {width: auto !important; }
.form-horizontal .group-type-gcap .field-part-control .g-recaptcha {width: auto !important; }
@media screen and (min-width: 768px) {
	.form-horizontal .group-type-gcap .form-control-feedback { right: -17px;} 
}


/* Show tooltip content on hover */
*:not(.searching-navbar ) .form-control-feedback:hover + [data-cool-field-description]:before,
*:not(.searching-navbar ) .form-control-feedback:hover + [data-cool-field-description]:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.cool-field-description { 
	display: inline-block;
	
}
.form-control-feedback {
  position: absolute;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  pointer-events: none;
  font-size: 21px;  
}
.form-normal .form-group { position: relative; }

.form-horizontal .form-control-feedback { top: -2px; right: 16px; }
.has-feedback label ~ .form-control-feedback { top: 30px; right: 0px; }


*:not(.searching-navbar ) > .form-control-feedback { pointer-events: all; color: #BFE9FF; }
*:not(.searching-navbar ) > .form-control-feedback:hover { cursor:help; }

.form-horizontal .group-type-chbx.form-group legend,
.form-horizontal .group-type-radi.form-group legend { font-weight: bold; font-size: 0.9rem; position: relative;
top: -5px; }
.form-horizontal .form-check .form-check-label .cool-form-label-for-checkbox { color: #333333; }
.form-check-input { margin-top: .35rem; }
.cool-form h1, .cool-form h2, .cool-form h3, .cool-form h4, .cool-form h5, .cool-form h6 { text-align: left; }


/*************************************************************************
 *  Datepickers
 */
.datepicker-block	{ position: relative; display: block; }
.datepicker-reseter {
    position: absolute;
    top: 6px;
    right: 9px;
    border: 1px solid #ccc;
    border-radius: 50%;
    padding: 0 8px;
    background: #f0f0f0;
    color: #900;
    font-weight: bold;
	cursor: pointer;
}
.datepicker-reseter:hover {
    background: #e0e0e0;
    color: #F00;
}

	



#ui-datepicker-div { font-size: 14px; background-color: #ffffff; opacity: 1; margin-top: 4px; }
#ui-datepicker-div { border-color: #ccc;     box-shadow: 3px 3px 6px #ccc;  }

#ui-datepicker-div .ui-datepicker-header {  }

#ui-datepicker-div .ui-datepicker-title { text-align: center; padding-bottom: 15px; padding-top: 15px; background-color: #fcfcfc; }

#ui-datepicker-div .ui-datepicker-calendar { width: 100% }
#ui-datepicker-div .ui-datepicker-calendar { padding: 10px; background-color: #e4e4e4; border-spacing: 2px; border-collapse: initial; }

@media screen and (max-width:543px) {
	#ui-datepicker-div { left: 0 !important; width: 100% !important; right: 0 !important; padding: 45px 15px; background-color: rgba(0,0,0, 0.50); }
	
	
}
@media screen and (min-width:544px) {
	#ui-datepicker-div .ui-datepicker-title { padding-top: 5px;  padding-bottom: 5px; }
}


#ui-datepicker-div .ui-datepicker-prev, 
#ui-datepicker-div .ui-datepicker-next { display: inline-block; }
#ui-datepicker-div .ui-datepicker-prev::before, 
#ui-datepicker-div .ui-datepicker-next::before { display: inline-block; float: left; font: 400 20px/1 dashicons; vertical-align: middle; margin-left: 0px; cursor: pointer; padding: 5px; }
#ui-datepicker-div .ui-datepicker-next { float: right; }
#ui-datepicker-div .ui-datepicker-prev { float: left; }
#ui-datepicker-div .ui-datepicker-next.ui-state-hover, 
#ui-datepicker-div .ui-datepicker-prev.ui-state-hover  { background-color: #f4f4f4; }

#ui-datepicker-div .ui-datepicker-next::before,
#ui-datepicker-div .ui-datepicker-prev::before { padding: 15px; position: relative; top: 1px; }	

#ui-datepicker-div .ui-datepicker-next::before { content: "\25B6"; border-left: 1px solid #e0e0e0; }
#ui-datepicker-div .ui-datepicker-prev::before { content: "\25C0"; border-right: 1px solid #e0e0e0; }
@media screen and (min-width:544px) {
	#ui-datepicker-div .ui-datepicker-next::before,
	#ui-datepicker-div .ui-datepicker-prev::before { padding: 5px; }	
}


#ui-datepicker-div .ui-datepicker-next .ui-icon, 
#ui-datepicker-div .ui-datepicker-prev .ui-icon { display: none; }

#ui-datepicker-div  th { min-width: 30px; text-align: center; padding: 0px 0px 8px 0px; }
/*#ui-datepicker-div  td:not(.ui-datepicker-other-month) { min-width: 30px; text-align: center; padding-top: 6px;  padding-bottom: 6px; background-color: #fafafa; border-right: 1px solid #999; border-bottom: 1px solid #999;} */

#ui-datepicker-div  td:not(.ui-datepicker-other-month) {
	text-align: center;
	padding-top: 8px;
	padding-bottom: 8px;
	background-color: #fafafa;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	width: 40px;
}
@media screen and (min-width:544px) {
#ui-datepicker-div  td:not(.ui-datepicker-other-month) { width: 36px; }

}



#ui-datepicker-div  td {font-size: 16px }
@media screen and ( min-width: 768px ) {
	.size-date { width: 100px; }
	#ui-datepicker-div  td {font-size: 13px }
}

#ui-datepicker-div  td > a { text-decoration: none;  }
#ui-datepicker-div  td > a:focus { box-shadow:none !important; }

#ui-datepicker-div td.ui-datepicker-week-end:not(.ui-datepicker-other-month)     { background-color: #FFF2E4; }
#ui-datepicker-div td.ui-datepicker-today:not(.ui-datepicker-other-month)        { background-color: #FFF3AF; }
#ui-datepicker-div td.ui-datepicker-current-day:not(.ui-datepicker-other-month)  { background-color: #CCEAFF; }

#ui-datepicker-div  td:not(.ui-datepicker-other-month):hover { background-color: #f4f4f4; }
#ui-datepicker-div  td:not(.ui-datepicker-other-month):focus,
#ui-datepicker-div  td:not(.ui-datepicker-other-month):active: { background-color: #e8e8e8; }

#ui-datepicker-div .ui-datepicker-buttonpane { background-color: #e4e4e4; padding: 0px 10px 10px 10px; }
#ui-datepicker-div .ui-datepicker-close { float: right; }

#ui-datepicker-div .ui-datepicker-buttonpane button { 
	text-align: center;
	height: 24px;
	line-height: 22px;
	padding: 0px 8px 1px;
	font-size: 11px;
	color: #555;
	border-color: #CCC;
	background: #F7F7F7 none repeat scroll 0% 0%;
	box-shadow: 0px 1px 0px #FFF inset, 0px 1px 0px rgba(0, 0, 0, 0.08);
	vertical-align: top;
	display: inline-block;
	text-decoration: none;
	margin: 0px;
	cursor: pointer;
	border-width: 1px;
	border-style: solid;
	border-radius: 3px;
	white-space: nowrap;
	box-sizing: border-box;
}
#ui-datepicker-div .ui-datepicker-buttonpane button:hover {
	background: #FAFAFA none repeat scroll 0% 0%;
	border-color: #999;
	color: #23282D;
}
#ui-datepicker-div .ui-datepicker-buttonpane button:active {
	background: #EEE none repeat scroll 0% 0%;
	border-color: #999;
	color: #32373C;
	box-shadow: 0px 2px 5px -3px rgba(0, 0, 0, 0.5) inset;
	outline: 0px none;
}
#ui-datepicker-div .ui-datepicker-buttonpane button:focus {
	box-shadow: 0px 0px 0px 1px #5B9DD9, 0px 0px 2px 1px rgba(30, 140, 190, 0.8);
	background: #FAFAFA none repeat scroll 0% 0%;
	border-color: #999;
	color: #23282D;
	outline: 0px none;
}

/* 
 * Mobile ajustments
 */
@media screen and (max-width: 543px ) {
	.cool-form-section { margin-left: -15px; margin-right: -15px; }
	.cool-form h1, 	.cool-form h2, 	.cool-form h3, 	.cool-form h4, 	.cool-form h5, 	.cool-form h6 { margin-top: 1rem; margin-bottom: 1rem; }
	.cool-form .cool-form-info { margin-bottom: 0px; }
	.cool-forms-form { background: #fff none !important; border: none; }
	.cool-forms-article-wrapper { margin-top: -30px; }
	
	.cool-form .dateclass{
		width:100%;
		position: relative;
	}
	
	.cool-form .dateclass.placeholderclass::before{
		width:100%;
		content:attr(placeholder);
		color:#AAAAAA;
		position: absolute;
		top: 9px;
		left: 12px;
	}
	.cool-form .dateclass.placeholderclass:hover::before {
		width:0%;
		content:"";
	}

	.cool-form .col-form-label, 
	.form-horizontal .group-type-chbx.form-group legend, .form-horizontal .group-type-radi.form-group legend {
		font-size: 0.75rem;
		padding-bottom: 0;		
	}
	.form-control {
		background-color: unset;
		box-shadow: none;
		border: none;
		border-bottom: 1px solid #bbb;
		padding-left: 0rem;
		padding-top: 0.2rem;
		padding-bottom: 0.2rem;
	}
	.form-horizontal .form-check .form-check-label .cool-form-label-for-checkbox {
		font-weight: normal;
	}

	.form-control:focus	{ 
		background-color: unset;
		border-color: none;
		box-shadow: none;
	}
	.cool-form h1, .cool-form h2, .cool-form h3, .cool-form h4,	.cool-form h5, .cool-form h6 { font-weight: 300; letter-spacing: 1px; text-align: center !important; }
	.datepicker-reseter {
		top: -2px;
		right: 6px;	
	}

	::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color:  #fff; }
	::-moz-placeholder { /* Firefox 19+ */ color:  #fff; }
	:-ms-input-placeholder { /* IE 10+ */ color:  #fff; }
	:-moz-placeholder { /* Firefox 18- */ color:  #fff; }

}
 
