@charset "utf-8";
/* CSS Document */

.nomarpad{margin:0px; padding:0px;}

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: #f6f7f9;
}

.unread {
  background-color: #f5f5f5 !important;
}

/* Styles for unread messages (bold text and white background) */
.read {
  background-color: #F9FAFBfff !important;
}
.campReport_read{
	/*border-bottom: 1px solid rgb(233, 237, 239);*/
    text-align: center;
     padding-top: 6px;
	/* background: #F9FAFBfff !important; */
    font-size: 13px;
}
.campReport_unread{
	/*border-bottom: 1px solid rgb(233, 237, 239);*/
    text-align: center;
    padding-top: 6px;
	/* background: #f9f9f9 !important;*/
    font-size: 13px;
}

.mmDesc{
	border-top:1px solid #e9ecef;
	padding-top:5px;
}

.singlebrfPillColor {
    padding: 5px 10px;
    background-color: #E7F6FF;
    border-radius: 5px;
    font-size: 12px;
    color: black;
    font-weight: bold;
    color: #00A2FF;
}
.rotating-background {
  width: 25px;
  height: 25px;
  background-image: url('../images/evolgence_logo.png'); /* Replace with your image path */
  background-size: cover; /* Adjust as needed */
  background-position: center;
  animation: rotateBackground 3s linear infinite; /* 10s duration, linear timing, infinite loop */
}

@keyframes rotateBackground {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.react-datepicker-wrapper{
	width:100% !important;
}
.alertPhilLeadMange {
    padding: 3px 6px;
    background-color: #e6f0f8;
    border-radius: 5px;
    font-size: 12px;
    color: black;
    font-weight: normal;
}
.leadPillColor {
    color: #083c97;
    font-weight: 500;
}
.add-to-home-screen-pwa__notify button {
	    background: #E67817 !important;
		border-radius: 0px !important;
		letter-spacing: 0.1em !important;
        padding: 0.4em 0.834em !important;
        font-size: 0.8rem !important;
		width :26% !important;
		margin-top: 20px;
}
.add-to-home-screen-pwa{
	position: fixed;
    bottom: 3rem !important;
    /* padding: 10px 25px; */
    /* background-color: #f0f0f0; */
    justify-content: space-around;
    text-align: left;
    border: 0px;
	z-index: 999999 !important;
	padding: 4px !important;
}
.add-to-home-screen-pwa__notify{
	width :100% !important;
}
.add-to-home-screen-pwa__notify p {
	width :70% !important;
	float : left;
}
.add-to-home-screen-pwa__notify p:first-of-type {
	margin-top: .7rem !important;
}
@font-face {
    font-family: 'open_sansbold';
    src: url('../fonts/opensans-bold-webfont.eot');
    src: url('../fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-bold-webfont.woff2') format('woff2'),
         url('../fonts/opensans-bold-webfont.woff') format('woff'),
         url('../fonts/opensans-bold-webfont.ttf') format('truetype'),
         url('../fonts/opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sanslight';
    src: url('../fonts/opensans-light-webfont.eot');
    src: url('../fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-light-webfont.woff2') format('woff2'),
         url('../fonts/opensans-light-webfont.woff') format('woff'),
         url('../fonts/opensans-light-webfont.ttf') format('truetype'),
         url('../fonts/opensans-light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/opensans-regular-webfont.eot');
    src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('../fonts/opensans-regular-webfont.woff') format('woff'),
         url('../fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('../fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sanssemibold';
    src: url('../fonts/opensans-semibold-webfont.eot');
    src: url('../fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-semibold-webfont.woff2') format('woff2'),
         url('../fonts/opensans-semibold-webfont.woff') format('woff'),
         url('../fonts/opensans-semibold-webfont.ttf') format('truetype'),
         url('../fonts/opensans-semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v257/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal; 
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

.game_video_completed iframe {
    width: 100%;
    height:300px;
    object-fit: inherit;
    border-radius: 10px;
    padding: 0px 10px;
}

.game_video_completed video {
    width: 100%;
    height:300px;
    object-fit: inherit;
    border-radius: 10px;
    padding: 0px 10px;
}


.video_title {
    padding: 5px 10px 8px 10px;
    width: 100%;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 16px;
}

/******Login CSS*******/
.home_banner{width:100%; margin:5% 0; height: 100vh;}
.footer_copyright{background:#00467C; text-align:center; color:#F9FAFB; padding:10px 0px; width:100%;}
.nodata_found{text-align:center;margin-top:20%;}
.nodata_found_2{text-align:center;}
.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 25px;
  margin:25px auto;
  border-radius:10px;
  border:1px solid #F9FAFB;
}
.form-signin h1{color:#F9FAFB; font-size:18px; padding:15px 0px;}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.form-signin label{color:#F9FAFB; font-size:14px;}
.form-signin .form-control{border-bottom:1px solid #F9FAFB; border-left:0; border-right:0; border-top:0; background:none; /* padding-left:0px; */ color:#EAEAEA; border-radius:0px; margin-bottom:25px !important; /* padding-top:0px; */ }
.form-signin .form-control::placeholder{color:#F9FAFB; opacity:1;}

.kidloginimg{position:absolute; bottom:0px; right:0px; z-index:9;}

.loginlogo{padding:25px 0px 0px 50px; width:250px;}

.winners_list{width:100%; height:auto; margin:0px; padding:0px;}
.winners_list p:nth-child(1){font-family:'open_sanssemibold'; text-transform:uppercase; color:#cc6694; font-size:28px; text-align:center; font-weight:600; margin:0px; padding:0px;}
.winners_list p:nth-child(2){font-family:'open_sansregular'; text-transform:capitalize; color:#34A853; font-size:22px; text-align:center; font-weight:600; margin:0px; padding:0px; line-height:18px;}

.fullhousie_winner{width:80%; margin:50px auto 0px; padding:10px 0px 10px 25px; background: #2A7B9B; background: linear-gradient(101deg, rgba(42, 123, 155, 1) 0%, rgba(8, 60, 151, 1) 0%, rgba(52, 168, 83, 1) 100%); border-radius:10px; position:relative;}
.fullhousie_winner p{text-transform:uppercase; font-size:18px; color:#F9FAFB; margin:0px; padding:0px;}
.fullhousieimg {position:absolute; bottom:0; right:0; text-align:right;}
.fullhousieimg img{width:50%;}

.game_winners_list{width:100%; width:95%; margin:-20px auto 0px; background:#F9FAFB6EC; border:1px solid #FFAF51; border-radius:10px; padding:5px 20px 20px 20px;}

.game_winners_list ul{list-style:none inside; margin:0px; padding:0px;}
.game_winners_list ul li{background:url(../images/winner.png) no-repeat; padding:0px 0px 10px 70px; margin-bottom:10px; border-bottom:1px solid #FFDDB5;}
.game_winners_list ul li p{padding:0px; margin:0px; text-transform:uppercase; color:#000;}


/********Login Css Ends Here*****************/

nav{
  background: black;
  color: white;
  height:56px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
}

.rnc__base {
	
	left: 50%;
    transform: translate(-50%, 0);
    padding: 10px;
    width: 100%;
    bottom: 0;
    box-shadow: 0 -4px 4px rgb(0 0 0 / 4%);
    border: 1px solid #cecece;
    cursor: pointer;
    color: #000;
	height: 100%;
    pointer-events: none;
    position: fixed;
    width: 100%;
    z-index: 999999 !important;
	
}
.no-copy {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Standard syntax */
}

.body_container {
  width: 100%;
}

.leftnav{margin-top:55px; display:flex; width:100%; position:fixed;}
/*.leftnav {
  height: 100vh;
  background: gray;
  width: 15%;
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 60px;
  color: white;
  z-index: -1;
  overflow: scroll;
}*/
main {
  width: 85%;
  margin-left: 0%;
  margin-top:0px;
  float:left;
}

.pre-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  height: 20px;
  width: 100%;
  z-index: 9;
  animation: fadeOut 1s 5s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    pointer-events: all;
  }
  
  100% {
    opacity: 0;
    pointer-events: none;
  }
}

.top_header .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus{color: inherit; background: none; user-select: none;}

.top_header {width:100%;}
.top_header .navbar {width:100%; background:#cc6694; display:inherit;user-select: none;}
.hamburg_menu{float:left; cursor:pointer;}
.top_header .navbar-brand{color:#F9FAFB; font-weight:bold; padding:0px; float:left;}
.top_right_icons{float:right;}
.top_right_icons .material-symbols-outlined{margin-right:15px; margin-top:7px; cursor:pointer; color:#F9FAFB;}
.top_header .bi-list::before{vertical-align:0px;}
.top_right_icons span:nth-child(2){margin-right:0px;}




/*Bootstrap 4 Tooltip*/
.tooltip > .arrow {
    background-color: transparent;
}

.tooltip > .tooltip-inner {
    text-align: center;
    font-size: 12px;
    padding: 10px 15px;
    border-radius: 5px;
    color: black;
    background-color: white;
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.15);
}

.bs-tooltip-top,
.bs-tooltip-right,
.bs-tooltip-left,
.bs-tooltip-bottom {
  background-color: transparent;
  opacity: 1!important;
}

.tooltip.bs-tooltip-top .arrow:before,
.tooltip.bs-tooltip-bottom .arrow:before {
    border-top-color: white; 
    border-right-color: transparent; 
    border-bottom-color: white; 
    border-left-color: transparent; 
}

.tooltip.bs-tooltip-right .arrow:before,
.tooltip.bs-tooltip-left .arrow:before{
    border-top-color: transparent; 
    border-right-color: white; 
    border-bottom-color: transparent; 
    border-left-color: white; 
}



.leftnav_tooltip{position: relative;  display: inline-block;}
.leftnav_tooltip .tooltiptext {
  visibility: hidden;
  width: auto;
  background: #01D69E;
  color: #000;
  text-align: center;
  border-radius: 4px;
  padding:10px;
  font-size:14px;
  font-family: 'open_sansbold';
  margin:-5px 0px 0px 10px;
  text-transform:uppercase;

  /* Position the tooltip */
  position:fixed;
  z-index: 9999;
}

.leftnav_tooltip:hover .tooltiptext {
  visibility: visible;
}

.body_left_main{padding:0px;}
.body_left_main .nav-item{flex-grow:0;}
.body_left_main .nav {justify-content: center;}
.body_left_main .nav-tabs .nav-link{border:none;}
.body_left_main .nav-tabs{border:none; margin-bottom:10px;}
.body_left_main .nav-tabs .nav-link.active{color:#cc6694; font-weight:bold; border-bottom:5px solid #cc6694;}

.scrollablediv{/*height:550px;*/ height:650px; overflow-y:scroll; overflow-x:hidden;}
.tabcontent {
    display: none;
    padding: 0px 0px 100px 0px;
    /*border: 1px solid #aaa;*/
    border-top: none;
}

.cardOuter {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #E9EDEF;
  justify-content: left;
  background-color: #FFFFFF;
  padding:8px; 
  position:relative;
}

.cordImg {
  width: 35px;
  height: 35px;
  /*border-radius: 100px;
  background-image: url("../images/evolgence_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  overflow: hidden;*/
  margin:0px;
}

.cordImg_bkup {
  width: 42px;
  height: 42px;
  /*border-radius: 100px;
  background-image: url("../images/evolgence_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  overflow: hidden;*/
  margin:3px 0px;
}

.cordImg img {
  width: 35px;
  height: 35px;
  border-radius: 100px;
}
.cordImg_bkup img {
 /*  width: 100%; */
  height: 100%;
  border-radius: 100px;
}
.cordGrpImg {
  width: 42px;
  height: 42px;
  margin:3px 0px;
}
.cordGrpImg img {
  width: 100%;
  height: 100%;
  border-radius: 100px;
}

.image--cover {
 /*  width: 150px;
  height: 150px; 
  */
  border-radius: 50%;
  margin: 0;
  object-fit: cover;
  object-position: center right;
}
.cordContent {
  min-width: 330px;
  text-align: left;
  font-size: 14px;
  margin:0px;
  padding:0px 0px 0px 10px;
}
.cardTime {
  color: #8795a0;
  font-size: 12px;
}
.hiddenFileInput > input{
  height: 100%;
  width: 100;
  opacity: 0;
  cursor: pointer;
}
.hiddenFileInput{
  border: 1px solid #ccc;
  width: 100px;
  height: 100px;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  
  /*for the background, optional*/
  background: center center no-repeat;
  background-size: 75% 75%;
  background-image:  url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjUxMnB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9Ii01MyAxIDUxMSA1MTEuOTk5MDYiIHdpZHRoPSI1MTJweCI+CjxnIGlkPSJzdXJmYWNlMSI+CjxwYXRoIGQ9Ik0gMjc2LjQxMDE1NiAzLjk1NzAzMSBDIDI3NC4wNjI1IDEuNDg0Mzc1IDI3MC44NDM3NSAwIDI2Ny41MDc4MTIgMCBMIDY3Ljc3NzM0NCAwIEMgMzAuOTIxODc1IDAgMC41IDMwLjMwMDc4MSAwLjUgNjcuMTUyMzQ0IEwgMC41IDQ0NC44NDM3NSBDIDAuNSA0ODEuNjk5MjE5IDMwLjkyMTg3NSA1MTIgNjcuNzc3MzQ0IDUxMiBMIDMzOC44NjMyODEgNTEyIEMgMzc1LjcxODc1IDUxMiA0MDYuMTQwNjI1IDQ4MS42OTkyMTkgNDA2LjE0MDYyNSA0NDQuODQzNzUgTCA0MDYuMTQwNjI1IDE0NC45NDE0MDYgQyA0MDYuMTQwNjI1IDE0MS43MjY1NjIgNDA0LjY1NjI1IDEzOC42MzY3MTkgNDAyLjU1NDY4OCAxMzYuMjg1MTU2IFogTSAyNzkuOTk2MDk0IDQzLjY1NjI1IEwgMzY0LjQ2NDg0NCAxMzIuMzI4MTI1IEwgMzA5LjU1NDY4OCAxMzIuMzI4MTI1IEMgMjkzLjIzMDQ2OSAxMzIuMzI4MTI1IDI3OS45OTYwOTQgMTE5LjIxODc1IDI3OS45OTYwOTQgMTAyLjg5NDUzMSBaIE0gMzM4Ljg2MzI4MSA0ODcuMjY1NjI1IEwgNjcuNzc3MzQ0IDQ4Ny4yNjU2MjUgQyA0NC42NTIzNDQgNDg3LjI2NTYyNSAyNS4yMzQzNzUgNDY4LjA5NzY1NiAyNS4yMzQzNzUgNDQ0Ljg0Mzc1IEwgMjUuMjM0Mzc1IDY3LjE1MjM0NCBDIDI1LjIzNDM3NSA0NC4wMjczNDQgNDQuNTI3MzQ0IDI0LjczNDM3NSA2Ny43NzczNDQgMjQuNzM0Mzc1IEwgMjU1LjI2MTcxOSAyNC43MzQzNzUgTCAyNTUuMjYxNzE5IDEwMi44OTQ1MzEgQyAyNTUuMjYxNzE5IDEzMi45NDUzMTIgMjc5LjUwMzkwNiAxNTcuMDYyNSAzMDkuNTU0Njg4IDE1Ny4wNjI1IEwgMzgxLjQwNjI1IDE1Ny4wNjI1IEwgMzgxLjQwNjI1IDQ0NC44NDM3NSBDIDM4MS40MDYyNSA0NjguMDk3NjU2IDM2Mi4xMTMyODEgNDg3LjI2NTYyNSAzMzguODYzMjgxIDQ4Ny4yNjU2MjUgWiBNIDMzOC44NjMyODEgNDg3LjI2NTYyNSAiIHN0eWxlPSIgZmlsbC1ydWxlOm5vbnplcm87ZmlsbC1vcGFjaXR5OjE7IiBzdHJva2U9IiMwMDAwMDAiIGZpbGw9IiMwMDAwMDAiLz4KPHBhdGggZD0iTSAzMDUuMTAxNTYyIDQwMS45MzM1OTQgTCAxMDEuNTM5MDYyIDQwMS45MzM1OTQgQyA5NC43MzgyODEgNDAxLjkzMzU5NCA4OS4xNzE4NzUgNDA3LjQ5NjA5NCA4OS4xNzE4NzUgNDE0LjMwMDc4MSBDIDg5LjE3MTg3NSA0MjEuMTAxNTYyIDk0LjczODI4MSA0MjYuNjY3OTY5IDEwMS41MzkwNjIgNDI2LjY2Nzk2OSBMIDMwNS4yMjY1NjIgNDI2LjY2Nzk2OSBDIDMxMi4wMjczNDQgNDI2LjY2Nzk2OSAzMTcuNTkzNzUgNDIxLjEwMTU2MiAzMTcuNTkzNzUgNDE0LjMwMDc4MSBDIDMxNy41OTM3NSA0MDcuNDk2MDk0IDMxMi4wMjczNDQgNDAxLjkzMzU5NCAzMDUuMTAxNTYyIDQwMS45MzM1OTQgWiBNIDMwNS4xMDE1NjIgNDAxLjkzMzU5NCAiIHN0eWxlPSIgZmlsbC1ydWxlOm5vbnplcm87ZmlsbC1vcGFjaXR5OjE7IiBzdHJva2U9IiMwMDAwMDAiIGZpbGw9IiMwMDAwMDAiLz4KPHBhdGggZD0iTSAxNDAgMjY4Ljg2MzI4MSBMIDE5MC45NTMxMjUgMjE0LjA3NDIxOSBMIDE5MC45NTMxMjUgMzQ5LjEyNSBDIDE5MC45NTMxMjUgMzU1LjkyNTc4MSAxOTYuNTE5NTMxIDM2MS40OTIxODggMjAzLjMyMDMxMiAzNjEuNDkyMTg4IEMgMjEwLjEyNSAzNjEuNDkyMTg4IDIxNS42ODc1IDM1NS45MjU3ODEgMjE1LjY4NzUgMzQ5LjEyNSBMIDIxNS42ODc1IDIxNC4wNzQyMTkgTCAyNjYuNjQwNjI1IDI2OC44NjMyODEgQyAyNjkuMTEzMjgxIDI3MS40NTcwMzEgMjcyLjMzMjAzMSAyNzIuODIwMzEyIDI3NS42Njc5NjkgMjcyLjgyMDMxMiBDIDI3OC42MzY3MTkgMjcyLjgyMDMxMiAyODEuNzMwNDY5IDI3MS43MDcwMzEgMjg0LjA3ODEyNSAyNjkuNDgwNDY5IEMgMjg5LjAyNzM0NCAyNjQuNzgxMjUgMjg5LjM5ODQzOCAyNTYuOTg4MjgxIDI4NC42OTkyMTkgMjUyLjA0Mjk2OSBMIDIxMi4yMjY1NjIgMTc0LjI1MzkwNiBDIDIwOS44NzUgMTcxLjc4MTI1IDIwNi42NjAxNTYgMTcwLjI5Njg3NSAyMDMuMTk5MjE5IDE3MC4yOTY4NzUgQyAxOTkuNzM0Mzc1IDE3MC4yOTY4NzUgMTk2LjUxOTUzMSAxNzEuNzgxMjUgMTk0LjE3MTg3NSAxNzQuMjUzOTA2IEwgMTIxLjY5OTIxOSAyNTIuMDQyOTY5IEMgMTE3IDI1Ni45ODgyODEgMTE3LjM3MTA5NCAyNjQuOTAyMzQ0IDEyMi4zMTY0MDYgMjY5LjQ4MDQ2OSBDIDEyNy41MTE3MTkgMjc0LjE3OTY4OCAxMzUuMzAwNzgxIDI3My44MDg1OTQgMTQwIDI2OC44NjMyODEgWiBNIDE0MCAyNjguODYzMjgxICIgc3R5bGU9IiBmaWxsLXJ1bGU6bm9uemVybztmaWxsLW9wYWNpdHk6MTsiIHN0cm9rZT0iIzAwMDAwMCIgZmlsbD0iIzAwMDAwMCIvPgo8L2c+Cjwvc3ZnPgo=)
}
.CardTitleOuter {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: auto;
}
.cardName {
  width: 76%;
  font-weight: 500;
  font-size:16px;
}
.cordDescription { 
  width: 100%;
 /*  height:30px; */
  text-align: left;
  font-size: 14px;
  color: #5F6366;
  /*text-overflow: ellipsis;*/
  white-space: pre-line;
  overflow: hidden;
  
}
.cardDescOuter {
  /*display: flex;
  flex-direction: row;
  justify-content: space-between;*/
  width: 100%;
  height: auto;
}
.cardNotification {
  color: #F9FAFBfff;
  font-size: 12px;
  width: 50px;
  text-align: center;
  display:none;
}

.cardNotifyText {
  background-color: #cc6694;
  color: #F9FAFBfff;
  border-radius: 100%;
  padding: 4px 8px;
  line-height: 12px;
  padding: 2px 6px;
}

.cardList ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cardList ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* .chatFloatingButtion {
  line-height: 48px;
  height: 48px;
  position:absolute;
  bottom: 150px;
  padding-right:25px;
  color: #F9FAFB;
  text-align: right;
  width:100%;
  z-index:9;
  
} */

/* .bottom_plusbtn{background:#cc6694; width:50px; height:50px; border-radius:100%; float:right; text-decoration:none;}
.bottom_plusbtn .material-symbols-outlined{color:#F9FAFB; font-size:38px; margin:5px;}
 */
.meeting_card_buttons {
    border-top: 1px solid #E9EDEF;
    margin-top: 5px;
    padding-top: 10px;
    font-size: 13px;
	margin-left: -3px; 
}
.meeting_card_buttons img{width:20px; margin-right:1px;}
.meeting_card_buttons span{position:relative; top:0px;}
.meeting_card_buttons .float-left{margin:0px 15px 0px 0px;}
.meeting_card_buttons a{color:#65676B; text-decoration:none;}

.joinnow_btn{background:#517EFF; color:#F9FAFB; font-size:13px; font-weight:bold; border-radius:5px; padding:2px 4px; text-decoration:none;}
.joinnow_btn a{color:#F9FAFB;  font-size:13px; font-weight:bold; border-radius:5px; padding:2px 4px; text-decoration:none;}
.showSingle{cursor:pointer;}
.gametimings_green {font-size:14px; color:#65676B;}
.gametimings_green span{color:#34A853; font-weight:600; position:relative; top:0px;}
.gametimings_orange {font-size:14px; color:#65676B;}
.gametimings_orange span{color:#cc6694; font-weight:600; position:relative; top:0px;}

.game_scheduled {font-size:14px; color:#65676B;}
.game_scheduled .material-symbols-outlined{font-size:15px; color:#65676B; }

.meeting_card_buttons .material-symbols-outlined {
    font-size: 16px;
}


/*************Body Right Main Start*************/
.body_right_main{background:#F8F8FA; margin:0px; padding:0px;}
/* .body_right_top_header{background:#F0F2F5; width:100%; height:auto; display:flex; margin:0px; padding:10px 0px;} */
.body_right_top_header{background:#F0F2F5; width:100%; height:9%; display:flex; margin:0px; padding:10px 0px;}
.game_title_top_header{font-size:16px; font-weight:500; color:#000;}
.game_date_time_top_header{font-size:14px; font-weight:normal; color:#999;}
.arrow_header_left{float:left; padding:10px 15px 0px 0px; display:none;}
.refresh_header_right{position: absolute;right: 18px;top: 10px;}

.body_right_bottom{width:100%; margin:15px 0px;}
.video_div{width:100%; height:55vh; border-radius:20px;}
.video_div video{width:100%; height:100%; object-fit: cover; border-radius:10px;}
.video_div iframe{width:100%; height:100%; object-fit: cover; border-radius:10px;}
.tambola_ticket_table{width:60%; margin:0px auto;}
.tambola_ticket_table table{width:100%; background:#F9FAFB1F9;}
	.tambola_ticket_table table th{border:1px solid #b2ceff !important; padding:0px; margin:0px; text-align:center;}
	.tambola_ticket_table table td{border:1px solid #b2ceff !important; padding:0px; margin:0px; text-align:center;}
	.selected{background:#cc6694 !important; color:#F9FAFB; font-weight:bold;}
	
	.tambola_ticket_table td:nth-child(even) {
	    background: #f4fafe;
	}
	.tambola_ticket_table td:nth-child(odd) {
	    background: #F9FAFB;
	}


/*.menu{
   margin: 5% 10%;
   background: transparent;
}*/


/*a:nth-child(1){
  background:#E63946; 
   color: #eee;
}
a:nth-child(2){
    background:#F1FAEE; 
   color: #222;
}
a:nth-child(3){
   background: #A8DADC; 
    color: #222;
  
}
a:nth-child(4){
   background: #457B9D;
   color: #eee;
}
a:nth-child(5){
   background: #1D3557;  
   color: #eee;
}*/


/*.cnt{
   margin: 5% 10%;
   background: transparent;
}*/

/*.tabsmain .nav-pills .nav-link{width:100%;}
.tabsmain .nav-pills li:nth-child(2){padding:8px 0px;}*/

.accordion-title:before {
    float: right !important;
    font-family: FontAwesome;
    content:"\f068";
    padding-right: 5px;
}
.accordion-title.collapsed:before {
    float: right !important;
    content:"\f067";
}

.last_five_tokens ul {
  display: table;
  width: 100%;
  height: auto;
  text-align: center;
  margin: 0px 0px 20px 0px;
  padding: 0px;
}

.last_five_tokens ul li {
  display:inline-block;
  background: #cc6694;
  color: #F9FAFB;
  padding: 10px 12px;
  margin: 0px 2px;
  font-weight: bold;
  border-radius: 6px;
}
.cardsDivIcons {
    height: 60px;
    margin: 0;
    padding: 0px;
    text-align: center;
    font-size: 14px;
    color: #334856;
}
.btntambola{margin:0px auto; background:#F9FAFB; border:1px solid #666; color:#000; padding:8px 18px; border-radius:8px;}

.tabsmain .card-header{background:#E6F0F8; border-bottom: 0;}
.tabsmain .card{border-color:#00A2FF; margin-bottom:5px;}
.tabsmain .card .card-link{color:#cc6694;}

.popup_tambola_dashboard{width:100%;}
.popup_tambola_dashboard table td{padding:15px;}

.tabsmain ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: auto;
	/*border-bottom: 1px solid #333;*/
	width: 100%;
}

.tabsmain ul.tabs li {
	float: left;
	margin: 0;
	cursor: pointer;
	padding: 10px 21px;
	height: auto;
	line-height: 31px;
	border-top: 1px solid #F9FAFB;
	border-left: 1px solid #F9FAFB;
	border-bottom: 1px solid #F9FAFB;
	background-color: #517EFF;
	color: #F9FAFB;
	overflow: hidden;
	position: relative;
	width:25%;
	text-align:center;
}

.tab_last { border-right: 1px solid #517EFF; }

.tabsmain ul.tabs li:hover {
	background-color: #cc6694;
	color: #F9FAFB;
}

.tabsmain ul.tabs li.active {
	background-color: #F9FAFB;
	color: #cc6694;
	font-weight:600;
	border-bottom: 1px solid #F9FAFB;
	border-top: 1px solid #517EFF;
	border-left: 1px solid #517EFF;
	display: block;
}

.tab_container {
	border: 1px solid #517EFF;
	border-top: none;
	clear: both;
	float: left;
	width: 100%;
	background: #F9FAFB;
	overflow: auto;
	padding-top:10px;
}

.tab_content {
	padding: 10px;
	display: none;
}

.tab_drawer_heading { display: none; }

.right_midddle_main{width:100%; }
.right_middle_inner{margin:0px auto; padding:10px 0px 0px 0px; width:100%; height:80vh; overflow-y:auto; scrollbar-color: #F9FAFB #F9FAFB; scrollbar-width: thin;}
.right_div_main .profile_name{padding-top:2px;}
.right_div_main .profile_threedots{padding-top:12px;}

.date_middle_stamp{background:#F9FAFB; border:1px solid #ccc; text-align:center; padding:6px 10px; border-radius:8px; color:#666; font-size:14px; margin:0 auto 15px; width:-moz-fit-content; clear:both; max-width:90px; z-index:1; position:relative;}
.diver {clear:both;}
.diver hr{margin:-12px 0px 20px 0px; color:#f7f7f7; display:none;}

.left_you_msg_box{background:#F9FAFB; border:1px solid #ccc; color:#000; font-size:14px; margin:0px; border-radius:10px; /*border-radius:10px 10px 0px 10px;*/ padding:8px; width:-moz-fit-content; max-width:300px; position:relative;}

.ticks{width:18px; height:18px; margin-right:10px;}
.left_header_middle .profile_threedots{margin:0px; cursor:default; padding:10px 15px 0 0px; color:#999; font-size:11px;}


.group_left_person{margin:0px; padding:0px; font-weight:bold}

.left_you{float:left; clear:both; }
.right_me{float:right; clear:both;}

.time_date_stamp{text-align:right; font-size:12px; color:#999; margin:8px 0px;}
.right_me_msg_box{background:#F9FAFB; color:#000; border:1px solid #ccc;  font-size:14px; margin:0px; border-radius:10px; padding:8px; width:-moz-fit-content; max-width:300px; float:right; clear:both;}

.left_you_msg_box img{width:275px; height:183px;}
.right_me_msg_box img{width:275px; height:183px;}

.left_you_msg_box:nth-child(2){border-radius:10px; margin:5px 0px 0px 0px;}
.left_you_msg_box:nth-child(3){border-radius:10px; margin:5px 0px 0px 0px;}
.left_you_msg_box:nth-child(4){border-radius:10px; margin:5px 0px 0px 0px;}
.left_you_msg_box:nth-child(5){border-radius:10px; margin:5px 0px 0px 0px;}
.left_you_msg_box:nth-child(6){border-radius:10px; margin:5px 0px 0px 0px;}
.left_you_msg_box:nth-child(7){border-radius:10px; margin:5px 0px 0px 0px;}
.left_you_msg_box:nth-child(9){border-radius:10px; margin:5px 0px 0px 0px;}
.left_you_msg_box:nth-child(10){border-radius:10px; margin:5px 0px 0px 0px;}
.left_you_msg_box:nth-child(11){border-radius:10px; margin:5px 0px 0px 0px;}

.right_me_msg_box:nth-child(2){border-radius:10px; margin:5px 0px 0px 0px;}
.right_me_msg_box:nth-child(3){border-radius:10px; margin:5px 0px 0px 0px;}
.right_me_msg_box:nth-child(4){border-radius:10px; margin:5px 0px 0px 0px;}
.right_me_msg_box:nth-child(5){border-radius:10px; margin:5px 0px 0px 0px;}
.right_me_msg_box:nth-child(6){border-radius:10px; margin:5px 0px 0px 0px;}
.right_me_msg_box:nth-child(7){border-radius:10px; margin:5px 0px 0px 0px;}
.right_me_msg_box:nth-child(9){border-radius:10px; margin:5px 0px 0px 0px;}
.right_me_msg_box:nth-child(10){border-radius:10px; margin:5px 0px 0px 0px;}
.right_me_msg_box:nth-child(11){border-radius:10px; margin:5px 0px 0px 0px;}

.time_date_stamp {clear:both;}
.time_date_stamp .ticks{margin:0px 0px 0px 5px;}



.right_bottom_main{background:#f0f0f0; padding:10px 0px; position:absolute; bottom:0px; left:0px; width:100%;}
.send_msg_box{float:left; width:75%; margin:0px 15px;}
.send_msg_box .form-control{ border-radius:100px; height:40px;}
.submit_btn{float:left;}
.sendbtn_blue{background:#E67817 url(../images/send_btn.png) center no-repeat; border:none; border-radius:100px; padding:7px 20px; margin:4px 0 0 0; }
.attachment{margin:5px 0px 0px -60px; float:left;}
.attachment img{width:20px; margin:1px 20px 0 0px; cursor:pointer;}
label.myLabel input[type="file"] {position:absolute; top: -1000px;}
.myLabel {padding:2px 5px; display:inline-block;}


::-webkit-scrollbar {
    height: 4px;
    width: 6px;
    background: #F9FAFB;
}
::-webkit-scrollbar-thumb {
    background: #ccc;
    -webkit-border-radius: 1ex;
    /-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);/
}
::-webkit-scrollbar-corner {
    background: #ccc;
}

.tambola_contacts .modal-dialog {
  position: fixed;
  right: 0px;
  width: 750px;
  height: 100%;
  max-height: 100%;
  margin: 0px;
}


.tambola_contacts .modal-content {
  height: 100%;
  border-radius: 0px;
  max-height: 100%;
  background: #F9FAFB;
}

.tambola_contacts .close{ float:left; padding:0px 15px 0px 0; margin:0px; color:#F9FAFB; opacity:1;}
.tambola_contacts .modal-header{background:#cc6694; padding:10px 10px 0px 10px; border-radius:0px;}
.tambola_contacts .modal-title{color:#F9FAFB; width:70%; font-size:16px;margin-top: 7px; }

.tasks_tab .tab {
	width: 100%;
  text-align: center;
  white-space: nowrap;
    display: inline-block;
    overflow: auto;
    overflow-y: hidden;
  /*overflow: hidden;
  display: table;*/
  width: 100%;
  text-align: center;
}

.tab button {
  display: inline-block;
  vertical-align: top;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 10px 10px 10px;
  font-size: 16px;
  background: none;
  white-space: nowrap;
}

.tab button.active {
	color:#cc6694;
	font-weight:bold;
  border-bottom:5px solid #cc6694;
}

.game_select_memebrs_popup .nav{justify-content: center;}
.game_select_memebrs_popup .nav-tabs .nav-link{border:none;}
.game_select_memebrs_popup .nav-tabs{border:none; margin-bottom:0px;}
.game_select_memebrs_popup .nav-tabs .nav-link.active{color:#cc6694; font-weight:bold; border-bottom:5px solid #cc6694; background:none;}

.tambola_contacts .modal-body{padding:0px;}


.round_hierarcy_checkbox {
  position:absolute; right:29px; top:9px;
}

.round_hierarcy_checkbox label {
  background:url(../images/hierarchy_normal.png) center no-repeat;
 /* border: 2px solid #B8BBC0;*/
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: absolute;
  top: 10px;
  width: 28px;
}

.round_hierarcy_checkbox label:after {
  /*border: 2px solid #F9FAFB;
  border-top: none;
  border-right: none;*/
  /*content: "";*/
  left: 7px;
  opacity: 0;
  position: absolute;
  top: 8px;
  /*transform: rotate(-45deg);*/
  background:url(../images/hierarchy_selected1.png) center no-repeat;
  width: 50px;
  height: 50px;
}

.round_hierarcy_checkbox input[type="checkbox"] {
  visibility: hidden;
}

.round_hierarcy_checkbox input[type="checkbox"]:checked + label {
  /*background-color: #cc6694;*/
  background:#cc6694 url(../images/hierarchy_selected.png) center no-repeat;
  border-color: #cc6694;
}

.round_hierarcy_checkbox input[type="checkbox"]:checked + label:after {
  opacity: 0;
}



.error-message{text-align:center; font-size:14px; }

.round_members_checkbox {
  position:absolute; right:75px; top:9px;
}

.round_members_checkbox label {
  background:url(../images/hierarchy_person_noraml.png) center no-repeat;
  /*border: 2px solid #B8BBC0;*/
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: absolute;
  top: 10px;
  width: 28px;
}

.round_members_checkbox label:after {
  /*border: 2px solid #F9FAFB;
  border-top: none;
  border-right: none;*/
  /*content: "";*/
  left: 7px;
  opacity: 0;
  position: absolute;
  top: 8px;
  /*transform: rotate(-45deg);*/
  background:url(../images/hierarchy_person_selected.png) center no-repeat;
  width: 50px;
  height: 50px;
}

.round_members_checkbox input[type="checkbox"] {
  visibility: hidden;
}

.round_members_checkbox input[type="checkbox"]:checked + label {
  /*background-color: #cc6694;*/
  background:#cc6694 url(../images/hierarchy_person_selected.png) center no-repeat;
  border-color: #cc6694;
}

.round_members_checkbox input[type="checkbox"]:checked + label:after {
  opacity: 0;
}



.round_plus_checkbox {
  position:absolute; right:120px; top:9px;
}

.round_plus_checkbox label {
  background:url(../images/hierarchy_plus1.png) center no-repeat;
  /*border: 2px solid #B8BBC0;*/
  border-radius: 50%;
  cursor: pointer;
  height: 23px;
  left: 0;
  position: absolute;
  top: 13px;
  width: 23px;
}

.round_plus_checkbox label:after {
  /*border: 2px solid #F9FAFB;
  border-top: none;
  border-right: none;*/
  /*content: "";*/
  left: 7px;
  opacity: 0;
  position: absolute;
  top: 8px;
  /*transform: rotate(-45deg);*/
  background:url(../images/hierarchy_plus1.png) center no-repeat;
  width: 50px;
  height: 50px;
}

.round_plus_checkbox input[type="checkbox"] {
  visibility: hidden;
}

.round_plus_checkbox input[type="checkbox"]:checked + label {
  /*background-color: #cc6694;*/
  background:#cc6694 url(../images/hierarchy_plus_selected2.png) center no-repeat;
  border-color: #cc6694;
  width: 28px;
  height: 28px;
  top: 10px;
}

.round_plus_checkbox input[type="checkbox"]:checked + label:after {
  opacity: 0;
}


.circlecheckbox {
  position:absolute; right:29px; top:9px;
}

.circlecheckbox label {
  background-color: #F9FAFB;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: absolute;
  top: 10px;
  width: 28px;
}

.circlecheckbox label:after {
  border: 2px solid #F9FAFB;
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 7px;
  opacity: 0;
  position: absolute;
  top: 8px;
  transform: rotate(-45deg);
  width: 12px;
}

.circlecheckbox input[type="checkbox"] {
  visibility: hidden;
}

.circlecheckbox input[type="checkbox"]:checked + label {
  background-color: #cc6694;
  border-color: #cc6694;
}

.circlecheckbox input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

input[type="file"] {
    position: absolute;
    top: -1000px;
}
.next_btn_bottom{background:#cc6694;     z-index: 9; width:100%; text-align:center; padding:8px 0px; color:#F9FAFB; position:absolute; bottom:0px; left:0;}
.next_btn_bottom a{background:#cc6694; width:100%; text-align:center; padding:8px 0px; color:#F9FAFB; position:absolute; bottom:0px; left:0;}
.coupon_tag{background:#E9E9E9; border-radius:5px; width:auto; min-width:100px; font-size:12px; display:flex; text-align:center; padding:8px; margin:10px 5px 5px 0px; float:left;}
.coupon_tag .material-symbols-outlined {color:#000; margin:0px 10px 0px 5px; font-size:18px;}
.coupon_tag #del.material-symbols-outlined{margin:0px 0px 0px 10px;}

.mtngs_select_members_hierarchy {
  height: 75vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.add_group_strip{background:#E6F0F8; width:100%; display:flex; padding:10px;}
.add_group_strip span{color:#cc6694; padding-right:20px; font-weight:bold;}



.game_crete_new_group .modal-content {
  height: 100%;
  border-radius: 0px;
  max-height: 100%;
  background: #F9FAFB;
}

.game_crete_new_group .close{ float:left; padding:4px 15px 0px 0; margin:0px; color:#F9FAFB; opacity:1;}
.game_crete_new_group .modal-header{background:#cc6694; padding:10px; border-radius:0px;}
.game_crete_new_group .modal-title{color:#F9FAFB;}
.game_crete_new_group .modal-content {
  height: 100%;
  border-radius: 0px;
  max-height: 100%;
  background: #F9FAFB;
}

.create_group_img{width:100%; text-align:center;}
.create_group_img img{width:30%;}

.winnername{font-size:18px; font-weight:600; color:#cc6694 !important; text-transform:capitalize;}

.select_contacts_btns{width:100%; text-align:center;}

.select_contacts_btns .btn{width:95%; height:auto; text-align:center; padding:10px; background:#E6F0F8; color:#cc6694; /* text-transform:uppercase; */ border:none; font-weight:600; border-radius:4px;}
.members_count{font-size:13px; font-weight:normal; padding:0px 0px 8px 0px; margin:0px; line-height:12px; color:#F9FAFB4F1;}

.lead_popup_update_form{padding:10px 15px; height:80vh; overflow-y:scroll;}
.lead_popup_update_form label{padding:0px; margin:0px; color:#798FA0; font-size:14px;}
.lead_popup_update_form .form-control{color:#000;}
.submitbtn{width:100%; background:#cc6694; text-align:center; border:none;}
.hide {display: none;}

.lead_activity_details{margin:0px; padding:0px 15px; height:80vh; width:100%; background:#F9FAFB;}

.game_completed_tabs{width:100%;}
.game_completed_tabs .nav-tabs {border: none; margin-bottom: 10px; justify-content: center;}
.game_completed_tabs .nav-item {/*! flex-grow: 0; */justify-content: center;text-align: center;margin: 0;flex-grow: 0;flex-basis: auto;}
.game_completed_tabs .nav-tabs .nav-link {border: none;}
.game_completed_tabs .nav-tabs .nav-link.active {color:#cc6694; background:none;  font-weight:bold;  border-bottom:5px solid #cc6694;}

.signup {width:100%; text-align:center; color:#F9FAFB; text-decoration:none;}
.signup a{text-align:center; color:#F9FAFB; text-decoration:none;}

.winner_scroll{width:100%; height:auto; margin-top:15px;}
.winner_list_scroll {width:85%; height:auto; margin:0px; padding:9px 0px 8px; background:#cc6694; float:left; color:#F9FAFB; font-weight:600;}
.tambola_token_number{width:15%; height:auto; margin:0px; padding:10px 0px; background:#cc6694; text-align:center; float:right; color:#F9FAFB; font-weight:600;}


.chat_btn_bottom {background:#cc6694; width:50px; height:50px; border-radius:100%;position: fixed;bottom:70px; right:25px; z-index:9999; text-align:center; vertical-align:middle; cursor:pointer;}
.chat_btn_bottom img{width:40%; margin-top:16px;}

.game_scheduled strong {color:#000; font-weight:500;}

.attachments_multimedia {width:100%; background:#cc6694;}
.attachments_multimedia ul{display:table; width:100%; margin:0px auto 10px; padding:0px; list-style:none inside; text-align:center; border-radius:10px; background:#F9FAFB;}
.attachments_multimedia ul li{ display:inline-block; margin:15px 12px; padding:0px; text-align:center; font-size:14px; color:#000; vertical-align:top; line-height:18px;}
.attachments_multimedia ul li img{margin-bottom:5px;}
.modal-body { height:70vh; overflow-y:scroll; width:98%;  margin:10px auto; padding:0px 0px 50px 0px;}  
.media_attachments_list{width:98%;  margin:10px auto; padding:0px 0px 50px 0px;    overflow-y: scroll;     height: 60vh;}
.media_attachments_list ul{width:100%; height:auto; margin:0px; padding:0px; list-style:none inside;}
.media_attachments_list ul li{width:100%; height:auto; margin:10px 0px 0px 0px; padding:0px 0px 6px 0px; border-bottom:1px solid #ddd;}



.serial_no{margin-right:5px; width:5%; float:left;}
.uploaded_video_img{width:30%; float:left;}
.uploaded_video_img iframe {width:99%; height:80px;}
.uploaded_video_img img {width:99%; height:80px;}
.video_img_text{font-size:14px; width:50%; float:left; padding:0px 5px 0px 5px;}
.video_content_edits_icons{width:13%; float:left;}
.checkbox {width:100%; text-align:center; display:none;}
.inputbox {width:100%;  text-align:right;}
.inputbox input {color:#000; width:80%; margin:0 auto; padding:0px 3px; text-align:center;}
.closemark {text-align:center;  display:none;}


/* The checkbox_container */
.checkbox_container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	height: 25px;
	width: 25px;
	background-color: #eee;
	position: absolute;
	right: 29px;
	top: 9px;
}

/* On mouse-over, add a grey background color */
.checkbox_container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox_container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox_container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox_container .checkmark:after {
  left: 12px;
  top: 6px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



@media screen and (max-width: 480px) {
	.tabs {
		display: none;
	}
	.tab_drawer_heading {
		background-color: #E6F0F8;
		color: #cc6694;
		border-top: 1px solid #B2CEFF;
		margin: 0;
		padding: 10px 20px;
		display: block;
		cursor: pointer;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		font-size:16px;
		font-family: roboto;
	}
	.d_active {
		background-color: #517EFF;
		color: #F9FAFB;
		font-size:16px;
		font-family: roboto;
		font-weight:bold;
	}
	
	.cordGrpImg img {
	width: 42px;
	height: 42px;
	border-radius: 100px;
	}
}

/*************Body Right Main Ends*************/

@media (max-width:412px){
	
	main{margin:0px; width:100%; position:absolute; top:8px;}
	.body_left_main{padding:0px; display:block; margin-top:0;}
	.cordContent {
        min-width: 89%;
        text-align: left;
        font-size: 14px;
        margin: auto 2px;
        position: relative;
    }
	.leftnav{margin-top:0px; top:56px;}
	/*************Mobile - Body Right Main Start*************/
	/*.body_right_main{display:none;}*/
	.body_right_main{position:fixed; top:0px; width:100%; height:100%; left:0px;  background:#F9FAFB; display:none; z-index:9;}
	.hide{display:none;}
	.hide-1-yes{display:none;}
	.body_right_bottom{margin:0px;}
	.tambola_ticket_table{width:100%; margin:0px auto;}
	.video_div{width:100%; height:100%; border-radius:0px;}
	.video_div video{width:100%; height:55vh; border-radius:0px;}
	.video_div iframe{width:100%; border-radius:0px;}
	.body_right_leftdiv{margin:0px; padding:0px;}
	.tabsmain{padding:0px 8px;}
	.sidebar-expanded{top:0;}
	.rightbox_main{top:0px;}
	.body_container{position:absolute; z-index:999999;}
	
	.body_right_top_header{background:#cc6694;}
	.game_title_top_header{color:#F9FAFB;}
	.game_date_time_top_header{color:#F9FAFB;}
	.body_right_top_header .arrow_header_left{color:#F9FAFB; display:block;}
	.refresh_header_right .material-symbols-outlined{color:#F9FAFB;}
	.tabsmain ul.tabs{margin-top:10px;}
	
    .cardsDivIcons {
        height: 56px;
        margin: 0;
        padding: 0px;
        /* text-align: center; */
        font-size: 14px;
    }
	
	.tambola_contacts .modal-dialog{width:100%;}
	.popup_tambola_dashboard table td{padding:6px;}
	
	.game_add_contacts{padding:0px 10px;}
	
	/* .modal-body {
		   padding: 0.2rem !important;
		}
		.modal-header {
			padding: 2rem 1rem !important;
		}
		.modal-open .modal {
			z-index: 999999;
			display: block;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			cursor: pointer;
		}*/
	.tab_container{padding-top:0px; margin-top:10px;}
	.show1{display:block;position:fixed;margin:0px;}
	.hide1{display:none;}

	/*************Mobile - Body Right Main Ends*************/
	
	.game_video_completed{height:auto; margin-bottom:25px;}
	
	.home_banner{margin:5% auto;height: 100vh;}
	
	
	.fullhousie_winner p{font-size:16px;}
	.fullhousieimg img{width:35%;}
	.fullhousie_winner{margin-top:20px;}
	.game_winners_list{padding:5px 15px 0px 15px;}
	.game_winners_list ul li{margin-bottom:10px; padding-bottom:10px;}
	.winnername{font-size:18px;}
	
	.kidloginimg{width:40%; bottom:30px;}
	.loginlogo{padding:0px; width:200px; margin:20px auto 0px;}
	
	.winner_scroll{position:fixed; left:0px; bottom:0px;}
	.winners_list p:nth-child(1){font-size:24px;}
	.winners_list p:nth-child(2){font-size:18px;}
	
	.completed_videos{overflow-y:scroll; height:80vh;}
		.cordGrpImg img {
		width: 42px;
		height: 42px;
		border-radius: 100px;
		}

	}
	
@media (max-width:384px){
	
	main{margin:0px; width:100%; position:absolute; top:8px;}
	.body_left_main{padding:0px; display:block; margin-top:0;}
	.cordContent {
        min-width: 87%;
        text-align: left;
        font-size: 14px;
        margin: auto 2px;
        position: relative;
    }
	.leftnav{margin-top:0px; top:56px;}
	/*************Mobile - Body Right Main Start*************/
	/*.body_right_main{display:none;}*/
	.body_right_main{position:fixed; top:0px; width:100%; height:100%; left:0px;  background:#F9FAFB; display:none; z-index:9;}
	.hide{display:none;}
	.hide-1-yes{display:none;}
	.body_right_bottom{margin:0px;}
	.tambola_ticket_table{width:100%; margin:0px auto;}
	.video_div{width:100%; height:100%; border-radius:0px;}
	.video_div video{width:100%; height:55vh; border-radius:0px;}
	.video_div iframe{width:100%; border-radius:0px;}
    .body_right_leftdiv{margin:0px; padding:0px;}
	.tabsmain{padding:0px 8px;}
	.sidebar-expanded{top:0;}
	.rightbox_main{top:0px;}
	.body_container{position:absolute; z-index:999999;}
	
	.body_right_top_header{background:#cc6694;}
	.game_title_top_header{color:#F9FAFB;}
	.game_date_time_top_header{color:#F9FAFB;}
	.body_right_top_header .arrow_header_left{color:#F9FAFB; display:block;}
	.refresh_header_right .material-symbols-outlined{color:#F9FAFB;}
	.tabsmain ul.tabs{margin-top:10px;}
	
	.cardsDivIcons {
	height: 60px;
	margin: 0;
	padding: 0px;
	/* text-align: center; */
	font-size: 14px;
	}
		
	.tambola_contacts .modal-dialog{width:100%;}
	.popup_tambola_dashboard table td{padding:6px;}
	
	.game_add_contacts{padding:0px 10px;}
	
	/* .modal-body {
		   padding: 0.2rem !important;
		}
		.modal-header {
			padding: 2rem 1rem !important;
		}
		.modal-open .modal {
			z-index: 999999;
			display: block;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			cursor: pointer;
		}*/
	.tab_container{padding-top:0px; margin-top:10px;}
	.show1{display:block;position:fixed;margin:0px;}
	.hide1{display:none;}

	/*************Mobile - Body Right Main Ends*************/
	
	.game_video_completed{height:auto; margin-bottom:25px;}
	
	.home_banner{margin:5% auto;height: 100vh;}
	
	
	.fullhousie_winner p{font-size:16px;}
	.fullhousieimg img{width:35%;}
	.fullhousie_winner{margin-top:20px;}
	.game_winners_list{padding:5px 15px 0px 15px;}
	.game_winners_list ul li{margin-bottom:10px; padding-bottom:10px;}
	.winnername{font-size:18px;}
	
	.kidloginimg{width:40%; bottom:30px;}
	.loginlogo{padding:0px; width:200px; margin:20px auto 0px;}
	
	.winner_scroll{position:fixed; left:0px; bottom:0px;}
	
	.winners_list p:nth-child(1){font-size:24px;}
	.winners_list p:nth-child(2){font-size:18px;}
	
	.completed_videos{overflow-y:scroll; height:80vh;}
	
		.cordGrpImg img {
		width: 42px;
		height: 42px;
		border-radius: 100px;
		}

	
	}

@media (max-width:360px){
	
	main{margin:0px; width:100%; position:absolute; top:8px;}
	.body_left_main{padding:0px; display:block; margin-top:0;}
	.cordContent {
        min-width: 87%;
        text-align: left;
        font-size: 14px;
        margin: auto 2px;
        position: relative;
    }
	.leftnav{margin-top:0px; top:56px;}
	/*************Mobile - Body Right Main Start*************/
	/*.body_right_main{display:none;}*/
	.body_right_main{position:fixed; top:0px; width:100%; height:100%; left:0px;  background:#F9FAFB; display:none; z-index:9;}
	.hide{display:none;}
	.hide-1-yes{display:none;}
	.body_right_bottom{margin:0px;}
	.tambola_ticket_table{width:100%; margin:0px auto;}
	.video_div{width:100%; height:100%; border-radius:0px;}
	.video_div video{width:100%; height:55vh; border-radius:0px;}
	.video_div iframe{width:100%; border-radius:0px;}
	.body_right_leftdiv{margin:0px; padding:0px;}
	.tabsmain{padding:0px 8px;}
	.sidebar-expanded{top:0;}
	.rightbox_main{top:0px;}
	.body_container{position:absolute; z-index:999999;}
	
	.body_right_top_header{background:#cc6694;}
	.game_title_top_header{color:#F9FAFB;}
	.game_date_time_top_header{color:#F9FAFB;}
	.body_right_top_header .arrow_header_left{color:#F9FAFB; display:block;}
	.refresh_header_right .material-symbols-outlined{color:#F9FAFB;}
	.tabsmain ul.tabs{margin-top:10px;}
	
	.cardsDivIcons {
        height: 60px;
        margin: 0;
        padding: 0px;
        /* text-align: center; */
        font-size: 14px;
    }
		
	.tambola_contacts .modal-dialog{width:100%;}
	.popup_tambola_dashboard table td{padding:6px;}
	
	.game_add_contacts{padding:0px 10px;}
	
	/* .modal-body {
		   padding: 0.2rem !important;
		}
		.modal-header {
			padding: 2rem 1rem !important;
		}
		.modal-open .modal {
			z-index: 999999;
			display: block;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			cursor: pointer;
		}*/
	.tab_container{padding-top:0px; margin-top:10px;}
	.show1{display:block;position:fixed;margin:0px;}
	.hide1{display:none;}

	/*************Mobile - Body Right Main Ends*************/
	
	.game_video_completed{height:auto; margin-bottom:25px;}
	
	.home_banner{margin:5% auto; height: 100vh;}
	
	
	.fullhousie_winner p{font-size:16px;}
	.fullhousieimg img{width:35%;}
	.fullhousie_winner{margin-top:20px;}
	.game_winners_list{padding:5px 15px 0px 15px;}
	.game_winners_list ul li{margin-bottom:10px; padding-bottom:10px;}
	.winnername{font-size:18px;}
	
	.kidloginimg{width:40%; bottom:30px;}
	.loginlogo{padding:0px; width:200px; margin:20px auto 0px;}
	
	.winner_scroll{position:fixed; left:0px; bottom:0px;}
	
	.winners_list p:nth-child(1){font-size:24px;}
	.winners_list p:nth-child(2){font-size:18px;}
	
	.completed_videos{overflow-y:scroll; height:80vh;}
	
	  	.cordGrpImg img {
	width: 42px;
	height: 42px;
	border-radius: 100px;
	}
  
	
	}
	
	
.pwa-prompt {
  background: #000;
  color: #F9FAFB;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.pwa-prompt__copy-title {
  font-weight: bold;
  font-size: 18px;
}	
	
	

/* 20250923 */

.popUpMainDiv{ background-color: rgba(109, 114, 117, 0.71); height: 100%; width: 100%; position:fixed; top: 0;  z-index:9999999999; }

.popupDiv { height: auto; width: 80%; background-color: white; position: absolute; top: 25%; right: 10%; border-radius:10px; }
.popUpHeaderDiv { display: flex; justify-content: space-between; padding: 10px 15px 0 15px; border-bottom: 2px solid #ccc; background: #E67817; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.popUpHeaderTitleDiv{ width:95%; color:#F9FAFB; font-weight:bold; text-align:left; }
.popupDivCloseIcon { color: #F9FAFB; font-size: 18px; text-align: center; cursor: pointer; border: 0px solid #F9FAFB; /* padding: 5px 10px; */ border-radius: 0%; float:right; margin-bottom:5px; } 

.popUpContentDiv{ min-height:500px;  } 
.BroadCastBox{ height:480px; overflow:auto;  } 
.BroadCastBox::after { content: ""; clear: both; display: table; }
.BroadCastInnerFile {  
    margin: 10px;
    border-radius: 5px;
}
.BroadCastInnerFile_Img {  width: 100%; padding:5px;  }

.popupDivErrorMsg{ color:red; font-size:18px; text-align:center; }
.popupDivSuccessMsg{ color:#000; font-size:20px; text-align:center; }



.notification { color: white; text-decoration: none; position: relative; display: inline-block; border-radius: 2px; }
.notification .badge { position: absolute; top: -2px; right: -2px; padding: 1px 2px; border-radius: 50%; color: white; font-size:8px; color:#F9FAFB; background-color: #007bff; }


@media (max-width: 360px) {
	
}

@media (max-width: 412px) {
	
}

@media (max-width: 768px) {
	
}
@media (max-width: 1440px) {
	
}


/* 20250923 END */ 

.card{
    max-width:420px;
    margin:auto;
    background:#F9FAFB;
    border-radius:16px;
    padding:18px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

label{
    font-size:14px;
    font-weight:600;
    color:#344054;
    display:block;
    margin-bottom:6px;
}

input,select{
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    border:1.5px solid #d6dcff;
    font-size:14px;
    box-sizing:border-box;
}

select:focus,input:focus{
    outline:none;
    border-color:#5b7cff;
    box-shadow:0 0 0 3px rgba(91,124,255,.25);
}

.form-group{margin-bottom:14px}

/* Upload box */
.upload-box{
    border:2px dashed #cdd6ff;
    border-radius:14px;
    padding:22px 10px;
    text-align:center;
    cursor:pointer;
    background:#f9faff;
    transition:.2s;
}
.upload-box:hover{
    background:#eef3ff;
    border-color:#5b7cff;
}
.upload-box i{
    font-size:34px;
    color:#5b7cff;
}
.upload-box span{
    display:block;
    margin-top:8px;
    font-size:14px;
    color:#475467;
}

.upload-box input{display:none}

/* File block */
.file-block{
    border:1px solid #e6ebff;
    border-radius:14px;
    padding:14px;
    margin-bottom:14px;
    background:#F9FAFB;
    position:relative;
}

.remove-btn{
    position:absolute;
    right:12px;
    top:12px;
    color:#e53935;
    cursor:pointer;
    font-size:18px;
}

.duration-row{
    display:flex;
    gap:10px;
}

.duration-row input{
    width:50%;
}

/* Add button */
.add-btn{
    width:44px;
    height:44px;
    border-radius:50%;
    border:none;
    background:#5b7cff;
    color:#F9FAFB;
    font-size:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(91,124,255,.45);
}

.add-btn:hover{transform:scale(1.05)}

.footer{
    margin-top:18px;
}

.save-btn{
    width:100%;
    padding:14px;
    border-radius:14px;
    border:none;
    background:#a9c2ff;
    color:#F9FAFB;
    font-size:16px;
    font-weight:700;
}

.note{
    font-size:12px;
    color:#667085;
    margin-top:6px;
}

.upload-box i {
    font-size: 34px;
    color: #5b7cff;
}
.file-block{border:1px solid #ddd;padding:15px;border-radius:12px;margin-bottom:15px;position:relative}
.remove{position:absolute;right:10px;top:10px;cursor:pointer;color:#e53935}
.upload-box{border:2px dashed #cfd8ff;padding:15px;text-align:center;border-radius:12px;cursor:pointer}
.upload-box input{display:none}
.duration-row{display:flex;gap:10px}
.error{color:#dc2626}
.play{cursor:pointer;color:#2196f3;margin-left:10px}
.modal{background:rgba(0,0,0,.6);align-items:center;justify-content:center}
.modal-body{background:#F9FAFB;padding:20px;border-radius:12px} 
.play {
  color: #16a34a;
  cursor: pointer;
  font-size: 22px;
  margin-left: 10px;
  z-index: 5;
}


.progress-bar {
  width: 100%;
  height: 12px;
  background: #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 6px;
}

.progress-fill {
  height: 100%;
  background: #5b7cff;
  font-size: 10px;
  color: #F9FAFB;
  text-align: right;
  padding-right: 4px;
}


.container_af {
    width:100%;
    margin: auto;
}

/* ADD FUND FORM */
.form-box-af {
    background: #F9FAFB;
    padding: 20px;
    border-radius: 10px;
}

/* PAYMENT IFRAME */
.iframe-box-af {
    display: none;
    margin-top: 6px;
}

#paymentFrame {
    width: 100%;
    height: 620px;
    border: none;
    border-radius: 10px;
    background: #F9FAFB;
}

#amount-af {
    width: 100%;
    padding: 12px;
    margin-top: 12px;
    font-size: 16px;
}

#pay-now-btn {
    width: 100%;
    padding: 12px;
    margin-top: 12px;
    font-size: 16px;
}

#pay-now-btn {
    background: #0066ff;
    color: #F9FAFB;
    border: none;
    border-radius: 8px;
}
/* LOADER */
.loader-af {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    z-index: 10;
}

/* SUCCESS BOX */
.success-box {
    display: none;
    background: #d4edda;
    color: #155724;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.success-box h3 {
    margin-top: 0;
}

@keyframes loading {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

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

input[readonly] {
  background-color: #f9fafb;
  cursor: not-allowed;
}

.status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}

.status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #bbb;
}

.status.active {
  color: #1dbf73;
}
.sidebar-expanded {
  width: 240px;
  /* transition: width 0.3s ease; */
}

.sidebar-collapsed {
  width: 70px;
  /* transition: width 0.3s ease; */
}
.status.active .dot {
  background-color: #1dbf73;
}
.views {
  transition: transform 0.2s ease;
}
.views:hover {
  transform: scale(1.05);
}

.action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
 /*  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eef2f7; */
}

.action-btn {
  flex: 1;
  /*min-width: 110px;
  padding: 10px 14px;*/
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #F9FAFBfff;
  font-size: 12px;
  font-weight: 500;
  color: #1f2937;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  white-space: nowrap;      /* ⭐ key fix */
}
.action-btn i {
  font-size: 14px;
  color: #2563eb;
}

/* Hover / Tap */
.action-btn:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #1e40af;
}

/* Mobile tap feedback */
.action-btn:active {
  transform: scale(0.97);
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Arial, sans-serif;
}

body {
  min-height: 100vh;	
  background: #F5F8FC;
  display: flex;
  flex-direction: column;
}

/* Logo */
.logo {
  padding: 24px;
}

.logo img {
  height: 42px;
}

/* Center wrapper */
.login-wrapper {
  min-height: 55vh;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Card */
.login-card {
  width: 90%;
  max-width: 380px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 32px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

.login-card h2 {
  color: #083F6E;
  text-align: center;
  margin-bottom: 28px;
  font-size: 20px;
}

/* Inputs */
.form-group {
  margin-bottom: 20px;
}

.form-group input {
  width: 100%;
  background: transparent;
  border: 1px solid #cbd5e1;
  padding: 15px 18px 15px 15px;
  font-size: 15px;
  color: #0F172A;
}
.form-group input:focus {
  border-color: #1E90FF;
  box-shadow: 0 0 0 3px rgba(30,144,255,0.15);
  outline: none;
}
.form-group input::placeholder {
  color: #94A3B8;
}

.form-group input:focus {
  outline: none;
  border-bottom: 2px solid #1e90ff;
}

/* Footer */
footer {
  text-align: center;
  color: #083F6E;
  font-size: 13px;
  padding: 16px 10px;
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .login-card {
    padding: 28px 20px;
  }
 
  .login-card h2 {
    font-size: 18px;
  }
  .logo {
	  text-align: center;
  }
}


.scrollablediv {
    position: relative;
    padding-bottom: 100px; /* space for button */
}

.chatFloatingButtion {
    position: sticky;      /* 🔥 KEY */
    bottom: 24px;

    display: flex;
    justify-content: flex-end;

    margin-right: 16px;
    z-index: 10;
}

.bottom_plusbtn a {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #1976d2;
    color: #ffffff;
    display: flex; 
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    text-decoration: none;
}
.material-symbols-outlined {
    /* font-size: 32px; */
}
@media (max-width: 768px) {
    .chatFloatingButtion {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
        right: 16px;
    }
}


.sidebar {
  width: 240px;
  height: 100vh;
  background: #0a2a66;
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.logo22 {
    color: rgb(219, 229, 255);
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
}

.menu {
  flex: 1;
  list-style: none;
  padding: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 10px;
  cursor: pointer;
  color: #dbe5ff;
  transition: all 0.3s ease;
}

.menu-item:hover {
  background: rgba(255, 138, 0, 0.15);
  transform: translateX(6px);
}

.menu-item.active {
  background: #cc6694;
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 138, 0, 0.4);
}

.icon {
  font-size: 18px;
}

.logout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  color: #ffb3b3;
}

.logout:hover {
  background: rgba(255, 0, 0, 0.15);
}
.loader {
  height: calc(100vh - 60px); /* below header */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 500;
  color: #cc6694;
}

/* Spinner */
.loader::before {
  content: "";
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 4px solid rgba(255, 138, 0, 0.2);
  border-top-color: #cc6694;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}



    /* Top Tabs */
    .tabs {
      display: flex;
      justify-content: space-around;
      background: #fff;
      padding: 12px 0;
      border-bottom: 1px solid #ddd;
    }

    .tab {
      text-align: center;
      font-size: 14px;
      color: #555;
    }

    .tab.active {
      color: #1677ff;
      font-weight: 600;
      border-bottom: 3px solid #1677ff;
      padding-bottom: 6px;
    }

    /* List */
    .broadcast-list {
      padding: 12px;
    }

    .broadcast-card {
      display: flex;
      gap: 12px;
      background: #fff;
      padding: 14px;
      border-radius: 12px;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #dcdcdc;
      flex-shrink: 0;
    }

    .content {
      flex: 1;
    }

    .tag {
      display: inline-block;
      background: #e6f1ff;
      color: #1677ff;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 6px;
      margin-bottom: 4px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .header h4 {
      margin: 0;
      font-size: 15px;
      font-weight: 600;
    }

    .time {
      font-size: 12px;
      color: #999;
    }

    .message {
      margin: 6px 0;
      color: #444;
      font-size: 14px;
    }

    .meta {
      font-size: 13px;
      color: #666;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .report {
      margin-top: 8px;
      font-size: 13px;
      color: #000;
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }

    .report:hover {
      color: #1677ff;
    }
   

.pwa-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000001;

  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.25);

  transform: translateY(100%);
  transition: transform 0.35s ease;
}

.pwa-sheet.open {
  transform: translateY(0);
}

.grabber {
  width: 40px;
  height: 4px;
  background: #ccc;
  border-radius: 4px;
  margin: 8px auto;
}

.sheet-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.sheet-header img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
}

.sheet-header h3 {
  margin: 0;
  font-size: 16px;
}

.sheet-header p {
  margin: 2px 0 0;
  font-size: 12px;
  color: #666;
}

.sheet-actions {
  padding: 0 16px 16px;
}

.sheet-actions button {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  font-size: 14px;
  border-radius: 24px;
  border: none;
  cursor: pointer;
}

.sheet-actions button.installing {
  opacity: 0.6;
}

.sheet-actions button.installed {
  background: #4caf50;
  color: #fff;
}

.sheet-actions button:not(.cancel) {
  background: #cc6694;
  color: #fff;
}

.sheet-actions .cancel {
  background: transparent;
  color: #555;
}

.ios-hint {
  margin-top: 10px;
  font-size: 12px;
  text-align: center;
}


/* Close */
.close {
  margin-left: 10px;
  font-size: 18px;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .pwa-sheet {
   // display: none !important;
  }
}


* {
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
}

.accounts-wrapper {
  max-width: 1100px;
  margin: auto;
  padding: 20px;
}

.accounts-title {
  margin-bottom: 16px;
  font-size: 20px;
}

.accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.account-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.account-card:hover,
.account-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  outline: none;
} 

.account-card img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-bottom: 12px;
  object-fit: cover;
}
.accounts-avayar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  margin-bottom: 12px !important;
  object-fit: cover !important;
}

.account-card h3 {
  margin: 6px 0;
  font-size: 16px;
}

.account-card p {
  font-size: 14px;
  color: #6b7280;
}

.add-account {
  border: 2px dashed #d1d5db;
  background: #fafafa;
}

.add-account span {
  font-size: 36px;
  line-height: 1;
}

.header-brand {
  flex: 1;
  min-width: 80px;   /* 👈 CRITICAL */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 400px) {
  .header-tabs {
    gap: 8px;
  }

  .header-icon {
    width: 32px;
    height: 32px;
  }
}
.navbar-brand {
  display: flex !important;
  align-items: center;
  flex: 1 1 0%;
  min-width: 0;
}

#sm_title_5 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

#sm_title_5 span span {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hamburg_menu,
.top_right_icons {
  flex-shrink: 0;
}

@media (max-width: 360px) {
	.navbar-brand {
	  display: flex !important;
	  align-items: center;
	  flex: 1 1 0% !important;
	  min-width: 0 !important;
	  overflow: hidden;
	  font-size: 1.25rem;
	}
}

@media (min-width: 361px) and (max-width: 410px) {
	.navbar-brand {
	  display: flex !important;
	  align-items: center;
	  flex: 1 1 0% !important;
	  min-width: 0 !important;
	  overflow: hidden;
	  font-size: 1.0rem;
	}
}


/* Container safety */
.vendor-card {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
  width: 100%;
}

/* Vendor Header */
.vendor-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #eee;
}

.vendor-header h3 {
  font-size: 14px;
  margin: 0;
}

.vendor-header p {
  font-size: 11px;
  margin: 4px 0 0;
  color: #777;
}

.vendor-total {
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
}

/* Viewer table header */
.viewer-head {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  background: #f7f7f7;
}

/* Scrollable viewer list */
.viewer-list {
  max-height: 200px;
  overflow-y: auto;
}

/* Viewer rows */
.viewer-row {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  padding: 8px 12px;
  font-size: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.viewer-name {
  display: flex;
  flex-direction: column;
}

.viewer-name .campaign {
  font-size: 10px;
  color: #888;
}

/* Empty state */
.no-viewers {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: #777;
}

/* Vendor footer */
.vendor-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px 12px;
  background: #fafafa;
  border-top: 1px solid #eee;
  font-size: 12px;
}

.vendor-footer span {
  display: block;
  color: #777;
}

.vendor-footer strong {
  font-size: 13px;
}

/* Extra safety for 360px */
@media (max-width: 360px) {
  .vendor-header h3 {
    font-size: 13px;
  }

  .vendor-total {
    font-size: 13px;
  }

  .viewer-head,
  .viewer-row {
    font-size: 11px;
  }
}


.chatFloatingButtion2 {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}

/* + button */
.livegame_select_members_plus_btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1976d2;
  color: #fff;
  border: none;
  font-size: 28px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.livegame_select_members_plus_btn.rotate {
  transform: rotate(45deg);
}

/* Floating menu */
.floatingMenu {
  position: absolute;
  bottom: 70px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Menu items */
.floatingItem {
  background: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 22px;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  cursor: pointer;
  text-align: left;
}
.video-container {
  position: relative;
  width: 95%;
  max-width: 380px;
  aspect-ratio: 16 / 9;
  margin: auto;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
}

/* When fullscreen */
.video-container:fullscreen {
  max-width: none;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Controls overlay */
.mute-btn,
.fs-btn {
  position: absolute;
  top: 10px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.mute-btn {
  right: 10px;
}

.fs-btn {
  right: 50px;
}

/* PAGE */
.channel-page {
  max-width: 520px;
  margin: auto;
}

/* HEADER */
.channel-header {
 /*  background: linear-gradient(135deg, #1e3c72, #2a5298); */
  background: #cc6694;
  padding: 20px;
  color: #fff;
}

.channel-header h1 {
  margin: 0;
  font-size: 1.4rem;
}

/* CONTENT */
.channel-content {
  padding: 16px;
}

.channel-content h2 {
  margin: 8px 0 16px;
  font-size: 1.2rem;
  color: #111;
}

/* LIST */
.channel-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* CARD */
.channel-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  margin-bottom: 8px;
  background: #fff;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.channel-card:hover {
  transform: translateY(-2px);
}

.channel-card.loading {
  pointer-events: none;
  opacity: 0.7;
}

/* Spinner */
.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid #e5e7eb;
  border-top: 3px solid #2563eb;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* ICON */
.channel-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 10px;
  margin-right: 14px;
}

/* TEXT */
.channel-info {
  flex: 1;
}

.channel-name {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: #111;
}

.channel-category {
  font-size: 0.9rem;
  color: #666;
  margin-top: 2px;
}

/* ARROW */
.channel-arrow {
  font-size: 1.8rem;
  color: #aaa;
}

/* MOBILE SAFE */
@media screen and (max-width: 480px) {
  .channel-header h1 {
    font-size: 1.2rem !important;
  }

  .channel-icon {
    width: 46px !important;
    height: 46px !important;
  }
}

/* Skeleton base animation */
.skeleton-card {
  pointer-events: none;
}

.skeleton-icon,
.skeleton-line,
.skeleton-arrow {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e6e6e6 37%,
    #f0f0f0 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 10px;
}

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Icon placeholder */
.skeleton-icon {
  width: 52px;
  height: 52px;
  margin-right: 14px;
}

/* Text placeholders */
.skeleton-info {
  flex: 1;
}

.skeleton-line.title {
  height: 14px;
  width: 60%;
  margin-bottom: 8px;
}

.skeleton-line.subtitle {
  height: 12px;
  width: 40%;
}

/* Arrow placeholder */
.skeleton-arrow {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}


.page-loader {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 99999;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.spinner.large {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 4px solid rgba(255, 138, 0, 0.2);
	border-top-color: #cc6694;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


* {
  box-sizing: border-box;
}



/*Tutorial*/

#coaching_tab {
  max-width: 1200px;
  margin: auto;
  padding: 12px;
}

.page {
  animation: fadeIn 0.3s ease-in-out;
}

.section-title {
  margin: 16px 0 8px;
  font-size: 1.4rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.card {
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.card img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.item-card h4 {
  margin: 8px 0 2px;
}

.item-card span {
  font-size: 0.85rem;
  color: #666;
}

.back-btn {
  background: none;
  border: none;
  cursor: pointer;
  margin-bottom: 10px;
}

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
}

.details-content {
  margin-top: 16px;
}

.teacher-name {
  color: #666;
  margin-bottom: 10px;
}

.action-row {
  display: flex;
  gap: 18px;
  margin-top: 14px;
}

.action-row img {
  width: 28px;
  cursor: pointer;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.page-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
 /*  height: 56px; */
  padding: 0 12px;
  background: #000;
  border-bottom: 1px solid #eaeaea;
  margin: 0px !important;
}

.back-btn {
  background: none;
  border: none;
  margin-top: 10px;
  cursor: pointer;
}


.header-title {
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  flex: 1;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color:#fff;
  font-size: 1.2em;
}

.header-spacer {
  width: 34px; /* keeps title centered */
}


/* Skeleton base */
.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e6e6e6 37%,
    #f0f0f0 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Category skeleton */
.category-skeleton {
  padding: 16px;
}

.skeleton-title {
  width: 40%;
  height: 18px;
  margin-bottom: 12px;
}

.skeleton-row {
  display: flex;
  gap: 12px;
}

.skeleton-card {
  width: 120px;
  height: 90px;
}

/* Item skeleton */
.item-skeleton-list {
  padding: 16px;
}

.item-skeleton {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.skeleton-thumb {
  width: 80px;
  height: 60px;
}

.skeleton-lines {
  flex: 1;
}

.skeleton-line {
  height: 12px;
  margin-bottom: 8px;
}

.skeleton-line.lg {
  width: 80%;
}

.skeleton-line.sm {
  width: 40%;
}


.category-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.category-row li {
  min-width: 140px;
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  cursor: pointer;
}

.thumb-wrapper {
  width: 100%;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}

.thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 🔥 KEY */
}

.cat-name {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
}


.item-list {
  padding: 12px;
}

.item-list li {
  display: flex;
  gap: 12px;
  background: #fff;
  padding: 12px;
  border-radius: 14px;
  margin-bottom: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  cursor: pointer;
}

.item-thumb {
  width: 120px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
}

.item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-info {
  flex: 1;
}

.item-title {
  font-size: 14px;
  font-weight: 600;
}

.item-meta {
  font-size: 12px;
  color: #666;
}
ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
#coaching_tab ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.category-row,
.item-list {
  padding-left: 0;
}
.category-row::-webkit-scrollbar {
  display: none;
}

.lesson-header {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 16px;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: #fff;

  position: sticky;
  top: 0;
  z-index: 100;
  height : 45px;
}

.lesson-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

/* Back Button */
.back-btn {
  width: 36px;
  height: 36px;

  border-radius: 50%;
  border: none;

  background: rgba(255, 255, 255, 0.2);
  color: #fff;

  font-size: 18px;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}

.back-btn:active {
  transform: scale(0.95);
}

/*End Tutorial*/


/* ===============================
   MEDIA GRID BASE
================================ */
.media-grid {
  display: grid;
  grid-gap: 6px;
  width: 100%;
}

.media-grid.single {
  grid-template-columns: 1fr;
}

.media-grid.double {
  grid-template-columns: 1fr 1fr;
}

/* ===============================
   MEDIA ITEM
================================ */
.media-item {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.media-item img,
.media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===============================
   VIDEO HOVER PREVIEW (DESKTOP)
================================ */
@media (hover: hover) and (pointer: fine) {
  .media-item.video video {
    pointer-events: none;
  }

  .media-item.video:hover video {
    autoplay: true;
  }
}

/* Disable hover behavior on mobile */
@media (hover: none) {
  .media-item.video video {
    pointer-events: auto;
  }
}

/* ===============================
   PLAY ICON (VIDEO)
================================ */
.media-item.video::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* ===============================
   +N OVERLAY
================================ */
.media-more-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 26px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===============================
   FULLSCREEN MODAL
================================ */
.media-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-modal-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-modal img,
.media-modal video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ===============================
   CLOSE BUTTON
================================ */
.media-modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  z-index: 2;
}

/* ===============================
   SWIPE HINT (OPTIONAL)
================================ */
.media-swipe-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: #bbb;
  font-size: 13px;
}

/* ===============================
   RESPONSIVE TWEAKS
================================ */
@media (max-width: 768px) {
  .media-item {
    aspect-ratio: 1 / 1;
  }

  .media-more-overlay {
    font-size: 22px;
  }
}


/* Fullscreen viewer */
.media-viewer {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;
  top: 6%;
}

.media-viewer-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}

.media-viewer img,
.media-viewer video {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.15s ease;
}

.media-close {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 26px;
  color: #fff;
  z-index: 2;
  cursor: pointer;
width: 35px;
text-align: center;
background: #000;
}

/* Media grid */
.media-grid {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.media-grid.single { grid-template-columns: 1fr; }
.media-grid.double { grid-template-columns: 1fr 1fr; }

.media-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.media-item img,
.media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-more-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.audio-tile,
.document-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f3f3;
  height: 100%;
  width: 100%;
}

.document-tile iframe {
  width: 100%;
  height: 100%;
}

.doc-open {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,.6);
  color: #fff;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
}

.pdf-thumb {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdf-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdf-label {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: #d32f2f;
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
}

/* Skeleton shimmer */
.pdf-skeleton {
  width: 100%;
  height: 100%;
  background: #e0e0e0;
}

.shimmer {
  animation: shimmer 1.2s infinite linear;
}

@keyframes shimmer {
  0% { opacity: 0.5 }
  50% { opacity: 0.8 }
  100% { opacity: 0.5 }
}



/* TOP BAR */
.top-bar{
  position:sticky;
  top:0;
  background:#fff;
  display:flex;
  gap:20px;
  padding:14px 16px;
  border-bottom:1px solid #eee;
  z-index:10;
}

.tab{
  font-weight:500;
  color:#888;
}

.tab.active{
  color:#000;
  border-bottom:2px solid #000;
  padding-bottom:4px;
}

/* FEED */
.feed{
  max-width:480px;
  margin:auto;
  padding-bottom:80px;
}

/* POST CARD */
.post{
  background:#fff;
  margin:12px;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}

/* HEADER */
.post-header{
  display:flex;
  gap:10px;
  padding:12px;
  align-items:center;
}

.avatar{
  width:40px;
  height:40px;
  border-radius:50%;
}

.name{
  font-weight:600;
  font-size:.9rem;
}

.badge{
  background:#eef2ff;
  color:#4f46e5;
  font-size:.7rem;
  padding:2px 6px;
  border-radius:6px;
  margin-left:6px;
}

.time{
  font-size:.75rem;
  color:#777;
}

/* CAPTION */
.caption{
  padding:0 12px 8px;
  font-size:.9rem;
}

/* MEDIA */
.media{
  width:100%;
  display:block;
}

/* CAROUSEL */
.carousel{
  position:relative;
  overflow:hidden;
}

.carousel-track{
  display:flex;
  transition:transform .3s ease;
}

.carousel-track img{
  width:100%;
  flex-shrink:0;
}

/* DOTS */
.dots{
  position:absolute;
  bottom:10px;
  width:100%;
  display:flex;
  justify-content:center;
  gap:6px;
}

.dots span{
  width:6px;
  height:6px;
  background:rgba(255,255,255,.6);
  border-radius:50%;
}

.dots span.active{
  background:#fff;
}

/* ACTIONS */
.actions{
  padding:10px 12px;
  font-size:1.2rem;
}

/* FAB */
.fab{
  position:fixed;
  bottom:20px;
  right:20px;
  width:56px;
  height:56px;
  border-radius:50%;
  border:none;
  background:#4f46e5;
  color:#fff;
  font-size:28px;
  box-shadow:0 10px 20px rgba(0,0,0,.2);
  cursor:pointer;
}

/* MODAL */
.modal{
  position:fixed;
  inset:0;
  z-index:999;
}

.modal.hidden{
  display:none;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.7);
}

.modal-content{
	position:relative;
	width:100%;
	height:100%;
	display:flex;
	border-radius: 0px;
	max-height: 100%;
	background: #F9FAFB;
}

.modal-content img,
.modal-content video{
  max-width:100%;
  max-height:100%;
  border-radius:12px;
}

.modal-content audio{
  width:100%;
}

.modal-content a.doc-link{
  background:#fff;
  padding:16px 20px;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
  color:#4f46e5;
}

/* CLOSE BUTTON */
.modal-close{
  position:absolute;
  top:14px;
  right:14px; 
  width:42px;
  height:42px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,.6);
  color:#fff;
  font-size:20px;
  cursor:pointer;
}

/* =========================
   AUDIO THUMB
========================= */
.audio-thumb {
  width: 100%;
  height: 160px;
  background: linear-gradient(135deg, #eef1f5, #f8f9fb);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.audio-thumb:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.audio-thumb .material-symbols-outlined {
  font-size: 42px;
  color: #4a6cf7;
}

.audio-thumb span:last-child {
  font-size: 14px;
  font-weight: 500;
  color: #444;
}

/* =========================
   DOCUMENT THUMB
========================= */
.doc-thumb {
  width: 100%;
  height: 160px;
  background: linear-gradient(135deg, #fff4e5, #fffaf2);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.doc-thumb:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.doc-thumb .material-symbols-outlined {
  font-size: 42px;
  color: #e5533d;
}

.doc-thumb span:last-child {
  font-size: 14px;
  font-weight: 500;
  color: #444;
}

/* =========================
   MEDIA GRID HELPERS
========================= */
.media-grid.single .audio-thumb,
.media-grid.single .doc-thumb {
  height: 284px;
}

.media-item.audio,
.media-item.document {
  overflow: hidden;
}

/* Mobile tweak */
@media (max-width: 768px) {
  .audio-thumb,
  .doc-thumb {
    height: 140px;
  }
}



/* FEED */
.feed{max-width:520px;margin:auto;padding:14px;}

.post{background:#fff;border-radius:14px;padding:14px;margin-bottom:16px;box-shadow:0 6px 16px rgba(0,0,0,.06);}
.post-header{display:flex;gap:10px;align-items:center;}
.avatar{width:42px;height:42px;border-radius:50%;}
.name{font-weight:600;font-size:14px}
.time{font-size:12px;color:#6b7280}

/* TEXT BLOCK */
.text-card{margin-top:10px;background:#f7f8fa;padding:12px 14px;border-radius:12px;white-space:pre-line;line-height:1.6;font-size:14px;border-left:4px solid #cc6694;}

/* BADGE */
.media-badge{display:inline-block;margin:10px 0;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;color:#fff;}
.image{background:#f9fafb}

/* MEDIA GRID */
.media-grid{display:grid;gap:8px;margin-top:10px;}
.thumb{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;}
.thumb img{width:100%;display:block;}
.thumb span{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:2px 6px;border-radius:6px;font-weight:700;}
.thumb .shimmer{position:absolute;inset:0;background:linear-gradient(90deg,#eee 25%,#ddd 50%,#eee 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;}
@keyframes shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}

/* PREVIEW VIDEO ON HOVER */
.thumb.video video.preview { 
  position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; 
  z-index:1; border-radius:10px; display:none; 
}

/* AUDIO + DOC */
audio{width:100%;margin-top:10px}
.doc-link{display:block;margin-top:10px;background:#eef2ff;padding:10px;border-radius:8px;text-decoration:none;font-weight:500;color:#4338ca;}

/* MODAL */
.modal{position:fixed;inset:0;z-index:999;}
.hidden{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75);}
.modal-content{position:relative;height:100%;display:flex;}
.modal-content img,.modal-content video{/* width:100%; */max-height:100%;border-radius:14px;}
.modal-close{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;border:none;background:rgba(0,0,0,.6);color:#fff;font-size:20px;cursor:pointer;}

/* DOTS */
.dots{position:absolute;bottom:18px;display:flex;gap:6px;}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);}
.dot.active{background:#fff;}

/* =====================
   MODAL OVERLAY
===================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

/* =====================
   MODAL CONTAINER
===================== */
.modal-container {
  background: #fff;
  width: 95%;
  max-width: 1100px;
  height: 90vh;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalIn 0.25s ease;
}

@keyframes modalIn {
  from { transform: scale(0.96); opacity: 0 }
  to   { transform: scale(1); opacity: 1 }
}

/* =====================
   MODAL HEADER
===================== */
.modal-header {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid #eee;
}

.modal-header .back-btn {
  background: none;
  border: none;
  cursor: pointer;
}

.modal-header img {
  width: 22px;
}

.header-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

/* =====================
   MODAL BODY
===================== */
.modal-body {
  flex: 1;
 /*  background: #000; */ 
}


.CardTitleOuter {
    display: flex;
    align-items: center;
    position: relative;
}

.shareIcon {
    margin-left: auto;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: 0.2s;
}

.shareIcon:hover {
    background: #f0f0f0;
}

.shareIcon span {
    font-size: 20px;
    color: #555;
}

/* Mobile touch feel */
@media (max-width: 768px) {
    .shareIcon span {
        font-size: 22px;
    }
}


.share-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.share-modal {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  width: 280px;
  text-align: center;
}

.share-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 15px 0;
}

.share-btn {
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  font-weight: 500;
}

.share-btn.whatsapp { background: #25D366; }
.share-btn.telegram { background: #0088cc; }
.share-btn.copy { background: #555; }

.share-close {
  border: none;
  background: #ddd;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}

.font-bold {
    font-weight: 700;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
* {
    border-color: hsl(var(--border));
}

.logo-section{
    text-align:center;
    padding:30px 20px 15px;
}

.logo{
    width:120px;
    height:120px;
    border-radius:50%;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.brand-name{
    margin-top:10px;
    font-size:32px;
    font-weight:700;
    color:#0d3f77;
}

.brand-tagline{
    font-size:14px;
    color:#666;
    margin-top:4px;
}