/* SESUI - Theme (web site) styles */
/* =============================== */ 

/* FONTS ========================================== */

/* This is all to override caco-telxl.css, which sets these fonts and sizes as important */

/* Main text types: */ 
BODY	{FONT-FAMILY: Open Sans, Helvetica, Arial, sans-serif !important;    FONT-SIZE: 10pt !important; LINE-HEIGHT: 15pt;}
TD	{FONT-FAMILY: Open Sans, Helvetica, Arial, sans-serif !important;    FONT-SIZE: 10pt !important; LINE-HEIGHT: 15pt;}
P	{FONT-FAMILY: Open Sans, Helvetica, Arial, sans-serif !important;    FONT-SIZE: 10pt !important; LINE-HEIGHT: 15pt;}
LI	{FONT-FAMILY: Open Sans, Helvetica, Arial, sans-serif !important;    FONT-SIZE: 10pt !important; LINE-HEIGHT: 15pt;}
#leftMenuItems > LI > A {FONT-FAMILY: Open Sans, Helvetica, Arial, sans-serif !important;}


/* The inout types have different line heights: */
INPUT	{FONT-FAMILY: Open Sans, Helvetica, Arial, sans-serif !important;    FONT-SIZE: 10pt !important; LINE-HEIGHT: 12pt;}
SELECT	{FONT-FAMILY: Open Sans, Helvetica, Arial, sans-serif !important;    FONT-SIZE: 10pt !important; LINE-HEIGHT: 12pt;}

SMALL	{FONT-FAMILY: Open Sans, Helvetica, Arial, sans-serif !important;    opacity: 0.7; FONT-SIZE: 8pt !important;}

H1	{FONT-FAMILY: Open Sans, Helvetica, Arial, sans-serif !important;  }
H2	{FONT-FAMILY: Open Sans, Helvetica, Arial, sans-serif !important;  }
H3	{FONT-FAMILY: Open Sans, Helvetica, Arial, sans-serif !important;  }

/* This is to override something in the Sesui branding header: */
p {
	margin: revert;
}


/* General styles ========================================== */

/* Whole page background: */
body{
	background: #FFFFFF;
}

/* Hyperlinks: */

a{color: #003653 !important; }		/* Sesui-provided dark blue #003653 */

.InternalLink2{
	color:#003653 !important;  		/* Sesui-provided dark blue #003653 */
}

.InternalLink2:before{	content: ''; }
.InternalLink2:after {	content: ''; }


/*form selectors */
input[type=text]{
	background: #FFFFFF;
	border-width: 1px;
	border-radius: 3px;
	padding-left: 5px;
	border: 1px #A2A2A2 solid;
	color: #003653;			/* Sesui-provided dark blue #003653 */

}
button, input[type=submit]{
	/* Submit buttons.  Pretty vanilla.  */
	background: #017DBF;
	background-color: #017DBF;
	color: white;
	border: none;
	padding: 5px;
	margin: 1px;
}

button{
	background: #017DBF;
	background-color: #017DBF;
	color: white;
	border: none;
	padding: 5px;
	margin: 1px;
}

.leftSubMenu li span.restrictedaccesstext{
	color: lime;
}

/* Drop-down lists:  */ 
select{
    background: #F6F6F6;        /* nav bar medium grey*/
    color: #424242;
    border-radius: 5px;
}

/* Checkboxes.  Adam McK often rendered them as slider switches, so called them switches.   */
/* Other styles can activate that functionality. */
/*  = For an example theme with checkboxes styled better (but still checkboxes), see "Transport"  */
/*  = For an example theme with checkboxes as solid blobs, see "Windows 10"  */
/*  = For an example theme with checkboxes as on/off sliders, see "Pure Spring"  */
/* We asre gonig to bypass those and use default browser checkboxes:  */
.switch-label {
    display: none;
}
.switch-input{
    display: revert;
}


/* "Green" help boxes =============================================================== */


.greenHelpBox {
    color: #212529;
    background-color: #F7F7F7;
    border-color: #F7F7F7;
}


/* Nav bar  ======================================================================= */


/* ==========  main nav bar background.  It inherits a bit of a curved base from the default set of styles. */
#searchToolBar{
	background: #003653;        /* Sesui-provided dark blue #003653 */
	border:revert;
	border-bottom:  5px solid #EB8023;
	min-height:50px; 	   /* Be careful to check when it wraps and when not. */
	border-radius: revert;
}

#leftMenu{padding: 0px; margin: 0px; display: inline-block; overflow: hidden;}

#leftMenuItems {margin-left: -15px;}

#leftMenuItems > li{float: left; padding: 0px; margin: 0px; list-style: none; line-height: 100%;}


/* ==========  Nav bar text items: */ 
#leftMenuItems > li > a{
	display: block; 
	float: left; 
	text-decoration: none; 
	color: white !important; 		
	padding: revert;
	position: revert; 
	font-weight: normal; 
	height: 30px; 
	line-height: 28px;		/* Cirrus-provided - looks like padding between the top of the nav bar text and the top of the nav bar itself */
}

#leftMenuItems > li > a:hover {
	font-weight: bold !important; 		/* Menu items go bold when hovered */
}


#leftMenuItems > li:last-child > a{	
	font-weight: bold;		/* last item in bold */
	color: #003653 !important; 		/* Sesui-provided dark blue #003653 */
}

#leftMenuItems > li > a:last-child{    padding-right: 10px;   -moz-border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px;}


/* Navigation bar icons, also has the class "NavigationBarIcons" which seems to not be used. */
#leftMenuItems li img {
    display: none; 		 /* a style with no icons in the nav bar or any of its sub-menus */
}

/* The chevrons - seperators between nav bar items */
#leftMenuItems > li > a:after {
    all:revert;   /* This removes the fairly complex chevron that is defined in the built-in style. */ 
    content: ' >\a0 ';
}

#leftMenuItems li:last-child > a:after {
    content: '';  /* Hide the chevron after the last item in the nav bar */
}

#leftMenuItems:last-child:after{content: '';}

#leftMenuItems li:hover .leftSubMenu{display:     block;}


/* ========== Sub-menu of items on the left and right of the nav bar: */

.leftSubMenu {
	margin-top: 30px;
}
.leftSubMenu, #rightSubMenu, #subCategory{
	background: #003653;        /* Sesui-provided dark blue #003653 */
	color: white !important;
	border-radius: 0px 0px 6px 6px;
	margin-left:0px;
	padding-top: 0px;
	padding-bottom: 10px;  /* The right menu seems to have a 10px movement somewhere that this accomodates for*/
}

.leftSubMenu li{float: none !important; padding: 5px !important; height: 17px;}

.leftSubMenu li a, #rightSubMenu li a, #subCategory li a{
	color: white !Important;
	text-decoration: none;
}

.leftSubMenu li, #rightSubMenu li, #subCategory li{
    /* This is the "themes" sub-menu entry in the right hand menu if it is shown.  */
    height: 100%;	
}

.leftSubMenu li:hover{
	background: #2990CF;
	color: #FFFFFF !important;
}

/* These styles relate to the special user-provided menu options added to the nav bar's "title" part, e.g. "Reseller -> Customer -> Audio prompts" - the menu on "audio prompts".   Rarely used.  */
.titleMenu li{float: none !important;}
.titleMenu li > a{color: black !important; float: none !important; line-height: 10px !important;}
.titleMenu li > a:after{content:     '';    width: 0px !important;    height: 0px !important;    background: none !important;    position: initial!important;  transform : none!important;  top: initial!important;    z-index: 1;    right: -18px;   -moz-border-radius: initial; -webkit-border-radius: initial; border-radius: initial !Imporant;    box-shadow: none !Important;}



/* ========== Nav bar search box: */

#topSearchBox{
	border: 1px #7D7D7D solid;  /* Cirrus-provided dark grey #7D7D7D */
	background: #FFFFFF;
	color: #000000;			/* Cirrus-provided black body text for search term */
	box-shadow:	none;
	padding-left: 30px;
    	border-radius: 6px;
	height: 25px;			/* Cirrus's style had a slightly larger search box. */
	width: 330px;
	margin-bottom: 5px;		/* this stops it touching the bottom of the nav bar when wrapped */
}

/* Positioning of magnifying glass in the search box:   */
.fa-search{
	left: 25px !important;
}

/* Menu Search Suggestion Box */
#topSuggestionsListBackground{
	position:relative; 
	left:-8px; 
	top:-8px; 
	padding: 2px;
	text-align:left; 
	font-weight:normal; 
	background: transparent !important;
	color: black; 
	font-size:smaller; 
	z-index: 20;
}

#mainSuggestionsList{
	background: red;  /* #3F3F3F; */
	color: #FFFFFF;
}
#mainSuggestionsListBackground, #mainSuggestionsListBackground a{
	background: #3F3F3F;
	color: #FFFFFF;	
}

#topSuggestionsListBody, 
#topSuggestionsListBody a:link,
#topSuggestionsListBody a:visited
{
	color:white !important;
}

/* ========== nav bar right menu options, settings icons etc: */

#rightMenu{
	clear:both; 
	margin: revert; 
	float: right;}

#rightMenu > ul > li, #rightMenu > ul > form > li{
	top: 8px;
	list-style: none;
	color: white;
	margin: 0px 4px 0px 15px; 	/* this spaces the home, cog and search+ icons apart */
}


#rightMenu li:hover #rightSubMenu{display: block; }
        
#rightMenu li > a:link{
	/* This applies to the "Home" icon on the nav bar */
	text-decoration: none; 
	color: white !important; 		
}
#rightMenu li > a:visited{
	/* This applies to the "Home" icon on the nav bar, which is usually visited */
	color: white !important; 	
}

#rightMenu li > a:active{color: #CCCDCF;}

/* This is the colour the icons (e.g. settings cog) go when you hover over.  */
#rightMenuItems li a:hover, #rightMenuItems li:hover{
	color: white !important;
}

/* This is the highlight that applies as you roll over menu items on the right: */
#rightSubMenu li:hover, #subMenu2 li:hover a{
	background: #62B6F4; /* Cirrus-provided light blue  #62B6F4 */
	color: #FFFFFF !important;
	width: calc(100% + 25px);
}
.settingsMenu{
	color: #FFFFFF;
}

#rightSubMenu li{	/* "<-- THEMES" sub-menu link */
	color: white;
} 

/* This is the highlight given to the currently seelcted theme in the themes list (if shown) */
.savedTheme{ 
	color: white !important; 	
	background: none !important;
	font-weight: bold;
	width: calc(100% + 25px);
}

.noMenuHover:hover{
	background: inherit !important;
	width: inherit !important;
}
.noMenuHover table td{
	color: #FFFFFF;
}

.successtext{
	color:	#4D9BD6;
}

/* Section boxes: level 1 heading, leave 2 and leve 3 headings  ======================================================================= */

/* Layout_Menu = Level 1 heading.  Inside this you will find H1 text with TableLayer1Header set. */
.Layout_Menu{
	background: #003653;    /* Sesui-provided dark blue #003653 */
	color: #FFFFFF;
	border-radius: 3px 3px 0px 0px;
	border: 1px #6F6F6F solid;
	border-width: 1px 1px 0px 1px;	
}

/* Level 1 section content area:   */
.Layout_Menu_Content_Default{
	border-style:solid;
	border-width: 0px 1px 1px 1px;
	border-color: #E1E1E1;		/* Cirrus provided from their reseller menu example */

	background: #F6F6F6;		/* Cirrus provided from their reseller menu example */
	background-color: #F6F6F6;	/* Cirrus provided from their reseller menu example */
}

.TableLayer1Header{
	position: relative;
   	font-weight: normal;  /* Cirrus-provided */
	margin: 5px 5px 5px 15px;
}

/* Layout_Section = Level 2 heading.  Inside this you will find H2 text with TableLayer2Header set. */
.Layout_Section{
	background: #003653; /* Sesui-provided dark blue #003653 */
border-bottom:  5px solid #EB8023;
}

.TableLayer2Header {
	position: relative;
   	font-weight: normal;  /* Cirrus-provided */
	margin-top: 4px;
	margin-left: 5px;
}


/* .Layout_Content_Information - This is the box around the content, usually under the L2 heading.  */
.Layout_Content_Information {
	border-style:solid;
	border-width: 0px 1px 1px 1px;
	border-color: #E1E1E1;		/* Cirrus provided from their reseller menu example */

	background: #FFFFFF;
	background-color: #FFFFFF;
}
.Layout_Content_Information table td{
	padding-bottom: 6px;
	padding-left: 6px;		/* makes table rows look less cramped */
	padding-right: 6px;		/* makes table rows look less cramped */
	
}

/* The setting below screws up client-side tabs for some reason.  Where do we want these LI items offset this way in "information" lists (save space?) and where do client-side tabs get .Layout_Content_Information  from? */
/*    .Layout_Content_Information li{ */
/*    	position: relative; */
/*    	left: -20px; */
/*    } */

.Layout_Content_Information_For_Level3 {
	border-style: solid;
	border-width: 1px;
	border-color: #E5E5E5; /* Cirrus provided grey that isn't used elsewhere */
	background: #FFFFFF;
	color: #000000;
}




/* Tabs  ======================================================================= */


#TabMenuContainer{
	width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

#tabContent{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	top: revert;
}
#Tabs{
	height: auto;
}

#TabMenuContainer #Tabs ul {
	height: auto;
}

/* This applies to inactive tabs (the SHAPE part, not the text part)  */
/* and the active tab (which usually has colour overrides on top)     */
#TabMenuContainer #Tabs ul li{
	background: white;		/* Cirrus provided row 2 colour light grey #F5F5F5 */
	background-color: white;	/* Cirrus provided row 2 colour light grey #F5F5F5 */
	box-shadow: none;
	border-style: solid;
	border-width: 1px 1px 0px 1px;
	border-color: #E1E1E1;		/* Cirrus provided border from their reseller menu example */
	border-radius: 0px;	
	margin: 0px;  /* If you want your tabs seperated, add margin here, e.g. 0px 10px 0 0; */
	position: relative;
	top: 0px;
	height: 25px;
}

/* These applies to inactive tabs (the TEXT part)  */
/* and the active tab (which usually has colour overrides on top)     */
#TabMenuContainer #Tabs ul li a	{	/* server-side tabs (most tab strips on the web site) */
	color: #C0C0C0;
	font-weight: normal;	
}
#TabMenuContainer #Tabs ul li span {	/* client-side tabs (e.g. customer menu on the right) */
	color: #C0C0C0;
	font-weight: normal;	
}


#TabMenuContainer #Tabs ul li:hover{
	background: #003653;		/* Sesui-provided dark blue #003653 */
	background-color: #003653;	/* Sesui-provided dark blue #003653 */
	color:#FFFFFF !important;
}

#TabMenuContainer #Tabs ul li:hover > Span, #TabMenuContainer #Tabs ul li:hover > a{
	color:#FFFFFF !important;
}




.activeTab{
	background: #003653 !important;       /* Sesui-provided dark blue #003653 */
	background-color: #003653 !important;       /* Sesui-provided dark blue #003653 */
	color: #FFFFFF !important;
}

.activeTab a{				/* server-side tabs (most tab strips on the web site) */
	color: #FFFFFF !important;
	font-weight: normal !important;    /* Cirrus style doesn't use bold in headings */
	margin-top: 2px;
	margin-bottom: 2px;
}
.activeTab span{			/* client-side tabs (e.g. customer menu on the right) */
	color: #FFFFFF !important;
	font-weight: normal !important;    /* Cirrus style doesn't use bold in headings */
	margin-top: 2px;
	margin-bottom: 2px;
}

#tabContent{
	box-shadow: none;	
	border-radius: 0px;
	border-color: #E1E1E1;		/* Cirrus provided border from their reseller menu example */
	background:  #F6F6F6;		/* Cirrus following through from H1 area background to tab area background */
	background-color:  #F6F6F6;	/* Cirrus following through from H1 area background to tab area background */
}

.tabContentPage {
	background:  #F6F6F6;		/* Cirrus following through from H1 area background to tab area background */
	background-color:  #F6F6F6;	/* Cirrus following through from H1 area background to tab area background */
}

.MicroTab{
	position: relative;
	left:20px;
}


/* Tables - pricing, inforational etc ======================================================================= */

.borderseperate{
	border-collapse: collapse;
}

.tableHeaderClass{
	/* Standard table headings */
	background: #003653;    		/* Sesui-provided dark blue #003653 */
	border-radius: 0px;
}
.tableHeaderClass td{
	color: #FFFFFF;
	border: 1px #C0C0C0 solid;
	border-width: 0px 1px 1px 0px;
}

/* EOS: */
.tableHeaderEOS{
	background: #ECECEC;
	background: -webkit-linear-gradient(top, #ECECEC, #B6B6B6); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(top, #ECECEC, #B6B6B6); /* For Opera 11.1 to 12.0 */
  	background: -moz-linear-gradient(top, #ECECEC, #B6B6B6); /* For Firefox 3.6 to 15 */
  	background: linear-gradient(#ECECEC, #B6B6B6); /* Standard syntax */
	color: #5B5B5B;
}

.tableHeaderEOS a{
	color: #5B5B5B;
}

.HeaderTotalsRow {
	background:#2990CF;
	color: #FFFFFF;
}

/*Row types:*/
/* Statistical */
.Layout_Table_Statistics_Colour1 td, .Layout_Table_Statistics_Colour2 td{
	border: 1px #C0C0C0 solid;
	border-width: 0px 1px 1px 0px;
}
.Layout_Table_Statistics_Colour1{
	background: #E5EFED;
}
.Layout_Table_Statistics_Colour2{
	background: #FFFFFF;
}

/* Pricing */
.Layout_Table_Pricing_Colour1{
	background:	#F7F7F7;
}
.Layout_Table_Pricing_Colour2{
	background:	#FFFFFF;
}

.Layout_Table_Pricing_Colour1 td, .Layout_Table_Pricing_Colour2 td{
	border: 1px #C0C0C0 solid;
}

/* Information */
.Layout_Table_Information_Colour1 td, 
.Layout_Table_Information_Colour2 td,
.tableHeaderClass td{
	border: none;
	color: #00000 !important;	/* Cirrus provided black text when on top of row colour 1 and row colour 2 */
	line-height: 14px !important;   /* Cells inside tables which use row colour 1 and row colour 2 are more tighly stacked */
}
.Layout_Table_Information_Colour1{
	background:#FFFFFF;		/* Cirrus provided row 1 colour (white) */
}
.Layout_Table_Information_Colour2{
	background: #F5F5F5;		/* Cirrus provided row 2 colour light grey #F5F5F5 */
}

/* Interactive */
.Layout_Table_Interactive_Colour1, .Layout_Table_Interactive_Colour2{
	background: transparent;
}

.groupRow{
	border-radius: 5px;
	color: #000000;

}

#subCategory li:last-of-type {
    border-radius: 0px 0px 10px 10px;
    width: calc(100% + 25px);
}


.ticket_footerlinks td a, .ticket_footerlinks td{
	color: #FFFFFF;
}

#AdminMenu_GeneralAdmin{

}


.Layout_Section_Content_Box li{
	padding-left: 15px;
}

.TableLayer1Header{
	position: relative;
}


/* Radio Buttons */
.radiobtn {
}
.radiobtn-input {
    display: none;
}
.radiobtn-input:checked + .radiobtn-label {
    background: #4D9BD6;
    border-style: inset;
}
.radiobtn-label {
    Background: #FFFFFF;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    display: inline-block;
    border: 2px outset #000;
}

.selector-container {
   background-color: #c0c0c0;
}