/*
    This is base css script - no root class here 
    Put here styles only forgeneral restyling of elements 
    Classed elements should not be put here if they belong to some widget
*/
[v-cloak] { display: none; }

.modal-open {
    overflow-y: auto;
    padding-right: 0 !important
}

h1 {
    /* text-transform: uppercase; */
    font-size: 2rem;
    font-weight: 300;
}

body#page-top {
    min-height: 100vh;
}

.pt-70-px {
    padding-top: 53px;
}


.scrollup{
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:20px;
    right:20px;    
    text-indent:-9999px;
    z-index: 10000;
    background: url('/Content/img/icon_top.png') no-repeat;
}

@media (max-width:700px) {
  .scrollup {
      display: none !important;
  }
}

.feedback-err {
    display: none;
}

.fade-enter-active, .fade-leave-active {
    /* transition: opacity .5s; */
    max-height: 100px;
    transition: max-height 3s ease-out;
    overflow: hidden;  
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    /* opacity: 0; */
    max-height: 0;
    overflow: hidden;    
    transition: max-height 3s ease-in;
  }

/* .row-striped:nth-of-type(even) {
    background-color: rgba(0, 0, 0, 0.05);
}   */

.border-b > div:not(:last-child) {
    border-bottom: 1px solid black;
}

@media (max-width: 767.98px) {
    .px-before-sm-0 {
        padding: 0 !important;
    }    
}

.lg-font-weight-normal {
    font-weight: bold;
}

@media (min-width: 992px) {
    .lg-small {
      font-size: 80%;
      font-weight: 400;
    }
    .lg-font-weight-normal {
        font-weight: normal;
    }   
}

.lh-1 {
    line-height: 1;
    font-size: 1.2rem;
}

@media (min-width: 768px) {
    .lh-1 {
        font-size: 1.5rem;
        text-align: left;
    }     
}

.lh-12 {
    line-height: 1.2;
}

.pool .lvl-1 {
    font-size:90%;
}
.pool .lvl-2 {
    font-size:80%;
}

.small-placeholder::placeholder {
    font-size: 80%;
}

.text-linethrough {
    text-decoration: line-through;
}

.pl-lh-12::placeholder {
    line-height: 1.2;
}

.pl-right::placeholder {
    text-align: right;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgb(160, 160, 160) !important;
    opacity: 1 !important; /* Firefox */
}
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgb(160, 160, 160) !important;
}
  
::-ms-input-placeholder { /* Microsoft Edge */
    color: rgb(160, 160, 160) !important;
}

.progress-bar-animated {
    transition: width 0.5s;
    transition-timing-function: linear;
}

/* main {
    transition: all 0.3s;
} */

/* @media (min-width: 768px) {
    main {
        margin-left: 250px;
    }
} */

#content {
    min-height: 100vh;
    width: calc(100% - 250px);
    transition: all 0.3s;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
}

#content.active {
    width: calc(100% - 80px);
}

@media (max-width: 768px) {
    #content.active {
        width: 100%;
    }
    #content {
        /* width: calc(100% - 80px); */
        width: 100%;
    }
}

#chatra.chatra--mobile-widget:not(.chatra--expanded) {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none;
}

@media (min-width: 768px)
{
    .mw-16em {
        max-width: 16em;
    }
}

@media (max-width: 768px)
{
    #fullArticle img {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 992px) { 
    .w-lg-auto {
        width: auto !important;
    }
}

@media (min-width: 640px) { 
    .w-640-auto {
        width: auto !important;
    }
}

a.hover-box {
    text-decoration: none;    
}

a.hover-box:hover > div.border {
    border: 1px solid black !important;
}

.rounded-left-0 {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

@media (min-width: 768px) {
    .mvh-md-75 {
      max-height: 75vh !important;
      overflow-y: auto;      
    }
}

.bg-down {
    background-color: #fde7e7;
}

.bg-disabled {
    background-color: #ececec;
}

.o-none {
    opacity: 0;
    /* transition: opacity 0.3s linear; */
}

.o-initial {
    opacity: initial;
    transition: opacity 0.3s linear;
}
#navigation .nav-link {
    color:#fff;
  }
  
  #navigation .nav-link:hover {
    color: #1abc9c;
  }
  
  #navigation .dropdown-menu {
    background-color: black;
  }
  #navigation .dropdown-item {
    background: inherit !important;
  }

#navigation .navbar-brand {
  width: 220px;
}  
  

a.start24x7monitoring {
  padding-left: 0;
  text-decoration: none;
}

a.start24x7monitoring > div {
  background-image: none;
  background-color: rgb(97, 212, 97);
  color: white;
  box-shadow: 2px 2px 5px #888;
  border-radius: 3px;
  white-space:nowrap;
  line-height: 0.9;
}

a.start24x7monitoring > div:hover {
  background-color: #53c753;
}
#sidebar {
    min-width: 250px;
    max-width: 250px;
    position: fixed;
    /* top: 65px; */
    padding-top:65px;
    left: 0;
    /* margin-top: 65px; */
    z-index: 999;
    height: 100vh;
    /* min-height: 100vh; */
    transition: all 0.3s;
    border-right: 1px solid #aaa;
    overflow-y: auto;
    /* color: white; */
    /* background-color: #1c1c1c; */
}

#sidebar.active {
    /* margin-left: -250px; */
    min-width: 80px;
    max-width: 80px;
    text-align: center;
}

#sidebar.active ul p {
    /* display: none; */
    display: block;
    height: 0;
    overflow: hidden;
    /* padding: 0 !important; */
}

#sidebar ul li a {
    text-align: left;
}

#sidebar.active ul li a {
    padding: 7px 5px;
    text-align: center;
    font-size: 0.65em;
}

#sidebar.active ul li a i {
    margin-right:  0;
    display: block;
    font-size: 1.8em;
    margin-bottom: 5px;
    width: auto;
}

#sidebar.active ul ul a {
    padding: 5px !important;
}

#sidebar.active .dropdown-toggle::after {
    top: auto;
    bottom: 10px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}

#sidebar a[data-toggle="collapse"] {
    position: relative;
}

#sidebar .dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

@media (max-width: 768px) {
    /* #sidebar {
        margin-left: -250px;
    } */
    /* #sidebar.active {
        margin-left: 0;
    } */
    #sidebar {
        /* margin-left: 0;  */
        margin-left: -250px !important;        
    }
    #sidebar.active {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
        margin-left: -80px !important;
    }    
}

#sidebar a, #sidebar a:hover, #sidebar a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;    
}

#sidebar ul p {
    /* padding: 10px 10px 0px 10px; */
    margin: 0;  
}

#sidebar ul p span {
    border-bottom: 1px solid #aaa;
    width: 100%;
    display: inline-block;
    font-size: 1.2rem;  
}

#sidebar i {
    font-size: 1.5em;
    vertical-align: middle;
    text-align: center;
    width: 30px;
    margin-top: -3px;
}

#sidebar ul li a {
    padding: 0.25rem 0.5rem 0.25rem 1rem;
    display: block;
    line-height: 1.2;    
}

#sidebar ul li a > span {
    vertical-align: middle;
}

#sidebar ul li a:hover {
    color: #7386D5;
    /* background: #fff; */
}

#sidebar ul li.active > a, .sidebar a[aria-expanded="true"] {
    color: #7386D5;
}

#sidebar ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
}

/* This css is for OAuth icon rendering
   Root class externalProviderLogo
*/


div.externalProviderLogo {
    display:table-cell; 
    border-radius: 100px; 
    width: 50px; 
    height: 50px; 
    vertical-align:middle;
    text-align:center; 
    background-color: #A5C8F2; 
    color:white; 
    font-size: x-large;
}

div.externalProviderLogo.disabled {
    background-color: #cccccc;
}

div.externalProviderLogo.fixed {
    background-color: #A5C8F2; 
}

div.externalProviderLogo:hover, div.externalProviderLogo.disabled:hover {
    background-color: #4698f9; 
}

div.externalProviders {
    text-align: center;
}
div.externalProviders > div {
    vertical-align:middle; 
    text-align:center;   
    display: inline-block;  
}

div.externalProviders > div {
    padding-right: 1em;
}

@media (max-width: 900px) {
    div.externalProviders {
        display:block;
        text-align:center;
    }

    div.externalProviders > div {
        display:inline-block;
    }

    
    div.externalProviders > div {
        margin-top: .7ex;
    }

    div.externalProviders > div {
        padding-right: .3em;
    }

    div.externalProviders > div:first-child {
        padding-left: .3em;
    }

}

@media (max-width: 450px) {
    div.externalProviderLogo {
        width: 40px; 
        height: 40px; 
        font-size: large;
    }
}


@media (max-width: 450px) {
    .loginSubmitHolder {
        text-align:center
    }    
}
footer#footer {
    /* color: #888;
    background-color: #1c1c1c; */
    border-top: 1px solid #aaa;
    z-index: 999;
    /* padding-bottom: 20px;     */
  }
  footer#footer a {
    /* color: #c9c9c9; */
    color: black;
  }
  footer#footer a:hover {
    /* color: #ffffff; */
    color: gray;
  }
  footer#footer .footer-column:not(:last-child) {
    margin-bottom: 20px;
  }
  @media (min-width: 768px) {
    footer#footer .footer-column:not(:last-child) {
      margin-bottom: 0px;
    }
  }
  footer#footer .footer-header {
    /* color: #c9c9c9; */
    color: black
    text-transform: uppercase;
    margin-bottom: 5px;
    /* letter-spacing: 0.2em; */
  }
  footer#footer p {
    font-size: 90%;
  }
  footer#footer .termContent {
    font-size: 90%;
  }
  footer#footer .linked-term {
    font-size: 90%;
  }  
  footer#footer ul.icon-list {
      margin-bottom: 0.2rem;
  }
  footer#footer ul.icon-list > li > i {
    padding-right: 10px;
  }
  footer#footer ul.social-icon-list > li {
    display: inline-block;
  }
  footer#footer ul.social-icon-list > li a {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    /* border: 1px solid #c9c9c9; */
    border: 1px solid black;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
  }
  footer#footer ul.social-icon-list > li a:hover {
    border-color: #ffffff;
  }

  footer#footer .carousel {
    margin-right: 40px;
  }
  
  footer#footer .carousel .carousel-control-next {
    margin-right: -50px;
  }

  footer#footer .term {
      /* color: #c9c9c9; */
      color: black;
  }

  /* footer#footer .term .articleDateHolder {
      font-size: 70%;
      margin-bottom: .5rem;
  } */

  footer#footer .term p {
    margin-bottom: 0rem;
  }

  footer#footer .term .moreLink {
      margin-right: .75rem;
      margin-bottom: .5rem;
  }

  footer#footer #footerPageTermNext {
      position: absolute;
      top: 5px;
      left: -20px;
  }

  footer#footer .term .questions {
      line-height: 1.1;
  }

  @media (min-width: 768px) { 
    footer#footer .term ~ .term {
        display: none;
    }
  }

  @media (max-width: 767px) { 
    footer#footer .footer-page-term-next-holder {
        display: none;
    }
  }

  footer#footer .payment-icons > img {
      height: 20px;
  }


.wf-l-div {
    display: table-cell;
    width: 50%;
    min-width: 200px;
    border-width: 1px;
    border-style: solid;
    border-color: lightgray;
}

.wf-splitter{
    display: table-cell;
    cursor: col-resize;
    min-width: 1px;
    border-width: 1px;
    border-style: solid;
    border-color: lightgray;
    background-color: rgb(193, 213, 221);
}

/* after .wf-r-div, '.wf-r-div-init' will be deleted after initialization */
.wf-r-div-init {
    width : 49.8%; 
}

.wf-cell {
    display: table-cell;
    width: 100%;
}


.wf-table-header-col {
    cursor : col-resize;
/*    display: block; */
    /* font-size: 12px;     */
    border-color: rgb(190, 189, 189);     
    border-style: solid;
    border-width: 1px;
    line-height: 1.5;        
}


.wf-table-init {
    width : 100%;
}

.wf-hcol0-init {
    width : 55%;
}
.wf-hcol1-init {
    width : 10%;
}
.wf-hcol2-init {
    width : 8%;
}
.wf-hcol3-init {
    width : 12%;
}
.wf-hcol4-init {
    width : 15%;
}


.wf-hcols0-init {
    width : 350px;
}
.wf-hcols1-init {
    width : 20%;
}
.wf-hcols2-init {
    width : 25%;
}
.wf-hcols3-init {
    width : 30%;
}
.wf-hcols4-init {
    width : 25%;
}

.wf-table-body {
    width: 100%;
    display: block;
}


/* -------------- */

.wf-h-col2 {
    text-align : center;
}
.wf-h-col3 {
    text-align : right;
    margin-right: 5px;    
}
.wf-h-col4 {
    text-align : right;
    margin-right: 5px;
}

.wf-protocol-div {
    text-align : center;
}
.wf-size-div {
    text-align : right;
    margin-right: 5px;
}
.wf-time-div {
    text-align : right;
    margin-right: 5px;    
}

.wf-root-div {
    width:100%;
    height : 100%;
    display:table;
    line-height: 1.5;
}

.wf-root-div div{
    line-height: 1.5;
}

.space {
    margin-bottom: 10px;
}

.wf-r-div {
    font-size:0px;
    display: table-cell;
    background:white;
    overflow: hidden;  
    border-bottom-color: rgb(190, 189, 189);     
    border-bottom-style:solid;
    border-bottom-width: 1px;
    position: relative;
}


.wf-svg {
    width:100%; 
    max-width: 100%;
    fill:white;
    position: absolute;
    top:0px;
}

.wf-gridline {
    stroke: gray;
    stroke-width: 0.5;
}
.wf-gridline[bold='true'] {
    stroke: black;    
    stroke-width: 1;
}

.wf-line-back-rect[is-even='1'] {
    fill:rgb(240, 237, 237)    
}


.wf-line-back-rect[is-not-finished = 'true'] {
    fill:rgb(253, 215, 209);
    background : rgb(253, 215, 209);
}


.wf-table div {
    /*overflow: hidden;*/
    text-overflow: ellipsis;
}

.wf-table {
    cursor: default;
    font-family: Arial;
    font-size: 12px;
    border-collapse: collapse;
    text-align: left;
    table-layout: fixed;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space :nowrap;
}

.wf-table.wf-s {
    font-size: 9px;
}

.wf-table th td {
    border-left: solid;
    border-right: solid;
    border-width: 1px;
    border-color:rgb(190, 189, 189); 
    line-height: 1.5;            
}


.wf-table-header-div {
    margin-left: 3px;
    margin-right: 3px; 
    text-overflow: ellipsis;
    overflow: hidden;       
}

.wf-l tr:nth-child(2n) {
    background:rgb(240, 237, 237)        
}
.wf-s tr:nth-child(4n) {
    background:rgb(240, 237, 237)        
}
.wf-s tr:nth-child(4n-1) {
    background:rgb(240, 237, 237)        
}

.wf-s tr{
    font-size: 90%;
}

.wf-res-div {
    overflow: hidden;   
    text-overflow: ellipsis;
    vertical-align: middle;
    margin-left : 4px;
    margin-bottom: 0px;
    height : 34px;
}

.wf-s .wf-res-div {
    height : 14px;
}

.wf-s .wf-res-div .path {
    display: none;
}

.wf-res-div a {
    vertical-align: middle;    
    height: auto;
    color: black;
}
.wf-res-div .path {
    margin-left : 10px;
    color:lightslategrey;
}

.wf-status-div, .wf-h-col1 {
    text-align: center;
}


.wf-svg:active {
   cursor: move;      
}
  
.axisRect {
    fill:white;
    cursor:default;            
}
.xAxis {
    user-select: none;
    -webkit-user-select: none;        
    cursor:default;                
}    

.wf-zoom-div {
    position : absolute;
    width: 28px;
    font-size: 20px;
    /*vertical-align:middle; */
    text-align: center;
    top:32px;
    margin-top: 16px;
    right : 0px;   
}

.wf-zoom-out {
    position: absolute;
    top : 0px;
    width: 24px;
    margin-top: 0px;
    left : 0px;
    background: gainsboro;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    user-select: none;
    -webkit-user-select: none;  
    cursor:default;  
    text-align : center;     
}
.wf-zoom-out:active {
    background: rgb(241, 239, 239);    
}


.wf-zoom-in {
    position: absolute;
    width: 24px;
    margin-top: 0px;
    bottom : 0px;
    background: gainsboro;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    user-select: none;
    -webkit-user-select: none;        
    cursor:default;     
    text-align : center;         
}
.wf-zoom-in:active {
    background: rgb(241, 239, 239);    
}


[wf-sorted] {
    background: gainsboro;
    fill:gainsboro;
}

[wf-unselectable] {
    user-select: none;
    -webkit-user-select: none;        
    cursor:default; 
}




.wf-entryRect {
    fill:navy;
    rx:1;
}
.wf-detailRect {
    fill:black;
}

[wf-contenttype="XHR"] {
    background:rgb(253, 102, 148);
    fill:rgb(253, 102, 148);
}

[wf-timetype="queue"] {
    background : rgb(202, 231, 250);
    fill: rgb(202, 231, 250);
    stroke: steelblue;
    stroke-width: 1px;
}

[wf-timetype="dns"] {
    background: rgb(246, 153, 193);
    fill:rgb(246, 153, 193);
}
[wf-timetype="connect"] {
    background:rgb(52, 194, 208);
    fill:rgb(52, 194, 208);
}
[wf-timetype="proxy"] {
    background:rgb(111, 218, 12);
    fill:rgb(111, 218, 12);
}
[wf-timetype="ssl"] {
    background:rgb(152, 113, 181);
    fill:rgb(152, 113, 181);
}
[wf-timetype="send"] {
    background:rgb(244, 179, 85);
    fill:rgb(244, 179, 85);
}
[wf-timetype="recieveHeaders"] {
    background:rgb(165, 146, 39);
    fill:rgb(165, 146, 39);
}


[wf-contenttype="Image"] {
    background:rgb(81, 25, 233);
    fill:rgb(81, 25, 233);
}

[wf-contenttype="Document"] {
    background:rgb(0, 255, 170);
    fill:rgb(0, 255, 170);
}

[wf-contenttype="Script"] {
    background:green;    
    fill:green;
}

[wf-contenttype="Stylesheet"] {
    background:yellow;
    fill:yellow;
}



[wf-contenttype="Other"] {
    background:navy;
    fill:navy;
}


.wf-tooltip {
    z-index: 9997;
    position: absolute;
    display: block;
    height: auto;
    width: auto;
	padding: 5px 10px 5px 10px;
    border-radius: 1px; 
    font-family: Arial;
    font-size: 12px;    
    border-color:black;
    border-width: 1px;   
    border-style: solid; 
}

.wf-text-tooltip {
    /* background-color: white; */
    /* color: black;     */
    color: white;
}

.wf-detail-tooltip {
    background-color: white;
	color: black;    
}

.wf-modal {
    display: none;
    z-index:9999;
}



.wf-legend-div-default {
    height : auto;
    width : 100%;
    margin-bottom: 4px;
}

.wf-legend-div-default div{
    line-height: 1.5;
    margin-bottom: 2px;
}


.wf-legend-div-wr1 {
    height : 100%;
    width : auto;
    right: 50%;
    position: relative;
    float: right;
    line-height: 1.5;        
}

.wf-legend-div-wr2 {
    height : 100%;
    width : auto;
    right: -50%;
    position: relative;
    float: right;
    margin-top: 6px;
    border-color: rgb(190, 189, 189);     
    border-style: solid;
    border-width: 1px;
    line-height: 1.5;        
}

.wf-legend-div {
    height : 100%;
    float: left; 
    margin-left: 4px;
    margin-right: 4px;
}

.wf-legend-label {
    float: left; 
    margin-left: 2px;
    margin-right: 5px;
    margin-top : -2px;
    font-family: Arial;
    font-size: 14px;
    padding-top: 6px;
}

@media (max-width: 500px) {
    .wf-legend-label {
        font-size: 9px;
        margin-top : -1px;
    }
    .wf-legend-div {
        margin-left: 1px;
        margin-right: 1px;
    }
}

.wf-legend-color {
    float: left; 
    width : 10px;
    height: 10px;
    margin-top: 9px;
    margin-left: 2px;
    border-color: rgb(190, 189, 189);     
    border-style: solid;
    border-width: 1px;
}


.wf-head-div {
    font-family: Arial;
    font-size: 12px;
    line-height: 1.5;
}

.wf-head-div td {
    padding-left: 10px;    
    padding-right: 10px;    
    padding-bottom: 6px;    
}

.wf-head-tested-by-label {
    font-weight: bold;
}


.wf-detailTT td {
    width : 60px;
    height: 16px;
}
@media (max-width: 500px) {
    .wf-detailTT td {
        font-size: 70%;
        width: 40px;
    }
}
.wf-detailTT tr {
    width: auto;
}

.wf-detailTT tr:first-child {
    border-bottom: rgb(179, 173, 173);
    border-width: 1px;    
    border-bottom-style: solid;    
}


.wf-detailTT td:nth-child(1) {
    width : 20px;
}

.wf-detailTT td:nth-child(2) {
    width : 120px;
}
@media (max-width: 500px) {
    .wf-detailTT td:nth-child(2) {
        width : 60px;
    }
}

.wf-detailTT tr td div {
    width : 10px;
    height : 50%;    
    position: relative;
}


.wf-detailTT-start {
    font-weight: bold;
}

.wf-detailTT-end {
    font-weight: bold;
    border-top: rgb(179, 173, 173);
    border-width: 1px;    
    border-top-style: solid;
}

.wf-filter-label-div {
    margin-right: 10px;
    font-family: Arial;
    font-size: 13px;    
    float : left;
    height : 100%;
    line-height: 24px;
}

.wf-sum-div {
    width:100%;
    padding-top: 14px;    
}


.wf-sum-label {
    width:100%;
    font-family: Arial;
    font-size: 14px;    
    text-align: center;
    padding-top: 20px;
    padding-bottom: 4px;
}


.wf-top-by-time-div table tbody td:nth-child(1) {
    vertical-align: middle;
    margin-left : 4px;
    margin-bottom: 4px;
    height : 34px;
}

.wf-sum-div table {
    table-layout: fixed;
    overflow: hidden;   
    text-overflow: ellipsis;
    width:100%;
    font-size: 12px;    
    line-height: 1.5;
    border-style: solid;
    border-left: solid;
    border-right: solid;
    border-width: 1px;
    border-color:rgb(190, 189, 189);     
}

.wf-sum-div thead {
    font-size: 12px;    
    border-style: solid;
    line-height: 1.5;   
    border-left: solid;
    border-right: solid;
    border-bottom: solid;
    border-width: 1px;
    border-color:rgb(190, 189, 189); 
}

.wf-sum-div table tr td  div {
    overflow: hidden;   
    text-overflow: ellipsis;
    margin-bottom: 4px;    
}

.wf-sum-div table tr td  {
    font-size: 100%;
    overflow: hidden;   
    text-overflow: ellipsis;
    cursor:default;     
    border-style: solid;
    border-right: solid;
    border-width: 1px;
    border-color:rgb(190, 189, 189); 
    line-height: 1.5;   
    padding-left: 4px; 
    padding-right: 4px;     
}

@media (max-width: 500px) {
    .wf-sum-div table tr td  {
        font-size: 80%;
    }
}
.wf-sum-div table a {
    vertical-align: middle;    
    height: auto;
    color: black;
    overflow: hidden;   
    text-overflow: ellipsis;

}
.wf-sum-div table .path {
    margin-left : 10px;
    color:lightslategrey;
    overflow: hidden;   
    text-overflow: ellipsis;
}

.wf-sum-div td[is-even='1']{
    background:rgb(240, 237, 237)    
}


.wf-totalfailed-div .wf-sum-table thead {
    background:rgb(253, 215, 209)
} 
.wf-totalfailed-div .wf-sum-table thead .wf-totalfailed-col-0{
    width: 66%;
} 
.wf-totalfailed-div .wf-sum-table thead .wf-totalfailed-col-1{
    text-align: center;
} 
.wf-totalfailed-div table tbody td:nth-child(1) {
    text-align: left;        
}
.wf-totalfailed-div table tbody td:nth-child(2) {
    text-align: center;        
}


.wf-top-by-time-col-0 {
    text-align: left;    
    width : 30%;
}
.wf-top-by-time-col-1 {
    text-align: center;    
    width : 10%;
}
.wf-top-by-time-col-2 {
    text-align: right;    
    width : 10%;
}
.wf-top-by-time-col-3 {
    text-align: right;    
    width : 10%;
}
.wf-top-by-time-col-4 {
    text-align: right;    
    width : 10%;
}
.wf-top-by-time-col-5 {
    text-align: right;    
    width : 10%;
}

.wf-top-by-time-div table tbody td:nth-child(1) {
    text-align: left;        
}
.wf-top-by-time-div table tbody td:nth-child(2) {
    text-align: center;        
}
.wf-top-by-time-div table tbody td:nth-child(3) {
    text-align: right;        
}
.wf-top-by-time-div table tbody td:nth-child(4) {
    text-align: right;        
}
.wf-top-by-time-div table tbody td:nth-child(5) {
    text-align: right;        
}
.wf-top-by-time-div table tbody td:nth-child(6) {
    text-align: right;        
}

.wf-sum-by-type-col-0, .wf-sum-by-domain-col-0{
    width : 30%;
}
.wf-sum-by-type-col-1, wf-sum-by-domain-col-1 {
    width : 10%;
    text-align: center;
}
.wf-sum-by-type-col-2, .wf-sum-by-domain-col-2 {
    width : 10%;
    text-align: center;    
}
.wf-sum-by-type-col-3, .wf-sum-by-domain-col-3 {
    width : 20%;
    text-align: center;
}
.wf-sum-by-type-col-4, .wf-sum-by-domain-col-4 {
    text-align: center;    
    width : 10%;
}
.wf-sum-by-type-col-5, .wf-sum-by-domain-col-5 {
    text-align: center;    
    width : 10%;
}
.wf-sum-by-type-col-6, .wf-sum-by-domain-col-6 {
    text-align: right;    
    width : 10%;
}

.wf-sum-by-type-div table tbody td:nth-child(1), .wf-sum-by-domain-div table tbody td:nth-child(1) {
    text-align: left;
}

.wf-sum-by-type-div table tbody td:nth-child(2), .wf-sum-by-domain-div table tbody td:nth-child(2)  {
    text-align: center;
}

.wf-sum-by-type-div table tbody td:nth-child(3), .wf-sum-by-domain-div table tbody td:nth-child(3)  {
    text-align: center;
}

.wf-sum-by-type-div table tbody td:nth-child(4), .wf-sum-by-domain-div table tbody td:nth-child(4)  {
    text-align: right;
}

.wf-sum-by-type-div table tbody td:nth-child(5), .wf-sum-by-domain-div table tbody td:nth-child(5)  {
    text-align: center;
}

.wf-sum-by-type-div table tbody td:nth-child(6), .wf-sum-by-domain-div table tbody td:nth-child(6)  {
    text-align: center;
}
.wf-sum-by-type-div table tbody td:nth-child(7), .wf-sum-by-domain-div table tbody td:nth-child(7)  {
    text-align: right;
}

.wf-sum-by-type-div table tbody td:nth-child(3)[is-failed='true'], .wf-sum-by-domain-div table tbody td:nth-child(3)[is-failed='true']  {
    background:rgb(253, 215, 209)
}




.wf-total-div {
    width:100%;
    padding-top: 8px;
    padding-bottom: 8px;
}

.wf-total-div table {
    width:100%;
    font-size: 10px;    
    border-style: solid;
    line-height: 1.5;   
    border-left: solid;
    border-right: solid;
    border-width: 1px;
    border-color:rgb(190, 189, 189);     
    text-overflow: ellipsis;
    overflow: hidden;           
}

.wf-total-div table tr td  {
    line-height: 1.5;   
    padding-left: 4px; 
    padding-right: 4px;     
}

.wf-total-div table.large td:nth-child(odd) {
    width : 15%;
    background:rgb(240, 237, 237);    
    font-size: 11px;            
}
.wf-total-div table.large td:nth-child(even) {
    text-align: center;
    font-size: 13px;            
}

.wf-total-div  table.small td:nth-child(1) {
    width: 70%;
}
.wf-total-div table.small tr:nth-child(odd) {
    background:rgb(240, 237, 237);    
}

.wf-relative-speed-div {
    width:100%;
    height: auto;
    line-height: 1.5;
    text-align: center;
    font-family: Arial;
    font-size: 16px;
    padding-bottom: 8px;
}

.wf-relative-speed-div svg {
    overflow: visible;
}

.wf-relative-speed-div-scale {
    height : 30px;
}

.wf-relative-speed-rect {
    fill: url(#wf-relative-speed);  
}

.wf-relative-speed-div .wf-relative-speed-div-label-1 {
    height : 100%;
    width : 100%;
    display : block;
    overflow: hidden;
    text-align: ;
}

.wf-relative-speed-div .wf-relative-speed-div-label-2 {
    position : relative;
    left : 35%;		
    display: block;		
    height : auto;
    float: left;
}

.wf-relative-speed-div .wf-relative-speed-div-label-3 {
    position : relative;
    min-width: 150px;
    max-width: 800px;    
    height : 100%;
    margin-top: 2px;
    display: inline-block;    
    border-top-color : black;
    border-top-style : solid;
    border-top-width: 2px;
    border-radius: 8px;
    padding: 4px;
}

.wf-relative-speed-div-label-3 span {
    color:blue;
}

.wf-relative-speed-div-label-3 {
    font-size: 14px;
}
@media (max-width: 500px) {
    .wf-relative-speed-div-label-3 {
        font-size: 10px;
    }    
}


#wf-relative-speed .stop-left {
    stop-color: rgb(250, 8, 8);    
}

#wf-relative-speed .stop-center {
    stop-color: yellow;
}

#wf-relative-speed .stop-right {
    stop-color: rgb(6, 175, 6);
}

.wf-relative-site-speed-div[speed="green"] {
    background: rgb(149, 240, 149);
}
.wf-relative-site-speed-div[speed="red"] {
    background: rgb(252, 186, 175);
}
.wf-relative-site-speed-div[speed="yellow"] {
    background: rgb(247, 247, 126);
}



.wf-pageloaded-line {
    stroke: rgb(0, 255, 170);
    stroke-width: 3;    
}


.wf-pageloaded-xhr-line{
    stroke:rgb(253, 102, 148);
    stroke-width: 3;        
}

.wf-head-div .smallButton {
    cursor: pointer;
}

#result #sharingPreview {
    width: 100%;
}
#result #sharingText {
    background-color: white;
    border-color:#A5C8F2;
    color: black;
    resize: none;
    border-width: 1px;
    padding-bottom: 2px;
    padding-top: 2px;
    height: 16px;
    float: left;
}
#result #sharingText, #copiedText {
    width: 30%;    
}

#result #copiedText {
    display: none;
    position: absolute;
    z-index:15;
    /*font-weight:bold;*/
    color:#484;
    border: 1px solid black;
    background:white;
    padding-top: 2px;
    height: 16px;
    vertical-align:middle;
    text-align:center;
    float: left;
}

#result #copyButton {
    float: left;
}

#result .socialButtonsGroup {
    float: left;
    margin-left: 12px;
    margin-top: 1px;
}

/* screenshots */
.wf-ss-root-div {
    overflow: hidden;
    display:inline-block;
    padding-bottom: 4px;
    padding-top: 4px;
}

.wf-ss-div {
    text-align: center;
    width: auto;
    display: inline-block;
    position: relative;
    left: 50%;
}

.wf-ss-img-div {
    min-width: 120px;
    max-width: 10%;
    display: inline-block;
    border-bottom-color: #A5C8F2;
    border-width: 1px;
    padding: 4px;
    margin: 4px;
    border-style: solid;
    left:-50%;
    position: relative;
}

.wf-ss-img {
    width: 100%;
}

.wf-ss-caption {
    text-align: center;
    font-family: Arial;
    font-size: 12px;
}

/* performance counter */

.wf-perfc-root-div {
    overflow: hidden;
    padding-bottom: 4px;
    padding-top: 4px;
    /* text-align: center; */
}

.wf-perfc-div {
    width: auto;
    display: inline-block;
    text-align: center;
}

.wf-perfc-cpu-div {
    width: 300px; 
    height: 200px;
    display: inline-block;
    border-bottom-color: #A5C8F2;
    border-width: 1px;
    padding: 4px;
    margin: 4px;
    border-style: solid;
    position: relative;
}

.wf-perfc-cpu-h {
    height : 10%;
    text-align: center;
    font-family: Arial;
    font-size: 12px;
}

.wf-perfc-cpu-data {
    height: 90%;    
}

#wf-perfc-cpu-gradient .stop-top {
    stop-color: rgb(250, 8, 8);    
}

#wf-perfc-cpu-gradient .stop-bottom {
    stop-color: rgb(6, 175, 6);
}

.wf-perfc-gridline {
    stroke: gray;
    stroke-width: 0.5;
}

.wf-perfc-cpu-area {
    fill: url(#wf-perfc-cpu-gradient);   
}

/* memory usage */ 

.wf-perfc-mem-div {
    width: 300px; 
    height: 200px;
    display: inline-block;
    border-bottom-color: #A5C8F2;
    border-width: 1px;
    padding: 4px;
    margin: 4px;
    border-style: solid;
    position: relative;
}

.wf-perfc-mem-h {
    height : 10%; 
    text-align: center;
    font-family: Arial;
    font-size: 12px;
}

.wf-perfc-mem-data {
    height: 90%;    
}

#wf-perfc-mem-gradient .stop-top {
    stop-color: rgb(8, 12, 250);    
}

#wf-perfc-mem-gradient .stop-bottom {
    stop-color: rgb(151, 185, 224);
}

.wf-perfc-mem-area {
    fill: url(#wf-perfc-mem-gradient);   
}

/* screenshots animation block */

.wf-imgchart-div {
    width: 300px; 
    height: 200px;
    display: inline-block;
    border-bottom-color: #A5C8F2;
    border-width: 1px;
    padding: 4px;
    margin: 4px;
    border-style: solid;
    position: relative;
}

.wf-imgchart-h {
    height : 10%;
    text-align: center;
    font-family: Arial;
    font-size: 12px;
    float: none;
}

.wf-imgchart-h-c {
    width : 100%;
    text-align: center;
}
.wf-imgchart-h button {
    position: absolute;
    top: -9px;
    right: -1px;
    margin : 0px;
}

.wf-imgchart-data {
    height: 70%;   
    text-align: center; 
    cursor: pointer;
}

.wf-regular-img {
    width: 99%;
    height: 89%;
}

.wf-imgchart-inner-data {
    width: 100%;  
    display: block;
    text-align: center;
    position: absolute;
    max-height: 100%;
}

.wf-imgchart-axis {
    height: 20%;    
}

.wf-imgchart-img {
    position: relative;
    max-width: 90%;
    max-height: 150px;
}

.wf-imgchart-axis .wf-ss-line {
    stroke-width: 5px;
    stroke: black;
}

.wf-imgchart-axis .wf-ss-line[current="1"] {
    stroke-width: 5px;
    stroke: red;
}


.wf-imgchart-playbtn {
    cursor: pointer;
}

.wf-imgchart-playbtn-stop {
    stroke-width: 3px;
    stroke: black; 
}

.wf-imgchart-playbtn-play {
    fill:black;
}


/* text messages (error, warning, log, debug... */


.wf-text-messages-container {
    max-height: 200px;
    overflow-y: scroll;
}

.wf-text-messages-div table {
    table-layout: fixed;
    width: 100%;
    border-color: rgb(190, 189, 189);     
    border-style: solid;
    border-width: 1px;
}
.wf-text-messages-div table thead tr{
    font-size: 12px;
    border-color: rgb(190, 189, 189);     
    border-style: solid;
    border-width: 1px;
    height: 14px;
}
.wf-text-messages-div table thead tr td{
    border-color: rgb(190, 189, 189);     
    border-style: solid;
    border-width: 1px;
    padding: 3px;
    line-height: 1.5;
}
.wf-text-messages-div table tbody tr td {
    font-size: 12px;
    padding: 3px;
}
.wf-text-messages-div table tr td div {
    overflow: initial;
    margin-top: 3px;
    margin-bottom: 3px;
}

.wf-text-messages-div table td:nth-child(1) {
    text-align:center;
    width: 10%;        
}
.wf-text-messages-div table td:nth-child(2) {
    text-align: center;
    width: 15%;        
}
.wf-text-messages-div table td:nth-child(3) {
    text-align: left;
    width: 75%;        
}


.wf-text-messages-div table td:nth-child(1) div {
    text-align:center;
}
.wf-text-messages-div table  tbody td:nth-child(2) div {
    text-align: center;
}
.wf-text-messages-div table  tbody td:nth-child(3) div {
    text-align: left;
    text-overflow: unset;
    height: auto;
    white-space: normal;
}

.wf-text-messages-div table tbody tr td {
    color: black;
    border-style: solid;
    border-bottom-color: rgb(190, 189, 189);
    border-bottom-width: 1px;
    height: 14px;
}
.wf-text-messages-div table tbody tr td[type="console-log"]{
    color: rgb(92, 94, 92);
}
.wf-text-messages-div table tbody tr td[type="console-info"]{
    color: rgb(20, 114, 20);
}
.wf-text-messages-div table tbody tr td[type="error"]{
    color: red;
}



/*
    carousel styles from bootstrap
*/


.carousel-control-prev {
    background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
    background-repeat: repeat-x;
}

.carousel-control-next {
    right: 0;
    left: auto;
    background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
    background-repeat: repeat-x;
}


a.htContentToolTip {
    margin-left: 6px;
}



.ssToolTip {
    z-index: 9999;
    position: absolute;
    height: auto;
	padding: 5px 10px 5px 10px;
    border-radius: 4px; 
    font-family: Arial;
    font-size: 12px;
    border-color:black;
    border-width: 1px;   
    border-style: solid; 
    background: white;
    max-width:50%;
}

.ssToolTip.ssStayOnTop{
    z-index: 9998;
}

.ssToolTip .ss-head {
    text-align:center;
    font-size:larger;
    margin-bottom:8px;
}

.ssToolTip .closeButton {
    text-align:right;
    display:block;
    cursor: pointer;
    position: absolute;
    right: 6px;
}





@media (max-width: 500px) {
    .wf-zoom-div{
        width: 20px;
        font-size: 10px;
    }
    .wf-zoom-in, .wf-zoom-out{
        width: 18px;
    }
    g.tick{
        font-size: 80%;
    }
}
#map .country {
    stroke:  #555;
    stroke-width: .5;
    fill: #FEFEFE;
}

#map .agentPoint {
    stroke:black;
    stroke-width:1.5;
    fill:black;
}

#map .mark {
    font-size:1em;
    font-family:FontAwesome;
    fill:#82ff7e;
    stroke:black;
    stroke-width:1;
    text-anchor:middle;
}

#map .mark:hover {
    cursor: pointer;
}

#map .agentHeadText {
    font-size:.7em;
    font-weight:bold;
    text-anchor:middle;
}

#map .agentHeadText.agentInProgress {
    font-family:FontAwesome;
    fill: black;
    stroke:black;
    stroke-width:.5;
}

#map .gridX, #map .gridY {
    stroke:black;
    stroke-width:.5;
    stroke-dasharray: 2, 2;
    fill:black;    
}

#map path.tip {
    stroke: black;
    fill: #fff;
    stroke-width: 2;
}

#map text.tip {
    font-size:.8em;
}

#map text.tip a {
    fill: gray;
}

#map .agentOk {
    font-weight:bold;
    fill: green;
}

#map .agentFail {
    font-weight:bold;
    fill: #fd3553;
}

#map .agentValue {
    fill: black;
    font-weight:normal;
}

#map .agentWarn {
    font-weight:bold;
    fill: #ff9c00;
}

#map .agentToTarget {
    stroke: #e3e3e3;
    stroke-opacity: .3;
}

#map .agentToTargetImpulse{
    stroke: black;
}

#map .agentToTargetImpulse.ok{
    stroke: #1fa31f;
}

#map .agentToTargetImpulse.warn{
    stroke: #ff9c00;
}

#map .agentToTargetImpulse.fail{
    stroke: #fd3553;
}

#map .targetMark{
    font-size:1.5em;
    font-family:FontAwesome;
    fill:#ca42e2;
    stroke:black;
    stroke-width:.5;
    text-anchor:middle;
    cursor:pointer
}

#map .targetMark.selectedByTarget {
    stroke-width:2;
}

#map .mark.selectedByTarget {
    stroke-width:2;
}

#map .agentToTarget.selectedByTarget {
    stroke: #8a8989;
    stroke-opacity: .7;
}

/* @media (min-width: 768px) {
    #map {
        width: 70%;
    }
} */