/* qa_reports.css */

.qa_test_result_line {
   margin-bottom: 0.5em;   
   color: #004201;
}

.qa_test_details_container {
   margin-bottom: 1em;   
}

.qa_test_detail_line {
   margin-bottom: 0.5em;   
   color: black;
}

.qa_test_result_error_message {
   margin-top: 1em;
   margin-bottom: 1em;
   color: Red;
}

.qa_vertical_spacer {
   margin-bottom: 1em;
}

h1.qa_test_header {
   background-color: White;
   color: blue;
   font-size: 2em;
}

h2.qa_test_header {
   background-color: White;
   color: purple;
   font-size: 2em;
}

#list_of_links table{
   margin-left:2%;
}

.modal {
   max-width:95% !important;
   max-height:90% !important;
   overflow:auto;
   min-height:90%;
   position:absolute;
   top:5% !important;
   left:5% !important;
}
.modal-spinner{
   height:40px !important;
}
a.close-modal{
   top:2.5px !important;
   right:2.5px !important;
}
/* Scrollbar styles */
   ::-webkit-scrollbar {
   width: 12px;
   height: 12px;
   }
   
   .small-fixed{
      color:#c0c0c0;
      margin-left:-17px;
      font-size:0.5em;
   }
   
   ::-webkit-scrollbar-track {
   background: #f5f5f5;
   border-radius: 10px;
   }
   
   ::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background: #ccc;  
   }
   
   ::-webkit-scrollbar-thumb:hover {
   background: #999;  
   }
   .qa-action-menu {
      cursor:pointer;
      float:right;
      margin-top:-42px
   }
   .search-table-outter {
      width: auto; 
      max-width: 2000px;
      margin-left: auto;
      margin-right: auto;
  }
  .search-table{
      table-layout: fixed; 
      margin:0px auto 0px auto; 
      background-color: white;
      font-size: 0.9em;
      text-align: left;
      white-space: nowrap;
      min-width: 75%;
      white-space: nowrap;

  }
  .search-table th{
   padding:5px 7px; 
   font-size:0.9em;
   min-width: 100px; 
   text-align: left;
   }
  .search-table td{
   padding:5px 10px; 
   height:35px;
   min-width: 100px; 
   text-align: left;
   }

  .refresh-table-icon {
   top:10px;
   left:15px;
   width:12em;
   position: relative;
   padding: 5px 18px;
   border-radius: 5px;
   color: #757575;
   background-color: #eee;
   font-size: 0.8em;
   filter: drop-shadow(2px 2px 2px #505050);
   cursor: pointer;
  }
  .tick-cross{
   height:20px;
   position:relative;
   left:-45px;
   top:12px;
  }
  .total-box{
   margin-left:-22px;
   margin-top:-6px;
   text-align:center;
   min-width:80px; 
   font-size:0.8em;
   border-radius:5px;
   float:right;
   color:white;
  }
  h4 {
     padding-top:30px !important;
  }
  
  .report_cell_underline{
     text-align: left !important
  }

  .row-data{
     display:none;
  }
  .show-results{
     display:block !important;
  }

   .show-table td {
      padding:5px;
   }

  .show-tag{
   font-size: 0.8em;
   margin-left:2%;
   cursor:pointer;
   border-radius:5px; 
   margin-top:20px; 
   border:solid 1px grey;
   padding: 2px 5px;
   color:white;
   background-color: gray;
   width:12em;
   text-align:center;

  }
  .show-group{
   position:relative;
   top:-5px;
   left:5px;
   font-size:0.8em;
   cursor:pointer;
  }
  .search-table-outter { overflow-x: auto; }

  .fixed {
      position: absolute; 
      left: auto; 
      top: auto;
      margin-top:1px;
      height:10px;
      width:20px;
      margin-left: 20px;
 
  }

  .search-table .fixedtop {
   position: absolute; 
   left: auto; 
   top: auto;
   background-color: white;
   }
  
  .search-table tr th:nth-child(2), .search-table  tr td:nth-child(2) {
      padding-left: 50px;
      width:1%;
      white-space:nowrap;
  }
.force_white_background {
   opacity: 0.4 !important;
}
.no_events{
   pointer-events: none;
}
.blue-button{
   background-color: rgb(201,203,214); /* Blue */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  border-radius: 10px;
  margin-top:5px;
  height:20px;
  min-width: 75px;
}
.hide_class{
   display:none !important;
}
.filter {
   text-align:center;
   min-width:80px;
   color:white;
   font-size:0.9em;
   cursor:pointer;
   float:left;
   border-radius:5px;
   padding:2px 5px 2px 5px;
}
.filter-all{
   background-color:#8d8d8d;
}
.filter-new{
   background-color: #fd9090;
}
.filter-expected{
   background-color:#b1d877;
}
.filter-missing{
   background-color:#8cdcda;
}
.filter-white{
   background-color:white;
}
.filter-green{
   background-color:green;
}
.filter-red{
   background-color: #fd0101;
}
.filter-filtered{
   background-color: #d977cc;
}


 .loader {
	display:none;
	position:fixed;
	border: 16px solid #f3f3f3; /* Light grey */
	border-top: 16px solid #3498db; /* Blue */
	border-radius: 50%;
	left: 50%;
	top: 50%;
	margin-top:-25px;
	margin-left:-25px;
	width: 50px;
	height: 50px;
	animation: spin 2s linear infinite;
  }
  
 
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }

.hollow-button{
   border: 1px solid #808080;
   border-radius:20px;
   padding: 0px 5px 2px 5px;
   font-size:0.8em;
   cursor: pointer !important;
   background-color: #f0f0f0;
}


/* Customize the label (the container) */
.container-input {
   display: block;
   position: relative;
   padding-left: 35px;
   margin-bottom: 12px;
   cursor: pointer;
   font-size: 22px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
 /* Hide the browser's default checkbox */
 .container-input input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   height: 0;
   width: 0;
 }
 
 /* Create a custom checkbox */
 .checkmark {
   position: absolute;
   top: 0.2em;
   left: 0;
   height: 12px;
   width: 12px;
 }
 
 /* On mouse-over, add a grey background color */
 .container-input:hover input ~ .checkmark {
   background-color: #ccc;
 }
 
 /* When the checkbox is checked, add a blue background */
 .container-input input:checked ~ .checkmark {
   background-color: #b1d877;
 }
 
 /* Create the checkmark/indicator (hidden when not checked) */
 .checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
 
 /* Show the checkmark when checked */
 .container-input input:checked ~ .checkmark:after {
   display: block;
 }
 
 /* Style the checkmark/indicator */
 .container-input .checkmark:after {
   left: 4px;
   top: 3px;
   width: 4px;
   height: 7px;
   border: solid white;
   border-width: 0 2px 2px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
 }
@media  only screen and (max-width: 1350px){
   .qa-action-menu{
      margin-top: -15px;
      margin-left:10px;
      float: left;
   }
}