body {font-family: 'Noto Sans';font-size: 16px;}
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* Floating announcement button */
.announcement-float-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #009ada, #172846);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: all 0.3s ease;
    text-decoration: none;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 154, 218, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 154, 218, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 154, 218, 0);
    }
}

.announcement-float-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    color: white;
}

.announcement-float-btn::after {
    content: 'announcements';
    position: absolute;
    right: 70px;
    background: #172846;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.announcement-float-btn:hover::after {
    opacity: 1;
}

.announcement-float-btn i {
    font-size: 1.5rem;
}

/* Responsive adjustments for the floating button */
@media (max-width: 768px) {
    .announcement-float-btn {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
    
    .announcement-float-btn i {
        font-size: 1.2rem;
    }
}

/* Button background color change for pills-home-tab */
#pills-home-tab.nav-link {
    background-color: #0275aa !important;
}

body.login {
  background-color: #070f26;
  overflow-x: hidden;

}
 ul  {
  list-style:none;
  padding-left: 0px;
  margin-bottom: 0px;
}

.container {
  width: 1300px;
  max-width: 100%;
}

.navbar.sticky-top.scrolled .navbar-nav .nav-link {
color:#fff;font-size: 16px;
}

/* Style when scrolled */
.navbar.sticky-top.scrolled {
  background-color: #172846;
  border-top:5px solid #009ada;
  border-bottom: 5px solid #009ada;
}
.navbar .navbar-nav .nav-link {
  color: #676767;
   font-weight: 300;
  font-family: 'MADE TOMMY', sans-serif !important; 

}
.collapse.navbar-collapse {justify-content: space-between;padding-top: 30px;}
.navbar.sticky-top {background-color: #fff;padding: 15px 0;}

.login-register {
  position: absolute;
  right: 0px;
  top: 0px;
  color: #fff;
  background-color: #009ada;
  padding: 0px 10px;
  width: 186px;
}

.login-register::before {
  position: absolute;
  top: -46px;
  content: "";
  background-color: #009ada;
  width: 58px;
  height: 85px;
  z-index: -1;
  left: -44px;
  transform: rotate(-51deg);
}
.video-section, .reward-badge {background-color: #fff;padding: 60px 0;}
.bg-blue.upevent {padding: 60px 0 0;}
video {width: 100%;max-width:900px;height: auto;}
.video-section h3 {
color: #5e8ac6;
font-size: 38px;margin-bottom: 30px;padding-top: 150px;
}
.bg-blue {background-color: #5e8ac6;}
.reward-badge h3 {color: #5e8ac6; font-size: 50px;padding-bottom: 20px;}
.reward-badge span {display: block;color: #050505;font-weight: 300;}
.upevent {color: #fff;}
.upevent h2 {font-size: 50px;padding-bottom: 50px;padding-left: 120px;}
.banner {position: relative;}
.stepup {background-color: #5e8ac6;position: absolute;left: 0;
    right: 0; font-family: "Bebas Neue", sans-serif;
    text-align: center;

    margin: 0px auto;
    top: 83%;
    width: 240px;
    border-radius: 10px;
    line-height: 16px;}
   .stepup {font-family: "Bebas Neue", sans-serif;}
    .stepup h3  {
    font-size: 48px; font-family: "Bebas Neue", sans-serif;
    color: #fff;margin-bottom: 0px;
}

.stepup h2 {font-size: 100px;font-family: "Bebas Neue", sans-serif;color: #fff;line-height: 36px;}
.stepup h5 {font-size: 48px;font-family: "Bebas Neue", sans-serif;color: #fff;}
.bor-bo10 {border-bottom: 10px solid #fff;}
.bor-bo5 {border-bottom: 5px solid #fff;}
.bor-right5 {border-right: 5px solid #fff;}
.login-register h2 a {font-size: 14px;color: #fff;text-decoration: none;}
.event-width {width: 100%;}
.navbar-nav {
  align-items: center;
}
.pad60 {padding: 60px 0;}
.tableone {height: 130px;vertical-align: bottom;}
.event-table.upevent h5 {font-size: 30px;}
.event-table.upevent span {font-size: 20px;}
.tabletwo {height: 225px;vertical-align: bottom;}
.left-width{width: 38%;}
.middle-width{width: 30%;}
.navbar .navbar-nav .nav-link.active {
    color: #172846;
    font-weight: 700;}
.navbar li.nav-item {
    padding-right: 30px;}
.pad-left15 {padding-left: 15px;}
.login-form {
      max-width: 100%;
    border:2px solid #036292;
    padding:35px;
    border-radius: 20px;
}

.login-form h2 {
  font-size: 25px;
  color: #fff;
  margin-bottom: 30px;
}

.login-form select {
  background-color: transparent;
  color: #fff;
  border:1px solid #009ada;
}

.login-form select option {
  color: #000;
}

.form-control::placeholder, select.form-control::placeholder {
  color: #fff;

}
.login-form a {color: #fff;}

.form-control:focus, select.form-control:focus  {background-color: transparent;color: #fff;}

::-ms-input-placeholder { 
  color:#fff;
}

.login-form input  {
border:1px solid #009ada;
background-color: transparent;
color:#fff;
border-radius: 10px;
}

.enter-btn  {
    background-color: #044a72;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;cursor: pointer;
}

/*   */

.login-form label.form-check-label {color: #fff;font-size:14px;}

footer {
  background-color: #000d42;
  padding: 60px 0;
  color: #fff;
      border-top: 10px solid #59cdfd;
}

footer ul li a {color:#fff;text-decoration: none;font-size: 15px;}

.table-columns {width: 400px;margin: 0px auto;}
.table-columns table tr, .table-columns table th, .table-columns table td {border:1px solid #0275ab !important ;}
.custom-rounded-table th a {text-decoration: none;color: #fff;}
.custom-rounded-table th.bg-bluesss {background-color: #009ada!important;}
.custom-rounded-table {
 border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid #009ada; 
  border-radius: 15px;
  overflow: hidden;
}
.profileteam-table .col-md-2.bg-bluess {background-color: #009ada;border-top-left-radius: 15px;border-bottom-left-radius: 15px;
  padding-top: 20px;}
.table-row {border: 1px solid #009ada;border-radius: 15px;display: flex
    ;justify-content: center; align-items: center; text-align: center;padding: 0px;}
    
.table-columns table td, .table-columns table tr {color: #acd2f9;}
.profileteam-table .col-md-2.bg-bluess {background-color: #009ada;border-top-left-radius: 15px;border-bottom-left-radius: 15px;
  padding-top: 20px;}
.profileteam-table {color: #fff;}
@media screen and (max-width: 1200px) {
.login-form {
    padding: 20px;
}
}


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

.navbar li.nav-item {
    padding-right: 7px;
}
.navbar li.nav-item {
    padding-right: 0px;
    border-bottom: 1px solid #fff;
    width: 100%;
    text-align: center;
    background-color: #172846;
}
.navbar-toggler {
  border: 2px solid #fff;
    background-color: #598fbc;
}
.navbar .navbar-nav .nav-link, .navbar .navbar-nav .nav-link.active  {
    color: #fff;
}
ul.navbar-nav {
    border: 1px solid #fff;
    position: absolute;
    left: 1px;
    width: 100%;
    top: 104px;
    left: 0px;
}
.navbar.sticky-top.scrolled {
    padding-top: 50px;
}

.login-register::before {
  width: 58px;
  height: 81px;
  left: -46px;
  transform: rotate(-55deg);
}
}
.mapfit p {
  color: #cacccd;font-size: 14px;width: 54%;
  }

.team-invite {border:1px solid #009ada;border-radius: 10px;padding: 60px 0;}

@media screen and (max-width:767px) {
  .mapfit .lists .d-flex {
    flex-direction: row;
}
.team-invite {
  width: 90%;
}
.table-row {display: block;}

  .lists .d-flex {justify-content: center;}
.full-width {
  width:90%;
  margin:0px auto;
}
.video-section h3 {
    padding-top: 30px;
}
.milestones-img {
  flex-direction: column;
    padding: 30px;
}
.stepup {width: 100%;position: relative;}
.video-section, .reward-badge {padding: 30px 0;}
.video-section h3 {    font-size: 32px;padding-bottom: 20px;}
.reward-badge h3 {
    font-size: 30px;
    padding-bottom: 20px;
}
.reward-badge img {padding: 0;        width: 100%; margin: 0px auto;}
.upevent h2 {
    font-size: 32px;
    padding-bottom: 30px;
    padding-left: 15px;
}
.event-table.upevent h5 {font-size: 24px;}
.event-table.upevent span {font-size: 15px;}
.myprofile  .flex-direction {flex-direction: column;}
.items-invitation .col-md-4.d-flex, .items-invitation .col-md-2.d-flex, .items-invitation .col-md-2.d-flex {justify-content: center;}
}

@media screen and (max-width: 575px) {
footer {text-align: center;}
.footer-img {padding-bottom: 30px;}
footer .list {padding-bottom: 30px;}
.column-flex {flex-direction: column;}
.items-invitation a.items-link {margin-bottom: 20px;}
.login-register::before {
  width: 58px;
  height: 79px;
  left: -46px;
  transform: rotate(-58deg);
}  
}

.myprofile {color: #fff;}
.myprofile h1 {font-size: 16px;}
.myprofile span {font-size: 25px;display: block;}
.myprofile button {font-size: 14px;}
.items-invitation a.items-link {
    background-color: transparent;
    border:1px solid #0275aa;
    margin-right: 15px;
    padding: 10px 20px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
}

.items-invitation a.items-link.active{
    background-color: #009ada;
}

.items-invitation .items-lists {
    border:1px solid #0275aa;
    border-radius: 10px;
    padding: 20px 30px;
}
.items-invitation .items-lists table  {margin-top: 20px;}
.items-invitation .items-lists table th {width: 180px;}
.items-invitation .items-lists table tr td, .items-invitation .items-lists table tr, .items-invitation .items-lists table th {
    padding-bottom: 20px;
}
.items-invitation {color: #fff;}
.gap-70 {gap:70px;}
.items-invitation .col-md-2 .items-lists {
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.lists ul li {margin-right: 15px;font-size: 15px;color: #80d8fc;}

.team-rules {width: 400px;max-width: 100%;}

.team-rules h3 {font-size: 15px;color: #fff;}

.team-rules p {color: #b2b4b5;font-size: 14px;}

.team-rules .form-group input {

    background-color: transparent;

    border-bottom: 2px solid #fff!important;

    border:none;    text-align: center;

    font-size: 22px;

    margin-bottom: 40px;color: #fff;

}



.team-rules .form-group input::placeholder {

  color: #fff;

  opacity: 1; /* Firefox */

}

.pad-bot60 {
  padding-bottom: 60px;
}
.profiledit {color: #fff;}
.profiledit  .form-group label, .note {display: block;}
.profiledit  .form-group input {
    background-color: transparent;
    border-bottom: 2px solid #5e8ac6!important;
    border: none;
    font-size: 22px;
    color: #fff;
}
.profiledit  .form-group.name {    position: relative;
    max-width: 100%;
    width: 220px;}

.profiledit  .form-group.name input {width:250px;}

.profiledit  .form-group.email {    position: relative;
    max-width: 100%;
    width: 330px;}

.profiledit  .form-group.email input {width:330px;}

.note.pos-abs {position:absolute;}
.profiledit  .form-group.age {  
    max-width: 100%;
    width: 75px;}

.profiledit  .form-group.age input {width:75px;}

.edit-icon{
  position: absolute;
  bottom: 12px;
  right: 5px;
}

.descrip {display: flex;justify-content: end;flex-direction: column;}

.team-invite {
  width: 520px;
  max-width: 100%;
  margin: 0px auto;
  text-align: center;
  margin-bottom: 60px;
  border-radius: 10px;
  padding: 60px 0;
}


.team-rules  .input-group input {background-color: transparent;padding-left: 60px;

    border-top-left-radius: 10px;

    border-bottom-left-radius: 10px;

}
.team-rules .input-group .form-control, .team-rules .input-group span.input-group-text {font-size: 14px;}
.team-rules  .input-group-text {

      background-color: #026c9e;

    border: navajowhite;

    border-top-right-radius: 10px!important;

    border-bottom-right-radius: 10px!important;

    color: #fff;cursor: pointer;

}



.user-groups {    position: absolute;

    left: 10px;}

 

.team-rules .form-group input::-ms-input-placeholder { /* Edge 12 -18 */

  color: #fff;

}

*:focus {

    outline: none;

}
.Statistics h4 {font-size: 20px;color: #fff;}
.Statistics  .nav-pills .nav-link.active, .Statistics  .nav-pills .show>.nav-link, .Statistics .nav-pills .nav-link
 {padding-left: 30px;padding-right: 30px;font-size: 16px;}
.Statistics ul.nav.nav-pills {
    border: 1px solid #0275aa;
    border-radius: 20px;
}

.Statistics table tr,  .Statistics table th, .Statistics table td {background-color: transparent;border: none;color: #fff;}
.mapfit button.map-text {
    font-size: 18px;
    color: #009ada;
    padding: 10px 20px;
    border-radius: 5px;
}

  .mapfit .lists ul li {margin-right: 30px;}
  
  .mapfit .lists ul li span {
  
      font-size: 14px;
      color: #fff;
      display: inline-flex;
  }
  .mapfit .lists ul li img {    margin-right: 10px;}
  
.Leaderboard .individual-form input::placeholder {
  color: #009ada;
  opacity: 1; 
}

.Leaderboard .individual-form input::-ms-input-placeholder { 
  color: #009ada;
}
.Leaderboard h1 {
  font-size: 30px;
  color: #fff;
  padding-left: 30px;
  margin-bottom: 0;
}
.Leaderboard table tr, .Leaderboard table th, .Leaderboard table td {
  background-color: transparent;
  border: none;
  color: #fff;padding:10px 20px;position: relative;
}
.Leaderboard table thead, .bg-blues {  overflow: hidden;
  padding: 10px;
background-color: #009ada;}

.bg-blues {display: flex;justify-content: end;}
.Leaderboard .list-team a {
  background-color: transparent;
  border: 1px solid #fff;
    padding: 5px 20px;
  border-radius: 15px;margin-top: 20px;
  float: left;color:#fff;
  text-decoration: none;
  margin-right: 15px;
}
.Leaderboard .list-team {padding-right: 0px;}
.Leaderboard  .individual-form {padding-left: 0px;border-top:5px solid #009ada;display: flex; align-items: center;justify-content: center;}
.Leaderboard .list-team a.active {
background-color: #fff;color: #009ada;margin-right: 15px;
}
.Leaderboard  .individual-form input {

  background-color: transparent;
  border: 1px solid #0275aa;
  border-radius: 10px;
  padding: 6px;
      color: #41b0dd;
      margin-right: 10px;
}

.btn.btn-search:hover {color: #fff;background-color: #153451;}

.Leaderboard  .individual-form select {
  background-color: transparent;
  border-radius: 10px;
  padding: 6px;    margin-right: 15px;
  color: #009ada; border: 1px solid #0275aa;
}
.btn-search  {
  background-color: #153451;
  padding: 6px 25px;
  border-radius: 10px;
  color: #fff;
}
.badges-heading h3 {font-size: 25px;}

.badges-heading p {color: #aad0e0;font-size: 16px;}

.progress {
  height: 40px;
  border: 1px solid #03608e;
  position: relative;
  background-color: #070f26;
}
.progress-bar.progress-bar-warning {
  position: absolute;
  left: 50%;
  height: 39px;
}
.progress .progress-bar.progress-bar-success {
    background-color: #062543;
}
.progress .progress-bar.progress-bar-warning {
    background-color: transparent;    
    font-size: 17px;
    color: #fff;
    text-align: left;
    padding-left: 15px;
}
.badges  h2 {
  color: #fff;
  font-size: 17px;
  margin-bottom: 15px;
}
@media screen and (max-width: 992px) {

.Leaderboard  .individual-form {
  padding: 15px;padding-left: 20px;
}
}
@media (max-width: 480px) {
  .lists .d-flex {
    flex-direction: column;
}
.profiledit  .form-group.age {
  max-width: 100%;
  width: 100%;
}
  .login-form {
    max-width: 100%;
    padding: 10px;
    margin: 0px auto;
}
.navbar-brand img {
    width: 120px;
}
.navbar-toggler-icon {
    width: 1em;
    height: 1em;
}
.navbar-toggler {
    padding: 4px 8px;
}
.Leaderboard  .individual-form select, .Leaderboard .individual-form input {
  width: 100%;        margin-bottom: 15px;
      margin-top: 0px !important;
}
}

.datapermission {color:#070f26;}
.datapermission ul li {margin-bottom: 20px;}
.datapermission a, .team-invite a {
    background-color: #0099d9;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    width: 170px;
    border-radius: 10px;
    padding: 10px 20px;
    text-align: center;
}
.team-invite a {
  margin-right: 10px;
}
.datapermission span {color:#009ada;}