.#{$csscommon}-full-width { width: 100%; }

.#{$csscommon}-full-height { height: 100%; }

.#{$csscommon}-flex-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
}

.#{$csscommon}-portrait-aspect-ratio { aspect-ratio: 9/16; }

.#{$csscommon}-landscape-aspect-ratio { aspect-ratio: 16/9; }

.#{$csscommon}-standard-aspect-ratio { aspect-ratio: 4/3; }

.#{$csscommon}-square-aspect-ratio { aspect-ratio: 1/1; }

.#{$csscommon}-horizontally-center { @include relative-horizontally-center(); }

.#{$csscommon}-center-all { @include relative-center-center(); }

.#{$csscommon}-text-center {text-align: center;}

.#{$csscommon}-text-right {text-align: right;}

.#{$csscommon}-text-left {text-align: left;}

.#{$csscommon}-pull-right {float: right;}

.#{$csscommon}-disabled, .#{$csscommon}-disabled * { @include disabled_element() }

.#{$csscommon}-accent-color { color: $accent_color; }

.#{$csscommon}-accent-color-bg { background-color: $accent_color; }

.#{$csscommon}-accent-color-border { border-color: $accent_color; }

.#{$csscommon}-text-info { color: #5dbb96 }

.#{$csscommon}-text-error { color: #dd4b39}

.#{$csscommon}-clickable {cursor: pointer;}

.#{$csscommon}-crop-fit {object-fit: cover;}

.#{$csscommon}-pad-fit {object-fit: contain;}

.#{$csscommon}-original-fit {object-fit: none;}

.#{$csscommon}-portrait-aspect-ratio {aspect-ratio: "9/16";}

.#{$csscommon}-landscape-aspect-ratio {aspect-ratio: "16/9";}

.#{$csscommon}-standard-aspect-ratio {aspect-ratio: "4/3";}

.#{$csscommon}-square-aspect-ratio {aspect-ratio: "1/1";}

.#{$csscommon}-message-container {
    @include relative-horizontally-center();
    margin-top: 10px;
    max-width: 90%;
    text-align: center;
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        li {
            padding: 4px 10px;
            margin-bottom: 2px;
        }
    }
}

.#{$csscommon}-message-warning {
    color: #0a0a0a;
    background-color: #F1D44F;
}

.#{$csscommon}-message-success {
    color: #0a0a0a;
    background-color: #9EBC9F;
}

.#{$csscommon}-message-error {
    color: #ffffff;
    background-color: #FF6256;
}

a.#{$csscommon}-action-button, button.#{$csscommon}-action-button {
    cursor: pointer;
    float: right;
    text-align: right;
 }

.#{$csscommon}-open-next, .#{$csscommon}-open-previous {
    & > .#{$csscommon}-inner-icon, & > .#{$csscommon}-inner-text {
        font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 1.5em;
        display: inline-block;
        vertical-align: middle;
    }
    & > .#{$csscommon}-inner-icon {
        @include fontello-icon;
        color: #eeeeee;
        position: relative;
    }
    & > .#{$csscommon}-inner-text {
    }
}

.#{$csscommon}-open-next {
    & > .#{$csscommon}-inner-icon {
        &:after {
            content: '\f105';
            left: 5px;
        }
    }
}

.#{$csscommon}-open-previous {
    & > .#{$csscommon}-inner-icon {
        float: left;
        line-height: 1.5;
        &:before {
            content: '\f104';
            right: 5px;
        }
    }
}

.#{$csscommon}-button {
    color: #333;
    background-color: #fff;
    border-radius: 0;
    padding: 5px 10px;
    font-size: 14px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

.#{$csscommon}-form {
    .#{$csscommon}-form-input {
        &.#{$csscommon}-select-field {
            //background: #fafafa url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAlklEQVQ4T+3SMQ5BQRDG8d+7hVLrEhqJ4h1ANCqFE0g0CuVzBJ2SAygkKqfQ6pyCbLISWdYWrxNTznzzn8w3U2kZVct+PwjYY4lLxpseVhg966kHfWwwxDWBdHHEFOccIORrrDHALQo7OGGOwys4d4VxFAdI0ITmBrt0tW9nnGESAdu42ps1pT9Y4B6nf/S1BCg+6h/AA/hvEhFscWXpAAAAAElFTkSuQmCC") no-repeat 95% 50%;
            border: 1px solid #cccccc;
            cursor: pointer;
            min-width: 130px;
            min-height: 25px;
            overflow: hidden;
            select {
                @include background-rgba(0, 0, 0, 0.7, #555555);
                border: none;
                box-sizing: border-box;
                box-shadow: none;
                cursor: pointer;
                padding: 5px 8px;
                position: relative;
                width: 100%;
                z-index: 1;
                -moz-appearance: none;
                -webkit-appearance: none;
            }
            select:focus {
                outline: none;
            }
            &:after {
                @include fontello-icon;
                @include transform-translate-y(-50%);
                content: '\f107';
                color: #eeeeee;
                position: absolute;
                right: 15px;
                top: 50%;
            }
        }

        input[type='file'] {
            @include transparent(0);
            bottom: 0;
            cursor: pointer;
            left: 0;
            position: absolute;
            z-index: 100;
            &::-webkit-file-upload-button {
                cursor: pointer;
            }
        }
        &.#{$csscommon}-error {
            border: 1px solid #dd4b39;
        }
        input[type='submit'] {
            background: #2c2c2c;
            color: #cccccc;
        }
        input {
            width: 100%;
            box-sizing: border-box;
            padding: 5px 10px;
        }

    }
}

.#{$csscommon}-options-popup {
    @include background-rgba(0, 0, 0, 0.7, #555555);
    @include transition1(opacity, .2s, ease-in-out);
    box-sizing: border-box;
    bottom: 3px;
    min-width: 140px;
    overflow: hidden;
    position: absolute;
    right: 5px;
    z-index: 10;
    .#{$csscommon}-options-list {
        padding: 0;
        margin: 0;
        width: 100%;
        .#{$csscommon}-options-list-item {
            @include remove-outline();
            box-sizing: border-box;
            cursor: pointer;
            color: #eeeeee;
            display: list-item;
            font-weight: 200;
            letter-spacing: 0.03em;
            padding: 5px 10px;
            white-space: nowrap;
            width: 100%;
            & > .#{$csscommon}-inner-text {
                font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
                font-size: 14px;
                float: left;
            }
            &.#{$csscommon}-inner-icon {
                margin: 0;
                padding: 5px 0 5px 10px
            }
        }
        .#{$csscommon}-options-list-item:hover {
            @include background-rgba(255, 255, 255, .1, #555555);
        }
    }
}

.#{$csscommon}-options-list-visible {
    @include show-slow(.5);
    &.#{$csscommon}-button {
        background-color: #979797;
        color: #eeeeee;
        margin-top: 5px;
    }
}

.#{$csscommon}-options-list-hidden {
    @include hide-slow(.5);
    display: none;
    &.#{$csscommon}-button {
        background-color: #979797;
        color: #eeeeee;
        margin-top: 5px;
    }
}

.#{$csscommon}-form {
    .#{$csscommon}-form-input {
        &.#{$csscommon}-disabled {
            input {
                @include disabled_element();
            }
            input[type='file'] { @include transparent(0); }
        }
        &.#{$csscommon}-select-field {
            margin-bottom: 7px;
            select {
                color: #eeeeee;
            }
            &:after {
                position: relative;
                right: 30px;
                top: 10px;
            }
        }
    }
}

/* Recorder image gallery right left icons */
.#{$csscommon}-icon-right-open:before {
    margin-right: 0;
}

.#{$csscommon}-icon-left-open:before {
    margin-left: 0;
}