common.css 63 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162
  1. @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
  2. html * {
  3. box-sizing: border-box;
  4. /*font-family: 'Noto Sans KR', sans-serif;*/
  5. /*font-family: Helvetica, Arial, sans-serif !important;
  6. color: #333;*/
  7. }
  8. html {
  9. }
  10. html,
  11. body {
  12. margin: 0;
  13. padding: 0;
  14. }
  15. body {
  16. background: #fff;
  17. font-size:.875rem;
  18. }
  19. pre {
  20. padding: 0.75rem;
  21. border: 1px solid #e7eaf3;
  22. background-color: #f8f9fa;
  23. border-radius: 0.35rem;
  24. margin-bottom: 0.5rem;
  25. resize: both;
  26. overflow: auto;
  27. }
  28. tbody input[type="text"] {
  29. width: 100% !important;
  30. }
  31. .text-primary {
  32. color: #45108a !important;
  33. }
  34. .my-app .right .card > #frm {
  35. border-bottom: 1px solid #dfdfdf;
  36. padding: 0.625rem 1.25rem !important;
  37. }
  38. .my-app .input-icon {
  39. cursor: pointer;
  40. right: 5px;
  41. top : 50%;
  42. transform : translatey(-50%);
  43. }
  44. .my-app table {
  45. font-size: 13px;
  46. }
  47. .my-app table a {
  48. color: #2196f3 !important;
  49. }
  50. .my-app input[type=tel], .my-app input[type=time], .my-app input[type=text], .my-app input[type=password], .my-app input[type=search], .my-app input[type=email], .my-app input[type=file], .my-app input[type=url], .my-app input[type=number], .my-app input[type=date] {
  51. width: 250px;
  52. height: 28px;
  53. color: #373737;
  54. border: 1px solid #ccc;
  55. background: #fff;
  56. text-indent: 2px;
  57. transition: all 0.5s;
  58. vertical-align: middle;
  59. box-sizing: border-box;
  60. }
  61. .my-app input[type=tel][readonly], .my-app input[type=text][readonly], .my-app input[type=password][readonly], .my-app input[type=email][readonly],
  62. .my-app input[type=search][readonly], .my-app input[type=tel][disabled], .my-app input[type=text][disabled], .my-app input[type=password][disabled],
  63. .my-app input[type=search][disabled], .my-app input[type=email][disabled] {
  64. background: #eaeaea;
  65. border-color: #c0c0c0;
  66. color: #666;
  67. -webkit-appearance: none;
  68. }
  69. .my-app textarea {
  70. width: 100%;
  71. height: 150px;
  72. font-size: 12px;
  73. color: #373737;
  74. padding: 5px;
  75. border: 1px solid #ccc;
  76. background: #fff;
  77. transition: all 0.5s;
  78. vertical-align: middle;
  79. box-sizing: border-box;
  80. }
  81. .my-app .table-footer {
  82. background: #f8f8f8;
  83. }
  84. .my-app .table-footer input {
  85. padding-right: 10px;
  86. background: #f0f3f6 !important;
  87. font-weight: 400;
  88. color: #212121;
  89. text-align: right;
  90. }
  91. .my-app #auto-slip-no-btn.bg-white {
  92. color: black;
  93. background-color: #e6e6e6 !important;
  94. }
  95. a.bg-white, button.bg-white {
  96. transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  97. }
  98. .c1-a {
  99. color: #0a6ebd;
  100. }
  101. .content-inner {
  102. flex-grow: 1;
  103. }
  104. ol, ul, li, dl, dt, dd {margin: 0; padding: 0; list-style: none;}
  105. .radius-r0 {border-top-right-radius:0!important; border-bottom-right-radius:0!important;}
  106. .radius-l0 {border-top-left-radius:0!important; border-bottom-left-radius:0!important;}
  107. #code-editor-div .CodeMirror {
  108. height: 500px;
  109. }
  110. #create-editor-div .CodeMirror,
  111. #abi-editor-div .CodeMirror {
  112. height: 200px;
  113. }
  114. .mgl_0 {margin-left:0!important;}
  115. .mb_30 {margin-bottom:30px;}
  116. .txt_align_c {text-align:center;}
  117. .wbreak_bw {word-break:break-word;}
  118. .spinner {
  119. margin-right: 5px;
  120. display: none;
  121. }
  122. .content-wrapper {
  123. display: flex;
  124. flex-direction: column;
  125. flex: 1;
  126. position: relative;
  127. min-width: 0;
  128. overflow: visible !important;
  129. }
  130. .typeahead.tt-input {
  131. width: 100% !important;
  132. }
  133. .media-chat .CodeMirror {
  134. border: 1px solid #eee;
  135. height: auto !important;
  136. max-height:400px;
  137. }
  138. .media-chat .CodeMirror-scroll {
  139. height: auto !important;
  140. max-height:400px;
  141. }
  142. .wordwrap {
  143. white-space: pre-wrap;
  144. word-wrap: break-word;
  145. font-size: 87.5%;
  146. }
  147. .card-header-title {
  148. color: #4a4f55;
  149. font-size: 1.875rem;
  150. font-weight: 500;
  151. margin-bottom: 0;
  152. }
  153. /*공통*/
  154. .border-light {border-color: #f0f2f5!important;}
  155. /*테이블*/
  156. .tb_wrap.card {box-shadow:none;}
  157. .table_upper {margin-bottom:10px;}
  158. .table-responsive.card {border:none; box-shadow:none;}
  159. .datatable-scroll-wrap {overflow-x:inherit;}
  160. .sorting_disabled {width:auto!important;}
  161. .table th {padding-top: 15px; padding-bottom: 15px;background:#f8f8f8;}
  162. /*필요없음 지움 .table td {padding-top:15px; padding-bottom:15px;}*/
  163. .table tr:last-of-type td, .table tr:last-of-type th {border-bottom:1px solid #ddd;}
  164. .table td .txt_box {display:inline-block; padding:5px 10px; border:1px solid #ddd; border-radius:3px;}
  165. .dataTables_length {display:none;}
  166. .table-responsive {padding-left: 1px; padding-right: 1px; padding-bottom: 1px;}
  167. .table-row {border-style: hidden; box-shadow: 0 0 0 1px #ddd; border-radius: 0.25rem;}
  168. .table-row th, .table-row td {height:35px; /*height: 3.6em;*/ box-sizing:border-box; vertical-align:middle; white-space: nowrap; text-align: center; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word;-webkit-line-clamp: 2; -webkit-box-orient: vertical; vertical-align: middle;}
  169. .table-row th {padding: 8px 15px; background-color: #45108a; color: #FFF; border-right: 1px #ccc solid; font-weight: 400;}
  170. .table-row td {padding: 1px 5px; border-bottom: 1px #ddd solid; border-right: 1px #ddd solid;}
  171. thead {
  172. position: sticky;
  173. top: 0;
  174. z-index: 1;
  175. }
  176. .table-col, .table-row {width: 100%;}
  177. .table-col {table-layout: fixed;}
  178. .table-col th {width: 150px; background-color:#f5f5f5; padding: 8px 15px; vertical-align: middle !important;}
  179. .tb_wrap.card {margin-top:30px; border:none;}
  180. .dataTables_info {font-size:1.4rem; color:#878787;}
  181. .dataTables_length > label > span:first-child {font-size:1.4rem; color:#666;}
  182. .dataTables_length select {height:35px; font-size:1.4rem;}
  183. .dataTable thead .sorting:before, .dataTable thead .sorting:after, .dataTable thead .sorting_asc:after, .dataTable thead .sorting_desc:after, .dataTable thead .sorting_asc_disabled:after, .dataTable thead .sorting_desc_disabled:after{display:none; font-size:1.6rem;}
  184. .datatable-footer {padding: 30px 1.25rem 0 1.25rem;}
  185. .dtr-inline.collapsed tbody tr td:first-child:before, .dtr-inline.collapsed tbody tr th:first-child:before, .dtr-column tbody tr td.control:before, .dtr-column tbody tr th.control:before {font-size:1.6rem; margin-right:15px;}
  186. .datatable-footer {display:none;}
  187. .table_btm {padding:20px 0;}
  188. .table_btm .dataTables_paginate {margin:0; margin-left:auto;}
  189. /*페이지네이션*/
  190. .pagination {display: flex; margin-left: auto; margin-bottom: 0; padding-left: 0; list-style: none; border-radius: 0.25rem;}
  191. .page-link {position: relative; display: block; border: 1px solid #cad1dc; text-align: center;transition: all ease-in-out .15s;}
  192. .page-item:first-child .page-link {margin-left: 0;}
  193. .pagination-sm .page-link {min-width: 2.12507rem; padding: 0.3125rem 0.75rem; font-size: .8125rem; line-height: 1.6924;}
  194. .pagination-sm .page-item:first-child .page-link {border-top-left-radius: 0.1875rem; border-bottom-left-radius: 0.1875rem;}
  195. .page-item.disabled .page-link {color: #ccc; pointer-events: none; cursor: auto; background-color: #f0f2f5; border-color: #cad1dc;}
  196. .page-item.active .page-link {z-index: 3; color: #fff; background-color: #45108a; border-color: #45108a;}
  197. .pg {display:flex; justify-content:flex-end;}
  198. .pg > div {display:flex; align-items:center;}
  199. .pg > div a {display:flex; align-items: center; justify-content: center; }
  200. .pg > div a i {font-size:2.3rem; color:#878787;}
  201. .pg > div a.active i {color:#000;}
  202. .pg > div a.box {width:30px; height:30px; margin:0 5px; border-radius:5px; font-size:1.6rem; color:#666; line-height:1.6;}
  203. .pg > div a.box.active {background:#d35b2f; color:#fff;}
  204. /*사이드바관련*/
  205. .sidebar-main, .sidebar-main .sidebar-content, .sidebar-secondary, .sidebar-secondary .sidebar-content {left:-40rem;}
  206. .sidebar {
  207. display: -ms-flexbox;
  208. display: flex;
  209. -ms-flex-direction: column;
  210. flex-direction: column;
  211. -ms-flex-negative: 0;
  212. flex-shrink: 0;
  213. width: 18.75rem;
  214. position: fixed;
  215. top: 0;
  216. bottom: 0;
  217. box-sizing: content-box
  218. }
  219. .sidebar-main, .sidebar-secondary {
  220. /*left: -20.625rem;*/
  221. left: -40rem
  222. box-shadow:.25rem 0 1rem rgba(0,0,0,.35)
  223. }
  224. .sidebar-right {
  225. right: -20.625rem;
  226. box-shadow:-.25rem 0 1rem rgba(0,0,0,.35)
  227. }
  228. .sidebar-content {
  229. position: relative;
  230. height: 100%;
  231. display: -ms-flexbox;
  232. display: flex;
  233. -ms-flex-direction: column;
  234. flex-direction: column;
  235. -ms-flex: 1;
  236. flex: 1;
  237. overflow-y: auto;
  238. -webkit-overflow-scrolling: touch
  239. }
  240. .sidebar-section {
  241. position: relative;
  242. -ms-flex-negative: 0;
  243. flex-shrink: 0;
  244. border-top: 1px solid rgba(255, 255, 255, 0.1);
  245. }
  246. .sidebar-section .form-group:last-child {
  247. margin-bottom: 0
  248. }
  249. .sidebar-section-header {
  250. display: -ms-flexbox;
  251. display: flex;
  252. -ms-flex-align: center;
  253. align-items: center;
  254. padding:.75rem 1.25rem
  255. }
  256. .sidebar-section-body {
  257. position: relative;
  258. padding: 1.25rem 1.25rem
  259. }
  260. .sidebar-resize-show {
  261. display: none
  262. }
  263. .btn-sidebar-expand {
  264. display: none;
  265. border-width: 0;
  266. border-radius: 0;
  267. padding:.3125rem
  268. }
  269. .sidebar-mobile-expanded.sidebar-main, .sidebar-mobile-expanded.sidebar-secondary {
  270. left: 0
  271. }
  272. .sidebar-mobile-expanded.sidebar-right {
  273. right: 0
  274. }
  275. .sidebar-mobile-expanded.sidebar-component {
  276. display: block
  277. }
  278. .sidebar-user img {
  279. height: 2.375rem;
  280. width: 2.375rem;
  281. margin-top:.1875rem;
  282. margin-bottom:.1875rem
  283. }
  284. .nav-sidebar {
  285. -ms-flex-direction: column;
  286. flex-direction: column
  287. }
  288. .nav-sidebar .nav-item:not(.nav-item-header):first-child {
  289. padding-top:.5rem
  290. }
  291. .nav-sidebar .nav-item:not(.nav-item-header):last-child {
  292. padding-bottom:.5rem
  293. }
  294. .nav-sidebar .nav-item:not(.nav-item-divider) {
  295. margin-bottom: 1px
  296. }
  297. .nav-sidebar .nav-item:not(.nav-item-divider):last-child {
  298. margin-bottom: 0
  299. }
  300. .nav-sidebar>.nav-item>.nav-link {
  301. font-weight: 400
  302. }
  303. .nav-sidebar .nav-link {
  304. position: relative;
  305. display: -ms-flexbox;
  306. display: flex;
  307. -ms-flex-align: start;
  308. align-items: flex-start;
  309. padding:.75rem 1.25rem;
  310. transition: background-color ease-in-out .15s, color ease-in-out .15s
  311. }
  312. @media (prefers-reduced-motion:reduce) {
  313. .nav-sidebar .nav-link {
  314. transition: none
  315. }
  316. }
  317. .nav-sidebar .nav-link i {
  318. margin-right: 1.25rem;
  319. margin-top:.1875rem;
  320. margin-bottom:.1875rem;
  321. top: 0
  322. }
  323. .nav-sidebar .nav-link .badge {
  324. transition: background-color ease-in-out .15s, border-color ease-in-out .15s
  325. }
  326. @media (prefers-reduced-motion:reduce) {
  327. .nav-sidebar .nav-link .badge {
  328. transition: none
  329. }
  330. }
  331. .nav-sidebar .nav-link.disabled, .nav-sidebar .nav-link.disabled:focus, .nav-sidebar .nav-link.disabled:hover {
  332. background-color: transparent;
  333. opacity: .5
  334. }
  335. .nav-sidebar .nav-item-header {
  336. padding:.75rem 1.25rem
  337. }
  338. .nav-sidebar .nav-item-header>i {
  339. display: none
  340. }
  341. .nav-sidebar .nav-item-divider {
  342. margin:.5rem 0;
  343. height: 1px
  344. }
  345. .nav-item-submenu>.nav-link {
  346. padding-right: 2.75rem
  347. }
  348. .nav-item-submenu>.nav-link:after {
  349. content: "";
  350. font-family: icomoon;
  351. display: inline-block;
  352. font-size: 1rem;
  353. vertical-align: middle;
  354. line-height: 1;
  355. position: absolute;
  356. top:.75rem;
  357. margin-top:.1875rem;
  358. right: 1.25rem;
  359. transition: -webkit-transform .25s ease-in-out;
  360. transition: transform .25s ease-in-out;
  361. transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
  362. -webkit-font-smoothing: antialiased;
  363. -moz-osx-font-smoothing: grayscale
  364. }
  365. @media (prefers-reduced-motion:reduce) {
  366. .nav-item-submenu>.nav-link:after {
  367. transition: none
  368. }
  369. }
  370. [dir=rtl] .nav-item-submenu>.nav-link:after {
  371. content: ""
  372. }
  373. .nav-item-submenu.nav-item-open>.nav-link:after {
  374. -webkit-transform: rotate(90deg);
  375. transform: rotate(90deg)
  376. }
  377. .nav-group-sub {
  378. display: block
  379. }
  380. .nav-item:not(.nav-item-expanded)>.nav-group-sub {
  381. display: none
  382. }
  383. .nav-group-sub .nav-link {
  384. padding:.625rem 1.25rem .625rem 3.5rem!important;
  385. }
  386. .nav-group-sub .nav-group-sub .nav-link {
  387. padding-left: 4.75rem
  388. }
  389. .nav-group-sub .nav-group-sub .nav-group-sub .nav-link {
  390. padding-left: 6rem
  391. }
  392. .nav-group-sub .nav-item-submenu>.nav-link:after {
  393. top:.625rem
  394. }
  395. .nav-scrollspy .nav-item-open .nav-link:not(.active)+.nav, .nav-scrollspy .nav-link.active+.nav {
  396. display: block
  397. }
  398. .nav-scrollspy .nav-link.active:after {
  399. -webkit-transform: rotate(90deg);
  400. transform: rotate(90deg)
  401. }
  402. .nav-sidebar-icons-reverse .nav-link {
  403. padding-right: 3.5rem
  404. }
  405. .nav-sidebar-icons-reverse .nav-link i {
  406. position: absolute;
  407. top:.75rem;
  408. right: 1.25rem;
  409. margin-right: 0
  410. }
  411. .nav-sidebar-icons-reverse .nav-item-submenu .nav-link {
  412. padding-right: 4.5rem
  413. }
  414. .nav-sidebar-icons-reverse .nav-item-submenu .nav-link:after {
  415. right: 3.25rem
  416. }
  417. .nav-sidebar-icons-reverse .nav-group-sub .nav-link {
  418. padding-left: 2.5rem
  419. }
  420. .nav-sidebar-icons-reverse .nav-group-sub .nav-link i {
  421. top:.625rem
  422. }
  423. .nav-sidebar-icons-reverse .nav-group-sub .nav-group-sub .nav-link {
  424. padding-left: 3.75rem
  425. }
  426. .nav-sidebar-icons-reverse .nav-group-sub .nav-group-sub .nav-group-sub .nav-link {
  427. padding-left: 5rem
  428. }
  429. .nav-sidebar-bordered>.nav-item:not(.nav-item-divider) {
  430. margin-bottom: 0
  431. }
  432. .sidebar-dark .nav-sidebar-bordered>.nav-item {
  433. border-top: 1px solid rgba(255,255,255,.1)
  434. }
  435. .sidebar-dark .nav-sidebar-bordered>.nav-item-header {
  436. background-color: rgba(0,0,0,.1);
  437. border-top: 1px solid rgba(255,255,255,.1);
  438. margin: 0
  439. }
  440. .sidebar-light .nav-sidebar-bordered>.nav-item {
  441. border-top: 1px solid #eee
  442. }
  443. .sidebar-light .nav-sidebar-bordered>.nav-item-header {
  444. background-color: #fafafa;
  445. border-top: 1px solid #eee;
  446. margin: 0
  447. }
  448. .sidebar-dark {
  449. background-color: #2d0958;
  450. color: #fff
  451. }
  452. .sidebar-dark .nav-sidebar .nav-link {
  453. color: rgba(255,255,255,.9)
  454. }
  455. .sidebar-dark .nav-sidebar .nav-link:not(.disabled):hover {
  456. color: #fff;
  457. background-color: rgba(255,255,255,.1)
  458. }
  459. .sidebar-dark .nav-sidebar .nav-item>.nav-link.active {
  460. background-color: #28313d !important;
  461. color: #fff
  462. }
  463. .sidebar-dark .nav-sidebar .nav-item-open>.nav-link:not(.disabled), .sidebar-dark .nav-sidebar>.nav-item-expanded:not(.nav-item-open)>.nav-link {
  464. background-color:#34663f;
  465. color: #fff
  466. }
  467. .sidebar-dark .nav-sidebar>.nav-item>.nav-link.active {
  468. background-color: #596782;
  469. color: #fff
  470. }
  471. .sidebar-dark .nav-sidebar .nav-item-header {
  472. color: rgba(255,255,255,.5)
  473. }
  474. .sidebar-dark .nav-sidebar .nav-item-divider {
  475. background-color: rgba(255,255,255,.1)
  476. }
  477. .sidebar-dark .nav-sidebar>.nav-item-submenu>.nav-group-sub {
  478. background-color: rgba(0,0,0,.25)
  479. }
  480. .sidebar-dark .sidebar-section-header {
  481. border-bottom: 1px solid rgba(255,255,255,.1)
  482. }
  483. .sidebar-dark .btn-sidebar-expand {
  484. background-color: #252b36;
  485. border-color: rgba(255,255,255,.1);
  486. color: #fff
  487. }
  488. .sidebar-dark .btn-sidebar-expand:focus, .sidebar-dark .btn-sidebar-expand:hover {
  489. background-color: #2f3745
  490. }
  491. .sidebar-dark .btn-sidebar-expand:not([disabled]):not(.disabled):active {
  492. background-color: #353d4d
  493. }
  494. .sidebar-light {
  495. background-color: #fff;
  496. color: #333;
  497. border-right: 1px solid rgba(0,0,0,.125)
  498. }
  499. .sidebar-light.sidebar-right {
  500. border-right: 0;
  501. border-left: 1px solid rgba(0,0,0,.125)
  502. }
  503. .sidebar-light .nav-sidebar .nav-link {
  504. color: #333
  505. }
  506. .sidebar-light .nav-sidebar .nav-link:not(.disabled):hover {
  507. color: #333;
  508. background-color: #eee
  509. }
  510. .sidebar-light .nav-sidebar .nav-item>.nav-link.active {
  511. background-color: #e9f5fe;
  512. color: #2196f3
  513. }
  514. .sidebar-light .nav-sidebar .nav-item-open>.nav-link:not(.disabled), .sidebar-light .nav-sidebar>.nav-item-expanded>.nav-link {
  515. background-color: #eee;
  516. color: #333
  517. }
  518. .sidebar-light .nav-sidebar>.nav-item>.nav-link.active {
  519. background-color: #eee;
  520. color: #333
  521. }
  522. .sidebar-light .nav-sidebar .nav-item-header {
  523. color: rgba(51,51,51,.5)
  524. }
  525. .sidebar-light .nav-sidebar .nav-item-divider {
  526. background-color: rgba(0,0,0,.125)
  527. }
  528. .sidebar-light .nav-sidebar>.nav-item-submenu>.nav-group-sub {
  529. background-color: transparent
  530. }
  531. .sidebar-light .sidebar-section-header {
  532. border-bottom: 1px solid rgba(0,0,0,.125)
  533. }
  534. .sidebar-light .btn-sidebar-expand {
  535. background-color: #fff;
  536. border-color: rgba(0,0,0,.125);
  537. color: #333
  538. }
  539. .sidebar-light .btn-sidebar-expand:focus, .sidebar-light .btn-sidebar-expand:hover {
  540. background-color: #f2f2f2
  541. }
  542. .sidebar-light .btn-sidebar-expand:not([disabled]):not(.disabled):active {
  543. background-color: #ececec
  544. }
  545. .sidebar-component {
  546. display: none;
  547. position: static;
  548. width: 100%;
  549. border: 1px solid transparent;
  550. margin-bottom: 1.25rem;
  551. border-radius:.25rem;
  552. box-shadow: 0 1px 2px rgba(0,0,0,.05)
  553. }
  554. .sidebar-component.sidebar-dark {
  555. border-color: rgba(255,255,255,.1)
  556. }
  557. .sidebar-component.sidebar-light {
  558. border-color: rgba(0,0,0,.125)
  559. }
  560. .sidebar-sections {
  561. background-color: transparent;
  562. border: 0;
  563. margin: 0;
  564. box-shadow: none;
  565. border-radius: 0
  566. }
  567. @media (min-width:576px) {
  568. .sidebar-expand-sm {
  569. position: static
  570. }
  571. .sidebar-expand-sm.sidebar-collapsed {
  572. width: auto
  573. }
  574. .sidebar-expand-sm.sidebar-collapsed .btn-sidebar-expand {
  575. display: -ms-flexbox;
  576. display: flex;
  577. -ms-flex-align: center;
  578. align-items: center;
  579. height: 100%
  580. }
  581. .sidebar-expand-sm.sidebar-collapsed>:not(.btn-sidebar-expand) {
  582. display: none!important
  583. }
  584. .sidebar-expand-sm.sidebar-main {
  585. z-index: 99;
  586. box-shadow: none
  587. }
  588. .sidebar-expand-sm.sidebar-main-resized {
  589. position: absolute;
  590. left: 0;
  591. transition: none
  592. }
  593. .sidebar-expand-sm.sidebar-main-resized+* {
  594. margin-left: 3.5rem
  595. }
  596. .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) {
  597. width: 3.5rem;
  598. overflow: hidden
  599. }
  600. .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .nav-group-sub, .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header>div, .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link>span, .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-main-title {
  601. display: none!important
  602. }
  603. .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-section-body {
  604. padding-left: 0;
  605. padding-right: 0
  606. }
  607. .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-user .media {
  608. -ms-flex-pack: center;
  609. justify-content: center
  610. }
  611. .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-user .media>:not(:first-child) {
  612. display: none!important
  613. }
  614. .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-user .media>:first-child {
  615. margin-right: 0!important
  616. }
  617. .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-resize-hide {
  618. display: none
  619. }
  620. .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-resize-show {
  621. display: block
  622. }
  623. .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header, .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link, .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-main-header {
  624. padding-left: 0;
  625. padding-right: 0;
  626. -ms-flex-pack: center;
  627. justify-content: center
  628. }
  629. .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-main-header>* {
  630. margin: 0!important
  631. }
  632. .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header i, .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link i {
  633. position: static;
  634. display: block
  635. }
  636. .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link:after {
  637. content: none
  638. }
  639. .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link i {
  640. margin-left: 0;
  641. margin-right: 0
  642. }
  643. .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header {
  644. display: -ms-flexbox;
  645. display: flex
  646. }
  647. .sidebar-expand-sm.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header>i {
  648. margin-top:.1875rem;
  649. margin-bottom:.1875rem
  650. }
  651. .sidebar-expand-sm.sidebar-main-resized.sidebar-main-unfold {
  652. width: 18.75rem;
  653. z-index: 1022;
  654. box-shadow:.25rem 0 1rem rgba(0,0,0,.35)
  655. }
  656. .sidebar-expand-sm.sidebar-secondary {
  657. z-index: 98;
  658. box-shadow: none
  659. }
  660. .sidebar-expand-sm.sidebar-right {
  661. z-index: 97;
  662. box-shadow: none
  663. }
  664. .sidebar-expand-sm.sidebar-component {
  665. display: -ms-flexbox;
  666. display: flex;
  667. width: 18.75rem;
  668. z-index: 96
  669. }
  670. .sidebar-expand-sm.sidebar-component-left {
  671. margin-right: 1.25rem
  672. }
  673. .sidebar-expand-sm.sidebar-component-right {
  674. margin-left: 1.25rem
  675. }
  676. .sidebar-expand-sm.sidebar-dark:not(.sidebar-component)+.sidebar-dark:not(.sidebar-component) {
  677. box-shadow: 1px 0 0 rgba(255,255,255,.1) inset
  678. }
  679. @supports ((position:-webkit-sticky) or (position:sticky)) {
  680. .sidebar-expand-sm.sidebar-sticky {
  681. position:-webkit-sticky;
  682. position:sticky;
  683. top:1.25rem;
  684. z-index:1020
  685. }
  686. }
  687. }
  688. @media (max-width:575.98px) {
  689. .sidebar-expand-sm {
  690. z-index: 1040;
  691. transition: left ease-in-out .15s, right ease-in-out .15s
  692. }
  693. }
  694. @media (max-width:575.98px) and (prefers-reduced-motion:reduce) {
  695. .sidebar-expand-sm {
  696. transition: none
  697. }
  698. }
  699. @media (max-width:575.98px) {
  700. .sidebar-expand-sm:not(.sidebar-component) {
  701. border: 0
  702. }
  703. }
  704. @media (min-width:769px) {
  705. .sidebar-expand-md {
  706. position: static
  707. }
  708. .sidebar-expand-md.sidebar-collapsed {
  709. width: auto
  710. }
  711. .sidebar-expand-md.sidebar-collapsed .btn-sidebar-expand {
  712. display: -ms-flexbox;
  713. display: flex;
  714. -ms-flex-align: center;
  715. align-items: center;
  716. height: 100%
  717. }
  718. .sidebar-expand-md.sidebar-collapsed>:not(.btn-sidebar-expand) {
  719. display: none!important
  720. }
  721. .sidebar-expand-md.sidebar-main {
  722. z-index: 99;
  723. box-shadow: none
  724. }
  725. .sidebar-expand-md.sidebar-main-resized {
  726. position: absolute;
  727. left: 0;
  728. transition: none
  729. }
  730. .sidebar-expand-md.sidebar-main-resized+* {
  731. margin-left: 3.5rem
  732. }
  733. .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) {
  734. width: 3.5rem;
  735. overflow: hidden
  736. }
  737. .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .nav-group-sub, .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header>div, .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link>span, .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-main-title {
  738. display: none!important
  739. }
  740. .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-section-body {
  741. padding-left: 0;
  742. padding-right: 0
  743. }
  744. .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-user .media {
  745. -ms-flex-pack: center;
  746. justify-content: center
  747. }
  748. .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-user .media>:not(:first-child) {
  749. display: none!important
  750. }
  751. .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-user .media>:first-child {
  752. margin-right: 0!important
  753. }
  754. .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-resize-hide {
  755. display: none
  756. }
  757. .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-resize-show {
  758. display: block
  759. }
  760. .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header, .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link, .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-main-header {
  761. padding-left: 0;
  762. padding-right: 0;
  763. -ms-flex-pack: center;
  764. justify-content: center
  765. }
  766. .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-main-header>* {
  767. margin: 0!important
  768. }
  769. .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header i, .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link i {
  770. position: static;
  771. display: block
  772. }
  773. .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link:after {
  774. content: none
  775. }
  776. .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link i {
  777. margin-left: 0;
  778. margin-right: 0
  779. }
  780. .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header {
  781. display: -ms-flexbox;
  782. display: flex
  783. }
  784. .sidebar-expand-md.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header>i {
  785. margin-top:.1875rem;
  786. margin-bottom:.1875rem
  787. }
  788. .sidebar-expand-md.sidebar-main-resized.sidebar-main-unfold {
  789. width: 18.75rem;
  790. z-index: 1022;
  791. box-shadow:.25rem 0 1rem rgba(0,0,0,.35)
  792. }
  793. .sidebar-expand-md.sidebar-secondary {
  794. z-index: 98;
  795. box-shadow: none
  796. }
  797. .sidebar-expand-md.sidebar-right {
  798. z-index: 97;
  799. box-shadow: none
  800. }
  801. .sidebar-expand-md.sidebar-component {
  802. display: -ms-flexbox;
  803. display: flex;
  804. width: 18.75rem;
  805. z-index: 96
  806. }
  807. .sidebar-expand-md.sidebar-component-left {
  808. margin-right: 1.25rem
  809. }
  810. .sidebar-expand-md.sidebar-component-right {
  811. margin-left: 1.25rem
  812. }
  813. .sidebar-expand-md.sidebar-dark:not(.sidebar-component)+.sidebar-dark:not(.sidebar-component) {
  814. box-shadow: 1px 0 0 rgba(255,255,255,.1) inset
  815. }
  816. @supports ((position:-webkit-sticky) or (position:sticky)) {
  817. .sidebar-expand-md.sidebar-sticky {
  818. position:-webkit-sticky;
  819. position:sticky;
  820. top:1.25rem;
  821. z-index:1020
  822. }
  823. }
  824. }
  825. @media (max-width:768.98px) {
  826. .sidebar-expand-md {
  827. z-index: 1040;
  828. transition: left ease-in-out .15s, right ease-in-out .15s
  829. }
  830. }
  831. @media (max-width:768.98px) and (prefers-reduced-motion:reduce) {
  832. .sidebar-expand-md {
  833. transition: none
  834. }
  835. }
  836. @media (max-width:768.98px) {
  837. .sidebar-expand-md:not(.sidebar-component) {
  838. border: 0
  839. }
  840. }
  841. @media (min-width:992px) {
  842. .sidebar-expand-lg {
  843. position: static
  844. }
  845. .sidebar-expand-lg.sidebar-collapsed {
  846. width: auto
  847. }
  848. .sidebar-expand-lg.sidebar-collapsed .btn-sidebar-expand {
  849. display: -ms-flexbox;
  850. display: flex;
  851. -ms-flex-align: center;
  852. align-items: center;
  853. height: 100%
  854. }
  855. .sidebar-expand-lg.sidebar-collapsed>:not(.btn-sidebar-expand) {
  856. display: none!important
  857. }
  858. .sidebar-expand-lg.sidebar-main {
  859. z-index: 99;
  860. box-shadow: none
  861. }
  862. .sidebar-expand-lg.sidebar-main-resized {
  863. position: absolute;
  864. left: 0;
  865. transition: none
  866. }
  867. .sidebar-expand-lg.sidebar-main-resized+* {
  868. margin-left: 3.5rem
  869. }
  870. .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) {
  871. width: 3.5rem;
  872. overflow: hidden
  873. }
  874. .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .nav-group-sub, .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header>div, .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link>span, .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-main-title {
  875. display: none!important
  876. }
  877. .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-section-body {
  878. padding-left: 0;
  879. padding-right: 0
  880. }
  881. .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-user .media {
  882. -ms-flex-pack: center;
  883. justify-content: center
  884. }
  885. .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-user .media>:not(:first-child) {
  886. display: none!important
  887. }
  888. .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-user .media>:first-child {
  889. margin-right: 0!important
  890. }
  891. .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-resize-hide {
  892. display: none
  893. }
  894. .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-resize-show {
  895. display: block
  896. }
  897. .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header, .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link, .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-main-header {
  898. padding-left: 0;
  899. padding-right: 0;
  900. -ms-flex-pack: center;
  901. justify-content: center
  902. }
  903. .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-main-header>* {
  904. margin: 0!important
  905. }
  906. .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header i, .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link i {
  907. position: static;
  908. display: block
  909. }
  910. .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link:after {
  911. content: none
  912. }
  913. .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link i {
  914. margin-left: 0;
  915. margin-right: 0
  916. }
  917. .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header {
  918. display: -ms-flexbox;
  919. display: flex
  920. }
  921. .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header>i {
  922. margin-top:.1875rem;
  923. margin-bottom:.1875rem
  924. }
  925. .sidebar-expand-lg.sidebar-main-resized.sidebar-main-unfold {
  926. width: 18.75rem;
  927. z-index: 1022;
  928. box-shadow:.25rem 0 1rem rgba(0,0,0,.35)
  929. }
  930. .sidebar-expand-lg.sidebar-secondary {
  931. z-index: 98;
  932. box-shadow: none
  933. }
  934. .sidebar-expand-lg.sidebar-right {
  935. z-index: 97;
  936. box-shadow: none
  937. }
  938. .sidebar-expand-lg.sidebar-component {
  939. display: -ms-flexbox;
  940. display: flex;
  941. width: 18.75rem;
  942. z-index: 96
  943. }
  944. .sidebar-expand-lg.sidebar-component-left {
  945. margin-right: 1.25rem
  946. }
  947. .sidebar-expand-lg.sidebar-component-right {
  948. margin-left: 1.25rem
  949. }
  950. .sidebar-expand-lg.sidebar-dark:not(.sidebar-component)+.sidebar-dark:not(.sidebar-component) {
  951. box-shadow: 1px 0 0 rgba(255,255,255,.1) inset
  952. }
  953. @supports ((position:-webkit-sticky) or (position:sticky)) {
  954. .sidebar-expand-lg.sidebar-sticky {
  955. position:-webkit-sticky;
  956. position:sticky;
  957. top:1.25rem;
  958. z-index:1020
  959. }
  960. }
  961. }
  962. @media (max-width:991.98px) {
  963. .sidebar-expand-lg {
  964. z-index: 1040;
  965. transition: left ease-in-out .15s, right ease-in-out .15s
  966. }
  967. }
  968. @media (max-width:991.98px) and (prefers-reduced-motion:reduce) {
  969. .sidebar-expand-lg {
  970. transition: none
  971. }
  972. }
  973. @media (max-width:991.98px) {
  974. .sidebar-expand-lg:not(.sidebar-component) {
  975. border: 0
  976. }
  977. }
  978. @media (min-width:1200px) {
  979. .sidebar-expand-xl {
  980. position: static
  981. }
  982. .sidebar-expand-xl.sidebar-collapsed {
  983. width: auto
  984. }
  985. .sidebar-expand-xl.sidebar-collapsed .btn-sidebar-expand {
  986. display: -ms-flexbox;
  987. display: flex;
  988. -ms-flex-align: center;
  989. align-items: center;
  990. height: 100%
  991. }
  992. .sidebar-expand-xl.sidebar-collapsed>:not(.btn-sidebar-expand) {
  993. display: none!important
  994. }
  995. .sidebar-expand-xl.sidebar-main {
  996. z-index: 99;
  997. box-shadow: none
  998. }
  999. .sidebar-expand-xl.sidebar-main-resized {
  1000. position: absolute;
  1001. left: 0;
  1002. transition: none
  1003. }
  1004. .sidebar-expand-xl.sidebar-main-resized+* {
  1005. margin-left: 3.5rem
  1006. }
  1007. .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) {
  1008. width: 3.5rem;
  1009. overflow: hidden
  1010. }
  1011. .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .nav-group-sub, .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header>div, .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link>span, .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-main-title {
  1012. display: none!important
  1013. }
  1014. .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-section-body {
  1015. padding-left: 0;
  1016. padding-right: 0
  1017. }
  1018. .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-user .media {
  1019. -ms-flex-pack: center;
  1020. justify-content: center
  1021. }
  1022. .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-user .media>:not(:first-child) {
  1023. display: none!important
  1024. }
  1025. .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-user .media>:first-child {
  1026. margin-right: 0!important
  1027. }
  1028. .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-resize-hide {
  1029. display: none
  1030. }
  1031. .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-resize-show {
  1032. display: block
  1033. }
  1034. .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header, .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link, .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-main-header {
  1035. padding-left: 0;
  1036. padding-right: 0;
  1037. -ms-flex-pack: center;
  1038. justify-content: center
  1039. }
  1040. .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-main-header>* {
  1041. margin: 0!important
  1042. }
  1043. .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header i, .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link i {
  1044. position: static;
  1045. display: block
  1046. }
  1047. .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link:after {
  1048. content: none
  1049. }
  1050. .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link i {
  1051. margin-left: 0;
  1052. margin-right: 0
  1053. }
  1054. .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header {
  1055. display: -ms-flexbox;
  1056. display: flex
  1057. }
  1058. .sidebar-expand-xl.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header>i {
  1059. margin-top:.1875rem;
  1060. margin-bottom:.1875rem
  1061. }
  1062. .sidebar-expand-xl.sidebar-main-resized.sidebar-main-unfold {
  1063. width: 18.75rem;
  1064. z-index: 1022;
  1065. box-shadow:.25rem 0 1rem rgba(0,0,0,.35)
  1066. }
  1067. .sidebar-expand-xl.sidebar-secondary {
  1068. z-index: 98;
  1069. box-shadow: none
  1070. }
  1071. .sidebar-expand-xl.sidebar-right {
  1072. z-index: 97;
  1073. box-shadow: none;
  1074. display:block;
  1075. }
  1076. .sidebar-expand-xl.sidebar-component {
  1077. display: -ms-flexbox;
  1078. display: flex;
  1079. width: 18.75rem;
  1080. z-index: 96
  1081. }
  1082. .sidebar-expand-xl.sidebar-component-left {
  1083. margin-right: 1.25rem
  1084. }
  1085. .sidebar-expand-xl.sidebar-component-right {
  1086. margin-left: 1.25rem
  1087. }
  1088. .sidebar-expand-xl.sidebar-dark:not(.sidebar-component)+.sidebar-dark:not(.sidebar-component) {
  1089. box-shadow: 1px 0 0 rgba(255,255,255,.1) inset
  1090. }
  1091. @supports ((position:-webkit-sticky) or (position:sticky)) {
  1092. .sidebar-expand-xl.sidebar-sticky {
  1093. position:-webkit-sticky;
  1094. position:sticky;
  1095. top:1.25rem;
  1096. z-index:1020
  1097. }
  1098. }
  1099. }
  1100. @media (max-width:1199.98px) {
  1101. .sidebar-expand-xl {
  1102. z-index: 1040;
  1103. transition: left ease-in-out .15s, right ease-in-out .15s
  1104. }
  1105. }
  1106. @media (max-width:1199.98px) and (prefers-reduced-motion:reduce) {
  1107. .sidebar-expand-xl {
  1108. transition: none
  1109. }
  1110. }
  1111. @media (max-width:1199.98px) {
  1112. .sidebar-expand-xl:not(.sidebar-component) {
  1113. border: 0
  1114. }
  1115. }
  1116. .sidebar-expand {
  1117. position: static;
  1118. z-index: 1040;
  1119. transition: left ease-in-out .15s, right ease-in-out .15s
  1120. }
  1121. .sidebar-expand.sidebar-collapsed {
  1122. width: auto
  1123. }
  1124. .sidebar-expand.sidebar-collapsed .btn-sidebar-expand {
  1125. display: -ms-flexbox;
  1126. display: flex;
  1127. -ms-flex-align: center;
  1128. align-items: center;
  1129. height: 100%
  1130. }
  1131. .sidebar-expand.sidebar-collapsed>:not(.btn-sidebar-expand) {
  1132. display: none!important
  1133. }
  1134. .sidebar-expand.sidebar-main {
  1135. z-index: 99;
  1136. box-shadow: none
  1137. }
  1138. .sidebar-expand.sidebar-main-resized {
  1139. position: absolute;
  1140. left: 0;
  1141. transition: none
  1142. }
  1143. .sidebar-expand.sidebar-main-resized+* {
  1144. margin-left: 3.5rem
  1145. }
  1146. .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) {
  1147. width: 3.5rem;
  1148. overflow: hidden
  1149. }
  1150. .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .nav-group-sub, .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header>div, .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link>span, .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-main-title {
  1151. display: none!important
  1152. }
  1153. .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-section-body {
  1154. padding-left: 0;
  1155. padding-right: 0
  1156. }
  1157. .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-user .media {
  1158. -ms-flex-pack: center;
  1159. justify-content: center
  1160. }
  1161. .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-user .media>:not(:first-child) {
  1162. display: none!important
  1163. }
  1164. .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-user .media>:first-child {
  1165. margin-right: 0!important
  1166. }
  1167. .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-resize-hide {
  1168. display: none
  1169. }
  1170. .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-resize-show {
  1171. display: block
  1172. }
  1173. .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header, .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link, .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-main-header {
  1174. padding-left: 0;
  1175. padding-right: 0;
  1176. -ms-flex-pack: center;
  1177. justify-content: center
  1178. }
  1179. .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .sidebar-main-header>* {
  1180. margin: 0!important
  1181. }
  1182. .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header i, .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link i {
  1183. position: static;
  1184. display: block
  1185. }
  1186. .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link:after {
  1187. content: none
  1188. }
  1189. .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-link i {
  1190. margin-left: 0;
  1191. margin-right: 0
  1192. }
  1193. .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header {
  1194. display: -ms-flexbox;
  1195. display: flex
  1196. }
  1197. .sidebar-expand.sidebar-main-resized:not(.sidebar-main-unfold) .nav-sidebar .nav-item-header>i {
  1198. margin-top:.1875rem;
  1199. margin-bottom:.1875rem
  1200. }
  1201. .sidebar-expand.sidebar-main-resized.sidebar-main-unfold {
  1202. width: 18.75rem;
  1203. z-index: 1022;
  1204. box-shadow:.25rem 0 1rem rgba(0,0,0,.35)
  1205. }
  1206. .sidebar-expand.sidebar-secondary {
  1207. z-index: 98;
  1208. box-shadow: none;
  1209. }
  1210. .sidebar-expand.sidebar-right {
  1211. z-index: 97;
  1212. box-shadow: none;
  1213. }
  1214. .sidebar-expand.sidebar-component {
  1215. display: -ms-flexbox;
  1216. display: flex;
  1217. width: 18.75rem;
  1218. z-index: 96
  1219. }
  1220. .sidebar-expand.sidebar-component-left {
  1221. margin-right: 1.25rem
  1222. }
  1223. .sidebar-expand.sidebar-component-right {
  1224. margin-left: 1.25rem
  1225. }
  1226. .sidebar-expand.sidebar-dark:not(.sidebar-component)+.sidebar-dark:not(.sidebar-component) {
  1227. box-shadow: 1px 0 0 rgba(255,255,255,.1) inset
  1228. }
  1229. @supports ((position:-webkit-sticky) or (position:sticky)) {
  1230. .sidebar-expand.sidebar-sticky {
  1231. position:-webkit-sticky;
  1232. position:sticky;
  1233. top:1.25rem;
  1234. z-index:1020
  1235. }
  1236. }
  1237. @media (prefers-reduced-motion:reduce) {
  1238. .sidebar-expand {
  1239. transition: none
  1240. }
  1241. }
  1242. .sidebar-expand:not(.sidebar-component) {
  1243. border: 0
  1244. }
  1245. .sidebar-dark .nav-tabs .nav-item.show .nav-link:not(.active) {
  1246. color: #fff
  1247. }
  1248. .sidebar-light .nav-tabs:not(.nav-tabs-bottom) .nav-link.active {
  1249. background-color: #fff
  1250. }
  1251. .ft_wrap {
  1252. margin-top: 120px;
  1253. padding: 30px 0;
  1254. background: #292929;
  1255. }
  1256. .ft_wrap .container {
  1257. display: flex;
  1258. justify-content: space-between;
  1259. }
  1260. .ft_left {
  1261. color: #ccc;
  1262. font-size: 1.4rem;
  1263. }
  1264. .ft_left ul {
  1265. display: flex;
  1266. margin: 20px 0;
  1267. }
  1268. .ft_left li {
  1269. margin-right: 15px;
  1270. }
  1271. .ft_left a {
  1272. color: #ccc;
  1273. ;
  1274. }
  1275. .ft_left div {
  1276. color: #ccc;
  1277. }
  1278. .ft_right {
  1279. /*display: flex;*/
  1280. margin-top: 20px;
  1281. }
  1282. .ft_right dl {
  1283. margin-left: 58px;
  1284. }
  1285. .ft_right dt {
  1286. margin-bottom: 20px;
  1287. color: #c3613f;
  1288. }
  1289. .ft_right dd a {
  1290. color: #ccc;
  1291. }
  1292. /*서브공통*/
  1293. .top_wrap {
  1294. padding: 40px 0;
  1295. background: #ea5520 url(/themes/pro/ssohost/resources/images/top_bg.png);
  1296. text-align: center;
  1297. }
  1298. .top_wrap .search_box {
  1299. display: flex;
  1300. width: 100%;
  1301. height: 50px;
  1302. border: 1px solid #cf592f;
  1303. border-radius: 10px;
  1304. /*overflow: hidden;*/
  1305. background:#fff;
  1306. }
  1307. .top_wrap .search_box label {
  1308. display: flex;
  1309. justify-content: center;
  1310. align-items: center;
  1311. width: 150px;
  1312. height: 100%;
  1313. background: #382d2a;
  1314. color: #fff;
  1315. letter-spacing: normal;
  1316. }
  1317. .top_wrap .search_box input {
  1318. flex: 1;
  1319. border:none!important;
  1320. height: 48px;
  1321. /*width:auto!important;*/
  1322. border-radius:0!important;
  1323. }
  1324. .top_wrap .search_box button {
  1325. display: flex;
  1326. justify-content: center;
  1327. align-items: center;
  1328. width: 90px;
  1329. border: none;
  1330. background: #fff;
  1331. }
  1332. .top_wrap .search_box button i {
  1333. font-size: 28px;
  1334. color: #000;
  1335. }
  1336. .no_left .content {flex-flow: wrap; width:100%;}
  1337. .no_left .content > div {margin-bottom:1.5rem; padding:2rem;}
  1338. .card_1 {width:100%;}
  1339. .card_2 {flex:1; width:49%; margin-left:15px;}
  1340. .card_2:first-child,
  1341. .card_3:first-child {margin-left:0;}
  1342. .card_3 {flex:1; width:33.33%; margin-left:2%;}
  1343. .card_wrap {display:flex; justify-content:space-between; border:none!important; box-shadow:none!important;}
  1344. .card_left, .card_right {padding:20px; border: 1px solid #e7eaf3; border-radius:10px; box-shadow: 0 0.5rem 1.2rem rgb(189 197 209 / 20%);}
  1345. .card_tit {font-size: 1.8rem; color: #000; font-weight: 700;}
  1346. .content {display:flex; padding-top:30px; font-size:0.8125rem;}
  1347. .content > div {background:#fff; border: 1px solid #e7eaf3; border-radius:10px; box-shadow: 0 0.5rem 1.2rem rgb(189 197 209 / 20%);}
  1348. .content .left {width:18.24%; min-width:187px; margin-right:2.2%; padding:0; border:none; box-shadow:none; border-radius:0;}
  1349. .content .right { padding:20px 30px; width: 100%;}
  1350. .my_page .right { overflow: hidden; }
  1351. /* .content .right {width:79.56%; padding:20px 30px;} */
  1352. .content .left .navbar-collapse {align-items:flex-start; padding:0; margin:0; width:100%; background:#fff; border: 1px solid #e7eaf3; border-radius:10px; box-shadow: 0 0.5rem 1.2rem rgb(189 197 209 / 20%);}
  1353. .content .left .navbar-nav {display:flex; flex-flow: column wrap; width:100%; margin-top:10px;}
  1354. .content .left .nav-link {display:flex; align-items:center; padding: 13px 20px;}
  1355. .content .left .nav-link.active {background:#fdede7; color: #ea5520; border-left: 3px solid #ea5520;}
  1356. .content .left .nav-link.active span,
  1357. .content .left .nav-link.active i {color:inherit;}
  1358. .content .left .nav-link i {margin-right:8px; font-size:2rem;}
  1359. .content .left .navbar-toggler i {font-size:1.8rem;}
  1360. .content h2 {margin-bottom:30px; font-size:2.4rem; font-weight:700; color: #000;}
  1361. input[type="text"],
  1362. input[type="password"],
  1363. input[type="email"] {
  1364. height: 45px;
  1365. font-size:inherit;
  1366. border:1px solid #ddd;
  1367. }
  1368. input[type="number"] {height:45px; font-size:inherit; border:1px solid #ddd;line-height:45px}
  1369. textarea {font-size:inherit;}
  1370. .form-control-feedback {display: flex; align-items: center; height:45px;}
  1371. .form-control-feedback i {font-size: 1.6rem}
  1372. .form-group-feedback input[type="text"],
  1373. .form-group-feedback input[type="email"],
  1374. .form-group-feedback input[type="password"] {padding-left: 40px;}
  1375. /*버튼*/
  1376. button i, button span {color:inherit;}
  1377. .btn {position:relative; display: flex; justify-content: center; align-items: center; height:36px; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  1378. }
  1379. .btn-primary {background-color: #45108a; border-color: #45108a;}
  1380. .btn-primary:hover {background-color:#391766; border-color:#391766;}
  1381. .btn-outline-primary {
  1382. border:1px solid #45108a;
  1383. color: #45108a;
  1384. }
  1385. .btn-outline-primary:hover {
  1386. background:#45108a;
  1387. border-color: #45108a;
  1388. color: #fff;
  1389. }
  1390. .btn-sec {
  1391. background: #ddd;
  1392. font-size: 1.6rem;
  1393. letter-spacing: 0;
  1394. height:45px;
  1395. }
  1396. .btn-sec:hover{ background:#b7b7b7;}
  1397. .btn_orange {
  1398. background: #d57755;
  1399. font-size: 1.6rem;
  1400. border-radius: 5px;
  1401. color: #fff;
  1402. }
  1403. .btn_orange:hover {
  1404. background: #cf5c33;
  1405. color: #fff;
  1406. }
  1407. .btn_gray_b {background: #f6f6f6; border: 1px solid #ddd; color:#666;}
  1408. .btn_gray_b:hover {background:#eee; color:#666;}
  1409. .btn_wh {border:1px solid #ddd; color: #666;}
  1410. .btn_wh:hover {background:#f6f6f6;}
  1411. .btn_orange_b {border: 1px solid #db7c5b; color: #d15a30;}
  1412. .btn_orange_b:hover {background:#db7c5b; color:#fff;}
  1413. .btn_big {
  1414. width: 100%;
  1415. height: 50px;
  1416. }
  1417. .btn_mid {width:100px; height:35px;}
  1418. .btn:not(:disabled):not(.disabled) {cursor: pointer;}
  1419. .btn-icon {display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; padding: 0; width: calc(2.25rem + 2px); height: calc(2.25rem + 2px);}
  1420. .btn-icon.btn-sm {width: calc(2rem + 2px); height: calc(2rem + 2px);}
  1421. .btn-group-sm>.btn, .btn-sm {min-width: 3.25rem; padding: 0.3125rem 0.75rem; font-size: .8125rem; line-height: 1.6924; border-radius: 0.1875rem;}
  1422. .btn-outline-light-100:hover {background-color: rgba(255,255,255,.1);}
  1423. .custom-pagination {display:flex; justify-content: center; margin-left: auto; }
  1424. .custom-pagination .page-item {display:flex !important; align-items:center !important; }
  1425. .custom-pagination .page-item .page-link {display:flex !important; align-items: center !important; justify-content: center !important; }
  1426. .custom-pagination .page-item .page-link i {font-size:2.3rem !important; color:#878787 !important;}
  1427. .custom-pagination .page-item.active .page-link i {color:#000 !important;}
  1428. .custom-pagination .page-item.active .page-link {border-color: #d35b2f;}
  1429. /*.custom-pagination .page-item .page-link {border: 0; margin:0 5px !important; border-radius:5px !important; padding: 4px 10px; font-size:1.2rem !important; color:#666 !important; line-height:1.6 !important;}*/
  1430. .custom-pagination .page-item.active .page-link {background:#d35b2f !important; color:#fff !important;}
  1431. /*sso-app-list*/
  1432. .tab-close {
  1433. display: flex;
  1434. flex-flow: row wrap;
  1435. justify-content: center;
  1436. align-items: center;
  1437. padding: 0;
  1438. margin: 0;
  1439. background: rgb(255 255 255 / 90%);
  1440. color: #f33030!important;
  1441. border-radius: 50%;
  1442. width: 20px;
  1443. height: 20px;
  1444. font-size: 16px;
  1445. }
  1446. .tab-close i {color:inherit!important;}
  1447. .select2-search--hide + .select2-results > .select2-results__options {padding-top:0;}
  1448. .select2-results__option {padding: 0.5rem 0.5rem;}
  1449. .select2-selection--single:not([class*=bg-]):not([class*=border-]) {width:100%;}
  1450. .select2-dropdown {margin-left:3px;}
  1451. .dropdown-item {padding: 0.5rem 0.8rem;}
  1452. .dropdown-menu {min-width:auto; margin-top:-1px; padding: 0;}
  1453. .dropdown-divider {margin:0;}
  1454. .my-app {margin-bottom:-120px;}
  1455. .my-app .content {max-width:none; padding:0;}
  1456. .my-app .content * {box-sizing:border-box;}
  1457. #member-menu .navbar-collapse {background:#f6f6f6; border:none; border-right:1px solid #e7eaf3; border-radius:0; box-shadow:none;}
  1458. .my-app .sidebar-main {
  1459. width:300px; margin-right:0;
  1460. background: #2d0958;
  1461. border:none; border-radius:0; box-shadow:none; color:#fff;
  1462. }
  1463. .my-app .sidebar-main .card {border-top:1px solid rgba(255, 255, 255, 0.1);}
  1464. .my-app .sidebar-main.sidebar-collapsed {width:0;}
  1465. .my-app .sidebar-user {border:none;}
  1466. .my-app .sidebar-user i {color:#fff;}
  1467. .my-app .sidebar-user .font-size-xs {font-size:.8125rem; line-height: 1.6924;}
  1468. .my-app .nav-sidebar > .nav-item-open > a,
  1469. .my-app .nav-sidebar > .nav-item > a:hover,
  1470. .my-app .nav-sidebar > .nav-item > a.active {background:#34663f;}
  1471. .my-app .nav-sidebar .nav-item:not(.nav-item-header):last-child {padding-bottom:0;}
  1472. .my-app .nav-sidebar .nav-link:not(.disabled):hover,
  1473. .my-app .nav-sidebar .nav-link.active {color: #fff; background-color: rgba(255,255,255,.1);}
  1474. .my-app .nav-sidebar .nav-item-open>.nav-link:not(.disabled), .my-app .nav-sidebar>.nav-item-expanded:not(.nav-item-open)>.nav-link {background-color:#2c0628; color: #fff;}
  1475. .nav-item-submenu>.nav-link:after {content: "\e9c7"; font-family: icomoon; display: inline-block; font-size: 1rem; vertical-align: middle; line-height: 1; position: absolute; top: 0.75rem; margin-top: 0.1875rem; right: 1.25rem; transition: -webkit-transform .25s ease-in-out; transition: transform .25s ease-in-out; transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}
  1476. .my-app .right_warp {display:flex; flex:1; width:auto; border:none; border-radius:0; box-shadow:none; overflow:hidden;}
  1477. .my-app .right {display:flex; width:100%; padding:0; background:#f5f5f5; border:none; border-radius:0; box-shadow:none;}
  1478. /* .my-app .right {display:flex; width:100%; padding:0; font-size:1.4rem; border:none; border-radius:0; box-shadow:none;} */
  1479. .my-app .content .right .header-element-inline {display:flex; align-items:center; width:100%; height:60px; margin:0; padding:10px; background:#fff; border:none; border-bottom:1px solid #ddd!important; border-radius:0; box-sizing:none;}
  1480. .my-app .right .header-element-inline .navbar-nav li {padding:0 3px;}
  1481. .my-app .right .header-element-inline .navbar-nav li .txt_blue {color:#2196f3;}
  1482. .my-app .right .header-element-inline .navbar-nav li a,
  1483. .my-app .right .header-element-inline .navbar-nav li button,
  1484. .my-app .right .header-element-inline .navbar-nav li .select2-selection__rendered {font-size:14px;}
  1485. .my-app .right .header-element-inline .navbar-nav .w-100, .select2-selection--single {display:inline-block; max-width:120px; margin:0 3px; }
  1486. .my-app .right .header-element-inline .btn-light {}
  1487. .my-app .right .header-element-inline .w-md-auto {width:100px!important;}
  1488. .my-app .right .header-element-inline ul {width:100%;}
  1489. .my-app .right .card-body {flex-flow:column wrap; margin-top:10px;}
  1490. .my-app .right .card-body > .card > .card-header {padding: 0.625rem 1.25rem!important; margin-bottom: 0; border-bottom: 1px solid #dfdfdf;}
  1491. /* 필요없음 지움 .my-app .right .card-body {display:flex; flex-flow:column wrap; margin-top:10px;}
  1492. .my-app .right .card-body > .card {padding:1.25rem;}*/
  1493. .my-app .right .card-body .card_top {align-items:flex-end; margin-bottom:10px;}
  1494. .my-app .control_left {margin-right:auto;}
  1495. .my-app .control_right ul {display:flex; aling-items:center; }
  1496. .my-app .control_right .btn {padding:0.56rem 0.75rem /*0.4375rem 0.875rem;*/;}
  1497. .my-app .right i {font-size:1rem;}
  1498. .my-app .right .btn_wrap {margin-right:auto;}
  1499. /* .my-app .right .card-body button {min-width:100px; margin:0 2px; font-size:1.4rem;}
  1500. .my-app .right .btn-primary {height:35px; border-radius:5px;} */
  1501. .my-app .right .card-body .dropdown-toggle::after {margin-left:10px;}
  1502. .my-app .input_box label {display:block;}
  1503. .my-app .input_box input,
  1504. .my-app .input_box select {height:30px;}
  1505. /*필요없음 지움.my-app .table th, .my-app .table td {height:30px!important; padding-top:10px; padding-bottom:10px;}*/
  1506. .my-app .sidebar-right {width:18.75rem;}
  1507. .my-app .sidebar-right.sidebar-collapsed {width:0;}
  1508. .my-app .sidebar-right .sidebar-user {height:auto;padding: 0.3125rem!important; padding-top: 5px}
  1509. .my-app .sidebar-right i {color:#fff;}
  1510. .my-app .sidebar-right .btn-light {background-color:#6754cf; border-color:#6754cf; color:#fff;}
  1511. .my-app .sidebar-right .btn-light:hover {background-color: #5e49d1; border-color: #5e49d1;}
  1512. .my-app .collapse:not(.show) {display:flex;}
  1513. .my-app .sidebar-right .nav-item a {color:#FF9800;}
  1514. .my-app .sidebar-right .nav-item a:hover,
  1515. .my-app .sidebar-right .nav-item a.active {background:rgba(255,255,255,.1); color:#FF9800;}
  1516. .my-app .sidebar-right .nav-item i {color:inherit;}
  1517. .swal2-popup {
  1518. border: 1px solid black;
  1519. }
  1520. /* for block of numbers */
  1521. .hljs-ln-code {
  1522. padding-left: 10px !important;
  1523. }
  1524. .hljs-ln-numbers {
  1525. -webkit-touch-callout: none;
  1526. -webkit-user-select: none;
  1527. -khtml-user-select: none;
  1528. -moz-user-select: none;
  1529. -ms-user-select: none;
  1530. user-select: none;
  1531. text-align: center;
  1532. color: #ccc;
  1533. border-right: 1px solid #CCC;
  1534. vertical-align: top;
  1535. padding-right: 10px !important;
  1536. /* your custom style here */
  1537. }
  1538. code {
  1539. padding-top: 0 !important;
  1540. padding-bottom: 0 !important;
  1541. }
  1542. pre {
  1543. padding: 0;
  1544. }
  1545. /* for block of code */
  1546. .hljs-ln-code {
  1547. padding-left: 10px;
  1548. }
  1549. /* swal2 */
  1550. .swal2-cancel {
  1551. height: 35px;
  1552. }
  1553. .swal2-confirm {
  1554. height: 35px;
  1555. }
  1556. .none{display:none}
  1557. #ticker{float:left;width:100px;}
  1558. .block {padding:0 10px; height:40px; width: 300px; overflow:hidden; background:#fff; float:left;}
  1559. .menu_btm .block li {
  1560. line-height: 40px;
  1561. border: none;
  1562. font-size: 14px;
  1563. font-weight: 400;
  1564. color: rgb(153, 153, 153);
  1565. }
  1566. .menu_btm .block li a {
  1567. white-space: nowrap;
  1568. }
  1569. .btn-to-top {
  1570. position: absolute;
  1571. bottom: 1.25rem;
  1572. right: 1.25rem;
  1573. -ms-flex-item-align: end;
  1574. align-self: flex-end;
  1575. opacity: 0;
  1576. visibility: hidden;
  1577. z-index: 999;
  1578. transition: all .15s ease-in-out
  1579. }
  1580. .btn-to-top-visible {
  1581. visibility: visible;
  1582. opacity: 1
  1583. }
  1584. .rounded {
  1585. border-radius: 0.25rem;
  1586. }
  1587. /* select */
  1588. select {
  1589. height: 28px;
  1590. padding: 0 2px !important;
  1591. color: #373737 !important;
  1592. border: 1px solid #ccc;
  1593. background: #fff;
  1594. box-sizing: border-box;
  1595. }
  1596. .btn-group {
  1597. z-index: 2;
  1598. }
  1599. .btn-group button:first-child {
  1600. letter-spacing: 0;
  1601. padding: 0 18px;
  1602. }
  1603. .btn-group button:last-child {
  1604. padding: 0 14px;
  1605. }
  1606. /* tooltip */
  1607. .tooltip-inner {
  1608. padding: 5px 5px !important;
  1609. width:100%;
  1610. left:0 !important;
  1611. right:0 !important;
  1612. }
  1613. /* Modal-Form */
  1614. .modal-body input {height:28px; color:#373737; border:1px solid #ccc; background:#fff; transition: all 0.5s; vertical-align:middle; box-sizing: border-box; text-indent: 2px;}
  1615. .modal-body textarea {width:100%; height:150px; color:#373737; padding: 5px; border:1px solid #ccc; background:#fff; transition: all 0.5s; vertical-align:middle; box-sizing: border-box}
  1616. .modal-body input[readonly],
  1617. .modal-body input[disabled]{background:#eaeaea; border-color:#c0c0c0; color:#666; -webkit-appearance:none;}
  1618. .modal-body textarea[readonly],
  1619. .modal-body textarea[disabled]{padding:5px; font-size:14px; color:#666; font-weight:normal; line-height:140%; height:78px; background:#eaeaea;border:1px solid #c0c0c0;}
  1620. select:focus,
  1621. textarea:focus,
  1622. input:focus { border: 1px solid #727272; outline: none;}
  1623. input[type=file] {
  1624. text-indent: 0px !important;
  1625. }
  1626. .modal-header .close {
  1627. display: flex;
  1628. flex-flow: row wrap;
  1629. justify-content: center;
  1630. align-items: center;
  1631. padding: 0;
  1632. margin: 0;
  1633. background: rgb(255 255 255 / 90%);
  1634. color: #f33030!important;
  1635. border-radius: 50%;
  1636. width: 30px;
  1637. height: 30px;
  1638. font-size: 16px;
  1639. }
  1640. /* btn-copy*/
  1641. .btn-copy {
  1642. font-weight : 1400;
  1643. font-family: "Font Awesome 5 Free";
  1644. background-color : transparent;
  1645. border : none;
  1646. cursor : pointer;
  1647. position : absolute;
  1648. right : 5px;
  1649. top : 50%;
  1650. transform : translatey(-50%);
  1651. }
  1652. .btn-copy::before{
  1653. font-size: 15px;
  1654. content : "\f0c5";
  1655. }
  1656. #api23-app-form #generate-key-btn,
  1657. #client-apps-form #generate-key-btn,
  1658. #client-apps-form #create-before-base64-key-btn {
  1659. background-color: #f44336 !important;
  1660. border-color: #f44336 !important;
  1661. }
  1662. /* card-header */
  1663. .card-danger:not(.card-outline) > .card-header {
  1664. background-color: #dc3545;
  1665. }
  1666. .card-danger:not(.card-outline) > .card-header {
  1667. background-color: #dc3545;
  1668. }
  1669. .card-danger:not(.card-outline) > .card-header,
  1670. .card-danger:not(.card-outline) > .card-header p {
  1671. color: #fff;
  1672. }
  1673. .card-primary:not(.card-outline) > .card-header {
  1674. background-color: #007bff;
  1675. }
  1676. .card-primary:not(.card-outline) > .card-header,
  1677. .card-primary:not(.card-outline) > .card-header p {
  1678. color: #fff;
  1679. }
  1680. .card-info:not(.card-outline) > .card-header {
  1681. background-color: #17a2b8;
  1682. }
  1683. .card-info:not(.card-outline) > .card-header,
  1684. .card-info:not(.card-outline) > .card-header p {
  1685. color: #fff;
  1686. }
  1687. .card-success:not(.card-outline) > .card-header {
  1688. background-color: #28a745;
  1689. }
  1690. .card-success:not(.card-outline) > .card-header,
  1691. .card-success:not(.card-outline) > .card-header p {
  1692. color: #fff;
  1693. }
  1694. @media screen and (max-width: 1200px) {
  1695. body {
  1696. background: #fff;
  1697. }
  1698. .menu_btm {
  1699. margin-top: 0;
  1700. border-top: none;
  1701. }
  1702. .menu_btm .container {
  1703. padding-right: 0;
  1704. padding-left: 0;
  1705. }
  1706. .menu_btm .navbar-brand img {
  1707. margin-right: 40px;
  1708. }
  1709. .menu_btm .notice_box {
  1710. width: 100%;
  1711. margin-bottom: 25px;
  1712. }
  1713. .menu_top {
  1714. position: relative;
  1715. top: auto;
  1716. right: auto;
  1717. }
  1718. .menu_top>div {
  1719. border: none;
  1720. }
  1721. .menu_top select {
  1722. display: flex;
  1723. align-items: center;
  1724. justify-content: center;
  1725. height: 30px;
  1726. padding: 0px 15px;
  1727. margin-right: 10px;
  1728. color: #666;
  1729. font-size: 1.3rem;
  1730. border-radius: 50px;
  1731. border: 1px solid #ddd;
  1732. }
  1733. .mrow2 .container>div,
  1734. .mrow3 .container>div {
  1735. width: 100%;
  1736. }
  1737. .mrow2 .container>div:last-child {
  1738. margin-top: 10px;
  1739. }
  1740. .ft_wrap {padding:30px 1.25rem!important;}
  1741. .nav-tabs .nav-item.show .nav-link.active:after, .nav-tabs .nav-link.active:after { bottom:-2px;}
  1742. .ft_wrap .ft_right dl {
  1743. margin-left: 15px;
  1744. }
  1745. .ft_wrap .ft_right dl:first-of-type {
  1746. margin-left: 0;
  1747. }
  1748. .collapse:not(.show) {
  1749. display: none
  1750. }
  1751. .no_left .content {flex-flow:column wrap;}
  1752. .card_2, .card_3 {width:100%; margin-left:0;}
  1753. .card_2 {width:100%; margin-left:0;}
  1754. .content {flex-direction:column;}
  1755. .content .left, .my-app .content .left {width:100%; margin-bottom:20px; justify-content:flex-end;}
  1756. .content .right {width:100%; padding:20px 0; padding-top:0; border:none; box-shadow:none;}
  1757. .content .left .navbar-collapse {margin-top:10px; border: 1px solid #f1b39d;}
  1758. .content .left .navbar-nav {display:flex; flex-flow: row wrap; justify-content:flex-start; padding:5px;}
  1759. .content .left .navbar-nav li {width:25%; text-align:center;}
  1760. .content .left .nav-link {flex-direction:column; padding:6px 10px;}
  1761. .content .left .nav-link.active {border-left:none; background:none;}
  1762. .token_setting .content {
  1763. overflow-x: hidden;
  1764. }
  1765. .account_setting .inner > div {width:48%;}
  1766. .trans_list .content {flex-direction:column;}
  1767. .trans_list .content .card_2 {width:100%; margin-left:0;}
  1768. .notice_list .card_2.card_left {width:100%;}
  1769. .notice_list .card_right {display:none;}
  1770. .list_box .nav-tabs {display: flex; border-bottom: none; flex-flow: row wrap; margin-left:-5px; margin-top:-5px;}
  1771. .list_box .nav-tabs .nav-item {width:48%; margin:1%;}
  1772. .list_box .nav-link {border:1px solid #ddd; border-radius:5px;}
  1773. .list_box .nav-link.active,
  1774. .list_box .nav-tabs .nav-link:focus,
  1775. .list_box .nav-tabs .nav-link:hover { border-color: #ed9b7e #ed9b7e #ed9b7e;}
  1776. .list_box .sub_tabs {display:flex; margin-left:0; margin-right:0;}
  1777. .list_box .sub_tabs .nav-item {display:flex; flex:1; margin:0; margin-bottom:-1px;}
  1778. .list_box .sub_tabs .nav-link { border-bottom-left-radius:0; border-bottom-right-radius:0;}
  1779. .list_box .sub_tabs .nav-link:active,
  1780. .list_box .sub_tabs .nav-link:focus,
  1781. .list_box .sub_tabs .nav-link:hover {margin-bottom:-1px; border:1px solid #efd8d0; border-bottom:none;}
  1782. .list_box .tab-pane .tab-content {padding:20px 10px; border-radius:0;}
  1783. .contract_detail .info_box ul,
  1784. .contract_detail .src_box dd {padding:10px;}
  1785. .contract_detail .src_box dt {flex-direction:column; align-items:flex-start; justify-content:space-between;}
  1786. .contract_detail .src_box dt button {margin-top:5px; padding:3px 5px; font-size:1.2rem;}
  1787. .cart .content > div {display:block;}
  1788. .cart .card_left {margin-right:0;}
  1789. .cart .card_left .table .info {}
  1790. .cart .card_left .table .info img {width:30px; height:30px; margin-right:5px;}
  1791. .cart .card_left .button_wrap {margin-bottom:40px;}
  1792. .checkout .content > div,
  1793. .order_received .content > div {display:block;}
  1794. .checkout .card_left,
  1795. .order_received .card_left {margin-right:0;}
  1796. .member_credit .balance > div {display: block;}
  1797. .member_credit .balance .info_box > div:first-of-type {margin-bottom:20px;}
  1798. .table-col th{width: auto;}
  1799. .item_detail .card_wrap {flex-flow: column-reverse;}
  1800. .item_detail .card_left, .item_detail .card_right {width:100%;}
  1801. .item_detail .card_right {margin-bottom:20px;}
  1802. .my-app .content {
  1803. width: 100%; padding-top:30px;
  1804. /*padding-left: 15px; padding-right: 15px;*/
  1805. }
  1806. /* .my-app .btn-group:last-child {display:none;} */
  1807. .my-app .d-xl-none {border:none; border-radius:0; box-shadow:none;}
  1808. .my-app .navbar-nav {flex-flow:column wrap;}
  1809. .my-app .content > .d-md-none {border: none; box-shadow: none; border-radius: 0; display: flex; justify-content: flex-start;}
  1810. .my-app .content > .d-md-none i {font-size:1rem;}
  1811. .my-app .sidebar-main > .d-xl-none i {margin:10px 20px; transform:rotate(0.5turn); font-size:1.3rem;}
  1812. .my-app .nav-sidebar .nav-link:not(.disabled):hover
  1813. .my-app .content .right .card-header, navbar-collapse {height:auto; padding:0;}
  1814. .my-app .right .card-header .navbar-collapse {margin:0; padding:0;}
  1815. .my-app .control_left {margin-left:0; display:none;}
  1816. .my-app .right .card-header .navbar-nav {margin-bottom:5px;}
  1817. .my-app .right .card-header .navbar-nav li {width:100%; padding:0; margin:2px 0px;}
  1818. .my-app .right .card-header .navbar-nav button,
  1819. .my-app .right .card-header .navbar-nav .btn {display:flex; align-items:center; justify-content:center; height:35px;}
  1820. .my-app .right .card-header .navbar-nav .selection,
  1821. .my-app .right .card-header .navbar-nav .select2-results__option {}
  1822. /* .my-app .right .card-header .w-100 {width:auto!important;}
  1823. .my-app .right .card-body {padding:0;} */
  1824. /* .my-app .right .card-body > .card {width:100%;padding:0; border:none; border-radius:0; box-shadow:none;} */
  1825. .my-app .right .card-body .card_top {flex-flow:column wrap; align-items: flex-start;}
  1826. .my-app .right .card-body .input_box {width: 100%; padding:10px 3px;}
  1827. .my-app .right .card-body .input_box > div {display:flex;}
  1828. .my-app .right .card-body .input_box > div input {flex:1; width:100%;margin-left:5px;}
  1829. .my-app .right .btn_wrap {flex-flow:row wrap!important; justify-content:space-between!important;}
  1830. .my-app .card_cont .btn_wrap > div, .my-app .card_cont .btn_wrap select {width:48%; margin-bottom:20px;}
  1831. /*.my-app .right .card-body button {margin: 0 2px 2px 2px; font-size:1.3rem;}*/
  1832. .sidebar-right {right:-25rem;}
  1833. .my-app .sidebar-right.sidebar-collapsed {width:18.75rem;}
  1834. .my-app .right .card-header .dropdown-user i {line-height:35px;}
  1835. .select2-selection--single:not([class*=bg-]):not([class*=border-]) {height: 35px; display: flex; align-items: center;}
  1836. .my-app .content .right .header-element-inline {height:auto;}
  1837. .my-app .right .header-element-inline .navbar-nav .w-100, .select2-selection--single {max-width:none; margin:5px 0;}
  1838. .my-app .collapse:not(.show) {display:none;}
  1839. /*.custom-pagination {justify-content: center; width: 100%;}*/
  1840. /*.my-app .table {min-width:1130px;}*/
  1841. }
  1842. @media screen and (min-width:768px) {
  1843. .font-weight-md-normal {
  1844. font-weight: 400!important;
  1845. }
  1846. .w-md-80 {
  1847. width: 80% !important;
  1848. }
  1849. }
  1850. @media screen and (min-width:1200px) {
  1851. .my-app .sidebar-main.collapse {display:block;}
  1852. }
  1853. @media screen and (max-width:768px) {
  1854. .navbar {
  1855. position: relative;
  1856. display: -ms-flexbox;
  1857. display: flex;
  1858. -ms-flex-wrap: wrap;
  1859. flex-wrap: wrap;
  1860. -ms-flex-align: center;
  1861. align-items: center;
  1862. -ms-flex-pack: justify;
  1863. justify-content: space-between;
  1864. padding: 0 1.25rem
  1865. }
  1866. .navbar>.container,
  1867. .navbar>.container-fluid {
  1868. display: -ms-flexbox;
  1869. display: flex;
  1870. -ms-flex-wrap: wrap;
  1871. flex-wrap: wrap;
  1872. -ms-flex-align: center;
  1873. align-items: center;
  1874. -ms-flex-pack: justify;
  1875. justify-content: space-between
  1876. }
  1877. .navbar-brand {
  1878. display: inline-block;
  1879. padding-top: 1.00002rem;
  1880. padding-bottom: 1.00002rem;
  1881. margin-right: 1.25rem;
  1882. font-size: 0;
  1883. line-height: inherit;
  1884. white-space: nowrap
  1885. }
  1886. .navbar-brand:focus,
  1887. .navbar-brand:hover {
  1888. text-decoration: none
  1889. }
  1890. .navbar-nav {
  1891. display: -ms-flexbox;
  1892. display: flex;
  1893. -ms-flex-direction: column;
  1894. flex-direction: column;
  1895. padding-left: 0;
  1896. margin-bottom: 0;
  1897. list-style: none
  1898. }
  1899. .navbar-nav .nav-link {
  1900. padding-right: 0;
  1901. padding-left: 0
  1902. }
  1903. .navbar-nav .dropdown-menu {
  1904. position: static;
  1905. float: none
  1906. }
  1907. .navbar-text {
  1908. display: inline-block;
  1909. padding-top: .625rem;
  1910. padding-bottom: .625rem
  1911. }
  1912. .navbar-collapse {
  1913. -ms-flex-preferred-size: 100%;
  1914. flex-basis: 100%;
  1915. -ms-flex-positive: 1;
  1916. flex-grow: 1;
  1917. -ms-flex-align: center;
  1918. align-items: center
  1919. }
  1920. .navbar-toggler {
  1921. padding: .875rem 0;
  1922. font-size: .8125rem;
  1923. line-height: 1;
  1924. background-color: transparent;
  1925. border: 1px solid transparent;
  1926. border-radius: 0
  1927. }
  1928. .navbar-toggler:focus,
  1929. .navbar-toggler:hover {
  1930. text-decoration: none
  1931. }
  1932. .navbar-toggler-icon {
  1933. display: inline-block;
  1934. width: 1.5em;
  1935. height: 1.5em;
  1936. vertical-align: middle;
  1937. content: "";
  1938. background: no-repeat center center;
  1939. background-size: 100% 100%
  1940. }
  1941. .my-app .right .card-body > .card > .card-header {
  1942. padding:0.625rem 0.65rem!important
  1943. }
  1944. }
  1945. @media screen and (max-width:767px) {
  1946. }
  1947. @media screen and (max-width:320px) {
  1948. }