/* -- Reset ----------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* -------------------------------------------------------------------------- */

/* -- General --------------------------------------------------------------- */
    *{
        box-sizing: border-box;
    }
    body{
        height: 100%;
        font-family: 'Quattrocento Sans', Sans-Serif;
        font-size: 16px;
        overflow-y: scroll;
        background-image: url('bg.jpg');
        background-size: cover;
        background-attachment: fixed;
    }
    h1,h2,h3,h4{
        font-family: 'Ovo', Serif;
        font-weight: 700;
        margin-bottom: 20px;
        max-width: 90%;
    }
    h1{
        font-size: 2em;
    }
    h2{
        font-size: 1.7em;
    }
    h3{
        font-size: 1.4em;
    }
/* -------------------------------------------------------------------------- */

/* -- Header ---------------------------------------------------------------- */
    .header{
        background-color: #ffffff;
    }
    .header h1{
        margin: 0;
    }
    .header .header_content{
        position: relative;
        width: 70%;
        margin: 0 auto;
        padding: 20px;
    }
    .menu{
        position: absolute;
        top: 30px;
        right: 20px;
    }
    .menu a{
        text-decoration: none;
        color: #000000;
        margin-left: 10px;
        border: 1px solid #000000;
        padding: 5px;
    }
    .menu a:hover{
        cursor: pointer;
        color: #ffffff;
        border: 1px solid #936133;
        background-color: #936133;
    }
/* -------------------------------------------------------------------------- */

/* -- Content --------------------------------------------------------------- */
    .content{
        background-color: #ffffff;
        width: 70%;
        min-height: 80%;
        margin: 20px auto 0 auto;
        padding: 20px;
    }
    .content .toTop{
        display: none;
        cursor: pointer;
        color: #ffffff;
        position: fixed;
        bottom: 10px;
        right: 30px;
        border: 3px solid #ffffff;
        font-size: 10em;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjEyLjAwNyIgaGVpZ2h0PSI2MTIuMDA3IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZlcnNpb249IjEuMSI+CgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxnIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMzA2LjAwNCAzMDYuMDAzKSIgc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzEiPgogICA8ZyBzdHJva2U9Im51bGwiIGlkPSJfeDMxXzAiPgogICAgPGcgc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzIiPgogICAgIDxwYXRoIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmZmZmZiIgaWQ9InN2Z18zIiBkPSJtNTk2LjE2OCwxMzAuNjQ3Yy0yMS4xMTksLTIxLjE2OSAtNTUuMzgyLC0yMS4xNjkgLTc2LjUyNiwwbC0yMTMuNjI5LDIzNS43OTNsLTIxMy42MjksLTIzNS43OTNjLTIxLjE0NCwtMjEuMTY5IC01NS4zODIsLTIxLjE2OSAtNzYuNTI1LDBjLTIxLjE0NCwyMS4xNjkgLTIxLjE0NCw1NS40NTggMCw3Ni42MjdsMjQ4LjUwNCwyNzQuMzFjMTEuNDM4LDExLjQzOCAyNi42NzIsMTYuNDgyIDQxLjY1MSwxNS41NGMxNC45NTMsMC45NDIgMzAuMjEzLC00LjEwMiA0MS42NSwtMTUuNTRsMjQ4LjUwNSwtMjc0LjMxYzIxLjExOCwtMjEuMTY5IDIxLjExOCwtNTUuNDU3IC0wLjAwMSwtNzYuNjI3eiI+PC9wYXRoPgogICAgPC9nPgogICA8L2c+CiAgPC9nPgogIDxnIGlkPSJzdmdfNCI+PC9nPgogIDxnIGlkPSJzdmdfNSI+PC9nPgogIDxnIGlkPSJzdmdfNiI+PC9nPgogIDxnIGlkPSJzdmdfNyI+PC9nPgogIDxnIGlkPSJzdmdfOCI+PC9nPgogIDxnIGlkPSJzdmdfOSI+PC9nPgogIDxnIGlkPSJzdmdfMTAiPjwvZz4KICA8ZyBpZD0ic3ZnXzExIj48L2c+CiAgPGcgaWQ9InN2Z18xMiI+PC9nPgogIDxnIGlkPSJzdmdfMTMiPjwvZz4KICA8ZyBpZD0ic3ZnXzE0Ij48L2c+CiAgPGcgaWQ9InN2Z18xNSI+PC9nPgogIDxnIGlkPSJzdmdfMTYiPjwvZz4KICA8ZyBpZD0ic3ZnXzE3Ij48L2c+CiAgPGcgaWQ9InN2Z18xOCI+PC9nPgogPC9nPgo8L3N2Zz4=);
        background-size: 40px;
        width: 50px;
        height: 50px;
        padding: 20px;
        background-repeat: no-repeat;
        background-position: 50%;
        border-radius: 5px;
        opacity: 0.8;
    }
/* -------------------------------------------------------------------------- */

/* -- Products - PLP -------------------------------------------------------- */
    .productHeader{
        display: flex;
        flex-direction: row;
    }
    .productHeader h2{
        display: inline-block;
        flex-basis: 33%;
    }
    .productHeader p{
        flex-basis: 33%;
        text-align: right;
    }
    .productHeader p.deleted{
        flex-basis: 34%;
        text-align: center;
    }
    .productHeader p.deleted span{
        opacity: 0;
        color: #ffffff;
        border: 1px solid #ff0000;
        padding: 5px 20px 5px 20px;
        background-color: #ff0000;
        font-weight: 700;
    }
    .productHeader p.deleted.deleted_show span{
        opacity: 1;
    }
    .productHeader a{
        display: inline-block;
        text-decoration: none;
        color: #000000;
        border: 1px solid #c5c5c5;
        padding: 5px;
        margin-top: -5px;
    }
    .productHeader a:hover{
        cursor: pointer;
        color: #ffffff;
        border: 1px solid #936133;
        background-color: #936133;
    }
    .product_card{
        position: relative;
        border: 1px solid #c5c5c5;
        padding: 10px;
        margin-bottom: 20px;
    }
    .product_card.product_edited,
    .product_card.product_added{
        background-color: #dbf9db;
    }
    .product_card .edited,
    .product_card .added{
        display: none;
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 10px 10px 10px 17px;
        font-weight: 700;
        border-radius: 5px 0 0 0;
        color: #ffffff;
        background-color: #54b554;
        letter-spacing: 0.2em;
    }
    .product_card .edited.product_edited,
    .product_card .added.product_added{
        display: block;
    }
    .product_card .descripton{
        line-height: 1.2em;
    }
    .product_card .price{
        font-size: 1.8em;
        text-align: right;
    }
    .product_card a.edit{
        position: absolute;
        top: 0;
        right: 0;
        border-style: solid;
        border-color: #c5c5c5;
        border-width: 0 0 1px 1px;
        padding: 10px;
        border-radius: 0 0 0 10px;
        text-decoration: none;
        font-weight: 700;
        color: #000000;
    }
    .product_card a.edit:hover{
        cursor: pointer;
        color: #ffffff;
        border: 1px solid #936133;
        background-color: #936133;
    }
    .product_card .status{
        position: absolute;
        bottom: 0;
        left: 0px;
        border-style: solid;
        border-color: #ff0000;
        border-width: 2px 2px 0px 0px;
        padding: 5px 6px 5px 11px;
        border-radius: 0 10px 0 0;
        color: #ffffff;
        font-weight: 700;
        letter-spacing: 0.3em;
        background-color: red;
    }
    .product_card .status:empty{
        display: none;
    }
    .product_card .images img{
        height: 100px;
        border: 1px solid #c5c5c5;
        padding: 4px;
        margin-right: 10px;
    }
/* -------------------------------------------------------------------------- */

/* -- Forms ----------------------------------------------------------------- */
    form.mainForm p{
        margin-bottom: 20px;
    }
    form.mainForm label{
        display: inline-block;
        font-size: 1.2em;
        width: 120px;
        vertical-align: top;
        margin-top: 10px;
    }
    form.mainForm input[type=text],
    form.mainForm input[type=number],
    form.mainForm textarea{
        width: 500px;
        font-size: 1.2em;
        font-family: 'Quattrocento Sans', Sans-Serif;
        padding: 5px;
        outline: none;
        border: 1px solid #c5c5c5;
        border-radius: 5px;
    }
    form.mainForm textarea{
        width: 700px;
        max-width: 700px;
        min-width: 700px;
        height: 300px;
        min-height: 200px;
    }
    form.mainForm .checkbox{
        margin-left: 123px;
    }
    form.mainForm .checkbox label{
        vertical-align: super;
    }
    form.mainForm .checkbox input{
        width: 20px;
        height: 20px;
        color: #c5c5c5;
        background-color: #c5c5c5;
        margin: 2px 0 0px 0;
        display: inline-block;
    }
    form.mainForm .control{
        margin-left: 123px;
        max-width: 700px;
    }
    form.mainForm input[type=submit]{
        background-color: #ffffff;
        border: 1px solid #c5c5c5;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1.2em;
        font-family: 'Quattrocento Sans', Sans-Serif;
        padding: 10px 20px;
    }
    form.mainForm input[type=submit]:hover{
        color: #ffffff;
        border: 1px solid #936133;
        background-color: #936133;
    }
    form.mainForm a.delete{
        background-color: #ffffff;
        border: 1px solid #ff0000;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1.2em;
        font-family: 'Quattrocento Sans', Sans-Serif;
        padding: 10px 20px;
        text-decoration: none;
        color: #ff0000;
        float: right;
    }
    form.mainForm a.delete:hover{
        color: #ffffff;
        background-color: #ff0000;
    }
    form.mainForm input[type=file]{
        background-color: #ffffff;
        cursor: pointer;
        font-size: 1.2em;
        font-family: 'Quattrocento Sans', Sans-Serif;
        width: 325px;
    }
    form.mainForm .image_error{
        display: none;
        color: #ff0000;
    }
    form.mainForm input.form_error,
    form.mainForm textarea.form_error{
        border-color: #ff0000;
        background-color: #ffe0e0;
    }
    .required{
        margin: 0 0 10px 123px;
        color: #ff0000;
    }
    .images{
        margin-top: 50px;
    }
    .images p{
        display: inline-block;
        position: relative;
    }
    .images p a.image_delete{
        position: absolute;
        top: 9px;
        right: 19px;
        background-color: #ff0000;
        text-decoration: none;
        color: #ffffff;
        padding: 3px 8px 5px 8px;
        font-weight: 700;
        font-size: 1.2em;
        border-radius: 50%;
    }
    .images img{
        height: 100px;
        border: 1px solid #c5c5c5;
        padding: 4px;
        margin-right: 10px;
    }
    .imageDeleted{
        text-align: center;
    }
    .imageDeleted span{
        color: #ffffff;
        border: 1px solid #ff0000;
        padding: 5px 20px 5px 20px;
        background-color: #ff0000;
        font-weight: 700;
    }
/* -------------------------------------------------------------------------- */

/* -- Modal ----------------------------------------------------------------- */
    .modalFade{
        display: none;
        background-color: rgba(0,0,0,0.6);
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .modalFade .modal{
        display: none;
        width: 600px;
        min-height: 200px;
        background-color: #ffffff;
        border-radius: 5px;
        position: fixed;
        left: 50%;
        top: 100px;
        margin-left: -300px;
    }
    .modalFade .modal .modal-close{
        position: absolute;
        top: 2px;
        right: 10px;
        font-size: 2em;
        cursor: pointer;
    }
    .modalFade .modal .modal-content{
        margin: 50px;
    }
    .modalFade .modal .modal-content p{
        font-size: 1.2em;
        line-height: 1.2em;
    }
    .modalFade .modal .modal-content .controls{
        margin-top: 30px;
    }
    .modalFade .modal .modal-content .controls a{
        text-decoration: none;
        color: #000000;
        border: 1px solid #c5c5c5;
        padding: 5px 20px;
        margin-right: 30px;
        cursor: pointer;
    }
    .modalFade .modal .modal-content .controls a:hover{
        color: #ffffff;
        border: 1px solid #936133;
        background-color: #936133;
    }
/* -------------------------------------------------------------------------- */

/* -- Login ----------------------------------------------------------------- */
    .loginForm{
        width: 380px;
        margin: 200px auto;
        border-radius: 5px;
        padding: 30px;
        background-color: #ffffff;
    }
    .loginForm h1{
        font-family: 'Ovo', Serif;
        font-size: 2em;
        margin-bottom: 20px;
    }
    .loginForm p{
        padding: 0 0 10px 0;
    }
    .loginForm label{
        width: 100px;
        font-size: 1.2em;
        padding-right: 10px;
        display: inline-block;
    }
    .loginForm input[type=text],
    .loginForm input[type=password]{
        padding: 10px;
        width: 200px;
        font-family: 'Quattrocento Sans', Sans-Serif;
        font-size: 1.2em;
        border: 1px solid #c5c5c5;
        border-radius: 5px;
    }
    .loginForm input[type=submit]{
        padding: 10px;
        font-size: 1.2em;
        font-family: 'Quattrocento Sans', Sans-Serif;
        border: 1px solid #c5c5c5;
        background-color: #ffffff;
        width: 100px;
        margin-left: 103px;
        cursor: pointer;
        border-radius: 5px;
    }
    .loginForm input[type=submit]:hover{
        background-color: #c5c5c5;
        color: #ffffff;
    }
/* -------------------------------------------------------------------------- */