html, body {
    font-family: 'Arial';
    margin: 0;
    padding: 0;
    height: 95%;
    width: 100%;
    color: #444;
}

a {
    color: #000000;
    text-decoration: none;
    /*background: #eee;*/

}


p.p-red {
    color: red;
    text-indent: 3ch;

}

/*a:hover {
	color: #CC0000;
	text-decoration: underline;
}*/

a:hover {
    text-decoration: underline;
    color: blue;
    /*background-color: #eee;*/
}

div.carousel-item {
    width: 100%;
    height: 50vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


img.img-reg {
    max-height: 400px;
    width: auto;
    border: 4px solid #d55f0ebf;
    /* border: 2px solid #d55f0ebf;*/
}


/*img {max-width: 300px; height: auto;}*/
img.img-mini {
    max-width: 30px;
    height: auto;
    padding: 3px 3px 3px 3px;
    padding: 0.1em;
}

img.img-mini-died {
    max-width: 20px;
    height: auto;
    padding: 3px 3px 3px 3px;
    border: 3px solid black;
    padding: 0.1em;
}


img.img-mini-update {
    max-width: 100px;
    height: auto;
    padding: 3px 3px 3px 3px;
    padding: 0.1em;
}

img.img-mini-update-died {
    max-width: 100px;
    height: auto;
    padding: 3px 3px 3px 3px;
    border: 3px solid black;
    padding: 0.1em;
}



img.img-sticky {

    position: sticky;
    top: 0;
    width: 200px;
}


img.img-article-left-max {

    position: sticky;
    top: 0;
    width: auto;
    max-height: 600px;
    padding: 10px 10px 10px 10px;
    margin: 0px 0px 20px 0px;
    border-radius: 5% ;
}

img.img-article-left-max-died {

    position: sticky;
    top: 0;
    width: auto;
    max-height: 600px;
    padding: 10px 10px 10px 10px;
    margin: 0px 0px 20px 0px;
    border-radius: 5% ;
    border: 10px solid black;
    border-radius: 10% ;
}







img.img-article-left {

    position: sticky;
    top: 0;

    height: 400px;

    padding: 10px 10px 10px 10px;
    margin: 10px 50px 10px 50px;
    border-radius: 10% ;

}

img.img-article-left-died {

    position: sticky;
    top: 0;
    height: 400px;
    padding: 10px 10px 10px 10px;
    margin: 10px 50px 10px 50px;
    border-radius: 10% ;

    border: 10px solid black;
    border-radius: 10% ;
}


img.img-article-left-died.thumb {
    max-width: 40px;
    height: auto;

    padding: 0px 0px 0px 0px;
    border: 10px solid black;
    margin: 10px 10px 10px 10px;
}

img.img-article-left.thumb {
    max-width: 50px;
    height: auto;

}



img.img-logo {
    width: 40px;
    height: auto;
    float: auto;
    padding: 0px 0px 20px 0px;
    margin: 0px 20px 0px 0px;
}


img.img-menu {
    max-width: 100%;
    height: auto;
    float: right;
    padding: 0px 7px 30px 0px;
    margin: 0;
}


div.article-panel {
    background: #eee;

    box-sizing: border-box;
    overflow: hidden;
    color: #555;
}

div.article-panel p.first {
    margin: 0;
    float: left;

}

div.article-panel p.last {
    margin: 0;
    float: right;

}

div.article-panel span.first {
    margin: 0;
    float: left;
    font-size: 20px;
}

div.article-panel span.last {
    margin: 0;
    float: right;
    font-size: 20px;
}


span.span-first {
    margin: 0px 10px 0px 10px;
    float: left;
    font-size: 20px;
}

span.span-center {
    margin: 100px;

}

span.span-last {
    margin: 0px 10px 0px 0px;
    float: right;
}


ul.long-text {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.long-text li {
    border-bottom: 0px solid black;
    border-top: 2px solid red;
}


ul.long-text p {
    margin: 0;
    text-indent: 5ch;
}


ul.list-articles {
    list-style: none;
    margin: 0;
    padding: 0;
}


ul.list-articles li {
    border-bottom: 2px solid red;
    border-top: 0px solid white;
}

em {
    /*font-weight: bold;*/
    font-style: normal;
    color: #d55f0ebf;
}


.table-page {
    width: 100%;
    height: 100%;
    vertical-align: top;
}

.table-page tr {
    height: 100%;
}

.clear {
    clear: both;
}

.header {
    background: #000000;
    height: 70px;
}

.logo {
    background: url('kurs84/images/gerb84.png') no-repeat 0px 0px;
    width: 50px;
    height: auto;
    margin: 10px 20px 10px 10px;
}

ul.mainmenu {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 70px;
    color: #f9f45e;
    font-size: 20px;
    overflow: hidden;
}

ul.mainmenu li {
    float: left;
    margin: 20px 20px 10px 10px;
}

ul.mainmenu li.log {
    float: auto;
    margin: 10px 20px 10px 10px;

}


ul.mainmenu li.last {
    float: right;
    margin: 20px 0px 0px 0px;
}

ul.mainmenu li a {
    color: #f1f161;
    text-decoration: none;
    float: auto;
    margin: 5px 0px 0px 0px;
    background: #000;
}

ul.mainmenu li a:hover {
    color: blue;
}

.panelitems {
    text-align: left;
}

ul.langitem {
    list-style: none;
    display: inline-block;
    margin: 30px;
    padding: 0;
    max-width: 300px
}

ul.langitem li {
    margin: 10px 0 0 0;
    width: 100%;
}

ul.langitem li.image {
    margin: 0;
    text-align: center;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

ul.langitem li.descr {
    color: #777;
    height: 170px;
    overflow: hidden;
}

ul.langitem li a {
    color: #fdc073;
    text-decoration: none;
    font-size: 20px;
}

ul.langitem li a:hover {
    color: #FDA83D;
}

ul.pages {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 65px;
    color: black;
    font-size: 20px;
    overflow: hidden;
    white-space: initial = 10
}


div.button {
    background: #3F4137;
    max-width: 200px;
    margin: 0 auto;
    padding: 5px 20px 5px 20px;
    border-radius: 10px;
    font-size: 20px;
}


table {
    border-collapse: collapse;

}

table.table-sht {
    border-collapse: collapse;
    background: #eabd4033;

}


td.td-sht {
    border: 2px #d55f0ebf solid; /* стиль рамки ячеек */
    padding: 10px;
    text-indent: 5ch;
    /*font-family: Georgia, serif;*/
    font-family: Courier monospace;
}

td.td-sht em {
    /*font-weight: bold;*/
    font-style: normal;
    color: #d55f0ebf;


}


td.td-sht a {
    background: #f4ecd6;
}

td.td-sht strong {

}


td.td-sht div {
    /*font-weight: bold;
    font-style: normal;*/
    color: #d55f0ebf;
}

tr.tr-sht {
    border: 2px #d55f0ebf solid; /* стиль рамки ячеек */
    padding: 0.2em;
}


.table-content {
    width: 100%;
    min-height: 95%;
    height: 95%;
}


.left-chapters {
    margin: 0;
    background: #eee;
    border-right: 1px solid #ccc;
    min-height: 100%;
}

.left-chapters ul {
    width: 230px;
    min-height: 100%;
    margin: 0;
    padding: 20px 10px 10px 20px;
    list-style: none;
    font-size: 20px;

}

.left-chapters ul li {
    margin: 30px 0 0 0;
    color: #444;
    align: center;
}

.left-chapters ul li.selected {
    color: #0059b2;
    align: center;
}

.left-chapters ul li a {
    color: #444;
    text-decoration: none;
    align: center;
}

.left-chapters ul li a:hover {
    color: blue;
}

.left-chapters ul li.share {
    margin: 60px 0 0 0;
}

.left-chapters ul li.share p {
    margin: 30px 0 30px 0;
}

.left-chapters ul li.share a {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0 20px 0 0;
}

.left-chapters ul li.share a.share-yt {
    width: 100%;
    height: 30px;
    background: url('../images/share_yt.png') no-repeat 0 0
}

.left-chapters ul li.share a.share-yt:hover {
    width: 100%;
    height: 30px;
    background: url('../images/share_yt.png') no-repeat 0 -30px
}


.right-chapters {
    margin: 0;
    background: #eee;
    border-right: 1px solid #ccc;
    min-height: 100%;
}

.right-chapters ul {
    width: 230px;
    min-height: 100%;
    margin: 0;
    padding: 20px 10px 10px 20px;
    list-style: none;
    font-size: 20px;

}

.right-chapters ul li {
    margin: 30px 0 0 0;
    color: #444;
    align: center;


}


.content {
    padding: 10px 20px 20px 20px;
    width: 100%;
    box-sizing: border-box;
}

ul.breadcrumbs {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 20px;
    font-family: Sans-serif, Arial, Tahoma;
}

ul.breadcrumbs li {
    display: inline-block;
}

ul.breadcrumbs li a {
    color: #0059b2;
    text-decoration: none;
}

ul.breadcrumbs li a:hover {
    color: #CC0000;
}

ul.breadcrumbs li:after {
    padding: 0 10px 0 10px;
    content: "\2192";
}

ul.breadcrumbs li.last:after {
    content: "";
}

ul.control {
    margin: 0;
    padding: 60px 0 0 0;
    list-style: none;
    font-family: Sans-serif, Arial, Tahoma;
    font-size: 18px;
    width: 100%;
}

ul.control li {
    float: left;
    padding: 0 0 0 10px;
}

ul.control li.first:before {
    content: "\2190";
    padding: 0 10px 0 0;
}

ul.control li.last {
    float: right;
    padding: 0 40px 0 0;
}

ul.control li.last:after {
    content: "\2192";
    padding: 0 0 0 10px;
}

ul.control li a {
    color: #0059b2;
    text-decoration: none;
}

ul.control li a:hover {
    color: #CC0000;
}

ul.content-table {
    margin: 0;
    padding: 60px 0 0 30px;
    list-style: none;
    font-family: Sans-serif, Arial, Tahoma;
    font-size: 25px;
}

ul.content-table li {
    margin: 0 0 40px 0;
}

ul.content-table li a {
    color: #BB5715;
    text-decoration: none;
}

ul.content-table li a:hover {
    color: #F0711C;
}

.content-text {
    margin: 0px 0 0 0px;
    color: #000;
    font-size: 20px;
    font-family: Yandex Sans Display Light;
}

.content-text h1 {
    font-size: 40px;
}

.content-text h6 {
    font-size: 15px;
}

.content-text div {
    margin: 0px 0 0 0px;
    font-size: 20px;
}

.content-text p {
    font-size: 20px;
    color: black;
}

.content-text p i {
    font-size: 20px;
    color: red;
}


.content-text dd {
    font-size: 20px;
    color: black;

}


ul.lang-list {
    list-style: none;
    margin: 0;
    padding: 14px 0 0 0;
    background: #3F4137;
    width: 100%;
    height: 50px;
    border-top: 1px solid #959A82;
    box-sizing: border-box;
    font-size: 18px;
    font-family: Sans-serif, Arial, Tahoma;
}

ul.lang-list li {
    display: inline-block;
    margin-left: 40px;
}

ul.lang-list li.selected {
    color: #fdc073;
    border-bottom: 1px solid #fdc073;
}

ul.lang-list li a {
    color: #eee;
    text-decoration: none;
}

ul.lang-list li a:hover {
    color: #fdc073;
}

.topic-subject .topic-line {
    border-bottom: 1px solid #CC0000;
    margin-top: -16px;
}

.topic-subject .topic-text {
    display: inline-block;
    font-size: 28px;
    color: #777;
    padding: 0 10px 0 10px;
    margin-left: 30px;
    background: #fff;
    font-family: Sans-serif, Arial, Tahoma;
}

.list-topic {
    margin: 40px 0 60px 0;
    font-family: Sans-serif, Arial, Tahoma;
}

.list-topic p {
    margin: 0;
    font-size: 28px;
}

.list-topic ol {
    columns: 2;
    -webkit-columns: 2;
    column-gap: 40px;
}

.list-topic ol li {
    display: list-item;
    margin: 10px 10px 0 0px;
    padding: 0 0 0 10px;
}

.list-topic ol li a {
    color: #0059b2;
    text-decoration: none;
}

.list-topic ol li a:hover {
    color: #CC0000;
}

.highlight {
    max-width: 350px;
    padding: 0 10px 0 10px;
    margin: 0;
    overflow: auto;
    overflow-y: hidden;
    background: #f0f0f0;
}

.highlight p {
    margin: 0;
}

.highlight .block {
    width: 100%;
    margin: 0;
}

.highlight .block p {
    margin: 0;
}

.quote {
    background: url('../images/blockquote.png') no-repeat 0 10px;
    padding: 5px 5px 5px 70px;
    font-family: Sans-serif, Arial, Tahoma;
    font-style: italic;
}


#footer {
    box-sizing: border-box;

    background: #3F4137;
    padding: 5px;
    color: #f9f45e;
    font-size: 14px;
    font-family: Verdana, Geneva, Arial, Helvetica;
    text-align: center;
    overflow: hidden;
}

#footer a {
    text-decoration: underline;
    color: #f9f45e;
    background: #3F4137;
}

.form-input {
    box-sizing: border-box;
    width:auto;
    font-family: Sans-serif, Arial, Tahoma, bold;
    font-size: 20px;
    height: 30px;
    border-radius: 3px;
}

.form-label-m {
    display: inline-block;
    min-width: 150px;
    vertical-align: top;
    color: red;
}


.form-label-delete {
    align: center;
    display: inline-block;
    min-width: 250px;
    vertical-align: top;
    font-family: Sans-serif, Arial, Tahoma, bold;
    font-size: 20px;
    height: 30px;
    border-radius: 3px;
}

.form-error ul {
    list-style: none;
    padding: 0;
    color: #CC0000;
}

.form-button {
    min-width: 200px;
    font-size: 15px;
}

.button {
    --button-bg: var(--button-primary-default);
    --button-bg-hover: var(--button-primary-hover);
    --button-bg-active: var(--button-primary-active);
    --button-border-color: var(--button-primary-default);
    --button-focus-effect: var(--focus-effect);
    --button-height: var(--form-elem-height, 5rem);
    --button-color: var(--background-primary);
    --button-font: var(--type-emphasis-m);
    --button-padding: 0.5rem;
    --button-radius: var(--elem-radius, 0.25rem);
    border-radius: var(--button-radius);

    cursor: pointer;
    display: inline-block;
    padding: 0;
    text-decoration: none;
}

.button-wrap {
    align-items: center;
    background-color: var(--button-bg);
    border: 1px solid var(--button-border-color);
    border-radius: var(--button-radius);
    color: var(--button-color);
    display: flex;
    font: var(--button-font);
    gap: 0.25rem;
    height: var(--button-height);
    justify-content: center;
    padding-left: var(--button-padding);
    padding-right: var(--button-padding);
    position: relative;
}

.button .icon {
    background-color: var(--button-color);
    margin: 0 -1px;
/ / shrinks icon-only buttons to square .
}

/* Button States */

.button:hover,
.button.hover {
/ / In most cases, we want the border to be the same color as the background . --button-border-color: var(--button-bg-hover, var(--button-bg));

    .button-wrap {
        background-color: var(--button-bg-hover, var(--button-bg));
    }
}

.button:active,
.button.active {
    .button-wrap {
        background-color: var(--button-bg-active, var(--button-bg));
    }
}

.button:focus,
.button.focus {
    outline: none;

    .button-wrap {
        border: 1px solid var(--button-secondary-border-focus);
        box-shadow: var(--button-focus-effect);
    }
}

.button.button[disabled],
.button.button.inactive {
    cursor: default;
    opacity: 0.65;

    &:hover {
        --button-bg-hover: unset;
    }

    &:active {
        --button-bg-active: unset;
    }
}

/* Standard Button Modifiers */

.button.small,
.button.small .button-wrap {
    --button-height: 1.75rem;
    --button-padding: 0.25rem;
}

/* Secondary Version */

.button.secondary {
    --button-bg: var(--button-secondary-default);
    --button-border-color: var(--border-primary);
    --button-color: var(--text-secondary);
    --button-bg-hover: var(--button-secondary-hover);
    --button-bg-active: var(--button-secondary-active);

    &:focus {
        --button-border-color: var(--button-secondary-border-focus);
    }
}

/* Action Version */

.button.action {
    --button-bg: transparent;
    --button-border-color: var(--button-bg);
    --button-color: var(--text-secondary);
    --button-font: var(--type-label-s);
    --button-bg-hover: var(--button-secondary-hover);
    --button-bg-active: var(--button-secondary-active);

    &.has-icon {
        --button-font: var(--type-emphasis-m);
        text-transform: initial;
    }

    &:focus {
        --button-border-color: var(--button-secondary-border-focus);
    }

    .button-wrap {
        text-transform: var(--button-action-transform, uppercase);
    }

    .highlight {
        --button-color: var(--button-primary-default);
    }
}

/* Select Version */
.button.select {
    --button-bg: var(--button-secondary-default);
    --button-bg-hover: var(--button-secondary-hover);
    --button-bg-active: var(--button-secondary-active);
    --button-border-color: var(--border-primary);
    --button-color: var(--text-secondary);
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    text-decoration: none;

    .button-wrap {
        box-shadow: var(--shadow-01);
        padding-right: 26px;
        position: relative;
    }

    .button-wrap::after {
        background-color: var(--icon-primary);
        content: "";
        display: block;
        height: 16px;
        mask-image: url("../../../assets/icons/small-arrow.svg");
        mask-size: cover;
        position: absolute;
        right: 0.5rem;
        top: calc(50% - 0.5rem);
        width: 16px;
    }
}

.button.link {
    --button-bg: none;
    --button-bg-hover: none;
    --button-bg-active: none;
    --button-border-color: none;
    --button-focus-effect: none;
    --button-secondary-border-focus: none;
    --button-height: auto;
    --button-font: unset;
    --button-padding: 0;
    --button-radius: 0;

    --button-color: var(--text-link);
    appearance: none;
    display: inline;
    text-decoration: none;

    &:focus-visible {
        outline-color: var(--accent-primary);
        outline-offset: 1px;
        outline-style: auto;
    }
}

/*.navbar {*/
/*    overflow: hidden;*/
/*    background-color: #000;*/
/*    font-family: Arial, Helvetica, sans-serif;*/
/*}*/

/*.navbar a {*/
/*    float: left;*/
/*    font-size: 20px;*/
/*    color: #f9f45e;*/
/*    text-align: center;*/
/*    padding: 14px 16px;*/
/*    text-decoration: none;*/
/*}*/

/*.dropdown {*/
/*    float: left;*/
/*    overflow: hidden;*/
/*}*/

/*.dropdown .dropbtn {*/
/*    font-size: 20px;*/
/*    border: none;*/
/*    outline: none;*/
/*    color: #f9f45e;*/
/*    padding: 10px 20px;*/
/*    background-color: inherit;*/
/*    font-family: inherit;*/
/*    margin: 0;*/
/*}*/

/*.navbar a:hover, .dropdown:hover, .dropbtn {*/
/*    background-color: #000;*/
/*}*/

/*.dropdown-content {*/
/*    display: none;*/
/*    position: absolute;*/
/*    background-color: #f9f9f9;*/
/*    min-width: auto;*/
/*    box-shadow: 10px 5px 0px 0px rgba(0, 0, 0, 0.5);*/
/*    z-index: 1;*/
/*    overflow: auto;*/
/*}*/

/*.dropdown-content a {*/
/*    float: none;*/
/*    color: black;*/
/*    padding: 12px 16px;*/
/*    text-decoration: none;*/
/*    display: block;*/
/*    text-align: left;*/
/*}*/

/*.dropdown-content a:hover {*/
/*    background-color: #ddd;*/
/*}*/

/*.dropdown:hover .dropdown-content {*/
/*    display: block;*/
/*}*/

/*.form-comment textarea {*/
/*    margin: 10px 10px;*/
/*    border-radius: 10px;*/
/*    width: 100%;*/
/*    height: 100px;*/
/*    resize: vertical;*/

/*}*/

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    align: center;
}


.progress-1 {
    width: 120px;
    height: 20px;
    background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
    animation: p1 2s infinite linear;
}

@keyframes p1 {
    100% {
        background-size: 100%
    }
}

.progress-2 {
    width: 120px;
    height: 20px;
    border-radius: 20px;
    background: linear-gradient(orange 0 0) 0/0% no-repeat lightblue;
    animation: p2 2s infinite steps(10);
}

@keyframes p2 {
    100% {
        background-size: 110%
    }
}

.progress-3 {
    width: 120px;
    height: 20px;
    border-radius: 20px;
    background: repeating-linear-gradient(135deg, #f03355 0 10px, #ffa516 0 20px) 0/0% no-repeat,
    repeating-linear-gradient(135deg, #ddd 0 10px, #eee 0 20px) 0/100%;
    animation: p3 2s infinite;
}

@keyframes p3 {
    100% {
        background-size: 100%
    }
}

.progress-4 {
    width: 120px;
    height: 20px;
    -webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%;
    background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
    animation: p4 2s infinite steps(6);
}

@keyframes p4 {
    100% {
        background-size: 120%
    }
}

.progress-5 {
    width: 80px;
    height: 40px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    padding: 3px;
    background: repeating-linear-gradient(90deg, currentColor 0 10px, #0000 0 15px) 0/0% no-repeat content-box content-box;
    position: relative;
    animation: p4 2s infinite steps(6);
}

.progress-5::before {
    content: "";
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 100%;
    width: 10px;
    background: linear-gradient(
            #0000 calc(50% - 7px), currentColor 0 calc(50% - 5px),
            #0000 0 calc(50% + 5px), currentColor 0 calc(50% + 7px), #0000 0) left /100% 100%,
    linear-gradient(currentColor calc(50% - 5px), #0000 0 calc(50% + 5px), currentColor 0) left /2px 100%,
    linear-gradient(#0000 calc(50% - 5px), currentColor 0 calc(50% + 5px), #0000 0) right/2px 100%;
    background-repeat: no-repeat;
}

@keyframes p5 {
    100% {
        background-size: 120%
    }
}

.progress-6 {
    width: 120px;
    height: 22px;
    border-radius: 20px;
    color: #514b82;
    border: 2px solid;
    position: relative;
}

.progress-6::before {
    content: "";
    position: absolute;
    margin: 2px;
    inset: 0 100% 0 0;
    border-radius: inherit;
    background: currentColor;
    animation: p6 2s infinite;
}

@keyframes p6 {
    100% {
        inset: 0
    }
}

.progress-7 {
    width: 120px;
    height: 24px;
    -webkit-mask: radial-gradient(circle closest-side, #000 94%, #0000) 0 0/25% 100%,
    linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
    background: linear-gradient(#25b09b 0 0) 0/0% no-repeat #ddd;
    animation: p7 2s infinite linear;
}

@keyframes p7 {
    100% {
        background-size: 100%
    }
}

.progress-8 {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    -webkit-mask: linear-gradient(0deg, #000 55%, #0000 0) bottom/100% 18.18%;
    background: linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat #ddd;
    animation: p8 2s infinite steps(7);
}

@keyframes p8 {
    100% {
        background-size: 100% 115%
    }
}


.progress-9 {
    --r1: 154%;
    --r2: 68.5%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%),
    radial-gradient(var(--r1) var(--r2) at bottom, #269af2 79.5%, #0000 80%),
    radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%),
    #ccc;
    background-size: 50.5% 220%;
    background-position: -100% 0%, 0% 0%, 100% 0%;
    background-repeat: no-repeat;
    animation: p9 2s infinite linear;
}

@keyframes p9 {
    33% {
        background-position: 0% 33%, 100% 33%, 200% 33%
    }
    66% {
        background-position: -100% 66%, 0% 66%, 100% 66%
    }
    100% {
        background-position: 0% 100%, 100% 100%, 200% 100%
    }
}


.progress-10 {
    width: 120px;
    height: 60px;
    border-radius: 200px 200px 0 0;
    -webkit-mask: repeating-radial-gradient(farthest-side at bottom, #0000 0, #000 1px 12%, #0000 calc(12% + 1px) 20%);
    background: radial-gradient(farthest-side at bottom, #514b82 0 95%, #0000 0) bottom/0% 0% no-repeat #ddd;
    animation: p10 2s infinite steps(6);
}

@keyframes p10 {
    100% {
        background-size: 120% 120%
    }
}

/**
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}

**/

/*input {*/
/*    writing-mode: horizontal-tb !important;*/
/*    font-style: ;*/
/*    font-variant-ligatures: ;*/
/*    font-variant-caps: ;*/
/*    font-variant-numeric: ;*/
/*    font-variant-east-asian: ;*/
/*    font-variant-alternates: ;*/
/*    font-weight: ;*/
/*    font-stretch: ;*/
/*    font-size: ;*/
/*    font-family: ;*/
/*    font-optical-sizing: ;*/
/*    font-kerning: ;*/
/*    font-feature-settings: ;*/
/*    font-variation-settings: ;*/
/*    text-rendering: auto;*/
/*    color: fieldtext;*/
/*    letter-spacing: normal;*/
/*    word-spacing: normal;*/
/*    line-height: normal;*/
/*    text-transform: none;*/
/*    text-indent: 0px;*/
/*    text-shadow: none;*/
/*    display: inline-block;*/
/*    text-align: start;*/
/*    appearance: auto;*/
/*    -webkit-rtl-ordering: logical;*/
/*    cursor: text;*/
/*    background-color: field;*/
/*    margin: 0em;*/
/*    padding: 1px 2px;*/
/*    border-width: 2px;*/
/*    border-style: inset;*/
/*    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));*/
/*    border-image: initial;*/
/*    box-sizing: unset;*/
/*}*/