/*
* ---------------------------------------
* Reset und Grundlegende Styles
* ---------------------------------------
* 
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #d2d2d2;
    background: url("img/background_pattern.png");
}

.wrapper {
    width: 100%;
    max-width: 1024px;
    min-height: 94vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 3vh auto 3vh auto;
    border-radius: 20px;
    padding: 20px;
    background-color: #f4f4f4;
}


/*
* ---------------------------------------
* Flexbox Styles
* ---------------------------------------
* 
*/

.row {
    display: flex;
    flex-direction: row;
}

.column {
    display: flex;
    flex-direction: column;
}

/*
* ---------------------------------------
* Einzelne Elemente
* ---------------------------------------
* 
*/

.button {
    display: inline-block;
    height: 100%;
    min-width: 45px;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid #ababab;
    padding: 10px;
    font-size: 16px;
    background-color: #f0f0f0;
}

.button:hover {
    background-color: #e0e0e0;
}

.button:active {
    background-color: #c0c0c0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.3em;
}

/*
* ---------------------------------------
* List-Item Styles und Rounded-Box Styles
* ---------------------------------------
* Definition von Rundungen, Borders, Hintergrundfarben und Abständen
* -> Basierend auf der Position in der Liste haben die List-Items unterschiedliche Rundungen und Borders
* -> Rounded-Boxen haben immer abgerundete Ecken
* -> Textfelder in Rounded-Boxen nehmen die volle verfügbare Breite ein
*/
.list_item, .rounded_box, .list_header, .list_footer {
    width: 100%;
    background-color: white;
    border: 1px solid #e7e7e7;
    padding: 20px;
}

.rounded_box {
    border-radius: 15px !important;
}

.list_header {
    border-top-left-radius:  15px;
    border-top-right-radius:  15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/*
* Den höher, bzw. tiefer Sort-Button aus dem ersten und letztem List-Item als disabled markieren
*/
.list_item:first-of-type div:first-of-type input:first-of-type,
.list_item:last-of-type div:first-of-type input:last-of-type,
.list_item:first-of-type div:first-of-type input:first-of-type:hover,
.list_item:last-of-type div:first-of-type input:last-of-type:hover {
    background-color: #f6f6f6;
    color: #d4d4d4;
    border-color: #d4d4d4;
    cursor: default;
}


.list_item {
    border-top: 0;
}

.list_footer:last-of-type {
    border-bottom-left-radius:  15px;
    border-bottom-right-radius:  15px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
}

.list_item form, .rounded_box form {
    width: 100%;
}

.list_item input[type="text"], .rounded_box input[type="text"] {
    width: 100%;
    height: 100%;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 16px;
}


.checked input[type="text"] {
    text-decoration: line-through;
    color: #ababab;
}

/*
* --------------
* Section Styles
* --------------
* Definition der Abstände und Breiten der einzelnen Sektionen und ihrer Elemente
* -> Die letzte Sektion in einer Reihe hat keinen rechten Abstand
* -> Das letzte Element in einer Sektion hat keinen rechten Abstand
* -> Die Hauptsektion nimmt die volle verfügbare Breite ein
*/

.row .section, .row .section > * {
    margin-right: 10px;
}

.row .section :last-child {
    margin-right: 0;
}

.row .section:last-of-type {
    margin-right: 0;
}

.row .section_main {
    width: 100%;
}


/*
* ---------------
* Specific Elements 
* ---------------
*/

#header {
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
}

#page_title {
    margin-bottom: 20px;
    border-radius: 20px;
    background-color: #419d69;
    color: white;
}


#note_input {
    text-align: left;
    border: 20px solid #419d69 !important;
    border-radius: 20px;
}


#note_input h2 {
    margin-bottom: 10px;
}

#notes_list {
    padding: 20px;  
    width: 100%;
    background-color: #419d69;
    border-radius: 20px;
}

#messenger {
    margin-top: 15px;
    background-color: #51d47c;
    border-radius: 10px;
    padding: 10px 15px;
    height: 60px;
    color: white;
    font-weight: bold;
}

#messenger.error {
    background-color: #ff4d4d;

}
#messenger > div.section_main {
    padding: 10px 0 0 0;
    text-align: center;
}