/* CSS Utilities Styles v2.0 by Ron Craig*/
/* Written 10 Oct 2020  :Revised 19 Jul 2024 */
/* Flexbox startup
   # - id="" - can only be used 1nce per page
   . - class="" - can be used multiple times per page */
/*  The width & height properties do not include padding, border, & margin of the element  */

/* @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap'); */
/* font-family: 'Dancing Script', cursive; */
/* @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap'); */
/* font-family: 'Dancing Script', cursive;
font-family: 'Roboto', sans-serif; */

/* Utilities */

  /* Grid */
  .grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
    justify-content:center;
    align-items:center;
    height:100%;
  }
  .grid-cols3 { grid-template-columns:repeat(3,1fr); }
  .grid-cols4 { grid-template-columns:repeat(4,1fr); }
  .grid-span-2 { grid-column: 1/ span 2; }
  .grid-span-4 { grid-column: 1/ span 4; }

  /* Flex */
  .flex {
    display:flex;
    justify-content:center;
    align-items:center;
    height:100%;
  }
  .space-around,
  .flex-spcea       { justify-content:space-around; }
  .space-between, .jc-space-between,
  .flex-spcebtwn    { justify-content:space-between; }
  .flex-align-start { align-items:flex-start; }
  .flex-rev         { flex-direction:row-reverse; }
  .flex-wrap        { flex-wrap: wrap; }
  .ml-auto          { margin-left:auto; }
  .mr-auto          { margin-right:auto; }
  .ml-200           { margin-left:200px; }
  .mr-200           { margin-right:200px; }

  /* Display-Control Floats */
  .nowrap       { white-space:nowrap; }
  .noshow       { display:none; }
  .show         { display:block; }
  .cross-out    { text-decoration:line-through; }
  .indent       { text-indent:2em; }
  .float-left   { float:left; margin-right:1rem; overflow:auto; }
  .float-right  { float:right; margin-left:1rem; overflow:auto; }
  .clr          { clear:both; }
  .auto-wide    { max-width:100%; text-align:center; }
  .margin-cntr  { margin:auto; }
  .m-5          { margin:0.5rem; }
  .m-10         { margin:1rem; }
  .m-30         { margin:3rem; }
  .mt-10        { margin:1rem 0 0; }
  .ml-10        { margin-left:1rem; }
  .ml-15        { margin-left:1.5rem; }
  .mr-10        { margin-right:1rem; }
  .mr-15        { margin-right:1.5rem; }
  .mb-10        { margin-bottom:1rem; }
  .mb-20        { margin:0 auto 2rem; }
  .mb-30        { margin:0 auto 3rem; }
  .my-10        { margin:1rem auto; }
  .my-20        { margin:2rem auto; }
  .my-30        { margin:3rem auto; }
  .p-5          { padding:0.5rem; }
  .p-10, .p-1   { padding:1rem; }
  .p-15         { padding:1.5rem; }
  .pb-10        { padding:0 0 1rem; }
  .pt-15        { padding-top:1.5rem; }
  .py-5         { padding:0.5rem 0; }
  .py-10        { padding:1rem 0; }
  .py-15        { padding:1.5rem 0; }
  .px-5         { padding:0 0.5rem; }
  .px-10        { padding:0 1rem; }
  .px-15        { padding:0 1.5rem; }
  .pl-10        { padding-left}
  .pding-5      { padding:0.5rem; }
  .pding-10     { padding:1rem; }
  .pding-15     { padding:1.5rem; }
  .bdr-rad-5    { border-radius:0.5rem; }
  .bdr-rad-10   { border-radius:1rem; }
  .bdr-rad-20   { border-radius:2rem; }
  .bdr-rad-50   { border-radius:50%; }
  .border-wht   { border:1px solid #fff; }
  .border-red   { border:1px solid #f00; }
  .border-orn   { border:1px solid #f91; }
  .border-blue  { border:1px solid #00f; }
  .border-vio   { border:1px solid #9C27F3; }
  .border-green { border:1px solid #008000; }
  .border-gray  { border:1px solid #999; }
  .border-d1    { border:1px solid #c0c0c0; }
  .border-blk   { border:1px solid #000; }
  .border-rad   { border-radius:1rem; }
  .bdr-rad-top-1 { border-radius:1rem 1rem 0 0; }
  .bdr-rad-bottom-1 { border-radius:0 0 1rem 1rem; }
  .border { border:1px solid #aaa; border-radius:1rem; }

  .top           { margin:0; }
  .alert         { max-width:1100px; margin:0.5rem auto; }
  .alert-danger  {
    width:100%;
    /*margin:1rem auto;
    padding:1rem; */
    text-align:center;
    color:#000;
    font:italic 2rem/1.5 cursive, sans-serif;
    border-radius:1rem;
    background:#ffb3b3;
  }
  .err-main-colr { color:#00f; }
  .err-var-color { color:#f00; }
  .alert-warning { background:#ffc; }
  .alert-success { background:#9f9; }
  .pointr        { cursor:pointer; }

  .img50    { width:50px; }
  .img75    { width:75px; }
  .img100   { width:100px; }
  .img150   { width:150px; }
  .img200   { width:200px; }
  .img250   { max-width:250px; }
  .img300   { max-width:300px; }
  .img350   { max-width:350px; }
  .img400   { max-width:400px; }
  .img450   { max-width:450px; }
  .img500   { max-width:500px; }
  .img550   { max-width:550px; }
  .img580   { max-width:580px; }

  .txt-14   { font-size:1.4rem; }
  .txt-16   { font-size:1.6rem; }
  .txt-18   { font-size:1.8rem; }
  .txt-20   { font-size:2rem; }
  .txt-22   { font-size:2.2rem; }
  .txt-24   { font-size:2.4rem; }
  .txt-26   { font-size:2.6rem; }
  .txt-28   { font-size:2.8rem; }
  .txt-30   { font-size:3rem; line-height:1.2; }
  .txt-34   { font-size:3.4rem; line-height:1.2; }
  .txt-36   { font-size:3.6rem; line-height:1.2; }
  .txt-40   { font-size:4rem; line-height:1.2; }
  .txt-44   { font-size:4.4rem; line-height:1.2; }
  .txt-50   { font-size:5rem; line-height:1.2; }
  .lh-sm    { line-height:1.6; }
  .lh-md    { line-height:1.4; }
  .lh-lg    { line-height:1.2; }
  .lh-30    { line-height:3rem; }
  .lh-35    { line-height:3.5rem; }
  .lh-40    { line-height:4rem; }
  .lh-50    { line-height:5rem; }
  .lh-60    { line-height:6rem; }
  .lh-80    { line-height:8rem; }
  .lh-100   { line-height:10rem; }
  .spec-txt {
    font-style:italic;
    font-weight:bold;
    font-family:cursive, sans-serif;
  }
  .ge-txt   {
    font-style:italic;
    font-weight:bold;
    font-family:Arial,Helvetica,sans-serif;
  }
  .emailtxt {
    font-style:italic;
    font-weight:bold;
    font-family:Georgia,serif;
  }
  .dCloktxt {
    font-style:italic;
    font-weight:400;
    /* font-size:4rem; */
    font-family:'Play', sans-serif; /*'Titillium Web', sans-serif; 'Nunito Sans', sans-serif; 'PT Sans', sans-serif; 'Ubuntu', sans-serif;*/ /*'Fira Mono', monospace;*/ /* 'Share Tech Mono', monospace; 'Roboto Mono', monospace; 'B612 Mono', monospace; 'Saira', sans-serif; */
  }

  .tag    { color:var(--html-tag); }
  .css    { color:var(--css); }
  .js     { color:var(--js); }
  .red    { color:#f00; }
  .orng   { color:#f90; }
  .orange { color:#ffa500; }
  .yellow { color:#ff0; }
  .aqua   { color:#0ff; }
  .lblue  { color:#18f; }
  .blue   { color:#00f; }
  .vio    { color:#9C27F3; }
  .mag    { color:#f0f; }
  .purp   { color:#808; }
  .grn    { color:#080; }
  .lgrn   { color:#0b0; }
  .lime   { color:#0f0; }
  .ltgray { color:#ccc; }
  .gray   { color:#777; }
  .dkgray { color:#333; }
  .blk    { color:#000; }
  .wht    { color:#fff; }
  code    { color:#ff0; }
  .test-color { color: var(--forth-color); }
  .bg-test      { background: var(--bg-test); }
  .bg-plgrn     { background:#98fb98; }
  .bg-plum      { background:#dda0dd; }
  .bg-coral     { background:#ff7f50; }
  .bg-red       { background:#f00; }
  .bg-grn       { background:#008000; }
  .bg-grn2      { background:#3c3; }
  .bg-lime      { background:#0f0; }
  .bg-skyblue   { background:#87ceeb; }
  .bg-blue      { background:#00f; }
  .bg-vio       { background:#9C27F3; }
  .bg-mag       { background:#f0f; }
  .bg-gray      { background:#808080; }
  .bg-ltgray    { background:#ccc; }
  .bg-gray1     { background:#c0c0c0; }
  .bg-gray2     { background:#bbb; }
  .bg-blk       { background:#000; }
  .bg-wht       { background:#fff; }
  .bg-dark      { background:#333; color:#fff; }
  .bg-pastl-red { background:#ffe6e6; }
  .bg-pastl-orn { background:#ffebd7; }
  .bg-pastl-yel { background:#fafdc7; }
  .bg-pastl-grn { background:#defcce; }
  .bg-pastl-vio { background:#e9dbf9; }
  .bg-pastl-blue { background:#ceeef9; }

  .bg-ptl-red { background:#ffadad; }
  .bg-ptl-orn { background:#ffd6a5; }
  .bg-ptl-yel { background:#fdffb6; }
  .bg-ptl-grn { background:#caffbf; }
  .bg-ptl-grn2 { background:#d9ffcc; }
  .bg-ptl-lblu { background:#9bf6ff; }
  .bg-ptl-blu { background:#a0c4ff; }
  .bg-ptl-vio { background:#bdb2ff; }
  .bg-ptl-blu { background:#a0c4ff; }
  .bg-ptl-pnk { background:#ffc6ff; }

  .i        { font-style:italic; }
  .o        { font-style:oblique; }
  .b        { font-weight:bold; }
  .u        { text-decoration:underline; }
  .bi       { font-weight:bold; font-style:italic; }
  .biu      { font-weight:bold; font-style:italic; text-decoration:underline; }
  .no-dec   { text-decoration:none; }
  .text-left,
  .lft      { text-align:left; }
  .text-center,
  .cntr     { text-align:center; }
  .opcty9   { opacity:0.9; }
  .opcty8   { opacity:0.8; }
  .opcty7   { opacity:0.7; }
  .opcty6   { opacity:0.6; }
  .opcty5   { opacity:0.5; }
  .opcty4   { opacity:0.4; }
  .zindx2   { z-index:2; }
  .zindx3   { z-index:3; }
  .zindx4   { z-index:4; }
  .zindx5   { z-index:5; }
  .zindx6   { z-index:6; }

  .box-100 {
    max-width:1000px;
    margin:1rem auto;
    padding:1rem;
    border-radius:1rem;
  }
  .box-95 {
    max-width:950px;
    margin:1rem auto;
    padding:1rem;
    border-radius:1rem;
  }
  .box-90 {
    max-width:900px;
    margin:1rem auto;
    padding:1rem;
    border-radius:1rem;
  }
  .box-80 {
    max-width:800px;
    margin:1rem auto;
    padding:1rem;
    border-radius:1rem;
  }
  .box-70-top {
    max-width:700px;
    margin:1rem auto 0;
    padding:1rem 1rem 0.5rem;
    border-radius:1rem 1rem 0 0;
  }
  .box-70-bottom {
    max-width:700px;
    margin:0 auto 1rem;
    padding:0.5rem 1rem 1rem;
    border-radius:0 0 1rem 1rem;
  }

  .box-70 {
    max-width:700px;
    margin:0 auto;
    padding:1rem;
    border-radius:1rem;
  }
  .box-65 {
    max-width:650px;
    margin:1.5rem auto;
    padding:1rem;
    border-radius:1rem;
  }
  .box-60 {
    max-width:600px;
    margin:1.5rem auto;
    padding:1rem;
    border-radius:1rem;
  }
  .box-50 {
    max-width:500px;
    margin:1rem auto;
    padding:1rem;
    border-radius:1rem;
  }
  .box-40 {
    max-width:400px;
    margin:1rem auto;
    padding:1rem;
    border-radius:1rem;
  }
  .box-30 {
    max-width:300px;
    margin:1rem auto;
    padding:1rem;
    border-radius:1rem;
  }
  .sandbox {
    max-width:100%;
    padding:0.5rem;
    font:italic 2rem/1.6 cursive,sans-serif;
  }
  .box {
    margin:1rem auto;
    padding:1rem;
    border-radius:1rem;
    text-align:center;
  }
  .box-r5 {
    margin:1rem auto;
    padding:1rem;
    border-radius:0.5rem;
    text-align:center;
  }
  .box-x {
    margin:0 auto 1rem;
    padding:1rem;
    border:1px solid #aaa;
    border-radius:1rem;
    text-align:center;
    font:italic bold 2.4rem/1.4 cursive,sans-serif;
  }
  .card-test {
    margin:0 auto 1rem;
    padding:1rem;
    border:1px solid #aaa;
    border-radius:1rem;
    text-align:center;
    font:italic 2.2rem/1.4 Roboto,Arial,sans-serif;
  }
  .card-stest {
    width:100%;
    margin:0 auto 1rem;
    padding:1rem;
    border:1px solid #aaa;
    border-radius:1rem;
    /* font:italic bold 2.2rem cursive,sans-serif; */
  }
  .card {
    margin:1rem 0;
    padding:1rem;
    border:1px solid #aaa;
    border-radius:1rem;
  }
  *:last-child,
  .card:last-child { margin-bottom:0; }

  .dayt-box {
    margin:0 auto 1rem;
    padding:1rem 0;
    border:1px solid #aaa;
    border-radius:1rem;
    text-align:center;
    font:italic bold 2.4rem/1.4 cursive,sans-serif;
  }
  .sp-box {
    max-width:900px;
    margin:0 auto 1rem;
    padding:1rem;
    border-radius:1rem;
    /* background:#ccc; */
  }
  .sp-box2 {
    max-width:950px;
    margin:0 auto 1rem;
    padding:1rem;
    border-radius:1rem;
    /* background:#ccc; */
  }
  .calBox { border-radius:1rem; }

  .form {
    /* border:1px solid #fff; */
  }
  .form-group,
  .form-inline {
    display:flex;
    justify-content:space-between;
    align-items:center;
    /* border:1px solid #fff; */
  }
  .label {
    display:block;
    padding:0.3rem 0.5rem;
    text-align:left;
  }
  .text-block {
    width:5%;
    margin-right:3px;
  }
  .input {
    width:100%;
    margin:0.5rem 0;
    padding:0.5rem;
    border-radius:0.5rem;
  }
  .collection {
    margin:20px 0 30px;
    padding:10px;
    border:1px solid #ccc;
    border-radius:5px;
  }
  .collection-item {
    text-align:left;
    /* padding:3px 5px;
    border:1px solid #ccc;
    border-radius:5px; */
  }
  .delete-item { float:right; }

  .btn, .button {
    display:inline-block;
    text-decoration:none;
    /* margin:1rem; */
    padding:1rem 3rem;
    cursor:pointer;
    color:#f91;
    text-align:center;
    border:none;
    border-radius:0.5rem;
    background:transparent;
    /* background:inherit; */
    /* background:var(--primary-color); */
    font:italic 2rem/1.2 cursive,sans-serif;
  }
  .btn2 {
    display:inline-block;
    text-decoration:none;
    padding:1rem 3rem;
    cursor:pointer;
    color:#f91;
    text-align:center;
    border:none;
    border-radius:0.5rem;
    font:italic 1.8rem/2.5rem cursive;
  }

  .btn-outline {
    border:1px solid #fff;
    /* background:transparent; */
  }
  /* .btn:hover { opacity:0.9; } */
  .btn:hover, .btn2:hover {
    color:#ff0;
    border-color:#f0f;
    background:#808; //#90f;
  }
  /*.btn-large { width:60%; height:4rem; padding:0 25px; color:#f91; border:1px solid #aaa; font:italic bold 2.4rem Arial Helvetica sans-serif; }*/
  .btn-large { width:65%; margin:0 auto; padding:0.25rem 0; display:block; color:#f91; border:1px solid #aaa; border-radius:5px; font:italic bold 2.8rem/3.5rem Arial, Helvetica, sans-serif; }
  .btn-large:hover { color:#f91; border:1px solid #aaa; background:#ddd; }

  .btn-primary, .bg-primary {
    background:var(--primary-color);
    color:#fff;
  }
  .btn-secondary, .bg-secondary {
    background:var(--secondary-color);
    color:#fff;
  }
  .btn-grn {
    color:#fff;
    background:#28a745;
  }
  .btn-blue {
    color:#fff;
    background:#00f;
  }
  .btn-red {
    color:#fff;
    background:#f00;
  }
  .btn-wht {
    color:#fff;
    /* background:#f00; */
  }
  .btn-mag {
    color:#fff;
    background:#f0f;
  }
  .btn-sml { padding:0.2rem 1rem; }
  .btn-lrg { padding:1rem 3rem; }
  .btn-lrg-orng { padding:1rem 3rem; font-size:3rem; font-weight:bold; color:#f91; }
  .btn-center { justify-self:center;  }
  .btn-default { float:left; margin-left:15px; }
  .btn-danger {
    color:#fff;
    padding:3px 7px 3px 3px;
    text-align:center;
    float:right;
    background:#f00;
  }

  /* EOF */