/* ************************************************************************
* File: box.css
*
* Purpose: Box element css
*
* This file is part of a software by Jens Gienau.
* (c)1999 - 2023 Jens Gienau / www.gienau.com / mail@gienau.com
************************************************************************ */

/* ------------------------------------------------------------------------
box
------------------------------------------------------------------------ */
.box-cmd-toggle {
	cursor: pointer;
	color:#00D800;
}
.box-close-toggle {
	cursor: pointer;
	color:#00D800;
}
.box-cmd-toggle:hover {
	color:#000;
}
.box-close-toggle:hover {
	color:#000;
}
.box-to-toggle {
	display: none;
}


.flex-container.box {
	text-align: center;
}

.flex-container.box h3 {
	font-size: 1.5rem;
	line-height: 2rem;
}

.flex-container.box p {
	font-size: 1.2rem;
	line-height: 1.5rem;
}

.flex-container.box h3.box-cmd-toggle:hover {
	text-decoration: underline;
}

.flex-container.box .flex-col-1 {

}

.flex-container.box .flex-col-1,
.flex-container.box .flex-col-2,
.flex-container.box .flex-col-3  {
	margin-top:1rem;
	border: 3px solid #E8E8E8;
	border-radius: 5px;
	padding: 1rem;
	background-image: -webkit-linear-gradient(bottom, #FFFFFF , #f5f5f5);
	background-image: -moz-linear-gradient(top bottom, #FFFFFF , #f5f5f5 );
	background-image: -o-linear-gradient(top  bottom, #FFFFFF , #f5f5f5 );
	background-image: linear-gradient(top bottom, #FFFFFF , #f5f5f5 );
}

.flex-container.box .flex-col-1.highlight,
.flex-container.box .flex-col-2.highlight,
.flex-container.box .flex-col-3.highlight  {

	border-color: #000;
	
}

.flex-container.box .flex-col-1.highlight:hover,
.flex-container.box .flex-col-2.highlight:hover,
.flex-container.box .flex-col-3.highlight:hover,
.flex-container.box .flex-col-1:hover,
.flex-container.box .flex-col-2:hover,
.flex-container.box .flex-col-3:hover   {
	-webkit-box-shadow:5px 5px 3px #D3D3D3;
 	-moz-box-shadow:5px 5px 3px  #D3D3D3;
 	box-shadow:5px 5px 3px  #D3D3D3;
}

.box-to-toggle {
	border: 1px dotted silver;
	border-radius: 5px;
	padding: .5rem;
}

/* ========================================================================
MEDIA QUERY: DESKTOP SMALL
======================================================================== */

@media only screen and (min-width: 800px) {

	.flex-container.box h3 {
		font-size: 2rem;
		line-height: 2.5rem;
	}

	.flex-container.box p {
		font-size: 1.5rem;
		line-height: 1.9rem;
	}
	.flex-container.box .flex-col-2:first-of-type {

	}
}