/* ========================== HOME ========================== */
/* ========================== LOGIN ========================== */
/* ========================== PRICING ========================== */













/* ========================== VERTICAL MENU ========================== */
.gridVerticals{
    display: grid;
    grid-template-columns: 1fr 600px 1fr;
    grid-template-rows: 15vh 400px;
    //grid-template-rows: 300px;
    //grid-auto-rows: 80px;
    //grid-gap: 0px 300px;
    grid-gap: 0px 20px;
    //width: 100vw;
    grid-template-areas:
        ". . ."
        "Description Verticals Comments";
}
@media screen and (max-width: 1200px){
	.gridVerticals{
	    grid-template-columns: 1fr 600px 1fr;
	    grid-template-rows: 15vh 400px;
		grid-template-areas:
			". . ."
			". Verticals ."
			". Description ."
			". Comments .";
	}
}
@media screen and (max-width: 700px){
	.gridVerticals{
	    grid-template-columns: 1fr 100fr 1fr;
	    grid-template-rows: 1fr;
		grid-template-areas:
			". Verticals ."
			". Description ."
			". Comments .";
	}
}


/* ========================== PipelinePro ========================== */
:root {
    --central-size: calc(100vh - 60px);
    --central-size_v: calc(100vh - 262px);
}

.grid_PipelinePro_old{
    display: grid;
    height: calc(100vh - 10px);
    grid-template-columns: 100px 1fr;
    grid-template-rows: 50px var(--central-size);
    grid-gap: 2px 2px;
    grid-template-areas:
        "Header Header"
        "grid_menu page_core"
        "admin page_core";
}

.grid_PipelinePro{
    display: grid;
    height: calc(100vh - 10px);
    grid-template-columns: 120px 1fr 115px;
    grid-template-rows: 218px var(--central-size_v) 40px;
    grid-gap: 2px 2px;
    grid-template-areas:
        "Header page_core page_core"
        "grid_menu page_core page_core"
        "admin page_core page_core";
}
@media screen and (max-width: 600px){
	.grid_PipelinePro{
	    --central-size: calc(100vh - 50px);
	    grid-template-columns: 120px 1fr;
	    grid-template-rows: 50px var(--central-size);
		grid-template-areas:
			"Header grid_menu"
			"page_core page_core";
	}
}

.flex_PipelinePro{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: center;
    position: relative;
    top: 0px;
    margin-bottom: 0px;
    //height: calc(100vh - 125px);
}

.flex_PipelinePro div{
//    width: 350px;
}



/* ========================== PRODUCTION PLAN ========================== */
:root {
    --central-size-pplan: calc(100vh - 500px);
    --central-size-pplan-express: calc(100vh - 610px);
    --centralBlock-size-pplan: calc(var(--central-size-pplan)/5);
}

.grid_Production_Plan_Express{
    display: grid;
    grid-template-columns: 200px 200px 1fr 200px;
    grid-template-rows: 120px 300px var(--central-size-pplan-express);
    grid-gap: 0px 0px;
    grid-template-areas:
        "TreeCompany TreeCompany TreeResumen TreeTotals"
        "TreeDepartment Process Process Product"
        "TreeDepartment Personal TreeProject TreeProject";
}

.flex_Production_Plan_Express{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-evenly;
    //justify-content: center;
    position: relative;
}


.grid_Production_Plan_Basic{
    display: grid;
    //grid-template-columns: 1fr 3fr 15fr 3fr;
    grid-template-columns: 200px 200px 1fr 200px;
    //grid-template-rows: 20vh 20vh 20vh 20vh 15vh;
    //grid-template-rows: repeat(7, 12.5vh);
    grid-template-rows: 150px repeat(5, var(--centralBlock-size-pplan)) 150px;
    grid-gap: 0px 0px;
    grid-template-areas:
        "TreeCompany TreeCompany TreeResumen TreeTotals"
        "TreeDepartment TreeProject TreeProject TreeProject"
        "TreeDepartment TreeProject TreeProject TreeProject"
        "TreeDepartment TreeProject TreeProject TreeProject"
        "TreeDepartment TreeProject TreeProject TreeProject"
        "TreeDepartment TreeProject TreeProject TreeProject"
        "TreeProduct TreeProduct TreeProcess TreeByProduct";
}

.flex_Production_Plan_Basic{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-evenly;
    //justify-content: center;
    position: relative;
}

.grid_Production_Plan{
    display: grid;
    grid-template-columns: 1fr 3fr 15fr 3fr;
    //grid-template-rows: 20vh 20vh 20vh 20vh 15vh;
    grid-template-rows: repeat(7, 12.5vh);
    grid-gap: 0px 0px;
    grid-template-areas:
        "TreeCompany TreeCompany TreeResumen TreeTotals"
        "TreeDepartment TreeProject TreeProject TreeProject"
        "TreeDepartment TreeProject TreeProject TreeProject"
        "TreeBalance TreeProject TreeProject TreeProject"
        "TreeService TreeProject TreeProject TreeProject"
        "TreeRound TreeProduct TreeProcess TreeByProduct"
        "TreeRoadmap TreeProduct TreeProcess TreeByProduct";
}



/* ========================== WIZARD ========================== */
.grid_WizardCompany{
    display: grid;
    grid-template-columns: 1fr 650px 1fr;
    grid-template-rows: 100px 1fr 1fr;
    grid-gap: 10px 10px;
    grid-template-areas:
        "PanelA Diagram ."
        "Navegation PanelB PanelC"
        "Navegation PanelB PanelF";
}


/* ========================== WIZARD 01 IDEA ========================== */
.grid_WizardCompany_IDEA{
    display: grid;
    grid-template-columns: 1fr 650px 1fr;
    grid-template-rows: 100px 1fr 1fr;
    grid-gap: 10px 10px;
    grid-template-areas:
        "PanelA Diagram PanelSales"
        "PanelDafo PanelB PanelC"
        "Navegation Botonera PanelF";
}

.flex_WizardCompany_IDEA{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    //align-content: center;
    align-content: stretch;
    //justify-content: space-evenly;
    justify-content: center;
    //justify-content: flex-start;
}

.flex_WizardCompany_IDEA div{
    width: 350px;
}

.item_WizardCompany_IDEA{
    order: 5;
}

/* ========================== WIZARD 04 PRODUCT========================== */
.grid_WizardCompany_PRODUCT{
    display: grid;
    grid-template-columns: 1fr 900px 1fr;
    grid-template-rows: 100px 1fr 1fr;
    grid-gap: 10px 10px;
    grid-template-areas:
        "PanelA Diagram ."
        "Navegation PanelB PanelC"
        "PanelD PanelB PanelF";
}


/* ========================== WIZARD 05 TARGET========================== */
.grid_WizardCompany_TARGET{
    display: grid;
    grid-template-columns: 1fr 900px 1fr;
    grid-template-rows: 100px 1fr 1fr;
    grid-gap: 10px 10px;
    grid-template-areas:
        "PanelA Diagram ."
        "Navegation PanelB PanelB"
        "PanelD PanelB PanelB";
}


/* ========================== WIZARD 09 ESTRATEGY========================== */
.grid_WizardCompany_ESTRATEGY{
    display: grid;
    grid-template-columns: 1fr 1400px 1fr;
    grid-template-rows: 60px 200px 1fr;
    grid-gap: 10px 10px;
    grid-template-areas:
        "PanelA Diagram kpi"
        "PanelB chart ."
        "PanelB Tabla .";
        // ". . .";
}

/* ========================== WIZARD PIPELINE========================== */
.grid_WizardProject_PIPELINE{
    display: grid;
    grid-template-columns: 1fr 1400px 1fr;
    grid-template-rows: 60px 200px 1fr;
    grid-gap: 10px 10px;
    grid-template-areas:
        "PanelA Diagram kpi"
        "PanelB Tabla ."
        "PanelB Tabla .";
}

/* Media queries */

/* 0  639 - 640 999 - 1000 1919 - 1920 xxxx    4k  */
/*   XXS       S          M           L        XL  */

@media (min-width: 1920px) {
	.grid_WizardCompany {
		grid-template-columns: 1fr 650px 1fr;
		grid-template-rows: 100px 1fr 1fr;
	}
}
@media (max-width: 1919px) and (min-width: 1000px) {
	.grid_WizardCompany {
		grid-template-columns: 1fr 650px 1fr;
	}
}
@media (max-width: 999px) and (min-width: 640px) {
	.grid_WizardCompany {
		grid-template-columns: 20px 1fr 20px;
		grid-template-rows: 100px 1fr 1fr;
	}
}
@media (max-width: 639px) {
	.grid_WizardCompany {
		grid-template-columns: 5px 1fr 5px;
		grid-template-rows: 100px 1fr 1fr;
	}
}

body.grabbing {
    cursor: grabbing;
}