Upload files to 'public_html/style'

public_html/style/laboratory.css

@@ -0,0 +1,637 @@
+/*  Authors         :   Carlos C. Corrada-Bravo
+                        David J. Ortiz-Rivera
+
+    Organization    :   Centro de Desarrollo y Consultoria Computacional
+    Project         :   OPASO Material Registry   
+    File            :   laboratory.css
+    Description     :   Styling for laboratory/inventory pages */
+
+
+.main-form{
+	top: 0%;
+	opacity: 0;
+	width: 100%;
+	height: 100%;
+	text-align: center;
+	padding: 105px 0;
+	will-change: transform,opacity;
+	transform: translateY(-100%);
+  	will-change: transform, opacity;
+  	transition: transform 0.5s,opacity 0.5s ease-in-out;
+}
+
+.form-shader{
+	opacity: 0;
+	z-index: -1;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	text-align: center;
+	position: absolute;
+	background-color: rgb(0,0,0,0.85);
+	will-change: z-index,opacity;
+	transition: z-index 0.25s, opacity 0.25s ease-in-out;
+}
+
+.t-form{
+	display: none;
+}
+
+.c-form{
+	display: block !important;
+}
+.alert-shader{
+	width: 100%;
+	height: 100%;
+	z-index: 9998;
+	position: absolute;
+	background-color: rgb(0,0,0,0.25);	
+}
+
+.alert-wrapper{
+	opacity: 0;
+	z-index: -1;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	text-align: center;
+	will-change: opacity;
+	background-color: rgb(0,0,0,0.85);
+	/* transition: opacity 0.15s ease-in-out; */
+}
+
+.query-btn{
+	cursor: pointer;
+	padding: 0px 5px;
+	border-radius: 0px;
+	color: #202124;
+	border-bottom: 2px solid transparent;
+}
+.query-btn:hover{
+	color: #060606;
+	border-bottom: 2px solid #060606;
+	transition: border-bottom 0.5s ease-in-out;
+}
+
+.confirm-header{
+	text-align: left;
+	padding: 7.5px 15px;
+	background-color: #fff;
+	border-bottom: 1px solid rgb(218,220,224);
+}
+
+.submit-usage{
+	margin-top: 5%;
+	color: darkgray;
+}
+
+.confirm-alert{
+	top: 50%;
+	margin: auto;
+	height: 175px;
+	overflow: auto;
+	z-index: 9999;
+	color: #202124;
+	max-width: 300px;
+	position: relative;
+	border-radius: 2.5px;
+	display: inline-block;
+	background-color: #fff;
+	transform: translateY(-50%);
+	border: 1px solid rgb(218,220,224);
+}
+
+.query-actions{
+	right: 15px;
+	bottom: 15px;
+	position: absolute;
+}
+
+.mi-wrapper{
+	padding: 5px 15px;
+	display: inline-block;	
+}
+
+.confirm-message{
+	color: #202124;
+	text-align: left;
+}
+
+.form-wrapper{
+	width: 275px;
+	margin: auto;
+	z-index: 9999;
+	position: relative;
+	border-radius: 2.5px;
+	background-color: #fff;
+	border: 1px solid rgb(218,220,224);
+}
+
+.main-form{
+	top: 0%;
+	opacity: 0;
+	width: 100%;
+	height: 100%;
+	text-align: center;
+	padding: 105px 10% 15px;
+	will-change: transform,opacity;
+	transform: translateY(-100%);
+  	will-change: transform, opacity;
+  	transition: transform 0.5s,opacity 0.5s ease-in-out;
+}
+
+.actions-cell{
+    width: 150px;
+}
+
+.form-header{
+	float: left;
+	font-size: 20px;
+	color: #202124;
+	display: inline-block;
+	text-transform: capitalize;
+}
+
+.close-icon{
+	float: right;
+	cursor: pointer;
+	color: darkgray;
+	display: inline-block;
+}
+
+.form{
+	width: 100%;
+	text-align: center;	
+}
+
+.add-form,.edit-form{
+	top: 0%;
+	opacity: 0;
+	width: 100%;
+	height: 100%;
+	text-align: center;
+	position: absolute;
+	padding: 105px 10% 15px;
+	will-change: transform,opacity;
+	transform: translateY(-100%);
+  	will-change: transform, opacity;
+  	transition: transform 0.5s,opacity 0.5s ease-in-out;
+}
+
+.add-form-wrapper,.edit-form-wrapper{
+	border-radius: 2.5px;
+	background-color: #fff;
+	border: 1px solid rgb(218,220,224);
+}
+
+.add-form-body,.edit-form-body{
+	width: 100%;
+	overflow-y: auto;
+}
+
+.add-form-body-wrapper,.edit-form-body-wrapper{
+	width: 100%;
+}
+
+#add-submit,#edit-submit{
+	float: right;
+}
+
+.form-body{
+	padding: 7.5px 15px 0px;
+}
+
+.form-header-wrapper,.add-form-header-wrapper,.edit-form-header-wrapper{
+	width: 100%;
+	display: inline-block;
+	padding: 10px 15px 0px;
+	border-bottom: 1px solid rgb(218,220,224);
+}
+
+.li-wrapper{
+	width: 100%;
+	float: left;
+	margin-bottom: 1%;
+	display: inline-block;
+}
+
+.control-wrapper{
+	float: right;
+	text-align: left;
+	position: relative;
+	display: inline-block;
+}
+
+.text-field{
+	height: 30px;
+	width: 155px;
+	float: right;
+	padding: 7.5px;
+	color: #202124; 
+  	text-align: right;
+	position: relative;
+	border-radius: 2.5px;
+	margin-bottom: 7.5px;
+	display: inline-block;
+	background-color: #fff;
+	border: 1px solid rgb(218,220,224) !important;
+}
+
+.label{
+	float: left;
+	color: #202124;
+	font-size: 15px;
+	padding-right: 5px;
+	display: inline-block;
+	transform: translateY(25%);
+}
+
+.form-actions{
+	width: 100%;
+	padding: 0 15px 15px;
+	display: inline-block;
+}
+
+.person-name{
+	text-align: left;
+}
+
+.personnel-row:last-child td{
+	border-bottom: 0px solid rgb(34,40,45) !important;
+}
+
+.personnel,.personnel-wrapper{
+	width: 450px;
+
+}
+.personnel{
+	border-radius: 2.5px;
+	border: 1px solid rgb(52,53,54) !important;
+}
+
+.access-level{
+	text-transform: capitalize;
+}
+
+.transaction-label{
+	text-transform: capitalize;
+}
+
+.empty-field{
+  border: 1px solid #fd351d; 
+}
+
+.required-field{
+	color: rgb(255,70,70);
+}
+
+.fields-required{
+	display: none;
+	color: rgb(255,70,70);
+}
+
+.add-material{
+	float: left;
+	height: 31.25px;
+	font-size: 15px;
+	padding: 2.5px 7.5px;
+	display: inline-flex;
+	color: #202124;
+	border-radius: 2.5px !important;
+	background-color: #fff;
+	border: 1px solid rgb(218,220,224) !important;
+}
+
+.add-material:hover{
+	color: #202124;
+}
+
+.add-material-icon{
+	font-size: 13.25px;
+	transform: translateY(25%);
+}
+
+.add-text{
+	float: left;
+	margin-left: 7.5px;
+	transform: translateY(1.25px);
+}
+
+.add-li-wrapper,.edit-li-wrapper{
+	text-align: left;
+	position: relative;
+	margin-right: 15px;
+	display: inline-block;
+}
+
+.add-li-wrapper .text-field,.edit-li-wrapper .text-field{
+	height: 35px;
+	text-align: left;
+}
+
+.add-li-wrapper label,.edit-li-wrapper label{
+	display: block;
+	color: #202124;
+}
+
+.field-warning{
+	top: 50%;
+	right: 5.5%;
+	display: none;
+	position: absolute;
+	color: rgb(255,243,205);
+	transform: translateY(25%);
+}
+
+.material-input{
+	width: 100%;
+	height: 35px;
+	float: left;
+	color: #202124;
+	padding: 7.5px;
+	text-align: left;
+	position: relative;
+	border-radius: 5px;
+	margin-bottom: 15px;
+	display: inline-block;
+	background-color: #fff;
+	border: 1px solid rgb(218,220,224);
+}
+
+.add-material{
+	cursor: pointer;
+}
+
+.form-actions{
+	text-align: right;
+}
+
+.slide-right{
+	animation: slide-right 0.5s ease-in-out;
+	transform: translateX(0%);
+}
+
+.details{
+	float: left;
+	width: 100%;
+	text-align: left;
+	padding: 7.5px 15px;
+	display: inline-block;
+	border-top: 1px solid rgb(218,220,224);
+}
+
+.details:first-child{
+	border-top: none;
+}
+
+.details-header{
+	color: #202124;
+}
+
+.add-form-actions,.edit-form-actions{
+	width: 100%;
+	text-align: right;
+	display: inline-block;
+	padding: 15px 15px 7.5px;
+}
+
+.medium-field{
+	width: 25%;
+}
+
+.large-field{
+	width: 27.5%;
+}
+
+.small-field{
+	width: 6.25%;
+}
+
+.extra-small-field{
+	width: 3.5%;
+}
+
+.number-field{
+	width: 7.5%;
+}
+
+input[name=capacity],input[name=quantity]{
+	text-align: right;
+}
+
+input[name=state],input[name=type]{
+	text-align: center;
+}
+
+.quantity{
+	margin-left: 5px;
+}
+
+.uom{
+	margin-left: 20px;
+}
+
+.ghs-description,.hazard-description]{
+	display: none;
+}
+
+.material-link{
+	font-size: 12.5px;
+	margin-left: 15px;
+}
+
+.float-right{
+	float: right;
+	display: inline-block;
+}
+
+.hidden-entry{
+	display: none;
+}
+
+.select-form{
+	width: 100%;
+	height: 31.25px;
+	padding: 7.5px 0px;
+	margin-right: 15px;
+	display: inline-block;
+	text-align: right !important;
+	transform: translateY(-3.75px);
+}
+
+.select-header{
+	font-size: 12.5px;
+	margin-right: 7.5px;
+	display: inline-block;
+}
+
+.material{
+	cursor: pointer;
+}
+
+td[value=mat_name]{
+	cursor: pointer;
+}
+
+.material-data-icon-wrapper{
+	padding: 15px;
+}
+
+.material-data-shader{
+	left: 0;
+	top: 0;
+	z-index: 9999;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	will-change: transform;
+	transform: translateX(-100%);
+	background-color: rgba(0,0,0,0);
+    transition: all 0.25s ease-in-out;
+}
+
+.material-data-wrapper{
+	left: 0;
+	top: 0px;
+	width: 300px;
+	height: 100%;
+	background-color: #fff;
+	border-right: 1px solid rgb(52,53,54);
+}
+
+.material-data-row *{
+	color: #060606;
+}
+
+.material-data-row,.material-name-wrapper{
+	width: 100%;
+	padding: 5px 15px;
+	display: inline-block;
+	word-break: break-all;
+}
+
+.material-data-row{
+	padding-left: 30px;
+}
+
+.material-name-wrapper{
+	border-bottom: 1px solid rgb(52,53,54);
+}
+
+.material-name{
+	float: left;
+	color: #060606;
+	width: initial;
+	display: inline-block;
+}
+
+.material-data-text{
+	color: #060606;
+}
+
+.shader{
+	background-color: rgba(0,0,0,0.5);
+    transition: all 0.25s ease-in-out;
+
+}
+
+.edit-link{
+	float: left;
+	margin-left: 5px;
+	font-size: 13.125px;
+	transform: translateY(-2.5%);
+}
+
+.table-sub-header{
+	width: initial;
+	display: inline-block;
+}
+
+.sub-header-wrapper{
+	width: 100%;
+	display: inline-block;
+}
+
+.hide-material-data-icon{
+	float: right;
+	cursor: pointer;
+	display: inline-block;
+	color: darkgray;
+
+}
+
+span[value=sds] *{
+	color: rgb(58,132,247);
+}
+
+.fade-in{
+    opacity: 1;
+    z-index: 9999;
+    transition: transform 0.25s,opacity 0.25s ease-in-out;
+}
+
+.quick-fade-in{
+    opacity: 1;
+    z-index: 9999;
+    transition: opacity 0.125s ease-in-out;
+}
+
+.slide-down{
+    opacity: 1;
+    z-index: 9999;
+    transform: translateY(0%);
+    transition: transform 0.5s,opacity 0.5s ease-in-out;
+}
+
+.slide-right{
+    transform: translateX(0%);
+    transition: transform 0.25s ease-in-out;
+}
+
+.sds{
+	cursor: pointer;
+	color: rgb(5,125,255);
+}
+
+td[value=ghs]{
+	max-width: 150px;
+}
+
+.edit{
+	resize: both;
+	left: 0px;
+	top: 0px;
+	z-index: 5;
+	width: 100%;
+	height: 100%;
+	padding: 2.5px;
+	transition: none;
+	text-align: inherit;
+	position: absolute;
+	border: 1px solid rgb(102,103,104);
+}
+
+@media screen and (max-width: 991px){
+	.material-data-shader{
+		z-index: 9999;
+	}
+
+	.material-data-wrapper{
+		top: 0px;
+		width: 90%;
+		height: 100%;
+	}
+
+	.personnel,.personnel-wrapper{
+		width: 100%;
+	}
+
+	.add-form input,.edit-form input{
+	    text-align: left;
+	}
+
+	.add-form,.edit-form{
+		padding: 15px;
+		overflow-y: auto;
+	}
+}

public_html/style/login.css

@@ -0,0 +1,281 @@
+/*  Authors         :   Carlos C. Corrada-Bravo
+                        David J. Ortiz-Rivera
+
+    Organization    :   Centro de Desarrollo y Consultoria Computacional
+    Project         :   OPASO Material Registry   
+    File            :   login.css
+    Description     :   Styling page for login */
+
+.login{
+	top: 0;
+	left: 0;
+	z-index: 0;
+	width: 100%;
+	height: 100%;
+	text-align: center;
+	position: relative;
+	background-color: #fff;
+}
+
+.form-wrapper{
+	top: 50%;
+	left: 50%;
+	z-index: 1;
+	color: #fafafa;
+	width: 335px;
+	position: absolute;
+	display: inline-block;
+	transform: translate(-50%,-50%);
+}
+
+.form{
+	border-radius: 2.5px;
+	border: 1px solid rgb(218,220,224);
+}
+
+.form-logo{
+	top: 0;
+    display: none;
+	width: 62.5px;
+	border-radius: 50%;
+	margin-bottom: 10px;
+	margin-right: 15px;
+	position: absolute;
+	object-fit: scale-down;
+	display: inline-block;
+	transform: translateY(-5%);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
+}
+
+.form-header-wrapper{
+	text-align: left;
+	padding: 15px 20px 5px;
+	border-bottom: 1px solid rgb(218,220,224);
+}
+
+.form-header{
+	margin: 0;
+	color: #202124;
+	font-size: 16.5px;
+}
+
+.form-header-subtitle{
+	color: darkgray;
+}
+
+.form-body-header{
+	color: #202124;
+	font-size: 16.5px;
+}
+
+.form-body{
+	padding: 0px;
+ 	font-size: 15px;
+	text-align: left;
+	border-radius: 2.5px;
+    margin-bottom: 7.5px;
+}
+
+.placeholder{
+	z-index: 1;
+	left: 15px;
+	color: darkgray;
+	font-size: 11px;
+	font-weight: bold;
+	top: 50% !important;
+	position: absolute;
+	will-change: transform;
+	text-transform: uppercase;
+	transform: translateY(-50%) !important;
+}
+
+.login-field{
+	z-index: 3;
+	width: 100%;
+	height: 100%;
+	border: none;
+	color: #060606;
+	position: absolute;
+	padding: 7.5px 15px;
+	padding-right: 35px;
+	will-change: padding-top;
+	background-color: transparent;
+}
+
+.view-password{
+	z-index: 5;
+	right: 15px;
+	color: darkgray;
+	cursor: pointer;
+	font-size: 13.75px;
+	position: absolute;
+	will-change: color;
+	transform: translateY(15px);
+	transition: color 0.5s ease-in-out;
+}
+
+.view-password:hover{
+	color: #060606;
+}
+
+.placeholder-icon{
+	color:#0070E0;
+	margin-left: 2.5px;
+	font-size: 4px !important;
+	transform: translateY(-50%);
+}
+
+.submit-login,.submit-login:hover{
+	color: #fff;
+	font-size: 15px;
+	font-weight: 500;
+	border-radius: 2.5px;
+	padding: 6.25px 10px;
+	border: 1px solid #0c6ebe;
+	transition: all 0.25s ease-in-out;
+}
+
+.form-input-wrapper{
+	padding: 15px 20px;
+}
+
+.form-subtitle{
+	margin: 0px;
+	text-align: left;
+	padding: 7.5px 15px;
+}
+
+.form-link{
+	float: left;
+	font-size: 12.5px;
+	display: inline-block;
+	text-decoration: none;
+}
+
+.form-link:hover{
+	text-decoration: none;
+}
+
+.link-divider{
+	float: left;
+	display: inline-block;
+	margin-left: 7.5px;
+	margin-right: 7.5px;
+	color: rgb(80,136,209);
+	font-size: 5px !important;
+	transform: translateY(150%);
+}
+
+.shrink{
+	padding-top: 22.5px !important;
+	transition: padding-top 0.25s ease-in-out;
+}
+
+.slide{
+	font-size: 10px !important;
+  	transform: translateY(-100%) !important;
+	transition: all 0.25s ease-in-out;
+}
+
+.slide i{
+	font-size: 9px !important;
+}
+
+.google-sign-in-wrapper{
+	margin-top: 15px;
+	padding: 0px 25px;
+	position: relative;
+	border-top: 1px solid rgb(218,220,224);
+}
+
+.google-sign-in-header{
+	color: #202124;
+	font-size: 12.5px;
+	margin-top: 20px;
+	text-align: center;
+	margin-bottom: 7.5px;
+}
+
+.or{
+	left: 50%;
+	padding: 5px 7.5px;
+	position: absolute;
+	display: inline-block;
+	background-color: #fff;
+	transform: translate(-50%,-55%);
+}
+
+.google-sign-in{
+	height: 40px;
+	width: 100%;
+	padding: 0px;
+	font-size: 15px;
+	color: #060606;
+	font-weight: 500;
+	position: relative;
+	border-radius: 2.5px;
+	display: inline-block;
+	background-color: #fff;
+	will-change: filter,box-shadow;
+	transition: all 0.25s ease-in-out;
+	border: 1px solid rgb(218,220,224);
+
+}
+
+.google-logo{
+	left: 0;
+	float: left;
+	height: 39px;
+	padding: 10px;
+	position: absolute;
+	margin-right: 10px;
+	display: inline-block;
+	border-right: 1px solid rgb(218,220,224);
+}
+
+.google-sign-in:hover{
+	color: #282828;
+	text-decoration: none;
+}
+.google-sign-in-text{
+	width: 100%;
+	float: left;
+	text-align: center;
+	display: inline-block;
+	transform: translateY(30%);
+
+}
+
+input{
+  filter: none;
+}
+
+*::-webkit-input-placeholder,*:-moz-placeholder{
+	color: #999;
+}
+*:focus::-webkit-input-placeholder,*:focus:-moz-placeholder{
+	color: #ccc;
+}​
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active,
+input:-internal-autofill-selected{
+  	border-radius: 2.5px;
+	color: #000 !important;
+  	background-color: transparent !important;
+    -webkit-text-fill-color: #000 !important;
+    transition: background-color 0.5s ease-in-out;
+}
+
+button:focus,
+button:active{
+  	border-radius: 2.5px;
+}
+
+@media screen and (max-width: 350px){
+	.form{
+		width: 100%;
+	}
+}

public_html/style/main.css

@@ -0,0 +1,867 @@
+/*  Authors         :   Carlos C. Corrada-Bravo
+                        David J. Ortiz-Rivera
+
+    Organization    :   Centro de Desarrollo y Consultoria Computacional
+    Project         :   OPASO Material Registry   
+    File            :   main.css
+    Description     :   Main styling for page, navbar and footer */
+
+*{
+    box-sizing: border-box;
+}
+
+:root{
+    --alt: #323940;
+    --overflow: #000;
+    --primary: #64b5f6;
+    --secondary: #3651fc;
+    --base: rgb(36,41,46);
+    --overlay-dark: #2d2f34;
+    --overlay-light: #383b40;
+    --surface: rgb(44,44,46);
+}
+
+body,html,.content{
+    width: 100%;
+    height: 100%;
+    display: block;
+    overflow: hidden;
+}
+
+.content{
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.navbar{
+    top: 0;
+    width: 100%;
+    height: 60px;
+    display: block;
+    position: relative;
+    text-align: left;
+    background-color: #060606;
+    padding: 12.5px 10% !important;
+    /* border-bottom: 1px solid rgb(52,53,54); */
+}
+
+.navbar-header{
+    float: left;
+    display: inline-block;
+}
+
+.navbar-title{
+    color: #fbfbfb;
+    font-size: 25px;
+    font-weight: 700;
+    text-transform: capitalize;
+}
+
+.navbar-title:hover{
+    color: darkgray;
+    text-decoration: none;
+}
+
+.link-wrapper{
+    width: 85%;
+    float: right;
+    display: block;
+    padding-left: 15px;
+}
+
+.navbar-nav{
+    display: inline-block;
+    transform: translateY(25%);
+}
+
+.nav-item{
+    float: left;
+    display: inline-block;
+}
+
+.nav-link{
+    float: left;
+    color: #969696;
+    font-size: 15px;
+    margin-right: 15px;
+    text-decoration: none;
+    display: inline-block;
+    padding: 0px !important;
+}
+
+.nav-link:hover{
+    color: #fbfbfb;
+}
+
+.current{
+    color: #fbfbfb;
+}
+
+.um-wrapper{
+    width: 200px;
+    float: right;
+    display: flex;
+    cursor: pointer;
+    position: relative;
+    font-weight: bold;
+    font-size: 15px;
+    padding: 5px 15px;
+    border-radius: 2.5px;
+    border: 1px solid transparent;
+}
+
+.um-wrapper[aria-expanded=true]{
+    border-bottom-left-radius: 0px;
+    background-color: #060606;
+    border: 1px solid rgb(52,53,54);
+}
+
+.user-menu{
+    width: 100%;
+    float: right;
+    display: block;
+    background-color: transparent;
+}
+
+.user{
+    width: 100%;
+    color: #fbfbfb;
+    padding-left: 0px;
+    padding-right: 0px;
+    font-size: 15px;
+}
+
+.um-icons{
+    float: right;
+    transform: translateY(25%);
+}
+
+.dropdown-icon{
+    color: darkgray;
+    font-size: 12.5px;
+    transform: translateY(50%);
+}
+
+nav .dropdown-menu{
+    margin: 0%;
+    width: 10%;
+    top: 102.5%;
+    left: -1.05px;
+    padding: 0px;
+    border-radius: 0px;
+    border: 1px solid rgb(52,53,54);
+    border-top: none;
+    background-color: #060606;
+    border-bottom-left-radius: 2.5px;
+    border-bottom-right-radius: 2.5px;
+}
+
+.dropdown-divider{
+    margin: 0px;
+    border-top: 1.5px solid #272728;
+}
+
+nav .dropdown-item{
+    cursor: pointer;
+    color: lightgray;
+    font-size: 13.5px;
+    margin-bottom: 0px;
+    padding: 7.5px 15px;
+    border-radius: 0px !important;
+}
+
+.dropdown-item:last-child{
+    border-bottom-left-radius: 2.5px !important;
+    border-bottom-right-radius: 2.5px !important;
+}
+
+.dropdown-item:hover{
+    color: #ffffff;
+    background-color: #060606;
+}
+
+.main{
+    width: 100%;
+    padding: 2.5% 10%;
+    display: inline-block;
+    background-color: #fff;
+    min-height: calc(100% - 60px);
+}
+
+.display{
+    display: inline-block !important;
+}
+
+.hide{
+    display: none !important;
+}
+
+.invalid{
+    border: 1px solid rgb(220,53,69) !important;
+}
+.invalid-icon{
+    color: var(--danger) !important;
+}
+
+.main-wrapper{
+    width: 100%;
+    padding: 0;
+    display: none;
+    min-height: 100%;
+}
+
+.header-wrapper{
+    width: 100%;
+    padding: 0px 0px 30px;
+    display: inline-block;
+}
+
+.header{
+    margin: 0;
+    width: 100%;
+    float: left;
+    color: #202124;
+    font-weight: 700;
+    display: inline-block;
+    text-transform: capitalize;
+}
+
+.table-wrapper{
+    width: 100%;
+    height: 100%;
+    padding: 0px;
+    overflow: auto;
+    border-radius: 2.5px;
+    display: inline-block;
+    border: 1px solid rgb(52,53,54) !important;
+}
+
+.table{
+  margin-bottom: 0%;
+  position: relative;
+  border-collapse: separate;
+  border-spacing: 0px;
+}
+
+th{
+    top: 0;
+    z-index: 2;
+    color: #202124;
+    text-align: center;
+    vertical-align: top;
+    font-weight: normal;
+    border: 1px solid rgb(52,53,54) !important;
+    border-top: none !important;
+    border-left: none !important;
+    vertical-align: top !important;
+    background-color: #e6e6e6;
+    padding: 7.5px 10px 0px !important;
+}
+
+td{
+    color: #202124;
+    border: none;
+    text-align: center;
+    display: table-cell;
+    word-wrap: break-word;
+    text-overflow: ellipsis;
+    padding: 3.5px 5px !important;
+    border-top: 0 solid !important;
+    border-bottom: 1px solid rgb(52,53,54) !important;
+    border-right: 1px solid rgb(52,53,54) !important;
+}
+
+td,th{
+    height: 30px;
+    font-size: 13.125px;
+}
+
+td:last-child{
+    border-right: 0px !important;
+}
+
+td[value=cas]{
+    max-width: 200px;
+}
+
+td[value=type]{
+    text-transform: capitalize;
+}
+
+td[value=sds],td[value=transaction]{
+    width: 50px;
+}
+
+td[value=mat_name],td[value=man_name],td[value=location]{
+    text-transform: capitalize;
+}
+
+td[value=capacity],td[value=total],td[value=quantity],td[value=uom]{
+    text-align: right;
+}
+th[value=capacity],th[value=total],th[value=quantity],th[value=uom]{
+    text-align: right;
+}
+
+td[value=mat_name]{
+    text-align: left;
+    color: rgb(58,132,247);
+    padding-left: 15px !important;
+}
+
+th[value=person_name]{
+    text-align: left;
+}
+
+.person-name{
+    padding-left: 15px !important;
+}
+
+tbody tr:first-child td{
+    border-top: 0px solid #e9e9e9 !important;
+}
+
+th:last-child{
+    border-right: none !important;
+}
+
+tr:last-child td{
+    border-bottom: 0px !important;
+}
+
+.option{
+    border: none;
+    cursor: pointer;
+    background-color: transparent;
+    font-size: 13.125px;
+}
+
+.option:hover{
+    opacity: 0.80;
+    transform: translateY(0.50px);
+    transition: opacity 0.5s,transform 0.5s;
+}
+
+.alerts{
+    bottom: 0%;
+    left: 50%;
+    opacity: 0;
+    z-index: 9999;
+    min-width: 325px;
+    font-size: 14px;
+    position: absolute;
+    padding: 15px 15px 30px;
+    will-change: transform,opacity;
+    transform: translate(-50%,100%) scale(0.5);
+    transition: transform 0.5s,opacity 0.25s ease-in-out;
+}
+
+.alert{
+    margin: 0;
+    width: 100%;
+    color: #fff;
+    padding: 15px;
+    text-align: left;
+    font-weight: normal;
+    position: relative;
+    border-radius: 2.5px;
+    background-color: var(--base);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
+}
+
+.message-icon-wrapper{
+    display: block;
+}
+
+.message-icon{
+    display: none;
+    font-size: 30px;
+    margin-bottom: 15px;
+}
+
+.alert-message{
+    margin: 0;
+    transform: translateY(-2.5%);
+    font-family: "Noto Sans",sans-serif;
+}
+
+.alert-status{
+    margin: 0;
+    font-weight: bold;
+    margin-bottom: 15px;
+    display: inline-block;
+    text-transform: capitalize;
+    margin-right: 5px !important;
+    font-family: "Noto Sans",sans-serif;
+}
+
+.alert p{
+    margin: 0px;
+}
+
+.error,.failed,.warning{
+    background-color: var(--danger);
+}
+
+.success{
+    background-color: rgb(40,167,69);
+}
+
+.slide-up{
+  opacity: 1;
+  animation: opacity 0.25s,slide-up 0.5s ease-in-out;
+  transform: translate(-50%,-15%) scale(1);
+}
+
+
+@keyframes slide-up{
+    0%{
+        transform: translate(-50%,100%) scale(0.5);
+    }
+    100%{
+        transform: translate(-50%,-15%) scale(1);
+    }
+}
+
+.button{
+    border: none;
+    color: white;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+.button:hover{
+    box-shadow: none;
+    filter: brightness(95%);
+}
+
+.option-cell{
+    display: inline-flex;
+}
+
+.trans-cell{
+    text-align: center;
+    margin-right: 7.5px;
+}
+
+.action{
+    color: #202124;
+    border: none;
+    font-size: 12.5px;
+    margin-right: 5px;
+    padding: 1.25px 5px;
+    background-color: transparent;
+    border-radius: 2.5px !important;
+}
+.action i,.option i{
+    color: #202124;
+}
+
+.changes-wrapper{
+    height: 50px;
+    text-align: left;
+    padding-top: 7.5px;
+}
+
+.entry-cell{
+    position: relative;
+}
+
+.changes{
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    border-radius: 5px;
+    background-color: rgb(234,64,59);
+}
+
+.delete-wrapper{
+    margin-top: 15px;
+}
+
+.delete{
+    color: white;
+    margin-right: 5px; 
+    background-color: rgb(68,135,243);
+}
+
+.changes:hover,.delete:hover,.cancel-delete:hover{
+    opacity: 0.90;
+    color: #eaeded;
+    transition: opacity 0.50s,color 0.50s ease-in-out;
+}
+
+.slide-up{
+    opacity: 1 !important;
+    transition: opacity 1s ease-in-out;
+}
+
+p{
+    margin: 0px;
+}
+
+.text:-webkit-autofill,
+.text:-webkit-autofill:hover, 
+.text:-webkit-autofill:focus, 
+.text:-webkit-autofill:active{
+    border: 3px solid blue;
+    background-color: #eaeded;
+    -webkit-text-fill-color: gray !important;
+    -webkit-box-shadow: 0 0 0 30px #eaeded inset !important;
+}
+
+.redir{
+    color: #8cc2ff;
+}
+.redir:hover{
+    text-decoration: none;
+}
+
+.submit-query{
+    color: rgba(0,0,0,0.5);
+    background-color: #eaeded;
+    border:  1px solid lightgray;
+}
+
+.li-wrapper{
+  display: block;
+  margin-bottom: 1%;
+}
+
+.footer{
+    width: 100%;
+    height: 200px;
+    display: block;
+    margin-top: 0px;
+    padding-top: 2.5%;
+    padding-left: 10%;
+    padding-right: 10%;
+    background-color: #060606;
+}
+
+.footer *{
+    color: #fff !important;
+}
+
+.copyright{
+    font-size: 10px;
+    font-weight: normal;
+}
+
+.copyright-wrapper{
+    width: 100%;
+    padding: 0px;
+    text-align: right;
+}
+
+.fa-copyright{
+    padding: 0px 5px;
+}
+
+.text-field{
+    top: 0;
+    z-index: 5;
+    float: left;
+    border: none;
+    color: #383838;
+    font-size: 14px;
+    will-change: top;
+    position: absolute;
+    height: calc(100%);
+    padding: 15px 3.75px;
+    width: calc(92.5% - 30px);
+    background-color: transparent;
+    transition: top 0.5s ease-in-out;
+}
+
+.input-wrapper{
+    width: 100%;
+    height: 45px;
+    position: relative;
+    border-radius: 2.5px;
+    margin-bottom: 10px;
+    background-color: #fff;
+    border: 1px solid rgb(218,220,224);
+}
+
+
+.actions{
+  width: 100%;
+  display: block;
+  margin: 7.5px 0px;
+  text-align: center;
+}
+
+.shrink-wrapper{
+  padding-top: 12.5px;
+  padding-bottom: 2.5px;
+}
+
+.text-field:focus .placeholder{
+  background-color: #fff;
+}
+
+.action-btn{
+    color: #fff;
+    padding: 5px;
+    font-size: 15px;
+    display: inline-block;
+}
+
+.action-btn:hover{
+    color: #fff;
+}
+
+#cancel{
+  background-color: rgb(200,70,100);
+}
+
+.empty-field{
+    border: 1px solid rgb(255,70,70) !important; 
+}
+
+.required-field{
+    color: rgb(255,70,70);
+}
+
+.fields-required{
+    display: none;
+    color: rgb(255,70,70);
+}
+
+.label-input-wrapper{
+  display: block;
+  margin-bottom: 2.5%;
+}
+
+a:hover{
+    text-decoration: none;
+}
+
+.popover-content{
+    display: none;
+}
+
+.search-form-wrapper{
+    width: 250px;
+    height: 31.25px;
+    margin-left: 15px;
+    display: inline-flex;
+}
+
+.search-form{
+    width: 100%;
+    float: left;
+    font-size: 14px;
+    border-radius: 2.5px;
+    padding: 2.5px 7.5px;
+    display: inline-block;
+    color: #202124 !important;
+    background-color: #fff;
+    border: 1px solid rgb(218,220,224);
+}
+
+.processing{
+    width: 100%;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    text-align: center;
+    border-radius: 2.5px;
+    display: inline-flex;
+}
+
+.processing-text{
+    color: #202124;
+    font-size: 14px;
+}
+
+.loader{
+    width: 20px;
+    height: 20px;
+    margin-top: 2.5px;
+    margin-left: 25px;
+    border-radius: 50%;
+    display: inline-block;
+    border: 2.5px solid #fff;
+    border-top: 2.5px solid #1a1a1b;
+    animation: spin 2s linear infinite;
+}
+
+.wait{
+    cursor: wait !important;
+}
+
+.search-form-submit{
+    width: 15%;
+    float: left;
+    display: none;
+    color: #202124;
+    cursor: pointer;
+    border-left: none;
+    border-top-right-radius: 2.5px;
+    border-bottom-right-radius: 2.5px;
+    background-color: #fff;
+    border: 1px solid rgb(218,220,224);
+    border-left: 0px;
+}
+
+.clear-icon{
+    font-size: 17.5px;
+    transform: translateY(17.5%);
+}
+
+.active-form .clear-btn{
+    display: inline-block;
+}
+
+.active-form .search-form{
+    width: 85%;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.float-right{
+    display: block;
+}
+
+.sort{
+    cursor: pointer;
+}
+.sort-icon{
+    margin-left: 5px;
+}
+.sort-alt{
+    display: none;
+}
+
+.download-option{
+    width: 100%;
+    cursor: pointer;
+    padding: 5px;
+    display: inline-block;
+}
+
+.t-icon{
+    font-size: 20px;
+}
+
+.download-option:hover{
+    background-color: rgb(245,245,245);
+}
+
+.download{
+    padding: 0;
+    width: 35px;
+    height: 31.25px;
+    float: left;
+    display: inline-block;
+    margin-left: 15px;
+    margin-right: 15px;
+}
+
+.download-btn{
+    cursor: pointer;
+    padding: 0;
+    width: 35px;
+    height: 31.25px;
+    border-radius: 2.5px;
+    text-align: center;
+    display: inline-block ;
+}
+
+.download-icon{
+    transform: translate(9%,10%);
+}
+
+.sub-header{
+    margin-bottom: 5px;
+}
+
+.main-wrapper .total,.table-total{
+    margin-top: 5px;
+    text-align: right;
+    padding-right: 5px;
+}
+
+@keyframes spin{
+    0%{
+        transform: rotate(0deg);
+    }
+    100%{
+        transform: rotate(360deg);
+    }
+}
+
+@media screen and (max-width: 991px){
+    .navbar{
+        height: auto;
+        padding: 7.5px 0px;
+        position: relative;
+        display: inline-flex;
+        border-bottom: 0.5px solid rgb(52,53,54);
+    }
+
+    .link-wrapper{
+        width: 100%;
+        padding: 0px;
+    }
+
+    .navbar-nav,.nav-item{
+        width: 100%;
+    }
+
+    .nav-item{
+        padding-left: 15px;
+    }
+
+    .nav-link{
+        width: 100%;
+        text-align: left;
+    }
+
+    .um-wrapper{
+        right: 0;
+        width: 100%;
+        margin-top: 10px;
+        padding: 5px 12.5px;
+        position: relative;
+        border-radius: 2.5px;
+    }
+
+    .header-wrapper{
+        padding: 15px 0px 7.5px;
+    }
+
+    .float-right{
+        width: 100%;
+    }
+
+    .download{
+        margin: 15px 0px;
+        width: 100%;
+    }
+
+    .download-btn{
+        width: 100%;
+    }
+
+    .search-form-wrapper{
+        width: 100%;
+        margin: 15px 0px;
+    }
+
+    #add-material,#add{
+        width: 100%;
+    }
+
+    .download-icon{
+        transform: translate(25%,10%);
+    }
+
+    .large-field,.medium-field,.small-field,.extra-small-field{
+        width: 100% !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        padding: 0 !important;
+    }
+}