/* Minification failed. Returning unminified contents.
(127,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(128,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(129,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(130,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(131,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(132,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(133,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(134,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(135,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(136,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(137,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(138,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(139,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(140,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(141,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(142,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(143,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(146,24): run-time error CSS1039: Token not allowed after unary operator: '-etoColGrey'
(147,24): run-time error CSS1039: Token not allowed after unary operator: '-etoColBlue'
(148,29): run-time error CSS1039: Token not allowed after unary operator: '-etoColBlueFaded'
(149,26): run-time error CSS1039: Token not allowed after unary operator: '-etoColPurple'
(150,25): run-time error CSS1039: Token not allowed after unary operator: '-etoColGreen'
(151,26): run-time error CSS1039: Token not allowed after unary operator: '-etoColDarkOrange'
(152,23): run-time error CSS1039: Token not allowed after unary operator: '-etoColRed'
(153,27): run-time error CSS1039: Token not allowed after unary operator: '-etoColDarkRed'
(155,37): run-time error CSS1039: Token not allowed after unary operator: '-etoColBgBluePale'
(156,38): run-time error CSS1039: Token not allowed after unary operator: '-etoColBgGreenPale'
(157,36): run-time error CSS1039: Token not allowed after unary operator: '-etoColBgRedPale'
(158,39): run-time error CSS1039: Token not allowed after unary operator: '-etoColBgPurple'
(165,38): run-time error CSS1034: Expected closing parenthesis, found ','
(165,38): run-time error CSS1042: Expected function, found ','
(165,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(226,17): run-time error CSS1039: Token not allowed after unary operator: '-etoColForeGroundHighlight'
(227,38): run-time error CSS1034: Expected closing parenthesis, found ','
(227,38): run-time error CSS1042: Expected function, found ','
(227,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(240,17): run-time error CSS1039: Token not allowed after unary operator: '-etoColLinkBlue'
(244,17): run-time error CSS1039: Token not allowed after unary operator: '-etoColBlue'
(251,32): run-time error CSS1034: Expected closing parenthesis, found ','
(251,32): run-time error CSS1042: Expected function, found ','
(251,36): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(266,17): run-time error CSS1039: Token not allowed after unary operator: '-etoColLinkBlueHighlight'
(276,40): run-time error CSS1034: Expected closing parenthesis, found ','
(276,40): run-time error CSS1042: Expected function, found ','
(276,45): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(290,40): run-time error CSS1034: Expected closing parenthesis, found ','
(290,40): run-time error CSS1042: Expected function, found ','
(290,45): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(340,59): run-time error CSS1038: Expected hex color, found '#0000'
(340,106): run-time error CSS1038: Expected hex color, found '#0000'
(341,49): run-time error CSS1038: Expected hex color, found '#0000'
(936,28): run-time error CSS1039: Token not allowed after unary operator: '-etoColGreyFrame'
(1032,17): run-time error CSS1039: Token not allowed after unary operator: '-etoColToolbarText'
(1274,17): run-time error CSS1039: Token not allowed after unary operator: '-etoColToolbarText'
(2041,40): run-time error CSS1034: Expected closing parenthesis, found ','
(2041,40): run-time error CSS1042: Expected function, found ','
(2041,46): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(2094,17): run-time error CSS1039: Token not allowed after unary operator: '-etoColDarkRed'
(2098,17): run-time error CSS1039: Token not allowed after unary operator: '-etoColBlue'
(2102,17): run-time error CSS1039: Token not allowed after unary operator: '-etoColPurple'
(2106,17): run-time error CSS1039: Token not allowed after unary operator: '-etoColGreen'
(2110,17): run-time error CSS1039: Token not allowed after unary operator: '-etoColDarkOrange'
(2114,17): run-time error CSS1039: Token not allowed after unary operator: '-etoColRed'
(2118,17): run-time error CSS1039: Token not allowed after unary operator: '-etoColGreen'
(2122,17): run-time error CSS1039: Token not allowed after unary operator: '-etoColDarkOrange'
(2126,17): run-time error CSS1039: Token not allowed after unary operator: '-etoColRed'
 */
/* From Nordic Cool 4 */
/* Fonts */
@font-face {
    font-family: 'PFBeauSansProThin';
    src: url('https://font.visma.com/Fonts/PFBeauSansPro/PFBeauSansPro-Thin.eot'); /* IE9 Compat Modes */
    src: url('https://font.visma.com/Fonts/PFBeauSansPro/PFBeauSansPro-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/Content/fonts/PFBeauSansPro-Thin.woff') format('woff'), /* Modern Browsers */
    url('https://font.visma.com/Fonts/PFBeauSansPro/PFBeauSansPro-Thin.ttf') format('truetype'), /* Safari, Android, iOS */
    url('https://font.visma.com/Fonts/PFBeauSansPro/PFBeauSansPro-Thin.svg#PFBeauSansPro-Thin') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
}
/* Webfont: PFBeauSansPro-Light */
@font-face {
    font-family: 'PFBeauSansProLight';
    src: url('https://font.visma.com/Fonts/PFBeauSansPro/PFBeauSansPro-Light.eot'); /* IE9 Compat Modes */
    src: url('https://font.visma.com/Fonts/PFBeauSansPro/PFBeauSansPro-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/Content/fonts/PFBeauSansPro-Light.woff') format('woff'), /* Modern Browsers */
    url('https://font.visma.com/Fonts/PFBeauSansPro/PFBeauSansPro-Light.ttf') format('truetype'), /* Safari, Android, iOS */
    url('https://font.visma.com/Fonts/PFBeauSansPro/PFBeauSansPro-Light.svg#PFBeauSansPro-Light') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
}
/* Webfont: PFBeauSansPro-Regular */
@font-face {
    font-family: 'PFBeauSansProRegular';
    src: url('https://font.visma.com/Fonts/PFBeauSansPro/PFBeauSansPro-Regular.eot'); /* IE9 Compat Modes */
    src: url('https://font.visma.com/Fonts/PFBeauSansPro/PFBeauSansPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/Content/fonts/PFBeauSansPro-Regular.woff') format('woff'), /* Modern Browsers */
    url('https://font.visma.com/Fonts/PFBeauSansPro/PFBeauSansPro-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('https://font.visma.com/Fonts/PFBeauSansPro/PFBeauSansPro-Regular.svg#PFBeauSansPro-Regular') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
}
/* Webfont: PFBeauSansPro-SemiBold */
@font-face {
    font-family: 'PFBeauSansProSemiBold';
    src: url('https://font.visma.com/Fonts/PFBeauSansPro/PFBeauSansPro-SemiBold.eot'); /* IE9 Compat Modes */
    src: url('https://font.visma.com/Fonts/PFBeauSansPro/PFBeauSansPro-SemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/Content/fonts/PFBeauSansPro-SemiBold.woff') format('woff'), /* Modern Browsers */
    url('https://font.visma.com/Fonts/PFBeauSansPro/PFBeauSansPro-SemiBold.ttf') format('truetype'), /* Safari, Android, iOS */
    url('https://font.visma.com/Fonts/PFBeauSansPro/PFBeauSansPro-SemiBold.svg#PFBeauSansPro-SemiBold') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
}


/*!
 * From Nordic Cool 3 (http://ux.visma.com/weblibrary/latest/)
 * Version 3.7
 */
/**
 * Local fonts declaration - Nordic Cool 3
*/
@font-face {
    font-family: "OpenSansFallback";
    font-style: normal;
    font-weight: 300;
    src: url('/Content/fonts/subset-OpenSans-Light.woff2') format('woff2'), /* Super Modern Browsers */ url('./fonts/subset-OpenSans-Light.woff') format('woff');
    /* Pretty Modern Browsers */
}

@font-face {
    font-family: "OpenSansFallback";
    font-style: italic;
    font-weight: 300;
    src: url('/Content/fonts/subset-OpenSansLight-Italic.woff2') format('woff2'), url('./fonts/subset-OpenSansLight-Italic.woff') format('woff');
}

@font-face {
    font-family: "OpenSansFallback";
    font-style: normal;
    font-weight: normal;
    src: url('/Content/fonts/subset-OpenSans.woff2') format('woff2'), url('./fonts/subset-OpenSans.woff') format('woff');
}

@font-face {
    font-family: "OpenSansFallback";
    font-style: italic;
    font-weight: normal;
    src: url('/Content/fonts/subset-OpenSans-Italic.woff2') format('woff2'), url('./fonts/subset-OpenSans-Italic.woff') format('woff');
}

@font-face {
    font-family: "OpenSansFallback";
    font-style: normal;
    font-weight: 600;
    src: url('/Content/fonts/subset-OpenSans-Semibold.woff2') format('woff2'), url('./fonts/subset-OpenSans-Semibold.woff') format('woff');
}

@font-face {
    font-family: "OpenSansFallback";
    font-style: italic;
    font-weight: 600;
    src: url('/Content/fonts/subset-OpenSans-SemiboldItalic.woff2') format('woff2'), url('./fonts/subset-OpenSans-SemiboldItalic.woff') format('woff');
}

@font-face {
    font-family: "OpenSansFallback";
    font-style: normal;
    font-weight: bold;
    src: url('/Content/fonts/subset-OpenSans-Bold.woff2') format('woff2'), url('./fonts/subset-OpenSans-Bold.woff') format('woff');
}

@font-face {
    font-family: "OpenSansFallback";
    font-style: italic;
    font-weight: bold;
    src: url('/Content/fonts/subset-OpenSans-BoldItalic.woff2') format('woff2'), url('./fonts/subset-OpenSans-BoldItalic.woff') format('woff');
}

@font-face {
    font-family: "OpenSansFallback";
    font-style: normal;
    font-weight: 800;
    src: url('/Content/fonts/subset-OpenSans-Extrabold.woff2') format('woff2'), url('./fonts/subset-OpenSans-Extrabold.woff') format('woff');
}

@font-face {
    font-family: "OpenSansFallback";
    font-style: italic;
    font-weight: 800;
    src: url('/Content/fonts/subset-OpenSans-ExtraboldItalic.woff2') format('woff2'), url('./fonts/subset-OpenSans-ExtraboldItalic.woff') format('woff');
}

:root {
    --etoColForeGroundHighlight: #000; /* Pitch black for text highlight */
    --etoColToolbarText: #FFF; 
    --etoColGreyFrame: #dddddd;
    --etoColRed: #ff0000;
    --etoColDarkRed: #8b0000;
    --etoColDarkOrange: #f37e00;
    --etoColBlue: #0169d5;
    --etoColBlueFaded: #c1dfff;
    --etoColLinkBlueHighlight: #005cbb;
    --etoColLinkBlue: #006AAD;
    --etoColPurple: #da00ff;
    --etoColGreen: #25c300;
    --etoColGrey: #939393;
    --etoColBgBluePale: #c8e5ff;
    --etoColBgGreenPale: #d0fad4;
    --etoColBgRedPale: #FFDDDD;
    --etoColBgPurple: #da00ff;
}

.colGrey { color: var(--etoColGrey) !important }
.colBlue { color: var(--etoColBlue) !important }
.colBlueFaded { color: var(--etoColBlueFaded) !important }
.colPurple { color: var(--etoColPurple) !important }
.colGreen { color: var(--etoColGreen) !important }
.colOrange { color: var(--etoColDarkOrange) !important }
.colRed { color: var(--etoColRed) !important }
.colDarkRed { color: var(--etoColDarkRed) !important}

.colBgBlue { background-color: var(--etoColBgBluePale) !important }
.colBgGreen { background-color: var(--etoColBgGreenPale) !important }
.colBgRed { background-color: var(--etoColBgRedPale) !important }
.colBgPurple { background-color: var(--etoColBgPurple) !important }

.table, .table .table {
    background-color: transparent ;
}

.table .bgColorHighlight {
    background-color: rgb(255,255,255,0.75) 
}


.table-supercondensed tbody tr td {
    font-size: 12px;
}

/* Added flexbox for sticky footer and fill height support */
html, body {
    height: 100%;
    margin: 0;
}

body {
    /*overflow-y: scroll;*/
    background-color: #F0F2F5;
    font-family: OpenSansFallback,Open Sans,sans-serif;
    display: flex;
    flex-direction: column;
}

canvas {
    display: block;
    width: 100vw;
    height: 100vh;
}

p {
    font-family: PFBeauSansProLight, sans-serif;
}

label {
    font-family: Open Sans,sans-serif;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 0px;
    font-weight: normal;
}

.label-big {
    line-height: 1;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px 5px 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    float: left;
    color: #555555;
    background-color: #eeeeee;
}

.label-big-delete { /* button X for delete item */
    cursor: pointer;
    margin-left: 5px;
    border-radius: 50%;
}

.label-big-delete:hover { /* button X for delete item */
    color: var(--etoColForeGroundHighlight);
    background-color: rgb(127,127,126,0.35);
}


.transparent-link {
    color: transparent;
}

.semi-transparent-link {
    opacity: 0.25;
}

a {
    color: var(--etoColLinkBlue);
}

a:hover, .transparent-link:hover {
    color: var(--etoColBlue);
    cursor: pointer;
}

.semi-transparent-link:hover {
    opacity: 1;
    border-radius: 3px;
    background-color: rgb(0,0,0,0.1);    
}

a:focus {
    outline: none;
}

/* Selected Link and Table Row */

a.row-selector-link:hover {
    text-decoration: none;
}

a.row-selector-link.selected-link {
    font-weight: bold;
    color: var(--etoColLinkBlueHighlight);
}

/* Adds the triangle in front of the text */
a.row-selector-link.selected-link::before {
    content: "\25B6 \00A0"; /* Unicode for Right-Pointing Triangle (►) + a non-breaking space */
}

/* Highlights the background of the selected row */
tr.selected-row, tr.selected-row > td {
    background-color: rgb(136, 161, 177, 0.1)
}

/* Drag and drop of contract document rows, to bind a document as child of another document */
tr.contractDocumentRow.contractDocumentDragging {
    opacity: 0.5;
}

tr.contractDocumentRow.contractDocumentDragOver {
    outline: 2px dashed #cc9900;
    outline-offset: -2px;
}

tr.contractDocumentRow.contractDocumentDragOver > td {
    background-color: rgb(255, 220, 130, 0.3);
}

/* Use a dashed row separator between a parent document and its child documents (or between sibling child documents),
   instead of the normal solid row border, to visually group a document family together.
   Since the table uses border-collapse, both sides of the shared edge (this row's bottom border and the next
   row's top border) must be turned off (transparent), otherwise the browser's border conflict resolution keeps
   the original solid border visible. The dashed line itself is drawn using a background image with spaced-out
   segments, since the native "dashed" border-style produces a pattern that is too small/tight to be controlled
   with plain CSS border properties. */
tr.contractDocumentRow.contractDocumentDottedBorder > td {
    border-bottom-color: transparent;
    background-image: linear-gradient(to right, #ddd 0, #ddd 6px, transparent 6px, transparent 14px);
    background-position: bottom left;
    background-size: 14px 1px;
    background-repeat: repeat-x;
}

tr.contractDocumentRow.contractDocumentDottedBorder + tr.contractDocumentRow > td {
    border-top-color: transparent;
}

/* No row border at all in the first two columns (document owner and last viewed) for the family separator,
   the dashed family separator should only show from the document title column and onwards */
tr.contractDocumentRow.contractDocumentDottedBorder > td.tableColDocOwner,
tr.contractDocumentRow.contractDocumentDottedBorder > td:nth-child(2) {
    border-bottom-color: transparent;
    background-image: none;
}

tr.contractDocumentRow.contractDocumentDottedBorder + tr.contractDocumentRow > td.tableColDocOwner,
tr.contractDocumentRow.contractDocumentDottedBorder + tr.contractDocumentRow > td:nth-child(2) {
    border-top-color: transparent;
}

/* Loader */

*#loader-1 .loader {
    position: fixed;
    left: 50%;
    top: 60%;
    height: 250px;
    width: 250px;
    margin: -10vw 0 0 -10vw;
}

.loader {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side,#f1a626 94%,#0000) top/24px 24px no-repeat, conic-gradient(#0000 30%,#f1a626);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 24px),#000 0);
    animation: l13 2s infinite linear;
}

@keyframes l13 {
    100% {
        transform: rotate(1turn)
    }
}

/* HTML: <div class="loader-inline"></div> */
.loader-inline {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    animation: l13 2s linear infinite;
}

.loader-inline circle {
    fill: none;
    stroke: #f1a626;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 60 100;   /* visible arc length, total circumference */
}


/* Google Icons styling*/

.material-symbols-rounded {
    font-size: 22px;
}

.material-symbol-show-wrapper:hover .material-symbol-show-group_add::before {
    content: "group_add";
}

.panel-toolbar ul li a .material-symbols-rounded {
    position: relative;
    top: 5px;
    margin-top: -6px;
}

.table th .material-symbols-rounded, .table td a .material-symbols-rounded {
    position: relative;
    top: 2px;
    font-size: 18px;
}

.table-condensed td .material-symbols-rounded, .table-condensed td a .material-symbols-rounded {
    font-size: 17px;
}

.btn .material-symbols-rounded, .input-group-addon .material-symbols-rounded {
    font-size: 20px;
    padding-right: 2px;
    float: left;
    position: relative;
    top: 0px;
}

.btn-sm .material-symbols-rounded {
    font-size: 18px;
    padding-right: 6px;
    float: left;
    position: relative;
    top: 0px;
}

h2 .material-symbols-rounded {
    font-size: 26px;
    vertical-align: bottom;
    padding-right: 10px;
    top: -2px;
}

h4 .material-symbols-rounded {
    font-size: 24px;
    vertical-align: bottom;
    padding-right: 6px;
    position: relative;
    top: -2px;
}

#popupSuccessMessage .material-symbols-rounded {
    float: left;
    padding-right: 10px;
    margin-top: -2px;
}

.nav-tabs .material-symbols-rounded {
    float: left; 
    font-size: 20px;
    margin-right: 5px;
    margin-top: -1px;
}

.iconLink {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    color: #444;
}

.iconLink:hover {
    background-color: #ddd;
    text-decoration: none;
    color: #111;
}

hr {
    margin-top: 20px;
    border-top: 1px solid #ddd;
}

.hr-title {
    margin-top: 20px;
    border-top: 1px solid #ddd;
}

.hr-title div {
    display: inline-block;
    position: relative;
    top: -12px;
    background-color: white;
    margin-left: 10px;
    padding: 0px 10px;
    width: auto;
    font-weight: bold;
    border-radius: 10px;
    border: 1px solid #ddd;

}

h1, .h1, h2, .h2 {
    font-weight: bold;
    font-size: 1.6em;
    margin-top: 15px;
    margin-bottom: 15px;
    color: #222;
    font-style: normal;
    border-bottom: none;
    line-height: 120%;
}

h3, .h3 {
    font-weight: bold;
    font-size: 1.4em;
    margin-top: 15px;
    margin-bottom: 10px;
    color: #222;
    font-style: normal;
    border-bottom: none;
    line-height: 120%;
}

h4, .h4 {
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 15px;
    margin-bottom: 5px;
    color: #222;
}

.container {
    width: auto !important;
    padding-left: 25px;
    padding-right: 25px;
}

.container-blue-faded {
    height: 100%;
    background-image: url('/Images/blue_faded.png');
    background-repeat: repeat-x;
    background-size: cover;
    padding-left: 20px;
    padding-right: 20px;
}

.body-content {
    margin-top: 15px;
}

.box {
    display: flex;
    flex-flow: column;
    min-height: 100vh;

}

.box .header {
    flex: 0 1 auto;
    flex-shrink: 0;
}

.box .content {
    flex: 1 0 auto;
    margin-left: 0px;
    margin-right: 0px;
}

.box .footer {
    flex: 0 1 80px;
    flex-shrink: 0;
    min-height: 80px;
}


.borderless tbody tr td, .borderless tbody tr th, .borderless thead tr th {
    border: none;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

/* Login page */

.login-background {
    font-family: OpenSansFallback,Open Sans,sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    overflow: auto;
    background-color: #dbe0e8;
}

.login-container {
    height: 100%;
    justify-content: center;
    flex: 1;
    display: flex;
    align-items: center;
}

.login-left {
    display: none;
}

.login-right {
    padding: 20px 20px 0px 20px;
}

.login-footer {
    position: relative;
    width: 100%;
    border-top: 2px dashed #d9dcde;
}

.login-footer div {
    color: #6a6c6d;
    padding: 10px 20px;
    position: relative;
}

.login-footer div:before {
    content: "";
    display: block;
    position: absolute;
    background-color: #d9dcde;
    border-radius: 100px;
    height: 4px;
    width: 120px;
    top: -3px;
}

.home-img {
    background: url('../Images/home_bg_2021_11.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 1680px;
    height: 100%;
}

.numberCircleTab {
    position: relative;
    top: -2px;
    border-radius: 50%;
    width: 23px;
    height: 23px;
    padding: 2px 0px;
    background: #fff;
    text-align: center;
    font-weight: bold;
    margin-right: 5px;
    float: left;
    color:black;
}

.numberCircleText {
    position: relative;
    top: -2px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    padding: 1px 0px 0px 0px;
    background: #fff;
    text-align: center;
    font-weight: bold;
    margin-right: 5px;
    float: left;
    color:white;
    background-color: black;
}


@media (min-width: 992px) {
    .login-background {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .login-left {
        display: initial;
        height: 340px;
        max-height: 340px;
        width: 45%;
    }
    .login-right {
        min-width: 480px;
    }
    .login-footer {
        border-top: none;
        flex-shrink: 0;
        height: 100%;
        width: 66px;
        margin-left: auto;
        border-left: 2px dashed #d9dcde;
    }
    .login-footer div {
        padding: 20px 10px;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        position: absolute;
        bottom: 10vh;
        left: -4px;
    }
    .login-footer div:before {
        top: 78px;
        left: -23px;
        transform: rotate( 90deg);
    }
}

.google-button {
    text-decoration: none;
    display: inline-flex;
    border-radius: 5px;
}

.google-button-icon {
    height: 48px;
    width: 48px;
    padding: 12px;
    box-shadow: 0 2px 4px #163e591f;
    border-radius: 5px 0 0 5px;
    background: url('../Images/google_g-icon_26x26.png');
    background-repeat: no-repeat;
    background-position: center;
    background-color: #D2E0EA;
}

.google-button:hover {
    background-color: #f5f5f5;
}

.google-button:hover > .google-button-text {
    background-color: #006DAD;
}

.google-button-text {
    color: #fff;
    font-weight: 600;
    height: 48px;
    padding: 14px 24px;
    box-shadow: 0 2px 4px #163e593f;
    border-radius: 0 5px 5px 0;
    background-color: #007aca;
}

/* 
   Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/

.form-control {
    font-family: Open Sans,sans-serif;
    -webkit-box-shadow: none;
    box-shadow: none; 
}

.form-control-sm {
    font-size: 14px;
    padding: 2px 5px 1px 5px;
    height: auto;
}

.form-control-table-cell {
    padding: 0px 6px;
    height: 24px;
}

.form-horizontal {
    margin-bottom: auto;
}

.form-horizontal .control-label {
    text-align: left;
    margin-bottom: 10px;
}

.form-horizontal .form-control {
    margin-bottom: 5px;
}

.form-group {
    margin-bottom: 10px;
}

.form-group input {
    margin-right: 8px;
}

.input-group-addon {
    background-color: #fff;
}

/* make the fill class take fulll height */
.fill {
    min-height: 100%;
    height: 100%;
}

/* Dropdown fixes */

.dropdown-menu > li {
    margin-left: 5px;
}

.dropdown-menu .material-symbols-rounded {
    font-size: 20px;
    width: 32px;
    position: relative;
    top: 0px;
    vertical-align: top;
}

.dropdown-menu > li > a {
    padding: 6px 20px 6px 10px;
}

.dropdown-menu-small > li > a {
    padding: 2px 15px;
}

/* Icon to left and right of dropdown, used in main navbar */

.dropdown-menu > li > a > div.iconstyle {
    display: flex;
    width: 100%;
    height: 100%;
}

.dropdown-menu > li > a > div.iconstyle > div.icon-left {
    order: 1;
    flex: 0 0 34px;
}

.dropdown-menu > li > a > div.iconstyle > div.text {
    order: 2;
    flex: 1 1 auto;
}

.dropdown-menu > li > a > div.iconstyle > div.icon-right {
    order: 3;
    flex: 0 0 24px;
    padding-left: 20px;
    padding-top: 1px;
    line-height: 16px;
}

.dropdown-menu > li > a > div.iconstyle > div.icon-right > img {
    height: 14px;
}

/* other stuff*/

.dropdown-menu .divider {
    display: block;
}

.dropdown-menu .divider {
    margin: 4px 0; /* Dropdown separator margins */
}

.dropdown-toggle .caret {
    background-position: -30px 0px;
}

.caret {
    height: 5px;
    background-size: 85px 6px;
}

/* Bootstrap Multi level Navbar Menu - https://codepen.io/ajaypatelaj/pen/prHjD */

.dropdown-menu {
    border: 1px solid #f2f2f2;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: inline-table;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

div.dropdown-item {
    
}

div.dropdown-item:hover {
    background-color: #f5f5f5;
}

div.dropdown-item a {
    color: #333;
    width: 100%;
    display: block;
    padding: 6px 20px;
    text-decoration: none;
}

div.dropdown-item a:hover {
    text-decoration: none;
}

/* Alerts */

.alert-warning {
    color: #65512e;
    background-color: #ffcca2;
    border-color: #e9c985;
}

/* Custom panel, frame only */

.panel-frame {
    border: 1px solid var(--etoColGreyFrame);
    border-radius: 5px;
    padding: 15px 10px;
    margin-bottom: 20px;
}

/* Default panel override bootstrap */

.panel {
    border-radius: 15px;
    box-shadow: none;
    border: 1px solid #eef0f3;
}

.panel-body, .panel-default, .panel-tabs {
    padding: 30px 30px 15px 30px;
}


.panel-table {
    padding: 20px 20px 20px 20px;
}

/* Custom panel toolbar tabs (above) */

.panel-toolbar-tabs {
    padding: 0px;
    border: none;
    background-color: transparent;
    font-size: 15px;
    display: flex;
    margin: 0;
    list-style: none;
    padding-inline-start: 15px;
}

.panel-toolbar-tabs li {
    color: #000;
    border-radius: 8px 8px 0px 0px;
    padding: 10px 20px 6px 20px;
    margin-top: 4px;
    font-size: 14px;
}

.panel-toolbar-tabs li:hover {
    background-color: #ddd;
}

.panel-toolbar-tabs .active:hover {
    background-color: #0081CC;
}

.panel-toolbar-tabs li a {
    color: #000;
    display: block;
}

.panel-toolbar-tabs .active {
    background-color: #0081CC;
    padding: 12px 20px 8px 20px;
    margin-top: 0px;
    color: #FFF;
}

.panel-toolbar-tabs .active a {
    color: #FFF;
}

.panel-toolbar-tabs li a:hover {
    text-decoration: none;
}

.panel-toolbar-tabs .active a:hover {
    cursor: default;
}

.panel-toolbar-tabs a:focus {
    text-decoration: none;
}


/* Custom panel toolbar */

.panel-toolbar {
    padding: 0;
    border: none;
    background-color: #006AAD;
    font-size: 15px;
    display: flex;
}

.panel-toolbar-alt {
    background-color: #8258cb;
}

.panel-toolbar-searchmore {
    color: var(--etoColToolbarText);
    margin: 0px 20px 0px 20px;
    border-radius: 0 0 10px 10px;
    background-color: #107ABD;
}

.panel-toolbar a {
    color: #fff;
    display: block;
    padding: 12px 15px 10px 15px;
    margin-top: 5px;
    margin-right: 5px;
    border-radius: 6px;
}

.panel-toolbar a:focus {
    background-color: #006AAD;
    text-decoration: none;
}

.panel-toolbar a:hover, .toolbar .custom-file-upload:hover, .toolbar button:hover {
    text-decoration: none;
    background-color: #318dc9;
    border-radius: 5px;
}

.panel-toolbar-alt a:hover, .panel-toolbar-alt a:focus {
    background-color: #966cdd;
}

.toolbar {
    font-size: 14px;
    min-height: 54px;
    margin: 5px 0px;
    list-style: none;
    float: left;
    padding-inline-start: 15px;
}

.toolbar > li .input-group {
    margin-right: 10px;
}

.toolbar > li {
    float: left;
    display: block;
}

/* font awsome icons */
.toolbar > li a i, .toolbar > li button i, .toolbar > li label i {
    font-size: 18px;
    margin-right: 5px;
}


/* check box */

.toolbar input[type="checkbox"] {
    cursor: pointer;
    margin-top: 17px;
    margin-left: 5px;
    display: inline-block;
    background: #004068;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 22px;
    width: 22px;
    border-radius: 3px;
    border: none;
}

.toolbar input[type="checkbox"]:focus {
    outline: none;
}

.toolbar input[type="checkbox"]:checked {
    background-image: url('../Images/check_18x18.png');
}

.toolbar > li .toolbar-checkbox {
    position: relative;
    top: -6px;
    margin-left: 5px;
    margin-right: 15px;
    cursor: pointer;
    color: white;
}

/* text box*/

.toolbar input[type="text"] {
    display: block;
    margin: 10px 10px 10px 0px;
    border-radius: 5px;
    border: 1px solid white;
    padding: 6px 5px 4px 10px;
    /*background-color: #004068;*/
    color: #12426d;
    width: auto;
}

.toolbar .input-group input[type="text"] {
    margin-right: 0px;
}


.toolbar input[type="text"]::placeholder {
    color: #555;
    opacity: .8;
    font-style: italic;
    font-size: 13px;
}

.toolbar input[type="text"]:focus-visible {
    outline: none;
    border: 2px solid #5aa5e7;
    padding: 6px 4px 4px 9px;
}

.toolbar .input-group .input-group-btn .btn-default, .toolbar .input-group .input-group-addon .btn-default {
    /*background-color: #004068;*/
    border: 1px white;
    border-radius: 0 5px 5px 0;
    color: #0a3555;
}

.toolbar .input-group .input-group-btn .btn-default:hover {
    background-color: #e7f3ff;
}


/* Toolbar regular - select list */

.toolbar select {
    display: block;
    margin: 10px 10px;
    border-radius: 5px;
    border: 1px solid #004068;
    padding: 6px 15px 4px 15px;
    background-color: #004068;
    color: white;
    cursor: pointer;
}

.toolbar select::placeholder {
    color: white;
    opacity: .8;
    font-style: italic;
}

.toolbar select:focus-visible {
    outline: none;
    border: 2px solid #16a5ff;
    margin: 9px 9px;
    padding: 6px 15px 4px 15px;
}

/* Dropdown HTML, use regular bootstrap form-control, revert style from toolbar menu items */

.toolbar .dropdown-menu .form-control {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #555555;
    margin: 0;
    padding: 6px 12px;

}

.toolbar .dropdown-menu .form-control::placeholder {
    color: #000;
    opacity: .8;
    font-style: italic;
}

.toolbar .dropdown-menu .form-control:focus-visible {
    outline: none;
    border: 1px solid #16a5ff;
    margin: 0;
    padding: 6px 12px;
}

/* custom file browse button */
.toolbar input[type="file"] {
    display: none;
}
.toolbar .custom-file-upload {
    margin-top: 5px;
    padding: 10px 15px 5px 15px;
    display: inline-block;
    cursor: pointer;
    color: white;
}
.toolbar .custom-file-upload span#custom-file-info {
    position: relative;
    top: -5px;
}

/* button */
.toolbar button {
    border: none;
    background-color: transparent;
    color: white;
    padding: 17px 15px 13px 15px;
}

/* used by datetime picker */
.toolbar .input-group .input-group-addon {
    padding: 0;
    border: none;
    background-color: transparent;
    color: white;
}

.toolbar .datetimepicker, .toolbar .datetimepicker a {
    color: #000;
}

.toolbar .datetimepicker a:hover {
    background-color: transparent;
}

/* textbox addon button */
.toolbar .input-group .input-group-btn span {
    height: 34px;
}


.toolbar-horizontal-separator {
    border-left: 1px solid rgba(255, 255, 255, 0.8);
    height: 35px;
    margin: 10px 10px 0px 0px;
}


/* Toolbar slide down - for more search / filter options */

.toolbar-slide-down-menu {
    display: flex;
    flex-direction: column;
}

.toolbar-slide-down-menu .summary {
    color: var(--etoColToolbarText);
    font-weight: bold;
    font-size: 13px;
}

.toolbar-slide-down-menu a {
    padding: 10px 15px 8px 15px;
}

.toolbar-slide-down-menu .toolbar{
    padding-inline-start: 0px;
    margin: 0px;
    min-height: auto;
}

.toolbar-slide-down-menu .userFilterCategory {
    padding-top: 5px;
    font-size: 13px;
    font-weight: bold;
}

.toolbar-slide-down-menu .userFilterCriteria {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    margin-bottom: 3px;
    border-radius: 5px;
    min-height: 37px;
    padding: 1px 10px;
    border: 1px solid #7baad1;
}

.toolbar-slide-down-menu .userFilterCriteria:hover {
    background-color: rgba(255,255,255,0.1);
}

.toolbar-slide-down-menu .userFilterCriteria label {
    margin-top: 7px;
    min-width: 230px;
}

.toolbar-slide-down-menu .userFilterCriteriaRemove {
    padding-top: 6px;
    margin-left: auto;
    cursor: pointer;
}

.toolbar-slide-down-menu .addUserFilterCriteria {
    margin-top: 10px;
    display: inline-flex;
}

.toolbar-slide-down-menu .panelSearchMoreAddFilterCriteriaBtn {
    background-color: #005a97;
}

.toolbar-slide-down-menu .userFilterCriteria input[type="text"] {
    margin: 4px 5px 0px 0px;
    width: 200px;
    background-color: #c7e6ff;
    padding: 3px 5px 0px 5px;
    height: 26px;
    font-size: 13px;
    font-weight: bold;
    color: #222;
}

.toolbar-slide-down-menu .userFilterCategoryValueWrapper {
    display: flex;
    flex-wrap: wrap;
}

.toolbar-slide-down-menu .userFilterCriteriaValue {
    display: inline-flex;
    margin: 4px 0px 3px 5px;
    border-radius: 15px;
    background-color: #FFF;
    font-size: 13px;
    font-weight: bold;
    color: #222;
    height: 26px
}

.toolbar-slide-down-menu .userFilterCriteriaValueText {
    padding: 4px 0px 0px 10px;
}

.toolbar-slide-down-menu .userFilterCriteriaValueRemove {
    cursor: pointer;
    padding: 3px 5px 0px 0px;
}
/* Bootstrap nav-tabs override */
.nav-tabs > li > a {
    color: black;
    border-radius: 8px 8px 0px 0px;
}

.btnTab img {
    position: relative;
    top: -2px;
}


/* table */

/*.table a:focus {
    outline: 2px dotted #337AB7;
    outline-offset: 3px;
}
*/

.table .badge {
    background-color: #6e767d;
    height: 18px;
    width: 27px;
}

.table .badge-dimmed {
    background-color: #d2d6d9;
    margin-left: 4px;
    width: 19px;
}

.table-nonfluid {
    width: auto !important;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    vertical-align: middle;
}


.table.table-clickable > tbody > tr:hover > td, .table.table-clickable > tbody > tr:hover > th, .table.table-clickable > tfoot > tr:hover > td, .table.table-clickable > tfoot > tr:hover > th {
    background-color: #e5f5ff;
    color: #333;
    cursor: pointer;
}

.table-text-right > thead > tr > th, .table-text-right > tbody > tr > td  {
    text-align: right;
}

.table-text-top > tbody > tr > td {
    vertical-align: top;
}

.table > tbody > .tr-separator > td {
    border-top: 2px solid #aaa;
}

.tr-crop {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tr-nowrap {
    white-space: nowrap;
}

.span-crop {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: 5px;
}

.wide-popover-600 {
    max-width: 600px;
}

.wide-popover-400 {
    max-width: 400px;
}

.span-crop-400 {
    max-width: 400px;
}

.span-crop-300 {
    max-width: 300px;
}

.span-crop-200 {
    max-width: 200px;
}


.tableCellHighlight {
    background-color: #eee;
}

.black-links tr th a {
    color: black;
    text-decoration: none;
}

.black-links tr th a:hover {
    text-decoration: underline;
}

.table-row-deleted td {
    color: #cd0000;
}

.sortable-chosen {
    background-color: #e5f5ff;
}

/* Modal styling */

.modal-content {
    border-radius: 15px;
}

.modal-header, .modal-footer {
    padding: 20px 30px;
}

.modal-header .close {
    opacity: 0.8;
    margin-top: 2px;
}

.modal-body {
    overflow: visible;
    max-height: none;
    padding: 15px 30px;
}

.modal-body .popup-label {
    font-weight: bold;
    font-size: 0.9em;
    margin-top: 12px;
}

.modal-footer-text {
    font-style: italic;
    color: #777;
    float: left;
    margin-right: 20px;
    margin-top: 8px;
}

@media (max-width: 470px) {
        
    .login_area {
        margin-top: 0px;
        margin-left: 0px;
        width: auto;
    }

    .login_head {
        border-radius: 0px;
    }

    .nav-tabs > li > a {
        padding: 10px 10px;
    }
}

@media (max-width: 767px) {

    h1, .h1, h2, .h2 {
        font-size: 1.5em;
    }

    h3, .h3 {
        font-size: 1.3em;
        margin-top: 30px;
    }

    .body-content {
        margin-top: 0px;
    }

    .box .row.header {
        flex: 0 1 54px;
    }

    .panel-tabs, .panel-tabs-toolbar {
        padding: 10px 10px 10px 10px;
    }

    .panel {
        border: none;
    }

    .panel-body {
        padding: 0px 0px 15px 0px;
        background-color: transparent;
    }

    .panel-toolbar {
        padding: 15px 0;
    }

    .panel-toolbar a, .toolbar .custom-file-upload {
        padding: 8px 12px 8px 12px;
    }
    
    .alert {
        margin: 10px;
    }

    
}


/* Wider support */
@media (min-width: 768px) {
    .container {
        width: auto;
    }

    .navbar {
        border-radius: 0px;
    }

}

/* Wider support */
@media (min-width: 1800px) {
    .container {
        width: 1750px;
    }
}

@media (min-width: 1150px) {
    .modal-xl {
        width: 1050px;
    }
    .modal-xxl {
        width: 1250px;
    }
}

@media (max-width: 1149px) {
    .modal-xxl {
        width: 95%;
    }
}

@media (max-width: 1249px) {
    .modal-xxl {
        width: 95%;
    }
}

/*
    OVERRIDE DEFAULT BOOTSTRAP STYLE
*/

.dl-horizontal dt {
    width: auto;
}



/* tooltip */

.tooltip-inner {
    text-align: left;
    white-space: nowrap;
    width: auto;
    max-width: initial;
}

.tooltip {
    width: auto;
    max-width: initial;
}

.tt {
    border-collapse: separate;
    border-spacing: 4px 4px;
    display: table;
    width: auto;
}

.ttr {
    display: table-row;
}

.ttd {
    display: table-cell;
}


/* Background image for jumbotron - home page */

.homeimage {
    background-image: url("../Images/nature_home_alta.jpg");
    background-size: cover;
    height: 100%;
    padding-top: 30px;
}

/* Float elements like input boxes and buttons with default spacing */

.floatleft {
    float: left;
    margin-right: 8px;
}

/* Set width on the form input elements to 100%  */
.fullwidth {
    max-width: none;
}

/* Position lables in table cells */

.label-table-cell {
    position: relative;
    top: -2px;
}

/* similar to cotrol-value but not bold */

.nobold {
    font-weight: normal;
}

/* Text on one line */

.text-left-nopadding {
    text-align: left;
    margin-top: 0px;
    margin-right: 5px;
}

/* Ovverride btn */

.btn-toolbar:hover {
    color: white;
}

.btn-default:hover {
    color: #333;
    background-color: #f2f2f2;
    border-color: #adadad;
}

.btn:active, .btn.active {
    /* background-image: none; */
    outline: 0; 
    -webkit-box-shadow: none!important;
    box-shadow: none;
}

.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: none;
}

.btn-default:active:hover, .btn-default.active:hover, .open > .dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus, .btn-default:active.focus, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus {
    background-color: unset;
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
    background-color: white;
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.btn-success {
    background-color: #0FAB4D;
}

.btn-success:hover {
    background-color: #0D9642;
}

.btn-success:active:hover, .btn-success:active {
    background-color: #0B8239;
}

.bootstrap-select .dropdown-toggle:focus, .bootstrap-select > select.mobile-device:focus + .dropdown-toggle {
    border-color: #66afe9;
    outline: 0 !important;
    outline-offset: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.btn-group > .btn:only-of-type {
    min-width: unset;
}

/*.btn.dropdown-toggle .caret {
    top: 13px;
}*/

/* button bottom margin */

.btn-bottom-margin {
    margin-bottom: 4px;
}

/* Ovverride primary color */

.btn-primary {
    background-color: #007ACA; /*1*/
    border-color: #006FB5; /*2*/
}
.btn-primary:hover {
    background-color: #006FB5; /*2*/
    border-color: #005F9B; /*3*/
}
.btn-primary:focus,
.btn-primary.focus {
    background-color: #006FB5; /*2*/
    border-color: #005F9B; /*3*/
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: #005F9B; /*3*/
    border-color: #005991; /*4*/
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
    background-color: #005991; /*4*/
    border-color: #004068; /*5*/
}
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
    background-color: #007ACA; /*1*/
    border-color: #006FB5; /*2*/
}

/* Add purple color */

.btn-primary-purple {
    background-color: #9d47a3;
    border-color: #833a99;
}
.btn-primary-purple:hover {
    background-color: #7f2d85;
    border-color: #4f1062;
}
.btn-primary-purple:focus,
.btn-primary-purple.focus {
    background-color: #7f2d85;
    border-color: #4f1062;
}
.btn-primary-purple:active,
.btn-primary-purple.active,
.open > .dropdown-toggle.btn-primary-purple {
    border-color: #7f2d85;
    background-color: #4f1062;
}
.btn-primary-purple:active:hover,
.btn-primary-purple.active:hover,
.open > .dropdown-toggle.btn-primary-purple:hover,
.btn-primary-purple:active:focus,
.btn-primary-purple.active:focus,
.open > .dropdown-toggle.btn-primary-purple:focus,
.btn-primary-purple:active.focus,
.btn-primary-purple.active.focus,
.open > .dropdown-toggle.btn-primary-purple.focus {
    background-color: #541759;
    border-color: #4f1062;
}
.btn-primary-purple.disabled:hover,
.btn-primary-purple[disabled]:hover,
fieldset[disabled] .btn-primary-purple:hover,
.btn-primary-purple.disabled:focus,
.btn-primary-purple[disabled]:focus,
fieldset[disabled] .btn-primary-purple:focus,
.btn-primary-purple.disabled.focus,
.btn-primary-purple[disabled].focus,
fieldset[disabled] .btn-primary-purple.focus {
    background-color: #8e5991;
    border-color: #ad8cb7;
}

/* */

.btn-primary .badge {
    color: #007ACA; /*1*/
    background-color: #fff;
}


/* Ovverride primary color */

.btn-info {
    background-color: #8E98A0; /*1*/
    border-color: #7A8289; /*2*/
}

.btn-info:focus,
.btn-info.focus {
    background-color: #7A8289; /*2*/
    border-color: #60666B; /*3*/
}

.btn-info:hover {
    background-color: #7A8289; /*2*/
    border-color: #60666B; /*3*/
}

.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
    background-color: #60666B; /*3*/
    border-color: #4B5054; /*4*/
}

.btn-info:active:hover,
.btn-info.active:hover,
.open > .dropdown-toggle.btn-info:hover,
.btn-info:active:focus,
.btn-info.active:focus,
.open > .dropdown-toggle.btn-info:focus,
.btn-info:active.focus,
.btn-info.active.focus,
.open > .dropdown-toggle.btn-info.focus {
    background-color: #4B5054; /*4*/
    border-color: #4B5054; /*5*/
}

.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus {
    background-color: #8E98A0; /*1*/
    border-color: #7A8289; /*2*/
}

.btn-info .badge {
    color: #8E98A0; /*1*/
    background-color: #fff;
}

/* Add white button */
.btn-white {
    background-color: #F2F2F2; /*1*/
    border-color: #CCC; /*2*/
    color: #222;
}

.btn-white:focus,
.btn-white.focus {
    background-color: #DDD; /*2*/
    border-color: #AAA; /*3*/
    color: #222;
}

.btn-white:hover {
    background-color: #DDD; /*2*/
    border-color: #AAA; /*3*/
    color: #000;
}

.popover {
    background-color: #edf8ff;
    max-width: 600px;
    z-index: 2000;
}
.popover.right > .arrow:after {
    border-right-color: #edf8ff;
}
.popover-title {
    padding: 10px 14px 6px 14px;
    background-color: #d6edfb;
    line-height: 18px;
}
.popover-content {
    padding: 14px 14px 18px 14px;
}

.popover-content a, .popover-content a:active, .popover-content a:focus {
    color: #000;
    background-color: #ceecff;
    border-radius: 5px;
}

.popover-content a:hover {
    background-color: #b5e0fb;
}

@-webkit-keyframes spin2 {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

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

    to {
        transform: scale(1) rotate(360deg);
    }
}

/* Table jQuery normal and selected header */

.table > thead > tr > th {
    border-bottom: 1px solid #ddd;
}

.table .sortHeader, .table .sortHeaderBlack, .table .sortHeaderAccLookup, .table .sortHeaderPcLookup, .table .sortHeaderSfProductLookup, .table .sortHeaderCsLookup, .table .sortHeaderVbPcLookup {
    font-weight: normal;
    cursor: pointer;
}

.table .sortHeader:hover, .table .sortHeaderBlack:hover  {
    text-decoration: none;
}

.table .sortHeaderDESC, .table .sortHeaderASC, .table .sortHeaderBlackDESC, .table .sortHeaderBlackASC {
    font-weight: bold;
    cursor: pointer;
}

.table .sortHeaderASC::after {
    content: url('../Images/sortHeaderUp.png');
    margin-left: 5px;
}

.table .sortHeaderDESC::after {
    content: url('../Images/sortHeaderDown.png');
    margin-left: 5px;
}

.table .sortHeaderBlackASC::after {
    content: url('../Images/sortHeaderBlackUp.png');
    margin-left: 5px;
}

.table .sortHeaderBlackDESC::after {
    content: url('../Images/sortHeaderBlackDown.png');
    margin-left: 5px;
}

/* TABLE */

.table-hover > tbody > tr:hover {
    background-color: rgb(136, 161, 177, 0.07)
}

.table-hover > tbody > tr.no-hover:hover {
    background-color: inherit;
}

.table-bordered > tbody > tr, .table-bordered > tbody > th {
    padding-left: 10px;
}

.table-borderless > tbody > tr > td, .table-borderless > tbody > th > td {
    border-top: none;
    padding: 2px 5px;
}

.table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > th, .table > caption + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > td, .table > thead:first-child > tr:first-child > td {
    border-top: 1px; 
}
/* enable pointer cursor on hover on a link */
.javalink {
    cursor: pointer;
}

/* Notification popup auto close */

.alert-notification-absolute {
    display: none;
    z-index: 2001;
    position: absolute;
    bottom: 40px;
    left: 40px;
    padding: 15px 30px;
    background-color: green;
    color: white;
    border-radius: 4px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Select list tree */


.selectlist-tree .dropdown-menu {
    min-width: 10rem;
}

.selectlist-tree a:hover {
    text-decoration: none;
}

/* Status colors - used by zuora */

.zChargeInactiveColor {
    color: var(--etoColDarkRed);
}

.zChargeStatusColorPlanned, li .zChargeStatusColorPlanned a {
    color: var(--etoColBlue);
}

.zChargeStatusColorConfirmed, li .zChargeStatusColorConfirmed a {
    color: var(--etoColPurple);
}

.zChargeStatusColorActive, li .zChargeStatusColorActive a {
    color: var(--etoColGreen);
}

.zChargeStatusColorExpiring, li .zChargeStatusColorExpiring a {
    color: var(--etoColDarkOrange);
}

.zChargeStatusColorTerminated, li .zChargeStatusColorTerminated a {
    color: var(--etoColRed);
}

.zSubStatusColorActive, li .zSubStatusColorActive a {
    color: var(--etoColGreen);
}

.zSubStatusColorCancelled, li .zSubStatusColorCancelled a {
    color: var(--etoColDarkOrange);
}

.zSubStatusColorExpired, li .zSubStatusColorExpired a {
    color: var(--etoColRed);
}


.navbar, .navbar-default, .navbar-default .navbar-collapse, .navbar-default .navbar-form, .navbar-default .navbar-brand {
    border: none;
    background-color: white;
    color: #252626;
}

.navbar {
    margin-bottom: 0px;
    font-size: 15px;
}

.navbar-default .navbar-brand-main {
    font-size: 1.4em;
    padding: 12px 20px 16px 20px;
    height: auto;
}

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    background-color: #dceefa;
}

.navbar-default .navbar-brand img {
    height: 36px;
    float: left;
    padding-right: 15px;
}

.navbar-default .navbar-brand .navbar-brand-text {
    display: inline-block;
    padding-top: 10px;
    white-space: nowrap;
    vertical-align: middle;
}

.navbar-default .navbar-brand .navbar-brand-text span {
    font-weight: 700;
}

.navbar-default .navbar-nav > li {
    margin-right: 1px;
}

.navbar-default .navbar-nav > li > a {
    padding: 10px 14px;
    color: #252626;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    border: none;
    background-color: #f2f2f2;
}

.navbar-toggle {
    border:none;
    margin-top: 12px;
}

.navbar-toggle .icon-bar {
    height: 4px;
    width: 30px;
}

.navbar-right {
    /*border-left: 1px solid #F0F2F5;*/
}

.nav-tabs {
    border-bottom: none;
}

.body-content .nav-tabs {
    margin-left: 10px;
}

.nav-tabs > li > a {
    border: none;
    margin-right: 0px;
}

.navbar-nav > li > .dropdown-menu {
    margin-top: 0;
    border-radius: 8px;
}

.navbar-default .navbar-nav > .open > a:focus {
    background-color: white;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover {
    font-weight: bold;
    background-color: #f2f2f2;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background-color: #f2f2f2;
}

.dropdown .dropdown-menu li a i {
    font-size: 18px;
}

/* Style full screen only  */
@media (min-width: 768px) {
    .navbar-nav > li > a {
        margin-top: 12px;
        margin-bottom: 2px;
        padding-top: 10px;
        padding-bottom: 10px;
        border-radius: 10px;
    }

    .navbar-right {
        margin-right: 0;
    }

    .navbar-right > li > a {
        margin-top: 10px;
        padding-bottom: 5px;
    }

    .navbar-default .navbar-brand-main {
        border-right: 1px solid #F0F2F5;
    }

    
}
/* 
    Site Slider CSS 
*/

/* --- Site Slide Panel Core --- */
.site-slide-panel {
    position: fixed;
    top: 58px;
    right: 0; 
    transform: translateX(calc(100% + 40px));
    height: calc(100vh - 50px);
    width: 800px; /* Fallback width */
    background-color: #F0F2F5;
    border-top-left-radius: 10px;
    box-shadow: -15px 0 35px rgba(0,0,0,0.3);
    z-index: 900; /* Stays under BS3 Modals */
    display: flex;
    flex-direction: row;
    transition: transform 0.3s ease;
}

/* Toggled via JS */
.site-slide-panel.is-open {
    transform: translateX(0);
}

.site-slide-panel.is-dragging {
    transition: none;
}

.site-slide-panel-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.site-slide-panel-close-defaultbutton {
    position: absolute;
    top: 24px;
    right: 20px;
    z-index: 10;
    font-size: 28px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    opacity: 1;
    color: #EEE;
    text-shadow: none;
}

.site-slide-panel-close-defaultbutton:hover {
    opacity: 1;
    color: #FFF;
    background-color: rgba(255, 255, 255, 0.15);
}

/* --- Content & Split Panes --- */
.site-slide-panel-content-main {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
    padding-right: 10px;
    padding-bottom: 20px;
}

.site-slide-panel-content-main .panel, .site-slide-panel-content-main .alert {
    border-radius: 6px;
    margin-bottom: 10px;
}

.site-slide-panel-panes {
    height: 100%;
    padding: 10px 0px;
    position: relative;
}

.site-slide-panel-panes-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.site-slide-panel-panes-content-inner {
    padding: 15px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #eef0f3;
}

.site-slide-panel-panes-content-inner-flex {
    overflow-y: auto;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #eef0f3;
}


.site-slide-panel-panes-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.3em;
    color: #656565;
}

/* Style the iframe to seamlessly fill the space */
.document-preview-frame {
    width: 100%;
    height: 100%;
    flex: 1;
    border: none;
    background-color: #f0f2f5; /* Prevents transparent background issues */
    color: #222; /* Ensures text is visible if iframe content is transparent */
}


/* By default, the left pane takes 100% of the space unless split mode is active */
#site-slide-panel-pane-left {
    flex: 1;
    width: 100%;
}

#site-slide-panel-pane-right {
    flex: 1;
}

/* --- Resizers --- */
.slide-resizer-main {
    width: 12px;
    border-top-left-radius: 12px;
    background-color: #F0F2F5;
    cursor: ew-resize;
    flex-shrink: 0;
    z-index: 2;
}

.slide-resizer-split {
    width: 12px;
    background-color: #F0F2F5;
    cursor: ew-resize;
    flex-shrink: 0;
}

.slide-resizer-main:hover, .slide-resizer-main:active, .slide-resizer-split:hover, .slide-resizer-split:active {
    background-color: #d5d5d5;
}

/* Utility class applied to body during drag */
.disable-select {
    user-select: none;
}

/* Ensure line breaks (\n) are respected and the text wraps normally */
.ai-typing-container {
    font-size: 1.1em;
    white-space: pre-wrap;
    line-height: 1.5;
    min-height: 50px; /* Prevents the layout from jumping when typing starts */    
}