.no-scrollbar::-webkit-scrollbar{background-color:white; width:5px;}
.no-scrollbar::-webkit-scrollbar-thumb{background-color:#e7e7e7; border-radius:10px; }

.app-wrapper {height: 100vh; width:100%; margin: 0 auto; padding-top:70px; }

.jdo-header {text-align:center; padding:0px 20px;}

.jdo-content {text-align:center; width:80%; padding-bottom:100px; padding-top:20px}


.jdo-header-row {justify-content:right; display:flex; padding-bottom:20px;}

.faq-overlay {top: 50%; left: 50%; transform: translate(-50%, -50%); width:320px; display:none;}

.alert-points {width:60px; height:60px; border-radius:100%; background-color:#e7e7e7; align-content:center; margin: auto; margin-top:10px; font-size:24px; text-align:center;}




.app-footer {display:none;}

.footer {max-width: 480px; width:100%; height:80px; position:fixed; bottom:0; z-index:1000; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; background-color:white; justify-content:center; display:flex}

.footer-nav {display: flex; justify-content: space-around; width:320px}


.btn {text-align:center; font-size:11px;  cursor:pointer}
.big-btn {color:black;}
.big-btn i {font-size:32px; padding:5px;}
.small-btn {color:#a7a7a7}
.small-btn i {font-size:16px; padding:5px; }

.challenge-button {border-radius:100%; width:60px; height:60px; margin:20px 5px;}
.challenge-button i {font-size:24px; padding:0px; }
.challenge-button.pending {background-color:#e7e7e7; border: 2px solid #e7e7e7; cursor:default; }
.challenge-button.pending i{color:#a7a7a7; }
.challenge-button.recent {background-color:#e7e7e7; border: 2px solid #e7e7e7; }
.challenge-button.recent i{color:#a7a7a7; }
.challenge-button.actual{background-color:#a7a7a7; border: 2px solid #a7a7a7; }
.challenge-button.actual i{color:black; }

.challenge-container {width:100%; }
.challenge-container.left {text-align:left;}
.challenge-container.right {text-align:right;}
.challenge-container.recent {color:#a7a7a7; font-size:12px}
.challenge-container.pending {color:#a7a7a7; font-size:12px}


.overlay-footer button {border:none; background-color:white;}

.overlay {padding-bottom: 10px; background-color: white; z-index:9999; border-radius:10px; text-align: center; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; position:fixed;}

.donations-overlay {width: 320px; bottom:-500px; }

.ranking-overlay {top: 50%; left: 50%; transform: translate(-50%, -50%); width:320px; display:none;}
table {width:100%; padding-bottom:20px;}
.ranking-overly table i {padding:5px; font-size:18px;}
.ranking-content {margin:10px; max-height:280px; overflow:auto;}
.ranking-overlay th {font-size:12px; font-weight:lighter; text-align:center; padding:10px; vertical-align:top; width:33%; position:sticky; top:0; background-color:white;}
.ranking-content td {font-size:12px; text-align:center;}

.details-overlay {top: 50%; left: 50%; transform: translate(-50%, -50%); width:320px; display:none; overflow:hidden;}

.details-slider-wrapper {padding:20px 0; display:flex; position: relative;}

.details-slider-content {width:320px;}
.challenge-icon i {font-size:42px; padding:10px;}
.challenge-title {font-weight:bold; padding:10px; font-size:18px;}
.challenge-description {padding:10px;}

.alert-overlay {top: 50%; left: 50%; transform: translate(-50%, -50%); display:none; width:320px;}

.donations-form form{display:flex; flex-direction:column; padding:0px 30px;}
.donations-form input{margin:10px; padding:5px 10px; background-color:#e7e7e7; border:none; border-radius:5px; font-size:16px;}
.donations-form label {padding-top:20px;}
.hint {color:#a7a7a7; font-size:12px; font-weight:lighter; padding-bottom:20px;}


.alert-content {color:red; padding:20px;}

.overlay-header {padding:10px; color:#a7a7a7; text-align:center; font-size: 12px; }
.overlay-header i {padding:5px; font-size:36px;}
.overlay-footer {display:flex; justify-content:space-evenly; align-items:flex-end;}
.overlay-content {padding:10px; height:320px; overflow:auto; margin:5px;}

.input-wrapper {border-radius:10px; align-content:center; color: #a7a7a7; font-size: 12px}
.input-wrapper i {font-size:48px; padding:5px;}
.input-description {padding:10px;}

.details-slider-wrapper input {margin:10px; padding:5px 10px; background-color:#e7e7e7; border:none; border-radius:5px; font-size:16px;}
.details-slider-wrapper form {display:flex; flex-direction: column; padding:0 30px; align-items:center;}
.details-slider-wrapper form button {border-radius:100%; height:100px; width:100px; background-color:#e7e7e7; border:none;}
.check-wrapper {display:flex; padding: 10px 0px; width:100%; text-align: justify; align-items:center; font-size:12px;}

.slider-image img {border-radius:5px;}

select {margin:10px; padding:5px 10px; background-color:#e7e7e7; border:none; border-radius:5px; font-size:16px; }

.answer-wrapper {text-align:left; margin: 5px 30px;}

.quiz-page-header {color: #a7a7a7; font-size: 12px;}
.quiz-page-question {margin-bottom:20px; font-weight:bold;}
.quiz-page-option {margin:5px 20px;; padding:5px; border-radius:10px; font-size:12px; color:#a7a7a7;}
.quiz-page-option.true {background-color: #e7e7e7; color:black!important}