/* ---------------------css for toggle button------------------------- */
.toggle-btn{
  font-family: "Noto Sans", sans-serif;  
  width: 140px;
  height: 50px;
  margin: 10px;
  border-radius: 50px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  background:#8A036D;
  -webkit-transition: background-color .40s ease-in-out;
  -moz-transition: background-color .40s ease-in-out;
  -o-transition: background-color .40s ease-in-out;
  transition: background-color .40s ease-in-out;
  cursor:pointer;
  &.active{
    background: no-repeat 10px center #424343;
    color: #fff;
    .round-btn{
      left: 96px;
    }
  }
  .round-btn{
    width: 37px;
    height: 37px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 7px;
    top: 50%;
    margin-top: -18px;
    -webkit-transition: all .30s ease-in-out;
  -moz-transition: all .30s ease-in-out;
  -o-transition: all .30s ease-in-out;
  transition: all -0.7s ease-in-out;
  }
  .cb-value{
    position: absolute;
    left:0;
    right:0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 9;
    cursor:pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
input.cb-value {
    font-family: "Noto Sans", sans-serif;
}


//follow me template
.made-with-love{
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 10px;
  text-align: center;
  font-size: 10px;
  z-index: 9999;
  
  color: #fff;
  i{
    font-style: normal;
    color: #F50057;
    content: "YES";
    font-size: 14px;
    position: relative;
    top: 2px;
  }
  a{
    color: #fff;
    text-decoration: none;
    &:hover{
      text-decoration: underline;
    }
  }
}

/* ----------------- */

.night-toggle-content{
  display:none;
}

.day-toggle-content{
  display:none;
}

.show{
  display:block;
}

/* .toggle-text {
    position: absolute;
    right: 38px;
    top: 6px;
} */

.toggle-text.yes {
    position: absolute;
    top: 11px;
    right: 0px;
    left: -90px;
    width:90px;
}

.toggle-text {
    position: absolute;
    left: 37px;
    top: 11px;
    width: 90px;
    color: #fff;
    
    font-size: 14px;
    font-weight: 500;
    line-height: 16.41px;
}

.night-toggle-content.show p {
 
    font-size: 38px;
    font-weight: 300;
    line-height: 47.5px;
    color: #424343;
    padding-bottom: 25px;
}

.toggle-inner {
    text-align: center;
    background-color: #8A036D0d;
    padding: 35px 36px;
    margin: 75px 0px;
}

.toggle-content {
    display: flex;
    min-height: 250px;
    justify-content: center;
    align-items: center;
}

.day-toggle-content.show {
   
    font-size: 38px;
    font-weight: 300;
    line-height: 47.5px;
    color: #424343;
}

/* ------------------media query-------- */

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

  .night-toggle-content.show p {
    font-size: 25px;
    font-weight: 300;
    line-height: 31.25px;
  }
  
  .day-toggle-content.show p{
    font-size: 25px;
    font-weight: 300;
    line-height: 31.25px;
  }
}

@media only screen and (max-width: 480px){
  .toggle-inner {
    padding: 35px 36px;
    margin: 50px 0px;
  }
}

@media only screen and (max-width: 360px){
  
  .toggle-outer .page-center {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .night-toggle-content.show p {
    padding: 0 10px !important;
  }
  
  .toggle-inner {
    padding: 35px 0px;
    margin: 40px 0px;
  }
    
  .toggle-btn{
  width: 140px;
  height: 50px;
  margin: 10px;
  border-radius: 50px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  background:#8A036D;
  -webkit-transition: background-color .40s ease-in-out;
  -moz-transition: background-color .40s ease-in-out;
  -o-transition: background-color .40s ease-in-out;
  transition: background-color .40s ease-in-out;
  cursor:pointer;
  &.active{
    background: no-repeat 10px center #424343;
    color: #fff;
    .round-btn{
      left: 98px;
    }
  }
  .round-btn{
    width: 36px;
    height: 36px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 7px;
    top: 50%;
    margin-top: -18px;
    -webkit-transition: all .30s ease-in-out;
  -moz-transition: all .30s ease-in-out;
  -o-transition: all .30s ease-in-out;
  transition: all -0.7s ease-in-out;
  }
  .cb-value{
    position: absolute;
    left:0;
    right:0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 9;
    cursor:pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
  
  .round-btn {
    width: 36px;
    height: 36px;
    left: 5px;
  }
  
  .toggle-content {
    min-height: 330px;
  }  
}