/* Project/css/styles.css
 * 
 * Main public page atributes
 * 
 * body 
 * public-page-container
 * logout_timer
 * 
 * 
*************************************************************************************************/

    :root{
      --pink:#FF4FA3;
      --pink-soft:#FFE3F1;
      --green:#25C06D;
      --green-soft:#E7FFF1;
      --ink:#0F172A;
      --muted:#475569;
      --border:#BF3C20;
      --card:#FFFFFF;
      --bg:#FFFFFF;
      --shadow: 0 10px 30px rgba(15, 23, 42, .08);
      --radius: 18px;
      --max: 1120px;
      
      --mobile-threshold-width: 1000px;
    }


*{box-sizing:border-box}


body {
    margin: 0;                                                      /* Remove default margin */
    padding: 0;                                                     /* Remove default padding */
    height: 100vh;                                                  /* Viewport height */
    /*width: clamp(1024px, 100vw, 3840px);                            /* 100% of the viewport width with min and max */
    background-color: #f0f0f0;                                      /* Set the background color */
    background-image: url('../Media/Background/body_bg_image.png'); /* Set the path to your background image */
    background-size: cover;                                         /* Set the background size to cover the entire viewport */
    background-position: center;                                    /* Center the background image */
    /*overflow: hidden;                                               /* Hide both horizontal and vertical scrollbars */
  	font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; 
	color:var(--ink); 
	background:var(--bg); 
	line-height:1.45
}


.public-page-container {
    position: absolute;
    margin: 0;                                                      /* Remove default margin */
    width: clamp(716px, 70vw, 2688px);                              /* 70% of the viewport width with min and max */
    left: 15vw;
    /*background-color: #bbffff;                                    /* Background color for the header */
    background-color: rgba(255, 255, 255, 0.75);                    /* Semi-transparent white background color */
    
    /*max-height: 88%;                                              /* Set the maximum height for the table container */
    height: 90%;
    overflow-y: auto;                                               /* Enable vertical scrolling */
    
    padding: 35px 35px 20px 35px;                                   /* Padding inside top right bottom left */
}









/* FORM */
/*************************************************************************************************/
.float-to-center {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 999;
}


.private-form-container{
    background-color: #555555;
    color: white;
    border: 2px solid #3498db;
    border-radius: 15px;
    padding: 10px;
}
	
	
	.private-form-container table{
		vertical-align: middle;
	}
	
	.private-form-container tr {
	    height: 15px; /* Set the height of table rows */
	    padding: 0; /* Set padding to 0 for table rows */
	}
	
	.private-form-container td {
	    padding: 4px;
	    /* border: 1px solid #ddd;         /* Set border for cells */
	}
	
	
	
	
	.private-form-container a {
		color: white;
		text-decoration: none; /* Remove underline */
	}
		
	.private-form-container a:visited {
		color: white;
	}
		
	.private-form-container a:hover {
		text-decoration: underline;
	}
		
	.private-form-container a:active {
		color: white;
	}











/* MASTER FORCE MENU DIV */
/*************************************************************************************************/
.force_master_items{
	position: absolute;
	z-index: 9999;

    bottom: 25px;
    right: 25px;
    
    padding: 15px;
    background-color: #ff0000;                                    /* Div color*/
    
    border-radius: calc(0.5rem - 2px);
    
}

    .force_master_items a {
		color: #ffffff;
		text-decoration: none; /* Remove underline */
	}
	
	.force_master_items a:visited {
		color: #ffffff;
	}
	
	.force_master_items a:hover {
		text-decoration: ffffff;
	}
	
	.force_master_items a:active {
		color: #ffffff;
	}















/* LOG OUT */
/*************************************************************************************************/
.logout_timer {
    font-size: 30px;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}



/* HEADER */
/*************************************************************************************************/

.header-left-top{                                    /* header block */
    width: 100vw; /* 100% of the viewport width */
    height: 50px; 
    background-color: #555555;
    color: #ffffff;
}

    .header-left-top .left-top {                         /* company title */
        float: left;
        margin-top: 5px;
        margin-left: 50px;
        display: inline-block;
        color: #ffffff
    }
    .header-left-top .left-top h3 {
        margin-top: 10px;
    }
    
    .header-left-top .left-top-menu {                    /* user menu */
        float: left;
        margin-top: 25px;
        margin-left: 50px;
        display: inline-block;
        color: #ffffff
    }
    
    .header-left-top .right-top {                        /* master menu */
        float: right;
        margin-top: 12px;
        margin-right: 150px;
        display: inline-block;
        color: #ffffff
    }
    
    .dropdown { /* Style the dropdown container */
    
        position: relative;
        display: inline-block;
    }
    
    .dropdown ul { /* Style the dropdown content (hidden by default) */
        list-style: none;
        margin: 0;
        padding: 0;
        display: none;
        position: absolute;
        background-color: #555555;
        box-shadow: 0 8px 64px rgba(0,0,0,0.2);
        z-index: 23;
    }

    /* Style the list items inside the dropdown */
    .dropdown li {
        padding: 10x;
        min-width: 150px;
        text-align: left;
        border-bottom: 1px solid #ddd;
        margin: 5px 0; /* Add margin for spacing */
    }
    
    /* Display the dropdown when hovering over the parent element */
    .dropdown:hover ul {
        display: block;
    }

    .header-left-top a {
        color: white;
        text-decoration: none; /* Remove underline */
    }
    
    .header-left-top a:visited {
        color: white;
    }
    
    .header-left-top a:hover {
        text-decoration: underline;
    }
    
    .header-left-top a:active {
        color: white;
    }
    
.error-confirm {
    position: relative;
    float: right;                     /* Float the div to the right */
    margin-right: 20px;             /* Add some margin for spacing */
    /* background-color: #0000ff;   /* */
    z-index: 999;                   /* */
}


.error-confirm .error_red {
    display: flex;
    width: 500px; /* Set the width of the div */
    height: 50px; /* Set the height of the div */
    align-items: center; /* Center the content vertically */
    justify-content: center; /* Center the content horizontally */
    text-align: center; /* Center text horizontally */
    
    background-color: #FFC7CE; /* Set the background color #FFC7CE */
    color: #9C0006; /* Set text color #9C0006 RED*/
    border-radius: 15px;
}


.error-confirm .confirm_green {
    display: flex;
    width: 500px; /* Set the width of the div */
    height: 50px; /* Set the height of the div */
    align-items: center; /* Center the content vertically */
    justify-content: center; /* Center the content horizontally */
    text-align: center; /* Center text horizontally */
    
    background-color: #C6EFCE; /* Set the background color #C6EFCE */
    color: #006100; /* Set text color #006100 GREEN*/
    border-radius: 15px;
}




/* FOOTER */
/*************************************************************************************************/
.foother-center-botton{
    position: absolute;
    bottom: 7;
    left: 0;
    top: 95%;
    width: 100%;
    text-align: center;
}

.foother-center-botton span {
    font-size: 10px; /* Adjust the font size based on your needs */
}





/* Admin add Button, TABLE */
/*************************************************************************************************/
.add-image{
    position: absolute;
    right: 25px;
    top: 80px
}
.add-image img{
    width: 50px;
    height: auto; /* Maintain aspect ratio by setting height to auto */
}



.table-container {
    max-height: 60%; /* Set the maximum height for the table container */
    overflow-y: auto; /* Enable vertical scrolling */
}


/* Style for the table header */
.table-container thead {
    position: sticky;
    top: 0; /* Stick the header to the top of the container */
    background-color: #555555; /* Background color for the header */
    /*z-index: 1; /* Ensure the header appears above the scrollable content */
}

.table-container table{
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
}

.table-container tr {
    border-bottom: 1px solid #ddd; /* Optional: Add a border between rows */
    height: 40px; /* Set the height of the table rows */
}

/* Apply alternating colors to table rows */
.table-container tr:nth-child(even) {
    background-color: #f9f9f9; /* Set the background color for even rows */
}

.table-container th, td {
    padding: 10px; /* Optional: Add padding to the cells */
}

/* Optional: Remove border from the last row */
.table-container tr:last-child {
    border-bottom: none;
}

/*************************************************************************************************/
/* End-of File! */