/* ======================================================================================= */
/* MAIN */

/* -------------------- */
/* Main elements */
html {
    height: 100%;
}
body {
    min-height: 100vh;
    background-color: var(--main-dark-lighter);
}
.container.is-fluid {
    margin-left: 0;
    margin-right: 0; 
}
.container.is-fluid > section {
    margin: 0 64px; 
    padding-top: 4rem;
    padding-bottom: 5rem;
    height: auto;
    min-height: 93.5vh;
}

nav.level {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.level-item {
    max-width: 80%;
    margin: auto;
}

.displayNone {
    display: none;
}
.vizHidden {
    visibility: hidden;
}
.opacityOff {
    opacity: 0;
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
    -ms-animation-delay:1s;
    -o-animation-delay:1s;
    animation-dely:1s;
}
.opacitOn {
    opacity: 1;
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
    -ms-animation-delay:1s;
    -o-animation-delay:1s;
    animation-dely:1s;
}
a.noHover:hover {
    background-color: transparent;
    cursor: default;
}
.sticky {
    position: fixed;
    top: 3.1rem;
    width: inherit;
    padding-right: 4.6rem;
}

/* .boxShadow {
    box-shadow: 0 10px 19px rgba(0,0,0,0.30), 0 8px 7px rgba(0,0,0,0.22);
} */
.boxShadow {
    box-shadow: none;
}
.boxShadow:hover {
    box-shadow: 15px 10px 19px rgba(0,0,0,0.30), 15px 8px 7px rgba(0,0,0,0.22);
}
.boxShadow:hover,
.boxShadow {
    transition : all 0.3s;
    -webkit-transition :all 0.3s;
}

/* Form */
form.front_end input {
    font-size: 1rem;
    padding: .3rem;
    margin: .5rem 0;
    color: var(--txt-darker);
    border: none;
    width: -webkit-fill-available;
}
form.front_end input#submit {
    padding: .5rem .7rem;
    display: table;
    margin: 2rem auto 0 auto;
    width: fit-content;
}
.account form.front_end input#submit:hover {
    cursor: pointer;
}

#previewFlash {
    width: -webkit-fill-available;
    color: var(--txt-darker);
    background-color: var(--transp-lighter);
    padding: .5rem 1rem;
    font-size: .9rem;
}


/* -------------------- */
/* Back Link */
#backLink {
    position: fixed;
    z-index: 5;
    padding: 0.3rem 0.8rem;
}
#backLink p.heading,
#backLink .icon {
    float: left;
    color: var(--txt-light);
}
#backLink p.heading {
    vertical-align: middle;
}


/* -------------------- */
/* Typo */
h1,h2,h3,h4,h5 {
	font-family: 'Comfortaa', cursive;
}
h1,h2,h3,h4,h5,p,
.title, .subtitle {
    color: var(--txt-lighter);
}

h2 {
    /* font-size: 1.8rem; */
    font-size: 2rem;
}
h3 {
    font-size: 1.5rem;
}
h4 {
    font-size: 1.2rem;
}

/* h1,h2,h3,h4,h5, */
a,
p,
li,
p.heading,
p.title,
p.subtitle,
table th,
table td {
    font-family: 'Comfortaa'
}
h3,h5,
p.heading {
    font-weight: 500
} 
a,
p,
p.title {
    font-weight: 400
}
h1,h2,h4,
p.subtitle {
    font-weight: 300
}

a > p {
    padding-bottom: 0.5rem;
    border-bottom: solid 1px var(--txt-light);
}
a:hover > p {
    color: var(--second-flat);
    border-bottom: solid 1px transparent;
}

a > p,
a:hover > p {
    transition : all 0.3s;
    -webkit-transition :all 0.3s;
}

span, strong {
    font-weight: 400;
}

.p_vertAlign {
    margin-top: .7rem
}

/* URLs */
a.url {
    font-size: 1.2rem;
    /* text-decoration: underline;
    line-height: 1.6rem; */
    /* margin: inherit 2rem;
    padding: 0; */
    padding: inherit 1rem;
}
a.url:hover {
    background-color: var(--second-flat);
    color: var(--main-dark);
    text-decoration: none;
    margin: 0;
    padding: inherit 1rem;
}
a.url,
a.url:hover {
    transition : all 0.3s;
    -webkit-transition :all 0.3s;
}
    



/* -------------------- */
/* ICONS */
.fa-2x {
    font-size: 1.6rem;
}

/* -------------------- */
/* ALERTS */
.flash, .flash .message-body {
    border-radius: 0;
}
.flash.message {
    background-color: white;
}
.flash.message.is-success .message-body {
    background-color: rgba(35, 209, 96, .3);
}
.flash.message.is-warning .message-body {
    background-color: rgba(255, 221, 87, .25);
}
.flash.message.is-danger .message-body {
    background-color: rgba(255, 56, 96, .3);
}

.flash button.delete {
    position: absolute;
    right: 0;
    margin: 1.3rem 1.7rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
}


/* ======================================================================================= */
/* NAVBAR */
#navbar  {
    background-color: var(--main-dark);
    max-height: 6.5vh;
    position: relative;
    z-index: 20;
}

/* Navbar buttons */
#navbar .button.brif-btn:hover,
#public_payment_check .button.is-action:hover,
#index .button.is-action:hover,
#navbar .button.is-action:hover,
#navbar .button.is-primary {
    background-color: var(--second-flat);
    color: var(--main-dark)
}
#navbar .button.brif-btn {
    background-color: whitesmoke;
    color: var(--txt-flat);
}
#navbar .button.brif-btn:hover{
    border-color: var(--second-flat);
}
#navbar .button.transpBtn {
    color: whitesmoke;
    background-color: var(--txt-flat);
}
#index .button.is-action,
#public_payment_check .button.is-action,
#navbar .button.is-action,
#navbar .button.transpBtn:hover {
    background-color: whitesmoke;
    color: var(--txt-flat);
}
#navbar .button.is-primary:hover {
    color: var(--second-flat);
    border-color: transparent; 
    background-color: var(--main-dark-lighter);
}
#index .button.is-action:hover,
#public_payment_check .button.is-action:hover,
#navbar .button.is-action:hover {
    border-color: var(--second-flat);
}
#navbar .button.brif-btn,
#navbar .button.brif-btn:hover,
#index .button.is-action,
#index .button.is-action:hover,
#public_payment_check .button.is-action,
#public_payment_check .button.is-action:hover,
#navbar .button.is-action,
#navbar .button.is-action:hover
#navbar .button.transpBtn,
#navbar .button.transpBtn:hover,
#navbar .button.is-primary,
#navbar .button.is-primary:hover {
    transition : all 0.3s;
    -webkit-transition :all 0.3s;
}



/*icon navbar */
#navbar .navbar-brand svg {
    width: 1.7rem;
    margin-left: .5rem;
    margin-right: .5rem;
    fill: var(--txt-lighter)
}
#navbar .navbar-brand:hover svg,
#navbar .navbar-brand .navbar-item.index svg {
    fill: var(--second-lighter)
}
#navbar .navbar-brand svg,
#navbar .navbar-brand:hover svg {
    transition : all 0.4s;
    -webkit-transition :all 0.4s;
}
    
/* user avatar */
#navbar .navbar-end .navbar-item img {
    border-radius: 50%;
    max-height: 2.25rem;
    margin: auto;
    margin-right: 1rem;
}

#navbar .navbar-end .navbar-item.is-hoverable {
    width: 9rem;
}
#navbar .navbar-end .navbar-item.is-hoverable .navbar-link {
    width: 10rem;
}

/* Inactive */
#navbar .navbar-item,
#navbar .navbar-link,
#navbar .navbar-item.is-hoverable.has-dropdown .navbar-link {
    color: var(--txt-lighter);
    letter-spacing: .5px;
}
#navbar .navbar-item.is-hoverable .navbar-dropdown {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: var(--txt-light);
}
#navbar .navbar-dropdown a.navbar-item {
    color: var(--txt-darker);
}
#navbar .navbar-item.is-hoverable.has-dropdown .navbar-link::after {
    border-color: var(--txt-lighter);
    right: 1.5rem
}

/* Hovered */
#navbar .navbar-start > .navbar-item:hover,
#navbar .navbar-end > .navbar-item:hover .button,

#navbar .navbar-link:hover,
#navbar .navbar-item.is-hoverable.has-dropdown:hover > a.navbar-link {
    color: var(--main-dark-darker);
    /* background-color: var(--txt-light); */
    background-color: var(--second-flat);
}
#navbar .navbar-dropdown a.navbar-item:hover {
    color: var(--txt-lighter);
    background-color: var(--txt-dark);
}
#navbar .navbar-item.is-hoverable.has-dropdown:hover > a.navbar-link::after {
    border-color: var(--main-dark-darker);
}

/* active */
#navbar .navbar-item.is-active,
#navbar .navbar-link.is-active,
#navbar .navbar-item.is-active:hover,
#navbar .navbar-link.is-active:hover,
#navbar .navbar-item.is-hoverable.has-dropdown .navbar-link.is-active,
#navbar .navbar-item.is-hoverable.has-dropdown:hover .navbar-link.is-active {
    background-color: var(--second-flat);
    color: var(--main-dark);
    cursor: default;
}
#navbar .navbar-item.is-hoverable.has-dropdown .navbar-link.is-active::after {
    border-color: var(--main-dark);
}

/* ======================================================================================= */
/* FOOTER */

/* dimensions and colors */
.footer {
    padding: 3rem .5rem 0 .5rem;
    background-color: var(--txt-lighter);
}
/* .footer input, */
.footer form input {
    max-width: 80%;
}
.footer form input.button {
    margin-left: 1rem;
}
.footer .content .level:first-child .column:first-child{
    display: inline-block;
} 

.footer p {
    font-size: 0.8rem;
    color: var(--txt-dark);
}
.footer p.heading {
    font-weight: 600;
}


/* Structure */
.footer .content .level-item {
    max-width: 90%;
}
.footer .content .columns {
    width: 100%;
}
.footer .content ul {
    list-style: none;
    margin-left: 0;
    margin-top: 0;
 }
.footer .content ul li {
    width: fit-content;
}

/* Align columns with social icons */
.footer .content .level:nth-child(2) .column:first-child,
.footer .content .level:nth-child(2) .column:last-child {
    margin-top: 0.4rem;
}
.footer .content .level:nth-child(2) .column:first-child p {
    margin-top: 0.55rem;
    float: left;
}

/* Information */
.footer .content .level:first-child {
    padding-top: 2.5rem;
    padding-bottom: 0;
    margin-bottom: 1rem;
}
.footer .content .level:first-child > .level-item > .columns > .column:first-child p.heading {
    margin-bottom: 1.5rem;
}
.footer .content .level:first-child > .level-item > .columns > .column:nth-child(2) {
    padding-left: 15%;
}

/* Social networks */
.footer .content .level:nth-child(2) .level-item {
    padding-top: 2rem;
    border-top: solid 1px white;
}
.footer .content .level:nth-child(2) p {
    text-transform: uppercase;
}
.footer .content .level:nth-child(2) .column:last-child > div {
    float: right;
    width: fit-content;
}

/* Media queries */

@media (max-width: 1152px) {
    .footer input {
        max-width: 100%;
    }
    .footer .button {
        margin-top: 0.7rem;
    }
    .footer .content .level:first-child > .level-item > .columns > .column:nth-child(2) {
        padding-left: 3rem;
    }
    .footer .content .level:nth-child(2) > .level-item > .columns > .column:first-child {
        max-width: 29%;
    }
    .footer .content .level:nth-child(2) > .level-item > .columns > .column:nth-child(2) {
        min-width: 40%;
    }
}
@media (max-width: 769px) {
    .footer .content .level:first-child .column {
        padding-left: 3rem;
        margin-top: 1rem;
    }
    .footer .content .level:nth-child(2) .column:first-child,
    .footer .content .level:nth-child(2) .column:nth-child(3) {
        width: 50%;
        margin: auto;
    }
    .footer .content .level:nth-child(2) .column:first-child p {
        float: none;
    }
    .footer .content .level:nth-child(2) .column:last-child > div {
        float: none;
        margin: auto;
    }
    .footer .content .level:nth-child(2) .column:nth-child(2) {
        min-width: 42%;
    }
}
@media (max-width: 600px) {
    .footer .content .level:nth-child(2) > .level-item > .columns > .column:first-child {
        max-width: 40%;
    }
}