/**
 * @brief MiniTdCStyle theme, main styles.
 * @details Plugin / Theme Styles
 * @author JB Lebrun
 * @version 1.0.1
 * @date Creation: Jul 2026
 * @date Modification: Jul 2026
 * @copyright 2026 Ideogram Design
 */

/* Mark: Primary colors */
:root {
    --primary-color: #05374b;
    --medium-blue-color: #088395;
    --light-blue-color: #29A3B4;
    --ultra-light-blue-color: #f1f6f7;
}

/* Mark: Global */
* {padding:0; margin:0; box-sizing: border-box;}
body {background:white;}
p {padding:8px 0;}
a {text-decoration:none; color:#020344; transition: color 0.3s;}
a:hover {color:#020344;}
ul {margin:0px 28px; padding:0;}
ul ul {margin:0px 18px; padding:0;}
ul ul ul {margin:0px 18px; padding:0;}
ul li {margin:4px 4px 12px;}
ol {list-style: none; counter-reset: li; margin: 0px 16px;}
ol li {counter-increment: li;}
ol li::before {content: counter(li); color: #00b3d7; font-weight:600; display: inline-block; width: 1em; margin: 0.25em 0.85em 0.25em -1.85em; text-align: right; direction: rtl;}
b, strong {font-weight:bold; font-size:inherit;}
span {font-size: inherit; font-weight: inherit; line-height: inherit;}
i, em {font-style:italic; font-size:inherit;}
blockquote {margin:8px 20px;}
input, textarea, select {border:none; background-color: rgba(255, 255, 255, .4); color:#5A5A5A; font-weight:bold; font-size:12px; border:solid 1px #888888;}
input, textarea, option {padding:4px 4px; font-weight:bold; color:#5A5A5A; font-size:12px;}
select {padding:3px 4px;}
textarea {resize: none;}
input:focus::placeholder, textarea:focus::placeholder {color:#ACACAC !important;}
input[value=""]::placeholder, textarea:empty::placeholder {color:var(--secondary-color);}
input[type=checkbox] {margin-right:8px;}
input[type=radio] {margin-right:8px;}
input[type=checkbox].hidden, input[type=radio].hidden {margin:0; display:none;}
.inputs {width:200px;} select.inputs {width:205px;}
.linputs {width:450px;} select.linputs {width:455px;}
.sinputs {width:150px;} select.sinputs {width:155px;}
.vsinputs {width:40px;} select.vsinputs {width:55px;}
.vlinputs {width:100%;}
form {margin:0; font-size:0;}
.img {font-size:0 !important; line-height:0;}
sup, sub{font-size:9px; color:inherit;}
img {border:0; max-width:100%; height:auto;}
img.marginWrapper {margin:-50px 0;}
.pad10 {padding:10px;}
.pad20 {padding:20px;}
.pad50 {padding:50px;}

/* Mark : Error */
.error {font-size:16px; font-weight:bold; color:#CC3333; padding:4px;}

/* Mark: Tool */
.clear {clear:both; height:0; font-size:0;}
.unselectable {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; cursor:default;}
.centered {text-align:center;}
.lefted {text-align:left;}
.righted {text-align:right;}

/* Mark: Editor */
* {font-family: Arial, sans-serif; font-size: 13px; font-weight:normal; font-style:normal; color:var(--primary-color);}

/* Generic titles */
.eTitle1 {font-family: Arial, sans-serif; font-size:48px; font-weight:600; line-height:54px; padding-bottom:10px;}
.eTitle2 {font-family: Arial, sans-serif; font-size:36px; font-weight:600; margin: 2rem 0 1rem; border-bottom:solid 1px var(--primary-color);}
.eTitle3 {font-family: Arial, sans-serif; font-size:28px; font-weight:600; margin: 1rem 0;}
.eTitle4 {font-family: Arial, sans-serif; font-size:24px; font-weight:600; text-transform: uppercase; letter-spacing: 0.2rem;}
.eTitle5 {font-family: Arial, sans-serif; font-size:20px; margin: 8px 0 6px; color:#00b3d7;}

/* Generic contents */
.eContent1 {}
.eContent2 {color:var(--dark-blue-color); font-weight:bold;}
.eContent3 {color:var(--medium-blue-color); font-weight:bold;}
.eContent4 {font-size:1.1rem;}
.eContent5 {font-style:italic;}

a.eLink1 {transition: color 0.3s, border 0.3s;}
a.eLink2 {font-weight:bold; transition: color 0.3s, border 0.3s;}
a.eLink1:hover, a.eLink2:hover {color:var(--light-blue-color);}

table.eTable{margin:4px 96px; border:solid 1px #797f9d;}
th.eTableHeader, td.eTableHeader {background:#797f9d; padding:4px; font-weight:bold; color: white;}
td.eTableLine0 {background:white; padding:4px; font-weight:bold;}
td.eTableLine1 {background:#EFEAF4; padding:4px; font-weight:bold;}

td.eTableLineAuto {background:white; padding:4px; font-weight:bold;}
tr:nth-child(odd) td.eTableLineAuto {background:#EFEAF4; padding:4px; font-weight:bold;}

/* Mark: Page structure */
.mainContent {max-width:960px; margin:0 auto; font-size:0;}
.HTMLContent .mainContent {padding:2rem 0;}
.HTMLContent .mainContent .text2Columns {column-count: 2; column-gap: 50px;}
.HTMLContent .mainContent .text2Columns p {padding: 0 0 8px;}
.HTMLContent .mainContent .text3Columns {column-count: 3; column-gap: 45px;}
.HTMLContent .mainContent .text3Columns p {padding: 0 0 8px;}
.HTMLContent .mainContent .text4Columns {column-count: 4; column-gap: 40px;}
.HTMLContent .mainContent .text4Columns p {padding: 0 0 8px;}
.HTMLContent .mainContent .blockPicture {max-height:275px; font-size:0; line-height:0; text-align:right;}
.HTMLContent .mainContent .blockPicture img {max-height:375px; position:relative; top:-50px;}
.HTMLContent .mainContent .blockSmallPicture {max-height:225px; font-size:0;}
.HTMLContent .mainContent .blockSmallPicture img {max-height:325px; position:relative; top:-50px;}

/* Mark: Lines */
.darkBlueLine {background-color: var(--primary-color);}
.darkBlueLine * {color:white;}

.mediumBlueLine {background-color:var(--medium-blue-color);}
.mediumBlueLine * {color:white !important;}

.lightBlueLine {background-color:var(--light-blue-color);}
.ultraLightBlueLine {background-color: var(--ultra-light-blue-color);}

.backgroundImageLine {background-size:cover; background-repeat: no-repeat; background-position: center;}
.backgroundImageLine * {color:white;}


/* Mark: Colors */
.lighBlue {color:var(--light-blue-color);}

/* Mark: Buttons */
.MiniTdCStyleButton {display:inline-block; font-family: Arial, sans-serif; font-weight:bold; font-size: 16px; font-weight:500; padding:15px 30px; background-color: var(--primary-color); color: white; border-radius:25px; margin-bottom:8px; transition: all 0.4s ease-out;}
.MiniTdCStyleButton:hover {background-color: var(--light-blue-color); cursor:pointer;}
.MiniTdCStyleButton + .MiniTdCStyleButton {margin-left:20px;}

.MiniTdCStyleButton.Yellow {background-color: var(--yellow-color); color: white;}
.MiniTdCStyleButton.Yellow:hover {background-color: var(--yellow-color-hover);}

.MiniTdCStyleButton.White {background-color: rgba(255,255,255,0.25); color: white; border:solid 1px white;}
.MiniTdCStyleButton.White:hover {background-color:  var(--light-blue-color);}

.MiniTdCStyleButton.Grey {background-color: var(--grey-color); color: white;}
.MiniTdCStyleButton.Grey:hover {background-color:  var(--grey-color-hover);}

.MiniTdCStyleButton img {max-height:14px; margin-right:6px;}

input[type=checkbox].hidden:checked + .MiniTdCStyleButton,
input[type=radio].hidden:checked + .MiniTdCStyleButton {background-color: var(--dark-blue-color);}

/* Mark: Input : media popup */
.mediaPopupBkgd {position:fixed; left:0; top:0; background:#333333; opacity:0.75; filter:alpha(opacity=75); width:100%; z-index:10000;}
.mediaPopup {z-index:10001; padding:10px; background:white; position:fixed; top:0; left:0; text-align:center; max-width:96%; box-sizing: content-box; border-radius:16px;}
.mediaPopup .closeButton {width:0; height:0; overflow:visible; float:right; position:relative; top:-25px; left:-5px; cursor:pointer; font-size:0;}
.mediaPopup .closeButton img {width:33px !important; height:33px !important; max-width:33px;}
.mediaPopup .mediaTitle {margin:4px 0 0; padding:2px 8px; text-align:center; color:#444444; font-weight:bold; background:white;}
.mediaPopup .message {margin-top:32px; font-size:24px; color:#333333; text-align:center;}
.mediaPopup .buttons {text-align:center; height:50px;}
.mediaPopup .buttons .greenButton {display:inline-block; margin:8px; text-align:center; color:white; font-size:20px; padding:8px; background:#89ca8c; min-width:100px;}
.mediaPopup .buttons .redButton {display:inline-block; margin:8px; text-align:center; color:white; font-size:20px; padding:8px; background:#ec5f65; min-width:100px;}
.mediaPopup .buttons .greenButton:hover, .mediaPopup .buttons .redButton:hover{text-decoration:none; opacity:0.8;}

/* Mark: Input : page controler in control bar */
.genericPageEmptyController {font-size:0px; height: 0px;}
.genericPageController {margin:16px 0 32px; width:100%;}
.genericPageController .gpcBox {margin:0 auto; height:40px;}
.genericPageController .gpcButton {background:var(--primary-color); font-size:0; line-height:0; vertical-align:middle; min-width:60px; padding:5px 8px;}
.genericPageController .gpcButton:first-child {text-align:right; border-radius:8px 0 0 8px;}
.genericPageController .gpcButton:last-child {text-align:left; border-radius:0 8px 8px 0;}
.genericPageController .gpcButton a {font-size:0; line-height:0;}
.genericPageController .gpcSelected {position:absolute; z-index:2; top:-8px; line-height:16px; font-weight:bold; padding: 20px 15px; font-size:16px; background-color:var(--medium-blue-color); color:white; font-size:18px; text-decoration:none; display:inline-block; border-radius:8px;}
.genericPageController .gpcLink {background:var(--primary-color); line-height:16px; color:white; padding: 12px 15px; text-decoration:none; font-size:16px; font-weight:600; display:inline-block; transition: color 0.3s;}
.genericPageController .gpcLink:hover {text-decoration:none; color:var(--medium-blue-color);}
.genericPageController .gpcSpacer {background:var(--primary-color); padding: 0 15px; color: white; text-decoration:none;}
.genericPageController .gpcLPage {position:relative; width:40px; background:var(--primary-color); color: white; text-decoration:none;}
.genericPageController .gpcRPage {position:relative; width:40px; background:var(--primary-color); color: white; text-decoration:none;}
.genericPageController .gpcPage {position:relative; width:40px; background:var(--primary-color); color: white; text-decoration:none;}

/* Mark: Input SocialMediaSharingPanel */
.share {font-family: "Outfit", serif; font-size:24px; color:white; text-align:center; font-style:italic; padding:32px 0;}
.share .img {margin:0 12px;}
.share .img img {max-width:32px; height:auto;}
.share a.img {transition: opacity 0.3s ease;}
.share a.img:hover {opacity:0.5;}

/* Mark: Page header  */
#PageHeader {}
#PageHeader .header {height:100px;}
#PageHeader .head {display:flex;}
#PageHeader .head .left {flex:1; padding:4px 0;}
#PageHeader .head .right {flex:1; padding:4px 0; text-align:right;}

#PageHeader .top {display: flex; justify-content: space-between; align-items: center;}
#PageHeader .top .logo {margin: 12px 0;}
#PageHeader .top .menus {padding: 0;}
#PageHeader .top .menus .menu {flex:1; text-align:center;}
#PageHeader .top .menus span.menu {color:#e8f2fb;}
#PageHeader .top .menus a {font-size:16px; margin-left:25px; color: var(--primary-color); font-weight: 500;}
#PageHeader .top .menus a:hover {color:var(--light-blue-color);}
#PageHeader .top .menus a.selected {color: var(--primary-color); font-weight: 600;}
#PageHeader .top .menus .language {display:none; border:solid 1px white;}

#PageHeader .top .menuOpener {display:none;}
#MobileMenu {display:none;}

/* Mark: Page footer */
#PageFooter p {font-size:1em; line-height:1.3em;}
#PageFooter .eTitle4 {font-size:1.2em; line-height:1.4em; color: white; font-weight:700; text-transform: inherit; letter-spacing: inherit;}
#PageFooter * {color: white;}
#PageFooter a {color:var(--light-blue-color);}
#PageFooter a:hover {color:white;}

#PageFooter .top {display: flex; align-items: top; padding: 6em 0;}
#PageFooter .top .quarter {flex:1;}
#PageFooter .top .quarter .title {font-size:17px; font-weight:500;}
#PageFooter .top .quarter a {display:block; font-size:14px; font-weight:500;}
#PageFooter .top .quarter + .quarter {margin-left:1.5%;}

#PageFooter .separator {border-top: 1px solid rgba(255, 255, 255, 0.4);}

#PageFooter .bottom {padding:3rem 0; text-align:center;}

/* Mark: Page content */
#PageContent {}
#PageContent .pageBanner {width: 100%; font-size:0; line-height:0;}

/* Mark: Generic card item */
.card {background-color:var(--primary-color); padding:6px}
.card .picture {font-size:0;}
.card .picture img {width:100%;}
.card .content {padding:12px;}
.card .content * {color:white;}
.card .content .title  {font-size:18px; font-weight:bold; min-height:48px;}
.card .content .title a {font-size:inherit; font-weight:inherit;}
.card .content .readmore {text-align:right;}
.card .content .readmore a {}

/* Mark: Home Portal */
.homePortal .line {padding:30px 0 16px;}
.homePortal .line .head {display:flex; align-items:flex-end;}
.homePortal .line .head .titles {flex:1;}
.homePortal .line .head .readmore {flex:1; text-align:right;}

.homePortal .line .header {font-size:18px; font-weight:bold; text-transform:uppercase; color:var(--medium-blue-color);}
.homePortal .line .eTitle2 {margin-top:4px;}
.homePortal .line .readmore a {color:var(--medium-blue-color); font-weight:bold;}

.homePortal .line.split {display:flex; align-items: top;}
.homePortal .line.split .block.full {flex:1; min-width:100%;}
.homePortal .line.split .block.third {flex:1; min-width:32%;}
.homePortal .line.split .third2 {flex:2; min-width:65%;}
.homePortal .line.split .third + .third2,
.homePortal .line.split .third2 + .third {margin-left:3%;}

.homePortal .line.split .block .top {display:flex;}
.homePortal .line.split .block .top .eTitle2 {flex:2; margin-top:0;}
.homePortal .line.split .block .top .button {flex:1; text-align:right; padding-top:20px;}
.homePortal .line.split .block .top .button a {color:var(--medium-blue-color); font-weight:bold;}

/* Mark: Home Portal - Articles */
.homePortal .line .block .homeArticles {display:flex;}
.homePortal .line .block .homeArticles .article {flex:1;}
.homePortal .line .block .homeArticles .article + .article {margin-left:3%;}
.homePortal .line .block .homeArticles .article .content .description {padding:8px 0;}

.homePortal .line.articleViewer .block .homeEvents {display:initial;}

/* Miniatures list */
.filters {background-color:var(--ultra-light-blue-color); text-align:center;}
.filters div {display:inline-block; padding:8px 2px;}
.filters div.formLabel {font-weight:bold; padding-left:20px;}

.miniatures {display:flex; flex-wrap:wrap;}
.miniatures .miniature {flex:1; min-width:31%; max-width:31%; margin:1%;}

/* Miniatures sheet */
.miniatureSheet {}
.miniatureSheet .data {font-weight:bold; color:var(--medium-blue-color);}
.miniatureSheet .pictures {padding:20px 0; text-align:center;}
.miniatureSheet .pictures .picture {display:inline-block; margin:0 1%;}
.miniatureSheet .pictures .picture .description {text-align:left; font-style:italic; padding-top:4px;}