MODIFied style main v1 /* ANKINGOVERHAUL */

:root {
--card-max-width: 40em;
--card-text-align: center;
--font-size-regular: 21px;
--font-size-small: 17px;
--font-family: "Iosevka Comfy Duo", "JetBrains Mono", monospace, -apple-system,
sytem-ui, BlinkMacSystemFont, Segoe UI,
Roboto, Helvetica, Arial, sans-serif;
--font-weight: 600;
--table-radius: 0.8em;
}

/*---------Colors-----------*/
--ctp-latte-rosewater: #de9584;
--ctp-frappe-rosewater: #f2d5cf;
--ctp-macchiato-rosewater: #f4dbd6;
--ctp-mocha-rosewater: #f5e0dc;
--ctp-latte-flamingo: #dd7878;
--ctp-frappe-flamingo: #eebebe;
--ctp-macchiato-flamingo: #f0c6c6;
--ctp-mocha-flamingo: #f2cdcd;
--ctp-latte-pink: #ec83d0;
--ctp-frappe-pink: #f4b8e4;
--ctp-macchiato-pink: #f5bde6;
--ctp-mocha-pink: #f5c2e7;
--ctp-latte-mauve: #8839ef;
--ctp-frappe-mauve: #ca9ee6;
--ctp-macchiato-mauve: #c6a0f6;
--ctp-mocha-mauve: #cba6f7;
--ctp-latte-red: #d20f39;
--ctp-frappe-red: #e78284;
--ctp-macchiato-red: #ed8796;
--ctp-mocha-red: #f38ba8;
--ctp-latte-maroon: #e64553;
--ctp-frappe-maroon: #ea999c;
--ctp-macchiato-maroon: #ee99a0;
--ctp-mocha-maroon: #eba0ac;
--ctp-latte-peach: #fe640b;
--ctp-frappe-peach: #ef9f76;
--ctp-macchiato-peach: #f5a97f;
--ctp-mocha-peach: #fab387;
--ctp-latte-yellow: #e49320;
--ctp-frappe-yellow: #e5c890;
--ctp-macchiato-yellow: #eed49f;
--ctp-mocha-yellow: #f9e2af;
--ctp-latte-green: #40a02b;
--ctp-frappe-green: #a6d189;
--ctp-macchiato-green: #a6da95;
--ctp-mocha-green: #a6e3a1;
--ctp-latte-teal: #179299;
--ctp-frappe-teal: #81c8be;
--ctp-macchiato-teal: #8bd5ca;
--ctp-mocha-teal: #94e2d5;
--ctp-latte-sky: #04a5e5;
--ctp-frappe-sky: #99d1db;
--ctp-macchiato-sky: #91d7e3;
--ctp-mocha-sky: #89dceb;
--ctp-latte-sapphire: #209fb5;
--ctp-frappe-sapphire: #85c1dc;
--ctp-macchiato-sapphire: #7dc4e4;
--ctp-mocha-sapphire: #74c7ec;
--ctp-latte-blue: #2a6ef5;
--ctp-frappe-blue: #8caaee;
--ctp-macchiato-blue: #8aadf4;
--ctp-mocha-blue: #87b0f9;
--ctp-latte-lavender: #7287fd;
--ctp-frappe-lavender: #babbf1;
--ctp-macchiato-lavender: #b7bdf8;
--ctp-mocha-lavender: #b4befe;
--ctp-latte-text: #4c4f69;
--ctp-frappe-text: #c6ceef;
--ctp-macchiato-text: #c5cff5;
--ctp-mocha-text: #c6d0f5;
--ctp-latte-subtext1: #5c5f77;
--ctp-frappe-subtext1: #b5bddc;
--ctp-macchiato-subtext1: #b3bce0;
--ctp-mocha-subtext1: #b3bcdf;
--ctp-latte-subtext0: #6c6f85;
--ctp-frappe-subtext0: #a5acc9;
--ctp-macchiato-subtext0: #a1aacb;
--ctp-mocha-subtext0: #a1a8c9;
--ctp-latte-overlay2: #7c7f93;
--ctp-frappe-overlay2: #949bb7;
--ctp-macchiato-overlay2: #8f97b7;
--ctp-mocha-overlay2: #8e95b3;
--ctp-latte-overlay1: #8c8fa1;
--ctp-frappe-overlay1: #838aa4;
--ctp-macchiato-overlay1: #7d84a2;
--ctp-mocha-overlay1: #7b819d;
--ctp-latte-overlay0: #9ca0b0;
--ctp-frappe-overlay0: #737891;
--ctp-macchiato-overlay0: #6c728d;
--ctp-mocha-overlay0: #696d86;
--ctp-latte-surface2: #acb0be;
--ctp-frappe-surface2: #62677e;
--ctp-macchiato-surface2: #5a5f78;
--ctp-mocha-surface2: #565970;
--ctp-latte-surface1: #bcc0cc;
--ctp-frappe-surface1: #51566c;
--ctp-macchiato-surface1: #484c64;
--ctp-mocha-surface1: #43465a;
--ctp-latte-surface0: #ccd0da;
--ctp-frappe-surface0: #414559;
--ctp-macchiato-surface0: #363a4f;
--ctp-mocha-surface0: #313244;
--ctp-latte-base: #eff1f5;
--ctp-frappe-base: #303446;
--ctp-macchiato-base: #24273a;
--ctp-mocha-base: #1e1e2e;
--ctp-latte-mantle: #e6e9ef;
--ctp-frappe-mantle: #292c3c;
--ctp-macchiato-mantle: #1e2030;
--ctp-mocha-mantle: #181825;
--ctp-latte-crust: #dce0e8;
--ctp-frappe-crust: #232634;
 --ctp-macchiato-crust: #181926;
--ctp-mocha-crust: #11111b;
}

/* -------------------------------------------------- COLORS */
.card {
/* Light theme */
background-color: var(--ctp-latte-crust);
--text-fg: var(--ctp-latte-text);
--text-fg-faint: var(--ctp-latte-subtext0);
--text-bg-selected: var(--ctp-latte-subtext1);
--card-bg: var(--ctp-latte-base);
--card-border: var(--ctp-latte-surface2);
--card-box-shadow: #3c42570f;
--divider: var(--ctp-latte-surface2);
--tag-fg: var(--ctp-latte-subtext1);
--tag-bg: var(--ctp-latte-surface0);
--tag-fg-active: var(--ctp-latte-subtext1);
--tag-bg-active: var(--ctp-latte-surface2);
--tag-border: transparent;
--cloze-fg: var(--ctp-latte-yellow);
--cloze-bg: var(--ctp-latte-crust);
--link-fg: var(--ctp-latte-blue);
--link-bg: transparent;
--link-fg-active: var(--ctp-latte-sapphire);
--link-bg-active: transparent;
--bold-fg: var(--text-fg);
--italic-fg: var(--text-fg);
--bold-italic-fg: var(--text-fg);
--underline-fg: var(--text-fg);
--bold-fg: var(--ctp-latte-red);
--italic-fg: var(--ctp-latte-green);
--h1-fg: var(--ctp-latte-peach);
--h2-fg: var(--ctp-latte-teal);
--h3-fg: var(--ctp-latte-mauve);
--h4-fg: var(--ctp-latte-maroon);
--h5-fg: var(--ctp-latte-sapphire);
--bold-italic-fg: var(--bold-fg);
--highlight1: var(--ctp-latte-maroon);
--highlight2: var(--ctp-latte-green);
--highlight3: var(--ctp-latte-lavender);
--highlight4: var(--ctp-latte-peach);
--scheme-rosewater: var(--ctp-latte-rosewater);
--scheme-flamingo: var(--ctp-latte-flamingo);
--scheme-pink: var(--ctp-latte-pink);
--scheme-mauve: var(--ctp-latte-mauve);
--scheme-red: var(--ctp-latte-red);
--scheme-maroon: var(--ctp-latte-maroon);
--scheme-peach: var(--ctp-latte-peach);
--scheme-yellow: var(--ctp-latte-yellow);
--scheme-green: var(--ctp-latte-green);
--scheme-teal: var(--ctp-latte-teal);
--scheme-sky: var(--ctp-latte-sky);
--scheme-sapphire: var(--ctp-latte-sapphire);
--scheme-blue: var(--ctp-latte-blue);
--scheme-lavender: var(--ctp-latte-lavender);
}

/*-------------------MOCHA-----------------------*/
.card.night_mode {
background-color: var(--ctp-mocha-base); /*#1E1E2E;*/
--text-fg: var(--ctp-mocha-text); /*#D9E0EE*/
--text-fg-faint: var(--ctp-mocha-subtext0); /*#988BA2*/
--text-bg-selected: var(--ctp-mocha-surface1); /*#302D41*/
--card-bg: var(--ctp-mocha-surface0); /*#302D41*/
--card-border: var(--ctp-mocha-overlay0); /*#6E6C7E*/
--card-box-shadow: #0000001f;
--divider: var(--ctp-mocha-overlay0); /*#6E6C7E*/
--tag-fg: var(--ctp-mocha-overlay2);/*#C3BAC6*/
--tag-bg: var(--ctp-mocha-overlay0); /*#6E6C7E*/
--tag-fg-active: var(--ctp-mocha-rosewater); /*#F5E0DC*/
--tag-bg-active: #11111b1f; /*#1613201f*/
--tag-border: transparent;
--cloze-fg: var(--ctp-mocha-yellow); /*#FAE3B0*/
--cloze-bg: var(--ctp-mocha-base);
--link-fg: var(--ctp-mocha-blue); /*#96CDFB*/
--link-bg: transparent;
--link-fg-active: var(--ctp-mocha-sky); /*#89DCEB*/
--link-bg-active: transparent;
--bold-fg: var(--ctp-mocha-red); /*#F28FAD*/
--italic-fg: var(--ctp-mocha-green); /*#ABE9B3*/
--h1-fg: var(--ctp-mocha-peach); /*#F8BD96*/
--h2-fg: var(--ctp-mocha-teal); /*#B5E8E0*/
--h3-fg: var(--ctp-mocha-mauve); /*#DDB6F2*/
--h4-fg: var(--ctp-mocha-red); /*#E8A2AF*/
--h5-fg: var(--ctp-mocha-sky); /*#89DCEB*/
--bold-italic-fg: var(--bold-fg);
--highlight1: var(--ctp-mocha-maroon); /*#E8A2AF*/
--highlight2: var(--ctp-mocha-green); /*#ABE9B3*/
--highlight3: var(--ctp-mocha-lavender); /*#C9CBFF*/
--highlight4: var(--ctp-mocha-peach); /*#F8BD96*/
--scheme-rosewater: var(--ctp-mocha-rosewater);
--scheme-flamingo: var(--ctp-mocha-flamingo);
--scheme-pink: var(--ctp-mocha-pink);
--scheme-mauve: var(--ctp-mocha-mauve);
--scheme-red: var(--ctp-mocha-red);
--scheme-maroon: var(--ctp-mocha-maroon);
--scheme-peach: var(--ctp-mocha-peach);
--scheme-yellow: var(--ctp-mocha-yellow);
--scheme-green: var(--ctp-mocha-green);
--scheme-teal: var(--ctp-mocha-teal);
--scheme-sky: var(--ctp-mocha-sky);
--scheme-sapphire: var(--ctp-mocha-sapphire);
--scheme-blue: var(--ctp-mocha-blue);
--scheme-lavender: var(--ctp-mocha-lavender);
}
/*-------------------MOCHA OG-----------------------*/

.card.night_mode {
background-color: #1E1E2E;
--text-fg: #D9E0EE;
--text-fg-faint: #988BA2;
--text-bg-selected: #302D41;
--card-bg: #302D41;
--card-border: #6E6C7E;
--card-box-shadow: #0000001f;
--divider: #6E6C7E;
--tag-fg: #C3BAC6;
 --tag-bg: #6E6C7E;
--tag-fg-active: #F5E0DC;
--tag-bg-active: #1613201f;
--tag-border: transparent;
--cloze-fg: #FAE3B0;
--cloze-bg: var(--ctp-mocha-base);
--link-fg: #96CDFB;
--link-bg: transparent;
--link-fg-active: #89DCEB;
--link-bg-active: transparent;
--bold-fg: #F28FAD;
--italic-fg: #ABE9B3;
--h1-fg: #F8BD96;
--h2-fg: #B5E8E0;
--h3-fg: #DDB6F2;
--h4-fg: #E8A2AF;
--h5-fg: #89DCEB;
--bold-italic-fg: var(--bold-fg);
--highlight1: #E8A2AF;
--highlight2: #ABE9B3;
--highlight3: #C9CBFF;
--highlight4: #F8BD96;
--scheme-rosewater: var(--ctp-mocha-rosewater);
--scheme-flamingo: var(--ctp-mocha-flamingo);
--scheme-pink: var(--ctp-mocha-pink);
--scheme-mauve: var(--ctp-mocha-mauve);
--scheme-red: var(--ctp-mocha-red);
--scheme-maroon: var(--ctp-mocha-maroon);
--scheme-peach: var(--ctp-mocha-peach);
--scheme-yellow: var(--ctp-mocha-yellow);
--scheme-green: var(--ctp-mocha-green);
--scheme-teal: var(--ctp-mocha-teal);
--scheme-sky: var(--ctp-mocha-sky);
--scheme-sapphire: var(--ctp-mocha-sapphire);
--scheme-blue: var(--ctp-mocha-blue);
--scheme-lavender: var(--ctp-mocha-lavender);
}

/*-------------------MACCHIATO-----------------------*/

/*
.card.night_mode {
background-color: var(--ctp-macchiato-base);
--text-fg: var(--ctp-macchiato-text);
--text-fg-faint: var(--ctp-macchiato-subtext0);
--text-bg-selected: var(--ctp-macchiato-surface1);
--card-bg: var(--ctp-macchiato-surface0);
--card-border: var(--ctp-macchiato-overlay0);
--card-box-shadow: #0000001f;
--divider: var(--ctp-macchiato-overlay0);
--tag-fg: var(--ctp-macchiato-overlay2);
--tag-bg: var(--ctp-macchiato-overlay0);
--tag-fg-active: var(--ctp-macchiato-rosewater);
--tag-bg-active: #11111b1f;
--tag-border: transparent;
--cloze-fg: var(--ctp-macchiato-yellow);
--cloze-bg: var(--ctp-macchiato-base);
--link-fg: var(--ctp-macchiato-blue);
--link-bg: transparent;
 --link-fg-active: var(--ctp-macchiato-sky);
--link-bg-active: transparent;
--bold-fg: var(--ctp-macchiato-red);
--italic-fg: var(--ctp-macchiato-green);
--h1-fg: var(--ctp-macchiato-peach);
--h2-fg: var(--ctp-macchiato-teal);
--h3-fg: var(--ctp-macchiato-mauve);
--h4-fg: var(--ctp-macchiato-red);
--h5-fg: var(--ctp-macchiato-sky);
--bold-italic-fg: var(--bold-fg);
--highlight1: var(--ctp-macchiato-maroon);
--highlight2: var(--ctp-macchiato-green);
--highlight3: var(--ctp-macchiato-lavender);
--highlight4: var(--ctp-macchiato-peach);
--scheme-rosewater: var(--ctp-macchiato-rosewater);
--scheme-flamingo: var(--ctp-macchiato-flamingo);
--scheme-pink: var(--ctp-macchiato-pink);
--scheme-mauve: var(--ctp-macchiato-mauve);
--scheme-red: var(--ctp-macchiato-red);
--scheme-maroon: var(--ctp-macchiato-maroon);
--scheme-peach: var(--ctp-macchiato-peach);
--scheme-yellow: var(--ctp-macchiato-yellow);
--scheme-green: var(--ctp-macchiato-green);
--scheme-teal: var(--ctp-macchiato-teal);
--scheme-sky: var(--ctp-macchiato-sky);
--scheme-sapphire: var(--ctp-macchiato-sapphire);
--scheme-blue: var(--ctp-macchiato-blue);
--scheme-lavender: var(--ctp-macchiato-lavender);
}
*/

/*-------------------FRAPPE-----------------------*/

/*
.card.night_mode {
background-color: var(--ctp-frappe-base);
--text-fg: var(--ctp-frappe-text);
--text-fg-faint: var(--ctp-frappe-subtext0);
--text-bg-selected: var(--ctp-frappe-surface1);
--card-bg: var(--ctp-frappe-surface0);
--card-border: var(--ctp-frappe-overlay0);
--card-box-shadow: #0000001f;
--divider: var(--ctp-frappe-overlay0);
--tag-fg: var(--ctp-frappe-overlay2);
--tag-bg: var(--ctp-frappe-overlay0);
--tag-fg-active: var(--ctp-frappe-rosewater);
--tag-bg-active: #11111b1f;
--tag-border: transparent;
--cloze-fg: var(--ctp-frappe-yellow);
--cloze-bg: var(--ctp-frappe-base);
--link-fg: var(--ctp-frappe-blue);
--link-bg: transparent;
--link-fg-active: var(--ctp-frappe-sky);
--link-bg-active: transparent;
--bold-fg: var(--ctp-frappe-red);
--italic-fg: var(--ctp-frappe-green);
--h1-fg: var(--ctp-frappe-peach);
--h2-fg: var(--ctp-frappe-teal);
--h3-fg: var(--ctp-frappe-mauve);
 --h4-fg: var(--ctp-frappe-red);
--h5-fg: var(--ctp-frappe-sky);
--bold-italic-fg: var(--bold-fg);
--highlight1: var(--ctp-frappe-maroon);
--highlight2: var(--ctp-frappe-green);
--highlight3: var(--ctp-frappe-lavender);
--highlight4: var(--ctp-frappe-peach);
--scheme-rosewater: var(--ctp-frappe-rosewater);
--scheme-flamingo: var(--ctp-frappe-flamingo);
--scheme-pink: var(--ctp-frappe-pink);
--scheme-mauve: var(--ctp-frappe-mauve);
--scheme-red: var(--ctp-frappe-red);
--scheme-maroon: var(--ctp-frappe-maroon);
--scheme-peach: var(--ctp-frappe-peach);
--scheme-yellow: var(--ctp-frappe-yellow);
--scheme-green: var(--ctp-frappe-green);
--scheme-teal: var(--ctp-frappe-teal);
--scheme-sky: var(--ctp-frappe-sky);
--scheme-sapphire: var(--ctp-frappe-sapphire);
--scheme-blue: var(--ctp-frappe-blue);
--scheme-lavender: var(--ctp-frappe-lavender);
}
*/

/* -------------------------------------------------- BACKGROUND */
.card {
cursor: default;
padding: 0.5em 0;
}
html:not(.mobile) .card {
padding: 0.5em;
}
.card::-webkit-scrollbar {
display: none;
}

/* -------------------------------------------------- FLASHCARD */
.prettify-flashcard {
background-color: var(--card-bg);
border-radius: 1em;
border: 1px solid var(--card-border);
box-shadow: var(--card-box-shadow) 0px 7px 14px 0px, var(--card-box-shadow) 0px
3px 6px 0px;
color: var(--text-fg);
font-family: var(--font-family);
font-size: var(--font-size-regular);
line-height: 1.5;
margin: 0 auto;
max-width: var(--card-max-width);
text-align: var(--card-text-align);
word-wrap: normal;
}
.mobile .prettify-flashcard { font-size: var(--font-size-small); }
.prettify-flashcard ::selection {
background-color: var(--text-bg-selected);
}
.cloze-type {
text-align: left;
}
/* -------------------------------------------------- FIELDS */
.prettify-field {
margin: 0.75em;
margin-bottom: 0.85em;
}
.mobile .prettify-field {
margin: 0.25em;
margin-bottom: 0.75em;
}

.prettify-field--back {
color: var(--text-fg);
font-size: var(--font-size-regular);
}

/* -------------------------------------------------- CLOZE */
.cloze {
border-radius: 0.25em;
font-weight: bold;
background-color: var(--cloze-bg);
color: var(--cloze-fg);
padding: 0.1em;
}

/* -------------------------------------------------- DECK */
.prettify-deck {
margin: 0.75em;
margin-left: 1em;
margin-bottom: 0.5em;
display: flex;
color: var(--text-fg-faint);
font-size: var(--font-size-small);
}
.mobile .prettify-deck {
margin: 1em;
}

/* -------------------------------------------------- TAGS */
.prettify-tags {
margin: 0.5em;
margin-left: 1em;
display: flex;
flex-flow: row wrap;
font-size: var(--font-size-small);
}
.mobile .prettify-tags {
margin: 1em;
}

.prettify-tag {
all: initial;
background-color: var(--tag-bg);
border-radius: 0.2em;
color: var(--tag-fg);
display: inline;
font-size: var(--font-size-small);
font-family: var(--font-family);
margin: 0.25em;
 padding: 0.25em;
transition: all 0.25s;
word-break: break-word;
}
.prettify-tag:hover {
background-color: var(--tag-bg-active);
color: var(--tag-fg-active);
cursor: pointer;
}

/* -------------------------------------------------- DIVIDER */
.prettify-field hr { border: none; border-bottom: 1px dashed var(--divider);
background-color: transparent; width: 80%;}
.prettify-divider {
background-color: transparent;
border: none;
border-bottom: 1px dashed var(--divider);
margin: 1em;
padding: 0;
}
.prettify-divider--answer {
margin: 0 0 1em;
}

/* -------------------------------------------------- TABLES */
table {
border-collapse: separate;
border-spacing: 0;
min-width: 60%;
position: relative;
box-align: center;
margin-left: auto;
margin-right: auto;
overflow: scroll;
border: 1px solid;
text-align: center;
border-color: var(--card-border);
}
td, th {
border: 1px solid;
text-align: center;
border-color: var(--card-border);
}
/*
tr:first-child td:first-child, tr:first-child th:first-child { border-top-left-
radius: 0.8em; }
tr:first-child td:last-child, tr:first-child th:last-child { border-top-right-
radius: 0.8em; }
tr:last-child td:first-child, tr:last-child th:first-child { border-bottom-left-
radius: 0.8em; }
tr:last-child td:last-child, tr:last-child th:last-child { border-bottom-right-
radius: 0.8em; }
tr:first-child td, tr:first-child th { border-top-width: 2px;}
tr:last-child td, tr:last-child th { border-bottom-width: 2px;}
tr td:first-child, tr th:first-child { border-left-width: 2px;}
tr td:last-child, tr th:last-child { border-right-width: 2px;}*/
tr:nth-of-type(odd) { background-color: var(--card-box-shadow);}
/* -------------------------------------------------- HYPERLINKS */
a, a:visited {
text-decoration: none;
color: var(--link-fg);
}
a:hover, a:active {
text-decoration: underline;
color: var(--link-fg-active);
}

/* -------------------------------------------------- FORMATTING */
b {
color: lightgreen;
text-decoration:none ;
}

i {
color: pink;
text-decoration:none ;
}

b > i,
i > b {
color: yellow;
text-decoration:none ;
}

i > u,
u > i {
color: #D8BFD8;
text-decoration:underline ;
}

u {
color: skyblue;
text-decoration:none ;
}

hl {
color: var(--highlight1);
}
hl2 {
color: var(--highlight2);
}
hl3 {
color: var(--highlight3);
}
hl4 {
color: var(--highlight4);
}
/* -------------------------------------------------- END OF THEME */
/*-------Kanging Around-------*/
h1, h2, h3, h4, h5 { margin: 0em;}
h1 {
color: var(--h1-fg);
}
h2 {
color: var(--h2-fg);
}
h3 {
 color: var(--h3-fg);
}
h4 {
color: var(--h4-fg);
}
h5 {
color: var(--h5-fg);
}
.center-text { text-align: center;}

/* The AnKing wishes you the best of luck! Be sure to check out our YouTube channel
and Instagram
for all things Anki and Med School related (including how to customize this card
type and use these decks):
www.AnKingMed.com
@ankingmed
*/

/*#########################################################
################ USER CUSTOMIZATION START ##############*/
/* You can choose colors at www.htmlcolorcodes.com */

/* TIMER ON/OFF */
.timer {
display: block; /* ‘none’ or ‘block’ */
}

/* TAGS ON/OFF DESKTOP & MOBILE*/

#tags-container {
display: none; /* ‘none’ or ‘block’ */
}

.mobile #tags-container {
display: none; /* ‘none’ or ‘block’ */
}

/* MOVE TAGS UP FOR 'NO-DISTRACTIONS' ADD-ON */

#tags-container {
padding-bottom: 0px; /* 0 normal, 55 to move up */
}
/*~~~~~~~~~FONT SIZE~~~~~~~~~*/
/*NOTE: anything with 'px' will keep a font that size indefinitely,
'rem' is a fraction of this size above and allows all text to change size with the
above setting */
/* Desktop */
html {
font-size: 21px;
}
/* Mobile */
.mobile {
font-size: 28px;
}

/*IPAD ADJUSTMENTS (currently not applied)

.ipad .card,
.ipad #extra {
font-size: 28px;
}
.ipad .hints {
font-size: 24px;
}
.ipad #firstaid,
.ipad #sketchy,
.ipad #sketchy2,
.ipad #sketchyextra,
.ipad #picmonic,
.ipad #pixorize,
.ipad #physeo,
.ipad #additional {
font-size: 20px !important;
}
*/

/*REVEALED HINTS FONT SIZE*/

.hints {
font-size: .85rem;
}

/*Other Fields Font Size*/

#firstaid,
#sketchy,
#sketchy2,
#sketchyextra,
#picmonic,
#pixorize,
#physeo,
#additional {
font-size: .6rem !important;
}

/*Other Fields Font Size on Mobile*/

.mobile #firstaid,
.mobile #sketchy,
.mobile #sketchy2,
.mobile #sketchyextra,
.mobile #picmonic,
.mobile #pixorize,
.mobile #physeo,
.mobile #additional {
 font-size: 20px !important;
}

/*~~~~~~~~~FONT STYLE~~~~~~~~~*/
.card,
kbd {
font-family: Iosevka Comfy Duo; /*Step exam's font is Arial Greek*/
}

/*~~~~~~~MAX IMAGE HEIGHT/WIDTH~~~~~~~*/

img {
max-width: 85%;
max-height: 100%;
}

#extra img,
#notes img,
#missed img,
#pathoma img,
#bnb img {
max-width: 85%;
}

#firstaid img,
#sketchy img,
#sketchy2 img,
#sketchyextra img,
#picmonic img,
#pixorize img,
#physeo img,
#additional img {
max-width: 60%;
}

/*~~~~~~~~~COLORS~~~~~~~~~/
/* Default Text Color */
.card {
color: black;
}
/* Background Color */
.card {
background-color: #D1CFCE;
}
/* Cloze Color */
.cloze {
color: blue;
}
/* "Extra" Field Color */
#extra {
color: navy;
}
/* Hint Reveal Color */
.hints {
color: #4297F9;
}
/* Missed Questions Hint Reveal Color */
#missed {
color: red;
}
/* Timer Countdown Color */
.timer {
color: transparent;
}
/* Empty Link Color */
a:not([href]),
a[href^="javascript:"] {
text-decoration: none;
color: inherit;
}

/*~~~~~~~~NIGHT MODE COLORS~~~~~~~~*/

/* NM Default Text Color */
.nightMode.card,
.night_mode .card {
color: #FFFAFA !important;
}
/* NM Background Color */
.nightMode.card,
.night_mode .card {
background-color: #272828 !important;
}
/* NM Cloze Color */
.nightMode .cloze,
.night_mode .cloze {
color: #4297F9 !important;
}
/* NM "Extra" Field Color */
.nightMode #extra,
.night_mode #extra {
color: magenta;
}
/* NM Hint Reveal Color */
.nightMode .hints,
.night_mode .hints {
color: cyan;
}

/* ~~~~~COLOR ACCENTS FOR BOLD-ITALICS-UNDERLINE~~~~~~*/

b {
color: inherit;
}

u {
color: inherit;
}

i {
color: inherit;
}

/*################ USER CUSTOMIZATION END ################

###########################################################*/

/* Styling For Whole Card*/

.prettify-flashcard {
 background-color: var(--card-bg);
border-radius: 1em;
border: 1px solid var(--card-border);
box-shadow: var(--card-box-shadow) 0px 7px 14px 0px, var(--card-box-shadow) 0px
3px 6px 0px;
color: var(--text-fg);
font-family: var(--font-family);
font-size: var(--font-size-regular);
line-height: 1.5;
margin: 0 auto;
max-width: var(--card-max-width);
text-align: var(--card-text-align);
word-wrap: normal;
}
.mobile .prettify-flashcard { font-size: var(--font-size-small);
}

/* Style the horizontal line */

hr { opacity: .7 }

/* Formatting For Timer */

.timer {
font-size: 20px;
margin: 12em auto auto auto;
}

/* ~~~~~~~~~ FIELDS ~~~~~~~~~ */

/* Cloze format */
.cloze {
font-weight: bold;
}

/* Adjustments For Cloze Edit In Review On Mobile */

.clozefield,
.mobile .editcloze {
display: none;
}
.editcloze,
.mobile .clozefield {
display: block;
}

/* Text When Hint Is Shown*/

.hints {
font-style: italic;
}

/*add spacing between hints and extra field*/

.hints+#extra {
margin-top: 1rem;
}

/* Extra Field */
#extra {
font-style: italic;
font-size: 1rem;
}
table.one {
 font-style: normal!important;
color: black;
font-size: 10pt;
background-color: #ffffff;
border-color: #000000;
border-style: solid;
}
.mobile:not(.ipad) table.one {
width:100%!important;
}

/* ~~~~~~~~~DETAILS FOR IMAGES~~~~~~~~~ */

.mobile .card img {
max-width: 100% !important;
}
#extra img {
min-width: 30%;
}

.mobile .hints, .mobile #extra img {

max-width: 100% !important;
}

/* Classes for individual cards */

.image40 img { width: 40% !important;}
.image50 img { width: 50% !important;}
.image60 img { width: 60% !important;}
.image70 img { width: 70% !important;}
.image80 img { width: 80% !important;}
.image90 img { width: 90% !important;}

.image40 img,
.image50 img,
.image60 img,
.image70 img,
.image80 img,
.image90 img {
display: block;
margin-right: auto;
margin-left: auto;
}

.mobile .image40 img,

.mobile .image50 img,
.mobile .image60 img,
.mobile .image70 img,
.mobile .image80 img,
.mobile .image90 img {
width: auto !important;
}

/*Image hover zoom*/

#extra img:active,
#notes img:active,
#missed img:active,
#pathoma img:active,
#bnb img:active {
transform: scale(1.2);
}

#firstaid img:active,
#sketchy img:active,
#sketchy2 img:active,
#sketchyextra img:active,
#picmonic img:active,
#pixorize img:active,
#physeo img:active,
#additional img:active {
transform: scale(1.5);
}

.mobile img:active {
transform: scale(1.0) !important;
}

/* ~~~~~~~MNEMONICS LEFT JUSTIFIED~~~~~~~ */

.mnemonics {
display: inline-block;
text-align: left; /* can change to center to 'turn off' this feature */
}
.centerbox {
text-align: center;
}

/* ~~~~~~~~~ LISTS ~~~~~~~~~ */

ul {
padding-left: 40px;
display: inline-block;
max-width: 50%;
margin: auto;
text-align: left;
}
ol {
padding-left: 40px;
display: inline-block;
max-width: 50%;
margin: auto;
text-align: left;
}
.mobile ul {
display: inline-block;
text-align: left;
max-width: 100%;
}
.mobile ol {
display: inline-block;
text-align: left;
max-width: 100%;
}

/* ~~~~~~~~~ ADD-ON CONFIGURATIONS ~~~~~~~~~ */

/*Compatibility with Image Style Editor add-on*/
.card {
--w: 0%;
}
.mobile .card {
--w: 100% !important;
}

/*Max image width for resize images in editor add-on */

.card [class^=ui-] img {
max-width: 100% !important;
}

/*Compatibility with resize images in editor add-on */

.resizer {
min-width: 0% !important;
}
.mobile .resizer {
min-width: 100% !important;
}

/* Fix to make pop-up dictionary images the right size */

.qtip img {
max-width: 95% !important;
max-height: 95% !important;
}

/* ~~~~~~ANKING HYPERLINK IMAGE~~~~~~ */

#pic {
opacity: 0.0;
font-size: 16px;
font-family: Comic Sans !important;
font-style: bold;
height: 50px;
border: 0;
position: fixed;
bottom: 10px;
right: 10px;
display: block;
}

#pic:hover {
opacity: 1;
transition: opacity 0.2s ease;
}

.mobile #pic {
display: none;
}

/* ~~~~~~~~~ TAGS ~~~~~~~~~ */

/* Container To Fix Tags At Bottom Of Screen */
#tags-container {
position: fixed;
bottom: .5px;
width: 100%;
line-height: .45rem;
margin-left: -15px;
background-color: transparent;
}
/* Clickable Tags (need to download the add-on) */
kbd {
display: inline-block;
letter-spacing: .1px;
font-weight: bold;
font-size: 10px !important;
text-shadow: none !important;
padding: 0.05rem 0.1rem !important;
margin: 1px !important;
border-radius: 4px;
border-width: 1.5px !important;
border-style: solid;
background-color: transparent !important;
box-shadow: none !important;
opacity: 0.5;
vertical-align: middle !important;
line-height: auto !important;
height: auto !important;
}

/* Tag Becomes More Visible On Hover */

kbd:hover {
opacity: 1;
transition: opacity 0.2s ease;
}

/* Tag Colors */
kbd:nth-of-type(1n+0) { border-color: #F44336; color: #F44336!important; }
kbd:nth-of-type(2n+0) { border-color: #9C27B0; color: #9C27B0!important; }
kbd:nth-of-type(3n+0) { border-color: #3F51B5; color: #3F51B5!important; }
kbd:nth-of-type(4n+0) { border-color: #03A9F4; color: #03A9F4!important; }
kbd:nth-of-type(5n+0) { border-color: #009688; color: #009688!important; }
kbd:nth-of-type(6n+0) { border-color: #C0CA33; color: #C0CA33!important; }
kbd:nth-of-type(7n+0) { border-color: #FF9800; color: #FF9800!important;}
kbd:nth-of-type(8n+0) { border-color: #FF5722; color: #FF5722!important; }
kbd:nth-of-type(9n+0) { border-color: #9E9E9E; color: #9E9E9E!important; }
kbd:nth-of-type(10n+0) { border-color: #607D8B; color: #607D8B!important; }

/* Tag Mobile Adjustments */

.mobile kbd {
opacity: .9;
margin: 1px !important;
display: inline-block;
font-size: 10px !important;
}
.mobile #tags-container {
line-height: 0.6rem;
margin-left: 0px;
}

/* OME BANNER */
.banner-ome {
max-width: 300px;
display: block;
margin-left: auto;
margin-right: auto;
}
.mobile .banner-ome {
display: none;
}

#button-ome {
display: none;
}
.mobile #button-ome {
display: inline;
}

/* ~~~~~~~~~BUTTON LAYOUT~~~~~~~~~ */
.button-general {
outline: 0;
border-radius: 0.12em;
border: 1px solid #525253 !important;
padding: 5px 5px;
text-align: center;
display: inline-block;
font-size: 9.5px;
background-color: #424242;
color: #AFAFAF !important;
margin-top: 8px;
}

.mobile .button-general {
font-size: 18px;
padding: 9px 7px;
}

.expanded-button {
display: block;
margin: auto;
margin-top: 10px;
font-weight: bold;
width: 50% !important;
background: #ababab !important;
color: black !important;
font-weight: bold;
width: 50% !important;
}

#button-mq:not(.expanded-button) {
color: #c26165 !important;
}

html:not(.mobile) .button-general:hover {
cursor: default;
background-color: #E9E9E9 !important;
color: #363638 !important;
}

html:not(.mobile) #button-mq:hover {
background-color: #FA8072 !important;
color: black !important;
}
html:not(.mobile) #button-pat:hover {
background-color: #EABCE4 !important;
}

html:not(.mobile) #button-fa:hover {
background-color: #FFF1B8 !important;
}

html:not(.mobile) #button-sketchy:hover {
background-color: #7EDEC0 !important;
}

html:not(.mobile) #button-pixorize:hover {
background-color: #ea8eed !important;
}

html:not(.mobile) #button-physeo:hover {
background-color: #A1C0C6 !important;
}

html:not(.mobile) #button-bootcamp:hover {
background-color: #0b8198 !important;
}

html:not(.mobile) #button-ome:hover {
background-color: #47C3F3 !important;
}