.roislidepanel {
/*    left: 1040px !important;*/
    top: 0px !important;
    height: 100% !important;
    width: 18% !important;
    
}

.imgviewernew {
    left: 0px !important;
    top: 0px !important;
    height: 100% 501px !important;
    width: 81.0544% !important;
    
}
.img-thumbnail {
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 4px;
    line-height: 1.42857143;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
ul.iconlist {
    margin: 0;
    padding: 0px;
    width: 100%;
    height: 0;
    display: flex;
    float: left;
    /* background-image: linear-gradient(#1F63BD, #004393); */
    color: white;
    border: 1px solid black;
    background-color: #fff;
}
.whiteBg-2 {
    background-color: #fff;
    margin: 0;
    padding: 0px 2px 0px 0px;
}
ul.iconlist li a img {
    width: 100%;
    height: 49%;
}

ul.roi-ul-list {
    margin: 0;
    padding: 0;
    width: 100%;
}
.viwertoolstyle {
    padding-left: 5px;
    margin-bottom:5px !important;
    height: 41px !important;
    position: relative;
    z-index: 0;
    border: none !important;
}


ul.iconlist li {
    list-style-type: none;
    font-size: 16px;
    color: #5a5a5a;
    margin-bottom: 10px;
}

    ul.iconlist li a {
        /*        list-style-type: none;
        font-size: 16px;
        color: #5a5a5a;
        padding: 4px 8px;
        display: inline-block;
        min-width: 31px;*/
        display: inline-block;
    }
/*.viwertoolbackbtnstyle {
    color: #212121 !important;
    font-size: 13px !important;
    width: 15%;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 10px;
    min-width: 90px !important;
}*/

.viwertoolbackbtnstyle {
    color: #212121 !important;
    font-size: 16px !important;
    width: 15%;
    font-style: normal;
    font-weight: 600;
    padding: 6px 8px;
    border-radius: 8px;
    display: inline-block;
    line-height: normal;
/*    background: rgba(33, 33, 33, 0.12);*/
    margin-top: 8px;
    min-width: 90px !important;
}

.viwericonst {
    margin-top: 5px;
    padding: 6px !important;
    border-radius: 6px;
    background: rgba(33, 33, 33, 0.12);
}

.viwericonstyle{
    width:20px !important;
}

ul.iconlist li {
    margin-bottom: 1px !important;
    margin-left: 8px !important;
    display: inline-block;
}

.pixellist {
    color: #3B82F6 !important;
    font-size: 13px !important;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: 35px; /* same size as icons */
    height: 32px;
    display: inline-block !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    align-items: flex-start !important;
}

.magnifier-item img {
    height: 20px !important; 
    width: auto;
}

.magelements {
    color: #212121;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: 12px;
    float: right;
}

.with-divider {
    position: relative;
    padding-right: 10px; /* space between text and line */
    margin-right: 0px;
}

    .with-divider::after {
        content: "";
        position: absolute;
        right: 0;
        top: 60%;
        width: 1px; /* your width */
        height: 20px; /* your height */
        background: rgba(33, 33, 33, 0.40); /* your fill color */
        transform: translateY(-50%); /* vertically center the line */
    }

.annotationtools {
    height: 40.00px;
    width: 270.00px;
    inset: 50.5px auto auto 450.5px;
    z-index: 102;
    display: block;
}

#annotationToolbarui #us_annotpanel1 ul.iconlist li {
    width: 35px !important;
    margin-top: 4px;
}

#annotationToolbarui #us_annotpanel1 ul.iconlist {
    border: none !important;
}

.roitabsnew{
    height: 33px !important;
}

    .roitabsnew .nav-pills li {
        width: 78px;
        height: 43px;
        border-top: 0px solid rgba(0, 0, 0, 0.20);
        background: #FFF;
    }

.slidetabBttn {
    background: white;
    border: none !important;
    padding: 3px 10px;
    min-width: 40px;
    display: inline-block;
    text-align: center;
    margin-right: 5px;
    color: #212121 !important;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.nav-pills > li > a {
    border-bottom: 3px solid transparent; /* default no underline */
    padding-bottom: 8px; /* spacing for underline */
    display: flex !important;
    align-items: center; /* vertical center */
    justify-content: center; /* horizontal center */
    padding: 0 !important; /* remove default padding */
}

    .nav-pills > li.active > a,
    .nav-pills > li > a:hover {
        border-bottom: 3px solid #007bff;  //blue underline when active 
        background-color: transparent !important;  //keep tab background clean 
        color: #007bff !important;
    }

.tab-content-1 {
    border: 0px solid #d9d9d9 !important;
    margin: 15px 10px;
}

.subnav ul.nav li.active a,
.subnav ul.nav li > a:hover {
    color: white !important;

}

.subnav ul.nav li.active a {
    color: white;
    border-radius: 6px;
    background: #00A8D1 !important;
    color: #FFF !important;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.subnav .nav li a {
    padding: 3px 3px;
    line-height: 30px !important;
}

.subnav ul.nav-pills {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    margin: 0;
    width: 100%;
}
    .subnav ul.nav-pills > li {
        flex: 1;
        text-align: center;
    }
/*.subnav ul.nav li > a {
    padding: 10px 15px;
    border-bottom: 3px solid #d9d9d9;*/ /* default: no border */
/*}*/



/* Active tab */
/*.subnav ul.nav li.active > a {
    color: black !important;
    background: transparent !important;
    border-color: #d9d9d9;
    border-bottom: 3px solid #00A8D1 !important;*/ /* blue bottom border */
/*}*/

/* Hover state (without adding border) */
/*.subnav ul.nav li > a:hover {
    color: black !important;
    background: transparent !important;
    border-bottom: 3px solid transparent;*/ /* keep clean */
/*}*/
.subnav ul.nav.nav-pills li > a {
    display: inline-block;
    padding: 10px 15px;
    border-bottom: 3px solid #d9d9d9 !important;
    border-radius: 0 !important; /* avoid pill styling */
    color: #212121;
    font-size: 16px;
    font-style: normal;
    line-height: normal;
}

/* Active tab */
.subnav ul.nav.nav-pills li.active > a {
    color: black !important;
    font-weight: 800;
    background: transparent !important;
    border-bottom-color: #00A8D1 !important; /* active blue line */
}


/* Hover */
.subnav ul.nav.nav-pills li > a:hover {
    color: black !important;
    background: transparent !important;
    border-bottom-color: #d9d9d9 !important;
}




.slide-name {
    color: #212121;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    float: left;
    line-height: normal; /* keep your existing alignment */
    margin-top: 4px;
}

.checkboxnew {
    width: 20px;
    height: 16px;
    background: #00A8D1 !important;
    aspect-ratio: 1/1;
    border-radius: 5px;
    margin: 4px 0 0 !important;
}

.ul.iconlist {
    margin: 2px !important;
}
.backgroundforslidenamecheckbox {
    width: 100%;
    height: 25px;
    border-radius: 8px;
    background: rgba(33, 33, 33, 0.10);
    margin-bottom: 2px;
}


.slideimageatag {
    display: inline-block;
    width: 100%;
}

.slide-thumbnail {
    width: 88px;
    height: 326px !important;
    transform: rotate(90deg) scaleX(-1);
    border-radius: 8px;
    background: lightgray 50% / cover no-repeat;
    display: block;
    margin: 0 auto;
    margin-top: -123px !important;
    border: 2px solid #00A8D1 !important;
}

.rotateThumbnail {
    -webkit-transform: rotate(0deg) scaleY(-1) !important;
    -moz-transform: rotate(360deg) scaleY(1);
    -o-transform: rotate(360deg) scaleY(1);
    -ms-transform: rotate(3600deg) scaleY(1);
    transform: rotate(360deg) scaleY(1);
}

/*.carousel-inner {
    margin-bottom: 5px;
    border-bottom: 0px solid black !important;
    margin-top: 5px;
    height: 50vh !important;
}*/

.carousel-inner {
    margin-bottom: 5px;
    border-bottom: 0px solid black !important;
    margin-top: 5px;
    height: 75vh !important;
    overflow-y: scroll !important;
    overflow-x: hidden !IMPORTANT;
}

/*.carousel-inner {
    overflow: auto !important;*/ /* or scroll */
    /*scrollbar-width: none;*/ /* Firefox */
/*}

    .carousel-inner::-webkit-scrollbar {
        display: none;*/ /* Chrome, Edge, Safari */
    /*}*/


.otherbackbtn {
    margin-left: 10px !important;
    margin-right: -20px;
}

ul.roi-ul-list li.roi-li-list {
    list-style-type: none;
    display: inline-block;
    width: 23% !important;
    height: 25%;
    margin: 0 10px;
}

.tissue-Name {
    width: 34.795px;
    height: 16.374px;
    color: #212121;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.commentroi {
   /* width: 221px;*/
    height: 160px;
    border-radius: 20px 20px 0 0;
    background: #FFF;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.30);
    margin-top: 3px;
}

textarea.form-control {
    min-height: 80px;
    width: 95%;
    margin-left: 5px;
}

.commentbutton {
    border-radius: 8px;
    background: #00A5C7;
    height: 36px;
    margin-right: 6px;
    float: right;
}

.roundBttn {
    background: #00A5C7 !important;
}

.jqx-splitter {
    border: none !important;
}

.diagnosisnew {
    width: 300px;
    height: 309px;
    border-radius: 20px 20px 0 0;
    background: #FFF;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.30);
    margin-top: 161px;
}

/*.boxdg {
    width: 220px;
    height: 90px;
    border: 1px solid #ccc;
    display: flex;*/
    /*flex-direction: column-reverse;*/ /* This makes content appear ABOVE header */
    /*border-radius: 20px 20px 0 0;
    background: #FFF;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.30);
    position: fixed;
    bottom: 0;*/ /* stick to bottom */
    /*left: 91%;*/ /* center horizontally */
    /*transform: translateX(-50%);*/ /* adjust to center */
    /*z-index: 9999;
}

.box-headerdg {
    padding: 10px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #fff;
    margin-bottom: 40px;
}

.arrowdg {
    background: #00a6d6;
    color: white;
    border-radius: 50%;
    padding: 5px 8px;
}

.box-contentdg {
    padding: 10px;
    display: none;*/ /* Hidden initially */
    /*background: #f8f8f8;

    border-radius: 20px 20px 0 0;
    background: #FFF;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.30);
}

.txtst {
    width: 100%;
    height: 70px;
    margin-bottom: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 8px;
}

.save-btndg {
    background: #00a6d6;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
}*/
/* Container fixed to bottom-right (adjust right/left as desired) */
.case-diagnosis-box {
    position: fixed;
    right: 15px; /* distance from right edge */
    bottom: 0px; /* distance from bottom edge */
    width: 17%; /* adjust width */
    border-radius: 12px 12px 0px 0px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    transition: max-height 0.28s ease, box-shadow 0.28s ease;
    z-index: 9999;
    /* start collapsed */
    max-height: 73px; /* height when collapsed (header height) */
}

/* Header - always visible */
.case-diagnosis-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    background: #ffffff;
    
}

.case-diagnosis-title {
    color: #212121;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

/* toggle button */
.case-diagnosis-toggle {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    /* circular colored arrow */
    .case-diagnosis-toggle .arrow {
        display: inline-block;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #00a8d1;
        color: #fff;
        line-height: 34px;
        text-align: center;
        font-size: 16px;
        transform: rotate(0deg);
        transition: transform 0.22s ease;
    }

/* Content area (hidden when collapsed) */
.case-diagnosis-content {
    padding: 12px 14px 16px 14px;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.03);
    box-sizing: border-box;
    /* hidden by default via container max-height; allow smooth reveal */
}

    /* Textareas and UI */
    .case-diagnosis-content label {
        display: block;
        margin-top: 0px;
        margin-bottom: 0px;
        font-weight: 600;
        color: #222;
        font-size: 10px;
    }

.case-txt {
    width: 100%;
    min-height: 55px;
    resize: vertical;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.12);
    padding: 8px 10px;
    font-size: 13px;
    margin-bottom: 0px;
    box-sizing: border-box;
}

/* action button */
.case-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 6px;
}

.case-save {
    background: #00a8d1;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.dot-summaryhisto {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(33, 33, 33, 0.14);
}

.dot-summary-itemhisto {
    display: flex;
    align-items: center;
    padding: 10px 5px;
    border-bottom: 1px solid #e5e5e5;
}

.dot-colorhisto {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-right: 8px;
}

.dot-namehisto {
    color: #212121;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    flex: 1;
}

.dot-counthisto {
    color: #212121;
    text-align: right;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.analysisheadinghisto {
    width: 100%;
    height: 5vh;
    border-radius: 10px;
    background: #00A8D1;
    padding: 12px 14px 10px 14px;
    margin-bottom: 10px;
}


.her2-score-box {
    padding: 0px 0px;
    width: 260px;
    font-family: Segoe UI;
}

.her2-header {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    color: #0D51A2;
    padding: 10px 18px;
    margin-bottom: 12px;
}

.score-value {
    color: #00A8D1;
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.her2-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px;
    font-size: 14px;
    color: #333;
}

.her2-value {
    color: #212121;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.her2finalsc {
    color: #00A8D1;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.her2finalsc1{
    color: #212121;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.overlay-settings {
    width: 100%;
    font-family: Roboto;
    margin-bottom: 15px;
}

.overlay-title {
    color: #212121;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 6px;
}

.overlay-tabs {
    display: flex;
    background: #e9e9e9;
    padding: 5px;
    border-radius: 8px;
}

.tabhisto {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 10px;
    cursor: pointer;
    border-radius: 6px;
    color: rgba(33, 33, 33, 0.60);
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 12px; /* 75% */
}

    .tabhisto.active {
        color: #00A8D1;
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 12px; /* 75% */
        border-radius: 6px;
        border: 1px solid #DDD;
        background: #FFF;
        box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    }

/* Remove border from last item */
.dot-summary-itemhisto:last-child {
    border-bottom: none;
}
/* When expanded, grow max-height enough to show content */
.case-diagnosis-box.expanded {
    max-height: 85vh; /* adjust to required expanded height */
}

    /* rotate arrow when expanded */
    .case-diagnosis-box.expanded .case-diagnosis-toggle .arrow {
        transform: rotate(180deg);
    }

.microscopicdesc {
    color: #212121;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: 0;
}
.analysisheading {
    width: 222px;
    height: 32px;
    border-radius: 8px;
    background: rgba(0, 168, 209, 0.08);
    color: #212121;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 7px;
    margin-bottom: 10px;
}

.analysis-panel {
    width: 222px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    padding: 0px;
}

.analysis-header {
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 11px;
    margin-bottom: 0px;
    padding: 10px;
    background: rgba(33, 33, 33, 0.08);
    height: 33px;
}

.arrow i{
    font-size: 14px !important;
    transition: transform 0.3s ease;
}

.arrow.rotated i {
    transform: rotate(180deg);
}
.cytoimgvisttabsample {
    float: inline-start;
    color: #212121;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.fov-headingst {
    color: #212121;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-top: 10px;
    margin-bottom: 5px;
}
ul.roi-ul-list li.roi-li-list1 {
    list-style-type: none;
    display: inline-block;
    width: 100% !important;
    /* float: left; */
    height: 25%;
    margin: 0 0px;
}

.cytoroiimgst {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
}

    /* EXCLUDE empty state from grid layout */
    .cytoroiimgst .no-fov-item {
        grid-column: 1 / -1; /* full width */
        display: flex;
        justify-content: center;
    }

.fov-heading {
    /*margin-top: 6px;
        background-color: white;
        color: #8a6d3b;
        text-align: center;
        padding: 2px;
        margin-bottom: 10px;*/
    margin-top: 15px;
    display: flow-root;
    gap: 50px;
    color: black;
    text-align: center;
    margin-bottom: 10px;
}

.slidetabBttnstyles {
    display: inline !important;
    border-radius: 6px;
    background: #EBEBEB;
    padding: 5px 8px 5px 8px !important;
    color: #212121;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

    .slidetabBttnstyles:hover {
        border-radius: 6px;
        background: #00A8D1 !important;
        padding: 0px 8px 0px 8px;
        color: #212121;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

.cytoimgvisttab {
    float: right;
    color: #00A8D1;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}


.analysis-body {
    overflow: hidden;
    max-height: 500px;
    transition: max-height 0.3s ease;
}


    .analysis-body.collapsed {
        max-height: 0;
        padding: 0;
        opacity: 0;
    }

/* Other CSS same as yours */
.stain-title {
    padding: 10px;
    font-size: 13px;
    margin-bottom: 8px;
}

.slider-track {
    position: relative;
    height: 6px;
    background: #e0e0e0;
    border-radius: 4px;
}

.slider-selected {
    position: absolute;
    height: 6px;
    background: #1fa8dd;
    border-radius: 4px;
}

.handle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: absolute;
    top: -5px;
}

    .handle.left {
        background: orange;
    }

    .handle.right {
        background: gold;
    }

.label-row {
    padding: 10px;
    height: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 0px;
    font-size: 13px;
    font-weight: bold;
}

.default-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
  
    margin-top: 12px;

    font-weight: bold;
  
   
    
    cursor: pointer;
    font-size: 12px;
    margin-bottom: 0px;
    padding: 10px 5px 10px 5px;
    background: rgba(33, 33, 33, 0.08);
}


.roi-name {
    color: #212121;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}


.roi-item {
    margin-bottom: 8px;
/*    padding: 8px;*/
    list-style-type: none;
    border-radius: 10px;
    border: 1px solid #00A8D1;
    background: rgba(0, 168, 209, 0.10);
}

.roi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 7px;
    height: 33px !important;
}

.roitablestyle{

}

.Result-label {
    color: #212121;
    /* font-family: Roboto; */
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}


#ROIAnalysisParameters {
    height: 74vh;
    width: 100%;
    overflow-y: auto;
    /* Hide scrollbar – no layout effect */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

#ROIAnalysisParameters::-webkit-scrollbar {
    width: 0 !important; /* Chrome/Safari */
    height: 0 !important;
}


.roitablestyle tbody tr:not(:last-child) {
    border-bottom: 1px solid #dee2e6 !important; /* your border color */
}

    .roitablestyle tbody tr:last-child {
        border-bottom: none !important;
    }

    .roitablestyle tbody tr:first-child {
        border-top: none !important;
    }

.roi-arrow i {
    transition: transform 0.3s;
    width: 6px;
    height: 12px;
    aspect-ratio: 1/2;
    stroke-width: 2px;
    stroke: #212121;
    margin-right: 10px;
}

.roi-icon i {
    font-size: 14px;
    color: #00A8D1;
}

.roi-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    border: 1px solid #00A8D1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: -38px;
}

.roi-item.open .roi-arrow i {
    transform: rotate(180deg);
}

.analyzedroilist {
    width: 222px;
    margin-top: 10px;
}

.analysisroist{
    padding:0px;
}

.bar {
    width: 1px;
    height: 20px;
    fill: rgba(33, 33, 33, 0.40);
    margin: 0 5px;
}

.navbar-case-info .barheading {
    color: #212121;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.navbar-case-info .barvalues1 {
    color: #212121;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.navbar-case-info .barvalues {
    color: #008CFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.loginfooter {
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 1283px;
    height: 30px;
    background: #00A8D1;
}

.required::after {
    content: " *";
    color: red;
    font-weight: bold;
}


.histoansc {
    display: inline;
    color: #FFF;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.histoansc1 {
    float: right;
    color: #FFF;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}
/* Conference Chat Box Section*/
/* MAIN CONTAINER */
/* MAIN CONTAINER */
/*.chat-container {
    position: fixed;
    right: 5px;
    bottom: 0;
    width: 17%;
    border-radius: 12px 12px 0 0;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    border: 1px solid rgba(0,0,0,0.08);
    overflow: hidden;*/
/* collapsed height (only header visible) */
/*max-height: 70px;
    transition: max-height 0.35s ease;
}*/
/* SECTION HEADER */
/*.chat-section-header {
    background: #ffffff;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid #e5e5e5;
}

.chat-title {
    font-size: 16px;
    font-weight: bold;
}*/
/* ROUND TOGGLE BUTTON */
/*.circle-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #00A6C8;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .circle-toggle i {
        color: white;
        font-size: 14px;
    }*/
/* SECTION BODY */
/*.chat-section-body {
    padding: 12px;
    background: #fff;
}*/
/* PARTICIPANT LIST */
/*.participant-list {
    width: 100%;
    border-radius: 10px;
    padding: 5px;
    background: #F3F3F3;
    border: 1px solid #ddd;
}*/
/* ACTION BUTTONS */
/*.row-actions {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.chat-btn {
    background: #00A6C8;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
}*/
/* CHAT AREA */
/*.chat-message-box {
    min-height: 180px;
    max-height: 250px;
    overflow-y: auto;
    padding: 10px;
    background: #F9F9F9;
    border-radius: 10px;
    margin-bottom: 10px;
}*/
/* CHAT INPUT */
/*.chat-input-area {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chat-text {
    flex: 1;
    height: 50px;
    border-radius: 10px;
}*/
/* SEND BUTTON */
/*.send-btn {
    background: #00A6C8;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .send-btn i {
        color: white;
        font-size: 18px;
    }*/
.chatanlysisbtn {
    padding: 4px 12px;
    min-width: 60px;
    display: inline-block;
    text-align: center;
    background: #5D90F3;
    /*background-image: linear-gradient(to right top, #2d68c1, #255fb6, #1c56ab, #114da0, #0E4FA2);*/
    background-color: #00A6C7;
    color: #fff;
    border: 1px solid #9a9899;
    border-radius: 6px;
}

/* TAG BADGES LIKE YOUR SCREENSHOT */
.tag-blue {
    background: #00A6C8;
    color: white;
    border-radius: 10px;
    padding: 4px 8px;
    font-size: 12px;
    display: inline-block;
    margin: 4px;
}

.tag-gray {
    background: #EEEEEE;
    color: #000;
    border-radius: 10px;
    padding: 4px 8px;
    font-size: 12px;
    display: inline-block;
    margin: 4px;
}


.redTxt {
    color: #FF0000 !important;
}

/*reeponssive css*/
@media(min-width: 1024px) and (max-width: 1079px) {
    .carousel-inner {
        margin-bottom: 5px;
        border-bottom: 0px solid black !important;
        margin-top: 5px;
        height: 46vh !important;
    }
    #ROIAnalysisParameters {
        height: 74vh;
        padding: 0px 0px 10px 0px;
    }
    .analysisheading {
        width: 76%;
        height: 32px;
        font-size: 12px;
    }
    .analysis-panel {
        width: 75%;
    }
    .analysis-header {
        font-size: 10px;
        margin-bottom: 0px;
        padding: 8px;
    }
        .backbtnst {
        margin-left: -10px !important;
        margin-right: -12px !important;
    }

    .magelements {
        font-size: 11px;
    }

    .viwertoolbackbtnstyle {
        font-size: 12px !important;
        font-weight: 600;
        padding: 6px 4px;
        margin-top: 8px;
        min-width: 70px !important;
    }

    ul.iconlist li {
        margin-bottom: 1px !important;
        margin-left: 5px !important;
        display: inline-block;
    }

    .with-divider {
        position: relative;
        padding-right: 4px;
        margin-right: 0px;
    }

    .slide-thumbnail {
        width: 65px;
        height: 170px !important;
        margin: 0 auto;
        margin-top: -55px !important;
    }

    .subnav ul.nav.nav-pills li > a {
        padding: 10px 15px;
        font-size: 12px;
    }

    .navbar-case-info .barheading {
        font-size: 12px;
    }

    .navbar-case-info .barvalues {
        font-size: 12px;
    }

    .navbar-case-info .barvalues1 {
        font-size: 12px;
    }

    .viwertoolbackbtnstyle {
        font-size: 12px !important;
    }

    ul.iconlist li a img {
        width: 100%;
        height: 42%;
    }

    .case-diagnosis-title {
        font-size: 12px;
    }

    .microscopicdesc {
        font-size: 12px;
    }
}


@media (min-width: 1080px) and (max-width: 1145px) {
    .analysisheadinghisto {
        width: 100%;
        height: 4vh;
        padding: 10px 14px 10px 14px;
    }

    .histoansc {
        font-size: 14px;
    }

    .histoansc1 {
        font-size: 14px;
    }

    .dot-namehisto {
        font-size: 13px;
    }

    .dot-counthisto {
        font-size: 13px;
    }
    .carousel-inner {
        margin-bottom: 5px;
        border-bottom: 0px solid black !important;
        margin-top: 5px;
        height: 46vh !important;
    }
    #ROIAnalysisParameters {
        height: 74vh;
        padding: 0px 0px 10px 0px;
    }
    .analysisheading {
        width: 80%;
        height: 32px;
        font-size: 12px;
    }

    .analysis-panel {
        width: 78%;
    }

    .analysis-header {
        font-size: 10px;
        margin-bottom: 0px;
        padding: 8px;
    }
    .backbtnst{
        margin-left:-10px !important;
        margin-right:-12px !important;
    }
    .magelements {
        font-size: 12px;
    }
        .viwertoolbackbtnstyle {
        font-size: 13px !important;
        font-weight: 600;
        padding: 6px 4px;
        margin-top: 8px;
        min-width: 70px !important;
    }
    ul.iconlist li {
        margin-bottom: 1px !important;
        margin-left: 5px !important;
        display: inline-block;
    }
    .with-divider {
        position: relative;
        padding-right: 4px;
        margin-right: 0px;
    }

    .slide-thumbnail {
        width: 65px;
        height: 180px !important;
        margin: 0 auto;
        margin-top: -55px !important;
    }

    .subnav ul.nav.nav-pills li > a {
        padding: 10px 15px;
        font-size: 13px;
    }

    .navbar-case-info .barheading {
        font-size: 13px;
    }

    .navbar-case-info .barvalues {
        font-size: 13px;
    }

    .navbar-case-info .barvalues1 {
        font-size: 13px;
    }

    .viwertoolbackbtnstyle {
        font-size: 13px !important;
    }

    ul.iconlist li a img {
        width: 100%;
        height: 42%;
    }

    .case-diagnosis-title {
        font-size: 13px;
    }

    .microscopicdesc {
        font-size: 13px;
    }
}

@media (min-width: 1145px) and (max-width: 1281px) {
    .tabhisto.active {
        font-size: 14px;
    }

    .tabhisto {
        padding: 7px 10px;
        font-size: 14px;
    }
        .overlay-title {
        font-size: 12px;
    }
        .her2finalsc1 {
        font-size: 14px;
    }
    .her2-value {
        font-size: 14px;
    }
    .her2finalsc {
        font-size: 17px;
    }
    .score-value {
        font-size: 18px;
    }
        .analysisheadinghisto {
        width: 100%;
        height: 4vh;
        padding: 8px 14px 10px 14px;
    }

    .histoansc {
        font-size: 14px;
    }

    .histoansc1 {
        font-size: 14px;
    }

    .dot-namehisto {
        font-size: 13px;
    }

    .dot-counthisto {
        font-size: 13px;
    }
    .fov-headingst {
        font-size: 14px;
    }
    .cytoimgvisttabsample {
        font-size: 14px;
    }
    .cytoimgvisttab {
        font-size: 14px;
    }
    .case-diagnosis-box {
        position: fixed;
        right: 5px;
    }
        .carousel-inner {
        margin-bottom: 5px;
        border-bottom: 0px solid black !important;
        margin-top: 5px;
        height: 46vh !important;
    }
    #ROIAnalysisParameters {
        height: 74vh;
        padding: 0px 0px 10px 0px;
    }
        .analysisheading {
        width: 90%;
        height: 32px;
        font-size: 13px;
    }

    .analysis-panel {
        width: 90%;
    }

    .analysis-header {
        font-size: 11px;
        margin-bottom: 0px;
        padding: 8px;
    }
    ul.iconlist li {
        margin-bottom: 1px !important;
        margin-left: 5px !important;
        display: inline-block;
    }
    .slide-thumbnail {
        width: 65px;
        height: 196px !important;
        margin: 0 auto;
        margin-top: -55px !important;
    }

    .subnav ul.nav.nav-pills li > a {
        padding: 10px 15px;
        font-size: 13px;
    }

    .navbar-case-info .barheading {
        font-size: 13px;
    }

    .navbar-case-info .barvalues {
        font-size: 13px;
    }

    .navbar-case-info .barvalues1 {
        font-size: 13px;
    }

    .viwertoolbackbtnstyle {
        font-size: 13px !important;
    }

    ul.iconlist li a img {
        width: 100%;
        height: 42%;
    }
    .case-diagnosis-title {
        font-size: 13px;
    }
    .microscopicdesc {
        font-size: 13px;
    }

    }

@media (min-width: 1281px) and (max-width: 1350px) {
    .analysisheadinghisto {
        width: 100%;
        height: 4vh;
        padding: 10px 14px 10px 14px;
    }

    .histoansc {
        font-size: 16px;
    }

    .histoansc1 {
        font-size: 16px;
    }

    .dot-namehisto {
        font-size: 15px;
    }

    .dot-counthisto {
        font-size: 15px;
    }
    .fov-headingst {
        font-size: 14px;
    }
    .cytoimgvisttabsample {
        font-size: 14px;
    }
    .cytoimgvisttab {
        font-size: 14px;
    }
    .case-diagnosis-box {
        position: fixed;
        right: 5px;
    }
    .carousel-inner {
        margin-bottom: 5px;
        border-bottom: 0px solid black !important;
        margin-top: 5px;
        height: 69vh !important;
    }
    #ROIAnalysisParameters {
        height: 74vh;
        padding: 0px 0px 10px 0px;
    }
    .analysisheading {
        width: 97%;
        height: 32px;
        font-size: 13px;
    }

    .analysis-panel {
        width: 97%;
    }

    .analysis-header {
        font-size: 11px;
        margin-bottom: 0px;
        padding: 8px;
    }
    .slide-thumbnail {
        width: 70px;
        height: 210px !important;
        margin: 0 auto;
        margin-top: -68px !important;
    }
    .subnav ul.nav.nav-pills li > a {
        padding: 10px 15px;
        font-size: 14px;
    }
    .navbar-case-info .barheading {
        font-size: 14px;
    }
    .navbar-case-info .barvalues {
        font-size: 14px;
    }
    .navbar-case-info .barvalues1 {
        font-size: 14px;
    }
    .viwertoolbackbtnstyle {
        font-size: 14px !important;
    }
    ul.iconlist li a img {
        width: 100%;
        height: 42%;
    }
    }

@media (min-width: 1350px) and (max-width: 1440px) {
    .analysisheadinghisto {
        width: 100%;
        height: 6vh;
        padding: 10px 14px 10px 14px;
    }

    .histoansc {
        font-size: 16px;
    }

    .histoansc1 {
        font-size: 16px;
    }
    .dot-namehisto {
        font-size: 15px;
    }
    .dot-counthisto {
        font-size: 15px;
    }
        .case-diagnosis-box {
        position: fixed;
        right: 5px;
    }
    .carousel-inner {
        margin-bottom: 5px;
        border-bottom: 0px solid black !important;
        margin-top: 5px;
        height: 69vh !important;
    }
    #ROIAnalysisParameters {
        height: 74vh;
        padding: 0px 0px 10px 0px;
    }
    .analysisheading {
        width: 100%;
        height: 32px;
        font-size: 14px;
    }

    .analysis-panel {
        width: 99%;
    }

    .analysis-header {
        font-size: 11px;
        margin-bottom: 0px;
        padding: 8px;
    }
    .slide-thumbnail {
        width: 70px;
        height: 230px !important;
        margin: 0 auto;
        margin-top: -75px !important;
    }
    .subnav ul.nav.nav-pills li > a {
        padding: 10px 15px;
        font-size: 15px;
    }
    .navbar-case-info .barheading {
        font-size: 15px;
    }
    .navbar-case-info .barvalues {
        font-size: 15px;
    }
    .navbar-case-info .barvalues1 {
        font-size: 15px;
    }
    .viwertoolbackbtnstyle {
        font-size: 15px !important;
    }
    ul.iconlist li a img {
        width: 100%;
        height: 45%;
    }
    }

@media (min-width: 1440px) and (max-width: 1600px) {
    .analysisheadinghisto {
        width: 100%;
        height: 5vh;
        padding: 10px 14px 10px 14px;
    }
    .histoansc {
        font-size: 16px;
    }
    .histoansc1 {
        font-size: 16px;
    }
        .case-diagnosis-box {
        right: 6px;
    }
        .carousel-inner {
        margin-bottom: 5px;
        border-bottom: 0px solid black !important;
        margin-top: 5px;
        height: 57vh !important;
    }
    .analysisheading {
        width: 100%;
        height: 32px;
        font-size: 13px;
    }

    .analysis-panel {
        width: 99%;
    }

    .analysis-header {
        font-size: 11px;
        margin-bottom: 0px;
        padding: 8px;
    }

    .slide-thumbnail {
        width: 65px;
        height: 245px !important;
        margin: 0 auto;
        margin-top: -90px !important;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .case-diagnosis-box {
        position: fixed;
        right: 14px;
    }
        .carousel-inner {
        margin-bottom: 5px;
        border-bottom: 0px solid black !important;
        margin-top: 5px;
        height: 60vh !important;
    }
    #ROIAnalysisParameters {
        height: 74vh;
        width: auto;
        padding: 0px 0px 10px 15px;
    }
        .analysisheading {
        width: 100%;
        height: 32px;
        font-size: 13px;
    }

    .analysis-panel {
        width: 100%;
    }

    .analysis-header {
        font-size: 11px;
        margin-bottom: 0px;
        padding: 8px;
    }
    .slide-thumbnail {
        width: 78px;
        height: 280px !important;
        margin: 0 auto;
        margin-top: -90px !important;
    }

}

@media (min-width: 1920px) and (max-width: 2560px) {
    .carousel-inner {
        margin-bottom: 5px;
        border-bottom: 0px solid black !important;
        margin-top: 5px;
        height: 69vh !important;
    }
    #ROIAnalysisParameters {
        height: 74vh;
        width: auto;
        padding: 0px 0px 10px 5px;
    }
    .analysisheading {
        width: 100%;
    }
    .analysis-panel {
        width: 100%;
    }
    .slide-thumbnail {
        width: 90px;
        height: 320px !important;
        margin-top: -110px !important;
    }
    }


@media (min-width: 2560px) and (max-width: 3250px) {
    .carousel-inner {
        margin-bottom: 5px;
        border-bottom: 0px solid black !important;
        margin-top: 5px;
        height: 69vh !important;
    }
    #ROIAnalysisParameters {
        height: 74vh;
        width: auto;
        padding: 0px 0px 10px 15px;
    }
    .analysisheading {
        width: 100%;
    }
    .analysis-panel {
        width: 100%;
    }
    .slide-thumbnail {
        width: 90px;
        height: 440px !important;
        margin-top: -160px !important;
    }
}