/*.container{ 
    width: 500px;
    float:right;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}*/
#menu-container-scroll{
    width: 600px;
    max-width: 100%;
}
#bg{
  overflow-x: hidden;
  width: 100vw;
  height: 100vh;
  position:fixed;
  z-index: 0;
  background-color: #000;
  background-image: url('/img/restaurant/chairs.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover !important;
  background-attachment: fixed;
}

body.light-mode{
    background-color: #000;
}
body.light-mode #bg{
    /*background-color: #fafbfc;*/
}
#menu-container,
page{
    z-index:1;
}
h1{
    font-size: 1.2em;
}

.full-panel {
  height: 100vh;
  width: 100%;
  /*display: flex;*/
/*  justify-content: center;
  align-items: center;
  font-size: 3em;*/
  color: #fff;
  position: sticky;
  top:0;
  overflow: hidden;
}
body.dark .full-panel{
     color: #000;
}

body.dark #logo-rspot-online #R-svg-bg{
    fill:#000 !important;
}
body.dark .btn-light{
    background: #000;
    border: #000;
}
.relative-panel{
    position: relative;
    /*color: #000;*/
}
body.dark.terms-of-use  #logo-rspot-online #R-svg-bg{
    fill:#fff !important;
}
body.dark.terms-of-use .relative-panel,
body.dark.terms-of-use .full-panel{
    color: #fff;
}
section .section-container{
    padding: 15px;
    width: 100%;
    height: 100%;
}
.bg-green{
    background: var(--client);
}
.bg-blue{
     background: var(--deliver);
}
.bg-orange{
    background: var(--restaurant);
}
.bg-grey{
    background: var(--footer);
}
.bg-black{
    background: var(--login);
}
body.light-mode .bg-black{
    background-color: rgba(255,255,255,.85);
}
#client-section-2,
#client-section{
    z-index:1;
    /*background: var(--client)*/
}
#client-section .section-container{
/*    background: url('/img/rspot/clients.png') var(--client) left bottom no-repeat;*/
    background-image: url('/img/rspot/clients.png');
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: contain; 
}
#restaurant-section-2,
#restaurant-section{
    z-index:2;
    background: var(--restaurant);
}
#restaurant-section .section-container{
    /*background: url('/img/rspot/restaurant.png') var(--restaurant) left bottom no-repeat;*/
    background-image: url('/img/rspot/restaurant.png');
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
#deliver-section-3,
#deliver-section-2,
#deliver-section{
    z-index:3;
    background: var(--deliver);
}
#login-section,
#footer-section{
    z-index: 99;
    position: sticky;
    top: 0;
    overflow: hidden;
}
#login-section{
   min-height: 100vh; 
}
#page-container{
    z-index:9;
}
#button-box{
    position: fixed;
    transition: all 0.3s ease-out;
}
@media (min-width: 992px) { 
    #button-box{
        top: 0;
    }
}
@media (max-width: 776px) { 
    html.scrolled #button-box{
         display: none;
    }
}
.animated{
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#footer-section{
    border-top: 1px solid #000;
    background: #333;
    background: linear-gradient(180deg,rgba(30, 30, 30, 1) 0%, rgba(41, 41, 41, 1) 30%);
}
body.light-mode #footer-section{
    border-top: 1px solid #444;
    background: #ccc;
    background: linear-gradient(180deg,#aaa 0%, #ccc 30%);
    color: #333;
}
body.light-mode #footer-section a{
    color: #333;
}
#deliver-section .section-container{
    /*background: url('/img/rspot/deliver.png') var(--deliver) right bottom no-repeat;*/
    background-image: url('/img/rspot/deliver.png');
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

/*.red    { background:#ef4444; z-index:1; }
.blue   { background:#3b82f6; z-index:2; }
.blue2   { background:#3b82f6; z-index:2; }
.green  { background:#10b981; z-index:3; }
.orange { background:#f59e0b; z-index:4; }*/

@media (max-width: 994px) {   
    #page-container{
        /*display: none !important;*/
    }
}

.card{
  /*background: rgba(30,30,30, .5);*/
  text-align: center !important;
}
.card{
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  border: 1px solid var(--deliver);
  background: none;
  /*border-radius: 0rem;*/
}

.card:hover{
   background: var(--deliver);
   color: #fff;
}
body.dark .modal-content{
    background: #111;
}
.account-type-selector.required .btn-group{
    /*border: 1px solid #f00;*/
    border-bottom: 5px solid #f00;
}
.account-type-selector.required .required-message{
    color: #f00;
}
.modal .modal-header,
.modal .modal-footer{
    border: none;
}
.bg-green .btn-light{
    color: var(--client);
    font-weight: bold;
}
.bg-orange .btn-light{
    color: var(--restaurant);
    font-weight: bold;
}
.bg-blue .btn-light{
    color: var(--deliver);
    font-weight: bold;
}

#user_edit_form #logo .rspot-logo{
    display: none;
}
.menu-footer{
    margin-top: 1em;
    font-size: .8em;
}
.menu-footer a{
    color: #fff;
}
#logo-rspot-online-contaier{
    margin-bottom: 1em;
}
.terms-of-use h1{
    font-size: 1.5em;
    text-transform: uppercase;
}
.terms-of-use h2{
    font-size: 1.5em;
}
.terms-of-use h3{
    font-size: 1.2em;
}
.terms-of-use p,
.terms-of-use li{
    font-size: .8em;
}
.terms-of-use #footer-section{
    /*top: 2em;*/
}
.terms-of-use #login-section{
    padding-bottom: 60px;
}

#announce-footer-section h2{
    font-size: 1.2em;
    text-transform: uppercase;
    /*margin: 0px;*/
}