/*
   CSS
*/

*					                     { margin: 0; padding: 0; }
/* body				                     { font: 14px "Lucida Grande", Helvetica, Arial, Sans-Serif; background: #333; } */
body				                     { font: 14px "Lucida Grande", Helvetica, Arial, Sans-Serif; background: #fff; display: flex; min-height: 100vh; }


html                                     { overflow-y: scroll; }
a                                        { text-decoration: none; outline: 0; }
/* a:link                                   { text-decoration: none; } */
a:visited                                { color: #4660e2; } 
a:hover                                  { text-decoration: none; color: hotpink; }
a:active                                 { text-decoration: none; color: red; }
a img                                    { border: 0; }
#page-wrap		                         { width: 900px; margin: 0 auto; position: relative; }
.center                                  {display: block; margin-left: auto; margin-right: auto; width: 50%;}
.centermain {
  margin: auto;
  width: 100%;
 /* border: 3px solid #73AD21; */
  padding: 150px;
  text-align: center;

}
#nav-bar                                 { background: url(../images/navbar-bg.png) repeat-y; width: 191px; position: fixed; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; } 
#nav-bar ul                              { list-style: none; margin: 5px 0 10px 0; }
#nav-bar ul li                           { font-size: 12px; text-align: center; }
body#usage ul li.usage a,
body#menu ul li.menu a,
body#index ul li.index a,
body#prep ul li.prep a,
body#prep1 ul li.prep1 a,
body#load ul li.load a,
body#load1 ul li.load1 a,
body#load2 ul li.load2 a,
body#apache ul li.apache a,
body#php ul li.php a,
body#domain ul li.domain a,
body#certbot ul li.certbot a,
body#mysql ul li.mysql a,
body#phpadmin ul li.phpadmin a,
body#sampdomain ul li.sampdomain a,
body#seo ul li.seo a,
body#changelog ul li.changelog a,
body#parameters ul li.parameters a, 
body#hosting ul li.hosting a,
#nav-bar ul li.active a                  { position: relative; background: white; z-index: 300; border-bottom-color: white; border-top-color: white; }
/*#nav-bar ul li.active a:hover            { background: white; }  */
#nav-bar ul li a                         { display: block; padding: 1px 4px 1px 5px; border-top: 1px solid rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); color: #444; text-shadow: 1px 1px 1px white; font-weight: bold; }
#nav-bar ul li:first-child a             { border-top: 0; }
#nav-bar ul li:last-child a              { border-bottom: 0; }
#nav-bar ul li a:hover                   { background: rgba(0,0,0,0.07); }


/* h1                                       { font: bold 32px Helvetica, Sans-Serif; letter-spacing: -1px; padding: 18px 0 18px 210px; } */  
h1                                       { font: bold 18px Helvetica, Sans-Serif; letter-spacing: -1px; padding: 18px 0 18px 210px; }
h1 a                                     { color: white; }
h1 a span                                { background: #4660e2; padding: 3px 8px; border-radius: 4px; color: white; font-size: 20px; letter-spacing: 0; position: relative; top: -6px; font-weight: normal;  }
/*h1 a:hover span:after                    { content: " Download!"; font-size: 11px; position: relative; bottom: 2px;  } */
#main-content                            { position: relative; z-index: 200; margin: 0 0 0 180px; background: white; border-radius: 18px; box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.6); padding: 30px; min-height: 500px; }
#ajax-loader                             { display: none; position: absolute; top: 100px; left: 280px; }

#nav-bar .support                        { text-align: left; margin: 0 25px 20px 20px; }
#nav-bar .support h4                     { text-transform: uppercase; border-bottom: 1px solid #4660e2; color: #4660e2; padding-bottom: 5px; margin-bottom: 5px; }
#nav-bar .support ul                     { margin: 0 0 0 12px; list-style: disc; }
#nav-bar .support ul li                  { text-align: left; font-size: 11px; margin: 0 0 4px 0; }

#footer                                  { position: relative; z-index: 350; margin: 15px 0 15px 210px; color: white; }


/*
    Typography
*/
p                                        { line-height: 1.5; margin: 0 0 15px 0; }
.callout                                 { background: #fdfce4; padding: 15px; border: 1px solid #fff000; border-radius: 6px; }    
.callout1                                { background: #000080; padding: 15px; border: 1px solid #fff000; border-radius: 6px; }  
.callout2                                { background: #000080; padding: 15px; border: 1px solid #fff000; border-radius: 6px; white-space: nowrap; }       
h2                                       { font-size: 24px; margin: 0 0 15px 0; color: #4660E2; }
h3                                       { font-size: 20px; margin: 0 0 15px 0; color: #4660E2 }
h4                                       { font-size: 16px; margin: 0 0 1px 0; text-transform: uppercase; color: #4660E2 }
h5                                       { font-size: 16px; margin: 0 0 1px 0; text-transform: uppercase; color: #000000 }

#asof                                    { font-size: 8px; margin: 0 0 0 0; font-weight: bold; text-transform: uppercase; color: #4660E2 }

pre                                      { padding: 15px; background: #000080; border: 1px solid #666; margin: 0 0 15px 0; white-space: pre-wrap; }
txt                                      { padding: 15px; background: #4660E2; border: 1px solid #666; margin: 0 0 15px 0; white-space: pre-wrap; }
code                                     { font: 14px Helvetica, Sans-Serif; color: #FFFFFF; letter-spacing: 1px; }
/*code                                     { font: 11px Monaco, Courier, MonoSpace, Consola; }  */
/*  end Typography */
/*
#main-content a                          { text-decoration: none; }
#main-content a:hover                    { text-decoration: none; border-bottom: 2px solid #4660e2; }  */
/*
     Add content
*/
pre-ad                                   { padding: 15px; background: #000080; border: 1px solid #666; margin: 0 0 15px 0; white-space: pre-wrap; }

.lead                                    { font-size: 16px; font-weight: 300; }
/* Cookie Consent Begin */
#cookieConsent                           { background-color: rgba(255,51,0,0.8);  /* red //background-color: rgba(20,20,20,0.8); */ min-height: 26px; font-size: 14px; color: #ccc; line-height: 26px; padding: 8px 0 8px 30px; font-family: "Trebuchet MS",Helvetica,sans-serif; position: fixed; bottom: 0; left: 0; right: 400px; display: none; z-index: 9999; }
#cookieConsent a                         { /* more info */ color: #000000; /*color: #4B8EE7; */ text-decoration: none; }
#closeCookieConsent                      { float: right; display: inline-block; cursor: pointer; height: 20px; width: 20px; margin: -15px 0 0 0; font-weight: bold; }
#closeCookieConsent:hover                { color: #FFF; }
#cookieConsent a.cookieConsentOK         { background-color: #F1D600; color: #000; display: inline-block; border-radius: 5px; padding: 0 20px; cursor: pointer; float: right; margin: 0 60px 0 10px; }
#cookieConsent a.cookieConsentOK:hover   { background-color: #E0C91F; }
#cookieConsent1                          { background-color: rgba(255,51,0,0.8);   /* red //background-color: rgba(20,20,20,0.8); */ min-height: 26px; font-size: 14px; color: #ccc; line-height: 26px; padding: 8px 0 8px 30px; font-family: "Trebuchet MS",Helvetica,sans-serif; position: fixed; bottom: 0; left: 0; right: 0; display: none; z-index: 9999; }


/* Cookie Consent End */
ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

:root{
	--primary-color:hsl(196, 78%, 61%);
	--secondary-color:hsl(217, 15%, 83%);
	--success-color:hsl(165, 58%, 55%);
	--info-color:hsl(214, 79%, 65%);
/*	--warning-color:hsl(43, 100%, 66%); */
	--warning-color: #FFCC66;
	--danger-color:hsl(354, 81%, 63%);
	--primary-color-darker:hsl(196, 68%, 54%);
	--secondary-color-darker:hsl(215, 13%, 70%);
	--success-color-darker:hsl(165, 55%, 48%);
	--info-color-darker:hsl(214, 68%, 58%);
	--warning-color-darker:hsl(39, 97%, 62%);
	--danger-color-darker:hsl(354, 67%, 56%);
	--primary-color-lighter:hsl(196, 78%, 81%);
	--secondary-color-lighter:hsl(214, 16%, 92%);
	--success-color-lighter:hsl(165, 58%, 75%);
	--info-color-lighter:hsl(214, 79%, 85%);
	--warning-color-lighter:hsl(43, 100%, 86%);
	--danger-color-lighter:hsl(354, 81%, 83%);
	--secondary-color-darkest:hsl(215, 11%, 30%);
	--secondary-color-lightest:hsl(220, 1%, 98%);
    --grey-color: #7f8c8d; /* sets letter base color! */   
}

.flex{
	display:flex
}
.inline-flex{
	display:inline-flex
}
.flex-row-reverse{
	flex-direction:row-reverse
}
.flex-col{
	flex-direction:column
}
.flex-col-reverse{
	flex-direction:column-reverse
}
.flex-wrap{
	flex-wrap:wrap
}
.flex-wrap-reverse{
	flex-wrap:wrap-reverse
}
.flex-1{
	flex:1
}
.items-start{
	align-items:flex-start
}
.leading-none{
	line-height:1
}
.text-2xl{
	font-size:1.5rem
}
.text-2xll{
	font-size:1.1rem
}
.uppercase{
	text-transform:uppercase
}
.space-y-4>*~*{
	margin-top:1rem!important
}
.menu-hover-fill li {
  position: relative;
}
.menu-hover-fill li::before {
  position: absolute;
  content: "";
  top: 0;
  left: -1rem;
  width: 0.25rem;
  height: 100%;
  background: var(--menu-link-active-color);
  transition: 0.6s;
}
.menu-hover-fill li a {
  --menu-link-color: var(--grey-color);
  position: relative;
  background: linear-gradient(var(--menu-link-active-color) 0 100%) left/0 no-repeat;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  transition: background-size 0.45s 0.04s;
}
.menu-hover-fill li a::before {
  position: absolute;
  content: attr(data-text);
  z-index: -1;
  color: var(--menu-link-color);
}
.menu-hover-fill li:nth-child(1) {
  --menu-link-active-color: var(--warning-color);
}
.menu-hover-fill li:nth-child(2) {
  --menu-link-active-color: var(--info-color);
}
.menu-hover-fill li:nth-child(3) {
  --menu-link-active-color: var(--success-color);
}
.menu-hover-fill li:nth-child(4) {
  --menu-link-active-color: var(--primary-color);
}
.menu-hover-fill li:nth-child(5) {
  --menu-link-active-color: var(--danger-color);
}
.menu-hover-fill li:hover::before {
  left: calc(100% + 1rem);
}
.menu-hover-fill li:hover a {
  background-size: 100%;
}
.sidenav {
  height: 100%;
  width: 150px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 30px;
  background-color: #000;
  overflow-x: hidden;
  padding-top: 20px;
}
.sidecontainer {
  height: 100%;
  width: 150px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #000;
  overflow-x: hidden;
  padding-top: 20px;
}
.maincontainer .main {
  margin-left: 200px; /* Same as the width of the sidenav */
  height: 100%;
  /*width: 150px; */
  width: auto;  
  /* position: auto; */
   /* position: fixed; */
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow-x: hidden;
  padding-top: 20px;
}