
:root{
	--default-01:#000;
	--default-02:#fff;
	--default-03:#fff;
	--blue-01:#2f3c48;
	--blue-02:#0c1419f2;
	--blue-03:#617a92;
	--orange-01:#ff9900;
}

.sapSuiteUiCommonsTimeline{
	max-width: none !important;
}

.sapUiFormTitleH6 {
	height: 0px !important;
}
.webAplicationPositive {
	color: #00b894 !important;
}
.webAplicationNegative {
	color: #d63031 !important;
}

.tableRanges {
	background-color: #607D8B;
	border: #607D8B 1px solid;
}
.tableLevels {
	background-color:  #90A4AE;
	border: #90A4AE 1px solid;
}
.tableApprovers {
	background-color:  #B0BEC5;
	border: #B0BEC5 1px solid;
}

.loginBG:before {
	content: "";
	position: inherit;
	z-index: -1;  
	display: block;
	opacity: 0.2;
	/* background-image: linear-gradient(var(--blue-01), var(--blue-02)), url("../img/bg-predio.jpg"); */
	/* background-image: url("../img/bg3.jpg"); */
	background-color: #B0BEC5;
	background-size: cover;
	width: 100%;
	height: inherit;
	overflow: hidden;
}


.bg-transparent{
	background-color: rgba(255, 255, 255, 0);
}

.bg-white{
	background-color: GhostWhite;
}

.bg-black{
	background-color:  Black;
}
.bg-grey{
	background-color:  Grey;
}
.bg-golden{
	background-color:  GoldenRod;
}

.img-logo-topo{
	margin-left: 1rem !important;
}
div {
	outline: none !important;
}
section {
	outline: none !important;
}
span {
	outline: none !important;
}

.sectionFill {
	min-height:  460px;
}

.custom-control-center-cost-round{
	padding: 1px 2px 1px 1px;
	background: #227093;
	border-radius: 3px;	
	display: inline;	
	line-height: 1.5em;
	margin-right: 2px;
	color: #FFF;
}

.Login-left{
	height: 22rem;
}
	.Login-left > div {
		width: 190px;
		height: 22rem;
		opacity: 1;
		border-radius: 15px 0px 0px 15px;
		background-image: url("/img/customer1.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
	}
.Login-left-black>div{
	width: 190px;
	height: 20rem;	
	opacity: 1;
	border-radius: 15px 0px 0px 15px;
	background-color: Black;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
}
.Login-left-white>div{
	width: 190px;
	height: 20rem;	
	opacity: 1;
	border-radius: 15px 0px 0px 15px;
	background-color: White;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
}
.Login-left-gold>div{
	width: 190px;
	height: 20rem;	
	opacity: 1;
	border-radius: 15px 0px 0px 15px;
	background-color: gold;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
}
.Login-left-darkorange>div{
	width: 190px;
	height: 20rem;	
	opacity: 1;
	border-radius: 15px 0px 0px 15px;
	background-color: darkorange;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
}
.Login-left-indianred>div{
	width: 190px;
	height: 20rem;	
	opacity: 1;
	border-radius: 15px 0px 0px 15px;
	background-color: indianred;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
}
.Login-left-darkmagenta>div{
	width: 190px;
	height: 20rem;	
	opacity: 1;
	border-radius: 15px 0px 0px 15px;
	background-color: darkmagenta;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
}
.Login-left-cornflowerblue>div{
	width: 190px;
	height: 20rem;	
	opacity: 1;
	border-radius: 15px 0px 0px 15px;
	background-color: cornflowerblue;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
}
.Login-left-deepskyblue>div{
	width: 190px;
	height: 20rem;	
	opacity: 1;
	border-radius: 15px 0px 0px 15px;
	background-color: deepskyblue;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
}
.Login-left-darkcyan>div{
	width: 190px;
	height: 20rem;	
	opacity: 1;
	border-radius: 15px 0px 0px 15px;
	background-color: darkcyan;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
}
.Login-left-olivedrab>div{
	width: 190px;
	height: 20rem;	
	opacity: 1;
	border-radius: 15px 0px 0px 15px;
	background-color: olivedrab;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
}
.Login-left-darkslategray>div{
	width: 190px;
	height: 20rem;	
	opacity: 1;
	border-radius: 15px 0px 0px 15px;
	background-color: darkslategray;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
}
.Login-left-azure>div{	
	width: 190px;
	height: 20rem;	
	opacity: 1;
	border-radius: 15px 0px 0px 15px;
	background-color: azure;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
}
.Login-left-lightgray>div{
	width: 190px;
	height: 20rem;	
	opacity: 1;
	border-radius: 15px 0px 0px 15px;
	background-color: lightgray;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
}
.Login-left-darkgray>div{
	width: 190px;
	height: 20rem;	
	opacity: 1;
	border-radius: 15px 0px 0px 15px;
	background-color: darkgray;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
}
.Login-left-dimgray>div{
	width: 190px;
	height: 20rem;	
	opacity: 1;
	border-radius: 15px 0px 0px 15px;
	background-color: dimgray;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
}

.iv-custom-login{
	margin-top: 2rem;
	width: 300px;
	min-height: 100px;
	height: 100%;
	opacity: 0.82;
    border-radius: 0 2px 2px 0;
    float: left;
}


.titleForm{
	align-content: center;
}


.LogoApp{
	margin-left: 35.5%;
	align-content: center;
}

.btn-login{
	border-radius: 0.25rem;
	font-weight:600;
}
.btn-login>span{
	height: 2rem !important;
	color: white !important;
	background-color: var(--blue-01) !important;
}
.btn-login> :hover{
	color: white !important;
	background-color: grey !important;
}

.iv-custom-company-list{
	width: 300px;
	min-height: 100px;
	height: auto;
    background: #fff;
    border-radius: 2px;
    margin-top: 10px;
    float: left;
    border-top: 6px solid var(--orange-01);
}

.v-custom-company-list {
	width: 300px;
	min-height: 100px;
	height: auto;
	opacity: 0.82;
	border-radius: 0 2px 2px 0;
	float: left;
	align-content: center;
}

.sapMListTblCell.cellBorderRight {
	border-right: 1px solid lightgray;
}

.sapMListTblCell.cellBorderLeft {
	border-left: 1px solid lightgray;
}

.sapMLIB .sapMListSelectedRow{
    background: #e8e8e8;
}

.sapMListTblCell.cellBorderRight {
	border-right: 1px solid lightgray;
}

.sapMListTblCell.cellBorderLeft {
	border-left: 1px solid lightgray;
}

.tinyBorder{
	border: solid 0.5px #CCC;
}

.size1 {
	font-size : 1.5rem;
}
.size2 {
	font-size : 2.5rem;
}
.size3 {
	font-size : 5rem;
}
.size4 {
	font-size : 7.5rem;
}
.size5 {
	font-size : 10rem;
}

@media (max-width:599px) {
	.size1 {
		font-size : 1rem;
	}
	.size2 {
		font-size : 2rem;
	}
	.size3 {
		font-size : 3rem;
	}
	.size4 {
		font-size : 4rem;
	}
	.size5 {
		font-size : 5rem;
	}
}

/* ==============================================
   Security Login Theme
   ============================================== */

.loginBG-security,
.loginBG-security.sapMPage {
	background: linear-gradient(135deg, #050e1d 0%, #0a1628 60%, #071020 100%) !important;
}
.loginBG-security::before {
	display: none !important;
}
.loginBG-security .sapMPageSub {
	background: transparent !important;
}

/* Outer wrapper – fills the page and centers the card */
.sec-outer-wrap {
	width: 100%;
	min-height: calc(100vh - 3rem);
	padding: 1.5rem 1rem;
	box-sizing: border-box;
	background: linear-gradient(135deg, #050e1d 0%, #0a1628 60%, #071020 100%);
}

/* Main card */
.sec-card {
	
	max-width: 100%;
	min-height: 520px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow:
		0 0 0 1px rgba(33,150,243,0.2),
		0 0 40px rgba(33,150,243,0.12),
		0 20px 60px rgba(0,0,0,0.7);
}

/* ---- LEFT PANEL ---- */
.sec-left {
	width: 380px;
	min-height: 520px;
	background-color: #080f1e;
	background-image:
		linear-gradient(rgba(33,150,243,0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(33,150,243,0.04) 1px, transparent 1px),
		linear-gradient(160deg, #0b1933 0%, #060f1e 100%);
	background-size: 30px 30px, 30px 30px, 100%;
	padding: 2.5rem 2rem;
	flex-shrink: 0;
}

/*
 * The controller's onLoadLogoDefintions may add a Login-left-* class to panelLogoCompany.
 * Those classes have "> div" rules that apply background-images to SAPUI5 flex items.
 * This block resets all of that when inside .sec-left.
 */
.sec-left > div {
	background-image: none !important;
	background-color: transparent !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	float: none !important;
	opacity: 1 !important;
}

/* Lock arc (shackle) */
.sec-lock-shackle {
	position: absolute;
	width: 34px;
	height: 19px;
	border: 5px solid #90CAF9;
	border-bottom: none;
	border-radius: 17px 17px 0 0;
	left: 43px;
	top: 52px;
}


/* Left footer */
.sec-left-footer {
	margin-top: 2rem;
	padding: 0 0.5rem;
}

.sec-footer-lock-icon {
	font-size: 1.4rem !important;
	color: #4a6888 !important;
	margin-right: 0.6rem;
	flex-shrink: 0;
}
.sec-slogan-text.sapMText {
	color: #4a6888 !important;
	font-size: 0.78rem !important;
	line-height: 1.6 !important;
}

/* ---- RIGHT PANEL ---- */
.sec-right {
	flex: 1;
	min-width: 360px;
	background: #0d1b2a;
	padding: 2.5rem 3rem;
}

.sec-form-inner {
	width: 300px;
}

/* Header icon + title */
.sec-title-shield {
	font-size: 2.75rem !important;
	color: #2196F3 !important;
	margin-bottom: 0.4rem;
	filter: drop-shadow(0 0 8px rgba(33,150,243,0.6));
	align-self: center;
}
.sec-portal-title .sapMTitleSpan {
	color: #e8f0fe !important;
	font-size: 1.7rem !important;
	font-weight: 700 !important;
}
.sec-portal-title {
	align-self: center;
	margin-bottom: 0.15rem;
}
.sec-portal-subtitle.sapMText {
	color: #6a8cae !important;
	font-size: 0.875rem !important;
	align-self: center;
	margin-bottom: 1.25rem;
}

/* Labels */
.sec-field-label.sapMLabel {
	color: #8aa8c4 !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	margin-top: 0.75rem;
	margin-bottom: 0.2rem;
}

/*
 * Input group — the HBox is a POSITIONING CONTEXT only (no visual border/bg).
 * The .sapMInputBase itself carries all dark-theme visuals so there is only
 * ONE visible container and focus state is handled naturally by SAPUI5.
 */
.sec-input-group {
	position: relative !important;
	width: 300px;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Left icon — absolute, sits inside the input's padding area */
.sec-input-group > .sapMFlexItem:first-child {
	position: absolute !important;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	flex: none !important;
	pointer-events: none;
}
.sec-input-icon {
	color: #3d5a7a !important;
	font-size: 1rem !important;
}

/* Input flex item fills full width */
.sec-input-group > .sapMFlexItem:nth-child(2) {
	flex: 1 1 auto !important;
	min-width: 0;
	width: 100%;
}

/* Toggle button — absolute, right side */
.sec-input-group > .sapMFlexItem:nth-child(3) {
	position: absolute !important;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	flex: none !important;
}

/* .sapMInputBase is now the sole visual container */
.sec-input-group .sapMInputBase {
	background-color: #111e33 !important;
	border: 1px solid #1e3352 !important;
	border-radius: 8px !important;
	width: 100% !important;
	height: 2.5rem !important;
	box-sizing: border-box !important;
	padding-left: 2.5rem !important;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.sec-input-group .sapMInputBaseContentWrapper {
    padding-left: 1.5rem !important;
}

.sec-input-group .sapMInputBase.sapMInputBaseHovered {
	background-color: #111e33 !important;
	border-color: #2a4a6a !important;
}
.sec-input-group .sapMInputBase.sapMInputBaseFocused {
	background-color: #111e33 !important;
	border-color: #2196F3 !important;
	box-shadow: 0 0 0 3px rgba(33,150,243,0.15) !important;
	outline: none !important;
}
/* Suppress SAPUI5 focus pseudo-element ring (SAP Horizon theme) */
.sec-input-group .sapMInputBase::before,
.sec-input-group .sapMInputBase::after {
	display: none !important;
}

/* Password field — extra right padding so text doesn't overlap toggle */
.sec-pass-group .sapMInputBase {
	padding-right: 2.5rem !important;
}

/* Inner wrapper and content wrapper (newer UI5 versions) */
.sec-input-group .sapMInputBaseWrapper,
.sec-input-group .sapMInputBaseContentWrapper {
	background: transparent !important;
	border: none !important;
	height: 100% !important;
}

/* Actual <input> element */
.sec-input-group .sapMInputBaseInner,
.sec-input-group input.sapMInputBaseInner {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	color: #c8d8ec !important;
	height: 2.5rem !important;
	line-height: 2.5rem !important;
	padding: 0 !important;
}
.sec-input-group .sapMInputBaseInner::placeholder {
	color: #334e6a !important;
}

/* Password toggle */
.sec-pass-toggle-btn .sapMBtnInner {
	background: transparent !important;
	border: none !important;
	color: #3d5a7a !important;
	min-width: 2rem !important;
	padding: 0 !important;
	height: 2.5rem !important;
	box-shadow: none !important;
}
.sec-pass-toggle-btn .sapMBtnInner:hover {
	color: #90CAF9 !important;
}

/* Remember / Forgot row */
.sec-row-remember {
	width: 300px;
	margin: 0.75rem 0;
}
/* Checkbox — dark theme */
.sec-checkbox .sapMCbBg {
	background: transparent !important;
	border-color: #2d4f70 !important;
}
.sec-checkbox .sapMCb:hover .sapMCbBg,
.sec-checkbox .sapMCbHovered .sapMCbBg {
	border-color: #42A5F5 !important;
	background: rgba(33,150,243,0.08) !important;
}
.sec-checkbox .sapMCb.sapMCbChecked .sapMCbBg,
.sec-checkbox .sapMCb.sapMCbChecked:hover .sapMCbBg {
	background: #1976D2 !important;
	border-color: #1976D2 !important;
}
.sec-checkbox .sapMCbLabel {
	color: #6a8cae !important;
	font-size: 0.85rem !important;
}
.sec-forgot-link.sapMLnk {
	color: #42A5F5 !important;
	font-size: 0.85rem !important;
}
.sec-forgot-link.sapMLnk:hover {
	color: #90CAF9 !important;
}

/* Login button */
.sec-btn-enter .sapMBtnInner {
	background: #1976D2 !important;
	border-color: #1976D2 !important;
	color: #fff !important;
	border-radius: 8px !important;
	height: 2.75rem !important;
	font-weight: 600 !important;
	justify-content: center !important;
}
.sec-btn-enter .sapMBtnInner:hover {
	background: #1565C0 !important;
	border-color: #1565C0 !important;
}

/* Or separator */
.sec-or-row {
	width: 300px;
	margin: 0.9rem 0;
	gap: 0.75rem;
}
/* The sapUiHTML wrapper must flex-grow so the hr lines expand */
.sec-or-row .sapUiHTML {
	flex: 1;
	display: flex;
	align-items: center;
}
.sec-hr-line {
	flex: 1;
	height: 1px;
	background: rgba(255,255,255,0.1);
	width: 100%;
}
.sec-or-text.sapMText {
	color: #3d5a7a !important;
	font-size: 0.8rem !important;
	white-space: nowrap;
}

/* Register button */
.sec-btn-register .sapMBtnInner {
	background: transparent !important;
	border: 2px solid #1976D2 !important;
	color: #64B5F6 !important;
	border-radius: 8px !important;
	height: 2.75rem !important;
	font-weight: 500 !important;
	justify-content: center !important;
}
.sec-btn-register .sapMBtnInner:hover {
	background: rgba(25,118,210,0.1) !important;
	color: #90CAF9 !important;
}

/* Security badge footer */
.sec-badge {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255,255,255,0.07);
	width: 300px;
	gap: 0.5rem;
}
.sec-badge-shield-icon {
	font-size: 1.2rem !important;
	color: #3d5a7a !important;
	margin-right: 0.5rem;
}
.sec-badge-title-text.sapMText {
	color: #5a7a9a !important;
	font-size: 0.8rem !important;
	font-weight: 600 !important;
}
.sec-badge-subtitle-text.sapMText {
	color: #3d5a7a !important;
	font-size: 0.73rem !important;
}

/* Responsive */
@media (max-width: 768px) {
	.sec-left {
		display: none !important;
	}
	.sec-card {
		width: 100%;
		max-width: 420px;
	}
	.sec-right {
		padding: 2rem 1.5rem;
		min-width: unset;
		width: 100%;
	}
	.sec-form-inner,
	.sec-input-group,
	.sec-row-remember,
	.sec-or-row,
	.sec-badge {
		width: 100% !important;
	}
}
.sec-input-group input.sapMInputBaseInner:-webkit-autofill,
.sec-input-group input.sapMInputBaseInner:-webkit-autofill:hover,
.sec-input-group input.sapMInputBaseInner:-webkit-autofill:focus {
    -webkit-text-fill-color: #c8d8ec !important;

    /* fundo */
    -webkit-box-shadow: 0 0 0 1000px #111e33 inset !important;

    /* ESSENCIAL */
    border-radius: 8px !important;
    background-clip: padding-box !important;

    /* ajuda a eliminar o brilho nas bordas */
    outline: none !important;

    /* suaviza o efeito visual */
    transition: background-color 9999s ease-out 0s !important;
}

.logoCompany {
    animation: spinPulse 6s infinite;
    transform-origin: center;
    display: inline-block;
    width: 10rem;
}

@keyframes spinPulse {
    0%   { transform: rotateY(0deg); }
    80%  { transform: rotateY(0deg); }   /* fica parado ~5s */
    100% { transform: rotateY(360deg); } /* gira rápido no final */
}