#stripoSettingsContainer .nav {
  display: inherit;
}
#externalSystemContainer {
  background-color: #676767;
  padding: 5px 0 5px 20px;
}
#undoButton,
#redoButton {
  display: none;
}
#stripoSettingsContainer {
  width: 400px;
  float: left;
  min-height: 800px;
}
#stripoPreviewContainer {
  width: calc(100% - 400px);
  float: left;
  min-height: 800px;
}
.notification-zone {
  position: fixed;
  width: 400px;
  z-index: 99999;
  right: 20px;
  bottom: 80px;
}
.control-button {
  padding: 5px 10px;
  background: #008e76;
  display: inline-block !important;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: white;
  border: 0;
}
.control-button:disabled {
  opacity: 0.65;
}
#changeHistoryLink {
  cursor: pointer;
}

body.fullScreenModalOpen {
  height: 100vh !important;
  overflow: hidden;
}
.template-image {
  height: 0;
  padding-bottom: 75%;
  display: inline-block;
  overflow: hidden;
  z-index: 0;
  position: relative;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 0 0 1px #ddd;
  width: 100%;
  background: #f5f5f5;
  vertical-align: top;
  margin-bottom: 5px;
}
.template-image:hover {
  overflow: visible;
  z-index: 1;
  position: relative;
}
.template-image img {
  width: 100%;
  display: block;
  max-width: 100%;
  height: auto;
}
.template-image:hover img {
  box-shadow: 0 0 0 2px #31cb4b;
  border-radius: 10px;
}

.stripo-template-wrapper {
  margin-bottom: 20px;
}
.template-name {
  text-align: center;
}

#modal-stripo-mobile-view .modal-dialog {
  width: fit-content;
}
#mobile-view-iframe {
  width: 393px;
  height: 852px;
  margin: 0;
  padding: 0;
  border: none;
}