/* Placeholder */

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

/* Field groups/group */

.field-groups{
 max-width: 800px
}

.field-groups .field-group-heading{
 position: relative; text-align: center; text-transform: uppercase; margin-bottom: 24px ; font-family: Poppins Bold,'Open Sans',Helvetica,Arial,sans-serif; color:#303641; font-size: 24px;
}
.field-groups .field-group-heading a.close.cross{
 position: absolute; top: -10px; right: 0
}

.field-groups>hr{ margin: 40px 0 20px 0; border: solid #221e1f 0px; border-top-width: 1px }

.field-groups+.field-groups, .field-groups+.add-more-field-groups .field-groups, .field-group.margbtm+.field-group, .field-group+.field-group.margtop, .field-group+script+.field-group.margtop, .expand-field-groups+.field-groups, .expand-field-groups.margbtm+.field-group{
 margin-top: 40px         
}
.field-group.margbtm, .add-more-field-groups.margbtm{
 margin-bottom: 40px      
}

/* Horizontal label/field style */

.field-group>label, .field-group>.label{
 display: block; padding-bottom: 6px;       
}


@media ( max-width: 767px ){
   
 .field-group>.inp:after{
  display: table; content: ''; clear: both      
 } 
 .field-group .inps>.inp+.inp{
  padding-top: 8px;
 }
   
} 

@media ( min-width: 768px ){
  
 .field-group .inps{
  display: table; width: 100%; table-layout: fixed
 }
 .field-group.collapse-inp .inps{
  width: auto; table-layout: auto       
 }
 .field-group>label, .field-group>.label{
  padding-left: 4px
 }  
 .field-group .inp-group{
  margin-left: -10px; margin-right: -10px;         
 }
 .field-group .inps>.inp{
  display: table-cell; vertical-align: top; padding-left: 10px; padding-right: 10px;   
 }
 
 /*
       
 .field-group, .field-group .inps{
  display: table; width: 100%; table-layout: fixed
 }
 .field-group.collapse-inp, .field-group.collapse-inp .inps{
  width: auto; table-layout: auto       
 }        
 
 .field-group>label, .field-group>.label{
  padding-top: 6px; padding-bottom: 0; 
 }  
 .field-group>label, .field-group>.label, .field-group .inp{
  display: table-cell; vertical-align: top
 }

 .field-group .inp-group{
  margin-left: -10px; margin-right: -10px;         
 }
 
 .field-group .inps>.inp{
  padding-left: 10px; padding-right: 10px;   
 }
 .field-group>label, .field-group>.label{   
  width: 180px   
 }
 
 */

}

/* Vertical label/field style
    
.field-group>label, .field-group>.label, .field-group>.inp{
 display: block; margin-bottom: 
}

*/

/* Field group for check/radio always fixed table, label always tiny */
.field-group.collapse-label{
 display: table; width: 100%; table-layout: fixed
}
.field-group.collapse-label>.label, .field-group.collapse-label>.inp{
 display: table-cell; vertical-align: top   
}
.field-group.collapse-label>.label{
 width: 50px; padding: 0     
}
.field-group.collapse-label.multicheck .checkcontainer+.checkcontainer{ margin-top: 5px; }

.field-group.collapse-label.multicheck .label{  display: table-cell; vertical-align: top; padding: 0; width: 50px; }

.field-group.collapse-label.multicheck .inp{ display: table-cell; vertical-align: top; /* height: 35px; margin-bottom: 5px; */ } 
        

.field-group+.field-group, p+.field-group, .field-group+script+.field-group, .expand-field-groups+.field-group{
 margin-top: 24px
}
.field-group+p{
 margin: 30px 0 0 0
}
.field-group>.label label{
 display: none      
}   
.field-group .inp>span.footnote{
 display: block; margin-top: 12px; font-size: 0.8125rem; line-height: 1.571em
}
.field-group .inp>span.footnote.footnote-flattop{ margin-top: 0 }
.field-group .inp>span.footnote.footnote-flattop>b{font-size: 1rem }


.expand-field-groups{ 
 max-height: 0; overflow: hidden; transition: linear max-height 300ms 100ms
}
.expand-field-groups.open{
 max-height: 1000px;        
}
.GTemps{
 padding-top: 20px
}



/* Form elements */

input, select, textarea,  button{
 -webkit-appearance: none; -moz-appearance: none; appearance: none
}
input[type="checkbox"]{
 -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox  
}
input[type="radio"]{
 -webkit-appearance: radio; -moz-appearance: radio; appearance: radio 
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="color"],
textarea,
select{
 width: 100%; border: solid #EBEBEB 1px; line-height: 17px; padding: 16px 18px; background-color: #FFF; color: #221e1f
}
input.small-width, textarea.small-width, select.small-width{
 max-width: 80px;     
}   
input.medium-width, textarea.medium-width, select.medium-width{
 max-width: 50%;     
}

a.btn, span.btn, button.btn{
 line-height: 17px; padding: 16px 18px;
}
select{
 line-height: 15px; padding-left: 14px; padding-right: 28px   
}
select.auto-width{
 width: initial       
}
a.btn,button{
 text-decoration: none; outline: 0; border: 0; cursor: pointer
}
button{
 #width:0px; overflow: visible
}
a.btn,button{
 text-decoration: none; outline: 0
}
button::-moz-focus-inner {
 border: 0; padding: 0
}
button:DISABLED{
 cursor: default   
}
a.btn, span.btn, button, input, select, textarea, .webform-upload-button-holder:before{
 display: inline-block; margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; font-size: 0.9375rem; -webkit-border-radius: 0; border-radius: 0
}
input[type=radio], input[type=checkbox]{
 float: left; padding: 0; -webkit-border-radius: 0; border-radius: 0
}
a[name].btn{
 cursor: default     
}

/* Checkbox/Radio - styled */

input[type="checkbox"].styled, input[type="radio"].styled{
 display: none
}
input[type="checkbox"].styled+label, input[type="radio"].styled+label{
 position: relative; display: block; float: left; border: solid #EBEBEB 1px; background-color: #FFF; cursor: pointer
}     
input[type="checkbox"].styled+label+span, input[type="radio"].styled+label+span{
 display: block; float: left; margin-left: 8px;
}
span+input[type="checkbox"].styled+label, span+input[type="radio"].styled+label{
 margin-left: 20px;
}
input[type="checkbox"].styled+label+input+label, input[type="radio"].styled+label+input+label{
 margin-left: 8px
} 
/* Vertical */
input[type="checkbox"].styled.vertical+label, input[type="radio"].styled.vertical+label{
 float: none; margin-left: 0
}
input[type="checkbox"].styled.vertical+label+input+label, input[type="radio"].styled.vertical+label+input+label{
 margin-top: 8px
}
/* Rescue code/css for vertical check/radio boxes with labels */
.vertical-labelled input[type="checkbox"].styled+label,.vertical-labelled input[type="checkbox"].styled+label+span, .vertical-labelled input[type="radio"].styled+label,.vertical-labelled input[type="radio"].styled+label+span{
 float: none; display: inline-block; vertical-align: top
}
.vertical-labelled+.vertical-labelled{
 margin-top: 8px      
}



input[type="checkbox"].styled+label, input[type="radio"].styled+label{
 width: 27px; height: 27px    
}
input[type="checkbox"].styled.onoff+label, input[type="radio"].styled.onoff+label{
 width: 48px; margin-right: 50px;
}
input[type="checkbox"].styled+label:before, input[type="radio"].styled+label:before{
 display: block; content: ''; border: solid transparent 0; margin-top: 3px; margin-left: 8px; -webkit-transition: 300ms; transition: 300ms; pointer-events: none
}
input[type="checkbox"].styled+label:before, input[type="radio"].styled+label:before{
 width: 9px; height: 14px; border-right-width: 4px; border-bottom-width: 3px; -webkit-transform: rotate(40deg); transform: rotate(40deg);
}
input[type="checkbox"].styled.onoff+label:before, input[type="radio"].styled.onoff+label:before{
  width: 17px; height: 17px
}
input[type="checkbox"].styled.onoff+label:before, input[type="radio"].styled.onoff+label:before{
 display: block; content: ''; margin: 0; background-color: #000; opacity: .2; border: none; -webkit-transform: none; transform: none
}
input[type="checkbox"].styled.onoff+label:before, input[type="radio"].styled.onoff+label:before{
 position: absolute; top: 4px; left: 4px; right: auto; 
}
input[type="checkbox"].styled:checked+label:before, input[type="radio"].styled:checked+label:before{
 border-color: #40b649;
}     
input[type="checkbox"].styled.onoff:checked+label:before, input[type="radio"].styled.onoff:checked+label:before{
 left: 25px; opacity: 1
}
input[type="checkbox"].styled.onoff.hint+label:after, input[type="radio"].styled.onoff.hint+label:after{
 font-size: 0.8125rem; content: 'No'; position: absolute; left: 100%; margin-left: 14px
}
input[type="checkbox"].styled.onoff.hint:checked+label:after, input[type="radio"].styled.onoff.hint:checked+label:after{
 content: 'Yes';
}

.field-group .inp>input[type="radio"], .field-group .inp>input[type="checkbox"]{
 margin-top: 12px     
}  
.field-group .inp>input[type="radio"]+label, .field-group .inp>input[type="checkbox"]+label{
 margin-top: 0
}


/* Form elements - select arrow */

select{
 background-position:
  calc(100% - 14px ) 50%,
  calc(100% - 9px ) 50%;
 background-size:
  5px 5px,
  5px 5px;
 background-image:
  linear-gradient( 45deg, transparent 50%, #025295 50% ),
  linear-gradient( 135deg, #025295 50%, transparent 50% );
 background-repeat: no-repeat;
 padding-right: 25px;
}
select:focus{
 background-image:
  linear-gradient( 45deg, transparent 50%, #025295 50% ),
  linear-gradient( 135deg, #025295 50%, transparent 50% )
}
select:-moz-focusring{
 color: transparent; text-shadow: 0 0 0 #000;
}
select.auto-width{
 padding-right: 27px; 
}

/* Form element modifiers */

.inp.text-with-button button.btn{
 display: block; margin: 10px auto 0 auto      
}

@media ( min-width: 768px ){

 .inp.text-with-button{
   position: relative; padding-right: 200px;       
 }  
 .inp.text-with-button button.btn{
  position: absolute; top: 0; right: 0; width: 180px; height: 100%; margin: 0; padding: 0 
 }

}

/* Validation */

.form-message{
 max-height: 0; overflow: hidden; opacity: 0; -webkit-transition: max-height 700ms linear, opacity 700ms; transition: max-height 700ms linear, opacity 700ms;  
}
.form-message.open{
 max-height: 300px; opacity: 1    
}
.form-message>span{
 display: block; position: relative; margin: 1px 0 30px 0; padding: 20px;      
}

.form-message>span>a.cross{
 position: absolute; top: 0; right: 0;      
}

.form-message.success>span{
 border: solid green 1px;      
}

.form-message.failed>span{
 border: solid red 1px;      
}


.required-group:not(.no-astrix)>label:after, .required-group:not(.no-astrix)>div.label:after{
 content: ' *'; font-size: 0.875rem
}
.required-group.flag label, .required-group.flag .label{
 color: red;      
}

div.user-field.required{
 border: solid transparent 1px      
}

input[type="text"].flag,
input[type="password"].flag,
input[type="number"].flag,
input[type="email"].flag,
input[type="tel"].flag,
input[type="url"].flag,
input[type="color"].flag,
textarea.flag,
select.flag,
input[type="checkbox"].styled.flag+label,
input[type="radio"].styled.flag+label,
div.user-field.required.flag{
 border-color: red;
}


.field-group .file-upload-holder{ padding: 20px; background-color: #FFF }

.field-group .TEMP_BUTTON_HOLDER_HOLDER.hide{
 display: none;   
}

.field-group .webform-upload-button-holder{ position: relative; width: 240px; height: 52px; margin-left: auto; margin-right: auto }

.field-group .webform-upload-button-holder:before{ content: 'ADD PLAYER PHOTO'; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 11px; text-align: center; color: #FFF; background-color: #40b649 }

.field-group .webform-upload-button-holder input[type="file"]{ display: block; opacity: 0; width: 100%; height: 100%; background-color: #FFF; cursor: pointer }

.field-group .file-upload-holder .TEMP_BUTTON_HOLDER_HOLDER+.webform-upload-rows{ margin-top: 20px }

.field-group .file-upload-holder .webform-upload-row+.webform-upload-row{ margin-top: 20px }

.field-group .file-upload-holder .webform-upload-file-details{ width: 200px; margin-left: auto; margin-right: auto }
.field-group .file-upload-holder a.webform-upload-label{ display: block; margin-top: 20px; color: #40b649; font-weight: 700 }
.field-group .file-upload-holder .webform-upload-thumbnail-holder{ position: relative; padding: 10px; background-color: #c0c0c0 }
.field-group .file-upload-holder .webform-upload-thumbnail-holder>.webform-upload-progress-bar{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba( 253, 255, 255, 0.5 ) }
.field-group .file-upload-holder .webform-upload-thumbnail{ height: 200px; background-repeat: no-repeat; background-position: center }


/* webform-upload-row.upload-complete */
.field-group .file-upload-holder .webform-upload-row.upload-complete.image .webform-upload-thumbnail-holder{ padding: 0 }
.field-group .file-upload-holder .webform-upload-row.upload-complete .webform-upload-thumbnail-holder{ background-color: transparent }
.field-group .file-upload-holder .webform-upload-row.upload-complete.image .webform-upload-thumbnail{ background-size: contain }


.add-field-groups{ text-align: center; padding-top: 40px }
/* .add-field-groups>a.btn{ width: 240px } */

.Btm-Txt{ display: block; margin: 15px 0; }