@import url('root.css');

.content {
 flex: var(--flex-1);
 display: var(--display-flex);
 align-items: var(--align-items-center);
 justify-content: var(--justify-content-center);
 width: var(--width-100);
 min-width: var(--min-width-600);
 max-width: var(--width-100);
 height: var(--height-95);
 min-height: var(--min-height-400);
 max-height: var(--max-height-97);
}

.resizable-container {
 width: var(--width-100);
 height: 100%;
 overflow: auto;
 display: var(--display-flex);
 align-items: flex-start;
 justify-content: var(--justify-content-center);
}

.canvas-container {
 transform-origin: top center;
}

#canvas-container {
 width: var(--width-100);
 min-width: var(--min-width-600);
 max-width: var(--width-100);
 height: 100%;
 min-height: var(--min-height-400);
 max-height: 100%;
 display: var(--display-flex);
 justify-content: var(--justify-content-center);
 align-items: var(--align-items-center);
 overflow: hidden;
 box-sizing: border-box;
}

#mangaImageCanvas {
 transform-origin: top left;
}

.area-header a {
 color: var(--a-link);
 text-decoration: underline;

 font-weight: bold;
 transition: color 0.3s ease;
}

.area-header a:hover {
 color: var(--a-link-hover);
 text-decoration: underline;

}

.area-header {
 font-size: var(--font-size-base);
 font-weight: var(--font-weight-bold);
 padding: var(--padding-2);
 color: var(--text-color-B);
 background: rgba(0,0,0,0.35);
 box-shadow: 0 2px 6px rgba(0,0,0,0.3);
 position: relative;
 z-index: 1;
 text-align: var(--text-align-center);
}
.light-mode .area-header {
 background: rgba(0,0,0,0.07);
 box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.canvas-help-text {
 display: none;
 margin-left: 8px;
 font-size: 12px;
 font-weight: normal;
 color: var(--text-color-B);
 animation: helpTextFadeIn 0.3s ease;
}
.canvas-help-text.active {
 display: inline;
}
.canvas-help-text .help-key {
 color: var(--text-color-C);
 font-weight: bold;
}
@keyframes helpTextFadeIn {
 from {opacity:0;transform:translateY(-2px)}
 to {opacity:1;transform:translateY(0)}
}

.template-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: var(--padding-2) 8px;
}

#svg-container-template {
 overflow-y: scroll;
}

.template-orientation-toggle {
 display: inline-flex;
 align-items: center;
 cursor: pointer;
 font-weight: normal;
 user-select: none;
}

.template-orientation-toggle input[type="checkbox"] {
 display: none;
}

.template-toggle-label {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 2px 8px;
 border-radius: var(--textarea-border-radius);
 border: 1px solid var(--border-color-C);
 background: var(--background-color-B);
 font-size: 11px;
}

.template-toggle-v,
.template-toggle-h {
 display: inline-flex;
 align-items: center;
 gap: 2px;
 transition: color 0.15s;
}

.template-toggle-v .material-icons,
.template-toggle-h .material-icons {
 font-size: 14px;
}

.template-toggle-v,
.template-toggle-v span,
.template-toggle-v i {
 color: var(--text-color-C);
}

.template-toggle-h,
.template-toggle-h span,
.template-toggle-h i,
.template-toggle-sep {
 color: var(--a-link);
}

.template-toggle-sep {
 margin: 0 2px;
}

.template-toggle-label.landscape .template-toggle-v,
.template-toggle-label.landscape .template-toggle-v span,
.template-toggle-label.landscape .template-toggle-v i {
 color: var(--a-link);
}

.template-toggle-label.landscape .template-toggle-h,
.template-toggle-label.landscape .template-toggle-h span,
.template-toggle-label.landscape .template-toggle-h i {
 color: var(--text-color-C);
}



#download-buttons {
 font-size: var(--font-size-base);
 margin-top: var(--margin-top-5);
 margin-right: var(--margin-right-20);
}

#download-buttons button:hover {
 color: var(--color-text-primary);
}

#download-buttons button .material-icons,
#download-buttons button .material-symbols-outlined {
 font-size: var(--font-size-material-icons);
 vertical-align: middle;
}

#canvas-buttons {
 font-size: var(--font-size-base);
 margin-top: var(--margin-top-5);
 margin-right: var(--margin-right-20);
}

#canvas-buttons button:hover {
 color: var(--color-text-primary);
}

#canvas-buttons button .material-icons {
 font-size: var(--font-size-base);
 vertical-align: middle;
}

#license-info p {
 font-size: var(--font-size-12px);
}

.info-section {
 border-top: var(--border-color-1px-solid-A);
 padding: var(--padding-5);
}

.info-item {
 display: var(--display-flex);
 align-items: var(--align-items-center);
 margin-bottom: 0px;
 margin-top: 0px;
}

.info-item .material-icons {
 width: 15px;
 margin-right: 15px;
}

.info-item .fab {
 margin-right: var(--margin-right-5);
 width: 24px;
}

.info-item a {
 color: var(--text-color-B);
 text-decoration: none;
}

.info-item a:hover {
 text-decoration: underline;
}

#file-input {
 display: none;
}

.navbar-logo-text {
width:70px;
font-size:13px;
font-weight:800;
line-height:1.15;
letter-spacing:0.12em;
color:var(--text-color-C);
text-align:center;
display:inline-flex;
flex-direction:column;
align-items:center;
justify-content:center;
flex-shrink:0;
text-shadow:0 0 8px rgba(255,255,255,0.15);
}
.navbar-logo-ver {
font-size:13px;
font-weight:600;
letter-spacing:0.08em;
opacity:0.7;
color:var(--text-color-C);
}

.dropdown-menu .dropdown-item div {
 display: var(--display-flex);
 align-items: var(--align-items-center);
 margin-bottom: var(--margin-bottom-10);
}

.dropdown-menu .dropdown-item label {
 flex: var(--flex-1);
 margin-right: var(--margin-right-10);
}

.dropdown-menu label {
 flex: var(--flex-1);
 margin-left: var(--margin-left-10);
 margin-right: var(--margin-right-10);
}

.dropdown-menu .dropdown-item {
 display: var(--display-flex);
 align-items: var(--align-items-center);
}

.dropdown-menu .dropdown-item input[type="color"] {
 margin-left: var(--margin-left-10);
 max-width: var(--max-width-50);
}

.dropdown-menu .dropdown-item input {
 margin-left: var(--margin-left-10);
 min-width: var(--min-width-50);
 max-width: var(--max-width-150);
 width: var(--width-50);
}
.A1111_api_content,
.Comfyui_api_content,
.RunPod_api_content,
.RunPodEndpoint_api_content,
.FalAI_api_content {
padding: 6px 10px 6px 18px;
}
.es-section-title {
font-size: 11px;
font-weight: bold;
color: var(--text-color-C);
padding: 2px 0;
list-style: none;
}
.es-url-row {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
padding: 2px 0;
}
.es-url-row input,
.es-url-row select {
flex: 1;
font-size: 11px;
padding: 3px 6px;
border: 1px solid var(--border-color-C);
border-radius: var(--textarea-border-radius);
background: var(--background-color-B);
color: var(--text-color-B);
min-width: 180px;
}
.es-url-row select:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.es-btn-small {
font-size: 11px;
padding: 2px 6px;
border: 1px solid var(--border-color-C);
border-radius: var(--fjm-button-border-radius);
background: var(--background-color-D);
color: var(--text-color-B);
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
}
.es-btn-small:hover {
background: var(--button-hover-background);
color: var(--text-color-C);
}



.dropdown-menu .dropdown-item input {
 flex: var(--flex-2);
}

.dropdown-menu .dropdown-item .material-icons {
 margin-right: 5px;
}

.dropdown-menu .dropdown-item .fab {
 margin-right: 5px;
}



.tight-text {
 flex: var(--flex-1);
}

.tight-text label {
 margin-left: var(--margin-left-2);
 margin-right: var(--margin-right-2);
}

.dropdown-item-mini-text {
 width: var(--dropdown-item-mini-text-width);
}

.form-row {
 display: var(--display-flex);
 align-items: var(--align-items-center);
 justify-content: var(--justify-content-space-between);
 margin-bottom: var(--margin-bottom-10);
}

.form-row label {
 flex: var(--flex-1);
 margin-right: var(--margin-right-20);
}

.form-row input,
.form-row select {
 flex: var(--flex-2);
 margin-left: var(--margin-left-10);
}

.bottom-bar {
 position: fixed;
 bottom: 0;
 height: var(--bottom-bar-height);
 width: var(--width-100);
 border-top: var(--border-color-A);
}

.bottom-bar-content {
 padding: var(--padding-bottom-bar-content);
 text-align: var(--text-align-center-bottom-bar-content);
}