body{
    background-image: url('/.dcf/skin/default/images/background.jpg');
    background-size:cover;
    min-height:100vh;

    --glass: linear-gradient(#ffffffee 0%, #ffffffff 2%, #ffffffbb 100%);
    --glass-angled: linear-gradient(45deg, #ffffffee 0%, #ffffffff 2%, #ffffffbb 100%);
    --glass-light: linear-gradient(45deg, #ffffffbb 0%, #ffffffcc 2%, #ffffff88 100%);
    --glass-reverse: linear-gradient(-45deg, #ffffffee 0%, #ffffffff 2%, #ffffffbb 100%);
    --overlay: rgba(255, 255, 255, 0.65);
}

.hidden{ display:none }
.glass{ background: var(--glass); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6{
    color: #006d9f !important;
    font-weight:normal !important;
}

#sidebar .menu-profile, #sidebarCollapse,
#index.with-login #topbar, footer{ 
    display: none; 
}

.bg-info, .bg-dark{ background-color: transparent !important; }

#topbar{
    background:var(--glass-angled);
    backdrop-filter: blur(25px);
    height:55px;
    /*overflow:hidden;*/
    padding-right:15px;
}

#index.with-login #main-content{
    position:fixed;
    top:0;left:0; bottom:0; right:0;
    background:var(--glass-angled);
}

#main-content{ 
    min-height:calc(100vh - 50px);
    background:white;
    padding:1% 5%;
    backdrop-filter: blur(25px);
}

.navbar-brand{
    min-width:250px !important; max-width:250px !important;
    position:fixed; top:0; left:0; right:calc(100vw - 250px); 
    text-align:center;
    margin:0 !important;
}

.navbar-brand img{ min-height:47px; }

#sidebar{
    background:var(--glass); 
    padding-top:50px;
    backdrop-filter: blur(25px);
    overflow-x:hidden; 
}

#sidebar a, #topbar a{
    color: #006d9f;
    margin-left:15px;
    font-size:13px;
}

#sidebar .active{
    background:#f4f4f4; 
    background:linear-gradient(45deg, #00000011, #00000022);
}

#sidebar .menu-icon{
    font-size:10px;
}



/* ----- LOGIN SCREEN ---- */
  
#index.with-login .page-content{
    position:fixed;
    top:0; right:0; bottom:0;
    border-radius:0px;
    width:500px;
    background:var(--glass); 
    padding:5%;
}

#index.with-login .page-content img{
    width:75%;
    height:128px;
    object-fit:contain;
    margin-bottom:25%;
}

#index.width-login .page-content h4{
    display:none;
}

#ctrl-cover-holder:has(+ .uploaded-file-holder img){
    display:none !important;
}

.uploaded-file-holder #file-holder-1{
    width:100% !important;
}

.uploaded-file-holder a{
    margin-left:0px !important;
}

.uploaded-file-holder img{
    width:180px !important;
    height:150px !important;
    object-fit:cover;
}

.projects-edit .tab-pane{
    position:fixed;
    overflow:auto;
    background:white;
    z-index:9999;
    left:0px;
    right:0px;
    max-width:calc(100vw - 250px);
    top:0px;
    bottom:0; 
    box-sizing: border-box; 
    justify-content: space-between;
    box-shadow: 0 0 25px gainsboro; 
}

.projects-edit .nav-tabs .active{
    background-color:#fcfcfc;
    border:1px solid #d2d2d2;
    border-bottom:none !important; 
}

.projects-edit .tab-pane.show{
    display:flex !important;
    box-shadow: 0 0 50px gainsboro;
}

.projects-edit .nav-tabs{ 
    width:100% !important;
    padding-top:20px;
    margin-left:-125px;
    justify-content: center; 
    border-bottom:none !important;
}

#dcf-return{
    display:inline-block;
    margin-left:240px !important;
    background:#f4f4f4;
    padding:18px;
    margin-top:-15px;
    margin-bottom:-15px;
    border-radius:0px !important;
    width:250px;
    color:var(--bs-btn-bg);
    border:none !important;
    transition:all 0.5s ease; 
    position:relative;
    z-index:500;
}

#dcf-return:hover{ opacity: 0.65; }

.project-edit .page-header-breadcrumbs{
    display:none;
}

.project-edit #main-content{
    padding:0 !important;
} 

#dcf-project, #sidebar .upcoming{
    background-color:white;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border:none !important;
    position: relative;
    left:10px; 
    margin-top:50px;
    border-right:1px solid white;
    z-index:9999;
    box-shadow: 0 0 25px gainsboro;  
}

#sidebar .upcoming{
    margin-top:100px;
    padding:0px;
    left:0px;
    width:100%;
    overflow:hidden;
}

#sidebar .upcoming .btn{ color: white }

#sidebar .upcoming a{
    font-size:medium;
    display:inline-block;
    border-bottom:1px solid #f4f4f4;
    margin:8px;
}
#sidebar .upcoming a:hover{ background: #f4f4f4 }

.projects-edit .tab-pane > div.reset-grids, .projects-edit .tab-pane > div.reset-grids .card{ 
    border:none;
    padding:15px;
    width:400px;
    box-sizing: border-box;
    margin-left:-30px;
    background:transparent;
}
.projects-edit .tab-pane > div:first-of-type{
    width:100%;
}

.projects-edit .tab-pane > div.reset-grids .card .form-group .col-sm-4,
#dcf-project .form-group .col-sm-4 { display:none !important }
.projects-edit .tab-pane > div.reset-grids .card .form-group .col-sm-8{ width:100% }

.dcf-timeline-entry{ margin-left:50px; }
.dcf-timeline-entry:first-of-type{ padding-top:50px; }
.dcf-timeline-entry:last-of-type{ padding-bottom:50px; }

.dcf-timeline-entry .row{
    border-left:3px solid #006d9f;
    padding-top:50px;
    padding-left:50px;
    padding-bottom:50px;
    margin-left:50px;
    margin-bottom:-50px; 
    position:relative;
}
.dcf-attach{
    display:inline-block;
    border:1px solid #f4f4f4;
    margin-right:8px;
    transition: all 0.5s ease;
}
.dcf-attach img{
    width:128px;
    height:128px;
    object-fit: cover;
}
.dcf-attach img:hover{
    opacity:0.65;
}
.dcf-attach span{
    padding:15px;
    display:inline-block
}
.projects-edit .page-header-breadcrumbs { display:none }

#dcf-project .card-header{ display:none }
 
.projects-edit .full-pane, .projects-edit .full-pane .page-content{
    width:100% !important;
    height:calc(100vh - 55px);
}

.projects-edit #ctrl-notes-holder{
    position:fixed;
    top:55px;
    left:0;
    right:0;
    bottom:0;
}

.projects-edit #ctrl-notes-holder .note-editor{
    margin-left:0px;
    margin-top:-70px;
    width:100%;
}

.projects-edit #ctrl-notes{ display:none }

#dcf-edjs{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding-top:100px;
    background:transparent;
    overflow:auto;
    z-index:500;
}

#dcf-edjs .codex-editor{
    min-height: 100%;
    width:900px;
    margin-left:auto;
    margin-right:auto;
    box-shadow: 0 0 50px gainsboro;
    background:white;
    padding-top:75px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.dcf-edjs-save{
    position:fixed;
    bottom:32px;
    right:32px;
    z-index:2000;
}

.dcf-timeline-item .ctrls{  
    display:flex;
    flex-direction: column;
    position:absolute;
    left:-54px;
    top:40px; 
    width:50px;
    height:120px;
    text-align: center;
    opacity:0;
    transition: all 0.5s ease;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    color:white;
    justify-content: space-between;
    overflow:hidden;
    
}

.dcf-timeline-item:hover{ background: var(--overlay) }

.dcf-timeline-item:hover .ctrls{
    display:flex;
    opacity:1;
}
 
.dcf-timeline-item .ctrls .btn{
    width:50px;
    padding-top:15px;
    padding-bottom:15px;
    margin-left:-12px;
    zoom:0.65;
}

.projects-edit #main-content{
    backdrop-filter: blur(1px);
}

.project{
    width:300px;
    height:400px;
    overflow:hidden;
}

.project.card{ margin-bottom: 8px }

.project{ transition: all 0.5s ease }

.project.overdue{
    /*background:rgba(255, 0, 0, 0.8);*/
    border:1px solid crimson; 
    opacity:0.75;
}
.project.abandoned{
    /*background:rgba(255, 200, 0, 0.8);*/
    opacity:0.125 !important;
}

.project.completed{
    /*background: rgba(0, 255, 0, 0.125);*/
    opacity:0.25 !important;
}

.project:hover{
    opacity:0.9;
}

.milestone.past{
    opacity:0.35;
}

.milestone.soon .card-footer{
    background:rgba(255, 200, 0, 0.8);
}
.milestone.imminent .card-footer{
    background:rgba(255, 0, 0, 0.25);
}

.manifest-item{
    float:left;
    margin:15px;
    width:calc(50% - 45px);
    text-align: left;
} 

.manifest-item img{
    height:192px;  
    width:192px;  
    object-fit: contain;
    background-color:dimgray;
}

.modal{ 
    z-index:5000;
    position:fixed;
 }

 .modal-backdrop{
    z-index:100;
    position:fixed;
    display:none !important;
 } 

 .manifest-item .col-md-1 a{
    color:silver;
    transition: all 0.4s ease;
 }

 .manifest-item .col-md-1 a:hover{
    color:red;
 }

 .index-register .card{
    padding:2.5% !important;
 } 

 .component img, .components-index .card img{
    object-fit: contain;
 }

.home.component{
    display:inline-block;
    margin-right:8px;
    height:80px;
    margin-bottom: 16px;
}

 .home.component img{
    width:150px !important;
    height:78px !important;
    object-fit: cover !important;
 }

 .nav-tabs .nav-link{ 
    border-bottom: none !important;
    margin-top:-2px !important;
 }

 .lockout{
    position: fixed;
    top:0; left:0; right:0; bottom:0;
    z-index:9999; 
 }

 .card, .card-2{
    border:none;
    box-shadow:0 0 25px gainsboro !important;
 }

 .card-footer{ border:none }

 .components-index .card-2 img{
    width:100px;
    height:80px;
    object-fit: cover;
    border-radius:4px;
 }

 .page-header-breadcrumbs{
    display:none;
 }

 .project.add-new{
    text-align: center;
    background:transparent;
    border:1px dashed silver;
    padding-top:25%;
    box-shadow: none !important;
 }

 .project.add-new:hover{
    background:#f4f4f4;
    border:1px soild silver !important;
 }

 #sidebar .upcoming{
    margin-left:15px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background:white;
    border:none;
 }

 #sidebar .upcoming .card-header,
 #sidebar .upcoming .card-footer{
    background:white;
    border:none;
    font-size:smaller;
    color:gray; 
 }
 
 #sidebar .upcoming .card-footer a{
    font-size:small;
 }
   

 #topbar .header{
    margin-left:235px; 
    width:100%;
    height:65px;
    overflow: hidden;
    box-shadow: inset 0 0 25px #f0f0f0;
 }

 .components-view #topbar .header{
    height:60px;
    overflow:hidden;
    padding-top:8px !important; 
 }

 #page-content > section.page > .mb-3:first-of-type{
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    overflow:auto;
 }

 body{ overflow:  hidden; }

 #topbar .back-btn{
    background:transparent;
    border:none; 
    transition: all 0.5s ease;
 }
 #topbar .back-btn:hover{ 
    box-shadow: 0 0 25px gainsboro;
 }

 #topbar .btn:not(.back-btn){
    color:white;
 }

 a.card:hover{
    box-shadow: 0 0 5px gainsboro !important;
 }


 #topbar .attach{
    width:100%; 
    height: 65px;
    margin-top:-5px;
 }

 #topbar .nav-tabs .nav-link{
    height:51px;
    min-width:125px;
    background:transparent;
    margin:0px;
    text-align: center;
    padding-top:15px;
 }


 #topbar .nav-tabs .nav-link.active{
    border:none;
    background:white;
    box-shadow: 0 0 25px gainsboro;
 }

.milestone img{
    width:128px;
    height:128px;
    border-radius:5px;
    object-fit: cover;
} 

.tab-pane .page .card{
    box-shadow: none !important;
    border:none !important; 
}

.tab-pane .page .note-editor.card{
    margin-left:0px !important;
    padding-left:0px !important;
}

div[role=toolbar]{
    background:var(--glass-angled);
    border:1px solid #f4f4f4;
    border-bottom:none !important;
}

div[role=toolbar] button{
    min-width:40px;
    min-height:40px;
    border:none;
}

div[role=seperator]{
    background:var(--glass-angled);
    border-top:none !important;
}

div[role=textbox]{
    box-shadow: 0 0 25px gainsboro;
    border:1px solid #f4f4f4;
}

.note-editor .btn[aria-label=Style],
.note-editor .btn[aria-label=Paragraph],
.note-editor .btn[aria-label="More Color"],
.note-editor .btn[aria-label="Help"],
.note-editor .btn-codeview, .note-insert, .note-fontname{
    display:none;
}

.overlay{
    position:fixed;
    top:0; left:0;
    right:0; bottom:0; 
    z-index:5000;
}

.tab-pane .overlay{
    background:white;
}

.pane-add{
    margin-top:50px;
}

.kb-articles{
    padding:15px;
    font-size: smaller;
    display:flex;
    flex-direction: column;
}

.kb-articles a{
    border-bottom:1px solid #f4f4f4;
    padding:5px;
    transition: all 1s ease;
}

.kb-articles a:hover{
    background:#f4f4f4;
    padding-left:25px;
}

.knowledgebase-edit .col.attach .card{
    zoom:0.8;
    margin-top:25px;
    max-width:500px;
    margin-left:auto;
    margin-right:auto;
}

.dcf-restrict #dcf-project button,
.dcf-restrict #timeline-add-form,
.dcf-restrict .dcf-timeline-item .ctrls,
.dcf-restrict .dcf-owner,
.dcf-restrict #ctrl-status-holder,
.dcf-restrict [data-page-type="add"]{
    display:none !important;
}

#topbar .dropdown-menu{
    border:none;
    border-radius: none;
    background:var(--glass-angled);
    width:200px;
    padding:0;
    border-top:1px solid #f4f4f4;
}

#topbar .dropdown-item{
    border:none;
    border-radius: none;
    background:var(--glass-angled);
    padding:15px 15px 15px 25px;
    margin:0;
    color:gray;
    font-size:small;
}

#topbar .dropdown-item:hover{
    background:#f4f4f4;
}

.account-index .col-sm-9{ max-width: 800px;}
.img-fluid{ object-fit: contain }
.account-index .avatar { display:none }
.account-index .bg-primary {
    background:#f4f4f4 !important
}
.account-index .nav-pills a{ color:#006d9f }
.account-index .nav-pills a.active {
    background-color:#006d9f !important;
    color:white;
}

.home-index #page-content{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:auto;
    z-index:9999;
    padding:25px 15px;
}

.card.component{
    max-width:500px;
}