/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ◈ defaults.css
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ◇ Default Global Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

html, body { font-family: 'Noto Sans KR', sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -0.02em; }
body { font-size: 13px; color: #212121; background-color: #f0f7f9/* #F8FAFC */; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ◇ Override MaterializeCSS Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ◇ Common Nav Bar Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#gdomMainHead { width: 100%; background-color: #ffffff; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2); }
#gdomMainSrch { width: 100%; background-color: #ffffff; }
#gdomWrapSrch { display: flex; flex-wrap: nowrap; justify-content: space-between; }
#gdomSrchForm { display: flex; align-self: center; border: 1px solid #c0c0c0; border-radius: 10px; }
#gdomSrchForm input { border: none; color: #555; background-color: transparent; font-weight: bold; outline: none; }

@media (max-width: 600px) { #gdomMainLogo img { display: block; height: 40px; } #gdomSrchForm { padding: 6px; } #gdomSrchForm input { width: 150px; } }
@media (min-width: 601px) { #gdomMainLogo img { display: block; height: 45px; } #gdomSrchForm { padding: 8px; } #gdomSrchForm input { width: 320px; } }

#gdomTopMenus { display: flex; align-items: center; }
#gdomTopMenus .homeicon { padding: 5px; border: 1px solid #d0d0d0; border-radius: 50%; background-color: #ffffff; z-index: 5; }
#gdomTopMenus .homeicon div { width: 40px; height: 40px; text-align: center; border-radius: 50%; background-color: #6495ed; }
#gdomTopMenus .menulist { flex-grow: 1; display: flex; align-items: center; margin-left: -20px; padding: 3px 10px; border: 1px solid #e0e0e0; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1); background-color: #6495ed; }
#gdomTopMenus .menulist .allmenus { flex-grow: 1; margin-left: 20px; }
#gdomTopMenus .menulist .menuitem { padding: 9px; font-size: 17px; border-radius: 5px; }
#gdomTopMenus .menulist .menuitem.activate { background-color: rgba(0, 0, 0, 0.3); }
#gdomTopMenus .menulist .menuname { font-size: 14px; vertical-align: center; }
#gdomTopMenus .menulist .menuitem a:hover { color: #B0E0E6; }
#gdomTopMenus .homeicon a, #gdomTopMenus .menulist .allmenus a, #gdomTopMenus .menulist .menuitem a { color: #ffffff; font-weight: bold; }

#gdomSubMenus { display: flex; align-items: center; padding: 3px 10px; background: #fff; border: 1px solid #f0f0f0; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1); overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; -webkit-overflow-scrolling: touch; }
#gdomSubMenus .homeicon div { width: 40px; height: 40px; font-size: 20px; text-align: center; color: #6495ed; margin-right: 10px; }
#gdomSubMenus .menulist { flex-grow: 1; display: flex; }
#gdomSubMenus .menulist .menuitem { padding: 9px; border-radius: 5px; }
#gdomSubMenus .menulist .menuitem.activate { background-color: #6495ed; }
#gdomSubMenus .menulist .menuitem a { font-weight: bold; }
#gdomSubMenus .menulist .menuitem:not(.activate) a { color: #6495ed; }
#gdomSubMenus .menulist .menuitem.activate a { color: #ffffff; }

#gdomSideMenu { background-color: #f0f0f0; }
#gdomSideMenu .sideuser { padding-bottom: 10px; background-image: url("/mdaspace/mainbg00.jpg"); background-size: contain; }
#gdomSideMenu .sideuser img { border-radius: 50%; opacity: 0.9; }
#gdomSideMenu .welcomes { margin: 0px 10px; padding: 5px 0px; text-align: center; font-weight: bold; border-radius: 5px; color: #ffffff;  background-color: #000000; opacity: 0.4; }
#gdomSideMenu .sidemenu { padding: 5px 0px; background-color: #ffffff; }
#gdomSideMenu .menuitem { width: 100% !important; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ◇ Dropdown Menu Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.dropmenu .menuitem:hover { background-color: #eff6ff }
.dropmenu .menuitem { display: flex; margin: 5px 0px; padding: 5px 10px; align-items: middle; width: 270px; cursor: pointer; }
.dropmenu .menuicon { font-size: 15px; margin-right: 10px; padding: 10px; color: #2563eb; background-color: #dbeafe; border-radius: 8px; }
.dropmenu .menucont { flex-grow: 1; }
.dropmenu .subjects { font-size: 13px !important; font-weight: bold !important; color: #212121 !important; }
.dropmenu .subjects a { color: #414141 !important; }
.dropmenu .contents { font-size: 11px; color: #616161; }

.dropmenu .menuitem:not(.activate) { cursor: pointer; }
.dropmenu .menuitem.activate { background-color: #f0f0f0 !important; cursor: default; pointer-events: none; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ◇ Common Error Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.cmerrors { padding: 40px 0px;}
.cmerrors .errorbox { margin: 0 auto; background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01); padding: 40px 32px; }
.cmerrors .repimage { font-size: 35px; width: 56px; height: 56px; margin: 0 auto; color: red; }
.cmerrors .contacts { border-top: 1px solid #f0f0f0; }

@media (max-width: 650px) { .cmerrors .errorbox { width: 310px; } }
@media (min-width: 651px) { .cmerrors .errorbox { width: 450px; } }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ◇ UserInfo Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.rmsignin { display: flex; justify-content: center; background-image: url('/mdaspace/forlogin.jpg'); background-position: bottom; background-repeat: no-repeat; }
.rmsignin .formwrap { margin-bottom: 100px; border: 1px solid #f0f0f0; border-radius: 10px; background-color: rgba(255, 255, 255, 0.8); box-shadow: 1px 1px 5px #f0f0f0; }
.rmsignin .oauthimg { width: 40px; margin: 0px 5px; padding: 5px; border: 1px solid #a0a0a0; border-radius: 50%; }

@media (max-width: 650px) {
    .rmsignin { background-size: contain; }
    .rmsignin .formwrap { width: 310px; margin-top: 10px; }
}

@media (min-width: 651px)  {
    .rmsignin { background-size: 650px auto; }
    .rmsignin .formwrap { width: 450px; margin-top: 50px; }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ◇ Accounts Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.accounts { display: flex; justify-content: center; background-image: url('/mdaspace/accounts.jpg'); background-repeat: no-repeat; }
.accounts .formwrap { margin-bottom: 100px; border: 1px solid #f0f0f0; border-radius: 10px; background-color: rgba(255, 255, 255, 0.8); box-shadow: 1px 1px 5px #f0f0f0; }
.accounts ul li { line-height: 1.6em; padding-bottom: 5px; }

@media (max-width: 650px) {
    .accounts { background-size: contain; background-position: bottom; }
    .accounts .jessform { flex-direction: column; }
    .accounts #ldomRepImage { margin-bottom: 10px; }
}

@media (min-width: 651px) and (max-width: 991px) {
    .accounts { background-size: 650px auto; background-position: center; }
    .accounts #ldomRepImage { margin-right: 30px; }
    .accounts #ldomUserInfo { width: 300px; }
}

@media (min-width: 992px)  {
    .accounts { min-height: 500px; }
    .accounts #ldomRepImage { margin-right: 30px; background-position: center; }
    .accounts #ldomUserInfo { width: 450px; }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ◇ JessForm Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.jessform .formitem { display: flex; gap: 10px; align-items: stretch; border-radius: 5px; }
.jessform .formitem.notvalid { border: 1px solid #ff8a80; }
.jessform .formitem:not(.notvalid) { border: 1px solid #e0e0e0; }
.jessform .formitem > div { display: flex; align-items: center; }
.jessform input:not([type="checkbox"]) { width: 100%; outline: none; border: none; font-size: 14px; color: #212121; }
.jessform input[type="checkbox"] { vertical-align: middle; }
.jessform input:disabled { color: #909090; }
.jessform .preimage { font-size: 16px; color: #616161; }
.jessform .eyesicon { font-size: 16px; color: #616161; cursor: pointer; user-select: none; }
.jessform .formdesc { font-size: 12px; color: #616161; text-align: left; margin-top: -5px; }

.jessform div.validate { font-size: 16px; padding-right: 5px; }
.jessform div.validate.precheck { color: #9e9e9e; }
.jessform div.validate.checking { color: #616161; }
.jessform div.validate.complete { color: #00b074; }
.jessform div.validate.goterror { color: #ff8a80; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ◇ Uploader Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.uploader .cardhead { align-items: center; border: 1px solid #e0e0e0; background-color: #f0f0f0; }
.uploader .cardbody { border: 1px solid #e0e0e0; }
.uploader .progress { position: absolute; display: none; opacity: 90%; margin: 0; top: 0; left: 0; width: 100%; background-color: #e1f5fe; height: 15px; }
.uploader .percents { width: 0px; height: 100%; background-color: #039be5; }
.uploader .errorbox { position: absolute; display: none; top: 0; left: 0;  width: 100%; padding: 5px 10px; border: 1px solid #f4c6cb; color: #711d26; background-color: #f7d7da; }
.uploader .errorbox .closebox { float: right; font-weight: 500; cursor: pointer; }
.uploader .imageobj { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ◇ Referral Card Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.carditem { border-radius: 10px; background-color: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.carditem .cardhead { display: flex; justify-content: space-between; border-bottom: 1px solid #eaeaea; }
.carditem .cardhead .category { color: #9e9e9e; text-transform: uppercase; }
.carditem .cardhead .isactive { color: #00b074; }
.carditem .cardbody { display: flex; justify-content: space-between; align-items: flex-start; }
.carditem .cardbody .compinfo { display: flex; align-items: center; }
.carditem .cardbody .compinfo .complogo { display: flex; align-items: center; justify-content: center; height: 48px; font-size: 20px; border: 2px solid #f5f5f5; border-radius: 10px; }
.carditem .cardbody .compinfo .complogo img { max-width: 60px; max-height: 30px; }
.carditem .cardbody .compinfo .compname { color: #111111; }
.carditem .cardbody .compinfo .statinfo { color: #9e9e9e; }
.carditem .cardbody .refreward { color: #f97316 }
.carditem .cardcont { color: #616161; line-height: 1.6; border-bottom: 1px dashed #e0e0e0; }
.carditem .cardcont .linkitem { display: flex; flex-wrap: nowrap; border: 1px solid #e0e0e0; border-radius:5px; justify-content: space-between; align-items: center; }
.carditem .cardfoot { display: flex; justify-content: space-between; align-items: center; }
.carditem .valtitle { color: #9e9e9e; display: block; margin-bottom: 2px; }
.carditem .valdates { color : #212121; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ◇ Button Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.btn-flat { font-size: 13px; font-weight: bold; text-align: center; border-radius: 5px; transition: background-color 0.3s ease, color 0.3s ease; text-transform: none; }

.btn-flat.defaults { color: #1e40af; background-color: #dbeafe; border: 1px solid #bfdbfe; }
.btn-flat.darkcode { color: #f9fafb; background-color: #1f2937; border: 1px solid #111827; }
.btn-flat.midtoner { color: #374151; background-color: #f3f4f6; border: 1px solid #d1d5db; }
.btn-flat.lightash { color: #4b5563; background-color: #f9fafb; border: 1px solid #e5e7eb; }
.btn-flat.redalert { color: #991b1b; background-color: #fee2e2; border: 1px solid #fca5a5; }
.btn-flat.icewhite { color: #374151; background-color: #ffffff; border: 1px solid #e5e7eb; }
.btn-flat.softmint { color: #166534; background-color: #dcfce7; border: 1px solid #bbf7d0; }

.btn-flat.defaults:hover { color: #1e3a8a; background-color: #bfdbfe; }
.btn-flat.darkcode:hover { color: #ffffff; background-color: #111827; }
.btn-flat.midtoner:hover { color: #111827; background-color: #e5e7eb; }
.btn-flat.lightash:hover { color: #1f2937; background-color: #f3f4f6; }
.btn-flat.redalert:hover { color: #7f1d1d; background-color: #fca5a5; }
.btn-flat.icewhite:hover { color: #111827; background-color: #f3f4f6; }
.btn-flat.softmint:hover { color: #14532d; background-color: #bbf7d0; }

.btn-flat:disabled, .btn-flat.disabled, .btn-flat:disabled:hover, .btn-flat.disabled:hover {
    color: #909090 !important;
    background-color: #f3f4f6 !important;
    border: 1px solid #a0a0a0 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
    box-shadow: none !important;
    pointer-events: none;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ◇ AlertBox Styles
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.alertbox-prim { border: 1px solid #c7d2fe; background-color: #e0e7ff; color: #1d2a68; }
.alertbox-good { border: 1px solid #bbf7d0; background-color: #f0fdf4; color: #166534; }
.alertbox-info { border: 1px solid #bae6fd; background-color: #f0f9ff; color: #0369a1; }
.alertbox-warn { border: 1px solid #fde68a; background-color: #fffbeb; color: #b45309; }
.alertbox-dang { border: 1px solid #fecaca; background-color: #fef2f2; color: #991b1b; }
.alertbox-grey { border: 1px solid #e2e8f0; background-color: #f8fafc; color: #475569; }
.alertbox-dark { border: 1px solid #cbd5e1; background-color: #f1f5f9; color: #0f172a; }

.alertmsg-info { color: #0369a1 !important; }
.alertmsg-good { color: #166534 !important; }
.alertmsg-dang { color: #991b1b !important; }

/*
.guidebox { position: relative; padding: 5px; border: 1px solid #d0d0d0; background-color: #fafafa; }
.alertbox { padding: 0.7em; border-radius: 0.25em; text-align: center; }
.alertdiv { padding: 0.7em; margin: 0.5em 0.0em 0.0em 0.0em; text-align: center;}

.alertbox-prim { border: 1px solid #b9dbfd; background-color: #cde5fe; color: #064283; }
.alertbox-good { border: 1px solid #c4e5cc; background-color: #d5eddb; color: #195626; }
.alertbox-info { border: 1px solid #bfe5ea; background-color: #d2ecf1; color: #12545f; }
.alertbox-warn { border: 1px solid #feedbd; background-color: #fff2cf; color: #846315; }
.alertbox-dang { border: 1px solid #f4c6cb; background-color: #f7d7da; color: #711d26; }
.alertbox-grey { border: 1px solid #d6d8db; background-color: #e2e3e5; color: #52565a; }
.alertbox-dark { border: 1px solid #c6c8ca; background-color: #d6d8d9; color: #313d3f; }

.alertbox.outlines { background-color: #ffffff !important; }

.guidebox .closebox { position: absolute; display: block; font-size: 20px; top: 0; right: 5px; color: #7f7f7f; cursor: pointer; z-index: 1; }
.alertbox .closebox { display: block; float: right; font-size: 1.5em; font-weight: bold; color: #7f7f7f; cursor: pointer; margin: -0.4em 0.5em 0em 0.5em; }

.alertdiv-dang { color: #ef5350; background-color: #ffebee; border-top: 1px solid #ffcdd2; border-bottom: 1px solid #ffcdd2; }

.shadebox { padding: 0.7em; text-align: center; }
.shadebox-prim { color: #004085; background-color: #cce5ff; border-top: 1px solid #b8daff; border-bottom: 1px solid #b8daff; }
.shadebox-warn { color: #ffb300; background-color: #fff8e1; border-top: 1px solid #ffb300; border-bottom: 1px solid #ffb300; }
.shadebox-grey { color: #383d41; background-color: #f7f7f7; border-top: 1px solid #d6d8db; border-bottom: 1px solid #d6d8db; }
.shadebox-good { color: #2e7d32; background-color: #e8f5e9; border-top: 1px solid #a5d6a7; border-bottom: 1px solid #a5d6a7; }
.shadebox-info { color: #1a4d9a; background-color: #f4f8ff; border-top: 1px solid #bfd9ff; border-bottom: 1px solid #bfd9ff; }
*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ◇ CodeMirror Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.CodeMirror { height: auto !important; border: 1px solid #dddddd; font-family: 'JetBrains Mono', monospace; font-size: 12px; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ◇ Utility Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.collapse { display: none !important; }
.relative { position: relative; }
.flexgrid { display: flex; flex-wrap: nowrap; }
.flexgrow { flex-grow: 1; }
.boldtext { font-weight: bold !important; }
.whitebox { background-color: #ffffff; border-radius: 10px; }
.codeview { font-family: 'JetBrains Mono', monospace; }
.codeview input.select-dropdown { font-family: 'JetBrains Mono', monospace; margin-bottom: 0; }
.descfont { color: #616161; }
.emphasis { color: #f97316; }
.inactive { color: #a0a0a0; }
.ellipsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.imagefit { object-fit: cover; }
.opacity4 { opacity: 0.4; }
.opacity9 { opacity: 0.9; }

.width100 { width: 100% !important; }
.lineht15 { line-height: 1.5em; }
.lineht18 { line-height: 1.8em; }

.radius05 { border-radius: 05px; }
.radius10 { border-radius: 10px; }
.radius50 { border-radius: 50%;   }

.alignct { text-align: center; }
.alignlt { text-align: left; }
.alignrt { text-align: right; }

.linetext { display: flex; align-items: center; color: #666; margin: 15px 0; }
.linetext::before, .linetext::after { content: ""; flex-grow: 1; background: #ccc; height: 1px; }
.linetext::before { margin-right: 10px; }
.linetext::after { margin-left: 10px; }

/*
*[data-linkhref] { cursor: pointer; }
*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ◇ FontSize Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.fasize10 { font-size: 10px; }
.fasize11 { font-size: 11px; }
.fasize12 { font-size: 12px; }
.fasize13 { font-size: 13px; }
.fasize14 { font-size: 14px; }
.fasize15 { font-size: 15px; }
.fasize16 { font-size: 16px; }
.fasize17 { font-size: 17px; }
.fasize18 { font-size: 18px; }
.fasize19 { font-size: 19px; }
.fasize20 { font-size: 20px; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ◇ Margin & Padding Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.ma00 { margin: 00px !important; }
.ma01 { margin: 01px !important; }
.ma02 { margin: 02px !important; }
.ma03 { margin: 03px !important; }
.ma04 { margin: 04px !important; }
.ma05 { margin: 05px !important; }
.ma06 { margin: 06px !important; }
.ma07 { margin: 07px !important; }
.ma08 { margin: 08px !important; }
.ma09 { margin: 09px !important; }
.ma10 { margin: 10px !important; }
.ma11 { margin: 11px !important; }
.ma12 { margin: 12px !important; }
.ma13 { margin: 13px !important; }
.ma14 { margin: 14px !important; }
.ma15 { margin: 15px !important; }
.ma20 { margin: 20px !important; }

.mt00 { margin-top: 00px !important; }
.mt01 { margin-top: 01px !important; }
.mt02 { margin-top: 02px !important; }
.mt03 { margin-top: 03px !important; }
.mt04 { margin-top: 04px !important; }
.mt05 { margin-top: 05px !important; }
.mt06 { margin-top: 06px !important; }
.mt07 { margin-top: 07px !important; }
.mt08 { margin-top: 08px !important; }
.mt09 { margin-top: 09px !important; }
.mt10 { margin-top: 10px !important; }
.mt11 { margin-top: 11px !important; }
.mt12 { margin-top: 12px !important; }
.mt13 { margin-top: 13px !important; }
.mt14 { margin-top: 14px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }

.ml00 { margin-left: 00px !important; }
.ml01 { margin-left: 01px !important; }
.ml02 { margin-left: 02px !important; }
.ml03 { margin-left: 03px !important; }
.ml04 { margin-left: 04px !important; }
.ml05 { margin-left: 05px !important; }
.ml06 { margin-left: 06px !important; }
.ml07 { margin-left: 07px !important; }
.ml08 { margin-left: 08px !important; }
.ml09 { margin-left: 09px !important; }
.ml10 { margin-left: 10px !important; }
.ml11 { margin-left: 11px !important; }
.ml12 { margin-left: 12px !important; }
.ml13 { margin-left: 13px !important; }
.ml14 { margin-left: 14px !important; }
.ml15 { margin-left: 15px !important; }
.ml25 { margin-left: 25px !important; }

.mr00 { margin-right: 00px !important; }
.mr01 { margin-right: 01px !important; }
.mr02 { margin-right: 02px !important; }
.mr03 { margin-right: 03px !important; }
.mr04 { margin-right: 04px !important; }
.mr05 { margin-right: 05px !important; }
.mr06 { margin-right: 06px !important; }
.mr07 { margin-right: 07px !important; }
.mr08 { margin-right: 08px !important; }
.mr09 { margin-right: 09px !important; }
.mr10 { margin-right: 10px !important; }
.mr11 { margin-right: 11px !important; }
.mr12 { margin-right: 12px !important; }
.mr13 { margin-right: 13px !important; }
.mr14 { margin-right: 14px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }

.mb00 { margin-bottom: 00px !important; }
.mb01 { margin-bottom: 01px !important; }
.mb02 { margin-bottom: 02px !important; }
.mb03 { margin-bottom: 03px !important; }
.mb04 { margin-bottom: 04px !important; }
.mb05 { margin-bottom: 05px !important; }
.mb06 { margin-bottom: 06px !important; }
.mb07 { margin-bottom: 07px !important; }
.mb08 { margin-bottom: 08px !important; }
.mb09 { margin-bottom: 09px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb11 { margin-bottom: 11px !important; }
.mb12 { margin-bottom: 12px !important; }
.mb13 { margin-bottom: 13px !important; }
.mb14 { margin-bottom: 14px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }

.mx00 { margin-left: 00px !important; margin-right: 00px !important; }
.mx01 { margin-left: 01px !important; margin-right: 01px !important; }
.mx02 { margin-left: 02px !important; margin-right: 02px !important; }
.mx03 { margin-left: 03px !important; margin-right: 03px !important; }
.mx04 { margin-left: 04px !important; margin-right: 04px !important; }
.mx05 { margin-left: 05px !important; margin-right: 05px !important; }
.mx06 { margin-left: 06px !important; margin-right: 06px !important; }
.mx07 { margin-left: 07px !important; margin-right: 07px !important; }
.mx08 { margin-left: 08px !important; margin-right: 08px !important; }
.mx09 { margin-left: 09px !important; margin-right: 09px !important; }
.mx10 { margin-left: 10px !important; margin-right: 10px !important; }
.mx11 { margin-left: 11px !important; margin-right: 11px !important; }
.mx12 { margin-left: 12px !important; margin-right: 12px !important; }
.mx13 { margin-left: 13px !important; margin-right: 13px !important; }
.mx14 { margin-left: 14px !important; margin-right: 14px !important; }
.mx15 { margin-left: 15px !important; margin-right: 15px !important; }
.mx20 { margin-left: 20px !important; margin-right: 20px !important; }

.my00 { margin-top: 00px !important; margin-bottom: 00px !important; }
.my01 { margin-top: 01px !important; margin-bottom: 01px !important; }
.my02 { margin-top: 02px !important; margin-bottom: 02px !important; }
.my03 { margin-top: 03px !important; margin-bottom: 03px !important; }
.my04 { margin-top: 04px !important; margin-bottom: 04px !important; }
.my05 { margin-top: 05px !important; margin-bottom: 05px !important; }
.my06 { margin-top: 06px !important; margin-bottom: 06px !important; }
.my07 { margin-top: 07px !important; margin-bottom: 07px !important; }
.my08 { margin-top: 08px !important; margin-bottom: 08px !important; }
.my09 { margin-top: 09px !important; margin-bottom: 09px !important; }
.my10 { margin-top: 10px !important; margin-bottom: 10px !important; }
.my11 { margin-top: 11px !important; margin-bottom: 11px !important; }
.my12 { margin-top: 12px !important; margin-bottom: 12px !important; }
.my13 { margin-top: 13px !important; margin-bottom: 13px !important; }
.my14 { margin-top: 14px !important; margin-bottom: 14px !important; }
.my15 { margin-top: 15px !important; margin-bottom: 15px !important; }
.my20 { margin-top: 20px !important; margin-bottom: 20px !important; }

.pa00 { padding: 00px !important; }
.pa01 { padding: 01px !important; }
.pa02 { padding: 02px !important; }
.pa03 { padding: 03px !important; }
.pa04 { padding: 04px !important; }
.pa05 { padding: 05px !important; }
.pa06 { padding: 06px !important; }
.pa07 { padding: 07px !important; }
.pa08 { padding: 08px !important; }
.pa09 { padding: 09px !important; }
.pa10 { padding: 10px !important; }
.pa11 { padding: 11px !important; }
.pa12 { padding: 12px !important; }
.pa13 { padding: 13px !important; }
.pa14 { padding: 14px !important; }
.pa15 { padding: 15px !important; }
.pa20 { padding: 20px !important; }
.pa30 { padding: 30px !important; }
.pa40 { padding: 40px !important; }

.pt00 { padding-top: 00px !important; }
.pt01 { padding-top: 01px !important; }
.pt02 { padding-top: 02px !important; }
.pt03 { padding-top: 03px !important; }
.pt04 { padding-top: 04px !important; }
.pt05 { padding-top: 05px !important; }
.pt06 { padding-top: 06px !important; }
.pt07 { padding-top: 07px !important; }
.pt08 { padding-top: 08px !important; }
.pt09 { padding-top: 09px !important; }
.pt10 { padding-top: 10px !important; }
.pt11 { padding-top: 11px !important; }
.pt12 { padding-top: 12px !important; }
.pt13 { padding-top: 13px !important; }
.pt14 { padding-top: 14px !important; }
.pt15 { padding-top: 15px !important; }
.pt20 { padding-top: 20px !important; }

.pl00 { padding-left: 00px !important; }
.pl01 { padding-left: 01px !important; }
.pl02 { padding-left: 02px !important; }
.pl03 { padding-left: 03px !important; }
.pl04 { padding-left: 04px !important; }
.pl05 { padding-left: 05px !important; }
.pl06 { padding-left: 06px !important; }
.pl07 { padding-left: 07px !important; }
.pl08 { padding-left: 08px !important; }
.pl09 { padding-left: 09px !important; }
.pl10 { padding-left: 10px !important; }
.pl11 { padding-left: 11px !important; }
.pl12 { padding-left: 12px !important; }
.pl13 { padding-left: 13px !important; }
.pl14 { padding-left: 14px !important; }
.pl15 { padding-left: 15px !important; }

.pr00 { padding-right: 00px !important; }
.pr01 { padding-right: 01px !important; }
.pr02 { padding-right: 02px !important; }
.pr03 { padding-right: 03px !important; }
.pr04 { padding-right: 04px !important; }
.pr05 { padding-right: 05px !important; }
.pr06 { padding-right: 06px !important; }
.pr07 { padding-right: 07px !important; }
.pr08 { padding-right: 08px !important; }
.pr09 { padding-right: 09px !important; }
.pr10 { padding-right: 10px !important; }
.pr11 { padding-right: 11px !important; }
.pr12 { padding-right: 12px !important; }
.pr13 { padding-right: 13px !important; }
.pr14 { padding-right: 14px !important; }
.pr15 { padding-right: 15px !important; }

.pb00 { padding-bottom: 00px !important; }
.pb01 { padding-bottom: 01px !important; }
.pb02 { padding-bottom: 02px !important; }
.pb03 { padding-bottom: 03px !important; }
.pb04 { padding-bottom: 04px !important; }
.pb05 { padding-bottom: 05px !important; }
.pb06 { padding-bottom: 06px !important; }
.pb07 { padding-bottom: 07px !important; }
.pb08 { padding-bottom: 08px !important; }
.pb09 { padding-bottom: 09px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb11 { padding-bottom: 11px !important; }
.pb12 { padding-bottom: 12px !important; }
.pb13 { padding-bottom: 13px !important; }
.pb14 { padding-bottom: 14px !important; }
.pb15 { padding-bottom: 15px !important; }

.px00 { padding-left: 00px !important; padding-right: 00px !important; }
.px01 { padding-left: 01px !important; padding-right: 01px !important; }
.px02 { padding-left: 02px !important; padding-right: 02px !important; }
.px03 { padding-left: 03px !important; padding-right: 03px !important; }
.px04 { padding-left: 04px !important; padding-right: 04px !important; }
.px05 { padding-left: 05px !important; padding-right: 05px !important; }
.px06 { padding-left: 06px !important; padding-right: 06px !important; }
.px07 { padding-left: 07px !important; padding-right: 07px !important; }
.px08 { padding-left: 08px !important; padding-right: 08px !important; }
.px09 { padding-left: 09px !important; padding-right: 09px !important; }
.px10 { padding-left: 10px !important; padding-right: 10px !important; }
.px11 { padding-left: 11px !important; padding-right: 11px !important; }
.px12 { padding-left: 12px !important; padding-right: 12px !important; }
.px13 { padding-left: 13px !important; padding-right: 13px !important; }
.px14 { padding-left: 14px !important; padding-right: 14px !important; }
.px15 { padding-left: 15px !important; padding-right: 15px !important; }
.px20 { padding-left: 20px !important; padding-right: 20px !important; }

.py00 { padding-top: 01px !important; padding-bottom: 00px !important; }
.py01 { padding-top: 01px !important; padding-bottom: 01px !important; }
.py02 { padding-top: 02px !important; padding-bottom: 02px !important; }
.py03 { padding-top: 03px !important; padding-bottom: 03px !important; }
.py04 { padding-top: 04px !important; padding-bottom: 04px !important; }
.py05 { padding-top: 05px !important; padding-bottom: 05px !important; }
.py06 { padding-top: 06px !important; padding-bottom: 06px !important; }
.py07 { padding-top: 07px !important; padding-bottom: 07px !important; }
.py08 { padding-top: 08px !important; padding-bottom: 08px !important; }
.py09 { padding-top: 09px !important; padding-bottom: 09px !important; }
.py10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.py11 { padding-top: 11px !important; padding-bottom: 11px !important; }
.py12 { padding-top: 12px !important; padding-bottom: 12px !important; }
.py13 { padding-top: 13px !important; padding-bottom: 13px !important; }
.py14 { padding-top: 14px !important; padding-bottom: 14px !important; }
.py15 { padding-top: 15px !important; padding-bottom: 15px !important; }
.py20 { padding-top: 20px !important; padding-bottom: 20px !important; }
.py25 { padding-top: 25px !important; padding-bottom: 25px !important; }
.py30 { padding-top: 30px !important; padding-bottom: 30px !important; }
.py40 { padding-top: 40px !important; padding-bottom: 40px !important; }