.debug
{
	display : none;
}
#page-submit
{
	--color-bg : rgba(0,250,250,0.3);
	--color-bg2: rgba(0,250,250,0.5);
	--color-bg3: rgba(0,250,250,0.9);
	--p-text-indent : 0;	
}
#page-submit .content
{
	display : block;
}
#frontForm
{
	--color : var(--color-blue-light);
	--color-error : var(--color-red);
	--w : 600px; 				/* TEMP TODO */ 
	--space : 20px;
	--imgPreviewSize : 200px;
	--hand-cursor : url(../Img/assets_hand.svg) 17 9;
	width : var(--w);

}

.propGroup
{

	margin-bottom		: var(--space-half);
	box-sizing:content-box;
	width : 100%;
}

.propGroupTitle
{
	color : var(--color); 
}
.propGroup a, .propGroup b
{
	color : var(--color);
	font-weight : inherit;

}

.propInput
{
	margin-bottom		: var(--space);
	margin-top		: var(--space);
}
.propInput .msg
{
	color : var(--color-error);
}
.propInput.half-width
{
	display : inline-block;
    width: calc( (-2px) + var(--w)*0.5 - var(--space)*0.5);

}
.propInput.half-width + .propInput.half-width
{
	margin-left : var(--space);  

}

.propGroup input[type=string], .propGroup textarea
{
	background : none;
	font-size 	: 18px;
	font-weight : 300;
	border	: 1px solid var(--color);
	color:	var(--color);
	padding : 5px;
	width : 100%;
}
.propGroup input[type=string].error
{
	color : var(--color-error);

}

.propGroup textarea[name=text]
{
	display : block;
	width : var(--w);
	height : calc(var(--w)*0.4); 
}

.propGroup input[type=checkbox]
{
	display : inline-block;
	--h : 1.6em;
	font-size: var(--h);
	width :var(--h);
	height:var(--h);
	background : none;
	border	: 1px solid var(--color);
	-webkit-appearance :none;
	appearance:none;
	vertical-align:bottom;
	margin : 0;
}
.propGroup input[type=checkbox]:hover
{
	background : var(--color-bg2);
}

.propGroup input[type=checkbox]:checked
{	
	background: center/70% no-repeat url(../Img/check.svg),var(--color);
}
.propGroup input[type=checkbox]:checked:hover
{	
	background: center/70% no-repeat url(../Img/check.svg),var(--color-bg3);
}
.propGroup label 
{	-webkit-appearance :none;
	display: inline-block;
	width : 80%;
	vertical-align:baseline;
	margin-left : 1em;
}

.propGroup label a 
{
	color : var(--color);
}
.propGroup a.button, .propInput input[type="file"]::file-selector-button, .propInput input[type="checkbox"]
{
/*
	cursor: var(--hand-cursor), auto;
*/
}
.propGroup a.button.big, .propInput input[type="file"]::file-selector-button
{
    display:                    inline-block;
    text-transform:             uppercase;
    text-align :				justify;
    font-size:                  18px;
	letter-spacing:             0.6em;
    font-weight:                300;
    padding:                    var(--space-half);
    margin-bottom:              var(--space-standard);
	color:						var(--color);
	border: 					1px solid var(--color)

}
.propGroup a.button.big:hover 
{
	background-color : var(--color-bg2);
}

.propInput input[type="file"]
{
	color:var(--color);
	padding : 0;
    text-overflow: ellipsis;
    max-width: 100%;
}
.propInput input[type="file"].error
{
	color:var(--color-error);
}
.propInput select
{
	background: transparent;
    padding: 5px;
	font-family: "antique-olive";
    font-size:         18px;
	font-weight : 300;
    color: var(--color);
    border: 1px solid var(--color);
    text-transform: uppercase;
	letter-spacing:   0.4em;	
}

.propInput input[type="file"]::file-selector-button {
    appearance: none;
	-webkit-appearance :none;
	font-family: "antique-olive";
    font-size:         18px;
    background-color: transparent;
	text-transform : uppercase;
    align-items: baseline;
    text-overflow: normal;
    text-align: start !important;
	letter-spacing:   0.4em;	
    overflow: hidden !important;

}
.propInput input[type="file"]::file-selector-button:hover
{	background-color : var(--color-bg2);
}

.propInput .preview.ok input[type="file"]::file-selector-button
{
	display : none;
}

.propInput input:-internal-autofill-selected
{
    appearance: none;
	-webkit-appearance :none;
    background-color: var(--color) !important;
	color : #000;
}
.propInput.loaded .preview
{   padding: var(--space);
	margin-top : var(--space);
    border: 1px solid var(--color);
	width : var(--imgPreviewSize);

	background-color: var(--color-red);
}
.propInput.loaded .propName .t
{
	display : none;
}
.propInput .preview img
{
	max-width : var(--imgPreviewSize); 
	max-height : calc(2*var(--imgPreviewSize)); 
	margin-top : var(--space);

    filter: grayscale(1);
    mix-blend-mode: difference;
}
.propInput.loaded .videoPlayerPreview
{
	margin-top : var(--space);
	width : var(--imgPreviewSize);
	padding : var(--space);
    border: 1px solid var(--color);

	background-color: var(--color-red);
}
.propInput.loaded .videoPlayerPreview input
{
	padding : 0;
	border :none;
	font-size: 0.8em;
}
.propInput .videoPlayerPreview iframe
{
    filter: grayscale(1);
    mix-blend-mode: difference;
}



/* Standard syntax */
@keyframes backgroundColorPalette {
  0% {
    background: black;
  	color : var(--color-blue-light);
  }
  25% {
    background: var(--color-blue-light);
  	color : black;
  }
  50% {
    background: black;
  	color : var(--color-blue-light);
  }
  75% {
    background: var(--color-red);
  }
  100% {
    background: black;
  }
}
#btnSubmit.sending {
  animation-name: backgroundColorPalette;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: normal;
}
