@keyframes rotatebutton {
    from {transform: rotatex(0deg);}
    to {transform: rotatex(360deg);}
}

@media print {
 .noprint {
 display : none;
 }
}

.text-container {
    display: flex;
    justify-content: center;
    block-size: min(10rem, 23vw);
    min-inline-size: 22.5rem;
}

.text-stroke {
    font-size: 104px;
    letter-spacing: 4px;
    fill: none;
    stroke: #20f020;
    stroke-width: 2;
    stroke-dasharray: 100%;
    stroke-dashoffset: 100%;
    animation: textStrokeAnim 3000ms linear both;
    animation-iteration-count: 1;
}

@keyframes textStrokeAnim {
    0% {
        stroke-dasharray: 100%;
        stroke-dashoffset: 100%;
        fill: #0000;
    }
    95% {
        stroke-dasharray: 0%;
        stroke-dashoffset: 90%;
        fill: #0000;
    }
    100% {
        stroke-dasharray: 0%;
        stroke-dashoffset: 0%;
        fill: red;
        filter: drop-shadow(2px 2px 2px hsl(0deg 0% 0% / 0.38));
    }
}

.abc_header {
    font-size:          28px;
    color:              #ff9300;
    margin-left:        5px;
    margin-bottom:      25px;
    font-weight:        bold;
    text-shadow:        2px 2px 5px #808080;
}

.abc_header_ex {
    font-size:          28px;
    color:              #a0a0a0;
    margin-left:        5px;
    margin-bottom:      25px;
    text-shadow:        2px 2px 5px grey;
}

.abc_header_L2 {
    font-size:          28px;
    color:              navy;
    margin-left:        5px;
    margin-bottom:      25px;
    font-weight:        bold;
    text-shadow:        2px 2px 5px grey;
}

.abc_header_B2 {
    font-size:          28px;
    color:              #c372a9;
    margin-left:        5px;
    margin-bottom:      25px;
    font-weight:        bold;
    text-shadow:        2px 2px 5px grey;
}

.acceptbutton {
    width:              30px;
    height:             25px;
    font-size:          22px;
    color:              green;
    border-radius:      5px;
    cursor:             pointer;
}
   
.ar_er_ir_button {
    width:              35px;
    height:             25px;
    border-radius:      5px;
    cursor:             pointer;
}

.assemblebutton {
    visibility:         hidden;
    position:           absolute;
    bottom:             130px;
    left:               10px;
    width:              50px;
    height:             50px;
    border-radius:      25px;
    font-size:          9px;
    text-align:         center;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38)
}

.audiocontrolbutton {
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.audionav {
    cursor:             pointer;
    width:              30px;
    height:             30px;
    font-size:          16px;
    filter:             drop-shadow(2px 2px 2px hsl(0deg 0% 0% / 0.38));
}
   
.audioplayer {
    min-width:          210px;
    max-width:          250px;
    margin-left:        15px;
    margin-bottom:      0px;
    height:             20px;
    display:            inline-block;
    filter:             drop-shadow(2px 2px 2px hsl(0deg 0% 0% / 0.38));
}

.b_container {
    visibility:         hidden;
    transition:         .5s;
    text-align:         center;
    max-height:         25px;
    overflow:           hidden;
    position:           absolute;
    top:                50px;
    left:               30px;
    width:              60px;
    border-style:       solid;
    border-width:       1px;
    border-color:       white grey grey white;
    padding:            3px;
    background-color:   #9abcde;
    border-radius:      5px;
    z-index:            3;
    filter:             drop-shadow(5px 5px 3px hsl(0deg 0% 0% / 0.38));
}

.bookheadline {
    text-decoration:    underline;
    font-size:          32px;
    color:              #ff9300;
    margin-left:        30px;
    font-weight:        bold;
    text-shadow:        2px 2px 5px grey;
}

.livro1 {
    visibility:         hidden;
    position:           absolute;
    top:                120px;
    right:              25px;
    padding:            5px;
    background-color:   white;
    filter:             drop-shadow(5px 5px 3px hsl(0deg 0% 0% / 0.38));
}

.livro2 {
    visibility:         hidden;
    position:           absolute;
    top:                320px;
    right:              25px;
    padding:            5px;
    background-color:   white;
    filter:             drop-shadow(5px 5px 3px hsl(0deg 0% 0% / 0.38));
}

.backgroundstripes {
    background:         radial-gradient(black 15%, transparent 16%) 0 0,
                        radial-gradient(black 15%, transparent 16%) 8px 8px,
                        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
                        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
    background-color:   #282828;
}
.bandeira {
    filter:             drop-shadow(3px 3px 2px hsl(0deg 0% 0% / 0.38));
}

.bandeiras {
    background-color:   #c0c0c0;
    width:              30px; 
    border-radius:      5px; 
    padding:            10px;
    border:             1px solid white;
}

.bg_white {
    background-color:   white;
}

.boldblue {
    color:              blue;
    font-weight:        bold;
}

.bottompadding10 {
    padding-bottom:     10px;
}

.button_a {
    appearance:         none;
    position:           relative;
    top:                0px;
    width:              200px;
    height:             80px;
    border-width:       1px;
    border-style:       solid;
    border-color:       white grey grey white;
    margin:             5px;
    font-size:          14px;
    background-color:   #c0c0c0;
    transition:         box-shadow .2s;
    box-shadow:         2px 2px 2px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.button_a:hover {
    background-color:   #e0e0e0;
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);
}

.button_a:after {
    content:            "Ⓐ";
    font-family:        Helvetic;
    font-size:          20px;
    position:           absolute;
    top:                -4px;
    left:               1px;
    opacity:            1;
    color:              blue;
}

.button_b {
    appearance:         none;
    position:           relative;
    top:                0px;
    width:              200px;
    height:             80px;
    border-width:       1px;
    border-style:       solid;
    border-color:       white grey grey white;
    margin:             5px;
    font-size:          14px;
    background-color:   #c0c0c0;
    transition:         box-shadow .2s;
    box-shadow:         2px 2px 2px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.button_b:hover {
    background-color:   #e0e0e0;
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);
}

.button_b:after {
    content:            "Ⓑ";
    font-family:        Helvetic;
    font-size:          20px;
    position:           absolute;
    top:                -4px;
    left:               1px;
    opacity:            1;
    color:              blue;
}

.button_c {
    appearance:         none;
    position:           relative;
    top:                0px;
    width:              200px;
    height:             80px;
    border-width:       1px;
    border-style:       solid;
    border-color:       white grey grey white;
    margin:             5px;
    font-size:          14px;
    transition:         box-shadow .2s;
    background-color:   #c0c0c0;
    box-shadow:         2px 2px 2px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.button_c:hover {
    background-color:   #e0e0e0;
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);
}

.button_c:after {
    content:            "Ⓒ";
    font-family:        Helvetic;
    font-size:          20px;
    position:           absolute;
    top:                -4px;
    left:               1px;
    opacity:            1;
    color:              blue;
}

.button_d {
    appearance:         none;
    position:           relative;
    top:                0px;
    width:              200px;
    height:             80px;
    border-width:       1px;
    border-style:       solid;
    border-color:       white grey grey white;
    font-size:          14px;
    margin:             5px;
    background-color:   #c0c0c0;
    transition:         box-shadow .2s;
    box-shadow:         2px 2px 2px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.button_d:hover {
    background-color:   #e0e0e0;
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);
}

.button_d:after {
    content:            "Ⓓ";
    font-family:        Helvetic;
    font-size:          20px;
    position:           absolute;
    top:                -4px;
    left:               1px;
    opacity:            1;
    color:              blue;
}

.button_right {
    appearance:         none;
    position:           relative;
    top:                0px;
    width:              200px;
    height:             80px;
    border-width:       1px;
    border-style:       solid;
    border-color:       white grey grey white;
    margin:             5px;
    font-size:          14px;
    padding:            5px;
    background-color:   #c0c0c0;
    box-shadow:         2px 2px 2px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.button_right:after {
    content:            "✓";
    font-family:        Helvetic;
    font-size:          18px;
    font-weight:        bold;
    position:           absolute;
    top:                -4px;
    left:               2px;
    opacity:            1;
    color:              green;
}

.button_wrong {
    appearance:         none;
    position:           relative;
    top:                0px;
    width:              200px;
    height:             80px;
    border-width:       1px;
    border-style:       solid;
    border-color:       white grey grey white;
    margin:             5px;
    font-size:          14px;
    padding:            5px;
    background-color:   #c0c0c0;
    box-shadow:         2px 2px 2px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.button_wrong:after {
    content:            "✘";
    font-family:        Helvetic;
    font-size:          20px;
    position:           absolute;
    top:                1px;
    left:               1px;
    opacity:            1;
    color:              red;
}

.buttoncontainer {
    width:              96%;
    margin-left:        2%;
    border-radius:      5px;
    margin-bottom:      10px;
    padding-top:        10px;
    padding-bottom:     10px;
    table-layout:       fixed; 
    background:         #e0e0e0;
    border-width:       2px;
    border-style:       solid;
    border-color:       gray white white gray;
}

.buttons {
    transition:         box-shadow .25s;
    width:              100%;
    height:             50px;
    border-radius:      25px;
    background-color:   #dfcf20;
    color:              navy;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.buttons:hover {
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);   
    border-width:       2px;
    border-style:       solid;
    border-color:       hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5);

}

.c_1_1 {
    line-height:        24px;
    width:              100%;
    font-size:          14px;
    font-weight:        bold;
}

.c_1_2 {
    width:              33%;    
}

.c_1_3 {
    cursor:             pointer;
    box-shadow:         2px 2px 2px hsl(0deg 0% 0% / 0.38);
    padding-left:       5px;
    border-radius:      2px;
    min-width:          45px;
    position:           relative;
    background-color:   #abcdef;
    font-size:          14px;
    height:             25px;
    border-radius:      5px;
    margin-top:         3px;
}

.c_2_1 {
    line-height:        24px;
}

.c_2_2 {
    padding-left:       40px;
    height:             100px;
}

.c_2_3 {
    float:              left;
    padding-right:      10px;
    padding-bottom:     20px;
}

.c_2_4 {
    font-weight:        bold;
    color:              navy;
}

.c_2_5 {
    float:              left;
    padding-right:      10px;
    padding-bottom:     20px;
}

.c_2_6 {
    width:              98%;
    margin-top:         10px;
    margin-bottom:      10px;
    text-align:         center;
}

.c_3_1 {
    width:              78%;
}

.c_3_2 {
    width:              25%;
    border-top:         1px solid black;
    border-left:        1px solid black;
    border-right:       1px solid black;
}

.c_3_3 {
    border-left:        1px solid black; 
    border-right:       1px solid black;
}

.c_3_4 {
    border-left:        1px solid black;
    border-right:       1px solid black;
    border-bottom:      1px solid black;
}

.c_4_1 {
    width:              96%;
    margin-left:        2%;
    margin-top:         20px;
    border-radius:      5px;
}

.c_4_2 {
    width:              200px;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_4_3 {
    width:              150px;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_5_1 {
    line-height:        24px;
}

.c_5_2 {
    font-weight:        bold;
    color:              navy;
    font-style:         italic;
}

.c_7_1 {
    width:              96%;
    margin-left:        2%;
    margin-top:         20px;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_8_1 {
    color:              navy;
}

.c_9_1 {
    list-style-type:    decimal;
    line-height:        28px;
}

.c_9_2 {
    line-height:        28px;
    list-style-type:    lower-alpha;
}

.c_10_1 {
    line-height:        21px;
}

.c_10_2 {
    width:              120px;
    margin-left:        10px;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_11_1 {
    line-height:        24px;
    text-align:         justify;
    margin:             15px;
}

.c_11_2 {
    width:              96%;
    margin-left:        2%;
    margin-top:         20px;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_11_3 {
    width:              96%;
    margin-left:        2%;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_12_1 {
    width:              100%;
    line-height:        22px;
}

.c_13_1 {
    float:              left;
    padding-right:      10px;
    padding-bottom:     20px;
}

.c_13_2 {
    list-style-type:    decimal;
    line-height:        26px;
}

.c_13_3 {
    line-height:        40px;
    width:              100%;            
    column-count:       2;
}

.c_14_1 {
    line-height:        28px;
    width:              100%;
}

.c_14_2 {
    font-style:         italic;
    color:              navy;
}

.c_14_3 {
    font-size:          14px;
}

.c_14_4 {
    width:              200px;
    margin-left:        2%;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_16_1 {
    text-align:         center;
    font-size:          13px;
    font-weight:        bold;
}

.c_17_1 {
    background-color:   green;
    color:              white;
    border-radius:      5px;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
}

.c_18_1 {
    line-height:        32px;
    background-color:   #e8c74c;
    border-radius:      5px;
    width:              80%;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_18_2 {
    padding-left:       20px;
    text-decoration:    underline;
    font-weight:        bold;
}

.c_18_3 {
    padding-left:       10px;
}

.c_18_4 {
    padding-left:       10px;
    padding-bottom:     10px;
}

.c_19_1 {
    hyphens:            auto;
    margin-left:        10px;
    margin-top:         30px;
    width:              98%;
    column-count:       3;
    column-gap:         20px;
    column-rule:        1px solid #606060;
    text-align:         justify;
}

.c_20_1 {
    line-height:        32px;
}

.c_21_1 {
    width:              150px;
    margin-left:        2%;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_22_1 {
    padding-left:       30px;
    line-height:        32px;
}

.c_22_2 {
    background-color:   #c0c0c0;
}

.c_23_1 {
    width:              150px;
    margin-left:        2%;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_24_1 {
    width:              33%;
    background:         yellow;
    border-top:         1px dotted black;
}

.c_26_1 {
    line-height:        32px;
    width:              100%;
    margin-bottom:      20px;
}

.c_26_2{
    transform:          rotate(4deg);
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-radius:      5px;
}

.c_26_3 {
    transform:          rotate(-4deg);
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-radius:      5px;
}

.c_26_4 {
    transform:          rotate(2deg);
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-radius:      5px;
}

.c_30_1 {
    width:              100%;
    background-color:   black;
    color:              white;
    border-top:         3px solid brown;
    border-right:       3px solid brown;
    border-left:        3px solid brown;
    border-bottom:      3px solid brown;
}

.c_30_2 {
    color:              white;
    font-size:          18px;
    padding-left:       25px;
    padding-right:      25px;
    padding-top:        5px;
    padding-bottom:     5px;
    border:             1px solid white;
}

.c_30_3 {
    color:              white;
}

.c_30_4 {
    color:              white;
    text-align:         right;
}

.c_30_5 {
    list-style-type:    decimal;
    line-height:        32px;
}

.c_30_6 {
    line-height:        30px;
    list-style-type:    decimal;
}

.c_31_1 {
    width:              100px;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_36_1 {
    background-color:   #ffff00;
}

.c_36_2 {
    background-color:   orange;
}

.c_37_1 {
    transform:          rotate(2deg);
    background-color:   yellow;
    line-height:        28px;
    padding:            10px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-radius:      5px;
}

.c_39_1 {
    list-style-type:    lower-alpha;
}

.c_43_1 {
    line-height:        32px;
    list-style-type:    lower-alpha;
}

.c_50_1 {
    margin-top:         10px;
    margin-left:        10px;
    margin-right:       10px;
    width:              98%;
    column-count:       2;
    column-gap:         20px;
    column-rule:        1px solid #606060;
}

.c_51_1 {
    column-count:       2;
    line-height:        32px;
}

.c_51_2 {
    list-style-type:    decimal;
}

.c_53_1 {
    width:              99%;
    margin-left:        .2%;
    margin-top:         20px;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_61_1 {
    line-height:        32px;
    width:              250px;
    text-align:         center;
}

.c_71_1 {
    border-radius:      5px;
    background:         green; 
    color:              white;
}

.c_71_2 {
    width:              250px;
    height:             350px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_76_1 {
    width:              100%;
    background:         #ffe875;
    border-radius:      5px;
}

.c_76_2 {
    padding:            5px;
    line-height:        20px;
}

.c_76_3 {
    border-radius:      5px;
    padding:            10px;
    background:         #e8c74c;
    line-height:        20px;
}

.c_76_4 {
    border-radius:      5px;
    background:         #cfb144;
    padding:            10px;
    line-height:        20px;
}

.c_77_1 {
    width:              99%;
    margin-left:        .2%;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_78_1 {
    width:              170px;
    margin-left:        2%;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_79_1 {
    line-height:        32px;
    margin-top:         30px;
}

.c_83_1 {
    width:              200px;
    float:              right;
    margin-left:        25px;
    margin-right:       10px;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_90_1 {
    line-height:        28px;
    margin-left:        20px;
}

.c_92_1 {
    width:              250px;
    float:              right;
    margin-bottom:      30px;
    margin-right:       20px;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_92_2 {
    font-size:          36px;
    font-weight:        bold;
    color:              green;
    margin-left:        50px;
}

.c_92_3 {
    font-size:          24px;
    color:              green;
}

.c_92_4 {
    font-size:          48px;
    font-weight:        bold;
    color:              green;
}

.c_94_1 {
    width:              16%;
}

.c_94_2 {
    border:             1px solid black;    
}

.c_94_3 {
    text-align:         center;
    border:             1px solid black;
}

.c_95_1 {
    color:              white;
    font-size:          24px;
    background-color:   green;
}

.c_95_2 {
    width:              80%;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_95_3 {
    text-decoration:    italic;
    font-weight:        bold;
    color:              navy;
}

.c_97_1 {
    color:              gray;
}

.c_97_2 {
    color:              black;
}

.c_99_1 {
    width:              98%;
    margin-left:        1%;
    text-align:         justify;
    width:              98%;
    column-count:       3;
    column-gap:         20px;
    column-rule:        1px solid #606060;
}

.c_99_2 {
    width:              99%;
    margin-left:        .5%;
    margin-bottom:      10px;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_100_1 {
    line-height:        28px;
}

.c_100_2 {
    text-decoration:    none;
    cursor:             pointer;
}

.c_100_3 {
    padding-right:      15px;
}

.c_100_4 {
    line-height:        28px;
    column-count:       4;
    padding:            15px;
}

.c_104_1 {
    width:              98%;
    margin-left:        .5%;
    margin-top:         20px;
    border-radius:      5px;
}

.c_106_1 {
    width:              25px;
}

.c_108_1 {
    width:              100%;
    line-height:        24px;
}

.c_111_1 {
    margin-left:        10px;
    column-count:       2;
    column-gap:         55px;
    width:              100%;
    line-height:        24px;
    list-style:         none;
    text-indent:        -40px;
}

.c_115_1 {
    column-count:       2;
    width:              100%;
    margin-top:         20px;
    column-gap:         20px;
    column-rule:        1px solid #606060;
}

.c_116_1 {
    border-bottom:      2px solid black;
    border-right:       1px solid black;
}

.c_116_2 {
    border-left:        1px solid black;
    border-bottom:      2px solid black;
    border-right:       1px solid black;
    width:              20%;
}

.c_116_3 {
    border-left:        1px solid black;
    border-bottom:      2px solid black;
    width:              20%;
}

.c_116_4 {
    border-bottom:      2px solid black; 
    border-right:       1px solid black;
}

.c_116_5 {
    border-bottom:      2px solid black; 
    border-right:       1px solid black;
    border-left:        1px solid black;
    text-align:         center;
}

.c_116_6 {
    border-bottom:      2px solid black; 
    border-right:       1px solid black;
    border-left:        1px solid black;
    text-align:         center;
}

.c_116_7 {
    border-bottom:      2px solid black; 
    border-left:        1px solid black;
    text-align:         center;
}

.c_116_8 {
    border-bottom:      2px solid black;
    border-right:       1px solid black;
}

.c_116_9 {
    border-bottom:      2px solid black; 
    border-right:       1px solid black;
    border-left:        1px solid black;
    text-align:         center;
}

.c_117_1 {
    width:              10px;
}

.c_117_2 {
    width:              95%;
    margin-left:        10px;
    line-height:        28px;
}

.c_117_3 {
    width:              150;
    transform:          rotate(-2deg);
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_118_1 {
    line-height:        20px;
}

.c_121_1 {
    float:              right;
    width:              30%;
    margin-right:       100px;
}

.c_121_2 {
    font-size:          24px;
    font-weight:        bold;
}

.c_123_1 {
    width:              25%;
}

.c_123_2 {
    width:              96%;
    margin-left:        2%;
    margin-bottom:      10px;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_123_3 {
    width:              250px;
    float:              right;
    margin-right:       30px;
    margin-top:         50px;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_124_1 {
    float:              right;
    width:              200px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-radius:      5px;
    margin-right:       10px;
}

.c_126_1 {
    border-right:       1px solid black;
    border-bottom:      1px solid black;
    width:              33%;
    font-weight:        bold;
}

.c_126_2 {
    border-left:        1px solid black;
    border-bottom:      1px solid black;
    border-right:       1px solid black;
    width:              33%;
    font-weight:        bold;
}

.c_126_3 {
    border-top:         1px solid black;
    border-right:       1px solid black;
    border-bottom:      1px solid black;
}

.c_126_4 {
    width:              30px;
    border-top:         1px solid black;
    border-bottom:      1px solid black;
    border-right:       1px solid black;
}

.c_126_5 {
    border-left:        1px solid black;
    border-top:         1px solid black;
    border-right:       1px solid black;
    border-bottom:      1px solid black;
}

.c_126_6 {
    width:              30px;         
    border-top:         1px solid black;
    border-right:       1px solid black;
    border-bottom:      1px solid black;
}

.c_126_7 {
    border-left:        1px solid black;
    border-top:         1px solid black;
    border-right:       1px solid black;
    border-bottom:      1px solid black;
}

.c_126_8 {
    width:              30px;
    border-top:         1px solid black;
    border-bottom:      1px solid black;
}

.c_126_9 {
    width:              30px;
    border-top:         1px solid black;
    border-bottom:      1px solid black;
    border-right:       1px solid black;
}

.c_126_10 {
    border-left:        1px solid black;
    border-top:         1px solid black;
    border-right:       1px solid black;
    border-bottom:      1px solid black;
}

.c_126_11 {
    width:              30px;
    border-top:         1px solid black;
    border-bottom:      1px solid black;
}

.c_126_12 {
    border-top:         1px solid black;
    border-right:       1px solid black;
}

.c_126_13 {
    width:              30px;
    border-top:         1px solid black;
    border-right:       1px solid black;
}

.c_126_14 {
    border-left:        1px solid black;
    border-top:         1px solid black;
    border-right:       1px solid black;
}

.c_126_15 {
    width:              30px;
    border-top:         1px solid black;
}

.c_126_16 {
    width:              30px;
    border-top:         1px solid black;
    border-right:       1px solid black;
}

.c_126_17 {
    width:              30px;
    border-top:         1px solid black;
    border-right:       1px solid black;
    border-bottom:      1px solid black;
}

.c_126_18 {
    border-bottom:      1px solid black; 
    border-left:        1px solid black;
    width:              33%;
    font-weight:        bold;
}

.c_126_19 {
    border-top:         1px solid black;
    border-right:       1px solid black;
    border-bottom:      1px solid black;
}

.c_126_20 {
    border-top:         1px solid black;
    border-right:       1px solid black;
    border-bottom:      1px solid black;
}

.c_126_21 {
    width:              30px;
    border-top:         1px solid black;
    border-right:       1px solid black;
    border-bottom:      1px solid black;
}

.c_126_22 {
    border-top:         1px solid black;
    border-right:       1px solid black;
    border-bottom:      1px solid black;
}

.c_127_1 {
    float:              right;
    width:              300px;
    height:             120px;
    margin-right:       20px;
    margin-bottom:      10px;
    margin-top:         5px;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_129_1 {
    line-height:        20px;
    width:              100%;
}

.c_129_2 {
    width:              150px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    margin:             5px;
    border-radius:      5px;
}

.c_130_1 {
    width:              150px;
    float:              right;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-radius:      5px;
    margin-right:       10px;
}

.c_131_1 {
    font-size:          28px;
    font-weight:        bold;
}

.c_133_1 {
    text-align:         center;
    transform:          rotate(4deg);
    width:              130px;
    font-size:          14px;
    padding:            10px;
    height:             25px;
    background:         #c0c0c0;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_133_2 {
    text-align:         center;
    transform:          rotate(-6deg);
    width:              130px;
    font-size:          14px;
    padding:            10px;
    height:             25px;
    background:         #c0c0c0;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_133_3 {
    text-align:         center;
    transform:          rotate(-4deg);
    width:              130px;
    font-size:          14px;
    padding:            10px;
    height:             25px;
    background:         #c0c0c0;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_133_4 {
    text-align:         center;
    transform:          rotate(5deg);
    width:              130px;
    font-size:          14px;
    padding:            10px;
    height:             25px;
    background:         #c0c0c0;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_133_5 {
    text-align:         center;
    transform:          rotate(-7deg);
    width:              130px;
    font-size:          14px;
    padding:            10px;
    height:             25px;
    background:         #c0c0c0;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_133_6 {
    text-align:         center;
    transform:          rotate(7deg);
    width:              130px;
    font-size:          14px;
    padding:            10px;
    height:             25px;
    background:         #c0c0c0;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_134_1 {
    text-decoration:    none;
}

.c_136_1 {
    float:              right;
    margin-left:        5px; 
    width:              150px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-radius:      5px;
}

.c_137_1 {
    font-size:          16px;
    color:              black;
    font-style:         italic;
    font-weight:        bold;
}

.c_137_2 {
    font-size:          16px;
    color:              gray;
    font-style:         italic;
    font-weight:        bold;
}

.c_137_3 {
    font-size:          14px;
    color:              gray;
    font-style:         italic;
}

.c_137_4 {
    font-size:          16px;
    color:              black;
    font-style:         italic;
    font-weight:        bold;
}

.c_137_5 {
    font-size:          14px;
    color:              black;
    font-style:         italic;
    font-weight:        bold;
}

.c_137_6 {
    font-size:          12px;
    color:              gray;
    font-style:         italic;
}

.c_138_1 {
    text-decoration:    underline;
    cursor:             pointer;
}

.c_139_1 {
    width:              100%;
    line-height:        20px;
}

.c_139_2 {
    width:              150px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-radius:      5px;
}

.c_140_1 {
    font-size:          16px;
    color:              #20ff20;
}

.c_140_2 {
    font-size:          13px;
    color:              gray;
}

.c_140_3 {
    font-size:          12px;
    color:              black;
}

.c_140_4 {
    font-size:          12px;
    color:              gray;
}

.c_140_5 {
    font-size:          14px;
    color:              gray;
}

.c_140_6 {
    font-size:          14px;
    color:              gray;
}

.c_140_7 {
    font-size:          15px;
    color:              gray;
}

.c_140_8 {
    font-size:          16px;
    color:              #20ff20;
}

.c_140_9 {
    font-size:          12px;
    color:              gray;
}

.c_141_2 {
    width:              90%;
    margin-top:         5px;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_141_3 {
    font-size:          9px;
}

.c_142_1 {
    width:              100px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-radius:      5px;
}

.c_146_1 {
    width:              150px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-radius:      5px;
    margin:             5px;
}

.c_152_1 {
    border-radius:      5px;
    border:             1px solid black;
    background-color:   #f0e0e0;
    width:              90%;
    height:             320px;
    margin-left:        5%;
    padding:            10px;
    line-height:        24px;
}

.c_152_2 {
    width:              100%;
    height:             75%;
    margin-top:         10%;
    font-size:          42px;
    text-align:         center; 
    line-height:        46px;
}

.c_152_3 {
    font-size:          24px;
}

.c_152_4 {
    width:              40px;
    float:              left;
}

.c_152_5 {
    font-size:          22px;
    color:              brown;
}

.c_152_6 {
    text-align:         justify;
}

.c_152_7 {
    color:              brown;
}

.c_152_8 {
    background-color:   #f0e0e0;
    width:              100%;
    padding:            10px;
    line-height:        24px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_155_1 {
    margin-top:         5px;
    margin-bottom:      5px;
    background-color:   #f0e0e0;
    width:              100%;
    padding:            10px;
    line-height:        24px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_156_1 {
    cursor:             pointer;
    padding:            5px;
/*     background-color:   #f0c0c0; */
    background-color:   white;
    line-through:       none;
}

.c_158_1 {
    margin-top:         5px;
    background-color:   #f0e0e0;
    width:              100%;
    padding:            10px;
    line-height:        24px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_158_2 {
    padding:            5px;
    background-color:   #f0c0c0;
    text-decoration:    none;
    cursor:             pointer;
}

.c_158_3 {
    width:              4%;
}

.c_158_4 {
    width:              24%;
}

.c_158_5 {
    margin-top:         5px;
    background-color:   #f0e0e0;
    width:              100%;
    padding:            10px;
    line-height:        24px;
}

.c_162_1 {
    color:              brown;
    font-size:          18px;
}

.c_164_1 {
    font-weight:        bold;
    font-style:         italic;
}

.c_164_2 {
    text-decoration:    underline;
    color:              blue;
}

.c_165_1 {
    padding:            5px;
    height:             30px;
    background-color:   white;
    color:              black;
    border-radius:      3px;
}

.c_166_1 {
    text-decoration:    none;
    cursor:             pointer;
    background:         #f0c0c0;
    padding:            5px;
}

.c_168_1 {
    width:              15%;
}

.c_168_2 {
    border-bottom:      1px solid black
}

.c_169_1 {
    background-color:   #f0e0e0;
    width:              100%;
    padding:            10px;
    line-height:        32px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.c_169_2 {
    border-radius:      5px;
    background-color:   white;
    padding:            5;
}

.c_255_1 {
  text-align:       center;
  min-height:       350px;;
  width:            100%;
  background-image: url('../pics/canvas.png');
}

.c_255_2 {
    font-size:      38px;
    color:          white;
    font-weight:    bold;
    line-height:    48px;
    padding-top:    50px;
}

.c_255_3 {
    margin-top: 80px;
    font-size:  22px;
    color:      white;
}

.c_256_1 {
    width:  100px;
    height: 100px;
}

.c_265_1 {
    padding:            10px;
    margin-left:        10px;
    border-radius:      5px;
    background-color:   #aabbcc;
}

.c_265_2 {
    white-space:        pre;
    padding:            6px;
    border-radius:      5px;
    background-color:   #bbccdd;
}

.classpointer {
    cursor:             pointer;
}

.clearbutton {
    width:              25px;
    height:             25px;
    background-image:   url('../pics/close.png');
    background-size:    cover;
    border-radius:      3px;
    cursor:             pointer;
}

.canvas {
    border-width:       1px;
    border-style:       solid;
    border-color:       gray white white gray;
    background:         #ffffb0;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    margin-bottom:      5px;
    margin-top:         5px;
}

.certo {
    margin-left:        5px;
    font-size:          14px;
    color:              green;
}

.cell_30x30 {
    width:              30px;
    height:             30px;
}

.chapterinit {
    width:              100%;
    background-color:   #FF9300;
    border-radius:      10px;
    background-image:   linear-gradient(to right, #ff9300, yellow);
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.chapterinit_L2 {
    width:              100%;
    background-color:   #6060ff;
    border-radius:      10px;
    background-image:   linear-gradient(to left, lightblue, #6060ff);
    text-shadow:        2px 2px 5px grey;
}

.chapterimage_b2 {
    width:              100%;
    background-color:   #c372a9;
    border-radius:      10px;
    background-image:   linear-gradient(to right, #c372a9, #f6a5dc);
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.chapterinit_B2 {
    font-size:          32px;
    color:              white;
    text-align:         left;
    line-height:        32px;
    padding-left:       40px;
    padding-bottom:     20px;
    font-weight:        bold;
    text-shadow:        2px 2px 5px grey;
}

.chaptergramatica {
    color:              white;
    text-align:         left;
    line-height:        36px;
    font-size:          28px;
    padding:            5px;
    padding-left:       30px;
    margin-top:         5px;
    margin-bottom:      5px;
    background-color:   #c372a9;
    border-radius:      10px;
    background-image:   linear-gradient(to right, #c372a9, #f6a5dc);
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.chapterheadline {
    color:              wheat;
    margin-left:        10px;
    width:              95%;
/*    background-color:   #ff9300;*/
    border-radius:      5px;
    padding:            10px;
}

.chapterheadline_L2 {
    color:              wheat;
    margin-left:        10px;
    width:              95%;
/*     background-color:   #6060ff; */
    border-radius:      5px;
    padding:            10px;
}

.chapterimage {
    margin-top:         20px;
    margin-bottom:      20px;
    width:              100%;
}

.chapterinit2 {
    width:              100%;
    background-color:   #6060ff;
}

.pageheadline_b2 {
    background-color:   #c372a9;
    font-size:          22px;
    color:              white;
    text-shadow:        2px 2px 5px grey;
    height:             32px;
    line-height:        32px;
    padding:            10px;
    border-radius:      10px;
    background-image:   linear-gradient(to right, lightblue, #c372a9);
    text-shadow:        2px 2px 5px black;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.pageheadline_b2_2 {
    background-color:   #c372a9;
    font-size:          22px;
    color:              white;
    text-shadow:        2px 2px 5px grey;
    height:             32px;
    line-height:        32px;
    padding:            10px;
    border-radius:      10px;
    background-image:   linear-gradient(to left, lightblue, #c372a9);
    text-shadow:        2px 2px 5px black;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.charselect {
    transition:         max-width 1s;
    font-size:          16px;
    color:              white;
    cursor:             pointer;
    width:              10px;
    overflow-x:         hidden;
    max-width:          10px;
}

.charselectbutton {
    width:              35px;
    height:             35px;
    border-radius:      5px;
    transition:         background-color 1s;
    background-color:   gray;
    text-align:         right;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.charselectbutton:focus {
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);   
    border-width:       2px;
    border-style:       solid;
    border-color:       hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5);
}

.charselect:hover {
    max-width:          200px;
    width:              200px;
}

.charselect2 {
    border-width:       2px;
    border-style:       solid;
    border-color:       white gray gray white;
    border-radius:      5px;
    width:              98%;
    height:             50px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    background-image:   linear-gradient(to right, yellow, orange);    
    margin-left:        1%;
    margin-top:         1%;
    margin-right:       1%;
}

.charset {
    transition:         transform 0.5s;
    font-size:          16px;
    padding:            2px;
    margin:             auto;
    cursor:             pointer;
    min-width:          30px;
    border-radius:      3px;
    background-color:   grey;
    color:              white;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
}

.charset:hover {
    transition:         transform 0.5s;
    font-size:          16px;
    padding:            2px;
    margin:             auto;
    cursor:             pointer;
    min-width:          30px;
    border-radius:      3px;
    transform:          scale(1.3);
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);
}

.checkboxbutton {
    margin-left:        15px;
}

.closepic_27 {
    width:              15px;
    margin-top:         3px;
    cursor:             pointer;
}

.contbutton {
    background:         #eee url('../pics/cont.png') no-repeat top left; 
    background-position-x: 5px;
    background-position-y: 8px;
    margin-right:       15px;
    background-size:    25px 25px;
    width:              140px;;
    height:             40px;
    border-radius:      20px;
    background-color:   #f0f0f0;
    font-size:          14px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.contbutton:focus {
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);   
    border-width:       2px;
    border-style:       solid;
    border-color:       hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5);
}

.conjugation {
    transition:         opacity 1s, left 1s;
    position:           absolute;
    top:                30px;
    left:               -100%;
    width:              70%;
    min-width:          70%px;
    border-radius:      10px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border:             2px solid black;
    background-image:   url('../pics/gridbackground.png'); 
    background-size:    cover; 
}

.conj_counter_reset {
    background:         url('../pics/replace.png') no-repeat center center; 
    background-color:   #e0e0e0;
    background-size:    23px 23px;
    width:              28px;
    height:             28px;
    border-radius:      3px;
    cursor:             pointer;
}

.commentwrapper {
    border-radius:      10px; 
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    height:             56px;
    width:              100%;
    border-top:         3px solid grey;
    border-left:        3px solid grey;
    border-right:       3px solid white;
    border-bottom:      3px solid white;
    background:         #fff5db;
    overflow-x:         hidden;
}

.comment {
    z-index:            -1;
    padding:            5px;
    overflow-x:         hidden;
    overflow-y:         auto;
    font-size:          16px;
    font-family:        Arial;
    opacity:            1.0;
    width:              98%;
    padding:            5px;
    text-align:         left;
    max-height:         390px;
    min-height:         100px;
    line-height:        24px;
    border-style:       solid;
    border-width:       2px;
    border-color:       grey white white grey;
    background-color:   wheat;
}

.comment_fromforward {
    transition:         transform 0.5s;
    transform-style:    preserve-3d;  
    transform-origin:   right center;
    padding:            5px;
    overflow-x:         hidden;
    overflow-y:         auto;
    font-size:          16px;
    font-family:        Arial;
    opacity:            1.0;
    width:              99%;
    padding:            5px;
    text-align:         left;
    max-height:         390px;
    min-height:         100px;
    line-height:        24px;
    border-style:       solid;
    border-width:       2px;
    border-color:       grey white white grey;
    background-color:   wheat;
}

.comment_frombackward {
    transition:         transform 0.5s;
    transform-style:    preserve-3d;  
    transform-origin:   left center;
    padding:            5px;
    overflow-x:         hidden;
    overflow-y:         auto;
    font-size:          16px;
    font-family:        Arial;
    opacity:            1.0;
    width:              99%;
    padding:            5px;
    text-align:         left;
    max-height:         390px;
    min-height:         100px;
    line-height:        24px;
    border-style:       solid;
    border-width:       2px;
    border-color:       grey white white grey;
    background-color:   wheat;
}

.comment_cleared {
    transition:         transform 0.5s;
    transform-style:    preserve-3d;  
    transform-origin:   top center;
    transform:          rotatex(90deg) skewx(3deg);
    padding:            5px;
    overflow:           auto;
    overflow-y:         auto;
    font-size:          16px;
    font-family:        Arial;
    width:              98%;
    padding:            5px;
    opacity:            0.3;
    text-align:         left;
    max-height:         390px;
    min-height:         100px;
    line-height:        24px;
    border-style:       solid;
    border-width:       2px;
    border-color:       grey white white grey;
}

.comment_forward {
    transition:         transform 0.5s;
    transform-style:    preserve-3d;  
    transform-origin:   left center;
    transform:          rotatey(90deg) skewy(3deg);
    padding:            5px;
    overflow:           auto;
    overflow-y:         auto;
    font-size:          16px;
    font-family:        Arial;
    width:              98%;
    padding:            5px;
    opacity:            0.3;
    text-align:         left;
    max-height:         390px;
    min-height:         100px;
    line-height:        24px;
    border-style:       solid;
    border-width:       2px;
    border-color:       grey white white grey;
}

.comment_backward {
    transition:         transform .5s;
    transform-style:    preserve-3d;  
    transform-origin:   right center;
    transform:          rotatey(90deg) skewy(3deg);
    padding:            5px;
    overflow:           auto;
    overflow-y:         auto;
    font-size:          16px;
    font-family:        Arial;
    width:              98%;
    padding:            5px;
    opacity:            0.3;
    text-align:         left;
    max-height:         390px;
    min-height:         100px;
    line-height:        24px;
    border-style:       solid;
    border-width:       2px;
    border-color:       grey white white grey;
}

.comunicaricon {
    width:              35px;
    margin-left:        10px;
    position:           relative;
    top:                2px;
}

.capitelicon {
    width:              30px;
    margin-left:        10px;
    margin-right:       10px;
    position:           relative;
    top:                5px;
}

.controlwrapper {
    width:              250px;
    height:             50px;
    margin-right:        2%;
    margin-top:         10px;
    width:              100%;
}

.countlabel {
    margin-top:         5px;
    margin-left:        15px;
    font-size:          10px;
    font-weight:        bold;
    text-decoration:    underline;
    font-style:         italic;
    color:              navy;
}

.cursor_pointer {
    cursor:             pointer;
}

.dash {
    position:           relative;
    left:               -20px;
    list-style-type:    "\2013\20\0a";
    color:              #000060;
}

.debug {
    position:           absolute; 
    bottom:             5px;
    right:              5px;    
}

.dictwindow {
    transition:         top 1s;
    font-size:          32px;
    position:           absolute; 
    top:                -410%; 
    visibility:         hidden;
    left:               20%; 
    width:              60%; 
    min-width:          800px;
    border-radius:      10px; 
    background-image:   url('../pics/gridbackground.png'); 
    background-size:    cover; 
    border:             2px solid black;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.disclaimerbutton {
    width:              80px;
    height:             35px;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.disclaimercontainer {
    background-image:   url('../pics/gridbackground.png');
    margin-top:         2%;
    margin-left:        30%;
    width:              40%;
    max-height:         600px;
    padding:            15px;
    border-style:       solid;
    border-width:       5px;
    border-color:       grey white white grey;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.dlistsortindicator {
    opacity:            1.0;
    float:              right;
    margin-right:       15px;
    font-size:          1em;
    cursor:             pointer;
}

.dlistwrapper {
    border-width:       2px;
    border-style:       solid;
    border-color:       gray white white gray;
}

.dlist {
    border-radius:      5px;
    background:         #f0f0f0;
    overflow-y:         auto; 
    scrollbar:          vertical;
    overflow-x:         auto; 
    white-space:        nowrap; 
    margin:             2%;
    width:              94%;
    height:             140px; 
    padding-right:      5px; 
    border-width:       1px;
    border-style:       solid;
    border-color:       white gray gray white;
}

.dontknow {
    background:         #eee url('../pics/dontknow.png') no-repeat top left; 
    background-position-x: 5px;
    background-position-y: 8px;
    margin-right:       10px;
    background-size:    25px 25px;
    width:              140px;;
    height:             40px;
    border-radius:      20px;
    background-color:   #f0f0f0;
    font-size:          14px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.dontknow:focus {
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);   
    border-width:       2px;
    border-style:       solid;
    border-color:       hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5);
}

.edupadcontainer {
    background-image:   url('../pics/gridbackground.png'); 
    position:           absolute;
    top:                0px;
    left:               -100%;
    transition:         left 1s;
    width:              30%;
    height:             40%;
    border:             2px solid black;
    border-radius:      10px;
    overflow:           hidden;
    background-color:   #abcdef;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.edupad {
/*    position:           absolute;
    top:                100px;
    right:              25px;*/
    margin-top:         5px;
    margin-bottom:      5px;
    margin-left:        2px;
    border-width:       1px;
    border-style:       solid;
    border-color:       white gray gray white;
    border-radius:      10px;
    width:              50px;
    height:             50px;
    text-align:         center;
    background-color:   #aabbcc;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.edupadaddrlist {
    overflow:           auto;
    background-color:   white;
    width:              90%;
    margin-top:         10px;
    margin-left:        5%;
    border:             1px solid black;
    height:             50%;
}

.edupadobject {
    height:             80%;
    width:              98%;
    padding:            1%;
}

.edupadwrapper {
    padding:            5px;
    background-color:   #a0a020;
    width:              87%;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
    margin-left:        5%;
    margin-top:         10px;
    border-width:       1px; 
    border-style:       solid;
    border-color:       gray white white gray;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    100% { background-position: 400% 0; }
}

.endpreview {
    position:           absolute;
    top:                -115px;
    left:               -145px;
    transform:          scale(0.55);
    background-color:   wheat;
    position:           relative;
    border:             1px solid black;
    width:              650px;
    height:             530px;
    overflow:           hidden;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.endpreviewwrapper {
    position:           relative;
    left:               210px;
    width:              360px;
    height:             300px;
    border-style:       solid;
    border-width:       2px; 
    border-color:       grey white white grey;
    padding:            5px;
    overflow:           hidden;
    text-align:         left;
}

.eraselista {
    width:              25px;
    height:             25px;
    margin-top:         2px;
    margin-bottom:      2px;
    margin-left:        2px;
    margin-right:       5px;
    background-image:   url('../pics/close.png');
    background-size:    cover;
    background-color:   red;    
    border-radius:      3px;
}

.errado {
    margin-left:        5px;
    font-size:          14px;
    color:              red;
}

.exercisio_auditiva {
    font-size:          12px;
    color:              navy;
    font-style:         italic;
}

.exercisebutton {
    background:         #eee url('../pics/lernen.png') no-repeat top left; 
    margin-right:       10px;
    background-size:    20px 20px;
    width:              115px;
    height:             30px;
    margin-left:        15px;
    margin-top:         5px;
    border-radius:      5px;
}

.exresultbutton {
    font-size:          20px;
    font-weight:        bold;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    width:              100%;
    height:             40px;
    margin-top:         5px;
    border-radius:      20px;
    position:           relative;
    top:                -10px;
    cursor:             pointer;
}

.exresultbutton:focus {
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);   
    border-width:       2px;
    border-style:       solid;
    border-color:       hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5);

}

.exercisebuttoncontainer {
    width:              100%;
    margin:             5px;
}

.exercisebuttonwrapper {
    width:              94%;
    margin-left:        2%;
    padding-right:      10px;
    border-width:       2px;
    border-style:       solid;
    border-color:       gray white white gray;
    border-radius:      5px;
    background:         #e0e0e0;
    margin-bottom:      10px;
}

.exercisesourcecontainer {
    margin-top:         10px;
    padding:            5px;
    width:              100%;
    background-color:   green;
    text-align:         center;
}

.exrsultbuttoncontainer {
    text-align:         center;
    width:              100%;
    line-height:        150px;
}

.exerciseresultcontainer {
    border-width:       2px;
    border-style:       solid;
    border-color:       gray white white gray;
    width:              300px;
    line-height:        16px;
}

.exercisewindow {
    z-index:            2;
    transition:         top 1s;
    font-size:          32px;
    position:           absolute;
    top:                -410%;
    visibility:         hidden;
    left:               20%;
    width:              60%;
    min-width:          800px;
    border-radius:      10px;
    background-image:   url('../pics/gridbackground.png');
    background-size:    cover;
    border:             2px solid black;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38)
}

.exercisewindow_mobile {
    z-index:            2;
    transition:         top 1s;
    font-size:          32px;
    position:           absolute;
    top:                -200%;
    visibility:         hidden;
    left:               0px;
    width:              99%;
    border-radius:      10px;
    background-image:   url('../pics/gridbackground.png');
    background-size:    cover;
    border:             2px solid black;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38)
}

.exercisiowindow {
    z-index:            2;
    transition:         top 1s;
    font-size:          32px;
    position:           absolute;
    top:                -410%;
    visibility:         hidden;
    left:               20%;
    width:              60%;
    min-width:          800px;
    border-radius:      10px;
    background-image:   url('../pics/gridbackground.png');
    background-size:    cover;
    border:             2px solid black;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38)
}

.exercisiowindow_mobile {
    z-index:            2;
    transition:         top 1s;
    font-size:          32px;
    position:           absolute;
    top:                -410%;
    visibility:         hidden;
    left:               0px;
    width:              99%;
    border-radius:      10px;
    background-image:   url('../pics/gridbackground.png');
    background-size:    cover;
    border:             2px solid black;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38)
}

.exercisiobutton {
/*    position:           absolute;
    top:                220px;
    right:              25px;*/
    margin-top:         5px;
    margin-bottom:      5px;
    margin-left:        2px;
    border-width:       1px;
    border-style:       solid;
    border-color:       white gray gray white;
    border-radius:      10px;
    width:              50px;
    height:             50px;
    text-align:         center;
    background-color:   #aabbcc;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.exercisiocontent {
    margin-left:        2%; 
    padding-top:        5px; 
    padding-bottom:     5px;
    width:              96%;
    border-radius:      5px;
    background-color:   #aabbcc;
    border-width:       2px;
    border-style:       solid;
    border-color:       gray white white gray;
}

.exsource {
    font-size:          18px;
    font-weight:        bold;
    text-align:         left;
    padding:            5px;
    background-color:   #00a0a0;
    color:              yellow;
    border-style:       solid;
    border-width:       1px;
    border-color:       grey white white grey;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.externallookupbutton {
    position:           relative;
    top:                6px;
    margin-right:       10px;
    width:              35px;
    height:             35px;
    background:         url('../pics/translator.png') no-repeat center center; 
    background-size:    26px 26px;
    background-position: center;
    background-color:   lightgreen;
    cursor:             pointer;
    border-radius:      5px;
}

.eyebutton {
    border-radius:      5px;
    border-style:       solid;
    border-width:       1px;
    border-color:       white grey grey white;
    box-shadow:         3px 3px 3px grey;
    cursor:             pointer;
}

.eyebutton:hover {
    box-shadow:         0px 0px 0px grey;
}

.falsosamigos {
    background-image:   url('../pics/gridbackground.png'); 
    background-size:    cover;
    transition:         opacity 1s, left 1s; 
    border-radius:      10px;
    opacity:            1.0;
    visibility:         visible;
    position:           fixed;
    top:                10%;
    left:               100%;
    width:              50%;
    z-index:            0;
    border:             2px solid black; 
    color:              navy;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38)
}

.falsosamigoscontent {
    width:              100%;
    max-height:         400px;
    overflow-y:         scroll;
}

.falsosamigostable {
    width:              100%;
    background-color:   #808080;
    color:              white;
    font-weight:        bold;
    font-style:         italic;
}

.finddoublebutton {
    visibility:         hidden;
    position:           absolute;
    bottom:             185px;
    left:               10px;
    width:              50px;
    height:             50px;
    border-radius:      25px;
    font-size:          9px;
    text-align:         center;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38)
}

.firstline {
    float:              left;
    padding-right:      10px;
    padding-bottom:     10px;
    filter:             drop-shadow(2px 2px 2px #222);
}

.font_11px {
    font-size:      9px;
    width:          65px;
    max-width:      65px;
    text-overflow:  ellipsis;
    height:         130px;
    border-top:     2px solid grey;
    border-left:    2px solid grey;
    border-right:   2px solid black;
    border-bottom:  2px solid black;
}

.fontgreen {
    color:              green;
    cursor:             pointer;
}

.fontnavy {
    color:              navy;
}

.globe {
    width:              36px;
}

.gcontent {
    color:              navy;
    font-style:         italic;
    font-weight:        bold;
    text-shadow:        4px 4px 6px #202020;
}

.globalinputhelpercontainerhidden {
    transition:         left .5s;
    width:              90%;
    height:             40px;
    position:           absolute;
    bottom:             10px;
    left:               -85%;
    background-color:   #e0e0e0;
    background-image:   url('../pics/gridbackground.png');
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-style:       solid;
    border-width:       1px;
    border-color:       grey white white grey;    
}

.globalinputhelpercontainervisible {
    transition:         left 1s;
    width:              90%;
    height:             40px;
    position:           absolute;
    bottom:             10px;
    left:               -1px;
    background-color:   #e0e0e0;
    background-image:   url('../pics/gridbackground.png');
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-style:       solid;
    border-width:       1px;
    border-color:       grey white white grey;    
}

.grammabookcontent {
    margin-left:        10px;
    height:             95%;
    max-height:         95%;
    overflow-y:         auto;
}

.grammabooktable {
    height:             100%;
    width:              100%;
}

.grammabookindex {
    border-right:       2px solid white;
    background-color:   #2fbdff;
    height:             95%;
    max-height:         95%;
    overflow-y:         auto;
    width:              270px;
}

.grammarbutton {
    background:         #eee url('../pics/lernen.png') no-repeat top left; 
    margin-right:       10px;
    background-size:    20px 20px;
    width:              115px;
    height:             30px;
    margin-right:       15px;
    margin-top:         5px;
    border-radius:      5px;
}

.grammacontainer {
    background-image:   url('../pics/gridbackground.png'); 
    position:           absolute;
    top:                0px;
    left:               -100%;
    transition:         left 1s;
    width:              97%;
    height:             97%;
    border:             2px solid black;
    border-radius:      10px;
    overflow:           hidden;
    background-color:   #abcdef;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.grammabook {
/*    position:           absolute;
    top:                160px;
    right:              25px;*/
    margin-top:         5px;
    margin-bottom:      5px;
    margin-left:        2px;
    border-width:       1px;
    border-style:       solid;
    border-color:       white gray gray white;
    border-radius:      10px;
    width:              50px;
    height:             50px;
    text-align:         center;
    background-color:   #aabbcc;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.grama_resolvebutton {
    background-image: url('../pics/resolve.png'); /* 16px x 16px */
    background-repeat: no-repeat;
    background-position: 8px 2px;
    width:              120px;
    border: none;         
    border-radius: 14px;
    cursor: pointer;        
    height: 28px;           
    padding-left: 28px;     
    vertical-align: middle; 
    box-shadow: 3px 3px 3px hsl(0deg 0% 0% / 0.38);
}

.grama_resolvebutton:focus {
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);   
    border-width:       2px;
    border-style:       solid;
    border-color:       hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5);
}

.grama_contbutton {
    background-image: url('../pics/grama_continue.png'); /* 16px x 16px */
    background-repeat: no-repeat;
    background-position: 8px 2px;
    width:              120px;
    border: none;         
    border-radius: 14px;
    cursor: pointer;        
    height: 28px;           
    padding-left: 28px;     
    vertical-align: middle; 
    box-shadow: 3px 3px 3px hsl(0deg 0% 0% / 0.38);
}

.grama_contbutton:focus {
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);   
    border-width:       2px;
    border-style:       solid;
    border-color:       hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5);
}

.grama_savebutton {
    background-image: url('../pics/save.png'); /* 16px x 16px */
    background-repeat: no-repeat;
    background-position: 8px 2px;
    border: none;         
    border-radius: 14px;
    min-width:  100px;
    cursor: pointer;        
    height: 28px;           
    padding-left: 28px;     
    vertical-align: middle; 
    box-shadow: 3px 3px 3px hsl(0deg 0% 0% / 0.38);
}

.grama_savebutton:focus {
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);   
    border-width:       2px;
    border-style:       solid;
    border-color:       hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5);
}

.grama_openbutton {
    background-image:       url('../pics/open.png'); /* 16px x 16px */
    background-repeat:      no-repeat;
    background-position:    8px 2px;
    border:                 none;         
    border-radius:          14px;
    min-width:              40px;
    cursor:                 pointer;        
    height:                 28px;           
    padding-left:           28px;     
    vertical-align:         middle; 
    box-shadow:             3px 3px 3px hsl(0deg 0% 0% / 0.38);
    float:                  right;
}

.grama_openbutton:focus {
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);   
    border-width:       2px;
    border-style:       solid;
    border-color:       hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5);
}

.greenyellow {
    background-color:   green;
    color:              yellow;
}

.headlinecontainer {
/*     overflow-x:         auto; */
    padding-left:       20px;
    padding-right:      20px; 
    padding-bottom:     20px;
/*     min-width:          760px; */
    max-width:          80%;
    background:         #f6ff39;
    border:             5px solid navy;
    border-radius:      10px;
    box-shadow:         10px 15px 10px hsl(0deg 0% 0% / 0.38);
    opacity:            0.0;
    visibility:         hidden;
    transition:         all 1s;
}

.header {
    font-weight:        bold;
    font-size:          28px;
    text-shadow:        4px 4px 6px #404040;
}

.headercontos {
    background-image:   linear-gradient(to left, lightgreen, #408040);
    border-radius:      10px;
    line-height:        48px;
    padding-left:       25px;
    height:             48px;
    background-color:   #408040;
    color:              white;
    font-size:          26px;
    padding-left:       20px;
}

.header_ex1 {
    line-height:        48px;
    padding-left:       25px;
/*     height:             48px; */
    background-color:   #c0c0c0;
    color:              white;
    font-size:          26px;
    padding-left:       20px;
    text-shadow:        2px 2px 2px grey;
    background-image:   linear-gradient(to left, #e0e0e0, #606060);
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-radius:      5px;
}

.header_ex1_b2 {
    width:              100%;
    line-height:        48px;
    padding-left:       25px;
    height:             48px;
    background-color:   #c0c0c0;
    color:              white;
    font-size:          26px;
    padding-left:       20px;
    text-shadow:        2px 2px 2px grey;
    background-image:   linear-gradient(to right, #e0e0e0, #606060);
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-radius:      5px;
}

.headline_L1 {
    padding-left:       25px;
    width:              100%;
    height:             32px;
    background-color:   #ff9300;
    border-radius:      5px;
    color:              wheat;
    font-size:          26px;
    padding-right:      20px;
    text-shadow:        2px 2px 5px black;
    background-image:   linear-gradient(to left, #ff9300, yellow);
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-radius:      5px;
}

.headline_L2 {
    padding-left:       25px;
    width:              100%;
    height:             32px;
    background-color:   #6060ff;
    border-radius:      5px;
    color:              wheat;
    font-size:          26px;
    padding-right:      20px;
    background-image:   linear-gradient(to right, lightblue, #6060ff);
    text-shadow:        2px 2px 5px black;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}


.headline {
    text-align:         center;
    box-shadow:         10px 15px 10px hsl(0deg 0% 0% / 0.38);
    border-radius:      5px;
    padding:            3px;
    background:         #FF9300;
    font-size:          32px;
    color:              white;
    font-weight:        bold;
    text-decoration:    underline;
    font-style:         italic;
    text-shadow:        3px 4px hsl(0deg 0% 0% / 0.38);
    font-family:        'Montserrat Alternates', sans-serif;
    letter-spacing:     .05em;
}

.helpimg {
    width:              32px;
    height:             32px;
    cursor:             pointer;
    filter:             drop-shadow(5px 5px 5px #222);
    margin-left:        15px;
}

.highlight {
    background-color:   #c0c000;
    color:              black;
    padding:            3px;
    border-radius:      3px;
    line-height:        24px;
}

.hitcountcontainer {
    margin-left:         2%;
    margin-right:        2%;
    margin-top:          2px;
    border-width:        2px;
}

.homeworkcontainer {
    background-image:   url('../pics/gridbackground.png'); 
    position:           absolute;
    top:                0px;
    left:               -100%;
    transition:         left 1s;
    width:              97%;
    height:             97%;
    border:             2px solid black;
    border-radius:      10px;
    overflow:           hidden;
    background-color:   #abcdef;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.homeworkicon {
    width:              25px;
    margin-left:        10px;
    position:           relative;
    top:                2px;
}

.hr_L1 {
    border-color:       #ff9300;
    filter:             drop-shadow(2px 2px 2px hsl(0deg 0% 0% / 0.38));
}

.hr_L2 {
    border-color:       #6060ff;
    filter:             drop-shadow(2px 2px 2px hsl(0deg 0% 0% / 0.38));
}

.hr_mono {
    border-color:       #c0c0c0;
    filter:             drop-shadow(2px 2px 2px hsl(0deg 0% 0% / 0.38));
}

.hr_b2 {
    border-color:       #c372a9;
    filter:             drop-shadow(2px 2px 2px hsl(0deg 0% 0% / 0.38));
}

.iccontainer {
    background-image:   url('../pics/gridbackground.png'); 
    transition: opacity 1s;
    border-radius: 10px;
    position:   absolute;
    top:        100px;
    left:       -100%;
    width:      50%;
    opacity:    0.0;
    height:     450px;
}
    
.iconbutton {
    margin-top:         10px;
    padding:            5px;
    border:             1px solid black; 
    border-radius:      3px;
    background-color:   #abcdef;
    width:              140px;
    height:             35px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.inc_dec_font {
    width:              35px;
    height:             25px;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
    font-size:          14px;
    cursor:             pointer;
}

.infobox {
    appearance:         none;
    position:           relative;
    top:                0px;
    color:              black;
    line-height:        28px;
    background-color:   white;
    margin:             10px;
    margin-top:         40px;
    border-radius:      5px;
    border-style:       solid;
    border-width:       3px;
    border-color:       green lightgreen lightgreen green;
    padding:            10px;
    text-align:         justify;
    font-style:         italic;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);'
}


.infobox:after {
    content:            "⛱";
    font-family:        Helvetic;
    font-size:          32px;
    font-style:         normal;
    position:           absolute;
    top:                -32px;
    right:               5px;
    opacity:            1;
    color:              #ff9300;
}

.infobox_b2 {
    appearance:         none;
    position:           relative;
    top:                0px;
    color:              black;
    line-height:        28px;
    background-color:   white;
    margin:             10px;
    margin-top:         40px;
    border-radius:      5px;
    border-style:       solid;
    border-width:       3px;
    border-color:       #a15086 #c372a9 #c372a9 #a15086;
    padding:            10px;
    text-align:         justify;
    font-style:         italic;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);'
}


.infobox_b2:after {
    content:            "⛱";
    font-family:        Helvetic;
    font-size:          32px;
    font-style:         normal;
    position:           absolute;
    top:                -32px;
    right:               5px;
    opacity:            1;
    color:              #c372a9;
}


.infobox_L2 {
    appearance:         none;
    position:           relative;
    top:                0px;
    color:              black;
    line-height:        28px;
    background-color:   #e2eff7;
    background-image:   linear-gradient(to bottom, #c3ced5, #e2eff7);
    margin:             10px;
    margin-top:         40px;
    border-radius:      5px;
    border-style:       solid;
    border-width:       3px;
    border-color:       #b1bcc2 #d9e6ee #d9e6ee #b1bcc2;
    padding:            10px;
    text-align:         justify;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.infobox_L2:after {
    content:            "⛱";
    font-family:        Helvetic;
    font-size:          32px;
    font-style:         normal;
    position:           absolute;
    top:                -32px;
    right:               5px;
    opacity:            1;
    color:              red;
}

.infobox_L2_pen {
    appearance:         none;
    position:           relative;
    top:                0px;
    color:              black;
    line-height:        28px;
    background-color:   #e2eff7;
    margin:             10px;
    margin-top:         40px;
    border-radius:      5px;
    border-style:       solid;
    border-width:       3px;
    border-color:       #b1bcc2 #d9e6ee #d9e6ee #b1bcc2;
    padding:            10px;
    text-align:         justify;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.infobox_L2_pen:after {
    content:            "🖋";
    font-family:        Helvetic;
    font-size:          32px;
    font-style:         normal;
    position:           absolute;
    top:                -32px;
    right:               5px;
    opacity:            1;
    color:              red;
}

.infobox_table {
    appearance:         none;
    position:           relative;
    top:                0px;
    color:              black;
    line-height:        28px;
    background-color:   white;
    margin:             10px;
    margin-top:         25px;
    border-radius:      5px;
    border-style:       solid;
    border-width:       3px;
    border-color:       green lightgreen lightgreen green;
    padding:            10px;
    text-align:         justify;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);'
}


.infobox_table:after {
/* 🏖   ⛱☂ */
    content:            "⛱";
    font-family:        Helvetic;
    font-size:          36px;
    font-style:         normal;
    position:           absolute;
    top:                -28px;
    right:               5px;
    opacity:            1;
    color:              #ff9300;
}

.infocontainer {
    transition:         all 1s;
    position:           absolute; 
    top:                240px;
    width:              30%;
    margin-left:        25%;
    text-align:         left;
    padding:            10px;
    visibility:         hidden; 
    border:             1px solid navy; 
    background:         navy; 
    color:              white;
    border-radius:      5px;
    opacity:            0.9;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    text-align:         justify;
    opacity:            0.0
}

.innerframe {
    width:              100%;
    border:             2px solid navy;
    background:         #f6ff89;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38)
}

.indexcontainer {
    position:           absolute;
    transition:         top .5s;
    top:                50px;
    left:               10px;
}

.indexwindow {
    transition:         left .7s;
    position:           absolute;
    left:               -560px;
    top:                2%;
    height:             90%;
    border-style:       solid;
    border-width:       2px;
    border-color:       grey white white grey;
    width:              510px;
    background-color:   blue;
    overflow:           hidden;
    padding:            20px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.infotext::after {
  content:              " ";
  position:             absolute;
  bottom:               100%;  /* At the top of the tooltip */
  left:                 20;
  margin-left:          -5px;
  border-width:         8px;
  border-style:         solid;
  border-color:         transparent transparent navy transparent;
}

.inputhelper {
    line-height:        19px;
}

.inputhelperwrapper {
    margin:             2%; 
    border-radius:      5px; 
    width:              96%; 
    border:             1px solid black;
    background:         #e0e0e0; 
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.insertbutton {
    background:         url('../pics/favorit.png') no-repeat center center; 
    background-size:    20px 20px;
    width:              25px;
    height:             25px;
    border-radius:      5px;
    cursor:             pointer;
}

.translateinputhelperwrapper {
    margin:             2%; 
    border-radius:      5px; 
    width:              94%; 
    border:             1px solid black;
    background:         #e0e0e0; 
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    padding:            5px;
}

.inputng {
   cursor:              normal;
   font-weight:         normal;
   color:               navy;
   border:              1px solid #c0c0c0;
   font-size:           16px;
   height:              24px;
   text-align:          center;
   resize:              none;
   border-radius:       5px;
   margin-top:          3px;
   box-shadow:          2px 2px 1px hsl(0deg 0% 0% / 0.38);
}

.inputng_left {
   cursor:              normal;
   font-weight:         normal;
   color:               navy;
   border:              1px solid #c0c0c0;
   font-size:           16px;
   height:              24px;
   text-align:          left;
   resize:              none;
   border-radius:       5px;
   margin-top:          3px;
   box-shadow:          2px 2px 1px hsl(0deg 0% 0% / 0.38);
}

.inputng_left95 {
   cursor:              normal;
   font-weight:         normal;
   color:               navy;
   border:              1px solid #c0c0c0;
   font-size:           16px;
   height:              24px;
   text-align:          left;
   width:               95%;
   resize:              none;
   border-radius:       5px;
   margin-top:          3px;
   box-shadow:          2px 2px 1px hsl(0deg 0% 0% / 0.38);
}

.individualselect {
    background-image:   url('../pics/gridbackground.png');
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    width:              30%;
    height:             280px;
    position:           absolute;
    top:                100px;
    left:               -200;
    border:             1px solid black;
    visibility:         hidden;
    border-radius:      10px;
}

.irfilter {
    width:              95%;
    border-style:       solid;
    border-width:       2px;
    border-color:       grey black black grey;
    border-radius:      5px;
    padding:            5px;
    margin-left:        2%;
    font-size:          16px;
    font-weight:        normal;
    margin-top:         10px;
    background-color:   #43d841;
}

.ir_filter_label_active {
    width:              5%;
    border-bottom:      2px solid grey;
    border-right:       2px solid grey;
    border-left:        2px solid black;
    border-top:         2px solid black;
    color:              yellow;
    background-color:   green;
    cursor:             pointer;
    text-align:         center;
}

.ir_filter_label_inactive {
    width:              5%;
    border-top:         2px solid grey;
    border-left:        2px solid grey;
    border-right:       2px solid black;
    border-bottom:      2px solid black;
    color:              white;
    background-color:   #c0c0c0;
    cursor:             pointer;
    text-align:         center;
}

.irrmarker {
    font-family:        serif;
    color:              #37aa61;
    font-weight:        bold;
    font-style:         italic;
    background-color:   yellow;
    padding-left:       5px;
    padding-right:      5px;
    border-radius:      5px;
    border-width:       1px;
    border-style:       solid;
    border-color:       white grey grey white;
}
.irregularverbwindow {
    z-index:            2;
    border-top-left-radius: 5px;
    border-top-right-radius:5px;
    transition:         top 1s;
    font-size:          32px;
    position:           absolute; 
    top:                -100%; 
    visibility:         hidden;
    left:               5%; 
    width:              90%; 
    min-width:          800px;
    background-image:   url('../pics/gridbackground.png'); 
    background-size:    cover; 
    border:             2px solid black;
    padding-bottom:     20px;
    border-radius:      10px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38)
}

.irregularverbcontainer {
    border-radius:      10px;
    width:              98%;
    max-width:          98%;
    min-height:         320px;
    overflow-x:         auto;
    background-image:   url('../pics/gridbackground.png');
    border-width:       1px;
    border-style:       solid;
    border-color:       white gray gray white;
    margin:             2px;
    margin-left:        1%;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.irvselect {
    font-size:          16px;
    max-height:         70px;
}

.iv_table {
    margin-top:         10px;
    line-height:        28px;
    margin-bottom:      10px;
    font-size:          19px;
    color:              navy;
    background-color:   #e0e0e0;
    width:              96%;
    margin-left:        2%;
    padding:            0;
}

.iv_headline1_cell_1 {
    font-weight:        bold;
    padding-left:       10px;
    border-bottom:      1px solid black;
    border-right:       1px solid black;
}

.iv_headline1_cell_2 {
    font-weight:        bold;
    padding-left:       10px;
    border-width:       1px;
    border-style:       solid;
    border-color:       black black black black;
}

.iv_headline1_cell_3 {
    font-weight:        bold;
    padding-left:       10px;
    border-width:       1px;
    border-style:       solid;
    border-color:       black black black black;
}

.iv_headline2_cell_1 {
    border-width:       1px;
    border-style:       solid;
    border-color:       black black black transparent;
    padding-left:       10px;
    background-color:   #26af09;
    color:              yellow;
    font-weight:        bold;
}

.iv_headline2_cell_2 {
    border-width:       1px;
    border-style:       solid;
    border-color:       black black black black;
    padding-left:       10px;
}

.iv_headline2_cell_3 {
    border-width:       1px;
    border-style:       solid;
    border-color:       black black black black;
    padding-left:       10px;
}

.iv_table_lastcell {
    padding-left:       10px;
    border-width:       1px;
    border-style:       solid;
    border-color:       black black black black;
}

.iv_lastrow_cell_1 {
    padding-left:       10px;
    border-top:         1px solid black; 
    border-right:       1px solid black;
    border-left:        1px solid transparent;
    background-color:   #26af09;
    color:              yellow;
    font-weight:        bold;
}

.iv_lastrow_cell_2 {
    padding-left:       10px;
    border-left:        1px solid black;
    border-top:         1px solid black; 
    border-right:       1px solid black;
    border-bottom:      1px solid black;
}

.iv_lastrow_cell_3 {
    padding-left:       10px;
    border-left:        1px solid black;
    border-top:         1px solid black;
    border-bottom:      1px solid black;
}

.cstoragewindow {
    background-image:   url('../pics/gridbackground.png'); 
    transition:         left 1.5s; 
    position:           absolute;
    top:                20%;
    left:               -100%;
    border-radius:      10px; 
    border:             2px solid black;
    text-align:         left;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    width:              400px;
    min-height:         250px;
    max-height:         250px;
}

.klecks_L1_float {
    float:              left;
    width:              160px;
    height:             160px;
    filter:             drop-shadow(5px 5px 5px hsl(0deg 0% 0% / 0.38));
}

.klecks_L1 {
    width:              160px;
    height:             160px;
    filter:             drop-shadow(5px 5px 5px hsl(0deg 0% 0% / 0.38));
}

.klecks_L2 {
    float:              left;
    width:              150px;
    height:             150px;
    filter:             drop-shadow(5px 5px 5px hsl(0deg 0% 0% / 0.38));
}

.lh_4px {
    line-height:        1px;
}

.L_1 {
    background-image:   url('../pics/gridbackground.png'); 
    transition:         left 1.5s; 
    position:           absolute; 
    top:                100px; 
    left:               -1000px; 
    border-radius:      10px; 
    border:             2px solid black;
    text-align:         left;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    min-width:          450px;
    width:              40%;
    min-height:         200px;
    color:              navy   
}

.L_3 {
    transition:         all .5s;
    cursor:             pointer;
    width:              30px;
    filter:             drop-shadow(2px 2px 2px #222);
}

.L_3:hover {
    transform:          scale(1.3);
}

.L_4 {
    transition:         all .5s;
    cursor:             pointer;
    opacity:            1.0;
    width:              30px;
}

.L_4:hover {
    transform:          scale(1.3);
}

.L_5 {
    transition:         all .5s;
    cursor:             pointer;
    opacity:            1.0;
    width:              30px;
}

.L_5:hover {
    transform:          scale(1.3);
}

.L_7 {
    font-weight:        bold; 
    font-size:          24px; 
    font-style:         italic; 
    text-decoration:    underline; 
    color:              navy;
}

.L_8 {
    width:              100%; 
    text-align:         right; 
    color:              navy;
    font-size:          12px;
    padding:            10px; 
    font-weight:        bold;
}

.L_9 {
    font-weight:        bold; 
    font-size:          24px; 
    font-style:         italic; 
    text-decoration:    underline; 
    color:              navy;
}

.L_11 {
    width:              100%; 
    text-align:         right; 
    color:              navy;
    font-size:          12px;
    padding:            10px; 
    font-weight:        bold;
}

.L_12 {
    font-size:          24px;
    color:              black;
    font-weight:        bold;
    font-style:         italic;
    text-decoration:    underline;
}

.L_14 {
    font-size:          14px;
    font-weight:        bold;
    font-style:         italic;
    color:              yellow;
}

.L_15__L16 {
    font-weight:        bold;
    color:              navy;
}

.pre_L_17 {
    width:              20px;
}

.L_17_18 {
    color:              navy;
    font-weight:        bold;
}

.L_19 {
    background:         #eee url('../pics/add.png') no-repeat center left; 
    background-position-x: 5px;
    margin-left:        10px;
    background-size:    15px 15px;
    font-size:          13px;
    width:              105px;
    height:             30px;
    border-radius:      15px;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.L_20 {
    background:         #eee url('../pics/notice.png') no-repeat center left; 
    background-position-x: 5px;
    background-size:    20px 20px;
    width:              105px;
    height:             30px;   
    border-radius:      15px;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.L_21 {
    background:         #eee url('../pics/trash-can.png') no-repeat center left; 
    background-position-x: 5px;
    margin-right:       10px;
    background-size:    20px 20px;
    width:              105px;
    height:             30px;
    border-radius:      15px;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.L_22 {
    color:              navy;
    font-weight:        bold;
}

.L_22_container {
    width:              20px;
    padding-right:      15px;
}

.L_26 {
    font-size:          24px;
    color:              navy;
    text-align:         center;
    width:              100%;
    text-decoration:    underline;
    font-style:         italic;
    font-weight:        bold;
}

.L_27 {
    width:              95%;
    border:             none transparent;
    outline:            none;
}

.L_28_29 {
    width:              100%;
    border-width:       1px;
    border-style:       solid;
    border-color:       black white white gray;
    outline:            none;
}

.L_41 {
    width:              95%;
    height:             40px;
    text-align:         center;
    background-color:   #ff9300;
    border-radius:      5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    font-size:          32px;
    color:              white;
    font-weight:        bold;
    font-style:         italic;
    text-decoration:    underline;
    border-top:         3px solid #4040f0; 
    border-left:        3px solid #4040f0; 
    border-right:       3px solid blue; 
    border-bottom:      3px solid blue;
}

.L_42 {
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    padding:            10px;
    width:              90%;
    border-radius:      5px;
    border-left:        1px solid #808080;
    border-top:         1px solid #e0e0e0;
    border-right:       1px solid #808080; 
    opacity:            1.0; 
    background:         lightgray;
    border-top:         1px solid #808080;
}

.L_51 {
    width:              100%;
    height:             30px;
    background-color:   yellow;
    text-align:         center;
    font-size:          24px;
    color:              red;
}

.L_107 {
    width:              75px;
    height:             25px;
    /*position:           absolute;
    bottom:             5px;
    right:              10px;*/
    margin-right:       5px;
    border-radius:      13px;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.L_107:focus {
    box-shadow:         0 0 0 hsl(0deg 0% 0% / 0.38);
}

.L_107_1  {
    position:           absolute;
    bottom:             5px;
    right:              5px;
}

.L_108 {
    width:              75px;
    height:             25px;
    position:           absolute;
    bottom:             5px;
    right:              10px;
    border-radius:      13px;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.L_108:focus {
    box-shadow:         0 0 0 hsl(0deg 0% 0% / 0.38);   
}

.L_111 {
    width:              75px;
    height:             25px;
    position:           absolute;
    bottom:             5px;
    right:              10px;
    border-radius:      13px;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.L_112 {
    width:              75px;
    height:             25px;
    position:           absolute;
    bottom:             5px;
    right:              10px;
    border-radius:      13px;
    cursor:             pointer;
}

.L_115 {
    border-radius:      3px;
    width:              25px;
    height:             25px;
    background:         url('../pics/add.png') center center no-repeat;
    background-size:    15px 15px;
    cursor:             pointer;
}

.L_149 {
    width:              93%;
    border:             none transparent;
    outline:            none;
}

.L_150 {
    width:              95%;
    background-color:   green;
    text-align:         center;
    padding:            5px;
    height:             20px;
    border-radius:      5px;
}

.L_151 {
    width:              95%;
    background-color:   yellow;
    text-align:         center;
    padding:            5px;
    height:             20px;
    border-radius:      5px;
}

.L_153 {
    margin-left:        10px;
    width:              70px;
    height:             30px;
    border-radius:      15px;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
}

.L_153:focus {
   box-shadow:          0px 0px 0px hsl(0deg 0% 0% / 0.38);   
}

.L_165 {
    font-size:          20px;
    color:              yellow;
    font-weight:        bold;
}

.L_168 {
    border-radius:      5px;
    position:           relative;
    top:                -25px;
    color:              yellow;
    left:               5px;
    width:              80px;
    text-align:         center;
    background-color:   #208080;
}

.L_188 {
    font-size:          18px;
    color:              navy;
}

.L_192 {
    border-radius:      13px;
    width:              90px;
    height:             25px;
    /*position:           absolute;
    bottom:             5px;
    right:              5px;*/
    cursor:             pointer;
}

.L_192_wrapper {
    width:              80px;
    height:             30px;
    border-radius:      5px;
    width:              100%;
    text-align:         right;
    margin-top:         3px;
}

.helpcontainer {
    position:           absolute;
    top:                5px;
    left:               10px;
}

.initsearchbutton {
/*    position:           absolute;
    top:                400px;
    right:              25px;*/
    margin-top:         5px;
    margin-left:        2px;
    border-width:       1px;
    border-style:       solid;
    border-color:       white gray gray white;
    border-radius:      10px;
    width:              50px;
    height:             50px;
    text-align:         center;
    background-color:   #aabbcc;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.langselect {
    transition:         0.5s;
    position:           fixed;
    top:                0px;
    left:               25px;
    overflow-x:         hidden;
    overflow-y:         hidden;
    line-height:        5px;
    width:              60px;
    max-height:         35px;
    min-height:         35px;
    margin:             10px;
    z-index:            5;
}

.langselect:hover {
    max-height:         130px;
}

.lessonid {
    display:            inline;
    position:           relative;
    top:                10px;
    left:               3%;
    border-radius:      4px;
    background-color:   blue;
    padding-left:       10px;
    padding-right:      10px;
    font-size:          14px;
    font-weight:        bold;
    height:             30px;
    color:              white;
    text-decoration:    underline;
}

.lightgrey {
    color:              #808080;
    font-weight:        bold;
}

.limpalista {
    width:              25px;
    height:             25px;
    margin-left:        5px;
    margin-right:       5px;
    margin-top:         5px;
    background-image:   url('../pics/trash-can.png');
    background-size:    cover;
    border-radius:      3px;
}

.lineheight48 {
    line-height:        48px;
}

.listcontainer {
    padding:            10px;
    table-layout:       fixed; 
    margin:             2%;
    width:              96%; 
    border:             1px solid black;
    border-radius:      5px; 
    background:         #e0e0e0; 
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.listtext {
    margin-left:        10px;
    width:              90%;
}

.maxwidth {
    width:              100%;
}

.maxwidth_audionav {
    width:              100%;
    border:             1px solid black;
    border-radius:      5px;
    background-color:   #abcdef;
}

.menubarminiicon {
    margin-left:        5px;
    margin-right:       5px;
    margin-top:         2px;
    float:              left;
    width:              15px;
}

.menubar {
    width:              100%;
    height:             20px;
    background-color:   #f0f0f0;
    font-size:          10px;
    color:              black;    
}

.message {
    width:              96%;
    margin-left:        2%;
    padding:            5px;
    height:             0px;
    margin-top:         5px;
}

.messagewindowfadein {
  transition:       opacity .4s, top 1.0s;
  width:            38%;
  margin-left:      31%;
  position:         fixed;
  top:              20%;
  padding-top:      25px;
  text-align:       center;
  border:           1px solid black;
  min-height:       50px;
  background-color: yellow;
  color:            black;
  font-size:        18px;
  z-index:          1000;
  border-radius:    5px;
  box-shadow:       5px 5px 5px hsl(0deg 0% 0% / 0.38);
  opacity:          1.0;
  visibility:       visible;
}

.messagewindow_handy {
  transition:       opacity .4s, top 1.0s;
  width:            97%;
  left:             1%;
  position:         fixed;
  top:              5%;
  padding-top:      25px;
  text-align:       center;
  border:           1px solid black;
  min-height:       50px;
  background-color: yellow;
  color:            black;
  font-size:        18px;
  z-index:          1000;
  border-radius:    5px;
  box-shadow:       5px 5px 5px hsl(0deg 0% 0% / 0.38);
  opacity:          1.0;
  visibility:       visible;
}

.messagewindow {
  transition:       opacity .4s, top 1.0s;
  width:            90%;
  margin-left:      5%;
  position:         fixed;
  top:              5%;
  padding-top:      25px;
  text-align:       center;
  border:           1px solid black;
  min-height:       50px;
  background-color: yellow;
  color:            black;
  font-size:        18px;
  z-index:          1000;
  border-radius:    5px;
  box-shadow:       5px 5px 5px hsl(0deg 0% 0% / 0.38);
  visibility:       hidden;
  opacity:          0.0;
}

/*.onlinedictionary {
  transition:       top 0.5s;
  position:         absolute;
  top:              -1200px;
  left:             10%;
  width:            80%;
  height:           90%;
  border-radius:    5px;
  border:           1px solid black;
  background-color: yellow;
  box-shadow:       5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.onlinedictionarycontent {
  width:            99.9%;
  height:           95%;
}*/

.solutionwindowfadein {
  transition:       opacity .4s, top 1.0s;
  width:            64%;
  margin-left:      18%;
  position:         fixed;
  top:              100px;
  padding-top:      25px;
  text-align:       center;
  border-style:     solid;
  border-width:     3px;
  border-color:     grey white white grey;
  min-height:       50px;
  background-color: #ccc2b9;
  color:            black;
  font-size:        18px;
  z-index:          1000;
  border-radius:    5px;
  box-shadow:       5px 5px 5px hsl(0deg 0% 0% / 0.38);
  opacity:          1.0;
  visibility:       visible;
}

.solutionwindow {
  transition:       opacity .4s, top 1.0s;
  width:            50%;
  margin-left:      25%;
  position:         fixed;
  top:              10%;
  padding-top:      25px;
  text-align:       center;
  border-style:     solid;
  border-width:     3px;
  border-color:     grey white white grey;
  min-height:       50px;
  background-color: #ccc2b9;
  color:            black;
  font-size:        18px;
  z-index:          1000;
  border-radius:    5px;
  box-shadow:       5px 5px 5px hsl(0deg 0% 0% / 0.38);
  visibility:       hidden;
  opacity:          0.0;
}

.metercontainer {
    border-width:       1px;
    border-style:       solid;
    border-color:       gray white white gray;
    float:              right;
    width:              70%;
    height:             12px;
    margin-right:       5px
}

.meter {
    width:              0%;
    background-color:   white;
    height:             12px;
    text-align:         right;
    font-size:          10px;
    font-weight:        bold;
}

.minibookcontainer {
    border:             1px solid black; 
    background-color:   #4c7b4f;
    margin-top:         10px;
    border-radius:      5px;
    border-top:         2px solid #404040;
    border-left:        2px solid #404040;
    border-right:       2px solid lightgrey;
    border-bottom:      2px solid lightgrey;
    padding:            0px;
    min-width:          155px;
    max-width:          155px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.closeimage {
    width:              20px;
    padding-right:      5px;
}

.miniicon {
    width:              20px;
    padding-right:      5px;
}

.miniinfo {
    cursor:     pointer;
    width:      16px;
    height:     16px;
    filter:     drop-shadow(2px 2px 2px #222);
}

.mycheckbox {
    appearance:         none;
    position:           relative;
    top:                0px;
    width:              15px;
    height:             15px;
    border-width:       1px;
    border-style:       solid;
    border-color:       white grey grey white;
    padding:            5px;
    background-color:   #c0c0c0;
    box-shadow:         2px 2px 2px hsl(0deg 0% 0% / 0.38);
    transition:         all .5s;
    cursor:             pointer;
}

.mycheckbox:checked {
    border-color:       grey white white grey;
    background-color:   green;
    box-shadow:         none;  
}

.mycheckbox:checked:after {
    content:            "\2713";
    font-family:        Helvetic;
    font-size:          20px;
    position:           absolute;
    top:                -8px;
    left:               2px;
    opacity:            1;
}

.mycheckbox:after {
    content:            "\2713";
    font-family:        Helvetic;
    font-size:          20px;
    position:           absolute;
    top:                -8px;
    left:               0px;
    opacity:            0;
    transition:         all .5s;
}

.navy {
    color:              navy;
}

.noticewrapper {
    width:                  100%;
    height:                 100%;
    text-align:             center;
}

.noticecontainer {
    height:             100%;
}

.noticetext {
    width:              98%;
    height:             100%;
    resize:             none;
    margin-top:         5px;
    border-width:       2px;
    border-style:       solid;
    border-color:       gray white white gray;
}

.notice {
    background-image:   url('../pics/gridbackground.png'); 
    background-size:    cover;
    transition:         opacity 1s; 
    border-radius:      10px;
    opacity:            0.0;
    visibility:         hidden;
    position:           fixed;
    top:                10%;
    left:               25%;
    width:              50%;
    height:             60%;
    border:             2px solid black; 
    color:              navy;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.noticetable {
    margin-top:         8px;
    margin-left:        5px;
    margin-right:       5px;
    margin-bottom:      5px;
    border-radius:      5px;
    border-width:       1px; 
    border-style:       solid;
    border-color:       grey white white grey;
}

.openlista {
    width:              25px;
    height:             25px;
    margin-left:        2px;
    margin-right:       2px;
    background-image:   url('../pics/continue.png');
    background-size:    cover;
    background-color:   lightgreen;
    border-radius:      3px;
}

.padding10 {
    padding-left:       10px;
    padding-right:      10px;
}

.padding5 {
    padding:            5px;
}

.padding5px {
    padding:            5px;
}

.page {
    transition:         opacity 1s; 
    padding:            25px;
    overflow-y:         hidden;
    background:         url('../pics/bandeira_portugal.jpg') no-repeat center center fixed;
    background-size:    cover;
}

.page_mobile {
    transition:         opacity 1s;
    padding:            25px;
    overflow-y:         auto;
    background:         url('../pics/bandeira_portugal.jpg') no-repeat center center fixed;
    background-size:    cover;
}


.pagenrleft {
    width:              100%;
    text-align:         left;
    font-size:          12px;
    font-weight:        normal;
    font-style:         italic;
    color:              #ff983e;    
    filter:             drop-shadow(2px 2px 2px hsl(0deg 0% 0% / 0.38));
}

.pagenrright {
    width:              100%;
    text-align:         right;
    font-size:          12px;
    font-weight:        normal;
    font-style:         italic;
    color:              #ff983e;    
    filter:             drop-shadow(2px 2px 2px hsl(0deg 0% 0% / 0.38));
}

.parser {
    width:              35px;
    height:             35px;
    background-image:   url('../pics/translator.png'); 
    background-size:    cover;
}

.parserwindow {
    transition:         opacity 1s, left 1s;
    position:           absolute;
    top:                30px;
    left:               -100%;
    width:              50%;
    min-width:          600px;
    height:             400px;
    opacity:            0.0;
    border-radius:      10px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border:             1px solid black;
    background-image:   url('../pics/gridbackground.png'); 
    background-size:    cover; 
}

.parsersource {
    width:              96%;
    margin-left:        2%;
    height:             70%;
    margin-top:         2%;
    resize:             none;
}

.parserbutton {
    width:              100px;
    height:             30px;
    border-radius:      15px;
    box-shadow:         0 0 5px hsl(0deg 0% 0% / 0.38);
    margin-right:       2%;
}

.perguntaouterwrapper {
    background-color:   #e0e0e0;
    width:              100%;
    padding:            10px;
    margin-top:         15px;
    line-height:        24px;
    border-radius:      10px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.perguntawrapper {
    width:              95%;
    border-radius:      5px;
    margin:             5px;
    line-height:        25px;
    background-color:   #abcdef;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.perguntaheadline {
    font-size:          20px;
    font-family:        Helvetic;
    font-stretch:       italic;
    font-weight:        bold;
    color:              maroon;
    text-decoration:    underline;
    filter:             drop-shadow(5px 5px 2px);
}

.player {
    width:              100%;
    height:             30px;
    border-radius:      5px;
    position:           relative;
    top:                10px;
}

.portugalmap {
    width:              400px;
    filter:             drop-shadow(5px 5px 5px hsl(0deg 0% 0% / 0.38));
}

.mainplayer {
    width:              100%;
    border-radius:      5px;
}

.playercontrollimage {
    width:              25px;
    height:             25px;
}

.plistwrapper {
    border-width:       2px;
    border-style:       solid;
    border-color:       gray white white gray;
}

.pleasewait {
    font-size:          20px;
    color:              blue;
    font-weight:        bold;
    font-style:         italic;
}

.plistsortindicator {
    opacity:            0.0;
    float:              right;
    margin-right:       15px;
    font-size:          1em;
    cursor:             pointer;
}

.plist {
    border-radius:      5px; 
    border-width:       1px;
    border-style:       solid;
    border-color:       white gray gray white;
    background:         #f0f0f0;
    padding-right:      5px;
    overflow-y:         hidden;
    overflow-x:         auto;
    white-space:        nowrap; 
    margin:             2%; 
    width:              94%; 
    height:             140px;
}

.previousnext {
    border-width:       1px;
    border-style:       solid;
    border-color:       white grey grey white;
    border-radius:      5px;
    background-color:   #c0c0c0;
    text-align:         center;
    padding:            3px;
    font-size:          16px;
    cursor:             pointer;
    width:              45px;
    height:             35px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.previousnext:focus {
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);   
    border-width:       2px;
    border-style:       solid;
    border-color:       hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5);
}

.printcontainer {
    z-index:            3;
    background-image:   url('../pics/gridbackground.png'); 
    background-size:    cover;
    border-radius:      10px;
    position:           absolute;
    top:                10%;
    left:               -100%;
    width:              60%;
    max-width:          900px;
    opacity:            0.0;
    transition:         opacity 1s, left .5s;
    height:             70%;
    max-height:         500px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.printbutton {
    margin-top:         5px;
    margin-bottom:      5px;
    margin-left:        2px;
    border-width:       1px;
    border-style:       solid;
    border-color:       white gray gray white;
    border-radius:      10px;
    width:              50px;
    height:             50px;
    text-align:         center;
    background-color:   #aabbcc;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.printtable {
    width:              97%;
    margin-left:        0px;
    margin-top:         5px;
    border-radius:      5px;
}

.printheadline {
    background-color:   wheat;
    border-width:       1px;
    border-style:       solid;
    border-color:       grey white white grey;
}

.questioncontainer {
    width:              90%;
    min-height:         250px;
}

.questioncontainerBG {
    background-color:   blue;
}

.questionfont {
    font-size:          24px;
    font-weight:        bold;
    color:              yellow;
    border-radius:      5px;
    padding-left:       20px;
    padding-top:        10px;
    padding-bottom:     10px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.questionwrapper2 {
    border-style:       solid;
    border-color:       white grey grey white;
    border-width:       1px;
    background-color:   #abcdef;
    color:              navy;
    border-radius:      5px;
    margin-top:         10px;
    margin-bottom:      5px;
    font-weight:        bold;
    text-align:         center;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);         
}

.questionwrapper {
    border-style:       solid;
    border-color:       white grey grey white;
    border-width:       1px;
    background-color:   red;
    color:              yellow;
    border-radius:      5px;
    width:              120px;
    font-weight:        bold;
    text-align:         center;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
}
.radio {
    width:              10px;
    height:             10px;
    visibility:         hidden;
}

.r1audio {
    width:              0px;
    height:             0px;
    visibility:         hidden;
}

.radiobuffernavy {
    font-size:          12px;
    color:              navy;
    font-weight:        bold;
    font-style:         italic;
}

.radiobufferyellow {
    font-size:          12px;
    color:              yellow;
    font-weight:        bold;
    font-style:         italic;
}

.radiobufferred {
    font-size:          12px;
    color:              red;
    font-weight:        bold;
    font-style:         italic;
}

.radiobutton {
    margin-top:         5px;
    margin-bottom:      5px;
    margin-left:        2px;
    border-width:       1px;
    border-style:       solid;
    border-color:       white gray gray white;
    border-radius:      10px;
    width:              50px;
    height:             50px;
    text-align:         center;
    background-color:   #aabbcc;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.radiocontainer {
    position:           absolute;
    top:                50px;
    left:               -100%;
    transition:         left 1s;
    width:              50%;
    border:             2px solid black;
    border-radius:      10px;
    overflow:           hidden;
    background-color:   #ffff7f;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.radiocontainer_mobile {
    position:           absolute;
    top:                60px;
    left:               -110%;
    transition:         left 1s;
    width:              99%;
    border:             2px solid black;
    border-radius:      10px;
    overflow:           auto;
    background-color:   #ffff7f;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.radiolabel1 {
    display:            inline;
    line-height:        18px;
}

.radiolabel2 {
    font-size:          12px;
    color:              white;
}

.radioplaybutton {
    margin-left:        10px;
    border:             none;
    border-radius:      5px;
    width:              70px;
    cursor:             pointer;
}

.radiostationbutton:hover {
    transform:          scale(1.1);
    border-radius:      10px;
    width:              80px;
    height:             80px;
    margin-top:         10px;
    margin-left:        3%;
    cursor:             pointer;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.radiostationbutton {
    transition:         all .5s;
    border-radius:      10px;
    width:              80px;
    height:             80px;
    margin-top:         10px;
    margin-left:        3%;
    cursor:             pointer;
}

.radiosearchlabel {
    font-size:          16px;
    color:              yellow;
}

.radioinput {
    margin:             5px;
    width:              95%;
}

.radiosearchclear {
    width:              10px;
    height:             10px;
    position:           relative;
    left:               -20px;
    cursor:             pointer;
}

.radiosearchwrapper {
    background-color:   green;
    width:              92%;
    max-width:          92%;
    margin-left:        2.5%;
    border:             1px solid yellow;
    padding:            5px;
    border-radius:      10px;
}

.radiotable {
    width:              95%;
    margin:             10px;
    background-color:   green;
    border-radius:      10px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.radiotablecell {
    width:              60px;
    background-color:   green;
}

.randombutton {
    width:              35px;
    height:             35px;
    float:              right;
    margin-top:         3px;
    margin-right:       10px;
    background-image:   url('../pics/random.png');
    background-size:    cover;
    border-radius:      5px;
}

.redfont {
    color:              #f04040;
    cursor:             pointer;
}

.respostaerrcontainer {
    color:              navy;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
    width:              96%;
    line-height:        25px;
    margin-left:        2%;
    border-width:       2px;
    border-style:       solid;
    border-color:       grey white white grey;
}

.resultbuttontable {
    border-style:       solid;
    border-width:       1px;
    border-color:       white grey grey white;
    background-color:   #c0c0c0;
    width:              100%;
    border-radius:      5px;
}

.resultbox {
    width:              100%;
    border-radius:      10px;
    border-width:       2px;
    border-style:       solid;
    border-color:       grey white white grey;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    background-color:   #208080;
    padding:            10px;
}

.resultbutton {
    transition:         opacity 1s;
    opacity:            0.0;
    font-size:          16px;
    font-weight:        bold;
    width:              98%;
    max-width:          98%;
    height:             60px;
    margin:             5px;
    text-align:         center;
    overflow-x:         hidden;
    overflow-y:         hidden;
    border-radius:      30px;
    border-width:       1px;
    border-style:       solid;
    border-color:       white grey grey white;
    transition:         all .4s;
    cursor:             pointer;
}

.resultbutton:hover {
    color:              yellow;
}

.resultbutton:focus {
    border-color:       grey white white grey;
}

.multiplechoiceresult {
    transform:          scale(0.70);
    border-radius:      5px;
    background-color:   #00a0a0;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    padding:            5px;
    border-style:       solid;
    border-width:       1px;
    border-color:       grey white white grey
}

.resultbutton_rotate {
    transition:                 opacity 1s;
    opacity:                    1.0;
    animation-name:             rotatebutton;
    animation-duration:         2s;
    animation-timing-function:  easy;
    animation-iteration-count:  1;
    font-size:                  16px;
    font-weight:                bold;
    width:                      98%;
    max-width:                  98%;
    height:                     60px;
    margin:                     5px;
    background-color:           yellow;
    text-align:                 center;
    overflow-x:                 hidden;
    overflow-y:                 hidden;
    border-width:               1px;
    border-style:               solid;
    border-color:               white grey grey white;
    border-radius:              30px;
}

.resultcounter {
    border-radius:              4px;
    padding-left:               5px;
    width:                      85px;
    font-size:                  20px;
    border-radius:              4px;
    border-style:               solid;
    border-width:               2px;
    border-color:               grey white white grey;
}

.resultwrapperpointer {
    margin:                     5px;
    padding:                    20px;
    line-height:                30px;
    background-color:           lightgreen;
    cursor:                     pointer;
    border-width:               2px;
    border-style:               solid;
    border-color:               white grey grey white;
    border-radius:              10px;
    box-shadow:                 5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.resultwrapperpointerexact {
    margin:                     5px;
    padding:                    20px;
    line-height:                30px;
    background-color:           lightgreen;
    cursor:                     pointer;
    border-width:               2px;
    border-style:               solid;
    border-color:               white grey grey white;
    border-radius:              10px;
    box-shadow:                 5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.resultwrapperpointerinexact {
    margin:                     5px;
    padding:                    20px;
    line-height:                30px;
    background-color:           #e0e0e0;
    background-image:           linear-gradient(45deg, transparent 25%, rgba(255,255,255,.5) 50%);
    background-size:            60px 30px;
    cursor:                     pointer;
    border-width:               2px;
    border-style:               solid;
    border-color:               white grey grey white;
    opacity:                    1;
    border-radius:              10px;
    box-shadow:                 5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.resultwrapper {
    margin:                     5px;
    padding:                    20px;
    line-height:                30px;
    background-color:           #e0e0e0;
    background-image:           linear-gradient(45deg, transparent 25%, rgba(255,255,255,.5) 50%);
    background-size:            60px 30px;
    cursor:                     normal;
    border-width:               2px;
    border-style:               solid;
    border-color:               white grey grey white;
    opacity:                    1;
    border-radius:              10px;
    box-shadow:                 5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.resultwrapperexact {
    margin:                     5px;
    padding:                    20px;
    line-height:                30px;
    background-color:           lightgreen;
    cursor:                     normal;
    border-width:               2px;
    border-style:               solid;
    border-color:               white grey grey white;
    border-radius:              10px;
    box-shadow:                 5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.resultvok {
    position:                   relative;
    top:                        -9px;
    left:                    und ich meine nicht Federn! 🙂   5px;
    border-radius:              3px;
    background-color:           #001892;
    color:                      yellow;
}

.resetbutton {
    background:                 #eee url('../pics/reset.png') no-repeat top left; 
    background-position-x:      5px;
    background-position-y:      8px;
    margin-right:               1px;
    background-size:            25px 25px;
    width:                      140px;
    height:                     40px;
    border-radius:              20px;
    background-color:           #f0f0f0;
    font-size:                  14px;
    box-shadow:                 5px 5px 5px hsl(0deg 0% 0% / 0.38);
    cursor:                     pointer;
}

.resetbutton:focus {
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);   
    border-width:       2px;
    border-style:       solid;
    border-color:       hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5);
}

.revealbutton {
    width:                      40px;
    height:                     40px;
    background-image:           url('../pics/eye.png');
    background-color:           #abcdef;
    background-size:            cover;
    border-radius:              5px;
    position:                   relative;
    top:                        -20px;
    cursor:                     pointer;
}    

.revealbutton_preview {
    border-radius:      16px;
    width:              32px;
    height:             32px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    visibility:         visible;
    background-image:   url('../pics/eye.png');
    background-size:            cover;
    cursor:             pointer;
}    

.replacebutton {
    border-radius:      16px;
    width:              32px;
    height:             32px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    visibility:         visible;
    background-image:   url('../pics/replace.png');
    background-size:    cover;
    cursor:             pointer;
}    

.samplebox {
    color:              black;
    line-height:        28px;
    background-color:   #d0d0d0;
    margin:             10px;
    border-radius:      5px;
    padding:            10px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-width:       2px;
    border-style:       solid;
    border-color:       white grey grey white;
    display:            inline-block;
}

.sampleboxsingleline {
    color:              black;
    line-height:        18px;
    background-color:   #d0d0d0;
    margin:             5px;
    border-radius:      5px;
    padding:            10px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-width:       2px;
    border-style:       solid;
    border-color:       white grey grey white;
    display:            inline-block;
}

.savelista {
    width:              25px;
    height:             25px;
    margin-left:        2px;
    margin-right:       2px;
    background-image:   url('../pics/save.png');
    background-size:    cover;
    background-color:   lightgreen;
    border-radius:      3px;
}

.searchcontainer {
    z-index:            3;
    background-image:   url('../pics/gridbackground.png'); 
    background-size:    cover;
    border-radius:      10px;
    position:           absolute;
    top:                10%;
    left:               -100%;
    width:              70%;
    opacity:            0.0;
    transition:         opacity .5s;
    height:             80%;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.searchfilterwrapper {
    font-size:          16px;
    font-weight:        bold;
    margin-left:        10px;
    margin-top:         10px;
}

.searchclosepic {
    width:              15px;
    height:             15px;
    position:           relative;
    top:                3px;
    left:               -20px;
}

.searchlabel {
    padding:            10px;
    border-style:       solid;
    border-width:       1px;
    border-color:       white grey grey white;
    border-radius:      5px;
}

.searchresultcontainer {
    background-color:   #efefef;
    width:              94.5%;
    margin-left:        2%;
    margin-top:         10px;
    height:             73.5%;
    border-style:       solid;
    border-width:       2px;
    padding:            5px;
    border-color:       grey white white grey;
    border-radius:      5px;
    overflow:           auto;
}

.searchstringwrapper {
    border-width:       2px;
    border-style:       solid;
    border-color:       gray white white gray;
    width:              100%;
    background:         white;
}

.seltener {
    padding-top:        10px;
    padding-left:       20px;
    color:              white;
}

.setupwindow {
    transition:         left 1s; 
    background-image:   url("../pics/gridbackground.png"); 
    position:           absolute; 
    top:                10%; 
    left:               -100%;
    width:              50%; 
    height:             400px; 
    max-height:         450px; 
    border-radius:      10px; 
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border:             2px solid black   
}

.senderlist {
    border:             2px solid yellow;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    background-color:   green;
    min-height:         250px;
    max-height:         350px;
    overflow:           auto;
    border-radius:      10px;
}

.senderlisttable {
    margin-left:        2%;
    margin-bottom:      2%;
    width:              95%;
    height:             150px;
    max-height:         150px;
    overflow:           auto;
}

.senderlistrow {
    border-radius:      10px;
    background-color:   #ffffa0;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.senderlistcell {
    width:              55%;
    spacing:            10px;
    padding:            10px;
    overflow:           auto;
    height:             100px;
}

.senderlabel {
    text-align:         left;
    padding-top:        10px;
    padding-left:       15px;
    height:             40px;
    border-radius:      10px;
    width:              92%;
    margin-left:        10px;
    border:             3px solid black;
    background-color:   #a0b0c0;
    color:              black;
    font-size:          24px;
    font-style:         italic;
}

.selectedradio {
    border-radius:      10px;
    width:              50px;
    height:             50px;
}

.selectedradiocell {
    width:              50px;
    background-color:   green;
}

.startpreview {
    position:           absolute;
    top:                -110px;
    left:               -140px;
    transform:          scale(0.55);
    background-color:   wheat;
    border:             1px solid black;
    width:              650px;
    height:             530px;
    overflow:           hidden;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.startpreviewwrapper {
    position:           absolute;
    left:               10px;
    width:              360px;
    height:             300px;
    border-style:       solid;
    border-width:       2px; 
    border-color:       grey white white grey;
    padding:            5px;
    overflow:           hidden;
    text-align:         left;
}

.subheader_L2 {
    padding-left:       25px;
    width:              100%;
    height:             32px;
    background-color:   #6060ff;
    border-radius:      5px;
    color:              wheat;
    font-size:          26px;
    padding-right:      20px;
    background-image:   linear-gradient(to right, lightblue, #6060ff);
    text-shadow:        2px 2px 5px black;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}

.subheader_ex {
    line-height:        48px;
    padding-left:       25px;
    height:             48px;
    background-color:   #c0c0c0;
    color:              white;
    font-size:          26px;
    padding-right:      20px;
    text-align:         right;
    text-shadow:        2px 2px 5px grey;
    background-image:   linear-gradient(to right, #e0e0e0, #606060);
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-radius:      5px;
}

.subsect1 {
    font-size:          18px;
    color:              navy;
    font-weight:        bold;
    text-shadow:        2px 2px 5px grey;
}

.subsect_mono {
    font-size:          18px;
    color:              #606060;
    font-weight:        bold;
    text-shadow:        2px 2px 5px grey;
}


/* The switch - the box around the slider */
.switch {
    position:           relative;
    top:                0px;
    display:            inline-block;
    width:              40px;
    height:             20px;
    margin-right:       5px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity:            0;
    width:              0;
    height:             0;
}

/* The slider */
.slider {
    position:           absolute;
    cursor:             pointer;
    top:                0;
    left:               0;
    right:              0;
    bottom:             0;
    background-color:   #ccc;
    transition:         .4s;
    border-width:       1px;
    border-style:       solid;
    border-color:       grey white white grey;
; */
}

.slider:before {
    position:           absolute;
    content:            "";
    height:             12px;
    width:              12px;
    left:               4px;
    bottom:             3px;
    background-color:   white;
    transition:         .4s;
}

.sourceselect {
}

input:checked + .slider {
    background-color:   green;
}

input:not(:checked) + .slider {
    background-color:   red;
}

input:focus + .slider {

}

input:checked + .slider:before {
    transform:          translateX(20px);
}

/* Rounded sliders */
.slider.round {
    border-radius:      10px;
}

.slider.round:before {
    border-radius:      50%;
}

input:not(:checked) + .slider.round:after {
    position:           absolute;
    content:            "\2717";
    right:               3px;
    font-size:          16px;
    color:              yellow;
    bottom:             -2px;
}

input:checked + .slider.round:after {
    border-radius:      50%;
    position:           absolute;
    content:            "\2713";
    color:              yellow;
    left:               5px;
    font-size:          16px;
    bottom:             -2px;
}

.quitdebugbutton {
    visibility:         hidden;
    position:           absolute;
    bottom:             75px;
    left:               10px;
    width:              50px;
    height:             50px;
    border-radius:      25px;
    font-size:          9px;
    text-align:         center;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38)
}

.sliderwrapper {
    border-width:       1px;
    border-style:       solid;
    border-color:       grey white white grey;
    padding:            5px;
    background-color:   grey;
}

.solution {
    position:           relative;
    top:                -15px;
    margin-left:        2%;
    width:              90%;
    text-align:         left;
    font-size:          28px;
    color:              navy;
    font-style:         italic;
    text-decoration:    underline;
    width:              200px;
    text-align:         center;
    border-style:       solid;
    border-width:       2px;
    border-radius:      5px;
    border-color:       white grey grey white;
    padding:            3px;
    background-image:   url('../pics/gridbackground.png');
    filter:             drop-shadow(5px 5px 5px hsl(0deg 0% 0% / 0.38));
}

.solutionclosebutton {
    position:           absolute;
    top:                5px;
    right:              5px;
    width:              40px;
    height:             25px;
}

.soundsamplebutton {
    width:              50px;
    height:             30px;
    border-radius:      25px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.speakerbutton {
    border-radius:      20px;
    width:              40px;
    height:             40px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    visibility:         hidden;
    cursor:             pointer;
}

.speakerbutton_preview {
    border-radius:      16px;
    width:              32px;
    height:             32px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    visibility:         hidden;
    cursor:             pointer;
}

.speakerbutton:focus {
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);   
    border-width:       2px;
    border-style:       solid;
    border-color:       hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5);
}

.startupcontainer {
    background-image:   url('../pics/gridbackground.png'); 
    background-size:    cover;
    text-align:         center;
    border-radius:      10px;
    padding-bottom:     10px;
    transition:         opacity 1s; 
    opacity:            1.0; 
    visibility:         visible;
    position:           fixed; 
    top:                40%;
    left:               25%; 
    width:              50%; 
    min-height:         50px; 
    border:             2px solid black;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38)
}

.submenu {
    position:           relative;
    z-index:            1;
    color:              navy;
    padding-top:        2px;
    font-style:         italic;
    font-size:          16px;
    transition:         max-width 0.4s, max-height 0.4s;
    max-width:          45px;
    max-height:         20px;
    margin-left:        10px;
    overflow-y:         hidden;
    overflow-x:         hidden;
}

.submenu:hover {
    transition:         max-width 0.4s, max-height 1s;
    max-width:          280px;
    max-height:         330px;
}

.submenu2 {
    position:           absolute;;
    z-index:            1;
    color:              navy;
    padding-top:        2px;
    font-style:         italic;
    font-size:          16px;
    transition:         max-width 0.4s, max-height 0.4s;
    max-width:          65px;
    max-height:         20px;
    margin-left:        10px;
    overflow-y:         hidden;
    overflow-x:         hidden;
    top:                26px;
    left:               70px;
    display:            none;
}

.submenu2:hover {
    transition:         max-width 0.4s, max-height 1s;
    max-width:          280px;
    max-height:         370px;
}

.submenuwrapper {
    text-align:         left;
    font-size:          15px;
    border:             1px solid black;
    background:         #e0e000;
    border-radius:      5px;
    margin-top:         10px;
    padding:5px;
}

.submenuentry {
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
    margin:             5px;
    background-color:   #48af42;
    width:              200px;
    padding:            3px;
    cursor:             pointer;
    color:              white;
    margin-bottom:      20px;
    border-radius:      5px;
}

.submenuentry:hover {
    box-shadow:         1px 1px 1px hsl(0deg 0% 0% / 0.38);
    margin:             5px;
    background-color:   #48af42;
    width:              200px;
    padding:            3px;
    cursor:             pointer;
    color:              yellow;
    margin-bottom:      20px;
    border-radius:      5px;
}

.subsection {
    width:              20px;
    height:             20px;
    background-color:   teal;
    color:              white;
    padding:            3px;
    padding-top:        6px;
    border-radius:      5px;
    text-align:         center;
    font-size:          16px;
    font-weight:        bold;
    display:            inline-block;
    box-shadow:         2px 2px 2px hsl(0deg 0% 0% / 0.38);
}

.subsection_L2 {
    width:              20px;
    height:             20px;
    background-color:   #0076ba;
    color:              white;
    padding:            3px;
    padding-top:        6px;
    border-radius:      5px;
    text-align:         center;
    font-size:          16px;
    font-weight:        bold;
    display:            inline-block;
    box-shadow:         2px 2px 2px hsl(0deg 0% 0% / 0.38);
}

.subsection_B2 {
    width:              20px;
    height:             20px;
    background-color:   #c372a9;
    color:              white;
    padding:            3px;
    padding-top:        6px;
    border-radius:      5px;
    text-align:         center;
    font-size:          16px;
    font-weight:        bold;
    display:            inline-block;
    box-shadow:         2px 2px 2px hsl(0deg 0% 0% / 0.38);
}

.subsection_mono {
    width:              20px;
    height:             20px;
    background-color:   #c0c0c0;
    color:              white;
    padding:            3px;
    padding-top:        6px;
    border-radius:      5px;
    text-align:         center;
    font-size:          16px;
    font-weight:        bold;
    display:            inline-block;
    box-shadow:         2px 2px 2px hsl(0deg 0% 0% / 0.38);
}

.switchlang {
    height:             40px;
    border-radius:      20px;
    margin-bottom:      5px;
    margin-left:        5px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.switchlang:focus {
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);   
    border-width:       2px;
    border-style:       solid;
    border-color:       hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5);
}

.taperecorder {
    position:           absolute;
    transition:         opacity 0.5s;
    top:                80px;
    left:               15px;
    width:              110px;
    padding:            3px;
    border-width:       1px;
    border-color:       grey white white grey;
    border-style:       solid;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    background-color:   #FAE074;
    border-radius:      5px;
    visibility:         hidden;
    opacity:            0.0;
    z-index:            0;
}

.textleft {
    text-align:         left;
}

.toccontainer {
    margin-top:         15px;
    margin-bottom:      15px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-radius:      5px;
    background-color:   #ff9300;
    width:              100%;
}

.toccontainer_L2 {
    margin-top:         15px;
    margin-bottom:      15px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    border-radius:      5px;
    background-color:   #0076ba;
    width:              100%;
}

.toolbox {
    transition:         max-height 0.5s;
    position:           fixed;
    top:                0px;
    left:               100px;
    overflow-x:         hidden;
    overflow-y:         hidden;
    line-height:        1px;
    max-height:         35px;
    min-height:         35px;
    min-width:          60px;
    max-width:          60px;
    margin:             8px;
    z-index:            5;
}

.toolbox:hover {
    max-height:             320px;
}


.tooltipcontent {
    animation-name:             rotatebutton;
    animation-duration:         .5s;
    animation-timing-function:  easy;
    animation-iteration-count:  1;
    background-color:           #abcdef;
    font-size:                  18px;
    border:                     1px solid #abcdef;
    border-radius:              5px;
    padding-left:               10px;
    padding-right:              10px;
    padding-top:                1px;
    padding-bottom:             1px;
    text-align:                 center;
    box-shadow:                 5px 5px 5px hsl(0deg 0% 0% / 0.38);
    min-width:                  40px;
    max-width:                  400px;
}

.tooltipcontainer .tooltipcontent::after {
  content:              "";
  position:             absolute;
  bottom:               100%;  /* At the top of the tooltip */
  left:                 15;
  margin-left:          -5px;
  border-width:         6px;
  border-style:         solid;
  border-color:         transparent transparent #abcdef transparent;
}

.tooltipcontainer {
    transition:                 opacity .5s;
    position:                   absolute;
    top:                        0px;
    left:                       0px;
    cursor:                     pointer;
    opacity:                    0.0;
    color:                      black;
    font-size:                  16px;
}

.trackframe {
    text-align:         center;
    background:         #abcdef;
    border-radius:      5px;
    border-top:         1px solid #404040;
    border-left:        1px solid #404040;
    border-right:       1px solid white;
    border-bottom:      1px solid white;
    cursor:             pointer;
}

.tracknr {
    font-size:          22px;
    color:              #404040;
    text-align:         center;
}

.transcripttimelabel {
    margin-left:        5px;
    width:              100px;
    padding-top:        5px;
    padding-left:       5px;
    height:             25px;
    border-style:       solid;
    border-width:       1px;
    border-color:       grey white white grey;
    background-color:   #c0c0c0;
    color:              navy;
    border-radius:      5px;
    text-align:         center;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38)
}

.transcripttable {
    width:              97%;
    margin-left:        10px;
    margin-right:       10px;
    margin-bottom:      5px;
    border-radius:      5px;
    border-width:       1px; 
    border-style:       solid; 
    border-color:       grey white white grey;
}
.translatecontainer {
    z-index:            3;
    background-image:   url('../pics/gridbackground.png'); 
    background-size:    cover;
    border-radius:      10px;
    border:             2px solid black;
    position:           absolute;
    top:                25%;
    left:               -100%;
    width:              50%;
    opacity:            0.0;
    transition:         opacity .5s, left 1s;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
}
    
.translatewrapper {
    width:              96%;
    margin-left:        2%;
    margin-top:         10px;
}

.translatetext {
    width:              100%;
    height:             140px;
    resize:             none;
}

.transcriptcontainer {
    background-image:   url('../pics/gridbackground.png'); 
    background-size:    cover;
    text-align:         left;
    border-radius:      10px;
    transition:         all 1s; 
    opacity:            0.0; 
/*     visibility:         hidden; */
    position:           fixed; 
    top:                5%; 
    left:               -100%; 
    width:              60%;
    min-height:         50px; 
    max-height:         80%; 
    height:             80%;
    overflow-y:         hidden; 
    border:             2px solid black;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);}

.transcriptcontainer_visible {
    background-image:   url('../pics/gridbackground.png'); 
    background-size:    cover;
    text-align:         left;
    border-radius:      10px;
    transition:         all 1s; 
    opacity:            1.0; 
/*     visibility:         visible; */
    position:           fixed; 
    top:                5%; 
    left:               20%;
    width:              60%;
    min-height:         50px; 
    max-height:         80%; 
    height:             80%;
    overflow-y:         hidden; 
    border:             2px solid black;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);}

.transcripttext {
    color:              navy;
    overflow-y:         auto;
    margin:             15px;
}

.transcriptwrapper {
    margin:             5px;
    width:              96%;
    height:             82%;
    max-height:         82%;
    margin-top:         10px;
    margin-left:        2%;
    background-color:   #ebebc2;
    opacity:            0.8;
    overflow-y:         auto;
    border-width:       2px;
    border-style:       solid;
    border-color:       black white white black;
}

.translatorselectcontainer:hover {
    max-height:         200px;   
}

.translatorselectcontainer {
    transition:         max-height 1s 0.5s;
    max-height:         40px;
    overflow-y:         hidden;
    text-align:         center;
    position:           absolute;
    right:              5px;
    top:                30px;
    z-index:            3;
}

.translatorlistcontainer {
    background-color:   #c0c0c0;
    margin-top:         5px;
    width:              30px; 
    border-radius:      5px; 
    padding-top:        3px;
    padding-bottom:     3px;
    border:             1px solid white
}

.versionlabel {
    position:           fixed;
    transition:         font-size .5s, color 2s, background-color 1s, padding 1s,border 1s,box-shadow 1s;
    top:                10px;
    right:              10px;
    color:              #a0a0a0;
    border-radius:      15px;
    font-size:          12px;
    font-weight:        bold;
    font-style:         italic;
    font-family:        Helvetic;
}

.versionlabel:hover {
    font-size:          16px;
    color:              black;
    background-color:   white;
    border-radius:      15px;
    border-style:       solid;
    border-width:       1px;
    border-color:       white grey grey white;
    padding:            15px;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
    z-index:            5;
}

.varsettings {
    position:           relative;
    z-index:            5
    border-radius:      5px; 
    resize:             none; 
    width:              96%;
    margin-top:         2%;
    margin-left:        2%;
    height:             280px
}

.verbsbutton {
    width:              127px;
    height:             30px;
    font-size:          16px;
    background-color:   #c0c0c0;
    border-radius:      15px;
    margin-left:        5px;
    margin-top:         3px;
    margin-bottom:      2px;
    transition:         background-color 1s;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}

.verbsbutton:hover {
    background-color:   #f0f0f0;
}

.verbsbutton:focus {
    box-shadow:         0px 0px 0px hsl(0deg 0% 0% / 0.38);   
    border-width:       2px;
    border-style:       solid;
    border-color:       hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5) hsl(0deg 0% 0% / 0.5);
}

.verbsbuttoncontainer {
    width:              98%;
    max-width:          98%;
    overflow-x:         auto;
    background-image:   url('../pics/gridbackground.png');
    background-size:    cover;
    border-radius:      5px;
    border-width:       1px;
    border-style:       solid;
    border-color:       white black black white;
    margin:             2px;
    margin-left:        1%;
    margin-top:         5px;
    margin-bottom:      5px;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
}

.verbsbuttoncontainer_expand {
    width:              98%;
    max-width:          98%;
    max-height:         300px;
    border-radius:      5px;
    border-width:       1px;
    overflow-y:         scroll;
    border-style:       solid;
    border-color:       white black black white;
    margin:             2px;
    margin-left:        1%;
    margin-top:         5px;
    margin-bottom:      5px;
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
}

.verbosregulares {
    background-image:   url('../pics/gridbackground.png'); 
    background-size:    cover;
    transition:         opacity 1s, left 1s; 
    border-radius:      10px;
    opacity:            1.0;
    visibility:         visible;
    position:           fixed;
    top:                1%;
    left:               100%;
    width:              80%;
    border:             2px solid black; 
    color:              navy;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38)
}

.verbosregularesmainframe {
    border-width:       1px;
    border-style:       solid;
    border-color:       gray black black gray;
    margin:             5px;
    border-radius:      5px;
    width:              99%;
    background-image:   linear-gradient(yellow, #abcdef);
}

.vocaudio {
    width:              0px;
    height:             0px;
    visibility:         hidden;
}

.vocabularioheader {
    font-size:          28px;
    color:              #ff9300;
    margin-left:        5px;
    margin-bottom:      25px;
    font-weight:        bold;
    text-shadow:        2px 2px 5px grey;
    text-align:         center;
}

.vocabularioheader_L2 {
    font-size:          28px;
    color:              navy;
    margin-left:        5px;
    margin-bottom:      25px;
    font-weight:        bold;
    text-shadow:        2px 2px 5px grey;
    text-align:         center;
}

.vocabelcontainer {
    margin-left:        2%; 
    padding-top:        5px; 
    padding-bottom:     5px;
    margin-top:         5px;
    margin-bottom:      10px;
    width:              96%;
    border-radius:      5px;
    background:         #e0e0e0;
    border-width:       2px;
    border-style:       solid;
    border-color:       gray white white gray;
}

.voclisttable {
    margin-left:        5px;
    margin-top:         5px;
    border-width:       1px; 
    border-style:       solid;
    border-color:       grey white white grey;
}

.voclinecontainer {
    border-width:       2px;
    border-style:       solid;
    border-color:       gray white white gray;
}

.vocline {
    background-color:   green;
    width:              80%;
    border-width:       1px;
    border-color:       grey white white grey;
    border-style:       solid;
    border-radius:      5px;
}

.voclinelabel {
    margin-left:        10px;
    color:              black;
    font-size:          18px; 
    font-weight:        bold;
}

.voclinevocabel {
    color:              yellow;
    font-style:         italic;
    font-size:          24px;
    font-weight:        bold;
    margin-left:        10px;
    text-align:         center;
}

.vocprintpreview {
    background-image:   url('../pics/duplex.png'); /* 16px x 16px */
    background-repeat:  no-repeat;
    background-position:8px 2px;
    background-size:    23px 23px;
    border-radius:      14px;
    min-width:          120px;
    cursor:             pointer;        
    height:             30px;           
    padding-left:       30px;     
    vertical-align:     middle; 
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
}

.vocprintpreview2 {
    background-image:   url('../pics/simplex.png'); /* 16px x 16px */
    background-repeat:  no-repeat;
    background-position:8px 2px;
    background-size:    23px 23px;
    border-radius:      14px;
    min-width:          120px;
    cursor:             pointer;        
    height:             30px;           
    padding-left:       30px;     
    vertical-align:     middle; 
    box-shadow:         3px 3px 3px hsl(0deg 0% 0% / 0.38);
}

.vocabularcontainer {
    border-radius:      10px; 
    background:         #f0f0f0;
    margin:             2%;
    padding:            5px;
    border-width:       2px;
    border-style:       solid;
    border-color:       gray white white gray;
    line-height:        30px;
    width:              96%;
}

.vocselectbutton {
    background:         url('../pics/favorit.png') no-repeat center center; 
    background-size:    30px 30px;
    width:              35px;
    height:             35px;
    border-radius:      5px;
    cursor:             pointer;
}

.voclistselectcontainer {
    background-color:   #ffc300;
    border-style:       solid;
    border-width:       1px;
    border-color:       grey white white grey;
    font-size:          16px;
    margin-top:         5px;
    width:              96%;
    margin-left:        2%;
    height:             48px;
    line-height:        48px;
}
.vocselectcontainer {
    background-color: green;
}

.vocselectwindow {
    z-index:            2;
    transition:         top 1s;
    font-size:          32px;
    position:           absolute; 
    top:                -410%; 
    visibility:         hidden;
    left:               20%; 
    width:              60%; 
    min-width:          800px;
    border-radius:      10px; 
    background-image:   url('../pics/gridbackground.png'); 
    background-size:    cover; 
    border:             2px solid black;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38)
}


.voclistwrapper {
    border-width:       2px;
    border-style:       solid;
    border-color:       gray white white gray;
}

.voclist {
    border-radius:      5px; 
    border-width:       1px;
    border-style:       solid;
    border-color:       white gray gray white;
    background:         #f0f0f0;
    padding-right:      5px;
    overflow-y:         auto;
    overflow-x:         hidden;
    white-space:        nowrap; 
    margin:             2%; 
    width:              94%; 
    height:             350px;
    text-align:         left;
}

.vocprintpreviewcelldata {
    width:              50%;
    height:             230px;
    font-size:          32px;
    font-weight:        bold;
    border-right:       0.5px dotted black;
}

.vocprintpreviewcelldata2 {
    width:              50%;
    height:             230px;
    font-size:          32px;
    font-weight:        bold;
    border-left:        0.5px dotted black;
}

.vocprintpreviewtablestyle {
    width:              100%; 
    border:             1px dotted black;
}

.vocprintpreviewdivstyle {
    width:              95%;
    height:             100%;
    border:             1px solid black;
    display:            flex;
    justify-content:    center;
    align-items:        center;
}

.winbutton {
    transition:         all .5s;
    cursor:             pointer;
    width:              30px;
    height:             30px;
    margin-top:         6px;
}

.winbutton:hover {
    transform:          scale(1.3);
}

.windowbutton {
    width:              40px;
    height:             40px;
    background-color:   #fedcba;
    border:             1px solid green;
    border-radius:      5px;
}

.windowheader {
/*    background-color:           #1e663e;*/
    background:                 #ff9300;
    width:                      100%;
    border-top-left-radius:     8px;
    border-top-right-radius:    8px;
    color:                      yellow;
}

.winselectwrapper:hover {
    top:               -20px;
}
  
/* top geändert von -25 auf -175 um die Fensterleiste auszublenden */
.winselectwrapper {
    transition:         top 0.5s;
    position:           absolute;
    width:              70%;
    top:               -175px;
    left:               15%;
    z-index:            1000;
}

.winselectcontainer {
    height:             60px;
    width:              100%;
    min-width:          100%;
    border:             3px solid black;
    margin-top:         15px;
    box-shadow:         5px 5px 5px hsl(0deg 0% 0% / 0.38);
    background-color:   #2fbda0;
    border-radius:      10px;
    overflow-y:         hidden;
    overflow-x:         auto;
}

.wrapper {
    padding:            5px;
    box-shadow:         7px 7px 5px hsl(0deg 0% 0% / 0.38);
    border-width:       2px;
    border-style:       solid;
    border-color:       black black black black;
    border-radius:      5px;
}

.x_1_1 {
    font-size:          26px;
    font-weight:        bold;
    color:              green;
    margin-left:        10px;
}

.x_1_2 {
    height:             30px;
    margin-right:       10px;
    float:              left;
    position:           relative;
    top:                -3px;
    font-size:          24px;
    color:              green;
    font-weight:        bold;
    margin-left:        20px;
}

.x_1_3 {
    height:             30px;
    margin-right:       10px;
    float:              left;
    position:           relative;
    top:                -3px;
    font-size:          22px;
    color:              green;
    font-weight:        bold;
    margin-left:        20px;
}

.test {
    appearance:         none;
    position:           relative;
    top:                0px;
    width:              200px;
    height:             80px;
    border-width:       1px;
    border-style:       solid;
    border-color:       white grey grey white;
    margin:             5px;
    font-size:          14px;
    background-color:   #c0c0c0;
    transition:         box-shadow .2s;
    box-shadow:         2px 2px 2px hsl(0deg 0% 0% / 0.38);
    cursor:             pointer;
}


.test:after {
    content:            "☔";
    font-family:        Helvetic;
    font-size:          32px;
    position:           absolute;
    top:                -14px;
    right:               5px;
    opacity:            1;
    color:              blue;
}