@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

body{
  font-family: Arial, "Open Sans", sans-serif;
  font-size: 15px;  /* ssw */
}
main#trusteeContainer{
  background:#eee;
  width:60%;
  height: 55vh;
  position:absolute;
  overflow-x: scroll;
  right:6%;
  top: 8%;
  background: rgb(255 255 255 / 67%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
section.barLeaderboard {
    position: absolute;
    display: flex;
    height: 90%;
    bottom: 0;
    left: 8%;
}
#popuptrusteename::after {
    content: 'X';
    position:absolute;
    right: 15px;
    font-size: 18px;
    font-weight: 700;
	cursor: pointer;
}
.bar {display:flex;align-content: stretch;justify-content: flex-end;flex-wrap: nowrap;flex-direction: column;width: 100px;align-items: center;}
.bar p{
    font-size: 16px; /* ssw */
    font-weight: 600;
    line-height: 19px;
    padding: 5px;
}

.filledBar {
           /* bottom:0px; */
           width: 100%;
           }

.bar1 .filledBar{
     height: 85%;
     background:#FFBC7C
     }
.bar2 .filledBar {
    height: 65%;
    background:#FFA651
    }
.bar3 .filledBar{
     height: 50%;
     background:#C8894D;
     }


.bar .badge {
  display: flex;
  padding: 0.3em;
  height: 30px;
  width: 30px;
  font-size: 15px;
  font-weight:900;
  text-align: center;
  border-radius: 50%;
  align-items: center;
  align-content: center;
  justify-content: center;
}


.bar1 .badge {
  background: #ffbc7c;
  color: #fefefe;
  }
.bar2 .badge {
  background: #ffa651;
  color: #fefefe;
  }
.bar3 .badge {
  background: #c8894d;
  color: #fefefe;
  }
  .headerGoal{
    color:#EB9035;
    font-size:40px; /* ssw */ 
    font-weight:800;
  }
 .headerGoal span{
    color:#fff;
  }
.goal h3{color:#fff; font-weight:400; font-size:26px;} /* ssw */
.headerTotal{font-size:40px;font-weight:800;}  /* ssw */
.headerTotal span{color:#fff; }
.total h3{font-size:37px; font-weight:800;} /* ssw */
footer::after{
   width: 300px;
    height: 150px;
  top:-70px;
  right:-10px;
  display:block;
  position:absolute;
  content:"Trustee Blitz";
  Font-weight:800;
  color:#fff;
  padding:10px;
  font-size:32px;  /* ssw */
  z-index:-1;
    -webkit-transform: skew(170deg);
       -moz-transform: skew(170deg);
         -o-transform: skew(170deg);
    background: #EB9035;
}
footer{
  width:92%;
  height:150px;
  position:fixed;
  z-index:5;
  bottom: 2%;
  left:0px;
  z-index:5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 4% 20px 4%;
}

footer .container{
  background-color:#000;
  height: 150px;
  width: 96%;
  display:flex;
  align-items: center;
  justify-content: center;
}
footer .container h2{
margin:0px 0px 10px 0px;
}
footer .container h3{
margin:0px 0px;
}
footer .container section{
 padding:15px;
}
footer .container .goal{
  background-color:#000;
  height:150px;
  width:33%;

}
footer .container .total{
  background-color:#EB9035;
 height:150px;
  width:33%;
}
footer .container .brand{background-color:#000;height:150px;width:33%;display: flex;align-items: center;align-content: center;justify-content: center;}
footer .container .brand img {width:100%;}

.pageContainer  {
    width:100vw;
	height:100vh;
}

.pageContainer video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  top: 0px;
  opacity: 0.3;
  z-index: -5;
}

table#trusteeList {}

#trusteeList thead tr {
    background: #E39F5D;
    color: #fff;
}

#trusteeList,
#trusteeList tr, 
#trusteeList table, 
#trusteeList td,
#trusteeList thead,
#trusteeList tbody
{border:0px none;
 background:none;}

#trusteeList tr.row-entry:hover {background:#ffbc7c;	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	-o-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;}

td.entry-total {
    color: #5BA03B;
    font-weight: 600;
}

tbody tr:nth-child(-n+3) .entry-trustee{font-weight:800}
#trusteeList .row-entry td {
    padding: 5px 5px 5px 10px;
}
.row-entry{cursor:pointer;}



table#donorList {
	text-align: left;
}

#donorList thead tr {
    background: #000000;
    color: #fff;
}

#donorList,
#donorList tr, 
#donorList table, 
#donorList td,
#donorList thead,
#donorList tbody
{border:0px none;
 background:none;}

#donorList tbody
{font-weight:400;font-size:18px;height: 50vh;overflow: scroll;}  /* ssw */



#donorList .row-entry-donor td {
    padding: 5px 5px 5px 10px;
}
.row-entry-donor{cursor:pointer;}


.onAir {
    position:fixed;
    right:4%;
    top:2%;
    font-size:16px;
    font-weight:700;
    color:#F00}

.onAir span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: 0px 0px 1px 1px #0000001a;
}

.onAir span {
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgb(255 0 0 / 10%);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}


div#popUpDiv {
    top: 5% !important;
}

/* Style the new expanded details */
.open-row-table tr td {
font-size:12px;
color:#f89829;
font-weight:600;
}

/* Start the new expanded details hidden */
.openDetails{
  display:none;
  pointer-events:none;
}


html.modal-active, body.modal-active {
  overflow: hidden;
}

#modal-container {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display:none;
  z-index: 9;
}

#modal-container.four {
  z-index: 0;
  transform: scale(1);
}
#modal-container.four .modal-background {
  background: rgba(0, 0, 0, 0.7);
}
#modal-container.four .modal-background .modal {
  animation: blowUpModal 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.four + .content {
  z-index: 1;
  animation: blowUpContent 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.four.out .modal-background .modal {
  animation: blowUpModalTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.four.out + .content {
  animation: blowUpContentTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container .modal-background {
  display: table-cell;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  vertical-align: middle;
}
#modal-container .modal-background .modal {
  background: white;
  padding: 0px;
  display: inline-block;
  border-radius: 6px;
  font-weight: 300;
  position: relative;
  overflow: hidden;
  z-index: 10;
}
#modal-container .modal-background .modal h2 {
  font-size: 27px;  /* ssw */
  line-height: 25px;
  margin-bottom: 15px;
  background-color: #eb9035;
  color: #fff;
  padding: 15px 15px;
  min-width: 320px;
  margin-bottom: 0px;
}
#modal-container .modal-background .modal p {
  font-size: 18px;
  line-height: 22px;
}
#modal-container .modal-background .modal .modal-svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 3px;
  pointer-events: none;
}
#modal-container .modal-background .modal .modal-svg rect {
  stroke: #fff;
  stroke-width: 2px;
  stroke-dasharray: 778;
  stroke-dashoffset: 778;
}

.modal {
    height: 90vh;
    width: 60vw;
}
.modal table#donorList tbody {
    display: block;
    height: 75vh;
    overflow-y: auto;
}

.modal table#donorList tr {
    display: table;
    width: 100%;
    table-layout: fixed; /* Fixes the column width */
}



table#trusteeList tbody {
    display: block;
    overflow-y: auto;
}

table#trusteeList tr {
    display: table;
    width: 100%;
    table-layout: fixed; /* Fixes the column width */
}

@keyframes unfoldIn {
  0% {
    transform: scaleY(0.005) scaleX(0);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(1);
  }
}
@keyframes unfoldOut {
  0% {
    transform: scaleY(1) scaleX(1);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(0.005) scaleX(0);
  }
}
@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes fadeIn {
  0% {
    background: rgba(0, 0, 0, 0);
  }
  100% {
    background: rgba(0, 0, 0, 0.7);
  }
}
@keyframes fadeOut {
  0% {
    background: rgba(0, 0, 0, 0.7);
  }
  100% {
    background: rgba(0, 0, 0, 0);
  }
}
@keyframes scaleUp {
  0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
}
@keyframes scaleDown {
  0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
  100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }
}
@keyframes scaleBack {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.85);
  }
}
@keyframes scaleForward {
  0% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes quickScaleDown {
  0% {
    transform: scale(1);
  }
  99.9% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes slideUpLarge {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes slideDownLarge {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes moveUp {
  0% {
    transform: translateY(150px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes moveDown {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(150px);
  }
}
@keyframes blowUpContent {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  99.9% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(0);
  }
}
@keyframes blowUpContentTwo {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes blowUpModal {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blowUpModalTwo {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
@keyframes roadRunnerIn {
  0% {
    transform: translateX(-1500px) skewX(30deg) scaleX(1.3);
  }
  70% {
    transform: translateX(30px) skewX(0deg) scaleX(0.9);
  }
  100% {
    transform: translateX(0px) skewX(0deg) scaleX(1);
  }
}
@keyframes roadRunnerOut {
  0% {
    transform: translateX(0px) skewX(0deg) scaleX(1);
  }
  30% {
    transform: translateX(-30px) skewX(-5deg) scaleX(0.9);
  }
  100% {
    transform: translateX(1500px) skewX(30deg) scaleX(1.3);
  }
}
@keyframes sketchIn {
  0% {
    stroke-dashoffset: 778;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes sketchOut {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 778;
  }
}
@keyframes modalFadeIn {
  0% {
    background-color: transparent;
  }
  100% {
    background-color: white;
  }
}
@keyframes modalFadeOut {
  0% {
    background-color: white;
  }
  100% {
    background-color: transparent;
  }
}
@keyframes modalContentFadeIn {
  0% {
    opacity: 0;
    top: -20px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
@keyframes modalContentFadeOut {
  0% {
    opacity: 1;
    top: 0px;
  }
  100% {
    opacity: 0;
    top: -20px;
  }
}
@keyframes bondJamesBond {
  0% {
    transform: translateX(1000px);
  }
  80% {
    transform: translateX(0px);
    border-radius: 75px;
    height: 75px;
    width: 75px;
  }
  90% {
    border-radius: 3px;
    height: 182px;
    width: 247px;
  }
  100% {
    border-radius: 3px;
    height: 162px;
    width: 227px;
  }
}
@keyframes killShot {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(300px) rotate(45deg);
    opacity: 0;
  }
}
@keyframes fadeToRed {
  0% {
    background-color: rgba(0, 0, 0, 0.6);
  }
  100% {
    background-color: rgba(255, 0, 0, 0.8);
  }
}
@keyframes slowFade {
  0% {
    opacity: 1;
  }
  99.9% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

.donorDetails {
    /* padding: 5px; */
}

/* Begin 1200px */
@media only screen and (max-width: 1200px) {
main#trusteeContainer{
  width:60%;
  height:65vh;
  right:6%;
  top: 7%;
}
section.barLeaderboard {
    position: absolute;
    display: flex;
    height: 90%;
    bottom: 0;
    left: 8%;
}

.bar {width: 83px;}
.bar p{
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    padding: 5px;
}

.filledBar {
           /* bottom:0px; */
           width: 100%;
           }

.bar1 .filledBar{
     height: 85%;
     background:#FFBC7C
     }
.bar2 .filledBar {
    height: 75%;
    background:#FFA651
    }
.bar3 .filledBar{
     height: 65%;
     background:#C8894D;
     
     }


.bar .badge {
  height: 30px;
  width: 30px;
  font-size: 15px;
  font-weight:900;
  text-align: center;
  border-radius: 50%;
  align-items: center;
  align-content: center;
  justify-content: center;
}



 .headerGoal{
    color:#EB9035;
    font-size:30px;
  }

.goal h3{color:#fff; font-weight:400; font-size:20px;}
.headerTotal{font-size:30px;}
.headerTotal span{color:#fff; }
.total h3{font-size:20px;}

footer{
  height:100px;
}

footer .container{
  height:100px;
}
footer .container .goal{
  height:100px;
}
footer .container .total{
  background-color:#EB9035;
 height:100px;
}
footer .container .brand{
   height:100px;
}
footer::after{
   width: 280px;
    height: 120px;
  top:-50px;
  right:-10px;
  content:"Trustee Blitz";
  Font-weight:800;
  padding:10px;
  font-size:25px;
}
  
}

/* End 1200px */

/* Begin 1024px */
@media only screen and (max-width: 1024px) {
   main#trusteeContainer{
  width:60%;
  height:70vh;
  right:6%;
  top: 6%;
}
  section.barLeaderboard {
    position: absolute;
    display: flex;
    height: 90%;
    bottom: 0;
    left: 1%;
}

.bar {width: 80px;}
.bar p{
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    padding: 5px;
}

.filledBar {
           /* bottom:0px; */
           width: 100%;
           }

.bar1 .filledBar{
     height: 85%;
     background:#FFBC7C
     }
.bar2 .filledBar {
    height: 75%;
    background:#FFA651
    }
.bar3 .filledBar{
     height: 65%;
     background:#C8894D;
     
     }


.bar .badge {
  height: 30px;
  width: 30px;
  font-size: 15px;
  font-weight:900;
  text-align: center;
  border-radius: 50%;
  align-items: center;
  align-content: center;
  justify-content: center;
}
 .headerGoal{
    color:#EB9035;
    font-size:22px;
  }
.goal h3{color:#fff; font-weight:400; font-size:14px;}
.headerTotal{font-size:22px;}
.headerTotal span{color:#fff; }
.total h3{font-size:16px;}

  footer{
  height:80px;
}

footer .container{
  height:80px;
}
footer .container .goal{
  height:80px;
}
footer .container .total{
  background-color:#EB9035;
 height:80px;
}
footer .container .brand{
   height:80px;
}
footer .container section{
 padding: 8px;
}
}


/* End 1024px */

/* Begin 768px */
@media only screen and (max-width: 768px) {
 main#trusteeContainer{
  width:100%;
  height: 45vh;
  right:0;
  top: 180px;
  display:block;
}

#modal-container .modal-background .modal h2 {
  font-size: 20px;
}
#donorList thead
{
font-size:14px;}
#donorList tbody
{font-weight:400;
font-size:14px;}




	
section.barLeaderboard {
    position: relative;
    display: flex;
    height: 150px;
    bottom: auto;
    top: 30px;
    left: auto;
    justify-content: center;
}

.bar {display:flex;align-content: stretch;justify-content: flex-end;flex-wrap: wrap;flex-direction: column;width: 120px;align-items: center;}
.bar p{
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    padding: 5px;
}

.filledBar {
           /* bottom:0px; */
           width: 100%;
           }

.bar1 .filledBar{
     height: 43%;
     background:#FFBC7C
     }
.bar2 .filledBar {
    height: 25%;
    background:#FFA651
    }
.bar3 .filledBar{
     height: 15%;
     background:#C8894D;
     }


.bar .badge {
  display: flex;
  padding: 0.3em;
  height: 30px;
  width: 30px;
  font-size: 15px;
  font-weight:900;
  text-align: center;
  border-radius: 50%;
  align-items: center;
  align-content: center;
  justify-content: center;
}


.bar1 .badge {
  background: #ffbc7c;
  color: #fefefe;
  }
.bar2 .badge {
  background: #ffa651;
  color: #fefefe;
  }
.bar3 .badge {
  background: #c8894d;
  color: #fefefe;
  }

  
   .headerGoal{
    color:#EB9035;
    font-size:20px;
  }
.goal h3{color:#fff; font-weight:400; font-size:16px;}
.headerTotal{font-size:20px;}
.headerTotal span{color:#fff; }
.total h3{font-size:16px;}

  
footer{
  
  width:100%;
  height: 160px;
  position:absolute;
  bottom:0px;
  left:0px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin:0px 0px 0px 0px;
}

footer .container{
  background-color:#000;
  height:100%;
  width:100%;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-wrap:wrap;
}
footer .container .goal{
  background-color:#000;
  height:75px;
  width: 50%;
  order:2;
}

footer .container .total{
  background-color:#EB9035;
  height:75px;
  width: 50%;
  order:3;
}
footer .container .brand{
background-color:#000;
   height:75px;
  width:100%;
  order:1;
} 
  footer .container .brand img{max-width: 300px;} 
  footer .container section{
 padding:2%;
}
	footer::after{
   width: 240px;
    height: 120px;
  top:-40px;
  right:-10px;
  content:"Trustee Blitz";
  Font-weight:800;
  padding:5px 10px;
  font-size:20px;
}

}
/* End 768px */

/* Begin 480px */
@media only screen and (max-width: 480px) {
     .headerGoal{
    color:#EB9035;
    font-size: 16px;
  }
.goal h3{color:#fff; font-weight:400; font-size:14px;}
.headerTotal{font-size: 16px;}
.headerTotal span{color:#fff; }
.total h3{font-size:14px;}
footer .container h2{margin: 0px 0px 2px 0px;}
footer .container h3{
margin:0px 0px;
}
  	footer::after{
   width: 180px;
    height: 120px;
  top:-30px;
  right:-10px;
  content:"Trustee Blitz";
  Font-weight:800;
  padding:2px 8px;
  font-size:18px;
}
.modal {
    height: 90vh;
    width: 80vw;
}
#modal-container .modal-background .modal h2 {
  font-size: 18px;
}
#donorList thead
{
font-size:12px;}
#donorList tbody
{font-weight:400;
font-size:12px;}

	
  section.barLeaderboard {
    position: relative;
    display: flex;
    height: 150px;
    bottom: auto;
    top: 30px;
    left: auto;
    justify-content: center;
}

.bar {display:flex;align-content: stretch;justify-content: flex-end;flex-wrap: nowrap;flex-direction: column;width: 120px;align-items: center;}
.bar p{
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    padding: 5px;
}

.filledBar {
           /* bottom:0px; */
           width: 100%;
           }

.bar1 .filledBar{
     height: 43%;
     background:#FFBC7C
     }
.bar2 .filledBar {
    height: 25%;
    background:#FFA651
    }
.bar3 .filledBar{
     height: 15%;
     background:#C8894D;
     }


.bar .badge {
  display: flex;
  padding: 0.3em;
  height: 30px;
  width: 30px;
  font-size: 15px;
  font-weight:900;
  text-align: center;
  border-radius: 50%;
  align-items: center;
  align-content: center;
  justify-content: center;
}

  table#trusteeList {}

#trusteeList thead tr {
    background: #E39F5D;
    color: #fff;
}

#trusteeList,
#trusteeList tr, 
#trusteeList table, 
#trusteeList td,
#trusteeList thead,
#trusteeList tbody
{
 border:0px none;
 background:none;
 font-size: 12px;
 }

td.entry-total {
    color: #5BA03B;
    font-weight: 600;
}

tbody tr:nth-child(-n+3) .entry-trustee{font-weight:800}
  .onAir {
    position:fixed;
    right:4%;
    top: 1%;
    font-size:12px;
    font-weight:700;
    color:#F00
    }
}
/* End 480px */

.tblSubHeader {
  font-style: italic;
  font-size: 12px;
  display: block;
}