body, h1, h2 {
	font-family: 'Noto Sans', sans-serif;
}

body {
    padding: 2em 2em 0 2em;
    max-width: 1024px;
    margin: 0 auto !important;
    background:white;
     min-height:100%;
     min-width:82.5%;
     display: table;

}
html { height:100%}


.content {
  display: table-row-group;
}

#versionb {
    display: table-footer-group;
}

.logocolor {
	color: #56e85d;
}

a {
	color: #369;
}
pre {line-height:15px; font-size:12px; font-family:sans-serif}
#insertcoin {
	margin: 0 auto;
	width: 480px;
	text-align: center;
	margin-bottom: 10px;
}

#status {
	margin: 0 auto;
	width: 480px;
	text-align: center;
	margin-top: 10px;
}
#motd {
	border-radius: 20px;
	width: 480px;
	margin: 0 auto;
	padding: 6px;
	border: 1px solid #ffff4a;
	background: #ffff96;
	background: linear-gradient(0deg, rgba(255,254,210,1) 0%, rgba(255,255,150,1) 100%);
	margin-bottom:12px;
	font-size: 14px;
	text-align:center;
}
.motd_hover:hover {
    background: #ffd996 !important;
    border:1px solid #ffd24a !important;
    background: linear-gradient(0deg, rgba(255,210,74,1) 0%, rgba(255,233,167,1) 100%) !important;
}

#motd_premium {
	border-radius: 20px;
	width: 480px;
	margin: 0 auto;
	padding: 6px;
	border: 1px solid #ffff4a;
	background: #ffff96;
	background: linear-gradient(0deg, rgba(255,254,210,1) 0%, rgba(255,255,150,1) 100%);
	margin-bottom:12px;
	font-size: 14px;
	text-align:center;
}
.motd_premium_hover:hover {
    background: #ffd996 !important;
    border:1px solid #ffd24a !important;
    background: linear-gradient(0deg, rgba(255,210,74,1) 0%, rgba(255,233,167,1) 100%) !important;
}


#drop-area {
	border: 6px dotted #ccc;
	border-radius: 30px;
	width: 480px;
	margin: 0 auto;
	padding: 18px;
	border-color: #56e85d;
	box-shadow: -5px 5px 30px 10px #f4faf4;
}

#drop-area p {
    padding-left: 25px;
    text-indent: -25px;
}    

#drop-area.highlight {
	border-color: #56e85d;
	background: #deffe0;
}

p {
	margin-top: 0;
}

.my-form {
	margin-bottom: 10px;
}

#gallery {
	margin-top: 10px;
}

#gallery div {
	margin-top: 12px;
}

#gallery img {
	max-width: 480px;
	max-height: 420px;
	margin-top: 16px;
	margin-bottom: 10px;
	margin-right: 10px;
	vertical-align: middle;
	border: 1px solid #999;
}

.button {
	display: inline-block;
	padding: 10px;
	background: #ccc;
	cursor: pointer;
	border-radius: 5px;
	border: 1px solid #ccc;
}

.button:hover {
	background: #ddd;
}

#fileElem {
	display: none;
}

#progress-bar {
	width: 100%;
	display: none;
	margin-top: 12px;
}

#waiting-bar {
	width: 100%;
	display: none;
	;
     margin-top: 12px;
}

#transcode-bar {
	width: 100%;
	display: none;
}

#upload_button {
	border-radius: 12px;
	margin-top: 3em;
	border: none;
	display: inline-block;
	font-weight: bold;
	background-color: #39ba3f;
	color: white;
	font-size: 14px;
	padding: 16px;
	cursor: pointer;
	box-shadow: 0 0 7px 7px #f4faf4;
}

#upload_button:hover {
	background-color: #56e85d;
}

#upload_button.bdisabled {
	background: #dedede !important;
	color: #7c7c7c !important;
	cursor: default;
}

#progress-bar[value]::-webkit-progress-value {
	background-color: green !important;
}

#transcode-bar:not([value])::-webkit-progress-value {
	background-color: yellow !important;
}

#waiting-bar[value]::-webkit-progress-value {
	background-color: orange !important;
}

.bbdisabled {
	cursor: wait;
	color: #888;
}

#aboutline {
    display:inline-block;
	font-size: 14px;
	color: #999;
	margin-top: 8em;
	cursor: pointer;
}

#abouttext {
	width: 480px;
	max-width: 100%;
	font-size: 14px;
	color: #999;
	margin-top: 1em;
}

#notaneasteregg,#beta {
	float: right;
	max-width: 35%;
	margin-right: 2em;
	opacity: .9;
}

.support {
	margin-top: 1.75em;
}

.support img {
	position: relative;
	top: -3px;
}

.vex-content .support {
    font-size:14px;   
}
.modal {
	background: #ccc;
}

.topdrag {
	margin-top: 1em;
	text-align: center;
	margin-bottom: 6px;
}

.bottomdrag {
	text-align: center;
	margin-bottom: 1em;
}

#rockandroll {
	width: 100%;
	border-radius: 12px;
	margin-top: 20px;
	border: none;
	display: inline-block;
	font-weight: bold;
	-webkit-appearance: none;
	background: #39ba3f;
	border:none;
	color: white;
	font-size: 14px;
	padding: 8px;
	cursor: pointer;
	outline: none;
}

xxx#rockandroll:hover {
	background-color: #56e85d;	
}

xxx#rockandroll:disabled:hover {
	background-color: #39ba3f !important;
}

xxx.rockandrolldisabled:hover {
	background-color: #39ba3f !important;	
}
.qfdisabled {
    background-color: #c2c2c2 !important;	
    cursor:default !important;
}

#rockandroll {
	animation: glowing 1300ms infinite;
}

.rockandrolldisabled {
	animation: none !important;
}

.preview {
	display: inline-block;
	text-align: center;
	margin: 0 auto;
	font-weight: bold;
}

#options_open, #options_closed {
	margin-bottom: 14px;
	color: #555;
	margin-top: 24px;
}

.sizeselector {
	margin-left: 0px;
	text-align:center;
}
.sizeselector label {
    margin-left:.6em; 
    margin-right:.6em;
}
.sizeselector p {
    text-align:center;
}

#extraline, #extraline a {
	color: #555;
	font-size: 14px;
} 


@keyframes glowing {
	0% {
		background: #39ba3f;
		box-shadow: 0 0 3px #39ba3f;
	}

	50% {
		background: #56e85d;
		box-shadow: 0 0 3px #56e85d;
	}

	100% {
		background: #39ba3f;
		box-shadow: 0 0 3px #39ba3f;
	}
}

.glink {
	text-decoration: none !important;
	color: #999;
}


.browse {
    display: flex;
    margin-bottom:1em;
}
.browse_r {
    padding-left:10px;
    margin:auto 0;
    flex-grow:1;
}    

#djoin {display:inline-block; position:relative; left:0; top:7px; margin-right:2em}

#versionb {display:block; text-align:center; position:relative; left:-18px; top:0; margin:0 auto; color:#999; font-size:13px; margin-bottom:3px; margin-top:8px}
#versionb * {display:inline}
#versionb a {text-decoration:none; color:#999}
#versionb a:hover, #version:hover { color:#39ba3f}

#version {cursor:pointer}

.releasenotes {overflow-x:scroll; max-height:500px }
.releasenotes p, .releasenotes h3 {margin-top:0; margin-bottom:0; font-size:15px}
.releasenotes h2 {margin-top:0; margin-bottom:24px}

.releasenotes::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

.releasenotes::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

#url {
    width:85%;
    padding:4px 2px;    
}
#specify_url {margin:24px 0 25px 0}

#url_validation {
    color:red;
}
#cancel_url {
    color:red;
    margin:3px;
    cursor:pointer;
    font-size:10px;
}
.supportlink {
    text-decoration:none;
}
.supportlink:hover {
    text-decoration:underline;
}

.support_icon_t {    
    position:relative;
    top:7px;
    left:3px;
    display:inline-block;
    width:22px;
    height:22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='22' height='22'%3E%3Cpath fill='%2303A9F4' d='M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429'/%3E%3C/svg%3E");
}
.support_icon_d {    
    position:relative;    
    top:3px;
    left:0px;
    display:inline-block;
    width:16px;
    height:16px;
    background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 24 24' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%235c6bc0'%3E%3Cpath d='m3.58 21.196h14.259l-.681-2.205c.101.088 5.842 5.009 5.842 5.009v-21.525c-.068-1.338-1.22-2.475-2.648-2.475l-16.767.003c-1.427 0-2.585 1.139-2.585 2.477v16.24c0 1.411 1.156 2.476 2.58 2.476zm10.548-15.513-.033.012.012-.012zm-7.631 1.269c1.833-1.334 3.532-1.27 3.532-1.27l.137.135c-2.243.535-3.26 1.537-3.26 1.537.104-.022 4.633-2.635 10.121.066 0 0-1.019-.937-3.124-1.537l.186-.183c.291.001 1.831.055 3.479 1.26 0 0 1.844 3.15 1.844 7.02-.061-.074-1.144 1.666-3.931 1.726 0 0-.472-.534-.808-1 1.63-.468 2.24-1.404 2.24-1.404-3.173 1.998-5.954 1.686-9.281.336-.031 0-.045-.014-.061-.03v-.006c-.016-.015-.03-.03-.061-.03h-.06c-.204-.134-.34-.2-.34-.2s.609.936 2.174 1.404c-.411.469-.818 1.002-.818 1.002-2.786-.066-3.802-1.806-3.802-1.806 0-3.876 1.833-7.02 1.833-7.02z'/%3E%3Cpath d='m14.308 12.771c.711 0 1.29-.6 1.29-1.34 0-.735-.576-1.335-1.29-1.335v.003c-.708 0-1.288.598-1.29 1.338 0 .734.579 1.334 1.29 1.334z'/%3E%3Cpath d='m9.69 12.771c.711 0 1.29-.6 1.29-1.34 0-.735-.575-1.335-1.286-1.335l-.004.003c-.711 0-1.29.598-1.29 1.338 0 .734.579 1.334 1.29 1.334z'/%3E%3C/g%3E%3C/svg%3E");
}
.releaseitem {font-size:15px;}
/*

#f1,#f2 {
    width:18px;
    height:10px;
    opacity:.3;
    display:block;
    margin-bottom:4px;
    margin-top:6px;
}

#f1 {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDgwMCA0ODAiPgogIDxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICA8cmVjdCB3aWR0aD0iODAwIiBoZWlnaHQ9IjE5MiIgZmlsbD0iI2Q2MDI3MCIvPgogICAgPHJlY3Qgd2lkdGg9IjgwMCIgaGVpZ2h0PSI5NiIgeT0iMTkyIiBmaWxsPSIjOWI0Zjk2Ii8+CiAgICA8cmVjdCB3aWR0aD0iODAwIiBoZWlnaHQ9IjE5MiIgeT0iMjg4IiBmaWxsPSIjMDAzOGE4Ii8+CiAgPC9nPgo8L3N2Zz4=");
     
}

#f2 {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDgwMCA0ODAiPgogIDxwYXRoIGZpbGw9IiM1QkNFRkEiIGQ9Ik0wIDBoODAwdjQ4MEgweiIvPgogIDxwYXRoIGZpbGw9IiNGNUE5QjgiIGQ9Ik0wIDk2aDgwMHYyODhIMHoiLz4KICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNMCAxOTJoODAwdjk2SDB6Ii8+Cjwvc3ZnPg==");
     
}

*/


/* 
#motd {
	border: 1px solid #b30e13;
	background: #ffffff;
	margin-bottom:12px;
	font-size: 14px;
	text-align:center;
	position:relative;
	cursor:pointer;
}

#lookatthisgraph {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    border-bottom-left-radius:19px;
    border-top-left-radius:19px;
	background: linear-gradient(0deg, #ff9284 0%, #fe1c07 100%);
}
#motd span {
    position:relative;
}

#motd a {color:#fe1c07}
*/        
        
.responsive-break {
    display: none;
} 

canvas {display: block; margin:0 auto}

.glow {
  -webkit-animation: glow 13s ease infinite alternate;
  -moz-animation: glow 13s ease infinite alternate;
  animation: glow 13s ease infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 4px #1eb1d4aa;
  }
  50% {
    text-shadow: 0 0 4px #c1ceea;
  }
  to {
    text-shadow: 0 0 4px #2e50ffaa;
  }
}

.brw {width:450px;}

@media only screen and (max-width: 640px) {
    .responsive-break {
        display: block;
    }    
	#drop-area {
		width: 100%;
		padding: 10px;
		border-radius: 0px;
		border-left: none;
		border-right: none;
		border-top: 2px dotted #56e85d;
		border-bottom: 2px dotted #56e85d;
	}
	#motd_premium,#motd {
		width: 100%;
		font-size: 12px;
		border-radius:8px;
	}

    #lookatthisgraph {
    border-bottom-left-radius:7px;
    border-top-left-radius:7px;
    }
    
	#abouttext, #gallery img, #insertcoin, #status {
		width: 100%;
	}

	h2 {
		margin-bottom: 50px;
	}

	#aboutline {
		margin-top: 4em;
	}

	.dl {
		display: block;
		width: 100%;
		text-align: left;
	}
	.releasenotes {height:300px}
	
    #url {
	    width:75%;
    }

	
}
@media only screen and (max-width: 400px) {
    .vex-dialog-button {padding:9px 20px !important}
}
@media only screen and (max-width: 350px) {
    .vex-dialog-button {padding:8px 10px !important}
}

@media only screen and (min-width: 1024px) {
	html {
		background: #eee;
		height: 100%;
		width: 100%;
		
	}

	body {
		background: white;
		border-right: 1px solid #ddd;
		border-left: 2px solid #ddd;
		min-height: 100%;
	}
	.brw {width:560px !important}
}



@media (prefers-color-scheme: dark) {


    html {
        background-color: #181a1b !important;
    }
    html, body, input, textarea, select, button {
        background-color: #282a2b;
    }
    html, body, input, textarea, select, button {
        border-color: #736b5e;
        color: #e8e6e3;
    }
    a {
        color: #3391ff;
    }
    table {
        border-color: #545b5e;
    }
    ::placeholder {
        color: #b2aba1;
    }
    input:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        background-color: #555b00 !important;
        color: #e8e6e3 !important;
    }
    ::selection {
        background-color: #004daa !important;
        color: #e8e6e3 !important;
    }
    ::-moz-selection {
        background-color: #004daa !important;
        color: #e8e6e3 !important;
    }       

    body { background-image: initial; background-color: black !important}
    html { background-color: #131307 !important;}
    h1 {color:#FDFDFE}    
    
    @media only screen and (max-width: 1024px) {
    	html { background-color: black !important;}
    }
    
    .logocolor { color: rgb(92, 233, 99); }
    a { color: rgb(125, 173, 212); }
    #motd_premium,#motd { border-color: #a45d18; background-image: linear-gradient(0deg, #5d2e00 0%, #af650e  100%); background-color: initial; }
    #motd_premium,#motd a {color:#e0842a}    
    
    .motd_hover:hover {
        background: #830e27 !important;
        border:1px solid #a41836 !important;
        background: linear-gradient(0deg, rgba(131,14,39,1) 0%, rgba(67,6,19,1) 100%) !important;
    }    
    
    /*    
    
    #motd {
    	background: black;
    	border:1px solid #a12721;
    }
    
    #lookatthisgraph {
        background-image: linear-gradient(0deg, #5e0b08 0%, #a12721  100%); background-color: initial; 
    }
    #motd a {color:#dd3e37}
    
    */
        

    #drop-area { border-color: rgb(19, 140, 25);     box-shadow: #14220f -5px 5px 30px 10px;; }
    #drop-area.highlight { border-color: rgb(19, 140, 25); background-image: initial; background-color: rgb(0, 71, 21); }
    #gallery img { border-color: rgb(77, 83, 86); }
    .button { background-image: initial; background-color: rgb(53, 57, 59); border-color: rgb(62, 68, 70); }
    .button:hover { background-image: initial; background-color: rgb(43, 47, 49); }
    #upload_button { border-color: initial; background-color: rgb(46, 149, 50); color: rgb(232, 230, 227); box-shadow: rgb(25, 42, 19) 0px 0px 7px 7px; }
    #upload_button:hover { background-color: rgb(20, 146, 56); }
    #upload_button.bdisabled { background-image: initial !important; background-color: rgb(43, 46, 48) !important; color: rgb(154, 145, 132) !important; }
    #progress-bar[value]::-webkit-progress-value { background-color: rgb(0, 102, 0) !important; }
    #transcode-bar:not([value])::-webkit-progress-value { background-color: rgb(204, 204, 0) !important; }
    #waiting-bar[value]::-webkit-progress-value { background-color: rgb(204, 132, 0) !important; }
    .bbdisabled { color: rgb(157, 148, 136); }
    #aboutline { color: rgb(168, 160, 149); }
    #abouttext { color: rgb(168, 160, 149); }
    .modal { background-image: initial; background-color: rgb(53, 57, 59); }
    #rockandroll { background-image: initial; background-color: rgb(46, 149, 50); border-color: initial; color: rgb(232, 230, 227); outline-color: initial; }
    xxx#rockandroll:hover { background-color: rgb(20, 146, 56); }
    xxx#rockandroll:disabled:hover { background-color: rgb(46, 149, 50) !important; }
    xxx.rockandrolldisabled:hover { background-color: rgb(46, 149, 50) !important; }
    .qfdisabled { background-color: rgb(58, 63, 66) !important; }
    #options_open, #options_closed { color: rgb(178, 172, 162); }
    #extraline, #extraline a { color: rgb(178, 172, 162); }
    .glink { color: rgb(168, 160, 149); text-decoration-color: initial !important; }
    #versionb { color: rgb(168, 160, 149); }
    #versionb a { text-decoration-color: initial; color: rgb(168, 160, 149); }
    #versionb a:hover, #version:hover { color: rgb(86, 203, 91); }
    .releasenotes::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.5); box-shadow: rgba(24, 26, 27, 0.5) 0px 0px 1px; }
    #url_validation { color: rgb(255, 26, 26); }
    #cancel_url { color: rgb(255, 26, 26); }
    .supportlink { text-decoration-color: initial; }
    .supportlink:hover { text-decoration-color: initial; }
    .support_icon_t { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='22' height='22'%3E%3Cpath fill='%2303A9F4' d='M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429'/%3E%3C/svg%3E"); }
    .support_icon_d { background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 24 24' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%235c6bc0'%3E%3Cpath d='m3.58 21.196h14.259l-.681-2.205c.101.088 5.842 5.009 5.842 5.009v-21.525c-.068-1.338-1.22-2.475-2.648-2.475l-16.767.003c-1.427 0-2.585 1.139-2.585 2.477v16.24c0 1.411 1.156 2.476 2.58 2.476zm10.548-15.513-.033.012.012-.012zm-7.631 1.269c1.833-1.334 3.532-1.27 3.532-1.27l.137.135c-2.243.535-3.26 1.537-3.26 1.537.104-.022 4.633-2.635 10.121.066 0 0-1.019-.937-3.124-1.537l.186-.183c.291.001 1.831.055 3.479 1.26 0 0 1.844 3.15 1.844 7.02-.061-.074-1.144 1.666-3.931 1.726 0 0-.472-.534-.808-1 1.63-.468 2.24-1.404 2.24-1.404-3.173 1.998-5.954 1.686-9.281.336-.031 0-.045-.014-.061-.03v-.006c-.016-.015-.03-.03-.061-.03h-.06c-.204-.134-.34-.2-.34-.2s.609.936 2.174 1.404c-.411.469-.818 1.002-.818 1.002-2.786-.066-3.802-1.806-3.802-1.806 0-3.876 1.833-7.02 1.833-7.02z'/%3E%3Cpath d='m14.308 12.771c.711 0 1.29-.6 1.29-1.34 0-.735-.576-1.335-1.29-1.335v.003c-.708 0-1.288.598-1.29 1.338 0 .734.579 1.334 1.29 1.334z'/%3E%3Cpath d='m9.69 12.771c.711 0 1.29-.6 1.29-1.34 0-.735-.575-1.335-1.286-1.335l-.004.003c-.711 0-1.29.598-1.29 1.338 0 .734.579 1.334 1.29 1.334z'/%3E%3C/g%3E%3C/svg%3E"); }
 
     @keyframes glowing {
    	0% {
    		background: #268a24;
    		box-shadow: 0 0 3px #39ba3f;
    	}
    
    	50% {
    		background: #5ba75a;
    		box-shadow: 0 0 3px #56e85d;
    	}
    
    	100% {
    		background: #268a24;
    		box-shadow: 0 0 3px #39ba3f;
    	}
    }

 
    @media only screen and (max-width: 640px) {
      #drop-area { border-left-color: initial; border-right-color: initial; border-top-color: rgb(19, 140, 25); border-bottom-color: rgb(19, 140, 25); }
    }
    @media only screen and (min-width: 1024px) {
      html { background-image: initial; background-color: rgb(34, 36, 38); }
      body { background-image: initial; background-color: rgb(24, 26, 27); border-right-color: rgb(58, 62, 65); border-left-color: rgb(58, 62, 65); }
    }
    @media not all {
      html { background-color: rgb(19, 21, 22) !important; }
      html, body, input, textarea, select, button { background-color: rgb(19, 21, 22); }
      html, body, input, textarea, select, button { border-color: rgb(106, 98, 87); color: rgb(216, 212, 207); }
      a { color: rgb(61, 165, 255); }
      table { border-color: rgb(111, 103, 91); }
      ::placeholder { color: rgb(178, 171, 161); }
      input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(68, 73, 0) !important; color: rgb(216, 212, 207) !important; }
      ::selection { background-color: rgb(0, 62, 136) !important; color: rgb(216, 212, 207) !important; }
      #upload_button { box-shadow: rgb(20, 34, 15) 0px 0px 7px 7px; }
    }
    
}

.sizeselector [data-disabled="true"] + span {
    color: #aaa; /* Gray out the text */
}

.sizeselector [data-disabled="true"] {
    pointer-events: none; /* Prevent interaction */
    opacity: 0.5; /* Visual feedback for being "disabled" */
}