:root {
    /** Fonts **/
    /*
    --mainFont : 'Staatliches', cursive;
    --textFont: 'Open Sans', sans-serif;
    --secondaryFont : 'Raleway', sans-serif;
    */
    
    /** Colors **/
    --primary: #e1e1e1;
    --appbars: #5b6366;
    --tabhead: #3b4046;

    --errtext: #dd2000;
    --errbgnd: #eed3d7;

    --reqtext: #4067d1;
    --sidenav: #4067d1;
    --navdesc: #7998ee;

    --black: #282828;
    --links: #4067d1; /*#0050FF;*/
    --hlink: #ffa60e;
    --white: #f6f6f6;
    --smoke: #f2f2f2;
    --hline: #e6e6e6;
    

    --success: #1cc88a;
    --warning: #ffa60e;
    --danger:  #dd2000;
    --default: #4067d1;
    
    /*--yellow:#ffa60e;*/

    --side_width: 14.9999%;
    --main_width: 85%;
}

html,
body {
     height: 100%;
     background-color: var(--primary);
     /*font-size: 98%;*/
     /*calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));*/
     font-size: calc(8px + (14 - 8) * ((100vw - 320px) / (1500 - 320)));
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto; /* -60px; */
    padding: 0 0 60px;
}

.navbar > .container { width: 100%; }
.wrap > .container { padding: 70px 10px 10px; width: 100%; }
.navbar-inverse .navbar-nav > .active > a { background-color: unset; }
.footer .container { width: 100%; }
.footer {
    background-color: var(--white);
    border-top: 1px solid var(--appbars);
    padding-top: 20px;
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 9999;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: var(--errtext);
    font-style: italic;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: var(--appbars);
}

.error-summary {
    color: var(--errtext);
    background: var(--errbgnd);
    border-left: 3px solid var(--errtext);
    padding: 10px 20px;
    margin: 0 0 15px 0;
}
.error-text{ color: var(--errtext); }

hr { border-top: 1px solid var(--tabhead); }

/* fluid fonts */
.h1-fluid-font { font-size: calc(30px + (36 - 30) * ((100vw - 320px) / (1500 - 320))); }
.h2-fluid-font { font-size: calc(24px + (30 - 24) * ((100vw - 320px) / (1500 - 320))); }
.h3-fluid-font { font-size: calc(18px + (24 - 18) * ((100vw - 320px) / (1500 - 320))); }
.h4-fluid-font { font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1500 - 320))); }
.h5-fluid-font { font-size: calc(12px + (16 - 12) * ((100vw - 320px) / (1500 - 320))); }

/* align the logout "link" (button in form) of the navbar */

/* ******************************************************* Nav Bar ******************************************************* */
.navbar { 
    display: block;
    text-align: center;
    width: 100%;
    color: var(--white); 
    z-index: 99999;
}
.navbar-header { height: 6px; float: unset; }
.login-page .navbar-header .navbar-brand{ display: block; }
.login-page .navbar-header .navbar-brand img{ height: 45px; }
.navbar-header .navbar-brand{ display: none; }
.navbar-header .navbar-brand img{ height: 45px; }
.navbar-inverse .navbar-nav > li > a { color: var(--white); }
.navbar-inverse .btn-link { color: var(--white); }

.nav li > form > button.logout {
    padding: 15px;
    border: none;
}

@media(min-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }
    .navbar-header .navbar-brand{ position: relative; display: block; }
    .navbar-header .navbar-brand img{ height: 50px; }
    .login-page .navbar-header .navbar-brand img{ height: 50px; }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
}

.nav > li > form > button.logout:focus { outline: none; }

.navbar-collapse{ width: 100%; }
.navbar-collapse  { background-color: var(--tabhead); border-color: var(--tabhead); }
.dropdown-menu { font-size: unset; }
.navbar-inverse { background-color: var(--tabhead); }
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
	background-color: var(--appbars);
}

.logout-box{ 
    border: 1px solid var(--appbars);
    border-radius: 5px;
    padding: 0 5px 0 5px;
    margin: 2px 0 2px 20px;
    font-size: 14px;
}
.admin-menu li { padding-top: 10px; }

/* ******************************************************* App wireframe ******************************************************* */
.app-content { float: left; width: 100%; }

@media (min-width: 768px) {
    .app-content { float: left; width: var(--main_width); }
}

/* ******************************************************* Side Bar ******************************************************* */
.vertical-bar{ 
    float: left; 
    width: 150px;
    padding: 0;
}
.sidenav { list-style-type: none; }
.main-sidenav{
    position: absolute;
    width: 150px;
    background-color: var(--sidenav); /* #4C71DE;*/
    left: -150px;
    top: 50px;
    padding: 10px;
    /*font-size: 1.8rem;*/
    z-index: 9999;
}
@media (min-width: 768px) {
    .main-sidenav{
        left: 0;
    }
}
.main-sidenav .nav-link{ color: var(--white); text-decoration: none; transition: color .2s; }
.main-sidenav .nav-link:hover{ color: var(--hlink); }
.main-sidenav .nav-link:hover > i{ font-size: 120%; }
.main-sidenav .nav-link i{ width: 2vw; transition: font-size .2s; }

.sidebar-item{ margin-top: 3vh; }
.sidebar-item.active .nav-link{ color: var(--hlink); }
.sidenav-desc {
    padding: 10px;
    color: var(--white); /* #fff; */
    font-size: 80%;
    border: 1px solid var(--navdesc);
    background-color: var(--navdesc);
    border-radius: 10px;
    margin-top: 50px;
}
@media (min-width: 768px) {
    .vertical-bar{ 
        width: var(--side_width);
    }
    .main-sidenav{
        width: var(--side_width);
        height: 100%;
    }
}

.mobile-button{
    position: absolute;
    top: 0;
    z-index: 99999;
}
#mobile-vertical-bar{
    position: absolute;
    width: 100%;
    height: auto;
    z-index: 99999;
    background-color: var(--sidenav);
    left: 0;
    text-align: center;
    font-size: 14px;
    color: var(--white);
    padding-bottom: 15px;
    overflow: hidden;
}
.mobile-sidenav{ list-style-type: none; }
.mobile-sidenav .nav-link{ color: var(--white); text-decoration: none; transition: color .2s; }
.mobile-sidenav .nav-link:hover{ color: var(--hlink); }
.mobile-sidenav .nav-link:hover > i{ font-size: 120%; }
.mobile-sidenav .nav-link i{ width: 30px; transition: font-size .2s; }
.mobile-sidenav .nav-link span{ margin-left: 1rem;}

/* ******************************************************* Awesome tabs ******************************************************* */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--white);
    background-clip: border-box;
    border-radius: .9rem;
}
.card-wrap { padding: 1rem 2rem 1rem 2rem; }
.card-title{ width: 100%; font-size: 140%; } /*24px*/
.card-body { display: flex; align-items: center; }
.card-value{ flex: 5; font-size: 180%; } /*36px*/
.card-icon { flex: 1; text-align: center; }
.card-subtext { font-size: 100%; } /*18*/
.card-footer { 
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex-direction: row; 
    border-top: 1px solid var(--hline);
    background-color: var(--smoke);
    padding: 1rem 2rem 1rem 2rem;
    border-bottom-right-radius: .9rem;
}
.card-button { flex: 1; }
.card-button + .card-button { margin-left: 10px; }
.card-default { border-left: .9rem solid var(--default); }
.card-success { border-left: .9rem solid var(--success); }
.card-warning { border-left: .9rem solid var(--warning); }
.card-danger  { border-left: .9rem solid var(--danger);  }
.card-default .card-title { color: var(--default); }
.card-success .card-title { color: var(--success); }
.card-warning .card-title { color: var(--warning); }
.card-danger  .card-title { color: var(--danger);  }


.text-gray-300 { color: #dddfeb; }
.text-gray-500 { color: #b7b9cc; }
.text-gray-800 { color: #5a5c69; }

/* ******************************************************* Table and Grid adjustments ******************************************************* */
/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after { content: /*"\e113"*/ "\e151"; }

a.desc:after { content: /*"\e114"*/ "\e152"; }

.sort-numerical a.asc:after { content: "\e153"; }

.sort-numerical a.desc:after { content: "\e154"; }

.sort-ordinal a.asc:after { content: "\e155"; }

.sort-ordinal a.desc:after { content: "\e156"; }

.grid-view th { white-space: nowrap; }

.grid-view-content { margin-top: 2rem; }

.grid-view .table-bordered {
    border: unset;
}
.grid-view .table-striped thead {
    background-color: var(--hlink);
    box-shadow: inset 0px -3px 6px 0px rgba(0,0,0,0.15), inset 0px 3px 6px 0px rgba(0,0,0,0.15);
}
.grid-view .table-striped tbody tr {
    background-color: #e9e9e9;
}
.grid-view .table-bordered > tbody > tr > td {
    border-bottom: 1px solid var(--appbars);
    border-left: unset;
    border-right: unset;
    border-top: unset;
    vertical-align: middle;
}
.grid-view .summary{
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 2px;
    color: var(--links);
    font-size: 110%;
}
.grid-view .table-bordered > thead > tr > th{
    border-top: 0;
    border-bottom: 0;
    text-align: center;
    padding: .4vw;
}
.grid-view .table > thead > tr > td {
    border-top: 0;
    border-bottom: 0;
    padding: .4vh;

}

/* ******************************************************* Headtab widget ******************************************************* */
.add-top-link { 
    float: right;
    color: var(--white);
    text-decoration: none;
}
.add-top-link:hover{
    color: var(--hlink);
    text-decoration: none;
}
.add-top-link:focus{
    color: var(--white);
    text-decoration: none;
}

/* ******************************************************* Dynselect widget ******************************************************* */
.dynselect-items{
    position: absolute;
    display: none;
    background-color: var(--navdesc);
    color: var(--white);
    width: auto;
    margin-top: 5px;
    z-index: 9999;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 10px;
}
.dynselect-item{
    padding: 5px 5px;
    white-space: nowrap;
    border-bottom: 1px solid var(--appbars);
    cursor: pointer;
}
.dynselect-item:hover{
    background-color: var(--appbars);
}

/* ******************************************************* Workhours widget ******************************************************* */
.workhours-item label {
    width: 50px;
}
.workhours-item select{
    padding: 5px 35px 5px 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    background: url('/web/img/clock-icon.png') 96% / 15% no-repeat #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/* Remove default arrow in Internet Explorer 10 and 11 */
.workhours-item select::-ms-expand { display: none; }
.workhours-item select { scrollbar-color: var(--appbars) var(--primary); }

.delivery-add-form {
    display: none;
    position: absolute;
    background: var(--sidenav);
    z-index: 10000;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    margin-top: 10px;
    
}
.delivery-visible-control { overflow: hidden; }
.delivery-visible-control select{
    margin: -5px -5px -5px -5px;
    padding: 10px;
    width: 115%;
}
@media (min-width: 768px) {
    .delivery-add-form {
        margin-left: -60%;
        width: 185%;
    }
}
.delivery-add-form label { color: var(--white); }

.products-image img{
    max-width: 20vw;
    object-fit: contain;
}

/* ******************************************************* hourglass loader ******************************************************* */
.hourglass{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--black);
    z-index: 99999;
    opacity: .5;
    text-align: center;
}

.loader{
    position: relative;
    top: calc(50%);
}
.hourglass .square {
    display:inline-block;
    height:10px;
    width:10px;
    margin:10px;
    position:relative;
    box-shadow:0 0 20px rgba(0,0,0,.3);
    animation:hourglassbouncer cubic-bezier(.455,.03,.515,.955) .75s infinite alternate
}

.hourglass .square:nth-child(5n+1) {
    background: var(--success);
    animation-delay:0
}
.hourglass .square:nth-child(5n+2) {
    background: var(--default);
    animation-delay:calc(0s + (.1s * 1))
}
.hourglass .square:nth-child(5n+3) {
    background: var(--warning);
    animation-delay:calc(0s + (.1s * 2))
}
.hourglass .square:nth-child(5n+4) {
    background: var(--danger);
    animation-delay:calc(0s + (.1s * 3))
}
.hourglass .square:nth-child(5n+5) {
    background: var(--white);
    animation-delay:calc(0s + (.1s * 4))
}
@keyframes hourglassbouncer {
    to {
        transform:scale(1.75) translateY(-20px)
    }
}

/* ******************************************************* --- ******************************************************* */
.center { margin: 0 auto; }
.no-float { float: unset; }
.no-padding{ padding: 0; }
.no-margin-bottom{ margin-bottom: 0; }
.no-margin-top{ margin-top: 0; }
.flex-center-middle{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.rising-tab { 
    border: 1px solid var(--white);
    /*border-radius: 10px;
    background-color: var(--white);*/
    -webkit-box-shadow: 8px 8px 5px 0px rgba(88,88,88,1);
    -moz-box-shadow: 8px 10px 5px 0px rgba(88,88,88,1);
    box-shadow: 8px 8px 5px 0px rgba(88,88,88,1);
}
.rising-tab h1, .rising-tab h2, .rising-tab h3, .rising-tab h4 {
    background-color: #555;
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    margin: 0;
    font-size: 140%;
}
.rising-tab p{
    padding: 15px 0 0 0;
    margin: 0;
}
.tab { 
    padding: 1vw; 
    border-radius: 10px; 
    background-color: var(--white);
}
.required-label{
    color: var(--reqtext); 
}

.form-group .chosen-container-single .chosen-single{
    height: 2vw;
    padding: 0 12px;
    min-height: 24px;
}
.form-control{
    font-size: 100%;
    height: 2.2vw;
    min-height: 24px;
}
.form-control[readonly], .form-control[disabled]{
    cursor: not-allowed;
}
.alert-danger{
    z-index: 99999;
    position: relative;
}
small, .small {
    font-size: 75%;
}
.chosen-container {
    font-size: 100% !important;
}
.chosen-container-single .chosen-single span {
    display: flex !important;
    align-items: center;
    height: 100%;
}
.chosen-container-single .chosen-drop {
    border: 1px solid #aaa !important;
}

/* ******************************************************* Login Page ******************************************************* */
.page-login{
    position: absolute;
    top: 55px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-image: url('/img/bodybg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    display: flex;
    /*height: calc(100vh - 130px);*/
    align-items: center;
    justify-content: center;
}
.login-form {
    background-color: rgba(200,200,200,.7);
    height: 100%;
    min-height: 300px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
.login-form .btn{ white-space: break-spaces; }
.field-login-rememberme .col-sm-6{
    width: auto;
    padding-right: 1vw;
    font-size: 14px;
}
.field-login-rememberme .switch-small{ top: 2px; }

/*.sign-form {
    background-color: rgba(200,200,200,.7);
    border-radius: 20px;
    height: auto;
    min-height: 300px;
    text-align: left;
}*/
/* ******************************************************* Sign Up Page ******************************************************* */
.page-sign-up{
    position: absolute;
    top: 55px;
    left: 0px;
    height: calc(100%);
    width: 100%;
    background-image: url('/img/bodybg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    display: flex;
    /*height: calc(100vh - 130px);*/
    align-items: center;
    justify-content: center;
}
.sign-up-container{
    width: 50vw; 
    margin: 0 auto;
}
.sign-up-form {
    background-color: rgba(200,200,200,.7);
    border-radius: 20px;
    height: auto;
    min-height: 300px;
    text-align: left;
    padding: 50px 25% 50px 25%;
    margin: 50px auto;
}

.sign-up-form h1 { text-align: center; }
.sign-up-form .sign-up-button{ text-align: center; }

/* ******************************************************* Check mail Page ******************************************************* */
.page-checkmail{
    position: absolute;
    top: 55px;
    left: 0px;
    height: calc(100%);
    width: 100%;
    background-image: url('/img/bodybg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    display: flex;
    /*height: calc(100vh - 130px);*/
    align-items: center;
    justify-content: center;
}

/* ******************************************************* activate Page ******************************************************* */
.page-activate{
    position: absolute;
    top: 60px;
    left: 0px;
    height: calc(100% + 20vh);
    width: 100%;
    background-image: url('/img/bodybg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    display: block; /*flex*/
    /*height: calc(100vh - 130px);*/
    /*align-items: center;*/
    justify-content: center;
}
.activate-form {
    background-color: rgba(200,200,200,.7);
    border-radius: 20px;
    height: auto;
    min-height: 300px;
    text-align: left;
    padding: 10px 10% 10px 10%;
    margin: 50px auto 10px;
}
.activate-container{
    width: 90%; 
    margin: 0 auto;
}
@media (min-width: 768px) {
    .activate-container{
        width: 50vw; 
        margin: 0 auto;
    }    
}

/* ******************************************************* Index Page ******************************************************* */
.page-index{
    position: absolute;
    background-image: url('/img/bodybg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    top: 55px;
    left: 0px;
    width: 100%;
}

.page-index .account-tab{
    background-color: rgba(255, 166, 14, 0.9);
    margin-top: 20px;
}
.page-index .h1{
    font-weight: 700;
    background-color: rgba(40, 110, 170, 0.8); /* rgba(246,246,246,0.9); */
    color: var(--smoke);
    margin: 0;
    padding: 2vw;
}

/* ******************************************************* Reset Page ******************************************************* */
.page-reset{
    position: absolute;
    top: 55px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-image: url('/img/bodybg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    display: flex;
    /*height: calc(100vh - 130px);*/
    align-items: center;
    justify-content: center;
}
.reset-form {
    background-color: rgba(200,200,200,.7);
    height: 100%;
    min-height: 300px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
.reset-form .btn{ white-space: break-spaces; }

/* ******************************************************* Rating Page ******************************************************* */
.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: var(--hlink); /* #ffc700;    */
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: var(--hlink); /* #deb217;*/  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: var(--hlink); /* #c59b08;*/
}
/* **************************************** Link pager **************************************************/
/* Chrome, Safari, Edge, Opera */
/*
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
*/

/* Firefox */
/*
input[type=number] {
  -moz-appearance: textfield;
}
*/

.pagination .isNumeric{
    padding:6px 12px;
    width:80px;
    margin-top: 1px;
    border: none;
}