/* GENERAL
============================================================================= */
/* remove title */
.entry-header { display: none; }
#dbq-step-tracker { text-align:center; }
.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}
.step-block li span,
.step-block li {
    cursor: pointer;
}

/* STEP 1
============================================================================= */
.db-details {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}
.db-details.ng-hide {
  opacity:0;
}
.db-details.ng-show {
  opacity:1;
}
.tabs-list-title{
  min-height:40px  
}
/* 7 columns */
@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

@media (min-width: 768px){
    .db-details {
        display: none;
    }
}
@media (max-width: 767px){

    .page-header {
        border-bottom: 1px solid black;
    }
    .page-debris-step div.step-block {
        margin: 10px 0 10px;
    }
    .page-debris-step div.page-debris-step_title h2 {
        font-size: 1em;
    }
    .tabs-list-inner.active + .tabs-list-mobile,
    .tabs-list-mobile.active {
        /* Placeholder: add "selected boxes number circle" instead */
        background-color: #0099cc;
        color: #ffffff;
    }
    .page-debris-step_tabs .tabs-list > li {
        margin-left: 0;
        margin-right: 0;
        border: none !important;
        border-bottom: 1px solid #494949 !important;
    }
    .page-debris-step_tabs .tabs-list > li:first-child {
        border-top: 2px solid black !important;
    }
    .page-debris-step_tabs li div.tabs-list-mobile {
        width: 355px;
        /*
        width: 80%;
        */
        margin: 0 auto;
    }
    .page-debris-step_tabs li div.tabs-list-mobile .tabs-list-mobile_info {
        margin-left: 130px;
    }
    .tabs-list-mobile_info .info-title {
        font-size: 1.1em;
        text-transform: uppercase;
    }
    .tabs-list-mobile_info .info-desc span {
        font-size: 1em;
        color: #5A5A5A;
        text-transform: uppercase;
    }

    .db-details {
        text-align: left;
        padding: 0 8%;
    }
    .mobile-info-left {
        float: left;
    }
    .mobile-info-right {
        float: right;
    }
    .mobile-info-right {
        margin: 0;
        padding-top: 25px;
    }
    .mobile-info-right .selected-count {
        height: 35px;
        width: 35px;
        padding-top: 2px;
        text-align: center;
        color: white;
        font-size: 20px;
        /* Background image circle goes here in place of styling below */
        border: 1px solid black;
        background-color: #0099cc;
    }

}

/* STEP 2
============================================================================= */
.rect-select-box-group {
	margin: auto 8%;
}
.rect-select-box-group label {
	text-align: center;
}
.rect-select-box {
    height: 58px;
    line-height: 54px;
    padding: 2px;
    text-align: center;
    background: #ffffff; /* Old browsers */
    background: linear-gradient(to bottom, #ffffff 50%, #0099cc 50%);
    background-size: 100% 200%;
    background-position:left top;
    border: 1px solid #000000;
    transition:all .33s ease;
    margin: 0 1.66%;
}
/* white border */
.rect-select-box:before {
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border: 2px solid #ffffff;
}
.rect-select-box:hover {
    background-position:left bottom;
}


/* ANIMATION STYLINGS
============================================================================= */
#dbq-form            { position:relative; min-height:300px; overflow:hidden; padding:30px; }
#form-views             { width:auto; }

/* basic styling for entering and leaving */
/* left and right added to ensure full width */
#form-views.ng-enter,
#form-views.ng-leave      { position:absolute; left:30px; right:30px;
    transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease; 
}

/* enter animation */
#form-views.ng-enter            { 
    -webkit-animation:slideInRight 0.5s both ease;
    -moz-animation:slideInRight 0.5s both ease;
    animation:slideInRight 0.5s both ease; 
}

/* leave animation */
#form-views.ng-leave            { 
    -webkit-animation:slideOutLeft 0.5s both ease;
    -moz-animation:slideOutLeft 0.5s both ease;
    animation:slideOutLeft 0.5s both ease;   
}

/* ANIMATIONS
============================================================================= */
/* slide out to the left */
@keyframes slideOutLeft {
    to      { transform: translateX(-200%); }
}
@-moz-keyframes slideOutLeft {  
    to      { -moz-transform: translateX(-200%); }
}
@-webkit-keyframes slideOutLeft {
    to      { -webkit-transform: translateX(-200%); }
}

/* slide in from the right */
@keyframes slideInRight {
    from    { transform:translateX(200%); }
    to      { transform: translateX(0); }
}
@-moz-keyframes slideInRight {
    from    { -moz-transform:translateX(200%); }
    to      { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
    from    { -webkit-transform:translateX(200%); }
    to      { -webkit-transform: translateX(0); }
}

/* slide down from the top */
@keyframes slideDownTop {
    from    { transform:translateY(200%); }
    to      { transform: translateY(0); }
}
@-moz-keyframes slideDownTop {
    from    { -moz-transform:translateY(200%); }
    to      { -moz-transform: translateY(0); }
}
@-webkit-keyframes slideDownTop {
    from    { -webkit-transform:translateY(200%); }
    to      { -webkit-transform: translateY(0); }
}

.mobile-qty-box {
	width: 100px;
	height: 60px;
}