

.text-shadow{
    text-shadow: 1px 3px 4px #000a27;
}


/* ----------------------------------
   TEXT COLORS
---------------------------------- */
.text-light { color: #eaeaea !important; }
.text-lightWhite {color:#bababa !important};
.text-dark { color: #212529 !important; }
.text-muted { color: #6c757d !important; }
.text-hotpink { color: #fb0fff !important; }
.text-darkpink { color: #c200b2 !important; }
.text-primary { color: #110dfd !important; }
.text-darkprimary { color: #590dfd !important; }
.text-success { color: #198754 !important; }
.text-warning { color: #ffc107 !important; }
.text-danger { color: #dc3545 !important; }
.text-info { color: #0dcaf0 !important; }
.text-darkInfo { color: #00bcb9 !important; }
.text-white { color: #ffffff !important; }
.text-black { color: #000000 !important; }

/* ----------------------------------
   TEXT SIZES
---------------------------------- */
.text-xs { font-size: 0.75rem !important; }
.text-sm { font-size: 0.875rem !important; }
.text-md { font-size: 1rem !important; }
.text-lg { font-size: 1.25rem !important; }
.text-xl { font-size: 1.5rem !important; }
.text-2xl { font-size: 2rem !important; }
.text-2xxl { font-size: 2.5rem !important; }
.text-3xl { font-size: 3rem !important; }
.text-3xxl { font-size: 3.5rem !important; }
.text-4xl { font-size: 4rem !important; }
.text-4xxl { font-size: 4.5rem !important; }
.text-5xl { font-size: 5rem !important; }
.text-5xxl { font-size: 5.5rem !important; }
.text-6xl { font-size: 6rem !important; }
.text-6xxl { font-size: 6.5rem !important; }

.textShadowDark{
  text-shadow: 0px 0px 2px #000000;
}
.textShadowLight{
  text-shadow: 0px 0px 2px #ffffff;
}

/* ----------------------------------
   BACKGROUND COLORS
---------------------------------- */
.bg-light { background: #f8f9fa !important; color: #000; }
.bg-dark { background: #17181a !important; color: #fff; }
.bg-veryDark { background: #17181a !important; color: #fff; }
.bg-primary { background: #0d6efd !important; color: #fff; }
.bg-success { background: #198754 !important; color: #fff; }
.bg-warning { background: #ffc107 !important; color: #000; }
.bg-danger { background: #dc3545 !important; color: #fff; }
.bg-info { background: #0097b6 !important; color: #ffffff; }
.bg-white { background: #ffffff !important; color: #000; }
.bg-black { background: #000000 !important; color: #fff; }


.bg-light:hover { background: #c4c4c4 !important; color: #000; }
.bg-dark:hover {  background: #000000 !important; color: #fff; }
.bg-primary:hover {  background: #003f9d !important; color: #fff; }
.bg-success:hover {  background: #015b31 !important; color: #fff; }
.bg-warning:hover {  background: #ffd65c !important; color: #000; }
.bg-danger:hover {  background: #d60217 !important; color: #fff; }
.bg-info:hover {  background: #005869 !important; color: #ffffff; }
.bg-white:hover {  background: #cdcdcd !important; color: #000; }
.bg-black:hover {  background: #1b1a1a !important; color: #fff; }


.bc-light{border: 2px solid rgb(190, 190, 190)}
.bc-white{border: 2px solid rgb(255, 255, 255)}
.bc-dark{border: 2px solid rgb(40, 40, 40)}
.bc-primary{border: 2px solid rgb(0, 0, 160)}
.bc-info{border: 2px solid rgb(0, 124, 165)}
.bc-warning{border: 2px solid rgb(229, 149, 0)}
.bc-success{border: 2px solid rgb(0, 88, 9)}

/* ----------------------------------
   PADDING (p-1 to p-5)
---------------------------------- */
[class^="p-"], [class*=" p-"] {
  box-sizing: border-box;
}
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

/* Padding x/y */
.px-1 { padding-left: .25rem; padding-right: .25rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
/* (Repeat px-2, py-2, px-3... if needed) */

/* ----------------------------------
   MARGIN (m-1 to m-5)
---------------------------------- */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }

.mx-1 { margin-left: .25rem; margin-right: .25rem; }
.my-1 { margin-top: .25rem; margin-bottom: .25rem; }

.mx-auto { margin-left: auto; margin-right: auto; }

/* Margin x/y */
/* // width manage ment  */
/* Fixed increments */
.w-01 { width: 0.1rem; }
.w-02 { width: 0.2rem; }
.w-03 { width: 0.3rem; }
.w-04 { width: 0.4rem; }
.w-05 { width: 0.5rem; }
.w-06 { width: 0.6rem; }
.w-07 { width: 0.7rem; }
.w-08 { width: 0.8rem; }
.w-09 { width: 0.9rem; }
.w-1 { width: 1.0rem; }
.w-1xl { width: 1.25rem; }
.w-1xxl { width: 1.5rem; }
.w-2 { width: 2.0rem; }
.w-2xl { width: 2.25rem; }
.w-2xxl { width: 2.5rem; }
.w-3 { width: 3.0rem; }
.w-3xl { width: 3.25rem; }
.w-3xxl { width: 3.5rem; }
.w-4 { width: 4.0rem; }
.w-4xl { width: 4.25rem; }
.w-4xxl { width: 4.5rem; }
.w-5 { width: 5.0rem; }
.w-5xl { width: 5.25rem; }
.w-5xxl { width: 5.5rem; }
.w-6 { width: 6.0rem; }
.w-6xl { width: 6.5rem; }
.w-7 { width: 7.0rem; }
.w-7xl { width: 7.5rem; }
.w-8 { width: 8.0rem; }
.w-8xl { width: 8.5rem; }
.w-9 { width: 9.0rem; }
.w-9xl { width: 9.5rem; }
.w-10 { width: 10.0rem; }
.w-11 { width: 11.0rem; }
.w-12 { width: 12.0rem; }
.w-13 { width: 13.0rem; }
.w-14 { width: 14.0rem; }
.w-15 { width: 15.0rem; }
.w-16 { width: 16.0rem; }
.w-17 { width: 17.0rem; }
.w-18 { width: 18.0rem; }
.w-19 { width: 19.0rem; }
.w-20 { width: 20.0rem; }
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; } /* Full width */


/* ///============border radius=============== */
.br-1{border-radius:1px;}
.br-2{border-radius:2px;}
.br-3{border-radius:3px;}
.br-4{border-radius:4px;}
.br-5{border-radius:5px;}
.br-6{border-radius:6px;}
.br-7{border-radius:7px;}
.br-8{border-radius:8px;}
.br-9{border-radius:9px;}
.br-10{border-radius:10px;}
.br-11{border-radius:11px;}
.br-12{border-radius:12px;}
.br-13{border-radius:13px;}
.br-14{border-radius:14px;}
.br-15{border-radius:15px;}
.br-16{border-radius:16px;}
.br-17{border-radius:17px;}
.br-18{border-radius:18px;}
.br-19{border-radius:19px;}
.br-20{border-radius:20px;}
.br-21{border-radius:21px;}
.br-22{border-radius:22px;}
.br-23{border-radius:23px;}
.br-24{border-radius:24px;}
.br-25{border-radius:25px;}
.br-26{border-radius:26px;}
.br-27{border-radius:27px;}
.br-28{border-radius:28px;}
.br-29{border-radius:29px;}
.br-30{border-radius:30px;}


/* ----------------------------------
   COLUMN CLASSES (col-1 to col-12)
----------------------------------- */


.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }


.tableTitle{
  color: #b8b8b8;
  font-size: 15px;
}
.tableSubTitle{
  font-size:12px;
  color: #5a6e7e;
}
/* //table select limits and search */
.tableTopdiv{
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 15px;
  align-items: center;
}
.tableSetLimits{
  background:#111;
  color:#fff;
  padding:6px;
  border-radius:5px;
  border: 1px solid #444;
  margin: 0 6px;
}
.tableSearchInput{
  padding: 8px 12px;
  width: 250px;
  border-radius: 6px;
  border:1px solid #444;
  background: #111;
  color: #fff;
}

.dt-button {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    margin-left: 0.167em;
    margin-right: 0.167em;
    margin-bottom: 0.333em;
    padding: 0.5em 1em;
    border: 1px solid rgb(192 192 192 / 30%) !important;
    border-radius: 6px !important;
    cursor: pointer;
    font-size: 0.88em;
    line-height: 1.6em;
    color: #fff !important;
    white-space: nowrap;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.1);
    background: linear-gradient(to bottom, rgb(22 22 23) 0%, rgb(0 0 0) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="rgba(229.5, 229.5, 229.5, 0.1)", EndColorStr="rgba(0, 0, 0, 0.1)");
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    outline: none;
    text-overflow: ellipsis;
}

div.dt-buttons .dt-button {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tdFirst{
	text-align: -webkit-left !important;
}
.tdSecond{
	text-align: -webkit-right !important;
}


/* --- Force First Header to the Left --- */
.align-left-column .dt-column-header {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* --- Force Second Header to the Right --- */
.align-right-column .dt-column-header {
    justify-content: flex-end !important;
    text-align: right !important;
}

/* Ensure the data cells (td) also follow this alignment */
.align-left-column {
    text-align: left !important;
}

.align-right-column {
    text-align: right !important;
}

.align-center-column {
    text-align: center !important;
}


/* Optional: match your theme's header background */
.nftmax-table__main thead th {
    /* background-color: #030b17; */
    color: #b1b1b1;
    border-bottom: 1px solid #2e2f45;
    padding: 15px;
}

table.dataTable.display > tbody > tr > * {
    border-top: 1px solid rgb(200 200 200 / 19%) !important;
}

.tableBackmanage{
    background: #06080e;
    border: 1px solid #504e4e;
    border-radius: 12px;
    margin-top: 10px !important;
}



@media only screen and (min-width: 768px) and (max-width: 1278px) {
  .tableTopdiv{
    flex-direction: column;
  }
}
@media only screen and  (max-width: 767px) {
  .tableTopdiv{
    flex-direction: column;
  }
  .tableSearchInput{
    margin-top: 12px;
  }
}
/* //end table select limits and search */




/* ----------------------------------
   FLEX UTILITIES
---------------------------------- */
.d-flex { display: flex !important; }
.flex-row {
  display: flex !important;
  gap:10px;
  flex-direction: row !important; 
}
.flex-column { flex-direction: column !important; }

.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-end { justify-content: flex-end !important; }

.items-start { align-items: flex-start !important; }
.items-center { align-items: center !important; }
.items-end { align-items: flex-end !important; }

.flex-wrap { flex-wrap: wrap !important; }

/* ----------------------------------
   GRID SYSTEM (Row + Column)
---------------------------------- */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

[class^="col-"] {
  padding-left: .5rem;
  padding-right: .5rem;
}


/*//-------------------------loding css*/
/* Full-screen overlay */
.loading-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
  display: flex; /* Use flexbox for centering */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensure it's on top of other content */
  visibility: hidden; /* Hidden by default 
  opacity: 0; /* Fade out effect */
  transition: visibility 0s, opacity 0.5s linear; /* Transition for fading */
}

.loading-popup.show {
  visibility: visible;
  opacity: 1;
}

.spinner {
  border: 4px solid #f3f3f3; /* Light grey */
  border-top: 4px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite; /* Spinner animation */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-popup p {
  color: white;
  margin-top: 10px;
}

/*----------------------end loading css*/






/* Alert box (hidden by default) */
/*.top-alert {*/
/*  position: fixed;*/
 /* top:60px; /* hidden above screen */
/*  left: 50%;*/
/*  transform: translateX(-50%);*/
  /*background-color: #4caf50; /* green */
/*  color: white;*/
/*  padding: 15px 25px;*/
/*  border-radius: 8px;*/
/*  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);*/
/*  z-index: 10000;*/
/*  transition: top 0.4s ease;*/
/*  font-family: sans-serif;*/
/*}*/

/* When visible */
/*.top-alert.show {*/
  /*top: 20px; /* slide into view */
/*}*/



/* The popup Modal (background) */
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
     position: relative;
    background-color: #062831;
    margin: auto;
    padding: 0;
    border: 2px solid #003366;
    border-radius: 15px;
      width: 22rem;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #003144;
  color: white;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.modal-body {padding: 2px 16px;}

.modal-header, .modal-footer {
    padding: 10px 12px;
}

.modal-header h2, .modal-footer h3 {
    margin: 0;
}

#signin-form {
    display: flex;
    flex-direction: column;
}

#signin-form label {
    margin: 8px 0 4px;
}

#signin-form input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.btn-signin {
    margin-top: 15px;
    padding: 10px;
    background-color: #2600fc;
    background-image: linear-gradient(25deg, #ff00ea, #2600fc);

    border: none;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

.small-text {
    margin-top: 10px;
    font-size: 14px;
}
/*--end modal popup------*/

/* /////stickers =================== */
.sticker{
    background: #08121a !important;
    padding: 10px 15px !important;
    border: 2px solid #595959 !important;
    border-radius: 10px !important;
}

.boxDesign{
  background: #03090d !important;
  border: 2px solid #404747 !important;
  padding: 10px !important;
}

