/* put global CSS variables here */
:root {
  /* l-colour or brand-colour */
  /* .<l-colour> { color: var(--<l-colour>); }
  .bg-<l-colour> { background-color: var(--<l-colour>); }
  .b-<l-colour> { border-color: var(--<l-colour>); }
  .hover-<l-colour>:hover { color: var(--<l-colour>); }
  .hover-bg-<l-colour>:hover { background-color: var(--<l-colour>); }
  .hover-b-<l-colour>:hover { border-color: var(--<l-colour>); } */
}

/* CUSTOM COLOURS */
/* colour - color, background, border, hover */
/* I may need 2 or 3 of these */
/* This is handy for inline css, css only for that page
*  l-colour or brand-colour
* Work out how I'll do this, I don't want many css variables
* maybe just --color-brand, --color-primary, --color-secondary
*/
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/* As soon as you start using z-index, it becomes a stack order competition.
*  It depends how far down the branches you are
*  Place the modal at the level where the z-index competition starts
*  modal-overlay z-index is set at 5000
*/
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  /* when it's in the background, don't allow any elements to be clicked on */
  z-index: 5000;
}

.modal-overlay:target {
  display: block;
  pointer-events: auto;
}

.modal-overlay:target body {
  overflow: none;
}

.modal__box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 400px;
  /* width: 350px;
  min-height: 275px; */
  z-index: 2000;
  /* overflow: auto; */
  outline: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #ffa000;
  border: 4px solid white;
  border-radius: 30px;
  pointer-events: all;
  padding: 25px;
  color: white;
}

.modal-overlay img,
.modal-overlay svg,
.modal-overlay--css img,
.modal-overlay--css svg {
  display: inline-block;
  max-width: 100%;
  /* height: auto; */
}

.modal__title {
  display: inline-block;
  width: 100%;
  font-size: 18px;
  color: black;
}

.modal__title label {
  width: 80px;
}

.modal__title.text-username {
  width: 300px;
}

.modal {
  display: none;
  position: absolute;
  height: 510px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: gainsboro;
  border: 1px solid #646464;
  z-index: 2000;
}

.modal label {
  font-size: 16px;
}

.modal input {
  font-size: 17px;
}

.modal__descr textarea,
.modal__longdescr textarea {
  width: 100%;
  resize: none;
}

#modal__longdescr-text {
  background-color: #dddd00;
}

.modal__container {
  padding: 4px 10px;
}

.modal-overlay .modal--visible {
  display: block;
  pointer-events: auto;
  opacity: 1;
}

.modal-html--visible {
  overflow: hidden;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.2);
}

.modal-overlay .modal__btn {
  display: block;
  width: 95px;
  color: white;
  text-align: center;
}
.modal-overlay .modal__btn:hover, .modal-overlay .modal__btn:focus, .modal-overlay .modal__btn:active {
  text-decoration: none;
  transition: background-color 0.2s linear, color 0.2s linear;
}
.modal-overlay .modal__btn:focus, .modal-overlay .modal__btn:active {
  outline: none;
  box-shadow: 0 0 0 0.175rem white, 0 0 0 0.35rem #fee000;
}

.modal-overlay .modal__btn:nth-of-type(1) {
  margin: 10px auto;
}

.modal-overlay .modal__btn:nth-of-type(2) {
  margin: 10px auto;
}

.modal-help {
  display: none;
  position: absolute;
  width: 950px;
  height: 80vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: gainsboro;
  border: 1px solid #646464;
  overflow-y: auto;
  z-index: 2000;
}

.modal-help img {
  margin: 5px 5px 5px 35px;
}

.modal h1,
.modal-help h1 {
  margin-bottom: 5px;
  text-align: center;
  color: white;
  background-color: #1432e1;
  visibility: visible;
  font-size: 22px;
  padding: 5px 4px;
}

.modal-help p {
  margin: 5px 20px;
}

.modal__close {
  background-color: rgba(40, 20, 240, 0.9);
}
.modal__close:hover, .modal__close:focus, .modal__close:active {
  background-color: #7850ff;
}

.modal__box p {
  font-size: 22px;
}

.modal__new {
  background-color: rgba(20, 220, 220, 0.7);
}
.modal__new:hover, .modal__new:focus, .modal__new:active {
  background-color: rgba(70, 240, 240, 0.9);
}

/* As soon as you start using z-index, it becomes a stack order competition. 
*  It depends how far down the branches you are
*  Place the modal at the level where the z-index competition starts
*  modal-overlay z-index is set at 5000
*/
.modal.user,
.modal.user-new,
.modal.boardname {
  width: 450px;
  border-radius: 10px;
  user-select: none;
}

.modal.boardname h1 {
  border-color: #ffffff;
  border-width: 3px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.modal.user {
  height: 210px;
}

.modal.user-new {
  height: 220px;
}

.modal.user p,
.modal.user-new p {
  margin: 3px auto 10px 110px;
  font-style: italic;
  font-size: 14px;
  color: #1432e1;
}

.modal.user .modal__close {
  width: 150px;
}

.modal.user .modal__new,
.modal.user-new .modal__new {
  width: 220px;
}

.modal.user,
.modal.user h1,
.modal.user-new,
.modal.user-new h1 {
  border-color: #ffffff;
  border-width: 3px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.modal.new .modal__close {
  width: 250px;
}