/* ------------------------------ */
/* ------------------------------ */
/* CONTENT */
.Content {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: calc(10px * var(--scale));
   width: 100%;
   min-height: calc(100px * var(--scale));
   padding: calc(10px * var(--scale));
   overflow: visible;
   background-color: var(--background-c);
   border: calc(1px * var(--scale)) solid var(--border-color);
   border-radius: calc(var(--border-radius-2) * var(--scale));
}

.Content .section {
   position: relative;
   display: block;
   width: 100%;
   height: calc(140px * var(--scale));
   border: calc(1px * var(--scale)) solid var(--border-color);
   border-radius: calc(var(--border-radius-1) * var(--scale));
}

.Content .section-image {
   position: relative;
   display: block;
   width: calc(160px * var(--scale));
   height: calc(140px * var(--scale));
   padding: calc(10px * var(--scale));
   float: left;
}

.Content .section-info {
   position: relative;
   display: block;
   width: calc(100% - (172px * var(--scale)));
   height: calc(140px * var(--scale));
   border-left: calc(1px * var(--scale)) solid var(--border-color);
   padding: calc(10px * var(--scale));
   float: left;
}

.Content .section-name {
   display: block;
   width: 100%;
   height: calc(45px * var(--scale));
   overflow: visible;
   padding: calc(10px * var(--scale));
   font-size: calc(var(--font-size-5) * var(--scale));
   font-weight: var(--font-weight-4);
}

.Content .section-row {
   display: block;
   width: 100%;
   height: calc(20px * var(--scale));
   color: var(--text-color-a);
   font-size: calc(var(--font-size-3) * var(--scale));
   font-weight: var(--font-weight-3);
   line-height: 1;
   padding: calc(10px * var(--scale));
   margin-bottom: calc(10px * var(--scale));
}

.Content .options-menu {
   position: relative;
   display: block;
   height: calc(60px * var(--scale));
   overflow: visible;
}

.Content .current-option {
   position: relative;
   display: block;
   width: 100%;
   height: calc(60px * var(--scale));
   padding: calc(20px * var(--scale));
   border: calc(1px * var(--scale)) solid var(--border-color);
   border-radius: calc(var(--border-radius-1) * var(--scale));
   color: var(--text-color);
   font-size: calc(var(--font-size-4) * var(--scale));
   font-weight: var(--font-weight-4);
   text-align: left;
   text-transform: uppercase;
}

.Content .current-option::after {
   content: var(--entity-menu);
   position: absolute;
   display: block;
   top: calc(20px * var(--scale));
   right: calc(20px * var(--scale));
}

.Content .current-option + .options {
   position: absolute;
   display: none;
   top: calc(65px * var(--scale));
   left: 0px;
   width: calc(100% - 0px);
   height: auto;
   overflow: auto;
   padding: 0px;
   background-color: var(--background-a);
   border: calc(1px * var(--scale)) solid var(--border-color);
   border-radius: calc(var(--border-radius-1) * var(--scale));
   z-index: 10;
}

.Content .current-option + .options > .option {
   display: block;
   width: 100%;
   height: calc(60px * var(--scale));
   padding: calc(20px * var(--scale));
   color: var(--text-color);
   font-size: calc(var(--font-size-4) * var(--scale));
   font-weight: var(--font-weight-4);
   text-align: left;
   text-transform: uppercase;
}

.Content .current-option:hover,
.Content .current-option + .options > .option:hover {
   cursor: pointer;
   background-color: var(--background-c);
   color: var(--primary-color);
}

.Content .actions {
   display: flex;
   flex-direction: row;
   gap: calc(10px * var(--scale));
   width: 100%;
   height: calc(60px * var(--scale));
}

.Content .action {
   position: relative;
   display: block;
   width: 100%;
   height: calc(60px * var(--scale));
   padding: calc(20px * var(--scale));
   border: calc(1px * var(--scale)) solid var(--border-color);
   border-radius: calc(var(--border-radius-1) * var(--scale));
   color: var(--text-color);
   font-size: calc(var(--font-size-4) * var(--scale));
   font-weight: var(--font-weight-4);
   text-align: left;
   text-transform: uppercase;
}

.Content .action::after {
   position: absolute;
   content: var(--entity-link);
   top: calc(17.5px * var(--scale));
   right: calc(17.5px * var(--scale));
}

.Content .action:hover {
   cursor: pointer;
   background-color: var(--background-c);
   color: var(--primary-color);
}

.Content .info {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale));
   width: 100%;
   min-height: calc(60px * var(--scale));
   padding: calc(20px * var(--scale));
   overflow: auto;
   border: calc(1px * var(--scale)) solid var(--border-color);
   border-radius: calc(var(--border-radius-1) * var(--scale));
   color: var(--text-color);
   font-size: calc(var(--font-size-4) * var(--scale));
   font-weight: var(--font-weight-2);
   text-align: left;
   text-transform: uppercase;
}

.Content .info-row {
   width: 100%;
   text-transform: none;
}