:root {
    --surface: #e2e2e2;
    --big-shape: 8px;
    --primary: white;
    --secondary: rgb(28, 28, 28);
    --active-primary: #969696;
    --active-surface: #cecece;
    --positive: #96d1e5;
    --positive-active: #2fc5f8;
    --negative: #ff6161;
    --negative-active: #d03030;
}

body,
html {
    margin: 0;
    padding: 0;
}

* {
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: rgb(220, 220, 220);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

[id^='title_panel_prres'] {display: none}

iframe[role='frame'] {width: 100%; height: 100%}

.actionLF, .actionRT {justify-content: flex-start !important}
.actionRT {margin-left: 7%}

#answers-column, #questions-column, #zone-questions-column {
    display: flex;
    flex-direction: column;
}

#answers-column, #questions-column {gap: 10px}
#zone-questions-column > .aq-block {gap: 200px}

.aq-block {
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    overflow: hidden;
}

#questions-column > .aq-block, #answers-column > .aq-block {
    height: 46px;
    width: 300px;
    box-shadow: 0px 1px 10px #00000025;
    border: 1px #00000036 solid;
}

#zone-questions-column > .aq-block {
    background: #dcdcdc;
    height: 70px;
    width: 300px;
    border: 1px black dashed;
}

.aq-block > span {
    font-family: Roboto;
}

.answer {
    position: absolute;
    border-radius: 6px 30px 30px 6px;
    background-color: #ffffff;
    border-left: 4px #6B71C7 solid !important;
    cursor: move;
}

/*
div[connected-to^='question-'] {
    background-color: red;
}

*/

.question {
    position: absolute;
    border-radius: 6px;
    background-color: #ffffff;
}

#dropDownList, .singleDownList {padding: 8px}
input[type=number].sequence {
    width: 35px
}

ul.nonumList, object[type*='application/pdf'] {position: absolute}
ul.nonumList>li {position: static}

ul.nonumList {padding-left: 0}
ul.nonumList>li {align-content: flex-start}
ul.nonumList>li>.postnum {line-height: 1.4}

#dropDownList, .singleDownList, input[type=text], input[type=number], textarea {

    border-color: #6B71C7 !important;
    border-radius: 9px;
}

#dropDownList, .singleDownList, #dropDownList > option, .singleDownList > option, .seqvalue, input[type=number], input[type=text], input[type=date], input[type=time], textarea {
    font-size: 22px;
    font-family: Roboto;
}

input[id^='inpel'] {height: 18px}
datalist > option {padding: 0}
input[type="range"] {width: 200px; margin: 0}
textarea {resize: none}
ul.nonumList, div > p:first-child, div[id*='galimg'] > h2 {margin-block-start: 0; margin-block-end: 0}
div > p > font:first-child, img[id*='img_panelacc'] {display: none !important}
div > p.rchtxt > font:first-child {display: inline-block !important}
.dialog-feedback-right {background: #2ecc71}
.dialog-feedback-wrong {background: #db5a4b}
.dialog-feedback-haventanswered {background: #808588}
.dialog-feedback-haventanswered > svg, .dialog-feedback-right > svg, .dialog-feedback-wrong > svg {width: 20px; height: 20px}

.dialog-feedback-right > div, .dialog-feedback-wrong > div, .dialog-feedback-haventanswered > div {  
    font-size: 18px;
    color: #000000;
    background: #ffffff;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 9px;
    border-radius: 0 0 5px 5px;
    border: 1px solid #f2f2f2; 
    position: absolute;
    width: 100%;
    bottom: 0;
}

.dialog-feedback-wrong, .dialog-feedback-right, .dialog-feedback-haventanswered {
    
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
    z-index: 100;
    padding-top: 12px;
    padding-bottom: 20px;
    font-family: Roboto;
    border-radius: 5px;
    position: absolute;
    left 30%;
    top:48%;
    width: 30%;
    color: #ffffff;
    height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    animation: slideUp ease 1s;
    -webkit-animation: slideUp ease 1s;
    -moz-animation: slideUp ease 1s;
    -o-animation: slideUp ease 1s;
    -ms-animation: slideUp ease 1s;
}

div[data-name='answer']:hover {background: #cecece}
div[data-name='answer'], .flip-card-container, input, button, .tabs>label, #galnext, #galprev, img[id*="img_panel1mark1"], .slide, .show-menu-button, .action, select {cursor: pointer}

div[data-name*='person_replica'], div[data-name='answer'] {
    color: #000000;
    background: #ffffff;
    border-radius: 10px;
    position: relative;
}

div[data-name='answer'] {padding-top: 5px; padding-left: 5px;}
div[data-name*='person_replica'] {padding-top: 20px; padding-left: 20px;}

div[data-name='person_replica_right']::after {
    display: block; width: 0; content: "";
    border: 15px solid transparent;   
    border-right-color: #ffffff;
    border-left: 0;
    position: absolute;
    left: -15px; top: calc(50% - 15px);
}


div[data-name='person_replica_left']::after, div[data-name='person_replica']::after {
    display: block; width: 0; content: "";
    border: 15px solid transparent;   
    border-left-color: #ffffff;
    border-right: 0;
    position: absolute;
    right: -15px; top: calc(50% - 15px);
}


[data-name='accordion'] > ul > li > p {
  color: rgba(48, 69, 92, 0.8);
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  max-height: 800px;
  opacity: 1;
  transform: translate(0, 0);
  margin-top: 14px;
  z-index: 2;
}

[data-name='accordion'] > ul li {
  animation: flipdown 0.5s ease both;    
}

[data-name='accordion'] > ul > li > h2 {
    
  margin-block-start: 0;
  margin-block-end: 0;    
}

[data-name='accordion'] > ul {
  position: relative;     
  list-style: none;
  padding: 10px;
  padding-bottom: 0 !important;  
  margin: 0; 
  background: #ffffff;    
  border: 1px solid #6b71c7;
  border-radius: 10px;    
}
[data-name='accordion'] > ul li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
}

[data-name='accordion'] > ul li:nth-of-type(1) {
  animation-delay: 0.5s;
}
[data-name='accordion'] > ul li:nth-of-type(2) {
  animation-delay: 0.75s;
}
[data-name='accordion'] > ul li:nth-of-type(3) {
  animation-delay: 1s;
}
[data-name='accordion'] > ul li:last-of-type {
  padding-bottom: 0;
}

[data-name='accordion'] > ul li i {
  font: normal normal 530 35px Arial;    
  position: absolute;
  margin-top: -7px;
  right: 18px;
}

[data-name='accordion'] > ul li i:before, [data-name='accordion'] > ul li i:after {
  content: "-";
  position: absolute;
  color: #3498db;
  width: 3px;
  height: 9px;
}

[data-name='accordion'] > ul li input[type=checkbox] {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
    
[data-name='accordion'] > ul li input[type=checkbox]:checked ~ p {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}

[data-name='accordion'] > ul li input[type=checkbox]:checked ~ i:before {content: ""}
[data-name='accordion'] > ul li input[type=checkbox]:checked ~ i:after {content: "+"}

[data-name='accordion'] > ul > li > p.pic_text > img, [data-name='accordion'] > ul > li > p.text_pic > img {
  height: 50%;
  width: 50%;     
  padding: 10px; 
} 

[data-name='accordion'] > ul > li > p.pic_text > img {float: left}
[data-name='accordion'] > ul > li > p.text_pic > img {float: right}

ol {
	list-style-type: none; 
	counter-reset: num;
	margin: 0 0 0 45px;
	padding: 15px 0 5px 0;
	font-size: 16px;
}
ol li {
	position: relative;	
	margin: 0 0 0 0;
	padding: 0 0 10px 0;
	line-height: 1.4;
}
ol li:before {
	content: counter(num); 
	counter-increment: num;
	display: inline-block;
	position: absolute;
	top: 4px;
	left: 5px;
	width: 28px;
	height: 28px;
	color: #000;
	text-align: center;
	line-height: 28px;
	font-size: 18px;
    font-weight: 700;
	border-radius: 50%;
	border: 2px solid #00b2e0;
    color: white;
}

.linum {
  background: #00b2e0;
  color: #fff;
  border-radius: 50%; 
  margin-right: 20px;   
  line-height: 40px;    
}

.linonum, .linum {    
  font-size: 22px;
  font-weight: 600;      
  width: 40px;
  height: 40px;
  text-align: center;    
  float: left;    
}

.linonum {
  color: #00b2e0;
  vertical-align: baseline;    
  padding-top: 3px;    
}

ul>li>.postnum {
  padding-top: 5px;
}

.nonumList>li>.postnum {
  padding-left: 40px;   
}

.numList>li>.postnum {
  padding-left: 80px;    
}

.card {
  perspective: 1000px;   
  position: absolute;  
  padding: 10px;    
  padding-bottom: 40px;    
}

.front > img, .back > img {
    padding: 10px;
}

.front > div.update {
    z-index: 100;
    bottom: 10px;
    right: 8px;  
    position: absolute;
}

.back > img {
    top: 0% !important;
    left: 0% !important;
    width: 100%;
    height: 100%;
}
    
.flip-card-container {
  height:100%;
  width: 100%;
  border: grey solid 2px;
  position: absolute;
  transform-style: preserve-3d;    
  transition: transform 0.8s; 
  border-top: #00b2e0 solid 4px;    
}

.front {
  background-color: #ffffff;
}

.back {
  background-color: #fafafa;  
  text-align: center;      
}

.front, .back{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;  
  font-size: 20px;   
  color: #000000;    
  position: absolute; 
  backface-visibility: hidden;    
} 
    
.flip-card, .back {
  transform: rotateY(180deg);
}    

input.ed, input.edn, input.ed:focus, input.edn:focus {
    font: normal normal normal 16px Roboto;
}

.tabs {width: 100%; background-color: #F8F8F8; padding: 0; margin: 0 auto;}
.tabs>input { display: none; }
.tabs>div {
    display: none;
    padding: 12px;
    border: 1px solid #C0C0C0;
    background: #FFFFFF;
}
.tabs>label {
    display: inline-block;
    padding: 25px;
    margin: 0 -5px -1px 0;
    text-align: center;
    color: #666666;
    border: 1px solid #C0C0C0;
    border-top: 2px solid #C0C0C0;
    background: #F8F8F8;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.tabs>input:checked + label {
    color: darkslategray;
    border: 1px solid #C0C0C0;
    border-top: 2px solid darkslategray;
    border-bottom: 1px solid #FFFFFF;
    background: #FFFFFF;
}
[data-name='accordion']>ul {box-shadow: 0 .4rem 1.2rem .2rem rgba(0, 0, 0, .05)}
#tab_1:checked ~ #txt_1,
#tab_2:checked ~ #txt_2,
#tab_3:checked ~ #txt_3,
#tab_4:checked ~ #txt_4, 
#tab_5:checked ~ #txt_5, 
#tab_6:checked ~ #txt_6,
#tab_7:checked ~ #txt_7,
#tab_8:checked ~ #txt_8,
#tab_9:checked ~ #txt_9,
#tab_10:checked ~ #txt_10, 
#tab_11:checked ~ #txt_11,
#tab_12:checked ~ #txt_12,
#tab_13:checked ~ #txt_13,
#tab_14:checked ~ #txt_14, 
#tab_15:checked ~ #txt_15, 
#tab_16:checked ~ #txt_16,
#tab_17:checked ~ #txt_17,
#tab_18:checked ~ #txt_18,
#tab_19:checked ~ #txt_19,
#tab_20:checked ~ #txt_20 { display: block; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }

div[id*='galimg'] {
    position: absolute;
    background: #f5f5f5;  
    display: flex;
}

div[id*='galimg'] > img {  
   top: 5% !important;
   left: 10% !important;    
   width: 80% !important;
   height: auto !important;    
   position: absolute;
}

div[id*='galimg'] > p {  
    font-family: Century Gothic;
    background: #f5f5f5;
    width: 80%;
}

div[id*='galimg'] > h2 {
    font-family: Century Gothic;
    z-index: 5;
    color: white;
    background: #02aed6;
    border-radius: 8px;
    text-align: center;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

#galnext, #galprev {
    top: 45%;
    position: absolute;
    color: black;
    border-radius: 30%;
    padding: 8px 27px;
    font: normal normal 800 35px Century Gothic;
    vertical-align: text-top;
} 

p.inact, h2.inact, img.inact, div.inact {
    display: none;
}

h2.act, img.act, div.act {
    display: block;
}

img[id*="img_panel1mark1"] {
    transition: transform 0.3s ease;
}

img[id*="img_panel1mark1"]:hover { 
    transform: scale(1.5);
}

.divarea {
    background: #ffffff;
    padding: 10px;
    border-radius: 5px;
    position: absolute;
    border-bottom: 4px solid #169FE6;
}

h2.actnext, img.actnext {
    animation: slideNextGallary ease 1s;
    -webkit-animation: slideNextGallary ease 1s;
    -moz-animation: slideNextGallary ease 1s;
    -o-animation: slideNextGallary ease 1s;
    -ms-animation: slideNextGallary ease 1s;
}

h2.actprev, img.actprev {
    animation: slidePrevGallary ease 1s;
    -webkit-animation: slidePrevGallary ease 1s;
    -moz-animation: slidePrevGallary ease 1s;
    -o-animation: slidePrevGallary ease 1s;
    -ms-animation: slidePrevGallary ease 1s;
}

p.act {
    display: block;
    animation: fadeInGallary ease 1s;
    -webkit-animation: fadeInGallary ease 1s;
    -moz-animation: fadeInGallary ease 1s;
    -o-animation: fadeInGallary ease 1s;
    -ms-animation: fadeInGallary ease 1s;
}

@keyframes slideNextGallary {	0% {transform: translateX(15%);} 100% {transform: translateX(0%);}}
@keyframes slidePrevGallary {	0% {transform: translateX(0%);} 100% {transform: translateX(1%);}}
@keyframes fadeInGallary { 0% {opacity:0;} 100% {opacity:1;}}
@-moz-keyframes fadeInGallary {  0% {opacity:0;}  100% {opacity:1;}}
@-webkit-keyframes fadeInGallary {  0% {opacity:0;}  100% {opacity:1;}}
@-o-keyframes fadeInGallary {  0% {opacity:0;}  100% {opacity:1;}}
@-ms-keyframes fadeInGallary {  0% {opacity:0;}  100% {opacity:1;}}

#galnext {
    right: 1%;
}

#galprev {
    left: 1%;
}

#galprev, #galnext {
transition: 1s; 
}

#galprev:hover, #galnext:hover {
    transform: scale(2); 
}

#galprev:before {
	content: "\276C";
}

#galnext:before {
	content: "\276D";
}

.dialog-wrapper {transition: 0.3s ease}
.dialog-grid {color: #0000C4}

.dialog {transition: 0.35s cubic-bezier(0.56, 0.13, 0.25, 1.69)}

.dialog-wrapper[active=false] {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
    z-index: 4001;
}

.dialog-wrapper[active=false] .dialog {
    background-color: var(--primary);
    border-radius: var(--big-shape);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-direction: column;
    padding: 24px 32px;
    gap: 24px;
    transform: scale(0.8);
    pointer-events: none;
    z-index: 4002;
    opacity: 0;
}

.dialog-wrapper[active=true] {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 4001;
}

.dialog-wrapper[active=true] .dialog {
    background-color: var(--primary);
    border-radius: var(--big-shape);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-direction: column;
    padding: 24px 32px;
    gap: 24px;
}

.dialog .actions-container {
    width: 100%;
}

.dialog .message-container {
    text-align: center;
    width: 100%;
    padding-block: 0px;
    font-size: large;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--secondary);
}

.card, .tabs, [id^='img_panel1area'], [id^='img_panel1mark'], .numList, .nonumList {
z-index: 100;    
}
[data-area^='img_panel1area'] {
z-index: 101;       
}

.slider {
    position: relative;
    background-color: #fff;
    width: 80%;
    height: 80%;
    border-radius: var(--big-shape);
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: flex-start;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.1);
}

:fullscreen .slider {
    width: 100%;
    height: 100%;
    border-radius: 0px;
}

:fullscreen .menu {
    border-radius: 0px;
}

:fullscreen .slide-container {
    left: 0px !important;
}

:fullscreen .menu[active=false] {
    margin-right: 80px !important;
}

.menu {
    position: relative;
    background-color: var(--surface);
    border-radius: var(--big-shape);
    height: 100%;
    width: 300px;
    transition: 0.3s ease;
    z-index: 2;
    overflow-y: auto;
    overflow-x: hidden;
}

.menu[active=true] {
    width: 300px;
}

.menu[active=false] {
    width: 0px;
    margin-right: 160px !important;
}

.menu::-webkit-scrollbar {
    width: 8px;
}

.menu::-webkit-scrollbar-thumb {
    background-color: var(--active-surface); 
    border-radius: 0px 10px 10px 0px;
}

.slides {
    margin: 0px;
    padding: 0px;
}

.slide {
    list-style-type: none;
    display: flex;
    gap: 10px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 0px;
    transition: 0.2s ease;
    width: 100%;
}

.slide:hover {
    background-color: var(--active-primary);
}

.slide[selected] {
    background-color: var(--active-primary);
    color: var(--primary);
}

.slide-title {
    font-family: Arial, Helvetica, sans-serif;
    -webkit-user-select: none;
    user-select: none;
    margin-block: 6px;
    font-weight: 100;
}

.slide-miniature {
    margin: 0px;
    width: 120px;
    border-radius: 4px;
    user-select: none;
}

.show-menu-button {
    position: absolute;
    top: 10px;
    left: 0px;
    height: 40px;
    width: 40px;
    border: 0px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4000;
    transition: 0.3s ease;
}

.show-menu-button:focus {
    border: 0px solid;
}

.show-menu-button[active=true] {
    border-radius: 0px 50% 50% 0px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
}

.show-menu-button[active=false] {
    border-radius: 50%;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
    transform: translateX(50%);
}

.show-menu-button[active=true] svg {
    transform: rotateZ(0deg);
}

.show-menu-button[active=false] svg {
    transform: rotateZ(180deg);
}

.show-menu-button svg {
    fill: var(--active-primary);
    transition: fill 0.4s ease, transform 0.3s ease;
}

.show-menu-button:hover svg {
    fill: var(--secondary);
}

.counter {
    position: absolute;
    right: 0;
    top: 0;
    margin: 16px 24px;
    z-index: 3000;
    background-color: #fff;
    padding: 6px 12px;
    border-radius: 12px;
    box-shadow: 0px 1px 6px #00000026
}

.viewer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: center;
}

.player {
    background-color: var(--primary);
    width: 100%;
    height: 100px;
    border-top: 1px var(--surface) solid;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-direction: row;
    border-radius: 0px 0px var(--big-shape) var(--big-shape);
    overflow: hidden;
    gap: 30%;
}

.actions-container {
    width: 50%;
    height: 100%;
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.action {
    position: relative;
    min-width: 40px;
    max-width: 300px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--big-shape);
    border: 0 solid;
    background-color: var(--primary);
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
    transition: 0.2s ease;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
}

button.userButton:hover {
    box-shadow: none;
    transform: translateY(-2px);
    top: 10px;
}

.action:hover {
    background-color: var(--active-surface);
    transform: translateY(-2px);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
}

.action:hover svg {
    fill: var(--secondary);
}

.action:hover .action-label {
    color: var(--secondary);
}

.action-label {
    padding: 0px 8px;
    color: var(--active-primary);
    font-weight: bolder;
    transition: 0.4s ease;
    -webkit-user-select: none;
    user-select: none;
}

.action-icon {
    height: 30px;
    width: 30px;
    display: flex;
    pointer-events: none;
    justify-content: center;
    align-items: center;
}

.action-icon svg {
    width: 22px;
    height: 22px;
    transition: 0.4s ease;
    fill: var(--active-primary);
}

.action .ripple {
    position: absolute;
    background-color: rgb(255, 255, 255);
    pointer-events: none;
    border-radius: 50%;
    animation: rippleScaling 0.5s linear infinite;
}

.content {
    position: relative;
    height: 100%;
    width: 100%;
    border-radius: var(--big-shape);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


.slide-container {
    position: relative;
    transform-origin: 0px 0px;
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
    border-radius: var(--big-shape);
    /* padding: 12px; */
    box-sizing: border-box;
}

.counter {
    font-family: Arial, Helvetica, sans-serif;
    -webkit-user-select: none;
    user-select: none;
}

div>a {color: inherit}

.invisible {
    display: none;
}

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

@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .dialog-feedback-wrong, .dialog-feedback-right, .dialog-feedback-haventanswered {width: 65%}    
}

@media screen and (max-width: 1200px) {
    .slider {
        width: 98%;
    }
    .actionLF, .actionRT {justify-content: center !important}
    .actionRT {margin-left: 0}
}

@media screen and (max-width: 900px) {
    .slider {
        width: 100%;
        padding-block: 20px;
        border-radius: 0px;
    }
    
    .actionLF, .actionRT {justify-content: center !important}
    .actionRT {margin-left: 0}

    .menu {
        display: none;
    }

    .show-menu-button {
        display: none;
    }

    .player {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        overflow: visible;
    }

    .actions-container {
        width: 100%;
        justify-content: center;
    }

    #next-action,
    #previous-action {
        height: 50px;
    }

    .action {
        font-size: medium;
    }

    .action:hover {
        background-color: var(--primary);
        transform: translateY(0px);
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    }

    .action:hover svg {
        fill: var(--active-primary);
    }

    .action:hover .action-label {
        color: var(--active-primary);
    }

    .action-icon svg {
        height: 30px;
        width: 30px;
    }
}