@charset "UTF-8";

/* ---------------------------- [ Palettes
Fondo: RGB (240, 240, 240) o RGB (255, 255, 255)
Texto: RGB (43, 74, 130) o RGB (0, 0, 0)
Acento: RGB (83, 124, 170) o RGB (255, 150, 0)

*/

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');


:root {
    --white: rgb(255, 255, 255);
    --text: rgb(32, 32, 32);
    --outline: rgb(240, 240, 240);
    --darkblue: rgb(43, 74, 130);
    --lightblue: rgb(83, 124, 170);
    --contrast: rgb(255, 204, 153);
    --lightpink: rgb(245, 176, 206);
}


/* ---------------------------- [ page ] ---------------------------- */

body {
    background-color: var(--white);
    color: var(--text);
    font-family: 'Lato', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

h1.cursi,
h2.cursi,
h3.cursi,
h4.cursi,
h5.cursi,
h6.cursi {
    font-family: "Dancing Script", cursive !important;
    font-optical-sizing: auto;
    font-weight: 700;
    color: var(--darkblue);
    text-transform: capitalize;
}

a {
    font-weight: 400;
    color: var(--darkblue);
}

a:hover {
    color: var(--lightblue);
}

a.blacklink {
    color: var(--text);
}



/* ---------------------------- [ unsigned ] ---------------------------- */

#disclaimer {
    background-color: var(--lightpink);
    color: #666;
    text-align: center;
    padding: 0.325rem;
}

#disclaimer a {
    color: var(--darkblue);
}

#freeshiping {
    background-color: var(--darkblue);
    color: var(--outline);
    text-align: center;
    font-weight: 700;
    padding: 0.625rem;
}

#main_header {
    border-top: 1px #666 solid;
    border-bottom: 1px #666 solid;
}

#header-logo {
    padding-top: 0.625em;
}

#header-logo img {
    height: 2.625rem;
}

#header-logo h1 {
    margin: 0.375rem 0;
    font-size: 2.625rem;
}

#header-social {
    padding-top: 0.625em;
    opacity: 0.5;
}

#header-callus {
    background-color: var(--lightblue);
    color: var(--white);
}

#header-callus h3 {
    color: var(--white) !important;
}

#main_navcontainer {
    border-top: 1px var(--darkblue) solid;
    border-bottom: 1px var(--darkblue) solid;
}

#main_nav {
    li {
        margin-left: 1.618rem;
    }
}

.smallprofileimg {
    background-color: black;
    border-radius: 50%;
    height: 1.625em;
}

#catcher {
    background-image: url("/img/pexels-helenalopes.jpg");
}

#catcher_user {
    background-image: url("/img/pexels-ketut-subiyanto.jpg");
}

#catcher,
#catcher_user {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
}

#catch-text {
    background-color: rgba(240, 240, 240, 0.4);
    font-size: large;
    text-align: center;
    margin: 4.35em;
    padding: 2.625em;
    position: absolute;
    left: 30%;
    width: 460px;
}

#catch-text h2 {
    color: var(--darkblue);
}

#catcher_user {
    background-image: url("/img/pexels-ketut-subiyanto.jpg");
}

.viewitembutton {
    background-color: var(--lightpink);
    text-align: center;
}

.viewtooitembutton {
    background-color: var(--lightblue);
    text-align: center;
}

.viewtooitembutton a {
    color: white;
}

/* panel de control */
#user_portrait {
    vertical-align: middle;
}

#main_footer {
    background-color: #808080;
    color: var(--white);
}

#main_footer li:hover {
    color: var(--lightblue);
}

#main_footer ul.list-noident {
    margin-left: -1.625rem;
}

#main_footer h4 {
    color: var(--white);
}

#main_footer input[type="submit"] {
    background-color: var(--lightblue);
}

input {
    border: 1px var(--darkblue) solid;
}

/* ---------------------------- [ control panel and navigation ] ---------------------------- */

.icon {
    height: 1.625rem;
}

.smallicon {
    height: 0.625rem;
}

th.flistheader,
th.flistheader_reorder {
    text-align: left;
}

button.useraccess {
    border: 1px var(--darkblue) solid;
    border-radius: 1.0em;
    padding: 0.25em;
    margin: 0.125rem;
}

button.useraccess img {
    vertical-align: middle;
}

button.modulenav {
    background-color: var(--lightblue);
    color: var(--outline);
    width: 100%;
    margin-right: 0.625rem;
}

button.modulenav img {
    vertical-align: middle;
    margin: auto 0.625rem;
}

li.itemfaction button {
    color: var(--outline);
    padding: 0.375rem;
}