/*[ Responsive ]*/

@media (max-width: 576px) {
    .FormContainer-form {
        padding: 40px 15px 48px 15px;
    }

    .FormContainer {
        padding: 0 25px 0 40px;
    }

    .label-FormContainer {
        width: 40px;
    }
}


    /*[Table]*/



.FormTableMargin{

    padding-left: 40px;
    padding-right: 20px;
    padding-bottom: 25px;

}
/* [ RESTYLE TAG ] - Change whole pages of fonts, add border boxe
    html, body and *(any) */

.formStyle{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 40px 55px 48px 55px;
}

/* [Hyperlink] */
.formHyperlink{
        font-size: 14px;
        line-height: 1.7;
        color: #666666;
        margin: 0px;
        transition: all 0.4s;
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        -moz-transition: all 0.4s;
}

.formHyperlink:focus{
    outline: none !important;
}

.formHyperlink:hover{
    text-decoration: none;
}


/* [Input] */
/* [Example Usage]
<div class="wrap-FormInput validate-input">
	<input id="phone" class="FormInput" type="text" name="phone" placeholder="Eg. +1 800 000000">
	<span class="focus-FormInput"></span>
	<label class="label-FormInput" for="phone">
		<span class="lnr lnr-smartphone m-b-2"></span>  //Span is for little logo beside input
    </label>
</div>
*/


.FormInput {
	outline: none;
    border: none;
    display: block;
    width: 100%;
    font-size: 15px;
    color: #333333;
    line-height: 1.2;
    padding: 0 25px 0 60px;
}

.FormInput2 {
    /* height:50px; */
	outline: none;
    border: none;
    display: block;
    width: 100%;
    font-size: 13px;
    color: #333333;
    line-height: 1.2;
    padding: 15px 0 15px 70px;
}

 

.FormInput:focus::-webkit-input-placeholder { color:transparent; }
.FormInput:focus:-moz-placeholder { color:transparent; }
.FormInput:focus::-moz-placeholder { color:transparent; }
.FormInput:focus:-ms-input-placeholder { color:transparent; }
.FormInput:-webkit-input-placeholder { color: #adadad;}
.FormInput::-moz-placeholder { color: #adadad;}
.FormInput:-moz-placeholder { color: #adadad;}
.FormInput:-ms-input-placeholder { color: #adadad;}

textarea.FormInput {
    min-height: 162px;
    padding-top: 22px;
    padding-bottom: 15px;
  }

input.FormInput, select:not([multiple]).FormInput {
    height: 55px;
}

select.FormInput > option {
    line-height: 30px;
    min-height: 30px;
    padding: 5px;
}
select[multiple].FormInput > option:first-child {
    margin-top: 10px;
}

select[multiple].FormInput > option:last-child {
    margin-bottom: 10px;
}

.wrap-FormInput {
    width: 100%;
    position: relative;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    margin-bottom: 15px;
}

.wrap-FormInput2 {
    width: 100%;
    height:33px;
    position: relative;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    margin-bottom: 15px;
}

.label-FormInput {
    font-size: 18px;
    color: #999999;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 60px;
    height: 100%;
    top: 0;
    left: 2px;
}

.label-FormInput.rs1 {
    height: 60px;
}

.label-FormInput.rs2 {
    height: 30px;
}

.wrap-FormInput-WithoutLabel .FormInput {
    padding: 0 25px 0 25px;
}
.wrap-FormInput-WithoutLabel textarea.FormInput {    
    padding-top: 22px;
    padding-bottom: 15px;
}
.wrap-FormInput-WithoutLabel .label-FormInput {
    display: none;
}

.focus-FormInput {
    position: absolute;
    display: block;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    top: -1px;
    left: -1px;
    pointer-events: none;
    border: 1px solid;
    border-radius: 2px;
    border-color: #535353;

    visibility: hidden;
    opacity: 0;

    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;

    -webkit-transform: scaleX(1.1) scaleY(1.3);
    -moz-transform: scaleX(1.1) scaleY(1.3);
    -ms-transform: scaleX(1.1) scaleY(1.3);
    -o-transform: scaleX(1.1) scaleY(1.3);
    transform: scaleX(1.1) scaleY(1.3);
}

.focus-FormInput2 {
    position: relative;
    display: block;
    width: calc(100% + 2px);
    height:10px;
    /* height: calc(100% + 2px); */
    top: -1px;
    left: -1px;
    pointer-events: none;
    border: 1px solid;
    border-radius: 2px;
    /* border-color: #535353; */

    color: #495057;
    background-color: #fff;
    border-color: #80bdff;

    visibility: hidden;
    opacity: 0;

    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;

    -webkit-transform: scaleX(1.1) scaleY(1.3);
    -moz-transform: scaleX(1.1) scaleY(1.3);
    -ms-transform: scaleX(1.1) scaleY(1.3);
    -o-transform: scaleX(1.1) scaleY(1.3);
    transform: scaleX(1.1) scaleY(1.3);
}

.FormInput:focus + .focus-FormInput {
    visibility: visible;
    opacity: 1;

    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.FormInput:focus + .focus-FormInput + .label-FormInput {
    color: #846add;
}

/*[Input Validate]*/

.validate-input {
        position: relative;
}

.alert-validate .focus-FormInput .focus-FormSelect{
    box-shadow: 0 5px 20px 0px rgba(250, 66, 81, 0.1);
    -moz-box-shadow: 0 5px 20px 0px rgba(250, 66, 81, 0.1);
    -webkit-box-shadow: 0 5px 20px 0px rgba(250, 66, 81, 0.1);
    -o-box-shadow: 0 5px 20px 0px rgba(250, 66, 81, 0.1);
    -ms-box-shadow: 0 5px 20px 0px rgba(250, 66, 81, 0.1);
}

.alert-validate::before {
    content: "";
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    position: absolute;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background-color: transparent;
    border: 1px solid #c33b32;
    border-radius: 2px;
    top: -1px;
    left: -1px;
    pointer-events: none;
}


.btn-hide-validate {
    font-size: 18px;
    color: #fa4251;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 100%;
    top: 0px;
    right: -25px;
}

.rs1-alert-validate.alert-validate::before {
    background-color: #fff;
}

.true-validate::after {
    content: "\f26b";
    font-size: 18px;
    color: #00ad5f;

    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 100%;
    top: 0px;
    right: -25px;
}

/*---------------------------------------------*/
@media (max-width: 576px) {
    .btn-hide-validate {
        right: 10px;
    }
    .true-validate::after {
        right: 10px;
    }
}


/*//////////////////////////////////////////////////////////////////
[ Button show / hide ]*/
.btn-hide-FormContainer {
    font-size: 30px;
    color: #fff;
    opacity: 0.6;
    position: absolute;
    right: 0;
    top: -44px;

    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

.btn-hide-FormContainer:hover {
    opacity: 1;
}
/* [Textarea] */
.FormTextarea {
    outline: none;
    border: none;
}

.FormTextarea:focus, .FormInput:focus {
    border-color: transparent !important;
}

.FormTextarea:focus::-webkit-input-placeholder { color:transparent; }
.FormTextarea:focus:-moz-placeholder { color:transparent; }
.FormTextarea:focus::-moz-placeholder { color:transparent; }
.FormTextarea:focus:-ms-input-placeholder { color:transparent; }
.FormTextarea::-webkit-input-placeholder { color: #adadad;}
.FormTextarea:-moz-placeholder { color: #adadad;}
.FormTextarea::-moz-placeholder { color: #adadad;}
.FormTextarea:-ms-input-placeholder { color: #adadad;}



/* [Label] */
.FormLabel {
    display: block;
    margin: 0;
}

/* [Button] */
.FormButton {
	outline: none !important;
	border: none;
	background: transparent;
}

.FormButton:hover {
	cursor: pointer;
}

/* [Iframe] */
.FormIframe {
	border: none !important;
}

.container-FormContainer-form-btn {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 17px;

  }

.container-FormContainer-form-btn.container-FormContainer-form-btn-inline {
    display: inline-block;
    width: auto;
}

.FormContainer-form-btn {
    font-size: 12px;
    color: #fff;
    line-height: 0.5;
    text-transform: uppercase;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    min-width: 160px;
    height: 42px;
    /* border-radius: 21px; */ /*Enable this for round edge*/
    background: #2b2b33;

    /*box-shadow: 0 10px 30px 0px rgba(132, 106, 221, 0.5);*/
    /*-moz-box-shadow: 0 10px 30px 0px rgba(132, 106, 221, 0.5);*/
    /*-webkit-box-shadow: 0 10px 30px 0px rgba(132, 106, 221, 0.5);*/
    /*-o-box-shadow: 0 10px 30px 0px rgba(132, 106, 221, 0.5);*/
    /*-ms-box-shadow: 0 10px 30px 0px rgba(132, 106, 221, 0.5);*/

    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

.FormContainer-form-btn:hover {
    background: #607dc4;
    box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
    -moz-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
    -webkit-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
    -o-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
    -ms-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
}

/* [Popup Container] */

.FormPopUp{
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: rgba(132,106,221,0.8);
    position: relative;
    z-index: 10;
}

.wrap-FormPopUp {
    width: 560px;
    background: #fff;
    border-radius: 3px;
    position: relative;
    margin-top: 40px;
}

  /* [ Title form ] - ** HAVE TO USE WITH style="background-image: url(img.jpg);"***** */
.FormPopUpTitle {
    font-size: 30px;
    color: #fff;
    line-height: 1.2;
    text-transform: uppercase;

    width: 100%;
    min-height: 128px;
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    overflow: hidden;

    padding: 30px 15px 30px 15px;
}

.FormPopUpTitle::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(67,67,67,0.6);
}

  /* [Checkbox and Radio] */
.FormCheck {
    padding-left: 20px;
}
.FormCheck label {
    display: inline-block;
    position: relative;
    padding-left: 5px;
}
.FormCheck label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.FormCheck label::after {
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: 0;
    margin-left: -20px;
    padding-left: 3px;
    padding-top: 1px;
    font-size: 11px;
    color: #555555;
}
.FormCheck input[type="checkbox"] {
    opacity: 0;
}
.FormCheck input[type="checkbox"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.FormCheck input[type="checkbox"]:checked + label::after {
    font-family: 'FontAwesome';
    content: "\f00c";
}
.FormCheck input[type="checkbox"]:disabled + label {
    opacity: 0.65;
}
.FormCheck input[type="checkbox"]:disabled + label::before {
    background-color: #eeeeee;
    cursor: not-allowed;
}
.FormCheck.checkbox-circle label::before {
    border-radius: 50%;
}
.FormCheck.checkbox-inline {
    margin-top: 0;
}

.FormCheck-primary input[type="checkbox"]:checked + label::before {
    background-color: #428bca;
    border-color: #428bca;
}
.FormCheck-primary input[type="checkbox"]:checked + label::after {
    color: #fff;
}

.FormCheck-danger input[type="checkbox"]:checked + label::before {
    background-color: #d9534f;
    border-color: #d9534f;
}
.FormCheck-danger input[type="checkbox"]:checked + label::after {
    color: #fff;
}

.FormCheck-info input[type="checkbox"]:checked + label::before {
    background-color: #5bc0de;
    border-color: #5bc0de;
}
.FormCheck-info input[type="checkbox"]:checked + label::after {
    color: #fff;
}

.FormCheck-warning input[type="checkbox"]:checked + label::before {
    background-color: #f0ad4e;
    border-color: #f0ad4e;
}
.FormCheck-warning input[type="checkbox"]:checked + label::after {
    color: #fff;
}

.FormCheck-success input[type="checkbox"]:checked + label::before {
    background-color: #5cb85c;
    border-color: #5cb85c;
}
.FormCheck-success input[type="checkbox"]:checked + label::after {
    color: #fff;
}


/* The check (Red Big) */
.FormCheck-transparent {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    margin-left: 17px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

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

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 3px;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #fff ;
    border-color:#f8204f;
    border-style:solid;
    border-width:2px;
}
/* When the checkbox is checked, add a blue background */
.FormCheck-transparent input:checked ~ .checkmark {
    background-color: #fff  ;
}

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

/* Show the checkmark when checked */
.FormCheck-transparent input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.FormCheck-transparent .checkmark:after {
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid ;
    border-color:#f8204f;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.cust-btn{
    margin-bottom: 10px;
    background-color: #f8204f;
    border-width: 2px;
    border-color: #f8204f;
    color: #fff;
}
.cust-btn:hover{
    border-color: #f8204f;
    background-color: #fff;
    color: #f8204f;
    border-radius: 20px;
    transform-style: 2s;
}
.FormRadio {
    padding-left: 20px;
}
.FormRadio label {
    display: inline-block;
    position: relative;
    padding-left: 5px;
}
.FormRadio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out;
}
.FormRadio label::after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 11px;
    height: 11px;
    left: 3px;
    top: 3px;
    margin-left: -20px;
    border-radius: 50%;
    background-color: #555555;
    -webkit-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}
.FormRadio input[type="radio"] {
    opacity: 0;
}
.FormRadio input[type="radio"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.FormRadio input[type="radio"]:checked + label::after {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}
.FormRadio input[type="radio"]:disabled + label {
    opacity: 0.65;
}
.FormRadio input[type="radio"]:disabled + label::before {
    cursor: not-allowed;
}
.FormRadio.radio-inline {
    margin-top: 0;
}

.FormRadio-primary input[type="radio"] + label::after {
    background-color: #428bca;
}
.FormRadio-primary input[type="radio"]:checked + label::before {
    border-color: #428bca;
}
.FormRadio-primary input[type="radio"]:checked + label::after {
    background-color: #428bca;
}

.FormRadio-danger input[type="radio"] + label::after {
    background-color: #d9534f;
}
.FormRadio-danger input[type="radio"]:checked + label::before {
    border-color: #d9534f;
}
.FormRadio-danger input[type="radio"]:checked + label::after {
    background-color: #d9534f;
}

.FormRadio-info input[type="radio"] + label::after {
    background-color: #5bc0de;
}
.FormRadio-info input[type="radio"]:checked + label::before {
    border-color: #5bc0de;
}
.radFormRadioio-info input[type="radio"]:checked + label::after {
    background-color: #5bc0de;
}

.FormRadio-warning input[type="radio"] + label::after {
    background-color: #f0ad4e;
}
.FormRadio-warning input[type="radio"]:checked + label::before {
    border-color: #f0ad4e;
}
.FormRadio-warning input[type="radio"]:checked + label::after {
    background-color: #f0ad4e;
}

.FormRadio-success input[type="radio"] + label::after {
    background-color: #5cb85c; 
}
.FormRadio-success input[type="radio"]:checked + label::before {
    border-color: #5cb85c;
}
.FormRadio-success input[type="radio"]:checked + label::after {
    background-color: #5cb85c;
}