/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {margin: 0; padding: 0;}

html {
    height: 100%;
    /*Image only BG fallback*/
    /*background: url('http://thecodeplayer.com/uploads/media/gs.png');*/
    /*background = gradient + image pattern combo*/
    /*background: 
        linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), 
        url('http://thecodeplayer.com/uploads/media/gs.png');*/
}

body {
    font-family: montserrat, arial, verdana;
}
/*form styles*/
#wizform {
    width: 700px;
    margin: auto;
    margin-top:25px;
    /*margin: 25px auto;*/
    text-align: center;
    position: relative;
}


#wizform fieldset {
    background: white;
    border: 0 none;
    border-radius: 3px;
    /*box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);*/
    padding: 0px 30px;
    
    box-sizing: border-box;
    width: 80%;
    height:600px;
    margin: 0 10%;
    
    /*stacking fieldsets above each other*/
    position: absolute;
}

#wizform fieldset[name="fsQuote"] {
    width:900px;
    margin-left: -140px;
    position:relative;
}

#wizform fieldset[name="fsConfirmation"] {
    width:700px;
    margin-left: -185px;
    position:relative;
}

/*Hide all except first fieldset*/
#wizform fieldset:not(:first-of-type) {
    display: none;
}
/*inputs*/
#wizform input, #wizform textarea {
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 96%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 14px;
}

/*progressbar*/
#progressbar {
    margin-bottom: 35px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
}
#progressbar li {
    list-style-type: none;
    color: #5e6fc1;
    text-transform: uppercase;
    font-size: 14px;
    width: 20%;
    float: left;
    position: relative;
}
#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 40px;
    line-height: 40px;
    display: block;
    font-size: 16px;
    color: #333;
    background: white;
    border-radius: 30px;
    margin: 0 auto 5px auto;
    background-color:#e5e5e5;
}

/*progressbar connectors*/
#progressbar li:after {
    content: '';
    width: 100%;
    height: 4px;
    background: white;
    position: absolute;
    left: -50%;
    top: 18px;
    z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
    background: #07bc0a;
    color: white;
}


/* line item input fields */
.wiz-keyword {
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 80px;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 12pt;    
}

#wizform .wiz-pieces {
    width: 70px;
    font-size: 12pt;
}

#wizform .wiz-hazmat {
    width: 70px;
    font-size: 12pt;
}

#wizform .wiz-desc {
    width: 240px;
    font-size: 12pt;
}

#wizform .wiz-item1 {
    width: 80px;
    font-size: 12pt;
}

#wizform .wiz-item2 {
    width: 80px;
    font-size: 12pt;
}

#wizform .wiz-weight {
    width: 80px;
    font-size: 12pt;
}

#wizform .wiz-pallets {
    width: 80px;
    font-size: 12pt;
}

#wizform .wiz-dim {
    width: 90px;
    text-align:left;
    font-size: 12pt;    
}

#wizform .wiz-rate {
    width: 80px;
    font-size: 12pt;
}

#wizform .wiz-amount {
    width: 100px;
    font-size: 12pt;
}

#wizform .wiz-assessorial-checkbox {
    width: 25px;
}

/*buttons*/
#wizform .action-button {
    width: 80px;
    background: #5e6fc1;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 7px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}

#wizform .action-button.previous {
    padding: 2px 2px;
    top:545px;
    height:30px;
    position:absolute;  
    left:30px;
    }     

#wizform .action-button.next {
    padding: 2px 2px;
    top:545px;
    height:30px;
    position:absolute;
    right:20px;
    }

#wizform .action-button.shipTrackBtn {
    padding: 2px 2px;
    top:545px;
    height:30px;
    position:absolute;  
    left:170px;
    width:160px; 
    background-color:#09750b;    
    }       

#wizform .action-button:hover, #wizform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

/*headings*/
.fs-title {
    font-size: 25px;
    text-transform: uppercase;
    color: #5e6fc1;
    margin-bottom: 15px;
}

.wiz-subtitle {
    font-size: 16pt;
    font-weight: bold;
    text-transform: uppercase;
    color:#5e6fc1;
    margin: 10px;
}

.fs-confirmation {
    font-size: 25px;
    text-transform: uppercase;
    color: #07bc0a;
    margin-bottom: 15px;    
}

.wiz-dropdown {
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 96%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 14px;
}

.wiz-select-thirdwidth {
    padding: 4px 15px 4px 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 30%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 14px;    
}

.wiz-hidden {
    display: none;
}

.wiz-vert-scrollable{
    height: 2em;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    text-align:left;
}

.wiz-lbl {
    font-size: 16px;
    text-transform: uppercase;
}

.wiz-lbl-assessorial {
    font-size: 13px;
    text-transform: uppercase;
}

.wiz-err-lbl {
    font-size: 20px; 
    color: red;
    font-weight:bold;
}

.wiz-radbtn {
    font-size: 16px;
}

#wizform .half-width {
    width:49%;
}

#wizform .third-width {
    width:30%;
}

#wizform .quarter-width {
    width:24%;
}

#wizform .city-width {
    width:48%;
}

#wizform .state-width {
    width:18%;

}

#wizform .zip-width {
    width:22%;

}

.wiz-copyright {
    font-size:10pt;
}

.wiz-required {
    font-size: 20px;
    color: red;
}

.wiz-whitespace {
    margin-left:13px;
}

.loading-overlay {
    background: #adadad; 
    display: none;        
    position: absolute;   
    top: 0;                  
    right: 0;                
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

.wiz-hazmat-overlay {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(173, 173, 173);
    /* RGBa with 0.75 opacity */
    background: rgba(240,240,240,0.75);      
    position: absolute;   
    top: 0;                  
    right: 0;                
    bottom: 0;
    left: 0;
    display:none;
}

.wiz-hazmat-overlay-form {
    margin-top:250px;
    width:650px;
    height:250px;
    background: #dddddd;
    border-radius: 9px;
    overflow-x: auto;
}

.wiz-li-preset-overlay {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(173, 173, 173);
    /* RGBa with 0.75 opacity */
    background: rgba(280,280,280,0.90);      
    position: absolute;   
    top: 0;                  
    right: 0;                
    bottom: 0;
    left: 0;
    display:none;
}

.wiz-li-preset-overlay-form {
    margin-top:120px;    
    width:min-content;
    height:min-content;
    padding: 0px 30px 10px 30px;
    background: #dddddd;
    border-radius: 9px;
}

.action-button-2 {
    width: 200px;
    background: #5e6fc1;
    font-weight: bold;
    font-size:11pt;
    color: white;
    border: 0 none;
    border-radius: 7px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 20px 5px;
}


.wiz-li-preset-grid-line:nth-of-type(odd){
  background: #f2f2f2;
}
.wiz-li-preset-grid-line:nth-of-type(even){
  background: #dddddd;
}


.liPresetGridTh {
  font-weight: bold;
  padding: 5px 5px 5px 5px;

}

.liPresetGridTd, .liPresetGridTh {
/*  border: 1px solid #ccc;*/
  padding:3px;
}

/*input, textarea, select {
    padding: 2px 2px 2px 5px;
    border: 1px solid #1e8920;
    border-radius: 3px;
    margin-bottom: 10px;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 13pt;
}*/





.wiz-bolpdf {
    height:400px; 
    width:900px;
}

.wiz-inlineblock {
    display: inline-block;
}

.loader {
  border: 2px solid #f3f3f3; /* Light grey */
  border-top: 2px solid #3498db; /* Blue */
  border-bottom: 2px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 25px;
  height: 25px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}