/* Smart Grid Forum */

.smart-grid-forum
{
display: grid;
grid-template-columns: 1fr 3fr;
background-color: var(--main-color-scheme-a);
border:1px solid var(--main-border-color);
overflow: hidden;
}

.smart-grid-forum-profile
{
padding:10px 20px 10px 20px;
background: var(--main-table-color-scheme-b);
text-align:center;
border:6px solid var(--main-table-color-scheme-a);
}

.smart-grid-forum-comment
{
padding:20px;
background: var(--main-table-color-scheme-a);
}

.smart-grid-forum-comment:before
{
position: absolute;
content: "";
margin-left: -35px;
border: 15px solid var(--main-table-color-scheme-a);
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: none;
z-index: 1;
}

/* Smart Grid One */

.smart-grid-wrapper
{
display: grid;
grid-gap: 5px;
}

.smart-grid
{
background: var(--main-table-color-scheme-a);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding-bottom:0;
border:1px solid var(--main-border-color);
}

.smart-grid .separator
{
background-color: var(--main-color-scheme-a);
}

.smart-grid .separator:before 
{
position: absolute;
content: "";
border: 15px solid var(--main-color-scheme-a);
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: none;
}

.smart-grid .separator-left
{
margin-left: 20px;	
}

.smart-grid .separator-right
{
margin-left: 20px;	
}

.smart-grid .separator-middle
{
margin-right: 35px;	
}

.smart-grid-head
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background: var(--main-color-scheme-a);
color:#fff;
font-size:18px;
font-family: var(--secondary-font);
font-weight:600;
}

.smart-grid-body
{
padding:15px;
}

/* Smart Grid Two */

.smart-grid-two 
{
background: var(--main-table-color-scheme-a);
text-align:center;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding-bottom:0;
border:1px solid var(--main-border-color);
}

.smart-grid-two .separator
{
background: var(--main-color-scheme-a);
}

.smart-grid-two .separator:before 
{
position: absolute;
content: "";
border: 15px solid var(--main-color-scheme-a);
border-left: 20px solid transparent;
margin-left: -20px;
border-right: 20px solid transparent;
border-bottom: none;
}

.smart-grid-two-details
{

min-height:150px;
}


.smart-grid-two-heading
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background: var(--main-color-scheme-a);
color:#fff;
font-size:16px;
font-weight:600;
font-family: var(--secondary-font);
}

.smart-grid-two-amount
{
font-size:13px;
}

/* Subscriber Box */

.subscriber-box
{
background-color:var(--main-table-color-scheme-a);
}

.subscriber-box .separator
{
background-color: var(--main-table-color-scheme-a);
}

.subscriber-box .separator:before 
{
position: absolute;
content: "";
border: 15px solid var(--main-table-color-scheme-a);
border-left: 20px solid transparent;
margin-left: -20px;
border-right: 20px solid transparent;
border-bottom: none;
}

.subscriber-amount
{
font-size:32px;
}

.subscriber-details
{
font-size:18px;
background-color:var(--main-table-color-scheme-b);
}

.subscriber-heading
{
font-size:24px;
}

/* Combat Interface */

.combat-display
{
background-image:url('/images/default/combatbg.png');
background-repeat:no-repeat;
background-size: 100% 100%;	
}

/* User Lists */

.smart-grid-main-wrapper 
{
display: grid;
background-color: var(--main-table-color-scheme-a);
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
padding:5px;
border:1px solid var(--main-border-color);
}

.smart-grid-main-box 
{
margin-top:40px;
background-color: var(--main-table-color-scheme-c);
color: #fff;
border-radius: 3px;
padding: 20px;
border:1px solid var(--main-border-color);
}

.smart-grid-picture
{
margin-top:-60px;
}

.smart-grid-picture img
{
width:80px; 
height:80px; 
border-radius:50px; 
background-color: var(--main-table-color-scheme-b);
border:1px solid var(--main-border-color);
}

/* Items */

.smart-grid-items-wrapper 
{
display: grid;
padding:5px;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(80px,1fr));
}

.smart-grid-items-box 
{
background-color: var(--main-table-color-scheme-c);
border:1px solid var(--main-border-color);
color: #fff;
border-radius: 3px;
padding: 5px;
height:60px;
}

/* Keys */

.smart-grid-keys-wrapper 
{
display: grid;
padding:5px;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
}

.smart-grid-keys-box 
{
background-color: var(--main-table-color-scheme-c);
color: #fff;
border-radius: 3px;
padding: 10px;
font-size:11px;
}

/* Talents */

.smart-grid-talents-wrapper 
{
display: grid;
padding:5px;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(80px,1fr));
}

.smart-grid-talents-box 
{
background-color: var(--main-table-color-scheme-c);
border:1px solid var(--main-border-color);
color: #fff;
border-radius: 3px;
padding: 10px;
height:60px;
}

/* Calendar */

.smart-grid-calendar-wrapper 
{
display: grid;
background-color: var(--main-table-color-scheme-a);
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
padding:5px;
border:1px solid var(--main-border-color);
}

.smart-grid-calendar-box 
{
background-color: var(--main-table-color-scheme-c);
color: #fff;
border-radius: 8px;
padding: 10px;
border:1px solid var(--main-border-color);
}

.smart-grid-calendar-claimed 
{
background-color: #44cc33;
opacity:0.4;
}

/* Menu */

.smart-grid-menu-wrapper
{
display: grid;
}

.smart-grid-menu-one
{
grid-template-areas:
"grid-a"
"grid-b"
"grid-c";
}

/* Main User/Clan Profile */

.smart-grid-profile-one
{
grid-template-columns: 1.2fr 2.8fr;
grid-template-areas:
"grid-a grid-b";
}

/* User Stats */

.smart-grid-profile-two
{
grid-template-columns: 1fr 1fr;	
grid-template-areas:
"grid-a grid-b"
"grid-c grid-d"
"grid-c grid-e";
}

/* View User Profile */

.smart-grid-profile-three
{
grid-template-columns: 1fr 1fr;
grid-template-areas:
"grid-a grid-b"
"grid-c grid-d";
}

/* Equipment */

.smart-grid-profile-four
{
grid-template-columns: 1fr 1fr;
grid-template-areas:
"grid-a grid-b"
"grid-a grid-b"
"grid-c grid-b"
"grid-c grid-d";
}

/* Combat */

.smart-grid-profile-five
{
grid-template-columns: 1fr 3fr;
grid-template-areas:
"grid-a grid-b";
}

/* Bank */

.smart-grid-profile-six
{
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
}

/* User Lists */

.smart-grid-profile-seven
{
grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
}

/* Items */

.smart-grid-profile-eight
{
grid-template-columns: repeat(auto-fit, minmax(80px,1fr));
}

.smart-grid-profile-ten
{
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
padding:5px;
border:1px solid var(--main-border-color);
}

.smart-grid-profile-eleven
{
grid-template-columns: 3fr 1fr;
grid-template-areas:
"grid-a grid-b";
}

/* Homepage */

.smart-grid-profile-nine
{
grid-template-columns: 0.99fr 1fr 1fr 1fr;
grid-template-areas:
"grid-a grid-b grid-b grid-b"
"grid-e grid-c grid-d grid-d"
"grid-e grid-f grid-f grid-f";
}

/* Combat */

.smart-grid-profile-twelve
{
grid-template-columns: 2fr 1fr;
grid-template-areas:
"grid-a grid-b";
}

.smart-grid-profile-thirteen
{
grid-template-columns: repeat(auto-fit, minmax(33%,1fr));
}

/* Tabs */

.grid-a{grid-area: grid-a;}
.grid-b{grid-area: grid-b;}
.grid-c{grid-area: grid-c;}
.grid-d{grid-area: grid-d;}
.grid-e{grid-area: grid-e;}
.grid-f{grid-area: grid-f;}
.grid-g{grid-area: grid-g;}

.smart-grid-tab 
{
white-space: nowrap;
text-align: center;
padding:8px 8px 8px 8px;
font-size:12px;
font-weight:600;
font-family: var(--secondary-font);
color:#fff;
background-color: var(--main-color-scheme-a);
border-top-left-radius:6px;
border-top-right-radius:6px;
border:1px solid var(--main-border-color);
border-bottom:none;
}

.smart-grid-tabs .tab-active
{
background-color: var(--main-color-scheme-b);
}

.smart-grid-tab:hover
{
opacity:1;
filter:alpha(opacity=100);
-webkit-transition:all 0.1s ease-in-out;
-moz-transition:all 0.1s ease-in-out;
-o-transition:all 0.1s ease-in-out;
transition:all 0.1s ease-in-out;
background-color: var(--main-color-scheme-b);
}

.tab-two, .tab-three, .tab-four, .tab-five, .tab-six, .tab-seven
{
display: grid;
grid-gap: 1px;
}

.tab-seven
{
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
	"grid-a grid-b grid-c grid-d grid-e grid-f grid-g";
}

.tab-six
{
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;		
grid-template-areas:
	"grid-a grid-b grid-c grid-d grid-e grid-f";
}

.tab-five
{
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;	
grid-template-areas:
	"grid-a grid-b grid-c grid-d grid-e";
}

.tab-four
{
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas:
	"grid-a grid-b grid-c grid-d";
}

.tab-three
{
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
	"grid-a grid-b grid-c";
}

.tab-two
{
grid-template-columns: 1fr 1fr;
grid-template-areas:
	"grid-a grid-b";
}

/* Screen Resolution Adjustments */

@media screen and (max-width: 1020px), screen and (max-device-width: 1020px) 
{

	.tab-seven
	{
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"grid-a grid-b"
			"grid-c grid-d"
			"grid-e grid-f"
			"grid-g grid-g";
	}	
	
	.tab-six
	{
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"grid-a grid-b"
			"grid-c grid-d"
			"grid-e grid-f";
	}	
	
	.tab-five
	{
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"grid-a grid-b"
			"grid-c grid-d"
			"grid-e grid-e";
	}
	
	.tab-four
	{
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"grid-a grid-b"
			"grid-c grid-d";
	}

	.tab-three
	{
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"grid-a grid-b"
			"grid-c grid-c";
	}
	
	.smart-grid-menu-one
	{
		grid-template-areas:
			"grid-a grid-c"
			"grid-b grid-b";
	}	

	.smart-grid-profile-one
	{
		grid-template-columns: 1fr;
		grid-template-areas:
			"grid-a"
			"grid-b";
	}
	
	.smart-grid-profile-five
	{
		grid-template-columns: 1fr;
		grid-template-areas:
			"grid-a"
			"grid-b";
	}
	
	.smart-grid-profile-nine
	{
		grid-template-columns: 1fr;
		grid-template-areas:
			"grid-a"
			"grid-b"
			"grid-c"
			"grid-d"
			"grid-f"
			"grid-e";
	}
}

@media screen and (max-width: 640px), screen and (max-device-width: 640px) 
{
	.smart-grid-profile-two, .smart-grid-profile-three, .smart-grid-profile-four
	{
		grid-template-columns: 1fr;
	}
	
	.smart-grid-profile-two
	{
		grid-template-areas:
			"grid-a"
			"grid-b"
			"grid-c"
			"grid-d"
			"grid-e";
	}
	.smart-grid-profile-three, .smart-grid-profile-four
	{
		grid-template-areas:
			"grid-a"
			"grid-b"
			"grid-c"
			"grid-d";
	}
	
	.smart-grid-profile-eleven
	{
		grid-template-columns: 1fr;
		grid-template-areas:
			"grid-a"
			"grid-b";
	}		
}