@import url(../../css/styles.css);

@font-face {
    font-family: 'Open Sans';
    src: local("OpenSans-Light"),url('../fonts/OpenSans-Light.ttf');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: local("OpenSans-LightItalic"), url('../fonts/OpenSans-LightItalic.ttf');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: local("OpenSans-Regular"), url('../fonts/OpenSans-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: local("OpenSans-Italic"), url('../fonts/OpenSans-Italic.ttf');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: local("OpenSans-Semibold"), url('../fonts/OpenSans-Semibold.ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: local("OpenSans-SemiboldItalic"), url('../fonts/OpenSans-SemiboldItalic.ttf');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: local("OpenSans-Bold"), url('../fonts/OpenSans-Bold.ttf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: local("OpenSans-BoldItalic"), url('../fonts/OpenSans-BoldItalic.ttf');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: local("OpenSans-ExtraBold"), url('../fonts/OpenSans-ExtraBold.ttf');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: local("OpenSans-ExtraBoldItalic"), url('../fonts/OpenSans-ExtraBoldItalic.ttf');
    font-weight: 800;
    font-style: italic;
}

:root,
[data-bs-theme=light] {
    /* Typography */
    --bs-font-sans-serif: "Open Sans", Helvetica, Arial, sans-serif;
    --fw-medium: 500;
    --fw-normal: 400;
    --font-style-italic: italic;

    /* Primary colors */
    --color-primary: #EC7327;
    --color-search-border: #F29569;
    --color-nav-default-fill: #F0C3AF;
    --color-border-focus: #605356;
    --color-white: #ffffff;
    --color-black: #000000;

    /* Spacing, radious, weights */
    --border-color-default: #EDEDED;
    --border-radius-default: 5px;
    --border-weight-heavy: 2px;
    --border-weight-light: 1px;

    /* Icons */
    --icon-search: url('../icons/search.png');
    --icon-toggle-close: url('../icons/sidebarClose.png');
    --icon-toggle-open: url('../icons/sidebarOpen.png');
    --icon-home: url('../icons/home.png');
    --icon-print: url('../icons/print.png');
    --icon-arrow-left: url('../icons/leftArrow.png');
    --icon-arrow-right: url('../icons/rightArrow.png');
    --icon-arrow-top: url('../icons/upArrow.png');
    --icon-arrow-down: url('../icons/downArrow.png');
    --icon-check: url('../icons/checkIcon.png');

}

/* general settings */
body{
    color: var(--color-black);
}
.enum-container > p.enum-title,
.instruction-container > p.enum-title,
.smc-content-ct .result,
.link, .link:active, .link:visited,
.table>:not(caption)>*>* {

    color: var(--color-black);

}
.arrow.arrow-header.home:focus, .arrow.arrow-header.smc-print:focus,
.arrow.arrow-header.prev:focus, .arrow.arrow-header.up:focus,
.arrow.arrow-header.next:focus, .x-splitter-vertical:focus,
.x-tab-default .x-tab-close-btn:focus, .x-splitter-vertical:focus,
.tree-navigation-list-item:focus {
    outline: var(--color-border-focus) solid 2px;
}
.x-tree-icon-parent.smc-node-book {
	background-image: url(../images/book.svg);
	background-size: contain;
}
.x-tree-icon-parent-expanded.smc-node-book {
	background-image: url(../images/book_open.svg) !important;
}
.x-panel-header-title-default,
.x-panel-body-default,
.x-tab-inner-default,
.smc-sidebar .x-tree-node-text,
.smc-main-ct > .x-panel-header .fuzzyComplete,
.smc-main-ct > .x-panel-header .fuzzyResults {
    font-family: var(--bs-font-sans-serif);
}
.fuzzyResults {
	clear: both;
	display: none;
	background-color: var(--color-white);
	border: 1px solid var(--border-color-default);
	position: absolute;
}
.fuzzyComplete, .fuzzyResults {
	font-size: 12px;
	color: var(--color-black);
	width: 300px;
}
.fuzzyResults .__autoitem {
	padding: 6px !important;
}
.fuzzyResults .__autoitem:not(.selected):hover,
.fuzzyResults .selected{
	background-color: var(--color-nav-default-fill) !important;
	color: var(--color-black);
}
.x-panel-body-default {
    border-color: var(--border-color-default);
}
.maintabbar.x-docked-top {
    border-style: solid;
    border-color: var(--border-color-default);
    border-width: 0;
    border-bottom-width: 1px !important;
}

.x-tab.x-tab-active.x-tab-default{
    background-color: var(--color-primary);
    border-radius: var(--border-radius-default);
    border-color: var(--border-color-default);
}
.x-tab-default-top{
    border-radius: var(--border-radius-default);
    border-width: 1px;
    border-color: var(--border-color-default);
}
.x-tab.x-tab-active.x-tab-default .x-tab-inner.x-tab-inner-default,
.x-tab.x-tab-over.x-tab-default .x-tab-inner.x-tab-inner-default {
    color: var(--color-white);
}
.link, .link:active, .link:visited {
    font-weight: 600;
    text-decoration: underline;
}
.link:hover{
    color: var(--color-primary);
}
.x-tab-inner-default {
    font-weight: 600 !important;
}

li.step.result::before{
    content: ' ';
    background-size: contain;
    background-repeat: no-repeat;
    background-image: var(--icon-check);
    width: 11px;
    height: 19px;
    background-position: center;
    position: absolute;
}

/* Header */
.website-custom-logo .smc-main-ct > div.x-panel-header,
.smc-main-ct > .x-panel-header{
    background: var(--color-primary) !important;
}
.smc-main-ct > .x-panel-header .x-title-text{
    line-height: 1.2;
    font-weight: normal;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding: 0 10px 0 10px;
    color: var(--color-white);
}
.banner-header-section{
    min-width: 0;
}
.logo-container{position: relative;}

.logo-container.default-logo{
    background-image: url(../images/logo.svg) !important;
    background-repeat: no-repeat;
    background-position: center;
    width: 150px;
    height: 60px;
    background-size: contain;
    margin-right: 10px;
}

.content-search{
    width: 220px;
    position: fixed;
    top: 157px;
    right: 10px;
}

/* sidebar */
.smc-sidebar .x-tool-expand-left {
    background-image: var(--icon-toggle-close);
    background-size: cover;
}
.smc-main-ct .x-tool-expand-right {
    background-image: var(--icon-toggle-open);
    background-size: cover;
}
.x-splitter-vertical{
    background-color: var(--border-color-default);
}
.x-grid-row{
    border: 1px solid #FFF;
}
.x-grid-item.x-grid-item-over > tbody > tr.x-grid-row,
.tree-navigation-link:hover,
.x-grid-item.x-grid-item-selected > tbody > tr.x-grid-row,
.x-boundlist-item-over, .tree-navigation-list-item[data-active = "true"]{
    background-color: var(--color-nav-default-fill);
    border: 1px solid var(--border-color-default);
	color: var(--color-black);
}
.x-grid-item.x-grid-item-over > tbody > tr.x-grid-row {
    color: var(--color-black);
}
.x-tab-default-top{
    background-color: transparent;
}
/* search */
#smc-search-field,
#smc-search-field:focus,
#smc-search-field:hover{
    border-color:#F29569;
    border-radius: var(--border-radius-default);
    border-width: 2px;
    font-style: italic;
}
#smc-search-field::placeholder{
    color: #000000;
    font-style: italic;
}
.smc-panel-search {
    background-image: var(--icon-search);
}
.smc-panel-search:focus {
    outline: var(--color-border-focus) solid 2px;
}
/* main tabbar*/
.x-tab-bar-default{
    background-color: var(--color-white);
}
.maintabbar{
    padding-right: 230px;
    background-color: var(--color-white);
}
.maintabbar.x-tab-bar-default-top .x-box-scroller-tab-bar-default{
    right: 230px;
}
.x-tab.x-tab-default.x-tab-focus{
    border-color: var(--border-color-default);
}


/* nav arrows */
.arrows-nav-header{
    top: 5px;
    padding: 0;
    left: auto;
    width: 182px;
    right: 32px;
    position: fixed;
    display: grid;
    grid-template-columns: repeat(5, 20px);
    gap: 1.35em;
}
.arrows-nav-header .arrow{
    width: 20px;
    height: 20px;
    margin-left: 0;
}
.x-panel-body .x-panel-body-default .x-panel-body-default {
    scrollbar-gutter: stable;
}
.smc-content-ct .header-nav.arrows-nav-header .arrow .fa:before{
    content: '';
    background-position: center;
    background-size: contain;
    width: 20px;
    height: 20px;
    display: inline-block;
}
.smc-content-ct .header-nav.arrows-nav-header .arrow.home .fa:before{
    background-image: var(--icon-home);
}
.smc-content-ct .header-nav.arrows-nav-header .arrow.smc-print .fa:before{
    background-image: var(--icon-print);
}
.smc-content-ct .header-nav.arrows-nav-header .arrow.prev .fa:before{
    background-image: var(--icon-arrow-left);
}
.smc-content-ct .header-nav.arrows-nav-header .arrow.up .fa:before{
    background-image: var(--icon-arrow-top);
}
.smc-content-ct .header-nav.arrows-nav-header .arrow.next .fa:before{
    background-image: var(--icon-arrow-right);
}

/* content */

.content .x-tab-default-top{
    border-width: 1px;
}
.content .x-tab.x-tab-active.x-tab-default{
    border-color: var(--border-color-default);
}
.content .x-tab-default{
    background-color: var(--color-nav-default-fill);
}

/* media queries*/
@media (max-width: 600px) {
    .maintabbar{
        padding-right: 20px;
    }
}
@media only screen and (max-width: 800px) {
    body .smc-main-ct > .x-panel-header .x-title-text {
        padding-left: initial;
    }
}
@media only screen and (max-width: 575px) {
    body .smc-main-ct > .x-panel-header .x-title-text {
        padding-left: 45px;
    }
}
/* Focus style */
.smc-sidebar .x-tool-focus, .smc-main-ct .x-tool-focus, #smc-search-field:focus, *:focus{
    outline: var(--color-border-focus) solid 2px!important;
    outline-offset: -2px;
}
.responsiveHotspot .hotspot a:focus{
	outline: none !important;
}
#smc-search-field:focus{
    outline-offset: 0;
}
.navbar-brand:focus {
    outline: none;
}

body .navbar-brand > img {
    max-width: initial !important;
}

.x-panel-body .x-panel-body-default .x-panel-body-default:focus{
    outline: var(--color-border-focus) solid 2px!important;
    border: 2px solid !important;
    outline: none;
}
.smc-toolbar input:focus {
    outline-offset: -1px;
}