@import 'css/master/settings/settings';

/* =helper classes */
.reset {
  margin: 0;
  padding: 0;
  outline: none;
}

.full_width {
  width: 100% !important;
}

.fleft,
.f_left {
  float: left !important;
}

.fright,
.f_right {
  float: right !important;
}

.fnone {
  float: none !important
}

.clearleft {
  clear: left
}

.clearright {
  clear: right !important
}

.clear {
  clear: both !important
}

.clearnone {
  clear: none !important
}

.clearfix:after {
  content: ".";
  display: block;
  font-size: 0;
  line-height: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

.noborder {
  border: none !important
}

.flcl {
  float: left;
  clear: left;
}

.flcr {
  float: left;
  clear: right;
}

.flcb {
  float: left;
  clear: both;
}

.flcn {
  float: left;
  clear: none;
}

.frcl {
  float: right;
  clear: none;
}

.frcr {
  float: right;
  clear: right;
}

.frcb {
  float: right;
  clear: both;
}

.frcn {
  float: right !important;
  clear: none !important;
}

.fblock {
  float: left;
  clear: left;
  width: 100%;
}

.db {
  display: block
}

.di {
  display: inline !important
}

.d_ib {
  display: inline-block !important
}

.display-inline {
  float: none;
  display: inline-block;
  *display: inline;
}

.center_block {
  display: block !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.font_light {
  font-weight: 200 !important;
}

.normal {
  font-weight: 400 !important;
}

.semi_bold {
  font-weight: 600 !important;
}

.bold {
  font-weight: 800 !important;
}

.nowrap,
.noWrap {
  white-space: nowrap
}

.ws_normal{
  white-space: normal;
}

.printShowOnly,
.js .js_hide,
.nojs .js_show,
.noshow,
.hide.hide.hide,
  /* make it a little more potent */
.hide,
.hidden {
  display: none;
}

.highlight {
  background-color: #ff0
}

.abs {
  position: absolute !important
}

.rel {
  position: relative !important
}

.fix {
  position: fixed !important
}

.uppercase {
  text-transform: uppercase
}

.lowercase {
  text-transform: lowercase
}

.capitalize {
  text-transform: capitalize
}

.underline {
  text-decoration: underline !important
}

.center {
  text-align: center !important
}

.right {
  text-align: right !important
}

.left {
  text-align: left !important
}

.justify {
  text-align: justify !important;
}

.middle {
  vertical-align: middle !important
}

.pointer {
  cursor: pointer
}

.curDefault {
  cursor: default;
}

.auto {
  width: auto !important
}

.w100 {
  width: 100% !important
}

.w50 {
  width: 50% !important
}

.w80 {
  width: 80% !important
}

.w40 {
  width: 40% !important
}

.w35 {
  width: 35% !important
}

.w25 {
  width: 25% !important
}

.w49 {
  width: 49% !important
}

/*For those elements with a twee bit border/margin/pad*/
.small {
  font-size: 10px
}

.notopmarg {
  margin-top: 0 !important
}

.topmarg2 {
  margin-top: 2px
}

.topmarg6 {
  margin-top: 6px
}

.margin_top {
  margin-top: 12px !important
}

.dim {
  zoom: 1;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.shadow {
  -moz-box-shadow: 1px 1px 6px 3px rgba(75, 75, 75, 0.5);
  -webkit-box-shadow: 1px 1px 6px 3px rgba(75, 75, 75, 0.5);
  box-shadow: 1px 1px 6px 3px rgba(75, 75, 75, 0.5);
}

.divider {
  margin-top: 12px;
  border-top: solid 1px #e7e7e7;
}

.nomargin {
  margin: 0 !important
}
.marginLR100 {
  margin: 0 100px;
}
.nopad {
  padding: 0 !important
}

.nopad_left {
  padding-left: 0 !important
}

.nopad_right {
  padding-right: 0 !important
}

.nopad_top {
  padding-top: 0 !important;
}

.nopad_bottom {
  padding-bottom: 0 !important;
}

.rounded {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.negative_top_margin {
  margin-top: -12px;
}

.negative_top_margin_sm {
  margin-top: -6px;
}

.negative_top_margin_lg {
  margin-top: -24px;
}

.negative_left_margin {
  margin-left: -20px;
}

.negative_left_margin_3 {
  margin-left: -3px;
}

.nobdrtop {
  border-top: none;
}

.rounded_top {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.line_top {
  border-top: solid 1px #ccc
}

.gradient_brand {
  background: #c00;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.23, #af0c0c), color-stop(0.62, #bf0f0f), color-stop(0.81, #c90909));
  background-image: -moz-linear-gradient(center bottom, #af0c0c 23%, #bf0f0f 62%, #c90909 81%);
  background-image: linear-gradient(center bottom, #af0c0c 23%, #bf0f0f 62%, #c90909 81%);

  a:link,
  a:visited,
  a:active {
    color: $white;
  }
}

.b4 {
  background: #D7D7D7 !important;
  border-bottom: 1px solid #fff;
}

#container .first {
  background-image: none;
  margin-left: 0;
}

#container .rv .first {
  border-top: none
}

.alt {
  background-color: #eee
}

.odd,
.white_bg {
  background-color: $white;
}

.shaded {
  background-color: #f6f6f6
}

.brandColor {
  color: #cc0000
}

.brandColor_pp2 {
  color: #000
}

.brandColor_pp3 {
  color: $white
}

.brandColor_sp1 {
  color: $blue
}

.brandColor_sp2 {
  color: #77B800
}

.brandColor_sp3 {
  color: #F3AA00
}

.brandColor_tp1 {
  color: #872B93
}

.brandColor_tp2 {
  color: $black
}

.brandColor_np1 {
  color: #8B8078
}

.brandColor_np2 {
  color: #666
}

.brandEm {
  color: #ee9200
}

.grey_txt {
  color: $gray;
}

.light_grey_txt {
  color: $grayLight;
}

.bg_light_gray {
  background-color: $grayLight
}
.red_txt {
  color: $red;
}

.linkColor {
  color: #026dcf !important
}

.strike {
  text-decoration: line-through
}

.notify {
  color: #026dcf;
  font-weight: bold;
}

.dot_bottom {
  border-bottom: 1px dotted #ccc
}

.dot_top {
  border-top: 1px dotted #ccc
}

.dashed_top {
  border-top: 1px dashed #ccc
}

.dot_left {
  background: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/misc_vertical_dots.png) repeat-y 0 0
}

.line_left {
  background: transparent url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/new/arrows.png) no-repeat scroll 0 -1683px;
  padding-left: 7px;
  padding-right: 7px;
}

.line_bottom {
  border-bottom: 1px solid #E5E8EB
}

.tac {
  text-align: center;
  font-weight: bold;
  padding: 10px;
}

.tar {
  text-align: right
}

.visible {
  visibility: visible !important;
}

.novis,
.vishid {
  visibility: hidden
}

.trans30 {
  opacity: 0.3;
  filter: alpha(opacity=50);
}

.opaque {
  opacity: 0;
  filter: alpha(opacity=0);
}

//TODO TRW: 7/22Move to forms.scss. The SCSS isn't compiling variabls in forms.scss for some reason, need to figure that out and move this
input.styled_checkbox.disabled + .styled_checkbox_label:after,
input.styled_checkbox:disabled + .styled_checkbox_label:after,
input.styled_radio.disabled + .styled_radio_label:after,
input.styled_radio:disabled + .styled_radio_label:after,
input.disabled {
  background-color: lighten($grayLight, 1%);
  border-color: lighten($gray, 5%);
  color: lighten($gray, 20%);
  pointer-events: none;
}

.selected1 {
  background-position: 100% 0px !important
}

.selected2 {
  background-position: 100% -42px !important
}

.selected3 {
  background-position: 100% -80px !important
}

.p6 {
  padding: 6px;
}

.ptb6 {
  padding: 6px 0
}

.pb6 {
  padding-bottom: 6px
}

.pb12,
.ptb12 {
  padding-bottom: $commonPadding*3 !important
}

.pt12,
.ptb12 {
  padding-top: $commonPadding*3
}

.ptb62 {
  padding-top: 62px;
  padding-bottom: 62px;
}

.pt20{
  padding-top: 20px;
}

.p12,
.iContent {
  padding: $commonPadding*3
}

.pl6 {
  padding-left: 6px
}

.pl8 {
  padding-left: $commonPadding*2
}

.pl12 {
  padding-left: $commonPadding*3
}

.pl24 {
  padding-left: $commonPadding*6
}

.pl32 {
  padding-left: $commonPadding*8
}

.pr12 {
  padding-right: $commonPadding*3
}

.pr24 {
  padding-right: $commonPadding*6
}

.pr82{
  padding-right: 82px;
}

.pr62{
  padding-right: 62px;
}

.pr18{
  padding-right: 18px;
}
.pr57{
  padding-right: 57px;
}
.pr4r-i {
  padding-right: 4rem !important;
}
.assistance {
  background-color: #1e5a99;
  width: 87%;
  margin-left:43px;
  margin-top:10px;
  padding:8px;
}

.assistance_content {
  padding: 8px 8px 8px 35px;
  font-size: 19px;
  font-weight: bold;
  margin-left:30px;
  margin-top: -50px;
}



.info_circle_icon_fill {
  fill: #fff;
  margin: 0px 0px 0px -29px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.hspace_right {
  margin-right: 12px !important
}

.hspace_right_lg {
  margin-right: 16px !important
}

.hspace_right_xlg {
  margin-right: 24px !important
}

.hspace_left {
  margin-left: 12px !important
}

.hspace_left_lg {
  margin-left: $commonPadding*6 !important
}

.vspace_top_lg {
  margin-top: 24px !important
}

.vspace_top {
  margin-top: 12px !important
}

.vspace_top_sm {
  margin-top: 4px !important
}

.vspace_top_md {
  margin-top: 8px !important
}

.vspace_bottom_lg {
  margin-bottom: 24px !important
}

.vspace_bottom_md {
  margin-bottom: 10px !important
}

.vspace_bottom {
  margin-bottom: 12px !important
}

.vspace_bottom_sm {
  margin-bottom: 6px !important
}

.font_15 {
  font-size: 15px
}

.push-right {
  margin-right: 6px
}

.push-right-lg {
  margin-right: 12px
}

.push-left {
  margin-left: 6px !important;
}

.push-left-lg {
  margin-left: 12px !important;
}

.box_pad {
  padding: 10px
}

p.normal {
  margin: 16px 0px
}

.btm_marg {
  margin-bottom: 12px
}

.padt_10 {
  padding-top: 10px
}

.padb_10 {
  padding-bottom: 10px
}

.padb_34 {
  padding-bottom: 34px;
}

.padt_34 {
  padding-top: 34px;
}

.line_list {
  float: left;
  clear: none;
  width: auto;
}

.column_list {
  float: left;
  clear: left;
  width: auto;
}

.red {
  color: #f00 !important
}

.separator {
  border-top: 1px solid #d8d4e6;
  padding-top: 12px;
}

.blg {
  border-left: solid 1px #ccc;
}

.border_right {
  border-right: 1px solid $borderGray;
}

.no_bullet {
  list-style: none !important
}

.bullet li {
  list-style: disc !important;
  margin-left: 1.2em;
  zoom: 1;
}

.break {
  clear: left !important
}

.strong {
  font-weight: bold
}

.square {
  list-style-type: square;
  color: #cc0000;
  padding-left: 1.2em;
}

.break_txt {
  word-wrap: break-word;
  word-break: break-all;
}

.no_break_txt {
  word-wrap: normal;
  word-break: normal;
}

.highlight {
  background-color: #ff0
}

.xm_lh {
  line-height: 20px
}

.normal_lh {
  line-height: normal !important
}

.greenColor {
  color: green
}

/* svg stuff */
.svg_18x18,
.svg_20x20,
.svg_12x12,
.svg_15x15,
.svg_36x36,
.svg_10x10,
.svg_22x22,
.svg_50x50,
.svg_225x60 {
  display: inline-block !important;
  vertical-align: middle;
}

.svg_10x10 {
  width: 10px !important;
  height: 10px !important;
}

.svg_12x12 {
  width: 12px !important;
  height: 12px !important;
}

.svg_15x15 {
  width: 15px !important;
  height: 15px !important;
}

.svg_18x18 {
  width: 18px !important;
  height: 18px !important;
}

.svg_20x20 {
  width: 20px !important;
  height: 20px !important;
}

.svg_22x22 {
  width: 22px !important;
  height: 22px !important;
}

.svg_30x30, .svg_30x30 svg {
  width: 30px !important;
  height: 30px !important;
}

.svg_36x36 {
  width: 36px;
  height: 36px;
}

.svg_50x50 {
  width: 50px !important;
  height: 50px !important;
}

.svg_225x60 {
  width: 225px !important;
  height: 60px !important;
}

.svg_18x18 > svg,
.svg_20x20 > svg,
.svg_36x36 > svg,
.svg_22x22 > svg,
.svg_50x50 > svg,
.svg_225x60 > svg {
  width: 100%;
  vertical-align: top;
}

.info_circle_icon_fill {
  fill: #fff;
}

.info_circle_icon {
  width: 40px;
  height: 40px;
  margin: 4px;
}

.svg_hoverable > svg:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  opacity: 0.7;
}

.svg_fill_sub {
  fill: #72777C
}

.svg_fill_blue {
  fill: #1e5a99;

  path {
    fill: #1e5a99;
  }
}

.svg_fill_black {
  fill: $black;

  path {
    fill: $black;
  }
}
.svg_fill_yellow {
  fill: #ffb600;

  path {
    fill: #ffb600;
  }
}

.svg_fill_white {
  fill: #fff;

  path {
    fill: #fff;
  }
}

.svg_fill_red {
  fill: #ce0000;

  path {
    fill: #ce0000;
  }
}

.svg_fill_green {
  fill: #90B50F;

  path {
    fill: #90B50F;
  }
}

.rotate_180 > svg {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

img.rotate_180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.svg_store_locator .tear {
  fill: #72777C;
}

.svg_store_locator .dot {
  fill: #fff;
}

.no_show {
  text-indent: -9999px;
  font-size: 0;
  line-height: 0;
}

.bg_none {
  background-image: none !important;
}

.plus_icon {
  border: 2px $blue solid;
  border-radius: 50%;
  color: $blue;
  display: inline-block;
  font-weight: $fontWeightBold;
  line-height: $baseFontSize - 6;
  padding: 4px;

  @include font-size($baseFontSize + 2);

  &:after {
    content: '+';
  }
}

/****************
Style guide 7.2 helper styles (class names adopted from style guide names)
TO BE MOVED TO SPECIFIC FILES WHEN WE GET TEHRE (ex: adaptive_typeography.css, forms.css)
*****************/
.hero_text {
  font-size: 80px !important;
}

.heading_xlg, /*h1 large*/
.price_text {
  font-size: 30px !important;
}

/*12/11/2015 TRW: this seems huge right? */
.heading_lg {
  font-size: 26px !important;
}

/*h1 medium*/
.heading_md {
  font-size: 24px !important;
}

/*h2 stricly, h3*/
.heading_sm {
  font-size: 22px !important;
}

/*h1 small*/
.lg_txt,
.body_text {
  font-size: 16px !important;
}

.savings_text {
  font-size: 14px !important;
}

/*Savings/Promo text*/
.small_text {
  font-size: 13px !important;
}

.tiny_text {
  font-size: 12px !important;
}

.sub_text,
.strikethrough_text {
  font-size: 12px !important;
}

.strikethrough_text {
  text-decoration: line-through;
}

.micro_text {
  font-size: 11px !important;
}

.sm_txt {
  font-size: 10px !important;
}

.xm_txt {
  font-size: 12px !important;
}

.md_txt {
  font-size: 14px !important;
}

.nomargin_left {
  margin-left: 0 !important;
}

.nomargin_right {
  margin-right: 0 !important;
}

.valign_btm {
  vertical-align: bottom !important;
}

.valign_top {
  vertical-align: top !important;
}

.valign_txt_bottom {
  vertical-align: text-bottom;
}
.border_bottom_none {
  border-bottom: 0 solid #fff !important;
}

.margin_top_xl {
  margin-top: 30px;
}

.oflow_hidden {
  overflow: hidden;
}

.overlay_configurator {
  background-color: #000000;
  opacity: 0.8;
  position: fixed;
  z-index: 200;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
}

.configurator_frame {
  position: relative;
  z-index: 5;
}

.negative_margin_lg {
  margin-top: -24px;
}

.negative_margin_sm {
  margin-top: -3px;
}

.font18 {
  font-size: 18px;
}

.dtb {
  display: table;
}

.display_tb_cell {
  display: table-cell;
}

.w90 {
  width: 90%;
}

.w45 {
  width: 45%;
}

.w50 {
  width: 50%;
}


.nobg {
  background: none !important;
}

.marginLR100 {
  margin: 0 100px;
}

.bold_redesign {
    font-weight: 700 !important;
}

.toggle-od-password-visibility, .toggle-od-password-visibility-confirm,
.toggle-od-forgot-password-visibility, .toggle-od-confirm-forgot-password-visibility {
  background: none !important;
  color: #54595e !important;
  display: inline-block;
  font-weight: 300;
  float: right;
  position: absolute;
  margin-left: -3rem;
  margin-top: 12px;
  z-index: 1000;
}

.toggle-od-forgot-login-pswd-visibility{
  position: absolute;
  top: 0.75rem;
  right: 0;
  background: none !important;
  color: #54595e !important;
  font-weight: 300;
  z-index: 1000;
}

.toggle-od-reset-old-password-visibility, .toggle-od-reset-new-password-visibility,
.toggle-od-reset-confirm-password-visibility, .toggle-od-current-password-visibility {
  background: none!important;
  color: #54595e!important;
  font-weight: 300;
  font-size: 12px;
  position: absolute;
  top: 0.65rem;
  right: 1rem;
}

.toggle-od-mobile-new-password-visibility, .toggle-od-mobile-new-password-confirm-visibility {
  background: none!important;
  color: #54595e!important;
  font-weight: 300;
  font-size: 12px;
  position: absolute;
  right: 3.25rem;
  top: 1.75rem;
}

.od-msite-pswd-list{
  position: relative;
}