/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap'); */

html,
body,
main {
    min-height: 100%;
    /* font-family: 'Roboto', sans-serif; */
    font-weight: 500;
    font-size: 0.9rem;
}


p,
span {
    /* font-family: 'Roboto', sans-serif; */
    font-weight: 300;
    font-size: 0.9rem;
}

.buttonsDiv {
    display: inline-block;
    float: right;
    top: 5px;
    position: relative;
}

.buttonsDiv .fa {
    position: relative;
}

.itemimagePreview {
    width: 35%;
}

#addItemModalContent p {
    font-size: 1em;
}


.pageHeader, .pageHeaderWithSlider
{
    background-color: var(--color1);
    overflow: auto;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    padding: 10px;
}

.pageHeader h1, .pageHeaderWithSlider h1
{
    margin: 0;
    font-size: 1.5rem;
    text-align: center;
    width: 85%;
}

.pageHeader h1
{
    margin-top: 7px;
}
.pageHeader h2, .pageHeaderWithSlider h2
{
    margin: 0;
    font-size: .75rem;
    text-align: center;
    width: 85%;
}

.pageHeader .smallLogo
{
    width: 15%;
    float: left;
    margin-left: 20px;
}

.pageHeaderWithSlider
{
    min-height: 100px;
}

.themeSlider
{
    position: relative;
    top: -60px;
    margin-bottom: -50px;
    width: 90%;
    border-radius: 20px;
}

#sliderWithHeading
{
    padding: 0 15px;
}

.bannerSlider
{
    border-radius: 20px;
    overflow: hidden;
    top: -1px;
}

.themeSlider .slick-dotted.slick-slider {
    margin-bottom: 0px;
}
#sliderWithHeading
{
    overflow: auto;
}

#sliderWithHeading .smallLogo
{
    width: 20%;
    float: left;
    padding: 5px;
}

#sliderWithHeading h1
{
    margin-top: 15px;
    margin-bottom: 0px;
    font-size: 1.5rem;
}
#sliderWithHeading h2
{
    margin-top: 0px;
    margin-bottom: 5px;
    font-size: 0.75rem;
}

#notiBellText
{
    display: none;
}

#notiBell
{
    animation: none;
    top: 7px !important;
    right: unset !important;
    left: 20px;
    font-size: 25px;
    width: 30px;
    height: 25px;
}

#notiBellArea
{
    right: unset;
    left: 0px;
    z-index: 2;
}


.bottomWrapperParent
{
    margin: 0px 10px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    overflow: hidden;
    width: -moz-calc(100% - 20px) !important;
  width: -webkit-calc(100% - 20px) !important;
  width: -o-calc(100% - 20px) !important;
  width: calc(100% - 20px) !important;


}

#bottomWrapper {
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
}

.categoryItem
{
    overflow: hidden;
}

.categoryItem h3
{
    position: relative;
    bottom: 25px;
    left: 7px;
    margin-bottom: -20px;
    text-align: left;

}

#displayCategoryWrapperStart
{
    width: 10px;
    height: 100px;
    position: absolute;
    z-index: 1;
    left: 23px;
}

#displayCategoryWrapperEnd
{
    width: 10px;
    height: 100px;
    position: absolute;
    z-index: 1;
    right: 23px;
    bottom: 30px;
}


#showMenuBtn
{
    margin: 0 auto;
    right: 50%;
    margin-right: -50px;
    width: 100px;
    border-radius: 20px;
    height: 40px;
}

#showMenuBtn span {
    display: inline;
    font-size: 1.25rem;
    margin-left: 10px;
    position: relative;
    top: -1px;
}

#branchSelectOption, #selectlang {
    border: none;
    border-bottom: 2px solid var(--color1);
    box-shadow: none;
    height: 31px;
    border-radius: 0px;
}

.serachDiv
{
    width: 55% !important;
}

.languageDiv
{
    width: 30% !important;
    padding: 10px;
}


.categoryWrapper button  {
    border-radius: 50px;
}


.categoryWrapper button[id*='initialPlusBtn']  {
    background-color: var(--color1);
    border: none;
    border-radius: 50px;
    width: 80px;
}


.modal {
    padding: 0 !important; 
  }
  .modal .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    top: 0px;
    position: absolute;
    right: 0px;
  }
  .modal .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;

  }
  .modal .modal-body {
    overflow-y: auto;
  }



  .modal-dialog .btn.btn-success
  {
    background-color: var(--color1);
    border: none;
    border-radius: 50px;
  }

  .modal-dialog .btn
  {
    border-radius: 50px;
  }

  .modal.show .animateModal {
    animation: animateright .5s;
  }
  
  @keyframes animateright {
    from {
      right: -300px;
    }
  
    to {
      right: 0;
    }
  }
  .modal:not(.show) .animateModal {
    animation: animateleft .5s;
  }
  
  @keyframes animateleft {
    from {
      right: 0;
      opacity: 1;
    }
  
    to {
      right: -300px;
      opacity: 0;
    }
  }

  
  #bottomWrapper {
    background-color: var(--color1);
  }