html
     {
       background-image: url("../../images/quizBg.jpg");
     }
    .loaderRapper
    {
     background-color: transparent !important;
    }
    p {
     color: #fff;
    }
    #que P {
     color:#000;
    }
    .navbar {
      margin-bottom: 0px !important;
      border-radius: 0px !important; 
    }
    html {
     height:100vh !important;
    }

    .block {
      position: relative;
      margin-top: 20px;
      border: 2px solid #1abc9c;
      border-top: none;
      padding: 20px;
    }
    .block:before {
      content: '';
      position: absolute;
      display: block;
      top: 0;
      background: #1abc9c;
      left: 0;
      width: 5%;
      height: 2px;
    }
    .block:after {
      content: '';
      position: absolute;
      display: block;
      top: 0;
      background: #1abc9c;
      right: 0;
      height: 2px;
      width: 70%;
    }
    .block_icon {
      position: absolute;
      top: -9px;
      left: 5%;
      width: 25%;
      text-align: center;
    }
    .block_title {
      font-size: 18px;
      font-weight: bold;
    }

    /*Online user avator images css*/
    .cardHolder {
      display: flex;
      flex-flow: row wrap;
    }

    .userCard {
      flex: 1;
      border-radius: 50%;
      max-width: 58px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      transition: all .25s ease;
      animation: populate .5s ease-out normal backwards;
    }
    .userCard:hover {
      transform: scale(1.3);
      z-index: 1;
    }
    .imgContain
    {
      margin-right:4px; 
      margin-bottom:4px;
    }

    .userImgWhite
    {
      border-radius: 50%; border: 3px solid white;
    }
    .userImgRed
    {
      border-radius: 50%; border: 3px solid red;
    }
    .userImgGreen
    {
      border-radius: 50%; border: 3px solid green;
    }
    .userImgOrange
    {
      border-radius: 50%; border: 3px solid orange;
    }


    /* quiz template css */
    /* CSS used here will be applied after bootstrap.css */
    #qid {
      height: 75px;
      width: 75px;
    }
    label.btn {
        padding: 18px 60px;
        white-space: normal;
        -webkit-transform: scale(1.0);
        -moz-transform: scale(1.0);
        -o-transform: scale(1.0);
        -webkit-transition-duration: .3s;
        -moz-transition-duration: .3s;
        -o-transition-duration: .3s
    }

    label.btn-block {
        text-align: left;
        position: relative
    }

    label .btn-label {
        position: absolute;
        left: 0;
        top: 0;
        display: inline-block;
        padding: 0 10px;
        background: rgba(0,0,0,.15);
        height: 100%
    }

    label .glyphicon {
        top: 34%
    }

    @keyframes animationFrames {
        0% {
            opacity: 0;
            transform: translate(-1500px,0px)
        }

        60% {
            opacity: 1;
            transform: translate(30px,0px)
        }

        80% {
            transform: translate(-10px,0px)
        }

        100% {
            opacity: 1;
            transform: translate(0px,0px)
        }
    }

    @-webkit-keyframes animationFrames {
        0% {
            opacity: 0;
            -webkit-transform: translate(-1500px,0px)
        }
        60% {
            opacity: 1;
            -webkit-transform: translate(30px,0px)
        }

        80% {
            -webkit-transform: translate(-10px,0px)
        }

        100% {
            opacity: 1;
            -webkit-transform: translate(0px,0px)
        }
    }

    @-ms-keyframes animationFrames {
        0% {
            opacity: 0;
            -ms-transform: translate(-1500px,0px)
        }

        60% {
            opacity: 1;
            -ms-transform: translate(30px,0px)
        }
        80% {
            -ms-transform: translate(-10px,0px)
        }

        100% {
            opacity: 1;
            -ms-transform: translate(0px,0px)
        }
    }

    .modal-header {
        background-color: transparent;
        color: inherit
    }

    .modal-body {
        min-height: 205px
    }
    #loadbar {
        position: absolute;
        width: 62px;
        height: 77px;
        top: 2em
    }
    .blockG {
        position: absolute;
        background-color: #FFF;
        width: 10px;
        height: 24px;
        -moz-border-radius: 8px 8px 0 0;
        -moz-transform: scale(0.4);
        -moz-animation-name: fadeG;
        -moz-animation-duration: .8800000000000001s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-direction: linear;
        -webkit-border-radius: 8px 8px 0 0;
        -webkit-transform: scale(0.4);
        -webkit-animation-name: fadeG;
        -webkit-animation-duration: .8800000000000001s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: linear;
        -ms-border-radius: 8px 8px 0 0;
        -ms-transform: scale(0.4);
        -ms-animation-name: fadeG;
        -ms-animation-duration: .8800000000000001s;
        -ms-animation-iteration-count: infinite;
        -ms-animation-direction: linear;
        -o-border-radius: 8px 8px 0 0;
        -o-transform: scale(0.4);
        -o-animation-name: fadeG;
        -o-animation-duration: .8800000000000001s;
        -o-animation-iteration-count: infinite;
        -o-animation-direction: linear;
        border-radius: 8px 8px 0 0;
        transform: scale(0.4);
        animation-name: fadeG;
        animation-duration: .8800000000000001s;
        animation-iteration-count: infinite;
        animation-direction: linear
    }
    #rotateG_01 {
        left: 0;
        top: 28px;
        -moz-animation-delay: .33s;
        -moz-transform: rotate(-90deg);
        -webkit-animation-delay: .33s;
        -webkit-transform: rotate(-90deg);
        -ms-animation-delay: .33s;
        -ms-transform: rotate(-90deg);
        -o-animation-delay: .33s;
        -o-transform: rotate(-90deg);
        animation-delay: .33s;
        transform: rotate(-90deg)
    }
    #rotateG_02 {
        left: 8px;
        top: 10px;
        -moz-animation-delay: .44000000000000006s;
        -moz-transform: rotate(-45deg);
        -webkit-animation-delay: .44000000000000006s;
        -webkit-transform: rotate(-45deg);
        -ms-animation-delay: .44000000000000006s;
        -ms-transform: rotate(-45deg);
        -o-animation-delay: .44000000000000006s;
        -o-transform: rotate(-45deg);
        animation-delay: .44000000000000006s;
        transform: rotate(-45deg)
    }
    #rotateG_03 {
        left: 26px;
        top: 3px;
        -moz-animation-delay: .55s;
        -moz-transform: rotate(0deg);
        -webkit-animation-delay: .55s;
        -webkit-transform: rotate(0deg);
        -ms-animation-delay: .55s;
        -ms-transform: rotate(0deg);
        -o-animation-delay: .55s;
        -o-transform: rotate(0deg);
        animation-delay: .55s;
        transform: rotate(0deg)
    }
    #rotateG_04 {
        right: 8px;
        top: 10px;
        -moz-animation-delay: .66s;
        -moz-transform: rotate(45deg);
        -webkit-animation-delay: .66s;
        -webkit-transform: rotate(45deg);
        -ms-animation-delay: .66s;
        -ms-transform: rotate(45deg);
        -o-animation-delay: .66s;
        -o-transform: rotate(45deg);
        animation-delay: .66s;
        transform: rotate(45deg)
    }
    #rotateG_05 {
        right: 0;
        top: 28px;
        -moz-animation-delay: .7700000000000001s;
        -moz-transform: rotate(90deg);
        -webkit-animation-delay: .7700000000000001s;
        -webkit-transform: rotate(90deg);
        -ms-animation-delay: .7700000000000001s;
        -ms-transform: rotate(90deg);
        -o-animation-delay: .7700000000000001s;
        -o-transform: rotate(90deg);
        animation-delay: .7700000000000001s;
        transform: rotate(90deg)
    }
    #rotateG_06 {
        right: 8px;
        bottom: 7px;
        -moz-animation-delay: .8800000000000001s;
        -moz-transform: rotate(135deg);
        -webkit-animation-delay: .8800000000000001s;
        -webkit-transform: rotate(135deg);
        -ms-animation-delay: .8800000000000001s;
        -ms-transform: rotate(135deg);
        -o-animation-delay: .8800000000000001s;
        -o-transform: rotate(135deg);
        animation-delay: .8800000000000001s;
        transform: rotate(135deg)
    }
    #rotateG_07 {
        bottom: 0;
        left: 26px;
        -moz-animation-delay: .99s;
        -moz-transform: rotate(180deg);
        -webkit-animation-delay: .99s;
        -webkit-transform: rotate(180deg);
        -ms-animation-delay: .99s;
        -ms-transform: rotate(180deg);
        -o-animation-delay: .99s;
        -o-transform: rotate(180deg);
        animation-delay: .99s;
        transform: rotate(180deg)
    }
    #rotateG_08 {
        left: 8px;
        bottom: 7px;
        -moz-animation-delay: 1.1s;
        -moz-transform: rotate(-135deg);
        -webkit-animation-delay: 1.1s;
        -webkit-transform: rotate(-135deg);
        -ms-animation-delay: 1.1s;
        -ms-transform: rotate(-135deg);
        -o-animation-delay: 1.1s;
        -o-transform: rotate(-135deg);
        animation-delay: 1.1s;
        transform: rotate(-135deg)
    }
    @-moz-keyframes fadeG {
        0% {
            background-color: #000
        }

        100% {
            background-color: #FFF
        }
    }

    @-webkit-keyframes fadeG {
        0% {
            background-color: #000
        }

        100% {
            background-color: #FFF
        }
    }

    @-ms-keyframes fadeG {
        0% {
            background-color: #000
        }

        100% {
            background-color: #FFF
        }
    }

    @-o-keyframes fadeG {
        0% {
            background-color: #000
        }
        100% {
            background-color: #FFF
        }
    }

    @keyframes fadeG {
        0% {
            background-color: #000
        }

        100% {
            background-color: #FFF
        }
    }


    /*question grid css*/
    .pagination {
      padding-left: 20px;
      position:initial
    }

    .pagination>li>a,  .pagination>li>span {
      border-radius: 0 20px 0 0 !important;
      margin: 0 5px;
    }

    * {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    body {
      background-color: transparent !important; 
    }

    .content:before {
      content: "";
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: -1;
      /*background-image: url("../../images/quizBg.jpg");*/
      background-repeat: repeat; 
      min-height: 100vh;
    }
    
    .contentTwo:before {
      content: "";
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: -1;
      /*background-image: url("../../images/quizBg.jpg");*/
      background-repeat: repeat; 
      min-height: 100vh;
    }
    
    .contentTwo:before {
      -webkit-filter: blur(2px);
      -moz-filter: blur(2px);
      -o-filter: blur(2px);
      -ms-filter: blur(2px);
      filter: blur(2px);
    }
    
    .btn-primary.active {
      color: #fff;
      background-color: #067b46 !important;
      border-color: #204d74;
    }

    .modal-body {
     position:relative; /* This avoids whatever it's absolute inside of it to go off the container */ /* let's imagine that your login box height is 250px . This height needs to be added, otherwise .img-responsive will be like "Oh no, I need to be vertically aligned?! but from which value I need to be aligned??" */
    }

    .img-responsive {
      width: 200px; /* This value will depend on what size you want for your loading image, let's say it's 50px */
      height: 200px;
      position:absolute;
      left: 35%;
      top:20%;
    }

    /* CSS for bar chart model */

        .bar-chart {
            position: relative;
            width: 100%;
            margin-top: 15px;
        }

        .bar-chart > .legend {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
            margin-bottom: -45px;
            border-top: 1px solid #000;
        }

        .bar-chart > .legend > .item {
            position: relative;
            display: inline-block;
            float: left;
            width: 25%;
        }

        .bar-chart > .legend > .item:before {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 1px;
            height: 8px;
            background-color: #000;
            margin-top: -8px;
        }

        .bar-chart > .legend > .item.text-right:before {
            right: 0;
            left: auto;
        }

        .bar-chart > .legend > .item h4 {
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .bar-chart > .chart {
            position: relative;
            width: 100%;
        }

        .bar-chart > .chart > .item {
            position: relative;
            width: 100%;
            height: 40px;
            margin-bottom: 10px;
            color: #fff;
            text-transform: uppercase;
        }

        .bar-chart > .chart > .item > .bar {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ff4081;
            z-index: 5;
        }

        .bar-chart > .chart > .item > .bar > .percent {
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            height: 40px;
            line-height: 40px;
            padding-right: 12px;
            z-index: 15;
        }

        .bar-chart > .chart > .item > .bar > .item-progress {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background-color: #3e50b4;
            z-index: 10;
        }

        .bar-chart > .chart > .item > .bar > .item-progress > .title {
            display: block;
            position: absolute;
            height: 40px;
            line-height: 40px;
            padding-left: 12px;
            letter-spacing: 2px;
            z-index: 15;
        }

        /*CSS for radio Button & checkBox */
        input[type="radio"],
        input[type="checkbox"] {
        display: none;
        }

        input[type="radio"] + label,
        input[type="checkbox"] + label {
        position: relative;
        display: inline-block;
        padding-left: 0.5em;
        margin-right: 2em;
        cursor: pointer;
        line-height: 1em;
        transition: all .3s ease-in-out;
        }

        input[type="radio"] + label:before,
        input[type="radio"] + label:after,
        input[type="checkbox"] + label:before,
        input[type="checkbox"] + label:after {
        content: '';
        position: absolute;
        top: 4px;
        left: 0;
        width: 40px !important;
        height: 36px !important;
        text-align: center;
        color: white;
        font-family: Times;
        border-radius: 50%;
        transition: all .3s ease;
        }
        input[type="radio"] + label:before {
        transition: all .3s ease;
        box-shadow: inset 0 0 0 0.2em white, inset 0 0 0 1em white;
        }
        input[type="radio"] + label:hover:before {
        transition: all .3s ease;
        box-shadow: inset 0 0 0 0.3em white, inset 0 0 0 1em #c6c6c6;
        }
        input[type="radio"]:checked + label:before {
        transition: all .3s ease;
        box-shadow: inset 0 0 0 0.2em white, inset 0 0 0 1em green;
        }
        input[type="checkbox"] + label:before {
        content: '✔';
        border-radius: 4px;
        /*width: 43px;
        height: 43px;*/
        background-color: white;
        color: white;
        }
        input[type="checkbox"] + label:hover:before {
        color: #f0f0f0;
        }
        input[type="checkbox"]:checked + label:before {
        background-color: white;
        color: #f79420;
        padding: 10px;
        }

        #featured-5
        {
           padding-top: 18px; 
           margin-left: 5px;
        }

        .containerMargin
        {
            margin-top: 10vh;
        }

        .questionMargin
        {
            margin-left: 100px; 
            margin-top: -50px;
        }

        .questionOptionColor
        {
            margin-left: 30px; 
            color: #fff;
        }

        .bgBlur
        {
            filter:blur(0px) !important;
        }

        .waitContainerHead
        {
            margin-top: 25vh;   
        }

        .waitContainerTextPadding
        {
            padding-bottom:10%;
        }

        .tokenLetter
        {
            width:100px; 
            height:200px; 
            font-size:100px;
        }