@media(min-width: 800px) {
  
  #layer-finalize .finalization-buttons > .button {
    width: auto;
  }
  
  #layer-finalize .finalization-buttons > .button#print-preview, 
  #layer-finalize .finalization-buttons > .button#print-add-item {
    border: none;
    font-weight: normal;
    color: var(--main-color);
    height: 30px;
    font-size: 0.9rem;
  }
  
  #layer-finalize .finalization-buttons > .button#print-preview:hover, 
  #layer-finalize .finalization-buttons > .button#print-add-item:hover {
    background-color: transparent;
    text-decoration: underline;
  }
  
  #layer-finalize .finalization-buttons > .button#print-checkout {
    margin-top: 10px;
  }
  
}

@media(max-width: 1000px) {
  
  #editor {
    grid-template-columns: 500px 1fr;
  }
  
}

@media(max-width: 1000px) {
  
  #editor {
    grid-template-columns: 1fr 400px;
  }
  
  body.no-template #editor {
    grid-template-columns: 1fr;
  }
  
  #sidebar {
    grid-column: 1 / 2;
  }
  
  #main,
  #toolboxes {
    grid-column: 2 / 3;
  }
  
  body.no-template #main,
  body.no-template #toolboxes {
    grid-row: 1 / 4;
  }
  
  #campaign-tabs {
    height: 90px;
    padding: 20px 10px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .campaign-tab-label {
    font-size: 1rem;
    white-space: nowrap;
  }
  
  #main.templates,
  #main.campaigns,
  #main.home {
    grid-column: 1 / 3;
    grid-row: 1/4;
  }
  
  #main-header {
    position: absolute;
  }
  
  #main-header #menu,
  #main-header #menu:hover {
    width: 0px;
  }
  
  #main-header #menu.open {
    width: 220px;
  }
  
  #main-header #menu-toggle {
    display: flex;
    cursor: pointer;
  }
  
  #main-header #menu.open .menu-icon.toggle {
    rotate: 180deg;
  }
  
  #sidebar-form {
    padding-left: calc(18px + 25px);
  }
  
  #main:not(.templates):not(.home) {
/*     max-width: calc(100vw - 400px) */
  }
  
  #campaign-tabs {
    justify-content: flex-start;
  }
  
  .campaign-tab {
    font-size: .85rem;
  }
  
  #design-logo {
    height: 26px;
  }
   
  #stage-container {
    padding: 30px;
  }
  
  .sidebar-button {
    width: 40%;
  }
  
  .thumbnail-image {
    width: 110px;
  }
  
  .preview-container {
    grid-template-columns: repeat(4, 1fr);
  }
  
  #sidebar .form-button {
    min-width: 80px;
    padding: 0 10px;
  }
  
  .design > .design-logo {
    height: 115px;
    width: 115px;
    margin-left: -57.5px;
  }
  
  .layer {
    max-width: calc(100vw - 100px);
  }
  
  .sidebar-grid-item {
    height: 192px; 
  }
  
  .category > .category-icon {
    margin-bottom: 10px;
  }
  
  #layer-orders .order-header {
    display: grid;
    grid-template-columns: repeat(3,auto);
  }
  
  #layer-orders .order-detail:nth-child(3n) {
    text-align: right;
  }
  
  #layer-savefiles .savefile > .savefile-actions,
  #layer-image-selection .image-container > .image-actions {
    display: block;
  }
  
}

@media(max-width: 800px) {
  
  .selection-header,
  #file-name,
  #design-logo {
    display: none;
  }
  
  #editor {
    grid-template-columns: 1fr auto;
    grid-template-rows: 55px 1.1fr 1fr;
/*     grid-template-rows: 50px minmax(230px, 3fr) minmax(280px, 1fr);   */
  }
  
  #main-header {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    border-right: none;
  }
  
  .campaign-tab-label {
    font-size: .85rem;
  }
  
  #sidebar {
    border-top: 1px solid #ddd;
  }

  #sidebar-header {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }  
  
  #sidebar-header > #select-buttons {
    padding-left: 10px; 
    justify-content: flex-start;
  }
  
  #sidebar-form {
    padding-left: 18px;
  }
  
  #main {
    height: 100%;
    border-right: none;
  }
  
  #main, 
  #toolboxes {
    grid-column: 1 / 3;
    grid-row: 1 / 3;    
  }
  
  #help-button {
    right: 15px;
    bottom: 15px;
  }
  
  #main:not(.home, .campaigns, .templates) #help-button {
    bottom: calc(100vh - 55px - (100vh - 55px) * 1.1 / 2.1 + 15px);
  }

  #sidebar {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    overflow: hidden;
  }
  
  #sidebar-content {
    height: calc(100% - 55px);
    overflow: hidden;
    overflow-y: auto;
  }
  
  .sidebar-footer {
    position: static;
    bottom: auto;
  }
  
  #main-header #design-logo {
    width: 100%;
  }
  
  #main > #stage-container {
    padding: 15px 15px 60px 15px;

  }
  
  #toolboxes {
    margin-bottom: 15px;
  }
  
  .sidebar-grid-panel#templates-panel,
  .sidebar-grid-panel#designs-panel {
    position: fixed;
    width: 100%;
    height: calc(var(--full-height) - 55px);
    max-height: calc(var(--full-height) - 55px);
    top: 55px;
    left: 0;
    overflow-y: auto;

  }
  
  .sidebar-grid-panel#categories-and-fields-panel {
    position: relative;
    grid-auto-rows: auto;
    max-height: 100%;
  }

  .sidebar-grid-panel#categories-and-fields-panel .category {
    height: 130px;
  }  
  
  .category > .category-icon {
    margin-bottom: 10px;
  }
  
  .category > .sidebar-grid-item-text {
    height: 50px;
  }
  
  .category > .sidebar-grid-item-thumbnail {
    height: calc(100% - 65px);
  }
  
  .fields-panel {

  }
   
  #lightbox-image {
    max-width: 100vw;
    max-height: calc(var(--full-height) - 120px);
  }
  
  .layer {
    max-width: 100vw;
    margin: 0;
    min-height: var(--full-height);
    border-radius: 0;
  }  
  
  #layer-finalize {
    max-width: 800px;
  }

  #layer-checkout > .layer-main,
  #layer-checkout-success > .layer-main,
  #layer-finalize > .layer-main {
    padding: 20px;
  }
  
  #layer-savefiles .savefile > .savefile-actions,
  #layer-image-selection .image-container > .image-actions {
    display: block;
  }
  
  #layer-finalize #finalize-print-order-content > #print-grid > #variant-label,
  #layer-finalize #finalize-print-order-content > #print-grid > #quantity-label {
    display: none;  
  }

  #layer-finalize #finalize-print-order-content > #print-grid > .print-select {
    grid-column: 1 / 3;
  }
  
  #layer-finalize .finalization-preview,
  #layer-finalize .finalization-options {
    text-align: center;
  }
  
  #layer-finalize .finalization-buttons {
    justify-content: center;
  }
  
  #layer-orders h2.order-state,
  #layer-orders .order-actions {
    grid-column: 1/3;
    grid-row: unset;
  }
  
  #layer-orders .order-actions {
  }
  
  #layer-print-info .layer-main {
    display: flex;
    flex-direction: column;
    gap: 2em;
  }

}

@media (max-width: 700px) {
  
  #campaigns {
    grid-template-columns: 1fr;
  }
  
  #layer-orders thead,
  #layer-admin-order-management thead {
    display: none;
  }
  
  #layer-orders tbody,
  #layer-admin-order-management tbody {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  #layer-orders tbody tr,
  #layer-admin-order-management tbody tr {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 10px;
  }
  
  #layer-orders tbody tr:not(:last-of-type),
  #layer-admin-order-management tbody tr:not(:last-of-type) {
    padding-bottom: 15px;
    border-bottom: 1px solid #dbdef0;
  }
  
  #layer-orders tbody th,
  #layer-admin-order-management tbody th {
    display: block;
  }
  
  #layer-orders tbody td,
  #layer-orders tbody td.center {
    text-align: right;
  }
  
  #layer-orders tbody td:empty {
    display: none;
  }
  
  #layer-admin-order-management th,
  #layer-admin-order-management td {
    padding-right: 0;
  }
  
  #layer-admin-order-management td > input[type="text"], #layer-admin-order-management td > input[type="datetime-local"],
  #layer-admin-order-management td > select {
    width: 100%;
    max-width: 400px;
  }
  
}

@media (max-width: 600px) {

  .form-group-row > label {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 110px;
    position: relative;
  } 
  .form-group-row > label > :not(.buttons) {
    margin-right: 40px;
  }
  .form-group-row > label > :nth-child(2):not(.buttons) {
    margin-top: 10px;
  }
  .text-right {
    text-align: left;
  }
  .form-group-row > label > .buttons {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 15px;
  }
  .form-group-row > label > .buttons:not(:first-of-type):not(:last-of-type){
    margin: 0;
  }
  
  #layer-savefiles .layer-main { 
    -webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count: 2;
  }
  
  #layer-image-selection .image-gallery-container {
    grid-template-columns: 1fr 1fr;
  }
  
  #layer-checkout h3 {
    display: flex;
    flex-direction: column;
  }
  
  #layer-checkout .checkout-headline-link {
    align-self: flex-end;
    margin-left: 0;
  }
  
}

@media(max-width: 500px) {
  
  .template {
    grid-template-columns: auto;
    grid-template-rows: 250px auto;
  }
  
  .template-preview {
    width: 100%;
  }
  
  #layer-orders .order-header {
    grid-template-columns: repeat(2,auto);
  }
  
  #layer-orders .order-detail:nth-child(3n) {
    text-align: left;
  }
  
  #layer-orders .order-detail:nth-child(2n) {
    text-align: right;
  }
  
}

@media(max-width: 450px) {
  
  #layer-checkout #checkout-payment-options {
    grid-template-columns: 1fr;
  }
  
  .image-stage {
    width: 90px;
    height: 90px;
  }
  
  #file-name {
    display: none;
  }
  
  #sidebar .form-button {
    min-width: 70px;
    padding: 0 10px;
  }
  
  .sidebar-button {
    width: 45%;
    padding: 0 5px;
  }
  
  .design > .design-logo {
    height: 115px;
    width: 115px;
  }
  
  .layer-footer {
    padding: 20px;
  }
  
  .layer-footer > .layer-button {
    width: 100%;
    margin: 5px 0;
    font-size: 1rem;
    padding: 15px 30px;
    height: 45px;
  }
/*   
  .sidebar-grid-panel {
    grid-auto-rows: 192px; 
  } */
  
  .sidebar-grid-item {
    height: 192px;
  }
  
  .preview-container {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .image-selection-container > .button {
    margin-top: 10px;
  }
  
  #layer-finalize .finalization {
    grid-template-columns: 80px 1fr;
  }
  
  #layer-finalize .button {
    width: 100%;
    margin: 5px 0;
    font-size: 1rem;
    padding: 15px 30px;
    height: 45px;
  }
  
  #layer-finalize .finalization-pages {
    grid-template-columns: 1fr;
  }
  
  #layer-image-selection .image-gallery-container {
    grid-template-columns: 1fr;
  }
  
}

@media(max-width: 400px) {
  
  html {
    font-size: 14px;
  }
  
  .image-stage {
    width: 70px;
    height: 70px;
  }
   
  #layer-checkout .cart-item {
    grid-template-rows: auto auto;
  }
  
  #layer-checkout .cart-item-content {
    grid-column: 1 / 4;
  } 
  
  #layer-checkout .cart-item-actions {
    grid-row: 2 / 3;
    justify-content: flex-end;
  }
  
  #cart-icon .context {
    width: calc(100vw - 14px);
  }
  
  #layer-savefiles .layer-main,
  #layer-image-selection .image-gallery-container { 
    -webkit-column-count: 1; 
    -moz-column-count: 1; 
    column-count: 1;
  }
  
}

@media(max-width: 350px) {
  .image-stage {
    width: 60px;
    height: 60px;
  }
  .package {
    margin: 10px 0;
  }
}