/* public/css/compnents.css */

/*-----------------------------------------------*\
		Xdebug  -  var_dump()
\*-----------------------------------------------*/
.xe-warning{
	font-size: 2rem;
}
.xdebug-var-dump font{
	color: #0f0;
}
.xdebug-var-dump{
	background-color: #27333d;
	max-width: 1200px;
	margin: 20px auto;
	padding: 10px;
	border-radius: 10px;
	color: #fff;
}


/*--------------------------------------------*\
			Modal
\*--------------------------------------------*/
.modal {
	display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	background-color: var(--card-bg);
    width: 90%;
    max-width: 500px;
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: var(--shadow);
	z-index: 1000;
}
.modal.show {
    display: block;
}
.modal-content{
	padding: 0 20px 10px 20px;
}
.modal-body{
	padding: 10px 10px 0px;
}
.modal-header{
	padding: 0 40px;
}
.modal-title{
	border-bottom: 3px solid var(--border);
	font-size: 3rem;
	text-align: center;
	color: var(--danger);
}
.modal-footer{
	padding-top: 20px;
	text-align: right;
}
.modal-close{
	padding: 5px 15px;
}

/*			Small		*/
@media screen and (min-width:576px) {
	
}

/*			Medium		*/
@media screen and (min-width:768px) {
	
}

/*			Large		*/
@media screen and (min-width:992px) {
	
}

/*			Extra large		*/
@media screen and (min-width:1200px) {
	
}

/*			Extra extra large		*/
@media screen and (min-width:1400px) {
	
}