@media screen and (max-width: 450px){
    body
    {
        flex-direction: column;
    }

    .responsive_table_heading {
        display: table-cell;
        width: 40%;
        padding: 3px 10px;
    }


    #LoginContrainer {
        background: no-repeat url("../image/login-background.jpg")  right top;
        background-size: 160% 100%;
        margin: 20px;
        width: calc(100vw - 40px);
        height: calc(100vh - 80px);

    }
    .login_form {
        margin-left: 100%;
    }

    .form_section {
        width: calc(100vw - 80px);
        margin-left: 0;
        margin: 0px 0px;
    }
    .form_border {
       margin: auto;
       width: 100%;
       padding: 0px 0px;
    }
    form {
        padding: 19px;
    }


    .sidebar {
        flex-direction: row;
        width: 100vw;
        height: fit-content;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        position: relative;
    }
    .sidebar a:first-child {
        border-top: none;
      }
    #MenuIcon {
        display: block;
        margin: 20px;
    }
    #MenuIcon:hover ~ #MenuItems, #MenuItems:hover {
        box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.42);
        right: auto;
    }

    #MenuItems {
        right: 100vw;
        transition: right 2s ease 5s;
        position: absolute;
        top: calc(50% - .75em);
        height: fit-content;
        width: fit-content;
        font-size: 0.8em;
        z-index: 1;
        background: #f2f2f2;
    }
    .dropdown {
        margin-top:0;
    }
    #UserIcon {
        background: url(../image/circle-user-solid.svg) no-repeat;
    }
    .dropdown:hover {
        background-color: #f2f2f2;
    }
    .dropdown #UserName, .dropdown #ArrowIcon
    {
        display: none;
    }
    .dropdown:hover #UserIcon,a.active #UserIcon{
        background: url(../image/circle-user-solid.svg) no-repeat;
    }
    a:hover #ProfileIcon {
        background: url(../image/user-solid-hover.svg) no-repeat;
      }

    #ProfileIcon {
        background-image: url(../image/user-solid.svg);
    }

    a:hover #ChangepasswordIcon {
        background: url(../image/lock-solid.svg) no-repeat;
      }

    #ChangepasswordIcon {
        background-image: url(../image/lock-solid-hover.svg);
    }

    a:hover #LogoutIcon {
        background: url(../image/arrow-right-from-bracket-solid.svg) no-repeat;
      }

    #LogoutIcon {
        background-image: url(../image/arrow-right-from-bracket-solid-hover.svg);
    }
    .dropdown-content {
        min-width: 140px;
        font-size: 0.7em;
        line-height: 2em;
        top: calc(1.5em + 40px);
        left: auto;
        right: 0;
        bottom: auto;
    }
    .dropdown-content a {
        color: #1d2c59;
        border-bottom: 1px solid #1d2c59;
    }
    .dropdown-content a:hover {
        background-color: #1d2c59;
        color: #f2f2f2;
      }

    .dropdown:hover .dropdown-content {
        display: block;
        color:  #162440;
        background-color : #f2f2f2;
      }


    #mainSection {
        flex-direction: row;
        width: 100vw;
        height: fit-content;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .left_section{
        margin:50px auto;
    }
    #calenderTable td,th {
        cursor: pointer;
        padding: 4px 5px;

        }
    .table_text {
        padding: 2px;
        display: table-cell;
    }
    #loginForm {
        height: fit-content;
    }
    /* .breadcrumbs{
        display: none;
    } */
    .MainDashboardSection{
        flex-direction: column;
    }
    .main_table_header,#TableAddButton {
        font-size: 1em;
    }
    .tableSearchArea.grid {
        display: table-column;
    }
    #tableSearchBox {
        width: calc(100vw - 4em);
    }

    .table thead {
        display: none;
    }
    .table tbody td:first-child {
        display: none;
    }
    .table tbody tr {
        display: table;
        width: 100%;
        text-align: left;
        margin: 2px;
    }
    .table tbody td {
        padding: 2px 0 4px 20px;
        display: table-row;
    }
    .table tbody td:nth-child(2) {
        padding-top: 10px;
    }
    #calenderTable {
        max-width: fit-content;
    }
    .responsive_pegination {
        padding: 5px;
        background: #f2f2f2;
        color: #1d2c59;
        margin: 10px;
        text-align: center;
        font-size: .8em;
        border-radius: .25rem;
        font-weight: 800;
        cursor: default;
        display: inline;
    }
    .pagination_button {
        display: none;
    }
    .formDiv.grid {
        display: block;
    }
    .formDiv {
        margin-top: 3.8em;
    }

    .listheadinglist {
        font-weight: bold;
    }
    #EmployeeLocationTableId td {
        display: table-row;
    }
    .tableSearchArea.gridreport {
        display: block;
        /* padding: 3px; */
        font-size: 0.8em;
    }
    .tableSearchArea.gridreport {
        display: block;
        font-size: 0.8em;
      }
      .tableSelectHeading.grid {
        display: block;
        padding: 2px;
      }
      .tableSelectHeading.grid>* {
        display: inline-block;
        width: 50%;
      }
      .table tbody td.nullTd{
        display: table-row
    }
    .ulbackground {
        background-color: #eae6e6a3;
    }
    .VisibleNameLi {
        font-weight: 400;
      }
      #ReportTableTbody td:first-child {
        display: table-row;
      }
}