/* IMPORTS ------------------------------- */

@import url("constants.css");

@import url("access_remote.css");
@import url("cloud_module.css");
@import url("frontpage.css");
@import url("loader.css");
@import url("login_signup.css");
@import url("modules.css");
@import url("navbar.css");
@import url("slideshow.css");
@import url("user_type.css");

/* GENERAL ------------------------------- */
[hidden] {
    display: none;
}
#page-mod-forum-post article.forum-post-container {
    background-color: blue;
    display:none;
}

body {
    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);
    color: var(--body-text-color);
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

span {
    display: inline-block;
}

:focus {
    outline: none;
}

h1,
h2,
h3 { 
    font-size: var(--header-font-size);
    font-family: var(--header-font-family);
}

h1 {
    text-align: center;
    width: var(--h1-width);
    font-weight: var(--h1-font-weight);
    font-size: var(--h1-font-size);
    margin: var(--h1-margin);
    color: var(--h1-text-color);
}
@media only screen and (max-width: 850px) {
	h1 {
        font-size: 2.2em;
    }
}

h2 {
    vertical-align: middle; 
    width: var(--h2-width);
    font-weight: var(--h2-font-weight);
    font-size: var(--h2-font-size);
    margin: var(--h2-margin);
    background-color: var(--h2-bg-color);
    color: var(--h2-text-color);
    line-height: 40px;
}

h3 {
    display: flex;
    width: var(--h3-width);
    font-weight: var(--h3-font-weight);
    margin: var(--h3-margin);
    color: var(--h3-text-color);
}

h4 {
    font-size: var(--h4-font-size);
    font-weight: var(--h4-font-weight);
    margin: var(--h4-margin);
    line-height: var(--h4-line-height);
}

#page {
    width: 100%;
    height: auto;
    padding: 0;
}

.container-fluid {
    max-width: 100% !important;
}

div[role="main"] .row {
    margin-left: 0px !important;
    padding: 1.25rem;
}

/* (end of page) */
#aEnd {
    width: 100%;
    float: left;
}

span.icon {
    float: left;
    margin: var(--icon-margin);

    height: var(--icon-size);
    width: var(--icon-size);
    flex: var(--icon-flex);

    /* /!\ should be replaced by a pictogram! */
    background-color: var(--icon-bg-color);

    border-radius: var(--icon-border-radius);
	-moz-border-radius: var(--icon-border-radius);
	-webkit-border-radius: var(--icon-border-radius);

	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
}

ol.upperLatin {
    list-style-type: upper-latin;
}

#region-main {
    padding: 0;
}

.skiplinks {
    display: none;
    border: dashed 1px green;
}

/* MODAL / FOOTER LINKS ------------------ */
/* Container / footer links */
.link-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--link-container-spacing);
}
.link-container:not(.footer-links-container) {
    margin: var(--link-container-margin);
    border-top: var(--link-container-border-top);
    border-bottom: var(--link-container-border-bottom);
}
.link-container.footer-links-container {
    margin: var(--footer-links-margin);
}

.footer-links {
    gap: var(--footer-links-items-spacing) 0;
    display: flex;
    flex-direction: column;
}
.footer-links a {
    display: block;
}
.footer-links a.link {
    margin: 0;
    text-align: var(--footer-links-text-align);
    font-size: var(--footer-links-font-size);
    font-weight: var(--footer-links-font-weight);
}

.link-container.footer-links-container .link-box {
    margin: 0 var(--footer-links-columns-spacing);
    padding: 0;
    min-width: 0;
}

.link-container.footer-links-container .link-box img {
    display: block;
}
/* Links */
.link {
    padding-top: var(--link-padding-top);
    color: var(--link-text-color);
    font-weight: var(--link-font-weight);
    -webkit-transition-duration: 0.3s; /* Safari */
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out; /* Safari and Chrome */
    transition-timing-function: ease-out;
}

.link-box {
    flex: 1 0 0;
    margin: var(--link-box-margin);
    padding-top: 0 !important;
    font-size: var(--link-font-size);
}
.link-box:not(.link) {
    max-width: 30%;
}

.link-box h4 {
    margin-left: 0;
    max-width: 90%;
    margin-top: 0;
}

.link-box p {
    display: inline-flex;
    width: 100%;
    margin-top: var(--link-padding-top);
    margin-left: 0%;
}

.link-box .link:hover {
    padding-left: var(--link-padding-left--hover);
}

/* (social networks icons in footer) */
img.s_floatLeft {
	align-items: flex-start;
	margin-right: var(--footer-social-img-spacing);
	margin-bottom: var(--footer-social-img-spacing);
	width: var(--footer-social-img-width);
    height: auto;
	cursor: pointer;
}

/* FRONTPAGE + MODULES ------------------ */
/* Buttons to start activities */
.spot {
    display: block;
    margin: var(--spot-margin);
    height: var(--spot-height);
    width: var(--spot-width);
    min-width: var(--spot-min-width);
    font-size: var(--spot-font-size);
    font-weight: var(--spot-font-weight);
    font-variant: var(--spot-font-variant);
    color: var(--spot-text-color);
    border: none;
    text-align: center;
    overflow: hidden;
    float: right;
}

.spot span {
    line-height: var(--spot-span-line-height);
    float: left;
}

.first {
    background-color: var(--spot-first-bg-color);
    display: none;

    -webkit-transition-duration: 0.3s; /* Safari */
    transition-duration: 0.3s;   
}

.starticon {
    width: var(--starticon-size);
    height: var(--starticon-size);
    margin: var(--starticon-margin);
    float: left;

}

.start {
    margin: var(--start-container-margin);
    cursor: pointer;
}
.start .first:hover{
    background-color: var(--spot-first-bg-color--hover);
    cursor: pointer;
}
.start .first:hover .starticon {
    width: var(--starticon-size--hover);
    height: var(--starticon-size--hover);
    margin: var(--starticon-margin--hover);
    float: left;
}
.start .first:hover span {
    margin-left: var(--starticon-left-spacing--hover);
}
@media only screen and (max-width: 1100px) {
	.start .first span {
    	font-size: 0.8em;
	}
}

.start span {
    text-align: center;
    vertical-align: middle;

    -webkit-transition-duration: 0.3s; /* Safari */
    transition-duration: 0.3s;
}

#start {
    background-image: url('../pix/start.svg');
}

#retry {
    background-image: url('../pix/retry.svg');
}
.retry {
    background-color: var(--spot-retry-bg-color);
    display: none;
    cursor: pointer;
}
.start .retry:hover {
    background-color: var(--spot-retry-bg-color--hover);
}

#continue {
    background-image: url('../pix/continue.svg');
}
.continue {
    background-color: var(--spot-continue-bg-color);
    display: none;
    cursor: pointer;
}
.start .continue:hover {
    background-color: var(--spot-continue-bg-color--hover);
}

.pFirst .first,
.pRetry .retry,
.pContinue .continue {
    display: block;
}

/* MODULES OVERLAY FRAME ------------------ */
.iframFull {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    z-index: var(--iframe-overlay-z-index);
}

.frameHolder {
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--iframe-overlay-bg-color);
    box-shadow: var(--iframe-overlay-box-shadow);
}

#closeButton {
    background-color: transparent;
    position: absolute;
    top: var(--iframe-overlay-close-button-margin);
    right: var(--iframe-overlay-close-button-margin);
    width: var(--iframe-overlay-close-button-size);
    height: var(--iframe-overlay-close-button-size);
    background-image: url('../pix/icone_close_rouge.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    box-shadow: none;
}

/** Path: theme  custom.' **/
#navPopIn1 .modal{
    z-index: 9999;
}
#infoPopIn1 .modal{
    z-index: 9999;
}

.navbar-fixed-top .navbar-inner {
    background-image: linear-gradient(to bottom, #fff, #efe);
}