/*
    For Site Home Page
*/
.site-icon {
    max-width: 4rem;
    max-height: 4.5rem;
}

.site-icon-rnw {
    background-image: url("../ca_images/teal-bar-70x85.png");
}

.site-icon-opa {
    background-image: url("../ca_images/plum-bar-70x85.png");
}

.ssapp-title {
  border-left: 1px solid #665f5b; /* Line thickness, style, and color */
  height: 100%;  
  padding-left: 14px;
}

.ssapp-title-background {
    background-color: #3a3632;
}

.ssapp-navigation-background {
    background-color: #161513;
}


/*
    For Site Details page
*/
.site-details-icon {
    max-width: 10rem;
    max-height: 10.5rem;
}

.site-details-icon-image {
    max-width: 9rem;
    max-height: 9.5rem;
}

.site-details-icon-rnw {
    background-image: url("../ca_images/teal-circle-148.png");
    background-repeat: no-repeat;
}

.site-details-icon-opa {
    background-image: url("../ca_images/plum-circle-148.png");
    background-repeat: no-repeat;
}

.square-box {
    min-width: 12rem;
    min-height: 10rem;
    display: inline-block;
    border-radius: 25px;
}

.square-box-site-details {
    width: 14rem;
    height: 8rem;
    display: inline-block;
    border-radius: 25px;
}

.box-site-details {
    width: 14rem;
    height: 8rem;
}

.icon-size {
    height: 2rem;
    width: 2rem;
}

.table-border,
.table-border td {
    border: 1px solid #cecece;
    border-collapse: collapse;
    padding: 0.75rem;
}

.table-border-bottom,
.table-border-bottom td{
    border-bottom: 1px solid #cecece;
    border-collapse: collapse;
    padding: 0.75rem;
}


.activate-ssl-tr td:first-child {
  background-color: #cecece4a;
}

.activate-ssl-tr:hover td:first-child {
  background-color: #f1cd7e;
}

.activate-ssl-tr:hover td:nth-child(2) {
  background-color: #f1cd7e5c;
}

.list-item-scroll {
    /* width: 100%; */
    max-height: 50vh;
    min-height: 18.75rem;
    overflow-x: hidden;
}

/*
POPUP
*/
.dialog-header-color {
    background-color: #524f4b;
    box-shadow: 0px 3px #524f4b17;
}

.dialog-button-width {
    min-width: 6.5rem;
}

.dialog-dimension {
    max-width: 65vw;
    max-height: 70vh;
}

.ojc-popup {
    max-width: none !important; 
    overflow-x: auto;
}

.ojc-popup-disable-flex {
    flex-wrap: nowrap !important; 
    flex-shrink: 0 !important;
}

.content-min-height {
    min-height: 85vh;
}

.disable-wrapping {
    overflow-x: hidden !important; 
    flex-wrap: nowrap !important;
    text-wrap: nowrap !important;
    white-space: nowrap !important;
}

/*
REQUEST STATUS ICON STACK
*/

.icon-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* width: 32px;  Match the size of your larger icon */
  /* height: 32px; */
}

.icon-base {
  z-index: 1;      /* Underneath */
}

.icon-top {
  position: absolute;
  z-index: 2;      /* Forces it on top */
  
  /* Perfectly centers the absolute span */
  top: 55%;
  left: 60%;
  transform: translate(-5%, -10%);
}


/*
SKELETON LOADING
*/

/*See : https://css-loaders.com/dots/ */
/* HTML: <div class="loader"></div> */
.loader {
  width: 15px;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: l5 1s infinite linear alternate;
}
@keyframes l5 {
    0%  {box-shadow: 20px 0 #000, -20px 0 #0002;background: #000 }
    33% {box-shadow: 20px 0 #000, -20px 0 #0002;background: #0002}
    66% {box-shadow: 20px 0 #0002,-20px 0 #000; background: #0002}
    100%{box-shadow: 20px 0 #0002,-20px 0 #000; background: #000 }
}


/*
BREADCRUMB
*/

.breadcrumb {
    padding: 0 0.5rem;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: end;
}

.breadcrumb li:not(:last-child)::after {
    display: inline-block;
    margin: 0 0.25rem;
    content: ">";
}

.footerLink li:not(:last-child)::after {
    display: inline-block;
    margin: 0 0.25rem;
    content: "|";
}

.module-section-min {
    min-height: 30vh;
}

.draggable {
    cursor: move;
    user-select: none;
}