Pinnacle-OA/ui/src/assets/css/common.css

:root {
    --main-color: #00D4FF;
    --background-color: #F5F5F5;
    --font-main-color: #4D4D4D;
    --font-secondary-color: #9E9E9E;
}

body {
    color: var(--font-main-color);
    user-select: none;
}

.fill {
    height: 100%;
    width: 100%;
}

.fill-with {
    width: 100%;
}

.fill-height {
    height: 100%;
}

.background-white {
    background-color: white;
}

.center-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.vertical-center-box {
    display: flex;
    align-items: center;
}

.horizontal-center-box {
    display: flex;
    justify-content: center;
}

.icon-size-xs {
    width: 16px;
    height: 16px;
}

.icon-size-xs > use {
    width: 16px;
    height: 16px;
}

.icon-size-sm {
    width: 20px;
    height: 20px;
}

.icon-size-sm > use {
    width: 20px;
    height: 20px;
}

.icon-size-md {
    width: 24px;
    height: 24px;
}

.icon-size-md > use {
    width: 24px;
    height: 24px;
}

.icon-size-lg {
    width: 32px;
    height: 32px;
}

.icon-size-lg > use {
    width: 32px;
    height: 32px;
}

.icon-size-xl {
    width: 64px;
    height: 64px;
}

.icon-size-xl > use {
    width: 64px;
    height: 64px;
}

.icon-size-menu {
    width: 23px;
    height: 23px;
}

.icon-size-menu > use {
    width: 23px;
    height: 23px;
}