@import "../assets/styles/bootstrap/variables";

.field {

    &.field-label {
      color: var(--theme-text) !important;
    }

    &.field-comment {
      font-size: small;
    }

    &.form-group {

        margin-bottom: 30px;


        .radio, .checkbox, .radio-inline, .checkbox-inline {
            color: var(--theme-text) !important;
        }

        .form-control{
        }

        *.help-block {
            font-size: 12px;
        }

        &.has-success {

            .control-label {
                color: var(--theme-text) !important;
                border-color: var(--theme-text) !important;
            }
            *.help-block {
                color: var(--theme-text) !important;
                border-color: var(--theme-text) !important;
            }
            .form-control:focus {
              border-color: var(--theme-text);
              outline: 0;
              box-shadow: none !important;
            }

            .input-group-addon {
                color: $gray;
                border-color: $gray;
                background-color: #ffffff;
            }
        }

        &.has-error {

            .control-label {
                color: var(--theme-text) !important;
            }
            *.help-block {
                color: var(--theme-danger) !important;
                border-color: var(--theme-danger) !important;
                font-weight: bold;
            }
            .form-control:focus {
              border-color: var(--theme-text);
              outline: 0;
            }
            .input-group-addon {
                color: $gray;
                border-color: $gray;
                background-color: #ffffff;
            }

            .form-control{
                border-color: $brand-danger !important;
                background: lighten($brand-danger, 34%);
            }
        }
    }

    .input-group-btn .Button{
        height: 42px;
        min-width: 40px;
    }
}

.Select .Select-menu-outer {
    z-index: 99 !important;
}

form{
    padding-top: 30px;
}

.fieldtype-color{
    position: relative;
    .color-placeholder{
        width: 30px;
        height: 30px;
        border-radius: 15px;
        position: absolute;
        right: 5px;
        margin-top: -36px;
        box-shadow: 0 1px 3px #96a0a8;
    }

    &:hover{
        .twitter-picker{
            display: block;
        }
    }

    .color-picker-button{
        position: absolute;
        right: 10px;
        margin-top: -40px;
        z-index: 2;
        cursor: pointer;
        width: 50px;
        line-height: 35px;
        vertical-align: middle;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        height: 37px;
        user-select: none; 
    }

    .form-group-sm{
        .color-picker-button{
            margin-top: -28px;
            height: 27px;
        }
    }

    .twitter-picker{
        position: absolute !important;
        margin-top: -18px;
        right: -1px;
        z-index: 3;
        display: block;
    }

    .dark-background{
        color: white;
    }
}