/* Prettified ANKINGOVERHAUL*/

/* -------------------------------------------------- PREFERENCES */
:root {
--card-max-width: 40em;
--card-text-align: center;
--font-size-regular: 16px;
--font-size-small: 14px;
--font-family: "Inter", -apple-system, sytem-ui, BlinkMacSystemFont, Segoe UI,
Roboto, Helvetica, Arial, sans-serif;
--img-width: 80%;
--img-brightness: 1;
--img-filter: none;
}

/* -------------------------------------------------- COLORS */
.card {
/* Light theme */
background-color: #cfd6d8;
--text-fg: #333333e6;
--text-fg-faint: #333333cc;
--text-bg-selected: #3333331a;
--card-bg: #ffffff;
--card-border: #f7f7f7;
--card-box-shadow: #3c42570f;
--divider: #3333331a;
--tag-fg: #333333cc;
--tag-bg: #3333330f;
--tag-fg-active: #333333;
--tag-bg-active: #3333331a;
--tag-border: transparent;
--cloze-fg: #348ccb;
--cloze-bg: transparent;
--link-fg: #2a70a2;
--link-bg: transparent;
--link-fg-active: #2f7eb6;
--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);
}

.card.night_mode {
/* Dark theme */
background-color: #242426;
--text-fg: #ffffffe6;
--text-fg-faint: #ffffffb3;
--text-bg-selected: #ffffff1f;
--card-bg: #2e2f31;
--card-border: #ffffff0a;
--card-box-shadow: #0000001f;
--divider: #ffffff1f;
--tag-fg: #ffffffb3;
--tag-bg: #ffffff14;
--tag-fg-active: #ffffff;
--tag-bg-active: #ffffff1f;
--tag-border: transparent;
--cloze-fg: #99ebff;
 --cloze-bg: transparent;
--link-fg: #5da3d5;
--link-bg: transparent;
--link-fg-active: #71afda;
--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);
}

/* -------------------------------------------------- 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: 0.25em;
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: break-word;
}
.prettify-flashcard ::selection {
background-color: var(--text-bg-selected);
}

/* -------------------------------------------------- FIELDS */
.prettify-field {
margin: 2em;
}
.mobile .prettify-field {
margin: 1em;
}

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

/* -------------------------------------------------- CLOZE */
.cloze {
background-color: var(--cloze-bg);
 color: var(--cloze-fg);
}

/* -------------------------------------------------- DECK */
.prettify-deck {
margin: 2em;
display: flex;
color: var(--text-fg-faint);
font-size: var(--font-size-small);
white-space: nowrap;
}
.mobile .prettify-deck {
margin: 1em;
}

.prettify-subdeck {
text-decoration: underline;
text-overflow: ellipsis;
overflow: hidden;
}

/* -------------------------------------------------- TAGS */
.prettify-tags {
margin: 2em;
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 0.5em 0.5em 0;
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-divider {
background-color: transparent;
border: none;
border-bottom: 1px dashed var(--divider);
margin: 1em;
padding: 0;
}
.prettify-divider--answer {
margin: 0 0 1em;
}

/* -------------------------------------------------- IMAGES */
img {
border-radius: 0.25em;
display: block;
margin: 1em auto;
max-width: var(--img-width) !important;
transition: max-width 0.25s 0.1s, opacity 0.25s 0.1s, filter 0.1s, transform 0s;
}
.night_mode img {
filter: var(--img-filter);
opacity: var(--img-brightness);
}
img:hover {
cursor: zoom-in;
filter: none;
max-width: 100% !important;
opacity: 1;
}
img + br {
display: none;
}
html:not(.mobile) img:active {
border: 1px solid var(--link-fg-active);
cursor: zoom-out;
filter: none;
left: 0;
max-width: 95% !important;
opacity: 1;
position: fixed;
top: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
z-index: 100;
}

/* -------------------------------------------------- TABLES */
table {
border-collapse: separate;
border-spacing: 0;
margin: 0 auto;
max-width: 100%;
}
table thead {
background-color: var(--card-border);
}
table tr:nth-of-type(even) {
background-color: var(--card-border);
}
table tr:first-child th:first-child {
border-top-left-radius: 0.25em;
}
table tr:first-child th:last-child {
border-top-right-radius: 0.25em;
}
table tr:last-child td:first-child {
 border-bottom-left-radius: 0.25em;
}
table tr:last-child td:last-child {
border-bottom-right-radius: 0.25em;
}
table th {
border-bottom: solid 1px var(--text-bg-selected);
border-left: solid 1px var(--text-bg-selected);
border-top: solid 1px var(--text-bg-selected);
padding: 0.5em;
}
table th:last-child {
border-right: solid 1px var(--text-bg-selected);
}
table td {
border-bottom: solid 1px var(--text-bg-selected);
border-left: solid 1px var(--text-bg-selected);
padding: 0.5em;
}
table td:last-of-type {
border-right: solid 1px var(--text-bg-selected);
}

/* -------------------------------------------------- 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: var(--bold-fg);
}

i {
color: var(--italic-fg);
}

b > i,
i > b {
color: var(--bold-italic-fg);
}

u {
color: var(--underline-fg);
}

pre {
white-space: normal;
}

/* -------------------------------------------------- CUSTOM FONTS */

@font-face {
font-family: Inter;
src: local("Inter-Regular"), url("_Inter-Regular.woff2") format("woff2");
 font-style: normal;
font-weight: normal;
}
@font-face {
font-family: Inter;
src: local("Inter-Bold"), url("_Inter-Bold.woff2") format("wofff2");
font-style: normal;
font-weight: bold;
}
@font-face {
font-family: Inter;
src: local("Inter-Italic"), url("_Inter-Italic.woff2") format("wofff2");
font-style: italic;
font-weight: normal;
}
@font-face {
font-family: Inter;
src: local("Inter-BoldItalic"), url("_Inter-BoldItalic.woff2") format("wofff2");
font-style: italic;
font-weight: bold;
}
/* -------------------------------------------------- END OF THEME */

/* --------------to change the theme copy paste the styling of the prettify cards
above this comment and change text align to center in
preferences-------------------------------------------*/

/* 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: 32px;
margin: 12em auto auto auto;
margin-top: 10px;
text-align: center;
font-weight: bold;
}

/* ~~~~~~~~~ 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;
}