/*
Theme Name: ABC Supply API Toolkit
Author: Kurt Kokoruz
Version: 1.0
*/
/* ========== Google font ========== */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&display=swap');

.preloader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 999999999;
	background: center no-repeat #fff;
}

.admin-bar .fixed-top {top: 46px;}
.admin-bar .offcanvas-lg {top: 46px;}

@media screen and (min-width: 783px) {
	.admin-bar .fixed-top {top: 32px;}
	.admin-bar .offcanvas-lg {top: 32px;}
}

/* ========== General ========== */
body {
	font-family: 'Nunito Sans', sans-serif;
	font-size: 16px;
	color: #2b2b2b;
	font-weight: 400;
	line-height: 25px;
	width: 100%;
	overflow-x: hidden;
	position: relative; 
}

a, button, input { transition: ease-in-out 0.2s; }

a { color: #D31245; text-decoration: none; }
a:hover { color: #003C75; }

p { margin-bottom: 0.5rem; }

strong { font-weight: 700; }

hr { border-top: 1px solid #dee2e6; opacity: 1; }

p + ul {
margin-top: -0.5rem;
margin-bottom: 0.5rem;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
	line-height: 1.2;
	font-weight: 600;
	font-family: 'Nunito Sans', sans-serif;
	margin-bottom: 0;
}

h1.parent-title {font-weight: 600; color:#D31245; font-size:1.5rem; text-transform: uppercase;}
h2.page-title {font-weight: 900; color:#005DAA; font-size:2.5rem; text-transform: uppercase;}
h3 {font-weight: 700; color:#005DAA; font-size:1.75rem; padding-bottom:0.25rem;}
h4 {font-weight: 700; color:#000000; font-size:1.35rem; padding:0.75rem 0 0.25rem 0;}

.section-white {}
.section-gray {background-color:#eee;}
.section-blue {background-color:#005DAA;}



.api-menu-bar {display:block;}
aside.bd-sidebar {height: calc(100vh - 80px); position: fixed; padding:40px 0 40px 0; top: 80px; overflow: auto; z-index: 1035;}
main.bd-main, main.main-home {padding-top:120px; margin-left: 0; min-height: 750px;  }
main.page {padding-top:100px; }

header {
	background-size: cover;
	background-position: right 50%;
	background-repeat: no-repeat;
	background-color:transparent!important;
	background-image: url("<?php echo get_template_directory_uri(); ?>/img/header_bkg.jpg");
}
header .navbar-brand.simple-nav-logo img {height: 48px;}
.inner-header {height: 80px; margin: 0 auto; padding:12px 0;}	
	
#primary-navigation { margin-top: 1.2rem; padding:1rem; background-color: #005DAA; }

#menu-main-menu {margin-right: 10px;}


.nav-link { color: white; margin: 0 5px; }
.bd-sidebar { flex: 0 0 auto; background-color:#eee; }
.bd-sidebar .offcanvas-start { overflow: auto; }




/* ----- Bootstrap Overrides ----- */
.navbar { --bs-navbar-padding-y: 0; }
.bg-dark { background-color: rgba(0, 93, 170, 0)!important; }

.btn {
	min-width: 200px;
	--bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-weight: 700;
    --bs-btn-border-width: 2px;
    --bs-btn-border-radius: 24px;
	text-transform: uppercase;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #005DAA;
    --bs-btn-border-color: #005DAA;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #005DAA;
    --bs-btn-disabled-border-color: #005DAA;
}

.btn-outline-primary {
    --bs-btn-color: #005DAA;
    --bs-btn-border-color: #005DAA;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #005DAA;
    --bs-btn-hover-border-color: #005DAA;
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #005DAA;
    --bs-btn-active-border-color: #005DAA;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #005DAA;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #005DAA;
    --bs-gradient: none;
}

/* ----- Home Page Navigation (Delete) ----- */
ul.features-icons li {width: 20%;}

/* ----- Home Page ----- */
.col-content {
	margin: 0;
	padding: 15px 0 0 0;
	font-size:1rem;
}

.col-content h3 { font-size: 1.6rem; }

/* ----- Sidebar Navigation ----- */
.current-menu-item.menu-item-has-children {
	position: relative;
}
.current-menu-item.menu-item-has-children::after {
	position: absolute;
	top:8px;
	right:13px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	font-family: "Font Awesome\ 5 Pro"; font-weight: 900; content: "\f078";
	-webkit-font-smoothing: antialiased;
	color:#ffffff;
}

.sidebar ul { list-style: none; padding-left: 0; }

.sidebar a {
    border-bottom: 1px solid #eee;
    font-size: 0.9em;
    color: #666;
	display: block;
    padding: .5rem 25px;
}

.sidebar ul.sub-menu { background: #ffffff; }	
.sidebar li a:hover { background: #D31245; color: #fff!important; }
.sidebar li.current-menu-ancestor > a { background: #005DAA; color: #fff!important; }
.sidebar li.current-menu-item > a { background: rgb(74, 144, 226); color: #fff!important; }

.sidebar ul>li.menu-item.menu-item-has-children ul li { display: none;}
.sidebar ul>li.menu-item.menu-item-has-children.current_page_item ul li { display: block; }
.sidebar ul>li.menu-item.menu-item-has-children.current_page_item ul ul li { display: none; }
.sidebar ul>li.menu-item.menu-item-has-children.current-menu-parent ul li.current_page_item { display: block; }

.sidebar ul li.current_page { background-color:#005DAA; }
.sidebar ul li.current-menu-item li a { font-weight: 700; }
.sidebar ul li.current-menu-item li a span.endpoint { font-size: 0.8rem; display: block; line-height: 1; margin-top: 4px; font-weight: 500; }
.sidebar ul li.current-menu-item li a span.endpoint span {font-size:0.7rem; font-weight: 700; color: #ffffff; border-radius: 8px; line-height:1; margin-right:3px; padding: 3px 4px 0 4px; position: relative; top: -1px; width: 48px; height: 16px; display: inline-block; text-align: center;}
.sidebar ul li.current-menu-item li a span.endpoint span.get {background-color: red; }
.sidebar ul li.current-menu-item li a span.endpoint span.post {background-color: blue; }

.sidebar li .submenu li .nav-link.function::before {
	position:absolute;
	width: 50px;
	height: auto;
	left: 1rem;
	top:0.65rem;
}

.sidebar li .submenu li .nav-link.get::before { content: url('img/icon-get-01.svg'); }
.sidebar li .submenu li .nav-link.post::before { content: url('img/icon-post-01.svg'); }
.sidebar li .submenu li .nav-link.put::before { content: url('img/icon-put-01.svg'); }
.sidebar li .submenu li .nav-link.delete::before { content: url('img/icon-delete-01.svg'); }
.sidebar .nav-link {
	font-weight: 400;
	color: var(--bs-dark);
	border-bottom:1px solid #eee;
	position: relative;
}

.sidebar .nav-link.function { padding-left: 70px; }
.sidebar .nav-link:hover { color: var(--bs-primary); }
.sidebar .nav-link i::before {
	display: flex;
	justify-content: center;
	position: absolute;
	top:0.8rem;
	right:0.8rem;
}


code { color: #005DAA; }

/* ----- Prism Code Block ----- */
pre[class*=language-] {
    padding: 2rem 1em !important;
    /*margin: 0.5em 0 !important;*/
	margin: 0 !important;
    border-radius: 0 !important;
	position: relative;
	border: 0.3em solid #000000 !important;
}

.code-toolbar .toolbar { right: 0.3em; }
.code-toolbar pre { height:240px; }
.code-toolbar pre.toggle-code { height:auto; }

.code-toolbar>.toolbar { right: 0.3em !important; }
.code-toolbar>.toolbar>.toolbar-item>a,
.code-toolbar>.toolbar>.toolbar-item>button,
.code-toolbar>.toolbar>.toolbar-item>span {
    color: #999999 !important;
    font-size: 1em !important;
    padding: 0 0.5em;
    background: rgba(224,224,224,1) !important;
    box-shadow: 0 !important;
    border-radius: 0 !important;
	line-height:2 !important;
}

/* ----- Accordion Wrapper ----- */
.post-content-accordion { padding: 1.5rem 0; }
.post-content-accordion h3 { padding-bottom:0.5rem; }

#request-wrapper h2,
#response-wrapper h2{ font-weight: 700; color:#005DAA; font-size:1.75rem; text-transform: uppercase; }

h4.request-title { color: #2b2b2b; font-weight: bold; font-size: 1.1rem; }

.accordion-item:last-of-type .accordion-button.collapsed { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }

.accordion-body { background-color: rgba(173,194,224,0.1); }
.accordion-body h3 { font-weight: 700; color:#003C75; font-size:1.5rem; padding-bottom:0.25rem; }

.accordion-button {
    color: #FFFFFF;
	font-weight: 700;
	font-size:1.1rem;
	padding: 0.75rem 1.0rem;
    background-color: #005DAA;
}

.accordion-button:hover { background-color: #D31245; }
.accordion-button:not(.collapsed) {
    color: #FFFFFF;
    background-color: #D31245;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.nav-tabs { border-bottom: 1px solid #dee2e6; }
.nav-tabs .nav-link {
    padding: 0.4rem 2.2rem 0.4rem 0.2rem;
	margin: 0 2px 4px 2px;
    color: #495057;
	font-weight: 600;
	font-size:1.1rem;
    border: 0 solid transparent;
	border-bottom: 4px solid #495057;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.nav-tabs .nav-link.active {
    color: #D31245;
    background-color: transparent;
    border-color: #D31245;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover { border-color: #D31245; }

.tab-content>.tab-pane { padding: 1rem 0; }

/* ----- FAQs Callout Block ----- */
.callout {
  background-color: #dceaf8;
  padding: 20px;
  margin: 20px 0;
  border-left: 8px solid #D31245;
}
.callout h4 {
	font-weight: 700;
	color:#003C75;
	font-size:1.5rem;
	padding:0;
    margin-top: 0;
    margin-bottom: 5px;
  }
.callout  p:last-child {
    margin-bottom: 0;
  }

@media (min-width: 992px) {
	#primary-navigation {margin-top: 0; padding:0; background-color: transparent; position: relative; right: 20px;}
	.api-menu-bar {display:none;} 
	main.bd-main {margin-left: 320px;}
	.offcanvas-lg {width:280px!important;}
}

@media (min-width: 1200px) {
	main.bd-main {margin-left: 400px;}
	.offcanvas-lg {width:360px!important;}
	
	.col-image { margin-bottom: 1.2rem; }
	.col-content { padding: 0 2rem 2rem 2rem; font-size:1.2rem; }	
	.col-content h3 { font-size: 2.2rem; }	
}