:root {
    /** define global shared variables */
    /* note: case matters, only use lowercase */


    --primary-color: #144A75; /* Default VSI dark blue */
    --primary-color-light: #1B66A1;
    --primary-color-very-light: #E1EAF3;
}




/* originally in vsi_datatables.css */
* {
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 13px;
}

.mobile-only {
    display: none !important;
}

@media screen and (max-width: 1100px) {
    .non-mobile-only {
        display: none !important;
    }

    .mobile-only {
        display: initial !important;
    }

    .vsi-menu-current-page {
        background-color: rgba(255,255,0,0.5);
    }

    li > a {
        color: black !important;
    }

    .simpleButton {
        display: inline-block !important;
    }

    /*overriding these attributes for mobile, repeating the class makes it take priority*/
    .vsi-right-side-section.vsi-right-side-section.vsi-right-side-section {
        left: 0;
        width: 100%;
        position: static;
    }
}

html {
    height: 100%;
}

body {
    height: 100%;
}

.imageLogo {
    width: 225px;
}

table, td {
    border-collapse: collapse;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.bold {
    font-weight: bold;
}

.bordered {
    border: 1px solid black;
}

.padded {
    padding: 4px;
}

.centered{
    text-align:center;
}

.italic{
    font-style: italic;
}


.vsi-fill-screen {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0px;
    padding: 0px;
}

.vsi-fill-parent {
    position: relative;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
}


.vsi-left-side-bar-content-section {
    position: relative;
}

.vsi-main-content-header-logo-for-mobile {
    max-width: 75px;
    max-height: 30px;
    float: left;
}

.vsi-main-content-header-menu-for-mobile {
    margin-left: 10px;
    margin-right: 10px;
}

.vsi-left-side-bar-section {
    width: auto;
}

.vsi-right-side-section {
    width: calc(100% - 250px);
    /*the following will be overridden in mobile see media tag above*/
    position: absolute;
    left: 250px;
    top: 0px;
    bottom: 0px;
}

#vsi-left-side-bar-for-non-mobile {
    width: 250px !important;
}

.navigation-menu {
    width: 100%;
}

.vsi-align-left {
    float: left !important;
}

.vsi-align-center {
    text-align: center;
}

.vsi-align-right {
    float: right !important;
}

.vsi-left-side-bar-header {
    background: radial-gradient(var(--primary-color-light), var(--primary-color));
    text-align: center;
    height: 100px;
    border: 1px solid black;
}



.vsi-left-side-bar-header-company-title {
    font-size: 16px;
    font-weight: 100;
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: white;
}

.vsi-left-side-bar-content-section {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color); /* necessary since vsi-left-side-bar-header also has a border. If this wasn't included the menu will have a single white pixel border on the left and bottom */
    vertical-align: top;
}



.vsi-main-content-header-section {
    height: 50px;
    background-color: white;
    border-bottom: 1px solid var(--primary-color);
}

.vsi-main-content-header-menu-path {
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    margin-left: 0.5em;
}


.vsi-main-content-header-title {
    font-size: 34px;
    font-weight: 100;
    padding-left: 0.25em;
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--primary-color);
}

.vsi-main-content-header-title-icon {
    font-size: 26px;
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--primary-color);
    margin-left: 0.75em;
}

.vsi-main-content {
    box-sizing: border-box;
    padding: 0;
    border: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    padding: 4px;
}



/** datatable */

#datatable_placeholder {
    width: 100%;
    margin: auto;
}

.datatable_connectionErrorContainer {
    width: 100%;
    text-align: center;
    padding: 0.5em;
    padding-bottom: 1.0em;
}

.datatable_connectionError {
    color: red;
    font-weight: bold;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    background: white;
    padding: 0.5em;
}



/** vsi Main Content */

.vsi-main-content-header-login-details {
    color: #9ea6b9;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding-left: 20px;
    margin-right: 20px;
}
/* padding between login/logout button and the icon */
.vsi-main-content-header-login-details > a {
    margin-left: 0.5em;
}

.vsi-main-content-header-welcome {
    color: #888888;
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}


td.vsi-main-content-section {
    width: 100%;
    background-color: #f4f6fa;
}

.vsi-main-content-footer-section {
    height: 40px;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 13px;
    color: #676a6c;
    border-top: 1px solid black;
}


.vsi-main-content-footer-version {
    margin-left: 10px;
}

.vsi-main-content-footer-copyright {
}

.vsi-main-content-footer-right {
    margin-right: 10px;
}




/** vsi menu */

.vsi-menu-current-page {
    background-color: rgba(255,255,0,0.25);
}

.vsi-menu-item {
    /* can be overridden by projects that need bigger or smaller icons */
    /* Example: font-size: 1.5em; */
}

.vsi-mobile-menu {
    width: 250px;
    background-color: #f5f5f5;
    border: black 1px solid;
    border-radius: 5px;
    left: 5px;
}



/** list items */

li > a {
    color: #a7b1c2;
    font-weight: 200;
    padding: 14px 20px 14px 25px;
    position: relative;
    display: block;
    text-decoration: none;
    box-sizing: border-box;
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    overflow-x: hidden;
    width: 100%;
}

li > a:hover {
    color: white;
    background-color: rgba(0,0,0,0.1);
}

.mm-active {
    color: white;
    background-color: rgba(0,0,0,0.1);
}

ul {
    list-style: none;
    padding: 0px;
}

ul ul ul {
    margin-left: 30px;
}

ul {
    margin-left: 10px;
}

ul ul {
    margin-left: 20px;
}

.tab_header {
    font-size: 14px;
    font-weight: 100;
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    color: black;
}

.fullPage {
    background-color: white;
    position: relative;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
}


/** fancy buttons **/

.tightFancyButton {
    padding: 3px 12px;
    font-size: 12px;
}

.fancybutton, .fancyButton {
    font-size: 15px;
    padding: 6px 24px;
}

.fancybutton, .fancyButton, .tightFancyButton {
    background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
    background-color: #ffffff;
    border-radius: 6px;
    border: 1px solid black;
    display: inline-block;
    cursor: pointer;
    color: black;
    font-family: Arial;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0px 1px 0px #ffffff;
}
/* colors */
.fancybutton.red, .fancyButton.red, .tightFancyButton.red {
    background: linear-gradient(to bottom, #fc5050 5%, #ff8b8b 100%);
    color: black;
    text-shadow: 0px 1px 0px #e99090;
}

/* hover */
.fancybutton:hover, .fancyButton:hover, .tightFancyButton:hover {
    background: linear-gradient(to bottom, #d6d6d6 5%, #ffffff 100%);
}

.fancybutton:hover.red, .fancyButton:hover.red, .tightFancyButton:hover.red {
    background: linear-gradient(to bottom, #f99 5%, #fad5d5 100%);
}

/* disabled */
.fancybutton:disabled, .fancyButton:disabled, .tightFancyButton:disabled {
    cursor: default;
    text-shadow: none;
    box-shadow: none;
    color: gray;
    pointer-events: none;
    text-decoration: none;
    background-blend-mode: luminosity;
    border: 1px solid lightgray;
}

.fancybutton:active, .fancyButton:active, .tightFancyButton:active {
    position: relative;
    top: 1px;
}

/** fancy buttons end **/


.disabled {
    cursor: default;
    text-shadow: none;
    box-shadow: none;
    background: none !important;
    color: gray;
    pointer-events: none;
    text-decoration: none !important;
}

.simpleButton {
    display: inline-block;
    /* a solid invisible color needs to be included, otherwise the border is ignored */
    border: 1px solid #0000;
    cursor: pointer;
    color: #666666;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
}

.simpleButton:disabled {
    cursor: default;
    text-shadow: none;
    box-shadow: none;
    background: none !important;
}

.simpleButton:hover {
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    background-color: #FFFFCC;
}

.simpleButton.active {
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    background-color: yellow;
}

.select-style {
    border: 1px solid #ccc;
    width: 120px;
    border-radius: 3px;
    overflow: hidden;
}

.input-style {
    border: 1px solid #ccc;
    width: 120px;
    border-radius: 3px;
    overflow: hidden;
    padding-left: 2px;
}

.select-style select {
    padding: 5px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
}

.select-style select:focus {
    outline: none;
}

.hide-until-loaded {
    visibility: hidden;
}




radio-toolbar {
    margin: 10px;
}

.radio-toolbar input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.radio-toolbar label {
    display: inline-block;
    background-color: #ddd;
    padding: 10px 20px;
    font-family: sans-serif, Arial;
    font-size: 12px;
    border: 2px solid #444;
    border-radius: 4px;
}

.radio-toolbar label:hover {
    background-color: #dfd;
}

.radio-toolbar input[type="radio"]:focus + label {
    border: 2px dashed #444;
}

.radio-toolbar input[type="radio"]:checked + label {
    background-color: #bfb;
    border-color: #4c4;
}

.fancyLabel {
    font-family: sans-serif, Arial;
    font-size: 12px;
}

.fancyInput {
    font-family: sans-serif, Arial;
    font-size: 12px;
    background-color: white;
    border: 1px solid #999;
    border-radius: 3px;
    padding: 5px;
}

.fancyFont {
    font-family: sans-serif, Arial;
    font-size: 12px;
}

.largeFancyFont {
    font-family: sans-serif, Arial;
    font-size: 16px;
}

.select-css {
    display: block;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 700;
    color: #444;
    line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    width: 100%;
    max-width: 100%; /* useful when width is set to anything other than 100% */
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
        for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
        
    */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
    background-position: right .7em top 50%, 0 0;
    /* icon size, then gradient */
    background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
    display: none;
}
/* Hover style */
.select-css:hover {
    border-color: #888;
}
/* Focus style */
.select-css:focus {
    border-color: #aaa;
    /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222;
    outline: none;
}

/* Set options to normal weight */
.select-css option {
    font-weight: normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
    background-position: left .7em top 50%, 0 0;
    padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
    color: graytext;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

.select-css:disabled:hover, .select-css[aria-disabled=true] {
    border-color: #aaa;
}

.blackAndWhite {
    filter: grayscale(100%);
}

.midBlackAndWhite {
    filter: grayscale(60%);
}

.padded-table th,
.padded-table td {
    padding: 10px 10px 10px 10px;
}


/** styled table */

/* https://dev.to/dcodeyt/creating-beautiful-html-tables-with-css-428l */
.styled-table,
.tight-styled-table {
    border-collapse: collapse;
    margin: auto;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    border: 1px solid black;
}

.styled-table thead tr,
.tight-styled-table thead tr {
    background-color: white;
    color: black;
    text-align: center;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.tight-styled-table th,
.tight-styled-table td {
    padding-left: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 5px;
}

.styled-table tbody tr,
.tight-styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even),
.styled-table.even tbody tr,
.tight-styled-table tbody tr:nth-of-type(even),
.tight-styled-table.even tbody tr {
    background-color: #f3f3f3;
}

.styled-table tbody tr:nth-of-type(odd),
.styled-table.odd tbody tr,
.tight-styled-table tbody tr:nth-of-type(odd),
.tight-styled-table.odd tbody tr {
    background-color: #f7f7f7;
}

.styled-table tbody tr:last-of-type,
.tight-styled-table tbody tr:last-of-type {
    border-bottom: thin solid var(--primary-color);
}

.styled-table tbody tr.active-row,
.tight-styled-table tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}

/** end styled table */


.menu-blocker {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    opacity: 0.3;
    background-color: black;
    text-align: center;
    border-radius: 0px; /* added to override .vsi-mobile-menu */
}




/* pulsating text from: https://www.kevinleary.net/pulsating-css3-animations/ */
.pulsate {
    -webkit-animation: pulsate 5s ease-out;
    -webkit-animation-iteration-count: infinite;
    opacity: 0.5;
    font-weight: bold;
}

@-webkit-keyframes pulsate {
    0% {
        opacity: 0.5;
    }

    25% {
        opacity: 0.75;
    }

    50% {
        opacity: 1.0;
    }

    75% {
        opacity: 0.75;
    }

    100% {
        opacity: 0.5;
    }
}
/* end pulsating text*/



/* spin animation */
.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
/* end spin */



.highlighted {
    background-color: yellow;
}

.expandable {
    background-color: #eee;
    border: 1px solid #ddd;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-family: "Open Sans",Arial,Helvetica,sans-serif;
    font-size: 1rem;
    font-weight: normal;
    margin: 0;
    padding: 10px 15px;
    position: relative;
}

.expandable:hover {
    background-color: #ccc;
    cursor: pointer;
}

.expandable:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: white;
    position: absolute;
    top: 6px;
    right: 6px;
}

.expanded:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.expandable-content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
}

.content-expanded {
    display: block;
}

.content-expanded:hover {
    cursor: auto;
}

.tabcontrol > .steps > ul > li.current > a {
    font-weight: bold !important;
    color: black !important;
    opacity: 100%;
}

.tabcontrol > .steps > ul > li > a {
    color: #a7b1c2 !important;
    opacity: 70%;
}

/* Firefox */
html {
    scrollbar-color: rgba(0,0,0,0.25) rgba(255,255,255,0.5);
    scrollbar-width: thin;
}

/* WebKit and Chromiums */
::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background: rgba(255,255,255,0.5);
}

::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.25);
    height: 8px;
    width: 8px;
    -webkit-border-radius: 1ex;
}

::-webkit-scrollbar-track {
    background: rgb(255,255,255,0.25);
    border: 4px solid transparent;
    background-clip: content-box; /* THIS IS IMPORTANT */
}

::-webkit-scrollbar-corner {
    background: rgba(255,255,255,0.25);
}
/* End WebKit and Chromiums */


.buttonAsLink {
    font-family: "Verdana" sans-serif;
    font-size: 1em;
    text-align: left;
    color: blue;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    -moz-user-select: text;
    text-decoration: underline;
}

.fullScreenFrame {
    background-color: lightgray;
    border: 2px solid black;
    width: 100%;
    height: 100%;
    padding: 10px;
    margin: 10px;
}

.fullScreenInnerFrame {
    border: 2px solid black;
    height: 100%;
    display: flex;
    width: 100%;
    background-color: white;
}

.ticker {
    background-color: rgba(1,1,1,0.06);
    border: 1px solid rgba(1,1,1,0.5);
    margin: 2px;
    opacity: 0.0;
}

.ticker > ul {
    text-align: center;
    width: 100%;
}

.cytoHtmlLabel {
    background-color: white;
    text-align: center;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 8px !important;
    color: gray;
    border: 2px solid #a9a9a9;
    border-radius: 8px;
    padding: 5px;
    cursor: pointer;
}

.vsi_close_button {
    border-radius: 50%;
    padding: 0.5em;
    width: 30px;
    height: 30px;
    border: 2px solid black;
    color: black;
    position: relative;
}

.vsi_close_button:hover {
    border: 2px solid black;
    background-color: gray;
    color: #ffffff;
}

.vsi_close_button::before {
    content: " ";
    position: absolute;
    display: block;
    background-color: black;
    width: 2px;
    left: 12px;
    top: 5px;
    bottom: 5px;
    transform: rotate(45deg);
}

.vsi_close_button::after {
    content: " ";
    position: absolute;
    display: block;
    background-color: black;
    height: 2px;
    top: 12px;
    left: 5px;
    right: 5px;
    transform: rotate(45deg);
}


/* Font-Awesome */
.svg-inline--fa {
    /* this fixes Font-Awesome icons not scalling the same in 1.6 as they did in 1.5 */
    font-size: 1em;
}


/*
    Clearable text inputs
    source:  https://stackoverflow.com/questions/6258521/clear-icon-inside-input-text
*/
.clearable {
    background: #fff url(/Images/clearable_css.gif) no-repeat right -10px center;
    border: 1px solid #999;
    padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
    border-radius: 3px;
    transition: background 0.4s;
}

.clearable.x {
    background-position: right 5px center;
}
/* (jQ) Show icon */
.clearable.onX {
    cursor: pointer;
}
/* (jQ) hover cursor style */
.clearable::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}
/* Remove IE default X */

select2-search__field

.nameValuePairEditorTable tr:nth-child(even) {
    background-color: #E5E4E2;
}

.nameValuePairEditorTable tr:nth-child(odd) {
    background-color: #C0C0C0;
}

.width100 {
    width: 100%;
}

.lowerRightInfoBox {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: white;
    border: 1px solid black;
    padding: 20px;
    /*  width:200px;
  height:100px;*/
}

/**
    table fixed header
    source:  https://www.w3docs.com/snippets/html/how-to-create-a-table-with-a-fixed-header-and-scrollable-body.html
*/
.fixed_header {
    table-layout: fixed;
    border-collapse: collapse;
}

.fixed_header tbody {
    display: block;
    width: 100%;
    overflow: auto;
    height: 100px;
}

.fixed_header thead tr {
    display: block;
}

.fixed_header thead {
    background: black;
    color: #fff;
}

.fixed_header th,
.fixed_header td {
    padding: 5px;
    text-align: left;
}
/**
    end table fixed header
*/

.floatThead-wrapper {
    z-index: 5;
}

/*Source: https://www.w3schools.com/howto/howto_js_tabs.asp */
/**  TAB Styles*/
/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button, .tab span {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover, .tab span:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active, .tab span.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
/** END TAB Styles*/

.linkButton {
    background: none !important;
    border: none;
    padding: 0 !important;
    /*optional*/
    font-family: arial, sans-serif;
    /*input has OS specific font-family*/
    color: #069;
    text-decoration: underline;
    cursor: pointer;
}

textarea[readonly],
input[readonly] {
    background-color: lightgray;
    color: #404040;
    /* this is needed to match the default chrome/firefox border style, setting a bacakground color causes legacy/blocky CSS styles to be used */
    border: 1px solid gray;
    border-radius: 2px;
    /* these paddings are needed to make the height equal to non-readonly input fields (for same reason as above) */
    padding-bottom: 2px;
    padding-top: 2px;
}

.arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.rotation_right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.rotation_left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.rotation_up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.rotation_down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.hoverPointer:hover {
    cursor: pointer;
    border: 1px solid black;
}

/*source:https://stackoverflow.com/questions/4535963/how-can-i-add-an-unremovable-prefix-to-an-html-input-field*/
span.textbox {
    background-color: white;
    color: black;
    line-height: normal;
    padding: 4px;
    border: 1px solid black;
    border-radius: 3px;
    font-size: 12px;
}

span.textbox input {
    background-color: white;
    color: black;
    font-size: 12px;
    border-width: 0px;
    padding: 4px;
    padding-left: 2px;
}

span.textbox input:focus-visible, span.textbox input:focus-visible {
    background-color: white;
    color: black;
    font-size: 12px;
    border-width: 0px;
    outline: none;
}

span.textbox input[type=number] {
    -moz-appearance: textfield;
}

span.textbox input::-webkit-inner-spin-button, span.textbox input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

th.select-checkbox.select-checkbox.select-checkbox.select-checkbox:before {
    border: none;
}

.simpleModal {
    height: 100%;
}

.simpleModalContent {
    border-radius: 8px;
    box-shadow: 0 0 10px black;
    padding: 15px 30px;
    max-width: 90%;
    height: fit-content;
}

/*overriding jquerui default min width */
div.ui-tooltip.ui-tooltip.ui-tooltip {
    max-width: none;
}

#vsiNotificationBox {
    position: fixed;
    bottom: 0;
    left: 10px;
    width: 230px;
    background-color: floralwhite;
    color: black;
    z-index: 200;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
}

#notificationBodyDiv {
    width:100%;
    display:none;
    border-top:1px solid black;    
}

#notificationHideShowDiv{
    cursor: pointer;    
    margin-right:5px;
    font-size:20px;
}

#notificationHeader {
    height: 25px;    
    display:flex;
}

#notificationTextDiv, #notificationTextDiv a {
    font-size: 16px;
    font-weight: bold;    
    margin-left: 5px;
    flex-grow: 1;
}

#notificationColorsDiv {
    margin-left: 5px;
}

#notificationColorsDiv span {
    font-size: 16px;
    margin: 1px;
}

#notificationImages {
    font-size: 16px;
    margin-left: 5px;
}

#notificationImages table{
    display: inline;
}

#vsiClearAllDiv{
    text-align:center; margin:3px;
}

#vsiNotificationsScrollable {
    height: 300px;
    width: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
}

.vsiColorTally {
    font-size: 16px;
    margin-right: 5px;
    font-family: sans-serif, Arial;
}

.vsiNotificationTallies {
    display: flex;
}
.vsiNotificationTally {
    font-size: 16px;
    margin-right: 5px;
    font-family: sans-serif, Arial;
}

.modal.modal.modal{
    max-width: none;
}

input[type="radio"]:hover{
    cursor: pointer;
}

input[type="checkbox"]:hover {
    cursor: pointer;
}

/* Define the keyframes for the pulse animation */
@keyframes pulse-text {
    0% {
        transform: scale(1); /* Original size */
    }

    50% {
        transform: scale(1.1); /* Slightly larger */
    }

    100% {
        transform: scale(1); /* Return to original size */
    }
}

/* Apply the animation to a text element */
.pulsing-text {
    animation: pulse-text 2.5s infinite alternate; /* Apply animation */
    /*display: inline-block;*/ /* Essential for transform to work correctly on text */
}

/**
    start vsi_inputFiles
*/
.vsi_file_entry{
    border-bottom: 1px dashed gray;
}

.vsi_file_close {
    color: black;
    margin-left: 7px;
    cursor: pointer;
    font-size: 20px;    
    padding-left: 3px;
    padding-right: 3px;
}

.vsi_file_close:hover {
    border: 1px solid gray;
}

.vsi_file_add {
    color: black;
    margin-left: 7px;
    cursor: pointer;
    font-size: 20px;    
    padding-left: 3px;
    padding-right: 3px;
}

.vsi_file_add:hover {
    border: 1px solid gray;    
}
/**
    end vsi_inputFiles
*/

.divPlaceholder{
    overflow:hidden;
}

.graphContent{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    overflow: hidden;
    z-index:10000;
    background-color: white;
}