/*resets */

html, body {
    font-family: 'Noto Sans TC', 'Noto Sans SC', Verdana, sans-serif!important;
}

@media print {
    @page {size:auto; margin:0;} /* suppress URL/metadata in PDF header */
    body {counter-reset:sec;}
    h1::before {content:"ClearOPS Service Provider Report: ";}
    h3::before {counter-increment:sec;content:"[" counter(sec) "] ";}
    .cops-whiskers {display:none;}
    .w3-flat-peter-river {color:#fff;background-color:#000;}
    .cops-tr {border-bottom:1px solid black;}
    .cops-tr:nth-child(even) {background-color:#020202;}
    /*.report-header{break-after:always;}*/
    .cops-copyright{break-before:avoid;}
    .public-warning {font-size:42px;}
    .w3-button {display:none;}
    .w3-btn {display:none;}
    .cops-report-nonprint{display:none;}
    .cops-report-printonly{display:inline;}
    .btn {display:none;}
    .cops-report-section {break-inside:avoid;break-before:always;}
    .cops-report-last-section {break-inside:avoid;break-after:avoid;break-before:always;}
    /* "table" "column" widths in vendor.html.ep */
    /* suppress notes/next-steps and widen other cols for print */
    .cops-w15p {width:20%;}
    .cops-w5p {width:5%;}
    .cops-w30p {width:35%;}
    .cops-w40p {width:40%;}
    .cops-w10p {display:none;}
}
@media screen {
    /* bespoke divtable "column" widths in vendor.html.ep */
    .cops-w15p {width:15%;}
    .cops-w5p {width:5%;}
    .cops-w30p {width:30%;}
    .cops-w40p {width:40%;}
    .cops-w10p {width:10%;}
    .cops-report-nonprint{display:block;}
    .cops-report-printonly{display:none;}
}

.carousel {display:none;}
.carousel-slide {display:none;}

.override {
  margin: 0; /*!important */
  padding: 0 !important;
  border: 0;
/*  background-color: #888888;*/
}

/*Classes to override borders and shadows */

@media not print {

div.w3-col.s6.ver-flex > div.w3-round.w3-margin.card-cops
{border: 1px solid #ccc !important;width:100%;}

/*Colors */
.w3-flat-turquoise
{color:#fff;background-color:#1abc9c}
.w3-flat-emerald
{color:#fff;background-color:#2ecc71}
.w3-flat-peter-river
{color:#fff;background-color:#3498db}
.w3-flat-amethyst
{color:#fff;background-color:#9b59b6}
.w3-flat-wet-asphalt
{color:#fff;background-color:#34495e}
.w3-flat-green-sea
{color:#fff;background-color:#16a085}
.w3-flat-nephritis
{color:#fff;background-color:#27ae60}
.w3-flat-belize-hole
{color:#fff;background-color:#2980b9}
.w3-flat-wisteria
{color:#fff;background-color:#8e44ad}
.w3-flat-midnight-blue
{color:#fff;background-color:#2c3e50}
.w3-flat-sun-flower
{color:#fff;background-color:#f1c40f}
.w3-flat-carrot
{color:#fff;background-color:#e67e22}
.w3-flat-alizarin
{color:#fff;background-color:#e74c3c}
.w3-flat-clouds
{color:#000;background-color:#ecf0f1}
.w3-flat-concrete
{color:#fff;background-color:#95a5a6}
.w3-flat-orange
{color:#fff;background-color:#f39c12}
.w3-flat-pumpkin
{color:#fff;background-color:#d35400}
.w3-flat-pomegranate
{color:#fff;background-color:#c0392b}
.w3-flat-silver
{color:#000;background-color:#bdc3c7}
.w3-flat-asbestos
{color:#fff;background-color:#7f8c8d}
.cops-tr:nth-child(even)
{background-color:#F6F6F4 !important; border-top: 1px solid #ccc !important; border-bottom: 1px solid #ccc !important;}

} /*@media not print*/

/*Classes to manage padding and margin */

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}

/* Classes for vertical alignment */

.ver-flex {
  display: flex;
}

.ver-flex > div {
  height: 100%;
  min-height: 250px;
}

/* chat */

* {box-sizing: border-box;}

/* Button used to open the contact form - fixed at the bottom of the page */

.open-button-right {
  cursor: pointer;
  opacity: 0.4;
  position: fixed;
  right: 0px;
  top: 60px;
  width: 20px;
  height: 100px;
  font-weight: bold;
  padding: 0;
}
.opened-button-right {
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  right: 0px;
  top: 60px;
  width: 40px;
  height: 100px;
  font-weight: bold;
  padding: 0;
}

.open-button-left {
  cursor: pointer;
  opacity: 0.4;
  position: fixed;
  left: 0px;
  top: 60px;
  width: 20px;
  height: 100px;
  font-weight: bold;
  padding: 0;
}
.opened-button-left {
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  left: 0px;
  top: 60px;
  width: 40px;
  height: 100px;
  font-weight: bold;
  padding: 0;
}

/* The popup form - hidden by default */
.form-popup-right {
  display: none;
  position: fixed;
  top: 60px;
  right: 40px;
  border: 3px solid blue;
  z-index: 9;
}

/* The popup form - hidden by default */
.form-popup-left {
  display: none;
  position: fixed;
  top: 60px;
  left: 40px;
  border: 3px solid black;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.form-container input[type=text] {
  width: 95%;
  padding: 1px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  font-size: 14px;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

.json-data {
  font-family: monospace,monospace;
  overflow-y: scroll;
  height: 300px;
  min-height: 200px;
  width: 100%;
}
.analysis-txt {
  overflow-y: scroll;
  height: 300px;
  min-height: 200px;
  width: 100%;
}

.chat-log {
  font-size: 14px;
  width: 100%;
  overflow-y: scroll;
  height: 300px;
  min-height: 200px;
  border: 2px solid black;
}

.chat-input {border:2px solid black !important;}

.msgs_form { width: 500px; height: 250px; border: 2px solid black; }
.msgs-log {
  background-color: white;
  font-size: 12px;
  width: 100%;
  overflow-y: scroll;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold !important;
    color: black !important;
}

.scrunchy {line-height:0.8 !important;}

.bborder {border: 1px solid black !important;}
.s20 {width:20%;}
.s25 {width:25%;}
.funky-btn {padding:0px!important;}
.funky-btn-fai {padding:0px!important;background-color:#f1f1f1;color:#3f51b5;font-size:16px!important;}

.search-bar {
    border: 4px solid black;
    padding: 0px!important;
    margin: 0px!important;
    width: 100%;
    max-height: 40px;
}

.search-bar-btn-left { float:left; }
.search-bar-btn-right { float:right; }
.search-terms { display: flex; }

.search-bar-btn {
    padding: 0px!important;
    margin: 0px!important;
    border: 0px!important;
    color: white;
    background: black;
    min-width: 20px;
/*    align-content: center;
    display:inline;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    background-color:inherit;
    text-align:center;
    cursor:pointer;
    white-space:nowrap;*/
}
.search-bar-btn:hover{
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
}

.our-btn {
    padding-top:0px!important;
    padding-bottom:16px!important;
    padding-left:4px!important;
    padding-right:16px!important;
}
.our-btn-2 {margin-right:8px!important;}

.taggy:hover {border-color:black;color:black}
.tagbar {margin-bottom:8px;}
div.tagbar {margin-top:4px;}
.domain-head{
    font-size:36px;
    font-weight:bold;
    font-family:"Noto Sans TC", "Segoe UI", Arial, sans-serif;
    margin:10px 0;
}

.ontop{z-index:3;}

.tinyBottomBar{height:30px !important;}
.errorModalOutline{height:400px !important;}
.f18px{font-size:18px !important;}

.loginBg{background-color:#f1f1f1;}
.w100p{width:100%;}
.vendorToolTip{position:absolute;left:0;bottom:18px;}
.vendorNotes{border: 1px solid black;}

.spinModal{background:rgba(0,0,0,0.0);height:100%!important;width:100%!important;}
.spinModalBg{background:rgba(0,0,0,0.0);}
.spinModalInner{vertical-align:middle!important;}
.f120px{font-size:120px;}
.f24px{font-size:24px;}
.p3px{padding:3px;}
.h300px{height:300px;}
.hidden{display:none;}
.dashStyles{font-size:10px;min-height:100px;height:100px;}
.resultRowThumb{position:relative;display:inline-block;width:260px;height:195px;}
.thumbLinkOuter{z-index:1;position:absolute;top:0px;left:0px;}
.thumbImgOuter{background:rgba(0,0,0,0.0);text-align:center;z-index:2;position:absolute;top:0px;left:0px;width:100%!important;height:100%!important;vertical-align:middle!important;}
.h400px{height:400px;}

.report-row {
    border-left: 10px solid rgba(0,0,0,0.0);
}
@keyframes glow {
    0% { border-left: 10px solid rgba(0,0,0,0.0); }
   50% { border-left: 10px solid gold; }
  100% { border-left: 10px solid rgba(0,0,0,0.0); }
}
.glowing{animation:glow 3s infinite}
.header-bar {
    background-color:#3498db !important;
}
th {
    color:#fff !important;
    background-color:#3498db !important;
    position: sticky !important;
    top: 42px !important;
    box-shadow: 0 2px 2px -1px rgba(0,0,0,0.7)!important;
    font-weight: bold;
    z-index: 2;
}
.w15p{width:15%;}
.w5p{width:5%;}
.w20p{width:20%;}
.w30p{width:30%;}
.w40p{width:40%;}
.w10p{width:10%;}
.h400px{height:400px}
.f32px{font-size:32px;}