create-pro-fiori-app-cli/pro-fiori-template/webapp/css/style.css

SAPUI5/Fiori projeleri için akıllı proje oluşturucu ve yönetici. Kod üretimi, deployment ve kalite kontrol otomasyonu sağlar.

/* Enter your custom styles here */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600&display=swap");

*:focus::after,
*:focus {
  border: none !important;
  outline: none !important;
}

:root {
  --primary-color: #007aff;
  --secondary-color: #ed7700;
}

td:has([data-colorClass="00040"]) span {
  color: rgb(16 81 35) !important;
}

td:has([data-colorClass="00030"]) span {
  color: rgb(128 104 4) !important;
}

td:has([data-colorClass="00002"]) span {
  color: #8c0482 !important;
}

td:has([data-colorClass="00041"]) span {
  color: #860000 !important;
}

.sapMInputBaseDisabled {
  background-color: #eaeaea;
  opacity: 1;
}


.sapMBtn .sapMBadge.sapMBadgeTopRight .sapMBadgeIndicator {
  background-color: transparent !important;
}

.max-h-70 {
  max-height: 70px !important;
}

html.sap-desktop
  .sapMBtn:focus
  > .sapMFocusable:not(.sapMBadgeIndicator):before,
html.sap-desktop .sapMSwtCont:focus > .sapMSwt:before,
.sapMCb:focus:before,
html.sap-desktop .sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after {
  border: none !important;
}

.sapFCardHeader:not(.sapFCardHeaderToolbarFocused):focus-within::before,
.sapFGridContainer
  .sapFGridContainerItemWrapperNoVisualFocus:focus
  .sapFCardHeader:not(.sapFCardHeaderToolbarFocused)::before,
.sapFGridContainer
  .sapFGridContainerItemWrapperNoVisualFocus:focus
  .sapFCard.sapFCardNoHeader::before {
  border: none !important;
}

.sapMMsgStripMessage {
  overflow: hidden !important;
}

.sapMTile {
  border-radius: 10px !important;
}

.sapFCard:not(.sapFCardPreview):not(.sapFCardTransparent):hover {
  box-shadow: 0 0 0 0.0625rem rgb(85 107 130 / 10%),
    0 0.125rem 0.5rem 0 rgb(85 107 130 / 10%);
}

.sapUiSizeCompact .sapMSLI.sapMSLIThumbnail,
.sapUiSizeCompact .sapMSLI.sapMSLINoIconInset,
.sapUiSizeCompact .sapMSLI.sapMSLIWithDescription,
.sapUiSizeCompact .sapMSLI.sapMSLINoTitleAdapt {
  height: 4rem;
}

.sapMSltMinWidth {
  min-width: 4.88rem;
}

.sapMTBStandard {
  border-bottom: none;
}

.sapMTB.sapMTBStandard {
  border-bottom: none;
}


.Welcome {
  margin-top: 80px;
}

.xlsLoader,
.xlsLoader > div {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(240, 240, 240, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

tr:has([data-status="stts_7"]),
tr:has([data-status="stts_16"]) {
  background-color: #e5ffde !important;
}

tr:has([data-status="stts_6"]),
tr:has([data-status="stts_2"]) {
  background-color: #ebf8ff !important;
}

tr:has([data-status="stts_8"]),
tr:has([data-status="stts_17"]) {
  background-color: rgb(254, 255, 222) !important;
}

tr:has([data-status="stts_4"]),
tr:has([data-status="stts_10"]),
tr:has([data-status="stts_9"]) {
  background-color: #f1f1f1 !important;
}

tr:has([data-status="stts_0"]) {
  background-color: #fdf4d6 !important;
}

tr:has([data-status="stts_1"]) {
  background-color: #e7fff9 !important;
}

html.sap-desktop .sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after {
  border: none !important;
}

a {
  word-break: break-all !important;
}

.spMessageStrip .sapMText {
  line-height: 1 !important;
}

.spMessageStrip {
  padding: 0.3375rem 0.5rem;
  min-height: 0.4rem;
  font-size: 0.175rem;
  min-width: 64px;
  width: 100% !important;
  text-align: center;
}

.spCustomerRes .sapFCardHeaderTextSecondLine {
  text-decoration: underline;
  color: var(--sapContent_Illustrative_Color13);
}

.spCustomerRes .sapFCardHeaderTextSecondLine span {
  color: var(--sapContent_Illustrative_Color13);
}

.sapMRb:focus:before,
html.sap-desktop
  .sapMBtn:focus
  > .sapMFocusable:not(.sapMBadgeIndicator):before {
  border: none !important;
}

.sapMCb .sapMLabel {
  line-height: inherit !important;
}

.infoNone .sapMSLIInfoNone {
  display: none !important;
}

.sapMNCValue.Neutral,
.sapMNCIndScale.Neutral,
.sapMNCScale.Neutral {
  color: #556b82;
}

.sapFShellBar .sapFShellBarProfile:hover::before {
  background-color: transparent !important;
}

.page {
  height: calc(100vh - 48px) !important;
  position: relative;
}

.sapMSltPressed:not(.sapMSltDisabled):not(.sapMSltState),
.sapMSlt.sapMSltFocused:not(.sapMSltDisabled):not(.sapMSltState) {
  background: transparent !important;
}

/* ---------------------------------------------------------------------- */

.homeIllus {
  width: 100%;
  max-width: 400px;
}

input[name="pass"],
input[name="user"],
input[name="makine"],
input[name="customerCode"] {
  padding-left: 40px !important;
  height: 45px !important;
  width: clamp(250px, 70vw, 280px) !important;
  color: #384651 !important;
}

.login-bg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.login-card {
  width: clamp(300px, 80vw, 400px) !important;
  background-color: white;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border-radius: 7px;
}

.bg-primary {
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  width: clamp(300px, 80vw, 400px) !important;
}

.backdrop {
  background: url("../img/backgrounds/bg.png") center;
  background-size: cover;
  background-position: center center;
  width: 100svw;
}

.bg-primary .sapMInputBaseContentWrapper {
  background-color: transparent !important;
}

html.sap-desktop .bg-primary .sapMLnk:focus:not(.sapMLnkDsbl) {
  background-color: transparent !important;
  color: #0064d9;
}

.bg-primary .sapMLnk:visited {
  color: #384651;
}

.glass {
  background: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 8px 32px 0 rgba(70, 70, 70, 0.37) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.spInput {
  height: 45px !important;
}

.spIcon {
  position: absolute !important;
  z-index: 2 !important;
  left: 10px !important;
  top: -10px !important;
}

.loginBtn,
.loginBtn > .sapMBtnInner {
  height: 45px !important;
  width: clamp(250px, 70vw, 280px) !important;
  display: flex !important;
  align-items: center !important;
}

.loginBtn > .sapMBtnInner {
  background-color: #384651 !important;
  color: white !important;
}

.mt-1px {
  margin-top: 0.8px !important;
}

.workerCon,
.infText,
.LogoCon,
.UISAPLogoCon {
  display: none;
}

.mobileLogoCon {
  display: flex;
}

.linkGap {
  gap: 5px 20px;
  max-width: 400px;
  margin: auto;
}

.welcomeText {
  font-size: 1.2rem;
}

.LogoCon {
  position: absolute;
  top: 20px;
  left: 45px;
}

.UISAPLogoCon {
  position: absolute;
  bottom: 20px;
  right: 45px;
}

/* ****************************************** */

@media (min-width: 320px) {
}

/* Small devices (landscape phones, 425px and up) */

@media (min-width: 425px) {
}

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
}

/* Extra large devices (large desktops, 1024px and up) */

@media (min-width: 1024px) {
  .workerCon {
    display: flex;
    width: 50%;
  }
  .bg-primary {
    width: 50%;
  }
  .login-card {
    width: clamp(300px, 80vw, 400px) !important;
  }
}

/* Extra extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
}

/* Extra extra extra large devices (large desktops, 1440px and up) */

@media (min-width: 1440px) {
}

/* Extra extra extra extra large devices (large desktops, 1600px and up) */

@media (min-width: 1600px) {
}

/* Extra extra extra extra extra large devices (large desktops, 1800px and up) */

@media (min-width: 1800px) {
}

/* Extra extra extra extra extra extra large devices (large desktops, 2000px and up) */

@media (min-width: 2000px) {
}

/* ******************************************************************************   */

@media (min-height: 570px) {
  .infText {
    display: block;
  }
  .welcomeText {
    font-size: 1.3rem;
  }
}

@media (min-height: 680px) {
  .UISAPLogoCon {
    display: block;
  }
  .UISAPLogoMobile {
    display: none;
  }
}

@media (min-height: 770px) {
  .LogoCon {
    display: block;
  }
  /* .mobileLogoCon {
        display: none;
    } */
  .welcomeText {
    font-size: 2rem;
  }
  .bg-primary {
    padding: 16px 0px !important;
  }
  .loginBtn {
    margin-bottom: 12px !important;
  }
}

/* ---------------------------------------------------------------------- */

.sapMMsgStripMessage {
  overflow: hidden !important;
}

.sapFCardHeader:not(.sapFCardHeaderToolbarFocused):focus-within::before,
.sapFGridContainer
  .sapFGridContainerItemWrapperNoVisualFocus:focus
  .sapFCardHeader:not(.sapFCardHeaderToolbarFocused)::before,
.sapFGridContainer
  .sapFGridContainerItemWrapperNoVisualFocus:focus
  .sapFCard.sapFCardNoHeader::before {
  border: none !important;
}

.spBar {
  position: absolute !important;
  bottom: 0 !important;
  width: 100% !important;
}

.btnActive > span {
  border: solid 1px #0064d9 !important;
}

.text-elipsis {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 250px !important;
}


.sapUiRespGridSpanInvisible {
  min-height: 0 !important;
}

.cardCons > div > .sapFCard {
  box-shadow: none !important;
}

.cardInfo.sapUiRespGrid.sapUiRespGridVSpace1 > div > .sapFCard {
  box-shadow: none !important;
}

.sapFCard:not(.sapFCardPreview):not(.sapFCardTransparent):hover {
  box-shadow: 0 0 0 0.0625rem rgb(85 107 130 / 10%),
    0 0.125rem 0.5rem 0 rgb(85 107 130 / 10%) !important;
}

.cardInfo.sapUiRespGrid.sapUiRespGridVSpace1 > div {
  margin-bottom: 0rem !important;
}

.spPanel > .sapMPanelContent {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.spInputAG input {
  padding-right: 45px !important;
}

.white-bg {
  background-color: #fff !important;
}

.easy-toast,
.easy-toast:after,
.easy-toast:before {
  word-break: break-word;
}

.sapFCard .sapFCardHeader .sapFCardSubtitle {
  font-size: 0.79rem !important;
}

.glass-input > div {
  height: auto !important;
  background: rgba(255, 255, 255, 0.35) !important;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px !important;
}

.glass-input > div::before {
  border: none !important;
}

.spInput {
  height: 45px !important;
}

.sapMSLITitle {
  text-transform: uppercase;
}

.VBoxCon {
  padding-top: 12px;
}

.sapMLIB > .sapMLIBSelectS:first-child,
.sapMLIB > .sapMLIBSelectM:first-child {
  margin-left: 0;
}

.sapMTB.sapMTBStandard {
  border-bottom: solid 0rem #a8b3bd;
}

.sapMILI-CTX .sapMInputBaseContentWrapperError,
.sapMInputBaseContentWrapper,
.sapMSlt {
  background-color: transparent;
}

.sapMInputBaseContentWrapperWarning {
  background: 0 100% / 100% 0.0625rem no-repeat
    linear-gradient(0deg, #e76500, #e76500) border-box;
}

.sapMLIB {
  padding: 0 1rem;
}

.sapMSFF {
  background: 0 100% / 100% 0rem no-repeat
    linear-gradient(0deg, #556b81, #556b81) border-box !important;
  /* background-color: #eff1f2 !important; */
  border: solid 0.5px #556b81;
}

html.sap-desktop .sapMSelectListItemBase:focus::after,
.sapMSltPicker-CTX .sapMSelectListItemBaseSelected::after,
.sapMComboBoxBasePicker-CTX .sapMSelectListItemBaseSelected::after {
  outline: 0.08rem solid #0070f2;
}

html.sap-desktop .sapMFooter-CTX .sapMBtnInner.sapMBtnReject {
  border-color: transparent !important;
}

span.sapMBtnInner.sapMBtnReject {
  background-color: transparent !important;
  color: #bd0808;
  border-color: transparent !important;
}

:not(.sapMBtnDisabled):not(.sapMSBActive)
  > span.sapMBtnInner.sapMBtnReject:not(.sapMBtnActive):not(
    .sapMToggleBtnPressed
  )
  > .sapMBtnIcon {
  color: #bd0808;
}

.sapFCard .sapFCardHeader .sapFCardHeaderText .sapFCardTitle {
  font-weight: bold !important;
}

.uisapTitle {
  font-size: 0.875em;
  font-weight: bold;
}

.text-white {
  color: #fff !important;
}

.text-black {
  color: #171717 !important;
}

.sapMSLITitle,
.sapMSLITitleOnly {
  font-size: 0.9rem;
  font-weight: bold;
}

.userPopover .sapMSLITitle,
.userPopover .sapMSLITitleOnly {
  font-weight: normal !important;
}

.sapMSLIDescription,
.sapMSLIDescriptionText {
  font-size: 0.85rem;
  color: #556b82;
}

.uisapSubTitle {
  font-size: 0.7em;
  letter-spacing: 0.1rem;
  font-weight: bold;
}

.stt:nth-child(1) {
  font-weight: bold;
  margin-top: 16px;
  margin-bottom: 10px;
}

.stt:nth-child(2) {
  padding-left: 10px;
  margin-bottom: 10px;
  font-style: italic;
}

.bg-gray,
.bg-gray li {
  background-color: #f7f7f7;
}

.spToolbar {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.spH4 {
  display: inline;
}

.addBtn {
  float: right;
}

.upperCase {
  text-transform: uppercase;
}

.spOutlined {
  border: 1px solid #dadada;
  border-radius: 4px;
}

.underline {
  text-decoration: underline;
}

hr {
  height: 1px !important;
  background-color: #dadada;
  border: none;
}

h4 {
  font-weight: 400;
  font-family: "Nunito", sans-serif !important;
}

.border-none {
  border: none !important;
}

.sapMBtnContent,
.sapMSegBBtnInner {
  font-weight: 600 !important;
}

.sapMStdTileIconDiv {
  color: var(--primary-color);
}

.sapMTile.sapMTileActive {
  background: var(--primary-color) !important;
  color: white !important;
}

.sapMRb:focus:before {
  border: none !important;
}

@media only screen and (max-width: 1023px) {
  .VBoxCon {
    padding-top: 12px;
    margin-bottom: 90px;
  }
}

/* Small devices (landscape phones, 425px and up) */

@media (min-width: 425px) {
}

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
}

/* Extra large devices (large desktops, 1024px and up) */

@media (min-width: 1024px) {
  .sapMSplitContainerMaster {
    width: 24rem !important;
  }
}

/* Extra extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
  .sapMSplitContainerMaster {
    width: 29rem !important;
  }
}

/* Extra extra extra large devices (large desktops, 1440px and up) */

@media (min-width: 1440px) {
  .sapMSplitContainerMaster {
    width: 32rem !important;
  }
}

/* Extra extra extra extra large devices (large desktops, 1600px and up) */

@media (min-width: 1600px) {
  .sapMSplitContainerMaster {
    width: 34rem !important;
  }
}

/* Extra extra extra extra extra large devices (large desktops, 1800px and up) */

@media (min-width: 1800px) {
  .sapMSplitContainerMaster {
    width: 39rem !important;
  }
}

/* Extra extra extra extra extra extra large devices (large desktops, 2000px and up) */

@media (min-width: 2000px) {
  .sapMSplitContainerMaster {
    width: 44rem !important;
  }
}

.cusImg img {
  max-width: 95px !important;
  height: auto !important;
}

/*  ---------------------------- THEME -----------------------------------------------*/

:focus-visible {
  outline: none !important;
}

.sap-desktop
  .sapMIBar-CTX
  .sapMBtn:not(.sapMBtnDisabled):hover
  > .sapMBtnInner:not(.sapMToggleBtnPressed):not(.sapMBtnEmphasized):not(
    .sapMBtnAccept
  ):not(.sapMBtnAttention):not(.sapMBtnReject):not(.sapMBtnActive):not(
    .sapMBtnGhost
  ):not(.sapMBtnCritical):not(.sapMBtnNegative):not(.sapMBtnNeutral):not(
    .sapMBtnSuccess
  ),
.sap-desktop
  .sapMTB-Transparent-CTX
  .sapMBtn:not(.sapMBtnDisabled):hover
  > .sapMBtnInner:not(.sapMToggleBtnPressed):not(.sapMBtnEmphasized):not(
    .sapMBtnAccept
  ):not(.sapMBtnAttention):not(.sapMBtnReject):not(.sapMBtnActive):not(
    .sapMBtnGhost
  ):not(.sapMBtnCritical):not(.sapMBtnNegative):not(.sapMBtnNeutral):not(
    .sapMBtnSuccess
  ) {
  border-color: transparent !important;
}

.sapFShellBar
  .sapFShellBarItem.sapMBtn:not(.sapMBtnDisabled)
  > span.sapMBtnInner.sapMBtnActive,
.sapFShellBar
  .sapFShellBarItem
  .sapMBtn:not(.sapMBtnDisabled)
  > span.sapMBtnInner.sapMBtnActive,
.sapFShellBar
  .sapMTB-Transparent-CTX
  .sapFShellBarItem.sapMBtn:not(.sapMBtnDisabled)
  > span.sapMBtnInner.sapMBtnActive,
.sapFShellBar
  .sapMTB-Transparent-CTX
  .sapFShellBarItem
  .sapMBtn:not(.sapMBtnDisabled)
  > span.sapMBtnInner.sapMBtnActive {
  border: none !important;
}

.sapShellBar img {
  width: 100px !important;
  height: 25px !important;
}
.sapUiSizeCompact .sapFShellBar .sapMSlt {
  height: 1.625rem !important;
}

.sapMBsyIndIcon {
  animation: none !important;
  width: 37px !important;
  height: 37px !important;
}

.sapMLabel.sapMBusyDialogLabel {
  color: var(--primary-color) !important;
  letter-spacing: 0.1rem;
}

.sapUiLocalBusyIndicatorAnimation > div::before {
  background-color: var(--primary-color) !important;
}

html.sap-desktop
  .sapMGT:hover:not(.sapMGTPressActive):not(.sapMGTBackgroundImage) {
  background: transparent !important;
}

html.sap-desktop .sapMGT:active,
.sapMGT.sapMGTPressActive:not(.sapMGTBackgroundImage) {
  background-color: transparent !important;
}

html.sap-desktop .sapMGT:focus .sapMGTFocusDiv {
  border: 0.125rem solid var(--secondary-color);
  border-radius: 1rem;
  box-shadow: none;
  inset: -1px;
}

.themeButton:not(.sapMBtnDisabled) .sapMBtnBack > .sapMBtnIcon,
.themeButton:not(.sapMBtnDisabled) .sapMBtnTransparent > .sapMBtnIcon {
  color: white !important;
}

.sapMIBar-CTX
  .themeButton:hover
  > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(
    .sapMToggleBtnPressed
  ) {
  border-color: #fff !important;
  color: var(--secondary-color) !important;
}

.sapMIBar-CTX
  .themeButton:hover
  > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(
    .sapMToggleBtnPressed
  )
  bdi {
  color: #fff !important;
}

.themeButton .sapMBtnTransparent {
  color: white !important;
}

.themeButton > * {
  background-color: transparent !important;
}

.spProduct.sapMPopover {
  background: rgb(255 255 255 / 25%) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
}

.spProduct .sapFAvatarInitialsHolder {
  color: #556b82 !important;
}

.spProduct .sapFAvatar {
  background-color: white !important;
}

.spProduct footer > .sapMIBar {
  border-top: none !important;
}

.spProduct *,
.spProduct *::before {
  background-color: transparent !important;
}

.spProduct *:not(.sapFAvatarInitialsHolder),
.spProduct *::before {
  color: white !important;
}

.spProduct .sapMPopoverArr:after {
  display: none !important;
}

.spProduct.sapMPopover .sapMPopoverCont {
  background-color: transparent !important;
}

.darkTheme .oPanel {
  background: #1d232a !important;
  border-radius: 1rem !important;
}

.lightTheme .oPanel {
  background: #fff !important;
  border-radius: 1rem !important;
}

.oPanel .sapMPanelHdr {
  display: flex !important;
  justify-content: center !important;
}

/* Görüntüleme Inputu enabled*/
.sapMInputBaseReadonly:not(.sapMInputBaseDisabled)
  .sapMInputBaseContentWrapper {
  border-color: #556b81 !important;
  border: 1px solid #000;
  background: transparent !important;
  background-color: #ebf0f1 !important;
}

/* .darkTheme .sapMInputBaseReadonly:not(.sapMInputBaseDisabled)
  .sapMInputBaseContentWrapper {
  border-color: #556b81 !important;
  background: none !important;
  background-color: #eaecee !important;
} */

.sapFDynamicPageContent {
  padding: 0 !important;
}


.sapUiLoSplitter.sapUiLoSplitterH > .sapUiLoSplitterBar {
  border-left: none !important;
  border-right: none !important;
}

.sapUiLoSplitter > .sapUiLoSplitterBar {
  background-color: rgb(245, 246, 247) !important;
}

.sapFDynamicPageContentFitContainer {
  padding: 0 !important;
}

.flow.sapMTB {
  background: transparent !important;
}

html.sap-desktop .sapMGT:hover:not(.sapMGTPressActive) {
  box-shadow: 0 0 0 0.0625rem rgba(57, 129, 200, 0.48),
    0 0.625rem 1.875rem 0 rgba(13, 123, 233, 0.25) !important;
}

.oFlex > div:nth-child(1) {
  margin-right: 10px !important;
}

.oFlex > div:nth-child(2) {
  width: fit-content !important;
}

.sapUiTableCell.sapUiTableCellLastFixed {
  border-right-color: #e5e5e5 !important;
}

html.sap-desktop:not(.sapUiNativeScrollbars) {
  scrollbar-color: auto !important;
}

.bColor {
  color: #0064d9 !important;
}

.mColor {
  color: darkcyan !important;
}

.sShadow {
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.mSicilSuccess {
  border-left: 5px solid #30914c;
}

.mSicilInformation {
  border-left: 5px solid #f20000;
}

.mSicilError {
  border-left: 5px solid #f20000;
}

.maxContent {
  width: max-content !important;
}

html.sap-desktop .sapMTBActive.sapMTBFocused {
  box-shadow: none !important;
}

.userPopover .sapMSLITitleOnly {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.sapUiSizeCompact
  .sapFShellBar
  .sapMBtnInner.sapMBadgeTopRight.sapMBadge
  .sapMBadgeIndicator {
  top: 0.0125rem !important;
}

.sapTntToolPageMain {
  box-shadow: none !important;
  background-color: transparent !important;
}

.sapUiLoSplitter > .sapUiLoSplitterBar {
  background-color: transparent !important;
}

.sapMCrslBackground-Translucent {
  background-color: transparent !important;
}

.lightTheme
  .aInput.sapMInputBaseReadonly:not(.sapMInputBaseDisabled)
  .sapMInputBaseContentWrapper {
  background-color: aliceblue !important;
}

.darkTheme
  .aInput.sapMInputBaseReadonly:not(.sapMInputBaseDisabled)
  .sapMInputBaseContentWrapper {
  background-color: #556b81 !important;
}

.darkTheme
  .sapMInputBaseReadonly:not(.sapMInputBaseDisabled)
  .sapMInputBaseContentWrapper {
  background-color: transparent !important;
}

.sapMDialog > header:last-of-type .sapMIBar {
  box-shadow: none !important;
}

.sapMIBar-CTX.sapMFooter-CTX {
  border-top: none !important;
}

.sapFGLI.sapMLIBFocusable:focus > .sapMLIBHighlight {
  top: 0 !important;
  bottom: 0 !important;
}

.sapMLIBFocusable:focus .sapMLIBHighlight,
.sapMLIBFocusable:focus + .sapMListTblSubRow .sapMLIBHighlight {
  width: 0.375rem !important;
  left: 0 !important;
}

.sapMGenericTagWrap {
  border-radius: 0.3rem !important;
  background-color: transparent !important;
}

.message-box {
  height: 200px;
  width: 380px;
  color: #fff;
  font-family: Roboto;
  font-weight: 300;
}

.message-box h1 {
  font-size: 60px;
  line-height: 46px;
}

.message-box p {
  font-size: 40px;
}

.notFoundImg {
  animation: float 1s infinite ease-in-out alternate;
}

@keyframes float {
  100% {
    transform: translateY(20px);
  }
}

.darkTheme .sapMIBar .sapMSltIconOnly:not(.sapMSltDisabled) .sapMSltIcon {
  color: #fff !important;
}

.lightTheme .sapMIBar .sapMSltIconOnly:not(.sapMSltDisabled) .sapMSltIcon {
  color: #111 !important;
}

.sapFAvatarColorTransparent.sapFAvatarFocusable:not(.sapMAvatarPressed):not(
    .sapMAvatarDisabled
  ):hover {
  box-shadow: none !important;
}

.sNonRadiusPanel {
  border-radius: 0 !important;
}

.informationMessageStrip {
  border-color: transparent !important;
}

.password span {
  height: 2.799rem !important;
  margin-left: -35px !important;
}

.password .sapMInputBaseIconContainer .sapUiIcon.sapMInputBaseIcon {
  line-height: 2.7rem !important;
  margin-left: -37px !important;
}

.password
  .sapMInputBase:not(.sapMInputBaseDisabled).sapMInputBaseIconPressed
  .sapMInputBaseIcon,
.sapMInputBase:not(.sapMInputBaseDisabled) .sapMInputBaseIcon:active,
.sapMInputBase:not(.sapMInputBaseDisabled) .sapMInputBaseIcon:hover {
  box-shadow: none !important;
}

span.sapMBtnInner.sapMBtnAttention {
  border-color: transparent !important;
  background-color: unset !important;
}

span.sapMBtnInner.sapMBtnAttention:hover {
  background-color: #fff3b7 !important;
}

.sapMInputBase:not(.sapMInputBaseDisabled) .sapMInputBaseIconContainer .sapMInputBaseIcon:active {
  background-color: transparent;
}

/* Sayfalama HBox'ı için stil */
.paginationHBox {
  background-color: #ffffff;
  padding: 0.5rem 1.25rem;
  margin: 0 !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* Buton ikonları için stil */
.paginationHBox .sapMBtnIcon {
  font-size: 1rem !important;
  color: #346187 !important;
}

/* Pasif butonlar için stil */
.paginationHBox .sapMBtnDisabled .sapMBtnIcon {
  color: #bfbfbf !important;
}

/* Sayfa metni için stil */
.paginationHBox .paginationText {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 600;
  line-height: 1.8rem;
}

/* Butonlar için ek stil */
.paginationHBox .sapMBtn {
  height: 1.8rem;
  min-width: 1.8rem; /* Dokunmatik için yeterli alan */
}

/* Tablonun son satırıyla sayfalama arasındaki boşluğu kaldır */
.sNonRadiusPanel > .sapUiTable + .paginationHBox {
  margin-top: 0 !important;
}

/* Swipe için tablo stili */
.swipeTable {
  width: 100%;
  touch-action: pan-y; /* Yatay kaydırma için */
}

/* Toolbar başlığı için stil */
.sapMOTitle {
  font-size: 1rem;
  font-weight: bold;
}

/* Tablonun yüksekliğini mobil cihazlarda sınırla */
@media screen and (max-width: 600px) {

  .paginationHBox {
    padding: 0.25rem 0.5rem;
    position: sticky; /* Sabit alt çubuk */
    bottom: 0;
    background-color: #ffffff;
    z-index: 10;
  }

  .paginationHBox .sapMBtnIcon {
    font-size: 0.875rem !important;
  }

  .paginationHBox .sapMBtn {
    height: 1.5rem;
    min-width: 1.5rem;
  }

  .paginationHBox .paginationText {
    font-size: 0.75rem;
    line-height: 1.5rem;
  }

  .paginationHBox .sapUiResponsiveMargin {
    margin: 0.2rem !important; /* Daha sıkı margin */
  }

  /* Toolbar başlığı için mobil stil */
  .sapMOTitle {
    font-size: 0.875rem;
  }
}

/* Tabletler için media query */
@media screen and (min-width: 601px) and (max-width: 1024px) {

  .paginationHBox {
    padding: 0.4rem 1rem;
  }

  .paginationHBox .sapMBtnIcon {
    font-size: 0.9375rem !important;
  }

  .paginationHBox .sapMBtn {
    height: 1.7rem;
    min-width: 1.7rem;
  }

  .paginationHBox .paginationText {
    font-size: 0.8125rem;
    line-height: 1.7rem;
  }

  .sapMOTitle {
    font-size: 0.9375rem;
  }
}

.sapMPanelWrappingDiv.sapMPanelWrappingDivExpanded,
.sapMPanelWrappingDivTb.sapMPanelWrappingDivTbExpanded {
  border-bottom: none !important;
}


.swipeTable .sapMOH {
  padding: 0 !important; /* Daha sıkı üst boşluk */
}

.sPaddingForm .sapUiFormResGrid > div {
  padding: 0 !important; /* Daha sıkı üst boşluk */
  padding-right: 10px !important; /* Sağ boşluk */
  padding-left: 8px !important; /* Sol boşluk */
}


.uploadSet {
  padding: 0 !important;
}

.sTabBar .sapMITBContent {
  padding: 0 !important;
}

.sTabBar .sapMTB.sapMTB-Transparent-CTX {
  background: #fff !important;
}

.upload {
  width: 50% !important;
}

.sapMTableRowCustomFocus:focus + .sapMListTblSubRow > td::before,
.sapMTableRowCustomFocus:focus
  > :not(.sapMListTblDummyCell:last-child)::before {
  border-top: none !important;
  border-bottom: none !important;
}
.sapMTableRowCustomFocus:focus > .sapMTblLastVisibleCell::before,
.sapMTableRowCustomFocus:focus
  + .sapMListTblSubRow
  > .sapMTblLastVisibleCell::before {
  border-right: none !important;
}
.sapMTableRowCustomFocus:focus > .sapMTblFirstVisibleCell::before,
.sapMTableRowCustomFocus:focus
  + .sapMListTblSubRow
  > .sapMTblFirstVisibleCell::before {
  border-left: none !important;
}


.sapMListShowSeparatorsAll
  .sapMLIBShowSeparator:last-child
  > td:not(.sapMListTblDummyCell),
.sapMITBContent {
  border-bottom: none !important;
}

.sapShellBar .sapMSlt {
  box-shadow: none !important;
}


.sapDynamicPage .sapMSticky>.sapMListHdrTBar.sapMTB-Transparent-CTX {
  background: transparent !important;
}

html.sap-desktop .sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
  outline: none !important;
}

.sapDynamicPage .sapMPanel {
  border-radius: 0 !important;
}

.sapDynamicPage .sapMPanelContent {
  margin: 20px !important;
  border-radius: 1rem !important;
}


.sapMValueStateHeaderRoot,
.sapMValueStateMessage,
.sapMSltPickerValueState {
  display: none !important;
  visibility: hidden !important;
}

/* =================================================================
   UYGULAMA TURU (SPOT IŞIĞI) STİLLERİ
   ================================================================= */

/* 1. Tüm ekranı kaplayan ana SVG katmanı */
.tour-svg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* Viewport genişliği kadar */
  height: 100vh; /* Viewport yüksekliği kadar */
  z-index: 1000; /* Popover'dan hemen önce, diğer her şeyin üstünde */
  pointer-events: none; /* Üzerindeki tıklamaları engellemez, alttaki elementlere ulaşır */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s; /* Yumuşak giriş/çıkış animasyonu */
}

/* Tur aktif olduğunda overlay'i görünür yap */
.tour-svg-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* 2. Karartma efektini ve "oyuk" kısmını oluşturan SVG yolu */
.tour-svg-cutout-path {
  /* SAP Fiori'nin standart karartma rengini kullanıyoruz. */
  /* Bu, tema (aydınlık/koyu) değiştiğinde rengin otomatik uyum sağlamasını sağlar. */
  fill: var(--sapUiShellOverlayColor, rgba(0, 0, 0, 0.7));
  fill-rule: evenodd; /* Bu, iç içe yolların "delik" oluşturmasını sağlar */
  transition: d 0.35s ease-in-out; /* Adımlar arası "oyuk" geçiş animasyonu */
}


/* 3. Özel Tur Popover Stili (Diğer her şeyden en üstte olmalı) */
.tourPopover.sapMPopover {
  z-index: 1001 !important; /* SVG katmanının üstünde olmasını garanti eder */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  border-radius: 0.5rem;
}

.tourPopover .sapMBar {
  box-shadow: none !important;
}

.tourPopover .sapMRespPopoverHeader {
  background-color: var(--sapUiBrand, #0A6ED1); /* Fiori'nin ana marka rengini kullanır */
  border-bottom: none;
}

.darkTheme .tourPopover .sapMTitle {
  color: var(--sapUiShellColor, white); /* Fiori'nin ana metin rengini kullanır */
  font-weight: bold;
}

/* Tur aktifken arka planın kaymasını engelle */
.body-no-scroll {
  overflow: hidden;
}

.toolBar.sapMTB {
  margin-top: 5px;
  border-radius: 0.75rem;
  padding: 15px;
}

.toolBar.sapMTB.sapMTBStandard {
  border-bottom: none !important;
}

/* Statü adımı için genel konteyner */
.statusStep {
  display: flex;
  align-items: center;
  margin-right: 15px; /* Adımlar arası boşluk */
  font-weight: bold;
  color: #555;
  transition: all 0.3s ease;
}

/* Statü gösterge yuvarlağı (varsayılan - gri) */
.statusIndicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #d9d9d9; /* Gri renk */
  border: 2px solid #d9d9d9;
  margin-left: 8px;
  transition: all 0.3s ease;
}

/* Aktif olan adımın stili (Mavi) */
.statusStep.active {
  color: #0a6ed1; /* SAP Mavi */
}
.statusStep.active .statusIndicator {
  background-color: #e6f2ff;
  border-color: #0a6ed1;
}

/* Tamamlanmış adımın stili (Yeşil) */
.statusStep.completed .statusIndicator {
  background-color: #6dad1f;
  border-color: #6dad1f;
}

.statusStep .statusIndicator.success {
  background-color: #6dad1f;
  border-color: #6dad1f;
}

.statusStep .statusIndicator.error {
  background-color: #fa6161;
  border-color: #fa6161;
}

.statusStep .statusIndicator.warning {
  background-color: #f7bf00;
  border-color: #f7bf00;
}

/* Dikey ayraç çizgisi */
.statusSeparator {
  border-left: 1px solid #d9d9d9;
  height: 20px;
  margin: 0 15px; /* Sağına ve soluna boşluk verdik */
}

/* RESPONSIVE AYARLARI - EKRAN 768px'DEN DAR OLDUĞUNDA UYGULANIR */
@media (max-width: 768px) {
  /* Dikey ayraçları mobil görünümde gizle */
  .statusSeparator {
    display: none;
  }

  /* Alt alta gelen adımların arasına boşluk koy ve ortala */
  .statusStep {
    width: 100%; /* Her adımın satırın tamamını kaplamasını sağla */
    justify-content: center; /* Adım içeriğini (yazı ve ikon) kendi içinde ortala */
    margin-right: 0; /* Sağdaki boşluğu sıfırla */
    margin-bottom: 10px; /* Altına boşluk ekle */
    }
}

.sapFDynamicPage-Std-Desktop-XL .sapUiResponsiveContentPadding .sapMITBContent,
.sapFDynamicPage-Std-Desktop .sapUiResponsiveContentPadding .sapMITBContent,
.sapFDynamicPage-Std-Tablet .sapUiResponsiveContentPadding .sapMITBContent,
.sapFDynamicPage-Std-Phone .sapUiResponsiveContentPadding .sapMITBContent {
  padding: 1rem 1rem !important;
}

.sapMBtn:focus-visible>.sapMFocusable:not(.sapMBadgeIndicator)::before {
  border-color: transparent !important;
}