/* Colors: blue - #089BAB | orange - #ff9922 | purple = #881199 | green - #33EA06 | red - #FF5222 */
/* Fonts: Nunito, NunitoExtraBold, Raleway */

.group { content: ""; display: table; clear: both; }

/* !buttons */
.btn { border-radius: 5px; transition: all 0.65s ease; }
.btn-orange { background-color: #ff9922; color: #fff; }
.btn-orange:hover, .btn-orange:active, .btn-orange:visited { color: #fff; }

.button-connect { color: #33EA06; }
.button-disconnect { color: #FF5222; }
.button-calibrate { color: #881199; }
.button-battery { color: #33EA06; }
.button-battery .fa-battery-half { color: #ff9922; }
.button-battery .fa-battery-quarter { color: #FF5222; }

/* !toggle switch */
.switch { display: inline-block; height: 34px; position: relative; width: 60px; }
.switch input { display:none; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cacaca; -webkit-transition: .4s; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: #33EA06; }
input:focus + .slider { box-shadow: 0 0 1px #33EA06; }
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

/* !bouncing effect for icons */
.bounce { display: inline-block; position: relative; -moz-animation: bounce 1s infinite linear; -o-animation: bounce 1s infinite linear; -webkit-animation: bounce 1s infinite linear; animation: bounce 1s infinite linear; }

/* !core */
body { image-rendering: -webkit-optimize-contrast; background-color: #881199; color: #535353; font-family: 'Nunito', Helvetica, Arial, sans-serif; font-size: 16px; overflow: hidden; overscroll-behavior-x: none; }
h1 { font-family: 'Raleway', Helvetica, Arial, sans-serif; font-size: 28px; text-transform: uppercase; margin-top: 0; padding-top: 0; }

/* !header */
#main-header { background-color: #fff; background-image: url("/source/ccaa5648ef6dc1a15e1b8f32ade24159/pattern-blue-circuitry.svg"); background-position: top center; background-repeat: repeat; background-size: 561px 538px; padding: 12px 20px; position: relative; }
#main-header .col-xs-12 { padding-left: 0; text-align: center; }
#birdbrain-logo { max-width: 255px; width: 80%; }

/* !indicators */
#indicators { font-size: 14px; position: absolute; right: 20px; width: 50px; top: 12px; }
#indicators > div { color: #089BAB; }
#indicator-wifi { margin-bottom: 14px; }
#indicator-bluetooth .icon { left: 2px; }
#indicators .dot { color: #FF5222; left: 19px; top: 10px; font-size: 11px; transition: all 1s ease; }
#indicators .indicator-on .dot { color: #33EA06; }
#indicators .dot.dot-spin { color: #FF5222; font-size: 22px; left: -22px; top: 0; }
#indicator-bluetooth.indicator-on .dot-spin { display: none; }

/* programming language label */
#programmingLang { font-size: 14px; position: absolute; left: 20px; top: 12px; }

/* !finder + button */
#finder {display: none; background-color: #089BAB; color: #fff; padding-top: 2em; padding-bottom: 2em; transition-delay: 0.5s; transition: all 1s ease; height: auto; }
#find-button { font-family: 'Raleway', Helvetica, Arial, sans-serif; font-size: 28px; padding: 13px 40px 12px 40px; line-height: 28px; text-transform: uppercase; text-align: center; vertical-align: text-bottom; }
#find-button span { vertical-align: text-bottom; }

/* !connected/programming section */
#connected { background-color: #881199; color: #fff; display: block; padding-top: 2em; padding-bottom: 2em; }

/* !robot list */
.robot-list { background-color: #fff; border-radius: 5px; color: #535353; overflow: hidden; margin: 0.5em auto 2em auto; max-width: 720px; width: 98%; display: table; padding-left: 10px; padding-right: 10px; }
.robot-list .robot-item:nth-child(even) { background-color: #F2F2F2; }

/* !robot items */
.robot-item { font-size: 24px; margin: 0; display: table-row; }
.robot-item > div { padding: 8px 10px; display: table-cell; line-height: 30px; vertical-align: middle; float: none; }
.robot-item .img { font-size: 22px; line-height: 22px; font-weight: 800; text-align: left; width: 16% !important; padding-right: 5px; }
.robot-item .img img { height: 32px; width: auto; }

.robot-item .name { padding-top: 4px; padding-left: 5px; font-size: 19px; line-height: 19px; width: 54% !important; }
.robot-item .buttons { font-size: 9px; line-height: 9px; text-align: right; width: 30% !important; padding-left: 5px; padding-right: 0; }
.robot-item .buttons > .button { margin-left: 6px; }
.robot-item .buttons > .button:first-child { margin-left: 0; }
.robot-item .buttons .button-battery { margin-right: 11px; }
.robot-item .buttons > .button .fa-stack-1x.fa-compass { top: -0.5px; }

/* !found robots section */
#robots-found { margin-top: 1.25em; margin-bottom: 0; max-width: 480px; width: 98%; max-height: 245px; overflow: auto; }

#robots-found .robot-item { font-size: 18px; }
#robots-found .robot-item .name { line-height: 18px; color: #535353; }
#robots-found .img {  text-align: center; }
#robots-found .img img { height: 25px; }
#robots-found .buttons { font-size: 6px; padding: 0px 10px 0px 10px; }

/* !toggle switch section */
#online-toggle { margin-top: 0.5em; vertical-align: middle; }
#online-toggle > * { vertical-align: middle; }
#online-toggle i { font-size: 36px; margin-left: 6px; }

/* !programming buttons section */
#programming-buttons { margin-top: 0.5em; }
#programming-buttons a.btn img { height: 50px; width: auto; }
#programming-buttons a.btn { width: 175px; }

.modal { background-color: rgba(255,255,255, 0.85); display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 100; }

.modal .container { background-color: rgba(0,0,0,0); border-radius: 10px; overflow: hidden; padding:0; position: relative; max-width: 800px; }

.modal h2 { background-color: #881199; color: #fff; font-size: 36px; margin: 0; padding: 18px 0 18px 14px; text-align: center; }
.modal h4 { color: #fff; font-size: 20px; margin: 0; text-align: center; line-height: 24px; height: 24px; }
.modal a.close { color: #fff; float: right; opacity: 1; font-size: 28px; opacity: 1; padding: 24px; }
.modal .animation { position: relative;  }
.modal .status { opacity: 0; background-color: rgba(255,255,255, 0.75); z-index: 200; top: 0; bottom: 0; left: 0; right: 0; text-align: center; position: absolute; transition: all 1s ease; }
.modal .status.status-success, #calibrate-modal .status.status-fail { opacity: 1; }
.modal .status.status-success i.fa-times { display: none; }
.modal .status.status-fail i.fa-check { display: none; }
.modal .animation i { font-size: 160px; position: absolute; top: auto; left: 0; right: 0; }
.modal .animation i.fa-check { color: #33EA06; }
.modal .animation i.fa-times { color: #FF5222; }

@media (max-width: 985px) {
	.robot-item .img { text-align: center; }
	.robot-item .buttons { text-align: center; }
}

/* !smaller screens */
@media (max-width: 480px) {
	#main-header .col-xs-12 { padding-left: 15px; text-align: left; }
}

/* !bounce animation */
@-webkit-keyframes bounce {
    0% { top: 0; }
    20% { top: -0.1em; }
    40% { top: -0.2em; }
    60% { top: 0; }
    100% { top: 0; }
}
@-moz-keyframes bounce {
    0% { top: 0; }
    20% { top: -0.1em; }
    40% { top: -0.2em; }
    60% { top: 0; }
    100% { top: 0; }
}
@-o-keyframes bounce {
    0% { top: 0; }
    20% { top: -0.1em; }
    40% { top: -0.2em; }
    60% { top: 0; }
    100% { top: 0; }
}
@-ms-keyframes bounce {
    0% { top: 0; }
    20% { top: -0.1em; }
    40% { top: -0.2em; }
    60% { top: 0; }
    100% { top: 0; }
}
@keyframes bounce {
    0% { top: 0; }
    20% { top: -0.1em; }
    40% { top: -0.2em; }
    60% { top: 0; }
    100% { top: 0; }
}

/* Snap iframe and collapsed robot info */
#connected-expanded { background-color: #881199; color: #fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
#connected-expanded .container { width: 100%; padding-top: 6px; }
#logo-section { padding-left: 24px; }
#hummingbird-only-logo { margin-top: 4px; height: 54px; width: auto; }
#connected-expanded #robots-connected-snap.robot-list { font-size: 13px; margin-bottom: 1em; }
#connected-expanded #robots-connected-snap.robot-list .img img { height: 24px; }
#btn-expand, #btn-collapse { margin-top: 4px; font-size: 32px; padding: 9px 15px 9px 16px; line-height: 32px; text-align: center; }
#btn-expand i, #btn-collapse i { vertical-align: bottom; }
#btn-expand-section, #btn-collapse-section { padding-right: 20px; text-align: right; }
/*#connected-expanded iframe { width: 100%; height: 95vh; }*/
#connected-expanded iframe { width: 100%; height: 88vh; }

.logo-brython { height: 27px; width: auto; }
.logo-snap { height: 40px; width: auto; }
.logo-legacy { height: 70px; width: auto; max-width: 100%; }
.centered-div { height: 80px; padding: 10px; }