/* All Mighty Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, strike, sub, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, select, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
vertical-align: baseline; }
* {
margin: 0;
box-sizing: border-box; }
:focus {
outline: 0; }
ol, ul {
list-style: none; }
a {
text-decoration: none; }
html {
height: 100%; }
body {
background-color: #646464;
height: 100%;
position: relative;
font-family: proxima_nova_rgregular, Helvetica, sans-serif; }
body ::selection {
background: #33b5e5;
color: #fff; }
body ::-moz-selection {
background: #33b5e5;
color: #fff; }
/* @font-face */
@font-face {
font-family: 'proxima_nova_rgregular';
src: url("../fonts/proxima-nova/regular/proxima_nova-regular-webfont.eot");
src: url("../fonts/proxima-nova/regular/proxima_nova-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proxima-nova/regular/proxima_nova-regular-webfont.woff") format("woff"), url("../fonts/proxima-nova/regular/proxima_nova-regular-webfont.ttf") format("truetype"), url("../fonts/proxima-nova/regular/proxima_nova-regular-webfont.svg#proxima_nova_rgregular") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'proxima_novalight';
src: url("../fonts/proxima-nova/light/proxima_nova-light-webfont.eot");
src: url("../fonts/proxima-nova/light/proxima_nova-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proxima-nova/light/proxima_nova-light-webfont.woff") format("woff"), url("../fonts/proxima-nova/light/proxima_nova-light-webfont.ttf") format("truetype"), url("../fonts/proxima-nova/light/proxima_nova-light-webfont.svg#proxima_novalight") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'proxima_novasemibold';
src: url("../fonts/proxima-nova/semibold/proxima_nova-semibold-webfont.eot");
src: url("../fonts/proxima-nova/semibold/proxima_nova-semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proxima-nova/semibold/proxima_nova-semibold-webfont.woff") format("woff"), url("../fonts/proxima-nova/semibold/proxima_nova-semibold-webfont.ttf") format("truetype"), url("../fonts/proxima-nova/semibold/proxima_nova-semibold-webfont.svg#proxima_novasemibold") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'proxima_nova_rgbold';
src: url("../fonts/proxima-nova/bold/proxima_nova-bold-webfont.eot");
src: url("../fonts/proxima-nova/bold/proxima_nova-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proxima-nova/bold/proxima_nova-bold-webfont.woff") format("woff"), url("../fonts/proxima-nova/bold/proxima_nova-bold-webfont.ttf") format("truetype"), url("../fonts/proxima-nova/bold/proxima_nova-bold-webfont.svg#proxima_nova_rgbold") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'proxima_novablack';
src: url("../fonts/proxima-nova/black/proxima_nova-black-webfont.eot");
src: url("../fonts/proxima-nova/black/proxima_nova-black-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proxima-nova/black/proxima_nova-black-webfont.woff") format("woff"), url("../fonts/proxima-nova/black/proxima_nova-black-webfont.ttf") format("truetype"), url("../fonts/proxima-nova/black/proxima_nova-black-webfont.svg#proxima_novablack") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: "Harbortouch";
src: url(../fonts/harbortouch-webfont.ttf); }
#main-content {
margin: 15px auto 0 auto;
padding-bottom: 15px; }
#main-content.sidebar {
width: 65%;
margin: 15px 0 0 320px;
float: left; }
#main-content.wide {
width: 95%;
max-width: 1150px;
margin: 15px auto 0 auto; }
.wrap {
width: 98%;
max-width: 1200px;
height: auto;
margin: 0 auto;
position: relative; }
.gradient-bg {
background: #727272;
/* Old browsers */
background: -moz-linear-gradient(top, #727272 45%, #3f3f40 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(45%, #727272), color-stop(100%, #3f3f40));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #727272 45%, #3f3f40 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #727272 45%, #3f3f40 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #727272 45%, #3f3f40 100%);
/* IE10+ */
background: linear-gradient(to bottom, #727272 45%, #3f3f40 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#727272', endColorstr='#3f3f40', GradientType=0);
/* IE6-9 */ }
.select-item-message {
font-size: 28px;
font-weight: bold;
font-family: proxima_novalight, Helvetica, sans-serif;
color: darkgrey;
margin-top: 25%;
text-align: center; }
.select-item-icon {
opacity: 0.4;
width: 150px;
margin-left: calc(50% - 75px);
margin-top: 45px; }
.main-wrapper {
width: 100%;
position: absolute;
top: 0;
bottom: 0; }
#loading {
background: black;
opacity: 0.7;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
z-index: 1000;
display: none;
cursor: wait; }
#loading .logo {
margin: 0 auto;
display: block;
position: relative;
top: 30%;
font-size: 200px;
width: 500px; }
@media only screen and (max-width: 1550px) {
#main-content.sidebar {
width: 75%; } }
.error-page {
width: 60%;
height: auto;
margin: 70px auto 40px auto;
padding: 35px 3% 20px 3%;
border-radius: 5px;
box-shadow: 0 1px 6px 0 rgba(15, 15, 15, 0.45);
text-align: center;
position: relative;
clear: both;
background: linear-gradient(to bottom, white 0%, #fcfcfc 21%, #efefef 70%, #eaeaea 100%); }
.error-page h2 {
margin: 0 0 20px 0;
font-size: 30px;
color: #00aeef;
text-transform: uppercase;
font-family: proxima_novasemibold, Helvetica, sans-serif; }
.error-page p {
font-size: 18px;
line-height: 17px;
color: #5a5a5a; }
.error-page a {
color: #00aeef; }
.button {
width: 100%;
padding: 3px 0;
font-size: 30px;
color: #fff;
border: none;
outline: none;
display: block;
text-align: center;
border-bottom: 1px solid #00519a;
border-radius: 4px 4px 4px 4px;
text-shadow: 0 1px 1px #424242;
text-transform: uppercase;
cursor: pointer;
position: relative;
font-family: proxima_nova_rgbold, Helvetica, sans-serif;
background: linear-gradient(to bottom, #2bd0f4 0%, #22c9f3 1%, #21c4f0 4%, #1eb2ec 39%, #199ae8 61%, #199ae8 96%, #1a9fe9 99%, #1790e7 100%); }
.button:active {
border-bottom-color: transparent;
background: linear-gradient(to bottom, #008eea 0%, #009dec 1%, #0098eb 4%, #0098eb 39%, #01b1ef 61%, #00c3f2 96%, #00c8f5 99%, #14d0f6 100%); }
.button.black {
border-bottom: 3px solid #2e2e2e;
background: linear-gradient(to bottom, #7f7f7f 0%, #5b5b5b 2%, #4b4b4b 3%, #414141 38%, #343434 64%, #343434 100%); }
.button.black:active {
background: linear-gradient(to bottom, #343434 0%, #343434 36%, #414141 62%, #4b4b4b 97%, #5b5b5b 98%, #7f7f7f 100%); }
.button.red {
border-bottom: 3px solid #6a0b0b;
background: linear-gradient(to bottom, #df7d7e 0%, #ce3639 2%, #c72529 3%, #b31f23 38%, #9b161a 64%, #9b161a 100%); }
.button.red:active {
background: #9b161a;
background: linear-gradient(to bottom, #9b161a 0%, #9b161a 36%, #b31f23 62%, #c72529 97%, #ce3639 98%, #df7d7e 100%); }
.button.square {
width: 50px;
padding: 9px 0;
font-size: 20px;
float: right;
position: relative;
z-index: 5; }
.button.simple {
border: none;
background: none;
text-shadow: none;
text-transform: none;
font-size: 1em;
color: inherit;
padding: 15px;
border-radius: 0; }
.button.simple:hover {
background: #d6d6d6; }
.button.simple.left {
width: 50%;
float: left; }
.button.simple.right {
width: 50%;
float: right; }
.button.disabled {
background: linear-gradient(to bottom, #d3d7d1 0%, #b6bab4 1%, #9da19b 4%, #848882 39%, #6b6f69 61%, #6b6f69 96%, #6b6f69 99%, #6b6f69 100%);
border-bottom: none;
cursor: not-allowed; }
.header {
width: 100%;
height: 42px;
margin: 0;
position: relative;
z-index: 200;
background: #222223;
background: linear-gradient(to bottom, #222223 0%, #29292a 45%, #252526 78%, #1f1f20 100%); }
.header.inactive {
background: #a31713; }
.header.inactive .toggle ul {
border-color: black; }
.header.inactive .toggle ul li.active a {
background: #a31713; }
.header.inactive .toggle ul li a {
background: #7f1713;
border-color: black; }
.header .wrap {
width: 95%;
max-width: 1150px; }
.header .logo {
margin: 80px auto 30px auto;
width: 90%;
max-width: 240px;
display: block;
padding: 0; }
.header .logo.inside {
margin: 40px auto 50px auto;
max-width: 190px; }
.header .logo.header {
margin: 0 0 0 0;
width: 50%;
max-width: 70px;
display: block;
float: left; }
.header .title {
font-size: 18px;
line-height: 28px;
color: #fff;
text-align: center;
font-family: proxima_novasemibold, Helvetica, sans-serif;
padding-top: 7px; }
.header .title a {
background-color: #fff;
width: 20px;
height: 20px;
font-size: 17px;
line-height: 17px;
margin: 0 0 0 5px;
padding: 0 7px;
color: #000;
border-radius: 50%; }
.header .header-btn {
font-size: 16px;
line-height: 28px;
color: #fff;
text-transform: uppercase;
position: absolute;
top: 0;
font-family: proxima_nova_rgbold, Helvetica, sans-serif;
padding: 7px 25px; }
.header .header-btn.back {
left: 0; }
.header .header-btn.action {
right: 0; }
.header .header-btn:hover {
background: #00cbff;
/* Old browsers */
background: -moz-linear-gradient(top, #00cbff 0%, #007ee9 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00cbff), color-stop(100%, #007ee9));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00cbff 0%, #007ee9 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00cbff 0%, #007ee9 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #00cbff 0%, #007ee9 100%);
/* IE10+ */
background: linear-gradient(to bottom, #00cbff 0%, #007ee9 100%);
/* W3C */ }
.header .square-toggle.right {
background: none;
width: 25%;
padding: 0;
position: absolute;
top: 0;
right: 100px;
margin-top: 5px; }
.header .square-toggle.right h3 {
width: 45%;
margin: 6px 1% 0 0;
font-size: 16px;
line-height: 20px;
color: #fff;
text-align: right;
letter-spacing: 1px;
text-shadow: 0 1px 2px #2B2B2B;
float: left; }
.header .square-toggle.right ul {
background-color: #3e3e3e;
width: 50%;
position: relative;
float: right; }
.header .square-toggle.right ul li a {
margin: 0;
padding: 5px 0;
font-size: 16px;
line-height: 18px;
color: #d2d2d2;
border-right: 1px solid #383839;
text-transform: uppercase;
display: block;
text-shadow: 0 1px 1px #424242;
font-family: proxima_novasemibold, Helvetica, sans-serif; }
.settings {
margin: 50px 0 50px 0;
clear: both; }
.settings li {
padding: 10px 2%;
color: #fff;
text-align: center;
position: relative;
float: left; }
.settings li a {
color: #fff; }
.settings li a h3 {
margin: 0 0 12px 0;
font-size: 20px;
text-shadow: 0 1px 2px #262626; }
.settings li a p {
font-size: 15px;
line-height: 22px;
text-shadow: 0 1px 2px #262626; }
.settings li a span {
width: 80%;
margin: 0 auto 20px auto;
text-align: center;
display: block; }
.settings li a span img {
max-width: 100px;
width: 100%;
max-height: 100px;
height: auto; }
.settings li.not-implemented {
opacity: .25; }
.settings.four-items li {
width: 25%; }
.settings.five-items li {
width: 20%; }
@media only screen and (max-width: 768px) {
.settings li a h3 {
margin: 0 0 12px 0;
font-size: 20px; }
.settings li a p {
font-size: 15px;
line-height: 22px; } }
.nav-sidebar {
background-color: #474747;
width: 30%;
max-width: 280px;
min-height: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
-webkit-box-shadow: 1px 0 2px 2px rgba(0, 0, 0, 0.5);
box-shadow: 1px 0 2px 2px rgba(0, 0, 0, 0.5); }
.nav-sidebar nav {
margin: 0;
padding: 42px 0 0 0; }
.nav-sidebar nav ul {
border-bottom: 1px solid #616161; }
.nav-sidebar nav ul li {
border-bottom: 1px solid #2c2c2d;
border-top: 1px solid #5a5a5a;
display: block; }
.nav-sidebar nav ul li:first-of-type {
border-top: none; }
.nav-sidebar nav ul li.current-page, .nav-sidebar nav ul li:hover, .nav-sidebar nav ul li.active {
background: #00cbff;
/* Old browsers */
background: -moz-linear-gradient(top, #00cbff 0%, #007ee9 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00cbff), color-stop(100%, #007ee9));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00cbff 0%, #007ee9 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00cbff 0%, #007ee9 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #00cbff 0%, #007ee9 100%);
/* IE10+ */
background: linear-gradient(to bottom, #00cbff 0%, #007ee9 100%);
/* W3C */ }
.nav-sidebar nav ul li a {
padding: 18px 0 18px 10%;
font-size: 18px;
color: #fff;
display: block;
font-family: proxima_novalight, Helvetica, sans-serif; }
.list-search-container {
width: 38%;
float: left;
margin: 15px 2% 0 auto; }
.list-search-container .list-search header {
padding: 12px 0;
text-align: center;
position: relative;
border-radius: 2px 2px 0 0;
background: #444444;
/* Old browsers */
background: -moz-linear-gradient(top, #444444 0%, #3e3e3e 2%, #414141 16%, #353535 40%, #292929 54%, #242424 64%, #242424 88%, #212121 94%, #181818 98%, #171717 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(2%, #3e3e3e), color-stop(16%, #414141), color-stop(40%, #353535), color-stop(54%, #292929), color-stop(64%, #242424), color-stop(88%, #242424), color-stop(94%, #212121), color-stop(98%, #181818), color-stop(100%, #171717));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #444444 0%, #3e3e3e 2%, #414141 16%, #353535 40%, #292929 54%, #242424 64%, #242424 88%, #212121 94%, #181818 98%, #171717 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #444444 0%, #3e3e3e 2%, #414141 16%, #353535 40%, #292929 54%, #242424 64%, #242424 88%, #212121 94%, #181818 98%, #171717 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #444444 0%, #3e3e3e 2%, #414141 16%, #353535 40%, #292929 54%, #242424 64%, #242424 88%, #212121 94%, #181818 98%, #171717 100%);
/* IE10+ */
background: linear-gradient(to bottom, #444444 0%, #3e3e3e 2%, #414141 16%, #353535 40%, #292929 54%, #242424 64%, #242424 88%, #212121 94%, #181818 98%, #171717 100%);
/* W3C */ }
.list-search-container .list-search header h2 {
font-size: 18px;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-family: proxima_nova_rgbold, Helvetica, sans-serif; }
.list-search-container .list-search header .form-group {
margin-bottom: 0; }
.list-search-container .list-search header .form-group .zero-only {
position: absolute;
right: 5px;
top: 16px; }
.list-search-container .list-search header .arrow {
position: absolute;
top: 8px;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-radius: 5px; }
.list-search-container .list-search header .arrow.prev {
left: 10px;
width: 0;
height: 0;
border-right: 20px solid lightgray; }
.list-search-container .list-search header .arrow.prev:hover {
border-right-color: grey; }
.list-search-container .list-search header .arrow.next {
right: 10px;
width: 0;
height: 0;
border-left: 20px solid lightgray; }
.list-search-container .list-search header .arrow.next:hover {
border-left-color: grey; }
.list-search-container .list-search header .button {
width: 28%;
padding: 9px 0;
font-size: 15px;
position: absolute;
top: 3px; }
.list-search-container .list-search header .button.left {
left: 1%; }
.list-search-container .list-search header .button.right {
right: 1%; }
.list-search-container .list-search header .checkbox {
width: 28%;
padding: 11px 0 0 0;
font-size: 15px;
position: absolute;
top: 3px; }
.list-search-container .list-search header .checkbox.left {
left: 1%; }
.list-search-container .list-search header .checkbox.right {
right: 1%; }
.list-search-container .list-search header .checkbox h3 {
margin: 3px 0 0 0;
font-size: 14px;
color: #fff;
float: left;
font-family: proxima_novalight, Helvetica, sans-serif; }
.list-search-container .list-search .search-container {
width: 100%;
height: auto;
margin: 0;
position: relative;
border-radius: 4px; }
.list-search-container .list-search .search-container .list-search-field {
width: 51%;
margin: 0;
padding: 0 3%;
height: 43px;
font-size: 18px;
line-height: 30px;
color: #5a5a5a;
border: 1px solid #8c8c8c;
vertical-align: middle;
display: block;
float: left;
font-family: proxima_novalight, Helvetica, sans-serif; }
.list-search-container .list-search .search-container .list-search-field.wide {
width: calc(100% - 50px); }
.list-search-container .list-search .search-container .button.square {
padding: 9px 0;
font-size: 20px;
float: right;
position: relative;
z-index: 5; }
.list-search-container .list-search .item-list {
background-color: #fff;
border: 1px solid #d6d6d6;
border-radius: 0 0 2px 2px;
position: relative;
overflow: hidden;
overflow-y: scroll;
height: 542px; }
.list-search-container .list-search .item-list .item {
position: relative;
display: block;
color: #5a5a5a; }
.list-search-container .list-search .item-list .item .name {
padding: 12px 10px;
font-size: 18px;
color: inherit;
border-bottom: 1px solid #d6d6d6;
text-align: left;
display: block;
font-family: proxima_nova_rgregular, Helvetica, sans-serif; }
.list-search-container .list-search .item-list .item .qty {
position: absolute;
right: 5px;
top: 14px; }
.list-search-container .list-search .item-list .item:hover {
color: white;
background-color: #00baf2; }
.list-search-container .list-search .item-list .item.inactive {
color: black;
background-color: #939393; }
.list-search-container .list-search .item-list .item.inactive:hover {
color: white;
background-color: #5f5f5f; }
.list-search-container .list-search .item-list .item.selected {
color: #fff;
background-color: #00baf2; }
.list-search-container .list-search .item-list .item.selected.inactive {
background-color: #00baf2; }
.list-search-container .list-search .item-list .item.selected.inactive .name {
font-style: italic; }
.list-search-container .list-search .item-list .item:last-child .name {
border: none; }
@media only screen and (max-width: 1550px) {
.list-search-container .list-search header .button.left {
width: 23%; }
.list-search-container .list-search header h2 {
padding-right: 20px;
font-size: 14px; } }
.toggle {
background-color: #3e3e3e;
margin: 0; }
.toggle.disabled {
opacity: 0.4;
cursor: not-allowed; }
.toggle.disabled li a {
cursor: not-allowed; }
.toggle ul {
border: 1px solid #2da4da; }
.toggle ul li {
width: 50%;
text-align: center;
display: block;
border-radius: 5px;
float: left;
position: relative; }
.toggle ul li:last-child a {
border: none; }
.toggle ul li:hover a {
color: #fff; }
.toggle ul li.active a {
border: 1px solid #005597;
border-top-color: #8fe0fa;
border-left-color: #4abeef;
color: #fff !important;
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
background: -webkit-linear-gradient(top, #008eea 0%, #009dec 1%, #0098eb 4%, #0098eb 39%, #01b1ef 61%, #00c3f2 96%, #00c8f5 99%, #14d0f6 100%);
/* Chrome10+,Safari5.1+ */
background: -ms-linear-gradient(top, #008eea 0%, #009dec 1%, #0098eb 4%, #0098eb 39%, #01b1ef 61%, #00c3f2 96%, #00c8f5 99%, #14d0f6 100%);
/* IE10+ */
background: linear-gradient(to bottom, #008eea 0%, #009dec 1%, #0098eb 4%, #0098eb 39%, #01b1ef 61%, #00c3f2 96%, #00c8f5 99%, #14d0f6 100%);
/* W3C */ }
.toggle ul li a {
margin: 0;
padding: 15px 0;
font-size: 16px;
line-height: 18px;
color: #d2d2d2;
text-transform: uppercase;
display: block;
text-shadow: 0 1px 1px #424242;
font-family: proxima_novasemibold, Helvetica, sans-serif; }
.rounded-toggle {
max-width: 200px;
padding: 3px;
border-radius: 40px; }
.rounded-toggle ul {
border-radius: 25px; }
.rounded-toggle ul li a {
border-radius: 25px; }
.square-toggle {
padding: 4px;
border-radius: 5px; }
.square-toggle.left {
margin: 0 0 0 .5%; }
.square-toggle.right {
margin: 0 .5% 0 0; }
.square-toggle ul {
border-radius: 2px; }
.square-toggle ul li a {
border-radius: 2px; }
.options-carousel {
float: left;
width: 50%;
margin: 6px 0 0 30px; }
.options-carousel .arrow {
display: block;
background: none;
width: 0;
height: 0;
border-style: solid;
margin-top: -3px;
cursor: pointer; }
.options-carousel .arrow.prev {
float: left;
border-width: 10px 15px 10px 0;
border-color: transparent #dadcde transparent transparent; }
.options-carousel .arrow.prev:hover {
border-right-color: white; }
.options-carousel .arrow.next {
float: right;
border-width: 10px 0 10px 15px;
border-color: transparent transparent transparent #dadcde; }
.options-carousel .arrow.next:hover {
border-left-color: white; }
.options-carousel .selected-option {
color: white;
text-transform: uppercase;
text-align: center; }
.modal-overlay {
background-color: #000;
opacity: 0.5;
width: 1903px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 1001; }
.modal-container {
position: fixed;
z-index: 1002;
top: 249px;
background-color: #fff;
height: auto;
width: 660px;
left: 50%;
margin-left: -330px;
color: #5a5a5a;
border: 4px solid #fff;
border-radius: 4px;
padding: 15px 20px; }
.modal-container h2 {
font-size: 30px;
line-height: 40px;
font-family: proxima_nova_rgregular, Helvetica, sans-serif; }
.modal-container .modal-wrap {
width: 100%;
height: 100%;
outline: 0;
overflow: auto; }
.modal-container .modal-data {
padding: 1%;
display: block; }
.modal-container .close-modal {
width: 135px;
margin: 25px auto;
padding: 8px 0;
font-size: 18px; }
.modal-container.select-icon, .modal-container.select-color {
top: 100px;
width: 480px; }
.modal-container.select-icon .modal-title, .modal-container.select-color .modal-title {
overflow: hidden;
margin-bottom: 30px; }
.modal-container.select-icon .title, .modal-container.select-color .title {
text-transform: uppercase;
font-weight: bold;
float: left;
width: 40%;
margin-top: 20px; }
.modal-container.select-icon .toggle, .modal-container.select-color .toggle {
float: right;
width: 55%; }
.modal-container.select-icon .icon-grid .icon-container, .modal-container.select-color .icon-grid .icon-container {
float: left;
width: 65px;
height: 65px;
margin: 5px 0 0 5px;
border-radius: 3px;
background: linear-gradient(to bottom, #7f7f7f 0%, #5b5b5b 2%, #4b4b4b 3%, #414141 38%, #343434 64%, #343434 100%);
padding-top: 19px;
text-align: center;
cursor: pointer; }
.modal-container.select-icon .icon-grid .icon-container:hover, .modal-container.select-icon .icon-grid .icon-container.active, .modal-container.select-color .icon-grid .icon-container:hover, .modal-container.select-color .icon-grid .icon-container.active {
opacity: 0.5; }
.modal-container.select-icon .icon-grid .icon-container i.ht-icon, .modal-container.select-color .icon-grid .icon-container i.ht-icon {
font-size: 55px;
color: white;
padding: 0; }
.modal-container.select-icon .color-grid .color-container, .modal-container.select-color .color-grid .color-container {
float: left;
width: 68px;
height: 68px;
margin: 0 0 15px 2px;
border-radius: 5px;
background: none;
padding: 3px;
text-align: center;
cursor: pointer;
border: 2px solid transparent; }
.modal-container.select-icon .color-grid .color-container:hover, .modal-container.select-icon .color-grid .color-container.active, .modal-container.select-color .color-grid .color-container:hover, .modal-container.select-color .color-grid .color-container.active {
opacity: 1;
border-color: red; }
.modal-container.select-icon .color-grid .color-container .color, .modal-container.select-color .color-grid .color-container .color {
display: block;
height: 100%;
border-radius: 3px; }
.modal-container.select-icon .close-modal, .modal-container.select-color .close-modal {
float: left; }
.modal-container.select-icon .save, .modal-container.select-color .save {
width: 135px;
margin: 25px auto;
padding: 8px 0;
font-size: 18px;
float: right; }
.modal-container.select-time, .modal-container.select-date {
width: 330px;
margin-left: -175px; }
.modal-container.select-time .input-group, .modal-container.select-date .input-group {
width: 100%;
overflow: hidden;
padding-top: 15px; }
.modal-container.select-time .input-group.disabled, .modal-container.select-date .input-group.disabled {
opacity: 0.6; }
.modal-container.select-time .input-group:not(.disabled) input[type=text], .modal-container.select-date .input-group:not(.disabled) input[type=text] {
background: transparent !important; }
.modal-container.select-time .input-group label, .modal-container.select-date .input-group label {
cursor: pointer;
font-weight: bold;
position: relative;
top: 6px;
left: 15px; }
.modal-container.select-time .input-group input[type=radio], .modal-container.select-date .input-group input[type=radio] {
float: left;
width: 40px;
margin-left: 0;
cursor: pointer;
box-shadow: none; }
.modal-container.select-time .input-group input[type=text], .modal-container.select-date .input-group input[type=text] {
float: right;
width: 100px; }
.modal-container.select-time .up-buttons, .modal-container.select-date .up-buttons {
overflow: hidden;
width: 100%; }
.modal-container.select-time .down-buttons, .modal-container.select-date .down-buttons {
overflow: hidden;
width: 100%; }
.modal-container.select-time .values, .modal-container.select-date .values {
margin: 10px 0;
overflow: hidden; }
.modal-container.select-time .values span, .modal-container.select-date .values span {
border: 2px solid #4abeef;
font-size: 25px;
font-weight: bold;
padding: 8px;
text-transform: uppercase;
border-radius: 8px;
width: 57px;
text-align: center; }
.modal-container.select-time .values span.hours, .modal-container.select-date .values span.hours {
float: left; }
.modal-container.select-time .values span.minutes, .modal-container.select-date .values span.minutes {
float: left;
margin-left: 26px; }
.modal-container.select-time .values span.am-pm, .modal-container.select-date .values span.am-pm {
float: right; }
.modal-container.select-time .arrow, .modal-container.select-date .arrow {
display: block;
float: left;
width: 57px;
height: 23px; }
.modal-container.select-time .arrow .triangle, .modal-container.select-date .arrow .triangle {
display: block;
position: relative;
left: 50%;
margin: 2px 0 0 -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent; }
.modal-container.select-time .arrow.up .triangle, .modal-container.select-date .arrow.up .triangle {
border-bottom: 10px solid white; }
.modal-container.select-time .arrow.down .triangle, .modal-container.select-date .arrow.down .triangle {
border-top: 10px solid white; }
.modal-container.select-time .arrow.hours, .modal-container.select-date .arrow.hours {
float: left; }
.modal-container.select-time .arrow.minutes, .modal-container.select-date .arrow.minutes {
float: left;
margin-left: 26px; }
.modal-container.select-time .arrow.am-pm, .modal-container.select-date .arrow.am-pm {
float: right; }
.modal-container.select-time .close-modal, .modal-container.select-date .close-modal {
float: left; }
.modal-container.select-time .save, .modal-container.select-date .save {
width: 135px;
margin: 25px auto;
padding: 8px 0;
font-size: 18px;
float: right; }
.modal-container.select-time.shifts-filter .shifts-filter-header, .modal-container.select-date.shifts-filter .shifts-filter-header {
font-weight: bold;
margin-bottom: 20px; }
.modal-container.select-time.shifts-filter .shifts-filter-header input, .modal-container.select-date.shifts-filter .shifts-filter-header input {
width: 85px;
text-align: center;
padding-top: 2px;
font-weight: bold;
background: white;
border: 1px solid #d6d6d6;
height: 30px;
border-radius: 3px;
margin-left: 10px; }
.modal-container.select-time.shifts-filter .filter-mode-icon, .modal-container.select-date.shifts-filter .filter-mode-icon {
float: right; }
.modal-container.select-time.shifts-filter .filter-mode-icon img, .modal-container.select-date.shifts-filter .filter-mode-icon img {
height: 30px;
cursor: pointer; }
.modal-container.select-time.select-duration, .modal-container.select-date.select-duration {
padding-top: 40px; }
.modal-container.select-time.select-duration .values span, .modal-container.select-date.select-duration .values span {
width: 125px; }
.modal-container.select-time.select-duration .arrow, .modal-container.select-date.select-duration .arrow {
width: 125px; }
.modal-container.select-date {
width: 360px;
margin-left: -180px;
top: 100px; }
.modal-container.select-date .datepicker {
overflow: hidden;
width: 100%; }
.modal-container.select-day-end .title {
float: left;
font-size: 22px;
font-weight: bold;
margin: 20px 0; }
.modal-container.confirmation {
border: none;
padding: 0; }
.modal-container.confirmation .modal-data {
padding: 0; }
.modal-container.confirmation .modal-title {
padding: 15px;
border-bottom: 3px solid #00baf2; }
.modal-container.confirmation .modal-title .title {
font-size: 22px;
color: #00baf2; }
.modal-container.confirmation .modal-body .text-content {
padding: 20px;
font-size: 18px;
font-weight: bold;
display: block; }
.modal-container.confirmation .modal-body .buttons {
border-top: 1px solid #d6d6d6; }
.modal-container.confirmation .modal-body .buttons .button:first-child {
border-right: 1px solid #d6d6d6; }
.notification {
position: fixed;
margin: 5px;
z-index: 1050;
top: 0;
right: 0; }
.notification .wrapper,
.notification .container {
position: relative;
display: block;
height: inherit;
width: inherit;
margin: 3px;
z-index: 1; }
.notification .message-container-base {
font-weight: bold;
padding: 8px 15px 8px 25px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
border: 1px solid #fbeed5;
border-radius: 4px;
white-space: nowrap;
background: #fcf8e3 no-repeat 3px 7px; }
.notification .message-container-base.error {
color: #B94A48;
border-color: #EED3D7;
background: #F2DEDE url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtRJREFUeNqkVc1u00AQHq+dOD+0poIQfkIjalW0SEGqRMuRnHos3DjwAH0ArlyQeANOOSMeAA5VjyBxKBQhgSpVUKKQNGloFdw4cWw2jtfMOna6JOUArDTazXi/b3dm55socPqQhFka++aHBsI8GsopRJERNFlY88FCEk9Yiwf8RhgRyaHFQpPHCDmZG5oX2ui2yilkcTT1AcDsbYC1NMAyOi7zTX2Agx7A9luAl88BauiiQ/cJaZQfIpAlngDcvZZMrl8vFPK5+XktrWlx3/ehZ5r9+t6e+WVnp1pxnNIjgBe4/6dAysQc8dsmHwPcW9C0h3fW1hans1ltwJhy0GxK7XZbUlMp5Ww2eyan6+ft/f2FAqXGK4CvQk5HueFz7D6GOZtIrK+srupdx1GRBBqNBtzc2AiMr7nPplRdKhb1q6q6zjFhrklEFOUutoQ50xcX86ZlqaZpQrfbBdu2R6/G19zX6XSgh6RX5ubyHCM8nqSID6ICrGiZjGYYxojEsiw4PDwMSL5VKsC8Yf4VRYFzMzMaxwjlJSlCyAQ9l0CW44PBADzXhe7xMdi9HtTrdYjFYkDQL0cn4Xdq2/EAE+InCnvADTf2eah4Sx9vExQjkqXT6aAERICMewd/UAp/IeYANM2joxt+q5VI+ieq2i0Wg3l6DNzHwTERPgo1ko7XBXj3vdlsT2F+UuhIhYkp7u7CarkcrFOCtR3H5JiwbAIeImjT/YQKKBtGjRFCU5IUgFRe7fF4cCNVIPMYo3VKqxwjyNAXNepuopyqnld602qVsfRpEkkz+GFL1wPj6ySXBpJtWVa5xlhpcyhBNwpZHmtX8AGgfIExo0ZpzkWVTBGiXCSEaHh62/PoR0p/vHaczxXGnj4bSo+G78lELU80h1uogBwWLf5YlsPmgDEd4M236xjm+8nm4IuE/9u+/PH2JXZfbwz4zw1WbO+SQPpXfwG/BBgAhCNZiSb/pOQAAAAASUVORK5CYII=) no-repeat 3px 7px; }
.notification .message-container-base.success {
color: #468847;
border-color: #D6E9C6;
background: #DFF0D8 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAutJREFUeNq0lctPE0Ecx38zu/RFS1EryqtgJFA08YCiMZIAQQ4eRG8eDGdPJiYeTIwHTfwPiAcvXIwXLwoXPaDxkWgQ6islKlJLSQWLUraPLTv7Gme32zoF9KSTfLO7v53vZ3d/M7/fIth+IO6INt2jjoA7bjHCJoAlzCRw59YwHYjBnfMPqAKWQYKjGkfCJqAF0xwZjipQtA3MxeSG87VhOOYegVrUCy7UZM9S6TLIdAamySTclZdYhFhRHloGYg7mgZv1Zzztvgud7V1tbQ2twYA34LJmF4p5dXF1KTufnE+SxeJtuCZNsLDCQU0+RyKTF27Unw101l8e6hns3u0PBalORVVVkcaEKBJDgV3+cGM4tKKmI+ohlIGnygKX00rSBfszz/n2uXv81wd6+rt1orsZCHRdr1Imk2F2Kob3hutSxW8thsd8AXNaln9D7CTfA6O+0UgkMuwVvEFFUbbAcrkcTA8+AtOk8E6KiQiDmMFSDqZItAzEVQviRkdDdaFgPp8HSZKAEAL5Qh7Sq2lIJBJwv2scUqkUnKoZgNhcDKhKg5aH+1IkcouCAdFGAQsuWZYhOjwFHQ96oagWgRoUov1T9kRBEODAwxM2QtEUl+Wp+Ln9VRo6BcMw4ErHRYjH4/B26AlQoQQTRdHWwcd9AH57+UAXddvDD37DmrBBV34WfqiXPl61g+vr6xA9zsGeM9gOdsNXkgpEtTwVvwOklXLKm6+/p5ezwk4B+j6droBs2CsGa/gNs6RIxazl4Tc25mpTgw/apPR1LYlNRFAzgsOxkyXYLIM1V8NMwyAkJSctD1eGVKiq5wWjSPdjmeTkiKvVW4f2YPHWl3GAVq6ymcyCTgovM3FzyRiDe2TaKcEKsLpJvNHjZgPNqEtyi6mZIm4SRFyLMUsONSSdkPeFtY1n0mczoY3BHTLhwPRy9/lzcziCw9ACI+yql0VLzcGAZbYSM5CCSZg1/9oc/nn7+i8N9p/8An4JMADxhH+xHfuiKwAAAABJRU5ErkJggg==) no-repeat 3px 7px; }
.notification .message-container-base.info {
color: #3A87AD;
border-color: #BCE8F1;
background: #D9EDF7 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYFAhkSsdes/QAAA8dJREFUOMvVlGtMW2UYx//POaWHXg6lLaW0ypAtw1UCgbniNOLcVOLmAjHZolOYlxmTGXVZdAnRfXQm+7SoU4mXaOaiZsEpC9FkiQs6Z6bdCnNYruM6KNBw6YWewzl9z+sHImEWv+vz7XmT95f/+3/+7wP814v+efDOV3/SoX3lHAA+6ODeUFfMfjOWMADgdk+eEKz0pF7aQdMAcOKLLjrcVMVX3xdWN29/GhYP7SvnP0cWfS8caSkfHZsPE9Fgnt02JNutQ0QYHB2dDz9/pKX8QjjuO9xUxd/66HdxTeCHZ3rojQObGQBcuNjfplkD3b19Y/6MrimSaKgSMmpGU5WevmE/swa6Oy73tQHA0Rdr2Mmv/6A1n9w9suQ7097Z9lM4FlTgTDrzZTu4StXVfpiI48rVcUDM5cmEksrFnHxfpTtU/3BFQzCQF/2bYVoNbH7zmItbSoMj40JSzmMyX5qDvriA7QdrIIpA+3cdsMpu0nXI8cV0MtKXCPZev+gCEM1S2NHPvWfP/hL+7FSr3+0p5RBEyhEN5JCKYr8XnASMT0xBNyzQGQeI8fjsGD39RMPk7se2bd5ZtTyoFYXftF6y37gx7NeUtJJOTFlAHDZLDuILU3j3+H5oOrD3yWbIztugaAzgnBKJuBLpGfQrS8wO4FZgV+c1IxaLgWVU0tMLEETCos4xMzEIv9cJXQcyagIwigDGwJgOAtHAwAhisQUjy0ORGERiELgG4iakkzo4MYAxcM5hAMi1WWG1yYCJIcMUaBkVRLdGeSU2995TLWzcUAzONJ7J6FBVBYIggMzmFbvdBV44Corg8vjhzC+EJEl8U1kJtgYrhCzgc/vvTwXKSib1paRFVRVORDAJAsw5FuTaJEhWM2SHB3mOAlhkNxwuLzeJsGwqWzf5TFNdKgtY5qHp6ZFf67Y/sAVadCaVY5YACDDb3Oi4NIjLnWMw2QthCBIsVhsUTU9tvXsjeq9+X1d75/KEs4LNOfcdf/+HthMnvwxOD0wmHaXr7ZItn2wuH2SnBzbZAbPJwpPx+VQuzcm7dgRCB57a1uBzUDRL4bfnI0RE0eaXd9W89mpjqHZnUI5Hh2l2dkZZUhOqpi2qSmpOmZ64Tuu9qlz/SEXo6MEHa3wOip46F1n7633eekV8ds8Wxjn37Wl63VVa+ej5oeEZ/82ZBETJjpJ1Rbij2D3Z/1trXUvLsblCK0XfOx0SX2kMsn9dX+d+7Kf6h8o4AIykuffjT8L20LU+w4AZd5VvEPY+XpWqLV327HR7DzXuDnD8r+ovkBehJ8i+y8YAAAAASUVORK5CYII=) no-repeat 3px 7px; }
.notification .message-container-base.warn {
color: #C09853;
border-color: #FBEED5;
background: #FCF8E3 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAABJlBMVEXr6eb/2oD/wi7/xjr/0mP/ykf/tQD/vBj/3o7/uQ//vyL/twebhgD/4pzX1K3z8e349vK6tHCilCWbiQymn0jGworr6dXQza3HxcKkn1vWvV/5uRfk4dXZ1bD18+/52YebiAmyr5S9mhCzrWq5t6ufjRH54aLs0oS+qD751XqPhAybhwXsujG3sm+Zk0PTwG6Shg+PhhObhwOPgQL4zV2nlyrf27uLfgCPhRHu7OmLgAafkyiWkD3l49ibiAfTs0C+lgCniwD4sgDJxqOilzDWowWFfAH08uebig6qpFHBvH/aw26FfQTQzsvy8OyEfz20r3jAvaKbhgG9q0nc2LbZxXanoUu/u5WSggCtp1anpJKdmFz/zlX/1nGJiYmuq5Dx7+sAAADoPUZSAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfdBgUBGhh4aah5AAAAlklEQVQY02NgoBIIE8EUcwn1FkIXM1Tj5dDUQhPU502Mi7XXQxGz5uVIjGOJUUUW81HnYEyMi2HVcUOICQZzMMYmxrEyMylJwgUt5BljWRLjmJm4pI1hYp5SQLGYxDgmLnZOVxuooClIDKgXKMbN5ggV1ACLJcaBxNgcoiGCBiZwdWxOETBDrTyEFey0jYJ4eHjMGWgEAIpRFRCUt08qAAAAAElFTkSuQmCC) no-repeat 3px 7px; }
.notification .message-container-base .message {
position: relative; }
.warning {
position: absolute;
z-index: 1010;
bottom: 50px;
left: 50%;
width: 550px;
margin-left: -275px;
color: yellow;
background: rgba(0, 0, 0, 0.35);
padding: 15px;
border-radius: 25px;
text-align: center; }
.form-group {
width: 100%;
margin-bottom: 30px;
float: left; }
.form-group.small-groups-container {
padding-left: 24%; }
.form-group.medium-groups-container {
padding-left: 18%; }
.form-group.medium-groups-container .input-group.right .error-block {
left: calc(70% + 5px); }
.form-group.radio-groups-container {
padding-top: 10px; }
.form-group .input-group {
width: 85%;
margin: 0 auto;
padding-top: 26px;
position: relative; }
.form-group .input-group.left, .form-group .input-group.right {
width: 50%; }
.form-group .input-group.left .currency, .form-group .input-group.right .currency {
left: calc(30% + 40px); }
.form-group .input-group.left .error-block, .form-group .input-group.right .error-block {
left: calc(80% + 5px); }
.form-group .input-group.small {
width: 40%; }
.form-group .input-group.small input {
width: 41%; }
.form-group .input-group.small .currency {
right: 47%; }
.form-group .input-group.small .error-block {
left: calc(70% + 5px); }
.form-group .input-group.number input {
width: 15%; }
.form-group .input-group.number .error-block {
right: 51%; }
.form-group .input-group.number .error-block {
left: calc(45% + 5px); }
.form-group .input-group.text-area {
overflow: hidden;
width: 100%;
padding-bottom: 3px;
padding-right: 3px; }
.form-group .input-group.text-area.left {
width: 48%; }
.form-group .input-group.text-area h2 {
width: 10%;
text-align: left; }
.form-group .input-group.text-area textarea {
resize: none; }
.form-group .input-group.text-area textarea:focus {
box-shadow: 0 0 2px 2px blue; }
.form-group .input-group.currency input {
padding-left: 22px; }
.form-group .input-group.all-modifier-price .currency {
left: calc(45% + 68px); }
.form-group .input-group.all-modifier-price .error-block {
left: calc(60% + 35px); }
.form-group .input-group.multi-select input {
width: calc(70% - 95px); }
.form-group .input-group.multi-select .error-block {
left: calc(100% - 95px); }
.form-group .input-group .error-block {
left: calc(80% + 5px); }
.form-group .input-group .error .error-block, .form-group .input-group.error .error-block {
display: block;
z-index: 1; }
.form-group .input-group .error .error-block:hover .error-tooltip, .form-group .input-group.error .error-block:hover .error-tooltip {
display: block; }
.form-group .input-group .error input:focus ~ .error-block .error-tooltip, .form-group .input-group.error input:focus ~ .error-block .error-tooltip {
display: block; }
.form-group .input-group h2 {
width: 30%;
margin: 6px 0 0;
font-size: 16px;
color: #fff;
text-align: right;
letter-spacing: 0;
text-shadow: 0 1px 2px #2B2B2B;
float: left; }
.form-group .input-group input {
width: 50%;
margin: 0 0 0 30px;
padding: 0 12px;
height: 30px;
font-size: 15px;
line-height: 20px;
color: #939393;
border: 1px solid #8c8c8c;
border-radius: 2px;
vertical-align: middle;
display: inline-block;
overflow: hidden;
font-family: proxima_novalight, Helvetica, sans-serif; }
.form-group .input-group input:disabled {
background-color: #858585 !important;
color: #b4b4b4;
border: 1px solid #3b3b3d;
cursor: not-allowed; }
.form-group .input-group input[type=checkbox] {
float: left;
cursor: pointer; }
.form-group .input-group input[type=checkbox]:focus {
box-shadow: none; }
.form-group .input-group input:focus {
box-shadow: 0 0 2px 2px blue; }
.form-group .input-group .error-block {
display: none;
position: absolute;
top: 30px; }
.form-group .input-group .error-block .error-mark {
display: block;
background: red;
color: white;
width: 21px;
height: 21px;
border-radius: 11px;
padding: 2px 9px;
font-weight: bold; }
.form-group .input-group .error-block .error-tooltip {
display: none;
position: absolute;
right: -7px;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 215px;
background-color: #000;
background-color: rgba(51, 51, 51, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
top: 30px;
line-height: 1.2;
border-top: 3px solid red; }
.form-group .input-group .error-block .error-tooltip:before {
position: absolute;
right: 6%;
width: 0;
border-bottom: 5px solid red;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
top: -8px; }
.form-group .input-group .plus-button {
width: 40px;
padding: 1px 0;
font-size: 25px;
float: right;
margin: -2px 20px 0 0; }
.form-group .input-group .eye-button {
height: 36px;
width: 40px;
padding: 1px 0;
font-size: 25px;
float: right;
margin: -2px 20px 0 0; }
.form-group .input-group .eye-button:after {
content: '';
width: 40px;
height: 36px;
display: block;
background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KICA8Zz4KICAgIDxnIGZpbGw9IiMyMzFGMjAiPgogICAgICA8cGF0aCBkPSJtMzQsMjU2bDI2LjIsMjYuMmMxMDgsMTA4IDI4My43LDEwOCAzOTEuNywwbDI2LjEtMjYuMi0yNi4yLTI2LjJjLTEwOC0xMDgtMjgzLjctMTA4LTM5MS43LDBsLTI2LjEsMjYuMnptMjIyLDEyNi4yYy03NS44LDAtMTUxLjYtMjguOS0yMDkuMy04Ni42bC0zMi45LTMyLjljLTMuNy0zLjctMy43LTkuNyAwLTEzLjVsMzIuOS0zMi45YzExNS40LTExNS40IDMwMy4yLTExNS40IDQxOC42LDBsMzIuOSwzMi45YzMuNywzLjcgMy43LDkuNyAwLDEzLjVsLTMyLjksMzIuOWMtNTcuNyw1Ny43LTEzMy41LDg2LjYtMjA5LjMsODYuNnoiIGZpbGw9IiNGRkZGRkYiLz4KICAgICAgPHBhdGggZD0ibTI1NiwxODMuNWMtNDAsMC03Mi41LDMyLjUtNzIuNSw3Mi41czMyLjUsNzIuNSA3Mi41LDcyLjVjNDAsMCA3Mi41LTMyLjUgNzIuNS03Mi41cy0zMi41LTcyLjUtNzIuNS03Mi41em0wLDE2NGMtNTAuNSwwLTkxLjUtNDEuMS05MS41LTkxLjUgMC01MC41IDQxLjEtOTEuNSA5MS41LTkxLjVzOTEuNSw0MS4xIDkxLjUsOTEuNWMwLDUwLjUtNDEsOTEuNS05MS41LDkxLjV6IiBmaWxsPSIjRkZGRkZGIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K) no-repeat 7px 3px;
background-size: 25px; }
.form-group .input-group .percent {
font-size: 14px;
color: #939393;
position: absolute;
top: 34px;
right: 52%; }
.form-group .input-group .currency {
font-size: 14px;
color: #939393;
position: absolute;
top: 34px;
right: 61.7%; }
.form-group .input-group textarea {
width: 86%;
margin: 0;
padding: 1%;
font-size: 15px;
line-height: 20px;
color: #939393;
border: 1px solid #8c8c8c;
-webkit-border-radius: 2px;
border-radius: 2px;
display: block;
float: right;
font-family: proxima_novalight, Helvetica, sans-serif; }
.form-group .input-group .additional-description {
font-size: 16px;
color: #fff;
text-align: right;
margin-left: 20px;
position: absolute;
top: 32px;
left: 50%; }
.form-group .toggle-set {
margin: 15px auto 0;
width: 85%;
overflow: hidden; }
.form-group .toggle-set.left, .form-group .toggle-set.right {
width: 50%; }
.form-group .toggle-set h2 {
width: 35%;
padding-right: 30px;
text-align: right;
margin-top: 17px;
font-size: 16px;
color: #fff;
letter-spacing: 0;
text-shadow: 0 1px 2px #2B2B2B;
float: left; }
.receipt .form-group .toggle-set h2 {
width: 45%; }
.form-group .toggle-set nav {
width: 55%;
float: left; }
.form-group .toggle-set nav.square-toggle {
width: 50%; }
.form-group .icon-group {
margin: 20px auto 0;
width: 30%; }
.form-group .icon-group h2 {
width: 30%;
padding-right: 30px;
text-align: right;
margin-top: 12px;
font-size: 16px;
color: #fff;
letter-spacing: 0;
text-shadow: 0 1px 2px #2B2B2B;
float: left; }
.form-group .icon-group .icon-container {
float: left;
width: 50px;
height: 47px;
border-radius: 3px;
padding-top: 10px;
cursor: pointer;
background: linear-gradient(to bottom, #7f7f7f 0%, #5b5b5b 2%, #4b4b4b 3%, #414141 38%, #343434 64%, #343434 100%); }
.form-group .icon-group .icon-container.select-icon {
cursor: pointer; }
.form-group .icon-group .icon {
color: white;
display: block;
padding: 0;
font-size: 40px; }
.form-group .color-group {
margin: 20px auto 0;
width: 30%; }
.form-group .color-group h2 {
width: 30%;
padding-right: 30px;
text-align: right;
margin-top: 12px;
font-size: 16px;
color: #fff;
letter-spacing: 0;
text-shadow: 0 1px 2px #2B2B2B;
float: left; }
.form-group .color-group .color-container {
float: left;
width: 50px;
height: 47px;
border-radius: 3px;
padding-top: 10px;
cursor: pointer;
margin-left: 10px;
background: linear-gradient(to bottom, #7f7f7f 0%, #5b5b5b 2%, #4b4b4b 3%, #414141 38%, #343434 64%, #343434 100%); }
.form-group .radio-group {
width: 30%;
margin-left: 3%; }
.form-group .radio-group:first-child {
margin-left: 15%; }
.form-group .radio-group.horizontal {
width: 100%;
overflow: hidden;
margin-left: 8%; }
.form-group .radio-group.horizontal .radio-button {
float: left;
width: 20%; }
.form-group .radio-group.horizontal .radio-button label {
margin-left: 10%; }
.form-group .radio-group.horizontal .radio-button label span {
float: left;
margin-right: 0; }
.form-group .radio-group h2 {
width: 7%;
margin: 20px 34px 0 0;
font-size: 16px;
color: #fff;
text-align: right;
letter-spacing: 0;
text-shadow: 0 1px 2px #2B2B2B;
float: left; }
.form-group .radio-group .radio-button {
padding: 20px 0 20px 0;
margin: 0 auto 5px auto; }
.form-group .radio-group .radio-button input[type=radio] {
display: none; }
.form-group .radio-group .radio-button input[type=radio]:checked + label span {
background: url(../images/check_radio_sheet.png) -35px -40px no-repeat; }
.form-group .radio-group .radio-button label {
color: #f2f2f2;
text-shadow: 0 1px 2px #2B2B2B;
font-size: 16px;
cursor: pointer;
margin: -1px 0 0 20%; }
.form-group .radio-group .radio-button label span {
display: inline-block;
width: 23px;
height: 23px;
vertical-align: middle;
background: url(../images/check_radio_sheet.png) 0px -40px no-repeat;
cursor: pointer;
margin: -1px 20% 0 0;
float: right; }
.form-group .select-group {
width: 85%;
margin: 0 auto;
padding-top: 26px; }
.form-group .select-group.left, .form-group .select-group.right {
width: 50%; }
.form-group .select-group h2 {
width: 30%;
margin: 6px 0 0;
font-size: 16px;
color: #fff;
text-align: right;
letter-spacing: 0;
text-shadow: 0 1px 2px #2B2B2B;
float: left; }
.form-group .select-group select {
width: 55%;
height: 32px;
margin-left: 30px;
padding: 0;
font-size: 13px;
line-height: 1;
border: 0;
border-radius: 0;
display: inline-block; }
.form-group .select-group select:focus {
box-shadow: 0 0 2px 2px blue; }
.form-group .checkbox-group input[type=checkbox] {
display: none; }
.form-group .checkbox-group input[type=checkbox]:checked + label span {
background: url(../images/check_radio_sheet.png) -35px 0 no-repeat; }
.form-group .checkbox-group label {
color: #f2f2f2;
font-family: proxima_novalight, Helvetica, sans-serif;
font-size: 14px;
float: left;
cursor: pointer; }
.form-group .checkbox-group label span {
display: inline-block;
width: 21px;
height: 21px;
background: url(../images/check_radio_sheet.png) 0 0 no-repeat;
cursor: pointer;
margin: -3px 5px 0 0;
padding: 0 0 0 10px;
float: left; }
.form-group .multiple-inputs h2 {
width: 28%;
text-align: left; }
.form-group .multiple-inputs .input-container {
width: 20%;
position: relative;
float: left; }
.form-group .multiple-inputs .input-container label {
font-size: 14px;
line-height: 18px;
color: #939393;
position: absolute;
top: 7px;
right: 5%; }
.form-group .multiple-inputs .input-container input {
width: 80%;
text-align: center; }
.form-group .multiple-inputs .input-container .error-block {
right: 0;
top: 5px; }
.form-group .carousel-group {
margin: 15px auto 0;
width: 85%;
overflow: hidden; }
.form-group .carousel-group h2 {
width: 30%;
margin: 6px 0 0;
font-size: 16px;
color: #fff;
text-align: right;
letter-spacing: 0;
text-shadow: 0 1px 2px #2B2B2B;
float: left; }
.outline-group {
border: 2px solid #fff;
border-radius: 10px;
margin: 10px 0 20px;
position: relative;
padding: 15px 1% 0 1%;
float: left;
width: 100%; }
.general-settings .outline-group {
float: left;
width: 100%;
padding-bottom: 20px; }
.outline-group h3 {
padding: 0 6px;
font-size: 18px;
position: absolute;
top: -11px;
left: 15px;
clear: both;
background-color: #fff;
color: #646464;
text-shadow: none;
border-radius: 5px;
font-family: proxima_novalight, Helvetica, sans-serif; }
@media only screen and (max-width: 1550px) {
.form-group {
margin-bottom: 10px; }
.form-group.medium-groups-container {
padding-left: 15%; }
.form-group.small-groups-container {
padding-left: 17%; }
.form-group .input-group {
width: 100%; }
.form-group .input-group.all-modifier-price .currency {
left: calc(40% + 68px); }
.form-group .input-group.left .currency,
.form-group .input-group.right .currency {
left: calc(25% + 40px); }
.form-group .input-group.tax-amount .percent {
right: 56%; }
.form-group .input-group h2 {
width: 25%; }
.form-group .input-group .plus-button,
.form-group .input-group .eye-button {
margin-right: 50px; }
.form-group .icon-group {
width: 50%; }
.form-group .carousel-group {
width: 100%; }
.form-group .carousel-group h2 {
width: 25%; }
.form-group .toggle-set {
width: 100%; }
.form-group .toggle-set h2 {
width: 30%; }
.form-group .multiple-inputs .input-container label {
right: 0; }
.form-group .radio-group {
width: 40%; }
.form-group .radio-group:first-child {
margin-left: 5%; }
.general-settings .form-group .radio-group.horizontal {
margin-left: 0; }
.general-settings .form-group .radio-group.horizontal h2 {
width: 12%; } }
.item-setup .first-page .form-group.medium-groups-container {
padding-left: 0; }
.item-setup .first-page .input-group.left,
.item-setup .first-page .select-group.left {
width: 65%; }
.item-setup .first-page .input-group.left h2,
.item-setup .first-page .select-group.left h2 {
width: 20%; }
.item-setup .first-page .input-group.left input,
.item-setup .first-page .input-group.left select,
.item-setup .first-page .select-group.left input,
.item-setup .first-page .select-group.left select {
width: 60%; }
.item-setup .first-page .input-group.right,
.item-setup .first-page .select-group.right {
width: 35%; }
.item-setup .first-page .input-group.right input,
.item-setup .first-page .select-group.right input {
width: 40%; }
.item-setup .first-page .input-group.multi-select input,
.item-setup .first-page .select-group.multi-select input {
width: calc(80% - 95px); }
.item-setup .first-page .icon-group {
width: 32%; }
.item-setup .first-page .icon-group .icon-container {
margin-left: 18px; }
.item-setup .first-page .tax-toggle {
width: 350px;
margin-top: 10px; }
.item-setup .outline-group {
float: left;
padding-bottom: 20px; }
.item-setup .custom-attributes,
.item-setup .weight {
width: 48%; }
.item-setup .custom-attributes {
min-height: 263px; }
.item-setup .custom-attributes .input-group {
width: 96%; }
.item-setup .custom-attributes .input-group h2 {
text-align: left; }
.item-setup .custom-attributes .input-group input {
margin-left: 10px;
width: 65%; }
.item-setup .checkbox-group {
float: left;
margin: 20px 0 0 50px; }
.item-setup .weight .outline-group {
padding-left: 10px; }
.item-setup .weight .input-group.number {
width: 42%; }
.item-setup .weight .input-group.number.tare-weight {
width: 58%; }
.item-setup .weight .input-group.number.tare-weight h2 {
width: 55%;
text-align: left; }
.item-setup .weight .input-group.number.tare-weight input {
width: 37%;
float: none; }
.item-setup .weight .input-group.number.tare-weight .error-block {
left: calc(92% - 25px); }
.item-setup .weight .input-group.number input {
margin-left: 0;
width: 50%;
float: right;
margin-right: 10px; }
@media only screen and (max-width: 1550px) {
.item-setup .first-page .input-group.left {
width: 55%; }
.item-setup .first-page .input-group.left input,
.item-setup .first-page .input-group.left select {
width: 58%; }
.item-setup .first-page .input-group.left h2 {
padding-right: 0;
width: 30%; }
.item-setup .first-page .input-group.right {
width: 40%; }
.item-setup .first-page .input-group.right input {
width: 50%; }
.item-setup .first-page .input-group.right h2 {
width: 31%;
padding-right: 0; }
.item-setup .first-page .input-group.multi-select input {
width: 45%; }
.item-setup .first-page .input-group.multi-select .plus-button {
margin-right: 5px; }
.item-setup .input-group textarea {
width: 80%; }
.item-setup .checkbox-group {
margin-left: 5px; }
.item-setup .custom-attributes .input-group h2 {
width: 45%;
padding-right: 0; }
.item-setup .custom-attributes .input-group input {
width: calc(55% - 10px); }
.item-setup .weight .input-group.number.tare-weight h2 {
width: 40%; }
.item-setup .form-group .input-group.right .currency {
left: calc(30% + 40px); } }
.employee-setup .form-group h2 {
text-align: left; }
.employee-setup .outline-group .form-group h2 {
padding-left: 15px; }
.employee-setup .full-name-block h2 {
width: 17%; }
.employee-setup .full-name-block .first-name {
width: 50%; }
.employee-setup .full-name-block .first-name input {
width: 83%;
margin-left: 0; }
.employee-setup .full-name-block .first-name .error-block {
left: calc(100% - 25px); }
.employee-setup .full-name-block .middle-name {
width: 10%; }
.employee-setup .full-name-block .middle-name input {
width: 70%;
margin: 0 15%; }
.employee-setup .full-name-block .middle-name .error-block {
left: 70%; }
.employee-setup .full-name-block .last-name {
width: 40%; }
.employee-setup .full-name-block .last-name input {
width: 100%;
margin-left: 0; }
.employee-setup .input-group.jobs:not(.left) {
width: 100%; }
.employee-setup .input-group.jobs:not(.left) > div {
width: calc(92% - 45px);
float: left; }
.employee-setup .input-group.jobs:not(.left) h2 {
width: 8%; }
.employee-setup .input-group.jobs:not(.left) .plus-button {
margin-right: 0; }
.employee-setup .input-group.jobs.left > div {
width: 65%;
float: left; }
.employee-setup .input-group.jobs.left h2 {
width: 17%; }
.employee-setup .input-group.jobs input {
width: 100%;
margin-left: 0; }
.employee-setup .input-group.jobs .error-block {
left: calc(80% - 20px); }
.employee-setup .image-container {
height: 89px;
padding-top: 18px; }
.employee-setup .image-container .icon {
margin-left: 20px; }
.employee-setup .pay-rate.small h2 {
padding-left: 20px; }
.employee-setup .pay-rate.small input {
width: 35%; }
.employee-setup .pay-rate.small .currency {
right: 53%; }
.employee-setup .pay-rate.small .error-block {
left: calc(65% + 5px); }
.employee-setup .login-pin.input-group h2 {
width: 30%; }
.employee-setup .login-pin.input-group > div {
float: left;
width: 30%; }
.employee-setup .login-pin.input-group input {
width: 100%;
margin-left: 0;
text-align: center; }
.employee-setup .login-pin.input-group .disabled-pin {
width: 30%; }
.employee-setup .login-pin.input-group .reset {
width: 35%;
font-size: 17px;
padding: 4px 0; }
.employee-setup .login-pin.input-group .error-block {
left: calc(59% - 20px); }
.employee-setup .description h2 {
width: 100%;
text-align: center; }
.employee-setup .email input {
width: 56%;
margin-left: 0; }
.employee-setup .contact-info-group input {
margin-left: 0; }
.employee-setup .contact-info-group .phone .error-block {
left: calc(80% - 25px); }
.employee-setup .contact-info-group .email .error-block {
left: calc(86% - 25px); }
.employee-setup .address-block .address-line {
width: 100%; }
.employee-setup .address-block .address-line h2 {
width: 15%; }
.employee-setup .address-block .address-line input {
width: 78%; }
.employee-setup .address-block input {
width: 100%; }
.employee-setup .address-block .city {
width: 40%;
margin-left: 15%; }
.employee-setup .address-block .postal-code {
width: 25%;
margin-left: 10px; }
.employee-setup .address-block .postal-code .error-block {
left: calc(100% - 25px); }
.employee-setup .address-block .state {
width: 10%;
margin-left: 10px; }
.employee-setup .address-block .state .error-block {
right: 12%; }
@media only screen and (max-width: 1700px) {
.employee-setup .form-group .input-group .plus-button {
margin-right: 10px; } }
@media only screen and (max-width: 1550px) {
.employee-setup .form-group .input-group .plus-button {
margin-right: 5px; }
.employee-setup .form-group .input-group.phone h2,
.employee-setup .form-group .input-group.email h2 {
width: 30%; }
.employee-setup .pay-rate.small h2 {
width: 40%; }
.employee-setup .pay-rate.small .currency {
left: calc(40% + 40px); }
.employee-setup .toggle-set h2 {
width: 40%; }
.employee-setup .login-pin.input-group h2 {
width: 32%; } }
.job-setup .input-group {
width: 92%; }
.job-setup .input-group h2 {
text-align: left;
width: 20%; }
.job-setup .input-group input {
width: 65%; }
.job-setup .input-group.multi-select input {
width: calc(80% - 95px); }
.job-setup .input-group.name .error-block {
left: calc(85% + 5px); }
.job-setup .toggle-set h2 {
padding-right: 25px;
width: 50%; }
.job-setup .toggle-set nav {
max-width: 155px;
width: 45%; }
.job-setup .permissions {
width: 72%;
margin: -7px auto 0;
font-size: 17px;
padding: 15px 0; }
@media only screen and (max-width: 1550px) {
.job-setup .form-group .input-group .plus-button {
margin-right: 20px; } }
.discounts .form-group h2 {
text-align: left; }
.discounts .form-group input {
margin-left: 0; }
.discounts .form-group .input-group.name h2 {
width: 20%; }
.discounts .form-group .input-group.name input {
width: 80%; }
.discounts .form-group .input-group.name .error-block {
left: calc(100% - 25px); }
.discounts .form-group .toggle-set.apply-automatically h2 {
float: right; }
.discounts .form-group .toggle-set.apply-automatically nav {
float: right; }
.discounts .outline-group.left {
width: 39%;
float: left;
margin-left: 0; }
.discounts .outline-group.right {
width: 59%;
float: right; }
.discounts .outline-group .currency .currency {
right: 85px;
top: 23px; }
.discounts .outline-group .form-group {
margin-top: 10px; }
.discounts .outline-group .form-group:last-child {
margin-top: 0;
margin-bottom: 10px; }
.discounts .outline-group .form-group.days-block {
margin-bottom: 20px; }
.discounts .outline-group.radio-group .radio-button {
width: 100%; }
.discounts .outline-group.radio-group .radio-button .circle-check-label {
margin-left: 20px; }
.discounts .outline-group.radio-group .radio-button .circle-check-label span {
float: left;
margin-left: 10px;
margin-right: 0; }
.discounts .outline-group.radio-group .radio-button > .radio-input {
margin: -5px 10px 0 0;
float: right;
width: 90px; }
.discounts .outline-group.radio-group .radio-button > .radio-input input {
width: 100%; }
.discounts .outline-group.radio-group .radio-button > .radio-input .error-block {
left: calc(85% + 5px);
top: 20px; }
.discounts .outline-group.restrictions .input-group {
width: 100%; }
.discounts .outline-group.restrictions .input-group h2 {
margin-left: 10px; }
.discounts .outline-group.restrictions .input-group input {
width: 55%; }
.discounts .outline-group.restrictions .input-group .plus-button {
margin-right: 5px; }
.discounts .outline-group.restrictions .input-group .error-block {
right: 55px; }
.discounts .days-toggle {
width: 210px; }
.discounts .days {
width: calc(100% - 220px);
position: relative; }
.discounts .days .day {
width: 14.2%;
border: 1px solid grey; }
.discounts .set-date,
.discounts .set-time {
width: 100%;
float: left; }
.discounts .set-date .date-toggle,
.discounts .set-date .set-time,
.discounts .set-time .date-toggle,
.discounts .set-time .set-time {
width: 300px; }
.discounts .set-date .input-group,
.discounts .set-time .input-group {
width: 200px;
float: left;
padding-top: 5px;
margin-left: 20px; }
.discounts .set-date .input-group input,
.discounts .set-time .input-group input {
width: 100%;
height: 50px; }
.discounts .set-date .input-group .error-block,
.discounts .set-time .input-group .error-block {
right: 1px;
top: 17px; }
.discounts .set-date .display-time,
.discounts .set-date .display-date,
.discounts .set-time .display-time,
.discounts .set-time .display-date {
width: 200px;
height: 51px;
background: white;
padding: 17px 0;
margin-top: -2px;
float: right;
font-size: 15px;
text-align: center;
cursor: pointer; }
.discounts .set-date .display-time.disabled,
.discounts .set-date .display-date.disabled,
.discounts .set-time .display-time.disabled,
.discounts .set-time .display-date.disabled {
background: lightgray;
opacity: 0.6;
cursor: not-allowed; }
@media only screen and (max-width: 1550px) {
.discounts .outline-group.restrictions .input-group h2 {
width: 30%; } }
.customers .form-group {
margin-bottom: 15px; }
.customers .form-group h2 {
text-align: left;
width: 18%; }
.customers .form-group .input-group,
.customers .form-group .carousel-group {
width: 100%; }
.customers .form-group .input-group.large input {
width: 75%; }
.customers .form-group .carousel-group {
float: left;
width: 33%; }
.customers .form-group .carousel-group h2 {
width: 30%; }
.customers .form-group .carousel-group .options-carousel {
width: 65%;
margin-left: 10px; }
.customers .outline-group h2 {
padding-left: 10px; }
.customers .full-name-block h2 {
width: 17%; }
.customers .full-name-block .first-name {
width: 50%; }
.customers .full-name-block .first-name input {
width: 83%;
margin-left: 0; }
.customers .full-name-block .first-name .error-block {
left: calc(100% - 25px); }
.customers .full-name-block .middle-name {
width: 10%; }
.customers .full-name-block .middle-name input {
width: 70%;
margin: 0 15%; }
.customers .full-name-block .middle-name .error-block {
left: 70%; }
.customers .full-name-block .last-name {
width: 40%; }
.customers .full-name-block .last-name input {
width: 100%;
margin-left: 0; }
.customers .input-group.phone {
width: 20%;
float: left; }
.customers .input-group.phone input {
width: 100%;
margin: -15px 0 0 15px; }
.customers .input-group.phone .error-block {
left: calc(100% - 10px);
top: 19px; }
.customers .tax-exempt {
width: 40%;
margin-top: 3px;
float: right; }
.customers .tax-exempt h2 {
width: 40%;
padding-left: 0; }
.customers .tax-exempt .toggle-set nav {
width: 55%; }
.customers .address-block .address-line {
float: right;
width: 65%;
margin-top: -10px; }
.customers .address-block .address-line input {
width: 93%;
margin-left: 15px; }
.customers .address-block input {
width: 100%; }
.customers .address-block .city {
width: 37%;
margin-left: 18%; }
.customers .address-block .state {
width: 10%;
margin-left: 10px; }
.customers .address-block .state .error-block {
left: calc(100% + 5px); }
.customers .address-block .postal-code {
width: 25%;
margin-left: 10px; }
.customers .address-block .postal-code .error-block {
left: calc(100% + 5px); }
.customers .email .error-block {
left: calc(93% + 5px); }
.customers .customer-tags input {
width: 66%; }
@media only screen and (max-width: 1550px) {
.customers .form-group .input-group .plus-button {
margin-right: 33px; } }
.order-types .input-group {
width: 100%; }
.order-types .input-group h2 {
text-align: center; }
.order-types .input-group .plus-button {
margin-right: 60px; }
.order-types .input-group.currency .currency {
left: calc(30% + 40px); }
.order-types .toggle-set h2 {
width: 50%; }
.order-types .toggle-set .toggle {
width: 50%; }
@media only screen and (max-width: 1550px) {
.order-types .input-group .plus-button {
margin-right: 100px; }
.order-types .input-group.currency .currency {
left: calc(25% + 40px); } }
.timeclock#main-content {
width: 96%;
max-width: none;
height: calc(100% - 57px);
padding-bottom: 30px; }
.timeclock > .ember-view {
float: left;
width: 25%;
height: 100%; }
.timeclock .list-search-container {
width: 100%;
height: calc(100% - 15px); }
.timeclock .list-search-container .list-search {
height: 100%; }
.timeclock .list-search-container .list-search header {
border-radius: 7px 7px 0 0; }
.timeclock .list-search-container .list-search .item-list {
height: calc(100% - 105px); }
.timeclock .three_fifth.last {
width: 73%; }
.timeclock #page-data {
height: calc(100% - 15px); }
.timeclock #page-data header {
border-radius: 7px 7px 0 0; }
.timeclock #page-data-content {
padding: 0;
height: calc(100% - 101px);
overflow: auto;
min-height: 0;
border-radius: 0 0 7px 7px; }
.timeclock .timeclock-header {
width: 100%;
overflow: hidden;
padding-left: 27%; }
.timeclock .shifts-filter {
float: left;
padding-top: 5px; }
.timeclock .shifts-filter .from,
.timeclock .shifts-filter .to {
float: left;
margin-right: 20px;
text-transform: uppercase;
color: white;
font-size: 18px;
font-weight: bold; }
.timeclock .shifts-filter .from .display-date,
.timeclock .shifts-filter .to .display-date {
width: 170px;
height: 21px;
border-radius: 5px;
color: #5a5a5a;
background: white;
margin-left: 10px;
padding-top: 1px;
float: right;
font-size: 17px;
font-weight: normal;
text-align: center;
cursor: pointer; }
.timeclock .add-shift {
width: 150px;
float: right;
font-size: 16px;
padding: 5px 10px;
border-bottom: none;
background: #008fe9; }
.timeclock .add-shift:hover {
background: #006fb8; }
.timeclock .shifts-header {
border-collapse: collapse;
width: 100%;
background: white; }
.timeclock .shifts-header thead {
background: grey;
color: white;
text-transform: uppercase;
text-align: left; }
.timeclock .shifts-header thead th {
padding: 10px 10px;
width: 20%; }
.timeclock .shifts {
width: 100%;
background: white;
border-collapse: collapse; }
.timeclock .shifts tbody {
height: 100%;
overflow: auto; }
.timeclock .shifts tbody tr.row:hover {
background: #e2e2e2;
cursor: pointer; }
.timeclock .shifts tbody tr.row.expanded {
background: #00baf2;
color: white; }
.timeclock .shifts tbody tr:nth-child(odd) {
background: #f1f1f1; }
.timeclock .shifts tbody tr.shift-details {
background: white;
border-top: 1px solid #8c8c8c; }
.timeclock .shifts tbody tr td {
padding: 10px 10px;
width: 20%; }
.timeclock .form-group .input-group {
width: 25%;
float: left; }
.timeclock .form-group .input-group h2 {
color: #5a5a5a;
font-weight: bolder;
text-shadow: none; }
.timeclock .form-group .input-group .error-block {
left: calc(85% + 5px); }
.timeclock .form-group .input-group.notes {
width: 50%; }
.timeclock .form-group .input-group.display-only .text {
border: 1px solid #8c8c8c;
cursor: pointer;
width: 55%;
margin: 0 0 0 30px;
padding: 0 10px;
height: 30px;
font-size: 15px;
line-height: 30px;
border-radius: 2px;
vertical-align: middle;
display: inline-block;
font-family: proxima_novalight, Helvetica, sans-serif; }
.timeclock .form-group .input-group.currency .currency {
right: 55%; }
.timeclock .form-group .input-group input:not(:disabled),
.timeclock .form-group .input-group select,
.timeclock .form-group .input-group textarea {
color: black; }
.timeclock .form-group .input-group input {
width: 55%; }
.timeclock .form-group .input-group select {
width: 55%;
border-radius: 2px;
border: 1px solid #8c8c8c; }
.timeclock .form-group .input-group input:disabled {
color: inherit;
background: rgba(90, 90, 90, 0.25) !important; }
.timeclock .form-group .input-group.text-area h2 {
text-align: right;
width: 15%; }
.timeclock .form-group .input-group.text-area textarea {
width: calc(75% + 3px);
float: left;
margin-left: 30px; }
.timeclock .buttons .button {
width: 150px;
float: left;
font-size: 16px;
padding: 5px 10px;
border-bottom: none;
background: #008fe9;
margin-right: 35px; }
.timeclock .buttons .button:hover {
background: #006fb8; }
.timeclock .buttons .button:disabled {
background: lightgray; }
.timeclock .buttons .clock-out,
.timeclock .buttons .delete-shift {
float: left; }
.timeclock .buttons .cancel,
.timeclock .buttons .save,
.timeclock .buttons .view-shift {
float: right; }
.timeclock .buttons .delete-shift {
background: #ff3333;
margin-left: 50px; }
.timeclock .buttons .delete-shift:hover {
background: #c43131; }
.datepicker .ui-datepicker {
width: 100%;
padding: 0; }
.datepicker .ui-widget-header {
background: linear-gradient(to bottom, #2bd0f4 0%, #22c9f3 1%, #21c4f0 4%, #1eb2ec 39%, #199ae8 61%, #199ae8 96%, #1a9fe9 99%, #1790e7 100%); }
.datepicker .ui-widget-header .ui-corner-all {
width: 50px;
height: 100%;
display: block;
top: 0;
cursor: pointer; }
.datepicker .ui-widget-header .ui-corner-all .ui-icon {
top: 15px;
height: 20px;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent; }
.datepicker .ui-widget-header .ui-corner-all.ui-datepicker-prev {
left: 0; }
.datepicker .ui-widget-header .ui-corner-all.ui-datepicker-prev .ui-icon-circle-triangle-w {
left: 20px;
border-right: 20px solid white; }
.datepicker .ui-widget-header .ui-corner-all.ui-datepicker-next {
right: 0; }
.datepicker .ui-widget-header .ui-corner-all.ui-datepicker-next .ui-icon-circle-triangle-e {
right: 20px;
border-left: 20px solid white; }
.datepicker .ui-datepicker-calendar {
margin-bottom: 0;
border: solid black;
border-width: 0 0 1px 1px; }
.datepicker .ui-datepicker-calendar thead {
background: black; }
.datepicker .ui-datepicker-calendar thead th span {
font-weight: normal;
color: white;
font-size: 12px;
text-transform: uppercase; }
.datepicker .ui-datepicker-calendar tbody td a,
.datepicker .ui-datepicker-calendar tbody td span {
background-color: #199AE8;
color: white;
border: solid black;
border-width: 1px 1px 0 0;
margin: -1px -1px;
padding: 7px 4px; }
.datepicker .ui-datepicker-calendar tbody td a:hover {
background: #27d1ff; }
.datepicker .ui-datepicker-calendar tbody td.start-date a,
.datepicker .ui-datepicker-calendar tbody td.start-date span {
background: #79ba2a; }
.datepicker .ui-datepicker-calendar tbody td.end-date a,
.datepicker .ui-datepicker-calendar tbody td.end-date span {
background: red; }
.datepicker.edit-end-date td.ui-datepicker-current-day a,
.datepicker.edit-end-date td.ui-datepicker-current-day a:hover {
background: red; }
.datepicker.edit-start-date tbody td.ui-datepicker-current-day a,
.datepicker.edit-start-date tbody td.ui-datepicker-current-day a:hover {
background: #79ba2a; }
.departments .heading {
margin: 70px auto 70px auto;
font-size: 40px;
color: #414040;
text-shadow: 0 1px 2px #8F8F8F;
font-family: proxima_novalight, Helvetica, sans-serif;
text-align: center; }
.departments .background-image {
width: 65%;
max-width: 400px;
margin: 0 auto;
display: block; }
.receipt .input-group.minimum-threshold h2 {
width: 45%;
padding-right: 30px; }
.receipt .input-group.minimum-threshold input {
margin-left: 10px; }
.receipt .input-group.minimum-threshold .error .error-block {
left: calc(56% + 5px); }
.receipt .input-group.minimum-threshold .currency {
left: calc(41% + 40px); }
/* Clear Fix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0; }
* html .clearfix {
zoom: 1; }
/* Page Data ----- */
#page-data {
margin: 15px 0 0 0;
clear: both; }
#page-data header {
margin: 0;
padding: 12px 0;
text-align: center;
position: relative;
border-radius: 2px 2px 0 0;
background: linear-gradient(to bottom, #444444 0%, #3e3e3e 2%, #414141 16%, #353535 40%, #292929 54%, #242424 64%, #242424 88%, #212121 94%, #181818 98%, #171717 100%); }
#page-data header h2 {
font-size: 18px;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-family: proxima_nova_rgbold, Helvetica, sans-serif; }
#page-data header .square-toggle {
margin-top: -3px;
background: none;
width: 33% !important;
position: absolute;
top: 3px;
right: 0 !important; }
#page-data header .square-toggle.right {
right: 0; }
#page-data header .square-toggle.left {
left: 0; }
#page-data header .square-toggle h3 {
width: 45%;
margin: 6px 1% 0 0;
font-size: 16px;
line-height: 20px;
color: #fff;
text-align: right;
letter-spacing: 1px;
text-shadow: 0 1px 2px #2B2B2B;
float: left; }
#page-data header .square-toggle.left h3 {
width: 25%;
margin: 6px 1% 0 0;
font-size: 16px;
line-height: 20px;
color: #fff;
letter-spacing: 1px;
text-shadow: 0 1px 2px #2B2B2B;
text-align: left;
float: left; }
#page-data header .square-toggle ul {
background-color: #3e3e3e;
width: 50%;
position: relative;
float: right; }
#page-data header .square-toggle.left ul {
float: left; }
#page-data header .square-toggle ul li a {
margin: 0;
padding: 5px 0;
font-size: 16px;
line-height: 18px;
color: #d2d2d2;
border-right: 1px solid #383839;
text-transform: uppercase;
display: block;
text-shadow: 0 1px 1px #424242;
font-family: proxima_novasemibold, Helvetica, sans-serif; }
/* Page Data Content ----- */
#page-data-content {
min-height: 585px;
padding: 20px 2%;
position: relative;
overflow: hidden; }
#page-data-content.mock {
min-height: 631px; }
#page-data-content .mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: grey;
opacity: 0.6;
display: none;
z-index: 10; }
#page-data-content .mask.active {
display: block; }
@media only screen and (max-width: 1550px) {
#page-data-content {
padding: 10px 2%; } }
/* Media Queries for Universals */
@media only screen and (max-width: 1100px) {
/* Search */
#list-search-field.wide {
width: 79%; } }
@media only screen and (max-width: 960px) {
/* Main Content ----- */
#main-content.sidebar {
width: 65%;
margin: 30px 0 0 33.3%; }
/* Search */
#list-search-field.wide {
width: 78%; } }
@media only screen and (max-width: 900px) {
/* Search */
#list-search-field.wide {
width: 76.3%; } }
@media only screen and (max-width: 800px) {
/* Search */
#list-search-field.wide {
width: 75%; } }
.left {
float: left; }
.right {
float: right; }
.three_fifth {
float: right; }
.three_fifth.last {
width: 60%;
height: 100%; }
/* Media Queries for Columns */
@media only screen and (max-width: 600px) {
.three_fifth {
width: 99% !important;
margin: 0 auto !important;
text-align: center;
float: none;
clear: both; } }
i.ht-icon {
font-family: "Harbortouch";
padding-left: 7.5px;
font-style: normal;
font-size: 30px;
line-height: 30px;
text-align: center; }
.overlay {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
z-index: 800; }
.manage-day-end {
width: 85%;
margin: 0 auto; }
.manage-day-end .display-day-end-time {
width: 50%;
margin: 0 0 0 30px;
padding: 5px 12px 0;
height: 30px;
font-size: 15px;
line-height: 20px;
color: #939393;
border: 1px solid #8c8c8c;
background: white;
border-radius: 2px;
vertical-align: middle;
display: inline-block;
overflow: hidden;
font-family: proxima_novalight, Helvetica, sans-serif; }
@media only screen and (max-width: 1550px) {
#page-data header h2 {
padding-left: 20px;
font-size: 14px; }
.manage-day-end {
width: 100%; } }
/*# sourceMappingURL=echo-web-app.css.map */