#fisher-heading{
	margin-left:25px;
}
.title{
    margin-left: 3px;
    font-size:24px;
}


html, body{

	font-family: arial;
	cursor: default;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


#footer_container_id {
  display: flex;
  flex-direction: column;
  margin-left: 50px;
  margin-top: 10px;
  /*width: 80%;*/
}


/*********************************************************************************************
/* START: Items on the roulette board
/*********************************************************************************************/
#top-message{
	margin-left: 25px;
}
#historyContainer {
    position: absolute;
    margin-top: 0px;
    left: 50px;
    display: flex; /* Enables flex layout */
    flex-direction: column; /* Stacks elements vertically */
    gap: 1px; /* Optional: Adds spacing between items */

}

/*betting table*/
#betting_board{
	position: absolute;
	width: 500px;
    height: 315px;
    border: 1px solid;
	/*left: 540px;*/
	margin-left: 180px;
}

#messageDiv{
	position: absolute;
	margin-left: 770px;
	margin-top: 470px;
	font-size:  18px;
}

#container{
	display: flex;
	justify-content: left;
	background-color: rgb(37, 45, 65);
	height: 550px;
	padding: 20px;
	color: #fff;
	margin-left: 25px;
	/*width: 950px;*/
}

.chipDeck, .bankContainer{
	position: absolute;
	margin-left: -20px;
	margin-top: 100px;
	width: 255px;
	height:39px;
	padding: 3px 0;
	border: 1px solid;
	border-radius: 10px;
	box-shadow: inset -2px -4px rgb(0 0 0 / 20%);
}

.bankContainer{
	margin-top: 100px;
	margin-left: 250px;
	width: 310px;
}
#winAlertContainerId{
	position: absolute;
	margin-left: 600px;
	margin-top: 415px;
	display: flex;
	flex-wrap: wrap;
	color: #d5b714;
	font-size: 30px;
}
/*********************************************************************************************
/* END: Items on the roulette board
/*********************************************************************************************/

#trigger-options-user-button-container{
	margin-left: 5px;

}

#parent-container {
    position: relative; /* Or another non-static position */
    /* Other styling as needed */
}

#trigger-results-numberUp-container{
    position: absolute;
    left: 450px; /* 450 pixels from the left of the parent container */
    top:  410px; /* 25 pixels from the top of the parent container */
    height: 15px; /* A "tiny" block with a height of 15 pixels */
    /* Ensure width is set or content-driven to avoid stretching */
    width: 100px; /* Example: set a specific width */
    /* Additional styles as needed */
}



#law{
	display: flex;
	justify-content: left;
	height: 125px;
	padding: 20px;
	color: #000000;
}



.color-btn {
            margin: 5px;
            padding: 5px 5px;
            cursor: pointer;
            border: none;
            color: #fff;
        }
        .btn-red { background-color: #990000; }
        .btn-blue { background-color: #68A2F1; }
        .btn-green { background-color: #35654d; }
        .btn-yellow { background-color: #D6BE44; color: #000; }
        .btn-grey {background-color:#778899;}
		.btn-default {background-color: rgb(37, 45, 65);}




#bottomContainer{
	display: flex;
	flex-grow: 1;
}
#triggerContainer{
	display: flex;
	justify-content: left;
	padding: 20px; 
}

/*notification*/
#notification{
	position: relative;
	background-color: #ad0205;
	border: 8px solid #d3b201;
	border-radius: 12px;

	
}

.nSpan{
	display: block;
	position: relative;
	top: 105px;
	font-size: 53px;
	text-align: center;
}

.nBtn{
	display: block;
	position: relative;
	top: 116px;
	left: 25%;
	width: 45%;
	padding: 10px;
	font-size: 32px;
	text-align: center;
	background-color: green;
	border-radius: 15px;
	box-shadow: 3px 4px rgb(0 0 0 / 25%);
	cursor: pointer;
	transition: .5s;
}

.nBtn:active{
	top: 118px;
	left: calc(25% + 2px);
	box-shadow: 1px 2px rgb(0 0 0 / 25%);
}

.nsWin{
	position:relative;
	left: 4px;
}

.nsWinBlock{
	display: inline-block;
	font-size: 12px;
	border-right: 1px solid;
	border-left: 1px solid;
	padding-left: 40px;
	padding-right: 40px;
}
/*notification end*/



.noMoreBetContainerId{
	position:relative;
	width: 500px;
	height: 315px;
	opacity: 30%;
	z-index: 10;
}

.bbtop{
	margin-left:2px;
}

.bbtoptwo{
	width: calc(50% - 8px);
	border: 1px solid;
	display: inline-block;
	padding: 12px 4px;
	margin-left: -2px;
	text-align: center;
	font-size:20px;
	font-weight: bold;
}

.number_board{
	margin-left: 1px;
}

.number_block{
	width: 39.94px;
    border: 1px solid;
    text-align: center;
    display: inline-block;
    margin: 0 -0.2px;
    padding: 32px 0px;
}

.nbn{
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.bo3_board, .oto_board{
	width:500px;
	margin-left: 1px;
}

.bo3_block, .oto_block{
	border: 1px solid;
	display: inline-block;
	padding: 8px 5px;
	width: 156.65px;
	margin-left: -1.98px;
	text-align: center;
	font-weight: bold;
	font-size: 20px;
}

.oto_block{
	width: 114.94px;
	margin-left: -1.98px;
}

.number_0_byItself{
	position: absolute;
	border: 2px solid;
	margin-left: -57px;
	margin-top: -0.516px;
	padding: 120.55px 20px;
	border-bottom-left-radius: 100%;
	border-top-left-radius: 100%;
}
.number_00 {
    position: absolute;
    border: 2px solid;
   
	margin-left: -70px;
    margin-top: -0.516px;
    padding: 32px 20px; /* Adjusted height (1/3 of 120.55px) */
    border-bottom-left-radius: 100%;
    border-top-left-radius: 100%;
	background-color: #016D29;
}

.number_0 {
    position: absolute;
    border: 2px solid;
    margin-left: -67px;
    margin-top: 177px;
    padding: 32px 25px; /* Increase horizontal padding to make it wider */
    border-bottom-left-radius: 100%;
    border-top-left-radius: 100%;
    background-color: #016D29;
}
.tt1_block{
	border: 2px solid;
	width: 65px;
	position: absolute;
	margin-left: 498px;
	padding: 31.65px 0px;
	margin-top: -89.75px;
}

.winning_lines{
	position: absolute;
	margin-top: -137px;
	width: 603px;
	height: 0;
}

.wlttb{
	position: relative;
	width: 100%;
    height: 10px;
    margin-left: -7.75px;
	top: 269px;
}

#wlttb_top{
    position: absolute;
    margin-top: -89px;
    margin-left: 11px;
}

#wlttb_2, #wlttb_3{
    margin-top: 79px;
}

.wlrtl{
	position: relative;
    display: inline-block;
    width: 10px;
    height: 266px;
    top: -3px;
    margin-left: 37px;
}

#wlrtl_2, #wlrtl_3, #wlrtl_6, #wlrtl_9, #wlrtl_11{
	margin-left: 31px;
}
#wlrtl_4, #wlrtl_5, #wlrtl_7, #wlrtl_8, #wlrtl_10{
	margin-left: 32px;
}

.wlcb{
	position: absolute;
	width: 477px;
	height: 41px;
	top: 255px;
	margin-left: 13px;
}

#wlcb_2{
	top: 343px;
}

.cbbb{
    width: 20px;
    height: 20px;
    position: relative;
	display: inline-block;
	margin-left:22px;
	margin-top: 9.5px;
	cursor: pointer;
}

#cbbb_1, #cbbb_4, #cbbb_5, #cbbb_7, #cbbb_9, #cbbb_11, #cbbb_12, #cbbb_15, #cbbb_16, #cbbb_18, #cbbb_20, #cbbb_22{
	margin-left: 21px;
}

#cbbb_3, #cbbb_14{
	margin-left: 20.5px;
}

#cbbb_6, #cbbb_17{
	margin-left: 23px;
}

#cbbb_8, #cbbb_10, #cbbb_19, #cbbb_21{
	margin-left: 22px;
}

.ttbbetblock{
	width: 19.1px;
	height: 10px;
	position: relative;
	display: inline-block;
	margin-left: 22.52px;
	top: -2px;
	cursor:pointer;
	z-index:3;
}

.rtlbb1, .rtlbb2, .rtlbb3{
	height: 45px;
    margin-top: 23px;
	width: 10px;
}

.rtlbb2, .rtlbb3{
    margin-top: 42px;
}

.spinBtn{
	position: absolute;
	margin-top: 330px;
	margin-left: 390px;
	font-size: 15px;
	cursor: pointer;
	background-color: #ffec00;
	padding: 10px 5px;
	border-radius: 100%;
	color: #000;
	font-weight: bold;
}




.winUnhighlight{
	background-color: white;
}

#resetButton {
	position: absolute;
	margin-left: -383px;
	margin-top: 30px;
}
#clearSpinsButton {
	position: absolute;
	margin-left: -283px;
	margin-top: 30px;
}



.cdChip{
	width: 27px;
    height: 27px;
    background-color: #fff;
    border: 5px solid;
    border-radius: 100%;
    display: inline-block;
    margin-left: 9px;
    color: #000;
	cursor: pointer;
}

.cdChipSpan{
	display: inherit;
	position: relative;
	top: 5px;
	width: 26px;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
}

.cdChipActive{
	position: relative;
	top: -4px;
	box-shadow: 0 4px rgb(0 0 0 / 20%);
}

.clearBet{
	border-color:red;
	background-color:red;
	color:#fff;
	margin-left:22px;
}

.clearBet .cdChipSpan{
	margin-left:-2px;
}

.bank, .bet{
	display: inline-block;
	width: calc(50% - 28px);
    background-color: #000;
    font-size: 18px;
    margin-left: 7px;
    padding: 5px;
    border: 4px solid silver;
    border-radius: 7px;
    text-align: right;
}

.pnBlock{
	position: absolute;
	border: 1px solid;
	width: 500px;
	height: 45px;
	margin-top: 10px;
	margin-left: -1px;
}

#pnContent{
	border: 4px solid #d5b714;
	width: 485px;
	height: 31px;
	position: relative;
	display: block;
	margin-left: 4px;
	margin-top: 3px;
	background-color: #fff;
	color: #000;
	overflow:hidden;
}

.pnRed, .pnBlack, .pnGreen{
	position: relative;
	display: inline;
	padding:10px;
	font-size: 19px;
	top: 5px;
}.pnRed{
	color: red;
}.pnBlack{
	color: black;
}.pnGreen{
	color: green;
}
/*betting table end*/

/*wheel*/
@keyframes wheelRotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(359deg);
	}
}
@keyframes ballRotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-359deg);
	}
}

.wheel {
	position: absolute;
	height: 312px;
	width: 312px;
	position: relative;
	left: 120px;
}
	
.ballTrack{
	width: 212px;
	height: 207px;
	position: absolute;
	left: 47.5px;
	top: 50px;
	border-radius: 100%;
	z-index:1;
}

.ball{
	background-color: #fff;
	width: 16px;
	height: 16px;
	border-radius: 100%;
	position: relative;
	left: 109px;
	top: -8px;
	z-index:1;
}
	
.turret{
	border-radius: 100%;
	background: radial-gradient( circle at 30% 30%, #f3c620, #1a1608 );
	width: 45px;
	height: 45px;
	position: absolute;
	top: 133px;
	left: 134px;
	z-index: 1;
}
	
.turretHandle{
	background: radial-gradient( circle at 44%, #f3c620, #6a570f);
	width: 87px;
	height: 14px;
	position: absolute;
	left: 113px;
	top: 148px;
}

.thendOne, .thendTwo{
	border-radius: 100%;
	background: radial-gradient( circle at 30% 30%, #f3c620, #1a1608 );
	width: 25px;
	height: 25px;
	position: absolute;
}

.thendOne{
	top: -6px;
	left: -20px;
}

.thendTwo{
	top: -6px;
	left: 83px;
}

.outerRim {
	position: absolute;
	left:0;
	top:0;
	width: 290px;
	height: 290px;
	border-radius: 100%;
	box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
	border: 10px solid #F3c620;
} 

.block {
	transition: all 1s;
	position: absolute;
	width: 290px;
	height: 290px;
	border-radius: 100%;
	clip: rect(0px, 145px, 290px, 0px);
}

.sect {
	position: absolute;
	top:10px;
	left:10px;
	width: 290px;
	height: 290px;
	border-radius: 100%;
	clip: rect(0px, 290px, 290px, 145px);
}

.double, .single{
	position: absolute;
	z-index: 1;
	color: #fff;
	font-size: 14px;
	transform: rotate(3deg);
}

.double{
	left: 148px;
	margin-top: 4.5px;
}

.single{
	left: 152px;
	margin-top: 4.5px;
}

#sect1 .block {
	background-color: #016D29;
	transform:rotate(9.73deg);
}
    
#sect2 .block, #sect4 .block, #sect6 .block, #sect8 .block, #sect10 .block, #sect12 .block, #sect14 .block, #sect16 .block, #sect18 .block, #sect20 .block, #sect22 .block, #sect24 .block, #sect26 .block, #sect28 .block, #sect30 .block, #sect32 .block, #sect34 .block, #sect36 .block {
	background-color: #E0080B;
	transform: rotate(9.73deg);
}

#sect3 .block, #sect5 .block, #sect7 .block, #sect9 .block, #sect11 .block, #sect13 .block, #sect15 .block, #sect17 .block, #sect19 .block, #sect21 .block, #sect23 .block, #sect25 .block, #sect27 .block, #sect29 .block, #sect31 .block, #sect33 .block, #sect35 .block, #sect37 .block {
	background-color: #000;
	transform: rotate(9.73deg);
}

#sect2 {
	transform: rotate(9.73deg);
}

#sect3 {
	transform: rotate(19.46deg);
}

#sect4 {
	transform: rotate(29.19deg);
}

#sect5 {
	transform: rotate(38.92deg);
}

#sect6 {
	transform: rotate(48.65deg);
}

#sect7 {
	transform: rotate(58.38deg);
}

#sect8 {
	transform: rotate(68.11deg);
}

#sect9 {
	transform: rotate(77.84deg);
}

#sect10 {
	transform: rotate(87.57deg);
}

#sect11 {
	transform: rotate(97.3deg);
}

#sect12 {
	transform: rotate(107.03deg);
}

#sect13 {
	transform: rotate(116.76deg);
}

#sect14 {
	transform: rotate(126.49deg);
}

#sect15 {
	transform: rotate(136.22deg);
}

#sect16 {
	transform: rotate(145.95deg);
}

#sect17 {
	transform: rotate(155.68deg);
}

#sect18 {
	transform: rotate(165.41deg);
}

#sect19 {
	transform: rotate(175.14deg);
}

#sect20 {
	transform: rotate(184.87deg);
}

#sect21 {
	transform: rotate(194.6deg);
}

#sect22 {
	transform: rotate(204.33deg);
}

#sect23 {
	transform: rotate(214.06deg);
}

#sect24 {
	transform: rotate(223.79deg);
}

#sect25 {
	transform: rotate(233.52deg);
}

#sect26 {
	transform: rotate(243.25deg);
}

#sect27 {
	transform: rotate(252.98deg);
}

#sect28 {
	transform: rotate(262.71deg);
}

#sect29 {
	transform: rotate(272.44deg);
}

#sect30 {
	transform: rotate(282.17deg);
}

#sect31 {
	transform: rotate(291.9deg);
}

#sect32 {
	transform: rotate(301.63deg);
}

#sect33 {
	transform: rotate(311.36deg);
}

#sect34 {
	transform: rotate(321.09deg);
}

#sect35 {
	transform: rotate(330.82deg);
}

#sect36 {
	transform: rotate(340.55deg);
}

#sect37 {
	transform: rotate(350.28deg);
}

.pockets {
	position: absolute;
	top: 37px;
	left: 37px;
	width: 235px;
	height: 235px;
	background-color: #000;
	border-radius: 100%;
	opacity: .5;
}

.pocketsRim {
	position: absolute;
	top: 34px;
	left: 34px;
	width: 235px;
	height: 235px;
	border-radius: 100%;
	border: 3px solid silver;
}
	
.cone {
	position: absolute;
	top: 62px;
	left: 61px;
	height: 180px;
	width: 180px;
	border: 3px solid #9f9a9a;
	border-radius: 100%;
	background: radial-gradient(circle at 100px 100px, #892c10, #000);
}
/*wheel end*/

#spins{
	position: absolute;
	margin-left: 25px;
	color:white;
	margin-top: -15px;
}
/*chip*/
.chip{
    width: 21px;
	height: 21px;
	background-color:#fff;
	border: 3px solid;
	border-radius: 100%;
    position:absolute;
}

.chipSpan{
	color: #000;
	font-weight: bold;
	font-size: 11px;
	position: relative;
	display: block;
	text-align: center;
	top: 4px;
}

.gold{
	border-color:gold;
}

.red{
	border-color:red;
}

.orange{
	border-color:orange;
}

.blue{
	border-color:blue;
}

.tt1_block .chip{
	margin-left: 19px;
	margin-top: -24px;
}

.number_block .chip{
	margin-left: 7px;
	margin-top: -24px;
}

.wlrtl .chip{
	margin-left: -9px;
	margin-top: 9px;
}

.cbbb .chip{
	margin-left: -4px;
	margin-top: -5px;
}

.ttbbetblock .chip{
	margin-left: -7px;
	margin-top: -8px;
}

#wlttb_top .chip{
	margin-left: -5px;
	margin-top: -8px;
}

.bbtoptwo .chip{
	margin-left: 108px;
	margin-top: -25px;
}

.number_0 .chip{
	margin-left: -8px;
	margin-top: -22px;
}

.bo3_block .chip{
	margin-left: 65px;
	margin-top: -26px;
}

.oto_block .chip{
	margin-left: 45px;
	margin-top: -25px;
}
/*chip end*/

/*********************************************************************************************
/* History Table
/*********************************************************************************************/


#history
{
	position: relative;
	height: 320px;
	overflow: scroll;
	box-sizing: border-box;
	overflow-x: hidden;
	background-color: white;
}
.historyRed
{
	color:  #E0080B;
}
.historyBlack
{
	color: black;
}
.historyGreen
{
	color: green;
}

.nbnHistory{
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
}

/* CSS */
.button-55 {
	display: inline-block;
  align-self: center;
  background-color: #fff;
  background-image: none;
  background-position: 0 90%;
  background-repeat: repeat no-repeat;
  background-size: 4px 3px;
  border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
  border-style: solid;
  border-width: 2px;
  box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px;
  box-sizing: border-box;
  color: #41403e;
  cursor: pointer;
  
  font-family: Neucha, sans-serif;
  font-size: 1rem;
  line-height: 23px;
  outline: none;
  padding: .75rem;
  text-decoration: none;
  transition: all 235ms ease-in-out;
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin-top: 5px;
  margin-bottom: 5px;
}



.button-55:hover {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
  transform: translate3d(0, 2px, 0);
}

.button-55:focus {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
}

.button-rebet-plus {
	display: inline-block;
    width: 25px; /* Half the size compared to default button */
    height: 25px;
    padding: 0.1rem; /* Adjust padding for smaller size */
    font-size: 18px; /* Smaller font size */
	background-color:white;
	color:black;
    margin-top: 3px; /* Remove extra margins */
    border-radius: 10px; /* Adjusted for smaller size */
    border: 2px solid #ccc;
    cursor: pointer;
    text-align: center;
	line-height: 5px;
   
}
.button-rebet-minus {
	display: inline-block;
    width: 25px; /* Half the size compared to default button */
    height: 25px;
    padding: 0.1rem; /* Adjust padding for smaller size */
    font-size: 18px; /* Smaller font size */
	background-color:white;
	color:black;
    margin-top: -3px; /* Remove extra margins */
    border-radius: 10px; /* Adjusted for smaller size */
    border: 2px solid #ccc;
    cursor: pointer;
    text-align: center;
	line-height: 5px;
}

  
.button-rebet-wrapper {
    display: inline-block; /* Ensures the container itself aligns inline */
    vertical-align: top; /* Optional: Adjust alignment with neighboring elements */
}

.button-rebet-container {
    display: flex;
    flex-direction: column; /* Stack the buttons vertically */
    align-items: center;
    gap: 5px; /* Space between buttons */
}
/*********************************************************************************************
/* Trigger Tab
/*********************************************************************************************/




.evensCheckbox {
	margin-top: 10px;
	
}


.groupsCheckbox {
	margin-top: 10px;
	
}



.triggerTtitles
{
	
	margin-bottom: -3px;
}

.styled-table {
	margin-left:150px;
    border-collapse: collapse;
    font-size: 1em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	border: 1px solid black;
}
.styled-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
	border: 1px solid black;
	font-size: 1.5em;
}
.styled-table th{
	text-align: left;
	border: 1px solid black;
	font-size: 1.5em;
}
.styled-table td {
    padding: 3px 3px;
	font-size: 1.5em;
	border: 1px solid black;
}

.textbox-container input[type="text"] {
	
	width: 100px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: #212529;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	appearance: none;
	border-radius: 4px;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	:focus{
		color: #212529;
		background-color: #fff;
		border-color: #86b7fe;
		outline: 0;
		box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
	}
	
}
.triggerGroups {
	margin-top: 10px;
	margin-bottom: 3px;
	margin-right: 5px;
	font-size: 14px;
	width: 25px;
	line-height: normal;
	
		
}

#clearUserDefinedOptionsBtn
{
	margin-left: 1px;
	margin-top: 1px;
}
#addUserDefinedTriggerBtn{
	margin-left: 42px;
}

.triggerOptionsButtons {
	display: inline-block;
	outline: none;
	cursor: pointer;
	margin-left: 10px;
	margin-right: 5px;
	margin-bottom: 3px;
	margin-top: 5px;
	
  }
  

  .enterOwnNumbers{
	width: 400px;
	height: 100px;
    font-size: 16px; 
   resize: none;    
}

#trigger-options-container {
	margin-left: 50px;
	float:left;
}

#trigger-results-container {
	display: flex;
    flex-direction: column;
	justify-content: left;
	margin-left:10px; 
	float: left;
}
#trigger-results-detailed-container{
	display: flex;
	flex-direction: column;
	justify-content: left;
	margin-left:10px; 
	width: 200px;
}
#trigger-results-alert-container{
	display: flex;
	flex-direction: column;
	justify-content: left;
	margin-left:10px;
	width: 200px; 
}

#trigger-detailAlert-container{
	width: 200px;
}

#lossOnDefinedTriggersInputBox{
	width: 25px;

}

.menuButton{
    background-color: inherit;
	border: 1px solid #ee1212;
    float: left;
    outline: none;
    cursor: pointer;
    padding: 5px 7px;
    transition: 0.3s;
	margin-right: 5px; /* Adds 10 pixels of margin on the right */
}

.menuButton:hover {
    background-color: #ddd;
}
.menuButton.active {
    background-color: #ccc;
}



/*********************************************************************************************
/* Paste Numbers Tab
/*********************************************************************************************/

#trigger-results-menu-container
{
	margin-left:50px;
	margin-top:10px;
}
#paste-container {
    display: flex;
    flex-direction: column;
    align-items: left;
}


#paste-container > button, #paste-container > input[type="text"] {
    margin: 0px;
}

#paste-pasteNumbersMessage{
	margin-top: 5px;
	margin-left:50px;
 
}

.bulk-button {
	width: 100px;
	height: 30px;
	margin: 5px;

  }
#copy-history-button{
	width: 50px;
}
#bulk-numbers-button{
	width: 50px;
	margin-left: 0px;
	margin-top: 0px;
}
#api-numbers-button{
	width: 50px;
	margin-left: 0px;
	margin-top: 0px;
}

#paste-enterOwnNumbers{
	margin-left: 0px;
	width: 620px;
	height: 150px;
    font-size: 16px; 
   resize: none;    
}

#trigger-code{
	margin-left: 5px;
	width: 400px;
	height: 200px;
    font-size: 16px; 
   resize: none;    
}


#paste-button-container{
	margin-left: 50px;

}
/*********************************************************************************************
/* Copy Button
/*********************************************************************************************/

.copy {
	/* button */
	--button-bg: #353434;
	--button-hover-bg: #464646;
	--button-text-color: #CCCCCC;
	--button-hover-text-color: #8bb9fe;
	--button-border-radius: 10px;
	--button-diameter: 36px;
	--button-outline-width: 1px;
	--button-outline-color: rgb(141, 141, 141);
	/* tooltip */
	--tooltip-bg: #f4f3f3;
	--toolptip-border-radius: 4px;
	--tooltip-font-family: Menlo, Roboto Mono, monospace;
	/* 👆 this field should not be empty */
	--tooltip-font-size: 12px;
	/* 👆 this field should not be empty */
	--tootip-text-color: rgb(50, 50, 50);
	--tooltip-padding-x: 7px;
	--tooltip-padding-y: 7px;
	--tooltip-offset: 8px;
	/* --tooltip-transition-duration: 0.3s; */
	/* 👆 if you need a transition, 
	just remove the comment,
	but I didn't like the transition :| */
  }
  
  .copy {
	box-sizing: border-box;
	width: var(--button-diameter);
	height: var(--button-diameter);
	border-radius: var(--button-border-radius);
	background-color: var(--button-bg);
	color: var(--button-text-color);
	border: none;
	cursor: pointer;
	position: relative;
	outline: none;
	
  }
  
  .tooltip {
	position: absolute;
	opacity: 0;
	visibility: 0;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font: var(--tooltip-font-size) var(--tooltip-font-family);
	color: var(--tootip-text-color);
	background: var(--tooltip-bg);
	padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
	border-radius: var(--toolptip-border-radius);
	pointer-events: none;
	transition: all var(--tooltip-transition-duration) cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  .tooltip::before {
	content: attr(data-text-initial);
  }
  
  .tooltip::after {
	content: "";
	position: absolute;
	bottom: calc(var(--tooltip-padding-y) / 2 * -1);
	width: var(--tooltip-padding-y);
	height: var(--tooltip-padding-y);
	background: inherit;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	z-index: -999;
	pointer-events: none;
  }
  
  .copy svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  }
  
  .checkmark {
	display: none;
  }
  
  /* actions */
  
  .copy:hover .tooltip,
  .copy:focus:not(:focus-visible) .tooltip {
	opacity: 1;
	visibility: visible;
	top: calc((100% + var(--tooltip-offset)) * -1);
  }
  
  .copy:focus:not(:focus-visible) .tooltip::before {
	content: attr(data-text-end);
  }
  
  .copy:focus:not(:focus-visible) .clipboard {
	display: none;
  }
  
  .copy:focus:not(:focus-visible) .checkmark {
	display: block;
  }
  
  .copy:hover,
  .copy:focus {
	background-color: var(--button-hover-bg);
  }
  
  .copy:active {
	outline: var(--button-outline-width) solid var(--button-outline-color);
  }
  
  .copy:hover svg {
	color: var(--button-hover-text-color);
  }
/*********************************************************************************************
/* Trigger Panel Table
/*********************************************************************************************/
.rwd-table-title{
	margin-left:0px;

}
.rwd-table-title-alert{
	margin-left:50px;
	color: rgb(252, 88, 13);

}
.rwd-table-text{
	margin-left:50px;
	width: 500px;
}
.rwd-table {
	
	
	min-width: 300px;
	background: #d0d6ce;
	color: #000000;
	border-radius: 0.4em;
	border: 1px solid #000; 
	overflow: hidden;
	margin-left:50px;
	margin-top: 20px;
  }
  .rwd-table-alert {
	background: rgb(255, 242, 206);
  }
  .rwd-table-alert tr {
	border-top: 1px black;
	border-bottom: 1px black;
  }

  .rwd-tabl-alert td {
	text-align: left;
	border:1px black;
  }

  .rwd-table tr {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
  }
  .rwd-table th {
	text-align: left;
  }
  
  .rwd-table td {
	text-align: left;
	border: 1px solid #ddd; 
  }

  hr.gradient {
	height: 3px;
	border: none;
	border-radius: 6px;
	width: 400px;
	text-align: left;
	background: linear-gradient(
	  90deg,
	  rgba(13, 8, 96, 1) 0%,
	  rgba(9, 9, 121, 1) 11%,
	  rgba(6, 84, 170, 1) 31%,
	  rgba(0, 255, 113, 1) 100%
	);
  }
  
  #title-with-help-div{
	height: 25px;
}
.help-window {
	display: none; 
	position: absolute; 
	border: 1px solid black; 
	padding: 5px;
	background-color: white;
	z-index: 1000; 
	white-space: pre-wrap; 
}
.title-with-help-container {
    display: flex;
    align-items: center;
}

.title-with-help-title {
    margin-left: -7px; /* Space between title and help icon */
}

#help-div {
	width: 20px;
	height: 20px;
}

#help-icon {
	cursor: pointer;
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: #f0f0f0;
	border-radius: 50%;
	text-align: center;
	line-height: 20px;
	user-select: none;
  }
  
  #help-window {
	position: absolute;
	width: 200px;
	background-color: white;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 5px;
	/* Adjust these values to better fit your layout */
	left: 30px;
	top: 0px;
	display: none;
  }

  
#patternTriggerButton {

	margin-left:10px;
	
  }

.table-alert-title{
	margin-left:10px;
	color: rgb(252, 88, 13);
}
.trigger-watch-title
{
	margin-left:10px;
	color: rgb(252, 88, 13);
	margin-top: 50px;
}


	.table-alert {
		width: 100%; /* Ensure table uses full width of its container */
		min-width: 350px;
		table-layout: auto; /* Adjust based on your layout needs */
		border-collapse: collapse; /* Optional: for cleaner border handling */
		background: rgb(255, 242, 206);
		margin-left: 10px;
		text-align: left;
		border: 1px solid black; 
		/*width: 300px;*/
		
	}

	.table-alert tr {
		border-top: 1px solid black;
	}

	.table-alert td {
		text-align: left;
		white-space: nowrap;
		padding: 5px;
		overflow: hidden; /* Hide overflow */
		text-overflow: ellipsis; /* Show ellipsis for overflowed content */
	}


.trigger-watch-table-title{
	margin-left:10px;

}
.trigger-watch-table-title-alert{
	margin-left:50px;
	color: rgb(252, 88, 13);

}
.trigger-watch-table-text{
	margin-left:50px;
	width: 800px;
}

.trigger-watch-table {
	
	
	min-width: 300px;
	background: #d0d6ce;
	color: #000000;
	border-radius: 0.4em;
	border: 1px solid #000; 
	overflow: hidden;
	margin-left:10px;
	margin-bottom: 10px;
	z-index: 5;
  }
  .trigger-watch-table-alert {
	background: rgb(255, 242, 206);
  }
  .trigger-watch-table-alert tr {
	border-top: 1px black;
	border-bottom: 1px black;
  }

  .trigger-watch-table-alert td {
	text-align: left;
	border:1px black;
  }

  .trigger-watch-table tr {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
  }
  .trigger-watch-table th {
	text-align: left;
  }
  
  .trigger-watch-table td {
	text-align: left;
	border: 1px solid #ddd; 
  }

  .trigger-alert-table{
	background: rgb(255, 254, 204);
	z-index: 5;
}
.trigger-alert-table td {
	text-align: left;
	border: 1px solid rgb(255, 254, 204);
  }
/*********************************************************************************************
/* Highlight Bet Locations
/*********************************************************************************************/

  .hilight-quad {
	position: relative; /* Required for the absolute positioning of the pseudo-element */
  }
  
  .hilight-quad::before {
	content: ''; /* Required for pseudo-elements */
	position: absolute;
	top: 2px; /* Center the circle vertically */
	left: 0px; /* Center the circle horizontally */
	width: 15px; /* Half the width of the parent element */
	height: 15px; /* Half the height of the parent element */
	background-color: rgb(4, 134, 255); /* Circle's fill color */
	border-radius: 50%; /* Makes the shape a circle */
	

  }

  .hilight-split-upDown {
	position: relative; /* Required for the absolute positioning of the pseudo-element */
  }
  
  .hilight-split-upDown::before {
	content: ''; /* Required for pseudo-elements */
	position: absolute;
	top: -3px; /* Center the circle vertically */
	left: -2px; /* Center the circle horizontally */
	width: 15px; /* Half the width of the parent element */
	height: 15px; /* Half the height of the parent element */
	background-color: rgb(146, 235, 158);   /* Circle's fill color */
	border-radius: 50%; /* Makes the shape a circle */

  }

  .hilight-split-across {
	position: relative; /* Required for the absolute positioning of the pseudo-element */
  }
  
  .hilight-split-across::before {
	content: ''; /* Required for pseudo-elements */
	position: absolute;
	top: 15px; /* Center the circle vertically */
	left: -3px; /* -1 1 Center the circle horizontally */
	width: 15px; /* Half the width of the parent element */
	height: 15px; /* Half the height of the parent element */
	background-color: rgb(146, 235, 158);   /* Circle's fill color */
	border-radius: 50%; /* Makes the shape a circle */

  }

  .hilight-street {
	position: relative; /* Required for the absolute positioning of the pseudo-element */
  }
  
  .hilight-street::before {
	content: ''; /* Required for pseudo-elements */
	position: absolute;
	top: -3px; /* Center the circle vertically */
	left: -2px; /* Center the circle horizontally */
	width: 15px; /* Half the width of the parent element */
	height: 15px; /* Half the height of the parent element */
	background-color: rgb(255, 0, 0); /* Circle's fill color */
	border-radius: 50%; /* Makes the shape a circle */

  }

    .hilight-street345 {
	position: relative; /* Required for the absolute positioning of the pseudo-element */
  }
  
  .hilight-street345::before {
	content: ''; /* Required for pseudo-elements */
	position: absolute;
	top: -5px; /* Center the circle vertically */
	left: -2px; /* Center the circle horizontally */
	width: 15px; /* Half the width of the parent element */
	height: 15px; /* Half the height of the parent element */
	background-color: rgb(255, 0, 0);  /* Circle's fill color */
	border-radius: 50%; /* Makes the shape a circle */
	border: 3px solid #fff;

  }
  
  .hilight-double-street {
	position: relative; /* Required for the absolute positioning of the pseudo-element */
  }
  
  .hilight-double-street::before {
	content: ''; /* Required for pseudo-elements */
	position: absolute;
	top: -3px; /* Center the circle vertically */
	left: 0px; /* Center the circle horizontally */
	width: 15px; /* Half the width of the parent element */
	height: 15px; /* Half the height of the parent element */
	background-color: rgb(72, 41, 248); /* Circle's fill color */
	border-radius: 50%; /* Makes the shape a circle */

  }



  

  .hilight-pattern-break {
	position: relative; /* Required for the absolute positioning of the pseudo-element */
  }
  
  .hilight-pattern-break::before {
	content: ''; /* Required for pseudo-elements */
	position: absolute;
	top: 5px; /* Center the circle vertically */
	left: 50px; /* Center the circle horizontally */
	width: 30px; /* Half the width of the parent element */
	height: 30px; /* Half the height of the parent element */
	background-color: rgb(12, 141, 247); /* Circle's fill color */
	border-radius: 25%; /* Makes the shape a circle */
	opacity: .70;

  }


  
.yellowBlackNum{
	background-color: #f3f165;
	color: black;
}

.greenHighlight{
	background-color: #f3f165;
	color:  green;
}

.outsideHighlight{
	background-color: #fffb00;
	color: black;
	
}
.outsideHighlightRed{
	background-color: #fffb05;
	color:  red;	
}
.outsideHighlightBlack{
	background-color: #def365;
	color: black;
}

.yellowRedNum{
	background-color: #f3f165;
	color:  #E0080B;
}
.winHighlight{
	background-color:#f3f165
}

.hilight-straight {
	position: relative; /* Required for the absolute positioning of the pseudo-element */
  }
  
  .hilight-straight::before {
	content: ''; /* Required for pseudo-elements */
	position: absolute;
	top: -27px; /* Center the circle vertically */
	left: 38px; /* Center the circle horizontally */
	width: 15px; /* Half the width of the parent element */
	height: 15px; /* Half the height of the parent element */
	background-color: #eac015 ;  /* Circle's fill color */
	border-radius: 50%; /* Makes the shape a circle */


  }
  .hilight-groups {
	position: relative; /* Required for the absolute positioning of the pseudo-element */
  }
  
  .hilight-groups::before {
	content: ''; /* Required for pseudo-elements */
	position: absolute;
	top: -10px; /* Center the circle vertically */
	left: 38px; /* Center the circle horizontally */
	width: 15px; /* Half the width of the parent element */
	height: 15px; /* Half the height of the parent element */
	background-color: rgb(30, 255, 0);  /* Circle's fill color */
	border-radius: 50%; /* Makes the shape a circle */


  } 

  .hilight-unique {
	position: relative; /* Required for the absolute positioning of the pseudo-element */
  }
  
  .hilight-unique::before {
	content: ''; /* Required for pseudo-elements */
	position: absolute;
	top: -10px; /* Center the circle vertically */
	left: -15px; /* Center the circle horizontally */
	width: 15px; /* Half the width of the parent element */
	height: 15px; /* Half the height of the parent element */
	background-color: rgb(250, 63, 219);  /* Circle's fill color */
	border-radius: 50%; /* Makes the shape a circle */
  } 

  
  .hilight-pattern-even-odd-high-low {
	position: relative; /* Required for the absolute positioning of the pseudo-element */
  }
  
  .hilight-pattern-even-odd-high-low::before {
	content: ''; /* Required for pseudo-elements */
	position: absolute;
	top: 8px; /* Center the circle vertically */
	left: 5px; /* Center the circle horizontally */
	width: 20px; /* Half the width of the parent element */
	height: 20px; /* Half the height of the parent element */
	background-color: rgb(71, 48, 68) ;  /* Circle's fill color */
	border-radius: 50%; /* Makes the shape a circle */
  } 

  .hilight-pattern-rows {
	position: relative; /* Required for the absolute positioning of the pseudo-element */
  }
  
  .hilight-pattern-rows::before {
	content: ''; /* Required for pseudo-elements */
	position: absolute;
	top: 30px; /* Center the circle vertically */
	left: 3px; /* Center the circle horizontally */
	width: 20px; /* Half the width of the parent element */
	height: 20px; /* Half the height of the parent element */
	background-color: rgb(71, 48, 68);  /* Circle's fill color */
	border-radius: 50%; /* Makes the shape a circle */
  } 

  .hilight-pattern-hilow {
	position: relative; /* Required for the absolute positioning of the pseudo-element */
  }
  
  .hilight-pattern-hilow::before {
	content: ''; /* Required for pseudo-elements */
	position: absolute;
	top: 15px; /* Center the circle vertically */
	left: 50px; /* Center the circle horizontally */
	width: 20px; /* Half the width of the parent element */
	height: 20px; /* Half the height of the parent element */
	background-color: rgb(71, 48, 68);  /* Circle's fill color */
	border-radius: 50%; /* Makes the shape a circle */
  } 

 .redNum{
background-color: rgb(116, 116, 116);
background-color: #db3333;
background-color: rgb(27, 3, 3);
background-color: #eb3838;
color:rgb(255, 255, 255);


}

.blackNum{
background-color: #000000;
background-color: #2e2c2b;
color:rgb(255, 255, 255);
}

.light-green {
    background-color: lightgreen;
  }

  .drag-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 700px; /* Match the iframe's height */
    width: 100%; /* Match the iframe's width */
    z-index: 999999; /* Ensure it's above the iframe */
    /* Optional: make the overlay visible for debugging */
    /* background-color: rgba(255, 255, 255, 0.5); */
}

.formatted-text {
    white-space: pre-wrap; /* Preserves whitespace and line breaks, allows wrapping */
    word-wrap: break-word; /* Ensures words break to prevent overflow */
    font-family: monospace; /* Gives a fixed-width font similar to <pre> */
    font-size: 14pt; /* Sets the font size */
    overflow-y: auto; /* Adds vertical scrolling if content exceeds container height */
    max-height: 400px; /* Sets a maximum height for the content container */
}

.line {
    font-family: monospace;
    font-size: 14pt;
    margin-top: 5px; /* Adjust the space above each line */
    margin-bottom: 20px; /* Adjust the space below each line */
}
/*********************************************************************************************
/* Toggle Slider
/*********************************************************************************************/
.slider-container {
    position: relative;
}

.slider-checkbox {
    display: none;
}

.slider-label {
    display: block;
    width: 60px;
    height: 30px;
    background-color: #ccc;
    border-radius: 15px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s;
}

.slider-label .slider-button {
    display: block;
    width: 26px;
    height: 26px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider-checkbox:checked + .slider-label {
    background-color: #4caf50;
}

.slider-checkbox:checked + .slider-label .slider-button {
    left: 32px;
}
.slider-highlights{

	background-color: #e0f80b;
	color: black;
	border-radius: 25%; /* Makes the shape a circle */

}
.neighbors-highlights{

	background-color: #71d6fd;
	color: black;
	border-radius: 25%; /* Makes the shape a circle */

}	
/*********************************************************************************************
/* lines.js
/*********************************************************************************************/
#tableContainer-lines {
    width: 50%;
	margin-top: 25px;
	margin-left: 25px;
	margin-bottom: 25px;
    display: block; /* Allow the container to be block to fill the parent width */
    border: 1px solid #ccc;
    overflow-y: auto;
    height: 500px; /* Limit the height to enforce vertical scrolling */
    position: relative; /* Context for absolute positioning of the header */
  }
  #rouletteTable-lines {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed; /* Ensures columns have consistent width */
  }
  #rouletteTable-lines thead th {
    position: sticky;
    top: 0; /* Stick to the top of the table view */
    background-color: #f9f9f9; /* Ensure the header is distinguishable */
    z-index: 10; /* Above the tbody rows for overlay during scroll */
  }
  #rouletteTable-lines th, #rouletteTable-lines td {
    padding: 8px;
    text-align: center;
    border: 1px solid #ddd;
    box-sizing: border-box;
  }
  .highlight-lines {
    background-color: #4CAF50; /* Highlight color for active bets */
    color: white;
  }
  #tableContainer-lines-counts {
    width: 100%;
	margin-top: 35px;
	margin-left: 25px;
	margin-bottom: auto;
    display: block; /* Allow the container to be block to fill the parent width */
    border: 1px solid #ccc;
    overflow-y: auto;
    height: auto; /* Limit the height to enforce vertical scrolling */
    position: relative; /* Context for absolute positioning of the header */
  }
  #rouletteTable-lines-counts {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed; /* Ensures columns have consistent width */
  }
  #rouletteTable-lines-counts thead th {
    position: sticky;
    top: 0; /* Stick to the top of the table view */
    background-color: #f9f9f9; /* Ensure the header is distinguishable */
    z-index: 10; /* Above the tbody rows for overlay during scroll */
  }
  #rouletteTable-lines-counts th, #rouletteTable-lines-counts td {
    padding: 8px;
    text-align: center;
    border: 1px solid #ddd;
    box-sizing: border-box;
  }
  
  
.wrapped-div {
	border: 2px solid black;
	padding: 10px;
	width: 50%;
	margin-bottom: 10px;
	margin-top: 10px;
	background-color: rgb(255, 255, 255);
	display: none;
}


.label-sleeper-chart {
    width: 60px; /* Adjust width as needed */
    height: 30px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.data-sleeper-chart {
    width: 60px; /* Adjust width as needed */
    height: 30px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.row-sleeper-chart {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* Change from space-around to flex-start */
    
}

#sleeper-chart {
    display: flex;
    flex-direction: column;
	padding: 10px;
}
.timer-container {
    width: 100%; /* Or set to a specific width */
}
.timer, .controls, #bouncy-display-top {
    display: inline-block;
    vertical-align: top;
    width: 29%; /* Adjust width as needed */
}

.wheel-alert-window {
	position: absolute;
	height: 320px;
	width: 340px;
	margin-top:-15px;
	position: relative;
	left: -195px;
	z-index:2;
}
.header-bet-list {
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	padding: 10px;
	background-color: #4CAF50;
	color: white;
	border-radius: 5px 5px 0 0;
}
.scrollable-div-bet-list {
	height: 265px;
	overflow-y: auto;
	background-color: white;
	border: 1px solid #ccc;
	border-radius: 0 0 5px 5px;
	padding: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	word-wrap: break-word;
}
.bet-item-bet-list {
	padding: 10px;
	border-bottom: 1px solid #ddd;
	color: #000;
	white-space: normal;
    overflow-wrap: break-word; 
}
.bet-item-bet-list:last-child {
	border-bottom: none;
}	

.bulk-button-bet-list {
	position: absolute;
	width: 150px;
	height: 30px;
	margin: 5px;
	margin-top: 458px;
	margin-left: 745px;

  }

.bulk-button-bet-list.active {
	background-color: #80e27e;
}
.statistics-buttons{
	margin-left: 25px;
}
.statistics {
    display: block; /* Change display to block to allow the table to dictate the size */
    font-family: Arial, sans-serif;
    padding: 0; /* Remove padding to allow the table to fit snugly */
    max-width: 65%;
    margin-left: 25px;
    margin-right: 0;
    margin-top: 1px;
    margin-bottom: 5px;
    padding-left: 0; /* Remove padding on the left */
    overflow: auto; /* Add overflow:auto to handle any overflow */
}

.statistics table {
    border-collapse: collapse; /* Ensure table cells collapse around content */
    width: 100%; /* Set width to 100% to make the table fit the div */
    margin: 0; /* Remove default margin */
}

.statistics th, .statistics td {
    border: 1px solid #ccc;
    padding: 5px; /* Keep padding for readability */
    text-align: left;
}


.stat-item {
    text-align: left;
}

.low_stat_label { grid-column: 1; grid-row: 1; }
.even_stat_label { grid-column: 2; grid-row: 1; }
.red_stat_label { grid-column: 3; grid-row: 1; }
.dozen1_stat_label { grid-column: 4; grid-row: 1; }
.dozen2_stat_label { grid-column: 5; grid-row: 1; }
.dozen3_stat_label { grid-column: 6; grid-row: 1; }

.low_stat_count { grid-column: 1; grid-row: 2; }
.even_stat_count { grid-column: 2; grid-row: 2; }
.red_stat_count { grid-column: 3; grid-row: 2; }
.dozen1_stat_count { grid-column: 4; grid-row: 2; }
.dozen2_stat_count { grid-column: 5; grid-row: 2; }
.dozen3_stat_count { grid-column: 6; grid-row: 2; }

.low_stat_percentage { grid-column: 1; grid-row: 3; }
.even_stat_percentage { grid-column: 2; grid-row: 3; }
.red_stat_percentage { grid-column: 3; grid-row: 3; }
.dozen1_stat_percentage { grid-column: 4; grid-row: 3; }
.dozen2_stat_percentage { grid-column: 5; grid-row: 3; }
.dozen3_stat_percentage { grid-column: 6; grid-row: 3; }



/* Music player container styling */
.music-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px;
    background-color: #ffffff;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
}

/* Dropdown styling */
.music-player select {
    border: none;
    border-radius: 4px;
    padding: 2px;
    background-color: #444;
    color: #fff;
}

/* Button styling */
.music-player button {
    background-color: #444;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    padding: 4px 8px;
}

/* Volume control slider */
.music-player input[type="range"] {
    width: 60px;
    cursor: pointer;
}

.left-label {
	color: blue;
	font-weight: bold;
	font-size: 24px;
}

.right-label {
	color: orange;
	font-weight: bold;
	font-size: 24px;
}

.hidden {
    visibility: hidden;
}

.large-button {
	background-color: #A8D5BA;; /* Friendly blue */
	color: #4E5D6C; /* Crisp white text */
	font-size: 15px; /* Reduced from 20px to 15px */
	font-weight: bold; /* Maintain bold for readability */
	padding: 11px 22px; /* Reduced from 15px 30px */
	border: none; /* Clean look */
	border-radius: 7.5px; /* Proportional to original (10px * 0.75) */
	cursor: pointer; /* Pointer cursor for interactivity */
	text-align: center; /* Center-align text */
	transition: background-color 0.3s, transform 0.2s; /* Smooth hover effect */
	margin: 10px;
  }
  
  .large-button:hover {
	background-color: #A8D5BA; /* Slightly darker blue on hover */
	transform: scale(1.05); /* Subtle scaling for feedback */
  }
  
  .large-button:active {
	background-color: #2A6BA0; /* Even darker blue for active state */
  }
  
  #container_edge3alert {
    padding: 20px;
}

#draggableDiv_edge3alert {
    width: 200px;
    height: 150px;
    background-color: lightblue;
    position: absolute;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: move;
}

.hidden_edge3alert {
    display: none;
}

/******************************************************************
/ Start: Wheel toggle Slider
/******************************************************************/
.toggle-container {
	display: flex;
	align-items: center;
	font-family: Arial, sans-serif;
	margin-left: 800px;
	margin-top: 410px;
}
  
  .toggle-text {
	margin: 0 10px;
  }
  
  .toggle-switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 30px;
  }
  
  .toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
  }
  
  .toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	border-radius: 30px;
	transition: 0.4s;
  }
  
  .toggle-slider:before {
	content: "";
	position: absolute;
	height: 22px;
	width: 22px;
	border-radius: 50%;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: 0.4s;
  }
  
  input:checked + .toggle-slider {
	background-color: #4caf50;
  }
  
  input:checked + .toggle-slider:before {
	transform: translateX(30px);
  }
  
/******************************************************************
/ END: Wheel toggle Slider
/******************************************************************/

#disp {
    margin-top: 10px; /* Minimal spacing between history and disp */
    flex: none;
    width: 990px;
    box-sizing: border-box;
    overflow: auto;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #333;
	margin-left:25px;
    
}
#disp ul {
    padding-left: 20px; /* Indent for lists */
}
#disp strong {
    color: #007BFF; /* Highlighted text */
}
#currentRow {
	display: flex;
    
}
#currentRow ul {
    padding-left: 20px; /* Indent for lists */
}

#currentRow strong {
    color: #007BFF; /* Highlighted text */
}

#first_row_container_id {
    
	display: flex;
   
    
}
#first_row_container_id ul {
    padding-left: 20px; /* Indent for lists */
}
#first_row_container_id strong {
    color: #007BFF; /* Highlighted text */
}
#chart_container_id {
	flex: flex;
    
}
#chart_container_id ul {
    padding-left: 20px; /* Indent for lists */
}
#chart_container_id strong {
    color: #007BFF; /* Highlighted text */
}


#last-row-chart {
    margin-top: 10px; /* Minimal spacing between history and disp */
    flex: none;
    width: 990px;
    box-sizing: border-box;
    overflow: auto;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #333;
	margin-left:25px;
    
}
#last-row-chart ul {
    padding-left: 20px; /* Indent for lists */
}
#last-row-chart strong {
    color: #007BFF; /* Highlighted text */
}
/*******************************************************************************************
/ BEGIN: Starting Bet
/*******************************************************************************************/
.track {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    align-items: center; /* Vertically align items */
    gap: 10px; /* Add spacing between items */
    padding: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 5px;
    background-color: #f9f9f9; /* Light background */
    border: 1px solid #ddd; /* Subtle border */
    border-radius: 8px; /* Rounded corners */
    font-size: 18px; /* Set base font size */
    font-family: Arial, sans-serif; /* Clean font */
    width: 275px;

    margin-left: 25px;

}

.track-button {
    padding: 10px 20px; /* Larger button size */
    font-size: 18px;
    color: #fff;
    background-color: #4CAF50; /* Green button */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.track-button:hover {
    background-color: #45a049; /* Darker green on hover */
}

.track-input {
    width: 50px; /* Fixed width for input */
    padding: 8px;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.track-label {
    font-size: 18px;
    margin-right: 5px; /* Spacing next to labels */
    color: #333; /* Dark text */
}

.track-radio {
    margin-right: 10px; /* Space between radio buttons and labels */
    transform: scale(1.2); /* Make radio buttons slightly larger */
    cursor: pointer;
}
/*******************************************************************************************
/ END: Starting Bet
/*******************************************************************************************/

/*******************************************************************************************
/ BEGIN: Chart Table Results
/*******************************************************************************************/

.flex-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 0; /* Remove unnecessary gaps */
    padding: 0; /* Ensure no extra space is added */
    box-sizing: border-box;
    margin-left: 30px;  
    
}
#chart{
    display: flex;
    flex-direction: column;
    width: 990px;
    max-width: 100%;
    margin: 0; /* Remove unnecessary gaps */
    padding: 0; /* Ensure no extra space is added */
    box-sizing: border-box;
    margin-left: 25px; 
	margin-bottom: 100px;
}
#current-row-chart{
    display: flex;
    flex-direction: column;
    width: 990px;
    max-width: 100%;
    margin: 0; /* Remove unnecessary gaps */
    padding: 0; /* Ensure no extra space is added */
    box-sizing: border-box;
    margin-left: 25px; 
	margin-bottom: 100px;
}
/*******************************************************************************************
/ END: Chart Table Results
/*******************************************************************************************/

/*******************************************************************************************
/ BEGIN: Basket Bets - Single Zero
/*******************************************************************************************/

.basket {
    width: 20px;
    height: 65px;
    position: absolute;
    display: inline-block;
    margin-left: -10px;
    margin-top: 250px;
    cursor: pointer;
    z-index: 3;
    background-color: rgba(224, 8, 11, 0);
    background-image: none; /* Default no image */
    background-repeat: no-repeat;
    background-size: contain; /* Fit the higher-res image */
    background-position: center;
    transition: transform 0.3s ease, background-size 0.3s ease;
}



.basket:hover {
    background-color: transparent; /* Change background color to tan */
   
    background-size: 100%; /* Ensure any background image scales cleanly */
    text-align: center; /* Center the text */
    
}



/* Tooltip styling */
.basket:hover::after {
    content: " Bet: 0,1,2,3 Odds 8-1"; /* Add the wording */
    position: absolute;
    top: 30%; /* Position vertically centered */
    left: 50%; /* Position horizontally centered */
    transform: translate(-50%, -50%) ; /* Rotate text to appear vertically */
    color: black; /* Text color */
    font-weight: bold; /* Make text bold */
    font-size: 14px; /* Adjust size as needed */
    background-color: tan; /* Ensure the tooltip matches the hover background */
    padding: 5px; /* Add padding around the text */
    white-space: nowrap; /* Prevent text wrapping */
	margin-top: -35px;
}

.basket-0-1-2 {
    width: 20px;
    height: 65px;
    position: absolute;
    display: inline-block;
    margin-left: -10px;
    margin-top: 165px;
    cursor: pointer;
    z-index: 3;
    background-color: rgba(224, 8, 11, 0);
    background-image: none; /* Default no image */
    background-repeat: no-repeat;
    background-size: contain; /* Fit the higher-res image */
    background-position: center;
    transition: transform 0.3s ease, background-size 0.3s ease;

}



.basket-0-1-2:hover {
    background-color: transparent; /* Change background color to tan */
   
    background-size: 100%; /* Ensure any background image scales cleanly */
    text-align: center; /* Center the text */
    
}



/* Tooltip styling */
.basket-0-1-2:hover::after {
    content: " Bet: 0,1,2 Odds 11-1"; /* Add the wording */
    position: absolute;
    top: 30%; /* Position vertically centered */
    left: 50%; /* Position horizontally centered */
    transform: translate(-50%, -50%) ; /* Rotate text to appear vertically */
    color: black; /* Text color */
    font-weight: bold; /* Make text bold */
    font-size: 14px; /* Adjust size as needed */
    background-color: tan; /* Ensure the tooltip matches the hover background */
    padding: 5px; /* Add padding around the text */
    white-space: nowrap; /* Prevent text wrapping */
	margin-top: -35px;
}

.basket-0-2-3 {
    width: 20px;
    height: 65px;
    position: absolute;
    display: inline-block;
    margin-left: -10px;
    margin-top: 75px;
    cursor: pointer;
    z-index: 3;
    background-color: rgba(224, 8, 11, 0);
    background-image: none; /* Default no image */
    background-repeat: no-repeat;
    background-size: contain; /* Fit the higher-res image */
    background-position: center;
    transition: transform 0.3s ease, background-size 0.3s ease;

}



.basket-0-2-3:hover {
    background-color: transparent; /* Change background color to tan */
   
    background-size: 100%; /* Ensure any background image scales cleanly */
    text-align: center; /* Center the text */
    
}



/* Tooltip styling */
.basket-0-2-3:hover::after {
    content: " Bet: 0,2,3 Odds 11-1"; /* Add the wording */
    position: absolute;
    top: 30%; /* Position vertically centered */
    left: 50%; /* Position horizontally centered */
    transform: translate(-50%, -50%) ; /* Rotate text to appear vertically */
    color: black; /* Text color */
    font-weight: bold; /* Make text bold */
    font-size: 14px; /* Adjust size as needed */
    background-color: tan; /* Ensure the tooltip matches the hover background */
    padding: 5px; /* Add padding around the text */
    white-space: nowrap; /* Prevent text wrapping */
	margin-top: -35px;
}

/*******************************************************************************************
/ END: Basket Bets - Single Zero
/*******************************************************************************************/

/*******************************************************************************************
/ BEGIN: Basket Bets - Double Zero
/*******************************************************************************************/

.basket-00 {
    width: 20px;
    height: 65px;
    position: absolute;
    display: inline-block;
    margin-left: -10px;
    margin-top: 250px;
    cursor: pointer;
    z-index: 3;
    background-color: rgba(224, 8, 11, 0);
    background-image: none; /* Default no image */
    background-repeat: no-repeat;
    background-size: contain; /* Fit the higher-res image */
    background-position: center;
    transition: transform 0.3s ease, background-size 0.3s ease;
}



.basket-00:hover {
    background-color: transparent; /* Change background color to tan */
   
    background-size: 100%; /* Ensure any background image scales cleanly */
    text-align: center; /* Center the text */
    
}



/* Tooltip styling */
.basket-00:hover::after {
    content: " Bet: 0,00,1,2,3 Odds 6-1"; /* Add the wording */
    position: absolute;
    top: 30%; /* Position vertically centered */
    left: 50%; /* Position horizontally centered */
    transform: translate(-50%, -50%) ; /* Rotate text to appear vertically */
    color: black; /* Text color */
    font-weight: bold; /* Make text bold */
    font-size: 14px; /* Adjust size as needed */
    background-color: tan; /* Ensure the tooltip matches the hover background */
    padding: 5px; /* Add padding around the text */
    white-space: nowrap; /* Prevent text wrapping */
	margin-left: 0px;
	margin-top: -35px;
}

.basket-0-1-2-00 {
    width: 20px;
    height: 65px;
    position: absolute;
    display: inline-block;
    margin-left: -10px;
    margin-top: 165px;
    cursor: pointer;
    z-index: 3;
    background-color: rgba(224, 8, 11, 0);
    background-image: none; /* Default no image */
    background-repeat: no-repeat;
    background-size: contain; /* Fit the higher-res image */
    background-position: center;
    transition: transform 0.3s ease, background-size 0.3s ease;

}



.basket-0-1-2-00:hover {
    background-color: transparent; /* Change background color to tan */
   
    background-size: 100%; /* Ensure any background image scales cleanly */
    text-align: center; /* Center the text */
    
}



/* Tooltip styling */
.basket-0-1-2-00:hover::after {
    content: " Bet: 0,00,1,2 Odds 8-1"; /* Add the wording */
    position: absolute;
    top: 30%; /* Position vertically centered */
    left: 50%; /* Position horizontally centered */
    transform: translate(-50%, -50%) ; /* Rotate text to appear vertically */
    color: black; /* Text color */
    font-weight: bold; /* Make text bold */
    font-size: 14px; /* Adjust size as needed */
    background-color: tan; /* Ensure the tooltip matches the hover background */
    padding: 5px; /* Add padding around the text */
    white-space: nowrap; /* Prevent text wrapping */
	margin-top: -35px;
}

.basket-0-2-3-00 {
    width: 20px;
    height: 65px;
    position: absolute;
    display: inline-block;
    margin-left: -10px;
    margin-top: 75px;
    cursor: pointer;
    z-index: 3;
    background-color: rgba(224, 8, 11, 0);
    background-image: none; /* Default no image */
    background-repeat: no-repeat;
    background-size: contain; /* Fit the higher-res image */
    background-position: center;
    transition: transform 0.3s ease, background-size 0.3s ease;

}



.basket-0-2-3-00:hover {
    background-color: transparent; /* Change background color to tan */
   
    background-size: 100%; /* Ensure any background image scales cleanly */
    text-align: center; /* Center the text */
    
}



/* Tooltip styling */
.basket-0-2-3-00:hover::after {
    content: " Bet: 0,00,2,3 Odds 8-1"; /* Add the wording */
    position: absolute;
    top: 30%; /* Position vertically centered */
    left: 50%; /* Position horizontally centered */
    transform: translate(-50%, -50%) ; /* Rotate text to appear vertically */
    color: black; /* Text color */
    font-weight: bold; /* Make text bold */
    font-size: 14px; /* Adjust size as needed */
    background-color: tan; /* Ensure the tooltip matches the hover background */
    padding: 5px; /* Add padding around the text */
    white-space: nowrap; /* Prevent text wrapping */
	margin-top: -35px;
}

/*******************************************************************************************
/ END: Basket Bets - Basket Bets - Double Zero
/*******************************************************************************************/

del {
    color: red;
}

/*******************************************************************************************
/ START: API
/*******************************************************************************************/

.header-api {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 20px;
}

.label-api {
    font-family: Arial, sans-serif;
    margin-right: 10px;
}

.dropdown-api {
    font-family: Arial, sans-serif;
    padding: 5px;
    margin: 10px 0;
}

.results-container-api {
    margin-top: -2px; /* Last value used */
    margin-left: 5px; /* Last value used */
    text-align: left; /* Last value used */
}

.refresh-button-api {
    padding: 5px 10px;
    font-family: Arial, sans-serif;
    margin-bottom: -5px; /* Last value used */
    text-align: left;
    margin-left: 370px; /* Last value used */
    margin-top: 10px; /* Added in the later declaration */
}

.roulette-results-api {
    margin-top: 20px;
    font-family: Arial, sans-serif;
    text-align: left; /* Last value used */
    margin-left: 15px; /* Last value used */
}

.roulette-number-api {
    display: inline-block;
    margin: 5px; /* Last value used */
    padding: 3px; /* Adjust padding for smaller circles */
    width: 25px; /* Last value used */
    height: 25px; /* Last value used */
    border-radius: 50%; /* Create a perfect circle */
    font-size: 12px; /* Last value used */
    font-weight: bold;
    line-height: 25px; /* Last value used */
    text-align: center; /* Center-align text horizontally */
    color: white;
    background-color: gray; /* Last value used */
    border: 2px solid transparent; /* Transparent border to prevent shifting */
    transition: border-color 0.2s, background-color 0.2s; /* Smooth hover effect */
}

.roulette-number-api:hover {
    border-color: yellow; /* Highlight border */
    background-color: lightyellow; /* Optional: Highlight background */
}

.red-api {
    background-color: red;
}

.black-api {
    background-color: black;
}

.green-api {
    background-color: green;
}

.green-arrow {
    color: green;
    font-size: 3em; /* Last value used */
    margin-left: 0px; /* Last value used */
    font-weight: bold;
    position: relative;
    top: 20px; /* Last value used */
}

.red-api-highlight {
    border: 2px solid rgb(255, 0, 0); /* Highlight border */
    box-shadow: 0 0 10px rgb(255, 102, 0); /* Optional glow effect */
    background-color: rgb(251, 255, 0); /* Last value used */
    color: rgb(255, 0, 0); /* Last value used */
}

.black-api-highlight {
    border: 2px solid black; /* Highlight border */
    box-shadow: 0 0 10px rgb(255, 102, 0); /* Optional glow effect */
    background-color: rgb(251, 255, 0); /* Last value used */
    color: black; /* Last value used */
}

.green-api-highlight {
    border: 2px solid green; /* Highlight border */
    box-shadow: 0 0 10px rgb(255, 102, 0); /* Optional glow effect */
    background-color: rgb(251, 255, 0); /* Last value used */
    color: green; /* Last value used */
}

/*******************************************************************************************
/ END: API
/*******************************************************************************************/
#winLossGraphContainer {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#groupAccordian {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
}

/* Ensure full width on smaller screens */
@media (max-width: 768px) {
    #groupAccordian {
        width: 100vw !important;
        overflow-x: auto;
    }
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden; /* Prevent sideways scrolling */
}

.container {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}
.fixed-wrapper {
  min-width: 1200px; /* Or whatever your widest element is */
  width: 100%;
}

.hide-on-mobile {
  display: block;
}

@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
}