/*----------- AI Image Generator -----------*/
.footer-wrap { display: none; }
@-moz-document url-prefix() { .gen .mes-1 { scrollbar-color: #11131a #15171e; } .gen .mes-2  {  scrollbar-color: #0f1118 #15171e; } }
.gen-page .head-wrap { border-bottom-color: rgba(8, 10, 14, 0.45); } 
.gen .mes-1 ::-webkit-scrollbar { width: 8px; }
.gen .mes-1 ::-webkit-scrollbar-track { background: none; }
.gen .mes-1 ::-webkit-scrollbar-thumb { background: #11131a; }
.gen .mes-2 ::-webkit-scrollbar-thumb  { background: #0f1118; }
.gen .mes-1 ::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }
.gen .mes-1 { width:18%; }
.gen .mes-2 { width:82%; border-left: 1px solid rgb(18, 22, 30); border:0; }
.gen .mes-spin { top:50%; margin-top:-22px; }
.gen .mes-spin .spinner { width:44px; }

.gen .mes-2-chat { height: calc(100vh - 102px); height: calc(100dvh - 102px); box-shadow: 1px 1px rgba(255, 255, 255, .6%) inset; margin: 0; padding: 0; background: rgb(28, 31, 40); border-left: 1px solid rgba(0, 0, 0, 0.19); }
.gen .mes-convo { padding-left:0; padding-right:0; margin: 0px 0 48px; padding-bottom:20px; }
.gen .mes-2-chat-bg { opacity: .3; width: 100%; height: 100%; object-fit: cover; }
.gen .mes-1-top { background: #191c24; border-bottom: 1px solid #15171f; }
.gen .mes-1-row-scroll { background:rgb(33, 37, 47); box-shadow: 0 1px rgba(255, 255, 255, .6%) inset; height: calc(100vh - 135px); height: calc(100dvh - 135px); }
.gen .gen-settings-view { height: calc(100vh - 101px);   height: calc(100dvh - 101px); }
.gen .gen-search-scroll { height: calc(100vh - 136px);height: calc(100dvh - 136px); }
.gen-iv { position: relative; border-bottom: 1px solid rgba(12, 13, 18, 30%); background: #1f212c; width: 100%; text-align: center; height: 26px; z-index: 5; line-height: 25px; font-size: 11px; color: #8f93a3; } .gen-iv-btn { float: left; width: 50%; }  
.gen-iv-btn:hover { cursor: pointer; color: #9fa3b5; }
.gen .gen-iv-btn-selected { font-family: effrasemi; color: #fde0a8; }
.gen .mes-1-search input { font-size: 11px; height: 35px; padding: 9px 35px 10px 10px; border:0; border-bottom:1px solid rgba(12, 13, 18, 30%); background: #1f212c; } 
.gen .mes-1-search i {  top: 13px; font-size: 11px; right:10px; }
.gen-hide .head-all { display:none; } 
.gen-hide .mes-2-chat { height: calc(100vh - 37px); height: calc(100dvh - 37px); }
.gen-hide .mes-1-row-scroll { height: calc(100vh - 71px); height: calc(100dvh - 71px); }
.gen-hide .gen-settings-view { height: calc(100vh - 36px); height: calc(100dvh - 36px); }
.gen-hide .gen-2-top-i-up { display:none; }
.gen-hide .gen-2-top-i-down { display:inline; }
.gen-hide-sidebar .mes-1 { display:none !important; }
.gen-hide-sidebar .mes-2 { width:100%  !important; }
.gen-mobile-search-viewing .mes-1, .gen-mobile-search-viewing .gen-search-view, .gen-mobile-settings-viewing .mes-1, .gen-mobile-settings-viewing .gen-settings-view { display:block !important;  width:100% !important; }
.gen-mobile-search-viewing .mes-2, .gen-mobile-search-viewing .gen-settings-view, .gen-mobile-settings-viewing .mes-2, .gen-mobile-settings-viewing .gen-search-view { display:none !important; }

/* 1st Panel Design */
.gen-set-back { display:none; float: right; padding: 13px 12px 6px 12px; box-shadow: 1px 0 rgb(255 255 255 / 1%) inset; border-left: 1px solid rgb(8 10 14 / 73%); text-align: center; font-size: 11px; height: 39px; overflow: hidden; transition: .27s; margin: -11px -9px 0px; cursor:pointer; } 
.gen-set-back i { padding-right: 2px; }
.gen-set-row-loop { float: left; width:100%; }
.gen-set-row-loop .gen-set-row:first-of-type { padding-top: 19px; padding-bottom: 23px; }
.gen-set-row-loop .gen-set-row:last-of-type { margin-bottom: 53px; }
.gen-set-row { padding: 21px 14px 21px 14px; clear: both; border-bottom: 1px solid rgb(0 0 0 / 18%); box-shadow: 0 1px rgb(255 255 255 / .6%); float: left; width: 100%; }
.gen-set-row-drag .gen-drag-wrap { margin: 13px auto 0 49px; }
.gen-set-title { font-size: 11px; padding-bottom: 6px; font-family: 'effrasemi'; color: #adceff; color: #ff9abf; color:#eee; position:relative; }
.gen-set-title i { float: left; padding: 5px; margin: -5px; color: #3b404f; margin-right: 0px; position:relative; cursor:pointer; }
.gen-set-help-drop { position: absolute; left: -2px; min-width: 198px; background: #591029; color: #eee; font-family: 'effra'; font-size:12px; padding: 10px 12px 12px; line-height: 16px; border-radius: 25px; z-index: 10; top: 24px; background: #0f141a; border: 1px solid #435d9f; font-style: normal; display:none; } 
.gen-set-help-drop span { border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; width: 1px; border-bottom: 5px solid #435d9f; margin: auto; top: -6px; left: 5px; }
.gen-set-help-drop-bottom { top: auto; bottom: 25px; } 
.gen-set-help-drop-bottom span { top: auto;bottom: -6px;border-bottom: 0;border-top: 5px solid #435d9f; }
.gen-set-title-btn { position: absolute; right: 0; top: -2px; }
.gen-set-title-btn span { font-size: 10px; background: #32384a; color: #d9dfee; padding: 3px 6px; display: block; border-radius: 4px; position: relative; transition: .27s; font-family: effrasemi; color: #e3e5ec; letter-spacing: .5px; cursor: pointer; }
.gen-set-title-btn span:hover { background: #343b4e; }
.gen-set-btn-wrap { width: calc(100% + 6px); }
.gen-set-btn { float: left; width: 25%; padding: 0 6px 6px 0; text-align: center; position:relative; }
.gen-set-btn span { font-size: 11px; color: #dcdee7; clear: both; background:#2e3344; background: #32384a; color:#eee; padding: 6px 8px; display: block; border-radius: 4px; position:relative; transition:.27s; cursor:pointer; }
.gen-set-btn span:hover { background: #353c4f; }
.gen-set-btn span:hover li { background:rgb(47, 55, 74); }
.gen .gen-set-btn-selected span { background: #2f4784; background: #354e8c; }
.gen-set-btn span li { color: #7b7f9b; font-size: 10px; position: absolute; right: 0; top: 0; bottom: 0; padding: 6px 6px; border-left: 1px solid rgb(0 0 0 / 19%); box-shadow: 1px 0 rgb(255 255 255 / 1%) inset; background:rgb(46, 52, 70); border-radius: 0 6px 6px 0; font-family: 'effrasemi'; letter-spacing: 0.2px; width: 52px; text-align: center; display: block; text-overflow: ellipsis; overflow: hidden; }
.gen .gen-set-btn-selected span li { border-left: 1px solid rgba(0, 0, 0, 0.22); box-shadow: 1px 0 rgb(255 255 255 / 1%) inset; background:rgb(41, 67, 130); color: #7a98e1; }
.gen-set-x3 .gen-set-btn { width:33.333333%; }
.gen-set-x2 .gen-set-btn { width:50%; }
.gen-set-models .gen-set-btn { width:100%; }
.gen-set-models .gen-set-btn span { text-align: left;  }
.gen-set-row-input-left { width: 50%; padding-right: 5px; clear: none; } 
.gen-set-row-input-right { width: 50%; float: right; padding-left: 5px; clear: none; }
.gen-set-row-input-left { width: 50%; padding-right: 6px; } 
.gen-set-row-input-right .gen-set-help-drop { left: auto; right: -79px; min-width: 149px; width: 190px; } 
.gen-set-row-input-right .gen-set-help-drop span { left:50%; }
.gen-set-input input { background:#32384a; padding: 7px 11px; width: 150px; border-radius: 4px; width:100%; font-size: 13px; }

/* Search History OLD */
.gen-search-menu { width: 100%; text-align: center; height: 26px; background: #272a35; line-height: 25px; font-size: 11px; border-bottom: 1px solid rgba(12, 13, 18, .42); color: #8f93a3; position: absolute; margin-top: -2px; border-top: 1px solid rgb(15 18 24 / 57%); z-index: 5; }
.gen-search-menu-btn { float: left; width: 33.33333%; } 
.gen-search-menu-btn:hover { cursor:pointer; color: #9fa3b5; }
.gen .gen-search-menu-btn-selected { color: #9fdba2; font-family:effrasemi; }
.gen .gen-search-scroll { display: block; padding:24px 0 0; margin:0; }
.gen-search-row { width: 100%; border-bottom: 1px solid rgb(8 10 14 / 27%); box-shadow: 0 1px rgb(255 255 255 / 1%); position: relative; overflow: hidden; cursor: pointer; padding: 8px 10px; }
.gen-search-top { color: #f596b7; font-size: 10px; }
.gen-search-eye { float: right; color: #494e5d; cursor: pointer; transition:.3s; }
.gen-search-row:hover .gen-search-eye { color:#94bfe1; color: #747985; }
.gen-search-delete { float: right; color: #494e5d; cursor: pointer; transition: .3s; padding: 9px 8px 14px 16px; font-size: 8px; position: absolute; right: 0px; top: 0; }
.gen-search-delete:hover { color: #747985; }
.gen-search-text { font-size: 11px; line-height: 11px; margin-bottom: 5px; }
.gen-search-img { float: left; width: 80%; overflow:hidden; }  
.gen-search-img img { height: auto; width: 100%; border-radius: 4px; }
.gen-search-image { float: left; width: 80%; overflow: hidden; display: grid; grid-template-columns: repeat(2, 1fr); border-radius: 4px; margin: 10%; } 
 .gen-search-image-single { grid-template-columns: repeat(1, 1fr); }  
 .gen-search-image img { height: auto; width: 100%; }
.gen-pagi { float: left; width: 100%; padding: 13px 2px 18px; position: relative; box-shadow: 0 1px rgba(255, 255, 255, 0.01) inset; background: #1e212b; }
.gen-pagi-area { margin: auto; display: table; } 
.gen-pagi a { display: block; position: relative; float: left; padding: 0px 3px 6px 3px; text-align: center; text-decoration: none; height:32px; width:20px; font-size:13px; line-height:34px; cursor:pointer; transition: .27s; } 
.gen-pagi a:hover { color:#e989aa; }
.gen-pagi-current { color: #7bb2f7 !important; }
.gen-pagi .icon-left-dir, .gen-pagi .icon-right-dir-1 { top:1px; } 
.gen-no-results { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; background: rgb(32, 36, 45); }
.gen-no-results img { width: 100px; margin-top: 13px; }
.gen-no-results-label { padding: 6px 0 0; font-size: 13px; }

/* 2nd Panel Top Menu */
.gen-2-top { font-size: 13px; height: 36px; position: relative; min-width:320px; width: 100%; border-left: 1px solid rgba(0, 0, 0, 0.24); border-bottom: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 1px 0 rgba(255, 255, 255, .6%) inset; background:#191c24; } 
.gen-2-top-l {float: left; padding: 11px 6px 11px 11px; font-size: 11px; color: #eee; } 
.gen-2-top-btn { position:relative; float:right;padding:12px 12px 10px;box-shadow:1px 0 rgb(255 255 255 / 1%) inset;border-left:1px solid rgb(8 10 14 / 46%); width:44px; text-align:center; font-size:11px; height:36px; overflow:hidden; transition:.27s;}
.gen .gen-2-top-plus { font-size: 14px; line-height: 12px; text-shadow: 0 0 #fff; }
.gen .gen-2-top-up { font-size: 15px; line-height: 11px; text-shadow: 0 0 #fff; }
.gen .call-gen-search i { transform: scaleX(-1); display: block; }
.gen-2-top-btn .icon-brush-1 { font-size:10px; }
.gen-2-top-btn:hover { text-decoration:none; color: #82c1dd; cursor:pointer; }
.gen-2-top-btn input { left: -30px; bottom: 0; font-size:0; width: auto; }
.gen-2-top-btn-aura { min-width:44px; line-height: 35px; width: auto; padding: 0px 11px 0 10px; font-size: 11px; }
.gen-2-top-btn-aura i { font-size: 10px; padding-right: 3px; color: #fde0a8; }
.gen-2-top-btn-aura:hover { color: #fde0a8; }

/* 2nd Panel Top Menu Edit/Delete/Download View */
.gen-2-top-l-selector-counter { font-family: effrasemi; color: #f9bdce; color: #fde0a8; color: #a6dba4; }
.gen-2-top-selector .gen-2-top-btn { width:auto; }
.gen-2-top-selector .gen-2-top-btn:hover { color: #a0d4ec; }
.gen-2-top-check-btn input { cursor: pointer; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; }
.gen-2-top-check { width: 10px; height: 10px; float: left; border: 1px solid #4d556f; background: rgb(50, 55, 68); border-radius: 3px; position: relative; cursor: pointer; margin-right: 4px; top: 1px; }
.gen-2-top-check-btn input:checked + div i { color: #fff; text-align: center; font-size: 5px; display: block; position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; border-radius: 3px; line-height: 9px; background: #6d89dd; }

/* Color Panels Somewhat old */
.geno { text-align: left; padding: 11px 12px 10px; position: relative; font-size: 14px; width: 100%; }
.geno-text { font-size: 13px; font-family:effrasemi; max-width: 100%; width: 100%; padding-bottom: 5px; }
.geno-data { font-size: 11px; padding: 3px 0; clear: both; }
.geno-dot { width: 2px; height: 2px; display: inline-block; background: #eee; position: relative; top: -3px; margin: 0 1px 0 2px; border-radius: 100%; }
.geno-edit { padding: 15px 12px 10px; margin: -15px -12px -10px; cursor:pointer; }
/* .geno-right { float: right; } */
.geno-right .geno-text { border-radius: 6px 0 6px 6px !important; background: #0a1012 !important;; float: right !important;; text-align: left !important;; }
.geno-right .geno-data { text-align: right !important;; }
.geno-drop { position: absolute; background: #4d3b53; background: #2f4784; padding: 0; border-radius: 0 6px 6px 6px; margin-top: -11px; transition: .27s; z-index: 5; overflow:hidden; }
.geno-drop div { padding: 9px 10px 10px; font-size: 12px; }
.geno-drop div:hover { color: #fff; cursor:pointer; }
.geno-drop div:nth-child(odd) { background: #364e8ca3; }
.geno-right .geno-drop { right:0; border-radius: 6px 0 6px 6px; }
.geno-img { max-width: 330px; padding: 0; background: rgb(0 0 0 / 20%); border-radius: 6px; margin-bottom: -1px; display: block; clear: both; overflow:hidden; cursor:pointer; } 
.geno-img img { width: 100%; border-radius: 4px; }
.image-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 330px; margin: auto; }
.image-grid img { width: 100%; height: auto; }
.geno-do { max-width: 290px; margin: 10px -4px -1px; overflow: auto; }
.geno-do-btn { float: left; width: 19%; padding: 0 3px 6px; text-align: center; }
.geno-do-btn span { font-size: 11px; color: #dcdee7; clear: both; background:#32384a; padding: 7px 8px; display: block; border-radius: 4px; text-shadow: 0 0 rgb(255 255 255 / 45%); }
.geno-do-btn span:hover { background:#353c4f; cursor:pointer }
.geno-do-btn span i { text-shadow:none; }
.geno-do-v2 .geno-do-btn { width:auto; font-family:effra; } 
.geno-do-v2 .geno-do-btn span { padding: 8px 16px; }
.geno-do-v2 .geno-do-btn-zoom span { padding-left: 14px; padding-right: 14px; }
.geno-generating .geno-text { border: 1px solid #0c0f10; padding: 15px 12px; font-family: effra; float: left; border-radius: 0px 6px 6px 6px; background: rgb(10 16 18 / 51%); }
.geno-generating .geno-data { }
.geno-bar { background: #36414f; height: 4px; position: relative; clear: both; border-radius: 2px; margin-top: 8px; max-width: 35%; opacity: 85%; min-width: 225px; } 
.geno-bar-progress { position: absolute; left: 0; top: 0; bottom: 0; background: #56c4fb; width: 25%; border-radius: 3px 0 0 3px; } 	 
	 
.geno-color .geno-text { border: 1px solid #952323; padding: 10px 12px; font-size: 14px; max-width: 100%; font-family:effra; float: left; border-radius: 0px 6px 6px 6px; background: #0a1012; } 
.geno-color-title { font-style: italic; color: #ef5656; } 
.geno-color-l { padding: 5px 7px 4px 0; float: left; } 
.geno-color-r { float: right; padding: 5px 0 4px 7px; }
.geno-color-top-words { font-size: 12px; padding: 3px 0; color: ##9f9f9f; }
.geno-color-options { margin: auto; border-top: 1px solid rgb(0 0 0 / 45%); margin-top: 6px; box-shadow: 0 1px rgb(255 255 255 / 1%); font-size: 12px; color: #e3e3e3; }
.geno-color-options span:hover, .geno-color-options a:hover  { color: #7f97dd; color: #89a0e6; cursor:pointer; transition: .27s; text-decoration:none; }  
.geno-color-bottom-words { font-size: 10px; padding: 7px 0 0px; color: #9f9f9f; margin: auto; border-top: 1px solid rgb(0 0 0 / 45%); margin-top: 6px; box-shadow: 0 1px rgb(255 255 255 / 1%) inset; }
.geno-color-separate { font-size: 11px; margin: auto; margin-top: 4px; font-style: italic; }
.geno-yellow .geno-text { border: 1px solid #a57335; }
.geno-yellow .geno-color-title { color: #d9a462; }
.geno-yellow .geno-color-top-words { color: #b1a98f; }
.geno-blue .geno-text { border: 1px solid #5287b1; }
.geno-blue .geno-color-title { color: #6cb9dd; }
.geno-blue  .geno-color-top-words { color: #abbfcf; }

/* Old Prompt Design */
.gen .mes-2-send { background:None; box-shadow:none; color: #8dd0ff; } 
.gen .mes-2-textarea-pad { padding-right:50px; padding-left: 27px; }
.gen-textarea-upload { position: absolute; top: 13px; left: 24px; background: rgb(153 167 199 / 20%); border-radius: 100%; height: 22px; width: 22px; text-align: center; line-height: 22px; font-size: 14px; color: rgb(208 214 239 / 66%); transition: .3s; }
.gen-textarea-upload:hover { background: rgb(153 167 199 / 26%); color: rgb(208 214 239 / 76%); }
.gen-textarea-upload input { font-size: 0; line-height: 0; }

/* Jump To Notice, drop files design, New creation red line */
.gen-jump-notice { position: absolute; left: 15px; right: 15px; top: -21px; height: 30px; font-size: 11px; padding: 4px 7px; border-radius: 5px 5px 0 0; background: rgb(53, 60, 81); color: #a2a9bf; }
.gen-jump-notice-r { float: right; padding: 2px 8px; margin: -2px -8px; cursor:pointer; }
.gen-jump-notice-r i { position:relative; top:1px; }
.gen-top-notice { position: absolute; left: 0px; right: 0px; top: 0px; height: 26px; font-size: 11px; padding: 6px 10px; background:rgba(63, 32, 43, 0.98); color: #e9dce1; z-index: 10; border-bottom: 1px solid #1c0b1180; } 
.gen-top-notice-r { float: right; padding: 5px 10px; margin: -5px -10px; cursor:pointer; }
.gen-top-notice-r i { font-size: 7px;top: -1px;padding-right: 1px; }
.gen-drop-files { -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 25; text-align: center; } 
.gen-drop-files span { top: 49%; position: relative; line-height: 0; font-size: 21px; opacity: .95; color: #ffffff; text-shadow: -1px 0 #000, 0 2px #000, 1px 0 #000, 0 -1px #000; }
.gen-drop-files i { clear: both; display: block; top: -38px; font-size: 50px; }
.gen-new-wrap { margin: 2px 14px; margin: -8px 0 6px; height: 25px; }
.gen-new { margin: auto; display: inline-block; position: relative; height: 1px; background: #c33a3a; width: 100%; }
.gen-new-label { text-align:center; background:#c33a3a; margin:auto; display:inline-block; padding:0 4px; border-radius:0 2px 2px 0; font-size:9px; top:-6px; right:0; position:absolute; font-family:effrasemi; height: 12px; }
.gen-new-edge { border-top: 6px solid transparent; border-bottom: 6px solid transparent; position: absolute; width: 1px; border-right: 4px solid #c33a3a; margin: auto; top: 0px; left: -4px; }

@media (min-width : 981px) { .gen .mes-1-top { padding: 10px 8px; font-size: 13px; height: 36px; } }

@media (max-width : 1500px) { .gen .mes-1 { width:20%; } .gen .mes-2 { width:80%; } }
@media (max-width : 1400px) { .gen-search-row { padding: 10px 11px; } .gen-search-img { width: 100%; } .gen-search-image { width: 80%; } }

@media (max-width : 1280px) { 
.gen .mes-1 { width:22%; } .gen .mes-2 { width:78%; } 

.gen .mes-2-textarea-pad { padding-right:48px; padding-left: 26px; }
.gen-textarea-upload { top: 12px; height: 20px; width: 20px; line-height: 21px; } 
.gen-pagi a { font-size:12px; font-family:effrasemi; width:23px; } 
}
@media (max-width : 1180px) { .gen .mes-1 { width:26%; } .gen .mes-2 { width:74%; } }

@media (max-width : 980px) {
.gen .gen-settings-view { height: calc(100vh - 83px); height: calc(100dvh - 83px); } 
.gen .gen-search-scroll { height: calc(100vh - 140px);height: calc(100dvh - 140px); }
.gen-hide .mes-1-row-scroll { height: calc(100vh - 75px) !important; height: calc(100dvh - 75px) !important; }
.gen-hide .gen-settings-view { height: calc(100vh - 38px) !important; height: calc(100dvh - 38px) !important; }
.gen .mes-1-top { padding: 11px 9px;  font-size: 13px;  height: 38px; } 
.gen-set-back { display:block; height: 38px; padding: 12px 12px 6px 12px; line-height: 15px; border-left: 1px solid rgba(8, 10, 14, 0.42); }
.gen .mes-1-search input { border-bottom:1px solid rgba(12, 13, 18, 34%); border-left:0; border-right:0; font-size: 11px; padding: 9px 33px 10px 10px; height: 37px; }
.gen .mes-1-search i { top: 13px; font-size: 10px; }
.gen-search-menu { border-bottom-color: rgba(12, 13, 18, 39%); border-top-color: rgb(15 18 24 / 52%); }
.gen .mes-2 { width:100%; box-shadow: 0 1px rgb(255 255 255 / 1%) inset; }
.gen .gen-2-top { box-shadow: 0 1px rgb(255 255 255 / 1%); border-bottom: 1px solid rgba(8, 10, 14, 0.3); border-left:0; }
.gen-2-top-btn { border-left: 1px solid rgba(8, 10, 14, 0.4); }
.gen .mes-2-chat { border:0; }
.gen-settings-view-show .mes-1-search input { background: #252833; border-bottom: 1px solid rgba(12, 13, 18, 43%); border-top: 1px solid rgba(12, 13, 18, 59%);}
.gen-hide .gen .mes-2-chat { height: calc(100vh - 37px); height: calc(100dvh - 37px); }
.gen-hide .head-mobile-padding { display:none !important; }

.gen-set-viewing .mes-2 { display:none;  } /*-- SHOW --*/
.gen-set-viewing .mes-1 { width:100%; display:block; background: rgb(255 255 255 / .5%); }
.gen-set-title { font-size: 12px; }
.gen-set-btn span { padding:8px; }
.gen-set-btn span li { padding:8px 6px; }
.gen-set-btn { width:15%; }
.gen-set-x2 .gen-set-btn { width: 20%; }
.gen-set-models .gen-set-btn { width:33.3333333%; }
.gen-set-row { padding-right:12px; border-bottom: 1px solid rgba(0, 0, 0, 0.16); }

.gen .gen-search-view .mes-1-row-scroll { background: rgb(30, 33, 43); } 
.gen .gen-search-scroll { padding:0; } 
.gen .gen-search-body { -webkit-column-gap: 0; column-gap: 0; -webkit-column-count: 3; column-count: 3; display: block; padding: 24px 5px 12px; background: rgb(32, 36, 45); background: rgb(34, 38, 47); overflow:hidden; } 
.gen-search-row { padding: 10px 5px 0; border:0; box-shadow:none; break-inside: avoid; } 
.gen-search-delete { padding: 12px 5px 14px 16px; font-size: 7px; }
.gen-pagi { box-shadow: 0 1px rgba(255, 255, 255, .5%), 0 1px rgba(255, 255, 255, 1%) inset; border-top: 1px solid rgba(8, 10, 14, 0.24); border-bottom:0; padding: 24px 2px 32px; }
.gen-no-results img { width:108px; margin-top: 6px; }

.gen .mes-2-textarea-pad { padding-right:43px; padding-left: 22px; }
.gen-textarea-upload { font-size: 13px; left: 20px; top: 11px; height: 18px; width: 18px; line-height: 19px; }
.gen-jump-notice { left: 12px; right: 12px; top: -19px; height: 27px; font-size: 9px; padding: 4px 7px; }
}
@media (max-width : 800px) {
.gen .mes-1-top { box-shadow: 0 1px rgb(255 255 255 / .6%) inset; }
.gen .mes-2-chat-bg {  width: 125%;  height: 125%; }
.gen { margin-top: 0 !important; }
.gen .mes-1-row-scroll, .gen .gen-search-scroll { height: calc(100vh - 120px); height: calc(100dvh - 120px); }

.gen .gen-2-top { box-shadow: 0 1px rgb(255 255 255 / 1%), 1px 1px rgb(255 255 255 / 1%) inset; }
.gen .mes-2-chat { height: calc(100vh - 82px); height: calc(100dvh - 82px); box-shadow: 0px 1px rgba(255, 255, 255, .6%) inset; }
.gen .mes-convo { padding-bottom:15px; }

.gen-set-btn span { padding:7px 8px 6px; }

.gen-top-notice { height: 23px; font-size: 10px; padding: 5px 8px; }
.gen-top-notice-r { padding: 5px 8px; }

.geno { padding: 8px 12px 8px; }
.geno-text { font-size: 13px; font-family:effra; max-width: 80%; }
.geno-data { font-size: 10px; padding: 2px 0; }
.geno-color-options { font-size:11px; }
.geno-color-top-words { font-size:12px; }
.geno-color-bottom-words { font-size:10px; }
.geno-color-separate { font-size: 10px; }
.geno-color-title { font-size: 14px; }
.geno-do-btn span { font-size: 11px; padding: 7px 8px; }
.geno-do-v2 .geno-do-btn span { padding: 7px 14px; } 
.geno-do-v2 .geno-do-btn-zoom span { padding-left: 12px; padding-right: 12px; }
}
@media (max-width : 640px) {
.gen .mes-1-top { font-size: 12px; line-height: 16px; }
.gen-set-back { height: 38px; padding: 11px 12px 6px 12px; }

.gen-set-btn { width:25%; }
.gen-set-x2 .gen-set-btn { width: 25%; }
.gen-set-models .gen-set-btn { width: 33.333333%; }
.gen-set-title, .gen-set-btn span { font-size: 11px; }
.gen-set-models .gen-set-btn { width:50%; }

.gen-search-top { color: #f596b7; font-size: 9px; } .gen-search-text { font-size: 10px; line-height: 11px; margin-bottom: 4px; }
}
@media (max-width : 600px) {
.gen-jump-notice { left: 10px; right: 10px; top: -18px; padding: 3px 6px; }
.gen .mes-2-textarea-pad { padding-left:0; }
.gen-textarea-upload { left: 20px; display:none; }
}
@media (max-width : 540px) {
.geno-text { max-width:100%; font-size: 12px; } 
.geno-img { max-width:100%; }
.geno-color .geno-text { max-width:90%; }
.geno-drop div { font-size:11px; }
}
@media (max-width : 480px) {
.gen .gen-search-body { -webkit-column-count: 2; column-count: 2; padding: 24px 5px 10px; }

.gen-2-top-btn { font-size:10px; }
.gen .gen-2-top-up { font-size: 14px; }

.geno-color-top-words { font-size: 11px; }
.geno-color-bottom-words { font-size: 9px; }
.geno-color-separate { font-size: 9px; }

.gen-set-models .gen-set-btn { width: 50%; }
}
@media (max-width : 400px) { .gen .mes-convo { padding-bottom:15px; } .gen-set-models .gen-set-btn { width:100%; } }
@media (max-width : 349px) {
.gen-2-top-l { font-size: 10px; padding: 11px 2px 11px 11px; }
.gen-2-top-btn { width: 38px; font-size: 9px; }
.gen .gen-2-top-plus { font-size: 13px; line-height: 13px; } 
.gen .gen-2-top-up { font-size: 13px; line-height: 12px; }
.gen-2-top-btn .icon-brush-1 { font-size: 9px; top: 1px; }
.gen-2-top-text { font-size: 10px; }
}
@media (max-width : 339px) {
.gen-2-top-btn { width: 36px; }
}

/* 1st panel drop down */
.gen-drop-wrap { float: left; width: 100%; display: flex; flex-wrap: wrap; gap: 7px; justify-content: space-between; margin:19px 0 20px; }
.gen-drop { min-width: auto; flex: 1 1 calc(33.33% - 10px); height: 30px; font-size: 13px; padding: 0px 10px; position: relative; z-index:55; background: #2f3343; border-radius: 4px; cursor: pointer; }
.gen-drop-span { font-size: 11px; left: 12px; line-height: 30px; text-align: left; float: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: absolute; right: 22px; }
.gen-drop-i { right: 1px; font-size: 12px; top: 7px; float: right; line-height: 18px; transition: .27s; }
.gen-drop ul { position: absolute; left: 0; right: 0; top: 30px; z-index: 25; border-radius: 0 0 5px 5px; overflow-y: auto; max-height: 280px; text-align: left; transition: .27s; display: none; background: #383d4f; font-size: 12px; border-top: 1px solid #14161e57; box-shadow: 0 1px #ffffff03; padding: 4px; }
.gen-drop li { padding: 1px 8px 1px; line-height: 29px; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 11px; border-radius: 4px; }
.gen-drop li:hover { background: #3d4257; }
.gen-drop:hover .gen-drop-i, .gen-dropped .gen-drop-i { color: #6dc5f2; }
.gen-drop.gen-dropped { border-radius: 5px 5px 0 0; }
.gen-dropped ul { display: block; } 

/* 1st panel Prompts */
.gen-set-prompt-wrap .gen-set-title { padding-bottom: 4px; }
.gen-set-prompt-wrap-2 .gen-set-title { float: left; margin-top: 13px; }
.gen-set-prompt { margin-bottom: 4px; float: left; position: relative; width: 100%; background: #2c313f; border-radius: 4px; letter-spacing: .3px; }
.gen-set-prompt textarea { background: #2c313f; min-width: 100%; max-width: 100%; min-height: 60px; padding: 7px 11px 10px; margin: 0px; border-radius: 5px; font-size: 12px; resize: none; overflow-y: hidden; line-height: 17px; color: #ced1d9; color: #dbdde3; letter-spacing: .1px; }
.gen-set-triggers { float: left; border-top: 1px solid rgba(29, 32, 40, 0.36); box-shadow: 0 1px rgba(255, 255, 255, 0.01) inset; width: 100%; margin-top: -1px; margin-bottom: 2px; }
.gen-set-trig-title { font-size: 10px; font-family: effrasemi; color: #7e859b; position: relative; color: #fde0a8; color: #cccbdf; padding-right: 4px; margin-bottom: 2px; display:none; } 
.gen-set-trig { font-size:9px; float: left; color: #8f94a5; margin: 0 4px 4px 0; background: #2c313f; padding: 3px 9px 4px 7px; color: #9fa4b0; border-radius: 4px; cursor: pointer; letter-spacing: .2px; transition: .27s; font-family: effrasemi; color: #8f94a5; }
.gen-set-trig-copy-wrap { position: relative; cursor: pointer; float: right; padding-left: 5px; top: -3px; }
.gen-set-trig-copy { width: 3px; height: 3px; display: inline-block; position: relative; left: 0px; }
.gen-set-trig-copy::before, .gen-set-trig-copy::after { content: ""; position: absolute; border: 1px solid #6b85c6; background: #2c313f; color: #708cd0; border-color: #708cd0; background: #2c313f; border-color: #6c7488; }
.gen-set-trig-copy::before { width: 100%; height: 100%; top: 0px; left: -2px; z-index: 1; }
.gen-set-trig-copy::after { width: 3px; height: 3px; top: 2px; left: 0px; z-index: 2; }
.copy-clicked .copy-text-1 { display:none; }
.copy-clicked .copy-text-2 { display:inline; }
.copy-clicked .gen-copy-text-2 { color: #a3d7ae; }
.copy-clicked .gen-copy-text-2 i { font-size: 6px; top: -1px; padding-right: 1px; }

/* 1st panel Photos */
.gen-set-photo { float: left; position: relative; }
.gen-set-photo .p-no-photo { width: 100px; height: 100px; text-align: center; float: left; margin: 0; padding: 0; border: 3px solid #3d4153; background: #2f3343; border-radius: 5px;}
.gen-set-photo .p-no-photo-icon { font-size: 26px; color: #494e63; top: 33%; }
.gen-set-photo .p-no-photo-loading .spinner { width: 32%; top: 32%; margin: auto; border-width:2px; }
.gen-set-photo .p-img { margin:0; text-align: center; padding:0; }
.gen-set-photo .p-img img { width: 100px; height: 100px; text-align: center; float: left; margin:4px 0 0; padding: 0; border: 3px solid #3d4153; background: #2f3343; border-radius:5px; }
.gen-set-photo .p-img-delete { padding: 4px 4px 7px 7px; position: absolute; cursor: pointer; right: 2px; top: 6px; z-index: 5; } 
.gen-set-photo .p-img-delete i { background: rgba(0, 0, 0, 0.31); border-radius: 3px; font-size: 6px; width: 15px; height: 14px; display: block; line-height: 14px; text-align: center; transition: .27s; }
.gen-set-photo .p-img-delete:hover i { background: rgba(0, 0, 0, 0.39); }
.p-img-r-info { margin-left: 109px; color: #767b8e; color: #9398aed4; letter-spacing: .2px; } 
.p-img-r-info-top { font-size: 11px; margin-bottom: 1px; margin-top: 10px; color: #eee; } 
.p-img-r-info-text { font-style: italic; font-size: 10px; }

/* 1st panel Models */
.gen-mo-wrap { float: left;border-radius: 7px;width: 100%; }
.gen-mo { border: 0; padding: 5px 0 10px; float: left; width: 100%; position: relative; } 
.gen-mo-img { width: 36px; border-radius: 5px; float: left; } 
.gen-mo-img img { width: 100%; border-radius: 4px; } 
.gen-mo-l { padding-left: 43px; } 
.gen-mo-title { font-size: 12px; font-family: effrasemi; position: relative;  margin-top: 2px; } 
.gen-mo-ver { font-size: 10px; color: #878e9f; }

.gen-re { float: left; width: 100%; padding: 7px 7px 7px 10px; clear: both; color: #eee; border-radius: 4px; background: #2f3544c9; }
.gen-re-l { float: left; line-height: 16px; } 
.gen-re-title { font-family: effrasemi; font-size: 11px; }
.gen-re-title-label { padding-left: 1px; padding-right: 4px;   color: #fde0a8; }
.gen-re-type { color: #aebeff; color: #a6e39d; } 
.gen-re-lora { color: #aebeff; }
.gen-re-embedding { color: #a6e39d; }
.gen-re-dora { color: #f4afb5; }
.gen-re-lycoris { color: #ffb78b; }
.gen-re-r { float: right; } 
.gen-re-arrow { float: right; margin-left: 5px; width: 27px; font-size: 13px; height: 21px; position: relative; text-align: center; color: #eee; padding: 4px 8px; line-height: 13px; border-radius: 4px; display: inline-block; background: #383f53; transition: .27s; cursor:pointer; } 
.gen-re-arrow i { display:block; }
.gen-re-add { font-size: 10px; color: #d9dfee; padding: 4px 8px; border-radius: 4px; position: relative; transition: .27s; font-family: effrasemi; float: right; background: #383f53;letter-spacing: .25px; cursor:pointer; }
.gen-re-add i { font-size: 12px; top: 0px; margin-bottom: -6px; float: left; padding-right: 2px; }
.gen-re-arrow:hover, .gen-re-add:hover { background: #3b4257; }

.gen-resource-list { transition: max-height 0.3s ease-out; display: block; float:left; width:100%; }
.gen-re-drop-open .gen-re { border-radius: 4px 4px 0 0; border-bottom: 1px solid rgba(0, 0, 0, 0.19); box-shadow: 0 1px rgb(255 255 255 / .6%);}
.gen-re-row { position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 0 1px rgb(255 255 255 / .6%); float: left; width: 100%; padding: 13px 10px 13px; background: #2f354447;background:#262b37; } 
.gen-re-row:last-of-type { border:0; box-shadow:none; border-radius: 0 0 4px 4px; }
.gen-re-row-title { font-size: 11px; font-family: effrasemi; padding-right:22px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 
.gen-re-row-ver { font-size: 10px; color: #878e9f; margin-bottom: 4px; }
.gen-re-row-input-wrap { width: 38px; float: left; } 
.gen-re-row-input-wrap .gen-re-row-input { background: #32384a; padding: 7px 11px; width: 150px; border-radius: 4px; width: 100%; font-size: 13px; text-align: center; font-size: 10px; padding: 4px; } 
.gen-re-row-r { position: absolute; right: 0; top: 0px; } 
.gen-re-row-btn { padding: 8px 8px; cursor: pointer; } 
.gen-re-row-btn:hover i { background: ##363c50; }
.gen-re-row-btn i { background: #32384a; color: #d9dfee; padding: 4px 6px; display: block; border-radius: 4px; position: relative; transition: .27s; font-family: effrasemi; font-size: 6px; }
.gen-re-remix { float: left; width: 100%; background: #262b37; background: #2c313f; margin:7px 0 4px; overflow: hidden; border-radius: 4px; letter-spacing: .25px; line-height: 12px; } 
.gen-re-remix-l { width: 72px; float: left; } 
.gen-re-remix img { width: 100%; border-radius: 4px 0 0 4px; cursor: pointer; } 
.gen-re-remix-r { margin-left: 81px; padding-right: 6px; } 
.gen-re-remix-title { font-size: 12px; font-family: effrasemi; margin: 9px 0 1px; } 
.gen-re-remix-descr { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; height: 38px; overflow: hidden; }
.gen-re-remix-resources-dropped { background: #262b37; }

/* 1st panel Drag Bar */
.gen-drag-wrap { margin: 14px auto 0; position: relative; user-select: none; margin-left: 49px; }
.gen-drag-bar { width: 100%; height: 4px; background: #3e4559; border-radius: 6px; position: relative; cursor: pointer; }
.gen-drag-fill { height: 100%; background: #4464b5; width: 20%; position: absolute; left: 0; border-radius: 6px; z-index: 5; }
.gen-drag-circle { width: 12px; height: 12px; background: #3d5aa1; border: 2px solid #becffc; border-radius: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); left: 20%; transition: left 0.1s ease-out; z-index: 10; }
.gen-drag-counter { position: absolute; top: -23px; left: 20%; background: #4464b5; color: white; padding: 1px 4px; border-radius: 4px; font-size: 10px; display: none; transform: translateX(-50%); }

/* 1st panel Seed Switch */
.gen-adv-switch { background: #32384a; float: left; height: 30px; width: 50%; padding: 5px; text-indent: 3px; border-radius: 4px; } 
.gen-adv-switch span { line-height: 21px; font-size: 11px; text-align: center; width: 50%; display: block; float: left; height: 20px; border-radius: 4px; cursor:pointer; } 
.gen-adv-switch-selected { background: #414860; text-indent: 0; }
.gen-adv-switch:hover { }
.gen-adv-btns { float: right; margin: -3px 0 0 0; } 
.gen-adv-btn { font-size: 10px; padding: 3px 5px; border-radius: 3px; position: relative; transition: .27s; font-family: effrasemi; float: left; background: #32384a; cursor: pointer; margin-left: 3px; color: #d9dfee; letter-spacing: .25px; }
.gen-adv-btn:hover { background: #373e51; }
.gen-adv-btn-selected { background: #354e8c; }
.gen-adv-input-wrap { width: 50%; float: right; position: relative; padding-left: 8px; }
.gen-adv-input-wrap .gen-adv-input { padding: 9px 24px 10px 10px; text-align: left; border-radius: 4px; width: 100%; background: #32384a; height: 30px; font-size: 11px; cursor:pointer; } 
.gen-adv-input-i { position: absolute; font-size: 6px; right: 6px; top: 8px; width: 14px; height: 14px; line-height: 14px; background: #434a63; border-radius: 100%; text-align: center; color: #d1d1d5; cursor: pointer; }
.gen-adv-input-i:hover { filter: brightness(1.05); }

/* 1st panel Priority Jobs */
.gen-set-btn-aura { color: #fde0a8; display: inline;padding: 0 1px; }
.gen-set-btn-aura i { font-size: 9px;padding-left: 2px;position: relative; }
.gen-set-claim-aura { display: block; border: 1px solid; font-size: 10px; font-family: effrabold; color: #b7b2e1; letter-spacing: .25px; cursor: pointer; position: relative; width: 100%; text-align: center; padding: 4px; clear: both; border-radius: 4px; margin-top: 2px; float: left; background: #15181f5c; }
.gen-set-claim-aura i {  }
.gen-set-claim-aura-red { cursor: pointer; width: 100%; border-radius: 4px; float: left; background: #5b2f40; color: #eee; font-family: effra; padding: 6px; font-size: 11px; text-align: center; }
.gen-set-claim-aura-red i { font-size: 9px; color: #fbdfa8; padding-right: 1px; }

/* 1st panel Generation Button */
.gen-create-wrap { padding:6px 6px 6px; position:fixed; bottom:0; left:0; right:0; width: 18%; z-index: 10; border-top: 1px solid #1b1e27; border-radius: 9px 9px 0 0; box-shadow: 0 1px #ffffff03 inset; background: #292e3a; } 
.gen-create { font-size: 11px; clear: both; background: #363c4f; color: #eee; padding: 6px 8px; display: block; border-radius: 4px; transition: .27s; cursor: pointer; font-family: effrabold; z-index: 100; letter-spacing: .5px; position: relative; } 
.gen-create-bg { background-size: 100%; background-position: top center; filter: grayscale(1); opacity: 0.04; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: url('/public/images/chat-spiral.png'); } .gen-create-label { padding: 6px 5px; font-size: 15px; color: #fda8a8; color: #fde0a8; text-shadow: 1px 1px #0000001a; } 
.gen-create-aura { position: absolute; right: 43px; color: #dfe1ea; text-align: center; line-height: 32px; height: 34px; top: 4px; min-width: 40px; background: #56607d2e; border-radius: 3px; transition:.27s; } 
.gen-create-aura i { padding-right: 1px; color: #fda8a8; font-size: 12px; color: #fde0a8; } 
.gen-create-reset { position: absolute; right: 5px; top: 4px; width: 34px; text-align: center; line-height: 32px; height: 34px; color: #dfe1ea; background: #56607d2e; border-radius: 3px; transition:.27s; }
.gen-create-aura:hover, .gen-create-reset:hover { background: #56607d3d; }
.gen-create-denied .gen-create-label, .gen-create-que-full .gen-create-label { color: #fda8a8; }
.gen-create-denied .gen-create-aura i, .gen-create-que-full .gen-create-aura i { color: #fda8a8; }
.gen-create-reset .gen-create-label-reset, .gen-create-reset .gen-create-aura i { color: #d7cfff; }
.gen-create-denied .gen-create-label-no, .gen-create-que-full .gen-create-label-queue, .gen-create-reset .gen-create-label-reset { display:block; }
.gen-create-denied .gen-create-label-yes, .gen-create-que-full .gen-create-label-yes, .gen-create-reset .gen-create-label-yes { display:none; }
.gen-aura-cost-drop { border-radius: 4px; background: #323746; font-size: 11px; position: absolute; width: 177px; text-align: left; font-family: effra; z-index: 25; right: -43px; bottom: 52px; line-height: 15px; letter-spacing: 0.4px; box-shadow: 0px 0px 3px #00000012; }
.gen-auto-cost-d-arrow { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #383d4d; position: absolute; bottom: -6px; right: 51px; }
.gen-aura-cost-drop-top { padding: 9px 8px; float: left; line-height: 15px; width: 100%; border-bottom: 1px solid #00000012; border-radius: 4px 4px 0 0; color: #fde0a8; font-family: effrasemi; background: linear-gradient(to left, #2d3342, #363b4a); overflow: hidden; position: relative; }
.gen-aura-cost-drop-top span { background-image: url('/public/images/chat-spiral.png'); background-size: 100%; background-position: top center; filter: grayscale(1); opacity: 0.03; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.gen-aura-cost-drop-row { float: left; width: 100%; border-bottom: 1px solid #30333e66; box-shadow: 0px 1px rgba(255, 255, 255, 0.02) inset; font-size: 11px; }
.gen-aura-cost-drop-row:last-of-type { border-bottom:0; }
.gen-aura-cost-drop-row-l { float: left; width: 72%; padding: 6px 7px; background: #3c425396; }
.gen-aura-cost-drop-row-r { width: 28%; float: right; text-align: right; padding: 6px 7px; border-left: 1px solid #30333ea6; box-shadow: 1px 0px rgba(255, 255, 255, 0.01) inset; background: #3a40516e; height: 100%; }
.gen-aura-cost-drop-row i { padding: 0 !important; font-size: 9px !important; color: #fde0a8 !important; margin: 0 0 0 2px !important; float: right !important; }
@media (max-width : 1500px) { .gen-create-wrap { width:20%; } }
@media (max-width : 1280px) { .gen-create-wrap { width: 22%; } }
@media (max-width : 1180px) { .gen-create-wrap { width: 26%; } }
@media (max-width : 980px) { .gen-create-wrap { width: 100%; } .gen-set-prompt textarea { font-size:11px; line-height: 16px; padding: 8px 11px 10px; } }
@media (max-width : 385px) { .gen-2-top-l-desktop { display:none !important; } .gen-2-top-l-mobile { display:block !important; } }


/* Grid Creation */
.gen .gen-grid-loop { padding: 13px 13px 13px; margin: 0; }
.gen-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap:9px; margin: 0 auto; clear:both; } 
.gen-grid-item { position: relative; cursor:pointer; } 
.gen-grid-item img { width: 100%; height: auto; display: block; border-radius: 4px; } 
.gen-check-wrap { position: absolute; padding: 6px 12px 12px 6px; z-index: 5; cursor:pointer; }
.gen-check-wrap input { cursor: pointer; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; z-index: 5; }
.gen-checkbox { width: 13px; height: 13px; float: left; border: 1px solid #2a2d3754; background: #3d4257; background: rgba(0, 0, 0, 0.31); border-radius: 3px; position: relative; cursor: pointer; }
.gen-check-wrap input:checked + div i { color: #fff; text-align: center; font-size: 6px; display: block; position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; background: #90adff; border-radius: 3px; line-height: 12px; border: 1px solid #fff; }
.gen-grid-info { padding:10px 8px 7px 10px; position: absolute; right: 0; bottom: 0; cursor: pointer; } 
.gen-grid-info i { font-size: 15px; display: block; line-height:13px; text-align:right; transition:.27s; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 5px rgba(0, 0, 0, 0.1); }
.gen-grid-menu { top: 0; right: 0; padding: 6px 7px 12px 13px; position: absolute; cursor: pointer; }
.gen-grid-menu i { font-size: 14px; top:-1px; display: block; line-height: 14px; text-align: center; transition: .27s; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 5px rgba(0, 0, 0, 0.1); }
.gen-grid-menu:active i, .gen-grid-info:active i { top:1px; }
.gen-grid-menu-dropped .gen-grid-menu-drop { display:block; }
.gen-grid-menu-drop { position: absolute; top: 26px; right: 0; background: #2f3546; width: 130px; text-align: left; font-size: 13px; z-index: 10; border: 1px solid #252b3c; border-radius: 4px; right: -5px; border-right-color: #181c26; }
.gen-grid-mdrow-pad { padding: 4px 4px 5px; border-bottom: 1px solid #1a1e2b52; box-shadow: 1px 1px #ffffff03 inset; }
.gen-grid-mdrow-pad-solo { padding-bottom:4px; }
.gen-grid-mdrow-pad:last-of-type { border-bottom: 0; }
.gen-grid-mdrow { padding: 7px 7px; font-size: 11px; display:block; }
.gen-grid-mdrow:hover { background: #383f51; border-radius: 3px; text-decoration:none; }
.gen-grid-mdrow-del-v2 { color: rgb(255, 166, 166); }
.gen-grid-mdrow-del-v2 i { font-size: inherit; top: 0; display: inline; line-height: inherit; text-align: left; transition: .27s; text-shadow: none; margin: 0; padding: 0; }

.gen-item-upload { position: relative; z-index: 5; background: #21252f; overflow: hidden; border-radius: 3px;  } 
.gen-item-upload-img { aspect-ratio:2 / 2; background-size:100% 100%; background-position:top center; background-repeat: no-repeat; filter:grayscale(1); opacity:0.007; background-image: url('/public/images/chat-spiral.png'); } 
.gen-item-upload-bar { background: #3e4559; height: 5px; clear: both; border-radius: 2px; position: absolute; bottom: 0; left: 0; right: 0; } 
.gen-item-upload-bar-progress { position: absolute; left: 0; top: 0; bottom: 0; background: #5075d2; width: 2%; border-radius: 0; } 
.gen-item-text { position: absolute; top: 00; bottom: 0px; left: 0; right: 0; line-height: 0; top: 50%; font-size: 12px; margin-top: -3px; color: #c2cbdf; font-family: effrabold; letter-spacing: .25px; }

@media (max-width : 1680px) { .gen-grid { grid-template-columns: repeat(6, 1fr); } .gen-grid-item-7 { display:none; } }
@media (max-width : 1550px) { .gen-grid { grid-template-columns: repeat(5, 1fr); } .gen-grid-item-5 { display:block; } }
@media (max-width : 1280px) { }
@media (max-width : 1250px) { .gen-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; } .gen-grid-item-7 { display:block; } }
@media (max-width : 1150px) { .gen-grid { grid-template-columns: repeat(3, 1fr); } .gen-grid-item-7 { display:none; } }
@media (max-width : 980px) { .gen-grid { grid-template-columns: repeat(4, 1fr); } .gen-grid-loop { margin: 0 0 65px !important; } .gen-grid-item-7 { display:block; } }
@media (max-width : 800px) { .gen-grid-menu i { font-size: 13px; } }
@media (max-width : 730px) { .gen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .gen-grid-item-7 { display:none; } .gen-check-wrap { padding: 6px 10px 10px 6px; } .gen-checkbox { width: 12px;height: 12px; } .gen-check-wrap input:checked + div i { line-height: 10px; font-size:5px; } .gen-grid-menu i { font-size: 14px; top: 0px; } .gen-grid-menu-drop { right: -15px; border-right-color: #252b3c; } }
@media (max-width : 650px) { .gen-grid-loop { padding: 10px 10px 0 !important; margin: 0 0 60px !important; } }
@media (max-width : 480px) { .gen-grid { gap: 6px; } .gen-check-wrap { padding: 5px 10px 10px 5px; } .gen-checkbox { width: 10px;height: 10px; } .gen-check-wrap input:checked + div i { font-size: 5px; line-height: 8px; } .gen-grid-menu { padding: 2px 5px 12px 12px; } .gen-grid-menu i { font-size: 12px; top:2px; right: 1px; } .gen-grid-info {  padding: 10px 7px 5px 12px; } .gen-grid-info i {font-size: 13px; } .gen-grid-menu-drop { width: 114px; top: 20px; right: -13px; } .gen-grid-mdrow-pad {  padding: 3px 3px 4px; } .gen-grid-mdrow-pad-solo { padding-bottom:3px; } .gen-grid-mdrow { padding: 6px 6px;font-size: 10px; } }
@media (max-width : 480px) { .gen-grid { display: grid; grid-template-columns: repeat(2, 1fr); } .gen-grid-item-7 { display:block; } .gen-grid .gen-grid-item:nth-child(2n) .gen-grid-menu-drop { right:-6px; } }
@media (min-width : 481px) and (max-width : 730px) { .gen-grid .gen-grid-item:nth-child(3n) .gen-grid-menu-drop { right:-6px; } }
@media (max-width : 450px) { .gen-item-text { margin-top: -2px; font-size: 11px; } .gen-item-upload-bar { height: 4px; } }
@media (max-width : 369px) { .gen-grid-menu i { font-size:11px;top:1px; } .gen-grid-info i {font-size:12px; } }
@media (max-width : 350px) { .gen-item-text { font-size: 10px; } }

/* Timeline Creation */
.gen .gen-time-loop { margin: 0;padding: 13px 13px 13px; }
.genie { text-align: left; position: relative; background: #262b35; margin:0 0 12px; border-radius: 5px; box-shadow: 2px 2px 3px #00000017;  border: 1px solid #161920; border:0; }
.genie-top { font-size:11px; border-bottom: 1px solid #0003; border-radius: 4px 4px 0 0; box-shadow: 0px 1px rgb(255 255 255 / .6%); background: #2a2f3b; height: 34px; }
.genie-body { padding: 11px 14px 14px; }
.genie-count { box-shadow: 1px 0 rgba(255, 255, 255, 0.01); border-right: 1px solid rgba(8, 10, 14, 0.19); min-width: 42px; line-height: 34px; padding: 0px 10px 0 10px; font-size: 11px; position: relative; text-align: center; height: 100%; float: left; }
.genie-count i { color: #a0d096; font-size: 10px; padding-right: 3px; }
.genie-count-uploading i { color: #ec9d7e; }
.genie-count-uploading span { color: #ecd4c0; }
.genie-count-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; border-radius: 0; background: #36414f; opacity: 90%; }
.genie-count-bar-progress { position: absolute; left: 0; top: 0; bottom: 0; background: #ec9d7e; width: 25%; }
.genie-time { padding: 0px 11px; float: left; line-height: 34px; }
.genie-drop-btn { float: right; padding: 0; margin: 0; height:100%; line-height:32px; width:52px; text-align:center; box-shadow: 1px 0 rgb(255 255 255 / 1%) inset; border-left: 1px solid rgba(8, 10, 14, 0.19); cursor: pointer; }
.genie-drop { right: 0px; top: 33px; border-radius: 0 0 0 3px; border: 1px solid #1e222be0; background: #303744; border-right: 0; border-top: 1px solid #0000003d; position: absolute; width: 130px; z-index:5; }
.genie-drop-pad { padding: 4px 4px 5px; }
.genie-drop-item { padding: 7px 7px; font-size: 11px; display: block; cursor:pointer; }
.genie-drop-item:hover { background: #383f51; border-radius: 3px; text-decoration: none; }
.genie-drop-item-copy-v2 { color: #fde0a8; }
.genie-drop-item-delete-v2 { color: rgb(255, 158, 158); }
.genie-drop-item-delete-v2 i { margin-right:2px; float: left; }
.genie-aura-btn { box-shadow: 1px 0 rgb(255 255 255 / 1%) inset; border-left: 1px solid rgba(8, 10, 14, 0.19); min-width: 44px; line-height: 35px; width: auto; padding: 0px 11px 0 10px; font-size: 11px; position: relative; float: right; text-align: center; height: 100%; cursor:pointer; }
.genie-aura-btn i { font-size: 10px; padding-right: 3px; color: #fde0a8; }
.genie-aura-btn span { }

.genie .gen-aura-cost-drop { bottom: auto;top: 41px;right: -6px; } 
.genie .gen-auto-cost-d-arrow { border-top: 0; border-bottom: 10px solid #303645; bottom: auto; top: -5px; right: 16px; border-left: 9px solid transparent; border-right: 9px solid transparent; }
.genie-text { font-size: 11px; padding-bottom: 2px; letter-spacing: .3px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; height: 27px; overflow: hidden; margin-bottom: 4px; }
.genie-text-full { height: auto !important; -webkit-line-clamp: 50; line-clamp: 50; overflow: visible; }
.genie-expand { font-size: 10px; width: 70px; border-radius: 3px; margin: -6px 0px 0 -4px; color: #81a3e6; font-family: effrasemi; cursor: pointer; padding: 3px 0px 14px 4px; letter-spacing: .5px; }
.genie-flow { width: 100%; margin-top: -2px; margin-bottom: 8px; float: left; overflow:hidden; height:22px; }
.genie-flow-item { font-size: 10px; float: left; margin: 0 4px 4px 0; background: #2d3241; padding: 3px 7px 4px 7px; border-radius: 4px; letter-spacing: .2px; transition: .27s; font-family: effrasemi; color: #8f94a5; }
.genie-flow-more { padding: 3px 6px 4px; margin: 0 0 0 -4px; cursor: pointer; font-size: 10px; transition: .27s; font-family: effrabold; color: #8f94a5; }
.genie-flow-more-hide { color: #a0d096; } 
.genie-flow-showing { max-height:100%; }
.genie-flow-showing .genie-flow-more-hide { display:block; }
.genie-flow-showing .genie-flow-more-show { display:none; } 
.genie .gen-grid { clear: both; grid-template-columns: repeat(auto-fit, minmax(0, 230px)); }

.gen-feed-spin { display: block; position: relative; margin: auto; margin-top: auto; top: 0; text-align: center; width: 100%; clear: both; background: #00000036; border-radius: 6px; margin-top: 9px; padding: 14px 0; } 
.gen-feed-spin .spinner { width: 34px; }

.gen-promo-view .geno { clear: both; float: left; padding: 0 0 12px; position: relative; }

@media (max-width : 1300px) { .genie .gen-grid { grid-template-columns: repeat(4, 1fr); gap: 7px; } }
@media (max-width : 719px) { .genie .gen-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width : 600px) { .genie .gen-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width : 480px) { .genie-top { font-size: 10px; height: 30px; } .genie-count { font-size:10px; line-height: 28px; min-width: 40px; } .genie-count i { font-size: 9px; } .genie-time { line-height: 28px; padding: 0 10px; } .genie-aura-btn { font-size: 10px; line-height: 28px; min-width: 40px; } .genie-aura-btn i {font-size: 9px; } .genie-drop-btn { line-height:28px; width: 48px; } .genie .gen-aura-cost-drop { top: 37px; } .gen-aura-cost-drop-row { font-size:10px; } .genie-drop { top: 29px; } .genie-text { font-size: 11px; height: 27px; margin-bottom: 3px; } .genie-expand {font-size: 10px; padding: 3px 0px 12px 4px; } .genie-flow-item {font-size: 9px; } }
@media (max-width : 480px) { .gen .gen-time-loop { margin: 0; padding: 12px 12px 12px; } .genie-body { padding: 11px 11px 11px; } }

/* Aura Menu Drop */
.gena-drop-visible { color: #fde0a8 !important; }
.gena-drop { position: absolute; padding: 8px 17px 12px; top: 36px; right: 0; background: #292d39; border-bottom: 1px solid rgba(0, 0, 0, 0.38); border-left: 1px solid rgba(0, 0, 0, 0.38); box-shadow: 1px 1px rgb(255 255 255 / 1%) inset; z-index: 10; left: auto; border-radius: 0 0 0 7px; max-width: 420px; letter-spacing: .3px; }
.gena-section-title { float: left; font-family: effrasemi; font-size: 12px; display: flex; align-items: center; justify-content: center; width: 103%; padding-top: 10px;} 
.gena-section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(200, 200, 220, 0.5), rgba(200, 200, 220, 0.5), rgba(50, 55, 70, 0)); margin-left: 9px; top: 1px; position: relative; }
.gena-section-title-pad { margin-top:10px; }
.gena-section-title-options { padding-bottom: 5px; }
.gena-row { font-size: 12px; padding: 10px 0; float: left; width: 100%; display:block; transition:.25s; cursor:pointer; }
.gena-row:hover { color: #fde0a8; text-decoration:none; }
.gena-row-r { float: right; }
.gena-row-flash { font-size: 12px; color: #fde0a8; color: #ffdfa0; padding-right: 3px; }
.gena-row-guide i { float:right; color: #d4dcee78; }
.gena-row-guide-image i { font-size:11px; }
.gena-tags { padding: 12px 0; float: left; position: relative; width:100%; } 
.gena-tags span { background: #464d66; padding: 3px 7px; font-size: 11px; border-radius: 4px; margin-bottom: 5px; float: left; margin-right: 5px; transition: .17s; cursor: pointer; }
.gena-tag-favorites { float: right !important; }
.gena-tag-right { float: right !important; }  
.gena-tags span :hover { background: #49506a; }
.gena-tag-selected { background: #38609d !important; }
.gena-tag-favorites-selected { background: #42794e !important; }
.gena-info { font-size: 11px;float: left;padding: 9px 10px 12px;margin: 8px -17px -12px;border-top: 1px solid #0000001c;width: auto;background: #0000001c;border-radius: 0 0 0 5px;line-height: 12px; color: #9fa5b7; color: #8f949f;color: #727988; font-style: italic; }
@media (max-width : 420px) { .gena-drop { border-radius:0; } .gena-info { border-radius:0; } }

/* Search History Dropdown */
.gens-search-drop { position: absolute; padding: 12px 12px 18px; top: 36px; right: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.21); box-shadow: 1px 1px rgba(255, 255, 255, 0.01) inset; z-index: 10; letter-spacing: .3px; font-size: 12px; max-width: 100%; width: 100%; background: #292f3c; }
.gens-search-wrap { position: relative; width: 100%; }
.gens-search-wrap input { font-size: 12px; height: 35px; padding: 11px 35px 10px 10px; border: 0; border-radius: 3px; background: #474e6452; text-indent: 0; width: 100%; color: #e1e1e1; }
.gens-search-wrap i { top: 12px; padding: 9px 10px 10px; margin: -10px -10px; font-size: 11px; right: 10px; position: absolute; color: #656b7f; transition: .3s; cursor: pointer; }
.gens-search-wrap i:hover { color: #7e8391; }
.gens-search-btn { background: #464d6694; padding: 5px 7px; font-size: 11px; border-radius: 4px; float: left; margin: 7px 7px 1px 0; color: #e1e1e1; transition: .27s; cursor: pointer; position: relative; }
.gens-search-btn:hover { background: #3d4459; }
.gens-search-btn i { right: auto; left: 0px; font-size: 6px; top: -1px; color: #fde0a8; position: relative; padding-right: 2px; }
.gens-search-info { top: 13px; font-size: 10px; position: relative; transition: .27s; float: left; line-height: 11px; font-style: italic; margin-bottom: 2px; color: #9ca4b5; color: #8991a1; }
.gens-search-active, .gens-searching-state { color: #ffb69f !important; }
@media (max-width : 680px) { .gens-search-wrap input { font-size: 11px; height: 34px; } .gens-search-wrap i { font-size: 10px; } .gens-search-btn { font-size: 10px; padding: 4px 6px; } .gens-search-btn i { font-size: 4px;top: -2px; padding-right: 1px; } .gens-search-info { font-size: 9px; clear: both;top: 0;margin-top: 3px;margin-bottom: 0; } }
@media (max-width : 370px) { .gens-search-drop { padding: 10px 10px 16px; } }

/* Delete Creations Drop */
.gen-2-del-drop { position: absolute; padding: 8px 12px 12px; top: 36px; right: 0; background: #292d39; border-bottom: 1px solid rgba(0, 0, 0, 0.32); box-shadow: 1px 1px rgb(255 255 255 / 1%) inset; z-index: 10; left: auto; border-radius: 0 0 0 5px; max-width: 426px; letter-spacing: .3px; width: 213px; font-size: 12px; border-left: 1px solid rgba(0, 0, 0, 0.32); } 
.gen-2-del-title { padding: 3px 0 6px; font-size: 11px; }
.gen-2-del-btn { font-size: 11px; clear: both; background: #32384a; color: #eee; padding: 6px 8px; display: block; border-radius: 4px; position: relative; transition: .27s; cursor: pointer; margin-bottom: 6px; }
.gen-2-del-btn:hover { background: #343b4e; }
.gen-2-del-btn-delete { background: #994040; margin-bottom:0; }
.gen-2-del-btn-delete:hover { background:#9f4343; }
.gen-2-top-call-delete-viewing { color: #ffb69f !important; }
@media (max-width : 480px) { .gen-2-del-drop { width: 202px; } }
@media (max-width : 350px) { .gen-2-del-drop { width: 191px; } }