@import url('https://fonts.googleapis.com/css?family=Questrial');

:root {
    --brand-image                    : url('/img/tenants/logos/flex-portal.png');
    --brand-image-height             : 25%;
    --brand-color                    : #ffffff;
    --brand-color-contrast           : #6d7079;
    --brand-color-highlight          : #ffffff;
    --brand-color-highlight-contrast : #10aaa0;
    --navbar-size                    : "nav" 1fr "container" auto;
    --navbar-layout                  : .2fr 1fr;
    --navbar-header-size             : 100%;
    --navbar-items-layout            : repeat(10, 1fr);
    --toggle-button-display          : none;
}

body {
    font-family : 'Questrial', sans-serif;
    color       : #09142f;
}

/*-----------------------------------------------
 Management Styles
-----------------------------------------------*/
.management-customer__form .el-checkbox-group {
    display               : grid;
    grid-template-columns : 1fr 1fr 1fr 1fr 1fr;
}

.management-customer__form .management-customer__custom-fields .schema-form > span {
    display               : grid;
    grid-template-columns : 1fr 1fr 1fr 1fr;
    gap                   : 1em;
}

/*-----------------------------------------------
 Navigation Styles
-----------------------------------------------*/
.navbar__items {
    border-top : none;
}

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

.navbar-item__wrapper .menu > ul > li a{
    padding: 1em 1.5em;
}

.navbar-item__wrapper .menu > ul > li,
.navbar-item__wrapper .menu-container{
    background: none;
}

.navbar-item__wrapper .menu > ul > li > ul.normal-sub > li a{
    padding: 0.75em 0;
}

#app .navbar-item__link-icon.fa {
    font-size : 1rem;
}

#app .navbar-item__link {
    grid-template-columns : 1fr;
    font-size             : 0.9em;
    color                 : var(--brand-color-contrast);
    gap                   : 0.5em;
    grid-gap              : 0.5em;
    font-weight           : lighter;
    opacity               : 1;
    transition            : 0.2s ease-in-out;
}

#app .navbar-item__link:hover {
    color : #007bff;
}

.navbar__home-link {
    padding-bottom : 0.2em;
}

/*-----------------------------------------------
 Page/Layout Styles
-----------------------------------------------*/
.page__head-wrapper {
    background : #ffffff;
    margin-bottom : 0.3em;
}

.page__main {
    background : #f9f9f9;
}

.page__foot {
    background-color : #ffffff;
    border-top       : 1px solid #e8e9ec;
}

.page__head {
    background : #0086e3; /* Old browsers */
    background : -moz-linear-gradient(left, #0086e3 0%, #00cdc1 33%, #ffbd1f 66%, #ed007b 100%); /* FF3.6-15 */
    background : -webkit-linear-gradient(left, #0086e3 0%, #00cdc1 33%, #ffbd1f 66%, #ed007b 100%); /* Chrome10-25,Safari5.1-6 */
    background : linear-gradient(to right, #0086e3 0%, #00cdc1 33%, #ffbd1f 66%, #ed007b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter     : progid:DXImageTransform.Microsoft.gradient(startColorstr='#0086e3', endColorstr='#ed007b', GradientType=1); /* IE6-9 */
}

.page__head{
    background: linear-gradient(48deg, #0086e3, #00cdc1, #ffbd1f, #ed007b);
    background-size: 200% 200%;
    -webkit-animation: flex__loader 20s ease infinite;
    -moz-animation: flex__loader 20s ease infinite;
    animation: flex__loader 20s ease infinite;
}

@-webkit-keyframes flex__loader {
    0%{ background-position:0% 99%}
    50%{background-position:100% 2%}
    100%{background-position:0% 99%}
}

@-moz-keyframes flex__loader {
    0%{ background-position:0% 99%}
    50%{background-position:100% 2%}
    100%{ background-position:0% 99%}
}

@keyframes flex__loader {
    0%{ background-position:0% 99%}
    50%{background-position:100% 2%}
    100%{ background-position:0% 99%}
}

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

.card-list.show-view .card-list {
    grid-template-rows : 0fr 0fr;
}

/*-----------------------------------------------
 Container Styles
-----------------------------------------------*/
#app .searchbar__account__control-item {
    display               : grid;
    grid-template-columns : 1fr 2fr;
    gap                   : 0.5em;
    align-items           : center;
    text-decoration       : none;
    color                 : #000000;
    padding               : 1em 1.5em;
}

.infobar-item,
.card,
.searchbar {
    box-shadow : 0 2px 5px rgba(0,0,0,0.2);
}

.searchbar {
    margin-bottom : 1em;
}

h2.employee__text--normal,
.card__header h3,
.card__header h2,
.card__header h1 {
    line-height : 2.5rem;
    font-size   : 1.25em;
}

.el-tabs__content .el-tab-pane .card .card__header,
.el-dialog__body .page-section-list .card .card__header,
.employee-note__wrapper .page-section-list .card .card__header,
.card__header {
    padding          : 0 1em;
    min-height       : 2.7em;
    color            : #ffffff;
    background-color : #3d3f42;
}

#app .el-dialog__body .card,
.card {
    padding  : 0;
    gap      : 0;
    grid-gap : 0;
}

.card__body {
    padding : 1em;
}

#app .card .card__header h3 {
    margin-top    : 0;
    margin-bottom : 0;
}

.menu__alert {
    background-color : #09142f;
    overflow         : hidden;
    /*height           : 2em;*/
    font-size: 12px;
    color: #e4e4e4;
}



.menu__alert p {
    line-height   : 1.9em;
    margin-bottom : 0;
}

.menu__alert a{
    font-size: 12px;
}

    /*-----------------------------------------------
     Button Styles
    -----------------------------------------------*/
#app .button {
    border-radius : 0;
    background-position: center;
    box-shadow: none;
    transition: background 0.8s;
    color            : #ffffff;
    border: none;
    outline: none;
}

#app .button:hover {
    box-shadow: none;
}

#app .button:active {
    background-size: 100%;
    transition: background 0s;
}

#app .button--primary {
    background-color : #fda32c;
}

#app .button--primary:hover {
    background: #fdb84b radial-gradient(circle, transparent 1%, #fdb84b 1%) center/15000%;
}

#app .button--primary:active {
    background-color : #fdc93f;
}

#app .button--secondary {
    background-color : #3595e4;
}

#app .button.button--secondary:hover {
    background: #49a3e4 radial-gradient(circle, transparent 1%, #49a3e4 1%) center/15000%;
}

#app .button.button--secondary:active {
    background-color : #7db9e4;
}

#app .button--danger {
    background-color : #dc3545;
}

#app .button.button--danger:hover {
    background: #dc646a radial-gradient(circle, transparent 1%, #dc646a 1%) center/15000%;
}

#app .button.button--danger:active {
    background-color : #dc8181;
}

#app .button.registration__trigger{
    background-color : #ed1a7b;
    font-size: 16px;
}

#app .button.registration__trigger:hover{
    background: #ed4f96 radial-gradient(circle, transparent 1%, #ed4f96 1%) center/15000%;
}

#app .button.registration__trigger:active {
    background-color : #ff539a;
}

#app .button.button--link{
    color: #333333;
}

#app .heading__controls .button {
    margin-top    : 2px;
    margin-bottom : 2px;
}

#app .button--danger {
    /*height : 32px;*/
}

#app .event__heading {
    min-height : initial;
}

.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%;
}

.employee-details__heading-controls {
    float : right;
}

/*-----------------------------------------------
 Note Styles
-----------------------------------------------*/
.employee-details__notes {
    display          : block;
    padding          : 1em;
    max-height       : 385px;
    min-width        : 400px;
    overflow-y       : scroll;
    background-color : #f6f6f6;
    border           : 1px solid #e9e9e9;
    border-radius    : 6px;
}

.employee-details__notes p {
    display     : block;
    line-height : 1em;
    word-break  : break-word;
}

.note__actions {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    align-items           : center;
    opacity               : 0;
}

.note__content {
    margin-bottom : 0;
}

.note__content p:last-child {
    margin-bottom : 0;
}

.employee-note__wrapper {
    padding-top      : 1em;
    padding-bottom   : 1em;
    border           : 1px solid #f6f6f6;
    display          : flex;
    -webkit-box-pack : justify;
    justify-content  : space-between;
    border-radius    : 3px;
    transition       : 0.1s ease-in-out;
}

.employee-note__wrapper:hover {
    border  : 1px solid #e9e9e9;
    padding : 1em;
}

.employee-note__wrapper:hover .note__actions {
    opacity : 1;
}

/*-----------------------------------------------
 File Styles
-----------------------------------------------*/
.file__container {
    grid-template-columns : repeat(3, 1fr);
    display               : grid;
    gap                   : 1em;
}

#app .file__wrapper {
    display       : block;
    border        : 1px solid #eaeaea;
    border-radius : 4px;
    width         : auto;
    height        : auto;
    max-width     : inherit;
    max-height    : inherit;
}

.file__heading {
    background-color : #f9f9f9;
    padding-left     : 1em;
}

.file__heading p {
    line-height : 3em;
}

.file__body {
    padding-top : 1em;
}

#app .file__icon {
    font-size : 50px;
    color     : #efefef;
}

.file__container p.file__single-text {
    margin-bottom : 0;
}

.card.login__container {
    width        : 30%;
    margin-left  : auto;
    margin-right : auto;
}

#app .el-tabs--border-card > .el-tabs__content {
    padding : 0;
}

.model-show__text {
    line-height : 2em;
}

.textarea__large textarea {
    height : 150px;
}

.project-employee__profile {
    position   : relative;
    display    : inline-block;
    width      : 64px;
    height     : 64px;
    overflow   : hidden;
    text-align : center;
}

.project-employee__profile img {
    position  : absolute;
    transform : translate(-50%, -50%);
    height    : 100%;
    width     : auto;
    left      : 50%;
    top       : 50%;
}

.project-employee__content {
    vertical-align : top;
    display        : inline-block;
    width          : calc(100% - 70px);
    padding        : 0.75em;
}

.project-employee__content p {
    margin-bottom : 0.5em;
    word-break    : break-all;
    text-overflow : ellipsis;
    white-space   : nowrap;
    overflow      : hidden;
}

.projects__project_specifics {
    grid-column-end   : -1;
    grid-column-start : 1;
    padding-right     : 1em;
    white-space       : pre;
}

#app .el-table .cell {
    white-space : normal;
    word-break  : break-word;
}

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

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

#app .el-checkbox__label {
    padding-left : 5px;
}

.flag__active {
    color       : #1ed858;
    font-weight : bold;
}

.flag__warning {
    color       : #ff9900;
    font-weight : bold;
}

.flag__inactive {
    color       : #ff2513;
    font-weight : bold;
}

.navbar-item__link {
    display : inherit;
}

#app .navbar-item__link {
    font-size : 1em;
}

.navbar--search:not(.demo) {
    display : none;
}

.navbar--accounting .navbar-item__link-icon,
.navbar--administration .navbar-item__link-title,
.navbar--profile .navbar-item__link-title,
.navbar--search .navbar-item__link-title,
.navbar--logout .navbar-item__link-title,
.navbar--schedule .navbar-item__link-title {
    display : none;
}

.fc-unthemed .fc-content {
    color : #ffffff;
}

#app .control .control__wrapper .el-select {
    width : 100%;
}

#app .mobile {
    display : none;
}

.model__properties {
    gap : 0;
}

.el-table__row .table td {
    padding        : 0.75rem;
    vertical-align : top;
}

#app .el-table {
}

.navbar__icons {
    display : inline-block;
}

/*.model-show__text.customers__location{  grid-column-start: 1;  grid-column-end: -1;  }*/

.avatar-uploader.disabled,
.avatar-uploader.disabled .el-upload {
    cursor       : default;
    border-color : #d9d9d9;
}

#app .dashboard__card-list {
    grid-template-columns : 0.33fr 0.66fr;
}

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

.login__container .card__header header h2 {
    margin-bottom : 0;
}

@media (max-width : 900px ) {
    #app .navbar__items.navbar__items--desktop.toggled {
        margin-top : 0.3em;
        box-shadow : 0 2px 5px #dcdcdc;
    }
}

.product__price {
    text-align : center;
}

.product__block,
.product__block:hover {
    text-decoration : none;
    color           : #09142f;
    padding-top     : 0.5em;
}

.product__block {
    transition : ease-in-out 0.1s;
}

.product__block:hover {
    box-shadow    : 0 2px 4px #dddddd;
    padding-top   : 0;
    margin-bottom : 0.5em;
}

/*.product__block.selected .product__image img{ border: 1px solid #333333; }*/

.product__description {
    color         : #888888;
    margin-bottom : 0;
}

.product__heading {
    padding : 1em;
}

.product__image {
    position    : relative;
    width       : 100%;
    padding-top : 125%;
    overflow    : hidden;
}

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

.flex__reminders {
    grid-column-start : 2;
    grid-row-start    : 1;
    grid-row-end      : 3;
}

#app .el-tabs--left .el-tabs__item.is-left {
    text-align : center;
}

#app .el-tabs--left .el-tabs__header.is-left {
    margin-right : 0;
}

#app .badge {
    font-weight   : lighter;
    background    : none;
    color         : #333333;
    border        : 1px solid #dedede;
    border-radius : 0;
    padding       : .375rem .75rem;
    font-size     : 1rem;
    margin-right  : 0.05em;
    line-height   : 1.5;
    transition    : ease-in-out 0.2s;
}

#app .badge:hover,
#app .badge.selected {
    border : 1px solid #333333;
}

.product__details-view {
    display               : grid;
    grid-template-columns : 0.33fr 0.66fr;
    grid-gap              : 3em;
    gap                   : 3em;
}

span.product-details__cost,
p.product-details__cost {
    font-weight : bold;
}

.product-details__cost {
    color : #cc2127
}

.stock__in-stock {
    font-weight   : bold;
    color         : #44c058;
    margin-bottom : 0.4em;
}

.product__details-view {
    padding-left  : 3em;
    padding-right : 3em;
}

.results-filter__label {
    text-transform : uppercase;
    letter-spacing : 1px;
    margin-bottom  : 0.5em;
    border-bottom  : 1px solid #eeeeee;
}

.category__label {
    text-align : center;
    margin-top : 0.5em;
}

a.categories__block,
a.categories__block:hover {
    text-decoration : none;
    color           : #333333;
}

.category__image {
    position      : relative;
    width         : 100%;
    padding-top   : 100%;
    overflow      : hidden;
    border-radius : 50%;
}

a.categories__block:hover .category__image img {
    filter : grayscale(1);
}

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

.category__columns.columns__5 {
    gap           : 2em;
    grid-gap      : 2em;
    padding-left  : 6em;
    padding-right : 6em;
}

.model-show__text {
    padding-right : 1em;
}

.button--success {
    background-color : #38c759;
    border-color     : #38c759;
}

@media (max-width : 1366px) {
    .card.login__container {
        width : 60%;
    }
}

@media (max-width : 800px) {
    .card.login__container {
        width : 100%;
    }
}

@media (max-width : 768px) and (min-width : 480px) {
    .navbar__home-link {
        width : 100%;
    }
}

@media (max-width : 1600px) {

}

@media (max-width : 1250px ) {

}

@media (max-width : 1100px ) {

}

@media (max-width : 900px) {

}

@media (max-width : 768px) {
    .page__main {
        padding-top : 1em;
    }
}

@media (max-width : 830px ) {

}

@media (max-width : 650px) {

}

@media (max-width : 580px ) {

}

/* The alert content. */
.menu__alert a i {
    color : #ffffff;
}

.menu__alert {
    padding-left  : 1em;
    padding-right : 1em;
    padding-top: 0.7em;
    /*padding-left: 0.5em;*/
    /*padding-right: 0.5em;*/
    padding-bottom: 0.7em;
}

.menu__alert .menu__right {
    padding-top : 1px;
    float       : right;
}

.menu__alert .menu__right i {
    padding-left  : 0.2em;
    padding-right : 0.2em;
}

.menu__alert span.alert__half--right {
    position                  : absolute;
    left                      : 0;
    top                       : 3px;
    width                     : 100%;
    padding-left              : 0.5em;
    padding-right             : 0.5em;
    animation-name            : alert-revolve--right;
    animation-duration        : 60s;
    animation-timing-function : linear;
    animation-iteration-count : infinite;
}

.menu__alert span.alert__half--left {
    position                  : absolute;
    left                      : -100%;
    top                       : 3px;
    width                     : 100%;
    padding-left              : 0.5em;
    padding-right             : 0.5em;
    animation-name            : alert-revolve--left;
    animation-duration        : 60s;
    animation-timing-function : linear;
    animation-iteration-count : infinite;
}

@keyframes alert-revolve--left {
    from {
        left : -100%;
    }
    to {
        left : 100%;
    }
}

@keyframes alert-revolve--right {
    from {
        left : 0%;
    }
    to {
        left : 200%;
    }
}

.crm__appointments,
.crm__follow-ups {
    grid-column-start : 1;
    grid-column-end   : -1;
}

.project-progress__container{
    /*background-color: #eeeeee;*/
}

.project-progress__item{
    background-color: #f0f1f3;
    padding: 1em;
    padding-left: 2.5em;
    margin-right: 0.1em;
    display: inline-block;
    pointer-events: none;
    position: relative;
}

.project-progress__item--complete{
    color: #afafaf;
}

.project-progress__item--active{
    color: #ffffff;
    background-color: #3595e4;
}

.project-progress__item--incomplete{
    font-weight: bold;
}

.project-progress__item:before{
    content:"";
    z-index: 1;
    display:inline-block;
    position:absolute;
    border:22.5px solid #f0f1f3;
    border-color:transparent transparent transparent #f0f1f3;
    top: 0;
    left: 100%
}

.project-progress__item--active:before{
    border:22.5px solid #3595e4;
    border-color:transparent transparent transparent #3595e4;
}

.project-progress__item:after{
    content: "";
    display: inline-block;
    position: absolute;
    border: 22.5px solid white;
    border-color: transparent transparent transparent white;
    top: 0px;
    left: 0px;
}

.arrow-right {
    width: 0;
    height: 0;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid green;
}

/* Registration styles. */
.registration__check-number{
    background-color: #33c6bc;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5em;
    padding-right: 0.5em;
    color: #ffffff;
}

.registration__check-link{
    font-size: inherit;
    color: inherit;
    text-decoration: none;
}

.registration__check-link:hover{
    text-decoration: none;
}

.registration__number-rule{
    border-bottom: 1px solid #dddddd;
    padding-top: 13px;
    margin-bottom: -14px;
}

#app .el-table__body-wrapper{
    overflow-x: scroll;
}

#app .el-table__header-wrapper .el-table__header,
#app .el-table__body{
    min-width: 100%!important;
    width: auto!important;
}

#app .el-table .cell{
    padding-left: 0.2em;
}
#app .el-tabs__item{
    padding: 0 10px;
}