body{
    font-family:"Arial"
}

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: 60px;
    background-image: url("/img/header-bg.png");
    background-blend-mode:luminosity;
    background-color: blue
}

.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-floating-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
    }
}

.k-menu:not(.k-context-menu) {
    color: #fff;
}

@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
}

.k-rating{
    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;
    gap: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-floating-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
}