:root {
  --primary: #031927;
  --dark: #010c13;
  --light: #edf7fd;
  --green: #C8E0F4;
  --secondary: #fdf0d8;
  --success: #05803a;
}

.bg-gradient {
  background: rgb(29,59,157);
  background: -moz-linear-gradient(38deg, rgba(29,59,157,0.5) 0%, rgba(14,31,89,0.7) 100%);
  background: -webkit-linear-gradient(38deg, rgba(29,59,157,0.5) 0%, rgba(14,31,89,0.7) 100%);
  background: linear-gradient(38deg, rgba(29,59,157,0.5) 0%, rgba(14,31,89,0.7) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1d3b9d",endColorstr="#0e1f59",GradientType=1);
}

.bg-primary {
  background-color: var(--primary);
}

.bg-secondary {
  background-color: var(--secondary);
}

.bg-green {
  background-color: var(--green);
}

.bg-success {
  background-color: var(--success);
}

.bg-opacity {
  background-color: rgba(0, 0, 0, 0.1);
}

.text-primary {
  color: var(--primary);
}

.text-secondary {
  color: var(--secondary);
}

.text-green {
  color: var(--green);
}

.text-success {
  color: var(--success);
}

body {
  background-color: var(--primary);
  color: var(--secondary);
}

.bk-custom-btn {
  padding-bottom: 5px;
  color: var(--light);
  position: relative;
}
.bk-custom-btn::after {
  transition: .2s;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 2px;
  background-color: var(--light);
}
.bk-custom-btn:hover::after {
  width: 20%;
  height: 4px;
}
.bk-highlighted-text {
  color: var(--light);
}
.bk-bg-dark {
  background-color: var(--dark);
}
.bk-text-dark {
  color: var(--dark);
}

.mx-loader {
  width: 100%;
  height: 100vh;
  background-color: var(--primary);
  color: #FFFFFF;
  position: fixed;
  top: 0;
  left: 0;
}

.mx-fixed-container {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  min-height: 100vh;
  height: 100%;
  overflow-y: auto;
  z-index: 10;
}

.mx-form-icon {
  width: 50px;
}

.mx-form-input {
  width: calc(100% - 50px);
}

.mx-form-input input,
.mx-form-input select {
  background-color: #FFFFFF;
  color: #555;
  opacity: 1;
  border: none;
}

.mx-sticker-down {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 2;
}

.mx-plans-hover:hover {
  /* background: rgb(4,15,54);
  background: -moz-linear-gradient(38deg, rgba(4,15,54,0.5) 0%, rgba(2,10,36,0.7) 100%);
  background: -webkit-linear-gradient(38deg, rgba(4,15,54,0.5) 0%, rgba(2,10,36,0.7) 100%);
  background: linear-gradient(38deg, rgba(4,15,54,0.5) 0%, rgba(2,10,36,0.7) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#040f36",endColorstr="#020a24",GradientType=1); */
}

.mx-features-img {
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
}

.mx-float-icon {
  position: fixed;
  bottom: 80px;
  left: 20px;
}

@keyframes loadbar {
0%,to { left: 0; right: 80% }
25%,75% { left: 0; right: 0 }
50% { left: 80%; right: 0 }
}

.gg-loadbar,
.gg-loadbar::before {
display: block;
box-sizing: border-box;
height: 4px
}

.gg-loadbar {
position: relative;
transform: scale(var(--ggs,1));
width: 18px;
margin: 5px 0;
}

.gg-loadbar::before {
content: "";
position: absolute;
border-radius: 4px;
background: currentColor;
animation: loadbar 2s cubic-bezier(0,0,.58,1) infinite
}

.bk-bordered-card {
  border: 1px solid var(--light);
}