/**
* General
*/
    :root { 
        --header-height: 60px;
        --border-color: #e0e0e5;
    }
    html, body {
        background: #fefefe;
        min-height: 100%;
        height: 100%;
        -webkit-font-smoothing : antialiased;
        color: rgb(87, 88, 93);
        -moz-osx-font-smoothing : grayscale;
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
    }
    body {
    font-size: 14px;
    }
    .container { max-width: 1440px; }
    .container--narrow { max-width: 650px; }
    .container--medium { max-width: 990px; }
    .strong { font-weight: bold; }
    .small { font-size: 0.85em; }
    
    .op-25 { opacity: 0.25; }
    .op-50 { opacity: 0.5; }
    .op-75 { opacity: 0.75; }
    .box-shadow { box-shadow: 4px 4px 10px rgba(0,0,0, 0.2) }

    .label-as-badge { border-radius: 1em; }

    .nodata {font-size: 20px;line-height: 1.5;text-align:center;padding: 60px 10px;font-style: italic;color:black;border: #aaa 2px dashed;opacity: 0.4;}

    
    h1, h2, h3, h4, h5 { color:rgb(20, 20, 23); font-weight: 600; }

    .my-drop-zone { border: dotted 3px lightgray; background: #f5f5f5; padding: 0 20px; height:300px; line-height: 300px }
    .nv-file-over { border: dotted 3px green; }

    .gray-label { color:#777; }
    .bg-brand {background-color: #58F5FF;}

    tr[href]{cursor:pointer;}

    dd { 
        display: block;
        min-height: 38px;
        border-bottom: #D8D8D8 1px solid;
        padding: 5px 0;
        font-size: 22px;
        font-weight: lighter;
        word-break: break-word;
    }
    dd:empty:after {
        content: 'vacío'; color: #bbb; font-style: italic;
    }
    dt { font-weight: bold; font-size: 85%; margin-bottom: 5px; }

    .audit-diff-view ins { background-color: #eaffea; text-decoration: none; }
    .audit-diff-view del { background-color: #ffecec; }

    .filter-form { border-left: none; border-right: none; background: #f0f0f0; padding: 0 10px 0 10px; max-height: 0px;  -webkit-box-sizing: border-box; overflow: hidden;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }
    .filter-form.expanded { padding: 10px; max-height: 500px; overflow: visible; }

    .popover { max-width: 500px; }

    .message.success { color: green; }
    .message.error { color:red; }
    hr {border-top: var(--border-color) 1px solid;opacity: 1;}


/**
* Custom columns
*/
	.col-sm-20p { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; width: 20%; float:left; }

/** Main */
    .main {/* border: green 1px solid; */display: flex;flex-direction: row;/* flex-wrap: wrap; */min-height: calc(100% - var(--header-height));}
    .main__nav { width: 100%; border: blue 1px solid; }
    .main__sidebar {flex: 0 0 250px;width: 250px;position: relative;border-right: var(--border-color) 1px solid;transition: width .2s ease, flex .2s ease;}
    .main__sidebar.sidebar--collapsed {flex: 0 0 56px;width: 56px;}
    .main__content {padding: 15px;flex: 1 1;position:relative;max-width: 100%;overflow: auto;max-height: calc(100vh - var(--header-height));}

    @media screen and (max-width: 1500px) {
        .main__content { padding: 15px; }
    }

    @media screen and (max-width: 991px) {
        .main__sidebar { display: none; }
    }

/** Sidebar */
    .sidebar {--sidebar-padding: 15px; }
    .sidebar--blurred {filter: blur(4px);pointer-events: none;}
    .sidebar {font-size: 14px;padding: var(--sidebar-padding);display: flex;flex-direction: column;justify-content: space-between;height: 100%;overflow: hidden;}
    .sidebar hr {border-top: var(--border-color) 1px solid;opacity: 1;}
    .sidebar__top {}
    .sidebar__footer {margin-top: auto;}
    .main__sidebar.sidebar--collapsed .sidebar { padding-left: 0; padding-right: 0; }
    .main__sidebar.sidebar--collapsed .sidebar__footer,
    .main__sidebar.sidebar--collapsed .menu__title,
    .main__sidebar.sidebar--collapsed hr { visibility: hidden; height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; }
    .main__sidebar.sidebar--collapsed ul.menu li { margin-bottom: 2px; }
    .main__sidebar.sidebar--collapsed .menu__link { font-size: 0; padding: 10px; text-align: center; }
    .main__sidebar.sidebar--collapsed .menu__link :is(.fa-regular, .fa-brands, .fa-solid, .far, .fas) { margin-right: 0; font-size: 18px; }
    .sidebar__toggle { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-color); background: #fefefe; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: transform .2s; }
    .sidebar__toggle:hover { background: #f5f5f5; }
    .main__sidebar.sidebar--collapsed .sidebar__toggle i { transform: rotate(180deg); }

/** Menu */
    ul.menu {list-style-type: none;padding: 0;}
    ul.menu li {margin-bottom: 5px;}
    ul.menu li a {text-decoration: none;display: block;padding: 7px;border-radius: 5px;/* color: inherit; */transition: all 0.5s;}
    .menu__title {font-weight: bold;padding: 0 0 5px 0;padding-left: 0;color: #050505 !important;}
    .menu__link {color: inherit;}
    .menu__link.active {color: rgb(5, 5, 5);font-weight: bold;background: #F7F7F7;}
    .menu__link:hover {color: #050505;background: var(--border-color);}
    .menu__link :is(.fa-regular, .fa-brands, .fa-solid, .far, .fas) {margin-right: 5px;}


/** Main nav */
    .mainnav {/* background: #555555; *//* color: white; *//* --bs-navbar-color: white; */height: var(--header-height);border-bottom: var(--border-color) 1px solid;}
    .mainnav:before {content:'';/* position: absolute; *//* top: 0; *//* left: 0; *//* width: 100%; *//* height:3px; *//* background: #58F5FF; */}

    .navbar [dropdown]:hover .dropdown-menu {
        display: block;
        margin-top: 0; 
    }
    .navbar-toggler {border: 0 none;color: rgb(37, 35, 48);margin-right: -8px;transform: scaleY(0.8);}
    

/** Gravatar */
    .gravatar {width: 25px;height: 25px;vertical-align: middle;border-radius: 50%;display: inline-block;}

/**
* Modifiers
*/
    .modifiers { font-size: 10px; }
    .modifiers__item {cursor: pointer;user-select: none;}

/**
* Schedule
*/
    .schedule { display: flex; justify-content: space-between; }
    .schedule__day {flex: 1; margin-right: -1px;}
    .schedule__cell.is-title { font-weight: bold; text-align: center; padding-bottom: 10px; font-size: 15px; }
    .schedule__cell:not(.is-title) { border: 1px solid #000; font-size: 13px; text-align: center; padding: 5px 10px; margin-top: -1px; cursor: pointer; background: #e7e7e7; }
    .schedule__day:nth-child(even) .schedule__cell:not(.is-title) { background: #ffffff; }
    .schedule__cell.is-selected { background: #99cca5 !important; }

/**
* Availability
*/

    .availability-graphic {width: 100%;}
    .availability-graphic__period { stroke: transparent;}
    .availability-graphic__period:hover {stroke: #000000;}

    .availability-legend { width: 100%; display: flex; align-items: center; margin-top: 10px; }
    .availability-legend__from,
    .availability-legend__to,
    .availability-legend__percentage {flex: 0 0 auto; font-size: 14px;}
    .availability-legend__from {margin-right: 15px;}
    .availability-legend__percentage {margin: 0 15px;}
    .availability-legend__space {flex: 1; background: #ccc; height: 1px;}
    .availability-legend__to {margin-left: 15px;}


/** Uptime */
    .uptime {display: flex;/* height: 40px; */width: 100%;height: 70px;}
    .uptime--small {height: 30px;}
    .uptime__tick {margin: 0 1px;border-radius: 2px;height: 100%;/* width: 6px; */flex: 1;/* padding-bottom: 50%; */}
    .uptime__tick--allgood {background: #36B37E;}
    .uptime__tick--nodata {background: #bbb;}
    .uptime__tick--warning {background: orange;}
    .uptime__tick--error { background: red; }

/** Table */
    .table {  }
    .table>:not(caption)>*>th {/* font-weight: normal; */}
    .table>:not(caption)>*>th a {}
    .table .table-link {color:inherit;text-decoration:none !important; display:block;}
    .table-secondary-subtle { 
            --bs-table-color: #000;
            --bs-table-bg: rgb(247, 247, 247);
            --bs-table-border-color: #cbccce;
            --bs-table-striped-bg: #d7d8da;
            --bs-table-striped-color: #000;
            --bs-table-active-bg: #cbccce;
            --bs-table-active-color: #000;
            --bs-table-hover-bg: #d1d2d4;
            --bs-table-hover-color: #000;
            color: var(--bs-table-color);
            border-color: var(--bs-table-border-color);
     }

/* NTable */
    .ntable { width: 100%; color: rgb(20, 20, 23); }
    .ntable > * > tr {}
    .ntable > * > * > :is(td,th) {padding: 5px 10px;border: rgb(224, 224, 229) 1px solid;/* color: rgb(20, 20, 23); */}
    .ntable > * > * > td{ }
    .ntable > * > * > th{background: rgb(247, 247, 247);text-transform: uppercase;font-size: 0.775em;}
    .ntable > * > tr:hover { background: rgb(247, 247, 247); }

    .ntable > * > * > th a {text-decoration: none;color: inherit;}
    .ntable p { }

    .ntable--sticky {position: relative;/* height: 300px; */overflow: auto;/* max-height: 100%; *//* max-height: 300px; */}
    .ntable--sticky table {}
    .ntable--sticky thead { position: sticky; top: 0; z-index: 5; }

/* Is loading */
    .is-loading { --loading-background-color: rgba(255,255,255,0.2); } 
    .is-loading:after { content:''; display:block; width:100%; height:100%;background: var(--loading-background-color) url('../img/loading.gif') no-repeat center center;position: absolute; top:0;left:0;z-index: 10;backdrop-filter: blur(3px); } 

/* SVG circle */
    svg-circle { --color-stroke: green ;position: relative;display: inline-block;width: 100px;height: 100px;vertical-align: middle;}
    svg-circle span { position: absolute; top: 50%; left: 50%;transform: translate(-50%,-50%);font-size: 1.5em;font-weight: bold;color: var(--color-text);}
    svg-circle svg {transform: rotate(-90deg);width: 100%;height: 100%;}
    svg-circle svg circle {stroke: var(--color-stroke);stroke-width: 10%;}

    svg-circle.fail { --color-text: #c00; --color-stroke: #f33;  }
    svg-circle.pass {  --color-text: #080; --color-stroke: #0c6; }
    svg-circle.average { --color-text: #C33300; --color-stroke: #fa3;  }

    svg-circle.svg-circle--small { width: 30px; height: 30px; }
    svg-circle.svg-circle--small span { font-size: 10px; }
    
/* No results */
    .noresults {border: #ccc 1px dashed;padding: 20px;text-align: center;}
    .noresults__image {max-width: 300px;} 
    .noresults__title {font-size: 28px;font-weight: bold;}

/* Buttons */
    .btn { font-weight: 500; }
    .btn-group-xs>.btn, .btn-xs {
        --bs-btn-padding-y: 0.20rem;
        --bs-btn-padding-x: 0.45rem;
        --bs-btn-font-size: 0.775rem;
        --bs-btn-border-radius: 0.25rem;
    }
    .btn-primary { 
        --bs-btn-bg: #1f5b91;
        --bs-btn-border-color: #1f5b91;
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: #0b5ed7;
        --bs-btn-hover-border-color: #0a58ca;
        --bs-btn-focus-shadow-rgb: 49,132,253;
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: #0a58ca;
        --bs-btn-active-border-color: #0a53be;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-bg: #1f5b91;
        --bs-btn-disabled-border-color: #1f5b91;
    }
    .btn-light { 
        --bs-btn-bg: #efefef;
    }

/* Forms */
    input.form-control.has-search-icon {padding-left: 32px;background: url(../img/icon-magnifying-glass.svg) no-repeat left 10px center;/* background-blend-mode: unset; */}
    .form-group label {font-weight:600;margin-bottom: 5px;}
    .error-message { color:red; }

/* Card */
    .card {border-color: var(--border-color);}
    .card-body {}
    .card-divider { 
        margin-left: calc(var(--bs-card-spacer-x) * -1); 
        margin-right: calc(var(--bs-card-spacer-x) * -1); 
    }

/* Pagination */
    .pagination { 
        --bs-pagination-active-bg: #1f5b91; 
        --bs-pagination-color: #1f5b91;
        --bs-pagination-font-size: 0.775rem;
        --bs-pagination-border-radius: 0;
        --bs-pagination-border-color: rgb(224, 224, 229);
        --bs-pagination-active-border-color: #1f5b91;
        --bs-pagination-color: rgb(87, 88, 93);
        --bs-pagination-hover-color: rgb(87, 88, 93);
        --bs-pagination-focus-color: rgb(87, 88, 93);
    }

/* Highlight */
    .highlight,
    .highlight > td { background: #ffffcc; padding: 5px; border-radius: 5px; transition: background 2s; }

/* Offcanvas */
    .offcanvas { --bs-offcanvas-width: 600px; }
    .offcanvas-backdrop {}
    .offcanvas-header {box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);}

/* Range bubble */
    range-bubble {position: relative;padding: 0 10%;display: block;padding-bottom: 20px;}
    range-bubble input {  }
    range-bubble output {background: #1f5b91;color: white;padding: 2px 5px;position: absolute;border-radius: 4px;left: 50%;transform: translateX(-50%);white-space: nowrap;bottom: 0;}
    range-bubble output::after {content: '';position: absolute;width: 2px;height: 2px;background: #1f5b91;top: -1px;left: 50%;}

/* Dropdown */
    .dropdown {}
    .dropdown-menu { z-index: 4; }

/* Intl tel input */
    .iti {width: 100%;}
    .iti__flag-container {  }
    .iti input, .iti input[type=text], .iti input[type=tel] {width: 100%;display: block;border: var(--bs-border-width) solid var(--bs-border-color);padding: .375rem .75rem;border-radius: var(--bs-border-radius);}

/* Element selector */
    element-selector {display: inline-block;/* padding: 2px 6px; */position: relative;}
    .element-selector__popup {color: white;padding: 4px 8px;font-size: 13px;border-radius: 4px;display: none;min-width: 270px;z-index: 20;}
    .element-selector__popup[data-show] { display: block; }
    element-selector .nav-link {padding: 0px 0;}
    element-selector[readonly] { pointer-events: none; }

/* e2e-steps */
    .steps { font-size: 0.8em; }
    .steps__container { position: relative;}
    

/* Step */
    .step {padding: 5px 10px;border: var(--border-color) 1px solid;border-radius: 5px;display: flex;position: relative;margin-bottom: 6px;/* position: relative; */}
    .step--success { outline: #00a86b 1px solid; background-color: #e6fff2; }
    .step--error { outline: #ff0000 1px solid; background-color: #ffeeee; }
    .step--disabled .step__content { opacity: 0.5; }
    .step__input {border: 0 none;padding: 2px 5px;font-size: 10px;font-weight: bold;border-radius: 7px;}
    .step__input[readonly] { pointer-events: none; }
    .step__move {color: inherit;opacity: 0.50;margin-right: 0.5em;}
    .step__content { }
    .step__actions { margin-left: auto;}
    
    .step:after {content:'';display: block;width: 1px;background: var(--border-color);height: 7px;margin-left: 50%;position: absolute;top: 100%;}
    .step:last-child {}
    .step:last-child:after {display:none;}

/* Fixed pane */
    /* .fixedpane {position: relative;max-height: calc(100vh - var(--header-height)); }
    .fixedpane__header {position: sticky; top: 0; z-index:5; background-color: white;}
    .fixedpane__body {  } */

/* websocket-canvas */
    websocket-canvas { position:relative;z-index:0; display: block; border: 1px solid #ccc; max-width: 100%; margin: 0 auto; border-radius: 8px; overflow: hidden; font-family: Arial, sans-serif; }
    .browser { display: flex; flex-direction: column; max-width: 100%; }
    .browser__bar { background-color: #f1f3f4; padding: 8px; display: flex; align-items: center; }
    .browser__url-bar { flex-grow: 1; background-color: white; border: 1px solid #ccc; border-radius: 20px; padding: 6px 12px; margin: 0 8px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
    .browser__url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: none; background: none; outline: none; width: 100%; font-size: 14px; font-family: Arial, sans-serif; }
    .browser__status {font-size: 12px;font-weight: bold;padding: 2px 6px;border-radius: 10px;margin-left: 8px;cursor: pointer;white-space: nowrap;}
    .browser__status--recording { background-color: #ff4136; color: white; }
    .browser__status--paused { background-color: #ffdc00; color: black; }
    .browser__status--playing { background-color: #2ecc40; color: white; }
    .browser__canvas { max-width: 100%; flex-grow: 1; display: block; }


/* SL Drawer */
    sl-drawer { --size: min(90vw, 700px);/* z-index: 5; */}
    sl-drawer::part(header) {padding: 10px 0;margin-bottom: 5px;}
    sl-drawer::part(body) { padding-top: 0; }
    sl-drawer::part(title) {padding-bottom: 0;padding-top: 0;}

/* sl-dropdown */
    sl-dropdown:not(:defined) { display:none }
    sl-menu-item {/* position: relative; */}