@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--bg-color-light:rgb(52,52,63);
	--bg-color-mid:rgb(44,44,53);
	--bg-color-dark:rgb(34,34,43);
	--bg-header-color:rgb(27,45,59);
	--button-hover-color:rgb(56,56,56);
	--tab-bg-color:rgb(0,0,0);
	--font-color-1:rgb(230,230,230);
	--font-color-2:rgb(206,206,206);
	--font-color-3:yellow;
	--font-color-blue:rgb(0, 164, 215);
	--active-font-color-1:yellow;
	--active-link-color:yellow;
	--border-color-1:rgba(255,255,255,0.05);
	--border-color-2:rgba(255,255,255,0.125);
	--border-color-4:rgba(0,0,0,0.25);
	--border-color-5:rgba(0,0,0,0.5);
	--border-radius-1:5px;
	--max-width-1:90%;
	--team-color-none:rgb(20,20,20);
	--team-color-red:rgb(65,22,22);
	--team-color-blue:rgb(27,51,85);
	--team-color-green:rgb(22,43,22);
	--team-color-yellow:rgb(63,63,9);
	--purple:rgb(55,0,110);
	--margin-1:25px;
	--margin-2:10px;
	--margin-3:5px;
	--tiny-font-size:10px;
	--font-size-small:12px;
	--padding-1:10px;
	--padding-2:5px;
	--padding-3:3px;
	--font-size-1:13px;
	--line-height-1:1.6;
	--font-size-2:16px;
	--font-size-3:18px;
	--font-size-4:13px;
	--font-size-5:12px;
	--font-size-6:14px;
	--transition-all:all 0.5s;
	--transition-1:background-color 0.5s;
	--width-1:90%;
	--width-2:75%;
	--width-3:66%;
	--width-4:50%;
	--max-table-width-1:1500px;
	--max-table-width-2:1200px;
	--max-table-width-3:1000px;
	--max-table-width-4:700px;
	--rich-box-width:325px;
	--box-shadow-1:1px 1px 1px 1px rgba(0,0,0,0.25);
}

main{
    margin-top:var(--margin-1);
}

*{
	margin:0;
	padding:0;
	font-family: "Montserrat", sans-serif;
	color:var(--font-color-1);
}

.team-none{
	background-color:var(--team-color-none);
}

.team-red{
	background-color:var(--team-color-red);
}

.blue-font{
	color:var(--font-color-blue);
}

.red-font{
	color:red;
}

.green-font{
	color:rgb(44,119,44);
}

.yellow-font{
	color:yellow;
}

.team-red-font{
	color:rgb(217,0,0);
}

.team-blue-font{
	color:var(--font-color-blue);
}

.team-green-font{
	color:rgb(44,119,44);
}

.team-yellow-font{
	color:yellow;
}

.font-color-1{
	color:var(--font-color-1);
}


.team-blue{
	background-color:var(--team-color-blue);
}

.team-green{
	background-color:var(--team-color-green);
}

.team-yellow{
	background-color:var(--team-color-yellow);
}
.monospace{
	font-family: monospace;
}

body{ 
	min-height: 100vh; 
	display: grid;
	grid-template-rows:auto 1fr auto;
	background-color:var(--bg-color-dark);
}

nav{
    background-color:var(--bg-color-mid);
	border-bottom: 1px solid var(--border-color-1);
    text-align:center;
    font-size:14px;
}

nav a{
    display:inline-block;
    padding:8px 10px;
	font-weight:500;
	transition: color 0.5s;
	border-bottom:2px solid transparent;
	
}

nav a:hover{
    border-bottom:2px solid rgb(122,122,0);
    color:rgb(188,188,0);
}

.nav-active{
    color:var(--active-link-color);
    border-bottom:2px solid yellow;
}

footer{ 
	padding:var(--padding-1);
	background:var(--bg-color-mid); 
	color:var(--font-color-2);
	text-align:center;
	font-size:var(--font-size-small);
	line-height:var(--line-height-1);
	font-weight:500;
	border-top:1px solid var(--border-color-1);
}

a{
	text-decoration: none;
}

.center{
	margin-left:auto;
	margin-right:auto;
}

.padding-1{
	padding:var(--padding-1);
}

.padding-2{
	padding:var(--padding-2);
}

.padding-top{
	height:75px;
}

.text-left{
	text-align:left;
}

.text-center{
	text-align:center;
}

.bold{
	font-weight:bold;
}


.form{
	text-align: center;
	margin-bottom:var(--margin-2);
	padding:var(--padding-1);
	font-size:var(--font-size-1);
	font-weight:500;
}

.form-row{
	display:grid;
	grid-template-columns: 1fr 1fr;
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:var(--margin-3);
}

label, .form-label, .form-read-only{
	
	font-size:var(--font-size-1);
	line-height: var(--line-height-1);
	padding:var(--padding-2);
	font-weight:500;
	text-align:right;
}

.form-label{
	text-align: right;
}
.form-read-only{
	text-align: left;
}

.form-info{
	text-align: center;
	font-size:var(--font-size-1);
	margin-bottom:var(--margin-1);
}

.textbox{
	font-size:var(--font-size-1);
	background-color:var(--bg-color-mid);
	border:1px solid var(--border-color-1);
	padding:3px;
}


.submit-button{
	display:inline-block;
	background-color: var(--bg-color-mid);
	padding:var(--padding-1);
	
	border:1px solid var(--border-color-5);
	font-size:var(--font-size-3);
	transition:var(--transition-all);
}

.warning-button{
	display:inline-block;
	background-color: var(--team-color-red);
	padding:var(--padding-1);
	
	border:1px solid var(--border-color-1);
	font-size:var(--font-size-3);
	transition:var(--transition-all);
}

.submit-button:hover{
	background-color: var(--button-hover-color);
	cursor: pointer;
}

.warning-button:hover{
	cursor: pointer;
}

.margin-bottom-1{
	margin-bottom:var(--margin-1);
}

.margin-bottom-2{
	margin-bottom:var(--margin-2);
}

.margin-top-1{
	margin-top:var(--margin-1);
}

.margin-top-2{
	margin-top:var(--margin-2);
}

.p-bottom-1{
	padding-bottom: var(--padding-1);
}

table{
    border-collapse: collapse;  
    margin-left:auto;
    margin-right:auto;
    font-size:14px;
    text-align: center;
    margin-bottom:var(--margin-1);
	background-color: var(--bg-color-mid);
	box-shadow:var(--box-shadow-1);
	border:1px solid var(--border-color-1);
}


th{
    padding:var(--padding-1) var(--padding-3);
	font-weight:500;
	font-size:var(--font-size-4);
	background-color:var(--bg-header-color);
}

th:hover{
    user-select: none;
}

.no-user-select{
	user-select: none;
}

td{
	padding:5px 5px;
	font-size:var(--font-size-5);
	line-height:var(--line-height-1);
	font-weight:500;
}

td a{
	color:inherit;
}

th a{
	color:yellow;
	color:inherit;
}

tr:nth-child(even){
	background-color:var(--bg-color-mid);
}

tr:nth-child(odd){
	background-color:var(--bg-color-light);
}

tr:hover{
	background-color:rgb(64,64,64);
}

.player-name-td{
	min-width:150px;
	width:150px;
	text-align:left;
	text-wrap: nowrap;
	overflow:hidden;
}

.t-width-1{
	width:var(--width-1);
	max-width:var(--max-table-width-1);
}

.t-width-2{
	width:var(--width-2);
	max-width:var(--max-table-width-2);
}

.t-width-3{
	width:var(--width-3);
	max-width:var(--max-table-width-3);
}

.t-width-4{
	width:var(--width-4);
	max-width:var(--max-table-width-4);
}

.duo{
    display:grid;
    grid-template-columns: 1fr 1fr;   
}

.trio{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr; 
}

.quad{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.hidden{
	display:none;
}

.hover:hover{
	cursor: pointer;
}

.font-small{
	font-size:var(--font-size-small);
}

.tiny-font{
	font-size:var(--tiny-font-size);
}

.date, .playtime{
	font-size:var(--font-size-small);
	color:var(--font-color-2);
}

.date a{
	color:var(--font-color-2);
}

select{
	background-color:var(--bg-color-mid);
	font-size:var(--font-size-1);
	border:1px solid var(--border-color-1);
	font-weight:500;
}

option{
	font-weight: 500;
}


.true, .false{
	padding:var(--padding-2);
	font-size:var(--font-size-2);
	border:1px solid var(--border-color-5);
}

.warning, .error, .pass{
	text-align:center;
	padding:var(--padding-1);
	margin-top:var(--margin-1);
	margin-bottom:var(--margin-1);
	font-size:var(--font-size-1);
}

.error{
	background-color:var(--team-color-red);
}

.warning{
	background-color:var(--team-color-yellow);
}

.pass{
	background-color:var(--team-color-green);
}

.warning-title, .error-title, .pass-title{
	margin-bottom:var(--margin-1);
	font-weight:500;
}

.error-text{
	font-size:var(--font-size-1)
}

.ordinal{
	font-size:var(--font-size-small);
	color:var(--font-color-2);
}

.info{
	text-align: center;
	padding-left:20%;
	padding-right:20%;
	padding:var(--padding-1) 20%;
	margin-bottom:var(--margin-2);
	font-size:var(--font-size-1);
	line-height: var(--line-height-1);
	font-weight:500;
	background-color: var(--bg-color-mid);
	border:1px solid var(--border-color-1);
}

.info-basic{
	text-align: center;
	padding:var(--padding-1) 20%;
	font-size:var(--font-size-1);
	line-height: var(--line-height-1);
}


.info-text{
	max-width:1000px;
	text-align: left;
	margin-left:auto;
	margin-right: auto;
}

.dull{
    color:var(--font-color-2);
}

.match-sshot{
	max-width:66%;
}
.social-media-icon{
	width:64px;
	height:64px;
	padding:5px;
	margin-left:10px;
	margin-bottom:10px;
	transition:var(--transition-all);
}

.social-media-icon:hover{
	background-color:rgba(255,255,255,0.2);
	cursor: pointer;
}

.perma-links{
	margin-bottom:var(--margin-1);
}

.fav, .perma-link{
	display:inline-block;
	margin-top: var(--margin-3);
	border:1px solid var(--border-color-5);
	border-radius: var(--border-radius-1);
	padding:var(--padding-2);
	font-size:var(--font-size-5);
	font-weight:500;
}

.fav:hover, .perma-link:hover{
	cursor: pointer;
	user-select: none;
	color:yellow;
}

.fav-add, .perma-link{
	background-color:var(--team-color-green);
}

.perma-link{
	margin-left:var(--margin-2);
}

.fav-del{
	background-color:var(--team-color-red);
}


.map-sshot{
	margin-left:auto;
	margin-right:auto;
	max-width:33vw;
	overflow:hidden;
	margin-bottom:var(--margin-2);
}

.map-sshot img{
	display: block;
	width: 100%;
	height: auto;
}

.tabs-wrapper{
	background-color:var(--bg-color-mid);
	text-align:center;
	margin-bottom:var(--margin-2);
	font-size: var(--font-size-small);
	border-top: 1px solid var(--border-color-1);
	border-bottom: 1px solid var(--border-color-1);
}

.tab{
    display:inline-block;
    padding:var(--padding-1) var(--padding-1);
    user-select: none;
	border-bottom:2px solid var(--border-color-4);
	margin-bottom:-2px;
	font-weight:500;
	transition: var(--transition-all);
}

.tab:hover{
    cursor:pointer;
    user-select:none;
    color:yellow;
	background-color:var(--tab-bg-color);
}


.tab-selected{
	color:yellow;
	border-bottom:2px solid yellow;
	background-color:var(--tab-bg-color);
}

.white{
	color:white;
}

.rich-outter{
	margin-top:var(--margin-2);
	margin-bottom:var(--margin-1);
	max-width:var(--max-width-1);
	margin-left:auto;
	margin-right:auto;
	display:grid;
	grid-template-columns: repeat(auto-fit, var(--rich-box-width));
	justify-content: center;
	column-gap: 10px;
	row-gap: 10px;
	max-width:80%;
}

.rich-wrapper{
	background-color:var(--bg-color-mid);
	width:var(--rich-box-width);
    border:1px solid var(--border-color-1);
    overflow: hidden;
    white-space: nowrap;
	font-size:var(--font-size-4);
	text-align: center;
	box-shadow: var(--box-shadow-1);
	transition:var(--transition-all);
}

.rich-wrapper:hover{
	background-color:var(--bg-color-dark);
}


.rich-title{
	color:var(--font-color-blue);
	padding:var(--padding-2);
    text-overflow: ellipsis;
	font-weight:600;
}

.rich-image{
	display:block;
	width:var(--rich-box-width);
	height:182px;
}

.rich-info{
    font-size:var(--font-size-5);
	line-height: var(--line-height-1);
    text-overflow: ellipsis;
	padding:5px;
	font-weight:500;
}

.rich-info b{
	color:var(--font-color-blue);
}
.admin-textarea-wrapper{
	width:50%;
	margin-left:auto;
	margin-right:auto;
	display:inline-block;
	color:white;
	padding:5px;
	
}

.admin-textarea-wrapper textarea{
	display:block;
	width:99%;
	padding:5px;
	font-size:var(--font-size-1);
	background-color:var(--bg-color-mid);
	border:1px solid var(--border-color-1);
	
	min-height:150px;
}

.welcome-message{
	text-align:center;
	margin-bottom:var(--margin-1);
	font-size:var(--font-size-1);
}

.welcome-message-link{
	text-decoration: underline;
	color:yellow;
}

.button{
	border:1px solid var(--border-color-1);
	color:white;
	padding:var(--padding-2);
}

.button:hover{
	cursor: pointer;
}


.small-button{
	display:inline-block;
	background-color:var(--bg-color-light);
	
	font-size:var(--font-size-small);
	padding:var(--padding-2);
	border:1px solid var(--border-color-5);
	user-select: none;
	transition: var(--transition-all)
}


.small-button:hover{
	cursor: pointer;
	background-color:var(--button-hover-color);
	
}

.previous-next-buttons{
	display:flex;
	justify-content: center;
	font-size:var(--tiny-font-size);
	height:30px;
	line-height: 30px;
	flex-wrap: wrap;
	column-gap: var(--margin-2);
	margin-bottom:var(--margin-2);
	user-select: none;
	
	
}

.previous-next-buttons button{
	flex: 0 1 auto;
	font-weight:500;

}

.previous-next-buttons-info{
	flex: 0 1 auto;
	line-height:30px;
	text-align:center;
	
}

.ctf-cap{
	text-align: center;
	
	background-color:var(--bg-color-mid);
	margin-bottom:var(--margin-1);
	max-width:var(--max-table-width-4);
	margin-left:auto;
	margin-right:auto;
	font-weight:500;
	border:1px solid var(--border-color-5);
	box-shadow: var(--box-shadow-1);
}

.ctf-cap-team-scores{
	font-size:var(--font-size-1);

}

.ctf-cap-team-scores div{
	padding:5px;
}

.ctf-cap-buttons{
	margin-bottom:var(--margin-1);
}

.ctf-event{
	padding-left:var(--padding-1);
	font-size:var(--font-size-5);
	display:flex;
}

.ctf-event:hover{
	background-color:rgba(255,255,255,0.1);
	transition: var(--transition-1);
}

.ctf-event-mmss{
	flex: 0 0 50px;
	padding-right:5px;
	text-align: left;
	font-family: monospace;
}

.ctf-event-data{
	flex: auto;
	text-align:left;
}


.mmss{
	display:inline-block;
	font-family: monospace;
	padding-right:5px;
}


.ctf-cap-viewing{
	font-size:var(--tiny-font-size);
	padding:var(--padding-1);
}

.ctf-summary-row{
	display:flex;
	font-size:var(--font-size-5);
}
.ctf-summary-label{
	flex:0 0 150px;
	text-align:left;
	padding-left:10px;
	font-weight:600;
}

.ctf-summary-data{
	flex:1 1 auto;
	text-align: left;
}

.cap-info{
	font-size:var(--font-size-1);
	color:var(--font-color-2);
	line-height:var(--line-height-1);
}

.ctf-cap-row{
	display:grid;
	grid-template-columns: 100px auto;
	text-align:left;
}

.ctf-cap-title{
	background-color:var(--bg-color-dark);
	font-weight: 600;
	padding:var(--padding-2);
	border-top:1px solid var(--border-color-5);
	border-bottom:1px solid var(--border-color-5);
}

.ctf-cap-value{
	background-color:var(--bg-color-mid);
	padding:5px;
	text-align:left;
}

.ctf-cap-row-label{
	font-weight: bold;
}

.basic-team-scores div{
	padding:0px 2px;
}

.basic-team-score{
	padding:var(--padding-1);
}

.ctf-cap-frags{
	padding:var(--padding-1);
	font-size:var(--font-size-small);
	border:1px solid var(--border-color-1);
	margin-top:-1px;
}


.box{
	text-align:center;
	color:white;
	padding:var(--padding-1);
	margin-bottom: var(--margin-1);
	font-size:var(--font-size-1);
	line-height:var(--line-height-1);
}

.delete-button{
	background-color:var(--team-color-red);
	border:1px solid var(--border-color-2);
	color:white;
	padding:var(--padding-1);
	display:inline-block;
	user-select: none;
}


.delete-button:hover{
	color:yellow;
	background-color:var(--team-color-none);
	cursor: pointer;
}

.header-wrapper{
    text-align:center;
    padding:var(--padding-1);
    font-weight:500;
    margin-bottom:var(--margin-1);
    font-size:var(--font-size-3);
	background-color:var(--bg-header-color);
	text-shadow: 1px 1px rgba(0,0,0,0.5);
	border:1px solid var(--border-color-1);
}


.country-flag{
	width:16px;
	height:9px;
	padding-right:5px;
}


.header-country-flag{
	width:25px;
	height:14px;
}

.tiny-font{
	font-size: var(--tiny-font-size);
}

ul{
	list-style: inside;
	text-align:left;
}


.match-basic-info-wrapper{
    text-align: center;
    margin-bottom:var(--margin-2);
    
	max-width:var(--max-table-width-2);
	width:var(--width-1);
	background-color: var(--bg-color-mid);
	border:1px solid var(--border-color-5);
	box-shadow: var(--box-shadow-1);
}

.match-basic-info-wrapper-info{
	padding-top:var(--padding-2);
	font-size: var(--font-size-5);
	line-height: var(--line-height-1);
}

.mb-info{
	display:grid;
	grid-template-columns: 1fr 1fr;
}

.mb-info div:nth-child(1){
	color:var(--font-color-blue);
	font-weight:600;
	text-align: right;
	padding-right: var(--padding-2);
}

.mb-info div:nth-child(2){
	text-align: left;
	padding-left:var(--padding-2);
}


.match-scorebox-wrapper{
	font-size:var(--font-size-4);
}

.match-scorebox-wrapper div img{
    width:22px;
    height:22px;
    margin-top:5px;
}

.match-scorebox-score{
    padding:var(--padding-2);
	font-weight:500;
}

.pagination-wrapper{
    text-align: center;
    margin-top:var(--margin-1);
    margin-bottom:var(--margin-1);
    padding-bottom:var(--padding-1);
}

.pagination-button{
    display:inline-block;
    background-color:var(--bg-color-mid);
    border:1px solid var(--border-color-4);
    margin-right:5px;
    user-select: none;
    font-size:16px;
    padding:12px 15px;
	transition:var(--transition-all);
}

.pagination-button:hover{
    cursor: pointer;
	background-color:var(--button-hover-color);
}

.pagination-active{
    color:var(--active-font-color-1);
    font-weight:bold;
    border-bottom: 2px solid yellow;
}

.pagination-info{
    font-size:var(--font-size-5);
    padding:var(--padding-2);
    line-height:20px;
	font-weight:500;
}


.weapon-icon{
	width:68px;
	height:26px;
}

.vertical-text{
	writing-mode: vertical-lr;
}

.graph-wrapper{
	text-align: center;
	margin-bottom:var(--margin-1);
}

canvas{
	display:inline-block;
	width:50%;
	border:1px solid var(--border-color-5);
	box-shadow: var(--box-shadow-1);
}

.notification{
	position:fixed;
	bottom:0px;
	width:100%;
	text-align:center;
	color:white;
}

.notification-title{
	font-size:var(--font-size-2);
	padding:var(--padding-2);
	font-weight:500;
}

.notification-content{
	padding:var(--padding-1);
	font-size:var(--font-size-1);
}

.notification-date{
	font-size:12px;
	padding:5px;
	border-top:1px solid var(--border-color-1);
	border-bottom:1px solid var(--border-color-1);
	background-color:rgba(0,0,0,0.25);
}

.calendar-heatmap{
	background-color:var(--bg-color-mid);
	margin-bottom:var(--margin-1);
	color:white;
	display:inline-block;
	border:1px solid var(--border-color-5);
	
}

.calendar-heatmap-buttons{
	display:flex;
}

.calendar-heatmap-buttons button{
	background-color:var(--bg-color-mid);
	color:white;
	padding:5px;
	font-weight: 500;
	transition:var(--transition-all);
	font-size:12px;
	user-select: none;
	border:none;
	flex:2;
}

.calendar-heatmap-buttons button:hover{
	background-color:var(--bg-color-dark);
	color:yellow;
	cursor: pointer;
}

.calendar-heatmap-title{
	padding:var(--padding-2);
	font-size:var(--font-size-6);
	border-top:1px solid var(--border-color-2);
	border-bottom:1px solid var(--border-color-2);
}

.calendar-heatmap-week{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.calendar-heatmap-day{
	font-size:var(--font-size-small);
	padding:var(--padding-1);
	border:1px solid rgba(255,255,255,0.025);
	margin-left:-1px;
	margin-top:-1px;
	transition:var(--transition-all);
}

.calendar-heatmap-today{
	font-weight: bold;
	border:1px solid rgba(255,255,255,0.5);
}

.calendar-heatmap-day:hover{
	color:yellow;
	background-color:rgba(0,0,0,0.25);
}

.calendar-heatmap-day-header{
	color:rgb(150,150,150);
	font-weight:500;
	background-color:rgba(0,0,0,0.25);
}

.empty-date{
	background-color:rgba(0,0,0,0.25);
}

.basic-mouse-over{
	background-color:rgba(0,0,0,0.85);
	position:absolute;
	padding:5px;
	color:white;
	border:1px solid var(--border-color-2);
	font-weight:400;
}

.basic-mouse-over-title{
	font-size:14px;
	padding:3px;
}

.basic-mouse-over-content{
	font-size:12px;
	margin-top:5px;
}

.true, .false{
	padding:var(--padding-2);
	font-size:var(--font-size-2);
}

.true{
	background-color:var(--team-color-green);	
}

.false{
	background-color:var(--team-color-red);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading{
	width: 32px;
	height: 32px;
	animation: spin 1s linear infinite;
}

.scroll-x{
	overflow-x: auto;
}

.rankings-explained-table td{
	min-width:100px;
}


.api-link{
	margin-left:auto;
	margin-right: auto;
	display:block;
	font-size:var(--font-size-2);
	background-color:var(--bg-color-mid);
	border:1px solid var(--border-color-5);
	padding:var(--padding-1);
	text-align: left;
	width:var(--width-1);
	max-width:var(--max-table-width-1);
}

code{
	background-color:rgba(0,0,0,0.25);
	display:block;
	white-space:preserve;
	font-size:12px;
	
	padding:var(--padding-1);
	font-family: monospace;
	border:1px solid var(--border-color-1);
}

.json-example{
	background-color:var(--bg-color-mid);
	margin: 0px auto;
	width:var(--width-1);
	max-width:var(--max-table-width-2);
	border:1px solid var(--border-color-5);
	padding: 0px var(--padding-1);
	padding-bottom: var(--padding-1);
	
	margin-bottom: var(--margin-1);
}

.json-example h3{
	color:var(--font-color-blue);
	font-weight:600;
	font-size:var(--font-size-3);
	text-align: center;
	padding:var(--padding-1);
}

.json-example h4{
	color:var(--font-color-blue);
	font-weight:600;
	font-size:var(--font-size-1);
	margin-bottom:5px;
}

.json-info{
	font-size:var(--font-size-1);
	line-height: var(--line-height-1);
	margin-bottom:5px;

}

.json-link-example{
	font-family: monospace;
	color:var(--font-color-blue);
	padding:5px 0px;
}


.json-api-links-wrapper{
	margin-bottom:var(--margin-2);
	

}

.json-api-link{
	background-color: var(--bg-color-mid);
	width:var(--max-width-1);
	max-width: var(--max-table-width-2);
	margin-left:auto;
	margin-right:auto;
	display:grid;
	grid-template-columns: 150px auto 150px 150px;
	font-size:var(--font-size-6);
	
	border:1px solid var(--border-color-5);
	margin-bottom: var(--margin-2);
	transition:var(--transition-all);

}
.json-api-link a{
	
	color:var(--font-color-blue);
}


.json-api-link:hover{
	background-color: var(--bg-color-light);
}

.json-api-link-title{
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 500;
	color:var(--font-color-1);
}



.json-api-link-content{
	font-size:var(--font-size-5);
	padding:5px;
}

.json-api-link-clipboard{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:var(--font-size-small);	
	transition: var(--transition-all);
	text-align: center;
	user-select: none;
}

.json-api-link-clipboard:hover{
	cursor: pointer;
	color:yellow;
}