.ubuntu-22-04 {
            font-family: "Segoe UI Variable", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            font-size: 14px;
            line-height: 1.6;
            background-color: #2c0220 !important;
            color: #fff;
            text-align: center;
            font-weight: 400
        }

        .ubuntu-22-04:fullscreen {
            font-size: 22px
        }

        @media screen and (max-width: 1024px) {
            .ubuntu-22-04 {
                font-size: 12px;
                line-height: 1.4
            }

            .ubuntu-22-04:fullscreen {
                font-size: 18px
            }
        }

        .ubuntu-22-04-main-section {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column
        }

        .ubuntu-22-04-main-text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .ubuntu-22-04-bottom-text {
            position: absolute;
            bottom: max(15px, 10%);
            left: 50%;
            transform: translate(-50%, 0);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .update-ubuntu-22-04-logo {
            height: 40px;
            margin-bottom: 10px;
            margin-left: 10px
        }

        .ubuntu-22-04:fullscreen .update-ubuntu-22-04-logo {
            height: 100px;
            margin-bottom: 20px;
            margin-left: 20px
        }

        .ubuntu-22-04:fullscreen .dot {
            width: 8px;
            height: 8px;
            margin: 0 18px
        }

        :root {
            --ubuntu-animation-duration: 10s
        }

        @keyframes dotColorChange {

            0%,
            9% {
                background-color: #fff
            }

            10%,
            19% {
                background-color: #fc3d04
            }

            20%,
            29% {
                background-color: #fc3d04
            }

            30%,
            39% {
                background-color: #fc3d04
            }

            40%,
            49% {
                background-color: #fc3d04
            }

            50%,
            59% {
                background-color: #fc3d04
            }

            60%,
            69% {
                background-color: #fff
            }

            70%,
            79% {
                background-color: #fff
            }

            80%,
            89% {
                background-color: #fff
            }

            90%,
            99% {
                background-color: #fff
            }

            100% {
                background-color: #fff
            }
        }

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

        .dot {
            background-color: #fff;
            border-radius: 50%;
            width: 4px;
            height: 4px;
            margin: 0 7px;
            animation: dotColorChange var(--ubuntu-animation-duration) infinite
        }

        .dot:nth-child(1) {
            animation-delay: 0s
        }

        .dot:nth-child(2) {
            animation-delay: calc(var(--ubuntu-animation-duration) * .1)
        }

        .dot:nth-child(3) {
            animation-delay: calc(var(--ubuntu-animation-duration) * .2)
        }

        .dot:nth-child(4) {
            animation-delay: calc(var(--ubuntu-animation-duration) * .3)
        }

        .dot:nth-child(5) {
            animation-delay: calc(var(--ubuntu-animation-duration) * .4)
        }