/* Deevo UCF element
======================================================*/

.deevo_ucf_element{}

.deevo_ucf_element #optin {
    position: relative;
    top: -1.3em;
}
.deevo_ucf_element h2.deevo_ucf_element_header {
    margin-top: 0;
}

.deevo_ucf_element .field {
    position: relative;
    padding-top: 1em;
}

.deevo_ucf_element[data-screen-layout="horizontal"] .field{
    -webkit-box-flex:1;
        -ms-flex:1;
            flex:1;
}


.deevo_ucf_element textarea {
    display: block;
    width:100%;
}
.deevo_ucf_element select {
    display: block;
    width:100%;
    padding-left: 3em;
}

.deevo_ucf_element .ucf_input {
    width: 100%;
}
.deevo_ucf_element button.ucf_submit {
    font-size: 1.1em;
    padding: .6em 2em .6em;
    min-width: 8em;
}


.deevo_ucf_element[data-screen-layout="horizontal"] .field + .field {
    margin-left: 1em;
    margin-top: 0;
    margin-bottom: 0;
}


.deevo_ucf_element .controls {
   
margin-top: 2em;
}



.deevo_ucf_element[data-screen-layout="vertical"] .controls{
    padding-top:0 !important;
}


.deevo_ucf_element[data-screen-layout="horizontal"] .controls{
    -webkit-box-flex:0;
        -ms-flex:0;
            flex:0;
}


.deevo_ucf_element .controls::after{content:"";clear:both;display:block;}


.deevo_ucf_element[data-screen-layout="vertical"] .controls button{
     float: right;
     width: 10em;
}


.deevo_ucf_element label {
    margin: 0;
    position: absolute;
    /* bottom: 0; */
    text-transform: uppercase;
    font-size: .66em;
    top: 0;
}


.deevo_ucf_element label.error {
    color: white;
    padding: .25em .5em;
    right: 0;
    background-color: #f44;
    border-radius: 2px;
    font-size: .6em;
    line-height: 1;
}


.deevo_ucf_element > .field > .ucf_select {
    display: block;
    width: 100%;
}

.deevo_ucf_element .ucf_message_return {
    /* margin: 2em 0; */
}

.deevo_ucf_element .ucf_input {
    padding-left: 3em;
}
.deevo_ucf_element .group {
    position: relative;
}
.deevo_ucf_element .iconUCF {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    left: 1em;
    width: 1em;
    height: 1em;
}

.deevo_ucf_element .field.message .iconUCF.icon-ucf-speech-bubble {
    top: 12%;
}

.deevo_ucf_element .iconUCF.icon-ucf-send {
    margin: 0 0.5em;
    fill: #FFF;
}

.deevo_ucf_element .iconUCF.icon-ucf-check {
    margin: 0 0.5em;
    fill: #FFF;
}

.deevo_ucf_element textarea {
    padding-left: 3em;
    padding-top: 1em;
}

.deevo_ucf_element .sugestoes {
    text-align: right;
    font-size: 0.7em;
    opacity: 0;
    height: 0em;
}

.deevo_ucf_element .sugestoes.empty {
    opacity: 1;
    padding: 1em 0 0 !important;
    height: 2em;
}


.deevo_ucf_element span.sugestao {
    color: blue;
    cursor: pointer;
}

/* DROPZONE
======================================================*/


.deevo_ucf_element .dropzone {
    border: 1px dashed #49B0F5;
    position: relative;
    text-align: center;
    min-height: 6em;
}


.deevo_ucf_element .dropzone .dz-message{
    font-size: .9em;
    color: #49B0F5;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    margin: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.deevo_ucf_element .dropzone a.bt-removefile {
    cursor: pointer;
    width: 2em;
    height: 2em;
    background-color: white;
    position: absolute;
    display: block;
    bottom: 0;
    right: 0;
    z-index: 10;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    opacity: 1;
    background-image: url(../img/icon-close-dark.svg);
    background-size: 40%;
    background-position: center;
    background-repeat: no-repeat;
}
.deevo_ucf_element .dropzone a.bt-removefile:hover {
    -webkit-transform:scale(1.1);
            transform:scale(1.1);
}
.deevo_ucf_element .dropzone a.bt-removefile:active {
    -webkit-transform:scale(1);
            transform:scale(1);
}

.deevo_ucf_element .dropzone .dz-preview.dz-image-preview {
  background: white;
  border: 1px solid #eee;
  position: relative;
  }

.deevo_ucf_element .dropzone .dz-details {
    pointer-events: none;
}

.deevo_ucf_element .dropzone .dz-image {
    display: none;
}

.deevo_ucf_element .dropzone .dz-progress {
    display: none;
}

      


/* CAPTCHA 
======================================================*/
.deevo_ucf_element > .field > .ucf_captcha {
    display: inline-block;
}

.deevo_ucf_element > .field > .ucf_input_captcha {
    width: auto!important;
}

.deevo_ucf_element .field-captcha .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.deevo_ucf_element .realperson-challenge {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 0px;
            flex: 1 0 0;
    padding: .5em 0;
    -webkit-touch-callout: none;
      -webkit-user-select: none;    
      -moz-user-select: none;      
      -ms-user-select: none;       
      user-select: none;           

}
.deevo_ucf_element .realperson-regen{display:none !important}
.deevo_ucf_element input.ucf_captcha.is-realperson {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 1em;
}






/* MAQUINA DE ESTADOS 
======================================================*/

/* Estado normal */
.deevo_ucf_element {
    opacity: 1;
    
    /* max-width: 30em; */
    /* padding: 2em; */
    /* border: 1px solid #eee; */
}

/* Estado sending */
.deevo_ucf_element.sending {
    pointer-events: none;
}

.deevo_ucf_element form{
    -webkit-transition: opacity 0.25s ease-out;
    transition: opacity 0.25s ease-out;
    opacity: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}


.deevo_ucf_element[data-screen-layout="horizontal"] form{
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;    
}

.deevo_ucf_element.sending form{
    opacity:0.33;
/*     -webkit-animation: pulsate 1s ease-out; -webkit-animation-iteration-count: infinite; opacity: 0.0; filter: alpha(opacity=0) */
}



.deevo_ucf_element[data-screen-layout-columns="2"] form {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}


.smallScreen .deevo_ucf_element[data-screen-layout-columns="2"] form{
    display:block
}

.smallScreen .deevo_ucf_element[data-screen-layout-columns="2"] form .coluna{
    padding:0 !important;
}


.deevo_ucf_element[data-screen-layout-columns="2"] form .coluna.coluna1 {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding-right: 1em;
}

.deevo_ucf_element[data-screen-layout-columns="2"] form .coluna.coluna2 {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding-left: 1em;
}





/* Multistate Button 
============================================================================*/
button.SendButton{
    width: 100%;
    display: block;
    height: 2.5em;
    padding: 0;
    color: white;
    border: none;
}
button.SendButton .group{-webkit-transition:all .25s ease-out;transition:all .25s ease-out;position:absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);width: 100%;}

button.SendButton .normal_state{opacity: 1;}
button.SendButton .sending_state{opacity: 0;-webkit-transform: translate(-100%,-50%);transform: translate(-100%,-50%);}
button.SendButton .completed_state{opacity: 0;-webkit-transform: translate(-100%,-50%);transform: translate(-100%,-50%);}

button.SendButton.sending .normal_state{opacity: 0;}
button.SendButton.sending .sending_state{opacity: 1;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
button.SendButton.sending .completed_state{opacity: 0;}

button.SendButton.sending{
    background-color: red !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    -webkit-transform: translateY(3px);
            transform: translateY(3px);
    pointer-events:none;
}

button.SendButton.completed .normal_state{opacity:0!important;}
button.SendButton.completed .sending_state{opacity:0;}
button.SendButton.completed .completed_state{opacity:1;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}

button.SendButton.completed{
    background-color: green !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    -webkit-transform: translateY(3px);
            transform: translateY(3px);
    pointer-events:none;
}

button.SendButton:hover .normal_state .icon {
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
}
button.SendButton.disabled .normal_state {
    opacity:.33
}

button.SendButton .group.normal_state .caption {
    /* display: none; */
}

button.SendButton .group.completed_state .caption {
}