/*
Theme:      Core Theme for Aquae, Nox, & Lux Roam themes
Version:    1.2.3
By:         Cal Robert Lee (https://www.calrobert.com/)

Fixes:      - fixed left dropdown colors (thanks Morgan @zyigo!)

Notes:      - Thanks to the supportive people on r/RoamResearch, GitHub and Twitter!
            - I have been changing a lot of thing in my professional career! Which is the reason for some of the delays
            - Super excited to have been selected to be on RoamResearch's Official theme's page!
            - To install visit: https://github.com/calrobertlee/roam-css-styles
*/


/*---------------------------------- 
    #BASIC FONTS   
------------------------------------*/
.rm-title-textarea,
.roam-body .roam-app h1.rm-title-display { /* page title */
    font-weight: 500;
    font-size: 40px;
    font-family: var(--main-font);
    color: var(--title-color) !important;
}
.flex-h-box.window-headers .level2 a { /* right sidebar page title */
    font-weight: 300;
    font-size: 1em;
    font-family: var(--main-font);
    color: var(--ref-title-color) !important;
}
.roam-body .roam-app h1 { /* h1 */
    font-family: var(--main-font);
    color: var(--header-color) !important;
}
.rm-level2 { /* h2 */
    font-weight: 500;
    font-size: 1.4em;
    font-family: var(--main-font);
    color: var(--header-color);
}
.rm-level3 { /* h3 */
    font-weight: 500;
    font-size: 1.15em;
    font-family: var(--main-font);
    color: var(--header-color);
}
.roam-app { /* main body */
    font-weight: 400;
    font-size: 1em;
    font-family: var(--main-font);
    color: var(--main-font-color) !important;
}
  
/*---------------------------------- 
    #LINKS
------------------------------------*/
.rm-page-ref--link { /* internal link color */
    color: var(--page-link-color);
}
.rm-page-ref--link strong{ /* bold link color */
    color: var(--page-link-color);
}
.rm-page-ref--link:focus,
.rm-page-ref--link:hover {  /* internal link hover state */
    color: var(--page-link-color);
    text-decoration: none;
}
.rm-page-ref__brackets { /* brackets */
    color: var(--page-bracket-color);
}
.roam-app a { /* external link */
    color: var(--external-link-color);
    text-decoration: none;
}
.roam-app a:focus,
.roam-app a:hover { /* external link hover */
    color: var(--external-link-hover-color);
}

/*---------------------------------- 
    #ALIAS LINKS
------------------------------------*/
span [style*="background-color: rgb(235, 241, 245);"] {
    background-color: #00000000 !important;        
}
span [style*="color: rgb(245, 86, 86);"] {
    color: var(--page-link-color) !important;
}
span:hover [style*="color: rgb(245, 86, 86);"] {
    color: var(--alias-hover-color) !important;
}
span [style*="padding: 4px 6px;"] { /* alias padding to match body text */
    padding: 0px 0px !important;
}

/*---------------------------------- 
    #TAGS
------------------------------------*/
  .rm-page-ref--tag {
    color:  var(--tag-font-color )!important;
    font-weight: 400;
    background-color: var(--tag-bg-color);
    border-radius: var(--tag-border-radius);
    border: var(--tag-border);
    padding: var(--tag-padding);
    text-decoration: none;
  }
  .rm-page-ref--tag:hover {
    color: var(--tagHover-font-color) !important;
    font-weight: 400;
    background-color: var(--tagHover-bg-color);
    border-radius: var(--tag-border-radius);
    border: var(--tagHover-border);
    padding: var(--tag-padding);
    text-decoration: none;
  }

/*---------------------------------- 
    #HIGHLIGHTS   
------------------------------------*/
.rm-highlight { /* text highlighting */
    background-color: var(--highlight-background-color);
    color: var(--highlight-font-color);
    border-radius: 0px;
    padding: var(--highlight-padding);
}
.rm-highlight .rm-page-ref--link { /* highlighted link color */
    color: var(--highlight-link-color);
}
.block-highlight-blue { /* block selection */
    background-color: var(--block-highlight);
}
.block-highlight-yellow { /* block highlight */
    background-color: var(--block-highlight-bg);
}
.rm-embed-container { /* embed block highlight */
    background-color: var(--embed-container-bg);
}

/*---------------------------------- 
    #BULLETS & NEST LINE
------------------------------------*/
.rm-bullet__inner { /* bullet */
    border-radius: 50%;
    width: 5px;
    height: 5px;
    background-color: var(--bullet-color);
}
.rm-bullet.rm-bullet--closed .rm-bullet__inner { /* collapsed bullet */
    background-color: var(--bullet-color);
    border: 4px solid var(--bullet-closed-border-color);
}
#right-sidebar .rm-bullet.rm-bullet--closed .rm-bullet__inner { /* collapsed bullet */
    background-color: var(--bullet-color);
    border: 4px solid var(--bullet-closed-border-color);
}
/* nest diagram line */
.rm-multibar {
    border-color: var(--multibar);
}
.rm-multibar:hover {
    border-right: 1px solid var(--theme-blue-1);
    width: calc(1px + calc(1px - -5px));
}

/*---------------------------------- 
    #TODO 
------------------------------------*/
.checkmark { /* todo */
  position: absolute;
  top: var(--checkmark-top);
  left: var(--checkmark-left);
  height: var(--checkmark-height);
  border-radius: var(--checkmark-border-radius);
  width: var(--checkmark-width);
  border: var(--checkmark-border);
  background-color: var(--checkmark-bg-color);
}
.check-container input:checked ~ .checkmark { /* done */
  position: absolute;
  top: var(--checkmark-top);
  left: var(--checkmark-left);
  height: var(--checkmark-height);
  border-radius: var(--checkmark-border-radius);
  width: var(--checkmark-width);
  border: var(--checkedmark-border);
  background-color: var(--checkedmark-bg-color);
}
.check-container .checkmark:after { /* done check symbol */
  left: 3.5px;
  top: 0.25px;
  width: 6px;
  height: 10px;
  border: var(--checkmark-color);
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(40deg) scale(0.8);
}

/*---------------------------------- 
    #CODE
------------------------------------*/
code { /* inline code */
background: var(--code-bg);
color: var(--code-font-color);
border: var(--code-border);
border-radius: var(--codemirror-border-radius);
}
.CodeMirror { /* code block */
border: 1px solid var(--codemirror-border-color);
border-radius: var(--codemirror-border-radius);
background: var(--codemirror-bg) !important;
color: var(--main-font-color) !important;
}
.Codemirror-code {
padding-left: 12px !important;
}
div.CodeMirror-selected { /* selected color */
background: var(--block-highlight) !important;
}
.CodeMirror-gutters {
background: var(--bg-color);
padding-right: 12px;
border-right: 1px solid var(--bg-color);
}
.CodeMirror-cursor {
border-left: 2px solid var(--bullet-color) !important;
}
/*_TOGGLE--  Matching bracket like Atom  --*/
.CodeMirror-matchingbracket {
color: var(--main-font-color) !important;
border-bottom: 1px solid var(--code-matchingbracket-color);
}
/*_TOGGLE--  Matching bracket like Visual Studio Code  --*/
/*
.CodeMirror-matchingbracket {
color: var(--main-font-color) !important;
border: 1px solid var(--icon-color-hover);
background: #3c3c3c;
}
*/
.CodeMirror-linenumber {
    color: var(--codemirror-linenumber) !important;
    font-family: monospace !important;
    left: 0px !important;
}
span.cm-comment {
    color: var(--cm-comment) !important;}
span.cm-def {
    color: var(--cm-def) !important;}
span.cm-keyword {
    color: var(--cm-keyword) !important;}
span.cm-variable.cm-callee {
    color: var(--cm-callee) !important;}
span.cm-operator {
    color: var(--cm-operator) !important;}
span.cm-builtin {
    color: var(--cm-builtin) !important;}
span.cm-string {
    color: var(--cm-string) !important;}
span.cm-variable-3 {
    color: var(--cm-variable-3) !important;}
span.cm-variable-2 {
    color: var(--cm-variable-2) !important;}
span.cm-variable {
    color: var(--cm-variable) !important;}
span.cm-tag {
    color: var(--cm-tag) !important;}
span.cm-property {
    color: var(--cm-property) !important;}
span.cm-number {
    color: var(--cm-number) !important;}
span.cm-atom {
    color: var(--cm-atom) !important;}
span.cm-qualifier {
    color: var(--cm-qualifier) !important;}

/*---------------------------------- 
    #ENCRYPTED BLOCK   
------------------------------------*/
.rm-encrypted-block {
    color: var(--encrypted-font-color);
    background-color: var(--encrypted-bg);
    font-size: var(--encrypted-font-size);
    border-radius: var(--encrypted-border-radius);
    padding: var(--encrypted-padding);
    font-weight: var(--encrypted-font-weight);
  }
.rm-encrypted-block .rm-encrypted-passphrase {
    display: inline;
    cursor: pointer;
}
/*---------------------------------- 
    #REFERENCES   
------------------------------------*/
.rm-reference-container .flex-h-box > div:nth-child(3) strong { /* "Linked/Unlinked References" reference block header */
    color: var(--reference-header-color);
    border-bottom: 1px solid var(--reference-header-underline-color);
}
.flex-h-box strong[style*="color: rgb(206, 217, 224);"] { /* "Linked/Unlinked References" reference block header */
    color: var(--reference-header-color) !important;
    border-bottom: 1px solid var(--reference-header-underline-color);
}
#right-sidebar .flex-h-box > div:nth-child(2) strong { /* Right sidebar bold links color */
    color: var(--main-font-color);
}
.rm-reference-item { /* footer reference box apperance */

    background-color: var(--reference-item-bg);
    border-radius: var(--reference-item-border-radius);
    border: var(--reference-item-border)
}

/*---------------------------------- 
    #APP MAIN
------------------------------------*/
body { /* main bg color */
    background-color: var(--body-bg);
}
.roam-log-container .roam-log-page { /* divider color in daily notes */
    border-top: 1px solid var(--divider-color);
}

/*---------------------------------- 
    #APP WIDTH & PADDING    
------------------------------------*/
.roam-block-container { /* increases width of text containers */
    max-width: 100% !important;
}
.rm-block-text { /* increases width of body text */
    max-width: 85%;
}
div.roam-center > div:first-child[style*="padding-right: calc((100% - 568px) / 2);"] {
    padding-right: calc((100% - 900px) / 2) !important;
}
div.roam-center > div:first-child[style*="padding-left: calc((100% - 1032px) / 2);"] {
    padding-left: calc((100% - 900px) / 2) !important;
}
.roam-body .roam-app .roam-body-main {
    flex: 0 0 calc(100% - 0px) !important;
}
.roam-body .roam-app .roam-main .roam-article {
    position: relative;
    padding: 55px 42px 120px;
}

/*---------------------------------- 
    #LEFT SIDEBAR   
------------------------------------*/
    /* left sidebar color */
.roam-body .roam-app .roam-sidebar-container {
    background-color: var(--left-sidebar-bg);
    border-right: var(--left-sidebar-border-right);
    z-index: 0; /* added to prevent from blocking search input */
}
    /* adds padding to left sidebar contents */
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content > div:nth-child(2) {
    padding-top: 10px;
}
    /* edits top left main 3 buttons */
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button {
    font-weight: 500;
    font-size: 13px;
    padding: 6px 20px;
    color: var(--sidebar-font-color);
    cursor:default; 
}
    /* edits top left main 3 buttons — HOVER STATE */
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover {
    background-color: var(--left-sidebar-bg);
    color: var(--sidebar-font-color-hover);
    cursor:default;
}
    /* hide left sidebar divider */
.flex-v-box.starred-pages-wrapper > div:nth-child(1) {
    background-color: var(--left-sidebar-divider-color) !important;
}
    /* edits "SHORTCUTS" subheader color */
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper {
    color: var(--sidebar-shorcut-color);
}
    /* hides star icon */
span.bp3-icon-small.bp3-icon-star {
    visibility: hidden;
}
    /* "SHORTCUTS" dimension edits */
.flex-v-box.starred-pages-wrapper span{
    font-size: 12px !important;
    font-weight: bold;
    margin-bottom: 8px;
    margin-left: -10px;
}
    /* edits apperance of starred pages */
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page {
    color: var(--sidebar-font-color);
    padding: 4px 0px 8px 0px;
    cursor:default;
}
    /* edits apperance of starred pages — HOVER STATE */
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover {
    background-color: #0000;
    color: var(--sidebar-font-color-hover);
    cursor:default;
}
    /* edits sidebar ICON SIZE and positioning for Daily Notes, Graph Ov. and All Pages icons */
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .icon {
    font-size: inherit;
}

/*---------------------------------- 
    #RIGHT SIDEBAR   
------------------------------------*/
#right-sidebar { /* right sidebar color */
    background-color: var(--right-sidebar-bg) !important;
    border-left: var(--right-sidebar-border-left);
    padding-right: 55px;
}
#roam-right-sidebar-content { /* sidebar spacing */
    margin-top: -50px;
    padding: 40px 0px 0px 30px;
}
#right-sidebar > div:nth-child(2)  { /* hides close sidebard button */
    visibility: hidden;
}
#roam-right-sidebar-content > * { /* right sidebar divider padding and margin */
    margin: 0px 0px 0 20px !important;
    padding: 10px 0px 10px 0px !important;
}
    /* right sidebar divider color */
#roam-right-sidebar-content [style*="border-bottom: 1px solid rgb(138, 155, 168);"] {
    border-bottom: 1px solid var(--divider-color) !important;
}
    /* right sidebar divider padding */
#roam-right-sidebar-content [style*="margin-left: 16px; margin-right: 16px;"] {
    padding: 5px 0px; /* padding around divider */
    margin-left: 0px !important;
    margin-right: 0px !important;
}
  /* header for sidebar page OPENED — moves it left 35px */
#roam-right-sidebar-content .flex-h-box .bp3-button.bp3-minimal.bp3-icon-minus.bp3-small {
    margin-left: -35px;
    margin-right: 10px;
}
  /* header for sidebar page COLLAPSED — moves it right */
#roam-right-sidebar-content .flex-h-box .bp3-button.bp3-minimal.bp3-icon-plus.bp3-small {
    margin-left: -35px;
    margin-right: 20px;
}

/*---------------------------------- 
    #SEARCH & ICONS
------------------------------------*/
.bp3-input,
.bp3-input[readonly] { /*SEARCH INPUT */
    color: var(--search-font-color);
    outline: 0;
    border: 0;
    border-radius: var(--search-border-radius);
    background: var(--search-bg);
}
.bp3-input:focus, .bp3-input.bp3-active { /*SEARCH INPUT ACTIVE*/
    box-shadow: 0 0 0 1px var(--search-outline);
}
.bp3-popover { /* SEARCH RESULT SHADOW */
    box-shadow:0px 4px 22px #00000035 !important;
    border-radius: var(--search-border-radius);
    border: var(--inline-search-border);
}
.bp3-input-group>.bp3-input-left-container>.bp3-icon, .bp3-input-group>.bp3-icon { /* search icon */
    color: var(--minirightbar-icon-color);
}
.bp3-button.bp3-minimal { /* sidebar filter count */
    color: var(--icon-color);
}
.bp3-button.bp3-minimal:hover { /* button hover */
    color: var(--icon-color-hover);
    background-color: var(--icon-bg-hover);
}
.bp3-button[class*="bp3-icon-"]::before { /* top right icon color */
    color: var(--icon-color);
}
.bp3-button .bp3-icon, .bp3-button .bp3-icon-standard, .bp3-button .bp3-icon-large { /* filter icon color */
    color: var(--icon-color);
}

/* top right icon color */
.rm-topbar .bp3-button[class*="bp3-icon-"]::before {
    color: var(--minirightbar-icon-color);
}
/* top right toolbar filter icon color */
.rm-topbar .bp3-button .bp3-icon, .bp3-button .bp3-icon-standard, .bp3-button .bp3-icon-large { /* filter icon color */
    color: var(--minirightbar-icon-color);
}
/* fix sync/saving position */
.rm-saving-icon { 
  margin-left: -1px;
}
/* pin color */
.bp3-button.bp3-minimal.bp3-icon-pin.bp3-small.pinned:before {
    color: var(--pin-color) !important;
}

/*--- Block References ---*/
.rm-block-ref { /* linked refs */
    cursor: alias;
    border-bottom: 1px solid var(--block-ref-border-bottom);
}
.rm-block-ref:hover {
    background-color: var(--block-ref-hover-bg);
}

/*---------------------------------- 
    #DATEPICKER
------------------------------------*/
.bp3-icon-calendar {
    border: none;
}
.bp3-datepicker { /* modal padding */
    background: var(--datepicker-bg);
    padding: 6px;
}
.bp3-html-select .bp3-icon { /* month and year double carrots */
    color: var(--datepicker-bg);
}
  /* month back and forth bg color */
button.bp3-button.bp3-minimal.DayPicker-NavButton.DayPicker-NavButton--next,
button.bp3-button.bp3-minimal.DayPicker-NavButton.DayPicker-NavButton--prev {
    background: var(--datepicker-bg) !important;
}
  /* month back and forth carrot color / outside month date color */
span.bp3-icon.bp3-icon-chevron-left,
span.bp3-icon.bp3-icon-chevron-right,
.bp3-datepicker .DayPicker-Day.DayPicker-Day--outside {
    color: var(--datepicker-altfont-color);
}
  /* month and year hover state */
.bp3-html-select.bp3-minimal select:hover, .bp3-select.bp3-minimal select:hover {
    background: #0073f9;
    color: white;
}
.bp3-datepicker .DayPicker-Weekday abbr[title]{ /* abbreviated day titles */
    border-bottom: none;
    font-size: 13px;
    color: var(--datepicker-altfont-color);
    cursor: default;
}
.bp3-datepicker-caption+.bp3-divider { /* divider */
    border-bottom: none;
}
.bp3-datepicker .DayPicker-Day > div:first-child { /* date appearances */
    line-height: 1.15em;
    font-size: 14px;
    font-weight: 600;
}
.bp3-datepicker .DayPicker-Day:hover { /* hover background color */
    background: #0073f9;
    color: white;
}
  /* today bg color */
.bp3-datepicker .DayPicker-Day.DayPicker-Day--isToday .bp3-datepicker-day-wrapper {
    background: var(--datepicker-day-wrapper);
}
.bp3-html-select select, .bp3-select select {
    color: var(--main-font-color);
}

/*---------------------------------- 
    #POPUP MENUS
------------------------------------*/
  /* right/top toolbar popover menu */
  .bp3-popover .bp3-popover-content,
  .bp3-menu {
    background: var(--inline-search-bg);
    color: var(--popover-font-color);
    border-radius: 4px;
  }
  /* right/top toolbad popover hover */
  .bp3-menu-item:hover, .bp3-submenu .bp3-popover-target.bp3-popover-open >.bp3-menu-item{
    background-color: var(--search-selected-row) !important;
  }
  .bp3-popover .bp3-popover-arrow-fill {
    fill: var(--inline-search-bg) !important;
  }
  .bp3-popover .bp3-popover-arrow-border {
    fill:white !important;
  }
  .bp3-elevation-3 { /* forward slash popup */
    background-color: var(--inline-search-bg) !important;
    border-radius: var(--inline-search-border-radius);
    border: var(--inline-search-border);
    box-shadow:0px 4px 22px #00000035;
  }
  .bp3-elevation-3 .dont-unfocus-block[style*="background-color: rgb(213, 218, 223);"],
  .bp3-popover-content .flex-v-box.rm-menu-item[style*="background-color: rgb(213, 218, 223);"]  { /* selected row color */
    background-color: var(--search-selected-row) !important;
  }
  .bp3-elevation-3 .dont-unfocus-block span[style*="color: rgb(129, 145, 157);"] { /* June 2020 added icons in popover menu */
    color: var(--icon-color) !important;
  }
  .bp3-popover .bp3-popover-content button.bp3-button { /* popover buttons */
    background:  var(--inline-search-button-bg-color)!important;
    color: var(--main-font-color);
  }
  .bp3-text-overflow-ellipsis { /* foward slash popup text color */
      color: var(--popover-font-color);
  }
  .bp3-popover-content .flex-h-box strong{ /* bold text color in popovers for "Includes" & "Removes" */
    color: #DCDEDD !important;
    border-bottom: none !important;
  }
  
/*---------------------------------- 
    #ALL PAGES
------------------------------------*/
  /* all page search input bg color */
  .bp3-input.bp3-round.bp3-minimal.search-input {
      background-color: hsl(0, 0%, 98%) !important;
  }
  /* row dividers */
  .rm-all-pages .table .rm-pages-row {
      border-bottom: 1px solid var(--allpage-bottom-border-color);
  }
  /* unchecked checkbox bg color */
  .bp3-control.bp3-checkbox .bp3-control-indicator {
      background: var(--checkmark-bg-color);
      border: none;
  }

  /* checked appearance */
  .bp3-control input:checked ~ .bp3-control-indicator {
      background: var(--checkedmark-bg-color);
      box-shadow: inset 0 0 0 1px rgba(253, 5, 5, 0.0), inset 0 -1px 0 rgba(222, 78, 5, 0.0);
  }
  .sorted-header-text {
      color: var(--main-font-color);
  }
  /* current sort carrot color */
  .sorting-button-group .sort-button.focused {
      color: #3d71ff;
  }
  .rm-clickable-pill {
      opacity: 1;
      background-color: var(--pages-mentions-level-bg);
      color: var(--pages-mentions-font-color); /*text color */
  }
  .rm-clickable-pill.level1-pill { /* newly added—in June 2020—all pages mentions counter */
      opacity: 1;
      background-color: var(--pages-mentions-level1-bg);
      color: var(--pages-mentions-font-color); /*text color */
  }
  .rm-clickable-pill.level2-pill { /* newly added—in June 2020—all pages mentions counter */
      opacity: 1;
      background-color: var(--pages-mentions-level2-bg);
      color: var(--pages-mentions-font-color); /*text color */
  }
  .rm-all-pages .table .rm-pages-row .rm-pages-col {
      color: var(--main-font-color);
  }
  .rm-pages-row:first-child { /* styles color of all pages header */
    background-color: var(--pages-header-row) !important;
  }
  
/*---------------------------------- 
    #KANBAN & TABLES
------------------------------------*/
.kanban-board {
    padding: 12px;
    border: var(--kanban-board-border);
    border-radius: var(--kanban-board-border-radius);
    background-color: var(--kanban-board-bg);
}
.kanban-board .kanban-column-container {
    display: flex;
    overflow-x: scroll;
}
.kanban-column {
    cursor: pointer;
    flex: 1 0 200px;
    flex-wrap: nowrap;
    margin: var(--kanban-column-margin);
    padding: 4px;
    min-width: 200px;
    background-color: var(--kanban-column-bg);
}
.kanban-card {
    margin: 6px;
    padding: 8px;
    background-color: var(--kanban-card-bg);
    color: var(--kanban-card-font-color);
    border-radius: var(--kanban-card-border-radius);
    border: var(--kanban-card-border);
}
  
/*--- Table ---*/
.roam-table th, .roam-table td, .roam-table tr {
    border: var(--table-border);
}
  
/*-----------------------------------------------------------------------
    #LOADING ANIMATION ——  https://codepen.io/ivillamil/pen/dokmG 
-------------------------------------------------------------------------*/
.loading-astrolabe {
    height: 50px;
    width: 50px;
}
.loading-astrolabe {
    animation-name: rotate;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
}
.loading-astrolabe:before,
.loading-astrolabe:after {
    border-radius: 50%;
    content: '';
    display: block;
    height: 20px;
    width: 20px;
}
.loading-astrolabe:before {
    animation: ball1 1s infinite;
    background-color: var(--astrolabe-bg-color);
    box-shadow: 30px 0 0 var(--astrolabe-bg-color);
    margin-bottom: 10px;
}
.loading-astrolabe:after {
    animation: ball2 1s infinite;
    background-color: var(--astrolabe-bg-color);
    box-shadow: 30px 0 0 var(--astrolabe-bg-color);
}

@keyframes rotate {
0% {
    -webkit-transform: rotate(0deg) scale(0.8);
    -moz-transform: rotate(0deg) scale(0.8);
}
50% {
    -webkit-transform: rotate(360deg) scale(1.2);
    -moz-transform: rotate(360deg) scale(1.2);
}
100% {
    -webkit-transform: rotate(720deg) scale(0.8);
    -moz-transform: rotate(720deg) scale(0.8);
}
}
@keyframes ball1 {
0% {
    box-shadow: 30px 0 0 var(--astrolabe-bg-color);
}
50% {
    box-shadow: 0 0 0 var(--astrolabe-bg-color);
    margin-bottom: 0;
    -webkit-transform: translate(15px,15px);
    -moz-transform: translate(15px, 15px);
}
100% {
    box-shadow: 30px 0 0 var(--astrolabe-bg-color);
    margin-bottom: 10px;
}
}
@keyframes ball2 {
0% {
    box-shadow: 30px 0 0 var(--astrolabe-bg-color);
}
50% {
    box-shadow: 0 0 0 var(--astrolabe-bg-color);
    margin-top: -20px;
    -webkit-transform: translate(15px,15px);
    -moz-transform: translate(15px, 15px);
}
100% {
    box-shadow: 30px 0 0 var(--astrolabe-bg-color);
    margin-top: 0;
}
}
  
/*--- hides original ---*/
.loading-astrolabe img,
.loading-astrolabe svg {
    display: none;
}
.bp3-spinner {
    visibility: hidden;
}
.bp3-spinner > * {
    visibility: visible;
}
.bp3-spinner-head {
    stroke: rgb(var(--color-primary)) !important;
}
  
/*---------------------------------- 
    #LOAD FADE IN ANIMATION
------------------------------------*/
.roam-body {
    animation: fadein .3s;
    -moz-animation: fadein .3s; /* Firefox */
    -webkit-animation: fadein .3s; /* Safari and Chrome */
    -o-animation: fadein .3s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
  
/*---------------------------------- 
    #OTHER
------------------------------------*/
  
#roam-sidebar-logo img,
#roam-sidebar-logo span { /* more subtle logo */
opacity: 0.0;
}

hr { /*DONE*/
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid var(--hr-color);
}

blockquote {
font-size: 1.2em;
border-left: 3px solid var(--blockquote-border-color);
box-sizing: border-box;
color: var(--blockquote-font-color);
margin: 0px 0px 20px;
min-height: 0px;
min-width: 0px;
padding: 10px 20px;
background-color: var(--blockquote-bg);
text-align: justify;
text-justify: inter-word;
}
blockquote .small, blockquote footer, blockquote small {
display: block;
font-size: 80%;
line-height: 1.42857143;
color: var(--blockquote-cite);
}
.rm-bq { /* MD blockquote color, thanks alok and d9ifxw3yev */
    background-color: var(--codemirror-bg);
}

#buffer { /* HIDES BOTTOM RIGHT HELP ICON */
    visibility: hidden;
}

/* Inline Select, thanks eatondpe for spotting this! */
select {
background-color: var(--select-bg-color) !important;
border: 1px solid var(--select-border-color)!important;
border-radius: 4px;
padding: 1px 1px 2px 2px;
font-size: 0.95em;
}

.rm-emoji-button {
background-color: var(--emoji-bg) !important;
border: var(--emoji-border) !important;
}

.rm-query {
border: var(--query-border);
border-radius:  var(--query-border-radius);
padding-bottom:  var(--query-padding-bottom);
}
.rm-query .rm-query-title {
color:  var(--query-title-font-color);
background-color:  var(--query-title-bg);
padding:  var(--s1);
}


/* ------------------------*/
/*         HOTFIXES        */
/* ------------------------*/

/* breadcrumb bg */
.zoom-path-view .rm-zoom-mask {
    background-color: #fff0 !important;
}

.rm-pomodoro {
    background: transparent !important;
    border: 1px solid var(--pomo-border);
    color: var(--main-font-color) !important;
}
.rm-pomodoro.running {
    background: var(--pomo-bg) !important;
    border: 1px solid var(--pomo-running-border);
    color: var(--pomo-running-font-color) !important;
}
.rm-pomodoro.break {
    background: var(--pomo-break-bg) !important;
    border: 1px solid var(--pomo-break-border);
    color: var(--pomo-break-font-color) !important;
}

.rm-topbar {
    opacity: 1 !important;
    background-color: rgba(238, 0, 0, 0) !important;
    height: 10px;
    width: 10px;
    display: inline-block;
    padding-left: calc(100vw - 35px) !important;
    padding-top: 10px !important;
    position: fixed !important;
    left: 0px;
    transition: none !important;
    z-index: 99999;
}

/* TOP RIGHT TOOLBAR ICONS */  
.rm-topbar > .bp3-popover-wrapper {
    width: 490px; /* CRL EDIT */
    flex-direction: column; /* CRL EDIT */
    height: 1px !important;
    align-items: start !important;
    /*text-align: center;*/

    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0px;
}
.rm-topbar > .bp3-popover-wrapper > * {
    flex: 0 0 15px !important; /* CRL EDIT */
    margin: auto !important;
}
.rm-topbar > div >.bp3-button:first-child {
    align-self: start !important;
    position: fixed !important;
    left: 16px;
    top: 16px; /* CRL EDIT */
    z-index: 9999999 !important;
}
.rm-topbar > div > *:nth-child(2) {
    margin-top:0px !important; /* CRL EDIT */
}
/*#return*/
.rm-topbar .bp3-icon-calendar {
background: var(--body-bg) !important;
border: none;
}
.rm-topbar .bp3-icon-calendar:hover {
background: var(--icon-bg-hover) !important;
}

/* SOME BLACKMAGIC TO GET SEARCH ICON TO FUNCTION LIKE OTHER BUTTONS —AZLEN ELZA */

.rm-topbar .bp3-icon-search {
    padding: 4px;
    border-radius: 3px;
    margin: 0 !important;
    cursor: pointer;
}

/* style contains `200px` if search bar is NOT selected */
/* hovering search bar in this mode == hovering icon itself */
/* we must however have the search bar in front of the icon (but invisible) so that it can focus on click */
/* very hacky :P */

.rm-find-or-create-wrapper[style*="200px"]:hover .bp3-icon-search, .rm-topbar .bp3-icon-search:hover {
    background-color: var(--icon-bg-hover);
    color: var(--minirightbar-icon-color) !important;
}
.rm-topbar .bp3-icon-search svg {
    padding: 1px;
    color: var(--minirightbar-icon-color) !important;

}
/* fix centering on calendar icon */
.rm-topbar .bp3-icon-calendar { margin: 0 !important }

.rm-find-or-create-wrapper {
    width: 20px !important;
}
.rm-find-or-create-wrapper .bp3-overlay {
    position: fixed;
    top: 50px;
    left: calc(50% - 325px);
    width: 650px;
}
  
/*---------------------------------- 
    #SEARCH BAR
------------------------------------*/
  
  #find-or-create-input { /* search form*/
      opacity: 0;
      z-index: 10000; /* bring in front of icon to keep clickable */
      cursor: pointer;
      box-shadow: 0 0 0 100VW rgba(15, 15, 15, 0.0); /* CRL EDIT */
  }
  /* change search button size CRL EDIT*/
  #find-or-create-input.bp3-input {
      padding: 0px 14px;
  }
  /*#find-or-create-input:active, */#find-or-create-input:focus {
      opacity: 1;
      position: fixed;
      width: 600px;
      top: 100px;
      left: calc(50% - 600px / 2);
      cursor: text;
  }
  
  
  #find-or-create-input {
      border-radius: 3px 3px 0px 0px; /* CRL EDIT */
      border: 1px solid var(--divider-color); /* CRL EDIT */
      box-shadow: 0 0 0 200VH rgba(0, 0, 0, .07);
      font-size: 18px;
      padding: 20px 20px;
      z-index: 10000;
  }
  /* if input is empty (no menu) then use all-around border-radius*/
  #find-or-create-input[value=""] {
      border-radius: 3px;
  }
  
  /* highlight around search box */
  #find-or-create-input:focus {
      padding: 25.5px;  /* CRL EDIT */
  }
  
  /* styling dropdown menu*/
  .rm-find-or-create-wrapper .bp3-popover {
      z-index: 10000;
      border-radius: 0px 0px 3px 3px;
      border: 1px solid var(--divider-color);
      overflow: hidden;
      background: var(--body-bg);
          box-shadow:0px 4px 22px #00000015 !important;
  }
  
  /* prevent coloured menu */
  .rm-find-or-create-wrapper .bp3-popover-content, .rm-find-or-create-wrapper .bp3-menu {
      background-color: transparent !important;
  }
  
  /* properly position search menu overlay */
  .rm-find-or-create-wrapper .bp3-overlay {
      top: 180px;
      width: 600px;
      left: calc(50% + 300px);
      z-index: 999999;
  }
  
  /* new page text */
  .rm-find-or-create-wrapper .rm-new-page {
      color: rgb(var(--left-sidebar-bg)) !important;
  }
  
  /* selected search result */
  .rm-find-or-create-wrapper .rm-menu-item[style*="background"] {
      background-color: var(--search-selected-row) !important;
  }
  
  /* search results highlighted words */
  .rm-find-or-create-wrapper .rm-menu-item .rm-search-list-item span[style*="yellow"],
  .rm-pages-title-col span[style*="yellow"]{
      background-color: var(--highlight-background-color) !important;
      color: var(--main-font-color);
  }
  .bp3-input {
      background-color: var(--body-bg) !important;
      color: var(--main-font-color) !important;
  }
  .bp3-input::placeholder {
      background-color: var(--body-bg) !important;
      color: var(--main-font-color) !important;
      opacity: 0.3;
  }
  .rm-search-list-item {
      color: var(--main-font-color) !important;
      opacity: 0.6;
  }
  
  /* HOT FIXES */
  .zoom-path-view .rm-zoom-mask {
      background-color: #fff0;
  }
  
/* HOT FIX 2 JAN 3 2021, thanks Morgan Sutherland! */
.roam-topbar {
    z-index: 9999999 !important;
}
.roam-sidebar-container {
    z-index: 999 !important;
}

/* HOT FIX 3 JUNE 25 2021, thanks Morgan @zyigo! */
.bp3-menu-item.menu-item {
    color: var(--sidebar-font-color)!important;
}
.bp3-menu-item.menu-item:hover {
    color: var(--sidebar-font-color-hover)!important;
}
.bp3-menu-item.setting {
    background-color: var(--theme-white-1)!important;
}
.bp3-menu-item.setting:hover {
    background-color: var(--search-selected-row)!important;
}
.roam-body .roam-app .roam-sidebar-container .rm-graph-dropdown a {
    color: var(--sidebar-font-color)!important; 
}

/*------------------------------------------------------
    #MOBILE — TESTING THIS SECTION, MAY NOT WORK WELL
--------------------------------------------------------*/
@media only screen and (max-width: 600px) {
      
#right-sidebar { /* right sidebar color */
    background-color: var(--right-sidebar-bg) !important;
    border-left: var(--right-sidebar-border-left);
    padding-right: 0px;
}
#rm-mobile-bar {
    background-color: var(--theme-white-1) !important;
    border-top: 1px solid var(--divider-color);
    height: 30px !important;
}
.bp3-button.bp3-minimal.rm-mobile-button.dont-unfocus-block {
    padding: 2px 2px !important;
}
.bp3-button.bp3-minimal.bp3-icon-media.rm-mobile-button.dont-unfocus-block,
.bp3-button.bp3-minimal.bp3-icon-draw.rm-mobile-button.dont-unfocus-block,
.bp3-button.bp3-minimal.bp3-icon-arrow-down.rm-mobile-button.dont-unfocus-block,
.bp3-button.bp3-minimal.bp3-icon-arrow-up.rm-mobile-button.dont-unfocus-block {
    margin: 4px 0px !important;
}
#find-or-create-input {
    max-width: calc(100% - 20px);
    left: 10px !important;
}
.rm-find-or-create-wrapper .bp3-transition-container {
    position: fixed !important;
    max-width: calc(100vw - 20px);
    top: 152px !important;
    left: 10px !important;
}
.rm-find-or-create-wrapper .bp3-transition-container {
    transform: none !important;
}
}
