* {
    --lgszOrange: #ffbf00;
    --lgszBlue: #00a0ad;
    --lgszRed: #d60f3c;
    --lightgrey: #f7f7f7;
    --animationdelay: .3s;
    --sidebarwidth: 300px;
}

html, body, p {color: #000000;}

hr {height: 0; background-color: transparent; border: 0; border-top: 1px solid  rgba(0,0,0,0.1); opacity: 1;}

.padding.all { padding: 24px; }
.padding.top { padding-top: 24px; }
.padding.bottom { padding-bottom: 24px; }
.padding.left { padding-left: 24px; }
.padding.right { padding-right: 24px; }
i.padding.left { padding-left: 12px; }
i.padding.right { padding-right: 12px; }

.margin.all { margin: 24px; }
.margin.top { margin-top: 24px; }
.margin.bottom { margin-bottom: 24px; }
.margin.left { margin-left: 24px; }
.margin.right { margin-right: 24px; }

.action-bar { display:block; margin-bottom: 24px; }
.action-bar { padding: 16px; display: flex; justify-content: end; }
.action-bar.right { justify-content: end; }
.action-bar button.btn { background: var(--lgszOrange); min-height: 36px; position: relative; display: inline-block;  }
.action-bar button.btn:not(:last-of-type) { margin-right: 16px; }

.block.action-bar { margin: 0; flex-direction: row; height: unset; }

/* BLOCKS */
.block {margin-bottom: 24px; height: calc(100% - 24px); box-shadow: 2px 1px 4px #cccccc; background-color: #FFFFFF; display: flex; flex-direction: column;}
.block .title { font-size: 20px; font-weight: 700; }
.block .block-header { padding: 24px; width: 100%; border-bottom: solid rgba(0,0,0,0.1) 1px; flex-shrink: 0; flex-grow: 0;}
.block .block-header.orange { background-color: var(--lgszOrange); }
.block .block-header.blue { background-color: var(--lgszBlue); }
.block .block-header.red { background-color: var(--lgszRed); }
.block .block-header p { padding:0; color:inherit;  }
.block .block-header .title {}
.block .block-header .subtitle { font-size:14px; }

.block .block-body { padding: 24px; width: 100%; flex-grow: 1; overflow-x: auto;}
.block .block-body.no-padding { padding:0; }
.block .block-body .specvalue { display:block; }
.block .block-body .specvalue p { margin:0; padding:0; }
.block .block-body .specvalue .value { font-size: 32px; line-height: 32px; font-weight: 700; text-align: center; }
.block .block-body .specvalue .unit { font-size: 14px; text-align: center; }
.block .block-body p.button { margin: 0; }

.block .block-footer { padding: 24px; flex-shrink: 0; flex-grow: 0;}
.block .block-footer.lined { border-top: solid rgba(0,0,0,0.1) 1px; }
.block .block-footer p.button { margin: 0; }
.block .block-footer p.button .right {  }

.block.toggable { position: relative; }
.block.toggable .block-header {  }
.block.toggable .block-header::after { transition: all .25s; position: absolute; right: 34px; top: 34px; font-family: "Font Awesome 5 Pro"; font-weight: 400;content: "\f0de"; font-size: 42px; color: #dadada; }
.block.toggable.collapsed .block-header::after { transform: rotateX(180deg); top: 16px; }
.block.toggable.collapsed .block-body { display:none; }

.block.report-widget {margin-bottom: 0;}
.block.report-widget .block-header,
.block.report-widget .block-footer {height: 49px;}
.block.report-widget .block-header .title::after {top: 12px; right: 24px; width: 31px; height: 24px; background-position: -124px 0; display: block; content: ""; position: absolute; background-image: url(../images/sprite.svg); background-repeat: no-repeat; background-size: 186px 72px;}
.block.report-widget .block-body .padding.all {padding: 0;}

/* System logs */
#system-info { position: fixed; bottom: 16px; right: 16px; z-index: 1000; }
#system-info .debug-mode { background: var(--lgszOrange); padding: 16px; border-radius: 30px; }

/* Toasts */
md-toast { max-width: 500px; font-family: 'Poppins', sans-serif; font-size: 16px; }
md-toast .md-toast-content { padding: 8px; }
md-toast.md-toast-success .md-toast-content { background: #6cc36c; border: solid #489848 1px; }
md-toast.md-toast-warning .md-toast-content { background: #d49351; border: solid #a97541 1px; }
md-toast.md-toast-error .md-toast-content { background: #d45151; border: solid #a94141 1px; }

/* Exceptions */
.exception { border-radius: 5px; text-align: center; border: dashed #0000001a 2px; padding: 24px; }
.exception .icon { font-size: 52px; margin-bottom: 24px; }
.exception .icon p { font-size: 20px; padding: 0; }
.exception .text p { font-size: 18px; padding: 0; margin:0; }
.exception.error { border-bottom: solid #d10000 6px; }
.exception.error .icon { color: #d10000; }
.exception.error .text {  }
.exception.max-width-text .text { max-width: 80%; margin: auto; }
.exception.nav-notification .icon { color: #00a0ad; }


/* Loaders */
.loader { width: 82px; height: 64px; display:block; margin:auto; }
.loader:after { content: " "; display: block; width: 64px; height: 64px; margin: 8px; border-radius: 50%; border: 6px solid #fff; border-color: var(--lgszBlue) transparent var(--lgszBlue) transparent; animation: lds-dual-ring 1.2s linear infinite; }
.loader.grey:after { border-color: #c3c3c3 transparent #c3c3c3 transparent; }
.loader.large:after { width: 128px; height: 128px; margin: 16px; border-width: 12px; }
.loader.large { width: 162px; height: 128px; }

/* Tables */
table { width: 100%; }
table tr { }
table tbody tr:nth-child(even), table tbody tr.even { background-color: #f1f1f1 !important; }
table tbody tr:nth-child(odd), table tbody tr.odd { background-color: #fff !important; }
table tbody tr.odd { background-color: #fff !important; }
table tbody tr.even { background-color: #f1f1f1 !important; }
table thead tr { background: #f1f1f1; }
table thead tr.stick { position: sticky; top: 0; z-index: 1; }
table tr td,
table tr th { text-align: left; padding: 12px 24px; }
table tr th { white-space: nowrap; }
table.small tr th,
table.small tr td { text-align: left; padding: 6px 12px; font-size: 14px; }
table tr th.right,
table tr td.right { text-align:right; }

/* Tool tips */
.l-tooltip { right: 0; top: 12px; position:absolute; width: 48px; height: 48px; float: left; display: inline-block; }
.l-tooltip .l-tooltip-wrapper { z-index: 3; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.l-tooltip .l-tooltip-wrapper:before { visibility: hidden; z-index: 3; border-radius: 15px; opacity:0; position: absolute;content: attr(data-content);background-color: var(--lgszOrange);color: #000;transition: opacity .3s;transform: translate(-100%,-50%);top: 10px;left: -10px;padding: 10px;width: max-content;max-width: 250px; }
.l-tooltip .l-tooltip-wrapper:after { visibility: hidden; opacity:0; left: -1px; top: 14px; content: "";position: absolute; margin-left: -5px;border-width: 5px;border-style: solid;border-color: transparent transparent transparent var(--lgszOrange);transition: opacity .3s;transform: translate(-50%,-100%); }
.l-tooltip .l-tooltip-wrapper i { font-size: 18px; }
.l-tooltip .l-tooltip-wrapper:hover:before { visibility: visible; opacity: 1; }
.l-tooltip .l-tooltip-wrapper:hover:after { visibility: visible; opacity: 1; }

/* Popups */
.md-dialog-container md-dialog { min-width: 500px; font-family: 'Poppins', sans-serif; font-size: 16px; }
.md-dialog-container md-dialog md-toolbar { background: #fff; border-bottom: solid #cccccc 1px; }
.md-dialog-container md-dialog md-toolbar p { width: 100%; text-align: center; font-size: 20px; font-weight: 700; padding: 0; }
.md-dialog-container md-dialog md-toolbar i { font-size: 26px; color: black; }
.md-dialog-container md-dialog md-dialog-content { background: #fff; }
.md-dialog-container md-dialog md-dialog-actions { background: #fff; border-top: solid #cccccc 1px; }

/*N8N*/
.n8n-widget {  }
.n8n-widget p { padding: 0; margin: 0; }
.n8n-widget .alert {  }
.n8n-widget .alert.success { background: #bcffbc; }
.n8n-widget .alert.relative { display: inline-block; }
.n8n-widget a { position: relative !important; }

@keyframes lds-dual-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); } 
}

/***************************
        LOGIN PAGE
****************************/
#login { background-color:var(--lightgrey); position:fixed; top:0; left:0; right:0; bottom:0; }
#login .login-area { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60%); }
#login .login-area .topsection { text-align:center; margin-bottom: 48px; }
#login .login-area .topsection h1 { margin:0; }
#login .login-area .topsection h1 + h2 { margin:0; line-height: 12px; height: 32px; }
#login .login-area .bottomsection { text-align:center; margin-top: 48px; }
#login .energiser { background-image: url(/Content/Images/bg_energiszer.svg); position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-position: bottom -40% right -15%; background-repeat: no-repeat; background-size: auto 90%; opacity: .1; }

#login .azure-login {
    height: 41px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--borderColor)
}

#login .azure-login div {
    display: flex;
    justify-content: center;
    align-items: center
}

#login .azure-login div img {
    padding: 0 12px
}

#login .azure-login div p {
    padding: 0 !important;
    font-weight: 600
}


/***************************
        PAGE(S)
****************************/
#page #main { padding-bottom: 48px; position: relative; min-height: 100vh; transition: margin-left var(--animationdelay); }
#page.public-access #main { margin-left: 0; }
#page #main .header { display:block; padding: 24px; background-color: #fff; box-shadow: 2px 1px 4px #cccccc; }
#page #main .header p { margin:0; padding:0; }
#page #main .body { display:block; padding: 24px; }
#page #main .body.no-padding { padding: 0; }
#page #main footer { position:absolute; bottom:0; left:0; right:0; padding: 12px; background-color: #0000000a; }
#page #main footer #copyright-line { float:right; }
#page #main footer #copyright-line a { font-size: 14px; color: #b5b5b5; }

/***************************
        SIDEBAR
****************************/
#page {  }
#page #sidebar { height: 100vh; width: 64px;  position: fixed;  z-index: 1;  top: 0; left: 0; background-color: #000; overflow-x: hidden; transition: var(--animationdelay);  }
#page #sidebar.open { width: var(--sidebarwidth); }
#main { margin-left: 64px; }
#page .sidebar { display: flex; justify-content: space-between; flex-direction: column; height: 100%; width: var(--sidebarwidth); }
#page .sidebar a:hover { color: #f1f1f1; }
#page .sidebar > div { transition: opacity var(--animationdelay); }
#page .sidebar > div.column {  }
#page .sidebar > div.sidebar-top { height: 96px; border-bottom: solid #5f5f5f 1px; flex-shrink: 0; opacity: 1; }
#page .sidebar > div.sidebar-center { margin-bottom: 12px; flex-grow: 1; overflow-y: auto; padding-top: 12px; opacity: 1; }
#page .sidebar > div.sidebar-bottom { flex-shrink: 0; }
#page .sidebar > .closebtn { z-index: 2; outline:none; transition: background var(--animationdelay); position: absolute; top: 0; right: 0; font-size: 28px; color: white; text-decoration: none; height: 96px; width: 64px; text-align: center; line-height: 97px; }
#page .sidebar > .closebtn:hover { background: var(--lgszBlue); }
#page .sidebar > .closebtn i { transform: rotateY(180deg); }
#page .sidebar > div.sidebar-top { opacity:0; }
#page .sidebar > div.sidebar-top .title { margin: 24px 12px;  }
#page .sidebar > div.sidebar-top .title p { line-height: 24px; color: #fff; padding: 0; }
#page .sidebar > div.sidebar-top .title p.versioning { font-size: 14px; }
#page .sidebar > div.sidebar-top .logo {  }
#page .sidebar > div.sidebar-top .logo img { display:block; margin:auto; width: 128px; }
#page .sidebar > div.sidebar-center { opacity:0; }
#page .sidebar > div.sidebar-bottom ul { margin:0; padding:0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
#page .sidebar > div.sidebar-bottom ul li { list-style: none; }
#page .sidebar > div.sidebar-bottom ul li a { transition: left opacity background-color var(--animationdelay); position: relative; color: white; display: block; padding: 17px 16px 17px 52px; text-decoration: none; transition: background-color var(--animationdelay); }
#page .sidebar > div.sidebar-bottom ul li a:hover { background-color: var(--lgszBlue); }
#page .sidebar > div.sidebar-bottom ul li.active a { background-color: var(--lgszBlue);; }
#page .sidebar > div.sidebar-bottom ul li a i { position: absolute; left: 16px; top: 16px; font-size: 26px; width: 28px; height: 28px; text-align: center; }
#page .sidebar > div.sidebar-bottom ul li a span { opacity:0; }

#page #sidebar.open + #main,
#page #sidebar-mobile.open + #main { margin-left: var(--sidebarwidth); }
#page #sidebar.open .sidebar > div.closebtn i { transform: rotateY(0deg); }
#page #sidebar.open .sidebar > div.sidebar-top { opacity: 1; }
#page #sidebar.open .sidebar > div.sidebar-center { opacity: 1; }
#page #sidebar.open .sidebar > div.sidebar-bottom ul li.active a { background-color: transparent; border-right: solid var(--lgszBlue) 8px; }
#page #sidebar.open .sidebar > div.sidebar-bottom ul li a i { left: 10px; }
#page #sidebar.open .sidebar > div.sidebar-bottom ul li a span { opacity:1; }

#page #sidebar.open .sidebar > div.sidebar-center .messages {  }
#page #sidebar.open .sidebar > div.sidebar-center .messages .no-messages { padding: 12px; text-align: center; }
#page #sidebar.open .sidebar > div.sidebar-center .messages .no-messages p { color: white; }
#page #sidebar.open .sidebar > div.sidebar-center .messages .no-messages a { color: var(--lgszBlue); }
#page #sidebar.open .sidebar > div.sidebar-center .messages .message { max-height: 250px; overflow:hidden; transition:all var(--animationdelay); position:relative; border-radius: 5px; margin: 0 6px 6px 6px; border-left: solid var(--lgszBlue) 4px; padding: 8px; padding-top:0; }
#page #sidebar.open .sidebar > div.sidebar-center .messages .message:hover { background: var(--lgszBlue); }
#page #sidebar.open .sidebar > div.sidebar-center .messages .message .close { transition: color .3s; outline: none; cursor:pointer; position: absolute; right: 0; color: transparent; bottom: 0; width: 32px; height: 32px;text-align: center; line-height: 32px; font-size: 18px; }
#page #sidebar.open .sidebar > div.sidebar-center .messages .message:hover .close { color: #fff; }
#page #sidebar.open .sidebar > div.sidebar-center .messages .message .view {  }
#page #sidebar.open .sidebar > div.sidebar-center .messages .message .message-body { padding-right:24px; }
#page #sidebar.open .sidebar > div.sidebar-center .messages .message .message-body p { padding:0; color:white; }
#page #sidebar.open .sidebar > div.sidebar-center .messages .message .message-body a { color: white; }
#page #sidebar.open .sidebar > div.sidebar-center .messages .message .message-body span.sentat { color:#868686; font-size: 12px; }
#page #sidebar.open .sidebar > div.sidebar-center .messages .message:hover  .message-body span.sentat { color: #fff; }

/*Trackbar*/
#page #sidebar .sidebar > div.sidebar-center::-webkit-scrollbar { width: 8px; }
#page #sidebar .sidebar > div.sidebar-center::-webkit-scrollbar-track { background: #ffffff45; }
#page #sidebar .sidebar > div.sidebar-center::-webkit-scrollbar-thumb { background-color: #717171; border-radius: 14px; width: 5px;}

/* Mobile/Small devices */
#page #sidebar-mobile { display:none; }
#page #sidebar-mobile .sidebar { height: 64px; position: fixed; bottom: 0; background: #000; z-index: 1000;  width: 100%; margin: auto; }
#page #sidebar-mobile .sidebar .sidebar-bottom {  }
#page #sidebar-mobile .sidebar .sidebar-bottom ul { margin: 0; padding: 0; display: flex; flex-direction: row; justify-content: center; height: 100%; }
#page #sidebar-mobile .sidebar .sidebar-bottom ul li {  }
#page #sidebar-mobile .sidebar .sidebar-bottom ul li a { height: 64px; width: 64px; padding: 0; }

/***************************
        DASHBOARD(S)
****************************/
#page .reports .report-widget { border-radius: 5px; position: relative; height: 100%; }
#page .reports .report-widget .block-header { padding: 12px 24px; }
#page .reports .report-widget .block-body { padding: 12px 24px; overflow-x: auto; }
#page .reports .report-widget .block-footer { padding: 12px 24px; }
#page .reports .report-widget .loader { margin: 24px auto; }
#page .reports .report-widget .block-body {  }
#page .reports .report-widget .block-body .cache-notify { line-height: 24px; color: rgba(0,0,0,0.5); position:absolute; right: 24px; bottom: 12px; font-size: 12px; padding: 0; }

#page .reports .report-widget #weekplanning {  }
#page .reports .report-widget #weekplanning tr td .small { font-size: 12px; color: grey; }


/***************************
        MESSAGES
****************************/
.messages.block table tr td { vertical-align: text-bottom; }
.messages.block table tr td.minwidth,
.messages.block table tr td:last-of-type { min-width: 250px; }

/***************************
          Report
****************************/
#report {  }
#report .report-filters {  }
#report .report-filters .block-body .form { display: flex; align-items: center; }
#report .report-filters .filter { display:inline-block; margin-right: 24px; padding-bottom: 0; }
#report .report-filters .filter button { margin-bottom: 0; }
#report .report-filters .filter .dropdown { min-width: 100px; }
#report .report-filters .filter .checkbox {  }
#report .report-filters .filter .checkbox input { width: unset; float: left; margin-right: 10px; }
#report .report-filters .filter .checkbox input + label { float:left; line-height: 32px; }
#report .report-filters .filter .datepicker {  }
#report .report-filters .filter .datepicker button.day-button { width: 32px; height: 32px; transition: color var(--animationdelay), background-color var(--animationdelay); color: var(--lgszBlue); position: relative; float: left; background: unset; border: unset; border-bottom: solid black 1px; padding: 3px 12px 4px 12px; }
#report .report-filters .filter .datepicker button.day-button:hover { background-color: var(--lgszBlue); color: white; }
#report .report-filters .filter .datepicker input.day-buttons { float: left; width: calc(100% - 64px); }
#report .report-filters .filter .datepicker input.day-buttons + button.day-button { float:right; }

#report .report-tabs { background-color: #fff; box-shadow: 2px 1px 4px #cccccc; display: flex; width: 100%; }
#report .report-tabs .report-tab { padding: 24px; transition: all .3s; cursor:pointer; }
#report .report-tabs .report-tab:hover { background-color: var(--lgszBlue);  }
#report .report-tabs .report-tab p { padding: 0; margin: 0; }
#report .report-tabs .report-tab:hover p { color: white;  }
#report .report-tabs .report-tab.active { background-color: #dddddd; }


#report .report-actions { position: absolute; top: 16px; right: 16px; }
#report .report-actions .report-icon { width: 95px; transition: color var(--animationdelay); cursor:pointer; display: inline-block; float: right; height: 56px; padding: 8px; margin-left: 8px; text-align: center; }
#report .report-actions .report-icon i { display: block; font-size: 28px; }
#report .report-actions .report-icon i + span { font-size: 14px; line-height: 14px; }
#report .report-actions .report-icon:hover { color: var(--lgszBlue); }

#popup .notifications { }
#popup .notifications .notification { border-bottom: solid #cccccc 1px; padding-bottom: 24px; margin-bottom: 24px; }
#popup .notifications .notification p { padding:0; }
#popup .notifications .notification p.notification-title { font-weight: 700; font-size: 18px; }
#popup .notifications .notification p.notification-description { max-width: 600px; }
#popup .notifications .notification .form .form-group .dropdown { display:inline-block; }
#popup .notifications .notification .form .form-group .dropdown select { width: 135px; height: 37px; border: solid var(--lgszOrange) 1px; float: left; }
#popup .notifications .notification .form .form-group .dropdown .button { border-radius: 0 30px 30px 0; display:inline-block; float:left; }
#popup .description.small { max-width: 500px; }

/*.report-detail tbody tr.even { background-color: #f1f1f1 !important; }
.report-detail tbody tr.odd { background-color: #fff !important; }
*/.report-detail tbody tr.total {font-weight: bold;background-color:white !important;border-top: solid black 1px;}
.report-detail tbody tr {  background: unset;}
.report-detail tbody tr td,
.report-detail thead tr th { position:relative; vertical-align: text-top;}
.report-detail tbody tr td {min-width: 210px;}
.report-detail span.project_hours,
.report-detail span.small {font-size: 12px;}
.report-detail span.small.no-padding { padding:0; margin:0; }
.report-detail span.right { float:right;}
.report-detail span.grey { color: grey; }
.report-detail span.project_hours.color_ok {color: grey;}
.report-detail span.project_hours.color_warning {color: #e09100;}
.report-detail span.project_hours.color_error {color: red;}
.report-detail.additional-padding { padding: 24px; }

/***************************
          No-permission
****************************/

.no-permission { text-align:center; margin-top: 15vh; }


/***************************
          MEDIA
****************************/

@media only screen and (max-width: 1700px) {
    #page .reports .report-widget .block-body .cache-notify { display:none; }
}

@media only screen and (max-width: 1400px) {
    * {
        --sidebarwidth: 220px;
    }

     #page .reports .report-widget .block-body { padding: 4px; }

    .exception .text p { font-size: 14px; }
    .exception .icon { font-size: 36px; }

    #page #sidebar .sidebar .title p.heading-3 { font-size: 18px; }
    #page #sidebar .sidebar > div.sidebar-bottom ul li a { padding: 12px 2px 12px 42px; }
    #page #sidebar .sidebar > div.sidebar-bottom ul li a i { font-size: 20px; line-height: 16px; }
    #page #sidebar.open .sidebar > div.sidebar-bottom ul li a i { left: 8px; }

    #page #sidebar.open .sidebar > div.sidebar-center .messages .message .message-body p { font-size: 12px; }
}

@media only screen and (max-width: 1280px) {
    h1, .heading-1 {line-height: 36px; font-size: 36px; }
    h2, .heading-2 {line-height: 24px; font-size: 24px; }
    h3, .heading-3 {line-height: 18px; font-size: 18px; }
    h4, .heading-4 {font-size: 14px; }

    .block { box-shadow: 2px 1px 4px #cccccc; background-color:white; margin-bottom: 24px; }
    .block .title { font-size: 14px; font-weight: 700; }

    .block .block-body .specvalue .value { font-size: 36px; }
    .block .block-body .specvalue .unit { font-size: 12px; }

    #report .report-actions { top: 8px; }
    #report .report-actions .report-icon i { font-size: 22px; }

    #report .report { font-size: 12px; line-height: 14px; }
    .report { font-size: 13px; line-height: 14px; }

    table tr th,
    table tr td { font-size: 13px; line-height: 14px; min-width: unset !important; padding: 6px 12px; }

    .report-detail tbody tr th,
    .report-detail tbody tr td { min-width: 120px !important; padding: 6px 12px; }
    .report-detail span.project_hours,
    .report-detail span.small {font-size: 11px;}

    #popup { font-size: 14px; }
}

@media only screen and (max-width: 768px) {
    #main { margin-left: 0 !important; margin-top: 0 !important; margin-bottom: 64px; }
    #page #main { padding-bottom: 112px; }
    #page #main footer { margin-bottom: 64px !important; }
    md-toast { z-index: 200000; bottom: 64px; right: 0; left: 0; max-width: unset; }
    
    #sidebar { display:none !important; }
    #sidebar-mobile { display:block !important; }
    #system-info { top: 16px; bottom: unset; }
    #login .login-area { width: 80vw; }
    
    #report .report-actions { position: relative;display: block;background: white;top: unset;right: unset;bottom: unset;left: unset;margin-bottom: 24px;box-shadow: 2px 1px 4px #cccccc;background-color: white;padding: 16px; }
    #report .report-actions .report-icon { float: unset; }

    #page .reports .report-widget { /*max-width: 380px; margin: 16px auto;*/ }
    #report .report-filters .filter { width: 100%; margin-bottom: 16px; font-size: 16px; }
    #report .report-filters .filter:last-of-type { margin-bottom: 0; }
    #report .report-filters .filter button { line-height: 24px; font-weight: 500 }
    #report .report-filters .block-body .form { flex-direction: column; }
    table tr th,
    table tr td { font-size: 11px; line-height: 13px; }
    .report { font-size: 11px; line-height: 13px; }
    .report-detail span.project_hours,
    .report-detail span.small {font-size: 10px;}
    .report-detail tbody tr th,
    .report-detail tbody tr td { padding: 6px; }

    .hide-from-phone { display:none; }
}

.grid {display: grid; grid-gap: 24px;}
.grid .item {position: relative;}
.grid .item a {top: 0; right: 0; bottom: 0; left: 0; position: absolute; z-index: 1;}
.grid .item .block.report-widget {transition: all linear 125ms;}
.grid .item:hover .block.report-widget {background-color: #ffbf00;}
.grid .item:hover .block.report-widget .block-header .title::after {background-position: -124px -48px;}
.grid .item:hover .block.report-widget .loader:after {border-color: #000000 transparent #000000 transparent;}


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

@media (min-width: 1280px) {
    .grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (min-width: 1680px) {
    .grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media (min-width: 2100px) {
    .grid {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}