* {
    box-sizing: border-box;
}
h1 {font-size:175%; color: red; text-align: left; padding: 2px;}
h2 {font-size:150%; color: blue; text-align: left; padding: 1px;}
h3 {font-size:125%; color: darkgreen; text-align: left; padding: 0px;}
h4 {font-size:100%; color: maroon; text-align: left; padding:0px; }
.msgerr  {font-size:100%; color: red; text-align: left; padding: 0px;}
.msginfo {font-size:100%; color: black; text-align: left; padding: 0px;}
.section {font-size:130%; color: maroon; text-align: left; padding: 0px; margin:7px;}
h5 {font-size:75%; color: black; text-align: left; padding: 0px;}

body {
    font-family: Font Awesome 5 Pro;
    /* Proxima Nova */
}
.new-note{
    width: 100%;
    margin: 0 auto;
}

.new-note input,
.new-note textarea,
.new-note button{
    /* font-family: Arial; */
    padding: 5px 10px;
    display: block;
    width: 100%;
    margin-bottom: 10px;
}
.notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}
.note {
    background-color: #ffda00;
    color: black;
    width: 100%;
    display: inline-block; 
    margin-top: 0px;
    margin-bottom: 10px;
    padding: 3px;
    position: relative;
    min-height: 50px;
}
.note .title{
    margin-bottom: 10px;
    font-weight: bold;
}
.note .title a {
    color: red;
}
.note .close {
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: transparent;
    border: none;
}
.note small {
    position: absolute;
    bottom: 10px;
    right: 10px;
    margin-top: 10px;
    display: block;
    text-align: right;
    font-style: italic;
}
.usrs {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}
.usr {
    background-color: #dddddd;
    color: black;
    width: 100%;
    display: inline-block; 
    margin-top: 0px;
    margin-bottom: 3px;
    padding: 3px;
    position: relative;
    min-height: 50px;
}
.usr .title{
    margin-bottom: 10px;
    font-weight: bold;
}
.usr .title a {
    color: red;
}
.usr .close {
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: blue;
    border: none;
    margin: 3px;
    padding: 3px;
    display: inline-block;
}
.usr small {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 10px;
    margin-top: 0px;
    text-align: right;
    font-style: italic;
}
/* (A) BASIC CUSTOM DROPDOWN MECHANICS */
/* (A1) HIDE DEFAULT ARROW */
.cselect select { appearance: none; }
/* (A2) DEFINE OUR OWN CUSTOM ARROW */
.cselect::after { content: "\25b6"; }
/* (A3) POSITION CUSTOM ARROW */
/* .cselect { position: relative; }
.cselect::after {
  position: absolute;
  top: 0; right: 0;
} */
/* (B) DIMENSTIONS */
/* (B1) MAKE <SELECT> FILL THE WRAPPER */
/* .cselect select { width: 100%; }
.cselect { max-width: 400px; }  */
/* OPTIONAL */

/* (B2) ALL SAME HEIGHT */
/* .cselect, .cselect::after, .cselect select {
  box-sizing: border-box;
  height: 40px;
} */

/* (B3) A SQUARE CUSTOM ARROW BOX */
/* ADD BORDER-RADIUS: 50% TO TURN IT CIRCLE */
/* .cselect::after { width: 40px; } */
/* (C) COSMETICS */
/* (C1) OVERRIDE DEFAULT SELECT BOX STYLES */
/* .cselect select {
    border: 1px solid #ccc;
    background: #fafafa;
    padding: 5px 10px;
} */
  
/* (C2) DROPDOWN ARROW BOX */
/* .cselect::after {
color: #fff;
background: #cfdcff;
display: flex;
align-items: center; /* CENTER ARROW IN BOX */
/* justify-content: center; */
/* } */
  /* (C3) FUNKY ANIMATIONS */
/* .cselect::after { transition: all 0.3s; }
.cselect:hover::after {
  transform: rotate(90deg);
  background: #274396;
  color: #fff;
} */
/* (C4) REMOVE DEFAULT HIGHLIGHTS */
/* .cselect select:active,
.cselect select:focus,
.cselect select:hover {
  outline: none;
} */
/* (D) ARROW ON LEFT SIDE */
/* .left.cselect select { padding-left: 50px; }
.left.cselect::after {
  right: auto;
  left: 0;
  border-radius: 50%;
} */