@charset "UTF-8";

/*
    Scale used: 0.125, 0.25, 0.375, 0.625, 1.0, 1.625, 2.625, 4.35, 6.975
                em for data blocks , rem for text elements
    Practical breakpoint:
        1280px <=           practical-(L)arge   Desktops
*/

/* ============================================================ [ Overall */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    /* https://coolors.co/palettes/popular/aa182c https://coolors.co/palette/e21b22-aa182c-1e1e24-fff8f0-facfad */
    --neutral: #facfad;
    /* E7DCCD;*/
    --maincolor: #AA182C;
    --auxcolor: #00263a;
    --contrast: #e21b22;
    --black: #1e1e24;
    --white: #fff8f0;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Source Sans 3", sans-serif;
    color: var(--black);
    font-weight: 300;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6,
button,
.button {
    font-family: 'Montserrat', sans-serif;
    color: var(--white);
}

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

#body_container {
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        'header header'
        'nav main'
        'footer footer';
}

#main_header {
    grid-area: header;
    padding: 0.625em;
}

#main_nav {
    grid-area: nav;
    padding: 0.625em;
}

#main_content {
    grid-area: main;
    padding: 0.625em;
}

#msg_content {
    position: absolute;
    max-height: 200px;
    width: 300px;
    overflow-x: auto;
    background-color: #222;
    color: var(--white);
    bottom: 0;
    right: 0;
    /* top: auto; */
    /* left: auto; */
    border: 2px var(--color-7) solid;
    border-radius: 0.625em;
    margin: 1.625em;
    padding: 0.625em;
}

#msg_content .err {
    color: var(--contrast);
}

#main_footer {
    grid-area: footer;
    background-color: var(--black);
    padding: 0.375em;
}



/* Forms and data */

input,
textarea,
select,
button,
.button {
    font-family: 'Montserrat', sans-serif;
    border: 1px var(--black) solid;
    border-radius: 0.625em;
    min-height: 1.625em;
    accent-color: var(--contrast);
}

input:checked,
select::selection {
    background-color: var(--contrast);
}

button,
.button {
    overflow: hidden;
    padding: 0.625em 1.625em;
    margin: 0.375em;
    border-radius: 1.625rem;
    background-color: var(--auxcolor);
    color: var(--white);
    border: none;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    z-index: 1;
    cursor: pointer;
}

button:hover,
.button:hover {
    border: 1px var(--contrast) solid;
    transform-origin: 0 50%;
    background: linear-gradient(to right,
            var(--black) 50%,
            var(--maincolor) 75%);
}

button:disabled,
.button:disabled {
    background-color: var(--gray);
}

button span.label {
    margin-top: 0.625rem;
    color: var(--white);
}

[type='checkbox'],
[type='radio'] {
    height: 1.625rem;
    vertical-align: middle;
}

input.islogin,
input.ispwd,
[type='password'],
input.isiid,
input.islocation,
input.isdate,
[type='date'],
input.isdtime,
[type='datetime-local'],
input.istime,
[type='time'],
input.isnumber,
[type='number'],
input.istel,
[type='tel'],
input.isemail,
[type='email'],
input.isurl,
[type='url'] {
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
    padding-left: 1.625em;
    height: 1.625rem;
}

input.islogin {
    background-image: url('/data/img/icons/islogin.png');
}

input.ispwd,
[type='password'] {
    background-image: url('/data/img/icons/ispwd.png');
}

input.isiid {
    background-image: url('/data/img/icons/isiid.png');
}

input.islocation {
    background-image: url('/data/img/icons/islocation.png');
}

input.isdate,
[type='date'] {
    background-image: url('/data/img/icons/isdate.png');
}

input.isdtime,
[type='datetime-local'] {
    background-image: url('/data/img/icons/isdtime.png');
}

input.istime,
[type='time'] {
    background-image: url('/data/img/icons/istime.png');
}

input.isnumber,
[type='number'] {
    background-image: url('/data/img/icons/isnumber.png');
}

input.istel,
[type='tel'] {
    background-image: url('/data/img/icons/istel.png');
}

input.isemail,
[type='email'] {
    background-image: url('/data/img/icons/isemail.png');
}

input.isurl,
[type='url'] {
    background-image: url('/data/img/icons/isurl.png');
}

input [type='file'] {
    width: 30em;
    max-width: 86.78%;
    border-radius: 0.375em;
    padding: 0.375rem;
}

::placeholder,
::-ms-input-placeholder,
::-webkit-input-placeholder,
::-moz-placeholder {
    color: var(--neutral);
}

fieldset,
div.infoset {
    border: 1px var(--neutral) solid;
    border-bottom-left-radius: 0.375em;
    border-bottom-right-radius: 0.375em;
    border-top-right-radius: 0.375em;
    overflow: auto;
}

div.infoset {
    margin: 0 0.375em;
    margin-inline: 2px;
    padding: 0.625rem 0.375rem;
}

label {
    font-family: 'Montserrat', sans-serif;
    color: var(--black);
    padding: 0 0.375em;
    max-width: fit-content;
    margin-bottom: 0;
}

label,
.label {
    text-transform: capitalize;
}

label.active {
    border-color: var(--maincolor);
    padding-right: 1.625rem;
    border-top-left-radius: 0.375em;
    border-top-right-radius: 0.375em;
}

label.active+fieldset:hover,
label.active+input[type='text']:hover,
label.active+[type='password']:hover,
label.active+[type='date']:hover,
label.active+[type='datetime-local']:hover,
label.active+[type='time']:hover,
label.active+[type='number']:hover,
label.active+[type='tel']:hover,
label.active+[type='email']:hover,
label.active+[type='url']:hover,
label.active+textarea:hover,
label.active+select:hover {
    border: 1px var(--auxcolor) solid;
}

label.inactive {
    background-color: var(--gray);
}

label.inactive+fieldset:hover,
label.inactive+input[type='text']:hover,
label.inactive+[type='password']:hover,
label.inactive+[type='date']:hover,
label.inactive+[type='datetime-local']:hover,
label.inactive+[type='time']:hover,
label.inactive+[type='number']:hover,
label.inactive+[type='tel']:hover,
label.inactive+[type='email']:hover,
label.inactive+[type='url']:hover,
label.inactive+textarea:hover,
label.inactive+select:hover,
label.inactive+div.infoset:hover {
    border: 1px var(--gray) solid;
}

fieldset+ul,
div.infoset+ul {
    margin: 0;
}

.smallicon {
    height: 1.625rem;
    vertical-align: middle;
}

.icon,
.icon_profile {
    height: 2.625rem;
    vertical-align: middle;
}

.tnimg {
    width: 6.975em;
}

.bigimg {
    width: 18.3em;
}