body
{
  position: relative;
  min-width: 100%;
  min-height: 100%;

}
html
{
  height: 100%;

background-color: transparent !important;

}
.background
{
  background-image: url('../images/background.jpg');
  background-size: 100%;
  background-attachment: fixed;
  background-repeat:no-repeat;
  opacity: 0.3;
  position: absolute;
  top: 0px;
  left: 0px;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;

}
.foreground
{
  background-color: transparent ;
  position: relative;

}
@keyframes fadeInBackground {
  0%,100% { opacity: 0.1 }
  50% { opacity: 0.2 }
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active
{
 -webkit-box-shadow: 0 0 0 30px black inset !important;
 -webkit-text-fill-color: white !important;
}
.DashSpecs
{
  color: #ccc;
  font-shadow: 1px 1px #fff;
}
.blackout
{
  background-color: rgba(0,0,0,0.5);
  padding: 10px;
}
h5
{
  color: #417eb6;
}
canvas
{
  width: auto important;
  border: 1px solid #222;
}
.ChartWatermark
{
  position: absolute;
  top: 40%;
  left: 0;
  font-size: 2em;
  text-align: center;
  width: 100%;
  color: rgba(255,255,255,0.3);

}
.radium, .active .nav-link
{
  color: #417eb6 !important;
}
.dropdown-menu .dropdown-item
{
  font-size: 1em !important;
}
.navbar-dark
{
  background: #111;
}
.platformcardimage
{
    background-color: black !important;
    padding-top: 75%;
    background-position: center center;
    background-size: 80% 80%;
    background-repeat: no-repeat;
}
.platformcard:hover .platformcardimage
{
  scale(0.9);
}
.platformdescription
{
  height:85px;
  overflow: hidden;
}
.platformcard, .servertypecard
{
  cursor: pointer;
  margin-bottom: 20px;
}
.servertypes
{
  list-style-type: none;
  padding: 5px;
}
.servertypes b
{
  color: #417eb6 !important;
}
.selectedcard
{
  animation: pulseborder 2s infinite;
  border: 3px solid #417eb6 !important;
}
.unselectedcard.alreadyinstalled
{
  animation: pulseborderred 2s infinite;
  border: 3px solid #fc85bc !important;
}
@keyframes pulseborder {
	0% {

		box-shadow: 0 0 0 0 rgba(132, 252, 188, 0.7);
	}

	70% {

		box-shadow: 0 0 0 10px rgba(132, 252, 188, 0.0);
	}

	100% {
	);
		box-shadow: 0 0 0 0 rgba(132, 252, 188, 0);
	}
}

@keyframes pulseborderred {
	0% {

		box-shadow: 0 0 0 0 rgba(252, 132, 188, 0.7);
	}

	70% {

		box-shadow: 0 0 0 10px rgba(252, 132, 188, 0.0);
	}

	100% {
	);
		box-shadow: 0 0 0 0 rgba(252, 132, 188, 0);
	}
}

.platformcard:hover .platformcardimage, .servertypecard:hover .platformcardimage
{
  animation: zoomimage 1s forwards;

}

@keyframes zoomimage {
  0% {
      background-size: 100% 100%;
  }

  100% {
      background-size: 110% 110%;
  }
}


.cardtick, .cardcross
{
  display:none;
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.selectedcard .cardtick
{
  display: block;
}
.unselectedcard .cardcross
{
  display: block;
}
select:hover
{
  border: 1px solid rgba(132, 252, 188, 0.7);
}
.cardpricing
{
  font-size: 1.3em;
}
.worldmap
{
  padding-top: 70%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.locationbuttons
{
  position: absolute;
  top: 1%;
}
.countryimage
{
    max-height: 16px;
}



.pinpoint {
  position: absolute;
  top: 48%;
  left: 28%;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  border: 1px solid yellow;
  background-color: yellow;
  animation: pinpulse 1s infinite;
  display:none;
}
@keyframes pinpulse {
	0% {

		box-shadow: 0 0 0 0 rgba(132, 252, 188, 0.7);
	}

	70% {

		box-shadow: 0 0 0 10px rgba(132, 252, 188, 0.0);
	}

	100% {

		box-shadow: 0 0 0 0 rgba(132, 252, 188, 0);
	}
}
.step2, .step3, .step4, .step5
{
  display:none;
}
.appearslowly
{
  animation: appearin 2s forwards;
}
@keyframes appearin {
from {
   opacity: 0;
 }
 to {
   opacity: 1;

 }
}
.vpndownload
{
  cursor: pointer;
  height: 50px;
}
.small_image
{
  height: 40px;
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}


.wrapper {
    display: flex;
    width: 100%;
}

#sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 999;
    background: #222;
    color: #fff;
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #6d7fcc;
}

#sidebar ul.components {
    padding: 20px 0;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    background: #333;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #333;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article,
a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: calc(100% - 250px);
    padding: 40px;
    min-height: 100vh;
    transition: all 0.3s;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 65px;
}

#content.active {
    width: 100%;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #content {
        width: 100%;
    }
    #content.active {
        width: calc(100% - 250px);
    }
    #sidebarCollapse span {
        display: none;
    }
}
#sidebar
{
  margin-top: 60px !important;
}
.form-control[readonly]
{
  background-color: #222;
  color: white;
}