.docview-link, .docview-lightbox, .ticketview-link, .ticketview-lightbox {
    cursor: pointer;
}

#docview-container, #ticketview-container {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .7);
    visibility: hidden;
    z-index: 6500;
}

#docview-container.show, #ticketview-container.show {
    /*display: block*/
    visibility: visible;
}

#docview, #ticketview {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: #fff;
    box-shadow: -10px 0px 10px 1px rgb(0, 0, 0, .3);
    z-index: 8600;
}

#docview {
    right: -1400px;
    width: 80%;
    max-width: 1400px;
    transition: all .3s ease-in-out, all .3s ease-in-out;
}

#ticketview {
    right: -450px;
    width: 98%;
    max-width: 450px;
    transition: all .2s ease-in-out, all .2s ease-in-out;
}

#docview.show, #ticketview.show {
    right: 0;
}

#docview-close {
    position: unset;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

#ticketview-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

#docview .header, #ticketview .header {
    position: relative;
    overflow: hidden;
    z-index: 9000;
}

#docview .header {
	display: grid;
	grid-template-columns: 1fr 45px;
	width: 100%;
	height: 45px;
}

#docview .header .title {
	padding-left: 45px;
	text-align: center;
}

#docview .header .title, #docview .header .close,
#docview .toolbar .left, #docview .toolbar .right {
	margin: 10px;
}
        
#docview .header .close, #docview .toolbar .right {
    text-align: right;
}

#docview .header h4 {
    margin: 0;
}

#docview .toolbar {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
	height: 40px;
}

#docview .toolbar a {
	display: inline-block;
    margin-left: 25px;
}
#docview .toolbar .zoom-out.disabled::before {
	background-image: url('Assets/Shared/Images/Icons/zoom-out-disabled.svg') !important;
	cursor: default;
}
#docview .toolbar .zoom-in.disabled::before {
	background-image: url('Assets/Shared/Images/Icons/zoom-in-disabled.svg') !important;
	cursor: default;
}

#ticketview .header {
    height: 65px;
}

#docview .header .left, #ticketview .header .left {
    margin: 10px 65px 10px 10px;
}

#docview .header .right, #ticketview .header .right {
    margin: 10px;
}

#docview .header .toolbar .icon {
	display: inline-block;
	width: 18px;
	height: 18px;
}
	
#docview-data, #ticketview-data {
    position: absolute;
    margin: 0 auto;
    text-align: center;
    background-color: #ddd;
    overflow: auto;
    z-index: 8500;
}

#docview-data {
    top: 85px;
    bottom: 10px;
    right: 10px;
    left: 10px;
    width: calc(100% - 20px);
}

.docview-data-pdf {
	margin-top: 5px;
}

#ticketview-data {
    top: 65px;
    bottom: 10px;
    right: 0;
    left: 0;
    width: 100%;
}

#docview-data.qr {
    margin-top: -85%;
}

#docview-data.pdf {
    height: calc(100% - 90px);
}

#docview-data.png, #docview-data.jpg, #docview-data.jpeg, #docview-data.webp {
    /*height: fit-content; not work in Safari */
    overflow: hidden;
}

/*
#docview-data .isInObjectOrEmbed {
    height: fit-content !important;
}
*/

@media screen and (max-width: 899px) {
    #docview h3, #ticketview h3 { {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 699px) {
    #docview-data.png {
        margin-top: -80%;
    }
}

@media screen and (max-width: 499px) {
    #docview h3, #ticketview h3 { {
        font-size: 1.2rem;
    }
    #docview-data.png {
        margin-top: -75%;
    }
}