/*KIOSK PAGE STYLES*/
#kioskContentDiv > .dropdown-menu > li > a:hover, #kioskContentDiv > .dropdown-menu > li > a:focus {
    background-image: none;
}
#kioskContentDiv > .pull-left{
    padding:10px !important;
}
#kioskContentDiv > .bootstrap-select.btn-group .dropdown-menu li a span.text{
    font-size:1.5rem !important;
    display: block;
}
#kioskContentDiv > .bootstrap-select.btn-group .dropdown-toggle .filter-option {
    text-align: center;
}

#kioskContentDiv > .dropdown-menu > li > a{
    color : white;
    overflow-wrap: break-word; 
    white-space: break-spaces;
    font-weight:bold;
    height:100px;
    padding: 20px;
    line-height: 1.5;
}
#kioskContentDiv > .dropdown-menu > li{
    float:left;
    width:23%;
    margin:1%;
    height:100px;
    /*border:1px solid darkslateblue;*/
    color:white;
    background: #009999;
}
#kioskContentDiv > a.btn{
   color: whitesmoke;
   font-size:2rem !important;
   padding: 20px auto !important;
}
#kioskContentDiv > input.btn{
   color: #3f3f3f;
   font-size: 3rem !important;
   padding: 20px auto !important;
}
#kioskContentDiv > input, #kioskContentDiv > label{
    font-size:3rem !important;
}
#kioskContentDiv > #registrationFormDiv input{
    /*font-size:1rem !important;*/
}
#kioskContentDiv > div{
    font-size:3rem !important;
}
#kioskContentDiv > #dateSelectInput{
    font-size: 3rem;
}
#kioskContentDiv > button.btn{
   /*color: #3f3f3f;*/
   font-size: 3rem !important;
   padding: 20px auto !important;
}
#kioskContentDiv > .service_price{
    border-radius: 20px;
    background: #BEBEBE;
    color: #4F4F4F;
    padding: 8px;
    float:left;
}
#kioskContentDiv > .service_type{
    position: absolute;
    bottom: 10px;
    left:10px;
    background: #4F4F4F;
    overflow-wrap: normal;
    color: #D4D4D4;
    border-radius: 15px;
    padding: 3px 6px;
}
#kioskContentDiv > .btn-home{
    float:left;
    width:100%;
    font-size: 3rem;
    background: graytext !important;
    color: white !important;
    border: 1px solid darkslategray !important;
}
#kioskContentDiv > #menuPopupDiv{
    /*position: absolute;*/
    bottom: 91px;
    left: 0px;
    z-index: 1038;
    background: rgb(0, 0, 0);
    padding: 10px;
    color: white;
    width: 320px;
    text-align: center;

}
    #kioskContentDiv > .bubble_div{
        float:left;
        border:1px solid gray;
        border-radius: 20px;
        margin:10px;
        padding:5px;
    }
    #kioskContentDiv > .bubble_div a{
        padding:10px 10px;
        color:black;
        font-size: 2rem;
    }
    #kioskContentDiv > .deleteNameStar{
        margin:-5px -5px -5px 0px;
        font-size: 2rem;
        border-radius: 0 20px 20px  0;
    }
    #kioskContentDiv > .rightRound{
        margin:-5px -5px -5px 0px;

        border-radius: 0 20px 20px  0;
    }
    #kioskContentDiv > .editNameStar{
        margin:-5px 0px -5px -5px;

        border-radius: 20px 0 0 20px;
    }
    #kioskContentDiv > .leftRound{
        margin:-5px 0px -5px -5px;

        border-radius: 20px 0 0 20px;
    }
   #kioskContentDiv > a.btn-bubble{
        border-radius: 20px; 
    }

    #kioskContentDiv > a.btn-blue, #kioskContentDiv > a.btn-blue:hover, #kioskContentDiv > a.btn-blue:active, #kioskContentDiv > a.btn-blue:focus, #kioskContentDiv > input.btn-blue, #kioskContentDiv > input.btn-blue:hover, #kioskContentDiv > input.btn-blue:active, #kioskContentDiv > input.btn-blue:focus, #kioskContentDiv > button.btn-blue, #kioskContentDiv > button.btn-blue:hover, #kioskContentDiv > button.btn-blue:active, #kioskContentDiv > button.btn-blue:focus{
        background: #00239F;
        color: whitesmoke;
        font-size: 2rem !important;
        padding: 2% !important;
        margin-bottom: 5%;
        border-radius: 50px !important;
        width: 49.2%;
    }
   #kioskContentDiv > a.btn-blue-outline, #kioskContentDiv > a.btn-blue-outline:hover, #kioskContentDiv > a.btn-blue-outline:active, #kioskContentDiv > a.btn-blue-outline:focus{
        color: #00239F;
        clear: both;
        float:right;
        box-shadow: none;
        background: white;
        text-align: right;
        font-size : 1.3rem !important;
    }
    
    .btn-xs{
        font-size: 1.5vw !important;
    }
    #kioskContentDiv > div, #kioskContentDiv > span, #kioskContentDiv > input, #kioskContentDiv > label, #kioskContentDiv > button{
        font-size: 1.5vw !important;
    }
    #kioskContentDiv > a{
       /*color:#00239F !important;*/ 
    }
    #kioskContentDiv > .btn-info{
        margin:-5px;

        border-radius: 20px;
    }
    #kioskContentDiv > .center{
        width: 150px;
        margin: 40px auto;

    }
    
    #kioskContentDiv > .offering-tiles{
        height:250px;
        float:left;
        background-size:  100% 100% !important;
        color:#f0f0f0 !important;
        font-size:4rem;
        text-align:center;
        padding-top:10px;
    }
    #kioskContentDiv > .bg-active{
        background: #ffffdd;
        color: #00239F;
    }
    #kioskContentDiv > .bg-selected{
        background: #E8E8E8;
        color:#A3A3A3;
        font-size:1.5rem 1important;
    }
   #kioskContentDiv > .service_type>.fa{  
        margin: 10px;
        font-size: 5rem;
    }
    #kioskContentDiv > .cancel-home-btn{
        float: right;
        margin-top: 5px;
        font-size: 1.5rem !important;
    }
    #kioskContentDiv > .card-header{
        background:grey !important;
    }
    
    #kioskContentDiv > .btn-xs {
        font-size: 2rem !important;
    }
/*@media (min-width: 786px) {
    
    div, #kioskContentDiv > span, #kioskContentDiv > input, #kioskContentDiv > label, #kioskContentDiv > button{
        font-size: 1.5rem !important;
    }
    a.btn-secondary, #kioskContentDiv > a.btn-blue, #kioskContentDiv > a.btn-blue:hover, #kioskContentDiv > a.btn-blue:active, #kioskContentDiv > a.btn-blue:focus, #kioskContentDiv > input.btn-blue, #kioskContentDiv > input.btn-blue:hover, #kioskContentDiv > input.btn-blue:active, #kioskContentDiv > input.btn-blue:focus, #kioskContentDiv > button.btn-blue, #kioskContentDiv > button.btn-blue:hover, #kioskContentDiv > button.btn-blue:active, #kioskContentDiv > button.btn-blue:focus{
        
        background: #00239F;
        color: whitesmoke;
        font-size: 1.5vw !important;
        margin-bottom: 5%;
        border-radius: 5px !important;
        padding: 5px !important;
      }
    .fa{
        font-size: 2rem !important;
    }
}*/
    
@media (max-width: 1280px) {
/*    #selectedOfferingContent{
        width:35%;
        height: 250px;
    }*/
    .btn-xs{
        font-size: 1.5vw !important;
    }
    #kioskContentDiv > div, #kioskContentDiv > span, #kioskContentDiv > input, #kioskContentDiv > label, #kioskContentDiv > button{
        font-size: 1.5vw !important;
    }
    #kioskContentDiv > a.btn-blue, #kioskContentDiv > a.btn-blue:hover, #kioskContentDiv > a.btn-blue:active, #kioskContentDiv > a.btn-blue:focus, #kioskContentDiv > input.btn-blue, #kioskContentDiv > input.btn-blue:hover, #kioskContentDiv > input.btn-blue:active, #kioskContentDiv > input.btn-blue:focus, #kioskContentDiv > button.btn-blue, #kioskContentDiv > button.btn-blue:hover, #kioskContentDiv > button.btn-blue:active, #kioskContentDiv > button.btn-blue:focus{
        
        background: #00239F;
        color: whitesmoke;
        /*font-size: 1.5vw !important;*/
        margin-bottom: 5%;
        border-radius: 5px !important;
        width: 49.2%;
        padding: 2% !important;
      }
    #kioskContentDiv > a.btn-blue-outline, #kioskContentDiv > a.btn-blue-outline:hover, #kioskContentDiv > a.btn-blue-outline:active, #kioskContentDiv > a.btn-blue-outline:focus{
        color: #00239F;
        clear: both;
        float:right;
        box-shadow: none;
        background: white;
        text-align: right;
        font-size : 1.3rem !important;
    }
    #kioskContentDiv > .bg-active, #kioskContentDiv > bg-selected{
        font-size: 1.6rem !important;
    }
    #kioskContentDiv > .btn-bubble {
        border-radius: 20px;
        padding: 10px;
    }
    #kioskContentDiv > .cancel-home-btn{
        float: right;
        margin-top: 5px;
        font-size: .8rem !important;
    }
    #kioskContentDiv > .offering-tiles{
        height:150px;
        float:left;
        background-size:  100% 100% !important;
        color:#f0f0f0 !important;
        font-size:2rem;
        text-align:center;
        padding-top:10px;
    }
    #kioskContentDiv > span.offering-title{
        font-size:2rem !important;
    }
    #kioskContentDiv > .btn{
/*        padding: 0.375rem 0.75rem !important;*/
        font-size:1.5vw;
    }
    #kioskContentDiv > button.btn{
        /*font-size: 1.3rem !important;*/
        /*padding: 0.375rem 0.75rem !important;*/
    }
    
   #kioskContentDiv > .bubble_div a{
        padding:5px;
        color:black;
        /*font-size: 1.3rem;*/
    }
    #kioskContentDiv > .bubble_div .glyphicon{
        /*font-size:1.3rem !important;*/
        padding:3px;
    }
    #kioskContentDiv > input.btn{
        /*font-size: 1.5vw !important;*/
    }
    #kioskContentDiv > .input, #kioskContentDiv > .checkbox{
        /*font-size: 1.3rem;*/
        width:50%;
        height:40px;
    }
    #kioskContentDiv > input[type=checkbox]{
        margin-left: 0px !important;
        float: left;
        position: relative;
        width: 20%;
        margin: -4px 0 auto 5px;
    }
    #kioskContentDiv > .checkbox label{
        margin-top : 10px !important;
    }
    #kioskContentDiv > .card-header{
        background:grey !important;
    }
    #kioskContentDiv > .btn-xs {
        font-size: 2rem !important;
    }
}
@media (max-width: 786px) {
    span.glyphicon-th{
        float: right;
        right: 15px;
        position: absolute;
        top: 15px;
    }
  .text-md-left {
    text-align: left !important; }
  .text-md-right {
    text-align: right !important; }
  .text-md-center {
    text-align: center !important; } 
  .btn{
      font-size: 5vw !important;
      padding: 6px !important;
  }
  a.btn{
      font-size: 5vw !important;
      padding: 6px !important;
      margin-top: 10px !important;
  }
  
    .btn-bubble{
        border-radius: 20px !important; 
        margin:0 5px !important;
    }
  input.btn{
      font-size: 5vw !important;
      padding: 6px !important;
  }
  .btn .icon{
      /*padding:40px !important;*/
  }
  #kioskContentDiv > div, #kioskContentDiv > span, #kioskContentDiv > input, #kioskContentDiv > label, #kioskContentDiv > button, div{
    font-size: 2.5vw !important;
  }
  
    #filterInut{
        height:25px !important;
    }
    #filterInut::placeholder{  
        font-size: 1.2rem !important;
        font-weight: normal;
    }
  .card{
      font-size: 1.5vw !important;
      padding-bottom: 0;
  }
    a.cancel-home-btn
    {
      float: right;
      margin-top: 0px !important;
      font-size: .8rem !important;
    }
    
    .glyphicon-remove{
        font-size:5vw !important;
    }
    .bubble-div{
        font-size: 3vw !important;
    }
    .bubble_div{
        
        margin:20px 5px 5px;
    }
    .btn-xs{
        font-size: 2vw !important;
    }
    .offering-select > div{
        font-size: 5vw !important;
    }
}
form>div.card{
    background-color: #ffffec  !important;
}
#TypeFilterDiv {
  position: fixed;
  bottom: 0px;
  width: 100%;
  float: left;
  color: whitesmoke;
  display: inline;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1040;
}

@media only screen and (min-width: 786px) {
    .offering-select{
        height:fit-content;
        float:left;
        overflow-wrap: anywhere;
    }

    .offering-image-div{
        height:250px;
        float:left;
        background-size:  100% 100%;
        color:#f0f0f0 !important;
        font-size:4rem;
        text-align:center;
        padding-top:10px;
    }
    .offering-title{
        z-index:12;
        position:relative;
    }
    .ofering-img{
        float:right;
        position:absolute;
        top:50px;
        right:5px;
        z-index: 10;
    }
    #FilterBurgerDiv{
        display:none;
    }
    
    .service_price{
/*        position: absolute;
        bottom: 10px;
        width: 20%;
        right: 10px;
        overflow-wrap: normal;*/
        
        border-radius: 20px;
        background: #BEBEBE;
        color: #4F4F4F;
        padding: 8px;
        float: left;
    }
    .service_type{
        position: absolute;
        bottom: 10px;
        left:10px;
        background: #4F4F4F;
        overflow-wrap: normal;
        color: #D4D4D4;
        border-radius: 15px;
        padding: 3px 6px;
    }
    h4{
        font-size:1.5vw !important;
    }
}
@media only screen and (max-width: 786px) {
    
    .offerings{
        width: 100%;
    }
    .offering-select{
        height:fit-content;;
        float:left;
        overflow-wrap: anywhere;
    }

    .offering-image-div{
        height:150px;
        float:left;
        background-size:  100% 100% !important;
        color:#f0f0f0 !important;
        font-size:2rem;
        text-align:center;
        padding-top:10px;
        background-size: cover !important;
    }
    .offering-title{
        z-index:12;
        position:relative;
        display: inline-block;
        width:100%;
        font-size: 2rem;
    }
    .ofering-img{
        float:right;
        position:absolute;
        width:25%;
        top:0px;
        right:5px;
        z-index: 10;
    }
/*    div{
        font-size: 2rem !important;
    }*/
    #TypeFilterDiv{
        display: none;
        position:fixed;
        /*bottom:100px;*/
        top:0px;
        width:100%;
        float: left;
        color:whitesmoke;
        /*display: inline;*/
        background:rgba(0, 0, 0, 0.85);
        z-index: 1041;
        height:60px;
    }
    #TypeFilterDiv>input{
        width:100% !important;
    }
    #DietyFilterDiv{
        display:none;
        position:fixed;
        top:10px;
        right:0px;
        width:26%;
        float: right;
        color:whitesmoke;
        background:rgba(0, 0, 0, 0.85);
        z-index: 1033;
        cursor: pointer;
    }
    #FilterBurgerDiv{
        display: block;
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: transparent;
        font-size: 2rem !important;
        height: 50px;
        width: 250px;
        z-index: 1035;
        padding: 0px;    
        border: 0px;
    }
    .FilterBtn{
        /*width: 100% !important;*/
        text-align: center !important;
    }
    
    .service_price{
/*        position: absolute;
        bottom: 10px;
        width: 20%;
        right: 10px;
        overflow-wrap: normal;*/
        
        border-radius: 20px;
        background: #BEBEBE;
        color: #4F4F4F;
        padding: 0px 5px;
        float: left;
    }
    .service_type{
        position: absolute;
        bottom: 10px;
        left:10px;
        background: #4F4F4F;
        overflow-wrap: normal;
        color: #D4D4D4;
        border-radius: 15px;
        padding: 3px 6px;
        font-size:2rem;
    }
    .btn:hover, .btn:focus, .btn.focus {
        color: #DDD;
        text-decoration: none;
      }
      .btn-blue-outline, .btn-blue-outline:hover, .btn-blue-outline:active, .btn-blue-outline:focus {
        color: #00239F;
        border: 1px solid #00239F;
        background: whitesmoke;
      }
      .bubble_div {
        float: left;
        border: 1px solid gray;
        border-radius: 20px;
        margin: 20px 2px 5px;
        padding: 5px;
        width: fit-content !important;
        text-align: center;
      }
      .bubble_div a.editNameStar{
        float: none !important;
        width: 75% !important;
        height: fit-content !important;
        padding: 10px 3px;
        padding-top: 0px;    
        font-size: 3vw !important;    
        display: table-cell;
        vertical-align: middle;

      }
      nav{
          display: none !important;
      }
      #filterInut:focus,#filterInut:active{
          width:80% !important;
      }
}
/*KIOSK PAGE STYLES END... */