/*-----------------------------------------------
 Main Styles
-----------------------------------------------*/
html, body, #app {
    margin: 0;
    min-height: 100%;
    height: 100%;
    position: relative;
}

img {
    width: 100%;
}

.layout__left-column-slot {
    display: grid;
    grid-template-columns: 0.4fr 2fr;
    gap: 1em;
}

#app .el-dialog__body {
    word-break: break-word;
    font-size: inherit;
}

.avoid-word-break {
    word-break: break-word;
}

.d-flex-justify {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-lighter {
    color: #aaaaaa;
}

.text-help {
    color: #9198a0;
    padding: 0.5em;
    pointer-events: none;
    letter-spacing: 1px;
    word-spacing: 1px;
    user-select: none;
    display: block;
    font-size: 13px;
}

/*-----------------------------------------------
 Page Styles
-----------------------------------------------*/
.page__wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.page__container {
    display: flex;
    flex: 1 1 auto;
}

.page__main {
    position: relative;
}

.page__body .el-tabs__content {
    overflow: visible;
}

.page__container .el-loading-mask {
    z-index: 10;
}

/*-----------------------------------------------
 Footer Styles
-----------------------------------------------*/
.page__foot {

}

.page__foot__container {
    display: flex;
    padding-left: 1em;
    width: 100%;
}

.page__loader > .el-loading-mask {
    position: fixed;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.5);
}

.sitemap-item {
    margin-right: 1.5em;
}

/*-----------------------------------------------
 Navbar Styles
-----------------------------------------------*/
.navbar {
    padding: 0;
}

.navbar__wrapper {
    padding: 0 4em;
}

.navbar__icons__wrapper {
    display: flex;
    justify-content: flex-end;
}

.navbar--profile .navbar-item__link-title {
    display: none;
}

.module__navigation {
    background: #fbfcfd;
    background: -moz-linear-gradient(top, #fbfcfd 0%, #f0f1f3 100%);
    background: -webkit-linear-gradient(top, #fbfcfd 0%, #f0f1f3 100%);
    background: linear-gradient(to bottom, #fbfcfd 0%, #f0f1f3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfcfd', endColorstr='#f0f1f3', GradientType=0);
    /*border-right : 1px solid #e1e2e2;*/
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1);
    padding: 1em;
    width: 20%;
    float: left;
    transition: 0.2s ease-in-out;
}

.module__navigation .navbar-item {
    display: block;
}

.module__navigation .navbar-item__link:focus,
.module__navigation .navbar-item__link:hover {
    background: rgba(255, 255, 255, 0.87);
}

.module__navigation .navbar-item__link-icon {
    margin-right: 0.3em;
}

.module__navigation .navbar-item.navbar--view-libraries {
    border-top: 1px solid #e4e4e4;
}

/*-----------------------------------------------
 Column Layout Styles
-----------------------------------------------*/
.columns__fill {
    grid-column-start: 1;
    grid-column-end: -1;
}

.columns__1,
.columns__2,
.columns__3,
.columns__4,
.columns__5,
.columns__6,
.columns__1_3,
.columns__2_3 {
    grid-auto-flow: unset;
    display: grid;
    gap: 1em;
    align-self: start;
}

.columns__1 {
    grid-template-columns: 1fr;
}

.columns__2 {
    grid-template-columns: 1fr 1fr;
}

.columns__3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.columns__4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.columns__5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.columns__6 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.columns__1_3 {
    grid-template-columns: 0.33fr 0.67fr;
}

.columns__2_3 {
    grid-template-columns: 0.67fr 0.33fr;
}

.card__header h4,
.card__header h3,
.card__header h2,
.card__header h1,
.card__header p {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    word-break: break-all;
    margin-bottom: 0;
}

/** Fix for text cutoff in the core-well **/
.card__header .core__well p {
    -ms-text-overflow: unset;
    text-overflow: unset;
    overflow: unset;
    -ms-word-break: break-word;
    word-break: break-word;
}

#app .page__wrapper.page__wrapper--has-before .page__main {
    padding: 1rem 2rem;
}

#app .el-table__empty-block {
    width: 100% !important;
}

.cell a.button,
.cell button.button {
    height: 32px;
    margin-left: 0.1em;
    margin-right: 0.1em;
}

/*-----------------------------------------------
 Customizable Grid Styles
-----------------------------------------------*/
.grid__widget--metric .card__header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    transition: 0.2s ease-in-out;
}

.grid__widget--metric:hover .card__header {
    opacity: 1;
}

/*-----------------------------------------------
 Login Styles
-----------------------------------------------*/
.login__container,
.card.login__container {
    width: 30%;
    margin-left: auto;
    margin-right: auto;
}

.login__container--max-width {
    grid-column-start: 1;
    grid-column-end: -1;
}

.pointer-events-none {
    pointer-events: none;
}

/*-----------------------------------------------
 Input Styles
-----------------------------------------------*/
#app input[type=file].control-file__control {
    border: none;
}

#app textarea,
#app .el-radio-button__inner,
.control__wrapper .control__wrapper-2 textarea,
.el-select-dropdown.el-popper,
input[type=text],
input[type=email],
input[type=number],
input[type=password] {
    border-radius: 0;
}

.control__wrapper-2 .el-select,
.control__wrapper-2 .el-input-number,
.control__wrapper-2 .el-date-editor.el-input,
.control__wrapper-2 .el-date-editor.el-input__inner {
    width: 100%;
}

textarea {
    height: 150px;
}

#app .el-checkbox {
    margin-right: 4px;
}

label {
    margin-bottom: 0;
}

.cell .ql-editor{
    min-height: auto;
}

/*-----------------------------------------------
 Three Column Layout Styles
-----------------------------------------------*/
.column-layout__3--wrapper {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    height: 100%;
}

.column-layout__3--left {
    box-sizing: border-box;
    overflow-y: scroll;
    display: inline-block;
    position: absolute;
    padding: 1em;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(78% + 18px);
    height: 100%;
}

.column-layout__3--right {
    width: 22%;
    display: flex;
    flex-direction: column;
    position: absolute;
    box-sizing: border-box;
    z-index: 3;
    background: linear-gradient(to bottom, #fbfcfd 0%, #f0f1f3 100%);
    height: 100%;
    left: 78%;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}

.column-layout__3--right > .card:last-child {
    flex: 1 1 auto;
}

.module__navigation .model-profile__wrapper,
.column-layout__3--right .model-profile__wrapper {
    display: flex;
    align-items: start;
}

.module__navigation .model-profile__wrapper .avatar-uploader,
.column-layout__3--right .model-profile__wrapper .avatar-uploader {
    margin-right: 1em;
}

.module__navigation .model-profile__wrapper .avatar-uploader .el-upload,
.column-layout__3--right .model-profile__wrapper .avatar-uploader .el-upload {
    width: 60px;
    height: 60px;
}

.module__navigation .model-profile__wrapper .avatar-uploader-icon,
.column-layout__3--right .model-profile__wrapper .avatar-uploader-icon {
    width: 60px;
    height: 64px;
    padding-top: 16px;
    font-size: 24px;
}

.column-layout__3--right .card__body {
    position: relative;
    background-color: none;
}

.column-layout__3--right .activity-feed__card .activity-feed__wrapper {
    position: absolute;
    max-height: inherit;
    left: 0;
    right: 0;
    top: 49px;
    bottom: 0;
    width: 100%;
    height: calc(100% - 49px);
}

.column-layout__3--right .activity-feed__card .activity-comments__wrapper--open .activity-feed__wrapper {
    height: calc(100% - 364px);
}

.column-layout__3--right .activity-feed__card .activity-comments__wrapper--closed .activity-feed__wrapper {
    height: calc(100% - 96px);
}

.el-tabs__nav-scroll .el-tabs__nav {
    white-space: inherit;
}

.page__body .el-tabs--border-card {
    border: none;
}

/*-----------------------------------------------
 Widget Styles
-----------------------------------------------*/
.project_management__user_projects {
    grid-column-start: 1;
    grid-column-end: -1;
}

/*-----------------------------------------------
 Configuration Styles
-----------------------------------------------*/
.module--plugin p {
    font-size: 14px;
}

.module-plugin__image-text {
    position: relative;
    background-color: #eff0f3;
}

.module-plugin__image-text img {
    /*filter:grayscale(1);*/
    opacity: 0.9;
}

.module-plugin__image-text h1 {
    text-align: center;
    filter: drop-shadow(0 0px 2px rgba(0, 0, 0, 0.8));
    position: absolute;
    color: #ffffff;
    left: 50%;
    top: 50%;
    text-transform: uppercase;
    letter-spacing: 2px;
    word-spacing: 15px;
    font-weight: lighter;
    transform: translate(-50%, -50%);
}

/*-----------------------------------------------
 Notes Styles
-----------------------------------------------*/
#app .employee-details__notes {
    grid-column-start: 2;
    grid-row-start: 1;
    grid-row-end: 10;
    max-height: inherit;
    margin-bottom: 1.75em;
}

#app .permission__selection .el-checkbox {
    margin-left: 0;
}

#app .permission__selection .el-checkbox-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

#app .app-notes__wrapper {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row-start: 2;
    margin-bottom: 0;
    margin-top: 1.75em;
}

/*-----------------------------------------------
 Chip Styles
-----------------------------------------------*/
#app .form-builder__navigation .core__chip--selectable,
.chip__model-type.core__chip--selectable {
    background-color: #6c757d;
    color: #fff;
    border: none;
}

#app .form-builder__navigation .core__chip--selected,
#app .form-builder__navigation .core__chip--selected:hover,
.chip__model-type.core__chip--selected,
.chip__model-type.core__chip--selectable:hover {
    background-color: #3d3f42;
    color: #fff;
    border: none;
}

/*-----------------------------------------------
 Container Styles
-----------------------------------------------*/
.flat__card {
    background-color: #ffffff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
    margin-top: 0.5em;
    margin-bottom: 0;
    transition: 0.2s ease-in-out;
    text-decoration: none;
    color: #333333;
    font-size: 15px;
}

.flat__card:hover {
    margin-top: 0;
    margin-bottom: 0.5em;
    text-decoration: none;
    color: #333333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.flat-card__heading {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
}

.flat-card__heading img {
    text-align: center;
    position: absolute;
    top: 0;
    width: 100%;
    height: auto;
    left: 50%;
    bottom: 0;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.flat-card__title {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-bottom: 0;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.47);
    width: 100%;
    padding-left: 15px;
}

.flat-card__title h3 {
    margin-bottom: 0.2em;
    margin-top: 0.2em;
}

.flat-card__attributes {
    padding: 1.5em;
}

.package-explorer .core__chip {
    max-width: initial;
    background-color: #ffffff;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.package-explorer .core__chip:hover {
    border: none;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
}

.package-explorer__app-bar {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem 2rem;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
}

.package-explorer__app-spacer {
    opacity: 0;
    margin-bottom: 1rem;
}

/*-----------------------------------------------
 Mobile Styles
-----------------------------------------------*/
@media (max-width: 1600px) {
    .card .libraries__wrapper {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .card.login__container {
        width: 40%;
    }
}

@media (max-width: 1250px ) {
    .card .libraries__wrapper {
        grid-template-columns: 1fr 1fr 1fr;
    }

    #app .el-dialog {
        width: 80vw !important;
    }

    .page__wrapper.page__wrapper--has-before {
        grid-template-columns: 0.23fr 0.77fr;
    }

    .column-layout__3--right {
        width: 30%;
        left: 70%;
    }

    .column-layout__3--left {
        width: calc(70% + 18px);
    }
}

@media (max-width: 1050px ) {
    .card .libraries__wrapper {
        grid-template-columns: 1fr 1fr;
    }

    .columns__5 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .columns__4 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .columns__2 > div > .columns__2 {
        grid-template-columns: 1fr;
    }

    .show-view .show__body-content .model__properties {
        grid-template-columns: 1fr;
    }

    .card-list.show-view {
        gap: 0.5em;
        grid-gap: 0.5em;
    }

    .card.login__container {
        width: 100%;
    }

    .layout__left-column-slot {
        grid-template-columns: 1fr;
    }

    #app .el-dialog {
        width: 85vw !important;
    }

    .page__wrapper.page__wrapper--has-before {
        grid-template-columns: 0.25fr 0.75fr;
    }

    .column-layout__3--right {
        width: 33%;
        left: 67%;
    }

    .column-layout__3--left {
        width: calc(67% + 18px);
    }

    #app .employee-details__notes {
        grid-column-start: 1;
        grid-column-end: -1;
        grid-row-start: auto;
        margin-bottom: 0;
    }
}

@media (max-width: 900px ) {
    .page__container {
        flex-direction: column;
    }

    .page__main {
        flex: 1 1 auto;
    }

    .module__navigation {
        width: 100%;
    }

    .columns__5 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .columns__3 {
        grid-template-columns: 1fr 1fr;
    }

    .column-layout__3--right,
    .column-layout__3--left {
        display: block;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
    }
}

@media (max-width: 768px) {
    #app .columns__2 {
        grid-template-columns: 1fr;
    }

    .columns__5 {
        grid-template-columns: 1fr 1fr;
    }

    .columns__1_3,
    .columns__2_3 {
        grid-template-columns: 1fr;
    }

    .columns__3 {
        grid-template-columns: 1fr 1fr;
    }

    .card-list.show-view {
        grid-template-columns: 1fr;
        gap: 0.5em;
        grid-gap: 0.5em;
    }

    /*-----------------------------------------------
     Mobile table styles.
    -----------------------------------------------*/
    #app table.el-table__body {
        width: 100% !important;
    }

    #app table.control__table,
    #app table.el-table__body {
        border: 0;
    }

    #app .el-table__fixed{
        display: none;
    }

    #app .el-table__row td.is-hidden >*{
        visibility: visible;
    }

    #app table.control__table tr,
    #app table.el-table__body tr {
        margin-bottom: 2em;
        display: block;
        border-bottom: 1px solid #ddd;
    }

    #app table.control__table td,
    #app table.el-table__body td {
        display: grid;
        grid-template-columns: 0.5fr 1fr;
        text-align: left;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
    }

    #app table.control__table td:last-child,
    #app table.el-table__body td:last-child {
        border-bottom: 0;
    }

    #app table.control__table tr td:first-child,
    #app table.el-table__body tr td:first-child {
        border-top: 1px solid #ddd;
    }

    #app table.control__table td:before,
    #app table.el-table__body td:before {
        content: attr(data-label);
        float: left;
        margin-right: 0.5em;
        font-weight: bold;
        margin-top: 0.4em;
        margin-left: 0.5em;
    }

    #app .el-table .cell {
        white-space: normal;
        word-break: break-word;
        display: flex;
        align-items: center;
    }

    #app table.control__table tr:first-child,
    #app .el-table__header-wrapper {
        display: none;
    }

    #app table.control__table colgroup,
    #app table.el-table__body colgroup {
        display: none;
    }
}

@media (max-width: 830px ) {
    #app .el-dialog {
        width: 90vw !important;
    }

    #app .searchbar {
        grid-template-columns: 1fr;
    }

    .columns__4 {
        grid-template-columns: 1fr 1fr;
    }

    .searchbar__search {
        grid-column-start: 1;
        grid-column-end: -1;
    }

    .searchbar__account,
    .searchbar__notification {
        display: none;
    }
}

@media (max-width: 650px) {
    #app .el-dialog {
        width: 95vw !important;
    }

    .columns__3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 580px ) {
    .card .libraries__wrapper {
        grid-template-columns: 1fr;
    }

    .columns__5,
    .columns__4,
    .columns__3,
    .columns__2 {
        grid-template-columns: 1fr;
    }

    #app .el-dialog {
        width: 100vw !important;
    }
}