.pavement-grid {position: fixed;inset: 0;display: grid;grid-template-rows: 5.2857142857rem auto;grid-template-columns: 7.1428571429rem auto 0;grid-template-areas: "pavement-grid-item-1 pavement-grid-item-1 pavement-grid-item-1" "pavement-grid-item-2 pavement-grid-item-3 pavement-grid-item-4"; } @media (max-width: 991.98px) {.pavement-grid {grid-template-rows: 5.2857142857rem auto 0 7.1428571429rem;grid-template-columns: auto;grid-template-areas: "pavement-grid-item-1" "pavement-grid-item-3" "pavement-grid-item-4" "pavement-grid-item-2";} } .pavement-grid .pavement-grid-item-1 {grid-area: pavement-grid-item-1; } .pavement-grid .pavement-grid-item-2 {grid-area: pavement-grid-item-2;z-index: 10; } .pavement-grid .pavement-grid-item-3 {grid-area: pavement-grid-item-3;position: relative; } .pavement-grid .pavement-grid-item-3 .tab-content-pavement {position: absolute;inset: 0; } .pavement-grid .pavement-grid-item-3 .tab-content-pavement > .tab-pane {position: absolute;inset: 0; } .pavement-grid .pavement-grid-item-3 .tab-content-pavement > .tab-pane.material {overflow: auto; } .pavement-grid .pavement-grid-item-3 .tab-content-pavement > .tab-pane .pavement-visual {position: absolute;top: 0;bottom: 0;left: 0;right: 0; } .pavement-grid .pavement-grid-item-3 .tab-content-pavement > .tab-pane .pavement-measure {position: absolute;inset: 0; } .pavement-grid .pavement-grid-item-3 .tab-content-pavement > .tab-pane .pavement-measure .pavement-measure-holder {position: absolute;inset: 0;overflow: auto; } .pavement-grid .pavement-grid-item-3 .tab-content-pavement > .tab-pane .pavement-measure .pavement-measure-holder .pavement-measure-pane {position: absolute;inset: 0;transform-origin: left top; } .pavement-grid .pavement-grid-item-3 .tab-content-pavement > .tab-pane .pavement-measure:not(.show) .pavement-measure-holder .pavement-measure-pane {margin-right: -25rem; } .pavement-grid .pavement-grid-item-4 {grid-area: pavement-grid-item-4;overflow: hidden auto;position: relative; } .pavement-grid .pavement-grid-item-4 .pavement-toolbar {position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 25rem;height: 100%;border-left: solid 1px var(--light); } @media (max-width: 991.98px) {.pavement-grid .pavement-grid-item-4 .pavement-toolbar {position: fixed;top: auto;bottom: 7.1428571429rem;width: 100%;height: calc(100% - 22.8571428571rem);border-left: 0;border-top: solid 1px var(--light);transition-duration: 0.1s;transition-property: bottom;} } .pavement-grid.show {grid-template-columns: 7.1428571429rem auto 25rem; } @media (max-width: 991.98px) {.pavement-grid.show {grid-template-columns: auto;} } @media (max-width: 991.98px) {.pavement-grid.show .pavement-grid-item-4 .pavement-toolbar {bottom: -100%;} } .pavement-grid:not(.active) {grid-template-columns: 7.1428571429rem auto 0; } @media (max-width: 991.98px) {.pavement-grid:not(.active) {grid-template-columns: auto;} } .pavement-grid:not(.active) .pavement-grid-item-4 {display: none; } .modal-textures .tab-pane {padding: 1.1428571429rem;margin-bottom: 1.1428571429rem;border: solid 1px var(--nav-tabs-border-color);border-top: 0; } .modal-textures .tab-pane .row {margin-bottom: -1.1428571429rem; } .modal-textures .tab-pane .col {display: flex;flex-direction: column; } .modal-textures .tab-pane .col .btn-texture {display: flex;flex-direction: column;width: 100%;padding: 0;flex-grow: 1;cursor: pointer; } .modal-textures .tab-pane .col .btn-texture input {position: absolute;opacity: 0;visibility: hidden; } .modal-textures .tab-pane .col .btn-texture .image {position: relative;aspect-ratio: 1/1; } .modal-textures .tab-pane .col .btn-texture .image .img-fluid {position: absolute;left: 0;right: 0;width: 100%;height: 100%;bottom: 0;top: 0;object-fit: cover; } .modal-textures .tab-pane .col .btn-texture h4, .modal-textures .tab-pane .col .btn-texture .h4 {display: flex;flex-direction: column;justify-content: center;color: var(--white);background: var(--black);font-size: 1rem;padding: 0.7142857143rem;flex-grow: 1; }