.badges-container{
    display:flex;
    width:100%;
    flex-direction: row;
    justify-content:center;
    align-content:center;
    flex-wrap:wrap;
    margin-top:40px;
}

.badge-wrapper{
    flex:1;
    width:100%;
    display:flex;
    
    flex-direction: row;
    justify-content:center;
    align-content:center;
cursor:pointer;
}

/* .badge-wrapper:nth-child(1)  */
.badge.notstarted{
opacity:.3;
}


.badge{
position:relative;
display:flex;
justify-content: center;
align-content: center;
width:259px;
height:300px;

background-repeat: no-repeat;
background-size: contain;
}

.offer .offer-txt{
    clear:both;
    text-align:left;
}
.offer-icon.badge{

    position:static;
    float:left;
margin-left:25px;
margin-bottom:15px;
    display:block;
     width:95px;
    max-height:95px;
     
}
.milestone-icon.badge{

    position:absolute;
 right: 150px;
 top:7px;
    display:block;
     width:35px;
    max-height:35px;
     
}

.deferred-survey{

    position:absolute;
 right: 70px;
 top:9px;
    display:block;
     width:35px;
    max-height:35px;
     height:35px;
     cursor:pointer;
}


.notification.offer .form-button{
    width:26%;
}

.tiny-notif{
position:relative;
z-index:5000;
right:200px;
top:5px;
    font-size:10px;
background-color:#fff6cc;
padding:4px;
border-radius:4px;
width: 275px;
color:#000 !important;
font-weight:normal;

}

.tiny-notif-ls{
position:relative;
z-index:5000;
right:200px;
top:5px;
font-size:10px;
background-color:#990000;
padding:4px;
border-radius:4px;
width: 275px;
color:#fff !important;
font-weight:bold;

}


.deferred-survey .prelogin, .tiny-notif.prelogin{
font-size:10px !important;
text-align:center;
}


.deferred-survey .tiny-notif-ls{
width:90px !important;
right:110px !important;
}

.btnLogin.intro .tiny-notif-ls{
    top:0px !important;
    right:85px !important;
    font-size:.85em !important;
}
.tiny-notif i{
    position:absolute;
    right: -7px;
    font-size:25px;
    color:#fff6cc;
}

.milestone-icon:hover .tiny-notif{
    display:block;

}

.badge.multi.start{
background-image: url('/images/badges/multi/badge_multi_start.png');
}

.badge.multi.finish{
background-image: url('/images/badges/multi/badge-multi-finish.png');
}

.offer-icon.badge.multi.finish{
    background-image: url('/images/badges/icons/multi-icon-95.png');
    }
.milestone-icon.badge.multi.finish{
    background-image: url('/images/badges/icons/multi-icon-35.png');
    }

.badge.caesar.start{
background-image: url('/images/badges/caesar/badge_caesar_start.png');
}

.badge.caesar.finish{
background-image: url('/images/badges/caesar/badge-caesar-finish.png');
}

.offer-icon.badge.caesar.finish{
background-image: url('/images/badges/icons/caesar-icon-95.png');
}

.milestone-icon.badge.caesar.finish{
    background-image: url('/images/badges/icons/caesar-icon-35.png');
    }



.badge.additive.start{
background-image: url('/images/badges/additive/badge_additive_start.png');
}

.badge.additive.finish{
background-image: url('/images/badges/additive/badge-additive-finish.png');
}


.offer-icon.badge.additive.finish{
    background-image: url('/images/badges/icons/additive-icon-95.png');
    }
    .milestone-icon.badge.additive.finish{
        background-image: url('/images/badges/icons/additive-icon-35.png');
        }
    

.badge.affine.start{
background-image: url('/images/badges/affine/badge_affine_start.png');
}

.badge.affine.finish{
background-image: url('/images/badges/affine/badge-affine-finish.png');
}

.offer-icon.badge.affine.finish{
    background-image: url('/images/badges/icons/affine-icon-95.png');
    }
    .milestone-icon.badge.affine.finish{
        background-image: url('/images/badges/icons/affine-icon-35.png');
        }

        


.badge.keyword.start{
background-image: url('/images/badges/keyword/badge_keyword_start.png');
}

.badge.keyword.finish{
background-image: url('/images/badges/keyword/badge-keyword-finish.png');
}

.offer-icon.badge.keyword.finish{
    background-image: url('/images/badges/icons/keyword-icon-95.png');
    }
    .milestone-icon.badge.keyword.finish{
        background-image: url('/images/badges/icons/keyword-icon-35.png');
        }
    

.badge.vig.start{
background-image: url('/images/badges/vig/badge_vig_start.png');
}

.badge.vig.finish{
background-image: url('/images/badges/vig/badge-vig-finish.png');
}



.offer-icon.badge.vig.finish{
    background-image: url('/images/badges/icons/vig-icon-95.png');
    }

    .milestone-icon.badge.vig.finish{
        background-image: url('/images/badges/icons/vig-icon-35.png');
        }
    







.badge-cells{
display:flex;
flex-direction: row;
flex:.73;
margin-top:5%;
align-self:center;
width:100%;
height:40%;

}

.badge-row{
display:flex;
flex:1;

flex-direction: row;
flex-wrap: wrap;
width: 100%;

}

.badge-col{
display:flex;
flex:1;  
flex-direction: column;
flex-basis:100%;
width: 100%;
justify-content: center;      
align-items: center;          
align-content: center;

}




.badge-col.left.top .badge-section{
float:none;
margin-left:-5%;
}

.badge-col.right.top  .badge-section{
float:none;
margin-right:-5%;
} 
.badge-col.right.top  .badge-keyholes{

padding-left:2%;
} 


.badge-col.left.bottom .badge-section{
float:none;
margin-left:-24%;
}

.badge-col.right.bottom  .badge-section{
float:none;
margin-right:-24%;
} 


.badge-section{
position:relative;
width:100%;
height:100%;
}


.badge-keyholes{
    position:absolute;
    flex:1;
    display:flex;
    flex-direction: row;
    flex-basis:100%;
    width: 100%;
    height:30%;
    top:28%;
    justify-content: center;      
    align-items: center;          
    align-content: center;
    /* padding-left:2%; */
    }
    
    .keyhole{
    flex:.14;
    
    height:100%;
    background-repeat: no-repeat;
    background-size: contain;
    }
    
    .keyhole.hidden{
    display:none;
    }
    .keyhole.start{
    background-image: url('/images/badges/start/keyhole-start.png');
    
    }

.badge-label{
position:absolute;
background-repeat: no-repeat;
background-size: contain;
width:100%;
height:100%;
}

.badge-label.encrypt.start{
background-image: url('/images/badges/start/label-encrypt-start.png');

}

.badge-label.decrypt.start{
    background-image: url('/images/badges/start/label-decrypt-start.png');
    
    }

    .badge-label.crack.start{
        background-image: url('/images/badges/start/label-crack-start.png');
        
        }
        .badge-label.play.start{
            background-image: url('/images/badges/start/label-play-start.png');
            
            }


            

.multi .badge-label.encrypt.finish{
background-image: url('/images/badges/multi/label-encrypt-finish-multi.png');

}

.multi  .badge-label.decrypt.finish{
background-image: url('/images/badges/multi/label-decrypt-finish-multi.png');

}

.multi .badge-label.crack.finish{
background-image: url('/images/badges/multi/label-crack-finish-multi.png');

}

.multi .badge-label.play.finish{
background-image: url('/images/badges/multi/label-play-finish-multi.png');

}

.multi .keyhole.finish{
background-image: url('/images/badges/multi/keyhole-finish-multi.png');

}

.multi .counter.complete{
background-image: url('/images/badges/multi/counter-multi.png') !important;

}




.additive .badge-label.encrypt.finish{
background-image: url('/images/badges/additive/label-encrypt-finish-additive.png');

}

.additive  .badge-label.decrypt.finish{
background-image: url('/images/badges/additive/label-decrypt-finish-additive.png');

}

.additive .badge-label.crack.finish{
background-image: url('/images/badges/additive/label-crack-finish-additive.png');

}

.additive .badge-label.play.finish{
background-image: url('/images/badges/additive/label-play-finish-additive.png');

}

.additive .keyhole.finish{
background-image: url('/images/badges/additive/keyhole-finish-additive.png');

}


.additive .counter.complete{
    background-image: url('/images/badges/additive/counter-additive.png') !important;
    
    }


.affine .badge-label.encrypt.finish{
    background-image: url('/images/badges/affine/label-encrypt-finish-affine.png');
    
    }
    
    .affine  .badge-label.decrypt.finish{
    background-image: url('/images/badges/affine/label-decrypt-finish-affine.png');
    
    }
    
    .affine .badge-label.crack.finish{
    background-image: url('/images/badges/affine/label-crack-finish-affine.png');
    
    }
    
    .affine .badge-label.play.finish{
    background-image: url('/images/badges/affine/label-play-finish-affine.png');
    
    }
    
    .affine .keyhole.finish{
    background-image: url('/images/badges/affine/keyhole-finish-affine.png');
    
    }

    
.affine .counter.complete{
    background-image: url('/images/badges/affine/counter-affine.png') !important;
    
    }

    
.caesar .badge-label.encrypt.finish{
    background-image: url('/images/badges/caesar/label-encrypt-finish-caesar.png');
    
    }
    
    .caesar  .badge-label.decrypt.finish{
    background-image: url('/images/badges/caesar/label-decrypt-finish-caesar.png');
    
    }
    
    .caesar .badge-label.crack.finish{
    background-image: url('/images/badges/caesar/label-crack-finish-caesar.png');
    
    }
    
    .caesar .badge-label.play.finish{
    background-image: url('/images/badges/caesar/label-play-finish-caesar.png');
    
    }
    
    .caesar .keyhole.finish{
    background-image: url('/images/badges/caesar/keyhole-finish-caesar.png');
    
    }

    
.caesar .counter.complete{
    background-image: url('/images/badges/caesar/counter-caesar.png') !important;
    
    }

    
.keyword .badge-label.encrypt.finish{
    background-image: url('/images/badges/keyword/label-encrypt-finish-keyword.png');
    
    }
    
    .keyword  .badge-label.decrypt.finish{
    background-image: url('/images/badges/keyword/label-decrypt-finish-keyword.png');
    
    }
    
    .keyword .badge-label.crack.finish{
    background-image: url('/images/badges/keyword/label-crack-finish-keyword.png');
    
    }
    
    .keyword .badge-label.play.finish{
    background-image: url('/images/badges/keyword/label-play-finish-keyword.png');
    
    }
    
    .keyword .keyhole.finish{
    background-image: url('/images/badges/keyword/keyhole-finish-keyword.png');
    
    }

    
.keyword .counter.complete{
    background-image: url('/images/badges/keyword/counter-keyword.png') !important;
    
    }

    
.vig .badge-label.encrypt.finish{
    background-image: url('/images/badges/vig/label-encrypt-finish-vig.png');
    
    }
    
    .vig  .badge-label.decrypt.finish{
    background-image: url('/images/badges/vig/label-decrypt-finish-vig.png');
    
    }
    
    .vig .badge-label.crack.finish{
    background-image: url('/images/badges/vig/label-crack-finish-vig.png');
    
    }
    
    .vig .badge-label.play.finish{
    background-image: url('/images/badges/vig/label-play-finish-vig.png');
    
    }
    
    .vig .keyhole.finish{
    background-image: url('/images/badges/vig/keyhole-finish-vig.png');
    
    }


    .vig .counter.complete{
        background-image: url('/images/badges/vig/counter-vig.png') !important;
        
        }
  
.survey-popup-wrapper{

    position:absolute;
    height:95%;
    width:850px;
    top: 2.5%;
    left:50%;
   margin-left:-425px;
    background-color:#fff6cc;
    /* padding: 20px 5% 20px 5%; */
    box-sizing: border-box;
    z-index:95000;
        }
  
.survey-test-popup-wrapper{

    position:absolute;
    height:45%;
    width:750px;
    top: 15%;
    left:50%;
   margin-left:-375px;
    background-color:#fff6cc;
    /* padding: 20px 5% 20px 5%; */
    box-sizing: border-box;
    z-index:95000;
  
        }
    
        .survey-test-popup-wrapper .inner-frame{
    
        
            border:solid 4px #806b00;
            width:100%;
            height:100%;
            padding:20px;
            box-sizing: border-box;
            overflow-y: auto;
            }
        
    .survey-popup-wrapper .inner-frame{
    
        
    border:solid 4px #806b00;
    width:100%;
    height:100%;
    
    box-sizing: border-box;
    overflow-y: auto;
    }
  
.badge-popup-wrapper{

    position:absolute;
    height:95%;
    width:58%;
    top: 2.5%;
    right:7%;
    /* border-radius:5px; */
    background-color:#fff6cc;
    
    box-sizing: border-box;
    z-index:1500;
        }
    
    
        
    .badge-popup-wrapper .inner-frame{
    
        
    /* border:solid 4px #806b00; */
    width:100%;
    height:100%;
    
    box-sizing: border-box;
    overflow-y: auto;
    }
    
    
     
.badge-popup-wrapper.caesar{
    border:solid 8px #0044cc;  
    }
    .badge-popup-wrapper.caesar .title   {

        color:#3071F2;
    }   
    .badge-popup-wrapper.caesar .tab   {

        color:#0044cc;
    }   

    .caesar .title-icon{
        background-image: url('/images/badges/caesar/title-caesar.png');
         
    }

    .caesar .completed-label,   .caesar .na-label{

        background: #3071f2;
background: linear-gradient(90deg, #002a80 0%, #3071f2 50%, #002a80 100%);
    }
     
.badge-popup-wrapper.additive{
    border:solid 8px #b2000f;  
    }
    .badge-popup-wrapper.additive .tab   {

        color:#b2000f;
    }   
    .badge-popup-wrapper.additive .title   {

        color:#E61717;
    }   

    .additive .title-icon{
        background-image: url('/images/badges/additive/title-additive.png');
         
    }

    .additive .completed-label,  .additive .na-label{

        background: #e61717;
background: linear-gradient(90deg, #80000b 0%, #e61717 50%, #80000b 100%);
    }
        
     
.badge-popup-wrapper.keyword{
    border:solid 8px #4d6600;  
    }
    .badge-popup-wrapper.keyword .tab   {

        color:#4d6600;
    }   

    .badge-popup-wrapper.keyword .title   {

        color:#739900;
    }   

    .keyword .title-icon{
        background-image: url('/images/badges/keyword/title-keyword.png');
         
    } 

    .keyword .completed-label,  .keyword .na-label{

        background: #739900;
background: linear-gradient(90deg, #304000 0%, #739900 50%, #304000 100%);

}
        
     
.badge-popup-wrapper.vig{
    border:solid 8px #B24A00;  
    }

    .badge-popup-wrapper.vig .tab   {

        color:#b24a00;
    }   

    .badge-popup-wrapper.vig .title   {

        color:#e67300;
    }   

    .vig .title-icon{
        background-image: url('/images/badges/vig/title-vig.png');
         
    }

    .vig .completed-label,  .vig .na-label{

        background: #e67300;
background: linear-gradient(90deg, #8c2e00 0%, #e67300 50%, #8c2e00 100%);
  
}
.vig  .na-label{
    display:block !important;
 
}    

.multi  .na-label{
    display:block !important;
 
}    

.affine  .na-label{
    display:block !important;
 
}    
     
.badge-popup-wrapper.affine{
    border:solid 8px #00665E;  
    }
    .badge-popup-wrapper.affine .tab   {

        color:#00665e;
    }   

    .badge-popup-wrapper.affine .title   {

        color:#009980;
    }   

    .affine .title-icon{
        background-image: url('/images/badges/affine/title-affine.png');
         
    }

    .affine .completed-label,  .affine .na-label{

        background: #009980;
background: linear-gradient(90deg, #00403b 0%, #009980 50%, #00403b 100%);
    }
        
     
.badge-popup-wrapper.multi{
    border:solid 8px #6b2a8c;  
    }

    .badge-popup-wrapper.multi .tab   {

        color:#6b2a8c;
    }   

    .badge-popup-wrapper.multi .title   {

        color:#8f4dbf;
    }   
    .multi .title-icon{
        background-image: url('/images/badges/multi/title-multi.png');
         
    }   
     
    .multi .completed-label, .multi .na-label{

        background: #8f4dbf;
background: linear-gradient(90deg, #440066 0%, #8f4dbf 50%, #440066 100%);
    }
        
    .badge-popup-wrapper .title{
    /* width:90%; */
    
    height:45px;
        display:flex;
        flex-direction: row;
        align-content: center;
    justify-content: center;
        
        font-family:"Bitter",'Trebuchet MS',serif;
        font-size: 2.35vw;
        font-weight:800;
        margin-top:10px;
        margin-bottom:10px;
       
    }
    
    
        
    .badge-popup-wrapper .title-text{
    flex:8;
    padding-left:15px;
    align-self:center;
       justify-self: flex-start;
    }
    
        
    .badge-popup-wrapper .title-icon{
    flex:2;
    align-self:center;
       justify-self: flex-end;
        background-repeat: no-repeat;
       background-position-x: right;
       height:100%;
      
       background-size: contain;
    }
    
    
    
    .badge-popup-wrapper .rules{
    
        background: rgb(255,220,115);
    background: linear-gradient(180deg, rgba(255,220,115,1) 0%, rgba(255,230,178,1) 100%);
    padding:7px;
    min-height: 60%;
    }
    
    .badge-popup-wrapper .rule{
  
    font-family: Verdana;
    font-size:.8em;
    margin-top:5px;
    margin-bottom:5px;
    padding-bottom:7px;
    display:flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    
    }
    
    
    
        
    .badge-popup-wrapper .tab{
    
        position:relative;
        background-color:#ffdc73;
        width:25%;
        height:20px;
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        text-align:center;
        padding-top:5px;
       
    }
    
       
    .badge-popup-wrapper .tab .completed-label{
position:absolute;
left:92%;
top:18%;
color:#fff;
box-sizing: border-box;
font-family:"Bitter",'Trebuchet MS',serif;
font-size:1.0em;
padding:3px;
font-weight:bold;
letter-spacing: .1em;
display: none;
    }

    .badge-popup-wrapper .tab .na-label{
position:absolute;
left:92%;
top:18%;
color:#fff;
box-sizing: border-box;
font-family:"Bitter",'Trebuchet MS',serif;
font-size:.85em;
padding:3px;
font-weight:bold;
letter-spacing: .1em;
display: none;
width: 200px;
    }

       
    .badge-popup-wrapper .tab .completed-label.finish{
        display:block;
    }
        
    .badge-popup-wrapper .tab .label{
        box-sizing: border-box;
        font-family:"Bitter",'Trebuchet MS',serif;
        font-size:1.2vw;
        
        font-weight:800;
        letter-spacing: .05em;
    }   


    .badge-popup-wrapper .sections{
    display:flex;
    flex-direction: column;
   height:90%;
        padding-right: 5%;
        padding-left: 5%;
        
    }

    
    .badge-popup-wrapper .section{
        flex:1;
    }
        
    .badge-popup-wrapper .rule .keyhole{
    
       flex:.5;
        width:12px;
        height:20px;
        background-position: center center;
        background-repeat:no-repeat;
        align-self: center;
    }
        
    .badge-popup-wrapper .rule .desc{
    flex:9;
    align-self:center;
       
    }
      
    .badge-popup-wrapper .link-arrow{
        cursor:pointer;
    }
   
    .badge-popup-wrapper .rules > .link-arrow:hover{
        background-color:rgba(255,255,255,.15);
        border-radius:10px;
    }
    
    


    .badge-popup-wrapper .rule .link-arrow{
    
    flex:.5;
    background-image: url('/images/badges/start/link-arrow.png');
       background-repeat: no-repeat;
       height:20px;
       width:20px;
       background-size: contain;
       align-self:center;
       justify-self: flex-start;
       cursor:pointer;
    }
    .badge-popup-wrapper .rule .counters{
    
       flex:1.0;
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
    }
    
    
        
    .badge-popup-wrapper .rule .counter{
    
        flex:1;
        background-image: url('/images/badges/start/counter-start.png');
       background-repeat: no-repeat;
       height:13px; 
       width:13px;
       padding-left:3px;
       padding-right:3px; 
       
       background-size: contain;
       align-self:center;
     justify-self: center;
    }

    .close-popup-wrapper{
flex:.01;
        text-align:center;
        margin-bottom:15px;
    }
        
    .badge-popup-wrapper .form-button,  .survey .form-button{
        display: inline-block;
text-align:center;
        width:85px;
        margin:15px;
        cursor:pointer;
    }
    .close-survey-popup{

        text-align:center;
      
        position:absolute;
        top:15px;
        right:35px;
        font-size:30px;
        cursor:pointer;
    }
        
    .survey-popup-wrapper .form-button{
        display: inline-block;
text-align:center;
        width:85px;
        margin:15px;
        cursor:pointer;
    }

/*Rules Editor*/

    .ccBadgeRulesGrip .k-filter-row th, .k-grid-header th.k-header {
    padding-left:2.75em;
    }

   
    .ccBadgeRulesGrid  .k-grid tbody td{
        text-align:left;
    } 
   
    .ccBadgeRulesGrid  .form-button{
        margin-left:10px;
    } 
   
    .badge-rules .header-btn-wrapper{
        height:50px;
    } 

    .badge-rules  .header-btn-wrapper .form-button{
        
    } 

    .badge-link{
        pointer-events: all !important;
        cursor:pointer;
        color: #065d9d;
        
    }

    .survey .form-button{
        margin-top:20px;
        min-width:100px;
        width:auto;
        display:inline-block;
    }

    /*login survey*/


    .offer-icon.Survey-01-2022 ,  .offer-icon.Survey-03-2022{
        display:none !important;
    }

    .offer-txt{
        margin-bottom:20px !important;
    }
   

    .glow {
        /* position: relative;
        width: 48px;
        height: 48px;
        transform: rotate(45deg); 
        background: #C0FFE4; f6fd8a  FFF6CC*/
        box-shadow: 1px 1px 0 #f6fd8a, 0 0 12px 4px #fff;
        animation: glow 6s infinite ease;
    }
  
    
    /* animates box shadow glow effect */
    @keyframes glow {
        0%,100% {
            box-shadow: 1px 1px #f6fd8a, 0 0 12px 4px #fff;
        }
        50% {
            box-shadow: 1px 1px #f6fd8a, 0 0 4px 2px #fff;
        }
    }
    




    /********************/

    
@media screen and (max-width: 1325px) {
   
    
.deferred-survey{

/* right: 85px;*/
 top:3px;

}

.deferred-survey .tiny-notif-ls{
    top:10px !important;
    right:85px !important;
  /*  width:85px !important;*/
    }
    
.btnLogin.intro .tiny-notif-ls{
    top:5px !important;
   
}
}