/********************************************* ** Stylesheet file for default Flux theme. ** *********************************************/

p,div,span,html,body,input,button,a,table,ht,tr,td{
     font-optical-sizing: auto;
     font-size: 12pt;
     font-weight: 400;
     font-style: normal;
}
 * {
     font-family: "Funnel Sans", sans-serif;
     user-select: none;
}
 .loginbox-admin-menu {
     padding-top: 5px;
     color: #94b4d5;
}
 h1,h2,h3,h4{
     font-size: 18pt!important;
}
 body {
     margin: 0 0 20px 0;
     padding: 0;
     color: #000;
     background-color: #000;
     background-image: url('../img/feralyxbg.jpg');
     background-size: cover;
     background-position: top center;
     background-attachment: fixed;
     background-repeat: no-repeat;
     height: 100vh;
     width: 100%;
     cursor: url("../img/normal.png"), default;
}
a,button,input[type="submit"] {
    cursor: url("../img/pointer.png"), pointer;
}
.main-opacity{
     background-color:#333;
     width:100%;
     height: 100vh;
}
 .main-job {
     position: fixed;
     bottom: 0;
     left: 0;
     z-index: -1;
     max-width:80%;
     max-height:80vh;
}
 .container-main{
     width:80%;
     max-width:1366px;
     margin-top:-20px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     background-color: rgba(255, 255, 255, 0.9);/* 0.9 */
     padding:20px!important;
}
 .intro{
     opacity: 0;
     animation: fadeIn 1s forwards;
     animation-delay: 0.1s;
}
 @keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 .floating {
     animation-timing-function: ease-in-out;
     animation-iteration-count: infinite;
}
 .imga-float {
     animation: floatAndScale 90s infinite;
}
 @keyframes floatAndScale {
     0%, 100% {
         transform: translateY(0) scale(1);
    }
     50% {
         transform: translateY(40px) scale(1.1);
    }
}
 .npc-dona-pic{
     max-width:50%;
}
 .no-bg{
     background-image: none;
     min-height: auto;
     height: 100%;
}
 tr, td, th {
     vertical-align: top;
}
 .horizontal-table tr, .vertical-table tr, .generic-form-table tr, .horizontal-table td, .vertical-table td, .generic-form-table td {
     vertical-align: middle;
}
 .horizontal-table th, .vertical-table th, .generic-form-table th {
     vertical-align: top;
}
 h2 {
     color: #444;
     letter-spacing: -1px;
}
 h3 {
    /*font-style: italic;
    */
     font-weight: normal;
     font-size: 120%;
     color: #444;
     border-bottom: 1px dotted #ddd;
     text-transform: uppercase;
}
 h3:first-letter {
     font-weight: bold;
}
 p {
     margin: 4px 0 8px 0;
     padding: 0;
}
 a img {
     border: 0;
}
 a {
     color: #4083c6;
     text-decoration: none;
}
input[type=text], input[type=password], input[type=file], input[type=number], textarea {
     padding: 4px;
     color: #444;
     border: 1px solid #ddd;
     outline-width: 0;
      background: linear-gradient(0deg, #FCFCFC, #FFFFFF);
}
 label:hover {
     cursor: pointer;
}
input[type=button],input[type=submit], button 
{
  transition: transform 0.2s ease-in-out; 
}
   
input[type=button]:hover,input[type=submit]:hover, button:hover 
{
  transform: scale(1.05);
}

 .module-name {
     font-weight: bold;
     font-size: 12pt;
}
 .message {
     display: block;
     padding: 10px;
     font-weight: bold;
     font-size: 120%;
     color: #333;
     background: linear-gradient(0deg, #FFA07A, #FF4D6D);
     margin-bottom:40px;
}
 .notice {
     display: block;
     padding: 10px;
     font-weight: normal;
     font-size: 120%;
     color: #204a87;
     background-color: #F0FFFF;
     border: 1px solid #87CEEB;
}
 .center {
     text-align: center;
}
 #admin_sidebar, #sidebar {
     margin-bottom: 10px;
     border-collapse: collapse;
     border-spacing: 0;
}
 #admin_sidebar img, #sidebar img {
     display: block;
}
 #admin_sidebar td, #sidebar td {
     padding: 0;
}
 #admin_sidebar td.menuitem, #admin_sidebar th.menuitem {
     display: block;
     font-size: 10pt;
     border-width: 0 13px 0 11px;
     border-style: solid;
     border-color: #8b8b8b;
}
 #admin_sidebar th.menuitem {
     background-color: #303030;
}
 #admin_sidebar th.menuitem strong {
     display: block;
     margin: 0 12px;
     padding: 10px 0 2px 0;
     font-size: 100%;
     text-align: center;
     color: #fff;
     border-bottom: 1px solid #555;
}
 #admin_sidebar td.menuitem a {
     margin: 0 auto;
     display: block;
     padding: 2px 5px 4px 18px;
     color: #fff;
     background-color: #303030;
     text-align: left;
     text-shadow: #000 1pt 1pt;
     text-decoration: none;
}
 #admin_sidebar td.menuitem a:hover {
     color: #fff;
     background-color: #4a5259;
     text-shadow: #4a5259 1pt 1pt;
}
 #admin_sidebar td.menuitem a span {
    /*display: block;
    */
}
 #sidebar td.sidebar-left, #sidebar td.sidebar-right {
     background-color: #e6f0fa;
}
 #sidebar td.menuitem, #sidebar th.menuitem {
     display: block;
     font-size: 10pt;
     border-width: 0 13px 0 11px;
     border-style: solid;
     border-color: #c4d9ee;
}
 #sidebar th.menuitem {
     background-color: #94b4d5;
}
 #sidebar th.menuitem strong {
     display: block;
     margin: 0 12px;
     padding: 10px 0 2px 0;
     font-size: 100%;
     text-align: center;
     color: #fff;
     border-bottom: 1px solid #c4d9ee;
}
 #sidebar td.menuitem a {
     margin: 0 auto;
     display: block;
     padding: 2px 5px 4px 18px;
     color: #fff;
     background-color: #94b4d5;
     text-align: left;
     text-shadow: #708fae 1pt 1pt;
     text-decoration: none;
}
 #sidebar td.menuitem a:hover {
     color: #fff;
     background-color: #708fae;
     text-shadow: #708fae 1pt 1pt;
}
 #sidebar td.menuitem a span {
     display: block;
}
 .request, .fs-path {
     display: inline-block;
     padding: 2px;
     font-family: Monaco, "Lucida Console", "Bitsteam Vera Sans Mono", monospace;
     font-size: 8pt;
     background-color: #fff;
     border: 1px solid #eee;
}
 .keyword {
     color: #ffba00;
     font-style: italic;
}
 .red {
     display: block;
     padding: 10px;
     font-weight: bold;
     font-size: 120%;
     color: #fff;
     background-color: #f00;
}
 .green {
     display: block;
     padding: 10px;
     font-weight: bold;
     font-size: 120%;
     color: #fff;
     background-color: #0c0;
}
 .note {
     padding: 5px;
     color: #444;
     background-color: #eaeaea;
     font-style: italic;
}
 .up {
     font-weight: bold;
     color: #0f0;
     text-transform: uppercase;
}
 .down {
     color: #f00;
     text-transform: uppercase;
}
 .submit_button {
     /*display: block;
     margin: 10px;
     padding: 5px;
     background-color: #eee;
     border: 1px solid #ccc;*/
}
 .submit_button:hover {
    /* color: #fff;
     background-color: #333;
     border: 1px solid #111;
     cursor: pointer;*/
}
 .install_table th, .install_table td {
     padding: 5px 10px;
     border: 1px solid #ddd;
}
 .install_table th {
     background-color: #eef;
}
 .install_table td {
     width: 180px;
     text-align: center;
}
 .created {
     color: green;
     width: 80px;
}
 .missing {
     color: red;
     width: 80px;
}
 .pages {
     margin-top: 20px;
     padding-top: 10px;
     color: #ccc;
     text-align: center;
     border-top: 1px solid #ddd;
}
 .pages .page-prev, .pages .page-next {
     color: #94b4d5;
}
 .pages .page-num {
     padding: 0 5px;
}
 .pages .current-page {
     color: #000000;
     font-weight: bold;
}
 .horizontal-table {
     border-spacing: 0;
     border-collapse: collapse;
     width: 100%;
}
 .horizontal-table th {
     padding: 5px 10px;
     background-color: #eee;
}
 .horizontal-table td {
     padding: 5px 10px;
     background-color: #fff;
}
 .horizontal-table th, .horizontal-table td {
     border: 1px solid #ddd;
}
 .vertical-table {
     border-spacing: 0;
     border-collapse: collapse;
}
 .vertical-table th {
     padding: 5px 10px;
     background-color: #eee;
}
 .vertical-table td {
     padding: 5px 12px;
     background-color: #fff;
}
 .vertical-table th, .vertical-table td {
     border: 1px solid #ddd;
}
 .vertical-table label {
     display: block;
     padding: 5px;
}
 .current-sub-menu {
     font-weight: bold;
}
 .td-checkbox {
     text-align: center;
}
 .td-action {
     color: #ccc;
     text-align: center;
}
 .vertical-table .td-action {
     text-align: right;
}
 .vertical-table form {
     margin: 0;
     padding: 0;
}
 .not-applicable {
     font-style: italic;
     color: #bbb;
}
 .state-pending {
     color: orange;
}
 .state-banned {
     color: red;
}
 .state-permanently-banned {
     font-weight: bold;
     color: red;
}
 .raw-txn-log {
     padding: 10px;
     font-family: "Monaco", "Lucida Console", "Courier New", monospace;
     background-color: #fff;
     border: 1px solid #ddd;
     width: 96%;
     overflow: scroll;
}
 .online {
     color: #000;
}
 .offline {
     color: #aaa;
}
 .info-text-total {
     font-weight: bold;
}
 .info-text-results {
     font-weight: bold;
}
 .info-text {
     margin-bottom: 6px;
     padding: 5px;
     color: #666;
     background-color: #fff;
     border: 1px solid #ccc;
     text-align: center;
}
 .toggler {
     font-weight: bold;
     font-style: italic;
}
 .toggler a {
     color: #26a;
}
 .search-form, search-form2 {
     display: none;
     margin: 0 0 10px 0;
     padding: 0;
     border-top: 1px solid #ddd;
}
 .search-form p, .search-form2 p {
     margin: 0;
     padding: 5px;
     color: #aaa;
     text-align: left;
     border-bottom: 1px solid #ddd;
}
 .search-form label, .search-form2 label {
     display: inline-block;
     margin: 0 0 3px 0;

     font-style: italic;
     color: #222;
}
 .search-form input[type=text], .search-form2 input[type=text] {
     display: inline-block;
     margin: 0 0 2px 0;
     padding: 2px;

     width: 80px;
}
 .search-form input[type=submit], .search-form2 input[type=submit] {
     display: inline-block;
     margin: 0 0 2px 0;

     font-weight: bold;
}
 .search-form input[type=button], .search-form input[type=reset], .search-form2 input[type=button], .search-form2 input[type=reset] {
     display: inline-block;
     margin: 0 0 2px 0;

}
 .search-form input[type=checkbox], .search-form2 input[type=checkbox] {
     display: inline-block;
     margin: 0 0 2px 0;
}
 .search-form select, .search-form2 select {
     display: inline-block;
     margin: 2px 0;
}
 #submenu {
     color: #bbb;
}
 #pagemenu {
     margin-top: 5px;
     padding: 5px 0;

     color: #888;
     border-width: 1px 0;
     border-style: dotted;
     border-color: #ddd;
}
 #pagemenu a {
     color: #777974;
     text-decoration: underline;
}
 #pagemenu a:hover {
     color: #729fcf;
}
 #loginbox {
     margin-bottom: 10px;
     color: #555;
}
 #content {
     color: #555;
}
 #register_form table td, #login_form table td {
     padding: 1px;
}
 #register_form table th label, #login_form table th label {
     display: block;
     padding: 5px;
     text-align: center;
}
 #register_form input[type=text], #register_form input[type=password], #login_form input[type=text], #login_form input[type=password] {
     width: 140px;
}
 #register_form select, #login_form select {
     width: 147px;
}
 #server_status th, #server_status td {
     padding: 8px 12px 8px 12px;
     text-align: left;
     border-bottom: 1px solid #ddd;
}
 #server_status {
     border-spacing: 0;
     border-collapse: collapse;
     background-color: #fff;
     border: 1px solid #ddd;
}
 #server_status .server {
     color: #222;
}
 #server_status .status {
     text-align: center;
}
 #copyright p {
     margin-top: 5px;
     margin-bottom: 0px;
     font-style: italic;
     
     color: #ccc;
     text-align: right;
}
 #info p {
     margin-top: 5px;
     margin-bottom: 0px;
     font-style: italic;
     
     color: #aaa;
     text-align: right;
}
 .sortable {
     color: #444;
     text-decoration: underline;
}
 .sortable:hover {
     color: #000;
}
 .character-stats {
     border-spacing: 0;
     border-collapse: collapse;
     color: #ccc;
}
 .character-stats td {
     padding: 0px 10px 5px 0;
     border: 0;
     text-align: center;
}
 .character-stats .stat-name {
     color: #666;
}
 .character-stats .stat-value {
     color: #000;
}
 .credit-balance {
     float: right;
     display: inline-block;
     padding: 10px;
     color: #000;
     background-color: #eee;
     border: 1px dotted #ddd;
}
 .credit-balance .balance-text {
     display: inline-block;
     margin-right: 5px;
     color: #bbb;
     text-transform: uppercase;
}
 .credit-balance .balance-amount {
     font-weight: bold;
}
 .emblem-server {
     margin: 0 0 2px 0;
     padding: 0 0 2px 0;
     font-size: 120%;
     border-bottom: 1px solid #ddd;
}
 .emblem-server label {
     display: block;
}
 .emblem-server label:hover {
     cursor: pointer;
}
 .block {
     display: block;
     width: 80%;
     height: 40px;
}
 .script-line {
     font-family: Monaco, "Lucida Console", monospace;
}
 .script-line-num {
     display: inline-block;
     margin: 0;
     padding: 5px;
     background-color: #eee;
     border-right: 1px solid #ddd;
}
 .script-line-code {
     display: inline-block;
     margin: 0;
     padding: 5px;
}
 .shop-table {
     width: 100%;
     color: #000;
     border-spacing: 0 10px;
     border-collapse: separate;
}
 .shop-table td {
     padding: 10px;
     background-color: #fff;
     border: 1px solid #ddd;
}

 .shop-item-name {
     margin: 0 0 5px 0;
     padding: 0 0 2px 0;
     font-size: 140%;
     color: #222;
     border-bottom: 1px solid #eee;
}
 .shop-item-cost-qty {
     width: 150px;
     color: #aaa;
     text-align: center;
}
 .cost {
     color: #000;
     font-size: 120%;
     font-weight: bold;
     text-transform: uppercase;
}
 .qty {
     color: #000;
}
 .shop-item-action {
     color: #ddd;
}
 .shop-item-action a {
     color: #80a2c8;
     border-bottom: 1px solid #eee;
}
 .shop-item-action a:hover {
     border-bottom: 1px solid #80a2c8;
}
 .short {
     width: 40px;
}
 .shop-server-name {
     color: #333;
}
 .shop-item-info {
     text-align: justify;
}
 textarea {
     width: 320px;
     height: 120px;
}
 .cart-items-text {
     margin: 0 0 5px 0;
     padding: 5px;
     color: #ddd;
     background-color: #888;
     border: 5px solid #777;
}
 .cart-info-text {
     margin: 0 0 5px 0;
     padding: 0;
}
 .cart-total-text {
     margin: 0;
     padding: 0;
}
 .cart-item-name {
     color: #fff;
     border-bottom: 1px dotted #aaa;
}
 .cart-item-count {
     font-size: 120%;
     font-weight: bold;
     color: #000;
}
 .cart-sub-total {
     color: #000;
}
 .cart {
     width: 100%;
}
 .cart label {
     display: block;
}
 .cart h4 {
     margin: 10px 0 2px 0;
     font-size: 140%;
}
 .remove-from-cart {
     width: 100%;
     text-align: right;
}
 .checkout-text {
     font-size: 120%;
     font-weight: bold;
}
 .checkout-text a {
     border-bottom: 1px dotted #ccc;
}
 .checkout-text a:hover {
     color: #000;
     border-bottom: 1px solid #aaa;
}
 .enter-donation-amount {
     margin: 0;
     padding: 0 0 5px 0;
     font-size: 120%;
}
 .donation-amount-text {
     margin: 0;
     padding: 0;
     font-size: 120%;
     text-align: center;
}
 .credit-amount-text {

     text-transform: uppercase;
     color: #bbb;
     text-align: center;
     letter-spacing: 1px;
}
 .donation-amount {
     font-weight: bold;
     color: #000;
}
 .credit-amount {
     color: #555;
}
 .reset-amount-text {
     margin: 0;
     padding: 0;

     text-align: center;
}
 .checkout-info-text {
     margin: 0 0 5px 0;
     padding: 0;
}
 .remaining-balance {
     color: #000;
}
 .exchange-rate {
     font-size: 120%;
     font-weight: bold;
     color: #000;
}
 .important {
     font-size: 120%;
     color: #000;
}
 .important .server-name {
     font-weight: bold;
}
 .generic-form {
     padding: 10px;
     background-color: #fff;
     border: 1px solid #ddd;
     width: auto;
}
 .generic-form-div {
     padding: 10px;
     background-color: #fff;
     border: 1px solid #ddd;
     width: auto;
}
 .generic-form-table th label {
     display: block;
     padding: 6px;
}
 .generic-form-table td div {
     display: block;
     padding: 6px 0;
}
 .generic-form-table th {
     text-align: right;
}
 .generic-form-table td input[type=checkbox] {
     display: inline-block;
     margin-top: 6px;
}
 .generic-form-table td p {
     margin: 6px 5px;
     color: #000;
}
 .security-code {
     margin: 5px 0;
     text-align: left;
     width: 145px;
     height: 50px;
}
 .action {
     color: #ddd;
}
 .action a, .action span.anchor {
     color: #80a2c8;
     border-bottom: 1px solid #eee;
     cursor: pointer;
}
 .block-link {
     display: block;
     padding: 3px;
     color: #80a2c8;
     border-bottom: 1px solid #eee;
}
 .button-action {
     padding: 5px 0;
     text-align: left;
}
 .woe-table {
     border-spacing: 0;
     border-collapse: collapse;
     background-color: #fff;
     border: 1px solid #ddd;
}
 .woe-table th, .woe-table td {
     padding: 5px 10px;
}
 .woe-table th {
     font-weight: normal;
     border-bottom: 1px solid #ddd;
}
 .woe-table td {
     font-size: 120%;
}
 .woe-table .server {
     font-weight: bold;
}
 .woe-table .time {
     font-style: italic;
     color: #333;
}
 .script {
     width: 98%;
}
 .multi-select {
     width: 100%;
}
 .jump-to-page {
     margin-top: 8px;
     text-align: center;
}
 .jump-to-page input {
     padding: 2px;
}
 .top-ranked td {
     font-weight: bold;
     color: #000;
     background-color: #FFF8DC;
}
 .top-ranked a {
     color: #000;
     border-bottom: 1px dotted #666;
}
 .empty-row {
     visibility: hidden;
}
 .item-drop-mvp td {
     color: #000;
     background-color: #F8F8FF;
}
 .item-drop-card td {
     color: #000;
     background-color: #F0FFFF;
}
 .mvp {
     font-size: xx-small;
     font-weight: bold;
     color: #ff0000;
     vertical-align: top;
}
 .monster-mode {
     margin: 0;
     padding: 0;
     list-style: square inside;
}
 .monster-mode li {
     padding: 1px;
     border-bottom: 1px dotted #eee;
}
 .equipped td {
     background-color: #f1ffff;
}
 .job-classes {
     border-spacing: 0;
}
 .job-classes td {
     padding-right: 10px;
     border-right: 1px solid #eee;
}
 .current-shop-category {
     font-weight: bold;
}
 .normalslotted .equipped {
     color: #25292b;
}
 .overslotted1 {
     color: #32cd32;
}
 .overslotted2 {
     color: #00bfff;
}
 .overslotted3 {
     color: #ffa500;
}
 .overslotted4 {
     color: #9932cc;
}
 .hold-hours {
     color: #ffba00;
     font-style: italic;
}
 .header-img {
     width:100%;
     margin-top:50px;
}
 input,select{
     border-radius: 6px;
     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
     border: 1px solid #d3d3d3;
     padding: 5px;
     background-color: #fff;
     color: #333;
}
 button,input[type=button],input[type=submit]{
     background: linear-gradient(45deg, #f8378f, #fc913a);
     color: #FFF;
     border: none;
     border-radius: 10px;
     padding: 6px 10px;
     font-weight: bold;
     cursor: pointer;
}
 .header-logo{
     max-height:100%;
}
 .custom-navbar {
     height: 60px;
}
 .custom-navbar .navbar-nav > li > a {
     padding-top: 0;
     padding-bottom: 0;
     line-height: 60px;
}
 .custom-navbar .navbar-brand img {
     max-height: 40px;
     height: auto;
     width: auto;
}
 .navbar-collapse {
     background-color: #222;
     border: none;
}
 body{
     margin-top:80px;
}
 .additional-content {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 10px;
     text-align: right;
     margin-right: 15px;
}
 .server-status {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     background-color: #222;
     line-height: 60px;
     color: white;
}
 .status-title {
     font-weight: bold;
     margin-bottom: 5px;
}
 .status-row {
     display: flex;
     gap: 10px;
}
 .status-item {
     display: flex;
     align-items: center;
     gap: 5px;
}
 .status-circle {
     width: 10px;
     height: 10px;
     border-radius: 50%;
}
 .status-circle1 {
     background-color: green;
}
 .status-circle0 {
     background-color: red;
}
 .players-online {
     margin-top: 5px;
     font-style: italic;
}
 .discord-button {
     position: fixed;
     right: 20px;
     bottom: 20px;
     max-width: 10%;
     min-width:100px;
     z-index: 9999;
     cursor: pointer;
     animation: shake 0.5s ease-in-out infinite;
     animation-iteration-count: 3;
     animation-delay: 5s;
}
 @keyframes shake {
     0% {
         transform: translate(0, 0);
    }
     20% {
         transform: translate(-5px, 0);
    }
     40% {
         transform: translate(5px, 0);
    }
     60% {
         transform: translate(-5px, 0);
    }
     80% {
         transform: translate(5px, 0);
    }
     100% {
         transform: translate(0, 0);
    }
}
 @media (max-width: 992px) {
     .navbar-header{
         height:60px;
    }
     .custom-navbar .navbar-nav > li > a {
         padding-top: 10px;
         padding-bottom: 10px;
         line-height: 15px;
    }
}
/*** Landing ***/
 .custom-btn {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 10px;
     border: none;
     border-radius: 10px;
     color: white!important;
     font-weight: bold;
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
     box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
     transition: transform 0.2s ease-in-out;
     text-align: center;
     width: 100%;
     font-weight:bold;
}
 .custom-btn:hover {
     transform: scale(1.05);
     color: white;
     text-decoration:none;
}
 .custom-btn img {
     width: auto;
     height: 120px;
     margin-bottom: 10px;
}
 .description {
     
     color: rgba(255, 255, 255, 0.7);
     font-style: italic;
}
 .btn-create {
     background: linear-gradient(45deg, rgba(0,89,255,1) 0%, rgba(0,212,255,1) 100%);
     height: 200px;
}
 .btn-download-full {
     background: linear-gradient(45deg, rgba(255,138,0,1) 0%, rgba(255,219,0,1) 100%);
     height: 200px;
}
 .btn-download-lite {
     background: linear-gradient(45deg, rgba(118,191,0,1) 0%, rgba(179,255,0,1) 100%);
     height: 160px;
}
 .custom-btn2 {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     padding: 10px;
     border: none;
     border-radius: 10px;
     color: #FFF;
     font-weight: bold;
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
     box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
     transition: transform 0.2s ease-in-out;
     text-align: left;
     width: 100%;
     font-weight:bold;
}
 .custom-btn2:hover {
     transform: scale(1.05);
     color: #FFF;
     text-decoration:none;
}
 .custom-btn2 img {
     width: auto;
     height: 100px;
     margin: 0 10px 20px 0;
}
 .btn-logout {
     background: linear-gradient(20deg, rgba(210,83,140,1) 0%, rgba(210, 137, 170,1) 100%);
     height: 100px;
}
 .mt{
     margin-top:16px;
}
 .newsItem {
     background-color: #f9f9f9;
     border-radius: 10px;
     padding: 20px;
     margin: 15px 0;
     border:2px solid #e6e6e6;
}
 .newsItem h4 {
     
     color: #4CAF50;
     margin: 0;
}
 .newsIcon {
     width: 60px;
     height: 60px;
     object-fit: contain;
     margin-right: 15px;
     vertical-align: middle;
}
 .newsItemContent {
     
     color: #555;
     line-height: 1.6;
}
 .newsDate {
     
     color: #777;
     margin-bottom: 10px;
     display: block;
}
 .news_link {
     color: #007bff;
     text-decoration: none;
     
}
 .news_link:hover {
     text-decoration: underline;
}
 hr {
     border: none;
     border-top: 1px solid #e1e1e1;
     margin: 20px 0;
}
.donation-box {
    position: relative;
    border-radius: 10px;
    padding: 20px;
    height: 300px;
    text-align: center;
    overflow: hidden;
    background: url(../img/party_e.gif) no-repeat center center;
    background-size: cover;
}

.donation-image {
    position: absolute;
    top: 10px;
    right: 50%;
    transform: translateX(50%);
    height: 350px;
    z-index: 1;
}

.donation-button {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(0deg, rgba(118,191,20,1) 0%, rgba(179,255,20,1) 100%);
    border-radius: 10px;
    padding: 10px 20px;
    color: #333;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: opacity 0.2s ease-in-out;
    opacity: 0.9;
    width: 80%;
    z-index: 2;
}

.donation-button small {
    display: block;
    font-size: 12px;
    font-weight: normal;
}

.donation-button:hover {
    opacity: 1;
    font-size: 20px;
}

@keyframes shake2 {
    0%, 100% { transform: translateX(50%) translateY(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(calc(50% - 1px)) translateY(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(calc(50% + 1px)) translateY(3px); }
}

.shake-image {
    animation: shake2 20s ease-in-out infinite;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.login-box{
     padding: 10px;
     border: none;
     border-radius: 10px;
     font-weight: bold;
     background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 100%);
     font-weight:bold;
}
.login-header {
    display: flex;
    align-items: center;
    justify-content: space-between; 
}

.login-title {
    background: linear-gradient(90deg, #f8378f, #fc913a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 32px;
    font-weight: bold;
}

.login-header img {
    width: 100px;
    height: auto;
}
.news-pill{
    display: inline-block;
    padding: 4px 6px;
    background: linear-gradient(45deg, #5cb125, #65c329);
    border-radius: 5px;
    color: white;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    margin-right:10px;
}
@keyframes rainbow {
    0% { color: red; }
    14% { color: orange; }
    28% { color: yellow; }
    42% { color: green; }
    57% { color: blue; }
    71% { color: indigo; }
    85% { color: violet; }
    100% { color: red; }
}

.rainbow-background {
     background-color: transparent;
     border:none;
    animation: rainbow 6s infinite linear;    
}

.navbar-nav i {
    width: 20px;
    text-align: center;
    display: inline-block;
    margin-right:10px;
}

.shopItems > .item > img {
    width: 100%;
    height: auto;
}
#promos{
margin:-20px -20px 10px -20px;

}
#promos > .carousel-inner > .item > img,#promos > .carousel-inner > .item > a > img {
    width: 100%;
    height: auto;
}
@media (max-width: 992px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-nav {
        float: none !important;
    }
    .navbar-nav > li {
        float: none;
    }
     .container-main{
     width:100%;
  }
}

.modal {
    z-index: 1050 !important;
}
.modal-backdrop {
    z-index: 1040 !important;
}
.shop-grid div {
    margin-bottom: 20px;
}

.shop-grid {
    display: flex;
    flex-wrap: wrap;
}

.shop-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.shop-item .panel-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    flex-grow: 1;
    height: 100%;
}

.shop-item .shop-item-image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    margin-bottom: 15px;
}

.shop-item .shop-item-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.shop-item h4.shop-item-name {
    font-size: 18px;
    margin: 10px 0;
    flex-shrink: 0;
}

.shop-item .shop-item-info {
    font-size: 14px;
    color: #555;
    flex-grow: 1;
}

.shop-item .shop-item-action {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.shop-item .shop-item-action button {
    font-size: 14px;
    padding: 8px 15px;
}
.lang-server-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.language-switcher a img {
    width: 24px;
    height: auto;
    cursor: pointer;
}
.lang-dact{
    opacity:0.3;
}

.lang-act{
    opacity:1;
    border:2px solid #63bb16;
}