/*
 * Author: Ryan Small
 * Subsidiary: LGEAI
 * Project: TV Device Connection Guide
 * Date: Jan. 14, 2017
 */

/***************/
/**  General  **/
/***************/
.bold {font-weight: bold;}
.section-title.small {padding: 2rem; border: 1px solid #666; background: #f5f5f5;}

.step-title {padding: 30px; text-align: center;}
.step-title {padding: .5em; margin-bottom: 10px;}
.step-title.dark-border {border: none; background: #989898; margin-top: .5em; margin-bottom: 1px; color: #fff;}
.step-title.result.full-border {border: 1px solid #c5c5c5;}
.edit-btn.done-on {display: none; margin-left: 10px;} /* !important*/
.done .result .edit-btn.done-on {display: inline-block; margin-left: 10px;} /* !important*/
.border-section {border: 1px solid #c5c5c5; box-shadow: 0 0 10px 0 #c5c5c5; padding: 1em 0; margin-bottom: 1em;}
.intro-section {padding-top: 2em;}
.done {background: #eee;}
.done .step-title {opacity: .5; padding: 0;}
.done-on, .done .step.start.done-off, .done .done-off, .step.ai, .step-nav, #step02, #step03, .done.na .result .edit-btn {display: none;}
.done .done-on, .done .done-show {display: block;}
.done span.done-on {display: inline;}

.next {display: block; float: right; margin-right: 1em;}

.device-item strong {color: #666; font-weight: normal; font-size: 2rem; line-height: .5em;}


/***************/
/**  Step 1   **/
/***************/
#step01.done > .done-off {display: none;}
.choose-devices, .chosen-devices {display: flex; flex-flow: row wrap; margin-bottom: 2rem; background: #eee;}
.choose-devices img, .chosen-devices img {max-width: 200px;}
.choose-devices {padding: 2rem;}
.choose-devices .device-item {transition: all .3s ease-in-out; flex-basis: 22%; border: 10px solid #999; text-align: center; cursor: pointer; padding: 1rem; border-radius: 1pc; margin: 1.5rem;}
.choose-devices .device-item:hover, .choose-devices .device-item:focus, .choose-devices .device-item.active {border-color: #a50034; text-decoration: none;}
.choose-devices .device-item.active {background: #a50034;}
.choose-devices .device-item.active strong {color: #fff;}


/***************/
/**  Step 2   **/
/***************/
#step02.active {display: block;}
#step02.done .step-title.result {display: block;}


/***************/
/**  Step 3   **/
/***************/
#step03.active {display: block;}
.steps h3 {font-size: 1.3em;}

#step03 {padding: 1em;}
#step03 .steps .step > *:not(.step-title) {display: none;}

#step03.headset .steps .step:first-child > .headset {display: block;}
#step03.keyboard .steps .step:first-child > .keyboard {display: block;}
#step03.soundbar .steps .step:first-child > .soundbar {display: block;}
#step03.speaker .steps .step:first-child > .speaker {display: block;}

#step03.tv:not(.keyboard) .steps .step:nth-child(2) > .tv:not(.keyboard) {display: block;}
#step03.tv.keyboard .steps .step:nth-child(2) > .tv.keyboard {display: block;}
#step03.android .steps .step:nth-child(2) > .android {display: block;}
#step03.ios .steps .step:nth-child(2) > .ios {display: block;}
#step03.pc .steps .step:nth-child(2) > .pc {display: block;}
#step03.mac .steps .step:nth-child(2) > .mac {display: block;}

#step03 .steps .step:nth-child(3) > *:not(.step-title) > * {display: none;}

#step03.headset .steps .step:nth-child(3) > .headset {display: block;}
#step03.keyboard .steps .step:nth-child(3) > .keyboard {display: block;}
#step03.soundbar .steps .step:nth-child(3) > .soundbar {display: block;}
#step03.speaker .steps .step:nth-child(3) > .speaker {display: block;}

#step03.tv .steps .step:nth-child(3) > .headset .tv {display: block;}
#step03.android .steps .step:nth-child(3) > .headset .android {display: block;}
#step03.ios .steps .step:nth-child(3) > .headset .ios {display: block;}
#step03.pc .steps .step:nth-child(3) > .headset .pc {display: block;}
#step03.mac .steps .step:nth-child(3) > .headset .mac {display: block;}
#step03.tv .steps .step:nth-child(3) > .keyboard .tv {display: block;}
#step03.android .steps .step:nth-child(3) > .keyboard .android {display: block;}
#step03.ios .steps .step:nth-child(3) > .keyboard .ios {display: block;}
#step03.pc .steps .step:nth-child(3) > .keyboard .pc {display: block;}
#step03.mac .steps .step:nth-child(3) > .keyboard .mac {display: block;}


#step03.pc .steps .step:nth-child(n+4) > .pc {display: block;}
#step03.mac .steps .step:nth-child(n+4) > .mac {display: block;}

.show-setup {position: relative;}
.step.ai {padding: 1em; border-right: none; border-left: none;}
.step.start.done {padding: 0;}
.step-body {text-align: left; padding-top: 15px;}
.steps .step-body {width: 45%; float: right;}
.steps .other .step-body {width: 100%;}

.step-nav {padding: 2em .5em; display: block; position: absolute; width: 100%;}
.step-nav.top {display: none;}
.step-nav.bottom {display: block; top: 0;}
.prev-step {float: left;}
.next-step {float: right;}
.btn.inactive {opacity: .3;}

.other .step-body {display: none; border: 1px solid #c5c5c5; border-radius: 7px; padding: 1em; margin: 10px 0;}
.other .step-body.active {display: block !important;}
.other .step-body > div {padding: 0 1em .5em 1em;}

.software-info-item > a {display: block; background: #c5c5c5; padding: 1em; text-align: center;}
.software-info-item > a > .img {float: left;}
.software-info-item > a > .box {float: left; text-align: left; padding-left: .5em;}


/*  Animation Area  */
.step-images {width: 50%; float: left;}
.step-images > * {max-width: 100%; box-shadow: 0 0 2px 2px #999; margin: 1.2em;}
.step-images > .canvas-wrapper {margin: 0;}
.canvas-wrapper {box-shadow: none;}
.canvas-wrapper canvas {box-shadow: 0 0 2px 2px #999;}

.canvas-wrapper {position: relative;}
.canvas-loading {position: absolute; top: 40%; left: 40%;}
.canvas-loading.done {display: none;}

/*  From In-Page  */		
.steps .step .multi-box {flex-flow: row wrap;}
.steps .step .multi-box > * {flex-basis: 100%;}

/*  Error Checking  */
.ai-error-message, .ai-comp-message {display: none;background: #a50034; border: 2px solid #000;padding: 10px;margin: 5px;color: #fff;font-size: 2rem;margin: 0 auto;}
.ai-error-message.active, .ai-comp-message.active {display: block;}

/*  JS Running  */
.waiting-for-js {display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.7); z-index: 999;}
.waiting-for-js > img {position: fixed; top: 45%; left: 45%; width: 10%; height: 10%; z-index: 1000;}






/***************/
/***************/
/**  Mobile   **/
/***************/
/***************/

/*  MOBILE STYLES  */
.is-mobile .border-section {background: #fff;}
.is-mobile .border-section.done {background: #eee; padding: 1em 1em 0;}
.is-mobile .intro-section {padding-top: .5em;}
.is-mobile .step-title {font-size: 1.5em;}
.is-mobile .section-title {display: none;}
.is-mobile #step01 {margin-top: 0;}
.is-mobile .choose-devices {display: flex; flex-flow: row wrap; padding: .5rem;}
.is-mobile .choose-devices > * {flex-basis: 45%; margin: .8rem; padding: .5rem; border-width: 5px; line-height: 1em;}
.is-mobile .choose-devices img, .is-mobile .chosen-devices img {max-width: 100%;}
.is-mobile .chosen-devices .device-image-block {display: none;}
.is-mobile .device-cables-holder {flex-flow: row wrap;}
.is-mobile .device-cables-holder > * {flex-basis: 100%;}
.is-mobile .cable-item {flex-basis: 48%; margin: .5rem auto; padding-left: 40px; line-height: 1em; font-size: 1.5rem;}
.is-mobile .cable-item:not(.active):hover {border-color: #999;}
.is-mobile .no-cables .cable-item img {top: 5%; left: 5%; width: 15%;}
.is-mobile .one .cable-item {flex-basis: 90%;}
.is-mobile .next {display: block; float: none; width: 50%; margin: 5px auto; font-size: 1.2em;}
.is-mobile .chosen-devices .device-item {padding: .5em; border: none; background: transparent;}
.is-mobile .device-cables-holder .cable-list {padding: .5em; padding-top: 0;}
.is-mobile .device-item strong {font-size: 1.8rem;}
.is-mobile .device-image-block {width: 70%; margin: 0 auto;}
.is-mobile .chosen-devices .device-item strong {border-radius: 7px 7px 0 0; color: #666;}
.is-mobile .cable-list {padding: 0;}
.is-mobile .steps .step-body, .is-mobile .steps .step-images {width: 100%}
.is-mobile .step-nav {position: relative; padding: 0; display: flex; width: 100%;}
.is-mobile .step-nav > * {width: 100%; font-size: 1.1em; line-height: 2em; border-radius: 0; border-left: 2px solid #fff;}
.is-mobile .choose-devices .device-item:not(.active):hover {background: #eee; border-color: #999;}
.is-mobile .done .result .edit-btn.done-on {width: 20%; padding: 3px; margin: 5px auto; font-size: .8em; }
.is-mobile .done.na .result .edit-btn {display: none;}
.is-mobile .max-width-1400 {width: 95%;}
.is-mobile .multi-box > * {margin: .5em 0; border-radius: .2pc;}
.is-mobile .steps .multi-box > * {border: none;} 
.is-mobile .done .done-off {display: none;}
.is-mobile .step.ai {padding-top: 0;}

.is-mobile .step-images > * {margin: 0; margin-bottom: 1.2em;}

.center-btn {display: block; with: 100%; text-align: center;}