:root {
    --rgb-black: 20, 20, 20;
    --rgb-yellow: 255, 226, 0;
    
    --primary-color: #0D27F5;
}

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:#0D27F5; */
}
a.btn:hover {
    text-decoration:none;
}

img{border:none;max-width:100%;}
h1 {
    font-size:60px;
    font-weight:700;
}
h2 {
  font-size:42px;
}
h3 {
  font-size:30px;
}
h4 {
  font-size:22px;
}
h5 {
    font-size:18px;
    font-weight:100;
}
h1, h2, h3{
  margin-bottom:1.5rem;
  line-height:1;
}
/*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:#0D27F5;
    color:#0D27F5;
}
.btn-white:hover {
    background-color:#eee;
}
.btn-primary {
    background-color:#0D27F5;
    border-color:#0D27F5;
    color:white;
}
.btn-primary:hover {
    background-color:#0D27F5;
    border-color:#0D27F5;
}

.btn-blue {
    background-color:#0D27F5;
    border:1px solid #0D27F5;
    color:white;
}
.btn-blue:hover {
    background-color:#0D27F5;
    border-color:#0D27F5;
}

.btn.btn-lg {
    padding:.8rem 35px;
}
.btn-border {
    border:1px solid #aaa;
    /* border-radius:10px; */
}
.btn-border:hover {
    border-color:#0D27F5;
}

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

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

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

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

.dropdown-toggle::after {
    color:#0D27F5
}

.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;
}

.score {
    border:1px solid #eee;
    border-radius:5px;
    width:100%;
    line-height:60px;
    margin:2px;
    background-color:#ddd;
    text-align:center;
    position:relative;
    font-size:18px;
    font-weight:bold;
    min-height:60px;
}
.score.level-1, .score.level-2, .btn-level-1.active, .btn-level-2.active {
    background-color:#FF2600;
}
.score.level-3, .btn-level-3.active {
    background-color:#FF9300;
}
.score.level-4, .btn-level-4.active {
    background-color:#FFFB00;
    color:black;
}
.score.level-5, .btn-level-5.active, .bg-primary {
    background-color:#0D27F5 !important;
}
.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;
}
.score .type {
    position:absolute;
    top:5px;
    left:8px;
    line-height:1;
    font-size:15px;
    font-weight:normal;
}

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

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

.text-primary {
    color:#0D27F5 !important;
}

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

.bd-primary {
    border:1px solid #0D27F5;
}

.bg-blue {
    background-color:#0D27F5;
}

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

.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-gd {
    background-image: linear-gradient(90deg, #1432F5, #dc157f);
    color:white;
}
  
.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;
}

.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;
}
@media only screen and (max-width: 768px)  {

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


/*!
 * 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);
    }
}