@charset "utf-8";

* {
	font-family: "Pretendard";
}

.public-data-sharing-background {
	@media screen and (min-width: 625px) {
		background: url("../../01/images/manager/background/public-data-sharing-background.png") no-repeat center center fixed;
	}
	
	@media screen and (max-width: 625px) {
		background: rgba(0, 0, 0, 0.6);
	}
	
	background-color: rgba(0, 0, 0, 0.6);
    background-size: 100%;
    
    & > .background {
    	@media screen and (max-width: 1250px) {
    		padding: 24px;
    	}
    	
    	@media screen and (max-width: 410px) {
    		.public-site-logo-container {
    			display: flex;
    			flex-direction: column;
    			align-items: flex-start;
    		}
    	}
    
    	width: 100vw;
	    height: 100vh;
	    	    
	    display: flex;
	   	align-items: center;
	 	justify-content: center;
    
    	background-color: rgba(0, 0, 0, 0.4);
	    backdrop-filter: blur(5px);
	    
	    position: relative;
	    
	    overflow: auto;
	    
	    .public-site-logo-container {
	    	position: absolute;
			top: 24px;
			left: 24px;
	    }
	    
	    .bcs-white-logo {
	    	@media screen and (max-width: 810px) {
	    		& > img {
	    			width: 140px;
	    		}
	    	}
	    	
	    	cursor: pointer;
	    }
	    .bcs-white-board-title {
			font-weight: 600;
			cursor: pointer;
			color: #fff;
			@media screen and (max-width: 810px) {
	    		top: 24px;
				left: 170px;
				font-size: 125%;
	    	}
		}
		.bcs-home-btn {
			position: absolute;
			top: 24px;
			right: 24px;
			cursor: pointer;
			color: #fff;
			
		}
		.bcs-home-btn > i {
			font-size: 24px;
			height: auto;
			width: auto; 
		}
	    
    }
    
    .public-site-header {
    	@media screen and (min-width: 810px) {
			& > .table-header {
				& > div {
					& > div {
						&:first-child {
							& > div {
								gap: 16px;
					
								& > img {
									width: 32px;
									height: 32px;
								}
							
								& > div {
									flex-direction: row;
									align-items: center;
									gap: 16px;
								
									& > h3,
									& > span {
										font-size: 32px;
									}
								}
							}
						}
						
						&:last-child {
							& > .count {
								font-size: 20px;
							}
						}
					}
				}
			}
		}
		
		@media screen and (max-width: 810px) {
			& > .table-header {
				& > div {
					& > div {
						&:first-child {
							& > div {
								gap: 4px;
					
								& > img {
									width: 24px;
									height: 24px;
								}
							
								& > div {
									flex-direction: column;
									align-items: flex-start;
									gap: 4px;
								
									& > h3,
									& > span {
										font-size: 24px;
									}
								}
							}
						}
						
						&:last-child {
							flex-direction: column !important;
							align-items: flex-start !important;
							gap: 6px;
						
							& > .count {
								font-size: 16px;
							}
						}
					}
				}
			}
		}
    
    	width: 100%;
    	max-width: 1400px;
    
    	display: flex;
    	flex-direction: column;
    	align-items: flex-end;
    	gap: 16px;
    	
    	& > .type-container {
    		& > button {
   				& > i {
   					font-size: 35px;
   				}
   			}
    	
    		& > .types {
    			flex-direction: row;
    			gap: 6px;
    			
    			& > div {
    				max-width: 134px;
                    max-height: 78px;
                    min-width: 134px;
                    min-height: 78px;
                    
                    border-radius: 16px;
                    
                    padding: 2px;
                    
                    box-shadow: 4px 4px 20px #646464;
                    
                    aspect-ratio: auto;
				    
				    & > div {
				    	gap: 0;
				    
				    	& > img {
				    		height: 22px;
				    	}
				    	
				    	& > div {
				    		& > h3 {
				    			font-size: 16px;
				    		}
				    	}
				    }
    			}
    		}
    	}
    	
    	& > .table-header {
			& > div {
				& > div:last-child {
					& > .count {
						white-space: nowrap;
					}
					
					& > .search-container {
						display: flex;
                        flex-direction: row;
                        align-items: center;
                        gap: 8px;
                        
                        & > select,
                        & > input,
                        & > button {
                        	height: 38px;
                        }
                        
                        & > select {
                        	font-size: 18px;
                        }
                        
                        & > input {
                        	font-size: 18px;
                        }
                        
                        & > button {
                        	width: max-content;
                        	
                        	display: flex;
                        	flex-direction: row;
                        	align-items: center;
                        	gap: 4px;
                        
                        	& > i,
                        	& > span {
                        		font-size: 18px;
                        	}
                        	
                        	& > span {
                        		white-space: nowrap;
                        	}
                        }
					}
				}
			}
		}
    }
    
    .prev-button {
    	border: 0;
    	border-radius: 6px;
    
    	padding: 6px 8px;
    
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    	gap: 8px;
    	
    	background-color: rgba(0, 0, 0, 0.5);
    	
    	& > i, & > span {
    		color: #fff;
    	
    		font-size: 18px;
    		
    		white-space: nowrap;
    	}
    }
    .home-btn{
    border: 0;
    	border-radius: 6px;
    
    	padding: 6px 8px;
    
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    	gap: 8px;
    	
    	background-color: rgba(0, 0, 0, 0.5);
    	
    	& > i, & > span {
    		color: #fff;
    	
    		font-size: 18px;
    		
    		white-space: nowrap;
    	}
    }
    
       .list-btn {
    	border: 0;
    	border-radius: 6px;
    
    	padding: 6px 8px;
    
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    	gap: 8px;
    	
    	background-color: rgba(0, 0, 0, 0.5);
    	
    	& > i, & > span {
    		color: #fff;
    	
    		font-size: 18px;
    		
    		white-space: nowrap;
    	}
    }
    
    .type-container div {
    	display: flex;
		flex-direction: column;
		align-items: center;
    }
    
    .type-container {
    	width: 100%;
    	
    	display: flex;
    	flex-direction: row;
    	align-items: center;
		justify-content: center;
    	gap: 2%;
    	
    	/* & > .move-left {
    		& > i {
    			color: rgba(255, 255, 255, 0.4);
    		}
    	} */
    	
    	& > button {
    		border: 0;
    	
    		background-color: rgba(0, 0, 0, 0);
    	
    		& > i {
    			color: #fff;
    		
    			font-size: 100px;
    			font-weight: 700;
    		}
    	}
    	
    	& > .types {
    		max-width: 80%;
    	
    		display: flex;
	    	align-items: center;
	    	/* justify-content: center; */
	    	gap: 4%;
	    	
	    	overflow: auto;
	    		
    		scrollbar-width: none;
	    	
	    	/* mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); */
	    	/* mask-image: linear-gradient(to right, transparent 0%, black 0%, black 85%, transparent 100%); */
    	
    		& > div {
	    		width: 100%;
   				height: 100%;
	    		max-width: 337px;
				max-height: 337px;
				min-width: 337px;
				min-height: 337px;
	    		
	    		border: 1px solid rgba(255, 255, 255, 0.64);
	    		border-radius: 170px;
	    		
	    		justify-content: center;
	    		
	    		position: relative;
	    		overflow: hidden;
	    		
	    		box-shadow: 4px 4px 20px #646464, inset 6px 6px 10px rgba(255, 255, 255, 0.25);
	    		
	    		backdrop-filter: blur(12px);
	    		
	    		cursor: pointer;
	    		
	    		aspect-ratio: 1;
	    		
	    		&:after {
	    			width: 200%;
	    			height: 200%;
	    		
    				filter: blur(18px);
				  
					position: absolute;
					left: -30px;
					top: 0;
					z-index: -1;
					
					-webkit-transition: all .35s ease-in-out;
					transition: all .35s ease-in-out;
					-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
					transform: translateX(-98%) translateY(-25%) rotate(0deg);
	    		}
	    		
	    		&:hover:after {
				  -webkit-transform: translateX(-9%) translateY(-25%) rotate(0deg);
				  transform: translateX(-9%) translateY(-25%) rotate(0deg);
				}
	    	
	    		& > div {
	    			gap: 24px;
	    		
	    			h3, p,
	    			& > span {
	    				color: #fff;
	    			}
	    			
	    			& > img {
	    				height: 88px;
	    				
	    				filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(12deg) brightness(117%) contrast(103%);
	    			}
	    		
	    			& > div {
	    				gap: 10px;
	    			
	    				& > h3,
	    				& > p {
	    					font-size: 32px;
	    				}
	    			
	    				& > h3 {
	    					font-weight: 700;
	    				}
	    			}
	
					& > span {
						font-size: 20px;
					}
	    		}
	    		
	    		/* & > button {
	    		
	    		} */
	    	}
	    	
	    	& > .mv1 {
	    		background: linear-gradient(162.1deg, rgba(255, 255, 255, 0.4) 54.12%, rgba(255, 0, 162, 0.4) 113.82%);
	    		
	    		&:after {
    			  content: "";
				  
				  background: linear-gradient(164.09deg, rgba(255, 187, 0, 0.4) 16.99%, rgba(255, 0, 161, 0.4) 88.3%);
	    		}
	    		
	    		&:hover {
					border: 1px solid rgba(255, 175, 226, 0.64);
				}
	    	}
	    	
	    	& > .mv2 {
	    		background: linear-gradient(162.1deg, rgba(255, 255, 255, 0.4) 54.12%, rgba(255, 204, 0, 0.3) 113.82%);
	    		
	    		&:after {
    			  content: "";
				  
				  background: linear-gradient(164.1deg, rgba(255, 119, 0, 0.4) 38.26%, rgba(255, 204, 0, 0.4) 82.19%);
	    		}
	    		
	    		&:hover {
					/* border: 1px solid rgba(255, 204, 0, 0.64); */
					border: 1px solid rgba(255, 210, 28, 0.64);
				}
	    	}
	    	
	    	& > .mv3 {
	    		background: linear-gradient(162.1deg, rgba(255, 255, 255, 0.4) 54.12%, rgba(178, 255, 0, 0.4) 113.82%);
	    		
	    		&:after {
				  content: "";
				  
				  background: linear-gradient(162.94deg, rgba(0, 217, 181, 0.4) 38.34%, rgba(179, 255, 0, 0.4) 90.82%);
				}
				
				&:hover {
					border: 1px solid rgba(202, 254, 84, 0.64);
				}
	    	}
	    	
	    	& > .mv4 {
	    		background: linear-gradient(162.1deg, rgba(255, 255, 255, 0.4) 54.12%, rgba(25, 132, 255, 0.4) 113.82%);
	    		
	    		&:after {
				  content: "";
				  
				  background: linear-gradient(162.94deg, rgba(25, 255, 255, 0.4) 38.34%, rgba(25, 132, 255, 0.4) 90.82%);
				}
				
				&:hover {
					border: 1px solid rgba(172, 255, 255, 0.64);
				}
	    	}
	    	
	    	& > .mv5 {
	    		background: linear-gradient(162.1deg, rgba(255, 255, 255, 0.4) 54.12%, rgba(0, 255, 204, 0.4) 113.82%);
	    		
	    		&:after {
				  content: "";
				  
				  background: linear-gradient(167.43deg, rgba(255, 196, 0, 0.4) 40.39%, rgba(0, 255, 204, 0.4) 89.22%);
				}
				
				&:hover {
					border: 1px solid rgba(200, 255, 122, 1);
				}
	    	}
	    	
	    	& > .mv6 {
	    		background: linear-gradient(162.1deg, rgba(255, 255, 255, 0.4) 54.12%, rgba(62, 10, 255, 0.4) 113.82%);
	    		
	    		&:after {
				  content: "";
				  
				  background: linear-gradient(167.04deg, rgba(255, 247, 17, 0.4) 20.61%, rgba(125, 61, 255, 0.4) 82.97%);
				}
				
				&:hover {
					border: 1px solid rgba(144, 89, 255, 0.64);
				}
	    	}
	    	
	    	& > .mv7 {
	    		background: linear-gradient(165.22deg, rgba(255, 255, 255, 0.4) 50%, rgba(255, 168, 169, 0.4) 89.95%);
	    		
	    		&:after {
				  content: "";
				  
				  background: linear-gradient(172.16deg, rgba(105, 100, 255, 0.4) 29.15%, rgba(255, 168, 169, 0.4) 95.68%);
				}
				
				&:hover {
					border: 1px solid rgba(105, 100, 255, 0.64);
				}
	    	}
	    }
   	}
}

.public-data-sharing-index-container {
    & > .background {
    	@media screen and (min-width: 600px) {
    		gap: 48px;
    	
    		& > .title {
    			& > h3 {
    				font-size: 56px;
    			}
    		}
    	}
    	
    	@media screen and (max-width: 600px) {
    		gap: 32px;
    	
    		& > .title {
    			& > h3 {
    				font-size: 32px;
    			}
    		}
    		
    		.type-container {
    			& > button {
    				& > i {
    					font-size: 35px;
    				}
    			}
    		
    			.types {
    				gap: 10px !important;
    		
	    			& > div {
	    				width: 220px !important;
	   					height: 220px !important;
	   					max-width: 220px !important;
                        max-height: 220px !important;
                        min-width: 220px !important;
                        min-height: 220px !important;
	   					
	   					img {
	   						width: 36px !important;
	   						height: 36px !important;
	   					}
	   					
	   					h3,
	    				p {
	    					font-size: 24px !important;
	    				}
	    				
	    				span {
	    					font-size: 18px !important;
	    				}
	    			}
    			}
    		}
    	}
    
    	margin: 0;
    	
    	padding: 0;
    	
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    
	    & > .title {
	    	& > h3 {
	    		color: #fff;
	    		
	    		font-weight: 600;
	    	}
	    }
	    
   		.type-container {
   			.types {
   				flex-direction: row;
   			}
   		}
    }
}

.public-data-sharing-list-container {
	h3,
	span {
		color: #fff;
	}
	
	& > .background {
		/* @media screen and (max-width: 560px) {
    		min-width: 550px;
    	} */
    	
        /* justify-content: flex-start; */
        align-items: flex-start;
	
		gap: 24px;
		
		& > .list-container {
			@media screen and (max-height: 1000px) {
				padding: 4% 3% 3% 3%;
			}
		
			@media screen and (min-width: 625px) {
				padding: 3%;
			}
			
			@media screen and (max-width: 625px) {
				padding: 34px 2% 2% 2%;
			}
		
			min-width: 100vw;
			min-height: 100vh;
		
			display: flex;
			flex-direction: column;
		   	align-items: center;
		 	justify-content: center;
			gap: 14px;
		
			& > .public-data-sharing-table {
				width: 100%;
				max-width: 1400px;
			
				display: flex;
				flex-direction: column;
				gap: 14px;
			
				& > header {
					
				}
				
				& > #listform {
					@media screen and (min-width: 1250px) {
						.responsive {
							display: none;
						}
					}
					
					@media screen and (max-width: 1250px) {
						thead {
							display: none;
						}
						
						tbody {
							height: 100%;
	    					max-height: 542px;
						
							display: flex;
						    flex-direction: column;
						    overflow: hidden auto;
						}
						
						tr {
							height: max-content !important;
						
							display: flex;
							flex-direction: column;
							
							&:not(:last-child) {
								border-bottom: 1px solid #000;
							}
						
							td {
								width: 100% !important;
								height: max-content !important;
								
								&:not(:last-child) {
									border-bottom: 1px solid rgba(0, 0, 0, 0.1);
								}
								
								padding: 0;
								
								display: flex;
	                            flex-direction: row;
	                            justify-content: space-between;
	                            
	                            .responsive {
									width: 120px;
								    
								    padding: 8px;
								
									display: flex;
									
									color: #fff;
								    background-color: rgba(0, 0, 0, 0.5);
									
									font-weight: 600;
								}
								
								.value {
									width: calc(100% - 120px);
		
									padding: 8px;
		
								    display: flex;
								    align-items: center;
								    justify-content: flex-start;
								}
							}
						}
					}
					
					@media screen and (min-width: 625px) {
						& > .table-header {
							& > div {
								& > div {
									&:first-child {
										& > div {
											gap: 16px;
								
											& > img {
												width: 32px;
												height: 32px;
											}
										
											& > div {
												flex-direction: row;
												align-items: center;
												gap: 16px;
											
												& > h3,
												& > span {
													font-size: 32px;
												}
											}
										}
									}
									
									&:last-child {
										flex-direction: row;
										align-items: center;
										justify-content: space-between;
									
										& > .count {
											font-size: 20px;
										}
									}
								}
							}
						}
					}
					
					@media screen and (max-width: 625px) {
						& > .table-header {
							& > div {
								& > div {
									&:first-child {
										& > div {
											gap: 4px;
								
											& > img {
												width: 24px;
												height: 24px;
											}
										
											& > div {
												flex-direction: column;
												align-items: flex-start;
												gap: 4px;
											
												& > h3,
												& > span {
													font-size: 24px;
												}
											}
										}
									}
									
									&:last-child {
										flex-direction: column;
										align-items: flex-start;
                                    	gap: 6px;
									
										& > .count {
											font-size: 16px;
										}
									}
								}
							}
						}
					}
				
					& > .table-header {
						width: 100%;
						max-width: 1400px;
					
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						justify-content: space-between;
						gap: 8px;
						
						& > div {
							width: 100%;
						
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							gap: 8px;
						
							& > div {
								display: flex;
								flex-direction: row;
								align-items: center;
							
								&:first-child {
									width: 100%;
									
									display: flex;
									flex-direction: row;
									align-items: center;
									justify-content: space-between;
								
									& > div {
										display: flex;
										flex-direction: row;
										align-items: center;
									
										& > img {
											width: 32px;
											height: 32px;
											
											filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(12deg) brightness(117%) contrast(103%);
										}
										
										& > div {
											display: flex;
										
											& > h3 {
												font-weight: 700;
											}
										}
									}
								}
								
								&:last-child {
									width: 100%;
									max-width: 1400px;
								
									display: flex;
									
									& > .search-container {
										height: 35px;
									
										display: flex;
										flex-direction: row;
										align-items: center;
										gap: 8px;
										
										& > select,
										& > input,
										& > button {
											height: 100%;
										}
										
										& > button {
											white-space: nowrap;
										}
									}
								}
							}
						}
					}
				
					width: 100%;
					
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 16px;
				
					& > table {
						@media screen and (min-width: 1250px) {
							min-height: 608px;
						}
						
						@media screen and (max-width: 1250px) {
						
						}
					
						width: 100%;
						max-width: 1400px;
					
						display: flex;
					    flex-direction: column;
					    gap: 12px;
					    
					    .empty-tr {
					    	height: 43px !important;
					    	
                            border: 0;
					    
					    	justify-content: center;
					    	
					    	&:hover {
					    		background-color: transparent;
					    	}
					    	
					    	& > td {
					    		justify-content: center;
					    	
						    	font-size: 28px;
						    	font-weight: 600;
						    	
						    	span {
						    		color: #000;
						    	}
					    	}
					    }
					
						tr {
							height: 54px;
						}
					
						th, td {
							border: 0;
						
							color: #000;
							
							font-size: 20px;
						}
						
						thead, tbody {
							border-radius: 10px;
						
							backdrop-filter: blur(12px);
							
							box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.3);
						
							tr {
								display: flex;
	    						align-items: center;
							}
						}
						
						thead {
							background-color: rgba(0, 0, 0, 0.5);
							
							th {
								color: #fff;
							}
						}
						
						tbody {
							border: 1px solid rgba(255, 255, 255, 0.56);
						
							/* rgba(255, 255, 255, 0.8) */
							background-color: #fff;
						
							& > tr {
								&:hover {
									background-color: rgba(0, 0, 0, 0.16);
									
									cursor: pointer;
								}
								
								td {
									font-weight: 300;
								}
								
								& > .mv {
									/* &:hover {
										text-decoration: underline;
										text-underline-offset: 6px;
										text-decoration-thickness: 1px;
										
										cursor: pointer;
									} */
								}
							}
						}
					}
						
					& > .public-data-sharing-pagination {
						& > .pagination {
							@media screen and (min-width: 600px) {
								gap: 24px;
							
								.page-link {
									width: 40px;
									height: 40px;
								}
							}
						
							@media screen and (max-width: 600px) {
								gap: 8px;
								
								.page-link {
									width: 30px;
									height: 30px;
									
									font-size: 20px !important;
								}
							}
						
							margin: 0;
							
							flex-wrap: wrap;
							
							.page-link {
								border-radius: 50%;
								
								padding: 0;
								
								display: flex;
							    align-items: center;
							    justify-content: center;
								
								color: #fff;
								
								cursor: pointer;
							}
						
							& > .btn-paging-first,
							& > .btn-paging-end,
							& > .btn-paging-prev,
							& > .btn-paging-next {
								& > .page-link {
									border: 0;
								
									background: transparent;
								
									font-size: 32px;
								}
							}
							
							& > .btn-paging {
								& > .page-link {
									border: 0;
								
									color: #fff;
									background: rgba(0, 0, 0, 0.4);
								
									font-size: 24px;
								}
							}
							
							& > .active {
								& > .page-link {
									border: 0;
									
									color: #000;
									background: rgba(255, 255, 255, 0.8);
								}
							}
						}
					}
				}
			}
		}
	}
}

.public-data-sharing-view-container {
	& > .background {
		align-items: flex-start;
	
		& > .container {
			@media screen and (min-width: 940px) {
				.info {
					flex-direction: row;
					align-items: center;
				}
			}
			
			@media screen and (max-width: 940px) {
				.info {
					height: max-content !important;
				
					flex-direction: column;
					
					& > section {
						&:not(:last-child) {
							border-bottom: 1px solid rgba(255, 255, 255, 0.5);
						}
						
						.value {
							justify-content: flex-start !important;
						}
					}
				}
			}
		
			@media screen and (min-width: 625px) {
				padding: 3%;
			}
			
			@media screen and (max-width: 625px) {
				padding: 34px 2% 2% 2%;
			}
	
			min-width: 100vw;
			min-height: 100vh;
		
			display: flex;
			flex-direction: column;
		   	align-items: center;
		 	justify-content: center;
			gap: 14px;
			
			& > header > #fileform,
			& > .content {
				border-radius: 10px;
			
				/* rgba(255, 255, 255, 0.8) */
				background-color: #fff;
				backdrop-filter: blur(12px);
				
				box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.3), inset 6px 6px 10px rgba(255, 255, 255, 0.25);
			}
			
			& > header > .info,
			& > #listform {
				border-radius: 10px;
			
				background-color: rgba(0, 0, 0, 0.5);
				backdrop-filter: blur(12px);
				
				box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.3);
			}
			
			& > div {
				& > .path {
					@media screen and (min-width: 625px) {
						.current {
							font-size: 32px;
						}
						
						& > span, & > i {
							font-size: 24px;
						}
					}
					
					@media screen and (max-width: 625px) {
						.current {
							font-size: 24px;
						}
						
						& > span, & > i {
							font-size: 18px;
						}
					}
				
					width: 100%;
					max-width: 1400px;
				
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
				
					& > div {
						display: flex;
						flex-direction: row;
						
						& > .current {
							color: #fff;
						}
					}
					
					& > span {
						color: #fff;
						
						white-space: nowrap;
					}
				}
			}
		
			& > header {
				width: 100%;
				max-width: 1400px;
			
				display: flex;
				flex-direction: column;
				gap: 14px;
			
				& > .info {
					height: 48px;
				
					padding: 8px 0;
				
					display: flex;
				
					& > section {
						width: 100%;
					
						display: flex;
					    flex-direction: row;
					    align-items: center;
					    
					    & > .label,
					    & > .value {
					    	padding: 8px 16px;
					    	
					    	display: flex;
					    	align-items: center;
					    	justify-content: center;
					    	
					    	color: #fff;
					    	
					    	font-size: 16px;
					    }
					    
					    & > .label {
					    	width: 25%;
					    
					    	font-weight: 600;
					    }
					    
					    & > .value {
					    	width: 75%;
					    }
					    
					    &:not(:last-child) {
					    	& > .value {
						    	border-left: 1px solid rgba(255, 255, 255, 0.5);
						    	border-right: 1px solid rgba(255, 255, 255, 0.5);
						    }
					    }
					    
					    &:last-child {
					    	& > .value {
					    		border-left: 1px solid rgba(255, 255, 255, 0.5);
					    	}
					    }
					}
				}
				
				& > #fileform {
					display: flex;
					flex-direction: column;
					
					& > .file-open-close-button {
						height: 48px;
						
						border: 0;
						
						padding: 8px 16px;
						
						background-color: rgba(0, 0, 0, 0);
						
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 16px;
						
						cursor: pointer;
						
						&:hover {
							& > div {
								
							}
						
							& > p {
								text-decoration: underline;
								text-underline-offset: 5px;
							}
						}
						
						& > div {
							width: 20px;
							height: 20px;
						
							border: 1px solid #000;
						
							padding: 2px;
						
							display: flex;
							align-items: center;
							justify-content: center;
						}
						
						& > p {
							margin: 0;
							
							font-size: 16px;
						}
					}
					
					& > .files-container {
							border-top: 1px solid #000;
					
						display: flex;
						flex-direction: column;
						
						& > div {
							height: 48px;
						
							padding: 8px 16px;
						
							display: flex;
							flex-direction: row;
							align-items: center;
	                        justify-content: space-between;
	                        
	                        &:hover {
	                        	& > div {
	                        		& > button {
	                        			text-decoration: underline;
										text-underline-offset: 5px;
										
										cursor: pointer;
	                        		}
	                        	}
	                        }
	                        
	                        &:not(:last-child) {
	                        	border-bottom: 1px solid #000;
	                        }
	                         
	                        & > div {
	                        	display: flex;
								flex-direction: row;
								gap: 16px;
								
								& > i {
									font-size: 18px;
								}
								
								& > button {
									margin: 0;
								
									border: 0;
									
									padding: 0;
									
									background-color: rgba(0, 0, 0, 0);
								
									font-size: 16px;
								}
	                        }
	                        
	                        & > button {
	                        	margin: 0;
	                        	
	                        	border: 0;
	                        	
	                        	padding: 0;
	                        
	                        	& > i {
	                        		font-size: 16px;
	                        	}
	                        }
						}
					}
				}
				
				& > .list-type-buttons {
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 8px;
					
			    	& > button {
			    		border: 0;
				    	border-radius: 6px;
				    
				    	padding: 6px 8px;
				    
				    	display: flex;
				    	flex-direction: row;
				    	align-items: center;
				    	gap: 8px;
				    	
				    	background-color: rgba(255, 255, 255, 0.8);
				    	
				    	& > i, & > span {
				    		color: #000;
				    	
				    		font-size: 16px;
				    	}
			    	}
				}
			}
			
			& > .content {
				width: 100%;
				height: max-content;
				max-width: 1400px;
			
				padding: 16px;
			}
			
			& > #listform {
				width: 100%;
				max-width: 1400px;
				
				& > table {
					& > tbody {
						& > tr {
							height: 48px;
						
							padding: 8px 0;
							
							display: flex;
							flex-direction: row;
							align-items: center;
							
							&:hover {
								& > .value {
									text-decoration: underline;
									text-underline-offset: 5px;
								}
							}
							
							&:first-child {
								border-bottom: 1px solid rgba(255, 255, 255, 0.5);
							}
						
							& > td {
								border: 0;
								
								padding: 8px 16px;
							
								color: #fff;
							
								font-size: 16px;
							}
							
							& > .label {
								width: 20%;
							
								border-right: 1px solid rgba(255, 255, 255, 0.5);
							
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: center;
								gap: 8px;
							
								white-space: nowrap;
							}
							
							& > .value {
								width: 80%;
							}
							
						}
					}
				}
			}
		}
	}
}