MediaWiki:Common.css: Difference between revisions

From TwentyOneWiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 17: Line 17:
   border-radius: 50%;
   border-radius: 50%;
   z-index: 1;
   z-index: 1;
}
.ring-chart27:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/images/a/a4/Circle_frame.svg.png') no-repeat center;
  background-size: contain;
  z-index: 3; /* ΠŸΠΎΠ²Π΅Ρ€Ρ… Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ */
}
}


Line 26: Line 38:
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
   z-index: 2;
   z-index: 2; /* Под ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ */
}
}


Line 33: Line 45:
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
   clip-path: polygon(50% 50%, 100% 0%, 100% 100%); /* ΠžΠ±Ρ€Π΅Π·ΠΊΠ° для создания Ρ‡Π΅Ρ‚Π²Π΅Ρ€Ρ‚ΠΈ ΠΊΡ€ΡƒΠ³Π° */
   clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
   transition: background 0.3s ease;
   transition: background 0.3s ease;
}
}

Revision as of 12:47, 11 October 2024

.ring-chart27 {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: white;
}

.ring-chart27:before {
  content: '';
  position: absolute;
  top: 25px;
  left: 25px;
  width: 150px;
  height: 150px;
  background-color: white;
  border-radius: 50%;
  z-index: 1;
}

.ring-chart27:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/images/a/a4/Circle_frame.svg.png') no-repeat center;
  background-size: contain;
  z-index: 3; /* ΠŸΠΎΠ²Π΅Ρ€Ρ… Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ */
}

.ring-chart27 ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2; /* Под ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ */
}

.ring-chart27 ul li {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
  transition: background 0.3s ease;
}

.ring-chart27 ul li:nth-child(1) {
  background-color: #4caf50;
  transform: rotate(0deg);
}

.ring-chart27 ul li:nth-child(1):hover {
  background-color: #66bb6a;
}

.ring-chart27 ul li:nth-child(2) {
  background-color: #ff9800;
  transform: rotate(90deg);
}

.ring-chart27 ul li:nth-child(2):hover {
  background-color: #ffb74d;
}

.ring-chart27 ul li:nth-child(3) {
  background-color: #2196f3;
  transform: rotate(180deg);
}

.ring-chart27 ul li:nth-child(3):hover {
  background-color: #64b5f6;
}

.ring-chart27 ul li:nth-child(4) {
  background-color: #f44336;
  transform: rotate(270deg);
}

.ring-chart27 ul li:nth-child(4):hover {
  background-color: #ef5350;
}












/* Π‘Ρ‚ΠΈΠ»ΠΈ для Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ "New pages" */
.new-pages-table {
    display: inline-block;
    margin-left: 7px;
    margin-right: 15px;
    float: left;
    border-radius: 10px 10px 0 0;
    width: 31%;
    height: 224px;
    background-color: #f9f9f9; /* ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° */
    border: 1px solid #C14424;
    margin-top: 10px; /* Π§Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Π»ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ пространства ΠΎΡ‚ сайдбара */
}

/* Π‘Ρ‚ΠΈΠ»ΠΈ для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ */
.new-pages-table th {
    width: 40%;
    background-color: #fff5ee; /* ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */
    border-radius: 10px 10px 0 0;
    border: 1px solid #C14424;
    text-align: center;
}

/* Π‘Ρ‚ΠΈΠ»ΠΈ для содСрТимого Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ */
.new-pages-table td {
    border: 1px solid #C14424;
    background-color: #f9f9f9; /* ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° */
    text-align: left;
    padding: 10px;
}





.container2 {
    width: 50vw; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° */
    height: 100vh; /* Высота ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° */
    overflow: hidden;
    position: relative;
    background-color: #fff; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° */
    display: flex;
    align-items: center;
    justify-content: center;
}

.gradient-text {
    font-size: 4rem; /* Π Π°Π·ΠΌΠ΅Ρ€ тСкста */
    font-weight: bold;
    background: linear-gradient(45deg, lightcoral 25%, lightblue 25%, lightblue 50%, lightcoral 50%, lightcoral 55%, lightblue 65%);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: waveAnimation 4s infinite linear;
}

@keyframes waveAnimation {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}













li.tooladd {
    position: relative;
    display: inline-block;
    cursor: pointer;
    vertical-align: top; /* Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ для выравнивания ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ */
}

li.tooladd .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -125%; /* ИзмСнСно Π½Π° top для появлСния свСрху */
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

li.tooladd:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}






       .container {
            position: relative;
            display: flex;
            align-items: center;
            width: 150px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° */
            height: 50px;
            left: 697px;
            top: -37px;
        }
        .stripe {
            width: 5px;
            height: 50%;
            background-color: #D02019;
        }
        .left-stripe {
            margin-right: 50px; /* РасстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ полосками ΠΈ Π»ΠΈΠ½ΠΈΠ΅ΠΉ */
        }
        .right-stripe {
            transform: rotate(20deg); /* НаклоняСм Π½Π° 20 градусов */
            margin-left: -35px; /* ПодвигаСм полоску Π½Π° 5px Π²Π»Π΅Π²ΠΎ */
        }
        .horizontal-line {
            position: absolute;
            width: 10px; /* Π¨ΠΈΡ€ΠΈΠ½Π° Π»ΠΈΠ½ΠΈΠΈ */
            height: 5px; /* Π’ΠΎΠ»Ρ‰ΠΈΠ½Π° Π»ΠΈΠ½ΠΈΠΈ */
            background-color: #D02019;
            top: 50%; /* Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠ΅ΠΌ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ ΠΏΠΎ сСрСдинС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° */
            left: calc(50% - 30px - 38px); /* ОбновляСм расчСт для выравнивания Π»ΠΈΠ½ΠΈΠΈ */
            transform: translateY(-50%); /* Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠ΅ΠΌ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ */
        }

.mail-icon { font-size: 48px; color: #000000; font-size: 96px; }

.custom-link-text2 a {
    color: inherit; /* БохраняСт Ρ†Π²Π΅Ρ‚ тСкста */
    text-decoration: none; /* Π£Π±ΠΈΡ€Π°Π΅Ρ‚ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ */
    color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.blinking-button {
    animation: blink 1s infinite;
    background-color: red;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}


@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}


.admin-chat-form {
    margin: 20px 0;
}

.admin-chat-form textarea {
    width: 100%;
    margin-bottom: 10px;
}

.admin-chat-form-buttons {
    text-align: right;
}

.site-button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
}

textarea {
    display: block;
    order: -1;
}

.c-item {
    order: 1;
}

#some-container {
    display: flex;
    flex-direction: column;
}


.newcombutton {
    display: inline-block;
    padding: 10px 10px;
    border: 2px solid #191919;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    background-color: #007bff; /* Default color */
    transition: transform 0.3s ease, background-color 0.3s ease;
    margin-right: 5px;
    word-wrap: break-word;
    word-break: break-word;
    transform-origin: left; /* ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»Π΅Π²ΠΎΠΉ стороны */
    color: inherit; /* БохраняСт Ρ†Π²Π΅Ρ‚ тСкста */
    text-decoration: none; /* Π£Π±ΠΈΡ€Π°Π΅Ρ‚ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
}

.newcombutton:hover {
    transform: scale(1.05); /* Slightly increase size */
    opacity: 1.1;
}




.butting-button {
    display: inline-block; /* Make sure the link is displayed as a button */
    background-color: red;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none; /* Remove underline from the link */
    transition: background-color 0.3s ease; /* Add a smooth transition for hover effect */
}

.butting-button:hover {
    background-color: darkred; /* Change color on hover for better UX */
}


.comment-item {
    background-color: #EFE9DE;
    border: 3px solid #84817B;
    padding: 10px; /* Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ отступы ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ */
    border-radius: 5px; /* ΠŸΡ€ΠΈ нСобходимости Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ скруглСниС ΡƒΠ³Π»ΠΎΠ² */
    list-style: none;
    padding-left: 20px;
    width: 42%;
    transform-origin: left;
}

.comment-item comments {
    padding-left: 50px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва для содСрТимого */
}

.comment-item2 {
    background-color: #E2DDD3;
    border: 3px solid #84817B;
    padding: 10px; /* Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ отступы ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ */
    border-radius: 5px; /* ΠŸΡ€ΠΈ нСобходимости Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ скруглСниС ΡƒΠ³Π»ΠΎΠ² */
    list-style: none;
    width: 42%; /* ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ */
    box-sizing: border-box; /* Π’ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ padding ΠΈ border Π² расчСт ΡˆΠΈΡ€ΠΈΠ½Ρ‹ */
    overflow: hidden; /* Π‘ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ содСрТимоС, выходящСС Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ элСмСнта */
    white-space: normal; /* Π Π°Π·Ρ€Π΅ΡˆΠ°Π΅Ρ‚ пСрСнос тСкста Π½Π° Π½ΠΎΠ²ΡƒΡŽ строку */
}

.comment-item2 comments {
    padding-left: 50px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва для содСрТимого */
    max-width: 100%; /* Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ содСрТимоС Π½Π΅ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ Π³Ρ€Π°Π½ΠΈΡ† */
    box-sizing: border-box; /* Π’ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ padding ΠΈ border Π² расчСт ΡˆΠΈΡ€ΠΈΠ½Ρ‹ */
    overflow: hidden; /* Π‘ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ содСрТимоС, выходящСС Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ элСмСнта */
    white-space: normal; /* Π Π°Π·Ρ€Π΅ΡˆΠ°Π΅Ρ‚ пСрСнос тСкста Π½Π° Π½ΠΎΠ²ΡƒΡŽ строку */
}




.comment-item-second {
    background-color: #EFE9DE;
    border: 3px solid #84817B;
    padding: 10px; /* Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ отступы ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ */
    border-radius: 5px; /* ΠŸΡ€ΠΈ нСобходимости Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ скруглСниС ΡƒΠ³Π»ΠΎΠ² */
    list-style: none;
    padding-left: 20px;
    width: 50%;
    transform-origin: right;
    float:right;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.comment-item-second comments {
    padding-left: 50px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва для содСрТимого */
}






.map-item {
    background-color: white;
    border: 2px solid red;
    padding: 10px;
    margin: 10px;
    list-style: none; /* Π£Π±ΠΈΡ€Π°Π΅Ρ‚ стандартныС ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ списка */
    text-align: center; /* Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ содСрТимоС ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 900px; /* Π—Π°Π΄Π°ΠΉΡ‚Π΅ Π½ΡƒΠΆΠ½ΡƒΡŽ высоту */
    overflow: hidden; /* Π‘ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ выходящСС Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ содСрТимоС */
    position: relative;
}



/* Π—Π°ΠΌΠ΅Π½ΠΈΡ‚Π΅ .custom-link-text Π½Π° класс ΠΈΠ»ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ вашСго элСмСнта */
.custom-link-text a {
    color: inherit; /* БохраняСт Ρ†Π²Π΅Ρ‚ тСкста */
    text-decoration: none; /* Π£Π±ΠΈΡ€Π°Π΅Ρ‚ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ */
}


.red-background {
  background-color: #D02019;
}

.twentyonewikilogo {
    font-family: 'MyCustomFont1';
    font-size: 100px;
    color: #D02019;
    cursor: pointer; /* Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ элСмСнт ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΉ */
    line-height: 1; /* УстанавливаСм высоту строки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ отступы */
}



.interactchoise {
    font-family: 'MyCustomFont1';
    font-size: 40px;
    color: #D02019;
    line-height: 1; /* УстанавливаСм высоту строки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ отступы */
    margin-top: 10px;
}

.interactchoise:hover {
    color: #E5241D;
}

.choise {
    font-family: 'MyCustomFont1';
    font-size: 30px;
    color: #D02019;
    line-height: 1; /* УстанавливаСм высоту строки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ отступы */
    margin-top: 10px;
}

.choise:hover {
    color: #E5241D;
}

.pie-chart11 {
    list-style: none;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    margin: 0;
    padding: 0;
}

.pie-chart11 .segment {
    width: 50%;
    height: 50%;
    background-color: var(--color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0% 100%;
    transform: rotate(var(--rotate)) translateY(-100%);
    transition: transform 0.3s ease;
}

.pie-chart11 .segment:hover {
    transform: rotate(var(--rotate)) translateY(-120%);
}

.list-item {
    list-style-type: none;
    width: 100%; /* Π¨ΠΈΡ€ΠΈΠ½Π° 100% Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта */
    text-align: center;
    padding: 20px;
    box-sizing: border-box; /* Π£Ρ‡ΠΈΡ‚Ρ‹Π²Π°Π΅Ρ‚ отступы Π² ΠΎΠ±Ρ‰Π΅ΠΉ ΡˆΠΈΡ€ΠΈΠ½Π΅ */
}

.list-item span {
    display: inline-block;
    color: black;
    background: url(/images/1/1e/Clancy_Gif_Intro.gif) no-repeat center;
    background-size: contain; /* БохраняСт ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ изобраТСния */
    padding: 20px;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

    .custom-li {
        list-style-type: none; /* Π£Π±ΠΈΡ€Π°Π΅ΠΌ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ Ρƒ списка */
        width: 850px; /* Π¨ΠΈΡ€ΠΈΠ½Π° элСмСнта, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ */
        height: 850px; /* Высота элСмСнта, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ */
        background-image: url('/images/3/37/Is-ΓΈ-lat-ed2.png');
        background-size: contain; /* Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒΡΡ */
        background-repeat: no-repeat; /* Π£Π±ΠΈΡ€Π°Π΅ΠΌ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ изобраТСния */
        background-position: center; /* Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠ΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ */
        margin: 10px;
        display: flex;
        flex-direction: column; /* НаправлСниС содСрТимого ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ */
        align-items: center; /* Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠ΅ΠΌ тСкст ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */
        justify-content: flex-start; /* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅ΠΌ тСкст ΠΏΠΎ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ ΠΊΡ€Π°ΡŽ элСмСнта */
        text-align: center; /* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта */
        color: #000; /* Π¦Π²Π΅Ρ‚ тСкста, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎ ТСланию */
        font-family: Arial, sans-serif; /* Π¨Ρ€ΠΈΡ„Ρ‚ тСкста, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎ ТСланию */
        font-size: 14px; /* Π Π°Π·ΠΌΠ΅Ρ€ тСкста, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎ ТСланию */
        padding: 60px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ отступ Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта, Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкст Π½Π΅ ΠΏΡ€ΠΈΠΌΡ‹ΠΊΠ°Π» ΠΊ краям */
        box-sizing: border-box; /* Π’ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ отступы ΠΈ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π² ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту элСмСнта */
    }




@keyframes randomMovement {
    0% {
        top: 0;
        left: 0;
    }
    25% {
        top: 100px;
        left: 200px;
    }
    50% {
        top: 200px;
        left: 100px;
    }
    75% {
        top: 100px;
        left: 300px;
    }
    100% {
        top: 0;
        left: 0;
    }
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.moving-li {
    background-color: #D02019;
    color: white;
    border: 2px solid #722215;
    font-size: 30px;
    padding: 10px 20px;
    position: absolute;
    border-radius: 5px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-family: 'MyCustomFont1', sans-serif;
    animation: randomMovement 12s infinite ease-in-out; /* ПлавноС двиТСниС */
}

.moving-li:hover {
    filter: brightness(1.2);
}

.table-with-spacing {
    border-spacing: 10px;
}


  .pie-chart {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background-image: conic-gradient(
      #49C2DB 0% 50%,  /* 50% Π³ΠΎΠ»ΡƒΠ±ΠΎΠ³ΠΎ */
      #A2C063 50% 90%, /* 40% Π·Π΅Π»Ρ‘Π½ΠΎΠ³ΠΎ */
      #636363 90% 100% /* 10% сСрого */
    );
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .pie-chart li {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    clip-path: polygon(50% 50%, 100% 0, 100% 100%);
  }

  .pie-chart li a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    text-indent: -9999px; /* Π‘ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ тСкст */
  }

  .pie-chart li:hover {
    opacity: 0.8;
  }

  .pie-chart .segment-1 {
    transform: rotate(0deg);
  }

  .pie-chart .segment-2 {
    transform: rotate(180deg);
  }

  .pie-chart .segment-3 {
    transform: rotate(324deg);
  }

  .pie-chart .center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    height: 220px;
    background-color: var(--setlist-bg-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }


.hole {
  position: absolute;
  width: 100px; /* Π”ΠΈΠ°ΠΌΠ΅Ρ‚Ρ€ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ ΠΊΡ€ΡƒΠ³Π° */
  height: 100px; /* Π”ΠΈΠ°ΠΌΠ΅Ρ‚Ρ€ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ ΠΊΡ€ΡƒΠ³Π° */
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white; /* Π¦Π²Π΅Ρ‚ Π΄Ρ‹Ρ€ΠΊΠΈ (Ρ„ΠΎΠ½ страницы) */
  border-radius: 50%; /* Π”Π΅Π»Π°Π΅Ρ‚ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ ΠΊΡ€ΡƒΠ³ */
}

.circular-chart {
    position: relative;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    list-style: none;
    margin: 0;
    padding: 0;
    clip-path: circle(50%);
}

.circular-chart::before, 
.circular-chart::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    pointer-events: none; /* Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ сами псСвдоэлСмСнты "ΠΏΡ€ΠΎΠ½ΠΈΡ†Π°Π΅ΠΌΡ‹ΠΌΠΈ" для ΠΊΠ»ΠΈΠΊΠΎΠ² */
}

.circular-chart {
    background: conic-gradient(
        #49c2db 0deg 100deg,
        #a2c063 100deg 360deg, 
    );
}

.circular-chart:hover::before {
    background: conic-gradient(
        #6ae1ff 0deg 100deg, /* НСмного освСтлСнный Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ */
        #a2c063 100deg 360deg,
    );
}

.circular-chart:hover::after {
    background: conic-gradient(
        #49c2db 0deg 100deg,
        #bbd47d 100deg 252deg, /* НСмного освСтлСнный Π·Π΅Π»Π΅Π½Ρ‹ΠΉ */
        #636363 252deg 334deg,
        #32cd32 324deg 360deg /* Π›Π°ΠΉΠΌ Π³Ρ€ΠΈΠ½ вмСсто Π·Π΅Π»Π΅Π½ΠΎΠ³ΠΎ */
    );
}

/* Настройка ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ сСктора */
.circular-chart::before {
    background: conic-gradient(
        #49c2db 0deg 100deg, /* Π“ΠΎΠ»ΡƒΠ±ΠΎΠΉ сСктор */
        transparent 100deg 360deg
    );
}

.circular-chart:hover::before {
    background: conic-gradient(
        #6ae1ff 0deg 100deg, /* Π‘Π²Π΅Ρ‚Π»ΠΎ-Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ сСктор */
        transparent 100deg 360deg
    );
}

.circular-chart::after {
    background: conic-gradient(
        transparent 0deg 100deg,
        #a2c063 100deg 252deg, /* Π—Π΅Π»Π΅Π½Ρ‹ΠΉ сСктор */
        transparent 252deg 360deg
    );
}

.circular-chart:hover::after {
    background: conic-gradient(
        transparent 0deg 100deg,
        #bbd47d 100deg 252deg, /* Π‘Π²Π΅Ρ‚Π»ΠΎ-Π·Π΅Π»Π΅Π½Ρ‹ΠΉ сСктор */
        transparent 252deg 360deg
    );
}



li.ring {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 40px solid #a2c063; /* Π¦Π²Π΅Ρ‚ ΠΊΠΎΠ»ΡŒΡ†Π° ΠΈ Π΅Π³ΠΎ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Π° */
    box-sizing: border-box;
    background-color: transparent; /* Π€ΠΎΠ½ ΠΊΠΎΠ»ΡŒΡ†Π° */
    list-style-type: none; /* Π£Π±ΠΈΡ€Π°Π΅Ρ‚ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ списка */
    position: relative;
    margin: 10px;
    padding: 0; /* Π£Π±ΠΈΡ€Π°Π΅Ρ‚ отступы */
}

li.ring::before {
    content: '';
    position: absolute;
    width: 160px; /* Π Π°Π·ΠΌΠ΅Ρ€ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ ΠΊΡ€ΡƒΠ³Π° */
    height: 160px;
    background-color: transparent; /* Π¦Π²Π΅Ρ‚ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ ΠΊΡ€ΡƒΠ³Π° (ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ) */
    border-radius: 50%;
    list-style-type: none; /* Π£Π±ΠΈΡ€Π°Π΅Ρ‚ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ списка */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



li.circle {
    width: 250px;
    height: 250px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    list-style-type: none;
    margin: 10px;
}

li.circle::before,
li.circle::after,
li.circle div {
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

li.circle::before {
    background-color: #FF6347; /* ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ */
    top: 0;
    left: 0;
    border-top-left-radius: 50%;
}

li.circle::after {
    background-color: #4682B4; /* Π’Ρ‚ΠΎΡ€ΠΎΠΉ Ρ†Π²Π΅Ρ‚ */
    top: 0;
    right: 0;
    border-top-right-radius: 50%;
}

li.circle div.top-right {
    background-color: #3CB371; /* Π’Ρ€Π΅Ρ‚ΠΈΠΉ Ρ†Π²Π΅Ρ‚ */
    bottom: 0;
    right: 0;
    border-bottom-right-radius: 50%;
}

li.circle div.bottom-left {
    background-color: #FFD700; /* Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ */
    bottom: 0;
    left: 0;
    border-bottom-left-radius: 50%;
}

/* Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
li.circle::before:hover {
    background-color: #FF7F50; /* ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ - Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ярчС */
}

li.circle::after:hover {
    background-color: #5A9BD3; /* Π’Ρ‚ΠΎΡ€ΠΎΠΉ Ρ†Π²Π΅Ρ‚ - Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ярчС */
}

li.circle div.top-right:hover {
    background-color: #4FD39E; /* Π’Ρ€Π΅Ρ‚ΠΈΠΉ Ρ†Π²Π΅Ρ‚ - Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ярчС */
}

li.circle div.bottom-left:hover {
    background-color: #FFEB3B; /* Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ - Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ярчС */
}




/* Circular Table Styling */
.circular-table {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
  margin: auto;
}

.circular-table a {
  position: absolute;
  width: 100%;
  height: 100%;
}

.circular-table div {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 50%, 0 100%, 100% 100%);
  transform-origin: center;
  transition: background-color 0.6s ease, filter 0.6s ease;
}

.circular-table div:hover {
  filter: brightness(1.2);
  opacity: 1;
}




.table-photos {
    width: 53%;
    border: none; /* Hidden border */
    height: 315px;
}

.transparent-cell {
    background-color: transparent;
    width: 20px;
}

.centered-text-cell {
    background-color: transparent;
    color: #000;
    text-align: center;
    vertical-align: middle; /* To vertically center the text */
}

.centered-photo-cell {
    background-color: #D02019;
    text-align: center;
    vertical-align: middle; /* To vertically center the image */
}

.centered-photo-cell img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* Для Ρ„ΠΎΡ‚ΠΎ */


.custom-table .cell-photo { background-color: trasparent; }

.custom-table .cell-photos { background-color: #D02019; }

.custom-table .cell-photo-caption { background-color: trasparent; text-align:center; border:hidden; font-size:100%; }

tooltip-wrapper {
    position: relative;
    display: inline-block; /* Ensure it fits the content */
}

.underline-hover {
    position: relative;
    text-decoration: none;
    transition: text-decoration 0.3s ease-in-out;
    cursor: pointer; /* Change the cursor to indicate clickable text */
    outline: none; /* Remove the outline when focused */
}

.underline-hover:hover,
.underline-hover:focus {
    text-decoration: underline;
}

/* Tooltip container */
.tooltip-text {
    visibility: hidden;
    background-color: #918f8f;
    color: #000;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;

    /* Positioning and size */
    position: absolute;
    z-index: 100; /* Ensure it's on top of all objects */
    top: 70%; /* Center vertically relative to the text */
    left: 50%; /* Center horizontally relative to the text */
    transform: translate(-50%, 25%); /* Center the tooltip */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    width: 200px; /* Allow width to adjust based on content */
    word-wrap: break-word; /* Break long words to fit within the width */
    white-space: normal; /* Allow text to wrap within the tooltip */
}

/* Show the tooltip text when the wrapper is focused */
.tooltip-wrapper:focus-within .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Hide the tooltip text when the wrapper loses focus */
.tooltip-wrapper:focus:not(:focus-visible) .tooltip-text {
    visibility: hidden;
    opacity: 0;
}



/* Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ снизу Π²Π²Π΅Ρ€Ρ… для всСх строк Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ */

.lyric-outside-table {
    z-index: 8; /* Ensure it's on top of all objects */
    border-collapse: collapse;
    border: 3px solid #CC1E1E; /* Π’Π½Π΅ΡˆΠ½ΡΡ Π³Ρ€Π°Π½ΠΈΡ†Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ */
    position: relative;
    margin-top: 10px;
}

.lyric-outside-table th,
.lyric-outside-table td {
    border: none; /* Π£Π±Ρ€Π°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ */
}

.lyric-outside-table tr {
    background-color: #1E1E1E;
}

.lyric-outside-table th {
    background-color: #CC1E1E; /* ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */
    color: white; /* Π‘Π΅Π»Ρ‹ΠΉ тСкст Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° для контраста */
}

.lyric-table tr {
    background-image: 
        url('/images/8/8d/Clancy_-_Border_%281%29.png'), /* Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ слСва */
        url('/images/8/8d/Clancy_-_Border_%281%29.png'), /* Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ справа */
        linear-gradient(to top, rgba(24, 24, 24, 0.5) 10%, rgba(60, 60, 60, 0.5) 90%); /* ΠŸΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ */
    background-position: 10px center, calc(100% - 10px) center, center center; /* ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с фиксированным отступом */
    background-repeat: repeat-y, repeat-y, no-repeat; /* ΠŸΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ */
    background-size: 23.85px auto, 23.85px auto, cover; /* Ѐиксированный Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ */
    background-blend-mode: overlay; /* БмСшиваниС Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ */
    filter: brightness(1); /* Π£Π²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ яркости изобраТСния */
}

.lyric-table th,
.lyric-table td {
    padding: 10px;
    text-align: center; /* Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ тСкст ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ */
    vertical-align: middle; /* Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ тСкст ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ */
    border: none;
    color: #CC1E1E;
    font-family: 'MyCustomFont3', sans-serif;
    padding-left: 54px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ свСрху */
    padding-right: 54px;
    border-collapse: collapse; /* Π£Π±ΠΈΡ€Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ Π³Ρ€Π°Π½ΠΈΡ†Π°ΠΌΠΈ ячССк */
}

/* Π‘Ρ‚ΠΈΠ»ΡŒ для ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ ячСйки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ */
.lyric-cell {
    background-color: rgba(60, 60, 60, 0.5);
    background-image: 
        url('/images/6/63/Clancy_-_Border.png'); /* Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° */
    background-position: center center; /* ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ изобраТСния */
    background-repeat: repeat-x; /* ΠŸΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ изобраТСния */
    background-size: auto 250%; /* Π Π°Π·ΠΌΠ΅Ρ€ изобраТСния */
    background-size: contain; /* Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ Π΄ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ячСйки */
    padding-left: 50px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ тСкста ΠΎΡ‚ Π»Π΅Π²ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ */
    padding-right: 50px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ тСкста ΠΎΡ‚ ΠΏΡ€Π°Π²ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ */
    width: auto; /* Π¨ΠΈΡ€ΠΈΠ½Π° ячСйки зависит ΠΎΡ‚ содСрТимого ΠΈ изобраТСния */
    height: auto; /* Высота ячСйки зависит ΠΎΡ‚ содСрТимого ΠΈ изобраТСния */
    min-width: 500px; /* Минимальная ΡˆΠΈΡ€ΠΈΠ½Π°, Ссли Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ */
    min-height: 500px; /* Минимальная высота, Ссли Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ */
}

.container {
    overflow: visible; /* Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ содСрТимоС Π½Π΅ скрываСтся */
}

/* Основной ΡΡ‚ΠΈΠ»ΡŒ для Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ·Π°Π΄ΠΈ */
.table-with-background {
    position: relative;
    width: 68%;
    display: grid;
    margin-left: 0; /* Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ здСсь ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ */
    border-radius: 10px 10px 0px 0px;
    height: 224px;
    float: left;
    background-color: #fff; /* Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Ρ„ΠΎΠ½ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈΠΌΠ΅Π΅Ρ‚ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ */
    pointer-events: none;
}

.table-with-background::before {
    content: '';
    background-image: url('/images/9/99/Clancy_Tyler.png'); /* Π—Π°ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π½Π° ΠΏΡƒΡ‚ΡŒ ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ */
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    display: block;
    top: -322px; /* Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ изобраТСния Π²Π²Π΅Ρ€Ρ… */
    left: 60px; /* Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ изобраТСния Π²Π»Π΅Π²ΠΎ */
    width: calc(100% + 100px); /* Π¨ΠΈΡ€ΠΈΠ½Π° изобраТСния большС, Ρ‡Π΅ΠΌ ΡˆΠΈΡ€ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ */
    height: calc(100% + 100px); /* Высота изобраТСния большС, Ρ‡Π΅ΠΌ высота Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ */
    opacity: 1; /* Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ Ρ€Π°Π²Π½Π° 1 (100%) */
    position: absolute; /* ΠΈΠ»ΠΈ fixed, Π² зависимости ΠΎΡ‚ структуры */
    z-index: -10; /* Π€ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ ΠΏΠΎΠ΄ тСкстом */
    pointer-events: none; /* Клики Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ сквозь этот элСмСнт */
}

/* Основной ΡΡ‚ΠΈΠ»ΡŒ для Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ·Π°Π΄ΠΈ */
.table-with-background2 {
    position: relative;
    width: 68%;
    display: grid;
    margin-left: 0; /* Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ здСсь ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ */
    border-radius: 10px 10px 0px 0px;
    height: 224px;
    float: left;
    background-color: #fff; /* Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Ρ„ΠΎΠ½ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈΠΌΠ΅Π΅Ρ‚ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ */
}

.table-with-background2::before {
    content: '';
    background-image: url('/images/6/6f/Josh_Torch.png'); /* Π—Π°ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π½Π° ΠΏΡƒΡ‚ΡŒ ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ */
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    top: -404px; /* Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ изобраТСния Π²Π²Π΅Ρ€Ρ… */
    right: 70px; /* Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ изобраТСния Π²Π»Π΅Π²ΠΎ */
    width: calc(42%); /* Π¨ΠΈΡ€ΠΈΠ½Π° изобраТСния большС, Ρ‡Π΅ΠΌ ΡˆΠΈΡ€ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ */
    height: calc(42%); /* Высота изобраТСния большС, Ρ‡Π΅ΠΌ высота Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ */
    opacity: 1; /* Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ Ρ€Π°Π²Π½Π° 1 (100%) */
    z-index: -10; /* Π€ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ ΠΏΠΎΠ΄ тСкстом */
    pointer-events: none; /* Клики Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ сквозь этот элСмСнт */
}

/* Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² ячСйкС ΠΏΠΎΠ²Π΅Ρ€Ρ… изобраТСния */
.table-image-cell > * {
    position: relative;
    color: white; /* Π¦Π²Π΅Ρ‚ тСкста, Ссли Π½ΡƒΠΆΠ΅Π½ */
    text-align: center; /* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста */
    padding: 10px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */
}


/* ΠŸΡ€ΠΈΠΌΠ΅Ρ€ CSS для свСтлой Ρ‚Π΅ΠΌΡ‹ */
.theme-light {
    --background-color: #f1f1f1;
    --header-background-color: #ffffff;
    --content-background-color: #ffffff;
}

.theme-light .clancy-image {
    background-image: url('/images/6/6f/Josh_Torch.png');
    /* ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΊΠΎΠ΄ для clancy-image */
}

/* ΠŸΡ€ΠΈΠΌΠ΅Ρ€ CSS для Ρ‚Π΅ΠΌΠ½ΠΎΠΉ Ρ‚Π΅ΠΌΡ‹ */
.theme-dark {
    --background-color: #2c2c2c;
    --header-background-color: #1c1c1c;
    --content-background-color: #1c1c1c;
}

.theme-dark .clancy-image {
    background-image: url('/images/9/99/Clancy_Tyler.png');
    /* ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΊΠΎΠ΄ для clancy-image */
}


/* Π‘Ρ‚ΠΈΠ»ΡŒ для элСмСнтов списка с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ */

.theme-toggle-button {
    background-color: #007BFF; /* Π‘ΠΈΠ½ΠΈΠΉ Ρ„ΠΎΠ½ ΠΊΠ½ΠΎΠΏΠΊΠΈ */
    color: white; /* Π‘Π΅Π»Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ тСкста */
    border: 2px solid #0056b3; /* Биняя Π³Ρ€Π°Π½ΠΈΡ†Π° */
    border-radius: 5px; /* Π—Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅ ΡƒΠ³Π»Ρ‹ */
    padding: 10px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ */
    cursor: pointer; /* Π£ΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
    transition: background-color 0.3s ease, color 0.3s ease; /* ΠŸΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ„ΠΎΠ½Π° ΠΈ Ρ†Π²Π΅Ρ‚Π° */
}

.theme-toggle-button:hover {
    background-color: #0056b3; /* Π’Π΅ΠΌΠ½ΠΎ-синий Ρ„ΠΎΠ½ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
    color: #fff; /* Π‘Π΅Π»Ρ‹ΠΉ тСкст ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
}


body #p-personal li#p-themes {
    border-right: 1px solid #333;
    padding: 0 .5em;
    margin-right: 0;
    position: relative;
    list-style: none;
    background: transparent;
    border: transparent;
    font-family: 'MyCustomFont2', sans-serif;
}

.vector-menu-dropdown .vector-menu-content {
    background-color: #007BFF; /* УстанавливаСт синий Ρ„ΠΎΠ½ */
    border-radius: 4px; /* ЗакругляСт ΡƒΠ³Π»Ρ‹ для Π±ΠΎΠ»Π΅Π΅ приятного Π²ΠΈΠ΄Π° */
    color: black; /* Π˜Π·ΠΌΠ΅Π½ΡΠ΅Ρ‚ Ρ†Π²Π΅Ρ‚ тСкста Π½Π° Π±Π΅Π»Ρ‹ΠΉ для Π»ΡƒΡ‡ΡˆΠ΅ΠΉ Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ */
}

.vector-menu-dropdown .vector-menu-content:hover {
    background-color: #0056b3; /* Π˜Π·ΠΌΠ΅Π½ΡΠ΅Ρ‚ Ρ„ΠΎΠ½ Π½Π° Π±ΠΎΠ»Π΅Π΅ Ρ‚Ρ‘ΠΌΠ½ΠΎ-синий ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
    transition: background-color 0.3s ease; /* ДобавляСт ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ для измСнСния Ρ„ΠΎΠ½Π° */
}


.vector-menu-dropdown .mw-list-item a {
    cursor: pointer;
}

body #p-personal li#p-themes ul {
    flex-direction: column;
    padding: 0.5em 0.3em 0.4em;
    align-items: flex-start;
    gap: 0.25em;
    height: 145px;
}

body #p-personal li#p-themes ul li a {
    padding: 0.25em 0.5em;
    text-decoration: none;
    margin-left: -10px;
    text-align: center;
    font-size: 15px;
    color: red; /* Π—Π°Π΄Π°Π΅Ρ‚ красный Ρ†Π²Π΅Ρ‚ ΠΈΠΊΠΎΠ½ΠΎΠΊ */
    background: transparent;
    transition: color 0.3s ease, text-shadow 0.3s ease; /* ДобавляСт ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ для Ρ†Π²Π΅Ρ‚Π° ΠΈ Ρ‚Π΅Π½ΠΈ */
}

body #p-personal li#p-themes ul li a:hover {
    color: #ff3333; /* Π˜Π·ΠΌΠ΅Π½ΡΠ΅Ρ‚ Ρ†Π²Π΅Ρ‚ Π½Π° Π±ΠΎΠ»Π΅Π΅ свСтлый красный ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.7); /* ДобавляСт подсвСтку ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
}



.vector-user-menu-legacy .vector-menu-content-list {
    display: flex;
    flex-grow: 1;
    align-items: baseline;
    flex-direction: row;
    justify-content: space-between;
}

#corner-table {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background-color: white;
    border: 1px solid #a2a9b1;
}



.wikitable img {
    border: none;
}


li.explore-adaptive-item {
    background-color: #EFE9DE; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */
    border: 2px solid #999; /* Π¦Π²Π΅Ρ‚ ΠΈ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Π° Ρ€Π°ΠΌΠΊΠΈ */
    border-radius: 12px; /* Π—Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅ ΡƒΠ³Π»Ρ‹ */
    padding: 15px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы */
    margin-bottom: 1px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами списка *//
    list-style-type: none; /* Π£Π±ΠΈΡ€Π°Π΅ΠΌ стандартныС ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ списка */
    display: inline-block; /* Для ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π΄ΠΎ содСрТимого */
    min-width: 150px; /* Минимальная ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
    min-height: 50px; /* Минимальная высота элСмСнта */
    max-width: 100%; /* Максимальная ΡˆΠΈΡ€ΠΈΠ½Π° Π΄ΠΎ 100% ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° */
    word-wrap: break-word; /* ΠŸΠ΅Ρ€Π΅Π½ΠΎΡ Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… слов Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ строку */
    box-sizing: border-box; /* Π£Ρ‡ΠΈΡ‚Ρ‹Π²Π°Π΅ΠΌ Ρ€Π°ΠΌΠΊΡƒ ΠΈ отступы Π² Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… */
    position: relative; /* Для позиционирования псСвдоэлСмСнта */
    transition: background-color 0.4s ease, color 0.4s ease; /* ΠŸΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ для Ρ„ΠΎΠ½Π° ΠΈ Ρ†Π²Π΅Ρ‚Π° тСкста */
}

li.explore-adaptive-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/1/1e/Clancy_Gif_Intro.gif'); /* Π—Π°ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π½Π° ΠΏΡƒΡ‚ΡŒ ΠΊ вашСй ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ */
    background-size: cover; /* ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΡ€Ρ‹Π²Π°Π»Π° вСсь элСмСнт */
    background-repeat: no-repeat; /* ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ */
    background-position: center; /* Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠ΅ΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ */
    opacity: 0; /* ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ скрыта */
    transition: opacity 0.4s ease; /* ΠŸΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ для появлСния ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ */
    border-radius: 10px; /* Π—Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅ ΡƒΠ³Π»Ρ‹ для ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ */
    z-index: 0; /* Π Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ·Π°Π΄ΠΈ тСкста */
}

li.explore-adaptive-item:hover {
    background-color: transparent; /* Π£Π±ΠΈΡ€Π°Π΅ΠΌ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
    border-color: transparent; /* Π£Π±ΠΈΡ€Π°Π΅ΠΌ Ρ†Π²Π΅Ρ‚ Ρ€Π°ΠΌΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
    color: #FDE51F; /* Π¦Π²Π΅Ρ‚ тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
    text-shadow: 0px 0px 7px rgba(0, 0, 0, 2.5);
    border: 2px solid #862520; /* Π¦Π²Π΅Ρ‚ ΠΈ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Π° Ρ€Π°ΠΌΠΊΠΈ */
}

li.explore-adaptive-item:hover::before {
    opacity: 1; /* ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° становится ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
}

/* УбСдимся, Ρ‡Ρ‚ΠΎ тСкст Π½Π΅ мСняСт Π΄Ρ€ΡƒΠ³ΠΈΡ… стилСй ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
li.explore-adaptive-item:hover * {
    position: relative;
    z-index: 1; /* ВСкст размСщаСтся ΠΏΠΎΠ²Π΅Ρ€Ρ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ */
    color: inherit; /* БохраняСм Ρ†Π²Π΅Ρ‚ тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
    text-decoration: none; /* Π£Π±ΠΈΡ€Π°Π΅ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ подчСркивания */
}


/* УбСдимся, Ρ‡Ρ‚ΠΎ тСкст Π½Π΅ мСняСт Π΄Ρ€ΡƒΠ³ΠΈΡ… стилСй ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
li.explore-adaptive-item:hover * {
    position: relative;
    z-index: 1; /* ВСкст размСщаСтся ΠΏΠΎΠ²Π΅Ρ€Ρ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ */
    color: inherit; /* БохраняСм Ρ†Π²Π΅Ρ‚ тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
    text-decoration: none; /* Π£Π±ΠΈΡ€Π°Π΅ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ подчСркивания */
}


/* УбСдимся, Ρ‡Ρ‚ΠΎ тСкст Π½Π΅ мСняСт Π΄Ρ€ΡƒΠ³ΠΈΡ… стилСй ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
li.explore-adaptive-item:hover * {
    color: inherit; /* БохраняСм Ρ†Π²Π΅Ρ‚ тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
    text-decoration: none; /* Π£Π±ΠΈΡ€Π°Π΅ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ подчСркивания */
}


li.custom2-adaptive-item {
    background-color: #EFE9DE; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */
    border: 2px solid #999; /* Π¦Π²Π΅Ρ‚ ΠΈ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Π° Ρ€Π°ΠΌΠΊΠΈ */
    border-radius: 10px; /* Π—Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅ ΡƒΠ³Π»Ρ‹ */
    padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы */
    margin-bottom: 10px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами списка */
    list-style-type: none; /* Π£Π±ΠΈΡ€Π°Π΅ΠΌ стандартныС ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ списка */
    display: inline-block; /* Для ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π΄ΠΎ содСрТимого */
    min-width: 150px; /* Минимальная ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
    min-height: 50px; /* Минимальная высота элСмСнта */
    max-width: 100%; /* Максимальная ΡˆΠΈΡ€ΠΈΠ½Π° Π΄ΠΎ 100% ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° */
    word-wrap: break-word; /* ΠŸΠ΅Ρ€Π΅Π½ΠΎΡ Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… слов Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ строку */
    box-sizing: border-box; /* Π£Ρ‡ΠΈΡ‚Ρ‹Π²Π°Π΅ΠΌ Ρ€Π°ΠΌΠΊΡƒ ΠΈ отступы Π² Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… */
    position: relative; /* НСобходим для позиционирования псСвдоэлСмСнта */
}

/* Π‘Ρ‚ΠΈΠ»ΡŒ для ссылки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½Π° Π·Π°Π½ΠΈΠΌΠ°Π»Π° всю ΠΎΠ±Π»Π°ΡΡ‚ΡŒ <li> */
li.custom2-adaptive-item .link-item {
    display: block; /* Π—Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всю Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту */
    text-decoration: none; /* Π£Π±ΠΈΡ€Π°Π΅ΠΌ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ тСкста */
    color: inherit; /* НаслСдуСм Ρ†Π²Π΅Ρ‚ ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта */
    height: 100%; /* Π—Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ΠΏΠΎΠ»Π½ΡƒΡŽ высоту <li> */
    width: 100%; /* Π—Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ΠΏΠΎΠ»Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ <li> */
}

/* Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ для ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта с тСкстом */
li.unique-item::after {
    content: "Discography"; /* ВСкст для отобраТСния */
    color: white; /* Π¦Π²Π΅Ρ‚ тСкста */
    font-size: 20px; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */
    font-weight: bold; /* ΠŸΠΎΠ»ΡƒΠΆΠΈΡ€Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ */
    position: absolute; /* ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ */
    top: 50%; /* Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ */
    left: 50%; /* Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */
    transform: translate(-50%, -50%); /* Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты */
    opacity: 0; /* Π˜ΡΡ…ΠΎΠ΄Π½ΠΎΠ΅ состояниС Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎ */
    transition: opacity 0.3s ease; /* ΠŸΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ */
}

/* ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт */
li.unique-item:hover::after {
    opacity: 1; /* Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ тСкст Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ */
}

/* Π‘Ρ‚ΠΈΠ»ΡŒ для Π½ΠΎΠ²ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π° элСмСнта списка */
li.special-item {
    background-color: #E0E0E0; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° для ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта */
    border: 1px solid #CCC; /* Π¦Π²Π΅Ρ‚ ΠΈ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Π° Ρ€Π°ΠΌΠΊΠΈ для ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта */
    border-radius: 5px; /* Π—Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅ ΡƒΠ³Π»Ρ‹ для ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта */
    padding: 15px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы для ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта */
    font-style: italic; /* ΠšΡƒΡ€ΡΠΈΠ² для тСкста Π²Π½ΡƒΡ‚Ρ€ΠΈ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта */
    font-size: 16px; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° для тСкста Π²Π½ΡƒΡ‚Ρ€ΠΈ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта */
    color: #333; /* Π¦Π²Π΅Ρ‚ тСкста для ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта */
}

/* Π£Π±ΠΈΡ€Π°Π΅ΠΌ эффСкты затСмнСния ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
li.custom2-adaptive-item:hover img {
    filter: none; /* Π£Π±ΠΈΡ€Π°Π΅ΠΌ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ затСмнСния */
}


/* CSS placed here will be applied to all skins */ 

/* Π‘Ρ‚ΠΈΠ»ΡŒ для элСмСнтов списка с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ */
li.custom-adaptive-item {
    background-color: #EFE9DE; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */
    border: 2px solid #999; /* Π¦Π²Π΅Ρ‚ ΠΈ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Π° Ρ€Π°ΠΌΠΊΠΈ */
    border-radius: 10px; /* Π—Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅ ΡƒΠ³Π»Ρ‹ */
    padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы */
    margin-bottom: 10px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами списка */
    list-style-type: none; /* Π£Π±ΠΈΡ€Π°Π΅ΠΌ стандартныС ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ списка */
    display: inline-block; /* Для ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π΄ΠΎ содСрТимого */
    min-width: 150px; /* Минимальная ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
    min-height: 50px; /* Минимальная высота элСмСнта */
    max-width: 100%; /* Максимальная ΡˆΠΈΡ€ΠΈΠ½Π° Π΄ΠΎ 100% ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° */
    word-wrap: break-word; /* ΠŸΠ΅Ρ€Π΅Π½ΠΎΡ Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… слов Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ строку */
    box-sizing: border-box; /* Π£Ρ‡ΠΈΡ‚Ρ‹Π²Π°Π΅ΠΌ Ρ€Π°ΠΌΠΊΡƒ ΠΈ отступы Π² Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… */
    position: relative; /* НСобходим для позиционирования псСвдоэлСмСнта */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

li.custom-adaptive-item a {
    display: block; /* Π—Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всю Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту */
    height: 100%; /* Π—Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ΠΏΠΎΠ»Π½ΡƒΡŽ высоту <li> */
    width: 100%; /* Π—Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ΠΏΠΎΠ»Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ <li> */
    text-decoration: none; /* Π£Π±ΠΈΡ€Π°Π΅ΠΌ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ тСкста */
    color: inherit; /* НаслСдуСм Ρ†Π²Π΅Ρ‚ ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта */
}

/* Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ эффСкт ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ */
li.custom-adaptive-item:hover {
    background-color: #CFC8B2; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
    border-color: #777; /* Π¦Π²Π΅Ρ‚ Ρ€Π°ΠΌΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
}

/* ИзмСнСниС ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠ° для изобраТСния ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° <li> */
li.custom-adaptive-item:hover img {
    filter: brightness(0.8); /* Π’Π΅ΠΌΠ½Π΅Π΅ Π½Π° 20% ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
}

/* ВСкст "Discography" появляСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌ элСмСнтС */
li.unique-item::after {
    content: "Discography"; /* ВСкст для отобраТСния */
    color: white; /* Π¦Π²Π΅Ρ‚ тСкста */
    font-size: 20px; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */
    font-weight: bold; /* ΠŸΠΎΠ»ΡƒΠΆΠΈΡ€Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ */
    position: absolute; /* ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ */
    top: 50%; /* Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ */
    left: 50%; /* Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */
    transform: translate(-50%, -50%); /* Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты */
    opacity: 0; /* Π˜ΡΡ…ΠΎΠ΄Π½ΠΎΠ΅ состояниС Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎ */
    transition: opacity 0.3s ease; /* ΠŸΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ */
}

li.unique-item2::after {
    content: "[[Tours]]"; /* ВСкст для отобраТСния */
    color: white; /* Π¦Π²Π΅Ρ‚ тСкста */
    font-size: 20px; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */
    font-weight: bold; /* ΠŸΠΎΠ»ΡƒΠΆΠΈΡ€Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ */
    position: absolute; /* ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ */
    top: 50%; /* Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ */
    left: 50%; /* Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */
    transform: translate(-50%, -50%); /* Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты */
    opacity: 0; /* Π˜ΡΡ…ΠΎΠ΄Π½ΠΎΠ΅ состояниС Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎ */
    transition: opacity 0.3s ease; /* ΠŸΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ */
}

/* ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт */
li.unique-item:hover::after {
    opacity: 1; /* Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ тСкст Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ */
}

li.unique-item2:hover::after {
    opacity: 1; /* Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ тСкст Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ */
}

hr.whowe-hr { border: 0; height: 5px; background: linear-gradient(to right, rgba(208, 32, 25, 0), #D02019, rgba(208, 32, 25, 0)); }

table td.hover-effect { background-color: #FF0000; transition: background-color 0.3s ease; }

table td.hover-effect:hover { background-color: #00FF21; }

hr.custom-hr-unco { border: 0; height: 1px; background-color: #B59000; margin: 5px 0; }

hr { background-color: #C14424; }

.mw-body h1, .mw-body-content h1, .mw-body-content h2 { font-family: 'MyCustomFont3', sans-serif; }

.mw-body h1, .mw-body-content h1 { font-family: 'MyCustomFont1', sans-serif; font-size: 35px; color: linear-gradient(to bottom, rgba(167, 215, 249, 0) 0, #D02019 100%); }

@font-face { font-family: 'MyCustomFont1'; src: url('/nc_assets/fonts/Bebas Neue Cyrillic.ttf') format('truetype'); font-weight: 510; font-style: normal;  }

@font-face { font-family: 'MyCustomFont3'; src: url('/nc_assets/fonts/Martian Mono Condensed Medium.ttf') format('truetype'); font-weight: normal; font-style: normal;  }

@font-face { font-family: 'MyCustomFont2'; src: url('/nc_assets/fonts/JetBrainsMono.ttf') format('truetype'); font-weight:500; font-style: normal; font-optical-sizing: auto;   }

.mw-mmv-post-image { background-color: #DDD7CC; }

.mw-ui-button.mw-ui-progressive:not(:disabled) { background-color: #D02019; }

.venue-table { background-color: #EFE1E4; text-align: left; margin: 1em 0; border-collapse: collapse; }

.unco-table { background-color: #FFF6CE; text-align: left; margin: 1em 0; border-collapse: collapse; }

.qute-table { background-color: #FFE281; border-color: #B59000 text-align: left; margin: 1em 0; border-collapse: collapse; }

.setlist-table { background-color: #efe9de; border: 3px solid #c14424; text-align: left; margin: 1em 0; border-collapse: collapse; }

.venue-table > tr > th, .venue-table > tr > td, .venue-table > * > tr > th, .venue-table > * > tr > td { padding: 0.2em 0.4em; }

.unco-table > tr > th, .unco-table > tr > td, .unco-table > * > tr > th, .unco-table > * > tr > td { padding: 0.2em 0.4em; }








.setlist-table {
    --setlist-bg-color: #efe9de; /* ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ для Ρ†Π²Π΅Ρ‚Π° */
    background-color: var(--setlist-bg-color);
    border: 3px solid #c14424;
    text-align: left;
    margin: 1em 0;
    border-collapse: collapse;
}
.custom-table tbody .cell-red { background-color: #ffdddd; }

.custom-table {
    background-color: transparent;
    border: 2px solid #D33328;
    border-collapse: collapse;
    text-align: center;
}

.disc-table { border: 2px solid #D33328; }

.custom-table .cell-der { background-color: #CC531E; }

.custom-table th, .custom-table td { border: 1px solid #D33328; padding: 3px; }

.custom-table .header-red { background-image:url(/images/d/db/Clancy_Letter_Background1.png); background-size: cover; color: white; text-align: center; }

.custom-table .header-blue { background-image:url(/images/0/0a/Whiteback.jpg); background-size: cover; color: white; text-align: center; }

.custom-table .cell-red { background-color: #FFE281; }

.custom-table .cell-box { background-image:url(/images/6/64/Boxm.png); }

.custom-table .cell-blue { background-color: #CEC9C2; border: 1px solid #C14424; height: 2px; }

.custom-table .cell-disco { text-align:center; border-color:#EFBB7F; background-color: #EFE9DE; }

.custom-table .cell-disco2 { background-color:#D87C43; text-align:center; border-color:#EFBB7F; }

.custom-table .cell-green { background-color: #EFE9DE; border: 1px solid #C14424; height: 2px; }

.custom-table .header-grass { background-color: #EFE9DE; }

#footer-info li { line-height: 1.4; background: #DDD7CC; margin-bottom: 4px; text-indent: 5px; }

#footer-places li { float: left; margin-right: 1em; line-height: 2; background: #DDD7CC; text-indent: 5px; text-indent-right: 5px; }

.background-table { background-image: url(/images/3/3b/Clancy_background.png); background-size: cover;}

.vector-user-menu-legacy li { font-size: 0.75em; float: left; margin-left: 0.75em; padding-top: 2.6em; line-height: 1.16666667; }

.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .jquery-tablesorter th.headerSort { background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both.svg?0e440); cursor: pointer; background-repeat: no-repeat; background-position: center right; padding-right: 21px; background-size: auto; }

.table-bg { background-image:url(/images/0/0a/Whiteback.jpg); background-size: cover;  background-repeat: no-repeat; }

.border-image-container { border-image-source: linear-gradient(to right, #ff8c00, #ffd700); }

.wikitable { background-color: #EFE9DE; }

.gradient-underline { display: inline-block; position: relative; }

.gradient-underline::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 100%; height: 5px; background-image: linear-gradient(to right, #ff0000, #00ff00); background-size: 100% 100%; z-index: -1; }

.my-template.theme-dark { /* Styles specific to the "dark" theme */ }

.rounded-table { border-collapse: collapse; border-radius: 10px; overflow: hidden; }

.wikitable.transparent { background-color: transparent; border: none; }

/* Change the background color of the bottom and left of eath page, up to behind the logo: */
body { background: #D02019 url(/images/a/a9/Dema_beck_clancy.png) no-repeat; font-family: 'Roboto', Arial, sans-serif; position: relative; }

#content .client-darkmode { background: #AA3C14; font-family: "Roboto"; }

.theme-dark .infobox { background-color: #333; color: #fff; border: 1px solid #666; }

/* background color of the content and title of pages */ 
#content { background-color: #DDD7CC; font-family: 'MyCustomFont2', sans-serif; } 
 
/* This is from the background color of the title of the Navigation menu in the left column */
#p-navigation { background-color: #FFD800; border-radius: 10px 10px 0px 0px; border: 3px solid #722215; border-bottom:hidden; background-image:url(/images/9/97/Sidebar.png); font-family: 'MyCustomFont3', sans-serif; }

/* This is from the background color of the title of the Twenty one pilots menu in the left column */
#p-Twenty_one_pilots { background-color: #FFD800; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }

/* This is from the background color of the title of the Twenty one pilots menu in the left column */
#p-Tyler_Joseph { background-color: #FFD800; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }

/* This is from the background color of the title of the Members menu in the left column */
#p-Members { background-color: #FFD800; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }

.background-table { background-image: url(/images/3/3b/Clancy_background.png); background-size: cover;}

.wikitable > tr > th, .wikitable > * > tr > th { background:#}

#catlinks { background:#CEC9C2; border: 1px solid #D33328; }

.mw-parser-output .tracklist th[scope="col"] { background-color: #ef5e29; }

.wikitable > tr > th, .wikitable > * > tr > th { background-color: #D33328; border: 1px solid #7b1325; background-image: url(/images/d/db/Clancy_Letter_Background1.png); background-size: cover; color: #fff; }

.wikitable > tr > th, .wikitable > * > tr > th { background-color: #eaecf0; text-align: center; color: #fff; }

.wikitable > tr > th, .wikitable > * > tr > th { background-color: #D33328; border: 1px solid #7b1325; background-image: url(/images/d/db/Clancy_Letter_Background1.png); }

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { background: #EFE9DE; }

.wikitable > tr > th, .wikitable > * > tr > th {  background-color: #D33328; border: 1px solid #7b1325; background-size: cover; background-image: url(/images/d/db/Clancy_Letter_Background1.png); }

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { border: 1px solid #7b1325; }

.catlinks li { display: inline-block; line-height: 1.25em; border-left: 1px solid #D33328; margin: 0.125em 0; padding: 0 0.5em; }

.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#722215 100%); background-repeat: no-repeat; background-size: 1px 100%; }

:not(:checked) > .vector-menu-checkbox { background:#EFB737; display: block; }

li.gallerybox div.thumb { border: hidden; background-color: #D33328; text-align:center; }

.mw-parser-output .tracklist-total-length th>span { background-color: #d8663d; }

.mw-parser-output .tracklist-total-length td { background-color: #d8663d; }

.vector-menu-dropdown { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#722215 100%); }

.c-actions { margin: 10px 5px 0px 0px; }

.c-item { background-color: #EFE9DE; border:2px solid #D33328; color: #722215; margin: 10px 0px 15px 0px; }

.c-avatar img { padding: 3px; border: 1px solid #dcdcdc; background-color: #bc1313; margin: 6px 0px 0px 6px; }

.c-score { right: 10px; }

.c-container { margin: 0px 0px 0px 75px; }

.c-user { margin: 1px 0px 6px 0px; }

.c-time { color: #af1414; }

.f-message { background-color: #FFF8ED; width: 445px; }

.c-comment { text-indent: 5px; word-wrap: break-word; word-break: break-word;}

.user-section-heading { margin: 0 0 23px 0; }

#profile-title { margin: 15px 20px 29px -6px; }

#profile-image img { margin: 15px 0px 0px 0px; }

body #p-personal li#p-themes > span { position: relative; top: 24px; left: -101px; }

.vector-user-menu-legacy li { position: relative; top: -26px; right: -10px; }

.mwe-popups .mwe-popups-extract:after, .mwe-popups .mwe-popups-extract blockquote:after { content: ' '; position: absolute; bottom: 0; width: 25%; height: 20px; background-color: #EFE9DE; pointer-events: none; }

figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'] { background-color: #D35232; border-color: #9E3A19; }

.mw-content-ltr figure[typeof~='mw:File/Thumb'] > figcaption, .mw-content-ltr figure[typeof~='mw:File/Frame'] > figcaption { background-color: #D02019; border-color: #9E3A19; color: #fff }

.mwe-popups .mwe-popups-extract[dir='ltr']:after { right: 0; background-image: linear-gradient(to right,rgba(255,255,255,0),#EFE9DE 50%); }

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { background-color: #; border: 1px solid #D33328; padding: 0.2em 0.4em; }

input[type="checkbox" i] { color: #B0E0E6; }

.mwe-popups .mwe-popups-container { background: #EFE9DE; }

.mw-parser-output .infobox-above, .mw-parser-output .infobox-title { font-size: 125%; font-weight: bold; text-align: center; border-radius: 2px 2px; background-image: url(/images/d/db/Clancy_Letter_Background1.png); background-size: cover; text-shadow:  0 0 10px #000; }


#n-Discord a { color: #fff !important; font-weight: bold; border-radius: 4px; border: 1px solid #4c57d0; background-color: #5865f2; display: block; position: relative; padding: 4px 4px 5px calc(17px + 6.5px * 2); box-shadow: 0 2px 3px rgba(0,0,0,0.1); transition: 0.2s; }

.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading { display: block; color: #44180D; margin: 0.5em 0 0 0.66666667em; border: 0; padding: 0.25em 0; font-size: 0.80em; font-weight: bold; cursor: default; background-image: linear-gradient(to right,rgba(200,204,209,0) 0,#AA3C14 33%,#AA3C14 66%,rgba(200,204,209,0) 100%); background-position: center bottom; background-repeat: no-repeat; background-size: 100% 1px; font-family: 'sans-serif', sans-serif; }

.vectorTabs span a { background-color: #B0E0E6; }

#p-logo { ; } 

.featurebox-heading { background-image: url(/images/1/14/Scaled_transparent.png); color: #fff; }

element.style { width: 60%; background-color: ; background-image: url(/images/1/14/Scaled_transparent.png); }

.toc, .toccolours { border-radius: 8px 8px; border: 3px solid #D33328; background-color: #EFE9DE; }

#p-tb { background-color: #FFD800; border-radius: 0px 0px 10px 10px; border: 3px solid #722215; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }

#p-personal ul { background: #DDD7CC; border-radius: 3px 3px; border: 2px solid #D33328; padding:0.1em 1.5em; height: 23px; }

#mw-head { background-image: url(/images/4/42/Heared-3_%283%29.gif);}

.vector-menu-tabs-legacy .selected { background: #DDD7CC }

.vector-menu-checkbox {
    color: #D33328;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: none;
}

.mp_header { background-image:url(/images/9/9c/Wikinews_banner_2024.png); background-repeat: no-repeat; background-position: top right; width: 100%;}

.mw-body { border: 1.5px solid #722215; margin-top: -4px; }

h1, h2 { border-color: #57544a; }

.vector-menu-dropdown .mw-list-item a:not(.mw-ui-icon) { background: #F4FFFF; }

img[Attributes Style] { height: 168px; }

.grid * { background: #E0C9AF; }

.vector-search-box-input { color: #312400; border: 1px solid #6D2614; }

.skin-vector .uls-search { border-bottom-color: #7A4D1D; }

.vector-menu-tabs-legacy li { background-image: linear-gradient(to top,#DDD7CC 0,#DDD7CC 1px,#C1BBB2 100% ); 

.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading { background-image: linear-gradient(to right,rgba(200,204,209,0) 0,#D33328 33%,#F7572E 66%,rgba(200,204,209,0) 100%); background-position: center bottom; background-repeat: no-repeat; background-size: 100% 1px; font-weight: bold; }

.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: linear-gradient(to bottom,rgba(68,137,145,0) 0,#D33328 100%); border: 4px solid #722215; background-repeat: no-repeat; background-size: 1px 100%; border: 4px solid #D33328; margin-top: -4px; }

.imagelink_telegram a {
  width:100px;
  height:100px;
  display:block;
  text-decoration:none;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/2048px-Telegram_logo.svg.png")

body.page-Main_Page h1.firstHeading { display:none; }

#title-para { background-color: #F0FFFF; }

.hoverimage:hover {
  transition: 0.2s ease;
  transform: scale(1.1);
}

#mw-content-text .featurebox .featurebox-heading{
 background-image:url("https://tfwiki.net/mediawiki/images2/2/26/Allsparkstrip_transparent.png");
}

.hover-highlight:hover {
    background-color: #ffffcc; /* Any desired color */
}

/* Hover Box for switching the visibility of the selected item */
.hoverbox { display:inline-block; padding:0em; }
.hoverbox .hoveritem { display:none; margin:0em; padding:0em; }
.hoverbox .hoveritem.selected { display:inline-block; }
.hoverbox:hover .hoveritem { display:inline-block; }
.hoverbox:hover .hoveritem.selected { display:none; }

	--theme-background-color: #2c56a0;