_html, body, p, form, table, td, tr, select {
    font-family: arial, helvetica, Sans-Serif;
    font-size: 13px;
}

body {
padding:0;
margin:0;
background-color: #f1f1f1;
}

/* (removed the old prefers-color-scheme block that fought the toggle) */

form {
margin: 0;
padding: 0;
}

.small_text {
font-size: 10px;
}

.ad_title {
	color: #2B4A9F;
	font-size: 13px;
	font-weight: bold;
	padding-bottom: 5px;

}

div.empty_clear_floats {
	clear: both; 
	height: 1px; 
	margin-top: -1px; 
	font-size: 1px; 
	overflow: hidden;
}

div.mvp_grid_panel_title {
	/*word-wrap: break-word;*/
	margin: 0;
	text-align: center;
}

div.mvp_grid_panel_title a, div.mvp_grid_panel_commands a {
	text-decoration: none
}

div.mvp_grid_panel_details, div.mvp_grid_panel_commands {
	font-size: 10px;
	color: #666;
}

div.mvp_item_details {
	color: #666; 
	font-size: 90%
}

div#border {
width: auto;
height: 100%;
margin-left: auto;
margin-right: auto;

background-color: #FFF;	
border:1px solid #CCC;
text-align: left;
}

div.nav_right  {
	float: left;
	padding: 1px;
	background: transparent;
	border-left: 3px solid #CCC;
	padding-bottom: 5px;
}

div.nav_left  {
	float: left;
	padding: 1px;
	background: transparent;
	border-right: 3px solid #CCC;
	padding-bottom: 5px;
}

div.container  {
	background-color: #f1f1f1;
	margin: 0px auto;
	width:100%;
	border-bottom: 1px solid #CCC;
}

div.container2  {
	background-color: #595959;
	padding-top:8px;
	padding-bottom:8px;
	width:auto;
}

div.container3  {
	background-color: #f1f1f1;
	border:1px solid #CCC;
	padding:8px;
}

.loggedOutLogin
{
  float: left;
  width: 223px;
  border: 1px solid #CCCCCC;
  margin-bottom: 10px;
  display: inline;
}

h3 {
	margin: 0;
	font-family: arial, helvetica, Sans-Serif;
	font-size: 12px;
}

h2 {
	margin: 0;
	font-family: helvetica, arial, Sans-Serif;
	font-size: 14px;
}

.mytitle {
	font-family: helvetica, arial, Sans-Serif;
	font-size: 14px;
	font-weight:bold;

}

div#padding {
padding: 1em;
}

div#content {
background-color: #f1f1f1;
width: auto;
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
}

div#header {
width: 900px;
margin: 0;
}

div#logo {
float: left;
}

span#logopt1, span#logopt2 {
font-family: Arial;
font-size: 30pt;
font-weight: bold;
}
	
span#logopt1 { color: #666; }	
span#logopt2 { color: #99CCFF; }
	
span#logosub {
font-family: Arial;
font-size: 9pt;
color: #999;
}

div#search {
margin-top: 1em;
float: right;
}

input#searchfield {
padding: .2em;
font-family: Arial;
font-size: 11pt;
font-weight: bold;
color: #666;
border: 1px solid #CCC;
}

input#searchbutton {
padding: .2em .5em;
font-family: Arial;
font-size: 11pt;
background-color: #FFF;
color: #999;
border: 0;
}

input#searchbutton:hover {
color: #666;
}

div#search-content {
width: 99%;
margin: 0;
padding: 0;
}

div#search-header {
padding: 5px 10px;
}

div#matches {
font-size: 12pt;
font-weight: bold;
padding-bottom:5px;
}

span#matches {
float: left;
font-size: 15pt;
color: #333;
}

span#pages {
float: right;
font-size: 9pt;
font-weight: bold;
/* color: #333; */
}

a#current {
color: #333;
}

div#search-results {
padding: 10px;
}

div.vidresult {
width: 99%;
float: left;
margin-bottom: 1em;
padding: 5px;
border: 1px solid #CCC;
}

div.vidthumbnail {
float: left;
border: 1px solid #CCCCCC;
padding: 3px;
}

div.viddetails_home {
float: left;
width: auto;
margin-top:0;
}

div.viddetails {
float: left;
width: 1020px;
margin: 0.5em;
margin-top:0;
}

span.title {
font-size: 11pt;
font-weight: bold;
color: #333; 
}

span.remove {
font-size: 11pt;
font-weight: bold;
color: #333;
position:absolute;
z-index: 1;
right: 0;
}

span.watched {
font-size: 11pt;
font-weight: bold;
color: red; 
}

span.queue {
font-size: 11pt;
font-weight: bold;
color: green; 
}

span.collected {
font-size: 10pt;
font-weight: bold;
color: #019C05; 
}

span.sub_links {
font-size: 9pt;
font-weight: normal;
}

span.time {
font-size: 10pt;
color: #666;
}

span.postdate {
font-size: 8pt;
color: #999;
}

span.home-header {
font-size: 12pt;
font-weight: bold;
color: #0d0d0d;
}

span.home-sub {
	color: #2B4A9F;
	font-size: 14px;
	font-weight: bold;
}

span.description {
font-size: 9pt;
color: #333;
}

span.tags {
font-size: 9pt;
text-decoration: none;
color: #666;
}

.tags a { text-decoration: none; }
.tags a:link { color: #666; }
.tags a:visited { color: #666; }
.tags a:hover { color: #333; text-decoration: underline; }
.tags a:active { color: #666; }

.clearboth { clear: both; }

.title a:link { color: #2B4A9F; }
.title a:visited { color: #2B4A9F; }
.title a:active { color: #2B4A9F; }
.title a:hover { color: #2B4A9F; }

.sub_links a:link { color: #9999FF; }
.sub_links a:visited { color: #9999FF; }
.sub_links a:active { color: #9999FF; }
.sub_links a:hover { color: #9999FF; }

.subtitle a:link { color: #666; }
.subtitle a:visited { color: #666; }
.subtitle a:active { color: #666; }
.subtitle a:hover { color: #333; }

a { 
	text-decoration:none;
	color: #0000FF;
}

a:hover { text-decoration:underline; }

.mybutton
{
	border: 3px double #999999;
	border-top-color: #CCCCCC;
	border-left-color: #CCCCCC;
	background-color: #FFFFFF;
	background-image: url('/graphics/button-bg.gif');
	background-repeat: repeat-x;
	color: #333333;
	font-size: 90%;
	font-weight: bold;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	padding: .25em;
    width: 0;  /* IE table-cell margin fix */
	overflow: visible;
	margin: 3px;
}

.mybutton[class] {  /* IE ignores [class] */
    width: auto;  /* cancel margin fix for other browsers */
}

#thumbnail-container {
	/* #thumbnail-container contains the entire list of all collections or the entire list of all albums, as appropriate */
	margin: 0 0 0 0;
	padding: 0;
}

ul.slides {
	/* ul.slides controls the unordered list of the thumbnails of images within an album */
	margin: 5px 0 0 0;
	padding: 0;
	/*border: 1px solid #bed2d2;*/
}
ul.slides li {
	/* ul.slides li controls each list item within the unordered list of the thumbnails of images within an album */
	/* width is calculated by PHP in the HTML, style is applied inline */
	float: left;
	margin: 0 0 0 0px;
	padding: 5px;
	display: inline;
	text-align: center;
	border: 0px solid #CCC;
}
ul.slides li img {
	/* ul.slides li img controls the thumbnail image itself */
	/*border: 1px solid #01B4E2; */
	/*border: 1px solid #2B4A9F; */
	background: #fff;
	padding: 1px;
}

ul.slides li img:hover {
	/* ul.slides li img:hover controls the thumbnail image hover behavior */
	background: #eaeae0;
	/*border: 1px solid #ff6600;*/
	border: 1px solid #66CC33;
}

ul.slides li.embed_video {
	/* ul.slides li controls each list item within the unordered list of the thumbnails of images within an album */
	/* width is calculated by PHP in the HTML, style is applied inline */
	float: left;
	margin: 0 0 0 0px;
	padding: 5px;
	display: inline;
	text-align: center;
	height: 255px;
	border: 0px solid #CCC;
}

.clearfix:after {
	clear: both;
	display: block;
	content: ".";
	height: 0;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
/* End hide from IE-mac */

div.pagination {
	padding: 3px;
	margin: 3px;
}

div.pagination a {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #AAAADD;
	
	text-decoration: none; /* no underline */
	color: #000099;
}
div.pagination a:hover, div.pagination a:active {
	border: 1px solid #000099;
	color: #000;
}
div.pagination span.current {
	padding: 2px 5px 2px 5px;
	margin: 2px;
		border: 1px solid #000099;
		font-weight: bold;
		background-color: #000099;
		color: #FFF;
	}
	div.pagination span.disabled {
		padding: 2px 5px 2px 5px;
		margin: 2px;
		border: 1px solid #EEE;
						
		color: #DDD;
	}

div.vid_nav {
	font-size: 38px;
}

div.vid_nav_disable {
	font-size: 38px;
	color: #DDD;
}

div.video_nav {
	height: 111px;
}

div.vid_nav a {
	text-decoration: none; /* no underline */
}

#infobox  {
	float: left;
	padding: 0px; 
	width: auto;
}

#infobox_profile  {
float: left;
padding: 5px; 
background: transparent;
background-color: #66CC33;
width: 450px;
}

#infobox_profile h2 {
	color: #FFF;
	margin: 0px;
	text-decoration: none;
}

div.myv_title {
	color: #2B4A9F;
	font-size: 18px;
	font-weight: bold;
	}

#infobox h2 {
	color: #2B4A9F;
	font-size: 14px;
	border-left: 2px solid #CCC;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-bottom: 0px;
	text-align: left;
	padding-left: 5px;
	/* background: url(/images/featurebox_h.png) #F5F5F5 repeat-x; */
}

#infobox2  {
float: left;
padding: 5px;
background: transparent;
background-color: #66CC33;
width: 99%;
}

#infobox2 h2 {
	color: #FFF;
}

#infobox3  {
float: left;
padding: 5px; 
background: transparent;
background-color: #66CC33;
width: 99%;
}

#infobox3 h2 {
	color: #FFF;
}

div.btn_right {
display: block;
float: right;
}

div.featured  {
float: left;
padding-top: 0px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
border-left: 2px solid #CCC;
}

div.posted_video  {
float: left;
width: 99%;
padding: 5px;
padding-bottom: 10px;

border: 1px solid #2B4A9F;
}

div.sub_video  {
float: left;
width: 95%;
padding: 5px;
border: 1px solid #2B4A9F;
}

div.shared_video  {
padding-top: 10px;
padding-bottom: 5px;
margin-right: 5px;
border-bottom: 1px solid #CCC;
}

div.details  {
/*float: left; */
/*margin-bottom: 1em; */
padding: 5px;

border: 1px solid #CCC;
}

div.details3  {
/*float: left; */
/*margin-bottom: 1em; */
padding: 0px;
}

div.search_box {
padding: 5px;
width:375px;
/*background-color: #ADDFFF;
background-color: #6698FF; */
border: 1px solid #CCC;
}

div.details2  {
margin: 0px;
padding: 5px;
background-color: #e0e0e0;
border: 1px solid #808080;
font-family: arial, helvetica, Sans-Serif;
font-size: 12px;
text-align: left;
width:290px;
}

div.details_video  {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 5px;
border-left: 2px solid #CCC;
text-align: left;
}

div.details_ads  {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 5px;
border-left: 2px solid #CCC;
text-align: center;
}

div.details_header_prototype  {
padding: 5px;
border-top: 1px solid #2B4A9F;
background-color: #ebf4fb;
}

div.details_header  {
padding-bottom: 5px;
border-bottom: 1px solid #ccc;
}

div.footer {
width: 100%;
float: left;
padding-top: 5px;
border-top: 1px solid #CCC;
}

#navlist
{
    border-bottom: 1px solid #CCC;
    margin: 0;
    padding-bottom: 19px;
    padding-left: 110px;
    margin-top: 10px;
	font-size: 14px;
}

#navlist ul, #navlist li
{
    display:         inline;
    list-style-type: none;
    margin:          0;
    padding:         0;
}

#navlist a:link, #navlist a:visited
{
    background: #E8EBF0;
    border: 1px solid #CCC;
    color:  #666;
    float:  left;
    font-weight: normal;
    line-height: 14px;
    margin-right: 8px;
    padding: 2px 10px 2px 10px;
    text-decoration: none;
}

#navlist a:link#current, #navlist a:visited#current
{

    background:    #fff;
    border-bottom: 1px solid #fff;
    color:         #000;
	
}

#navlist a:hover
{
	
    color: #f00;
	
}

.tag_cloud { padding: 3px; text-decoration: none; }
/* .tag_cloud:link  { color: #81d601; } */
.tag_cloud:link  { color: #339933; }
.tag_cloud:visited { color: #019c05; }
.tag_cloud:hover { color: #ffffff; background: #69da03; }
.tag_cloud:active { color: #ffffff; background: #ACFC65; }

.vid_controls {
	border: 1px solid #CCC;
	padding: 10px;
	margin-top: 5px;
}

.vid_controls a {
	font-size: 14px;
	font-weight: bold;
}

ul.tag_list {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

ul.vid_list {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

ul.vid_list li{
	padding:0.15em 0;

}

.users {
	word-spacing: 3pt;
	margin-top:5px;
}

.actions
{
    width:            500px;
    background-image: url('/graphics/alert.gif');
    background-repeat: no-repeat;
    background-position: 5px 8px;
    margin-bottom:    15px;
    margin-right:	  15px;	
    border:			  1px solid #ccc;
    padding:          8px;
    background-color: #FFFFE0;
    padding-left:     28px;
}

.announce
{
    width:            500px;
    background-image: url('/graphics/information.png');
    background-repeat: no-repeat;
    background-position: 5px 8px;
    margin-bottom:    10px;
    margin-right:	  15px;	
    border:			  1px solid red;
    padding:          8px;
    background-color: #FFF;
    padding-left:     28px;
}

.errors
{
    width:            464px;
    background-image: url('/graphics/x.gif');
    background-repeat: no-repeat;
    background-position: 5px 8px;
    margin-bottom:    15px;
    margin-right:	  15px;
    border:		      1px solid maroon;
    padding:          8px;
	
    background-color: #FFCCCC;
    padding-left:     28px;
}

div.stylized_bookmarklet{
	border:           solid 2px #b7ddf2;
	background:       #ebf4fb;
	padding:          8px;
	width:            280px;
}

div.stylized_bookmarklet h2{
padding-bottom:5px;
}

select.style01 {border:1px solid #A5A5A5; background-color:#D0D0D0; font-size:14px;}

/*select.style01 option {border-bottom:0px solid #dadada}*/

div.line {
	position: relative;
	width: auto;
}

div.line_notify {
	position: relative;
	width: 1120px;
}

li.watched img {
	border: 1px solid #FF0000;
}

li.watched a {
	color: #FF0000;
	font-weight: bold;
}

li.queue img {
	border: 1px solid green;
}

li.queue a {
	color: green;
	font-weight: bold;
}

li.thumbnail img {
	border: 1px solid #2B4A9F;
}

#sddm
{	margin: 0;
	padding: 0;
	z-index: 30;
	float: right;
	}

#sddm li
{	margin: 0;
	padding-right: 5px;
	padding-left: 5px;
	list-style: none;
	float: left;
	height: 17px;
	font: 13px arial;
	border-right: 1px solid #CCC}

#sddm li a
{	display: block;
	text-align: center;
}

#sddm li.sign_on a
{	display: inline;
}

#sddm li.last {
	border-right: 0px solid #FFF;
}

#sddm li.last a {
	display: inline;
}

#sddm div
{	position: absolute;
	z-index: 10;
	visibility: hidden;
	display: block;
	margin: 0;
	padding: 0;
	background: #FFF;
	border: 1px solid #5970B2}

#sddm div a
{	position: relative;
	margin: 0;
	padding: 5px 10px;
	width: auto;
	white-space: nowrap;
	text-align: left;
	text-decoration: none;
	background: #FFF;
	color: #2875DE;
	font: 12px arial}

#sddm div a.notify
{	position: relative;
	margin: 0;
	padding: 5px 10px;
	width: auto;
	white-space: nowrap;
	text-align: left;
	text-decoration: none;
	background: #FFF;
	color: #000000;
	font: 11px arial;
	height:60px;
	width: 400px;
	border-bottom: 1px solid #CCC;
}

#sddm div a.notify_grey
{	position: relative;
	margin: 0;
	padding: 5px 10px;
	width: auto;
	white-space: nowrap;
	text-align: left;
	text-decoration: none;
	background: #EEF0F9;
	color: #000000;
	font: 11px arial;
	height:60px;
	width: 400px;
	border-bottom: 1px solid #CCC;
}

#sddm div a.notify_header {
	position: relative;
	margin: 0;
	margin-top: 5px;
	padding: 5px 10px;
	width: auto;
	height: 25px;
	white-space: nowrap;
	text-align: left;
	text-decoration: none;
	background: #FFF;
	color: #000000;
	font: bold 14px arial;
	width: 400px;
	border-bottom: 1px solid #CCC;
}

#sddm div a.notify_header_mark {
	display:inline;
	position:absolute;
	top:5px;
	left:310px;
}

#sddm div a.notify_footer {
	position: relative;
	margin: 0;
	padding: 10px 10px;
	width: auto;
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
	background: #FFF;
	color: #000000;
	font: bold 12px arial;
	height:20px;
	width: 400px;
	border-bottom: 1px solid #CCC;
}

#sddm li .notify_count
{	display: block;
	background: blue;
	text-align: center;
	cursor:default;
	color: #FFF;
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 1px;
	padding-bottom: 1px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font: bold 14px arial;
}

#sddm li .notify_count_grey
{	display: block;
	background: #CCC;
	text-align: center;
	cursor:pointer;
	color: #FFF;
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 1px;
	padding-bottom: 1px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	font: bold 14px arial;
}

#sddm div img.notify
{	float: left;
	border: 1px solid #CCCCCC;
	padding: 4px;
	margin-right: 5px;
	height: 50px;
	width: 50px;
}

#sddm div a:hover
{	background: #49A3FF;
	color: #FFF}

#sddm div a.notify_header:hover {
	background: #FFF;
	color: #000000;
}

#sddm div a.notify_header_mark:hover {
	background: #FFF;
	color: #000000;
}

div.border1 {
	margin-top: 4px;
	margin-bottom: 3px;
	border-top: 1px solid #879ede;
}
div.border2 {
	border-top: 2px solid #879ede;
	width: auto;
}

div.border3 {
	border: 1px solid #CCC;
	padding: 5px;
	margin-top: 5px;
	width:auto;
}

div.badge {
	float:left;
	border:1px solid #CCCCCC;
	margin-right:5px;
	margin-bottom:5px;
	padding:4px;
	text-align: center;
}

div.pip {
	border: 3px solid #00F;
	padding: 5px;
	margin-top: 5px;
	font-size:18px;
	display: none;
}

span.new {
	font-size: 14pt;
	font-style: italic;
	color: red; 
}

#navcontainer {
	margin: auto;
}

div.user_header{
    font-family: "Verdana", "Lucida Sans", "Lucida Grande", "Trebuchet MS", sans-serif;
    font-size: 1.2em;
    margin-top: 15px;
    margin-bottom: 15px;
    font-weight: bold;
    color:     #264B71;
    border-bottom: 2px solid #336699;
}

fieldset {
	border: 1px solid #ccc;
	margin: 0em 0 0.5em;
	padding: 15px;
	padding-top: 0;
	clear: left;
} * html fieldset { padding-top: 0; }

legend {
	font-size: 115%;
	font-weight: normal;
	letter-spacing: -0.03em;
	
	color: #000;
	padding: 0.5em 0.5em; /* Top and Bottom for IE7 */
} * html legend { margin-bottom: 15px; padding: 0 0.5em; }

fieldset fieldset legend {
	font-size: 105%;
	font-weight: bold;
}

.add {
	background-image: url(../graphics/new_file.gif); 
	background-repeat: no-repeat; 
	background-position: left middle;  
	padding-left: 20px;
	margin-left: 0px;
	margin-top: 10px;
	margin-bottom: 5px;
	text-decoration: underline;

}

.header {
	font-family: arial, helvetica, Sans-Serif;
    font-size: 12px;
}

tr.color-1
{
    background-color: #ccc
}

tr.color-2
{
    background-color: #fff
}

tr.color-3
{
    background-color: lightblue;
}

tr.header
{
    color:            #FFF;
    background-color: #264E75;
    font-weight:      bold
}

tr.breadcrumb
{
    background-color: #FFFFE0;
    height: 16px;
    valign: middle;
}

a.folder
{
    background-image:  url("../graphics/folder_open.gif");
    background-repeat: no-repeat;
    background-position: left 1px;
    padding-left:      20px;
}

.box-1
{
    margin: 15px;
    border: 1px solid #264B71;
    padding: 10px;
    padding-left: 20px;
    background-color: #C4DADB;
    padding-top: 0;
    margin-top: 5px;
    width:  400px;
    margin-left: 0;
}

.box-2
{
    margin: 15px;
    border: 1px solid #CCCC66;
    padding: 10px;
    padding-left: 20px;
    background-color: #FFFFE0;
    padding-top: 0;
    margin-top: 5px;
    width:  400px;
    margin-left: 0;
}

.box-3
{
    margin: 15px;
    border: 1px solid #488F62;
    padding: 10px;
    padding-left: 20px;
    padding-bottom: 18px;
    margin-bottom: 10px;
    background-color: #BEDEBE;
    padding-top: 0;
    margin-top: 5px;
    width:  400px;
    margin-left: 0;
}

.boxx-4
{
    margin: 15px;
    border: 1px solid #488F62;
    padding: 10px;
    padding-left: 20px;
    padding-bottom: 18px;
    margin-bottom: 10px;
    background-color: #BEDEBE;
    padding-top: 0;
    margin-top: 5px;
    width:  400px;
    margin-left: 0;
}

.box-4
{
    margin: 5px;
	padding: 8px;
	padding-top: 0;
	padding-bottom: 0;
	border: 1px solid #488F62;
	height: 505px;
	background-color: #f1f1f1;
}

.box-5
{
    margin: 5px;
	padding: 8px;
	padding-top: 0;
	padding-bottom: 0;
	border: 1px solid #488F62;
	height: 100%;
}

label {
    padding: 8px;
}

input.submit, input.admin, select.admin
{
    margin: 5px;
}

.alert
{
    background-image: url('../graphics/alert.gif');
    background-repeat: no-repeat;
    background-position: 5px 8px;
    margin:    0px;
	margin-top: 10px;
    border:		      1px solid #ccc;
    padding:          8px;
    background-color: #FFFFE0;
    padding-left:     28px;
}

.edit
{
    background-image:  url('../graphics/edit.gif');
    background-repeat: no-repeat;
    background-position: 5px 8px;
    margin-bottom:     15px;
    padding:           8px;
    padding-left:      28px;
    margin:            15px;
    margin-left:	   0;
    border: 		   2px solid #CCCC66; 
    background-color:  #FFFFE0;	
    width: 			   auto;
}

div.pagination2 a {
	padding: 2px 5px 2px 5px;
	margin: 0px;
	border: 1px solid #AAAADD;
	line-height: 2;
	text-decoration: none; /* no underline */
	color: #000099;
}

div.pagination2 a:hover, div.pagination a:active {
	border: 1px solid #000099;
	color: #000;
}

div.pagination2 span.current {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #000099;
							
	font-weight: bold;
	background-color: #000099;
	color: #FFF;
}

div.pagination2 span.disabled {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #EEE;
						
	color: #DDD;
}

/* === RANTRR / MyVidster — Dark Mode Enhancements (FINAL v2) === */
/* Applies when <html data-theme="dark"> is set */
:root { color-scheme: light dark; }

html[data-theme="dark"]{
  /* Palette */
  --page:    #0f1115;   /* page bg */
  --panel:   #1a1d24;   /* cards/panels */
  --nav:     #222631;   /* header/nav */
  --ink:     #e5e7eb;   /* main text */
  --muted:   #9ca3af;   /* secondary text */
  --border:  #2f3542;   /* hairlines */
  --link:    #60a5fa;   /* links */
  --link-h:  #93c5fd;   /* link hover */
  --accent:  #a78bfa;   /* optional accent */
}

/* Page + type */
html[data-theme="dark"] body {
  background: var(--page) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] .title { color:#f1f5f9 !important; }
html[data-theme="dark"] .muted,
html[data-theme="dark"] .note { color:var(--muted) !important; }
html[data-theme="dark"] a { color:var(--link) !important; }
html[data-theme="dark"] a:hover { color:var(--link-h) !important; }

/* ?? Fix black/gray text issue */
html[data-theme="dark"] span,
html[data-theme="dark"] div,
html[data-theme="dark"] td,
html[data-theme="dark"] tr,
html[data-theme="dark"] p {
  color: var(--ink) !important;
}
html[data-theme="dark"] .time,
html[data-theme="dark"] .postdate,
html[data-theme="dark"] .tags,
html[data-theme="dark"] .sub_links {
  color: var(--muted) !important;
}

/* Background hierarchy */
html[data-theme="dark"] .header,
html[data-theme="dark"] .nav {
  background: var(--nav) !important;
  border-bottom: 1px solid var(--border) !important;
}
html[data-theme="dark"] .container,
html[data-theme="dark"] .container3,
html[data-theme="dark"] #content,
html[data-theme="dark"] .box-4,
html[data-theme="dark"] .box-5 {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* Card-like blocks */
html[data-theme="dark"] div#border,
html[data-theme="dark"] .vidresult,
html[data-theme="dark"] .vidthumbnail,
html[data-theme="dark"] .details,
html[data-theme="dark"] .details2,
html[data-theme="dark"] .search_box,
html[data-theme="dark"] fieldset,
html[data-theme="dark"] .loggedOutLogin {
  background: #151924 !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

/* Separators / tables */
html[data-theme="dark"] hr,
html[data-theme="dark"] .separator,
html[data-theme="dark"] .info-box { border-color: var(--border) !important; }
html[data-theme="dark"] tr.color-1 { background:#1b2433 !important; }
html[data-theme="dark"] tr.color-2 { background:#141a24 !important; }
html[data-theme="dark"] tr.color-3 { background:#1d2a3a !important; }
html[data-theme="dark"] tr.header { background:#1f2c3d !important; color:#e9eef7 !important; }

/* Tabs / nav pills */
html[data-theme="dark"] #navlist a:link,
html[data-theme="dark"] #navlist a:visited {
  background:#1a2230 !important;
  color:#b9c2d0 !important;
  border-color: var(--border) !important;
  border-radius: 4px;
  margin-right: 6px;
}
html[data-theme="dark"] #navlist a#current {
  background:#374151 !important;
  color:#ffffff !important;
  border-bottom:1px solid #374151 !important;
}

/* Alerts & notices */
html[data-theme="dark"] .alert {
  background:#1f2a36 !important;
  color:#f1f5f9 !important;
  border:1px solid #f87171 !important;
}
html[data-theme="dark"] .announce {
  background:#1f252c !important;
  color: var(--ink) !important;
  border-color:#e87171 !important;
}
html[data-theme="dark"] .errors {
  background:#3a1f22 !important;
  color:#ffbcbc !important;
  border-color:#a33 !important;
}
html[data-theme="dark"] .actions {
  background:#2b2a19 !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* Buttons */
html[data-theme="dark"] .mybutton {
  background:#151924 !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
  background-image:none !important;
}
html[data-theme="dark"] #themeToggle,
html[data-theme="dark"] .theme-toggle {
  background:#374151 !important;
  color:#f9fafb !important;
  border:1px solid #4b5563 !important;
  border-radius:999px !important;
  padding:6px 14px !important;
}
html[data-theme="dark"] #themeToggle:hover,
html[data-theme="dark"] .theme-toggle:hover { background:#4b5563 !important; }

/* Forms */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background:#151924 !important;
  color: var(--ink) !important;
  border:1px solid var(--border) !important;
}
html[data-theme="dark"] ::placeholder { color: var(--muted) !important; }

/* Footer */
html[data-theme="dark"] .footer {
  background:#181c24 !important;
  color: var(--muted) !important;
  border-top:1px solid var(--border) !important;
}
html[data-theme="dark"] .footer a { color:#93c5fd !important; }

/* Focus ring (keyboard accessibility) */
html[data-theme="dark"] :focus-visible {
  outline:none !important;
  box-shadow:0 0 0 3px rgba(96,165,250,.35) !important;
  border-radius:8px;
}

/* === Dark Mode Visibility Patch for Section Headers (v3) === */
html[data-theme="dark"] h2,
html[data-theme="dark"] .mytitle,
html[data-theme="dark"] .mvp_grid_panel_title,
html[data-theme="dark"] .details_header,
html[data-theme="dark"] #infobox h2 {
  color:#f1f5f9 !important;   /* brighter headers */
  border-color:#2f3542 !important;
}
html[data-theme="dark"] h2,
html[data-theme="dark"] .mytitle {
  border-bottom:1px solid #374151 !important;
  padding-bottom:3px;
}

/* === Dark Mode Header Contrast Patch (v4) === */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .header,
html[data-theme="dark"] .user_header,
html[data-theme="dark"] .home-header,
html[data-theme="dark"] .home-sub,
html[data-theme="dark"] .myv_title,
html[data-theme="dark"] .mvp_grid_panel_title,
html[data-theme="dark"] .details_header,
html[data-theme="dark"] .details_header_prototype,
html[data-theme="dark"] .box-4 .mytitle,
html[data-theme="dark"] .box-5 .mytitle {
  color:#f1f5f9 !important;
}

/* Slightly-muted variant for secondary subtitles if needed */
html[data-theme="dark"] .home-sub { color:#9db6ff !important; }

/* Ensure borders/underlines for titles are visible */
html[data-theme="dark"] .header,
html[data-theme="dark"] .user_header,
html[data-theme="dark"] .details_header,
html[data-theme="dark"] .details_header_prototype,
html[data-theme="dark"] #infobox h2 {
  border-color:#374151 !important;
}

/* If any title rows still look flat, give subtle bg */
html[data-theme="dark"] .details_header_prototype {
  background:#1b2230 !important;
  color:#e9eef7 !important;
}

/* === Dark Mode Bold Label Fix (v5) === */
html[data-theme="dark"] b,
html[data-theme="dark"] strong {
  color:#f1f5f9 !important;   /* high contrast for section labels */
  font-weight:bold;
}

/* === Header Unifier — FINAL (options.php & widgets.php now match the rest) === */
#myv_header{
  /* tweak to taste */
  --logo-gap: 22px;   /* space between logo and tagline (try 18–26px) */
  --tag-nudge: 6px;   /* vertical nudge of tagline block (try 4–8px) */
}

/* 1) Make spacing consistent across all pages */
#myv_header td[width="165"]{ padding-right: var(--logo-gap) !important; }
/* some pages add an extra spacer <td>; hide it so the gap is identical */
#myv_header td[width="165"] + td{ display: none !important; }

/* 2) Neutralize page-level CSS (options/widgets inject global table/td styles) */
#myv_header table{ border-collapse: separate !important; border-spacing: 0 !important; }
#myv_header td, #myv_header th{ vertical-align: bottom !important; }

/* 3) Align the tagline block with the logo baseline */
#myv_header td[valign="top"] > table > tbody > tr > td[align="left"],
#myv_header td[valign="bottom"][align="left"]{
  padding-top: var(--tag-nudge) !important;
}

/* 4) Typography for the tagline (consistent everywhere) */
#myv_header .home-header{
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: .2px;
  margin: 0 0 2px 0 !important;
  color: var(--ink, #0d0d0d) !important;
}
#myv_header .home-sub{
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  color: var(--muted, #5b6b82) !important;
}

/* 5) Logo baseline fix */
#myv_header img[src*="myvidster_logo"]{ display:block; vertical-align:bottom; }

/* 6) Dark mode colors */
html[data-theme="dark"] #myv_header .home-header{ color:#e5e7eb !important; }
html[data-theme="dark"] #myv_header .home-sub{ color:#9db6ff !important; }

/* === Dark Mode header controls: contrast fix (dropdown, search, safe-browsing) === */
html[data-theme="dark"] #myv_header select,
html[data-theme="dark"] #myv_header input[type="text"],
html[data-theme="dark"] #myv_header input[type="submit"],
html[data-theme="dark"] #myv_header button {
  background:#151924 !important;
  color:#e5e7eb !important;
  border:1px solid #2f3542 !important;
}

/* Make the native dropdown menu text readable */
html[data-theme="dark"] #myv_header select { color-scheme: dark; }
html[data-theme="dark"] #myv_header select option {
  background:#111827 !important;
  color:#e5e7eb !important;
}

/* Placeholder visibility in dark mode */
html[data-theme="dark"] #myv_header ::placeholder { color:#9ca3af !important; }

/* “safe browsing: on/off” link in the top menu */
html[data-theme="dark"] #myv_header #sddm li.last,
html[data-theme="dark"] #myv_header #sddm li.last a {
  color:#e5e7eb !important;
}

/* Ensure all header menu links stay readable */
html[data-theme="dark"] #myv_header #sddm li a { color:#93c5fd !important; }
html[data-theme="dark"] #myv_header #sddm li a:hover { color:#bfdbfe !important; }

/* ===========================
   Header unifier (global)
   Matches the look on widgets/options for search, dropdown, Search button,
   and the Light/Dark pill — no markup or JS needed.
   =========================== */

#myv_header {
  /* Dark theme tokens (default) */
  --hdr-bg:      #0f141c;  /* inner fill */
  --hdr-pill:    #0f141c;  /* pill/button bg */
  --hdr-border:  #2b3443;  /* outline */
  --hdr-text:    #e5e7eb;  /* text */
  --hdr-accent:  #a78bfa;  /* caret glow purple */
}

/* Light theme override if you switch to Light Mode */
html:not([data-theme="dark"]) #myv_header {
  --hdr-bg:      #f3f4f6;
  --hdr-pill:    #ffffff;
  --hdr-border:  #d1d5db;
  --hdr-text:    #111827;
  --hdr-accent:  #7c3aed;
}

/* Search input (big box) */
#myv_header input[type="text"] {
  background: var(--hdr-bg) !important;
  border: 1px solid var(--hdr-border) !important;
  border-radius: 14px !important;
  color: var(--hdr-text) !important;
  padding: 12px 14px !important;
  outline: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 0 2px transparent !important;
}

/* Dropdown (native <select>) with custom caret via SVG background */
#myv_header select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--hdr-pill) !important;
  border: 1px solid var(--hdr-border) !important;
  color: var(--hdr-text) !important;
  border-radius: 14px !important;
  font-weight: 700;
  padding: 10px 42px 10px 14px !important;
  line-height: 1.2;
  /* purple caret ▾ */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'>\
  <path d='M5 7.5l5 5 5-5' stroke='%23a78bfa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

/* “Search” button next to the dropdown (input, button, or link styled as button) */
#myv_header input[type="submit"],
#myv_header button,
#myv_header a.search_button {
  background: var(--hdr-pill) !important;
  border: 1px solid var(--hdr-border) !important;
  color: var(--hdr-text) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-weight: 700;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Light/Dark “Mode” pill (styles the existing link) */
#myv_header a[href*="Mode"],
#myv_header .mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hdr-pill) !important;
  border: 1px solid var(--hdr-border) !important;
  color: var(--hdr-text) !important;
  border-radius: 22px !important;
  padding: 10px 14px !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Keep header link text readable in dark */
html[data-theme="dark"] #myv_header a,
html[data-theme="dark"] #myv_header span {
  color: var(--hdr-text) !important;
}

/* ============================================
   VIDEO VIEW — LIGHT MODE VISIBILITY RESCUE
   (Dark mode already OK; these run only in light)
   ============================================ */

:root { --mvv-text:#111827; --mvv-muted:#6b7280; --mvv-link:#1d4ed8; }

/* Force readable text inside common video-page blocks */
html:not([data-theme="dark"]) #infobox,
html:not([data-theme="dark"]) #infobox *,
html:not([data-theme="dark"]) .details_video,
html:not([data-theme="dark"]) .details_video *,
html:not([data-theme="dark"]) .viddetails,
html:not([data-theme="dark"]) .viddetails *,
html:not([data-theme="dark"]) .viddetails_home,
html:not([data-theme="dark"]) .viddetails_home *,
html:not([data-theme="dark"]) .posted_video,
html:not([data-theme="dark"]) .posted_video *,
html:not([data-theme="dark"]) .shared_video,
html:not([data-theme="dark"]) .shared_video *,
html:not([data-theme="dark"]) .vid_controls,
html:not([data-theme="dark"]) .vid_controls *,
html:not([data-theme="dark"]) .users,
html:not([data-theme="dark"]) .users * {
  color: var(--mvv-text) !important;
  -webkit-text-fill-color: var(--mvv-text) !important;
  text-shadow: none !important;
}

/* Muted/secondary lines (dates, tags, little notes) */
html:not([data-theme="dark"]) .time,
html:not([data-theme="dark"]) .postdate,
html:not([data-theme="dark"]) .tags,
html:not([data-theme="dark"]) .sub_links {
  color: var(--mvv-muted) !important;
}

/* Links in light mode on video page */
html:not([data-theme="dark"]) #infobox a,
html:not([data-theme="dark"]) .details_video a,
html:not([data-theme="dark"]) .viddetails a,
html:not([data-theme="dark"]) .posted_video a,
html:not([data-theme="dark"]) .shared_video a {
  color: var(--mvv-link) !important;
}

/* Inputs in comment area / side forms (light mode) */
html:not([data-theme="dark"]) #infobox input,
html:not([data-theme="dark"]) #infobox select,
html:not([data-theme="dark"]) #infobox textarea,
html:not([data-theme="dark"]) .details_video input,
html:not([data-theme="dark"]) .details_video select,
html:not([data-theme="dark"]) .details_video textarea {
  background: #ffffff !important;
  color: var(--mvv-text) !important;
  -webkit-text-fill-color: var(--mvv-text) !important;
  border: 1px solid #e5e7eb !important;
}

/* Headings/subheads in the video info column (light mode) */
html:not([data-theme="dark"]) #infobox h1,
html:not([data-theme="dark"]) #infobox h2,
html:not([data-theme="dark"]) #infobox .myv_title,
html:not([data-theme="dark"]) .details_header {
  color: var(--mvv-text) !important;
}

/* ======================================================
   VIDEO VIEW — LIGHT MODE: RIGHT SIDEBAR VISIBILITY FIX
   Targets the info panel next to the player
   ====================================================== */

:root { --mvv-text:#111827; --mvv-muted:#6b7280; --mvv-link:#1d4ed8; }

/* Force readable text inside the right info column */
html:not([data-theme="dark"]) .details_ads,
html:not([data-theme="dark"]) .details_ads *,
html:not([data-theme="dark"]) .details_header,
html:not([data-theme="dark"]) .details_header *,
html:not([data-theme="dark"]) #infobox + .details_ads,
html:not([data-theme="dark"]) #infobox + .details_ads * {
  color: var(--mvv-text) !important;
  -webkit-text-fill-color: var(--mvv-text) !important;
  text-shadow: none !important;
}

/* Muted/meta lines in that panel (labels, tiny notes) */
html:not([data-theme="dark"]) .details_ads .time,
html:not([data-theme="dark"]) .details_ads .postdate,
html:not([data-theme="dark"]) .details_ads .tags,
html:not([data-theme="dark"]) .details_ads .sub_links,
html:not([data-theme="dark"]) .details_ads small,
html:not([data-theme="dark"]) .details_ads .small_text {
  color: var(--mvv-muted) !important;
}

/* Links in the info panel */
html:not([data-theme="dark"]) .details_ads a {
  color: var(--mvv-link) !important;
}
html:not([data-theme="dark"]) .details_ads a:hover {
  color: #1e40af !important; /* darker hover for contrast */
}

/* Inputs/selects inside that panel (e.g., tags box, tiny forms) */
html:not([data-theme="dark"]) .details_ads input,
html:not([data-theme="dark"]) .details_ads select,
html:not([data-theme="dark"]) .details_ads textarea {
  background:#ffffff !important;
  color: var(--mvv-text) !important;
  -webkit-text-fill-color: var(--mvv-text) !important;
  border:1px solid #e5e7eb !important;
}

/* Some pages print header strips in very light gray—darken them */
html:not([data-theme="dark"]) .details_header_prototype,
html:not([data-theme="dark"]) .details_header {
  color: var(--mvv-text) !important;
  border-color:#d1d5db !important;
}

/* =========================================================
   GLOBAL LIGHT-MODE VISIBILITY RESET (safe + scoped)
   Ensures readable text and form controls across ALL pages.
   Won’t affect dark mode.
   ========================================================= */

:root { --mv-light-ink:#111827; --mv-light-muted:#4b5563; --mv-light-link:#1d4ed8; }

/* Treat ANY page that is NOT dark as light-mode */
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark) {

/* 1) Core text reset (beats old inline or !important whites) */
}
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark)
  body,
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark)
  body :where(p,span,div,td,th,tr,li,dd,dt,label,legend,small,strong,em,b,i,code,pre,blockquote) {
  color: var(--mv-light-ink) !important;
  -webkit-text-fill-color: var(--mv-light-ink) !important;
  text-shadow: none !important;
}

/* 2) Muted/meta text */
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark)
  :where(.time,.postdate,.tags,.sub_links,.small_text,small,.muted,.note) {
  color: var(--mv-light-muted) !important;
  -webkit-text-fill-color: var(--mv-light-muted) !important;
}

/* 3) Links in light mode (fallback if older rules forced white) */
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark) a {
  color: var(--mv-light-link) !important;
}
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark) a:hover {
  color: #1e40af !important;
}

/* 4) Form controls everywhere (inputs in sidebars, edit screens, etc.) */
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark)
  :where(input,select,textarea,button) {
  background:#ffffff !important;
  color: var(--mv-light-ink) !important;
  -webkit-text-fill-color: var(--mv-light-ink) !important;
  border:1px solid #e5e7eb !important;
}

/* 5) Tables & rows (in case legacy rows used off-contrast fills) */
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark) tr.header td,
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark) tr.header th {
  color: #ffffff !important;             /* keep header readable */
}
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark) tr.color-1 td,
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark) tr.color-2 td,
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark) tr.color-3 td {
  color: var(--mv-light-ink) !important;  /* ensure row cell text is visible */
  -webkit-text-fill-color: var(--mv-light-ink) !important;
}

/* 6) Video page right sidebar & any info cards, globally */
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark)
  :where(.details_ads,.details,.details_header,.details_header_prototype,#infobox,#infobox2,#infobox3) ,
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark)
  :where(.details_ads,.details,#infobox) * {
  color: var(--mv-light-ink) !important;
  -webkit-text-fill-color: var(--mv-light-ink) !important;
}

/* ==========================================
   Video page comment bar (light mode patch)
   Ensures high-contrast text for the notice,
   "Comment Policy" link, and reactions row.
   ========================================== */
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark)
  :where(.vid_controls,.comment_bar,.comments-bar,.reactions-row,.reactions,.comment_notice) ,
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark)
  :where(.vid_controls,.comment_bar,.comments-bar,.reactions-row,.reactions,.comment_notice) * {
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  text-shadow:none !important;
}

/* If your "Comment Policy" is a link in that bar */
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark)
  a[href*="comment"][href*="policy"],
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark)
  a.comment-policy,
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark)
  .comment_policy {
  color:#1d4ed8 !important;
  -webkit-text-fill-color:#1d4ed8 !important;
}

/* The slim divider above the widget can look faint in light mode */
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark)
  .comment_bar hr,
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark)
  .comments-divider {
  border-color:#e5e7eb !important;
}

/* Optional: make the blue "Got it" cookie/consent notice readable if it's your markup */
html:not([data-theme="dark"]):not(.dark):not(.theme-dark):not(.dark-mode):not(.is-dark)
  .cookie-consent,.consent-bar,.consent-notice {
  color:#111827 !important;
}

/* ===========================================
   HARD OVERRIDE FOR payment.php VISIBILITY
   =========================================== */

body.payment-page {
    background-color: #020617 !important; /* dark navy */
    color: #f9fafb !important;            /* bright text */
}

/* Make ALL text on the payment page readable */
body.payment-page *,
body.payment-page fieldset *,
body.payment-page table *,
body.payment-page td,
body.payment-page th,
body.payment-page span,
body.payment-page p,
body.payment-page label,
body.payment-page font,
body.payment-page b,
body.payment-page strong {
    color: #f9fafb !important;
    background-color: transparent !important;
}

/* Inputs */
body.payment-page input[type="text"],
body.payment-page input[type="password"],
body.payment-page input[type="number"],
body.payment-page input[type="email"],
body.payment-page select,
body.payment-page textarea {
    background-color: #020617 !important;
    color: #f9fafb !important;
    border: 1px solid #374151 !important;
}

/* Placeholders */
body.payment-page input::placeholder,
body.payment-page textarea::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}

/* Buttons – just ensure text is visible */
body.payment-page input[type="submit"],
body.payment-page button {
    color: #ffffff !important;
}


/* --- Authorize.Net payment helper text fix --- */
#payment-page #payment-inner table font,
#payment-page #payment-inner font,
#payment-page #payment-inner span,
#payment-page #payment-inner .smalltext,
#payment-page #payment-inner .smallText,
#payment-page #payment-inner label,
#payment-page #payment-inner td {
    color: #f9fafb !important;          /* bright white text */
    background-color: transparent !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* keep inputs readable but unchanged otherwise */
#payment-page #payment-inner input,
#payment-page #payment-inner select,
#payment-page #payment-inner textarea {
    color: #f9fafb !important;
}