:root   
{
  --c-hvid:  hsl( 0, 0%, 100% );
  --c-dark:  hsl( 0, 0%, 13% );
  --c-lys:   hsl( 0, 0%, 67% );
	--c-rod:   hsl( 0, 100%, 37% );
  --c-sort-6:hsla( 0, 0%, 0%, .6 );
  --c-gron:  hsl( 120, 98%, 23% );
  --c-dgron: hsl( 161, 34%, 34% );
  --c-lgron: hsl( 162, 38%, 60% );
	--m-w: 300px;
	--m-h: 200px;
}

.wrap  
{
    margin: auto;
    padding: 15px;
    text-align: center!important;
}

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

.wrap h3   
{
    display: inline-block;
    color: var(--c-gron);
    font-weight: 600;
    margin: 0 5px 5px;
}

.wrap .button-group    
{
    display: inline-block;
}

.boxer .box-item   
{
    margin-bottom: 25px;
    border-radius: 10px;
}

.wrap hr  
{
    border: 1px solid var(--c-gron);
    margin: 5px 20%;
}

.button-group button 
{
    border: none;
    background-color: var(--c-hvid);
    text-transform: uppercase;
    color: var(--c-dark);
    transition: all 0.1s ease-out;
}

.button-group button:hover 
{
    color: var(--c-lys);
}

.button-group .active 
{
    color: var(--c-gron);
}

/*  hentet fra spisdk/css/custom  */

.gruppe			
{
	background-color: transparent;
	color: var(--c-hvid);
	padding: .8rem;
}

.gruppe-skygge	
{
	background-color: transparent;
	z-index: -1;
	padding: .8rem;
	margin-bottom: -50px;
}

.modal-grid		
{
	display: grid;
	gap: .3rem;
	padding-bottom: 1.2rem;
}

.boxer > div		
{
	min-height: 183px;
	margin-bottom: 1.4rem;
}

.thumb-info-title	
{
	background-color: var(--c-sort-6);
}

@media ( min-width: 1000px ) 
{
	.modal-grid		{
		grid-template-columns: repeat( 4, 25% );
	}
	.gruppe			
  {
		background-image: linear-gradient( 125deg, var( --c-dgron ) 50%, rgb( 255 255 255 / .1 ) 50% );
	}
	.gruppe-skygge	
  {
		background-image: linear-gradient( 125deg, var( --c-lgron ) 50.6%, transparent 50.6% );
	}
}
@media ( min-width: 600px ) and ( max-width: 999px ) 
{
	.modal-grid		
  {
		grid-template-columns: repeat( 3, 33% );
	}
	.gruppe			
  {
		background-image: linear-gradient( 125deg, var( --c-dgron ) 60%, rgb( 255 255 255 / .1 ) 60% );
	}
	.gruppe-skygge	
  {
		background-image: linear-gradient( 125deg, var( --c-lgron ) 60.5%, transparent 6.5% );
	}
}
@media ( max-width: 599px ) 
{
	.modal-grid		
  {
		grid-template-columns: repeat( 2, 50% );
	}
	.gruppe			
  {
		background-image: linear-gradient( 125deg, var( --c-dgron ) 70%, rgb( 255 255 255 / .1 ) 70% );
	}
	.gruppe-skygge	
  {
		background-image: linear-gradient( 125deg, var( --c-lgron ) 70.5%, transparent 70.5% );
	}
}

.grid-item		
{
	padding-left: .5rem;
}

.grid-item input[type="checkbox"], .grid-item label	
{
	display: inline-block;
  vertical-align: middle;
}

.sis	
{
	text-decoration: none;
	font-weight: 600;
	color: var( --c-hvid );
	padding: 10px;
	background-color: var( --c-dark );
	position: relative;
	top: -30px;
}

.grid-item input[type="checkbox"]	
{
	float: left;
	margin: .5rem;
}

.item-kort
{
	/*border: solid 1px var( --c-rod );*/
	max-height: var( --m-h );
	max-width: var( --m-w );
	min-height: var( --m-h );
	min-width: var( --m-w );
	margin: 10px;
	/*
	border-radius: 4%;
	padding: 10px;
	*/
}

@media ( min-width: 1200px ) 
{
	.item-kort
	{
		max-height: 220px;
		max-width: 330px;
		min-height: 220px;
		min-width: 330px;
		margin: 10px;
	}
}
/*
@media ( min-width: 992px ) and ( max-width: 1199px ) 
{
	.item-kort
	{
		max-height: 300px;
		max-width: 380px;
		min-height: 300px;
		min-width: 380px;
		margin: 10px;
	}
}*/