body {
font-family : Arial, sans-serif;
margin : 0;
padding : 0;
}
.container {
background-color : #fcfcfc;
border-radius : 8px;
padding : 25px !important;
box-shadow : 0 4px 8px rgb(0, 0, 0, 0.1);
margin : 0 auto;
}
h2 {
text-align : center;
}

/*----------Google Login----------*/

 .g_id_signin {
display: flex; /* or grid */
justify-content: center;
align-items: center;   
}
 .g-signin2 {
width:100%;
}

/*----------Nav----------*/

.navigation {
display : flex;
justify-content : flex-end;
background-color : #333;
}
.navigation a {
display : inline-block;
color : #f2f2f2;
text-align : center;
padding : 14px 20px;
text-decoration : none;
}
.navigation a:hover {
background-color : #ddd;
color : black;
}
.navigation a.active {
background-color : #4CAF50;
color : white;
}

/*----------Inputs----------*/

input[type="text"], input[type="password"], input[type="submit"], input[type="email"] {
width : 100%;
padding : 10px;
margin : 5px 0;
box-sizing : border-box;
}
input[type="submit"] {
background-color : #4CAF50;
color : white;
border : none;
cursor : pointer;
margin-top : 10px;
}
input[type="submit"]:hover {
background-color : #45a049;
}

/*----------BG----------*/

.blue-bg {
background-color : #3c60ff !important ;
}
.blue-bg:hover {
background-color : #505ed6 !important ;
}

/*----------Buttons----------*/

.but {
display : inline-block;
background-color : #4CAF50;
color : white;
padding : 10px;
margin : 5px 0;
width : 100%;
text-align : center;
text-decoration : none;
cursor : pointer;
box-sizing : border-box;
}
.but:hover {
background-color : #45a049;
}
#addUrl {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid #333;
  border-radius: 5px;
  background-color: #ccc;
  color: #333;
}

#addUrl:hover {
  background-color: #ddd;
  color: #222;
}
.remove-button{
 display: inline-block;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #333;
  border-radius: 5px;
  background-color: #ccc;
  color: #333;
}
.remove-button:hover{
 background-color: #ddd;
  color: #222;
}
.error-message {
color : red;
margin-top : 10px;
}
.title {
padding-bottom : 10px;
margin-bottom : 10px;
border-bottom : 2px solid #ccc;
}
.user-info {
display : flex;
align-items : center;
}
.user-info strong {
margin-right : 10px;
}


/*----------MODAL----------*/

.modalNS {
	display : none;
	position : fixed;
	z-index : 1;
	left : 0;
	top : 0;
	width : 100%;
	height : 100%;
	overflow : auto;
	background-color : rgb(0, 0, 0);
	background-color : rgb(0, 0, 0, 0.4);
	padding-top : 60px;
	}
     .modal-contentNS {
	background-color : #fefefe;
	margin : 5% auto;
	padding : 20px;
	border : #888 solid 1px;
	border-radius: 25px;
	width : 350px;
	}
     .close {
	color : #aaa;
	float : right;
	font-size : 28px;
	font-weight : bold;
	}
     .close:hover, .close:focus {
	color : black;
	text-decoration : none;
	cursor : pointer;
	}

/*----------Table----------*/

 table {
	width : 80%;
	border-collapse : collapse;
	margin: 20px auto 20px auto;
    	border: #c5c5c5 solid 1px;
  	box-shadow : 0 4px 8px rgb(0, 0, 0, 0.1);
	max-width: 1200px;
	}
     th {
	background-color : #f2f2f2;
	padding : 8px;
	text-align : left;
	border-bottom : 2px solid #ddd;

	}
     tr:nth-child(even) {
	background-color : #f9f9f9;
	}
     table td {
	padding : 8px;
	border-top : 1px solid #ddd;
	}
    .status-green {
	color : green;
	margin: 0 auto;
	}
    .status-red {
	color : red;
	} 
    .circle {
	width : 20px;
	height : 20px;
	border-radius : 50%;
	display : inline-block;
	}
    #loadingMessage {
 	display: flex;
  	justify-content: center;
	padding-top: 25px;	
	}