@media screen and (max-width: 600px) {
    .title-text-box {
        display: none;
    }
}

#title-logo {
    height: 32px;
    padding-top: 4px;
}

.t-Button {
    border-radius: 6px;
}

a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

#t_PageBody {
    max-width: 1920px; 
    margin: 0 auto;   
    box-sizing: border-box; 
    border-left: 1px solid #eee; 
    border-right: 1px solid #eee;
    position: relative; 
    box-shadow: 
      -3px 0 8px rgba(0, 0, 0, 0.1), 
       3px 0 8px rgba(0, 0, 0, 0.1);  
}


* {
     font-family: "Poppins", sans-serif;
}

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


#title-container {
    display: flex;
    align-items: center; 
    line-height: 1;
    opacity: 0;
}

.title-text-box {
    color: black;
}

@keyframes fallFromSky {
  0% {
    opacity: 0;
    transform: translateY(var(--start-offset)); 
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.title-text-box {
    font-size: 16px; 
}



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




/* Nav control and Main bar */
#t_Button_navControl {
    background: #eee;
    color: black;
    border-radius: 50%;
}

.t-Header-controls {
    border-radius: 50%;
}

.t-Header-branding {
    background: white;
}

/* Navigation icons */
.t-Button.t-Button--icon.t-Button.t-Button--header.t-Button--navBar {
    color: black;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
    border-radius: 20px;
}

/* Navigation bar icons for mobile */
@media only screen and (max-width: 768px) {
    .t-Button.t-Button--icon.t-Button.t-Button--header.t-Button--navBar {
        padding-right: 7px;
        padding-left: 7px;
    }
    ul.t-NavigationBar li.t-NavigationBar-item:last-child .t-Button.t-Button--icon.t-Button.t-Button--header.t-Button--navBar {
        padding-right: 12px;
        padding-left: 4px;
    }
}


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




[id^="apex_dialog_"]  {
	background: linear-gradient(-45deg, #d3d3d3, #ffffff, #d3d3d3, #ffffff);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

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

#selDate1 {
    z-Index: 10;
}

.inputmask-integer {
    text-align: left !important;
}

.inputmask-decimal {
    text-align: left !important;
}


.t-Form-label {
    font-size: 13px;
    animation: fadeIn2 0.5s ease-in-out forwards; 
}

.apex-item-display-only,
.apex-item-textarea,
.a-Switch,
.apex-item-option {
    animation: fadeIn2 0.5s ease-in-out forwards; 
}

.apex-item-select:not(.apex-item-has-icon) {
    animation: fadeIn2 0.5s ease-in-out forwards; 
}

.apex-item-text:not(.apex-item-has-icon) {
    animation: fadeIn2 0.5s ease-in-out forwards; 
}

.t-Region-title,
.my-title {
    animation: fadeIn2 0.5s ease-in-out forwards;
}

.apex-rds-container, .a-RDS-container {
    animation: fadeIn2 0.5s ease-in-out forwards;
}

/* Animation */
@keyframes fadeIn2 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.not-filled {
    border-color: rgb(224, 20, 20) !important;
}

.popup_lov.not-filled {
     margin-right: 1px;
}

/*****************************/
/* Transaction **/

#info-message {
    display: flex;
    align-items: center;
    padding: 5px;
    font-weight: bold;
    font-size: 14px;
    position: absolute;
}

.fa-active {
    color: rgb(53, 117, 177);
}

.fa-inactive {
    color: #888;
}

.fa-success {
    color: rgb(11, 128, 11);
}

.fa-failure {
    color: rgb(192, 35, 35);
}

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

.speech-bubble {
    display: inline-block;
    position: relative;
    max-width: 30em;
    background-color: #ffffff; 
    padding: 1.125em 1.5em;
    font-size: 1.25em;
    border-radius: 1rem; 
    border: 1px solid #e0e0e0; 
    color: #333333; 
}


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


.t-Form-fieldContainer.t-Form-fieldContainer--floatingLabel > .t-Form-inputContainer >  .t-Form-itemWrapper > .display_only.apex-item-display-only {
    border: solid 1px #eee;
    font-size: 1em;
}

.activity-full {
    background: pink;
    padding: 2px 6px; 
    border-radius: 6px;
    color: black;
}

.activity-available {
    background: lightgreen;
    padding: 2px 6px; 
    border-radius: 6px;
    color: black;
}

.select-plain {
    color: #eee;
}

.select-activity {
    padding: 1px;
    background: white;
    border: solid 2px rgb(0, 0, 0); 
    border-radius: 50%;
}

.select-success {
    color: green;
}

.select-full {
    background: orangered;
    color: white;
}

.select-wait-list {
    background: orange;
    color: white;
}

.fa-hover:hover {
    box-shadow: 0px 0px 3px rgb(78, 70, 99); 
}

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

.modern-container2 {
  border-radius: 12px; /* Softer, more modern */
  font-size: 12px;
  padding: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); /* Slightly more lifted */
  border: 1px solid #f0f0f0; /* Lighter border */
}

/* Additional padding for desktop screens */
@media (min-width: 768px) { /* Adjust this breakpoint as needed for your definition of desktop */
  .modern-container2 {
      font-size: 14px;
  }
}

/* General styles for the container */
.modern-container {
  background: var(--box-color); /* #7D3F98; */
  border-radius: 12px; /* Softer, more modern */
  padding: 8px 10px; /* More breathable */
  color: var(--box-text-color); /* Softer text color */
  margin-bottom: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); /* Slightly more lifted */
  border: 1px solid #f0f0f0; /* Lighter border */
}

/* Additional padding for desktop screens */
@media (min-width: 768px) { /* Adjust this breakpoint as needed for your definition of desktop */
  .modern-container {
    padding: 14px 20px; /* Adjust padding values as needed for desktop */
  }
}



/* Optional: Add more styles as needed */

.modern-container h2 {
  font-size: 14px;
  margin-bottom: 8px;
  margin-top: 0px;
}

.modern-container p {
  font-size: 12px;
  line-height: 1.2;
}

.modern-container a {
  color: #ffc107;
  text-decoration: none;
  transition: color 0.3s ease;
}

.modern-container a:hover {
  color: #ffca28;
}


/* Tabs */
.btn-flex span:first-child {
    margin-top: -3px;
    margin-bottom: -3px;
    padding: 3px;
}

@media only screen and (max-width: 767px) {
    .btn-flex span:first-child {
        margin-right: 0px;
    }

    .btn-flex > .t-Button-label {
        display: none;
    }
}

/* Progress bar */
#progressbar {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0px;
    width: 100px;
    height: 24px;
    background: rgb(140,140,140);
    background: linear-gradient(180deg, rgba(140,140,140,1) 0%, rgba(130,130,131,1) 80%, rgba(120,120,120,1) 100%);
    border-radius: 3px;
    padding: 0px;
    text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); 
}

.progressbarInner {
    font-size: 13px;
    height: 24px;
    display: flex;
    align-items: center;
    color: white;
    font-weight: bold;
    border-radius: 3px;
}

.activity-time {
    font-weight: bold;
    margin-bottom: 2px; 
}

.activity-name {
    margin-top: 2px; 
    font-weight: bold; 
}

/* End of Progress bar */


.a-Notification-title.aErrMsgTitle {
    display: none;
}

#t_Alert_Notification > .t-Alert-wrap > .t-Alert-icon {
    display: none !important;
}

#t_Alert_Notification {
    background: #fff;
}

.a-Notification-item.htmldbStdErr::before {
    display: none;
}

.a-Notification-item.htmldbStdErr {
    color: red;
}




span[role="img"].fa {
    background: #333;
    color: white;
    padding: 3px;
    border-radius: 3px;
    cursor: pointer;
}

span[role="img"].fa:hover {
    background: #666;
}



.fai {
    background: #333;
    color: white;
    padding: 3px;
    border-radius: 3px;
    cursor: pointer;
}

.fai:hover {
    background: #666;
}


#t_Body_title {
    overflow: hidden;
}

.profile-img {
    cursor: pointer;
    border-radius: 50%;
    border: solid 2px white;
    opacity: 0; /* Start with the image hidden */
    animation: fadeIn 0.5s ease-in-out forwards; /* Apply the fade-in animation */
}

@keyframes fadeIn {
    from {
        opacity: 0; /* Start with opacity 0 */
    }
    to {
        opacity: 1; /* End with opacity 1 */
    }
}

#t_Footer {
    padding-bottom: 0px;
    background-color: white;
}

.t-Footer-top {
    display: none;    
}

.t-Footer-version {
    display: none;
}

.enlista-footer {
    color: #888;
    font-size: 10px;
    opacity: 0; /* Initially invisible */
    transition: opacity 0.5s ease-in; /* Fade in over 1 second */
}

@media (min-width: 768px) {
    .enlista-footer {
        font-size: 12px;
    }
}

/* To trigger the fade-in */
.fade-in {
    opacity: 1;
}


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

@media (pointer:none), (pointer:coarse) {
    .t-Form-fieldContainer1.t-Form-fieldContainer--floatingLabel1 {
        margin-left: 1px;
        margin-right: 1px;
    }
}

.apex-item-group.apex-item-group--popup-lov {
    outline: none !important;
}

.apex-item-multi.is-focused {
    outline: none !important;
}

.is-focused {
    outline: none !important;
}

:focus {
    outline: none !important;
}

textarea:focus, input:focus{
    outline: none !important;
}

.a-IRR-headerLink.has-focus {
    box-shadow: 0 0 0 0px #4696fc inset !important;   
}

*:focus {
    outline: none;
}

* {
    outline-color: darkslateblue !important;
    outline-width: thin !important;
}

/*********************************************************/
/* Modal window title */

.ui-dialog-titlebar {
    padding: 0px 4px;
    color: white;
    background: #000;
}

.ui-dialog-title {
    font-size: 14px;
}

.ui-dialog-titlebar-close {
    margin: 0px;
    color: white;
    background: rgb(78, 78, 78);
    border: none;
    border-radius: 0px;
}

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