body {
    font-family: 'Poppins', sans-serif;

}
.carousel-item img {
    height: 500px;
    object-fit: cover;
}
*{
    box-sizing:border-box;
}

.carousel-caption {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 10px;
}

#why-scrapebet i {
    transition: transform 0.3s ease-in-out;
}

#why-scrapebet i:hover {
    transform: scale(1.1);
}

footer {
    margin-top: 0px;
}

.container-prediction{
    background-color: #ededed !important;
    margin-bottom: 15px !important;
}
.tr.border.p-4.mt-1.mb-1.container-prediction {
    background-color: #ededed !important;
    color: black;
    border-radius: 5px;
    border:1px solid #ccc !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.slider-container {
    width: 100vw; /* Full width */
    height: 100vh; /* Full height of viewport */
    overflow: hidden;
    position: relative;
}

.slider-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the screen without distortion */
}

.slider-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}



#heroSlider .carousel-inner {
    height: 100vh; /* Fullscreen */
}

#heroSlider .carousel-item {
    height: 100vh;
}

#heroSlider img {
    object-fit: cover;
    height: 100vh;
}

.carousel-caption {
    background: rgba(0, 0, 0, 0.5); /* Adds a slight dark overlay for better readability */
    padding: 20px;
    border-radius: 10px;
}


.carousel-caption {
    position: absolute;
    top: 50%;
    left: 10%;  /* Adjust left margin */
    transform: translateY(-50%); /* Center vertically */
    text-align: left; /* Align text to the left */
    background:none;  /* rgba(0, 0, 0, 0.5);Optional: dark overlay for better readability */
    padding: 20px;
    border-radius: 10px;
    max-width:65%; /* Adjust to control text width */
}
.carousel-caption h1 {
    font-size: 4rem;  /* Adjust size as needed */
    font-weight: bold;
    color: #fff;  /* Ensures visibility */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); /* Adds a shadow for better contrast */
}


/* Login Form Container */
#dynamicLoginForm {
    position: absolute;
    top: 50%;
    z-index: 3;
    max-width: 500px;
    right: -350px; /* Initially hidden off-screen */
    transform: translateY(-50%);
    min-height: 360px;
    background: #fff;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    transition: right 0.3s ease-in-out;
}
#useragreement{
    padding:0 10%;
}
/* Show class to slide in */


/* Login Header */
.login-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

/* Close Button */
.close-btn {
    cursor: pointer;
    font-size: 1.5rem;
    color: red;
}

/* Form Inputs */
#dynamicLoginForm input {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Submit Button */
#dynamicLoginForm button, a.btn {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #1abc9d, #16a085);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.btn-primary {
    background-color: #1abc9d !important;
    border: 1px solid #3cbca3 !important;
}
a.btn{
    max-width: 120px;
    margin:auto;
    color:white !important;
}

.btn:hover,button[type='submit']:hover{
    background: #09876f !important;
}

#dynamicLoginForm button:hover,a.btn:hover {
    background: #0056b3;
}




.text-green{
    color:green;
}
.bookmaker{
    padding: 4px;
}
.bookmaker-SportyBet {
    background-color: red;
    color:white;
    display: block;
    text-align: center;
    font-weight: bolder;


}
.bookmaker-BangBet {
    background-color: yellow;
    color: #000;
    display: block;
    text-align: center;
    font-weight: bolder;
}

.bookmaker-SoccaBet {
    background-color: green;
    color:yellow;
    display: block;
    font-style: italic;
    text-align: center;
    font-weight: bolder;
}
.bookmaker-BangBet {
    background-color: yellow;
    color: #000;
    display: block;
    text-align: center;
    font-weight: bolder;
}
.image-logo:hover img{
    opacity: 6;
}
.image-logo a{
    opacity: 1;
    display: block;
}
.bookmaker-Msport {
    background-color: black;
    color:yellow;
    display: block;
    font-weight: bolder;
    text-align: center;
}
.text-red{
    color:red;
}

td span.odd{
    display: block;
    padding: 4px;
    color: white;
    text-align: center;
    background-color: green;
}

.calcus-container{
    min-width: 60%;
    margin:auto;
}
.calcus-container *{
    width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    margin: 20px 0;
}

th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

th {
    background-color: #2c3d50;
    color: white;
    font-weight: bold;
    border:0;
}

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

tr:hover {
    background-color: #ddd;
}
.scrape-time{
    display: block;
    margin-top:15px;

}


.registration {
    padding: 5rem 0;
    background-color: #f7f7fa;
}

.text-center{
    text-align: center;
}

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: .4rem;
    padding-right: .4rem;
    width: 100%;
}

.registration .feedback {
    margin-top: 2rem;
}

a.bookmaker-link.bookie-link{
    text-decoration: none;
    list-style: none;
    display: block;
}
a.bookmaker-link.bookie-link:hover{
    text-decoration: underline !important;
    color: white;
}

a.bookmaker-link.bookie-link{
    text-decoration: none;
    list-style: none;
    display: block;
}
a.bookmaker-link.bookie-link:hover{
    text-decoration: underline;
    color: white;
}

.app-usage{
    border-top:1px solid #ededed;
    padding-top: 5px;
}
.app-usage *{
    text-align: left;
}

.error-msg {
    color: red;
    font-size: 14px;
    display: block;
    margin-top: 5px;
    margin-bottom: 0px;
    border: 1px solid;
    padding: 5px 10px;
    background: #ffe9e9;
    border-radius: 5px;
    display: flex;
}
.error-msg>i{
    margin-right: 5px;
    margin-top: -1.5px;
}

div.td{
    padding:7px;
}
div.tr{
    margin-bottom: 10px;
}

.league-title{
    color:#18bb9b;
}

span.predictor{

}

.login-header h2 span{
    font-size: 12px;
    display: block;
    padding-top: 10px;
    font-style: ;
}













/*START FROM HERE*/

/* Make table scrollable on small screens */
@media (max-width: 768px) {

    /* Custom Table Styling */
.custom-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
}

/* Table Header */
.custom-table-header {
    display: flex;
    font-weight: bold;
    background: #333;
    color: #fff;
    padding: 10px;
    border-bottom: 2px solid #555;
}

/* Table Row */
.custom-table-row {
    display: flex;
    border-bottom: 1px solid #ddd;
    background: #f9f9f9;
    transition: background 0.3s ease;
}

.custom-table-row:nth-child(even) {
    background: #eee;
}

.custom-table-row:hover {
    background: #ddd;
}

/* Table Cells */
.custom-table-cell {
    flex: 1;
    padding: 10px;
    text-align: center;
    border-right: 1px solid #ddd;
}

.custom-table-cell:last-child {
    border-right: none;
}

/* Responsive for Small Screens */
@media (max-width: 768px) {
    .custom-table {
        min-width: 100%;
        width: 100%;
        overflow-x: auto;
        display: block;
    }

    .custom-table-header,
    .custom-table-row {
        display: flex;
        min-width: 900px; /* Adjust based on content */
        flex-wrap: nowrap;
    }

    .custom-table-cell {
        font-size: 14px;
        padding: 8px;
    }
}

/* Improve Clickable Links */
.custom-table-cell a {
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
}

.custom-table-cell a:hover {
    text-decoration: underline;
    color: #0056b3;
}



}


div.text-left{
    text-align: left;
}



/*Custom div table css****START**/

.pointer {
    cursor: pointer;
}
.text-red {
    color: red;
}

.custom-table {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
}

.custom-table-header,
.custom-table-row {
    display: flex;
    background: #13b790;
    color: white;
    font-weight: bold;
    padding: 10px;
    border-bottom: 2px solid #222;
}

.custom-table-row {
    background: #f8f9fa;
    color: #000;
    font-weight: normal;
}

.custom-table-header div,
.custom-table-row div {
    flex: 1;
    padding: 8px;
    text-align: center;
    border-right: 1px solid #ccc;
    min-width: 90px;
     /* Prevent text overflow */

   width: fit-content;
    white-space: normal;  /* Allows text to break onto new lines */

}
a.bookmaker-link {
    list-style: none;
    text-decoration: none;
    padding: 10px;
}
a.bookmaker-link:hover {
    text-decoration: underline;
    color: white;
}

a.bookmaker-link span{
    display: block !important;
    padding: 5px;
    font-size: 14px;
    border-radius: 5px !important;
}
a.bookmaker-link{
    text-decoration:none ;
    color:white;
}
a.bookmaker-link:hover span a.bookmaker-link:hover  {
    text-decoration: underline !important;
    color:white !important;
}
.bookmaker-SportyBet {
    background-color: red;
    color: white;
    display: block;
    text-align: center;
    font-weight: bolder;
}
.custom-table .td, .custom-table .th {
    max-width: 80px !important;
    width: 50px !important;
    min-width: initial !important;
}
.td.bookie,.th.bookie{
    max-width: 120px !important;
    width: 50px !important;
    min-width: initial !important;
}
.card-title{
    padding: 10px;
    background-color: #343a40;
    color: white;
    border-radius: 5px;
}
.custom-table-header div:last-child,
.custom-table-row div:last-child {
    border-right: none;
}
.text-left{
    text-align: left !important;
}
.custom-table-row:hover {
    background: #e9ecef;
}

/***END OF CUSTOME DIV TABLE CSS**/








/*REGISTRATION FORM CSS START*/
.app-logo img, .app-logo .image-logo img {
    width: 100%;
    margin-top: 2px;
    border-radius: 50px;
}
.image-logo.bg-dark{
    background-color: #000 !important;
}
.alert i{
    margin-right: 8px;
}
.form-control{
    border-radius: 2px !important;
    padding: 15px;
}
.alert{
    padding-left: 8px !important;
    margin-bottom: 5 !important;
}
.app-logo .image-logo, .image-logo {
    width: 100px !important;
    height: 100px !important;
    margin:auto;
    padding: 10px;
}
.app-logo .image-logo img, .image-logo img {
    width: 100%;
}



@media (min-width: 768px) {
  .show-on-desktop {
    display: block;
  }
}

/* Hide on desktop (768px and above) */
@media (min-width: 768px) {
    .show-on-mobile {
        display: none !important;
    }
    .event_ft{
      text-align: right;
    }
}

/* Show on mobile (below 768px) */
@media (max-width: 767.98px) {
  .event_ft{
    text-align: left;
  }
    .show-on-desktop {
          display: none;
        }
    .show-on-mobile {
        display: block !important;
    }
}
.register-wrapper {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  background-color: #fff;
}

.register-image, .signin-image {
    background-image: url('../images/form.png');
    background-size: contain;
    background-position: center;
    height: 100%;
    background-repeat: no-repeat;
}

.terms-container p{
    font-size: 16px;
    color: #212529;

}
.hidden{
    display: none;
}
.terms-container p:first-of-type{
    margin-top: 20px;
}

@media (max-width: 768px) {
  .register-wrapper {
    border-radius: 0;
  }
}




.amigos-footer{
    padding-top: 15px; text-align: center; font-size: 14px; color: #666;
}


.amigos-footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 8px;
    border-radius: 50%;
    background-color: #e0e0e0;
    color: #2c3e50;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 20px;
}

.amigos-footer a:hover {
    background-color: #2c3e50;
    color: white;
    transform: scale(1.1);
}
.amigos-footer a:hover  *{
    color: white ;
}



.amigos-footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0 8px;
    border-radius: 50%;
    background-color: #e0e0e0;
    color: #2c3e50;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 20px;
}

.amigos-footer a:hover {
    background-color: #fff;
    border:1px solid #2c3e50;
    color: white;
    transform: scale(1.1);
}
.amigos-footer a:hover  *{
    color: white ;


}

img.icon.twitter, img.icon.facebook,img.icon.linkedin,img.icon.whatsapp{
    width: 24px;
    margin-top:-2px;
}


div.text-left {
    text-align: left;
}
div.tr {
    margin-top: 10px !important;
}

.predictor-icon{
  direction: rtl;
}

div.row-innder {
    position: relative;
    min-height: 100px;
    padding: 20px 50px;
}

.row:not(.g-0) {
    align-items: flex-start;
}

.result-toolbox {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ededed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: none;
    z-index: 4;
}

.result-toolbox {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ededed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: none;
}

.match-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    font-size: 15px;
}

.match-cell {
    flex: 1 1 18%;
    min-width: 120px;
}

.match-event {
    font-weight: bold;
}








/*REGISTRATION FORM CSS END*//