:root {
    --rgb-black: 20, 20, 20;
    --rgb-yellow: 255, 226, 0;
    
    --primary-color: #0081F2;
    
    --yellow: #FEFB53;
    --orange: #FF7907;
    --green: #70F155;
    --purple: #6F309E;
    --brown: #995616;
    --blue: #1E49E2;
}

html,body {
    height:100%;
    padding:0;
    margin:0;
    max-height:100%;
}

body {
  overflow:scroll;
  font-family:Inter, sans-serif;
  color: black;
  font-weight:400;
  height:100%;
  max-height:100%;
  font-size:15px;
  /* background-color:#f3f2f1; */
}

.navbar-nav .nav-item {
    /* margin-right:5%; */
}

b, strong{font-weight:700;}

a {
    color:#000;
    /* font-size:18px; */
}
a:link {
    /* text-decoration: none; */
}
a:visited{text-decoration: none;}
a:hover {
    text-decoration: underline;
    /* text-decoration-color:var(--primary-color); */
}
a.btn:hover {
    text-decoration:none;
}

img{border:none;max-width:100%;}
h1 {
    font-size:50px;
    font-weight:700;
}
h2 {
  font-size:42px;
}
h3 {
  font-size:30px;
}
h4 {
  font-size:25px;
}
h5 {
    font-size:18px;
    font-weight:100;
}
h1, h2, h3{
  margin-bottom:1.5rem;
  line-height:1.2;
}
/*h3, h3 a{font-size:1.6rem;}*/

@media only screen and (max-width: 765px) {
	h1{font-size:32px; margin-bottom:1rem;}
	h2{font-size:24px; margin-bottom:1rem;}
}

hr {
    color:#ddd;
    opacity:1;
}

div.space1{width:100%;min-height:13px;} /* 8x1.618 */
div.space2{width:100%;min-height:21px;} /* 8x1.618^2 */
div.space3{width:100%;min-height:34px;}
div.space4{width:100%;min-height:55px;}

label.error {
    color:red;
    font-size:12px;
    font-weight:100;
    margin-top:5px;
}

.lead {
    font-weight:400;
}

.loader {
    display:none;
}
.loader-ctnr {
    position:relative;
}

.top-bott-sep{
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
}

.btn-white {
    background-color:white;
    border-color:black;
    color:black;
}
.btn-white:hover {
    background-color:#eee;
}
.btn-primary {
    background-color:var(--primary-color);
    border-color:var(--primary-color);
    color:white;
}
.btn-primary:hover {
    background-color:var(--primary-color);
    border-color:var(--primary-color);
}
.btn-primary.disabled, .btn-primary:disabled {
  color:#666;
  background-color:#ddd;
  border-color:#aaa;
}

.btn-yellow, .btn-yellow:hover {
background-color:#FEFB53;
color:black;
}
.btn-orange, .btn-orange:hover {
background-color:#FF7907;
color:white;
}
.btn-green, .btn-green:hover {
background-color:#70F155;
color:black;
}
.btn-purple, .btn-purple:hover {
background-color:#6F309E;
color:white;
}
.btn-brown, .btn-brown:hover {
background-color:#995616;
color:white;
}

.btn.btn-lg {
    padding:.5rem 35px;
}
.btn-border {
    border:1px solid #aaa;
    /* border-radius:10px; */
}
.btn-border:hover {
    border-color:var(--primary-color);
}

.btn-light:disabled {
    color:#aaa;
}

.btn-black {
    background-color:black;
    color:white;
}
.btn-black:hover {
    color:white;
    background-color:#666;
}
.btn-grey, .btn-grey:hover {
  background-color:#ddd;
}

.btn-blue, .btn-blue:hover {
  background-color:#1E49E2;
  color:white;
}

.btn.disabled, .btn:disabled {
  color:#666;
  background-color:#ddd;
  border-color:#aaa;
}

.nav-link {
    padding:10px 22px;
    line-height:1.1;
}

.nav-link.active {
    font-weight:bold;
}

.dropdown-toggle::after {
    color:var(--primary-color);
}

.d-d {
	text-align: center;
	padding: .5em 0;
	color: #555;
	border: 1px solid #8af;
	border-radius: 5px;
	cursor: default;
	background:white;
}
.d-hover {
	background:#8af;
	border-style: solid;
	box-shadow: inset 0 2px 3px #888;
}

.bg-grey {
    background-color:#ddd;
}
a.btn.btn-default,
button.btn.btn-default,
a.btn.btn-light,
button.btn.btn-light {
    background: #eee;
    border: 1px solid #ddd;
}

.fw-black {
    font-weight:900;
}
.fw-thin {
  font-weight:100;
}

.text-right {
    text-align:right;
}

.text-primary {
    color:var(--primary-color) !important;
}

.weight-black {
    font-weight:900;
}

.bd-primary {
    border:1px solid var(--primary-color);
}

.bg-blue {
    background-color:var(--primary-color);
}

#footer {
    padding: 2em 0;
    position: sticky;
    height: 130px;
    top: calc( 100vh - 130px );
}

.highlight {
    background: linear-gradient(90deg, rgba(var(--rgb-yellow), 0) 0, rgba(var(--rgb-yellow), 0.75) 5%, rgba(var(--rgb-yellow), 0.25) 95%, rgba(var(--rgb-yellow), 0) 100%);
}

.text-primary-gd {
    background: #1432F5;
    background: linear-gradient(to right, #1432F5 0%, #dc157f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-primary {
  background-color:var(--primary-color);
  color:white;
}
.bg-primary-gd {
    background-image: linear-gradient(90deg, #1432F5, #dc157f);
    color:white;
}
.bg-yellow {
    background-color:var(--yellow);
}
.bg-orange {
    background-color:var(--orange);
}
.bg-green {
    background-color:var(--green);
}
.bg-purple {
    background-color:var(--purple);
}
.bg-brown {
    background-color:var(--brown);
}
.bg-blue {
    background-color:var(--blue);
}

.btn-primary-gd {
    background-image: linear-gradient(90deg, #1432F5, #dc157f);
    color:white;
    border:none;
}

.text-info-gd {
    background: #1432F5;
    background: linear-gradient(to right, #1432F5 0%, #75FA4F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bg-info-gd {
    background-image: linear-gradient(90deg, #1432F5, #75FA4F);
    color:white;
}
.btn-info-gd {
    background-image: linear-gradient(90deg, #1432F5, #75FA4F);
    color:white;
    border:none;
}

/* countdown */
#countdown {
    padding-bottom:20px;
}
#countdown .box {
    width:50px;
    height:50px;
    text-align:center;
    background:black;
    color:white;
    line-height:50px;
    font-size:20px;
    margin:5px;
    border-radius:5px;
}
#countdown.cd-white .box {
    background-color:white;
    border:1px solid black;
    color:black;
}
#countdown .box-c {
    width:50px;
    height:30px;
    text-align:center;
    background:none;
    color:black;
    font-size:30px;
    margin:0 5px 5px;
    font-weight:bold;
}

.sa-box {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border:1px solid #ddd;
    border-radius:8px;
    padding:1.2rem;
    margin:0 5px;
    height:100%;
    min-height:250px;
}
.sa-box .desc {
    font-weight:100;
    margin:25px 0 50px;
}
.sa-box iframe {
  max-width:100%;
}

.circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hidden {
  display: none;
}

@media only screen and (max-width: 768px)  {

    h1 {
        font-size:45px !important;
    }
    
}

.tag-entry {
    background-color: #f3f2f1;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px 10px;
    margin: 5px;
    display: inline-block;
    font-size: 14px;
    color: #555;

}
.tag-entry .del-entry {
    margin-left: 5px;
    cursor: pointer;
}
/*!
 * three-dots - v0.3.2
 * CSS loading animations made with single element
 * https://nzbin.github.io/three-dots/
 *
 * Copyright (c) 2018 nzbin
 * Released under MIT License
 */

/**
 * ==============================================
 * Dot Flashing
 * ==============================================
 */
 .dot-flashing {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #bbb;
    color: #bbb;
    animation: dot-flashing 1s infinite linear alternate;
    animation-delay: 0.5s;
  }
  .dot-flashing::before, .dot-flashing::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
  }
  .dot-flashing::before {
    left: -15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #bbb;
    color: #bbb;
    animation: dot-flashing 1s infinite alternate;
    animation-delay: 0s;
  }
  .dot-flashing::after {
    left: 15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #bbb;
    color: #bbb;
    animation: dot-flashing 1s infinite alternate;
    animation-delay: 1s;
  }
  
  @keyframes dot-flashing {
    0% {
      background-color: #bbb;
    }
    50%, 100% {
      background-color: rgba(200, 200, 200, 0.2);
    }
  }

/**
 * ==============================================
 * Dot Spin
 * ==============================================
 */
 .dot-spin {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: transparent;
    color: transparent;
    box-shadow: 0 -18px 0 0 #9880ff, 12.727926px -12.727926px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.727926px 12.727926px 0 0 rgba(152, 128, 255, 0), 0 18px 0 0 rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 0 rgba(152, 128, 255, 0), -18px 0 0 0 rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 0 rgba(152, 128, 255, 0);
    animation: dot-spin 1.5s infinite linear;
  }
  
  @keyframes dot-spin {
    0%, 100% {
      box-shadow: 0 -18px 0 0 #9880ff, 12.727926px -12.727926px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0);
    }
    12.5% {
      box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.727926px -12.727926px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.727926px 12.727926px 0 0 #9880ff, 0 18px 0 -5px rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0);
    }
    25% {
      box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 0 #9880ff, 12.727926px 12.727926px 0 0 #9880ff, 0 18px 0 0 #9880ff, -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0);
    }
    37.5% {
      box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.727926px 12.727926px 0 0 #9880ff, 0 18px 0 0 #9880ff, -12.727926px 12.727926px 0 0 #9880ff, -18px 0 0 -5px rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0);
    }
    50% {
      box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 0 #9880ff, -12.727926px 12.727926px 0 0 #9880ff, -18px 0 0 0 #9880ff, -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0);
    }
    62.5% {
      box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 0 #9880ff, -18px 0 0 0 #9880ff, -12.727926px -12.727926px 0 0 #9880ff;
    }
    75% {
      box-shadow: 0 -18px 0 0 #9880ff, 12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 0 #9880ff, -12.727926px -12.727926px 0 0 #9880ff;
    }
    87.5% {
      box-shadow: 0 -18px 0 0 #9880ff, 12.727926px -12.727926px 0 0 #9880ff, 18px 0 0 -5px rgba(152, 128, 255, 0), 12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 0 #9880ff;
    }
  }

  
.spin {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 2000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 2000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}