html,
body, #template-app {
    font-family: 'Gilroy';
    font-style: normal;
    font-size: 12px;
    background: #1E1E1E;
    margin: 0;
    height: calc(100% - 0.2rem); /*calc(100% - 0.5rem);*/
    width: calc(100% - 0.1rem); /*calc(100% - 0.2rem); /*Amol - calc(100% - 0.5rem);*/
    /* display: flex; */
    overflow: hidden; /*Amol*/
    touch-action: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: calc(var(--vh, 1vh) * 100);
}

html {
    /*height: calc(100% - 0.2rem); - AmolT - commented */
}

body {
    /*min-height: calc(100% - 0.2rem); - AmolT - commented
    height: calc(100% - 0.2rem);*/
}

.mobile-swap-status {
    display: none !important;
}

.mobile-movie {
    display: none !important;
}

.mobile-movie-toolbar {
    display: none !important;
}

.split-body {
}

.loading-status {
}

.split-body .loading-status {
    position: absolute;
    left: 15%;
}

.movie-rt-off {
    border: 0.01rem solid #948f8f;
    background-color: #727272;
}

.movie-rt-on {
    border: 0.01rem solid #948f8f;
    background-color: #7d77e5
}

@font-face {
    font-family: Gilroy;
    src: url(../assets/Gilroy-Light.otf);
}

::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 0.5rem;
}

.main {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.body {
    display: flex;
    height: calc(100% - 4rem);
    width: calc(100% - 0.1rem); /*Amol - calc(100% + 1rem);*/
    overflow: hidden;
    position: relative;
}

.img-size-toolsmenu {
    width: 0.9rem !important;
}

.img-size {
    height: 1.5rem;
    width: 1.5rem;
}

.img-size-inline {
    height: 1rem;
    width: 1rem;
}

.img-size-large {
    height: 2.5rem;
    width: 2.5rem;
}
/* Side or bottom navigation CSS starts*/
.side-or-bottom-navigation {
    display: flex;
    flex-direction: column;
    flex: 12%;
    background-color: #252525;
    border-right: 0.08rem solid #474747;
    border-left: 0.08rem solid #474747;
    height: 100%;
    overflow: hidden /*Amol-removed auto*/;
    border: solid 0.2rem black;
}

.side-or-bottom-navigation-split {
    flex: 6%;
}

.split-extended {
    border: inherit;
    background-color: transparent;
}

.patient-name-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-bottom: 0.08rem solid #474747;
    position: relative;
}

.patient-name-display-text {
    width: 90%;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 1.5rem;
    font-size: 1rem;
    align-items: center;
    font-family: Gilroy;
    white-space: nowrap;
}

.timeline-title-container {
    text-transform: uppercase;
    color: white;
    display: flex;
    align-items: center;
    padding: 0.4rem 1rem;
    border-bottom: 0.08rem solid #474747;
}

.timeline-container-main {
    display: flex;
    flex-direction: column;
    overflow: auto;
    max-height: 15rem;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

.timeline-container {
    text-transform: uppercase;
    color: #777777;
    display: flex;
    padding: 0.5rem 0 0.5rem 1rem;
    flex-direction: column;
    border-bottom: 0.08rem solid #474747;
    cursor: pointer;
    position: relative;
}

.timeline-active {
    color: #6C7BFF;
    border-left: 0.4rem solid #6C7BFF;
    padding: 0.5rem 0 0.5rem 0.6rem;
}

.timeline-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.actions-on-right {
    display: flex;
    width: 34%;
    justify-content: space-between;
    flex-direction: row-reverse;
    color: white !important;
    align-items: center;
}

.timeline-date-time {
    display: flex;
    margin-top: 0.4rem;
}

.timeline-date-time-divider {
    margin: 0 0.4rem;
}

.timeline-title-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 65%;
}

.study-history-attachment-row {
    display: flex;
    margin-top: 0.4rem;
    align-items: center;
}


.empty-div {
    height: 3rem;
    border-bottom: 0.08rem solid #474747;
}

.study {
    color: white;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    justify-content: space-between;
    border-bottom: 0.08rem solid #474747;
}

.study-left {
    display: flex;
    align-items: center;
    width: 50%;
}

.study-right {
    display: flex;
    align-items: center;
}

.study-text-side-menu {
    margin-left: 0.5rem;
}

.image-tumbnail {
    display: flex;
    justify-content: space-around;
    height: 10rem;
    margin-bottom: 0.5rem;
}

.image-tumbnail-container {
    border-radius: 1rem;
    border: 0.08rem solid #474747;
    width: 75%;
    color: white;
    margin: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    height: 100%;
}

.image-tumbnail-title {
    display: flex;
    /*display: block;*/
    padding: 0.5rem;
    background: #474747;
    height: 10%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-tumbnail-body {
    display: flex;
    justify-content: space-around;
    position: relative;
    background-color: black;
    height: 55%;
}

.image-tumbnail-dimentions {
    height: 100%;
    width: 100%;
    object-fit: scale-down;
    pointer-events: none;
}

.image-tumbnail-footer {
    display: flex;
    padding: 0.5rem;
    background-color: #1B1B1B;
    align-items: center;
}

.image-tumbnail-active-border {
    border: 0.08rem solid #6C7BFF;
}

.image-active-border {
    border: 0.08rem solid #6C7BFF !important;
}

.image-tumbnail-active-header {
    background-color: #6C7BFF;
}

.image-tumbnail-active-footer {
    border-top: 0.08rem solid #6C7BFF;
}

.image-tumbnail-overlay-icon {
    position: absolute;
    right: 0.3rem;
    top: 0.3rem;
}
/* Side or bottom navigation CSS ends */
/* Main Image section starts */
.image-renderer {
    display: flex;
    flex: 88%;
}

.individual-image-1 {
    display: flex;
    width: 100%;
    position: relative;
    height: 100%;
    justify-content: space-around;
}

.individual-image-2 {
    display: flex;
    width: 49.5%;
    height: 99.5%;
    position: relative;
    justify-content: space-around;
    background-color: #252525;
    border: solid 0.08rem #4E4E4E;
}

.individual-image-4 {
    display: flex;
    width: 49.5%;
    height: 49.7%;
    position: relative;
    justify-content: space-around;
    background-color: #252525;
    border: solid 0.08rem #4E4E4E;
}

.individual-image-9 {
    display: flex;
    width: 33%;
    height: 33%;
    position: relative;
    justify-content: space-evenly;
    border: solid 0.08rem #4E4E4E;
    background-color: #252525;
}

.individual-image-1-height-with-top-menu {
    height: 93%;
}

.individual-image-4-height-with-top-menu {
    height: 45.5%;
}

.individual-image-9-height-with-top-menu {
    height: 30.5%;
}

.img-size-1 {
    width: 100%;
}

.img-size-4 {
    width: 100%;
}

.img-size-9 {
    width: 100%;
}

.img-size-mammography {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.contains-1-image {
    display: flex;
    width: 100%;
    position: relative;
    justify-content: space-around;
    flex-wrap: wrap;
}

.contains-2-image {
    display: none;
    width: 100%;
    height: 100%;
    flex: 1;
}

.contains-4-image {
    display: none;
    width: 100%;
    position: relative;
    justify-content: space-evenly;
    flex-wrap: wrap;
    background: black;
    overflow: auto;
}

.contains-9-image {
    display: none;
    width: 100%;
    position: relative;
    justify-content: space-around;
    flex-wrap: wrap;
    overflow: auto;
    background: black;
}

.individual-image-top-left {
    position: absolute;
    left: 1.5rem;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    color: white;
    font-size: 1.2rem;
    line-height: 1.2;
}

.individual-image-top-right {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    color: white;
    font-size: 1.2rem;
    line-height: 1.2;
}

.individual-image-bottom {
    position: absolute;
    left: 2.5rem;
    bottom: 0.5rem;
    display: flex;
    color: white;
    font-size: 1.2rem;
    line-height: 1.2;
}

.individual-image-top-left-4 {
    position: absolute;
    left: 1.5rem;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    color: white;
    font-size: 1.2rem;
    line-height: 1.2;
    font-size: 1rem;
}

.individual-image-top-right-4 {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    color: white;
    font-size: 1.2rem;
    line-height: 1.2;
    font-size: 1rem;
}

.individual-image-bottom-4 {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    display: flex;
    color: white;
    font-size: 1.2rem;
    line-height: 1.2;
    font-size: 1rem;
}

.individual-image-bottom-9 {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    display: flex;
    color: white;
    font-size: 1rem;
    line-height: 1;
}

.individual-image-bottom-checkbox {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    display: flex;
    font-size: 1.2rem;
    line-height: 1.2;
}

.image-checkbox {
    border: solid 0.08rem white;
}

.individual-image-bottom-series {
    display: flex;
    align-items: center;
}

.individual-image-bottom-image {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}
/* Main Image section ends */

.header-toolbar-container {
    display: flex;
}

.header-toolbar {
    width: 100%;
    background-color: #2F2F2F;
    color: #FFFFFF;
    display: flex;
    padding: 0.5rem;
    box-sizing: border-box;
}

.header-section-1 {
    display: flex;
    justify-content: space-around;
    flex: 20%;
}

.header-section-2 {
    display: flex;
    justify-content: space-around;
    flex: 40%;
}

.header-section-3 {
    display: flex;
    justify-content: space-around;
    flex: 30%;
}

.header-section-4 {
    display: flex;
    flex: 6%;
    justify-content: space-around;
}

.header-section-study {
    display: flex;
    flex: 3%;
    justify-content: space-around;
}

.header-section-5 {
    display: flex;
    flex: 6%;
    justify-content: space-around;
}

.header-section-5-more {
    display: none;
    flex: 3%;
    justify-content: space-around;
    cursor: pointer;
}

.all-img-selection-more {
    display: none;
    width: 2%;
}

.header-section-6 {
    display: flex;
    flex: 3%;
    justify-content: space-around;
}

.header-section-7 {
    display: flex;
    flex: 15%;
    justify-content: space-around;
    align-items: center;
    position: relative;
}

.header-section-8 {
    display: flex;
    flex: 3%;
    justify-content: center;
    align-items: center;
}

.icon-text-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0.5%;
    justify-content: center;
    position: relative;
    white-space: nowrap;
}

.icon {
    display: flex;
    align-items: center;
    height: 1.5rem;
    cursor: pointer;
}

.icon-text {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-top: 0.2rem;
}

.divider {
    display: flex;
    border: solid 0.08rem #4E4E4E;
    margin: 0.4%;
}

.divider-row-2 {
    display: flex;
    border: solid 0.08rem #4E4E4E;
    margin: 0.4%;
    height: 3vh;
}

.add-favorite-icon {
    height: 2rem;
    width: 2rem;
    background: black;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 50%;
    font-size: 1.3rem;
}

.report-button {
    background: #6C7BFF;
    border-radius: 0.5rem;
    height: 70%;
    display: flex;
    align-items: center;
    color: white;
    margin-left: 2%;
    font-size: 1rem;
    padding: 5% 12% 5% 10%;
    cursor: pointer;
    border: 0;
}

.report-icon {
    margin-right: 5%;
}

.icon-color-white {
    filter: invert(100%) sepia(0%) saturate(22%) hue-rotate(318deg) brightness(104%) contrast(107%);
}

.icon-color-blue {
    filter: invert(47%) sepia(88%) saturate(2460%) hue-rotate(215deg) brightness(101%) contrast(101%);
    -webkit-tap-highlight-color: unset;
}

.icon-color-left-tool {
    filter: invert(47%) sepia(88%) saturate(2460%) hue-rotate(215deg) brightness(101%) contrast(101%);
}

.icon-color-right-tool {
    filter: invert(29%) sepia(55%) saturate(1509%) hue-rotate(131deg) brightness(250%) contrast(50%);
}
/*AmolT - Added new class for mobile*/
.mobilelayouts {
    display: none;
}

.dropdown-content-image {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3.7rem;
    left: 0vh;
    width: 14vw;
}

.split-body .dropdown-content-image {
    width: 7vw;
}

.dropdown-content-zoom {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3.7rem;
    left: 0vh;
    width: 15vw;
}

.split-body .dropdown-content-zoom {
    /*width: 8vw;*/
    width: 10vw;
}

.dropdown-content-edgedetection {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3rem;
    right: 0vh;
    width: 15vw;
}

.split-body .dropdown-content-edgedetection {
    width: 8vw;
}

.dropdown-content-reset {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3.7rem;
    left: -1vh;
    width: 10vw;
}

.split-body .dropdown-content-reset {
    /*width: 5vw;*/
    width: 6vw;
}

.dropdown-content-annsettings {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3rem;
    right: 0vh;
    width: 32vw;
}

.split-body .dropdown-content-annsettings {
    width: 16vw;
}

.dropdown-content-ann-container {
    display: flex;
    padding: 1rem 0.5rem;
    cursor: pointer;
    align-items: center;
    border-bottom: 0.08rem solid #474747;
    flex-wrap: wrap;
    /*width:100%;*/
}

.dropdown-content-ann-item {
    display: flex;
    flex-direction: column;
    margin-left: 1rem;
}

.dropdown-content-layout {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3.7rem;
    left: 0vh;
}

.dropdown-content-tools {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3.7rem;
    left: 0vh;
}

.dropdown-content-tools-misc {
    display: none;
    position: absolute;
    z-index: 9980;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3.7rem;
    left: 0vh;
}

.dropdown-content-patient-name {
    display: none;
    position: absolute;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    /*top: 8.2rem;*/
    top: 3.7rem;
    left: 1rem;
    /*width: 11%;*/
    width: 90%;
    color: white;
}

.split-body .dropdown-content-patient-name {
    top: auto;
}

.know-your-shortcuts {
    display: none;
    position: absolute;
    z-index: 1;
    background: #323232;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    color: white;
    padding: 0.5rem;
    bottom: 1rem;
    right: 1rem;
}

.know-your-shortcuts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0.5rem;
    border-bottom: 0.08rem solid #474747;
}

.know-your-shortcuts-body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
    flex-direction: column;
}

.example-pop-up {
    display: none;
    position: absolute;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 10rem;
    left: 40rem;
    width: 50rem;
    height: 30rem;
    color: white;
    padding: 0.5rem;
}

.example-pop-up-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}

.example-pop-up-body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
}

/**** Amol: Added classes for HP Layout */
.hpwrapcontainer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.hpwrapchild {
    width: 49%;
    height: 49%;
    /*border: 1px solid green !important;*/
}
/***************************************/

.spinetags-popup {
    display: none;
    position: absolute;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 0.5rem;
    left: 0.5rem;
    width: 30rem;
    /* height: 34rem; */
    color: white;
    padding: 0.5rem;
    max-width: fit-content
}

.spinetags-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: move;
}

.spinetags-popup-body {
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    /* height: 10rem; */
    /* flex-direction: column; */
    font-size: 1.4rem;
    /* align-items: center; */
    padding: 1rem;
}

.spinetags-popup-body-container {
    overflow-y: scroll;
    /* height: 99.9%; */
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-wrap: wrap;
    position: relative;
}


.profiletext-popup {
    display: none;
    position: absolute;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 0.5rem;
    left: 0.5rem;
    width: 20rem;
    /* height: 34rem; */
    color: white;
    padding: 0.5rem;
}

.profiletext-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: move;
}

.profiletext-popup-body {
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    /* height: 10rem; */
    /* flex-direction: column; */
    font-size: 1.4rem;
    /* align-items: center; */
    padding: 1rem 0rem 1rem 0rem;
}

.profiletext-popup-body-container {
    overflow-y: scroll;
    /* height: 99.9%; */
    overflow-x: hidden;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    position: relative;
}

.profiletext-option {
    /**/
}

    .profiletext-option:focus {
        color: black;
    }

    .profiletext-option:checked {
        box-shadow: 0 0 10px 100px #d0cfcf inset;
        background-color: #d0cfcf;
    }

.profiletext-const-button {
    font-size: 2rem;
    font-weight: bolder;
    background-color: dimgrey;
    border: 0.2rem solid rgb(211 206 206);
    border-radius: 0.3rem;
    width: 3.5rem;
    height: 4rem;
}

.profiletext-const-button-black {
    color: black;
}

.profiletext-const-button-white {
    color: white;
}

.profiletext-const-button:active {
    color: #747474;
    background-color: #343434;
    border: 0.2rem solid rgb(89 89 89);
    border-radius: 0.3rem;
}

.profiletext-const-button:focus {
    /*background-color: dimgrey;*/
    /*border: 0.2rem solid rgb(89 89 89);*/
    border-radius: 0.3rem;
}

.profiletext-button {
    font-size: 1.4rem;
    font-weight: normal;
    color: white;
    background-color: dimgrey;
    border: 0.2rem solid rgb(211 206 206);
    border-radius: 0.8rem;
    width: 5rem;
    height: 3rem;
}

    .profiletext-button:active {
        color: #747474;
        background-color: #343434;
        border: 0.2rem solid rgb(89 89 89);
        border-radius: 0.8rem;
    }

    .profiletext-button:focus {
        /*background-color: dimgrey;*/
        /*border: 0.2rem solid rgb(89 89 89);*/
        border-radius: 0.8rem;
    }


.dsa-popup {
    display: none;
    position: absolute;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 2%;
    left: 25%;
    width: 55%;
    height: 90%;
    color: white;
    padding: 0.5rem;
    overflow: hidden;
}

.split-body .dsa-popup {
    left: 15%;
}

.dsa-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid;
    font-size: 1.4rem;
    font-weight: bold;
    /* height: 5%;*/
}

.dsa-popup-body {
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    height: calc(100% - 4rem);
    /* flex-direction: column; */
    font-size: 1.4rem;
    /* align-items: center; */
    /* padding: 1rem; */
    overflow: hidden;
}

.dsa-popup-body-container {
    overflow: hidden;
    height: 100%;
    overflow-x: hidden;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.dsa-row {
    width: 100%;
    height: 30%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0.5rem;
}

.dsa-button {
    /*height: 2.5rem;*/
    width: 8rem;
    /* margin-right: 0.5rem; */
    margin-left: auto;
}

.dsa-maskimg {
}

    .dsa-maskimg:active {
        background-color: cadetblue;
    }

.deleteimage-popup {
    display: none;
    position: absolute;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 10rem;
    left: 25%;
    width: 60rem;
    /* height: 34rem; */
    color: white;
    padding: 0.5rem;
}

.split-body .deleteimage-popup {
    left: 15%;
}

.deleteimage-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid;
    font-size: 1.4rem;
    font-weight: bold;
}

.deleteimage-popup-body {
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    /* height: 10rem; */
    /* flex-direction: column; */
    font-size: 1.4rem;
    /* align-items: center; */
    padding: 1rem;
}

.deleteimage-popup-body-container {
    overflow-y: scroll;
    /* height: 99.9%; */
    overflow-x: hidden;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.deleteimage-row {
    width: 100%;
    height: 5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.deleteimage-button {
    height: 2.5rem;
    width: 8rem;
    margin-right: 0.5rem;
    margin-left: auto;
}

.addphoto-popup {
    display: none;
    position: absolute;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 10rem;
    left: 25%;
    width: 60% /*60rem*/;
    /* height: 34rem; */
    color: white;
    padding: 0.5rem;
}

.split-body .addphoto-popup {
    left: 12%;
    width: 30%;
}

.split-body .ecgviewer-popup {
    left: 2% !important;
    width: 42.5% !important;
}

.split-body .pdfviewer-popup {
    left: 2% !important;
    width: 42.5% !important;
}

.split-body .srviewer-popup {
    left: 2% !important;
    width: 42.5% !important;
}

.addphoto-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid;
    font-size: 1.4rem;
    font-weight: bold;
}

.addphoto-popup-body {
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    /* height: 10rem; */
    /* flex-direction: column; */
    font-size: 1.4rem;
    /* align-items: center; */
    padding: 1rem;
}

.addphoto-popup-body-container {
    overflow-y: scroll;
    /* height: 99.9%; */
    overflow-x: hidden;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.addphoto-row {
    width: 100%;
    height: 3rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.addphoto-button {
    height: 2.5rem;
    width: 8rem;
    margin-right: 0.5rem;
    margin-left: auto;
}

.information-popup {
    display: none;
    position: absolute;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 10rem;
    left: 25%;
    width: 60rem;
    height: 34rem;
    color: white;
    padding: 0.5rem;
}

.split-body .information-popup {
    left: 12%;
}

.processing-popup {
    position: absolute;
    font-size: 2rem;
    font-weight: bold;
    z-index: 1;
    color: black;
    display: flex;
    width: 90%;
    height: 90%;
    left: 0;
    top: 0;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
    overflow: hidden;
    padding: 5rem 1rem 1rem 1rem;
    margin-left: 5%;
}

.split-body .processing-popup {
    width: 45%;
}

.information-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid;
    font-size: 1.4rem;
    font-weight: bold;
}

.information-popup-body {
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    height: 30rem;
    /* flex-direction: column; */
    font-size: 1.2rem; /*1.4rem;*/
}

.information-popup-body-container {
    overflow-y: scroll;
    height: 99.9%;
    overflow-x: hidden;
}

.information-popup-item {
    display: flex;
    width: 60rem;
    background-color: #646464;
    height: 2rem; /*4rem;*/
    align-items: center;
    margin-top: 0.5rem;
}

.information-popup-item-firstcol {
    flex-basis: 40%;
    padding-left: 0.5rem;
    /* height: 2rem; */
    align-items: center;
    display: flex;
}

.information-popup-item-secondcol {
    flex-basis: 58%;
    background-color: #303030;
    padding-left: 0.5rem;
    padding-right: 0.9rem;
    height: 1.8rem; /*3.5rem;*/
    align-items: center;
    display: flex;
    white-space: nowrap;
    width: 58%;
    /*scrollbar-width: none;*/ /* For Firefox */
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap-mode: nowrap;
}

.popup-backdrop {
    display: none;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    background-color: dimgrey;
    opacity: .9;
}

.more-options-footer {
    display: none;
    position: absolute;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    bottom: 5rem;
    left: 6rem;
    width: auto;
    max-width: 30%;
    color: white;
    padding: 0.5rem;
}

.more-options-1 {
    display: none;
    position: absolute;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 0;
    right: 1.5rem;
    width: auto;
    max-width: 90%;
    color: white;
    padding: 0.5rem;
}

.more-options-2 {
    display: none;
    position: absolute;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 0;
    right: 1.5rem;
    width: auto;
    max-width: 90%;
    color: white;
    padding: 0.5rem;
}

.more-options-3 {
    display: none;
    position: absolute;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 0;
    right: 1.5rem;
    width: auto;
    max-width: 90%;
    color: white;
    padding: 0.5rem;
}

.timeline-title-hover-text-1 {
    display: none;
    position: absolute;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 10.5rem;
    left: 9rem;
    width: auto;
    max-width: 30%;
    color: white;
    padding: 0.5rem;
}

.timeline-title-hover-text-2 {
    display: none;
    position: absolute;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 14.5rem;
    left: 9rem;
    width: auto;
    max-width: 30%;
    color: white;
    padding: 0.5rem;
}

.timeline-title-hover-text-3 {
    display: none;
    position: absolute;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 19rem;
    left: 9rem;
    width: auto;
    max-width: 30%;
    color: white;
    padding: 0.5rem;
}

.dropdown-content-more-button {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    /*top: 5rem;
    right: 4rem;*/
    /*width: 11%;*/
    color: white;
    top: 3.7rem;
    width: 8vw;
}

.dropdown-content-more-button-all-imgs {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 4rem;
    right: 0;
    width: 11%;
    color: white;
}

.dropdown-content-studylistmenu {
    display: none;
    position: fixed;
    z-index: 2;
    background: #191919;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3.7rem;
    left: 0;
    width: 17vw;
    color: white;
    max-height: 50%;
    overflow-x: hidden;
    overflow-y: scroll;
}

.split-body .dropdown-content-studylistmenu {
    width: 9vw;
}

.dropdown-content-studylist-parent {
    height: auto;
    max-height: 50%;
    overflow-x: hidden;
    overflow-y: scroll;
}

.dropdown-content-studylist-submenu {
    display: none;
    position: absolute;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3rem;
    right: 0vh;
    width: 15vw;
}

.split-body .dropdown-content-studylist-submenu {
    width: 8vw;
}

.dropdown-content-submenu {
    left: 90%;
    top: 3rem;
}

.dropdown-content-others {
    display: none;
    position: absolute;
    z-index: 2;
    background: #191919;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3.7rem;
    right: -3vh;
    width: 17vw;
}

.split-body .dropdown-content-others {
    /*width: 9vw;*/
    width: 12vw;
}

.dropdown-content-container-others {
    display: flex;
    padding: 1rem 0.5rem 1rem 1rem;
    cursor: pointer;
    align-items: center;
    border-bottom: 0.08rem solid #474747;
    justify-content: space-between;
    position: relative;
}

.dropdown-content-shortcut {
    display: none;
    position: absolute;
    z-index: 2;
    background: #191919;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3.7rem;
    right: 0vh;
    width: 17vw;
    max-height: 85vh;
    overflow: hidden;
    overflow-y: scroll;
}

.split-body .dropdown-content-shortcut {
    /*width: 9vw;*/
    width: 12vw;
}

.dropdown-content-loc-line {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 9.5rem;
    left: -7rem;
    width: 33%;
    color: white;
}

.split-body .dropdown-content-loc-line {
    width: 17%;
}

.dropdown-content-localizer {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3.7rem;
    left: -1vh;
    width: 10vw;
}

.split-body .dropdown-content-localizer {
    /*width: 5vw;*/
    width: 6vw;
}

.dropdown-content-wlpresets {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3.7rem;
    left: -1vh;
    width: 10vw;
}

.split-body .dropdown-content-wlpresets {
    /*width: 5vw;*/
    width: 6vw;
}

.dropdown-content-crop {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 4vh;
    left: 0vh;
    width: 15vw;
}

.split-body .dropdown-content-crop {
    width: 5vw;
}

.dropdown-content-vr {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3.7rem;
    left: 0vh;
    width: 10vw;
}

.split-body .dropdown-content-vr {
    /*width: 5vw;*/
    width: 6vw;
}

.dropdown-content-sync {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3.7rem;
    left: 0vh;
    width: 10vw;
}

.split-body .dropdown-content-sync {
    width: 5vw;
}

.dropdown-content-save {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3.7rem;
    right: 0vh;
    width: 10vw;
}

.split-body .dropdown-content-save {
    width: 5vw;
}

.dropdown-content-delete {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3.7rem;
    right: 0vh;
    width: 10vw;
}

.split-body .dropdown-content-delete {
    width: 5vw;
}

.dropdown-content-sort {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 3.7rem;
    left: 0vh;
    /*width: 10vw;*/
    width: 12vw;
    max-height: 70vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.split-body .dropdown-content-sort {
    /*width: 5vw;*/
    width: 7vw;
}

.dropdown-content-angular-rotate {
    display: none;
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    /*top: 13.8rem;
    left: 15vh;*/
    top: 3rem;
    left: 0.5vh;
    /*width: 10vw;*/
    width: 18vw;
}

.split-body .dropdown-content-angular-rotate {
    width: 15vw;
}

.dropbtn {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dropdown-content-container {
    display: flex;
    padding: 1rem 0.5rem;
    cursor: pointer;
    align-items: center;
    border-bottom: 0.08rem solid #474747;
    min-width: 9vw;
}

.split-body .dropdown-content-container {
    min-width: 5vw;
}

.dropdown-content-container-layout {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-bottom: 0.08rem solid #474747;
}

.dropdown-content-container-tools {
    display: flex;
    align-items: baseline;
    padding: 0.5rem;
    border-bottom: 0.08rem solid #474747;
    justify-content: space-around;
}

.dropdown-content-container-draw-tools {
    display: flex;
    align-items: center;
    padding: 0.8rem;
    border-bottom: 0.08rem solid #474747;
    /*width: 9vw;*/
    width: 10vw;
}

.split-body .dropdown-content-container-draw-tools {
    width: 7vw;
}

.dropdown-content-container-shortcut {
    display: flex;
    padding: 1rem 0.5rem 1rem 1rem;
    cursor: pointer;
    align-items: center;
    border-bottom: 0.08rem solid #474747;
    justify-content: space-between;
}

.main-squares-container {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin: 0.3rem;
}

.small-sqaure {
    height: 1rem; /*0.7rem;*/
    width: 1rem; /*0.7rem;*/
    border: solid 0.08rem #959595;
    border-radius: 0.17rem;
    margin: 0.08rem; /*0.1rem;*/
    cursor: pointer;
}

.squares-collection-1 {
    display: flex;
    flex-direction: column;
    border: solid 0.08rem #959595;
    padding: 0.3rem;
    border-radius: 0.5rem;
    margin-top: 0.3rem;
}

.squares-container {
    display: flex;
}

.mammography-item-container {
    height: 3.5rem;
    width: 3.5rem;
    margin: 0.3rem;
}

.mammography-container {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.mammography-row {
    display: flex;
}

.asymetric-container {
    display: flex;
    flex-direction: column;
}

.asymetric-layout-option {
    font-size: 1.3rem;
    line-height: 1.6rem;
    color: #848484;
    margin-top: 1rem;
}

.create-asymetric-layout {
    color: #6C7BFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.annotation-settings {
    color: #6C7BFF;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
}

.icon-to-side-for-dropdown {
    position: absolute;
    /*left: 2rem;
    top: 0.2rem;*/
    /*right:-1.2rem;
    bottom:-0.7rem;*/
    right: -0.3rem;
    bottom: 1.2rem;
}

.icon-to-side-for-fixedtooldropdown {
    /*position: absolute;
    right: -0.2rem;
    bottom: 1rem;
    cursor: pointer;*/
    /*bottom: -0.4rem;*/
    position: absolute;
    cursor: pointer;
    /*right: -1.2rem;
    bottom: -0.7rem;*/
    right: -0.3rem;
    bottom: 1.2rem;
}

.individual-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.5rem;
    cursor: pointer;
    position: relative;
    max-width: 3.5em;
    white-space: nowrap;
}

.tools-image {
    height: 1rem;
    width: 1rem;
}

.tools-image-container {
    display: flex;
}

.fill-small-sqaure {
    background: #6C7BFF;
    border: solid 0.08rem #6C7BFF;
}

.all-selected-header-1 {
    width: 100%;
    color: white;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    height: 5vh;
}

.all-selected-header-4 {
    width: 100%;
    color: white;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    height: 5vh;
}

.all-selected-header-9 {
    width: 100%;
    color: white;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    height: 5vh;
}

.all-selected-header-left {
    display: flex;
    width: 20%;
    white-space: nowrap;
}

.all-selected-header-right {
    display: flex;
    width: 80%;
    justify-content: end;
    align-items: center;
}

.all-selected-input-search-bar {
    background: #1e1e1e;
    border: solid 0.08rem white;
    border-radius: 0.83rem;
    height: 2.5rem;
    color: white;
    width: 12%;
    margin-left: 1rem;
}

    .all-selected-input-search-bar::-ms-clear {
        color: white;
    }

.unselect {
    color: #6C7BFF;
    cursor: pointer;
    margin-left: 0.5rem;
}

.close-button {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.8rem;
    background: black;
    border-radius: 50%;
    height: 0.8rem;
    width: 0.8rem;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
}

.close-button-draw {
    top: -0.6rem;
    right: -1rem;
}

.patient-name {
    background: #474747;
    border-radius: 0.33rem;
    color: white;
    margin: 0.5rem 0;
    height: 3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 90%;
    justify-content: space-around;
    border: 0;
    padding: 0.5rem;
}

.patient-name-option {
    padding: 0.5rem;
    border-bottom: 0.08rem solid #474747;
    cursor: pointer;
}

.more-button-option {
    padding: 0.5rem;
    border-bottom: 0.08rem solid #474747;
    cursor: pointer;
}

.show-on-mobile {
    display: none;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

.flex-row {
    flex-direction: row;
}

.patient-info-and-report-mobile {
    display: none;
}

.report-screen {
    display: flex;
    height: 100%;
    width: 100%;
    margin-left: 1%;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 0.08rem solid #6C7BFF;
    position: relative;
}

.report-back-window {
    display: none;
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    color: #4B4B4B;
    background: #d8d8d8;
    border-radius: 6px;
    padding: 0.1rem 0.5rem;
}

.close-report {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.close-single-image-mobile {
    display: none;
}

.color-4B4B4B {
    color: #4B4B4B;
}

.side-to-bottom-image-tumbnail {
    padding: 0.5rem 0;
    overflow: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    height: 100%;
}

.zoom-slider {
    background: #222222;
    appearance: none;
    height: 0.5rem;
    border-radius: 0.5rem;
    width: 75%;
}

.video-slider {
    background: #222222;
    appearance: none;
    height: 0.5rem;
    border-radius: 0.5rem;
    width: 45%;
    cursor: pointer;
}

.video-slider-fps {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shortcut-highlight {
    padding: 0.5rem;
    background: #6C7BFF;
    height: 1.5rem;
    width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
}

.shortcut-highlight-singleitem {
    min-width: 1.5rem;
    width: auto;
}

.shortcut-option-with-background {
    display: flex;
    align-items: center;
    background: #303030;
    padding: 0.5rem;
    border-radius: 0.7rem;
}

.shortcut-dropdown-title {
    font-size: 1.4rem;
    color: #6C7BFF;
}

.save-keyword {
    color: #6C7BFF;
    cursor: pointer;
    margin-left: 1rem;
}

.hastag-kerword {
    background: #FFF3B2;
    color: #5F4F19;
    padding: 0.2rem;
    border-radius: 0.25rem;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

.side-to-bottom-2 {
    overflow: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.side-to-bottom-3 {
    display: flex;
    color: white;
    margin-top: auto;
}

.misc-bottom-buttons {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0.5rem;
    border-top: solid 0.2rem black;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.right-side-border {
    border-right: solid 0.2rem black;
}

.border-orange {
    border: solid 0.08rem #EF7215;
}

.mamo-icon-color {
    /* filter: invert(1%) sepia(81%) saturate(4502%) hue-rotate(215deg) brightness(101%) contrast(101%); */
    /* filter: invert(1%) sepia(50%) saturate(6902%) hue-rotate(215deg) brightness(151%) contrast(191%); */
    filter: invert(0%) sepia(53%) saturate(2442%) hue-rotate(215deg) brightness(121%) contrast(101%);
}

.flex-direction-column {
    flex-direction: column;
}

.video-playing-options {
    display: none;
    background-color: #474747;
    flex-direction: column;
    margin: 0.5rem 0.8rem;
    border-radius: 0.33rem;
}

.video-slider-container {
    padding: 0.5rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.video-controls-container {
    display: flex;
    justify-content: space-evenly;
    padding: 0.5rem;
    align-items: center;
}

.load-2-layouts {
    display: flex;
    flex: 1;
}

.imgscrollcontainer {
    display: flex;
    position: absolute;
    right: 0.5rem;
    width: 1rem;
    height: 100%;
}

.imgscroll {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    /*right: 0;*/
}

.scrollthumb {
    /*width: 98%;*/
    height: 15px;
    background-color: #7c7c7c;
    /*opacity: 0.6;*/
    border-radius: 10px;
    cursor: pointer;
    position: absolute;
}
/* Styling for the range input inside the container */
.imgscrollcontainer input[type=range][orient=vertical] {
    writing-mode: vertical-lr;
    appearance: none;
    height: 100%;
    vertical-align: bottom;
    background: none;
}

.imgscrollcontainer input[type="range"]::-webkit-slider-runnable-track {
    background: none;
    border-radius: 10px;
    width: 4px;
    height: 100%;
    /*opacity: 0.6;*/
}

.imgscrollcontainer input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    /*background-color: #7c7c7c;, #7a7070*/
    background-color: #6C7BFF; /*#7c7c7c;*/
    border-radius: 50%;
    cursor: pointer;
    margin-left: -10px;
}
/*For Firefox*/
.imgscrollcontainer input[type="range"]::-moz-range-track {
    background: #222222;
    border-radius: 10px;
    width: 5px;
    height: 100%;
    opacity: 0;
}

.imgscrollcontainer input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background-color: #6C7BFF; /*#7c7c7c;*/
    border-radius: 50%;
    cursor: pointer;
    border-color: #6466f7;
}

/* For Fold Screen Mobiles */
.fold-screen {
    display: flex;
    flex-direction: column-reverse;
}

    .fold-screen .main {
        display: flex;
        flex-direction: column-reverse;
        height: calc(100% - 5rem);
    }

    .fold-screen .body {
        flex-direction: row !important;
        position: relative;
    }

    .fold-screen .img-size-4 {
        width: 82%;
    }

    .fold-screen .divider {
        display: none;
    }

    .fold-screen .header-section-1 {
        /*display: none;*/
        margin: 0 1.5rem;
    }

    .fold-screen .header-section-2 {
        flex: 75%;
        margin: 0 1.5rem;
    }

    .fold-screen .header-section-3 {
        margin: 0 1.5rem;
    }

        .fold-screen .header-section-3 .divider-hide {
            display: flex;
        }

    .fold-screen .header-section-4 {
        display: none;
    }

    .fold-screen .header-section-study {
        display: none;
    }

    .fold-screen .header-section-5-more {
        display: none;
    }

        .fold-screen .header-section-5-more:after {
            display: none;
        }

    .fold-screen .all-img-selection-more {
        display: none;
    }

        .fold-screen .all-img-selection-more:after {
            display: none;
        }

    .fold-screen .header-section-5 {
        display: none;
    }

    .fold-screen .header-section-6 {
        display: none;
    }

    .fold-screen .header-section-7 {
        display: none;
    }

    .fold-screen .header-section-8 {
        display: none;
    }

    .fold-screen .side-or-bottom-navigation {
        display: none;
    }

    .fold-screen .image-tumbnail {
        margin-bottom: 0.8rem;
    }

    .fold-screen .image-tumbnail-container {
        height: 10rem;
        width: 10rem;
    }

    .fold-screen .image-renderer {
        margin: 0 0.1rem 0 0.2rem;
        display: flex;
        flex: 100%;
        height: 100%;
    }

    .fold-screen .individual-image-top-left {
        display: none;
    }

    .fold-screen .individual-image-top-right {
        display: none;
    }

    .fold-screen .individual-image-bottom {
        display: none;
    }

    .fold-screen .individual-image-top-left-4 {
        display: none;
    }

    .fold-screen .individual-image-top-right-4 {
        display: none;
    }

    .fold-screen .individual-image-bottom-4 {
        display: none;
    }

    .fold-screen .individual-image-bottom-9 {
        display: none;
    }

    .fold-screen #drawDropdown7,
    .fold-screen #cropDropdown7,
    .fold-screen #sortDropdown7 {
        width: 25vw;
        max-height: 50vh;
        overflow-y: scroll;
    }

    .fold-screen .show-on-desktop {
        display: none;
    }

    .fold-screen .show-on-mobile {
        display: flex;
    }

    .fold-screen .side-to-bottom {
        width: auto;
    }

    .fold-screen .side-to-bottom-3 {
        display: none !important;
    }

    .fold-screen .side-to-bottom-image-tumbnail {
        flex-direction: column;
    }

    .fold-screen #wlPresetsDropdownButton {
        right: -1rem;
    }

    .fold-screen .vr3d {
        display: none !important;
    }

    .fold-screen .mpr3d {
        display: none !important;
    }

    .fold-screen .non-mobile-movie {
        display: none !important;
    }

    .fold-screen .mobile-movie {
        display: flex !important;
    }

    .fold-screen .mobile-movie-toolbar {
        display: flex !important;
        margin: 0 1rem;
    }

        .fold-screen .mobile-movie-toolbar .icon-text-container {
            margin: 0 1.5rem;
        }

    .fold-screen .icon-to-side-for-dropdown {
        bottom: 1.6rem;
    }

    .fold-screen .icon-to-side-for-fixedtooldropdown {
        bottom: 1.5rem;
    }

    .fold-screen .dropdown-content-patient-name {
        top: 4rem;
        left: 0;
    }

    .fold-screen .dropdown-content-layout {
        top: auto;
        bottom: 3.7rem;
        left: -7rem;
    }

    .fold-screen .dropdown-content-zoom {
        top: auto;
        bottom: 3.7rem;
        width: 40vw;
    }

    .fold-screen .dropdown-content-wlpresets {
        top: auto;
        bottom: 3.7rem;
        width: 20vw;
        font-size: 1.5rem;
    }

    .fold-screen .dropdown-content-localizer {
        top: auto;
        bottom: 3.7rem;
        width: 25vw;
        left: -3rem;
        font-size: 1.5rem;
    }

    .fold-screen .dropdown-content-reset {
        top: auto;
        bottom: 3.7rem;
        width: 20vw;
    }

    .fold-screen .dropdown-content-others {
        top: auto;
        bottom: 3.7rem;
        width: 20vw;
    }

    .fold-screen .standard-layouts {
        display: none;
    }

    .fold-screen .mammo-layout-parent {
        display: none;
    }

    .fold-screen .twolayouts {
        display: none;
    }

    .fold-screen .twolayoutssaving {
        display: none;
    }

    .fold-screen .mobilelayouts {
        display: flex;
        flex-direction: column;
        font-size: 1.5rem;
        width: 25vw;
        align-items: center;
    }

    .fold-screen .dropdown-content-image {
        top: auto;
        bottom: 3.7rem;
        font-size: 1.5rem;
        /*width: 25vw;*/
        width: 35vw;
    }

    .fold-screen .panel-toggle {
        display: none;
    }

    .fold-screen .mobile-swap-status {
        display: none !important;
        position: absolute;
        z-index: 1;
        width: 100%;
        background-color: grey;
        padding: 0.5rem;
        font-size: 1.5rem;
        display: flex;
        height: 3rem;
        align-items: center;
        justify-content: center;
    }

    .fold-screen .glow {
        box-shadow: rgba(72, 135, 202, 0.8) 0 0 90px 33px;
    }

    .fold-screen .dropdown-content-tools-misc {
        position: absolute;
        z-index: 1;
        background: #000000;
        border: 0.08rem solid #959595;
        box-shadow: 0 0 0.17rem;
        border-radius: 0.5rem;
        top: unset;
        left: unset;
        bottom: 4rem;
        right: -7rem;
        width: 50vw;
        font-size: 1.5rem;
    }

    .fold-screen .timeline-title-hover-text-3 {
        max-width: 40%;
    }

    .fold-screen .header-toolbar-container {
        /*font-size: 1.4rem;*/
    }

    .fold-screen .header-toolbar {
        padding: 0.5rem;
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

        .fold-screen .header-toolbar::-webkit-scrollbar {
            display: none; /* Hide scrollbar for Chrome, Safari, and Edge */
        }

    .fold-screen .icon-text-container {
        margin: 0 1rem;
        position: unset;
    }

    .fold-screen .header-section-2 .icon-text-container {
        margin: 0 1.5rem;
    }

    .fold-screen .header-section-3 .icon-text-container {
        margin: 0 2rem;
    }

    .fold-screen .dropbtn {
        position: relative;
    }

    .fold-screen .icon {
        height: 1.5rem;
    }

    .fold-screen .icon-text {
        font-size: 1.5rem;
    }

    .fold-screen .patient-info-and-report-mobile {
        display: flex;
        justify-content: space-between;
        height: 5rem;
        margin: 0 0.8rem;
    }

    .fold-screen .color-B1B1B1 {
        color: #B1B1B1;
    }

    .fold-screen .patient-info-and-report-mobile-left {
        display: flex;
        color: white;
        align-items: center;
        flex: 70;
    }

    .fold-screen .patient-info-mobile {
        display: flex;
        flex-direction: column;
        width: 100%;
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        font-size: 1.4rem;
    }

    .fold-screen .patient-info-and-report-mobile-right {
        display: flex;
        align-items: center;
        flex: 20%;
        justify-content: flex-end;
    }

    .fold-screen .report-button {
        font-size: 1.4rem;
        height: 60%;
    }

    .fold-screen .contains-1-image {
        display: flex;
    }

    .fold-screen .contains-4-image {
        display: flex;
    }

    .fold-screen .individual-image-4 {
        display: flex;
        width: 49%;
        height: 49%;
        position: relative;
        justify-content: space-around;
        margin: 0;
        background-color: #252525;
        border: 0.08rem solid #6C7BFF !important;
    }

    .fold-screen .individual-image-bottom-checkbox {
        display: flex;
    }

    .fold-screen .report-screen {
        width: 100%;
        height: calc(100% - 1rem);
        background: #1E1E1E;
    }

    .fold-screen .close-single-image-mobile {
        display: flex;
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }

    .fold-screen .tools-image {
        height: 2rem;
        width: 2rem;
    }

    .fold-screen .individual-tool {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0.5rem;
        cursor: pointer;
        height: 5rem;
        justify-content: center;
        position: unset;
    }

    .fold-screen .dropdown-content-tools {
        display: none;
        position: absolute;
        z-index: 2;
        background: #000000;
        border: 0.08rem solid #959595;
        box-shadow: 0 0 0.17rem;
        border-radius: 0.5rem;
        top: unset;
        left: 0;
        bottom: 4rem;
        font-size: 1.4rem;
        max-height: 60vh;
        overflow-y: auto;
    }

    .fold-screen .dropdown-content-container-draw-tools {
        width: 25vw;
    }

    .fold-screen .add-fav-4 {
        top: unset;
        left: unset;
        right: unset;
        bottom: 4rem;
    }

    .fold-screen .add-fav-5-6 {
        top: unset;
        left: unset;
        right: 0;
        bottom: 4rem;
    }

.mobile-vertical-dropdown {
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.navigation-buttons-container {
    flex-direction: row !important;
}
.navigation-buttons {
    display: flex;
    align-items: center;
}

/* iPads / tablets */
@media only screen and (max-width: 1024px) and (min-width: 426px) {
    body {
        overflow: scroll;
    }

    .main {
        /*        height: calc(100% - 6rem);AmolT - Removed 100%;*/
    }

    .vr3d {
        display: none !important;
    }

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

    .divider-hide {
        display: none;
    }

    .header-section-1 {
        flex: 35%; /*Amol-25%;*/
    }

    .header-section-2 {
        flex: 65%; /*Amol-75%;*/
    }

    .header-section-3 {
        flex: 40%; /*Amol-60%;*/
    }

    .header-section-4 {
        flex: 8%;
        justify-content: center;
    }

    .header-section-5-more {
        display: flex;
        flex: 3%;
    }

    .all-img-selection-more {
        display: block;
        width: 2%;
    }

    .header-section-5-more:after {
        content: '\2807';
        font-size: 2rem;
        margin-left: 1rem;
    }

    .all-img-selection-more:after {
        content: '\2807';
        font-size: 2rem;
    }

    .header-section-5 {
        display: none;
    }

    .header-section-6 {
        display: none;
    }

    .header-section-7 {
        flex: 20%;
        justify-content: space-around;
    }
    /* .image-renderer{
        max-width: 1024px;
    } */
    .report-button {
        margin-left: 5%;
    }

    .report-screen {
        background: #1E1E1E;
    }

    .report-back-window {
        display: flex;
    }

    .report-hide-window {
        display: none;
    }

    .question-circle {
        display: none;
    }
    /* .side-or-bottom-navigation{  
        flex: 20%;
    } */
    .patient-name-container {
        position: relative;
    }

    .dropdown-content-patient-name {
        display: none;
        position: absolute;
        z-index: 1;
        background: #000000;
        border: 0.08rem solid #959595;
        box-shadow: 0 0 0.17rem;
        border-radius: 0.5rem;
        /*top: unset;*/ /*Amol - 8.2rem;*/
        /*bottom: 11rem;*/
        top: 3.5rem;
        left: 1rem;
        width: 90%;
        color: white;
    }

    .dropdown-content-others {
        width: 20vw;
    }

    .dropdown-content-container-draw-tools {
        width: 15vw;
    }

    .dropdown-content-annsettings {
        width: 45vw;
    }

    #drawDropdown7, #cropDropdown7, #sortDropdown7 {
        width: 15vw;
    }

    .vr-hide-tab {
        display: none !important;
    }
}
/* For Mobile */
@media only screen and (max-width: 426px) {
    .main {
        display: flex;
        flex-direction: column-reverse;
        height: calc(100% - 5rem); /*AmolT - Removed 100%;*/
    }

    .body {
        flex-direction: row !important;
        position: relative;
    }

    .img-size-4 {
        width: 82%;
    }

    .divider {
        display: none;
    }

    .header-section-1 {
        /*display: none;*/
        margin: 0 1.5rem;
    }

    .header-section-2 {
        flex: 75%;
        margin: 0 1rem;
    }

    .header-section-3 {
        /*display: none;*/
        margin: 0 1.5rem;
    }

    .header-section-4 {
        display: none;
    }

    .header-section-study {
        display: none;
    }

    .header-section-5-more {
        display: none;
    }

        .header-section-5-more:after {
            display: none;
        }

    .all-img-selection-more {
        display: none;
    }

        .all-img-selection-more:after {
            display: none;
        }

    .header-section-5 {
        display: none;
    }

    .header-section-6 {
        display: none;
    }

    .header-section-7 {
        display: none;
    }

    .header-section-8 {
        display: none;
    }

    .side-or-bottom-navigation {
        display: none;
    }

    html,
    body {
        flex-direction: column-reverse;
        display: flex;
    }

    .image-renderer {
        margin: 0 0.1rem 0 0.2rem;
        display: flex;
        flex: 100%;
        height: 100%;
    }

    .individual-image-top-left {
        display: none;
    }

    .individual-image-top-right {
        display: none;
    }

    .individual-image-bottom {
        display: none;
    }

    .individual-image-top-left-4 {
        display: none;
    }

    .individual-image-top-right-4 {
        display: none;
    }

    .individual-image-bottom-4 {
        display: none;
    }

    .individual-image-bottom-9 {
        display: none;
    }

    #drawDropdown7, #cropDropdown7, #sortDropdown7 {
        width: 45vw;
        max-height: 50vh;
        overflow-y: scroll;
    }

    [id^="drawToolDropdown"] {
        max-height: 60vh;
        overflow-y: auto;
    }

    #anglerotateDropdown7 {
        width: 45vw;
    }


    [id^="rotateToolDropdown"]
    .dropdown-content-container-draw-tools {
        width: 40vw !important;
    }

    .show-on-desktop {
        display: none;
    }

    .show-on-mobile {
        display: flex;
    }
    /*Amol-Added for mobile timeline*/
    .side-to-bottom-3 {
        display: none !important;
    }

    #close1, #close2, #close3, #close4, #close5, #close6, #zoomDropdownButton, #panDropdownButton, #worklistnavigation, #completetimeline, #annContainerOthers, #annContainer, #imageInfo1, #imageInfo, #demographicInfo1, #demographicInfo, #senddata1, #senddata, #keyword, #bookmark, #print, #delete {
        display: none !important;
    }

    #wlPresetsDropdownButton {
        right: -1rem;
    }

    .vr3d {
        display: none !important;
    }

    .mpr3d {
        /*display: none !important;*/
    }
    .mpr3d-mobile {
        display:flex!important;
    }
    .mpr3d-mobile-hide {
        display: none !important;
    }
        .non-mobile-movie {
            display: none !important;
        }

    .mobile-movie {
        display: flex !important;
    }

    .mobile-movie-toolbar {
        display: flex !important;
        margin: 0 1rem;
    }

        .mobile-movie-toolbar .icon-text-container {
            margin: 0 0.7rem;
        }

    .dropdown-content-patient-name {
        width: 13rem;
        top: 4rem;
        left: 0;
    }

    .dropdown-content-layout {
        top: auto;
        bottom: 3.7rem;
        left: -7rem; /*-1rem;*/
    }

    .dropdown-content-zoom {
        top: auto;
        bottom: 3.7rem;
        width: 40vw;
    }

    .dropdown-content-wlpresets {
        top: auto;
        bottom: 3.7rem;
        width: 30vw;
        font-size: 1.5rem;
    }

    .dropdown-content-localizer {
        top: auto;
        bottom: 3.7rem;
        width: 35vw;
        left: -3rem;
        font-size: 1.5rem;
    }

    .dropdown-content-reset {
        top: auto;
        bottom: 3.7rem;
        width: 20vw;
    }

    .dropdown-content-others {
        top: auto;
        bottom: 3.7rem;
        width: 25vw;
    }

    .standard-layouts {
        display: none;
    }

    .mammo-layout-parent {
        display: none;
    }

    .twolayouts {
        display: none;
    }

    .twolayoutssaving {
        display: none;
    }

    .mobilelayouts {
        display: flex;
        flex-direction: column;
        font-size: 1.5rem;
        width: 25vw;
        align-items: center;
    }

    .dropdown-content-image {
        top: auto;
        bottom: 3.7rem;
        font-size: 1.5rem;
        /*width: 25vw;*/
        width: 35vw;
    }

    .panel-toggle {
        display: none;
    }

    .mobile-swap-status {
        display: none !important;
        position: absolute;
        z-index: 1;
        width: 100%;
        background-color: grey;
        padding: 0.5rem;
        font-size: 1.5rem;
        display: flex;
        height: 3rem;
        align-items: center;
        justify-content: center;
    }

    .glow {
        box-shadow: rgba(72, 135, 202, 0.8) 0 0 90px 33px;
    }

    .dropdown-content-tools-misc {
        position: absolute;
        z-index: 2;
        background: #000000;
        border: 0.08rem solid #959595;
        box-shadow: 0 0 0.17rem;
        border-radius: 0.5rem;
        top: unset;
        left: unset;
        bottom: 4rem;
        right: -7rem;
        width: 90vw;
        font-size: 1.5rem;
    }

    .timeline-title-hover-text-3 {
        max-width: 40%;
    }

    .header-toolbar-container {
        font-size: 1.4rem;
    }

    .header-toolbar {
        padding: 0.5rem 0;
        overflow-x: auto;
        scroll-behavior: smooth;
        /*-webkit-overflow-scrolling: touch;*/
    }

        .header-toolbar::-webkit-scrollbar {
            display: none; /* Hide scrollbar for Chrome, Safari, and Edge */
        }

    .icon-text-container {
        margin: 0 1rem;
        position: unset;
    }

    .header-section-2 .icon-text-container {
        margin: 0 0.7rem;
    }

    .dropbtn {
        position: relative;
    }

    .patient-info-and-report-mobile {
        display: flex;
        justify-content: space-between;
        /*height: 6rem;*/
        height: 5rem;
        margin: 0 0.8rem;
    }

    .color-B1B1B1 {
        color: #B1B1B1;
    }

    .patient-info-and-report-mobile-left {
        display: flex;
        color: white;
        align-items: center;
        /*flex: 70;*/ /*80%;*/
        width: 65%;
    }

    .patient-info-mobile {
        display: flex;
        flex-direction: column;
        width: 100%;
        /*white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;*/
    }

    .patient-info-mobile-patient-name {
        display: block;
        overflow-x: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .patient-info-and-report-mobile-right {
        display: flex;
        align-items: center;
        flex: 20%;
    }

    .report-button {
        background: #6C7BFF;
        border-radius: 0.5rem;
        height: 60%;
        display: flex;
        align-items: center;
        color: white;
        margin-left: 2%;
        font-size: 1rem;
        padding: 5% 12% 5% 10%;
        width: 100%;
        justify-content: center;
    }

    .patient-info-mobile-info-icon {
        margin-left: 1rem;
    }

    .contains-1-image {
        display: flex;
    }

    .contains-4-image {
        display: flex;
    }

    .individual-image-4 {
        display: flex;
        width: 49%;
        height: 49%;
        position: relative;
        justify-content: space-around;
        margin: 0;
        background-color: #252525;
        border: 0.08rem solid #6C7BFF !important;
    }

    .individual-image-bottom-checkbox {
        display: flex; /*Amol - Changed to flex from none*/
    }

    .report-screen {
        /*width: 97%;*/
        width: 100%;
        height: calc(100% - 1rem);
        background: #1E1E1E;
    }

    .report-back-window {
        display: flex;
    }

    .report-hide-window {
        display: none;
    }

    .close-single-image-mobile {
        display: flex;
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }

    .tools-image {
        height: 2rem;
        width: 2rem;
    }

    .individual-tool {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0.5rem;
        cursor: pointer;
        height: 5rem;
        justify-content: center;
        position: unset;
    }

    .dropdown-content-tools {
        display: none;
        position: absolute;
        z-index: 2;
        background: #000000;
        border: 0.08rem solid #959595;
        box-shadow: 0 0 0.17rem;
        border-radius: 0.5rem;
        top: unset;
        left: 0;
        bottom: 4rem;
        font-size: 1.5rem;
    }
    /*Amol- Added for draw menu*/
    .dropdown-content-container-draw-tools {
        /*width: 30vw;*/
        width: 40vw;
    }

    .add-fav-4 {
        top: unset;
        left: unset;
        right: unset;
        bottom: 4rem;
    }

    .add-fav-5-6 {
        top: unset;
        left: unset;
        right: 0;
        bottom: 4rem;
    }

    .timeline-title-hover-text-3 {
        position: fixed;
    }
}
/* Portrait large monitors */
@media screen and (orientation:portrait) and (min-width: 426px) {
    .side-to-bottom-image-tumbnail {
        display: flex;
        flex: 15%;
        align-items: center;
        margin: 0 1rem;
    }

    .image-tumbnail {
        width: 12rem;
        height: 12rem;
    }
    
    .image-tumbnail-container {
        width: 12rem;
    }

    .image-tumbnail-body {
        height: 65%;
    }

    .side-to-bottom-2 {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .side-to-bottom {
        display: flex;
        flex-direction: column;
        width: 25%;
    }

    .navigation-buttons-container {
        flex-direction: column !important;
    }

    .image-renderer {
        margin-top: 0.1rem; /*1rem;*/
        margin-left: 0.1rem; /*1rem;*/
        display: flex;
        flex: 75%;
        height: 75%;
    }

    .divider-hide {
        display: none;
    }

    .header-section-1 {
        flex: 27%;
    }

    .header-section-2 {
        flex: 45%;
    }

    .header-section-3 {
        flex: 25%; /*Amol-60%;*/
    }

    .header-section-4 {
        flex: 7%;
        justify-content: center;
    }

    .header-section-5-more {
        display: flex;
        flex: 2%;
    }

        .header-section-5-more:after {
            content: '\2807';
            font-size: 2rem;
            margin-left: 1rem;
        }

    .header-section-5 {
        display: none;
    }

    .header-section-6 {
        display: none;
    }

    .header-section-7 {
        flex: 16%;
        justify-content: space-around;
    }

    .report-button {
        margin-left: 5%;
    }

    .question-circle {
        display: none;
    }

    .side-to-bottom-3 {
        flex-direction: column;
        height: 100%; /*Amol-or set margin-top:0*/
    }

    .information-popup, .deleteimage-popup, .addphoto-popup {
        left: 16%;
    }

    .patient-name-container {
        position: relative;
    }

    .dropdown-content-patient-name {
        width: auto;
        top: 3.5rem;
    }

    .dropdown-content-vr,
    .dropdown-content-wlpresets,
    .dropdown-content-localizer,
    .dropdown-content-reset,
    .dropdown-content-sort,
    .dropdown-content-others {
        width: auto;
    }

    .dropdown-content-zoom {
        width: 20vw;
    }

    .study {
        justify-content: flex-start;
    }
    .study-left {
        width: auto;
    }
    #showNonDicom {
        width: 10% !important;
        margin-left: 1rem;
    }
}

/* for split extended portrait monitors*/
.split-body-portrait .side-or-bottom-navigation-split {
    /*flex: 20%;*/
    flex: 0 0 auto;
}

.split-body-portrait .side-to-bottom {
    width: 12%;
}

.split-body-portrait .side-to-bottom-3 {
    flex-direction: column;
    height: 100%;
}

.split-body-portrait .timeline-container-main {
    max-height: 12rem;
}

.split-body-portrait .side-to-bottom-image-tumbnail {
    align-items: center;
    margin: 0 1rem;
}

.split-body-portrait .image-tumbnail {
    width: 12rem;
    height: 12rem;
}

.split-body-portrait .image-tumbnail-container {
    width: 12rem;
}

.split-body-portrait .image-tumbnail-body {
    height: 65%;
}

.split-body-portrait .navigation-buttons-container {
    flex-direction: column !important;
}

/*.split-body-portrait .navigation-buttons-container .img-size {
    height: 2rem;
    width: 2rem;
}*/

.split-body-portrait .patient-name-container {
    position: relative;
}

.split-body-portrait .dropdown-content-patient-name {
    width: auto;
    top: 3.5rem;
}

.split-body-portrait .divider-hide {
    display: none;
}

.split-body-portrait .header-section-1 {
    flex: 27%;
}

.split-body-portrait .header-section-2 {
    flex: 45%;
}

.split-body-portrait .header-section-3 {
    flex: 25%;
}

.split-body-portrait .header-section-4 {
    flex: 7%;
    justify-content: center;
}

.split-body-portrait .header-section-5-more {
    display: flex;
    flex: 2%;
    position: relative;
}

    .split-body-portrait .header-section-5-more:after {
        content: '\2807';
        font-size: 2rem;
        margin-left: 1rem;
    }

.split-body-portrait .header-section-5 {
    display: none;
}

.split-body-portrait .header-section-6 {
    display: none;
}

.split-body-portrait .header-section-7 {
    flex: 16%;
    justify-content: space-around;
}

.split-body-portrait .report-button {
    margin-left: 5%;
}

.split-body-portrait .question-circle {
    display: none;
}

.split-body-portrait .dropdown-content-image {
    width: 10vw;
}
.split-body-portrait .dropdown-content-vr,
.split-body-portrait .dropdown-content-wlpresets,
.split-body-portrait .dropdown-content-localizer,
.split-body-portrait .dropdown-content-reset,
.split-body-portrait .dropdown-content-sort,
.split-body-portrait .dropdown-content-crop {
    width: auto;
}
.split-body-portrait .dropdown-content-zoom {
    width: 10vw;
}
.split-body-portrait .dropdown-content-more-button {
    width: 4vw;
}
.split-body-portrait .dropdown-content-container {
    min-width: 5vw;
}
.split-body-portrait .dropdown-content-angular-rotate {
    width: 10vw;
}

.split-body-portrait .study {
    justify-content: flex-start;
}
.split-body-portrait .study-left {
    width: auto;
}
.split-body-portrait #showNonDicom {
    width: 8% !important;
    margin-left: 1rem;
}
/**/
.height-width-for-mobile {
    height: 99%;
    width: 99%;
}

/* Show / hide class names */
.show {
    display: block !important;
}

.hide-side-bar {
    display: none;
}

.hide {
    display: none !important;
}

.show-flex {
    display: flex;
}

.show-notification {
    display: flex !important;
}

.menu-show-check {
    filter: invert(1);
}

.set-cursor-pointer {
    cursor: pointer;
}

.connection-status {
    position: absolute;
    width: 5rem;
    height: 1.5rem;
    background-color: #cf271f;
    color: #77ff81;
    bottom: 1rem;
    left: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.8rem;
}


.hu-cursor {
    cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSI5IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuOTI4NTciLz4NCjxjaXJjbGUgY3g9IjkuNTcxNDMiIGN5PSIxMC4wMDAxIiByPSIyLjU3MTQzIiBmaWxsPSJ3aGl0ZSIvPg0KPC9zdmc+DQo=');
}

@media screen and (orientation:portrait) and (min-width: 426px) {
    .split-imagethumbnail div {
        width: 10rem;
    }

    .dropdown-content-crop {
        position: absolute;
        z-index: 2;
        background: #000000;
        border: 0.08rem solid #959595;
        box-shadow: 0 0 0.17rem;
        border-radius: 0.5rem;
        /*top: 4vh;*/
        top: 3vh;
        left: 0vh;
        /*width: 28vw;*/
        width: 15vw;
    }
}

.collapseble-dropdown-content-container {
    padding: 1rem 0.5rem;
    cursor: pointer;
    border-bottom: 0.08rem solid #474747;
    position: relative;
}

.collapsible-tools {
    padding-top: 0.8em;
    text-align: center
}

.collapseble-dropdown {
    position: relative
}

.tools-container {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 1em;
    justify-content: center;
    min-width: max-content;
    padding-top: 0.5em;
    align-items: anchor-center;
}

@media only screen and (max-width: 426px) {
    .tools-container {
        grid-template-columns: auto auto;
        gap: 0.5em;
        padding-top: 0.3em;
    }

    .dropdown-content-crop {
        position: absolute;
        z-index: 2;
        background: #000000;
        border: 0.08rem solid #959595;
        box-shadow: 0 0 0.17rem;
        border-radius: 0.5rem;
        top: 4vh;
        left: 0vh;
        width: 28vw;
    }
}

/*.tools-container-window {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    gap: 0.7em;
    justify-content: space-between;
    min-width: max-content;
    padding: 1em;
    align-content: center;
    align-items: center;
    justify-items: center;
    font-size: small;
    padding: 0em;
}

.mprWindow-tool-button {*/
/*min-width: 7rem;*/
/*border: 2px solid #c8c9d2;
    text-align: center;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 5rem;
    padding: 0.5em;
}

.mprtools-window-individual-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.2rem 0.2rem 0.5rem 0.2rem;
    cursor: pointer;
    position: relative;
    padding: 0.5rem 0rem 0.5rem 0rem;
    height: 1rem;
    width: 2rem;
    font-size: 0.9rem;
}

.tools-container-window-vr {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 0.7em;
    justify-content: space-between;
    min-width: max-content;
    padding: 1em;
    align-content: center;
    align-items: center;
    justify-items: center;
    font-size: small;
    padding: 0em;
}

.tools-window-popup {
    position: absolute;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    color: white;
    padding: 0.5rem;
    max-width: 2.5rem;
    cursor: move;
    left: 14.5rem;
    top: 4.5rem;
    height: calc(100% - 6rem);
}

    .tools-window-popup img {
        pointer-events: none;
    }


.tools-window-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: move;
}

.seprator-row {
    border-bottom: 1px solid;
    margin: 0.65rem 0.1rem;
}

.icon-to-side-for-toolWindowButton {
    position: absolute;
    cursor: pointer;
    right: 0.7rem;
    bottom: 0.75rem;
}

.vertical-toolbar-body {
    width: 5rem;
    height: calc(100% - 6rem);
    max-width: 2.5rem;
    overflow-x: visible;
    scrollbar-width: none;
}*/

.vrtools-section {
    display: flex;
    justify-content: space-around;
    flex: 100%;
    height: 3rem;
    max-height: 3rem;
}

.vr-hide {
    display: none;
}

.mprtools-section {
    display: flex;
    justify-content: space-around;
    flex: 100%;
    height: 3rem;
    max-height: 3rem;
}

.mpr-hide {
    display: none;
}

.toolsSelectionDropdown {
    display: none;
}

.toolsSelectionDropdown-content {
    position: absolute;
    display: flex;
    align-items: center;
    z-index: 2;
    box-shadow: 0px 0px 0.17rem;
    top: 5rem;
    right: 0.5em;
    gap: 2rem;
    padding: 0.3rem 1rem;
    background: rgb(0, 0, 0);
    border-width: 0.08rem;
    border-style: solid;
    border-color: rgb(149, 149, 149);
    border-image: initial;
    border-radius: 0.5rem;
    overflow-x: auto;
    min-width: max-content;
}

.tools-dropdown-content {
    display: grid;
    /*grid-template-columns: repeat(2, 1fr);*/
    position: absolute;
    z-index: 2;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    gap: 1.5rem;
    padding: 0.7rem;
    min-width: fit-content;
    justify-content: center;
    align-content: center;
}

.disabled-item {
    pointer-events: none;
    cursor: not-allowed;
    color: dimgray;
    filter: invert(50%);
}

.imagesreceived-popup-unused {
    /*position: absolute;
    width: 5rem;
    height: 1.5rem;
    background-color: #cf271f;
    color: #77ff81;
    bottom: 1rem;
    left: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.8rem;*/
    display: block;
    position: absolute;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 5rem;
    left: 40%;
    width: 30%;
    color: white;
    padding: 0.5rem;
}

.imagesreceived-popup-header-unused {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 0.5px solid;
    font-size: 1.4rem;
    font-weight: bold;
}

.imagesreceived-popup-body-unused {
    display: flex;
    font-size: 1.4rem;
    padding: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}

.images-notification-popup {
    width: auto;
    height: auto;
    position: absolute;
    top: 3rem;
    background-color: #ff771d;
    display: none;
    align-items: center;
    justify-content: flex-start;
    /* padding: 0.2rem; */
    box-sizing: border-box;
    left: 0.8rem;
    border-radius: 2rem;
    cursor: pointer;
    opacity: 1;
    transition: opacity 1s ease-out;
}

.images-notification-status {
    position: relative;
    left: auto;
    top: auto;
    /*transform: translateX(-50%) translateY(-50%);
    width: 30px;
    height: 30px;*/
    width: 2rem;
    height: 2rem;
    &:before

{
    content: '';
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #01a4e9;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

&:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
}

}

.images-notification-message {
    display: flex;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0.2rem;
}

.images-notification-close {
    margin: 0 0.8rem 0 0.5rem;
    font-size: 0.7rem;
    font-weight: bold;
    background-color: #353333;
    padding: 2px 4px;
    box-sizing: border-box;
    display: flex;
    color: white;
    justify-content: center;
    align-items: center;
    /* align-content: center; */
    border-radius: 4px;
}

@keyframes pulse-ring {
    0% {
        transform: scale(.33);
    }

    80%, 100% {
        opacity: 0;
    }
}

@keyframes pulse-dot {
    0% {
        transform: scale(.8);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(.8);
    }
}

.cursor-ns-resize {
    /* cursor: url('./assets/vertopal.com_pan.cur'), auto; */
    cursor: ns-resize !important;
}

.container {
    max-width: 800px;
    width: 100%;
    padding: 2rem;
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.chip-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.3rem 0rem;
    max-height: 4rem;
    min-height:1rem;
    overflow-y: auto;
}

.chip-label {
    padding: 0.2rem 0rem;
}

.chip {
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    background-color: black;
    color: white;
    /* font-weight: 500; */
    cursor: pointer;
    user-select: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid #e5e7eb;
    /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); */
    position: relative;
    overflow: hidden;
}

    .chip.selected {
        color: #6C7BFF;
        border-color: #6C7BFF;
        box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.3), 0 4px 6px -2px rgba(124, 58, 237, 0.1);
    }

.petctfusiontools-section {
    display: flex;
    justify-content: space-around;
    flex: 100%;
    height: 3rem;
    max-height: 3rem;
}

.petct-hide {
    display: none;
}
.petCtSelection-popup {
    display: none;
    position: fixed;
    z-index: 1;
    background: #000000;
    border: 0.08rem solid #959595;
    box-shadow: 0 0 0.17rem;
    border-radius: 0.5rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60% /*60rem*/;
    /* height: 34rem; */
    color: white;
    padding: 0.5rem;
}

.split-body .petCtSelection-popup {
    left: 12%;
    width: 30%;
}

.petCtSelection-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid;
    font-size: 1.4rem;
    font-weight: bold;
}

.petCtSelection-popup-body {
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    /* height: 10rem; */
    /* flex-direction: column; */
    font-size: 1.4rem;
    /* align-items: center; */
    padding: 1rem;
}

.submit-selection-button {
    height: 2.5rem;
    width: 8rem;
}

.content-center {
    display: flex;
    justify-content: center;
    width: 100%;
}

.select-tumbnail-container {
    border-radius: 1rem;
    border: 0.08rem solid #474747;
    width: 10rem;
    color: white;
    margin: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    height: 100%;
}
.pet-ct-selection-conatiner {
    display: flex;
    margin-top: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

/* toggle buttons for fullscreen mode */
.toolbar-toggle-button {
    position: absolute;
    left: 15%;
    top: 10px;
    width: 65px;
    height: 25px;
    background-color: #6C7BFF;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    cursor: pointer;
    z-index: 1000;
    transform: translate(-50%, -50%);
}
.timeline-toggle-button {
    position: absolute;
    left: 10px;
    top: 50%;
    width: 25px;
    height: 65px;
    background-color: #6C7BFF;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    cursor: pointer;
    z-index: 1000;
    transform: translate(-50%, -50%);
}
.report-toggle-button {
    position: absolute;
    right: -15px;
    top: 50%;
    width: 25px;
    height: 65px;
    background-color: #6C7BFF;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    cursor: pointer;
    z-index: 1000;
    transform: translate(-50%, -50%);
}

    .timeline-toggle-button span,
    .report-toggle-button span {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        color: white;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
    }

.toolbar-toggle-button span {
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

    .timeline-toggle-button:hover, 
    .report-toggle-button:hover,
    .toolbar-toggle-button:hover {
        background-color: whitesmoke;
    }
    .timeline-toggle-button span:hover,
    .toolbar-toggle-button span:hover,
    .report-toggle-button span:hover {
        color: black;
    }