/*          COLOURS

    ORANGE                  #ED8023
    BLACK                   #1D2127
    FONT-COLOR              #42526E
    BACKGROUND-GREY         #F4F5F7
    NAV HOVER               #EAECEF

    HAMBURGER-BACKGROUND    #E2E2E2

    header-colo             #000000
    text-color              #777777

*/

/******     general    *********/

@font-face {
    font-family: 'RobotoLight';
    src: url('fonts/Roboto-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'RobotoMedium';
    src: url('fonts/Roboto-Medium.ttf') format('truetype');
}

* {
    padding: 0;
    margin: 0;
}

#no-print-content {
    height: 100%;
    width: 100%;
    background-color: transparent;
}

#print-content {
    width: 100%;
    background-color: #fff;
}

#no-print-content.hide, #print-content.hide {
    display: none;
}

button {
    outline: none !important;
}

button:focus {
    outline: none !important;
}

a {
    outline: none !important;
}

a:focus {
    outline: none !important;
}

div, input {
    outline: none;
}

html, body {
    min-height: 100% !important;
    height: 100%;
    background-color: #000;
}

.views-background {
    height: 100%;
    width: 100%;
    background-color: #fff;
}

body {
    font-family: RobotoMedium, arial, sans-serif;
    color: #000000;
}

.color-red {
    color: rgb(253, 66, 57);
}

.color-green {
    color: rgb(48, 161, 105);
}

.t-color {
    color: #777777;
}

.visible {
    display: block;
}

.hidden {
    display: none;
}

.view {
    height: 100%;
    display: none;
    background-color: #fff;
}

.orange {
    color: #ED8023;
}

table {
    padding: 0;
    margin: 0;
}

h3, h4 {
    margin: 0;
}

h3 {
    padding: 15px;
}

h4 {
    padding: 10px;
}

p {
    font-family: RobotoLight, arial, sans-serif;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #1d1d1d;
}

::-moz-placeholder { /* Firefox 19+ */
    color: #1d1d1d;
}

:-ms-input-placeholder { /* IE 10+ */
    color: #1d1d1d;
}

:-moz-placeholder { /* Firefox 18- */
    color: #1d1d1d;
}

.ta-left-btn {
    text-align: left;
    padding: 5px 10px;
    height: auto;
    color: #ED8023;
    background-color: #fff;
    border: 1px solid #ED8023;
    border-radius: 6px;
    font-family: RobotoLight, arial, sans-serif;
    min-height: 40px;
}

.progress-danger {
    background-color: red;
}

.bar {
    height: 5px;
}

.progress {
    height: 5px;
    display: none;
}

.password-verdict {
    display: none;
    width: 100%;
    text-align: center;
    margin-top: 0px;
    font-family: RobotoLight, arial, sans-serif;
}

.center {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.height100 {
    height: 100%;
}

.fs-small {
    font-size: 11px;
}

.nopadding {
    padding: 0 !important;
}

.nomargin {
    margin: 0 !important;
}

button {
    height: auto;
    border: none;
}

textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    resize: none;
    border: 0.5px solid #ccc;
    border-radius: 6px;
    background-color: #F4F5F7;
    padding: 10px;
    font-family: RobotoLight, arial, sans-serif;
}

.m-bot-0 {
    margin-bottom: 0;
}

.m-left-5 {
    margin-left: 5px;
}

.m-top-5 {
    margin-top: 5px;
}

.m-top-10 {
    margin-top: 10px;
}

.m-bottom-10 {
    margin-bottom: 10px;
}

.m-bottom-15 {
    margin-bottom: 15px;
}

.m-bottom-20 {
    margin-bottom: 20px;
}

.m-top-20 {
    margin-top: 20px;
}

.p-top-30 {
    padding-top: 30px;
}

.d-none {
    display: none;
}


.padding5 {
    padding-left: 5px;
    padding-right: 5px;
}

.text-center {
    width: 100%;
    text-align: center;
}

.def-table tr td {
    padding: 3px;
}

table.border {
    border-collapse: collapse;
}

table.border tr td {
    border: 0.5px solid #e3e3e3;
}

.def-input {
    height: 40px;
    border: none;
    border-radius: 6px;
    background-color: #F4F5F7;
    padding: 0 10px;
    text-align: center;
    font-family: RobotoLight, arial, sans-serif;
}

.disabled {
    color: #c2c4c6;
}

select {
    height: 40px;
    width: 100%;
    border: none;
    background-color: #F4F5F7;
    border-radius: 6px;
    -webkit-appearance: none;
}

.btn-group-container {
    height: 40px;
    width: 100%;
}

.def-btn {
    height: 40px;
    color: #ED8023;
    background-color: #fff;
    border: 1px solid #ED8023;
    border-radius: 6px;
    font-family: RobotoLight, arial, sans-serif;
}



.ccredit-btn {
    width: 50%;
    background-color: white;
    color: #ED8023;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border: 1px solid #ED8023;
}

.cscan-btn {
    width: 50%;
    background-color: #ED8023;
    color: white;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #ED8023;
}

.btn-group-b {
    height: 40px;
}

.product-group-button, .sd-customer-button, .customer-product-group-button, .au0-button, .gvl-button {
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    min-height: 40px;
    height: auto;
}

.chart-canvas-container {
    width: 100%;
    overflow: scroll;
    padding: 0 0 10px 0;
}

.sd-customer-button, .mult-line-btn {
    padding-top: 8px;
    padding-bottom: 8px;
}

.show-popup {
    line-height: 40px;
    height: 40px;
    text-align: center;
    color: #000;
    background-color: #F4F5F7;
    border-radius: 6px;
    font-family: RobotoLight, arial, sans-serif;
}

.show-popup:hover {
    cursor: pointer;
}

.def-btn:hover, .ta-left-btn:hover, .delete-upload:hover {
    background-color: #ED8023;
    color: #fff;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}


.shop-item-button {
    height: auto;
    padding: 2px 0 2px;
}

.navbar-button {
    height: 50px;
    width: 50px;
    background-position: center;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-color: transparent;
}

.cart-badge {
    display: none;
    padding: 2px 7px;
    background-color: red;
    color: #fff;
    float: right;
    border-radius: 15px;
    margin-right: -44px;
    margin-top: 5px;
    font-size: 12px;
}

.parent-width, .w-100 {
    width: 100%;
}

.w-100p {
    width: 100px;
}

.w-110p {
    width: 110px;
}

.pl-30 {
    padding-left: 30px;
}

legend {
    border-bottom: 0.5px solid #ED8023;
}

.icon-button {
    background-position: center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
}

.left-icon-btn {
    padding-left: 26px;
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: 10px center;
}

.print-btn {
    background-image: url("../appicons/print.svg");
}

.export-btn {
    background-image: url("../appicons/export.svg");
}

.copy-btn {
    background-image: url("../appicons/copy.svg");
}

.border-bottom {
    border-bottom: 0.5px solid #ED8023;
}

.text-left {
    text-align: left;
}

#connection-status {
    height: 40px;
    width: 100%;
    background-color: rgb(253, 66, 57);
    position: absolute;
    display: none;
    z-index: 1000;
}

#connection-status h5 {
    color: white;
    font-family: RobotoLight, arial, sans-serif;
    margin-top: 12px;
}

/****** header content *********/
.header {
    height: 75px;
    width: 100%;
    background-color: #000000;
    border-bottom: 2px solid #ED8023;
    position: fixed;
}

.header table {
    margin-top: 5px;
    height: 70px;
}

.header table tr td:nth-child(1), .header table tr td:nth-child(3) {
    width: 50px;
}


.header-button {
    height: 40px;
    width: 40px;
    margin-top: 18px;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    display: none;
}

.visible {
    display: block;
}

#language-button {
    background-position: center;
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-image: url("../appicons/language.png");
}

.back-button {
    background-size: 25px 25px;
    margin-left: 10px;
    background-image: url("../appicons/back-icon.png");
}

#account-button {
    background-size: 32px 32px;
    background-image: url("../appicons/account-white.png");
}

.header img {
    width: 180px;
    margin-left: calc(50% - 90px);
    margin-top: 22px;
}

/****** main content *********/
.main-content {
    position: fixed;
    width: 100%;
    margin-top: 75px;
    height: calc(100% - 75px);
}

#frame-container {
    height: 100%;
    width: 100%;
}

.favorite-container, .view-premium-history {
    padding-bottom: 10px !important;
}

.view-favorites {
    padding: 0 5px;
}

DIV.frame {
    height: 100%;
    width: 100%;
    display: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.login-frame-wrapper {
    min-height: 410px;
    overflow: auto;
    height: calc(100% - 10px);
}

.logout-frame-wrapper {
    height: 100%;
}

.register-wrapper, .tandc-wrapper {
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.tandc-p {
    text-decoration: underline;
}

.orange {
    color: #ED8023;
}

.tandc-p:hover {
    cursor: pointer;
}

.tol {
    list-style: decimal;
    padding-left: 20px;
}

.tr {
    margin-right: 0;
    margin-left: 0;
}

.pl {
    width: 25px;
    float: left;
}

.pr {
    width: calc(100% - 25px);
    float: left;
    color: #777777;
}

.register-code-container {
    height: 40px;
    width: 290px;
    margin: 5px auto;
}

.register-code-container input {
    height: 40px;
    width: 28px;
    border: 2px solid #42526E;
    font-size: 19px;
    text-align: center;
    float: left;
    margin-left: 5px;
    border-radius: 0;
}

.register-code-container input:nth-child(1) {
    margin-left: 0;
}

.register-code-container h3 {
    padding: 5px 0 0 0;
    width: 10px;
    float: left;
    text-align: center;
}

.p-tandc {
    padding: 10px 0px;
}

.navigation-bar {
    /* TODO */
    /*display: block;*/
    display: none;
    height: 50px;
    width: 100%;
    background-color: #000000;
}

.navigation-bar ul {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.navigation-bar ul li {
    width: 20%;
    height: 100%;
    list-style: none;
    float: left;
}

.frame-wrapper {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.frame-header {
    width: 100%;
    height: 55px;
}

.frame-header-points {
    height: 100px;
}

.points-hint-placeholder {
    margin-top: -13px;
    font-size: 12px;
}

.header-size {
    font-size: 21px;
}

.subheader-size {
    font-size: 17px;
}

.terms-subheader {
    padding-left: 0;
}

.terms-subheader-size {
    font-size: 15px;
}

.frame-title {
    color: #000;
    font-size: 21px;
    margin-top: 5px;
}

.frame-title-sd {
    color: #000;
    font-size: 17px;
    margin-top: 5px;
}

.agent-button {
    padding-left: 15px;
    padding-right: 15px;
}

.agent-button-active {
    background-color: #ED8023;
    color: white;
}

.agent-button-inactive {
    color: #ED8023;
    border: 1px solid #ED8023;
    background-color: transparent;
}

.frame-body {
    height: calc(100% - 60px);
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.frame-body-full-height {
    height: 100%;
}

.frame-body-points {
    height: calc(100% - 100px);
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.frame-body-no-scroll {
    height: calc(100% - 55px);
    width: 100%;
}

.frame-body-points-no-scroll {
    height: calc(100% - 85px);
}

.shop-container {
    padding-left: 5px;
    padding-right: 5px;
    height: calc(100% - 65px);
}

.show-wrapper {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-left: 5px;
    padding-right: 5px;
    height: calc(100% - 70px);
    margin-top: 8px;
}

.points-text {
    margin-top: 0px;
    color: #000;
}

.points {
    margin-top: -13px;
    font-family: RobotoMedium, arial, sans-serif;
    font-size: 55px;
    color: #ED8023;
}

.scan-ul {
    font-family: RobotoLight, arial, sans-serif;
    padding: 12px 15px;
}

.scan-ul li {
    list-style: decimal;
}

.frame-body-history {
    height: calc(100% - 116px);
    margin-top: 8px;
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.history-title {
    font-family: RobotoMedium, arial, sans-serif;
}

#input-serialnumber {
    width: calc(100% - 110px);
    float: left;
    margin-left: 55px;
}

.history-button-bar {
    width: 100%;
    height: 40px;
    margin-top: 5px;
}

.list-header {
    height: 40px;
    width: 100%;
    /*background-color: #F4F5F7;*/
    line-height: 40px;
    padding: 0;
}

.premium-title {
    font-size: 16px;
}

.premium-points-label {
    height: 28px;
    margin-top: 17px;
}

.list-header-premium {
    height: 40px;
    line-height: 40px;
    width: calc(100% - 20px);
    margin-left: 10px;
    padding: 0;
}

.filter-row-table tr td:nth-child(2) {
    width: calc(50% - 10px);
}

.active-filter-button, .active {
    background-color: #ED8023;
    color: #fff;
}

.shop-filter-button {
    width: 100%;
    max-width: 200px;
}

.account-points-label, .employee-points-label {
    margin: 0;
    font-size: 35px;
    color: #ED8023;
}

.promos-panel {
    text-align: left;
}

.promos-table {
    width: 100%;
}

.promos-table tr td:nth-child(2) {
    width: 70px;
}

.promos-table tr td {
    padding: 3px 0;
}

.employee-panel, .promos-panel {
    margin-top: 10px;
    padding: 10px;
    background-color: #F4F5F7;
    border-radius: 6px;
}

.employee-panel table {
    width: 100%;
}

.employee-panel table tr td:nth-child(2) {
    width: 50px;
}

.employee-button-bar {
    width: 100%;
    max-width: 400px;
    margin: 15px auto 0 auto;
}

.eemp {
    max-width: 400px;
    margin: 5px auto 0 auto;
    display: block;
}

.employee-edit-button, .change-username-button, .change-password-button, .serialnumber-confirm-button, .delete-account-confirm-button, .overlay-left-button {
    /*width: 40px;
    height: 40px;
    background-color: transparent;
    background-image: url("../icons/file.png");*/
    width: calc(50% - 5px);
    float: left;
}

.employee-add-button, .employee-cancel-button, .overlay-right-button {
    width: calc(50% - 5px);
}

.change-username-cancel-button {
    /*width: 40px;
    height: 40px;
    background-color: transparent;
    background-image: url("../icons/cancel-orange.png");*/
    width: calc(50% - 5px);
    float: right;
}

.employee-delete-button, .employee-send-invitation-button, .code-delete-button, .code-send-button {
    /*display: block;
    margin: 15px auto 5px auto;*/
    display: inline-block;
    width: calc(50% - 3px);
}

.employee-send-invitation-button, .code-send-button {
    margin-left: 5px;
}

.delete-company-account, .add-employee-button {
    display: none;
}

.modal-error-text {
    color: rgb(253, 66, 57);
}

.cart-item-delete-button {
    padding: 0 5px;
    width: 80px;
    float: right;
}

.shop-item-wrapper {
    min-height: 150px;
    padding: 0px;

}

.shop-item {
    width: calc(100% - 10px);
    margin-left: 5px;
    background-color: #F4F5F7;
    padding: 5px 10px;
}

/*.shop-item:nth-child(odd) {
    background-color: rgba(237,128,35,0.13);
}

.shop-item:nth-child(even) {
    background-color: rgba(237,128,35,0.07);
}*/

.size-buttons-placeholder {
    overflow-y: auto;
}


.shop-item-image {
    width: 75%;
    /*height: 170px;*/
    max-width: 170px;
    margin: 5px auto;
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    object-fit: cover;
}

.home-item-image {
    width: 75%;
    margin: 5px auto;
    display: block;
}

.shop-item-name {
    height: 80px;
    margin-bottom: 10px;
    margin-top: 0;
}

.shop-item-name:hover, .shop-item-image:hover {
    cursor: pointer;
}

.shop-item-description {
    height: 50px;
    margin-top: -5px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cart-table-wrapper {
    background-color: #F4F5F7;
    border-radius: 6px;
    margin-top: 10px;
}

.cart-mobile-image {
    display: none;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 15px;
}

.cart-table-wrapper:nth-child(1) {
    margin-top: 0px;
}

.cart-table {
    width: 100%;
    background-color: #F4F5F7;
    border-radius: 6px;
}

.cart-table:nth-child(1) {
    margin-top: 0;
}

.cart-table tr td {
    padding: 5px;
}

.cart-table tr td:nth-child(1) {
    width: 30px;
}

.cart-table tr td:nth-child(4) {
    width: 75px;
}

.cart-history-panel {
    background-color: #F4F5F7;
    padding: 10px 10px 3px 10px;
}

.cart-history-panel:not(:first-child) {
    margin-top: 10px;
}

.modal-premium-text {
    padding-top: 10px;
    padding-bottom: 10px;
}

.versions-log-body {
    height: calc(100% - 100px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.log-close-button {
    width: calc(100% - 20px);
    margin-left: 10px;
}

.next-premium-cart {
    display: block;
    width: 145px;
    margin: 0 auto;
}

.next-premium-buttons {
    width: 300px;
    margin: 0 auto;
}

.next-premium-buttons button {
    width: 145px;
}

.next-premium-buttons button:nth-child(2) {
    margin-left: 10px;
}

.history-table tr {
    /*background-color: #F4F5F7;*/
    border-radius: 6px;
}

.history-table-spacer {
    height: 10px;
    background-color: #fff;
}

.history-table tr td:nth-child(1) {
    width: 100px;
}

.history-table tr td {
    padding: 8px 8px 8px 0px;
}

.sizes-table tr td:nth-child(1) {
    text-align: left;
    padding: 0;
    width: 60px;
}

.sizes-table tr td:not(:first-child), .premium-info-size-button, .size-button {
    width: 40px;
}

.sizes-table tr td:not(:first-child) {
    padding-right: 5px;
}

.selected {
    color: #fff;
    background-color: #ED8023;
}

.faq-image {
    width: 380px;
}


/****** navigation content *********/

.hamburger-container {
    /*display: none;*/
    display: block;
    position: absolute;
    bottom: 49px;
    width: 100%;
    background-color: #000000;
    overflow: auto;
    margin: 0;
    padding: 0;
    height: 0;
    -webkit-overflow-scrolling: touch;
}

.hamburger li a {
    font-family: RobotoLight, arial, sans-serif;
    font-size: 15px;
    color: #fff;
}

.hamburger li img {
    float: left;
    margin: 8px 15px 0 15px;
}

.desktop-hide {
    display: none;
}

.hamburger-emloyee-item {
    display: none;
}


.bills-container {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    list-style-type: none;
    height: 60%;
    margin-top: 10px;
    margin-bottom: 5px;
}

.bills-container li {
    display: inline-block;
    margin: 8px 8px 8px 3px;
    border-radius: 6px;
    -webkit-box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.75);
    border-radius: 4px;
}

.bills-container li img {
    height: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.delete-upload {
    display: block;
    height: 40px;
    width: calc(100% - 10px);
    margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
    color: #ED8023;
    font-family: RobotoLight, arial, sans-serif;
}

.bill {
    cursor: pointer;
}


.manual-overlay {
    background: white;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 6000;
    top: 0;
    left: 0;
    display: none;
}

#carousel, #carousel ul, #carousel li {
    min-height: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
}

#carousel {
    background: silver;
    overflow: hidden;
    width: 100%;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-transform-style: preserve-3d;
}

#carousel ul.animate {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

#carousel ul {
    transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
    -webkit-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

#carousel ul {
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    position: relative;
}

#carousel li {
    background-color: white;
    float: left;
    overflow: hidden;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(0, 0, 0);
}

#carousel li h2 {
    color: #fff;
    font-size: 30px;
    text-align: center;
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, .2);
}

/*#carousel li.pane1 { background: #42d692; }
#carousel li.pane2 { background: #4986e7; }
#carousel li.pane3 { background: #d06b64; }
#carousel li.pane4 { background: #cd74e6; }
#carousel li.pane5 { background: #9fe1e7; }*/

.mimg-wrapper {
    width: 100%;
    height: 65%;
    margin-top: 40px;
}

.mimg {
    width: 50%;
    display: block;
    margin: 0 auto;
}

.carousel-panel {
    height: 30px;
    width: calc(100% - 20px);
    margin-left: 10px;
}

.mtxt-wrapper {
    margin: 5px auto 0 auto;
    height: calc(35% - 135px);
    padding: 0 10px;
    overflow: auto;
}

.mtxt {
    padding-top: 0;
    margin-top: 0;
    text-align: center;
}

.mclose {
    width: 100%;
    margin-top: 10px;
}

.carousel-active {
    height: 10px;
    width: 10px;
    border-radius: 30px;
    margin: 13px 10px;
    background-color: #ED8023;
}

.carousel-inactive {
    height: 10px;
    width: 10px;
    border-radius: 30px;
    margin: 13px 10px;
    background-color: #c2c4c6;
}


.impressum-container, .pp-container, .conditions-container {
    padding-top: 20px;
}

.impressum-container h4, .pp-container h4, .conditions-container h4 {
    padding: 0;
}

.impressum-container p, .pp-container p, .conditions-container p {
    color: #777777;
}

.pp-container h5 {
    font-size: 15px;
}

.conditions-container ul {
    padding-right: 15px;
    list-style: decimal;
    padding-left: 20px;
}

.conditions-container ul li, .conditions-container ul li div {
    margin-top: 15px;
}

.return-label {
    background-color: #ED8023;
    opacity: 0.8;
    font-family: RobotoLight, arial, sans-serif;
    letter-spacing: 1px;
}

/****** footer content *********/

.log-ul {
    width: 100%;
    color: #777777;
    font-family: RobotoLight, arial, sans-serif;
    padding-left: 33px;
}

.log-ul li {
    padding: 0 5px;
}

/*.log-ul li img {
    margin-right: 10px;
}*/

.nav > li > a:hover {
    background-color: transparent;
}

.nav > li {
    cursor: pointer;
}

/****** Alert Dialog *********/

.overlay {
    background: rgba(20, 20, 20, 0.6);
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 5000;
    top: 0;
    left: 0;
    float: left;
    text-align: center;
    display: none;
}

#titleDialog {
    margin-top: 50%;
    background-color: white;
    border-radius: 6px;
    padding: 5px;
}

#countryDialog {
    /*height: 180px;*/
    height: 360px;
    margin-top: 50%;
    background-color: white;
    border-radius: 6px;
    padding: 5px;
}

#languageDialog {
    height: 225px;
    margin-top: 30%;
    background-color: white;
    border-radius: 6px;
    padding: 5px;
}

#upload-preview-dialog {
    background-color: #fff;
    border-radius: 6px;
    padding: 5px;
    width: 100%;
    height: calc(100% - 50px);
}

#upload-preview {
    height: calc(100% - 45px);
    overflow-x: scroll;
}

.full-height-overlay,
#editEmployeeOverlay,
#defaultAlertOverlay,
#employeeOverlay,
#loaderOverlay,
#confirmAlertOverlay,
#weblinkAlertOverlay,
#redeemAlertOverlay,
#shippingAddressOverlay,
#logOverlay,
#successAlertOverlay,
#premiumInfoOverlay,
#changeUsernameOverlay,
#changePasswordOverlay,
#serialnumberInputOverlay,
#deleteCompanyOverlay {
    background: rgba(20, 20, 20, 0.6);
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    float: left;
    text-align: center;
    display: none;
}

#defaultAlertOverlay,
#loaderOverlay,
#confirmAlertOverlay,
#weblinkAlertOverlay,
#redeemAlertOverlay,
#shippingAddressOverlay {
    padding-top: 90px;
}

.full-height-overlay,
#employeeOverlay,
#editEmployeeOverlay,
#logOverlay,
#changeUsernameOverlay,
#changePasswordOverlay,
#serialnumberInputOverlay,
#deleteCompanyOverlay,
#premiumInfoOverlay {
    padding-top: 70px;
}

#logOverlay {
    text-align: left;
}

#title-overlay {
    z-index: 20;
}

.overlay-scroll-body {
    height: calc(100% - 95px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.ovl-dialog,
#defaultAlertDialog,
#confirmAlertDialog,
#weblinkAlertDialog,
#redeemAlertDialog,
#shippingAddressDialog,
#employeeDialog,
#logDialog,
#successAlertDialog,
#premiumInfoDialog,
#changeUsernameDialog,
#changePasswordDialog,
#serialnumberInputDialog,
#deleteCompanyDialog {
    background-color: white;
}

#defaultAlertDialog,
#confirmAlertDialog,
#weblinkAlertDialog,
#redeemAlertDialog,
#shippingAddressDialog,
.ovl-dialog,
#employeeDialog,
#premiumInfoDialog,
#changeUsernameDialog,
#changePasswordDialog,
#serialnumberInputDialog,
#successAlertDialog,
#deleteCompanyDialog {
    border-radius: 6px;
}

.ovl-dialog {
    padding-left: 10px;
    padding-right: 10px;
    height: calc(100% - 50px);
}

.defaultDialog {
    background-color: white;
    padding: 10px;
    border-radius: 6px;
}

#premiumInfoDialog {
    padding: 10px;
}

.premiumOverlayAttrBar {
    width: 100%;
    height: 40px;
    display: none;
    margin-bottom: 15px;
}

#serialnumberInputDialog, #employeeDialog {
    height: calc(100% - 50px);
}

.premium-info-body {
    height: calc(100% - 135px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.height-with-size-bar {
    height: calc(100% - 185px);
}

#successAlertDialog {
    height: 170px;
    margin-top: 50%;
}

#logDialog, #premiumInfoDialog {
    height: calc(100% - 50px);
    border-radius: 6px;
}

.add-emloyee-btn-bar {
    height: 50px;
    background-color: #fff;
}

.alertHead {
    background-color: #000;
    color: #fff;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 3px 10px;
}

#defaultAlertDialogBody, #confirmAlertDialogBody {
    color: #777777;
}

.alert-ok-button,
.alert-yes-button,
.webalert-yes-button,
.alert-no-button,
.redeem-confirm-button,
.shipping-address-confirm {
    width: 100px;
}

.shipping-address {
    margin-top: 2px;
}

.qr-image {
    margin: 0 auto;
    display: block;
    padding-bottom: 15px;
}

.scanner-button {
    display: none;
    height: 40px;
    color: #ED8023;
    background-color: #fff;
    border: 1px solid #ED8023;
    border-radius: 6px;
    font-family: RobotoLight, arial, sans-serif;
}

.code-manually-image {
    display: block;
    margin: 0 auto;
    padding-bottom: 10px;
}

.sales-scroll-content {
    width: 100%;
    overflow: auto;
    padding-bottom: 10px;
}

.sales-panel {
    width: 100%;
    padding: 10px;
    background-color: #F4F5F7;
    margin-top: 10px;
    border-radius: 6px;
}

.sales-total-label {
    border-top: 1px solid #777777;
    padding-top: 10px;
}

.product-group-panel {
    border: 1px solid #ED8023;
    border-radius: 6px;
    padding: 5px;
    color: #ED8023;
}

.detailed-sales-table tr td {
    text-align: center;
    width: 60px;
}

.bill-preview {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-top: 1px solid #ED8023;
    border-left: 1px solid #ED8023;
    border-right: 1px solid #ED8023;
    margin-top: 10px;
}

.product-group-panel:hover {
    cursor: pointer;
}

.sales-panel:first-child {
    margin-top: 30px;
}

.sales-th {
    width: 65px;
    text-align: center;
    font-family: RobotoLight, arial, sans-serif;
}


/****** Buttons with icon *********/

.history-search-button {
    float: right;
    width: 110px;
}

#home-button {
    display: block;
    float: left;
    margin-left: 15px;
    background-image: url("../appicons/home-white.png");
}

#scan-button {
    display: block;
    margin: 0 auto;
    background-image: url("../appicons/scan-white.png");
}

.hamburger-button {
    display: block;
    margin: 0 auto;
    background-image: url("../appicons/menu-white.png");
}

#cart-button {
    float: right;
    margin-right: 15px;
    background-image: url("../appicons/cart-white.png");
}

#shop-button {
    display: block;
    margin: 0 auto;
    background-image: url("../appicons/shop-white.png");
}

.company-edit-button {
    display: none;
}

.cart-panel-button-bar {
    width: 240px;
    height: 40px;
    margin: 20px auto 0 auto;
}

.cart-plus-button, .cart-minus-button {
    height: 40px;
    width: 40px;
    float: left;
    background-size: 20px 20px;
    border-radius: 6px;
    border: 1px solid #ED8023;
    background-color: #fff;
}

.cart-plus-button {
    background-image: url("../appicons/add.png");
}

.cart-minus-button {
    background-image: url("../appicons/minus.png");
}

.cart-item-count {
    padding: 0;
    margin-top: 5px;
    float: left;
    width: 60px;
    text-align: center;
}

.button-disabled {
    border: 1px solid #777777;
    color: #777777;
    height: 40px;
    background-color: #fff;
    border-radius: 6px;
    font-family: RobotoLight, arial, sans-serif;
}

.button-enabled {
    border: 1px solid #ED8023;
    color: #ED8023;
    height: 40px;
    background-color: #fff;
    border-radius: 6px;
    font-family: RobotoLight, arial, sans-serif;
}

/*.button-disabled:hover {
    background-color: #777777;
    color: #fff;
}*/

.home-image-column {
    padding: 0 20px 0 0;
}

.modal-premium-image {
    margin-bottom: 15px;
}

.products-container {
    height: calc(100% - 50px);
    margin-top: 10px;
    overflow: scroll;
}

/****** Switch ******/
.switch {
    position: relative;
    display: block;
    width: 46px;
    height: 26px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    -webkit-transition: .4s;
    transition: .4s;
    border: 1px solid #ED8023;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 2px;
    bottom: 1px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border: 1px solid #ED8023;
}

input:checked + .slider {
    background-color: #ED8023;
}

input:focus + .slider {
    box-shadow: 0 0 1px #ED8023;
}

input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 6px;
}

.slider.round:before {
    border-radius: 4px;
}

/*.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}*/

/***********************/
/****** Accordion ******/
/***********************/
.accordion-header {
    height: 40px;
    width: 100%;
    background-color: #F4F5F7;
}

.accordion-header button {
    height: 100%;
    width: calc(100% - 50px);
    background-color: transparent;
    padding-left: 15px;
    text-align: left;
    font-size: 16px;
    float: left;
    color: #000;
}

.accordion-header img {
    float: right;
    margin-right: 18px;
    margin-top: 10px;
}

.accordion-body {
    display: none;
    background-color: #fff;
}

/****** CSS Loader Animation *********/
.spinner {
    margin: 100px auto 0;
    width: 70px;
    text-align: center;
}

.spinner > div {
    width: 18px;
    height: 18px;
    background-color: #ED8023;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0)
    }
    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

/*
 *   ********************
 *   HAMBURGER BREAKPOINT
 *   ********************
 */
@media (max-width: 750px) {

    .header table {
        margin-top: 8px;
    }

    /*.navigation-bar {
        display: none;
    }*/
    #frame-container {
        height: calc(100% - 50px);
    }

    .hamburger-container {
        display: block;
    }

    .hamburger li a {
        border-bottom: 0.5px solid #ED8023;
    }

    .navbar-button {
        background-size: 25px 25px;
    }

    .desktop-hide {
        display: block;
    }

    .cart-item-image {
        width: 100px;
    }

    .modal-premium-image {
        width: 200px;
    }

    .scan-ul {
        padding: 12px 20px;
    }
}

@media (max-width: 500px) {
    .cart-item-image-td {
        border-collapse: collapse;
        display: none;
    }

    .cart-table {
        margin-top: -10px;
    }

    .cart-mobile-image {
        display: block;
    }

    .premium-description {
        font-size: 13px;
    }

    .next-premium-buttons {
        width: 100%;
        margin: 0 auto;
    }

    .next-premium-buttons button {
        width: calc(50% - 5px);
    }

    .next-premium-buttons button:nth-child(2) {
        margin-left: 10px;
    }

    .shop-item-name {

    }

    .shop-item-image {
        width: 90%;
    }

    .home-item-image {
        width: 100%;
    }
}

@media (max-width: 380px) {

    .faq-image {
        width: calc(100% - 40px);
    }

    #serialnumberInputOverlay, #employeeOverlay, #premiumInfoOverlay, .edit-account-overlay {
        padding-top: 20px;
    }

    #serialnumberInputDialog, #employeeDialog, #premiumInfoDialog, .editAccountDialog {
        height: calc(100% - 20px);
    }
}


@media (max-width: 378px) {
    .shop-item-name {
        /*height: 35px;*/
    }
}

@media (max-width: 374px) {
    .mimg-wrapper {
        height: 60%;
    }

    .mtxt-wrapper {
        height: calc(40% - 135px);
    }
}

@media (max-width: 340px) {
    .shop-item-wrapper {
        min-height: 180px;
    }

    .shop-item-name {
        height: 120px;
    }
}

input:disabled {
    opacity: 0.5;
}