@import url('https://fonts.googleapis.com/css?family=Assistant');

* {
   margin:0;
   padding:0;
}

body {
   background: rgb(255, 252, 252);
   
   font-family: Assistant, sans-serif;
    /* height: 100vh; */
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

html {
    height: 100%;
    width: 100%;
}

header {
    width: 100%;
    height: 90px;
    margin: 0 0 0 0;
    /* background: rgb(7, 97, 103); */
    color: rgb(0, 0, 0);
    /* text-align: center; */
}

/* GRID */
/* .parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr) repeat(2, 0);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
    
.leftborder { 
    grid-area: 1 / 1 / 4 / 2;
    background-color: rgb(255, 255, 255); 
} /* Left Border*/

.rightborder { 
    grid-area: 1 / 5 / 4 / 6;
    background-color: rgb(255, 255, 255); 
} /* Right Border */

.mainbody { 
    grid-area: 1 / 2 / 4 / 5; 
}

/* ADD ENTRY */
.add-entry {
    /* display: inline-block; */
    /* justify-content: center; */ 
    /* text-align: center; */
    /* align-items: center; */
    margin-bottom: 10px;
}

h1, h2, h3, h4, h5 {
   text-align: center;
}

button { 
   padding: 0px 15px;
   color: #fff;
   border-radius: 20px;
   /* margin-right: 10px; */
   border: 1;
}

#greenbutton, 
#startTimeBtn {
   color: black;
   background:rgb(144, 218, 149) !important;
   width: 200px;
}

#redbutton, 
#endTimeBtn {
   color: black;
   background: rgb(239, 150, 150) !important;
   width: 200px;
}

#resetTimeBtn {
   color: rgb(255, 255, 255);
   background: rgb(0, 0, 0) !important;
   width: 200px;
}

#bluebutton {
   color: black;
   background: rgb(144, 170, 248) !important;
}
 
button:hover{
   opacity: .50;
} 

input[type=text], 
input[type=password],
input[type=tel],
input[type=email], 
select, 
textarea {
   width: 100%;
   /* height: auto; */
   padding: 6px;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-sizing: border-box;
   /* resize: both; */
}

label {
   padding: 12px 12px 12px 0;
   display: inline-block;
   /* display: flex; */
   /* width: 100px; */
   /* text-align: left; */ 
}

.row {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
}

.col-25, .col-75 {
   box-sizing: border-box;
   padding: 3px; /* Adjust this value if you want more/less space between columns */
}

.col-25 {
   flex: 0 0 25%; /* Don't grow, don't shrink, base width 25% */
}

.col-75 {
   flex: 1 0 75%; /* Grow to fill available space, don't shrink, base width 75% */
}
 
 /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
 @media screen and (max-width: 600px) {
   .col-25, .col-75, input[type=submit] {
     width: 100%;
     margin-top: 0;
   }
 }

table {
   width: auto;
   border-collapse:collapse;
}

.notebook {
   text-align: center !important;
}

.collapsible {
   background-color: #d9e5ff;
   color: rgb(0, 0, 0);
   cursor: pointer;
   padding: 18px;
   width: 100%;
   border: none;
   border-bottom: 10px;
   text-align: center;
   outline: none;
   font-size: 15px;
}

.content {
   border-radius: 20px;
   padding: 0 18px;
   display: none;
   overflow: hidden;
   background-color: #adceff;
}

.save-links {
   text-align: center;
   justify-content: center;
}

.notebook-entries {
   text-align:left; 
   border: 1px solid rgb(187, 194, 200);
   border-collapse: collapse;
   border-radius: 10px;
}

#analog-clock {
   display: flex;
   align-items: center;
   justify-content: center;
}

.hidden {
    display: none;
}

#submit_button:hover {
   background-color: #0056b3;
   box-shadow: 0px 6px 10px rgba(0,0,0,0.15);
}

#submit_button {
   font-size: 20px; 
   padding: 15px 25px; 
   background-color: #007BFF; 
   color: white; 
   border: none; 
   border-radius: 5px; 
   cursor: pointer; 
   box-shadow: 0px 4px 8px rgba(0,0,0,0.1); 
   transition: 0.3s;
}

.centered-div {
   display: flex;
   flex-direction: column;
   align-items: center;
}