:root {
  --headerHeight: 93px;

  --column-1-width: 400px;
  --column-2-width: 880px;
  --column-3-width: calc((100vw - var(--column-2-width)) - var(--column-1-width));
  --column-height: calc(100vh - var(--headerHeight));

  --cardWidth: 1406px;
  --cardHeight: 815px;
  --cardViewWidth: 780px;
  --cardViewHeight: 452px;
  --cardViewScale: calc(var(--cardViewWidth) / var(--cardWidth));
}

.main-container {
  margin: 0 auto; 
  display: flex; 
  justify-content: center; 
  align-items: center;
  background-color: #eee;
}
.main-row {
  width: 1920px; 
  margin: 0 auto;
  display: flex;
}
.column-1 {
  position: relative;
  left: 0;
  width: var(--column-1-width);
  min-width: 250px;
  max-width: 400px;
  flex-grow: 1;
  height: var(--column-height);
  background-color: #fff;
}
.col-1-inner {
  padding-top: 45px;
}
.column-2 {
  width: var(--column-2-width);
  min-width: 640px;
  height: var(--column-height);
  justify-content: center; 
  align-items: center;
}
.column-3 {
  flex-grow: 1;
  width: 300px;
  overflow-x: hidden; 
  overflow-y: scroll;
  height: var(--column-height);
  background-color: #fff;
}

.card-container {
  width: var(--cardViewWidth);
  height: var(--cardViewHeight);
  margin-top: 50px;
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 38px;
  overflow: hidden;
}

.card-container-buttons {
  width: var(--cardViewWidth);
  margin: 0 50px;
  margin-bottom: 50px;
}

.tab {
  display: none;
  position: absolute;
  top: 155px;
  right: -44px;
  padding: 15px 15px 15px 15px;
  background-color: #fff;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  font-weight: bold;
  color: #000;
  z-index: 9999;
}
#expand-close {
  display: none;
}

.custom-container {
  height: calc(100vh - 90px);
  overflow: hidden;
  width: auto;
  max-width: none;
}

label {
  font-size: 1.1em;
}

table.table-stats th label {
  font-size: 14px;
}

table th, table td {
  vertical-align: middle;
}

textarea {
  height: 150px;
}

.form-control {
  font-size: inherit;
}

.form-group:hover,  .form-group.active {
  /* background-color: #fff9f2;
  border-radius: 3px; */
}

.accordion-button:hover {
  background-color: rgba(236, 240, 245, 1);
}

.accordion-button:focus {
  box-shadow: none;
  border: none;
}

.accordion-button:not(.collapsed):focus {
  border: none;
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.form-select:hover,
.form-select:focus,
.form-control:focus,
.form-control:hover,
.form-control.active {
  border: 1px solid #91B0B3;
  box-shadow: 0 0 0 .25rem rgba(236, 240, 245, 1);
  /* border: 1px solid #86B7FE;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); */
}

.blockp {
  font-size: 0.95em;
  color: #494d55;
}

.modal-backdrop {
  opacity: 0.5;
}

.accordion-button {
  font-size: 0.45em;
  color: #000;
}

.accordion-button:not(.collapsed) {
  color: #000;
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
  color: #a1a1a1;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #a1a1a1;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}

.accordion-body {
  font-size: 0.875em
}

.accordion-button:not(.collapsed) {
  background-color: #fff;
}

#cardholder {
  position: relative;
  height: 1100px;
  overflow: hidden;
  text-align: center;
}

#save-front {

}

#save-back {

}



.front, .back, .card {
  display: block;
  width: 1406px;
  height: 815px;
  margin: 0 auto;
	transform-origin: top left;
  color: #000;
}

.front {
  overflow: hidden;
  position: relative;
  transform: scale(var(--cardViewScale));
  --topOffset: calc(((100vh / 2) - var(--headerHeight)) - (var(--cardViewHeight) / 2));
  top: 0;
  --leftOffset: calc((880px / 2) - (var(--cardViewWidth) / 2));
  left: 0;
}

.back {
  display: none;
  overflow: hidden;
  position: relative;
  transform: scale(var(--cardViewScale));
  --topOffset: calc(((100vh / 2) - var(--headerHeight)) - (var(--cardViewHeight) / 2));
  top: 0;
  --leftOffset: calc((880px / 2) - (var(--cardViewWidth) / 2));
  left: 0;
  background: url(../img/templateback.webp) 0 0 no-repeat;
  overflow: hidden;
}

.card {
  background: url(../img/template.webp) 0 0 no-repeat;
  z-index: initial;
}

#story {
  position: absolute;
  top: 240px;
  left: 205px;
  width: 1025px;
  height: 425px;
  text-align: left;
  font-family: 'EB Garamond', serif;
  font-size: 30px;
  vertical-align: middle;
  /**font-style: italic;**/
}

#profile-image {
  position: absolute;
  width: 400px;
  height: 480px;
  top: 115px;
  left: 0;
  z-index: -1;
  transform: rotate(-10deg);
  cursor: pointer;
}

#profile-image-hover {
  position: absolute;
  width: 400px;
  height: 480px;
  top: 115px;
  left: 0;
  transform: rotate(-10deg);
  cursor: pointer;
}

#profile-image img {
  position: relative;
  width: 400px;
  height: 480px;
  z-index: -2;
  cursor: pointer;
}

#profile-name {
  position: absolute;
  display: block;
  width: 450px;
  height: 50px;
  top: 630px;
  left: 32px;
  transform: rotate(-10deg);
  text-align: center;
  font-family: 'Suez One', serif;
  font-size: 43px;
  cursor: pointer;
}

#profile-job {
  position: absolute;
  display: block;
  width: 450px;
  height: 30px;
  top: 680px;
  left: 32px;
  transform: rotate(-10deg);
  text-align: center;
  font-family: 'IM Fell English SC', serif;
  font-size: 28px;
  cursor: pointer;
}

#ability {
  position: absolute;
  display: block;
  width: 410px;
  top: 445px;
  left: 540px;
  transform: rotate(-8deg);
  text-align: center;
  font-family: 'EB Garamond', serif;
  font-size: 30px;
  vertical-align: middle;
  cursor: pointer;
}

#ability span {
  display: inline-block;
  width: 36px;
  height: 34px;
  vertical-align: middle;
}

span.investigation { background: url(../img/text-investigation.webp) center center no-repeat; }
span.success { background: url(../img/text-success.webp) center center no-repeat; }
span.strength { background: url(../img/text-strength.webp) center center no-repeat; }
span.agility { background: url(../img/text-agility.webp) center center no-repeat; }
span.observation { background: url(../img/text-observation.webp) center center no-repeat; }
span.lore { background: url(../img/text-lore.webp) center center no-repeat; }
span.influence { background: url(../img/text-influence.webp) center center no-repeat; }
span.will { background: url(../img/text-will.webp) center center no-repeat; }

span.icon {
  display: inline-block;
  width: 31px;
  height: 30px;
  vertical-align: middle;
  background-size: contain;
}

#stats div {
  position: absolute;
  display: block;
  width: 70px;
  height: 97px;
  background-size: contain;
  cursor: pointer;
}

#stats-damage { top: 29px; left: 683px; }
#stats-horror { top: 229px; left: 733px; }

.stat-1 { background: url(../img/stat-1.webp) 0 0 no-repeat; }
.stat-2 { background: url(../img/stat-2.webp) 0 0 no-repeat; }
.stat-3 { background: url(../img/stat-3.webp) 0 0 no-repeat; }
.stat-4 { background: url(../img/stat-4.webp) 0 0 no-repeat; }
.stat-5 { background: url(../img/stat-5.webp) 0 0 no-repeat; }
.stat-6 { background: url(../img/stat-6.webp) 0 0 no-repeat; }
.stat-7 { background: url(../img/stat-7.webp) 0 0 no-repeat; }
.stat-8 { background: url(../img/stat-8.webp) 0 0 no-repeat; }
.stat-9 { background: url(../img/stat-9.webp) 0 0 no-repeat; }

#attributes div {
  position: absolute;
  display: block;
  width: 43px;
  height: 63px;
  background-size: contain;
  cursor: pointer;
}

#attributes-strength { top: 85px; left: 1288px; transform: rotate(-3deg); }
#attributes-agility { top: 215px; left: 1301px; transform: rotate(2deg); }
#attributes-observation { top: 321px; left: 1279px; transform: rotate(4deg); }
#attributes-lore { top: 429px; left: 1258px;  }
#attributes-influence { top: 542px; left: 1281px; transform: rotate(1deg); }
#attributes-will { top: 678px; left: 1273px; transform: rotate(2deg); }

.attribute-1 { background: url(../img/attribute-1.webp) 0 0 no-repeat; }
.attribute-2 { background: url(../img/attribute-2.webp) 0 0 no-repeat; }
.attribute-3 { background: url(../img/attribute-3.webp) 0 0 no-repeat; }
.attribute-4 { background: url(../img/attribute-4.webp) 0 0 no-repeat; }
.attribute-5 { background: url(../img/attribute-5.webp) 0 0 no-repeat; }



.upload-container {
  padding: 50px 10%;
}

.box {
  position: relative;
  background: #ffffff;
  width: 100%;
}

.box-header {
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
  border-bottom: 1px solid #f4f4f4;
  margin-bottom: 10px;
}

.box-tools {
  position: absolute;
  right: 10px;
  top: 5px;
}

.dropzone-wrapper {
  border: 2px dashed #91b0b3;
  color: #92b0b3;
  position: relative;
  height: 150px;
}

.dropzone-desc {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  text-align: center;
  width: 40%;
  top: 50px;
  font-size: 16px;
}

.dropzone,
.dropzone:focus {
  position: absolute;
  outline: none !important;
  width: 100%;
  height: 150px;
  cursor: pointer;
  opacity: 0;
}

.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
  background: #ecf0f5;
}

.preview-zone {
  text-align: center;
}

.preview-zone .box {
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 0;
}

.preview-zone {
  display: none;
}

@media (width > 1920px) {
  .column-3 {
    width: calc((1920px - var(--column-2-width)) - var(--column-1-width));
  }
}

@media (width >= 1440px) and (width < 1920px) {
  .column-1 {
    width: 260px;
  }
}
  @media (width < 1440px) {
    .column-1 {
      position: fixed;
      top: 0;
      left: -400px;
      height: 100vh;
      z-index: 9999;
    }
    .col-1-inner {
      padding-top: 20px;
    }
    .tab {
      display: block;
    }
    #expand-close {
      display: block;
    }
  }

@media (width >= 810px) and (width < 1180px) {
  .column-2 {
    width: 100vw;
    height: auto;
    overflow-x: hidden;
  }
  .column-3 {
    width: 100vw;
    height: auto;
    overflow-x: auto;
    overflow-y: auto;
  }
  .card-container, .card-container-buttons {
    --margin-gap: calc((100vw - var(--cardViewWidth)) / 2);
    margin-left: var(--margin-gap);
    margin-right: var(--margin-gap);
  }
}

@media (width >= 480px) and (width < 810px) {
  .main-container, .main-row {
    display: block;
    width: 100vw;
    overflow: hidden;
  }
  .column-2 {
    width: 100vw;
    height: auto;
    overflow-x: hidden;
  }
  .column-3 {
    display: block;
    width: 100vw;
    height: auto;
    overflow-x: auto;
    overflow-y: auto;
  }
  html {
    --cardViewWidthSm: calc(100vw - 30px);
    --cardViewHeightSm: calc((var(--cardViewWidthSm) * var(--cardHeight)) / var(--cardWidth));
    --cardViewScaleSm: calc(var(--cardViewWidthSm) / var(--cardWidth));
  }
  .card-container {
    height: var(--cardViewHeightSm);
    margin-bottom: 28px;
  }
  .card-container, .card-container-buttons {
    margin-left: 15px;
    margin-right:  15px;
    width: var(--cardViewWidthSm);
  }
  .card-container-buttons {
    margin-bottom: 30px;
  }
  .front, .back {
    transform: scale(var(--cardViewScaleSm));
  }
}

@media (width < 480px) {
  .column-2 {
    width: 100vw;
    height: auto;
    overflow-x: hidden;
  }
  .column-3 {
    width: 100vw;
    height: auto;
    overflow-x: auto;
    overflow-y: auto;
  }
  html {
    --cardViewWidthSm: calc(100vw - 30px);
    --cardViewHeightXSm: calc((var(--cardViewWidthSm) * var(--cardHeight)) / var(--cardWidth));
    --cardViewScaleXSm: calc(var(--cardViewWidthSm) / var(--cardWidth));
  }
  .card-container {
    height: var(--cardViewHeightSm);
    margin-bottom: 28px;
  }
  .card-container, .card-container-buttons {
    margin-left: 15px;
    margin-right:  15px;
    width: var(--cardViewWidthSm);
  }
  .card-container-buttons {
    margin-bottom: 30px;
  }
  .front, .back {
    transform: scale(var(--cardViewScaleSm));
  }
}