*{padding:0px;margin:0px;box-sizing:border-box;outline: none;font-family: 'Poppins', sans-serif;}
body{height:100vh;}
.bg_image{  background: url(../images/pooja-bg.jpg)repeat-y;
    background-size: cover;
  background-position: center;}
.commmited-container h2{font-size: 15px;color:var(--primary-color);text-transform: uppercase;margin-bottom: 12px;}
.commmited-container p{color: #555;}
:root{--primary-color: #fe833a;}
.container{display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding: 38px 0px;}
.container-scroll{display: flex;flex-direction: column;justify-content: space-between;align-items: center;}
.h-100{height:90%;}
.yellow{color:var(--primary-color);}
.btn{padding:20px 10px;color:#fff;border:none;border-radius: 10px;}
.bg-yellow{background: var(--primary-color)!important;}
.w-100{width:100%;}
.w-90{width:90%;}
.signup-container.written_cntr {
    margin-bottom: 105px!important;
}

input, textarea, select {
    &:-webkit-autofill {
        &, &:hover, &:focus {
            // border: 1px solid $main;
            -webkit-text-fill-color: $main;
            -webkit-box-shadow: 0 0 0px 1000px #c4c4c494 inset;
            box-shadow: 0 0 0px 1000px #c4c4c494 inset;
            transition: background-color 5000s ease-in-out 0s;
        }
    }
}

@-webkit-keyframes autofill {
    to {
        color: #000;
        background: #c4c4c494!important;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}
#Events select#eventsFilter {
    display: none;
}

.signup-container .input-container input::-webkit-input-placeholder { /* Edge */
  color: #000;
}

.signup-container .input-container input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #000;
}

.signup-container .input-container input::placeholder {
  color: #000;
}
.signup-container .input-container label {
    display: block;
}
select#mantraSelect {
    width: 94%;
}

button.reset_btn {
      background: #fff;
    border: none;
    position: absolute;
    right: 22px;
    top: 88px;
    color: #fe833a;
/*    display: none;
*/    padding: 9px 17px;
    font-size: 17px;
  border-radius:10px;
}
.totaluser_jaap {
    background: url(../images/sticker.png)no-repeat;
    width: 147px;
    height: 114px;
    text-align: center;
    position: absolute;
    color: #fff;
    font-size: 12px;
    padding-top: 21px;
    text-align: center;
    font-weight: bold;
       background-size: 147px;
    left: -39px;
    bottom: 70px;
    transform: rotate(23deg);
}

p#totalJaap {
    padding-top: 13px;

}
select#eventsFilter {    background: #fe833a;
    border: none;
    padding: 6px 18px;
    height: 34px;
    color: #fff;
    margin-bottom: 13px;
    border-radius: 10px;
}
.totaluser_jaap span {
   font-size: 11px;
    position: relative;
    top: -6px;
    left: 2px;
}

@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
.blink{
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 1.2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}

span.top_jaap {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    background: #fff;
    color: #fe833a;
    padding: 11px 0;
}
.two-partition{display:flex;align-items:center}
.two-partition .input-container:first-child{margin-right:10px}
.two-partition .input-container{flex: 0 0 50%;margin:0px; max-width:50%;}
.mt-20  {margin-top: 20px;}
.slider-container::-webkit-scrollbar {
  display: none;
}
.signup-container p a {
    color: #fe833a;
    font-size: 15px;
    padding-top: 9px;
}
.dashboard_cntr .h-100 {
    height: 100vh;
}
.dashboard_cntr .container-scroll{/* height:100%; */}
.commmited-container {    border-radius: 6px;
    border: 1px solid #fe833a;
    position: relative;
}
.tabs-container li.active{background-color:var(--primary-color)}

textarea#jaapData {
    border-radius: 0 0 6px 6px;
}
form#tab0form {
    line-height: 0;
}
.commmited-container h2 {    border-radius: 6px 6px 0 0;
    background: #fff;
    padding: 12px 9px;
    text-align: center;
    margin: 0;
}
.commmited-container p {line-height:normal;
    color: #fff;
    background: #fe833a;
    padding: 10px 28px;
    text-align: center;
}

.menu-btn {cursor: pointer;width: 27px;height: 20px;position: absolute;-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .5s ease-in-out;transition: .5s ease-in-out;z-index: 200;top: 30px;left: 28px;/* top: 20px; */}
.menu-btn span.line {display: block;position: absolute;height: 4px;width: 100%;background: #fff;border-radius: 9px;opacity: 1;left: 0;-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;transition: .25s ease-in-out;}
.menu-btn.open {position: absolute; left:auto; right:28%;/* left: 15px!important; *//* top: 20px; */}
.menu-btn span.line:nth-child(1) {top: 0px;}
.menu-btn span.line:nth-child(2) {top: 8px;}
.menu-btn span.line:nth-child(3) {top: 16px;}
.menu-btn.open span.line:nth-child(1) {top: 10px;-webkit-transform: rotate(135deg);transform: rotate(135deg);}
.menu-btn.open span.line:nth-child(2) {opacity: 0;left: -60px;}
.menu-btn.open span.line:nth-child(3) {top: 10px;-webkit-transform: rotate(-135deg);transform: rotate(-135deg);}
.edit-btn{position: absolute!important;right: 18px;padding: 4px 4px;height: 20px;width: 20px;}
.menu-btn.open span.line:nth-child(1) {top: 10px;-webkit-transform: rotate(135deg);transform: rotate(135deg);background: var(--primary-color);}
.menu-btn.open span.line:nth-child(2) {opacity: 0;left: -60px;background: #fff;}
.menu-btn.open span.line:nth-child(3) {top: 10px;-webkit-transform: rotate(-135deg);transform: rotate(-135deg);background: var(--primary-color);}
.counter-container{
    background: #fe833a;
    padding: 7px 0;
    border-radius: 10px;
    text-align: center;
    font-size: 22px;
    color: #fff;
    clear: both;
    width: 109px;
    margin: 0px auto 2px;
    position: relative;
    top: 1px;
    }
button.write_submit_btn {
  background: #fe833a;
    border: none;
    padding: 10px 30px;
    color: #fff;
    margin-top: 15px;
    border-radius: 6px;
}
.dropzone .dz-preview .dz-remove{left:-100px!important;}
    .submit-btn{background: #fff;
    border: none;
    width: 100%;
    padding: 10px;
    height: 132px;
    margin-top: 20px;
    width: 132px;
    border-radius: 50%;
    margin: auto;
    margin-top: 20px;}
.jap-container{padding-bottom: 100px;}
.name-container{
 position: absolute;
    padding: 6px 20px;
    color: #fff;
    background: #fe833a;
    top: 26px;
    left: auto;
    border-radius: 10px;
    right: 18px;
    }
marquee{width: 100%;
    position: absolute;
    left: 0;
    line-height: 23px;
    min-height: 42px;
    bottom: 0px;
    background: var(--primary-color);
    color: #ffff;
    padding: 10px;
    }
.name-container h2  {font-size: 16px} 
.name-container h1{font-size: 18px;}   
.signup-container .two-partitions{display:flex;align-items: center}
.signup-container .two-partitions .input-container span{font-size: 12px}
.form-error-input{
    color: red;
    padding-top: 10px;
    /* position: absolute; */
    /* left: 0; */
    /* bottom: -13px; */
    
    }
.form-border-err{border: 1px solid red!important;}
.signup-container .two-partitions .input-container:first-child input{width: 95%;}
.signup-container .two-partitions .input-container{flex:0 0 50%;}
/*.signup-container .two-partitions .input-container input{width:40%;}*/
.slider-container {display:flex;align-items: center;overflow-x: scroll; -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */}
.slider-container .slider-item{text-align: center;flex:0 0 100%;}
.slider-container .slider-item img{width:100%;}
.slider-container .slider-item .srcoller-content{padding-bottom:10px;}
.app{height:100%;width:100%;}
.year-txt{text-align: center;margin-top: 10px;}
.year-txt a{color:var(--primary-color);font-weight: 600;font-size: 18px;padding: 8px;/* padding-top: 10px; */}

.dots-container {padding:0px;display: flex;gap:10px;align-items: center}
.dots-container  li{list-style: none;height:20px;width:20px;background:#c4c4c4;border-radius: 50%;}
.dots-container  li.active{background-color:var(--primary-color);}
.signup-container h3{padding-bottom: 30px;font-size: 32px;}
.signup-container .input-container {margin-bottom: 12px; position:relative;}
.signup-container .input-container label{/* padding-bottom: 66px; */}
.signup-container .input-container input{width: 100%;border: navajowhite; color:#000; background-color: #c4c4c494; height: 38px;
    padding: 0 10px;border-radius: 6px;/* padding-top: 14px; */
  margin-bottom: 8px;margin-top: 10px;}
.signup-container .input-container select{  color:#000;  width: 100%;
    border: navajowhite;
    background: #c4c4c494;
    margin-bottom: 5px;
    height: 38px;
    padding: 0 10px;
    border-radius: 6px;
    margin-top: 10px;
}  
select.mantra.select_mantr_home {
    background: #fff;
}

.dashboard_cntr .signup-container {
    padding: 0;
}

.signup-container .input-container textarea{width: 100%;border: navajowhite;background: #c4c4c494; height:84px;
  padding: 15px 10px;border-radius: 6px;/* padding-top: 14px; */margin-top: 10px;}    
.update-btn {margin-bottom: 20px;width: 36%;padding: 12px 10px;display: inline-block; height:40px;}
.top-banner{
    background-image: url(../images/mobile_banner.jpg);
  background-repeat: no-repeat;
    background-size: 100%;
    height: 295px;
    width: 100%;
    position: relative;
    overflow: hidden;
    /* position: absolute; */
}
.bg_image .top-banner{height:335px;}
label.mantra_text {
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 1px 1px 3px #706b6b;
}


select#mantraSelect {
    width: 94%;
}
.top-banner .overlay-container{
    background: #0000006b;
    position: absolute;
    height: 100%;
    width: 100%;
}
.japp-btn{
    padding: 30px;
    height: 200px;
    width: 200px;
    border: none;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
}
.update-btn[disabled='disabled']{
    background:#c4c4c4c4;
}
.commitment-container textarea{}
.signup-container{position: relative;padding-bottom: 30px;}
.profile-img-container{/* position: absolute; */}
.swal2-confirm{background:var(--bg-yellow);}
.edit-btn{
    position: absolute;
    top: -68px;
    padding: 2px 10px;
    left: 0px;
    }
    .edit-btn img{height:30px;width: 30px}
.jap-btn{
text-align: center;
}
.overlay-container{
    height: 100%;
    width: 100%;
    background: #0000006b;
    position: fixed;
    top: 0px;
    /* display: none; */
    }
.jap-btn button {  margin-top:10px;   font-size:18px;
    color: #fff;
    word-break: break-all;
    font-weight: bold;
    background-image: linear-gradient(#f7f70a, #e15d0e);
    border: 7px solid #ffffffe3;}
.sidenav{
    position: fixed;
    height: 100%;
    width: 80%;
    top: 0px;
    background: #fff;
    left: -100%;
    padding: 12px 40px;
  background: url(../images/pooja-bg.jpg)no-repeat;
    }
   .sidenav > ul {
    padding-top: 20px;
}
.sidenav ul li:last-child{padding-bottom:10px;}

     .sidenav ul li{list-style: none;padding: 0 0 30px;font-weight: 500;font-size: 20px;}
     .logout-btn{background: var(--primary-color);
    color: #fff;
    padding: 10px 41px!important;
    text-align: center;
    font-size: 16px!important;
    border-radius: 30px;
    margin-top: 0;
    display: inline-block;}
       .sidenav ul li a{text-decoration: none;color:var(--primary-color);}


.shrink {
  animation: shrink .3s forwards alternate; 
}

.jiggle {
  animation: jiggle 3s forwards ease-in-out;
}

@keyframes shrink {
  0% { }
  100% { transform: scale(.9); } 
}
 
@keyframes jiggle {
  0% { transform: scale(.9); }
  10% { transform: scale(1.1); }
  20% { transform: scale(.9); }
  30% { transform: scale(1.05); }
  40% { transform: scale(.95); }
  50% { transform: scale(1.025); }
  60% { transform: scale(.975); }
  70% { transform: scale(1.02); }
  80% { transform: scale(.985); }
  90% { transform: scale(1.01); }
  100% { transform: scale(1); }
}
.jap-info-container table{width:100%}

.jap-info-container th{padding: 16px 3px;font-size: 12px;background-color: #fe833a;color: #fff;}
tr:nth-child(even) {
  background-color: #f2f2f2;
  color:#000
}

.jap-info-container  td{padding: 8px 0px;font-size: 12px;text-align: center;     background: #c4c4c494;}
.count-container{display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;}
.count-container li{list-style:none; padding: 4px 0 10px; font-size:14px;}
.tabs-container li{font-size: 14px;list-style:none;padding:15px 24px;color: #fff;}
.tabs-container {display: flex;/* padding: 11px 9px; */gap: -2px;width: 100%;background: #fe833a94;padding-left: 22px; position:relative; top:-1px;
}
.topUserContainer{bottom:0px;left:0px;position: fixed; width:100%;}
#userdata li {
    display: inline;
    padding: 0 10px;
    border-right: 1px solid #fff;
}

select#filter, select#commitmentfilter {
      background: #fe833a;
    border: none;
    padding: 6px 18px;
    height: 34px;
    color: #fff;
    margin-bottom: 13px;
    border-radius: 10px;
}


@media only screen and (min-width:1024px){
.content-container.w-90.dekstop_width.mt-20 {
    width: 32%;
}
  select#mantraSelect {
    width: 98%;
}
  select#eventsSelect {
    width: 98.2%;
}
  .update-btn{width:10%;}
.bg_image .container-scroll {
    background: url(../images/pooja-bg.jpg)no-repeat center;
    background-size:cover;
}
.signup-container.written_cntr {
    padding-bottom: 110px;
}
 .top-banner{
    background-image: url(../images/app_banner.jpg);
  background-repeat: no-repeat;
    background-size: 100%;
    height: 350px;
    width: 100%;
    position: relative;
    overflow: hidden;
    /* position: absolute; */
}
  .bg_image .top-banner{    height: 385px;
}
  
}


@media only screen and (max-width:767px){

input[type="date"]::before{
   color: #000;
   content: attr(placeholder);
}
input[type="date"]:focus::before {
   content: "" !important;
}
  input[type="date"]  {
      -webkit-appearance: none;
    appearance: none;
background: url(../img/datepicker.png)no-repeat;
    background-position: 93%!important;
  }


  
}


@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader-container {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(5px);
    z-index: 9999;
    -webkit-animation: fadeIn 0.25s linear;
    animation: fadeIn 0.25s linear;
}

.loader-container .loader {
    border: 7px solid #F1F1F1;
    border-radius: 50%;
    border-top: 7px solid var(--primary-color);
    border-bottom: 7px solid var(--primary-color);
    width: 80px;
    height: 80px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.form-error-message{color:red;font-size: 12px;}