/* Reset CSS*/
article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section{display:block}a,hr{padding:0}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}ins,mark{background-color:#ff9;color:#000}body{line-height:1}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;font-size:100%;vertical-align:baseline;background:0 0}ins{text-decoration:none}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/Poppins-Light.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/Poppins-SemiBold.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/Poppins-Bold.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Ubuntu Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/UbuntuMono-Regular.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Ubuntu Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/UbuntuMono-Bold.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* General */
:root {
    --blue: #00ADB5;
    --lblue: #00c5ce;
    --green: #00F900;
    --red: #FF2600;
    --gray1: #F0F0F1;
    --gray2: #D3D3D6;
    --gray3: #A6A7AE;
    --gray4: #7A7B85;
    --gray5: #4D4F5C;
    --black: #020E14;

}

::selection {
    color: #fff;
    background: #00ADB5;
}

*:focus, *:active {
    outline: none;
}

::-webkit-scrollbar-track
{
    -webkit-box-shadow: none;
    /*background-color: #F5F5F5;*/
    border: 0;
    cursor: pointer;
    /*border-left: 1px solid var(--gray1);*/
}

::-webkit-scrollbar
{
    width: 7px;
    height: 7px;
    background-color: rgba(166, 167, 174, .10);
    cursor: pointer;
    /*border-left: 1px solid var(--gray1);*/
}

::-webkit-scrollbar-thumb
{
    background-color: #00ADB5;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

body, html {
    font-family: "Nunito", "Helvetica", "Arial", sans-serif;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--gray5);
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: subpixel-antialiased;
    font-smoothing: subpixel-antialiased;
}

body.noscroll, html.noscroll {
    overflow: hidden;
}

main {
    overflow: hidden;
}

* {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

.btn {
    background: var(--blue);
    color: #fff;
    border-radius: 6px;
    padding: 10px 20px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: .8rem;
    display: inline-block;
    /* min-width: 200px; */
    text-align: center;
    cursor: pointer;
}

.btn[disabled], label[disabled], a[disabled], a[disabled]:hover {
    filter: grayscale(1);
    cursor: not-allowed;
}

a[disabled] {
    opacity: .5;
}

a {
    color: var(--blue);
    text-decoration: none;
}

a.noColor, a.noColor:hover {
    color: inherit;
}

a:hover {
    color: var(--lblue);
    cursor: pointer;
}

tr.base td:not(.phase) a.noColor, tr.base td:not(.phase) a.noColor:hover, .extensionsList .hasTooltip span span {
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

tr.base td:not(.phase) a.noColor, tr.base td:not(.phase) a.noColor:hover {
    line-height: 43px;
    height: 40px;
    padding: 0 20px;
}

.extensionsList .hasTooltip span.name span {
    width: calc(100% - 40px);
}

tr.base td.hasTooltip:not(.phase) > span a.noColor {
    padding-left: 0;
    padding-right: 5px;
}

td.actions a, a.paramDoc {
    position: relative;
    display: inline-block;
    top: 6px;
    height: 14px;
    width: 14px;
}

.paramUl a.paramDoc {
    top: 1px;
    left: 6px;
}

a.newTab {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PGcgZmlsbD0iIzM2QThGRiI+PHBhdGggZD0iTS4zMDEgMTQuN2MtLjItLjItLjMtLjQtLjMtLjdWMy4yYzAtLjYuNS0xIDEtMWg1LjRjLjYgMCAxIC41IDEgMXMtLjUgMS0xIDFoLTQuNFYxM2g4LjhWOC42YzAtLjYuNS0xIDEtMXMxIC41IDEgMVYxNGMwIC42LS41IDEtMSAxaC0xMC44Yy0uMyAwLS41LS4xLS43LS4zeiIvPjxwYXRoIGQ9Ik0xNS4wMDEgNi40VjFjMC0uNi0uNS0xLTEtMWgtNS40Yy0uNiAwLTEgLjQtMSAxcy40IDEgMSAxaDIuOWwtNS4xIDUuMWMtLjQuNC0uNCAxIDAgMS40LjQuNCAxIC40IDEuNCAwbDUuMi01djIuOWMwIC42LjQgMSAxIDEgLjUuMSAxLS40IDEtMXoiLz48L2c+PC9zdmc+)  no-repeat !important;
}

a.newTab:hover {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PGcgZmlsbD0iIzVhZDJmZiI+PHBhdGggZD0iTS4zMDEgMTQuN2MtLjItLjItLjMtLjQtLjMtLjdWMy4yYzAtLjYuNS0xIDEtMWg1LjRjLjYgMCAxIC41IDEgMXMtLjUgMS0xIDFoLTQuNFYxM2g4LjhWOC42YzAtLjYuNS0xIDEtMXMxIC41IDEgMVYxNGMwIC42LS41IDEtMSAxaC0xMC44Yy0uMyAwLS41LS4xLS43LS4zeiIvPjxwYXRoIGQ9Ik0xNS4wMDEgNi40VjFjMC0uNi0uNS0xLTEtMWgtNS40Yy0uNiAwLTEgLjQtMSAxcy40IDEgMSAxaDIuOWwtNS4xIDUuMWMtLjQuNC0uNCAxIDAgMS40LjQuNCAxIC40IDEuNCAwbDUuMi01djIuOWMwIC42LjQgMSAxIDEgLjUuMSAxLS40IDEtMXoiLz48L2c+PC9zdmc+)  no-repeat !important;
}

a.editCRD {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PHBhdGggZmlsbD0iIzM2QThGRiIgZD0iTTAgMTIuMnYyLjRjMCAuMi4yLjQuNC40aDIuNGMuMiAwIC40LS4xLjUtLjJsOC42LTguNmMuMS0uMS4xLS40IDAtLjVMOS40IDMuMWMtLjItLjItLjQtLjItLjYgMEwuMiAxMS43Yy0uMS4xLS4yLjMtLjIuNXptMTQuOC04LjhjLjMtLjMuMy0uOCAwLTEuMmwtMi0yYy0uMy0uMy0uOC0uMy0xLjIgMGwtMS4zIDEuM2MtLjEuMS0uMS40IDAgLjVMMTMgNC42Yy4xLjEuNC4xLjUgMGwxLjMtMS4yeiIvPjwvc3ZnPg==)  no-repeat !important;
}

a.editCRD:hover {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PHBhdGggZmlsbD0iIzVhZDJmZiIgZD0iTTAgMTIuMnYyLjRjMCAuMi4yLjQuNC40aDIuNGMuMiAwIC40LS4xLjUtLjJsOC42LTguNmMuMS0uMS4xLS40IDAtLjVMOS40IDMuMWMtLjItLjItLjQtLjItLjYgMEwuMiAxMS43Yy0uMS4xLS4yLjMtLjIuNXptMTQuOC04LjhjLjMtLjMuMy0uOCAwLTEuMmwtMi0yYy0uMy0uMy0uOC0uMy0xLjIgMGwtMS4zIDEuM2MtLjEuMS0uMS40IDAgLjVMMTMgNC42Yy4xLjEuNC4xLjUgMGwxLjMtMS4yeiIvPjwvc3ZnPg==)  no-repeat !important;
}

td.actions a.cloneCRD {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PGcgZmlsbD0iIzM2QThGRiI+PHBhdGggZD0iTTEuOSAxNWMtLjQgMC0uOC0uMy0uOC0uOFYzLjhjMC0uNC4zLS44LjgtLjhzLjguMy44LjhWMTNjMCAuMi4yLjUuNC41aDcuMWMuNCAwIC44LjMuOC44IDAgLjQtLjMuOC0uOC44SDEuOXoiLz48cGF0aCBkPSJNNC45IDEyYy0uNCAwLS43LS4zLS43LS43Vi43YzAtLjQuMy0uNy43LS43aDguM2MuNCAwIC43LjMuNy43djEwLjZjMCAuNC0uMy43LS43LjdINC45ek02IDEuM2MtLjIgMC0uNC4yLS40LjV2OC40YzAgLjIuMi40LjQuNGg2LjFjLjIgMCAuNC0uMi40LS40VjEuOGMwLS4yLS4yLS41LS40LS41IDAgLjEtNi4xLjEtNi4xIDB6Ii8+PHBhdGggZD0iTTEwLjYgNEg3LjVjLS40IDAtLjctLjMtLjctLjcgMC0uNC4zLS43LjctLjdoMy4xYy40IDAgLjcuMy43LjctLjEuNC0uMy43LS43Ljd6TTEwLjYgNi42SDcuNWMtLjQgMC0uNy0uMy0uNy0uNiAwLS40LjMtLjcuNy0uN2gzLjFjLjQgMCAuNy4zLjcuNy0uMS4zLS4zLjYtLjcuNnpNMTAuNiA5LjNINy41Yy0uNCAwLS43LS4zLS43LS43IDAtLjQuMy0uNi43LS42aDMuMWMuNCAwIC43LjMuNy43LS4xLjMtLjMuNi0uNy42eiIvPjwvZz48L3N2Zz4=)  no-repeat !important;
}

td.actions a.cloneCRD:hover {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PGcgZmlsbD0iIzVhZDJmZiI+PHBhdGggZD0iTTEuOSAxNWMtLjQgMC0uOC0uMy0uOC0uOFYzLjhjMC0uNC4zLS44LjgtLjhzLjguMy44LjhWMTNjMCAuMi4yLjUuNC41aDcuMWMuNCAwIC44LjMuOC44IDAgLjQtLjMuOC0uOC44SDEuOXoiLz48cGF0aCBkPSJNNC45IDEyYy0uNCAwLS43LS4zLS43LS43Vi43YzAtLjQuMy0uNy43LS43aDguM2MuNCAwIC43LjMuNy43djEwLjZjMCAuNC0uMy43LS43LjdINC45ek02IDEuM2MtLjIgMC0uNC4yLS40LjV2OC40YzAgLjIuMi40LjQuNGg2LjFjLjIgMCAuNC0uMi40LS40VjEuOGMwLS4yLS4yLS41LS40LS41IDAgLjEtNi4xLjEtNi4xIDB6Ii8+PHBhdGggZD0iTTEwLjYgNEg3LjVjLS40IDAtLjctLjMtLjctLjcgMC0uNC4zLS43LjctLjdoMy4xYy40IDAgLjcuMy43LjctLjEuNC0uMy43LS43Ljd6TTEwLjYgNi42SDcuNWMtLjQgMC0uNy0uMy0uNy0uNiAwLS40LjMtLjcuNy0uN2gzLjFjLjQgMCAuNy4zLjcuNy0uMS4zLS4zLjYtLjcuNnpNMTAuNiA5LjNINy41Yy0uNCAwLS43LS4zLS43LS43IDAtLjQuMy0uNi43LS42aDMuMWMuNCAwIC43LjMuNy43LS4xLjMtLjMuNi0uNy42eiIvPjwvZz48L3N2Zz4=)  no-repeat !important;
}

td.actions a.restartCluster {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PHBhdGggZmlsbD0iIzM2QThGRiIgZD0iTTE1IDUuMlYxYzAtLjItLjMtLjMtLjQtLjJMMTMgMi40bC0uMi0uMmMtMy0zLTcuOC0yLjktMTAuNy4xLTIuOCAyLjktMi44IDcuNiAwIDEwLjUgMi45IDMgNy43IDMgMTAuNy4xIDEuMy0xLjMgMi4xLTMgMi4yLTQuOCAwLS4zLS4yLS41LS41LS41SDE0Yy0uMyAwLS41LjItLjUuNS0uMyAzLjQtMy4zIDYtNi45IDUuNS0yLjYtLjMtNC43LTIuNC01LjEtNS0uNi00LjIgMy03LjcgNy4zLTYuOSAxLjIuMiAyLjIuOSAzLjEgMS43aC4xTDEwLjQgNWMtLjIuMiAwIC40LjIuNGg0LjFjLjIgMCAuMy0uMS4zLS4yeiIvPjwvc3ZnPg==)  no-repeat !important;
}

td.actions a.restartCluster:hover {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PHBhdGggZmlsbD0iIzVhZDJmZiIgZD0iTTE1IDUuMlYxYzAtLjItLjMtLjMtLjQtLjJMMTMgMi40bC0uMi0uMmMtMy0zLTcuOC0yLjktMTAuNy4xLTIuOCAyLjktMi44IDcuNiAwIDEwLjUgMi45IDMgNy43IDMgMTAuNy4xIDEuMy0xLjMgMi4xLTMgMi4yLTQuOCAwLS4zLS4yLS41LS41LS41SDE0Yy0uMyAwLS41LjItLjUuNS0uMyAzLjQtMy4zIDYtNi45IDUuNS0yLjYtLjMtNC43LTIuNC01LjEtNS0uNi00LjIgMy03LjcgNy4zLTYuOSAxLjIuMiAyLjIuOSAzLjEgMS43aC4xTDEwLjQgNWMtLjIuMiAwIC40LjIuNGg0LjFjLjIgMCAuMy0uMS4zLS4yeiIvPjwvc3ZnPg==)  no-repeat !important;
}

td.actions a.deleteCRD, .icon.delete {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PGcgZmlsbD0iIzM2QThGRiI+PHBhdGggZD0iTTEzLjUgMi43aC0yLjJjLS4yIDAtLjQtLjItLjQtLjR2LS4yQzEwLjkgMSAxMCAwIDguOCAwSDYuMUM1IDAgNCAuOSA0IDIuMXYuM2MwIC4yLS4yLjMtLjMuM0gxLjRjLS40IDAtLjcuMy0uNy43IDAgLjQuMy43LjcuN2guMmMuMiAwIC40LjIuNC40djguM2MwIDEuMi45IDIuMSAyLjEgMi4xaDYuN2MxLjEgMCAyLjEtLjkgMi4xLTIuMVY0LjRjMC0uMi4yLS4zLjQtLjNoLjJjLjQgMCAuNy0uMy43LS43IDAtLjQtLjMtLjctLjctLjd6bS03LjktLjZjMC0uMy4zLS42LjYtLjZoMi43Yy4zIDAgLjYuMy42LjZ2LjJjMCAuMi0uMi40LS40LjRINS45Yy0uMiAwLS40LS4yLS40LS40di0uMnptNS44IDEwLjhjMCAuMy0uMy42LS42LjZINC4xYy0uMyAwLS42LS4zLS42LS42VjQuNmMwLS4yLjItLjQuNC0uNEgxMWMuMiAwIC40LjIuNC40djguM3oiLz48cGF0aCBkPSJNNi4xIDQuOWMtLjUgMC0xIC40LTEgMXY1LjRjMCAuNS40IDEgMSAxIC41IDAgMS0uNCAxLTFWNS45YzAtLjYtLjUtMS0xLTF6TTguOSA0LjljLS41IDAtMSAuNC0xIDF2NS40YzAgLjUuNCAxIDEgMSAuNSAwIDEtLjQgMS0xVjUuOWMwLS42LS40LTEtMS0xeiIvPjwvZz48L3N2Zz4=) no-repeat !important;
}

td.actions a.restoreBackup, .icon.restoreBackup {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiMzNmE4ZmYiIGQ9Im0yLjcgMy4xLjItLjJDNS44IDAgMTAuNy40IDEzIDQuMWMxLjUgMi4zIDEuMyA1LjMtLjQgNy40LTEuMSAxLjUtMi43IDIuMy00LjQgMi41LS40IDAtLjctLjMtLjctLjZzLjItLjYuNS0uNmMzLS4zIDUuMy0zLjIgNC42LTYuNC0uMy0xLjUtMS4zLTIuNy0yLjYtMy40LTIuMi0xLjItNC42LS44LTYuMi44bC0uMi4yLjguOC0zLjQuOS45LTMuNXpNNS43IDEyLjdjLS4zLS4xLS42LjEtLjguNC0uMS4zLjEuNy40LjhoLjFjLjMuMS42LS4xLjctLjRzLS4xLS43LS40LS44Yy4xIDAgMCAwIDAgMG0tMi0xLjJjLS4yIDAtLjUgMC0uNi4yLS4yLjMtLjIuNyAwIC45LjEuMS4yLjEuMy4yLjIgMCAuNSAwIC42LS4yLjItLjMuMi0uNyAwLS45LS4xLS4xLS4yLS4yLS4zLS4yTTIuMyA5LjZoLS40Yy0uMy4xLS41LjUtLjMuOS4xLjIuMy4zLjUuNGguNGMuMy0uMS41LS41LjMtLjktLjEtLjMtLjMtLjQtLjUtLjRtLS41LTIuNGgtLjFjLS40IDAtLjcuMy0uNy43IDAgLjMuMi42LjUuNmguMWMuNCAwIC42LS4zLjYtLjcuMS0uMi0uMS0uNS0uNC0uNiIvPjxwYXRoIGZpbGw9IiMzNmE4ZmYiIGQ9Ik05LjIgMTAuNGMtLjIgMC0uMy0uMS0uNS0uMkw2LjkgOC4zdi00YzAtLjQuMy0uNi42LS42cy43LjMuNy42djMuNWwxLjUgMS41Yy4zLjMuMy43IDAgLjktLjEuMi0uMy4yLS41LjIiLz48L3N2Zz4=) no-repeat !important;
}

td.actions a.deleteCRD:hover {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PGcgZmlsbD0iIzVhZDJmZiI+PHBhdGggZD0iTTEzLjUgMi43aC0yLjJjLS4yIDAtLjQtLjItLjQtLjR2LS4yQzEwLjkgMSAxMCAwIDguOCAwSDYuMUM1IDAgNCAuOSA0IDIuMXYuM2MwIC4yLS4yLjMtLjMuM0gxLjRjLS40IDAtLjcuMy0uNy43IDAgLjQuMy43LjcuN2guMmMuMiAwIC40LjIuNC40djguM2MwIDEuMi45IDIuMSAyLjEgMi4xaDYuN2MxLjEgMCAyLjEtLjkgMi4xLTIuMVY0LjRjMC0uMi4yLS4zLjQtLjNoLjJjLjQgMCAuNy0uMy43LS43IDAtLjQtLjMtLjctLjctLjd6bS03LjktLjZjMC0uMy4zLS42LjYtLjZoMi43Yy4zIDAgLjYuMy42LjZ2LjJjMCAuMi0uMi40LS40LjRINS45Yy0uMiAwLS40LS4yLS40LS40di0uMnptNS44IDEwLjhjMCAuMy0uMy42LS42LjZINC4xYy0uMyAwLS42LS4zLS42LS42VjQuNmMwLS4yLjItLjQuNC0uNEgxMWMuMiAwIC40LjIuNC40djguM3oiLz48cGF0aCBkPSJNNi4xIDQuOWMtLjUgMC0xIC40LTEgMXY1LjRjMCAuNS40IDEgMSAxIC41IDAgMS0uNCAxLTFWNS45YzAtLjYtLjUtMS0xLTF6TTguOSA0LjljLS41IDAtMSAuNC0xIDF2NS40YzAgLjUuNCAxIDEgMSAuNSAwIDEtLjQgMS0xVjUuOWMwLS42LS40LTEtMS0xeiIvPjwvZz48L3N2Zz4=)  no-repeat !important;
}

a.paramDoc {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PGcgZmlsbD0iI0QzRDNENiI+PHBhdGggZD0iTTcuODcyIDUuMjJjLS42LjEtMS4xLS4zLTEuMS0uOXYtLjFjMC0uNy42LTEuMiAxLjItMS4yLjUtLjEgMSAuMyAxLjEuOXYuMWMwIC43LS41IDEuMi0xLjIgMS4yek03Ljg3MiAxMi4wMmMtLjIgMC0uNCAwLS42LS4xLS4zLS4xLS42LS4yLS44LS40LS4yLS4yLS40LS40LS41LS43IDAtLjItLjEtLjQtLjEtLjYgMC0uMiAwLS40LjEtLjZ2LS4xYy4xLS4zLjQtMS41LjQtMS41LjEtLjEuMS0uMyAwLS40IDAtLjItLjItLjMtLjMtLjNoLTEuMXMtLjEgMC0uMS0uMWMwIDAgMC0uMS0uMS0uMSAwLS4zIDAtLjYuMS0uOVY1LjkyYzAtLjEuMS0uMS4yLS4yaDMuMWMuMSAwIC4yIDAgLjMuMS4xLjEuMS4yLjEuM2wtLjggMy41di4zYzAgLjQuMi41LjYuNS4yIDAgLjMgMCAuNS0uMUg5LjE3MmMuMSAwIC4yLjEuMi4xLjEuMS4yLjcuMy45di4yYzAgLjEtLjEuMi0uMi4ycy0uMi4xLS40LjEtLjQuMS0uNi4xYy0uMiAwLS40LjEtLjYuMXoiLz48cGF0aCBkPSJNNy41IDBDMy40IDAgMCAzLjQgMCA3LjVTMy40IDE1IDcuNSAxNSAxNSAxMS42IDE1IDcuNSAxMS42IDAgNy41IDB6bTAgMTMuNWMtMy4zIDAtNi0yLjctNi02czIuNy02IDYtNiA2IDIuNyA2IDYtMi43IDYtNiA2eiIvPjwvZz48L3N2Zz4=)  no-repeat;
}

a.paramDoc:hover {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PGcgZmlsbD0iIzM2QThGRiI+PHBhdGggZD0iTTcuODcyIDUuMjJjLS42LjEtMS4xLS4zLTEuMS0uOXYtLjFjMC0uNy42LTEuMiAxLjItMS4yLjUtLjEgMSAuMyAxLjEuOXYuMWMwIC43LS41IDEuMi0xLjIgMS4yek03Ljg3MiAxMi4wMmMtLjIgMC0uNCAwLS42LS4xLS4zLS4xLS42LS4yLS44LS40LS4yLS4yLS40LS40LS41LS43IDAtLjItLjEtLjQtLjEtLjYgMC0uMiAwLS40LjEtLjZ2LS4xYy4xLS4zLjQtMS41LjQtMS41LjEtLjEuMS0uMyAwLS40IDAtLjItLjItLjMtLjMtLjNoLTEuMXMtLjEgMC0uMS0uMWMwIDAgMC0uMS0uMS0uMSAwLS4zIDAtLjYuMS0uOVY1LjkyYzAtLjEuMS0uMS4yLS4yaDMuMWMuMSAwIC4yIDAgLjMuMS4xLjEuMS4yLjEuM2wtLjggMy41di4zYzAgLjQuMi41LjYuNS4yIDAgLjMgMCAuNS0uMUg5LjE3MmMuMSAwIC4yLjEuMi4xLjEuMS4yLjcuMy45di4yYzAgLjEtLjEuMi0uMi4ycy0uMi4xLS40LjEtLjQuMS0uNi4xYy0uMiAwLS40LjEtLjYuMXoiLz48cGF0aCBkPSJNNy41IDBDMy40IDAgMCAzLjQgMCA3LjVTMy40IDE1IDcuNSAxNSAxNSAxMS42IDE1IDcuNSAxMS42IDAgNy41IDB6bTAgMTMuNWMtMy4zIDAtNi0yLjctNi02czIuNy02IDYtNiA2IDIuNyA2IDYtMi43IDYtNiA2eiIvPjwvZz48L3N2Zz4=)  no-repeat;
}

strong {
    font-weight: 600;
}

pre {
    margin-bottom: 20px;
}

/* Extra Classes */
.upper {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize !important;
}

.normal {
    font-weight: normal;
}

.bold {
    font-weight: bold;
}

.small {
    font-size: 90%;
}

.no-border {
    border: 0 !important;
}

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

.marginTop {
    margin-top: 25px !important;
}

.marginBottom {
    margin-bottom: 25px !important;
}

.noPaddingBottom {
    padding-bottom: 0 !important;
}

.blue {
    color: var(--blue);
}

.no-color {
    color: var(--gray5);
}

table.clusterOverview a.no-color {
    display: block;
    color: inherit;
}

a.no-color{
    color: inherit;
}

.center {
    text-align: center;
}

.alignRight {
    text-align: right;
}

.flex-center {
    display: flex;
    align-items: center;
}

.relative {
    position: relative;
}

.donut {
    width: 25px;
    height: 25px;
    display: inline-block;
    position: relative;
    margin-right: 5px;
}

.donut svg {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 0;
    left: 0;
}

.donut .loader {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    stroke-dasharray: 0,63;
    z-index: 2;
}

.donut .background {
    z-index: 1;
}

svg.loader circle {
    stroke: var(--blue);
}

svg.background circle {
    stroke: #00adb540;
}

.hidden {
    display: none;
}

.invisible {
    opacity: 0;
}

.notValid {
    border-color: red !important;
}

.padLeft {
    padding-left: 20px;
}

.pad {
    padding: 20px;
}

.vPad {
    padding-top: 20px;
    padding-bottom: 20px;
}

.firstLetter:first-letter {
    text-transform: uppercase;
}

.textCenter {
    text-align: center;
}

.textRight {
    text-align: right;
}

.hoverPointer:hover {
    cursor: pointer;
}

.noHoverPointer:hover {
    cursor: default !important;
}

.no-data {
    height: 120px;
    text-align: center;
    border-bottom: 1px solid var(--borderColor);
    padding-top: 40px;
    width: 100%;
    display: block;
}

.floatRight {
    float: right;
}

.floatLeft {
    float: left;
}

.xsPad {
    padding: 10px;
}

.pad {
    padding: 20px;
}

.noPadding {
    padding: 0 !important;
}

.noMargin {
    margin: 0 !important;
}

.noBorder {
    border: 0 !important;
}

.topBorder {
    border-top: 1px solid var(--borderColor) !important;
}

.bottomBorder {
    border-bottom: 1px solid var(--borderColor) !important;
}

.clearfix {
    content: "";
    clear: both;
    display: table;
}

hr {
    clear: both;
}

.inlineHr {
    position: absolute;
    display: block;
    left: 50%;
    transform: translate(-50%, -140%);
    background: var(--bgColor);
    padding: 0 10px;
}

/* Log in */

#nav .right > div#signup {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 1px solid var(--gray1);
    border-radius: 10px;
    box-shadow: 0 0px 20px rgba(0,0,0,.05);
    padding: 100px;
}

#signup form {
    width: auto;
} 

#signup .header {
    width: 300px;
} 

#signup p {
    margin-bottom: 25px;
    width: 300px;
}

#signup input {
    display: block;
    /* border: 1px solid var(--gray2); */
    border-radius: 6px;
    padding: 10px 12px;
    height: 38px;
    width: 300px;
    /* background: #fff; */
    font-size: 12px;
    /* color: var(--gray5); */
}

#signup input:first-of-type {
    margin-bottom: 25px;
}

#signup input:last-of-type {
    display: inline;
}

#signup input:focus {
    border-color: var(--blue);
}

a#showPassword svg {
    display: inline;
}

#showPassword.active path {
    fill: var(--blue);
}

#showPassword {
    position: relative;
    display: block;
    margin-left: 260px;
    margin-top: -50px;
    z-index: 9;
}

form#login hr {
    display: none;
}

#signup button {
    margin-top: 30px;
}

form#login .warning {
    width: 300px;
    margin-bottom: -10px;
    margin-top: 30px;
    /*display: block;*/
}




/* Loader */
#loader {
    position: fixed;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: 5px;
    margin-bottom: 5px;
    right: 5px;
    top: 0;
    border-radius: 100%;
    background: url("img/loader.gif") center center no-repeat;
    mix-blend-mode: darken;
    background-size: 80px;
}

.row-50 {
    display: inline-block;
    width: 100%;
}

.row-50 > .col {
    width: 45%;
    display: inline-block;
    float: left;
}

.row-50 > .col:nth-of-type(2n) {
    margin-left: 7%;
}

.row-50 > .col:nth-of-type(2n) + .col {
    clear: left;
}

.row-100 > .col {
    display: inline-block;
    width: 97%;
}

.row-20 > .col {
    width: 20%;
    float: left;
    padding-right: 10px;
}

.cron.row-20 label {
    min-width: 100%;
    font-size: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/*#loader:before, #loader:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  filter: drop-shadow(0 0 10px rgba(0, 173, 181, 0.75));
}
#loader:before {
  width: 10px;
  padding-bottom: 10px;
  box-shadow: inset 0 0 0 5px #00ADB5;
  animation-name: pulsA;
}
#loader:after {
  width: 8px;
  padding-bottom: 8px;
  box-shadow: 0 0 0 0 #00ADB5;
  animation-name: pulsB;
}

@keyframes pulsA {
  0% {
    box-shadow: inset 0 0 0 1px #00ADB5;
    opacity: 1;
  }
  50%, 100% {
    box-shadow: inset 0 0 0 0 #00ADB5;
    opacity: 0;
  }
}
@keyframes pulsB {
  0%, 50% {
    box-shadow: 0 0 0 0 #00ADB5;
    opacity: 0;
  }
  100% {
    box-shadow: 0 0 0 1px #00ADB5;
    opacity: 1;
  }
}*/


/* Dark Mode */
#darkmode {
    cursor: pointer;
}

#darkmode svg {
    transform: scale(1.25) translateY(-2px);
}

#darkmode.active svg {
    /*transition: fill .3s ease-in;*/
    fill: var(--blue);
}

.darkmode {
    color: #e3e3e3;
    background: #171717;
    /*transition: all .5s ease-in;*/
}

.darkmode #nav {
    background: #222222;
    /*transition: all .5s ease-in;*/

}

.darkmode #side, .darkmode #nav {
    background: #1e1e1e;
    /*transition: all .5s ease-in;*/
}

.darkmode #nav svg {
    fill: #7A7B85;
}

.darkmode a.help g path {
    fill: #171717;
}

.darkmode .form button, button, .darkmode a.btn:not(.clear), .darkmode .applyBtn, .darkmode .closeLog:hover, .darkmode .toolbar .filter.open .toggle, .darkmode .toolbar .filter.open .toggle:after, .darkmode .options label.active span, .darkmode .filter .options .active, .darkmode .options input[type="checkbox"].active + span {
    color: #171717;
}

.darkmode .daterangepicker td.active:not(:hover):not(.deactivate) {
    color: #171717;
}

.darkmode .form input, .darkmode .form select, .darkmode .form textarea, .darkmode #logo h1, .darkmode .options label, .darkmode .options select, .darkmode ul.select li.selected, .darkmode table.crdDetails a {
    color: #e3e3e3;
}

.darkmode h4, .darkmode h3, .darkmode h2, .darkmode thead, .darkmode .tabs li a, .darkmode #keyword, .darkmode .options li.textFilter .search, .darkmode #help h3.title, .darkmode table.crdDetails td.label, .darkmode .details th, .darkmode tr.details table td.label, .darkmode .yaml .label, .darkmode .logMessage .param, .darkmode .logDetails td.param {
    color: #a5a5a5;
}

.darkmode .options label, .darkmode .options select {
    background-color: #444;
}

.darkmode #side, .darkmode #nav, .darkmode #current-namespace, .darkmode #ns-select, .darkmode .set.active:not(.conf):not(.backups), .darkmode ul.breadcrumbs, .darkmode tbody, .darkmode .table .head.row, .darkmode .table .row:last-child, .darkmode .boxes .row:last-child, .darkmode table.crdDetails td, .darkmode .form input, .darkmode .form select, .darkmode .form textarea, .darkmode .set, .darkmode ,.form .header, .darkmode .content .box, .darkmode .box hr, .darkmode #keyword, .darkmode .options, .darkmode .tooltip, .darkmode .message, .darkmode #nav .tooltip:before, .darkmode fieldset, .darkmode label.switch, .darkmode ul.select, .darkmode .options li.textFilter .search, .darkmode #nav .right > div#clone, .darkmode header .actions, .darkmode .contentTooltip .info, .darkmode ul.tabs, .darkmode .content h2, .darkmode .form .header, .darkmode .set.active:not(.conf), .darkmode table.poolConfig tr.details .paramDetails table, .darkmode table.pgConfig tr.details .paramDetails table {
    border-color: var(--borderColor);
}

.darkmode .form input, .darkmode .form select, .darkmode .form textarea {
    background-color: #1b1b1b;    
}

.darkmode .set.active, .darkmode #keyword, .darkmode ul.select, .darkmode ul.select.active, .darkmode ul.select.active ul, .darkmode .options li.textFilter .search {
    background-color: rgba(122, 123, 133, .10);
}

.darkmode ul#postgresVersion, .darkmode ul#postgresVersion ul, .darkmode .contentTooltip tr:nth-child(odd), .darkmode .contentTooltip .info {
    background-color: #171717;
}

.darkmode ul#postgresVersion a:hover, .darkmode ul.select.active li.selected {
    background: rgba(122, 123, 133, .10);
}

.darkmode .form input[disabled="disabled"], .darkmode .form select[disabled="disabled"], .darkmode .form textarea[disabled="disabled"], .darkmode .form fieldset[disabled="disabled"], .darkmode label.switch[disabled="disabled"] {
    background: rgba(51, 51, 51, .75);
}

.darkmode .form label, .darkmode ul.select a {
    color: #A5A5A5;
}

.darkmode ul.select.active li.selected {
    background: #181618;
    color: #cdcdcd;
}

.darkmode .contentTooltip {
    background: rgba(23, 23, 23, .75);
}

.darkmode #nav .tooltip:before {
    top: -6px;
}

.darkmode #loader {
    mix-blend-mode: screen;
    filter: invert(1) grayscale(1);
}

.darkmode table table tbody {
    border-top-color: #333333;
    border-bottom: 0;
}

.darkmode table table + table {
    border-top: 1px solid #333333;
}

.darkmode .clusterConfig tr {
    background: #1e1e1e;
}

.darkmode #delete .tooltip  h3 {
    border-bottom: 1px solid #333333;
}

.darkmode #delete .tooltip form input {
    background: #1b1b1b;
    border: 1px solid #333333;
    color: var(--gray3);
} 

.darkmode .grafana iframe {
    border: none;
}

.darkmode .podStatus .primary span, .darkmode .pr span, .darkmode .role.pr span {
    color: var(--gray2);
    background: #D3D3D640;
}

.darkmode .podStatus .replica span, .darkmode .re span, .darkmode .role.re span {
    color: var(--gray3);
    background: #A6A7AE40;
}

.darkmode .logsContainer.loading:after {
    background: url(img/loader.gif) center center no-repeat rgba(6, 5, 40, .9);
    background-size: 30px;
}

/* Dark mode - Log in */

.darkmode #nav .right > div#signup {
    background: #1e1e1e;
    border-color: #333333;

}

.darkmode #signup input {
    background: #1b1b1b;
    border-color: #333333;
    color: #e3e3e3;
}

#signup input:focus {
    border-color: var(--blue);
}


/* Main Structure */
aside {
    display: block;
    float: left;
    position: fixed;
    z-index: 10;
}

#side {
    width: 350px;
    height: calc(100vh - 50px);
    top: 50px;
    z-index: 10;
    background-color: #fcfcfc;
    border-right: 1px solid var(--gray1);
}

#nav {
    left: 0;
    top: 0;
    height: 50px;
    width: 100vw;
    padding: 10px 30px 10px 15px;
    border-bottom: 1px solid var(--gray1);
    background: #f8f8f8;
    overflow: visible;
    z-index: 11;
}

#main {
    position: relative;
    margin-left: 350px;
    float: left;
    width: calc(100% - 350px);
    display: block;
    min-height: 100vh;
    padding: 75px 40px 0 40px;
}

.cta {
    /* text-align: center; */
    display: block;
    margin: 20px auto;
}

/* Sidebar */
#logo {
    display: flex;
    float: left;
    text-align: left;
    line-height: 30px;
    margin-right: 20px;
}

#logo a {
    color: var(--gray5);
    font-size: 1.3rem;
}

#logo h1 {
    font-weight: 300;
    display: inline-block;
    font-size: 20px;
    margin-top: 1px;
    position: absolute;
}

#sgVersion {
    font-size: 12px;
    letter-spacing: 1px;
    margin-left: 5px;
}

#nav #logo svg {
    width: auto;
    height: auto;
    display: inline-block;
    margin-right: 10px;
}

#current-namespace {
    padding: 0 20px;
    display: flex;
    border-bottom: 1px solid var(--gray1);
    font-size: 1.1rem;
    line-height: 1.1;
    height: 75px;
    align-items: center;
    cursor: pointer;
}

#namespaces {
    height: 50px;
    max-height: 50px;
    margin-top: -10px;
    display: inline-block;
    text-transform: uppercase;
}

#namespaces > strong {
    line-height: 30px;
    position: absolute;
}

#namespaces .list {
    display: inline-block;
    position: relative;
    height: 50px;
    min-width: 150px;
    margin-left: 10px;
    overflow: visible;
    top: 0;
}

#namespaces a {
    display: block;
    text-align: center;
    width: 100%;
    padding: 15px;
}

ul.zg-ul-select {
    border-radius: 2px;
    border: 1px solid transparent;
    box-sizing: border-box;
    cursor: pointer;
    margin: 0 auto;
    padding: 0;
    width: auto;
    height: 0;
    overflow: hidden;
    z-index: 99;
}

ul.zg-ul-select.active {
    height: auto;
    display: block;
    border: 1px solid var(--blue);
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    box-shadow: 0 10px 60px rgba(0,0,0,.1);
}
ul.zg-ul-select li {
  border-radius: 3px;
  display: block;
  padding: 0;
}

ul.zg-ul-select li.active {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: var(--blue);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

ul.zg-ul-select.active li {
    border-top: 1px solid var(--blue);
    box-shadow: none;
    display: block;
    border-radius: 0;
    background: #fff;
}
ul.zg-ul-select.active li:hover {
  background: var(--blue);
}

ul.zg-ul-select.active li:hover a {
    color: #fff;
}

ul.zg-ul-select.active li.active {
  background: var(--lblue);
  border: 0;
}

ul.zg-ul-select.active li.active + li {
    border: 0;
}

ul.zg-ul-select.active li.active a {
    color: #fff;
}

ul.zg-ul-select.active li.active:hover {
  background: var(--lblue);
}

#selected--zg-ul-select {
    position: relative;
    cursor: pointer;
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    box-sizing: border-box;
    color: #111;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

#selected--zg-ul-select.active {
    border: 0;
    background: var(--blue);
    border-radius: 0;
    padding: 0 0 0 10px;
    height: 50px;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    line-height: 50px;
    color: #fff;
}

#selected--zg-ul-select > span {
    position: relative;
    right: -6px;
    top: -1px;
    display: inline-block;
}

#current-namespace h2 span {
    position: relative;
    display: inline-block;
    top: -2px;
    transition: transform .3s ease-in-out;
}

#current-namespace h2 strong {
    cursor: pointer;
}

#current-namespace.open h2 span {
    transform: rotate(180deg);
    transition: transform .3s ease-in-out;
}

/* ul.zg-ul-select:not(.active) li.active:after, #selected--zg-ul-select.active:after {
    display: block;
    content: " ";
    border: 1px solid var(--blue);
    width: 5px;
    height: 5px;
    transform: rotate(45deg);
    border-top: 0;
    border-left: 0;
    position: absolute;
    right: 10px;
    top: 7px;
} */

#selected--zg-ul-select:after {
    transform: rotate(225deg);
    top: 12px;
}

#selected--zg-ul-select.open:after {
    transform: rotate(-135deg);
    top: 10px;
}

#sets {
    /* overflow-x: visible; */
    height: calc(100vh - 125px);
    overflow: auto;
}

#sets.expanded {
    overflow-x: hidden;
    overflow-y: auto;
}

#side svg, .breadcrumbs svg, .card .crdName svg {
    fill: var(--blue);
    width: 20px;
    margin-right: 10px;
}

#side .set svg, .card .crdName svg {
    height: 15px;
    margin-top: 16px;
    width: auto;
    overflow: visible;
}

#side .set .addnew svg {
    margin-right: 0;
}

#side a.addnew:hover svg * {
    stroke: var(--lblue) !important;
}

#sets > .hide {
    max-height: 60px;
    height: auto;
    overflow: hidden;
    transition: height 1s ease-out;
}

#sets > .hide h3:before {
    transform: rotate(180deg);
}

footer {
    position: absolute;
    bottom: 0;
    min-height: 60px;
    line-height: 60px;
    border-top: 1px solid var(--gray1);
    width: 100%;
}

#credits {
    text-align: center;
    font-size: .8rem;
}

#credits span {
    color: var(--blue);
}


#nav svg {
    fill: var(--gray3);
    width: auto;
    height: 17px;
    margin: 2px auto;
    display: block;
}

#nav svg:hover {
    transition: fill .2s ease-in;
    fill: var(--blue);
}

#nav .remove svg {
    fill: var(--gray4);
}

#nav:not(.disabled) .top .router-link-active svg, #nav .view.router-link-active svg {
    fill: var(--blue);
}

.router-link-active[href="#/"] svg {
    fill: var(--gray3) !important;
}

#nav .right {
    display: inline-block;
    float: right;
    max-height: 50px;
}

#nav .right > * {
    display: inline-block;
    margin: 3px 10px;
}

#nav .view svg {
    width: 25px;
}

#nav a.nav-item {
    width: auto;
    display: inline-block;
    padding: 5px;
    margin: 0 7px;
}

#nav #collapse {
    background: var(--blue);
    height: 61px;
    padding: 10px 0;
}

#collapse svg {
    fill: #fff;
    stroke: #fff;
    width: 40px;
    height: auto;
}

#nav #notifications {
    position: relative;
}

#nav.disabled .top svg {
    opacity: .3;
}

#reload {
    cursor: pointer;
}

#reload.active svg path, #notifications.active svg path {
    fill: var(--blue);
    transition: fill .3s ease-in;
}

#reload.active svg {
    transform: rotate(720deg);
    transition: transform 2s ease-in-out;
}

.tooltip > span {
    display: block;
    margin: 10px 0 15px;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .5px;
}

.tooltip {
    position: fixed;
    background: #fff;
    padding: 5px 0;
    border: 1px solid var(--gray1);
    border-radius: 10px;
    box-shadow: 0 0px 20px rgba(0,0,0,.05);
    margin-left: 70px;
    display: none;
    line-height: 1;
    width: 320px;
}

#delete {
    position: absolute;
}

#delete .tooltip {
    right: 40px;
    padding: 20px;
    top: 60px;
}

#delete .tooltip  h3 {
    border-bottom: 1px solid var(--gray2);
    padding-bottom: 15px;
    margin-bottom: 25px;
    font-size: 1rem;
}

#delete .tooltip p {
    line-height: 1.2;
    margin-bottom: 10px;
} 

#delete .tooltip form input {
    background:#fff;
    border: 1px solid var(--gray2);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--gray5);
    height: 38px;
    width: 100%;
    margin-bottom: 15px;
}

#delete .tooltip form input:focus {
    border-color: var(--blue);
}

#delete .tooltip a{
    cursor: pointer;
    font-weight: 600;
    margin-right: 15px;
}

#delete .tooltip:before, table.backups tr.base.Failed.open td.timestamp:before {
    display: none;
}

.hasTooltip.active .tooltip {
    display: block;
}

#nav:not(.disabled) .top .tooltip {
    display: none !important;
}

.tooltip:before {
    border: 1px solid var(--gray1);
    display: block;
    content: " ";
    position: absolute;
    left: -6px;
    width: 10px;
    height: 10px;
    background: #fff;
    transform: rotate(45deg);
    top: calc(50% - 6px);
    z-index: 1;
    border-right: 0;
    border-top: 0;
}


.tooltip.pos1 {
    margin-top: -170px;
}

.tooltip.pos2 {
    margin-top: -110px;
}

.tooltip.pos3 {
    margin-top: -50px;
}

footer .tooltip p {
    padding: 10px 0;
    line-height: 1.3;
}

#notifications .tooltip {
    top: 60px;
    right: 40px;
    padding: 10px 20px;
}

#nav .tooltip:before {
    top: -7px;
    bottom: auto;
    right: 17px;
    left: auto;
    transform: rotate(135deg);
    display: none;
}

#notifications.active .tooltip {
    display: block !important;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

#notifications hr {
    width: 100%;
    margin-bottom: 0;
}

#notifications h3 {
    font-size: .8rem;
    color: var(--gray3);
    display: block;
    line-height: 1;
    padding: 0;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.message {
    border-top: 1px solid var(--borderColor);
    position: relative;
    max-width: 320px;
    padding: 15px 0;
    display: none;
}

#notifications .message.show, #notifications .message.zero, .message.show {
    display: block;
}

.message .remove {
    position: absolute;
    top: 23px;
    right: 2px;
    width: 15px;
    height: 15px;
    line-height: 1;
    font-size: 15px;
    text-align: center;
    color: var(--gray3);
    cursor: pointer;
    margin: 0;
}

.message .remove svg {
    transform: scale(.9);
}

.message .remove:hover path {
    fill: #FF2600;
}

.message .title {
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
}

.message .details {
    line-height: 1.2;
    word-break: break-word;
    margin-top: 20px;
}

.message .doclink, .message .doclink:hover {
    font-weight: bold;
    display: inline-block;
    margin-top: 20px;
    background-position: right !important;
    background-size: 15px !important;
}

.message .doclink span {
    margin-right: 20px;
    position: relative;
    top: 1px;
}

#nav .doclink svg {
    display: inline-block;
    width: 13px;
    position: absolute;
    top: -2px;
    right: -17px;
}

.message .kind {
    display: inline-block;
    text-transform: uppercase;
    margin: 0 6px 15px;
    font-size: .8rem;
    border: 0;
    border-radius: 20px;
    padding: 6px 10px;
}

.message.show.error .kind {
    background: rgba(255, 38, 0, .25);
    color: #FF2600;
}

.message.message .kind {
    background: rgba(0, 173, 181, .25);
    color: var(--blue);
}

.message .icon {
    display: inline-block;
    position: relative;
    top: 7px;
    padding: 0;
    border: 0;
}

.message.show.error .icon path {
    fill: #FF2600 !important;
}

.message.message .icon path {
    fill: var(--blue);
}

#nav .message .icon svg {
    height: 15px;
}

#notifications h2 {
    display: block;
    line-height: 1;
    margin: 10px;
    color: var(--blue);
    font-size: 1rem;
}

#logout {
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    top: -9px;
    cursor: pointer;
}

#logout a {
    display: flex;
    align-items: center;
}

#logout svg {
    width: 11px;
    margin: -3px 0 0 7px;
}

#expanders {
    border-top: 1px solid var(--gray1);
    display: inline-block;
    width: 100%;
    height: 50px;
    position: relative;
    background: #fff;
}

#expanders > div {
    width: 50%;
    display: block;
    float: left;
    height: 100%;
    line-height: 50px;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
}

#expanders .expand {
    border-left: 1px solid var(--gray1);
}

#expanders svg {
    margin-right: 3px;
    width: auto;
    position: relative;
    top: 2px;
    fill: var(--gray4);
}

/* Main Container */
#main header {
    /* text-transform: uppercase;
    height: 60px; */
    margin-bottom: 15px;
    position: relative;
    font-size: 1rem;
}

a.add {
    /*position: absolute;
    top: 0;
    right: 0;*/
    background: none;
    color: var(--blue); 
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
}

a.add:before {
    content: "+";
    font-size: 18px;
    display: inline-block;
    margin-right: 2px;
    vertical-align: text-bottom;
}

a.add:hover, tr.controlData a:hover {
    color: var(--lblue);
}

header .actions {
    /*position: absolute;
    top: 0;
    right: 0;*/
    text-transform: uppercase;
    display: block;
    width: 100%;
    padding: 12px 0 15px;    
    border-bottom: 1px solid var(--gray1);

}

header .actions a.documentation {
    text-transform: none;
    margin: 0;
}

header .actions a.documentation:before {
    display: inline-block;
    content: "";
    position: relative;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KPGc+Cgk8cGF0aCBmaWxsPSIjMDBBREI1IiBkPSJNNy4xLDE0LjhIMi45Yy0wLjcsMC0xLTAuMy0xLTAuNlYyLjVjMC0wLjQsMC4zLTAuNiwwLjYtMC42SDExYzAuMywwLDAuNiwwLjMsMC42LDAuNnY1LjQKCQljMCwwLjEsMC4xLDAuMiwwLjIsMC4yYzAsMCwwLjEsMCwwLjEsMGMwLjQtMC4yLDAuOS0wLjMsMS4zLTAuNGMwLjEsMCwwLjItMC4xLDAuMi0wLjJWMC45YzAtMC41LTAuNC0wLjktMC45LTAuOUgwLjkKCQlDMC40LDAsMCwwLjQsMCwxdjE0LjhjMCwwLjUsMC40LDEsMC45LDFoNi42YzAuMSwwLDAuMi0wLjEsMC4yLTAuMmMwLDAsMCwwLDAtMC4xYy0wLjEtMC40LTAuMS0wLjctMC4yLTEuMQoJCUM3LjYsMTUsNy40LDE0LjgsNy4xLDE0Ljh6Ii8+Cgk8cGF0aCBmaWxsPSIjMDBBREI1IiBkPSJNNC42LDMuN2g0LjJjMC41LDAsMC45LDAuNCwwLjksMC45bDAsMGMwLDAuNS0wLjQsMC45LTAuOSwwLjlINC42CgkJYy0wLjUsMC0wLjktMC40LTAuOS0wLjlsMCwwQzMuNyw0LjEsNC4xLDMuNyw0LjYsMy43eiIvPgoJPHBhdGggZmlsbD0iIzAwQURCNSIgZD0iTTQuNiw3LjRoNC4yYzAuNSwwLDAuOSwwLjQsMC45LDAuOWwwLDBjMCwwLjUtMC40LDAuOS0wLjksMC45SDQuNgoJCWMtMC41LDAtMC45LTAuNC0wLjktMC45bDAsMEMzLjcsNy44LDQuMSw3LjQsNC42LDcuNHoiLz4KCTxwYXRoIGZpbGw9IiMwMEFEQjUiIGQ9Ik04LjQsMTEuNWMwLjEtMC4xLDAtMC4zLTAuMS0wLjNjMCwwLTAuMSwwLTAuMSwwSDQuNmMtMC41LDAtMC45LDAuNC0wLjksMC45UzQuMSwxMyw0LjYsMTMKCQloM2MwLjEsMCwwLjItMC4xLDAuMi0wLjJDOCwxMi4zLDguMiwxMS45LDguNCwxMS41eiIvPgoJPHBhdGggZmlsbD0iIzAwQURCNSIgZD0iTTE4LjUsMTEuMWMtMi0yLTUuMy0yLTcuNCwwcy0yLDUuNCwwLDcuNHM1LjMsMiw3LjQsMGMxLTEsMS41LTIuMywxLjUtMy43CgkJQzIwLDEzLjQsMTkuNSwxMi4xLDE4LjUsMTEuMXogTTE0LjgsMTguMmMtMS45LDAtMy40LTEuNi0zLjQtMy41YzAtMS45LDEuNS0zLjQsMy40LTMuNGMxLjksMCwzLjQsMS42LDMuNCwzLjUKCQljMCwwLjctMC4yLDEuMy0wLjUsMS44QzE3LjEsMTcuNiwxNiwxOC4yLDE0LjgsMTguMnoiLz4KCTxwYXRoIGZpbGw9IiMwMEFEQjUiIGQ9Ik0xNC45LDEzLjdjMC40LDAsMC43LTAuMywwLjctMC43YzAsMCwwLDAsMCwwYzAtMC4zLTAuMy0wLjYtMC42LTAuNmMwLDAtMC4xLDAtMC4xLDAKCQljLTAuNCwwLTAuNywwLjMtMC43LDAuN0MxNC4yLDEzLjQsMTQuNSwxMy43LDE0LjksMTMuN0MxNC44LDEzLjcsMTQuOCwxMy43LDE0LjksMTMuN3oiLz4KCTxwYXRoIGZpbGw9IiMwMEFEQjUiIGQ9Ik0xNS45LDE2LjlDMTUuOSwxNi45LDE1LjksMTYuOSwxNS45LDE2LjljMCwwLjEtMC4xLDAuMi0wLjEsMC4yYy0wLjEsMC0wLjIsMC0wLjIsMC4xCgkJYy0wLjEsMC0wLjIsMC4xLTAuMywwLjFjLTAuMiwwLTAuNCwwLTAuNywwYy0wLjIsMC0wLjMtMC4xLTAuNC0wLjJjLTAuMS0wLjEtMC4yLTAuMi0wLjMtMC40YzAtMC4xLTAuMS0wLjItMC4xLTAuNAoJCWMwLTAuMSwwLTAuMywwLjEtMC40YzAuMS0wLjMsMC4xLTAuNSwwLjItMC44YzAtMC4xLDAtMC4xLDAtMC4yYzAsMC0wLjEtMC4xLTAuMS0wLjFoLTAuNWMwLDAtMC4xLDAtMC4xLDBjLTAuMSwwLTAuMS0wLjEtMC4xLTAuMQoJCWMwLTAuMiwwLTAuMywwLjEtMC41YzAsMCwwLTAuMSwwLTAuMWMwLTAuMSwwLjEtMC4xLDAuMi0wLjFoMS42YzAuMSwwLDAuMiwwLjEsMC4yLDAuMmMwLDAsMCwwLDAsMC4xbC0wLjQsMS44YzAsMCwwLDAuMSwwLDAuMQoJCWMwLDAuMSwwLDAuMiwwLjIsMC4yYzAuMSwwLDAuMiwwLDAuMy0wLjFjMC4xLDAsMC4xLDAsMC4yLDBjMC4xLDAsMC4xLDAsMC4xLDAuMWMwLjEsMC4yLDAuMSwwLjMsMC4xLDAuNQoJCUMxNS45LDE2LjgsMTUuOSwxNi44LDE1LjksMTYuOXoiLz4KPC9nPgo8L3N2Zz4=);
    width: 20px;
    height: 20px;
    top: 5px;
    margin-right: 5px;
}

header .actions a {
    cursor: pointer;
    font-weight: 600;
    margin-left: 15px;
}

.crdActionLinks > *:not(:first-child).lastItem {
    border-left: 1px solid var(--borderColor);
    padding-left: 15px;
}

header .actions > div {
    float: right;
    margin-top: 5px;
}

ul.breadcrumbs {
    list-style: none;
    margin-top: 15px;
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--gray1);
    padding-bottom: 20px;
    height: 45px;
}

.breadcrumbs li {
    display: flex;
    float: left;
    align-items: center;
    height: 20px;
    cursor: default;
}

.breadcrumbs li:not(:first-child):before {
    content: " ";
    display: block;
    width: 5px;
    height: 5px;
    border: 2px solid var(--gray2);
    transform: rotate(45deg);
    border-left: 0;
    border-bottom: 0;
    margin: -2px 10px 0;
}

.breadcrumbs .action {
    text-transform: capitalize;
}

.breadcrumbs .namespace svg {
    transform: scale(.85);
}

.breadcrumbs li.namespace {
    font-weight: bold;
}

.breadcrumbs a:not(.add) {
    color: inherit;
}

.breadcrumbs a:hover {
    color: var(--blue);
}

ul.tabs {
    list-style: none;
    display: inline-block;
    width: 100%;
    color: var(--gray4);
    border-bottom: 1px solid var(--gray2);
}

.tabs li {
    display: inline-block;
    margin-right: 20px;
}

.tabs li a {
    padding: 10px 2px;
    display: block;
    color: var(--gray4);
    text-transform: none;
    margin-top: 10px;
    font-size: 1rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tabs button.icon {
    margin: 0 0 0 5px;
    top: 2px;
}

.contentTooltip .tabs li  a {
    margin-top: 0;
    padding-top: 0;
}

.tabs li a:hover {
    color: var(--blue);
}

.tabs li a.router-link-exact-active, .tabs li.active a {
    color: var(--blue);
    border-bottom-color: var(--blue);
    font-weight: bold;
}

.tabContent > div {
    display: none;
}

.tabContent > div.active {
    display: block;
}

.subtitle {
    font-weight: 300;
}

.table .row, .boxes .row {
    display: flex;
    padding: 9px 0;
    border-bottom: 1px solid var(--gray1);
}

.table .head.row, .table .row:last-child, .boxes .row:last-child {
    border-bottom-color: var(--gray2);
}

.table .row:nth-child(even) {
    background: #fafafa;
}

.head h4 {
    color: var(--gray3);
    font-weight: 300;
    /* text-transform: uppercase; */
    letter-spacing: .3px;
}


.table .col, .boxes .col {
    flex-grow: 1;
    flex-basis: 0;
}

.table .col.double, .boxes .col.double {
    flex: 100px;
}

.table .col {
    text-align: center;
}

.table .col.number {
    text-align: right;
}

.table .col.text {
    /* text-transform: uppercase; */
    text-align: left;
}   

.table .col.status {
    text-align: left;
    text-transform: capitalize;
}

.table .status > span, .status-legend .status > span {
    background: var(--gray1);
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    font-size: 11px;
    line-height: 16px;
    color: #fff;
    margin-right: 10px;
    text-align: center;
}

.table .status.running > span, .status-legend .status.running > span {
    background: var(--blue);
}

.table .status.pending > span, .status-legend .status.pending > span {
    color: var(--gray5);
}

.table .status.failed > span, .status-legend .status.failed > span {
    background: var(--red);
}

.status-legend {
    margin: 20px 0;
}

li.status {
    display: inline-block;
    list-style: none;
    margin-left: 30px;
}

.status-legend .status > span {
    margin-right: 3px;
}

.content h2 {
    font-size: 1rem;
    border-bottom: 1px solid var(--gray2);
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.connectionInfo h2 {
    border-bottom: none;
    display: inline-block;
    margin-bottom: -10px;
    padding-bottom: 0;
    line-height: 1.1;
}

.connectionInfo {
    float: right;
    position: relative;
    top: -38px;
    right: 5px;
}

.connectionInfo a:hover h2 {
    color: var(--baseLightColor);
    cursor: pointer;
}

#main > .content:not(.noScroll) {
    min-height: 280px;
    height: calc(100vh - 230px);
    overflow-y: auto;
    padding-right: 5px;
}

#main > .content.withPagination:not(.noScroll) {
    height: calc(100vh - 300px);
}

#main > .content.cluster:not(.noScroll)  {
    height: calc(100vh - 290px);
}

.content table {
    margin-bottom: 10px;
}

.tableContainer {
    width: 100%;
    overflow-x: auto;
}

.tableContainer > table {
    max-width: calc(100% - 5px) !important;
}

#backups tr.details.open > td > table:last-child {
    margin-bottom: 10px;
}

.content .box {
    border: 1px solid var(--gray1);
    padding: 0 30px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    font-size: 1rem;
    overflow: hidden;
    height: 50px;
    transition: height .3s ease-out;
}

.content .box.show {
    height: auto;
    transition: height .3s ease-out;
}

.content h3 {
    color: var(--blue);
    /* text-transform: uppercase; */
    margin-bottom: 15px;
}

.box h4 {
    /* text-transform: uppercase; */
    padding: 15px 0;
    position: relative;
    left: -15px;
    cursor: pointer;
}

.box h4:before {
    content: "▾";
    display: inline-block;
    font-size: .8rem;
    position: relative;
    top: -2px;
    margin-right: 8px;
    transition: transform .3s ease-in-out;
}

.box.show h4:before {
    transform: rotate(180deg);
    transition: transform .3s ease-in-out;
}

h4.basic:before {
    display: none;
}

h4.basic {
    left: 0;
    margin-bottom: -15px;
}

.box .table {
    margin-bottom: 25px;
}

.box .table h4 {
    padding: 10px 0 0px;
    position: initial;
}

.box .table .head + .row, .box.show > .row {
    border-bottom: 0;
}

.box span {
    display: block;
    text-transform: uppercase;
    color: var(--gray3);
    font-size: .9rem;
    margin-bottom: 5px;
}

.box hr {
    border: 0;
    border-bottom: 1px solid var(--gray2);
}

ul.params {
    margin-bottom: 20px;
}

.params li {
    display: block;
    margin-bottom: 5px;
}

ul.params .params {
    padding-left: 20px;
    margin-bottom: 10px;
}

ul.params .params li {
    margin-bottom: 0;
}

.boxes .col.right {
    margin-left: -30px;
    padding-left: 30px;
    margin-bottom: 30px;
    border-left: 1px solid var(--gray2);
}


.profiles .box {
    padding-bottom: 20px;
}

/* Grafana */
.grafana iframe {
    width: 100%;
    height: calc(100vh - 285px);
    border: 1px solid #f0f0f1;
}

ul.selector {
    display: inline-block;
    right: 0;
    top: 120px;
    list-style: none;
    position: absolute;
}

ul.selector li {
    display: inline-block;
    margin-right: 10px;
}

.selector .router-link-exact-active {
    font-weight: bold;
    border-bottom: 1px solid var(--blue);
}

/* Backups */

#backups tr.details div {
    width: calc(50% - 15px);
    float: left;
}

#backups table table {
    width: 100%;
    margin-left: 0 !important;
}

#backups tr.base.open td:not(.timestamp):not(.actions) {
    opacity: 0;
}

#backups  tr.details div:last-of-type {
    margin-left: 25px;
}

#backups  tr.details td.controlData {
    overflow-wrap: anywhere;
}

.details .managedLifecycle {
    background-position-x: 15px;
}

td.timestamp, th.timestamp {
    min-width: 235px;
}

#backups .details.Failed div {
    width: calc(100% - 50px);
}

#nav #backup-btn, #nav #grafana-btn {
    display: none;
}

#nav #backup-btn.show, #nav #grafana-btn.show {
    display: block;
}

.backups .box {
    padding-bottom: 20px;
    height: 90px;
}

.table .col.name {
    flex: 90px;
}

.details a.btn {
    position: relative;
    top: 16px;
    float: right;
    width: 85px;
    display: block;
    min-width: fit-content;
}

.col.details {
    width: 85px;
    flex: initial;
}

.boxes .table .row {
    padding-bottom: 0;
}

.backups .box h4:before {
    display: none;
}

.table .row:not(.head) .name {
    text-overflow: ellipsis;
    overflow: hidden;
    height: 18px;
    white-space: nowrap;
}

.col.name:after {
    content: attr(data-name);
    display: none;
    position: absolute;
    background: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 0 3px 16px rgba(0,0,0,.2);
    margin-top: -22px;
    margin-left: -10px;
}

.col.name:hover:after {
    display: block;
}

.head .col.name:after {
    display: none;
}

/* .backups .detail {
    display: block;
    width: 33.33%;
    float: left;
} */

/* Forms */
.form {
    width: 550px;
    /*min-width: 550px;*/
    max-width: 50%;
    display: inline-block;
    position: relative;
    float: left;
    margin-bottom: 20px;
}

.form label, .form input, .form select {
    display: block;
    width: 100%;
}

.form input, .form select {
    margin-bottom: 20px;
}

.form .col input, .form .col select {
    margin-bottom: 0;
}

.form label {
    /* text-transform: uppercase; */
    color: var(--gray4);
    margin-bottom: 2px;
}

.form input, .form select, .form textarea, ul.select, select.plain {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid var(--gray2);
    border-radius: 6px;
    padding: 10px 12px;
    background: #fff;
    font-size: 12px;
    color: var(--gray5);
    position: relative;
    z-index: 1;
    height: 38px;
}

ul.select {
    padding: 0;
    margin-bottom: 25px;
    overflow: hidden;
}

ul.select ul li a {
    padding-left: 25px;
}

ul.select a:hover {
    background: #fbfbfb;
}

ul.select.active, ul.select.active ul {
    background: #fff;
    height: auto;
}

ul.select li {
    display: none;
}

ul.select li a, ul.select li.selected {
    cursor: pointer;
    font-weight: normal;
}

ul.select li a, ul.select li.selected, ul.select li > strong {
    padding: 0 10px;
    height: 38px;
    line-height: 38px;
    display: block;
}

/* ul.select li a, ul.select li > strong {
    font-size: 13px;
} */

ul.select .selected, ul.select.active li {
    display: block;
    height: auto;
}

ul.select.active li.selected {
    border-bottom: 1px solid var(--blue);
    background: #fbfbfb;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: calc(100% + 20px);
}

ul.select a {
    color: inherit;
}

ul.select a:hover, ul.select a.active {
    color: var(--blue);
}

ul.select a.active {
    font-weight: bold;
}

/* ul.select a.active:before {
    content: "–";
    color: var(--blue);
    font-weight: bold;
    margin-right: 5px;
    font-size: 20px;
} */

.form textarea {
    width: 100%;
    height: 220px;
    max-height: 220px;
    border-radius: 6px;
    max-width: 100%;
    min-width: 100%;
}

.form input:focus, .form select:focus, .form textarea:focus, ul.select.active {
    border-color: var(--blue);
}

form .warning, .warningText {
    background: rgba(0,173,181,.05);
    border: 1px solid var(--blue);
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    display: inline-block;
    line-height: 1.3;
    width: 100%;
    position: relative;
}

.warning svg {
    position: absolute;
    margin-top: 7px;
    width: 20px;
}

.warning.orange svg * {
    fill: var(--orange);
}

.warning p {
    padding-left: 40px;
}

.warning.topAnchor:before {
    content: " ";
    display: block;
    position: absolute;
    border: 1px solid var(--blue);
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    border-bottom: 0;
    border-right: 0;
    top: -5px;
    background: #f2fbfb;
}

.warning.topAnchor.right:before {
    right: 30px;
}

.darkmode .warning.topAnchor:before {
    background: #161f1f;
}

.warning.orange.topAnchor:before {
    border-color: var(--orange);
}

.darkmode .warning.orange.topAnchor:before {
    background: #361f1b;
}


label.switch {
    border: 1px solid var(--gray2);
    padding: 10px;
    position: relative;
    border-radius: 6px;
    cursor: pointer;
}

.switch input, .switch.reverse input:checked {
    width: 60px;
    height: auto;
    display: inline-block;
    padding: 6px 10px;
    margin: 0;
    float: right;
    text-align: right;
    color: var(--gray3);
    border-radius: 20px;
    position: absolute;
    right: 4px;
    top: 4px;
    font-size: 11px;
    border: 1px solid var(--gray3);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.switch input:hover {
    background-color: rgba(0, 173, 181, .25);
    color: var(--blue);
    border: 1px solid var(--blue);
}

.switch input:hover::before {
    background: var(--blue);
}

.switch input:checked, .switch.reverse input:not(:checked), .switch.reverse input:not(:checked):focus {
    border-color: var(--blue);
    color: var(--blue);
    text-align: left;
}

.switch input:focus:not(:checked), .switch.reverse input:checked:focus {
    border-color: var(--gray3);
}

.switch input:after {
    text-transform: uppercase;
    content: "OFF";
}

.switch input:checked:after {
    text-transform: uppercase;
    content: "ON";
}

.switch.yes-no input:after, .switch.yes-no.reverse input:checked:after {
    content: 'NO';
}

.switch.yes-no input:checked:after, .switch.yes-no.reverse input:not(:checked):after {
    content: 'YES';
}

.switch input:before, .switch.reverse input:checked:before {
    display: block;
    width: 19px;
    height: 19px;
    position: absolute;
    top: 3px;
    left: 3px;
    right: auto;
    background: var(--gray3);
    content: " ";
    border-radius: 100%;
    transition: all .3s ease-out;
}

.switch input:checked:before, .switch.reverse input:before {
    background: var(--blue);
    left: auto;
    right: 3px;
    transition: all .3s ease-out;
}

.form select, ul.select, select.plain {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 20px;
    background-size: 9px;
    background-repeat: no-repeat;
    background-position: 98% center;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ5MS45OTYgNDkxLjk5NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDkxLjk5NiA0OTEuOTk2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIGNsYXNzPSIiPjxnPjxnPgoJPGc+CgkJPHBhdGggZD0iTTQ4NC4xMzIsMTI0Ljk4NmwtMTYuMTE2LTE2LjIyOGMtNS4wNzItNS4wNjgtMTEuODItNy44Ni0xOS4wMzItNy44NmMtNy4yMDgsMC0xMy45NjQsMi43OTItMTkuMDM2LDcuODZsLTE4My44NCwxODMuODQ4ICAgIEw2Mi4wNTYsMTA4LjU1NGMtNS4wNjQtNS4wNjgtMTEuODItNy44NTYtMTkuMDI4LTcuODU2cy0xMy45NjgsMi43ODgtMTkuMDM2LDcuODU2bC0xNi4xMiwxNi4xMjggICAgYy0xMC40OTYsMTAuNDg4LTEwLjQ5NiwyNy41NzIsMCwzOC4wNmwyMTkuMTM2LDIxOS45MjRjNS4wNjQsNS4wNjQsMTEuODEyLDguNjMyLDE5LjA4NCw4LjYzMmgwLjA4NCAgICBjNy4yMTIsMCwxMy45Ni0zLjU3MiwxOS4wMjQtOC42MzJsMjE4LjkzMi0yMTkuMzI4YzUuMDcyLTUuMDY0LDcuODU2LTEyLjAxNiw3Ljg2NC0xOS4yMjQgICAgQzQ5MS45OTYsMTM2LjkwMiw0ODkuMjA0LDEzMC4wNDYsNDg0LjEzMiwxMjQuOTg2eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojQjNCM0IzIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCI+PC9wYXRoPgoJPC9nPgo8L2c+PC9nPiA8L3N2Zz4=);
}

select.plain {
    width: 250px;
    border: 1px solid var(--borderColor);
    background-color: rgba(122, 123, 133, .10);
    color: var(--textColor);
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

.unit-select .size {
    max-width: 50%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    float: left;
    position: relative;
}

.unit-select .size:focus {
    z-index: 2;
}

.unit-select .unit {
    width: 50%;
    position: relative;
    z-index: 1;
    left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-position-x: 95.5%;
}

button {
    cursor: pointer;
}

.form button, button, .form .btn, form .btn {
    background: var(--blue);
    color: #fff;
    margin-top: 10px;
    border: 1px solid var(--blue);
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 6px;
    text-align: center;
    width: auto;
    font-size: .9rem;
}

.form button:hover, .form button:focus, .btn:hover, .btn:focus, button:hover {
    background: var(--lblue);
    border-color: var(--lblue);
    color: #fff;
}

.form button.textBtn, button.plain, button.icon.plain {
    padding: 0;
    background: transparent;
    color: var(--blue);
    font-weight: bold;
    border: 0;
    margin: 0;
}

.form button.textBtn:hover, button.plain:hover, button.icon.plain:hover {
    background: transparent;
}

.form button + button, .form .btn + button, .btn + .btn, button + .btn {
    margin-left: 10px;
}

.form button.border, .btn.border {
    color: var(--blue);
    background: transparent;
    border: 1px solid var(--blue);
}

.form button.border:hover, .btn.border:hover, .daterangepicker button.cancelBtn, .btn.clear:hover {
    background-color: rgba(0, 173, 181, .25);
}

button.cancelBtn:hover {
    background-color: rgba(0, 173, 181, .25) !important;
}


.list-create {
    display: inline-block;
    width: 100%;
}

.list-create > button {
    float: left;
    margin-top: 0;
    margin-left: 20px;
}

.list-create > select {
    max-width: calc(100% - 220px);
    float: left;
}

.form .hide, .form .hidden, .hide {
    display: none !important;
} 

.form .show, .form .changed {
    display: inline-block !important;
}

.form .new {
    margin-top: 15px;
}

fieldset {
    border: 1px solid var(--gray2);
    padding: 20px 25px 0;
    border-radius: 5px;
    margin-bottom: 25px;
}

.form fieldset h3 {
    display: block;
    margin-bottom: 5px;
}

.config .form {    
    margin-bottom: 25px;
    margin-top: -10px;
}

.deleted {
    opacity: 0.3;
    transition: opacity .5s ease-in;
}

.form input[disabled="disabled"], .form select[disabled="disabled"], .form textarea[disabled="disabled"], .form fieldset[disabled="disabled"], label.switch[disabled="disabled"] {
    opacity: .5;
    background: var(--gray1);
    cursor: not-allowed;
}

/* 
.form .advanced {
    margin-bottom: 20px;
    font-size: 1rem;
}

.advanced.tabs input {
    border-radius: 0;
    border: 0;
    margin: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: pointer;
}

.advanced.tabs label {
    position: relative;
    padding: 0 0 2px;
    text-align: center;
    cursor: pointer;
}

.advanced.tabs label.active  {
    color: var(--blue);
    font-weight: bold;
}

.advanced.tabs .active input:after {
    content: " ";
    width: 100%;
    background: var(--blue);
    height: 2px;
    position: absolute;
    bottom: -2px;
    left: 0;
}

.advanced.tabs li {
    width: 50%;
    margin: 0;
} */

.form .header {
    border-bottom: 1px solid var(--gray2);
    display: inline-block;
    width: 100%;
    padding-bottom: 5px;
    margin-bottom: 25px;
}

.form .step > .header {
    margin-bottom: 25px;
}

.step .header + p {
    margin-top: -20px;
}

.form fieldset .header {
    margin-bottom: 15px;
    position: relative;
}

.form fieldset .header .addRow {
    position: absolute;
    right: 0;
    bottom: 5px;
}

.header h2 {
    font-size: 16px;
    display: inline-block;
}

.form .header h3 {
    display: inline-block;
    margin-bottom: 0;
}

.form .header span.helpTooltip {
    display: inline-block;
    margin-top: 2px;
}

.header label {
    display: inline-block;
    width: auto;
    cursor: pointer;
    position: relative;
    top: 2px;
    user-select: none;
}

.header input[type="checkbox"], input[type="checkbox"].plain {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    padding: 0;
    display: inline-block;
    margin: 0 3px 0 0;
    cursor: pointer;
    position: relative;
    top: -2px;
}

.header input[type="checkbox"]:checked, input[type="checkbox"].plain:checked {
    border: 1px solid var(--blue);
}

.header input[type="checkbox"]:checked:after, input[type="checkbox"].plain:checked:after {
    border: 2px solid var(--blue);
    width: 3px;
    height: 7px;
    content: " ";
    border-left: 0;
    border-top: 0;
    display: block;
    transform: rotate(45deg);
    position: relative;
    top: 0px;
    left: 4px;
}

.header input[type="checkbox"]:checked + span {
    color: var(--blue);
}

.header input[type="checkbox"].switch {
    border-radius: 20px;
    width: 25px;
    height: 15px;
    border-color: var(--textColor);
}

.header input[type="checkbox"].switch:checked {
    border-color: var(--baseColor);
}

.header input[type="checkbox"].switch:after {
    display: block;
    content: " ";
    border-radius: 100%;
    width: 7px;
    height: 7px;
    border: 1px solid var(--textColor);
    top: 2px;
    left: 3px;
    position: relative;
    transform: none;
    background: var(--textColor);
    transition: left .2s ease-out;
}


.header input[type="checkbox"].switch:checked:after {
    border-color: var(--baseColor);
    left: 11px;
    background: var(--baseColor);
    transition: left .3s ease-out;
}

.form .alert {
    border-color: var(--orange);
}

.alert a {
    color: var(--orange);
}

span.req {
    color: var(--blue);
    font-weight: bold;
}

.cron select {
    background-position: 90% center;
    white-space: normal;
    padding-right: 25px;
}

a.addRow, .addRow > a {
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    cursor: pointer;
}

.addRow .separator {
    margin: 0 10px;
    width: 1px;
    height: 9px;
    display: inline-block;
    background: var(--borderColor);
}

.row {
    width: 100%;
    display: block;
}

.repeater .row, .inputContainer {
    position: relative;
    display: inline-block;
    width: 100%;
}

.repeater .eqSign ~ a.addRow, a.addRow.topRight {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
.inputContainer a.addRow.topRight {
    top: -20px;
}

.inputContainer .addRow.inline {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    transform: none;
}

input + .addRow.inline {
    transform: translate(-13px, -26px);
    z-index: 2;
    position: relative;
}

input.annotation, input.annotationValue, input.label, input.labelValue {
    width: 47%;
    position: relative;
    float: left;
    margin-bottom: 10px;
}

input.annotationValue, input.labelValue {
    top: -15px;
}

input.label, input.labelValue { 
    margin-bottom: 0;
}

span.eqSign {
    float: left;
    width: 6%;
    text-align: center;
    height: 38px;
    padding-top: 8px;
}

span.eqSign:before {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNSAyNSI+CjxwYXRoIGZpbGw9IiM0RDRGNUMiIGQ9Ik04LjMsMTEuNmMtMC40LDAtMC43LTAuMS0wLjktMC40QzcuMSwxMSw3LDEwLjYsNywxMC4zYzAtMC40LDAuMS0wLjcsMC40LTEKCUM3LjYsOSw4LDguOSw4LjMsOC45aDguM2MwLjQsMCwwLjcsMC4xLDAuOSwwLjRjMC4zLDAuMiwwLjQsMC42LDAuNCwwLjljMCwwLjQtMC4xLDAuNy0wLjQsMWMtMC4yLDAuMy0wLjYsMC40LTAuOSwwLjRMOC4zLDExLjZ6CgkgTTguMywxNi4xYy0wLjQsMC0wLjctMC4xLTAuOS0wLjRDNy4xLDE1LjUsNywxNS4xLDcsMTQuOGMwLTAuNCwwLjEtMC43LDAuNC0xYzAuMi0wLjMsMC42LTAuNCwwLjktMC40aDguM2MwLjQsMCwwLjcsMC4xLDAuOSwwLjQKCWMwLjMsMC4yLDAuNCwwLjYsMC40LDAuOWMwLDAuNC0wLjEsMC43LTAuNCwxYy0wLjIsMC4zLTAuNiwwLjQtMC45LDAuNEg4LjN6Ii8+Cjwvc3ZnPg==);
    display: inline-block;
    content: "";
    position: relative;
    width: 20px;
    height: 20px;
}

.darkmode span.eqSign:before {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNSAyNSI+CjxwYXRoIGZpbGw9IiM3QTdCODUiIGQ9Ik04LjMsMTEuNmMtMC40LDAtMC43LTAuMS0wLjktMC40QzcuMSwxMSw3LDEwLjYsNywxMC4zYzAtMC40LDAuMS0wLjcsMC40LTEKCUM3LjYsOSw4LDguOSw4LjMsOC45aDguM2MwLjQsMCwwLjcsMC4xLDAuOSwwLjRjMC4zLDAuMiwwLjQsMC42LDAuNCwwLjljMCwwLjQtMC4xLDAuNy0wLjQsMWMtMC4yLDAuMy0wLjYsMC40LTAuOSwwLjRMOC4zLDExLjZ6CgkgTTguMywxNi4xYy0wLjQsMC0wLjctMC4xLTAuOS0wLjRDNy4xLDE1LjUsNywxNS4xLDcsMTQuOGMwLTAuNCwwLjEtMC43LDAuNC0xYzAuMi0wLjMsMC42LTAuNCwwLjktMC40aDguM2MwLjQsMCwwLjcsMC4xLDAuOSwwLjQKCWMwLjMsMC4yLDAuNCwwLjYsMC40LDAuOWMwLDAuNC0wLjEsMC43LTAuNCwxYy0wLjIsMC4zLTAuNiwwLjQtMC45LDAuNEg4LjN6Ii8+Cjwvc3ZnPg==);
}

.repeater .eqSign + label {
    display: inline;
    position: relative;
    top: -17px;
}

.resourcesMetadata a.help {
    margin-top: 5px;
}

.scriptFieldset .repeater a.help {
    right: -67px;
}

.script.repeater textarea {
    margin-bottom: 20px;
    width: 100%;
    max-width: 468px;
}

fieldset.scriptFieldset .header a.help {
    margin-top: 0px;
}

label.script {
    display: inline-block;
    width: auto;
}

.uploadScript {
    float: right;
    display: inline;
}

fieldset.postgresServicesPrimary .header a.help, fieldset.postgresServicesReplicas .header a.help, fieldset.postgresServicesPrimary fieldset a.help, fieldset.postgresServicesReplicas fieldset a.help, fieldset.nodeSelectors a.help {
    margin-top: 0;
}

fieldset.podsScheduling .row a.help {
    right: -67px;
    bottom: -15px;
}

.optionBoxes {
    margin-bottom: 10px;
    display: grid;
    grid-auto-columns: minmax(0,1fr);
    grid-auto-flow: column;
    -moz-column-gap: 10px;
    column-gap: 10px;
    position: relative;
}

.optionBoxes > label {
    text-align: center;
    width: 100%;
    height: 100%;
    background-color: var(--activeBg);
    border: 1px solid var(--borderColor);
    border-radius: 6px;
    cursor: pointer;
    text-transform: capitalize;
}

.optionBoxes input[type=radio] {
    display: none;
}

.optionBoxes > label:hover {
    border-color: var(--blue);
    background-color: rgba(54, 168, 255, .1);
    color: var(--blue);
}

.optionBoxes > label.active {
    border-color: var(--blue);
    background-color: rgba(54, 168, 255, .9);
    font-weight: 600;
    color: var(--bgColor) !important;
}

.optionBoxes > .helpTooltip {
    position: absolute;
    top: 40px;
    right: 0;
}

.optionBoxes.withLogos label {
    padding: 25px 5px;
}

.optionBoxes.withLogos > label.active {
    background: rgba(54, 168, 255, .1);
    color: var(--textColor) !important;
}

.optionBoxes.withLogos svg {
    height: 45px;
    display: block;
    margin: 0 auto 20px;
}

span.orOption {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
}

span.orOption:before, span.orOption:after {
    content: " ";
    height: 1px;
    background: var(--borderColor);
    display: inline-block;
    width: calc(50% - 20px);
}

span.orOption:before {
    transform: translate(-10px, -5px);
}

span.orOption:after {
    transform: translate(10px, -5px);
}

/* Help Tooltips */

#help {
    position: fixed;
    padding-left: 75px;
    padding-right: 5px;
    left: 930px;
}

#help .info {
    line-height: 1.3;
}

#help .tooltip {
    right: 75px;
    top: 60px;
}

#help p {
    margin-bottom: 10px;
}

#help p br {
    content: " ";
    display: block;
    margin-bottom: 10px;
}

#help h3.title {
    font-size: 14px;
    margin-bottom: 10px;
}

#help .info ul {
    padding-left: 20px;
    margin: 10px 0;
}

textarea + a.help {
    /*margin-top: -220px;*/
    margin-top: 10px;
}


code {
    font-family: "Nunito", "Helvetica", "Arial", sans-serif;
}

a.help {
    position: absolute;
    margin-top: -48px;
    z-index: 9;
    /*left: 102%;*/
    right: -25px;
    margin-bottom: 0;
    height: 15px;
    width: 15px;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PHBhdGggZmlsbD0iIzA2MDUyOCIgZD0iTTcuNSwwQzMuNCwwLDAsMy40LDAsNy41QzAsMTEuNiwzLjQsMTUsNy41LDE1UzE1LDExLjYsMTUsNy41QzE1LDMuNCwxMS42LDAsNy41LDB6IE04LDExLjJjLTAuMiwwLjEtMC40LDAuMi0wLjYsMC4yaDBjLTAuMiwwLTAuNC0wLjEtMC42LTAuMmMtMC4yLTAuMi0wLjMtMC40LTAuMy0wLjdjMC0wLjIsMC4xLTAuNSwwLjMtMC42QzcsOS43LDcuMiw5LjcsNy40LDkuN2MwLjIsMCwwLjQsMC4xLDAuNiwwLjNjMC4yLDAuMiwwLjMsMC40LDAuMiwwLjZDOC4zLDEwLjgsOC4yLDExLDgsMTEuMnogTTkuOCw2LjZDOS43LDYuOCw5LjYsNyw5LjQsNy4xQzkuMyw3LjMsOSw3LjUsOC42LDcuOUM4LjUsOCw4LjQsOC4xLDguNCw4LjFjMCwwLjEtMC4xLDAuMS0wLjEsMC4yYzAsMCwwLDAuMS0wLjEsMC4yYzAsMC4xLDAsMC4yLTAuMSwwLjNDOC4xLDksOCw5LjEsNy45LDkuMkM3LjcsOS4zLDcuNiw5LjQsNy40LDkuNGgwQzcuMiw5LjQsNyw5LjMsNi44LDkuMkM2LjcsOSw2LjYsOC44LDYuNiw4LjZjMC0wLjMsMC0wLjUsMC4xLTAuN0M2LjgsNy42LDcsNy41LDcuMSw3LjNjMC4yLTAuMiwwLjQtMC40LDAuNi0wLjVDNy45LDYuNiw4LDYuNCw4LjEsNi40YzAuMS0wLjEsMC4xLTAuMiwwLjItMC4zYzAtMC4xLDAuMS0wLjIsMC4xLTAuM2MwLTAuMi0wLjEtMC40LTAuMi0wLjVDOCw1LjEsNy44LDUuMSw3LjUsNS4xQzcuMyw1LDcuMSw1LjEsNi45LDUuM0M2LjcsNS41LDYuNiw1LjcsNi41LDZDNi40LDYuNCw2LjEsNi42LDUuNyw2LjZoMGMtMC4yLDAtMC40LTAuMS0wLjUtMC4yQzUsNi4zLDQuOSw2LjEsNC45LDUuOXYwYzAtMC40LDAuMS0wLjcsMC4zLTFjMC4yLTAuMywwLjUtMC42LDAuOS0wLjhjMC40LTAuMiwwLjktMC4zLDEuNC0wLjNDOCwzLjcsOC40LDMuOCw4LjgsNGMwLjQsMC4yLDAuNywwLjQsMC45LDAuN2MwLjIsMC4zLDAuMywwLjcsMC4zLDFDMTAsNi4xLDEwLDYuMyw5LjgsNi42eiIvPjwvc3ZnPg==)  no-repeat !important;
}

.darkmode a.help {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTcuNSwwQzMuNCwwLDAsMy40LDAsNy41QzAsMTEuNiwzLjQsMTUsNy41LDE1UzE1LDExLjYsMTUsNy41QzE1LDMuNCwxMS42LDAsNy41LDB6IE04LDExLjJjLTAuMiwwLjEtMC40LDAuMi0wLjYsMC4yaDBjLTAuMiwwLTAuNC0wLjEtMC42LTAuMmMtMC4yLTAuMi0wLjMtMC40LTAuMy0wLjdjMC0wLjIsMC4xLTAuNSwwLjMtMC42QzcsOS43LDcuMiw5LjcsNy40LDkuN2MwLjIsMCwwLjQsMC4xLDAuNiwwLjNjMC4yLDAuMiwwLjMsMC40LDAuMiwwLjZDOC4zLDEwLjgsOC4yLDExLDgsMTEuMnogTTkuOCw2LjZDOS43LDYuOCw5LjYsNyw5LjQsNy4xQzkuMyw3LjMsOSw3LjUsOC42LDcuOUM4LjUsOCw4LjQsOC4xLDguNCw4LjFjMCwwLjEtMC4xLDAuMS0wLjEsMC4yYzAsMCwwLDAuMS0wLjEsMC4yYzAsMC4xLDAsMC4yLTAuMSwwLjNDOC4xLDksOCw5LjEsNy45LDkuMkM3LjcsOS4zLDcuNiw5LjQsNy40LDkuNGgwQzcuMiw5LjQsNyw5LjMsNi44LDkuMkM2LjcsOSw2LjYsOC44LDYuNiw4LjZjMC0wLjMsMC0wLjUsMC4xLTAuN0M2LjgsNy42LDcsNy41LDcuMSw3LjNjMC4yLTAuMiwwLjQtMC40LDAuNi0wLjVDNy45LDYuNiw4LDYuNCw4LjEsNi40YzAuMS0wLjEsMC4xLTAuMiwwLjItMC4zYzAtMC4xLDAuMS0wLjIsMC4xLTAuM2MwLTAuMi0wLjEtMC40LTAuMi0wLjVDOCw1LjEsNy44LDUuMSw3LjUsNS4xQzcuMyw1LDcuMSw1LjEsNi45LDUuM0M2LjcsNS41LDYuNiw1LjcsNi41LDZDNi40LDYuNCw2LjEsNi42LDUuNyw2LjZoMGMtMC4yLDAtMC40LTAuMS0wLjUtMC4yQzUsNi4zLDQuOSw2LjEsNC45LDUuOXYwYzAtMC40LDAuMS0wLjcsMC4zLTFjMC4yLTAuMywwLjUtMC42LDAuOS0wLjhjMC40LTAuMiwwLjktMC4zLDEuNC0wLjNDOCwzLjcsOC40LDMuOCw4LjgsNGMwLjQsMC4yLDAuNywwLjQsMC45LDAuN2MwLjIsMC4zLDAuMywwLjcsMC4zLDFDMTAsNi4xLDEwLDYuMyw5LjgsNi42eiIvPjwvc3ZnPg==) no-repeat !important;
}

a.help:hover, a.help.active, .helpTooltip.show  {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PHBhdGggZmlsbD0iIzM2QThGRiIgZD0iTTcuNSwwQzMuNCwwLDAsMy40LDAsNy41QzAsMTEuNiwzLjQsMTUsNy41LDE1UzE1LDExLjYsMTUsNy41QzE1LDMuNCwxMS42LDAsNy41LDB6IE04LDExLjJjLTAuMiwwLjEtMC40LDAuMi0wLjYsMC4yaDBjLTAuMiwwLTAuNC0wLjEtMC42LTAuMmMtMC4yLTAuMi0wLjMtMC40LTAuMy0wLjdjMC0wLjIsMC4xLTAuNSwwLjMtMC42QzcsOS43LDcuMiw5LjcsNy40LDkuN2MwLjIsMCwwLjQsMC4xLDAuNiwwLjNjMC4yLDAuMiwwLjMsMC40LDAuMiwwLjZDOC4zLDEwLjgsOC4yLDExLDgsMTEuMnogTTkuOCw2LjZDOS43LDYuOCw5LjYsNyw5LjQsNy4xQzkuMyw3LjMsOSw3LjUsOC42LDcuOUM4LjUsOCw4LjQsOC4xLDguNCw4LjFjMCwwLjEtMC4xLDAuMS0wLjEsMC4yYzAsMCwwLDAuMS0wLjEsMC4yYzAsMC4xLDAsMC4yLTAuMSwwLjNDOC4xLDksOCw5LjEsNy45LDkuMkM3LjcsOS4zLDcuNiw5LjQsNy40LDkuNGgwQzcuMiw5LjQsNyw5LjMsNi44LDkuMkM2LjcsOSw2LjYsOC44LDYuNiw4LjZjMC0wLjMsMC0wLjUsMC4xLTAuN0M2LjgsNy42LDcsNy41LDcuMSw3LjNjMC4yLTAuMiwwLjQtMC40LDAuNi0wLjVDNy45LDYuNiw4LDYuNCw4LjEsNi40YzAuMS0wLjEsMC4xLTAuMiwwLjItMC4zYzAtMC4xLDAuMS0wLjIsMC4xLTAuM2MwLTAuMi0wLjEtMC40LTAuMi0wLjVDOCw1LjEsNy44LDUuMSw3LjUsNS4xQzcuMyw1LDcuMSw1LjEsNi45LDUuM0M2LjcsNS41LDYuNiw1LjcsNi41LDZDNi40LDYuNCw2LjEsNi42LDUuNyw2LjZoMGMtMC4yLDAtMC40LTAuMS0wLjUtMC4yQzUsNi4zLDQuOSw2LjEsNC45LDUuOXYwYzAtMC40LDAuMS0wLjcsMC4zLTFjMC4yLTAuMywwLjUtMC42LDAuOS0wLjhjMC40LTAuMiwwLjktMC4zLDEuNC0wLjNDOCwzLjcsOC40LDMuOCw4LjgsNGMwLjQsMC4yLDAuNywwLjQsMC45LDAuN2MwLjIsMC4zLDAuMywwLjcsMC4zLDFDMTAsNi4xLDEwLDYuMyw5LjgsNi42eiIvPjwvc3ZnPg==)  no-repeat !important;
}

.col {
    position: relative;
}

a.help:hover {
    cursor: pointer;
}

a.help:hover svg > path, a.help.active svg > path {
    fill: var(--blue);
}

.header a.help {
    margin: 0;
}

/* Firefox Outline on focus hack */
button:focus,
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
outline: none !important;
}
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}

select:focus::-ms-value {
background-color: $input-bg;
color: $input-color;
}


/* Table Layout */
table {
    text-align: left;
}

th, td {
    position: relative;
    vertical-align: middle;
    height: 40px;
}

tr:not(.base) td {
    padding: 0 10px;
}

th {
    font-weight: normal;
    padding: 0 10px;
    color: var(--gray3);
    min-width: 35px;
}

/* Resizable Columns */

table.resizable {
    position: relative;
}

table.resizable > tbody {
    border-right: 1px solid var(--borderColor);
    border-left: 1px solid var(--borderColor);
}

table.resizable > thead th:not(.actions), table.resizable > tbody > tr > td:not(.actions) {
    padding: 0;
}

table.resizable tr.base.open {
    border-top: 1px solid var(--borderColor);
}

table.resizable tr.details.open {
    border-bottom: 1px solid var(--borderColor);
}

table.resizable td:not(:last-child) {
    border-right: 1px solid var(--borderColor);
    min-width: 80px;
}

table.resizable > thead > th, .card thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bgColor);
    border: 1px solid var(--borderColor);
    border-top: 0;
}

table.resizable > thead th:before, table.resizable > thead th:after, .card thead:after {
    content: ' ';
    display: block;
    height: 1px;
    background: var(--borderColor);
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    z-index: -1;
}

table.resizable > thead th:after {
    top: auto;
    bottom: -1px;
}

table.resizable th:after {
    bottom: -1px;
    top: auto;
}

th:last-child, td:last-child {
    padding-right: 15px;
}

table.resizable tr.open > td {
    border: 0;
}

table.resizable th:not(.label) span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 25px);
    position: absolute;
    top: 10px;
    left: 0;
    padding-left: 20px;
}

table.resizable th.textRight span:first-child {
    width: calc(100% - 20px);
    padding-right: 10px;
}

.columns-resize-bar {
    right: -5px !important;
}

table.resizable th[data-type="timestamp"] {
    max-width: 245px;
}

table.resizable th[data-type="version"] {
    max-width: 105px;
}

th.actions, td.actions {
    text-align: right;
    width: 95px !important;
    min-width: 95px;
    max-width: 95px;
    padding: 0 10px;
    text-transform: uppercase;
    border-left: 1px solid var(--borderColor);
}

td.actions a {
    margin: 0 5px;
    cursor: pointer;
    top: 0;
}

.actions svg path {
    fill: var(--blue);
}

.actions a:hover svg path, tr.controlData a:hover svg path {
    fill: var(--lblue);
}

table .icon, .details td.phase span {
    text-align: center;
}

td.icon {
    padding-right: 10px;
}

tbody {
    border-top: 1px solid #F0F0F1;
    border-bottom: 1px solid #F0F0F1;
}

table .sort th:not(.notSortable):not(.actions):hover, a.uploadLink {
    cursor: pointer;
}

.sort th {
    position: relative;
}

.sort th span.helpTooltip {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
}

.sort th:not(.actions) span:first-child:after {
    content: "▾";
    opacity: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 5px;
    width: 15px;
    text-align: center;
    background: var(--bgColor);
}

th.sorted span:first-child:after, .sort th:not(.notSortable) span:first-child:hover:after {
    opacity: 1;
}

.sorted.asc:after {
    transform: rotate(180deg);
}

table .Running td, table .Pending td {
    cursor: not-allowed;
}

table .details {
    display: none;
}

table .details.show {
    display: block;
}

.not-found {
    display: none !important;
}

td.true {
    background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxOSIgdmlld0JveD0iMCAwIDIwIDE5Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTUuMjc0KSI+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjE5IiByeD0iOS41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNS4yNzQpIiBmaWxsPSIjMDBhZGI1IiBvcGFjaXR5PSIwLjI1Ii8+PHBhdGggZD0iTTEwMS41MjMsOTEuN2ExLjAwNywxLjAwNywwLDAsMC0xLjQ0NiwwbC01LjA2Miw1LjE3Mi0xLjQ0Ni0xLjQ3OGExLjAwOCwxLjAwOCwwLDAsMC0xLjQ0NywwaDBhMS4wNjIsMS4wNjIsMCwwLDAsMCwxLjQ3OGwyLjE3LDIuMjE2YTEuMDA3LDEuMDA3LDAsMCwwLDEuNDQ2LDBsNS43ODUtNS45MUExLjA2LDEuMDYsMCwwLDAsMTAxLjUyMyw5MS43WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcxLjU0OCAtODUuODkxKSIgZmlsbD0iIzAwYWRiNSIvPjwvZz48L3N2Zz4=) calc(50% - 7px) center no-repeat;
}

td.false {
    background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxOSIgdmlld0JveD0iMCAwIDIwIDE5Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTguNzEzKSI+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjE5IiByeD0iOS41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOC43MTMpIiBmaWxsPSIjYTZhN2FlIiBvcGFjaXR5PSIwLjI1Ii8+PHBhdGggZD0iTTEwNS43OTQsMTA0LjY0MWwyLjIzLTIuMjNhMS4wMzcsMS4wMzcsMCwxLDAtMS40NjYtMS40NjZsLTIuMjMsMi4yMy0yLjIzLTIuMjNhMS4wMzcsMS4wMzcsMCwxLDAtMS40NjYsMS40NjZsMi4yMywyLjIzLTIuMjMsMi4yM2ExLjAzNiwxLjAzNiwwLDEsMCwxLjQ2NiwxLjQ2NWwyLjIzLTIuMjMsMi4yMywyLjIzYTEuMDM2LDEuMDM2LDAsMCwwLDEuNDY2LTEuNDY1WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc1LjYxNSAtOTUuMTQxKSIgZmlsbD0iI2E2YTdhZSIvPjwvZz48L3N2Zz4=) calc(50% - 7px) center no-repeat;
}

.crdDetails td.false, .crdDetails td.true {
    background-position: 10px center;
}

.base td.phase {
    padding: 0px 15px;
}

td.phase span {
    display: inline-block;
    width: 78px;
    padding: 3px 0;
    font-size: 11px;
    border-radius: 10px;
    font-weight: bold;
    text-align: center;
}

td.phase.Completed span {
    color: #03CC03;
    background: #00F90040;
}

td.phase.Pending span {
    color: #ff7600;
    background: #ff760040;
}

td.phase.Running span {
    color: #DE9826;
    background: #FCC12040;
}

td.phase.Failed span {
    color: #FF2600;
    background: #FF260040;
}

td.phase a.noColor {
    width: auto;
    display: inline-block;
}

tr.base.pending td:not(.phase) {
    line-height: 40px;
}

.timestamp span.time, span.timestamp span.time {
    color: var(--blue);
}

td .timestamp {
    color: var(--gray3);
}

.timestamp span.ms, span.timestamp span.ms {
    color: var(--gray5);
}

.timestamp span.tzOffset {
    opacity: .4;
}

table table {
    margin-left: -15px;
    width: calc(100% - 12px);
}

table table tbody {
    border-top-color: #f0f0f1;
    border-bottom: 0;
}

table table + table {
    border-top: 1px solid #f0f0f1;
}

.details th {
    color: #4D4F5C;
}

tr.details.open {
    display: table-row;
}

tr.details > td {
    padding-top: 10px !important;
}

tr.details {
    border-top: 0;
}

tr.details table {
    margin-left: 0;
}

tr.details table th, tr.details table td {
    padding-left: 15px;
    border: 1px solid #f0f0f1;
    vertical-align: middle;
}

tr.details table .label {
    min-width: 200px;
    padding-right: 35px;
    color: #4D4F5C;
    font-weight: bold;
    position: relative;
}

.details .label span.helpTooltip {
    position: absolute;
    right: 15px;
    top: calc(50% - 6px);
}

tr.details td:last-of-type table {
    margin-left: 12px !important;
}

tr.open .router-link-exact-active path {
    fill: var(--blue);
}

ul.yaml {
    list-style: none;
    /*margin: 10px 0;*/
    line-height: 1.5;
}

tr:not(.open) .parameters {
    position: relative;
}

tr:not(.open) .parameters ul.yaml {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    position: absolute;
    left: 10px;
    top: 10px;
    right: 10px;
}

tr:not(.open) .parameters ul.yaml li {
    position: relative;
    display: inline;
}

tr:not(.open) td.parameters ul.yaml li:not(:last-of-type):after {
    display: inline;
    content: ";";
    padding-right: 5px;
}

tr.open ul.yaml {
    margin-top: -4px;
}


.yaml .label {
    /*color: var(--blue);*/
    color: #4D4F5C;
}

ul.yaml ul {
    margin-left: 15px;
    list-style: none;
}

table.clusterInfo{
    margin-bottom: 30px;
}

.clusterInfo th {
    width: 20%;
}

.contentTooltip #clusterDetails [data-tooltip] {
    display: none;
}

td.tag span:not(.helpTooltip) {
    text-transform: capitalize;
    padding: 3px 9px;
    font-size: 11px;
    border-radius: 10px;
    width: 70px;
    display: inline-block;
    text-align: center;
    font-weight: 600;
}

table.podStatus tr:nth-child(even) {
    background: transparent;
}

.podStatus .primary span, .pr span, .role.pr span {
    background: #4D4F5C40;
    color: var(--gray5);
}

.podStatus .replica span, .re span, .role.re span {
    background: #A6A7AE40;
    color: var(--gray4);
}

.podStatus .Active span {
    color: rgba(3, 204, 3, 1);
    background-color: rgba(0, 249, 0, .25);
}

.podStatus .Failed span {
    color: rgba(255, 38, 0, 1);
    background-color: rgba(255, 38, 0, .25);
}

.podStatus .Inactive span {
    color: rgba(255, 137, 0, 1);
    background-color: rgba(255, 137, 0, .25);
}

.podStatus .Pending span {
    color: rgba(146, 185, 195, 1);
    background-color: rgba(146, 185, 195, .25);
}

.podStatus .Unknown span {
    color: rgba(172, 66, 250, 1);
    background-color: rgba(172, 66, 250, .25);
}

table.crdDetails {
    margin-bottom: 30px;
    margin-top: 15px;
}

.resourcesMetadata table:not(:last-of-type), .postgresServices table:not(:last-of-type), .podsMetadata table:not(:last-of-type) {
    margin-bottom: 15px;
}

table.crdDetails tr {
    background: transparent;
}

table.crdDetails thead th {
    border: 1px solid var(--borderColor);
}

table.crdDetails td {
    padding: 10px;
    vertical-align: top;
    border: 1px solid #F0F0F1;
}

table.crdDetails td.label {
    font-weight: bold;
    /*color: var(--blue);*/
    color: #4D4F5C;
}

table.crdDetails a {
    display: block;
    cursor: pointer;
}

table.crdDetails a:hover {
    color: var(--blue);
}

table.crdDetails a:hover svg, td.usedOn a:hover svg path{
    fill: var(--lblue) !important;
}

table.crdDetails svg, td.usedOn svg, tr.controlData svg, .connectionInfo svg, .card .actions svg {
    fill: var(--blue);
    width: 15px;
    display: inline-block;
    margin-left: 10px;
    float: right;
}

table.backups .details > td {
    vertical-align: top;
}

td ul.tableCells {
    list-style: none;
    margin: -10px;
}

td ul.tableCells li {
    display: flex;
}

td ul.tableCells + ul.tableCells {
    border-top: 1px solid var(--borderColor);
    margin-top: 10px;
}

td ul.tableCells li:not(:last-child) {
    border-bottom: 1px solid var(--borderColor);
}

td ul.tableCells li span:not(.helpTooltip) {
    padding: 10px;
    width: 50%;
    display: inline-block;
    min-width: 90px;
}

td ul.tableCells li span.label {
    font-weight: bold;
    display: inline-block;
}

td ul.tableCells li span.value {
    border-left: 1px solid var(--borderColor);
}

td ul.tableCells li span.value:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

tr:nth-child(odd) ul.tableCells li:nth-child(odd), tr:nth-child(even) ul.tableCells li:nth-child(even) {
    background: var(--activeBg);
}

tr:nth-child(odd) ul.tableCells li:nth-child(even), tr:nth-child(odd) ul.tableCells li:nth-child(even) {
    background: var(--bgColor);
}

/* Table Filters */
.toolbar {
    font-size: 12px;
    margin-bottom: 20px;
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid var(--borderColor);
    padding-bottom: 15px;
}

#keyword {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCAyOC45MzEgMjguOTMyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOC45MzEgMjguOTMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+PGc+Cgk8cGF0aCBkPSJNMjguMzQ0LDI1LjUxOGwtNi4xMTQtNi4xMTVjMS40ODYtMi4wNjcsMi4zMDMtNC41MzcsMi4zMDMtNy4xMzdjMC0zLjI3NS0xLjI3NS02LjM1NS0zLjU5NC04LjY3MiAgIEMxOC42MjUsMS4yNzgsMTUuNTQzLDAsMTIuMjY2LDBDOC45OSwwLDUuOTA5LDEuMjc1LDMuNTkzLDMuNTk0QzEuMjc3LDUuOTA5LDAuMDAxLDguOTksMC4wMDEsMTIuMjY2ICAgYzAsMy4yNzYsMS4yNzUsNi4zNTYsMy41OTIsOC42NzRjMi4zMTYsMi4zMTYsNS4zOTYsMy41OTQsOC42NzMsMy41OTRjMi41OTksMCw1LjA2Ny0wLjgxMyw3LjEzNi0yLjMwM2w2LjExNCw2LjExNSAgIGMwLjM5MiwwLjM5MSwwLjkwMiwwLjU4NiwxLjQxNCwwLjU4NmMwLjUxMywwLDEuMDI0LTAuMTk1LDEuNDE0LTAuNTg2QzI5LjEyNSwyNy41NjQsMjkuMTI1LDI2LjI5OSwyOC4zNDQsMjUuNTE4eiBNNi40MjIsMTguMTExICAgYy0xLjU2Mi0xLjU2Mi0yLjQyMS0zLjYzOS0yLjQyMS01Ljg0NlM0Ljg2LDcuOTgzLDYuNDIyLDYuNDIxYzEuNTYxLTEuNTYyLDMuNjM2LTIuNDIyLDUuODQ0LTIuNDIyczQuMjg0LDAuODYsNS44NDUsMi40MjIgICBjMS41NjIsMS41NjIsMi40MjIsMy42MzgsMi40MjIsNS44NDVzLTAuODU5LDQuMjgzLTIuNDIyLDUuODQ2Yy0xLjU2MiwxLjU2Mi0zLjYzNiwyLjQyLTUuODQ1LDIuNDJTNy45ODEsMTkuNjcyLDYuNDIyLDE4LjExMXoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6IzA2MDUyOCIgZGF0YS1vbGRfY29sb3I9IiMwMDAwMDAiPjwvcGF0aD4KPC9nPjwvZz4gPC9zdmc+);
    border: 1px solid var(--gray2);
    color: var(--gray4);
    padding: 0 15px 0 35px;
    height: 30px;
    background-size: 13px;
    background-position: 10px center;
    background-repeat: no-repeat;
    border-radius: 6px;
    width: 250px;
    max-width: 50%;
    margin-right: 5px;
}

.darkmode #keyword {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCAyOC45MzEgMjguOTMyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOC45MzEgMjguOTMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+PGc+Cgk8cGF0aCBkPSJNMjguMzQ0LDI1LjUxOGwtNi4xMTQtNi4xMTVjMS40ODYtMi4wNjcsMi4zMDMtNC41MzcsMi4zMDMtNy4xMzdjMC0zLjI3NS0xLjI3NS02LjM1NS0zLjU5NC04LjY3MiAgIEMxOC42MjUsMS4yNzgsMTUuNTQzLDAsMTIuMjY2LDBDOC45OSwwLDUuOTA5LDEuMjc1LDMuNTkzLDMuNTk0QzEuMjc3LDUuOTA5LDAuMDAxLDguOTksMC4wMDEsMTIuMjY2ICAgYzAsMy4yNzYsMS4yNzUsNi4zNTYsMy41OTIsOC42NzRjMi4zMTYsMi4zMTYsNS4zOTYsMy41OTQsOC42NzMsMy41OTRjMi41OTksMCw1LjA2Ny0wLjgxMyw3LjEzNi0yLjMwM2w2LjExNCw2LjExNSAgIGMwLjM5MiwwLjM5MSwwLjkwMiwwLjU4NiwxLjQxNCwwLjU4NmMwLjUxMywwLDEuMDI0LTAuMTk1LDEuNDE0LTAuNTg2QzI5LjEyNSwyNy41NjQsMjkuMTI1LDI2LjI5OSwyOC4zNDQsMjUuNTE4eiBNNi40MjIsMTguMTExICAgYy0xLjU2Mi0xLjU2Mi0yLjQyMS0zLjYzOS0yLjQyMS01Ljg0NlM0Ljg2LDcuOTgzLDYuNDIyLDYuNDIxYzEuNTYxLTEuNTYyLDMuNjM2LTIuNDIyLDUuODQ0LTIuNDIyczQuMjg0LDAuODYsNS44NDUsMi40MjIgICBjMS41NjIsMS41NjIsMi40MjIsMy42MzgsMi40MjIsNS44NDVzLTAuODU5LDQuMjgzLTIuNDIyLDUuODQ2Yy0xLjU2MiwxLjU2Mi0zLjYzNiwyLjQyLTUuODQ1LDIuNDJTNy45ODEsMTkuNjcyLDYuNDIyLDE4LjExMXoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6I2ZmZiIgZGF0YS1vbGRfY29sb3I9IiMwMDAwMDAiPjwvcGF0aD4KPC9nPjwvZz4gPC9zdmc+);
}

#keyword:focus {
    border-color: var(--blue);
}

.toolbar .filter {
    width: auto;
    float: left;
    position: relative;
    margin-right: 15px;
}

.toolbar .toggle {
    text-align: center;
    display: inline-block;
    padding: 0 20px 0 15px;
    border: 1px solid var(--borderColor);
    border-radius: 6px;
    height: 30px;
    line-height: 29px;
    color: var(--gray4);
    cursor: pointer;
    user-select: none;
    position: relative;
}

.toolbar .toggle:hover, .toolbar .toggle.active, .filter.filtered:not(.open) .toggle, [data-filtered="true"] .toggle {
    color: var(--blue);
    background-color: rgba(0, 173, 181, .25);
    border: 1px solid var(--blue);
}

.toolbar .toggle:hover:after, .toolbar [data-filtered="true"] .toggle:after {
    color: var(--blue);
}

.filter label {
    user-select: none;
}

.toolbar .filter.open .toggle {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

.toolbar .toggle:after {
    content: "▾";
    display: inline-block;
    position: relative;
    right: -6px;
    top: -1px;
    color: var(--gray3);
}

.toolbar .filtered .toggle:after {
    color: var(--blue);
}

.toolbar .filter.open .toggle:after {
    transform: rotate(180deg);
    color: #fff;
}

.options {
    display: none;
    position: absolute;
    z-index: 10;
    left: 0;
    border: 1px solid var(--gray1);
    background: #fff;
    margin-top: 10px;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,.05);
    list-style: none;
    width: 480px;
}

.options.open {
    display: block;
}

.options li {
    display: inline-block;
    width: 100%;
    margin-bottom: 9px;
    /* text-transform: uppercase; */
}

.options li:last-child {
    margin: 0;
}

.options li * {
    display: block;
    float: left;
}

.options li.textFilter {
    margin-bottom: 7px;
    position: relative;
}

.options label {
    position: relative;
    padding: 4px 9px;
    cursor: pointer;
    top: -3px;
    margin-left: 5px;
    background: var(--gray1);
    border-radius: 10px;
    font-size: 10px;
    color: var(--gray4);
}

.options label:hover {
    color: var(--blue);
    background-color: rgba(0, 173, 181, .25);
}

.options span + label {
    margin-left: 10px;
}

.options input[type="checkbox"] {
    position: absolute;
    top: -3px;
    left: -4px;
    width: 100%;
    height: 100%;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 10px;
    cursor: pointer;
}
.filter .options .active, .options input[type="checkbox"]:checked {
    background-color: var(--blue);
    color: #fff;
}

.options input[type="checkbox"].active + span, .options select.active:hover {
    color: #fff;
}

.options label span {
    position: relative;
    z-index: 1;
}

.options .li span, .options label span, #keyword {
    font-size: 0.8rem;
}

.filter.columns input[type="checkbox"] {
    top: 3px !important;

}

tr.no-results {
    text-align: center;
    height: 120px;
}

.options select {
    position: relative;
    top: -3px;
    margin-bottom: -6px;
    margin-left: 10px;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background-color: var(--gray1);
    padding: 3px 18px 3px 9px;
    color: var(--gray4);
    border-radius: 12px;
    cursor: pointer;
    font-size: 11px;
    line-height: 14px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDEyMy45NTkgMTIzLjk1OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjk1OSAxMjMuOTU4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PGc+Cgk8cGF0aCBkPSJNMTE3Ljk3OSwyOC4wMTdoLTExMmMtNS4zLDAtOCw2LjQtNC4yLDEwLjJsNTYsNTZjMi4zLDIuMyw2LjEsMi4zLDguNDAxLDBsNTYtNTYgICBDMTI1Ljk3OSwzNC40MTcsMTIzLjI3OSwyOC4wMTcsMTE3Ljk3OSwyOC4wMTd6IiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIHN0eWxlPSJmaWxsOiNBNkE3QUUiIGRhdGEtb2xkX2NvbG9yPSIjMDAwMDAwIj48L3BhdGg+CjwvZz48L2c+IDwvc3ZnPg==);
    background-position: 88% center;
    background-size: 7px;
    background-repeat: no-repeat;
}

.options select:hover {
    color: var(--blue);
    background-color: rgba(0, 173, 181, .25);
}


/* Centralized Log */

#log {
    margin: 0 -15px;
    padding: 0 15px;
}

.searchBar {
    display: initial;
}

.searchBar a.button {
    fill: #7A7B85;
    position: relative;
    left: -31px;
    top: 5px;
}

.searchBar a.button:hover {
    fill: var(--blue);
    cursor: pointer;
}

.searchBar a.button svg {
    width: 12.5px;
}

.options li.textFilter > span {
    padding-right: 10px;
    padding-top: 5px;
}

.options li.textFilter > span.clear {
    position: absolute;
    bottom: 4px;
    right: 2px;
    padding: 0px 3px;
    border-radius: 3px;
}

.options li.textFilter .search {
    padding: 0 10px 0 23px;
    border: 1px solid var(--gray2);
    border-radius: 3px;
    height: 25px;
    color: var(--gray4);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDI4LjkzMSAyOC45MzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI4LjkzMSAyOC45MzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0iIj48Zz48Zz4KCTxwYXRoIGQ9Ik0yOC4zNDQsMjUuNTE4bC02LjExNC02LjExNWMxLjQ4Ni0yLjA2NywyLjMwMy00LjUzNywyLjMwMy03LjEzN2MwLTMuMjc1LTEuMjc1LTYuMzU1LTMuNTk0LTguNjcyICAgQzE4LjYyNSwxLjI3OCwxNS41NDMsMCwxMi4yNjYsMEM4Ljk5LDAsNS45MDksMS4yNzUsMy41OTMsMy41OTRDMS4yNzcsNS45MDksMC4wMDEsOC45OSwwLjAwMSwxMi4yNjYgICBjMCwzLjI3NiwxLjI3NSw2LjM1NiwzLjU5Miw4LjY3NGMyLjMxNiwyLjMxNiw1LjM5NiwzLjU5NCw4LjY3MywzLjU5NGMyLjU5OSwwLDUuMDY3LTAuODEzLDcuMTM2LTIuMzAzbDYuMTE0LDYuMTE1ICAgYzAuMzkyLDAuMzkxLDAuOTAyLDAuNTg2LDEuNDE0LDAuNTg2YzAuNTEzLDAsMS4wMjQtMC4xOTUsMS40MTQtMC41ODZDMjkuMTI1LDI3LjU2NCwyOS4xMjUsMjYuMjk5LDI4LjM0NCwyNS41MTh6IE02LjQyMiwxOC4xMTEgICBjLTEuNTYyLTEuNTYyLTIuNDIxLTMuNjM5LTIuNDIxLTUuODQ2UzQuODYsNy45ODMsNi40MjIsNi40MjFjMS41NjEtMS41NjIsMy42MzYtMi40MjIsNS44NDQtMi40MjJzNC4yODQsMC44Niw1Ljg0NSwyLjQyMiAgIGMxLjU2MiwxLjU2MiwyLjQyMiwzLjYzOCwyLjQyMiw1Ljg0NXMtMC44NTksNC4yODMtMi40MjIsNS44NDZjLTEuNTYyLDEuNTYyLTMuNjM2LDIuNDItNS44NDUsMi40MlM3Ljk4MSwxOS42NzIsNi40MjIsMTguMTExeiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojN0E3Qjg1IiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCI+PC9wYXRoPgo8L2c+PC9nPiA8L3N2Zz4=);
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: 5px center;
    width: 100%;
    font-size: 90%;
}

.options li.textFilter .search:focus {
    border-color: var(--blue);
}

.options li.textFilter a {
    fill: #7a7b85;
    position: relative;
    left: -25px;
    top: 5px;
}

.options li.textFilter a:hover{
    fill: var(--blue);
    cursor: pointer;
}

.options li.textFilter a svg {
    width: 13px;
}

table th {
    font-weight: bold;
}

table.logs .logTime {
    min-width: 190px;
    max-width: 190px;
    width: 190px;
}

.patroni span {
    color: #4f9bd8;
    background: #4f9bd840;
}

.postgres span {
    color: #336791;
    background: #33679140;
}

table.logs .userName {
    min-width: 70px;
    max-width: 70px;
    width: 70px;
    padding: 0 10px;
}

table.logs .databaseName {
    min-width: 110px;
    max-width: 110px;
    width: 110px;
    padding: 0 10px;
}

table.logs .processId {
    min-width: 110px;
    max-width: 110px;
    width: 110px;
    padding: 0 10px;
}

table.logs .connectionFrom {
    min-width: 160px;
    max-width: 160px;
    width: 160px;
    padding: 0 10px;
}

table.logs .applicationName {
    min-width: 120px;
    max-width: 120px;
    width: 120px;
    padding: 0 10px;
}

table.logs .logType {
    min-width: 100px;
    max-width: 100px;
    width: 100px;
}

table.logs .errorLevel {
    min-width: 120px;
    max-width: 120px;
    width: 120px;
}

table.logs .role {
    min-width: 100px;
    max-width: 100px;
    width: 100px;
}

td.errorLevel > span {
    text-transform: capitalize;
    display: inline-block;
    width: 70px;
    padding: 3px 0;
    font-size: 11px;
    border-radius: 10px;
    font-weight: bold;
}

td.errorLevel.INFO > span {
    color: #03D803;
    background: #00F50040;
}

td.errorLevel.DEBUG > span {
    color: #1ACE97;
    background: #21E6AA40;
}

td.errorLevel.LOG > span {
    color: #4D4F5C;
    background: #4D4F5C40;
}

.darkmode td.errorLevel.LOG > span {
    color: #F0F0F1;
    background: #F0F0F140;
}

td.errorLevel.NOTICE > span {
    color: #228BDE;
    background: #228BDE40;
}

td.errorLevel.WARNING > span {
    color: #E6C50D;
    background: #E6C50D40;
}

td.errorLevel.ERROR > span {
    color: #FF8900;
    background: #FF890040;
}

td.errorLevel.PANIC > span, td.errorLevel.CRITICAL > span {
    color: #FC373E;
    background: #FC373E40;
}

td.errorLevel.FATAL > span {
    color: #AC42FA;
    background: #AC42FA40;
}

td.errorLevel.NOTSET > span {
    color: #7A7B85;
    background: #7A7B8540;
}

td.label.role span {
    width: 80px;
}

td.role.Primary span {
    color: #fff;
    background: #020E1466;
}

.darkmode td.role.Primary span  {
    color: #020E14;
    background: #ffffff66;
}

td.role.Replica span {
    color: #4D4F5C;
    background: #4D4F5C66;
}

.darkmode td.role.Replica span  {
    color: #F0F0F1;
    background: #F0F0F166;
}

td.role.Promote span  {
    color: #7A7B85;
    background: #7A7B8566;
}

.darkmode td.role.Promote span  {
    color: #D3D3D6;
    background: #D3D3D666;
}

td.role.Demote span  {
    color: #7A7B85;
    background: #A6A7AE66;
}

.darkmode td.role.Demote span  {
    color: #A6A7AE;
    background: #A6A7AE66;
}

td.role.Uninitialized  span {
    color: #7A7B85;
    background: #D3D3D666;
    border: 1px solid #A6A7AE;
}

.darkmode td.role.Uninitialized span  {
    color: #7A7B85;
    background: #7A7B8566;
    border: 1px solid #A6A7AE;
}

td.role.Standby span {
    color: #777;
    background: rgba(211, 211, 214, 0.2);
    border: 1px solid #A6A7AE;
}

.darkmode td.role.Standby span {
    color: #A6A7AE;
    background: rgba(122, 123, 133, 0.2);
    border: 1px solid #A6A7AE;
}

td.operation> span {
    display: inline-block;
    width: 90px;
    padding: 3px 0;
    font-size: 11px;
    border-radius: 10px;
    font-weight: bold;
    text-align: center;
}

td.operation.Authentication > span {
    color: #Ac42Fa;
    background-color: #Ac42Fa1A;
}

td.operation.Idle > span {
    color: #ff2600;
    background-color: #ff26001A;
}

td.operation.Select > span {
    color: #de9826;
    background-color: #fcc1201A;
}

td.operation.Set > span {
    color: #03cc03;
    background-color: #00f9001A;
}

td.operation.Do > span {
    color: #0099f4;
    background-color: #0099f41A;
}


td.operation.Reset > span {
    color: #4d4f5c;
    background-color: #4d4f5c1A;
}

.darkmode td.operation.Reset > span {
        color: #a5a5a5;
        background-color: #f5f5f51A;
    }

#log .filter, #log .calendar, #log .visibleColumns, #log .paginator {
    float: right;
    position: relative;
    width: auto;
}

#log .calendar {
    text-align: center;
    display: inline-block;
    padding: 0 5px;
    margin-left: 25px;
    border: 1px solid var(--gray2);
    border-radius: 6px;
    height: 30px;
    line-height: 29px;
    color: var(--gray4);
}

#log .calendar li {
    display: inline;
    text-align: center;
}

#log .calendar li span {
    width: 50px;
    display: inline-block;
    border-right: 1px solid var(--gray2);
    height: 29px;
    overflow: hidden;
}

#log .calendar li:last-child span {
    border: none;
}

#datePicker {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.toggle.open > #datePicker {
    display: none;
}

.daterangepicker:not(.single) {
    font-family: "Nunito", sans-serif !important;
    border-radius: 6px !important;
    border-color: var(--gray1);
    box-shadow: 0 0 20px rgba(0,0,0,.05);
    padding: 20px !important;
}

.daterangepicker tbody {
    color: var(--gray5);
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
    color: #ccc !important;
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table tbody td {
    padding: 5px;
    width: 35px;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #00adb5 !important;
}

.daterangepicker td.in-range {
    background: #fef0f1;
}

.daterangepicker .calendar-table tr {
    background: transparent;
}

.daterangepicker.show-calendar .drp-calendar {
    margin-bottom: 10px;
}

.daterangepicker td.available:not(.in-range):hover, .daterangepicker th.available:hover, .daterangepicker td.start-date.end-date {
    border-radius: 100% !important;

}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
    width: 30px !important;
    height: 30px;
    -webkit-appearance: none;
    text-align: center;
    appearance: none;
    border-radius: 100%;
    padding-left: 7px !important;
    font-size: 11px !important;
    line-height: 22px;
    background: #fafafa;
    color: var(--gray4);
    cursor: pointer;
}

.daterangepicker .drp-buttons .btn {
    border-radius: 6px;
    padding: 5px 20px 5px !important;
    font-size: 11px;
    font-weight: 300;
    font-family: "Nunito", "Helvetica", "Arial", sans-serif;
    font-weight: normal !important;
}

.daterangepicker .drp-buttons {
    /*padding-top: 0 !important;*/
    border-color: var(--gray2);
}

.daterangepicker:before, .daterangepicker:after, .daterangepicker .drp-selected {
    display: none !important;
}

td.today.available {
    font-weight: bold;
    color: #00adb5;
}

.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
    border-color: #999 !important;
}

.daterangepicker .calendar-table, .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
    background: transparent !important;
    border-color: transparent !important;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
    color: var(--gray3) !important;
}

.daterangepicker .calendar-table th.month {
    font-size: 13px;
    color: var(--gray4);
}

.daterangepicker td.available:not(.off):not(.in-range):not(.active) {
    color: var(--gray5);
}

.daterangepicker .calendar-time {
    border-top: 1px solid var(--gray1);
    padding-top: 20px;
    margin-top: 10px !important;
    
}

/*TABLE YAML*/

tr.logInfo {
    position: relative;
}

table.logs tr.base:hover:before {
    content: "";
    border: 1px solid var(--blue);
    width: 5px;
    display: inline-block;
    position: absolute;
    left: 5px;
    top: 17px;
}

tr.logInfo.open:before {
    width: 5px;
    height: calc(100% - 45px);
    position: absolute;
    left: 5px;
    top: 17px;
    border: 2px solid var(--blue);
    content: " ";
    border-right: 0;
}

/* Logs & Filters */

table tr.no-results td {
    padding: 50px 0;
    text-align: center;
}

td.hasTooltip, span.hasTooltip {
    /* overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
    position: relative;
}

td.hasTooltip > span, span.hasTooltip > span {
    position: absolute;
    left: 20px;
    right: 5px;
    top: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.extensionsList .hasTooltip > span {
    display: inline-block;
    position: relative;
    width: 200px;
    left: 0;
    top: 7px;
}

td.hasTooltip.textRight > span {
    left: 20px;
    right: 10px;
}

.hasTooltip .auxTooltip {
    visibility: hidden;
    position: fixed;
    white-space: nowrap;
    display: block;
    top: 0;
    top: 1000vh;
}

.options label.active span {
    color: #fff;
}

#logTooltip.show, #nameTooltip.show {
    position: fixed;
    background: #fff;
    padding: 20px 25px;
    border-radius: 5px;
    box-shadow: 0 10px 20px rgba(0,0,0,.1);
    border: 1px solid;
    z-index: 10;
}

span.closeLog {
    font-size: 9px;
    line-height: 17px;
    text-transform: uppercase;
    border-radius: 4px;
    margin-left: 10px;
    position: relative;
    top: -1px;
    cursor: pointer;
    width: 18px;
    height: 18px;
    display: inline-block;
    text-align: center;
    padding: 0;
    color: var(--blue);
    border: 1px solid var(--blue);
}

span.closeLog:hover {
    background: var(--blue);
    color: #fff;
}

.filter.columns input[type="checkbox"]:checked:after {
    content: " ";
    border: 2px solid var(--blue);
    width: 8px;
    height: 3px;
    display: block;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
    margin: 2px;
    border-radius: 1px;
}

.filter.columns input[type="checkbox"] {
    right: 3px;
    top: 2px;
    left: auto;
    width: 15px;
    height: 15px;
    margin: 0;
    border: 1px solid var(--gray2);
    border-radius: 3px;
    background: transparent !important;
}

.filter.columns label {
    background: transparent;
    border: 1px solid var(--gray2);
    border-radius: 3px;
    width: 100%;
    margin: 0;
}

.filter.columns li.column {
    width: 33.33%;
    float: left;
    padding: 0 5px;
}

.filter.columns:not(.filters) li.column {
    width: 50%;
}

.filter.columns:not(.filters) ul.options {
    padding: 20px 10px 15px;
    width: 340px;
}

.filter.open .options {
    display: block;
}

.filter span.title {
    font-weight: bold;
    display: block;
    border-bottom: 1px solid var(--borderColor);
    width: 100%;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

ul.options ul.options {
    position: initial;
    padding: 0;
    border: 0;
    margin: 0 -5px;
    width: calc(100% + 10px);
}


.daterangepicker button.cancelBtn {
    float: right;
    color: var(--blue);
    background: transparent;
}

.filter hr {
    float: none;
    opacity: .5;
}

.toolbar .btn {
    padding: 7px 10px;
    margin: 0 2px;
    border: 1px solid var(--blue);
}

.toolbar a.addClusterBackup {
    float: right;
    margin-left: 10px;
}

.filter select.active {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgMTEgNiI+PHBhdGggZD0iTTQuNzYzLjhBMSwxLDAsMCwxLDYuMjM3LjhsMy4yMjcsMy41MkExLDEsMCwwLDEsOC43MjcsNkgyLjI3M2ExLDEsMCwwLDEtLjczNy0xLjY3NloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExIDYpIHJvdGF0ZSgxODApIiBmaWxsPSIjZmZmIi8+PC9zdmc+")
}

.darkmode .filter select.active {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgMTEgNiI+PHBhdGggZD0iTTQuNzYzLjhBMSwxLDAsMCwxLDYuMjM3LjhsMy4yMjcsMy41MkExLDEsMCwwLDEsOC43MjcsNkgyLjI3M2ExLDEsMCwwLDEtLjczNy0xLjY3NloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExIDYpIHJvdGF0ZSgxODApIiBmaWxsPSIjMTcxNzE3Ii8+PC9zdmc+")
}

@media screen and (min-width: 1920px) {
    table.logs th.logMessage, table.logs td.logMessage {
        min-width: 450px;
        width: calc(80vw - 1400px);
        max-width: calc(80vw - 1400px);
    }
}

@media screen and (max-width: 1500px) {
    table.logs th.logMessage, table.logs td.logMessage { 
        min-width: 240px;
    }
}


/* Backups YAML */

table.backups td.timestamp, table.backups tr.details > td{
    position: relative;
}

tr.details:not(.Failed).open > td:first-child:before {
    width: 3px;
    content: " ";
    background: transparent;
    height: calc(100% + 5px);
    left: 10px;
    position: absolute;
    top: -20px;
    border: 2px solid var(--blue);
    border-right: 0;
}

tr.controlData a {
    cursor: pointer;
    color: var(--blue);
    display: block;
}

/* Tooltips for table height */
table.pgConfig th.postgresVersion {
    width: 60px;
}

#backup .retention {
    width: 100px;
}

#backup .compression {
    width: 180px;
}

#backup .storageType {
    width: 125px;
} 

table.profiles td.inlineList svg {
    width: 14px;
}

table.profiles td.inlineList svg path {
    fill: var(--blue);
}

table.profiles td.inlineList svg:hover path {
    fill: var(--lblue);
}

/*Clone*/

#nav #clone, #restartCluster {
    display: none;
    position: fixed;
    background: var(--bgColor);
    padding: 10px 20px;
    border: 1px solid var(--borderColor);
    border-radius: 10px;
    box-shadow: 0 0px 20px rgba(0,0,0,.05);
    margin-left: 70px;
    line-height: 1;
    width: 320px;
    top: 57px;
    right: 30px;
}

#nav #clone.show {
    display: block;
}

#clone form {
    max-width: 320px;
    padding: 15px 0;
    width: 280px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}


/* Extra Styling | June 15, 2020 */

table.pgConfig.profiles td.actions a:first-of-type {
    display: inline-block;
}

tr.details.pgConfig.open div {
    width: 49%;
    float: left;
    display: block;
    margin-bottom: 10px;
    margin-top: -10px;
} 

table.pgConfig tr.base.open td.parameters, table.pgConfig tr.base.open td.pgVersion, table.poolConfig tr.base.open td.parameters, table tr.open .fontZero {
    font-size: 0;
}

td.usedOn {
    padding: 0 !important;
}

td.usedOn li {
    list-style: none;
    height: 41px;
    vertical-align: middle;
    width: 100%;
    border-bottom: 1px solid #f0f0f1;
    padding-top: 12px;
    padding-left: 10px;
}

td.usedOn li:last-child {
    border-bottom: 0;
}

table tr.details .configurationDetails a {
    float: right;
    padding: 2px 14px;
}

table.pgConfig tr.details a svg path, table.poolConfig tr.details a svg path {
    fill: var(--blue);
}

table.pgConfig tr.details .configurationDetails table td.label, table.poolConfig tr.details .configurationDetails table td.label {
    padding-right: 10px;
    width: 140px;
}

tr.details.pgConfig .title {
    padding: 5px 27px 10px;
    display: inline-block;
    font-weight: bold;
}

.paramDetails table {
    margin-bottom: 30px;
    border: 0;
}

.paramDetails a {
    float: right;
    position: relative;
    z-index: 1;
    top: 1px;
    margin-left: 10px;
}

.paramDetails td.hasTooltip > span {
    line-height: 40px;
    left: 10px;
}

.paramDetails .grayscale {
    opacity: .3;
    cursor: initial;
}

.paramDetails .helpTooltip, .crdDetails .helpTooltip {
    top: 2px;
}

.paramDetails a:not(:hover) svg path {
    fill: var(--textColor);
    opacity: .5;
}

.paramDetails a:not(.grayscale):hover svg path {
    fill: var(--blue);
}

tr.details.pgConfig.open > td:first-child {
    position: relative;
}

table.pgConfig tr.base.open td:before, table.poolConfig tr.base.open td:before {
    border: 0;
}

.paranDetails td.paramValue a {
    padding: 0;
}

.paramDetails table td {
    padding: 10px;
    padding-right: 14px;
    min-height: 40px;
    height: auto;
}

.paramDetails table tbody {
    max-height: 33vh;
    width: 100%;
    position: relative;
    display: inline-block;
    overflow-y: auto;
    overflow-x: hidden;
}

tr.details .paramDetails table .label {
    padding-right: 10px;
}

.paramDetails tr {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}


.paramDetails tbody td {
    border-top: 0 !important;
}

table.pgConfig .paramDetails tbody td:last-child {
    border-left: 0;
    padding-right: 35px;
}

table.pgConfig tr.details .configurationDetails table, table.poolConfig tr.details .configurationDetails table {
    margin-left: 0 !important;
}

tr.details.pgConfig .configurationDetails .title, tr.details.poolConfig .configurationDetails .title {
    padding-left: 15px;
}

table.pgConfig tr.open td.configName, table.poolConfig tr.open td.configName {
    position: absolute;
    width: calc(100% - 100px);
}

td.inlineList ul {
    list-style: none;
}

td.inlineList li {
    display: inline-block;
}

td.inlineList li:not(:last-child):after {
    content: ', ';
}

.configurationDetails span.title {
    font-weight: bold;
    display: inline-block;
    padding: 10px 15px;
}

/* 404 Not Found */
#notFound {
    text-align: center;
    padding: 100px;
}

/*Tooltips*/
.contentTooltip {
    position: fixed;
    top: 50px;
    left: 350px;
    background: rgba(255,255,255,0.8);
    width: calc(100vw - 350px);
    height: calc(100vh - 50px);
    display: none;
    align-items: center;
    opacity: 0;
    transition: opacity .2s ease-in;
}

.collapsed .contentTooltip {
    width: calc(100vw - 50px);
    left: 50px;
}

.collapsed .noSidebar .contentTooltip {
    width: 100vw;
    left: 0;
}

.contentTooltip.show, .contentTooltip.visible {
    display: flex !important;
    opacity: 1;
    z-index: 4;
    transition: opacity .4s ease-out;
}

.contentTooltip > .close {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.contentTooltip .info {
    display: block;
    float: none;
    margin: 0 auto;
    background: #fff;
    padding: 30px;
    border: 1px solid var(--gray1);
    border-radius: 10px;
    max-width: 75%;
    max-height: 70vh;
    position: relative;
    z-index: 2;
    min-width: 400px;
}

.contentTooltip .content {
    max-height: 60vh;
    display: inline-block;
    overflow-y: auto;
    min-height: 100px;
    width: 100%;
}

.contentTooltip .info span.close {
    position: absolute;
    color: var(--blue);
    font-weight: bold;
    cursor: pointer;
    top: -20px;
    right: 10px;
}

.contentTooltip .content pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    padding-right: 15px;
}

.contentTooltip .warning svg {
    position: initial;
    margin: 0 0 10px;
    fill: var(--orange);
    width: 25px;
}

.contentTooltip .warning, .warning.orange {
    margin-bottom: 0;
    border-color: var(--orange) !important;
    background: rgb(255 87 34 / 10%);
}

.contentTooltip .warning p {
    padding-left: 0;
}

.contentTooltip .info.warning span.close {
    color: var(--orange);
}

.contentTooltip table {
    width: 100%;
}

/* Hide other tooltips when a new one gets opened */
.contentTooltip.show:not(:last-child) { 
    display: none !important;
}

.warning ul {
    padding-left: 20px;
}

.warning li {
    margin: 10px 0 0 0;
}

/*Help Tooltips*/
.helpTooltip {
    display: inline-block;
    content: "";
    position: relative;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PHBhdGggZmlsbD0iIzdBN0I4NSIgZD0iTTcuNSwwQzMuNCwwLDAsMy40LDAsNy41QzAsMTEuNiwzLjQsMTUsNy41LDE1UzE1LDExLjYsMTUsNy41QzE1LDMuNCwxMS42LDAsNy41LDB6IE04LDExLjJjLTAuMiwwLjEtMC40LDAuMi0wLjYsMC4yaDBjLTAuMiwwLTAuNC0wLjEtMC42LTAuMmMtMC4yLTAuMi0wLjMtMC40LTAuMy0wLjdjMC0wLjIsMC4xLTAuNSwwLjMtMC42QzcsOS43LDcuMiw5LjcsNy40LDkuN2MwLjIsMCwwLjQsMC4xLDAuNiwwLjNjMC4yLDAuMiwwLjMsMC40LDAuMiwwLjZDOC4zLDEwLjgsOC4yLDExLDgsMTEuMnogTTkuOCw2LjZDOS43LDYuOCw5LjYsNyw5LjQsNy4xQzkuMyw3LjMsOSw3LjUsOC42LDcuOUM4LjUsOCw4LjQsOC4xLDguNCw4LjFjMCwwLjEtMC4xLDAuMS0wLjEsMC4yYzAsMCwwLDAuMS0wLjEsMC4yYzAsMC4xLDAsMC4yLTAuMSwwLjNDOC4xLDksOCw5LjEsNy45LDkuMkM3LjcsOS4zLDcuNiw5LjQsNy40LDkuNGgwQzcuMiw5LjQsNyw5LjMsNi44LDkuMkM2LjcsOSw2LjYsOC44LDYuNiw4LjZjMC0wLjMsMC0wLjUsMC4xLTAuN0M2LjgsNy42LDcsNy41LDcuMSw3LjNjMC4yLTAuMiwwLjQtMC40LDAuNi0wLjVDNy45LDYuNiw4LDYuNCw4LjEsNi40YzAuMS0wLjEsMC4xLTAuMiwwLjItMC4zYzAtMC4xLDAuMS0wLjIsMC4xLTAuM2MwLTAuMi0wLjEtMC40LTAuMi0wLjVDOCw1LjEsNy44LDUuMSw3LjUsNS4xQzcuMyw1LDcuMSw1LjEsNi45LDUuM0M2LjcsNS41LDYuNiw1LjcsNi41LDZDNi40LDYuNCw2LjEsNi42LDUuNyw2LjZoMGMtMC4yLDAtMC40LTAuMS0wLjUtMC4yQzUsNi4zLDQuOSw2LjEsNC45LDUuOXYwYzAtMC40LDAuMS0wLjcsMC4zLTFjMC4yLTAuMywwLjUtMC42LDAuOS0wLjhjMC40LTAuMiwwLjktMC4zLDEuNC0wLjNDOCwzLjcsOC40LDMuOCw4LjgsNGMwLjQsMC4yLDAuNywwLjQsMC45LDAuN2MwLjIsMC4zLDAuMywwLjcsMC4zLDFDMTAsNi4xLDEwLDYuMyw5LjgsNi42eiIvPjwvc3ZnPg==);
    width: 13px;
    height: 13px;
    top: 2px;    
    cursor: pointer;
}

thead.sort .helpTooltip {
    margin-left: 5px;
}

thead:not(.sort) th:not(.label) .helpTooltip {
    right: -10px;
}

td.label .helpTooltip, td ul.tableCells .helpTooltip {
    float: right;
    margin-left: 10px;
}

#helpTooltip {
    position: fixed;
    background: #fff;
    border: 1px solid var(--gray2);
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
    width: auto;
    display: none;
    padding: 10px 15px;
    border-radius: 3px;
    max-width: 600px;
    overflow-y: auto;
    color: var(--gray4);
    font-weight: 300;
}

#helpTooltip br {
    display: none;
}

#helpTooltip ul {
    padding-left: 15px;
    margin: 10px 0 15px;
}

#helpTooltip li {
    margin-bottom: 3px;
}

#helpTooltip * + p {
    margin-top: 10px;
}

/* Secret Toggle */
.toggleSecret {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    border-top: 1px solid #f0f0f1;
    border-left: 1px solid #f0f0f1;
    border-top-left-radius: 10px;
    cursor: pointer;
}

.toggleSecret svg {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 6px;
    left: 6px;
}

.toggleSecret svg path {
    fill: var(--gray2);
}

.connectionInfo a:hover svg path{
    fill: var(--baseLightColor);
    cursor: pointer;
}

.blur {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    padding: 5px;
}

.blur.show {
    -webkit-touch-callout: initial; /* iOS Safari */
    -webkit-user-select: initial; /* Safari */
     -khtml-user-select: initial; /* Konqueror HTML */
       -moz-user-select: initial; /* Old versions of Firefox */
        -ms-user-select: initial; /* Internet Explorer/Edge */
            user-select: initial; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);
    filter: blur(0);
}

/* Form Accordions */
.accordion .fields {
    display: none;
}

.form .accordion > .header:not(.open), .form fieldset:not(.accordion) .header:last-child {
    border: 0;
}

fieldset .header button {
    float: right;
    font-size: 12px;
}

fieldset .section {
    width: 100%;
    padding: 5px 25px;
    border-bottom: 1px solid var(--borderColor);
    margin-bottom: 20px;
    display: inline-block;
}

section .section fieldset {
    padding: 20px 20px 0;
}

fieldset fieldset .section {
    width: calc(100% + 50px);
    margin-left: -25px;
}

fieldset fieldset .section .section + .fieldsetFooter {
    margin-top: -20px;
    border-top: 0;
}

fieldset .section:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

fieldset .section:not(:last-child) {
    padding-bottom: 25px;
}

fieldset .section > .fieldsetFooter:last-child {
    margin-bottom: 20px;
}

fieldset.accordion {
    padding: 0;
}

fieldset.accordion > .header {
    padding: 15px 20px 15px;
    margin-bottom: 0;
    cursor: pointer;
    /* transition: all .3s ease-in; */
}

fieldset.accordion .fields {
    margin-top: 15px;
    padding: 0 20px;
}

.configurationDetails table + table {
    margin-top: 20px;
}

.form .header:last-child {
    border: 0;
}

.fields > fieldset {
    padding: 20px 20px 10px;
    overflow: hidden;
}

.fields:not(.repeater) > fieldset:not(:last-of-type) {
    border-bottom: 1px solid var(--borderColor);
    margin-bottom: 15px;
}

.fields > fieldset:last-of-type {
    margin-bottom: 10px;
}

.fieldsetFooter {
    padding: 20px 25px;
    border: 1px solid var(--borderColor);
    border-top: 0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    display: flex;
}

.header + .fieldsetFooter, .fieldsetFooter.topBorder {
    border-radius: 5px;
}

.repeater > fieldset {
    padding-bottom: 25px;
    margin-bottom: 0;
    border-radius: 0;
}

.repeater > fieldset:first-of-type {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.repeater > fieldset + fieldset {
    border-top: 0;
}

/*Tables Overflow*/
table.tolerations {
    max-height: 240px;
    overflow: auto;
    display: block;
    border-top: 1px solid #f0f0f1;
}

table.tolerations tbody {
    display: inline-table;
    width: 100%;
}

table.tolerations tbody, table.tolerations tbody td {
    border-top: 0 !important;
}

a.disabled {
    pointer-events: none;
    cursor: not-allowed !important;
    filter: grayscale(1);
    opacity: .5;
}

.helpTooltip.alert, .darkmode .helpTooltip.alert {
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7Ij4KCTxwYXRoIGZpbGw9IiMzNkE4RkYiIGQ9Ik0yOSwyOUgxMWMtMC40LDAtMC43LTAuMi0wLjktMC41Yy0wLjItMC4zLTAuMi0wLjcsMC0xbDktMTZjMC4zLTAuNSwwLjktMC42LDEuNC0wLjNjMC4xLDAuMSwwLjIsMC4yLDAuMywwLjMKCQlsOSwxNmMwLjIsMC4zLDAuMiwwLjcsMCwxQzI5LjcsMjguOCwyOS40LDI5LDI5LDI5eiBNMTIuOCwyNi45aDE0LjVMMjAsMTQuMUwxMi44LDI2Ljl6Ii8+Cgk8cGF0aCBmaWxsPSIjMzZBOEZGIiBkPSJNMTkuOSwxNy4xSDIwYzAuNiwwLDEsMC40LDEsMC45djMuNWMwLDAuNS0wLjQsMC45LTAuOSwwLjloLTAuMmMtMC41LDAtMC45LTAuNC0wLjktMC45VjE4CgkJQzE5LDE3LjUsMTkuNCwxNy4xLDE5LjksMTcuMXoiLz4KCTxwYXRoIGZpbGw9IiMzNkE4RkYiIGQ9Ik0yMCwyMy40TDIwLDIzLjRjMC42LDAsMSwwLjQsMSwxbDAsMGMwLDAuNi0wLjQsMS0xLDFsMCwwYy0wLjYsMC0xLTAuNC0xLTFsMCwwQzE5LDIzLjksMTkuNCwyMy40LDIwLDIzLjR6IgoJCS8+Cjwvc3ZnPg==") center no-repeat !important;
    height: 15px;
    width: 15px;
    top: 5px;
    left: 5px;
    background-size: 28px !important;
}

.helpTooltip.alert svg {
    width: 13px;
}

/* Dashboards */
.overview {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.card {
    border: 1px solid var(--borderColor);
    border-radius: 10px;
    width: 30%;
    height: 250px;
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 4%;
}

.card:not(:nth-child(3n+0)):not(:last-child) {
    margin-right: 5%;
}

.card a {
    color: var(--textColor);
}

.card th {
    height: 50px;
}

.card table {
    margin-bottom: 0;
    border-collapse: collapse;
}

.card thead:after {
    top: 50px;
}

.card th {
    padding-left: 15px;
}

.card td {
    padding-left: 0;
}

.card .crdName svg, .card .crdName span {
    margin-top: 0;
    vertical-align: middle;
}

.card tbody {
    border: none;
}

.card .icon {
    width: 50px;
    padding: 5px 0 0 10px;
}

td.icon.invisible a, button.icon {
    position: relative;
    display: inline-block;
    top: -2px;
    height: 14px;
    width: 14px;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PGcgZmlsbD0iIzM2QThGRiI+PHBhdGggZD0iTS4zMDEgMTQuN2MtLjItLjItLjMtLjQtLjMtLjdWMy4yYzAtLjYuNS0xIDEtMWg1LjRjLjYgMCAxIC41IDEgMXMtLjUgMS0xIDFoLTQuNFYxM2g4LjhWOC42YzAtLjYuNS0xIDEtMXMxIC41IDEgMVYxNGMwIC42LS41IDEtMSAxaC0xMC44Yy0uMyAwLS41LS4xLS43LS4zeiIvPjxwYXRoIGQ9Ik0xNS4wMDEgNi40VjFjMC0uNi0uNS0xLTEtMWgtNS40Yy0uNiAwLTEgLjQtMSAxcy40IDEgMSAxaDIuOWwtNS4xIDUuMWMtLjQuNC0uNCAxIDAgMS40LjQuNCAxIC40IDEuNCAwbDUuMi01djIuOWMwIC42LjQgMSAxIDEgLjUuMSAxLS40IDEtMXoiLz48L2c+PC9zdmc+)  no-repeat !important;
}

td.icon.invisible a:hover {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxNSI+PGcgZmlsbD0iIzVhZDJmZiI+PHBhdGggZD0iTS4zMDEgMTQuN2MtLjItLjItLjMtLjQtLjMtLjdWMy4yYzAtLjYuNS0xIDEtMWg1LjRjLjYgMCAxIC41IDEgMXMtLjUgMS0xIDFoLTQuNFYxM2g4LjhWOC42YzAtLjYuNS0xIDEtMXMxIC41IDEgMVYxNGMwIC42LS41IDEtMSAxaC0xMC44Yy0uMyAwLS41LS4xLS43LS4zeiIvPjxwYXRoIGQ9Ik0xNS4wMDEgNi40VjFjMC0uNi0uNS0xLTEtMWgtNS40Yy0uNiAwLTEgLjQtMSAxcy40IDEgMSAxaDIuOWwtNS4xIDUuMWMtLjQuNC0uNCAxIDAgMS40LjQuNCAxIC40IDEuNCAwbDUuMi01djIuOWMwIC42LjQgMSAxIDEgLjUuMSAxLS40IDEtMXoiLz48L2c+PC9zdmc+)  no-repeat !important;
}

th.icon.invisible a:hover svg g {
    fill: var(--baseLightColor);
}

.card  thead:hover .icon, .card tr:hover .icon {
    opacity: 1;
}

i.length {
    background: var(--inputBg);
    display: inline-block;
    width: 17px;
    text-align: center;
    height: 17px;
    line-height: 16px;
    font-style: normal;
    border-radius: 100%;
    font-size: 75%;
    border: 1px solid var(--borderColor);
    margin-left: 5px;
    position: absolute;
}

.darkmode i.length {
    border-color: var(--inputBg);
    background: var(--borderColor);
}