.abc {
    background-color: aqua;
}

.main-sidebar {
    /*width: 16.71875vw; /* Adjust this value as needed */
    width:225px;/**/
  }

  .navbar {
    position: relative;
    border-bottom: 0px solid #E8E9EB;
  }

  .navbar::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -40px; /* Increase the left offset as needed */
    width: calc(100% + 80px); /* Increase the width to cover the entire navbar with extra space on both sides */
    border-bottom: 1px solid #E8E9EB; /* Adjust the thickness and color as needed */
  }

  .navbarAddon{
    position: relative;
   
  }

  .navbarAddon::before {
    font-size: 1.1vw;
    content: "";
    position: absolute;
    height:3vw;
    margin-bottom:3vw;
    left: -40px; /* Increase the left offset as needed */
    width: calc(100% + 80px); /* Increase the width to cover the entire navbar with extra space on both sides */
    border-bottom: 1px solid #E8E9EB; /* Adjust the thickness and color as needed */
  }

  .dashboardText{
    font-family:'Blender Pro Book';
    font-size :'2vw'
  }

  .headerPageMarginTop{
    margin-top:3.5vw;
  }

  .outerTenantDiv {
    align-items: center;
  }

  .outerTenantDiv:hover {
    background-color: #E8E9EB;  
    align-items: center;
    cursor:pointer;
  }

  .outerClickedClass{
    background-color: #E8E9EB;  
  }
  .outerClickedClassMobile{
    background-color: #E8E9EB;  
  }
  
.tenantTicketDiv {
  min-height: 2.5vw;
  height: auto;
  text-align: left;
  margin-top:0.6vw;
  margin-bottom: 0.6vw;
  margin-left: 20px;
  color: #000000;
  transition: background-color 0.3s ease;
  padding-top: 0.3vw;
}

.tenantTicketDivMobile {
  min-height: 5vh;
  height: auto;
  text-align: left;
  margin-top:0vh;
  margin-bottom: 0vh;
  margin-left: 20px;
  align-items: center !important;
  color: #000000;
  transition: background-color 0.3s ease;
}

.tenantTicketIcon {
  color: #737E86;
  transition: background-color 0.3s ease;
}

.tenantTicketDiv:hover .tenantTicketIcon {
  cursor: pointer;
}

.contentWrapperBG{
    background-color: #FFFFFF;
    /*margin-left: 19vw;
    margin-right: 0.5vw;*/
}

.content-wrapper {
  min-height: initial !important;
}

.leftSidebar{
    background-color: #F5F5F6;
}

.leftSidebarTextIcon{
    color: #737E86 !important;
}

.leftSidebarBtn{
    background-color: #0296D2;
}

.leftSidebarBtnTextIcon{
    color: #FFFFFF;
}

.topNavBar{
    background-color: #FFFFFF;
}
 
.topNavBarTextIcon{
    background-color: #737E86;
}

.buttonCreateNew{
    background-color: #0296D2;
    color: #FFFFFF;
    border: 0;
}

.buttonBlueDashboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: black;
    border: 0;
    border-radius: 16px;
    height: 5vw;
    width: 12vw;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
}

.buttonBlueDashboardMobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: black;
    border: 0;
    border-radius: 16px;
    height: 5.5vh;
    margin-left: 1vw;
    margin-right: 1vw;
}

.textBlueDashboardHeader {
    font-size: 0.9vw;
    text-align: center;
    margin-bottom: 0.8vw;
}
.numberBlueDashboardHeader{
    font-size: 1.7vw;
    text-align: center;
    margin-top:-0.5vw;
}
.textBlueDashboardHeaderMobile {
    font-size: 1.8vh;
    text-align: center;
    margin-bottom: 0vh;
}
.numberBlueDashboardHeaderMobile{
    font-size: 2vh;
    text-align: center;
    margin-top: 0.5vh;
}
.circleArrowDB{
    background-color : white;
    border-radius : 100vw;
    margin-left: 0.5vw;
    cursor: pointer;
    height: 1.2vw;
    width: 1.2vw;
}
.circleArrowDBMobile{
  background-color : white;
  border-radius : 100vw;
  margin-left: 2.5vw;
  cursor: pointer;
  height: 2.5vh;
  width: 2.5vh;
}
.button-container {
    display: flex;
    justify-content: flex-start; /* Aligns items to the left */
    align-items: center;
  }
  
  .byMeButton {
    margin: 0 1.2vw; /* Adjust margin as needed */
    background-color: #0296D2;
    width: 3.4vw;
    height: 1.9vw; /* Set height equal to width for a squared shape */
    text-align: center;
    border-radius: 100px; /* Border-radius of 100 pixels for a rounded appearance */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; /* Optional: Text color for better visibility */
    font-size: 0.9vw;
    margin-bottom:0.5vw;
    cursor: pointer;
  }
  
  .byMeButtonMobile {
    margin: 0 1.2vw; /* Adjust margin as needed */
    background-color: #0296D2;
    width: 7vh;
    height: 3.5vh;
    text-align: center;
    border-radius: 100px; /* Border-radius of 100 pixels for a rounded appearance */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; /* Optional: Text color for better visibility */
    font-size: 1.8vh;
    margin-top:-1vh;
    margin-bottom:2vh;
    margin-left:3vw;
    cursor: pointer;
  }

  .byMeColorBlue {
    background-color: #0296D2;
    color: white; 
    font-family: 'Blender Pro' !important;
    
  }

  .byMeColorGray {
    background-color: #E8E9EB;
    color: #737E86; 
    font-family: 'Blender Pro' !important;
  }
  
  .latestActivity{
    margin: 0;
    font-size: 0.9vw;
    margin-bottom: 0.6vw !important;
    color: #737E86,
  }

  .dashboardMarginLeft{
    margin-left: 1.3vw
  }

  .dashboardMarginRight{
    margin-left: 1.5vw
  }

  .inputSearch {
    border-radius: 8px;
    padding: 0.6vw 1.2vw 0.6vw 1.2vw;
    font-size: 1.2vw;
    width: 100%;
    border: 0px;
    background-color: #FFFFFF;
    color: #737E86;
    font-family: 'Blender Pro';
    border: 1px solid #E8E9EB;
  }
  .inputSearch::placeholder {
    color: #737E86; 
    font-family: 'Blender Pro Book';
  }

  .inputSearch:focus {
    outline: 1px solid #0296D2;
    font-size: 1vw;
  }

  .inputText {
    border-radius: 8px;
    padding: 0.6vw 1.2vw 0.6vw 1.2vw;
    font-size: 1.2vw;
    width: 100%;
    border: 0px;
    background-color: #F5F5F6;
    color: #404041;
    font-family: 'Blender Pro';
  }
  
  .inputText::placeholder {
    color: #737E86; 
    font-family: 'Blender Pro Book';
  }

  .inputText:focus {
    outline: 1px solid #0296D2;
    font-size: 1vw;
  }

  .inputText:focus-within {
    outline: 1px solid #0296D2 !important; 
  }
  
  .inputTextMobile {
    border-radius: 8px;
    padding: 10px 8px 10px 8px;
    font-size: 15px;
    width: 100%;
    border: 0px;
    background-color: #F5F5F6;
    color: #404041;
    font-family: 'Blender Pro';
  }
  
  .inputTextMobile::placeholder {
    color: #737E86; 
    font-family: 'Blender Pro Book';
  }

  .inputTextMobile:focus {
    outline: 1px solid #0296D2;
    font-size: 15px;
  }

  .inputTextMobile:focus-within {
    outline: 1px solid #0296D2 !important; 
  }

  .inputTextRed {
    border-radius: 8px;
    padding: 0.6vw 1.2vw 0.6vw 1.2vw;
    font-size: 1.2vw;
    width: 100%;
    border: 0px;
    background-color: #F5F5F6;
    color: #404041;
    font-family: 'Blender Pro';
    outline: 1px solid #d20260 !important; 
  }
  

  .txtCreateTicket {
    color: #404041;
    font-size: 1.2vw;
    font-family: 'Blender Pro';
  }

  .txtCreateTicketMobile {
    color: #404041;
    font-size: 15px;
    font-family: 'Blender Pro';
  }

  .inputTextThin {
    border-radius: 8px;
    padding: 0.6vw 1.2vw 0.6vw 1.2vw;
    font-size: 1.2vw;
    width: 100%;
    border: 0px;
    background-color: #F5F5F6;
    color: #A3AEB7;
    font-family: 'Blender Pro';
  }
  
  .inputTextThin::placeholder {
    color: #A3AEB7; 
  }

  .inputTextThin:focus {
    outline: 1px solid #A3AEB7;
    font-size: 1.2vw;
  }

  .inputTextThin:focus-within {
    outline: 1px solid #A3AEB7 !important; 
  }
  

  .txtCreateTicketThin {
    color: #A3AEB7;
    font-size: 1.2vw;
    font-family: 'Blender Pro';
  }

  .borderWithRadius{
    border: 1px solid #E8E9EB;
    border-radius: 8px;
  }

  .draftClass {
    text-decoration: none;
    color: #737E86;
    font-family: 'Blender Pro', sans-serif;
    font-size: 1.2vw;
  }

  .draftClass:hover, .draftClass:focus {
    color: #0296D2;
    cursor: pointer;
  }

  .draftClassM {
    text-decoration: none;
    color: #737E86;
    font-family: 'Blender Pro', sans-serif;
    font-size: 15px;
  }

  .draftClassM:hover, .draftClass:focus {
    color: #0296D2;
    cursor: pointer;
  }
  .btnSubmitTicket {
    background-color: #0296D2;
    cursor: pointer;
    border-radius: 8px;
    color:white;
    font-family: 'Blender Pro';
    font-size: 15px;
  }
  .btnSubmitTicket:hover {
    background-color: #027aae;
    cursor: pointer;
    color:#E8E9EB;
  }

  .btnSubmitTicketMobile {
    background-color: #0296D2;
    cursor: pointer;
    border-radius: 8px;
    color:white;
    font-family: 'Blender Pro';
    font-size: 15px;
    padding: 10px 12px 10px 12px;
  }
  .btnSubmitTicketMobile:hover {
    background-color: #027aae;
    cursor: pointer;
    color:#E8E9EB;
  }
  .spinner {
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    from {
      transform: rotate(360deg);
    }
    to {
      transform: rotate(0deg);
    }
  }

  .searchRight{
    margin-right: 0vw;

  }

  .mobileFont{
    font-size: 2vh;
  }

  .tabbingVeryBig {
    padding-bottom: 0.8vw ; 
    width: 18%;
    text-align: center;
    font-family: 'Blender Pro';
    color:#737E86;
    font-size: 1.2vw;
  }

  .tabbingVeryBig:hover {
    cursor: pointer;
    color: #4e5762;
    font-weight: bold;
  }
  .tabbingBig {
    padding-bottom: 0.8vw ; 
    width: 14%;
    text-align: center;
    font-family: 'Blender Pro';
    color:#737E86;
    font-size: 1.2vw;
  }

  .tabbingBig:hover {
    cursor: pointer;
    color: #4e5762;
    font-weight: bold;
  }

  .tabbing {
    padding-bottom: 0.8vw ; 
    width: 12%;
    text-align: center;
    font-family: 'Blender Pro';
    color:#737E86;
    font-size: 1.2vw;
  }
  .tabbing:hover {
    cursor: pointer;
    color: #4e5762;
    font-weight: bold;
  }

  .tabbingMobile {
    padding-bottom: 1.2vh ; 
    width: auto;
    padding-left: 2vw;
    padding-right: 2vw;
    text-align: center;
    font-family: 'Blender Pro';
    color:#737E86;
    font-size: 1.8vh;
  }

  .tabbingMobileDetail {
    padding-bottom: 1.2vh ; 
    width: auto;
    padding-left: 2vw;
    padding-right: 2vw;
    text-align: center;
    font-family: 'Blender Pro';
    color:#737E86;
    font-size: 2vh;
  }

  .tabChosen{
    border-bottom: 2px solid #0296D2;
    color:#0296D2;
    font-weight: bold;
  }
  .tabChosen:hover {
    cursor: pointer;
    color: #0296D2;
    font-weight: bold;
  }
/* Define a class for a smaller scrollbar with color #404041 */
.smaller-scrollbar {
  overflow-y: scroll;
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: #404041 #ffffff; /* Change the color to #404041 */
}

/* Optionally, you can adjust the scrollbar width further */
.smaller-scrollbar::-webkit-scrollbar {
  width: 1px; /* Adjust the width as needed */
}

/* Optionally, you can style the scrollbar thumb (handle) */
.smaller-scrollbar::-webkit-scrollbar-thumb {
  background-color: #404041; /* Change the color to #404041 */
  border-radius: 6px; /* Adjust the border radius as needed */
}

/* Optionally, you can style the scrollbar track (the background) */
.smaller-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1; /* Change the background color as needed */
}

.custom-row{
  overflow-x: auto;
  width: "100%";
}

@media screen and (orientation: portrait) {
  .react-bootstrap-table-pagination-list {
    margin-top: 5px; /* Adjust the margin-top value for portrait orientation */
  }
}

@media screen and (orientation: landscape) {
  .react-bootstrap-table-pagination-list {
    margin-top: 0; /* Reset margin-top for landscape orientation */
  }
}


/* Custom CSS for the table */
.custom-table {
  font-family: 'Blender Pro';
  margin: 0px; /* Adjust spacing as needed */
  border-left: 0px;
  border-right: 0px;
}

/* Style table rows on hover */
.custom-table tbody :hover {
  background-color: #E8E9EB !important; /* Change background color on hover */
  color: #404041 !important; /* Change text color on hover */
  cursor: pointer;
}

/* Style all table rows with a white background */
.custom-table tbody tr:nth-child(even),
.custom-table tbody tr:nth-child(odd) {
  background-color: #FFFFFF; /* Set background color for all rows */
  color: #404041; /* Change text color for all rows */
}

.custom-table tbody td {
  padding: 8px; /* Adjust cell padding */
  border-top: 1px solid #E8E9EB; /* Add horizontal borders to cells */
  border-bottom: 1px solid #E8E9EB; /* Add horizontal borders to cells */
  border-left: none; /* Remove vertical borders on the left */
  border-right: none; /* Remove vertical borders on the right */
  vertical-align: middle;
}

/* Style the header row with borders */
.custom-table thead th {
  background-color: #fff; /* Change header background color */
  color: #404041; /* Change header text color */
  padding: 8px; /* Adjust header cell padding */
  border-top: 1px solid #E8E9EB; /* Add horizontal borders to header cells */
  border-bottom: 1px solid #E8E9EB; /* Add horizontal borders to header cells */
  border-left: none; /* Remove vertical borders on the left */
  border-right: none; /* Remove vertical borders on the right */
}

/* Customize the pagination container */
.react-bootstrap-table-pagination {
  width: 100%; /* Set the width as desired */
  height: 48px; /* Set the height as desired */
  position: absolute;
  justify-content: center;
  align-items: center;
  margin-top: 1vw; /* Adjust the margin as needed */
}

/* Customize individual pagination buttons */
.react-bootstrap-table-pagination .page-link {
  /* Add your styles here */
  border: none ; /* Remove the border */
  border-radius: 3px ; /* Apply border-radius */
  color: #404041 ; /* Text color */
  font-family: 'Blender Pro'; /* Use 'Bender Pro' font */
  background-color: #F5F5F6 ; /* Background color for non-active buttons */
}

/* Customize active pagination button */
.react-bootstrap-table-pagination .active .page-link {
  background-color: #0296D2; /* Background color for the active button */
  color: #FFFFFF ; /* Text color for the active button */
}

.btn.btn-default.btn-secondary.dropdown-toggle {
  /* Your custom styles here */
  background-color: #ff0000; /* Change the background color to red */
  color: #fff; /* Change the text color to white */
  border: 0px solid #000; 
}

.cursorPointer:hover{
  cursor: pointer;
}

/* Change the right arrow image */
.pagination-next::before {
  content: ""; /* Remove the default arrow content */
  background-image: url('/public/dist/img/icons.png');
  background-size: 100% 100%;
  /* Additional styling as needed */
}

/* Change the left arrow image */
.pagination-previous::before {
  content: ""; /* Remove the default arrow content */
  background-image: url('../dist/img/icons.png');
  background-size: 100% 100%;
  /* Additional styling as needed */
}

/* Change the right arrow image */
.react-bootstrap-table2-paginator .page-item .page-link.next::before {
  content: "";
  background-image: url('/public/dist/img/icons.png');
  background-size: 100% 100%;
  /* Additional styling as needed */
}

/* Change the left arrow image */
.react-bootstrap-table2-paginator .page-item .page-link.previous::before {
  content: "";
  background-image: url('../dist/img/icons.png');
  background-size: 100% 100%;
  /* Additional styling as needed */
}

.smallText {
  font-size:1vw;
  color:#737E86;
}

.countdownClassDown {/*kuning*/
  display: inline-block;
  border-radius: 16px;
  padding: 0.4vw 0.8vw 0.4vw 0.8vw;
  background-color: #FFF4E0;
  color: #A3711C;
  font-family:'Blender Pro';
}

.countdownClassUp { /*biru*/
  border: 0px solid black;
  display: inline-block;
  border-radius: 16px;
  padding: 0.4vw 0.8vw 0.4vw 0.8vw;
  background-color: #D6EBF6;
  color: #01648C;
  font-family:'Blender Pro';
}
.countdownClassUpOverdue { /*merah*/
  border: 0px solid black;
  display: inline-block;
  border-radius: 16px;
  padding: 0.4vw 0.8vw 0.4vw 0.8vw;
  background-color: #FFDBD6;
  color: #A02411;
  font-family:'Blender Pro';
}

.countdownExtended {/*ungu*/
  display: inline-block;
  border-radius: 16px;
  padding: 0.4vw 0.8vw 0.4vw 0.8vw;
  background-color: #E7E5F5;
  color: #403688;
  font-family:'Blender Pro';
}

.countdownStarRating {/*kuning terang*/
  display: inline-block;
  border-radius: 16px;
  padding: 0.4vw 0.8vw 0.4vw 0.8vw;
  background-color: #FFC35C;
  color: #FFFFFF;
  font-family:'Blender Pro';
}

.countdownStarRatingMobile {/*kuning terang*/
  display: inline-block;
  border-radius: 16px;
  padding: 0.5vh 2vw 0.5vh 2vw;
  background-color: #FFC35C;
  color: #FFFFFF;
  font-family:'Blender Pro';
}

.ticketTimeTexts {
  font-size:0.85vw; 
  white-space: nowrap;
  font-family:'Blender Pro'
}

.expandedbak {
  display: flex !important;
  position: fixed !important; /* Use "fixed" instead of "absolute" for screen centering */
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%); /* Center the element both horizontally and vertically */
  width: auto !important;
  height: auto !important;
  max-height: 80vh !important;
  max-width: auto !important;
  z-index: 9999; /* Set a high z-index value to ensure it's above everything else */
}

.expanded {
  display: flex !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  max-height: 80vh !important;
  max-width: auto !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
} 

.expandedM {
  display: flex !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  max-height: 90vh !important;
  max-width: 90vw !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.sortable:hover{
  cursor: pointer;
}

.htmlUserInput p{
  margin: 0px;
}

.divOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Adjust the alpha value (0.5) to control the opacity */
  z-index: 9997; /* Set a z-index just below the image to ensure it's above everything else except the image */
}

.my-custom-class {
  width: 9.375vw;
  height: 9.375vw;
  position: absolute;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid #E8E9EB;
}

.ql-toolbar{
  border-top: 2px solid #F5F5F6 !important;
  border-right: 2px solid #F5F5F6 !important;
  border-bottom: 0px solid #F5F5F6 !important;
  border-left: 2px solid #F5F5F6 !important;
  margin: -0.6vw -1.3vw 0vw -1.3vw !important;
  background-color:white !important;
  border-radius: 8px 8px 0 0;
}

.ql-container{
  border: 0px solid black !important;
  margin-left: -1.1vw !important;
  margin-right:-1.1vw !important;
  margin-bottom:-0.5vw !important;
}

.no-hover:hover {
  cursor: default; /* Change the cursor style on hover */
}

.buttonBlue{
  background-color: #0296D2;
  color: #FFFFFF;
  border: 0;
  border-radius: 8px;
  margin-right: 0.5vw;
  font-family: 'Blender Pro';
} 


.buttonBlue:hover,
.buttonBlue:focus,
.buttonBlue:active {
  background-color: #027DAF;
}

.buttonBlueSelected{
  background-color: #027DAF;
  color: #FFFFFF;
  border: 0;
  border-radius: 8px;
  margin-right: 0.5vw;
  font-family: 'Blender Pro';
} 
.buttonBlueSelected:hover,
.buttonBlueSelected:focus,
.buttonBlueSelected:active {
  background-color: #027DAF;
}

.buttonBlueM{
  background-color: #0296D2;
  color: #FFFFFF;
  border: 0;
  border-radius: 8px;
  margin-right: 0.5vw;
  font-family: 'Blender Pro';
} 


.buttonBlueM:hover,
.buttonBlueM:focus,
.buttonBlueM:active {
  background-color: #027DAF;
}

.buttonGreen{
  background-color: #1CC8B5;
  color: #FFFFFF;
  border: 0;
  border-radius: 8px;
  margin-right: 0.5vw;
  font-family: 'Blender Pro';
} 
.buttonGreen:hover,
.buttonGreen:focus,
.buttonGreen:active {
  background-color: #0CA796;
}

.datePicker {
  border-radius: 8px;
  padding: 0.6vw 1.2vw 0.6vw 1.2vw;
  font-size: 1.2vw;
  width: 20vw;
  border: 0px;
  background-color: #F5F5F6;
  color: #404041;
  font-family: 'Blender Pro';
}

.datePickerM {
  border-radius: 8px;
  padding: 1vh 2vw 1vh 2vw;
  font-size: 1.2vw;
  width: auto;
  border: 0px;
  background-color: #F5F5F6;
  color: #404041;
  font-family: 'Blender Pro';
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); /* Adjust the transparency by changing the last value */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-img {
  max-width: 80%;
  max-height: 80%; 
  margin-bottom: 10px;
  z-index: 9999;
}

.popup-img-mobile {
  margin-bottom: 10px;
  z-index: 9999;
}

.popupContent {
  max-width: 60%;
  max-height: 80%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998; /* Place the popup content above the overlay */
  background-color: white; /* Add your desired background color */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add shadow for a popup feel */
  overflow-y: scroll;
}

.popupContentMobile {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998; /* Place the popup content above the overlay */
  background-color: white; /* Add your desired background color */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add shadow for a popup feel */
  overflow-y: scroll;
}

.popup-overlay-transparent {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0); /* Adjust the transparency by changing the last value */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.docLib:hover {
  cursor: pointer;
  font-weight: bold;
  height:'2.5vw';
  color: #027DAF;
}

.popup-overlay-doclib{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0); /* Adjust the transparency by changing the last value */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 6;
}

.inlineImage {
  width:auto;
  height:auto;
  max-height: 40vw;
  max-width: 40vw;
}

.inlineImageAnc {
  width:auto;
  height:auto;
  max-width: 45vw;
}

.deleteHover:hover {
  cursor: pointer;
  color: #FFC35C;;
}

.swal2-popup {
  z-index: 10000 !important;
}


.blueBgClass { /*biru*/
  border: 0px solid black;
  display: inline-block;
  border-radius: 16px;
  padding: 0.4vw 0.8vw 0.4vw 0.8vw;
  background-color: #D6EBF6;
  color: #01648C;
  font-family:'Blender Pro';
}

.whiteBgClass { /*putih*/
  border: 0px solid black;
  display: inline-block;
  border-radius: 16px;
  padding: 0.4vw 0.8vw 0.4vw 0.8vw;

  font-family:'Blender Pro';
}

.grayBgClass { /*putih*/
  border: 0px solid black;
  display: inline-block;
  border-radius: 16px;
  padding: 0.4vw 0.8vw 0.4vw 0.8vw;
  background-color: #F5F5F6;
  color: #737E86;
  font-family:'Blender Pro';
}

.filter-selected {
  border: 1px solid #A3AEB7; 
  border-radius: 8px;
  padding: 0.4vw 0.8vw 0.4vw 0.8vw;
  background-color: #F5F5F6;
  color: #737E86;
  font-family:'Blender Pro';
}

.filter-selected-mobile {
  border: 1px solid #A3AEB7; 
  border-radius: 8px;
  padding: 0.4vh 2vw 0.4vh 3vw;
  background-color: #F5F5F6;
  color: #737E86;
  font-family:'Blender Pro';
  font-size: 1.5vh;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}