body {
  /*font-family: DM Sans, Roboto, sans-serif !important;*/
  font-family: Inter, Helvetica Neue, Helvetica, Arial, sans-serif !important;
  margin:0;
  padding:0;
  background: #f9f9f9;
  font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  color: #6d7081;
}

h1, h2 {
  color: #333;
}
.title-admin{
    font-size: 22px;
    font-weight: 700;
}
.subtitle{
    color:#FFF;
    font-size: 12px;
    margin:8px 0px 20px 0px;
    padding:0px;
    line-height: 14px;
}
img{
    max-width: 100%;
}
.body{
    background-size: cover;
    background-repeat: repeat;
    background-image: url("images/cta-bg-min.jpg");
    min-height: 100vh
}
.body2{
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(images/standy-image.png);
    min-height: 100vh;
   background-position: center center
}
.body3{
    background-size: cover;
    background-repeat: repeat;
    background-image: url("images/standy-image3.png");
    min-height: 100vh
}
.bodykobe{
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(images/kobe.jpg);
    min-height: 100vh;
   background-position: center center
}

.adminbody{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("images/testbackground-1-scaled.jpg");
    min-height: 100vh
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  box-shadow: 0px 5px 5px #7765cb12;
  border-radius: 20px;
}

table, th, td {
  border: 0px solid #ddd;
}
th{
    color: #4f505f;
    font-weight: 900;
    font-size: 14px;
}
tr{
    background-color: #FFFF;
}
th, td {
  padding: 15px 13px !important;
  text-align: left;
}
.message{
    color: #FFF;
    margin: 0px 0px;
}
.message-admin{
    color: #000;
    margin: 0px 0px;
}
.badge-claim{
    background-color: #04a15a;
    padding: 2px 10px;
    color: #FFF;
    border-radius: 10px;
}
.btn, .btn-edit, .btn-delete {
  padding: 5px 10px;
  text-decoration: none;
  border-radius: 4px;
}

.btn {
  background: #007bff;
  color: white;
}

.btn-edit {
  background: #ffc107;
  color: black;
}

.btn-delete {
  background: #dc3545;
  color: white;
}
.formlogreg{
    display: inline-grid;
    width:100%;
}
.formlogreg-label{
    color: #4f505f;
}
.listingname{
    background: #f3f6fb url("images/bodypattern.jpg");
    background-size: contain;
    background-repeat: repeat;
}
.listing{
    max-width:50%;
    margin:0 auto;
}
.listing-sponsor{
    max-width:80%;
    margin:0 auto;
}
.login-admin{
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 75%;
    background-image: url("images/heromain-min-1-scaled-min.png");
}
.nike{
    max-width:30%;
    margin:30px auto 0 auto;
}
.login{
/*    max-width:50%;
    margin:30px auto 0 auto;*/
    max-width: 45%;
    margin: 70px 0px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: hsla(0, 0%, 100%, .11);
    border-radius: 20px;
    font-size: 16px;
    line-height: 22px;
    overflow: hidden;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.loginbody{
    border-radius: 20px;
    font-size: 16px;
    line-height: 22px;
    overflow: hidden;
    padding: 35px;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.loginbody input{
    border-radius: 36px !important;
    padding: 6px 10px !important;
    min-height: 46px !important;
}
.loginbody h2{
    text-align: center;
    font-size:22px;
    color:#FFF;
    margin:20px auto;
}
.loginbody h1{
    text-align: center;
    font-size:26px;
    color:#FFF;
    margin:20px auto;
    font-weight: 500;
}
.spon-body{
    background:#261fe9 url('images/cta-bg-min2.jpg'); 
    border-bottom-left-radius: 26px;
    border-bottom-right-radius: 26px;
    background-size: cover;
}
.spon-container{
    width:1024px; 
    margin:0px auto; 
    padding: 30px 15px 20px 15px;
}
.spon-alabLogo{
    width:48px; 
    height: 48px; 
    border:1px solid #FFF; 
    border-radius: 50%;
    background-color: #FFF;
}
.spon-title{
    color:#FFF; 
    font-size: 16px;
}
.spon-subtitle{
    color:#FFF; 
    font-size: 12px;
}
.spon-icon{
    width: 48px; 
    height: 48px; 
    border-radius: 30%; 
    padding: 8px; 
    background: #ffffff5c;
}
.spon-icon-search{
    width: 56px; 
    height: 48px; 
    border-radius: 30%; 
    padding: 8px; 
    background: #ffffff5c;
}

.search-input{
    background-color: #ffffff63 !important;
    border-radius: 36px !important;
    min-height: 46px;
    border: 0px none;
    color: #FFF;
}
.formlogreg input::placeholder {
  color: #FFF;
}

.search-btn{
    padding: 0px 0px;
    border-radius: 22%;
    background: #ffffff5c;
}
.details{
    font-size: 13px;
    color: #777;
    line-height: 1.6;
    font-family: Inter, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.spon-card{
    border-radius:16px; 
    padding: 20px; 
    text-align: center; 
    background-color: #FFF; 
    border:1px solid #33332e14;
}
.spon-card-container{
    width:100px; 
    margin:20px auto;
}
.spon-profile-base{
    background: linear-gradient(to right, red, purple);
    padding: 5px;
    border-radius: 50%;
    width: 95px;
    height: 95px;
}
.spon-profile{
    width: 86px;
    height: 86px;
    border-radius: 50%;
    border: 5px solid #FFF;
    background: #f0eeee;
}


label{
    color: #FFF;
    font-size:14px;
    margin-bottom: 5px;
}
select{
    height: 52px !important;
}
input, select{
    background: #FFF;
    border-radius: 36px;
    padding: 6px 10px;
    width: 100%;
    height: 36px;
    font-size: 16px;
    margin-bottom: 5px;
    border:0px;
    border:1px solid #eaeef5;
    background-color: #ebeff4;
}

.card{
    border:1px solid #d8dae0;
    background-color: #FFF;
    padding: 15px 25px;
    border-radius: 8px;
    margin-bottom: 15px;
}
.card p{
    margin: 3px 0px;
    padding: 3px 0px;
}
.icon{
    background-color: #f2f3f6;
    width: 124px;
    height: 124px;
    border-radius: 8px;
    display: flex;
    padding: 5px;
    align-items: center;
    justify-content: center;
}
.icon img{
    height: 124px;
    width: 124px;
}
.heading-details{
     line-height: 24px;
    font-size: 14px;
    margin: 0;
    font-weight: 700;
}
.details{
    line-height: 24px;
    font-size: 14px;
    margin: 0;
}
.cardid{
    padding: 8px 15px;
    margin-left: 5px;
    font-size: 14px;
    font-weight: 500;
    background-color: #ebeff4;
    color:#616d7c;
    border-radius: 30px;
}

.list-btn {
    padding: 8px 20px;
    margin-left: 5px;
    font-size: 14px;
    font-weight: 400;
    background-color: #7765cb;
    border-radius: 30px;
    color: #FFF;
    text-decoration: none;
    transition: 0.3s;
    display: inline-block;
}
.list-btn:hover{
    background-color: #5e4fa4;
}

.form-flex{
    display: flex;
}
.custominput{
    width: 100%;
    display: inline-block;
    position: relative;
    flex: inherit;
    box-sizing: border-box;
    min-height: 46px;
}

@media only screen and (max-width: 600px) {
    .body{
        background-position: right;
    }
    .body2{
        background-position: 72% 75%;
    }
    .login, .nike{
        max-width:100%;
        margin:50px auto 0 auto;
    }
    .loginbody{
        padding: 30px;
    }
    .form-flex{
        display: inline-block;
    }
    .custominput{
        width: 95%;
    }
    .search-box-btn, .search-box a.btn, .regbtn{
        margin: 10px 0px;
        padding: 10px 20px !important;
    }
    .topsponsor{
        background-size: contain;
        padding: 40px 20px !important;
        border-bottom-left-radius: 32px;
        border-bottom-right-radius: 32px;
    }
    .login-admin{
        background-size: 120% !important;
    }
    .spon-container{
        width: 100% !important;
    }

}

.loginbtn{
    background-color: #FBDE01; 
    color: #000 !important;
    margin:20px 0px;
    border: 1px solid #eacf0a;
    min-height: 46px;
    width: 100%;
    border-radius: 38px;
}
button {
    border-radius: 8px;
    text-align: center;
    color: white;
    cursor: pointer;
    border: none;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
}


.search-form {
  display: flex;
  gap: 8px;
}

.search-form input[type="text"] {
  padding: 6px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f8f9fd;
  border-radius: 20px;
}

.search-form button {
  background: #007bff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-clear {
  background: #6c757d;
  color: white;
  padding: 6px 10px;
  border-radius: 4px;
  text-decoration: none;
}

.topsponsor{
    background-size: cover;
    background-repeat: repeat;
    background: #261fe9 url("images/cta-bg-min.jpg");
    background-position: top;
    padding: 10px;
}


.top{
  /*background-color: #261fe9;*/
   background-size: cover;
background-repeat: repeat;
 background: #261fe9 url("images/cta-bg-min.jpg");
 background-position: top;
  padding: 10px;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    color:#FFF;
    font-size: 14px;
}
.top-bar img{
    width: 20%;
}
.top-bar a {
  color: #7765cb;
    background: #FFF;
    padding: 10px 30px;
    border-radius: 23px;
    text-decoration: none;
    margin: 0 5px;
}

.searh-area{
    background-color: #FFF;
    box-shadow: 0px 5px 5px #7765cb12;
    position: relative;
    display: flow-root;
    margin-bottom: 45px;
}

.search-box {
    margin-bottom: 0px;
}
.search-box input {
    padding: 5px 20px;
    width: 370px;
    min-height: 46px;
    background-color: #FFF;
    border-radius: 30px;
}
.search-box-btn {
    padding: 10px 35px;
    margin-left: 5px;
    font-size: 14px;
    font-weight: 500;
    background-color: #261fe9;
    border-radius: 30px;
    transition: 0.3s;
    color: #FFF;
    line-height: 28px;
    text-decoration: none;
}

.nav-link{
    color: #4f505f !important;
}
.nav-item .active{
    color: #f62025 !important;
}
.nav-link:hover{
    color: #f62025 !important;
}

.nav{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.nav li{
    list-style: none;
    padding: 0px 10px;
    float: left;
    width: auto;
    border: none;
    display: block;
}
.nav li a{
     color: #4f505f;
     text-decoration: none;
}
.nav li a:hover{
    text-decoration: none;
    color: #f62025;
}
.small, small {
    font-size: .775em !important;
}
.regbtn {
    padding: 15px 35px;
    margin-left: 5px;
    font-size: 14px;
    font-weight: 500;
    background-color: #edf0f7 !important;
    border-radius: 30px;
    transition: 0.3s;
    color: #7765cb !important;
    font-weight: 500;
    text-decoration: none;
}
.regbtn:hover{
    background-color: #d6dae4 !important;
}

.search-box-btn:hover{
    background-color: #0d0896;
}
.search-box a.btn{
     padding: 10px 35px;
    margin-left: 5px;
    font-size: 14px;
    font-weight: 500;
    background-color: #261fe9;
    border-radius: 30px;
     transition: 0.3s;
     line-height: 28px;
}
.search-box a.btn:hover{
     background-color: #3e454b !important; 
     color: #FFF !important;
}
.formreg{
    background-color: #FFF;
    border-radius: 10px;
    border:1px solid #D8DAE4;
    padding: 30px;
    width: 50%;
    margin: 20px auto 20px auto;
}

tr:nth-child(even) {
    background-color: #fafbfe;
}

tr:first-child th:first-child{
    border-top-left-radius: 20px;
}
tr:first-child th:last-child{
    border-top-right-radius: 20px
}


tr:last-child td:first-child{
    border-bottom-left-radius: 20px;
}
tr:last-child td:last-child{
    border-bottom-right-radius: 20px
}

tr:last-child td{
    border-bottom-width:0px !important;
}
a.btn {
    display: inline-block;
    background: #007bff;
    color: white;
    font-size: 16px;
    padding: 6px 10px;
    text-decoration: none;
    border-radius: 4px;
    /*margin-bottom: 10px;*/
}
a.btn:hover {
    background: #0056b3;
}
.pagination {
    margin-top: 15px;
}
.pagination a {
    padding: 6px 12px;
    margin: 2px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
}
.pagination a.active {
    background-color: #007bff;
    color: white;
}
.pagination a:hover {
    background-color: #007bff;
    color: white;
}

.card-preview {
    width: 350px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    background: #fff;
    font-family: Arial, sans-serif;
}

.card-preview .card-header {
    background: linear-gradient(135deg, #007bff, #6610f2);
    color: #fff;
    padding: 15px;
    text-align: center;
}

.card-preview .card-body {
    padding: 20px;
    font-size: 14px;
}

.card-preview .card-body p {
    margin-bottom: 10px;
}

.card-preview .card-footer {
    background: #f8f9fa;
    padding: 10px;
}
.card-preview2 {
    width: 350px;
    overflow: hidden;
}