body { 
/*font-family: Arial, sans-serif;*/
 background: #f4f4f4; 
 margin: 0; padding: 0; 
 display: flex; 
 justify-content: center; 
 align-items: center; 
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
small{
	font-size:10px;
}
.container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 90%; max-width: 400px; }
h1 { text-align: center; }
.tab-container { display: flex; justify-content: space-around; margin-bottom: 20px; }
.tab { background: #FF8F3F; border: none; padding: 10px; cursor: pointer; flex: 1; }
.tab.active { background: #007bff; color: white; }
.form { display: none; flex-direction: column; }
.form.active { display: flex; }
input { margin: 10px 0; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } /* Intuitive: Large for mobile */
button { background: #007bff; color: white; border: none; padding: 10px; cursor: pointer; font-size: 16px; }
.error { color: red; text-align: center; margin-top: 10px; }

/* Responsive: Desktop adjustments */
@media (min-width: 768px) {
    .container { max-width: 600px; }
    input, button { font-size: 18px; }
}

.dashboard { width: 90%; max-width: 800px; margin: 20px auto; }
header { display: flex; justify-content: space-between; grid-column:1/3; }

header {background-image:url('assets/cloakanddagger.jpg'); background-size:cover; background-position-y: -175px; padding:10px;}
@media (max-width: 460px) {
    header { background-position-y: 0px; }
    header {flex-direction: column;}
}
.header-container{
    background: rgba(255, 255, 255, 1);
    padding:20px;
    border-radius:8px;
    margin-bottom:10px;
}
.header-container h2{
    margin-top:0;
    padding-top:0;
}
.header-container section{
    padding:0;
    margin:0;
}
.battle-for-visby-header{
    text-align:center;
    color:#fdfdfd;
    text-shadow: 2px 2px 2px #141414;
    margin-bottom:10px;
}
section {/*  margin: 20px 0; */ border-top: 1px solid #ddd; padding-top: 10px; }
.resource-grid, .building-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.building-card { display:flex; flex-direction:column; align-items:center; background: #f9f9f9; padding: 10px; border-radius: 4px; justify-content:space-between; }
.product_amount { color:#408840;}
.building-image-spacer{width:100px;}
.building-cost {margin-bottom:10px;}
.building-production, .building-cost{font-size:12px;}
.actions-list { display: flex; flex-direction: column; gap: 10px; }
.actions-list button { width: 100%; } /* Mobile-friendly */
#submit-actions { margin-top: 10px; background: #28a745; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 10px 20px; border-radius: 4px; display: none; }
.toast.show { display: block; }
.toast.success { background: #28a745; color: white; }
.toast.error { background: #dc3545; color: white; }
#clan-section {border:0;}
#clan-units ul{display:grid;grid-template-columns:2fr 2fr 2fr; padding:15px;margin:0;}
#clan-resources ul{display:grid;grid-template-columns:2fr 2fr 2fr; padding:15px;margin:0;}
.clan-banner-container{
    display:flex;
    justify-content:center;
    margin-bottom:10px;
}

#estate-section{grid-column:1/3;}
/* Desktop: Side-by-side */
@media (min-width: 768px) {
    /*.dashboard { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; }*/
    #clan-section { grid-column: 1; }
    #actions-section { grid-column: 2; }
	#estate-section { grid-column: 1/3; }
    .actions-list { flex-direction: row; flex-wrap: wrap; }
    .actions-list button { width: auto; }
}
#allocation-form {margin-top:10px;}
.buff{
    display:inline;
}
#scout-list{
   
    
    display:flex;
    flex-direction:column;
    
    justify-content:space-between;
}
.scout-action-item{
    
    padding:10px;
    border-radius:8px;
    margin:10px;
   
}
.scout-action-item h2{
    color:#eee;
    text-shadow: #141414 1px 1px 2px;
}
#scout-recon-action{
    background-image:url('assets/rogues.jpg');
    background-size:cover;
    
}

#scout-theft-action{
    background-image:url('assets/thieves.jpg');
    background-size:cover;
    
}

#scout-sabotage-action{
    background-image:url('assets/sabotage.jpg');
    background-size:cover;
    
}
.action-description{
    background: rgba(0, 0, 0, 0.6);
    padding:10px;
    border-radius:8px;
    margin-top:10px;
    color:#eee;
    font-size:0.9em;
}
.thieves-den{
    display:none;
}
.special-operations{
    padding:10px;
}
.clan-selection .layout { background-image: url('./assets/gotlandsocken.png'); background-repeat:no-repeat; display: flex; flex-direction: column; gap: 20px; }
.list-section { overflow-x: auto; max-height:400px;}
#parish-table { width: 100%; border-collapse: collapse; }
#parish-table th, td { padding: 8px; border-bottom: 1px solid #ddd; text-align: left; }
.full { color: red; }
.high { color: orange; }
.medium { color: #d4af37; } /* Gold/yellow */
.low { color: green; }
/* .map-image { width: 100%; height: auto; } */
.map-legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.map-legend li { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; }
.map-legend-container{
    background: rgb(250, 250, 250);
    padding:10px;
    border-radius:8px;
    margin-bottom:10px;
}
/* Desktop: Side by side */
@media (min-width: 768px) {
    .clan-selection .layout { flex-direction: row; }
    .list-section {  }
    .map-section { flex: 2; padding-left: 20px; }
}

#sabotage-warning, #steal-warning{ 
    background-color:#ffcccc;
    border:2px solid #ff0000;
    padding:10px;
    border-radius:8px;
    margin-bottom:20px;
}

.btn-disabled{
    background:url('assets/GUI/button-inactive.png') no-repeat center;
    background-size:contain;  
}
.btn-disabled:hover{
    cursor:not-allowed;
    text-shadow:none;
}

#tabs{
	display: flex;
    flex-wrap: nowrap; /* Wrap on small screens */
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd; /* Subtle separator */
	grid-column:1/3;
}

.tab-button {
    background: #FF8F3F;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s ease, color 0.3s ease; /* Intuitive hover feedback */
    border-radius: 4px 4px 0 0; /* Tab-like shape */
}
.tab-button.disabled{
	background: #7f7f7f;
}
.tab-button:hover {
    background: #e0e0e0;
}

.tab-button.active {
    background: #007bff;
    color: white;
    font-weight: bold; /* Clear active state */
}

.tab-button:focus {
    outline: 2px solid #007bff; /* Accessibility for keyboard nav */
}

/* Tab Content: Hide/show with transition for responsiveness */
.tab-content {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease; /* Fade-in for intuitiveness */
}

.tab-content.active {
    display: block;
    opacity: 1;
	grid-column: 1/3;
}

/* Mobile Responsiveness: Stack tabs vertically */
@media (max-width: 768px) {
    #tabs {
        flex-direction: column; /* Stack for touch-friendly */
        gap: 5px;
    }
    .tab-button {
        width: 100%; /* Full-width buttons */
        padding: 15px; /* Larger tap targets */
    }
}

/* Action Queue List: Responsive and intuitive */
.action-queue-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.action-queue-list li {
    background: #f9f9f9;
    padding: 10px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.delete-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #dc3545; /* Red for delete */
    transition: color 0.3s ease;
}

.delete-icon:hover {
    color: #a52834; /* Darker red */
}

/* Mobile: Larger icons */
@media (max-width: 768px) {
    .delete-icon {
        font-size: 24px; /* Touch-friendly */
    }
}

.building-image {
    width: 100px; /* Responsive scaling */
    height: auto;
    margin-bottom: 10px;
}

.modal {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (width>=512px){
	.modal-content{
		left:35%;
        top:15%;
		position:relative;
	}
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    width: 640px;
	height: 480px;
	overflow: scroll;
}

@media (max-width:460px){
	.modal-content {
		top:15%;
        position:relative;
        padding:10px;
        margin-left:5%;
        width:85%;
	}
}

.close {
    float: left;
    cursor: pointer;
    font-size: 20px;
}

/* Resource Deltas: Intuitive colors and positioning */
.delta {
    font-size: 0.9em;
    margin-left: 5px;
}

.delta.positive {
    color: green; /* Gain */
}

.delta.negative {
    color: red; /* Loss */
}

/* Mobile: Larger for readability */
@media (max-width: 768px) {
    .delta {
        font-size: 1em;
    }
}

/* Pillage History List: Intuitive and responsive */
.pillage-history-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pillage-history-list li {
    background: #f9f9f9;
    padding: 10px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.success-icon { color: green; font-size: 1.2em; }
.failure-icon { color: red; font-size: 1.2em; }

/* Mobile: Compact */
@media (max-width: 768px) {
    .pillage-history-list li {
        font-size: 0.9em;
    }
}

.story-block {
    background: #f9f9f9;
    padding: 15px;
    border-left: 4px solid #007bff; /* Intuitive highlight */
    border-radius: 4px;
    font-style: italic; /* Crier feel */
    margin-bottom: 20px;
    white-space: pre-wrap; /* Responsive wrapping */
}

@media (max-width: 768px) {
    .story-block {
        font-size: 0.95em; /* Readable on small screens */
    }
}

.estate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.estate-card { background: #f9f9f9; padding: 10px; border-radius: 4px; }
.estate-card h3 { margin: 0 0 5px; }
.chat-list { height: 300px; overflow-y: auto; background: #f4f4f4; padding: 10px; border: 1px solid #ddd; margin-bottom: 10px; display: flex; flex-direction: column-reverse; } /* Auto-scroll */
.chat-message { margin-bottom: 5px; }
.chat-message .username { font-weight: bold; }
.chat-message .time { font-size: 0.8em; color: #888; }

@media (max-width: 768px) {
    .chat-list { height: 200px; }
}

.trade-section { margin-bottom: 20px; }
.trade-section form { display: flex; gap: 10px; flex-wrap: wrap; }
.trade-section select, .trade-section input { padding: 5px; border: 1px solid #ddd; border-radius: 4px; }
.trade-section button { padding: 5px 10px; background: #007bff; color: white; border: none; cursor: pointer; }
.feedback { color: #28a745; margin-top: 5px; }
.feedback.error { color: #dc3545; }
.offer-list { list-style: none; padding: 0; }
.offer-list li { background: #f9f9f9; padding: 10px; border-radius: 4px; margin-bottom: 5px; display: flex; justify-content: space-between; }

@media (max-width: 768px) {
    .trade-section form { flex-direction: column; }
    .offer-list li { flex-direction: column; gap: 5px; }
}

#logout-button{
	font-size:12px;
	padding:2px;
}

.logo-options{
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
}
#current-logo-container{
    text-align:center;
    margin-bottom:20px;
}
.logo-img {
    width:64px;
    height:90px;
    border:2px solid transparent;
    border-radius:8px;
    cursor:pointer;
    transition: border-color 0.3s ease;
}
.logo-img:hover {
    border-color: #007bff;
}
.logo-img.selected {
    border-color: #28a745;
}

.game-intro { text-align: center; margin: 20px; display:flex; flex-direction:column; }
.intro-map { max-width: 300px; height: auto; }
@media (min-width: 768px) { .intro-map { max-width: 500px; } }

:where(h1){
	margin-block: 0.67em;
	font-size: 2em;
}

.quest-complete{text-decoration-line: line-through;}
#mill-slider{max-width:100px;display:block;margin:0;padding:0;}
.building-production{max-width:110px;}

.summary-container{
	padding:20px;
	background-color:#efefef;
	border-radius:4px;
	width:100%;
}
.rankings{
	
}
#clan-rankings ul {
 padding:0;
 margin:0;
}
#clan-rankings li {
	list-style-type:none;
}
#daily-summary{
	display:flex;
	justify-content:space-between;
}
.workers{
	display:flex;
    justify-content: space-between;
}
#workers-pane {
    display:flex;
    justify-content:center;
    gap:5px;
}
#recruit-submit{
    margin-right:20px;
}
.citizens-pane{
    padding:10px;
    background-color:#eee;
    border-radius:8px;
}
.citizen-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    margin-bottom:10px;
}
#military-units{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
}
.canvas-wrapper{
    display:flex;
    justify-content:center;
}

.building-description{text-align:center;}

.religion-choice-container{
	display:flex;
	justify-content:space-around;
}

#religion-content{
	display: grid; 
	grid-template-columns: 2fr 2fr;
    grid-gap: 20px;
}
@media (max-width: 768px) {
   #religion-content{
        display:grid;
        grid-template-columns: 1fr;
    }
    
}

.blessing-card{
	display:flex;
	flex-direction:column;
	flex-wrap: wrap;
    gap: 10px; /* Space between items */
    justify-content: space-around; /* Even distribution */
	margin-bottom:20px;
	background-color:#efefef;
	padding:20px;
}
.blessing-name h3{
	margin:0;
	padding:0;
}
.activate-blessing.disabled{
	background:#7f7f7f;
	cursor:pointer;
}
.blessing-description{
   padding:20px;
   background-color:#fdfdfd;
   border-radius:8px;
   opacity:0.8;
}

.hidden{
	display:none;
}

.blessing-target-select{
	display:flex;
	justify-content:space-evenly;
	margin-bottom:20px;
}

.blessing-activation-button{
	display:flex;
	justify-content:center;
}

.howtolink{
	color:#000;
}
.howtoplay-list li{
	margin-bottom:15px;
}
.resource-explenation-list li{
	margin-bottom:10px;
}

.faith-amount{
	display:flex;
	justify-content:center;
	margin-bottom:20px;
}

@media (max-width: 768px) {
    .blessing-card{
        flex: 0 1 calc(33.33% - 10px); /* ~1/3 width, minus gap */
		justify-content: flex-start; /* Align left for better flow */
    }
}

#recruit-form-content{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.unit-type{
	background-color:#efefef;
	display:flex;
	flex-direction:column;
	align-items:center;
	margin:5%;
	font-size:0.9em;
	padding-bottom:20px;
}
.unit-stats{
	padding:10px;
}
.offensdefense{
	display:grid;
	grid-template-columns: 1fr 1fr;
	margin-top:10px;
	margin-left:auto;
	width:80%;
}
.requirement-list{
	margin:0;
	padding:0;
	padding-left:20px;
}

.recruit-amount-input{
	margin:0 auto;
	width:80%;
	
}

@media (max-width: 768px) {
   #recruit-form-content{
		display:grid;
		grid-template-columns: 1fr 1fr;
	}
}

/* Collapsable Sections: Intuitive and responsive */
.collapsable {
    max-height: 0; 
    overflow: hidden;
    transition: max-height 0.3s ease; 
	
}

.collapse-header{
	position: relative;
    padding-right: 20px; 
}
.collapse-header::after{
	content: '▼';
    position: absolute;
    right: 0;
    transition: transform 0.3s ease;
}

.collapsable.active {
    max-height: 10000px; 
}

/* Mobile: Ensure sections stack cleanly */
@media (max-width: 768px) {
    .collapsable {
        transition: max-height 0.5s ease; 
    }
}

.collapse-header.active::after { 
    transform: rotate(180deg); 
}

#clan-modal{
	overflow-y:scroll;
}

#send-pillage-amount{
	display: grid;
	grid-template-columns: 2fr 2fr;
	padding-right: 20px;
}
#send-pillage-amount input{
	width:30%;
}
#clan-resources ul{
	display:grid;
	grid-template-columns: 2fr 2fr;
}
.buffed-offense{
    color:#007bff;
}
.send-troops-area{
    display:grid;
    grid-template-columns: 2fr 2fr;
}
#special-thumbnail-container{
    display:flex;
    justify-content:center;
    margin-bottom:10px;
}
#special-garrison-units{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:space-evenly;
}
#active-buffs{
    list-style:none;
    padding:0;
    margin:0;
    display:inline;
    gap:10px;
<<<<<<< Updated upstream
=======
}
#citizen-allocation-widget{
    padding:20px;
    background-color:rgb(238, 238, 238);
    border-radius:8px;
}

#citizen-allocation-widget h3{
    /* margin-top:0; */
}

button{
    cursor:pointer;
    background:url('assets/GUI/button.png') no-repeat center;
    background-size:contain;
    font-size:0.9em;
    min-width:100px;
    min-height:40px;
    text-shadow: #141414 1px 1px 2px;
}



.citizen-allocation-controls{
    padding:10px;
}
.worker-distribution-control{
    width:100%;
    padding:20px;
}
.num-citizen{
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:20px;
}
.worker-buttons{
    display:flex;
    justify-content:space-around;
    
}
#allocation-form{
    display:flex;
    justify-content:center;
}
.tab-button{
    text-shadow: none;
}
.citizen-allocation-controls{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap:10px;
}

.non-combatant-units{
    display:grid;
    grid-template-columns: 2fr 2fr;
    gap:20px;
}

@media (max-width: 460px) {
    .worker-buttons{
        flex-direction:column;
        height:auto;
    }
    .num-citizen{
        flex-direction: column;
    }
}
#tabs button{
    max-width: none;
    padding:10px;
}
.resource-pane {
    position: relative; /* Default static */
    top: 0;
    left: 0;
    width: 100%;
    background: #333;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-around;
    gap: 15px;
    z-index: 10; /* Above other content */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Visual cue */
    transition: top 0.3s ease, position 0s linear 0.3s;
}

.resource-pane.fixed {
    position: fixed; /* Stick to top on scroll */
    flex-wrap:wrap;
   
    top: 0;
}

.resource-type{
    font-size:0.8em;
}

.resource-pane span {
    margin-right: 10px;
}

.resource-pane #wheat-value,
.resource-pane #lumber-value,
.resource-pane #stone-value,
.resource-pane #coins-value {
    font-weight: bold;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .resource-pane.fixed {
       position:fixed;
       flex:wrap;
        width:95vw;
    padding-right:40px;
       top:0;
    }
    .resource-pane span {
        margin: 5px 0;
    }
}

/* Detect scroll and apply fixed class (using Intersection Observer for efficiency) */
@supports (position: sticky) {
    .resource-pane {
        position: sticky;
        top: 0;
    }
}

.codex-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('assets/GUI/codex.jpg') no-repeat center; /* Replace with your icon */
    background-size: contain;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 5px;
}

.codex-tooltip {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px;
    border-radius: 5px;
    z-index: 1000;
    max-width: 500px;
    text-align: center;
}

@media (max-width: 460px) {
    .codex-tooltip {
        width: 90%;
        max-width: none;
        padding: 15px;
        font-size:0.8em;
    }
}

.codex-tooltip.active {
    display: block;
}

.codex-tooltip-close {
    position: absolute;
    top: 5px;
    right: 10px;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
>>>>>>> Stashed changes
}
#citizen-allocation-widget{
    padding:20px;
    background-color:rgb(238, 238, 238);
    border-radius:8px;
}

#citizen-allocation-widget h3{
    /* margin-top:0; */
}

button{
    cursor:pointer;
    background:url('assets/GUI/button.png') no-repeat center;
    background-size:contain;
    font-size:0.9em;
    min-width:100px;
    min-height:40px;
    text-shadow: #141414 1px 1px 2px;
}
.citizen-allocation-controls{
    padding:10px;
}
.worker-distribution-control{
    width:100%;
    padding:20px;
}
.num-citizen{
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:20px;
}
.worker-buttons{
    display:flex;
    justify-content:space-around;
    
}
#allocation-form{
    display:flex;
    justify-content:center;
}
.tab-button{
    text-shadow: none;
}
.citizen-allocation-controls{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap:10px;
}

.non-combatant-units{
    display:grid;
    grid-template-columns: 2fr 2fr;
    gap:20px;
}

@media (max-width: 460px) {
    .worker-buttons{
        flex-direction:column;
        height:auto;
    }
    .num-citizen{
        flex-direction: column;
    }
}
#tabs button{
    max-width: none;
    padding:10px;
}
.resource-pane {
    position: relative; /* Default static */
    top: 0;
    left: 0;
    width: 100%;
    background: #333;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-around;
    gap: 15px;
    z-index: 10; /* Above other content */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Visual cue */
    transition: top 0.3s ease, position 0s linear 0.3s;
}

.resource-pane.fixed {
    position: fixed; /* Stick to top on scroll */
    flex-wrap:wrap;
   
    top: 0;
}

.resource-type{
    font-size:0.8em;
}

.resource-pane span {
    margin-right: 10px;
}

.resource-pane #wheat-value,
.resource-pane #lumber-value,
.resource-pane #stone-value,
.resource-pane #coins-value {
    font-weight: bold;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .resource-pane.fixed {
       position:fixed;
       flex:wrap;
        width:95vw;
    padding-right:40px;
       top:0;
    }
    .resource-pane span {
        margin: 5px 0;
    }
}

/* Detect scroll and apply fixed class (using Intersection Observer for efficiency) */
@supports (position: sticky) {
    .resource-pane {
        position: sticky;
        top: 0;
    }
}

.codex-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('assets/GUI/codex.jpg') no-repeat center; /* Replace with your icon */
    background-size: contain;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 5px;
}

.codex-tooltip {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px;
    border-radius: 5px;
    z-index: 1000;
    max-width: 500px;
    text-align: center;
}

@media (max-width: 460px) {
    .codex-tooltip {
        width: 90%;
        max-width: none;
        padding: 15px;
        font-size:0.8em;
    }
}

.codex-tooltip.active {
    display: block;
}

.codex-tooltip-close {
    position: absolute;
    top: 5px;
    right: 10px;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
}