@media screen and (max-width: 1800px) and (min-width: 1601px) {
    #BA-chart-job-error {
        width: 433px !important;
        left: -50px;
    }
}

@media only screen and (max-width: 1600px) {
    /* header */
    #calendar {
        width: 100%;
    }
    /* visitor Details */
    .hSI_C,
    .hSI {
        font-size: 14px;
        width: 220px;
    }
    .hSI_alerC {
        width: 50%;
    }
    .rV_labal_C {
        width: 27%;
    }
    .rV_labal_C,
    .rV_labal {
        font-size: 14px;
        width: 45%;
    }
    .parkigPassD_card {
        padding: 0px;
    }
    .hSI_C {
        width: 350px;
    }
    .parkigPassD_card {
        width: 100%;
    }
    #BA-chart-job-error {
        width: 355px !important;
    }
    .inpu_widthH {
        right: -13px;
        font-size: 14px;
        width: 203px;
    }
    .hSI_mD {
        width: 72%;
    }
    .vendor-text input {
        width: 90%;
    }
    .imageS_img_sec {
        height: 231px;
    }
    .add_Gpriview {
        height: 400px;
    }
    /* ******************* gallery screen ******************* */
    .galary_images_box {
        height: 191px;
    }
    .add_GpriviewPortrat {
        height: 214px;
    }
    /* ************************** amenities page ********************** */
    .amenitiesPre {
        width: 70%;
    }
    .amenities-file-error {
        width: 70%;
    }
    /* ************************** edit security team page ********************** */
    .circle {
        width: 18vw;
        height: 18vw;
        right: calc(22% - 9vw);
    }
    .ct-col-12 {
        width: 80%;
    }
    .ct-justify-end {
        justify-content: flex-end !important;
    }
    .ct-align {
        text-align: left;
    }
    .ct2-reverse {
        flex-direction: column-reverse;
    }
}

@media only screen and (max-width: 1440px) {
    /* header */
    nav {
        padding: 12px 0px 12px 8px;
    }
    /* visitor Details */
    .parkigPassD_card {
        width: 100%;
    }
    .rV_labal_C,
    .rV_labal {
        font-size: 14px;
        width: 43%;
    }
    .hSI_C {
        width: 285px;
    }
    .vmo-card-section,
    .vmo-card-section-2,
    .vpsw {
        margin-bottom: 0px;
    }
    .suit-table-outer table {
        margin-top: 10px;
    }
    .suit-table-outer table tbody td {
        font-size: 14px;
    }
    .week-tabs {
        margin-bottom: 0px;
    }
    .week-tabs .button23 {
        margin-bottom: 10px;
    }
    .vpsw-form input {
        padding: 8px 15px;
    }
    .mt1440 {
        margin-top: 0px;
    }
    .table_wC {
        width: 200px;
    }
    .visitor-card > h6 {
        font-size: 14px;
    }
    .add_pass_btn {
        width: 160px;
        font-size: 13px;
    }
    .suit-input-outer {
        display: flex;
    }
    .suit-input-outer {
        justify-content: start;
    }
    .datePike .ui-datepicker-calendar td {
        width: 40px;
        height: 40px;
    }
    .ui-datepicker-calendar th {
        padding: 0px !important;
    }
    .ui-datepicker-calendar {
        font-size: 14px;
    }
    .register-link a {
        font-size: 14px;
    }
    /* message page */
    .messages_box {
        height: 88vh;
    }
    .message_text_inp {
        width: 67%;
    }
    .message_ul {
        height: 80vh;
    }
    .res_fontSize {
        font-size: 14px;
    }
    #BA-chart-job-error {
        width: 299px !important;
        left: -35px;
    }
    .graph {
        padding-top: 17px;
        padding-bottom: 8px;
    }
    .barGraph > h6 {
        padding-left: 10px !important;
    }
    .AmedonutPT {
        padding-top: 15px;
        padding-bottom: 20px;
    }
    .amenities_card {
        padding: 0px;
    }
    .over_Hide {
        overflow-x: auto;
    }
    canvas#horizontalBarChartCanvas {
        width: 800px !important;
        height: 396px !important;
    }
    .CAmenitiesB {
        border-radius: 16px;
        padding: 15px 8px;
    }
    .alert_card {
        width: 100%;
    }
    .res_fontSize {
        font-size: 14px;
    }
    .res_font {
        font-size: 14px;
    }
    .vpsw-heading label,
    .vpsw-heading {
        font-size: 14px;
    }
    .CAlabel {
        font-size: 14px;
    }
    .hSI::placeholder,
    .hSI_C::placeholder {
        font-size: 14px;
    }
    .form_group > select {
        font-size: 14px;
    }

    .inter_bold_font {
        font-size: 16px;
    }
    .img_sec {
        width: 250px;
    }
    .maintenance_messages_box {
        height: 45vh;
    }
    .maintenance_card_img,
    .mainte_card_img {
        height: 200px;
    }
    .modul_Cspan {
        font-size: 13px;
    }
    .donut_chart_labels1,
    .donut_chart_labels2 {
        font-size: 14px;
    }
    .CAmy_mainte {
        margin-top: 0px;
    }
    .P_bothS {
        padding: 0px 27px;
    }
    .add_Gpriview {
        height: 400px;
    }
    .imageS_img_sec {
        width: 100%;
        height: 231px;
    }
    .galary_images {
        height: auto;
    }
    .dash_task_mt {
        margin-top: -2px;
    }
    /* ********************** login page****************** */
    .logo_nameL {
        width: 80%;
    }
    /* ******************* gallery screen ******************* */
    .galary_images_box {
        height: 160px;
    }
    .add_GpriviewPortrat {
        height: 182px;
    }
    /* ************************** amenities page ********************** */
    .amenitiesPre {
        width: 75%;
    }
    .amenities-file-error {
        width: 75%;
    }
    .add_deli_img_H {
        height: 167px;
    }
}

@media only screen and (min-width: 1400px) {
    .customcol_xxl {
        max-width: 20%;
    }
    .container {
        max-width: 1350px;
    }
    /* Visitor Parking Dashboard */
    .ui-datepicker-calendar th {
        padding: 6px;
    }
}

@media only screen and (max-width: 1368px) {
    .font_semi_bold {
        font-size: 14px;
    }
    /* header */
    .ui-datepicker-calendar th {
        padding: 4px;
    }
    .ui-datepicker-calendar td {
        padding: 0px 0px;
    }
    /* middle section dashboard */
    .home-section {
        width: calc(100% - 520px);
        left: 256px;
    }
    /* visiter parking dashboard */
    .visitor-card > h6 {
        font-size: 16px;
    }
    .vmo-card-section div > h5 {
        font-size: 22px;
    }
    .visitor-card-heading > h6 {
        font-size: 14px;
        font-weight: 400;
    }
    .visitor-card {
        min-height: 80px;
        padding: 0%;
    }
    .content {
        font-size: 14px;
    }
    .res_font {
        font-size: 14px;
    }
    .visitor-card {
        min-height: 70px;
    }
    .set_h {
        height: 40px;
    }
    .suite-wrapper_checkB {
        margin-top: 217px;
    }
    .visitor-card > h6 {
        font-size: 14px;
        font-weight: 600;
    }
    .vmo-card .odd-bg,
    .even-bg {
        padding: 15px;
    }
    .visitor-card span {
        font-size: 12px;
    }
    .hSI {
        width: 200px;
    }
    .hSI_alerC {
        width: 50%;
    }
    .parkigPassD_card {
        width: 100%;
    }
    nav {
        padding: 12px 0px 12px 14px;
    }
    .set_h {
        height: 30px;
    }
    .register-link a {
        font-size: 14px;
    }
    .pagination a {
        font-size: 12px;
        padding: 8px 13px;
    }
    /* message page */
    .my_message_con,
    .client_message_con {
        max-width: 95%;
    }
    #gradientChartCanvas0,
    #gradientChartCanvas1 {
        height: auto !important;
        width: 222px;
    }
    #BA-chart-job-error {
        width: 120% !important;
        left: -28px;
    }
    .over_Hide {
        height: 250px;
    }
    .hSI_dash {
        padding: 0px 5px;
        width: auto;
        font-size: 12px;
    }
    .AmedonutPT {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .suit-input-outer input::placeholder {
        font-size: 12px;
    }
    .hSI::placeholder,
    .hSI_C::placeholder {
        font-size: 12px;
    }
    .form_group > select {
        font-size: 12px;
    }
    .alert_form_groupC {
        flex-direction: column;
        align-items: flex-start;
    }
    .alert_form_groupCUpad {
        justify-content: space-between;
        margin-top: 20px;
        width: 100%;
    }
    .img_sec {
        width: 234px;
    }
    .maintenance_messages_box {
        height: 45vh;
    }
    .inpu_widthH {
        right: -33px;
        width: 202px;
        font-size: 14px;
    }
    .hSI_mD {
        width: 65%;
    }
    .imageS_img_sec {
        width: 100%;
        height: 197px;
    }
    .galary_images {
        height: auto;
    }
    .add_Gpriview {
        height: 320px;
    }
    /* ************************ login page********************** */
    .with-email::after {
        width: 27%;
    }
    .with-email::before {
        width: 27%;
    }
    .with-emailL::after {
        width: 38%;
    }
    .with-emailL::before {
        width: 38%;
    }
    /* ********************** gallery screen ******************** */
    .galary_images_box {
        height: 147px;
    }
    .add_GpriviewPortrat {
        height: 166px;
    }
    /* ******************** amenities page ************************* */
    .amenitiesPre {
        width: 95%;
    }
    .amenities-file-error {
        width: 95%;
    }
    .add_deli_img_H {
        height: 157px;
    }
    /* ************************** edit security team page ********************** */
    .circle {
        right: calc(20% - 9vw) !important;
        width: 18vw !important;
        height: 18vw !important;
    }
    .edit-security-container form {
        margin-left: 40px !important;
        padding: 20px !important;
    }
    .security-form-text {
        display: block;
        width: auto;
        margin-left: 20px !important;
    }
    .security-form-input:not(.time-input-box) {
        display: inline-block;
        width: auto;
        margin-left: 20px !important;
        margin-bottom: 10px;
    }
    .time-input-box {
        display: inline-block;
        width: fit-content !important;
        margin-left: 20px !important;
        margin-right: 5px !important;
    }
    .b-indent-input {
        margin-left: 110px !important;
        display: inline-block;
        margin-right: 0px !important;
        width: 175px !important;
    }
    .indent-input {
        margin-top: 10px;
        margin-left: 20px !important;
        margin-right: 0px !important;
        width: 90px;
    }
    .details-header {
        margin-left: 100px !important;
    }
    .grey-button-container {
        margin-left: 6vw !important;
    }
}

@media (max-width: 1326px) {
    /* ********************** gallery screen ******************** */
    .add_GpriviewPortrat {
        height: 157px;
    }
}

@media (max-width: 1300px) {
    /* ********************** gallery screen ******************** */
    .galary_images_box {
        height: 147px;
    }
}

@media (max-width: 1280px) {
    /* header */
    .res_col_rev_header {
        display: flex;
        flex-direction: column;
    }
    .sidebar-button {
        display: flex;
        justify-content: space-between;
    }
    .res_5jus {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    .right-side {
        width: 100%;
        justify-content: space-between;
        margin-top: 10px;
    }
    /* middle section in dashboard */
    .home-section {
        width: calc(100% - 512px);
    }
    .home-section .home-content {
        padding: 0px 5px;
    }
    section.home-section {
        padding-top: 20px;
    }
    /* Visitor Parking Dashboard */
    .ui-datepicker-calendar th {
        padding: 0px;
    }
    .ui-datepicker-calendar td {
        padding: 5px 4px;
    }
    #calendar {
        padding-bottom: 13px;
    }
    .ui-datepicker-calendar {
        font-size: 14px;
    }
    .rV_labal,
    .rV_labal_C {
        font-size: 13px;
    }
    .hSI {
        font-size: 13px;
        width: 188px;
    }
    .hSI_alerC {
        width: 50%;
    }
    .form_group {
        margin-top: 0px;
    }
    .ui-datepicker-calendar .ui-state-default {
        margin-top: 0px;
    }
    .table_wC {
        width: 130px;
    }
    nav {
        padding: 12px 0px 12px 10px;
    }
    .ui-datepicker-prev:after {
        font-size: 16px;
        margin-top: 12px;
    }
    .ui-datepicker-next:after {
        font-size: 16px;
        margin-top: 13px;
    }
    /* message page */
    .messages_box {
        height: 83vh;
    }
    .message_text_inp {
        width: 67%;
    }
    .message_ul {
        height: 75vh;
    }
    #ecalendar .fc-view-harness {
        height: 60vh !important;
    }
    .res_fontSize {
        font-size: 13px;
    }
    .Alert_Draft_btn {
        margin-top: 0px;
    }
    .mt1280_0 {
        margin-top: 0px;
    }
    .vmo-card .odd-bg,
    .even-bg {
        padding: 10px;
    }
    .res_1280_col {
        flex-direction: column;
    }
    .img_sec {
        width: 234px;
        height: 259px;
    }
    #BA-chart-job-error {
        width: 124% !important;
        font-size: 13px;
    }
    .maintenance_messages_box {
        height: 45vh;
    }
    .inpu_widthH {
        right: -45px;
    }
    .donut_chart_labels1::before,
    .donut_chart_labels2::before {
        height: 15px;
        width: 15px;
        top: calc(50% - 7px);
        left: -30%;
    }
    .donut_chart_labels1::before {
        left: -40%;
    }
    .imageS_img_sec {
        width: 100%;
        height: 178px;
    }
    /* ******************* gallery ************************* */
    .galary_images_box {
        height: 135px;
    }
    .P_bothR {
        padding-right: 15px;
    }
    .CT-P_bothR {
        padding-right: 2px;
    }
    .P_bothL {
        padding-left: 15px;
    }
    .circle {
        right: calc(20% - 10vw) !important;
        width: 16vw !important;
        height: 16vw !important;
    }
}

@media (max-width: 1240px) {
    .hSI_C {
        width: 196px;
    }
    .rV_labal_C {
        width: 32%;
    }
    .rV_labal {
        width: 45%;
    }
    .hSI {
        width: 169px;
    }
    .inpu_widthH {
        right: -84px;
    }
    /* ************************** edit security team page ********************** */
    .circle {
        width: 14vw !important;
        height: 14vw !important;
        right: calc(20% - 8vw) !important;
    }
}
@media (min-width: 1200px) {
    .csx-xl-mt-4-5 {
        margin-top: 28px;
    }
}
@media (max-width: 1200px) {
    nav {
        padding: 12px 15px 12px 15px;
    }
    .bg-glass {
        transform: scale(1.1);
    }
    .ui-datepicker-calendar td {
        padding: 0px 0px;
    }
    .rV_labal_C {
        width: 34%;
    }
    .hSI_C {
        width: 177px;
    }
    .hSI {
        width: 152px;
    }
    .rV_labal {
        width: 47%;
    }
    .vpsw-form input {
        padding: 8px 4px;
    }
    .vpsw-left {
        margin-top: 20px;
    }
    .hSI_alerC {
        width: 50%;
    }
    /* ************************ edit security team page ************************* */
    .edit-security-container form {
        margin-left: 10px !important;
        padding: 10px !important;
    }
    #calendar {
        width: 52%;
    }
}
@media only screen and (max-width: 1180px) {
    /* header */
    .nav_z {
        width: calc(100% - 466px);
    }
    .right-sidebar {
        width: 233px;
    }
    .sidebar {
        width: 230px;
    }
    .home-section {
        width: calc(100% - 451px);
        left: 225px;
    }
    /* Visitor Parking Dashboard */
    #calendar th {
        padding: 10px;
    }
    #calendar {
        width: 55%;
        padding-bottom: 15px;
    }
    .mt1180 {
        margin-top: 0px;
        margin-bottom: 20px;
    }
    .res_mALL {
        margin-top: 15px;
    }
    .formG_alertC {
        display: flex;
        justify-content: space-between;
    }
    .formG_alertC {
        margin-top: 15px;
    }
    .res_m {
        margin-top: 15px;
    }
    /* ************************ login page ************************* */
    .with-email::after {
        width: 21%;
    }
    .with-email::before {
        width: 21%;
    }
    .with-emailL::before {
        width: 34%;
    }
    .with-emailL::after {
        width: 34%;
    }
    .ct-col-12 {
        width: 100%;
    }
    .add-suite-img .add_img,
    .add-floor-img .add_img {
        width: 100%;
        height: 200px;
    }
    .security-form-text {
        display: block;
        width: auto;
        margin-left: 20px !important;
    }
    /* ************************ add occurrrence/report page ************************* */
    .security-form-input:not(.time-input-box) {
        display: inline-block;
        width: auto;
        margin-left: 20px !important;
        margin-bottom: 10px;
    }
    .time-input-box {
        display: inline-block;
        width: fit-content !important;
        margin-left: 20px !important;
        margin-right: 5px !important;
    }
    .b-indent-input {
        margin-left: 110px !important;
        display: inline-block;
        margin-right: 0px !important;
        width: 175px !important;
    }
    .indent-input {
        margin-top: 10px;
        margin-left: 20px !important;
        margin-right: 0px !important;
        width: 90px;
    }
    .details-header {
        margin-left: 100px !important;
    }
    .grey-button-container {
        margin-left: 12vw !important;
    }
    .colct100 {
        width: 100%;
    }
}

@media only screen and (max-width: 1024px) {
    /* header */
    .res_1024_ps-0 {
        padding-left: 0px;
    }
    .navbar_content {
        padding: 0px 5px;
    }
    .res_col_rev_header {
        display: flex;
        flex-direction: column;
        padding-left: 9px;
    }
    nav {
        padding: 12px 0px 12px 0px;
    }
    .toggleR-sidebar {
        display: none;
    }
    .breadcrumb {
        font-size: 14px;
    }
    /* visiter parking dashboard */
    #calendar {
        width: 72%;
    }
    .date-time-calandar {
        margin-top: 15px;
    }
    .ui-datepicker-calendar td {
        padding: 10px 8px;
    }
    .visitor-card > h6 {
        font-size: 14px;
    }
    .visitor-card {
        min-height: 65px;
    }
    .vmo-card .odd-bg,
    .even-bg {
        padding: 10px;
    }
    /* Ragister Visitor Vehicle */
    .rV_labal {
        width: 91px;
        text-align: start;
    }
    .res_tC {
        text-align: center;
    }
    .content {
        display: inline-block;
    }
    .rv_form {
        margin-top: 0px !important;
        padding-top: 0px !important;
    }
    .fNoCard > .form_group {
        display: flex;
        flex-direction: column;
    }
    .fNoCard > .form_group > .rV_labal {
        width: 200px;
        padding-bottom: 10px;
    }
    .fNoCard > .form_group > .hSI {
        width: auto;
        margin-left: 0px;
    }
    .fNoCard > .form_group_t {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .fNoCard > .parking_pass_active .form_group {
        align-items: start;
    }
    .fNoCard > .parking_pass_active .form_group {
        display: flex;
        flex-direction: column;
    }
    .fNoCard > .parking_pass_active .form_group .rV_labal {
        width: 200px;
    }
    .fNoCard > .parking_pass_active .form_group .hSI {
        width: 100%;
        margin-left: 0px;
    }
    .sidebar::-webkit-scrollbar {
        display: none;
    }
    .right-sidebar::-webkit-scrollbar {
        display: none;
    }
    .hSI_C {
        width: 144px;
    }
    .thermostate-smart-inner {
        padding: 16px 15px 1px 15px;
    }
    .vpsw-form input {
        padding: 8px 37px;
    }
    .set_h {
        height: 40px;
    }
    .messenger {
        display: block;
        position: fixed;
        bottom: 2%;
        height: 50px;
        width: calc(100% - 465px);
        left: 225px;
    }
    .messenger-btn {
        padding: 11px;
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 60px;
        background-color: #0a284d;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        z-index: 2;
    }
    .messenger-btn img {
        width: 30px;
        height: 30px;
    }
    .messenger-links {
        position: absolute;
        left: 0px;
        bottom: 60px;
        width: 100%;
        transform: scale(0);
        transform-origin: 100% 50%;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        z-index: 0;
    }
    .messenger-links.show {
        left: 0px;
        transform: scale(1);
    }
    .messenger-links a {
        width: 40px;
        margin-left: 4px;
    }
    .messenger-links img {
        max-width: 40px;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }
    .messenger-links a:hover img {
        transform: scale(1.1);
        text-decoration: none;
    }
    .messenger-btn {
        display: block;
    }
    .messages_box {
        height: 60vh;
    }
    .fc-daygrid-body {
        width: 100%;
    }
    .ecalendarBack {
        padding: 15px !important;
    }
    #ecalendar .fc-view-harness {
        height: 51vh !important;
    }
    .TRW {
        width: auto;
    }
    .res_m {
        margin-top: 15px;
    }
    .barGraph {
        margin-top: 15px;
    }
    .graph {
        width: 90%;
        margin-left: 5%;
    }
    .barGraph > h6 {
        padding-left: 0px !important;
    }
    .amenities_card_togg_M {
        margin-top: 20px;
    }
    .week-tabs button,
    .page-button button {
        font-size: 14px;
    }
    .hSI_alerC {
        width: 50%;
    }
    .modal_body {
        font-size: 13px;
    }
    .CAlabel {
        font-size: 13px;
    }
    .res_fontSize {
        font-size: 13px;
    }
    .res_font {
        font-size: 13px;
    }
    .vpsw-heading label,
    .vpsw-heading {
        font-size: 13px;
    }
    .CAlabel {
        font-size: 13px;
    }
    .hSI::placeholder,
    .hSI_C::placeholder {
        font-size: 13px;
    }
    .form_group > select {
        font-size: 13px;
    }
    span.suite-active,
    .user-active {
        font-size: 13px;
    }
    span.suite-Inactive {
        font-size: 13px;
    }
    span.suite-expired {
        font-size: 13px;
    }
    span.suite-panding,
    .user-panding {
        font-size: 13px;
    }
    .suit-table-outer table tbody td {
        font-size: 13px;
    }
    .mainte_img_span {
        font-size: 13px;
    }
    .vmo-card-section div > h5 {
        font-size: 20px;
    }
    .maintenance_messages_box {
        height: 45vh;
    }
    .modul_Cspan {
        font-size: 11px;
    }
    .alert_form_group {
        justify-content: space-between;
    }
    .P_bothS {
        padding: 0px 15px;
    }
    .hSI_mD {
        width: 57%;
    }
    .vendor-text input {
        width: 86%;
    }
    .CAmy_mainte {
        margin-top: 15px;
    }
    .imageS_img_sec {
        height: 129px;
    }
    .add_Gpriview {
        height: 240px;
    }
    /* *************** login page ******************* */
    .res_login {
        padding: 0px 20px;
    }
    /* ************************ gallery page **************** */
    .galary_images_box {
        height: 149px;
    }
    .add_GpriviewPortrat {
        height: 109px;
    }
    /* **************** amenities page **************** */
    .amenitiesPre {
        height: 164px;
    }

    .add_deli_img_H {
        height: 131px;
    }
    .invite_uNavTabs {
        gap: 20px !important;
    }
    .ct-col-12 {
        width: 100%;
    }
    .circle {
        width: 16vw;
        height: 16vw;
        right: calc(50% - 8vw) !important;
        top: 13% !important;
    }
    .edit-security-container form {
        margin-top: 225px !important;
        padding: 10px !important;
    }
}
@media (min-width: 1181px) and (max-width: 1211px) {
    .add_pass_btnD {
        margin-bottom: 15px !important;
    }
}

@media screen and (min-width: 992px) and (max-width: 1180px) {
    .ct-col-100 {
        width: 100%;
    }
}

@media (min-width: 992px) and (max-width: 1150px) {
    .add_pass_btnD {
        margin-bottom: 15px !important;
    }
}

@media only screen and (max-width: 992px) {
    /* header section */
    .res_col_rev_header {
        flex-direction: row;
        padding-left: 0px;
    }
    .nav_z {
        padding-left: 10px;
        padding-right: 10px;
        width: calc(100% - 233px);
        margin-left: 0px;
    }
    nav .search-box input {
        width: 190px;
    }
    .right-side {
        margin-top: 0px;
    }
    .res_s {
        display: block;
        width: 200px;
    }
    .breadcrumb {
        font-size: 12px;
    }
    nav {
        padding: 12px 20px 12px 5px;
    }
    .bar {
        position: static;
        display: block;
    }
    .header {
        background-color: #ffffff;
    }
    .vmo-card {
        margin-bottom: 1rem;
    }
    .messaging-section .messag-list-user {
        width: 100%;
    }
    .messaging-section {
        display: flex;
        flex-direction: column;
    }
    .messaging-section .chat-message-section {
        width: 100%;
        background-color: #d0dcf7;
    }
    .col-xs-30 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    .col-xs-70 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
    }
    .widthbar {
        width: 220px !important;
        left: 0px !important;
        z-index: 100;
        transition: 0.5s all;
    }
    .sidebar {
        width: 220px;
        left: -220px;
        padding-left: 0px;
    }
    .home-section {
        width: calc(100% - 233px);
        left: 0;
    }
    .right-side {
        justify-content: space-between;
    }
    /* left padding in home content */
    .home-section .home-content {
        padding-left: 0px;
    }
    /* calander */
    #calendar {
        width: 60%;
    }
    .hSI_C {
        width: 241px;
    }
    .content {
        width: auto;
    }
    .rV_labal {
        width: 168px;
    }
    .table_wC {
        width: 250px;
    }
    .visitor-card-heading > h6 {
        font-size: 13px;
    }
    .hSI {
        margin-left: 0px;
    }
    .hSI {
        width: 187px;
    }
    .messages_box {
        height: 71vh;
    }
    .messenger {
        width: calc(100% - 260px);
        left: 0;
    }
    .fc-daygrid-body {
        width: 100%;
    }
    .vmo-card .odd-bg,
    .even-bg {
        padding: 15px;
    }
    #BA-chart-job-error {
        width: 124% !important;
    }
    .maintenance_messages_box {
        height: 45vh;
    }
    .modul_Cspan {
        font-size: 13px;
    }
    .inpu_widthH {
        right: -45px;
    }
    .hSI_mD {
        width: 69%;
    }
    .add_Gpriview {
        height: 280px;
    }
    .imageS_img_sec {
        height: 181px;
    }
    /* ******************* gallery page ********************** */
    .galary_images_box {
        height: 198px;
    }
    .add_GpriviewPortrat {
        height: 149px;
    }
    /* **************** amenities page **************** */
    .amenitiesPre {
        height: 200px;
    }
    .ct-reverse {
        flex-direction: column-reverse;
    }
    /* ************************ edit security team page ************************* */
    .circle {
        width: 16vw;
        height: 16vw;
        right: calc(20% - 8vw);
        top: 35%;
    }
    .edit-security-container form {
        margin-top: 0px;
        padding: 20px;
    }
    .Alert_Draft_btn {
        margin-top: 15px;
    }
    .breadcrumb > li:nth-child(2) {
        display: none;
    }
}

@media (max-width: 900px) {
    .nav_z {
        margin-left: 0px;
    }
    .fc-daygrid-body {
        width: 100%;
    }
}

@media only screen and (max-width: 820px) {
    /* header */
    .nav_z {
        width: 100% !important;
    }
    .header-section {
        width: 100%;
    }
    nav {
        padding: 12px 0px 12px 0px;
    }
    .home-section .home-content {
        padding: 0px 0px;
    }
    /* right side bar */
    .right-sidebar {
        top: 60px;
        max-height: calc(100vh - 60px);
    }
    /* left side bar */
    .sidebar {
        top: 60px;
        max-height: calc(100vh - 60px);
    }
    /* home content width */
    .home-section {
        left: 0px;
    }
    #calendar {
        /* width: 79%; */
        width: auto;
        padding-bottom: 20px;
        padding-top: 0;
    }
    .vmo-card-section div > h5 {
        margin-top: 5px;
        font-size: 18px;
    }
    .visitor-card {
        min-height: 50px;
    }
    .page-heading h4 {
        font-size: 16px;
    }
    .res_col_rev {
        flex-direction: column;
        align-items: start !important;
        /* padding-left: 10px; */
    }
    .res_ps_n {
        padding-left: 0px !important;
        width: 100%;
    }
    .small {
        text-align: left !important;
        padding-top: 10px;
    }
    .res_tM {
        margin-top: 30px;
    }
    /* .progress {
        width: 112px;
    } */
    /* register visitor */
    .fNoCard > .form_group {
        display: flex;
        flex-direction: row;
    }
    .fNoCard > .form_group > .rV_labal {
        width: 180px;
    }
    .fNoCard > .form_group > .hSI {
        width: 351px;
        margin-left: 10px;
    }
    .fNoCard > .form_group_t {
        display: flex;
        flex-direction: row;
        justify-content: left;
    }
    .fNoCard > .parking_pass_active .form_group {
        display: flex;
        flex-direction: row;
    }
    .fNoCard > .parking_pass_active .form_group > .rV_labal {
        width: 180px;
    }
    .fNoCard > .parking_pass_active .form_group > .hSI {
        width: 351px;
        margin-left: 10px;
    }
    .fNoCard > .form_group_t {
        display: flex;
        flex-direction: row;
        justify-content: left;
    }
    .rV_labal {
        width: 180px;
        text-align: start;
        padding-left: 0px;
    }
    .add_pass_btn_sec {
        margin-top: 30px;
    }
    .rv_form {
        width: 99%;
        margin: auto;
        text-align: left;
    }
    .hSI {
        width: 373px;
    }
    .content {
        width: 375px;
        display: inline;
    }
    .rV_labal_C {
        width: 41%;
    }
    .hSI_C {
        width: 290px;
    }
    .parkigPassD_card {
        margin-top: 20px;
    }
    .suit-input-inner {
        width: 50%;
    }
    .suit-input-inner_message {
        width: 89%;
    }

    .visitor-card > h6 {
        font-size: 13px;
    }
    .suit-input-outer {
        flex-wrap: wrap;
    }
    .thermostate-smart-image {
        width: 150px;
    }
    .messages_box {
        height: 75.5vh;
    }
    .fc-daygrid-body {
        width: 100%;
    }
    .res_m {
        margin: 0px;
    }
    .md_wAuto {
        width: auto;
    }
    .Alert_Draft_btn {
        margin-top: 15px;
    }
    .task_card_hight {
        height: auto;
        max-height: 500px;
    }
    .res_1280_col {
        flex-direction: row;
    }
    .img_sec {
        width: 200px;
        height: 200px;
    }
    #BA-chart-job-error {
        width: 121% !important;
    }
    .inpu_widthH {
        right: 133px;
    }
    .hSI_mD {
        width: 75%;
    }
    .vendor-text input {
        width: 82%;
    }
    .res_flex_E576 {
        flex-direction: row !important;
    }
    .add_imagebtn {
        margin-bottom: 0px !important;
    }
    .gallery_res_flex_E576 {
        flex-direction: column !important;
    }
    .imageS_img_sec {
        width: 100%;
        height: 279px;
    }
    .add_Gpriview {
        height: 412px;
    }
    /* *********************** login page *********************** */
    .with-email::after {
        width: 30%;
    }
    .with-email::before {
        width: 30%;
    }
    .with-emailL::after {
        width: 39%;
    }
    .with-emailL::before {
        width: 39%;
    }
    /* ******************** gallery page ***************** */
    .galary_images_box {
        height: 154px;
    }
    .add_GpriviewPortrat {
        height: 144px;
    }
    /* create amenities ************************************ */
    .amenitiesPre {
        height: 165px;
    }
    .sm_WM {
        width: auto;
    }
    .add_deli_img_H {
        height: 131px;
    }
    .suit-input-inner {
        margin-bottom: 10px;
    }
    .ct-suit-input-inner {
        width: -webkit-fill-available !important;
    }
    .suit-input-outer input.ct-w-100 {
        width: 100%;
    }
    .ct-submit {
        position: unset;
        margin-top: 5px !important;
    }
    .input-margin-bottom {
        margin-bottom: 5px;
    }
    .showOption {
        flex-direction: row !important;
        justify-content: space-between;
    }
    /* ************************ edit security team page ************************* */
    .circle {
        width: 18vw;
        height: 18vw;
        right: calc(50% - 8vw) !important;
        top: 13% !important;
    }
    .edit-security-container form {
        margin-top: 225px !important;
        padding: 10px !important;
    }
    .breadcrumb > li:nth-child(2) {
        display: block;
    }
    .right-sidebar > div {
        padding: 18px 0px 0px 15px;
    }
    .suit-input-outer .width-mb96 {
        width: 96%;
    }
    .suit-input-outer .width-mb100 {
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* home content width */
    .home-section .home-content {
        padding: 0px 5px 0px 0px;
    }
    .ml-150 {
        margin: 0;
    }
    .text-center.active {
        text-align: left !important;
    }
    .users-list {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .navBg {
        border-bottom: 1px solid #74869f;
        padding-left: 10px;
        padding-right: 10px;
    }
    .mod-items ul li {
        margin: 10px 24px;
        width: 100%;
    }
    .inner-content {
        display: initial;
    }
    .buildingmain {
        display: initial;
    }
    .building-name {
        border: none;
        padding: 0;
    }
    .front-st-toront {
        padding: 15px 0;
    }
    /* Ragister Visitor Vehicle page */
    .hSI {
        width: 329px;
    }
    .content {
        width: 347px;
    }
    .rV_labal {
        width: 180px;
        padding-left: 0px;
    }
    .rv_form {
        width: 100%;
    }
    .rV_labal_C {
        width: 36%;
    }
    .add_pass_btn {
        width: 147px;
    }
    .suit-input-inner {
        width: 50%;
    }
    .suit-input-inner_message {
        width: 88%;
    }
    .visitor-card > h6 {
        font-size: 13px;
    }
    .messages_box {
        height: 73.5vh;
    }
    .fc-daygrid-body {
        width: 100% !important;
    }
    .md_wAuto {
        width: auto;
    }
    .inpu_widthH {
        right: 97px;
    }
    .imageS_img_sec {
        height: 254px;
    }
    /* ******************** gallery page **************** */
    .galary_images_box {
        height: 142px;
    }
    .add_GpriviewPortrat {
        height: 130px;
    }
    .suit-input-outer input.ct-w-100 {
        width: 100%;
    }
    .vendor-text input {
        width: 76%;
    }
    .ct-add_pass_btn {
        width: 100%;
        margin-top: 10px;
    }
    /* ************************ edit security team page ************************* */
    .circle {
        width: 18vw;
        height: 18vw;
        right: calc(50% - 8vw);
        top: 13%;
    }
    .edit-security-container form {
        margin-top: 225px;
        padding: 10px;
    }
    .breadcrumb > li:nth-child(2) {
        display: none;
    }
    .right-sidebar {
        top: 60px;
        max-height: calc(100vh - 60px);
    }
}

@media only screen and (width: 768px) {
    .ct-add_pass_btn {
        width: 147px;
    }
}

@media (max-width: 700px) {
    nav .sidebar-button .dashboard {
        display: none;
    }
    .deactivatePass {
        width: 100% !important;
    }
    .res_col_rev_header {
        flex-direction: column;
    }
    .right-side {
        margin-top: 10px;
    }
    .right-sidebar {
        top: 90px;
        max-height: calc(100vh - 90px);
    }
    .messages_box {
        height: 68.5vh;
    }
    .ct2-col-12 {
        width: 100%;
    }
}

@media only screen and (max-width: 576px) {
    .home-section .home-content {
        padding: 0px;
    }
    .res_col_rev_header {
        flex-direction: column;
    }
    .right-side {
        column-gap: 0px;
        width: 100%;
        margin-top: 15px;
    }
    .header-section {
        width: 100%;
    }
    nav .search-box input {
        width: 100%;
    }
    .navbar_content {
        column-gap: 5px;
        padding: 0px;
        display: flex;
    }
    .send {
        display: block;
        position: static;
    }
    .home-section {
        width: calc(100% - 87px);
    }
    .collapsed {
        margin-right: -285px;
        transition: 0.5s all;
    }
    /* left side bar */
    .home-section {
        width: 100%;
    }
    .sidebar {
        top: 102px;
        width: 220px;
        left: -220px;
        max-height: calc(100vh - 102px);
    }
    .right-sidebar {
        top: 95px;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }
    .logo-details {
        padding-left: 0px;
    }
    .widthbar {
        width: 220px !important;
        z-index: 100;
        left: 0;
        transition: 0.5s all;
    }
    .sidebar.active {
        width: 60px;
    }
    .home-section {
        width: 100%;
        left: 0;
    }
    .sidebar.active ~ .home-section {
        left: 60px;
        width: calc(100% - 60px);
    }
    .home-section nav {
        width: 100%;
        left: 0;
    }
    .sidebar.active ~ .home-section nav {
        left: 60px;
        width: calc(100% - 60px);
    }
    /* Visitor Parking Dashboard */
    .suite-wrapper {
        margin-left: 10px;
    }
    .pagination a {
        padding: 8px 13px;
    }
    #calendar th {
        padding: 3px;
    }
    .home-section .home-content {
        padding-left: 0px;
    }
    /* .progress {
        width: 115px;
    } */
    .res_col_rev_576 {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .res_pL {
        padding-left: 6px;
    }
    /* ragister visitor page */

    .fNoCard > .form_group {
        display: flex;
        flex-direction: column;
    }
    .fNoCard > .form_group > .rV_labal {
        width: 100%;
    }
    .fNoCard > .form_group > .hSI {
        width: 100%;
        margin-left: 0px;
    }
    .fNoCard > .form_group_t {
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items: center;
    }
    .form_group_t > .content {
        margin-left: 0px;
        width: 126px;
    }
    .fNoCard > .parking_pass_active .form_group {
        display: flex;
        flex-direction: column;
    }
    .fNoCard > .parking_pass_active .form_group > .rV_labal {
        width: 100%;
    }
    .fNoCard > .parking_pass_active .form_group > .hSI {
        width: 100%;
        margin-left: 0px;
    }
    .form_group_t > .content {
        margin-left: 0px;
        width: 250px;
    }
    .rV_labal {
        width: 100%;
        padding-left: 0%;
    }
    .add_pass {
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
    }
    .add_pass_btn {
        margin-left: 0px !important;
        margin-top: 20px;
        padding: 10px 15px;
        width: 100%;
    }
    .bookingBTN {
        padding-left: 10px;
        padding-right: 10px;
    }
    .set_h {
        text-align: left !important;
    }
    .res_flexD {
        flex-direction: column-reverse;
    }
    /* Ragister Visitor Vehicle page */
    .hSI {
        width: 100%;
        margin-bottom: 10px;
        height: 40px;
        margin-left: 0px;
    }
    .CAhSI {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .CAmy {
        margin-top: 10px;
    }
    .rv_form {
        width: 100%;
    }
    .res_50576 {
        width: 45%;
        text-align: left;
    }
    .form_group {
        text-align: left;
        margin-bottom: 0px;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
    }
    .form_group_t {
        flex-direction: row;
    }
    .form_group_C {
        flex-direction: row;
    }
    .hSI_C {
        width: 250px;
    }
    .res_5m,
    .suite-overview-inner h4 {
        padding-left: 0px !important;
    }
    .res_5m {
        margin-bottom: 0px !important;
    }
    .content {
        margin-left: 0px;
    }
    .add_pass_btn_sec {
        margin-top: 0px;
    }
    /* CALANDER */
    #calendar {
        width: 100%;
    }
    .res_576_lA {
        justify-content: left;
    }
    /* table search toggle */
    .week-tabs .button23 {
        margin-bottom: 0px;
    }
    .page-button {
        flex-direction: column-reverse;
    }
    .week-tabs .button23 {
        font-size: 12px;
        margin-right: 6px;
        margin-top: 10px;
    }
    .vpsw-form input {
        padding: 8px 12px;
    }
    .Wmt_0 {
        margin-top: 0px;
    }
    .below-section1 {
        margin-top: 0px;
    }
    .vpdash {
        margin-top: 0px;
    }
    .mt1440 {
        margin-top: 0px;
    }
    .table_wC {
        width: 85px;
    }
    .set_h {
        height: 28px;
    }
    .vmo-card-section,
    .vmo-card-section-2,
    .vpsw {
        padding: 0px;
    }
    .hSI_B {
        margin-top: 0px !important;
    }
    .suit-input-inner {
        width: 50%;
    }
    .suit-input-inner_message {
        width: 83%;
    }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: left !important;
    }
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper {
        text-align: left !important;
    }
    .VPrestrict_pagi {
        justify-content: center !important;
        margin-top: 15px;
    }
    .parking_tHeight {
        height: 330px;
    }
    .thermostate-smart-image {
        width: 100%;
        margin: 20px 0px;
    }
    .res_col_576 {
        flex-direction: column;
        align-items: start !important;
    }
    .FW_576 {
        width: 100%;
    }
    .re_576 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
    }
    .bookingBTN {
        margin-top: 0px;
        margin-right: 0.5%;
        margin-left: 0.5%;
        width: 48% !important;
    }
    .cal_btnV {
        width: 100% !important;
    }
    .re576M {
        margin-bottom: 0px;
    }
    .re576MB {
        margin-bottom: 10px;
    }
    .messenger {
        right: 2.9%;
        width: 94.4%;
    }
    .messages_box {
        height: 70vh;
    }
    .fc-daygrid-body {
        width: 100% !important;
    }
    .btn-group,
    .btn-group-vertical {
        display: block;
    }
    .fc-header-toolbar {
        flex-direction: column-reverse !important;
        align-items: normal !important;
    }
    .fc-direction-ltr .fc-toolbar > * > :not(:first-child) {
        margin-left: calc(50% - 65px);
    }
    .fc-toolbar-title {
        padding: 10px 0px;
    }
    .Rdash_bar_p0 {
        padding: 0px !important;
        padding-top: 15px !important;
    }
    .cal_btnV {
        padding: 10px 10px;
    }
    .CAbtnALT {
        width: 100% !important;
    }
    .res_m576 {
        margin-top: 20px;
    }
    .CAlabel {
        padding-bottom: 0px;
        padding-top: 5px;
        font-size: 13px;
    }
    .CAresWidth {
        width: 100%;
    }
    .fNoCard > .form_group > .rV_labal {
        padding-bottom: 0px;
    }
    .vpsw-form .wizard_input {
        padding: 8px 10px;
    }
    .alert_form_group {
        align-items: start;
        margin-top: 5px;
        flex-direction: column;
    }
    .alert_form_group_checkBox {
        flex-direction: row;
    }
    .alert_form_group_checkBox > label {
        width: auto;
    }
    .CAresWidth {
        width: auto;
    }
    .formG_alertC {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 5px;
    }
    .CAmy {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .mt1280_0 {
        margin-top: 20px;
    }
    .inter_bold_font {
        font-size: 13px;
    }
    .alert_form_groupCUpad {
        flex-direction: column;
        align-items: flex-start;
    }
    .img_sec {
        width: 150px;
        height: 150px;
    }
    #BA-chart-job-error {
        width: 100% !important;
        left: 0px;
    }
    .maintenance_card_img,
    .mainte_card_img {
        height: 200px;
    }
    .inpu_widthH {
        right: 0px;
        top: 7px;
        width: 108px;
        justify-content: center;
    }
    .hSI_mD {
        width: 100%;
        margin: 0px;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    .vendor-text input {
        width: 100%;
    }
    .P_bothS {
        padding: 0px 15px;
    }
    .notes {
        margin-top: 7px;
    }
    .CAmy_mainte {
        margin-top: 5px;
    }
    .res_flex_E576 {
        flex-direction: column !important;
        align-items: unset !important;
    }
    .add_Gpriview {
        height: 220px;
    }
    .imageS_img_sec {
        width: 100%;
        height: 195px;
    }
    .add_Gpriview .galary_images {
        height: auto;
    }
    .galary_images {
        height: 200px;
    }
    /* ******************* login Page ******************** */
    .with-email::after {
        width: 22%;
    }
    .with-email::before {
        width: 22%;
    }
    .with-emailL::after {
        width: 33%;
    }
    .with-emailL::before {
        width: 33%;
    }
    .res_loginW {
        padding: 15px !important;
        width: 100% !important;
    }
    .logo_nameL {
        width: 90%;
    }
    /* ***************** gallery page ************** */
    .galary_images_box {
        height: 234px;
    }
    .add_GpriviewPortrat {
        height: 137px;
        margin-top: 15px;
    }
    .res_576_mb_3 {
        margin-bottom: 20px;
    }
    .gallery_res_mt {
        margin-top: 20px;
    }
    /* ******************* create amenities ************************ */
    .amenitiesPre {
        width: 100%;
        margin-top: 15px !important;
        margin-bottom: 10px !important;
    }
    .amenities-file-error {
        width: 100%;
    }
    .mt_res {
        margin-top: 0px;
    }
    .CAmenitiesB {
        margin-top: 10px;
    }
    .sm_WM {
        margin: 0px;
        width: auto;
        margin-bottom: 15px;
    }
    .amenitiesPre {
        height: 188px;
    }
    .add_deli_img_H {
        height: 102px;
    }
    .ct-suit-input-inner {
        width: -webkit-fill-available;
    }
    /* ******************* edit security team page ************************ */
    .circle {
        width: 28vw !important;
        height: 28vw !important;
        right: calc(50vw - 16vw) !important;
        top: 10% !important;
    }
    .edit-security-container form {
        margin-top: 175px !important;
    }
    .breadcrumb > li:nth-child(2) {
        display: none;
    }
}

@media only screen and (max-width: 320px) {
    .ui-datepicker-calendar td {
        padding: 0px 0px;
    }
    .progress {
        width: 90%;
    }
    .register-link a {
        font-size: 14px;
    }
    .datePike
        .ui-datepicker-calendar
        tr:first-child
        td:nth-child(1)
        .ui-state-default {
        padding: 5px 13px;
    }
    .datePike
        .ui-datepicker-calendar
        tr:first-child
        td:nth-child(2)
        .ui-state-default {
        padding: 6px 12px;
    }
    .datePike
        .ui-datepicker-calendar
        tr:first-child
        td:nth-child(7)
        .ui-state-default {
        padding: 6px 12px;
    }
    .datePike .ui-datepicker-calendar td .ui-state-active {
        width: 30px;
        height: 30px;
    }
    .pagination a {
        padding: 8px 12px;
    }
    .form_group_C {
        flex-direction: column;
    }
    .hSI_C {
        width: 100%;
        margin-left: 0px;
        margin-top: 5px;
    }
    .rV_labal_C {
        width: 100%;
    }
    .week-tabs .button23 {
        margin-right: 5px;
    }
    .vpsw-form input {
        padding: 8px 3px;
    }
    .breadcrumb {
        font-size: 11px;
    }
    .form_group_t > .content {
        width: 243px;
    }
    .bookingBTN {
        padding-left: 5px;
        padding-right: 5px;
    }
    .messages_box {
        height: 70vh;
    }
    .messenger {
        right: 4%;
        width: 92%;
    }
    .suit-input-inner_message {
        width: 80%;
    }
    .vpsw-form .wizard_input {
        padding: 8px 4px;
    }
    .inpu_widthH {
        left: 22px;
        width: 101px;
    }
    .inpu_widthHLL {
        margin-left: -5px !important;
    }
    .imageS_img_sec {
        height: 148px;
    }
    .galary_images {
        height: 150px;
    }
    .add_Gpriview {
        height: 170px;
    }
    /* *************** login page ***************** */
    .with-email::after {
        width: 15%;
    }
    .with-email::before {
        width: 15%;
    }
    .with-emailL::after {
        width: 30%;
    }
    .with-emailL::before {
        width: 30%;
    }
    .logo_nameL {
        width: 100%;
    }

    /* ************************** gallery page *****************  */
    .galary_images_box {
        height: 184px;
    }
    .add_GpriviewPortrat {
        height: 106px;
    }
    .dragbox-occur .dragBox {
        font-size: 12px;
    }
}
/****************security page **********************/

@media only screen and (min-width: 360px) and (max-width: 400px) {
    .responsive {
        margin-left: 165px;
        margin-right: 7px;
    }
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .shift-right1 {
        margin-left: 90px !important;
    }
    .indent-text {
        margin-left: 20px !important;
    }
    .b-indent-text {
        margin-left: 60px !important;
    }
    .grey-button-container {
        margin-left: 120px !important;
    }
    .grey-button {
        margin-bottom: 10px !important;
    }
    .grey-note-box {
        margin-left: 20px !important;
        width: 325px !important;
    }
    .details {
        width: 240px !important;
        margin-left: 20px !important;
    }
    .add-note {
        margin-left: 20px !important;
    }
    .security-form-text {
        display: block;
        width: auto;
        margin-left: 20px !important;
    }
    .security-form-input:not(.time-input-box) {
        display: inline-block;
        margin-left: 20px !important;
        margin-bottom: 10px;
    }
    .time-input-box {
        display: inline-block;
        width: fit-content !important;
        margin-left: 20px !important;
        margin-right: 5px !important;
    }
    .b-indent-input {
        margin-left: 110px !important;
        display: inline-block;
        margin-right: 0px !important;
        width: 175px !important;
    }
    .indent-input {
        margin-top: 10px;
        margin-left: 20px !important;
        margin-right: 0px !important;
        width: 90px;
    }
    .details-header {
        margin-left: 100px !important;
    }
    .phoneview1 {
        margin-top: 7px !important;
        font-size: 12px !important;
        position: relative !important;
        left: 0px !important;
    }
    .phoneview2 {
        font-size: 10px !important;
        position: relative !important;
        left: 15px !important;
    }
    .phoneview3 {
        margin-top: 7px !important;
        font-size: 12px !important;
        position: relative !important;
        left: 35px !important;
    }
    .phoneview4 {
        margin-right: 40px !important;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 767px) {
    .security-form-input {
        width: 175px;
        margin: 10px;
        padding-left: 5px;
    }
    .shift-right1 {
        margin-left: 90px !important;
    }
    .indent-text {
        margin-left: 20px !important;
    }
    .b-indent-text {
        margin-left: 60px !important;
    }
    .indent-input {
        margin-left: 20px !important;
        width: 120px;
    }
    .b-indent-input {
        width: 200px !important;
    }
    .grey-button-container {
        margin-left: 150px !important;
    }
    .grey-button {
        margin-bottom: 10px !important;
    }
    .grey-note-box {
        margin-left: 20px !important;
        width: 400px !important;
    }
    .details {
        width: 300px !important;
        margin-left: 20px !important;
    }
    .add-note {
        margin-left: 20px !important;
    }
    .phoneview3 {
        margin-left: 25px !important;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 767px) and (max-width: 1100px) {
    .security-form-input {
        width: 225px; /* Adjust width for medium devices */
    }
    .shift-right1 {
        margin-left: 110px !important; /* Adjust margin-left for medium devices */
    }
    .indent-text {
        margin-left: 25px !important; /* Adjust margin-left for medium devices */
    }
    .indent-input {
        margin-left: 25px !important; /* Adjust margin-left for medium devices */
        width: 140px; /* Adjust width for medium devices */
    }
    .b-indent-input {
        width: 250px !important; /* Adjust width for medium devices */
    }
    .grey-button-container {
        margin-left: 11vw !important; /* Adjust margin-left for medium devices */
    }
    .grey-note-box {
        margin-left: 20px !important; /* Adjust margin-left for medium devices */
        width: 500px !important; /* Adjust width for medium devices */
    }
    .details {
        width: 380px !important; /* Adjust width for medium devices */
        margin-left: 25px !important; /* Adjust margin-left for medium devices */
    }
    .add-note {
        margin-left: 25px !important; /* Adjust margin-left for medium devices */
    }
    /* **************** add occurrence/reports page **************** */
    .security-form-text {
        display: block;
        width: auto;
        margin-left: 20px !important;
    }
    .security-form-input:not(.time-input-box) {
        display: inline-block;
        margin-left: 20px !important;
        /* margin-right: 20px !important; */
        margin-bottom: 10px; /* Add spacing between input elements */
    }
    .time-input-box {
        display: inline-block;
        width: fit-content !important; /* Set width to auto */
        margin-left: 20px !important;
        margin-right: 5px !important;
    }
    .b-indent-input {
        margin-left: 110px !important;
        display: inline-block;
        margin-right: 0px !important;
        width: 300px !important;
    }
    .indent-input {
        margin-top: 10px;
        margin-left: 20px !important;
        margin-right: 0px !important;
        width: 90px;
    }
    .details-header {
        margin-left: 70px !important;
    }
    .phoneview3 {
        margin-left: 15px !important;
    }
}

/* Larger devices (laptops/desktops, 1100px to 1500px) */
@media only screen and (min-width: 1101px) and (max-width: 1499px) {
    .security-form-input {
        width: 250px; /* Adjust width for larger devices */
        margin: 25px; /* Adjust margin for larger devices */
    }
    .shift-right1 {
        margin-left: 150px !important; /* Adjust margin-left for larger devices */
    }
    .indent-text {
        margin-left: 35px !important; /* Adjust margin-left for larger devices */
    }
    .b-indent-text {
        margin-left: 90px !important; /* Adjust margin-left for larger devices */
    }
    .indent-input {
        margin-left: 35px !important; /* Adjust margin-left for larger devices */
        width: 180px; /* Adjust width for larger devices */
    }
    .b-indent-input {
        width: 350px !important; /* Adjust width for larger devices */
    }
    .grey-note-box {
        margin-left: 20px !important; /* Adjust margin-left for larger devices */
        width: 600px !important; /* Adjust width for larger devices */
    }
    .details {
        width: 520px !important; /* Adjust width for larger devices */
        margin-left: 35px !important; /* Adjust margin-left for larger devices */
    }
    .add-note {
        margin-left: 35px !important; /* Adjust margin-left for larger devices */
    }
}

@media only screen and (max-width: 767px) {
    .ui.selection.dropdown .menu {
        max-height: 16.02857142rem; /* Double size */
    }
}
@media only screen and (min-width: 768px) {
    .ui.selection.dropdown .menu {
        max-height: 12.0214285763rem;
    }
}
@media only screen and (min-width: 992px) {
    .ui.selection.dropdown .menu {
        max-height: 16.02857143rem; /* + 1.3357142858 to 17.3642857158rem */
    }
}
@media only screen and (min-width: 1920px) {
    .ui.selection.dropdown .menu {
        max-height: 21.37142857rem;
    }
}