body {
    --color-green: #6da55e;
    --color-red: #c94e4e;
}

.var-dump {
    margin-left: 0px;
    font-family: monospace;
    font-size: 12px;
}
.var-dump .type {
    font-size: 11px;
    font-weight: bold;
}
.var-dump .typev {
    font-size: 11px;
    font-style: italic;
    color: green;
}
.var-dump .type-string {
    color: #c00;
}
.var-dump .string-len {
    font-size: 11px;
    color: #585858;
}
.var-dump .type-boolean {
    color: #c00;
    background: #e2e2e2;
    padding: 2px;
}

body { margin:0px;padding: 0px;font-family: Arial, Helvetica, sans-serif; }

.habita-table {
    border-collapse: collapse;
}
.habita-table th {
    font-size: 12px;
    padding: 2px 5px;
}
.habita-table td {
    padding: 10px;
}
.day-color-0 {
    background: #afe5ff;
}
.day-color-light-0 {
    background: #e3f3fb;
}
.day-color-1 {
    background: #ffbeff;
}
.day-color-light-1 {
    background: #fce4fc;
}
.day-color-2 {
    background: #fbdda7;
}
.day-color-light-2 {
    background: #fcf1de;
}
.day-color-3 {
    background: #ffffc5;
}
.day-color-light-3 {
    background: #ffffe6;
}
.day-color-4 {
    background: #e9e9e9;
}
.day-color-light-4 {
    background: #f3f3f3;
}
.day-current {
    background: #b1ffb1;
}
.s-info {
    color: #9f9f9f;
}

.day-state-missing .checkbox-fake { border-color: #00000005; background: #00000008; }

.small-bar {
    height: 35px;
    background: #ffffff52;
    width: 15px;
    margin: 5px auto;
    position: relative;
}
.small-bar.small-bar-great > div {
    background: #6fa45c;
}
.small-bar > div {
    background: #10bdff;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
.day-free {
    background: #dbdbdb;
}
.fa-check, .fa-x, .fa-bac, .fa-angle-up, .fa-angle-down {
    border-radius: 3px;
    width: 16px;
    height: 16px;
    text-align: center;
    font-size: 11px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    color: #ffffff;
}
.fa-x {
    font-size: 9px;
    width: 14px;
    height: 14px;
}
.fa-star {
    font-size: 8px;
}

.checkbox-fake {
    border-radius: 3px;
    width: 16px;
    height: 16px;
    text-align: center;
    font-size: 11px;
    color: #ffffff;
    display: inline-block;
    border: 1px solid #cfcfcf;
}
.checkbox-fake-whitebg {
    background: white;
}

.checkbox-fake.no-border {
    border: none;
}

.day-color-light-0 .fa-check, .day-color-light-0 .fa-bac, .day-color-light-0 .fa-color-check{
    background: #67cbfb;
}
.day-color-light-1 .fa-check, .day-color-light-1 .fa-bac, .day-color-light-1 .fa-color-check{
    background: #ff92ff;
}
.day-color-light-2 .fa-check, .day-color-light-2 .fa-bac, .day-color-light-2 .fa-color-check{
    background: #ffd588;
}
.day-color-light-3 .fa-check, .day-color-light-3 .fa-bac, .day-color-light-3 .fa-color-check{
    background: #c1c138;
}
.day-color-light-4 .fa-check, .day-color-light-4 .fa-bac, .day-color-light-4 .fa-color-check{
    background: #a0a0a0;
}

.day-color-light-0  .fa-x {
    border: 2px solid #67cbfb;
    color: #67cbfb;
}
.day-color-light-1  .fa-x {
    border: 2px solid #ff92ff;
    color: #ff92ff;
}
.day-color-light-2  .fa-x {
    border: 2px solid #ffd588;
    color: #ffd588;
}
.day-color-light-3  .fa-x {
    border: 2px solid #c1c138;
    color: #c1c138;
}
.day-color-light-4  .fa-x {
    border: 2px solid #a0a0a0;
    color: #a0a0a0;
}
.color-primary {
    background: var(--color-green);
    color: white;
}
.text-center {
    text-align: center;
}
.text-bold {
    font-weight: bold;
}
.border {
    border: 1px solid silver;
}
.border-bottom {
    border-bottom: 4px solid #d9d9d9;
}
.big-title {
    background: var(--color-green);
    color: white;
    font-size: 28px !important;
    text-align: center;
    padding: 5px 15px !important;
}
.big-title-2 {
    background: var(--color-green);
    color: white;
    padding: 5px 15px !important;
    font-size: 14px !important;
    text-align: right;
    font-weight: bold;
    font-style: italic;
}
.graf {
    width: 80px;
    height: 80px;
    margin: 0px auto;
    position: relative;
    padding: 5px 0px;
    padding-top: 0px;
}
.graf > div {
    position: absolute;
    top: 48%;
    left: 39%;
    font-size: 10px;
}

.btna {
    text-decoration: none;
    background: #88c378;
    color: white;
    padding: 0px 7px;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #0000000a;
}
.btna.active {
    text-decoration: none;
    background: #3e6633;
    color: white;
    padding: 0px 7px;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #00000078 inset;
}

.badge-holder {
    position: relative;
}
.badge-holder .badge {
    position: absolute;
    right: -3px;
    top: 11px;
    font-size: 9px;
    background: gold;
    color: black;
    padding: 4px;
    border-radius: 50%;
    transform: rotate(12deg);
    z-index: 10;
}

.elipsis_220 {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
    white-space: nowrap;
    display: block;
}
.separate-row {
    border-bottom: 1px solid #e7e7e7;
}

td > .fa-solid.fa-angle-up { box-shadow: 0px 0px 0px 2px var(--color-green); }
td > .fa-solid.fa-angle-down { box-shadow: 0px 0px 0px 2px var(--color-red); }

.task-double-info { padding: 8px 10px; }
.task-double-info .task-title { font-size: 9px; }
.task-double-info .task-notes { font-size: 8px; color: #787878; margin-top: -1px; }

.habits-green { color: var(--color-green); }
.habits-red { color: var(--color-red); }

.checkbox-combined { position: relative; }
.checkbox-combined .fa-angle-up { position: absolute; left: -2px; top: -3px; }
.checkbox-combined .fa-angle-down { position: absolute; left: 1px; top: 2px; }

.scored-info { position: relative; height: 23px; }
.scored-info .scored-up-more { padding: 1px; z-index: 10; left: -2px; top: 0px; }
.scored-info .scored-down-more { padding: 1px; z-index: 10; left: 11px; top: 8px; }
.scored-info .scored-up { background: var(--color-green); color: white; width: 15px; height: 15px; border-radius: 50%; position: absolute; left: 0px; top: 1px; font-size: 10px; display: flex; justify-content: center; align-items: center; }
.scored-info .scored-down { background: var(--color-red); color: white; width: 15px; height: 15px; border-radius: 50%; position: absolute; left: 11px; top: 8px; font-size: 10px; display: flex; justify-content: center; align-items: center; }

.flex-table { display: flex; }
.flex-table > div { flex: 1 }

.task-note { overflow: hidden; min-width: 400px; background: #03A9F4; color: white; padding: 15px; position: relative; width: 90%; margin: 0px auto; margin-bottom: 10px; }
.task-note > .task-check-state { position: absolute; left: 0px; top: 0px; background: #0288D1; bottom: 0px; width: 44px; display: flex; justify-content: center; align-items: center; }
.task-note > .task-content { margin-left: 45px; }
.task-note > .task-content .todo-name { font-weight: bold; font-size: 13px; }
.task-note > .task-content .todo-desc { font-size: 12px; margin-top: 10px; }
.task-note > .task-content .todo-completed { color: #B3E5FC; font-size: 11px; margin-top: 2px; }
.task-note .priority-mark { position: absolute; right: -33px; top: -32px; background: #BDBDBD; padding: 10px; transform: rotate(45deg); width: 44px; height: 44px; display: flex; justify-content: center; align-items: end; font-size: 11px; box-shadow: 0px 0px 5px #959595 inset; }

.task-note.priority-2 { background: #FFC107; }
.task-note.priority-2 .task-check-state { background: #FFA000; }
.task-note.priority-2 .todo-completed { color: #FFECB3; }

h3 { margin: 9px; }

a { text-decoration: none; color: var(--color-green); }
a:hover { text-decoration: underline; color: #3e6633; }

.warning-box { background: orange; padding: 9px; font-size: 13px; color: #342407; font-weight: bold; }
.top-warning { background: orange; padding: 15px; }

.message-ok { background: var(--color-green); padding: 12px; margin-bottom: 15px; color: white; font-weight: bold; }

.show-info-tooltip { position: relative; }
.show-info-tooltip:not(:hover) .info-tooltip { display:none; }
.show-info-tooltip .info-tooltip { position: absolute; top: -9px; right: 5px; background: white; width: 0px; z-index: 1000; }
.show-info-tooltip .info-tooltip > div { padding: 5px; min-width: 450px; background: white; box-shadow: 0px 0px 5px #8b8b8b; z-index: 10000; }

#contactForm {
    background-color: transparent; 
    padding: 20px;
    border-radius: 0px;
   /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
    max-width: 100%;
    margin: auto;
}

#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm textarea,
#contactForm select {
    width: 500px;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    border: 1px solid #ddd;
}

#contactForm button {
    background-color: #4CAF50; 
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#contactForm button:hover {
    background-color: #45a049;
}

@media screen and (max-width: 600px) {
    #contactForm {
        width: 100%;
        padding: 0px;
    }
}

#form-container input[type="text"],
#form-container input[type="email"],
#form-container input[type="password"],
#form-container textarea,
#form-container select {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    border: 1px solid #ddd;
}
#form-container button {
    background-color: #4CAF50; 
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#form-container button:hover {
    background-color: #45a049;
}

#form-container {
    background: rgb(255 255 255 / 74%);
    display: inline-block;
    padding: 10px 20px;
    border-radius: 0px;
    width: 370px;
}

.menu {
    text-align: center;
}

.menu-item {
    display: flex;
    max-width: 100%;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin-bottom: 10px;
}

.menu-item a {
    flex: 1;
    text-align: right; /* Zarovnání textu vlevo pro první položku */
}

.menu-item a:last-child {
    text-align: left; /* Zarovnání textu vpravo pro druhou položku */
}

.menu-item span {
    flex-shrink: 0; /* Zajistí, že znak | se nesmaží */
    padding: 0 10px;
}

/* Responzivní design pro menší obrazovky, například mobilní zařízení */
@media (max-width: 600px) {
body #logo { 
    max-width: 100%;
  }
    .menu-item {
        flex-direction: column;
    }

    .menu-item a {
        text-align: center;
        margin-bottom: 10px;
    }

    .menu-item a:last-child {
        margin-bottom: 0;
    }

    .menu-item span {
        display: none; /* Skryje znak | na malých obrazovkách */
    }

   #form-container {     width: 85%;     padding: 10px 17px !important; }
body #main-background {     padding: 10px; }
body { background-size: auto !important; }
}

    .powered-by {
        width: auto;
        height: 1%;
}