body{margin: 0px; padding: 0px;   font-family: 'Roboto';}
button:focus,
input:focus{
  outline: none;
  box-shadow: none;
}
a,a:hover{text-decoration: none;}
/*.bg-setup-screen{background: linear-gradient(315deg, rgba(241, 196, 88, 1.0), rgba(255, 204, 81, 1.0)); }*/
.bg-setup-screen{background-color: rgba(255, 204, 81, 1.0);}
.min-height-screen{min-height: 100vh;}
.login-set-up-screen{background: #0D0D0D;}
.btn-submit{ background: #E2B854; color: #fff;}
.btn-submit:hover{background-color: #FFEBBD; color: #0D0D0D;}
.spacing-gap{margin-top: 140px;}
.bg-sign-in{background: #ffffff29;}
.inputs-otp .form-control{ background: transparent; border: 0px; border-bottom: 1px solid #d2d1d1; border-radius: 0px;}
.form-control {
    display: block;
    width: 100%;
    height: auto;
    padding: 15px 19px;
    font-size: 1rem;
    line-height: 1.4;
    color: #475F7B;
    background-color: #FFF;
    border: 1px solid #DFE3E7;
    border-radius: .267rem;
    -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control:focus {
    color: #475F7B;
    background-color: #FFF;
    border-color: #5A8DEE;
    outline: 0;
    box-shadow: 0 3px 8px 0 rgb(0 0 0 / 10%);
}
.form-label {margin-bottom: .5rem;max-width: unset;max-height: unset;}
main {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  :root {
	--header-height: 3rem;
	--nav-width: 68px;
	--first-color: #4723D9;
	--first-color-light: #AFA5D9;
	--white-color: #F7F6FB;
	--body-font: 'Nunito', sans-serif;
	--normal-font-size: 1rem;
	--z-fixed: 100;
}
  
  .select {
    position: relative;
  }
	.f-10{font-size: 10px;}
	.f-11{font-size: 11px;}
	.f-14{font-size: 14px;}
	.f-15{font-size: 15px;}
	.f-16{font-size: 16px;}  
  .select__input {
    appearance: none;
    border: 0;
    margin: 0;
    font-size: 1rem;
    width: 100%;
    height: 100%;
    padding: 0.5rem calc(var(--select-icon-size) + var(--select-icon-margin) + var(--select-text-icon-gap));
    -webkit-user-select: none;
            user-select: none;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.1), 0 0 0 1px hsla(230, 13%, 9%, 0.02), 0 0.3px 0.4px hsla(230, 13%, 9%, 0.025), 0 1px 3px -1px hsla(230, 13%, 9%, 0.2), 0 3.5px 6px hsla(230, 13%, 9%, 0.12);
    border-radius: 0.375em;
    transition: box-shadow 0.2s;
  }
  
  .select__input:focus  {
    outline: none;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.1), 0 0 0 1px hsla(230, 13%, 9%, 0.02), 0 0.3px 0.4px hsla(230, 13%, 9%, 0.025), 0 1px 3px -1px hsla(230, 13%, 9%, 0.2), 0 3.5px 6px hsla(230, 13%, 9%, 0.12), 0 0 0 2px hsl(0, 0%, 100%), 0 0 0 4px hsl(230, 7%, 23%);
  }
  
  .select__arrow,
  .select__flag {
    display: inline-block;
    width: var(--select-icon-size);
    height: var(--select-icon-size);
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .select__arrow {
    color: inherit;
    right: var(--select-icon-margin);
  }
  
  .select__flag {
    left: var(--select-icon-margin);
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--select-icon-size);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg%3E%3Cpath d='M16 0c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16z m11.8 14h-3.8c-0.2-3-0.8-5.8-1.6-8.2 2.8 1.8 4.8 4.8 5.4 8.2z m-11.8 14c-1.2 0-3.6-3.8-4-10h8c-0.4 6.2-2.8 10-4 10z m-4-14c0.4-6.2 2.6-10 4-10s3.6 3.8 4 10h-8z m-2.2-8.2c-1 2.4-1.6 5.2-1.8 8.2h-3.8c0.6-3.4 2.6-6.4 5.6-8.2z m-5.6 12.2h3.8c0.2 3 0.8 5.8 1.6 8.2-2.8-1.8-4.8-4.8-5.4-8.2z m18 8.2c1-2.4 1.4-5.2 1.6-8.2h3.8c-0.4 3.4-2.4 6.4-5.4 8.2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  }
  
  .select:has(option[value="IT"]:checked) .select__flag {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg%3E%3Cpath fill='%23fff' d='M10 4H22V28H10z'%3E%3C/path%3E%3Cpath d='M5,4h6V28H5c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z' fill='%2341914d'%3E%3C/path%3E%3Cpath d='M25,4h6V28h-6c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z' transform='rotate(180 26 16)' fill='%23bf393b'%3E%3C/path%3E%3Cpath d='M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z' opacity='.15'%3E%3C/path%3E%3Cpath d='M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z' fill='%23fff' opacity='.2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  }
  
  .select:has(option[value="ES"]:checked) .select__flag {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg%3E%3Cpath fill='%23f1c142' d='M1 10H31V22H1z'%3E%3C/path%3E%3Cpath d='M5,4H27c2.208,0,4,1.792,4,4v3H1v-3c0-2.208,1.792-4,4-4Z' fill='%23a0251e'%3E%3C/path%3E%3Cpath d='M5,21H27c2.208,0,4,1.792,4,4v3H1v-3c0-2.208,1.792-4,4-4Z' transform='rotate(180 16 24.5)' fill='%23a0251e'%3E%3C/path%3E%3Cpath d='M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z' opacity='.15'%3E%3C/path%3E%3Cpath d='M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z' fill='%23fff' opacity='.2'%3E%3C/path%3E%3Cpath d='M12.614,13.091c.066-.031,.055-.14-.016-.157,.057-.047,.02-.15-.055-.148,.04-.057-.012-.144-.082-.13,.021-.062-.042-.127-.104-.105,.01-.068-.071-.119-.127-.081,.004-.068-.081-.112-.134-.069-.01-.071-.11-.095-.15-.035-.014-.068-.111-.087-.149-.028-.027-.055-.114-.057-.144-.004-.03-.047-.107-.045-.136,.002-.018-.028-.057-.044-.09-.034,.009-.065-.066-.115-.122-.082,.002-.07-.087-.111-.138-.064-.013-.064-.103-.087-.144-.036-.02-.063-.114-.075-.148-.017-.036-.056-.129-.042-.147,.022-.041-.055-.135-.031-.146,.036-.011-.008-.023-.014-.037-.016,.006-.008,.01-.016,.015-.025h.002c.058-.107,.004-.256-.106-.298v-.098h.099v-.154h-.099v-.101h-.151v.101h-.099v.154h.099v.096c-.113,.04-.169,.191-.11,.299h.002c.004,.008,.009,.017,.014,.024-.015,.002-.029,.008-.04,.017-.011-.067-.106-.091-.146-.036-.018-.064-.111-.078-.147-.022-.034-.057-.128-.046-.148,.017-.041-.052-.131-.028-.144,.036-.051-.047-.139-.006-.138,.064-.056-.033-.131,.017-.122,.082-.034-.01-.072,.006-.091,.034-.029-.047-.106-.049-.136-.002-.03-.054-.117-.051-.143,.004-.037-.059-.135-.04-.149,.028-.039-.06-.14-.037-.15,.035-.053-.043-.138,0-.134,.069-.056-.038-.137,.013-.127,.081-.062-.021-.125,.044-.104,.105-.05-.009-.096,.033-.096,.084h0c0,.017,.005,.033,.014,.047-.075-.002-.111,.101-.055,.148-.071,.017-.082,.125-.016,.157-.061,.035-.047,.138,.022,.154-.013,.015-.021,.034-.021,.055h0c0,.042,.03,.077,.069,.084-.023,.048,.009,.11,.06,.118-.013,.03-.012,.073-.012,.106,.09-.019,.2,.006,.239,.11-.015,.068,.065,.156,.138,.146,.06,.085,.133,.165,.251,.197-.021,.093,.064,.093,.123,.118-.013,.016-.043,.063-.055,.081,.024,.013,.087,.041,.113,.051,.005,.019,.004,.028,.004,.031,.091,.501,2.534,.502,2.616-.001v-.002s.004,.003,.004,.004c0-.003-.001-.011,.004-.031l.118-.042-.062-.09c.056-.028,.145-.025,.123-.119,.119-.032,.193-.112,.253-.198,.073,.01,.153-.078,.138-.146,.039-.104,.15-.129,.239-.11,0-.035,.002-.078-.013-.109,.044-.014,.07-.071,.049-.115,.062-.009,.091-.093,.048-.139,.069-.016,.083-.12,.022-.154Zm-.296-.114c0,.049-.012,.098-.034,.141-.198-.137-.477-.238-.694-.214-.002-.009-.006-.017-.011-.024,0,0,0-.001,0-.002,.064-.021,.074-.12,.015-.153,0,0,0,0,0,0,.048-.032,.045-.113-.005-.141,.328-.039,.728,.09,.728,.393Zm-.956-.275c0,.063-.02,.124-.054,.175-.274-.059-.412-.169-.717-.185-.007-.082-.005-.171-.011-.254,.246-.19,.81-.062,.783,.264Zm-1.191-.164c-.002,.05-.003,.102-.007,.151-.302,.013-.449,.122-.719,.185-.26-.406,.415-.676,.73-.436-.002,.033-.005,.067-.004,.101Zm-1.046,.117c0,.028,.014,.053,.034,.069,0,0,0,0,0,0-.058,.033-.049,.132,.015,.152,0,0,0,.001,0,.002-.005,.007-.008,.015-.011,.024-.219-.024-.495,.067-.698,.206-.155-.377,.323-.576,.698-.525-.023,.015-.039,.041-.039,.072Zm3.065-.115s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0Zm-3.113,1.798v.002s-.002,0-.003,.002c0-.001,.002-.003,.003-.003Z' fill='%239b8028'%3E%3C/path%3E%3Cpath d='M14.133,16.856c.275-.65,.201-.508-.319-.787v-.873c.149-.099-.094-.121,.05-.235h.072v-.339h-.99v.339h.075c.136,.102-.091,.146,.05,.235v.76c-.524-.007-.771,.066-.679,.576h.039s0,0,0,0l.016,.036c.14-.063,.372-.107,.624-.119v.224c-.384,.029-.42,.608,0,.8v1.291c-.053,.017-.069,.089-.024,.123,.007,.065-.058,.092-.113,.083,0,.026,0,.237,0,.269-.044,.024-.113,.03-.17,.028v.108s0,0,0,0v.107s0,0,0,0v.107s0,0,0,0v.108s0,0,0,0v.186c.459-.068,.895-.068,1.353,0v-.616c-.057,.002-.124-.004-.17-.028,0-.033,0-.241,0-.268-.054,.008-.118-.017-.113-.081,.048-.033,.034-.108-.021-.126v-.932c.038,.017,.073,.035,.105,.053-.105,.119-.092,.326,.031,.429l.057-.053c.222-.329,.396-.743-.193-.896v-.35c.177-.019,.289-.074,.319-.158Z' fill='%239b8028'%3E%3C/path%3E%3Cpath d='M8.36,16.058c-.153-.062-.39-.098-.653-.102v-.76c.094-.041,.034-.115-.013-.159,.02-.038,.092-.057,.056-.115h.043v-.261h-.912v.261h.039c-.037,.059,.039,.078,.057,.115-.047,.042-.108,.118-.014,.159v.873c-.644,.133-.611,.748,0,.945v.35c-.59,.154-.415,.567-.193,.896l.057,.053c.123-.103,.136-.31,.031-.429,.032-.018,.067-.036,.105-.053v.932c-.055,.018-.069,.093-.021,.126,.005,.064-.059,.089-.113,.081,0,.026,0,.236,0,.268-.045,.024-.113,.031-.17,.028v.401h0v.215c.459-.068,.895-.068,1.352,0v-.186s0,0,0,0v-.108s0,0,0,0v-.107s0,0,0,0v-.107s0,0,0,0v-.108c-.056,.002-.124-.004-.169-.028,0-.033,0-.241,0-.269-.055,.008-.119-.018-.113-.083,.045-.034,.03-.107-.024-.124v-1.29c.421-.192,.383-.772,0-.8v-.224c.575,.035,.796,.314,.653-.392Z' fill='%239b8028'%3E%3C/path%3E%3Cpath d='M12.531,14.533h-4.28l.003,2.572v1.485c0,.432,.226,.822,.591,1.019,.473,.252,1.024,.391,1.552,.391s1.064-.135,1.544-.391c.364-.197,.591-.587,.591-1.019v-4.057Z' fill='%23a0251e'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  }
  .select:has(option[value="PT"]:checked) .select__flag {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg%3E%3Cpath d='M5,4H13V28H5c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z' fill='%232b6519'%3E%3C/path%3E%3Cpath d='M16,4h15V28h-15c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z' transform='rotate(180 21.5 16)' fill='%23ea3323'%3E%3C/path%3E%3Cpath d='M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z' opacity='.15'%3E%3C/path%3E%3Cpath d='M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z' fill='%23fff' opacity='.2'%3E%3C/path%3E%3Ccircle cx='12' cy='16' r='5' fill='%23ff5'%3E%3C/circle%3E%3Cpath d='M14.562,13.529l-5.125-.006v3.431h0c.004,.672,.271,1.307,.753,1.787,.491,.489,1.132,.759,1.805,.759,.684,0,1.328-.267,1.813-.75,.485-.484,.753-1.126,.753-1.808v-3.413Z' fill='%23ea3323'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  }
  
/*#storySide { Story Side Start
    overflow: hidden;
    position: relative;
}*/
/*#story-photo { Story Profile Photo 
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid rgb(238, 39, 82);
    padding: 1px;
    cursor: pointer;
    object-fit: cover;
}*/
label {/* Story Username */
    font-size: 12px;
    color: #262626;
    overflow: hidden;
    display: block;
    max-width: 3.6rem;
    max-height: 1rem;
    cursor: pointer;
}/*** Story Side End ***/
/*home story scroll start*/
/* 1. The Container: Force it to stay within screen limits */
#storySide {
    display: block !important;
    width: 100% !important;
    max-width: 100vw;           /* Force it to never exceed screen width */
    overflow-x: auto !important; /* Allow internal horizontal scrolling */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;    /* Ensures padding doesn't add to width */
}
/* 2. The List: Ensure it stays on one long line */
#myTab.custom-story-scroll {
    display: inline-flex !important; /* Changed from flex to inline-flex */
    flex-wrap: nowrap !important;
    padding: 0;
    margin: 0;
    border: none;
    list-style: none;
}
/* 3. The Items - Absolute size control */
#myTab .story-item {
    flex: 0 0 auto !important;  /* Prevents shrinking */
    width: 90px !important; 
	padding: 10px; /* Ensure no weird margins are pushing the page */
	margin: 0;
    display: inline-block;      /* Fallback for older browsers */
    text-align: center;
}

/* Make images look like profile circles */
.story-photo {width: 65px;height: 65px;border-radius: 50%;object-fit: cover;display: block;margin: 0 auto 5px;border: 2px solid #ddd;}
#storySide::-webkit-scrollbar-thumb {background: #ccc;border-radius: 10px;}
#storySide::-webkit-scrollbar {display: none;}
#storySide {-ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */}
.story-item label {display: block;width: 100%;overflow: hidden;text-overflow: ellipsis;font-size: 11px;
    white-space: nowrap;/* Prevent long names from making the box taller */}
/*home story scroll end*/
#side-profile {/*** Right Panel ***/
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
}

.profile-back{background:url("../images/profile-back.png");background-size: cover;}

.mycusmargin{padding:0% 2%;}
.card {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: #fff;
	background-clip: border-box;
	border: 1px solid rgba(0, 0, 0, 0.125);
	border-radius: 0;
}
 
.card-body {
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	padding: 4% 2%;
}
 
.card-header {
	padding: 0.75rem 1.25rem;
	margin-bottom: 0;
	background-color: rgba(0, 0, 0, 0.03);
	border-bottom: 1px solid rgba(0, 0, 0, 0.125);
	text-align: center;
}
 
.dashboard {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	min-height: 100vh;
}
 
.dashboard-app {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-flex: 2;
	-webkit-flex-grow: 2;
	-ms-flex-positive: 2;
	flex-grow: 2;
	margin-top: 40px;
}
 
.dashboard-content {
	-webkit-box-flex: 2;
	-webkit-flex-grow: 2;
	-ms-flex-positive: 2;
	flex-grow: 2;
	padding: 25px;
}
 
.dashboard-nav {
	min-width: 238px;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	overflow: auto;
	background-color: #373193;
}
 
.dashboard-compact .dashboard-nav {
	display: none;
}
 
.dashboard-nav header {
	
	padding: px 27px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
 
.dashboard-nav header .menu-toggle {
	display: none;
	margin-right: auto;
}
 
.dashboard-nav a {
	color: #515151;
	font-size: 14px;
}
 
.dashboard-nav a:hover {
	text-decoration: none;
}
 
.dashboard-nav {
	background-color: #262628;
}
 
.dashboard-nav a {
	color: #fff;
}
 
.brand-logo {
	font-family: "Nunito", sans-serif;
	font-weight: bold;
	font-size: 20px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	color: #515151;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
 
.brand-logo:focus, .brand-logo:active, .brand-logo:hover {
	color: #dbdbdb;
	text-decoration: none;
}
 
.brand-logo i {
	color: #d2d1d1;
	font-size: 27px;
	margin-right: 10px;
}
 
.dashboard-nav-list {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
 
.dashboard-nav-item {
	min-height: 45px;
	padding: 0px 20px 8px 30px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	letter-spacing: 0.02em;
	transition: ease-out 0.5s;
}
 
.dashboard-nav-item i {
	width: 36px;
	font-size: 19px;
}
 
.dashboard-nav-item:hover {
	background: rgba(255, 255, 255, 0.04);
}
 
.active {
	background: rgba(0, 0, 0, 0.1);
}
 
.dashboard-nav-dropdown {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
 
.dashboard-nav-dropdown.show {
	background: rgba(255, 255, 255, 0.04);
}
 
.dashboard-nav-dropdown.show > .dashboard-nav-dropdown-toggle {
	font-weight: bold;
}
 
.dashboard-nav-dropdown.show > .dashboard-nav-dropdown-toggle:after {
	-webkit-transform: none;
	-o-transform: none;
	transform: none;
}
 
.dashboard-nav-dropdown.show > .dashboard-nav-dropdown-menu {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
 
.dashboard-nav-dropdown-toggle:after {
	content: "";
	margin-left: auto;
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid rgba(81, 81, 81, 0.8);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
 
.dashboard-nav .dashboard-nav-dropdown-toggle:after {
	border-top-color: rgba(255, 255, 255, 0.72);
}
 
.dashboard-nav-dropdown-menu {
	display: none;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
 
.dashboard-nav-dropdown-item {
	min-height: 40px;
	padding: 8px 20px 8px 70px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	transition: ease-out 0.5s;
}
 
.dashboard-nav-dropdown-item:hover {
	background: rgba(255, 255, 255, 0.04);
}
 
.menu-toggle {
	position: relative;
	width: 42px;
	height: 42px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	color: #fff;
}
 
.menu-toggle:hover, .menu-toggle:active, .menu-toggle:focus {
	text-decoration: none;
	color: #875de5;
}
 
.menu-toggle i {
	font-size: 20px;
}
 
.dashboard-toolbar {
	background-color: #262628;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1000;
}
 
.nav-item-divider {
	height: 1px;
	margin: 1rem 0;
	overflow: hidden;
	background-color: rgba(236, 238, 239, 0.3);
}
 
@media (min-width: 992px) {
	.dashboard-app {
		margin-left: 238px;
	}
 
	.dashboard-compact .dashboard-app {
		margin-left: 0;
	}
}
 
 
@media (max-width: 768px) {
	.dashboard-content {
		padding: 15px 0px;
	}
}
 
@media (max-width: 992px) {
	.dashboard-nav {
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 1070;
	}
 
	.dashboard-nav.mobile-show {
		display: block;
		min-width:unset;
		width: 75% !important;
	}
}
 
@media (max-width: 992px) {
	.dashboard-nav header .menu-toggle {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}
}
 
@media (min-width: 992px) {
	.dashboard-toolbar {
		left: 246px;
	}
 
	.dashboard-compact .dashboard-toolbar {
		left: 0;
	}
}

.border-matches{background-color:#262628; border: 1px solid rgba(255, 255, 255); border-radius: 10px;padding: 10px 7px 0px 7px;}
.search-input {
	height: 50px;
	padding-left: 35px;
	border: none;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.search-icon {
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
	color: #888;
}
.btn-cancel{ background: #FFFFFF; box-shadow: -2px 4px 2px 2px rgb(77 77 77 / 31%); color: #000000; margin: 4px;}
.btn-sign-in{ background: rgba(229, 163, 46, 1) !important; box-shadow: -2px 4px 2px 2px rgb(77 77 77 / 31%); color: #fff !important; margin: 4px;}
.btn-sign-up{background: rgba(229, 163, 46, 1); box-shadow: -2px 4px 2px 2px rgb(77 77 77 / 31%); color: #fff;  margin: 4px;}
.left-0{left:0}
.right-0{right: 0;}

.bg-frnds{background: rgba(28, 28, 30, 1); border: 1px solid rgba(255, 255, 255, 0.16);}
/*.score::after{content: "";
	width: 2px;
	background: #E2B854;
	position: absolute;
	left: 0;
	right: 0;
	height: 100%;
	border-radius: 20px;
	margin: 0 auto;}
.scoreDbl::after{content: "";
	width: 2px;
	background: #E2B854;
	position: absolute;
	left: 0;
	right: 0;
	height: 80%;
	bottom:0%;
	border-radius: 20px;
	margin: 0 auto;}*/
	/*stopped because layout changed*/
	@media screen and (min-width: 300px) and (max-width: 768px) {
		.card{background: #0D0D0D; width: 100%!important;}
		/*.bg-setup-screen{background: #0D0D0D;}*/
		.responsive{display: block;}
		.responsive .bg-sign-in{width: 100%; border-radius: 7px!important; padding: 20px;}
		.responsive .col-7{width: 100%;}
		.btn-submit{ background: #E2B854; color: #fff;}
		.spacing-gap{margin-top: 9px;}
		.av li{ padding:4px;}
	}

.clsONumber, .clsFPNumber {color: #e5a32e !important;padding:10px 6px;font-weight: 700;font-size: 1.2rem;}
.clsONumber:focus, .clsFPNumber:focus {background-color:#ffffff00;outline: none;border-color: #e5a32e !important;}
.ballsarea .w-25, .custom-center {display: flex;justify-content:center;align-items: center;cursor:pointer;}
/*Centers vertically if there is extra height */
.whiteball{width:95px;background-image: url('../images/white.png');height:95px;background-repeat: no-repeat;background-size:contain; display:flex; justify-content-center:center;}
.redball{width:95px;background-image: url('../images/red.png');height:95px;background-repeat: no-repeat;background-size:contain;}
.yellowball{width:95px;background-image: url('../images/yellow.png');height:95px;background-repeat: no-repeat;background-size:contain;}
.greenball{width:95px;background-image: url('../images/green.png');height:95px;background-repeat: no-repeat;background-size:contain;}
.brownball{width:95px;background-image: url('../images/brown.png');height:95px;background-repeat: no-repeat;background-size:contain;}
.pinkball{width:95px;background-image: url('../images/pink.png');height:95px;background-repeat: no-repeat;background-size:contain;}
.blueball{width:95px;background-image: url('../images/blue.png');height:95px;background-repeat: no-repeat;background-size:contain;}
.blackball{width:95px;background-image: url('../images/black.png');height:95px;background-repeat: no-repeat;background-size:contain;}
a.clsClose {position: absolute;right: 20px;top: 25px;color: #FFFFFF;}
a.clsClose i{font-size: 2rem;}
.plySection{position:relative;}
.menu-sub-dropdown {border-radius: .475rem;background-color: #FFFFFF;box-shadow: 0 0 50px 0 rgba(82, 63, 105, .15);z-index: 107;position: absolute;margin: 0px;list-style: none;flex-direction: column;bottom:100%;top:auto;}
.bulletdot {width: 100%;border-bottom: 1px solid grey;padding:5px 0px;}
.bulletdot::before {color: grey;content: '\2022';display: inline-block;width: 1rem;font-size: 17px;}
.w-85{width:85%}
.w-45{width:45%}
.w-40{width:40%}
.w-20{width:20%}
.w-15{width:15%}
.w-10{width:10%}
.w-8{width:8%}
.cursor-pointer{cursor:pointer !important;}
.col-3 {flex: 0 0 auto;width: 23.66666667%;margin: 0% .5%;}
.clsballnumbg {background-color: #000000;padding: 5%;border-radius: 50%;width: 35px;text-align: center;color: #ffffff;}
.form-switch-lg .form-check-input {width: 4em;height: 2em;margin-top: 0;}
.foul-stepper-container {box-shadow: 0 4px 6px rgba(0,0,0,0.1);}
#foul-count {color: #000;pointer-events: none; /* Prevents mobile keyboard from popping up */}
.foul-stepper-container button:active {transform: scale(0.9);opacity: 0.6;}
@keyframes shake {
	0% { transform: translateX(0); }
	25% { transform: translateX(5px); }
	50% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
	100% { transform: translateX(0); }
}
.shake {animation: shake 0.2s ease-in-out;border: 1px solid #dc3545 !important; /* Briefly turns red */}
/* Ensure buttons look like tappable icons */
#btn-increment, #btn-decrement {font-size: 2.5rem;line-height: 1;transition: opacity 0.2s ease;user-select: none;}
.ballFoul.active {border-radius: 50%;}
.right-30 {right: 30px;}
@keyframes popIn {
	0% { transform: scale(0); }
	80% { transform: scale(1.2); }
	100% { transform: scale(1); }
}
/*timeline start*/
.shotTimeline {display: flex;flex-wrap:wrap;align-items: center;}
.timeline-ball {width: 35px;height: 35px;object-fit: contain;filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.3));}
.foul-icon {color: #dc3545;font-size: 14px;margin-bottom: -27px; /* Pulls it closer to the ball image */z-index: 2;}
.timeline-item.miss-divider {width: 2px;height: 30px;background-color: #ccc;margin: 10px 5px;}
/*timeline end*/
/*.border-matches.multi {background-image: url('../images/match-bg-multiplayer.png');}
.border-matches.doubles {background-image: url('../images/match-bg-doubles.png');}*/
.border-pr-my{border-color:#9ec5fe !important;--bs-border-opacity:1}
.border-clubs{background-color:#262628; border: 1px solid rgba(255, 255, 255); border-radius: 10px;box-shadow: 0 0 10px 0 rgba(255, 255, 255);}
.bannerCls{border-radius: 10px 10px 0 0;}
.clbInfoArea{border-radius: 0 0 10px 10px;overflow: hidden;background: linear-gradient(to top, rgba(255, 165, 0, 0.5) 0%, rgba(255, 165, 0, 0) 12%), #ffffff;}
.fav-icon {position: absolute;top: 5px;right: 5px;width: 24px;height: 24px;color: #ffffff;font-size: 20px;cursor: pointer;z-index: 10;}
.active-color{color:#ff4757 !important;}
.shr-icon {position: absolute;top: 5px;right: 45px;width: 24px;height: 24px;color: #ffffff;font-size: 20px;cursor: pointer;z-index: 10;}
.w-15px{width:15px;}
.fs-8{font-size:0.8rem!important;}
/*-start toast css*/
#toast-container {position: fixed;top: 20px;right: 0px;z-index: 10000;}
#fave-toast {
	visibility: hidden;
	min-width: 280px;
	background-color: rgba(255,255,255, 0.95);
	color: #000000;
	border-left: 5px solid #28a745;
	padding: 15px 20px;
	border-radius: 8px 0px 0px 8px;
	box-shadow: 0 2px 15px 1px rgb(255 193 7);
	backdrop-filter: blur(5px);
	transform: translateX(120%);
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#fave-toast.show {visibility: visible;transform: translateX(0);}
.toast-content {display: flex;align-items: center;gap: 12px;}
/*-end*/
/*-start banner slider*/
.swiper-slide {position: relative;}
.swiper-slide img {width: 100%;height: 100%;object-fit: cover;}
/* Dots Styling (Under the banner) */
.swiper-pagination {bottom: 5px !important; /* Moves dots slightly up from very bottom */}
.swiper-pagination-bullet {background: #ccc;opacity: 1;}
.swiper-pagination-bullet-active {background: #ffa500 !important; /* Your Orange color */}
/*-end banner slider*/
.backToPage {position: absolute;cursor: pointer;z-index: 10;}
.clbCardArea{border-radius: 0 0 10px 10px;overflow: hidden;border: 1px solid rgba(255, 255, 255); border-radius: 10px;box-shadow: 0 0 6px 0 rgba(255, 255, 255);background: linear-gradient(to top, rgba(255, 165, 0, 0.5) 0%, rgba(255, 165, 0, 0) 6%), #ffffff;}
.sliderIconBG {width: 30px;height: 30px;background-color: rgba(255, 255, 255, 1);border-radius: 50%;display: flex;justify-content: center;align-items: center;color: #000000;font-size:20px;}
.fscd-8{font-size:0.9rem!important;}
.clbPhotoScroll {display: inline-flex !important;flex-wrap: nowrap !important;padding: 0;margin: 0;border: none;list-style: none;}
.photo-items {flex: 0 0 auto !important;width: 190px !important; padding: 4px 4px 4px 0px;margin: 0;display: inline-block;}
.clubPhoto {width: 100%;height: 100%;border-radius: 4%;object-fit: cover;display: block;margin: 0 auto 5px;border: 2px solid #ddd;}
.bio-text{text-align: justify !important;line-height:1.4rem;margin:0px !important;padding:0px 6px !important;}
/*city drawer start*/
	.city-list-wrapper {padding-right: 10px;padding-left: 20px;padding-top: 10px;}
	/* Custom scrollbar for better styling */
	.city-list-wrapper::-webkit-scrollbar {width: 5px;}
	.city-list-wrapper::-webkit-scrollbar-thumb {background: #ccc;border-radius: 10px;}
	.offcanvas-bottom {border-top-left-radius: 20px;border-top-right-radius: 20px;}
	/* Container for alignment */
	.custom-city-check {display: flex;align-items: center;padding-left: 0;gap: 12px;}
	.custom-city-check .form-check-input {width: 22px;height: 22px;margin-top: 0;cursor: pointer;flex-shrink: 0;}
	/* Style the Label */
	.custom-city-check .form-check-label {font-size: 16px;max-width: 16rem;line-height: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; /* Adds ... if city name is extremely long */}
	/* Row spacing */
	.city-list-wrapper .row {margin-right: 0;margin-left: 0;}
/*city drawer end*/
/*start progressbar*/
	.stats-container {width: 100%;max-width: 400px;}
	.stats-label {display: flex;justify-content: space-between;margin: 8px 0px;}
	/* The empty part of the bar */
	.progress-track {width: 100%;height: 12px;background-color: #e0e0e0;border-radius: 10px;overflow: hidden;}
	/* The animated filling part */
	.progress-fill {height: 100%;width: 0; /* Starts at 0 for animation */background: linear-gradient(to right, #ffa500, #ff8c00); /* Orange gradient */border-radius: 10px;transition: width 1.5s ease-in-out; /* This creates the "fill up" effect */}
/*end*/
/*start bottom nav bar*/
.app-bottom-navigation {position: fixed;bottom: 0;left: 0;width: 100%;height: 60px;background: #ffffff;display: flex;
  justify-content: space-around;align-items: center;border-top: 1px solid #f0f0f0;box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.05);
  z-index: 999; /* Ensure it stays above everything */padding-bottom: env(safe-area-inset-bottom);
}
.app-bottom-navigation .bn-link {text-decoration: none;display: flex;flex-direction: column;align-items: center;justify-content: center;color: #000;
  font-weight: 500;font-size: 10px;width: 20%; /* Exactly 1/5th of the bar */height: 100%;transition: all 0.2s ease;}
.app-bottom-navigation .bn-link i {font-size: 22px;margin-bottom: 3px;}
.app-bottom-navigation .bn-link.active {color: #ffa500; /* Your orange theme */}
@media (min-width: 768px) {
  .app-bottom-navigation {
	display: none;
  }
}
/*end*/
/*dashboard feed start*/
.pb-40px {padding-bottom: 40px;}
.pb-50px {padding-bottom: 50px;}
.empty-state {margin-top: 10vh;}
.empty-state h5 {color: #262626;}
.empty-state p {font-size: 14px;max-width: 250px;margin: 0 auto;}
.text-light-grey {color: #dee2e6 !important;}
/* Optional: Pulse animation for the icon to make it feel "live" */
.empty-state i {animation: pulse 2s infinite;}
@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}
/* Core Card Styling */
.post-card {background: #fff;width: 100%;border-top: none;border-left: none;border-right: none;}
/* Full Width Media Logic */
.post-media-full {width: 100%;margin: 0;padding: 0;background-color: #f8f9fa; /* Light grey placeholder while loading */}
.post-media-full img {display: block;width: 100%;height: auto; /* Respects your 1080x1080 or 1080x1350 resizing */border-radius: 0 !important;}
.post-media-full .ratio {border-radius: 0 !important;}
/* Typography */
.post-text {font-size: 14px;line-height: 1.4;color: #262626;word-wrap: break-word;}
/* Desktop Polish */
@media (min-width: 768px) {
	.post-card {max-width: 600px;margin: 0 auto 24px auto;border: 1px solid #efefef;border-radius: 4px;}
}
.post-actions {background: #fff;min-height: 45px;}
.post-actions button, .post-actions a {transition: opacity 0.2s ease;outline: none !important;}
.post-actions button:active {opacity: 0.6;}
.post-actions span {font-size: 13px;vertical-align: middle;}
/* Red Heart Pop Animation */
.fa-solid.text-danger {animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
@keyframes pop {
	0% { transform: scale(0.5); }
	100% { transform: scale(1); }
}
/*dashboard feed end*/
/*start comment drawer*/
/* Dark overlay behind the drawer */
.comment-overlay {position: fixed;top: 0; left: 0; right: 0; bottom: 0;background: rgba(0,0,0,0.5);display: none;z-index: 2000;}
.comment-drawer {position: fixed;bottom: -100%; /* Hidden below screen */
	left: 0; right: 0;height: 85vh;background: #fff;border-top-left-radius: 20px;border-top-right-radius: 20px;transition: bottom 0.3s ease-out;z-index: 2001;display: flex;flex-direction: column;}
.comment-drawer.active {bottom: 0;}
.drawer-handle {width: 40px;height: 5px;background: #ccc;border-radius: 10px;margin-top: 10px;margin-bottom: 5px;}
.comment-list {flex-grow: 1;overflow-y: auto;
	-webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
}
.comment-input-section {position: sticky;bottom: 0;}
@media screen and (max-height: 450px) {
	.comment-drawer {
		height: 85vh; /* Take more space when keyboard is open */
	}
}
/*end comment drawer*/
/*start comment list inside drawer*/
.comment-item {align-items: flex-start;}
.comment-content {max-width: 99%; /* Prevents long comments from hitting the edge */
display: flex;justify-content: center;align-items: start;}
.comment-content .bg-light {background-color: #f2f3f5 !important; /* Soft grey bubble */
	display: inline-block; /* Bubble fits the text length */
}
.comment-content p {font-size: 14px;line-height: 1.3;}
/* Add a slight pulse for new comments appearing */
.comment-item.new-comment {
	animation: slideInLeft 0.3s ease;}
@keyframes slideInLeft {
	from { opacity: 0; transform: translateX(-10px); }
	to { opacity: 1; transform: translateX(0); }
}
/*end comment list inside drawer*/

/*start match details page*/

/* Layout & Tabs */
.match-details-container { width: 100%; padding:0px; margin: 0px;}
.tabs { display: flex; border-bottom: 2px solid #ddd; margin-bottom: 20px; }
.tab-link { flex: 1; padding: 15px; border: none; background: none; cursor: pointer; font-weight: bold; font-size: 16px; color: #666; 
-webkit-tap-highlight-color: transparent; /* Removes the grey flicker on tap */}
.tab-link.active { color: #ffc107; border-bottom: 3px solid #ffc107; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Scorecard Table */
.scorecard-table { width: 100%; border-collapse: collapse; text-align: center; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.scorecard-table th { background: #f8f9fa; padding: 10px; color: #888; text-transform: uppercase; font-size: 12px; }
.scorecard-table td { padding: 10px; border-bottom: 1px solid #eee; font-size: 16px; font-weight: bold; }
.scorecard-table .winner { color: #221ec7; }
.scorecard-table .vs-label { font-size: 12px; color: #ccc; font-weight: normal; }

/* Frame Styling */
.frame-group { margin-bottom: 30px; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
/*.frame-header-banner { background: #34495e; color: white; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; }*/
.frame-badge { background: #2ecc71; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; }
.frame-header-banner {display: flex !important;list-style: none;cursor: pointer;background: #34495e; /* Adjust to your theme color */padding: 8px 12px;}
/* Remove default details arrow */
.frame-header-banner::-webkit-details-marker {display: none;}
/* Make the switch green when active to match Snooker theme */
.form-check-input {cursor: pointer;}
.form-check-input:checked {border-color: #198754;
	background-color: #2ecc71; /* Bootstrap success green */}
.frame-controls {flex-wrap: nowrap;}
/* Optional: Darken the select dropdown to match the dark header */
.form-select.bg-dark {--bs-bg-opacity: 0.2;cursor: pointer;}
/* Fix for mobile: prevent controls from squishing the title */
@media (max-width: 400px) {
	.frame-badge { font-size: 12px; }
	.frame-controls { gap: 5px !important; }
}

/* Visit Rows */
.visit-row { padding: 15px; border-bottom: 1px solid #f0f0f0; position: relative; background: #fff; }
.visit-row.player-1 { border-left: 5px solid #3498db; } /* Blue for Player 1 */
.visit-row.player-2 { border-left: 5px solid #9b59b6; } /* Purple for Player 2 */
.visit-row.player-3 { border-left: 5px solid #ede711; } /* Yellow for Player 3 */
.visit-row.player-4 { border-left: 5px solid #117ded; } /* Purple for Player 4 */
.visit-row.foul { background: #fff5f5; border-left-color: #e74c3c; }

.visit-meta { display: flex; justify-content: space-between; margin-bottom: 10px; }
.player-name { font-weight: bold; color: #333; }
.visit-tag { font-size: 11px; color: #999; text-transform: uppercase; }

.visit-body { display: flex; align-items: center; }
.score-display { text-align: center; padding-right: 20px; border-right: 1px solid #eee; min-width: 60px; }
.score-num { display: block; font-size: 24px; font-weight: 800; line-height: 1; }
.score-label { font-size: 10px; color: #888; text-transform: uppercase; }

.sequence-box { padding-left: 20px; }
.foul-details { padding-left: 20px; color: #c0392b; font-size: 14px; }
.sequence-box .foul-icon{margin-bottom:-22px;}
/* Ball Styling */
.ball-trail { display: flex; gap: 4px; }

/*toggle start details page*/
/* Remove default details arrow */
details summary {list-style: none;outline: none;cursor: pointer;}
details summary::-webkit-details-marker {display: none;}

/* Toggle Arrow Animation */
.toggle-arrow {margin-right: 10px;font-size: 10px;transition: transform 0.3s ease;display: inline-block;}
details[open] .toggle-arrow {transform: rotate(180deg);}

/* Optional: Add a slight background change when open */
details[open] .frame-header-banner {
	border-bottom: 1px solid rgba(255,255,255,0.1);
	background-color: #243444; /* Slightly darker when open */
}
/* Ensure timeline doesn't look cramped */
.frame-timeline {transition: all 0.3s ease-in-out;}
/*toggle end details page*/
/* hide zero label balls */
.hide-zero-label {font-size: 12px;color: #bdc3c7;cursor: pointer;background: rgba(255,255,255,0.1);padding: 4px 8px;border-radius: 4px;display: flex;align-items: center;gap: 5px;transition: 0.2s;}
.hide-zero-label:hover {background: rgba(255,255,255,0.2);color: #fff;}
.hide-zero-check {margin: 0;cursor: pointer;}
/* Prevent the summary from looking cluttered */
.filter-wrapper {z-index: 10;}

.efficiency-section {margin-top: 30px;padding: 20px;background: #fff;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);}
.section-title {text-align: center;color: #7f8c8d;text-transform: uppercase;font-size: 14px;letter-spacing: 1px;margin-bottom: 20px;}
.stat-row {margin-bottom: 20px;}
.stat-label {text-align: center;font-size: 12px;color: #95a5a6;margin-bottom: 5px;font-weight: bold;}
.stat-values {display: flex;align-items: center;justify-content: space-between;gap: 15px;}
.val-p1, .val-p2 {font-weight: 800;font-size: 16px;width: 40px;}
.val-p1 { text-align: right; color: #3498db; } /* Player 1 Color */
.val-p2 { text-align: left; color: #9b59b6; }  /* Player 2 Color */
.stat-bar-bg {flex-grow: 1;height: 8px;background: #ecf0f1;border-radius: 4px;position: relative;overflow: hidden;}
.stat-bar-fill {height: 100%;position: absolute;border-radius: 4px;}
.stat-bar-fill.p1 { background: #3498db; left: 0; }
.stat-bar-fill.p2 { background: #9b59b6; right: 0; }

.player-name-clamp {display: block !important;white-space: nowrap !important;overflow: hidden !important;text-overflow: ellipsis !important;padding-left: 5px;padding-right: 5px;
width: 100%; /* Occupy the full width of the col-X container */}
/*end match details*/

/* Limit to 3 lines and add ellipsis */
.clamp-text {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;position: relative;}
/* For expanding the text */
.expanded-text {display: block !important;-webkit-line-clamp: none !important;}
/* Styling for the "Read More" link */
.read-more-btn {color: #007bff;cursor: pointer;font-size: 0.85rem;font-weight: bold;display: inline-block;margin-top: 5px;}
/* This block will only be read by Safari 11+ */
@supports (-webkit-hyphens:none) {
  .lblmthdetail {overflow: unset;}
}
/* Removes the default Bootstrap arrow from the dropdown */
.dropdown > a::after {display: none;}
.dropdown-menu {border: 1px solid #eee;border-radius: 8px;min-width: 140px;}
.dropdown-item {font-size: 0.9rem;padding: 8px 16px;}
.dropdown-item:active {background-color: #f8f9fa;color: inherit;}

/*overlay section start paylock*/
.sub-lock-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
/* Transparent at top, blurs everything underneath */
background: rgba(255, 255, 255, 0.2);
z-index: 10000; /* Stays above navbars */
}
.sub-lock-card {height: 70%;position: relative;overflow-y: auto;}/*border-top-left-radius: 20px;border-top-right-radius: 20px;*/
.sub-lock-handle {width: 50px;height: 6px;background-color: #dee2e6;border-radius: 10px;}
body.locked {overflow: hidden !important;touch-action: none;}
/*overlay section end*/
.nav-search-link {display: inline-flex;width: 40px;  /* Fixed width */height: 40px; /* Fixed height */align-items: center;justify-content: center;text-decoration: none;}

/*deals swiper start*/
#dealsSlider {padding-bottom:0px !important;}
#dealsSlider .swiper-wrapper {height: 80% !important;}
#dealsSlider .swiper-slide {height: auto;display: flex;}
#dealsSlider .card {width: 100%;min-height: 120px; /* Slightly taller for better readability */ overflow:scroll; border: 1px solid rgba(0,0,0,0.05) !important;}
/* Custom colors for the background "tease" */
.bg-light-orange { background-color: #fffaf4 !important; }
.bg-light-blue { background-color: #f4faff !important; }
/* Styling for the pagination dots specifically for this slider */
.deals-pagination .swiper-pagination-bullet {background: #bbb;width: 8px;height: 8px;margin: 0 4px !important;}
.deals-pagination .swiper-pagination-bullet-active {background: #ffa500 !important;width: 12px;border-radius: 6px;transition: width 0.3s ease;}
/*deals swiper end*/
/* friends section tab height concern solution start*/
#friendsTabContent .tab-pane:not(.active) {display: none !important;height: 0 !important;overflow: hidden !important;padding: 0 !important;margin: 0 !important;}
#friendsTabContent .tab-pane.active {display: block !important;height: auto !important;visibility: visible !important;}
.friend-card {display: flex;align-items: center;clear: both;}
/* friends section tab height concern solution end*/
/*my matches filter start*/
/* Styling for the Filter Dropdown only */
#matchFilterForm .form-control {font-size: 0.85rem;border-radius: 6px;}
#matchFilterForm .btn {font-size: 0.8rem;border-radius: 6px;}
.dropdown-menu.p-3 {border: 1px solid #ddd;border-radius: 12px;}
/*my matches filter end*/
.matchAIReport .card{background:none !important;}
.matchAIReport .card-header{background:#0d6efd !important; color:#FFFFFF !important;}
.matchAIReport .card-footer{background:#212529 !important; color:#FFFFFF !important;}
/*member subsc page start*/
/* Feature Card Enhancements */
.feature-card {height: 50px;transition: transform 0.1s;}
.feature-text {font-size: 11px;font-weight: 700;color: #333;white-space: nowrap;}
.feature-icon-wrapper {width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 8px;flex-shrink: 0;}
.bg-light-blue { background-color: #e7f1ff; }
/* Pricing Adjustments */
.card h3 { font-size: 1.5rem; }
/* Mobile Touch Feedback */
.btn:active {transform: scale(0.95);}
.row.g-3 {display: flex;flex-wrap: wrap;background:#FFFFFF !important;}
/*member subsc page end*/

.paymentlist .list-group-flush > .list-group-item {border-width: 0 !important;}
.paymentlist .list-group-item {transition: all 0.2s ease;border: 1px solid rgba(0,0,0,0.03) !important; /* Subtle outer border */}
.paymentlist .list-group-item:active {background-color: #f8f9fa !important;transform: scale(0.98);}
.paymentlist .shadow-sm {box-shadow: 0 .125rem .5rem rgba(0,0,0,.05) !important;}
.min-vh-85 {min-height: 85vh !important;}

/* Overlay for Free Users */
.video-lock-container .pro-overlay {position: absolute;z-index: 10;border: 1px dashed #ffa500;top: 0;left: 0;width: 100%;height: 100%;
	background: rgba(0, 0, 0, 0.6); /* Dark tint */
	backdrop-filter: blur(2px);     /* Blurs the input behind it */
}
.pointer-none {pointer-events: none; /* Prevents clicking the input even if blurred */}
.lock-icon {font-size: 1.2rem;filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));}
/* Container styling ranking profile page*/
.player-rank-container {padding: 10px 18px;display: inline-flex;margin: 10px 0;align-items: center;gap: 12px;white-space: nowrap;
	background: rgba(13, 110, 253, 0.7); /* Slight transparent white background */
	border-radius: 50px; /* Pill shape */
	border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle container border */
}
.player-rank-container i {
	width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;border-radius: 50%;font-size: 1.2rem;
	border: 2px solid #ffffff; /* Explicit white border as requested */
	background: transparent; /* Transparent background */
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* Soft glow */
}
.rank-name {color: #ffffff;font-weight: 600;letter-spacing: 0.5px;text-transform: uppercase;}
.rating-points {background: #ffffff;color: #000000;padding: 2px 10px;border-radius: 12px;font-weight: 800;margin-left: 5px;}
.player-rank-container:active {transform: scale(0.96);transition: 0.1s;}
.mb-6{margin-bottom: 4rem !important;}
.text-bronze { color: #cd7f32 !important; }
.border-bronze { border-color: #cd7f32 !important; }
.text-silver { color: #9d9d9d !important; }
.border-silver { border-color: #9d9d9d !important; }
/* Leaderboard loggedin user Highlight for Card (Top 3) */
.user-highlight-card {background-color: #1a2a3a !important; /* Deep Navy to stand out from black */border: 1px solid #0dcaf0 !important; /* Cyan border */}
/* Highlight for List Item (Rank 4+) */
.user-highlight-row {background-color: rgba(13, 202, 240, 0.15) !important; /* Transparent Cyan */border-left: 4px solid #0dcaf0 !important;padding-left: 10px !important;}
/* Text glow for the current user's name */
.user-rank-active span {color: #0dcaf0;font-weight: bold;}
.rank-number { width: 30px; display: inline-block; }
.profile-link {text-decoration: none;color: inherit;}
.profile-link:hover h5, .profile-link:hover span {text-decoration: underline;}
.user-highlight-card .border-dark {border-color: #FFFFFF !important;}
.user-highlight-card .text-dark {color: #FFFFFF !important;}
.tourInfoArea{border-radius: 0 0 10px 10px;background: linear-gradient(to top, rgba(9, 95, 255, 0.5) 0%, rgba(0, 95, 255, 0) 12%), #ffffff;}
.sliderTextBG {top: 12px;right: 12px;width: 135px;height:35px;background-color: rgba(255, 255, 255, 1);color: #000000;}
.tourListActBtn {width: 135px;height:35px;background-color: rgba(255, 255, 255, 1);color: #000000;}
.status-ticker {position: absolute;top: 5px;left: 5px;z-index: 10;padding: 6px;font-size: 10px;font-weight: 700;letter-spacing: 0.5px;text-transform:uppercase;}
.tickertdetail{top: 16px;left: 50px;}
/* Colors for the ticker */
.ticker-live { background-color: #dc3545; color: white; animation: pulse 2s infinite; }
.ticker-upcoming { background-color: #ffc107; color: black; }
.ticker-completed { background-color: #6c757d; color: white; }
/* Optional: Make the "Live" ticker pulse */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}
.coorgroup .menu-sub-dropdown{top:100%;bottom:auto;}
.showcase{animation: pulse 2s infinite; color: #FFF;}
@keyframes showcase {   
	0% { transform: scale(1); opacity: 1; color: #FFF !important;}
    50% { transform: scale(1.05); opacity: 0.8; color: #ffa500 !important;}
    100% { transform: scale(1); opacity: 1; color: #FFF !important;}
}
.tabsScroll {overflow-x: auto; /* Enables horizontal scrolling */overflow-y: hidden;white-space: nowrap; /* Forces content to stay on one line */-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */gap: 5px; /* Space between buttons */}
/* Hide scrollbar for Chrome, Safari and Opera */
.tabsScroll::-webkit-scrollbar {display: none;}
/* Hide scrollbar for IE, Edge and Firefox */
.tabsScroll {-ms-overflow-style: none;  /* IE and Edge */scrollbar-width: none;  /* Firefox */}
.min-vh-75{min-height:75vh!important;}
.notif-unread {background-color: #f0fff4 !important;}
.notif-item:active {background-color: #e2e8f0;}
.text-truncate-2 {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
/* Custom Teal Theme */
/* Custom Teal Color from your image */
.btn-booking {background-color: #00bfa5;color: white;font-weight: bold;padding: 10px 0;border: none;}
.btn-booking:hover {background-color: #00a690;color: white;}
/* Horizontal Scroll Adjustments */
.card-slider {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
    -webkit-overflow-scrolling: touch; /* Smooth scroll for Safari/iOS */
}
.card-slider::-webkit-scrollbar {
    display: none; /* Hides scrollbar for Chrome/Safari */
}
#matchFilterForm .menu-sub-dropdown{top:auto;bottom:unset;}
.grecaptcha-badge { visibility: hidden !important; }
/*The Messaging Panel Layout Wrapper START*/
#sidebar-panel, #chat-panel {height: 100% !important;}
/* Elegant styling for message text bubbles */
.bubble-received {background-color: #f1f5f9;color: #1e293b;border-bottom-left-radius: 4px;}
.bubble-sent {background-color: #0d6efd;color: #ffffff;border-bottom-right-radius: 4px;}
#chat-messages-box {scroll-behavior: smooth;}
/*The Messaging Panel Layout Wrapper END*/
#refereeSearchResults .menu-sub-dropdown{top:auto;bottom:auto;margin-left:10px;}