@media screen and (min-width: 200px) and (max-width: 776px){
  .modal-dialog-slideout{
    width: 400px !important;
  }


  
.crossBtn {
    display: flex;
    width: 24px !important;
    cursor: pointer;
}
    .logoContainer #LoginForm
     {
        width: 80% !important;
    }
    .propertyCard {
        width: auto !important;
    }
    .logoContainer{
    position: absolute;
    top: 14%;
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    width: 100%;
}

  .logoContainer img{
  width: 330px !important;
}

    .loginBg {
        background-image: url('../images/loginBg.svg') !important;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        bottom: 0%;
        left: 0%;
        right: 0%;
        height: 30vh;
        width: 100%;
    }


}


@media screen and (min-width: 777px) and (max-width: 999px) {


    .loginBg {
        background-image: url('../images/webLoginBg.svg');
    }

    .propertyCard {
        width: auto;
    }

    

    
.crossBtn {
    display: none;
    width: 24px !important;
    cursor: pointer;
}
}

@media screen and (min-width: 1000px) {

    .loginBg {
        background-image: url('../images/webLoginBg.svg');
    }

    .propertyCard {
        width: 32% !important;
    }

  .crossBtn {
    display: none;
    width: 24px !important;
    cursor: pointer;
}
}

/* 
@media screen and (min-width: 200px) and (max-width: 575px){

  .modal-body{
    overflow: auto !important;
  }
} */


@media (max-width: 767.98px) {
    .modal-fullscreen-md-down {
        width: 100vw !important;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .dateLabel {
        width: 100% !important;
        justify-content: start;
    }

        .dateLabel input {
            width: 100% !important;
        }

    .menunav {
        display: none !important;
    }

    .menubar {
        display: block !important;
    }

}