/* FATURAMENTO */

.f-header-height {
	height: 30px;
}

.f-row-height {
	align-items: center;
	display: flex;
	height: 40px;
	flex-direction: row;
	justify-content: flex-start;
}

.f-row-input {
	align-self: stretch;
	border: 1px solid var(--color-theme-light);
	border-radius: 4px;
	color: var(--color-theme);
	display: inline-block;
	font-size: 16px;
	margin: 0.25vh 0vw;
	outline: none;
	padding: 0.3vw 0.3vw 0.1vw 0.3vw;
	width: 74px;
}

.f-grid-organizer {
	align-items: center; /* Expande o item do grid até a altura da linha */
	display: grid;
	justify-items: stretch; /* Expande o item do grid até a largura da coluna */
}

.f-grid-organizer > * {
	margin-bottom: 0vh;
	padding-right: 4px;
}

/* FATURAMENTO */

/* MEDICAO */

.m-header-height {
	height: 50px;
	margin-bottom: 0.5vh;
}

.m-professional {
	align-self: stretch;
	align-items: center;
	display: flex;
	height: 70px;
	flex-direction: row;
	justify-content: flex-start;
}

.m-month {
	width: 100px;
	margin-right: 0vw !important;
}

.m-header {
	align-items: center;
	display: flex;
	height: 50px;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 0.5vh;
}

.m-input {
	align-items: center;
	display: flex;
	height: 70px;
	flex-direction: column;
	justify-content: center;
}

.m-input-field {
	align-self: stretch;
	border: 1px solid var(--color-theme-light);
	border-radius: 4px;
	color: var(--color-theme);
	display: inline-block;
	font-size: 16px;
	margin-bottom: 0.5vh;
	outline: none;
	padding: 0.3vw 0.3vw 0.1vw 0.3vw;
}

.m-row-height {
	align-items: center;
	display: flex;
	height: 50px;
	flex-direction: column;
	justify-content: space-between;
}

/* MEDICAO */

/* ALOCACAO */

.a-header-height {
	height: 60px;
	margin-bottom: 0.5vh;
}

.a-projeto {
	align-self: stretch;
	align-items: center;
	display: flex;
	height: 40px;
	flex-direction: row;
	justify-content: flex-start;
}

.a-header {
	align-items: flex-start;
	display: flex;
	height: 60px;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 0.5vh;
	min-width: 100px;
	width: 100px;
}

.a-input {
	align-items: stretch;
	display: flex;
	height: 40px;
	flex-direction: column;
	justify-content: center;
	min-width: 100px;
	width: 100px;
}

.a-input-field {
	align-self: stretch;
	border: 1px solid var(--color-theme-light);
	border-radius: 4px;
	color: var(--color-theme);
	display: inline-block;
	font-size: 16px;
	margin-bottom: 0.5vh;
	outline: none;
	padding: 0.3vw 0.3vw 0.1vw 0.3vw;
}

/* ALOCACAO */

/* LOGIN  */

.l-body {
	background: var(--gradient-left);
	background: linear-gradient(90deg, var(--gradient-left) 0%, var(--gradient-right) 100%);
}

.l-logo {
	max-height: 100%;
	object-fit: contain;
	vertical-align: middle;
	width: auto;
}

.l-row {
	height: 50%;
}

.l-column {
	flex: 1 0 calc(50% - 10vw);
	margin: 0vh 0vw !important;
}

.l-column:nth-child(1) {
	align-items: flex-end;
	padding-right: 5vw;
}

.l-column:nth-child(2) {
	align-items: flex-start;
	justify-content: center;
	padding-left: 5vw;
}

.l-h1 {
	color: var(--color-white);
	font-family: "SourceSansProBold";
	font-size: 100px;
	margin: 0vh 0vw 2vh 0vw;
	text-transform: uppercase;
}

.l-h2 {
	color: var(--color-white);
	font-size: 25px;
	letter-spacing: 2.5px;
	margin: 0vh 0vw 2vh 0vw;
}

.l-button-container {
	/** FLEX **/
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/** FLEX **/
	margin-left: 150px;
}

.l-button {
	background-color: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-theme);
	text-transform: uppercase;
	text-decoration: none;
}

.l-button:hover {
	background-color: var(--color-theme);
	border-color: var(--color-theme);
	color: var(--color-white);
}

.l-button > span {
	font-size: 16px;
	font-family: "SourceSansProBold";
	letter-spacing: 2px;
}

/* LOGIN  */

/* INDEX */ 

.i-left-user {
	justify-content: center !important;
	padding: 0vh 6vw !important;
}

.i-user-container {
	/** FLEX **/
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	/** FLEX **/
	background-color: var(--color-white);
	border: 1px solid var(--color-black);
	border-radius: var(--border-radius);
	font-family: "SourceSansProBold";
	font-size: var(--big-font-size);
	height: 30vh;
	padding: 1vh 1vw;
	text-transform: uppercase;
	width: 30vw;
}

.i-center-features {
	justify-content: center !important;
	padding: 0vh 6vw !important;
}

.i-center-title {
	align-self: center;
	color: var(--color-white);
	font-size: var(--large-font-size);
	text-align: center;
}

.i-center-button-capsule {
	/** FLEX **/
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	/** FLEX **/
	background-color: var(--color-white);
	border-radius: 70px;
	color: var(--color-theme);
	font-size: var(--big-font-size);
	height: 70px;
	margin: 1vh 1vw;
	text-decoration: none;
	text-align: center;
	width: 210px;
}

.i-center-button-capsule:hover {
	background-color: var(--color-theme);
	color: var(--color-white);
}

.i-right-icons {
	justify-content: flex-start !important;
}

.i-right-icon {
	color: var(--color-white);
	font-size: 42px;
	height: auto;
	margin: 0vh 0vw 1vh 0vw;
	max-width: 42px;
	min-width: 42px;
	object-fit: contain;
	padding: 0vh 0vw;
	vertical-align: middle;
	width: 42px;
}

.i-m-group {
	background-color: var(--color-gray-dark);
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	box-shadow: 0px 0px 4px var(--color-gray-dark);
	color: var(--color-white);
	font-size: 12px;
	padding: 0.5vw;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 1vh;
}

.i-m-button {
	/** FLEX **/
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	/** FLEX **/
	background-color: var(--color-theme);
	border-radius: 40px;
	border: 1px solid var(--color-theme);
	color: var(--color-white);
	font-size: 12px;
	margin: 0.5vh 0vw;
	padding: var(--spacer-small);
	text-decoration: none;
}

.i-m-button:hover {
	background-color: var(--color-orange);
	border-color: var(--color-orange);
	cursor: pointer;
}

/* INDEX */ 

/* ENTREGA */

.gantt .bar-wrapper .bar {
    fill: var(--color-gray-dark) !important;
}

.gantt .bar-wrapper.active.artefact-running .bar-progress, .gantt .bar-wrapper.artefact-running .bar-progress {
    fill: var(--color-red);
}

.gantt .bar-wrapper.active.artefact-concluded .bar-progress, .gantt .bar-wrapper.artefact-concluded .bar-progress {
    fill: var(--color-blue);
}

.gantt-container .popup-wrapper {
    background-color: var(--color-white) !important;
    color: var(--color-black);
    min-width: 300px !important;
}

/* ENTREGA */

/* CONTROLE ATIVIDADE */

.controleatividade-grid-container {
	background-color: var(--color-white);
	border:  0px;
	/*height: 40vh;*/
	flex:  1 1 auto;
	margin:  1vh 0vw;
	overflow: auto;
	padding:  0vh 0vw;
}

.controleatividade-header-container {
	background-color: var(--color-theme);
	height: var(--ca-header-height);
	left: 0px;
	line-height: var(--ca-header-height);
	position: sticky;
	top: 0px;
	width: max-content;
	z-index: 20;
}

.controleatividade-header-cell-fixed-large {
	background-color: var(--color-theme);
	color: var(--color-white);
	display: inline-block;
	flex-grow: 0;
	flex-shrink: 0;
	height: inherit;
	left: 0px;
	line-height: inherit;
	max-width: calc(var(--ca-cell-250) - 6px);
	min-width: calc(var(--ca-cell-250) - 6px);
	padding: 0vh 3px;
	position: sticky;
	top: 0px;
	width: calc(var(--ca-cell-250) - 6px);
	z-index: 19;
}

.controleatividade-header-cell-fixed-medium {
	background-color: var(--color-theme);
	color: var(--color-white);
	display: inline-block;
	flex-grow: 0;
	flex-shrink: 0;	
	height: inherit;
	left: var(--ca-cell-250);
	line-height: inherit;
	max-width: calc(var(--ca-cell-200) - 6px);
	min-width: calc(var(--ca-cell-200) - 6px);
	padding: 0vh 3px;
	position: sticky;
	top: 0px;
	width: calc(var(--ca-cell-200) - 6px);
	z-index: 19;
}

.controleatividade-header-cell {
	color: var(--color-white);
	display: inline-block;
	height: inherit;
	line-height: inherit;
	padding: 0vw 3px;
	max-width: calc(var(--ca-cell) - 6px);
	min-width: calc(var(--ca-cell) - 6px);
	width: calc(var(--ca-cell) - 6px);
	z-index: 18;
}

.controleatividade-body-container {
	background-color: var(--color-white);
	border-bottom: 1px solid var(--color-gray-light);
	height: var(--ca-body-height);
	line-height: var(--ca-body-height);
	margin: 1px 0px;
	padding-bottom: 1px;
	width: max-content;
	z-index: 17;
}

.controleatividade-body-cell-fixed-large {
	background-color: var(--color-white);
	color: var(--color-theme-dark);
	display: inline-block;
	flex-grow: 0;
	flex-shrink: 0;
	height: inherit;
	line-height: inherit;
	max-width: calc(var(--ca-cell-250) - 6px);
	min-width: calc(var(--ca-cell-250) - 6px);
	padding:  0vh 3px;
	position: sticky;
	left: 0px;
	width: calc(var(--ca-cell-250) - 6px);
	z-index: 16;
}

.controleatividade-body-cell-fixed-medium {
	background-color: var(--color-white);
	color: var(--color-theme-dark);
	display: inline-block;
	flex-grow: 0;
	flex-shrink: 0;
	height: inherit;
	left: var(--ca-cell-250);
	line-height: inherit;
	max-width: calc(var(--ca-cell-200) - 3px);
	min-width: calc(var(--ca-cell-200) - 3px);
	padding: 0vh 3px;
	position: sticky;
	width: calc(var(--ca-cell-200) - 3px);
	z-index: 16;
}

.controleatividade-body-cell {
	background-color: inherit;
	color: var(--color-black);
	display: inline-block;
	height: inherit;
	line-height: inherit;
	padding: 0vw 3px;
	max-width: calc(var(--ca-cell) - 6px);
	min-width: calc(var(--ca-cell) - 6px);
	width: calc(var(--ca-cell) - 6px);
	z-index: 15;
}

.controleatividade-input {
	background-color: var(--color-white);
	border: 1px solid var(--color-gray);
	border-radius: var(--border-radius);
	color: var(--color-theme-dark);
	max-width: calc(98% - 4px);
	min-width: calc(98% - 4px);
	padding: 3px 2px;
	width: calc(98% - 4px);
}

.controleatividade-select {
	background-color: var(--color-white);
	border: 1px solid var(--color-gray);
	border-radius: var(--border-radius);
	color: var(--color-theme-dark);
	max-width: calc(98% - 4px);	
	min-width: calc(98% - 4px);
	padding: 2px 2px;
	width: calc(98% - 4px);
}

.controleatividade-prepend-icon {
	max-width: calc(100% - 50px);	
	min-width: calc(100% - 50px);
	width: calc(100% - 50px);	
}

.controleatividade-input-disabled {
	background-color: var(--color-gray-light) !important;
	border: 1px solid var(--color-gray);
	border-radius: var(--border-radius);
	color: var(--color-gray-dark) !important;
	max-width: calc(98% - 4px);	
	min-width: calc(98% - 4px);
	padding: 2px 2px;
	width: calc(98% - 4px);
}

.controleatividade-box {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: var(--spacer-small);
}

.controleatividade-allocation-red {
	background-color: #F0CBCB;
	border: 1px solid #D90000;
	color: #D90000;
}

.controleatividade-allocation-yellow {
	background-color: #FDEBCC;
	border: 1px solid #FFAA00;
	color: #FFAA00;
}

.controleatividade-allocation-green {
	background-color: #CEEFCE;
	border: 1px solid #007000;
	color: #007000;
}

.controleatividade-allocation-white {
	background-color: var(--color-white);
	border: 1px solid #CCCCCC;
	color: var(--color-black);
}

.controleatividade-allocation-black {
	background-color: var(--color-black);
	border: 1px solid #808080;
	color: var(--color-white);
}


/* CONTROLE ATIVIDADE */

/* META */

.input-td {
	width: 100%;
	box-sizing: border-box;
	margin-right: 10%;
	border: 1px solid var(--color-theme-light);
	border-radius: 4px;
	color: var(--color-theme);
}

.input-td-disabled {
	width: 100%;
	box-sizing: border-box;
	margin-right: 10%;
	border: 1px solid var(--color-theme-dark);
	border-radius: 4px;
	color: var(--color-theme);
	background-color: #f2f2f2;
}

/* META */

/* GERENCIAL */

.page-content-actions {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	align-self: stretch;
}

.page-content-action {
	display: flex;
	align-items: center;
	align-self: stretch;
	flex-direction: row;
	justify-content: center;

	color: var(--color-white);
	cursor: pointer;
	background-color: var(--color-theme);
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);

	margin: 0px 3px;
	padding: 8px 8px 10px;
	width: 115px;
	height: 20px;
	transition: all 100ms linear;
}

.separator-line {
	border: 3px solid #D93A00;
	border-radius: 6px;
}

.page-content-action:hover, .active, .separator-line {
	transform: translateY(-6px);
	background-color: #D93A00;
}

.rounded-months-container-inline {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: var(--spacer);
}

.rounded-months-item {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--big-font-size);
	color: var(--color-theme);
	cursor: pointer;
	background-color: var(--color-gray);
	border-radius: 50%;
	width: 62px;
	height: 62px;
	transition: all 100ms linear;
}

.rounded-months-item:hover, .rounded-months-item-active {
	color: var(--color-white);
	background-color: var(--color-theme);
}

.rounded-months-item-disabled {
	color: var(--color-white);
	background-color: var(--color-theme-light);
}

.table-header > * {
	background-color: var(--color-theme-light);
	color: var(--color-white);
	padding: 5px;
	text-transform: uppercase;
}

.sub-table-header > * {
	background-color: var(--color-gray-dark);
	color: var(--color-white);
	padding: 0px 5px;
	text-transform: uppercase;
}

/* GERENCIAL */

/* GESTAO DE PLANEJAMENTO */

.modal {
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0, 0, 0); /* Fallback color */
	background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content/Box */

.modal-content {
	background-color: #fefefe;
	margin: 15% auto; /* 15% from the top and centered */
	padding: 60px 20px 60px 20px;
	border: 1px solid #888;
	width: 80%; /* Could be more or less, depending on screen size */
}

.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover, .close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

/* GESTAO DE PLANEJAMENTO */
/* DOCUMENTOS */

.document-preview > aside:nth-child(1) {
	/** FLEX **/
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/** FLEX **/
	background-color: var(--color-gray-light);
	border-bottom: 1px solid var(--color-theme);
	border-left: 1px solid var(--color-theme);
	border-right: 1px solid var(--color-theme);
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	box-shadow: 0px 5px 10px rgba(16, 16, 16, 0.8);
	height: calc(90vmin - var(--header-height));
	max-height: calc(90vmin - var(--header-height));
	overflow-y: auto;
	padding: var(--spacer);
	position: fixed;
	top: -200%;
	transition: top .7s;
	z-index: 10;
	left: 50%;
	margin-left: -37.5%;
	width: calc(75% - var(--spacer) - var(--spacer));
    top: var(--header-height);
}

.document-preview > aside:nth-child(1) > a {
	var(--color-red);
	font-size: 15px;
	align-self: flex-end;
	cursor: pointer;
}

.document-preview > aside:nth-child(1) > span > b {
	color: var(--color-theme) !important;
	font-size: 20px;
	padding: 0vh 0vw;
	text-transform: capitalize;
}

.document-preview > aside:nth-child(1) > span > a {
	color: var(--color-green);
	font-size: 15px;
	align-self: flex-end;
	cursor: pointer;
}

.document-preview > aside:nth-child(2) {
	background-color: rgba(16, 16, 16, 0.8);
	border: unset;
	height: 100vh;
	left: 0vw;
	margin: 0vh 0vw;
	padding: 0vh 0vw;
	position: fixed;
	top: 0vh;
	transition: opacity .7s;
	width: 100vw;
	opacity: 1;
	z-index: 9;
}

/* DOCUMENTOS */

/* TEXTAREA FONT */

textarea {
	font-family: var(--font-family) !important;
	font-size: 16px !important;
}

textarea::placeholder {
	font-family: var(--font-family) !important;
	font-size: 16px !important;
}
/* TEXTAREA FONT */

.table-header > * {
	background-color: var(--color-theme-light);
	color: var(--color-white);
	padding: 5px;
	text-transform: uppercase;
}

.sub-table-header > * {
	background-color: var(--color-gray-dark);
	color: var(--color-white);
	padding: 0px 5px;
	text-transform: uppercase;
}