@import url("modal.css");
@import url("notes.css");

/* properties, variables */
:root {

    /* margins */
    --content-margin-left: 165px;

    /* colors */
    --main-bg-color: #eeeeee;
    --footer-bg-color: #dddddd;

    --heading-color: #041d29;
    --text-color: #002f44;
    --link-color: #005d92;
    --breadcrumb-color: #002f44;

    --panel-para1-color: rgb(0, 46, 77);
    --panel-para2-color: rgb(33, 131, 192);

    /* media queries */
    /* --horizontal_menu_toggle: 720px; */

}

/* CSS RESET START */
/* https://www.joshwcomeau.com/css/custom-css-reset/ */

html {
    scroll-behavior: smooth;
}

/* box-sizing and preferred font */
*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: system-ui, sans-serif;
}

/* remove default margin */
/* * {
  margin: 0;
} */

/* allow percentage-based heights in the application */
html,
body {
    height: 100%;
}

/* CAROUSEL */
/* index.html */
#loadedCarousel {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* https://flickity.metafizzy.co/style */

.carousel,
.main-carousel {
    height: 60vh;
    max-height: 900px;
    aspect-ratio: 16/9 !important;
}

.carousel-cell {
    width: 100%;
    max-width: 1600px;
    margin: 10px;
    aspect-ratio: 16/9 !important;
}

/* move page dots into carousel */
.flickity-page-dots {
    top: 80%;
}




/* HEADER */
.wh_header_flex_container {

    flex-direction: row;

}

/* SEARCH */

.wh_main_page_search {
    height: 12vh;
    min-height: 12vh;
    padding-top: 4vh;
}

.wh_main_page .wh_search_textfield,
.wh_main_page .wh_search_button {
    font-size: 1.5em;
}

.wh_topic_page_search {
    height: 12vh;
    min-height: 12vh;
    padding-top: 4vh;
}

.wh_topic_page .wh_search_textfield {
    font-size: 1.2em;
}

/* BREADCRUMB */
div.breadcrumb-sticky {
    position: unset;
}




/* figures */

figure {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

/* figure * {

  max-width: 80%;

} */

/* footer */

footer {
    display: flex;
    align-items: center !important;
    justify-content: center !important;
}

div.footer-container {
    margin-left: unset !important;
    margin-right: unset !important;
}

div.copyright_info {
    text-align: center;
}








/*----------------------------------------------------------------*/
/* panels */


/* section.panels {
  max-width: 1800px;
  display: none;
} */

li.panel {
    width: 16vw;
    min-width: 160px;
    background: white;
}

li.panel * {
    font-size: 1.6vmin;
}

li.panel h4 {
    font-size: 2.2vmin;
}

.panels ul {
    display: flex;
    flex-wrap: wrap;

}

.panels li {
    position: relative;
    margin: 10px;
    margin-top: 20px;
    padding: 8px;
    display: inline-block;
    /* width: 24em; */
    width: 30vw;
    border: 1px solid #045883;
    border-radius: 0.5em;
    border-top-right-radius: 1.2em;
    border-bottom-right-radius: 0.255em;
    text-align: left;
}

.panels li p:first-of-type {
    color: var(--panel-para1-color);
}

.panels li p {
    color: var(--panel-para2-color);
    clear: both;
}

.panel.tutorial {
    background-color: #faf5cb;
}

.panel.questions {
    background-color: #D4E2D4;
}

.panel.quiz-user {
    background-color: #B4E2B4;
}

.panel.quiz-admin {
    background-color: #FAF3F0;
}


.panel.exercices {
    background-color: #FFCACC;
}


/* .panel.quiz {
  background-color: #DBC4F0;
} */

.panel.evaluation {
    background-color: #DBC4F0;
}

.panel.examen {
    background-color: #DBA4F0;
}


span.panel.tutorial,
span.panel.questions,
span.panel.exercices,
span.panel.quiz-user,
span.panel.quiz-admin,
span.panel.evaluation,
span.panel.examen {
    padding: 2px;
    padding-top: 0px;
    border: 1px solid black;
    border-radius: 3px;
}

img.icon {
    width: 5%;
}

.exercice h2 span.small {
    font-size: .75em !important;
    font-weight: normal !important;
}

div.links {
    margin: 12px;
    ;
    /* border-top: 1px solid black; */
}

.details {
    font-size: 0.7em !important;
}

/* PANEL ICONS */

.panels img.icon {
    width: 4em;
    height: 4em;
    float: left;
    margin-top: -18px;
    margin-left: -12px;
    /* position: absolute; */
}

.panels svg.icon {
    width: 4em;
    height: 4em;
    float: left;
    /* position: absolute; */
}

/* .panels svg .backshape {
  fill: #007fff;
  fill-opacity: 0.33;
  stroke-width: 4;
} */

.panels svg:hover .backshape {
    fill: #8c00ff;
    fill-opacity: 0.33;
    stroke-width: 4;
}


/* pastilles */

/* .cours.intro,
.cours.code {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 0.65em;
  background-color: #eeeeee;
  border: 1px solid #045883;
  padding: 1px 2px;
  border-radius: 3px;
} */

.cours.intro,
.cours.code {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 0.8em;
    padding: 1px 2px;
    color: 045883;
}



/*----------------------------------------------------------------*/
/* footer */

footer .flex-space-between {
    width: 100%;
    padding: 0px 32px;
}

.wh_footer {
    background-color: #0b6a9c;
    background-size: cover;
    padding: 1em 0em;
    color: #ffffff;
    text-align: center;
    align-items: center;
}

#loadedFooter div {
    padding: 8px 24px;
}

#loadedFooter div p {
    margin-top: unset;
    margin-bottom: 4px;
}





/*----------------------------------------------------------------*/
/*useful classes*/

.flex,
.display-flex {
    display: flex;
}

.left .align-left,
.text-align-left {
    text-align: left !important;
}

.center,
.align-center,
.text-align-center {
    text-align: center !important;
}

.right,
.align-right,
.text-align-right {
    text-align: right !important;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-left {
    clear: left;
}

.clear-right {
    clear: right;
}

.clear-both {
    clear: both;
}

.italic,
.em {
    font-style: italic;
}

.bold,
.strong {
    font-weight: bold;
}

.underline {
    text-decoration: underline;
}

.strikethrough {
    text-decoration: line-through;
}

.lcase {
    text-transform: lowercase;
}

.ucase {
    text-transform: uppercase;
}

.small {
    font-size: .9em;
}

.smaller {
    font-size: .8em;
}

.smallest {
    font-size: .7em;
}

.big {
    font-size: 1.05em;
}

.bigger {
    font-size: 1.1em;
}

.biggest {
    font-size: 1.2em;
}

.tall {
    font-size: 1.05em;
}

.taller {
    font-size: 1.1em;
}

.tallest {
    font-size: 1.2em;
}

.black {
    color: black;
}

.white {
    color: white;
}

.hidden {
    display: none;
}

.border {
    border: 1px solid black;
}

.border-black {
    border: 1px solid black;
}

.margin-top-1em {
    margin-top: 1em;
}

.margin-top-2em {
    margin-top: 2em;
}

.margin-top-3em {
    margin-top: 3em;
}


/* float-right */
.float-right-margin-top-1rem {
    float: right;
    margin-top: 1rem;
}

.float-right-margin-top-2rem {
    float: right;
    margin-top: 1rem;
}

.float-right-margin-top-3rem {
    float: right;
    margin-top: 1rem;
}

.float-right-margin-top-4rem {
    float: right;
    margin-top: 1rem;
}

.float-right-margin-top-5rem {
    float: right;
    margin-top: 1rem;
}



/* sky.css */

span.button {
    padding: 8px;
    border: 2px solid #444444;
    background-color: #bfdfed;
    color: #444444;
    border-radius: 4px;
    cursor: pointer;
}

.modal-content span.button {
    display: inline-block;
    margin: 2px 8px;
}


/* useful classes */

.flex-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-center,
.flex-center-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-center-top {
    display: flex;
    justify-content: center;
    align-items: top;
}

table {
    width: 100% !important;
}

.no-margin-top {
    margin-top: 0px;
}

.no-margin-top-bottom {
    margin-top: 0px;
    margin-bottom: 0px;
}

.no-margin-bottom {
    margin-bottom: 0px;
}

.background-transparent {
    background: transparent;
}


.border-top-thin-black {
    border-top: 1px solid black;
}

.border-bottom-thin {
    border-bottom: 1px solid black;
}


.border-left-thin {
    border-left: 1px solid black;
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* logo and publication title */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

.wh_header {
    padding-left: 4px;
}


.wh_logo img {
    width: 160px;
}

.wh_logo+.wh_publication_title {
    margin-left: 0.5em;
}

.wh_publication_title {
    margin-left: 24px;
    padding-top: 48px;
}

.wh_publication_title .title {
    visibility: hidden;
    opacity: 0;
    /* transition:visibility 0.3s linear, opacity 0.3s linear; */
}

@media (max-width: 575px) {

    .wh_publication_title .title {
        visibility: visible;
        opacity: 1;
    }

    .wh_publication_title {
        padding-top: 12px;
    }

}

.wh_publication_title a {
    margin: 0px;
    padding: 0px;

}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* modal dialog */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

div.modaldialog {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0) !important;
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.6) !important;
    /* Black w/ opacity */
    z-index: 1000;
    color: black;
    text-align: left;
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* modal dialog */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

div.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0) !important;
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.6) !important;
    /* Black w/ opacity */
    z-index: 1000;
    color: black;
    text-align: left;
}

div.modal * {
    /* color: black; */
    text-align: left;
}

div.modal-content {
    margin-top: 8px;
    max-width: 900px;
    border-radius: 8px;
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* demo and support forms */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#form_support-request {
    width: 60vw;
}


form table {
    width: 90%;
}

form td {
    padding: 8px;
}

fieldset {
    padding: 4px;
    border: 1px solid #888888;
    border-radius: 6px;
}

fieldset table {
    margin: 0px;
}

legend {
    width: auto;
    padding: 4px;
}

input[type~=email],
input[type~=text] {
    margin-top: 2px;
    width: 100%;
}

input[type~=checkbox] {
    width: auto;
    cursor: pointer;
}

select {
    height: 32px;
}

textarea {
    width: 100%;
}

input[type~=button] {
    padding: 2px 12px;
    cursor: pointer;
}

label.hand {
    cursor: pointer;
}

input::placeholder {
    opacity: 0.45;
    color: #0b6a9c;
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* items dans la boutique */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#boutique .products {
    display: flex;
    padding: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

#boutique .card {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    padding: 8px;
    border: 1px solid #888888;
    border-radius: 8px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
    flex: 1;
    position: relative;
}

/* #boutique .card {
  height: 240px;
}

#boutique .card.tall {
  height: 260px;
}

#boutique .card.taller {
  height: 300px;
} */

#boutique .card table {
    border-collapse: collapse;
}

#boutique .card table td {
    padding: 0px 2px;
    vertical-align: top;
}

#boutique .card table .label {
    font-size: .75em;
    text-align: right;
}

#boutique .card table .prodinfo {
    font-size: .9em;
    font-weight: bold;
}

#boutique .card p:last-child {
    position: absolute;
    bottom: 0px;
    right: 8px;
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* modal dialog boutique et paiement */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

.margin-top-0px {
    margin-top: 0px;
}

.margin-bottom-0px {
    margin-bottom: 0px;
}

.padding-4px {
    padding: 4px;
}

.padding-top-4px {
    padding-top: 4px;
}

.padding-12px {
    padding: 12px;
}

div.modal-body {
    padding-bottom: 4px;
}

.display-flex-space-between {
    display: flex;
    justify-content: space-between;
}

.position-relative {
    position: relative;
}

.top-8px {
    top: 8px;
}

.modal-footer {
    height: 8px;
}


/* ol countsteps */

/* ol.countsteps {
    list-style: none;
} */

/* ol.countsteps li {
    padding-left: 1.2em;
    text-indent: -1.2em;
} */

/* ol.countsteps.first {
    counter-reset: inscription;
} */

/* ol.countsteps li:before {
    counter-increment: inscription;
    content: counter(inscription) ". ";
} */

p.no-margin-top {
    margin-top: 0px;
}

p.no-margin-bottom {
    margin-bottom: 0px;
}

p.li {
    padding-left: 1.2em;
    text-indent: -1.2em;
}



/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* rxpayment */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#rxpayment div.search {
    display: none;
}

#rxpayment h1 {
    display: none;
}

#rxpayment div[class*='breadcrumb-sticky'] {
    display: none;
}

#rxpayment nav[class*='wh_tools'] {
    display: none;
}

#rxpayment footer {
    display: none;
}

#rxpayment div.wh_content_area {
    margin-top: 18px;
}

/* logo formedia pages de paiement */

.logo-formedia {
    width: 160px;
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* cc class */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

.image.cc24 {
    display: inline-block;
    height: 24px !important;
}

.image.cc32 {
    display: inline-block;
    height: 32px !important;
}