@charset "utf-8";
/*
---------------------------------------------------------
combine/combine-1612ed2c.css
---------------------------------------------------------
00. /var/www/archibm/public/css/documentation.css
*/

/*
---------------------------------------------------------
00. /var/www/archibm/public/css/documentation.css
---------------------------------------------------------
*/


#document-docs 							                { background-color: #fff; }
#docs-wrapper 							                { padding: 0 10px;}
#docs-aside 							                { flex-shrink: 0; width: 220px; margin-right: 60px; position: sticky; top: 60px;}

#docs-breadcrumb						                { padding: 140px 10px 0 10px; }
#docs-menu-button                                       { display: none;}
#docs-menu-close                                        { display: none;}

#docs-menu ol                                           { --level: 0; }
#docs-menu ol ol                                        { --level: 1; }
#docs-menu ol ol ol                                     { --level: 2; }
#docs-menu ol ol ol ol                                  { --level: 3; }
#docs-menu ol ol ol ol ol                               { --level: 4; }
#docs-menu ol ol ol ol ol ol                            { --level: 5; }
#docs-menu ol .label                                    { padding-left: calc(var(--level) * 1em + 8px); border: 1px solid transparent; }
#docs-menu .hide-label > ol > li > .label               { padding-left: calc((var(--level) - 1) * 1em + 8px); }

#docs-menu ol ol 						                { display: none; }
#docs-menu .label.opened + ol 			                { /*display: block; (use js slideDown() instead)*/ }
#docs-menu .label 		 				                { cursor: pointer; padding: 8px; display:block; line-height: 1.2rem; }
#docs-menu .label .icon  				                { display: inline-block; width: 15px; margin-right: 8px; color: var(--theme-text-color); font-size: 13px;}
#docs-menu .label .arrow 				                { margin-left: 5px; color: var(--mid-text-color); font-size: .98em;}
#docs-menu .label.opened .arrow 		                { transform: rotate(180deg);}
#docs-menu .label:hover > .text,
#docs-menu li.active > .label > .text 	                { color: var(--theme-text-color);}
#docs-menu li.separator-top                             { border-top: 1px solid var(--light-border-color); padding-top: 12px !important; margin-top: 12px !important;}
#docs-menu li.separator-bottom                          { border-bottom: 1px solid var(--light-border-color); padding-bottom: 12px !important; margin-bottom: 12px !important;}
#docs-menu li.hide-label > .label                       { display: none;}
#docs-menu li.hide-label > .label + ol                  { display: block !important; height: auto !important; }

#docs-menu > ol > li.position-2 						{ margin: 5px 0;}
#docs-menu > ol > li.position-2 > .label 				{ display: block; border: 1px solid transparent; transition: all .4s;}
#docs-menu > ol > li.position-2 > .label:hover,
#docs-menu > ol > li.position-2 > .label.opened,
#docs-menu > ol > li.position-2.active > .label         { border: 1px solid var(--mid-border-color); border-radius: 4px; box-shadow: 2px 2px 4px rgba(0,63,64,.1); }
#docs-menu > ol > li.position-2 > .label.opened > .text,
#docs-menu > ol > li.position-2.active > .label > .text { color: var(--theme-text-color);}
#docs-menu > ol > li.position-2 > .label.opened + ol 	{ margin: 6px 0;  }
#docs-menu > ol > li.position-2 > .label > .text 		{ font-size: 1.025em; letter-spacing: .04em; color: var(--sharp-text-color);}
#docs-menu > ol > li.position-2 > .label > .text:hover 	{ color: var(--theme-text-color);}
#docs-menu > ol > li.position-2 + li.position-1::before { content: ''; display: block; width: 100%; border-top: 1px solid var(--light-border-color); margin: 12px 0;}
#docs-menu > ol > li.position-2 .icon                   { font-size: 14px;}

#docs-menu > ol > li.position-1,
#docs-menu > ol > li.position-1 li 						{ margin: 5px 0;}
#docs-menu li.position-1.active > .label,
#docs-menu li.position-1 .label:hover,
#docs-menu li.position-1 li.active > .label 		    { border: 1px solid var(--mid-border-color); border-radius: 4px; box-shadow: 2px 2px 4px rgba(0,63,64,.1); }

#docs-contents > h1                                     { margin-top: 0;}

#docs-article											{ flex-grow: 1; margin-top: 10px; position: relative;}
#docs-article .fr-view hr  								{ margin: 15px 0; border-top: 1px solid var(--light-border-color);}
#docs-article .fr-view img:not(.fr-image-icon),
#docs-article .fr-view iframe 						    { border-radius: 5px; border: 1px solid #fff; padding: 7px; box-shadow: 1px 1px 5px #7A73FF55;}
#docs-article .fr-view .image-clip 						{ display: inline-block; max-height: 600px; overflow: hidden; border-radius: 5px; border: 1px solid var(--light-border-color); padding: 7px; position: relative; cursor: pointer;}
#docs-article .fr-view .image-clip img 					{ border: none; border-radius: 0; padding: 0; display: block; pointer-events: none;}
#docs-article .fr-view .image-clip::after 				{ content: ''; position: absolute; left: 0; bottom:0; width: 100%; height: 100px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%); }
#docs-article .fr-view .image-clip.reveal 				{ max-height: none;}
#docs-article .fr-view .image-clip.reveal::after		{ display: none;}
#docs-article .fr-view .image-clip.reveal img 			{ pointer-events: inherit;}

#docs-article .fr-view .paragraph-column2 .col:nth-child(1) { width: 35%;}
#docs-article .fr-view .paragraph-column2 .col:nth-child(2) { width: 60%;}

#docs-table-of-contents 								{ position: sticky; top: 60px; right: 0; width: 80px; flex-shrink: 0; flex-grow: 0;}
#docs-table-of-contents ul 								{ position: absolute; left: 60px; top:10px; width: 200px; display: none; }
#docs-table-of-contents li 								{ margin-bottom: 15px; }
#docs-table-of-contents li.label                        { font-weight: 700; }
#docs-table-of-contents a 								{ font-size: .96em; color: #aaa; }
#docs-table-of-contents a:hover 						{ color: var(--sharp-text-color);}

/*
-----------------------------
For 1600px or less
-----------------------------
*/
@media screen and (max-width: 1600px) {
    #docs-breadcrumb { padding-top: 100px;}
    #docs-aside { margin-right: 40px;}
}

/*
-----------------------------
For 1440px or less
-----------------------------
*/
@media screen and (max-width: 1440px) {
    #docs-breadcrumb { padding-top: 80px;}
    #docs-aside { width: 200px; margin-right: 30px;}
    #docs-table-of-contents { display: none;}
}

/*
-----------------------------
For 1024px or less
-----------------------------
*/
@media screen and (max-width: 1024px) {

    #docs-breadcrumb { padding-top: 20px; margin-bottom: 10px;}
    #docs-breadcrumb .breadcrumbs { margin-bottom: 0;}
    #docs-menu-button { display: block; font-size: 16px; color: var(--theme-text-color);}
    #docs-menu-button i { margin-top: 4px;}
    #docs-menu-close  { margin: 0 0 20px 10px; display: inline-block; font-size: 16px; color: var(--theme-text-color);}

    #docs-aside { z-index: 1020; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100vh; margin: 0; transform: translateX(-100%); transition: transform .4s; }
    #docs-aside #docs-menu { position: relative; z-index: 1; width: 100%; max-width: 270px; height: 100%; overflow-y: auto; padding: 20px 20px 40px 20px;  background-color:#fff; }
    #docs-aside #docs-menu-mask { z-index: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,.86); backdrop-filter: blur(6px); opacity: 0; transition: opacity .8s .2s; }

    body.show-docs-menu #docs-aside { transform: translateX(0);}
    body.show-docs-menu #docs-aside #docs-menu-mask { opacity: 1;}
}