MediaWiki:Common.css

/* CSS placed here will be applied to all skins v2.86*/

/*main*/ body { font-size:14px !important; color:#3a3a3a !important; }

body pre { line-height: 1.5 !important; color:#3a3a3a !important; font-family: monospace,monospace !important; white-space: pre !important; }

body > #mw-content-container { padding-top: 6% !important; }

body.skin-cosmos::after { background-attachment: fixed; background-repeat: repeat; background-position: 50% 0%; background-size: auto !important; }

.skin-cosmos .mw-dismissable-notice { background: #acd7dee3 !important; padding: 10px; border-radius: 10px; }

.catlinks li { background-color: lavender; }

h1, h2, h3, h4, h5, h6 { color: #3a3a3a !important; }

padding: 10px 20px !important; }
 * 1) mw-content {


 * 1) mw-content, #mw-content-text {color:#3a3a3a !important;}

.mw-parser-output .article-table td, .mw-parser-output .article-table th, .mw-parser-output .WikiaTable td, .mw-parser-output .WikiaTable th { padding: 6px 10px; border-bottom: 1px solid #c3c6c6;

}

.mw-parser-output .article-table th, .mw-parser-output .WikiaTable th {background-color:#f2f2f2;color:#3a3a3a;}

.jquery-tablesorter th.headerSort { padding-right: 21px !important;} .wikitable td, .article-table td {color:#3a3a3a }

.cardImg img{ border:5px solid#006cb0 !important; border-radius:10px !important; margin:5px 3px 5px 5px !important; }

.wikitable td.tdHead { text-align:center !important; font-size:1.5em !important; color:black !important; background:linear-gradient(#95d1e4 0%,#b2e3f3 100%) !important; } .article-table,.WikiaTable,.wikitable,.TablePager { background:#fafafa !important; box-shadow:0px 1px 5px #8290946e !important; border-collapse:collapse !important; border:1px solid#cccccc !important; margin-left:3px !important; max-width:99% !important; }

.portable-infobox{ box-shadow:1px 1px 5px #0c41526e !important; border:1px solid#a4a7a9 !important; margin-right:4px !important; }

.portable-infobox .pi-image-thumbnail { width:170px !important;} .pi-item p { margin: 2px !important; }

.pi-header,.pi-title { padding: 5px 14px !important; box-shadow: 0px 2px 5px -2px #006cb094 !important; color: #fff !important; font-weight: bold !important; }

/*hide border for image thumbnails and hide enlarge button*/ .thumb div.thumbinner { border:0px !important; background-color: transparent !important; } .thumb div.thumbinner .thumbimage { background-color: transparent !important; border: 0px solid #c8ccd1 !important; } .thumbcaption {border:0px !important;text-align: center !important;} .thumbcaption .magnify {display:none;} /*end hide border for thumbnails*/

/*recent wiki changes activity set font */ .cosmos-recentChanges-info {color: #3a3a3a;font-size: 12px;max-height: 16px;} .cosmos-recentChanges-info a {color: #3a3a3a !important;font-size: 12px;max-width: 150px;overflow: hidden;white-space: nowrap;}

/*cosmos-toolbar-disable*/
 * 1) cosmos-toolbar {display:none !important;}

ul.gallery.mw-gallery-slideshow { display: block; margin: 1em 0 !important; }

/*EventCards with border (wb)*/ .event-cards-wb-gallery ul.gallery {text-align:center !important; } .event-cards-wb-gallery li.gallerybox {margin: 4px;}

.gallery.mw-gallery-nolines { text-align: center !important; } /*old info .event-cards-wb-gallery li.gallerybox {

overflow:hidden !important; box-shadow:2px 2px 5px #6e707194 !important; border:2px solid #3a92c7 ; border-radius:5px !important; margin: 4px; }

.gallery.event-red .gallerybox{ border: 1px solid #ccc; border-radius: 5px;margin-bottom: 0.3em; background-color: #e95f55; }

.gallery.event-green .gallerybox{ border: 1px solid #ccc; border-radius: 5px;margin-bottom: 0.3em; background-color: #63dfa5; }

.gallery.event-blue .gallerybox{ border: 1px solid #ccc; border-radius: 5px;margin-bottom: 0.3em; background-color: #6fb9fa; }

.gallery.event-light .gallerybox{ border: 1px solid #ccc; border-radius: 5px;margin-bottom: 0.3em; background-color: #d0d0a0; }

.gallery.event-dark .gallerybox{ border: 1px solid #ccc; border-radius: 5px;margin-bottom: 0.3em; background-color: #3631317d; }

/*cosmos sidebar extra modules*/ .railModule.interface-module li { padding-bottom: 10px; font-size: 14px; list-style: none; } .railModule.interface-module ul { margin-left: 0px; }

/* comments streams */ .cs-comment { position: relative; overflow: hidden; background-color: #F4F3F4; } .cs-comment .cs-comment-header { background-color: #ebebec; }

.cs-head-comment > .cs-comment-header { border-top: 2px solid #0b89ae; padding-left: 10px; }

.cs-comment-body { padding-left: 10px; padding-right: 10px; }

.cs-reply-comment { margin-top: 10px; margin-left: 15px !important; border-left: 4px solid #CCC; padding-left: 15px; background-color: #F4F3F4; padding-right: 10px; border-radius: 5px; } .cs-stream-footer { margin-top: 5px; } /*the end of css for cs-stream comments*/

/*css for soulbind-table*/ .soulbind-table tr:nth-child(3n+2) { border-bottom: 2px solid #3576ba !important; }

.soulbind-table tr:nth-child(3n+3) td:nth-child(1) { background-color: #95d1e4 !important; }

.soulbind-table tr:nth-child(3n+4) td:nth-child(1) { background-color: #a1d3e4 !important; }

.soulbind-table tr:nth-child(3n+5) td:nth-child(1) { background-color: #b2e3f3 !important; } .soulbind-table tr td:nth-last-child(3) {width:40px;}

/*Visual Chest Map*/ .mapBtns{user-select:none;} .mapBtns .btn3{ margin:5px -3px 5px -4px; border-radius:3px 0 0 3px; min-width:30px; padding:4px 1px 4px 1px; cursor:pointer; text-align:center; font-size:24px;vertical-align:middle; background:linear-gradient(#008be3 35%,#006cb0 65%); display:inline-block;color:white; } .mapBtns .btn3:hover{background:linear-gradient(#50b6f7 35%,#1e76ad 65%);} .mapBtns .btn4{border-radius:0 3px 3px 0;}

.mapBtns .inpNum{ padding: 4px 5px 4px 5px; margin: 5px 2px !important; min-width: 40px; border-radius: 0; max-width: 200px; border: 2px solid #919ba1; display: inline-block; text-align: center; height: 22px; vertical-align: middle; font-size: 14pt; line-height: 16pt; } .mapBtns span{ min-width:100px; display:inline-block; text-align:right; margin-right:10px; color:#727272; font-size: 14pt; vertical-align: middle; } .mapBtns .ChC{background:#f9caab;} .mapBtns .ChR{background:#d6d6d6;} .mapBtns .ChE{background:#f9e24c;} .mapBtns .ChL{background:#78fbf5;} .mapBtns .ChLoc{background:#d0f7d7;border:1px solid#098e21;} .mapBtns .ChSel{border:3px solid#46a8fb !important;margin:7px 5px !important;} .mapBtns .imaC{background-position:0 0 !important;} .mapBtns .imaR{background-position:-40px 0 !important;} .mapBtns .imaE{background-position:-80px 0 !important;} .mapBtns .imaL{background-position:-120px 0 !important;} .mapBtns .chests0{border:1px solid#c1bdbd;border-radius:5px;padding:1px;margin:1px;display:inline-block;vertical-align:middle;cursor:pointer;} .mapBtns .chests0:hover{background:#9ff39a;border:1px solid#14840d;} .mapBtns .chests{background:url("https://static.miraheze.org/smutstonewiki/a/a0/Chests.png") no-repeat;padding:0;width:40px;height:40px;} .btn5{ border: 2px solid #006cb0; padding: 3px 10px; margin: 10px 10px; text-align: center; background: linear-gradient(#cbdaea 35%,#9abed5 65%); cursor: pointer; border-radius: 3px; display: inline-block; color: #0a175c; font-size: 14pt; position: relative; top: 3px; } .btn5:hover{background: linear-gradient(#f3f1f1 35%,#d4d4d4 65%);} .chDiv{margin:5px auto;max-width:480px;height:480px;}
 * 1) lChest0,#lChest1,#lChest2{text-transform:uppercase;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

/*event chapters phases table styles*/ .event-chapters tr:hover { background-color: beige; }

.event-chapters tr td:first-child { background-color: #ffe6e6; } .event-chapters tr:nth-child(9) { background-color: #ffe9e9;border: 2px solid red; } .event-chapters tr:nth-child(16) { background-color: #ffe9e9;border: 2px solid red; } .event-chapters tr:nth-child(23) { background-color: #ffe9e9;border: 2px solid red; }

.event-chapters tr:nth-child(29) { background-color: #ffe9e9;border: 2px solid red; } .event-chapters tr:nth-child(36) { background-color: #ffe9e9;border: 2px solid red; } .event-chapters tr:nth-child(43) { background-color: #ffe9e9;border: 2px solid red; } .event-chapters tr:nth-child(49) { background-color: #ffe9e9;border: 2px solid red; } .event-chapters tr:nth-child(56) { background-color: #ffe9e9;border: 2px solid red; } .event-chapters tr:nth-child(63) { background-color: #ffe9e9;border: 2px solid red; } /*end event chapter phases*/

.table-of-cards { font-size:11px; text-align:center; border-collapse: collapse; background:#fafafa !important; box-shadow:0px 1px 5px #8290946e !important; border-collapse:collapse !important; border:1px solid#cccccc !important; }

.table-of-cards td { padding:6px 4px ; border-bottom: 1px solid #c3c6c6; }

.article-table th { background-color:#f2f2f2;color:#3a3a3a;   padding: 6px 4px; }

/* === Combat Simulator === */

.combatSimulator {padding: 2px; position: relative; width: 658px; border: 1px solid #ccc;}

.combatSimulator label { font-size: 12pt; background-color: #d8dfe4; padding: 3px 5px; margin-top: 8px; display: inline-block; margin-bottom: 2px; border-radius:5px; }

.combatSimulator select { font-size: 12pt; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; padding: 3px; } .combatSimulator #selectMission {width: 235px;}

.combatSimulator #output {border: 2px solid #E5E3E3; margin-bottom: 10px; font-family: monospace;font-size: 12px;} .combatSimulator #userData { border: 2px solid #d8dfe4; margin-bottom: 20px;}

/* the combat button and other buttons*/ .combatSimulator #combat, .button_style1 { border: 2px solid #1fd12a; font-size: 12pt; padding: 3px 10px; background-color: #ecffd0; cursor: pointer; } .combatSimulator #combat:focus {border-color: #c11;background-color: #f4dada;}

.combatSimulator .propertyButtons {display: inline-block;}

.combatSimulator .propertyButtons button, .combatSimulator #bestArtifactPanel button, .button_style2 { border: 2px solid #1127cc; font-size: 12pt; padding: 3px 10px; background-color: #f7f7f7; cursor: pointer; margin:0px 2px; }

.button_style3 { border: 2px solid #1127cc; font-size: 12pt; padding: 3px 10px; background-color: #f7f7f7; cursor: pointer; margin:0px 4px; border-radius:5px; line-height:16px; }

.button_style4, .combatSimulator .propertyButtons_more button { border: 1px solid #1127cc; font-size: 12pt; padding: 4px 4px; background-color: #7781a7; cursor: pointer; margin:0px 0px; border-radius:5px; line-height:16px; position:relative; }

.combatSimulator .propertyButtons_more button img {display: none;}

.combatSimulator .propertyButtons_more button:hover img { display: block; position: absolute; width: 50px; top: -65px; left: -10px; border: 1px solid #1127cc; background-color: #7781a7; border-radius: 5px; padding: 4px 4px; }

/*short combat info*/ background-color: green;font-size: 14px; position: absolute; top: 155px;right: 15px; text-align: center;white-space: nowrap;width:80px; }   display: block; font-size: 14px;color: green; position: absolute; padding: 5px 10px; border-radius: 2px; background-color: #fff; border: 1px solid black; top: -10px;right: 95px; width: auto; text-align: center; white-space: nowrap; } /*end of short combat info*/
 * 1) combat_status {
 * 1) combat_status p {
 * 1) combat_status:hover p {display: block;}

/* display decks and effects*/ .combatSimulator #deckHero, .combatSimulator #deckEnemy {height:155px;border:1px solid #ccc;}

.combatSimulator .propertyButtons_more {display:none;}

.combatSimulator ul    {list-style-type: none; margin: 5px 0px 0px 5px;padding:0px; } .combatSimulator ul li {display: inline-block; vertical-align: top; border:2px solid #ccc;margin:2px;border-radius:3px; background-color:#aaa3a3;}

.combatSimulator #hero ul li, .combatSimulator #enemy ul li {height:136px;} .combatSimulator #artifacts ul li {height:88px;}

display: block; width: 55px; font-size: 12px; line-height: 16px; text-align: center; background-color: transparent; margin: 0 auto; cursor: pointer; position: relative; }
 * 1) artifacts ul li .artifact-name {

border-bottom: 2px solid red; }
 * 1) artifacts ul li .artifact-name.selected {

content: "S"; display: block; position: absolute; bottom: 0px; color: red; background-color: #e0aaaa; padding: 1px; }
 * 1) artifacts ul li .artifact-name.selected::after {

.combatSimulator ul li .card {border-radius:3px;margin:2px; width: 80px;height: 80px;} .combatSimulator ul li .card .card_image {height: 80px;background-color: transparent;overflow: hidden;} .combatSimulator ul li .card.full_card .card_image { height:auto !important;} .combatSimulator ul li .card img {width:80px;display:block;border-radius:3px;} .combatSimulator ul li .params .modified {background-color:#940d20;color:#fff;} .combatSimulator ul li .params div { position: absolute;font-size:12px;line-height:16px;background-color:#36393c;color:#fff; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; padding: 0px 3px; cursor: pointer; } .combatSimulator #enemy ul li .params div {display:none;} .combatSimulator ul li .card .params .stars {top:0;left:0;} .combatSimulator ul li .card .params .level {right:0;} .combatSimulator ul li .card .params .stones {bottom:0;} .combatSimulator ul li .card .params .soulbind {bottom:0;right:0;}

/*adjust params*/ .decrease { font-size: 18px !important; font-weight: bold; top: 17px; left: 0px; width: 20px; text-align: center; cursor: pointer; display:none; } .increase { font-size: 18px !important; font-weight: bold; top: 17px; left: 20px; width: 20px; text-align: center; cursor: pointer; display:none; }

.params .adjust { border: none !important; background-color: transparent !important; width: 40px;height: 36px; } .params .level .adjust {top: 0px; right: -1px;} .params .stars .adjust {top: 0px; left: -1px;} .params .stones .adjust {bottom: 0px; left: -1px;} .params .soulbind .adjust {bottom: 0px; right: -1px;} .params .stones .decrease, .params .stones .increase {top: 2px;} .params .soulbind .decrease, .params .soulbind .increase {top: 2px;}

.params .adjust:hover .decrease, .params .adjust:hover .increase { display: block; }

.combatSimulator #heroProperties { background-color: #36393c; color: #fff; border: 1px solid #ccc; border-radius: 3px; padding: 2px 4px; cursor: pointer; box-sizing: border-box; }

.combatSimulator #heroProperties.modified { background-color: #940d20; color: #fff;} /*end adjust params*/

.combatSimulator ul li .artifact {display: block;border-radius:3px;margin:2px;width: 78px;height: 48px;border: 1px solid #210168;} .combatSimulator ul li .artifact img {width: 50px;margin: 0 15px;cursor: grab;} .combatSimulator ul li .artifact .params .stars {right:0;top:0;}

.combatSimulator ul li .effect {display: block;border-radius:3px;margin:2px;background-color: transparent;width: 78px;height: 48px;border: 1px solid #210168;background: url("https://static.miraheze.org/smutstonewiki/5/5f/Striped-retro-texture-background2.jpg");background-size: 50%;} .combatSimulator ul li .effect img {width: 50px;margin: 0 15px;}

.combatSimulator .no_art_eff { height: 10px; margin-top: 42px; border: 1px solid #ccc; width: 78px; margin-left: 2px; }

.combatSimulator #artifacts {display: none;} .combatSimulator #artifacts .artifact {width:52px;height:50px;} .combatSimulator #artifacts .artifact img {width: 50px;margin: 0 0;cursor: grab;} .combatSimulator #artifacts ul li .artifact p {top: 40px;} .combatSimulator #artifacts ul li span {   margin: 2px;}

/* minicard on artifacts on #artifacts*/ .combatSimulator #artifacts ul li .artifact .minicard {position: absolute;width: 25px;right: 0px;top: 28px;border-radius: 50%;border: 1px solid #000;} .combatSimulator #artifacts ul li .artifact .minicard img { width: 25px !important;}

.combatSimulator #enemyColors {display:inline-block;} .combatSimulator #enemyColors ul li {width:20px;height:20px;} .combatSimulator #deckEnemy {display:none;}

.combatSimulator .fire {background: linear-gradient(to right, #900808, #df3004, #690404);} .combatSimulator .earth {background: linear-gradient(to right, #309008, #a8ff7e, #19870a);} .combatSimulator .ice  {background: linear-gradient(to right, #085890, #7ef1ff, #1370ae);} .combatSimulator .water {background: linear-gradient(to right, #085890, #7ef1ff, #1370ae);} .combatSimulator .light {background: linear-gradient(to right, #fff9d2, #ffc, #e3dbba);} .combatSimulator .dark {background: linear-gradient(to right, #555, #ccc, #333);}

.dark-color {background-color: #10100F !important;color:#fff !important;} .dark-color td {background-color: #10100F !important;color:#fff !important;} .light-color {background-color: #E6DECF !important;}/*#CCCC00;*/ .red-color {background-color: #EBA6A6 !important;}/*#ef6363;#e88989;#EBA6A6;*/ .blue-color {background-color: #95BDF9 !important;}/*#95BDF9;#84A1F7;#A6A6EB;*/ .green-color {background-color: #5bdf87 !important;}/*#5bdf87;#8FDAB1;#A4CFB7;*/

.combatSimulator #enemy .desc { display: block; position: relative; margin:8px 35px; width: 400px;height:90px; padding: 10px; background: #eeeeee; color: #000000; border: 2px solid #1a1a1a; font-size: 10pt; }

/* best artifact distribution panel*/ .combatSimulator #bestArtifactPanel {height:120px;margin-top:-120px;margin-left:480px;} .combatSimulator #bestArtifactPanel button {display:block;width: 160px;margin-bottom: 2px;} .combatSimulator #progress {display: block; text-align: center; width: 135px; height: 20px;margin:10px;border:1px solid #ccc;}

/*===============================================================*/ /* css for P elements that show description on mouse hover*/ .combatSimulator ul li .card, .combatSimulator ul li .effect, .combatSimulator ul li .artifact {position:relative;}

.combatSimulator ul li .card:hover p, .combatSimulator ul li .effect:hover p, .combatSimulator ul li .artifact:hover p {display:block;}

.combatSimulator ul li .card p { display: none; color: black; position: absolute; top: -80px; left: 0px; min-width: 88%; z-index: 100; background-color: #fff; border:1px solid black; padding: 5px; border-radius: 2px; font-size: 12px; margin: 0px !important; line-height:16px; white-space: nowrap; }

.combatSimulator ul li .card p span {color:red;font-weight:bold;}

.combatSimulator #enemy ul li .card p {top:10px;}

.combatSimulator ul li .effect p, .combatSimulator ul li .artifact p { display: none; color: black; position: absolute; top: 35px; left: 40px; width: 250px; z-index: 100; background-color: #fff; border:1px solid black; padding: 5px; border-radius: 2px; font-size: 12px; margin: 0px !important; } .combatSimulator ul li:nth-child(5) .effect p, .combatSimulator ul li:nth-child(6) .effect p, .combatSimulator ul li:nth-child(7) .effect p, .combatSimulator ul li:nth-child(5n) .artifact p, .combatSimulator ul li:nth-child(10n+6) .artifact p, .combatSimulator ul li:nth-child(10n+7) .artifact p, .combatSimulator ul li:nth-child(10n+8) .artifact p, .combatSimulator ul li:nth-child(10n+9) .artifact p { left: -210px; }

.combatSimulator #artifacts ul li .artifact p span { white-space: nowrap; color: red; font-weight: bold; } /*==============================end section=================================*/

/*styles for combat sim extra-settings div*/ .combatSimulator .extra-settings input {margin-left: 0px;} .combatSimulator .extra-settings label {background-color: #b5e4fc;}

/*===guildTroops css for guild-war-table===*/ .guildTroops th { background-color: #bec3d3;; padding: 5px 10px; color: black; } .guildTroops td { padding: 5px; color: black; text-align: center; } .guildTroops td:first-child { font-weight: bold; }

element { } .strike { text-decoration-line: line-through; text-decoration-color: #bec3d3; text-decoration-thickness: 3px; }

/*===============================================================*/ /* Fix Miraheze's dark mode for the colors that must stay the same */ .client-darkmode .combatSimulator .fire, .client-darkmode .combatSimulator .earth, .client-darkmode .combatSimulator .ice, .client-darkmode .combatSimulator .water, .client-darkmode .combatSimulator .light, .client-darkmode .combatSimulator .dark { filter:invert(1) hue-rotate(180deg); -webkit-filter:invert(1) hue-rotate(180deg); }

.client-darkmode .combatSimulator .fire img, .client-darkmode .combatSimulator .earth img, .client-darkmode .combatSimulator .ice img, .client-darkmode .combatSimulator .water img, .client-darkmode .combatSimulator .light img, .client-darkmode .combatSimulator .dark img { filter:invert(0) hue-rotate(0deg); -webkit-filter:invert(0) hue-rotate(0deg); }

/* Neutralize dark mode on pages with tables */ .client-darkmode .light-color, .client-darkmode .dark-color, .client-darkmode .red-color, .client-darkmode .blue-color, .client-darkmode .green-color, .client-darkmode .no-color { filter:invert(1) hue-rotate(180deg); -webkit-filter:invert(1) hue-rotate(180deg); } .client-darkmode .light-color img, .client-darkmode .dark-color img, .client-darkmode .red-color img, .client-darkmode .blue-color img, .client-darkmode .green-color img, .client-darkmode .no-color img { filter:invert(0) hue-rotate(0deg)!important; -webkit-filter:invert(0) hue-rotate(0deg)!important; } /* End neutralize dark mode on pages with tables */

.combatSimulator ul li .params div { z-index:10; }/*fix parameters back on top of the image*/

.combatSimulator ul li .card:hover, .combatSimulator ul li .effect:hover , .combatSimulator ul li .artifact:hover  { z-index: 100; }/*fix p elements z-index*/

.client-darkmode .combatSimulator ul li .card:hover p, .client-darkmode .combatSimulator ul li .artifact:hover p { filter:invert(1) hue-rotate(180deg); -webkit-filter:invert(1) hue-rotate(180deg); } /*make p elements - white on black bg*/

/* end of fix Miraheze's dark mode*/ /*=================================end section==============================*/

/* Added by I like Serena in v2.29 */ /* Manage dark mode */ /* Dark theme is used by default */ div.combatSimulator, .combatSimulator div { background-color: #36393c; color: white; } .combatSimulator label { color: black; } .combatSimulator textarea, .combatSimulator select { background-color: black; color: white; } /* Restore defaults if Miraheze's dark theme is used */ .client-darkmode div.combatSimulator, .client-darkmode .combatSimulator div { background-color:initial; color:initial; } .client-darkmode .combatSimulator label { color:initial; } .client-darkmode .combatSimulator textarea, .client-darkmode .combatSimulator select { background-color:initial; color:initial; } /* end manage dark mode*/

/* Added by I like Serena in v2.72 */ .tabbuttons { overflow: hidden; border: 1px solid #ccc; background-color: #7781a7 !important; margin-bottom: 3px; }

.tabbuttons button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 6px 16px; transition: 0.3s; font-size: 17px; }

.tabbuttons button:hover { background-color: #ddd; }

.tabbuttons button.active { background-color: #ccc; border-radius: 10px; }

.tabcontent { display: none; /*padding: 6px 12px;*/ /*border: 1px solid #ccc;*/ /*border-top: none;*/ }

font-size: 11pt !important; } /*end combat simulator styles*/
 * 1) Tasks_List * {

/* Added by I like Serena in v2.82 */ /* New card tooltip style for MediaWiki:SmutstoneViewer.js */ .card-tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; }

.card-tooltip .card-tooltip-text { visibility: hidden; width: 450px;

background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px 3px; position: fixed; z-index: 1; top: 20%; left: calc(50% + 100px); opacity: 0; transition: opacity 0.3s; }

.card-tooltip .card-tooltip-text::after { content: "?"; position: absolute; top: 15px; left: 20px;

border-width: 2px; border-style: solid;

font-size: 16pt; color: red; border-radius: 50%; width: 24pt; height: 24pt; }

.card-tooltip:hover .card-tooltip-text { visibility: visible; opacity: 1; }