.pavement-toolbar, .fence-toolbar {position: absolute;overflow: auto;max-height: 100%;padding: 1.2142857143rem 2.1428571429rem;background: var(--white); } .pavement-toolbar h2, .pavement-toolbar .h2, .fence-toolbar h2, .fence-toolbar .h2 {background: var(--light);margin: 0 -1.2142857143rem 1.2142857143rem -1.2142857143rem;border-radius: 0;text-align: center;white-space: nowrap; } .pavement-toolbar h3, .pavement-toolbar .h3, .fence-toolbar h3, .fence-toolbar .h3 {text-align: center;font-size: 1.4285714286rem; } .pavement-toolbar h3 small, .pavement-toolbar .h3 small, .fence-toolbar h3 small, .fence-toolbar .h3 small {display: block; } .pavement-toolbar h4, .pavement-toolbar .h4, .fence-toolbar h4, .fence-toolbar .h4 {text-align: center;margin: 0;font-size: 1.1428571429rem; } .pavement-toolbar h5, .pavement-toolbar .h5, .fence-toolbar h5, .fence-toolbar .h5 {text-align: center;font-size: 2.8571428571rem;color: var(--primary); } .pavement-toolbar .form-group-visual-add-point, .pavement-toolbar .form-group-visual-remove-point, .pavement-toolbar .form-group-measure-add-point, .pavement-toolbar .form-group-measure-remove-point, .pavement-toolbar .form-group-save, .pavement-toolbar .form-group-save-pattern, .pavement-toolbar .form-group-load, .pavement-toolbar .form-group-measure-dimensions, .fence-toolbar .form-group-visual-add-point, .fence-toolbar .form-group-visual-remove-point, .fence-toolbar .form-group-measure-add-point, .fence-toolbar .form-group-measure-remove-point, .fence-toolbar .form-group-save, .fence-toolbar .form-group-save-pattern, .fence-toolbar .form-group-load, .fence-toolbar .form-group-measure-dimensions {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center; } .pavement-toolbar .form-group-visual-add-point .btn, .pavement-toolbar .form-group-visual-remove-point .btn, .pavement-toolbar .form-group-measure-add-point .btn, .pavement-toolbar .form-group-measure-remove-point .btn, .pavement-toolbar .form-group-save .btn, .pavement-toolbar .form-group-save-pattern .btn, .pavement-toolbar .form-group-load .btn, .pavement-toolbar .form-group-measure-dimensions .btn, .fence-toolbar .form-group-visual-add-point .btn, .fence-toolbar .form-group-visual-remove-point .btn, .fence-toolbar .form-group-measure-add-point .btn, .fence-toolbar .form-group-measure-remove-point .btn, .fence-toolbar .form-group-save .btn, .fence-toolbar .form-group-save-pattern .btn, .fence-toolbar .form-group-load .btn, .fence-toolbar .form-group-measure-dimensions .btn {cursor: pointer;position: relative; } .pavement-toolbar .form-group-visual-add-point .btn .checked, .pavement-toolbar .form-group-visual-remove-point .btn .checked, .pavement-toolbar .form-group-measure-add-point .btn .checked, .pavement-toolbar .form-group-measure-remove-point .btn .checked, .pavement-toolbar .form-group-save .btn .checked, .pavement-toolbar .form-group-save-pattern .btn .checked, .pavement-toolbar .form-group-load .btn .checked, .pavement-toolbar .form-group-measure-dimensions .btn .checked, .fence-toolbar .form-group-visual-add-point .btn .checked, .fence-toolbar .form-group-visual-remove-point .btn .checked, .fence-toolbar .form-group-measure-add-point .btn .checked, .fence-toolbar .form-group-measure-remove-point .btn .checked, .fence-toolbar .form-group-save .btn .checked, .fence-toolbar .form-group-save-pattern .btn .checked, .fence-toolbar .form-group-load .btn .checked, .fence-toolbar .form-group-measure-dimensions .btn .checked {display: none; } .pavement-toolbar .form-group-visual-add-point svg, .pavement-toolbar .form-group-visual-remove-point svg, .pavement-toolbar .form-group-measure-add-point svg, .pavement-toolbar .form-group-measure-remove-point svg, .pavement-toolbar .form-group-save svg, .pavement-toolbar .form-group-save-pattern svg, .pavement-toolbar .form-group-load svg, .pavement-toolbar .form-group-measure-dimensions svg, .fence-toolbar .form-group-visual-add-point svg, .fence-toolbar .form-group-visual-remove-point svg, .fence-toolbar .form-group-measure-add-point svg, .fence-toolbar .form-group-measure-remove-point svg, .fence-toolbar .form-group-save svg, .fence-toolbar .form-group-save-pattern svg, .fence-toolbar .form-group-load svg, .fence-toolbar .form-group-measure-dimensions svg {width: 2.5714285714rem;height: auto; } .pavement-toolbar .form-group-visual-add-point input:checked ~ .btn, .pavement-toolbar .form-group-visual-remove-point input:checked ~ .btn, .pavement-toolbar .form-group-measure-add-point input:checked ~ .btn, .pavement-toolbar .form-group-measure-remove-point input:checked ~ .btn, .pavement-toolbar .form-group-save input:checked ~ .btn, .pavement-toolbar .form-group-save-pattern input:checked ~ .btn, .pavement-toolbar .form-group-load input:checked ~ .btn, .pavement-toolbar .form-group-measure-dimensions input:checked ~ .btn, .fence-toolbar .form-group-visual-add-point input:checked ~ .btn, .fence-toolbar .form-group-visual-remove-point input:checked ~ .btn, .fence-toolbar .form-group-measure-add-point input:checked ~ .btn, .fence-toolbar .form-group-measure-remove-point input:checked ~ .btn, .fence-toolbar .form-group-save input:checked ~ .btn, .fence-toolbar .form-group-save-pattern input:checked ~ .btn, .fence-toolbar .form-group-load input:checked ~ .btn, .fence-toolbar .form-group-measure-dimensions input:checked ~ .btn {background: var(--link-hover-color);border-color: var(--link-hover-color); } .pavement-toolbar .form-group-visual-add-point input:checked ~ .btn > svg, .pavement-toolbar .form-group-visual-remove-point input:checked ~ .btn > svg, .pavement-toolbar .form-group-measure-add-point input:checked ~ .btn > svg, .pavement-toolbar .form-group-measure-remove-point input:checked ~ .btn > svg, .pavement-toolbar .form-group-save input:checked ~ .btn > svg, .pavement-toolbar .form-group-save-pattern input:checked ~ .btn > svg, .pavement-toolbar .form-group-load input:checked ~ .btn > svg, .pavement-toolbar .form-group-measure-dimensions input:checked ~ .btn > svg, .fence-toolbar .form-group-visual-add-point input:checked ~ .btn > svg, .fence-toolbar .form-group-visual-remove-point input:checked ~ .btn > svg, .fence-toolbar .form-group-measure-add-point input:checked ~ .btn > svg, .fence-toolbar .form-group-measure-remove-point input:checked ~ .btn > svg, .fence-toolbar .form-group-save input:checked ~ .btn > svg, .fence-toolbar .form-group-save-pattern input:checked ~ .btn > svg, .fence-toolbar .form-group-load input:checked ~ .btn > svg, .fence-toolbar .form-group-measure-dimensions input:checked ~ .btn > svg {display: none; } .pavement-toolbar .form-group-visual-add-point input:checked ~ .btn .checked, .pavement-toolbar .form-group-visual-remove-point input:checked ~ .btn .checked, .pavement-toolbar .form-group-measure-add-point input:checked ~ .btn .checked, .pavement-toolbar .form-group-measure-remove-point input:checked ~ .btn .checked, .pavement-toolbar .form-group-save input:checked ~ .btn .checked, .pavement-toolbar .form-group-save-pattern input:checked ~ .btn .checked, .pavement-toolbar .form-group-load input:checked ~ .btn .checked, .pavement-toolbar .form-group-measure-dimensions input:checked ~ .btn .checked, .fence-toolbar .form-group-visual-add-point input:checked ~ .btn .checked, .fence-toolbar .form-group-visual-remove-point input:checked ~ .btn .checked, .fence-toolbar .form-group-measure-add-point input:checked ~ .btn .checked, .fence-toolbar .form-group-measure-remove-point input:checked ~ .btn .checked, .fence-toolbar .form-group-save input:checked ~ .btn .checked, .fence-toolbar .form-group-save-pattern input:checked ~ .btn .checked, .fence-toolbar .form-group-load input:checked ~ .btn .checked, .fence-toolbar .form-group-measure-dimensions input:checked ~ .btn .checked {display: block; } .pavement-toolbar .form-group-visual-add-point input:disabled ~ .btn, .pavement-toolbar .form-group-visual-add-point input[disabled] ~ .btn, .pavement-toolbar .form-group-visual-remove-point input:disabled ~ .btn, .pavement-toolbar .form-group-visual-remove-point input[disabled] ~ .btn, .pavement-toolbar .form-group-measure-add-point input:disabled ~ .btn, .pavement-toolbar .form-group-measure-add-point input[disabled] ~ .btn, .pavement-toolbar .form-group-measure-remove-point input:disabled ~ .btn, .pavement-toolbar .form-group-measure-remove-point input[disabled] ~ .btn, .pavement-toolbar .form-group-save input:disabled ~ .btn, .pavement-toolbar .form-group-save input[disabled] ~ .btn, .pavement-toolbar .form-group-save-pattern input:disabled ~ .btn, .pavement-toolbar .form-group-save-pattern input[disabled] ~ .btn, .pavement-toolbar .form-group-load input:disabled ~ .btn, .pavement-toolbar .form-group-load input[disabled] ~ .btn, .pavement-toolbar .form-group-measure-dimensions input:disabled ~ .btn, .pavement-toolbar .form-group-measure-dimensions input[disabled] ~ .btn, .fence-toolbar .form-group-visual-add-point input:disabled ~ .btn, .fence-toolbar .form-group-visual-add-point input[disabled] ~ .btn, .fence-toolbar .form-group-visual-remove-point input:disabled ~ .btn, .fence-toolbar .form-group-visual-remove-point input[disabled] ~ .btn, .fence-toolbar .form-group-measure-add-point input:disabled ~ .btn, .fence-toolbar .form-group-measure-add-point input[disabled] ~ .btn, .fence-toolbar .form-group-measure-remove-point input:disabled ~ .btn, .fence-toolbar .form-group-measure-remove-point input[disabled] ~ .btn, .fence-toolbar .form-group-save input:disabled ~ .btn, .fence-toolbar .form-group-save input[disabled] ~ .btn, .fence-toolbar .form-group-save-pattern input:disabled ~ .btn, .fence-toolbar .form-group-save-pattern input[disabled] ~ .btn, .fence-toolbar .form-group-load input:disabled ~ .btn, .fence-toolbar .form-group-load input[disabled] ~ .btn, .fence-toolbar .form-group-measure-dimensions input:disabled ~ .btn, .fence-toolbar .form-group-measure-dimensions input[disabled] ~ .btn {opacity: 0.5;cursor: not-allowed; } .pavement-toolbar .form-group-visual-image, .pavement-toolbar .form-group-textures, .pavement-toolbar .form-group-export, .pavement-toolbar .form-group-fence, .fence-toolbar .form-group-visual-image, .fence-toolbar .form-group-textures, .fence-toolbar .form-group-export, .fence-toolbar .form-group-fence {margin-bottom: 1.2142857143rem;display: flex;justify-content: center; } .pavement-toolbar .form-group-visual-image .btn, .pavement-toolbar .form-group-textures .btn, .pavement-toolbar .form-group-export .btn, .pavement-toolbar .form-group-fence .btn, .fence-toolbar .form-group-visual-image .btn, .fence-toolbar .form-group-textures .btn, .fence-toolbar .form-group-export .btn, .fence-toolbar .form-group-fence .btn {display: flex;flex-direction: row;align-items: center;justify-content: space-between;font-size: 1.2857142857rem;cursor: pointer;display: flex; } .pavement-toolbar .form-group-visual-image .btn span, .pavement-toolbar .form-group-textures .btn span, .pavement-toolbar .form-group-export .btn span, .pavement-toolbar .form-group-fence .btn span, .fence-toolbar .form-group-visual-image .btn span, .fence-toolbar .form-group-textures .btn span, .fence-toolbar .form-group-export .btn span, .fence-toolbar .form-group-fence .btn span {width: 100%; } .pavement-toolbar .form-group-visual-image .btn.fence-insert svg, .pavement-toolbar .form-group-textures .btn.fence-insert svg, .pavement-toolbar .form-group-export .btn.fence-insert svg, .pavement-toolbar .form-group-fence .btn.fence-insert svg, .fence-toolbar .form-group-visual-image .btn.fence-insert svg, .fence-toolbar .form-group-textures .btn.fence-insert svg, .fence-toolbar .form-group-export .btn.fence-insert svg, .fence-toolbar .form-group-fence .btn.fence-insert svg {position: relative;top: -0.2142857143rem; } @media (min-width: 768px) {.pavement-toolbar .form-group-visual-image .btn, .pavement-toolbar .form-group-textures .btn, .pavement-toolbar .form-group-export .btn, .pavement-toolbar .form-group-fence .btn, .fence-toolbar .form-group-visual-image .btn, .fence-toolbar .form-group-textures .btn, .fence-toolbar .form-group-export .btn, .fence-toolbar .form-group-fence .btn {width: 100%;} } .pavement-toolbar .form-group-visual-image .btn:hover span, .pavement-toolbar .form-group-textures .btn:hover span, .pavement-toolbar .form-group-export .btn:hover span, .pavement-toolbar .form-group-fence .btn:hover span, .fence-toolbar .form-group-visual-image .btn:hover span, .fence-toolbar .form-group-textures .btn:hover span, .fence-toolbar .form-group-export .btn:hover span, .fence-toolbar .form-group-fence .btn:hover span {color: var(--white); } .pavement-toolbar .form-group-visual-image svg, .pavement-toolbar .form-group-textures svg, .pavement-toolbar .form-group-export svg, .pavement-toolbar .form-group-fence svg, .fence-toolbar .form-group-visual-image svg, .fence-toolbar .form-group-textures svg, .fence-toolbar .form-group-export svg, .fence-toolbar .form-group-fence svg {width: 2.2857142857rem;height: auto; } .pavement-toolbar .form-group-visual-image span, .pavement-toolbar .form-group-textures span, .pavement-toolbar .form-group-export span, .pavement-toolbar .form-group-fence span, .fence-toolbar .form-group-visual-image span, .fence-toolbar .form-group-textures span, .fence-toolbar .form-group-export span, .fence-toolbar .form-group-fence span {color: black; } .pavement-toolbar .form-group-visual-image input, .pavement-toolbar .form-group-textures input, .pavement-toolbar .form-group-export input, .pavement-toolbar .form-group-fence input, .fence-toolbar .form-group-visual-image input, .fence-toolbar .form-group-textures input, .fence-toolbar .form-group-export input, .fence-toolbar .form-group-fence input {display: none; } .pavement-toolbar .form-group-visual-image svg, .pavement-toolbar .form-group-textures svg, .fence-toolbar .form-group-visual-image svg, .fence-toolbar .form-group-textures svg {margin-right: 0.7142857143rem; } .pavement-toolbar .form-group-export svg, .fence-toolbar .form-group-export svg {margin-left: 0.7142857143rem; } .pavement-toolbar .form-group-visual-add-point .btn, .pavement-toolbar .form-group-visual-remove-point .btn, .pavement-toolbar .form-group-measure-add-point .btn, .pavement-toolbar .form-group-measure-remove-point .btn, .pavement-toolbar .form-group-measure-dimensions .btn, .fence-toolbar .form-group-visual-add-point .btn, .fence-toolbar .form-group-visual-remove-point .btn, .fence-toolbar .form-group-measure-add-point .btn, .fence-toolbar .form-group-measure-remove-point .btn, .fence-toolbar .form-group-measure-dimensions .btn {padding: 0.2142857143rem; } @media (min-width: 768px) {.pavement-toolbar .form-group-visual-add-point .btn, .pavement-toolbar .form-group-visual-remove-point .btn, .pavement-toolbar .form-group-measure-add-point .btn, .pavement-toolbar .form-group-measure-remove-point .btn, .pavement-toolbar .form-group-measure-dimensions .btn, .fence-toolbar .form-group-visual-add-point .btn, .fence-toolbar .form-group-visual-remove-point .btn, .fence-toolbar .form-group-measure-add-point .btn, .fence-toolbar .form-group-measure-remove-point .btn, .fence-toolbar .form-group-measure-dimensions .btn {padding: 0.7142857143rem 0.7142857143rem;} } .pavement-toolbar .form-group-visual-add-point svg, .pavement-toolbar .form-group-visual-remove-point svg, .pavement-toolbar .form-group-measure-add-point svg, .pavement-toolbar .form-group-measure-remove-point svg, .pavement-toolbar .form-group-measure-dimensions svg, .fence-toolbar .form-group-visual-add-point svg, .fence-toolbar .form-group-visual-remove-point svg, .fence-toolbar .form-group-measure-add-point svg, .fence-toolbar .form-group-measure-remove-point svg, .fence-toolbar .form-group-measure-dimensions svg {width: 1.4285714286rem;height: auto; } @media (min-width: 768px) {.pavement-toolbar .form-group-visual-add-point svg, .pavement-toolbar .form-group-visual-remove-point svg, .pavement-toolbar .form-group-measure-add-point svg, .pavement-toolbar .form-group-measure-remove-point svg, .pavement-toolbar .form-group-measure-dimensions svg, .fence-toolbar .form-group-visual-add-point svg, .fence-toolbar .form-group-visual-remove-point svg, .fence-toolbar .form-group-measure-add-point svg, .fence-toolbar .form-group-measure-remove-point svg, .fence-toolbar .form-group-measure-dimensions svg {width: 2.2857142857rem;} } .pavement-toolbar .col-custom-checkbox, .fence-toolbar .col-custom-checkbox {display: flex;align-items: center;justify-content: center; } @media (min-width: 768px) {.pavement-toolbar .col-custom-checkbox, .fence-toolbar .col-custom-checkbox {justify-content: flex-start;} } .pavement-toolbar label, .fence-toolbar label {line-height: 1.2; } @media (min-width: 768px) {.pavement-toolbar label, .fence-toolbar label {line-height: 1.4;} } .pavement-toolbar .custom-checkbox, .fence-toolbar .custom-checkbox {padding-left: 0;margin-bottom: 0; } @media (min-width: 768px) {.pavement-toolbar .custom-checkbox, .fence-toolbar .custom-checkbox {padding-left: 1.7857142857rem;margin-bottom: 1rem;} } .pavement-toolbar .custom-checkbox .custom-control-label, .fence-toolbar .custom-checkbox .custom-control-label {padding-top: 2.1428571429rem;text-align: center;line-height: 1.2; } @media (min-width: 768px) {.pavement-toolbar .custom-checkbox .custom-control-label, .fence-toolbar .custom-checkbox .custom-control-label {padding-top: 0;text-align: left;line-height: 1.4;} } .pavement-toolbar .custom-checkbox .custom-control-label::before, .fence-toolbar .custom-checkbox .custom-control-label::before {left: calc(50% - 0.6428571429rem); } @media (min-width: 768px) {.pavement-toolbar .custom-checkbox .custom-control-label::before, .fence-toolbar .custom-checkbox .custom-control-label::before {left: -1.7857142857rem;} } .pavement-toolbar .custom-checkbox .custom-control-label::after, .fence-toolbar .custom-checkbox .custom-control-label::after {left: calc(50% - 0.6428571429rem); } @media (min-width: 768px) {.pavement-toolbar .custom-checkbox .custom-control-label::after, .fence-toolbar .custom-checkbox .custom-control-label::after {left: -1.7857142857rem;} } .fence-toolbar .sides {aspect-ratio: 1/1;position: relative;margin-bottom: 1.1428571429rem; } .fence-toolbar .sides .home {width: 100%;height: 100%;inset: 0;display: flex;align-items: center;justify-content: center;padding: 2.8571428571rem; } .fence-toolbar .sides .home svg {width: 100%;height: 100%; } .fence-toolbar .sides .custom-checkbox {position: absolute;margin: 0;height: 2.1428571429rem;width: 100%;z-index: 1; } .fence-toolbar .sides .custom-checkbox.type-1 {bottom: 0; } .fence-toolbar .sides .custom-checkbox.type-2 {transform: rotate(-90deg);bottom: calc(50% - 1.1428571429rem);right: calc(50% - 1.0714285714rem); } .fence-toolbar .sides .custom-checkbox.type-2 span {transform: rotate(90deg); } .fence-toolbar .sides .custom-checkbox.type-3 {transform: rotate(-90deg);top: calc(50% - 1rem);left: calc(50% - 1.0714285714rem); } .fence-toolbar .sides .custom-checkbox.type-3 span {transform: rotate(90deg); } .fence-toolbar .sides .custom-checkbox.type-4 {top: 0; } .fence-toolbar .sides .custom-checkbox.checked {z-index: 2; } .fence-toolbar .sides .custom-control-label {background: #DBDAD9;padding: 0.2857142857rem;position: absolute;width: 100%;height: 100%;inset: 0;width: 100%;text-align: center;font-weight: 600;cursor: pointer; } .fence-toolbar .sides .custom-control-label::after, .fence-toolbar .sides .custom-control-label::before {content: none; } .fence-toolbar .sides .custom-control-label span {margin-right: 0.3571428571rem; } .fence-toolbar .sides .custom-control-label .active {display: none; } .fence-toolbar .sides .custom-control-label .inactive {display: inline-block; } .fence-toolbar .sides .custom-control-input:checked ~ .custom-control-label {background: var(--black);color: var(--white); } .fence-toolbar .sides .custom-control-input:checked ~ .custom-control-label .active {display: inline-block; } .fence-toolbar .sides .custom-control-input:checked ~ .custom-control-label .inactive {display: none; }