html {
  font-size: 14px;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

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

body {
    margin: 0;
    padding: 0;
    min-width: 400px;
    min-height: 650px;
    font-family: Arial, sans-serif;
}



.skyit-container-fluid {
    /* background-color: #2b3e50; */
    background-color: #1f3e58;
}

.skyit-container {
    height: auto;
}

.skyit-sidebar {
    background-color: #1f3e58;
    width: 220px;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    transition: transform 0.3s ease-in-out;
    z-index:5000;
}

    .skyit-sidebar a {
        padding: 15px 20px;
        text-decoration: none;
        color: #fff;
        display: flex;
        align-items: center;
        font-size: 16px;
    }

        .skyit-sidebar a:hover {
            background-color: #3b4f65;
        }

    .skyit-sidebar i {
        margin-right: 10px;
    }

.skyit-active {
    background-color:#4a92bb;
    transition-property:revert-layer
}

.skyit-main-content {
    flex-grow: 1;
    padding: 20px;
    margin-left: 220px;
    width: auto;
    border-radius: 30px;
    background-color: #f5f5f5;
    margin-top: 10px;
    margin-right:10px;
    min-height:500px;
}

.skyit-topbar {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom:30px;
}

.skyit-shadow {
    background-color: #fff;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding:10px;
}

.skyit-topbar input {
    width: 300px;
    padding: 8px;
    margin: auto 5px auto 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.skyit-user-menu {
    display: flex;
    align-items: center;
}

    .skyit-user-menu img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: 10px;
    }

.skyit-hamburger {
    display: none;
    font-size: 30px;
    cursor: pointer;
    color: #2b3e50;
}

.skyit-close-btn {
    display: none;
    font-size: 30px;
    border: #fff;
    padding: 10px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
}

.skyit-footer {
    margin:20px auto 40px auto;
    padding: 10px;
    text-align: center;
    color: #ccc;
}
 .skyit-footer a {
        padding: 10px;
        color: #ccc;
        text-decoration: none;
    }

.skyit-profile {
    position: absolute;
    bottom: 60px;
    left: 70px;
}

.skyit-profile-div {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    overflow:hidden;
    border: 1px;
}
.skyit-profile-img {
    width: 70px;
    transform: scale(1.1);
    transition: transform 0.3s ease;
}
    .skyit-profile-img:hover {
        transform: scale(1.3);
    }


    #toggleImage {
    cursor: pointer; /* Change cursor to pointer when hovering over the image */
}

#toggleDiv {
    display: none; /* Initially hidden */
    border: 1px solid #ccc;
    padding: 20px 10px;
    position: absolute; /* To place it next to the image */
    background-color: #f2f2f2;
    transform: translateY(-100px);
    z-index: 1000; /* Ensures the div appears above other elements */
}

/* Media Query for Small Screens */
@media (max-width: 768px) {
    .skyit-sidebar {
        transform: translateX(-100%);
    }

        .skyit-sidebar.skyit-open {
            transform: translateX(0);
        }

    .skyit-main-content {
        margin-left: 0;
    }

    .skyit-hamburger {
        display: block;
    }

    .skyit-close-btn {
        display: block;
    }
}

/*
.menu-ref {
    background-color: #1f3e58;
    color: #fafafa;
    float: right;
}*/
.menu-ref {
    background-color: #4a92bb;
    color: #fafafa;
    float: right;
}
    .menu-ref:hover {        
       opacity:0.5;
       color:#ffffff;
    }


.SubMenuActive {
    color: #ffffff;
    background-color: #0d6efd;
}



.Good {
    color:#000000;
    background-color: #92d050; 
}

.Bad {
    color: white;
    background-color: red;
}