*Definition
This page describes all Behavioral Classes
Behavioral Classes Diagram
Classes
/* ------------------------------------------ BODER ------------------------------------------ */
/* CORE */
.noborder {border: none}
.border-trans-1 {border: 1px solid transparent} .border-trans {border: 0px solid transparent}
/* BORDER COLOR */
.border-red {border: 1px solid red}
.border-red-50 {border: 1px solid #ff000077}
.border-white {border: 1px solid white}
.border-white-50 {border: 1px solid #ffffff77}
.border-grey {border: 1px solid grey}
.border-lgrey {border: 1px solid lightgray}
.border-grey-50 {border: 1px solid #88888888}
.border-grey-20 {border: 1px solid #88888828}
.border-lgrey-50 {border: 1px solid #aaaaaa}
.border-green {border: 1px solid green}
.border-green-50 {border: 1px solid #00ff0077}
.border-blue {border: 1px solid blue}
.border-blue-50 {border: 1px solid #0000ff77}
/* SIDES */
.border-red-t {border-top: 1px solid red}
.border-red-50-t {border-top: 1px solid #ff000077}
.border-white-t {border-top: 1px solid white}
.border-white-50-t {border-top: 1px solid #ffffff77}
.border-grey-t {border-top: 1px solid grey}
.border-lgrey-t {border-top: 1px solid lightgray}
.border-grey-50-t {border-top: 1px solid #88888888}
.border-lgrey-50-t {border-top: 1px solid #aaaaaa}
.border-green-t {border-top: 1px solid green}
.border-green-50-t {border-top: 1px solid #00ff0077}
.border-blue-t {border-top: 1px solid blue}
.border-blue-50-t {border-top: 1px solid #0000ff77}
.border-red-b {border-bottom: 1px solid red}
.border-red-50-b {border-bottom: 1px solid #ff000077}
.border-white-b {border-bottom: 1px solid white}
.border-white-50-b {border-bottom: 1px solid #ffffff77}
.border-grey-b {border-bottom: 1px solid grey}
.border-lgrey-b {border-bottom: 1px solid lightgray}
.border-grey-50-b {border-bottom: 1px solid #88888888}
.border-lgrey-50-b {border-bottom: 1px solid #aaaaaa}
.border-green-b {border-bottom: 1px solid green}
.border-green-50-b {border-bottom: 1px solid #00ff0077}
.border-blue-b {border-bottom: 1px solid blue}
.border-blue-50-b {border-bottom: 1px solid #0000ff77}
.border-orange-b {border-bottom: 1px solid orange}
.border-orange-50-b {border-bottom: 1px solid #ff990077}
.border-red-l {border-left: 1px solid red}
.border-red-50-l {border-left: 1px solid #ff000077}
.border-white-l {border-left: 1px solid white}
.border-white-50-l {border-left: 1px solid #ffffff77}
.border-grey-l {border-left: 1px solid grey}
.border-lgrey-l {border-left: 1px solid lightgray}
.border-grey-50-l {border-left: 1px solid #88888888}
.border-lgrey-50-l {border-left: 1px solid #aaaaaa}
.border-green-l {border-left: 1px solid green}
.border-green-50-l {border-left: 1px solid #00ff0077}
.border-blue-l {border-left: 1px solid blue}
.border-blue-50-l {border-left: 1px solid #0000ff77}
.border-red-r {border-right: 1px solid red}
.border-red-50-r {border-right: 1px solid #ff000077}
.border-white-r {border-right: 1px solid white}
.border-white-50-r {border-right: 1px solid #ffffff77}
.border-grey-r {border-right: 1px solid grey}
.border-lgrey-r {border-right: 1px solid lightgray}
.border-grey-50-r {border-right: 1px solid #88888888}
.border-lgrey-50-r {border-right: 1px solid #aaaaaa}
.border-green-r {border-right: 1px solid green}
.border-green-50-r {border-right: 1px solid #00ff0077}
.border-blue-r {border-right: 1px solid blue}
.border-blue-50-r {border-right: 1px solid #0000ff77}
/* BORDER RADIUS */
.bord-children-2 * { border-radius: 2px;}
/* ALL */
.bord-r-5{border-radius: 5px}.bord-r-8{border-radius: 8px}.bord-r-12{border-radius: 12px}
.bord-r-10{border-radius: 10px}.bord-r-15{border-radius: 15px}.bord-r-25{border-radius: 25px}
.bord-r-50{border-radius: 50px}.bord-r-100{border-radius: 100px}.bord-r-100p{border-radius: 100%}
/* LEFT */
.bord-r-l-5{border-radius: 5px 0 0 5px}.bord-r-l-8{border-radius: 8px 0 0 8px}
.bord-r-l-12{border-radius: 12px 0 0 12px}.bord-r-l-10{border-radius: 10px 0 0 10px}
.bord-r-l-15{border-radius: 15px 0 0 15px}.bord-r-l-25{border-radius: 25px 0 0 25px}
.bord-r-l-50{border-radius: 50px 0 0 50px}.bord-r-l-100{border-radius: 100px 0 0 100px}
.bord-r-l-100p{border-radius: 100% 0 0 100%}
/* right */
.bord-r-r-5{border-radius: 0 5px 5px 0}.bord-r-r-8{border-radius: 0 8px 8px 0}
.bord-r-r-12{border-radius: 0 12px 12px 0}.bord-r-r-10{border-radius: 0 10px 10px 0}
.bord-r-r-15{border-radius: 0 15px 15px 0}.bord-r-r-25{border-radius: 0 25px 25px 0}
.bord-r-r-50{border-radius: 0 50px 50px 0}.bord-r-r-100{border-radius: 0 100px 100px 0}
.bord-r-r-100p{border-radius: 0 100% 100% 0}
/* bottom */
.bord-r-b-5{border-radius: 0 0 5px 5px}.bord-r-b-8{border-radius: 0 0 8px 8px}
.bord-r-b-12{border-radius: 0 0 12px 12px}.bord-r-b-10{border-radius: 0 0 10px 10px}
.bord-r-b-15{border-radius: 0 0 15px 15px}.bord-r-b-25{border-radius: 0 0 25px 25px}
.bord-r-b-50{border-radius: 0 0 50px 50px}.bord-r-b-100{border-radius: 0 0 100px 100px}
.bord-r-b-100p{border-radius: 0 0 100% 100%}
/* top */
.bord-r-t-5{border-radius: 5px 5px 0 0}.bord-r-t-8{border-radius: 8px 8px 0 0}
.bord-r-t-12{border-radius: 12px 12px 0 0}.bord-r-t-10{border-radius: 10px 10px 0 0}
.bord-r-t-15{border-radius: 15px 15px 0 0}.bord-r-t-25{border-radius: 25px 25px 0 0}
.bord-r-t-50{border-radius: 50px 50px 0 0}.bord-r-t-100{border-radius: 100px 100px 0 0}
.bord-r-t-100p{border-radius: 100% 100% 0 0}
/* ------------------------------------------ CURSOR ------------------------------------------ */
.cursor {cursor: default}.pointer {cursor: pointer}
.clickble {cursor: pointer}.grab {cursor: grab}.grabble {cursor: grab}
.stopcursor {cursor: not-allowed !important}.waitcursor {cursor: wait}
.nocursor {cursor: default}.nopointer {pointer-events: none}.noclick {pointer-events: none}
.noselect {-webkit-user-select: none; -moz-user-select: none;-ms-user-select: none; user-select: none}
/* ------------------------------------------ BOX SHADOW ------------------------------------------ */
.box-shadow-1 {box-shadow: 0 0 6px rgba(0, 0, 0, 0.1)}
.box-shadow-2 {box-shadow: 0 0 6px rgba(0, 0, 0, 0.2)}
.box-shadow-3 {box-shadow: 0 0 6px rgba(0, 0, 0, 0.3)}
.box-shadow-4 {box-shadow: 0 0 6px rgba(0, 0, 0, 0.4)}
.box-shadow-5 {box-shadow: 0 0 6px rgba(0, 0, 0, 0.5)}
.box-shadow-6 {box-shadow: 0 0 6px rgba(0, 0, 0, 0.6)}
.box-shadow-7 {box-shadow: 0 0 6px rgba(0, 0, 0, 0.7)}
.box-shadow-8 {box-shadow: 0 0 6px rgba(0, 0, 0, 0.8)}
.box-shadow-9 {box-shadow: 0 0 6px rgba(0, 0, 0, 0.9)}
.box-shadow-i-1 {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1)}
.box-shadow-i-2 {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2)}
.box-shadow-i-3 {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3)}
.box-shadow-i-4 {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4)}
.box-shadow-i-5 {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5)}
.box-shadow-i-6 {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6)}
.box-shadow-i-7 {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7)}
.box-shadow-i-8 {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.8)}
.box-shadow-i-9 {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9)}
.box-shadow-1-t {box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1)}
.box-shadow-2-t {box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.2)}
.box-shadow-5-t {box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.5)}
.box-shadow-7-t {box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.7)}
.box-shadow-9-t {box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.9)}
.box-shadow-1-b {box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)}
.box-shadow-2-b {box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2)}
.box-shadow-5-b {box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5)}
.box-shadow-7-b {box-shadow: 0 4px 6px rgba(0, 0, 0, 0.7)}
.box-shadow-9-b {box-shadow: 0 4px 6px rgba(0, 0, 0, 0.9)}
.box-shadow-1-l {box-shadow: 4px 0 6px rgba(0, 0, 0, 0.1)}
.box-shadow-2-l {box-shadow: 4px 0 6px rgba(0, 0, 0, 0.2)}
.box-shadow-5-l {box-shadow: 4px 0 6px rgba(0, 0, 0, 0.5)}
.box-shadow-7-l {box-shadow: 4px 0 6px rgba(0, 0, 0, 0.7)}
.box-shadow-9-l {box-shadow: 4px 0 6px rgba(0, 0, 0, 0.9)}
.box-shadow-1-r {box-shadow: -4px 0 6px rgba(0, 0, 0, 0.1)}
.box-shadow-2-r {box-shadow: -4px 0 6px rgba(0, 0, 0, 0.2)}
.box-shadow-5-r {box-shadow: -4px 0 6px rgba(0, 0, 0, 0.5)}
.box-shadow-7-r {box-shadow: -4px 0 6px rgba(0, 0, 0, 0.7)}
.box-shadow-9-r {box-shadow: -4px 0 6px rgba(0, 0, 0, 0.9)}
.box-shadow-i-1-t {box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.1)}
.box-shadow-i-2-t {box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.2)}
.box-shadow-i-5-t {box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.5)}
.box-shadow-i-7-t {box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.7)}
.box-shadow-i-9-t {box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.9)}
.box-shadow-i-1-b {box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.1)}
.box-shadow-i-2-b {box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.2)}
.box-shadow-i-5-b {box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.5)}
.box-shadow-i-7-b {box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.7)}
.box-shadow-i-9-b {box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.9)}
.box-shadow-i-1-l {box-shadow: inset 4px 0 6px rgba(0, 0, 0, 0.1)}
.box-shadow-i-2-l {box-shadow: inset 4px 0 6px rgba(0, 0, 0, 0.2)}
.box-shadow-i-5-l {box-shadow: inset 4px 0 6px rgba(0, 0, 0, 0.5)}
.box-shadow-i-7-l {box-shadow: inset 4px 0 6px rgba(0, 0, 0, 0.7)}
.box-shadow-i-9-l {box-shadow: inset 4px 0 6px rgba(0, 0, 0, 0.9)}
.box-shadow-i-1-r {box-shadow: inset -4px 0 6px rgba(0, 0, 0, 0.1)}
.box-shadow-i-2-r {box-shadow: inset -4px 0 6px rgba(0, 0, 0, 0.2)}
.box-shadow-i-5-r {box-shadow: inset -4px 0 6px rgba(0, 0, 0, 0.5)}
.box-shadow-i-7-r {box-shadow: inset -4px 0 6px rgba(0, 0, 0, 0.7)}
.box-shadow-i-9-r {box-shadow: inset -4px 0 6px rgba(0, 0, 0, 0.9)}
.box-shadow-i-1-bl {box-shadow: inset 4px 4px 9px rgba(0, 0, 0, 0.1)}
.box-shadow-i-2-bl {box-shadow: inset 4px 4px 9px rgba(0, 0, 0, 0.2)}
.box-shadow-i-5-bl {box-shadow: inset 4px 4px 9px rgba(0, 0, 0, 0.5)}
.box-shadow-i-7-bl {box-shadow: inset 4px 4px 9px rgba(0, 0, 0, 0.7)}
.box-shadow-i-9-bl {box-shadow: inset 4px 4px 9px rgba(0, 0, 0, 0.9)}
/* ------------------------------------------ MEDIA QUERY ------------------------------------------ */
@media only screen and (max-width: 600px)
{
.Q_xs_pa-0{padding: 0}.Q_xs_pa-1{padding: 5px}.Q_xs_pa-2{padding: 10px}.Q_xs_pa-3{padding: 15px}
.Q_xs_pa-4{padding: 20px}.Q_xs_pa-5{padding: 25px}.Q_xs_pa-6{padding: 30px}.Q_xs_pa-7{padding: 35px}
.Q_xs_pa-8{padding: 40px}.Q_xs_pa-100{padding: 100px}.Q_xs_pa-150{padding: 150px}.Q_xs_pa-200{padding: 200px}
.Q_xs_px-0{padding-left: 0; padding-right: 0}.Q_xs_px-1{padding-left: 5px; padding-right: 5px}
.Q_xs_px-2{padding-left: 10px; padding-right: 10px}.Q_xs_px-3{padding-left: 15px; padding-right: 15px}
.Q_xs_px-4{padding-left: 20px; padding-right: 20px}.Q_xs_px-5{padding-left: 25px; padding-right: 25px}
.Q_xs_px-6{padding-left: 30px; padding-right: 30px}.Q_xs_px-7{padding-left: 35px; padding-right: 35px}
.Q_xs_px-8{padding-left: 40px; padding-right: 40px}.Q_xs_px-100{padding-left: 100px; padding-right: 100px}
.Q_xs_px-150{padding-left: 150px; padding-right: 150px}.Q_xs_px-200{padding-left: 200px; padding-right: 200px}
.Q_xs_py-0{padding-top: 0; padding-bottom: 0}.Q_xs_py-1{padding-top: 5px; padding-bottom: 5px}
.Q_xs_py-2{padding-top: 10px; padding-bottom: 10px}.Q_xs_py-3{padding-top: 15px; padding-bottom: 15px}
.Q_xs_py-4{padding-top: 20px; padding-bottom: 20px}.Q_xs_py-5{padding-top: 25px; padding-bottom: 25px}
.Q_xs_py-6{padding-top: 30px; padding-bottom: 30px}.Q_xs_py-7{padding-top: 35px; padding-bottom: 35px}
.Q_xs_py-8{padding-top: 40px; padding-bottom: 40px}.Q_xs_py-100{padding-top: 100px; padding-bottom: 100px}
.Q_xs_py-200{padding-top: 200px; padding-bottom: 200px}.Q_xs_py-150{padding-top: 150px; padding-bottom: 150px}
.Q_xs_pl-0{padding-left: 0}.Q_xs_pl-1{padding-left: 5px}.Q_xs_pl-2{padding-left: 10px}.Q_xs_pl-3{padding-left: 15px}
.Q_xs_pl-4{padding-left: 20px}.Q_xs_pl-5{padding-left: 25px}.Q_xs_pl-6{padding-left: 30px}.Q_xs_pl-7{padding-left: 35px}
.Q_xs_pl-8{padding-left: 40px}.Q_xs_pl-100{padding-left: 100px}.Q_xs_pl-150{padding-left: 150px}.Q_xs_pl-200{padding-left: 200px}
.Q_xs_pr-0{padding-right: 0}.Q_xs_pr-1{padding-right: 5px}.Q_xs_pr-2{padding-right: 10px}.Q_xs_pr-3{padding-right: 15px}
.Q_xs_pr-4{padding-right: 20px}.Q_xs_pr-5{padding-right: 25px}.Q_xs_pr-6{padding-right: 30px}.Q_xs_pr-7{padding-right: 35px}
.Q_xs_pr-8{padding-right: 40px}.Q_xs_pr-100{padding-right: 100px}.Q_xs_pr-200{padding-right: 150px}.Q_xs_pr-150{padding-right: 200px}
.Q_xs_pt-0{padding-top: 0}.Q_xs_pt-1{padding-top: 5px}.Q_xs_pt-2{padding-top: 10px}.Q_xs_pt-3{padding-top: 15px}
.Q_xs_pt-4{padding-top: 20px}.Q_xs_pt-5{padding-top: 25px}.Q_xs_pt-6{padding-top: 30px}.Q_xs_pt-7{padding-top: 35px}
.Q_xs_pt-8{padding-top: 40px}.Q_xs_pt-100{padding-top: 100px}.Q_xs_pt-200{padding-top: 200px}.Q_xs_pt-150{padding-top: 150px}
.Q_xs_pb-0{padding-bottom: 0}.Q_xs_pb-1{padding-bottom: 5px}.Q_xs_pb-2{padding-bottom: 10px}.Q_xs_pb-3{padding-bottom: 15px}
.Q_xs_pb-4{padding-bottom: 20px}.Q_xs_pb-5{padding-bottom: 25px}.Q_xs_pb-6{padding-bottom: 30px}.Q_xs_pb-7{padding-bottom: 35px}
.Q_xs_pb-8{padding-bottom: 40px}.Q_xs_pb-100{padding-bottom: 100px}.Q_xs_pb-200{padding-bottom: 200px}.Q_xs_pb-150{padding-bottom: 150px}
}
@media only screen and (max-width: 900px)
{
.Q_xs_sm_pa-0{padding: 0}.Q_xs_sm_pa-1{padding: 5px}.Q_xs_sm_pa-2{padding: 10px}.Q_xs_sm_pa-3{padding: 15px}
.Q_xs_sm_pa-4{padding: 20px}.Q_xs_sm_pa-5{padding: 25px}.Q_xs_sm_pa-6{padding: 30px}.Q_xs_sm_pa-7{padding: 35px}
.Q_xs_sm_pa-8{padding: 40px}.Q_xs_sm_pa-100{padding: 100px}.Q_xs_sm_pa-150{padding: 150px}.Q_xs_sm_pa-200{padding: 200px}
.Q_xs_sm_px-0{padding-left: 0; padding-right: 0}.Q_xs_sm_px-1{padding-left: 5px; padding-right: 5px}
.Q_xs_sm_px-2{padding-left: 10px; padding-right: 10px}.Q_xs_sm_px-3{padding-left: 15px; padding-right: 15px}
.Q_xs_sm_px-4{padding-left: 20px; padding-right: 20px}.Q_xs_sm_px-5{padding-left: 25px; padding-right: 25px}
.Q_xs_sm_px-6{padding-left: 30px; padding-right: 30px}.Q_xs_sm_px-7{padding-left: 35px; padding-right: 35px}
.Q_xs_sm_px-8{padding-left: 40px; padding-right: 40px}.Q_xs_sm_px-100{padding-left: 100px; padding-right: 100px}
.Q_xs_sm_px-150{padding-left: 150px; padding-right: 150px}.Q_xs_sm_px-200{padding-left: 200px; padding-right: 200px}
.Q_xs_sm_py-0{padding-top: 0; padding-bottom: 0}.Q_xs_sm_py-1{padding-top: 5px; padding-bottom: 5px}
.Q_xs_sm_py-2{padding-top: 10px; padding-bottom: 10px}.Q_xs_sm_py-3{padding-top: 15px; padding-bottom: 15px}
.Q_xs_sm_py-4{padding-top: 20px; padding-bottom: 20px}.Q_xs_sm_py-5{padding-top: 25px; padding-bottom: 25px}
.Q_xs_sm_py-6{padding-top: 30px; padding-bottom: 30px}.Q_xs_sm_py-7{padding-top: 35px; padding-bottom: 35px}
.Q_xs_sm_py-8{padding-top: 40px; padding-bottom: 40px}.Q_xs_sm_py-100{padding-top: 100px; padding-bottom: 100px}
.Q_xs_sm_py-200{padding-top: 200px; padding-bottom: 200px}.Q_xs_sm_py-150{padding-top: 150px; padding-bottom: 150px}
.Q_xs_sm_pl-0{padding-left: 0}.Q_xs_sm_pl-1{padding-left: 5px}.Q_xs_sm_pl-2{padding-left: 10px}.Q_xs_sm_pl-3{padding-left: 15px}
.Q_xs_sm_pl-4{padding-left: 20px}.Q_xs_sm_pl-5{padding-left: 25px}.Q_xs_sm_pl-6{padding-left: 30px}.Q_xs_sm_pl-7{padding-left: 35px}
.Q_xs_sm_pl-8{padding-left: 40px}.Q_xs_sm_pl-100{padding-left: 100px}.Q_xs_sm_pl-150{padding-left: 150px}.Q_xs_sm_pl-200{padding-left: 200px}
.Q_xs_sm_pr-0{padding-right: 0}.Q_xs_sm_pr-1{padding-right: 5px}.Q_xs_sm_pr-2{padding-right: 10px}.Q_xs_sm_pr-3{padding-right: 15px}
.Q_xs_sm_pr-4{padding-right: 20px}.Q_xs_sm_pr-5{padding-right: 25px}.Q_xs_sm_pr-6{padding-right: 30px}.Q_xs_sm_pr-7{padding-right: 35px}
.Q_xs_sm_pr-8{padding-right: 40px}.Q_xs_sm_pr-100{padding-right: 100px}.Q_xs_sm_pr-200{padding-right: 150px}.Q_xs_sm_pr-150{padding-right: 200px}
.Q_xs_sm_pt-0{padding-top: 0}.Q_xs_sm_pt-1{padding-top: 5px}.Q_xs_sm_pt-2{padding-top: 10px}.Q_xs_sm_pt-3{padding-top: 15px}
.Q_xs_sm_pt-4{padding-top: 20px}.Q_xs_sm_pt-5{padding-top: 25px}.Q_xs_sm_pt-6{padding-top: 30px}.Q_xs_sm_pt-7{padding-top: 35px}
.Q_xs_sm_pt-8{padding-top: 40px}.Q_xs_sm_pt-100{padding-top: 100px}.Q_xs_sm_pt-200{padding-top: 200px}.Q_xs_sm_pt-150{padding-top: 150px}
.Q_xs_sm_pb-0{padding-bottom: 0}.Q_xs_sm_pb-1{padding-bottom: 5px}.Q_xs_sm_pb-2{padding-bottom: 10px}.Q_xs_sm_pb-3{padding-bottom: 15px}
.Q_xs_sm_pb-4{padding-bottom: 20px}.Q_xs_sm_pb-5{padding-bottom: 25px}.Q_xs_sm_pb-6{padding-bottom: 30px}.Q_xs_sm_pb-7{padding-bottom: 35px}
.Q_xs_sm_pb-8{padding-bottom: 40px}.Q_xs_sm_pb-100{padding-bottom: 100px}.Q_xs_sm_pb-200{padding-bottom: 200px}.Q_xs_sm_pb-150{padding-bottom: 150px}
}
@media only screen and (max-width: 1200px)
{
.Q_xs_md_pa-0{padding: 0}.Q_xs_md_pa-1{padding: 5px}.Q_xs_md_pa-2{padding: 10px}.Q_xs_md_pa-3{padding: 15px}
.Q_xs_md_pa-4{padding: 20px}.Q_xs_md_pa-5{padding: 25px}.Q_xs_md_pa-6{padding: 30px}.Q_xs_md_pa-7{padding: 35px}
.Q_xs_md_pa-8{padding: 40px}.Q_xs_md_pa-100{padding: 100px}.Q_xs_md_pa-150{padding: 150px}.Q_xs_md_pa-200{padding: 200px}
.Q_xs_md_px-0{padding-left: 0; padding-right: 0}.Q_xs_md_px-1{padding-left: 5px; padding-right: 5px}
.Q_xs_md_px-2{padding-left: 10px; padding-right: 10px}.Q_xs_md_px-3{padding-left: 15px; padding-right: 15px}
.Q_xs_md_px-4{padding-left: 20px; padding-right: 20px}.Q_xs_md_px-5{padding-left: 25px; padding-right: 25px}
.Q_xs_md_px-6{padding-left: 30px; padding-right: 30px}.Q_xs_md_px-7{padding-left: 35px; padding-right: 35px}
.Q_xs_md_px-8{padding-left: 40px; padding-right: 40px}.Q_xs_md_px-100{padding-left: 100px; padding-right: 100px}
.Q_xs_md_px-150{padding-left: 150px; padding-right: 150px}.Q_xs_md_px-200{padding-left: 200px; padding-right: 200px}
.Q_xs_md_py-0{padding-top: 0; padding-bottom: 0}.Q_xs_md_py-1{padding-top: 5px; padding-bottom: 5px}
.Q_xs_md_py-2{padding-top: 10px; padding-bottom: 10px}.Q_xs_md_py-3{padding-top: 15px; padding-bottom: 15px}
.Q_xs_md_py-4{padding-top: 20px; padding-bottom: 20px}.Q_xs_md_py-5{padding-top: 25px; padding-bottom: 25px}
.Q_xs_md_py-6{padding-top: 30px; padding-bottom: 30px}.Q_xs_md_py-7{padding-top: 35px; padding-bottom: 35px}
.Q_xs_md_py-8{padding-top: 40px; padding-bottom: 40px}.Q_xs_md_py-100{padding-top: 100px; padding-bottom: 100px}
.Q_xs_md_py-200{padding-top: 200px; padding-bottom: 200px}.Q_xs_md_py-150{padding-top: 150px; padding-bottom: 150px}
.Q_xs_md_pl-0{padding-left: 0}.Q_xs_md_pl-1{padding-left: 5px}.Q_xs_md_pl-2{padding-left: 10px}.Q_xs_md_pl-3{padding-left: 15px}
.Q_xs_md_pl-4{padding-left: 20px}.Q_xs_md_pl-5{padding-left: 25px}.Q_xs_md_pl-6{padding-left: 30px}.Q_xs_md_pl-7{padding-left: 35px}
.Q_xs_md_pl-8{padding-left: 40px}.Q_xs_md_pl-100{padding-left: 100px}.Q_xs_md_pl-150{padding-left: 150px}.Q_xs_md_pl-200{padding-left: 200px}
.Q_xs_md_pr-0{padding-right: 0}.Q_xs_md_pr-1{padding-right: 5px}.Q_xs_md_pr-2{padding-right: 10px}.Q_xs_md_pr-3{padding-right: 15px}
.Q_xs_md_pr-4{padding-right: 20px}.Q_xs_md_pr-5{padding-right: 25px}.Q_xs_md_pr-6{padding-right: 30px}.Q_xs_md_pr-7{padding-right: 35px}
.Q_xs_md_pr-8{padding-right: 40px}.Q_xs_md_pr-100{padding-right: 100px}.Q_xs_md_pr-200{padding-right: 150px}.Q_xs_md_pr-150{padding-right: 200px}
.Q_xs_md_pt-0{padding-top: 0}.Q_xs_md_pt-1{padding-top: 5px}.Q_xs_md_pt-2{padding-top: 10px}.Q_xs_md_pt-3{padding-top: 15px}
.Q_xs_md_pt-4{padding-top: 20px}.Q_xs_md_pt-5{padding-top: 25px}.Q_xs_md_pt-6{padding-top: 30px}.Q_xs_md_pt-7{padding-top: 35px}
.Q_xs_md_pt-8{padding-top: 40px}.Q_xs_md_pt-100{padding-top: 100px}.Q_xs_md_pt-200{padding-top: 200px}.Q_xs_md_pt-150{padding-top: 150px}
.Q_xs_md_pb-0{padding-bottom: 0}.Q_xs_md_pb-1{padding-bottom: 5px}.Q_xs_md_pb-2{padding-bottom: 10px}.Q_xs_md_pb-3{padding-bottom: 15px}
.Q_xs_md_pb-4{padding-bottom: 20px}.Q_xs_md_pb-5{padding-bottom: 25px}.Q_xs_md_pb-6{padding-bottom: 30px}.Q_xs_md_pb-7{padding-bottom: 35px}
.Q_xs_md_pb-8{padding-bottom: 40px}.Q_xs_md_pb-100{padding-bottom: 100px}.Q_xs_md_pb-200{padding-bottom: 200px}.Q_xs_md_pb-150{padding-bottom: 150px}
}
@media only screen and (max-width: 1436px)
{
.Q_xs_lg_pa-0{padding: 0}.Q_xs_lg_pa-1{padding: 5px}.Q_xs_lg_pa-2{padding: 10px}.Q_xs_lg_pa-3{padding: 15px}
.Q_xs_lg_pa-4{padding: 20px}.Q_xs_lg_pa-5{padding: 25px}.Q_xs_lg_pa-6{padding: 30px}.Q_xs_lg_pa-7{padding: 35px}
.Q_xs_lg_pa-8{padding: 40px}.Q_xs_lg_pa-100{padding: 100px}.Q_xs_lg_pa-150{padding: 150px}.Q_xs_lg_pa-200{padding: 200px}
.Q_xs_lg_px-0{padding-left: 0; padding-right: 0}.Q_xs_lg_px-1{padding-left: 5px; padding-right: 5px}
.Q_xs_lg_px-2{padding-left: 10px; padding-right: 10px}.Q_xs_lg_px-3{padding-left: 15px; padding-right: 15px}
.Q_xs_lg_px-4{padding-left: 20px; padding-right: 20px}.Q_xs_lg_px-5{padding-left: 25px; padding-right: 25px}
.Q_xs_lg_px-6{padding-left: 30px; padding-right: 30px}.Q_xs_lg_px-7{padding-left: 35px; padding-right: 35px}
.Q_xs_lg_px-8{padding-left: 40px; padding-right: 40px}.Q_xs_lg_px-100{padding-left: 100px; padding-right: 100px}
.Q_xs_lg_px-150{padding-left: 150px; padding-right: 150px}.Q_xs_lg_px-200{padding-left: 200px; padding-right: 200px}
.Q_xs_lg_py-0{padding-top: 0; padding-bottom: 0}.Q_xs_lg_py-1{padding-top: 5px; padding-bottom: 5px}
.Q_xs_lg_py-2{padding-top: 10px; padding-bottom: 10px}.Q_xs_lg_py-3{padding-top: 15px; padding-bottom: 15px}
.Q_xs_lg_py-4{padding-top: 20px; padding-bottom: 20px}.Q_xs_lg_py-5{padding-top: 25px; padding-bottom: 25px}
.Q_xs_lg_py-6{padding-top: 30px; padding-bottom: 30px}.Q_xs_lg_py-7{padding-top: 35px; padding-bottom: 35px}
.Q_xs_lg_py-8{padding-top: 40px; padding-bottom: 40px}.Q_xs_lg_py-100{padding-top: 100px; padding-bottom: 100px}
.Q_xs_lg_py-200{padding-top: 200px; padding-bottom: 200px}.Q_xs_lg_py-150{padding-top: 150px; padding-bottom: 150px}
.Q_xs_lg_pl-0{padding-left: 0}.Q_xs_lg_pl-1{padding-left: 5px}.Q_xs_lg_pl-2{padding-left: 10px}.Q_xs_lg_pl-3{padding-left: 15px}
.Q_xs_lg_pl-4{padding-left: 20px}.Q_xs_lg_pl-5{padding-left: 25px}.Q_xs_lg_pl-6{padding-left: 30px}.Q_xs_lg_pl-7{padding-left: 35px}
.Q_xs_lg_pl-8{padding-left: 40px}.Q_xs_lg_pl-100{padding-left: 100px}.Q_xs_lg_pl-150{padding-left: 150px}.Q_xs_lg_pl-200{padding-left: 200px}
.Q_xs_lg_pr-0{padding-right: 0}.Q_xs_lg_pr-1{padding-right: 5px}.Q_xs_lg_pr-2{padding-right: 10px}.Q_xs_lg_pr-3{padding-right: 15px}
.Q_xs_lg_pr-4{padding-right: 20px}.Q_xs_lg_pr-5{padding-right: 25px}.Q_xs_lg_pr-6{padding-right: 30px}.Q_xs_lg_pr-7{padding-right: 35px}
.Q_xs_lg_pr-8{padding-right: 40px}.Q_xs_lg_pr-100{padding-right: 100px}.Q_xs_lg_pr-200{padding-right: 150px}.Q_xs_lg_pr-150{padding-right: 200px}
.Q_xs_lg_pt-0{padding-top: 0}.Q_xs_lg_pt-1{padding-top: 5px}.Q_xs_lg_pt-2{padding-top: 10px}.Q_xs_lg_pt-3{padding-top: 15px}
.Q_xs_lg_pt-4{padding-top: 20px}.Q_xs_lg_pt-5{padding-top: 25px}.Q_xs_lg_pt-6{padding-top: 30px}.Q_xs_lg_pt-7{padding-top: 35px}
.Q_xs_lg_pt-8{padding-top: 40px}.Q_xs_lg_pt-100{padding-top: 100px}.Q_xs_lg_pt-200{padding-top: 200px}.Q_xs_lg_pt-150{padding-top: 150px}
.Q_xs_lg_pb-0{padding-bottom: 0}.Q_xs_lg_pb-1{padding-bottom: 5px}.Q_xs_lg_pb-2{padding-bottom: 10px}.Q_xs_lg_pb-3{padding-bottom: 15px}
.Q_xs_lg_pb-4{padding-bottom: 20px}.Q_xs_lg_pb-5{padding-bottom: 25px}.Q_xs_lg_pb-6{padding-bottom: 30px}.Q_xs_lg_pb-7{padding-bottom: 35px}
.Q_xs_lg_pb-8{padding-bottom: 40px}.Q_xs_lg_pb-100{padding-bottom: 100px}.Q_xs_lg_pb-200{padding-bottom: 200px}.Q_xs_lg_pb-150{padding-bottom: 150px}
}
@media only screen and (max-width: 600px)
{
.Q_xs_flex{display: flex }.Q_xs_flex-1{flex: 1 }
.Q_xs_flex-center{display: flex; justify-content: center; align-items: center }
.Q_xs_flex-wrap{display: flex; flex-wrap: wrap}
.Q_xs_flex-row{display: flex; flex-direction: row; justify-content: center; align-items: center }
.Q_xs_flex-col{display: flex; flex-direction: column; justify-content: center; align-items: center }
.Q_xs_flex-row-r{display: flex; flex-direction: row-reverse; justify-content: center; align-items: center }
.Q_xs_flex-col-r{display: flex; flex-direction: column-reverse; justify-content: center; align-items: center }
}
@media only screen and (max-width: 900px)
{
.Q_xs_sm_flex{display: flex }.Q_xs_sm_flex-1{flex: 1 }
.Q_xs_sm_flex-center{display: flex; justify-content: center; align-items: center }
.Q_xs_sm_flex-wrap{display: flex; flex-wrap: wrap}
.Q_xs_sm_flex-row{display: flex; flex-direction: row; justify-content: center; align-items: center }
.Q_xs_sm_flex-col{display: flex; flex-direction: column; justify-content: center; align-items: center }
.Q_xs_sm_flex-row-r{display: flex; flex-direction: row-reverse; justify-content: center; align-items: center }
.Q_xs_sm_flex-col-r{display: flex; flex-direction: column-reverse; justify-content: center; align-items: center }
}
@media only screen and (max-width: 1200px)
{
.Q_xs_md_flex{display: flex }.Q_xs_md_flex-1{flex: 1 }
.Q_xs_md_flex-center{display: flex; justify-content: center; align-items: center }
.Q_xs_md_flex-wrap{display: flex; flex-wrap: wrap}
.Q_xs_md_flex-row{display: flex; flex-direction: row; justify-content: center; align-items: center }
.Q_xs_md_flex-col{display: flex; flex-direction: column; justify-content: center; align-items: center }
.Q_xs_md_flex-row-r{display: flex; flex-direction: row-reverse; justify-content: center; align-items: center }
.Q_xs_md_flex-col-r{display: flex; flex-direction: column-reverse; justify-content: center; align-items: center }
}
@media only screen and (max-width: 1436px)
{
.Q_xs_lg_flex{display: flex }.Q_xs_lg_flex-1{flex: 1 }
.Q_xs_lg_flex-center{display: flex; justify-content: center; align-items: center }
.Q_xs_lg_flex-wrap{display: flex; flex-wrap: wrap}
.Q_xs_lg_flex-row{display: flex; flex-direction: row; justify-content: center; align-items: center }
.Q_xs_lg_flex-col{display: flex; flex-direction: column; justify-content: center; align-items: center }
.Q_xs_lg_flex-row-r{display: flex; flex-direction: row-reverse; justify-content: center; align-items: center }
.Q_xs_lg_flex-col-r{display: flex; flex-direction: column-reverse; justify-content: center; align-items: center }
}
@media only screen and (min-width: 1437px)
{
.Q_xs_xl_flex{display: flex }.Q_xs_xl_flex-1{flex: 1 }
.Q_xs_xl_flex-center{display: flex; justify-content: center; align-items: center }
.Q_xs_xl_flex-wrap{display: flex; flex-wrap: wrap}
.Q_xs_xl_flex-row{display: flex; flex-direction: row; justify-content: center; align-items: center }
.Q_xs_xl_flex-col{display: flex; flex-direction: column; justify-content: center; align-items: center }
.Q_xs_xl_flex-row-r{display: flex; flex-direction: row-reverse; justify-content: center; align-items: center }
.Q_xs_xl_flex-col-r{display: flex; flex-direction: column-reverse; justify-content: center; align-items: center }
.Q_xs_xl_flex-col-r{display: flex; flex-direction: column-reverse; justify-content: center; align-items: center }
}
/* Q_xs_lg_flex-col */
/* Q_xs_xl_flex-col */
/* show | display | none */
/* 0600px */ /* 0601px */
/* 0900px */ /* 0901px */
/* 1200px */ /* 1201px */
/* 1436px */ /* 1437px */
/* Basic */
/* Only Extra Small */
@media (min-width: 0601px){.Q_xs{display: none } }
/* Only Small */
@media (min-width: 0901px) , (max-width: 0600px){.Q_sm{display: none } }
/* Only Medium */
@media (min-width: 1201px) , (max-width: 0900px){.Q_md{display: none } }
/* Only Large */
@media (min-width: 1437px) , (max-width: 1200px){.Q_lg{display: none } }
/* Only Extra Large */
@media (max-width: 1436px){.Q_xl{display: none } }
/* Basic Range */
/* From Extra Small to Small */
@media (min-width: 0600px){.Q_xs_sm{display: none } }
/* From Extra Small to Small */
@media (min-width: 0901px){.Q_xs_md{display: none } }
/* From Extra Small to Medium */
@media (min-width: 1201px){.Q_xs_lg{display: none } }
/* From Extra Small to Large */
@media (min-width: 1437px){.Q_xs_xl{display: none } }
/* From Small to Medium */
@media (min-width: 1201px) , (max-width: 0600px){.Q_sm_md{display: none } }
/* From Small to Large */
@media (min-width: 1437px) , (max-width: 0600px){.Q_sm_xl{display: none } }
/* From Small to Infinity */
@media (max-width: 0600px){.Q_sm_x{display: none } }
/* From Medium to Large */
@media (max-width: 0900px) , (min-width: 1437px){.Q_md_lg{display: none } }
/* From Medium to Infinity */
@media (max-width: 0900px){.Q_md_x{display: none } }
/* From Large to Infinity */
@media (max-width: 1200px){.Q_lg_x{display: none } }
/* From Large to Infinity */
@media (max-width: 1436px){.Q_xl_x{display: none } }
/* Basic Combo */
/* Extra Small and Medium */
@media (min-width: 0601px) , (max-width: 0900px) , (min-width: 1201px){.Q_xs-md{display: none } }
/* Extra Small and Large */
@media (min-width: 0601px) , (max-width: 1200px) , (min-width: 1437px){.Q_xs-lg{display: none } }
/* Extra Small and Infinity */
@media (min-width: 0601px) , (max-width: 1436px){.Q_xs-xl{display: none } }
/* Small and Large */
@media (max-width: 0600px) , (min-width: 0901px) , (max-width: 1200px) , (min-width: 1437px){.Q_sm-lg{display:none}}
/* Small and Infinity */
@media (max-width: 0600px) , (min-width: 0901px) , (max-width: 1436px){.Q_sm-xl{display: none } }
/* Medium and Infinity */
@media (max-width: 0900px) , (min-width: 1201px) , (max-width: 1436px){.Q_md-xl{display: none } }
/* Advanced Range Combo */
/* From Extra Small to Small and Large */
@media (min-width: 0901px) , (max-width: 1200px) , (min-width: 1437px){.Q_xs_sm-lg{display: none } }
/* From Extra Small to Small and Infinity */
@media (min-width: 0901px) , (max-width: 1436px){.Q_xs_sm-xl{display: none } }
/* From Extra Small to Medium and Infinity */
@media (min-width: 1201px) , (max-width: 1436px){.Q_xs_md-xl{display: none } }
/* From Small to Medium and Infinity */
@media (max-width: 0576px) , (min-width: 0901px) , (max-width: 1200px){.Q_sm-lg_x{display: none } }
@media only screen and (max-width: 600px)
{
.Q_xs_w-10{width: 10%}.Q_xs_w-20{width: 20%}.Q_xs_w-25{width: 25%}.Q_xs_w-30{width: 30%}.Q_xs_w-33{width: 33%}
.Q_xs_w-40{width: 40%}.Q_xs_w-50{width: 50%}.Q_xs_w-60{width: 60%}.Q_xs_w-70{width: 70%}.Q_xs_w-80{width: 80%}
.Q_xs_w-90{width: 90%}.Q_xs_w-95{width: 95%}.Q_xs_w-100{width: 100%}.Q_xs_w-100vw{width: 100vw}
}
@media only screen and (max-width: 900px)
{
.Q_xs_sm_w-10{width: 10%}.Q_xs_sm_w-20{width: 20%}.Q_xs_sm_w-25{width: 25%}.Q_xs_sm_w-30{width: 30%}.Q_xs_sm_w-33{width: 33%}
.Q_xs_sm_w-40{width: 40%}.Q_xs_sm_w-50{width: 50%}.Q_xs_sm_w-60{width: 60%}.Q_xs_sm_w-70{width: 70%}.Q_xs_sm_w-80{width: 80%}
.Q_xs_sm_w-90{width: 90%}.Q_xs_sm_w-95{width: 95%}.Q_xs_sm_w-100{width: 100%}.Q_xs_sm_w-100vw{width: 100vw}
}
@media only screen and (max-width: 1200px)
{
.Q_xs_md_w-10{width: 10%}.Q_xs_md_w-20{width: 20%}.Q_xs_md_w-25{width: 25%}.Q_xs_md_w-30{width: 30%}.Q_xs_md_w-33{width: 33%}
.Q_xs_md_w-40{width: 40%}.Q_xs_md_w-50{width: 50%}.Q_xs_md_w-60{width: 60%}.Q_xs_md_w-70{width: 70%}.Q_xs_md_w-80{width: 80%}
.Q_xs_md_w-90{width: 90%}.Q_xs_md_w-95{width: 95%}.Q_xs_md_w-100{width: 100%}.Q_xs_md_w-100vw{width: 100vw}
}
@media only screen and (max-width: 1436px)
{
.Q_xs_lg_w-10{width: 10%}.Q_xs_lg_w-20{width: 20%}.Q_xs_lg_w-25{width: 25%}.Q_xs_lg_w-30{width: 30%}.Q_xs_lg_w-33{width: 33%}
.Q_xs_lg_w-40{width: 40%}.Q_xs_lg_w-50{width: 50%}.Q_xs_lg_w-60{width: 60%}.Q_xs_lg_w-70{width: 70%}.Q_xs_lg_w-80{width: 80%}
.Q_xs_lg_w-90{width: 90%}.Q_xs_lg_w-95{width: 95%}.Q_xs_lg_w-100{width: 100%}.Q_xs_lg_w-100vw{width: 100vw}
}
@media only screen and (min-width: 1080px)
{
.Q_1080_x{ max-width: 1080px }
}
@media only screen and (max-width: 1079px)
{
.Q_1080_x{ width: 100% !important }
}
/* ------------------------------------------ ANIMATION ------------------------------------------ */
.scale-outin-once-1{animation: scaleoutin 0.5s}
.appear-once-1{animation: fadeinout 1s}
.appear-once-2{animation: fadeinout 2s}
.appear-once-3{animation: fadeinout 3s}
.appear-once-4{animation: fadeinout 4s}
.appear-delay-1{animation: appeardelay 0.5s}
.appear-delay-2{animation: appeardelay 2s}
.appear-hiding{opacity: 0}
.appear-hiding-1{opacity: 0; transition: all 0.1s ease-in-out}
.appear-hiding-2{opacity: 0; transition: all 0.2s ease-in-out}
.appear-appear{opacity: 1}
.spin-1{animation: spin 1s; animation-iteration-count: infinite }
.spin-2{animation: spin 2s; animation-iteration-count: infinite }
.spin-3{animation: spin 3s; animation-iteration-count: infinite }
.spin-4{animation: spin 4s; animation-iteration-count: infinite }
.spin-5{animation: spin 5s; animation-iteration-count: infinite }
.spin-6{animation: spin 6s; animation-iteration-count: infinite }
.spin-7{animation: spin 7s; animation-iteration-count: infinite }
.spin-8{animation: spin 8s; animation-iteration-count: infinite }
.spin-9{animation: spin 9s; animation-iteration-count: infinite }
.spin-10{animation: spin 10s; animation-iteration-count: infinite }
.spin-20{animation: spin 20s; animation-iteration-count: infinite }
.spin-60{animation: spin 60s; animation-iteration-count: infinite }
.spin-120{animation: spin 120s; animation-iteration-count: infinite }
.huerotate-1{animation: huerotate 20s; animation-iteration-count: infinite }
.hover-1{animation: hover1 1s; animation-iteration-count: infinite }
.hover-2{animation: hover 2s; animation-iteration-count: infinite }
.hover-3{animation: hover 3s; animation-iteration-count: infinite }
.hover-4{animation: hover 4s; animation-iteration-count: infinite }
.shake-1{animation: shake 1s; animation-iteration-count: infinite }
.shake-2{animation: shake 2s; animation-iteration-count: infinite }
.shakefull-1{animation: shakefull 0.1s; animation-iteration-count: infinite }
.shakefull-2{animation: shakefull 0.2s; animation-iteration-count: infinite }
@keyframes spin{0%{transform: rotate(0deg)} 100%{transform: rotate(359deg)} }
@keyframes appeardelay {0%{opacity: 0}100%{opacity: 1}}
@keyframes fadeinout {0%{opacity: 0}25%{opacity: 1}75%{opacity: 1}100%{opacity: 0}}
@keyframes scaleoutin {0%{scale: 1}50%{scale: 1.05}100%{scale: 1}}
@keyframes huerotate {
0%{filter: hue-rotate(0)} 50%{filter: hue-rotate(0.8rad)}100%{filter: hue-rotate(0)}
}
@keyframes shakefull {
0%{transform: rotate(0deg)}50%{transform: rotate(10deg)}100%{transform: rotate(0deg)}
}
@keyframes shake {
0%{transform: translateX(0px)}50%{transform: translateX(10px)}100%{transform: translateX(0px)}
}
@keyframes hover1 {
0%{transform: translateY(-5px)}50%{transform: translateY(5px)}100%{transform: translateY(-5px)}
}
@keyframes hover {
0%{transform: translateY(-10px)}50%{transform: translateY(10px)}100%{transform: translateY(-10px)}
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
body { font-family: "Inter"; }
:root {
--color-blue: #0074D9;
--color-blue-dark: #004267;
--color-blue-sat: #1193E8;
--color-blue-desat: #9CBEDB;
--color-blue-light: #E8F3FF;
--color-green: #2ECC40;
--color-green-dark: #1D7F2A;
--color-green-sat: #36D35E;
--color-green-desat: #A6D9B4;
--color-green-light: #E5F9E0;
--color-orange: #ED7C3A;
--color-orange-dark: #BF5B0F;
--color-orange-sat: #FFA31A;
--color-orange-desat: #D7B085;
--color-orange-light: #FFF0D5;
--color-yellow: #FFDC00;
--color-yellow-dark: #BF9E00;
--color-yellow-sat: #FFE600;
--color-yellow-desat: #D7C585;
--color-yellow-light: #FFF9CC;
--color-red: #FF4136;
--color-red-dark: #B7161B;
--color-red-sat: #FF695E;
--color-red-desat: #D78E8C;
--color-red-light: #FFD8D6;
--color-turquoise: #39CCCC;
--color-turquoise-dark: #258E8B;
--color-turquoise-sat: #50E3E0;
--color-turquoise-desat: #A5D7D5;
--color-turquoise-light: #E5FFFF;
--color-purple: #7C3AED;
--color-purple-dark: #840A9F;
--color-purple-sat: #C61AFF;
--color-purple-desat: #B291C4;
--color-purple-light: #F3E8FF;
--color-emerson-dark: #344054;
--color-emerson-sat: #027A48;
--color-emerson: #3E5F58;
--color-emerson-desat: #B5CFC9;
--color-emerson-light: #ECFDF3;
}
:root {
--primary-dark: var(--color-emerson-dark);
--primary-sat: var(--color-emerson-sat);
--primary: var(--color-emerson);
--primary-desat: var(--color-emerson-desat);
--primary-light: var(--color-emerson-light);
--secondary-dark: var(--color-purple-dark);
--secondary-sat: var(--color-purple-sat);
--secondary: var(--color-purple);
--secondary-desat: var(--color-purple-desat);
--secondary-light: var(--color-purple-light);
--tertiary-dark: var(--color-orange-dark);
--tertiary-sat: var(--color-orange-sat);
--tertiary: var(--color-orange);
--tertiary-desat: var(--color-orange-desat);
--tertiary-light: var(--color-orange-light);
--bg-main: #ffffff;
--bg-muted: #F9FAFB;
--bg-faded: #F5F7F6;
--tx-main: #101828;
--tx-muted: #344054;
--tx-faded: #667085;
--tx-error: #B91C1C;
--tx-link: #026AA2;
--border-faded: #D0D5DD;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
body { font-family: "Inter"; }
:root {
--color-blue: #0074D9;
--color-blue-dark: #24292F;
--color-blue-sat: #1193E8;
--color-blue-desat: #9CBEDB;
--color-blue-light: #E8F3FF;
--color-green: #2ECC40;
--color-green-dark: #1D7F2A;
--color-green-sat: #36D35E;
--color-green-desat: #A6D9B4;
--color-green-light: #E5F9E0;
--color-orange: #ED7C3A;
--color-orange-dark: #BF5B0F;
--color-orange-sat: #FFA31A;
--color-orange-desat: #D7B085;
--color-orange-light: #FFF0D5;
--color-yellow: #FFDC00;
--color-yellow-dark: #BF9E00;
--color-yellow-sat: #FFE600;
--color-yellow-desat: #D7C585;
--color-yellow-light: #FFF9CC;
--color-red: #FF4136;
--color-red-dark: #B7161B;
--color-red-sat: #FF695E;
--color-red-desat: #D78E8C;
--color-red-light: #FFD8D6;
--color-turquoise: #39CCCC;
--color-turquoise-dark: #258E8B;
--color-turquoise-sat: #50E3E0;
--color-turquoise-desat: #A5D7D5;
--color-turquoise-light: #E5FFFF;
--color-purple: #7C3AED;
--color-purple-dark: #840A9F;
--color-purple-sat: #C61AFF;
--color-purple-desat: #B291C4;
--color-purple-light: #F3E8FF;
--color-emerson-dark: #344054;
--color-emerson-sat: #027A48;
--color-emerson: #3E5F58;
--color-emerson-desat: #B5CFC9;
--color-emerson-light: #ECFDF3;
}
:root {
--primary-dark: var(--color-blue-dark);
--primary-sat: var(--color-blue-sat);
--primary: var(--color-blue);
--primary-desat: var(--color-blue-desat);
--primary-light: var(--color-blue-light);
--secondary-dark: var(--color-purple-dark);
--secondary-sat: var(--color-purple-sat);
--secondary: var(--color-purple);
--secondary-desat: var(--color-purple-desat);
--secondary-light: var(--color-purple-light);
--tertiary-dark: var(--color-orange-dark);
--tertiary-sat: var(--color-orange-sat);
--tertiary: var(--color-orange);
--tertiary-desat: var(--color-orange-desat);
--tertiary-light: var(--color-orange-light);
--bg-main: #ffffff;
--bg-muted: #F9FAFB;
--bg-faded: #F5F7F6;
--bg-lowco: #d8d8d8;
--bg-link: #026AA2;
--bg-contrast: #24292F;
--tx-main: #101828;
--tx-muted: #344054;
--tx-faded: #667085;
--tx-soft: #a7adba;
--tx-contrast: #eeeeee;
--tx-error: #B91C1C;
--tx-link: #026AA2;
--tx-link-visited: #026AA2;
--tx-link-hover: #026AA2;
--tx-link-focus: #026AA2;
--tx-link-hover: #026AA2;
--border-faded: #D0D5DD;
}
.bg-primary {
background: var(--primary);
}
.bg-link { background: var(--bg-link); }
.bg-main { background: var(--bg-main); }
.bg-muted { background: var(--bg-muted); }
.bg-faded { background: var(--bg-faded); }
.bg-lowco { background: var(--bg-lowco); }
.bg-contrast { background: var(--bg-contrast); }
.bg-faded-odd:nth-child(2n) { background: var(--bg-faded); }
.bg-primary-desat { background: var(--primary-desat); }
.bg-hov-faded:hover { background: var(--bg-faded); }
.tx-contrast { color: var(--tx-contrast); }
.tx-main { color: var(--tx-main); }
.tx-error { color: var(--tx-error); }
.tx-soft { color: var(--tx-soft); }
.tx-faded { color: var(--tx-faded); }
.tx-primary { color: var(--primary); }
.tx-hov-primary:hover { color: var(--primary); }
.tx-link { color: var(--tx-link); }
.tx-muted { color: var(--tx-muted); }
.tx-link { color: var(--tx-link); }
/* Each state */
.tx-link:visited { color: var(--tx-link-visited) !important; }
.tx-link:hover { color: var(--tx-link-hover) !important; }
.tx-link:focus { color: var(--tx-link-focus) !important; }
.tx-link:hover, a:active { color: var(--tx-link-hover) !important; }
.tx-hov-link:hover { color: var(--tx-link); }
.tx-underline-primary { text-decoration-color: var(--primary); }
.tx-underline-link { text-decoration-color: var(--tx-link); }
Diagram Script
graph LR;
subgraph Behave
subgraph Border
border --> border_init
border_init("noborder | .border-?")
border_init -->|color| border_types_color("`
red-? | green-? | blue-? | white-? | grey-? | lgrey-?
`")
border_types_color --> border_types_color_variations("? | 50")
style border fill:#ffffff
style border_types_color_variations fill:#ffccaa
end
subgraph BorderRadius
borderradius("border radius") --> borderradius_init
borderradius_init(".bord-r-?")
borderradius_init -->|all sides| border_types("`
5 | 8 | 10 | 12 | 15 | 25 | 50 | 100 | 100p
`")
borderradius_init -->|2 corners| border_types_side("`t-? | b-? | l-? | r-?`")
border_types_side --> border_types_side_variations("`
5 | 8 | 10 | 12 | 15 | 25 | 50 | 100 | 100p
`")
style borderradius fill:#ffffff
style border_types fill:#ffccaa
style border_types_side_variations fill:#ffccaa
end
subgraph Cursor
cursor --> cursor_types(".cursor | .pointer | .clickble | .grab | .grabble | .stopcursor | .waitcursor")
cursor -->|events| cursor_events_types(".noclick | .nocursor | .noselect")
style cursor fill:#ffffff
end
style Border fill:#f9f9f9
style BorderRadius fill:#f9f9f9
style Cursor fill:#f9f9f9
endLast updated
