/*
Theme Name:   Customify Child Theme
Theme URI:    
Description:  A Customify child theme 
Author:       Louis
Author URI:   
Template:     customify
Version:      1.0.0
Text Domain:  customifychild
*/

*,::before,::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.grid {
	display : grid;
	font-size : .8em;
	overflow : auto;
	box-sizing: border-box;
	/*opacity : 0.8;*/
	scrollbar-width: thin;
}

.grid span {
	background-color: hsl(200deg 80% 70% / 1);
	border: 1px solid #000;
	text-align: center;
}

@media (max-width:500px){
	.grid span {
		padding : 0.4em 0.8em;
	}
	.grid {
		height:42em;
	}
}

@media (min-width:501px){
	.grid span {
		padding : 0.4em 0.5em;
	}
	.grid {
		height:35em;
	}
}

.grid .grid-first-row {
	background : #f2f2f2;
	/*opacity : 1;*/
	/*width : 2.5em;*/
	/*height : 3em;*/
	position : sticky;
	top : 0;
	z-index : 10;
	/*border: 0 0 0 1px solid #80808033;*/ /*top, right, bottom, left*/
	border-width : 0 1px 0 1px;
	border-style : solid;
	border-color : #80808033;
	margin: 0 -1px 0 -1px;
	font-size : 1em;
}

.grid .grid-left-column {
	background : #f2f2f2;
	/*opacity : 1;*/
	width : 11em;
	position : sticky;
	left : 0;
	/*border : 1px 0 0 0 solid #80808033;*/
	border-width : 1px 0 0 0;
	border-style : solid;
	border-color : #80808033;
	margin: -1px 0 0 0;
	font-size : 1em;
}

.grid .grid-top-left-corner {
	border-radius : 7px 0 0 0;
	border-width : 0 1px 1px 0;
	z-index : 20;
}

.grid .grid-inner-item {
	margin-top : 5px;
	margin-left : 5px;
	border-radius : 7px;
	box-shadow: 1px 1px 1px 1px #80808033;
	border : 0px solid transparent;
}

.grid .grid-inner-item.left-item {
	margin-left : 5px;
	border-radius : 7px 0 0 7px;
}

.grid .grid-inner-item.center-item {
	margin-left : 0;
	border-radius : 0;
}

.grid .grid-inner-item.right-item {
	margin-left : 0;
	border-radius : 0 7px 7px 0;
}

.grid .grid-inner-item.grid-green {
	background: #408B5B;
}

.grid .grid-inner-item.grid-red {
	background: #FF474D;
}


/* For popup windows*/

.popup-window {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	-ms-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	border: 1px solid #80808033;
	z-index: 50;
	background : #FFFFFF;
	border-radius : 15px;
	box-sizing : border-box;
	flex-direction: column;
}

.popup-text {
	order : 1;
}

.popup-buttons {
	order : 2;
	margin-top : auto;
	display : flex;
}

.popup-commune-pers {
	display : flex;
	margin-bottom : 0.5em;
}

#close-popup {
	background : none;
	position : absolute;
	border-radius : 5px;
	line-height : 2em;
	min-height : 1em;
	padding : 0 .6em;
	color : black;
}

#close-popup:hover {
	color : white;
	background : #f2f2f2;
}

#modify-button {
	border-radius : 5px;
	order : 1;
}

#delete-form {
	order : 2;
	margin-left : auto;
	margin-bottom : 0;
}

#delete-button {
	background : #DE2916;
	border-radius : 5px;
}

#modify-button-commune {
	border-radius : 3px;
	order : 2;
	margin-left : auto;
	font-size : .7em;
	padding : 0px 1em;
	line-height: 1.9em;
    min-height: 2em;

}

#delete-form-commune {
	order : 3;
	margin-left : 0.5em;
	margin-bottom : 0;
	font-size : .7em;
	padding : 0px 1em;
	line-height: 1.9em;
    min-height: 2em;
}

#delete-button-commune {
	background : #DE2916;
	border-radius : 3px;
}



@media (max-width:500px){
    .popup-window-couple {
        min-width : 60%;
	    min-height : 60%;
		padding : 2em;
    }
	.popup-window-commune {
        min-width : 60%;
		padding : 2em;
    }
    #close-popup {
        top : .3em;
	    right : .3em;
    }
	.popup-buttons {
		font-size : ;
	}
}

@media (min-width:501px){
    .popup-window-couple {
        min-width : 40%;
	    min-height : 40%;
		padding : 1.5em;
    }
	.popup-window-commune {
        min-width : 40%;
		padding : 1.5em;
    }
    #close-popup {
        top : .5em;
	    right : .5em;
    }
	.popup-buttons {
		font-size : ;
	}
}