/*
we need another wrapper with more noxious styles to get it so that it will show a vertical scroller if the content is long.
https://stackoverflow.com/questions/4910883/overflow-scroll-100-container-height
See TreeDisplayPanel. I've made a note to investigate this further
*/
.formstyles-vscroll-wrapper {
position:absolute; left:0; top:0; width:100%; height:100%; overflow-y:scroll;
}


/*######################################################
backgrounds
*/
.formstyles-repeat-stripe-light-grey {
background:url('../images/stripe-light-grey.png');
}
.formstyles-repeat-stripe-grey {
background:url('../images/stripe_grey.png');
}
.formstyles-repeat-stripe-green {
background:url('../images/stripe-green2.png');
}



/*#######################################################
Checkbox styles
from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox
*/
.formstyles-checkbox-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.formstyles-checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.formstyles-checkbox-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.formstyles-checkbox-container:hover input ~ .formstyles-checkbox-checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.formstyles-checkbox-container input:checked ~ .formstyles-checkbox-checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.formstyles-checkbox-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.formstyles-checkbox-container input:checked ~ .formstyles-checkbox-checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.formstyles-checkbox-container .formstyles-checkbox-checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}







/*#######################################################
Buttons
*/
.formstyles-button {
border-radius: 2px;
/*background: #4286f4;*/
background:#4131d6;
font-size:1.1em;
color:white;
padding:15px;
cursor:pointer;
}

.formstyles-button-withcap-blue {
border-radius: 2px;
background: #4286f4;
font-size:0.9em;
text-transform: uppercase;
color:white;
text-align: center;
}
.formstyles-button-leftcap-blue {
border-radius: 2px 0px 0px 2px;
background: #155fd6;
font-size:0.9em;
color:white;
}
.formstyles-button-rightcap-blue {
border-radius: 0px 2px 2px 0px;
background: #155fd6;
font-size:0.9em;
color:white;
}


.formstyles-button-withcap-grey {
border-radius: 2px;
background: #BBBBBB;
font-size:0.9em;
text-transform: uppercase;
color:white;
text-align: center;
}
.formstyles-button-leftcap-grey {
border-radius: 2px 0px 0px 2px;
background: #999999;
font-size:0.9em;
color:white;
}
.formstyles-button-rightcap-grey {
border-radius: 0px 2px 2px 0px;
background: #999999;
font-size:0.9em;
color:white;
}


.formstyles-submit-button {font-size:1em;
padding:20px;
background:#155fd6;
border-radius: 3px;
text-transform: uppercase;
color:#ffffff;
font-weight:bold;
width:100%;
}



/*##########################################
Text inputs
*/
.formstyles-text-input {
border:2px solid #E2E2E2;
border-bottom:2px solid #999999;
border-radius:3px;
background: linear-gradient(to bottom right,  #E5E5E5, #F9F9F9, #FFFFFF);
padding:15px;
width:100%;
font-size:1em;
z-index:2;
font:inherit;
}
.formstyles-textarea-input {
border:2px solid #E2E2E2;
border-bottom:2px solid #999999;
border-radius:3px;
background: linear-gradient(to bottom right, #E5E5E5, #F9F9F9, #FFFFFF);
padding:15px;
width:100%;
font-size:1em;
resize:none;
z-index:2;
font:inherit;
}
.formstyles-text-input:focus {
border-color:#80bdff;
outline:0;
-webkit-box-shadow:0 0 0 .2rem rgba(0,123,255,.25);
box-shadow:0 0 0 .2rem rgba(0,123,255,.25);
background:#F9F9F9;
}
.formstyles-textarea-input:focus {
border-color:#80bdff;
outline:0;
-webkit-box-shadow:0 0 0 .2rem rgba(0,123,255,.25);
box-shadow:0 0 0 .2rem rgba(0,123,255,.25);
background:#F9F9F9;
}




/*#########################################
content, text
*/
.formstyles-paragraph {
margin-bottom:15px;
}
.formstyles-grey-repeater {
width:100%;
background:url('../images/stripe_grey.png') repeat;
left:0px;
top:auto;
bottom:0px;
}
.formstyles-selections-area {
border:2px solid #E2E2E2;
border-bottom:2px solid #999999;
border-radius:3px;
background:#F2F2F2;
padding:5px;
}
.formstyles-selections-area-focus {
border-color:#80bdff;
outline:0;
-webkit-box-shadow:0 0 0 .2rem rgba(0,123,255,.25);
box-shadow:0 0 0 .2rem rgba(0,123,255,.25);
background:#F9F9F9;
}
.formstyles-pagination-number {
padding:8px;
min-width:40px;
background:#F2F2F2;
margin:5px;
text-align: center;
border-radius:2px;
margin-top:-10px;
}
.formstyles-pagination-highlight {
padding:8px;
min-width:40px;
background:#555555;
color:#FFFFFF;
font-weight:bold;
margin:5px;
text-align: center;
border-radius:2px;
margin-top:-10px;
}
.formstyles-pagination-ellipsis {
min-width:40px;
font-weight:bold;
font-size:1.7em;
margin:2px;
text-align: center;
margin-top:-16px;
}
.formstyles-linkstyle {
color:#4286f4;
font-weight:bold;
text-decoration:none;
cursor:pointer;
}


/*#######################################################
Collapsible List
*/
.formstyles-collapselist-color-0 {
background:#0B66D3; color:#FFFFFF; padding:10px;
}
.formstyles-collapselist-color-0:hover {
background:#0A76E2;
}

.formstyles-collapselist-color-1 {
background:#BA246F; color:#FFFFFF; padding:10px;
}
.formstyles-collapselist-color-1:hover {
background:#DD0772;
}

.formstyles-collapselist-color-2 {
background:#E0360E; color:#FFFFFF; padding:10px;
}
.formstyles-collapselist-color-2:hover {
background:#EF3D20;
}

.formstyles-collapselist-color-3 {
background:#BC081A; color:#FFFFFF; padding:10px;
}
.formstyles-collapselist-color-3:hover {
background:#E00A28;
}




/*#######################################################
Lightbox styles
*/
.formstyles-lightbox-background {
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:#000000;
opacity:0.8;
z-index:10000;
}
.formstyles-lightbox-stage {
top:50%;
left:50%;
height:300px;
background:#FFFFFF;
border-radius:3px;
z-index:10001;

-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}


/*#################################
Success messages
*/
.formstyles-success-big {
/*background:#60c11f;*/
background: url('../images/stripe-green2.png') repeat;
font-size:1.7em;
padding:15px;
border-radius:3px;
color:#FFFFFF;
font-weight:bold;
}


/*#################################
Error messages
*/

.formstyles-lightbox-error-message {
background:#f44d41;
color:#FFFFFF;
font-size: 1.1em;
padding:15px;
border-radius:2px;
}

/*
.formstyles-error {
background:#ff5843;
color:#FFFFFF;
padding:10px;
padding-top:20px;
border-radius: 0px 0px 3px 3px;
z-index:0;
margin-top:-10px;
z-index:1;

outline:0;
-webkit-box-shadow:0 0 0 .2rem rgba(255, 88, 67,.25);
box-shadow:0 0 0 .2rem rgba(255, 88, 67,.25)
background:#F9F9F9;
}
*/

.formstyles-error {
border-top: 3px solid #ff5843;
padding:10px;
border-radius: 3px 3px 0px 0px;
}

/*.formstyles-error-border {
border-color:#f44d41;

outline:0;
-webkit-box-shadow:0 0 0 .2rem rgba(255, 88, 67,.25);
box-shadow:0 0 0 .2rem rgba(255, 88, 67,.25)
background:#F9F9F9;
}*/

.formstyles-text-input-error {
border:1px solid #ff5f20; /*#E2E2E2;*/
border-bottom:0px;
border-radius:3px 3px 0px 0px;
padding:15px;
width:100%;
font-size:1em;
z-index:2;
font:inherit;
}


.formstyles-error-row {
/*border-top:4px solid #ff5843;*/
/*border-top:3px solid #ff5f20;*/
/*border-top:6px solid #ff6e42;*/
border-top:6px solid #fc7253;
}
.formstyles-error-message-box1 {
/*background:#ff5843; */
/*background:#ff5f20;*/
/*background:#ff6e42;*/
background:#fc7253;
padding:7px;
width:50px;
color:#FFFFFF;
border-radius:0px 0px 0px 6px;
}
.formstyles-error-message-box2 {
padding:7px;
padding-left:12px;
padding-right:12px;
padding-bottom:8px;  /*there's a tiny mismatch btween box1 and box2 and we need an extra px height here*/
/*background:url('../images/stripe-light-grey.png') repeat; */
/*background:url('../images/stripe-light-melon.png') repeat;*/
/*background: linear-gradient(to bottom right, #E5E5E5, #FFFFFF);*/
background:#FFFFFF;
font-weight:bold;
border-top:2px solid #ffa221;
border-left:3px solid #ffa221;
/*color:#222222;*/
/*color:#e54102;*/
color:#cc4324;
}






/*#######################################################
UI Sprites
*/

.formstyles-radio-button-small-white {
width:25px; height:25px; background:url('../images/ui-sprite.png');
background-position: -111px -152px;
}
.formstyles-radio-button-small-white-selected {
width:25px; height:25px; background:url('../images/ui-sprite.png');
background-position: -138px -152px;
}
.formstyles-plus-3-white {
width:30px; height:30px; background:url('../images/ui-sprite.png');
background-position: -189px -0px;
}
.formstyles-plus-4-white {
width:20px; height:20px; background:url('../images/ui-sprite.png');
background-position: -228px -0px;
}

.formstyles-uparrow-4-white {
width:20px; height:12px; background:url('../images/ui-sprite.png');
background-position: -233px -150px;
}
.formstyles-downarrow-4-white {
width:20px; height:12px; background:url('../images/ui-sprite.png');
background-position: -173px -235px;
}


.formstyles-leftarrow-4-grey {
width:12px; height:20px; background:url('../images/ui-sprite-grey.png');
background-position: -4px -175px;
}
.formstyles-rightarrow-4-grey {
width:12px; height:20px; background:url('../images/ui-sprite-grey.png');
background-position: -89px -233px;
}
.formstyles-leftarrow-4-lightgrey {
width:12px; height:20px; background:url('../images/ui-sprite-light-grey.png');
background-position: -4px -175px;
}
.formstyles-rightarrow-4-lightgrey {
width:12px; height:20px; background:url('../images/ui-sprite-light-grey.png');
background-position: -89px -233px;
}


.formstyles-x-4-white {
width:20px; height:20px; background:url('../images/ui-sprite.png');
background-position: -6px -90px;
}
.formstyles-x-4-grey {
width:20px; height:20px; background:url('../images/ui-sprite-grey.png');
background-position: -6px -90px;
}
.formstyles-x-5-grey {
width:12px; height:12px; background:url('../images/ui-sprite-grey.png');
background-position: -145px -240px;
}

.formstyles-exclamation-1-white {
width:31px; height:31px; background:url('../images/ui-sprite.png');
background-position: -223px -112px;
}
.formstyles-exclamation-2-white {
width:25px; height:25px; background:url('../images/ui-sprite.png');
background-position: -195px -112px;
}



@media (min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

	.formstyles-radio-button-small-white {
	width:25px; height:25px; background:url('../images/ui-sprite-2x.png');
	background-position: -111px -152px;
	background-size: 256px 256px;
	}
	.formstyles-radio-button-small-white-selected {
	width:25px; height:25px; background:url('../images/ui-sprite-2x.png');
	background-position: -138px -152px;
	background-size: 256px 256px;
	}
	.formstyles-plus-3-white {
	width:30px; height:30px; background:url('../images/ui-sprite-2x.png');
	background-position: -189px -0px;
	background-size: 256px 256px;
	}
	.formstyles-plus-4-white {
	width:20px; height:20px; background:url('../images/ui-sprite-2x.png');
	background-position: -228px -0px;
	background-size: 256px 256px;
	}

	.formstyles-uparrow-4-white {
	width:20px; height:12px; background:url('../images/ui-sprite-2x.png');
	background-position: -233px -150px;
	background-size: 256px 256px;
	}
	.formstyles-downarrow-4-white {
	width:20px; height:12px; background:url('../images/ui-sprite-2x.png');
	background-position: -173px -235px;
	background-size: 256px 256px;
	}

	.formstyles-leftarrow-4-grey {
	width:12px; height:20px; background:url('../images/ui-sprite-grey-2x.png');
	background-position: -4px -175px;
	background-size: 256px 256px;
	}
	.formstyles-rightarrow-4-grey {
	width:12px; height:20px; background:url('../images/ui-sprite-grey-2x.png');
	background-position: -89px -233px;
	background-size: 256px 256px;
	}

	.formstyles-leftarrow-4-lightgrey {
	width:12px; height:20px; background:url('../images/ui-sprite-light-grey-2x.png');
	background-position: -4px -175px;
	background-size: 256px 256px;
	}
	.formstyles-rightarrow-4-lightgrey {
	width:12px; height:20px; background:url('../images/ui-sprite-light-grey-2x.png');
	background-position: -89px -233px;
	background-size: 256px 256px;
	}

	.formstyles-x-4-white {
	width:20px; height:20px; background:url('../images/ui-sprite-2x.png');
	background-position: -6px -90px;
	background-size: 256px 256px;
	}
	.formstyles-x-4-grey {
	width:20px; height:20px; background:url('../images/ui-sprite-grey-2x.png');
	background-position: -6px -90px;
	background-size: 256px 256px;
	}
	.formstyles-x-5-grey {
	width:12px; height:12px; background:url('../images/ui-sprite-grey-2x.png');
	background-position: -145px -240px;
	background-size: 256px 256px;
	}


	.formstyles-exclamation-1-white {
	width:31px; height:31px; background:url('../images/ui-sprite-2x.png');
	background-position: -223px -112px;
	background-size: 256px 256px;
	}
	.formstyles-exclamation-2-white {
	width:25px; height:25px; background:url('../images/ui-sprite-2x.png');
	background-position: -195px -112px;
	background-size: 256px 256px;
	}


}