/* Reset default margins & paddings */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

a:link { 
    text-decoration: none; 
  } 
  a:visited { 
    text-decoration: none; 
  } 
  a:hover { 
    text-decoration: none; 
  } 
  a:active { 
    text-decoration: none; 
  }

body {
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

#cardModalId{
  font-weight: bold;
  position:absolute;
  right:5px;
  bottom:1px;
}

/* 🔹 Ensure Containers Fit Responsively */
.container {
  max-width: 1200px; /* Limit max width for large screens */
  width: 90%; /* Makes it fluid */
  margin: auto; /* Centers content */
  padding: 20px;
}

/* 📱 Responsive Adjustments */
@media (max-width: 768px) { /* Tablets */
  .container {
      width: 95%;
  }
  body {
      min-width: unset; /* Removes min-width for better mobile view */
  }
}

@media (max-width: 480px) { /* Mobile Phones */
  body {
      background-size: auto; /* Prevents background from stretching */
  }
  .container {
      width: 98%;
  }
}
/* ----------------------------------------------------------------- below */

hr{ margin:0;}

.ajaxloader{
    width: 100px;
    height: 100px;  
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 101;
    display: none
}



/* ----------------------------------------------------------- */
.com-logo{
    width: 150px;
}

.event-menu{
  cursor: pointer;
  font-weight: 700;
}
.td-eventLists{
  font-size: 14px;
}
.event_active_menu{
  color: #fff;
  
}
.pointer{
  cursor: pointer;
}
.font-blue{
  color: blue;
}
.errorlist{
  color: red;
  font-weight: bold;
  margin-top: 5px;
}
/* -------------------------------------------------- */

.span-event-tag{
  padding: 5px;
  background-color: rgb(79, 79, 248);
  color:#fff;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.63);
  border-radius: 5px 5px 5px 5px;
}

.span-event-fee{
  padding: 5px;
  background-color: rgb(192, 21, 21);
  color:#fff;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.63);
  border-radius: 5px 5px 5px 5px;
}

.span-event-free{
  padding: 5px;
  background-color: rgb(28, 141, 0);
  color:#fff;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.63);
  border-radius: 5px 5px 5px 5px;
}

.strike{
  text-decoration: line-through;
}
.div-join{
  position:relative;
  font-size: 16px;
  font-family: "Oswald", sans-serif;
}
.btn-join{
  position:absolute;
  bottom: 7px;
  left: -3px;
}
.star {
  color: gold;
  font-size: 16px;

}
.div-license{
  position:absolute;
  top:0px;
  font-size: 16px;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
}
.div-hold-license{
  position:relative;
}
.euser-tag{
  padding: 5px;
  width: 280px;
  background-color: #fff;
  border: 2px solid #727272;
  border-radius: 5px 5px 5px 5px;
  font-size: 16px;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  display: inline-block;
  margin-right: 1px;
  margin-top: 2px;

}

/* ----------------------------------------------------------------- */
.active-border{
  border: 3px solid #2b39ff;
}
.euser-img{
  max-width: 80px;
}
.euser-img-small{
  max-width: 60px;
}
.span-icon{
  margin-left: 10px;
  margin-right: 10px;
  font-size: 20px;
  cursor: pointer;
}
.uploaded{
  color: #2b39ff;
}

.div-screen-blocker{
  width: 100%;
  height: 100%;
  z-index: 99;
  background-color: #313030b9;
  display:none;
  position:fixed;
  align-items: center;
  justify-content: center;
}

.add-flex{
  display:flex;
}
.div-disp-screen-blocker{
  z-index: 100;
}
.inv-slip-big{
  max-width: 600px;
}
.txt-score{
  width: 40px;
  border-radius: 5px 5px 5px 5px;
  border-color: #d6d6d6;
}

/* --------------------------------------------------------------------------- */
.span-save{
  font-size: 22px;
  cursor: pointer;
  color: #2b39ff;
}
.div-forgot{
  font-size: 14px;
  cursor: pointer;
  color: #2b39ff;
  margin-top: 15px;

}
.prize-pic{
  max-width: 80px;
  max-height: 100px;
  cursor: pointer;
}
.my_profile_name{
  font-size: 38px;
  font-weight: 700;
  cursor: pointer;
  color: #2b39ff;
}

.my_profile_rank{
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
  margin-top: -14px;
}
.my_profile_star{
  cursor: pointer;
  margin-top: -5px;
}
.eUser-label{
  font-size: 12px;
  font-style: italic;
}
.prize-card{
  max-height: 400px;
}




/* Style for the heading with a black bar */
.black-bar {
  position: relative;
  font-size: 20px;
  font-weight: bold;
  color: #000; /* Text color */
  margin: 10px 0;
  padding-left: 15px; /* Space between bar and text */
}

.black-bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px; /* Width of the black bar */
  height: 100%; /* Matches text height */
  background-color: black; /* Black color for the bar */
}





.div_wc_img {
  display: inline-block;
  width: 172px;
  height: 234px;
  margin: 1px;  /*Adjust space between items*/
  /* border: 1px solid #ddd; */
  overflow: hidden;
  vertical-align: top;
  cursor: pointer;
  transition: transform 0.2s;
}

.wc_img_list {
  max-width: 234px;
  height: 100%;
  object-fit:contain;
}

.div_wc_img:hover {
  transform: scale(1.30); /* Slight zoom effect */
}




.wc-info-label{
  font-weight: bold;
  font-size: 18px;
}

.span-trait{
  padding: 2px 7px 2px 7px;
  background: #00bd3f;
  color: #ffffff;
  font-weight: bold;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.63);
  border-radius: 2px 2px 2px 2px;
  margin-right: 5px;
  display:inline-block;
  margin-bottom: 3px;
  font-size: 14px;  

}

.span-lrig{
  padding: 2px 9px 2px 9px;
  background: #ffffff;
  color: #000000;
  font-weight: bold;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.63);
  border-radius: 2px 2px 2px 2px;
  margin-right: 5px;
  display:inline-block;
  margin-bottom: 3px;
  font-size: 14px;  
  border: 1px solid #b5c200;

}

.span-signi{
  padding: 2px 9px 2px 9px;
  background: #000000;
  color: #eeff00;
  font-weight: bold;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.63);
  border-radius: 2px 2px 2px 2px;
  margin-right: 5px;
  display:inline-block;
  margin-bottom: 3px;
  font-size: 14px;  

}

.span-timing{
  padding: 2px 9px 2px 9px;
  background: #eeeeee;
  color: #000000;
  font-weight: bold;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.63);
  border-radius: 2px 2px 2px 2px;
  margin-right: 5px;
  display:inline-block;
  margin-bottom: 3px;
  font-size: 14px;  
  border: 1px solid #00973a;

}

.modal-holder{
  background: #ffffff;
}

.inline-icon{
  height: 25px;
  vertical-align: middle;
  display: inline-block;
}

.b-inline-icon{
  height: 23px;
  vertical-align: middle;
  display: inline-block;
}

.row-hirameki{
  background:#fdd0d0c7 ;
  border-radius: 5px 5px 5px 5px;
  margin-bottom: 1px;
}

.cc-hirameki{
  color: #bd0000;
  font-weight: bold;
}

.row-cutin{
  background:#bfc0f7c7 ;
  border-radius: 5px 5px 5px 5px;
  margin-bottom: 1px;
}

.cc-cutin{
  color: #2544ca;
  font-weight: bold;
}

.row-disguise{
  background:#ffcbeec7 ;
  border-radius: 5px 5px 5px 5px;
  margin-bottom: 1px;
}

.row-abi{
  /* background:#c7c7c7c7 ; */
  background:#e4e4e4d3 ;
  border-radius: 5px 5px 5px 5px;
  margin-bottom: 1px;
}
.cc-disguise{
  color: #c900bf;
  font-weight: bold;
}
.btn-filter {
  background: rgb(131, 255, 131); /* Default green */
}

.btn-filter.active-filter {
  background: rgb(187, 187, 187); /* Toggled red */
}

.cc-info-partner{
  padding: 1px 6px 1px 6px;
  background: #d40d7b;
  color: #ffffff;
  border-radius: 0px 10px 10px 0px;
  display: inline-block;
  margin: 0px 0px 2px 0px;

}
.double-bracket{
  font-weight: bold;
}
.cc-info-turn{
  padding: 1px 6px 1px 6px;
  background: #03aebb;
  color: #ffffff;
  border-radius: 10px 10px 10px 10px;
  display: inline-block;
  margin: 0px 0px 2px 0px;

}

.cc-info-bond{
  padding: 1px 6px 1px 6px;
  background: #ffffff;
  color: #000000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.63);
  /* border-radius: 10px 10px 10px 10px; */
  display: inline-block;
  margin: 0px 0px 2px 0px;

}

.wc-info-bond{
  padding: 1px 6px 1px 6px;
  border: 1px solid #000;
  background: #ffffff;
  color: #000000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.63);
  /* border-radius: 10px 10px 10px 10px; */
  display: inline-block;
  margin: 0px 0px 2px 0px;

}


.wc-flavor{
  font-style: italic;
}

.wc-burst{
  padding-top: 10px;
  padding-bottom:  10px;
  background-color: #c2c2c28e;
}


.cc-info-sleep{
  padding: 1px 6px 1px 6px;
  background: #8b7fbc;
  color: #ffffff;
  border-radius: 5px 5px 5px 5px;
  display: inline-block;
  margin: 0px 0px 2px 0px;

}

.cc-info-sys{
  padding: 1px 6px 1px 6px;
  background: #000000;
  color: #ffffff;
  border-radius: 5px 5px 5px 5px;
  display: inline-block;
  margin: 0px 0px 2px 0px;
}

.cc-info-our{
  padding: 1px 6px 1px 6px;
  background: #e50010;
  color: #ffffff;
  border-radius: 6px 6px 6px 6px;
  display: inline-block;
  margin: 0px 0px 2px 0px;
}

.cc-info-opp{
  padding: 1px 6px 1px 6px;
  background: #f18507;
  color: #ffffff;
  border-radius: 6px 6px 6px 6px;
  display: inline-block;
  margin: 0px 0px 2px 0px;
}

.cc-info-main{
  padding: 1px 6px 1px 6px;
  background: #217dc9;
  color: #ffffff;
  border-radius: 6px 6px 6px 6px;
  display: inline-block;
  margin: 0px 0px 2px 0px;
}
/* ------------------------------------------------------------------------- */
.cc-info-disguise{
  padding: 1px 6px 1px 6px;
  background: #da3282;
  color: #ffffff;
  border-radius: 6px 6px 6px 6px;
  display: inline-block;
  margin: 0px 0px 2px 0px;
}

.cc-info-case{
  padding: 1px 6px 1px 6px;
  background: #e63470;
  color: #ffffff;
  border-radius: 3px 3px 3px 3px;
  display: inline-block;
  margin: 0px 0px 2px 0px;

}

.cc-info-file{
  padding: 1px 6px 1px 6px;
  background: #e1060a;
  color: #ffffff;
  border-radius: 10px 10px 10px 10px;
  display: inline-block;
  margin: 0px 0px 2px 0px;

}

.cc-info-cutin{
  padding: 1px 6px 1px 6px;
  background: #000000;
  color: #ffffff;
  border-radius: 15px 15px 15px 15px;
  display: inline-block;
  margin: 0px 0px 2px 0px;
}

.cc-info-hirameki{
  padding: 1px 6px 1px 6px;
  background: #940000;
  color: #ffffff;
  border-radius: 15px 15px 15px 15px;
  display: inline-block;
  margin: 0px 0px 2px 0px;
}

.cc-info-id{
  font-size: 14px;
  font-weight: bolder;
  
}

.cc-info-label{
  font-weight: bolder;
  font-size: 25px;
}

.menu-profile{
  padding-top: 8px;
}
.custom-nav-link{
  color: #0d0e70;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-size: 20px;
  font-weight: 600;
  font-style: normal;
  
}

.link-active{
    font-weight: 700;
    color: #b8df0b;
}

.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* Aspect ratio 16:9 */
  overflow: hidden;
}

.video-container iframe, 
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.span-dl{
  padding: 10px 40px 10px 40px;
  border:  2px solid #0d0e70;
  background-color: #fff;
  width: 300px;
  margin-top: 10px;

}

/* -------------------------------------------------------------------------------------------- */

.h3-conan{
  background: url("/static/pics/hbg.png") no-repeat ;
  background-size:cover; /* Ensures the background scales */
  color:#fff;
  padding: 10px;
  border-radius: 10px 10px 10px 10px;
}

.ModalEdit{
  margin-left: 10px;
}

.cc-info-faq{
background-color: #fff;
font-size: 14kpx;
padding-left: 5px;
padding-right: 5px;
}

.cc-info-blue{
  padding: 0px 5px 0px 5px;
  background: #1809f3;
  color: #ffffff;
  border-radius: 20px 20px 20px 20px;
  display: inline-block;
  margin: 0px 0px 2px 0px;
}

.cc-info-green{
  padding: 0px 5px 0px 5px;
  background: #00a53f;
  color: #ffffff;
  border-radius: 20px 20px 20px 20px;
  display: inline-block;
  margin: 0px 0px 2px 0px;
}

.cc-info-white{
  padding: 0px 5px 0px 5px;
  background: #ffffff;
  color: #000000;
  border-radius: 20px 20px 20px 20px;
  display: inline-block;
  margin: 0px 0px 2px 0px;
}

.cc-info-red{
  padding: 0px 5px 0px 5px;
  background: #9b0000;
  color: #ffffff;
  border-radius: 20px 20px 20px 20px;
  display: inline-block;
  margin: 0px 0px 2px 0px;
}

.cc-info-yellow{
  padding: 0px 5px 0px 5px;
  background: #fbff04;
  color: #000000;
  border-radius: 20px 20px 20px 20px;
  display: inline-block;
  margin: 0px 0px 2px 0px;
}

.cc-info-black{
  padding: 0px 5px 0px 5px;
  background: #000000;
  color: #ffffff;
  border-radius: 20px 20px 20px 20px;
  display: inline-block;
  margin: 0px 0px 2px 0px;
}

.cc-info-mr{
  color: #cc0000;
  display: inline;
  font-weight: bold;
}

.div-prize-content{
  font-size: 32px;
  font-weight: bold;
  color: #1809f3;
}
.event-prize-pic{
  max-height: 390px;
}

.modal-backdrop.show {
    backdrop-filter: blur(300px);
    background-color: rgba(0, 0, 0, 0.5) !important;
}





.div-news {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.div-news-list {
  font-size: 16px;
}

.div-news-date {
  font-weight: bold;
  font-size: 14px;
  color: #555;
}

.div-news-subject {
  font-size: 16px;
  color: #007bff;
  transition: 0.2s ease;
}

.div-news-subject:hover {
  color: #0056b3;
  text-decoration: underline;
}

.send-email {
  color: #28a745;
  font-size: 18px;
  display: inline-block;
  margin-left: 10px;
}

.send-email:hover {
  color: #1e7e34;
  cursor: pointer;
}

.pagination .btn {
  border: none;
  background-color: #f0f0f0;
  margin: 0 4px;
  color: #333;
  font-size: 14px;
}

.pagination .btn:hover {
  background-color: #ddd;
}

.pagination .current {
  font-weight: 500;
}

.tt-credit{
  font-size: 12px;
  color: #555;
  font-weight: bold;
  display:block;
  margin-top: 10px;
}
.cc-obtian{
  font-size: 12px;
  font-style: italic;  
  margin-top: -8px;
  margin-bottom: 8px;
}