.d-none{display: none!important;}
/*.z-10{width: 70%!important;}*/
[data-cy="viewport-overlay-top-right"]{
  font-size: 12px;
}
[data-cy="viewport-overlay-top-left"]{
  font-size: 12px;
}
[data-cy="viewport-overlay-bottom-right"]{
  font-size: 12px;
}
[data-cy="viewport-overlay-bottom-left"]{
  font-size: 12px;
}
.header-app-logo{
  display: none;
/*  width: 80px!important;*/
/*  height: auto!important;*/
/*  padding: 10px;*/
}
#app_logo{
  display: none;
/*  width: 80px!important;*/
/*  height: auto!important;*/
/*  padding: 10px;*/
}

button svg {
  width: 20px!important;
  height: 20px!important;
}
button svg:hover{
  width: 25px!important;
  height: 25px!important;
}
[data-cy="undefined-btn"], #ReferenceLines, [data-tool="ImageOverlayViewer"]{
  color: white!important;
}
.gap-2 button svg {
  width: 20px!important;
  height: 20px!important;
}
.gap-2 button svg:hover {
  width: 25px!important;
  height: 25px!important;
}
span svg {
  width: 20px!important;
  height: 20px!important;
}
.relative button {
/*  min-width: 40px!important;*/
/*  min-height: 40px!important;*/
}

[aria-haspopup="menu"]{
  width: 20px!important;
}
h3 button{
  padding: 0!important;
  height: 20px!important;
  background-color: transparent!important;
}
#root{

        background-color: #1A202C!important;
}
::before, ::after {
  --tw-ring-color:gray!important;
}
.bg-black,.bg-dark,.bg-primary-dark,.bg-primary-main,.bg-secondary-dark,.bg-popover,.bg-bkg-low,.bg-bkg-med{
        background-color: #1A202C!important;
}
.bg-active-button{
  background-color: #35999a;
}
.bg-popover-custom{
  background-color: #2A3042!important;
}
.bg-accent{
  background-color: #35999a !important;
}
.bg-orange{
  background-color: #35999a;
}
.bg-orangered{
  background-color: #e8832f;
}
.border-thumbnail img{
  border-width: 2px;
  border-color: #e8832f;
  margin-right: 5px;
}
.border-thumbnail-active img{
  border-width: 2px;
  border-color: #35999a;
  margin-right: 5px;
}
.bg-highlight{
  background-color: white!important;
}
.bg-muted{
  background-color: #2A3042!important;
}
.bg-primary\/65{
  background-color: #1A202C!important;
}
.bg-active{
/*  background-color: lightgray!important;*/
  border: 1px;
  border-color: lightgray;
}
.svg:hover{
  color: #2A3042!important;
}
.noselect{
  color: white!important;
}
.text-primary,.text-primary-main,.text-primary-light,.text-secondary-main,.text-secondary-light,.text-common-light,.fill-current,.text-highlight{
  color: whitesmoke!important;
}
.border-highlight{
  border-color: darkred;
}
.border-highlight/50{
  border-color: #e8832f;
}
.\!text-primary{
    color: gray!important;
}
.text-muted,.text-muted-foreground {
    color: gray!important;
}
[stroke="currentColor"]{
  border-color: whitesmoke!important;
}
input,.border,.border-secondary-light,.customSelect__wrapper .customSelect__control,.border-primary-main{
  border-color: gray!important;
}

data-radix-popper-content-wrapper{
  background-color: #2a3042!important;  
}
.overlay-item{
  font-size: 12px;
}
#viewport-overlay-top-right{
  font-size: 12px;
}
#viewport-overlay-top-left{
  font-size: 12px;
}
#viewport-overlay-bottom-right{
  font-size: 12px;
}
#viewport-overlay-bottom-left{
  font-size: 12px;
}
.d-none{display: none!important;}
.svg-layer line{
  stroke: #35999a !important;
/*  stroke: rgb(0 140 255) !important;*/
/*  stroke-width: 2 !important;*/
}
.svg-layer g text{
  fill: #35999a !important;
/*  fill: rgb(0 140 255) !important;*/
/*  color: rgb(0 140 255) !important;*/
}
.svg-layer g text tspan{
  color: #35999a !important;
/*  color: rgb(0 140 255) !important;*/
}
.modalct {
  position: fixed;
  z-index: 100;
  right: 0;
  margin-right: 10px;
  top: 30vh;
  width: 300px;
  height: 100px;
  background-color: transparent;
  /*background-color: rgba(0, 0, 0, 0.5);*/
  padding: 0;
}

.modalct-content{
  background-color: #11131B;
  /*margin: 15% auto;*/
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 400px;
  color:white;
  font-size: 12px;
}

.modalB {
  position: fixed;
left: 10vw;
/*transform: translateX(-50%);*/
  z-index: 100;
  top: 10vh;
  width: auto;
  min-width: 300px;
  height: auto;
  background-color: transparent;
  /*background-color: rgba(0, 0, 0, 0.5);*/
  padding: 0;
}
.show-all-btn span{
  color: #35999a;
}
.modalB-content{
/*  background-color: #11131B;*/
  /*margin: 15% auto;*/
  padding: 20px;
/*  border: 1px solid #888;*/
/*  width: 80%;*/
  max-width: 500px;
  color:white;
  font-size: 12px;
}
.close {
  color: #aaa;
  float: right;
  top: 0;
  font-size: 20px;
  font-weight: bold;
}

.close:hover, .close:focus {
  color: black;
  text-decoration: none!important;
  cursor: pointer;
}

.aboutus{
	width: 70%!important;
	position: absolute;
	z-index: 100;
	margin-top: 20vh;
	margin-left: 15%;
	margin-top: 15%;
	height: 60%;
}

@media (max-width:768px){
#app_logo{
  display: none;
}
.divContent {
  height: calc(100vh - 45px)!important;
/*  margin-top: 42px;*/
}
[data-orientation="vertical"] h3{
  display: none;
}

[data-cy="studyBrowser-panel"]{
  padding-left: 0px;
/*  min-width: 0px!important;*/
  max-width: 150px!important;
}
#viewerLayoutResizablePanelGroup{
  height: calc(100vh - 50px)!important;
}
#viewerLayoutResizableLeftPanel{
  min-width:1px!important;
  width:1px!important;
  max-width:145px!important;
  flex: 145px!important;
}

#viewerLayoutResizableViewportGridPanel{
  flex: calc(100vw - 145px)!important;
}
#viewerLayoutResizableViewportGridPanel.full{
  flex: 100vw!important;
}

#viewerLayoutResizableLeftPanel.hide{
/*  width: 60px!important;*/
flex:1px!important;
margin-left: -145px!important;
}

#viewerLayoutResizableRightPanel{
  display: none!important;
  width: 0.5px!important;
}
.divToolButtons {
  position: absolute!important;
  z-index: 999!important;
  padding: 2px;
  width: 100vw;
  height:auto;
  display:flex;
  margin-top:calc(100vh - 45px)!important;
  background-color: #2a3042!important;
}
.divToolButtons.show{
  position: absolute!important;
  z-index: 999!important;
  padding: 2px;
  width: 100vw;
  height:auto;
  display:flex;
  margin-top:calc(100vh - 90px)!important;
  background-color: #2a3042!important;
}

.relative-sb{
  position: relative;
  float: left;
  margin-left: -20px;
}
.relative #SeriesButton {
  position: relative;
  float: left;
  justify-content: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.relative #SeriesButton button{
  background-color: #e8832f!important;
}
.ToolButtons {
/*  position: absolute!important;*/
  padding: 2px;
/*  bottom: 0!important;*/
/*  transform: translateY(+100%);*/
  left: 0!important;
  width: 100vw;
  background-color: #2a3042!important;
/*    align-items: center; */
}

.tools{
  display: flex;
  flex-wrap:wrap;
  position: relative;
  top: 0;
}

            .show-all-btn {
                display: flex;
            }

        /* Tombol Lihat Semua */
        .show-all-btn {
            display: none;
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: transparent;
            border: 1px solid #35999a;
            color: whitesmoke;
            width: bold;
            font-size: 1.5rem;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            margin-right: 10px auto;
            transition: all 0.3s ease;
        }
        
        .show-all-btn:hover {
            border-color: #e8832f;
            transform: scale(1.05);
        }
.relativeTools {
  display: flex;
  flex-wrap: wrap; /* penting agar elemen anak bisa turun ke bawah */
  width: 100%;
  background-color: #1A202C !important;
  gap: 0.5rem; /* opsional: beri jarak antar tombol */
}
.div-more-tools{
	left: 50%!important;
	bottom: 0;
	transform: translate(-50%,0%);
}
.tooltip-box{
	position: absolute;
	z-index: 50;
	left: 50px!important;
	bottom: 200px;
	margin-bottom: 200px;
	transform: translate(-50%,0%);
}
.tooltip-top{
	top:50vh!important;
	margin-left: 20vw;
	transform:translateY(-50%);
}
}
@media (min-width:768px){

.divContent {
  height: 100vh!important;
/*  margin-top: 42px;*/
}
[data-cy="studyBrowser-panel"]{
/*      position: fixed;
      z-index: 999;
      top: 0;
      left: 0;
      margin-left: 50%;
      margin-top: 5px;
      transform: translateX(-50%);
      width: calc(100% - 400px);
      height: auto;
      display:block;*/
/*  border:1px solid white;*/
/*  background-color: transparent!important;*/
}
/*
#viewerLayoutResizableViewportGridPanel{
  flex: 100vw!important;
}*/

/*#viewerLayoutResizableLeftPanel.hide{*/
/*  width: 60px!important;*/
/*flex:80px!important;*/
/*margin-left: -250px!important;*/
/*}*/
#viewerLayoutResizableLeftPanel{
  min-width:80px!important;
  width:210px!important;
  max-width:auto;
}

#viewerLayoutResizableLeftPanel.hide{
/*  width: 60px!important;*/
margin-left: -140px!important;
}
#viewerLayoutResizableRightPanel{
  display: none!important;
  width: 0.5px!important;
}
[data-panel-collapsible="true"]{
/*  padding-top: 0;*/
}
[data-cy="studyBrowser-panel"]{
  padding-left: 75px;
}
h3{
  display: none!important;
}
#a_app_logo{
display: none;
/*position: absolute;*/
/*z-index: 10;*/
}
.space-x-2 .relative{
	margin-top: 5px;
	margin-bottom: 5px;
}
.div-more-tools{
/*	left: 50%!important;*/
	margin-left: 60px!important;
	transform:translateY(-60px);
/*	transform: translate(-50%,0%);*/
}
.navTools{
  width: 75px!important;
}
.divToolButtons{
  position: fixed!important;
  z-index: 999!important;
  padding: 2px;
/*  top: 0!important;*/
  left: 0!important;
/*  margin-top: 50vh!important;*/
/*  transform: translateY(-50%);*/
  width: 80px!important;
  height: 100vh!important;
/*  background-color: #1A202C!important;*/
  background-color: #2a3042!important;
/*  border-right-width: 1.5px;*/
/*  border-color: gray;*/
}
.relative-sb{
  position: relative;
  float: left;
  margin-left: -20px;
}
.relative #SeriesButton {
  position: relative;
  float: left;
  justify-content: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.relative #SeriesButton button{
  background-color: #e8832f!important;
}
.ToolButtons {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    margin-top: 50vh;
    transform: translateY(-50%);
    padding-left: 15px!important;
}
[data-cy="MoreWindowTools-split-button-secondary"] button,
[data-cy="MoreZoomTools-split-button-secondary"] button,
[data-cy="FlipRotateTools-split-button-secondary"] button,
[data-cy="MeasurementTools-split-button-secondary"] button,
[data-cy="MoreTools-split-button-secondary"] button,
{
  width: 20px!important;
}
.relativeTools {
  background-color: #1A202C !important;
  gap: 0.5rem; 
}

.tooltip-box{
/*	position: absolute;*/
/*	z-index: 50;*/
/*	left: 50px!important;*/
/*	margin-left: 60px!important;*/
/*	transform:translateY(-60px);*/
/*	transform: translate(-50%,0%);*/
}
/*.tooltip-bottom{
	left: 0;
	margin-left: 60px;
	margin-bottom: -60px;
	background-color:gray!important;
	transform: translateY(50%);
}*/
.tooltip-top{
	margin-left: 60px!important;
	background-color:gray!important;
}

#SplitButton svg path[d="M10 13 5 7.737 5.7 7l4.3 4.526L14.3 7l.7.737z"]{
  transform: rotate(-90deg);
  transform-origin: center;
}
path[d="M24 22l-12-20l-12 20"]{
	display: none!important;
}
tooltip-box{
/*	border: none!important;*/
}
}

.bg-primary-btn{
	background-color: skyblue!important;
}
.relative .text-center{
/*	background-color: skyblue!important;*/
}

.rounded{
	border-radius: 0!important;
}
[data-cy="viewport-notification"]{
  position: absolute;
	max-width: 600px!important;
	left: 50vw;
	transform: translateX(-50%);
}
.Zvisible svg {
  display: none!important;
}
.Zvisible {
  width: 24px;
  height: 24px;
  cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><path fill="white" d="M27.5,32H4.5A4.51,4.51,0,0,1,0,27.5V4.5A4.51,4.51,0,0,1,4.5,0h23A4.51,4.51,0,0,1,32,4.5v23A4.51,4.51,0,0,1,27.5,32ZM4.5,3A1.5,1.5,0,0,0,3,4.5v23A1.5,1.5,0,0,0,4.5,29h23A1.5,1.5,0,0,0,29,27.5V4.5A1.5,1.5,0,0,0,27.5,3Zm7.82,20a1.45,1.45,0,0,1-1.06-.44,1.49,1.49,0,0,1,0-2.12l9-9a1.5,1.5,0,0,1,2.12,2.12l-9,9A1.47,1.47,0,0,1,12.32,23ZM10.64,17a1.48,1.48,0,0,1-1.06-.43,1.5,1.5,0,0,1,0-2.13l5-5a1.49,1.49,0,0,1,2.12,0,1.51,1.51,0,0,1,0,2.12l-5,5A1.5,1.5,0,0,1,10.64,17Z"/></g></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
[data-cy="seriesList-btn"] span {
  display: none!important;
}
#seriesList-btn{
  display: none!important;
}
#radix-:r11:{
  padding: 0!important;
}
/*[data-cy="seriesList-btn"]{
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  margin-right: 100px;
  margin-top: 5px;
  display:block;  
}*/
/*#viewerLayoutResizableLeftPanel .bg-bkg-med{
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  margin-left: 50%;
  margin-top: 10px;
  transform: translateX(-50%);
  width: calc(100% - 400px);
  height: auto;

}*/
/*.muteStudyBrowser{
  display: none!important;
}*/

button:hover{
 background-color: transparent;
 border: 0;
 font-size: 105%;
 color: gray;
}
button svg:hover{
  color: gray;
}
.dropdown-content{
  position: absolute;
  z-index: 1000;
  top: 0;
/*  margin-left: 100px;*/
}
/* Default (untuk layar kecil <= 765px) */

@media (max-width: 766px) {
.show-all-btn {
  display: flex;
}

.dd-item {
  display: block; /* atau sesuai kebutuhan, karena sebelumnya .flex dihapus */
}

.more-custom-btn {
  display: inline-flex; /* ditampilkan */
}

.more-menu-btn {
  display: none; /* disembunyikan */
}
.more-menu-btn:hover {
  background-color: #35999a!important;
}
  .MoreDropdownMenuCustom{
  top: calc(100vh - 280px)!important;
            border: 1px solid whitesmoke!important;
            border-color: whitesmoke!important;
            left:150px!important;
/*  margin-left: 10vh;*/
  }
  .show-all-btn span{
    display: block;
  }
}
/* Untuk layar besar > 765px */
@media (min-width: 766px) {
  .MoreDropdownMenuCustom{
    top: 0!important;
    margin-top: 10vh!important;
            border: 1px solid whitesmoke!important;
            border-color: whitesmoke!important;
                        left:50px!important;
  }
  .show-all-btn {
    display: none;
  }
  .show-all-btn span{
    display: none;
  }

  .dd-item {
    display: flex; /* jika sebelumnya ingin ditampilkan flex di desktop */
  }

  .more-custom-btn {
    display: none;
  }

  .more-menu-btn {
    display: inline-flex;
  }

  .divtool-buttons {
    /* efek seperti .classList.remove('show') bisa berarti di-hide */
    /* contoh: */
    display: none; /* sesuaikan dengan perilaku aslinya */
  }
}