/*need for dynamic size*/
:root {
    --pg-controlbar-svg-size: 0px;
    --thumb-holder-img-size: 0px;
    --thumb-holder-border-width: 3px;
}

/*need for responsove design*/
@media (min-width: 768px) {
    .pg-img {
        /* max-height: calc(-30px + 95vh); */
    }

    .pg-img img {
        /* margin: 17px; */
        /* width: 2509px!important; */
    }

    .pg-content {
        max-height: calc(-2% + 95vh);
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -moz-box-direction: normal;
        -moz-box-orient: horizontal;
        flex-direction: row;
    }

    .pg-img {
        order: 2;
        /* margin: 15px 0; */
    }

    .pg-thumbnails {
        margin: auto 1% auto 0;
        order: 1;
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        -moz-box-direction: normal;
        -moz-box-orient: vertical;
        flex-direction: column;
    }
}

@media (max-width: 767px) {

    .pg-img {
        /* max-height: calc(-45px + 90vh - 56px); */
    }

    .pg-content {
        /* max-height: calc(-3% + 95vh); */
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        -moz-box-direction: normal;
        -moz-box-orient: vertical;
        flex-direction: column;
    }

    .pg-img {
        order: 1;
        /* margin-top: 15px; */
    }

    .pg-img img {}

    .pg-thumbnails {
        order: 2;
        /* width: 100%; */
        margin: 1% auto 0 auto;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -moz-box-direction: normal;
        -moz-box-orient: horizontal;
        flex-direction: row;
    }
}

/* GALLERY ITEMS */
.pg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, .4);
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    /* width: 100vw; */
    /* height: 100vh; */
    margin: 0;
    padding: 0;
}


.pg-window,
.pg-window * {
    user-select: none;
    /* Safari */
    -webkit-user-select: none;
    /* IE/Edge */
    -ms-user-select: none;
}

.pg-window,
.pg-content {}

.pg-window {
    overflow: hidden;
    height: 95vh;
    width: 95vw;
    background-color: #ffffff;
    object-fit: contain;
    padding: 2%;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin: 0;
    .: SUPERELLIPSE(0.5);
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -moz-box-orient: horizontal;
    flex-direction: row;
    /* flex: 1; */
    padding: 1%;
    margin: 0;
    /* width: 100%; */
    /* height: 100%; */
}

.pg-content {
    padding: 0;
    /*.pg-window padding*/
    /* height: max-content; */
    width: 96%;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: stretch;
    /* object-fit: contain; */
    /* height: max-content; */
    /* width: fit-content; */
    align-self: center;
    /* padding-right: 0; */
    margin: 0;
    /* padding: 0; */
    /* flex: 1; */
    /* max-width: calc(-4% + 95vw); */
    height: 98%;
    /* flex: 0 0 auto; */
    margin: 0;
}



/*thumbnails*/
.pg-thumbnails {
    /* width: fit-content; */
    /* margin: auto; */
    /* height: fit-content; */
    /* margin-bottom: 0; */
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    /* flex: 0 0 auto; */
    /* flex: 1; */
}

.pg-thumbnails div:hover,
.pg-thumbnails div.active {
    border-color: #428bca;
}

.thumb_holder {
    cursor: pointer;
    border-color: #fff;
    /* max-width: 60px;
    max-height: 60px;*/
    border-width: var(--thumb-holder-border-width);
    border-style: solid;
    border-radius: 3px;
    width: fit-content;
    height: fit-content;
}

.thumb_holder img {
    height: var(--thumb-holder-img-size);
    width: var(--thumb-holder-img-size);
}

.pg-img {}

.pg-img.col-sm-11.col-xs-12 {
    overflow: auto;
    /* max-width: 95vw; */
    /* width: 97%; */
    /* height: auto; */
    max-height: calc(95vh - 3%);
    /* background-color: white; */
    /* display: -webkit-box; */
    display: -moz-box;
    /* display: -webkit-flex; */
    display: -ms-flexbox;
    /* display: block; */
    /* -webkit-box-direction: normal; */
    /* -webkit-box-orient: vertical; */
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    /* flex-direction: column; */
    /* -webkit-box-pack: center; */
    -moz-box-pack: center;
    -ms-flex-pack: center;
    /* -webkit-justify-content: center; */
    /* justify-content: center; */
    /* -webkit-box-align: center; */
    -moz-box-align: center;
    -ms-flex-align: center;
    /* -webkit-align-items: center; */
    /* align-items: center; */
    margin: 0 1% 1% 1%;
    padding: 0;
    /* flex: 0 0 auto; */
    max-width: calc(-4% + 95vw);
    text-align: center;
}

.pg-img>img {
    display: block;

    /* важливо: керуємо шириною самі */
    height: auto;
    /* зберегти аспект */
    /* left/top більше не потрібні */
    position: static;
    align-self: center;
    display: inline-block;
    /* vertical-align: baseline; */
}

.grabbing {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.pg-controlbar {
    align-self: stretch;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    flex-direction: column;
    /* margin-right: 1%; */
    /* width: 100%; */
    /* width: fit-content; */
    /* float: right; */
    width: var(--pg-controlbar-svg-size);
    /* padding: 0; */
    margin: 0 0 0 1%;
    /* right: 0px; */
    /* float: right; */
    /* flex: 0 0 auto; */
    height: fit-content;
    padding-right: 1%;
    padding: 0;
    flex: 0 0 auto;
}

.pg-controlbar div {
    /* display: -webkit-box; */
    display: -moz-box;
    /* display: -webkit-flex; */
    display: -ms-flexbox;
    /* display: flex; */
    /* -webkit-box-pack: center; */
    -moz-box-pack: center;
    -ms-flex-pack: center;
    /* -webkit-justify-content: center; */
    /* justify-content: center; */
    /* object-fit: contain; */
    /* width: var(--pg-controlbar-svg-size); */
    /* height: var(--pg-controlbar-svg-size); */
    margin: 2px 0;
}

.pg-controlbar svg {
    fill: #428bca;
    stroke: #428bca;
    /* height: 100%; */
    /* width: 100%; */
    /* margin-left: 5px; */
    /* align-self: revert; */
    /* width: 100%; */
}

.pg-controlbar svg:hover {
    fill: #3071a9;
    stroke: #3071a9;
}

#close-btn {
    cursor: pointer;
}

.enabled {
    opacity: 1;
    cursor: pointer;
}

.disabled {
    opacity: 0.4 !important;
    cursor: default !important;
}

.zoom-controls {
    margin: 100% 0;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    flex-direction: column;
}

.zoom-controls svg {
    margin: 10% 0;
}