/*
 * Main CSS stylesheet for USU documentation in Helpcenter Layout
 */
 
 :root {

  --tableshade: rgb(230,230,230,.25);
  --usu-blue-base: rgb(0,79,159);
  --usu-blue-lighter-60: rgb(102,149,197);
  --usu-light-blue-base: rgb(2,148,190);
  --usu-light-blue-lighter-5:rgb(242,249,252);
  --usu-dark-blue-base: rgb(10,19,65);
  --usu-dark-blue–lighter-40: rgb(157,161,179);
  --usu-dark-blue–lighter-5: rgb(243,243,245);
  --grey-blues-1: rgb(8,36,57);
  --grey-blues-3: rgb(33,73,100);
  --warm-neutrals-1: rgb(27,32,34); /*Very dark grey*/
  --warm-neutrals-5: rgb(95,115,126); /*Middle grey*/
  --cold-neutrals-1: rgb(0,0,0); /*Black*/
  --cold-neutrals-2: rgb(52,52,52); /*Dark grey*/
  --cold-neutrals-7: rgb(255,255,255); /*White*/
  --visited: rgb(167,29,164);
  --information-background: rgb(217,228,234);
  --error-background: rgb(249,221,228);
  --warning-background: rgb(255,243,217);
  --success-background: rgb(220,241,219);
}


body {
	background-color: var(--cold-neutrals-7);
	font-family: "Roboto",sans-serif;
	font-size: 14px;
	color: var(--cold-neutrals-2);
}
body, html {
	height: 100%;
}
/* tablets, smart phones */
@media (max-width: 992px) {
#pagetools-container {
	position: fixed;
	width: 100%;
	margin: 0 -25px;
	bottom:0;
	background-color: var(--usu-blue-base); 
	padding: 0.5em 0;
	z-index: 1;
}}						   
h1 {
	font-size: 180%;
}
h2 {
	font-size: 125%
}
h3 {
	font-size: 110%;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
    font-family: inherit;
}

h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
}

h1.bridgehead, h2.bridgehead, h3.bridgehead, h4.bridgehead, h5.bridgehead, h6.bridgehead, h7.bridgehead {
    font-size: 16px;  
    line-height: 2;
    font-weight: 550;
    margin-bottom: 10px;
    margin-top: 20px;
}


.procedure > li::before {
    background-color: var(--warm-neutrals-5);
	width: 20px;
	height: 20px;
	font-size: 12px;
	line-height: 20px;
}
.theme1 .procedure > li::before {

    background-color: var(--warm-neutrals-5);

}



.warning h3, .note h3, .important h3, .caution h3, .tip h3 , .notice h3 {
   display: none;
}

.bg-primary, .btn-primary, .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus, .site-sidebar, .portal-single-publication .publication-icon {

    background-color: var(--grey-blues-1);

}



.inlinemediaobject {
    vertical-align: 0em;
}

.pager, .site-footer, main article {
    margin-left: 4%;
}


/*startpage*/

.portal-header::after {
    opacity: 1;
    filter: grayscale(0%); 
}

.portal-header .logo {
    margin-bottom: 0;
    height: 53px;
}

.portal-header .portal-search {
    color: var(--cold-neutrals-2);

}

.portal-header .search-field {
    background-color: var(--cold-neutrals-7);
    color: var(--cold-neutrals-2)

}
.portal-header .portal-search button, .portal-search button:hover, .publication-contents h4 span {
    background-color: var(--usu-blue-base);

}

.portal-header .search-field::placeholder {
        color: var(--cold-neutrals-2);
}

.portal-header h1 {
    color: var(--cold-neutrals-2);
    white-space: normal;
    font-weight:200;

}

.featured-title a {
    color: var(--usu-blue-base);
}
.featured-subtopics a {
    color: var(--warm-neutrals-1);
}
.featured-title a:hover,.featured-subtopics a:hover {
    color: var(--usu-dark-blue-base);
}

.featured-content-label {
    margin-bottom: 30px;
}

.portal-single-publication a{
    box-shadow: none;
    color: var(--usu-blue-base);
    background-color: var(--usu-light-blue-lighter-5);
}

.portal-single-publication a:hover{
    box-shadow: none;
    color: var(--usu-dark-blue-base);
    background-color: var(--usu-light-blue-lighter-5);
}

.portal-single-publication .publication-icon {
    
    background-color: var(--usu-blue-base);
}
.portal-single-publication:hover .publication-icon {
    
    background-color: var(--usu-dark-blue-base);
}

.cat-panel:before{
    content: "\f15c"; 
}




/*left side header*/

.site-sidebar-header {
    height: 56px;
    background-color: var(--grey-blues-3);
}

.site-sidebar-header > a {
    width: 100%;
    display: inline-block;
    padding: 16px 20px;
    margin: 0;
}

.site-sidebar-header > a > img.logo{
    padding: 0!important;
    margin: 0!important;
    height: 24px!important;
    width: auto!important;
    float: left;

}

/*left side search*/
.site-sidebar-search {
    padding: 30px 15px 20px 15px;

}


.site-sidebar-search .search-field {
    /*-webkit-appearance: none;*/
    background-color: var(--usu-light-blue-lighter-5);
    border: 1px solid transparent;
    color: var(--warm-neutrals-1);
    height: 32px;
    border-radius: 16px;
}

.site-sidebar-search .search-field:active,.site-sidebar-search .search-field:focus {
    /*-webkit-appearance: none;*/
    background-color: var(--grey-blues-3);
    border: 1px solid var(--cold-neutrals-7);
    color: var(--cold-neutrals-7);
}

.site-sidebar-search .search-field:hover {
    /*-webkit-appearance: none;*/
    background-color: var(--usu-dark-blue–lighter-5);
    border:1px solid var(--usu-dark-blue–lighter-40);
    color: var(--warm-neutrals-1);
}

.site-sidebar-search .search-field::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
		color: var(--warm-neutrals-5);
        opacity: 1; /* Firefox */
}	

.site-sidebar-search .search-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--warm-neutrals-5);
}

.site-sidebar-search .search-field::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--warm-neutrals-5);
}


/*left side navigation*/

.nav-site-sidebar {
    margin-top: 0px;
}


.nav-site-sidebar > li a {
    padding-left: 20px;
}

.nav-site-sidebar li a {
    color: var(--cold-neutrals-7);
    font-size: 16px;
}

.nav-site-sidebar li a:hover {
    background-color: var(--grey-blues-3);
}

.nav-site-sidebar li.active a:hover {
    background-color: var(--grey-blues-3);
}

.nav-site-sidebar li.active > a {
    background-color: var(--grey-blues-3);
}

.nav-site-sidebar > li > ul > li:last-child {
    padding-bottom: 20px;
}

.nav-site-sidebar ul a {
    padding-left: 30px;
    font-size: 14px;
}

.nav-site-sidebar ul ul a {
    padding-left: 40px;
    font-size: 12px;
}

.nav-site-sidebar ul ul ul a {
    padding-left: 50px;
}

.nav-site-sidebar ul ul ul ul a {
    padding-left: 60px;
}

.nav-site-sidebar ul ul ul ul ul a {
    padding-left: 70px;
}

.nav-site-sidebar ul ul ul ul ul ul a {
    padding-left: 80px;
}


/*navigation top - breadcrumbs*/

.site-content .toolbar {
    min-height: 56px;
    padding: 0;
    background-color: var(--grey-blues-3);
}

.breadcrumb-container {
    line-height: 12px;
    margin: 0 4%;
    padding-left: 15px;
}
.breadcrumb-container, .toolbar-tools {
    min-height: 56px;
    display: flex;
    align-items: center;
}

.navbar-toggle .icon-bar {
    background-color: var(--cold-neutrals-7);
}

.breadcrumb span,.breadcrumb .breadcrumb-link a,.breadcrumb .breadcrumb-node {
    font-size: 12px;

    color: var(--cold-neutrals-7);
}

.breadcrumb-link a:hover {
    text-decoration: underline;
}

.breadcrumb .breadcrumb-node {
    font-weight: 600;
}

.breadcrumb > li + li::before {
    padding: 0 10px;
    color: var(--cold-neutrals-7);
    content: "\276F";
    font-size: 10px;
    font-weight: 400;
}



/*Content*/
#content-wrapper {
    margin-top: 30px;
}

#content-wrapper a {
    color: var(--usu-blue-base)!important;
    
}
#content-wrapper a:hover {
    color: var(--usu-dark-blue-base)!important;
    text-decoration: underline;
}
#content-wrapper a:focus {
    color: var(--usu-light-blue-base);
}
#content-wrapper a:visited {
    color: var(--visited);
}





/*Section TOC*/

.section-toc-title {
    color:  var(--usu-blue-base);
    border-bottom: 1px solid var(--usu-dark-blue–lighter-5);

}

.section-toc a,.section-toc span{
   font-size: 14px!important;
}

.section-toc ul {
    margin-top: 15px;
}



/*buttons prev/next on page end*/
.pager li > a:hover, .pager li > span:hover {
    background-color: var(--usu-dark-blue-base);
    color: var(--cold-neutrals-7);
}
.pager li > a, .pager li > span {
    background-color: var(--usu-blue-base);
    color: var(--cold-neutrals-7);
    border-radius: 3px;
    width: 75px;
    height: 24px;
    padding: 0;
    margin: 0;
    padding-top: 3px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.8px;

}

/*Boxes*/

.notice::before {
    content: '\f05a';
    color: var(--warm-neutrals-5);
}

.notice {
    background-color: var(--cold-neutrals-7);
    border-bottom-width: 1px;
    border-style: solid;
    border-color: var(--warm-neutrals-5);
    border-top-width: 1px;
    border-right-width: 1px;
}

.note::before, .important::before, .tip::before {
    top: 12px;
    color: var(--grey-blues-3);
}

.note, .important, .tip {
    background-color: var(--information-background);
    border: 0px solid transparent;
}

code {
    color: var(--warm-neutrals-5);
    background-color: var(--usu-light-blue-lighter-5);
}



/*Panels*/

.panel {
    border-bottom: 0;
}

.panel-heading h1, .panel-heading h2, .panel-heading h3 {
    margin-top: 1px;
    margin-bottom: 1px;
    font-size: 110%;
    font-weight: bold;
}

.panel-heading h1, .panel-heading h2, .panel-heading h3,.panel-heading ::before {
    color: var(--usu-blue-base)!important;
}


/*Tables*/

table tr:nth-child(even) {
    background-color: var(--tableshade);
}

thead {
	background-color: var(--usu-light-blue-lighter-5);
	color: var(--warm-neutrals-5);
}

td, th 
{vertical-align:top;
}

.frame-void {
    border-inline: 1px;
}

/*Icon before accordion*/
.panel-heading :not(div).title::before, .panel-heading .sidebar-title::before {
    content: "\f0fe";
}
.panel-heading.active :not(div).title::before, .panel-heading.active .sidebar-title::before {
    content: "\f146";
}


/*Search results*/


#search-result-wrapper {
    margin-top: 0;
}

.search-container h2 {
    margin-top: 0;
    font-size: 180%;
}

.searchresulttitle {
    color: var(--usu-blue-base);
}


.searchresultsnippet {
    color: var(--cold-neutrals-2);
}

.search-result-breadcrumbs {
    color: var(--usu-blue-base);
}

.search-result-breadcrumbs:hover,.searchresultitem:hover .search-result-breadcrumbs {
    color: var(--usu-dark-blue-base);
    text-decoration: underline;
}