/* Copyright © 2020-2024 Agnes Freese, all rights reserved */


/*@font-face {
    font-family: 'cloister_blacklight';
    src: url('cloisterblacklight-axjg-webfont.woff2') format('woff2'),
    url('cloisterblacklight-axjg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}*/
@font-face {
    font-family: 'canterburyregular';
    src: url('canterburyregular-mvqn-webfont.woff2') format('woff2'),
    url('canterburyregular-mvqn-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'english_towneregular';
    src: url('english-towne.regular-webfont.woff2') format('woff2'),
    url('english-towne.regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/*
@font-face {
    font-family: 'robotoregular';
    src: url('roboto-regular-webfont.woff2') format('woff2'),
    url('roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
*/
body {
    overflow:hidden;
    position:fixed;
    width:100%;
    padding:
            env(safe-area-inset-top, 20px)
            env(safe-area-inset-right, 20px)
            env(safe-area-inset-bottom, 20px)
            env(safe-area-inset-left, 20px);
}
/* prevents double-tap zoom on android and ipad */
/* also needs for some elements a preventDefault */
div, button, li, ul, canvas, span, text, nav { /* prevents zoom on double tap on touch devices */
    touch-action: manipulation;
}
textarea {
    width: 100%;
    min-height: 200px;
    overflow-y: scroll;
    resize:none;
    border:thin lightgray solid;
}
#pdfOptionsModal textarea {
    width: 100%;
    overflow-y: scroll;
    resize:none;
    border:thin black solid;
    min-height: auto;
}
#pdfOptionsModal textarea:disabled {
    border:thin lightgray solid;
}
span:disabled {
    color: lightgray;
}
label:disabled {
    color: lightgray;
}
#copyrightLine {
    font-size:10px;
    font-style:italic;
    height:15px;
    background-color:gainsboro;
}
#projectNameInCopyrightLine{
    cursor: default;
}
#projectNameInCopyrightLine:hover {
    font-weight:bold;
}
#popoverMenuBottomContainer {
    position:absolute;
    background-color:white;
    padding: 10px 5px;
    border-radius:5px;
    top:0;
}
#popoverShowLabelsSearchDiv, #showLabelsSearchDiv, #showLabelsSearchDivFP, #showLabelsSearchDivFPbg, #showLabelsSearchDivFPEmbel {
    margin:2px;
}
#popoverShowLabelsSearchDiv button,  #showLabelsSearchDiv button, #showLabelsSearchDivFP button, #showLabelsSearchDivFPbg button, #showLabelsSearchDivFPEmbel button{
    margin:0 0 2px 5px;
}
.textSelectedSpan {
    background-color:#007bff;
    color:white;
}
button.leftButton {
    margin-right:-1px;
    border-radius:5px 0 0 5px;
}
button.rightButton {
    margin-left:-1px;
    border-radius:0 5px 5px 0;
}
/* disable spinner arrows on input type number */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
/* disable selection of the canvas element */
canvas #canvasOverlay {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}
/*.navbar-collapse.collapse.show{*/
    /*overflow-x:auto;*/
    /*overflow-y:visible;*/
/*    overflow:auto;
    padding-bottom:5px;
    padding-top:5px;
}*/
/*.navbar-collapse.collapse.show ul {
    flex-direction:row;
}*/
.buttonUp {
    background-image:url("../images/icons8-number-up-24.png");
    background-repeat:no-repeat;
    background-position: 0 0;
    height: 26px;
    width: 26px;
    border-radius: 50% 0 0 50%;
    margin:0 0 0 5px;
}
.buttonDown {
    background-image:url("../images/icons8-number-down-24.png");
    background-repeat:no-repeat;
    background-position: 0 0;
    height: 26px;
    width: 26px;
    margin:0;
    border-radius: 0 50% 50% 0;
}
.lockButton {
    background-image:url("../images/icons8-lock-24.png");
    background-repeat:no-repeat;
    background-position: 0 0;
    background-color: lime;
    height: 26px;
    width: 26px;
    border-radius: 5px;
    margin:0 0 0 5px;
    display:inline-block;
    vertical-align:middle;
}
.unlockButton {
    background-image:url("../images/icons8-unlock-24.png");
    background-repeat:no-repeat;
    background-position: 0 0;
    height: 26px;
    width: 26px;
    border-radius: 5px;
    margin:0 0 0 5px;
    display:inline-block;
    vertical-align:middle;
}
.inputNumber {
    display: inline-block;
    padding: 4px 5px 3px 5px;
    border-radius: 5px;
    background-color:gainsboro;
}
.inputNumber input {
    background-color: #f8f9fa;
    border: none;
    border-radius: 3px;
    margin-top: 2px;
    padding-left: 5px;
}
.inputNumberNoArrows {
    border-radius: 5px;
    border: thick gainsboro solid;
}
.inputNumberNoArrows[disabled] {
    background-color:gainsboro;
}
.navbar-nav {
    flex-direction: row;
}
.navbar-collapse {
    flex-basis:auto;
    padding: 0px 20px 0px 0px;
}
nav.navbar {
    overflow-x:auto;
}
.btn-light {
    margin: 5px;
}
.nav-item.btn.btn-light {
    margin-top:auto;
    margin-bottom:auto;
    min-height: 40px;
    /*max-height: 40px;*/
}

.navbar-nav .btn-light a.nav-link, .navbar-nav .custom-select {
    color: #007bff;
}
.navbar-nav .custom-select:hover {
    color:rgba(0,0,0,.7);
}
a.nav-link {
    padding: 0;
}

button.modeButton{
    background-color: palegoldenrod;
}
button.modeButton.modeActive {
    background-color: lime;
    box-shadow: 0 0 0 3px limegreen;
}
button.modeButton.modeActive:focus {
    box-shadow: 0 0 0 3px limegreen;
}
button.modeButton:hover {
    background-color:darkseagreen;
}

button.btn-light  {
    color: #007bff;
}
.popoverDropDownMenu {
    list-style:none;
    padding:0;
}
#popoverMenuContainer .popover .arrow {
    display:none;
}
nav {
    margin-bottom:10px;
}

.nav{
    margin-top: 10px;
    margin-bottom: 10px;
}

ul.nav {
    padding: 10px;
}


/* use settings for .btn-light for navebar-toggler */
.navbar-toggler {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

#viewport {
    text-align: center;
    height: 100%;
    position:relative;
    padding: 2px;
    background: lightgray;
}
.btn-group-toggle {
    margin-left:20px;
    margin-top:5px;
}

.showCheckmark::before {
    content: url("../images/icons8-checked-21.png");
    position:relative;
    top: 5px;
}


.showCheckmark {
    margin-left: 0;
    font-weight: bold;
}
#ruleLinesRadioGroup {
    list-style: none;
}
#ruleLinesRadioGroup button.showCheckmark  span {
    margin-left:5px;
}

#ruleLinesRadioGroup button {
    padding-left: 5px;
}
#ruleLinesRadioGroup button span {
    margin-left: 29px;
}
.keepTogether {
    white-space:nowrap;
}
.keepTogether input {
    max-width: 3em;
}
#hintText {
    padding: 10px;
    border: thin lightgray solid;
    text-align: left;
}
#hintModal .modal-body {
    text-align: center;
}

label.largeRadioButton {
    text-align:left;
}
label.largeRadioButton span {
    margin-left: 5px;
}
#topNavbar {
    margin-bottom:0px;
}
#confirmAction, #usePaletteModalInfo {
    text-align:center;
    padding:5px;
}
#projectInfoColorsUsedList {
    padding-left:0;
    max-height: 200px;
    overflow: auto;
}
.rowsAndColumnsForm {
    border: thin gainsboro solid;
    padding: 10px;
    border-radius: 5px;
}
.errorContainer {
    border: thin red solid;
    padding: 10px;
    border-radius: 5px;
    margin-top: 5px;
}
.warningContainer {
    border: thin black solid;
    padding: 10px;
    border-radius: 5px;
    margin: 5px;
}
.infoContainer {
    border: thin white solid;
    padding: 10px;
    border-radius: 5px;
    margin-top: 5px;
}
.successContainer {
    border: thin white solid;
    padding: 10px;
    border-radius: 5px;
    margin-top: 5px;
}


/* colors in use */
.primary-color {
    background-color: #007bff; // same as primary for bootstrap
}

.title-bar-color {
    background-color: gainsboro;
}
/*background-color: #eaeef1;*/ /* light blue gray*/

.panel-color {
    background: #f8f9fa; // very light gray from hover state of dropdown-items
}
.panel-color-darker {
    background: gainsboro;
}
.secondary-panel-color {
    background-color: white;
}

#progressBarModal {
    top: 100px;
}
.progress {
    margin: 20px;
    border: gray thin solid;
}
#progressBarModal .modal-content {
    padding: 20px;
    text-align: center;
}
.gridBox {
    border: thick black solid;
    height: 50px;
    text-align: center;
}
#exampleGridLeft {
    text-align: right;
    padding-right: 0;
    height: 100px;
    padding-top:40px;
}
#exampleGridRight {
    text-align: left;
    padding-left: 0;
    height: 100px;
    padding-top:40px;
}
#exampleGridCenter {
    height:100px;
    padding:5px;
}
.exampleText {
    font-weight: bold;
    font-family: Arial, sans-serif;
    font-size: 16px;
}
.negativeInputNumber {
    border: medium red solid;
}
.positiveInputNumber {
    border: medium green solid;
}
.negativeText {
    color: red;
}
.positiveText {
    color: green;
}
.borderBottomNegative {
    border-bottom-color: red;
}
.borderTopNegative {
    border-top-color: red;
}
.borderLeftNegative{
    border-left-color: red;
}
.borderRightNegative {
    border-right-color:red;
}
.borderBottomPositive {
    border-bottom-color: green;
}
.borderTopPositive {
    border-top-color: green;
}
.borderLeftPositive{
    border-left-color: green;
}
.borderRightPositive {
    border-right-color:green;
}
.close {
    color: #f8f9fa;
    opacity: 1;
}
.close:hover {
    color: #e2e6ea;
}
/* color picker stuff */
#colorPickerContainer {
    width: 100%;
}
.colpick {
    width: 100%!important;
    height:100%;
}
.colpick_new_color, .colpick_current_color {
    height: 30px;
}
.colpick_hue {
    height: 100%;
    width: 30px;
    position: relative;
    left: calc(100% + 10px);
    top: calc(13px - 100%);
    cursor: grab;
}
.colpick_hue:active {
    cursor: grabbing;
}
.colpick_color {
    width: calc(100% - 40px);
    height: 100%;
    cursor: crosshair;
    position:relative;
    top:6px;
}
.colpick_color_overlay1, .colpick_color_overlay2, .colpick_color {
    width: 100%;
    height:100%;
    min-height: 250px;
    min-width: 200px;
}
.colpick .colpick_color_overlay1 {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')"; /* IE8 */
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff'); /* IE6 & IE7 */
}
.colpick .colpick_color_overlay2 {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')"; /* IE8 */
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
/*Hue bar sliding indicator*/
.colpick .colpick_hue_arrs {
    position: relative;
    left: calc(100% - 35px);
    width: 40px;
    height: 14px;
    margin: -7px 0 0 0;
    border:2px white solid;
    border-radius: 50%;
}
.colpick .colpick_hue_larr {
    position:relative;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 7px solid #858585;
    left: -7px;
}
.colpick .colpick_hue_rarr {
    position:relative;
    right:calc(100% - 56px);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 7px solid #858585;
    top: -12px;
}
/*Circular color selector*/
.colpick .colpick_selector_outer {
    background:none;
    position: relative;
    width: 11px;
    height: 11px;
    margin: -6px 0 0 -6px;
    border: 1px solid black;
    border-radius: 50%;
}
.colpick .colpick_selector_inner{
    position: relative;
    width: 9px;
    height: 9px;
    border: 1px solid white;
    border-radius: 50%;
}
.colpick_selector_outer {
    cursor: grab;
}
.colpick_selector_outer:active {
    cursor: grabbing;
}
.color_square {
    margin-bottom: 15px;
    margin-top: 15px;
    border: thin lightgray solid;
}
/* end color picker stuff */
.paletteSection {
    min-height: 150px;
    min-width: 150px;
}
#selectBox {
    border:medium gray dashed;
    position:absolute;
    outline:black medium dashed;
    /* mix-blend-mode: difference; */
}
#pasteCanvas {
    position:absolute;
    outline: yellow 4px dotted;
    box-shadow: 0 0 20px black, 0 0 30px white;
    cursor:move;
}
#pasteCursorElement {
    cursor: move;
    background:transparent;
    position:absolute;
}
#popoverTextContent {
    text-align: center;
    /*max-width: 1500px;*/
}
#calcWidth, #calcHeight,#origHeight,#origWidth,#newHeight,#newWidth {
    width:100%;
}
.panelWithPadding {
    padding: 5px 5px 10px 5px;
}
.panelWithBorder {
    background: lightgray;
    padding: 10px 10px 10px 10px;
    border: gray solid thin;
    border-radius: 5px;
    margin: 0 5px 0 5px;
}
.panelWithBorderLight {
    background: gainsboro;
    padding: 10px 10px 10px 10px;
    border: lightgray solid thin;
    border-radius: 5px;
    margin: 0 5px 0 5px;
}
.panelWithBorderNoBg {
    padding: 10px 10px 10px 10px;
    border: gray solid thin;
    border-radius: 5px;
    margin: 0 5px 0 5px;
}
.panelWithBorderNoBgLight {
    padding: 10px 10px 10px 10px;
    border: lightgray solid thin;
    border-radius: 5px;
    margin: 0 5px 0 5px;
}
.panelWithBorderNoBgLightLessPad {
    padding: 5px 5px 5px 5px;
    border: lightgray solid thin;
    border-radius: 5px;
    margin: 0 0 0 0;
}
.panelWithBorderNoBgLightNoMargin {
    padding: 10px 10px 10px 10px;
    border: lightgray solid thin;
    border-radius: 5px;
    margin: 0 0 0 0;
}
#createFromImageModalUpdateButton {
    position:absolute;
    top:0;
    left:15px;
}
.listNoBullets3rem {
    list-style: none;
    height: 3rem;
    overflow-y: auto;
}
.listNoBullets4rem {
    list-style: none;
    height: 4rem;
    overflow-y: auto;
}
.listNoBullets6remNowrap {
    list-style: none;
    height: 6rem;
    overflow: auto;
    white-space:nowrap;
}
.listNoBullets8remNowrap {
    list-style: none;
    height: 8rem;
    overflow: auto;
    white-space:nowrap;
}
.collapsingButtons.collapsed::before {
     /*content:"> ";*/
    content: url(../images/icons8-double-left3-24.png);
 }

.collapsingButtons:not(.collapsed)::after {
    /*content:" <";*/
    content: ". . . . . " url(../images/icons8-double-right3-24.png);
}

.collapsingButtons:not(.collapsed) {
    font-weight:bold;
    font-style: italic;
}
#floatingPaletteContents .collapsingButtons {
    padding: 0 5px;
}
.collapsingButtons:hover {
    text-decoration:none;
    font-weight:bold;
}
#fgColorFloatingPalette, #bgColorFloatingPalette, #embelFloatingPalette {
    display:inline-block;
    width:40px;
    height:40px;
    vertical-align:middle;
    margin-left:50px;
}
#floatingPalette {
    background-color:white;
    position: absolute;
    top:0px;
    left:0px;
    box-shadow: black 0px 0px 10px;
}
#floatingPaletteHandle {
    height: 32px;
    width: 100%;
    background-color: lightgrey;
    padding-right: 5px;
}
#floatingPaletteHandle > img {
    height:32px;
    width: calc(100% - 25px);
    cursor: grab;
}
#calculateRowsColumns, #gridSizeCalculateRowsColumns{
    background: lightgray;
    padding: 10px 0 10px 0;
    border: gray solid thin;
    border-radius: 5px;
}
#borderDivAroundDefines {
    border: thin lightgray solid;
    border-radius: 5px;
    padding: 10px;
}
#ratioModal .row {
    padding:10px;
}
#shadingCanvas {
    position: absolute;
    pointer-events: none;
}
.topEdgeSelection {
    border-top: 3px black dotted;
    /*box-shadow: 0 -2px 2px white;*/
}
.bottomEdgeSelection {
    border-bottom:3px black dotted;
}
.leftEdgeSelection {
    border-left:3px black dotted;
}
.rightEdgeSelection {
    border-right:3px black dotted;
}
.selectedCell {
    position:absolute;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.2)
    /*background-image: url(../images/icons8-check-mark-30.png);
    background-repeat:no-repeat;
    background-size: 100% 100%; */
}
.priorSelectedCell {
    position:absolute;
    pointer-events:none;
    background-color:rgba(0,0,0,0.2);
}
.selectionBox, #createFromImageCanvasSelector{
    border:medium white dashed;
    position:absolute;
    outline: medium dashed;
    text-align:left;
    white-space:nowrap;
    line-height:0;
}
.verticalCrosshair {
    width: 0;
    border: dashed 2px black;
    box-shadow: white 0 0 2px ;
    position:absolute;
    background: gray;
    pointer-events: none;
}
.horizontalCrosshair {
    height: 0;
    border: dashed 2px black;
    box-shadow: white 0 0 2px ;
    background: gray;
    position:absolute;
    left:0px;
    pointer-events: none;
}
.blueBackground {
    background: #007bff;
}
.redBackground {
    background: red;
}
.yellowBackground {
    background: yellow;
}
.greenBackground {
    background: green;
}
.orangeBackground {
    background: darkorange;
}
.purpleBackground{
    background: mediumpurple;
}
.centerCrosshair {
    border: white 2px solid;
    outline: black solid 2px;
    position:absolute;
    border-radius: 5px;
    width: 10px;
    height:10px;
    margin-top: 5px;
    margin-left: 5px;
}
.centerCrosshair:hover {
    border: white 5px solid;
    outline: black solid 2px;
    position:absolute;
    border-radius: 10px;
    width: 20px;
    height:20px;
    margin-top: 0px;
    margin-left: 0px;
    cursor: pointer;
}
#createFromImageCanvas{
    cursor: crosshair;
}
#createFromImageCanvasSelector {
    pointer-events: none;
}
.innerSelection {
    position:relative;
    cursor: move;
    height:calc(100% - 8px);
    width:calc(100% - 8px);
    top:-3px;
    display:inline-block;
    left:-3px;
}
.topSelection {
    position:relative;
    cursor:ns-resize;
    height:7px;
    width:calc(100% - 8px);
    display:inline-block;
    top:-3px;
    left:-3px;
}
.rightSelection {
    position:relative;
    cursor: ew-resize;
    width:7px;
    height:calc(100% - 8px);
    display:inline-block;
    top:-3px;
    left:-3px;
}
.bottomSelection{
    position:relative;
    cursor:ns-resize;
    height:7px;
    width:calc(100% - 8px);
    top:-3px;
    left:-3px;
    display:inline-block;
}
.leftSelection {
    position:relative;
    cursor: ew-resize;
    width:7px;
    height:calc(100% - 8px);
    display:inline-block;
    top:-3px;
    left:-3px;
}
.nwseSelection {
    position:relative;
    cursor: nwse-resize;
    display:inline-block;
    height:7px;
    width:7px;
    top:-3px;
    left:-3px;
}
.neswSelection {
    position:relative;
    cursor: nesw-resize;
    display:inline-block;
    height:7px;
    width:7px;
    left:-3px;
    top:-3px;
}

#mainCanvas {
    position:absolute;
    box-shadow: black 0px 0px 10px;
}
#canvasOverlay {
    position:absolute;
    border:none;
    background-color:transparent;
    display: inline-block; /* so it can be positioned the same as the canvases */
}
#boldCheckbox {
    background-image: url('../images/icons8-bold-24.png');
    background-repeat: no-repeat;
    background-position: 7px;
    min-width: 40px;
}
#italicCheckbox {
    background-image: url('../images/icons8-italic-24.png');
    background-repeat: no-repeat;
    background-position: 7px;
    min-width: 40px;
}
#boldCheckbox.selectedButton {
    background-image: url('../images/icons8-bold-filled-24.png');
    background-repeat: no-repeat;
    background-position: 7px;
    min-width: 40px;
}
#italicCheckbox.selectedButton {
    background-image: url('../images/icons8-italic-filled-24.png');
    background-repeat: no-repeat;
    background-position: 7px;
    min-width: 40px;
}
.selectedProject {
    font-weight: bold;
}
#gridCanvas {
    position:absolute;
}
.bg-dark#upperFooterNav {
    background-color: rgba(0,0,0,0.5)!important;
    position:absolute;
    /*bottom: 56px;*/
    width: 100%;
}
nav#upperFooterNav li {
    margin: 0 5px;
    opacity: 1.0;
    margin-top:auto;
    margin-bottom:auto;
}
nav#upperFooterNav label {
    margin-bottom:0;
}
#moreOptionsModal input{
    margin:5px;
}
#printSetupModal input{
    margin:5px;
}
#downloadSetupModal input{
    margin:5px;
}
#moreOptionsModal select{
    border-radius:5px;
}
.selectedButton {
    /*background-color: lightblue;*/
    box-shadow: 0 0 0 3px #007bff;
}
.selectedButton:focus {
    box-shadow: 0 0 0 3px #007bff;
}
.undoFullZoom {
    background: url('../images/icons8-fullimage-24.png'),url('../images/icons8-undo-24.png');
    background-repeat: no-repeat, no-repeat;
    background-position: 8px 8px, 6px 3px;
    background-color: white;
    background-size: 70%, 30%;
}
.downloadFullImage {
    background: url('../images/icons8-fullimage-24.png'),url('../images/icons8-down-arrow-24.png');
    background-repeat: no-repeat, no-repeat;
    background-position: 0px 0px, 12px 12px;
    background-color: white;
    background-size: 80%, 55%;
    width: 24px;
    height: 24px;
    display: inline-block;
}
button[disabled] > img {
    opacity: 0.5;
}
label.disabled{
    opacity: .65
}
label.disabled > img {
    opacity: 0.5;
}
#successMessage, #errorMessage, #warningMessage {
    padding: 5px;
}
li.hideThisColorButton {
    display:none!important;
}
.colorButtonDigitizer {
    width:30px;
    height:30px;
}
.substituteColorButton {
    margin-right: 5px;
}
#convertColorsDirections {
    margin: 5px;
}
#filterDiv .list-group-item, #patternColorList .list-group-item {
    padding: 5px 10px 0 10px;
}
#projectInfoColorsUsedList {
    border: thin lightgray solid;
    border-radius: 5px;
    padding: 5px;
}
#patternColorList img , #convertPatternColorList img, #projectInfoColorsUsedList img{
    border: thin gray solid;
}
#patternColorList, #convertPatternColorList {
    border:thin lightgray solid;
    overflow:auto;
    max-height:115px;
}
#patternCanvasContainer, #convertPatternCanvasContainer{
    background-color: lightgray;
}
.myHelpButton {
    font-weight: bold;
    font-size: 20px;
    line-height: 20px;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display:inline-block;
}
.libraryModal #filterButton {
    float: right;
    margin: 5px;
}
#saveToLibraryTags {
    max-height: 200px;
    overflow: auto;
}

.patternColorButton {
    width:100%;
}
#filterButton, #cancelFilterButton {
    float:right;
    margin:5px;
}
#libraryForm {
    min-width: 300px;
}
input[name='filters']{
    margin-right:5px;
}
input[name='filterSize']{
    margin-right:5px;
}
#filterSizeDiv label {
    margin-right:10px;
}
#filterDiv {
    max-height:210px;
    overflow:auto;
    border: thin lightgray solid;
    border-radius: 5px;
}
.ulButtonList {
    list-style:none;
    border: thin lightgray solid;
    border-radius: 5px;
    max-height: 300px;
    overflow:auto;
    padding-left:0;
    min-height: 50px;
}
#libraryModal .ulButtonList {
    height:300px;
}
.ulButtonList button {
    width:100%;
    text-align:left;
}
.ulButtonList button:hover {
    font-weight:bold;
}

.ulButtonList button.selectedProject{
    background: #007bff;
    color:white;
}
.ulButtonList button.selectedProject:hover {
    color:white;
}
.mousePosition {
    position: absolute;
    top: 100px;
    left:100px;
    line-height: 2em;
    font-family: Arial, sans-serif;
    font-size: 0.8em;
    background-color: white;
    text-align: center;
    border: thin black solid;
    border-radius: 10px;
    padding: 0px 5px;
}
.mousePosition.mouseDownHaze {
    box-shadow: 0px 0px 10px white;
}
.symbolButton[active] {
    outline:none;
    width: 45px;
    height: 45px;
    box-shadow: dimgrey 5px 5px 2px;
    background-size: 50px;
}
.symbolButton {
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background: white;
    height: 40px;
    width: 40px;
    border: thin gray solid;
}
#printIframe {
    width: 100%;
    min-height:400px;
}

#fontSize, #lineWidth {
    border-radius: 5px;
}
#fontSizeLabel, #lineWidthLabel {
    border-radius: 5px;
    background-color: #f8f9fa;
    border: thin gray solid;
}
#fontSizeLabel {
    padding-left:5px;
}
#palettesInGroupList {
    max-height: 200px;
    overflow:auto;
    margin-top: 5px;
    min-height: 100px;
    list-style-type: none;
}
.dashedBorderTop {
    border-top: dashed thin gray;
    padding-top:5px;
}
#palettesInGroupList li button {
    border: none;
    background-color: inherit;
    text-align:left;
}
#palettesInGroupList li button[active] {
    outline:none;
    background-color:lightgray;
}
#paletteSelect {
    max-height: 350px;
    overflow: auto;
}
#paletteSelect, #paletteColorSelect {
    /*height: calc(100% - 25px); */
    margin-top: 5px;
    min-height: 200px;
    list-style-type: none;
}
#paletteSelect li button {
    border: none;
    background-color: inherit;
    text-align:left;
}
#paletteSelect li button[active]{
    outline:none;
    background-color:lightgray;
}
#paletteSelect li {
    white-space: nowrap;
}
.fgULColorSelect, .bgULColorSelect, .embelSelect, .popoverColorList {
    width: 280px;
    /*margin-left: -10px;*/
}
.fgULColorSelect li, .bgULColorSelect li, .embelSelect li, .popoverColorList li {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 6px;
}
#fgColorSelectButton, #bgColorSelectButton, #embelSelectButton {
    background-image: url('../images/black.png');
    background-size: 40px 40px;
    background-repeat: no-repeat;
    padding-left: 20px;
}
.fgULColorSelect li button.colorButton[active], .bgULColorSelect li button.colorButton[active], .embelSelect li button.colorButton[active], .popoverColorList li button.colorButton[active] {
    outline:none;
    width: 45px;
    height: 45px;
    box-shadow: dimgrey 5px 5px 2px;
    background-size: 50px;
    background-position: -4px -4px;
}
button#fgColorSelectButton:after, button#bgColorSelectButton:after, button#embelSelectButton:after {
    margin-left: 20px;
}
.fgULColorSelect li button.colorButton, .bgULColorSelect li button.colorButton, .embelSelect li button.colorButton, .popoverColorList li button.colorButton {
    background-size: 40px 40px;
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    border: thin gray solid;
    /*background-radius: 5px!important;*/
}
.selectListWrapped {
    list-style-type: none;
    overflow-y: auto;
    max-height: 200px;
    min-height: 150px;
}
.selectListWrapped li {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 6px;
}
.selectListWrapped li button {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 6px;
    background-size: 40px;
    background-position: -2px;
    border: thin gray solid;
}
.selectListWrapped li button.colorButton[active]{
    outline:none;
    width: 45px;
    height: 45px;
    box-shadow: dimgrey 5px 5px 2px;
    background-size: 50px;
    background-position: -4px -4px;
}
.paletteSelectButtons {
    margin:10px;
}
#editPaletteListButton, #editPaletteButton {
    float: right;
    margin-bottom: 5px;
}
#paletteAdvanced {
    width: 100%;
    margin-left: 20px;
}
#lineWidthSelect, #fillTypeSelect {
    padding: 5px;
}
.colpick_field input, .colpick_hex_field input {
    margin-left:10px;
}
.colpick_field.form-group {
    margin-bottom: 0;
}
#paletteAdvanced form {
    border-top: thin grey dashed;
}
#hideAdvancedButton {
    position: relative;
    left: 120px;
    top: -67px;
    background-color: white;
    border: none;
}
#hideAdvancedButton:hover {
    color: black;
    border: thin grey dashed;

}
.editNewColorDiv {
    border: thin #ced4da solid;
    border-radius: 5px;
    padding-bottom: 10px;
    margin-top:10px;
}
.rotateimg0 {
    height:20px;
    width:20px;
    padding-bottom:5px;
}
.rotateimg180 {
    -webkit-transform:rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    height:20px;
    width:20px;
    padding-top:5px;
}
.rotateimg90 {
    -webkit-transform:rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    height:20px;
    width:20px;
    padding-right:5px;
}
.rotateimg270 {
    -webkit-transform:rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    height:20px;
    width:20px;
    padding-left:5px;
}
.textFontSection {
    border-bottom: thin gainsboro solid;
    margin-right:0;
    margin-bottom:10px;
}
.textFontSectionLast {
    margin-right:0;
}
.textFontSection .form-group, .textFontSectionLast .form-group {
    margin-left: auto;
    margin-right:auto;
}
.textFontSection .form-check-label{
    margin-right:5px;
}
.sortItem img {
    background-color:rgba(108, 117, 125, 0.3);
}
.chipSort {
    width: fit-content;
    padding: 0px 6px;
    border-radius: 10px;
    margin-bottom: 5px;
    margin-right: 5px;
    border: #6c757d 2px solid;
    display: inline-block;
    background-color:rgba(108, 117, 125, 0.3);
}
.chipFilter {
     width: fit-content;
     padding: 0px 6px;
     border-radius: 10px;
     margin-bottom: 5px;
     margin-right: 5px;
     border: #007bff 2px solid;
     background-color:rgba(0, 123, 255, 0.3);
     display: inline-block;
 }
.chipX {
    line-height: 1.5;
    margin-left: 5px;
    font-size: medium;
    color: black;
    text-shadow: black 0 0 1px;
}
.chipFilter img, .chipSort img {
    height: 16px;
}
.chipText {
    color: black;
    margin-left:5px;
    font-size:small;
}
#chipContainer {
    padding: 5px 5px 0 5px;
    background-color: #eeeeee;
    margin-bottom: 5px;
}
#popoverTextWrapper {
    padding: 5px;
    margin-bottom: 10px;
    border-bottom: thin gray solid;
}
#popoverTextOptions {
    overflow-y:auto;
    max-height:100px;
}
#floatingPaletteContents ul {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}
#popoverMenuContainer ul {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}
#popoverMenuContainer .fgULColorSelect, #popoverMenuContainer .bgULColorSelect, #popoverMenuContainer .embelSelect {
    overflow-x: auto;
}
#popoverMenuContainer .popover {
    max-width: none;
}
#popoverMenuContainer .popover-body {
    padding: 0;
}
#popoverPatternColor div.colorContainer, #popoverConvertPatternColor div.colorContainer, #popoverConvertPatternColorDigitizer div.colorContainer{
    border:thin gray solid;
    overflow-y: auto;
    height: 150px;
    border-radius: 5px;
}
#popoverPatternColor, #popoverConvertPatternColor, #popoverConvertPatternColorDigitizer{
    position: absolute;
    background-color: white;
    padding: 5px 5px 5px 5px;
    border: thin gray solid;
    box-shadow: black 0 0 10px;
    border-radius: 5px;
}
#popoverPatternColor .arrow, #popoverConvertPatternColor .arrow, #popoverConvertPatternColorDigitizer .arrow {
    position: absolute;
    display: block;
    width: 1rem;
    height: .5rem;
    margin: 0 .3rem;
}
#shareProjectModal input{
    margin: 5px;
}
#shareProjectModal .row {
    border: thin lightgray solid;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    padding-top: 10px;
}
#shareProjectModal .row:last-child {
    border:none;
    margin-bottom:0;
    padding-top:0;
}
#shareProjectModal .row .col-12 div {
    margin: 0 20px;
    font-size: 0.8em;
    padding: 5px 5px 0 10px;
    border-radius: 5px;
}
#shareProjectModal .row .col-12 div p {
    padding-bottom: 5px;
}
div.a2a_kit {
    display: flex;
    justify-content: center;
}
a.a2a_button_facebook[data-a2a-follow='agnes.freese.376']{
    padding: 4px 2px;
}
#theLink {
    width: 100%;
    border: none;
}
#theLinkWrapperDiv {
    padding: 2px;
    text-align: center;
    margin-bottom: 20px;
    border: thin gainsboro solid;
    border-radius: 5px;
}
.slideLabel {
    padding: 5px;
    width: 100%;
    margin: 5px;
}
#nCellRangeNumber {
    border: none;
}
.colorUpDownButton {
    padding: .1875rem .4375rem;
    border-width: .125rem;
}
#createFromImageCanvasContainer, #createFromImageOutputCanvasContainer {
    border: thin lightgray solid;
    border-radius: 5px;
    margin-bottom: 5px;
    max-width: 310px;
    max-height: 310px;
    overflow: auto;
    background-color:lightgrey;
}
#sliderTextSpan {
    position: absolute;
    vertical-align: middle;
    line-height: 1.2rem;
    font-size: 0.7rem;
    font-weight:bold;
    left:0;
    pointer-events: none;
}

.slider {
    -webkit-appearance: none;
    width: 70%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    margin-right: 10px;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
}
.btn.transButton {
    margin-left:7px;
    border:gray thin solid;
}
#patternColorList .transButton img {
    border:none;
}
.btn.transButtonSelected {
    box-shadow: dimgrey 5px 5px 2px;
}
.btn.transButton:hover {
    background-color:lightblue;
}
.cropPaneSideBar {
    height: calc(100% - 300px);
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .colpick_hue {
        left: calc(100% + 35px);
    }
    #hideAdvancedButton {
        left: 30px;
        top: -25px;
    }
    .cropPaneSideBar {
        height: 100%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .colpick_hue {
        left: calc(100% + 35px);
    }
    #hideAdvancedButton {
        left: 30px;
        top: -24px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .colpick_hue {
        left: calc(100% + 10px);
    }
    #hideAdvancedButton {
        left: 100px;
        top: -24px;
    }
    .navbar-collapse.collapse.show{
        overflow:visible;
        padding-bottom:5px;
        padding-top:5px;
    }
}
.radioLabel {
    border: thin gainsboro solid;
    border-radius: 5px;
    padding: 5px 10px;
}
.radioLabel.active {
    border-color:#007bff;
}


/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .colpick_hue {
        left: calc(100% + 10px);
    }
    #hideAdvancedButton {
        left: 100px;
        top: -24px;
    }
}
#shareDescCharsLeft {
    color:blue;
    font-style:italic;
    font-weight:bold;
}
.card-header {
    background-color: #f8f9fa; // very light gray from hover state of dropdown-items
}
.card-header,.card-body {
    padding: 0px;
}
.disable-select {
    user-select: none; /* supported by Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}
/* following from post https://stackoverflow.com/questions/44467377/bootstrap-4-multilevel-dropdown-inside-navigation */
.dropdown-submenu{
    position: relative;
}
/* arrow */
.dropdown-submenu a::after{
    transform: rotate(-90deg);
    position: absolute;
    right: 10px;
    top: 40%;
}
.dropdown-submenu:hover .dropdown-menu, .dropdown-submenu:focus .dropdown-menu{
    display: flex;
    flex-direction: column;
    position: absolute !important;
    margin-top: -41px;
    left: 99%;
}

.glassPaneOn {
    display:block;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color:rgba(0,0,0,0.5);
    pointer-events:auto;
}
.glassPaneOff {
    display:none;
    pointer-events:none;
}
#donate-button img{
    box-shadow: 5px 5px 5px gray;
    border: 2px gray solid;
    border-radius: 5px;
}
#donate-button img:hover {
    box-shadow: 5px 5px 5px black;
    border: 2px black solid;
}

.cropPaneSelectionBox {
    border: 1px black solid;
    position: absolute;
    outline: 1px white solid;
    text-align: left;
    white-space: nowrap;
    line-height: 0;
}

.cropPaneSelectionBox .innerSelection {
    position:relative;
    cursor: move;
    height:100%;
    width:100%;
    top:-20px;
    display:inline-block;
    left:-15px;
}
.cropPaneSelectionBox .topSelection {
    position:relative;
    cursor:ns-resize;
    height:10px;
    width:100%;
    display:inline-block;
    top:-24px;
    left:-24px;
    border-radius:5px;
    background-image:linear-gradient(to top, gray, white);
}
.cropPaneSelectionBox .rightSelection {
    position:relative;
    cursor: ew-resize;
    width:10px;
    height:100%;
    display:inline-block;
    top:-22px;
    left:-15px;
    border-radius:5px;
    background-image:linear-gradient(to right, gray, white);
}
.cropPaneSelectionBox .bottomSelection{
    position:relative;
    cursor:ns-resize;
    height:10px;
    width:100%;
    top:-27px;
    left:-24px;
    display:inline-block;
    border-radius:5px;
    background-image:linear-gradient(to bottom, gray, white);
}
.cropPaneSelectionBox .leftSelection {
    position:relative;
    cursor: ew-resize;
    width:10px;
    height:100%;
    display:inline-block;
    top:-22px;
    left:-13px;
    border-radius:5px;
    background-image:linear-gradient(to left, gray, white);
}
.cropPaneSelectionBox .nwSelection {
    position:relative;
    cursor: nwse-resize;
    display:inline-block;
    height:20px;
    width:20px;
    top:-22px;
    left:-22px;
    border-radius:10px;
    background-image:linear-gradient(to top left, teal, white);
}
.cropPaneSelectionBox .seSelection {
    position:relative;
    cursor: nwse-resize;
    display:inline-block;
    height:20px;
    width:20px;
    top:-22px;
    left:-28px;
    border-radius:10px;
    background-image:linear-gradient(to bottom right, teal, white);
}
.cropPaneSelectionBox .swSelection {
    position:relative;
    cursor: nesw-resize;
    display:inline-block;
    height:20px;
    width:20px;
    left:-22px;
    top:-22px;
    border-radius:10px;
    background-image:linear-gradient(to bottom left, teal, white);
}
.cropPaneSelectionBox .neSelection {
    position:relative;
    cursor: nesw-resize;
    display:inline-block;
    height:20px;
    width:20px;
    left:-28px;
    top:-22px;
    border-radius:10px;
    background-image:linear-gradient(to top right, teal, white);
}
.outlineObject.neSelection, .outlineObject.seSelection, .outlineObject.swSelection, .outlineObject.nwSelection {
    outline: 2px aqua solid;
    box-shadow: 0px 0px 10px 10px aqua;
}
.outlineObject.topSelection, .outlineObject.bottomSelection, .outlineObject.leftSelection, .outlineObject.rightSelection, .outlineObject.innerSelection {
    outline: 2px aqua solid;
}
input[name='cropPaneARRadio']{
    margin-left:10px;

}
.selectionGlowL {
    box-shadow: 0 0 10px black, -10px 0 10px white;
}
.selectionGlowR {
    box-shadow: -2px 0 10px black, 6px 0 10px white;
}

.selectionGlowT {
    box-shadow: 0 0 10px black, 0 -10px 10px white;
}
.selectionGlowB {
    box-shadow: 0 -2px 10px black, 0 6px 10px white;
}
.selectionGlowInner {
    box-shadow: 0px 0px 10px black, 0px 0px 40px white;
}
.selectionGlowCorner {
    box-shadow: 0px 0px 10px black, 0px 0px 60px white;
}
#accordionPDF .card {
    border: none;
}
#accordionPDF .card-body {
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}
#accordionPDF .card-header {
    border-left: 1px solid rgba(0, 0, 0, .125);
}