@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap');

/*******************************************************************************/
/* Cascade stiles shhets for IXC Web interface */ 
#ajax-loader{

}

/*:root {
    --primary: #0061f2;
    --secondary: #6900c7;
}
*/


/** {
margin: 0;
padding: 0;
}*/


html, body
{
    margin: 				0;
    padding: 				0;
    text-align: 			center;
    height:                  100%;        
}


div.Container {
    font-family:  			Tahoma, Verdana,Arial, Helvetica, sans-serif;
    font-size: 				0.7em;
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:100%;    
    min-height:100%; /* real browsers */
    background:                 url("../images/menu_sub.jpg");
    background-repeat:         repeat-y;     
}

* html #Container {
    height: 100%;
}

/* ── Dashboard-only layout lock ────────────────────────────────────────
   On the main dashboard (body.page-main-dashboard) we prevent any
   monitor from widening the outer display:table and causing page-level
   horizontal scroll.  On all other pages the table is left at
   table-layout:auto so wide data tables can trigger a normal body
   scrollbar as expected.
   ─────────────────────────────────────────────────────────────────── */

body.page-main-dashboard .main-layout-table {
    table-layout: fixed;
}

body.page-main-dashboard .main-layout-table .Page {
    width: 100%;
    overflow-x: hidden;
}

/* ── SubMenu column width lock ──────────────────────────────────────────
   In table-layout:auto the SubMenu table-cell grows to fit its content.
   This inner block div is hard-locked to 180px with overflow:hidden, so
   the cell always measures exactly 180px on every page.                  */
.submenu-width-lock {
    width: 180px;
    overflow: hidden;
    box-sizing: border-box;
}



table
{
    font-size:             1em;
}

/*********************************For Autocomplete**********************************************/






.Page .tab td a{
    display:block;
}
.Page .tab td{    	
    background-color: 		#B8E3E9;        
    padding: 3px;
    width:200px; 
}
.Page .tab td:hover{
    background-color: 		#FBB957;
    border-top: 1px solid #C17604;
    border-left: 1px solid #C17604;
    border-right: 1px solid #C17604;
}
.Page .tab .active{
    background-color: 		#FBB957;
    border-top: 1px solid #C17604;
    border-left: 1px solid #C17604;
    border-right: 1px solid #C17604;
}
.Page .tab .padding{
    background-color: 		#FFF;
    padding:2px;
    width:2px;
}

.Page .box {
    /* background-color:#F6F6F6;*/
    border:1px solid #E4E4E4;
    padding: 5px;
}

.Page .no-box {
    /* background-color:#F6F6F6;*/
    border:0px;
    padding: 5px;
}

.Page .box fieldset {
    border:1px solid #E4E4E4;
    margin:0;
}

.Page .margin_page{
    margin-bottom: 25px;
}

fieldset legend{
    font-weight:   bold;
    color:         #505050;
    font-size:     1.2em;
    padding-left:  3px;
    padding-right: 3px;
}
/*
fieldset legend input{
    font-size:0.8em;
}
*/


fieldset.collapsible {border-width: 1px 0 0 0; border-color: #E4E4E4;  border-style: solid; width: 60%; }
fieldset.collapsible legend { padding-left: 16px; background: url(../images/arrow_expanded.png) no-repeat 0% 40%; cursor:pointer; }
fieldset.collapsible legend:HOVER {color:navy; }

fieldset.collapsible.collapsed legend {
 background-image: url(../images/arrow_collapsed.png);
 width: 60%;
 }

.login-form{
    padding: 140px;
/*    width:      500px;*/
    /* margin-top: 200px; */


/*    flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  width: min-content;
  padding: 40px;
  border: 1px solid var(--stroke);
  border-radius: 8px;*/

}


.log_input {
/*      width: 200px;*/
/*    width: 100%;*/
  min-width: 75px;
/*  height: 40px;*/
  padding: 12px;
/*  border: 1px solid var(--stroke);*/
  border-spacing: 2px;
  border-radius: 4px;
  outline: none;
   background-color: #0B2E33;
/*  background: var(--background);*/
  font-family: Roboto,sans-serif;
  font-size: 14px;
  color: #fff;
}

.web_login {
    padding-top: 10px;
    color: #fff;
    font-size: 26px;
    font-family: Roboto,sans-serif;
    text-align: center;
    font-weight: 700;

}

.login-form Table{
    /*opacity: 0.9;*/
     width: 500px;
     height: 300px;
    background-color: #0B2E33;
    border-radius: 20px;
/*    border: 2px solid #cdcdcd;*/
    border: 5px solid #fff;
}
.login-form Table th{
    border :0px;    
    padding:5px;    
    vertical-align: top;
    text-align: left;
    color: #FFF;
    font-weight: bold;
    font-size: 13px;
    background:     url("../images/menu_main_login.gif");    	
    background-repeat: repeat-x;
    border-bottom: 2px solid #cdcdcd;
}
.login-form Table td{
/*    padding:5px;*/
    height: 30px;
}
.login_submit{
    font-family: Roboto,sans-serif;
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    padding: 12px;
    width: 195px;
    border-radius: 4px;
  background-color: #4F7C82;
     color: #fff;
}

div.auto_complete{
    border-left:1px solid #93B1B5;
    border-bottom:1px solid #93B1B5;
    cursor:default;

    height:100px;
    background: #fff;
    overflow-y: auto;
}
div.auto_complete ul{

    margin:0;
    padding:0;

    list-style-type:none;
}
div.auto_complete ul li {
    font-weight:bold;
    margin:0;
    padding:3px;
}
div.auto_complete ul li.selected{
    background-color:#316ac5;
    color:#fff;
    font-weight:bold;
}
div.auto_complete ul strong.highlight{

    margin:0;
    padding:0;
}
.auto_complete_link{
    position:relative; 
    top:4.5px;
    right:4px;
}
/*******************************************************************************/
#selectbox{
    width:                  120px;
    /*
    background-color:       cyan;
    */
    border:                 0px;
    color:                  navy;
    text-align:             center;
    font-size:              11pt;
    font-family:            garamond;
}

h1, h2, h3, h4
{
    margin:                0;
    font-family:  			Tahoma, Verdana,Arial, Helvetica, sans-serif;

}

p
{
    line-height:           1.4em;
}

hr
{
    border:                0;
    border-top:            1px solid #505050;
    height:                1px;
}

a
{
    text-decoration:       none;
    color: var(--vi-link-color, #000000);
}

a:visited
{
    color: var(--vi-link-visited-color, #000000);
/*    color : #CAF0F8; */
}

a:hover
{ 
    text-decoration:       underline;
    color:                 navy; 

}

a:active
{
}

img
{
    border-width: 0;
    vertical-align: middle;
}

input,select,textarea
{
    font-size:                 8pt;
    font-family:               Tahoma, Arial, Helvetica, sans-serif;
    font-weight:               bold;
    margin-bottom:1px;
    margin-top:1px;
    vertical-align:middle;

}
/*
input[type="text"]:focus, textarea:focus, select:focus {
    background: #ffe;
}


input:valid {
  background-color: palegreen;
}

input:invalid {
  background-color: lightpink;
}
*/
input.fieldWithErrors {
  padding: 2px;
    border: red solid 1px;
    display: table;
    background-color: #ffd2d5;    
}

  @media (prefers-color-scheme: light) {}


.odd
{
  background-color: 		#FFFFFF;
}

.even {
  background-color      :#daeef1;
}




  @media (prefers-color-scheme: light) {}


.odd
{
  background-color:         #FFFFFF;
}

.even {
  background-color      :#daeef1;
}



.Bold
{
    font-weight:               bold;
}

.Title {
    /*    padding: 1px 0.5em 1px 0.5em;*/
    padding-left:0.5em;
    padding-right:0.5em;
    height:  26px;
    background-color:           #0B2E33;
    background-position: left center;
    color:                      #FFFFFF;
/*    background-image:          url("../images/title_bg_gradient.png");   */
    background-image:           url("../images/menu_main.gif");
    background-repeat:         repeat-x;
    font-weight:                bold;
}

.Title a
{
    text-decoration:       none;
    color:                var(--vi-border);
}

.Title #left-title{
    float:left;
    margin-top: 3px;

}

.Title #center-title{
}

.Title #right-title{
    float:        right;
    font-weight:  normal;
    display: block;
    margin-top: 2px;
}

.Title #right-title a{
    padding-left: 5px;
}

.Title #right-title a:hover{
    text-decoration:underline;    
}
/*
DIV.Footer {
    position:absolute;
    width:100%;
    bottom:  0px;
    height:  16px;    
    color:                      #FFFFFF;
    background-image:          url("../images/title_bg_gradient.png");
    background-position: left center;
    background-repeat:         repeat-x;
    font-weight:                bold;    
}
*/

DIV.Footer {    
    width:100%;
    bottom:  0px;
    height:  16px;
    color:                      #FFFFFF;
    background-image:          url("../images/title_bg_gradient.png");
    background-position: left center;
    background-repeat:         repeat-x;
    font-weight:                bold;        
    position: relative;
    margin-top: -16px; 
    font-size: 0.7em;
}

.end_content {
    position: relative;
    height: 16px;
}

.MainMenu
{


      width: 100%;        
/*    padding-top:3px;*/
    font-weight:                bolder;
    font-size:                  8pt;
    font-family:                Tahoma, Verdana, Arial, Helvetica, Serif;
/*    background-image:           url("../images/menu_main.gif");*/
    display: table;

}
.MainMenu #main-tr{
display: table-cell;
vertical-align: bottom;
    display: table-row;
    height:54px;
    text-align: left;   



}



.MainMenu A{

          background-size: 72%;
    color:              #4F7C82;    
/*    padding-top:30px;*/
    background-repeat:   no-repeat;
    /* background-position: top center; */
    /* text-align: center; */
/*    opacity: 0.8;*/
    /*filter:alpha(opacity=50);*/
    display: table-cell;
/*    padding-left: 1.5em;
    padding-right: 1.5em;*/
    min-width: 57px;    
        vertical-align: bottom; 
         font-size:                  10pt;  
         padding-top: 42px;   
}


.MainMenu A:hover{
    opacity: 1;
    /*filter:alpha(opacity=100);*/
}




.MainMenu #main { 

       background-image:  url('../images/circle2.png');
     /* background-position: 1em 0; */
    /* padding-left:0.5em; */
    /* min-width: 0px;*/ */

  
}
.MainMenu #card_types        		{background-image:  url('../images/card.png');}
/*.MainMenu #reload_config         {float:right;background-image:  url('../images/reload.png');}*/

/*.MainMenu #reload_config         {float:right;background-image:  url('../images/all40.png');}
.MainMenu #reload_config_part         {float:right;background-image:  url('../images/reloadnoclock.png');}*/

.MainMenu #reload_config         {    background-image:  url('../images/reload2.png');}
.MainMenu #reload_config_part         {background-image:  url('../images/reloadnoclock.png');}


.MainMenu #timer_5         {background-image:  url('../images/master5.png');}
.MainMenu #timer_10         {background-image:  url('../images/master10.png');}
.MainMenu #timer_20         {background-image:  url('../images/master20.png');}
.MainMenu #timer_30         {background-image:  url('../images/master30.png');}
.MainMenu #timer_40         {background-image:  url('../images/master40.png');}
.MainMenu #timer_50         {background-image:  url('../images/master50.png');}
.MainMenu #timer_60         {background-image:  url('../images/master60.png');}
.MainMenu #timer_70         {background-image:  url('../images/master70.png');}
.MainMenu #timer_80         {background-image:  url('../images/master80.png');}
.MainMenu #timer_90         {background-image:  url('../images/master90.png');}
.MainMenu #timer_100         {background-image:  url('../images/master100.png');}
.MainMenu #management            {background-image:  url('../images/management.png');}
.MainMenu #financial_tools                 {background-image:  url('../images/bundle_32.png');}
.MainMenu #reports               {background-image:  url('../images/reports.png');}
.MainMenu #configurations        {background-image:  url('../images/configurations.png');}
.MainMenu #service_packages      {background-image:  url('../images/servicepackages.png');}
.MainMenu #network_configurations{background-image:  url('../images/networkconfigurations.png');}
.MainMenu #test_routes {    background-image:  url('../images/test_routes.png');}
.MainMenu #troubleshooting       {background-image:  url('../images/troubleshooting.png');}
.MainMenu #callpath       {      background-image:  url('../images/split2.png');}




.SubMenu
{
    width: 215px;
    font-size:                  11pt;     
    text-align:                left;
}

.SubMenuInfo
{
    font-weight: bolder;
    padding-top: 6px;
    padding-left: 0.5em;

}

#sub_menu
{
    height:                     100%;
    padding:1em;

}

.SubMenu A{
/*    padding-left:1.5em;*/
/*    display:block;*/
    padding-bottom: 0.1em;
/*    width: 195px;*/
}

/* SubMenu A:hover handled in violet theme block below */


.SubMenu A.title
{
    font-weight:               bold;
    padding-left:0.5em;
    padding-top: 8px;
    color: #000;
    font-family: sans-serif;
}

.SubMenu A.title_nomarg
{
    font-weight:               bold;
    padding-left:0.5em;
     color: #000;
     font-family: sans-serif;

}


.SubMenu #menu_check_box {
  margin:15px 0 0;
}

.SubMenu #menu_check_box input {
  margin:0 5px 0 10px;
}

/*******************************************************************************/
/* Page section */
.Page .middle{
    vertical-align: middle;
}
.Title .red{
    color: red;
}

.Title .green{
   color: #6AD91B;
}

.Page .red_selectbox {
    color:  #e74c3c ;
    background-color: white;
}

.Page .orange_selectbox {
    color:  #eb984e;
    background-color: white;
}

.Page .yellow_selectbox {
    color:  #f4d03f ;
    background-color: white;
}

.Page .red{
    color: #800000;
}

.Page .green{
    /* color: #008000; */
    color: #5cff7d;
}

.Page .orange{
    color: #a3a300;
}


.Page .is_skip{
    background-color: #ffd18c;  
}
.Page .is_closed{
    background-color: #cfcfcf;  
}

.Page .is_base{
    background-color: #8ead9d;
    color: #fff;   
}

.Page .partly_paid{
    background-color: #e2f4c2;
    /* color: #fff;    */
}       


.Page .is_base td A{
    color: #fff;
}
.Page .is_base td A:hover{
    color: red;

}


.Page
{
    text-align: 			    left;
    background-color:           #FFFFFF;
}

.Page h1
{
    height: 				28px;
    color: 					#555555;
    vertical-align: 		middle;
    text-align: 			left;
    font-size: 				1.25em;
    font-weight: 			bold;
    padding-top: 3px;
    background-color:           var(--vii-mid);
}

.page_top_hr{
    position: absolute;
    border-bottom: 			#4F7C82 3px solid;
    margin-top: 10px;
    width: 100%;
    margin-left: 220px;


}

.Page .Title
{
    border-collapse: collapse;
    height: 	     25px;
    color: 	     #555555;
    text-align:      left;
    font-size: 	     1.25em;
    font-weight:     bold;
    background-color: #FFFFFF;
}

/*
.Page .Title input
{
    font-size: 1em;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.Page .Title select
{
    font-size: 1em;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-weight: bold;
}
*/

.Page #scrolling{ 
    width : 1000px;
    height : 400px;
    overflow : auto;
    border : 5px solid #B8E3E9;
    padding: 3px;
}
.Page #log_content{
    font-family:Courier;
    font-size: 0.7em;
    background-color: black;
    color: lime
}

div.fieldWithErrors{
    float: left;
    padding-right:5px;
}
.fieldWithErrors input
{
    padding: 2px;
    border: red solid 1px;
    display: table;
    background-color: #ffd2d5;    
}

.fieldWithErrors select
{
    padding: 2px;
    border: red solid 1px;
    display: table;
    background-color: #ffd2d5;
}

.fieldWithErrors textarea
{
    padding: 2px;
    border: red solid 1px;
    display: table;
    background-color: #ffd2d5;
}
/*******************************************************************************/
/* Table */
.Page .Table
{
    border-collapse: 		collapse;
    font-size: 				var(--vi-table-font-size, 9.5pt);
    font-family: 			Tahoma, Verdana, Arial, Helvetica, Serif;
    color: 					var(--vi-table-color, #000000);
}

.Page .Table th
{
    text-align:				center;
    font-size: 				8pt;
    font-weight: 			bold;
    background-color: 		#B8E3E9;
    height: 				16px;
}

/* Table header */
.Page .Table .Header
{
    text-align:				center;
    font-size: 				8pt;
    font-weight: 			bold;
    background-color: 		#B8E3E9;
    height: 				16px;
    white-space:           nowrap;

}

.Page .Table .Headerwrap TD
{
    text-align:center;
    font-size: 8pt;
    font-weight: bold;
    background-color: #B8E3E9;
    height: 16px;
    white-space:           normal;
    border: 1px solid #4F7C82;
    border-collapse: collapse;
}


.Page .Table .Footer
{
    text-align:				left;
    font-size: 				8pt;
    font-weight: 			normal;
    background-color: 		#B8E3E9;
    height: 				16px;
    color:                  black;
    background-image: none;
}


/* Table header cells */
.Page .Table .Header TD
{
    padding-right: 			3px;
    padding-left: 			3px;
    border-collapse: 		collapse;	
    border: 1px solid 		#4F7C82;
}

.Page .Table .Footer TD
{
    padding-right: 			3px;
    padding-left: 			3px;
    border-collapse: 		collapse;	
    border: 1px solid 		#4F7C82;
    font-size:              7pt;
}




.Page .Table .Header TH
{
    padding-right: 			1px;
    padding-left: 			1px;
    font-size:              9pt;
    border-collapse: 		collapse;	
    border: 				1px solid #4F7C82;

}

.HeaderHi,
.Page .Table .HeaderHi TH
{
    padding-right:          3px;
    padding-left:           3px;
    font-size:              9pt;
    border-collapse:        collapse;   
    border:                 1px solid #4F7C82;
    background-color:       #93B1B5;
}

.Page .Table .Headerwrap TH
{
    text-align:center;
    font-size: 8pt;
    font-weight: bold;
    background-color: #B8E3E9;
    height: 16px;
    white-space:           normal;
    border: 1px solid #4F7C82;
    border-collapse: collapse;
}


.Page .Table .Header 
{
    padding-right: 			3px;
    padding-left: 			3px;
    border-collapse: 		collapse;	
    border: 				1px solid #4F7C82;
}

/* Table cells */
.Page .Table TD
{
    padding-bottom:2px;
    padding-top:2px;
    padding-right: 			3px;
    padding-left: 			3px;
    border-left: 			1px solid #B8E3E9;
    border-top: 			1px solid #ffffff;
    border-bottom: 			0;
    border-right: 			0;
}




/* Table cells with Numeric value */
.Page .Table .Number
{
    text-align: 			right;
    padding-right: 			5px;
}

.Page .Table .NumberRed
{
    text-align: 			right;
    padding-right: 			5px;
    color:					red;
}


/* Even table rows */
.Page .Table .Even
{
    background-color:#F0F0F6;
    height: 				18px;
}

/* Odd table rows */
.Page .Table .Odd
{
    background-color: 		#FFFFFF;
    height: 				18px;
}

.Dis
{
    background-color:     #a3acb5;
}




.Table tr.company td.name a { padding-left: 16px; white-space:nowrap; }
.Table tr.company.parent td.name a{ background: url('../images/bullet_toggle_minus.png') no-repeat; }


.Page .Table tr:Hover
{
    background-color: 		#93B1B5;

}


/* Odd table rows */
.Page .Table .group
{
    height: 				18px;
}


.Page .Table .gray
{
    background-color: 		#e5e5e5;

}

/*******************************************************************************/
/* Monitor */



.monitor-page{
    width: 100%;    
}



.monitor-page .monitor{
    border: 3px solid #B8E3E9;
    margin-right: 10px;
    margin-bottom: 20px;
/*    width: 45%;*/
 
    clear:both;
     display: inline-block;

}


.fullmonitor {
    width: 100% !important;
}


.halfmonitor {
    margin:2px !important;
    width: 48% !important;
/*    width: 49% ;*/
       vertical-align: top;

}



.monitor-page .monitor .monitor-title{
    background:             url("../images/monitor_header.gif");
    background-repeat: repeat-y;
    height: 22px;
    padding-right:5px;
    padding-left:5px;
    padding-top: 2px;
    font-size: 1.2em;
}

.monitor-page .monitor .monitor-title img{    
    vertical-align: middle;
}

.monitor-page .monitor .monitor-title a img:hover{
    border:  1px solid gray;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 1px;
    padding-bottom: 1px;
}

.monitor-page .monitor .monitor-title label{
    font-weight: bold;    
    float: left;   
    color: #0B2E33;
}

.monitor-page .monitor .monitor-title span{    
    float: right;
    padding-right: 28px;
    cursor: pointer;
}


.monitor-page .monitor .monitor-content{ 
}


.Page .bottom_list{

}
.Page .bottom_list td{
    vertical-align: top;

}

.Page .Monitor .even
{
    background-color:#F0F0F6;
}

.Page .Monitor .odd
{
    background-color: 		#FFFFFF;
}

.Page .TabSheet
{
    margin: 				0;
    border:                 0;
    background:             url("../images/monitor_header.gif");
    padding-right: 			10px;
    padding-left: 			10px;
    text-align: 			left;
    font-weight:            bold;
}

.Page .Monitor .error
{
    color: 			white;
    background-color: 		red;
    font-weight: 		bold;
    text-align: 		center;
}

/*******************************************************************************/
/* SQL Query */
.Page .SQLQueryHeader
{
    margin: 				0;
    border:                 0;
    background:             url("../images/monitor_header.gif");
    padding-right: 			10px;
    padding-left: 			10px;
    text-align: 			left;
    font-weight:            bold;
}

.Page .SQLFieldHeader
{ 
    font-weight:                    bold;
    background:                     url("../images/monitor_header.gif");
}

.Page .SQLQuery TH
{
    border: 			#4F7C82 1px solid;

}
.Page .SQLQuery TD
{
    border: 			#4F7C82 1px solid;
    font-weight: 			normal;

}



/*******************************************************************************/
/* Form */
.Page .Form
{
    margin: 				0;
    border-top: 			#4F7C82 1px solid;
    border-bottom: 			#4F7C82 1px solid;
    border-left: 			#4F7C82 1px solid;
    border-right: 			#4F7C82 1px solid;
    background-color: 		#B8E3E9;
    padding-right: 			10px;
    padding-left: 			10px;    
}

.Page Form
{
    margin-bottom: 10px;
}

.Page .Form .Field
{
    font-weight: 			bold;
}

.Page .Form TD
{
    vertical-align: 				middle;
}

.Page .Form .Red
{
    font-weight: 			bold;
    color:					red;
}

.Page .Form label{
    font-weight: bold;
    float: left;
    text-align: right;
    margin-left: -180px; /*width of left column*/
    width: 175px; /*width of labels. Should be smaller than left column to create some right
    margin*/
}

.Form label.floating{
    font-weight: normal;
    margin-left: 0px;
    text-align: left;
    width: 220px;
}

.Form label.dow{
    width: 50px;
}

.Form label.dom{
    width: 100px;
}

.Form label.month{
    width: 200px;
}

.Form label.floating:hover{        

    background-color:#F0F0F6;
    cursor: pointer;
}


.FormFin label{
    font-weight: bold;
    float: left;
    text-align: right;
    margin-left: -180px; /*width of left column*/
    width: 175px; /*width of labels. Should be smaller than left column to create some right
    margin*/
}

.FormFin label.floating{
    font-weight: normal;
    margin-left: 0px;
    text-align: left;
    width: 300px;
}

.FormFin label.floating:hover{
    background-color:#F0F0F6;
    cursor: pointer;
}
/*******************************************************************************/
/* */
.Page .FormFin
{
    margin: 				0;
    border-top: 			#C17604 1px solid;
    border-bottom: 			#C17604 1px solid;
    border-left: 			#C17604 1px solid;
    border-right: 			#C17604 1px solid;
    background-color: 		#FBB957;
    padding-right: 			10px;
    padding-left: 			10px;
}



.Page .FormFin .Field
{
    font-weight: 			bold;
}

.Page .FormFin TD
{
    vertical-align: 				top;
}

.Page .FormFin .Red
{
    font-weight: 			bold;
    color:					red;
}

.Page .FormFin .Tab
{
    background-color:		#FA9D12;
    font-weight: 			bold;
}


.SubMenu > .MainMenu {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
}


.Page .Error
{
    font-weight: 			bold;
    color:			        red;
    text-align:				left;
    border:                 0px;
}

/***** Flash & error messages ****/
#errorExplanation, div.flash, .nodata, .warning {
    padding: 4px 4px 4px 30px;
    /*margin-bottom: 12px;*/
    font-size: 1.1em;
    border: 2px solid;
}

div.flash {margin-top: 8px;}

div.flash.error, #errorExplanation {
    background: url(../images/exclamation.png) 8px 50% no-repeat;
    background-color: #ffe3e3;
    border-color: #dd0000;
    color: #880000;
}

div.flash.notice {
    background: url(../images/true.png) 8px 5px no-repeat;
    background-color: #dfffdf;
    border-color: #9fcf9f;
    color: #005f00;
}

div.flash.warning {
    background: url(../images/warning.png) 8px 5px no-repeat;
    background-color: #FFEBC1;
    border-color: #FDBF3B;
    color: #A6750C;
    text-align: left;
}

.nodata, .warning {
    text-align: center;
    background-color: #FFEBC1;
    border-color: #FDBF3B;
    color: #A6750C;
}

#errorExplanation ul { font-size: 0.9em;}
#errorExplanation h2, #errorExplanation p { display: none; }




.Page .Button
{
    border-top: 			#4F7C82 1px solid;
    border-bottom: 			#4F7C82 1px solid;
    border-right: 			#4F7C82 1px solid;
    border-left: 			#4F7C82 1px solid; 
    height: 				20px;
    font-size: 				8pt;
    background-color: 		#B8E3E9; 
    font-weight:			normal;
    width: 					120px;
}

#admin .entry form, #admin .entry form div {
    display: inline;
}



.pagination span.disabled {

    color:gray;
    margin:4px;
    padding:1px;
}


.pagination {
    font-size:10px;
    font-weight:bold;
    padding: 4px;
}
.pagination a:hover, .pagination a:active {
    background-color: #FFF;
    color:#000000;
}

.pagination a {
    border:1px solid gray;
    color:#000;
    margin:2px;
    padding:2px;
    text-decoration:none;
}

.pagination span.current {
    background-color:#FFF;
    border:1px solid gray;
    color:#000;
    margin:4px;
    padding:2px;
}

.pagination .prev_page{
    border: none;
}
.pagination .next_page{
    border: none;
}

/* Style for show localization language*/
.locales{    
    color:yellow;
    margin-left:10px;
    background-color:#4F7C82;
    border: 0;
    height:15px;
    font-size: 9px;
}
.locales a {
    color:yellow;
    font-weight:bold;
    padding-left:5px;
    padding-right:5px;

}
#page_content{
    margin-top: 10px;
    margin-left: 5px;
    padding-right: 10px;
}

.Page #page_header{

    /*padding: 3px 5px 5px;*/
    margin-left: 5px;
    /* margin-top: 2px; */
  /*  padding-top : 3px;
    padding-bottom: 3px;*/
    color: 			#555555;
    vertical-align: 	middle;
    text-align: 		left;
    font-size: 		1.5em;
    font-weight: bold;    
    position: relative;
}

.Page #page_header a {
  float:right;
  padding-right: 10px;
}

#hide_flash {
  float:right;
}

.quick-search{
    margin:0 10px;
    float: right;
}

.sub-quick-search{
    /*margin:0 10px;
    float: right;    */
    margin-top: -35px;
    position: absolute;
    right: 10px;
}




.quick-search input[type="text"], .sub-quick-search input[type="text"]{
    background-image:           url("../images/search.png");
    background-repeat: no-repeat;
    background-position: 0% 50%;
    border: 1px solid #a7a6aa;
    padding-left: 17px;
    padding-top: 2px;
    padding-bottom: 2px;

}
/*
.quick-search input[type="text"]:focus{
       background-image:           url("../images/search_active.png");
}
*/

#page_header input, #page_header select{
    width: 150px;
    margin-left: 5px;
}

/***** Icons *****/
.icon {
    background-position: 0% 50%;
    background-repeat: no-repeat;
    padding-left: 20px;
    padding-top: 2px;
    padding-bottom: 3px;
}

/* You cannot directly set the displayed size of the image via background-image,
   but you can control the rendered area with width/height or background-size. 
   For example: */
.icon-add { 
    background-image: url(../images/plus.png); 
    background-size: 16px 16px; /* Set desired background icon size */
    width: 16px;               /* Set the element width */
    height: 16px;              /* Set the element height */
    /* display: inline-block;     Ensures width/height are respected */
}
.icon-edit { background-image: url(../images/edit1.png); background-position: right;padding-left: 0px;padding-right: 20px; background-size: 16px 16px; /* Set desired background icon size */
    width: 16px;               /* Set the element width */
    height: 16px;              /* Set the element height */
   
}
.icon-spreadsheet { background-image: url(../images/spreadsheet.gif); }
.icon-email { background-image: url(../images/email.png); }
.icon-lock  { background-image: url(../images/locked.png); }
.icon-unlock  { background-image: url(../images/unlock.png); }
.icon-del { background-image: url(../images/delete_record.png); }
.icon-export-csv { background-image: url(../images/icons/csv.gif); }
.icon-xls { background-image: url(../images/report-33.png); }


.btn {
    /* margin: 2px; */
    margin-left: 1px !important;
    width:80px !important;
    background-color: #016bc1;
    color: #fff;
    border-radius:3px;
    /* min-height:33px; */
    /* display: inline-block; */
      /* float:none; */
    /* height:30px; */
    /* font-size:18px; */
}

.newbutton1 {
    margin: 5px;
    min-width:150px;
    min-height:33px;
    display: inline-block;
    float:none;
    height:30px;
    /*padding:5px;*/
    font-size:18px;
    text-decoration: none;
    color: #fff;
    border-radius:10px;
    box-shadow: -2px 4px 3px #5a666f;
     /*background-color: #5ca1d9;*/
     /*background-color: #5ca1d9;*/
     background-color: #016bc1;
    outline: none;
    /*border:1px solid #fff;*/
    /*border:1px solid whitesmoke;*/
    font-family:sans-serif;
}


.newbutton1:hover {background-color: #014b87}

.newbutton1:active {

  box-shadow: 0 2px 3px #7c96aa;
  transform: translateY(2px);
}

.newbutton1_no_float {float:none;}

.default_submit {
    float:left;
    box-shadow:inset 0px 1px 3px 0px ;
    width:100px;
    height:28px;
    font-family:sans-serif;
    font-size:20px;
    background-color:  #daeef1;
    border:1px solid #B8E3E9;
    color: #000;
    border-radius:6px;
}

.nondefault_submit {
    float:none;
   }



tr span.expander {background-image: url(../images/bullet_toggle_plus.png); padding-left: 15px; background-repeat: no-repeat; margin-left: 0; cursor: pointer;}
tr.open span.expander {background-image: url(../images/bullet_toggle_minus.png);  background-repeat: no-repeat;}

.Table td.groupm {  background: url(../images/group.png) no-repeat 0% 50%; padding-left: 20px; font-weight: bold;}
.groupm {  background: url(../images/group.png) no-repeat 0% 50%; padding-left: 20px;}
.Table td.user {  background: url(../images/user.png) no-repeat 0% 50%; padding-left: 20px; font-weight: bold;}
.user {  background: url(../images/user.png) no-repeat 0% 50%; padding-left: 20px;}

Table td.buttons {
    text-align:right;
    white-space:nowrap;
    width:15px;
}


.Page fieldset.even{
    background-color: transparent;
    background-color: #FFFFFF;
}
.Page fieldset.even legend{
    background-color: #FFFFFF;
    border-top:    1px solid  #828183;
    border-left:   1px solid  #828183;
    border-right:  1px solid  #828183;
}

.Page fieldset.odd{
    background-color: #daeef1;
}

.Page fieldset.odd legend{
    border-top:    1px solid  #828183;
    border-left:   1px solid  #828183;
    border-right:  1px solid  #828183;
    background-color: #daeef1;
}

a.sort { padding-left: 2px; padding-right: 6px; background-position: 100% 50%; background-repeat: no-repeat; display:block; }

/*
a.sort{
	background-image: url(../images/bg.png);
	background-repeat: no-repeat;
	background-position: center right;
}
*/
a.sort.asc  { background-image: url(../images/sort_asc.png);}
a.sort.desc { background-image: url(../images/sort_desc.png);}


/***** Ajax indicator ******/
#ajax-indicator {
    position: absolute; /* fixed not supported by IE */
    background-color:#eee;
    border: 1px solid #bbb;
    top:35%;
    left:40%;
    width:20%;
    font-weight:bold;
    text-align:center;
    padding:0.6em;
    z-index:100;
    filter:alpha(opacity=50);
    opacity: 0.5;
}

html>body #ajax-indicator { position: fixed;}

#ajax-indicator span {
    background-position: 0% 40%;
    background-repeat: no-repeat;
    background-image: url(../images/loading.gif);
    padding-left: 26px;
    vertical-align: bottom;
}

.highlight{
    background-color: #fffccc;
    margin: 1px;
}

.highlight_price{
    background-color: #a3c7e8;
    margin: 1px;
}

/***** Tabs *****/
#page_content .tabs {height: 2.6em; margin-bottom:1em; position:relative; overflow:hidden;}
#page_content .tabs ul {margin:0; position:absolute; bottom:0; padding-left:1em; width: 2000px; border-bottom: 1px solid #bbbbbb;}
#page_content .tabs ul li {
    float:left;
    list-style-type:none;
    white-space:nowrap;
    margin-right:8px;
    background:#fff;
    position:relative;
    margin-bottom:-1px;
}



/*
#page_content .uni_tab .tabs ul li {
    background: #999999;
}

#page_content .uni_tab .tabs ul li a:hover {
    background-color:yellow;

}

#page_content .uni_tab .tabs ul li a{
    background-color: gray;
}

#page_content .uni_tab .tabs ul li a.selected {
    background-color: #B8E3E9;
}

#page_content .uni_tab .tabs ul li a.selected:hover {
    background-color: #fff;
}
*/



#page_content .tabs ul li a{
    display:block;

    text-decoration:none;
    line-height:1.3em;
    padding:4px 6px 4px 6px;
    border: 1px solid #ccc;
    border-bottom: 1px solid #bbbbbb;
    background-color: #e6e6e6;
    color:#4d4d4d;
    font-weight:bold;
}

#page_content .tabs ul li a:hover {
    background-color: #ffffdd;
    text-decoration:none;
}

#page_content .tabs ul li a.selected {
    background-color: #fff;
    border: 1px solid #bbbbbb;
    border-bottom: 1px solid #fff;
}

#page_content .tabs ul li a.selected:hover {
    background-color: #fff;
}

#page_content .tabs ul li.back a{
    background-color: #FFFFFF;
    border: 0;
    color: #008000;
}

#page_content .tabs ul li.back a:hover {
    background-color: #008000;
    color: #FFFFFF;
    text-decoration:none;
}




div.tabs-buttons { position:absolute; right: 0; width: 48px; height: 24px; background: white; bottom: 0; border-bottom: 1px solid #bbbbbb; }

button.tab-left, button.tab-right {
    font-size: 0.9em;
    cursor: pointer;
    height:24px;
    border: 1px solid #ccc;
    border-bottom: 1px solid #bbbbbb;
    position:absolute;
    padding:4px;
    width: 20px;
    bottom: -1px;
}

button.tab-left {
    right: 20px;
    background: #eeeeee url(../images/bullet_arrow_left.png) no-repeat 50% 50%;
}

button.tab-right {
    right: 0;
    background: #eeeeee url(../images/bullet_arrow_right.png) no-repeat 50% 50%;
}

.contextual {float:right; white-space: nowrap; line-height:1.4em;margin-top:2px;margin-right:142px; padding-left: 10px; font-size:0.8em;}
/*.contextual input, .contextual select {font-size:0.9em;}*/





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

.SubMenu ul li {	
    margin:0px;
    padding:0px;    
}

.SubMenu ul li a {
    padding-left:1em;
    display:block;
    padding-bottom: 0.1em;
    width: 195px;
    font-family: sans-serif;
}

.SubMenu ul li a.title
{
    font-weight: bold;    
}


/*****  UL  UL  UL  ****/
.SubMenu ul ul {
    margin-left:1em;
}


#logblock{
	position:fixed;
	top:20%;
	left:30%;
	z-index:100;
	width:500px;
	background-color:white;
    border: 2px solid #B8E3E9;
	display:none;
	padding:20px;
}
#logwrap {
	width:100%;
	height:300px;
	overflow:auto;	
}
#relativewrap {
	postition: relative;
	width:100%;
	overflow:hidden;
}
.clink {
	position:absolute;
	top:5px;
	left: 5px;
	z-index:100;
}

.calwrap {
	overflow: hidden;
}
.cronlines {
	margin:0 5px 0 250px;
}
span.cronlog {
	color:silver;
}
span.future {
	color: green;
}

#ri_en {
  accent-color: #449434;
}

.peers_main {
      background-color:       #D6D6D6;
        width: 600px;
      border: 1px solid #4F7C82;
}

.peers_notmain {
      background-color:       #D6D6D6;
        width: 600px;
      border: 1px solid #4F7C82;
}

.bgcolor_default {
    background-color: #FFF;
}



  .Page .Table .br_report_total TH {
    border-collapse: seperate;
    text-align:right;
     border:3px solid #B8E3E9;
    background-color: #93B1B5; 
    border-spacing:2px;
    padding:4px;
    }



.ping_results {

    width: 50%;
    height: 50%;
    padding:5px;
    border : 5px solid #B8E3E9;
    font-family:Courier;
    font-size: 1.4em; 
    background-color: #daeef1; 
     color: #0B2E33
}

.colorgray {
    
      color: gray !important;
      /*color: gray;*/
}

.oddterm {
background-color:  var(--vi-pale);
}

.eventerm {
background-color:  #daeef1;
}

.filed_money {
    background-color:  #93B1B5;
    border-radius: 5px;
    width: 80px;
}


/* ===================================================================
   WINTER CHILL THEME — global overrides
   =================================================================== */

:root {
  --vi-dark:   #0B2E33;   /* dark teal — header / footer / emphasis    */
  --vi-main:   #4F7C82;   /* primary teal — buttons, links, accents    */
  --vi-mid:    #4F7C82;   /* medium teal — borders, sort headers       */
  --vi-light:  #93B1B5;   /* light teal — hover, selected rows         */
  --vi-pale:   #B8E3E9;   /* pale teal — table headers, form areas     */
  /* --vi-ghost:  #daeef1;   almost-white teal — even rows, bg         */
  --vi-ghost:  #e0e9ea; 

  --vi-border: #ffffff;   /* white border                              */
  --vi-white:  #b8cfd3;

  --vi-frost:  #E8F5F7;   /* frost teal — lightest glass tint               */
  --vi-deep:   #071820;   /* deep background — darkest teal shadow          */
  --vi-navy:   #111D2A;   /* dark navy — header / footer glass tint         */
  --vi-add-color: #3c939e;
  /* RGB channel versions — use as: rgba(var(--vi-dark-rgb), 0.5) */
  --vi-dark-rgb:    11,  46,  51;
  --vi-main-rgb:    79, 124, 130;
  --vi-mid-rgb:     79, 124, 130;
  --vi-light-rgb:  147, 177, 181;
  --vi-pale-rgb:   184, 227, 233;
  --vi-ghost-rgb:  218, 238, 241;
  --vi-border-rgb: 255, 255, 255;
  --vi-white-rgb:  184, 207, 211;
  --vi-frost-rgb:  232, 245, 247;
  --vi-deep-rgb:     7,  24,  32;
  --vi-navy-rgb:    17,  29,  42;
  /* Table font size & color — adjustable from the theme panel */
  --vi-table-font-size: 9.5pt;
  --vi-table-color: #000000;
  /* Link colors — adjustable from the theme panel */
  --vi-link-color: #000000;
  --vi-link-visited-color: #000000;
}

/* ---- Typography — body & table content use Lato ------------------- */2
div.Container,
.Page,
.Page .Table,
.Page .Table TD,
.Page .Table TH,
.Page p,
.Page li,
.Page .Form,
.Page #page_header {
    /* font-family: 'Lato', Helvetica, Arial, sans-serif !important; */
    font-family: Verdana  !important;
}

/* ---- Container background ---------------------------------------- */
div.Container {
    background-image: none !important;
    background-color: var(--vi-ghost) !important;
    padding-bottom: 20px;
}

/* ---- Title / header bar ------------------------------------------ */
.Title {
    background-color: var(--vi-dark) !important;
    background-image: none !important;
}

/* ---- Top separator line ------------------------------------------ */
.page_top_hr {
    border-bottom-color: var(--vi-mid) !important;
}

/* ---- Footer ------------------------------------------------------ */
DIV.Footer {
    background-image: none !important;
    background-color: var(--vi-dark) !important;
    color: var(--vi-white) !important;
}

/* ====================================================================
   SUBMENU — card-grouped button-style redesign
   ==================================================================== */

.SubMenu {
    width: 180px;
    font-size: 9.5pt;
    text-align: left;
    /* padding: 6px 4px; */
    box-sizing: border-box;
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

/* Each helper div wrapping a menu group = a rounded card */
.SubMenu > div {
    background-color: var(--vi-white);
    border: 1px solid var(--vi-border);
    border-radius: 10px;
    margin-bottom: 9px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(79, 124, 130, 0.10);
}

/* ul inside each card — inner padding for button rows */
.SubMenu ul {
    list-style: none;
    padding: 5px;
    margin: 0;
}

.SubMenu ul li {
    margin: 2px 0;
    padding: 0;
}

/* ---- Group TITLE link = coloured header bar of the card ----------- */
.SubMenu ul li a.title,
.SubMenu ul li a.title_nomarg {
    display: block;
    box-sizing: border-box;
    /* bleed out of the ul padding to fill card edges */
    width: calc(100% + 10px);
    margin: -5px -5px 5px -5px;
    padding: 7px 12px;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 0.88em;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--vi-white) !important;
    background-color: var(--vi-main) !important;
    border-radius: 0;
    text-decoration: none;
}

.SubMenu ul li a.title:hover,
.SubMenu ul li a.title_nomarg:hover {
    background-color: var(--vi-dark) !important;
    color: var(--vi-white) !important;
    text-decoration: none;
}

/* ---- Regular links = pill buttons --------------------------------- */
.SubMenu ul li a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--vi-border);
    color: var(--vi-dark) !important;
    background-color: var(--vi-ghost);
    font-family: sans-serif;
    font-size: 1.1em;
    text-decoration: none;
    font-weight: bold;
}

.SubMenu ul li a:hover,
.SubMenu ul li a.current {
    background-color: var(--vi-main) !important;
    color: var(--vi-white) !important;
    border-color: var(--vi-dark) !important;
    text-decoration: none;
}

/* ---- Nested sub-items (second-level ul) --------------------------- */
.SubMenu ul ul {
    margin-left: 0;
    padding: 0 0 0 8px;
}

.SubMenu ul ul li a {
    font-size: 0.84em;
    padding: 3px 8px;
    border-color: var(--vi-pale);
    background-color: var(--vi-white);
}

/* ===================================================================== */

/* ---- Main-menu icon links ---------------------------------------- */
.MainMenu A {
    color: var(--vi-main) !important;
}

/* ---- Page content area ------------------------------------------- */
.Page {
    background:
        radial-gradient(ellipse at 15% 10%,  rgba(var(--vi-light-rgb), 0.40) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 85%,  rgba(var(--vi-main-rgb),  0.35) 0%, transparent 50%),
        radial-gradient(ellipse at 55% 50%,  rgba(var(--vi-main-rgb),  0.20) 0%, transparent 60%),
        var(--vi-white);
    background-color: var(--vi-white);
    background-attachment: fixed !important;
    border-radius: 12px;
    overflow: hidden;
}

.Page .box {
    border-color: var(--vi-border) !important;
    border-radius: 8px;
}
.Page .box fieldset {
    border-color: var(--vi-border) !important;
    border-radius: 6px;
}

#page_content {
    /* background-color: var(--vi-white); */
    background-color: var(--vi-white);
    border-radius: 8px;
}

/* ---- Table headers ----------------------------------------------- */
.Page .Table th,
.Page .Table .Header,
.Page .Table .Footer,
.Page .Table .Totals TD,
.Page .Table .TotalsLocal TD,
.Page .Table .Headerwrap TD,
.Page .Table .Headerwrap TH {
    /* background-color: var(--vi-pale) !important; */
    background-color: var(--vi-pale) !important;
}

.Page .Table .Header TD,
.Page .Table .Header TH,
.Page .Table .Headerwrap TD,
.Page .Table .Headerwrap TH,
.Page .Table .Footer TD,
.Page .Table .Totals TD {
    border-color: var(--vi-mid) !important;
}

/* HeaderHi (highlighted header) */
.HeaderHi,
.Page .Table .HeaderHi TH {
    background-color: var(--vi-light) !important;
    border-color: var(--vi-mid) !important;
}

/* ---- Even table rows --------------------------------------------- */
.Page .Table .Even,
.even,
.eventerm,
.tablesorter-blue tbody tr.even > td {
    background-color: var(--vi-ghost) !important;
}

.oddterm {
    background-color: var(--vi-pale) !important;
}

/* ---- Table row hover --------------------------------------------- */
.Page .Table tr:hover {
    background-color: var(--vi-frost) !important;
}

/* ---- Tablesorter sort-arrow headers ------------------------------ */
.tablesorter-blue .headerSortDown,
.tablesorter-blue .tablesorter-headerSortDown,
.tablesorter-blue .tablesorter-headerDesc,
.tablesorter-blue .tablesorter-headerAsc {
    background-color: var(--vi-dark) !important;
}
.tablesorter-blue tbody tr.odd > td {
    background-color: var(--vi-pale) !important;
}

/* ---- Tablesorter table & cell borders ---------------------------- */
.tablesorter-blue {
    border-color: var(--vi-mid) !important;
    font-size: var(--vi-table-font-size, 9.5pt);
}
.tablesorter-blue th,
.tablesorter-blue td {
    border-color: var(--vi-mid) !important;
}

/* ---- Tablesorter header cells ------------------------------------ */
.tablesorter-blue th,
.tablesorter-blue thead td {
    background-color: var(--vi-main) !important;
    color: var(--vi-ghost) !important;
    text-shadow: 0 1px 0 rgba(var(--vi-dark-rgb), 0.45) !important;
}
/* white unsorted double-arrow — sortable headers only */
.tablesorter-blue .header,
.tablesorter-blue .tablesorter-header {
    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==) !important;
    background-repeat: no-repeat !important;
    background-position: center right !important;
}

/* ---- Tablesorter filter widget ----------------------------------- */
.tablesorter-blue .tablesorter-filter-row,
.tablesorter-blue .tablesorter-filter-row td {
    background-color: var(--vi-pale) !important;
}
.tablesorter-blue input.tablesorter-filter,
.tablesorter-blue select.tablesorter-filter {
    background-color: var(--vi-frost) !important;
    border-color: var(--vi-mid) !important;
    color: var(--vi-dark) !important;
}

/* ---- Tablesorter column-sort widget ------------------------------ */
.tablesorter-blue td.primary,
.tablesorter-blue tr.odd td.primary  { background-color: var(--vi-main) !important; }
.tablesorter-blue tr.even td.primary { background-color: var(--vi-mid) !important; }
.tablesorter-blue td.secondary,
.tablesorter-blue tr.odd td.secondary  { background-color: var(--vi-mid) !important; }
.tablesorter-blue tr.even td.secondary { background-color: var(--vi-light) !important; }
.tablesorter-blue td.tertiary,
.tablesorter-blue tr.odd td.tertiary  { background-color: var(--vi-light) !important; }
.tablesorter-blue tr.even td.tertiary { background-color: var(--vi-pale) !important; }

/* ---- Forms (rounded) --------------------------------------------- */
.Page .Form {
    border-color: var(--vi-mid) !important;
    background-color: var(--vi-border) !important;
    border-radius: 8px !important;
    overflow: hidden;
}
.Page .FormFin {
    border-color: #c17604 !important;   /* keep amber accent */
    border-radius: 8px !important;
    overflow: hidden;
}

/* ---- Fieldsets --------------------------------------------------- */
.Page fieldset.even {
    background-color: var(--vi-white) !important;
}
.Page fieldset.even legend {
    background-color: var(--vi-white) !important;
    border-color: var(--vi-mid) !important;
}
.Page fieldset.odd {
    background-color: var(--vi-ghost) !important;
}
.Page fieldset.odd legend {
    background-color: var(--vi-ghost) !important;
    border-color: var(--vi-mid) !important;
}

/* ---- Monitor blocks (rounded) ------------------------------------ */
.monitor-page .monitor {
    border: 3px solid  !important;
    border-color: var(--vi-mid) !important;
    border-radius: 12px !important;
    overflow: hidden;
}
.monitor-page .monitor .monitor-title {
    background: var(--vi-pale) !important;
    background-image: none !important;
}
.monitor-page .monitor .monitor-title label {
    color: var(--vi-dark) !important;
}

/* ---- Buttons ----------------------------------------------------- */
.btn,
.newbutton1 {
    background-color: var(--vi-main) !important;
    /* color: var(--vi-white) !important; */
    color: #fff;
}
.btn:hover,
.newbutton1:hover {
    background-color: var(--vi-dark) !important;
}
.Page .Button {
    border-color: var(--vi-mid) !important;
    background-color: var(--vi-pale) !important;
}
.default_submit {
    background-color: var(--vi-ghost) !important;
    border-color: var(--vi-border) !important;
    color: var(--vi-dark) !important;
}
.login_submit {
    background-color: var(--vi-main) !important;
    color: var(--vi-white) !important;
}

/* ---- Tabs -------------------------------------------------------- */
#page_content .tabs ul {
    border-bottom-color: var(--vi-border) !important;
}
#page_content .tabs ul li a {
    background-color: var(--vi-pale) !important;
    border-color: var(--vi-border) !important;
    color: var(--vi-dark) !important;
}
#page_content .tabs ul li a:hover {
    background-color: var(--vi-light) !important;
}
#page_content .tabs ul li a.selected {
    background-color: var(--vi-white) !important;
    border-color: var(--vi-border) !important;
    border-bottom-color: var(--vi-white) !important;
    color: var(--vi-dark) !important;
}
#page_content .tabs ul li a.selected:hover {
    background-color: var(--vi-white) !important;
}

/* ---- Pagination -------------------------------------------------- */
.pagination a {
    border-color: var(--vi-border) !important;
    color: var(--vi-dark) !important;
}
.pagination a:hover,
.pagination a:active {
    background-color: var(--vi-pale) !important;
    color: var(--vi-dark) !important;
}
.pagination span.current {
    background-color: var(--vi-pale) !important;
    border-color: var(--vi-border) !important;
    color: var(--vi-dark) !important;
}

/* ---- Locales select ---------------------------------------------- */
.locales,
.locales a {
    background-color: var(--vi-dark) !important;
    color: var(--vi-white) !important;
    border-radius: 4px;
}

/* ---- Login form -------------------------------------------------- */
.login-form Table {
    background-color: var(--vi-dark) !important;
    border-color: var(--vi-white) !important;
}
.log_input {
    background-color: var(--vi-main) !important;
}

/* ---- SQL query blocks -------------------------------------------- */
.Page .SQLQueryHeader,
.Page .SQLFieldHeader {
    background: var(--vi-pale) !important;
    background-image: none !important;
}
.Page .SQLQuery TH,
.Page .SQLQuery TD {
    border-color: var(--vi-mid) !important;
}

/* ---- TabSheet (monitor tabs) ------------------------------------- */
.Page .TabSheet {
    background: var(--vi-pale) !important;
    background-image: none !important;
}

/* ---- Peers ------------------------------------------------------- */
.peers_main {
    background-color: var(--vi-pale) !important;
    border-color: var(--vi-mid) !important;
}
.peers_notmain {
    background-color: var(--vi-pale) !important;
    border-color: var(--vi-mid) !important;
}

/* ---- Misc highlights --------------------------------------------- */
.highlight {
    background-color: var(--vi-pale) !important;
}
.filed_money {
    background-color: var(--vi-light) !important;
}
.ping_results {
    border-color: var(--vi-border) !important;
    background-color: var(--vi-ghost) !important;
    color: var(--vi-dark) !important;
}

/* ---- br_report_total --------------------------------------------- */
.Page .Table .br_report_total TH {
    background-color: var(--vi-light) !important;
    border-color: var(--vi-mid) !important;
}

/* ---- Active calls form + graph sizing ----------------------------- */
#torep {
    display: inline-block;
    /* max-width: 390px; */
    width: 100%;
}
#onlygraph {
    /* max-width: 380px; */
    width: 100%;
}
#onlyform {
    margin-bottom: 4px;
    font-size: 0.9em;
}

/* ---- Graph images inside monitor blocks — stretch to full width -- */
.monitor-content img {
    max-width: 100%;
    height: auto;
    /* display: block; */
}

/* ---- Monitor title label — violet ----------------------------  -- */
.monitor-page .monitor .monitor-title label {
    color: var(--vi-dark) !important;
}

/* ====================================================================
   MAIN PAGE DASHBOARD LAYOUT
   ==================================================================== */

.main-dashboard {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px 4px;
}

/* ---- A horizontal row of dashboard columns ----------------------- */
.dash-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

/* ---- Column width variants --------------------------------------- */
.dash-col-full   { flex: 1 1 100%;                       min-width: 0; }
.dash-col-half   { flex: 1 1 calc(50% - 6px);            min-width: 280px; }
.dash-col-third  { flex: 1 1 calc(33.33% - 8px);         min-width: 220px; }
.dash-col-2of3   { flex: 2 1 calc(66.66% - 6px);         min-width: 320px; }

/* ---- Section heading above a group of monitors ------------------- */
.dash-section-label {
    font-size: 0.75em;
    font-weight: bold;
    color: var(--vi-main);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0 4px 5px;
    margin-bottom: 6px;
    border-bottom: 2px solid var(--vi-border);
}

/* ---- Monitors inside a dash column: remove conflicting clear ----- */
.dash-col-full  .monitor-page .monitor,
.dash-col-half  .monitor-page .monitor,
.dash-col-third .monitor-page .monitor,
.dash-col-2of3  .monitor-page .monitor {
    clear: none;
}

/* ---- Monitors placed directly in a dash column (graphs etc.) ----- */
.dash-col-full  > .monitor,
.dash-col-half  > .monitor,
.dash-col-third > .monitor,
.dash-col-2of3  > .monitor {
    width: 100%;
    box-sizing: border-box;
    margin-right: 0;
    margin-bottom: 0;
}


/* ---- Two-column dashboard: #dash-grid becomes the row wrapper ---- */
#dash-grid.dash-two-col {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* ---- Each column stacks monitors vertically with no gaps --------- */
#dash-grid.dash-two-col > .monitor-page {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;           /* critical: prevents flex item from overflowing */
    max-width: calc(50% - 6px);
    overflow: hidden;       /* clip any content wider than the column */
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 60px;       /* stay droppable even when empty */
}

/* ---- Monitors inside a column fill the full column width --------- */
#dash-grid.dash-two-col > .monitor-page > .monitor {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    margin-top: 5px !important;
    display: block !important;
    clear: none !important;
    flex-shrink: 0;
    /* clip content that is wider than the column so it never expands the page */
    overflow: hidden;
}

/* ---- Wide table / image content scrolls inside the card ---------- */
/* width: 100% gives a DEFINITE containing-block width so overflow-x:auto
   can measure it correctly even inside a display:table-cell parent */
#dash-grid .monitor-page > .monitor .monitor-content {
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ---- Drop placeholder matches a full column slot ----------------- */
.monitor-drag-ph {
    width: 100%;
    box-sizing: border-box;
    border: 2px dashed rgba(79, 170, 180, 0.55);
    background: rgba(79, 170, 180, 0.07);
    border-radius: 4px;
    margin: 0;
}

/* ---- Grab cursor on monitor title bars inside the grid ----------- */
#dash-grid .monitor-page > .monitor .monitor-title {
    cursor: grab;
    user-select: none;
}
#dash-grid .monitor-page > .monitor.ui-sortable-helper .monitor-title {
    cursor: grabbing;
}

/* ---- Subtle lift while dragging ---------------------------------- */
#dash-grid .monitor-page > .monitor.ui-sortable-helper {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.30);
    transform: rotate(0.6deg);
}

/* ---- Reset layout bar -------------------------------------------- */
.dash-layout-bar {
    text-align: right;
    padding: 2px 6px 0;
    margin-top: -6px;
}
.dash-layout-bar-inner {
    text-align: right;
}
/* ---- Main page header: title + customize / restore (see main.html.erb) - */
body.page-main-dashboard #page_header .main-page-header-wrap {
    width: 100%;
}
body.page-main-dashboard #page_header .dash-layout-bar--top {
    margin-top: 0;
    padding: 0;
    text-align: inherit;
    width: 100%;
}
body.page-main-dashboard #page_header .main-page-header-toprow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    width: 100%;
}
body.page-main-dashboard #page_header .main-page-header-title {
    flex: 1 1 auto;
    min-width: 0;
}
body.page-main-dashboard #page_header .dash-layout-bar--top .dash-layout-bar-inner {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}
body.page-main-dashboard #page_header .dash-layout-bar--top .dash-theme-panel {
    width: 100%;
    box-sizing: border-box;
}
/* ---- User theme color panel (Main dashboard) ---------------------- */
.dash-theme-toggle {
    font-size: 0.72em;
    color: var(--vi-main);
    cursor: pointer;
    opacity: 0.55;
    letter-spacing: 0.04em;
    margin-right: 12px;
}
.dash-theme-toggle:hover {
    opacity: 1;
    text-decoration: underline;
}
.dash-theme-panel {
    text-align: left;
    margin-top: 6px;
    padding: 6px 8px;
    background: rgba(var(--vi-pale-rgb), 0.88);
    border: 1px solid rgba(var(--vi-pale-rgb), 0.5);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(var(--vi-dark-rgb), 0.10);
}
.dash-theme-panel .dash-theme-hint {
    font-size: 0.65em;
    color: var(--vi-dark);
    opacity: 0.85;
    margin: 0 0 4px 0;
}
.dash-theme-actions {
    margin-top: 5px;
    text-align: right;
}
.dash-theme-reset {
    font-size: 0.68em;
    color: var(--vi-main);
    cursor: pointer;
    opacity: 0.75;
    border: 1px solid rgba(var(--vi-mid-rgb), 0.45);
    background: rgba(var(--vi-ghost-rgb), 0.6);
    border-radius: 3px;
    padding: 2px 7px;
}
.dash-theme-reset:hover {
    opacity: 1;
}
/* ---- Theme color pickers: 3-column table -------------------------- */
.dash-theme-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0;
}
.dash-theme-table td.dash-theme-cell {
    border: 1px solid rgba(var(--vi-mid-rgb), 0.4);
    padding: 3px 6px;
    vertical-align: middle;
    width: 20%;
}
.dash-theme-table td.dash-theme-cell--empty {
    border: none;
    padding: 0;
    width: 20%;
}
.dash-theme-cell-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}
.dash-theme-cell-inner label {
    display: block;
    flex: 1;
    min-width: 0;
    font-size: 0.63em;
    color: var(--vi-dark);
    line-height: 1.2;
}
.dash-theme-table input[type="color"].dash-theme-input {
    flex: 0 0 auto;
    width: 26px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--vi-mid);
    cursor: pointer;
    border-radius: 3px;
    background: transparent;
}
/* ---- Font-size slider in theme panel -------------------------------- */
.dash-theme-fontsize-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.dash-theme-fontsize-range {
    width: 70px;
    cursor: pointer;
    accent-color: var(--vi-main);
}
.dash-theme-fontsize-val {
    font-size: 0.65em;
    color: var(--vi-dark);
    min-width: 26px;
    text-align: right;
    white-space: nowrap;
}
/* ---- Saved presets area in theme panel ------------------------------ */
.dash-presets-area {
    margin-top: 5px;
    border-top: 1px solid rgba(var(--vi-mid-rgb), 0.3);
    padding-top: 5px;
}
.dash-presets-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 18px;
}
.dash-presets-label {
    font-size: 0.63em;
    color: var(--vi-dark);
    opacity: 0.75;
    white-space: nowrap;
    display: none;
}
.dash-presets-list {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    flex: 1;
}
/* Individual preset chip */
.dash-preset-chip {
    display: inline-flex;
    align-items: center;
    background: var(--vi-pale);
    border: 1px solid rgba(var(--vi-mid-rgb), 0.5);
    border-radius: 8px;
    padding: 1px 4px 1px 6px;
    font-size: 0.63em;
    color: var(--vi-dark);
    line-height: 1.3;
    white-space: nowrap;
    gap: 2px;
}
.dash-preset-chip-name {
    cursor: pointer;
}
.dash-preset-chip-name:hover {
    text-decoration: underline;
    color: var(--vi-main);
}
.dash-preset-chip-del {
    cursor: pointer;
    color: rgba(var(--vi-dark-rgb), 0.45);
    font-size: 1em;
    line-height: 1;
    padding: 0 1px;
    margin-left: 1px;
}
.dash-preset-chip-del:hover {
    color: #c0392b;
}
/* "+ Save preset" button */
.dash-preset-save-btn {
    font-size: 0.63em;
    color: var(--vi-main);
    cursor: pointer;
    opacity: 0.8;
    white-space: nowrap;
    border: 1px dashed rgba(var(--vi-mid-rgb), 0.6);
    border-radius: 7px;
    padding: 1px 6px;
    line-height: 1.4;
}
.dash-preset-save-btn:hover {
    opacity: 1;
    border-style: solid;
}
/* Inline save form */
.dash-preset-save-form {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.dash-preset-name-input {
    font-size: 0.68em;
    padding: 2px 5px;
    border: 1px solid rgba(var(--vi-mid-rgb), 0.6);
    border-radius: 3px;
    background: var(--vi-frost);
    color: var(--vi-dark);
    width: 120px;
    outline: none;
}
.dash-preset-name-input:focus {
    border-color: var(--vi-main);
    box-shadow: 0 0 0 2px rgba(var(--vi-main-rgb), 0.15);
}
.dash-preset-confirm-btn,
.dash-preset-cancel-btn {
    font-size: 0.65em;
    padding: 2px 7px;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid transparent;
}
.dash-preset-confirm-btn {
    background: var(--vi-main);
    color: #fff;
    border-color: var(--vi-main);
}
.dash-preset-confirm-btn:hover {
    background: var(--vi-dark);
    border-color: var(--vi-dark);
}
.dash-preset-cancel-btn {
    background: transparent;
    color: var(--vi-dark);
    border-color: rgba(var(--vi-mid-rgb), 0.5);
}
.dash-preset-cancel-btn:hover {
    border-color: var(--vi-dark);
}
.dash-reset-layout {
    font-size: 0.72em;
    color: var(--vi-main);
    cursor: pointer;
    opacity: 0.55;
    letter-spacing: 0.04em;
}
.dash-reset-layout:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ---- Hidden monitor state —
   Specificity (1,4,0) beats the display:block !important rule at (1,3,0) */
#dash-grid.dash-two-col > .monitor-page > .monitor.monitor-hidden {
    display: none !important;
}

/* ---- Close button on monitor — sits outside the drag handle ------ */
.monitor {
    position: relative;
}
.monitor-close {
    position: absolute;
    top: 3px;
    right: 5px;
    z-index: 10;
    line-height: 1;
    font-size: 1.6em;
    cursor: pointer;
    opacity: 0.45;
    padding: 0 3px;
    color: inherit;
    transition: opacity 0.15s;
}
.monitor-close:hover {
    opacity: 1;
}

/* ---- Restore hidden monitors link -------------------------------- */
.dash-restore-monitors {
    font-size: 0.72em;
    color: var(--vi-main);
    cursor: pointer;
    opacity: 0.55;
    letter-spacing: 0.04em;
    margin-left: 10px;
}
.dash-restore-monitors:hover {
    opacity: 1;
    text-decoration: underline;
}





/* ===== END DASHBOARD LAYOUT ======================================= */

/* ===== END WINTER CHILL TEAL THEME ================================ */


/* ====================================================================
   LIQUID GLASS — frosted glass layer over winter chill teal gradient
   ==================================================================== */

/* ---- Winter chill teal gradient background — the "liquid" base ----- */
div.Container {
    background:
        radial-gradient(ellipse at 15% 10%,  rgba(var(--vi-light-rgb), 0.40) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 85%,  rgba(var(--vi-main-rgb),  0.35) 0%, transparent 50%),
        radial-gradient(ellipse at 55% 50%,  rgba(var(--vi-main-rgb),  0.20) 0%, transparent 60%),
        linear-gradient(150deg, var(--vi-deep) 0%, #0a2830 35%, var(--vi-dark) 65%, #163d45 100%) !important;
    background-attachment: fixed !important;
    background-color: var(--vi-deep) !important;
}

/* ---- Shared glass mixin (applied via per-element rules below) -----
   backdrop-filter: blur + saturate
   background: low-opacity frosted tint
   box-shadow: outer glow + inner top highlight (specular)
   border: thin translucent edge
   ------------------------------------------------------------------- */

/* ---- Page main content area --------------------------------------- */
.Page {
    /* background: rgba(var(--vi-frost-rgb), 0.72) !important; */
    backdrop-filter: blur(22px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
    border: 1px solid rgba(var(--vi-pale-rgb), 0.40) !important;
    box-shadow:
        0 8px 32px rgba(var(--vi-dark-rgb), 0.22),
        inset 0 1px 0 rgba(var(--vi-border-rgb), 0.60),
        inset 0 -1px 0 rgba(var(--vi-main-rgb), 0.08) !important;
    border-radius: 14px !important;
}

/* ---- Title / header bar ------------------------------------------ */
.Title {
    background: rgba(var(--vi-navy-rgb), 0.84) !important;
    background-image: none !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
    border-bottom: 1px solid rgba(var(--vi-pale-rgb), 0.20) !important;
    box-shadow: 0 2px 12px rgba(var(--vi-dark-rgb), 0.35) !important;
}

/* ---- Footer ------------------------------------------------------- */
DIV.Footer {
    background: rgba(var(--vi-navy-rgb), 0.84) !important;
    background-image: none !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-top: 1px solid rgba(var(--vi-pale-rgb), 0.15) !important;
}

/* ---- SubMenu sidebar cards ---------------------------------------- */
.SubMenu > div {
    background: rgba(var(--vi-frost-rgb), 0.62) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    border: 1px solid rgba(var(--vi-pale-rgb), 0.35) !important;
    box-shadow:
        0 4px 20px rgba(var(--vi-dark-rgb), 0.14),
        inset 0 1px 0 rgba(var(--vi-border-rgb), 0.55) !important;
}

/* group header bar inside each card */
.SubMenu ul li a.title,
.SubMenu ul li a.title_nomarg {
    background: rgba(var(--vi-main-rgb), 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: rgba(var(--vi-ghost-rgb), 0.96) !important;
    text-shadow: 0 1px 4px rgba(var(--vi-deep-rgb), 0.50) !important;
    border-bottom: 1px solid rgba(var(--vi-pale-rgb), 0.22) !important;
}
.SubMenu ul li a.title:hover,
.SubMenu ul li a.title_nomarg:hover {
    background: rgba(var(--vi-dark-rgb), 0.82) !important;
}

/* menu item buttons */
.SubMenu ul li a {
    background: rgba(var(--vi-frost-rgb), 0.45) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(var(--vi-pale-rgb), 0.40) !important;
    color: var(--vi-deep) !important;
    box-shadow: inset 0 1px 0 rgba(var(--vi-border-rgb), 0.35) !important;
}
.SubMenu ul li a:hover,
.SubMenu ul li a.current {
    background: rgba(var(--vi-main-rgb), 0.72) !important;
    border-color: rgba(var(--vi-light-rgb), 0.50) !important;
    color: rgba(var(--vi-ghost-rgb), 0.96) !important;
    box-shadow: inset 0 1px 0 rgba(var(--vi-border-rgb), 0.18) !important;
}

/* ---- Monitor cards ----------------------------------------------- */
.monitor-page .monitor,
.dash-col-full  > .monitor,
.dash-col-half  > .monitor,
.dash-col-third > .monitor,
.dash-col-2of3  > .monitor {
    background: rgba(var(--vi-frost-rgb), 0.62) !important;
    backdrop-filter: blur(16px) saturate(148%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(148%) !important;
    /* border: 3px solid rgba(var(--vi-pale-rgb), 0.32) !important; */
    box-shadow:
        0 4px 20px rgba(var(--vi-dark-rgb), 0.14),
        inset 0 1px 0 rgba(var(--vi-border-rgb), 0.50),
        inset 0 -1px 0 rgba(var(--vi-main-rgb), 0.06) !important;
}

/* monitor title bar */
.monitor-page .monitor .monitor-title {
    background: rgba(var(--vi-main-rgb), 0.68) !important;
    background-image: none !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(var(--vi-pale-rgb), 0.24) !important;
    box-shadow: inset 0 1px 0 rgba(var(--vi-border-rgb), 0.20) !important;
}
.monitor-page .monitor .monitor-title label {
    /* color: rgba(var(--vi-ghost-rgb), 0.95) !important; */
    color: var(--vi-deep) !important;
    font-size: 18px;
    /* text-shadow: 0 1px 4px rgba(var(--vi-deep-rgb), 0.45) !important; */
}

/* ---- Buttons ----------------------------------------------------- */
.btn,
.newbutton1,
.login_submit {
    background: rgba(var(--vi-dark-rgb), 1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    /* border: 1px solid rgba(var(--vi-pale-rgb), 0.40) !important; */
    box-shadow:
        0 4px 16px rgba(var(--vi-dark-rgb), 0.24),
        inset 0 1px 0 rgba(var(--vi-border-rgb), 0.25) !important;
    /* color: rgba(var(--vi-ghost-rgb), 0.96) !important; */
    color: #fff;
}
.btn:hover,
.newbutton1:hover {
    background: rgba(var(--vi-dark-rgb), 0.86) !important;
    box-shadow:
        0 6px 20px rgba(var(--vi-dark-rgb), 0.34),
        inset 0 1px 0 rgba(var(--vi-border-rgb), 0.18) !important;
}
.default_submit {
    background: rgba(var(--vi-frost-rgb), 0.58) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(var(--vi-pale-rgb), 0.45) !important;
    box-shadow: inset 0 1px 0 rgba(var(--vi-border-rgb), 0.50) !important;
    color: var(--vi-deep) !important;
}

/* ---- Table headers ----------------------------------------------- */
.Page .Table th,
.Page .Table .Header,
.Page .Table .Footer,
.Page .Table .Totals TD,
.Page .Table .Headerwrap TD,
.Page .Table .Headerwrap TH {
    background: rgba(var(--vi-main-rgb), 0.3) !important;
    /* backdrop-filter: blur(6px) !important; */
    -webkit-backdrop-filter: blur(6px) !important;
}

/* ---- Tablesorter — Winter Chill / Liquid Glass full override ------ */

/* table frame & cell borders */
.tablesorter-blue {
    border-color: rgba(var(--vi-mid-rgb), 0.55) !important;
    background-color: transparent !important;
}
.tablesorter-blue th,
.tablesorter-blue td {
    border-color: rgba(var(--vi-mid-rgb), 0.40) !important;
}

/* header cells — frosted teal glass */
.tablesorter-blue th,
.tablesorter-blue thead td {
    background: rgba(var(--vi-main-rgb), 0.68) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: rgba(var(--vi-ghost-rgb), 0.95) !important;
    text-shadow: 0 1px 0 rgba(var(--vi-dark-rgb), 0.45) !important;
}
/* white unsorted double-arrow — sortable headers only */
.tablesorter-blue .header,
.tablesorter-blue .tablesorter-header {
    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==) !important;
    background-repeat: no-repeat !important;
    background-position: center right !important;
}

/* active-sort header (asc) */
.tablesorter-blue .headerSortUp,
.tablesorter-blue .tablesorter-headerSortUp,
.tablesorter-blue .tablesorter-headerAsc {
    background-color: rgba(var(--vi-dark-rgb), 0.75) !important;
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7) !important;
    background-repeat: no-repeat !important;
    background-position: center right !important;
}

/* active-sort header (desc) */
.tablesorter-blue .headerSortDown,
.tablesorter-blue .tablesorter-headerSortDown,
.tablesorter-blue .tablesorter-headerDesc {
    background-color: rgba(var(--vi-dark-rgb), 0.75) !important;
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7) !important;
    background-repeat: no-repeat !important;
    background-position: center right !important;
}

/* non-sortable header cells */
.tablesorter-blue thead .sorter-false {
    background-image: none !important;
}

/* footer sort arrows — remove */
.tablesorter-blue tfoot .tablesorter-headerSortUp,
.tablesorter-blue tfoot .tablesorter-headerSortDown,
.tablesorter-blue tfoot .tablesorter-headerAsc,
.tablesorter-blue tfoot .tablesorter-headerDesc {
    background-image: none !important;
}

/* body cell text color */
.tablesorter-blue tbody td {
    color: var(--vi-table-color, #000000) !important;
}

/* ---- Table rows --------------------------------------------------- */
.Page .Table .Even,
.tablesorter-blue tbody tr.even > td,
.even {
    background: rgba(var(--vi-ghost-rgb), 0.9) !important ;
}
.Page .Table .Odd,
.tablesorter-blue tbody tr.odd > td,
.odd {
    background: rgba(var(--vi-border-rgb), 0.70) !important;
    /* background: rgba(var(--vi-frost-rgb), 0.30) !important; */
   
}

/* hover — all row variants */
.Page .Table tr:hover > td,
.tablesorter-blue tbody > tr.hover > td,
.tablesorter-blue tbody > tr:hover > td,
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow > td,
.tablesorter-blue tbody > tr.even.hover > td,
.tablesorter-blue tbody > tr.even:hover > td,
.tablesorter-blue tbody > tr.odd.hover > td,
.tablesorter-blue tbody > tr.odd:hover > td {
    background: rgba(var(--vi-light-rgb), 0.50) !important;
}

/* special row states — keep semantic colours, soften with alpha */
.tablesorter-blue tbody tr.unknown > td {
    background-color: rgba(var(--vi-light-rgb), 0.45) !important;
}

/* column-sort widget colours — teal shades */
.tablesorter-blue td.primary,
.tablesorter-blue tr.odd td.primary {
    background-color: rgba(var(--vi-main-rgb), 0.55) !important;
}
.tablesorter-blue tr.even td.primary {
    background-color: rgba(var(--vi-main-rgb), 0.40) !important;
}
.tablesorter-blue td.secondary,
.tablesorter-blue tr.odd td.secondary {
    background-color: rgba(var(--vi-mid-rgb), 0.40) !important;
}
.tablesorter-blue tr.even td.secondary {
    background-color: rgba(var(--vi-mid-rgb), 0.28) !important;
}
.tablesorter-blue td.tertiary,
.tablesorter-blue tr.odd td.tertiary {
    background-color: rgba(var(--vi-pale-rgb), 0.55) !important;
}
.tablesorter-blue tr.even td.tertiary {
    background-color: rgba(var(--vi-pale-rgb), 0.38) !important;
}

/* caption */
.tablesorter-blue > caption {
    background: rgba(var(--vi-frost-rgb), 0.60) !important;
}

/* ---- Filter widget ------------------------------------------------ */
.tablesorter-blue .tablesorter-filter-row,
.tablesorter-blue .tablesorter-filter-row td {
    background: rgba(var(--vi-pale-rgb), 0.48) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}
.tablesorter-blue input.tablesorter-filter,
.tablesorter-blue select.tablesorter-filter {
    background-color: rgba(var(--vi-frost-rgb), 0.80) !important;
    border-color: rgba(var(--vi-mid-rgb), 0.60) !important;
    color: var(--vi-dark) !important;
}

/* ---- Tabs --------------------------------------------------------- */
#page_content .tabs ul li a {
    background: rgba(var(--vi-pale-rgb), 0.52) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-color: rgba(var(--vi-pale-rgb), 0.42) !important;
}
#page_content .tabs ul li a:hover {
    background: rgba(var(--vi-light-rgb), 0.65) !important;
}
#page_content .tabs ul li a.selected {
    background: rgba(var(--vi-ghost-rgb), 0.90) !important;
    box-shadow: inset 0 1px 0 rgba(var(--vi-border-rgb), 0.58) !important;
}
#page_content .tabs ul {
    border-bottom-color: rgba(var(--vi-pale-rgb), 0.42) !important;
}

/* ---- Forms ------------------------------------------------------- */
.Page .Form {
    /* background: rgba(var(--vi-pale-rgb), 0.72) !important; */
    background: var(--vi-pale) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-color: rgba(var(--vi-border-rgb), 0.42) !important;
    border-width: 3px;
}

/* ---- Flash messages ---------------------------------------------- */
div.flash.notice {
    background: rgba(209,250,229, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
div.flash.error, #errorExplanation {
    background: rgba(255,227,227, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
div.flash.warning, .nodata, .warning {
    background: rgba(255,235,193, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* ---- Pagination --------------------------------------------------- */
.pagination a {
    background: rgba(var(--vi-frost-rgb), 0.52) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border-color: rgba(var(--vi-pale-rgb), 0.42) !important;
}
.pagination a:hover,
.pagination span.current {
    background: rgba(var(--vi-main-rgb), 0.68) !important;
    color: rgba(var(--vi-ghost-rgb), 0.95) !important;
    border-color: rgba(var(--vi-light-rgb), 0.48) !important;
}

/* ---- Fieldsets ---------------------------------------------------- */
.Page fieldset.even {
    background: rgba(var(--vi-ghost-rgb), 0.50) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}
.Page fieldset.odd {
    background: rgba(var(--vi-pale-rgb), 0.40) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* ---- Ajax loading indicator --------------------------------------- */
#ajax-indicator {
    background: rgba(var(--vi-frost-rgb), 0.80) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(var(--vi-pale-rgb), 0.42) !important;
    box-shadow: 0 8px 32px rgba(var(--vi-dark-rgb), 0.22) !important;
    border-radius: 10px !important;
}

/* ---- Login form --------------------------------------------------- */
.login-form Table {
    background: rgba(var(--vi-deep-rgb), 0.65) !important;
    backdrop-filter: blur(24px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
    border: 1px solid rgba(var(--vi-pale-rgb), 0.30) !important;
    box-shadow:
        0 16px 48px rgba(var(--vi-dark-rgb), 0.40),
        inset 0 1px 0 rgba(var(--vi-border-rgb), 0.14) !important;
}



.Page .Table .Totals TD
{
    padding-right:  3px;
    padding-left:    3px;
    border-collapse: collapse;
    border:           1px solid #4F7C82;
    font-size:        9pt;
    font-weight:      bold;
    background-color: 		var(--vi-main) !important;
}

.Page .Table .TotalsLocal TD
{
    padding-right:  3px;
    padding-left:    3px;
    border-collapse: collapse;
    border:           1px solid #4F7C82;
    font-size:        10pt;
    font-weight:      bold;
    background-color:      var(--vi-main) !important;
}

/* ===== END LIQUID GLASS (Warm Neutral palette) ==================== */
input[type='checkbox'] {
    accent-color: var(--vi-dark);
}


.Page .Table .Dis
{
    background-color:     #a3acb5 !important;
}

.Page .Table .Warn
{
    background-color:      #fdebd0 !important;
 
}

.Page .Table .not_used
{
    background-color:      #efe9d8 !important;
 
}


span.Pending, .Page .Table .Pending 
{
    background-color:      #9ca78873 !important;
 
}

.bgcolor_warn {
    background-color: #FFC9C9 !important;
}

.Page .Table .marking
{
    background-color:       var(--vi-main) !important;
 
}