/*****************************
 * FORMULÁRIO COM O ESTILO PERSONALIZADO
 * FIELDS DO NINJA FORMS
 * Necessário o id #nf-custom-fecap (identificador personalizado)
 * colocar o id na div que contém o shortcode do form
 ******************************/

 /* Geral */
 #nf-custom-fecap {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
 }

 #nf-custom-fecap .nf-form-cont {
   width: 100%;
 }

 #marketing #nf-custom-fecap .nf-form-cont {
   width: unset;
 }

 #nf-custom-fecap #ninja_forms_required_items,
 #nf-custom-fecap .nf-field-container {
   margin-bottom: unset;
   clear: none;
 }

 #nf-custom-fecap .nf-form-content .listselect-wrap .nf-field-element div,
 #nf-custom-fecap .nf-form-content .ninja-forms-field {
   font-family: 'Dosis', sans-serif;
   font-size: 1rem;
   padding: 0 12px;
 }

 /* Campos marcados com * são requeridos */
 #nf-custom-fecap .nf-form-fields-required {
   font-size: 0.8rem;
 }

 /* Label */
 #nf-custom-fecap .nf-field-label .nf-label-span,
 #nf-custom-fecap .nf-field-label label {
   padding: 0;
   margin-top: 0.3rem;
   font-family: 'Poppins', sans-serif;
   font-size: 12px;
   font-weight: 600;
   z-index: 1;
 }

 #nf-custom-fecap .nf-form-content .label-above .nf-field-label,
 #nf-custom-fecap .nf-form-content .label-below .nf-field-label,
 #nf-custom-fecap .nf-form-content .label-hidden .nf-field-label {
   margin-bottom: 0.3rem;
   padding: 0;
 }

 /* Inputs, select e Textarea */
 #nf-custom-fecap .nf-form-content .listselect-wrap .nf-field-element div,
 #nf-custom-fecap .nf-form-content input.ninja-forms-field,
 #nf-custom-fecap .nf-form-content select.ninja-forms-field:not([multiple]) {
   height: 2.5rem;
 }

 #nf-custom-fecap .nf-form-content input[type=checkbox].ninja-forms-field,
 #nf-custom-fecap .nf-form-content input[type=radio].ninja-forms-field {
   height: auto;
 }

 #nf-custom-fecap .nf-form-content .list-select-wrap .nf-field-element>div,
 #nf-custom-fecap .nf-form-content input:not([type=button]),
 #nf-custom-fecap .nf-form-content textarea {
   background: #fff;
   border: 1px solid #0faa75;
   border-radius: 30px;
   box-shadow: none;
   color: #212529;
   transition: all .5s;
 }

 #nf-custom-fecap .nf-field-element .hour,
 #nf-custom-fecap .nf-field-element .minute {
   margin-right: 5px;
   width: 5rem;
   height: 2.5rem;
   background: #fff;
   font-family: 'Dosis', sans-serif;
   font-size: 1rem;
   color: #787878;
   text-align: center;
   border: 1px solid #0faa75;
   border-radius: 30px;
 }

 #nf-custom-fecap .nf-form-content .listcountry-wrap .nf-field-element select:focus,
 #nf-custom-fecap .nf-form-content .list-select-wrap>div div:focus,
 #nf-custom-fecap .nf-form-content .list-select-wrap .nf-field-element>div:focus,
 #nf-custom-fecap .nf-form-content input:not([type=button]):focus,
 #nf-custom-fecap .nf-form-content textarea:focus {
   background: #fff;
   border-color: #0faa75;
   outline: none;
 }

 /* Textarea */
 #nf-custom-fecap .nf-form-content textarea.ninja-forms-field {
   height: 7rem;
   resize: none;
 }

 /* select - lista de paises */
 #nf-custom-fecap .nf-form-content .listcountry-wrap .nf-field-element select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background: #fff;
   border: 1px solid #0faa75;
   border-radius: 30px;
 }

 /* Icone do select - lista de paises */
 #nf-custom-fecap .nf-form-content .listcountry-wrap>div div::after,
 #nf-custom-fecap .nf-form-content .list-select-wrap>div div::after {
   content: "\f078";
   font-family: FontAwesome;
   font-size: 20px;
   color: #0faa75;
   position: absolute;
   right: 10px;
   bottom: 0;
   height: 2.5rem;
   line-height: 40px;
 }

 /* multiselect */
 #nf-custom-fecap .nf-form-content .listmultiselect-wrap select[multiple] {
   -webkit-appearance: normal;
   -moz-appearance: normal;
   appearance: normal;
   background: #fff;
   border: 1px solid #0faa75;
   border-radius: 30px;
   padding: 12px;
 }

 #nf-custom-fecap .nf-form-content .listmultiselect-wrap select[multiple]:focus {
   background: #fff;
 }

 #nf-custom-fecap .nf-form-content .listmultiselect-wrap select[multiple] option:hover {
   background: #def7ee;
   color: #444444;
 }

 /* scroll multiselect */
 #nf-custom-fecap .nf-form-content .listmultiselect-wrap select[multiple]::-webkit-scrollbar-track,
 #nf-custom-fecap .nf-form-content .listmultiselect-wrap select[multiple]::-webkit-scrollbar {
   width: 30px;
   background-color: #cecece;
   border-radius: 0 30px 30px 0;
 }

 #nf-custom-fecap .nf-form-content .listmultiselect-wrap select[multiple]::-webkit-scrollbar-thumb {
   background-color: #0faa75;
 }

 #nf-custom-fecap .nf-form-content .listmultiselect-wrap select[multiple]:focus option:checked {
   background-image: linear-gradient(0deg, #0faa75 0%, #0faa75 100%);
   color: #fff;
 }

 #nf-custom-fecap .nf-form-content .listmultiselect-wrap select[multiple]::-webkit-scrollbar-thumb:hover {
   background-color: #17b37c;
 }

 #nf-custom-fecap .nf-form-content .listmultiselect-wrap select[multiple]::-webkit-scrollbar-button:single-button {
   background-color: #cecece;
   display: block;
   border-style: solid;
   height: 30px;
   width: 30px;
 }

 /* scroll multiselect - setas */
 #nf-custom-fecap .nf-form-content .listmultiselect-wrap select[multiple]::-webkit-scrollbar-button:single-button:vertical:decrement {
   border-width: 0 15px 15px 15px;
   border-radius: 0 30px 0 0;
   border-color: transparent transparent #949494 transparent;
 }

 #nf-custom-fecap .nf-form-content .listmultiselect-wrap select[multiple]::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
   border-color: transparent transparent #888888 transparent;
 }

 #nf-custom-fecap .nf-form-content .listmultiselect-wrap select[multiple]::-webkit-scrollbar-button:single-button:vertical:increment {
   border-width: 15px 15px 0 15px;
   border-radius: 0 0 30px 0;
   border-color: #949494 transparent transparent transparent;
 }

 #nf-custom-fecap .nf-form-content .listmultiselect-wrap select[multiple]::-webkit-scrollbar-button:vertical:single-button:increment:hover {
   border-color: #888888 transparent transparent transparent;
 }

 /* Icone de alerta (campo requerido) */
 #nf-custom-fecap .nf-error.field-wrap .nf-field-element:after {
   background: #e80000;
   color: #fff;
   font-family: FontAwesome;
   font-size: 20px;
   content: "\f12a";
   position: absolute;
   top: 1px;
   right: 0px;
   bottom: 1px;
   border-radius: 0 30px 30px 0;
   height: 95%;
   width: 50px;
   line-height: 2.5rem;
   text-align: center;
   transition: all .5s;
 }

 /* Icone de alerta (campo corrigido) */
 #nf-custom-fecap .nf-pass.field-wrap .nf-field-element:after {
   background: green;
   color: #fff;
   font-family: FontAwesome;
   font-size: 20px;
   content: "\f00c";
   position: absolute;
   top: 1px;
   right: 0px;
   bottom: 1px;
   border-radius: 0 30px 30px 0;
   height: 95%;
   width: 50px;
   line-height: 2.5rem;
   text-align: center;
   transition: all .5s;
 }

 /* Mensagem Erro e Required */
 #nf-custom-fecap .nf-error-msg,
 #nf-custom-fecap .ninja-forms-req-symbol {
   color: #e80000;
 }


 /* Botões */
 #nf-custom-fecap .nf-form-content button,
 #nf-custom-fecap .nf-form-content input[type=button],
 #nf-custom-fecap .nf-form-content input[type=submit] {
   padding: 5px 25px;
   height: 2.5rem;
   background: #0faa75;
   font-family: 'Poppins', sans-serif;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: .15rem;
   font-weight: 600;
   border: 0;
   border-radius: 30px;
   transition: all .5s;
   float: right;
 }

 #nf-custom-fecap .nf-form-content button:hover,
 #nf-custom-fecap .nf-form-content input[type=button]:hover,
 #nf-custom-fecap .nf-form-content input[type=submit]:hover {
   background: #0def7d;
   border: 0;
   color: #12733e;
   transition: all .5s;
 }


 /* Checkbox e Radio button */
 #nf-custom-fecap .list-checkbox-wrap .nf-field-element li,
 #nf-custom-fecap .list-checkbox-wrap .nf-field-element ul,
 #nf-custom-fecap .list-image-wrap .nf-field-element li,
 #nf-custom-fecap .list-image-wrap .nf-field-element ul,
 #nf-custom-fecap .list-radio-wrap .nf-field-element li,
 #nf-custom-fecap .list-radio-wrap .nf-field-element ul {
   font-family: 'Dosis', sans-serif;
   font-size: 1rem;
   list-style: none !important;
   padding: 0 !important;
 }

 /* Checkbox */
 #nf-custom-fecap .checkbox-wrap .nf-field-element label:before,
 #nf-custom-fecap .checkbox-wrap .nf-field-label label:before,
 #nf-custom-fecap .listcheckbox-wrap .nf-field-element label:before,
 #nf-custom-fecap .listcheckbox-wrap .nf-field-label label:before {
   color: #f7f7f7;
   opacity: 0;
   transition: all .5s;
 }

 #nf-custom-fecap .checkbox-wrap .nf-field-element label.nf-checked-label:before,
 #nf-custom-fecap .checkbox-wrap .nf-field-label label.nf-checked-label:before,
 #nf-custom-fecap .listcheckbox-wrap .nf-field-element label.nf-checked-label:before,
 #nf-custom-fecap .listcheckbox-wrap .nf-field-label label.nf-checked-label:before {
   color: #0faa75;
   opacity: 1;
   transition: all .5s;
 }

 /* Radio Button */
 #nf-custom-fecap .listradio-wrap .nf-field-element label:after {
   border-radius: 50%;
   content: "";
   width: 18px;
   height: 18px;
   position: absolute;
   left: -32px;
   bottom: 1px;
   top: .05em;
 }

 #nf-custom-fecap .listradio-wrap .nf-field-element label.nf-checked-label:before {
   border-radius: 50%;
   content: "";
   height: 10px;
   width: 10px;
   position: absolute;
   left: -28px;
   bottom: 5px;
   z-index: 2;
   top: 0.25em;
 }

 #nf-custom-fecap .listradio-wrap .nf-field-element label.nf-checked-label:after {
   border-color: #0faa75;
   transition: all .5s;
 }

 #nf-custom-fecap .listradio-wrap .nf-field-element label.nf-checked-label:before {
   background: #0faa75;
 }

 /*****************************
  *  FORM
  ******************************/
 .fcp-form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }

 .fcp-form .form-group {
   margin-bottom: 0;
 }

 .fcp-form-content {
   font-size: 1.2rem;
 }

 .form-control {
   height: inherit;
 }

 .form-label {
   font-size: 16px;
   font-weight: 500;
 }

 .form-check-label {
   font-size: 14px;
   display: block;
 }

 .form-check-inline {
   padding-left: 2em;
   display: inline-block;
 }

 .form-check-inline .form-check-input {
   float: left;
   margin-top: 3px;
   margin-left: -1.5em;
 }

 .form-control,
 .form-select {
   padding: 12px;
   color: var(--f-global-color-guppie-green);
   font-weight: 600;
   line-height: 1.5;
   border-radius: 30px;
   border: none;
 }

 .form-control:focus,
 .form-select:focus,
 .form-check-input:focus {
   border: none;
   outline: none;
   color: var(--f-global-color-guppie-green);
   -webkit-box-shadow: 0 0 2px 2px var(--f-global-color-guppie-green);
   box-shadow: 0 0 2px 2px var(--f-global-color-guppie-green);
 }

 .form-control::-webkit-input-placeholder,
 .form-check-input::-webkit-input-placeholder {
   color: var(--f-global-color-guppie-green);
   opacity: 1;
 }

 .form-control::-moz-placeholder,
 .form-check-input::-moz-placeholder {
   color: var(--f-global-color-guppie-green);
   opacity: 1;
 }

 .form-control:-ms-input-placeholder,
 .form-check-input:-ms-input-placeholder {
   color: var(--f-global-color-guppie-green);
   opacity: 1;
 }

 .form-control::-ms-input-placeholder,
 .form-check-input::-ms-input-placeholder {
   color: var(--f-global-color-guppie-green);
   opacity: 1;
 }

 .form-control::placeholder,
 .form-check-input::placeholder {
   color: var(--f-global-color-guppie-green);
   opacity: 1;
 }

 .form-control::-ms-input-placeholder,
 .form-check-input::-ms-input-placeholder {
   color: var(--f-global-color-guppie-green);
 }

 .form-check-input:checked {
   background-color: var(--f-global-color-guppie-green);
   border-color: var(--f-global-color-guppie-green);
 }

 form span.error {
   color: var(--f-asa-color-banana-yellow);
   font-size: 0.875rem;
   font-weight: 500;
 }

 @media (max-width: 767.98px) {

   .form-label,
   .form-check-label {
     font-size: 14px;
   }

   .form-control,
   .form-select {
     font-size: 14px;
     line-height: 1.4;
   }
 }