#my-container {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0 ;
    bottom: 0 ;
    left: 0 ;
    right: 0 ;
    background-color: #fafafa;
}

#my-content {
    display: inline-block;
    background-color: #fff;
    position: relative;
    z-index: 10;
    top: 0 ;
    bottom: 0 ;
    left: 0 ;
    right: 0 ;
    width: 100%;
    height: 100%;
    max-width: 1024px;
}

@media(max-width: 679px) {
    #my-content {
        position: fixed;
    }
}

/* navigation --------------------------------------------*/

#navigation-panel {
    background-color: #fafafa;
    position: absolute;
    top: 0 ;
    bottom: 0 ;
    left: 0 ;
    right: 0 ;
    width: 275px ;
    height: 100%;
    z-index: 0;
}

#profiles-section {
    position: absolute;
    z-index: -1;
}

#profiles-header {
    position: relative;
    top:0;
}

#profiles-list {
    position:relative;
}

#projects-section {
    position: relative;
    top: 0;
    height: 100%;
    background-color: #fafafa;
}

#projects-header {
    position: absolute;
    top: 0;
}

#projects-list {
    position: absolute;
    top: 50px;
}


.project-navigation-table {
    height: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.project-navigation-table-active {
    background-color: #fff;
}

.project-navigation-color-td {
    color: #dddddd;
    padding-left: 16px;
    width: 16px;
}

.project-navigation-name-td {
    padding-left: 10px;
    text-align: left;
}

.project-navigation-demo-update-td {
    color: #bbbbbb;
    width:1%;
    white-space:nowrap;
    font-size: 14px;
    text-decoration: underline;
    padding-left: 5px;
    padding-right: 5px;
}

.project-navigation-edit-td {
    color: #bbbbbb;
    width:1%;
    white-space:nowrap;
    font-size: 14px;
    text-decoration: underline;
    padding-left: 5px;
    padding-right: 15px;
}

#no-projects-placeholder {
    padding: 20px;
}

#no-tasks-placeholder-table {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.no-projects-placeholder-text-color {
    color: #999;
}

.no-projects-placeholder-plus-icon {
    vertical-align: middle;
    font-size: 24px;
}

/* main view ----------------------------------------------*/

#main-view {
    background-color: #fff;
    position: absolute;
    z-index: 10;
    top: 0 ;
    bottom: 0 ;
    left: 0 ;
    right: 0 ;
    height: 100%;

}

#no-tasks-placeholder {
    position: absolute;
    bottom: 0;
    z-index: 5000;
    padding: 20px;
}

#no-tasks-placeholder-table {
    width: 100%;
    height: 100%;
}

.no-tasks-placeholder-text-color {
    color: #999;
}

.no-tasks-placeholder-plus-icon {
    vertical-align: middle;
    font-size: 24px;
}

/* popups --------------------------------------------------------------*/

.my-popup-wrapper {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.my-popup-glasspane {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0 ;
    bottom: 0 ;
    left: 0 ;
    right: 0 ;
    opacity: 0.33;
    background-color: #000;
}

@media(max-width: 679px) {
    .my-popup {
        height: 100%;
        width: 100%;
    }
}

.my-popup {
    background-color: white;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 10;
}


.button {
    margin: 0 !important;
}

.button:after {
    top: 0;
    bottom: 0;
}

.my-popup-header {
    position: relative;
}

.my-popup-content {
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
}

/* task details ---------------------------------------------------------*/

#task-details-popup {
    background-color: #ebebeb;
}

#task-details-wrapper {
    z-index:  1000;
}

@media(min-width: 680px) {
    #task-details-popup {
        width: 675px;
    }
}

/* task project --------------------------------------------------------*/

#task-project-wrapper {
    z-index: 2000;
}

@media(min-width: 680px) {
    #task-project-popup {
        width : 400px;
    }
}

/* recurrent tasks ---------------------------------------------------*/

#recurrent-task-wrapper {
    z-index: 1100;
}

@media(min-width: 680px) {
    #recurrent-task-popup {
        width : 400px;
    }
}

.recurrent-task-label {
    padding: 10px;
}

/* subtasks --------------------------------------------------------*/

#subtasks-popup-wrapper {
    z-index: 1100;
}

@media(min-width: 680px) {
    #subtasks-popup {
        width : 600px;
        min-height: 300px;
    }
}

/* subtask edition --------------------------------------------------------*/

#subtask-edition-popup-wrapper {
    z-index: 1200;
}

@media(min-width: 680px) {
    #subtask-edition-popup {
        width : 675px;
    }
}

/* notes edition --------------------------------------------------------*/

#notes-popup-wrapper {
    z-index: 1300;
}

@media(min-width: 680px) {
    #notes-popup {
        width : 675px;
    }
}

/* profile details --------------------------------------------------------*/

#profile-details-popup-wrapper {
    z-index: 3000;
}

@media(min-width: 680px) {
    #profile-details-popup {
        width : 675px;
    }
}

#profile-stats-table-div {
    padding-top: 0px;
}

#profile-stats-table {
    width: 100%;
}

.profile-stats-header {
    background-color: #dddddd;
}

.profile-stats-header-cell {
    padding: 5px;
    vertical-align: middle;
}

.profile-stats-cell {
    padding-top: 2px;
    padding-left: 5px;
    padding-right: 5px;
}

.profile-stats-spacing-row {
    height: 5px;
}

.profile-stats-created-col {
    color: green;
}

.profile-stats-deleted-col {
    color: red;
}

/* project details --------------------------------------------------------*/

#project-details-popup-wrapper {
    z-index: 3000;
}

@media(min-width: 680px) {
    #project-details-popup {
        width : 675px;
    }
}

/* project color --------------------------------------------------------*/

#project-color-popup-wrapper {
    z-index: 3100;
}

@media(min-width: 680px) {
    #project-color-popup {
        width : 350px;
    }
}

/* account details --------------------------------------------------------*/

#account-details-popup-wrapper {
    z-index: 1000;
}

@media(min-width: 680px) {
    #account-details-popup {
        width : 600px;
    }
}

.date-picker-modal {
    background-color: #fff;
    position: absolute;
    z-index: 1100;
}

.date-picker-glasspane {
    position: absolute;
    z-index: 1099;
    top: 0 ;
    bottom: 0 ;
    left: 0 ;
    right: 0 ;
    width: 100% ;
    height: 100%;
}

/* login screen --------------------------------------------------------*/

.login-screen-alternative {
    color: #387ef5;
    text-decoration: underline;
    font-weight: bold;
}

#login-screen-content {
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

#login-screen {
    background-color: #f5faff;
    position: absolute;
    z-index: 4000;
    top: 0 ;
    bottom: 0 ;
    left: 0 ;
    right: 0 ;
    width: 100% ;
    height: 100%;
}

.login-screen-error-p {
    color: red;
    font-weight: bold;
    text-align: center !important;
}

.login-screen-list {
    width: 100%;
    max-width: 450px;
    padding-left: 10px;
    padding-right: 10px;
}

.login-screen-text-p {
    color: #565656;
    text-align: center !important;
}

.login-screen-text-label {
    padding: 0 15px 0 15px;
    height: 47px;
}

.login-screen-icon {
    font-size: 25px;
}

.login-screen-icon-ok {
    color: green;
}

.login-screen-icon-ko {
    color: red;
}

#login-screen h1 {
    text-align: center;
    color: #387ef5;
    margin-top: 30px;
}

/* must remain topmost */
#loading-screen {
    background-color: #fff;
    position: absolute;
    z-index: 5000;
    top: 0 ;
    bottom: 0 ;
    left: 0 ;
    right: 0 ;
    width: 100% ;
    height: 100%;
}


/* ------------------------------------------------------------------------*/

select,
body,
textarea,
td {
    color: #555555;
    font-size: 15px;
}

pre {
    -moz-tab-size : 4;
    -o-tab-size : 4;
    tab-size : 4;
}

.my-clickable {
    cursor: pointer;
}

.my-has-header {
    top: 44px;
    width: 100%;
}

.my-scrollable {
    overflow-x: hidden;
    bottom: 0;
    position: absolute;
    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
}

.my-menu-animated {
    -webkit-transition: -webkit-transform 200ms ease;
    transition: transform 200ms ease;
    transition-property: transform;
    transition-duration: 200ms;
    transition-timing-function: ease;
    transition-delay: initial;
}

.item {
    font-size: 15px;
}

.my-item {
    padding: 0px;
    font-size: 15px;
}

.my-min-sized-control {
    height: 50px;
}

.my-checkbox {
    position: relative;
    height: 25px;
    width: 25px;
    border-radius: 3px;
    border-color: rgb(221, 221, 221);
    border-style: solid;
    border-width: 1px;
    margin: auto;
    padding: 0px;
    z-index: 10;
}

.project-color {
     background-color: #dddddd;
 }

td {
    text-align: center;
    vertical-align: middle;
    height: 100%;
}

.disabled-control-text {
    color: #acacac;
}

.my-gray-data {
    color: #acacac;
    font-size: 15px;
    padding: 5px 0px;
}

.completed {
    color: #cccccc;
}

.subtasks {
    color: #bbbbbb;
}

.date-header {
    font-size: 15px;
    text-align:left;
}

.date-header-table {
    width: 100%;
    background-color: #eeeeee;
    text-align:left;
}

.date-header-cell {
    padding: 3px 10px;
    text-align:left;
}

.active-project {
    background: #eeeeee;
}


/* refresh icon animation--------------------------------------*/

.animated-refresh-icon {
    animation: refresh-anim 1s linear;
    animation-iteration-count: infinite;
    transform-origin: 16px 16px;
}

@keyframes refresh-anim {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

/* date and time pickers ---------------------------------------------*/

.task-details-icon, .task-details-label, .task-details-inline-icon {
    vertical-align: middle;
    display: table-cell;
}

.task-details-icon, .task-details-inline-icon {
    font-size: 24px;
    width: 27px;
    min-width: 27px;
}

.task-details-icon {
    font-size: 24px;
}

.task-details-inline-icon {
    padding: 8px;
}

.date-time-section-td {
    width: 50%;
    text-align: left;
    vertical-align: middle;
    height: 50px;
    background-color: white;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
}

.task-details-priority {
    width: 25%;
    text-align: center;
}

.task-details-priority-button {
    padding-top: 6px;
    padding-bottom: 6px;
    display: inline-block;
    width: 50px;
}

.task-details-priority-button:hover {
    border: solid 1px #dddddd;
}

.task-details-priority-button-active {
    background-color: #eeeeee;
}

#my-datepicker {
    margin-right: 1px;
}

.my-date-picker-buttons td {
    border: 1px solid #aaaaaa;
    color: #555555;
    height: 40px;
    vertical-align: middle;
    padding: 7px;
    cursor: default;
}

.my-date-picker-button-selected {
    background-color: #ebebeb;
}

#my-date-picker-date-type {
    border-collapse:collapse;
    width:100%;
    margin-top: -1px;
}

#my-date-picker-date-type td {
    width:33%;
}

.my-date-picker-date-type-selected {

}

.ui-datepicker-calendar td {
    width: 30px;
}

.my-time-picker {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: white;
    padding: 5px;
    border-color: #dddddd;
}

select::-ms-expand { /* for IE 11 */
    display: none;
}