:root {
    --be-color-value:#000;
    --be-color-default: #ced4da; 
    --be-color-hover: #0272cf;
    --be-color-focus: #00569D;
    --be-color-error: #ff0000;
    --be-color-title: #000;    
    --be-color-background:#f4f6fa6b;

    --be-error-font-size: 12px;
    --be-control-label-font-size: 14px;
    --be-control-value-font-size: 14px;   

    --be-control-border: 2px solid var(--be-color-default);
    --be-control-border-hover: 2px solid var(--be-color-hover);
    --be-control-border-focus: 2px solid var(--be-color-focus);
    --be-control-border-error: 2px solid var(--be-color-error);    

    --be-dropzone-border: 2px dashed var(--be-color-default);
    --be-dropzone-border-hover: 2px dashed var(--be-color-hover);
    --be-dropzone-border-error: 2px dashed var(--be-color-error);
    --be-dropzone-border-focus:2px dashed var(--be-color-focus);
    --be-dropzone-caption-font-size: 18px;
    --be-dropzone-thumb-font-size: 12px;

    --be-border-transition: border-color .1s;
    --be-color-transition: color .1s;
    --be-fill-transition: fill .1s;
}
.form-group {
    margin-bottom: 20px;
}


.form-control:-webkit-autofill, .form-control:-webkit-autofill:focus{    
    transition: background-color 0s 600000s, color 0s 600000s !important;
}
.form-outline .form-control{background-color: transparent;}
.form-control::placeholder {
    color: var(--be-color-default);
    opacity: 1;
  }
  
.form-control::-ms-input-placeholder {
    color: var(--be-color-default);
}


.form-group .multiple-wrapper .multiple-row {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.form-group .multiple-wrapper .multiple-row .form-control {
    width: 100%;
}

.form-group .multiple-wrapper .multiple-row .remove-multiple-row {
    cursor: pointer;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
}

.form-group .multiple-wrapper .multiple-row .remove-multiple-row svg {
    width: 50%;
}

.form-group .multiple-wrapper .multiple-row .remove-multiple-row svg path {
    fill: var(--be-color-default);
    transition: var(--be-fill-transition);
}

.form-group .multiple-wrapper .multiple-row:hover .remove-multiple-row svg path {
    fill: var(--be-color-hover);
}

.form-group .multiple-wrapper .multiple-row:focus-within .remove-multiple-row svg path {
    fill: var(--be-color-focus);
}


.form-group-error .multiple-wrapper .multiple-row .remove-multiple-row svg path {
    fill: var(--be-color-error);
}

.form-outline .form-group .checks-wrapper .form-check input[type=checkbox]+label:before{background-color: transparent;}
.form-outline .form-group .radio-wrapper  .form-check input[type=radio]+label:before{background-color: transparent;}

.multiple-add-button-wrapper {
    text-align: right;
    margin-top: -5px;
}

.multiple-add-button {
    font-size: 12px;
    line-height: 130%;
    color: var(--be-color-default);
    transition: var(--be-color-transition);
    cursor: pointer;
    position: relative;
}

.multiple-add-button:hover {
    color: var(--be-color-hover);
}

.multiple-add-button svg {
    margin-left: 3px;
    width: 10px;
    height: 10px;
    display: inline-block;
    vertical-align: middle;
}

.multiple-add-button svg path {
    fill: var(--be-color-default);
    transition: var(--be-fill-transition);
}

.multiple-add-button:hover svg path {
    fill: var(--be-color-hover);
}

.form-group .multiple-wrapper .multiple-row:first-child .remove-multiple-row {
    display: none;
}

.form-group .multiple-wrapper .multiple-row:first-child .form-control {
    width: 100%;
}

.form-group .dropzone {
    border: var(--bs-border-width) dashed var(--bs-border-color);
    border: var(--be-dropzone-border);
    background-color: var(--be-color-background);
    transition: var(--be-border-transition);
    border-radius: 4px;
    width: 100%;
    align-items: center;
    margin-top: 5px;
    display: block;
}

.form-outline .form-group .dropzone{background-color: transparent;}

.form-group .dropzone:hover {
    border: var(--be-dropzone-border-hover);
}

.form-group .dropzone.dropmove {
    border: var(--be-dropzone-border-focus);
}

.form-group .dropzone-caption {
    display: flex;
    justify-content: center;
    padding-top: 13px;
    padding-right: 20px;
    padding-bottom: 13px;
    align-items: center;
    cursor: pointer;
    position: relative;
}


.dropzone-btn {
    color: var(--be-color-default);
    font-size: var(--be-dropzone-caption-font-size);
    transition: var(--be-color-transition);
    padding: 10px;
}

.dropzone-btn svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.dropzone-btn svg path {
    fill: var(--be-color-default);
    transition: var(--be-fill-transition);
}

.form-group .dropzone:hover .dropzone-btn,
.form-group .dropzone.dropmove .dropzone-btn {
    color: var(--be-color-hover);
}

.form-group .dropzone:hover .dropzone-btn svg path,
.form-group .dropzone.dropmove .dropzone-btn svg path {
    fill: var(--be-color-hover);
}

.form-group .dropzone input {
    display: none;
}

.form-group .dropzone-thumb {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.form-group .dropzone-file-name,
.form-group .dropzone-file-size {
    font-size: var(--be-dropzone-thumb-font-size);
    color: var(--be-color-value);
    transition: var(--be-color-transition);
}

.form-group .dropzone-file-name {
    word-break: break-all;
    max-width: calc(100% - 100px);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.form-group .dropzone-file-name span {
    word-break: break-all;
    width: calc(100% - 26px);
}

.form-group .dropzone-file-name svg {
    width: 16px;
    margin-right: 10px;
}


.form-group .dropzone-file-name svg path {
    fill: var(--be-color-focus);
}

.form-group .thumb-error .dropzone-file-name svg path {
    fill: var(--be-color-error);
}


.form-group .dropzone-controls {
    display: flex;
    align-items: center;
}

.form-group .dropzone-file-remove {
    display: block;
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin-left: 7px;
}
.form-group .dropzone-file-remove svg{vertical-align: top;}

.form-group .dropzone-file-remove svg path {
    fill: var(--be-color-default);
}
.form-group .dropzone-file-remove:hover svg path {
    fill: var(--be-color-hover);
}

.form-group .thumb-error .dropzone-file-remove svg path {
    fill: var(--be-color-error);
}

.form-group .thumb-error .dropzone-file-name {
    color: var(--be-color-error);
}

.captha_group {
    display: flex;
    gap: 10px;
}

.global-errors:empty {
    display: none;
}

.global-errors {
    margin-bottom: 20px;
}

.global-errors span.error {
    display: block;
    margin-top: 5px;
    padding: 5px;
    color: var(--be-color-error);
    font-size: var(--be-error-font-size);
    border: var(--be-control-border-error);
    background: #ff000024;
}

.form-outline{
    position: relative;
    width: 100%;
}
.form-outline .form-control~.form-notch {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    text-align: left;
    pointer-events: none;
}
.form-outline .form-control~.form-notch div {
    pointer-events: none;
    border: var(--be-control-border);
    box-sizing: border-box;
    background: rgba(0,0,0,0);
    transition: all .2s linear;
}

.form-outline .form-control:hover~.form-notch div {
    border: var(--be-control-border-hover);
}
.form-outline .form-control:focus~.form-notch div {
    border: var(--be-control-border-focus);
}

.form-outline .form-control~.form-notch .form-notch-leading {
    left: 0;
    top: 0;
    height: 100%;
    width: 0.5rem;
    border-right: none!important;
    border-radius: 0.25rem 0 0 0.25rem;
}
.form-outline .form-control~.form-notch .form-notch-middle {
    flex: 0 0 auto;
    width: auto;
    max-width: calc(100% - 1rem);
    height: 100%;
    border-right: none!important;
    border-left: none!important;   
}
.form-outline .form-control~.form-notch .form-notch-trailing {
    flex-grow: 1;
    height: 100%;
    border-left: none!important;
    border-radius: 0 0.25rem 0.25rem 0;
}
.form-outline .form-control~.form-label {
    position: absolute;
    font-size: var(--be-control-label-font-size);
    line-height: 130%;
    color: var(--be-color-title);
    font-weight: normal;
    top: 0;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    left: 12px;
    pointer-events: none;
    transform-origin: 0 0;
    transition: all .2s ease-out;
    margin-bottom: 0;
    padding-top:12px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.form-outline .form-control, .form-outline .form-control:hover, .form-outline .form-control:focus{border: none;}
.form-group-error .form-outline .form-control, .form-group-error .form-outline .form-control:hover, .form-group-error .form-outline .form-control:focus{border: none;}
.form-outline .form-control:focus~.form-notch .form-notch-middle, .form-outline .form-control.active~.form-notch .form-notch-middle {
   
    border-top: 1px solid rgba(0,0,0,0);
}
.form-outline .form-control:focus~.form-label, .form-outline .form-control.active~.form-label{
    transform: translateY(-1rem) translateY(0.1rem) scale(0.8);
    color: var(--be-color-focus);
}
.form-outline select.form-control{border: var(--be-control-border);}
.form-outline select.form-control:hover{border: var(--be-control-border-hover);}
.form-outline select.form-control:focus{border: var(--be-control-border-focus);}

.beform{position: relative;}
.beform .form-overlay {
    position: absolute;
    z-index: 2;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.beform .form-popup {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 2px 15px -3px, rgba(0, 0, 0, 0.04) 0px 10px 20px -2px;
    max-width: 90%;
}

.form-popup-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    font-weight: bold;
}

.form-popup-success .form-popup-header {
    color: green;
}

.form-popup-error .form-popup-header {
    color: var(--be-color-error);
}

.form-popup-body {
    padding: 20px;
}

.form-popup-footer {
    padding: 15px 20px;   
    text-align: center;
}

.form-popup-footer .btn {
    min-width: 100px;
}

.form-loader {
    position: relative;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.form-loader-progress {
    transition: all .3s ease-in-out;
    height: 5px;
    background-color: var(--be-color-hover);
    width: 0px;
}

.step {
    border: var(--be-control-border);
}

.step-header {
    padding: 10px 20px;
    background-color: var(--be-color-default);
}

.step-body {
    padding: 20px 20px;
}

.step-footer {
    padding: 10px 20px;
}

.step {
    display: none;
}

.step.active {
    display: block;
}


/**start remove if use bootstrap style*/
.form-group .label, .form-wrapper div>label{
    font-size: var(--be-control-label-font-size);
    line-height: 130%;
    color: var(--be-color-title);
    font-weight: normal;
    margin-bottom: 5px;
    display: block;
}


.form-control {
    border: var(--be-control-border);
    border-radius: 3px;
    padding: 12px;
    font-size: var(--be-control-value-font-size);
    color: var(--be-color-value);   
    line-height: 120%;
    display: block;
    width: 100%;
    outline: none;
    box-sizing: border-box;
    background-color: var(--be-color-background);
    transition: var(--be-border-transition);
}
.form-group textarea.form-control {
    min-width: 100%;
    max-width: 100%;
    min-height: 100px;
    max-height: 400px;
}
.form-control:hover {
    border: var(--be-control-border-hover);
}
.form-control:focus {
    border: var(--be-control-border-focus);
    box-shadow: none;
    outline: none;
}
.form-group .multiple-wrapper .multiple-row:hover:not(.multiple-row-outline) input {
    border: var(--be-control-border-hover);
}

.form-group .multiple-wrapper .multiple-row:hover:not(.multiple-row-outline) textarea {
    border: var(--be-control-border-hover);
}

.form-group .multiple-wrapper .multiple-row:focus-within:not(.multiple-row-outline) input {
    border: var(--be-control-border-focus);
}
.form-group .multiple-wrapper .multiple-row:focus-within:not(.multiple-row-outline) textarea {
    border: var(--be-control-border-focus);
}
.form-group .multiple-wrapper .multiple-row:focus-within .remove-multiple-row svg path {
    fill: var(--be-color-focus);
}
.form-check{margin: 0px; padding: 0px; margin-bottom:5px;}
.form-group .checks-wrapper .form-check input[type=checkbox] {
    display: none;
}
.form-group .checks-wrapper .form-check input[type=checkbox]+label {
    position: relative;
    margin-bottom: 5px;
    display: block;
    line-height: 20px;
    padding-left: 30px;
    font-size: var(--be-control-value-font-size);
    color: var(--be-color-value);
}
.form-group .checks-wrapper .form-check input[type=checkbox]+label:before {
    border: var(--be-control-border);
    background-color: var(--be-color-background);
    transition: var(--be-border-transition);
    border-radius: 2px;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0px;
    top: 0px;
    content: "";
    box-sizing: border-box;
}
.form-group .checks-wrapper .form-check input[type=checkbox]+label:hover:before {
    border: var(--be-control-border-hover);
}
.form-group .checks-wrapper .form-check input[type=checkbox]:checked+label:before {
    border: var(--be-control-border-focus);
}
.form-group .checks-wrapper .form-check input[type=checkbox]:checked+label:after {
    border-left: var(--be-control-border-focus);
    width: 11px;
    height: 5px;
    position: absolute;
    left: 5px;
    top: 6px;
    content: "";
    border-bottom: var(--be-control-border-focus);
    transform: rotate(-45deg);
    box-sizing: border-box;
}
.form-group .radio-wrapper .form-check input[type=radio] {
    display: none;
}
.form-group .radio-wrapper .form-check input[type=radio]+label {
    position: relative;
    margin-bottom: 5px;
    display: block;
    line-height: 20px;
    padding-left: 30px;
    font-size: var(--be-control-value-font-size);
    color: var(--be-color-value);
}
.form-group .radio-wrapper .form-check input[type=radio]+label:before {
    border: var(--be-control-border);
    background-color: var(--be-color-background);
    transition: var(--be-border-transition);
    border-radius: 100%;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0px;
    top: -1px;
    content: "";
}
.form-group .radio-wrapper .form-check input[type=radio]+label:hover:before {
    border: var(--be-control-border-hover);
}
.form-group .radio-wrapper .form-check input[type=radio]:checked+label:before {
    border: var(--be-control-border-focus);
}
.form-group .radio-wrapper .form-check input[type=radio]:checked+label:after {
    background: var(--be-color-focus);
    width: 10px;
    height: 10px;
    border-radius: 100%;
    position: absolute;
    left: 5px;
    top: 4px;
    content: "";
}
.form-group-error .form-control {
    border: var(--be-control-border-error);
}
.form-group.form-group-error .checks-wrapper .form-check input[type=checkbox]+label:before {
    border: var(--be-control-border-error);
}
.form-group.form-group-error .radio-wrapper .form-check input[type=radio]+label:before {
    border: var(--be-control-border-error);
}
.form-group span.error {
    display: block;
    color: var(--be-color-error);
    font-size: var(--be-error-font-size);
    margin-top: 5px;
    padding: 0px !important;
    padding-left: 0px;
}
.form-group ul.error{color: var(--be-color-error); font-size: var(--be-error-font-size); margin:0px; padding: 0px;}
.form-group ul.error li{list-style: none;}

.form-group .dropzone {
    border: var(--bs-border-width) dashed var(--bs-border-color);
    border: var(--be-dropzone-border);
    background-color: var(--be-color-background);
    transition: var(--be-border-transition);
    border-radius: 4px;
    width: 100%;
    align-items: center;
    margin-top: 5px;
    display: block;
}