:root {
    --image-editor-menu--height: 12rem;
    --image-editor-menu--width-plus-offset: 15rem;
    
}


.edit-image-container {
    position: relative;
    display: grid;
    grid-gap: .25rem;
    grid-template-rows: 45vh 30vh 3rem;
    min-width: 7rem;
    max-width: 60rem;
    min-height: 20rem;
    max-height: calc(75vh +  3rem);
    width: calc(100% - 0rem);
    height: calc(75vh +  3rem);
    margin: .125rem auto;
    padding: .25rem 0;
    overflow: hidden;
    left: -0.1rem;
    background: rgba(26, 26, 26, .75);
    border: rgba(213, 213, 213, .975) outset .075rem;
    border-radius: .5rem;
}

.image-container {
    position: relative;
    display: grid;
    grid-gap: .25rem;
    grid-template-rows: 45vh 30vh;
    min-width: 7rem;
    max-width: 60rem;
    min-height: 20rem;
    max-height: 75vh;
    width: calc(100% - 0rem);
    height: 75vh;
    margin: .125rem auto;
    padding: .25rem 0;
    overflow: hidden;
    left: -0.1rem;
    background: rgba(26, 26, 26, .75);
    border: rgba(213, 213, 213, .975) outset .075rem;
    border-radius: .5rem;
}


.edit-image-container .current-image {
    position: relative;
    display: grid;
    grid-template-rows: 2.5rem calc(45vh - 2.5rem);
    grid-template-columns: 100%;
    grid-gap: .125rem;
    max-width: calc(100% - .5rem);
    /* max-height: 40vh; */
    width: calc(100% - 1rem);
    height: calc(100% + 0rem);
    
    margin: auto;
    padding: .125rem .125rem;
    /* overflow: hidden; */
    /* justify-content: center; */
    border-radius: .25rem;
    border: .075rem solid rgba(130, 130, 130, .75);
    /* overflow: auto; */
}

.image-container .current-image {
    position: relative;
    display: grid;
    grid-template-rows: 45vh;
    grid-template-columns: 100%;
    grid-gap: .125rem;
    max-width: calc(100% - .5rem);
    /* max-height: 40vh; */
    width: calc(100% - 1rem);
    height: calc(100% + 0rem);
    
    margin: auto;
    padding: .125rem .125rem;
    /* overflow: hidden; */
    /* justify-content: center; */
    border-radius: .25rem;
    border: .075rem solid rgba(130, 130, 130, .75);
    /* overflow: auto; */
}


.edit-image-container > .current-image img {
    grid-row-start: 2;
    grid-gap: .125rem;
    min-width: 5rem;
    min-height: 5rem;
    
    max-width: calc(100% - .5rem);
    max-height: calc(100% - 0rem);
    
    width: auto;
    height: calc(100% - 1rem);
    height: auto;
    
    margin: auto;
    padding: 0 .5rem .25rem;
}


.image-container > .current-image img {

    min-width: 5rem;
    min-height: 5rem;
    
    max-width: calc(100% - .5rem);
    max-height: calc(100% - 0rem);
    
    width: auto;
    height: calc(100% - 1rem);
    height: auto;
    
    margin: auto;
    padding: 0 .5rem .25rem;
}

/*
.image-container > .images {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, calc(25% - 0.25rem));
    grid-template-rows: calc(50% - .5rem) calc(50% - .5rem);
    grid-gap: .5rem 0.25rem;
    
    max-width: 100%;
    max-height: 26vh;
    overflow: hidden;
    
    width: auto;
    height: auto;
    
    margin: .5rem .125rem;
    padding: 0 .35rem;
    padding-top: .25rem;
    
    cursor: pointer;
    border-radius: .25rem;
    
    border: .075rem solid rgba(130, 130, 130, .75);
    background: rgb(13, 13, 13);
}
*/

.image-container > .images,
.edit-image-container > .images {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, calc(25% - 0.25rem));
    grid-template-rows: calc(50% - .5rem) calc(50% - .5rem);
    grid-gap: .5rem 0.25rem;
    grid-template-rows: repeat(2,minmax(2rem, calc(calc(30vh * .5) - 1.5rem)));
    max-width: calc(100% - .5rem);
    max-height: 26vh;
    /* max-height: 30vh; */
    overflow: auto;
    width: calc(100% - 1rem);
    height: calc(100% - .5rem);
    margin: auto;
    padding: .125rem;
    /* padding-top: .25rem; */
    cursor: pointer;
    border-radius: .25rem;
    border: .075rem solid rgba(130, 130, 130, .75);
    background: rgb(13, 13, 13);
}




/*.image-container > .images > div.image-thumbnail-container {
  
    width: auto;
    height: calc(23vh * .5);
    min-width: 1rem;
    max-width: 100%;
    max-height: 100%;
    min-height: 1rem;
    margin: auto;
    text-align: center;
    vertical-align: middle;
    transition: all .25s ease;
}*/


.edit-image-container > .images div.image-thumbnail-container,
.image-container > .images div.image-thumbnail-container {
    /* border: .075rem solid rgba(175, 175, 175, .75); */
    position: relative;
    display: inline-block;
    
    min-width: 1rem;
    min-height: 1rem;
    
    max-width: calc(100% - .5rem);
    max-width: calc(100% - .25rem);
    max-width: 100%;
    max-height: calc(23vh * .5);
    max-height: 7rem;
    /* width: 15rem; */
    /* width: calc(60rem * .25); */
    width: calc(100% - .5rem);
    /* height: calc(23vh * .5); */
    height: calc(100% - .25rem);
    
    margin: auto;
    padding: .125rem;
    text-align: center;
    vertical-align: middle;
    /* opacity: 1; */
    
    transition: all .25s ease;
    background: rgba(150, 150, 155, .25);
}

.edit-image-container > .images div.image-thumbnail-container {
    border: .125rem dashed rgba(140, 150, 160, .5);
}


.image-container > .images div.image-thumbnail-container {
    border: .075rem solid rgba(140, 150, 160, .5);
}

.image-container > .images div.image-thumbnail-container img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    position: relative;
    top: 50%;
    transform: translate3d(0, -50%, 0);
}


.edit-image-container > .images .image-thumbnail-container.draggable {
    cursor: move;
    
}

.edit-image-container > .images div.image-thumbnail-container.draggable.dragging {
    background: rgba(150, 150, 155, .25);
    opacity: .5 !important;
    z-index: 1700;

}
/* .image-container > .images .image-thumbnail-container.draggable.dragging img{
    opacity: .5 !important;

}
 */

/*.image-container > .images > div >img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(40vh * .5);
}*/


.edit-image-container > .images div.image-thumbnail-container span.progress-bar-container {
    position: absolute;
    display: inline-block;
    margin-top: .25rem;
    width: 15rem;
    margin-left: 0.25rem;
    z-index: 100;
    top: 5%;
    left: calc(50% - .5rem);
    transform: translate(-50%, 0%);
}


.edit-image-container > .images div.image-thumbnail-container img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    position: relative;
    top: 50%;
    transform: translate3d(0, -50%, 0);
}


.image-container > .images > div:hover,
.image-container > .images > div:active {
    opacity: 1;
    background: rgba(200, 200, 225, .5);
    border: .1rem solid rgba(25, 155, 250, 1);
    transform: scale(1.01);
    transition: all .15s ease;
}


.edit-image-container > .images > div:hover,
.edit-image-container > .images > div:active {
    opacity: 1;
    background: rgba(200, 200, 225, .85);
    border: .125rem dashed rgba(25, 175, 25, .95);
/*     transform: scale(1.01); */
    transition: all .15s ease;
}


.edit-image-container > .images progress.progress-bar {
    width: 100%;
    z-index: 100;
    left: 0;
    position: absolute;
}
    
.edit-image-container > .images p.image-upload-status {
    font-family: Arial;
    font-size: 60%;
    font-weight: 500;
    position: absolute;
    display: inline-block;
    top: calc(100% - 1.175rem);
    left: .25rem;
    right: .25rem;
    height: 1rem;
    box-shadow: .075rem .075rem .125rem rgba(13, 13, 13, .75);
    width: 100%;
    border: .075rem outset rgba(175, 200, 215, .9);
    overflow: hidden;
    max-width: 8rem;
    padding: 0;
    white-space: nowrap;
    line-height: 1.75;
    border-radius: 0.5rem;
    margin: 0 auto;
    background: rgba(13, 125, 26, .75);
    color: rgb(240, 250, 250);
    text-shadow: 0.075rem 0.075rem 0.125rem rgb(6 6 6 / 90%);
}

.edit-image-container > .images p.image-upload-status.error {
    background: rgba(125, 13, 13, .75);
}



.edit-image-container > .current-image span.image-actions-toolbar-container {
    /* position: absolute; */
    grid-row-start: 1;
    
    display: inline-block;
    
    width: calc(100% - .5rem);
    height: 2.4rem;
         
    margin: .125rem auto;
    
    overflow: hidden;
   
    border-radius: 0.45rem;

    background: rgba(213, 226, 250, .985);
   
    /* top: 0%; */
    /* left: calc(50% + 0.1rem); */
    /* transform: translate(-50%, 0%); */
}



.edit-image-container > .current-image span.image-actions-toolbar-container span.image-action-buttons {
    width: calc(100% - 0.5rem);
    height: 2rem;
    padding: .075rem;
    margin: .125rem auto;
    overflow: hidden;
    font-size: 1rem;
    display: grid;
    border-radius: .35rem;
    grid-template-columns: calc(50% - 1rem) 2rem calc(50% - 1rem);
    grid-template-rows: 2rem;
    background: rgba(150, 150, 150, .5);
}

.edit-image-container > .current-image span.image-actions-toolbar-container span.image-action-buttons span {
    grid-column-start: 2;
    margin: auto;
}

.edit-image-container > .current-image span.image-actions-toolbar-container span.image-action-buttons button.image-action-button {
    position: relative;
    display: inline-block;
    
    width:  2rem;
    /* justify-content: flex-end; */
    height: 2rem;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%;
    background-color: rgba(200, 215, 225, .666);
    
    border-radius: 0.35rem;
    border: .075rem outset rgba(240, 245, 250, 1);
    padding: 0;
    padding-left: 0.125rem;
    
}

.edit-image-container > .current-image span.image-actions-toolbar-container span.image-action-buttons button.image-action-button.edit {

    grid-column: 1;
    grid-row: 1;
    
    width: 1.75rem;
    height: 1.75rem;
    margin: .125rem auto .125rem .125rem;
    
/*    background-color: rgba(20, 175, 235, .75);
    background-color: rgba(226, 226, 226, .5);*/
    background-image: url(https://quickdi.me/img/edit.svg);
/*     border: .075rem outset rgba(13, 13, 13, .9); */
    
/*     box-shadow: 0.05rem 0.095rem 0.035rem 0.035rem rgba(13, 13, 13,.95); */
    
}

.edit-image-container > .current-image span.image-actions-toolbar-container span.image-action-buttons button.image-action-button.delete {
    
    grid-row: 1;
    grid-column: 3;
    
    width: 1.75rem;
    height: 1.75rem;
    
    margin: .125rem .125rem .125rem auto;
        
    color: rgb(235, 75, 75);
    border-radius: 0.35rem;
    border: .075rem outset rgba(13, 13, 13, .9);
    
    background-position: .185rem 0.15rem;
    background-size: 70%;
    background-color: rgba(226, 226, 226, .5);
    background-image: url(https://quickdi.me/img/delete_red.svg);
/*     box-shadow: 0.05rem 0.095rem 0.035rem 0.035rem rgba(13, 13, 13,.95); */
}



.TS .image-editor-container .image-editor-menu-button {
    width: 2.25rem;
    height: 2.25rem;
    margin: .125rem .125rem .125rem auto;
    border-radius: 0.35rem;
    border: none;
    border: .075rem outset rgba(200, 200, 200, .95);
    /* background-position: .185rem 0.15rem; */
    background-size: 86%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(226, 226, 226, 0);
    background-image: url(https://ssr.quickdi.me/img/hamburger-menu-blue.svg);
}


.TS .image-editor-container button#image-editor-menu-button-id:active,
.TS .image-editor-container button#image-editor-menu-button-id:hover {
    border: .075rem inset rgba(200, 200, 200, .95);
    background-image: url(/img/hamburger-menu-light-blue.svg);
}

.image-editor-menu {
    position: absolute;
    display: block;
    width: calc(var(--image-editor-menu--width-plus-offset) - 1rem);
    height: 12rem;
    background: rgba(13, 13, 13, .9);
    color:  rgb(200, 200, 225);
    font-family: 'Tomorrow';;
    font-weight: 500;
    font-variant: small-caps;
    font-size: 1.25rem;
    letter-spacing: .0666rem;
/*     bottom: 4.5rem; */
    top: calc(100% - var(--image-editor-menu--height));
    left: calc(100% - var(--image-editor-menu--width-plus-offset));
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    border-left: .125rem solid rgba(195, 195, 195, .95);
    border-top: .125rem solid rgba(200, 200, 200, .95);
    border-right: .125rem solid rgba(150, 150, 150, .9);
    border-bottom: .25rem solid rgba(64, 64, 64, .95);
    right: 0.5rem;
    z-index: 5;
    padding: 0;
/*     transition: .3s all ease-in-out; */
    transition: .325s all cubic-bezier(.25,1.35,.5,.95);
}

.image-editor-menu.closed {
    top: 100%;
    
    transition: .225s all cubic-bezier(.25,1.35,.5,.95);
}

.image-editor-menu ul {
    list-style-type: none;
    margin-left: -2.45rem;
    left: 0;
    padding-top: 0;
    margin-top: 0.5rem

}


.image-editor-menu ul li {
    width: calc(99% - 0.55rem);
    left: 0;
    margin-left: 0;
    margin: .075rem 0 .125rem 0;
    padding: .075rem .125rem .25rem 0.5rem;
    cursor: pointer;
    line-height: 1.35;
}

.image-editor-menu ul li.selected {
    border-radius: .075rem;
    border: .075rem solid rgba(25, 220, 250, .975);
    background: rgba(25, 175, 225, .666);
    color: rgb(26, 6, 13);
    outline: unset;
}


.image-editor-menu ul li:hover {
    background: rgba(100, 125, 150, .5);
}


  .TS input#image-files-id {
        margin: -.125rem auto .125rem;
        padding: 0;
        display: inline-block;
        position: relative;
        width: calc(100% - 1rem);
    }

    .TS input#image-files-id::file-selector-button {
        /*   border: 2px solid #6c5ce7; */
        padding: 0;
        width: 100%;
        height: 2.5rem;
        margin: 0;


        display: inline-block;
        position: relative;

        border-radius: 0.35rem;
        /*   background-color: #a29bfe; */
        transition: 1s;
    }
    
    .TS .image-editor-container {
        position: fixed;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 1rem;
        
        max-width: 95vw;
        max-height: calc(85vh - 6rem);
        
        width: 95%;
        height: auto;
        
        left: 50%;
        top: calc(50% + 2rem);
        
        margin: 0 auto;
        padding: 0.5rem 0.5rem 2.5rem;
        
        z-index: 100;
        overflow: hidden;
        
        border: .125rem outset rgb(225, 245, 250, .975);
        border-radius: .25rem;
     
        transform: translate(-50%, -50%);
        background: rgba(50, 50, 50, 1);
    }

.TS .image-editor-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: rgba(13, 13, 13, .85);
    z-index: 1000;
    overflow: hidden;
    overflow-wrap: normal;
    white-space: nowrap;
    overflow-y: hidden;
}

/*.TS .image-editor-container {
    position: fixed;
    display: grid;
    grid-template-columns: repeat(4, calc(25% - 0.75rem));
    grid-gap: .75rem;
    grid-template-rows: calc(100% - 4rem) 4rem;
    max-width: calc(60rem - 2rem);
    max-height: calc(75% + 3rem);
    width: calc(100% - 1rem);
    height: 100%;
    left: 50%;
    top: calc(50% + 2.5rem);
    margin: 0 auto;
    padding: 0.25rem 0.125rem 0.5rem 0.25rem;
    z-index: 100;
    overflow: hidden;
    border: .1rem solid rgb(225, 245, 250, .975);
    border-radius: .35rem;
    transform: translate(-50%, -50%);
    background: rgba(50, 50, 50, 1);
}*/



.TS .image-editor-container {
    position: fixed;
    display: grid;
    grid-template-columns: repeat(4, calc(25% - 0.135rem));
    grid-gap: .25rem;
    grid-row-gap: .125rem;
    grid-template-rows: calc(100% - 5.5rem) 1rem 3.5rem;
    max-width: calc(60rem - 2rem);
    max-height: calc(75% + 5.5rem);
    width: calc(100% - .5rem);
    height: 100%;
    left: 50%;
    top: calc(50% + 2.5rem);
    margin: 0 auto .25rem .125rem;
    padding: 0.25rem 0.125rem 0.5rem 0.25rem;
    z-index: 100;
    text-align: center;
    overflow: hidden;
    border: .1rem solid rgb(225, 245, 250, .975);
    border-radius: .35rem;
    transform: translate(-50%, -50%);
    background: rgba(50, 50, 50, 1);
}


    
    
/*    .TS #image-editing-canvas-id {
        position: relative;
        display: block;
        grid-row-start: 1;
        grid-column-end: span 4;
        
        min-width: 6rem;
        max-width: calc(100% - 0.5rem);
        
        min-height: 6rem;
        max-height: calc(100% - 1rem);
        
        text-align: center;
        left: 50%;
        
        overflow: hidden;
        transform: translate3d(-50%, 0, 0);
        margin: 0;
        padding: .25rem 0;
        cursor: crosshair;
        border-radius: .35rem; 
        border: .125rem solid rgba(200, 225, 235, .9);
    }*/
    


.TS #image-editor-canvas-container-id {
    
    position: relative;
    display: block;
    grid-row-start: 1;
    grid-column-end: span 4;
    
    min-width: 6rem;
    max-width: calc(100% - 1rem);
/*     max-width: calc(60rem - 1rem); */
    min-height: 6rem;
    max-height: calc(100% - 1rem);
    /* max-height: 20rem !important; */
    
    height: 100%;
    width: 100%;
    
    text-align: center;
/*     left: 50%; */
/*     top: 0.25rem; */

    overflow: hidden;
/*     transform: translate3d(-50%, 0, 0); */
    
    margin: .25rem .225rem;
    padding: 0;
    
    cursor: crosshair;
    border-radius: .35rem;
    border: .125rem solid rgba(200, 225, 235, .9);
}





.TS .image-editor-container button:not(.tool-options-panel button):not(button#image-editor-menu-button-id) {
    width: 5rem;
    display: inline-block;
    margin: .125rem auto 0.15rem;
    background: rgba(100, 150, 175, .75);
    height: 2.25rem;
    border-radius: .25rem;
    border: .125rem outset rgba(200, 225, 250, 1);
    line-height: 1;
    font-family: 'Prompt';
    text-align: center;
    padding: .075rem;
    font-size: 1.15rem;
    grid-row-start: 3;
}

    #image-editor-cancel-button-id {
        background: rgba(225, 75, 25, .95);
    }
    
    #image-editor-confirm-button-id {
        background: rgba(25, 150, 35, .95);
    }
    
    #image-editor-crop-button-id {
        grid-row-start: 2;
        grid-column-start: 2;
    }
    
    #image-editor-close-button-id {
        background: rgba(150, 150, 175, .95);
        grid-column-start: 3;
    }
    
    #image-editor-menu-container-id {
        position: relative;
        display: block;
        z-index: 1;
        grid-column-start: 4;
        grid-row-start: 3;
    }
    
    .TS .image-editor-container button.selected {
        border: .125rem outset rgba(25, 200, 250, .98);
        outline: rgba(25, 200, 250, .98);
        box-shadow: 0rem 0rem 0.25rem 0.25rem rgb(25 200 250 / 98%);
        color: rgba(25, 225, 250, .98);
        text-shadow: -0.125rem -0.075rem 0.125rem rgb(6 6 6 / 90%);
    }

    .TS .image-editor-menu-id li.selected {
        border: .125rem outset rgba(25, 200, 250, .98);
        outline: rgba(25, 200, 250, .98);
        box-shadow: 0rem 0rem 0.25rem 0.25rem rgb(25 200 250 / 98%);
        color: rgba(25, 225, 250, .98);
        text-shadow: -0.125rem -0.075rem 0.125rem rgb(6 6 6 / 90%);
    }
    
p.image-editor-status-bar {
    grid-column-start: 1;
    grid-row-start: 2;
    grid-column-end: span 4;
    text-align: center;
    line-height: 1;
    margin: 0;
    padding: 0;
    width: calc(100% - 0.75rem);
    height:  1rem;
    background: rgba(175, 175, 175, 1);
}


div.tool-options-panel {
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    display: grid;
    grid-template-rows: 1rem 2.5rem;
    margin: 0 auto;
    padding: .25rem;
    border-radius: .35rem;
    border: .075rem solid rgba(200, 200, 225, .95);
    background: rgba(150, 150, 150, 1);
    z-index: 2;
    box-shadow: 0.125rem 0.125rem 0.25rem rgb(6 6 6 / 90%);
    transition: .425s all cubic-bezier(.25,1.35,.5,.95);
}

div.crop.tool-options-panel {
    grid-template-columns: repeat(4,25%);
    top: calc(100% - 5rem);
    width: calc(100% - 5rem);
    height: 3.5rem;
    font-size: 1rem;
    font-family: monospace;
}

div#crop-tool-options-panel-id.closed {
    top: 100%;
    transition: .375s all cubic-bezier(.25,1.35,.5,.95);
}


div.crop.tool-options-panel p {
    grid-column-start: 1;
    grid-column-end: span 4;
}


div.rotate.tool-options-panel {
    grid-template-columns: repeat(4,25%);
    top: calc(100% - 5rem);
    width: 16rem;
    height: 3.5rem;    
}

div#rotate-tool-options-panel-id.closed {
    top: 100%;
    transition: .375s all cubic-bezier(.25,1.35,.5,.95);
}

div.brightcontrast.tool-options-panel {
    grid-template-columns: repeat(3,33.3%);
    top: calc(100% - 12rem);    
    width: 25rem;
    height: 10.5rem;
    
}

div#brightcontrast-tool-options-panel-id.closed {
    top: 100%;
    transition: .375s all cubic-bezier(.25,1.35,.5,.95);
}
    
    

.TS #image-editor-container-id .tool-options-panel-close-button {
    position: absolute;
    right:  0.5rem;
    background: rgb(200, 25, 25);
    color: rgb(225, 225, 250);
    font-size: 0.9rem;
    padding:  .075rem;
    width: 1.15rem;
    height: 1.05rem;
    border: none;
    border-radius: 0.35rem;
    top:  0.075rem;
    font-weight: 700;
    text-shadow: 0.1rem 0.057rem 0.125rem rgb(6 6 6 / 95%);
    box-shadow: 0.075rem 0.075rem 0.125rem rgb(6 6 6 / 95%);
    transition: .25s all ease;
}

.TS #image-editor-container-id .tool-options-panel-close-button:hover,
.TS #image-editor-container-id .tool-options-panel-close-button:active {
    top: .125rem;
    text-shadow: -0.1rem 0.057rem 0.125rem rgb(6 6 6 / 95%);
    box-shadow: 0 0 0.125rem rgb(6 6 6 / 95%);
    transition: .35s all ease;
}



div#rotate-tool-options-panel-id p.tool-options-panel-lable {
    grid-column-start: 1;
    grid-column-end: span 4;
    margin: 0;
    padding: 0;
    color: rgb(13, 13, 13 );
    font-size: .9rem;
    font-family: 'Tomorrow';
    text-align: center;
    line-height: 1;
}
    




button#brightcontrast-reset-button-id {
    margin-top: 35%;
    border-radius: .35rem;
    height: 2rem;
    background: rgba(175, 13, 13, .975);
    color: rgb(235, 245, 255);
    font-size: 1.15rem;
}


#brightcontrast-tool-options-panel-id p.tool-options-panel-lable {
    grid-column-start: 1;
    grid-column-end: 4;
    margin: 0;
    padding: 0;
    color:  rgb(13, 13, 13 );
    font-size:  .9rem;
    font-family: 'Tomorrow';
    text-align: center;
    line-height: 1;
}


span.tool-options-panel-span {
    display: inline-block;
    padding: 0;
    margin: 0;
}

lable.tool-options-panel-input-lable {
    margin: 0 auto;
    padding: 0;
    font-size: 0.85rem;
    display: inline;
}

/* input#brightcontrast-darken-button-id { */
span.tool-options-panel-span input[type="range"] {

    display: block;
    appearance: slider-vertical;
    width: 2rem;
    margin: auto;
}

    
    
@media (min-width: 1400px) {
        .image-container > .images,
        .edit-image-container > .images {

            grid-template-columns: repeat(6, calc(16.666% - 0.25rem));
            grid-template-rows: calc(50% - .5rem) calc(50% - .5rem);
        }
}



@media (max-width:768px)
{

        
    .image-container {
        max-width:  97vw;
    }
    
    .image-container > .current-image img,
    .edit-image-container > .current-image img {
        max-width: calc(100% - 1rem);
        max-height: calc(100% - .5rem);
        min-height: 7.5rem;
        min-width:  7.5rem;
        height: auto;
        width: auto;
    }
    
    .edit-image-container > .current-image img {
        grid-row-start: 2;
        grid-gap: .125rem;
        
        
        min-width: 5rem;
        min-height: 5rem;
        
        max-width: calc(100% - 1.0rem);
        max-height: calc(100% - 0.5rem);
        
        margin: auto;
        padding: 0;
        
        /* margin: .25rem auto; */
        /* width: auto; */
        /* top: 100%; */
    }



}