/* 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 */ .ns { -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ } /* 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 } .w26 { width:26px !important } .w28 { width:28px !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 { min-width:100px !important } .w150 { width:150px !important } .w200 { width:200px !important } .w250 { width:250px !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 } .w50p { width: 50% !important } .w25p { width: 25% !important } .wa { width : auto; } .wf { width: fit-content } /* heig ht */ .he { height: var(--elementHeight) !important } .h8 { min-height:8px !important } .h12 { min-height:12px !important } .h16 { min-height:16px !important } .h24 { min-height:24px !important } .h32 { min-height:32px !important } .h20 { min-height:20px !important } .h30 { min-height:30px !important } .h40 { min-height:40px !important } .h50 { min-height:50px !important } .h70 { min-height:70px !important } .h100 { min-height:100px !important} .h150 { min-height:150px !important} .h200 { min-height:200px !important} .h300 { min-height:300px !important} .h400 { min-height:400px !important} .h500 { min-height:500px !important} .h600 { min-height:600px !important} .h700 { min-height:700px !important} .h800 { min-height:800px !important} .h100p { height:100% !important } .h75p { height: 50% !important } .h50p { height: 50% !important } .h25p { height: 25% !important } .wh100p { width: 100% !important; height:100% !important; } .hf { height: fit-content !important; } .ha { height: auto !important; } .hm { max-height: max-content; } .hm100 { max-height: 100px !important; } .hm200 { max-height: 200px !important; } .hm300 { max-height: 300px !important; } .hm400 { max-height: 400px !important; } .hm500 { max-height: 500px !important; } .hm600 { max-height: 600px !important; } .p2 { padding: 2px; } .p4 { padding: 4px; } .p8 { padding: 8px; } .p10 { padding: 10px; } .p30 { padding: 30px; } .p20 { padding: 20px; } .-p { padding:0px; } /* margin */ .ma { margin: auto; } .m2 { margin: 2px; } .m4 { margin: 4px; } .m8 { margin: 8px; } .m10 { margin: 10px; } .m30 { margin: 30px; } .m20 { margin: 20px; } .mtb10 { margin-top: 10px; margin-bottom: 10px; } .-m { margin: 0px; } /* border */ .b { border: var(--border) !important} .bd { border: var(--borderDash) !important} .bb { border-bottom: var(--border) !important} .br { border-right: var(--border) !important} .bt { border-top: var(--border) !important} .bl { border-left: var(--border) !important} .bbd { border-bottom: var(--borderDash) !important} .brd { border-right: var(--borderDash) !important} .btd { border-top: var(--borderDash) !important} .bld { border-left: var(--borderDash) !important} .-b { border: none; } /* radius */ .r2 { border-radius: 2px !important } .r4 { border-radius: 4px !important } .r8 { border-radius: 8px !important } .r10 { border-radius: 10px !important } .r15 { border-radius: 15px !important } .r30 { border-radius: 30px !important } .r20 { border-radius: 20px !important } .r { border-radius: 100% !important } .-r { border-radius: 0px !important } .rf { border-radius: 100% !important } /* Font Size */ .f6 { font-size: 6px !important } .f9 { font-size: 9px !important } .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 } .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: 15px;} 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 } .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;} .pr { position: relative;} /* coloring */ .bgWhite { background-color: var(--white) !important; } .bgGray { background-color: var(--gray) !important; } .bgGray60 { background-color: var(--gray60) !important; } .bgGray30 { background-color: var(--gray30) !important; } .bgGray10 { background-color: var(--gray10) !important; } .bgPrimary { background-color: var(--primary) !important; ; } .bgSecondary { background-color: var(--secondary) !important;; } .bgApprove { background-color: var(--approve) !important;; } .bgAlert { background-color: var(--alert) !important;; } .bgNutral { background-color: var(--nutral) !important;; } .bgAction { background-color: var(--action) !important;; } .black { color: var(--dark) !important ; } .primary { color: var(--primary) !important ; } .secondary { color: var(--secondary) !important ; } .white { color: var(--white) !important } .gray { color: var(--gray) !important } .gray60 { color: var(--gray60) !important } .gray30 { color: var(--gray30) !important } .gray10 { color: var(--gray10) !important } .dark { color: var(--dark) !important } .approve { color: var(--approve); } .alert { color: var(--alert); } .nutral { color: var(--nutral); } .action { color: var(--action); } .informative { color: var(--informatie) } /*overflow*/ .oys { overflow-y: scroll;} .oxs { overflow-x: scroll;} .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 !important} .ct { cursor: text} .cw { cursor: wait} .scroallable { overflow: auto; height:100%} .clickable { opacity: 0.8 m; border-radius: 0;} .clickable:hover { opacity: 1; cursor: pointer; background: var(--white); } .hoverable { cursor: pointer; } .hoverable:hover { background: var(--gray10);} .selected { background: var(--gray10);} .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); margin:10px; } .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; } .zIndex { z-index: 0; } .ff { flex: 1 } .aie { align-items: flex-end } .ais { align-items: flex-start } .tac { text-align:center} .fr {display:flex; align-items:right; justify-content:right} .fl {display:flex; align-items:left; justify-content:left} .-h { background: transparent !important; }