body {
    --product-cloud-color: #01B5DC;
    --product-camstreamer-color: #408BE5;
    --product-camoverlay-color: #FFA300;
    --product-camscripter-color: #00AEA4;
    --product-camswitcher-color: #662885;
    --product-ndi-color: #333333;
    --product-sporttracker-color: #1EBA29;
}

.btn-cs,
.btn-camstreamer,
.btn-blue {
    color: #fff !important;
    background-color: var(--product-camstreamer-color);
    transition: 0.2s;
}
.btn-co,
.btn-camoverlay,
.btn-orange {
    color: #000 !important;
    background-color: var(--product-camoverlay-color);
    transition: 0.2s;
}
.btn-csc,
.btn-camscripter,
.btn-light-blue {
    color: #fff !important;
    background-color: var(--product-camscripter-color);
    transition: 0.2s;
}
.btn-csw,
.btn-camswitcher,
.btn-purple {
    color: #fff !important;
    background-color: var(--product-camswitcher-color);
    transition: 0.2s;
}

.btn-ndi,
.btn-dark-grey {
    color: #fff !important;
    background-color: var(--product-ndi-color);
    transition: 0.2s;
}
.btn-cloud {
    color: #000;
    background-color: var(--product-cloud-color);
    transition: 0.2s;
}
.btn-spt {
    color: #000;
    background-color: var(--product-sporttracker-color);
    transition: 0.2s;
}
.btn-cs:hover,
.btn-camstreamer:hover,
.btn-blue:hover,
.btn-co:hover,
.btn-camoverlay:hover,
.btn-orange:hover,
.btn-csc:hover,
.btn-camscripter:hover,
.btn-light-blue:hover,
.btn-csw:hover,
.btn-camswitcher:hover,
.btn-purple:hover,
.btn-ndi:hover,
.btn-dark-grey:hover,
.btn-cloud:hover,
.btn-spt:hover {
    transform: translate(0px, -2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}


.btn-spt-outline,
.btn-spt-outline:visited,
.btn-spt-outline:focus,
.btn-sporttacker-outline,
.btn-sporttacker-outline:visited,
.btn-sporttacker-outline:focus {
    color: var(--product-sporttracker-color);
    background: transparent;
    border: 2px solid var(--product-sporttracker-color);
    transition: 0.2s;
}
.btn-spt-outline:hover,
.btn-spt-outline:active,
.btn-sporttracker-outline:hover,
.btn-sporttracker-outline:active {
    color: #fff;
    background: var(--product-sporttracker-color);
    border: 2px solid var(--product-sporttracker-color);
    transition: 0.2s;
    transform: translate(0px, -2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* CamStreamer */
.btn-camstreamer-outline,
.btn-camstreamer-outline:visited,
.btn-camstreamer-outline:focus,
.btn-cs-outline,
.btn-cs-outline:visited,
.btn-cs-outline:focus,
.btn-blue-outline,
.btn-blue-outline:visited,
.btn-blue-outline:focus {
    color: var(--product-camstreamer-color);
    background: transparent;
    border: 2px solid var(--product-camstreamer-color);
    transition: 0.2s;
}
.btn-camstreamer-outline:hover,
.btn-camstreamer-outline:active,
.btn-cs-outline:hover,
.btn-cs-outline:active,
.btn-blue-outline:hover,
.btn-blue-outline:active {
    color: #fff;
    background: var(--product-camstreamer-color);
    border: 2px solid var(--product-camstreamer-color);
    transition: 0.2s;
    transform: translate(0px, -2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* CamOverlay */

.btn-camoverlay-outline,
.btn-camoverlay-outline:visited,
.btn-camoverlay-outline:focus,
.btn-co-outline,
.btn-co-outline:visited,
.btn-co-outline:focus,
.btn-orange-outline,
.btn-orange-outline:visited,
.btn-orange-outline:focus {
    color: var(--product-camoverlay-color);
    background: transparent;
    border: 2px solid var(--product-camoverlay-color);
    transition: 0.2s;
}
.btn-camoverlay-outline:hover,
.btn-camoverlay-outline:active,
.btn-co-outline:hover,
.btn-co-outline:active,
.btn-orange-outline:hover,
.btn-orange-outline:active {
    color: #000;
    background: var(--product-camoverlay-color);
    border: 2px solid var(--product-camoverlay-color);
    transition: 0.2s;
    transform: translate(0px, -2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* CamScripter */

.btn-camscripter-outline,
.btn-camscripter-outline:visited,
.btn-camscripter-outline:focus,
.btn-csc-outline,
.btn-csc-outline:visited,
.btn-csc-outline:focus,
.btn-light-blue-outline,
.btn-light-blue-outline:visited,
.btn-light-blue-outline:focus {
    color: var(--product-camscripter-color);
    background: transparent;
    border: 2px solid var(--product-camscripter-color);
    transition: 0.2s;
}
.btn-camscripter-outline:hover,
.btn-camscripter-outline:active,
.btn-csc-outline:hover,
.btn-csc-outline:active,
.btn-light-blue-outline:hover,
.btn-light-blue-outline:active {
    color: #fff;
    background: var(--product-camscripter-color);
    border: 2px solid var(--product-camscripter-color);
    transition: 0.2s;
    transform: translate(0px, -2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* CamSwitcher */

.btn-camswitcher-outline,
.btn-camswitcher-outline:visited,
.btn-camswitcher-outline:focus,
.btn-csw-outline,
.btn-csw-outline:visited,
.btn-csw-outline:focus,
.btn-puprle-outline,
.btn-puprle-outline:visited,
.btn-puprle-outline:focus {
    color: var(--product-camswitcher-color);
    background: transparent;
    border: 2px solid var(--product-camswitcher-color);
    transition: 0.2s;
}
.btn-camswitcher-outline:hover,
.btn-camswitcher-outline:active,
.btn-csw-outline:hover,
.btn-csw-outline:active,
.btn-puprle-outline:hover,
.btn-puprle-outline:active {
    color: #fff;
    background: var(--product-camswitcher-color);
    border: 2px solid var(--product-camswitcher-color);
    transition: 0.2s;
    transform: translate(0px, -2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* NDI */

.btn-ndi-outline,
.btn-ndi-outline:visited,
.btn-ndi-outline:focus,
.btn-ndi-outline,
.btn-ndi-outline:visited,
.btn-ndi-outline:focus,
.btn-dark-grey-outline,
.btn-dark-grey-outline:visited,
.btn-dark-grey-outline:focus {
    color: var(--product-ndi-color);
    background: transparent;
    border: 2px solid var(--product-ndi-color);
    transition: 0.2s;
}
.btn-ndi-outline:hover,
.btn-ndi-outline:active,
.btn-ndi-outline:hover,
.btn-ndi-outline:active,
.btn-dark-grey-outline:hover,
.btn-dark-grey-outline:active {
    color: #fff;
    background: var(--product-ndi-color);
    border: 2px solid var(--product-ndi-color);
    transition: 0.2s;
    transform: translate(0px, -2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* CLOUD */

.bg-cloud {
    background-color: var(--product-cloud-color);
}
.bg-cs,
.bg-camstreamer,
.bg-blue {
    background-color: var(--product-camstreamer-color);
    color: #fff;
}
.bg-co,
.bg-camoverlay,
.bg-orange {
    background-color: var(--product-camoverlay-color);
    color: #fff;
}
.bg-csc,
.bg-camscripter,
.bg-light-blue {
    background-color: var(--product-camscripter-color);
    color: #fff;
}
.bg-csw,
.bg-camswitcher,
.bg-purple {
    background-color: var(--product-camswitcher-color);
    color: #fff;
}

.bg-ndi,
.bg-dark-grey {
    background-color: var(--product-ndi-color);
    color: #fff;
}

.text-cloud,
.text-cloud:hover {
    color: #12d4fa;
}
.text-cloud-dark,
.text-cloud-dark:hover {
    color: #007a9a;
}
.text-camstreamer,
.text-cs,
.text-blue {
    color: var(--product-camstreamer-color) !important;
}
.text-camstreamer:hover,
.text-cs:hover,
.text-blue:hover {
    color: var(--product-camstreamer-color);
}
.text-camoverlay,
.text-co,
.text-orange {
    color: var(--product-camoverlay-color) !important;
}
.text-camoverlay:hover,
.text-co:hover,
.text-orange:hover {
    color: var(--product-camoverlay-color);
}
.text-camscripter,
.text-csc,
.text-light-blue {
    color: var(--product-camscripter-color) !important;
}
.text-camscripter:hover,
.text-csc:hover,
.text-light-blue:hover {
    color: var(--product-camscripter-color);
}
.text-camswitcher,
.text-csw,
.text-purple {
    color: var(--product-camswitcher-color) !important;
}
.text-camswitcher:hover,
.text-csw:hover,
.text-purple:hover {
    color: var(--product-camswitcher-color);
}
.text-spt,
.text-sporttracker,
.text-spt:hover,
.text-sporttracker:hover {
    color: var(--product-sporttracker-color) !important;
}

.text-ndi,
.text-dark-grey {
    color: var(--product-ndi-color) !important;
}
.text-ndi:hover,
.text-dark-grey:hover {
    color: var(--product-ndi-color);
}
.text-bundle,
.text-gray {
    color: #737373;
}
.text-black {
    color: #000000;
}