/*
  eKilimo shared layout rules
  Page templates should not define layout CSS in PHP files.
*/
html,
body{
    height:100%;
}

.app-layout{
    min-height:100vh;
}

.app-main{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.app-content{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
}

.app-global-footer{
    margin-top:auto !important;
    padding:14px 18px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:13px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.u-mt-12{margin-top:12px !important;}
.u-mt-10{margin-top:10px !important;}
.u-mt-14{margin-top:14px !important;}
.u-mt-15{margin-top:15px !important;}
.u-mt-16{margin-top:16px !important;}
.u-mt-18{margin-top:18px !important;}
.u-mt-20{margin-top:20px !important;}
.u-mt-22{margin-top:22px !important;}
.u-mt-24{margin-top:24px !important;}
.u-mt-26{margin-top:26px !important;}
.u-mt-30{margin-top:30px !important;}
.u-mb-12{margin-bottom:12px !important;}
.u-mb-16{margin-bottom:16px !important;}
.u-mb-18{margin-bottom:18px !important;}
.u-mb-20{margin-bottom:20px !important;}
.u-m-0{margin:0 !important;}
.u-inline-actions{
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.u-inline-filter{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0;
}
.u-end-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.u-align-end{align-self:end !important;}
.u-font-13{font-size:13px !important;}
.u-font-15{font-size:15px !important;}
.u-font-20{font-size:20px !important;line-height:1.2 !important;}
.u-font-24{font-size:24px !important;}
.u-muted{color:var(--muted) !important;}
.u-muted-strong{
    color:var(--muted) !important;
    display:inline !important;
}
.u-float-count{
    float:right;
    color:var(--muted);
    font-size:12px;
}
.u-health-message{
    margin:12px 0 0 !important;
    line-height:1.45;
}
.u-two-statgrid{
    grid-template-columns:1fr 1fr !important;
}
.u-hidden{
    display:none !important;
}

.message-error{
    color:var(--ek-danger);
}

.borderless-btn{
    border:none !important;
}

.danger-soft-btn{
    border:none !important;
    background:var(--ek-danger-soft) !important;
    color:var(--ek-danger) !important;
}

.top-link.primary{
    background:var(--green) !important;
    color:#ffffff !important;
    border-color:var(--green) !important;
}

.performance-bar span{
    width:var(--progress, 0%);
}

.progress-fill{
    width:var(--progress, auto);
    height:var(--progress-height, auto);
}

.progress-bar{
    width:var(--progress, auto);
}

.chart-bar{
    height:var(--bar-height, auto);
}