:root {
    --white: #fff;
    --calendar-background-color: #F4F7FB;
    --calendar-border-color: #e5e5e5;
    --calendar-weekend-color: #e5e5e0;
    --text-color: #333333;
    --today-color: #ff0000;
    --today-text-color: #ffffff;
    --calendar-max-width: 90vw;
    --font-size: 14px;
    --font-family: 'Open Sans',    sans-serif;
    --timeline-width: 100px;
    --calendar-cell-height: 50px;
    --calendar-cell-width: 20vw;
    --calendar-body-height: 100%;
    --form-max-width: 90vw;
    --body-colour: #F4F7FB;
    --main-max-width: 100vw;
    --bg-green-rgb: #e5e5e5;
    --form-max-width-desktop: 70vw;
    --calendar-max-width-desktop: 70vw;
}

.col-main { width: var(--main-max-width); }


html {
    height: 100%;
    position: relative;
    min-height: 100%;
}


.form-profile {
}

.form-signin {
    max-width: 330px;
    padding: 1rem;
    background-color: #F4F7FB;
    border-radius: 10px;
}

.form-signin .h3 {
    color: #505050;
    font-weight: bolder;
}

.form-signin .form-floating:focus-within { z-index: 2; }

/*.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}*/

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}



.b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
}

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718,    44.062154,    249.437846;
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
}

.bd-mode-toggle { z-index: 1500; }

.bd-mode-toggle .dropdown-menu .active .bi { display: block !important; }

html { font-size: 14px; }

.back-to-page { color: #fff; }


/*style="font-family: Quicksand; font-size: 16px; font-weight: 700; word-wrap: break-word"*/


.digit {
    color: #000;
    font-size: 100px;
}

.txt {
    color: #000;
    font-size: 30px;
}

.blurry-text {
    color: transparent;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; }



.form-tasks .form-floating:focus-within { z-index: 2; }

.form-tasks input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-tasks input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

body {
    margin-bottom: 60px;
    background-color: var(--body-colour);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #3498db; /*  background-image: url("/img/AdobeStock_970803974.jpeg"); */
}


.count-and-filter { color: #F4F7FB; }

.h3 {
    color: #fff;
    font-weight: bolder;
}

.container-event {
    background: white;
    /*    border: 0.50px black solid;*/
    border-radius: 10px;
    padding: 10px;
    max-width: var(--calendar-max-width);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    width: 100%;
}

.container-event-header { max-width: var(--calendar-max-width); }

.container-event-half {
    background: white;
    /*border: 0.50px black solid;*/
    border-radius: 10px;
    padding: 10px;
    /*    max-width: var(--calendar-max-width);*/
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    width: 45%;
}

.container-event-header-half { max-width: var(--calendar-max-width); }


.container-question {
    background: #47329C;
    /*border: 0.50px black solid;*/
    border-radius: 10px;
    padding: 10px;
    padding-left: 20px;
    color: white;
    font-size: 14px;
    max-width: var(--calendar-max-width);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    width: 100%;
    cursor: pointer;
}

.container-question-selected {
    background: #258cfb;
    /*border: 0.50px black solid;*/
    border-radius: 10px;
    padding: 10px;
    padding-left: 20px;
    color: white;
    font-size: 14px;
    max-width: var(--calendar-max-width);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    width: 100%;
    cursor: pointer;
}

.container-question:hover {
    background: #258cfb;
    /*border: 0.50px black solid;*/
    border-radius: 10px;
    padding: 10px;
    padding-left: 20px;
    color: white;
    font-size: 14px;
    max-width: var(--calendar-max-width);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    width: 100%;
    cursor: pointer;
}


.container-question-header { max-width: var(--calendar-max-width); }


.body-question {
    background-color: #0E0B2F; /*#0E0B2F;*/
    color: white;
    font-family: Quicksand;
    font-size: 20px;
}

.question-check-input { font-size: 22px; }

.container {
    display: block;
    position: relative;
    padding-left: 0px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */

.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.question-name {
    color: white;
    font-family: Quicksand;
    font-weight: bolder;
    padding: 10px;
    font-size: 20px;
    max-width: var(--calendar-max-width);
    width: 100%;
}

.question-type-name {
    color: mistyrose;
    font-family: Quicksand;
    font-weight: normal;
    padding: 10px;
    font-size: 14px;
    max-width: var(--calendar-max-width);
    width: 100%;
}

.fa-1x { font-size: 200px; }

.table {
    display: table;
    text-align: center;
    width: 100%;
    max-width: var(--calendar-max-width);
    margin: 1% auto 0;
    border-collapse: separate;
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
}

.table_row {
    display: table-row;
    background-color: transparent;
}

.theader { display: table-row; }

.table_header {
    display: table-cell;
    /*border-bottom: #ccc 1px solid;
    border-top: #ccc 1px solid;*/
    background: #bdbdbd;
    color: #e5e5e5;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 700;
}

.table_header:first-child {
    /* border-left: #ccc 1px solid;*/
    /*     border-top-left-radius: 5px;*/
}

.table_header:last-child {
    /*  border-right: #ccc 1px solid;*/
    /*  border-top-right-radius: 5px;*/
}

.table_small { display: table-cell; }

.table_row > .table_small > .table_cell:nth-child(odd) {
    display: none;
    background: #bdbdbd;
    color: #e5e5e5;
    padding-top: 10px;
    padding-bottom: 10px;
}

.table_row > .table_small > .table_cell {
    padding-top: 3px;
    padding-bottom: 3px;
    color: #5b5b5b;
    /*border-bottom: #ccc 1px solid;*/
}

.table_row > .table_small:first-child > .table_cell { /*border-left: #ccc 1px solid;*/ }

.table_row > .table_small:last-child > .table_cell { /*  border-right: #ccc 1px solid;*/ }

.table_row:last-child > .table_small:last-child > .table_cell:last-child { /*  border-bottom-right-radius: 5px;*/ }

.table_row:last-child > .table_small:first-child > .table_cell:last-child { /*border-bottom-left-radius: 5px;*/ }

.table_row:nth-child(2n + 3) { background: #e9e9e9; }





/* Float cancel and delete buttons and add an equal width */

.cancelbtn, .deletebtn {
    float: left;
    width: 50%;
}

/* Add a color to the cancel button */

.cancelbtn {
    background-color: #ccc;
    color: black;
}

/* Add a color to the delete button */

.deletebtn { background-color: #f44336; }

/* The Modal (background) */

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #474e5d;
    padding-top: 50px;
}

/* Modal Content/Box */

.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Modal Close Button (x) */

.close {
    position: absolute;
    right: 35px;
    top: 15px;
    font-size: 40px;
    font-weight: bold;
    color: #f1f1f1;
}

.close:hover,
.close:focus {
    color: #f44336;
    cursor: pointer;
}

/* Clear floats */

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.dot {
    height: 50px;
    width: 50px;
    background-color: #DBE6E1;
    border-radius: 50%;
    border-color: #DBE6E1;
    border-style: solid;
    border-width: 2px;
    font-size: 24px;
    font-weight: bolder;
    text-align: center;
    padding-top: 5px;
    margin-left: 5px;
}


.dot_goal_set {
    height: 50px;
    width: 50px;
    background-color: #3865D5;
    border-radius: 50%;
    border-color: #3865D5;
    border-style: solid;
    border-width: 2px;
    color: #fff;
    font-size: 24px;
    font-weight: bolder;
    text-align: center;
    padding-top: 5px;
    margin-left: 5px;
}

.dot_goal_set a { color: #fff; }

.dot_today { border-color: red; }





.dot_habit_row {
    text-wrap: none;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: 5px;
    padding-top: 5px;
}

.dot_habit {
    height: 20px;
    width: 20px;
    background-color: #DBE6E1;
    border-radius: 50%;
    font-size: 10px;
    font-weight: bolder;
    text-align: center;
    padding-top: 10px;
    margin-left: 5px;
    margin-bottom: 5px;
    float: left;
}

.dot_habit-performed {
    height: 20px;
    width: 20px;
    background-color: #3865D5;
    border-radius: 50%;
    font-size: 10px;
    font-weight: bolder;
    text-align: center;
    padding-top: 1px;
    margin-left: 5px;
    margin-bottom: 5px;
    float: left;
}


.table-fixed {
    text-align: left;
    vertical-align: top;
    background-color: transparent;
    border-color: #3865D5;
    border-style: solid;
    border-width: 1px;
}

.table-fixed th {
    text-align: left;
    vertical-align: top;
    background-color: inherit;
    border-color: #3865D5;
    border-style: solid;
    padding: 2px;
}

.table-fixed td {
    text-align: left;
    vertical-align: top;
    background-color: inherit;
    border-color: #3865D5;
    border-style: solid;
    padding: 2px;
    font-weight: lighter;
}

.table-fixed ul {
    list-style-type: square;
    list-style-position: inside;
    margin: 3px;
    padding: 10px;
    font-weight: lighter;
}

.privacy-page {
    list-style-type: square;
    list-style-position: inside;
    margin: 3px;
    padding: 10px;
    font-weight: lighter;
}

.text-14 { font-size: 1em; }

.outer-button-questionnaire {
    background-color: blue;
    border-color: blue;
    border-style: solid;
    border-width: 5px;
    font-family: Quicksand;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    font-size: 10px;
    font-weight: bolder;
}

.inner-button-questionnaire {
    background-color: white;
    border-color: white;
    border-style: solid;
    border-width: 11px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    font-size: 18px;
    font-weight: bolder;
    font-family: Quicksand;
    padding-top: 0px;
    vertical-align: top;
}

.button-questionnaire {
    background-color: white;
    border-color: white;
    border-style: solid;
    font-size: 18px;
    font-weight: bolder;
    height: 35px;
    font-family: Quicksand;
}

.loading-overlay {
    display: none;
    background: rgba(255, 255, 255, 0.7);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9998;
    align-items: center;
    justify-content: center;
}

.loading-overlay.is-active { display: flex; }

.code {
    font-family: monospace;
    /*   font-size: .9em; */
    color: #dd4a68;
    background-color: rgb(238, 238, 238);
    padding: 0 3px;
}

#pomodoroModal, #id01 { /*    z-index:2;*/ }

.model-format {
    padding-left: 1rem;
    padding-right: 1rem;
}

.journal_textEditor_toolbar {
    flex-wrap: wrap;
    background: #F4F7FB;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* height: 20px; */
    margin: 10px 0;
    padding: 5px;
    border-radius: 6px;
    box-shadow: 0px 0px 3.5px #b7b7b7;
}

.journal_toolbar_btn {
    position: relative;
    background: transparent;
    width: 30px;
    height: 30px;
    margin-left: 5px;
    color: #000;
    border: 0;
    border-radius: 2px;
    outline: 0;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}


.journal-content {
    color: transparent;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    font-family: Quicksand;
    font-size: 13px;
    font-weight: 400;
    word-wrap: break-word;
    text-decoration: none;
}


.journal-content a:hover {
    color: black;
    font-family: Quicksand;
    font-size: 13px;
    font-weight: 400;
    word-wrap: break-word;
    text-decoration: none;
    text-shadow: none;
}

.journal-content a {
    color: black;
    font-family: Quicksand;
    font-size: 13px;
    font-weight: 400;
    word-wrap: break-word;
    text-decoration: none;
    text-shadow: none;
}


.mood-content {
    color: transparent;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    font-family: Quicksand;
    font-size: 13px;
    font-weight: 400;
    word-wrap: break-word;
    text-decoration: none;
}


.mood-content a:hover {
    color: black;
    font-family: Quicksand;
    font-size: 13px;
    font-weight: 400;
    word-wrap: break-word;
    text-decoration: none;
    text-shadow: none;
}

.mood-content a {
    color: black;
    font-family: Quicksand;
    font-size: 13px;
    font-weight: 400;
    word-wrap: break-word;
    text-decoration: none;
    text-shadow: none;
}

.btn-white {
    color: #000;
    background-color: #fff;
    border-color: #1861ac;
}

table {
    background: #EFEDFF;
    color: black;
    /*  border: 1px solid; */
    width: 100%;
}

th, td {
    font-weight: bold;
    text-align: center;
}


td {
    border: 1px solid;
    border-color: white;
    height: 100%;
    position: relative;
    text-align: center;
    width: 14.29%;
}

td .content { aspect-ratio: 1/.5; }



.form-tasks {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    color: #414141;
    padding: 1rem;
    width: var(--form-max-width);
}

.form-tasks .h3 { color: #414141 }

.calendar-container header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 25px 30px 10px;
}

header .calendar-navigation { display: flex; }

header .calendar-navigation span {
    border-radius: 50%;
    color: #aeabab;
    cursor: pointer;
    font-size: 1.9rem;
    height: 38px;
    line-height: 38px;
    margin: 0 1px;
    text-align: center;
    user-select: none;
    width: 38px;
}

.calendar-navigation span:last-child { margin-right: -10px; }

header .calendar-navigation span:hover { background: #f2f2f2; }

header .calendar-current-date {
    font-size: 1.45rem;
    font-weight: 500;
}

.event-options {
    text-align: right;
    alignment: right;
}

.event-options > button { text-align: right; }


.calendar-day-view {
    max-width: var(--calendar-max-width);
    display: flex;
    flex-direction: column;
    padding: 30px;
    color: #414141;
    background: #F4F7FB;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    width: 100vw;
}

.calendar-day-view-row { height: auto; }

.calendar-day-view-time {
    width: 15%;
    border: none;
    background-color: #e5e5e0;
    border: 0px;
    font-size: 15px;
    font-weight: lighter;
    text-align: right;
    vertical-align: top;
}

.calendar-day-view-event {
    flex-direction: row;
    width: 85%;
    display: flex;
    justify-content: center;
    align-items: start;
    border: 1px solid #e5e5e0;
    position: relative;
    padding: 5px;
    box-sizing: border-box;
    background: #FFFFFB;
    vertical-align: top;
}


.calendar-body ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.calendar-body .calendar-dates { margin-bottom: 20px; }

.calendar-body li {
    color: #414141;
    font-size: 1.07rem;
    width: calc(100% / 7);
}

.calendar-body .calendar-weekdays li {
    cursor: default;
    font-weight: 500;
}

.calendar-body .calendar-dates li {
    cursor: pointer;
    margin-top: 30px;
    position: relative;
    z-index: 0;
}




.calendar-body-small ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.calendar-body-small .calendar-dates { margin-bottom: 20px; }

.calendar-body-small li {
    color: #414141;
    font-size: 1.07rem;
    width: calc(100% / 7);
}

.calendar-body-small .calendar-weekdays li {
    cursor: default;
    font-weight: 500;
}

.calendar-body-small .calendar-dates li {
    cursor: pointer;
    margin-top: 30px;
    position: relative;
    z-index: 0;
}

.calendar-container-small {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: #F4F7FB;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}


.calendar-header-small {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.calendar-dates li.inactive { color: #aaa; }

.calendar-dates li.active { color: #fff; }

.calendar-dates li.today { color: #fff; }

.calendar-dates li.todayactive {
    color: #fff;
    border-width: 2px;
    border-color: #fff;
}

.calendar-dates li::before {
    border-radius: 50%;
    text-align: center;
    content: "";
    height: 40px;
    left: 10px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    z-index: -1;
}

.calendar-dates li.active::before {
    background: #aeabab;
    color: #fff;
}

.calendar-dates li:not(.active):hover::before { background: #efedff; }

.calendar-dates li.today::before { background: #FF6F61; }

.calendar-dates li.todayactive::before { background: #6332c5; }


.event-links {
    color: #DA4A92;
    font-family: Quicksand;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
}

.calendar-container {
    max-width: var(--calendar-max-width);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*    min-width: 380px;*/
    padding: 10px;
    background: #F4F7FB;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    width: 100%;
}


.calendar-header {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calendar-title-month {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-color);
}

.calendar-title-year {
    font-size: 1.5rem;
    font-weight: 200;
    margin-left: .4rem;
    color: var(--text-color);
}

.calendar {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--calendar-background-color);
}

.calendar-days {
    width: 100%;
    height: 100%;
    display: flex;
    padding-right: 30px;
    flex-direction: row;
    align-items: center;
    background-color: var(--calendar-background-color);
    height: 3rem;
    border-bottom: 1px solid var(--calendar-border-color);
}

.calendar-days > .calendar-day {
    flex: 1;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 10vw;
}

.calendar-day-number {
    width: 0.4 rem;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
}

.calendar-day-name {
    width: 1.5rem;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
}

.calendar-days > .calendar-timeline-column {
    flex: 1;
    max-width: var(--timeline-width);
}

.calendar-day > .calendar-day-number {
    margin-left: .4rem;
    padding: .4rem;
}

.calendar-day > .calendar-day-name {
    margin-right: .4rem;
    padding: .4rem;
}

.calendar-day-number.calendar-day-number-today {
    background-color: var(--today-color);
    border-radius: 100%;
    color: var(--today-text-color);
}

.calendar-body {
    width: 100%;
    height: 100%;
    max-height: var(--calendar-body-height);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    padding-top: 20px;
    /*   background-color: var(--calendar-background-color);*/
}

.calendar-body-rows {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.calendar-body-row {
    width: 100%;
    height: var(--calendar-cell-height);
    display: flex;
    flex-direction: row;
    align-items: center;
}


.calendar-body-column {
    flex: 1;
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--calendar-border-color);
    position: relative;
    box-sizing: border-box;
    max-width: var(--calendar-cell-width);
    width: 10vw;
}


.calendar-body-column:nth-child(2) { border-left: none; }

.calendar-body-column:last-child {
    border-right: none;
    background-color: var(--calendar-weekend-color);
}

.calendar-body-column:nth-last-child(7) { background-color: var(--calendar-weekend-color); }

.calendar-timeline-column {
    color: var(--text-color);
    opacity: 0.5;
    margin-bottom: var(--calendar-cell-height);
}

.calendar-timeline-last-hour {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: calc(var(--calendar-cell-height) * 1.3);
    margin-bottom: calc(var(--calendar-cell-height) * -1);
}

.calendar-all-day-row {
    position: sticky;
    top: 0px;
    width: 100%;
    border-bottom: 4px solid var(--calendar-border-color);
    height: calc(var(--calendar-cell-height) / 2);
    margin-bottom: 1rem;
    color: var(--text-color);
    background-color: var(--calendar-background-color);
    z-index: 1;
    display: flex;
}

.calendar-all-day-row > * {
    border-top: none;
    border-bottom: none;
}

.calendar-all-day-row > .calendar-body-column:nth-last-child(1),
.calendar-all-day-row > .calendar-body-column:nth-last-child(2) { padding-top: var(--calendar-cell-height); }

.calendar-all-day-row > .calendar-body-column::after {
    content: "";
    position: absolute;
    top: 0;
    right: -2px;
    width: 2px;
    height: var(--calendar-cell-height);
    background-color: var(--calendar-border-color);
}

.calendar-all-day-row > .calendar-timeline-column::after { display: none; }

.calendar-body-column.calendar-timeline-column {
    max-width: var(--timeline-width);
    border: none;
}

.calendar-event {
    flex: 1;
    font-size: 0.6rem;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    align-self: flex-start;
    border-radius: 2px;
    height: 100%;
    opacity: 0.8;
    position: relative;
}

.calendar-event:hover {
    cursor: pointer;
    opacity: 1;
    transform: scale(1.1);
    z-index: 1;
    transition: all 0.2s ease-in-out;
}


.calendar-body-column > .calendar-event:not(:last-child) { margin-right: 2px; }

.calendar-event-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 200px;
    background-color: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    align-items: first;
    z-index: 99;
    box-shadow: 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%), 0px 11px 15px -7px rgb(0 0 0 / 20%);
}

.calendar-event-tooltip-body {
    width: 100%;
    height: 100%;
    padding: 15px;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.calendar-body-button {
    display: block;
    width: 100%;
    color: #fff;
    font-size: 0.9em;
    padding: 7px;
    text-align: center;
    cursor: pointer;
    margin-top: auto;
}

.calendar-event-tooltip-header {
    font-size: 1.2rem;
    font-weight: bold;
    width: 90%;
    margin-bottom: 1rem;
}

.calendar-event-tooltip-close {
    position: absolute;
    right: 15px;
}

.calendar-event-tooltip-close:hover {
    transform: scale(1.1);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

/* Mobile first - up to 768px wide */

@media screen and (max-width: 768px) {
    .calendar-day-view-time {

        font-size: 12px;
        width: 15%;
    }

    .calendar-day-view-event { width: 85%; }    
}

.footer-layout {
    font-size: 16px;
    color: #fff;
    text-decoration-color: white;
    text-decoration: none;
}

.footer-layout a {
    font-size: 16px;
    color: #fff;
    text-decoration-color: white;
    text-decoration: none;
}

/* Desktop size */

@media screen and (min-width: 1024px) {
    /*body { background-color: #0F0; }*/ /* Debug */
    .calendar-day-view-time { width: 10%; }

    .calendar-day-view-event { width: 90%; }

    html {
        font-size: 16px;
        padding-top: 50px;
    }

    .calendar-day-name { font-size: 1.0rem; }

    .calendar-header { height: 40px; }

    .calendar-title-month { font-size: 1.2rem; }

    .calendar-title-year { font-size: 1.2rem; }

    .calendar-days { height: 2rem; }

    .calendar-day { width: 10vw; }

    .calendar-day-number { font-size: 1.0rem; }

    .calendar-body-column { max-width: var(--calendar-cell-width); }

    .calendar-timeline-column { max-width: var(--timeline-width); }

    .calendar-timeline-last-hour {
        height: calc(var(--calendar-cell-height) * 1.3);
        margin-bottom: calc(var(--calendar-cell-height) * -1);
    }

    .calendar-all-day-row { height: calc(var(--calendar-cell-height) / 2); }
}

/* Tablet targeted size */

@media screen and (min-width: 768px) and (max-width: 1024px) {
    /*body { background-color: green; }*/ /* Debug */

    .calendar-day-view-time { width: 15%; }

    .calendar-day-view-event { width: 85%; }

    .table { width: 90% }

    .journal_textEditor_toolbar { justify-content: flex-start; }

    .calendar-day-number { display: none; }

    .bd-placeholder-img-lg { font-size: 3.5rem; }


    html {
        font-size: 16px;
        padding-top: 50px;
    }

    .calendar-day-name { font-size: 1.0rem; }

    .calendar-header { height: 40px; }

    .calendar-title-month { font-size: 1.2rem; }

    .calendar-title-year { font-size: 1.2rem; }

    .calendar-days { height: 2rem; }

    .calendar-day { width: 10vw; }

    .calendar-day-number { font-size: 1.0rem; }

    .calendar-body-column {
        max-width: var(--calendar-cell-width);
        width: 10vw;
    }

    .calendar-timeline-column { max-width: var(--timeline-width); }

    .calendar-timeline-last-hour {
        height: calc(var(--calendar-cell-height) * 1.3);
        margin-bottom: calc(var(--calendar-cell-height) * -1);
    }

    .calendar-day-number { display: block; }


    .calendar-all-day-row { height: calc(var(--calendar-cell-height) / 2); }
}

@media screen and (min-width: 766px) and (max-width: 841px) {
    html { padding-top: 70px; }

    /*body { background-color: pink; }*/ /* Debug */

    .dot-override { width: 600px; }


    .calendar-day-number { display: none; }

    .calendar-day-view-time {
        width: 20%;
        font-size: 12px;
    }

    .calendar-day-view-event { width: 80%; }

    .dot {
        height: 50px;
        width: 50px;
        font-size: 25px;
        border-width: 2px;
        padding-top: 3px;
        margin-left: 3px;
    }


    .dot_goal_set {
        height: 50px;
        width: 50px;
        font-size: 25px;
        padding-top: 2px;
        margin-left: 3px;
    }
}


@media screen and  (max-width: 534px) {
    .calendar-day-view-time {
        width: 17%;
        font-size: 12px;
    }

    .calendar-day-view-event {
        width: 83%;
    }

}

/* Small Mobile targeted size */

@media screen and (max-width: 481px) {
    /*body { background-color: purple;}*/ /* Debug */

    .calendar-day-view { padding-right: 20px; }

    .event-options {
        text-align: right;
        alignment: right;
    }

    .event-options > button { text-align: left; }


    .calendar-day-view-time {
        width: 20%;
        border: none;
        background-color: #e5e5e0;
        border: 0px;
        text-align: right;
        font-size: 12px;
    }

    .calendar-day-view-event { width: 80%; }


    .calendar-day-number { display: none; }

    .dot {
        height: 50px;
        width: 50px;
        font-size: 25px;
        border-width: 2px;
        padding-top: 3px;
        margin-left: 3px;
    }


    .dot_goal_set {
        height: 50px;
        width: 50px;
        font-size: 25px;
        padding-top: 2px;
        margin-left: 3px;
    }

    .journal_textEditor_toolbar {
        justify-content: flex-start;
        margin-bottom: 15px;
    }


    #btnPomodoroPause, #btnPomodoroCancel, #btnPomodoroStart { width: 80%; }

    .table { display: block; }

    .table_row:nth-child(2n + 3) { background: none; }

    .theader { display: none; }

    .table_row > .table_small > .table_cell:nth-child(odd) {
        display: table-cell;
        width: 50%;
    }

    .table_cell {
        display: table-cell;
        width: 50%;
        background: none;
    }

    .table_row {
        display: table;
        width: 100%;
        border-collapse: separate;
        padding-bottom: 20px;
        margin: 5% auto 0;
        text-align: center;
    }

    .table_small { display: table-row; }

    .table_row > .table_small:first-child > .table_cell:last-child { border-left: none; }

    .table_row > .table_small > .table_cell:first-child { border-left: #ccc 1px solid; }

    .table_row > .table_small:first-child > .table_cell:first-child {
        border-top-left-radius: 5px;
        border-top: #ccc 1px solid;
    }

    .table_row > .table_small:first-child > .table_cell:last-child {
        border-top-right-radius: 5px;
        border-top: #ccc 1px solid;
    }

    .table_row > .table_small:last-child > .table_cell:first-child { border-right: none; }

    .table_row > .table_small > .table_cell:last-child { border-right: #ccc 1px solid; }

    .table_row > .table_small:last-child > .table_cell:first-child { border-bottom-left-radius: 5px; }

    .table_row > .table_small:last-child > .table_cell:last-child { border-bottom-right-radius: 5px; }

    .table_row > .table_small > .table_cell {
        padding-top: 3px;
        padding-bottom: 3px;
        color: #5b5b5b;
        border-bottom: #ccc 1px solid;
    }

    .table_row > .table_small:first-child > .table_cell { border-left: #ccc 1px solid; }

    .table_row > .table_small:last-child > .table_cell { border-right: #ccc 1px solid; }

    .table_row:last-child > .table_small:last-child > .table_cell:last-child { border-bottom-right-radius: 5px; }

    .table_row:last-child > .table_small:first-child > .table_cell:last-child { border-bottom-left-radius: 5px; }

    .calendar-day-number { display: none; }
}

@media screen and (max-width: 400px) {
    /*body { background-color: orange; }*/ /* Debug */
    .col-main { width: 100vw; }

    .dot {
        height: 40px;
        width: 40px;
        font-size: 20px;
        border-width: 1px;
        padding-top: 3px;
        margin-left: 3px;
    }

    .calendar-day-number { display: none; }

    .dot_goal_set {
        height: 40px;
        width: 40px;
        font-size: 20px;
        padding-top: 2px;
        margin-left: 3px;
    }

    .footer-layout {
        font-size: 13px;
        color: #fff;
        text-decoration-color: white;
        text-decoration: none;
    }

    .footer-layout a {
        font-size: 13px;
        color: #fff;
        text-decoration-color: white;
        text-decoration: none;
    }
}