body {
  font-family: 'DM Sans', sans-serif;
  color: #222;
  font-size: 0.9375rem;
  line-height: 1.4em
}

a {
  text-decoration: none;
  color: #403c86;
}
a:hover {
  color: #131228;
}
a.logo {
  text-decoration: none;
  border: 0;
  font-size: 1.2em;
  font-weight: bold;
  color: #444 !important
}
.logo img {
  width: 25px;
  position: relative;
  top: 7px;
}

.hdr-color {
  color: #100a27
}
.hero img {
  box-shadow: rgba(0, 0, 0, 0.55) 0px 20px 68px 0px;
  border-radius: 5px
}
.asc {
  font-variant: all-small-caps;
}

strong {
  font-weight: 700
}
abbr[title] {
  border-bottom: 1px dashed #ddd;
  text-decoration: none;
}

.yello {
  margin-left:15%;
  background-color:#fdbf54;
}
.yello .fade {
  color: #654c22
}
.yello .fadest {
  color: #e4ac4c
}

.box {
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #eee
}

.side {
  background-color: #f5f6fa;
  border-right: 1px solid #eee;
}
.mid {
  border-right: 1px solid #eee;
  margin-left: 10%;
  overflow-y:scroll
}
.main {
  margin-left: 40%;
  width: 60%;
  overflow-y:scroll
}
.dv-avi {
  width: 64px;
  float: left
}
/* Small ~ 480px */
@media screen and (max-width: 30em) {
  /* .mid {
    margin-left: 20%;
    overflow-y:scroll
  }
  .main {
    margin-left: 50%;
    overflow-y:scroll
  } */
  .yello {
    margin-left: 0
  }
  .flex-wrap-s {
    flex-wrap: wrap
  }
}
/* Medium 480 - 960px */
@media screen and (min-width:30em) and (max-width:60em){
}
/* Large > 960px */
@media screen and (min-width:60em){
  .dv-not-avi {
    width: calc(100% - 64px);
  }
  .mid {
    margin-left: 20%;
  }
  .main {
    margin-left: 50%;
    width: 50%;
  }
  .yello {
    margin-left: 0
  }
}
/* XL */
@media screen and (min-width:1378px){
  .hero {
    width: 70%
  }
  .yello {
    margin-left: 15%
  }
  .w-20-xl {
    width: 20%;
  }
}

table {
  border-collapse: collapse;
}
table td, table th {
  padding: 10px;
  border:1px solid #dddde1
}
thead {
  background-color: #eee;
}
/* tr:nth-child(even) {
  background-color: #fafafa;
} */

.tag {
  background-color: #fdebe6;
  border-radius: 4px;
  line-height: 20px;
  padding: 0 8px;
}
.tag-alt {
  background-color: #aaefe8;/*bbe3e4;*/
}
.tag-alt-b {
  background-color: #d0edff;
}
.tag-alt-c {
  background-color: #ebd9ff;
}
.tag-alt-d {
  background-color: #f2f3f7;
}
.tag-alt-e {
  background-color: #dcd2c8;
}
.tag-alt-f {
  background-color: #ecb8d3;
}
.tag-alt-g {
  background-color: #fff08c;
}
.tag-alt-h {
  background-color: #dadbff;
}

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type=range] {
  height: 10px;
  -webkit-appearance: none;
  background: #CCCCCC;
  border-radius: 3px;
}
input[type=range]:focus {
  outline: none;
}
/*input[type=range]::-webkit-slider-runnable-track {
  height: 10px;
  cursor: pointer;
  background: #CCCCCC;
  border-radius: 3px;
}*/
input[type=range]::-webkit-slider-thumb {
  border: 5px solid #DA3D5B;
  height: 20px;
  width: 20px;
  border-radius: 15px;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]::-moz-range-thumb {
  border: 5px solid #DA3D5B;
  height: 20px;
  width: 20px;
  border-radius: 15px;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]::-ms-thumb {
  border: 5px solid #DA3D5B;
  height: 20px;
  width: 20px;
  border-radius: 15px;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
}

input[type="date"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
/*  height: 38px;
  padding: 6px 10px;*/
  padding: 10px;
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 3px;
  box-shadow: none;
  box-sizing: border-box; }
select {
  padding: 6px 10px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 3px;
  box-shadow: none;
  box-sizing: border-box;
}
select.big {
  height: 40px;
}
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  line-height: 1.5rem;
  padding-bottom: 6px; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
input:disabled {
  background-color: #fafafa
}
input[type="search"] {
  border: 0;
  padding: 1rem;
  outline: 0;
}
.input {
  border: 1px solid #D1D1D1;
  border-radius: 3px;
  color: #777;
}
.input input {
  border: 0;
  outline: 0;
  text-align: right;
  padding-right: 0
}
.input input:focus {
  outline: 0
}
.ProseMirror {
  min-height: 200px;
  resize: none;
  outline: 0;
}
.editor p.is-editor-empty:first-child::before {
  content: attr(data-empty-text);
  float: left;
  color: #757575;
  pointer-events: none;
  height: 0;
}

.modal {
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  overflow: scroll;
  width: 100%;
  height: 100%;
  background-color: rgba(100, 100, 100, 0.9);
}
.modal-body {
  background-color: #fff;
  border-radius: 3px;
}

a.button,
button {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  margin-bottom: 1rem;
  color: #fff;
  border: 0;
  outline: 0;
  cursor: pointer;
  padding: 12px;
  background-color: #0e0b06;
  border-radius: 3px;
}
button:hover,
a.button:hover {
  background-color: #000;
  transition: background-color 0.5s ease;
}
.button-default,
a.button-default {
  color: #222;
  background-color: #f8cd56;
}
.button-default:hover,
a.button-default:hover {
  background-color: #dfb94d;
}
.button-plain,
a.button-plain {
  border: 1px solid #0f0a01;
  color: #444;
  background-color: #fff;
}
.button-plain:hover,
a.button-plain:hover {
  background-color: #eee;
}
.button-grey,
a.button-grey {
  color: #444;
  background-color: #ddd;
}
.button-grey:hover,
a.button-grey:hover {
  background-color: #bbb;
}
.button-small,
a.button-small {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 0;
  font-weight: normal;
  font-size: 90%;
  color: #222;
  background-color: #f8cd56;
}
.button-small:hover,
a.button-small:hover {
  background-color: #dfb94d;
}
.button-del,
a.button-del {
  color: #fff;
  background-color: #d04241;
}
.button-del:hover,
a.button-del:hover {
  background-color: #7a1b1a;
}
button:disabled {
  background-color: #777;
  cursor: default
}
select:disabled {
  border: 1px solid #eee
}
/* button {
  padding: 15px 12px;
} */
#toolbar {
  background-color: #f5f6fa;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
#toolbar button {
  margin: 0;
}

.fade {
  color: #777
}
.fader {
  color: #999
}
.fadest {
  color: #ddd
}
.highlight {
  background-color: #fdf2c3
}
.highlight-alt {
  /* border-bottom: 1px solid #ddd */
}
.error,
.red
 {
  color: #EA2028;
}
.info {
  color: #209002;
}

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  color: #777
}
.nav a:hover {
  color: #000;
  transition: color 0.6s ease;
}
svg.feather {
  width: 16px;
  height: 16px;
  position: relative;
  top: 2px;
}
 .nav a.active {
  color: #000
}
ul.list, ul.list-check {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.list li, ul.list-check li  {
  padding: 3px 0
}
.list a {
  display: block;
  color: #222;
  border-bottom: 1px solid #eee;
  padding: 15px;
}
.list a:hover, .list a.active {
  background-color: #f5f6fa;
}
ul.list-check li  {
  text-indent: -20px;
  padding-left: 20px;
}
ul.list-check li::before  {
  content: '';
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBvcGFjaXR5PSIuODciIGQ9Ik0xOCAyMkgtNlYtMmgyNHoiLz48cGF0aCBmaWxsPSIjMUQxRDFEIiBkPSJNLjQ5IDE4LjEzbDEuNzcgMS43NyA5LjktOS45TDIuMjYuMS40OSAxLjg3IDguNjIgMTAgLjQ5IDE4LjEzeiIvPjwvZz48L3N2Zz4=);
  background-position: left center;
  height: 6px;
  padding-right: 20px;
  display: inline-block;
  font-size: 1.2em;
  line-height: 1;
  vertical-align: baseline;
}
.list-alt a {
  display: block;
  padding: 7px;
  border-bottom: 1px solid #eee;
}
.list-alt a:hover {
  color: #222;
}
.line-menu {
  list-style: none;
  border-bottom: 2px solid #f5f4fa;
  margin: 0;
  padding: 0;
}
.line-menu li {
  margin-bottom: -2px;
  display: inline-block;
}
.line-menu a {
  color: #777;
  border-bottom: 2px solid #f5f4fa;
  display: block
}
.line-menu a.active,
.line-menu a:hover {
  color: #444;
  border-bottom: 2px solid #aaa;
}

header.bb-line {
  height: 54px;
}
.bb-line {
  border-bottom: 1px solid #eee;
}

.compose .field-wrp {
  border: 1px solid #ddd;
  border-radius: 5px;
}
.compose .line {
  border-bottom: 1px solid #ddd;
}
.compose label {
  display: block;
}
.compose input, .compose textarea {
  border: 0;
  /* border-bottom: 1px solid #ddd; */
  border-radius: 0;
  padding: 0
}
.compose input:focus, .compose textarea:focus {
  outline: 0
}

footer {
  font-size: 90%;
  color: #cfcecc;
}
footer a {
  color: #9f9d99;
}
footer a:hover {
  color: #cfcecc
}
footer ul {
  list-style: none;
}
footer li {
  padding: 3px 0
}


/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  white-space: nowrap;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}