:root {
    --bs-font-sans-serif: 'Assistant', sans-serif;
}

html {
    height     : 100%;
    font-family: sans-serif;
    direction  : rtl;
}

body {
    margin : 0;
    padding: 0;
    font   : 360 16px 'Assistant', sans-serif;
}

*,
:after,
:before {
    box-sizing: border-box;
}

nav {
    position        : fixed;
    top             : 0;
    right           : 0;
    bottom          : 0;
    width           : 0px;
    color           : var(--bs-light);
    background-color: var(--bs-gray-dark);
    border-left     : 1px solid grey;
    box-shadow      : -1px -1px 8px 4px rgba(0, 0, 0, 0.2);
    z-index         : 1;
    overflow        : hidden;
    transition      : width 0.2s ease-in-out;
}

.menu-float {
    position: absolute;
    top     : 0;
    right   : 10px;
}

nav[data-open=true] {
    width  : 200px;
    padding: 0 10px;
}

.menu {
    font-size : 2rem;
    display   : inline-block;
    width     : 42px;
    height    : 42px;
    text-align: center;
    cursor    : pointer;
}

label {
    display: block;
}

article {
    direction: ltr;
}

@media (min-width: 768px) {
    article {
        padding: 24px;
    }
}


.cert {
    direction       : rtl;
    width           : 400px;
    background-color: #f1fff2;
    border          : 1px solid #eeeeee;
    font-size       : 14px;
    font-weight     : 400;
}

.cert h1 {
    text-align : center;
    font-weight: 800;
    font-size  : 2.2rem;
    margin     : 0;
}

.cert h2 {
    text-align : center;
    font-weight: 900;
    font-size  : 1.1rem;
    margin     : 0;
    padding    : 0.8rem 0 0 0;
}

.cert h3 {
    font-weight: 700;
    font-size  : 1.4rem;
    margin     : 0;
}

.cert table {
    width         : 100%;
    margin-top    : 14px;
    border-spacing: 0;
}

.cert table tr.info {
    height: 72px;
}

.cert table tr.mid {
    height    : 80px;
    text-align: center;
}

.cert table tr.mid td {
    border-top   : 1px solid silver;
    border-bottom: 1px solid silver;
}

.cert table tr.mid td:not(:first-child) {
    border-right: 1px solid silver;
}

.cert table td {
    vertical-align: middle;
}

.cert table td.he {
    padding-right: 15px;
}

.cert table td.en {
    direction   : ltr;
    padding-left: 15px;
}

.cert img {
    margin: 19px 10px 6px 11px;
}

.magic {
    background-image: url(data:image/png;base64,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);
}

.bottom {
    height    : 230px;
    display   : flex;
    background: white;
}

.bottom .left {
    width         : 157px;
    height        : 169px;
    display       : flex;
    flex-direction: column;
    border-bottom : 1px solid silver;
}

.bottom .right {
    width         : 240px;
    display       : flex;
    flex-direction: column;
    border-left   : 1px solid silver;
}

.dose {
    direction: ltr;
    height   : 160px;
    position : relative;
}

.dose div {
    padding-left: 10px;
}

.dose h4 {
    margin     : 10px;
    font-size  : 1.2rem;
    font-weight: bold;
}

.dose:first-of-type {
    border-bottom: 1px solid silver;
}

.dose label {
    transform : rotate(-90deg);
    height    : 42px;
    position  : absolute;
    top       : 12px;
    right     : 6px;
    text-align: right;
}

.dose .num {
    transform  : rotate(-90deg);
    height     : 42px;
    width      : 42px;
    position   : absolute;
    bottom     : 16px;
    right      : 10px;
    font-size  : 2.6rem;
    font-weight: lighter;
}