:root {
    --bgc-input: white;
    --bg-color: white;
    --bg-tools: white;
    --cl-text: rgb(200, 0, 50);
    --ttr300: 300ms;
    --rack-color: rgb(82, 82, 82);
    --shadow-color-charging: rgb(0, 136, 247);
    --shadow-color-finished: rgb(0, 173, 0);
    --shadow-color-suspended: rgb(255, 145, 0);
}

.dark-theme {
    background-color: rgb(65, 65, 65);
    color: white;
}


.ligth-theme {
    background-color: white;
    color: black;
}

.bg-app{
    background-color: rgb(200, 0, 50);;
}

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

.bg-blue{
    background-color: rgb(0, 130, 216);
}

.bg-ligth-blue{
    background-color: rgb(155, 194, 228);
}

.bg-green{
    background-color: rgb(0, 173, 0);
}

.bg-ligth-green{
    background-color: rgb(200, 255, 200);
}

.bg-red{
    background-color: rgb(255, 0, 0);
}

.bg-ligth-red{
    background-color: rgb(255, 180, 180);
}

.bg-orange{
    background-color: rgb(255, 145, 0);
}

.bg-ligth-orange{
    background-color: rgb(255, 219, 177);
}

.bg-yellow{
    background-color: rgb(255, 255, 0);
}

.bg-ligth-yellow{
    background-color: rgb(255, 255, 194);
}

.bg-purple{
    background-color: rgb(128, 0, 128);
}

.bg-ligth-purple{
    background-color: rgb(255, 151, 255);
}

.bg-gray{
    background-color: rgb(51, 51, 51);
}

.bg-light-gray{
    background-color: rgb(200, 200, 200);
}

.bg-dark-gray{
    background-color: rgb(65, 65, 65);
}

.bg-black{
    background-color: black;
}

body {
    margin: 0;
}

.crs-pnt{
    cursor: pointer;
}

.mrg-r-4 {
    margin-right: 4px;
}

.mrg-b-4 {
    margin-bottom: 4px;
}

.mrg-l-4 {
    margin-left: 4px;
}

.mrg-r-6 {
    margin-right: 6px;
}

.mrg-l-6 {
    margin-left: 6px;
}

.mrg-r-8 {
    margin-right: 8px;
}

.mrg-l-8 {
    margin-left: 8px;
}

.mrg-b-8 {
    margin-bottom: 8px;
}

.mrg-t-8 {
    margin-top: 8px;
}

.mrg-r-10 {
    margin-right: 10px;
}

.mrg-l-10 {
    margin-left: 10px;
}

.mrg-b-10 {
    margin-bottom: 10px;
}

.mrg-t-10 {
    margin-top: 10px;
}

.mrg-r-12  {
    margin-right: 12px;
}

.mrg-l-12  {
    margin-left: 12px;
}

.mrg-b-12  {
    margin-bottom: 12px;
}

.mrg-t-12  {
    margin-top: 12px;
}

.mrg-b-20 {
    margin-bottom: 20px;
}

.mrg-t-20 {
    margin-top: 20px;
}

.mrg-4 {
    margin: 4px;
}

.mrg-6 {
    margin: 6px;
}

.mrg-8 {
    margin: 8px;
}

.mrg-10 {
    margin: 10px;
}

.mrg-12 {
    margin: 12px;
}

.mrg-r-12 {
    margin-right: 12px;
}

.mrg-l-12 {
    margin-left: 12px;
}

.mrg-14 {
    margin: 14px;
}

.mrg-r-14 {
    margin-right: 14px;
}

.mrg-l-14 {
    margin-left: 14px;
}

.mrg-16 {
    margin: 16px;
}

.mrg-r-16 {
    margin-right: 16px;
}

.mrg-l-16 {
    margin-left: 16px;
}

.mrg-18 {
    margin: 18px;
}

.mrg-r-18 {
    margin-right: 18px;
}

.mrg-l-18 {
    margin-left: 18px;
}

.mrg-20 {
    margin: 20px;
}

.mrg-r-20 {
    margin-right: 20px;
}

.mrg-l-20 {
    margin-left: 20px;
}

.mrg-22 {
    margin: 22px;
}

.mrg-r-22 {
    margin-right: 22px;
}

.mrg-l-22 {
    margin-left: 22px;
}

.mrg-24 {
    margin: 24px;
}

.mrg-r-24 {
    margin-right: 24px;
}

.mrg-l-24 {
    margin-left: 24px;
}

.mrg-l-40 {
    margin-left: 40px;
}

.mrg-r-40 {
    margin-right: 40px;
}

.mrg-t-40 {
    margin-top: 40px;
}

.mrg-b-40 {
    margin-bottom: 40px;
}

.mrg-r-n6 {
    margin-right: -6px;
}

.mrg-l-n6 {
    margin-left: -6px;
}

.mrg-t-n12 {
    margin-top: -12px;
}

.pad-r-4 {
    padding-right: 4px;
}

.pad-l-4 {
    padding-left: 4px;
}

.pad-r-6 {
    padding-right: 6px;
}

.pad-l-6 {
    padding-left: 6px;
}

.pad-r-8 {
    padding-right: 8px;
}

.pad-l-8 {
    padding-left: 8px;
}

.pad-r-10 {
    padding-right: 10px;
}

.pad-l-10 {
    padding-left: 10px;
}

.pad-b-10 {
    padding-bottom: 10px;
}

.pad-t-10 {
    padding-top: 10px;
}

.pad-0 {
    padding: 0px;
}

.pad-4 {
    padding: 4px;
}

.pad-6 {
    padding: 6px;
}

.pad-8 {
    padding: 8px;
}

.pad-10 {
    padding: 10px;
}

.pad-12 {
    padding: 12px;
}

.pad-r-12 {
    padding-right: 12px;
}

.pad-l-12 {
    padding-left: 12px;
}

.pad-14 {
    padding: 14px;
}

.pad-r-14 {
    padding-right: 14px;
}

.pad-l-14 {
    padding-left: 14px;
}

.pad-16 {
    padding: 16px;
}

.pad-r-16 {
    padding-right: 16px;
}

.pad-l-16 {
    padding-left: 16px;
}

.pad-18 {
    padding: 18px;
}

.pad-r-18 {
    padding-right: 18px;
}

.pad-l-18 {
    padding-left: 18px;
}

.pad-20 {
    padding: 20px;
}

.pad-r-20 {
    padding-right: 20px;
}

.pad-l-20 {
    padding-left: 20px;
}

.pad-22 {
    padding: 22px;
}

.pad-r-22 {
    padding-right: 22px;
}

.pad-l-22 {
    padding-left: 22px;
}

.pad-24 {
    padding: 24px;
}

.pad-r-24 {
    padding-right: 24px;
}

.pad-l-24 {
    padding-left: 24px;
}

.pad-b-4 {
    padding-bottom: 4px;
}

.pad-t-4 {
    padding-top: 4px;
}

.pad-b-6 {
    padding-bottom: 6px;
}

.pad-t-6 {
    padding-top: 6px;
}

.pad-b-8 {
    padding-bottom: 8px;
}

.pad-t-8 {
    padding-top: 8px;
}

.pad-b-10 {
    padding-bottom: 10px;
}

.pad-t-10 {
    padding-top: 10px;
}

.pad-b-12 {
    padding-bottom: 12px;
}

.pad-t-12 {
    padding-top: 12px;
}

.pad-b-14 {
    padding-bottom: 14px;
}

.pad-t-14 {
    padding-top: 14px;
}

.pad-b-16 {
    padding-bottom: 16px;
}

.pad-t-16 {
    padding-top: 16px;
}

.pad-b-18 {
    padding-bottom: 18px;
}

.pad-t-18 {
    padding-top: 18px;
}

.pad-b-20 {
    padding-bottom: 20px;
}

.pad-t-20 {
    padding-top: 20px;
}

.pad-b-24 {
    padding-bottom: 24px;
}

.pad-t-24 {
    padding-top: 24px;
}

.pad-n4 {
    padding: -4px;
}

.pad-n6 {
    padding: -6px;
}

.pad-n12 {
    padding: -12px;
}

.pad-n24 {
    padding: -24px;
}

.border-radius-16 {
    border-radius: 16px;
}