html, body {height: 100%;margin: 0;overflow: hidden;}

        .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {--bs-gutter-x: 1.5rem;--bs-gutter-y: 0;width: 100%;padding-right: calc(var(--bs-gutter-x) * .5);padding-left: calc(var(--bs-gutter-x) * .5);margin-right: auto;margin-left: auto;}
        .card-header {
            padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
            margin-bottom: 0;
            color: var(--bs-card-cap-color);
            background-color: var(--bs-card-cap-bg);
            border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);background-color: black;color: white;}

        .content-iframe {flex-grow: 1;}
        iframe {width: 100%;height: 100%;border: none;}
        .dropdown-submenu {position: relative;}
        .dropdown-submenu > .dropdown-menu {top: 0;left: 100%;}
        .footer {background-color: black;color: white;padding-bottom: 10px;text-align: center;height: 30px;font-size: 11pt;}
        .navbar-dark {margin-right: 0;margin-left: 0; width: 100vw;}
        .tema {font-size: 14pt;color: white;}
        .kode-link {margin-right: 8px;cursor: pointer;color: blue;text-decoration: none; display: inline-flex}
       
        #tema {color: white;}
        .arab {font-size: 16pt; line-height: 2; font-family: "LPMQ"; font-weight: 400; text-align: right; direction: rtl; padding-right: 0px; padding-left: 0px; padding-bottom: 0px;color: black;text-align:justify !important;}
        .angkaArab {font-size: 18px;font-family: 'Scheherazade';font-weight: 500;font-style: normal;color: red; background-image: url('ic-frame-number.svg');background-size: contain;background-repeat: no-repeat;background-position: center;display: inline-block;padding: 4px;margin-right: 10px;margin-top: -20px;margin-left: 10px;}
        .terjemahan {font-size: 14pt; text-align: justify; color: blue;}
        .tematik {overflow-y: auto;max-height: 100px;padding-bottom: 40px;padding-left: 10px;padding-right: 10px;}
        #hasilAyat {background:#f9f9f9; font-size:16px;margin-right: 10px;overflow-y: auto;max-height: 300px;margin-bottom: 60px;max-height: 400px;}
        .subTema {font-size: 14px;font-family: Arial, sans-serif;text-align: justify;color: red;}

        .flex-container {display: flex;flex-wrap: wrap;gap: 10px;}
        .flex-container div {padding: 8px 12px;background-color: #e0f0ff;border-radius: 5px;font-family: sans-serif;}


        @media (max-width: 600px) {
            .card-header .judul {font-size: 10pt;height: 45px;}
            .card-body {flex: 1 1 auto;padding: 0px;color: var(--bs-card-color);}
            .tema {font-size: 10pt;margin-left: 20px;margin-right: 20px}
            .tematik {overflow-y: auto;max-height: 100px;padding-bottom: 40px;padding-left: 10px;padding-right: 10px;}
            .arab {font-size: 10pt;}
            .angkaArab {font-size: 12px;}
            .terjemahan {font-size: 10pt; text-align: justify;}
            #hasilAyat {background:#f9f9f9; font-size:16px;margin-right: 10px;overflow-y: auto;max-height: 300px;margin-bottom: 80px; max-height: 400px;}
            .kode-link {margin-right: 15px;cursor: pointer;color: blue;text-decoration: none;display: inline-flex;font-size: 10pt;}
            .subTema {font-size: 12px;font-family: Arial, sans-serif;text-align: justify;color: red;}

        }