html {
    font-size: 14px;
}

@media (min-width: 1000px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

    body::after {
        content: "";
        background: url("/images/background.png");
        opacity: 0.1;
        background-size: cover;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;
    }

.label-right {
    text-align: right;
    direction: rtl;
    width: 115%;
}

.object-center {
    text-align: right;
    margin: 0px auto;
    max-width: 90%;
}

.body_container {
    direction: rtl;
    text-align: right;
    width: revert;
    float: right;
    border: dashed;
    border-color: aqua;
    margin-bottom: 100px;
    border-radius: 25px;
    border: 1px solid silver;
    padding-right: 0%;
    padding-top: 1%;
    margin-left: 1%;
    min-width: 20%;
    transition: width 1s;
    flex: 1;
    overflow: hidden;
}

.jstree_container_main_layout {
    direction: rtl;
    text-align: right;
    float: right;
    margin-bottom: 100px;
    border-radius: 25px;
    border: 1px solid silver;
    padding-right: 1%;
    padding-top: 1%;
    margin-left: 2%;
    transition: width 1s;
    width: 370px;
    overflow: hidden;
}

.jstree_container_main_layout_max_width {
    width: 100%;
}

.jstree_container_main_layout_fold {
    color: transparent;
    width: 65px;
}

.main_container {
    width: 90%;
    direction: rtl;
    clear: both;
    margin: 0px auto;
    height: auto;
    margin-top: 40px;
    display: flex;
}

.rounded_border {
    border-color: aqua;
    border-radius: 20px;
    border: 1px solid silver;
    margin: 1%;
    margin-top: 2%;
    padding: 1%;
    padding-top: 2%;
}

.main_font {
    font-family: IRANSansLight, Tahoma;
    color: #424c55;
}

@font-face {
    font-family: 'IRANSans2';
    src: url('../font/IRANSans.ttf') format('truetype'), url('../font/IRANSans.woff') format('woff'), url('../font/IRANSans.woff2') format('woff2');
}

@font-face {
    font-family: 'IRANSansLight';
    src: url('../font/IRANSansLight.ttf') format('truetype'), url('../font/IRANSansLight.woff') format('woff'), url('../font/IRANSansLight.woff2') format('woff2');
}

.bottom {
    bottom: 0;
}

#cy {
    height: 100%;
    width: 100%;
}

#eat {
    left: 1em;
    top: 1em;
    font-size: 1em;
    z-index: -1;
    color: #000000;
}

.wrapper {
    height: 700px;
    float: right;
    width: 200px;
    flex: 1;
}

.system_description {
    text-align: justify;
    float: right;
    width: 35%;
    margin-right: 2%;
}

.main_index_container {
    clear: both;
    height: auto;
    display: flex;
}

.points_container {
    clear: both;
}

.point_view {
    width: 23%;
    min-width: 200px;
    height: 20%;
    min-height: 130px;
    text-align: center;
    text-decoration: blink;
    margin: 10px;
    border-color: aqua;
    border-radius: 20px;
    border: 1px solid gray;
    background-color: lightblue;
    color: black;
    overflow: hidden;
    box-shadow: -10px 10px 10px silver;
}

div.point_view #building_name {
    font-size: large;
    font-weight: bold;
    background-color: darkblue;
    color: white;
    height: 30px;
}

div.point_view #point_name {
    font-size: medium;
    font-weight: bold;
    padding-top: 3px;
    padding-bottom: 3px;
    color: #ac0226;
}

div.point_view #point_value {
    font-size: 36pt;
    font-weight: bold;
    direction: ltr;
    color: darkgreen;
    border-top: dotted;
    border-top-width: 1px;
}

div.point_view #point_updated_at {
    font-size: small;
    direction: ltr;
    border-top: dotted;
    border-top-width: 1px;
}

.event_view {
    width: 90%;
    min-width: 200px;
    height: 20%;
    min-height: 130px;
    text-align: center;
    text-decoration: blink;
    margin: 10px;
    border-color: aqua;
    border-radius: 20px;
    border: 1px solid gray;
    background-color: lightblue;
    color: black;
    overflow: hidden;
    box-shadow: -10px 10px 10px silver;
    margin: 0px auto;
    margin-top: 30px;
}

div.event_view #building_name {
    font-size: large;
    font-weight: bold;
    color: white;
    height: 30px;
}

div.event_view #event_name {
    font-size: medium;
    font-weight: bold;
    padding-top: 3px;
    padding-bottom: 3px;
    color: black;
}

div.event_view #unit_or_device_name {
    font-size: medium;
    font-weight: bold;
    padding-top: 3px;
    padding-bottom: 3px;
    color: white;
}

div.event_view #event_description {
    font-size: 13pt;
    font-weight: normal;
    direction: rtl;
    text-align: center;
    color: black;
    border-top: dotted;
    border-top-width: 1px;
    padding-top: 10px;
}

div.event_view #event_level {
    font-size: small;
    direction: ltr;
    border-top: dotted;
    border-top-width: 1px;
    margin-top: 10px;
    font-weight: bold;
}

div.event_view #event_updated_at {
    font-size: small;
    direction: ltr;
    border-top-width: 1px;
}

div.event_view #event_actions {
    font-size: small;
    border-top: dotted;
    border-top-width: 1px;
    margin-top: 10px;
    font-weight: bold;
    padding-top: 5px;
}

div.event_view #event_actions_list {
    text-align: center;
    width: max-content;
    margin: 0px auto;
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: normal;
}

.event_actions_list {
    text-align: right;
    width: max-content;
    font-weight: normal;
    font-size: small;
}

.add_action_to_event {
    text-decoration: none;
}

.header_event_level_0 {
    background-color: darkblue;
}

.header_event_level_1 {
    background-color: darkblue;
}

.header_event_level_2 {
    background-color: #3e3d00;
}

.header_event_level_3 {
    background-color: #cf4600;
}

.header_event_level_4 {
    background-color: darkred;
}

.desc_event_level_1 {
    background-color: lightblue;
}

.desc_event_level_2 {
    background-color: #fff68f;
}

.desc_event_level_3 {
    background-color: #f8a657;
}

.desc_event_level_4 {
    background-color: #ff6a66;
}


@media screen and (max-width: 800px) {
}

.logo {
    width: 200px;
    height: 40px;
}

@media only screen and (max-width: 800px) {
    #monitor_table td:nth-child(1),
    #monitor_table th:nth-child(1) {
        display: none;
    }

    .logo {
        width: 80px;
        height: 15px;
    }

    html {
        font-size: 13px;
    }
}

@media only screen and (max-width: 630px) {
    .logo {
        display: none;
    }
}

.main_menu {
    direction: rtl;
    width: max-content;
    min-width: fit-content;
    float: left;
    width: 100%;
}

.nav_bar {
    text-align: right;
    direction: rtl;
    min-width: 0;
    margin-right: 0px;
    margin-left: 60px;
    width: 100%;
    min-width: 80px;
}

.main_menu_nav_bar {
    float: left;
    text-align: right;
    direction: rtl;
    width: 100%;
    padding-right: 0px;
}

.open-and-fold-icon {
    float: right;
    clear: both;
}

    .open-and-fold-icon img {
        width: 60px;
        height: 60px;
        float: right;
    }

.icon {
    width: 30px;
    height: 30px;
}

@media only screen and (max-width: 700px) {
    .wrapper {
        display: none;
    }

    .system_description {
        width: 100%;
    }
}


@media only screen and (max-width: 320px) {
    .jstree_container_main_layout {
        display: none;
    }
}

@media only screen and (max-width: 900px) {

    #last_actions td:nth-child(1),
    #last_actions th:nth-child(1) {
        display: none;
    }

    #last_actions td:nth-child(3),
    #last_actions th:nth-child(3) {
        display: none;
    }

    #last_actions td:nth-child(4),
    #last_actions th:nth-child(4) {
        display: none;
    }

    #history_view_table td:nth-child(1),
    #history_view_table th:nth-child(1) {
        display: none;
    }

    #history_view_table td:nth-child(3),
    #history_view_table th:nth-child(3) {
        display: none;
    }

    #history_view_table td:nth-child(4),
    #history_view_table th:nth-child(4) {
        display: none;
    }
}

.action_description {
    text-align: justify;
    white-space: pre-wrap;
}


.diagram-container {
    width: 99%;
    align-items: stretch;
    margin: 0px auto;
    background-color: white;
    border-color: aqua;
    border-radius: 20px;
    border: 1px solid silver;
    margin-top: 2%;
    padding-top: 1%;
    padding-right: 0px;
    padding-left: 0px;
    box-shadow: -5px 5px 7px silver;
}

.chart-container {
    height: 300px;
    float: left;
    min-width: 250px;
    min-height: 200px;
    border-right: dotted silver 1px;
    padding-top:2%;
}

.chart-style {
    width: 100%;
    height: 100%;
    direction: ltr;
}

.gauge-container {
    width: auto;
    padding: 0px;
    margin: 0px auto;
    flex: 0 0 auto;
}


.gauge-style {
    min-width: 250px;
    min-height: 250px;
    width: min-content;
    overflow:visible;
    direction: ltr;
    margin:0px auto;
}

.chart-description-container {
    margin: 0px auto;
    text-align: center;
}

.chart-description-container .building-name {
    margin-top: 5px;
    border-bottom: dotted silver 1px;
    padding-bottom: 5px;
}

.chart-description-container .point-name {

    font-size:larger;
}

.diagram-container .last-update {
    margin: 0px auto;
    text-align: center;
    font-size: small;
    direction: ltr;
    border-top: dotted silver 1px;
}

.gauge-container .title {
    width: 100%;
    margin: 0px auto;
    clear: both;
    text-align: center;
    font-weight: normal;
    margin-top: 10px;
    font-size:larger;
}

.cheklist-design-item {
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: dotted gray 1px;
    margin-bottom: 25px;
}
.checklist-form-pre-info {
    border-bottom: dotted black 1px;
}
.checklist-items
{
    margin-top: 20px;
}
.checklist-item {
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: dotted silver 1px;
    background-color: white;
}
.checklist-question-item {
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: dotted silver 1px;
}
#chooseBuilding label {
    display: none;
}
.checklist-answer-box {
    clear: both;
}

.checklist-question {
    color: darkblue;
    margin-bottom: 10px;
    font-size: larger;
}

.checklist-icon
{
    width: 70px;
    height: 50px;
}

.mychecklist-header {
    margin-bottom: 30px;
}

.mychecklist-title {
    margin-top:10px;
}

.card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e3e6f0;
    font-weight: bold;
    text-align: center;
}

.card-title {
    color: #333;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.card-subtitle {
    color: #6c757d;
    margin-bottom: 1rem;
}

.card-text p {
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.card-text p strong {
    color: #495057;
}

.card-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #e3e6f0;
}

.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.form-control {
    border-radius: 0.25rem;
    border: 1px solid #ced4da;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
}

.form-control:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.text-danger {
    color: #dc3545;
}

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
.action-description {
    border-top: 1px solid #dee2e6; /* A light top border for separation */
    padding-top: 1rem; /* Space above for visual separation */
}

.description-background {
    background-color: #f8f9fa; /* A light background color for distinction */
    padding: 0.5rem; /* Padding for some space inside the background */
    border-radius: 5px; /* Optional: rounded corners for aesthetic */
    color: #212529; /* Optional: Change text color if needed */
    line-height: 1.6; /* Improved line height for readability */
    margin-top: 0.5rem; /* Space between the title and the description content */
}


#chooseBuilding #buildingSelectedItems {
    display: none;
}


.jstree-icon.jstree-custom-icon {
    width: 2px; /* Set the desired width */
    height: 2px; /* Set the desired height */
    background-size: 24px 24px; /* Ensure the background size matches the dimensions */
    background-image: url('/images/bld.png'); /* Path to your custom icon */
    background-repeat: no-repeat;
    display: inline-block;
}


/*
#buildingSelectedItems {
    display: none;
}
#facilitySelectedItems {
    display: none;
}
#deviceSelectedItems {
    display: none;
}
.form-floating label
{
    display :none;
}*/