@charset "utf-8";
/* CSS Document */
@font-face {
	font-family: 'HelveticaNeueLTStd-BlkEx';
	src: url('../font/HelveticaNeueLTStd-BlkEx.eot?') format('eot'),
	     url('../font/HelveticaNeueLTStd-BlkEx.otf')  format('opentype'),
	     url('../font/HelveticaNeueLTStd-BlkEx.woff') format('woff'),
	     url('../font/HelveticaNeueLTStd-BlkEx.ttf')  format('truetype'),
	     url('../font/HelveticaNeueLTStd-BlkEx.svg#HelveticaNeueLTStd-BlkEx') format('svg');
}

@font-face {
	font-family: 'BlackoakStd';
	src: url('../font/BlackoakStd.eot?') format('eot'),
	     url('../font/BlackoakStd.otf')  format('opentype'),
	     url('../font/BlackoakStd.woff') format('woff'),
	     url('../font/BlackoakStd.ttf')  format('truetype'),
	     url('../font/BlackoakStd.svg#BlackoakStd') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Calibri';
	src: url('../font/Calibri.eot?') format('eot'),
	     url('../font/Calibri.woff') format('woff'),
	     url('../font/Calibri.ttf')  format('truetype'),
	     url('../font/Calibri.svg#Calibri') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'CooperBlack';
	src: url('../font/CooperBlack.eot?') format('eot'),
	     url('../font/CooperBlack.woff') format('woff'),
	     url('../font/CooperBlack.ttf')  format('truetype'),
	     url('../font/CooperBlack.svg#CooperBlack') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Impact';
	src: url('../font/Impact.eot?') format('eot'),
	     url('../font/Impact.woff') format('woff'),
	     url('../font/Impact.ttf')  format('truetype'),
	     url('../font/Impact.svg#Impact') format('svg');
}

@font-face {
	font-family: 'helvetica_neueregular';
	src: url('../font/helveticaneue-condensed-webfont.eot');
	src: url('../font/helveticaneue-condensed-webfont.eot?#iefix') format('embedded-opentype'),  url('../font/helveticaneue-condensed-webfont.woff') format('woff'),  url('../font/helveticaneue-condensed-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'helvetica_neue67MdCn';
	src: url('../font/helveticaneue-mediumcond-webfont.eot');
	src: url('../font/helveticaneue-mediumcond-webfont.eot?#iefix') format('embedded-opentype'),  url('../font/helveticaneue-mediumcond-webfont.woff') format('woff'),  url('../font/helveticaneue-mediumcond-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'helveticaneuemedium';
	src: url('../font/helveticaneue_med-webfont.eot');
	src: url('../font/helveticaneue_med-webfont.eot?#iefix') format('embedded-opentype'),  url('../font/helveticaneue_med-webfont.woff') format('woff'),  url('../font/helveticaneue_med-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'helvetica_neue_lt_23ultraLtEx';
	src: url('../font/helveticaneueltstd-ultltex-webfont.eot');
	src: url('../font/helveticaneueltstd-ultltex-webfont.eot?#iefix') format('embedded-opentype'),  url('../font/helveticaneueltstd-ultltex-webfont.woff') format('woff'),  url('../font/helveticaneueltstd-ultltex-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

.clear {clear: both;}
body {
	margin:0;
	padding:0;
	font-size:12px;
	font-family: 'helvetica_neueregular';
}
.wrapper {
	width:1060px;
	margin:0 auto;
}
.top-head {
	float:left;
	width:1060px;
	height:165px;
}
.top-lady {
	position:relative;
	z-index:20;
	margin-bottom:-32px;
	height:180px;
	width:528px;
	margin-top:20px;
	float: left;
}
.top-lady img{
	margin-top:-18px;
}
.top-lady p {
	position:absolute;
	font-family: 'helvetica_neueregular';
	font-size:14px;
	color:#692d5e;
	left: 211px;
	right: 27px;
	top: 4px;
	line-height:23px;
}
.content {
	background:url(../images/cont-back.png) repeat-y;
	float:left;
	width:1060px;
	padding-left:12px;
	padding-right:12px;
}
.border {
	border-top:1px solid #000000;
	float:left;
	width:100%;
}
.content-left {
	float:left;
	width:550px;
	padding-top:2px;
}
.content-left-bottom {
	padding: 0 15px;
	margin-bottom: 20px;
}

.drb2 {
    background: #fffca9 none repeat scroll 0 0;
    border: 1px solid #ccc;
    border-radius: 20px;
    display: block;
    height: auto !important;
    width: 88px !important;
}

.content-left-bottom-in {
    background: #fffca9 none repeat scroll 0 0;
    border: 1px solid #ccc;
    border-radius: 20px;
    float: left;
    padding: 10px;
    width: 109px;
}

.content-left-bottom-in1 {
  float: left;
  width: 60%;
  padding: 15px;
  box-sizing: border-box;
}
.content-left-bottom-in1 div.confirmationMsg {
	text-align: center;
}
.content-left-bottom-in2 {
    float: left;
  width: 40%;
}
radio {
	background:url(../images/draftbutton.png) no-repeat;
	width:101px;
	height:30px;
	font-size:12px;
	color:#b2bfef;
	text-align:center;
	line-height:30px;
	margin-bottom:10px;
	cursor:pointer;
}
#priceTag {
    color: #000000;
}

.draft-board {
    color: #000;
    font-family: "helvetica_neueregular";
    font-size: 14px;
}

.draft-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
    height: 33px;
    line-height: 30px;
    margin-bottom: 10px;
    padding-left: 7px;
    padding-right: 7px;
    align-items: center;
}

.draft-label {
    font-weight: bold;
    color: #000;
	width: 60px;
}

.draft-value {
    color: #000000;
    font-weight: normal;
	padding-left: 5px;
	background: #fff;
}
.draft-button {
	background:url(../images/draftbutton.png) no-repeat;
	width:101px;
	height:33px;
	font-family: 'helvetica_neueregular';
	font-size:12px;
	color:#b2bfef;
	text-align:center;
	line-height:30px;
	margin-bottom:10px;
	cursor:pointer;
}
.draft-button1 {
	background:url(../images/draftbutton.png) no-repeat;
	width:101px;
	height:33px;
	font-family: 'helvetica_neueregular';
	font-size:12px;
	color:#b2bfef;
	text-align:center;
	line-height:30px;
	margin-top:8px !important;
	cursor:pointer;
	margin-left:76px !important;
	float:left;
}
.upgrade-button {
	background:url(../images/upgrade.png) no-repeat;
	width:196px;
	height:33px;
	font-family: 'helvetica_neueregular';
	font-size:12px;
	color:#b2bfef;
	text-align:center;
	line-height:30px;
	margin-bottom:10px;
	cursor:pointer;
	margin-left:30px;
	position:absolute;
	bottom:26px;
}
radio1 {
	background:url(../images/draftbutton.png) no-repeat;
	width:101px;
	height:30px;
	font-size:12px;
	color:#b2bfef;
	text-align:center;
	line-height:30px;
	margin-bottom:10px;
	margin-top:7px;
	cursor:pointer;
	font-family: 'helveticaneuemedium';
	margin-left:80px;
}
.button {
	/*background:url(../images/button.png) no-repeat;*/
	background: #0066ff;
	/*width:101px;*/
	border-radius: 5px !important; 
	width:74px;
	height:33px;
	font-size:14px;
	color:#ffffff;
	text-align:center;
	line-height:33px;
	margin-bottom:10px;
	cursor:pointer;
	float:left;
	margin-right:7px;
	margin-bottom:7px;
	border-radius: 5px;
}
input.button {
	/*background:url(../images/button.png) no-repeat !important;*/
	background: #0066ff;
	width:101px;
	height:33px;
	font-size:14px;
	color:#ffffff;
	text-align:center;
	line-height:33px;
	margin-bottom:10px;
	cursor:pointer;
	float:left;
	/*margin-right:7px;*/
	margin-right:4px;
	margin-bottom:7px;
	margin-top:23px;
}
input.buttonnew {
	background:url(../images/button.png) no-repeat !important;
	width:101px;
	height:33px;
	font-size:14px;
	color:#ffffff;
	text-align:center;
	line-height:33px;
	margin-bottom:10px;
	cursor:pointer;
	float:left;
	margin-right:7px;
	margin-bottom:7px;
	margin-top:8px;
}
.white {
	color:#ffffff;
	padding-left: 10px;
}
.logoj {
	background-color:#FFF;
	width:134px;
	height:33px;
	border:1px solid #8199b1;
	color:#292929;
	border-radius:5px;
	-moz-border-radius:5px;
	float:right;
	text-align:left;
	line-height:33px;
	margin-bottom:7px;
	padding-left:6px;
	margin-top: -47px;
	margin-left: 110px;
}
.preview {
	background:url(../images/draftbutton.png) no-repeat;
	width:101px;
	height:30px;
	font-size:12px;
	color:#b2bfef;
	text-align:center;
	line-height:30px;
	margin-bottom:10px;
	cursor:pointer;
	float: left;
	margin-left: -13px;
}
h1 {
	font-family: 'helvetica_neueregular';
	font-size:14px;
	color:#292929;
}
h2 {
	font-family: 'helveticaneuemedium';
	font-size:14px;
	color:#186882;
}
.content-right {
	float:left;
	width:510px;
	padding-top:2px;
}
.content-right-bottom {
	float:left;
	width:510px;
	padding-top:5px;
}
.content-right-bottom h1 {
	margin-top: 10px;
	margin-bottom: 2px;
}
.content-right-bottom-bot {
	float:left;
	width:510px;
	height:45px;
	margin-top:15px;
}
.content-right-bottom-bot radio {
	float:left;
	margin-right:7px;
}
.content-right-bottom-bot p {
	margin:0;
	padding-right:9px;
	color:#292929;
	float:right;
	width:77%;
	height:38px;
	margin-top:-41px;
}
.content-right-bottom-left {
	float:left;
	width: 45%;
	padding: 0 5px;
	border-right:1px solid #cbd4d8;
	box-sizing: border-box;
}
.content-right-bottom-right {
	float: left;
	width: 55%;
	font-family: 'helvetica_neueregular';
	padding-left: 10px;
	font-size: 12px;
	line-height: 20px;
	box-sizing: border-box;
}
.content-right-bottom-right div#instructionsDiv {
	height: 325px;
	margin-bottom: 15px;
	overflow-y: auto;
	overflow-x: hidden;
}
.content-right img {
	float:left;
	margin:0;
}
.reset {
	position: relative;
	z-index: 30;
	top: -2px;
	float: right;
	right: 37px;
}
.reset a {
	background:url(../images/reset.png) no-repeat;
	width:101px;
	height:33px;
	float:right;
}
.typingText {
	width:490px;
	height:33px;
	border: 1px solid #000;
}
.left {
	margin-left:0px;
	float:left;
}
.middle {
	margin-left:3px;
	float:left;
}
.right {
	margin-left:6px;
	float:left;
}
.hidden {
	display:none;
}
.table1 {
	width:490px;
	height:320px;
	display:table;
}
.divRow {
	display:table-row;
	background: #fff;
	height:15px;
}
.divRow:nth-child(even) {
	background: #ccc;
}
.divCell {
	display:table-cell;
	border: 1px solid #cf7a81;
	text-align: center;
	vertical-align:middle;
	width:41px;
	height:15px;
	font-size: 14px;
	color: white;
	overflow:hidden;
	text-shadow:
 -1px -1px 0 #f25a56,  1px -1px 0 #f25a56,  -1px 1px 0 #f25a56,  1px 1px 0 #f25a56;
}
.topRowCell {
	display:table-cell;
	border: 1px solid #a9a9a9;
	text-align: center;
	vertical-align:middle;
	color:#a9a9a9;
	font-size:8px;
	width:60px;
	height:20px;
}
.jumbo-2x{
    display: none;
    border:10px solid blue !important;
    padding:5px!important;
    text-align:center;
}
.jumbo-2x h2{
    color:blue !important;
    font-weight: bold !important;  
       max-width: 139px;
       width: 100%;
       display: inline-block;
       line-height: 20px;
}
.jumbo-2x p{
    color:#000000;
    font-size: 14px;    
    line-height: 16px;
    margin-bottom: 2px;
}
.jumbo-2x button{
    background:blue;
    border-radius:50px;
    color:#ffff;
    padding:6px 15px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
}
/**********************************/
.jumbo-2x-exception {
    display: none;
    border: 10px solid blue !important;
    padding: 5px !important;
    text-align: center;
}

.jumbo-2x-exception h2 {
    color: blue !important;
    font-weight: bold !important;
    max-width: 139px;
    width: 100%;
    display: inline-block;
    line-height: 20px;
}

.jumbo-2x-exception p {
    color: #000000;
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 2px;
}

.jumbo-2x-exception button {
    background: blue;
    border-radius: 50px;
    color: #ffff;
    padding: 6px 15px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
}
/**********************************/
.h40 {
    height:40px !important;
}
.w-315 {
    width: 315px !important;
}
.txt-cntr {
    text-align: center;
}
.team-highlight {
    outline: 3px solid blue;
}
.team {
	background-color:#ffffff;
	border: 1px solid #cb848b;
	height:375px;
	width:490px;
}
.team tr {
	border: 1px solid #bbbbbb;
	background-color:#ccd4d7;
	height:16px;
}
.team tr.white {
	background-color:#FFF;
}
.team td {
	border: 1px solid #cb848b;
	color:#FFF;
	text-shadow:1px 1px #ee2f2b;
	text-align:center;
}
.teamhead {
	background-color:#ffffff;
	border: 1px solid #bbbbbb;
	height:31px;
	width:490px;
}
.teamhead tr {
	border: 1px solid #bbbbbb;
	background-color:#ffffff;
	height:16px;
}
.teamhead tr.white {
	background-color:#FFF;
}
.teamhead td {
	border: 1px solid #bbbbbb;
	color:#bababa;
	text-align:center;
	font-size:10px;
}
.content-in h1 {
	font-family: 'helveticaneuemedium';
	font-size:14px;
	color:#292929;
	margin-bottom:0;
	padding-left:5px;
	padding-top:4px;
}
.content-in h2 {
	font-family: 'helvetica_neueregular';
	font-size:16px !important;
	color:#292929;
	margin-bottom:0;
	margin-top:0;
}
ul.sport {
	margin:0;
	padding:0;
	list-style:none;
	display: inline-block;
	width: 100%;
}
ul.sport li {
	color:#c52d21;
	font-size:13px;
	font-family: 'helveticaneuemedium';
	width:100%;
	float:left;
	padding:2px 0;
}
ul.sport li .black {
	font-size:14px;
	line-height:21px;
}
ul.sportin {
	padding:0;
}
ul.sportin li {
	margin-left:18px;
	/*margin-top:20px;float:left;*/
	font-size:14px;
	line-height:20px;
	padding-left:4px;

	list-style:disc;
	list-style-position: outside;
}
h3 {
	color:#c52d21;
	font-family: 'helveticaneuemedium';
	font-size:14px;
	margin:0;
}
h4 {
	color:#186882;
	font-family: 'helveticaneuemedium';
	font-size:14px;
	margin-bottom: 5px;
	margin-top:0px;
}
h5 {
	color:#2093b8;
	font-size:16px;
	margin-bottom: 5px;
	margin-top:16px;
	padding-left:31px;
}
hr {
	border-top:1px solid #cbd4d8;
	height:0;
	border-bottom:0;
	width:80%;
}

.content-left-bottom-in .draft-board{ height: 17px;}


.hun {
	width:100%;
	clear:both;
}
.content-in {
	/*width:265px;*/
/*	padding:25px;
	padding-left:6px;
	padding-right:6px;*/
	padding:0 6px 25px !important;
	margin-right:3px;
	margin-top:5px;
	margin:0;
	height:414px;
	/*background-color:#FFF;*/
	padding-top:0;
}
.brownbox {
	width:28px;
	height:28px;
	float:left;
	background-color:#ccd4d7;
	border:1px solid #000;
	margin-right:5px;
}
.whitebox {
	width:28px;
	height:28px;
	float:left;
	background-color:#ffffff;
	border:1px solid #000;
	margin-right:5px;
}
.bluebox {
	width:28px;
	height:28px;
	float:left;
	background-color:#2093b8;
	border:1px solid #000;
	margin-right:5px;
}
.lredbox {
	width:28px;
	height:28px;
	float:left;
	background-color:#f37c7a;
	border:1px solid #000;
	margin-right:5px;
}
.yellowbox {
	width:28px;
	height:28px;
	float:left;
	background-color:#f0e200;
	border:1px solid #000;
	margin-right:5px;
}
.blackbox {
	width:28px;
	height:28px;
	float:left;
	background-color:#000000;
	border:1px solid #000;
	margin-right:5px;
}
.outer-colorbox {
	float:left;
	padding:3px;
}
.color ul {
	margin:0;
	padding:0;
	list-style:none;
	margin-top:15px;
}
.color li {
	float:left;
	color:#000000;
	font-size:17px;
	line-height:30px;
	width:100%;
	margin-top:5px;
	font-family: 'helveticaneuemedium';
}
.choose-left {
	float:left;
	width:50%;
	height:20%;
}
.black {
	color:#000000;
}
.gradient {
	width:284px;
	float:left;
	border-top:1px solid #cbd4d8;
}
.gradient img {
	margin:-10px !important;
}
.beast {
	width:204px;
	height:45px;
	background-color:#282d34;
	-moz-box-shadow:    inset 0 0 10px #22262c;
	-webkit-box-shadow: inset 0 0 10px #22262c;
	box-shadow:         inset 0 0 10px #22262c;
	border-radius:5px;
	-moz-border-radius:5px;
	font-family: 'helvetica_neueregular';
	font-size:15px;
	color:#FFF;
	text-align:center !important;
	margin-bottom: 5px;
	margin-top: 5px;
	padding-left:6px !important;
	line-height:22px;
	border:0;
	resize :none;
	overflow: hidden;
}
.beast_height {
	height:65px !important;
}
.keeper {
	width:197px;
	height:30px;
	background-color:#282d34;
	-moz-box-shadow:    inset 0 0 10px #22262c;
	-webkit-box-shadow: inset 0 0 10px #22262c;
	box-shadow:         inset 0 0 10px #22262c;
	border-radius:5px;
	-moz-border-radius:5px;
	font-family: 'helvetica_neueregular';
	font-size:14px;
	color:#FFF;
	text-align:left;
	margin-bottom:10px;
	margin-top:0;
	padding-left:13px !important;
	line-height:30px;
	float:left;
}
.round {
	background:url(../images/round.png) no-repeat;
	width:16px;
	height:17px;
	float:left;
	margin:12px;
	margin-top:0;
}
.nu {
	font-family: 'helveticaneuemedium';
	font-size:14px;
	line-height:20px;
}
.close {
	width:35px;
	height:31px;
	float:right;
	margin-right: -35px;
    margin-top: -19px;
}
.close1 {margin-right: -36px;
    margin-top: -24px;}
.styledRadio, .styledCheckbox {
	display: inline-block;
}
label {
	margin-top:-1px !important;
	line-height:17px;
}
 [class^=slider] {
display: inline-block;
margin-bottom: 30px;
}
.output {
	float:left;
	width:23px;
	height:15px;
	padding:5px;
	padding-left:8px;
	padding-right:10px;
	padding-top:3px;
	background-color:#272b32;
	color: #ffffff;
	font-family: 'helveticaneuemedium';
	font-size: 14px;
	vertical-align: top;
	border-radius:5px;
	-moz-border-radius:5px;
	margin-top:-24px;
	margin-left:110px;
	margin-right:100px;
	text-align:center;
}
.leftn {
	float:left;
	color: #292929;
	font-family: 'helveticaneuemedium';
	font-size: 14px;
	padding-left:10px;
}
.rightn {
	float:right;
	color: #292929;
	font-family: 'helveticaneuemedium';
	font-size: 14px;
	padding-right:25px !important;
}
.groupcolor {
	width:285px;
	height:288px;
	margin-top:13px;
}
.twocolor {
	width:52px;
	height:26px;
	float:left;
	margin-left: 10px !important;
	margin-top: 3px !important;
	cursor:pointer;
	border: solid 1px #000 !important;
}
.twocolor.selected {
	border-color: rgba(0, 0, 255, 1) !important;
	box-shadow: 0px 0px 5px rgba(0, 0, 255, 1);
}
.main-color {
	width:26px;
	height:26px;
	float:left;
	/* border:1px solid #000000 !important; */
}
.red {
	background-color:#b10339;
}
.yellow {
	background-color:#ffc40d;
}
.blue {
	background-color:#002244;
}
.lightblue {
	background-color:#8c8b8a;
}
.black1 {
	background-color:#000000;
}
.orange {
	background-color:#fb4f14;
}
.skyblue {
	background-color:#006db0;
}
.green {
	background-color:#1e583d;
}
.white {
	background-color:#ffffff;
}
.leagueDataDiv {
	font-size:25px;
	color:#f3f3f3;
	text-shadow: -1px -1px 0 #f25a56,  1px -1px 0 #f25a56,  -1px 1px 0 #f25a56,  1px 1px 0 #f25a56;
	margin-left: 2px;
	/*z-index:20;*/
	/* position:absolute; */
}
.teamDataDiv {
	font-size:25px;
	color:#f3f3f3;
	text-shadow:-1px -1px 0 #f25a56,  1px -1px 0 #f25a56,  -1px 1px 0 #f25a56,  1px 1px 0 #f25a56;
	display:none;
	margin-top: 25px;
	margin-left: 28%;
	/*margin-top: -34px;*/
}
.topb {
	margin-top:-18px;
	margin-left:23px;
}
.topb1 {
	float: left;
    margin: 2px 6px;
}
.styledRadio { float: left;}
.topb2 {
	margin-top:-26px;
	margin-left:23px;
	margin-bottom:6px;
}
.topb3 {
	margin-top:-21px;
	margin-left:23px;
	float:left;
}
.but1 {
	float:left;
}
.but1main {
	float:right;
	margin-top:-19px;
	margin-bottom:12px;
	font-family: 'helveticaneuemedium';
	font-size:16px;
}
.topx {
	margin-top:-2px;
}
.bigg {
	color:#000;
	font-size:12px;
}
#refectButton.active {
	border-color: blue;
	-webkit-box-shadow: 0 0 5px blue;
	-moz-box-shadow: 0 0 5px blue;
	box-shadow: 0 0 5px blue;
}
.waterim {
	position:relative;
	/*left: 436px;*/
	float: right;
	bottom: 54px;
	right: 19px;
}

.view_waterim{
	right : 30px !important;
	bottom: 129px !important;
}
.rightinch_Medium {
	position:absolute;
	font-weight:bold;
	font-size:14px;
	font-family: 'helveticaneuemedium';
	right:-32px;
	top: 12px;
	display:inline-block;
}
.rightinch_Jumbo {
    position: absolute;
    font-weight: bold;
    font-size: 14px;
    font-family: 'helveticaneuemedium';
    right: -20px;
    top: 25px;
}
.rightinch_Elephant {
    position: absolute;
    font-weight: bold;
    font-size: 14px;
    font-family: 'helveticaneuemedium';
    right: -30px;
    top: 35px;
}
.bottominch_Medium {
	position:absolute;
	font-weight:bold;
	font-size:14px;
	font-family: 'helveticaneuemedium';
	left:60px;
	top: 42px;
}
.bottominch_Jumbo {
    position: absolute;
    font-weight: bold;
    font-size: 14px;
    font-family: 'helveticaneuemedium';
    right: 80px;
    top: 65px;
}
.bottominch_Elephant {
    position: absolute;
    font-weight: bold;
    font-size: 14px;
    font-family: 'helveticaneuemedium';
    right: 80px;
    top: 82px;
}
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.easy-accordion dt {
	margin-left:-210px;
	margin-top:210px;
}
.draft-board {
	font-size:14px;
	letter-spacing:-0.7px;
}
/*.topb1 {
	margin-top: -17px;
	margin-left: 23px;
}*/
}
.upload {
	/*background:url(../images/browse.png) no-repeat !important;*/
	height: 33px;
	cursor:pointer;
	cursor:hand;
	clear:both;
}
div.upload input {
	display: block !important;
	opacity: 0 !important;
	cursor:pointer;
	cursor:hand;
}
.plusFontBtn {
	/*background:url(../images/plus.png) no-repeat;*/
	width:30px;
	height: 30px;
	border:none;
	cursor:pointer;
	font-size: 15px;
  color: #FFF;
  text-align: center;
	cursor:hand;
	border-radius: 3px;
	background: -moz-linear-gradient(top, #0066ff 0%, #0066ff 44%, #0066ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#0066ff), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* IE10+ */
	background: linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */	
	-webkit-transition: all 0.3s linear;
     -khtml-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}
.maxFontBtn {
	/*background:url(../images/max.png) no-repeat;*/
	width:35px;
	height: 30px;
	border:none;
	cursor:pointer;
	cursor:hand;
	font-size: 15px;
  color: #FFF;
  text-align: center;
	border-radius: 3px;
	background: -moz-linear-gradient(top, #0066ff 0%, #0066ff 44%, #0066ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#0066ff), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* IE10+ */
	background: linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */	
	-webkit-transition: all 0.3s linear;
     -khtml-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}
.minFontBtn {
	/*background:url(../images/minus.png) no-repeat;*/
	width:30px;
	height: 30px;
	border:none;
	cursor:pointer;
	font-size: 15px;
 	color: #FFF;
 	text-align: center;
	border-radius: 3px;
	background: -moz-linear-gradient(top, #0066ff 0%, #0066ff 44%, #0066ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#0066ff), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* IE10+ */
	background: linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */	
	-webkit-transition: all 0.3s linear;
     -khtml-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}
.eqFontBtn {
	background:url(../images/equal.png) no-repeat;
	width:21px;
	border:none;
	cursor:pointer;
}
.fontAdjustmentBtn {
	margin-top: -20px;
	margin-left: 142px;
}
#overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	display:none;
	z-index:1002;
}
#tablePreview {
	margin-top : 15px;
}
/* styles by TCP */
#viewTable {
	border:2px solid #ccc;
	-moz-box-shadow:0 6px 6px #7D7D7D;
	-webkit-box-shadow:0 6px 6px #7D7D7D;
	box-shadow: 0 6px 6px #7D7D7D;
	margin: 125px auto; /*20px auto;*/
	/*padding:0 18px 0 4px;*/
}
.content-left .table1 {
	width:546px;
	margin:0 0 0 3px;
}
#colorPairText {
	padding: 0;
	font-size: 12px;
	text-align: center;
}
.outlineTextDiv {
	float:left;
	margin: 6px 0;
	width: 100%;
}
.outlineTextDiv h3 {
	margin-top:10px;
}
/* .minicolors-theme-default.minicolors {
	margin:7% 0;
	border:1px inset #DDDDDD !important;
} */
ul.sizeRadioButtonClass li {
	float:left;
	padding:2px 0;
}
.modifyRoundDiv .styledRadio {
	margin:8px 5px 0;
}
.accentContent, .colorSchemeCls, .personalizeClass {
	margin-top: 10px !important;
}
a img {
	border:none;
}
#teamCountDiv {
	float:left;
	display:inline-block;
	width: 100%;
}
#roundCountDiv {
	float:left;
	display:inline-block;
	width: 100%;
}
#oversizeNoticeDiv {
	background: red;
    height: 40px;
    text-align: center;
    display: inline-block;
    margin: 0 auto;
    margin-top: 20px;
    color: white;
    font-weight: bold;
    width: 100%;
    line-height: 40px;
    font-size: 1.5em;
}
#oversizeNoticeDesignDiv {
	color: red;
	font-weight: bold;
	font-size: 2.2em;
}
#oversizeNoticeDiv.folded, #oversizeNoticeDesignDiv.folded {
	display:none !important;
}
#shipsSeperateDiv {
	display: inline-block;
	color: red;
	font-size: 1em;
	text-align: center;
	width: 100%;
}
#shipsSeperateDesignDiv {
	color: red;
	font-size: 1.9em;
}
/* 18-03- 2014 */

.liteAccordion .brownbox, .liteAccordion .whitebox, .liteAccordion .lredbox, .liteAccordion .yellowbox, .liteAccordion .blackbox {
	border:1px solid #000000;
	margin-right: 5px;
}
#sizeimageSection {
	float:left;
}
#MediumImageDiv, #JumboImageDiv, #ElephantImageDiv {
	position:relative;
}
.team-label-img {position: relative;}
#teamCountDiv .leftn {
	padding-left:10px !important;
}
#teamCountDiv .rightn {
	padding-right:25px !important;
}
.accentContent hr {
	border-top:1px solid #CBD4D8 !important;
	margin:5px 0;
}
#fontAdjustmentBtn {
	float: left;
	margin: -29px 0 0 116px;
	width: 40%;
}
#uploadSection .styledCheckbox{ float:left; margin-right:4px;}
#uploadSection .radio{ margin:2px 1px 0;}
#enterTextDiv .radio .styledCheckbox{ margin-right:4px; float:left;}
.logoPositionClass .but1 .topb { margin-left:20px;}
#enterTextDiv .personalizeCheckBoxes{ float:left;}
#uploadSection{ float:left; width:95%;}
.upload .logoj{ border: 1px solid #8199B1 !important; float: right; font-size: 12px; margin: -24px 15px 0 !important; padding-left:5px;}
#enterTextDiv .radio{ margin:5px 1px 0;}
.logoPositionClass .but1 .logoPositionClass .topb{ margin:-20px 0 0 0 !important;}
#LogoCancelBtn, #LogoRotateBtn{ margin:0 0 0 5px;}
/* .minicolors-theme-default.minicolors .minicolors-swatch{ left:3px; top:1px;} */

 .liteAccordion.dark .slide > div {margin-left: -1px;}
 textarea
{
   resize: none;
}
#sizeimageSection{
	margin-left: 45px;
	margin-top: 5px;
	min-height: 83px;
}
#mainTable{
	margin-top: 5px;
}
.disabledDiv{
	color : #8a8a8a !important;
}
ul.OutlineSizeClass{
	margin-left:3px;
}

.bannerImg{
	position: absolute;
	right: 85px;
	display: none;
}

#teamColorText{
	font-size: 14px;
	position: absolute;
	top: 376px;
}

#teamColorSection{
	margin-left: 10px;
}

#teamCanvas , #leagueCanvas{
	background-color: white;
}

#teamCanvas {
	border: 1px solid black;

}
div#MediumImageDiv {
    margin-top: 30px;
}

div#customTextDiv div , div#reusableTextDiv div {
	color:red;
}

div.report-problem {
	background: url(../images/report-a-problem.png) no-repeat;
	width: 100px;
	height: 84px;
	float: right;
	position: relative;
	top: 72px;
	cursor : pointer;
}

.personalizeClass li.disabledDiv {
	width: 209px !important;
	/*background-color: #8a8a8a !important;*/
	margin-bottom: 4px;
}
#previewImage{
	height : auto;
}

.previewImageDiv{
	position : relative;
}

.togglePreviewSize{
	background: url(../images/draftbutton.png) no-repeat;
	width: 101px;
	height: 30px;
	font-size: 12px;
	color: #b2bfef;
	text-align: center;
	line-height: 30px;
	margin-bottom: 10px;
	cursor: pointer;
	float: left;
	margin-left: 4px;
	position: absolute;
	margin-top: -18px;
}

#uploadBtn{
	margin-top : 0px !important;
}
strong { font-weight: 900 !important;}

/*.preparing{
	background-color:#FFFFFF; border:1px solid #333; border-radius: 15px;-moz-border-radius: 15px;
	 -o-border-radius: 15px; -webkit-border-radius: 15px; -ms-border-radius: 15px; left: 45%; opacity: 1;
	 filter:alpha(opacity=100); padding: 15px; position: fixed;top: 45%;z-index: 1001; text-align:center;
}*/


.inner-basic {
    float: left;
    width: 100%;
}

.inner-basic > h1 {
    float: left;
}
.log-buttons {
    float: left !important;
    font-size: 11px;
    margin-left: 11px !important;
    padding-right: 0 !important;
    width: 203px;
}

.preparingadmin:before {z-index:50;content:'.'; display:block; position:fixed; top:0px; left:0px; width:100%; height:100%; }
.preparingadmin span {position:relative;z-index:69999999999;display:block;}

.preparingImg:before {z-index:50;content:'.'; display:block; position:fixed; top:0px; left:0px; width:100%; height:100%;}
.preparingImg span {position:relative; z-index:69999999999;display:block;}

.preparingLeagueImg:before {z-index:50;content:'.'; display:block; position:fixed; top:0px; left:0px; width:100%; height:100%;}
.preparingLeagueImg span {position:relative; z-index:69999999999;display:block;}

.preparing:before {
    z-index: 50;
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
}
.preparing span {position:relative;z-index:69999999999;display:block;}

.preparing1:before {z-index:50;content:'.'; display:block; position:fixed; top:0px; left:0px; width:100%; height:100%;}
.preparing1 span {position:relative;z-index:69999999999;display:block;}

/* Modern CSS Spinner */
.draft-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #e74c3c;
    border-top-color: #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

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

/* Stateful button styles for material, stand, finishing, and background mode options */
.material-option, .stand-option, .finishing-option {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.material-option:hover, .stand-option:hover, .finishing-option:hover:hover {
    opacity: 0.8;
}

.material-option.selected, .stand-option.selected, .finishing-option.selected.selected,
.material-option.active, .stand-option.active, .finishing-option.active.active {
    opacity: 1;
    font-weight: bold;
}

.material-option.disabled, .stand-option.disabled, .finishing-option.disabled.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Genie Button - Universal button styling for all genie interface buttons */
.genie-button {
    padding: 5px 10px;
    border: 2px solid #b3d9ff;
    background: #f0f8ff;
    color: #333;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
    text-transform: uppercase;
    width: 100%;
}

.genie-button:hover:not(.selected):not(.disabled):not(.active) {
    background: #d9ecff;
    border-color: #66b3ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,123,255,0.2);
}

.genie-button.selected,
.genie-button.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.genie-button.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}
#backgroundImageOptions .genie-button {
    padding: 5px 0;
    border: 2px solid #b3d9ff;
}
.black-btn {
    background: #373737;
    cursor: pointer;
    font-family: "helvetica_neueregular";
    font-size: 12px;
    text-align: center;
    width: auto;
    padding: 10px;
    color: #b2bfef;
    float: left;
    margin-right: 10px;
    -moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* future proofing */
	-khtml-border-radius: 5px; /* for old Konqueror browsers */
}

.inner-personalize {
	float: left;
}

.personalize {
	width: 115px;
	float: left;
}

.log-personalize {
	width: 140px;
	font-size: 14px;
	margin-left: 17px !important;
	text-align: right;
}

.pad10 {
	padding: 10px;
}

.reg-note {
	width: 270px;
	text-align: justify;
}

.reg-left-content {
	float: left;
}

.reg-right-content {
	float: left;
	margin-left: 20px;
}

.log-left-content {
	float: left;
}

.log-right-content {
	float: left;
	margin-left: 20px;
	width: 275px;
}

.bold-info {
	padding: 0px;
	margin: 0 0 10px;
	cursor: pointer;
}

.note-justify {
	text-align: justify;
}

.logout-div {
    float: right !important;
    text-align: right;
    width: 200px;
}

/*.social-sharing {
	text-align: center;
	height: 50px;
	margin-top: 10px;
	padding-top: 10px;
}*/

.social-sharing {
    background: #777 none repeat scroll 0 0;
    height: 100px;
    left: 0;
    margin: 0 auto;
    padding-top: 0px;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    width: auto;
}

.social-sharing p {
	color: white;
	font-size: 15px;
}

a.twitter-share-button,
a.twitter-mention-button,
a.twitter-hashtag-button {
  display: inline-block;
  padding: 1px 3px 0 19px;
  border: #ccc solid 1px;
  border-radius: 3px;
  background: #f8f8f8 url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNzIgNzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDcyIDcyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IHg9IjAiIGZpbGw9Im5vbmUiIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiIvPg0KPHBhdGggZmlsbD0iIzU1YWNlZSIgZD0iTTY4LjgxMiwxNS4xNDFjLTIuMzQ4LDEuMDM5LTQuODY5LDEuNzQzLTcuNTE5LDIuMDZjMi43MDMtMS42Miw0Ljc3OC00LjE4Nyw1Ljc1Ni03LjI0NGMtMi41MjksMS41LTUuMzMsMi41OTItOC4zMTMsMy4xNzYNCglDNTYuMzQ5LDEwLjU5MSw1Mi45NDgsOSw0OS4xODIsOWMtNy4yMjksMC0xMy4wOTIsNS44NjEtMTMuMDkyLDEzLjA5M2MwLDEuMDI2LDAuMTE4LDIuMDIxLDAuMzM4LDIuOTgxDQoJYy0xMC44ODUtMC41NDgtMjAuNTI4LTUuNzU3LTI2Ljk4Ny0xMy42NzljLTEuMTI2LDEuOTM2LTEuNzcxLDQuMTg0LTEuNzcxLDYuNTgxYzAsNC41NDIsMi4zMTIsOC41NTEsNS44MjQsMTAuODk4DQoJYy0yLjE0Ni0wLjA2OS00LjE2NS0wLjY1Ny01LjkzLTEuNjM4Yy0wLjAwMiwwLjA1NS0wLjAwMiwwLjExLTAuMDAyLDAuMTYyYzAsNi4zNDUsNC41MTMsMTEuNjM4LDEwLjUwNCwxMi44NA0KCWMtMS4xMDEsMC4yOTgtMi4yNTYsMC40NTctMy40NDksMC40NTdjLTAuODQ2LDAtMS42NjctMC4wNzgtMi40NjUtMC4yMzFjMS42NjcsNS4yLDYuNDk5LDguOTg2LDEyLjIzLDkuMDkNCgljLTQuNDgyLDMuNTEyLTEwLjEyOSw1LjYwNi0xNi4yNiw1LjYwNmMtMS4wNTUsMC0yLjA5Ni0wLjA2MS0zLjEyMi0wLjE4NGM1Ljc5NCwzLjcxNywxMi42NzYsNS44ODIsMjAuMDY3LDUuODgyDQoJYzI0LjA4MywwLDM3LjI1MS0xOS45NDksMzcuMjUxLTM3LjI0OWMwLTAuNTY2LTAuMDE0LTEuMTM0LTAuMDM5LTEuNjk0QzY0LjgzOCwyMC4wNjgsNjcuMDU4LDE3Ljc2NSw2OC44MTIsMTUuMTQxeiIvPg0KPC9zdmc+DQo=") 2px 3px no-repeat;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNzIgNzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDcyIDcyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IHg9IjAiIGZpbGw9Im5vbmUiIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiIvPg0KPHBhdGggZmlsbD0iIzU1YWNlZSIgZD0iTTY4LjgxMiwxNS4xNDFjLTIuMzQ4LDEuMDM5LTQuODY5LDEuNzQzLTcuNTE5LDIuMDZjMi43MDMtMS42Miw0Ljc3OC00LjE4Nyw1Ljc1Ni03LjI0NGMtMi41MjksMS41LTUuMzMsMi41OTItOC4zMTMsMy4xNzYNCglDNTYuMzQ5LDEwLjU5MSw1Mi45NDgsOSw0OS4xODIsOWMtNy4yMjksMC0xMy4wOTIsNS44NjEtMTMuMDkyLDEzLjA5M2MwLDEuMDI2LDAuMTE4LDIuMDIxLDAuMzM4LDIuOTgxDQoJYy0xMC44ODUtMC41NDgtMjAuNTI4LTUuNzU3LTI2Ljk4Ny0xMy42NzljLTEuMTI2LDEuOTM2LTEuNzcxLDQuMTg0LTEuNzcxLDYuNTgxYzAsNC41NDIsMi4zMTIsOC41NTEsNS44MjQsMTAuODk4DQoJYy0yLjE0Ni0wLjA2OS00LjE2NS0wLjY1Ny01LjkzLTEuNjM4Yy0wLjAwMiwwLjA1NS0wLjAwMiwwLjExLTAuMDAyLDAuMTYyYzAsNi4zNDUsNC41MTMsMTEuNjM4LDEwLjUwNCwxMi44NA0KCWMtMS4xMDEsMC4yOTgtMi4yNTYsMC40NTctMy40NDksMC40NTdjLTAuODQ2LDAtMS42NjctMC4wNzgtMi40NjUtMC4yMzFjMS42NjcsNS4yLDYuNDk5LDguOTg2LDEyLjIzLDkuMDkNCgljLTQuNDgyLDMuNTEyLTEwLjEyOSw1LjYwNi0xNi4yNiw1LjYwNmMtMS4wNTUsMC0yLjA5Ni0wLjA2MS0zLjEyMi0wLjE4NGM1Ljc5NCwzLjcxNywxMi42NzYsNS44ODIsMjAuMDY3LDUuODgyDQoJYzI0LjA4MywwLDM3LjI1MS0xOS45NDksMzcuMjUxLTM3LjI0OWMwLTAuNTY2LTAuMDE0LTEuMTM0LTAuMDM5LTEuNjk0QzY0LjgzOCwyMC4wNjgsNjcuMDU4LDE3Ljc2NSw2OC44MTIsMTUuMTQxeiIvPg0KPC9zdmc+DQo=") 2px 3px no-repeat,
              -webkit-linear-gradient(#fff, #dedede);
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNzIgNzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDcyIDcyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IHg9IjAiIGZpbGw9Im5vbmUiIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiIvPg0KPHBhdGggZmlsbD0iIzU1YWNlZSIgZD0iTTY4LjgxMiwxNS4xNDFjLTIuMzQ4LDEuMDM5LTQuODY5LDEuNzQzLTcuNTE5LDIuMDZjMi43MDMtMS42Miw0Ljc3OC00LjE4Nyw1Ljc1Ni03LjI0NGMtMi41MjksMS41LTUuMzMsMi41OTItOC4zMTMsMy4xNzYNCglDNTYuMzQ5LDEwLjU5MSw1Mi45NDgsOSw0OS4xODIsOWMtNy4yMjksMC0xMy4wOTIsNS44NjEtMTMuMDkyLDEzLjA5M2MwLDEuMDI2LDAuMTE4LDIuMDIxLDAuMzM4LDIuOTgxDQoJYy0xMC44ODUtMC41NDgtMjAuNTI4LTUuNzU3LTI2Ljk4Ny0xMy42NzljLTEuMTI2LDEuOTM2LTEuNzcxLDQuMTg0LTEuNzcxLDYuNTgxYzAsNC41NDIsMi4zMTIsOC41NTEsNS44MjQsMTAuODk4DQoJYy0yLjE0Ni0wLjA2OS00LjE2NS0wLjY1Ny01LjkzLTEuNjM4Yy0wLjAwMiwwLjA1NS0wLjAwMiwwLjExLTAuMDAyLDAuMTYyYzAsNi4zNDUsNC41MTMsMTEuNjM4LDEwLjUwNCwxMi44NA0KCWMtMS4xMDEsMC4yOTgtMi4yNTYsMC40NTctMy40NDksMC40NTdjLTAuODQ2LDAtMS42NjctMC4wNzgtMi40NjUtMC4yMzFjMS42NjcsNS4yLDYuNDk5LDguOTg2LDEyLjIzLDkuMDkNCgljLTQuNDgyLDMuNTEyLTEwLjEyOSw1LjYwNi0xNi4yNiw1LjYwNmMtMS4wNTUsMC0yLjA5Ni0wLjA2MS0zLjEyMi0wLjE4NGM1Ljc5NCwzLjcxNywxMi42NzYsNS44ODIsMjAuMDY3LDUuODgyDQoJYzI0LjA4MywwLDM3LjI1MS0xOS45NDksMzcuMjUxLTM3LjI0OWMwLTAuNTY2LTAuMDE0LTEuMTM0LTAuMDM5LTEuNjk0QzY0LjgzOCwyMC4wNjgsNjcuMDU4LDE3Ljc2NSw2OC44MTIsMTUuMTQxeiIvPg0KPC9zdmc+DQo=") 2px 3px no-repeat,
              linear-gradient(#fff, #dedede);
  background-size: 16px 13px, auto auto;

  /* Text */
    font: bold 11px/17px Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #333;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  white-space: nowrap;
}

/* Color Highlight for keyboard navigation */
a.twitter-share-button:focus,
a.twitter-mention-button:focus,
a.twitter-hashtag-button:focus {
  outline: none;
  border-color: #0089cb;
}

a.twitter-clone-button {
  display: inline-block;
  padding: 1px 5px 0 5px;
  border: #ccc solid 1px;
  border-radius: 3px;
  background: #f8f8f8;
  background: -webkit-linear-gradient(#fff, #dedede);
  background: linear-gradient(#fff, #dedede);

  /* Text */
    font: bold 11px/17px Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #333;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  white-space: nowrap;
}

a.twitter-clone-button:focus {
  outline: none;
  border-color: #0089cb;
}
.selectStyle{
	padding: 5px !important;
	width: 96% !important;
	border: 1px solid #0066ff !important;
	/*border-bottom: 1px solid #3028db !important;*/
	background-color: #fff !important;
}
.selectSizeCover, .selectSizeImgSample{
	margin-bottom: 10px !important;
}
#cpDiv2{
	  float: left;
	  /*margin-top: -10px;*/
	  margin-left: 30px;
	  /*position: relative;*/
}
#cpDiv2 .ui-widget-content{
	background: none;
	border: none;
}


.demoPanel{
	position: absolute;
  	top: 190px;
}
.choose-left1{
	float: left;
	width: 100%;
}
/* Play button styles */
@media (max-width: 767px){
	input.button{
		width: auto;
		background: #0066ff ! important;
		color: #ffffff;
		cursor: pointer;
		float: left;
		font-size: 14px;
		height: 33px !important;
		line-height: 33px;
		margin-bottom: 7px;
		margin-right: 4px;
		margin-top: 23px;
		text-align: center;
	}
}
@media (min-width: 992px){
	.playbtn:hover , .playPlus:hover,.reset-new:hover ,.submit-new:hover, .reusable-new:hover ,.ok-new:hover,.upgrade-new:hover,.input.button:hover,.button:hover,.upload-new:hover,.pdf-new:hover{
		-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
	     -khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
	       -moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
	         -o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
	            box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
	}
} 

.playbtn:active , .playPlus:active, .reset-new:active ,.submit-new:active ,.reusable-new:active,.ok-new:active,.upgrade-new:active,.input.button:active,.button:active,.upload:active,.pdf-new:active{
	-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
     -khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
       -moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
         -o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
            box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
/*.playbtn:active , .playPlus:active, .reset-new:active ,.submit-new:active ,.reusable-new:active,.ok-new:active,.upgrade-new:active,.input.button:active,.button:active,.upload:active,.pdf-new:active{
    -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
     -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
       -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
         -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
    text-shadow:1px 1px 1px #eee;
}*/

.playbtn{
	border-radius: 5px;
	 width: 48%;
  height: 40px;
  font-size: 12px;
  color: #FFF;
  text-align: center;
  line-height: 41px;
  margin-bottom: 10px;
  cursor: pointer;
  float: left;
	 background: #0066ff;
  background: -moz-linear-gradient(top, #0066ff 0%, #0066ff 44%, #0066ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#0066ff), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* IE10+ */
	background: linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */	
	-webkit-transition: all 0.3s linear;
     -khtml-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}
.est-cost{
	font-size: 24px;
  	color: #000000;
}
.reset-new{
	  border-radius: 5px;
  width: 48%;
  height: 40px;
  font-size: 12px;
  color: #FFF;
  text-align: center;
  line-height: 41px;
  margin-bottom: 10px;
  cursor: pointer;
  float: right;
  background: #0066ff;
  background: -moz-linear-gradient(top, #0066ff 0%, #0066ff 44%, #0066ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#0066ff), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* IE10+ */
	background: linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */	
	-webkit-transition: all 0.3s linear;
     -khtml-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}
.pdf-new{
  border-radius: 5px;
  width: 101px;
  height: 33px;
  font-size: 12px;
  color: #FFF;
  text-align: center;
  line-height: 33px;
  margin-bottom: 10px;
  cursor: pointer;
  margin-right: 36px;
  background: #0066ff;
  margin-top: 6px;
  background: -moz-linear-gradient(top, #0066ff 0%, #0066ff 44%, #0066ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#0066ff), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* IE10+ */
	background: linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */	
	-webkit-transition: all 0.3s linear;
     -khtml-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}


.submit-new{
  border-radius: 5px;
  height: 50px;
  font-size: 12px;
  color: #FFF;
  text-align: center;
  line-height: 50px;
  margin-bottom: 10px;
  cursor: pointer;
  background: #0066ff;
  background: -moz-linear-gradient(top, #0066ff 0%, #0066ff 44%, #0066ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#0066ff), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* IE10+ */
	background: linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */	
	-webkit-transition: all 0.3s linear;
     -khtml-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}
.reusable-new{
	border-radius: 5px;
  width: 276px;
  height: 33px;
  font-size: 12px;
  color: #FFF;
  text-align: center;
  line-height: 33px;
  cursor: pointer;
  background: #0066ff;
  background: -moz-linear-gradient(top, #0066ff 0%, #0066ff 44%, #0066ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#0066ff), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* IE10+ */
	background: linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */	
	-webkit-transition: all 0.3s linear;
     -khtml-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}
.ok-new{
border-radius: 5px;
  width: 101px;
  height: 33px;
  font-size: 12px;
  color: #FFF;
  text-align: center;
  line-height: 33px;
  cursor: pointer;
  background: #0066ff;
  margin-left: 76px !important;
  margin-top: 10px !important;
  float: left;
  background: -moz-linear-gradient(top, #0066ff 0%, #0066ff 44%, #0066ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#0066ff), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* IE10+ */
	background: linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */	
	-webkit-transition: all 0.3s linear;
     -khtml-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}
 
.upgrade-new{
	border-radius: 5px;
  width: 196px;
  height: 33px;
  font-size: 12px;
  color: #FFF;
  text-align: center;
  line-height: 33px;
  cursor: pointer;
  background: #0066ff;
  position: absolute;
  bottom: 26px;
  background: -moz-linear-gradient(top, #0066ff 0%, #0066ff 44%, #0066ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#0066ff), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* IE10+ */
	background: linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */	
	-webkit-transition: all 0.3s linear;
     -khtml-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}
.upload-new{
  border-radius: 5px;
  width: 100px;
  height: 33px;
  font-size: 15px;
  color: #FFF;
  text-align: center;
  line-height: 33px;
  cursor: pointer !important;
  background: #0066ff;
  position: absolute;
  background: -moz-linear-gradient(top, #0066ff 0%, #0066ff 44%, #0066ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#0066ff), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* IE10+ */
	background: linear-gradient(top, #0066ff 0%,#0066ff 44%,#0066ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */	
	-webkit-transition: all 0.3s linear;
     -khtml-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}

.productTabCustom , .productTabReuse {
	color: #0066ff !important;
}


/* Color Scheme Required Overlay */
.color-scheme-required-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(201, 201, 201, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.color-scheme-required-overlay:hover {
    background: rgba(128, 128, 128, 0.7);
}

.color-scheme-required-text {
    /* background: rgba(255, 255, 255, 0.95); */
    background: #f0f8ff;
    padding: 12px 20px !important;
    border-radius: 6px;
    font-weight: bold;
    color: #333;
	border: 2px solid #b3d9ff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    text-align: center;
}

.color-scheme-required-text-small {
    display: block;
    font-size: 11px;
    font-weight: normal;
    margin-top: 4px;
    color: #666;
	line-height: .9em;
}

.color-scheme-required-overlay:hover .color-scheme-required-text {
    opacity: 1;
}

.color-scheme-overlay-parent {
    position: relative;
}

/* Toast Notification System */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #ff6b6b;
    color: white;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    font-size: 18px;
    font-weight: 500;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    max-width: 500px;
    animation: slideInRight 0.3s ease-out;
}

.toast-notification.success {
    background: #51cf66;
}

.toast-notification.info {
    background: #339af0;
}

.toast-notification.warning {
    background: #ff922b;
}

.toast-notification-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.toast-notification-content {
    flex: 1;
}

.toast-notification-close {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.toast-notification-close:hover {
    opacity: 1;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

@keyframes colorSchemeStrobe {
    0% {
        background-color: #007bff;
        box-shadow: none;
    }
    50% {
        background-color: #deffda;
        box-shadow: 0 0 20px rgba(222, 255, 218, 0.6);
    }
    100% {
        background-color: #007bff;
        box-shadow: none;
    }
}

.color-scheme-btn.strobe {
    animation: colorSchemeStrobe 3s ease-in-out 1;
}

/* =========================================
   GENIE PREVIEW MODAL STYLES
   ========================================= */

#genie-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#genie-preview-modal {
    background: #fff;
    border-radius: 8px;
    max-width: 600px;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 25px rgba(0,0,0,0.5);
    position: relative;
}

#genie-preview-modal .genie-modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ff9100;
}

#genie-preview-modal .genie-modal-header h2 {
    margin: 0;
    font-size: 18px;
    color: #fff;
}

#genie-preview-modal .genie-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #666;
    cursor: pointer;
}

#genie-preview-modal .genie-modal-body {
    padding: 15px;
    overflow: auto;
    background: #e9ecef;
    position: relative;
}

#genie-preview-modal .genie-modal-body img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
	margin: 0 auto;
}

#genie-preview-modal .genie-modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #fff;
}
#genie-preview-modal .genie-modal-footer-message {
	text-align: center;
	font-size: 16px;
}

#genie-preview-modal .btn-submit {
    padding: 10px 20px;
    background: #28a745;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
}

#genie-preview-modal .btn-cancel {
    padding: 10px 20px;
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Sticker Sheet Download Button */
#genie-preview-modal .sticker-sheet-download-btn {
    display: block;
    margin: 16px auto 0;
    padding: 10px 24px;
    background-color: #2a6e2a;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    max-width: 280px;
    transition: background-color 0.15s;
}
#genie-preview-modal .sticker-sheet-download-btn:hover {
    background-color: #1f521f;
    color: #fff;
}

/* Sticker Preview Grid (inside hi-res preview modal) */
#genie-preview-modal .sticker-preview-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    width: 100%;
}

#genie-preview-modal .sticker-preview-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 0 0 14px 0;
    text-align: center;
}

#genie-preview-modal .sticker-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

#genie-preview-modal .sticker-preview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#genie-preview-modal .sticker-preview-item img {
    width: 215px;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    object-fit: contain;
}

#genie-preview-modal .sticker-preview-label {
    font-size: 11px;
    color: #666;
    text-align: center;
}


/* ── Genie Preview Modal — responsive ─────────────────────────────────── */
@media (max-width: 768px) {
    #genie-preview-modal {
        width: 100%;
        max-width: 100%;
        max-height: 95vh;
        border-radius: 0;
    }
    #genie-preview-modal .genie-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }
    #genie-preview-modal .genie-modal-footer-message {
        font-size: 13px;
        line-height: 1.5;
    }
    #genie-preview-modal .btn-submit,
    #genie-preview-modal .btn-cancel {
        width: 100%;
        text-align: center;
    }
    #genie-preview-modal .sticker-preview-item img {
        width: 80px;
    }
}

/* =========================================
   TERMS AND CONDITIONS MODAL STYLES
   ========================================= */

#genie-terms-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10020;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#genie-terms-modal {
    background: #fff;
    border-radius: 8px;
    width: 560px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 25px rgba(0,0,0,0.5);
}

#genie-terms-modal .genie-modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ff9100;
    flex-shrink: 0;
}

#genie-terms-modal .genie-modal-header h2 {
    margin: 0;
    font-size: 18px;
    color: #fff;
}

#genie-terms-modal .genie-terms-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    background: #fff;
    border: 1px solid #ddd;
    margin: 15px;
    border-radius: 4px;
    min-height: 200px;
    max-height: 400px;
}

#genie-terms-modal .genie-modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #fff;
    flex-shrink: 0;
}

#genie-terms-modal .btn-agree {
    padding: 10px 24px;
    background: #28a745;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
}

#genie-terms-modal .btn-agree:hover {
    background: #218838;
}

#genie-terms-modal .btn-decline {
    padding: 10px 20px;
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#genie-terms-modal .btn-decline:hover {
    background: #5a6268;
}

@media (max-width: 768px) {
    #genie-terms-modal {
        width: 100%;
        max-width: 100%;
        max-height: 95vh;
        border-radius: 0;
    }
    #genie-terms-modal .genie-terms-body {
        margin: 10px;
    }
    #genie-terms-modal .genie-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }
    #genie-terms-modal .btn-agree,
    #genie-terms-modal .btn-decline {
        width: 100%;
        text-align: center;
    }
}