/*
https://www.google.com/search?q=css+floating+header&oq=css+floating+header&aqs=chrome..69i57j0i19i22i30l7.3351j0j7&sourceid=chrome&ie=UTF-8
 */

@font-face {
    font-family: 'Open Sans Regular';
    src: url('../fonts/opensans-regular.eot');
    src: url('../fonts/opensans-regular.eot?#iefix') format('eot'),
         url('../fonts/opensans-regular.woff') format('woff'),
         url('../fonts/opensans-regular.ttf') format('truetype'),
         url('../fonts/opensans-regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans Light';
    src: url('../fonts/opensans-light.eot');
    src: url('../fonts/opensans-light.eot?#iefix') format('eot'),
         url('../fonts/opensans-light.woff') format('woff'),
         url('../fonts/opensans-light.ttf') format('truetype'),
         url('../fonts/opensans-light.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

* { box-sizing: border-box; }
body { padding: 0px; margin: 0px; font-family: 'Open Sans Light'; font-size: 15px; background: #FFF; }

.cke_screen_reader_only { top: -100px; left: -100px; }

.cipro-textcolor {
background-image: -webkit-linear-gradient(left, #B62292, #2C84C4);
background-image: -o-linear-gradient(left, #B62292, #2C84C4);
background-image: linear-gradient(to right, #B62292, #2C84C4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#_toasterContainer { position: fixed; z-index: 10000; width: 60%; left: 50%; min-width: 300px; max-width: 640px; top: 10px; transform: translate(-50%,0%); overflow: hidden; }
#_toasterContainer ._toasterMsg { font-family: 'Open Sans Regular'; margin: 0px 0px 5px 0px; padding: 5px 15px; display: none; font-size: 0.9rem; line-height: 1.4em; border-radius: 10px; box-shadow: 0px 0px 3px #666; }
#_toasterContainer ._toasterMsg.error { background: #cc0000; color: #FFF; }
#_toasterContainer ._toasterMsg.success { background: #00CA72; color: #333; }

#_overlay { position: fixed; top: -1000px; left: -1000px; }
.dialogWindow  { z-index: 200; position: fixed; min-width: 300px; min-height: 50px; background: #FFF; border-radius: 5px; box-shadow: rgba(0,0,0,0.7) 0 25px 50px -15px; }
.dialogWindow .dialogWindowTitle { line-height: 18px; font-size: 1.4rem; cursor: move; padding: 1rem 1rem 1rem 1rem; }
.dialogWindow .dialogWindowTitle .dialogWindowCloser { position: absolute; cursor: pointer; top: 10px; right: 10px; width: 20px; height: 20px; background-image: url(../images/close.svg); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
.dialogWindow .dialogWindowContentContainer { padding: 1rem 1rem 1rem 1rem; }

#_confirmDialog { position: fixed; z-index: 100000; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 1px solid #EEE; background: #FFF; padding: 1rem; border-radius: 5px; box-shadow: rgba(0,0,0,0.7) 0 25px 50px -15px; }
#_confirmDialog .confirmDialog_content { }
#_confirmDialog .confirmDialog_content span { font-weight: bold; }
#_confirmDialog .confirmDialog_buttons { text-align: right; padding: 1rem 0 0 0; }
#_confirmDialog .confirmDialog_buttons>a { display: inline-block; margin-left: 1rem; border-radius: 5px; padding: 5px 10px; cursor: pointer; width: 120px; text-align: center; }
#_confirmDialog .confirmDialog_buttons>a.red { background: #990000; color: #FFF; }
#_confirmDialog .confirmDialog_buttons>a.green { background: #009933; color: #FFF; }

#modal-overlay { opacity: 0; position: fixed; top: 0px; left: 70px; right: 0px; bottom: 0px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; background: rgba(41,47,76,0.7); transform: translate(-200%, -200%); transition: opacity 0.3s; z-index: 120; }
body.modal-active #modal-overlay { opacity: 1; transform: translate(0%, 0%); }
body.modal-overlay-active #modal-overlay { opacity: 1; transform: translate(0%, 0%); }
.modal-window { position: fixed; min-width: 300px; min-height: 50px; background: #f9f9f9; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 5px; box-shadow: rgba(0,0,0,0.7) 0 25px 50px -15px; z-index: 200; }
.modal-window>.modal-closer { position: absolute; top: 10px; right: 10px; z-index: 1000; }
.modal-window>.modal-closer>a { display: block; width: 16px; height: 16px; background-image: url(../images/close.svg); background-size: cover; background-position: center; background-repeat: no-repeat; }
.modal-window>.modal-content { padding: 1rem 1rem 1rem 1rem; max-width: 90vw; max-height: 90vh; overflow: auto; }
.modal-window>.modal-content h2 { margin: 0px 0px 1rem 0px; text-align: center; }
.modal-window>.modal-loader { position: relative; width: 100%; height: 100px; }
.modal-window>.modal-loader>.lds-ellipsis { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.modal-window>.modal-loader>.lds-ellipsis div { background: #2B85C4; }

#modal-sitebar { position: fixed; z-index: 100; width: 50vw; top: 0px; bottom: 0px; right: 0px; background: #FFF; box-shadow: 0px 0px 10px #000; transform: translateX(110%); transition: transform 0.4s, width 0.4s; }
body.modal-sitebar-active #modal-sitebar { transform: translateX(0%); }
body.modal-sitebar-active { overflow: hidden; }
body.modal-sitebar-fullscreen #modal-sitebar { width: calc(100vw - 70px); border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
#modal-sitebar>.modal-sitebar-closer { position: absolute; top: 15px; left: 15px; z-index: 1000; }
#modal-sitebar>.modal-sitebar-closer>a { display: block; width: 22px; height: 22px; background-image: url(../images/close.svg); background-size: cover; background-position: center; background-repeat: no-repeat; }
#modal-sitebar>.modal-sitebar-maximizer,
#modal-sitebar>.modal-sitebar-minimizer { position: absolute; top: 15px; left: 55px; z-index: 1000; }
#modal-sitebar>.modal-sitebar-maximizer>a,
#modal-sitebar>.modal-sitebar-minimizer>a { width: 22px; height: 22px; background-size: cover; background-position: center; background-repeat: no-repeat; }
#modal-sitebar>.modal-sitebar-maximizer>a { display: block; background-image: url(../images/maximize-000000.svg); }
#modal-sitebar>.modal-sitebar-minimizer>a { display: none; background-image: url(../images/minimize-000000.svg); }
body.modal-sitebar-fullscreen #modal-sitebar>.modal-sitebar-maximizer>a { display: none; }
body.modal-sitebar-fullscreen #modal-sitebar>.modal-sitebar-minimizer>a { display: block; }
#modal-sitebar>#modal-sitebar-content { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; padding-top: 40px; }
#modal-sitebar>#modal-sitebar-content>.sitebar-title { padding: 1rem; }
#modal-sitebar>#modal-sitebar-content>.sitebar-content { flex: 1 auto; }

.lds-ellipsis { display: inline-block; position: relative; width: 80px; height: 80px; }
.lds-ellipsis div { position: absolute; top: 20px; width: 13px; height: 13px; border-radius: 50%; background: #000; animation-timing-function: cubic-bezier(0, 1, 1, 0); }
.lds-ellipsis div:nth-child(1) { left: 8px; animation: lds-ellipsis1 0.6s infinite; }
.lds-ellipsis div:nth-child(2) { left: 8px; animation: lds-ellipsis2 0.6s infinite; }
.lds-ellipsis div:nth-child(3) { left: 32px; animation: lds-ellipsis2 0.6s infinite; }
.lds-ellipsis div:nth-child(4) { left: 56px; animation: lds-ellipsis3 0.6s infinite; }
@keyframes lds-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes lds-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } }

.floating-header { background-color: #FFF; position: fixed; left: 80px; right: 1rem; top: 0px; z-index: 10; }

.--data-table { width: 100%; border-radius: 3px; font-size: 0.8rem; }
.--data-table setup { display: none; }
.--data-table-top { font-size: 0.8rem; }
.--data-table-top .--data-table-title { display: flex; align-items: center; }
.--data-table-top .--data-table-title h2 { margin: 0px 0px 0px 0px; }
.--data-table-top .--data-table-title .--data-table-title-context { width: 2em; height: 2em; cursor: pointer; margin-right: 5px; border-radius: 100%; background-image: url(../images/arrow-down-000000.svg); background-size: 1em; background-position: center; background-repeat: no-repeat; transition: all 0.2s; }
.--data-table-top .--data-table-title .--data-table-title-context:hover { background-color: #CCC; }
.--data-table-top .--data-table-header { width: 100%; display: grid; align-items: center; grid-template-rows: auto; border-bottom: 1px solid #CCC; }
.--data-table-top .--data-table-header>div { padding: 5px; }
.--data-table-top .--data-table-header .align-center { text-align: center; }
.--data-table .--data-table-content { position: relative; min-height: 50px; }
.--data-table .--data-table-content-loader { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: rgba(255,255,255,0.7); z-index: 2; }
.--data-table .--data-table-content-loader>.lds-ellipsis { position: absolute; top: 20px; left: 50%; transform: translate(-50%,0); }
.--data-table .--data-table-content-loader>.lds-ellipsis div { background: #2B85C4; }
.--data-table .--data-table-content-noentries { position: relative; padding: 10px 0px; background: #F5F6F8; text-align: center; }
.--data-table .--data-table-content-error { position: relative; padding: 10px 0px; background: #F5F6F8; color: red; text-align: center; }
.--data-table.colorized .--data-table-header { padding-left: 10px; }
.--data-table.colorized .--data-table-row { padding-left: 10px; }
.--data-table .--data-table-content-color-col { position: absolute; top: 0px; bottom: 0px; left: 0px; width: 10px; min-width: 10px !important; transition: all 0.5s; }
.--data-table .--data-table-addrow { background: #FFF; border-top: 1px solid #FFF; border-bottom: 1px solid #CCC; padding: 0px 10px 0px 10px; position: relative; }
.--data-table .--data-table-addrow a { font-size: 0.9rem; color: #333; text-decoration: none; padding: 10px 0px 10px 45px; display: block; background-image: url(../images/plus-black.svg); background-position: 20px center; background-size: auto 40%; background-repeat: no-repeat; }
.--data-table .--data-table-addrow .--data-table-content-color-col { opacity: 0.3; }
.--data-table .--data-table-addrow:hover { background: #E5F4FF; }
.--data-table .--data-table-addrow:hover .--data-table-content-color-col { opacity: 1; }
.--data-table .--data-table-row { position: relative; width: 100%; display: grid; align-items: center; grid-template-rows: auto; background: #F5F6F8; border-bottom: 1px solid #CCC; border-top: 1px solid #FFF; }
.--data-table .--data-table-row:nth-child(odd) { background: #F5F6F8; }
.--data-table .--data-table-row:nth-child(even) { background: #EEEEEE; }
.--data-table .--data-table-row>div { padding: 5px; min-width: 30px; border-right: 1px solid #FFF; }
.--data-table .--data-table-row>div.not-selectable { position: relative; }
.--data-table .--data-table-row>div.not-selectable::after { content: ''; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; cursor: default; }
.--data-table .--data-table-row>div.--data-table-field-click.not-selectable::after { cursor: pointer; }
.--data-table .--data-table-row:last-child { border-bottom: none; }
.--data-table .--data-table-row:hover { background: #E5F4FF; }
.--data-table .--data-table-row .nowrap { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.--data-table .--data-table-row .--data-table-row-contextmenu,
.--data-table .--data-table-row .--data-table-row-dblclick { display: none; }
.--data-table .--data-table-field-click { cursor: pointer; }
.--data-table .--data-table-pagination { display: flex; padding: 0.5rem 0; }
.--data-table .--data-table-pagination a { text-decoration: none; background: #DDD; color: #666; border: 1px solid #CCC; font-size: 14px; width: 22px; height: 22px; line-height: 22px; text-align: center; margin-right: 5px; }
.--data-table .--data-table-pagination a.active { background: #2B85C4; color: #FFF; }
.--data-table-context { position: absolute; z-index: 110; min-width: 284px; background: #FFF; border-radius: 4px; box-shadow: 0 4px 17px 6px rgba(0, 0, 0, 0.1); transform: translate(-10px, -10px); display: none; transition: transform 0.3s; padding: 0.5rem; }
.--data-table-context a { display: block; color: #676879; height: 30px; line-height: 30px; font-size: 14px; background-size: auto 60%; margin: 0.1rem 0; background-position: 5px center; padding: 0px 10px 0px 30px; background-repeat: no-repeat; text-decoration: none; border-radius: 5px; }
.--data-table-context a:hover { background-color: #CCC; }
body.data-table-context-active .--data-table-context { transform: translate(0px, 0px); display: block; }

.--contextmenu-content { display: none; }
.--contextmenu-content-loader { width: 150px; text-align: center; }
.--contextmenu-node { position: absolute; z-index: 1100; background: #FFF; border-radius: 4px; box-shadow: 0 4px 17px 6px rgba(0, 0, 0, 0.1); transform: translate(-10px, -10px); display: none; transition: transform 0.3s; padding: 0.5rem; }
.--contextmenu-node a { display: block; color: #676879; min-width: 284px; height: 30px; line-height: 30px; font-size: 14px; background-size: auto 60%; margin: 0.1rem 0; background-position: 5px center; padding: 0px 10px 0px 30px; background-repeat: no-repeat; text-decoration: none; border-radius: 5px; }
.--contextmenu-node a:hover { background-color: #CCC; }
body.contextmenu-node-active .--contextmenu-node { transform: translate(0px, 0px); display: block; }
.--contextmenu-style-selector { display: flex; padding-bottom: 0.5rem; }
.--contextmenu-style-selector a { min-width: unset; width: 40px; height: 40px; margin: 0px 3px 0px 0px; padding: 0px; }

.--contextmenu-node .projetc-status-list { display: flex; max-width: 351px; flex-wrap: wrap; }
.--contextmenu-node .projetc-status-list a { display: block; text-align: center; padding: 0px 5px; line-height: 32px; min-width: 112px; width: 112px; height: 32px; margin: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; border-radius: 0px; }

.--timeline { width: 100%; overflow-x: auto; }
.--timeline-main-container { width: 50000px; }
.--timeline-header-container { background-color: #EEE; }
.--timeline-header-months { display: flex; border-top: 1px solid #DDD; border-left: 1px solid #DDD; width: auto; }
.--timeline-header-months .month-cell { border-right: 1px solid #DDD; text-align: center; font-size: 12px; line-height: 20px; height: 20px; font-weight: bold; }
.--timeline-header-months .month-cell.days28 { width: 560px; }
.--timeline-header-months .month-cell.days29 { width: 580px; }
.--timeline-header-months .month-cell.days30 { width: 600px; }
.--timeline-header-months .month-cell.days31 { width: 620px; }
.--timeline-header-days { display: flex; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; border-left: 1px solid #DDD; width: auto; }
.--timeline-header-days .day-cell { width: 20px; height: 20px; font-size: 12px; line-height: 20px; text-align: center; border-right: 1px solid #DDD; }
.--timeline-period-container { position: relative; display: flex; border-left: 1px solid #DDD; width: auto; }
.--timeline-period-container:last-child { border-bottom: 1px solid #DDD; }
.--timeline-period-container .day-cell { width: 20px; height: 60px; font-size: 12px; line-height: 20px; text-align: center; border-right: 1px solid #DDD; background-color: #F5F6F8; }
.--timeline-period-container:first-child .day-cell { height: 70px; }
.--timeline-period-container:last-child .day-cell { height: 70px; }
.--timeline-period-container .period-bar { position: absolute; height: 40px; top: 20px; line-height: 40px; font-size: 13px; text-align: center; background: #6699ff; border-radius: 5px; box-shadow: 0px 0px 4px #999; }
.--timeline-period-container .single-period-bar { position: absolute; height: 40px; top: 10px; line-height: 40px; font-size: 13px; text-align: center; background: #6699ff; border-radius: 10px; box-shadow: 0px 0px 4px #999; cursor: move; }

.--sticky-note { position: fixed; z-index: 1000; box-shadow: rgba(0,0,0,0.7) 0 25px 50px -15px; }
.--sticky-note-header { border-bottom: 0px solid; height: 36px; display: flex; justify-content: space-between; cursor: move; }
.--sticky-note-header>div { display: flex; }
.--sticky-note-header>div>div>a { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;  }
.--sticky-note-header>div>.plus { width: 36px; height: 36px; position: relative; background-size: 50%; background-position: center; background-repeat: no-repeat; }
.--sticky-note-header>div>.menu { width: 36px; height: 36px; position: relative; background-size: 70%; background-position: center; background-repeat: no-repeat; }
.--sticky-note-header>div>.closer { width: 36px; height: 36px; position: relative; background-size: 50%; background-position: center; background-repeat: no-repeat; }
.--sticky-note-content { position: absolute; top: 36px; right: 0px; bottom: 0px; left: 0px; }
.--sticky-note-editor { position: absolute; top: 76px; right: 0px; bottom: 0px; left: 0px; outline: none; padding: 0px 10px; overflow: auto; font-size: 0.9rem; }
.--sticky-note-editor p { margin: 10px 0px; }
.--sticky-note-editor hr { background: #000; border: none; width: 100%; height: 1px; }
.--sticky-note.style6 .--sticky-note-editor hr { background: #FFF; }

.--sticky-note .--sticky-note-editor { top: 0px; }
.--sticky-note.focused .--sticky-note-editor { top: 76px; }


.--contextmenu-style-selector a.style0, .--sticky-note.style0 { background: #E6B905; color: #000; }
.--contextmenu-style-selector a.style1, .--sticky-note.style1 { background: #65BA5A; color: #000; }
.--contextmenu-style-selector a.style2, .--sticky-note.style2 { background: #EA86C2; color: #000; }
.--contextmenu-style-selector a.style3, .--sticky-note.style3 { background: #669999; color: #000; }
.--contextmenu-style-selector a.style4, .--sticky-note.style4 { background: #59C0E7; color: #000; }
.--contextmenu-style-selector a.style5, .--sticky-note.style5 { background: #989898; color: #000; }
.--contextmenu-style-selector a.style6, .--sticky-note.style6 { background: #444444; color: #FFF; }
.--sticky-note .--sticky-note-header { border-color: #FFF; }
.--sticky-note .--sticky-note-header>div>.plus { background-image: url(../images/plus-000000.svg); }
.--sticky-note .--sticky-note-header>div>.menu { background-image: url(../images/elipsis-000000.svg); }
.--sticky-note .--sticky-note-header>div>.closer { background-image: url(../images/close-000000.svg); }
.--sticky-note.style6 .--sticky-note-header { border-color: #FFF; }
.--sticky-note.style6 .--sticky-note-header>div>.plus { background-image: url(../images/plus-FFFFFF.svg); }
.--sticky-note.style6 .--sticky-note-header>div>.menu { background-image: url(../images/elipsis-FFFFFF.svg); }
.--sticky-note.style6 .--sticky-note-header>div>.closer { background-image: url(../images/close-FFFFFF.svg); }

.--tab-container { height: 100%; display: flex; flex-direction: column; position: relative; }
.--tab-container .tabs { position: relative; z-index: 2; display: flex; border-bottom: 2px solid #EEE; }
.--tab-container .tabs a { display: block; position: relative; line-height: 32px; padding: 0px 5px; margin: 0 5px; text-decoration: none; color: #000; }
.--tab-container .tabs a>span { position: absolute; display: block; bottom: -2px; left: 50%; width: 0%; transform: translateX(-50%); transition: all 0.1s; background: #AAA; height: 2px; }
.--tab-container .tabs a.active>span { background: #2B85C4; }
.--tab-container .tabs a:hover>span,
.--tab-container .tabs a.active>span { width: 100%; }
.--tab-container .tab-content { position: absolute; display: none; z-index: 1; top: 32px; padding: 1.2rem 1rem 1rem 1rem; left: 0px; right: 0px; bottom: 0px; overflow-y: auto; }
.--tab-container .tab-content.active { display: block; }
#modal-sitebar>#modal-sitebar-content .--tab-container .tabs { margin: 0 1rem; }
/* #modal-sitebar>#modal-sitebar-content .--tab-container .tab-content { margin: 0 0 0 1rem; padding: 1.2rem 1rem 1rem 1rem; } */

.color-selector-container { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
.color-selector-container>a { width: 32px; height: 32px; display: block; margin: 0 5px 5px 0; border-radius: 16px; border: 3px solid transparent; }

#wrapper { display: flex; flex-direction: row; width: 100%; height: 100vh; }
#sitebar { position: fixed; z-index: 10; left: 0px; bottom: 0px; width: 80px; height: 100%; background: #333; }
#sitebar .inner { position: absolute; top: 10px; left: 10px; bottom: 30px; right: 20px; display: flex; justify-content: space-between; flex-direction: column; }
#sitebar .top-links { display: flex; flex-direction: column; }
#sitebar .top-links>a { display: block; text-align: center; padding: 7px 0; border-radius: 5px; }
#sitebar .top-links>a:hover { background: #222; }
#sitebar .top-links>a>div>img { width: 26px; height: 26px; }
#sitebar .bottom-links { display: flex; flex-direction: column; }
#sitebar .bottom-links>a { display: block; text-align: center; padding: 7px 0; border-radius: 5px; }
#sitebar .bottom-links>a:hover { background: #222; }
#sitebar .bottom-links>a>div>img { width: 26px; height: 26px; }
#sitebar .bottom-links>a.logout { margin-top: 2rem; }
#sitebar .bottom-links>div.profileLink { background: #FFF; border-radius: 100%; height: 47px; margin-top: 2rem; position: relative; }
#sitebar .bottom-links>div.profileLink .pic { position: absolute; top: 3px; bottom: 3px; left: 3px; right: 3px; background-size: cover; border-radius: 100%; background-color: #CCC; cursor: pointer; }
#sitebar .bottom-links>div.subMenuLink .submenu { position: absolute; padding: 1rem; z-index: 100; left: -500px; bottom: 0px; background: #FFF; border-radius: 10px; width: 300px; color: #000; box-shadow: 0 4px 17px 6px rgba(0, 0, 0, 0.1); transform: translate(60px, -20px); transition: transform 0.2s; }
#sitebar .bottom-links>div.subMenuLink .submenu h5 { margin: 0px 0px 0.5rem 0px; font-size: 1.1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #999; }
#sitebar .bottom-links>div.subMenuLink .submenu .submenu-link { display: block; color: #000; height: 30px; line-height: 30px; font-size: 14px; background-size: auto 60%; margin: 0.1rem 0; background-position: 5px center; padding-left: 30px; background-repeat: no-repeat; text-decoration: none; border-radius: 5px; }
#sitebar .bottom-links>div.subMenuLink .submenu .submenu-link:hover { background-color: #CCC; }
#sitebar .rounded-corners { position: absolute; top: 0px; bottom: 0px; right: 0px; width: 10px; background: #FFF; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
body.sitebar-submenu-active #sitebar .bottom-links>div.subMenuLink .submenu { left: 0px; transform: translate(70px, 0px); }

#page-wrapper { background: #f9f9f9; padding: 1rem; width: 100%; height: 100%; overflow: auto; position: relative; margin-left: 70px; }
#page-loader { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; display: none; }
#page-loader>.svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#page-loader>.svg svg { overflow: visible; width: 100px; height: 150px; }
#page-loader>.svg svg g { animation: page-loader-slide 2s linear infinite; }
#page-loader>.svg svg g:nth-child(2) { animation-delay: 0.5s; }
#page-loader>.svg svg g:nth-child(2) path { animation-delay: 0.5s; stroke-dasharray: 0px 158px; stroke-dashoffset: 1px; }
#page-loader>.svg svg path { stroke: url(#gradient); stroke-width: 20px; stroke-linecap: round; fill: none; stroke-dasharray: 0 157px; stroke-dashoffset: 0; animation: escalade 2s cubic-bezier(0.8, 0, 0.2, 1) infinite; }
#page { background: #FFF; margin-left: 80px; padding: 1rem 1rem 1rem 0rem; min-height: 100vh; }
#page>h1 { color: #666; margin: 0rem 0rem 1rem 0rem; }

body.gid0 #page-wrapper { margin-left: 0px; }
body.gid0 #page { margin-left: 0px; padding: 1rem 1rem 1rem 1rem; }

#login-window { border: 1px solid #999; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 20px; width: 300px; padding: 1rem; box-shadow: rgba(0,0,0,0.7) 0 25px 50px -15px; }
#login-window .login-input-row { padding: 0px 0px 0.5rem 0px; }
#login-window .login-input-row input { width: 100%; border: 1px solid #2B85C4; }
#login-window .login-input-row input[name="login-user"] { background-image: url(../images/single-user-2B85C4.svg); }
#login-window .login-input-row input[name="login-pass"] { background-image: url(../images/pencil-blue.svg); }
#login-window .login-input-row button[type="submit"] { width: 100%; }

#profile .top-container { background: #2B85C4; height: 330px; display: flex; flex-direction: column; justify-content: space-between; border-top-left-radius: 10px; border-top-right-radius: 10px; }
#profile .top-container>.row-1 { height: 30px; }
#profile .top-container>.row-2 { height: 150px; }
#profile .top-container>.row-2 .profile-image,
#change-profile-pic-content .edit-profile-image { background: #FFF; width: 150px; height: 150px; margin: 1rem auto; border-radius: 100px; position: relative; }
#change-profile-pic-content .edit-profile-image { border-radius: 0px; margin-bottom: 0rem; }
#profile .top-container>.row-2 .profile-image .pic,
#change-profile-pic-content .edit-profile-image .pic { position: absolute; top: 3px; bottom: 3px; left: 3px; right: 3px; background-size: cover; border-radius: 100%; background-color: #FFF; }
#change-profile-pic-content .edit-profile-image .pic { border-radius: 0px; }
#profile .top-container>.row-2 .profile-image .overlay { display: block; position: absolute; top: 3px; bottom: 3px; left: 3px; right: 3px; border-radius: 100%; background-color: rgba(0,0,0,0.4); color: #FFF; cursor: pointer; opacity: 0; transition: all 0.2s; }
#profile .top-container>.row-2 .profile-image .overlay>.label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); white-space: nowrap; }
#profile .top-container>.row-2 .profile-image:hover .overlay { opacity: 1; }
#profile .top-container>.row-3 { height: 30px; text-align: center; color: #FFF; font-size: 2rem; }
#profile .bottom-container { display: none; padding: 1rem; }
#profile .bottom-container.visible { display: block; }
#profile .bottom-container .row { display: flex; width: 100%; max-width: 600px; margin: 3px auto; align-items: flex-start; }
#profile .bottom-container .row>.label { width: 300px; text-align: right; padding-right: 1rem; height: 32px; line-height: 32px; }
#profile .bottom-container .row>.input { flex: 1 auto; }
#profile .bottom-container .row>.input>input, #profile .bottom-container .row>.input>select { width: 100%; }

.--data-table .--data-table-row .userpics-side-by-side { cursor: pointer; }
.userpics-side-by-side { padding: 3px 3px 3px 13px; display: flex; justify-content: center; }
.userpics-side-by-side .userpic { margin-left: -10px; display: block; }
.userpics-side-by-side .userpic:first-child { margin-left: 0px; }
.userpic { position: relative; z-index: 1; display: inline-block; background-color: #FFF; background-position: center; background-repeat: no-repeat; background-size: cover; border: 1px solid #999; }
.userpic:hover { z-index: 2; }
.userpic.round { border-radius: 100%; }
.userpic.nopic { border-color: transparent; background-color: transparent; }
.userpic.width30 { width: 30px; height: 30px; }
.userpic.width40 { width: 40px; height: 40px; }

.content-top-row { display: flex; justify-content: flex-end; align-items: center; padding-bottom: 1rem; }
.btn.nopadlr { padding-left: 0px; padding-right: 0px; }
.btn.nopadlr.plus, .btn.nopadlr.edit, .btn.nopadlr.delete { background-position: 8px center; }
.btn.plus, .btn.edit, .btn.delete { padding-left: 32px; background-size: auto 50%; background-position: 12px center; background-repeat: no-repeat; }
.btn.plus { background-color: #2B85C4; color: #FFF; background-image: url(../images/plus-white.svg); }
.btn.edit { background-color: #3399ff; color: #FFF; background-image: url(../images/edit-white.svg); }
.btn.delete { background-color: #990000; color: #FFF; background-image: url(../images/delete-white.svg); }

@keyframes page-loader-slide { 0% { transform: translateY(-50px); } 100% { transform: translateY(50px); } }
@keyframes escalade { 0% { stroke-dasharray: 0 157px; stroke-dashoffset: 0; } 50% { stroke-dasharray: 156px 157px; stroke-dashoffset: 0; } 100% { stroke-dasharray: 156px 157px; stroke-dashoffset: -156px; } }

.form-fields { display: grid; align-items: center; width: 100%; padding: 1rem 0rem; }
.form-fields.c1 { grid-template-columns: 150px auto; }
.form-fields.c2 { grid-template-columns: 150px auto 150px auto; }
.form-fields.c3 { grid-template-columns: 150px auto 150px auto 150px auto; }

.form-fields .label { align-self: stretch; line-height: 30px; padding: 3px 10px 3px 0px; text-align: right; font-size: 0.9rem; }
.form-fields .input { align-self: stretch; line-height: 30px; padding: 3px 10px 3px 0px; display: flex; justify-content: space-between; }
.form-fields input, .form-fields select { width: 100%; }
.form-submit { display: flex; justify-content: flex-end; width: 100%; padding: 0rem 0rem 1rem 0rem; }
.form-submit>div { padding: 0px 10px 0px 0px; }

.ajax-input-dialog-node { display: none; z-index: 10; position: absolute; background: #FFF; border-radius: 3px; box-shadow: 0 4px 17px 6px rgba(0, 0, 0, 0.1); max-height: 300px; overflow-y: auto; }
.ajax-input-dialog-node a { display: block; white-space: nowrap; height: 24px; line-height: 24px; font-size: 0.9rem; text-decoration: none; color: #666; padding: 0px 5px; }
.ajax-input-dialog-node a.selected { color: #FFF; background: #2B85C4; }
.--ajax-input-array { display: inline-block; }
.--ajax-input-array>.inner { padding: 3px 5px; display: flex; flex-wrap: wrap; border: 1px solid #999; color: #FFF; background: #2B85C4; border-radius: 10px; line-height: 16px; margin: 3px 5px 3px 0px; }
.--ajax-input-array>.inner .closer { display: inline-block; margin-left: 3px; width: 16px; height: 16px; background-image: url(../images/delete-white.svg); background-size: 60%; background-position: center; background-repeat: no-repeat; }

.--ajax-editable { padding: 3px; }
.--ajax-editable.compiled { padding: 0px; position: relative; display: flex; }
.--ajax-editable .editable-inner { display: flex; border: 1px solid transparent; border-radius: 4px; }
.--ajax-editable.block .editable-inner { width: 100%; justify-content: space-between; }
.--ajax-editable .editable-value { order: 1; padding: 3px 5px 3px 3px; }
.--ajax-editable .editable-click { order: 2; cursor: pointer; visibility: hidden; background-image: url(../images/pencil-blue.svg); background-repeat: no-repeat; background-position: center center; background-size: auto 0.8em; }
.--ajax-editable .editable-click:hover { background-color: #2B85C4; background-image: url(../images/pencil-white.svg); }
.--ajax-editable .editable-inner:hover { border: 1px dotted #2B85C4; }
.--ajax-editable .editable-inner:hover .editable-click { visibility: visible; }
.--ajax-editable form { width: 100%; height: auto; margin: 0px; padding: 0px; }
.--ajax-editable input, .--ajax-editable textarea { display: block; background: #FFF; color: #666; width: 100%; resize: none;
	overflow: hidden; white-space: nowrap; outline: none; border: 1px dotted #2B85C4; background-image: none !important; border-radius: 4px; }

.projectstatus { position: relative; height: 100%; cursor: pointer; }
.projectstatus .bg { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; }
.projectstatus .psid0 { background: #C4C4C4; }
.projectstatus .label { position: absolute; top: 50%; left: 0px; right: 0px; text-align: center; transform: translateY(-50%); overflow: hidden; text-overflow: ellipsis; }

.list-field-deadline { position: relative; height: 100%; cursor: pointer; }
.list-field-deadline .inner { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; }
.list-field-deadline .inner .progress-bar { position: absolute; top: 0px; left: 0px; bottom: 0px; background: #009933; }
.list-field-deadline .inner .progress-bar.over10 { background: #009933; }
.list-field-deadline .inner .progress-bar.over20 { background: #009933; }
.list-field-deadline .inner .progress-bar.over30 { background: #009933; }
.list-field-deadline .inner .progress-bar.over40 { background: #009933; }
.list-field-deadline .inner .progress-bar.over50 { background: #ffcc66; }
.list-field-deadline .inner .progress-bar.over60 { background: #ff9933; }
.list-field-deadline .inner .progress-bar.over70 { background: #ff9933; }
.list-field-deadline .inner .progress-bar.over80 { background: #ff6600; }
.list-field-deadline .inner .progress-bar.over90 { background: #ff3300; }
.list-field-deadline .inner .progress-bar.over100 { background: #FF3333; }
.list-field-deadline .inner .deadline { position: absolute; top: 50%; left: 0px; right: 0px; transform: translate(0, -50%); text-align: center; }
.list-field-deadline .inner .deadline>.label { font-size: 12px; line-height: 15px; }
.list-field-deadline .inner .deadline>.date { font-size: 15px; font-weight: bold; line-height: 17px; }

.comment-icon { position: relative; width: 100%; height: 100%; background-image: url(../images/comment-C5C7D0.svg); background-size: auto 80%; background-position: center; background-repeat: no-repeat; }
.comment-icon>div.label { position: absolute; left: 50%; top: 50%; background: #C5C7D0; min-width: 17px; height: 17px; line-height: 17px; padding: 0px 3px; font-size: 12px; text-align: center; color: #FFF; border-radius: 8px; }
.comment-icon.active { position: relative; width: 100%; height: 100%; background-image: url(../images/comment-C5C7D0.svg); background-size: auto 80%; background-position: center; background-repeat: no-repeat; }
.comment-icon.active>div.label { position: absolute; left: 50%; top: 50%; background: #2B85C4; min-width: 17px; height: 17px; line-height: 17px; padding: 0px 3px; font-size: 12px; text-align: center; color: #FFF; border-radius: 8px; }
.file-icon { position: relative; width: 100%; height: 100%; background-image: url(../images/file-C5C7D0.svg); background-size: auto 80%; background-position: center; background-repeat: no-repeat; }
.file-icon>div.label { position: absolute; left: 50%; top: 50%; background: #C5C7D0; min-width: 17px; height: 17px; line-height: 17px; padding: 0px 3px; font-size: 12px; text-align: center; color: #FFF; border-radius: 8px; }
.file-icon.active { position: relative; width: 100%; height: 100%; background-image: url(../images/file-C5C7D0.svg); background-size: auto 80%; background-position: center; background-repeat: no-repeat; }
.file-icon.active>div.label { position: absolute; left: 50%; top: 50%; background: #2B85C4; min-width: 17px; height: 17px; line-height: 17px; padding: 0px 3px; font-size: 12px; text-align: center; color: #FFF; border-radius: 8px; }

.lds-ellipsis { display: inline-block; position: relative; width: 80px; height: 23px; }
.lds-ellipsis div { position: absolute; top: 7px; width: 13px; height: 13px; border-radius: 50%; background: #C5C7D0; animation-timing-function: cubic-bezier(0, 1, 1, 0); }
.lds-ellipsis div:nth-child(1) { left: 8px; animation: lds-ellipsis1 0.6s infinite; }
.lds-ellipsis div:nth-child(2) { left: 8px; animation: lds-ellipsis2 0.6s infinite; }
.lds-ellipsis div:nth-child(3) { left: 32px; animation: lds-ellipsis2 0.6s infinite; }
.lds-ellipsis div:nth-child(4) { left: 56px; animation: lds-ellipsis3 0.6s infinite; }
@keyframes lds-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes lds-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } }

form { padding: 0px; margin: 0px; }
input[type=text], input[type=password],select { font-family: 'Open Sans Light'; height: 36px; line-height: 34px; font-size: 0.9rem; border: 1px solid transparent; border-radius: 3px; padding: 0px 25px 0px 5px; outline: none; background-color: transparent; background-repeat: no-repeat; background-position: 99% center; background-size: auto 60%; }
input[type=color] { height: 36px; border: 1px solid transparent; border-radius: 3px; padding: 0px 0px 0px 0px; background-image: none !important; }

select { padding-left: 0px; }
input[type=text], input[type=password] { overflow: hidden; text-overflow: ellipsis; }
input[type=text]:hover, input[type=password]:hover { border: 1px dotted #2B85C4; background-image: url(../images/pencil-blue.svg); }
input[type=text].ok:hover, input[type=password].ok:hover { border: 1px dotted #2B85C4; background-image: url(../images/check-blue.svg); }
select:hover { border: 1px dotted #2B85C4; }
input[type=text]:focus, input[type=password]:focus { border: 1px dotted #2B85C4; background-image: url(../images/pencil-blue.svg); background-color: #FFF; }
input[type=text].ok:focus ,input[type=password].ok:focus { border: 1px dotted #2B85C4; background-image: url(../images/check-blue.svg); background-color: #FFF; }
select:focus { border: 1px dotted #2B85C4; background-color: #FFF; }
::-webkit-input-placeholder { font-size: 0.8rem; color: rgba(43, 133, 196, 0.8); }
:-ms-input-placeholder { font-size: 0.8rem; color: rgba(43, 133, 196, 0.8); }
::placeholder { font-size: 0.8rem; color: rgba(43, 133, 196, 0.8); }

input[type=date], input[type=time] { font-family: 'Open Sans Light'; height: 36px; line-height: 34px; font-size: 0.9rem; border: 1px solid transparent; padding: 0px 5px 0px 5px; outline: none; }
input[type=date]:hover, input[type=time]:hover { border: 1px solid transparent; padding: 0px 5px 0px 5px; background-image: none; }
input[type=date]:focus, input[type=time]:focus { border: 1px solid transparent; padding: 0px 5px 0px 5px; background-image: none; }


button[type=submit] { /* display: block; float: left; clear: left; */ font-family: 'Open Sans Regular'; height: 36px; line-height: 34px; font-size: 14px; text-decoration: none; border: 1px solid #2B85C4; border-radius: 4px; padding: 0px 16px; outline: none; margin: 0px; background: #2B85C4; color: #FFF; }

a.btn { display: block; float: left; clear: left; font-family: 'Open Sans Regular'; height: 36px; line-height: 34px; font-size: 14px; text-decoration: none; border: 1px solid #DDD; border-radius: 4px; padding: 0px 16px; outline: none; margin: 0px; text-align: center; }
a.btn.inline { display: inline-block; float: none; }
a.btn.submit { color: #FFF; background-color: #2B85C4; }
a.btn.abort { color: #FFF; background-color: #ff3333; }
a.btn.blue { color: #FFF; background-color: #2B85C4; }

button img, a.btn img { height: 24px; max-width: 16px; vertical-align: middle; }
.content-top-row a.btn { margin-left: 1rem; }