body{font-family:"Roboto"}h1{font-size:1.25rem;font-weight:400}h2{font-size:1rem;font-weight:200}h3{font-size:1.25rem;font-weight:400}h4{font-size:1.25rem}h5{font-size:1.25rem}p{font-size:1rem}a{font-size:1rem}@media (min-width: 480px){h1{font-size:1.5rem;font-weight:400}h2{font-size:1.25rem;font-weight:200}}@media (min-width: 768px){h1{font-size:1.75rem;font-weight:400}h2{font-size:1.75rem;font-weight:200}}
.header {
    height: 80px;
    background-image: url("/img/header-bg.png");
    background-blend-mode: luminosity;
    background-color: #7378d9
}.header .nav-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:100%;color:#fff}.header .menu-button,.header .settings{flex:0 0 48px;text-align:center}.header .k-button{border:none;background-color:transparent;background-image:none;color:#fff}.header .k-button:hover{background-color:transparent}.header .title{display:flex;flex:1 0 auto;flex-direction:column;align-items:flex-start;margin-left:25px}.header .k-avatar{display:block;width:40px;height:40px;margin:0 25px;box-shadow:0 0 0px 1px #fff}.header .k-avatar img{width:40px;height:40px}@media (min-width: 480px){.header .title{flex-direction:row;align-items:center}.header .vl{border-left:1px solid #fff;height:25px;margin:6px 15px}}.k-drawer-container{background-color:#d8d9e8;height:auto}.k-drawer-container .k-drawer{box-shadow:0 0 10px rgba(0,0,0,0.2);border-right-width:0 !important}.k-drawer-items .title{display:none;text-transform:uppercase;font-size:1em;padding:1em;font-weight:bold;color:#528dee}.k-drawer-items>header{display:none;flex-direction:column;align-items:center;padding:1em}.k-drawer-items>header>img{border:2px solid #5abf90;margin:1em;max-width:96px}.k-drawer-expanded .k-drawer-items>header,.k-drawer-expanded .k-drawer-items .title{display:flex}.card-container{background-color:#fff;padding:40px 0;text-align:center}.card-container.grid{display:grid;grid-template-columns:repeat(1, 1fr);-moz-column-gap:10px;column-gap:10px;row-gap:1em}.card-container .card-buttons .k-button{min-width:105px}.card-container .card-ranges .k-daterangepicker .k-textbox-container,.card-container .card-ranges .k-daterangepicker .k-floating-label-container{padding-top:0;min-width:105px}.card-container .card-ranges .k-daterangepicker .k-label{display:none}.card-container .card-component{grid-column:1 / -1}@media (min-width: 480px){.card-container{text-align:initial;padding:30px}.card-container.grid{grid-template-columns:repeat(2, 1fr)}.card-container .card-title{grid-column:1 / 2;grid-row:1}.card-container .card-buttons{text-align:center;grid-column:1 / -1;grid-row:2}.card-container .card-ranges{text-align:right;grid-column:2 / 3;grid-row:1}}@media (min-width: 768px){.card-container{margin:25px;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,0.2)}.card-container.grid{grid-template-columns:repeat(3, 1fr)}.card-container .card-buttons{text-align:center;grid-column:2 / 3;grid-row:1}.card-container .card-ranges{text-align:right;grid-column:3 / 4}.card-container .card-component{grid-column-start:1;grid-column-end:-1}}body,h1,body{margin:0;padding:0;list-style-type:none}h2,h3{margin:0;padding:0}a{color:#528dee;text-decoration:none}a:hover{color:#fff}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}.container-size{width:100vw;height:100vh}.dashboard-page .card-container:last-of-type{padding-top:0}.dashboard-page .k-grid-toolbar .k-textbox{margin-bottom:10px}@media (min-width: 480px){.dashboard-page .k-grid-toolbar .k-textbox{margin-bottom:0;float:left}.dashboard-page .k-grid-toolbar .k-button{float:right}}@media (min-width: 768px){.dashboard-page .card-container:last-of-type{padding-top:30px}}.planning-page .card-container{grid-template-columns:repeat(1, 1fr)}.planning-page .card-title{grid-column:1 / -1}.planning-page .k-hbox{padding:0 20px;background:transparent}.planning-page .k-avatar{width:41px;height:41px}.planning-page .k-card-title{font-size:15px;margin-bottom:-6px;text-align:left}.planning-page .k-card-subtitle{margin-top:0;text-transform:uppercase;font-size:11px}.planning-page .disabled{opacity:0.5}@media (min-width: 480px){.planning-page .card-container{grid-template-columns:repeat(2, 1fr)}}@media (min-width: 768px){.planning-page .k-hbox{padding:0;border-width:0}}@media (min-width: 960px){.planning-page .card-container{grid-template-columns:repeat(3, 1fr)}}@media (min-width: 1360px){.planning-page .card-container{grid-template-columns:repeat(5, 1fr)}}.profile-page .card-container{text-align:left}.profile-page .k-form .k-form-field{display:block;padding:0 15px}.profile-page .k-form-field:first-of-type .k-form-field-wrap{margin:auto}.profile-page .k-form-field:first-of-type .k-avatar{margin:0 auto 1rem}.profile-page .k-form.k-form-horizontal .k-label{width:100%}.profile-page hr{margin-top:1rem;opacity:0.2}.profile-page .k-form .k-form-buttons{justify-content:center}.profile-page .k-form .k-form-buttons>*{min-width:140px}@media (min-width: 480px){.profile-page .k-form .k-form-field{display:flex}.profile-page .k-form-field:first-of-type .k-avatar{margin:0}.profile-page .k-form.k-form-horizontal .k-label{width:25%}}@media (min-width: 768px){.profile-page .k-form{margin:0 auto;padding:0}.profile-page .k-form .k-form-field{padding:0}}.center-cell{text-align:center !important}#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:0.75rem;top:0.5rem}.rating-readonly{pointer-events:none}.yellow{color:#ffa600}html body{overflow-y:scroll;overflow-x:auto}.k-drawer-content{overflow:hidden}.employee-photo{display:inline-block;width:32px;height:32px;border-radius:50%;background-size:32px 35px;background-position:center center;vertical-align:middle;line-height:32px;box-shadow:inset 0 0 1px #999,inset 0 0 10px rgba(0,0,0,0.2);margin-left:5px}.employee-name{display:inline-block;vertical-align:middle;line-height:32px;padding-left:10px}html,body,app{height:100%;margin:0;padding:0}.k-grid-content .k-rating-container .k-rating-item{padding:0}.k-grid-content .k-rating-container .k-rating-item .k-icon{font-size:16px}.k-grid-content .k-rating-container{margin:0}.k-grid-content .k-progressbar-horizontal{width:100%}.card-header-wrapper{display:flex;justify-content:space-between;margin-bottom:1rem}.card-header-wrapper .k-card-actions{padding:0}.card-header-wrapper .k-button-group .k-button,div.k-form-buttons button{min-width:105px;max-height:30px}.daterangepicker-no-labels .k-label{display:none}.daterangepicker-no-labels .k-floating-label-container{padding:0}.card-ranges{display:flex;align-items:center}.card-ranges .k-icon{margin-right:5px}.settings-container{display:flex;align-items:center}.settings-container .k-dropdownlist{max-height:30px;margin-left:5px}.profile-form{max-width:700px;margin:auto}.profile-form .k-avatar-image img{width:80px;height:80px}.profile-form>div.k-form-field{margin-top:1.5rem}.profile-form .k-form-buttons{justify-content:center}.profile-form hr{margin-top:2rem;opacity:.2;width:100%}.main-content{color:#fff}.main-content img{-o-object-fit:contain;object-fit:contain;width:100%}.info-component{background-color:#151950;overflow:hidden}.info-component a{color:#528dee}.image-container{width:40%;min-width:330px}.content-container{width:60%}.banner{display:flex;max-width:1200px;margin:auto}.banner h1{font-size:60px;font-weight:300;letter-spacing:0;line-height:1em}.banner h5{font-size:21px;line-height:1.2em}.banner p{font-size:24px}.banner .content-container{padding-left:15px;padding-right:15px}.source-code{height:60px;width:60%;color:#528dee;display:inline-flex;align-items:flex-start}.source-code a{color:#528dee;font-size:20px;display:inline-flex}.source-code a img{width:30px;margin-right:10px}.section-3{-moz-column-count:2;column-count:2;margin-top:40px;padding:0 15px;text-align:left}.section-3 ul{list-style:none;padding:0;margin:0}.package-item{display:inline-block;margin-top:20px}.package-title a{font-size:17px;color:#cccccc;text-transform:uppercase}.component-link{padding:5px 0}.component-link a{font-size:20px}@media (min-width: 992px){.info-component .section-3{-moz-column-count:3;column-count:3}}@media (max-width: 800px){.image-container{display:none}.banner h1{font-size:28px}.banner h5{font-size:18px}.banner p{font-size:20px}.banner .source-code a img{width:25px}.banner .source-code a{font-size:18px;line-height:30px}}@media (max-width: 1270px){.source-code,.content-container{width:100%}.card-header-wrapper .k-button-group .k-button,div.k-form-buttons button{min-width:50px}.card-ranges .k-daterangepicker .k-dateinput{width:8em}}@media (min-width: 800px) and (max-width: 1270px){.banner h1{font-size:36px}.banner h5{font-size:16px}.banner p{font-size:16px}.banner .source-code a img{width:28px}.banner .source-code a{font-size:16px;line-height:30px}}.component-list{max-width:1200px;margin:auto}.component-list p{font-size:18px;text-align:left;padding:0 15px}.profile-notification{z-index:1}.profile-notification .k-notification-container .k-notification-wrap{width:300px;height:50px;font-size:1.5em;text-align:center;align-items:center}.profile-notification .k-notification-container .k-notification-wrap .k-i-success{font-size:30px}.k-grid-header .k-header.k-first{border-left-width:1px}.k-grid-header thead tr:not(:first-child) th[data-field]{border-left-width:1px}.ddl-separator{height:14px;margin:0 4px;border-left:1px solid #424242}.text-content{font-size:14px;line-height:20px}span.k-dropdownlist .k-input-inner{padding:8px}.k-grid tr .chkb-centered{padding:10px 14px}.profile-form .k-form-field.label-centered .k-label{margin-top:auto;margin-bottom:auto;padding-top:0}.k-drawer-container.k-drawer-left{min-height:calc(100% - 80px)}.k-popup.k-grid-columnmenu-popup{width:260px}
.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-text {
    color: white;
    font-size: 2em;
    font-weight: bold;
    position: relative;
}

    .loading-text:after {
        content: 'Loading';
        position: absolute;
        left: 0;
        top: 0;
        color: #3498db;
        animation: glitch 1s infinite;
        clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    }

    .loading-text:before {
        content: 'Loading';
        position: absolute;
        left: 0;
        top: 0;
        color: #e74c3c;
        animation: glitch 0.7s infinite;
        clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    }
@keyframes glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

.hosting-dialog .k-dialog-content {
    padding: 0 !important;
}
.unpaid-row {
    background-color: #fee2e2 !important;
}