#velsof_wheel_container{
    font-family: 'Merriweather', serif;
}

.bodyoverflowhidden {
    overflow: hidden !important;
}
/*start: changes done by Aayushi Agarwal on 25 Jan 2019 for integrating valentine themes*/
#velsof_wheel_main_container.hug_day {
    background-image: url(../../img/front/valentine_week/hug_day/background.png);
}
#velsoftop.hug_day {
    background: url(../../img/front/valentine_week/hug_day/top.png);
    background-repeat: no-repeat;
    opacity: 1;
    background-position: top center;
    //background-size: cover;
}
#velsofbottom.hug_day  { 
    background-image: url(../../img/front/valentine_week/hug_day/bottom.gif);
    background-position: bottom right 30px;
    opacity: .8;
    background-size: auto;
}
#velsof_wheel_main_container.chocolate_day {
    background-image: url(../../img/front/valentine_week/chocolate_day/background.png);
}
#velsoftop.chocolate_day {
    background: url(../../img/front/valentine_week/chocolate_day/top.gif);
    background-repeat: no-repeat;
    opacity: 1;
    background-position: top center;
    //background-size: cover;
}
#velsofbottom.chocolate_day  { 
    background-image: url(../../img/front/valentine_week/chocolate_day/bottom.png);
    //background-position: bottom right 30px;
    opacity: .8;
    background-size: auto;
}
#velsof_wheel_main_container.teddy_day {
    background-image: url(../../img/front/valentine_week/teddy_day/background.png);
}
#velsoftop.teddy_day {
    background: url(../../img/front/valentine_week/teddy_day/top.png);
    background-repeat: no-repeat;
    opacity: 1;
    background-position: top center;
    //background-size: cover;
}
#velsofbottom.velsoftheme.teddy_day  { 
    background-image: url(../../img/front/valentine_week/teddy_day/bottom.gif);
    background-position: bottom right 30px;
    opacity: .8;
    background-size: auto;
}
#velsof_wheel_main_container.promise_day {
    background-image: url(../../img/front/valentine_week/promise_day/background.png);
}
#velsoftop.promise_day {
    background: url(../../img/front/valentine_week/promise_day/top.png);
    background-repeat: no-repeat;
    opacity: 1;
    background-position: top center;
    //background-size: cover;
}
#velsofbottom.velsoftheme.promise_day  { 
    background-image: url(../../img/front/valentine_week/promise_day/bottom.gif);
    background-position: bottom right 30px;
    opacity: .8;
    background-size: auto;
}
#velsof_wheel_main_container.valentine_day {
    background-image: url(../../img/front/valentine_week/valentine_day/background.png);
}
#velsoftop.valentine_day {
    background: url(../../img/front/valentine_week/valentine_day/top.png);
    background-repeat: no-repeat;
    opacity: 1;
    background-position: top center;
    /* background-size: cover; */
}
#velsofbottom.valentine_day  { 
    background-image: url(../../img/front/valentine_week/valentine_day/bottom.gif);
    background-position: bottom right 30px;
    opacity: .8;
    background-size: auto;
}
#velsof_wheel_main_container.rose_day {
    background-image: url(../../img/front/valentine_week/rose_day/background.png);
}
#velsoftop.rose_day {
    background: url(../../img/front/valentine_week/rose_day/top.png);
    background-repeat: no-repeat;
    opacity: 1;
    background-position: top left 140px;
    //background-size: cover;
}
#velsofbottom.rose_day  { 
    background-image: url(../../img/front/valentine_week/rose_day/bottom.gif);
    background-position: bottom right 30px;
    opacity: .8;
    background-size: auto;
}
#velsof_wheel_main_container.propose_day {
    background-image: url(../../img/front/valentine_week/propose_day/background.png);
}
#velsoftop.propose_day {
    background: url(../../img/front/valentine_week/propose_day/top.gif);
    background-repeat: no-repeat;
    opacity: 1;
    background-position: top center;
}
#velsofbottom.velsoftheme.propose_day  { 
    background-image: url(../../img/front/valentine_week/propose_day/bottom.png);
    background-position: bottom right 30px;
    opacity: .8;
    background-size: auto;
}
#velsof_wheel_main_container.kiss_day {
    background-image: url(../../img/front/valentine_week/kiss_day/background.png);
    background-size: 100% 100%;
}
#velsoftop.kiss_day {
    background: url(../../img/front/valentine_week/kiss_day/top.png);
    background-repeat: no-repeat;
    opacity: 1;
    background-position: top left 120px;
    //background-size: cover;
}
#velsofbottom.kiss_day  { 
    background-image: url(../../img/front/valentine_week/kiss_day/bottom.gif);
    background-position: bottom right 30px;
    opacity: .8;
    background-size: auto;
}

/*end: changes done by Aayushi Agarwal on 25 Jan 2019 for integrating valentine themes*/
#velsof_wheel_container {
    position: fixed;
    width: 100%;
    height: 100%;
    top:0px;
    left: 0px;
    overflow-y: auto;
    display: none;
    z-index: 99999999;
}

#velsof_wheel_model {
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #9e9e9e;
    opacity: 0.6;
    height: 100%;
    width: 100%;
    position: absolute;
}

#velsof_wheel_main_container  {
    position: absolute;
    z-index: 10;
    top: 0;
    left: -90%;
    width: 90%;
    height: 100%;
    max-width: 790px;
    overflow-y: hidden;
    box-sizing: border;
    background: #004c70;
    -webkit-box-shadow: 10px 0px 5px -5px rgba(66,66,66,0.45);
    -moz-box-shadow: 10px 0px 5px -5px rgba(66,66,66,0.45);
    box-shadow: 10px 0px 5px -5px rgba(66,66,66,0.45);
    transition: all 500ms ease;
}

#velsof_wheel_main_container.transform {
    left: 0%;
}

#velsof_spinner_container {
    float: left;
    width: 500px;
    text-align: left;
    height: 500px;
}

#velsof_offer_container {
    float: right;
    width: 230px;
    text-align: left;
    z-index: 100;
}

#velsof_spinners {
    position: absolute;
    left: -230px;
    height: 500px;
    margin-bottom: auto;
    margin-top: auto;
    top: 0px;
    bottom: 0px;

}

#velsof_spinner {
    background-size: cover;
    width: 500px;
    text-align: left;
    height: 500px;
}

/* Start Code Added and Modified By Priyanshu to implement Slice Settings Functionality on 12-August-2020 */

.velsof_spinner1_12 {
    background: url(../../img/front/wheel1.png);
    background-size: cover;
    width: 500px;
    text-align: left;
    height: 500px;
}

.velsof_spinner2_12 {
    background: url(../../img/front/wheel2.png);
    background-size: cover;
    width: 500px;
    text-align: left;
    height: 500px;
}

.velsof_spinner1_8 {
    background: url(../../img/front/wheel1-8-slot.png);
    background-size: cover;
    width: 500px;
    text-align: left;
    height: 500px;
}

.velsof_spinner2_8 {
    background: url(../../img/front/wheel2-8-slot.png);
    background-size: cover;
    width: 500px;
    text-align: left;
    height: 500px;
}
.velsof_spinner1_6 {
    background: url(../../img/front/wheel1-6-slot.png);
    background-size: cover;
    width: 500px;
    text-align: left;
    height: 500px;
}

.velsof_spinner2_6 {
    background: url(../../img/front/wheel2-6-slot.png);
    background-size: cover;
    width: 500px;
    text-align: left;
    height: 500px;
}

/* End Code Added and Modified By Priyanshu to implement Slice Settings Functionality on 12-August-2020 */

#velsof_spinner {
    -webkit-animation-duration: 6000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
    animation-duration: 6000ms;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards; 
}


.wheelslices {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: rotate(-60deg) translate(0px, -50%);
    transform-origin: 0 0;
    -webkit-transform: rotate(-60deg) translate(0px, -50%);
    -webkit-transform-origin: 0 0;
    text-align: right;
    width: 40%;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent; 
    color: #fff;
    font-family: 'Roboto', sans-serif;
}

#velsof_wheel_pointer {
    position: absolute;
    width: 90px;
    left: 230px;
    margin-top: auto;
    margin-bottom: auto;
    top: 0px;
    bottom: 0px;
    z-index: 11;
}

#velsof_wheel_pointer.velsof_wheel_pointer1 {
    left: 230px;
    width: 110px;
}

#velsof_offer_main_container {
    position: absolute;
    left: 0px;
    top: 0px;
    margin-top: auto;
    margin-bottom: auto;
    right: 0px;
    bottom: 0px;
    left: 360px;
    height: 300px;
    width: 390px;
    z-index: 1000
}

.velsof_main_title {
    font-size: 28px;
    font-weight: bold;
    /*color: #fff;*/
    line-height: normal;
}

.velsof_subtitle {
    font-size: 14px;
    margin-top: 5px;
    /*color: #fff;*/
    width: 90%;
}

.cancel_button {
    margin-top: 30px;
}

.velsof_ul li {
    /*color: #fff;*/
    font-size: 12px;
    margin-top: 5px;
    margin-left: 10%;
}

.velsof_ul {
    margin-top: 10px;
    list-style-type: circle;
    margin-bottom: 10px;
}
.kbsw_width{
    width:44.5%;
}
.velsof_input_field {
    padding: 9px 10px;
    width: 90%;
    background: #fff;
    border-radius: 3px !important;
    border: none;
    color: #5a5a5a;
    font-size: 15px;
}

.velsof_button {
    background: #000;
    border: none;
    color: #fff;
    border-radius: 3px;
    width: 90%;
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 9px 10px;
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
    cursor: pointer;
}


.velsof_shadow {
    position: absolute;
    top: 6%;
    left: 6%;
    width: 100%;
    height: 92.5%;
    background-image: url(../../img/front/shadow.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
}

/* Custom CSS */


.cancel_button {
    text-align: right;
    cursor: pointer;
}

.exit_button {
    text-align: center;
}

#spin_wheel_logo_container
{
    float: right;
    margin-top: 10%;
    margin-right: 10%;
}

#spin_wheel_logo{
    width:100px;
    height:100px;
}

#pull_out_tab {
    top: 50%;
    position: fixed;
    opacity: 0.5;
    display: none;
    cursor: pointer;
    z-index: 9999;
}

.tooltipster-sidetip.tooltipster-default.tooltipster-velsofspinwheel .tooltipster-box {
    background-color: #FFBABA;
    border-radius: 6px;
    border: 0;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    opacity: 0.95; }

.tooltipster-sidetip.tooltipster-default.tooltipster-velsofspinwheel .tooltipster-arrow-border {
    border-top-color: #FFBABA; }

.tooltipster-sidetip.tooltipster-default.tooltipster-velsofspinwheel .tooltipster-arrow-background {
    border-top-color: #FFBABA; }

.tooltipster-sidetip.tooltipster-default.tooltipster-velsofspinwheel .tooltipster-content {
    color: #D8000C;
    padding: 15px 15px;
}

.tooltipster-velsofspinwheel {
    z-index: 9999999999999999999999 !important; 
}

#vss_combined_input_field {
    color: #607d8b !important;
}

#vss_loader {
    z-index: 9999999999999999;
    position: absolute;
    display: none; 
    margin-top: 18%;
    margin-left: 33%;
}


@keyframes spinwheel_1 {
    from {
        transform: rotate(0deg); 
    }
    to {
        transform: rotate(720deg); 
    } 
}
@keyframes spinwheel_2 {
    from {
        transform: rotate(0deg); 
    }
    to {
        transform: rotate(750deg); 
    } 
}
@keyframes spinwheel_3 {
    from {
        transform: rotate(0deg); 
    }
    to {
        transform: rotate(780deg); 
    } 
}
@keyframes spinwheel_4 {
    from {
        transform: rotate(0deg); 
    }
    to {
        transform: rotate(810deg); 
    } 
}
@keyframes spinwheel_5 {
    from {
        transform: rotate(0deg); 
    }
    to {
        transform: rotate(840deg); 
    } 
}
@keyframes spinwheel_6 {
    from {
        transform: rotate(0deg); 
    }
    to {
        transform: rotate(870deg); 
    } 
}
@keyframes spinwheel_7 {
    from {
        transform: rotate(0deg); 
    }
    to {
        transform: rotate(900deg); 
    } 
}
@keyframes spinwheel_8 {
    from {
        transform: rotate(0deg); 
    }
    to {
        transform: rotate(930deg); 
    } 
}
@keyframes spinwheel_9 {
    from {
        transform: rotate(0deg); 
    }
    to {
        transform: rotate(960deg); 
    } 
}
@keyframes spinwheel_10 {
    from {
        transform: rotate(0deg); 
    }
    to {
        transform: rotate(990deg); 
    } 
}
@keyframes spinwheel_11 {
    from {
        transform: rotate(0deg); 
    }
    to {
        transform: rotate(1020deg); 
    } 
}
@keyframes spinwheel_12 {
    from {
        transform: rotate(0deg); 
    }
    to {
        transform: rotate(1050deg); 
    } 
}

@media screen and (max-width: 3000px) and (min-width: 750px) {

}

@media screen and (max-width: 850px) and (min-width: 750px) { 
    #velsof_offer_main_container {
        left: 330px;
        width: 345px;
    }
}
@media screen and (max-width: 749px) and (min-width: 700px) {

    #velsof_spinners, #velsof_spinner_container, #velsof_spinner {
        width: 450px;
        height: 450px;
    }

    #velsof_spinners {
        left: -205px;
    }
    #velsof_wheel_pointer {
        left: 210px;
    }
    #velsof_offer_main_container {
        left: 320px;
        width: 315px;
    }
}

@media screen and (max-width: 699px) and (min-width: 650px) {

    #velsof_spinners, #velsof_spinner_container, #velsof_spinner {
        width: 400px;
        height: 400px;
    }

    #velsof_spinners {
        left: -180px;
    }
    #velsof_wheel_pointer {
        left: 190px;
    }
    #velsof_offer_main_container {
        left: 305px;
        width: 275px;
    }
}

@media screen and (max-width: 649px) and (min-width: 600px) {

    #velsof_spinners, #velsof_spinner_container, #velsof_spinner {
        width: 350px;
        height: 350px;
    }

    #velsof_spinners {
        left: -150px;
    }
    .wheelslices {
        font-size: 12px;
    }
    #velsof_wheel_pointer {
        left: 175px;
    }

    #velsof_offer_main_container {
        left: 275px;
        width: 250px;
    }

}

@media screen and (max-width: 599px) and (min-width: 550px) {

    #velsof_spinners, #velsof_spinner_container, #velsof_spinner {
        width: 370px;
        height: 370px;
    }

    #velsof_spinners {
        left: -140px;
    }
    .wheelslices {
        font-size: 11px;
    }
    #velsof_wheel_pointer {
        left: 160px;
    }
    #velsof_offer_main_container {
        left: 275px;
        width: 200px;
    }

    .velsof_button {
        font-size: 14px;
    }
}
@media screen and (max-width: 549px) and (min-width: 500px) {

    #velsof_spinners, #velsof_spinner_container, #velsof_spinner {
        width: 350px;
        height: 350px;
    }

    #velsof_spinners {
        left: -130px;
    }

    #velsof_wheel_pointer {
        left: 190px;
    }
    .wheelslices {
        font-size: 12px;
        font-weight: normal;
    }

    #velsof_offer_main_container {
        left: 280px;
    }
    #velsof_wheel_main_container {
        width: 100%;
    }

    #velsof_offer_main_container {
        left: 275px;
        width: 210px;
    }
}

@media screen and (max-width: 749px) and (min-width: 470px) {

}

@media screen and (max-width: 499px) {
    
    #spin_wheel_logo_container {
        margin-right: 1%;
        margin-top: 1%;
    }
    #velsof_offer_main_container {
        position: static;
        width: auto;
        height:100%;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    #velsof_offer_container {
        float: none;
        width: auto;
        padding: 30px 25px;
        position:relative;
    }

    #velsof_spinner_container {
        float: none;
        width: 100%;
    }

    #velsof_wheel_main_container {
        width: 100%;
    }

    #velsof_spinners, #velsof_spinner_container, #velsof_spinner {
        width: 400px;
        height: 400px;
        position: relative;
    }

    #velsof_spinners {
        left: -180px;
    }
    .wheelslices {
        font-size: 12px;
    }
    #velsof_wheel_pointer {
        left: 190px;
    }
    #velsof_wheel_main_container {
        overflow-y: scroll;
        overflow-x: hidden;
		height: auto;
    }
}

.spin_toggle {
    text-decoration: none;
    font-size: 2em;
    color: rgba(0, 0, 0, 0.61);
    -webkit-transition: all 0.15s ease-out 0;
    -moz-transition: all 0.15s ease-out 0;
    transition: all 0.45s ease-out 0;
    position: fixed;
    top: 50%;
    left: 0px;
    z-index: 222222;
    cursor: pointer;
    background: #d8d8d8;
    border-radius: 0px 25px 25px 0px;
    padding: 9px 10px 11px 10px;
    margin-left: -10px
}

.slider {
    overflow-y: hidden;
    max-height: 500px; /* approximate max height */

    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.slider.closed {
    max-height: 0;
}

.spin_error{
    color:red;

}
.error_field {
    border: 1px solid red;
}

#continue_btn{
    text-align: center;
}
#spin_after_loader{
    width:100px;
    height: 100px;

}
.before_loader{
    margin-left: 100px;
    margin-top: 131px;
}

@keyframes blink {
    0% {
        opacity: .2;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: .2;
    }
}

#velsof_offer_main_container .saving {
    text-align: center
}
#velsof_offer_main_container .saving span {
    animation-name: blink;
    animation-duration: 1.8s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    display: inline-block;
    width: 8px;
    height: 8px;
    vertical-align: middle;
    background: #fff;
    border-radius: 50%;
    margin-right: 10px;
}

#velsof_offer_main_container .saving span:nth-child(2) {
    animation-delay: .2s;
}

#velsof_offer_main_container .saving span:nth-child(3) {
    animation-delay: .4s;
}

#velsof_offer_main_container .saving span:nth-child(4) {
    animation-delay: .6s;
}

#velsof_offer_main_container .saving span:nth-child(5) {
    animation-delay: .10s;
}

.spin_toggle img:hover {
  animation: shake1 2s ease-in-out infinite;
  transform: translate3d(0, 0, 0);
}

.spin_toggle {
-moz-animation:spinanimation 5s ease-in-out infinite;
-webkit-animation:spinanimation 5s ease-in-out infinite;
animation: spinanimation 5s ease-in-out infinite;
}


@-webkit-keyframes shake1 {
    82% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    90% {
        -ms-transform: rotate(12deg);
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg)
    }
    93% {
        -ms-transform: rotate(-9deg);
        -webkit-transform: rotate(-9deg);
        transform: rotate(-9deg)
    }
    96% {
        -ms-transform: rotate(9deg);
        -webkit-transform: rotate(9deg);
        transform: rotate(9deg)
    }
    99% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}
@-moz-keyframes shake1 {
    82% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    90% {
        -ms-transform: rotate(12deg);
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg)
    }
    93% {
        -ms-transform: rotate(-9deg);
        -webkit-transform: rotate(-9deg);
        transform: rotate(-9deg)
    }
    96% {
        -ms-transform: rotate(9deg);
        -webkit-transform: rotate(9deg);
        transform: rotate(9deg)
    }
    99% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}
@-ms-keyframes shake1 {
    82% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    90% {
        -ms-transform: rotate(12deg);
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg)
    }
    93% {
        -ms-transform: rotate(-9deg);
        -webkit-transform: rotate(-9deg);
        transform: rotate(-9deg)
    }
    96% {
        -ms-transform: rotate(9deg);
        -webkit-transform: rotate(9deg);
        transform: rotate(9deg)
    }
    99% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}
@keyframes shake1 {
    82% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    90% {
        -ms-transform: rotate(12deg);
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg)
    }
    93% {
        -ms-transform: rotate(-9deg);
        -webkit-transform: rotate(-9deg);
        transform: rotate(-9deg)
    }
    96% {
        -ms-transform: rotate(9deg);
        -webkit-transform: rotate(9deg);
        transform: rotate(9deg)
    }
    99% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

#velsoftop.velsoftheme {
    height: 100%;
    width: 100%;
    position: absolute; 
    left: 0px; 
    right: 0px; 
    top: 0px; 
    bottom: 0px; 
    opacity: .5; 
}

#velsofbottom.velsoftheme {
    position: absolute;
    left: 0px; 
    right: 0px;
    top: 0px;
    bottom: 0px; 
    width: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: left bottom;
    height: 100%;
    opacity: .5; 
}

#velsoftop.xmas1 {
    background: url('../../img/front/xmas1/bg-christmas.png');
    background-size: 50%; 
}

#velsofbottom.xmas1  {
    background-image: url(../../img/front/xmas1/bg-bottom-christmas.png);
}

#velsoftop.xmas2 {
    background: url('../../img/front/xmas2/bg-christmas.png');
    background-size: 50%; 
}

#velsofbottom.xmas2  {
    background-image: url(../../img/front/xmas2/bg-bottom-christmas.png);
}
/* Start: Changes done by Aayushi on 7 Dec 2018 for integrating new christmas themes */
#velsoftop.christmas_1 {
    background: url(../../img/front/christmas/theme1/images/overlay.png);
    background-repeat: no-repeat;
    opacity: 1;
    background-position: top center;
    background-size: cover;
}
#velsofbottom.christmas_1  { 
    background-image: url(../../img/front/christmas/theme1/images/bottom.gif);
    background-position: bottom right 30px;
    opacity: .8;
    background-size: auto;
}
.animated{animation-duration:4s;animation-fill-mode:both}
@keyframes slideInUp{0%{transform:translate3d(0,100%,0);visibility:visible}to{transform:translateZ(0)}}.slideInUp{animation-name:slideInUp}
#velsoftop.christmas_2 {
    background: url(../../img/front/christmas/theme2/images/overlay.png);
    background-repeat: no-repeat;
    opacity: 1;
    background-size: cover;	
}
#velsofbottom.christmas_2  { 
    background-image: url(../../img/front/christmas/theme2/images/base.png);
    background-position: bottom center;
    opacity: .8;
    background-size: 50%;
}
#velsoftop.christmas_3 {
    background: url(../../img/front/christmas/theme3/images/background.png);
    background-repeat: no-repeat;
    opacity: 1;
    background-size: cover;	
}
#velsofbottom.christmas_3  { 
    background-image: url(../../img/front/christmas/theme3/images/base.png);
    background-position: bottom 0% left 33%;
    opacity: .8;
    background-size: 30%;
}
#velsoftop.christmas_4 {
    background: url(../../img/front/christmas/theme4/images/overlay.png);
    background-repeat: no-repeat;
    opacity: 1;
    background-size: 100% 100%;
}
#velsofbottom.christmas_4  { 
    background-image: url(../../img/front/christmas/theme4/images/base.png);
    background-position: bottom 0% right 5%;
    opacity: .8;
    background-size: auto;
}
#velsoftop.christmas_5 {
    background: url(../../img/front/christmas/theme5/images/background.png);
    background-repeat: no-repeat;
    opacity: 1;
    background-size: 100% 100%;
}
#velsofbottom.christmas_5  { 
    background-image: url(../../img/front/christmas/theme5/images/gift.png);
    opacity: .8;
    background-size: auto;
    background-position: bottom center;
}
/* end: Changes done by Aayushi on 7 Dec 2018 for integrating new christmas themes */
/**
* Start Change to integrat New themes for Christmas
* ASDEC2023 NewChristmas
* @date 14-12-2023
* @modifier Amit Singh
*/
#velsoftop.new_christmas_1 {
    background: url(../../img/front/christmas/theme6/images/Merry-Christmas_1.jpg);
    background-repeat: no-repeat;
    opacity: 1;
    background-position: top center;
    background-size: cover;
}
#velsofbottom.new_christmas_1  { 
    background-image: url(../../img/front/christmas/theme6/images/Merry-Christmas_1-element.gif);
    background-position: bottom center;
    opacity: .8;
    background-size: auto;
}
#velsoftop.new_christmas_2 {
    background: url(../../img/front/christmas/theme7/images/Merry-Christmas_2.jpg);
    background-repeat: no-repeat;
    opacity: 1;
    background-position: top center;
    background-size: cover;
}
#velsofbottom.new_christmas_2  { 
    background-image: url(../../img/front/christmas/theme7/images/Merry-Christmas_2-element.gif);
    background-position: top left 150px;
    opacity: .8;
    background-size: auto;
}
#velsoftop.new_christmas_3 {
    background: url(../../img/front/christmas/theme8/images/Merry-Christmas_3-background.jpg);
    background-repeat: no-repeat;
    opacity: 1;
    background-position: top center;
    background-size: cover;
}
#velsofbottom.new_christmas_3  { 
    background-image: url(../../img/front/christmas/theme8/images/Merry-Christmas_3-element.gif);
    background-position: bottom center;
    opacity: .8;
    background-size: auto;
}
#velsoftop.new_christmas_4 {
    background: url(../../img/front/christmas/theme9/images/Merry-Christmas_4-background.jpg);
    background-repeat: no-repeat;
    opacity: 1;
    background-position: top center;
    background-size: cover;
}
#velsofbottom.new_christmas_4  { 
    background-image: url(../../img/front/christmas/theme9/images/Merry-Christmas_4-element.gif);
    background-position: bottom center;
    opacity: .8;
    background-size: auto;
}
#velsoftop.new_christmas_5 {
    background: url(../../img/front/christmas/theme10/images/Merry-Christmas_5.jpg);
    background-repeat: no-repeat;
    opacity: 1;
    background-position: top center;
    background-size: cover;
}
#velsofbottom.new_christmas_5  { 
    background-image: url(../../img/front/christmas/theme10/images/Merry-Christmas_5-element.gif);
    background-position: bottom center;
    opacity: .8;
    background-size: auto;
}
/* End of Chnage */
/* Start: Changes done by Aayushi on 20th-Sep-2018 for integrating new theme */
#velsoftop.black_friday_theme1 {
    background: url(../../img/front/theme1/images/overlay.png);
    background-size: cover;
    opacity: 1;
}

#velsofbottom.black_friday_theme1  { 
    background-image: url(../../img/front/theme1/images/base.png);
    background-position: bottom right;
    background-size: auto;
}

#velsoftop.black_friday_theme3 {
    background: url(../../img/front/theme3/images/overlay.png);
    background-repeat: no-repeat;
    background-position: top 5% center;
}

#velsofbottom.black_friday_theme3  { 
    background-image: url(../../img/front/theme3/images/base.png);
    background-position: bottom 2% right 2%;
	    background-size: 45%;
		opacity:.8;
   
}
#velsoftop.black_friday_theme4 {
    background: url(../../img/front/theme4/images/overlay.png);
    background-repeat: no-repeat;
    background-position: top 5% center;
}

#velsofbottom.black_friday_theme4  { 
    background-image: url(../../img/front/theme4/images/base.gif);
    background-position: bottom right;
    background-size: 48%;
    opacity:.8;
   
}
#velsoftop.black_friday_theme5 {
    background: url(../../img/front/theme5/images/overlay.png);
    background-repeat: no-repeat;
    background-position: bottom center;
}

#velsofbottom.black_friday_theme5  { 
	background-image: url(../../img/front/theme5/images/base.gif);
    background-position: bottom right;
	opacity:.8;
   
}
/*#velsof_wheel_main_container.easter_theme1 {
    background-image: url(../../img/front/easter/theme1/images/background.png);
    
}*/
#velsoftop.easter_theme1 {
    background: url(../../img/front/easter/theme1/images/overlay.png);
    background-repeat: repeat-x;
	opacity: 1;
}

#velsofbottom.easter_theme1  { 
    background-image: url(../../img/front/easter/theme1/images/base.png);
    background-position: bottom right;
    background-size: cover;
    opacity: 0.7;
}

/*#velsof_wheel_main_container.easter_theme2  {
    background-image: url(../../img/front/easter/theme2/images/background.png);
}*/
#velsof_wheel_main_container.easter_theme3  {
    background-image: url(../../img/front/easter/theme3/images/background.png);
}
#velsoftop.easter_theme2 {
    background: url(../../img/front/easter/theme2/images/overlay.png);
    background-repeat: repeat-x;
	opacity: 1;
}

#velsofbottom.easter_theme2  { 
    background-image: url(../../img/front/easter/theme2/images/base.png);
    background-position: bottom right;
    background-size: cover;
    opacity: 0.7;
}
#velsoftop.easter_theme3 {
    background: url(../../img/front/easter/theme3/images/overlay.png);
    background-repeat: no-repeat;
    background-position: top center;
}

#velsofbottom.easter_theme3  { 
    background-image: url(../../img/front/easter/theme3/images/base.png);
    background-position: bottom right;
    background-size: cover;
    opacity:1;
}

/*easter*/
/*halloween*/
#velsoftop.halloween_theme1 {
    background: url(../../img/front/halloween/theme1/images/overlay.png);
    background-repeat: no-repeat;
    background-position: top 5% center;
}

#velsofbottom.halloween_theme1  { 
	background-image: url(../../img/front/halloween/theme1/images/base.png);
    background-position: bottom right;
   
}
#velsoftop.halloween_theme2 {
    background: url(../../img/front/halloween/theme2/images/overlay.png);
    background-repeat: no-repeat;
}

#velsofbottom.halloween_theme2  { 
    background-image: url(../../img/front/halloween/theme2/images/base.png);
    background-position: bottom right;
   
}
#velsof_wheel_main_container.halloween_theme3 {
    background-image: url(../../img/front/halloween/theme3/images/background.png);
}
#velsoftop.halloween_theme3 {
    background: url(../../img/front/halloween/theme3/images/overlay.png);
    background-repeat: no-repeat;
    background-position: top 5% center;
	opacity:1
}
#velsofbottom.halloween_theme3 { 
	background-image: url(../../img/front/halloween/theme3/images/base.png);
    background-position: bottom right;
	opacity:1
   
}
#velsoftop.halloween_theme4 {
    background: url(../../img/front/halloween/theme4/images/overlay.png);
    background-repeat: no-repeat;
    background-position: top right;
	opacity:1
}
#velsofbottom.halloween_theme4 { 
	background-image: url(../../img/front/halloween/theme4/images/base.png);
    background-position: bottom right;
	opacity:1
   
}
/*thanksgiving*/
#velsoftop.thanksgiving_theme1 {
    background: url(../../img/front/thanksgiving/theme1/images/overlay.png);
    background-repeat: no-repeat;
	opacity: 0.5;
}

#velsofbottom.thanksgiving_theme1  { 
	background-image: url(../../img/front/thanksgiving/theme1/images/base.png);
    background-position: bottom right;
	    background-size: cover;
   
}
#velsoftop.thanksgiving_theme2 {
    background: url(../../img/front/thanksgiving/theme2/images/overlay.png);
    background-repeat: no-repeat;
	opacity: 1;
    background-position: top center;
}

#velsofbottom.thanksgiving_theme2  { 
	background-image: url(../../img/front/thanksgiving/theme2/images/base.png);
    background-position: bottom right;
   
}
#velsoftop.thanksgiving_theme3 {
    background: url(../../img/front/thanksgiving/theme3/images/overlay.png);
    background-repeat: no-repeat;
	opacity: 1;
    background-position: top center;
}

#velsofbottom.thanksgiving_theme3  { 
	background-image: url(../../img/front/thanksgiving/theme3/images/base.png);
    background-position: bottom right;
       opacity: 1;
	   background-size: cover;
}
#velsoftop.thanksgiving_theme4 {
    background: url(../../img/front/thanksgiving/theme4/images/overlay.png);
    background-repeat: no-repeat;
   background-position: top 5% left 30%;;
}

#velsofbottom.thanksgiving_theme4  { 
	background-image: url(../../img/front/thanksgiving/theme4/images/base.png);
    background-position: bottom right;
       opacity: 1;
	   background-size: cover;
}
/*diwali*/
#velsof_wheel_main_container.diwali_theme1  {
    background-image: url(../../img/front/diwali/theme1/images/base.gif);
}
#velsoftop.diwali_theme1 {
    background: url(../../img/front/diwali/theme1/images/overlay.png);
    background-repeat: no-repeat;
	    opacity: 1;
}

#velsofbottom.diwali_theme1  { 
	background-image: url(../../img/front/diwali/theme1/images/bottom.png);
    background-position: bottom right;
    opacity: .8;
   
}

#velsof_wheel_main_container.diwali_theme2  {
    background-image: url(../../img/front/diwali/theme2/images/background.png);
}
#velsoftop.diwali_theme2 {
    background: url(../../img/front/diwali/theme2/images/overlay.png);
    background-repeat: no-repeat;
	    opacity: 1;
}

#velsofbottom.diwali_theme2  { 
	background-image: url(../../img/front/diwali/theme2/images/base.png);
    background-position: bottom right;
	    opacity: .8;
   
}
#velsoftop.diwali_theme3 {
    background: url(../../img/front/diwali/theme3/images/overlay.png);
    background-repeat: no-repeat;
	    opacity: 1;
}

#velsofbottom.diwali_theme3  { 
	background-image: url(../../img/front/diwali/theme3/images/base.png);
    background-position: bottom right 5%;
    opacity: .8;
    background-size: auto;
   
}
#velsof_wheel_main_container.diwali_theme3  {
    background-image: url(../../img/front/diwali/theme3/images/background.png);
}
#velsoftop.diwali_theme4 {
    background: url(../../img/front/diwali/theme4/images/overlay.png);
    background-repeat: no-repeat;
	    opacity: 1;
}

#velsofbottom.diwali_theme4  { 
	background-image: url(../../img/front/diwali/theme4/images/base.png);
    background-position: bottom 10% right 5%;
    opacity: 1;
    background-size: auto;
   
}

#velsoftop.diwali_theme5 {
    background: url(../../img/front/diwali/theme5/images/overlay.png);
    background-repeat: no-repeat;
	    opacity: 0.7;
}

#velsofbottom.diwali_theme5 { 
	background-image: url(../../img/front/diwali/theme5/images/base.gif);
	opacity: 0.5;
}
#velsofbottom.halloween_theme1, #velsofbottom.thanksgiving_theme2, #velsofbottom.black_friday_theme5, #velsofbottom.diwali_theme2{background-size: cover;}
#velsoftop.black_friday_theme5{background-position: top right;}
#spin_wheel_logo_container img {
    z-index: 999;
    position: relative;
}
#velsoftop.halloween_theme3{    background-position: top 0% center;}
#velsoftop.black_friday_theme5{
background-position: bottom right;
}
/*END: Changes done by Aayushi on 20th-Sep-2018 for integrating new theme */
/* Start: Changes done by Aayushi on 27 Dec 2018 for integrating new year themes */
#velsoftop.new_year_1 {
    background: url(../../img/front/newyear/theme1/images/overlay.png);
    background-repeat: round;
    opacity: 1;
}
#velsofbottom.new_year_1 {
    background-image: url(../../img/front/newyear/theme1/images/bottom.png);
    background-position: top center;
    opacity: .8;
    background-size: 75%;
}
#velsoftop.new_year_2 {
    background: url(../../img/front/newyear/theme2/images/base.gif);
    background-repeat: no-repeat;
    opacity: 1;
    background-size: cover;
}
#velsofbottom.new_year_2 {
    background-image: url(../../img/front/newyear/theme2/images/top.png);
    background-position: top center;
    opacity: .8;
    background-size: 27%;
}
#velsoftop.new_year_3 {
    background: url(../../img/front/newyear/theme3/images/background.png);
    background-repeat: no-repeat;
    opacity: 1;
    background-size: cover;
}
#velsofbottom.new_year_3 {
    background-image: url(../../img/front/newyear/theme3/images/base.gif);
    background-position: bottom right 5%;
    opacity: .8;
    background-size: auto;
}
#velsoftop.new_year_4 {
    background: url(../../img/front/newyear/theme4/images/base.png);
    background-repeat: no-repeat;
    opacity: 1;
    background-size: 100% 100%;
}
#velsofbottom.new_year_4 {
    background-image: url(../../img/front/newyear/theme4/images/bottom.png);
    background-position: bottom center;
    opacity: .8;
    background-size: 32%;
}
#velsoftop.new_year_5 {
    background: url(../../img/front/newyear/theme5/images/background3.png);
    background-repeat: no-repeat;
    opacity: 1;
    background-position: bottom;
    background-size: cover;
}
/*#velsofbottom.new_year_5 {
    background-image: url(../../img/front/newyear/theme5/images/hedder.png);
    opacity: 1;
    background-size: 18%;
    background-position: bottom center;
}*/
/* end: Changes done by Aayushi on 27 Dec 2018 for integrating new year themes */

/* Start Code Addded By Priyanshu to add New themes for New Year on 6-November-2020 */

#velsoftop.new_year_6 {
    background: url(../../img/front/newyear/theme6/images/background4.png);
    background-repeat: round;
    opacity: 1;
    /*background-size: cover;*/
}
#velsofbottom.new_year_6 {
    background-image: url(../../img/front/newyear/theme6/images/base.gif);
    opacity: .8;
/*    background-size: 70%;*/
    background-size: 42%;
    background-position: bottom center;
}

#velsoftop.new_year_7 {
    background: url(../../img/front/newyear/theme7/images/Background.png);
    background-repeat: no-repeat;
    opacity: 1;
    background-size: cover;
}

#velsofbottom.new_year_7 {
    background-image: url(../../img/front/newyear/theme7/images/footer.gif), url(../../img/front/newyear/theme7/images/gift.png);
    opacity: .8;
    background-size: 33%, 106%;
    background-position: center bottom , top center;
}

/**
* Start Code Addded to add New themes for New Year
* ASDEC2023 Newyear
* @date 14-12-2023
* @modifier Amit Singh
*/
#velsoftop.new_year_10 {
    background: url(../../img/front/newyear/theme_1/images/New-year_1.jpg);
    background-repeat: no-repeat;
    opacity: 1;
    background-size: cover;
}

#velsofbottom.new_year_10 {
    background-image: url(../../img/front/newyear/theme_1/images/New-year_1-element.gif);
    opacity: .8;
    background-size: 33%, 106%;
    background-position: center bottom , top center;
}
#velsoftop.new_year_11 {
    background: url(../../img/front/newyear/theme_2/images/New-year_2.jpg);
    background-repeat: no-repeat;
    opacity: 1;
    background-size: cover;
}

#velsofbottom.new_year_11 {
    background-image: url(../../img/front/newyear/theme_2/images/New-year_2-element.gif);
    opacity: .8;
    background-size: 33%, 106%;
    background-position: center bottom , top center;
}
#velsoftop.new_year_12 {
    background: url(../../img/front/newyear/theme_3/images/New-year_3.jpg);
    background-repeat: no-repeat;
    opacity: 1;
    background-size: cover;
}

#velsofbottom.new_year_12 {
    background-image: url(../../img/front/newyear/theme_3/images/New-year_3-element.gif);
    opacity: .8;
    background-size: 33%, 106%;
    background-position: center bottom , top center;
}

#velsoftop.new_year_13 {
    background: url(../../img/front/newyear/theme_4/images/New-year_4-background.gif);
    background-repeat: no-repeat;
    opacity: 1;
    background-size: cover;
}

#velsofbottom.new_year_13 {
    background-image: url(../../img/front/newyear/theme_4/images/New-year_4-element.png);
    opacity: .8;
    background-size: 33%, 106%;
    background-position: center bottom , top center;
}
/* End of Change by Amit */

#velsoftop.new_year_8 {
    background: url(../../img/front/newyear/theme8/images/background.png);
    background-repeat: no-repeat; 
    opacity: 1;
    background-size: cover;
}
#velsofbottom.new_year_8 {
    background-image: url(../../img/front/newyear/theme8/images/footer.png) , url(../../img/front/newyear/theme8/images/header.png);
    opacity: .8;
    background-size: 65%, 100%;
    background-position: right bottom, top center;
}

#velsoftop.new_year_9 {
    background: url(../../img/front/newyear/theme9/images/background.png);
    background-repeat: round;
    opacity: 1;
    background-size: cover;
}
#velsofbottom.new_year_9 {
    background-image: url(../../img/front/newyear/theme9/images/footer.png);
    background-position: top left 25%;
    opacity: .8;
    background-size: 49%;
}
/* End Code Addded By Priyanshu to add New themes for New Year on 6-November-2020 */

/* start: Changes done by Aayushi on 9 Dec 2019 for integrating new year themes */
#velsof_wheel_main_container.new_year_2020_1  {
    background-image: url(../../img/front/newyear2020/theme1/images/background.png);
}
#velsofbottom.new_year_2020_1 {
    background-image: url(../../img/front/newyear2020/theme1/images/bottom.gif);
    opacity: .8;
    background-size: 31%;
    background-position: bottom left 34%;
}
#velsof_wheel_main_container.new_year_2020_2  {
    background-image: url(../../img/front/newyear2020/theme2/images/background.png);
}
#velsofbottom.new_year_2020_2 {
    background-image: url(../../img/front/newyear2020/theme2/images/bottom.png);
    opacity: .8;
    background-size: 55%;
    background-position: bottom center;
}
#velsof_wheel_main_container.new_year_2020_3  {
    background-image: url(../../img/front/newyear2020/theme3/images/background.png);
}
#velsofbottom.new_year_2020_3 {
    background-image: url(../../img/front/newyear2020/theme3/images/bottom.png);
    opacity: .8;
    background-size: 75%;
    background-position: bottom right;
}
#velsof_wheel_main_container.new_year_2020_4  {
    background-image: url(../../img/front/newyear2020/theme4/images/background.png);
}
#velsofbottom.new_year_2020_4 {
    background-image: url(../../img/front/newyear2020/theme4/images/bottom.gif);
    opacity: 1;
    background-size: 75%;
    background-position: bottom right;
}
/* end: Changes done by Aayushi on 9 Dec 2019 for integrating new year themes */


/* Changes added by Priyanshu */
.velsof_progress_bar_container {
    margin-top: 20px;
}

.velsof_progress_bar {
    width: auto !important;
    height: 20px;
    position: relative;
    margin: 10px 0 10px 0;
/*    background: #e0f7e3;*/
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 2px;
    background-color: #e1e1e1;    
    width: 340px;
    background-size: 15px 15px;
    background-image: linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
}


.velsof_progress_bar_progress {
    border-radius: 25px !important;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    transition: width .4s ease-in-out;
    background-color: #23a900;
    background-size: 15px 15px;
    background-image: linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    animation: animate-stripes 3s linear infinite;
}
.velsof_progress_bar_message {
    font-size: 17px;
    opacity: 1;
    color: white;
}

/* Changes added by Priyanshu */

#velsofbottom.velsoftheme.new_year_6 {
    position: absolute;
    left: unset;
    right: 106px;
    top: -5px;
}

#velsofbottom.velsoftheme.new_year_7 {
    position: absolute;
    left: unset;
    right: 80px;
    top: 17px;
}

/**
* Start Code Addded to add New themes for New Year
* ASDEC2023 Newyear
* @date 14-12-2023
* @modifier Amit Singh
*/

#velsofbottom.velsoftheme.new_year_10 {
    position: absolute;
    left: unset;
    right: 80px;
    top: 17px;
}
#velsofbottom.velsoftheme.new_year_11 {
    position: absolute;
    left: unset;
    right: 80px;
    top: 17px;
}

#velsofbottom.velsoftheme.new_year_13 {
    position: absolute;
    left: unset;
    right: 80px;
    top: 17px;
}

/* End of change by Amit */