/* Component for displaying form element (label + value) */

.ControlGroup {
    clear: both;
    margin-bottom: 10px;
    padding-bottom: 12px;
}
.ControlGroup.no-bottom {
    padding-bottom: 0;
}

.ControlGroup-title {
	background-color: transparent;
	font-size: 18px;
	font-weight: 600;
	padding: 0;
}

.ControlGroup-label, .ControlGroup label {
    display: block;
    text-align: left;
}

.ControlGroup-label--clear {
    display: block;
    float: left;
    margin-bottom: 5px;
}
.ControlGroup input[type="text"],
.ControlGroup input[type="password"],
.ControlGroup select,
.ControlGroup textarea {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 2px solid #585858;
    background: none;
    color: #000;
}
.ControlGroup input[type="text"],
.ControlGroup input[type="password"],
.ControlGroup select {
    padding: 8px 10px;
    display: block;
    height: 40px;
    font-size: 16px;
    line-height: 16px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='none' stroke='currentColor' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: 95% 14px;
    background-size: 1.2em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding: 0 50px 0 15px;
    height: 50px;
}
.ControlGroup input[type="checkbox"],
.custom-checkbox {
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background-color: var(--form-background);
    /* Not removed via appearance */
    margin: 0;
    font: inherit;
    color: #585858;
    width: 23px;
    height: 23px;
    border: 2px solid #585858;
    border-radius: 5px;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    margin-right: 10px;
}
.ControlGroup input[type="checkbox"]:before,
.custom-checkbox:before {
    content: "";
    width: 12px;
    height: 12px;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--form-control-color);
    /* Windows High Contrast Mode */
    background-color: CanvasText;
}
.ControlGroup input[type="checkbox"]:checked::before,
.custom-checkbox.checked::before {
    transform: scale(1);
}


.ControlGroup textarea {
    font-family: 'Open Sans', Arial,Helvetica,Sans-serif;
    padding: 10px;
    font-size: 14px;
}
.container .ControlGroup-bottom {

    padding-bottom: 0;
}
.ControlGroup-button {
    padding: 12px 40px;
    display: block;
    border: 1px solid #d1d1d1;
    cursor: pointer;
    font-size: 16px;
}
.ControlGroup-button:hover {
    opacity: 0.8;
}
.ControlGroup .ControlGroup-button-lrg {
    padding: 12px 30px ;
}
.ControlGroup .ControlGroup-button-success {
    padding: 15px 30px;

}
.ControlGroupInline.ControlCheckBox label {
    padding: 0;
}
.ControlGroup .CheckBoxList label {
    color:#444
}

.ControlGroup.ControlGroup-buttons input {
    margin-top: 0 !important;
}

.ControlGroup label input[type="checkbox"] {
    float: none;
}

/* Icons */

.ControlGroup .username,
.ControlGroup .password {
    padding-right: 30px;
}
.ControlGroup .username {
        background:url('../interface/input-username.png') no-repeat 96% 50%;
}
.ControlGroup .password {
        background:url('../interface/input-password.png') no-repeat 96% 50%;
}

@media (max-width:767px) {

    .ControlGroup input {
        margin-top: 5px;
    }
    .input-xs-full {width: 100%;}

}

.input-full{ width: 100%;}