html{font-family: "Universal Sans Text", sans-serif}
body{margin:0px;font-size: 1em;color:grey}
html, body {padding: 0;width: 100%;height: 100%;}
:focus {outline: none !important;border:none;}
.red { color: #dc3545; font-weight: bold; }
.caution{color:red; width:100%}
button{background-color:dimgrey;font-size:1.02em;color:white;border-radius:10px;border:none;padding:5px 10px;cursor:pointer}
a, a:visited {color:grey}
.bigger {font-size: 1.2em}
.gzYraBJZq {padding:10px;}
/*TABS*/
#section1 {position: fixed;top: 0;left: 0;width: 100%;height: 50px;background: #333;color: white;display: flex;align-items: center;padding: 0 10px;z-index: 1000;}
#tabs-container {display:flex;align-items:center;}
.tab {padding: 6px 12px;margin-right:5px;background:#555;border-radius:4px;cursor:pointer;}
.tab.active {background: #222;}
.tab .closeIframe {margin-left: 8px;color: #aaa;cursor: pointer;}
.tab-content {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;}
.tab-content.active {display: flex;}
/*MAIN*/
#section2 {position: fixed;top:50px;height: calc(100vh - 50px);width: 100vw;left:0px;z-index:2000}
#twocolumns{display:flex;height: calc(100vh - 50px)}
nav {width:180px;height:calc(100vh - 50px)}
nav button {border:none;width:100%;text-align:left;cursor:pointer;}
.menu{font-family: "Universal Sans Text", sans-serif;font-size: 1.49em;padding:13px 5px 13px 5px;user-select:none;margin: 5px 0 0 0}
footer{position:fixed;bottom:10px;line-height: 2em;}
.menu.smaller{font-size:1.02em;border:none;padding:2px 5px 16px 5px;}
.menu.active {border-radius:10px}
.copyright-container {display: flex;align-items: center;font-size:0.8em;}
button#globe {display: flex;align-items: center;background:transparent;gap: 8px;padding: 8px 12px;border: none;cursor: pointer;/*display:inline-block;*/width:20px;height:20px;}
svg {fill:grey}
#globe svg {display: block;flex-shrink: 0;}
#globe .langue {color:grey;line-height: 1;}
#mirror {flex:1;height:calc(100vh - 50px)}
/*PAGE*/
.page {display: none; position: absolute;margin:0 0 0 5px;padding:0;border:0;height:100%;width:calc(100%-180px);overflow-y: auto;}
.icon {display:inline-block; width: 165px; text-align: center; cursor: pointer;font-size: 1em;padding:5px}
.appleicon{border-radius:20px;width:80px;height:80px;}
.info {width:800px;padding:20px 0 10px 0;margin:auto;text-align:center; color:#007AFF}
.iconiframetitle {background:#555;color:white !important;padding: 1px 3px;border-radius:4px}
/*LANGUAGE SELECTION*/
#selectLang{display:none;position:absolute;left:160px;bottom:40px;padding:10px;margin: 20px auto;background-color:white;color:black;border-radius:10px;font-size:1.2em;font-weight:600;z-index:3000}
.region {font-weight: bold;margin: 20px 0 10px;font-size: 1.2em;grid-column: 1 / -1;}
.country-list {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;}
.country {margin: 10px 0 5px;font-weight: bold;}
#selectLang ul {list-style: none;padding: 0;}
#selectLang li.language-group {display: flex;gap: 10px;margin: 5px 0;}
#selectLang button {padding: 8px;color: #666666;background: none;border: none;cursor: pointer;font-size: 1em;}
#selectLang button:hover {color: #333333;}
input[type=submit]{border-radius:10px;font-size:1.3em;font-weight:600;padding:8px 5px 8px 5px;border:none;background-color:yellow;}
/*CAST*/
button.mobilecast {font-size:28px;padding: 15px 35px}
/*GAMES MAPS*/
.section {margin: 20px;}
.section h2 {font-size: 1.4em; margin-bottom: 10px;}
.icon-grid {display: flex; flex-wrap: wrap; gap: 10px;}
/*CONTEXT MENU*/
.context-menu {display: none;position: absolute;background: white;border: 1px solid #ccc;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);z-index: 3000;padding: 5px;color: black;}
.context-menu button {display: block;width: 100%;padding: 5px;margin: 2px 0;background: none;border: none;text-align: left;cursor: pointer;color: black;font-size: 1em}
#fond {display: none;position: fixed;z-index: 3000;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.4);}
#iconinfo {display: none;border-radius: 10px;width: 400px;height: 300px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.infotitle {font-weight: bold;border-style: hidden hidden solid hidden;border-width: 1px;border-color: grey;padding: 5px 0 15px 0;margin: 10px 0px 10px 0px;text-align: center;}
.infobody {padding: 5px;margin: 2px 0;}
.infobody img {display: block;margin-left: auto;margin-right: auto;}
/*SHOP*/
promo{color:red;font-weight: bold;font-size: 120%;}
/*GUIDE*/
details > summary {font-size:1.5em;padding: 6px 10px 6px 15px;border: none;cursor: pointer;}
details > p {padding: 0 5px 10px 30px ;}
/*EMAIL*/
.message {margin: 0 5px 0 0;float: left;position: relative;padding: 5px;min-width: 200px;min-height: 200px;width: 400px;height: 400px;}
span.row { display: block; }
/*EMAIL NOTE1*/
textarea {writing-mode: horizontal-tb !important;column-count: initial !important;box-sizing: border-box;margin: 0em;border-width: 0px;padding: 2px 0px 0px 2px;font-family: Helvetica, Arial, sans-serif;font-size:1.02em;caret-color:auto}
.emailadd{min-width:200px;width:302px;height:25px}
/*NOTE*/
.green { color: #28a745; font-weight: bold; }
#statusMessage {
display:none;
margin: 10px 0;
padding: 10px;
border-radius: 4px;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
}
button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/*NOTE1*/
.note{margin: 0 5px 0 0;padding: 5px;min-width:200px;min-height:200px;width:550px;height:260px}
#infonote{width:302px;display:inline-block;text-align: justify;height:100%}
#notesEmailAdd {vertical-align:top;}
/*TOOLS*/
span#geoinfos {text-align: center;}
.page footer{position:fixed;bottom:10px;font-size:0.8em}
a.hidden{text-decoration: none;color:grey;}
.toolsfooter {background-color: rgba(255, 255, 255, 0.8);}
/*SEARCH*/
div#sform{width:100%;position: relative;height:400px}
.lJ9FBc input[type="submit"], .gbqfba {background-color: #f8f9fa;border: 1px solid #f8f9fa;border-radius: 4px;color:#3c4043;font-family: arial, sans-serif;font-size:14px;margin: 0px 4px;padding: 0px 16px;line-height:27px;height:36px;min-width:54px;text-align:center;cursor:pointer;user-select:none}
.lJ9FBc input[type="submit"]:hover {box-shadow: 0 1px 1px rgba(0, 0, 0, .1);background-color:#f8f9fa;border: 1px solid #dadce0;color:#202124}
.lJ9FBc input[type="submit"]:focus {border: 1px solid #4285f4;outline:none}
.pR49Ae {color:transparent;flex:100%;white-space:pre;height:34px}
.gLFyf {background-color:transparent;border:none;margin:0;padding:0;color:rgba(0, 0, 0, .87);word-wrap:break-word;outline:none;display:flex;flex:100%;-webkit-tap-highlight-color:transparent;margin-top:-37px;height:34px;font-size:16px}
.a4bIc {display:flex;flex:1;flex-wrap:wrap}
.RNNXgb {background:#fff;display:flex;border: 1px solid #dfe1e5;box-shadow:none;border-radius:24px;z-index:3;height:44px;margin: 0 auto;width:482px;width:auto;max-width:584px}
.RNNXgb:hover, .RNNXgb {background-color:#fff;box-shadow: 0 1px 6px rgba(32, 33, 36, .28);border-color:rgba(223, 225, 229, 0)}
.SDkEP {flex:1;display:flex;padding: 5px 8px 0 16px;padding-left:14px}
.iblpc {display:flex;align-items:center;padding-right: 13px;margin-top:-5px}
.dropbtn {background-color:white;color:black;padding:5px;font-size:14px;border:1px solid;cursor:pointer}
.dropbtn:hover, .dropbtn:focus {background-color:white}
.dropdown-content {display:none;position:absolute;background-color:white;min-width:160px;overflow:auto;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1;}
.dropdown-content a {color:black;padding:6px 5px;text-decoration:none;display:block}
.dropdown a:hover {background-color:#ddd}
.show {display:block}
svg {fill:grey}
/*SEARCH SPEED*/
.dropdown {position:relative;display:inline-block}
/*SPEED*/
.dropdown-content-speed {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;}
.dropdown-content-speed div {color: black;padding: 12px 16px;text-decoration: none;display: block;cursor: pointer;}
.dropdown-content-speed div:hover {background-color: #f1f1f1; }
.dropdown-button {padding: 12px;border: 1px solid #ccc;cursor: pointer;}
.alignes{display: inline-block;text-align:center;}
.intercalaire{width:20px;}
#result{width:655px;font-size: 32px;color:red;}
#speed, #speedc {font-size: 72px;font-weight: bold;}
@media (prefers-color-scheme: light) {
html{background-color:#EEEEEE;}
.menu{color:grey;background-color:transparent;}
.menu.active {background-color: #ffffff;color:black}
textarea {background-color: white; color: black;}
#iconinfo {background-color:#EEEEEE;}
}
@media (prefers-color-scheme: dark) {
html{background-color:#161616;}
.menu{color:grey;background-color:#161616;}
.menu.active {background-color: #333333;color:white}
textarea {background-color: #333333; color: lightgrey;}
#iconinfo{background-color:#161616;}
}