:root {
    --scrollbarWidth: 9px;
    --scrollbarBg: rgba(99, 102, 241, 0);
    --scrollbarThumb: #eee;
  }

* {
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

h1 {
  font-size: 52px;
  color: white;
  font-weight: 400;
}

h2 {
  font-weight: 300;
  font-size: 20px;
  color: rgba(229,235,255,.8);
}

h5 {
  color: white;
  font-weight: 300;
  font-size: 32px;
  padding:2rem 2rem 0 2rem;
}

strong {
  font-weight: 700;
}

p {
  color: #142149;
}

#logo {
  max-width: 152px;
}

#triggerloading {
  visibility: hidden;
  opacity:0;
  position: absolute;
  top:0;
}

html, body {
    height: 100%;
    background-size:cover;
    overflow-x: hidden;
}

body {
  background-image: url('/img/bg.svg');
  background-size: 100%;
  background-position: bottom;
  background-repeat: no-repeat;
}

#regionList, #region-container, #planList {
    /* overflow-y: scroll; */
    max-width: 750px;
    z-index: 3;
    scrollbar-width: var(--scrollbarWidth);
    scrollbar-color: var(--scrollbarThumb) var(--scrollbarBg);
    /* box-shadow: 0 16px 40px 0 rgba(10,14,29,.04),0 16px 80px 0 rgba(10,14,29,.16); */
}

#region-container {
  height: 300px;
  position: relative;
}

.box-shadow::after {

    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    transition: box-shadow .3s ease;
    box-shadow: 0 4px 32px 0 rgba(10,14,29,.02),0 8px 64px 0 rgba(10,14,29,.08);
    border-radius: 3px;

}

li:hover ::after {
    box-shadow: 0 16px 40px 0 rgba(10,14,29,.06),0 16px 80px 0 rgba(10,14,29,.16);
  }

li:hover {
    transform: translate3d(20px,0,0);
  }



 #loadingAnimation div .modal-content {
    text-align: center;
    align-self: inherit;
    justify-self: initial;
    }


/* took a little bit of CSS from vultr.com to reproduce the header background behavior */

* {
    transition: all 200ms;
  }
  
  header {
    display:flex;
    position: relative;
    z-index: 0;
  }
  
  body {
    min-height:100%;
    width:100%;
  }
  
  main {
    position: relative;
    z-index: 0;
  }

  .modal-backdrop.show {
    opacity: 0;
  }
  
  ul {
    max-width:500px;
    list-style: none;
    margin-top: 0px;
    padding-top: 2rem;
    padding-left:0px;
    overflow-y: visible;
    min-height: 500px;;

  }

  .offcanvas-body::-webkit-scrollbar,   ::-webkit-scrollbar {
    width: var(--scrollbarWidth);
  }
  .offcanvas-body::-webkit-scrollbar-track,  ::-webkit-scrollbar-track {
    background: var(--scrollbarBg);
  }
  .offcanvas-body::-webkit-scrollbar-thumb,  ::-webkit-scrollbar-thumb  {
    background-color: var(--scrollbarThumb);
    border-radius: 6px;
    border: 3px solid var(--scrollbarBg);
  }
  
  fieldset, fieldset input {
    padding: 1rem;
    margin:1rem;
    color:white;
  }
  
  li {
    max-width:700px;
    color:black;
    background:white;
    margin-bottom:2rem;
    position:relative;
    border-radius: 3px;
    display: grid;
    grid-template-columns: 50px repeat(4, 1fr);
    grid-gap: 5px;
  
  }

  li * {
    margin:0px;
  }

  .li-flag {
    grid-area: 2/ 3 / 5 / 4;
  }

  .li-city {
    grid-area: 0 / 2 / 2 / 4;
    font-size: 21px;
    font-weight: bold;
    }
    .li-country {
    grid-area: 2 / 1 / 3 / 4;
    }
    .li-options {
    grid-area: 1 / 4 / 6 / 6;
    place-self:center;
    font-weight: 500;
    text-transform: uppercase;
    }

    .li-options p {
      font-size: .75rem;
      color:#142149;
      letter-spacing: 2px;;
    }

    .li-options svg {
      width: 20px;
      fill:#007bfc;

    }
  
  /* keyframes */ 

#offcanvasBottom {
  background: linear-gradient(30deg,#021048,#1e38a3);
}

.offcanvas-header {
  /* border-bottom: 1px solid rgba(229,235,255,.3); */
}

hr {
  color: rgb(229, 235, 255);
}

.offcanvas-header button {
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

#planList {
  display: grid;
overflow-y: scroll;
grid-template-columns: 1fr 1fr;
grid-gap: 2rem;
place-items: center;
  
}

.planType {
  width: 9rem;
  height: 10rem;
  display: grid;
  place-items: center;
  padding:0;
  margin:0;
  grid-template-columns: auto;
  grid-template-rows: auto;
}

.planType button {
  all:unset;
  color: #fff;
  background: #007bfc;
  padding: 1rem 2.3rem;
  align-self: end;
}

.planType:hover {
  transform: translate3d(0,-8px,0);
}

  .box {
	padding: 10px;
	margin: 0 0 20px 0;
}

@keyframes append-animate {
	from {
		transform: scale(1.1);
        transform: translate3d(0,-8px,0);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;	
        transform: translate3d(0,0px,0);
	}
}

.added {
	animation: append-animate .3s linear;
}

#earth-col {
    margin-right: -30vw;
    width: 65vw;
    margin-left: -10vw;
    padding: 0px;
    margin-top: auto;
}

#earth-col.earth-col-scrolled {
    position: fixed;
    width: 75vw;
    right: -15vw;
    margin-right:0px;
}

.vultrpop {
	width: 5em;
	max-width: 8vh;
	height: 5em;
	max-height: 8vh;
	transform: translate(-50%, -50%);
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0ic3lnbmV0X19vbi13aGl0ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNDIgMzYuMDkiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojYzlmNGZmO30uY2xzLTJ7ZmlsbDojNTFiOWZmO30uY2xzLTN7ZmlsbDojMDA3YmZjO308L3N0eWxlPjwvZGVmcz48dGl0bGU+c3lnbmV0X19vbi13aGl0ZTwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTQuNjMsNGEyLjA5LDIuMDksMCwwLDAtMS43Ny0xSDIuMUEyLjEsMi4xLDAsMCwwLDAsNS4xLDIuMTIsMi4xMiwwLDAsMCwuMzIsNi4yMmwyLjc3LDQuMDcsMTMuODUtM1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTcsNy4zN2EyLjExLDIuMTEsMCwwLDAtMS43OC0xSDQuNUEyLjA5LDIuMDksMCwwLDAsMi42Niw5LjYxbDMuMDksNC45LDE0LjMxLTIuMjRaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0zKSIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTUuNjIsMTQuMzFhMi4xNCwyLjE0LDAsMCwxLS4xOS0xLjg4LDIuMTEsMi4xMSwwLDAsMSwyLTEuMzRIMTguMTVhMi4xLDIuMSwwLDAsMSwxLjc4LDFsOS42MywxNS4yN2EyLjEyLDIuMTIsMCwwLDEsLjMyLDEuMTIsMi4xNSwyLjE1LDAsMCwxLS4zMiwxLjEybC01LjM4LDguNTNhMi4xMSwyLjExLDAsMCwxLTMuNTYsMFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMpIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMzIuNzQsMTkuMTlhMi4xMSwyLjExLDAsMCwwLDMuNTYsMGwxLjg1LTIuOTMsMy41My01LjZBMi4xMiwyLjEyLDAsMCwwLDQyLDkuNTRhMi4xNSwyLjE1LDAsMCwwLS4zMi0xLjEyTDM4Ljg4LDRBMi4xMSwyLjExLDAsMCwwLDM3LjEsM0gyNi4zNGEyLjEsMi4xLDAsMCwwLTIuMSwyLjEsMiwyLDAsMCwwLC4zMywxLjEyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMykiLz48L3N2Zz4=);
	background-size: 80%;
	cursor: pointer;
	pointer-events: all;
}

#planet::after {
	content: "";
	position: absolute;
	top: 9.85%;
	left: 9.85%;
	bottom: 9.85%;
	right: 9.85%;
	box-sizing: border-box;
	border: 1px #D0D0D0 solid;
	border-radius: 50%;
}


.site-banner {
  margin-bottom: -450px;
  padding-bottom: 440px;
  }

  .banner__background {
  min-height: 830px; /* 942px */
  position: absolute;
  top: 0;
  left: 50%; /* 50% for centered template */
  z-index: 10;
  width: 100%; /* 100% for centered  */
  height: 100%;
  min-width: 1920px;
  user-select: none;
  transform: translateX(-50%);
  background: linear-gradient(90deg,#021048,#1e38a3);
  }
  .banner__background > svg:nth-child(1) {
  bottom: -1px;
  position: absolute;
  bottom: -1px;
  left: -1px;
  right: -1px;
  float: left;
  }

  .modal-header, .modal-footer {
    border:none;
  }