@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;
}


#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;
}

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

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

.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;
}
*/

/* FLARE MASTERPAGE INDICATORS
    These are needed so Flare knows which topics go with which master pages */
html { mc-master-page: url('../MasterPages/SuccessCenterTopic.flmsp');}
html.HomePage { mc-master-page: url('../MasterPages/SuccessCenterHome.flmsp');}
html.GuideLandingPage { mc-master-page: url('../MasterPages/SuccessCenterGuide.flmsp');}


/* 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: #444;
}


    h1 {
        font: bold 36px/40px 'Roboto', sans-serif;
        font-weight: 500 !important; /* overwrite previous font size for h1 to match branding request*/
        color: #04c9d7;
        padding-top: 0px;
        margin-top: -4px;
        margin-bottom: 12px;
    }
    h2 {
        font: bold 32px/36px 'Roboto', sans-serif;
        color: #444;
        margin-top: 26px;
        margin-bottom: 12px;
    }
    h3 {
        font: bold 24px/28px 'Roboto', sans-serif;
        color: #444;
        margin-top: 24px;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    h4 {
        font: bold 16px/20px 'Roboto', sans-serif;
        color: #444;
        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: #0079aa !important;
}
a:visited {
    color: #0079aa !important;
}
a:active {
    color: #0079aa !important;
}
a:hover {
    color: #04c9d7 !important;
}
*/

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


/** CONTENT BODY */
#contentBody {
    margin-top: 15px;
}
#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: #444;
        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: #04c9d7;
        font-weight: bold;
        /*background-color: #04c9d7;*/
        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: #444;

        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: #04c9d7 !important;
        font-weight: bold;
    }
    #sideNav a.selected{
        color: #fff;
        font-weight: bold;
        background-color: #04c9d7;
        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:#04c9d7; /* 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:#04c9d7;
        border-left:solid 8px #04c9d7;
        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) { 


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


/** FEEDBACK */
@media (max-width: 768px) { 
    /*
    #feedback {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        clear:left
    }*/
}

#feedback {
    /*
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;*/
}



/** 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;
}


#TopicInnards table {
/*    table-layout:fixed; */
    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: #04c9d7;
    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 the position and size of the leave feedback box

*/
#feedback{

   /* position:absolute;*/
    /*position:relative;*/

    max-height: 173px;
    max-width: 240px;
    min-height: 173px;
    min-width: 240px;


    padding:0px;
    /*    margin:0px;*/
    /*
    left:0px;
    right:0px;*/
    visibility: hidden;
}

#feedback.showHiddenBlock{
	
    visibility: visible !important;
}


@media (max-width: 1660px)
{
    #feedback {
    /*
        min-width: 1600px;
        max-width: 1600px;*/
        display:block;
        position:absolute;
        /*top:100%;*/
        /*bottom:353px; */
        /* compensate for feedback height */
        /* left:calc((1920px - 100vw)/2 + 210px); */
        left:382px;
        z-index:1;
        /*top:80%;*/

    }
}

@media (min-width: 1661px)
{
    #feedback {
        top:0px;
    /*
        min-width: 1600px;
        max-width: 1600px;*/
        display:block;
        position:relative;
        /*top:100%;*/
        /*bottom:353px; */
        /* compensate for feedback height */
        /*left:calc((1920px - 100vw)/2 + 210px);*/
        z-index:1;

        /*left:1600px;*/
        left: 108px;
        /*top:80%;*/
    }
}



/*

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%;
    }
    

}






@media (min-width: 1920px){
    #TopicInnards{
        left:78px;
        
        /*
        min-width:calc(1200px - (1920px - 100vw)/2);
        max-width:calc(1200px - (1920px - 100vw)/2);*/
        min-width:1200px;
        max-width:1200px;
        
    }
    #sideNav{
/*        left:-306px;*/
/*        left:-291px;*/
/*
        left:-281px;*/
        min-width:273px;
        max-width:273px;

        top:0px;

        left:78px;        


    }
}

@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:78px;

        min-width:calc(1200px - (1920px - 100vw)/2);
        max-width:calc(1200px - (1920px - 100vw)/2);
    }
    #sideNav{
/*        left:calc((-1920px + 100vw)/2 - 308px);*/
/*        left:calc((-1920px + 100vw)/2);*/


/*        left:-306px;*/
/*        left:-291px;*/


        /*left:-281px;*/
        /*left:calc(((-1920px + 100vw)/2)-281px);*/
        
/*
        left:calc(-281px - ((-1920px + 100vw)/2));*/

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

        left:78px;
        min-width:273px;
        max-width:273px;
        top:0px;
    }
}


@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:78px;

        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;
    }
    #feedback{
        left:322px;
    }
}


@media (max-width: 991px) and (min-width: 768px){
    #TopicInnards{
        margin-top:0px;
        /*
        margin-left:calc((992px - 100vw)/2 + 187px - 38px);
        padding-right:calc((992px - 100vw)/2 + 187px - 38px);
        */

        left:78px;

        min-width:calc(1100px - (1920px - 100vw)/2);
        max-width:calc(1100px - (1920px - 100vw)/2);
    }
   #sideNav{
        /*left:-186px;*/
       /* left:-161px;*/
        left:78px;
        min-width:153px;
        max-width:153px;
        top:0px;
    }
    #feedback{
        left:262px;
    }
}

@media (max-width: 767px){
    #TopicInnards{
        /*
        margin-top:40px;*/
/*        width:100%;*/
        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;
    }
    #feedback {
        position:absolute;
        left: 40px;
       /* bottom: 0px;*/
    }

}




/*

Control position of text/side navigation 

*/
/*

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




/*

Control the position and size of the leave feedback box

*/
/*
.screen_width_update#feedback{
    position:absolute;

    max-height: 173px;
    max-width: 300px;
    min-height: 173px;
    min-width: 300px;


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

@media (min-width: 1920px){
    .screen_width_update#feedback{
        top:0px;
        right:-320px;
        max-height: 173px;
        max-width: 300px;        
    }   
}

@media (max-width: 1919px) and (min-width:1600px){
    .screen_width_update#feedback{
        top:0px;
        right:calc((1920px - 100vw)/2 - 320px);
        max-height: 173px;
        max-width: 300px;                
    }   
}

*/

/*
@media (min-width: 1920px){
    .screen_width_update#sideNav{*/
/*        left:-306px;*/
/*        left:-291px;*/
/*        left:-281px;
        min-width:273px;
        max-width:273px;

        top:0px;
    }
}

@media (max-width: 1919px) and (min-width:1200px){
    .screen_width_update#TopicInnards{
        margin-top:0px;
        margin-left:calc((1920px - 100vw)/2);
        padding-right:calc((1920px - 100vw)/2);
    }
    .screen_width_update#sideNav{
/*        left:calc((-1920px + 100vw)/2 - 308px);*/
/*        left:calc((-1920px + 100vw)/2);*/


/*        left:-306px;*/
/*        left:-291px;*/
/*

        left:-281px;
        min-width:273px;
        max-width:273px;
        top:0px;
    }
}

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

@media (max-width: 991px) and (min-width: 768px){
    .screen_width_update#TopicInnards{
        margin-top:0px;
        margin-left:calc((992px - 100vw)/2 + 187px - 38px);
        padding-right:calc((992px - 100vw)/2 + 187px - 38px);
    }
    .screen_width_update#sideNav{
        /*left:-186px;*/
        /*
        left:-161px;
        min-width:153px;
        max-width:153px;
        top:0px;
    }
}

@media (max-width: 767px){
    .screen_width_update#TopicInnards{
        margin-top:40px;
/*        width:100%;*/
/*
    }
    .screen_width_update#sideNav{
        top:-40px;
        left:1px;
    }
    .screen_width_update#currentTopic{
        font-size:14px;
    }

}
*/

/* Image modals (zoomable images)

/* The Modal  */
.modal {
    display: block; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 4; /* 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 #04c9d7;
/*    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: #292929;
	border-color: white !important;
}
 


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




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


    #standard-header {
        display: none;
    }

    .cookie-container{
        display: none;
    }

    .product-header {
        display: none;
    }


    .product-header-alt {
        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 {
/*  #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: 40px;
        font-style: italic;
        content: " © 2003-2021 SolarWinds Worldwide, LLC. All rights reserved.";
        display: block;
        text-align: center;
    }

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

    }

    #feedback{
        display: none;
    }
/* 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 */

#contentBody .topic-search-frame.sideNav {
  width: calc(100% + 40px - 16px + 8px); 
  /* 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 */
  height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  margin: 0;
  padding: 24px 16px;
  background-color: #666;
  
  /* to fix formatting after removing top-level topics in side nav */
  position: relative;
  left: calc(-40px + 16px);
  margin-right: calc(-40px + 16px);
  z-index: 100;
}

#contentBody .topic-search-frame.sideNav form {
  width: 100%;
  height: 40px;
  border: solid 2px #ccc;
  background-color: #fff;
  padding: 0px 0px 0px 15px;
}
#contentBody .topic-search-frame.home {
  width: 100vw; 
  height: 54px;
  margin: 0px;
  padding: 9.4px calc((100vw - 558px)/2) 8.6px;
  top:-15px;
  left:0px;
  background-color: #04d6e1;
  position:relative;
}

#contentBody .topic-search-frame.home form {
  width: 100%;
  margin: 0 auto;
  outline: none;
  width:calc(100% - 50px);
  max-width: 558px;
  height: 36px;
  padding: 0px 0px 0px 15px;
  border: solid 2px #ccc;
  background-color: #fff;
  
}

#contentBody .topic-search-box {
  outline: none;	
  border:0px !important;
  width:calc(100% - 33px);
  margin:0 3px 0 0;
  padding:0px;
}

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

#contentBody .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: #444;
}
#contentBody .Search-Text::placeholder{
  color: #a1a1a1;
}

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

@media (max-width: 767px){
    #contentBody div.row{
		padding-top:calc(84px + 2px + 4px);
	}
		
	#contentBody .topic-search-frame.sideNav {
	  position: absolute; /* take outside the parent container */
	  top: calc(0px - 84px - 2px - 16px);
	  height: 84px;
	  width: calc(100% + 34px); /* account for the margin and borders of the parent container */
	  left: -18px; /* account for the margin, border, and position of the parent container */
	}
	
	#contentBody .icons-symbol-search {
	  top: calc(30px - (96px - 84px)/2); /* moving 'top' to original position, then accounting for the difference due to height difference in outside container */
		
	}
}

/* end of styles added for search within product box */