/*
    COLORS:
    src: https://material.io/design/color/the-color-system.html#tools-for-picking-colors

    main #ffe400
    main dark #fed100

    sec: #00aeff
    sec light: #26baff
    sec dark: #057bc7

    just not white anymore: #f0f0f0

    placeholder-color: #747474


    INVERTS:
    main: #08146d
    main light: #0013a5 00238c (lighter)

    sec: #57bd00
    sec dark: #3f8a00
*/
/**
 * 
 * Colors (only js gets vars from here yet)
 *
 */
:root {
    --placeholder:  #757575; /* in add inputs */
    --red:          #ff0000; /* del icon */
    --text-shaddow: #000000; /* hint shaddow in lightbox */
    --lightbox-hint:#ffffff; /* hint text in lightbox */


    --text:         #000000;

    /* main */
    --main:         #ffe400; /* header */
    --main-accent:  #fed100; /* header-border */

    /* sec */
    --sec-lighter:  #26baff; /* icon-choose border */    
    --sec:          #00aeff; /* add donebtn */
    --sec-darker:   #057bc7; /* entry edit icons */

    --background:   #f0f0f0;

    --entry-bg:     #ffffff;
    --entry-border: #eeeeee;

    --border-color: #000000;
}
body.dark-mode {
    --text:         #cccccc;

    /* main */
    --main:         #08146d; /* header */
    --main-accent:  #00238c; /* header-border */

    /* sec */
    --sec-lighter:  #57bd00; /* icon-choose border */    
    --sec:          #499e01; /* add donebtn */
    --sec-darker:   #3f8a00; /* entry edit icons */

    --background:   #050505;

    --entry-bg:     #222222;
    --entry-border: #000000;

    --border-color: #555555;
}


/**
 *
 * General
 *
 **/
body {
    /* width: 100vw;
    height: 100vh; */
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;

    color: var(--text);
    background-color: var(--background);
    overflow: hidden;
    justify-items: center;
    margin: 0;
    font-size: 20px;
    font-family: Helvetica, Arial;
    display: flex;
    flex-flow: column;
    line-height: 1.2em;
}

input {
    font-size: 1em;
}




/**
 *
 * Footer
 *
 **/
.footer{
    background-color: var(--main);
    border-top: 2px solid var(--main-accent);
    width: 100%;
    overflow: hidden;
    /* position: fixed; */
    bottom: 0;

    display: flex;
}
.footer_nav {
    padding: 5px;
    text-align: center;
    flex-grow: 1;
}
.footer  i {
    font-size: 2em;
}
.footer .active {
    background-color: var(--main-accent);
}

/**
 *
 * Header
 *
 **/
.header {

    background-color: var(--main);
    border-bottom: 2px solid var(--main-accent);
    height: calc(5px + 2em);

    position: relative;
    text-align: center;
}
#page_title, #page_liste {
    margin-left: 10px;
    font-size: 30px;
    line-height: 50px;
}
#page_icon {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 2em;
}

/**
 *
 * Content
 *
 **/

/**
 * general
 **/
.content {
    /* position absolute = dont push each other while animation */
    position: absolute;
    top:    0px;
    left:   0px;
    right:  0px;
    bottom: 0px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    /* for right scrolling */
    height: auto;
    overflow: hidden;
    overflow-y: scroll;
}
.content.myfadein {
    /* thx to Tobi R. */
    opacity: 0;
    animation-name: myfadein;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}
.content.myfadeout {
    /* thx to Tobi R. */
    opacity: 1;
    animation-name: myfadeout;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

#content_container {
    position: relative;
    overflow: hidden;
    overflow-y: scroll;

    flex-grow: 1;
}



/**
 * Add
 **/
#event_name {
    color: var(--text);
    background-color: var(--entry-bg);

    height: 1.75em;
    padding: 5px 10px;
    border-radius: 5px;
    flex-grow: 0;
    flex-shrink: 0;
}
#date_and_add {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
}

#date_and_add div.mkOverlayPossible {
    position: relative;
    flex-grow: 1;
    align-self: center;
    padding-right: 15px;
}
#date_and_add div.overlay {
    padding: 5px 10px;
    color: var(--placeholder);
    line-height: 1.75em;
    height: 1.75em;
    flex-grow: 1;
    align-self: center;
    width: 100%;
    pointer-events: none;
    background-color: var(--entry-bg);
    opacity: 1;
}
#date_and_add input[type="date"] {
    background-color: var(--entry-bg);

    padding: 5px 10px;
    flex-grow: 1;
    /* 100% minus padding */
    width: calc(100% - 10px);
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0;
}
@media screen and (min-width: 600px) {
    #date_and_add div.overlay {
        opacity: 0;
    }
    #date_and_add input[type="date"] {
        opacity: 1;
    }
}

#add_btn {
    font-size: 3em;
    background-color: var(--sec);
    border-radius: 100%;
    padding: 5px;
    margin-left: 15px;
}
#icons_to_choose {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    overflow: scroll;
    background-color: var(--entry-bg);
}
#icons_to_choose i {
    font-size: 3em;
    margin: 8px;
    border: 3px solid transparent;
    border-radius: 15px;
}
#icons_to_choose i.selected {
    border-color: var(--sec-lighter);
    position: relative
}
#icon_color_pick {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0;
    width: 100%;
}
.pickerWrap {
    width: 100vw;
}

/* color picker */
body>div.pickerWrap {
    position: absolute !important;
    left: calc(50% - 120px) !important;
    bottom: 3em;
    /* width: 100% !important; */
    top: 72px !important;
}



/**
 * Moons
 **/
 #no-entries-hint-container {
     height: 90%;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 #no-entries-hint {
     text-align: center;
 }

.sortable-ghost {
    /* dont show placeholder element */
    opacity: 0;
}
.entry {
    background-color: var(--entry-bg);

    border-radius: 5px;
    border-bottom: 2px solid var(--entry-border);
    /* box-shadow: 0px 3px 10px #eee; */

    margin-bottom: 10px;

    display: flex;
    flex-direction: column;
}
.entry.slideOut {
    overflow: hidden;

    animation-name: entrySlideOut;
    animation-duration: .2s;
    animation-fill-mode: forwards;
}

.entry_inner {
    padding: 10px;

    display: flex;
    flex-direction: row;
}
.entry_inner i.entryIcon{
    font-size: 3.5em;
    width: 70px;
}
.entry_inner .entryContent {

    padding: 0 1em;
    overflow: hidden;

    flex-grow: 1;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.entry_inner .entryNumber {
    letter-spacing: .3em;
    font-size: 2em; /* only hp font 2.3, helvetica / arial needs 2.0 */
    text-align: right;
    min-height: .8em; /* don't cut the number */
}



/* entry menu */
.entry_menu {
    /* padding-bottom: 10px; */
    height: 0;

    display: flex;
    flex-direction: row;
    overflow: hidden;
}
.entry_menu.slideIn {
    animation-name: menuSlideIn;
    animation-duration: .2s;
    animation-fill-mode: forwards;
    /* animation-timing-function: linear; */

}
.entry_menu.open {
    height: 2em;
    padding-bottom: 10px;
}
.entry_menu.slideOut {
    overflow: hidden;

    animation-name: menuSliedOut;
    animation-duration: .2s;
    animation-fill-mode: forwards;
    /* animation-timing-function: linear; */
}
.entry_menu .entry_action {
    flex-grow: 1;
    text-align: center;
    margin: 0 15px; /* to have a space with no click event between */
}
.entry_menu .entry_action i {
    font-size: 2em;
}
.entry_menu .entry_action i.delete {
    color: var(--red);
}
.entry_menu .entry_action i.share {
    color: var(--sec-darker);
}
.entry_menu .entry_action i.edit {
    color: var(--sec-darker);
}
.entry_menu .entry_action i.done {
    color: #3f8a00; /* accept should always be green */
}


#clipboardHelper {
    position: absolute;
    top: -9999px;
}

/**
 * Settings
 **/

.settingsItem.toggelable {
    display: flex;
    margin: 15px 0;
}

.settings-cb {
    width: 30px;
    height: 30px;
    background-color: var(--entry-bg);

    text-align: center;
    font-size: 2.5em;

    font-family: Helvetica, Arial;

    margin-right: 13px;
}
.settings-cb.checked:before {
    font-family:  'Material Icons';
    content: "done";
    margin-left: -4px;
}
.settings-label {
    display: flex;
    align-items: center;
}

#defaultItemColorPicer {
    /* width: -webkit-fill-available; */
    opacity: 0;
    position: absolute;
    top: 0;
    /* right: 0; */
    /* bottom: 0; */
    left: 0;

    width: 100%;
    height: 100%;
}

#settings .customButton {
    position: relative; /* for colorpick pos absolute */
    display: flex;
    flex-direction: row;
    
    margin: 15px 0;
    height: 3em;
    align-items: center;
    
    background-color: var(--entry-bg);
    /* border-radius: 5px; */
}
#settings .customButton:active {
    background-color: var(--background);
}

#settings .customButton i {
    font-size: 2em;
    margin: 10px;
}

input#settingsImport {
    /* display: block; */
        
    height: 0;
}

/* only 1st of the 2 textest must be absolute positioned so the 2nd determines the correct place for both Texts to be */
#settings .customButton .normalTxt {
    position: absolute;
}
#settings .customButton .fadein {
    /* thx to Tobi R. */
    opacity: 0;
    animation-name: myfadein;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
#settings .customButton .fadeout {
    /* thx to Tobi R. */
    opacity: 0;
    animation-name: myfadeout;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

#settings .customButton .actionTxt {
    opacity: 0;
}

#settings button {
    flex-shrink: 0;
    height: 50px;
    margin-top: 10px;

    /* src: https://stackoverflow.com/questions/40163454/how-do-i-change-the-font-family-of-a-button-element */
    /* seems like the buttton needs extra treatment to accept the font hp-family */
    font-family: inherit;
    font-size: 1em;
}

#settings .dev-tool {
    display: none;
}
body.dev-tools #settings .dev-tool {
    display: flex;
}


/**
 * extra info:
 */
.entry_extra div {
    padding: 0px 10px 10px 10px;
}

/**
 *
 * Lightbox
 *
 */
#lightbox {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    z-index: 10;

    padding: 15px;

    /* color: initial; */
    background-color: rgba(0,0,0,.5);
}
.share-code img {
    margin: auto;
    margin-top: 5vh;

    padding: 20px;
    background-color: var(--entry-bg);
    border-radius: 10px;
}
.lightbox-input {
    display: block;
    margin: auto;
    padding: 1vw;

    margin-top: 1em;
    
    height: 1.75em;
    padding: 5px 10px;
    color: var(--text);
    background-color: var(--entry-bg);
    border: 1px solid var(--entry-bg);
    border-radius: 5px;
}
.lightbox-input.share {
    width: 276px;
}
.lightbox-content .hint {
    margin: auto;
    margin-top: 1em;

    text-align: center;
    width: 276px;

    /* font-weight: bold; */
    color: var(--lightbox-hint);
    text-shadow: -1px -1px 5px var(--text-shaddow), 1px 1px 5px var(--text-shaddow);
}
#lightbox .import {
    margin-top: 20vh;
}




/**
 *
 * in Sttings optional styles 
 *
 */


/**
 * hp-font
 */
 
body.hp-font, body.hp-font ::placeholder {
    font-family: 'ParryHotter', Helvetica, Arial;
}
body.hp-font .entry_inner .entryNumber  {
    font-size: 2.3em; /* only hp font 2.3 helvetica / arial needs 2.0 */
}

/** 
 * Background Image
 */
 body.bg-image {
    /* background-image: url("https://www.eberl-online.de/fileadmin/user_upload/Eberl-Online/Bilder/Mitarbeiterfotographie/_DSC2264_Lie_u__mann_Alex_17x20-cm.jpg"); */
    background-position: 50% 3%;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/**
* dark-mode
*/
/* body.dark-mode {
    background-color: #050505;
    color: #ccc;
}
body.dark-mode .header {
    background-color: #08146d;
    border-color: #00238c;
}
body.dark-mode .footer {
    background-color: #08146d;
    border-color: #00238c;
}
body.dark-mode .footer .footer_nav.active {
    background-color: #00238c
}

body.dark-mode .entry {
    background-color: #222;
    border-color: #000;
}
body.dark-mode .entry_menu .entry_action i.share {
    color: #57bd00;
}
body.dark-mode .entry_menu .entry_action i.edit {
    color: #57bd00;
}
body.dark-mode .settings-cb {
    background-color: #222;
}
body.dark-mode input {
    background-color: #222;
}
body.dark-mode #date_and_add div.overlay {
    background-color: #222;
}
body.dark-mode #add_btn {
    background-color: #3f8a00;
}
body.dark-mode #icons_to_choose {
    background-color: #222;
}
body.dark-mode #icons_to_choose i.selected {
    border-color: #57bd00; 
}
body.dark-mode #date_and_add div.mkOverlayPossible,
body.dark-mode #date_and_add div.mkOverlayPossible input,
body.dark-mode #event_name {
    color: #ccc;
}

body.dark-mode #lightbox {
    background-color: rgba(0,0,0,.7);
}

body.dark-mode a {
    color: #57bd00;
} */
/* invert helpers */
/* body.dark-mode .border {
    border-color: #555;
}  */


/**
 *
 * Helpers
 *
 **/
.border {
    border: 1px solid var(--border-color);
    border-radius: 5px;
}
.spacer {
    margin-bottom: 10px;
}
.hidden {
    display: none;
}
.blur {
    filter: blur(5px);
}

/* animation Thx to Tobi R. */
@keyframes myfadein {
    0% {
        opacity: 0;
        z-index: 0;
    }
    100% {
        opacity: 1;
        z-index: 1;
    }
}
@keyframes myfadeout {
    0% {
        opacity: 1;
        z-index: 1;
    }
    100% {
        opacity: 0;
        z-index: 0;
    }
}

@keyframes menuSlideIn {
    0% {
        height: 0;
        padding: 0;
        padding-bottom: 0px;
    }
    100% {
        height: 2em;
        padding-bottom: 10px;
    }
}
@keyframes menuSliedOut {
    0% {
        height: 2em;
        padding-bottom: 10px;
    }
    100% {
        height: 0;
        padding: 0;
        padding-bottom: 0px;
        /* margin-top: 0; */
        /* margin-bottom: 0; */
        /* border-top-width: 0; */
        /* border-bottom-width: 0; */
        /* opacity: 0; */
    }
}

@keyframes entrySlideOut {
    /* 0% {
        max-height: 142px;
        height: 142px;
        max-height: 142000px;
        margin-top: 10px;
    } */
    to {
        max-height: 0px;
        margin-top: 0;
        opacity: 0;
        border-bottom: 0;
    }
}
/**
 *
 * not self written below 
 *
 */




/* no texthighlighting */
/* src: https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting*/
/* .material-icons,
.noselect */
:not(.selectable) {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}


/* harry potter font */
@font-face {
    font-family: "ParryHotter";
    src: url("fonts/ParryHotter.ttf") format("truetype"), /* Safari, Android, iOS */
      url("fonts/ParryHotter.woff") format("woff"), /* Modern Browsers */
      url("fonts/ParryHotter.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
  }

/* material icons */
/* source: https://google.github.io/material-design-icons/ */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('fonts/Material Icons'),
        local('fonts/MaterialIcons-Regular'),
        url('fonts/MaterialIcons-Regular.woff') format('woff');
}
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
}