/* Commerce Vision (Customer Self Service Implementation)
 * Created By:  Ben Demeyere (Commerce Vision)
*/
/* Sub-section comment block
   ========================================================================== */
/* Usage

div.logo {
   background: url("logo.png") no-repeat;
   @include image-2x("logo2x.png", 100px, 25px);
 } 

 */
/* Clearfix
  ========================================================================== */
/* Usage 

.article {
     @include clearfix();
}

*/
/* Box Model
  ========================================================================== */
/* Usage 

*,
*:after,
*:before {
  @include box-sizing(border-box);
}

*/
/* Border Radius
  ========================================================================== */
/* Usage 

.button {
  @include border-radius(5px);
}

.submit-button{
  @include border-top-radius(10px);
}

*/
/* Opacity
  ========================================================================== */
/* Usage 

.article-heading {
  @include opacity(0.8);
}

*/
/* Center-align a block level element
  ========================================================================== */
/* Usage 

.footer-wrap {
  width: 450px;
  @include center-block;
}

*/
/* Text overflow
  ========================================================================== */
/* Usage 

.text-truncate {
  @include text-truncate;
}

*/
/* Absolute positioned
  ========================================================================== */
/* Usage 

.abs {
  @include abs-pos(10px, 10px, 5px, 15px);
}

*/
/* Font Size
  ========================================================================== */
/* Usage 

body {
  @include font-size(16);
}

*/
/* Line Height
  ========================================================================== */
/* Usage 

body {
  @include line-height (16);
}

*/
/* Cross browser inline block
  ========================================================================== */
/* Usage 

.icon {
	@include inline-block();
}
*/
/* Text replacement (instead of text-indent)
  ========================================================================== */
/* Usage 

.header h1 {
	@include text-replacement();
}

*/
/*------------------------------------*\
    STANDARD BUTTON
\*------------------------------------*/
.btn {
  background: #f2f2f2;
  clear: both;
  display: block;
  border: none;
  margin: 0;
  padding: 4% 0;
  text-align: center;
  font-size: 1em;
  display: block;
  color: #7e7e7e;
  font-family: "AvantGardeGothicITCW01M 731087";
}
.btn:before {
  /* icon */
  margin-right: 10px;
  position: relative;
  top: 1px;
}
.btn:hover {
  text-decoration: none;
  background: #ee3424;
  text-decoration: none !important;
  color: white;
  cursor: pointer;
}
.btn:focus {
  outline: none !important;
}
@media (min-width: 37em) {
  .btn {
    display: inline-block;
    clear: none;
    padding: 10px 15px;
  }
}

/*------------------------------------*\
    PILL BUTTON
\*------------------------------------*/
.btn.pill {
  border-radius: 30px;
}

/*------------------------------------*\
    SQUARE BUTTON
\*------------------------------------*/
.btn.square {
  border-radius: 0px;
}

/*------------------------------------*\
    LARGE BUTTON
\*------------------------------------*/
@media (min-width: 37em) {
  .btn.large {
    padding: 10px 18px;
    font-size: 14px;
  }
}

/*------------------------------------*\
    SMALL BUTTON
\*------------------------------------*/
.btn.small {
  display: inline-block;
  box-shadow: none;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 400;
  text-shadow: none !important;
  text-transform: capitalize;
}
@media (min-width: 37em) {
  .btn.small:before {
    margin-right: 5px;
  }
}

/*------------------------------------*\
    RED BUTTON
\*------------------------------------*/
.btn.red {
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  background: #ee3424;
  color: white;
  text-shadow: 1px 1px 1px #540d07;
}
.btn.red:hover {
  background: #f04a3c;
}

/*------------------------------------*\
    grey BUTTON
\*------------------------------------*/
.btn.green {
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  background: #4fb54c;
  color: white;
  text-shadow: 1px 1px 1px #163415;
}
.btn.green:hover {
  background: #61bc5e;
}

/*------------------------------------*\
    BLUE BUTTON
\*------------------------------------*/
.btn.blue {
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  background: #67d0fa;
  color: white;
  text-shadow: 1px 1px 1px #0577a4;
}
.btn.blue:hover {
  background: #80d8fb;
}

/*------------------------------------*\
    YELLOW BUTTON
\*------------------------------------*/
.btn.orange {
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  background: #ffc20e;
  color: white;
  text-shadow: 1px 1px 1px #554000;
}
.btn.orange:hover {
  background: #ffc828;
}

/*------------------------------------*\
    BUTTON INACTIVE & LOADING
\*------------------------------------*/
.btn.cv-is-processing {
  background: #f2f2f2;
  color: #cccccc;
  text-shadow: none;
  padding-left: 40px;
  position: relative;
}
.btn.cv-is-processing:hover {
  background: #f2f2f2;
  color: #cccccc;
  text-shadow: none;
  cursor: wait;
}
.btn.cv-is-processing:before {
  content: url("/images/TemplateImages/icons/loading-small.gif");
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -8px;
}

/*------------------------------------*\
    ROUNDED BTN
\*------------------------------------*/
.rounded {
  border-radius: 5px;
}

/*------------------------------------*\
    FULL WIDTH ALWAYS BTN
\*------------------------------------*/
.btn.full-width {
  width: 100%;
}

/*------------------------------------*\
    PUSH ICO RIGHT
\*------------------------------------*/
.btn.ico-after:before {
  float: right;
  margin-right: 0;
  margin-left: 10px;
}


/*------------------------------------*\
    ORDER TRACKING PROCESSING
\*------------------------------------*/
#order-track-results .btn.small {
    min-width: 105px;
    min-height: 24px;
}

#order-track-results .btn.small.cv-is-processing {
    padding-left: 8px;
}

#order-track-results .btn.small.cv-is-processing:before {
    left: 0;
}