/* Add your styles here */
:root{

  --scale-factor: 0.9;

  --lightGray:#d4d4d4;
  --darkFontColor:#565656;
  --leadColor:#fff;
  --rfqColor:#e2e2e2;
  --quotedColor:#cecece;
  --approvedColor:#ffe4ab;
  --inProgressColor:#f9b334;
  /*--completeColor:#59de8a;*/
  --completeColor:#b1fab7;
  /*--paidColor:#33ff42;*/
  --paidColor:#8AC926;
  --pausedColor:;
  --declinedColor:#ffa9a9;

  /* Trackr Blue Colors
    Need a light, dark blue
  */
  --trackrBlueColor:#6cdaff;
  --trackrDarkBlueColor:#1f8eb5;
  --positiveColor:#60E562;
  --negativeColor:#F45C5C;

  --overBudgetColor:#ff6f6f;
  /*--underBudgetColor:#32e442;*/
  --underBudgetColor:#8AC926;

  --trackrHeaderColor:#1f8eb5;

  --trackrLightGrayColor:#f3f3f3;
  --trackrGrayColor:#bfbfbf;
  --trackrDarkGrayColor:#5a5a5a;
  --progressBarLightGrayColor:#f3f3f3;
  --progressBarLightGrayColor:#e4e4e4;


  --positiveColor:#8AC926;
  --positiveColorDark:#6EA51E;
  /*--negativeColor:#FF595E;*/
  /*--negativeColor: #ff9c9f;*/
  --negativeColor:  #ff878c;
  --negativeColorLight:#FF7072;
  --negativeColorDark:#DB474B;

  --secondaryActionColor:#FF924C;
  --secondaryActionColorDark:#ca743d;

  --notifyColor:#FFCA3A;
  --notifyColorDark:#c79e2a;

  --secondaryToolColor:#6A4C93;
  --blueSelectionColor:#6dd5ff;

  --trackrHeaderColor: #4d4d4d;
  /*--trackrHeaderColor:  #323232;*/

  --internalDeliverableColor: #bfbfbf;
  --deliverableColor: #5a5a5a;

  --selectedColor: #1f8eb5;

  --okkemSelectedColor:#0075a2;

  --internalBillableColor: #808080;
  --structuralProjectColor:  #835b87;
  --designProjectColor: #7091bb;
  --caProjectColor: #04ba9c;
  --inspectionProjectColor: #04ba9c;

  --popupBorderRadius : 14px;

  --lightOrange : #ffce73;
  --lightBlue : #acd3ff;


/* ---- Whites - Grays - Blacks --- */
  --okkemOffWhite: #cbcbcb;
  --okkemOffWhite2: #908c8c; 

  --okkemDarkGray: #212121;
  --okkemDarkGray5: #1a1a1a;
  
  --okkemOffBlack: #0b0b0b;

    




  /* Lighter Versions */
  /*
  --internalBillableColor: #8080807d;
  --structuralProjectColor: #835b8799;
  --designProjectColor: #7091bb96;
  --caProjectColor:  #04ba9c9e;
  --inspectionColor: #04ba9c9e;
  */
}

@media (min-width: 2560px) {
  :root {
    --scale-factor: 1; /* Example: make elements 10% larger */
  }
}

.noScrollBar::-webkit-scrollbar{
  display: none;
}
.noScrollBar{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.okkemClickable{
    cursor: pointer;
}
.okkemClickable:hover{
    color: var(--trackrBlueColor) !important;
}
.okkemBlur{
  filter: blur(7px);
}

body {
    font-size: calc(1rem * var(--scale-factor));
    margin: 0;
    padding: 20px;
    font-family: Arial, sans-serif;
    background-color: #646464;
    background-color: #373737;
    background-color: #1b1b1b;
}

[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: #aaa; /* Or any other color you want for the placeholder */
  pointer-events: none; /* This ensures the cursor still appears in the div */
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

.loading-message {
    color: white;
    margin-top: 10px;
    font-size: 16px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* CSS Styles */
.element-loading-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    /*background: rgb(0 0 0 / 18%);*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    border-radius: inherit; /* Inherit border radius from parent */
}

.element-loading-spinner {
    position: relative;
    top: 2px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;

    /* Prevent distortion */
    flex-shrink: 0;
    transform-origin: center center;
    box-sizing: border-box;
    
    /* Force perfect circle */
    min-width: 20px;
    min-height: 20px;
    max-width: 30px;
    max-height: 30px;

    animation: elementSpin 1s linear infinite;
}

.element-loading-message {
    color: white;
    margin-top: 8px;
    font-size: 14px;
    text-align: center;
    padding: 0 10px;
}

@keyframes elementSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ensure the target element can contain the absolute positioned overlay */
.loading-container {
    position: relative !important;
}


.breadCrumbBar{
  position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 55px;
    background: #1b1b1bd1;
    background: #00000000;
    z-index: 20;
    /*border-bottom: 1px solid #333333;*/
}
.breadCrumbBar .breadCrumbsHolder{
  margin-left: 20px;
}
.breadCrumbBar .breadCrumbsHolder .breadCrumb{
  color: white;
    float: left;
    margin-right: 25px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    cursor: pointer;
    overflow: hidden;
    width: fit-content;
    max-width: 250px;
    background: #444444;
    background: #8d8d8d;
    border-radius: 4px;
    padding: 0px 11px;
    position: relative;
    top: 8px;
    background: #464646;
    color: #909090;
    background: none;
    border: 1px solid #4d4d4d;
}
.breadCrumbBar .breadCrumbsHolder .breadCrumb.isProject{
  color: var(--trackrBlueColor);
}
.breadCrumbBar .breadCrumbsHolder .breadCrumb:last-child{
  opacity: 1;
  max-width: 300px;
  color: var(--trackrBlueColor);
  color: #000;
  /*background: var(--trackrBlueColor);*/
  color: var(--trackrBlueColor);
  border-color: var(--trackrBlueColor);
}
.breadCrumbBar .breadCrumbsHolder .breadCrumb:hover{
  opacity: 1;
  background: var(--trackrBlueColor);
  color: black;
  /*color: var(--trackrDarkBlueColor);*/
}


/* ---- Login UI ------ */
#login_ui_container{
  position: absolute;
  top: 10px;
  right: 10px;
}
body.hasBreadCrumbBar #login_ui_container{
  display: none;
}
#login_ui_container .loginBtn{
  border: none;
    background: #323232;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    padding: 0px 7px;
    color: #7c7c7c;
}
#login_ui_container .loginBtn:hover{
  color: var(--trackrBlueColor);
}
#login_ui_container #chatSigninBtn{
  /*display: block;*/
  display: none;
}
#login_ui_container.loggedIn #my_google_signin_button{
  display: none;
}
#login_ui_container.loggedOut #chatLogoutBtn{
  display: none;
}