/* Storybook Preview Styles */

/* FONTS */
/* Import Source Sans Pro */
/* 400, 600, 700 */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap");

@import url("/fonts/fonts.css");

/* SIDEBAR */
.sidebar-container {
	font-family: "approach";
	max-width: 210px; /* Cap sidebar width at 210px */
	padding-right: 0px; /* Create visual separation between sidebar and manager window - helps on scroll */
}
.sidebar-container > div {
	padding: 20px 10px;
}

/* SIDEBAR / HEADER */
.sidebar-container .sidebar-header {
	background-color: #000000;
	min-height: 58px;
}
.sidebar-container .sidebar-header > a {
	/* Skip to canvas link */
	display: none;
}
.sidebar-container .os-content-glue {
	margin: 0;
}
.sidebar-container .sidebar-header div:first-of-type {
	/* Logo container */
	height: 44px;
	margin: 0;
	min-height: 44px;
	min-width: 100%;
	text-align: center;
	width: 100%;
}
.sidebar-container .sidebar-header div a {
	/* Logo link */
	align-items: center;
	border: none;
	display: flex;
	height: 44px;
	justify-content: center;
	margin: 0;
	min-height: 44px;
	min-width: 114px;
	padding: 0;
	width: 114px;
}
.sidebar-container .sidebar-header div a img {
	/* Logo img */
	height: 44px;
	max-width: 114px;
	padding: 0;
	width: 114px;
}
.sidebar-container .sidebar-header div:last-of-type {
	/* Hide Storybook Menu */
	display: none;
}
.sidebar-container .sidebar-header div:last-of-type button {
	border-radius: 4px;
}
.sto-1tz551k {
	/* Dropdown Menu */
	/* transform: translate3d(75px, 72px, 0px) !important; */
}

/* SIDEBAR / SEARCH */
.sidebar-container .search-field {
	font-family: "approach";
	margin-top: 20px !important;
}
.sidebar-container .search-field input {
	border: 1px solid #FFFFFF50;
	border-radius: 0px;
	color: #FFFFFF;
}
.sto-1i71e8o {
	color: #FFFFFF !important;
	margin: 0 !important;
}
.sto-1i71e8o .sto-rk8bvk *,
.search-result-item--label,
.search-result-item--label .sto-nl1vk8 {
	color: #FFFFFF !important;
	font-family: "approach";
}
.search-result-item--label svg,
.search-result-item--label svg path {
	fill: #FFFFFF;
}

/* SIDEBAR / SECTION */
.sidebar-container #storybook-explorer-tree > div {
	margin-left: 0px;
	margin-right: 0px;
}
.sidebar-container .os-scrollbar {
	/* Section */ /* Hide Scrollbars */
	display: none;
}
.sidebar-container .sidebar-subheading {
	/* Section */
	align-items: center;
	border-top: 1px solid #FFFFFF25; /* Add line between sections */
	margin-bottom: 0px;
	margin-top: 10px;
	padding-bottom: 5px;
	padding-top: 5px;
	padding-left: 0px;
	padding-right: 0px;
}
.search-result-recentlyOpened.sto-ulso1l,
.sidebar-container .sidebar-subheading button:first-of-type {
	/* Section Subheading */
	align-items: center;
	color: #FFFFFF;
	display: flex;
	flex-direction: row;
	font-family: "nibpro";
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05rem;
	margin-left: 0px;
	padding: 5px 0px;
	text-transform: none;
}
.sidebar-container .sidebar-subheading button:first-of-type span {
	color: #A19473;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.sidebar-container .sidebar-subheading .sidebar-subheading-action svg path {
	color: #333333;
}

.sidebar-container .sidebar-item {
	/* Section Item */
	align-items: center;
	background: transparent !important;
	background-color: transparent !important;
	border-radius: 4px;
	color: #FFFFFF;
	display: flex;
	flex-direction: row;
	height: 30px;
}
.sidebar-container .sidebar-item span {
	/* Section Item */ /* Span */
	height: 5px;
	margin: 0;
	margin-right: 5px;
	padding: 0;
	width: 5px;
}
.sidebar-container .sidebar-item svg {
	/* Section Item */ /* SVG */
	color: #FFFFFF;
	height: 10px;
	margin: 0;
	margin-right: 5px;
	padding: 0;
	width: 10px;
}

.sidebar-container .sto-79elbk .sidebar-item {
	/* Section Item */ /* 1 Level */ /* Page */
	align-items: center;
	background: transparent;
	background-color: transparent;
	border-radius: 0px;
	color: #FFFFFF;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	height: 30px;
	padding-bottom: 5px;
	padding-top: 5px;
	padding-left: 15px;
	padding-right: 5px;
}
.sidebar-container .sidebar-item:hover,
.sidebar-container .sidebar-item[data-selected="true"] {
	/* Section Item */ /* Hover and Selected State */
	background: #333333 !important;
	background-color: #333333 !important;
	border-radius: 0px;
	color: #FFFFFF;
	cursor: pointer;
	font-weight: inherit;
}
.sidebar-container .sto-79elbk .sto-kdzl7m {
	display: none;
}

.sidebar-container .sidebar-item.sto-y7thb4 {
	/* Section Item */ /* 1 Level */ /* Folder */
	padding-bottom: 5px;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
}

.sidebar-container .sidebar-item.sto-yuiyho {
	/* Section Item */ /* 2 Level */ /* Variant */
	padding-bottom: 5px;
	padding-top: 5px;
	padding-left: 30px;
	padding-right: 5px;
}

.sidebar-container .sidebar-item.sto-hey6p2 {
	/* Section Item */ /* 3 Level */ /* Variant */
	padding-bottom: 5px;
	padding-top: 5px;
	padding-left: 45px;
	padding-right: 5px;
}
.sidebar-container a.sidebar-item svg {
	/* Section Item */ /* Icon Colour */
	color: #FFFFFF !important;
}
.sidebar-container a.sidebar-item span {
	/* Section Item */ /* Status Marker */
	border-radius: 3px;
	border: 1px solid #ffffff;
	height: 10px;
	position: absolute;
	right: 5px;
	width: 10px;
}

/* PREVIEW PANE */
.sto-j0a3mh .sto-1va4tas,
.sto-sqdry3 .sto-1va4tas {
	background: #FFFFFF;
	background-color: #FFFFFF;
	border-radius: 0px;
}

/* TOOLBAR */
/* This is the toolbar that goes across the top of the main preview pane */
.sto-16navex {
	/* Toolbar */
	box-shadow: none !important;
	height: 31px;
	max-height: 31px;
	min-height: 31px;
	overflow: hidden;
}
.sto-16navex .sto-p1dfi6 {
	/* Main Toolbar Container */
	border-bottom: 1px solid #31313150;
	height: 30px;
	max-height: 30px;
	min-height: 30px;
	overflow: hidden;
}
/* Tool Containers */
.sto-16navex .sto-p1dfi6 .sto-1amsdi0 {
	/* Left-hand Tool Container */
	height: 30px;
	max-height: 30px;
	min-height: 30px;
	margin: 0;
	padding: 0;
}
.sto-16navex .sto-p1dfi6 .sto-102is01 {
	/* Right-hand Tool Container */
	height: 30px;
	max-height: 30px;
	min-height: 30px;
	margin: 0;
	overflow: hidden;
	padding: 0;
}
/* Tool Compartments */
.sto-16navex .sto-p1dfi6 .sto-1lyqzqv {
	/* Tool Containers *//* Tabs */
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin: 0;
}
.sto-16navex .sto-p1dfi6 .sto-1lyqzqv .sto-1xonygc {
	/* Tool Containers *//* Tabs *//* Tab Wrapper */
	color: #000000;
	font-family: "nibpro";
}
.sto-16navex .sto-p1dfi6 .sto-1lyqzqv .sto-1xonygc button {
	/* Tool Containers *//* Tabs *//* Tab Wrapper *//* Tab */
	align-items: center;
	border: 0px solid transparent !important;
	color: #000000;
	display: flex;
	font-family: "nibpro";
	font-size: 12px;
	height: 29px;
	justify-content: center;
	line-height: 12px;
	padding-top: 2px;
}
.sto-16navex .sto-p1dfi6 .sto-1lyqzqv .sto-1xonygc button:hover {
	/* Tool Containers *//* Tabs *//* Tab Wrapper *//* Tab *//* :hover */
	background-color: #31313125;
}
.sto-16navex .sto-p1dfi6 .sto-1lyqzqv .sto-1xonygc button.sto-16xipd6,
.sto-16navex .sto-p1dfi6 .sto-1lyqzqv .sto-1xonygc button.sto-16xipd6:hover {
	/* Tool Containers *//* Tabs *//* Tab Wrapper *//* Tab *//* :active */
	background-color: #31313150;
}
.sto-16navex .sto-p1dfi6 .sto-c3junj {
	/* Tool Containers *//* Container */
	margin: 0;
}
.sto-16navex .sto-p1dfi6 .sto-1tw5a7j {
	/* Tool Containers *//* Separator */
	background: #31313150;
	height: 30px;
	margin: 0;
	padding: 0;
	width: 1px;
}
.sto-16navex .sto-p1dfi6 .sto-gjwifs,
.sto-16navex .sto-p1dfi6 .sto-1prpyih,
.sto-16navex .sto-p1dfi6 .sto-66ab9t,
.sto-16navex .sto-p1dfi6 .sto-w68cbo {
	/* Tool Containers *//* Action Buttons */
	border-radius: 0px;
	color: #000000;
	height: 30px;
	margin: 0;
	padding: 0;
	width: 30px;
}
.sto-16navex .sto-p1dfi6 .sto-gjwifs:hover,
.sto-16navex .sto-p1dfi6 .sto-1prpyih:hover,
.sto-16navex .sto-p1dfi6 .sto-66ab9t:hover,
.sto-16navex .sto-p1dfi6 .sto-w68cbo:hover {
	/* Tool Containers *//* Action Buttons *//* :hover */
	background-color: #31313125;
}
.sto-16navex .sto-p1dfi6 .sto-w68cbo {
	/* Tool Containers *//* Action Buttons *//* :active */
	background: #31313125;
	background-color: #31313125;
}
.sto-16navex .sto-p1dfi6 .sto-17u15qg {
	/* Tool Containers *//* Action Buttons *//* Viewport */
	background: #FFFFFF;
	background-color: #FFFFFF;
	border-radius: 0px;
	height: 30px;
	margin: 0;
	padding: 0 8px;
}
.sto-16navex .sto-p1dfi6 .sto-17u15qg:hover {
	/* Tool Containers *//* Action Buttons *//* Viewport *//* :hover */
	background-color: #31313125;
}
.sto-16navex .sto-p1dfi6 .sto-17u15qg div {
	/* Tool Containers *//* Action Buttons *//* Viewport *//* Title */
	font-family: "approach-mono";
	font-size: 10px;
}
.sto-16navex .sto-p1dfi6 .sto-vxcmzt {
	/* Tool Containers *//* Action Buttons *//* Viewport Size */
	background: #FFFFFF;
	background-color: #FFFFFF;
	border-radius: 0px;
	height: 29px;
	margin: 0;
}
.sto-16navex .sto-p1dfi6 .sto-vxcmzt .sto-3gces1 {
	/* Tool Containers *//* Action Buttons *//* Viewport Size *//* Value */
	align-items: center;
	background: #FFFFFF;
	background-color: #FFFFFF;
	border-radius: 0px;
	border: none !important;
	display: flex;
	font-family: "approach-mono";
	font-size: 10px;
	height: 29px;
	justify-content: center;
	margin: 0;
	padding: 0 5px;
}
.sto-16navex .sto-p1dfi6 .sto-5vr7pa {
	/* Tool Containers *//* Component Labels */
	align-items: center;
	border-radius: 0px;
	display: flex;
	font-family: "approach-mono";
	font-size: 10px;
	height: 30px;
	justify-content: center;
	line-height: 10px;
	margin: 0;
	padding: 0 10px;
}


.sto-10ro1m {
	/* Preview Body */
	height: calc(100% - 30px) !important;
	top: 30px !important;
}

/* storybook-preview-wrapper */
#storybook-preview-wrapper {
	background: #BEBEBE;
	background-color: #BEBEBE;
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23ffffff' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}
#storybook-preview-wrapper #storybook-preview-iframe {
	background: #FFFFFF;
	background-color: #FFFFFF;
}
#storybook-preview-wrapper .sb-show-main {
	background-position: center center;
}

/* Toolkit */
.sto-prrmyz,
.sto-diyom0 {
	/* Toolkit Pane */
	border-top: 1px solid #31313150 !important;
	box-shadow: none;
}
#storybook-panel-root .sto-pfzk3k {
	/* Toolkit Pane */
	border-bottom: 1px solid #31313125 !important;
	box-shadow: none !important;
	height: 41px;
	max-height: 41px;
	min-height: 41px;
	overflow: hidden !important;
}
#storybook-panel-root .sto-pfzk3k .sto-p1dfi6 {
	/* Main Toolbar Container */
	border-bottom: 1px solid #31313150;
	height: 40px;
	max-height: 40px;
	min-height: 40px;
	overflow: hidden !important;
}
/* Tool Containers */
#storybook-panel-root .sto-pfzk3k .sto-p1dfi6 .sto-1amsdi0 {
	/* Left-hand Tool Container */
	height: 40px;
	max-height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0;
}
#storybook-panel-root .sto-pfzk3k .sto-p1dfi6 .sto-102is01 {
	/* Right-hand Tool Container */
	height: 40px;
	max-height: 40px;
	min-height: 40px;
	margin: 0;
	overflow: hidden;
	padding: 0;
}
#storybook-panel-root .sto-pfzk3k .sto-p1dfi6 .sto-1lyqzqv {
	/* Right-hand Tool Container *//* Button Container */

}
#storybook-panel-root .sto-pfzk3k .sto-p1dfi6 .sto-1lyqzqv .tabbutton {
	/* Right-hand Tool Container *//* Button Container *//* Button */
	align-items: center;
	border: 0px solid transparent !important;
	color: #000000;
	font-family: "nibpro";
	font-size: 12px;
	height: 39px;
	justify-content: center;
	line-height: 12px;
	padding-top: 2px;
}
#storybook-panel-root .sto-pfzk3k .sto-p1dfi6 .sto-1lyqzqv .tabbutton:hover {
	/* Tool Containers *//* Tabs *//* Tab Wrapper *//* Tab *//* :hover */
	background-color: #31313125;
}
#storybook-panel-root .sto-pfzk3k .sto-p1dfi6 .sto-1lyqzqv .tabbutton-active,
#storybook-panel-root .sto-pfzk3k .sto-p1dfi6 .sto-1lyqzqv .tabbutton-active:hover {
	/* Tool Containers *//* Tabs *//* Tab Wrapper *//* Tab *//* :active */
	background-color: #31313150;
}

#storybook-panel-root .sto-snh8f7 {
	/* Tool Containers *//* Accessibility */
}
#storybook-panel-root .sto-snh8f7 .sto-h4bt71 {
	/* Tool Containers *//* Accessibility *//* Tab Container */
	background: #FFFFFF;
	background-color: #FFFFFF;
	border-bottom: 1px solid #31313150;
	box-shadow: none !important;
}
#storybook-panel-root .sto-snh8f7 .sto-h4bt71 button {
	/* Tool Containers *//* Accessibility *//* Tab Container *//* Button */
	align-items: center;
	border: 0px solid transparent !important;
	color: #000000;
	font-family: "nibpro";
	font-size: 12px;
	height: 39px;
	justify-content: center;
	line-height: 12px;
}
#storybook-panel-root .sto-snh8f7 .sto-h4bt71 button:hover {
	/* Tool Containers *//* Tabs *//* Tab Wrapper *//* Tab *//* :hover */
	background-color: #31313110;
}
#storybook-panel-root .sto-snh8f7 .sto-h4bt71 button.sto-153jtu,
#storybook-panel-root .sto-snh8f7 .sto-h4bt71 button.sto-153jtu:hover {
	/* Tool Containers *//* Tabs *//* Tab Wrapper *//* Tab *//* :active */
	background-color: #31313110;
}

.react-draggable.sto-5k55e4 {
	/* Draggable Window Sizer */
	background: transparent;
	background-color: transparent;
	background-image: none;
	box-shadow: none !important;
	border: none !important;
	margin: 0 !important;
	height: 2px;
}