/* naming convention: 1 - first letter is appreviation of attribute. i.e. width: w 2 - value without unit 3 - In case 2 attributes starts with the same letter use first and second letter. i.e. b for border, bg for background 4 - Use the minues before the letter to disable the attribute. 5 - special letters meaning: p : percentage f : fit a : auto b : bold 6 - Colors are useed by name for text and with prefix bg for background */ /* width */ .we { width: var(--elementWidth) !important} .w8 { width:8px !important } .w12 { width:12px !important } .w16 { width:16px !important } .w20 { width:20px !important } .w24 { width:24px !important } .mw20 { min-width:20px !important } .mw24 { min-width:24px !important } .w25 { width:25px !important } .w30 { width:30px !important } .w32 { width:32px !important } .w40 { width:40px !important } .w50 { width:50px !important } .w60 { width:60px !important } .w70 { width:70px !important } .w80 { width:80px !important } .w100 { width:100px !important } .w120 { width:120px !important } .w150 { width:150px !important } .w200 { width:200px !important } .w230 { width:230px !important } .w240 { width:240px !important } .w250 { width:250px !important } .w260 { width:260px !important } .w280 { width:280px !important } .w300 { width:300px !important } .w350 { width:350px !important } .w380 { width:380px !important } .w400 { width:400px !important } .w500 { width:500px !important } .w600 { width:600px !important } .w700 { width:700px !important } .w800 { width:800px !important } .w900 { width:900px !important } .w1024 { width:1024px !important } .w100p { width: 100% !important } .w75p { width: 75% !important } .w70p { width: 70% !important } .w60p { width: 60% !important } .w50p { width: 50% !important } .w40p { width: 40% !important } .w35p { width: 35% !important } .w30p { width: 30% !important } .w25p { width: 25% !important } .w20p { width: 20% !important } .wa { width : auto; } .wf { width: fit-content } /* heig ht */ .he { height:var(--elementHeight) !important; min-height: var(--elementHeight) !important; } .h8 { height:8px !important } .h12 { height:12px !important } .h16 { height:16px !important } .h20 { height:20px !important } .h24 { height:24px !important } .h28 { height:28px !important } .h32 { height:32px !important } .h20 { height:20px !important } .h30 { height:30px !important } .h40 { height:40px !important } .h50 { height:50px !important } .h60 { height:60px !important } .h100 { height:100px !important} .h150 { height:150px !important} .h200 { height:200px !important} .h300 { height:300px !important} .h320 { height:320px !important} .h340 { height:340px !important} .h360 { height:360px !important} .h380 { height:380px !important} .h400 { height:400px !important} .h500 { height:500px !important} .h600 { height:600px !important} .h700 { height:700px !important} .h800 { height:800px !important} .wh2 { width: 2px !important; height:2px !important; } .wh4 { width: 4px !important; height:4px !important; } .wh10 { width: 10px !important; height:10px !important; } .wh12 { width: 12px !important; height:12px !important; } .wh14 { width: 14px !important; height:14px !important; } .wh16 { width: 16px !important; height:16px !important; } .wh18 { width: 18px !important; height:18px !important; } .wh20 { width: 20px !important; height:20px !important; } .wh22 { width: 22px !important; height:22px !important; } .wh24 { width: 24px !important; height:24px !important; } .wh26 { width: 26px !important; height:26px !important; } .wh28 { width: 28px !important; height:28px !important; } .wh30 { width: 30px !important; height:30px !important; } .wh32 { width: 32px !important; height:32px !important; } .wh40 { width: 40px !important; height:40px !important; } .wh50 { width: 50px !important; height:50px !important; } .wh60 { width: 60px !important; height:60px !important; } .wh80 { width: 80px !important; height:80px !important; } .wh90 { width: 90px !important; height:90px !important; } .wh100 { width: 100px !important; height:100px !important; } .h100p { height:100% !important } .h85p { height: 75% !important } .h80p { height: 80% !important } .h75p { height: 75% !important } .h50p { height: 50% !important } .h35p { height: 35% !important } .h25p { height: 25% !important } .wh100p { width: 100% !important; height:100% !important; } .wh80p { width: 80% !important; height:80% !important; } .wh65p { width: 60% !important; height:65% !important; } .wh60p { width: 60% !important; height:60% !important; } .wh50p { width: 50% !important; height:50% !important; } .wh40p { width: 40% !important; height:40% !important; } .wh25p { width: 20% !important; height:25% !important; } .wh20p { width: 20% !important; height:20% !important; } .wh10p { width: 10% !important; height:10% !important; } .hf { height: fit-content !important; } .ha { height: auto !important; } .p1 { padding: 1px; } .p2 { padding: 2px; } .p4 { padding: 4px; } .p6 { padding: 6px; } .p8 { padding: 8px; } .p10 { padding: 10px; } .p12 { padding: 12px; } .p14 { padding: 14px; } .p16 { padding: 16px; } .p30 { padding: 30px; } .p20 { padding: 20px; } .-p { padding: 0px !important; } /* border */ .ma { margin: auto; } .m2 { margin: 2px; } .m4 { margin: 4px; } .m8 { margin: 8px; } .m10 { margin: 10px; } .m30 { margin: 30px; } .m20 { margin: 20px; } .-m { margin: 0px !important; } .prl2 { padding-left: 2px; padding-right: 2px; } .mrl2 { margin-left: 2px; margin-right: 2px; } .prl3 { padding-left: 3px; padding-right: 3px; } .mrl3 { margin-left: 3px; margin-right: 3px; } .prl4 { padding-left: 4px; padding-right: 4px; } .mrl4 { margin-left: 4px; margin-right: 4px; } .prl6 { padding-left: 6px; padding-right: 6px; } .mrl6 { margin-left: 6px; margin-right: 6px; } .prl8 { padding-left: 8px; padding-right: 8px; } .mrl8 { margin-left: 8px; margin-right: 8px; } .prl10 { padding-left: 10px; padding-right: 10px; } .mrl10 { margin-left: 10px; margin-right: 10px; } .prl12 { padding-left: 12px; padding-right: 12px; } .mrl12 { margin-left: 12px; margin-right: 12px; } .prl14 { padding-left: 14px; padding-right: 14px; } .mrl14 { margin-left: 14px; margin-right: 14px; } .prl16 { padding-left: 16px; padding-right: 16px; } .mrl16 { margin-left: 16px; margin-right: 16px; } .prl18 { padding-left: 18px; padding-right: 18px; } .mrl18 { margin-left: 18px; margin-right: 18px; } .prl20 { padding-left: 20px; padding-right: 20px; } .mrl20 { margin-left: 20px; margin-right: 20px; } .prl22 { padding-left: 22px; padding-right: 22px; } .mrl22 { margin-left: 22px; margin-right: 22px; } .prl24 { padding-left: 24px; padding-right: 24px; } .mrl24 { margin-left: 24px; margin-right: 24px; } .prl26 { padding-left: 26px; padding-right: 26px; } .mrl26 { margin-left: 26px; margin-right: 26px; } .prl28 { padding-left: 28px; padding-right: 28px; } .mrl28 { margin-left: 28px; margin-right: 28px; } .prl30 { padding-left: 30px; padding-right: 30px; } .mrl30 { margin-left: 30px; margin-right: 30px; } .prl32 { padding-left: 32px; padding-right: 32px; } .mrl32 { margin-left: 32px; margin-right: 32px; } .prl40 { padding-left: 40px; padding-right: 40px; } .mrl40 { margin-left: 40px; margin-right: 40px; } .prl50 { padding-left: 50px; padding-right: 50px; } .mrl50 { margin-left: 50px; margin-right: 50px; } .pbt2 { padding-top: 2px; padding-bottom: 2px; } .mbt2 { margin-top: 2px; margin-bottom: 2px; } .pbt3 { padding-top: 3px; padding-bottom: 3px; } .mbt3 { margin-top: 3px; margin-bottom: 3px; } .pbt4 { padding-top: 4px; padding-bottom: 4px; } .mbt4 { margin-top: 4px; margin-bottom: 4px; } .pbt6 { padding-top: 6px; padding-bottom: 6px; } .mbt6 { margin-top: 6px; margin-bottom: 6px; } .pbt8 { padding-top: 8px; padding-bottom: 8px; } .mbt8 { margin-top: 8px; margin-bottom: 8px; } .pbt10 { padding-top: 10px; padding-bottom: 10px; } .mbt10 { margin-top: 10px; margin-bottom: 10px; } .pbt12 { padding-top: 12px; padding-bottom: 12px; } .mbt12 { margin-top: 12px; margin-bottom: 12px; } .pbt14 { padding-top: 14px; padding-bottom: 14px; } .mbt14 { margin-top: 14px; margin-bottom: 14px; } .pbt16 { padding-top: 16px; padding-bottom: 16px; } .mbt16 { margin-top: 16px; margin-bottom: 16px; } .pbt18 { padding-top: 18px; padding-bottom: 18px; } .mbt18 { margin-top: 18px; margin-bottom: 18px; } .pbt20 { padding-top: 20px; padding-bottom: 20px; } .mbt20 { margin-top: 20px; margin-bottom: 20px; } .pbt22 { padding-top: 22px; padding-bottom: 22px; } .mbt22 { margin-top: 22px; margin-bottom: 22px; } .pbt24 { padding-top: 24px; padding-bottom: 24px; } .mbt24 { margin-top: 24px; margin-bottom: 24px; } .pbt26 { padding-top: 26px; padding-bottom: 26px; } .mbt26 { margin-top: 26px; margin-bottom: 26px; } .pbt28 { padding-top: 28px; padding-bottom: 28px; } .mbt28 { margin-top: 28px; margin-bottom: 28px; } .pbt30 { padding-top: 30px; padding-bottom: 30px; } .mbt30 { margin-top: 30px; margin-bottom: 30px; } .pbt32 { padding-top: 32px; padding-bottom: 32px; } .mbt32 { margin-top: 32px; margin-bottom: 32px; } .pbt40 { padding-top: 40px; padding-bottom: 40px; } .mbt40 { margin-top: 40px; margin-bottom: 40px; } .pbt50 { padding-top: 50px; padding-bottom: 50px; } .mbt50 { margin-top: 50px; margin-bottom: 50px; } .plr2 { padding-left: 2px; padding-right: 2px; } .mlr2 { margin-left: 2px; margin-right: 2px; } .plr3 { padding-left: 3px; padding-right: 3px; } .mlr3 { margin-left: 3px; margin-right: 3px; } .plr4 { padding-left: 4px; padding-right: 4px; } .mlr4 { margin-left: 4px; margin-right: 4px; } .plr6 { padding-left: 6px; padding-right: 6px; } .mlr6 { margin-left: 6px; margin-right: 6px; } .plr8 { padding-left: 8px; padding-right: 8px; } .mlr8 { margin-left: 8px; margin-right: 8px; } .plr10 { padding-left: 10px; padding-right: 10px; } .mlr10 { margin-left: 10px; margin-right: 10px; } .plr12 { padding-left: 12px; padding-right: 12px; } .mlr12 { margin-left: 12px; margin-right: 12px; } .plr14 { padding-left: 14px; padding-right: 14px; } .mlr14 { margin-left: 14px; margin-right: 14px; } .plr16 { padding-left: 16px; padding-right: 16px; } .mlr16 { margin-left: 16px; margin-right: 16px; } .plr18 { padding-left: 18px; padding-right: 18px; } .mlr18 { margin-left: 18px; margin-right: 18px; } .plr20 { padding-left: 20px; padding-right: 20px; } .mlr20 { margin-left: 20px; margin-right: 20px; } .plr22 { padding-left: 22px; padding-right: 22px; } .mlr22 { margin-left: 22px; margin-right: 22px; } .plr24 { padding-left: 24px; padding-right: 24px; } .mlr24 { margin-left: 24px; margin-right: 24px; } .plr26 { padding-left: 26px; padding-right: 26px; } .mlr26 { margin-left: 26px; margin-right: 26px; } .plr28 { padding-left: 28px; padding-right: 28px; } .mlr28 { margin-left: 28px; margin-right: 28px; } .plr30 { padding-left: 30px; padding-right: 30px; } .mlr30 { margin-left: 30px; margin-right: 30px; } .plr32 { padding-left: 32px; padding-right: 32px; } .mlr32 { margin-left: 32px; margin-right: 32px; } .plr40 { padding-left: 40px; padding-right: 40px; } .mlr40 { margin-left: 40px; margin-right: 40px; } .plr50 { padding-left: 50px; padding-right: 50px; } .mlr50 { margin-left: 50px; margin-right: 50px; } .ptb2 { padding-top: 2px; padding-bottom: 2px; } .mtb2 { margin-top: 2px; margin-bottom: 2px; } .ptb3 { padding-top: 3px; padding-bottom: 3px; } .mtb3 { margin-top: 3px; margin-bottom: 3px; } .ptb4 { padding-top: 4px; padding-bottom: 4px; } .mtb4 { margin-top: 4px; margin-bottom: 4px; } .ptb6 { padding-top: 6px; padding-bottom: 6px; } .mtb6 { margin-top: 6px; margin-bottom: 6px; } .ptb8 { padding-top: 8px; padding-bottom: 8px; } .mtb8 { margin-top: 8px; margin-bottom: 8px; } .ptb10 { padding-top: 10px; padding-bottom: 10px; } .mtb10 { margin-top: 10px; margin-bottom: 10px; } .ptb12 { padding-top: 12px; padding-bottom: 12px; } .mtb12 { margin-top: 12px; margin-bottom: 12px; } .ptb14 { padding-top: 14px; padding-bottom: 14px; } .mtb14 { margin-top: 14px; margin-bottom: 14px; } .ptb16 { padding-top: 16px; padding-bottom: 16px; } .mtb16 { margin-top: 16px; margin-bottom: 16px; } .ptb18 { padding-top: 18px; padding-bottom: 18px; } .mtb18 { margin-top: 18px; margin-bottom: 18px; } .ptb20 { padding-top: 20px; padding-bottom: 20px; } .mtb20 { margin-top: 20px; margin-bottom: 20px; } .ptb22 { padding-top: 22px; padding-bottom: 22px; } .mtb22 { margin-top: 22px; margin-bottom: 22px; } .ptb24 { padding-top: 24px; padding-bottom: 24px; } .mtb24 { margin-top: 24px; margin-bottom: 24px; } .ptb26 { padding-top: 26px; padding-bottom: 26px; } .mtb26 { margin-top: 26px; margin-bottom: 26px; } .ptb28 { padding-top: 28px; padding-bottom: 28px; } .mtb28 { margin-top: 28px; margin-bottom: 28px; } .ptb30 { padding-top: 30px; padding-bottom: 30px; } .mtb30 { margin-top: 30px; margin-bottom: 30px; } .ptb32 { padding-top: 32px; padding-bottom: 32px; } .mtb32 { margin-top: 32px; margin-bottom: 32px; } .ptb40 { padding-top: 40px; padding-bottom: 40px; } .mtb40 { margin-top: 40px; margin-bottom: 40px; } .ptb50 { padding-top: 50px; padding-bottom: 50px; } .mtb50 { margin-top: 50px; margin-bottom: 50px; } /* border */ .bw { border: 1px solid var(--white) !important;} .bw2 { border: 2px solid var(--white) !important;} .bw3 { border: 3px solid var(--white) !important;} .b { border: var(--border) !important} .bd { border: var(--borderDash) !important} .bb { border-bottom: var(--border) !important} .bb2 { border-bottom: var(--border2) !important} .br { border-right: var(--border) !important} .bt { border-top: var(--border) !important} .bl { border-left: var(--border) !important} .-b { border: none; } /* radius */ .r2 { border-radius: 2px; } .r4 { border-radius: 4px; } .rt4 { border-radius: 4px 4px 0px 0px; } .rb4 { border-radius: 0px 0px 4px 4px; } .r8 { border-radius: 8px; } .r10 { border-radius: 10px; } .r12 { border-radius: 12px; } .r15 { border-radius: 15px; } .r30 { border-radius: 30px; } .r20 { border-radius: 20px; } .r25 { border-radius: 25px; } .r { border-radius: 100% } .-r { border-radius: 0px } .rf { border-radius: 100% } /* Font Size */ .f10 { font-size: 10px !important } .f11 { font-size: 11px !important } .f12 { font-size: 12px !important } .f14 { font-size: 14px !important } .f16 { font-size: 16px !important } .f18 { font-size: 18px !important } .f24 { font-size: 24px !important } .f32 { font-size: 32px !important } .f36 { font-size: 36px !important } .f48 { font-size: 48px !important } .fw1 { font-weight: 100 !important ; } .fw2 { font-weight: 200 !important ; } .fw3 { font-weight: 300 !important ; } .fw4 { font-weight: 400 !important ; } .fw5 { font-weight: 500 !important ; } .fw6 { font-weight: 600 !important ; } .fw7 { font-weight: 700 !important ; } .fw8 { font-weight: 800 !important ; } .fw9 { font-weight: 900 !important ; } .fwBold { font-weight: bold !important ; } /* font sizing */ H1 { font-size: 48px;} H2 { font-size: 36px;} H3 { font-size: 24px;} H4 { font-size: 18px;} H5 { font-size: 12px;} H6 { font-size: 11px;} /* Layout arrangment Flex */ .f { display: flex;} .fcv { display:flex; align-items: center; } .fch { display:flex; justify-content: center; } .fc { display:flex; align-items: center; justify-content: center; } .ffr { flex-flow: row wrap !important } .jcsb { justify-content: space-between; } .fdc { flex-flow:column; flex-direction: column; } .fdr { flex-flow:row; } .fgr { display:flex; flex: 1; } .fgc { display:flex; flex: 1; } /* Grid */ .g { display: grid; grid-gap: var(--gap);} .mc { grid-column:-1/1; } .mr { grid-row: -1/1; } /* Display & Visibility */ .d { display: block;} .-d { display: none;} .v { visibility: visible;} .-v { visibility: hidden;} /* opacity */ .o1 { opacity: 0.1;} .o2 { opacity: 0.2;} .o4 { opacity: 0.4;} .o6 { opacity: 0.6;} .o8 { opacity: 0.8;} .o10 { opacity: 1; } /*position*/ .pa { position: absolute;} .paz { position: absolute; top:0; right: 0; left: 0; bottom: 0 ;} .pr { position: relative;} /* coloring */ .bgWhite { background-color: var(--white); } .bgOffWhite { background-color: var(--offWhite); } .bgOffWhite10 { background-color: var(--offWhite10); } .bgGray { background-color: var(--gray); } .bgGray60 { background-color: var(--gray60); } .bgGray30 { background-color: var(--gray30); } .bgGray10 { background-color: var(--gray10); } .bgPrimary { background-color: var(--primary); } .bgSecondary { background-color: var(--secondary); } .bgModerate { background-color: var(--moderate) !important ; } .bgLight { background-color: var(--light) !important ; } .bgNotImportant { background-color: var(--notImportant) !important ; } .bgDisabled { background-color: var(--disabled) !important ; } .bgDanger { background-color: var(--danger) !important ; } .bgConfirm { background-color: var(--confirm) !important ; } .bgWarning { background-color: var(--warning) !important ; } .bgApprove { background-color: var(--approve); } .bgDanger10 { background-color: var(--danger10) !important ; } .bgConfirm10 { background-color: var(--confirm10) !important ; } .bgWarning10 { background-color: var(--warning10) !important ; } .bgApprove10 { background-color: var(--approve10); } .bgAlert { background-color: var(--alert); } .bgNutral { background-color: var(--nutral); } .bgAction { background-color: var(--action); } .bgRed { background-color: var(--red); } .bgGreen { background-color: var(--green); } .fWhite {filter: invert(100%) sepia(0%) saturate(2797%) hue-rotate(224deg) brightness(113%) contrast(101%);} .fBlack {filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(308deg) brightness(99%) contrast(101%);} .fPrimary {filter: invert(7%) sepia(28%) saturate(1467%) hue-rotate(178deg) brightness(92%) contrast(97%);} .fSecondary {filter: invert(20%) sepia(23%) saturate(741%) hue-rotate(175deg) brightness(98%) contrast(80%);} .fModerate {filter: invert(61%) sepia(10%) saturate(338%) hue-rotate(179deg) brightness(91%) contrast(82%);} .fLight {filter: invert(87%) sepia(6%) saturate(149%) hue-rotate(175deg) brightness(95%) contrast(82%);} .fNotImportant {filter: invert(100%) sepia(1%) saturate(1540%) hue-rotate(178deg) brightness(97%) contrast(92%);} .fDisabled {filter: invert(99%) sepia(3%) saturate(6941%) hue-rotate(182deg) brightness(112%) contrast(94%);} .fDanger {filter: invert(46%) sepia(91%) saturate(3750%) hue-rotate(338deg) brightness(93%) contrast(81%);} .fConfirm {filter: invert(30%) sepia(57%) saturate(6350%) hue-rotate(231deg) brightness(94%) contrast(103%);} .fWarning {filter: invert(100%) sepia(35%) saturate(4452%) hue-rotate(311deg) brightness(98%) contrast(91%);} .fApprove {filter: invert(44%) sepia(8%) saturate(2871%) hue-rotate(79deg) brightness(101%) contrast(86%);} .black { color: var(--dark) !important ; } .primary { color: var(--primary) !important ; } .blue { color: var(--blue) !important ; } .secondary { color: var(--secondary) !important ; } .moderate { color: var(--moderate) !important ; } .light { color: var(--light) !important ; } .notImportant { color: var(--notImportant) !important ; } .disabled { color: var(--disabled) !important ; } .danger { color: var(--danger) !important ; } .confirm { color: var(--confirm) !important ; } .warning { color: var(--warning) !important ; } .approve { color: var(--approve) !important ; } .white { color: var(--white) !important } .red { color: var(--red) !important } .green { color: var(--green) !important } .gray { color: var(--gray) !important } .gray60 { color: var(--gray60) !important } .gray30 { color: var(--gray30) !important } .gray10 { color: var(--gray10) !important } .approve { color: var(--approve); } .alert { color: var(--alert); } .nutral { color: var(--nutral); } .action { color: var(--action); } .arppove { color: var(--approve) } .alert { color: var(--alert) } .nutral { color: var(--nutral) } .informative { color: var(--informatie) } /*overflow*/ .oys { overflow-y: scroll;} .oyh { overflow-y: hidden;} .oxs { overflow-x: scroll;} .oxh { overflow-x: hidden;} .ww { overflow-wrap: break-word;} /* Cover */ .cf { /* Full Cover */ position: fixed; top:0px; left:0px; width: 100%; height:100%; display: flex; } /* Scroll */ /* width /* Track */ /* Handle */ /* Handle on hover */ ::-webkit-scrollbar { margin:5px; width: 16px; } ::-webkit-scrollbar-thumb { margin: 5px; border: 4px solid rgba(0, 0, 0, 0); background-clip: padding-box; border-radius: 8px; background-color: var(--gray); } /**/ .cp { cursor: pointer} .ct { cursor: text} .cw { cursor: wait} .scroallable { overflow: auto; height:100%} .clickable { opacity: 1; border-radius: 0;} .clickable:hover { opacity: 0.8; cursor: pointer; background: var(--white); } .hoverable { cursor: pointer; } .hoverable:hover { background: var(--disabled);} .selected { background: var(--disabled);} .link { opacity: 0.9; color: var(--midGray); padding-left:15px; padding-right:15px; } .link:hover { opacity: 1; cursor: pointer; color: var(--darkGray); } .icon { opacity: 0.7; } .icon:hover { opacity: 1; cursor: pointer; } .pointer { cursor: pointer;} .shadow { box-shadow: var(--shadow)} .hidden { visibility: hidden; } /* With Badge */ .badge { background-color: var(--action); } /* Arrow Box*/ .topArrowBox { position: relative; background: var(--white); border: var(--border); } .topArrowBox:after, .topArrowBox:before { bottom: 100%; left: var(--arrowPosition); border: solid transparent; content: ""; position: absolute; } .topArrowBox:after { border-bottom-color: var(--white); border-width: calc( 2 * var(--unit)); margin-left: calc( 2 * var(--unit) * -1); } .topArrowBox:before { border-bottom:var(--border); border-width: calc( 2 * var(--unitBorder)); margin-left: calc( 2 * var(--unitBorder) * -1); } .bottomArrowBox { position: relative; background: var(--white); border: var(--border); } .bottomArrowBox:after, .bottomArrowBox:before { top: 100%; left: var(--arrowPosition); border: solid transparent; content: ""; position: absolute; } .bottomArrowBox:after { border-top-color: var(--white); border-width: calc( 2 * var(--unit)); margin-left: calc( 2 * var(--unit) * -1); } .bottomArrowBox:before { border-top-color: var(--border); border-width: calc( 2 * var(--unit)); margin-left: calc( 2 * var(--unit) * -1); } .leftArrowBox { position: relative; background: var(--white); border: var(--border); } .leftArrowBox:after, .leftArrowBox:before { right: 100%; top: calc(var(--arrowPosition) - (var(--unit) * 2)); border: solid transparent; content: ""; position: absolute; } .leftArrowBox:after { border-right-color: var(--white); border-width: calc( 2 * var(--unit)); margin-left: calc( 2 * var(--unit) * -1); } .leftArrowBox:before { border-right-color: var(--border); border-width: calc( 2 * var(--unit)); margin-left: calc( 2 * var(--unit) * -1); } .rightArrowBox { position: relative; background: var(--white); border: var(--border); } .rightArrowBox:after, .rightArrowBox:before { left: 100%; top: var(--arrowPosition) ; border: solid transparent; content: ""; position: absolute; } .rightArrowBox:after { border-left-color: var(--white); border-width: 8px; margin-top: -8px; } .rightArrowBox:before { border-left: var(--border); border-width: 9px; margin-top: -9px; } /* Content Editable Placeholder */ [contentEditable=true]:empty:not(:focus):before { content: attr(data-text) } .-bg { background-color: rgba(0, 0, 0, 0); } .-g { gap: 0px } .g2 { gap: 2px } .g4 { gap: 4px } .g6 { gap: 6px } .g8 { gap: 8px } .g10 { gap: 10px } .g12 { gap: 12px } .g14 { gap: 14px } .g16 { gap: 16px } .g18 { gap: 18px } .g20 { gap: 20px } .g22 { gap: 22px } .g24 { gap: 24px } .g26 { gap: 26px } .g28 { gap: 28px } .g40 { gap: 40px } .g100 { gap: 100px } .tal { text-align: left; } .tar { text-align: right; } .tac { text-align: center; } .topIndex { z-index: 10000000; } .zi1 { z-index: 1; } .zi { z-index: 0; } .zIndex { z-index: 0; } .ff { flex: 1 } .aie { align-items: flex-end } .ais { align-items: flex-start } .-s { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; } .-s::-webkit-scrollbar { width: 0; height: 0; display: none; /* Safari and Chrome */ } .iof { object-fit: cover; }