/* enables hover effect on buttons */
div[role="button"]:not(.notion-record-icon):hover {
  background: rgba(55, 53, 47, 0.08);
}

/* hides loading spinners */
.loading-spinner {
  display: none !important;
}

/* hides elements on the top right (search box, duplicate, notion shortcut) */
.notion-topbar > div > div:not(:first-child) {
  display: none !important;
}

/* stops inline databases from overflowing horizontally */
 /* 
.notion-frame {
	
 max-width: 100%;
 width: 100vw !important;
  
 
}
*/

.notion-selectable {
  max-width: 100% !important;
}

.notion-scroller .notion-collection_view-block {
  width: 100% !important;
  max-width: 100% !important;
}

/* Resizes inlines databases */
.notion-scroller .notion-collection_view-block > div,
.notion-scroller .notion-collection_view-block > div > div > div,
.notion-scroller .notion-collection_view-block .notion-list-view,
.notion-scroller .notion-collection_view-block .notion-gallery-view,
.notion-scroller .notion-collection_view-block .notion-table-view,
.notion-scroller .notion-collection_view-block .notion-board-view,
.notion-scroller .notion-collection_view-block .notion-calendar-view {
  max-width: 100% !important;
  padding-left: unset !important;
  padding-right: unset !important;
}

/* pull alias arrows back inline */
svg.alias {
  display: inline-block !important;
  height: auto !important;
}

/* stops text from overflowing past max-width on bookmark blocks; */
.notion-bookmark-block div {
  white-space: unset !important;
}

/* fixes oversized page properties on Safari */
.notion-scroller
  > div:nth-child(2):not(.notion-page-content)
  > div:not([data-block-id])
  div:not(.notion-page-details-controls) {
  height: auto !important;
}

/* fixes possible stray header on tables */
.notion-collection_view_page-block > div:first-child {
  transform: unset !important;
}

/* fixes oversize icons in inline page links */
a[data-token-index] svg.page {
  height: auto !important;
}

/* mobile fixes */
@media only screen and (max-width: 960px) {
  /* normalizes banner / page title width */
  .notion-scroller > div:not([class]),
  .notion-scroller > div > div:not([class]) {
    width: 100% !important;
    /*max-width: 960px !important;*/
    padding-left: 0 !important;
    padding-right: 0 !important;
	display: block !important;

	
  }

  /* normalizes content width */
  .notion-page-content,
  .notion-page-content > .notion-collection_view-block,
  .notion-page-content > .notion-collection_view-block > div,
  .notion-page-content > .notion-collection_view-block > .notion-scroller > div {
    width: 100vw !important;
    /* max-width: unset !important; 
    padding-right: 0 !important;
    padding-left: 0 !important;*/
	padding-left: calc(13px + env(safe-area-inset-left)) !important;
    padding-right: calc(10px + env(safe-area-inset-right)) !important;
  }

  /* add padding to banner, but not to image */
  .notion-frame > .notion-scroller > div:first-child > div:last-child {
    padding-right: 2em !important;
    padding-left: 2em !important;
  }

  /* add padding to content */
  .notion-scroller > div:not([class]):not(:first-child),
  .notion-scroller > .notion-page-content,
  .notion-frame > .notion-scroller > .notion-scroller > .notion-list-view,
  .notion-frame > .notion-scroller > .notion-scroller > .notion-gallery-view,
  .notion-frame > .notion-scroller > .notion-scroller > .notion-table-view,
  .notion-frame > .notion-scroller > .notion-scroller > .notion-board-view,
  .notion-frame > .notion-scroller > .notion-scroller > .notion-calendar-view {
    padding-right: 2em !important;
    padding-left: 2em !important;
    flex-wrap: wrap
  }

  /* collapses flex rows into columns */
  .notion-column_list-block > div {
    flex-direction: column;
  }
  .notion-column_list-block > div > * {
    width: unset !important;
  }

  /* forces gallery to wrap around pages */
  .notion-gallery-view {
    width: 100vw;
  }

  /* enable horizontal scroll for lists and tables on mobile */
  .notion-collection-item > a {
    overflow: visible !important;
  }
  .notion-collection-item > a > div {
    width: unset !important;
  }
  .notion-scroller.horizontal {
    overflow-x: scroll;
  }

  /* makes the top border on overflowing list reach the full width of the list */
  .notion-list-view > .notion-collection_view_page-block {
    width: fit-content;
  }

  .notion-scroller
  > div:nth-child(2):not(.notion-page-content)
  > div:not([data-block-id])
  div:not(.notion-page-details-controls) {
  padding-left: 2!important;
  padding-right: 0!important;
}
}

.pseudoAfter:after {
  color: var(--pseudoAfter--color);
  content: var(--pseudoAfter--content);
  border: var(--pseudoAfter--border);
  width: var(--pseudoAfter--width);
  height: var(--pseudoAfter--height);
  display: var(--pseudoAfter--display);
  background: var(--pseudoAfter--background);
}

.pseudoBefore:before {
  color: var(--pseudoBefore--color);
  content: var(--pseudoBefore--content);
  border: var(--pseudoBefore--border);
  width: var(--pseudoBefore--width);
  height: var(--pseudoBefore--height);
  display: var(--pseudoBefore--display) !important;
  background: var(--pseudoBefore--background);
}

.pseudoSelection ::selection {
  color: var(--pseudoSelection--color);
  background: var(--pseudoSelection--background);
  text-shadow: var(--pseudoSelection--textShadow);
}

tbody {
  color: gainsboro;
}

@media only screen and (max-width: 960px) {
  main {
    display: block !important;
  }
  
  .notion-table-view{
	  
	padding-left:   0px !important;
    padding-right:  0px !important;
  }
  
}

.notion-table-content {
	
	    padding-left: 0px !important;
	
}

//*[@id="notion-app"]/ div/  div/  div/   div[1]/              div[3]/         div/       div[2]/         div[2]/           div/    div[1]/   div/     div[2]/           div/      div[1]/   div   */

#notion-app          > div > div > div > div:nth-child(1) > div:nth-child(3) > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(1) > div > div:nth-child(2) > div > div:nth-child(1) > div {

max-width: 400px !important!
	
}



/*
div[id="notion-app"] > div > div > div > div:nth-child(1) > div:nth-child(3) > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(1) {
  max-width: 100px
}
*/



/* ====================== MODAL SEARCH ========================== */



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

html {
  font-size: 62.5%;
}

body {
  --light: hsl(220, 50%, 90%);
  --primary: hsl(255, 30%, 55%);
  --focus: hsl(210, 90%, 50%);
  --border-color: hsla(0, 0%, 100%, .2);
  --global-background: hsl(220, 25%, 10%);
  --background: linear-gradient(to right, hsl(210, 30%, 20%), hsl(255deg 34.88% 38.53%));
  --shadow-1: hsl(263.03deg 54.67% 42.25% / 26%);
  --shadow-2: hsla(236, 50%, 50%, .4);

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', sans-serif;
  color: var(--light);
  background: var(--global-background);
}

a,
a:link {
  font-family: inherit;
  text-decoration: none;
}

a:focus {
  outline: none;
}

button::-moz-focus-inner {
  border: 0;
}


/* box */
.box_modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 0 4rem 2rem;
}

.box_modal:not(:first-child) {
  height: 45rem;
}

.box__title {
  font-size: 10rem;
  font-weight: normal;
  letter-spacing: .8rem;
  margin-bottom: 2.6rem;
}

.box__title::first-letter {
  color: var(--primary);
}

.box__p,
.box__info,
.box__note {
  font-size: 1.6rem;
}

.box__info {
  margin-top: 6rem;
}

.box__note {
  line-height: 2;
}


/* modal */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  display: none;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;

  /* --m-background is set as inline style */
  background: var(--m-background);
}

/* using :target */
/*
when users will click/enter button(link) browser will add a #id in a url and when that happens we'll show our users the modal that contains that id.
*/
.modal-container:target {
  display: flex;
}

.modal {
  width: 88rem;
  height: 75vh;
  padding: 4rem 2rem;
  border-radius: .8rem;

  color: var(--light);
  background: #111112;
  box-shadow: var(--m-shadow, .4rem .4rem 10.2rem .2rem) var(--shadow-1);
  position: relative;
  overflow: hidden;
  margin: 16px;
}

.modal__title {
  font-size: 3.2rem;
  margin-left: 6px;

}

.modal__text {
  padding: 0 4rem;
  margin-top: 4rem;

  font-size: 1.6rem;
  line-height: 2;
}

/* link-... */

.link-1 {
font-size: 1.8rem;
    color: var(--light);
    /* background: var(--background); */
    /*box-shadow: 0.4rem 0.4rem 2.4rem 0.2rem hsl(0deg 0% 0%); */
    border-radius: 100rem;
    padding: 0.4rem 2.9rem;
    transition: .2s;
    background: mediumpurple;
}

.link-1:hover,
.link-1:focus {
  transform: translateY(-.2rem);
  box-shadow: 0 0 4.4rem .2rem var(--shadow-2);
}

.link-1:focus {
  box-shadow:
    0 0 4.4rem .2rem var(--shadow-2),
    0 0 0 .4rem var(--global-background),
    0 0 0 .5rem var(--focus);
}

.link-2 {
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--border-color);
  border-radius: 100rem;

  color: inherit;
  font-size: 2.2rem;

  position: absolute;
  top: 2rem;
  right: 2rem;

  display: flex;
  justify-content: center;
  align-items: center;

  transition: .2s;
}

.link-2::before {
  content: '';

  transform: translateY(-.1rem);
}

.link-2:hover,
.link-2:focus {
  background: var(--focus);
  border-color: var(--focus);
  transform: translateY(-.2rem);
}

.abs-site-link {
  position: fixed;
  bottom: 20px;
  left: 20px;
  color: hsla(0, 0%, 1000%, .6);
  font-size: 1.6rem;
}






#results {
	
    list-style: none;
    padding: 0;
    position: absolute;
    z-index: 9999;
    background-color: #130e14fa;;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 95%;
    border-radius: 7px;
    overflow-y: auto;
    margin-top: 6px;
	height: 70%;
	padding-bottom: 20px;
}

#results li {
  margin-bottom: 10px;
}

#results li a {
	
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    display: block;
    padding: 10px;
	font-size: 13px;
	border-radius: 10px;
    background: #0000002e;  /*#341df708*/
}

#search-input {
	position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 11px;
    padding: 10px;
    font-size: 20px;
    border-radius: 6px;
    background: blueviolet;
}