@import 'color-palette';
@import "partials/_ember-movenium-accordion";
@import "partials/_ember-movenium-hdfile-field";
@import "partials/_ember-movenium-tag-input-field";
@import "partials/_ember-movenium-signature-field";
@import "partials/_ember-movenium-form-report";
@import "partials/_ember-movenium-template-wizard";
@import "partials/_ember-movenium-databasearray-field";
@import "partials/_ember-movenium-radio-field";
@import "partials/_ember-movenium-number-field";
@import "partials/_ember-movenium-datetime-field";
@import "partials/_ember-movenium-form-add";
@import "partials/_ember-movenium-icons";
@import "partials/_ember-movenium-modal";
@import "partials/_ember-movenium-wizard";
@import "partials/_ember-movenium-filters";
@import "ember-power-select";
@import "ember-power-calendar";
@import "partials/_ember-movenium-date-range-picker";
@import "ember-modal-dialog/ember-modal-structure";
@import "ember-modal-dialog/ember-modal-appearance";

.ember-movenium-has-error {
    color: $warning-color

}

.ember-movenium-signature-canvas {
    margin: auto
}

.ember-modal-dialog{
    padding: 0;
    border-radius: unset;
}
.ember-movenium-modal-dialog-header {
    width: 100%;
    padding: 15px;
    border-bottom: 1px solid $border-light;
    display: flex;
    justify-content: space-between;
}
.ember-movenium-modal-dialog-footer {
    width: 100%;
    padding: 15px;
    border-top: 1px solid $border-light;
    display: flex;
    justify-content: flex-end;
    & button {
        & +button {
            margin-left: 10px
        }
        padding: 6px 12px;
        max-width: 15%;
    }
}

.ember-movenium-list-group {
    list-style: none;
    padding-inline-start: 0;
    margin-bottom: 20px;
    & .title {
        font-size: 30px;
        text-align: center;
    }

}
.ember-movenium-list-group-item {
    border: 1px solid $border-light;
    padding: 10px 15px;

    & + .ember-movenium-list-group-item  {
        border-top: none;
    }

    &.ember-list-group-item-success {
        border-color: $accent1-primary;
        background-color: $alert-success-bg;
        color: $alert-success-text;
        &:hover {
            background-color: $alert-success-bg;
        }
    }

    &:first-child {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    &:last-child {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
}



.ember-movenium-bootstrap-container {
    .x-toggle-component{
        justify-content: left !important;
        .x-toggle-component label.on-label {
            padding-left: 0.5rem;
        }
    }

    &.has-error {
        & input, select, textarea, .ember-power-select-trigger {
            border-bottom: 1px solid $warning-color;
        }
    }
    padding:0;
    & input, select, textarea, .ember-power-select-trigger {
        display: block;
        min-height: 35px;
        width: 100%;
        padding: 0px 12px;
        margin-bottom: 15px;
        font-size: 20px;
        color: #555555;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid #d1d1d1;
        box-shadow: none;

        &:focus, &:hover, &:active{
            outline: none;
            border: none;
            border-bottom: $brand-primary 1px solid;
        }

        & .ember-power-select-trigger-multiple-input {
            border-bottom: unset;
        }

        & .ember-power-select-trigger-multiple-input {
            margin-bottom: unset;
        }

    }

    & textarea {
        resize: both;
    }

    .hours-and-minutes {
        display: inline;
        max-width: 80px;
    }

    .ember-movenium-date-field {
        max-width: 230px;
    }

    .max-width-5em {
        max-width: 5em;
    }

    .title {
        color: $dark-grey;
        font-weight: 500;
    }

}


.ember-movenium-form-button-group {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    color: #fff;
    & button {
        margin-bottom: 0;
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        border: 1px solid transparent;
        white-space: nowrap;
        padding: 6px 12px;

        height: 41px;
        margin: 15px;
        flex: 1;
        line-height: 1.333;
        font-size: 15px;
    }

}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.ember-movenium-button {
    &.large {
        padding: 10px 16px;
    }
    &.ember-movenium-save-button {
        width: 100%;
        color: #FFF;
        border: 1px solid;
        &:active, &:hover {
            background-color: $default-button-hover-color;
            border-color: $default-button-hover-color;
        }
        background-color: $default-button-color;
        border-color: $default-button-color;
    }
    &.ember-movenium-cancel-button {
        width: 100%;
        color: #FFF;
        border: 1px solid;
        &:active, &:hover{
            background-color: #858585;
            border-color: #7f7f7f;
        }
        background-color: #9E9E9E;
        border-color: #9E9E9E;
    }

    &.ember-movenium-exit-button {
        width: 100%;
        color: #FFF;
        border: 1px solid;
        &:active, &:hover{
            background-color: $color-red;
            border-color: $color-red;
        }
        background-color: $color-red;
        border-color: $color-red;
    }
    &.is-loading {

        position: relative;
        color: transparent!important;
        cursor: default;

        &:after {
            left: calc(50% - (1em / 2));
            top: calc(50% - (1em / 2));
            position: absolute!important;

            -webkit-animation: spin .5s infinite linear;
            animation: spin .5s infinite linear;
            border: 2px solid #dbdbdb;
            border-radius: 290486px;
            border-right-color: transparent;
            border-top-color: transparent;
            content: "";
            display: block;
            height: 1em;
            position: relative;
            width: 1em;
        }
    }
    &:disabled {
        opacity: 0.4;
    }
}

.ember-movenium-clear-button {
    border: 1px solid;
    &:active, &:hover{
        background-color: $background-bright;
        border-color: #7f7f7f;
    }
    background-color: #FFF;
    border-color: #9E9E9E;
}

.ember-movenium-saved-next-button {
    text-decoration: none;
    cursor: pointer;
    margin: 10px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: $add-button-color;
    color: white;
    box-shadow: 0 1px 15px -4px black;
}

.ember-movenium-grey-circle-button {
    text-decoration: none;
    cursor: pointer;
    margin: 10px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    color: $text-primary;
    background-color: $color-white;
    border: 1px solid $border-light;
    font-size: 2em;
    box-shadow: 0 1px 15px -4px black;
}

.ember-movenium-checkbox {
    display: block;
    position: relative;
    padding-left: 24px;
    cursor: pointer;;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 500;

    & input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
        min-height: unset;
    }

    & .ember-movenium-checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 18px;
        width: 18px;
        border: 1px solid $black;
        border-radius: 4px;
    }

    & .ember-movenium-checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    & input:checked ~ .ember-movenium-checkmark:after {
        display: block;
    }

    .ember-movenium-checkmark:after {
        left: 6px;
        top: 2px;
        width: 5px;
        height: 10px;
        border: solid $black;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    & span {
        -webkit-transform: unset;
        -ms-transform: unset;
        transform: unset !important;
    }

}

.ember-movenium-select-input {
    background-color: #FFF;
}

.ember-movenium-popupimage {
    margin: auto;
    max-width: 80vw;
    max-height: 80vh;
}
// this has to have -15 px margin because fields have 15px margin between them
.ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
    margin-top: -15px;
}