@font-face {
  font-family: FutuBk;
  src: url('./../fonts/FutuBk.ttf');
}
@font-face {
  font-family: FutuBkIt;
  src: url('./../fonts/FutuBkIt.ttf');
}
@font-face {
  font-family: Futura_20Medium_20BT;
  src: url('./../fonts/Futura_20Medium_20BT.ttf');
}
@font-face {
  font-family: FuturaBookBT;
  src: url('./../fonts/FuturaBookBT.ttf');
}
@font-face {
  font-family: FuturaBookItalicBT;
  src: url('./../fonts/FuturaBookItalicBT.ttf');
}


/* html, body, #app {
  height: 100%;
} */

body {
  font-family: FutuBk;
}
input:focus , button:focus{
  outline: none;
}
/* ======= Login Screen Start =========*/
.vue-tempalte{
  width: 100%;
  margin-top: 50px;
}
.email-input{
  margin-top: 20px;
}
.email-input, .password-input{
  border-radius: 15px;
  color: #495057;
  outline: none;
  border-width: 2px;
  background-color: #f1f1f1;
  font-size: 16px;
  padding: 0 20px;
  min-height: 50px;
}
.email-input:focus, .password-input:focus{
  background-color: white;
}
.form-control:focus {
  color: #495057;
  background-color: #fff;
  outline: 0;
  border: none !important;
  box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}
.login-btn{
  border-radius: 5px;
  border: #6ac3d6;
  background-color: #6ac3d6;
  font-weight: 600;
  font-size: 16px;
  padding: 14px;
}
.login-btn:focus , .login-btn:active , .login-btn:hover {
  border: #6ac3d6;
  background-color: #6ac3d6 !important;
  box-shadow: none !important;
}
.terms-para{
  margin-top: 40px;
  text-align: center;
  color:#aeaeae;
  font-size: 12px;
}
/* ======= Login Screen End =========*/

/* ======== Header With Logo Start ======== */
.container-fluid.head-parent-bg{
  background-color:#455666 ;
}
.container-fluid.head-parent-bg .parent-div{
  padding: 5px 0;
}
.container-fluid.head-parent-bg .plus-icon{
  width: 15%;
  text-align: left;
  font-size: 25px;
  color: #6ac3d6;
}
.container-fluid.head-parent-bg .logo-on-header{
  text-align: center;
  width: 70%;
}

.container-fluid.head-parent-bg .help-icon{
  width: 15%;
  text-align: right;
  font-size: 25px;
  color: white;
}
/* ======== Header with Logo End ======== */

/* ========= Dashboard Screen Start ========== */
.dashboard-parent{
  margin: 10px 0 0 0;
}
.dashboard-view-anchor{
  color: #6ac3d6;
  font-size: 15px;
}
.dashboard-view-anchor:hover , .dashboard-view-anchor:active, .dashboard-view-anchor:focus{
  color: #6ac3d6;
  text-decoration: none;
}
.dashboard-card{
  background-color: #425cc7;
}
/* ========= Dashboard Screen End ========== */

/* ========= Game Settings Header Start ========== */

.container-fluid.game-setting-head-parent-bg {
  position: fixed;
  top: 0;
  /* margin-bottom: 20px; */
  z-index: 9;
  /* padding-top: 5px; */
  background-color: white;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding-top: 15px;
  padding-bottom: 5px;
}
.game-setting-head-parent-space {
  min-height: 70px;
}
.container-fluid.game-setting-head-parent-bg > .row {
  width: 100%;
}
.container-fluid.game-setting-head-parent-bg .close-icon{
  width: 10%;
  /* text-align: center; */
  font-size: 20px;
  color: #4d5e6d;
  font-weight:lighter;
}
/* .container-fluid.game-setting-head-parent-bg .close-icon img{
  margin-top: 10px;
} */
.container-fluid.game-setting-head-parent-bg .text-on-header{
  /* padding: 5px 0; */
  text-align: center;
  width: 80%;
  /* font-size: 15px; */
}
.container-fluid.game-setting-head-parent-bg .text-on-header h2{
  font-size: 14px;
  color: #4d5e6d;
  font-weight: 900;
  /* margin: 0; */
}
.container-fluid.game-setting-head-parent-bg .text-on-header p{
  color: #4d5e6d;
  margin-bottom: 0;
  white-space: nowrap;
}
.container-fluid.game-setting-head-parent-bg .blank-div{
  /* width: 25%; */
  /* text-align: center; */
  text-align: right;
  font-size: 22px;
  color: white;
  position: absolute;
  right: 25px;
}

/* ========= Game settings Header End ========== */

/* ========= Game settings Screen Start ========== */
.game-setting-parent-bg {
  /* margin-top: 70px; */
  /* background-color: #f0f1f1; */
  width: 100%;
  height: auto;
  padding-bottom: 120px;
}
.game-setting-container {
  padding: 10em 0 9em 0;
}
.game-setting-card-row {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}
.game-setting-card{
  background-color: white;
  padding: 35px 0;
  width: calc(50% - 7.5px);
  text-align: center;
  /* margin-bottom: 15px; */
}
.game-setting-card h6{
  margin-top: 10px;
  text-align: center; 
  color: #4d5e6d;
  font-weight: 700;
}
.game-settings-card-image{
  position: relative;
  width: max-content;
  margin: 0 auto 25px auto;
  padding: 10px;
  background-color: #f0f1f1;
  border-radius: 100%;
}
.game-settings-card-tag{
  position: absolute;
  top: 0;
  right: 0;
  background-color: #76c198;
  width: max-content;
  padding: 2px 5px;
  border-radius: 30px;
  height: auto;
  color: white;
  /* border: 20px; */
}
.game-setting-card img{
  padding: 10px;
}
.container-fluid.game-setting-footer-bg{
  position: fixed;
  bottom: 0;
  background-color: white;
  padding: 15px 15px 40px 15px;
}
.footer-step-heading h4{
  color: #76c198;
  font-weight: 700;
}
.footer-step-heading{
  width: 40%;
}
.game-setting-step-one{
  background-color: #f0f1f1;
  width: 30px;
  border-radius: 10px;
  height: 8px;
}
.game-setting-step-one-active{
  background-color: #76c198;
  width: 30px;
  border-radius: 10px;
  height: 8px;
}
/* ========= Game settings Screen End ========== */

/* ========== Choose Neighbourhoods screen Start =========== */
.choose-neighbourhood-container {
  padding: 10em 0 9em 0;
}
.choose-neighbourhood-row {
  display: flex;
  /* overflow: auto; */
  flex-wrap: wrap;
  min-width: 140%;
  gap: 20px;
}
.choose-neighbourhoods-cards-parent{
  overflow: auto;
}
.choose-neighbourhoods-card{
  background-color: white;
  padding: 5px 5px 0;
  text-align: center;
  /* width: calc(25% - 15px); */
  width: 100px;
}
.choose-neighbourhoods-card img{
  border-radius: 100%;
  margin-bottom: 10px;
  object-fit: cover !important;
}
.choose-neighbourhoods-card h4{
  color:#495057 ;
  font-weight: 700;
  font-size: 3.5vw;
}
.choose-neighbourhoods-next-btn{
  /* margin: 10px auto 0 auto;  */
  margin: 0 auto;
  width: 100%;
  padding: 10px 0;
  color: white;
  font-size: 18px ;
  background-color: #76c198;
  border-radius: 5px;
  outline: none;
  font-weight: 600;
}
.choose-neighbourhoods-next-btn:active , .choose-neighbourhoods-next-btn:hover , .choose-neighbourhoods-next-btn:focus{
  outline: none;
}

/* ========== Choose Neighbourhoods screen End =========== */

/* ========== Select Needs Screen Start =========== */

.select-needs-parent-bg{
 padding: 0;
 position: relative;
}
.select-needs-title-bar{
  width: 100%;
  height: max-content;
  object-fit: cover;
  padding: 0;
  max-height: 300px !important;
}
.select-needs-title-text{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(0, 0, 0, .6);
}
.select-needs-title-text h4{
  text-align: center;
  color: white;
  font-weight: 700;
  margin-top: 4%;
}
.select-needs-title-text p{
  text-align: center;
  color: white;
  font-weight: 100;
  margin-top: 4%;
  font-size: 16px;
}
.select-needs-title-text h3{
  text-align: center;
  color: white;
  font-weight: 900;
  /* margin-top: 10%; */
}
.select-needs-card-container {
  flex-wrap: wrap;
  gap: 4%;
}
.select-needs-card {
  /* padding: 10px;
  margin: 0 auto;
  background-color: white;
  text-align: center; */
  padding: 5px;
  background-color: white;
  text-align: center;
  width: 22%;
  margin-bottom: 4%;
}
.select-needs-card h4 {
  font-size: 3.5vw;
}
.select-needs-card-img{
  padding: 8px;
  background-color: #f0f1f1;
  border-radius: 100px;
  text-align: center;
  margin-bottom: 10px;
  width: min-content;
  margin-left: auto;
  margin-right: auto;
}

/* ========== Select Needs Screen End =========== */

/* ========== Choose Resources Screen Start =========== */

.choose-resources-parent-bg{
  padding: 0;
  position: relative;
 }
 .choose-resources-title-bar{
   width: 100%;
   height: max-content;
   object-fit: cover;
   padding: 0;
   max-height: 300px !important;
 }
 .choose-resources-title-text{
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   background-color: rgba(0, 0, 0, .6);
 }
 .choose-resources-title-text h4{
   text-align: center;
   color: white;
   font-weight: 700;
   margin-top: 4%;
 }
 .choose-resources-title-text p{
   text-align: center;
   color: white;
   font-weight: 100;
   margin-top: 4%;
   font-size: 16px;
 }
 .choose-resources-title-text h3{
   text-align: center;
   color: white;
   font-weight: 900;
   margin-top: 10%;
 }
 .choose-resources-card{
   padding: 5px;
   margin: 0 1%;
   width: 24%;
   background-color: white;
   text-align: center;
 }
 .choose-resources-card-img{
   padding: 10px;
   border-radius: 100px;
   text-align: center;
   margin-bottom: 10px;
 }
 .choose-resources-card h4{
  font-size: 12px;
}
.choose-resources-btn{
  position: sticky;
  bottom: 0px;
}

 /* ========== Choose Resources Screen End =========== */

/* ============ Summary Screen Start =========== */

.game-summary{
  display: flex;
  margin: 15px auto 15px auto;
  justify-content: space-between;
  align-items: center;
}
.game-summary h4{
  /* margin: 10px 0; */
  font-size: 16px;
  color:#495057 ;
  font-weight: 700;
  margin-bottom: 0;
}
.game-summary h6{
  /* margin: 10px 0; */
  font-size: 16px;
  color: #898989;
  margin-bottom: 0;
  font-weight: 700;
}
.summary-card{
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
}
.summary-card-heading{
  padding: 15px 20px;
}
.summary-card h4{
  font-weight: 900;
  color: #495057 ;
  font-size: 14px;
  margin-bottom: 5px;
}
.summary-card h6 {
  font-size: 13px;
  color: #3e3e3e;
}
.summary-card-details{
  align-items: center;
  padding: 5px 10px;
}
.summary-card-details-sec{
  align-items: center;
  padding: 5px 10px;
  background-color: #fafbfb;
}
.summary-card-profile-image{
  padding: 5px;
  background-color: #f0f1f1;
  border-radius: 100px;
  margin-right: 10px;
} 
.summary-card-profile-image img{
width: 15px;
height: 15px;
}
.summary-card-profite-name h6{
  /* font-size: 15px; */
  margin: 0;
}
.summary-card-likes{
  align-items: flex-start;
}
.summary-card-likes i{
  font-size: 20px;
  color: #76c198;
}
.summary-card-likes h6{
  margin: 1px 0px 0 10px;
    font-size: 20px;
    color: #76c198;
}
.summary-footer{
  background-color: white;
  padding-top: 15px;
  padding-bottom: 15px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

/* ========== Result Screen Modal Start ========= */
.modal-cstm{
  top: auto;
  height: auto !important;
  bottom: 0  !important;
}
.modal-dialog{
  max-width: 100%;
}
.modal-play-icon{
  text-align: center;
  /* margin: 0 auto; */
  align-items: center;
  /* margin-right: 15px; */
}
.modal-play-icon .img-container {
  width:  50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50px;
}
.modal-play-icon .img-container img{
  width:  50px;
  height: 50px;
}
.modal-play-text{
  text-align: center;
  /* margin: 10px auto 0 auto; */
}
.modal-play-text h4{
  /* font-size: 4vw; */
  font-size: 18px;
  font-weight: bolder;
}
.modal-play-text p{
  width: 80%;
  /* margin: 10px auto; */
  margin: 0 auto;
  /* font-size: 2vw; */
  font-size: 14px;
}
.modal-play-cancel-btn{
  /* margin: 10px auto 0 auto;  */
  margin: 15px auto 0 auto;
  width: 100%;
  padding: 10px 0;
  color:#76c198;
  border: 2px solid #76c198;
  font-size: 18px ;
  background-color: white;
  border-radius: 5px;
  outline: none;
  font-weight: 600;
}
.modal-play-cancel-btn:hover, .modal-play-cancel-btn:focus, .modal-play-cancel-btn:active{
  outline: none;
}
/* ========== Result Screen Modal End ========= */

/* ========== Game Score Board Start =========== */
.game-score-board-parent-bg{
  background-color: white;
  align-items: center;
}
.game-score-board-image-parent{
  width: 48%;
  text-align: center;
}
.game-score-board-image{
  width: 80%;
}
.game-score-under-image-text h4{
  font-weight: 900;
  color: #76c198;
  /* font-size: 4.5vw; */
  margin-top: 10px;
  margin-bottom: 0;
}
.game-score-under-image-text p{
  font-size: 3vw;
}
.game-score-board-percentage{
  width: 48%;
  text-align: center;
}
.game-score-board-percentage-text h2{
  color: #76c198;
  font-weight: 900;
  /* font-size: 8vw; */
  margin-bottom: 0;
}
.game-score-board-percentage-text p{
  font-size: 3vw;
}
.game-score-card-parent{
  background-color: white;
  padding: 20px 10px; 
  border: 1px solid #ccc;
  border-radius: 12px;
}
.game-score-watch-icon{
  width: 15%;
}
.game-score-watch-text p{
  margin: 5px 0 0 0;
  font-size: 3vw;
}
.game-score-watch-text h2{
  margin: 0;
  font-weight: 900;
  color: #76c198;
  font-size: 4.5vw;
}
.game-scores-card{
  background-color: white;
  padding: 10px; 
  border: 1px solid #ccc;
  border-radius: 12px;
}
.game-score-table-title{
  /* font-size: 4.5vw; */
  font-weight: 900;
}
.game-score-table-title-number{
  /* font-size: 4.5vw; */
  font-weight: 900;
  color: #76c198;
}
.game-score-table-label{
  text-align: start;
  vertical-align: middle;
}
.game-score-table-value{
  text-align: end;
  /* font-size: 4.5vw; */
  font-weight: 900;
}
/* ========== Game Score Board End =========== */


/* .wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
} */
.common_screen_header {
  min-height: 70px;
  position: fixed;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #fff;
  z-index: 999;
}
.common_screen_header_seperator {
  min-height: 70px;
}
.titles h2 {
  font-size: 18px;
  color: #4d5e6d;
  font-weight: 900;
  margin-bottom: 0;
  text-align: center;
}
.target_anchor {
  color: #37b4fd;
  border: 0;
  background-color: transparent;
  outline: 0;
}
.need_circles {
  display: flex;
  gap:5px;
  padding: 0 5px;
}
.need_circle {
  height: 35px;
  width: 35px;
  background-color: lightgray;
  border-radius: 100%;
  overflow: hidden;
}
.need_circle img {
  width: 100%;
  height: 100%;
}
.need_circle.active {
  background-color: #0d99ff;
  color: #fff;
}
.project_likes_space {
  min-height: 120px;
}
.project_likes {
  margin-top: auto;
  /* padding: 20px 0 40px 0; */
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  z-index: 999;
  min-height: 120px;
  display: flex;
  align-items: center;
}
.project_likes h4 {
  font-size: 18px;
}
.need_boxes {
  display: flex;
  padding: 10px 0;
  /* margin-top: 10px; */
  /* position: fixed; */
  border-top: 1px solid lightgray;
  width: 100%;
  left: 0;
  overflow-x: auto;
  /* background-color: #fff; */
  z-index: 99;
  position: sticky;
  top: 70px;
}
.need_box {
  border: 1px solid transparent;
  padding: 10px;
  margin: 0 10px;
  min-width: 80px;
  max-width: 80px;
  border-radius: 10px
}
.need_box .circle {
  height: 50px;
  width: 50px;
  border-radius: 50px;
  background-color: lightgray;
  margin: 0 auto;
  overflow: hidden;
}
.need_box .circle .image {height: 100%;}
.need_box .circle .image img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.need_box .text p {
  font-size: 0.8em;
  text-align: center;
}
.need_projects {
  background: url(../../../images/neighbourhoods/1666088428.png) rgba(0, 0, 0, 0.5);
  background-position: center;
  background-blend-mode: multiply;
  /* background-color: #000; */
  /* opacity: 0.8; */
  background-repeat: no-repeat;
  background-size: cover;
  /* min-height: 550px; */
  /* background-color: #f3f3f3a1; */
  display: flex;
  flex-direction: column;
}
.need_projects_heading{
  color: white;
  margin: 30px 0;
}
.need_projects_heading h4{
  font-size: 1.1rem;
}
.setting_score_header {
  background-color: #445464;
  color: #fff;
  min-height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
}
.setting_score_wrapper {
  /* padding: 15px 0 115px 0; */
  padding: 0 0 100px 0;
  background-color: #f3f3f3a1;
}
.swiper_slide {
  min-height: 350px;
  border: 1px solid #455666;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: black;
}
.swiper_slide_head {
  color: #fff;
  z-index: 9;
  background-color: #0006;
  height: 70px;
  width: 70px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 5px;
}
.swiper_slide_head h4 {
  margin-bottom: 0;
}
.swiper_slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.swiper-horizontal>.swiper-pagination-bullets, 
.swiper-pagination-bullets.swiper-pagination-horizontal, 
.swiper-pagination-custom, 
.swiper-pagination-fraction {
  position: relative;
  bottom: 0!important;
  margin: 10px 0;
}
@media (max-width: 576px) and (max-height: 390px){
  .environment_concluded_container {
    background-color: white;
    min-height: 100vh !important;
    padding: 10vh 0 !important;
}
}