:root{
--bs-body-font-family:'Open Sans';
--bs-border-width:0.05rem;
--blue:#49abe0;
--bs-primary-rgb:73,171,224; /* --blue */
--light-blue:#eef2f7;
--bs-light-rgb:238,242,247; /* --light-blue */
--dark-blue:#17405c;
--bs-secondary-color:rgb(23,64,92); /* --dark-blue */
--bs-danger-bg-subtle:#ff999b;
--bs-success-bg-subtle:#e0ffc9;
--bs-success:#a2de76;
--success-bg-medium:#c5f5a2;
--bs-border-color:#49abe070;
}

html, body {font-size:14px;min-width:360px;}

/* header */
header svg {width:10rem;}

/* logo */
.no-fill{fill: none;}
.fill-dark-blue{fill: var(--dark-blue);}
.fill-blue{fill:var(--blue);}
.group-clip-path{clip-path: url(#clippath);}

/* login */
.login .container {max-width:25rem;background-color:var(--light-blue);border:1px solid var(--blue);border-radius:var(--bs-border-radius);box-shadow:0 0 10px 0px rgba(74, 171, 224, .25);}

/* form elements */
.btn-primary, .btn-outline-primary { --bs-btn-border-color:var(--dark-blue);--bs-btn-hover-bg:var(--blue);--bs-btn-hover-border-color:var(--blue);--bs-btn-active-bg:var(--blue);--bs-btn-active-border-color:var(--blue);}
.btn-primary {--bs-btn-bg:var(--dark-blue);}
.btn-outline-primary {--bs-btn-color:var(--dark-blue);}
.form-check-input:checked {background-color:var(--dark-blue);border-color:var(--dark-blue);}
.form-control:focus, .form-check-input:focus {border-color:var(--blue); box-shadow:0 0 0 .25rem rgba(74,171,224,.25);}
.form-floating>textarea.form-control {height: calc(7rem + calc(var(--bs-border-width)* 2));min-height: calc(3.5rem + calc(var(--bs-border-width)* 2));}
.form-floating>textarea.form-control.textarea-lg {height: calc(21rem + calc(var(--bs-border-width)* 2));}
.form-floating>label {color: rgba(var(--bs-body-color-rgb), .65);}

/* clock */
canvas {width:100%;}
.col-clock {display:none;}

/* list */
#projectsMobile .status {display:flex;align-items:center;}
#projectsMobile .project {border:1px solid rgba(var(--bs-primary-rgb));background-color:rgb(var(--bs-light-rgb));}
#projectsMobile .project>div {padding:.25rem;}
#projectsMobile>.project>div:first-child {padding-top:var(--bs-gutter-y);}
#projectsMobile>.project>div:last-child {padding-bottom:var(--bs-gutter-y);}
#projectsMobile .project>div::before{display:inline-block;margin-right:.5rem;font-weight:700;}
#projectsMobile .status::before{content:'Status:';}
#projectsMobile .ident::before{content:'Št. projekta:';}
#projectsMobile .client::before{content:'Naročnik:';}
#projectsMobile .project-name::before{content:'Objekt:';}
#projectsMobile .estStart::before{content:'Predv. pričetek del:';}
#projectsMobile .delay::before{content:'Zamuda dni:';}
#projectsMobile .start::before{content:'Podpis pogodbe:';}
#projectsMobile .deadline::before{content:'Rok izvedbe:';}
#projectsMobile .remaining::before{content:'Ostane dni:';}
#projectsMobile .project-manager::before{content:'Vodja projekta:';}
#projectsMobile .actions::before{content:'Delovodja:';}

#projectsDesktop {display:none;}
.container, .container-fluid, .row {--bs-gutter-x:1.25rem;}
.project-list {font-size:1rem;}
.project-hidden td, .project-hidden + .noteRow td{color:#999999;}

.table>:not(caption)>*>* {padding:.3rem;box-shadow:none;}
.table-primary {--bs-table-bg:var(--dark-blue);--bs-table-color:#fff;--bs-table-border-color:var(--blue);}
.table-hover>tbody>tr:hover>td {--bs-table-bg:var(--light-blue);}
.table-hover>tbody>tr:hover>td:not(.actions){cursor:pointer;}
.table-hover>tbody>tr:hover>td.actions>div{display:flex!important;background-color:var(--light-blue);background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(238,242,247,1) 35%);}
.table-hover>tbody>tr.hasNote.hover, .table-hover>tbody>tr.hasNote:hover + tr.noteRow>*{--bs-table-bg:var(--light-blue);--bs-table-color-state: var(--bs-table-hover-color);--bs-table-bg-state: var(--bs-table-hover-bg);}
.table-hover>tbody>tr.hasNote.hover > td.ident, .table-hover>tbody>tr.hasNote:hover > td.ident {border-bottom-color:var(--light-blue);}

#projectsDesktop .noteRow td, #projectsDesktop .hasNote .ident {background-color:var(--light-blue)!important;}
#projectsDesktop .hasNote {border-color:transparent;}
.hasNote > td {border-width:var(--bs-border-width);border-color:var(--blue);}
.hasNote > td.ident {border-bottom-color:var(--light-blue);}
th, #projectsDesktop .notes, #projectsDesktop .client, #projectsDesktop .project-name, #projectsDesktop .project-manager, #projectsDesktop .actions {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;max-width:0;}
.delay:not(:empty) {background-color:var(--bs-danger-bg-subtle);}
#paging {color:var(--blue);font-weight:700;font-size:1.1rem;}

.circle-progress {transform: rotate(-90deg);}
.circle-background {stroke: #eee;}
.circle-progress-bar {stroke: var(--dark-blue);transition: stroke-dashoffset 0.1s linear;}

#projectsDesktop .status {text-align:center;vertical-align:middle;}
.status i {display:inline-block;width:1rem;height:1rem;border-radius:50%;content:'';}
.status-0 {background-color:var(--bs-danger-bg-subtle);}
.status-1 {background-color:var(--bs-success);}

.alert-level-1 {background-color:var(--bs-success-bg-subtle)!important;}
.alert-level-2 {background-color:var(--success-bg-medium)!important;}
.alert-level-3 {background-color:var(--bs-success)!important;}
.alert-level-4 {background-color:var(--bs-danger-bg-subtle)!important;}
.alert-danger {--bs-alert-bg:#f8d7da;}

.actions>div {top:.15rem;}

.offcanvas {--bs-offcanvas-width:250px;}

/* users */

.users-list .row>div {padding-top:.5rem;padding-bottom:.5rem;}
.users-list .row.border-top {background-color:var(--dark-blue);}
.users-list .col-actions {flex:0 0 auto;width:90px;}

/* project form */
.users-list, .project-form {max-width:720px;}

/* weather */
.col-weather {margin-top:1.5rem;margin-bottom:1.5rem;}
#weatherContent p {text-align:center;}
#weatherContent div>p:first-child {margin-bottom:0;}
#weatherContent>div:first-child img {max-width:50%;}
#weatherContent>div:last-child img {max-width:70%;}
#weatherContent .d-flex>div{width:50%;flex:0 0 auto;max-width:100%;}
#weatherContent .d-flex>div:first-child {padding-right:1rem;}
#weatherContent .d-flex>div:last-child {padding-left:1rem;}
#weatherContent .forecast {margin-top:1rem;}
/*#weatherContent .d-flex p+p {display: -webkit-box;overflow-wrap: break-word;text-overflow: ellipsis;-webkit-box-orient: vertical; margin-bottom:.5rem;-webkit-line-clamp:2; height:calc(1.6rem * var(--bs-body-line-height));}*/

/* traffic */
#trafficContent p {margin-bottom:.5rem;}
#trafficContent > p:last-child {margin-bottom:0;}

.prettyScrollbar::-webkit-scrollbar {width:4px;}
.prettyScrollbar::-webkit-scrollbar-button {display:none;}
.prettyScrollbar::-webkit-scrollbar-thumb {background: #ccc;border-radius:2px;}
.prettyScrollbar::-webkit-scrollbar-thumb:hover {background:var(--dark-blue);}
.prettyScrollbar::-webkit-scrollbar-track, .prettyScrollbar::-webkit-scrollbar-track-piece {background:var(--bs-light-rgb);}

/* footer */
.bottom-info {color:var(--dark-blue);font-size:.9rem;}
.bottom-info p strong {font-size:.95rem;}
.bottom-info .heading {font-size:1.05rem;}
.bottom-info .content > p:last-child {margin-bottom:0;}
.bottom-info>.row>.col{flex:0 0 auto;width:100%;}

@media (min-width:576px){
    #weatherContent {display:flex;}
    #weatherContent>div:first-child, #weatherContent .d-flex>div{width:calc((100vw - 6rem) / 3);}
    #weatherContent>div:first-child{padding-right:1rem;}
    #weatherContent>div:first-child img, #weatherContent>div:last-child img {max-width:100%;}
    #weatherContent .forecast {margin-top:0;}
}

@media (min-width:768px){
    #projectsMobile>.project:nth-child(2)>div:first-child {border-top:none;padding-top:.25rem;}
    
}

@media (min-width:992px){
    #projectsMobile>.project:nth-child(3)>div:first-child {border-top:none;padding-top:.25rem;}
    .bottom-info {--fixed-width-containers:18rem;}
    .bottom-info>.row {height:100%;}
    .bottom-info>.row>.col:not(.col-traffic) {flex:0 0 auto;}
    .bottom-info>.row>.col.col-weather, .bottom-info>.row>.col.col-clock {width:var(--fixed-width-containers);}
    .bottom-info>.row>.col.col-board {width:calc((100vw - 2rem - var(--fixed-width-containers)) * 0.5);}
    .bottom-info>.row>.col.col-traffic {width:auto;flex-grow:1;flex-basis:0%;margin-bottom:0;}
    .col-traffic {width:auto;margin-bottom:1.5rem;}
    #trafficContent {max-height:var(--traffic-max-height);overflow:auto;}
    #messageboardContent {max-height:var(--board-max-height);overflow:auto;}
    .col-weather {margin-top:0;margin-bottom:0;}
    #weatherContent {display:block;}
    #weatherContent>div:first-child img, #weatherContent>div:last-child img {max-width:10rem;}
    #weatherContent .d-flex>div {width:50%;}
    #weatherContent>div:first-child{padding-right:0;width:auto;margin-bottom:1.5rem;}
    #weatherContent>div:first-child img {max-width:50%;}
    #weatherContent>div:last-child img {max-width:70%;}
    #weatherContent .forecast {margin-top:1rem;}    
    #weatherContent p {font-size:0.8rem;}

}

@media (min-width:1200px){
    header svg {width:20rem;}
    #projectsDesktop {display:table;}
    #projectsMobile {display:none;}
    .bottom-info {--fixed-width-containers:20rem;}    
    .bottom-info>.row>.col.col-board {width:calc((100vw - 2rem - (2 * var(--fixed-width-containers))) * 0.5);}        
    #weatherContent p {font-size:0.9rem;}
    .col-clock {display:block;}
}

@media (min-width:1400px){
    .bottom-info {--fixed-width-containers:22rem;}
    
}