:root {
    --main-black-color: #000000;
    --menu-background-color: #FFF;
    --color-vocapia-green: #008080;
    --color-vocapia-green-rgb: 0, 128, 128;
    --color-vocapia-yellow: #d1ad36;


    --max-width-smartphone-small: 480px;
    --min-width-smartphone-medium: 481px;
    --max-width-smartphone-medium: 768px;
    --min-width-tablet: 769px;
    --max-width-tablet: 1024px;
    --min-width-notebook: 1025px;
    --max-width-notebook: 1280px;
}


html,
body {
    width:100%;
    min-height: 100%;
    height: 100%;
}
body {
    display: table;
    table-layout: fixed;
    box-sizing: border-box;
}

/* default size is 16px */
/* reset CSS to reduce browser inconsistancy (but this makes cellpadding not working anymore) */
/* { margin: 0; padding: 0; } */
/* padding : top right bottom left */

#display-type::after {
    content: "large";
    position: fixed;
    bottom: 0;
    left: 0;
    border-radius: 0 10px 0 0;
    border-top: 1px solid black;
    border-right: 1px solid black;
    font-size: 0.5em;
    padding: 0 0.5em;
    background: white;
}

/* top of above-the-fold section */
html {
    font-family: Arial, sans-serif;
    font-size: 20px;
}

ul {
    padding: 0px 0px 0px 40px;
}

body {
    margin: 0;
    padding: 90px 0 0 0;
}

.page-content-wrapper {
    /*width: 1000px;*/
    width: 1200px;
    /*width: var(--max-width-notebook);*/
    margin: auto;
    color: #000;
    font-size: 18px;
    line-height: 1.4em;
}

/* top bar with menu for all pages */
#vrlogo {
    display: block;
    position: relative;
    height: 70%;
}


#vrlogo img {
    height: 100%;
    width: auto;
    /*image-rendering: pixelated;*/
    /*transform: scale(1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;*/
}

#vrlogofoot {
    flex: 0 1 180px; /* don't grow, allow shrink, basis 246px */
    min-width: 0; /* allows image to shrink */
    padding: 10px !important;
    margin: 0 !important; /* outside border */
}

#blackbar { /* flexible container, all children are flex items */
    position: fixed;
    z-index: 999; /* always in front if overlap (level like in xfig) */
    top: 0;
    left: 0; /* top left corner of screen */
    width: 100%;
    background-color: var(--main-black-color);
    color: #FFF;
    /*line-height: 2.0;*/
    font-size: 1rem;
    height: 90px;
    display: flex; /* one dimensional layout */
    align-items: center; /* verticaly center the alignments the items of the flexible <div> */
    justify-content: center; /* glue all children in the center (use 'gap' or children 'margin' to add space) */
}

#blackbar .page-content-wrapper {
    display: flex; /* one dimensional layout */
    flex-direction: row; /* horizontal layout (left to right) */
    flex-wrap: nowrap; /* default */
    align-items: center; /* verticaly center the alignments the items of the flexible <div> */
    justify-content: left; /* glue all children in the center (use 'gap' or children 'margin' to add space) */
    padding: 0px;
    height: 100%;
    box-sizing: border-box;
}


#blackbar_height {
    height: 100px; /* 90px + padding (10px) */
}

/*#blackbar > div {
  margin: 40px;
  padding: 10px 20px 0px 20px;
}*/
#blackbar a {
    outline: 0;
    text-decoration: none;
    /*color: white;*/
}




/* banner with background image and page title */
#banner {
    position: relative;
    width: 100%;
    height: 280px;
    padding: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url(/AdobeStock_954133967.jpeg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover; /* scale img to cover area */
    color: #ffffff;
    hyphens: none;
}

#banner_title {
    text-align: center; /* html5 */
    width: 100%;
    padding: 80px 0px 10px 0px;
    font-weight: bold;
    font-size: 46px;
    color: #ffffff;
    /* text-shadow: 2px 2px #000000; */
}

#banner_title a:link {
    text-decoration: underline;
    color: var(--color-vocapia-yellow);
}

#banner_subtitle {
    width: 700px;
    padding: 20px 0px 20px 0px;
    font-size: 24px;
    font-weight: normal;
    /* text-shadow: 2px 2px #000000; */
    /* white-space: nowrap; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    /* text-overflow: clip; */
}

/* for contact and support forms */
input[type="checkbox"] {
    padding: 0px;
    margin: 3px 10px 0px 10px;
}

fieldset {
    padding: 10px 10px 10px 10px;
}

legend {
    padding: 0px 3px 0px 3px;
    background-color: var(--color-vocapia-green);
    border: 1px solid var(--color-vocapia-green);
    color: #ffffff;
}

option {
    padding: 0px 10px 0px 0px;
}

table {
    border-collapse: separate;
}

/* rule to fix quirks-mode inheritance behavior for tables */
table, caption {
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-variant: inherit;
}

#specs {
    border-collapse: collapse;
    border-color: #ff0000;
}

#specs td, #specs th {
    border: 1px solid #008080;
    padding: 5px 5px 5px 5px;
    line-height: 1.3;
}

.contact {
    font-size: 18px;
    line-height: 1.5;
    text-align: left;
}

/* for the bottom of each page (see ltail2.html) */
.footer-wrapper {
    background-color: var(--main-black-color);
}

#footsection {
    display: flex;
    flex-direction: row;
    left: 0;
    width: 100%;
    height: 150px;
    /*background-color: #000000;*/
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#footcopyright {
    display: inline;
}

#footsection a {
    outline: 0;
    text-decoration: none;
    color: white;
    padding-bottom: 1px;
    border-bottom: 1px solid #eeca61;
}

#footsection a:hover {
    outline: 0;
    text-decoration: none;
    color: white;
    padding-bottom: 1px;
    border-bottom: none;
}

#followussection {
    display: flex;
    flex-direction: row;
    justify-content: right;
    border: 0;
    margin: 0;
    padding: 0 0 0 10px;
}

#followussection a {
    outline: 0;
    text-decoration: none;
    margin: 0;
    padding: 5px;
    border: 0;
}

#followussection a:hover {
    outline: 0;
    text-decoration: none;
    margin: 0;
    padding: 5px;
    border: 0;
}

.footlogos {
    width: 40px;
}

/* link classes */
a:not([class]) {
    text-decoration: none;
    color: #d1ad36;
    /*position: relative;*/
}

/*a:not([class]):before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    bottom:1px;*/
/*    width: 0;*/
/*    height: 1px;*/
/*    background: var(--color-vocapia-yellow);*/
/*    transition: width 100ms ease-in-out;*/
/*}*/

/*a:not([class]):hover:before {*/
/*    width: 100%;*/
/*}*/


a:not([class]):link {
    text-decoration: underline;
    color: #d1ad36;
}

a:not([class]):visited {
    text-decoration: underline;
    color: #d1ad36;
}

a:not([class]):hover {
    text-decoration: none;
    color: #d1ad36;
}

a:not([class]):active {
    text-decoration: none;
    color: #d1ad36;
}


/* link classes */
/* class3: for boldtext section */
.class3 a:link {
    text-decoration: underline;
    color: #d1ad36;
}

.class3 a:visited {
    text-decoration: underline;
    color: #d1ad36;
}

.class3 a:hover {
    text-decoration: none;
    color: #d1ad36;
}

.class3 a:active {
    text-decoration: none;
    color: #d1ad36;
}

/* class4: used in news and pub pages (to be changed) */
.class4 a:link {
    text-decoration: none;
    color: #444444;
}

.class4 a:visited {
    text-decoration: none;
    color: #444444;
}

.class4 a:hover {
    text-decoration: underline;
    color: #008080;
}

.class4 a:active {
    text-decoration: none;
    color: #444444;
}

/* class6: used for invisible links on regular text */
.class6 a:link {
    text-decoration: none;
    color: #606061;
}

.class6 a:visited {
    text-decoration: none;
    color: #606060;
}

.class6 a:hover {
    text-decoration: none;
    color: #404040;
}

.class6 a:active {
    text-decoration: none;
    color: #606060;
}

p {
    padding: 0px 0px 0px 0px;
    margin: 14px 0px 14px 0px;
}


h1 { /* same as h2 */
    font-style: normal;
    font-size: 24px;
    line-height: 1.1;
    font-weight: bold;
    color: #008080; /* VR color */
    padding: 10px 0px 0px 0px;
    margin: 12px 0px 12px 0px;
    border-top: 1px solid #D4DEEA;
}

h2 { /* same as h1 */
    font-style: normal;
    font-size: 24px;
    line-height: 1.1;
    font-weight: bold;
    color: #008080; /* VR color */
    padding: 10px 0px 0px 0px;
    margin: 12px 0px 12px 0px;
    border-top: 1px solid #D4DEEA;
}

h3 {
    font-style: normal;
    font-weight: bold;
    color: black;
}

/* for news (news/index2.html) */
.firsth2 {
    border: 0;
    padding: 0;
    margin: 0 0 12px 0;
}

th {
    line-height: 1.2;
}

.smalltext {
    font-size: 20px;
    line-height: 1.5;
    color: #444444;
    font-weight: normal;
    margin: 0px 0px 0px 0px;
    text-align: left;
}

.normaltextleft {
    font-size: 20px;
    line-height: 1.4;
    color: #222222;
    font-weight: normal;
    margin: 0px 0px 0px 0px;
    text-align: left;
}

.boldtext {
    line-height: 1.4;
    color: #222222;
    font-weight: normal;
    margin: 0px 0px 0px 0px;
    text-align: justify;
}

.bolditem {
    line-height: 1.4;
    color: #222222;
    font-weight: bold;
    margin: 0px 0px 0px 0px;
    text-align: justify;
}

.imgfapp {
    width: 122px;
    float: left;
    vertical-align: text-top;
    padding: 0 10px 0 0;
}

.imgfapp2 {
    width: 244px;
    float: left;
    vertical-align: text-top;
    padding: 0px 10px 0 0;
}

.imgfapp2r {
    width: 244px;
    float: right;
    vertical-align: text-top;
    padding: 0 10px 0 10px;
}

.building {
    width: 255px;
    height: auto;
    /* float:right; */
    vertical-align: text-top;
}

.footnote {
    font-size: 14px;
    line-height: 17px;
    color: #606060;
    font-weight: normal;
    padding: 10px 0px 0px 0px;
    margin: 15px 0px 0px 0px;
    border-top: 1px solid #D4DEEA;
}

.audiospan {
    font-size: 10px;
    color: #606060;
    font-weight: normal;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

/* use in local pages */
pre { /*\*/
    overflow: auto !important; /* */
    overflow: scroll;
    width: 96%;
    padding: 10px;
    margin: 10px;
    margin-left: 0;
}

pre {
    font-size: 13px;
    color: #404040;
    background-color: #D8E8FF;
}

#li {
    width: 300px
}

.arg {
    color: #888;
}

/* saas status button */
.button2 {
    color: #000000;
    background-color: #ffffff;
    cursor: pointer;
    font-weight: bold;
    padding: 5px 10px;
    font-size: 18px;
    border-radius: 48px;
    -moz-border-radius: 48px;
    -webkit-border-radius: 48px;
    border: 1px solid #000000;
}

a.button2 {
    outline: 0;
}

a.button2:link {
    text-decoration: none;
    color: #000000;
}

a.button2:visited {
    text-decoration: none;
    color: #000000;
}

a.button2:hover {
    text-decoration: none;
    color: #ffffff;
    background-color: #000000;
}

a.button2:active {
    text-decoration: none;
    color: #ffffff;
    background-color: #000000;
}

.hp-texts .text-content {
    position: relative;
    /*padding-bottom: 1.5em;*/
}

.hp-texts .text-content .text-wrapper {
    /*line-height: 1.5em;*/
    text-align: justify;
}

.hp-texts .text-content.collapsed .text-wrapper {
    display: -webkit-box;
    -moz-line-clamp: 2;
    -webkit-line-clamp: 2;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height:calc(2*1.4em);
}

.hp-texts .text-content.collapsed .text-wrapper h2 {
    display: inline-block;
}

.hp-texts .button-container {
    position: absolute;
    /*bottom: 0;*/
    right: 0;
    background-color: white;
    z-index: 2;
    bottom:0;
    /*display: flex;*/
    /*align-items: center;*/
    /*bottom:0.18em;*/
}

/*.hp-texts .ellipsis {*/
/*    display: inline-block;*/
/*    margin-right: 4px;*/
/*    font-weight: bold;*/
/*}*/


.hp-texts .button-container .btn-more {
    background: white;
}

.hp-texts .button-container .btn-more:hover {
    opacity: 0.8;
}

.hp-texts .button-container .btn-more:before {
    content: '...';
    display: inline-block;
    opacity: 1;
    position: relative;
    background: inherit;
    width: auto;
    height: auto;
    padding: 0 0.6em;
    /*background: white;*/
    /* left: 0; */
    /* top: 0; */
    /* width: 100%; */
    /* height: 100%; */
    /* opacity: 0; */
    /*transition: opacity 100ms ease-in-out;*/
}

.hp-texts .button-container .btn-more:after {
    display: none;
    /*right: initial;*/
}

/*.text-content .text-wrapper a{*/
/*    color:var(--color-vocapia-yellow);*/
/*    text-decoration: none;*/
/*}*/

/*.text-content .text-wrapper a:visited {*/
/*    text-decoration: underline;*/
/*}*/

/*.read-more-button {*/
/*    color: #0066cc;*/
/*    cursor: pointer;*/
/*    font-weight: bold;*/
/*}*/
/**/
/*.read-more-button:hover {*/
/*    text-decoration: underline;*/
/*}*/
/**/
/*.read-more-button a:link {*/
/*    text-decoration: none;*/
/*    color: #0066cc;*/
/*}*/
/**/
/*.read-more-button a:visited {*/
/*    text-decoration: none;*/
/*    color: #0066cc;*/
/*}*/
/**/
/*.read-more-button a:hover {*/
/*    text-decoration: underline;*/
/*}*/
/**/
/*.read-more-button a:active {*/
/*    text-decoration: underline;*/
/*}*/

/*.text-content:not(.collapsed) .ellipsis {*/
/*    display: none;*/
/*}*/

/* text page */
#textpage {
    max-width: 80%;
    margin: 0 auto;
    /*font-size: 20px;*/
    font-size: 18px;
    line-height: 1.4em;
    /* add by mv to be the same as .page-content-wrapper */
    max-width: initial;
    /* width: 1000px; */
    width: 1200px;
    /* width: var(--max-width-notebook); */
    margin: auto;
    color: #000;
    font-size: 18px;
    line-height: 1.4em;
}

/* big boxes in main page */
.hp-randd-area {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 20px;
    flex-wrap: nowrap; /* to keep the horizontal mode */
}

/*.hp-randd-area h3 {*/
/*    text-align: center !important;*/
/*padding: 0.25em 0;*/
/*margin: 0;*/
/*}*/

.hp-randd-area > div {
    display: flex;
    flex-direction: column;
    /*gap: 20px;*/
    width: 100%;
    /*cursor: pointer;*/
    /*hyphens: none;*/
    color: inherit;
    /* border: 1px solid #ff0000; */
    margin: 0 0 2em 0;
}

/*.hp-randd-area > div:hover {*/
/*background-color: #f0f0f0;*/
/* transform: scale(1.05); */
/*}*/


.hp-randd-area .icon_set {
    /*display: inline-flex;*/
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /*padding: 15px 0 0 0;*/
    gap: 85px;
}

.hp-randd-area .img { /* h=15+100=115 */
    height: 100px;
    cursor: pointer;
    width: auto;
    padding: 15px 0 0 0;
}

.hp-randd-area .icon { /* h=25+80+10=115 */
    height: 80px;
    width: auto;
    /*padding: 25px 0 10px 0;*/
    margin: 0;
    transition: transform 100ms ease-in-out;
    transform: scale(1);
}

.hp-randd-area a:hover .icon {
    transform: scale(1.20);
}

/*.hp-randd-area .img:hover {*/
/*    transform: scale(1.20);*/
/*}*/

/*.hp-randd-area .more:hover {*/
/*    transform: scale(1.20);*/
/*}*/

.hp-randd-area .text {
    width: 70%;
    margin: auto;
}

/* Menu section
Parent must have "display:flex".
flex: flex-grow flex-shrink flex-basis properties
flex-grow: a number specifying how much the item will grow relative
           to the rest of the flexible items.
flex-shrink: a number specifying how much the item will shrink relative
           to the rest of the flexible items
flex-basis: the length of the item (auto, inherit, or a number followed
           by "%", "px", "em" or any other length unit.
default values are "flex: 0 1 auto;"
"flex: 1" is equivalent to "flex: 1 1 0",  make the item flexible and
sets the flex basis to 0, resulting in an item that receives the
specified proportion of the free space in the flex container. If all
items in the flex container use this pattern, their sizes will be
proportional to the specified flex factor.
*/
.nav-container { /* added width control for nav container */
    flex-grow: 1;
}

.nav-wrapper {
    padding: 0 0;
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.nav-wrapper ul {
    list-style: none;
}

.nav-menu {
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.nav-menu > li {
    display: inline-block;
    position: relative;
    margin-right: 0.9em;
}

.nav-menu li a {
    text-decoration: none;
    /*padding: 0 10px;*/
    /*line-height: 50px;*/
    display: block;
    white-space: nowrap;
}

.nav-menu > li > a {
    text-transform: uppercase;
    color: var(--color-vocapia-yellow);
    background-color: var(--main-black-color);
    padding: 0.5em 1em;
    transition-property: color, background;
    /* transition-duration: 150ms; */
    transition-timing-function: ease;
}

.has-submenu {
    position: relative;
}

.nav-menu > li.has-submenu > a {
    cursor: default;
    color: #fff;
}

.submenu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%; /* align with bottom of parent */
    left: 0; /* align with left of parent */
    /*background-color: #eee;*/
    background: var(--menu-background-color);
    color: #000;
    min-width: 120%;
    padding: 0.25em 0;
    box-sizing: border-box;
}


.logo-usage {

}

@media (min-width: 1025px) {
    /* do this if display is less than 1025px wide */
    .nav-menu li:hover .submenu {
        visibility: visible;
        opacity: 1;
        color: var(--main-black-color);
        box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25);
        z-index: 1;
    }

    .nav-menu > li:hover > a {
        background: var(--menu-background-color);
        color: var(--main-black-color);
        z-index: 10;
        position: relative;
    }
}


/*.nav-menu li:hover .submenu,*/
/*.nav-menu li a:focus + .submenu {*/
/*    visibility: visible;*/
/*    opacity: 1;*/
/*}*/

.submenu li {
    display: block;
    margin: 0;
}

.nav-menu .submenu li a {
    padding: 0.25em 1em;
    line-height: 1.5;
    color: inherit;
    /*color: var(--main-black-color);*/
}

.nav-menu .submenu li a:hover {
    /*color: var(--color-vocapia-green); */
    /*background-color: #ddd;*/
    color: var(--color-vocapia-yellow);
}

.menu-button {
    display: none;
}

.menu-backdrop {
    display: none;
}


.banner-top {
    position: relative;
    width: 100%;
    height: auto;
    /*display: block;*/
    /*white-space: nowrap;*/
    font-size: 1rem;
    display: flex;
    overflow: hidden;
    min-height: 300px;
}

.banner-top.text-shadow {
    text-shadow: 1px 1px 2px black, -1px 1px 2px black, 1px -1px 2px black, -1px -1px 2px black;
}

.banner-element {
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    /*padding: 50px 0 50px 0;*/
    padding: 50px 0 50px 0;

    justify-content: space-evenly;

    flex: 1 0 auto;
    gap: 1em;
}

.banner-top .background {
    position: absolute;
    /*z-index: 1;*/
    width: 102%;
    top: 50%;
    left: 50%;
    height: auto;
    /*width: auto;*/
    /*height: 100%;*/
    transform: translate(-51%, -50%);
    /*object-fit: cover;*/
    z-index: -1;
    filter: brightness(0.75);

    min-width: 102%;
    min-height: 100%;
    /*scale: 1;*/
    object-fit: cover; /* Empêche la déformation */
    object-position: center; /* Centre l'image */
}

.banner-element > div {
    position: relative;
    z-index: 2;
    color: #ffffff;
    box-sizing: border-box;
    white-space: pre-wrap;
}


.banner-element .banner-title {
    /*text-align: center; !* html5 *!*/
    font-weight: bold;
    font-size: 2.3em;
    /*padding: 0 10% 1em 10%;*/
    padding: 0 10% 0 10%;

}

.banner-element .banner-subtitles {
    width: 100%;
    display: flex;
    font-size: 1.2em;
}

.banner-element .banner-subtitle {
    width: 100%;
    padding: 0 20% 0 20%;
    flex: 1 0 auto;
    box-sizing: border-box;
}

.banner-element .banner-subtitle a {
    text-decoration: none;
    color: var(--color-vocapia-yellow);
}


body .btn-block {
    display: inline-block;
    text-decoration: none !important;;
    padding: 0.5em;
    color: var(--color-vocapia-green) !important;
    background: #FFF !important;;
    border: 2px solid var(--color-vocapia-green) !important;;
    text-align: center;
    position: relative;
    transition: all .35s;

    user-select: none;
    line-height: 1em;
    font-size: 1em;
}

body .btn-block span {
    position: relative;
    z-index: 2;
}

body .btn-block:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--color-vocapia-green);
    transition: all .35s;
}

body .btn-block:hover {
    color: #fff !important;;
}

body .btn-block:hover:after {
    width: 100%;
}


body .btn-more {
    color: var(--color-vocapia-yellow) !important;
    text-decoration: none;
    position: relative;
    display: inline-block;
    text-decoration: none !important;
    /*line-height: 1.3;*/
}

body .btn-more:before {
    content: '';
    display: block;
    position: absolute;
    background: white;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 100ms ease-in-out;

}

body .btn-more:hover:before {
    opacity: 0.2;
}

body .btn-more:after {
    content: '>';
    font-weight: bold;
    font-family: monospace;
    font-size: 1em;
    line-height: 1em;
    color: white;
    background: var(--color-vocapia-yellow);
    border-radius: 100%;
    padding: 0 0.2em;
    display: inline-block;
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 100%;*/
    transform: scale(0);
    margin-left: 0.25em;
    opacity: 0;
    transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;
}

body .btn-more:hover:after {
    opacity: 0.8;
    transform: scaleY(1) scaleX(1.137);
}

body .btn-more.btn-more-down:after {
    transform: scaleY(1) scaleX(1) rotate(90deg);
}

body .btn-more.btn-more-up:after {
    transform: scaleX(1) scaleX(1) rotate(-90deg);
}

body .btn-more.btn-arrow-left:after {
    left: initial;
    right: 100%;
    margin-right: 0.25em;
    margin-left: 0;
}


/*region index*/
.page-content-wrapper h3 {
    color: var(--color-vocapia-green);
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    margin:0.75em 0;
}

.hp-vocapia-technology {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: auto;
}


/*.hp-vocapia-technology h3 {*/
/*    color: var(--color-vocapia-green);*/
/*    font-size: 1.5em;*/
/*    font-weight: bold;*/
/*    text-align: left;*/
/*}*/

.hp-vocapia-technology .img-wrapper {
    display: flex;
    box-sizing: border-box;
    height: auto;
    overflow: hidden;
    width: 45%;
    position: relative;
    flex-shrink: 0;
    justify-content: flex-end;
    padding-bottom: 2em;
}


.hp-vocapia-technology .img-wrapper span {
    display: flex;
    justify-content: center;
    flex-direction: column;
}


.hp-vocapia-technology .img-wrapper span svg {
    width: auto;
    position: relative;
    top: 0;
    max-width: 100%;
    height: auto;
    max-height: 100px;
}

.hp-vocapia-technology svg path {
    position: relative;
    transform-origin: 50% 50%;
}

/*.hp-vocapia-technology svg g rect {*/
/*    transform-origin: 66.6% 50%;*/
/*    transform: scale(0);*/
/*}*/

/*.hp-vocapia-technology svg g + text {*/
/*    opacity: 0;*/
/*}*/
/**/
/*.hp-vocapia-technology svg g + text {*/
/*    animation: opacity-1 125ms 1 ease-in-out;*/
/*    animation-iteration-count: 1;*/
/*    animation-delay: 1150ms;;*/
/*    animation-fill-mode: forwards;*/
/*}*/

.hp-vocapia-technology svg path:nth-child(n+1) {
    animation: distortion-vertical 1.5s infinite ease-in-out;
}

/*.hp-vocapia-technology svg g rect {*/
/*    animation: bumped-apparition 1s 1 ease-in-out;*/
/*    animation-iteration-count: 1;*/
/*    animation-delay: 650ms;*/
/*    animation-fill-mode: forwards;*/
/*}*/

/*@keyframes bumped-apparition {*/
/*    0% {*/
/*        transform: scaleX(0) scaleY(0);*/
/*    }*/
/*    50% {*/
/*        transform: scaleX(1) scaleY(1.2);*/
/*    }*/
/*    60% {*/
/*        transform: scaleX(1) scaleY(1.0);*/
/*    }*/
/*    70% {*/
/*        transform: scaleX(1) scaleY(1.1);*/
/*    }*/
/*    80% {*/
/*        transform: scaleX(1) scaleY(1.0);*/
/*    }*/
/*    90% {*/
/*        transform: scaleX(1) scaleY(1.05);*/
/*    }*/
/*    100% {*/
/*        transform: scaleX(1) scaleY(1);*/
/*    }*/
/*}*/

/*@formatter:off*/
.hp-vocapia-technology svg path:nth-child(1) { animation-delay: 0ms;}
.hp-vocapia-technology svg path:nth-child(2) { animation-delay: 25ms;}
.hp-vocapia-technology svg path:nth-child(3) { animation-delay: 50ms;}
.hp-vocapia-technology svg path:nth-child(4) { animation-delay: 100ms;}
.hp-vocapia-technology svg path:nth-child(5) { animation-delay: 150ms;}
.hp-vocapia-technology svg path:nth-child(6) { animation-delay: 175ms;}
.hp-vocapia-technology svg path:nth-child(7) { animation-delay: 200ms;}
.hp-vocapia-technology svg path:nth-child(8) { animation-delay: 225ms;}
.hp-vocapia-technology svg path:nth-child(9) { animation-delay: 250ms;}
.hp-vocapia-technology svg path:nth-child(10) { animation-delay: 275ms;}
.hp-vocapia-technology svg path:nth-child(11) { animation-delay: 300ms;}
.hp-vocapia-technology svg path:nth-child(12) { animation-delay: 325ms;}
.hp-vocapia-technology svg path:nth-child(13) { animation-delay: 350ms;}
.hp-vocapia-technology svg path:nth-child(14) { animation-delay: 375ms;}
.hp-vocapia-technology svg path:nth-child(15) { animation-delay: 400ms;}
.hp-vocapia-technology svg path:nth-child(16) { animation-delay: 425ms;}
.hp-vocapia-technology svg path:nth-child(17) { animation-delay: 450ms;}
.hp-vocapia-technology svg path:nth-child(18) { animation-delay: 475ms;}
.hp-vocapia-technology svg path:nth-child(19) { animation-delay: 500ms;}
.hp-vocapia-technology svg path:nth-child(20) { animation-delay: 525ms;}
.hp-vocapia-technology svg path:nth-child(21) { animation-delay: 550ms;}
.hp-vocapia-technology svg path:nth-child(22) { animation-delay: 575ms;}
.hp-vocapia-technology svg path:nth-child(23) { animation-delay: 600ms;}
.hp-vocapia-technology svg path:nth-child(24) { animation-delay: 625ms;}


.hp-vocapia-technology svg path:nth-child(1) { animation-name: distortion-vertical-small;}
.hp-vocapia-technology svg path:nth-child(2) { animation-name: distortion-vertical-small;}
.hp-vocapia-technology svg path:nth-child(3) { animation-name: distortion-vertical-medium;}
.hp-vocapia-technology svg path:nth-child(4) { animation-name: distortion-vertical-medium;}
.hp-vocapia-technology svg path:nth-child(5) { animation-name: distortion-vertical-big;}
.hp-vocapia-technology svg path:nth-child(6) { animation-name: distortion-vertical-big;}
.hp-vocapia-technology svg path:nth-child(7) { animation-name: distortion-vertical-big;}
.hp-vocapia-technology svg path:nth-child(8) { animation-name: distortion-vertical-big-reduce;}
.hp-vocapia-technology svg path:nth-child(9) { animation-name: distortion-vertical-big;}
.hp-vocapia-technology svg path:nth-child(10) { animation-name: distortion-vertical-big;}
.hp-vocapia-technology svg path:nth-child(11) { animation-name: distortion-vertical-big;}
.hp-vocapia-technology svg path:nth-child(12) { animation-name: distortion-vertical-big;}
.hp-vocapia-technology svg path:nth-child(13) { animation-name: distortion-vertical-medium;}
.hp-vocapia-technology svg path:nth-child(14) { animation-name: distortion-vertical-medium;}
.hp-vocapia-technology svg path:nth-child(15) { animation-name: distortion-vertical-small;}
.hp-vocapia-technology svg path:nth-child(16) { animation-name: distortion-vertical-small;}
.hp-vocapia-technology svg path:nth-child(17) { animation-name: distortion-vertical-medium;}
.hp-vocapia-technology svg path:nth-child(18) { animation-name: distortion-vertical-medium;}
.hp-vocapia-technology svg path:nth-child(19) { animation-name: distortion-vertical-medium;}
.hp-vocapia-technology svg path:nth-child(20) { animation-name: distortion-vertical-medium;}
.hp-vocapia-technology svg path:nth-child(21) { animation-name: distortion-vertical-small;}
.hp-vocapia-technology svg path:nth-child(22) { animation-name: distortion-vertical-small;}
.hp-vocapia-technology svg path:nth-child(23) { animation-name: distortion-vertical-small;}
.hp-vocapia-technology svg path:nth-child(24) { animation-name: distortion-vertical-small;}
/*@formatter:on*/
@keyframes distortion-vertical {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1.3);
    }
    100% {
        transform: scaleY(1);
    }
}


@keyframes distortion-vertical-big {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1.3);
    }
    100% {
        transform: scaleY(1);
    }
}

@keyframes distortion-vertical-big-reduce {
    0% {
        transform: scaleY(0.8);
    }
    50% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(0.8);
    }
}


@keyframes distortion-vertical-medium {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1.6);
    }
    100% {
        transform: scaleY(1);
    }
}

@keyframes distortion-vertical-small {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(2);
    }
    100% {
        transform: scaleY(1);
    }
}

.hp-vocapia-technology .title-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.hp-vocapia-technology .description {
    display: flex;
    /*padding-left: 2em;*/
    flex-direction: row;
    justify-content: center;
    /*width:60%*/
}

.hp-vocapia-technology .description .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 6em 0 2em;
}

.hp-vocapia-technology .description .text span {
    padding-bottom: 2em;
    position: relative;
}

.hp-separator {
    display: block;
    margin: 3em auto;
    background: var(--color-vocapia-green);
    height: 1px;
    border: none;
    width: 90%;
}


.request-form-button_wrapper {
    text-align: center;
    margin: 2em;
}

.hp-services-box {

}


/*.hp-services-box h3 {*/
/*    color: var(--color-vocapia-green);*/
/*    font-size: 1.5em;*/
/*    font-weight: bold;*/
/*    text-align: center;*/
/*}*/

.hp-services-box .list {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    justify-content: center;
}

.hp-services-box .list .service {
    /*flex: 1;*/
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    text-align: center;
    width: 170px;
}

.hp-services-box .list .service[data-service="gui"] span {
    transform: scale(0.9) translateY(5%);
}

.hp-services-box .list .service .img-wrapper {
    display: block;
    box-sizing: border-box;
    height: 0;
    overflow: hidden;
    padding-top: 50%;
    width: 100%;
    /*background: red;*/
    position: relative;
    margin-bottom: 0.5em;

}

.hp-services-box .list .service .img-wrapper span {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.hp-services-box .list .service .img-wrapper span svg {
    /*overflow: visible;*/
    max-height: 100%;
    width: auto;
    position: relative;
    top: 0;
    max-width: 100%;
    height: auto;
}


.hp-services-box .list .service:hover {
    color: var(--color-vocapia-yellow);
}

.hp-services-box .list .service .description {
    color: inherit;
    width: 80%;
    margin: auto;
}


.hp-services-box .list .service[data-service="on-premise"] svg .green-light,
.hp-services-box .list .service[data-service="on-premise"] svg #light-1,
.hp-services-box .list .service[data-service="on-premise"] svg #light-2 {
    opacity: 0;
}

.hp-services-box .list .service[data-service="on-premise"]:hover svg .green-light {
    opacity: 1;
}

.hp-services-box .list .service[data-service="on-premise"]:hover svg #light-1 {
    animation: blink-1 1s infinite alternate;
}

.hp-services-box .list .service[data-service="on-premise"]:hover svg #light-2 {
    animation: blink-2 1.5s infinite alternate;
}

@keyframes blink-1 {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    40% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes blink-2 {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    65% {
        opacity: 1;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


.hp-services-box .list .service[data-service="rest-api"]:hover svg g {
    position: relative;
    transform-origin: 70.8% 21%;
}

.hp-services-box .list .service[data-service="rest-api"]:hover svg g:nth-child(4) {
    animation: rotate-360 1s infinite alternate; /* 3= 1er*/
}

@keyframes rotate-360 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.hp-services-box .list .service[data-service="gui"]:hover svg text {
    position: relative;
    transform-origin: 50% 50%
}

.hp-services-box .list .service[data-service="gui"]:hover svg text:nth-child(n+5) {
    opacity: 0;
    animation: opacity-1 500ms infinite linear; /* 3= 1er*/
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: steps(1);

}

.hp-services-box .list .service[data-service="gui"]:hover svg text:nth-child(6) {
    animation-delay: 500ms;
}

.hp-services-box .list .service[data-service="gui"]:hover svg text:nth-child(7) {
    animation-delay: 1000ms;
}

@keyframes opacity-1 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


.hp-services-box .list .service[data-service="customization"] svg path#target {
    position: relative;
    transform-origin: 50% 50%;
}

.hp-services-box .list .service[data-service="customization"]:hover svg path#target {
    animation: zoom-bounce 500ms infinite linear;
    animation-iteration-count: 1;
}

@keyframes rotate-zoom {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(0.9) rotate(90deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

@keyframes zoom-bounce {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1);
    }

    75% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}


.hp-services-box .list .service[data-service="support"] svg path#phone {
    position: relative;
    transform-origin: 50% 50%;
}

.hp-services-box .list .service[data-service="support"]:hover svg path#phone {
    animation-iteration-count: 1;
    animation: vibrating 500ms infinite linear;
}

@keyframes vibrating {
    0% {
        transform: translateX(0); /* Position initiale */
    }
    25% {
        transform: translateX(2%); /* Bascule à gauche */
    }
    50% {
        transform: translateX(0%); /* Bascule à droite */
    }
    75% {
        transform: translateX(2%); /* Retourne à gauche */
    }
    100% {
        transform: translateX(0); /* Revient au point de départ */
    }
}

/*.hp-vocapia-usecases h3 {*/
/*    color: var(--color-vocapia-green);*/
/*    font-size: 1.5em;*/
/*    font-weight: bold;*/
/*    text-align: center;*/
/*}*/

.hp-vocapia-usecases {
    margin-bottom:3em;
}


.hp-vocapia-usecases .usescases-slider {
    /*width: 100%;*/
    /* height: 300px; */
    height: 350px;
    display: flex;
    /*flex-direction: row;*/
    flex-direction: column;
}

.hp-vocapia-usecases .description-list {
    position: relative;
    /*width: 27%;*/
    /*width: 55%;*/
    background: #f1f1f1;
    z-index: 1;
}

.hp-vocapia-usecases .image-list {
    height: 100%;
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    position: relative;
    /*margin-top: 2em;*/
    /*margin-bottom: -2em;*/
    /*margin-left: -5em;*/
}

.hp-vocapia-usecases .image-list > .btn-block {
    position: absolute;
    right: 1em;
    bottom: 1em;
    z-index: 2;
}

.hp-vocapia-usecases .image-list .image-wrapper {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    flex: 1 0 auto;
}

.hp-vocapia-usecases .image-list img {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    object-position: center;
}

.hp-vocapia-usecases .description-list .descriptions-wrapper {
    /*position: absolute;*/
    position: relative;
    /*top: 0;*/
    /*left: 0;*/
    /*width: 100%;*/
    /*height: 100%;*/
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

.hp-vocapia-usecases .description-list .description {
    box-sizing: border-box;
    padding: 1em;

    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}


.hp-vocapia-usecases .description-list .description .title {
    font-size: 1.2em;
    font-weight: bold;
    padding-bottom: 1em;
}

.hp-vocapia-usecases .description-list .description .text {
    font-size: 1em;
    flex-grow: 1;
    /*position: relative;*/
}

.hp-vocapia-usecases .description-list .description .btn-block {
    position: absolute;
    white-space: nowrap;
    /*bottom: 0;*/
    /*left: 50%;*/
    /*transform: translateX(-50%);*/
    top:1em;
    right:1em;
}

.hp-vocapia-usecases .description-list .arrows-area {
    position: absolute;
    white-space: nowrap;
    top: 100%;
    left: 0;
    display: flex;
    flex-direction: row;
    /*margin-top:0.2em;*/
    /*padding: 0.2em 0.1em;*/
    padding: 0.4em 0.1em;
}

.hp-vocapia-usecases .description-list .arrows-area .btn-block {
    padding: 0.25em;
    margin: 0 0.2em;
    width: 1em;
    height: 1em;
    display: flex;
    justify-content: center;
    align-content: center;
    font-weight: bold;
    cursor: pointer;
    line-height: 1.1em;
}

.hp-vocapia-usecases .description-list .arrows-area .btn-block span {
    transform: scaleY(1.4);
    transform-origin: 50% 56%;
}

.hp-vocapia-usecases .description-list .arrows-area .btn-block[data-enabled="false"] {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
}


.hp-vocapia-usecases .progress-bar-wrapper {
    position: absolute;
    z-index: 3;
    left: 0;
    height: 5px;
    right: 0;
    width: 100%;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    transform-origin: 50% 50%;
}

.hp-vocapia-usecases .usescases-slider[data-direction="-1"] .progress-bar-wrapper{
    transform:rotate(180deg);
}

.hp-vocapia-usecases .progress-bar-wrapper > div {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--main-black-color);
    background: var(--color-vocapia-yellow);
    /*background: black;*/
    /*transition: width 8s linear;*/
}

.hp-vocapia-usecases .progress-bar-wrapper.active > div {
    width: 0;
    animation: reduce_to_zero 8s 1 linear; /* 3= 1er*/
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes reduce_to_zero {
    0% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}


.hp-texts .text-content.collapsed .btn-more-down {
    display: inline-block;
}

.hp-texts .text-content.collapsed .btn-more-up {
    display: none;
}

.hp-texts .text-content:not(.collapsed) .btn-more-up {
    display: inline-block;
}

.hp-texts .text-content:not(.collapsed) .btn-more-down {
    display: none;
}

/*endregion*/

/*region video*/

#videoModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

#videoModal .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 2em;
    border: 1px solid #888;
    width: 70%;
    text-align: center;
    position: relative;
}

#videoModal .close {
    color: #FFF;
    float: right;
    font-size: 2em;
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 10px;
    cursor: pointer;
    color: #000;
}

#videoModal .close:hover,
#videoModal .close:focus {
    transform:scale(1.2);
}

#videoPlayer iframe {
    width: 100%;
    height: 400px;
}

/* JLG (NE PAS ENVELER CE CSS) */

/* big boxes in main page */
.bigbox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 20px;
    flex-wrap: nowrap; /* to keep the horizontal mode */
}

.bigbox > div {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    height: 370px;
    width: 500px;
    cursor: pointer;
    hyphens: none;
    color: black;
    /* border: 1px solid #ff0000; */
    margin: 40px 0 0 0;
}

.bigbox > div:hover {
    background-color: #f0f0f0;
    /* transform: scale(1.05); */
}

.bigbox .title {
    color: #008080;
    font-size: 30px;
    font-weight: bold;
}

.bigbox .text {
    font-size: 20px;
    font-weight: normal;
}

.bigbox .icon_set {
    display:inline-flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    padding:15px 0 0 0;
    gap:15px;
}

.bigbox .img { /* h=15+100=115 */
    height: 100px;
    cursor: pointer;
    width: auto;
    padding: 15px 0 0 0;
}

.bigbox .icon { /* h=25+80+10=115 */
    height: 80px;
    width: auto;
    padding: 25px 0 10px 0;
    margin: 0;
}

.bigbox .icon:hover {
    transform: scale(1.20);
}
.bigbox .img:hover {
    transform: scale(1.20);
}
.bigbox .more:hover {
    transform: scale(1.20);
}

.text-content {
    position: relative;
    /*line-height: 1.5;*/
}

.text-content.collapsed .text-wrapper {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.button-container {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: white;
    z-index: 2;
    display: flex;
    align-items: center;
}

.ellipsis {
    display: inline-block;
    margin-right: 4px;
    font-weight: bold;
}

.text-wrapper {
    text-align: justify;
}

.read-more-button {
    color: #0066cc;
    cursor: pointer;
    font-weight: bold;
}

.read-more-button:hover {
    text-decoration: underline;
}

.read-more-button a:link {
    text-decoration: none;
    color: #0066cc;
}

.read-more-button a:visited {
    text-decoration: none;
    color: #0066cc;
}

.read-more-button a:hover {
    text-decoration: underline;
}

.read-more-button a:active {
    text-decoration: underline;
}

.text-content:not(.collapsed) .ellipsis {
    display: none;
}

#telco_videos {
    display:flex;
    flex-direction:row;
    align-items: center;
    justify-content:center;
    gap:50px;
}

.d-flex {
    display: flex;
}

.flex-direction-row {
    flex-direction: row;
}
.w-50pc {
    width: 50%;
}

.pr-1 {
    padding-right:1em;
}
.pl-1 {
    padding-left:1em;
}

/* for REST service status */
#wsgraph {
   display: block;
   width: 400px;
   padding: 0px;
   margin: 0;
}
#specs tr td {
   font-size:90%;
}



.sample-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    /*margin:0.5em 0;*/
}


.sample-row:nth-child(even) {
    background: #FFF;
    background: rgba(var(--color-vocapia-green-rgb), 0.15);
}

.sample-row:nth-child(odd) {
    background: rgba(var(--color-vocapia-green-rgb), 0.05);
}

.sample-row > div {
    flex: 1 1 auto;
    box-sizing: border-box;
    padding: 0 0.5em 0.5em 0.5em;
}

.sample-row audio {
    width: 100%;
}

.sample-row:not(.first-sample-row) > div {
    padding-top: 0.5em;
}


.sample-row > div:nth-child(1) {
    width: 25%;
}

.sample-row > div:nth-child(2) {
    width: 75%;
}

.first-sample-row {
    border-radius: 0.25em 0.25em 0 0;
}

.sample-row > div:before,
.sample-row > div:after {
    background: var(--color-vocapia-green);
    color: white;
    padding: 0.25em 0.5em;
    margin-left: -0.5em;
    margin-right: -0.5em;
    margin-bottom: 0.5em;
}

.sample-row td {
    justify-content: left;
}

/*.first-sample-row > div:first-child {*/
/*border-right: 1px solid white;*/
/*}*/

.sample-row > div:first-child {
    border-right: 1px solid var(--color-vocapia-green);
    /*margin-right: 1px;*/
}

.first-sample-row > div:first-child:before {
    content: 'Audio source';
    display: block;
    border-radius: 0.25em 0 0 0;
    border-right: 1px solid white;

}

.first-sample-row > div:last-child:before {
    content: 'Automatic transcript (i.e. not 100% correct)';
    display: block;
    border-radius: 0 0.25em 0 0;
}

.sample-row .transcription {
    direction: ltr;
    text-align: left;

    background: white;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1) inset;
    border-radius: 0.25em;
    padding: 0.25em;
}

.sample-row .transcription.rtl {
    direction: rtl;
    text-align: right;
}

.sample-row .transcription .word.current {
    color: var(--color-vocapia-green);
    text-decoration: underline;
}