* {
   box-sizing: border-box;
}

:root {
   /* FOR LIGHT BACKGROUNDS FROM APPLE APPLE APPLE */
   --red: rgb(255,59,48); /* #FF3B30 */
   --red-hover: rgba(255,59,48,0.8);
   --orange: rgb(255,149,0);
   --orange-hover: rgba(255,149,0,0.8);
   --yellow: rgb(255,204,0); /* #FFCC00 */
   --yellow-hover: rgba(255,204,0,0.8);
   --green: rgb(52,199,89);
   --green-hover: rgba(52,199,89,0.8);
   --mint: rgb(0,199,190);
   --mint-hover: rgba(0,199,190,0.8);
   --teal: rgb(48,176,199);
   --teal-hover: rgba(48,176,199,0.8);
   --cyan: rgb(50,173,230);
   --cyan-hover: rgba(50,173,230,0.8);
   --blue: rgb(0, 122, 255);
   --blue-hover: rgba(0,122,255,0.8);
   --indigo: rgb(88,86,214);
   --indigo-hover: rgba(88,86,214,0.8);
   --purple: rgb(175,82,222);
   --purple-hover: rgba(175,82,222,0.8);
   --pink: rgb(255,45,85); /* #FF2D55 */
   --pink-hover: rgba(255,45,85,0.8);
   --brown: rgb(162,132,94);
   --brown-hover: rgba(162,132,94,0.8);
   --grey: rgb(142,142,147);
   --grey2: rgb(174,174,178);
   --grey3: rgb(199,199,204);
   --grey4: rgb(209,209,214);
   --grey5: rgb(229,229,234);
   --grey6: rgb(242,242,247);
   --faint: rgb(200,200,200);
   --text-light: rgba(250, 250, 250, 1);
   --text-grey: rgba(132, 132, 132, 1);
   --text-charcoal: rgba(54,69,79.1);
   --text-dark: rgba(39,39,1);
   --text-dark-hover: rgba(39,39,1,0.8);
   --background-white: rgba(255, 255, 255, 1);
   --background-offwhite: rgba(247, 245, 251, 1);
   --background-dark: rgba(39, 39, 39, 1);
   --background-dark-hover: rgba(39, 39, 39, 0.8);
   --background-faint-blue: rgba(0, 122, 255, 0.1);
   --background-faint-yellow: rgba(255, 204, 0, 0.05);
}
.bg-cyan { background-color: var(--cyan); }
.bg-pink { background-color: var(--pink); }
.bg-yellow { background-color: var(--yellow); }
.bg-blue { background-color: var(--blue); }
.bg-green { background-color: var(--green); }
.bg-orange { background-color: var(--orange); }
.list-group-bg {
   background-color: var(--background-white);
}

.text-cyan { color: var(--cyan); }
.text-pink { color: var(--pink); }
.text-yellow { color: var(--yellow); }
.text-blue { color: var(--blue); }
.text-green { color: var(--green); }
.text-orange { color: var(--orange); }
.btn-cyan {
   background-color: var(--cyan);
   border-color: var(--cyan);
   color: var(--text-light);
}
.btn-pink {
   background-color: var(--pink);
   border-color: var(--pink);
   color: var(--text-light);
}
.btn-yellow {
   background-color: var(--yellow);
   border-color: var(--yellow);
   color: var(--text-charcoal);
}


html, body {
   height: 100%;
   margin: 0;
   padding: 0;
}
body {
   /* background-color: var(--background-offwhite); */
   /* background: rgb(157,157,157); */
   /* background: linear-gradient(180deg, rgba(157,157,157,1) 0%, rgba(195,195,195,1) 100%); */
}
.hidden {
   display: none;
}
 /* box items so that content fills leftover space for height */
.box {
   display: flex;
   flex-flow: column;
   height: 100%;
 }
.box{
   flex: 1 1 auto;
}
hr {
   margin: 0 0 16px 0;
   padding: 0;
}
li {
   padding-right: 1.3rem;
   list-style-type: none;
}
.logo {
   color: var(--text-charcoal);
   font-size: 2rem;
}
.logo-home {
   font-size: 5rem;
}
.center {
   display: flex;
   justify-content: center;
   align-items: center;
}
.top {
   display: flex;
   justify-content: center;
   align-items: start;
}
.start {
   display: flex;
   justify-content: start;
   align-items: start;
}
.end {
   display: flex;
   justify-content: end;
   align-items: start;
}
.font-laterality {
   color: var(--indigo);
   font-size: 1rem;
   font-family: 'Alegreya SC', serif;
   font-weight: 600;
}
.fa-square-plus {
   font-size: 2rem;
   color: var(--pink);
}
a.text-heading {
   text-decoration: none;
}
.nav-auth-container {
   flex-grow: 1;
}
.login-button {
   background-color: var(--green);
   color: var(--text-light);
}
.logout-button {
   background-color: var(--red);
   color: var(--text-light);
}
.container-page-title {
   margin: 1rem;
}
.text-title {
   font-size: 3rem;
   color: var(--text-charcoal);
}

.logo-link-container {
   text-decoration: none;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
a.logo-link-container:hover {
   text-decoration: none;
   color: var(--text-charcoal);
}
.logo-home {
   font-size: 2.4rem;
}
.logo-home-text {
   font-size: 1.2rem;
}

.text-heading {
   font-size: 2rem;
   color: var(--blue)
}
.text-subheading {
   font-size: 1.3rem;
   color: var(--text-charcoal);
}
.text-high-emphasis {
   color: var(--black);
}
.text-medium-emphasis {
   color: var(--text-charcoal);
}
.text-low-emphasis {
   font-size: 0.8rem;
   color: var(--text-grey);
}
.text-regular {
   font-size: 1rem;
   color: var(--text-dark)
}
.text-form {
   font-size: 1rem;
   color: var(--text-pink);
}
.text-color-supreme {
   color: var(--red)
}
.text-color-high {
   color: var(--orange)
}
.text-color-medium {
   color: var(--yellow)
}
.text-color-low {
   color: var(--green)
}
.form-label {
   font-size: 1.1rem;
   font-variant: small-caps;
   color: var(--pink);
}

.hover-cursor:hover {
   cursor: pointer;
}


.navbar {
   font-size: 1.2rem;
}
.navbar-brand {
   padding-right: 3rem;
}
.navbar-brand-desktop {
   font-family: 'Mansalva', cursive;
   font-size: 2rem;
}



.checkbox-open {
   color: var(--pink);
}
.checkbox-closed {
   color: var(--charcoal);
}
.checkbox-purgatory {
   color: var(--grey);
}
.divider-line {
   color: var(--faint);
   margin: 0;
   padding: 0;
}


a.icon-edit {
   color: var(--yellow);
   cursor: pointer;
}
a.icon-delete {
   color: var(--pink);
   cursor: pointer;
}


.bookmark-link, .list-link {
   text-decoration: none;
   color: var(--text-dark)
}
.bookmark-link:hover {
   color: var(--text-dark-hover);
   cursor: pointer;
}

/*----------FIN------------*/
.fin-container {
   display: flex;
   flex-direction: column;
   font-size: 0.9rem;
}
.fin-row {
   display: grid;
   grid-template-columns: 1fr 4fr 1fr 1fr 1fr;
   align-items: start;
   padding: 0.2rem;
   transition: background-color 0.2s;
   border-radius: 0.3rem;
}
.fin-row:hover {
   background-color: var(--background-faint-blue);
   cursor: pointer;
}
.fin-row-headers {
   font-weight: 600;
   /* border-bottom: 1px solid var(--grey); */
}
.fin-label {
   width: 30%;
}
.modal-trigger {
   color: var(--pink);
   font-size: 1.2rem;
}
.modal-trigger:hover {
   cursor: pointer;
}
.modal-dismiss {
   display: flex;
   justify-content: center;
   align-items: center;
   /* background-color: var(--surface-tertiary); */
   color: var(--red);
   width: 40px;
   height: 40px;
   border-radius: 0.3rem;
   padding: 0.3rem;
}
.modal-dismiss:hover {
   background-color: var(--red);
   color: var(--text-light);
   cursor: pointer;
}
.modal-delete {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--red);
   color: var(--text-light);
   height: 40px;
   border-radius: 0.3rem;
   padding: 0.3rem;
}
.modal-submit {
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--green);
   height: 40px;
   border-radius: 0.3rem;
   padding: 0.3rem;
}

/* ----- BREAKPOINTS
xs < 576px
sm >= 576px
md >= 768px
lg >= 992px
xl >= 1200px
xxl >= 1400px
BREAKPOINTS ----- */
@media (max-width: 576px) {
   .xs-display-none {
      display: none;
   }
}
@media (max-width: 768px) {
   .sm-display-none {
      display: none;
   }
   .border-logo-right {
      border: none;
   }
   .fin-row {
      font-size: 0.6rem;
   }
   .fin-label {
      font-size: 0.8rem;
   }
}
@media (max-width: 992px) {
   .md-display-none {
      display: none;
   }
   .navbar-brand-desktop {
      display: none;
   }
}
@media (min-width: 992px) {
   .navbar {
      height: 5rem;
   }
   .navbar-brand-mobile {
      display: none;
   }
}
@media (max-width: 1200px) {
   .lg-display-none {
      display: none;
}
}