@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,500,700|Roboto:400,500,700');



/* Updates to NewStyles.css after siloing main.css to only affect #standard-header
*/

/*
* {
  box-sizing: border-box;
}
:after,
:before {
  box-sizing: border-box;
}*/

body {
    margin:0px;
    /*position:relative;*/
}

@media (max-width: 1199px)
{
    body {
        padding-top:60px;
    }
}

.d-none {
    display: none !important;
}

/*This hides the link to the main guide page at the top of a guide TOC when that TOC is on the main guide page.*/
#mc-main-content ul.nocontent.menu._Skins_BlankMenuSkin.mc-component li a.selected 
{  
	border-bottom:1px solid black;
}
#mc-main-content ul.nocontent.menu._Skins_BlankMenuSkin.mc-component li:has(a.selected) 
{ 
	display:none;
}

#sideNav.col-xs-12, #TopicInnards.col-xs-12 {
    position: relative;
/*    min-height: 1px;*/
/*    padding-left: 15px; */
/*    padding-right: 15px;*/
}


/* footer */
footer{
    margin-top: 30px !important;
}


#product-name-container{

}

div.product-header
{
    box-sizing: border-box;
	position: relative;
}

.product-header *,
.product-header *::before,
.product-header *::after {
    box-sizing: border-box;
}

div.product-header-alt
{
    box-sizing: border-box;
	position: relative;
}

.product-header-alt *,
.product-header-alt *::before,
.product-header-alt *::after {
    box-sizing: border-box;
}



#docnav .container {
    margin-right:auto;
    margin-left:auto;
}

#docnav {
    box-sizing: border-box;
}

#docnav *,
#docnav *::before,
#docnav *::after {
  box-sizing: border-box;
}


#docnav ol, #docnav ul, #docnav dl {
  margin-top: 0;
  margin-bottom: 1rem;

}

#sideNavContents ol, #sideNavContents ul, #sideNavContents dl {
  margin-top: 0;
  /*margin-bottom: 1rem;*/
}

#docnav .container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}


#contentBody.row {
}


@media (max-width: 576px)
{
    .col-xs-12{
        /*
    -ms-flex: 0 0 100.0%;
    flex: 0 0 100.0%;*/
    max-width: 100.0%;

    padding-left:15px;
    padding-right:15px;
    }
}

@media (min-width: 577px) and (max-width:768px)
{
    .col-sm-5{
        /* -webkit-box-flex: 0; */
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .col-sm-7{
        padding-left:15px;
        padding-right:15px;
    }

}

@media (min-width: 769px)
{
    .col-md-5{
    /* -webkit-box-flex: 0; */
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

}
@media (min-width: 576px)
{
#contentBody .container {
    max-width: 540px;
}
}

@media (min-width: 768px)
{
#contentBody .container {
    max-width: 720px;
}
}


@media (min-width: 992px)
{
#contentBody .container {
    max-width: 960px;
}

}


@media (min-width: 1200px)
{
#contentBody .container {
    max-width: 1140px;
}
}

#contentBody *,
#contentBody *::before,
#contentBody *::after {
  box-sizing: border-box;
}

#contentBody .row, #contentBody.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0px;
    margin-right: 0px;

    box-sizing: border-box;
}

#contentBody .container {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
}



/*

#contentBody p {
    margin-top: 0;
    margin-bottom: 1rem;

    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

#contentBody body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    position: relative;
    font-family: Roboto,sans-serif;
}
*/



/* GENERAL STYLES */
html{
    min-height:100%; /* to keep the footer where it belongs if a page is very short */
}
body {
    font: normal 14px/20px 'Roboto', sans-serif !important;
    color: #111111;
}


    h1 {
        font: bold 36px/40px 'Roboto', sans-serif;
        font-weight: 500 !important; /* overwrite previous font size for h1 to match branding request*/
        color: #00C8DC;
        padding-top: 0px;
        margin-top: -4px;
        margin-bottom: 12px;
    }
    h2 {
        font: bold 32px/36px 'Roboto', sans-serif;
        color: #111111;
        margin-top: 26px;
        margin-bottom: 12px;
    }
    h3 {
        font: bold 24px/28px 'Roboto', sans-serif;
        color: #111111;
        margin-top: 24px;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    h4 {
        font: bold 16px/20px 'Roboto', sans-serif;
        color: #111111;
        margin-top: 18px;
        margin-bottom: 12px;
        padding-bottom: 0;
        /*  text-transform: uppercase; */
    }



p {
    widows: 3;
    orphans: 3;
}

/* This adds the arrows to the drop-down heading as an indicator that it can be expanded and contracted. The JavaScript strips out the styles that add arrows to the online help.
The 'Open' style has to come before the 'Close' style so 'Close' can override 'Open' when necessary. This sets 'closed' as the default and applies 'open' only for the actually opened drop-downs. 
*/
div.MCDropDown.dropDown.MCDropDown_Open img.MCDropDown_Image_Icon
{
  background-image: url('../images/icons/triangle_down.png');
}
div.MCDropDown.dropDown.MCDropDown_Closed img.MCDropDown_Image_Icon
{
  background-image: url('../images/icons/triangle_right.png');
}


/* for darker text color in links */
/*
a {
    text-decoration: none;
    color: #006482 !important;
}
a:visited {
    color: #006482 !important;
}
a:active {
    color: #006482 !important;
}
a:hover {
    color: #00C8DC !important;
}
*/

.CoveoSearchInterface {
    margin-left: 0px !important;
    margin-right: 0px !important;
/*    z-index:1000;    */
}


/** CONTENT BODY */
#contentBody {
    margin-top: 15px;
}
.homepage #contentBody, .HomePage #contentBody{
	margin-top:69px;
}
#contentBody .row{
    align-items: flex-start;
}
div[class*=Breadcrumbs] {
    font-size: 11px;
    font-style: italic;
    padding: 5px 15px;
}
.MCBreadcrumbsPrefix{
    display: none;
}


@media (max-width: 767px){

    /** SIDE NAV */
    #sideNav {

        padding-left:0px;
        padding-right:0px;
    }

    #sideNav ul {
        /* background-color: #eee; */
        background-color: #eeeeee;
        list-style-type: none;
        padding-left:0;
        margin-bottom:0px;
    }
    #sideNav li {
        margin: 0;
        padding-top: 0px;    
    }
    #sideNav a {
        display: block;

        margin: 0;
        color: #111111;
        background-color: #ffffff; /* change background color of top-level nav items to white */

        /*font: normal 14px/20px "Open Sans", sans-serif;*/
        font: normal 16px "Roboto", sans-serif;
        font-weight: bold;
        padding-bottom: 15px;

        /* to fix formatting after removing top-level topics in side nav */
        position: relative;
        padding-right:24px;

     /*   left: -16px;
        margin-right: -16px;*/


    /*    padding-right:24px;*/


    }
    #sideNav a:hover{
        text-decoration: none;
    /*    font-weight: bold;    */
    }
    #sideNav a.selected{
        color: #00C8DC;
        font-weight: bold;
        /*background-color: #00C8DC;*/
        font-weight: bold;
    }

    #sideNav .sub-menu {
    /*    margin-left: 16px;   /* This indents each child topic in the side nav */
    }





	#sideNavContents a.selected ~ ul > li > a /* select siblings of the selected/opened item */
	{      
	/*          
        display: block;
        overflow: hidden;*/
	}


	#sideNavContents a.selected ~ ul /* select siblings of the selected/opened item */
	{               
	/* 
        display: block;
        overflow: hidden;
        */
	}




/* mobile view styles brought over from original javascript */


	#sideNavContents > ul > li > ul > li > ul > li > a
	{
		padding-left:10px; /* indent children at this level - level 2 */
	}

	#sideNavContents > ul > li > ul > li > ul > li > ul > li > a
	{
        padding-left:20px; /* indent children at this level - level 3 */
        font-weight:500; /* make these medium weight	*/	
	}

/*	#sideNavContents > ul > li > ul > li > ul > li > ul > li > a */
	#sideNavContents > ul > li > ul > li > ul > li > ul > li > ul > li > a
	{
        padding-left:30px; /* indent children at this level -level 4 */
        font-weight:400; /* turn off bold for these	*/			
	}

	#sideNavContents > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a
	{
        padding-left:40px; /* indent children at this level -level 5 */
        font-weight:400; /* turn off bold for these	*/			
	}

	#sideNavContents > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a
	{
        padding-left:50px; /* indent children at this level -level 6 */
        font-weight:400; /* turn off bold for these	*/			
	}





/* overwrite flare breakpoint.

From Liz:
This stops the sidenav from disappearing when Flare has it disappear.
 Instead, the sidenav visibilty is controlled in the HTML with a
 Bootstrap display property (d-none d-md-block)

From Christopher:
I left this as Liz set it, there is more that affects the side nav now, however.;
Bootstrap makes the nav disappear when the screen is small enough.
 */

}

#sideNav ul.menu {
 /*   display: block !important;*/
	display: block !important;
}



@media (min-width: 768px){

    /** SIDE NAV */
    #sideNav {
        padding-right: 0;
    }

    #sideNav ul {
        /* background-color: #eee; */
        background-color: #eeeeee;
        list-style-type: none;
        padding-left:0;
    }
    #sideNav li {
        margin: 0;
        padding-top: 0px;    
    }
    #sideNav a {
        display: block;
        padding: 8px 16px;
        margin: 0;
        color: #111111;

        background-color: #ffffff; /* change background color of nav items to white */



        /*font: normal 14px/20px "Open Sans", sans-serif;*/
        font: normal 16px "Roboto", sans-serif;
        font-weight: bold;


        /* to fix formatting after removing top-level topics in side nav */
        position: relative;

     /*   left: -16px;
        margin-right: -16px;*/

        left: -40px;
        margin-right: -40px;


        padding-right:24px;
    /*    padding-right:24px;*/


    }
    #sideNav a:hover{
        text-decoration: none;
        color: #fff !important;
        background-color: #00C8DC !important;
        font-weight: bold;
    }
    #sideNav a.selected{
        color: #fff;
        font-weight: bold;
        background-color: #00C8DC;
        font-weight: bold;
    }

    #sideNav .sub-menu {
    /*    margin-left: 16px;   /* This indents each child topic in the side nav */
    }

/* overwrite flare breakpoint.

From Liz:
This stops the sidenav from disappearing when Flare has it disappear.
 Instead, the sidenav visibilty is controlled in the HTML with a
 Bootstrap display property (d-none d-md-block)

From Christopher:
I left this as Liz set it, there is more that affects the side nav now, however.;
Bootstrap makes the nav disappear when the screen is small enough.
 */



/* Recreating CSS previously implemented via JavaScript.*/

/*     const side_topics = $("div#sideNav > div#sideNavContents > ul > li > ul.sub-menu > li"); // top-level nav items */

           /* if ($(this).parent().hasClass("sub-menu"))
                $(this).parent().css({"margin-left":"16px"})*/


	#sideNavContents a.selected ~ ul > li > a /* select siblings of the selected/opened item */
	{      
	/*          
        display: block;
        overflow: hidden;*/
	}


	#sideNavContents a.selected ~ ul /* select siblings of the selected/opened item */
	{               
	/* 
        display: block;
        overflow: hidden;
        */
	}




/*	#sideNavContents > ul > li > ul > li > ul > li > ul > li > ul > li > a*/

    #sideNav > #sideNavContents > ul > li > ul.sub-menu
    {
    	margin-left: 16px;
    }


/* top level */

	#sideNavContents > ul > li > ul > li > a
	{
		background-color:#eeeeee; /* gray background */
	}

/* top level, opened - the opened class is assigned via JS*/

	#sideNavContents > ul > li > ul > li > a.opened
	{
		background-color:#00C8DC; /* blue background */
		color:#FFFFFF; /* white text */
	}

/* level 2 and greater, selected - make text blue and add blue border rectangle to left */

    #sideNavContents > ul > li > ul > li > ul > li a.selected 
    {
        color:#00C8DC;
        border-left:solid 8px #00C8DC;
        padding-left:8px;
        font-weight: 400;
        background-color:#ffffff;
    }
    
/* level 2 -only-, selected */
    #sideNavContents > ul > li > ul > li > ul > li > a.selected
    {
        font-weight: bold;
    }



    #sideNavContents > ul > li > ul > li > ul > li > ul > li > a/* level 3 */
	{

        padding-left: 28px; /* indent children at this level */
        font-weight: 500;
        /*            //$(this).css({"border-left":"24px solid #ffffff"}); // add a white border to hide the gray that appears to the left of the item.*/
    }


	#sideNavContents > ul > li > ul > li > ul > li > ul > li > a.selected /* level 3 selected */
	{
		
        padding-left: 20px; /* indent children at this level */
       /* font-weight: 400; /* turn off bold for these */
       background-color:#ffffff; /* white background */
       font-weight: 500;

	}


	#sideNavContents > ul > li > ul > li > ul > li > ul > li > ul > li > a /* level 4 */
	{
     /*   display: block;*/
        overflow: hidden;
        font-weight: 400;
        padding-left: 40px;
	}

	#sideNavContents > ul > li > ul > li > ul > li > ul > li > ul > li > a.selected /* level 4 selected*/
	{
     /*   display: block;*/
        overflow: hidden;
        font-weight: 400;
        padding-left: 32px;
	}

	#sideNavContents > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a /* level 5 */
	{
     /*   display: block;*/
        overflow: hidden;
        font-weight: 400;
        padding-left: 52px;
	}

	#sideNavContents > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a.selected /* level 5 selected*/
	{
     /*   display: block;*/
        overflow: hidden;
        font-weight: 400;
        padding-left: 44px;
	}	

	#sideNavContents > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a /* level 56*/
	{
     /*   display: block;*/
        overflow: hidden;
        font-weight: 400;
        padding-left: 64px;
	}

	#sideNavContents > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul> li> a.selected /* level 6 selected*/
	{
     /*   display: block;*/
        overflow: hidden;
        font-weight: 400;
        padding-left: 56px;
	}		

	#sideNavContents a.selected /*test*/
	{                
     /*   display: none;
        overflow: hidden;*/
	}



}



    


@media (min-width: 768px) { 

	#TopicSurround {
        border-left: solid 8px #00C8DC; /* the blue border line that goes down the width of the screen */
	}
    #TopicInnards {
        padding-left: 25px;
    }
    
} 




/** TOPIC */
#TopicInnards {
/*    font: normal 14px/18px "Open Sans",sans-serif; */
    font-family: 'Roboto', sans-serif !important; /* Overwrite for branding */

    font-size: 16px; /* Overwrite for branding */
    line-height: 20px;
	visibility:hidden;
}


#TopicInnards table {
/*    table-layout:fixed; */
    width:100%;
}
#TopicInnards table.autowidth {
	width:auto;
	max-width:100%;
}

/* We think this was added when Liz was making the top-level nav a drop-down menu, but it causes empty boxes to appear after the drop-down text in regular MadCap drop-downs.
div.MCDropDown_Closed span.MCDropDownHead::after {
    margin-left: 5px;
    font-family: FontAwesome;
    content: "\00a0 \f0d7";
    text-align: center;
    font-size: 16px;
    line-height: 16px;
}
div.MCDropDown_Open span.MCDropDownHead::after {
    margin-left: 5px;
    font-family: FontAwesome;
    content: "\00a0 \f0d8";
    text-align: center;
    font-size: 16px;
    line-height: 16px;
}
*/

code{
	/*
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    */
    color: #666;
}

img {
    max-width: 100%;
/*    margin: 4px 0; */
}

/*
The following prevents icons and checkboxes in tables to be sized so small that they are invisible.
*/
table img {
	max-width: 40vw;
}

/*
#contentBody img {

    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
    border: none !important;

}
*/

#contentBody img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#contentBody p {
    font-family: 'Roboto', sans-serif !important; /* Overwrite for branding */

    font-size: 16px; /* Overwrite for branding */
    line-height: 20px;
}

.table-scroll {
    overflow-x: auto;
}
table {
    margin: 8px 0;
}
th {
    background-color: #00C8DC;
    color: #fff;
}

/*
th, td {
    min-width: 100px;
}
*/

/* 

#feedback {
    
    margin-top: 60px;

}
 */


/* Overwrite SWI_customstyles to fix all caps text in guide landing page accordion */

li.has-children
{
    text-transform: none !important;
}

#flare-nav-wrapper li.has-children
{
    text-transform: uppercase !important;
}

/* hide accordion text on load, then reveal after javascript is done loading. */
#contentBody ul._Skins_AccordionMenu
{
    display: none;
    /*visibility: hidden;*/
}



#the-content {
   display: block !important;
}

.hiddenhtml {
    display: none;
}

/*
@media (min-width: 1200px)
{
    main div.container {
        max-width: 1940px !important;
    }

    #sideNav{
        max-width: 400px !important;
    }
}
*/




#sideNav{
   /* position:absolute;*/
    /* left:-291px; horizontal position controlled by javascript */
    /*top:0px;*/
}


#TopicInnards{
   /* position:absolute;*/
}



/*

Control position of text/side navigation WITHOUT MASTER PAGE MODIFICATION

*/

@media (max-width: 1920px)
{

/* CSS for contentbody div.row and contentbody div.container added to escape bounds of "row" from bootstrap - the makes the bounds the normal viewable screen width*/ 
    #contentBody div.row{
       /* display:-webkit-box;*/
       margin-left:0px;
       margin-right:0px;
       /*
       width:100vw;
       max-width:100%;
       */
       width:100vw;
       max-width:100%;
       /*left: calc(-50vw + 50%);*/
       position:relative;
    }

    #contentBody div.container:not([id="homepage"]){ /* make the container for all pages except for the home page fill the screen, up to 1920 pixels */
       /* display:-webkit-box;*/
       
       width:100vw;
       max-width:100%;
       /* adjust class.containers because of bootstrap version inconsistency */
       padding-left: 0px;
       padding-right: 0px;
    }

}

@media (min-width: 1921px)
{
    #contentBody div.row{
       /* display:-webkit-box;*/
       margin-left:0px;
       margin-right:0px;
       width:1920px;
       max-width:100%;
       /*left: calc(-50vw + 50%);*/
       position:relative;
    }

    #contentBody div.container:not([id="homepage"]){ /* make the container for all pages except for the home page fill the screen, up to 1920 pixels */
       /* display:-webkit-box;*/
       
       width:1920px;
       max-width:100%;
    }
    #containSearch {
		left: calc((100% - 1920px)/2);
	}
    .homepage #containSearch, .HomePage #containSearch {
		left: 0;
	}

}






@media (min-width: 1920px){
    #TopicInnards{
        left:0px;
        
        /*
        min-width:calc(1200px - (1920px - 100vw)/2);
        max-width:calc(1200px - (1920px - 100vw)/2);*/
		
        min-width:1200px;
        max-width:1200px;
        
    }
    #sideNav{
        min-width:273px;
        max-width:273px;
        top:0px;
        left:78px;
    }
	#TopicSurround {
		width:calc(100% - 273px - 78px - 8px);
		margin-left: 78px;
	}
	.prefooter {
		width:calc(100% - 1200px);
	}
}

@media (max-width: 1919px) and (min-width:1200px){
    #TopicInnards{
        margin-top:0px;
        /*margin-left:calc((1920px - 100vw)/2);*/
        margin-left:0px;
        /*left:calc((1920px - 100vw)/2);*/

        /*padding-right:calc((1920px - 100vw)/2);*/
        padding-right:0px;

        /*left:calc((1920px - 100vw)/2 - 312px);*/
        left:0px;

        min-width:calc(1200px - (1920px - 100vw)/2);
        max-width:calc(1200px - (1920px - 100vw)/2);
    }
    #sideNav{
        left:78px;
        min-width:273px;
        max-width:273px;
        top:0px;
    }
	#TopicSurround {
		width:calc(100% - 273px - 78px - 8px);
		margin-left: 78px;
	}
	.prefooter {
        width:100%;
	}
}


@media (max-width: 1199px) and (min-width: 992px){
    #TopicInnards{
        margin-top:0px;
        /*margin-left:calc((1200px - 100vw)/2 + 247px - 22px);*/
        margin-left:0px;
        /*
        padding-right:calc((1200px - 100vw)/2 + 247px - 22px);*/
        left:0px;

        min-width:calc(1100px - (1920px - 100vw)/2);
        max-width:calc(1100px - (1920px - 100vw)/2);
    }
    #sideNav{
/*        left:-246px;*/
        /*left:-221px;*/
        left:78px;
        min-width:213px;
        max-width:213px;
        top:0px;
    }
	#TopicSurround {
		width:calc(100% - 213px - 78px - 8px);
		margin-left: 78px;
	}
	.prefooter {
        width:100%;
	}
}


@media (max-width: 991px) and (min-width: 768px){
    #TopicInnards{
        margin-top:0px;
        left:0px;

        min-width:calc(1100px - (1920px - 100vw)/2);
        max-width:calc(1100px - (1920px - 100vw)/2);
    }
   #sideNav{
        left:78px;
        min-width:153px;
        max-width:153px;
        top:0px;
    }
	#TopicSurround {
		width:calc(100% - 153px - 78px - 8px);
		margin-left: 78px;
	}
	.prefooter {
        width:100%;
	}
}

@media (max-width: 767px){
    #TopicInnards{
        min-width:100%; /* the body text should just fill the screen now and the side nav turns into the dropdown */
    }
    #sideNav{
        /*top:-40px;*/
        left:1px;
    }
    #currentTopic{
        font-size:14px;
    }

	.prefooter {
		width: 100%;
	}
}

div#TopicSurround>div {
    display: inline-block;
	vertical-align:top;
}

.prefooter {
    min-width: 200px;
}
div#TopicSurround>div.prefooter>div {
	width:calc(100% - 25px);
	max-width:350px;
	display:block;
	margin-left:25px;
	margin-top:40px;
}

div#cta {background: #eeeeee;}

.cta-head {
    background: #00c8dc;
    color: white !important;
    font-weight: bold;
    padding-bottom: 10px;
    border-color: #00c8dc;
}

#cta>div {
    border: 1px solid #00c8dc;
    border-top: 0px;
    margin: 0;
    padding-top: 0;	
}

#cta p {
    margin: 0;
    padding: 10px 20px 0px 13px;
}

#cta div >* {
    font-size: 16px;
}

.cta-head {
    font-size: 100%;
}


/* Image modals (zoomable images)

/* The Modal  */
.modal {
    display: block; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1001; /* Sit on top */
    /*

    left: 0;
    top: 0;
    */

    /*  margin-left:auto;
    margin-right:auto;*/
    margin:auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;    

    /*  max-width: 100%; */ /* Full width */
    /*  max-height: 100%; */ /* Full height */

    max-width: 90vw; /* Full width */
    max-height: 90vh;  /* Full height */

    overflow: auto; /* Enable scroll if needed */


    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    cursor: zoom-out;

    border-style: solid;
    border-width: 1px;

/*  box-shadow: 10px 10px 5px rgba(0,0,0,0.1); */
/*  box-shadow: 10px 10px 5px grey;  */

    box-shadow: 8px 8px 5px rgba(0,0,0,0.4);
}

.modal-usemap { /* for modal images with usemaps, we don't want it to close on click like normal */
    cursor: default;
}

.modal-background {
    display: block;
    position: fixed;
    z-index: 3; /* Sit right behind the zoomed in image */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    width:100%;
    height:100%;
    left:0;
    top:0;
}

.modal-background:hover {
    cursor: zoom-out;
}

img.zoomable {
    box-sizing:border-box;

}

/* Show the zoom-in cursor on images with the class 'zoomable' */
img.zoomable:hover {
    cursor: zoom-in;
    outline: 2px solid #00C8DC;
/*    box-sizing:border-box;*/
}



/* styling for tabbed content boxes */
div.tabbed-content {
	width:100%;
	/*height: calc(1em + 20px + 25rem + 4px + 10px);*/
	height: calc(25rem + 40px + 10px);
	overflow:hidden;
	position:relative;
	background: #666666;
	border: 5px solid #666666 !important;
	margin:0 !important;
	white-space:nowrap;
	overflow-x: auto;
	font-size:0;
	display:none;
}
div.tabbed-content>*{
	font-size: 1rem;
}
div.tabbed-content .tab-title {
    padding: 10px !important;
    display: inline-block;
    font-weight:bold;
    color: #eeeeee;
    border-width: 0 2px 0 0 !important;
	margin:0 !important;
	cursor:pointer;
}

div.tabbed-content .content-box {
    display: none;
    position:absolute;
    width: 100%;
    height:25rem;
    overflow:auto;
    padding: 10px;
    background: white;
	cursor:auto;
	margin: 0 !important;
	border: 0px !important;
	white-space:normal;
}

div.tabbed-content .content-box.current {
    display: block;
}
 div.tabbed-content .tab-title.current {
	display:inline-block;
	position:relative;
	background: white;
	color: #111111;
	border-color: white !important;
}
 


/*********************print friendly styles***********************/
@media print
{




    body {
/*      display: none;*/
        margin:0 !important;
    }


    #standard-header, #containSearch, .prefooter {
        display: none;
    }

    .cookie-container{
        display: none;
    }

    .product-header {
        display: none;
    }


    .product-header-alt {
        display: none;
    }
	
	.hco-container {
		display:none;
	}
	.eol-notice {
		display:none;
	}


    #docnav {
        display: none;
    }

    footer {
        display: none;
    }



    div.container{
        margin:0px;
        margin-left: 0px;
        margin-right: 0px;
        padding:0px;
        padding-left:0px;
        padding-right:0px;
    }

/*
    div.row{
        margin:0px;
        margin-left: 0px;
        margin-right: 0px;
        padding:0px;
        padding-left:0px;
        padding-right:0px;

    }

    #contentBody{

        margin:0px;
        margin-left: 0px;
        margin-right: 0px;
        padding:0px;
        padding-left:0px;
        padding-right:0px;
    }
*/

    #TopicInnards, #TopicInnards * {
/*  #section-to-print, #section-to-print * {*/
        visibility: visible;
/*      display: block !important;*/
    }

    #TopicInnards, #TopicSurround {
/*  #section-to-print { */
        position: relative;
/*      width: 900px;*/
        width:100%;
        border:none;
/*      left: -200px;*/
        left:0px !important;
        right:0px !important;
        top:0px !important;
        bottom:0px !important;
        margin:0px;
        margin-left: 0px;
        margin-right: 0px;
        padding:0px;
        padding-left:0px;
        padding-right:0px;
        max-width: 100% !important;
        flex-basis: 100% !important;        
    }

/*  div #section-to-print h1 { */
    div #TopicInnards h1 {
        page-break-before: avoid;
    }

    div #TopicInnards::after {
/*  div #section-to-print::after { */
        padding-top: 1em;
		font-size: .9em;
        font-style: italic;
        content: " © 2003-2025 SolarWinds Worldwide, LLC. All rights reserved.";
        display: block;
        text-align: center;
    }

    p.info, p.nugget, p.warning {
        -webkit-print-color-adjust: exact;

    }

/* 11/4/21 fix for print including dropdown, support URL and grey border*/

  .hf {
        display: none;
        }
    
    #sideNav {
        display: none;
        }
}



/* styles added for search within product box */

#containSearch {
	position:absolute;
	z-index:1;
}
div#sideNav {
    margin-top: 96px;
}
.homepage {
	margin-top: 56px;
	width:100%;
	background-color: #00c8dc;
}
.standard {
    margin-left: 54px;
    width: 305px;
   	margin-top:71px;
}

.homepage .topic-search-frame {
  height: 36px;
  margin: 0px;
  padding: 9.4px calc((100vw - 558px)/2) 8.6px;
}
.standard .topic-search-frame {
  width: calc(100% - 2 * (16px)); 
  /* 100% to fill the width, then adding to the gap (same reason as need for left value, only fix is to subtract the value in left:), and adding width of border from topicinnards to ensure it covers the blue line */
  margin: 0;
  padding: 28px 16px;
  background-color: #666;
  
  /* to fix formatting after removing top-level topics in side nav */
  position: relative;
  left: 0;
  height: 40px;
}

.standard .topic-search-frame form {
  width: 100%;
  border: solid 2px #ccc;
  background-color: #fff;
  padding: 0px 0px 0px 15px;
  width: calc(100% - 19px);
}

.homepage .topic-search-frame form {
  margin: 0 auto;
  outline: none;
  max-width: 541px;
  height: 32px;
  padding: 0px 0px 0px 15px;
  border: solid 2px #ccc;
  background-color: #fff;
  width: calc(100% - 69px);
  
}
#containSearch .topic-search-box {
  outline: none;	
  border:0px !important;
  width:calc(100% - 33px);
  margin:0 3px 0 0;
  padding:0px;
}

#containSearch .topic-search-box:-webkit-autofill,.topic-search-box:autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

#containSearch .Search-Text {
  font-family: Roboto;
  font-size: 14px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.23px;
  text-align: left;
  color: #111111;
}
#containSearch .Search-Text::placeholder{
  color: #a1a1a1;
}

#containSearch .icons-symbol-search {
  padding: 8px 14px 8px 2px;
  border: 0;
  color: #a1a1a1;
  font-size:14px;
  background-color: unset;
  height:100%;
  width:30px;
}
#containSearch .icons-symbol-search:hover {
	cursor:pointer;
}


#containSearch #search-in-prod.loading {
	display:none;
}

@media (max-width: 767px){
	.standard {
        width:100%;
		margin-top:56px;
		margin-left:0;
	}	
	
	.standard .topic-search-frame {
	  padding: 24px 16px;
	  height: 36px;
	}
	main#contentBody {
		margin-top: 100px !important;
	} 
	.homepage main#contentBody, .HomePage main#contentBody  {
		margin-top: 69px !important;
	} 
	div#sideNav {
		margin-top: 0px;
	}
}
		
@media (max-width: 1199px) and (min-width: 992px){
	.standard {
        width:245px;
    }
}

@media (max-width: 991px) and (min-width: 768px){
	.standard {
        width:185px;
    }
}
	
/* end of styles added for search within product box */

/* styling for deki combined tables */

table.deki-combined-table tr:nth-child(even)
{
    background: #f1f1f2;
}

/* end of styles for deki combined tables */




/* start of styles for aggregated release notes */
.buttons.popup-container.clearfix.topicToolbarProxy._Skins_TopicToolBar_expand_dropdowns.mc-component.nocontent+div {
    margin-top: 50px;
}


div.HideRn .mc-main-content{
	display:none;
}
.rnContainer a[onclick^="javascript:toggleRN"]:before {
	content: "▼";
	font-size:.65rem;
	display:inline-block;
	vertical-align:top;
	padding:0 .5rem 0 0;
	width:1.5em;
}

.rnContainer.HideRn a[onclick^="javascript:toggleRN"]:before {
	content: "▶";
}
.rnContainer a[onclick^="javascript:toggleRN"]:hover:after {
	content:"Click to collapse release notes";
	font-size:.8rem;
	margin-left:1em;
	text-decoration:none !important;
	color:#111;
	display:inline-block;
	position:absolute;
	margin-top:1.1em;
	border:#ccc 1px solid;
	padding:3px;
	background:#eee;
	right:0;
}
.rnContainer.HideRn a[onclick^="javascript:toggleRN"]:hover:after {
	content:"Click to expand release notes";
}

.rnContainer, .swo_release_monthly .MCDropDown_Open, .rnContainer, .saas_release_monthly .MCDropDown_Open {
	border: 2px solid #ccc;
	margin-bottom:1.1em;
}
.swo_release_monthly .MCDropDown_Open, .saas_release_monthly .MCDropDown_Open {
	border-top:0px;
}
.swo_release_monthly .MCDropDownBody, .saas_release_monthly .MCDropDownBody {
    padding: 0 1em;
}
.rnContainer.HideRn {
	border: 2px solid white;
	border-bottom: 0px;
	margin-bottom:0;
}
.rnContainer .TopicInnard-RN, .rnContainer>.mc-main-content {
	padding:0 1em;
}
.rnContainer.HideRn>p:first-child{
	background:none;
}
.rnContainer h1{
	display:none;
}
.rnContainer div[data-section="legaln"], .rnContainer .legaln {
	display:none;
}
div#TopicInnards .rnContainer.HideRn a[onclick^="javascript:toggleRN"]{
	padding-bottom:0;
}
div#TopicInnards .rnContainer a[onclick^="javascript:toggleRN"],  body #TopicInnards .swo_release_monthly .MCDropDownHead a.dropDownHotspot,  body #TopicInnards .saas_release_monthly .MCDropDownHead a.dropDownHotspot {
	font-weight: 500;
	font-size: 1.25rem !important;
	padding:.4rem !important;
	line-height:1em;
	display:inline-block;	
	color: #006482 !important; 
}
.rnContainer>p:first-child, .swo_release_monthly .MCDropDown_Open .MCDropDownHead a.dropDownHotspot, .saas_release_monthly .MCDropDown_Open .MCDropDownHead a.dropDownHotspot  {
	margin:0;
	background:#ccc;
	display:block !important;
}


p.showhideBtns span {
	display: inline-block;
	
}
p.showhideBtns span .hide {
	display:none;
}

p.showhideBtns a {
	display: inline-block;
	padding: 2px 8px;
	border-left: 1px solid #ccc;
	margin: 2px;
}

p.showhideBtns>a {
	border-left: none;
}
.showhideBtns>a:before {
	content: "Collapse ";
}
.HideAll .showhideBtns>a:before {
	content: "Expand ";
}
#releaseNotesForm .selectIntro {
	display: block;
	position: relative;
	margin: 1.25em 10px .5em 0;
	width: 100%;
	vertical-align: top;
	font-weight: bold;
	font-size:1.25em;
}

#releaseNotesForm select {
	display: block;
	position: relative;
	margin: 5px 0px 10px 0px;
	padding:5px;
	font-size:1rem;
	min-width: 10%;
}
#releaseNotesForm button {
	display: block;
	position: relative;
	margin: 5px 0px 10px 0px;
	font-size:1rem;
	min-width: 10%;
	border: #db8206 1px solid;
	background-color: #FF6200;
	height: auto !important; 
	font-family: 'Roboto';
    font-size: 10.5pt !important;
    width: auto;
    color: #fffbf5;
    padding: 7px 14px;
    font-weight: bold;
    height:auto !important;
}
#releaseNotesForm button:active {
    background: #eeeeee !important;
    color: #FF6200 !important;
}

h1.groupDivider {
	margin: .5em 0 .25em 0;
	font-size:1.8em;
}

.rnContainer div#page-toc {
	display: none !important;
}
#productsDropdown.nonplatform {
	display: none !important;
}
#whatchanged, #topicInnardsContainer .NoProds {
	text-align:center;
	border-top:1px solid black;
	padding-top:15px;
	font-weight:bold;
	font-size:1.25em !important;
}
.NoProds {
	color: #FF6200 !important;
}

 /* Style for the containing div */
 span.tierList, span.moduleList {
	display:block;
	width:100%;
	column-count: 3; /* Adjust the number of columns as needed */
	column-gap: 10px; /* Gap between columns */
}

/* Style for each .checkboxOption span */
.checkboxOption {
	display: block; /* or display: inline-flex; */
	width: auto !important; /* Let the width adjust based on content */
	padding: 3px 0px;
}

.checkboxOption * {
	display:inline-block;
	vertical-align:top;
}
.checkboxOption label {
	width:calc(100% - 1.15em - 7px);
}
.checkboxOption input {
	margin: .1em 5px 0 0;
	padding: 0px;
	height:1.15em;
	width:1.15em;
}
.checkboxOption input:checked {
  accent-color: #006482 !important;
}

.checkboxOption input[disabled]:checked, .checkboxOption input[disabled]:checked+label {
  color: #888;
  accent-color: #888;
}
.checkboxOption input::after {
	content: attr(data-tooltip); /* Use data-tooltip attribute for custom text */
	position: absolute;
	background-color: rgb(249 249 249 / 95%);
	border: 1px solid rgb(204 204 204 / 95%);
	padding: 4px;
	font-size: .8rem;
	white-space: nowrap;
	display: none;
	width: fit-content;
	max-width: 30%;
	text-wrap: wrap;
	margin-left: 3rem;
	margin-top:1rem;
	color: black;
}
.checkboxOption input[disabled]:hover::after {
	display:block;
}
.loading {
	margin:3em 0;
	font-size:4em;
	font-weight:bold;
	text-align:center;
}
/* end of styles for aggregated release notes */


/* start of styles for last updated sections of release notes */
.last-updated-section,p[last-updated-section] {
	display:none;
}
div.all-updated p {
    padding-top:.25em;
    padding-bottom:.25em;
    margin: 0 !important;
}
div.all-updated p.section-updated {
    border: 1px solid lightgray;
    border-bottom: 0px;
    border-top: 0px;
    width: 100%;
    padding-left:5px;
    margin-left: 10px !important;
    display:block;
    font-size:.85em !important;
}
div.all-updated p.final-updated+p.section-updated {
    border-top: 1px solid lightgray;
}
div.all-updated p.section-updated:last-child {
    border-bottom: 1px solid lightgray;
}
div.all-updated {
    width: max-content;
}
p.final-updated::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f05a";
    color:#006482;
    margin-left: 5px;
    font-size: .9em;
    vertical-align: super;
}
p.final-updated:hover::after {
    content: "\f05a   Click to view update details.";
}
   
.hf #search-module-navbar-flyout .search-module-desktop .links-slide-out-container .links-columns > div {
    -webkit-column-width: auto !important;
    -moz-column-width: auto !important;
    column-width: auto !important;
}