* {
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -webkit-text-size-adjust: 100%;
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}

html {
    margin: 0px auto;
    padding: 0px;
}

body {
    background: rgb(255, 255, 255);
    color: #2f4050;
    font-family: Lato, Consolas;
    font-size: 12pt !important;
    height: 100%;
    margin: 0px auto;
    overflow: auto;
    padding: 0px;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    quotes: "«""»";
    overflow-x: hidden;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;

    -webkit-flex-direction: row;
    flex-direction: row;

    -webkit-justify-content: center;
    justify-content: center;

    align-items: flex-start;
    flex-wrap: wrap;

    /*border: 2px solid green;*/
}

footer {
    width: 100%;
    margin-top: 30px;
    padding: 10px;
    text-align: center;
    color: rgb(219, 219, 219);
    border-top: 1px solid rgb(219, 219, 219);
    /*border: 2px solid blue;*/
}

header {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 85px;
    width: 100%;
    margin: 0px;
    padding: 20px;
    /*background: linear-gradient(#e08216, #ffa31ac2);*/
    background: linear-gradient(rgba(224, 130, 22, 1), rgb(252, 180, 72));

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;

    -webkit-flex-direction: row;
    flex-direction: row;

    -webkit-justify-content: center;
    justify-content: center;

    align-items: center;
    /*border: 2px solid rgb(224, 32, 176);*/
}

li {
    display: inline;
    margin-left: 20px;
    margin-right: 20px;
    padding: 3px 3px 0px 3px;
}

li:hover {
    border-radius: 5px 5px 0px 0px;
    color: black;
    cursor: pointer;
}

main {
    min-height: calc(100vh - 200px);
}

ul {
    height: auto;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    position: relative;
}


#container {
    max-width: 1200px;
    height: calc(100% - 85px);
    margin-top: 85px;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;

    -webkit-flex-direction: row;
    flex-direction: row;

    -webkit-justify-content: center;
    justify-content: center;

    align-content: space-between;
    -webkit-align-content: space-between;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;

    /*border: 2px solid red;*/
}

#content {
    max-width: 600px;
    margin-top: 10px;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;

    -webkit-flex-direction: row;
    flex-direction: row;

    -webkit-justify-content: center;
    justify-content: center;

    align-content: space-between;
    -webkit-align-content: space-between;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;

    /*border: 2px solid red;*/
}

#dashboard {
    margin-left: 10px;
    font-size: 16px;
    background: none;
    border: none;
}

#logo {
    height: 60px;
    margin: auto;
}

#settings {
    font-size: 16px;
    background: none;
    border: none;
}

#notification-area {
    position: fixed;
    display: flex;
    right: 0px;
    top: 0px;
    width: 300px;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 10000;
}

#notification-area .notification {
    animation: showNotification 500ms ease-in-out forwards;
    background: #111;
    border-radius: 5px;
    color: #f5f5f5;
    font-size: 15px;
    font-weight: 600;
    left: 20px;
    margin: 5px 0px;
    padding: 15px 10px;
    opacity: 0;
    position: relative;
}


@keyframes showNotification {
    to {
        left: 0px;
        opacity: 1;
    }
}

#notification-area .notification.error {
    background: #ad1903;
}

#notification-area .notification.info {
    background: #0186bb;
}

#notification-area .notification.success {
    background: #1f661f;
}

#notification-area .notification.warning {
    background: orange;
}


div.pagination {
    clear: both;
    margin: 20px 0 0 0;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
}

div.pagination ul {
    cursor: pointer;
    display: inline-block;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: auto;
    zoom: 1;
}

div.pagination ul li.page_number {
    margin: 3px;
    padding: 0;
    width: auto;
}

div.pagination ul li.page_current {
    padding: 0;
    width: auto;
}

div.pagination ul li.page_current span {
    background: #f90;
    color: #000;
    padding: 0;
    width: auto;
}


/*
form:invalid {
    border: 5px solid #ffdddd;
}
form:valid {
    border: 5px solid #ddffdd;
}
*/

form input:invalid {
    /*background-color: #ffdddd;*/
    border-color: #c00000;
}

form input:required {
    /*border-color: #800000;*/
    border-width: 3px;
}

form input:required:invalid {
    /*background-color: #ffdddd;*/
    border-color: #c00000;
}

form input:required:valid {
    /*background-color: #ddffdd;*/
    /*border-color: green;*/
}

form input:valid {
    /*background-color: #ddffdd;*/
    /*border-color: green;*/
    /*border-width: 3px;*/
}


.feedback-button {
    position: fixed;
    left: 0px;
    bottom: 0px;
}

.input_field {
    border: 1px solid rgb(87, 87, 87);
    border-radius: 5px;
}

.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
}

.form-signin .checkbox {
    font-weight: 400;
}

.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;
}

.loading_spinner {
    left: calc(50% - 100px);
    position: absolute;
    text-align: center;
    width: 100px;
}

.preview {
    background-color: black;
    height: 137px;
    width: 220px
}

.title {
    text-align: center;
    font-size: 30px;
}

.translation {
    /*border: 1px solid red;*/
    pointer-events: auto;
}

/* NOTIFICATIONS - BEGIN */

.error {
    border: 1px solid #ad1903;
}

.info {
    border: 1px solid #0186bb;
}

.success {
    border: 1px solid #1f661f;
}

.warning {
    border: 1px solid orange;
}

/* NOTIFICATIONS - END */


/* 800PX AND BELOW */
@media all and (max-width: 800px) {

    header {
        height: 65px;
    }

    #container {
        margin-top: 65px;
    }

    #logo {
        height: 40px;
    }

}

/* 414PX AND BELOW */
@media all and (max-width: 414px) {

    #notification-area {
        position: fixed;
        width: 100%;
    }

}