@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
.overlay{width: 100%; height: 100vh; background:  rgba(0, 0, 0, 0.50);  position: fixed; left: 0; top:0; z-index: 99; display: none}
body{font-family: 'Poppins', sans-serif; color: #fff;font-size: 0.8rem;     padding-top: 10px;}
html {scroll-behavior: smooth;}
sup{color: #FF0004; font-size: 14px;}
.bg1{font-family: 'Poppins', sans-serif; width: 100%; height:100vh; position: fixed; left: 0; top:0; bottom: 0; right:0; background: #0b5a7280}
.bg2{background:  #ff6600; width: 100%; height:100vh; position: fixed; left: 0; top:0; bottom: 0; right:0;}
.container{max-width:428px !important;  width: 100% !important; position: relative;}
.mainWapper{width: 100%; height: 100vh; margin: auto; position: relative;}
.loginBg{width:100%; height: 100vh; margin: auto; position: absolute; left: 0; top: 0px; right: 0;  padding-left: 0px !important; padding-right: 0!important}
.loginBg img{width: 100%; height: 100vh; }
.logo{width: 193px; height: 63px; margin: auto; position: absolute; left: 0; top: 10%; right: 0;}
.LoginForm{width: 100%; height: auto; position: absolute; left: 0; bottom:10%; right: 0; margin: auto; z-index: 1; color: #fff; text-align: center}
.LoginForm .text{font-size: 16px; color:#fff;}
.LoginForm .text a{color: #FF6600; text-decoration: none; }
.LoginForm .text a:hover{color: #fff; text-decoration: underline; }
.LoginForm .form{width: 100%; text-align: left; margin-bottom: 10%}

.LoginForm .form h2{ font-size: 18px; font-weight: 500; margin-bottom: 20px;}
.LoginForm .form .form-control{border-radius: 0.55em;padding: 0.85rem .75rem; margin-bottom: 15px; box-shadow: none;}
.LoginForm .form  .btn-signIn{ padding: 0.85rem .75rem;  border-radius: 0.65em; margin-top: 25px; font-weight: 600; }

 .btndefult{margin: 0px 0 0 0;}
.btndefult .btn {width: 100%;  text-decoration: none; color: #fff;  padding: 0.85rem .75rem;  font-size: 16px; font-weight: 600; border-radius: 9.65em; margin-top: 25px; font-weight: 600; background-color: #ff6600;   background-position: 50% 50%; background-repeat: no-repeat; background-size: 100% 100%; transition: background-size .5s, color .5s; box-shadow: none; -webkit-box-shadow: 0px 10px 12px -5px rgba(1,88,122,1);-moz-box-shadow: 0px 10px 12px -5px rgba(1,88,122,1);box-shadow: 0px 10px 12px -5px rgb(0, 0, 0, 0.5);     border: none;}

.btndefult .btn:hover {text-align: center; background-size: 0% 100%;  color:#fff; font-weight: bold;  text-decoration: none; }	
.password{position: relative}
.password i{ width: 20px; height: 20px; position: absolute;right: 10px; top:0; bottom: 0; margin: auto}

.veifyBox{width:100%; position: absolute; left: 0; top: 0;right: 0; margin:0 auto 0px auto; background-color: #082631; min-height: 400px; border-bottom-left-radius: 0.65em; border-bottom-right-radius: 0.65em;     padding-right: calc(var(--bs-gutter-x) * .5);    padding-left: calc(var(--bs-gutter-x) * .5); padding-top: 10%; padding-bottom: 5%; }

.veifyBox .back-arrow{ width: 18px; height: auto; float: left; padding: 10px 0; display: inline-block;}
.veifyBox .heading{width: calc(100% - 18px); color: #fff; font-size: 28px; font-weight: 700; padding-left: 10px; float: left}
.codesent-no{width: 100%; padding-top: 40px; padding-bottom: 60px; text-align: center; display: inline-block; font-size: 18px; }
.otp{ width: 230px; margin: auto}
.otp .form-control{ width: 23%; box-sizing: border-box; border-radius: 0.55em;padding: 0.85rem .75rem; float: left; margin-right:2%; text-align: center; font-size: 18px; font-weight: 500;}
.otp .form-control.last{margin-right: 0;}
.resendtime{ font-size: 18px; text-align: center; width: 100%; display: inline-block; margin-top: 10px; font-weight: 400;}
.resend-text{ font-size: 18px; text-align: center; width: 100%; display: inline-block; margin-top:34px; font-weight: 400; color:#A5A5A5}
.resend-text a{ color: #fff; text-decoration: none;}
.resend-text a:hover{text-decoration: underline}
.profilewapper{padding-top: 20px; padding-bottom: 30px;     z-index: 1;    position: relative;}
.profilewapper h2{color:#1F0043; font-size:28px; font-weight: 600; }
.profilewapper h2.exmar{margin-bottom: 30px;}
.profilewapper p{color:#828282; font-size:16px; font-weight: 500; }
.profilewapper label{
      font-size: 14px;
    color: #828282;
    text-transform: uppercase;
    padding-left: 5px;
    margin-bottom: 5px;
}
.profilewapper label strong{color:#082631;}
.profilewapper .form-control{border-radius: 0.55em;padding: 0.85rem .75rem; margin-bottom: 15px; box-shadow: none; border: 2px solid #D9D9D9; resize: none}
.profilewapper .form-control.green{border: 2px solid #1BC98C}
.profilewapper .form-control.red{border: 2px solid #FF5B5C}
.profilewapper .select{background: url("../images/select-arrow.svg") 97% 40% no-repeat; height: 50px;   font-size: 14px; font-weight: 500;}
.profilewapper .select option { color: #212529 !important;	}
.profilewapper .select.empty{color: #D9D9D9; }
.calendar input {background: url("../images/..") 96% 40% no-repeat; height: 55px;   font-size: 14px; font-weight: 500;}
.profilewapper .radio-toolbar {  margin: 0 0px;}

.profilewapper .radio-toolbar input[type="radio"] {  opacity: 0;  position: fixed;  width: 0;}

.profilewapper .radio-toolbar label { width: 49%; text-align: center; display: inline-block;  font-size: 14px; font-weight: 500;  background-color:#D9D9D9;    padding: 0.75rem .75rem; font-size: 16px; border: 2px solid #D9D9D9;  border-radius: 0.55em;}

.profilewapper .radio-toolbar label:hover { background-color: #D9D9D9;}

.profilewapper .radio-toolbar input[type="radio"]:focus + label { border: 2px solid #D9D9D9; }

.profilewapper .radio-toolbar input[type="radio"]:checked + label {    background-color: #095168; color: #fff; border-color: #095168;}

.black-back-arrow{ width: 18px; height: auto;  padding:0 0 20px 0;}

.SizeWapper{border: 2px solid #D9D9D9; padding: 15px;  border-radius: 0.65em;}
.SizeWapper ul{margin: 0; padding: 0; display: inline-block; width: 100%;}
.SizeWapper ul li{width: 20%; float: left; text-align: center; list-style: none; cursor: pointer}
.SizeWapper ul li:hover .text{  color:#1587AB; }
.SizeWapper ul li.hover svg{fill: rgb(21 135 171); }
.SizeWapper ul li.active .text{  color:#1587AB; }
.SizeWapper ul li.active svg path{fill: rgb(21 135 171); }

.SizeWapper .text{ font-size: 14px; color: #D9D9D9; font-weight: 700; padding-top: 10px;}
.file-border{border: 1px solid #ccc;width: 100%;padding: 0 5px;height: 55px;text-overflow: clip;opacity: 0;}
.upload-btn{display: block;width:100%;height: 55px;border: 2px solid #D9D9D9;position: absolute;top: 0;z-index: -1;padding-left: 78px;line-height:26px; overflow: hidden; text-overflow: ellipsis; word-break: keep-all;  color: #D9D9D9; border-radius: 0.55em;padding: 0.85rem .75rem;}
.upload-btn.select{color: #212529;}
.upload-btn::before{
      position: absolute;
    content: "Choose File";
    background: #ff6600;
    color: #FFF;
    height: 44px;
    width: 125px;
    line-height: 45px;
    padding: 0 .75rem;
    text-transform: uppercase;
    top: 0;
    right: 5px;
    bottom: 0;
    margin: auto;
    border-radius: 0.55em;
    text-align: center;
    font-weight: 400;
 }

.upload-btn::before:hover{background: #095168;color: #fff; }

.upload-wapper{position: relative; height: 55px;}

.profilewapper .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #D9D9D9;
	font-size: 18px; font-weight: 500;
}
.profilewapper .form-control::-moz-placeholder { /* Firefox 19+ */
  color: #D9D9D9;
	font-size: 18px; font-weight: 500;
}
.profilewapper .form-control:-ms-input-placeholder { /* IE 10+ */
  color: #D9D9D9;
	font-size: 18px; font-weight: 500;
}
.profilewapper .form-control:-moz-placeholder { /* Firefox 18- */
  color: #D9D9D9;
	font-size: 18px; font-weight: 500;
}
.Dashboard{position: relative; display: inline-block; width: 100%;     margin: 10px 0 0px 0; }
.Dashboard .header{width: 100%; position: relative;margin: 20px 0; display: inline-block; }
.Dashboard .header .humburger{float: left; position: relative; z-index: 1}
.Dashboard .header .menudot{float: right;  position: relative; z-index: 1}
.Dashboard .header .he{ width: 100%; text-align: center; font-size: 24px; font-weight: 600; color: #fff; margin: auto; position: absolute; left: 0; right:0; top:0; bottom:0; z-index: 0; line-height: 1.2em;}

.Dashboard  .userbox{background: #fff url("../images/deashbord-bg.png") center bottom; background-size: 100% 100%; padding: 10px; min-height: 351px; border-radius: 0.65em; position: relative;}
.Dashboard  .userbox .user-img{ width: 81px; height: 81px; position: relative;margin: auto;}
.Dashboard  .userbox .user-img .img{width:81px; height: 81px; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; border-radius: 50%;}
.Dashboard  .userbox .user-img .img img{width: 100%; border-radius: 50%;    height: 81px;object-fit: cover}
.Dashboard  .userbox .edit-img{width: 27px; height: 27px; position: absolute; right: 0; bottom:0;}
.Dashboard  .userbox .icon-notification{width: 24px; height: 24px; position: absolute; right: 10px; top:10px;}
.Dashboard  .userbox .name{width: 100%; text-align: center; font-size: 20px; font-weight: 600; margin-top: 10px; color: #000; }
.Dashboard  .userbox .text{font-size: 12px; font-weight: 600;text-align: center; margin-bottom: 0;color: #000;  }
.Dashboard  .userbox ul{width: 100%; text-align: center; margin: 10px 0 0 0;padding: 0; }
.Dashboard  .userbox ul li{ list-style: none; display: inline; margin-right: 5px; font-size: 14px; font-weight: 500; color: #1587AB; }
.Dashboard  .userbox ul li a{  font-size: 12px; font-weight: 500; color: #000; text-decoration: none;}
.Dashboard  .userbox ul li a:hover{text-decoration: underline;}
.Dashboard  .userbox ul li i{margin-right: 5px;}

.runner-code{ width: 274px; margin: 30px auto 20px auto}
.runner-code .text2{ font-size: 14px; color: #000; text-transform: uppercase; text-align: left;        padding-top: 3px; width: calc(100% - 60px);   float: left;}
.runner-code .img{width: 45px; height: 45px; float: right;}

.userbox .btndefult .btn{    background: #ff6600;  background-image: linear-gradient( #ff6600, #ff6600);  color:#fff; margin-top: 10px; width: 100%;  padding: 12px;  border: none; border-radius: 25px;
    background: #ff6600;  color: #fff; font-size: 16px; font-weight: bold;cursor: pointer;  -webkit-box-shadow: 0px 5px 12px -5px rgba(1, 88, 122, 1);
    -moz-box-shadow: 0px 5px 12px -5px rgba(1,88,122,1);
   box-shadow: 0px 5px 12px -5px rgba(1, 88, 122, 1); }
.userbox .btndefult .btn:hover {text-align: center; background-size: 0% 100%;  color:#000;  }	
.Dashboard  .pichartmap{width: 100%; min-height: 300px; background: #F6F6F6; border-radius: 0.65em; padding: 10px 10px 10px 10px; display: inline-block; margin-top:20px;  }
.Dashboard  .pichartmap #tabs{width:100%;height:30px; margin: 0; padding: 0;}
.Dashboard  .pichartmap a{cursor:pointer;}
.Dashboard  .pichartmap #tabs ul{margin: 0; padding: 0;}
.Dashboard  .pichartmap #tabs li{float:left;list-style:none; outline:none; width: 48%; text-align: center; margin-left: 1%;    border-radius: 48px; overflow: hidden;}

.Dashboard  .pichartmap #tabs li a{padding: 10px; display:block;background:#ff6600;border-top-left-radius:3px;border-top-right-radius:3px;text-decoration:none;outline:none; color: #fff; border-radius: 0.65em;}
.Dashboard  .pichartmap #tabs li a.inactive{padding: 10px; color:#082631;background:#fff;outline:none;  border: 1px solid #dfdfdf; overflow: hidden; border-radius: 50px;}
.Dashboard  .pichartmap #tabs li a:hover, #tabs li a.inactive:hover{outline:none;}

.Dashboard  .pichartmap .chartimg{clear:both;width:100%;text-align:left; padding:15px; display: none}
.Dashboard  .pichartmap .chartimg .img{width: 100%;}

.Dashboard p.text{ font-size: 16px; color: #000;}

.btndefult-w{margin: 0px 0 0 0;}
.btndefult-w .btn {width: 100%;  padding: 12px; border-radius: 25px; font-size: 16px; font-weight: bold;  cursor: pointer;
    margin-top: 10px; background: #ff6600; color: #fff;    border: none;}

.btndefult-w .btn:hover {text-align: center; background-size: 0% 100%;  color:#fff; font-weight: bold;  text-decoration: none; }	
.box-image{width: 100%; height: 176px;  position: relative; margin: 20px auto 0 auto; border-radius:20px; display: inline-block;    overflow: hidden; -webkit-box-shadow:  0 10px rgb(0, 0, 0); ;-moz-box-shadow:  0 10px rgb(0, 0, 0); ;box-shadow:  0 10px rgb(0, 0, 0);     }
.box-image:active { background-color: #3e8e41;  box-shadow: 0 10px rgb(0, 0, 0);  transform: translateY(4px);  opacity: 0.9;  transition: 0s}

.box-image .bg1{width: 100%; height: 100%; background-image: url("../images/image-activity-1.jpg");     background-color: #737373;  background-blend-mode: multiply; position: absolute; left: 0; top:0;}

.box-image .bg2{background-image: url("../images/image-activity-2.jpg"); }

.box-image .text{ position: absolute; left: 0; top:0; right:0; bottom:0; color: #fff; font-size: 18px; font-weight: 600; margin: auto; width: 100%; height: 30px; text-align: center; z-index: 1}


.MenuBottom{width: 100%; padding: 18px 0; background-color: #082631; position: fixed; left: 0; bottom: 3%; z-index: 3; text-align: center}
.MenuBottom a svg path{}
 .MenuBottom a:hover {   /*  background-color: #1587ab; */ border-radius: 50%; padding: 0px;}
.MenuBottom a.active {  /*  background-color: #1587ab; */ border-radius: 50%; padding: 0px;}

.connect-with{width: 100%; padding: 5px 0; background-color: #f1f1f1; position: fixed; left: 0; bottom: 0; z-index: 3; text-align: center; color: #828282; font-size: 12px;}
.connect-with i{margin-left: 15px;}

.mainmenu{width: 319px; height: 100vh; background: #fff url("../images/menubg.png") no-repeat bottom center; background-size: 100% auto; padding: 15px 0px 0px 0px; position: fixed; left: -377px; top:0; z-index: 100; }
.mainmenu .user-img{ width: 81px; height: 81px; position: relative; float: left; margin-left: 20px;}
.mainmenu .user-img .img{width:81px; height: 81px; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; border-radius: 50%;}
.mainmenu .user-img .img img{width: 100%; border-radius: 50%;}
.mainmenu .nametext{width: calc(100% - 120px); float: left; font-weight: 600; color: #082631; font-size: 22px; line-height: 1em; padding: 18px 0px 18px 12px;}
.mainmenu .nametext span{ width: 100%; display: inline-block; font-weight: 400; color: #082631; font-size: 14px;}
.mainmenu hr{    background-color: #000000;}
.menulink{ padding: 3% 20px 0px 20px;}
.menulink ul{margin: 0; padding: 0;}
.menulink ul li.arrow:after{ width: 15px; height: 15px;  content: ''; position: absolute; right: 10px; top:5px;  background: url("../images/chevron.svg") no-repeat;}
.menulink ul li.arrow.active:after{ transform: rotate(180deg);}
.menulink ul li a{text-decoration: none; color: #082631; }
.menulink ul li{ list-style: none; width: 100%; display: inline-block; font-size: 18px; color: #082631; font-weight: 500; padding-bottom: 20px; position: relative}
.menulink ul li i{margin-right: 20px;}
.menulink ul.secondmenu{margin-left: 12%; padding-top: 10px;}
.menulink ul.secondmenu li {padding-bottom: 5px;}
.time{width: 30.33%; text-align: center; float: left; margin-right: 3%}


.Banner-Image{width: 100%; height: 176px;  position: relative;  display: inline-block;  display: flex; align-items: center; padding: 15px 25px; background: #fff; border-bottom: 2px solid #ff6600;
    border-radius: 0px 0px 50px 50px; box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.1); justify-content: left;}

.Banner-Image .bg1{width: 100%; height: 100%; background-image: url("../images/image-activity-1.jpg"); background-repeat: no-repeat; background-color: #FF6600;   background-blend-mode: multiply; position: absolute; left: 0; top:0; background-position: center center; background-size: 100% 100%}
.Banner-Image .bg3{width: 100%; height: 100%; background-image: url("../images/image-activity-2.jpg"); background-repeat: no-repeat; background-color: #FF6600;   background-blend-mode: multiply; position: absolute; left: 0; top:0; background-position: center center; background-size: 100% 100%}
.Banner-Image .hedding{position: relative; z-index: 2; margin-top: 0px; display: flex; align-items: center;}
.Banner-Image .black-back-arrow{padding:0 20px 0px 0;}
.Banner-Image .hedding h2{margin-top: 50px; margin-bottom: 0; color: #000;}
.Banner-Image .black-back-arrow{ width: 30px; height: auto;  padding:0 0px 0 0px;  margin:0 20px 0 0px;box-sizing: border-box;}

.my-activity-report .AllTabs{width: 100%; min-height: 300px; display: inline-block; margin-top:33px;  }
.my-activity-report  .AllTabs #tabs{width:100%;height:30px; margin: 0; padding: 0;}
.my-activity-report  .AllTabs a{cursor:pointer;}
.my-activity-report .AllTabs #tabs ul{margin: 0; padding: 0;}
.my-activity-report  .AllTabs #tabs li{float:left;list-style:none; outline:none; width: 48%; text-align: center; margin-left: 1%; }

.my-activity-report  .AllTabs #tabs li a{		font-size: 11px;padding: 10px; display:block;background:#1587ab;border-top-left-radius:3px;border-top-right-radius:3px;text-decoration:none;outline:none; color: #fff; border-radius: 0.65em; -webkit-box-shadow: 0px 6px 7px -5px rgb(122, 59, 1);-moz-box-shadow: 0px 6px 7px -5px rgb(122, 59, 1);;box-shadow: 0px 6px 7px -5px rgb(122, 59, 1);; font-weight: bold;  }
.my-activity-report  .AllTabs #tabs li a.inactive{padding: 10px;font-size: 11px; color:#082631;background:#e4e4e4;outline:none; box-shadow: none; }
.my-activity-report  .AllTabs #tabs li a:hover, .my-activity-report  .AllTabs #tabs li a.inactive:hover{outline:none;}

.my-activity-report  .AllTabs .filtterbox{clear:both;width:100%;text-align:left; padding:15px 0; }
.my-activity-report  .AllTabs .filtterbox .img{width: 100%;}
.my-activity-report .AllTabs .filtterbox .Box{ width: 100%; min-height: 126px; display: inline-block;    background: #f7f7f7; border-radius: 0.65em; padding: 15px; position: relative;margin-bottom: 20px;     border: 1px solid #dbdbdb;}
.my-activity-report .AllTabs .filtterbox .Box h2{font-size: 16px;     max-width: 275px;float: left; font-weight: 600; color: #082631; margin-bottom: 20px; }
.my-activity-report .AllTabs .filtterbox .Box h2 span{font-size: 13px; float: left; font-weight: 600; color: #FF6600; padding-top: 2px; }

.my-activity-report .AllTabs .filtterbox .Box .right-side-icon{ width: 20px; height: 27px; position: absolute; right: 15px; top:15px; text-align: center}

.my-activity-report .AllTabs .filtterbox .Box .right-side-other{ width: 33px; height: 33px; position: absolute; right: 15px; top:15px; text-align: center}
.my-activity-report .AllTabs .filtterbox .Box .right-side-hold{ width: 30px;
    height: 33px;
    position: absolute;
    right: 133px;
    top: 14px;
    text-align: center;}
.my-activity-report .AllTabs .filtterbox .Box .right-side-close{ width: 33px; height: 33px; position: absolute; right: 91px; top:15px; text-align: center}
.my-activity-report .AllTabs .filtterbox .Box .right-side-approve{ width: 33px; height: 33px; position: absolute; right: 51px; top:15px; text-align: center}


.my-activity-report .AllTabs .filtterbox .Box .tickicon{ width: 60px; height: 51px; background: url("../images/Intersection-3.svg") no-repeat center center; position: absolute; right: 0px; bottom:0px;}
.my-activity-report .AllTabs .filtterbox .Box .tickicon .canceltick{ width: 32px; height: 32px; background: url("../images/icon-close.svg") no-repeat center center; position: absolute; right: 8px; bottom:6px;}
.my-activity-report .AllTabs .filtterbox .Box .tickicon .dubbletick{ width: 32px; height: 17px; background: url("../images/icon-right2.svg") no-repeat center center; position: absolute; right: 8px; bottom:12px;}
.my-activity-report .AllTabs .filtterbox .Box .tickicon .sigletick{ width: 32px; height: 17px; background: url("../images/icon-right.svg") no-repeat center center; position: absolute; right: 8px; bottom:12px;}
.my-activity-report .AllTabs .filtterbox .Box .tickicon .waitingtick{ width: 32px; height: 23px; background: url("../images/icon-reminder.svg") no-repeat center center; position: absolute; right: 8px; bottom:12px;}
.my-activity-report .AllTabs .filtterbox .Box .tickicon .holdtick{ width: 32px; height: 23px; background: url("../images/hold.svg") no-repeat center center; position: absolute;     background-size: contain;right: 8px; bottom:12px;}

.Details{ width: 100%; float: left; }
.Details .icon{width: 40px; float: left;  text-align: center; padding-top: 10px; }
.Details ul{float: left; margin: 0; padding: 0; }
.Details ul li{float: left; margin: 0; padding: 0 15px ; list-style: none; position: relative}
.Details ul li.border1:before{ content: ""; width: 1px; height: 30px; position: absolute; right: 0; top:0; bottom: 0; margin: auto; background-color: #707070}

p.t1{margin: 0; padding: 0; color: #000000; font-weight: normal; font-size: 14px; }
p.t2{margin: 0; padding: 0; color: #000000; font-weight: normal; font-size: 14px; }
p.t2 strong{ color: #ff6600; font-weight: 600; font-size: 17px; }
.daliy-tracker{ position: relative; padding: 20px 0 0 10px}
.daliy-tracker .black-back-arrow{ float: left;padding-top: 3px;}
.daliy-tracker h2{ float: left; color: #082631; margin-left: 10px; font-weight: 700; font-size: 24px; }
.daliy-tracker-Wapper .select{width: 100%; box-shadow: none;     border-radius: .75rem; padding-top: 15px; padding-bottom: 15px; background: url("../images/chevron.svg") no-repeat 97% center;     height: 45px;
    font-size: 14px; line-height: 14px;
    border-radius: 50px;}
.daliy-tracker.white{color: #fff !important}
.daliy-tracker.white h2{color: #fff !important}
.ListWapper img {
    width: 18px;
}
.ListWapper{width: 100%; height: auto; position: relative; background:#f8f8f8; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.ListWapper ol{padding-left: 20px; margin: 10px 20px 10px 15px;font-size: 0.8em; }
.ListWapper ol li{padding: 15px 0px 15px 10px;
    font-size: 15px;    border-bottom: 1px dashed;
    position: relative;
    font-family: 'Lato', sans-serif;
    font-weight: 900;}
.ListWapper ol li:after{content: ""; position: absolute; width: 98%; right:0; bottom: 0; height: 1px; background-color: rgba(256, 256, 256, 0.2)}
.ListWapper ol li:last-child:after{ display: none}
.ListWapper ol li p{ padding: 6px 0 0 0 ;  margin: 0;font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: normal; width: calc(100% - 59px); float: left;}
.ListWapper ol li span{font-size: 14px;font-family: 'Lato', sans-serif; font-weight: 900; }
.color-row1{width: 100%; min-height: 79px; background-color: #D5E255; border-top-left-radius: 10px; border-top-right-radius: 10px; position: relative}
.color-row2{width: 100%;  min-height: 111px;  background-color:#570dde; border-top-left-radius: 10px; border-top-right-radius: 10px; position: relative }
.color-row3{width: 100%;  min-height: 45px;  background-color: #FF9A41; border-top-left-radius: 10px; border-top-right-radius: 10px;position: relative   }

.box .color-row1 i, .box .color-row2 i, .box .color-row3 i{position: absolute; left: 0; top:0; bottom: 0; right:0; margin: auto; font-size: 28px; color: #082631;; font-style: normal; font-weight: 900; height:36px; font-family: 'Lato', sans-serif; }

.coloum{position: relative;min-height: 272px; display: inline-block; }
.coloum .box{position: absolute; left: 0; bottom:0; right:0; margin: auto; padding-right: calc(var(--bs-gutter-x) * .3); padding-left: calc(var(--bs-gutter-x) * .3);     text-align: center;}
.coloum .box h2{font-size: 12px; color:#1587AB; font-weight: bold; text-align: center}
 .coloum.box h2 span{font-weight: normal;}
.coloum .box .trophy{font-size: 14px; font-weight: bold;  text-align: center; color:#000; margin-bottom: 5px; }
.coloum .box .trophy i{padding-right: 5px;}
.coloum .box .img{ border-radius: 50%;  width: 52px; margin:0 auto 10px auto; }
.coloum .box .img.border1{ border: 4px solid #D5E255}
 .coloum .box .img.border2{ border: 4px solid#570dde}
.coloum .box .img.border3{ border: 4px solid #FF9A41}
.ListWapper.extra{margin-top: 20px; min-height: 100vh}

.listbox{width: 100%; position: relative; padding: 20px 0}
.listbox .name{width: 100%; font-size: 18px; font-weight: 500; margin-bottom: 20px;}
.listbox .name span{ font-size: 18px; font-weight: bold; margin-right: 10px;}
.listbox .box{text-align: center; background-color: #fff; border-radius: 12px; padding: 10px 0; }
.listbox .box .t1{margin: 0; padding: 0; font-size: 16px; color: #082631; font-weight: 700; }
.listbox .box .t2{margin: 0; padding: 0; font-size: 12px; color: #FF6600; font-weight: normal; }
.listbox .col-3{    padding-right: calc(var(--bs-gutter-x) * .3);    padding-left: calc(var(--bs-gutter-x) * .3);}

.bloodbox{ width: 100%;min-height: 175px; position:relative;text-align: center; background-color: #fff;  border-radius: 12px; margin-top: 40px;margin-bottom: 35px;    padding: 10px 0; display: inline-block; clear: both}
.bloodbox .iconbox{width: 100px; height: 125px; position: absolute; left: 0; top:-40px;}
.bloodbox  h2{ color: #082631 ; font-size: 22px; font-weight: 600; margin-top:8px;}

.bloodbox ul{margin: 25px auto 0 auto; padding: 0; width: 90%; display: inline-block }
.bloodbox ul li{list-style: none; padding: 0; margin: 0 0 15px 0; float: left; width: 50%; text-align: left; color: #1587AB; font-size: 16px;}
.bloodbox ul li i{margin-right: 10px;}
.btndefult-o{margin:17px 0 -37px 0;}
.btndefult-o .btn {width: 80%;  text-decoration: none; color: #fff;  padding: 1rem .75rem;  font-size: 15px; font-weight: 600; border-radius: 0.65em; font-weight: 600;  background: #095168;   background-image: linear-gradient(#FF6600, #FF6600); background-position: 50% 50%; background-repeat: no-repeat; background-size: 100% 100%; transition: background-size .5s, color .5s; box-shadow: none; -webkit-box-shadow: 0px 10px 12px -5px rgba(1,88,122,1);-moz-box-shadow: 0px 10px 12px -5px rgba(1,88,122,1);box-shadow: 0px 10px 12px -5px rgba(1,88,122,1);  margin: auto;    border: none;}

.btndefult-o .btn:hover {text-align: center; background-size: 0% 100%;  color:#fff; font-weight: bold;  text-decoration: none; }	

.EventsWapper{ position:  relative; display: inline-block; padding-top: 40px; }
.EventsWapper p{ font-size: 16px; color: #000 !important}

.EventsWapper  .Eventtab{width: 100%; min-height: 100vh; border-radius: 0.65em; padding: 0px 0px 35px 0px; display: inline-block; margin-top:20px;  }
.EventsWapper  .Eventtab #tabs{width:100%;height:auto; margin: 0; padding: 0;  display: inline-block}
.EventsWapper .Eventtab a{cursor:pointer;}
.EventsWapper  .Eventtab #tabs ul{margin: 0; padding: 0; display: inline-block}
.EventsWapper  .Eventtab #tabs li{float:left;list-style:none; outline:none; width: 50%; text-align: center; margin-left: 0%}

.EventsWapper  .Eventtab #tabs li a{padding: 15px 0; font-size: 
	16px;display:block;background:#fff;border-top-left-radius:3px;border-top-right-radius:3px;text-decoration:none;outline:none; color: #082631; border-radius: 0.65em;}
.EventsWapper  .Eventtab #tabs li a.inactive{padding: 10px; color:#082631;background:#1587AB;outline:none;}
.EventsWapper .Eventtab #tabs li a:hover, #tabs li a.inactive:hover{color:#000;outline:none;}

.EventsWapper .Eventtab .Eventdetails{clear:both;width:100%; text-align:left; background-color: #082631; padding:15px; border-radius: 0.65em; margin-top: 5px}
.EventsWapper .Eventtab .Eventdetails .date{ font-size: 18px; color: #fff; text-align: center; padding: 5px 0 0px 0; position: relative; margin-bottom: 40px;}
.EventsWapper .Eventtab .Eventdetails .date:after{content: ""; width: 20px; height: 1px; position: absolute; left: 0; bottom:-10px; right: 0; margin: auto; background-color: #fff;}

.EventsWapper .Eventtab .Eventdetails  ul{margin: 0; padding: 0;}
.EventsWapper .Eventtab .Eventdetails  ul li i{width: 20px; float: left; margin-right: 5px;}
.EventsWapper .Eventtab .Eventdetails  ul li{ font-size: 16px; color:#fff; list-style: none; margin-bottom: 10px;}

.AttendingBox{ width:100%; text-align:center; background-color: #FF6600; border-radius: 5px; margin-top: 20px; padding: 5px; display: table}
.AttendingBox p{margin: 0 0 0 0; padding: 0; display: table-cell; vertical-align: middle; width: 90px; color: #fff;     font-size: 14px; }
.AttendingBox p.t2{margin: 0 0 0 0px; padding: 0 0 0 10px; display: table-cell; vertical-align: middle; width: 190px; color: #fff;     font-size: 14px;}
.AttendingBox .radioboxed{width: 105px;  float: left; display: table-cell; border-right: 1px solid #fff}
.AttendingBox .radioboxed label {  display: inline-block;  width: 45px;  padding: 2px 5px; border-radius: 5px; text-align: center; background-color: #fff;color: #FF6600; font-weight: bold; transition: all 0.3s;}

.AttendingBox .radioboxed  input[type="radio"] {  display: none;}

.AttendingBox .radioboxed  input[type="radio"]:checked + label { background-color: #fff; color: #1BC98C;}

.PopUpBox-overlay{position: fixed; width: 100%; height: 100vh; left: 0; top:0; background: rgba(0, 0, 0, 0.5); z-index: 99; display: none}

.PopUpBox-witebox {width:95%; margin: auto; height: auto; min-height: 200px; background-color: #fff; position: absolute; left: 0; right:0; top:30px; z-index:100; border-radius: 0.65em;display: none }
.PopUpBox-witebox h2{ color: #082631 ; font-size: 22px; font-weight: 600; text-align: center; margin: 10px 0}
.PopUpBox-witebox .closebtn{width: 30px; height: auto; background-color: #000; text-align: center; padding: 5px 0; position: relative; right:-5px; top:-10px; border-radius: 50%; float: right}



.bodyloader{z-index: 9; background-color: #fff;position: fixed;width: 100%;height: 100%;overflow: hidden;}
.bodyloader img{text-align: center;width: 75px;transform: translate(-50%,-50%);position: absolute;left: 50%;top: 50%;}

.leaderboardsmall{font-size: 0.8em;display: block;padding-top: 2px;color:#ff6600;}

.modal-footer {justify-content: left;}
#divbesttime .form-control{width: 33.33%;}

@media (max-width:380px){
	
	.my-activity-report .AllTabs #tabs li a{font-size: 9px;}
	.SizeWapper .text{font-size: 11px;}
	.ListWapper ol li p{ line-height: 1.2em;}
	.bloodbox ul li{font-size: 1.2em;}
	.bloodbox ul li i{ margin-right: 5px;}
	.bloodbox h2{font-size: 16px;}
	.AttendingBox p{  font-size: 11px; }
.AttendingBox p.t2{font-size: 11px;}
	.EventsWapper .Eventtab #tabs li a{font-size: 14px;}
	.EventsWapper .Eventtab .Eventdetails ul li{font-size: 13px;}
	.AttendingBox .radioboxed{ width: 86px;}
	.AttendingBox .radioboxed label { width: 37px; }
}


.stravaDesc{
  padding-top:10px ;
  font-size: 13px !important;
  color:orange !important
}



 .goalsection{background-color: #fff; color: #000;border-radius: 10px; margin-top: 10px; padding: 0 15px; }
/* Goals and Rank Section */ 
 .goalsection .goals { display: flex; justify-content: space-between; align-items: center; } 
 .goalsection .progress { display: flex; flex: 1; margin-top: 25px; height: auto; background-color: transparent; border-radius: 0%; flex-flow: column;} 
 .goalsection .progress label { font-size: 14px; display: block; margin-top: 8px; } 
 .goalsection .slider-box { display: flex; align-items: center; justify-content: space-between; } 
 .goalsection .slider-box input[type="range"] { width: 100%; accent-color: #570DDE; margin-right: 10px; } 
 .goalsection .value { font-size: 14px; font-weight: bold; min-width: 40px; text-align: right; } 
 .goalsection .rank {text-align: center;border-left: 1px solid #ccc;padding-left: 10px;width: 67px;height: 114px;display: flex;flex-flow: column;align-items: center;justify-content: center;} 
 .goalsection .rank .text1 {font-size: 16px;font-weight: 400;display: block;text-align: center;} 
 .goalsection .rank .text2 { font-size: 30px; color:#001; display: block; margin-top: 4px; } 

/* Distance Buttons */ 
.distance { display: flex; justify-content: left; margin: 15px 0 25px 0; } 
.distance button { flex: 1; margin: 0 5px; padding: 20px 15px; border-radius: 8px; border: 1px solid #ccc; background: #f9f9f9; font-size: 14px; line-height: 21px;    min-height: 84px; color: #291C21;     font-weight: 500;} 
.distance .active {     background: #9ce447;
    border: 1px solid #a9ffad;
    color: #005100; } 
/* Activity Status */ 
.activity { margin: 15px 0 0 0; border-top: 1px solid #707070; padding:20px 0; } 
.activity h3 { margin-bottom: 25px; font-weight: normal; font-size: 28px;; } 
.status { display: flex; justify-content: space-between; margin: 10px 0; font-size: 14px; } 
.status span.ex{min-width: 75px;}
.pending { color: #ff6600; } 
.approved { color: green; } 
.rejected { color: red; } 
.pending .icon, .approved .icon, .rejected .icon, .on-hold .icon{min-width: 24px; display: inline-block;}
.status span.pending,  .status span.approved, .status span.rejected {min-width: 109px; display: inline-block; font-size: 13px; font-weight:500; display: flex; justify-content: left; align-items: center;    gap: 5px; }

.view-more { color: #ff6600; font-size: 16px; font-weight: bold; cursor: pointer; text-align: center; padding-top: 20px; text-decoration: underline; } 
/* Points Section */  
.points-section{margin-top: 0px; border-top: 1px solid #707070; padding-top: 15px; }
.points-section h3 { margin-bottom: 25px; font-weight: normal; font-size: 28px;; } 
.points { display: flex; justify-content: space-between;     padding-bottom: 83px;     margin-bottom: 30px; } 
.points .text { text-align: left; font-size: 16px; font-weight: normal; color: #000;;} 
.points strong { display: block; font-size: 18px; font-weight: blod; margin-top: 10px; } 
   /* Value inside thumb */ 
.thumb-value { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: normal; color: #5F5F5F; pointer-events: none; } 
.slider-container { margin:0 0 20px 0;  width: 90%;} 
.slider-container .slider-label { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; font-weight: 400; color: #000; } 
.slider-container .slider-wrapper { position: relative; width: 100%; } 
/* Track styling */ 
.slider-container input[type=range] { -webkit-appearance: none; width: 100%; height: 8px; border-radius: 5px; background: linear-gradient(to right, #ff6600 0%, #7eff00 var(--value, 0%), #ddd var(--value, 0%), #ddd 100%); outline: none; margin: 0; position: relative; z-index: 1; } 
/* Thumb styling */ 
.slider-container input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 40px; height: 40px; border-radius: 50%; background: transparent; /* transparent so number div is visible */ border: 0px solid #570DDE; cursor: pointer; position: relative; z-index: 3; } 
.slider-container input[type=range]::-moz-range-thumb { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 0px solid #570DDE; cursor: pointer; position: relative; z-index: 3; } 
/* Value inside thumb */ 
.slider-container .thumb-value { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: bold; color: black; width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 50%; border: 1px solid #570DDE; background: #fff; pointer-events: none; z-index: 2; }


  /* Bottom Navigation */ 
   .bottom-nav { display: flex; justify-content: space-around; padding:15px 8px 40px 8px; border-top: 1px solid #ddd; background: #fff; position: fixed; bottom: 0; left: 0; right: 0; margin: auto;  border-radius: 50px 50px 0 0; box-shadow: 0 -10px 10px rgba(0,0,0,0.1); } 
   .bottom-nav a {text-align: center; padding: 0px 0;text-decoration: none;color: #666; font-size: 12px; font-weight: normal; flex-flow: column;display: flex;justify-content: center;} 
   .bottom-nav a.active { color: #291C21; font-weight: 400 ; background-color: transparent;     padding: 0; } 

    .bottom-nav .icon1,  .bottom-nav .icon2,  .bottom-nav .icon3,  .bottom-nav .icon4 {
       display: inline-block;
       width: 24px;
       height: 24px;
       background-size: contain;
       background-repeat: no-repeat;
       margin: 0 auto 8px auto;
   }
    .bottom-nav .icon1 { background-image: url('../../assets/new/images/deshboard.svg'); }
	.bottom-nav a.active .icon1{ background-image: url('../../assets/new/images/deshboard-active.svg'); }
    .bottom-nav a .icon2 { background-image: url('../../assets/new/images/leaderboard.svg'); }
    .bottom-nav a.active .icon2 { background-image: url('../../assets/new/images/leaderboard-active.svg'); }	
    .bottom-nav a .icon3 { background-image: url('../../assets/new/images/setting.svg'); }
	.bottom-nav a.active .icon3 { background-image: url('../../assets/new/images/setting-active.svg'); }
    .bottom-nav a .icon4 {  background: url('../../assets/new/images/logout.svg') no-repeat center bottom ; }
	.bottom-nav a.active .icon4 { background: rgba(196,170,248,0.35)  url('../../assets/new/images/profile-active.svg') no-repeat center center ; border-radius: 50%; }


  .form-control {
      font-size: 14px !important;
    font-weight: 400 !important;
}

  .form-control::placeholder {
      font-size: 14px !important;
    font-weight: 400 !important;
}

.rejectedtick {
    width: 32px;
    height: 32px;
    background: url(../images/icon-close-new.svg) no-repeat center center;
    position: absolute;
    right: 8px;
    bottom: 6px;
}