#qrCodeApp {margin-top:40px;}

    #qrCodeApp .button {width:100%;}
    
    
    #qrCodeApp h2, #qrCodeApp h3, #qrCodeApp h4 {color:#03689A;}
    #qrCodeApp h2 {font-size:31px !important;}
    #qrCodeApp h3{
        font-size: 24px !important;
        margin-bottom: 8px;
    }
    #qrCodeApp h4{font-size: 24px !important;}

    .step{
        color: #016699;
        border: 2px solid #016699;
        border-radius: 50px;
        width: 37px;
        display: inline-block;
        text-align: center;
        font-family: passion one;
        font-weight: bold;
        font-size: 30px;
        line-height: 33px;
    }                

    .featureGroup{
        background: white;
        padding: 0px 16px 16px 16px;
        border-radius: 4px;
        border: 1px solid #D1D18C;
        margin-bottom: 30px;    
    }
    
    .frontFeatureGroup{
        background: white;
        padding: 0px 16px 16px 16px;
        border-top-left-radius: 12px;
        border: 4px solid #FFF;
        margin-bottom: 30px;
        box-shadow: 0px 0px 5px rgba(0,0,0,.1);
        border-top-right-radius: 12px;   
    }
        
    .codeType{
        float: left;
        width: 84px;
        height: 140px;
        font-size: 14px !important;
        text-align: center;
        padding: 10px;
        background: #EFF5F8;
        border-radius: 8px;
        border: 1px dashed #069;
        margin: 4px;
        color: #004C72;
        cursor: pointer;
        position:relative;
    }
    
    .codeType .advancedTag{
        position: absolute;
        bottom: -1px;
        left: -1px;
        width: 84px;
        font-size: 10px;
        text-transform: uppercase;
        color: white;
        background: #990;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        padding: 4px;
    }                
    
    .codeType:hover{
        border:2px solid gold;
    }
    
    .codeType img{
        width:60px;
        height:60px;
        margin:0px auto;
    }
    
    .codeType.active{
        border:2px solid gold;
    }
    
    
    .codeTypeContent{
        background: rgba(0,102,153,.2);
        padding: 26px;
        margin: 10px -16px -16px -16px;  
        display:none;
    }
    
    .codeTypeContent.active{
        display:block;
    }

    .codeTypeContent label{
        font-size: 16px !important;
        margin-top: 10px !important;
        margin-bottom:10px;
    }        

    .codeTypeContent .notes{
        display: block;
        padding-bottom: 20px;
        font-size: 16px;
        line-height: 22px;      
    }
        
    .codeTypeContent input[type="text"], .accessOptions input[type="text"], .codeTypeContent input[type="select"]{
        margin: 0px;
        height: 43px;
        border: none;
        border-radius: 4px;        
    }        
        
        
    .accessOption{
        font-size: 14px !important;
        text-align: left;
        padding: 0px;
        background: #EFF5F8;
        border-radius: 8px;
        border: 1px dashed #069;
        color: #004C72;
        margin-bottom: 10px !important;
        position:relative;         
    }
    
    .accessOption .columns{
        padding:10px;
    }
    
    .accessOptions h4{
        font-size:22px !important;
        margin: 8px 0px;
    }

    .accessOptionSwitch{
        cursor:pointer;      
    }  
        
        
    .accessOptionSwitch .advancedTag{
        position: absolute;
        top: 0px;
        left: -1px;
        width: 100%;
        font-size: 10px;
        text-transform: uppercase;
        color: white;
        background: #990;
        border-top-left-radius: 8px;
        padding: 4px;
        text-align: center;
    }  
            
        
    .accessOption img{
        width:60px;
        height:60px;
        margin: 17px auto 0px;
    }
       
    .accessOptionContent{
        background: rgba(0,102,153,.2);
        font-size:16px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        min-height: 124px;
        padding: 10px 20px !important;        
    }       
    
    .accessOptionContent p{
        font-size: 16px !important;
        line-height: 22px;
    }
        
        
    #qrCodeResult{
        min-height: 200px;
        border: 1px solid #CCCC80;
        margin: 10px 0px;
        border-radius: 8px;
        background: rgba(153,153,1,.3);
        text-align: center;
        padding: 20px;
    }     
    
    .powerUp{
        color:#EB9400;
    }
    
    .destinationBtn{
        background: #EBF5D9;
        border-radius: 8px;
        width: 100%;
        text-align: center;
        padding: 10px;
    }
    
    
    .powerupGroup{
        padding: 10px;
        border-radius: 16px;
        margin-bottom: 30px;
        margin-top: 5px;
    }
    
    .powerupGroup h4{
        margin-top: -33px;
        float: left;
        padding: 6px 8px 8px 8px;
        margin-bottom: 0px;
        font-size: 20px;
        color: #FFCD2A; 
    }
    
    .powerupGroup .button{
        text-align: left;
        font-size: 16px;
        width: 100%;
    }   
    
    
    .error {
        border: 2px solid #FF4000 !important;
        background: linear-gradient(to right, #FFD9D9, #FFBDBD);
    }
    
    /***************************************************************************
    SWITCH STYLES
    ***************************************************************************/ 
    .switch{line-height:20px;display: inline-block;cursor: pointer;}
    .switch > div {float:left;font-size:14px;}
    .switchOuter{border-radius: 50px;
        position: relative;
        height: 20px;
        width: 40px;
        margin-right:8px;
        margin-left:8px;
        z-index:0}
    
    .switchButton{position:absolute;
        border-radius: 50px;
        border-bottom: 8px solid #E1E2E3;
        border-left: 8px solid #E1E2E3;
        background: #EEE;
        border-right: 4px solid #E1E2E3;
        border-top: 3px solid #E1E2E3;
        height: 18px;
        width: 18px;
        margin: 1px 1px 1px 20px;
        z-index:10;
        transition: all 500ms;}
    .switchButton.on{margin-left:1px;} 
           
    .switchBackground{position:absolute;
        height: 20px;
        width: 40px;
        border-radius: 50px;
        background: rgba(0,0,0,.2);
        border-top: 5px solid rgba(0,0,0,.2);z-index:8;
        transition: all 500ms;
        } 
        
    .switchContainer {height: 30px;
        line-height: 20px;
        padding: 10px 0px 10px 0px;
        cursor:pointer;
    }
    
    .switchContainer > div{float:left;}
    .switchContainer .switchTitle{font-size:14px; max-width:75%;}
    .switchBackground.on{background: #7FBF0C;}
    /***************************************************************************
    ***************************************************************************/