.bold-100{font-weight : 100!important; }.bold-200{font-weight : 200!important; }.bold-300{font-weight : 300!important; }.bold-400{font-weight : 400!important; }.bold-500{font-weight : 500!important; }.bold-600{font-weight : 600!important; }.bold-700{font-weight : 700!important; }.bold-800{font-weight : 800!important; }.bold-900{font-weight : 900!important; }.fs-8{font-size : 8px!important}.fs-9{font-size : 9px!important}.fs-10{font-size : 10px!important}.fs-11{font-size : 11px!important}.fs-12{font-size : 12px!important}.fs-13{font-size : 13px!important}.fs-14{font-size : 14px!important}.fs-15{font-size : 15px!important}.fs-16{font-size : 16px!important}.fs-17{font-size : 17px!important}.fs-18{font-size : 18px!important}.fs-19{font-size : 19px!important}.fs-20{font-size : 20px!important}.fs-21{font-size : 21px!important}.fs-22{font-size : 22px!important}.fs-23{font-size : 23px!important}.fs-24{font-size : 24px!important}.fs-25{font-size : 25px!important}.fs-26{font-size : 26px!important}.fs-27{font-size : 27px!important}.fs-28{font-size : 28px!important}.fs-29{font-size : 29px!important}.fs-30{font-size : 30px!important}.gap-1{gap: .5rem;}.gap-2{gap: 1rem;}.gap-3{gap: 1.5rem;}.gap-4{gap: 2rem;}.gap-5px{gap : 5px}.gap-10px{gap : 10px}.gap-15px{gap : 15px}.gap-20px{gap : 20px}.gap-25px{gap : 15px}@media(max-width: 500px){.max-1 > *{ max-width:100%!important; }.max-2 > *{ max-width:50%!important; }.max-3 > *{ max-width:33.33%!important; }.max-4 > *{ max-width:25%!important; }.max-5 > *{ max-width:20%!important; }.max-6 > *{ max-width:16.66%!important; }.max-7 > *{ max-width:14.285%!important; }.max-8 > *{ max-width:12.5%!important; }.max-9 > *{ max-width:11.1111%!important; }.max-10 > *{ max-width:10%!important; }}.radius-2{border-radius:2px; }.radius-3{border-radius:3px; }.radius-4{border-radius:4px; }.radius-5{border-radius:5px; }.radius-6{border-radius:6px; }.radius-7{border-radius:7px; }.radius-8{border-radius:8px; }.radius-9{border-radius:9px; }.radius-10{border-radius:10px; }.radius-20{border-radius:20px; }.radius-30{border-radius:30px; }html{height: 100%; width : 100%;position:relative;background: black;}body{font-family : "Roboto Flex","Roboto", sans-serif;background: #0E1E2A;}.fixed_full{width : 100%;height: 100%;position:fixed; border:1px solid black;}.overflow_hidden{ overflow:hidden; }.overflow_auto{ overflow:auto; }.overflow_x{ overflow-x : visible ; overflow-y : hidden; }.overflow_y{ overflow-x : hidden ; overflow-y : visible; }.overflow{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:block ; }.aside_ul{background: #1A2C38; border-radius:5px;}.aside_small{font-size: 12px; opacity: 0.6; display: block; margin-bottom: 5px;}.aside_logo .logo{width : 50px;}.text_logo{font-family : "Pacifico", cursive; font-style : italic !important ;font-weight : 300;font-size : 26px;margin-bottom: 0px;} aside { box-shadow: 2px 0 5px rgba(0,0,0,0.1); } aside ul { list-style-type: none; padding: 0; margin: 0;overflow:hidden;box-shadow:0px 0px 5px 0px rgba(0,0,0,0.2); } aside li { position: relative; } aside li:last-child { border-bottom: none; } aside li a { text-decoration: none!important; color:#f1f1f1; display: block; padding: 8px 12px; transition: all 0.3s ease; font-size : 14px; } aside li a:hover { background-color: rgba(0,0,0,.2) ; color: yellow; padding-left: 15px; } aside li a:hover::before { margin-right: 12px; } aside ul ul { padding-left: 15px; margin-top: 5px; } aside ul ul li { padding: 4px 0; font-size: 0.9em; } aside li.active a { background-color: #0F212E; color: yellow; font-weight: 500; box-shadow:0px 0px 5px 0px rgba(0,0,0,.2); }li a svg{width : 22px;height: 22px;}aside li a{display:flex; gap: 7px;align-items:center;}.main_header svg{width : 22px;height: 22px;}.main_header *{margin-bottom: 0px;}.main_header h1{font-size : 18px;}.main_header{padding:1rem;display:flex;align-items:center;justify-content:start;border-bottom:1px solid rgba(0,0,0,0.3);background: #1A2C38;height: 55px;width : 100%;}.main_content{width : 100%;height: calc(100% - 55px);overflow:auto;}.main_header_2{width : calc(100% - 22px);padding-left:1rem;padding-right:1rem;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;}.main_header_3{display:inline-flex;align-items:center;gap:10px;}.header_select_curr{width : 60px;border-radius:5px;border:0px!Important;font-size : 14px;height: 25px;outline:none; }.main_header .btn{ border-radius:5px;border:0px!Important;font-size : 14px;height: 25px;outline:none;padding-top:0px;padding-bottom:0px;display:inline-flex;align-items:center;justify-content:center;gap:3px;} .promo_not_login{padding:1rem;background: rgba(0,0,0,.1);} .promo_coin{width : 40px;border-radius:100%;overflow:hidden;}.text-secondary-2{color:rgba(255,255,255,.7)}.coin_logo_list{width : 30px;height : 30px;border-radius:100%;}.flex_coin{display:flex;align-items:center;justify-content:start;gap:10px;}th,td{ vertical-align: middle;}.table-dark *{border:0px!Important;}.table-dark thead,.table-dark th{background: #1d1321;border-top:1px solid black!important;}.table{background: transparent !important;}.table-striped>tbody>tr:nth-of-type(odd)>*{background: transparent!important;--bs-table-bg-type: transparent!important;}.table-dark td{padding-top:15px;padding-bottom:15px;color:#f1f1f1!important;}.table-dark tr td:last-child,.table-dark tr th:last-child{padding-right:1rem!important;}.table-dark tr td:first-child,.table-dark tr th:first-child{padding-left:1rem!important;}.table-dark tr:last-child td{border-bottom:1px solid black!important; }.table-dark tr:nth-child(even) td{background: rgba(0,0,0,.2);}.list_balance{font-family : "Roboto"; font-weight : 600;color:white!Important;}.list_balance_coin{font-family : "Roboto"; font-size : 12px!important;color:rgba(255,255,255,.6)} .flex-center{ display:flex; align-items:center; }.dark-1 { background: rgba(0, 0, 0, 0.1) !important; color: white !important;}.dark-2 { background: rgba(0, 0, 0, 0.2) !important; color: white !important;}.dark-3 { background: rgba(0, 0, 0, 0.3) !important; color: white !important;}.dark-4 { background: rgba(0, 0, 0, 0.4) !important; color: white !important;}.dark-5 { background: rgba(0, 0, 0, 0.5) !important; color: white !important;}.dark-6 { background: rgba(0, 0, 0, 0.6) !important; color: white !important;}.dark-7 { background: rgba(0, 0, 0, 0.7) !important; color: white !important;}.dark-8 { background: rgba(0, 0, 0, 0.8) !important; color: white !important;}.dark-9 { background: rgba(0, 0, 0, 0.9) !important; color: white !important;}/* Basic Colors */.text-white { color: white !important; }.text-black { color: black !important; }.text-red { color: red !important; }.text-green { color: green !important; }.text-blue { color: blue !important; }.text-yellow { color: yellow !important; }.text-orange { color: orange !important; }.text-purple { color: #f900f9 !important; }.text-pink { color: pink !important; }.text-brown { color: brown !important; }.text-gray { color: gray !important; }.text-grey { color: grey !important; }/* Extended Colors */.text-lightblue { color: lightblue !important; }.text-lightgreen { color: lightgreen !important; }.text-lightgray { color: lightgray !important; }.text-lightgrey { color: lightgrey !important; }.text-darkblue { color: darkblue !important; }.text-darkgreen { color: darkgreen !important; }.text-darkred { color: darkred !important; }.text-darkgray { color: darkgray !important; }.text-darkgrey { color: darkgrey !important; }/* Web Safe Colors */.text-maroon { color: #800000 !important; }.text-olive { color: #808000 !important; }.text-teal { color: #008080 !important; }.text-navy { color: #000080 !important; }.text-fuchsia { color: #ff00ff !important; }.text-aqua { color: #00ffff !important; }.text-lime { color: #00ff00 !important; }.text-silver { color: #c0c0c0 !important; }/* Material Design Colors */.text-primary { color: #1976D2 !important; }.text-secondary { color: #9E9E9E !important; }.text-success { color: #4CAF50 !important; }.text-danger { color: #F44336 !important; }.text-warning { color: #FFC107 !important; }.text-info { color: #2196F3 !important; }.text-light { color: #F5F5F5 !important; }.text-dark { color: #212121 !important; }/* Transparent */.text-transparent { color: transparent !important; }/* Custom HEX Colors */.text-custom1 { color: #ff5733 !important; }.text-custom2 { color: #33ff57 !important; }/* RGB Colors */.text-rgb { color: rgb(255, 87, 51) !important; }/* HSL Colors */.text-hsl { color: hsl(12, 100%, 60%) !important; }.text-lawngreen{color:lawngreen!important;}a{ cursor:pointer!Important;}div,p,a,span,main{ contenteditable : true; } * { -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE/Edge */ user-select: none; /* Standard syntax */} input, textarea, [contenteditable="true"] { -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important;}.btn-light{ color:black!important;}/* Untuk browser berbasis WebKit (Chrome, Edge, Safari) */::-webkit-scrollbar { width: 5px; /* Lebar scrollbar vertikal */ height:5px; /* Tinggi scrollbar horizontal */}::-webkit-scrollbar-track { background: #1A2C38; /* Warna track */}::-webkit-scrollbar-thumb { background: #888; /* Warna thumb */ border-radius: 3px;}::-webkit-scrollbar-thumb:hover { background: #555; /* Warna thumb saat hover */}.table td, .table th{ vertical-align: middle!important;}.coin_sm,.coin_image_active, .main_header .dropdown .btn img{ width : 20px; border-radius:100%; }.main_header .dropdown .btn{ height: 35px!important; display:flex; align-items:center; justify-content:start; background: rgba(0,0,0,0.7)!important; border-radius:30px;}.header_profile_img img{ width : 100%; height: 100%;}.header_profile_img{ width : 33px; height: 33px; border-radius:100%; overflow:hidden;}.main_header .dropdown-menu .dropdown-item:hover{ color:yellow!important; background: rgba(255,255,255,0.05)!important; padding-left:.6rem!important;}.main_header .dropdown-menu .dropdown-item{ color:#f1f1f1!important; padding: .5rem!important; border-radius:5px; margin-bottom: 5px; background: rgba(255,255,255,0.1); transition:0.2s;}.main_header .dropdown-menu{ height: calc(100vh - 200px); overflow:hidden; background: #06130f; width : 270px; box-shadow:0px 0px 10px 0px rgba(0,0,0,.5); border-radius:5px; padding:0px; margin-top: 5px; }.dropdown-menu-list{ height: calc(100% - 50px); position:relative; overflow:auto; width : 100%; padding:.8rem; }.drodown_menu_footer{ position: absolute ; bottom:0px; left:0px; border-radius:5px; background: #06130f; height : 50px!important; display:flex; align-items:center; color:white; width : 100%!important;}.radius-100{ border-radius:100%; }/* Untuk browser berbasis WebKit (Chrome, Safari, Edge) */input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}/* Untuk Firefox */input[type="number"] { -moz-appearance: textfield;} .input-group-style .btn{ border-top-left-radius:0px!Important; border-bottom-left-radius:0px!Important; } .input-group-style input{ background: transparent!Important; outline:none!important; box-shadow:none!important; color:white!important; } .input-group-style .btn, .input-group-style input{ border:0px!important; height: 100%; display:flex; align-items:center; } .input-group-style{ border:1px solid black; position:relative; padding:0px; height: 45px; background: #1A2C38; border-radius:5px!important; }.dropdown-menu-300 .dropdown-item{ color:white!important; transition:0.3s; }.dropdown-menu-300 .dropdown-item:hover{ background: rgba(255,255,255,.1); padding-left:.7rem!important;}.dropdown-menu-300{ max-height: 300px!Important; overflow:auto; width : 200px; background: #113128!important; color:white!important; border:1px solid black;}.input-dark{ background: rgba(0,0,0,0.5)!important; color:white!Important; border:1px solid black;}.radius-3{border-radius:3px; }.radius-4{border-radius:4px; }.radius-5{border-radius:5px; }.radius-10{border-radius:10px; }.radius-30{border-radius:30px; }*[disabled],*[readonly]{ box-shadow:none!important; outline:none!important; border:none!important ;}@media(min-width:900px){ .sm_only, .small_only{ display:none!important; } .aside_active main{ left : 50px !Important; width : calc(100% - 50px)!Important; } .aside_active aside ul{ margin-top: 50px!important; } .aside_active aside .aside_logo { background: transparent; padding-left:5px!important; padding-right:5px!important; padding-top:0px!important; } .aside_active aside ul{ border:1px solid black!important; } .aside_active aside li a{ padding-left: 5px!important; padding-right: 5px!important; text-align: center!important; justify-content: center!important; } .aside_active aside .aside_logo img{ display:block!important; width : 100%; max-width : 45px; } .aside_active aside .aside_logo h1, .aside_active aside small, .aside_active aside .more, .aside_active aside span{ display:none; } .aside_active .main_menux{ padding-left:0px!important; padding-right:0px!important; } .aside_active aside{ width : 50px; padding-left: 5px !important; padding-right: 5px !important; }} .is_loading.active{ display:block!important; } .is_loading { position: fixed; top: 0; left: 0; width: 100%; height: 5px; background-color: #000; overflow: hidden; z-index:99; display:none!important; } .sub_loading { width: 30%; height: 100%; background-color: #3498db; animation: bounce 5s infinite ease-in-out; } @keyframes bounce { 0% { transform: translateX(-100%); } 50% { transform: translateX(300%); } 100% { transform: translateX(-100%); } } .loading-spinner { position: fixed; top: 0; left: calc((100% - 40px) / 2); width: 40px; height: 40px; border-radius:100%; background: white; justify-content: center; align-items: center; display:flex; transform: translateY(-100%); opacity: 0; transition: transform 0.3s ease, opacity 0.2s ease; z-index: 1000; pointer-events: none; } .loading-spinner::after { content: ""; width: 30px; height: 30px; border: 5px solid black; border-top-color: #3498db; border-radius: 50%; animation: spin 1s linear infinite; opacity: 0; transition: opacity 0.2s ease; } .loading-spinner.active::after { opacity: 1; } @keyframes spin { to { transform: rotate(360deg); } } .min-h-100{ min-height:100%;}.relative{ position:relative}aside,.aside{ position:absolute!important; left:0px; top:0px;}main,aside{ transition:0.3s;}main{ width : calc(100% - 230px); overflow:hidden; position:absolute; height: 100%; color:#f1f1f1; left : 230px; top:0px; right:0px;}.fixed{ position:fixed;}@media(max-width : 899px){ h3{font-size : 20px;} textarea{ font-size : 14px!important; height: 120px!important; } .lg_only{ display:none!important; } .table-dark tr th:first-child{ padding-left:1rem!important; } .table-dark tr td:first-child{ padding-left:.7rem!important; } .table-dark th, .table-dark td{ padding:.5rem!important; font-size : 14px; } aside, .aside{ left : -230px!important; } main{ width : 100%!important; left:0px!important; } .overlay_aside{ background: rgba(0,0,0,0.8); position:fixed; top:0px; left:0px; width : 100%; height: 100%; z-index:0; } .aside_active .overlay_aside{ z-index:9!important; } .aside_active aside, .aside_active .aside{ left:0px!Important; z-index:99!important; } }.main_menux{ padding:.7rem;}aside,.aside{border-right:1px solid black;width : 230px;background: #0E1E2A; height: 100%; overflow:auto;color:white;} .input-dark::placeholder, .input-group-style input::placeholder { color: rgba(255,255,255,0.6); opacity: 0.5;}@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; }}a:active, .btn:active{ animation: blink 0.3s;}.btn-success:hover{ box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5)!important; text-shadow:1px 1px 5px rgba(0,0,0,1)!important;}.main_header .dropdown-menu.show{transform: translate3d(-63px, 40px, 0px)!important;}.bg_content{ background: url('/image/body_bg.png') center center no-repeat;} .aside_logo{ width : 100%; padding-bottom :.5rem; padding-top:3px; padding-left:11px; background: url('/image/bg_button.png') center center / cover no-repeat; box-shadow:0px 0px 5px 0px rgba(0,0,0,.2); border-radius:5px; margin-bottom: 15px;} .btn-success{ border:0px!important; box-shadow:none!Important; outline:none!important; background: url('/image/bg_green.png')center center / cover no-repeat; text-shadow:0px 0px 5px rgba(0,0,0,1)!important;}.btn-warning{ border:0px!important; box-shadow:none!Important; outline:none!important; color:white!important; text-shadow:0px 0px 5px rgba(0,0,0,1)!important; background: url('/image/bg_orange.png')center center / cover no-repeat; }.btn-dark{ border:0px!important; box-shadow:none!Important; outline:none!important; color:white!important; text-shadow:0px 0px 5px rgba(0,0,0,1)!important; background: url('/image/bg_black.png')center center / cover no-repeat; }u{text-decoration:underline!important; }.clickable { pointer-events: auto;} .diagram-container { width: 400px; max-width: 100%; padding: 20px; border-radius: 10px; } .mermaid{ display:none; } .mermaid[data-processed="true"]{ display:block!important; }