.bb-body {
  font-size: 18px;
  font-family:Georgia, 'Times New Roman', Times, serif;
}
.bb-bg-img {
  background-image: url("../images/code-matrix.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bb-vote-result-body {
  font-size: 18px;
  font-family:Georgia, 'Times New Roman', Times, serif;
  /* background-color: #D5AC4E; */
  background-image: linear-gradient(to right, #D5AC4E 0%, white 20%, white 80%, #D5AC4E 100%);
}

/*--------------------------------Header Related Matters--------------------------------------*/
.bb-header {
  background-color: #640B74;
  color: white;
} 

.bb-header-image {
  margin-left: 5px;
  margin-right: 5px;
}

.bb-container {
 margin: 10px 40px 10px 40px;
}

.bb-vote-result-container{
  margin: 0px 15% 0px 15%;
  padding: 10px 0px 10px 0px;
  background-color: white;
}

.bb-content-wrapper {
  padding: 0px 0px 5px 0px;
}

.bb-title {
  display: flex;
  align-items: flex-end;
}

.bb-title-text {
  margin-top: 10px;
  margin-left: 0px;
  margin-right: 0px;
  height: 10%;
  background-image: linear-gradient(to bottom, #DBB658 0%, #F8E07C 100%);  /*  #DBB658; */
  color: black;
  font-size: 36px;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: 5px;
  border-style: ridge;
  border-color: #DBB658;
}

.bb-left-ribbon {
 margin-right: 0px;
 padding-right: 0px;
 display: flex;
 justify-content: end;
}

.bb-right-ribbon {
 margin-left: 0px;
 padding-left: 0px;
 display: flex;
 justify-content: start;
}

.bb-award {
 margin-top: 50px;
 height: 300px;
 display: flex;
 align-items: flex-end;
 }

.bb-award-first-crown {
  height: 15%;
  display: flex;
  align-items: end;
  text-align: center;
}

.bb-award-first-winner{
  height: 35%;
  padding-bottom: 10px;
  text-align: center;
  display: flex;
  align-items: flex-end;
  font-size: 60px;
  color: black;
}

.bb-award-first-stage {
  height: 50%;
  background-image: linear-gradient(to bottom, #DBB658 0%, #F8E07C 100%);
  border-style: ridge;
  border-color: #B8852C;
  color: black;
  font-size: 36px;
  text-align: center;
  padding: 20px 0px 20px 0px;
}

.bb-award-second-winner{
  height: 65%;
  padding-bottom: 10px;
  text-align: center;
  display: flex;
  align-items: flex-end;
  font-size: 48px;
  color: black;
}

.bb-award-second-stage {
  height: 35%;
  background-image: linear-gradient(to bottom, #DBB658 0%, #F8E07C 100%);
  border-style: ridge;
  border-color: #B8852C;
  color: white;
  font-size: 32px;
  text-align: center;
  padding-top: 20px;
}

.bb-award-third-winner{
  height: 75%;
  padding-bottom: 10px;
  text-align: center;
  display: flex;
  align-items: flex-end;
  font-size: 48px;
  color: black;  
}

.bb-award-third-stage {
  height: 25%;
  background-image: linear-gradient(to bottom, #DBB658 0%, #F8E07C 100%);
  border-style: ridge;
  border-color: #B8852C;
  color: white;
  font-size: 28px;
  text-align: center;
  padding-top: 10px;
}

.bb-score {
  margin:  30px 0px 0px 0px;
  padding: 5px 5px 5px 5px;
  display: flex;
  align-items: center;
 }

 .bb-rank {
  padding: 25px;
  background-image: linear-gradient(to bottom, #DBB658 0%, #F8E07C 100%);
  border-radius: 10px;
  border-color: #B8852C;
  text-align: center;
  color: black;
  font-size: 36px;
 }
 
 .bb-winner {
   color: black;
   font-size: 36px;
   text-align: center;
 }

 .bb-bar {
   overflow:hidden;
   border-radius: 0px 15px 15px 0px;
   background-image: linear-gradient(to bottom, #DBB658 0%, #F8E07C 100%);
   color: #E7C867;
  /* border-style: ridge;
  border-color: #B8852C; */
 }
 
 .bb-vote-points {
  color: black;
  font-size: 26px;
  text-align: center;
 }

/*--------------------------- For All Section Creations, Start Here---------------------------------- */
.bb-section-banner {
  padding: 20px;
  margin-left: 1%;
  margin-right: 1%;
  margin-top: 10px;
  margin-bottom: 10px;
  flex: auto;
  align-items: flex-start;
  border-radius: 5px;
  background-color: rgb(139, 147, 188);
  font-size: 14px;
  color: aliceblue;
}

.bb-center-col {
  margin: 20px 10px 20px 10px;
  /* margin-top: 10px; */
}

.bb-card-left {
  background-color: transparent;
  }

  .bb-card-header-left {
    width: fit-content;
    max-width: 90%;
    height: auto;
    border-color: white;
    border-style: solid;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 15px;
    border-right-width: 15px;
    /* border-width: 1px; */
    border-radius: 0px 0px 0px 0px;
    background-color: #1A233A;
    padding: 5px;
    margin-left: 20px;
    opacity: 1.0 !important;
    isolation: isolate;
    z-index: 2;
  }

  .bb-card-header-left-light {
    width: fit-content;
    max-width: 90%;
    height: auto;
    border-style: solid;
    border-color: #B8852C;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 15px;
    border-right-width: 15px;
    /* border-width: 1px; */
    border-radius: 0px 0px 0px 0px;
    background-color: white;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
    /* text-align: center; */
    opacity: 1.0 !important;
    isolation: isolate;
    z-index: 2;
  }

  .bb-card-header-text {
    text-align: right;
    color: white;
    font-size: 18px;
    font-weight: bold;
    opacity: 1.0 !important;
  }

  .bb-card-header-text-light {
    text-align: center;
    color: black;
    font-size: 42px;
    font-weight: bold;
    /* opacity: 1.0 !important; */
  }
  
  .bb-card-body-left {
    padding: 25px 10px 35px 10px;
    border-color: white;
    border-style: solid;
    border-width: 1px;
    border-radius: 0px 0px 0px 0px;
    margin-top: -20px;
    background-color: transparent;
    color: white;
    font-size: 16px;
    /* display: flex;
    align-items: end; */
  }
  .bb-card-body-left-light {
    padding: 25px 10px 35px 10px;
    border-color: #B8852C;
    border-style: ridge;
    border-width: 3px;
    border-radius: 0px 0px 0px 0px;
    margin-top: -35px;
    background-color: transparent;
    color: white;
    font-size: 16px;
    /* display: flex;
    align-items: end; */
  }

  .bb-card-body-right {
    padding: 25px 10px 35px 10px;
    border-color: white;
    border-style: solid;
    border-width: 1px;
    border-radius: 0px 0px 0px 0px;
    margin-top: -20px;
    background-color: transparent;
    color: white;
    font-size: 16px;
    display: flex;
    align-items: end;
    justify-content: flex-start;
  }
  
  .bb-form-label {
    margin: 0;
    padding: 0;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 16px;
    font-style: oblique;
    color:silver;
  }

  .form-control {
    font-size: 16px;
  }
/*--------------------------- For All Badge Creations, Start Here---------------------------------- */
.bb-badge {
  padding: 1px 5px 1px 5px;
  margin: 2px;
  border-radius: 5px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 12px;
}

/*--------------------------- For All Badge Colours, Start Here---------------------------------- */
  .bb-badge-beige {
    background-color: beige;
    color: darkblue;
  }

  .bb-badge-dark {
  background-color: #272E48;
  color: white;
}


/*--------------------------- For All Button Creations, Start Here---------------------------------- */
.bb-btn {
  margin: 10pt;
  padding: 10pt;
  border-radius: 15pt;
  border-color: darkslategray;
  border-style: solid;
  background-color: rgb(96, 198, 96);
  text-align: center;
  font-size: 12pt;
  font-weight: bold;
  color: rgb(24, 6, 6);
  height: auto;
  width: auto;
}

.bb-btn-op {
  margin: 10pt;
  padding: 10pt;
  border-top: 0pt;
  border-bottom: 0pt;
  border-left: 10pt;
  border-right: 10pt;
  border-radius: 15px;
  border-style: solid;
  background-color: beige;
  color: rgb(24, 6, 6);
  height: auto;
  max-width: 200px;
}

.bb-btn-save {
  margin: 10pt;
  padding: 8pt;
  border: white;  
  border-radius: 10px;
  border-style: solid;
  background-color: white;
  color: #1A233A;
  font-size: 18px;
  font-weight: bold;
  height: auto;
  width: auto;
}

.bb-btn-test {
  padding: 5pt;
  border: white;  
  border-radius: 0px;
  border-style: solid;
  background-color: white;
  color: #1A233A;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  width: auto;
}

.bb-btn-nav {
  padding: 5pt;
  border: #D5AC4E;  
  border-radius: 10px;
  border-style: solid;
  background-color: #D5AC4E;
  color: black;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  width: auto;
}

.bb-btn-easter-egg {
  color: transparent;
  background-color: transparent;
  border-color: transparent;
}
/* -------------------------For All Button, Text Formats, Start Here ------------------------------*/
.bb-btn-number {
  font-size:20pt;
  text-align: left;
}

.bb-btn-description {
  text-align: left;
  font-size: 12pt;
  font-weight: bold;
}

.bb-txt-bold-center {
  text-align: center;
  font-size: 15pt;
  font-weight: bold;
}

.bb-linked-text {
  text-decoration: underline;
}


/* -----------------For All Buttons colors, Start Here --------------------------- */
.bb-btn-purple {
  border-color: rgb(225, 130, 241);
}

.bb-btn-green {
  border-color: green;
}

.bb-btn-red {
  border-color: red;
}

.bb-btn-blue {
  border-color: rgb(49, 140, 243);
}

.bb-btn-orange {
  border-color: rgb(247, 165, 57);
}

.bb-btn-yellow {
  border-color: rgb(252, 252, 77);
}

.bb-btn-bg-beige {
  background-color: beige;
  color: black;
}

.bb-btn-bg-dark {
  background-color: #272E48;
  color: azure;
}

.bb-btn-bg-red {
  background-color: #FF0000;
  color: #000000;
}

/*---------------------- For all hovers, start from here --------------------------------------------*/

.bb-btn:hover {    
  /* text-decoration: none; */
  transform: scale(1.05,1.05);
  transition: 0.5s;
}

.bb-btn-op:hover {
  border-left: 0pt;
  border-right: 0pt;
}

.bb-btn-deli:hover {
  border-left: 0pt;
  border-right: 0pt;
}

.bb-btn-save:hover {
  margin: 10pt;
  padding: 8pt;
  border: white;  
  border-radius: 10px;
  border-style: solid;
  background-color: #1A233A;
  color: white;
  font-weight: bold;
  height: auto;
  width: auto;
}

.bb-btn-test:hover {
  padding: 5pt;
  border: white;  
  border-radius: 0px;
  border-style: solid;
  background-color: #1A233A;
  color: white;
  font-weight: bold;
  height: auto;
  width: auto;
}

.bb-btn-nav:hover {
  padding: 5pt;
  border: #D5AC4E;  
  border-radius: 10px;
  border-style: solid;
  background-color: white;
  color: black;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  width: auto;
}

.bb-btn-save:disabled {
  border: rgb(168, 168, 168);  
  border-radius: 10px;
  border-style: solid;
  background-color: rgb(168, 168, 168);
  color: #1A233A;
}

.bb-btn-easter-egg:focus { 
  color: #1A233A !important;
  background-color: #1A233A !important;
  border-color: #1A233A !important;
}

/********** Confetti Animation ************************/
@keyframes confetti-slow {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
  }
}
@keyframes confetti-medium {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
  }
}
@keyframes confetti-fast {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);
  }
}
.confetti-container {
  perspective: 700px;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.confetti {
  position: absolute;
  z-index: 1000;
  top: -10px;
  border-radius: 0;
}
.confetti--animation-slow {
  animation: confetti-slow 2.25s linear 1 forwards;
}
.confetti--animation-medium {
  animation: confetti-medium 1.75s linear 1 forwards;
}
.confetti--animation-fast {
  animation: confetti-fast 1.25s linear 1 forwards;
}