.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

.raised {
    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
}

.popup {
    box-shadow: 0 1px 20px 0 rgba(0,0,0,0.5);
}

.rounded {
    border-radius: 2px;
}

.clear-appearance {
    -moz-appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
}

.eased-transition {
    transition: all 0.2s ease-in-out;
}

.flex-base {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: stretch;
}

.flex-column {
    .flex-base;
    flex-direction: column;
}

.flex-row {
    .flex-base;
    flex-direction: row;
}

.el-button {
    .rounded;
    .eased-transition;
    color: @col-text-primary-white;
    background: @col-blue-400;
    cursor: pointer;
    text-decoration: none;

    &:hover {
        .raised;
    }
}

.el-input {
    .rounded;
    .clear-appearance;
    background: @col-back-paper;
    border: none;
    outline: none;
    background: @col-back-panel;
    border: 1px solid @col-border;
}