/* -------------------------------------------------------------------------- */
@font-face {
  font-family: "Material Icons Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""), url('/gia_pha/fonts/material-icons-outlined.woff2') format('woff2');
}
@font-face {
  font-family: Sriracha;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""), url('/gia_pha/fonts/sriracha-v5-vietnamese_latin-regular.woff2') format('woff2'),
                  url('/gia_pha/fonts/sriracha-v5-vietnamese_latin-regular.woff') format('woff');
}
/*
@font-face {
  font-family: 'Inter-Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""), url('/gia_pha/fonts/Inter-Regular.woff2') format('woff2'),
                  url('/gia_pha/fonts/Inter-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Inter-Bold';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""), url('/gia_pha/fonts/Inter-SemiBold.woff2') format('woff2'),
                  url('/gia_pha/fonts/Inter-SemiBold.woff') format('woff');
}
font-family: 'Inter-SemiBold';
@font-face {
  font-family: 'BeVietnamPro-Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""), url('/gia_pha/fonts/BeVietnamPro-Regular.woff2') format('woff2'),
                  url('/gia_pha/fonts/BeVietnamPro-Regular.woff') format('woff');
}
@font-face {
  font-family: 'BeVietnamPro-Bold';
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: local(""), url('/gia_pha/fonts/BeVietnamPro-Bold.woff2') format('woff2'),
                  url('/gia_pha/fonts/BeVietnamPro-Bold.woff') format('woff');
}
*/

/* -------------------------------------------------------------------------- */
/*  Font definitions  */
.arial {
  font: 16px Arial, Helvetica, sans-serif;
  font-weight: normal;
  display: inline;
}
.gp_name {
  font: 18px Geneva,Tahoma,Helvetica,sans-serif;
}
/* -------------------------------------------------------------------------- */
@media print {
  .noprint {
    display: none;
  }
  .cnt-title, .cnt-title-left {
    border: 0px solid var(--box-border);
    background: transparent;
  }
  .tree {
    padding: 0; /* leave space for tooltips */
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media screen {
  .noprint {
    display: inline;
  }
}
/* -------------------------------------------------------------------------- */
/* default variables */
:root {
  box-sizing: border-box;
  --box-border:       #aaa;
  --box-border-light: #ccc;
  --dark-border:      #333;

  --v-beige:      #fffffe;
  --v-grey:       #eee;
  --v-active:     var(--v-grey);
  --v-brown:      #b05a00;
  --v-green:      #068010;

  --v-red:        #e01a22;
  --v-red:        #c70000;
  --v-red:        #f30000;

  --v-blue:       #0077b6;
  --v-blue:       #36c;

  --v-dark-blue:  #36c;
  --v-light-blue: #f5f7fb;

  --v-maroon:     #c70000;

  --v-female:   #f30000;
  --v-male:     #36c;

  --v-lightred: #fff1f3;
  --v-form-bg: #f7f7f7;

  --v-lightgrey: #fafafa;
  --v-lightbrown: #fffff0;
  --v-lightgreen: #e6f4ea;

  --v-dark-green: #068010;
  --v-dark-red: #e01a22;
  --v-orange: #f93;

  --v-text: #333;
  --v-text-lite: #666;


  color: var(--v-text);
}
/* -------------------------------------------------------------------------- */
/*  standard html */
*,
:after,
:before {
  box-sizing: inherit
}

html {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* height of sticky header */
  tab-size: 4;
}
body {
  padding: 0;
  margin: 0;
  width: auto;
  width: 100vw;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.8rem;
  margin: 0;
  background-color: #FCFAF6;
  background-color: #f7f7f7;
}
h1,
h2,
h3,
h4 {
  font-family: Sriracha,Verdana,sans-serif;
  display: inline-block;
  line-height: 1.4em;
  font-weight: normal;
  color: var(--v-blue);
}
h1 {
  line-height: 1;
  font-size: clamp(1.5rem, 1.7rem, 1.7rem);
}
h2 {
  line-height: 1;
  font-size: clamp(1.4rem, 1.55rem, 1.55rem);
}
h3 {
  line-height: 1;
  font-size: clamp(1.3rem, 1.45rem, 1.45rem);
}
h4 {
  font-size: clamp(1.2rem, 1.3rem, 1.4rem);
}
button {
  display: inline;
}
a {
  color: var(--v-dark-blue);
  text-decoration: none;
}
a:hover {
  color: var(--v-red);
}
input {
  background-color: #f7f7f7;
}
input:focus {
  background-color: var(--v-beige);
  border-color: var(--v-red);
}
.gp-menu {
  cursor: pointer;
  color: var(--v-dark-blue);
}
.gp-menu:hover {
  color: red;
}
.dotted-underlined {
  display: inline;
  text-decoration: underline blue dashed ;
}
.semibold {
  font-weight: 600;
  display: inline;
}
/*----------------------------------------------------------------------------------------------- */
details summary {
  cursor: pointer;
}
details summary > * {
  display: inline;
}
summary {
  font-weight: bold;
  margin: 0 0 0 -30px;
  color: var(--v-text);
}
details  {
  padding: 5px;
  margin: 0 0 -5px 25px;
  color: var(--v-blue);
}
/*----------------------------------------------------------------------------------------------- */
.small {
  display: inline-block;
  font-size: 85%;
}
.base, .base_left {
  display: inline-block;
  font-size: 1rem;
  white-space: nowrap;
}
.base_left {
  float:left;
}
.white {
  color: #f7f7f7;
  display: inline-block;
}
.capital {
  text-transform: capitalize;
  display: inline-block;
}
.nowrap {
  display: inline-block;
  white-space: nowrap;
}
.center {
  margin: 0 auto;
}
.bold {
  display: inline;
  font-weight: bold;
}
.break {
  display: inline;
  padding: 0 0 0 30px;
}
.break2 {
  display: inline;
  padding: 0;
}
.break-large {
  display: block;
  padding: 10px 0 0 0;
}
.break-phone-only {
  display: inline;
  padding: 0;
  margin: 0;
}

/* -------------------------------------------------------------------------- */
ul.center-ul {
  display: inline-block;
  text-align: left;
}

.hr-grey,
.hr-blue,
.hr-brown,
.hr-green,
.hr-red {
  margin: 7px 0 5px 0;
  height: 0;
  width: 100%;
  border-top: 1px solid #999;
}
.hr-blue {
  border-top: 2px solid var(--v-blue);
}
.hr-red {
  border-top: 2px solid var(--v-dark-red);
}
.hr-brown {
  border-top: 2px solid var(--v-brown);
}
.hr-green {
  border-top: 2px solid var(--v-dark-green);
}
.hr-nocolor {
  display: block;
  border-top: 2px solid transparent;
}
hr.nocolor {
  border: 10px solid transparent;
}

/* -------------------------------------------------------------------------- */
/* responsive list https://codepen.io/hectorguo/pen/BoZEyW */
.resp-list {
  list-style:none;
  margin: 0;
  padding: 0;
}
.resp-list-item {
  padding: 5px 15px 5px 5px;
  width: max-content;
  height: max-content;
  margin: 10px;
  text-align: center;
}
.list-float {
  max-width: 1200px;
  max-width: max-content;
  margin: 0 auto;
}
.list-float:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.float-resp-item {
  float: left;
}
/* -------------------------------------------------------------------------- */
/*
.arrow-up {
  content: ' \025B8';
  font-size: 2em;
  content: 'aaaa \025B4';
  max-width: max-content;
  border: 1px solid var(--box-border);
  padding: 10px;
}
*/
/* icons */
.m-icon,
.m-icon-small,
.m-icon-black,
.m-icon-red,
.m-icon-brown,
.m-icon-maroon,
.m-icon-orange,
.m-icon-purple,
.m-icon-green,
.m-icon-blue {
  font-family: "Material Icons Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  color: #666;
  line-height: 1;
  letter-spacing: normal;

  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  cursor: pointer;
  vertical-align: middle;
}
.m-icon-black {
  color: #333;
}
.m-icon-red {
  color: var(--v-red);
}
.m-icon-purple {
  color: #aa336a;
  color: #8875F0;
  color: #39007d;
  color: #783cf7;
}
.m-icon-green {
  color: var(--v-dark-green);
}
.m-icon-blue {
  color: var(--v-blue);
}
.m-icon-orange {
  color: var(--v-orange);
}
.m-icon-maroon {
  color: #97224e;
  color: var(--v-maroon);
}
.m-icon-brown {
  color: #97224e;
}
.m-icon-white {
  color: white;
}
/*--------------------------------------------------------------------------- */
.fs-12 { font-size: 1.2em; }
.fs-16 { font-size: 1.6em; }
.fs-24 { font-size: 2.4em; }

.md-36 {
  font-size: 36px;
}
.md-36-white {
  font-size: 36px;
  color: white;
}
.md-36-green {
  font-size: 36px;
  color: var(--v-dark-green);
}
.md-36-blue {
  font-size: 36px;
  color: var(--v-blue);
}
.md-36-brown {
  font-size: 36px;
  color: var(--v-brown);
  color: #97224e;
}
.md-36-red {
  font-size: 36px;
  color: var(--v-dark-red);
}
.md-36-orange {
  font-size: 36px;
  color: var(--v-orange);
}
/* -------------------------------------------------------------------------- */
/*  PAGE FOOTER */
#footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: auto;
  background-color: #fffffe;
  border-top: 1px solid var(--box-border);
  border-bottom: 1px solid var(--dark-border);
  gap: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 20px 5px 0;
  z-index: 9999;

  vertical-align: middle;
  width: 100vw;
  width: 100%;
  margin: -30px 0 0 0;
  /*  position: fixed; */
}
#footer-left {
  margin: 0 auto;
}
#footer-right {
  flex: 0 1 auto; /* no stretching */
  margin: 0 10px 0 10px ;
  font-size: 0.7rem;
  line-height: 1.2rem;
}
#footer a {
  white-space: nowrap;
  text-align: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.8rem;
  color: var(--v-dark-blue);
}
/*----------------------------------------------------------------------------------------------- */
/*  CONTENT  */
#cnt,
#cnt-faq,
#cnt-list,
#cnt-landing,
#cnt-watermark,
#cnt-watermark-left {
  display: grid;
  grid-template-rows: auto 1fr auto;
  margin: 0 auto;
  padding: 80px 0 80px 0;
  min-height: 97vh;
  height: max-content;
  background-color: #f9f6f2;
}

#cnt {
  background-size: cover;
  background-image: url('/gia_pha/img/backgrounds/bg_cam_xuc_in.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position:  center;
  background-position: center 0px bottom 20px;
  background-position: center 0px bottom 0px;
}

#cnt-faq  {
  background-image: url('/gia_pha/img/backgrounds/bg_cam_xuc_in.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
}

#cnt-landing {
  margin: -10px 0 0 0;
  margin: 0px 0 0 0;
}

#cnt-list,
#cnt-watermark,
#cnt-watermark-left {
  margin: -10px 0 0 0;
}
#cnt-watermarkx::after,
#cnt-watermarkx-left::after {
  font-family: Sriracha, cursive, verdana, helvetica, arial, sans-serif;
/*  content: "Gia Phả - Việt Điểu \00000a \00000a              Gia Phả - Việt Điểu"; */
  content: "Việt Điểu - Gia Phả";
  opacity: 0.08;
  white-space: pre;
  position: absolute;
  font-size: 120px;
/*  top: 40%;
  transform: rotate(-15deg);
  text-align: center;
*/
  width: 100%;
  left: 0;
  line-height: 200px;
  margin-top: 100px;
  text-indent: 5em;
  z-index: 0;

  top: 100px;
  left: -500px;
  text-align: left;
}
#cnt-watermark-left::after {
  margin: 100px 0 0 -360px;
}
#cnt-header,
#cnt-header-left {
  color: #ea4335;
  width: max-content;
  margin: 10px auto;
  font-family: Sriracha, cursive, verdana, helvetica, arial, sans-serif;
  font-weight: normal;
  font-size: 16px;
  display: block;
}
#cnt-header-left {
  margin: 10px;
  text-align: left;
}
.cnt-title,
.cnt-title-chi,
.cnt-title-left {
  font-family: Sriracha, cursive, verdana, helvetica, arial, sans-serif;

  border: 1px solid var(--box-border);
  border: 5px solid transparent;
  border-image: url(/gia_pha/img/borders/border01.png) 30 stretch;

  padding: 10px 30px 5px 30px;
  border-radius: 8px;
  background: #f7f7f7;
  color: var(--v-dark-green);
  width: max-content;
  margin: -20px auto;
  display: inline-block;
  text-align: center !important;

  background-image: url('/gia_pha/img/backgrounds/background_title.jpg');    /* zzz */
  background-size: auto;

  font-size: 24px;
}
.cnt-title-chi {
  font-size: 20px;
}

.cnt-title-left {
  text-align: left;
  margin: 20px 0 0 30px;
}
.book-title {
  font-family: Sriracha, cursive, verdana, helvetica, arial, sans-serif;
  font-size: 1.6rem;
  display: inline-block;
  color: var(--v-dark-green);
}
.dark-blue-text {
  color: var(--v-dark-blue);
}

/* ---------------------------------------------------------------------*/
@media screen and (max-width: 480px) {      /* phone */
  .break-phone-only {
    display: block;
    padding: 0 0 0 60px;
    margin: 100px 0 0 52px;

    padding: 0 0 0 0px;
    margin: 0 0 0 50px;
  }
}
@media screen and (max-width: 768px) {      /* tablet */
  .s30-large {
    display: block;
    padding: 0 0 0 0;
    margin: -10px 0;
  }
  #cnt,
  #cnt-watermark {
    margin: 0;
    width: 100vw;
    min-height: 30vh;
    min-height: 85vh;
  }
  .break {
    color: red;
    display: block;
    margin: -7px 0 0 0;
    margin: -10px 0 0 0;
  }
  .break-large {
    display: inline;
    padding: 0;
  }
  #footer-left {
    margin: 7px 0 0 10px;
  }
  .book-title {
    font-size: 1.7rem;
  }
}
/* -------------------------------------------------------------------------- */
/*  small phone  */
@media screen and (max-width: 600px) {
  #cnt {
    background-image: url('/gia_pha/img/backgrounds/vd_bg_small.png');
  }
  .cnt-title {
    font-size: 1.2rem;
    border: 1px solid var(--box-border);
    padding: 5px 5px;
    border-radius: 4px;
    background: #f7f7f7;
    margin: -10px auto;

    border: 8px solid transparent;
    border-image: url(/gia_pha/img/borders/border01.png) 30 stretch;
  }
  #cnt,
  #cnt-watermark {
    margin: 0;
    width: 100vw;
    min-height: 25vh;
    min-height: 82vh;
  }
  .faq ul {
    margin: 0 10px 0 20px;
  }
  .faq li {
    margin: -200px 0 0 0px;
    padding: 0 0 0 20px;
    line-height: 22px;
  }
  .book-title {
    font-size: 1.6rem;
  }
  .break2 {
    display: block;
    padding: 10px 0 0 0;
  }
}
/* -------------------------------------------------------------------------- */
#back-to-top {
  width: 30px;
  line-height: 20px;
  overflow: hidden;
  z-index: 999;
  display: none;
  position: fixed;
  bottom: 60px;
  right: 5px;
  color: black;
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  background-color: var(--v-grey);
  border: 1px solid var(--dark-border);
  padding: 0 0 5px 0;
  border-radius: 8px;
}
#back-to-top:hover {
  background-color: var(--v-lightgrey);
  background-color: #ccc;
}
/* -------------------------------------------------------------------------- */
/*  Checked  */
/* -------------------------------------------------------------------------- */
.text-right {
  margin: -20px 80px -20px 0;
  text-align: right;
}
sup {
  color: #000;
}
img {
  border: 0;
}
.img-frame,
.img-frame-right {
  display: block;
  background: transparent;
  padding: 5px;
  border: 1px solid var(--box-border);
  box-shadow: 3px 3px 3px var(--dark-border);
  box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 3px;
}
.bottom > * {
  vertical-align: bottom;
}

/*      qr code   */
.img-left {
  float: left;
  margin: 0p;
  padding: 0;
}
.box {
  align-items: left;
}
/* --------------------------------- */

.img-frame-left {
  float: left;
  margin: 10px 20px 10px 20px;
}
.img-frame60 {
  display: block;
  background: transparent;
  padding: 3px;
  border: 1px solid var(--box-border);
  box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 3px;
}
.img-profile {
  border-image: url(/gia_pha/img/borders/border_gold_square_01.png) 30 stretch;
}
#content,
#content-black {
  width: 100vw;
  color: var(--v-text);
  margin: 0 auto;
}
#cnt-tk,
#cnt-tk-short {
  width: 100vw;
  color: var(--v-text);
  margin: 0 auto 0px auto ;
  display: grid;
  place-content: center;
  place-items: center;
  padding: 0;
}
#cnt-tk-shorts {
  width: 80vw;
  width: fit-content;
}

#cnt-tk ul,
#cnt-tk-short ul {
  margin: 25px -20px 0 -20px;
  list-style: none;
  padding: 25px 30px 0 30px;
  white-space: nowrap;
  max-width: max-content;
  min-width: 40vw;
  width: clamp(40vw, 60vw, 100vw);
  background-color: #f7f7f7;
  border: 1px solid var(--box-border);
  border-left: 10px solid var(--v-blue);
  border-right: 1px solid var(--box-border);
  border-top: 1px solid var(--box-border);
  border-bottom: 1px solid var(--box-border);

  box-shadow: rgba(0, 0, 0, 0.15) 5px 5px 5px;
  border-radius: 5px;
}
#cnt-tk li,
#cnt-tk-short li {
  margin: 0 0 0 -30px;
  padding: 0 0 20px 20px;
}
#cnt-tk dl {
  margin: 0 0 0 -20px;
}
.ind {
  display: inline;
  padding: 0 0 0 30px;
}
.ind-20 {
  display: inline;
  padding: 50px 0 0 20px;
}

/* -------------------------------------------------------------- */
/*  tablet  */
@media screen and (max-width: 1200px) {
  .ind {
    display: inline;
    padding: 0 0 0 25px;
  }
  #cnt-tk {
    padding: 20px 0 20px 0;
    font-size: 1rem;
  }
  #cnt-tk ul,
  #cnt-tk-short ul{
    width: 98vw;
    padding: 25px 20px 0 25px;
    margin: 10px 10px 10px 10px;
    border-left: 7px solid var(--v-blue);
  }
  #cnt-tk li,
  #cnt-tk-short li {
    padding: 0 0 20px 20px;
  }
}
/* -------------------------------------------------------- */
/*  phone */
@media screen and (max-width: 600px) {
  .ind {
    display: inline;
    padding: 0 0 0 15px;
  }
  .faq summary {
    margin: 0 0 0 -10px;
    padding: 0 5px 0 0;
  }
  .faq details  {
    padding:  5px 5px 5px 5px;
    margin: 5px 0 -5px 5px;
  }
  .faq details .section {
    font-size: 1.1rem;
    padding: 5px 0 5px 40px;
    margin: 10px -200px 20px 0;
    width: 100%;
    width: 92%;
  }
  #cnt-tk,
  #cnt-tk-short {
    padding: 10px 0;
    margin: -5px 0;
    font-size: 1rem;
    margin: -20px 0px 0 25px;
    width: 100vw;
  }

  #cnt-tk-short {
    margin: 20px -40px 20px 40px ;
  }
  #cnt-tk h2,
  #cnt-tk-short h2 {
    font-size: 1.3rem;
    line-height: 1.7rem;
    padding: 0;
  }

  #cnt-tk ul,
  #cnt-tk-short ul {
    width: 100vw;
    margin: 10px 0 10px -80px;

    padding: 20px 20px 0 0;
    border-left: 5px solid var(--v-blue);
  }

  #cnt-tk li,
  #cnt-tk-short li {
    padding: 0 0 20px 10px;
    margin: 10px 0 10px 10px;
 }
}
#content-black {
  background: black;
}
#search-res {
  padding: 0;
}
#content-grid {
  width: 100%;
  display: grid;
  align-items: flex-end;
  grid-template-columns: auto 300px;
  padding: 5px;
  background-color: #f7f7f7;
}
#content-main {
  padding: 0;
  border-right: 1px solid var(--box-border);
  background-color: var(--v-light-blue);
}
#content-side {
  padding: 20px 10px;
  align-self: start; /* stretch, center, start, end */
  background-color: #f7f7f7;
}
.minus::after {
  content: "-";
}
.plus::after {
  content: "+";
}
/* ====================================================== */
.s0 {
  display: block;
  padding: 0;
  margin: -10px 0 0 0;
}
.s1 {
  display: block;
  padding: 1px 0 0 0;
}
.s3 {
  display: block;
  padding: 3px 0 0 0;
}
.s5 {
  display: block;
  padding: 5px 0 0 0;
}
.s10 {
  display: block;
  padding: 10px 0 0 0;
  border: 0;
}
.s-20 {
  display: block;
  margin: -20px 0 0 0;
  border: 0;
}
.s-10 {
  display: block;
  margin: -10px 0 0 0;
  border: 0;
}
.s-5 {
  display: block;
  margin: -5px 0 0 0;
  border: 0;
}
.s20 {
  display: block;
  padding: 20px 0 0 0;
}
.s30 {
  display: block;
  padding: 30px 0 0 0;
}
.s50 {
  display: block;
  padding: 50px 0 0 0;
}
.s30-large {
  display: block;
  padding: 30px 0 0 0;
}

.l5 {
  padding: 0 5px 0 0;
  display: inline;
}
.l10 {
  padding: 0 10px 0 0;
  display: inline;
}
.l20 {
  padding: 0 20px 0 0;
  display: inline;
}
.l30 {
  padding: 0 30px 0 0;
  display: inline;
}
.l40 {
  padding: 0 40px 0 0;
  display: inline;
}
.l50 {
  padding: 0 50px 0 0;
  display: inline;
}
.l60 {
  padding: 0 60px 0 0;
  background: inherit;
  display: inline;
}
.i5 {
  padding: 0 0 0 5px;
  background: inherit;
  display: inline;
}
.i10 {
  padding: 0 0 0 10px;
  background: inherit;
  display: inline;
}
.i20 {
  padding: 0 0 0 20px;
  background: inherit;
  display: inline;
}
.i30 {
  padding: 0 0 0 30px;
  background: inherit;
  display: inline;
}
.i40 {
  padding: 0 0 0 40px;
  background: inherit;
  display: inline;
}
.i50 {
  padding: 0 0 0 50px;
  background: inherit;
  display: inline;
}
.i60 {
  padding: 0 0 0 60px;
  background: inherit;
  display: inline;
}
.s14a {
  color: var(--v-text);
  display: inline;
  font: bold 14px arial, verdana, helvetica, sans-serif;
}
/*-------------------------------------------------------------------------*/
.div-blue {
  display: inline;
  color: var(--v-blue);
}
.div-black {
  display: inline;
  color: var(--v-text);
}
.div-green {
  display: inline;
  color: var(--v-dark-green);
}
.div-brown {
  display: inline;
  color: var(--v-brown);
}
.div-red {
  display: inline;
  color: var(--v-red);
}
/*-------------------------------------------------------------------------*/
.btn,
.btn-blue,
.btn-green,
.btn-green-r,
.btn-red,
.btn-red1,
.btn-action-green,
.btn-fb {
  display: inline;
  background-color: var(--v-blue);
  cursor: pointer;
  margin: 0 5px 0 0;
  vertical-align: middle;
  color: #fff;
  text-align: center;
  font-family: verdana, helvetica, arial, sans-serif;
  font-weight: normal;
  font-size: clamp(12px, 14px, 16px) ;
  width: max-content;
  border-radius: 7px;
  border: 1px solid var(--box-border);
  box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px;
  white-space: nowrap;
  padding: 0.5rem 1rem;
}
.btn-fb {
  background-color: #395697;
  color: #fff;
  padding: 1em;
  float: left;
  font-weight: bold;
  padding: 0.4rem 1rem;
}
.btn-fb:hover {
  color: #3864A3;
  background-color: #fff;
}
.btn-action-blue {
  display: inline;
  background-color: var(--v-blue);
  cursor: pointer;
  margin: 0 5px 0 0;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: clamp(12px, 14px, 16px) ;
  width: max-content;
  width: 200px;
  border-radius: 7px;
  border: 1px solid var(--box-border);
  box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px;
  white-space: nowrap;
  padding: 0.5rem 1rem;

  background-color: var(--v-blue);
  color: #fff;
}
.btn-action-blue:hover {
  background-color: #fff;
  color: var(--v-blue);
}
.btn-action-green {
  background-color: #fff;
  color:  var(--v-green);
}
.btn-action-green:hover {
  background-color: var(--v-green);
  color: #fff;
}
.btn-blue {
  background-color: var(--v-blue);
}
.btn-green {
  background-color: var(--v-green);
}

.btn-green-r {
  background-color: #fff;
  color: var(--v-green);
}
.btn-green-r > a {
  background-color: #fff;
  color: var(--v-green) !important;;
}
.btn-green-r:hover > a {
  color: #fff;
  background-color: var(--v-green);
}
.btn-green-r:hover {
  background-color: var(--v-green);
}

.btn-red {
  background-color: var(--v-red);
}
.btn-blue:hover > a {
  color: var(--v-blue);
}
.btn-green:hover > a {
  color: var(--v-green);
}
.btn-red:hover > a {
  color: var(--v-red);
}
.btn-blue:hover,
.btn-green:hover,
.btn-red:hover {
  background-color: #f7f7f7;
}
.btn-blue > a,
.btn-green > a,
.btn-red > a,
a.btn-blue,
a.btn-green,
a.btn-red {
  color: #f7f7f7;
  text-decoration: none;
  text-justify: none;
}
.btn-blue:hover {
  border: 1px solid var(--v-blue);
  border-radius: 5px;
  color: var(--v-blue);
}
.btn-green:hover {
  border: 1px solid var(--v-green);
  border-radius: 5px;
  color: var(--v-green);
}
.btn-red:hover {
  border: 1px solid var(--v-red);
  border-radius: 5px;
  color: var(--v-red);
}

/* -------------------------------------------------------------------------- */
.bt {
  background-color: #36c;
  cursor: pointer;
  border: 1px solid var(--dark-border);
  border-radius: 5px;

  padding: 5px 8px;
  margin: 5px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  color: #f7f7f7;
}
.bt:hover,
.bt a:hover {
  background-color: #4285f4;
  border: 2px solid #36c;
  border-radius: 5px;
}
/* -------------------------------------------------------------------------- */
.tf, .tf2 {
  background: var(--v-beige);
  border: 1px solid var(--box-border);
  color: var(--v-text);
  width: auto;
  padding: 3px 3px;
  margin: 0;
  font-size: 14px;
}
.tf2 {
  background: #f7f7f7;
}
/* -------------------------------------------------------------------------- */
.td {
  white-space: nowrap;
}
.tdl,
.tdr,
.tdc {
  padding: 0 3px;
  margin: 0 auto;
  vertical-align: top;
}
.tdl {
  text-align: left;
}
.tdr {
  text-align: right;
}
.tdc {
  text-align: center;
}
.td-down {
  margin: -120px 0 -5px 0;
}
/* -------------------------------------------------------------------------- */
.form-header {
  font-weight: bold;
  font-size: 0.9rem;
  padding: 5px 20px;
  margin: -10px -10px 0 -10px;
  color: #f7f7f7;
  background-color: var(--v-blue);
  border-bottom: 1px solid var(--box-border);
  text-align: center;
}
/* ---------------------------------------------------------------- */
.details-grid {
  display: grid;
  grid-template-columns: 200px max-content;
  grid-template-columns: max-content max-content;
  margin: 10px 10px 30px 10px;
  padding: 10px;
  /*    align-items: baseline; */
  align-items: center;
  align-items: flex-end;
  border: 1px solid  var(--box-border);
  border-radius: 8px;

  max-width: max-content;
  background: #f7f7f7;
  margin: 30px auto;
}
.grid-form-header {
  grid-column-start: span 2;
  font-weight: bold;
  font-size: 16px;
  padding: 5px;
  margin: -10px -10px 10px -10px;
  color: #f7f7f7;
  background-color: var(--v-blue);
  border-bottom: 1px solid  var(--box-border);
  text-align: center;
}
.details-col-label {
  text-align: right;
  font-weight: bold;
  margin: 10px 10px 0 20px;
  align-self: start; /* stretch, center, start, end */
}
.details-col-normal {
  text-align: left;
  font-weight: normal;
  margin: 10px 10px 0 10px;
  min-width: 400px;
}
.details-col-bold {
  text-align: left;
  font-weight: bold;
  margin: 10px 10px 0 10px;
  min-width: 400px;
}
.details-col-top {
  text-align: left;
  font-weight: normal;
  margin: 10px 10px 0 10px;
  vertical-align: text-bottom;
  justify-items: end;
  min-width: 400px;
}
/* ---------------------------------------------------------------- */
.update-grid {
  display: grid;
  grid-template-columns: 200px max-content;
  grid-template-columns: max-content max-content;
  margin: 10px 10px 30px 10px;
  padding: 10px;
  /*    align-items: baseline; */
  align-items: center;
  align-items: flex-end;
  border: 1px solid var(--dark-border);
  border-radius: 8px;

  max-width: max-content;
  background: #f7f7f7;
  margin: 30px auto;
}
.update-col-label {
  text-align: right;
  font-weight: bold;
  margin: 10px 10px 0 20px;

  align-self: start; /* stretch, center, start, end */
}
.update-col-normal {
  text-align: left;
  font-weight: normal;
  margin: 10px 10px 0 10px;
  min-width: 400px;
}
.update-col-top {
  text-align: left;
  font-weight: normal;
  margin: 10px 10px 0 10px;
  vertical-align: text-bottom;
  justify-items: end;
  min-width: 400px;
}
.update-col-bold {
  text-align: left;
  font-weight: bold;
  margin: 10px 10px 0 10px;
  min-width: 400px;
}

/* ---------------------------------------------------------------- */
/*  toogle list of books, thiet_ke.cgi */
.tk { margin: 3px 0 0 0; }
.tk dt {
  cursor: pointer;
  margin: 0 0 0 20px;
}
.tk dt span { margin: 0 0 10px 0; }
.tk dd { margin: 0 0 0 65px; }
html.isJS .tk dd { display: none; }

/* ---------------------------------------------------------------- */
/*  toogle list of books, gia_pha.cgi */
.gp { margin: 0; }
.gp dt { cursor: pointer; }
.gp dt span { margin: 0; }
.gp dd { margin: 0 0 0 30px; }
html.isJS .gp dd { display: none; }

/* ---------------------------------------------------------------- */
/*  toogle list of books, quan_ly.cgi */
.qly { margin: 0 0 0 -30px; line-height: 20px;}
.qly dt { cursor: pointer;}
.qly dt span { margin: 0 0px 10px 10px; }

.qly dt a {
  color: var(--v-blue);
  color: var(--v-dark-blue);
  text-decoration: none;
}

.qly dd { margin: 0 50px; }
html.isJS .qly dd { display: none; }

/* ---------------------------------------------------------------- */
/*  toogle legend   */
.tlist {
  margin: 0 0 0 20px;
}
.tlist dt {
  cursor: pointer;
}
.tlist dt span {
  margin: 0;
}
.tlist dt span:hover {
  color: red;
}
.tlist dd {
  margin: 0;
}
html.is_legend .tlist dd {
  display: none;
}

#legend-section {
  background-color: #dae4ea; /* #f9f9f0; */
  margin: -30px 0 10px 0;
  padding: 0;
  border-bottom: 1px solid var(--box-border);
}

/* ---------------------------------------------------------------- */
#notes-grid {
  display: grid;
  align-items: flex-end;
  grid-template-columns: 250px auto;
  align-items: baseline;
  width: 100%;
}
.notes-col {
  margin: 10px 5px -10px 20px;
}
/* ---------------------------------------------------------------- */
.male,
.female {
  display: inline-block;
  padding: 0;
  white-space: nowrap;
  font-size: 20px;
}
.male {
  color: var(--v-male);
}
.female {
  color: var(--v-female);
}
/* ---------------------------------------------------------------- */

.name-title,
.name-bold {
  font-family: Sriracha, cursive, verdana, helvetica, arial, sans-serif;
  font-weight: normal;
  font-size: 1.5rem;
  display: inline;
}
.name-bold {
  font-size: 1.1rem;
}
.cond {
  font-stretch: ultra-expanded;
}
.content-title {
  font-size: 100%;
}
.header-male,
.header-female {
  font-weight: bold;
  padding: 3px 9px 5px 9px;
  color: white;
}
.header-male {
  background-color: #36c;
  color: var(--v-blue);
}
.header-female {
  background-color: #f30000;
  color: var(--v-red);
}
.name,
.name-red,
.name-blue,
.name-big,
.name-big-red {
  font-family: Sriracha, cursive, verdana, helvetica, arial, sans-serif;
  font-weight: normal;
  font-size: 1rem;
  display: inline;
  background: inherit;
  padding: 0;
  margin: 0 -2px;
}
.name-big,
.name-big-red,
.name-big-blue {
  font-size: 1.5rem;
  color: var(--v-blue);
  display: inline;
}
.name-red,
.name-blue {
  font-size: 1rem;
  color: var(--v-blue);
}
.name-red,
.name-big-red {
  color: var(--v-red);
}
.form-title {
  font-family: Sriracha, cursive, verdana, helvetica, arial, sans-serif;
  font-weight: normal;
  display: inline-block;
  line-height: 1.1rem;
  color: var(--v-text);
  margin: 10px 0 0 0;
  font-size: 1.15rem;
}
/* -------------------------------------------------------------------------- */
hr, .dark-hr, .blue-hr {
  margin: 10px 0 10px 0;
  height: 0;
  width: 95%;
  border-top: 1px solid var(--box-border);
}

hr, .dark-hr, .blue-hr {
  margin: 10px 0 10px 0;
  height: 0;
  width: 95%;
  border-top: 1px solid var(--box-border);
}
.dark-hr {
  border-top: 1px solid var(--dark-border);
}
.blue-hr {
  width: 100%;
  border-top: 1px solid var(--v-blue);
  margin: -5px 0 5px 0;

}
.form hr {
  margin: 5px 0 10px 0;
  height: 0;
  width: 100%;
  border-top: 1px solid var(--box-border);
}
/* -------------------------------------------------------------------------- */
.option-div {
  display: inline;
  text-align: left;
  float: left;
  padding: 0 0 30px 0;
  white-space: nowrap;
  display: block;
  margin: -10px 10px -20px 0;
}
.right-div {
  display: inline;
  text-align: right;
  float: right;
  padding: 0 10px 0 0;
}
.left-div {
  display: inline;
  text-align: left;
  float: left;
  padding: 0 20px 0 20px;
}
.right-button {
  display: inline;
  text-align: right;
  float: right;
  margin: -30px 30px 0 0;
}
.inline-center-button {
  display: inline;
  margin: auto;
}
.align-middle {
  display: inline;
  text-align: middle;
}
.center-div {
  display: block;
  text-align: center;
  margin: 0 auto;
  float: none;
  overflow: hidden;
}
.center-box,
.center-box-large {
  padding: 10px;
  margin: 0 auto;
  text-align: left;
  max-width: 600px;
  max-width: max-content;
}

.center-box-large {
  max-width: 800px;
  margin: 30px auto;
  padding: 10px 20px;
  text-align: justify;
}

/* for lists on landing page */
.center-box ul, .center-box-large ul {
  margin: 0 0 0 -15px;
}
.center-box ul li, .center-box-large ul li {
  list-style: url('/gia_pha/img/ledblue.png') !important;
  padding: 0 0 0 0px;
}
/* --- */

.big {
  font-size: 150%;
  display: inline-block;
}

.notes {
  font-size: 1rem;
  margin: 0;
}
blockquote {
  font-style: italic;
  margin: 20px 0;
  text-align: justify;
  font-size: 1rem;
  font-weight: normal;
}
.rotate90 {
  transform: rotate(90deg);
}
/* ========================================================================== */
.container {    /* used by gia pha struct/tree */
  display: inline-block;
  padding: 0;
}
.wrapper-left {
  display: inline-block;
  padding: 0;
  max-width: 100%;
  border-radius: 5px;
  white-space: normal;
  line-height: 20px;
  margin: 0 0 0 -20px;
}
/* ---------------------------------------------------------------- */
/*  links within tooltips */
.tip-link {
  color: #000;
  text-decoration: none;
}
.tip-link:hover {
  color: #e31837;
  text-decoration: none;
}
.white {
  color:#f7f7f7;
}
.white-icon {
  color: #f7f7f7;
  display: inline-block;
}
.red-icon {
  color: #f30000;
  display: inline-block;
}
.blue-icon {
  color: var(--v-blue);
  display: inline-block;
}
.green-icon {
  color: var(--v-dark-green);
  display: inline-block;
}
.black-icon {
  color: #333;
  display: inline-block;
}
.grey-icon {
  color: var(--v-text);
  display: inline;
  font-size: 1.2rem;
}
.red {
  color: #f30000;
  font-weight: bold;
  display: inline-block;
}
.green {
  color: darkgreen;
  font-weight: bold;
  display: inline-block;
}
/* ---------------------------------------------------------------- */
.container td {
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
}
.noborder {
  border: 0 !important;
}
.tooltips-block {
  display: block;
  margin: 10px 0 10px 0;
}
.tooltips-noborder {
  margin: 10px 0 10px 0;
  border: 0;
}
/* ---------------------------------------------------------------- */
/* do not change */
.viewbox-grid1 {
  display: grid;
  align-items: flex-end;
  grid-template-columns: 25px 25px;
  margin-bottom: 5px;
  cursor: pointer;
}
.icons-grid {
  align-items: flex-end;
  grid-template-columns: 27px 27px 27px 27px 27px;
  margin-top: 5px;
  display: inline-grid;
  justify-items: center;
  margin: auto;
  padding: 5px 0 0 0;
  padding: 0px 0 0 0;
}
.icon-col1,
.icon-col2,
.icon-col3,
.icon-col4,
.icon-col5 {
  border: 0;
}
.viewbox-grid3 {
  display: grid;
  align-items: flex-end;
  grid-template-columns: 125px;
  margin-top: 5px;
  margin: auto;
}
/* ---------------------------------------------------------------- */
.none-box {
  display: none;
}
.inline-box {
  display: inline-block;
}
.message-box,
.error-box,
.info-box {
  border-radius: 5px;
  border: 1px solid darkgreen;
  width: max-content;
  text-align: center;
  margin: 0 auto 0 auto;
  padding: 5px 10px 5px 10px;
  background-color: #f7f7f7;
  font-weight: bold;
  color: darkgreen;
  vertical-align: middle;
}
.error-box {
  color: #f30000;
  border: 1px solid #f30000;
}
.info-box {
  color: var(--v-blue);
  border: 1px solid transparent;
}

/* ---------------------------------------------------------------- */
.option-list {
  display: flex;
  flex-wrap: wrap;
  flex-flow: row wrap;
  margin: -5px 0 10px 0;
  padding: 5px 0 8px 0;
  border-bottom: 1px solid var(--box-border);
  background-color: var(--v-light-blue);
}
.option {
  padding: 5px 10px 0 10px;
  font-size: 85%;
}
@media screen and (max-width: 1200px) {
  .option {
    width: 40%;
  }
}
@media screen and (max-width: 900px) {
  #header {
    max-width: 100%;
    max-width: 900px;
  }
}
@media screen and (max-width: 600px) {
  .option {
    width: 90%;
  }
}
/* ---------------------------------------------------------------- */
/*  https://material.io/components/tooltips  */
[data-md-tooltip] {
  position: relative;
}
[data-md-tooltip]:before {
  content: attr(data-md-tooltip);
  position: absolute;
  bottom: -50px;
  left: 50%;
  padding: 8px;
  transform: translateX(-50%) scale(0);
  transition: transform 0.3s ease-in-out;
  transform-origin: top;
  background: #36c;
  color: #f7f7f7;
  border-radius: 5px;
  font-size: 12px;
  font-family: Roboto,sans-serif;
  font-weight: 400;
  z-index: 9999;
}
[data-md-tooltip]:hover:before {
  transform: translateX(-50%) scale(1);
}

.colorx {
  color: #4fb0dc;
  color: #9a03a7;
  color: #f1f63a;
  color: #f16521;
  color: #fe8400;
  color: #ec4c34;
  color: #2769ac;
  color: #cb2859;
  color: #1b7601;
}
/* ---------------------------------------------------------------- */
.collapsible,
.collapsible-help {
  cursor: pointer;
  text-align: left;
  outline: none;
  background-color: var(--v-light-blue);
  border-left: 5px solid var(--v-blue);
  border-right: 1px solid var(--box-border);
  border-bottom: 1px solid var(--box-border);
  border-top: 1px solid var(--box-border);
  padding: 10px;
  width: 100%;
  font-weight: bold;
  font-size: 1rem;
  white-space: normal;
}
.collapsible-help {
  font-size: 1.1rem;
  max-width: 800px;
  width: clamp(60vw, 90vw, 98vw);
  font-weight: normal;
  padding: 0 0 0 20px
}
.collapsible:hover {
  background-color: var(--v-lightgrey);
  color: var(--v-text);
}
.collapsible-active {
  background-color: var(--v-light-blue);
}
.collapsible:after {
  font-family: "Material Icons Outlined";
  content: "\e5cf";
  font-size: 1.6rem;
  float: right;
  margin-left: 5px;
  display: inline;
  color: black;
  vertical-align: super;
}
.collapsible-active:after {
  font-family: "Material Icons Outlined";
  content: "\e5ce";
  font-size: 1.6rem;
  display: inline;
  color: black;
  vertical-align: super;
}
.collapsible-content,
.collapsible-content-help {
  padding: 0 28px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  border-left: 1px solid var(--box-border);
  border-right: 1px solid var(--box-border);
  background-color: #f7f7f7;
  font-size: 1rem;
}
.collapsible-content:last-of-type {
  border-bottom: 1px solid var(--box-border);
}
.collapsible-content-help {
  padding: 0 30px;
  max-width: 800px;
  width: clamp(14rem, 98vw, 70rem);
}
.collapsible-content-help ul {
  padding: 10px 40px;
}
/*--------------------------------------------------------------------------- */
.modal-message,
.modal-message-green,
.modal-message-blue,
.modal-message-red {
  position: fixed;
  top: 100px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  display:none;
  opacity: 1;
  transition: opacity 40ms ease-in;
  color: var(--v-text);
  font-weight: bold;
  font-size: .9rem;
}
.modal-message > div,
.modal-message-green > div,
.modal-message-blue > div,
.modal-message-red > div {
  width: max-content;
  position: relative;
  margin: 50px auto;
  border-radius: 5px;
  text-align: center;
  background-color: var(--v-beige);
  border-top: 10px solid var(--v-blue);
  border-bottom: 1px solid var(--box-border);
  border-left: 1px solid var(--box-border);
  border-right: 1px solid var(--box-border);

  box-shadow: 3px 3px 3px var(--dark-border);
  box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 3px;
  padding: 20px;
}
.modal-message-red > div {
  border-top: 10px solid var(--v-red);
}
.modal-message-blue > div {
  border-top: 10px solid var(--v-blue);
}
.modal-message-green > div {
  border-top: 10px solid var(--v-dark-green);
}
#book-list {
  border-collapse: collapse;
  font-size: .95rem;
  border: 1px solid var(--box-border);
}
#book-list td {
  font-family: Sriracha;
  font-style: normal;
  font-weight: 200;
  font-size: 1rem;
  border: 1px solid var(--box-border);
  padding: 3px 5px;
}
#book-list th {
  border: 1px solid var(--box-border);
  padding: 5px 10px;
  background-color: var(--v-blue);
  color: #f7f7f7;
  text-align: center;
}
#admin-list {
  border-collapse: collapse;
  font-size: .95rem;
  max-width: max-content;
  margin: 0 auto;
}
#admin-list td {
  border: 1px solid var(--box-border);
  padding: 5px 15px;
  vertical-align: top;
}
#admin-list th {
  border: 1px solid var(--box-border);
  padding: 5px 10px;
  background-color: var(--v-blue);
  color: #f7f7f7;
  text-align: center;
}
/* ------------------------------------------------------------------- */
/*  table definition */
.v-table {
  display: table;
}
.v-tr {
  display: table-row;
}
.v-td,
.v.th-blue,
.v-th-red {
  display: table-cell;
  padding: 0;
  vertical-align: text-top;
}
.v-th-blue,
.v-th-red {
  color: #f7f7f7;
  font-weight: bold;
}
.v-th-red {
  background-color: var(--v-female);
}
.v-th-blue {
  background-color: var(--v-male);
}
.v-tdc {
  display: table-cell;
  padding: 0px;
  text-align: center;
}
/*----------------------------------------------------------------------------------------------- */
.styled-table {
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  font-family: sans-serif;
  min-width: 400px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  box-shadow: 3px 3px 3px var(--box-border);
  border-radius: 5px 5px 0 0;
}
.styled-table thead tr {
  background-color: #009879;
  color: #f7f7f7;
  text-align: left;
}
.styled-table th,
.styled-table td {
  padding: 12px 15px;
}
.styled-table tbody tr {
  border-bottom: 1px solid #dddddd;
}
.styled-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}
.styled-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}
.styled-table tbody tr.active-row {
  font-weight: bold;
  color: #009879;
}

/*----------------------------------------------------------------------------------------------- */
.form-msg ul {
  list-style-type: none;
  padding: 0;
  margin: 10px auto;
  min-width: 30vw;
  max-width: fit-content;
}
.form-msg ul li {
  text-align: center;
  margin-top: -1px; /* Prevent double borders */
  background-color:  var(--v-beige);
  padding: 10px;
  color: var(--v-blue);
  display: block;
  position: relative;
  border: 1px solid var(--v-green);
}
#close-form-msg {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0%;
  padding: 9px;
  transform: translate(0%, -50%);
  color: white;
  font-weight: bold;
  font-size: x-large;
  background-color: var(--v-green);
}
.msg-notes {
  display: block;
  margin: 5px 10px 0px 10px;
  font-size: small;
  font-weight: normal;
  text-align: left;
}
.religious {
  display: inline;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-style: italic;
  font-size: 0.85rem;
  text-align: left;
  color: var(--v-text);
}

/*----------------------------------------------------------------------------------------------- */
/*
.msg-error {
  color: red;
  display: inline-block;
}
.msg-info {
  color: green;
  display: inline-block;
}

.btnt {
  display: inline;
  background-color: var(--v-blue);
  cursor: pointer;
  padding: 0.3rem 1.2em;
  margin: 0 10px 0 0;
  text-align: center;
  vertical-align: middle;
  color: white;
  text-decoration: none;
  font: bold 12px verdana, helvetica, arial, sans-serif;
  width: max-content;
  border-radius: 6px;
  border: 1px solid var(--box-border);
  box-shadow: 2px 1px 2px var(--box-border);
  white-space: nowrap;
}
.btnt:hover {
  background-color: white;
  border: 1px solid var(--v-blue);
  border-radius: 4px;
  color: var(--v-blue);
}
*/
/*
.modal-close {
  background: white;
  color: var(--v-text);
  line-height: 18px;
  position: absolute;
  right: -12px;
  top: -12px;
  text-align: center;
  width: 25px;
  text-decoration: none;
  border-radius: 50%;
  border: 1px solid var(--v-text);
}
.modal-close:after {
  font-family: "Material Icons Outlined";
  content: "\e5cd";
  font-size: 1.2rem;
  display: inline;
  color: var(--v-text);
} */



/* ---------------------------------------------------------------- */
/*
red
    header          #c75857
    background      #ffeeff
    text            #bb6666

green
    header          #81c757
    background      #e1ecda
    text light      #5577bb
    text dark       #114488
*/
/* ========================================================================== */
/*
    header          #81c757
    background      #e1ecda
    text light      #5577bb
    text dark       #114488

OPEN SOURCE WEB DESIGN

    green:          85C329
    blue:           85C329
    orange:         FB9622
    yellow:         FFD600
    red:            DA3B3B

EMC
    dark blue:      069
    light-blue:      0cc
    red:            f33
    green:          9c3
    pink:           c9c
    orange:         f93
    yellow:         fc0
    lightyellow:    ff0

Google
    red:    aa0033
    yellow: ffcc00
    green:  009900
    purple: 000088
    pink:   cc0066



blue
    header          #5a8fc8 text #114488 or #fff
    background      #dae3ec
    text            #114488
green
    header          #81c757
    background      #e1ecda
    text light      #5577bb
    text dark       #114488
red
    header          #c75857
    background      #ffeeff
    text            #bb6666
beige
    background      #ffd
    border          #e6e6be

light blue
    background      #e8f4fd
    border          #cae1f4
    text            #000066
error
    border          #dd9988
    background      #ffffd5
    text            #990000
light blue
    background      #9dc4d8
    border          #9dc4d8
    text            #003366
green 090


CHROME SCHEME:

Light light blue
    background:         f8fafd
    border              6882a1

Light blue
    bar background:     deeaf8
    bar border:         b2b2b2
    text                062d75

blue background:        9bbfec

dark blue:              559aee  224499
border                  95adc6

*/