input {
    text-indent: 10px;
}

.form-control {
    padding:0px;
}

.title-decorative {
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #adb5bd;
    margin-bottom: .75rem;
    display: block;
    font-weight: 500;
}

.align-top-left {
	position:fixed;
	top:70px;
	right:10px;
	font-size: 10px;
}

@media (max-width: 767px) {
.display-4 {
    font-size: 35px;
}
.title-decorative {
    font-size:.875rem;
}
}
textarea {
  white-space: nowrap;
  height: 500px;
    min-width: 200%;
}

#viewContent {
    max-width: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    position: relative;
    overflow: hidden; 
}

  .my-form {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  p.drop_instr {
    margin: 15px 0;
    font-weight: 500;
    margin-top: 0px;
  }
  .mobile, .desktop {
    display: none;
  }
  input[type="file"] {
    display: none;
  }
  .button {
    padding: 10px 20px;
    background-color: #3498db;
    color: #ffffff !important;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 16px;
    letter-spacing: 1px;
  }
  .button:hover, .button:focus {
    background-color: #1a7ca3;
    }
  .button.is-disabled,
  .button.is-disabled:hover,
  .button.is-disabled:focus {
    background-color: #90a4ae;
    cursor: default;
    pointer-events: none;
    opacity: .7;
  }
  .progress {
    height: 10px;
    background-color: #ecf0f1;
    border-radius: 5px;
    overflow: hidden;
    margin: 20px 0;
    transition: background-color 0.5s ease;
  }
  .progress-done {
    height: 100%;
    background-color: #2ecc71;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .announcement {
    margin-top: 20px;
    text-align: center;
    color: #721c24;
    font-weight: 600;
    font-size: 14px;  
    position: relative;
    padding: 5px;  
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 3px;  
}

/* Mobile Responsive */
@media only screen and (max-width: 600px) {
  .mobile {
    display: inline;
  }
  .desktop {
    display: none;
  }
  .showmobile {
    display: ;
  }
}
@media only screen and (min-width: 601px) {
  .mobile {
    display: none;
  }
  .desktop {
    display: inline;
  }
  .showmobile {
    display: none;
  }
}
.loader {
  margin:28px;
  width: 62px;
  height: 62px;
  border: 10px solid rgba(0,82,236,.25);
    border-top-color: rgba(0, 82, 236, 0.25);
  border-top-color: #3498db;
  border-radius: 50%;
  animation: loader-rotate 1s linear infinite;
}
@keyframes loader-rotate {
  to {
    transform: rotate(360deg);
  }
}
#searchButton:disabled, #searchButton[disabled] {
  border: 1px solid darkgray;
  background-color: darkgray;
  cursor: default;
  color: gray;
}
.parenttable {
    max-width: 500px;
    margin: auto;
  }
  
  
  .searchwhat {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2,1fr);
    grid-column-gap: 0;
    grid-row-gap: 0;
    margin-left: 50px;
  }
  
  .searchwhat div {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #555;
  }
  
  .searchwhat svg {
      color: #4caf50; 
      margin-right: 15px;
      font-size: 16px; 
  }
  
  /* Mobile responsiveness */
  @media only screen and (max-width: 600px) {
      .searchwhat {
          grid-template-columns: repeat(2, 1fr); /* 2 columns for smaller screens */
          gap: 5px;
      }
  
      .searchwhat div {
          font-size: 12px; /* Smaller font size for mobile readability */
      }
  
      .searchwhat svg {
          margin-right: 10px; /* Less spacing in mobile view */
          font-size: 14px;  /* Slightly smaller icon size for mobile */
      }
  }
  
  #searchButton {
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 16px;
  }
  .button-24 {
    font-size: 22px;
    color: var(--bs-body-bg);
    padding: 10px;
  }
  
  .button-24 {
    text-decoration: none;
    background: #2eb82e;
    border: 1px solid #2eb82e;
    border-radius: 6px;
    box-shadow: rgba(0,0,0,.1) 1px 2px 4px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 800;
    line-height: 16px;
    min-height: 40px;
    outline: 0;
    text-align: center;
    text-rendering: geometricprecision;
    text-transform: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    font-size: 1.3rem;
      padding: 16px;
      color:white;
  }

  .facesearch-secondary-actions {
    margin-top: 2px;
    margin-bottom: 14px;
  }

  .button-24-secondary {
    background: transparent;
    border-color: rgba(48, 29, 63, 0.35);
    color: rgba(48, 29, 63, 0.82);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
    padding: 10px 16px;
    box-shadow: none;
    opacity: 0.92;
  }

  .button-24-secondary:hover,
  .button-24-secondary:focus {
    background: rgba(48, 29, 63, 0.06);
    border-color: rgba(48, 29, 63, 0.5);
    color: #301D3F;
    text-decoration: none;
  }

  .buttonshiny:not([disabled]) {
    background-image: linear-gradient(270deg, rgba(46, 184, 46, 0) 48.44%, #2eb82e 75.52%, rgba(46, 184, 46, 0) 100%);
    background-repeat: no-repeat;
    animation: bg-move linear 5s infinite;
}

  @-webkit-keyframes bg-move{
      0%{
          background-position:-500px 0
      }
      100%{
          background-position:1000px 0
      }
  }
  @keyframes bg-move{
      0%{
          background-position:-500px 0
      }
      100%{
          background-position:1000px 0
      }
  }
  
  span.dist.justinfo {
    float: left;
    width: 80px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
  }
  
  
  span.dist {
    background: #ccc;
      background-color: rgb(204, 204, 204);
    border-radius: .8em;
    -moz-border-radius: .8em;
    -webkit-border-radius: .8em;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin: 5px;
    text-align: center;
    width: 2em;
    vertical-align: top;
    float: right;
    font-family: sans-serif;
  }
  
  .uncertain {
    background-color: #bfbb80 !important;
  }
  span.colordesc.colordesc{
      /*display:contents*/
  }

  span.dist.justinfo{
      float:left;
      width:80px;
      padding-left:10px;
      padding-right:10px;
      font-size:14px
  }
  #colorexplain{
      padding:14px 20px 10px 20px;
      position: relative;
  margin: auto;
  justify-content: center;
  display: flex;
  }
  #colorexplain li{
      list-style-type:none;
      float:Left;
      display:block;
      margin-right:50px
  }
  #colorexplain ul{
      display:inline-block
  }
  .colordesc{
      line-height:32px;
      display:block;
      float:left;
      margin-left:6px;
      font-size:15px
  }


@media (min-width: 1600px) {  /* this assumes 2% of 1600px is 32px */

    
    
}
  .uncertain{
      background-color:#bfbb80 !important
  }
  #colorexplain ul{
      padding:0;
      margin:0 0 0 -4px
  }
  .monitor_button{
      margin:7px 10px 7px 21px
  }
  .excel_button{
      float:right;
      margin:7px 21px 7px 10px
  }
  .topinfo {
    background-color: #66006690;
    float: left;
    width: 100%;
    display: flex;
  }
  .PI{
      display:flex;
      flex-wrap:wrap;
      justify-content:center
  }
  .facediv{
      width:260px;
      height:260px;
      position:relative;
      overflow:hidden;
      -webkit-background-size:cover;
      -moz-background-size:cover;
      -o-background-size:cover;
      background-size:cover
  }
  .facediv.loading-link::before{
      content:"";
      position:absolute;
      top:50%;
      left:50%;
      width:64px;
      height:64px;
      margin:-32px 0 0 -32px;
      border-radius:50%;
      background:rgba(0,0,0,.28);
      z-index:2;
      pointer-events:none;
  }
  .facediv.loading-link::after{
      content:"";
      position:absolute;
      top:50%;
      left:50%;
      width:42px;
      height:42px;
      margin:-21px 0 0 -21px;
      border:4px solid rgba(255,255,255,.35);
      border-top-color:#fff;
      border-radius:50%;
      animation: result-link-spin 1s linear infinite;
      z-index:3;
      pointer-events:none;
  }
  @keyframes result-link-spin {
      to {
          transform: rotate(360deg);
      }
  }
  .result-action-modal .modal-content{
      background:linear-gradient(180deg,#301D3F 0%,#241530 100%);
      border:1px solid rgba(193,142,255,.22);
      border-radius:20px;
      box-shadow:0 28px 70px rgba(0,0,0,.45);
      color:#f4f7fb;
  }
  .result-action-modal .modal-header{
      border-bottom:1px solid rgba(255,255,255,.08);
      padding:18px 22px 14px;
      align-items:center;
  }
  .result-action-modal .modal-title{
      font-size:1.1rem;
      font-weight:700;
      letter-spacing:.01em;
  }
  .result-action-modal .close{
      color:#fff;
      opacity:.75;
      text-shadow:none;
  }
  .result-action-modal .close:hover{
      opacity:1;
  }
  .result-action-modal .modal-body{
      padding:14px 22px 8px;
  }
  .result-action-visual{
      display:flex;
      align-items:center;
      gap:16px;
      margin:2px 0 16px;
      padding:14px;
      border-radius:18px;
      background:linear-gradient(145deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.03) 100%);
      border:1px solid rgba(218,185,255,.16);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px rgba(15,7,23,.28);
  }
  .result-action-visual-frame{
      flex:0 0 92px;
      width:92px;
      height:92px;
      border-radius:24px;
      overflow:hidden;
      background:rgba(17,8,25,.58);
      box-shadow:0 18px 36px rgba(0,0,0,.3);
  }
  .result-action-visual-image{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
  }
  .result-action-visual-copy{
      display:flex;
      flex-direction:column;
      gap:7px;
      min-width:0;
  }
  .result-action-visual-eyebrow{
      color:rgba(234,216,255,.72);
      font-size:.72rem;
      font-weight:700;
      letter-spacing:.12em;
      text-transform:uppercase;
  }
  .result-action-visual-title{
      color:#fff;
      font-size:1rem;
      font-weight:700;
      line-height:1.32;
  }
  .result-action-modal .modal-body p{
      margin:0;
      color:rgba(244,247,251,.78);
      line-height:1.5;
  }
  .result-action-modal .modal-footer{
      border-top:0;
      padding:12px 22px 22px;
      display:flex;
      flex-direction:column;
      gap:12px;
      align-items:stretch;
  }
  .result-action-button{
      display:flex;
      flex-direction:column;
      gap:4px;
      width:100%;
      padding:15px 18px;
      border-radius:16px;
      text-decoration:none !important;
      transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 10px 24px rgba(0,0,0,.22);
  }
  .result-action-button:hover{
      transform:translateY(-1px);
      text-decoration:none;
  }
  .result-action-button-title{
      color:#fff;
      font-size:1rem;
      font-weight:700;
      line-height:1.2;
  }
  .result-action-button-meta{
      color:rgba(255,255,255,.72);
      font-size:.86rem;
      line-height:1.35;
      word-break:break-word;
  }
  .result-action-button-primary{
      background:linear-gradient(135deg,#7d49b8 0%,#4f2b76 100%);
      border-color:rgba(220,183,255,.28);
  }
  .result-action-button-primary:hover{
      box-shadow:0 14px 34px rgba(92,49,142,.36);
  }
  .result-action-button-secondary{
      background:linear-gradient(135deg,#45265d 0%,#301D3F 100%);
      border-color:rgba(193,142,255,.18);
  }
  .result-action-button-secondary:hover{
      box-shadow:0 14px 34px rgba(0,0,0,.26);
      border-color:rgba(193,142,255,.34);
  }
  .result-action-close{
      width:100%;
      padding:12px 16px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.04);
      color:rgba(255,255,255,.82);
      font-weight:600;
      transition:background .16s ease, border-color .16s ease, color .16s ease;
  }
  .result-action-close:hover{
      background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.18);
      color:#fff;
  }
  @media (max-width: 575px) {
      .result-action-visual{
          flex-direction:column;
          text-align:center;
      }
      .result-action-visual-frame{
          width:88px;
          height:88px;
      }
      .result-action-visual-copy{
          align-items:center;
      }
  }
  .face-picker-overlay{
      position:fixed;
      inset:0;
      z-index:9999;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:20px;
      background:rgba(17,8,24,.84);
      backdrop-filter:blur(6px);
  }
  .face-picker-modal{
      width:min(92vw, 520px);
      padding:22px;
      border-radius:20px;
      background:linear-gradient(180deg,#301D3F 0%,#241530 100%);
      border:1px solid rgba(193,142,255,.22);
      box-shadow:0 28px 70px rgba(0,0,0,.45);
      color:#f4f7fb;
      text-align:center;
  }
  .face-picker-title{
      margin:0 0 6px;
      font-size:1.15rem;
      font-weight:700;
      letter-spacing:.01em;
  }
  .face-picker-subtitle{
      margin:0 0 18px;
      color:rgba(244,247,251,.78);
      font-size:.92rem;
      line-height:1.5;
  }
  .face-picker-grid{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:14px;
  }
  .face-picker-option{
      position:relative;
      cursor:pointer;
      padding:6px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 100%);
      transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease;
      box-shadow:0 10px 24px rgba(0,0,0,.22);
  }
  .face-picker-option:hover{
      transform:translateY(-1px);
      border-color:rgba(193,142,255,.44);
      box-shadow:0 16px 34px rgba(49,29,63,.38);
  }
  .face-picker-option.is-selecting{
      opacity:.72;
      border-color:rgba(223,194,255,.72);
      box-shadow:0 18px 38px rgba(125,73,184,.22);
  }
  .face-picker-image{
      width:112px;
      height:112px;
      display:block;
      object-fit:cover;
      border-radius:12px;
  }
  .face-picker-cancel{
      margin-top:18px;
  }
  .green{
      background:#80b380 !important
  }
  .yellow{
      background:#e67700 !important
  }
  span.dist{
      background:#ccc;
      border-radius:.8em;
      -moz-border-radius:.8em;
      -webkit-border-radius:.8em;
      color:#fff;
      display:inline-block;
      font-weight:bold;
      line-height:1.6em;
      margin:5px;
      text-align:center;
      width:2em;
      vertical-align:top;
      float:right;
      font-family:sans-serif;
      margin-left: auto;
  }
  @media only screen and (max-width:820px){
      .monitor_button{
          margin:7px 10px 7px 7px
      }
      .excel_button{
          margin:7px 7px 7px 10px
      }
      #colorexplain li{
          margin-right:4px !important
      }
      #colorexplain .colordesc{
          margin-left:0;
          margin-top:-4px
      }
      #colorexplain{
          padding:6px !important;
          padding-bottom:0 !important
      }
  }
  @media only screen and (max-width:880px){
    #colorexplain span{
        font-size:12px
    }
    span.dist.justinfo{
        width:63px
    }
}
  @media only screen and (max-width:414px){
      #colorexplain span{
          font-size:10px
      }
      span.dist.justinfo{
          width:63px
      }
  }

  @media only screen and (max-width:579px){
      #colorexplain li{
          margin-right:0 !important;
          width:50%
      }
  }
  @media only screen and (max-width:1120px){
      #colorexplain li{
          margin-right:20px
      }
  }
  #imagescan{
      background-image:url('/img/faces.webp');
      width:100px;
      height:100px;
      background-size:100% 100%,cover
  }
  div[data-id_pic] svg{
      display:none
  }
  @media only screen and (max-width:750px){
      .arrowcheck:before{
          content:"\f062"
      }
      .arrowcheck{
          left:8px;
          margin-top:25px;
          -webkit-animation:bounceUp 2s infinite;
          animation:bounceUp 2s 1
      }
  }
  @media only screen and (min-width:751px){
      .arrowcheck:before{
          content:"\f061"
      }
      .arrowcheck{
          left:-20px;
          margin-top:-4px;
          -webkit-animation:bounceRight 2s infinite;
          animation:bounceRight 2s 1
      }
  }
  .arrowcheck{
      position:absolute;
      z-index:10;
      font-size:30px;
      color:#f10a51
  }
  .jconfirm-box.jconfirm-hilight-shake.jconfirm-type-default{
      overflow:inherit
  }
  #agreecheck label{
      cursor:pointer
  }
  @keyframes bounceRight{
      0%,20%,50%,80%,100%{
          -ms-transform:translateX(0);
          transform:translateX(0)
      }
      40%{
          -ms-transform:translateX(-30px);
          transform:translateX(-30px)
      }
      60%{
          -ms-transform:translateX(-15px);
          transform:translateX(-15px)
      }
  }
  @keyframes bounceUp{
      0%,20%,50%,80%,100%{
          -ms-transform:translateY(0);
          transform:translateY(0)
      }
      40%{
          -ms-transform:translateY(30px);
          transform:translateY(30px)
      }
      60%{
          -ms-transform:translateY(15px);
          transform:translateY(15px)
      }
  }
  .flagcontainer .flg{
      width:20px;
      height:20px;
      margin:1px;
      float:left
  }
  .flagcontainer{
      background-color:#ffe4c4;
      display:inline-block;
      margin-right:6px;
      padding:2px;
      float:left;
      clear:left
  }
  #menudarkswitch a{
      float:left
  }
  #menudarkswitch .theme-btn.nav{
      margin-top:14px
  }
  span.warntx{
      background-color:#f00;
      color:#f5deb3;
      padding-left:4px;
      padding-right:4px;
      border-radius:5px
  }
  .pose{
      width:100px;
      float:left
  }
  #agreedoc{
      display:inline;
      margin-right:6px;
      width:15px;
      height:15px
  }
  .checkdoc2{
      clear:both;
      padding-top:10px
  }
  @media only screen and (max-width:400px){
      .checkdoc2{
          padding-top:0
      }
  }
  tr.errheader{
      background-color:#c0c0c0;
      color:#000
  }
  .dropdown-menu{
      margin-top:0;
      margin-left:-80px
  }
  .bg-custom-2{
      background-image:linear-gradient(15deg,#13547a 0%,#80d0c7 100%)
  }
  div#profilemenu{
      float:right;
      margin-left:10px;
      margin-right:-20px
  }
  @media(max-width:517px){
      div#profilemenu{
          display:none
      }
  }
  .login-fields{
      font-family:monospace;
      font-size:20px
  }
  .sidrevel{
      font-family:monospace
  }
  .cs-card{
      display:inline-block;
      font-family:monospace;
      font-size:14px
  }
  .avatar{
      width:42px;
      height:42px;
      display:inline-block;
      border-radius:10px
  }
  .avatar svg{
      border-radius:10px
  }
  .usernameav{
      background-color:#000 !important;
      cursor:default;
      color:#fff !important;
      font-size:13px
  }
  .boldid,.boldid:hover{
      cursor:default;
      text-decoration:none;
      color:var(--bs-body-color);
      font-weight:bold
  }
  .deletebox{
      position:absolute;
      height:34px;
      width:34px;
      background-color:#fff;
      bottom:0;
      right:0;
      cursor:pointer;
      border-radius:13px;
      border-radius:13px;
      opacity:.5
  }
  .fa-times{
      font-size:22px !important;
      margin:10px;
      color:#808080;
      padding:8px
  }
  .unlinktelegram{
      cursor:pointer;
      color:#1e90ff
  }
  #imgsdiv{
      clear:both
  }
  .monitor_div{
      display:inline-block;
      clear:both;
      width:100%;
      padding:7px;
      padding-left:21px
  }
  #monitorbar{
      border-top:1px solid #ddd
  }
  .csinfo{
      clear:both;
      float:left;
      width:100%;
      background-color:#ffe4c4;
      margin-bottom:5px
  }
  span.leftlabel{
      padding:3px 10px 3px 10px;
      float:left
  }
  span.rightlabel{
      float:right;
      padding:3px 10px 3px 10px
  }
  .newone{
      position:relative;
      --newcnt:'New'
  }
  .newone::after{
      padding:6px;
      background-color:#ff0;
      color:#000;
      font-weight:bold;
      left:10px;
      bottom:10px;
      display:inline-block;
      position:absolute;
      border-radius:13px;
      content:var(--newcnt)
  }
  #shownewfirst{
      padding:9px;
      margin:6px;
      float:right;
      cursor:pointer
  }
  #monitorstatus span{
      display:inline-block
  }
  #shownewfirstlab{
      cursor:pointer;
      float:right;
      margin-right:13px;
      line-height:31px
  }
  .cs-card.newone::after{
      bottom:unset;
      top:10px
  }
  .gray.newone::after{
      background-color:#c0c0c0;
      color:#808080
  }
  div#profilemenu{
      position:relative
  }
  div#profilemenu::before{
      content:var(--credits);
      font-weight:bold;
      font-size:14px;
      position:absolute;
      top:-4px;
      right:0;
      padding:0 3px 0 3px;
      background-color:#f00;
      color:#fff;
      min-width:22px;
      border-radius:7px;
      z-index:1000;
      text-align:center
  }
  .active_mon,.inactive_mon{
      padding:6px;
      background-color:#90ee90;
      color:#008000;
      font-weight:bold;
      left:10px;
      bottom:10px;
      display:inline-block;
      position:absolute;
      border-radius:13px
  }
  .inactive_mon{
      background-color:#ffb6c1;
      color:#f00
  }
  .active_mon span.fa.fa-check-circle,.inactive_mon span.fa.fa-check-circle{
      color:unset;
      vertical-align:middle
  }
  .inactive_mon span.fa-check-circle:before{
      content:"\f057"
  }
  .fa-check-circle:before{
      top:-1px;
      position:relative
  }
  .resetpos{
      position:unset;
      display:unset
  }
  .lastsearch,.new_seen_count{
      margin-left:14px
  }
  #lastsearchago{
      margin-left:8px
  }
  .resetnewcount{
      float:right
  }
  .monitor_div button{
      margin-top:3px
  }
  @media only screen and (max-width:830px){
      .monitor_div{
          padding-left:7px
      }
      .lastsearch,.new_seen_count{
          margin-left:7px
      }
  }
  .article h2:after{
      content:'';
      display:block;
      width:80px;
      height:3px;
      background:#5ee4e4;
      margin-top:15px;
      border-radius:2px;
      -webkit-border-radius:2px;
      -moz-border-radius:2px
  }
  .bigpic img{
      margin:10px 0 60px 0;
      border:2px solid #c0c0c0
  }
  .steps img{
      max-width:500px;
      border:2px solid #c0c0c0;
      margin-bottom:40px
  }
  a.ojp-tag:hover{
      background:#1a4480
  }
  a.ojp-tag:visited,a.ojp-tag:active{
      text-decoration:none
  }
  a.ojp-tag{
      color:#fff;
      text-decoration:none
  }
  a:active{
      color:#252f3e
  }
  a:hover{
      color:#252f3e
  }
  a:active,a:hover{
      outline:0
  }
  .taxonomy a{
      font-size:1.0625rem;
      line-height:1.5rem;
      font-family:Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;
      background:#0084c6;
      color:#fff;
      display:inline-block;
      font-weight:bold;
      margin-right:.625rem;
      margin-bottom:.625rem;
      padding:.125rem .5rem;
      text-decoration:none
  }
  a.hilight{
      background:#ff0;
      padding:0 3px;
      margin:inherit;
      color:#000;
      text-decoration:none
  }
  .reference_blurb{
      margin-bottom:40px
  }
  .reference_blurb h4{
      margin-bottom:10px;
      font-size:19px
  }
  .announcement{
      background-color:#cc8500;
      color:#000;
      margin-top:20px;
      font-size:12px;
      color:#000;
      font-weight:bold;
      padding:3px;
      border-radius:6px;
      max-width: max-content;
  margin: auto;
  padding-right: 10px;
  padding-left: 10px;
  }
  .red_white{
      background-color:#f00 !important;
      color:#fff !important
  }
  .nosearchedleft{
      background-color:#ffa500;
      color:#fff;
      font-size:22px
  }
  .searchedleft{
      background-color:#3cb371;
      color:#fff;
      font-size:22px
  }
  span.dist{
      font-size:20px
  }
  .topdiv{
      font-size:16px
  }
  @media only screen and (min-width:320px){
      .facediv{
          width:305px;
          height:305px
      }
  }
  @media only screen and (min-width:360px){
      .facediv{
          width:344px;
          height:344px
      }
      span.dist{
          font-size:26px
      }
      .topdiv img{
          width:40px
      }
  }
  @media only screen and (min-width:375px){
      .facediv{
          width:360px;
          height:360px
      }
      .topdiv{
          font-size:20px
      }
      span.grpcnt{
          font-size:28px !important;
          margin-left:8px;
          margin-right:3px;
          line-height:46px
      }
  }
  @media only screen and (min-width:390px){
      .facediv{
          width:373px;
          height:373px
      }
  }
  @media only screen and (min-width:412px){
      .facediv{
          width:395px;
          height:395px
      }
  }
  @media only screen and (min-width:600px){
      .facediv{
          width:292px;
          height:292px
      }
  }
  @media only screen and (min-width:768px){
      .facediv{
          width:336px;
          height:336px
      }
  }
  @media only screen and (min-width:800px){
      .facediv{
          width:360px;
          height:360px
      }
  }
  @media only screen and (min-width:1024px){
      .facediv{
          width:314px;
          height:314px
      }
  }
  @media only screen and (min-width:1120px){
      .facediv{
          width:260px;
          height:260px
      }
      span.dist{
          font-size:20px
      }
      .topdiv img{
          width:32px
      }
      .topdiv{
          font-size:16px
      }
      span.grpcnt{
          line-height:36px
      }
  }
  .tinypic{
      overflow-wrap:break-word;
      color:#fff;
      font-size:17px;
      width:100px;
      height:100px;
      font-family:monospace;
      float:left;
      margin-right:4px;
      margin-bottom:4px
  }
  .rqpic{
      width:260px;
      height:260px
  }
  @media only screen and (max-width:342px){
      .logo{
          width:167px
      }
  }
  .cs-card span.dist{
      position:absolute;
      right:5px;
      top:5px
  }
  .cs-card{
      scroll-margin-top:70px
  }
  .sidrevel.tele{
      margin-top:0;
      float:left;
      clear:both
  }
  @media only screen and (min-width:620px){
      .sidrevel.tele{
          margin-top:7px;
          clear:unset;
          float:right;
          margin-right:150px
      }
  }
  #copyButton{
      margin-left:10px;
      padding:5px;
      cursor:pointer;
      background:none;
      border:none;
      display:inline;
      opacity:.5
  }
  .maintext {
    text-align: left;
  
    max-width: 600px;
    clear: both;
    margin: 10px auto;
      margin-top: 10px;
      margin-bottom: 10px;
    margin-bottom: 60px;
    margin-top: 100px;
  }
  .maintext h2 {
    color: var(--headlines);
    font-size: 26px !important;
  }
  .maintext p, .maintext li {
    font-size: 0.8rem;
    color:gray;
  }
  @media only screen and (max-width: 700px) {
    .maintext {
      width: 100% !important;
      padding: 8px;
    }
  }
  .maintext ul {
  
  
    padding-left: 10px;
    
    }
  
    #gallery img, #gallery svg {
    height: 109px;
    margin: 6px;
    vertical-align: middle;
    border-radius: 8px;
  }
  
  button.remove_but {
    font-size: 22px;
    line-height: 20px;
    width: 20px;
    padding: 0;
    opacity: 0.5;
    border: 1;
    border-radius: 5px;
    position: absolute;
    z-index: 1000;
  
  }
  
  div.topdiv span {
      color: #cccccc;
      padding-left:5px;
      font-weight: bold;
      text-transform: uppercase;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  .topdiv {
      overflow: hidden;
      min-width: 0;
  }
  .topinfo .dist {
      flex-shrink: 0;
  }
  

  .searchimg{
      height:120px;
      width:120px;
      position:relative;
      -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        vertical-align: middle;
  border-radius: 8px;
  }
  .searchimg .history-score-pill{
      position:absolute;
      top:6px;
      right:6px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      float:none;
      font-size:15px;
      line-height:1;
      width:auto;
      min-width:2.9em;
      padding:6px 8px;
      margin:0;
      border-radius:999px;
      white-space:nowrap;
      font-variant-numeric: tabular-nums;
      box-shadow:0 4px 10px rgba(0,0,0,.28);
      z-index:1;
  }

  .searchmessage {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 20px;
  }


  div.searchmessage a {
    text-decoration: underline !important;;
    color:#3498db !important;
    cursor:pointer;
}
.searchesdiv {
    width: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.searchesrows {
    display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
@media (max-width: 600px) {
    .searchimg{
        height:60px;
        width:60px;
        position:relative;
        -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          vertical-align: middle;
        border-radius: 4px;
    }  
    .searchimg .history-score-pill{
        top:4px;
        right:4px;
        min-width:2.7em;
        font-size:11px;
        padding:4px 6px;
    }
    .searchmessage {
        font-size:0.8rem;
        margin-top: auto;
        margin-bottom: auto;
        margin-left: 10px;
      }
      .searchesrows {
        display: grid;
      justify-content: center;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 8px;
    }

}