/**
 * This CSS file is used by the FormBundle.
 * The CSS file should contain all formatting related to forms, it is used on the following (types of) pages:
 * - Login page
 * - Account settings
 * - Project / page / element update
 *
 */

form .has-error input {
    border-color: var(--validation-error-color);
}

.help-block, .error-summary {
    margin: 5px 0 0;
    color: var(--validation-error-color);
    font-size: 12px;
}

.kv-table-caption {
    border: none;
}

.form-control, localizable-input.form-control input {
    box-sizing: border-box;
    width: 100%;
    display: block;
    min-height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

textarea.form-control {
    height: auto;
}

.form-control[type='date'] {
    max-width: 200px;
}

/*form label {*/

/*    display: none;*/

/*}*/

.control-label {
    font-size: 14px;
    line-height: 17px;
    font-weight: 600;
    min-width: 30%;
}

.required .control-label.has-star::after {
    content: '*';
    color: red;
}

.hint-block {
    font-size: 12px;
    margin-top: 3px;
    color: grey;
}

.btn-block {
    display: block;
    width: 100%;
}

/*.form-group .btn-group {*/

/*    padding-left: 15px;*/

/*    padding-right: 15px;*/

/*}*/

.form-group,
.form-horizontal .form-group
{
    margin-bottom: 0.5rem;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.nav-tabs {
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 20px;
}

.nav-tabs li {
    overflow: hidden;
    vertical-align: middle;
}

.nav-tabs li a {
    padding: 10px;
    margin-bottom: 0;
}

.nav-tabs li.active {
    border-radius: 5px;
}

.nav-tabs li.active a {
    background-color: var(--primary-button-background-color);
    color: var(--primary-button-color);
}

.nav-tabs li {
    display: inline-block;
}

/** Popover align form buttons to the button. */

.popover .form .btn-group {
    left: var(--padding);
    right: var(--padding);
}

.bootstrap-switch {
    height: 34px;
}

/**
 * BEGIN CSS for formbuttons widget
 */

.formbuttons {
    display: block;
}

.formbuttons.orientation-right {
    float: right;
}

.formbuttons>*, .popover .formbuttons>* {
    display: inline-block;
}

.formbuttons.orientation-block>* {
    display: block;
    width: 100%;
    float: none;
    border-radius: 6px !important;
}

.formbuttons.orientation-block>a {
    text-align: right;
}

.form-horizontal .row .form-group.formbuttons-container {
    display: block;
}

/**
 * END CSS for formbuttons widget
 */

/**
 * HTML RADIO
 */

.pretty.p-switch input:checked~.state.p-success:before {
    border-color: var(--primary-color);
}

.pretty input:checked~.state.p-success label:after, .pretty.p-toggle .state.p-success label:after {
    background-color: var(--primary-color) !important;
}

.pretty input:checked~.state.p-danger label:after, .pretty.p-toggle .state.p-danger label:after {
    background-color: #bdc3c7 !important;
}

.form-horizontal {
    overflow: auto;
}

.form-horizontal .row {
    margin: 0 0 25px 0;
    padding: 0;
    float: left;
    width: 100%;
}

.form-horizontal input[type='text'], .form-horizontal .select2 {
    margin: 0;
    width: 100%;
}

input.form-control[type="color"] {
    max-width: 40px;
    width: 40px;
    padding: 5px;
    height: 40px;
}

.form-horizontal .col-sm-6 label {
    padding: 7px 15px 0 5px;
    max-width: none;
}

.form-horizontal .form-group .col-md-3 {
    word-break: break-word;
    padding: 0;
    margin-right: 20px;
    width: max-content;
    min-width: 110px;
}

.form-horizontal .form-group .col-md-9 {
    width: 100%;
}

.form-horizontal .row .form-group {
    display: flex;
    align-items: flex-start;
}

.form-horizontal .row div {
    padding: 0;
}

.form-content table {
    margin-bottom: 0;
}

.panel-collapse.collapse {
    display: none;
}

.panel-collapse.collapse.show {
    display: block;
}

.collapse-toggle {
    border-bottom: 2px solid black;
}

.collapse-toggle:hover {
    border-color: var(--primary-color);
}

.collapse-toggle::after {
    content: '-';
    margin-left: 5px;
}

.collapse-toggle.collapsed::after {
    content: '+';
}

form .col-sm-6 {
    width: 50%;
    float: left;
}

form .col-md-8 {
    width: 66%;
}

form .col-md-4 {
    width: 33%;
}