/* Adjust the body or main wrapper of the admin page if necessary
.wp-admin, .wrap {
    background-color: #121212; /* Dark background for the entire admin pa
    color: #e0e0e0; /* Light text color for the entire admin pa
}*/

/* Continue with the rest of your styles */
#aegis-security .aegis-plugin {
    font-family: 'Arial', sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}



#aegis-security .alert {
    background-color: #00BF87;
    color: #ffffff;
    padding: 10px;
    border-radius: 0px;
}

/* #aegis-security .button {
    background-color: #0056b3;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
} */

input[type="text"] {
    padding: 5px;
    border-radius: 5px;
}

#aegis-security .powered-by {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

#aegis-security .powered-by span {
    font-size: 15px;
}

#aegis-security .logo {
    width: 200px;
    margin-left: 5px;
}

#aegis-security .aegis-card {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 95%;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 20px;
    margin-right: 20;
    /* border-radius: 8px; */
}

#aegis-security .warning-container {
    display: flex; 
    justify-content: space-between;
}

#aegis-security .warning-alert {
    width: 23.5%;
    border-left: 3px solid rgb(215 92 88) !important;
}

#aegis-security .warning-atention {
    width: 23.5%;
    border-left: 3px solid rgb(225 210 79) !important;
}

#aegis-security .warning-info {
    width: 23.5%;
    border-left: 3px solid #00BF87 !important;
}

#aegis-security .warning-container-even {
    display: flex; 
    justify-content: space-evenly;
}

#aegis-security .table-card {
    max-width: 100%;
    border: none;
    box-shadow: 0 1px 10px rgba(0,0,0,.08);
    min-width: 200px;
}

#aegis-security .contact-card {
    max-width: 500px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


#aegis-security .containerc {
    display: flex;
    margin-bottom: 10px; /* Espaciado entre los grupos de label e input */
}


#aegis-security .input-field {
    flex: 2; /* Hace que el contenedor del input ocupe más espacio que el del label */
}


#aegis-security .contact-web{
    padding: 10px;
}

table {
    border-collapse: separate; /* Cambiado de "collapse" a "separate" */
    border-spacing: 0;  
    width: 100%;
}

tr:nth-child(even){background-color: #eee;}

tr:hover {background-color: #ddd;}

th, td {
    border: none;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #00BF87; /* Fondo de color para la primera fila (encabezados) */
    color: white; /* Color de texto para la primera fila */
}

th:first-child {
    background-color: #00BF87; /* Fondo de color para la primera fila (encabezados) */
    color: white; /* Color de texto para la primera fila */
    border-top-left-radius: 0px; /* Esquina superior izquierda redondeada */
}

th:last-child {
    border-top-right-radius: 0px; /* Esquina superior derecha redondeada */
}

#aegis-security .high-priority-section {
    padding-top: 8%;
}

#aegis-security .card th:first-child {
    padding: 8px;
    text-align: left;
    border-bottom: none;
}

#aegis-security .card th:nth-child(3) {
    padding: 8px;
    text-align: left;
    border-bottom: none;
}

#aegis-security .clearfix::after {
    content: "";
    clear: both;
    display: table;
}

#aegis-security .card h1 {
    margin-top: 0;
    color: #333;
    padding: 9px 0 9px;
}

#aegis-security .card h2 {
    margin-top: 0;
    color: #333;
}

#aegis-security .card p {
    color: #666;
}

#aegis-security .card table {
    width: 100%;
    border-collapse: separate;
}

#aegis-security .card th, #aegis-security .card td {
    padding: 8px;
    text-align: left;
    border-bottom: none;
}

#aegis-security .flexible-table {
    width: 100%;
    table-layout: fixed;
}

#aegis-security .flexible-table th,
#aegis-security .flexible-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#aegis-security .card tbody tr:hover {
}

#aegis-security .card .alert {
    margin: 10px 0;
}

#aegis-security .tab-container {
    width: 100%;
    margin: 0;
}

#aegis-security .tabs {
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: flex-start;
}

#aegis-security .tab-link {
    cursor: pointer;
    padding: 10px 20px;
    background-color: #ddd; 
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 10px;
    margin-left: 0px;
    color: black;
}

#aegis-security .tab-link.active {
    background-color: #00BF87;
    color: white;
    margin-right: 10px;
}

#aegis-security .tab-content {
    display: none;
    margin: 0;
}

#aegis-security .tab-content.active {
    display: block;
    margin: 0;
}

#aegis-security .tab-content-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border-color: #ffffff;
    margin: 0;
}

#aegis-security .left-column {
    float: left;
    width: 100%;
    margin-left: 8px;
}

#aegis-security .right-column {
    float: left;
    width: 100%;
    margin-left: 8px;
}

#aegis-security .metric {
    background-color: #00BF87;
    color: #fff;
    padding: 10px;
    margin: 10px 0;
}

#aegis-security .button {
    background-color: #00BF87;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

#aegis-security .button:hover {
    background-color: #00a271;
}

#footer-thankyou {
    display: none;
}

#aegis-security .tab-content-container-vertical {
    border-color: #ffffff;
    margin: 0;
}

#aegis-security .parent-container {
    width: 80%; /* Adjust as needed */
    height: 55vh; /* Adjust as needed */
    margin: auto; /* This will center the parent container horizontally */
    overflow-y: auto; /* This will add a scrollbar if the content overflows */
    clear:both;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    border-top: 2px solid #e0dede;
    border-left: 2px solid #e0dede;
    border-right: 2px solid #e0dede;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

#aegis-security .parent-container2 {
    width: 80%; /* Adjust as needed */
    margin: auto; /* This will center the parent container horizontally */
    clear:both;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom: 2px solid #e0dede;
    border-left: 2px solid #e0dede;
    border-right: 2px solid #e0dede;
}

#aegis-security .parent-container3 {
    width: 80%; /* Adjust as needed */
    margin: auto; /* This will center the parent container horizontally */
    clear:both;
}

#aegis-security .container {
    border: none;
    background-color: #f4f4f4;
    border-radius: 0px;
    padding: 10px;
    margin-left: auto;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
    width: 78%;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
  
#aegis-security .darker {
    border-color: #a7cae1d9;
    background-color: #77afd410;
    margin-left: 20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-top: 20px;
    width: 78%;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
  
#aegis-security .container::after {
    content: "";
    clear: both;
    display: table;
}
  
#aegis-security .container img {
    float: left;
    max-width: 60px;
    width: 100%;
    margin-right: 20px;
    border-radius: 50%;
}
  
#aegis-security .container img.right {
    float: right;
    margin-left: 20px;
    margin-right:0;
}
  
#aegis-security .time-right {
    float: right;
    color: #aaa;
}
  
#aegis-security .time-left {
    float: left;
    color: #999;
}

#aegis-security .messagebar {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f4f4f4;
    border-radius: 8px;
}	

#aegis-security .messagebar textarea {
    width: 100%;
    height: 90%;
    padding: 5px;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
    color:#151515;
    resize: none;
}

#aegis-security .messagebar textarea::placeholder {
    color: #acacac;
}

#aegis-security .messagebar button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #f4f4f4;
}

#aegis-security .messagebar button:active { 
    transform: scale(0.98); 
    /* Scaling button to 0.98 to its original size */ 
    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); 
    /* Lowering the shadow */ 
}

#aegis-security .filter-blue {
    filter: invert(55%) sepia(15%) saturate(2160%) hue-rotate(161deg) brightness(94%) contrast(90%);
}

#aegis-security .pie {
    --w:150px;
    
    width: var(--w);
    aspect-ratio: 1;
    position: relative;
    display: inline-grid;
    place-content: center;
    margin: 5px;
    font-size: 25px;
    font-weight: bold;
    font-family: sans-serif;
}
#aegis-security .pie:before {
    content: "";
    position: absolute;
    border-radius: 50%;
    inset: 0;
    background: conic-gradient(var(--c) calc(var(--p)*1%),#eee 0);
    -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
            mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}

/* The Modal (background) */
#aegis-security .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
#aegis-security .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 50%; /* Could be more or less, depending on screen size */
    box-shadow: 0px 0px 10px 0px #00000040;
    max-height: 50%;
    overflow-y: auto;
}

/* The Close Button */
#aegis-security .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#aegis-security .close:hover,
#aegis-security .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#aegis-security .openModalBtn {
    padding: 8px 15px;
    background-color: #00BF87; /* This is a nice blue, but use your own color scheme */
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#aegis-security .openModalBtn:hover, #aegis-security .openModalBtn:focus {
    background-color: #00a271; /* A slightly darker shade of the button color for hover effect */
    outline: none; /* Removes the outline on focus for a cleaner look */
}

#aegis-security .openModalBtn:active {
    background-color: #006648; /* Even darker for the active state */
}



#aegis-security .openAskAvaBtn {
    margin-top: 10px;
    padding: 8px 15px;
    background-color: #00BF87; /* This is a nice blue, but use your own color scheme */
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#aegis-security .openAskAvaBtn:hover, #aegis-security .openAskAvaBtn:focus {
    background-color: #00a271; /* A slightly darker shade of the button color for hover effect */
    outline: none; /* Removes the outline on focus for a cleaner look */
}

#aegis-security .openAskAvaBtn:active {
    background-color: #006648; /* Even darker for the active state */
}



#ip-details {
    font-family: Arial, sans-serif;
    background: #f4f4f4;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    margin-top: 20px;
}

#ip-details p {
    margin: 5px 0;
    color: #333;
}

#ip-details .highlight {
    color: #d14;
    font-weight: bold;
}