Feedback

Styles/index.css

@@ -0,0 +1,321 @@
+/* .container
+{
+    border: 1px solid red;
+} */
+@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");
+#color
+{
+    color:rgb(20,180,249);
+    white-space: nowrap;
+}
+
+.buton
+{
+    background-color: rgb(75, 201, 75);
+    border: rgb(75, 201, 75);
+    color: aliceblue;
+    margin-left: 2rem;
+    padding-left:1em;
+    padding-right: 1em;
+}
+#button2 
+{
+    border: 1px solid black;
+    background-color: white;
+    margin-left: 1rem;
+}
+#select_option
+{
+    border: 1px solid black;
+    border-radius: 0;
+    max-width: 12rem;
+}
+#search
+{
+    height: 2rem;
+    margin-top: auto;
+    width: 10rem;
+}
+#clear
+{
+    height: 2rem;
+    margin-left: 1rem;
+    margin-top: auto;
+}
+
+#filter_by
+{
+    margin-top: auto;
+}
+
+#add_employee
+{
+    border-radius: 0;
+    background-color: rgb(20,180,249);
+    color: white;
+    height: 1cm;
+}
+#alphabet
+{
+    width: 1.9rem;
+    background-color: rgb(20,180,249);
+    color: white;
+    font-size: 1.5rem;
+    margin:3px;
+    border: none;
+}
+#display_res
+{
+    border: 1px solid rgb(206, 190, 190);
+    min-height: 400px;
+    margin-bottom: 2rem;
+}
+.card
+{
+    border-radius: 0;
+    background-color: rgb(234,233,233);
+    border: none;
+    font-size: 12px;
+    width: 100%;
+}
+#col_card
+{
+    width: 25%;
+}
+.filters_button
+{
+    margin-bottom: 4px;
+    background-color: white;
+    display: block;
+    border:none;
+}
+
+#display_none
+{
+    display: none;
+}
+.val_error
+{
+    color:red;
+}
+
+
+
+.bg-modal
+{
+    width: 100%;
+    height:100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color:rgba(0, 0, 0, 0.094);
+    justify-content: center;
+    align-items: center;
+    display: none;
+    overflow-y: hidden;
+    overflow-x: hidden;
+}
+#card_display
+{
+    width: 100%;
+    height: 100%;
+    position:absolute;
+    top: 0;
+    left: 0;
+    justify-content: center;
+    background-color:rgba(79, 78, 78, 0.589);
+    align-items: center;
+    display: none;
+    overflow-y: hidden;
+    overflow-x: hidden;
+}
+#card_display2
+{
+    width: 100%;
+    height: 100%;
+    position:fixed;
+    top: 0;
+    left: 0;
+    justify-content: center;
+    background-color:rgba(79, 78, 78, 0.589);
+    align-items: center;
+    display: none;
+    overflow-y: hidden;
+    overflow-x: hidden;
+}
+
+#card_pop
+{
+    background-color: white;
+    padding: 2rem;
+    padding-top:1rem;
+    padding-bottom:1rem;
+    border-radius:3%;
+    border: 2px black solid;
+    margin-top: 4rem;
+    margin-bottom: 4rem;
+    max-height:15cm;
+}
+#edit_pop
+{
+    background-color: white;
+    padding-top:1rem;
+    padding-bottom:1rem;
+    border-radius:3%;
+    border: 2px black solid;
+    margin-top: 4rem;
+    margin-bottom: 4rem;
+    /* overflow-y: scroll;
+    overflow-x: hidden; */
+    max-height:15cm;
+}
+
+
+.model-content
+{
+    padding-bottom: 20px;
+    background-color: white;
+    width: 30%;
+    height: auto;
+}
+.form-control
+{
+margin: 1rem;
+}
+.input_modify
+{
+    width: 100%;
+    display: block;
+    margin: auto;
+    height:35px;
+
+}
+.input_modify1
+{
+    height: 40px;
+}
+.input_modify:hover,.input_modify1:hover
+{
+    box-shadow: 6px 6px 10px rgba(172, 169, 169, 0.562);
+}
+.header
+{
+    display: flex;
+    justify-content:space-around;
+    align-items: center;
+}
+#close_button
+{
+    width: 40px;
+    height: 40px;
+    font-size: 25px;
+    background-color: rgb(255, 255, 255);
+    border: 2px solid red;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+   color: red;
+   border-radius: 50%;
+}
+#close_button:hover
+{
+    box-shadow: 5px 5px 10px rgba(218, 128, 128, 0.719);
+}
+#image
+{
+    display: block;
+    margin: auto;
+    height: 110px;
+    width: 110px;
+    box-shadow: 3px 3px 3px black;
+}
+#image:hover
+{
+    transform: scale(1.2);
+}
+#emp_name
+{
+    display: flex;
+    justify-content: center;
+    color: brown;
+}
+#loc
+{
+    display: flex;
+    justify-content: center;
+    color: rgba(240, 76, 117, 0.954);
+    margin-bottom: 0;
+}
+.details
+{
+    line-height: 1rem;
+    color: rgb(74, 74, 214);
+}
+#button1
+{
+    background-color: rgb(245, 63, 63);
+    border: 1px solid white;
+    color: aliceblue;
+    font-size: auto;
+    white-space: nowrap;
+}
+#button2
+{
+    background-color:rgb(84, 84, 225);
+    border: 1px solid white;
+    color: aliceblue;
+    font-size: auto;
+    white-space: nowrap;
+}
+#button2:hover,#button1:hover
+{
+    box-shadow: 10px 10px 10px rgba(64, 61, 61, 0.719);
+}
+.buttons
+{
+    display: flex;
+    justify-content: space-around;
+}
+#loc:hover
+{
+    transform:scale(1.5);
+}
+.card:hover
+{
+    transform: scale(1.05);
+    box-shadow: 3px 3px 3px black;
+}
+#button3
+{
+    background-color: rgb(87, 225, 83);
+    border: 1px solid white;
+    color: aliceblue;
+    font-size: auto;
+    white-space: nowrap;
+}
+.tabled
+{
+    margin: auto;
+    display: flex;
+    justify-content: center;
+}
+#input_edit1,#input_edit2,#input_edit3,#input_edit4,#input_edit5,#input_edit6,#input_edit7,#input_edit8
+{
+    border: none;
+    color: rgb(16, 16, 248);
+    display:inline-flexbox;
+}
+#input_edit1:hover,#input_edit2:hover,#input_edit3:hover,#input_edit4:hover,#input_edit5:hover,#input_edit6:hover,#input_edit7:hover,#input_edit8:hover
+{
+    transform: scale(1.05);
+}
+#popup_close
+{
+    font-size: 2rem;
+    position:absolute;
+    right:0px;
+}
+.popup_close_div
+{
+    position: relative;
+}