/********************Screen******************/   

#screenHeader
{
    width: 959px;
    height: 40px;
    background: rgba(20, 31, 44, 0.7);  
    padding-top: 30px; 
	margin: auto;  
	position: fixed;
    left: 0;
    right: 0;
	top: -20px;
	z-index: 50;
	border: solid 1px rgba(200, 220, 255, 0.2);
	border-radius: 10px;
    transition: opacity 0.8s ease;
}

#contenu
{
    margin: auto;	
	margin-top: 60px;
	margin-bottom: 20px;
    color: white;
    position: relative;  
    text-align: left;
    line-height: 150%;
	width: 961px;
	background: rgba(0, 0, 0, 0.8);  
	padding: 20px;
	border-radius: 2px;
	border: solid 1px rgba(22, 22, 22, 0.8);
    box-sizing: border-box;
}

#section
{
    width: 260px;
    height: 25px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 35px;
    text-align: center;
    color: #cef3ff;
    font-family: "Electro";
    font-size: 14px;

}

.hidden
{
    display: none;
}

.loadingPanel
{
    position: fixed;
    width: 366px;
    height: 133px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;                                
    background-color: black;
    border: solid 1px #003351;
    border-radius: 10px;
    margin: 100px auto auto;
    box-shadow: 0px 0px 20px black;
}

.loadingBarArea
{
    position: absolute;
    width: 320px;
    height: 8px;    
    background-color: #044788;
    border-radius: 30px;              
    left: 24px;
    top: 86px;     
}

.loadingBar
{
    width: 0px;
    height: 8px;	
	background-color: #019BF8;
    border-radius: 30px;
    box-shadow: 0px 0px 20px #019bf8;
    overflow: hidden;
}

.loadingBar:after
{
    content: '|||||||||||||||';
    display: block;    
    width: 320px;
    height: 8px;          
    border-radius: 30px;         
    transform: skewX(-30deg);
    -webkit-transform: skewX(-30deg);
    -moz-transform: skewX(-30deg);
    -o-transform: skewX(-30deg);
    font: 120px/80px sans-serif;
    letter-spacing: -6px;
    color: #000;
    opacity: 0.2;    
}

.loadingTitle
{
    font-size: 12px;
    color: #a7dbfe;
    margin-top: 30px;
    font-family: "Equinox";
}

#previous
{
    width: 37px;
    height: 25px;
    margin-right: 10px;
}

#previousButton
{
    position: absolute;
    left: 12px;
    top: 80px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border: solid 2px #57adf3;
    background-image: url(../images/items/arrows/previous.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px 50px;
    background-color: rgba(20, 40, 70, 0.7);
    cursor: url(../images/cursor/select.cur), auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
    box-sizing: border-box;
}

#previousButton:hover
{
    filter: grayscale(0%);
    opacity: 1;
    box-shadow: 0 0 14px 4px rgba(80, 160, 255, 0.7);
}

#headerSeparator
{
    float: left;
    height: 10px;
    width: 510px;
}

.noDisplayIcons
{
    display: none !important;
}

.headerIcon
{
    float: left;
    opacity : 0.6;
    cursor: url(../images/cursor/select.cur), auto;
}

/* Dropdown on headerIcon11 */
.headerDropdownWrapper
{
    float: left;
    position: relative;
}

.headerDropdownMenu
{
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 200;
    background-color: #1e2530d6;
    border: 1px solid #99a0aa;
    border-radius: 3px;
    min-width: 140px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    padding: 4px 0;
}

.headerDropdownWrapper:hover .headerDropdownMenu
{
    display: block;
}

.headerDropdownWrapper:hover #headerIcon11
{
    opacity: 1;
}

.headerDropdownItem
{
    font-family: "Equinox", sans-serif;
    font-size: 13px;
    color: #cdd6e0;
    padding: 12px 40px;
    cursor: url(../images/cursor/select.cur), auto;
    white-space: nowrap;
    transition: background-color 0.15s;
}

.headerDropdownItem:hover
{
    background-color: #2e3a4a;
    color: #fff;
}

.headerDropdownItem--danger
{
    color: #e07070;
}

.headerDropdownItem--danger:hover
{
    background-color: #3a2020;
    color: #ff9999;
}

#headerIconTitle
{
	font-family: "Equinox";
	position: fixed;
	top: 40px;
	border: solid 1px #99a0aa;
	background-color: #889099;
	color: #eee;
	font-size: 11px;
	padding: 8px;
    border-radius: 2px;
	opacity: 0.8;
	z-index: 100;
}

#TitreSection
{
    display: none;
}

.engineInformation
{
    display: none;   
}

/********************Liste******************/

#list
{
	width: 100%;
	min-height: 85px;
    margin: auto;
    background-color: #466376;
    padding: 5px 10px;
    border-radius: 5px;
    box-sizing: border-box;
}

#list *
{
    font-size: 12px;    
}

.lineHeader,.lineHeaderOrder
{
	padding-bottom: 7px;
	padding-left: 20px;
}

.lineHeaderOrder
{
    cursor: url(../images/cursor/select.cur), auto;
    text-decoration: underline;    
}

.line, .lineSelect, .subLine, .line1, .line2
{
	height: 30px;
	margin: auto;
	padding-top: 2px;
	padding: 0 20px;  
}

#list select
{
	border: none;
}

.lineSelect
{
    cursor: url(../images/cursor/select.cur), auto;
}

.lineSelect:hover
{
    background-color: #466376;
}

.lineOptions
{
	white-space: nowrap;
}

.line1
{
    background-color: #466376;       
}

.line2
{
    background-color: #42494E;       
}

.line input
{
	position: relative;
	top: 4px;
}

.list_category
{
    float: left;
    margin-right: 10px;
    width: 50px;
    height: 17px;
}

.listMessage
{
    padding: 15px;
    width: 100%;
    text-align: center;
    color: #91cbfe;
    font-size: 13px; 
}

.list_info
{
    float: right;
}

.rankVariation
{
    margin-left: 20px;
    position: relative;
    top: 2px;
}

/**************************Profil************************/

#profileButtons, #profileDisplayMode
{       
    display: none;    
}

.profileButton
{
    margin-right: 1px;
    cursor: url(../images/cursor/select.cur), auto;
}

.profileInnerButton
{                      
    color: #a14a3f;              
    background-color: #3d1713;
    border: solid 1px #a14a3f;   
    border-radius: 5px;
    cursor: url(../images/cursor/select.cur), auto;
    float: left;
    padding: 2px 10px 2px 10px;   
}

.profileInnerButton:hover
{                              
    background-color: #5c231d; 
}

.profileTitle
{
    font-family: "Equinox";
    font-size: 18px;   
}

.profileTextArea
{
    margin-left: 16px;    
}

.playerConnected0, .playerConnected1, .playerConnected2
{
    height: 10px;
    width: 10px;
    display: inline-block;  
    margin-left: 5px; 
}

.playerConnected0
{                        
    background-color: #710000;
}

.playerConnected1
{                       
    background-color: #006600;
}

.playerConnected2
{                       
    background-color: #5D5D5D;
}

.avatar
{
    width: 160px;
    height: 200px;
    border-radius: 10px; 
    border: solid 1px #333;
}

.imgFermerProfil
{
	border: 0;
	float: right;
	position: relative;
	left: 50px;
}

.playerProfilImageArea, .planetProfilImageArea
{
    float: left;
    margin-right: 40px;   
    padding-top: 16px; 
    padding-left: 15px;   
}

.playerProfilImageArea
{                              
    width: 175px;
    height: 216px;    
}

.planetViewerBorder
{         
    padding: 3px;             
    width: 250px;
    height: 226px;
    background-color: black;         
}

.planetViewerInfo
{
    display: none;
	border-radius: 5px;
}

.profilePlanetViewer
{
    width: 500px;
    height: 452px;
    border-radius: 1000px;
    margin: auto;
    overflow: hidden;
}

#planetTypeNameArea
{
    position: absolute;
    top: 320px;
    left: 100px;
    width: 280px;
    font-size: 16px;
    padding: 10px;
    background-color: #84ddfd26;
    color: #c2e2ff;
    border-radius: 10px;
}

#planetTypeDescriptionArea
{
    position: absolute;
    top: 365px;
    left: -55px;
    width: 600px;
    padding: 10px;
    border-radius: 10px;
    border: solid #8abaef69 1px;
    color: #7ac3f9;
}

.planetSwitchWrapper
{
    position: relative;
    display: inline-block;
}

.planetArrow
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 48px;
    line-height: 44px;
    text-align: center;
    font-size: 40px;
    color: rgba(60, 167, 200, 0.85);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: rgba(58, 160, 255, 0.425);
    cursor: url(../images/cursor/select.cur), auto;
    z-index: 10;
    transition: color 0.2s, background 0.2s;
    user-select: none;
}

.planetArrow:hover
{
    color: rgb(80, 220, 255);
    background: rgba(89, 167, 255, 0.9);
}

.planetArrowLeft  { left: -60px; }
.planetArrowRight { right: -60px; }

.profilImageBorder, .planetViewerBorder, .profilSection, .popUpInfoBox
{
    border-radius: 5px;
    border: solid 1px #15454C;
}

.profilSection
{
    margin-left: 15px;
    width: 580px;
    padding: 10px; 
    line-height: 150%;  
}

.profileActionButton
{
    padding: 2px 20px;
    font-weight: bold;
    border-radius: 5px; 
    background-color: #305D0E;
    float: left;
    cursor: url(../images/cursor/select.cur), auto;
	transition: all 0.3s ease-out;
}

.profileActionButton:hover
{
    background-color: #468417;       
}

.profileCategoryHeader
{
    background-color: #124046;
    border-radius: 6px;  
    width: 580px;
    margin-left: 15px;
    padding: 5px 10px 5px 10px;
    margin-bottom: 5px;
    font-weight: bold;
    cursor: url(../images/cursor/select.cur), auto;
	transition: all 0.3s ease-out;
}

.profileCategoryHeader:hover
{
    background-color: #175861; 
}

.profileCategoryHeaderArrow
{
    float: left;  
    margin-right: 10px; 
    background-image: url("../images/items/popUp/arrow0.png");
	opacity: 0.2;
    width: 17px;
    height: 19px;
}

.profileCategory
{                           
    transition: height 1s;
    -moz-transition: height 1s; /* Firefox 4 */
    -webkit-transition: height 1s; /* Safari and Chrome */
    -o-transition: height 1s; /* Opera */
    -ms-transition: height 1s;
    height: 0;
    overflow: hidden;       
}

.profileLine
{
    background-color: #4E4035; 
    border-radius: 6px;      
    margin-top: 5px;  
    width: 580px;
    height: 30px;
}

.bookTitleSection, .bookDateSection, .avatarLineSection
{
    float: left; 
    padding: 5px 5px 5px 20px;
    color: #c77c74;
}

.profileLineBar
{
    height: 30px;
    width: 10px;
    float: left;
}

.avatarLineSection
{
    width: 80%;
}

.avatarLineSectionAction
{
    text-align: center;
}

/*************************Message*****************************/

.message
{
    width: 650px;
    text-align: justify; 
    padding: 10px 0 30px 0; 
    font-size: 13px; 
    color: #5daeca;
    float: left;
    line-height: 160%;
}

.messageArea
{
	background-color: rgba(42, 88, 108, 0.8);
	border-radius: 10px;
	padding: 10px;
	margin-top: 10px;
}

.message span, .message p
{
    font-size: 13px;            
}

.message img
{
    max-width: 650px;
}

.message table
{
    border-collapse:collapse;
}

.message td
{
    border: solid 1px #5daeca;
    padding: 10px;
}

.message hr
{                         
    visibility: visible;
    height: 1px; 
    background-color: #5daeca; 
    margin: 8px 0 8px 0;
}

#messageEntryTitle
{  
    color: #a6dafe;
    font-weight: bold;
}

#messageEntryBorder
{                
    margin: 20px 35px 0px 35px;
    border-radius: 15px;
    background-color: rgba(18, 32, 47, 0.4);
    padding: 15px;               
}

.dateMessage
{           
    float: right;
    width: 200px;
    font-size: 10px;
    text-align: right;
    padding-right: 20px;
    color: #759CAD;
}

.optionMessage
{
    float: right;
    width: 300px;
    font-size: 10px;
    text-align: right;
    padding-right: 20px;
    position: relative;
    top: -20px;     
	margin-bottom: -20px;         
}

.optionMessageElement
{
    float: right;
    margin-top: 5px;
    margin-left: 10px;
    cursor: url(../images/cursor/select.cur), auto;
	opacity: 0.5;
}

.optionMessageElement:hover
{
	opacity: 1;
}

.fieldTitle
{
    font-weight: bold;
    font-size: 16px;
    color: #6cd5ef;
}

.imgMargin
{
	border: 0;
    margin-left: 10px;
    margin-right: 10px;
}

#freeSpace
{
	text-align: center;
	font-size: 12px;
	color: #91AEC2;
}

.buttonOk
{
    border: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    height: 28px;
    width: 157px;
}

.formAlertes
{
	text-align:right;
	width: 600px;
}

.formRightAlign
{
    text-align: right; 
    width: 650px;
}

/*************************Mise en page*****************************/ 

.center
{
    width: 880px;
    text-align: center;
}

.alignLeft
{
    margin-left: 20px;
    text-align: left;
}

.optionTitle
{
    color: #7bf;    
    font-weight: bold;
}

.optionInfo
{
    color: #579; 
}

/************************* Information screen *****************************/   

#informationScreen
{
    position: absolute;
    z-index: 100;
    width: 703px;
    text-align: center;
    color: white;
    border-radius: 15px;
    border: solid 2px transparent;
    background: linear-gradient(rgb(13 22 28 / 91%), rgb(13 22 28 / 91%)) padding-box, linear-gradient(155deg, #7a5000, #da7e20ba, #ffb5009c, #ffdba4, #ffc800, #da652087, #7a5000) border-box;
    box-shadow: 0 0 12px rgb(255 238 215 / 35%), 0 0 30px rgba(255, 200, 0, 0.12);
    min-height: 60px;
    padding: 30px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#informationScreen img
{
	border-radius: 5px;
}

#informationScreen h5
{
	color: #DDBBB2;
	font-weight: normal;
}

#informationScreen .lien2
{
    color: #C59589;
}

#informationScreen .lien2:hover
{
    color: #DDBBB2;
}

#informationScreenContent
{
	margin-top: 20px;
}

#helpArea
{
    width: 602px;
    margin : auto;
    text-align : justify;
    line-height: 150%;  
    color: #ffe8d9; 
}

#zoneListeRegles
{
    width: 400px;
    margin : auto;
    text-align : left;
	line-height: 220%;
}

#titreRegle
{
    font-family: "Equinox";
    font-size: 16px;
	color: #DDBBB2;
}

#retourRegle{
    color: #d59c44;
    font-size: 12px;
    position: absolute;
    left: 30px;
	top: 10px;
}

#retourRegle:hover{
    color: #ffd28e;
}
    
.categorieRegle
{
    color: #ffd1a4;
	font-weight: normal;
}

.categorieRegle:hover{
    color: #fff0e1;
}

.ruleImage
{
	float: left;
	margin-right: 20px;
	border: solid 2px black;
}

.helpHighlight
{
	background-color: #755220;
	border-radius : 2px;
	padding: 5px 10px;
}

/********************** Boutons reglages ***********************/

.settingsPanel
{
    position: relative;     
}

.settingsButtons
{
    position: absolute; 
    left: 260px;   
    top: 27px;      
}

.settingsArrows
{
    position: absolute;
    left: 320px;
    top: 5px;
}

.settingsVerticalBar
{
    position: absolute;
    left: 370px;
    top: -5px;
    width: 2px;
    height: 95px;
    background: linear-gradient(to bottom, transparent, #2594b8, #2594b8, transparent);
    opacity: 0.6;
}

.settingEffectDivider
{
    position: absolute;
    left: 410px;
    top: 46px;
    width: 360px;
    height: 1px;
    background: linear-gradient(to right, #2594b8, transparent);
    opacity: 0.4;
}

.satisfactionDot
{
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 4px;
    position: relative;
    top: 1px;
}

.satisfactionDot--good { background-color: #42d400; box-shadow: 0 0 5px #42d400; }
.satisfactionDot--bad  { background-color: #d42000; box-shadow: 0 0 5px #d42000; }

.satisfactionText--good { color: #42d400; }
.satisfactionText--bad  { color: #d42000; }

.settingEffect1, .settingEffect2
{
    position: absolute;
    left: 410px;
    font-size: 12px;
    color: #b1d7e4;
    width: 300px;
}

.settingEffect1
{
    top: -10px;
}

.settingEffect2
{
    top: 65px;
}

.settingEffectDecal
{
    position: relative;
    top: -10px;
}

.settingEffectImage
{
    float: left;
    margin-right: 10px;;
}

.blueCircle
{
    border-radius: 100%;
    border: solid 1px rgb(47, 86, 165);
}

/**********************Barre de progression*************************/     

.progressBar_barArea
{
    width: 665px;
    height: 38px;
    margin: auto;
}

.progressBar_background
{         
    position: relative;  
    width: 665px;
    height: 38px;
    background-color: #222; 
    float: left;    
    margin: 0 2px 0 2px; 
}

.progressBar_border
{         
    position: absolute;
    width: 665px;
    height: 38px;
    background: url(../images/items/progressBar/border.png) no-repeat; 
    top: 0;
    left: 0;   
}

.progressBar_greenBar
{         
    height: 38px;
    background: url(../images/items/progressBar/greenBar.png) repeat-y;    
}

.progressBar_slider
{
    position: absolute;
    top: 0;
}

.progressBar_block, .progressBar_blockArea
{
    position: absolute;
    top: 0;
    height: 38px;     
}

.progressBar_block
{
    opacity: 0.4;             
    border-left: solid 1px black;  
}

.progressBar_legendBox
{
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 10px;
}

.progressBar_legend
{
    float: left;
    margin-left: 30px;
}

.progressBar_toolTip
{
    position: absolute;
    width: 254px;
    height: 32px;
    background: url(../images/items/progressBar/tooltip.png); 
    z-index: 1000;   
    top: 50px;
    left: 210px;
    opacity: 0;                
    text-align: center;
    color: #54BEE7;
    font-weight: bold;
    padding-top: 9px;
}

.progressBar_title
{                        
    color: #ffe19b;
}

/********************** Box *************************/    

#box_header
{
    width: 277px;
    height: 8px;
    background: url(../images/items/box/header.png); 
}

#box_body
{
    width: 277px;   
    background: url(../images/items/box/background.png) repeat-y;  
    padding: 20px; 
}

#box_footer
{
    width: 277px;
    height: 8px;
    background: url(../images/items/box/footer.png); 
}

#box_area
{
    display: none;
    position: absolute;
    top: 150px;
    left: 335px;
    opacity: 0.8;              
}

#box_title
{
    width: 237px;
    text-align: center;    
}

/********************** Pop Up *************************/   

.popUpArea, .profileLineBar
{
	background-color: #032B33;
}

.popUpArea
{
    margin: auto;
    padding: 10px;
    position: absolute;
    width: 730px;
    left: 100px;      
    color: white;
    opacity : 0.95;     
	border-radius: 5px;
    z-index: 10;
}

.popUpB
{
    width: 630px;
    color: #B8CCD0;
    padding: 0px 50px 20px 50px; 
}

.popUpWait
{
    width: 630px; 
    text-align: center;   
}

.popUp_image
{
    width: 200px;
    height: 150px;
    float: left;
    margin-right: 20px;
}

.popUp_title
{
    font-weight: bold; 
    font-size: 16px; 
}

.popUpButtonsArea
{
    float: right;
}

.popUpInfoBox
{
    width: 181px;
    height: 319px; 
    padding-left: 15px;
    padding-top: 15px; 
    float: left;
    margin-left: 2px;
}

.popUpMenuButton, .popUpClose
{
	opacity: 0.5;
	margin-top: 0;
	margin-right: 15px;
    cursor: url(../images/cursor/select.cur), auto;
	font-size: 16px;	
}

.popUpMenuButton:hover, .popUpClose:hover
{
	opacity: 1;
}

.popUpClose
{
	float: right;
}

/********************** User completion *************************/    

#userCompletionArea
{    
    margin-top: 3px;             
    position: absolute; 
    left: 0;   
    z-index: 500;           
    width: 200px;         
    opacity : 0;               
}
          
#userCompletionAreaH
{                  
    background: url(../images/items/user_completion/user_completion_h.png);
    width: 200px;
    height: 14px;
}

#userCompletionAreaF
{                  
    background: url(../images/items/user_completion/user_completion_f.png);
    width: 200px;
    height: 4px;
}

#userCompletionAreaB
{                 
    background: url(../images/items/user_completion/user_completion_b.png) repeat-y;
    width: 180px;    
    padding: 2px 10px;   
}   

.userCompletionLine
{
    width: 180px;
    height: 20px; 
    text-align: center;       
    margin-bottom: 2px;
    color: #caedff;
    cursor: url(../images/cursor/select.cur), auto;
}     

#userCompletion
{     
    margin: auto;    
    width: 200px;            
    position: relative;    
}

/********************** Vote *************************/   

.voteArea
{
    padding-bottom: 5px; 
    float: right;   
    position: relative;
	margin: 5px 0 0 10px;
}

.voteImage, .voteImage1
{
    float: left;    
}

.voteImage
{
    opacity : 0.3;               
}

.voteImage1
{               
    opacity : 0.8;              
}

.voteLabel
{
    float: left;        
    margin-left: 2px; 
    margin-right: 5px;
}

.voteResultsArea
{
    position: absolute; 
    top: 30px; 
    left: -80px; 
    z-index: 50;
    display: none;
}

.voteResultsH
{
    width: 160px; 
    height: 9px; 
    background: url(../images/items/message/voteResultsH.png) no-repeat;
}

.voteResultsF
{
    width: 160px; 
    height: 9px; 
    background: url(../images/items/message/voteResultsF.png) no-repeat;
}

.voteResults
{
    width: 140px; 
    padding-left: 20px; 
    background-color: #00688a; 
    font-size: 10px; 
    text-align: left;
}

.voteResultsLabel
{
    color: #91c7db; 
    font-weight: bold;
}

/********************** Profil *******************************/

.profil, .profilNoMargin
{
    width: 170px;
    float: left;
    text-align: center;
}

.profil
{
    margin: 15px;      
}

/******************************* Screen scene ******************************/


#screen_scene_main
{
    position: relative;
    width: 900px;
    height: 600px;
    margin: auto;  
	border-radius: 2px;
    opacity: 0;    
}

#screen_scene_main::before,
#screen_scene_main::after
{
    content: '';
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

#screen_scene_main::after
{
    left: 0;
    right: 0;
    width: 100%;
    height: 120px;
    top: auto;
    bottom: 0;
    background: linear-gradient(to top, #1e1f2599, transparent);
}

.screenSceneArea
{
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    border: solid 2px #ffc272;
    background-color: color-mix(in srgb, #3d2a12 30%, transparent);
    cursor: url(../images/cursor/select.cur), auto;
    transition: background-color 0.3s;
}

.screenSceneArea:hover
{
    background-color: #ffc272;
}

.screenSceneInteractive:focus-visible
{
    outline: 2px solid #fff3cd;
    outline-offset: 2px;
}

.screenSceneAreaName
{
    position: absolute;
    width: 200px;
    text-align: center;
    color: white;
    font-size: 14px;
    font-family: 'Electro';
    text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.7);
}

.screen_scene_item
{
    position: absolute;
    float: left;   
    opacity : 0;
    transition: opacity 0.5s;
}     

#screen_scene_info
{
    text-align: left;
    padding: 15px;
    position: absolute;    
    width: 239px;
    height: 135px;   
    opacity : 0;                   
    background-color: black;
    border: solid 1px rgb(255, 250, 223);    
    border-radius: 10px;
    transition: opacity 0.5s;
    color: rgb(255, 250, 223);
}  

#screen_scene_area_info_title
{
    font-size: 14px;
    font-weight: bold;
    color: #fff3cd;
}

#screen_scene_data
{
    display: none;
}

/******************************************* Planet View *********************************************/

#planet_control_bar
{
    background: url(../images/planet/view/controlBar.png);
    width: 880px;
    height: 82px;
    position: relative;
}

#planet_control_navig
{
    width: 130px;
    height: 80px;
    position: absolute;
    left: 750px;            
}

#planet_control_turn, #planet_control_demolish, #planet_control_move_up, #planet_control_move_right, #planet_control_move_down, #planet_control_move_left
{
    opacity : 0;                
    position: absolute;
    cursor: url(../images/cursor/select.cur), auto;
}

#planet_control_move_up
{        
    top: 9px;
    left: 72px; 
}

#planet_control_move_right
{
    top: 30px;
    left: 97px;               
}

#planet_control_move_down
{                      
    top: 55px;
    left: 72px;                
}

#planet_control_move_left
{                        
    top: 29px;
    left: 52px;
}

#planet_control_turn
{
    top: 9px;
    left: 1px;    
}

#planet_control_demolish
{
    top: 37px;
    left: 1px;    
}

#planet_descriptionArea
{
    background-color: #3388bb;
    opacity : 0.7;                
    width: 600px;
    padding: 20px;
    position: absolute;
    left: 125px;
    top: 10px;
    border-radius: 10px;
    display: none;
}

#planet_buildingName, #planet_item_name
{
    font-size: 12px;
    font-weight: bold; 
    color: white;
}

#planet_buildingDescription, #planet_item_description, .redText
{
    font-size: 11px;    
}

.planet_building_category
{
    position: absolute;
    cursor: url(../images/cursor/select.cur), auto;
    opacity : 0.3;                
}

#planet_building_category0
{    
    top: 8px;
    left: 20px;
    opacity : 1;                  
}

#planet_building_category1
{                    
    top: 8px;
    left: 70px;
}

#planet_building_category2
{
    top: 8px;
    left: 120px;  
}

#planet_control_item_list
{
    width: 495px;
    height: 60px;           
    position: absolute;
    top: 8px;
    left: 186px;
}

.planet_control_item
{
    width: 80px;
    height: 60px;
    cursor: url(../images/cursor/select.cur), auto;
    border: solid 1px black; 
    float: left;  
    margin-right: 2px;
}

#planet_item_description_area
{
    width: 400px; 
    background-color: black;
    position: absolute;     
    left: 438px;
    border-radius: 10px;
    opacity : 0.6;    
    padding: 20px;
    display: none;  
    line-height: 100%;
}

#planet_view_render, #planet_view_data
{
    display: none;
}

.redText
{
    color: red;
}

.clickable
{
    cursor: url(../images/cursor/select.cur), auto;
}

#previewArea
{
    margin-top: 20px;  
    display: none;
}

/*********************** Laboratory ******************************/

.laboratoryHeader
{
    text-align: center;
    margin-bottom: 20px;
}

.laboratoryHeader h2
{
    font-family: "Equinox";
    font-size: 20px;
    color: #91dbff;
    letter-spacing: 0.08em;
    font-weight: normal;
    margin: 0 0 6px 0;
    text-transform: uppercase;
}

.laboratorySubtitle
{
    font-size: 12px;
    color: #6899b0;
    letter-spacing: 0.04em;
}

.laboratoryLine, .laboratoryLineHeader
{
    width: 100%;
    border-radius: 6px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.laboratoryLineHeader
{
    padding: 6px 15px 6px 0;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: #607a8a;
    text-transform: uppercase;
    font-weight: bold;
    background-color: transparent;
    border: none;
}

.laboratoryLine
{
    background-color: rgba(8, 18, 28, 0.8);
    border: solid 1px white;
    border-left: solid 4px #555;
    cursor: url(../images/cursor/select.cur), auto;
    transition: background-color 0.2s;
    min-height: 58px;
}

.laboratoryLine:hover
{
    background-color: rgba(25, 50, 70, 0.9);
    opacity: 1;
}

.laboratoryLine--acquired
{
    border-color: #42a5008f;
    color: #42a500;
}
.laboratoryLine--current   { border-color: #ccaa2297; color: #ccaa22; }
.laboratoryLine--available { border-color: #2593b881; color: #2594b8; }
.laboratoryLine--insufficient { border-color: #bb333386; color: #bb3333; }
.laboratoryLine--distant   { border-color: #66666683; color: #666; }

.laboratoryIconSlot
{
    width: 62px;
    flex-shrink: 0;
}

.laboratoryIcon
{
    width: 67px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    margin: 4px 12px 4px 10px;
    flex-shrink: 0;
    filter: grayscale(100%);
}

.laboratoryLine--acquired   .laboratoryIcon { filter: grayscale(100%) sepia(100%) hue-rotate(90deg) saturate(2); }
.laboratoryLine--current    .laboratoryIcon { filter: grayscale(100%) sepia(100%) saturate(2); }
.laboratoryLine--available  .laboratoryIcon { filter: grayscale(100%) sepia(100%) hue-rotate(180deg) saturate(2); }
.laboratoryLine--insufficient .laboratoryIcon { filter: grayscale(100%) sepia(100%) hue-rotate(300deg) saturate(2); }
.laboratoryLine--distant    .laboratoryIcon { filter: grayscale(100%); }

.laboratoryName, .laboratoryType, .laboratoryLevel, .laboratoryArrow
{
    font-size: 14px;
    float: none;
    text-align: center;
}

.laboratoryName
{
    flex: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: auto;
    font-weight: bold;
}

.laboratoryType
{
    width: 220px;
    flex-shrink: 0;
}

.laboratoryLevel
{
    width: 55px;
    flex-shrink: 0;
}

.laboratoryArrow
{
    width: 28px;
    flex-shrink: 0;
    line-height: 1;
    font-size: 26px;
}

.researchImage
{
    float: left;
    margin-right: 20px;
    border-radius: 10px;
    border: solid 2px #49accd;
    box-shadow: 0px 0px 30px #49accd;
}

/********************************* Buttons **************************************/

.listRight
{
	float: right;
	margin-right: 20px;
}

.eve
{
    display: block;
    flex-shrink: 0;
    max-width: 40%;
    height: auto;
    align-self: stretch;
    object-fit: cover;
}

.chatIcon
{
    opacity: 0.6;
    cursor: url(../images/cursor/select.cur), auto;
    float: right;
    position: relative;
    border: 0;
    margin-left: 5px;
	margin-bottom: 5px;
}

.chatIcon:hover
{
    opacity: 1;
}

.messageImage
{
    max-width: 820px;    
}

#soundArea
{
    visibility: hidden;    
}

/**************************** Avatar **************************/

.avatarImageArea
{
    float: left; 
    margin: 5px; 
    position: relative;
}   

.avatarImageSuppress
{
    position: absolute; 
    left: 130px; 
    top: 176px;
    cursor: url(../images/cursor/select.cur), auto;
	padding: 0px;
}

.automateLabel
{
    color: #a6dafe; 
    position: relative; 
    top: 14px;
}

.infoDropDownArea
{                 
    position: relative;               
    padding: 10px 20px 10px 20px;
    background-color: #1b1b1b;
    border-radius: 10px;
    border: solid 1px #2a2a2a;
    color: #aaa;
    height: 20px;
    overflow: hidden;
    transition: height 1s;
    -moz-transition: height 1s; /* Firefox 4 */
    -webkit-transition: height 1s; /* Safari and Chrome */
    -o-transition: height 1s; /* Opera */
    -ms-transition: height 1s;
    opacity: 0.6;
}

.infoDropDownArea h3
{
    color: white;
}

.infoAreaArray
{   
    position: absolute;
    right: 20px;
    opacity: 0.2;
    cursor: url(../images/cursor/select.cur), auto;
}

.pageSection, .pageActivitySection
{
    padding: 15px 25px 15px 20px;
    border-radius: 8px;
    margin: auto;
    margin-bottom: 10px;
    color: #abc2c9;
    position: relative;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.pageSection
{
    border: solid 1px #224c6f;
    background: linear-gradient(135deg, rgb(8 20 30 / 71%), rgb(0 54 95 / 26%));
    backdrop-filter: blur(9px);
    user-select: none;
    min-height: 160px;
}

.pageActivitySection
{
    border: solid 1px #324961;
    background-color: #1b334b;
    background-image: url(../images/items/background/activity_section.jpg);
    background-repeat: no-repeat;
}

.pageSections
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.frontBox
{
    position: relative;
}

.topTextArea
{
    position: relative;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 15px;
    margin: auto;
    border-radius: 5px;
    color: #ffffff;
    border: solid 1px #1b1b1b;
    text-align: center;
    margin-bottom: 10px;
}

.halfLeft, .halfRight
{
	width: 46%;
}

.halfLeft
{
	float: left;
}

.halfRight
{
	float: right;
}

.pageSectionImage
{
    float: left;
    margin: -15px 25px -15px -20px;
    height: 190px;
    width: 253px;
    object-fit: cover;
    border-radius: 0;
    border-right: none;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
}

.pageSection h3, .pageActivitySection h3
{
    font-family: "Equinox";
    color: #91dbff;
    padding-top: 18px;
    letter-spacing: 0.04em;
}

.pageSection h2
{
    color: #91dbff;
    font-variant: small-caps;
    font-size: 18px;
    font-family: 'Roboto';
    font-weight: normal;
    margin-bottom: 0;
}

.pollInput
{
    float: left; 
    position: relative; 
    top: 5px; 
    margin-right: 10px;
}

.chartViewer
{
    height: 400px;
    width: 800px;
}

.chartInfo
{
    display: none;
}

#costInfoPopUp
{
	position: absolute;
	left: 600px;
	width: 290px;
	opacity: 0;
	background-color: #0a0a0a;
	border-radius: 5px;
	border: solid 1px #1A3D60; 
	padding: 10px;
	font-size: 12px;
	color: #cef;
}

#updateTime
{
	display: none;
}

.lessMoreButtonOff, .lessMoreButton
{
	opacity: 0.4;	
	float: left;
	margin-right: 10px;
}

.lessMoreButton
{
    cursor: url(../images/cursor/select.cur), auto;
	transition: all 0.3s ease-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.lessMoreButton:hover
{
	opacity: 1;
}

.lessMoreButtonOff
{
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.lessMorePercentage
{
    float: left;
    margin-right: 10px;
    font-size: 16px;
}

#sonodiv
{
    display: none;
}

.itemActions
{
    width: 400px;
    float: left;
    height: 60px;
}

.capacityBar
{
    position: relative;
    float: left;
    width: 100%;
    padding-right: 10px;
    height: 20px;
    border-radius: 10px;
    background-color: rgba(4, 8, 10, 0.60);
    border: solid 1px #396377;
}

.capacityBarLevel
{
    height: 10px;
    background-color: #0088c8;
    display: block;
    margin-left: 5px;
    margin-top: 5px;
    border-radius: 10px;
}

.capacityBarValue
{
    position: absolute;
    top: 1px;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 10px;
}

.itemActionButtons
{
    margin-top: 12px;
    float: left;
    width: 100%;
}

.infoButton
{
    background-color: #72463d;
    border-radius: 20px;
    font-weight: bold;
}

.variation_positive, .variation_negative
{
    font-size: 11px;
}

.variation_positive, .variation_positive_sign
{
    color: #3d3;
}

.variation_positive::before
{
    content: '(▲';
}

.variation_positive::after, .variation_negative::after
{
    content: ')';
}

.variation_positive_sign::after
{
    margin-left: 5px;
    content: '▲';
}

.variation_negative, .variation_negative_sign
{
    color: #d33;
}

.variation_negative::before
{
    content: '(▼';
}

.variation_negative::after
{
    content: ')';
}

.variation_negative_sign:before
{
    margin-left: 5px;
    content: '▼';
}

#launcherBackground
{
    background-image: url(../images/items/background/launcher.jpg);
    background-size: cover;
    height: 370px;
    width: 500px;
    margin: auto;
}

#launcherButtonArea
{
    position: relative;
    height: 90%;
    width: 250px;
    margin: auto;
    top: 20px;
    box-shadow: none;
}

#launcherButtonArea button
{
    background-color: #3c5069e6;
    height: 50px;
    width: 220px;
    position: absolute;
    top: 140px;
    left: 10px;
}

#launcherLoading
{
    transition: opacity 0.4s ease-out;
}

#launcherButtonArea button:hover
{
    background-color: #00c7ff;
}

#screenOrientation
{
    display: none;
}

.form_error
{
    position: fixed;
    padding: 40px;
    width: 200px;
    height: fit-content;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #9e3737ba;
    border: solid 1px #90575b;
    border-radius: 5px;
    text-align: center;
}

.form_errorClose
{
    position: absolute;
    top: 10px;
    right: 10px;
}

#tableList
{
    width: 100%;
    border-spacing: 0px 1px;
}

.lineHeader, .lineHeaderOrder
{
    font-weight: bold;
    color: #8DBCDB;
}

.line, .lineSelect, #list select
{
    background-color: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

.separateLine
{
    height: 10px;
    background-color: rgb(30 48 77);
}

.subLine
{
    background-color: #658091;
    font-size: 10px;
}

.line button, .line .button
{
    background-color: #466376;
    position: relative;
    top: 1px;
    margin-left: 2px;
    margin-right: 2px;
}

.line button:hover, .line .button:hover
{
    background-color: #83A9C2;
}

.highlight, .line .highlight
{
    background-color: #4C849D;
}

.popUpLink, .infosProfil
{
    color: #42a500;
    font-weight: bold;
    font-size: inherit;
    text-decoration: none;
}

.subLine .popUpLink, .subLine .infosProfil
{
    color: #93D666;
}

.popUpLink:hover, .infosProfil:hover, .subLine .popUpLink:hover, .subLine .infosProfil:hover
{
    color: #b2ec5f;
}

.lien2, .link {
    color: #2594b8;
    font-weight: bold;
    text-decoration: none;
    font-size: inherit;
}

.lien2:hover, .link:hover
{
    color: #97c9e5;
}

select{
    margin-top: 10px;
    border: solid 1px #333;
    background-color: #141414;
    color: #eee;
}

.pageSection input, .pageSection textarea
{
    margin-top: 10px;
    border: solid 1px #333;
    background-color: #141414;
    color: #eee;
    padding-left: 5px;
}

.alignCenter
{
    text-align: center;
}

/********************Profile Frame******************/

.profileLayout
{
    display: flex;
    align-items: stretch;
    max-width: 960px;
}

.profileFrame
{
    background: rgba(5, 15, 30, 0.5);
    border: 1px solid rgba(80, 160, 255, 0.4);
    box-shadow: 0 0 30px rgba(60, 130, 255, 0.2), inset 0 0 40px rgba(0, 0, 0, 0.5);
    padding: 50px 60px;
    flex: 1;
    text-align: center;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 150%;
    margin: 0 20px;
}

.profileFrame h1
{
    font-family: "Equinox", verdana;
    font-size: 20px;
    letter-spacing: 4px;
    color: #a8d8f0;
    text-shadow: 0 0 20px rgba(100, 180, 255, 0.5);
    font-weight: normal;
    margin: 0 0 25px 0;
}

.profileDivider
{
    display: flex;
    align-items: center;
    margin: 25px 0;
}

.profileDivider::before,
.profileDivider::after
{
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(80, 160, 255, 0.25);
}

.profileDivider::before { margin-right: 12px; }
.profileDivider::after  { margin-left: 12px; }

.profileDivider span
{
    width: 8px;
    height: 8px;
    border: 1px solid rgba(80, 160, 255, 0.55);
    transform: rotate(45deg);
    display: inline-block;
    background: rgba(80, 160, 255, 0.15);
    flex-shrink: 0;
}

.profileHighlight
{
    color: #5aafea;
}

.profileButton
{
    animation: profileButtonPulse 2.5s ease-in-out infinite;
}

.profileButton:hover
{
    animation: none;
}

@keyframes profileButtonPulse
{
    0%, 100%
    {
        border-color: rgba(80, 160, 255, 0.35);
        box-shadow: 0 0 6px rgba(60, 130, 255, 0.3);
    }
    50%
    {
        border-color: rgba(80, 160, 255, 0.8);
        box-shadow: 0 0 20px rgba(60, 130, 255, 0.7);
    }
}

@media screen and (max-width: 980px) and (orientation: landscape)
{
    #screenHeader
    {
        width: 100%;
        left: 0;
        right: auto;
        top: 0;
        margin: 0;
        height: 50px;
        padding-top: 0;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #screenHeader > div:first-child
    {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 1;
    }

    /* Pre-launch: keep hidden containers in flex flow so #section stays centered */
    .noDisplayIcons
    {
        display: flex !important;
        align-items: center;
        visibility: hidden;
        flex: 1;
    }

    #screenHeader > #section
    {
        width: auto;
        height: auto;
        top: auto;
        left: auto;
        right: auto;
        margin: 0;
        flex: 0 0 auto;
        text-align: center;
    }

    #screenHeader > div:last-child
    {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1;
    }

    #headerSeparator
    {
        display: none;
    }

    .headerIcon
    {
        float: none;
        width: 26px;
        height: auto;
    }

    #previous
    {
        width: 22px;
        height: 22px;
    }

    #contenu
    {
        width: 961px;
    }

    #infoList, #headerIconTitle
    {
        display: none !important;
    }
}

@media screen and (max-width: 500px)
{
    #contenu, #screenHeader
    {
        display: none;
    }

    #screenOrientation
    {
        display: inline-block;
        width: 256px;
        height: 256px;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 200px;
        color: #b3d5ff;
        text-align: center;
        font-size: 18px;
    }


}

/******************** Tutorial ******************/

#tutorialMessage
{
    position: absolute;
    top: 20px;
    left: 20px;
    width: 320px;
    padding: 15px;
    background-color: rgba(35, 39, 55, 0.88);
    border-radius: 8px;
    color: #fff5d9;
    border: solid #ffc72a 1px;
    line-height: 150%;
    box-shadow: 0 0 16px 4px rgba(255, 210, 85, 0.4);
    font-size: 13px;
    z-index: 1000;
}

.tutorialBoldMessage, #tutorialNextStep
{
    display: block;
    font-weight: bold;
    color: #ffe354;
    font-size: 16px;
    margin-bottom: 10px;
}

#tutorialNextStep
{
    display: flex;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: solid 1px rgba(255, 224, 0, 0.35);
    font-size: 13px;
}

#tutorialNextStep::before
{
    content: '\2192';
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    border: 2px solid #ffe000;
    border-radius: 50%;
    color: #ffe354;
    font-size: 18px;
    margin-right: 12px;
    flex-shrink: 0;
}

@keyframes tutorialPulseAnim
{
    0%   { box-shadow: 0 0 0 0 rgba(255, 225, 80, 0.91); }
    70%  { box-shadow: 0 0 0 20px rgba(100, 180, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(100, 180, 255, 0); }
}

.tutorialClickableElement
{
    opacity: 1 !important;
    animation: tutorialPulseAnim 1.5s ease-out infinite;
}

#helpIcon
{
    position: absolute;
    width: 50px;
    height: 50px;
    top: 80px;
    left: 890px;
    cursor: url(../images/cursor/select.cur), auto;
    background-image: url(../images/eve/icon.jpg);
    border-radius: 50px;
    border: solid 2px #57adf3;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
}

#helpIcon:hover
{
    filter: grayscale(0%);
    opacity: 1;
    box-shadow: 0 0 14px 4px rgba(80, 160, 255, 0.7);
}

#helpData
{
    display: none;
}

#informationScreenTitle
{
    font-family: "Equinox", verdana;
    font-size: 22px;
    color: #fff1bd;
    font-weight: normal;
    margin: 0 0 25px 0;
}

#informationScreenData
{
    color: #ffe6cc;
    line-height: 150%;
    text-align: left;
}

/*************************** Data Panel *************************/

.dataPanel
{
    background: linear-gradient(160deg, rgba(14, 28, 54, 0.6) 0%, rgba(7, 15, 32, 0.6) 100%);
    border: 1px solid rgba(55, 105, 165, 0.4);
    border-radius: 4px;
}

.dataPanelHeader
{
    display: flex;
    align-items: center;
    gap: 15px;
	padding: 15px 18px 15px 5px;
	background: linear-gradient(135deg, rgba(30,60,100,0.5), rgba(10,25,50,0.6));
    border-bottom: 1px solid #2a4d65;
	align-items: flex-start;
    position: relative;
}

.dataPanelHeaderText { flex: 1; }
.dataPanelHeaderText h3 { margin: 0 0 5px 0; font-size: 15px; font-weight: bold; text-transform: uppercase; color: #8DBCDB; letter-spacing: 1px; }
.dataPanelHeaderText p { margin: 0; font-size: 13px; color: #7a9ab5; line-height: 1.4; text-align: left; }

.dataPanelTableHeader
{
    display: grid;
    padding: 8px 15px;
    border-bottom: 1px solid rgba(42,77,101,0.3);
    background: rgba(0,0,0,0.3); border-bottom-color: #2a4d65;
}

.dataPanelTableHeader > div
{
    font-size: 10px; 
    font-weight: bold; 
    color: #6a8fa5; 
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.dataPanelHeaderIcon { width: 60px; height: 60px; border-radius: 60px; border: solid 2px #4787b3b8; }

.dataPanelTableRow
{
    display: grid;
    padding: 8px 15px;
    border-bottom: 1px solid rgba(42,77,101,0.3);
    text-align: left;
}

.dataPanelTableRow > div
{
    display: flex;
    align-items: center;
}