/*User Admin CSS for Wizard Etc*/

.row .wizardRow{
    padding: 0;
}

select{
width: 300px;    
}

.wizardStep { width: 100%; max-width: 25%; float: left; display: block; position: relative; }
.circle{ height: 20px; width: 20px; border-radius: 20px; display: block; float: left; font-size: 14px; line-height: 20px; color: #e4e4e4; border:1px solid #e4e4e4;  }

.wizardStep .wizardStep {
    width: 100%;
    max-width: 100%;
    text-align: left;
    text-transform: capitalize;
    font-size: 14px;
    color: #e4e4e4;
    /*padding-left: 40px;*/
}

.wizardStep .circle{
    text-align: center;
    float: left;
    display: inline-block;
    margin-right: 10px;
}

.wizardStep.active .circle,
.wizardStep.active .wizardStep{
    color: #6B7036;
}

.wizardStep.active .circle{
    background-color: #6b7036;
    border: 1px solid #6b7036;
    text-align: center;
}

.wizardStep.completed .circle{
    border: 1px solid #6b7036;
}

.wizardStep.completed .circle{
    color: #fff;
    background-color: #6b7036;
}

#wizard{
    margin: 40px 0;
    float: left;
   /* max-width: 75%; */
}

#wizard > .wizardStep{
    padding: 20px 0;
}

#wizard hr{
    border: 1px solid #e4e4e4;
    clear: both;
}

.circle:after{ font-weight: bold; text-align: center; color: #e4e4e4; } 
.active .circle:after{ color: #fff;}

.wizardStep.step1 .circle:after{  content: "1"; }
.wizardStep.step2 .circle:after{  content: "2"; }
.wizardStep.step3 .circle:after{  content: "3"; }
.wizardStep.step4 .circle:after{  content: "4"; }

.completed .circle{
    background-image: url('../common/images/site/wizard_check.png');
}
.completed .circle:after{
    /*
    font-family: "laurier_icons" !important;
    content: "\73";
    */
   content: "" !important; 
}


/*FORM STYLES*/
.wizardRow{ clear: both; overflow: hidden; }

.wizardForm h2{ text-transform: none; margin-top: 20px; }

.wizardForm p{ margin: 0; }

.wizardRow .col-50,
.wizardForm .col-50{
    max-width: 50%;
    margin-left: 0;
}

.wizardForm select{
    40px;
}

.wizardForm a.wizardButton,
.wizardForm input[type="submit"].wizardButton{
    width: auto;
    max-width: 100px;
    min-width: 100px;
    padding:15px;
    height: 40px;
    background-color: #5b328E;
    background: #5b328E;
    color: #fff;
    font-size: 14px;
    display: inline-block;
    cursor: pointer;
    text-transform: capitalize;
    border: none;
    line-height: 10px;
    text-align: left;
    margin-right: 10px;
    -webkit-appearance:none;
}

.wizardForm a.wizardButton.back{
    background-color: #e4e4e4;
    background: #e4e4e4;
    color: #444;
}

#quickLinksError{ display: none; }

#quickLinksError,
#quickLinksRemaining{
    background-color: #eee;
    height: 40px;
    line-height: 40px;
    padding-right: 20px;
}

#quickLinksRemaining .count{
    float: left;
    display: block;
    height: 40px;
    width: 40px;
    margin-right: 10px;
    color: #fff;
    font-size: 24px;
    text-align: center;
    background-color: #330072;
}

/* BEGIN CSW-180 Updates */
#quickLinksRemaining .countGrey{
    color: #330072;
    background-color: #EEE;
}

.fixed {
        position:fixed;
}

.topMargin20 {
    margin-top: 20px;
}
/* END CSW-180 Updates */

#quickLinksRemaining{
    display: inline-block;
}

#quickLinksError,
#quickLinksRemaining{
/*
   position: fixed;
    z-index: 1000;
*/
    margin-top: 20px;
    padding-right: 20px;
    width: auto;
    
}

#quickLinksError{
margin-top: 10px;
/*AODA change*/
border: 2px solid #DB2C39;
background-color: transparent;
position: relative;
top: 2px;
}


#quickLinksError{
    color: #DB2C39;
   /* margin-top: 50px;*/
}

#quickLinksError .icon{
    float: left;
    height: 40px;
    width: 40px;
    vertical-align: middle;
    text-align: center;
}

#quickLinksError .icon img{
    margin-top: 8px;
}


.wizardForm p.header{
    font-size: 18px;
    text-transform: none;
    color: #444;
    margin-top: 20px;
}
h2.progDept{
    margin-top: 0;
}
p.addProgram{
    margin-top: 20px;
}

#SelectEventLinks{
    padding: 20px 0;
}

.wizardForm .menuItem a{
 font-size: 14px;
 line-height: 28px;
 color: #444;
}

.wizardForm .confirmationToggles{
    padding-bottom: 20px;
}

p.finalConfirmation{
    font-size: 18px;
    line-height: 40px;
}

p. .toggle input{
    margin-left: 20px;
}

p.finalConfirmation .finalToggleOption{
    display: inline-block;
    min-width: 280px;
    
}

.setupComplete{
    font-size: 40px;
    padding: 20px;
    background-color: #5b328e;
    color: #fff;
    width: 60%;
    display: block;
    margin: 20px 0;
}

.closing p{ margin: 0; }
.closing p.note{ color: #666; font-size: 12px; }

.wizard-step-5 .completed  .wizardStep{
    color: #444;
}

#wizard.wizard-step-5{ display: none; }

div.wizardForm{
    padding: 20px 0;
}



@media(max-width: 1024px){
    
    #SelectQuickLinks,
    #SelectQuickLinks .col-25,
    #SelectQuickLinks .col-50{
        max-width: 100%;
        width: 100%;
        clear: both;
    }
    
#externalPage.row{
    padding-left: 0px;
    padding-right: 0px;
}




div.wizardForm,
form.wizardForm{
    padding-left: 25px;
    padding-right: 25px;
}
.wizardStep{ max-width: 100%; }

#wizard{
    max-width: 100%;
    width: 100%;
}
/*
#wizard > .wizardStep.completed{
    display: none;
}

#wizard > .wizardStep.active  {
    display: block;
}

.wizardStep > .wizardStep{
    padding-left: 25px;
}
*/
#quickLinksError{
    clear: both;
    height: auto;
}


} 

#externalPage .ui-selectmenu-button span.ui-icon{
    background-image: url("images/ui-icons_888888_256x240.png");
}

#mobilePrompt{ display: none; }

@media(max-width: 600px){
    #mobilePrompt{ display: block; }
    
    p.finalConfirmation .finalToggleOption,
    p.finalConfirmation .toggle{
        clear: both;
        width: 100%;
    }
}


@media(max-width: 1024px){
    #wizard{
        margin: 20px 0;
    }
    
    #wizard > .wizardStep{ max-width: 24%; position: relative; margin-left: 1%; height: 40px; padding: 0;}
    
    #wizard .wizardStep > .wizardStep{ 
        position: relative; 
        width: 100%; 
        padding: 10px 0;
        height: auto;
        padding-bottom: 10px;
        text-align: center;
        color: #fff;
    }
    
    #wizard .wizardStep > .wizardStep > .circle{
        left: 50%;
        margin-right: 0;
        position: absolute;
        margin-left: -10px;
     }
     
     #wizard > .wizardStep.completed{ display: block; }
     
     
     #quickLinksError, #quickLinksRemaining{
         font-size: 16px;
     }
}

@media(max-width: 800px){
    #breakMe{
        clear: right;
        display: inline-block;
    }
    
    #quickLinksError, #quickLinksRemaining{
         font-size: 12px;
     }
}

@media(max-width: 1000px){
    /*June 14th*/
    #SelectQuickLinks > .col-25,
    #SelectQuickLinks > .col-50,
    #SelectQuickLinks > .col-50 > .col-50{
        max-width: 100%;
        width: 100%;
        clear: both;
        float: left !important;
    }
    
     #SelectQuickLinks .col.right{
         float: left;
     }
   
    
}

/*June 14th*/
.ui-selectmenu-open{
    	max-height: 350px;
		overflow-y: scroll;
	}


#SelectQuickLinks > .col-25{
    max-width:50%;
}

#SelectQuickLinks > .col-50{
    max-width: 100%;
}

#SelectQuickLinks > .col-50 > .col-50{
    max-width: 50%;
}


#SelectQuickLinks p.header{ font-weight: bold; color #330072; font-size: 18px; }
#SelectQuickLinks .menuItem input[type="checkbox"]{ margin-right: 5px; }
#SelectQuickLinks .menuItem label{ font-size: 14px; }