﻿.hidden { display: none; }
.searchbox-container input[type="search"] { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; text-decoration: none; }
.searchbox-container input,
.searchbox-container button { margin: 0; outline: 0; font-size: 1em; line-height: normal; font-family: Helvetica, Arial, sans-serif; font-style: normal; vertical-align: baseline; *vertical-align: middle; }
.searchbox-container input[placeholder],
.searchbox-container textarea[placeholder] { color: #999; }
.searchbox-container input::-webkit-input-placeholder { opacity: 0.7; }
.searchbox-container input:focus::-webkit-input-placeholder { opacity: 0.4; -webkit-transition: opacity .3s; }
.searchbox-container input:-ms-input-placeholder { opacity: 0.7; }
.searchbox-container input:focus:-ms-input-placeholder { opacity: 0.4; -ms-transition: opacity .3s; }
.searchbox-container input:-moz-placeholder, input::-moz-placeholder { opacity: 0.7; }
.searchbox-container input:focus:-moz-placeholder,
.searchbox-container input:focus::-moz-placeholder { opacity: 0.4; -moz-transition: opacity .3s; }
.searchbox-container button::-moz-focus-inner,
.searchbox-container input::-moz-focus-inner { border: 0; padding: 0; }
.searchbox-container .toggle-switch, .searchbox-container .options, .searchbox-container .button { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.searchbox-container label, .searchbox-container p span.infox { color: #888; }
.searchbox-container .lbl-ui { position: relative; display: block; }
.searchbox-container .lbl-text { text-transform: uppercase; margin-bottom: 5px; letter-spacing: 1px; font-size: 10px; display: block; color: #333; }
.searchbox-container .lbl-text.required:after { content: " *"; font-size: 15px; color: #e32; display: inline; position: relative; top: 4px; }
.searchbox-container .lbl-text.ext { margin-bottom: 10px; }
.searchbox-container span.lbl-text { margin: 0; }
.searchbox-container .lbl-text.tleft,
.searchbox-container .lbl-valign { display: block; padding-top: 14px; }
.searchbox-container .lbl-valign.long { padding-top: 40px; }
.searchbox-container .lbl-text.tleft.multi-line { padding-top: 0; }
.searchbox-container .lbl-text.tleft.trt { text-align: right; }
.searchbox-container .lbl-text.spacer { margin-bottom: 15px; }
.searchbox-container .option-group .goption,
.searchbox-container .toggle-group .gtoggle { margin-bottom: 8px; margin-right: 15px; display: inline-block; display: inline; zoom: 1; }
.searchbox-container .form-buttons section { margin: 0; }
.searchbox-container .append-icon,
.searchbox-container .append-icon.art { display: inline-block; vertical-align: top; position: relative; width: 100%; }
.searchbox-container .append-icon span { top: 0; left: 0; z-index: 1; width: 36px; height: 36px; color: inherit; line-height: 36px; position: absolute; text-align: center; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; pointer-events: none; }
.searchbox-container .append-icon span i { position: relative; font-size: 14px; }
.searchbox-container .append-icon.art span { left: auto; right: 0; }
.searchbox-container .append-icon .input,
.searchbox-container .append-icon.art .input { padding-right: 30px; padding-left: 10px; }
.searchbox-container .glink { color: #0093D6; }
/* begin form element styling */
.searchbox-container .input,
.searchbox-container .button,
.searchbox-container span.lbl-text { position: relative; display: -moz-inline-stack; display: inline-block; *display: inline; zoom: 1; }
.searchbox-container .input { width: 100%; vertical-align: top; }
.searchbox-container .input { height: 36px; color: #333; padding: 0 10px; background: #fff; border: 1px solid; border-color: #bbb; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.searchbox-container .input:focus { border-color: #6BACED; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.15), 0 0 8px rgba(82,168,236,.7); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.15), 0 0 8px rgba(82,168,236,.7); box-shadow: inset 0 1px 1px rgba(0,0,0,.15), 0 0 8px rgba(82,168,236,.7); }
.searchbox-container .search:after,
.searchbox-container .search:before { content: ''; position: absolute; z-index: 1; }
.searchbox-container input[type=search] { -webkit-appearance: textfield; }
.searchbox-container input[type="search"]::-webkit-search-decoration,
.searchbox-container input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.searchbox-container .search { position: relative; display: inline-block; width: 100%; }
.searchbox-container .search > .input { width: 100%; padding: 0 13px 0 30px; }
.searchbox-container .search:before { top: 13px; left: 10px; width: 6px; height: 6px; border: 2px solid #aaa; border-radius: 8px; }
.searchbox-container .search:after { top: 22px; left: 17px; width: 6px; height: 2px; background: #aaa; border-radius: 1px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-box-shadow: -1px 0 #aaa; box-shadow: -1px 0 #aaa; }
.searchbox-container .search .button { -webkit-border-bottom-left-radius: 0; -webkit-border-top-left-radius: 0; -moz-border-radius-bottomleft: 0; -moz-border-radius-topleft: 0; border-bottom-left-radius: 0; border-top-left-radius: 0; position: absolute; box-shadow: none; right: 0; top: 0; }
.searchbox-container .search.grey input[type="search"] { background: #F2F2F2; }
.searchbox-container .search.round > .input,
.searchbox-container .search.round > .button { border-radius: 5em; }
.searchbox-container .search.round > .button { border-radius: 0 5em 5em 0; }
/* 
=====================================================================
Default States | select, button, toggle-switch, checkbox + radio
===================================================================== 
*/
.searchbox-container .button,
.searchbox-container a.button,
.searchbox-container .bubble { border: 1px solid #BBBBBB; background-color: #fafafa; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#E6E6E6)); background-image: -webkit-linear-gradient(top, #ffffff, #E6E6E6); background-image: -moz-linear-gradient(top, #ffffff, #E6E6E6); background-image: -o-linear-gradient(top, #ffffff, #E6E6E6); background-image: linear-gradient(to bottom, #ffffff, #E6E6E6); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; }
.searchbox-container .button:hover,
.searchbox-container .button:focus,
.searchbox-container a.button:hover,
.searchbox-container a.button:focus { border: 1px solid #8FAFC9; background-color: #E8EFF4; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dae5ed)); background-image: -webkit-linear-gradient(#ffffff, #dae5ed); background-image: -moz-linear-gradient(#ffffff, #dae5ed); background-image: -o-linear-gradient(#ffffff, #dae5ed); background-image: linear-gradient(to bottom, #ffffff, #dae5ed); }
.searchbox-container .toggle-switch > input:checked + label:after { left: 0; content: attr(data-on); }
.searchbox-container .round > label, .searchbox-container .round > label:before { border-radius: 18px; }
.searchbox-container .round > input:checked + label:after { left: 2px; }
.searchbox-container .round > label:before { color: #e4e4e4; content: "\2022"; font: 34px/17px Arial, Helvetica, sans-serif!important; }

/* 
=======================================================
Button | input submit, input button, reset, .button
=======================================================
*/

.searchbox-container .button i { font-size: 14px; }
.searchbox-container .button,
.searchbox-container a.button { outline: 0; width: auto; height: 36px; color: #4b5151; line-height: 1; padding: 0 15px; cursor: pointer; font-size: 13px; overflow: visible; text-align: center; vertical-align: top; -webkit-box-shadow: inset 0 1px #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(255, 255, 255, 0.7); -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding-box; -webkit-touch-callout: none; -webkit-appearance: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.searchbox-container a.button { line-height: 36px; text-decoration: none; }
.searchbox-container .button:hover,
.searchbox-container .button:focus,
.searchbox-container a.button:hover,
.searchbox-container a.button:focus { -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 0 3px #fff; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 0 3px #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 0 3px #fff; color: #314f64; }
.searchbox-container .button:active,
.searchbox-container .button.active,
.searchbox-container a.button:active,
.searchbox-container a.button.active,
.searchbox-container .button.next-btn:active,
.searchbox-container .button.prev-btn:active { background-color: #e8e8e8; border-color: #bfbfbf #bfbfbf #d6d6d6; background-image: -webkit-linear-gradient(top, #e8e8e8, #ffffff); background-image: -moz-linear-gradient(top, #e8e8e8, #ffffff); background-image: -o-linear-gradient(top, #e8e8e8, #ffffff); background-image: linear-gradient(to bottom, #e8e8e8, #ffffff); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px rgba(255, 255, 255, 0.1); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px rgba(255, 255, 255, 0.1); }
/* Button Themes */
.searchbox-container .button.blue,
.searchbox-container .button.blue:hover,
.searchbox-container .button.green,
.searchbox-container .button.green:hover,
.searchbox-container .button.red,
.searchbox-container .button.red:hover,
.searchbox-container .button.black,
.searchbox-container .button.black:hover { color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, 0.15); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.06); -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.06); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.06); }

.searchbox-container .button.blue:hover,
.searchbox-container .button.blue:focus,
.searchbox-container .button.blue:active,
.searchbox-container .button.green:hover,
.searchbox-container .button.green:focus,
.searchbox-container .button.green:active,
.searchbox-container .button.red:hover,
.searchbox-container .button.red:focus,
.searchbox-container .button.red:active,
.searchbox-container .button.black:hover,
.searchbox-container .button.black:focus,
.searchbox-container .button.black:active { color: #fff; }
.searchbox-container .button.blue:active,
.searchbox-container .button.green:active,
.searchbox-container .button.red:active,
.searchbox-container .button.black:active { -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.1); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.1); }

.searchbox-container .button.blue,
.searchbox-container .bubble.blue { background-color: #208ed3; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4baadc), color-stop(100%,#074dda)); background-image: -webkit-linear-gradient(top, #4baadc, #074dda); background-image: -moz-linear-gradient(top, #4baadc, #074dda); background-image: -o-linear-gradient(top, #4baadc, #074dda); background-image: -ms-linear-gradient(top, #4baadc, #074dda); background-image: linear-gradient(to bottom, #4baadc, #074dda); border-color: #1f58cc #1b4db3 #1b4db3; }

.searchbox-container .button.blue:hover,
.searchbox-container .button.blue:focus { background-color: #1e55c8; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2160de), color-stop(100%,#1e55c8)); background-image: -webkit-linear-gradient(top, #2160de, #1e55c8); background-image: -moz-linear-gradient(top, #2160de, #1e55c8); background-image: -o-linear-gradient(top, #2160de, #1e55c8); background-image: -ms-linear-gradient(top, #2160de, #1e55c8); background-image: linear-gradient(to bottom, #2160de, #1e55c8); border-color: #174299 #174299 #174299; }

.searchbox-container .button.blue:active { background-color: #0D4DC1; border-color: #0F3779 #0D4DC1 #0F58E1; background-image: -webkit-linear-gradient(top, #0D4DC1, #48a4ff); background-image: -moz-linear-gradient(top, #0D4DC1, #48a4ff); background-image: -o-linear-gradient(top, #0D4DC1, #48a4ff); background-image: linear-gradient(to bottom, #0D4DC1, #48a4ff); }

.searchbox-container .button.green,
.searchbox-container .bubble.green { background-color: #7fbf4d; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a1d254), color-stop(100%, #63a62f)); background-image: -webkit-linear-gradient(top, #a1d254, #63a62f); background-image: -moz-linear-gradient(top, #a1d254, #63a62f); background-image: -ms-linear-gradient(top, #a1d254, #63a62f); background-image: -o-linear-gradient(top, #a1d254, #63a62f); background-image: linear-gradient(to bottom, #a1d254, #63a62f); text-shadow: 0 -1px 0 #4c9021; border: 1px solid #457621; border-top: 1px solid #5b992b; }

.searchbox-container .button.green:hover,
.searchbox-container .button.green:focus { background-color: #76b347; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76b347), color-stop(100%, #5e9e2e)); background-image: -webkit-linear-gradient(top, #76b347, #5e9e2e); background-image: -moz-linear-gradient(top, #76b347, #5e9e2e); background-image: -ms-linear-gradient(top, #76b347, #5e9e2e); background-image: -o-linear-gradient(top, #76b347, #5e9e2e); background-image: linear-gradient(to bottom, #76b347, #5e9e2e); border: 1px solid #457621; border-top: 1px solid #5b992b; }

.searchbox-container .button.green:active { background-color: #548E28; border-color: #678f3a #75a143 #81b049; background-image: -webkit-linear-gradient(top, #71b533, #a7d757); background-image: -moz-linear-gradient(top, #71b533, #a7d757); background-image: -o-linear-gradient(top, #71b533, #a7d757); background-image: linear-gradient(to bottom, #71b533, #a7d757); }

.searchbox-container .button.red,
.searchbox-container .bubble.red { background-color: #cf3025; border-color: #be1814 #ac1612 #ac1612; background-image: -webkit-linear-gradient(top, #fc4138, #cf3025); background-image: -moz-linear-gradient(top, #fc4138, #cf3025); background-image: -o-linear-gradient(top, #fc4138, #cf3025); background-image: linear-gradient(to bottom, #fc4138, #cf3025); }

.searchbox-container .button.red:hover,
.searchbox-container .button.red:focus { background-color: #BC2D21; border-color: #be1814 #ac1612 #ac1612; background-image: -webkit-linear-gradient(top, #F81003, #BC2D21); background-image: -moz-linear-gradient(top, #F81003, #BC2D21); background-image: -o-linear-gradient(top, #F81003, #BC2D21); background-image: linear-gradient(to bottom, #F81003, #BC2D21); }

.searchbox-container .button.red:active { background-color: #A60000; border-color: #A60000 #C10000 #E14A42; background-image: -webkit-linear-gradient(top, #DD0000, #FF9966); background-image: -moz-linear-gradient(top, #DD0000, #FF9966); background-image: -o-linear-gradient(top, #DD0000, #FF9966); background-image: linear-gradient(to bottom, #DD0000, #FF9966); }

.searchbox-container .button.black,
.searchbox-container .bubble.black { background-color: #333; border-color: #3E3E3E #222 #030303; background-image: -webkit-linear-gradient(top, #4F4F4F, #181818); background-image: -moz-linear-gradient(top, #4F4F4F, #181818); background-image: -o-linear-gradient(top, #4F4F4F, #181818); background-image: linear-gradient(to bottom, #4F4F4F, #181818); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.06); -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.06); box-shadow: inset 0 1px rgba(255, 255, 255, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.06); }

.searchbox-container .button.black:hover,
.searchbox-container .button.black:focus { background-color: #111111; background-image: -webkit-linear-gradient(top, #333333, #111111); background-image: -moz-linear-gradient(top, #333333, #111111); background-image: -o-linear-gradient(top, #333333, #111111); background-image: linear-gradient(to bottom, #333333, #111111); border: 1px solid #2C2B2B; }
.searchbox-container .button.black:active { background-color: #070707; background-image: -webkit-linear-gradient(top, #070707, #444444); background-image: -moz-linear-gradient(top, #070707, #444444); background-image: -o-linear-gradient(top, #070707, #444444); background-image: linear-gradient(to bottom, #070707, #444444); border: 1px solid #2C2B2B; }

/* element disabled states */
.searchbox-container .input[disabled],
.searchbox-container .button[disabled] { background-color: #f9f9f9; cursor: not-allowed; opacity: 0.45; }


/* mobile webkit fixes  */
@media screen and (-webkit-min-device-pixel-ratio:0) {
}

@media screen and (max-width: 600px) {

	.searchbox-container .lbl-text.tleft { padding-top: 0; }
	.searchbox-container .lbl-valign,
	.searchbox-container .lbl-valign.long { padding-top: 8px; }
}

@media screen and (max-width: 380px) {
	.searchbox-container span.lbl-text { width: 100%; text-align: right; }
}