/* SIDE BAR */

h4 {
    font-size:80%;
    text-transform: uppercase;
    padding:6px 7px 6px 7px;
    color: #006b9f;
    background: linear-gradient(0deg, rgba(8,40,56,.1) 0%, rgba(10,42,58,1) 100%);
    transform: none;
    border-radius: 3px;
}

h4.first {
    width:250px;
    background: linear-gradient(-90deg, rgba(8,40,56,.1) 0%, rgba(10,42,58,1) 100%);
}

/* SIDE BAR – STORE BUTTONS */

a.StoreButton {
    display:block;
    width:86%;
    padding:10px;
    background:#0c0c0c;
    box-shadow:
        inset 0 -2px 3px rgba(0,0,0,.5),
        inset 0 2px 3px rgba(255,255,255,.2);
        
    border-radius: 3px;
    margin:0 auto;
    text-decoration: none;
    color:#fff;
    border:1px solid rgba(0,0,0,0);
    position:relative;
    z-index:98;
}
a.StoreButton img {
    box-shadow: none;
    height:18px;
    width:18px;
    vertical-align:middle;
    margin-top:-4px;
    margin-left:1px;
    margin-right:2px;
}
a.StoreButton:hover {
    z-index:99;
    background: rgba(0, 254, 245, .05);
    border:1px solid rgba(0, 254, 245, .5);
    box-shadow:0 0 3px 0px rgba(0, 254, 245, .8);


    background: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(137,216,255,.13) 100%);
}

a.StoreButton span {
    float:right;
    font-size:70%;
    text-transform: uppercase;
    position:relative;
    top:3px;
    left:-1px;
}

/* SIDE BAR – SALE BANNER */

div#SaleBanner {
    padding: 10px;
    color: #d2efa9;
    border:0px solid #75b022;
    background: rgba(76, 107, 34, .70);
    border-radius: 5px;
    box-shadow: inset 0 1px 5px rgba(0,0,0,.9);
    text-shadow:1px 2px 2px rgba(0,0,0,.8);
    width:86%;
    margin:0 auto;
    margin-bottom:15px;
    text-align:center;
}

/* LANGUAGE SELECT DROPDOWN */

select#ChangeLanguage {
	border-radius: 5px;
	font-size: inherit;
	background: rgba(0,0,0,.8);
	color: #fff;
	border: 0;
	padding: 3px 22px 3px 5px;
	display: inline-block;

	border-radius: 5px;

	background-image:
		url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23757575%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E),
	 	linear-gradient(to bottom, #000 0%,#000 100%);

	 position: relative;
	 top: 0px;

	 background-repeat: no-repeat, repeat;

	 /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
	 background-position: right 7px top 50%, 0 0;

	 /* icon size, then gradient */
	 background-size: 8px auto, 100%;
}

select#ChangeLanguage:hover, select#ChangeLanguage:focus {
	box-shadow: 0px 0 3px 1px rgba(0, 215, 254, .75);
}

select {
	padding:5px;
}

option {
	margin:5px;
}

form {
	padding:0;
	margin:0;
}

/* select/option css derived from https://css-tricks.com/styling-a-select-like-its-2019/ */

/* class applies to select element itself, not a wrapper element */
select {
    display: block;
    font-weight: 700;
    font-family:inherit;
    font-size:inherit;
    color: #444;
    line-height: 1.3;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: 7px;
    appearance: none;
    background-color: #fff;

    padding: 6px 50px 5px 10px;
    position:relative;
    top:2px;

    /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
        for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it\'s a url. You can also swap in a different svg icon or an external image reference
        
    */
    background-image:
    	url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E),
     	linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);

    background-repeat: no-repeat, repeat;

    /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
    background-position: right .7em top 50%, 0 0;

    /* icon size, then gradient */
    background-size: .65em auto, 100%;
}

select:hover {
    border-color: #888;
}

select:focus {
    border-color: #aaa;
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    color: #222; 
    outline: none;
}

/* Set options to normal weight */
select option {
    font-weight:normal;
    font-weight:700;
}

/* Disabled styles */
select:disabled {
    background-image:
    	url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E),
		linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

select:disabled:hover {
    border-color: #aaa;
}

table.Generator {
	border-collapse: collapse;
	padding:0;
	margin:0;
	border:0;
	border-spacing:0;
	width:100%;
}

table.Generator td {
	padding:0px 15px 20px 0px;
	vertical-align:middle;
}

table.Generator input[type='text'], table.Generator input[type='password'], table.Generator input[type='email'] {
	padding:5px;
	width:250px;
	font-weight:700;
}

table.Generator input[type='number'] {
	padding:5px;
	font-weight:700;
}

#BashScript {
	width:500px;
	font-family:Consolas, monospace;
	font-size:80%;
	padding:15px;
	background:#000;
	/* color:#00D609; */
	border:1px solid rgba(0, 214, 9, .3);
	box-shadow:0 2px 5px 2px rgba(0,0,0,1);
}

/* CSS animation:
	https://css-tricks.com/almanac/properties/a/animation/
	https://www.theappguruz.com/tag-tools/web/CSSAnimations/
*/

#copied {
	margin:10px;
	font-size:95%;
	position:relative;
	top:-1px;
	color: rgba(12, 222, 176, 1);
	opacity:0;
}

.copied-animating {
	animation-name: fadeOut;
	animation-delay: 1.5s;
	animation-duration: .5s;
	animation-fill-mode: both;
	animation-timing-function: ease-out; 
}

@keyframes fadeOut {
	0%   { opacity: 1; }
	100% { opacity: 0; }
}

::placeholder {
	color:rgba(0,0,0,.45);
}

table.Generator input[type='number'] {
	width:70px;
}

table.Generator input#port, table.Generator input#httpPort {
	width:80px;
}

td.AllowedClients > div, td.DebuggingCheckboxes > div {
	padding-bottom:7px;
}

table.Generator input[type='text'], table.Generator input[type='number'], table.Generator input[type='password'], table.Generator input[type='email'], textarea {
	box-shadow: inset 1px 1px 2px rgba(0,0,0,.7);
	border:0;
	padding-left:7px;
}

label {
	padding-right:10px;
	user-select:none;
}

optgroup {
	background:rgba(0, 0, 0, 0.062);
	text-transform: uppercase;
	font-size:75%;
	color:rgba(0,0,0,.5);
}

optgroup option {
	background:#fff;
	text-transform: initial;
	font-size:initial;
	color:initial;
}

p.Instructions {
	color:rgb(216, 192, 33);
	font-size:85%;
}

Warning {
	display:block;
	padding:10px 12px 10px 12px;
	font-size:85%;
	border-radius:7px;
	text-shadow:2px 2px 4px #000;

	background-color:rgba(255, 114, 0, .1);
	border:1px solid rgba(255, 114, 0, .8);
	color:#ff7200;
	box-shadow: inset 0 0 15px #000, 0 0 15px rgba(255, 114, 0, .5);

	margin:5px;
}

input.error {
	outline: none;
	border: 1px solid #ff0000 !important;
    box-shadow: 0 0 5px 2px #ff0000 !important;
}

Warning p {
	margin-top:0;
	padding-top:0;
}

Warning p:last-child {
	padding:0;
	margin:0;
}

#BashCommandDiv_Invalid Warning {
	padding-top:15px;
	padding-bottom:15px;
}

button {
	width: auto;
}

/* server doc start ************************/

h2 { margin-bottom:-5px; }
h3 { margin-top:40px; }
.subinfo {
    color: rgb(151, 151, 151);
}

ol > li {
    margin-top:27px;
    margin-left:40px;
    counter-increment: item;
}

ol > li:first-child {
    margin-top:20px;
}

ol li {
    color:rgb(233, 205, 128);
}

ol, table.requirements {
    font-size:95%;
    background-color: rgb(233, 205, 128, .05);
    border-radius:7px;
    box-shadow:inset 1px 1px 4px 2px rgba(0,0,0,.7);
    padding:1px 15px 15px 15px;
    list-style: none;
    counter-reset: item;

    border:1px solid rgba(255,255,255,.02);
    border-width: 0 1px 1px 0;
}

a {
    font-size:inherit !important;
}

table.requirements {
    margin-top:10px;
    border-spacing:15px;
    padding:10px;
    width:100%;
}

.markdown {
    /* background-color:rgba(255,200,0,.07); */
    background-color:rgba(0, 195, 255, 0.07);
    padding:3px 6px 3px 6px;
    border-radius:5px;
    font-family:monospace;
    color:rgb(233, 205, 128);
    text-shadow:1px 1px 2px rgba(0,0,0,.15);
    font-size:115% !important;
}

ol .markdown {
    color:#fff;
    background-color:rgba(0,0,0,.28);
    padding:3px 6px 3px 6px;
    border-radius:5px;
    text-shadow:none;
}

p.info .markdown {
    background-color:rgba(0,0,0,.28);
}

p.info, div.info {
    background:rgba(63, 178, 228, .07);
    padding:12px 13px 13px 13px;
    font-size:90%;
    border:1px solid rgba(63, 178, 228, .3);
    border-radius:5px;
    box-shadow:
        inset 1px 1px 5px rgba(0,0,0,.6),
        0 0 5px rgba(0,0,0,.5);
    color:rgb(63, 178, 228);
    text-shadow:1px 1px 2px rgba(0,0,0,.5);
    margin-top:15px;
}

DirectoryStructure Item p.info {
    margin-top:5px;
}

ol > li:before {
    margin-right:8px;
    content: counter(item);
    background: rgba(0,0,0,.2);
    border-radius: 100%;
    color: white;
    width: 22px;
    height:22px;
    text-align: center;
    display: inline-block;
    vertical-align:middle;
    font-size:120%;
    padding:2px;
    box-shadow:1px 0px 3px rgba(255,255,255,.7);
    position:absolute;
    margin-left:-37px;
    margin-top:-3px;
}

span.packageInfo {
    opacity:.55;
}

a.markdown, a.markdown:visited, a.markdown:active {
    color: #00d7fe !important;
}

a.markdown:hover {
    color: #00fef5 !important;
}

a.lightlink, a.lightlink.markdown {
    color: rgb(181, 233, 255) !important;
}

ul.HostingProviders {
    list-style: none;
    padding-inline-start:15px;
    margin-bottom:25px;
}

ul.HostingProviders img {
    height:16px;
    width:16px;
    position:relative;
    bottom:-1.5px;
    margin-right:6px;
    box-shadow:none;
}

td.requirementKey {
    padding-right: 0px;
    color: rgb(233, 205, 128);
    width:1px;
    white-space:nowrap;
    text-transform: uppercase;
    font-size:80%;
    padding-top:5px;
}

p > a > img {
    box-shadow:none;
    position:relative;
    bottom:-1px;
    margin-right:2px;
}

div.topButtons {
    text-align:left;
    width:430px;
    margin:0 auto;
    box-shadow:0 0 6px 2px rgba(0,0,0,1);
    padding:15px;
    background:rgba(12, 228, 221, 0.062);
    border-radius:5px;
    text-transform: uppercase;
}

div.topButtons a[FakeButton] {
    display:inline-block;
    margin-bottom:3px;
    font-size:95% !important;
    
    font-weight:bold;
    margin-top:25px;
    text-align:left !important;
}

div.topButtons a[FakeButton]:first-child {
    margin-top:0;
}

div.topButtons a[FakeButton] .ButtonText {
    position:relative;
    bottom:-1px;
    padding-left:14px !important;
}

div.topButtons .h3 {
    display:inline-block;
    font-size:85% !important;
    font-weight:bold;
    margin-left:33px;
    margin-top:8px;
    color:#7fe3f5;
}

p.info span.markdown {
    color:inherit;
    opacity:.85;
}

/* DIRECTORY STRUCTURE */

DirectoryStructure {
    display: block;
}

DirectoryStructure Item[Directory] Name {
    display:block;
    background: linear-gradient(169deg, rgba(255,240,103,0.08) 0%, rgba(255,240,103,.0) 100%);
    border-radius:3px;

    padding-left:30px;
    position:relative;
    left:-30px;

    padding-top:3px;
    padding-bottom:5px;
}

DirectoryStructure Item {
    display: block;
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: 4px 4px;

    padding-left:30px;
    padding-top:3px;

    margin-top:5px;
}

DirectoryStructure Item[Directory] {
    background-image: url(../Images/DirectoryStructure/Directory.png);

    margin-top: 15px;
    margin-bottom:5px;
}

/* DirectoryStructure > Item[Directory] {
    margin-top: 20px;
} */

DirectoryStructure Item[Unity] {
    background-image: url(../Images/DirectoryStructure/Unity.png);
    background-size: 22px;
    background-position: 2px 2px;
}

DirectoryStructure Item[TxtDocument] {
    background-image: url(../Images/DirectoryStructure/TxtDocument.png);
    background-size: 20px;
    background-position: 4px 2px;
}

DirectoryStructure Item[Bash] {
    background-image: url(../Images/DirectoryStructure/Bash.png);
    background-size: 20px;
    background-position: 4px 2px;
}

DirectoryStructure Item[ZipFile] {
    background-image: url(../Images/DirectoryStructure/ZipFile.png);
    background-size: 20px;
    background-position: 4px 2px;
}

DirectoryStructure Item[PhpFile] {
    background-image: url(../Images/DirectoryStructure/PhpFile.png);
    background-size: 20px;
    background-position: 4px 2px;
}

/* FILE CONTENTS */

pre.BashScript {
    font-size:75%;
    width:800px !important;
    max-width:800px !important;
    overflow-x: auto;
}

/* server doc end ************************/