/* 
*********************************************************************************************
First correct styles inherited from the albums
*********************************************************************************************
*/

html, body { overflow-x: hidden; }

.v4c568cc6c76c249c41b0
{
  border-style:none;
  border-width: 0;
  margin-right:0.3em;
  width: 50px;
  height: auto;
  @media screen and (max-height:500px){width: 30px; } 
  @media screen and (max-height:700px){width: 40px; } 
  @media screen and (max-height:999px){width: 60px; } 
  @media screen and (min-height:1000px){width: 80px; }   
  /*
  max-width: fit-content;
  max-height: fit-content;
  object-fit: contain;
  */
}

/*a,#toctitle{color:#000000;}*/
h1,h2,h3,h4,h5
{
  text-align:left;
  font-weight:bold;
  text-shadow: none;
}

h2{font-size:1.9em}
h3{font-size:1.6em}
h4{font-size:1.3em}

/* Visibility of header and toolbar are hidden when splashscreen is used because of transitional effect
   But here they must be immediately visible, because there is in this case also transitional effect.
 */
/*#header-id, #toolbar-id { display:block; }*/
#toolbar-id { display:none; }
#header-id { display:block; }
 #context-nav-container, #page-content-id, #toc { visibility: hidden;}
 
/*#context-nav-container, #page-content-id { visibility: hidden;}*/

#header-id
{
  padding: 3px;
  max-height: auto;
  height: auto;
}

.vcf0ebc833b8a56aea289 a {text-decoration:none; }

/*
table.tableblock>.title 
 {
  text-align: center;
  text-shadow: none;
 }
*/

.title 
{
  /*margin:auto;*/
  text-align: center;
  text-shadow: none;
  width:100%;
}

/* Adapt the title aspect for both the manual documentation pages and the galery 
*/
/*
.admonitionblock td.content>.title, .audioblock>.title, .exampleblock>.title, .imageblock>.title, .listingblock>.title, .literalblock>.title, .stemblock>.title, .openblock>.title, .paragraph>.title, .quoteblock>.title, table.tableblock>.title, .verseblock>.title, .videoblock>.title, .dlist>.title, .olist>.title, .ulist>.title, .qlist>.title, .hdlist>.title {
    text-rendering: optimizeLegibility;
    text-align: left;
    font-family: "Noto Serif", "DejaVu Serif", serif;
    font-size: 1rem;
    font-style: italic;
}
 In ascii default, there are more global settings:
 .subheader, .admonitionblock td.content>.title, .audioblock>.title, .exampleblock>.title, .imageblock>.title, .listingblock>.title, .literalblock>.title, .stemblock>.title, .openblock>.title, .paragraph>.title, .quoteblock>.title, table.tableblock>.title, .verseblock>.title, .videoblock>.title, .dlist>.title, .olist>.title, .ulist>.title, .qlist>.title, .hdlist>.title {
    line-height: 1.45;
    color: #7a2518;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: .25em;
}
*/
.listingblock .title, .imageblock .title, .sidebarblock .title, .videoblock .title  {
  width:100%;
  /*zoom : 0.7;*/
  margin-bottom:0em;
  padding-bottom:0em;
    color: white;  
}

/* Hide the caption of any image displayed inside a sidebar block, 
   because they are used for the examples and the same title is already used 
  */
.sidebarblock .imageblock .title 
{
  display:none;
}

.sidebarblock, .image, .image img
{
  background: transparent;
}
.sidebarblock > .content:has(.imageblock)  {
   background-color : transparent;  
}
/*
.image, .image img 
{
  margin: 0;
  padding: 0;
}
  */
/*.imageblock:not(.imagetitle) .image img {
  box-shadow: none;
}*/

/* Adapt aspects of the albums used together with the doc pages
 - bottom margin of the image block to stick together title image and image
 */
.imageblock
{
  margin-bottom:0em;
}

.imagetitle
{
  /* because in dark theme : .sidebarblock > .content:has(.imageblock), a.image { .. black..
  */
    background-color: black; 
}

.title-enter-forms
{
  background-color: blue;
  font-size: 2rem;
  color:white;
  text-align: center;
  padding: 0.2rem 1rem;

}

/* fit-content => %autowidth */
table.tableblock>caption.title
{
  text-align: center;
  text-shadow: none;
  width:100%;
}


/*
  Enable wrapping of  table titles 
  */
table.tableblock.fit-content>caption.title , table.tableblock>caption.title {
  width:100%;
/*
  @media screen and (hover: hover) and (min-width:1000px)
  {     
    white-space: pre;
    word-wrap: keep-all;;  
  }

  @media screen and (max-width:1000px)
  { 
  */
    white-space: pre-wrap;
    word-break: normal;
  /*} 
, pre>code.language-yaml   
  */
}

/* This is to handle the command usage e.g. table 'format of the data source location'
  - on small screen, we enable wrapping while preserving spaces (pre-wrap)
    but on large screen we force to take full width
  - we enable to break anywhere at the end of the line
*/
/*pre {*/
.code-wrap-ctrl pre {
  @media screen and (max-width:1000px)
  { 
    white-space: pre-wrap;
    word-break: break-all;
  }
  @media screen and (hover: hover) and (min-width:1000px)
  {     
    white-space: pre;
    word-break: break-all;
  }  
}


/* This is to handle large portion of code lines e.g. YAML example
  - we enable wrapping while preserving spaces (pre-wrap)
  - we enable to break anywhere at the end of the line
*/
code {
  margin:0;
  padding:0;

  @media screen and (max-width:1000px)
  { 
    white-space: pre-wrap;
    word-break: break-all;
  }
  @media screen and (hover: hover) and (min-width:1000px)
  {     
    white-space: pre-wrap;
    word-break: break-all;
  }
}


/*pre>code {
  white-space: pre;
}*/

/*

.code-wrap-ctrl
{
  white-space:pre;
  @media screen and (hover: hover) or (min-width:1000px)
  {     
    white-space:pre;
    word-wrap:normal;  
  }

  @media screen and (hover: none) or (max-width:1000px)
  { 
    white-space:normal;
    word-wrap:normal;      
  } 
}
    */ 

/*, table .title */
/*
.imageblock .title, .sidebarblock .title, .videoblock .title, caption.title  {
  margin:auto;
  text-shadow: none;
  width:auto;
  text-align: center;
}
 */
 
 
#headertitle 
{
  width: auto;
  text-shadow: none;
  text-align: left;
  font-size: clamp(0.8em,1.4em,1.6em);
  padding-bottom: 1em;
  text-shadow: 2pt 2pt 2pt rgb(75, 139, 212);
  text-decoration:none;
  /*font-weight: bold;
  font-size:2em;*/
}

#headersubtitle 
{
  width: auto;
  text-align: left;
  font-size: clamp(0.7em,0.9em,1.1em);
}

td:not(:has(td)):has(span.topic) {
  font-family: sans-serif;
  font-size:1em;
  background-color: grey;
  color:white;

  font-weight: bold;
  text-shadow: 0.5em 0.5em 0.5em rgba(0,0,0.5);
}

.header > ul > li {
  display: inline-block;
  position:relative;
  vertical-align:top;
  padding-left: 5px;
}

p {
  font-size: 1.1em;
  margin-bottom: 0.9em;
}
pre {
  font-size:0.9em;
  line-height:1.1;
}

.literalblock pre, .listingblock>.content>pre {
  font-size: 0.9em;
  line-height:1.2;
}

/* reduce size of verbatim text, but the following does not work
listingblock>content, code,kbd,pre,samp{font-family:monospace;font-size:0.3em;line-height:1;}

pre {
  font-size:0.6em;
  line-height:1;
}
td > div > div > {font-size:0.6em;}
td > p {font-size:0.6em;}
table{ width:70%;}
table{ margin-left:2em;}

*/

table, tableblock, td, td.content,td.hdlist1{font-size:0.9rem;}
table { margin: 0px auto; }

.img-corp-icon-container {
  display: flex;
  flex-direction:row;  
  align-items: center;
  flex-wrap: wrap;  
  justify-content: space-between;  
}

.img-corp-icon {
  width : 1.5rem;
}

.img-corp-icon-block {
  margin-left: 0.5em;
  margin-right: 0.5em;
  display: inline-block;
  /*margin-bottom: auto;*/
}

#footer {
  position:relative;

  max-width:none;
  background-color:rgba(0,0,0,.8);
  /*background: rgb(136, 19, 19);*/
  padding:0.5em;

  margin-top: auto;
  /*bottom:100%;*/
  display:block;
}

#page-content-id
{
  margin:0;
  padding: 0;
  position:relative;
  display:block;
  width:100%;
  height:100%;
  /*overflow-y:hidden;*/

   color: white; background: var(--var-dark-theme-color) ; 
}

#main {
  visibility: hidden;

  overflow-y:hidden;
 /* overflow-x:auto;*/
}

main {
  width: 90vw;
  height: auto;
  position:absolute;
  top:0;
  /* Is set hidden when implementing the slide-in animation */
  @media screen and (orientation: portrait) {
    margin:0.3em;
  }
  overflow:hidden;
  /*
  visibility: hidden;
  */
  /*z-index:auto;*/
  /*left: 233px;*/
}

#toccontainer, #TOC-wrapper-id
{
   color: white; background: var(--var-dark-theme-color); 
}
#toctitle
{
   color: white; 
}

#toc {
  margin-top:0px;
  padding-top:0px;
  /*min-width:max-content;*/

  width:100%;
  min-width:100%;
  
}

#toc li 
{
  zoom: 0.9;
}
/*#id_foldabletoc  {
  padding-left: 0;
  padding-inline-start:2em;  
}
#id_foldabletoc > li {
  padding-left: 0;
  margin-left: 0px;

}
  */

/* input[type='submit'], */ a:hover,a:focus{background-color: lightgray; border-radius: 5px;}

/* This is only affects the PC layout, not the mobile one */
.css-aside-index 
{
    position:fixed;
    z-index:3;
    max-width: 25em;
    min-width: 25em;
    /*min-width: max-content;*/

    /*
    these attributes are computed dynamically in bookmake_index.js
    height: 90vh;
    max-height: 100vh;
    */
    padding: 0em 0.8em;
    /*float: left;*/
    /*box-shadow: inset 5px 0 5px -5px #29627e;
    font-style: italic;*/

    /*background: white ;
    color: #29627e;*/
   
    overflow-y: scroll;
    overflow-x:scroll;
    overflow-wrap: normal;

    /*
    border-style: none;
    border-right-style:solid;
    border-right-width: 2px;
    border-right-color: darkgray;
    */

    
    border: 1px solid #ccc;
    border-top: none;

    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-top-right-radius: 10px;
    -moz-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
  /*
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    */
    box-shadow: 1px 1px 10px #000;
    -moz-box-shadow: 1px 1px 10px #000;
    -webkit-box-shadow: 1px 1px 10px #000;

}

/*html, body { width: 100%; height: 100%; overflow:scroll; }*/
/*html, body{ min-height: 100vh;}
#page-content-id { min-height: 100vh; margin-bottom: -200px;}*/

.header-nav-buttons-container {
  margin: 0.1em 0.3em;
  display: flex;
  flex-direction:row;  
  flex-wrap: nowrap;  
  justify-content:start;
  column-gap: 0.3em;
  /*align-items: top;  */
}
.dropbtn
{
  width:max-content;
}

#flex-h-dropdownmenu-id
{
  pointer-events: auto;
}

/* 
  *********************************************
  Overriding dialog box configs
 */

 /* Ensure a line is fully displayed without any break */
.dialogbox-rowcell {
  @media screen and (min-width:1400px){ 
    width:max-content;    
  }   
  @media screen and (max-width:1399px){ 
    width:auto;    
  }
}

.dialogbox {
  margin: 0.5em auto;
  padding: 0px;
  border:0px;

  @media screen and (min-width:1400px){ 
    font-size:1.4em;
  }   
  overflow-y:scroll;  
}

.v535657f8dbe7ae1a7ba1 {

  padding-bottom: 0.4em;
  margin-bottom: 0.3em;

  font-size: 1.2em;
  font-weight: bold;
  
}
.v202ef480b63bac6a4cc6 {
  content: url("./images/icons/cancel-close-svgrepo-com-updated.svg");
}

.dialogbox a, .dialogbox a:hover, .dialogbox a:focus {
  background-color: transparent;
  background: transparent;
}

/*
::backdrop
{
  opacity: 0.75;

  background-image:

  radial-gradient(
    circle,
    white 0 5vw,
    transparent 5vw 20vw,
    white 20vw 22.5vw,
    #eeeeee 22.5vw
  ),
  conic-gradient(
    #272b66 0 50grad,
    #2d559f 50grad 100grad,
    #9ac147 100grad 150grad,
    #639b47 150grad 200grad,
    #e1e23b 200grad 250grad,
    #f7941e 250grad 300grad,
    #662a6c 300grad 350grad,
    #9a1d34 350grad 400grad,
    #43a1cd 100grad 150grad,
    #ba3e2e
  );
}
*/

/* 
  *********************************************
  Context navigation menus
 */
#context-nav-container {
  position:sticky;
  width:100%;
  z-index:3;
   color: white; background: var(--var-dark-theme-color) ; 

  border-bottom: 2px solid black;

  display: flex;
  @media screen and (orientation: portrait) {
    flex-direction:column;  
  }
  @media screen and (orientation: landscape) {
    flex-direction:row;  
  }
  flex-wrap: nowrap;  
  justify-content: flex-start;  
  align-content:center;
  margin:0;
  padding:0.5em;
  user-select: none;
}

#navbar-left-padding-id 
{
  flex: 0 0 25em; /* no grow (dflt: no) no shrink (dflt: yes), flex basis (dflt: auto) */
  align-self: stretch;
  /*
  flex-grow: 0;     
  flex-shrink: 0; 
  flex-basis: 25em;
  */ 
}

#navbar-pagetopic-id
{
  font-size:1.6em;
/*  font-size: calc( var(--base-resp-font-size) * 1.9);*/
  font-weight: bold;

  /* Is set hidden when implementing the slide-in animation */
  visibility: hidden;
  white-space: pre;
  word-break: keep-all;
   background-color: red;; text-shadow: 2pt 2pt 2pt rgb(75, 139, 212); 
  padding-left:0.2em;
  padding-right:0.2em;
  transform: perspective(15cm) rotate3d(1,0,0,45deg);
}
/*
#navbar-pagetopic-id::before,#navbar-pagetopic-id::after
{
  display: inline-block;
  color: #000;
  content: " ";
  font-size: 80%;
  font-weight: bold;
  padding: 0 3px;
}
  */

.navbar-item {

  display: inline-block;

  margin: 6px 0 6px 0;

  font-size: calc( var(--base-resp-font-size) * 0.8);
  font-weight: bold;

}

.navbar-item-highlight {
  outline-width:3px;
  outline-offset: 2px;
  outline-style:solid;
  border-radius: 3px;  
   outline-color: white ; 

  /*outline: 3px solid white;*/
  /*outline: 3px solid rgb(170 50 220 / 0.8);*/
}

.navbar ol {
  list-style-type: none;
  padding-left: 0;
}

.navbar-item a {
  text-decoration: none;
}

.navbar-item a::after, .navbar-item a::before {
  display: inline-block;
  color: #000;
  content: " ";
  font-size: 80%;
  font-weight: bold;
  padding: 0 3px;
}

.css-navbar-item-icon
{
  margin-bottom: auto;
  margin-top: -10px;
}
/* TRIAL
.css-slideout-wrap {
  display: inline-block;
  width:auto;
  text-wrap: nowrap;
}*/
  /*
  overflow: hidden;
  width: 2.5em;
  */

/*
.css-verttext {
  display: inline-block;
  transform:  translate(0%,100%) rotate(-60deg) ;
  transform-origin: left top 0;
  width:fit-content;
}
.css-verttext:after {
  content: "";
  display: block;
  margin: -2em 0 90% ;
}
*/

.roundimageborderhighlight .image:hover {
   opacity: 1; filter: brightness(100%);
    /*backdrop-filter: brightness(150%);*/
  }

.roundimageborderhighlight .image img
{
  border-radius: 16px;
}

.roundimageborderhighlight .image img:hover {
  outline-width:3px;
  outline-offset: 4px;
  outline-style:solid;
  border-radius: 16px;  
   outline-color: violet ; 
}

/* Do not show social bar items */
#share-image-fa-menu-bar, #metadata-floating-menu-bar, #information-floating-menu-bar
{
  display: none;
}

/* 
  *********************************************
  Logos
 */
 .logopaypal  img
 {
  height:7em;
 }

 .logopatreon img
 {
  height:7em;
  background-color: rgb(211, 240, 237);
  /*margin: 3em;*/
 }
/*
 .css-flipbook, .css-flipbook-item, .dialogbox-rowcell:has(.css-flipbook)
 {
  align-self: top;
 }
*/

.css-wish-form-group
{
  display: flex;
  flex-direction: row;
  align-items: start;
  flex-wrap: wrap;
  zoom:0.75;
}
.css-wish-form-group > label
{
  flex-grow: 10;
  flex-basis: 100%;
}

.css-wish-form-group-fieldset-row-shrink
{
  flex-shrink: 1;
  /*display: inline-block;*/
  min-width:100%;
}

.css-wish-form-group-all-album-photos
{
  display: flex;
  flex-direction: row;
  align-content: start;
  justify-content: start;
  flex-wrap: wrap;
  min-width:100%;
  min-height: 200px;
  background-color: white;
}

.css-wish-form-group-all-album-photos > label
{
  flex-shrink: 1;
  flex-basis: 100%;
  background-color: green;
  text-align: center;
}
/*css-image-file-selector-label*/

.css-wish-form-input
{
  display: inline-block;
  /*width: min-content;*/
}

.css-wish-form-multi-input {
  flex-shrink: 1;
  display: inline-block;
  width: 100%;
}

.css-wish-form-cover
{
  display: inline-block;
  min-width: 33.3%;
  max-width: 33.3%;
  width: 33.3%;
  aspect-ratio: 210 / 297;
  background-color: beige;
  object-fit: cover;
}

.css-wish-form-photo
{
  display: inline-block;
  min-width: 105px;
  min-height: 60px;
  width: 105px;
  height: auto;
  background-color: beige;
  object-fit: cover;
}

.css-wish-form-photo:before
{
  margin-left: auto;
  margin-right:0;
  content: " ";
}

.css-wish-photo-of-album
{
  flex-shrink: 1;
  display: inline-block;
  /*min-width: 105px;*/
  max-height: 5vw;
  /*width: 100%;
  height: auto;*/
  background-color: beige;
  /*object-fit: cover;*/
}

.wish-form-title
{
  font-size:2em;
  font-weight: bold;
  text-align: center;
  margin-bottom: -0.8em;
  display:none;
}

/*
 Specific config of the largephotoprints web page
 Display the framed photo prints prior to the photo drop zone
 */

 .css-wish-form-group-all-cover-photos-A4, .css-wish-form-group-all-cover-photos-A3
{
  display: flex;
  flex-direction: row;
  align-content: start;
  justify-content: start;
  flex-wrap: wrap;
  min-width:100%;
  aspect-ratio: 630 / 297;
  cursor: pointer;
  background-color: white;
  background-origin: border-box;
  background-repeat: repeat;
  background-size: 33.3%;
}
.css-wish-form-group-all-cover-photos-A4
{
  background-image: url('./images/icons/A4_format.svg');
}
.css-wish-form-group-all-cover-photos-A3
{
  background-image: url('./images/icons/A3_format.svg');
}

.css-wish-form-welcome
{
  font-size: 2em;
  font-family:"FontAwesome";
}

.css-wish-form-info
{
  text-align: center;
}

/*
#radio-field-set_1 legend, #radio-field-set_2 legend
{
  font-size:1.8em;
  text-align: center;
}
  */

#largephotoprints-form-id #radio-field-set_1:before
{
  content:url('products/images/bank/original/static/A4_print.png');
  display:block;
  width: 200px;
}

#largephotoprints-form-id #radio-field-set_2:before
{
  content:url('products/images/bank/original/static/A3_print.png');
  display:block;
  width: 200px;
}

/*
 Specific config of the largephotoprintssuccess web page
 */

#client-address
{
  width:100%;
}

#client-address .dialogbox-rowcell 
{
  min-width:100%;
  width:100%;
}

#client-address .css-field-set-flex-container , 
#digitalphotobook-progress .css-field-set-flex-container 
{
  flex-wrap: nowrap;
}

#digitalphotobook-progress .css-field-set-flex-container:has(input[type="email"]) label, 
#digitalphotobook-progress .css-field-set-flex-container:has(progress) label,
/*#digitalphotobook-progress .css-field-set-flex-container:has(iframe) label,*/
#digitalphotobook-progress .css-field-set-flex-container:has(textarea) label,
#digitalphotobook-progress .css-field-set-flex-container:has(input[type="text"]) label
{
  min-width: 12em;
  width: auto;
  flex-shrink: 0;
  flex-grow:0;
}

#digitalphotobook-progress
{
  font-size:1em;
}

#client-address .css-field-set-flex-container:has(input[type="email"]) label, 
#client-address .css-field-set-flex-container:has(input[type="text"]) label
{
  min-width: 10em;
  width: auto;
  flex-shrink: 0;
  flex-grow:0;
}


*:focus {
  outline: 1px dotted;
  outline-offset : -2px;
}


/* 
  **********************************************************************

  Checkout window related buttons

  **********************************************************************

 */

.css-dpb-checkout-download-btn
{
  height:1.5rem; 
  aspect-ratio: 1; 
  margin-right:0.5em; 
  background-color: transparent; 
  color: white; 
  background: url('./images/icons/download-minimalistic-svgrepo-com.svg'); 
  background-repeat: no-repeat; 
  background-size: contain;
}
.css-dpb-checkout-discard-btn
{
  height:1.5rem; aspect-ratio: 1; 
  margin-right:0.5em; 
  background-color: transparent; 
  color: white; 
  background: url('./images/icons/full-trash-svgrepo-com.svg'); 
  background-repeat: no-repeat; 
  background-size: contain;  
}
.css-dpb-checkout-nextpdf-btn
{
  height:1.5rem; aspect-ratio: 2; 
  margin-right:0.5em; 
  background-color: transparent; 
  color: white; 
  background-image: url('./images/icons/next-to-pdf.svg');
  background-repeat: no-repeat; 
  background-size: contain;
}


/* 
  **********************************************************************

  Styles potentially common to all page

  **********************************************************************

 */

 .css-page-introduction
 {
  font-size: 0.9em;
  margin: 0.em auto;
  text-align: center;

  line-height:1.6;
  margin-bottom:1.25em;
  text-rendering:optimizeLegibility  
 }

 .css-page-main-title
 {
  margin-bottom: 0.5em; 
  font-family:"FontAwesome";
  text-align: center;
  font-size: 2em;
 }

 .css-page-datasheet-title
 {
  font-size: 2em; 
  text-align: center;
  margin: 1em auto; 
  border: 2px solid grey; 
  border-radius: 5px;
  width:100%;
 }

 .css-page-video
 {
  margin : 0px auto;
  text-align: center;
  width : 50%;
 }