#olefa_template_holder > .oc-ui-collaborationmenu.webbook {
  border-bottom: var(--md-border-divider);
}
div#webbook {
  background-color: var(--mdc-theme-surface);
  border: var(--md-border-divider);
  margin: 20px auto;
  max-width: 980px;
  min-width: 550px;
  width: 100%;
}

div#workplace {
  display: flex;
  background-color: #fff;
  height: 510px;
}

div#book {
  margin: auto;
  padding: 5px 10px;
  position: relative;
}

div#pages {
  background-image: url('/osr/webbook/styles/SimplyRed/images/background.jpg');
  display: flex;
  width: 100%;
  height: 100%;
}

div#left_page, div#right_page {
  height: 100%;
  outline: 1px solid black;
  overflow: auto;
  position: relative;
  width: 50%;
}


div#left_page form p, div#right_page form p {
  padding: 0;
  margin: 5px;
}

table.webbook_print {
  border-collapse: collapse;
}

div#book.portrait {
  height: 500px;
}

div#book.portrait.cover {
  width: 400px;
}

div.book.portrait {
  height: 350px;
  width: 300px;
}

div#timemachine div#book.portrait {
  width: 800px;
}

div#book.portrait div#left_page, div#book.portrait div#right_page, table.webbook_print.portrait {
  height: 500px;
  width: 400px;
}

div#book.square {
  height: 425px;
}

div#timemachine div#book.square {
  width: 800px;
}

div#book.square.cover {
  width: 425px;
}

div.book.square {
  height: 350px;
  width: 350px;
}

div#book.square div#left_page, div#book.square div#right_page, table.webbook_print.square {
  height: 425px;
  width: 425px;
}

div#book.landscape {
  height: 283px;
}

div.book.landscape {
  height: 283px;
  width: 425px;
}

div#book.landscape.cover {
  width: 566px;
}

div#timemachine div#book.landscape {
  width: 850px;
}

div#book.landscape div#left_page, div#book.landscape div#right_page, table.webbook_print.landscape {
  height: 283px;
  width: 425px;
}

div#left_menu_wrapper {
  height: 100%;
  width: 48px;
  padding: 0 2px;
  border-right: 1px solid #b5b5b5;
  background-color: #eee;
}

div#right_menu_wrapper {
  height: 100%;
  width: 48px;
  padding: 0 2px;
  border-left: 1px solid #b5b5b5;
  background-color: #eee;
}

div#bottom_toolbar {
  background-color:#E3E3E3;
  border-top:1px solid #b5b5b5;
  height:60px;
  text-align:center;
}

div#bottom_toolbar.sort-mode {
  height: auto;
  text-align: right;
  padding: 5px;
}

div#cover_side_ribbon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 20%;
}

#cover_title {
  position: absolute;
  left: 22%;
  text-align: center;
  top: 5%;
  width: 66%;
}

span.cover_heading {
  font-size: medium;
  font-weight: bold;
}

div#bottom_toolbar>ul, div#restore_navigation>ul {
  margin: 0;
  padding: 5px;
  list-style-type: none;
}

div#bottom_toolbar li, div#restore_navigation li {
  margin: 0 5px;
}

ul#restore_buttons {
  padding: 0;
}

ul#restore_buttons > li  {
  display: flex;
}

li.navileft {
  float: left;
}

li.naviright {
  float: right;
}
ul.links li img.active, ul.links li:hover img{
  background: #EEEEEE;
  padding: 3px;
  margin: -3px;
}

.navileft img.disabled {
  opacity: 0.5;
}
div#bottom_toolbar ul#navigation, div#restore_navigation ul#navigation {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

div#left_page_style {
  width: 48px;
  height: 48px;
  position: absolute;
  left: 0;
  top: 0;
  background: url('/osr/icons/flat/bw/32/layout-colored.png') no-repeat 8px 8px;
  background-color: #E3E3E3;
  border-right: 1px solid;
  border-bottom: 1px solid;
  cursor: pointer;
  z-index: 10;
  display: none;
}

div#right_page_style {
  width: 48px;
  height: 48px;
  position: absolute;
  right: 0;
  top: 0;
  background: url('/osr/icons/flat/bw/32/layout-colored.png') no-repeat 8px 8px;
  background-color: #E3E3E3;
  border-left: 1px solid;
  border-bottom: 1px solid;
  cursor: pointer;
  z-index: 10;
  display: none;
}

ul.links a, ul.links a:hover {
  text-decoration: none;
}
a>img {
  border: none;
}

ul#right_menu {
  margin: 10px 0;
  padding: 0;
  list-style-type: none;
  display: none;
}

ul#right_menu>li {
  margin: 10px 0 30px 0;
  cursor: pointer;
}

ul#left_menu {
  padding: 0;
  margin: 10px 0;
  list-style-type: none;
  display: none;
}

ul#left_menu>li {
  margin: 10px 0 30px 0;
  cursor: pointer;
  z-index: 1;
}

ul#left_menu>li>img, ul#right_menu img {
  display: block;
  margin: 0 auto;
  pointer-events: none;
  user-select: none;
}

div.frame_branding {
  width: 48px;
  position: absolute;
  height: 0;
  overflow: visible !important /* not necessary but damn it I define it explicitly anyway!!! */
}

table.page_content {
  height: 100%;
  position: relative;
}

div#pages table.page_content {
  table-layout: fixed;
}

div#pages table.page_content td div.frame_content img {
  max-width: 100%;
  max-height: inherit;
}

div#pages table.page_content td div.frame_content.document > ul {
  list-style: none;
  padding-left: 1em;
}

div#pages table.page_content td div.frame_content.document > ul > li {
    padding: 0.25em 0;
}

ul#single > li.page_content:hover,
ul#double > li:hover {
  background-color: var(--mdc-theme-surface);
  box-shadow: var(--shadow-2dp);
}

li.page_content>table {
  height: 100%;
  background-color: white;
  font-weight: normal;
  color: black; 
  border-style: solid;
  border-width: 1px;
  border-color:grey;
}

.highlight {
  background-color: #ABCDEF;
}

span.page_number {
  position:absolute;
  bottom: 3px;
  right: 5px;
  color:black;
  font-size:15px;
  font-weight:bold;
}

div.type_edit {
  width: 100px;
  height: 34px;
  margin: auto;
  background-color: #eee;
  border: 1px solid #b5b5b5;
}

div.type_edit li[class^="frame_panel_element_"] img {
  padding: 1.5px;
  width: 29px;
}

ul.type_edit {
  display: flex;
  list-style-type: none;
  justify-content: space-evenly;
  margin: 0 2px;
  padding: 0;
}

ul.type_edit>li {
  float: left;
}

img.ajax_loader {
  width: 32px;
  height: 32px;
  margin: auto;
}

div.cover_edit {
  align-items: center;
  background-color: rgba(255,255,255,0.8);
  border:  var(--md-border-divider);
  cursor:pointer;
  display: flex;
  height: 50px;
  justify-content: center;
  margin: 10px auto 0;
  width: 50px;
}

div#book_settings {
  display: none;
  background-color: var(--mdc-theme-surface);
  border:var(--md-border-divider);
  padding:5px;
  position:absolute;
  top:10px;
  width:400px;
  z-index:1;
}

div#pagemachine {
  background-color: black;
  display: none;
  justify-content: space-between;
}

div#dates_container {
  width: 130px;
  background-color: #F0F0F0;
  height: 100%;
  order: 3;
  overflow: auto;
  text-align: right;
}

ul#dates {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul#dates>li {
  margin: 2px 0;
  cursor: pointer;
  font-size: 10px;
  padding-right: 5px;
}

h2#backup_history_title {
  text-align: center;
}

div#restore_navigation {
  background-color:#E3E3E3;
  border-top:1px solid;
  height:60px;
  text-align:center;
}

ul#restore_navigation {
  margin: 0;
  padding: 5px;
  list-style-type: none;
}

ul#restore_navigation>li {
  margin: 0 5px;
}

div#restore_navigation img {
  width: 32px;
  height: 32px;
}

div#restore_navigation img#page_back {
  width: 38px;
  height: 32px;
}


div#restore_navigation img#page_restore {
  width: 38px;
  height: 32px;
}

ul#dates>li.selected {
  font-size: 12px;
  background-color: #0000CD;
  color: #FFFFFF;
}

div#sortpages {
  padding: 3px 0;
  min-height: 150px;
}

div#sortpages>ul, ul.doublewrapper {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.doublewrapper {
  gap:5px;
}

div#sortpages>ul>li {
  border: none !important;
}

div#sortpages li.page_content, ul.doublewrapper>li.page_content  {
  height: 150px;
  width: 150px;
  float: left;
  margin: 5px;
  text-align: center;
  padding: 2px;
  font-weight: normal;
  border: none !important;
  position:relative;
}

div#sortpages li.page_content:nth-child(odd), ul.doublewrapper>li.page_content:nth-child(odd)  {
  margin-right: 0;
}
  
div#sortpages li.page_content:nth-child(even), ul.doublewrapper>li.page_content:nth-child(even)  {
  margin-right: 0;
}

div#sort_control {
  text-align: center;
  padding: 0.25em 0;
  height: 2.5em;
}

span#sort_control_title {
  font-size: 1.5em;
}

div#sort_control_buttons{
  float: right;
}

div#timemachine{
  width: 1010px;
  margin: 0 auto;
}

ul#double {
  display: none;
}

ul#double>li {
  position: relative;
}

div#layout_wrapper table{
  margin: 0 auto;
}

#remove_page, #copy_page {
    background-color: var(--mdc-theme-surface);
  border: var(--md-border);
    box-shadow: var(--shadow-4dp);
  cursor: pointer;
  padding:4px;
  position:absolute;
  z-index:1;
}
#remove_page {
  right:-4px;
  top:-4px;
}

#copy_page {
  left:-4px;
  bottom:-4px;
}
form#save {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--md-unit);
}
.placeholder > span {
	cursor: pointer;
  font-size: 60px;
}

div#webbook div.frame_content {
  overflow-wrap: break-word;
  position: static;
  left: auto;
  margin: 0;
  min-height: 0;
  min-width: 0;
  padding: 0;
  top: auto;
  width: auto;
}

div.frame_content.audio audio,
div.frame_content.image img,
div.frame_content.video video {
  max-width: 100%;
}

div#webbook progress {
	display: block;
	margin: var(--md-unit) auto;
}

div#recover_dialog {
  display: none;
}

ul#recover_list {
  margin: 0 20px 0 0;
  padding: 0;
  list-style-type: none;
  float: left;
  width: 120px;
  overflow: auto;
  max-height: 475px;
}

textarea#recover_text {
  width: 100%;
  height: 200px;
}

li.recover_item {
  border-bottom: 1px dotted;
  padding: 3px 5px;
  cursor: pointer;
}

div#recovery_control {
  float: right;
  width: 330px;
  text-align: right;
}

span.recovery_date {
  font-size: 9px;
  opacity: 0.7;
}

button#recover_remove_this {
  display: none;
}

div#current_file_container {
  border-left: var(--md-border-divider);
  text-align: center;
}

#current_file_container > #file-container > img {
  margin: 10px;
  max-height: 200px;
  max-width: 90%;
}
#current_file_container > #file-container > span {
	font-size: 40px;
}

div#file-container {
  margin: 10px;
  max-height: 200px;
  overflow: hidden;
  border: none;
}

div#file-container .html5_video {
  min-height: 195px !important;
  max-height: 195px !important;
}

div#file-container .html5_video p {
  margin-top: 125px !important;
}

div#file-container>video, div#file-container>embed {
  max-height: 200px;
  max-width: 90%;
}

span.wizard_float {
  display: inline-block !important;
}

span.wizard_step {
  font-size: medium;
}

p#lorem_ipsum {
  border: 1px dotted;
  padding: 5px;
}

.pulse {
  cursor:pointer;
}

img#edit_cover_image {
  max-height: 160px;
  max-width: 160px;
  min-height: 32px;
  min-width: 32px;
}

div#backup_page {
  overflow: auto;
}

table.layout_table {
  width: 100%;
  margin: 10px;
}

div#booklayout_buttons {
  text-align: right;
  margin: 0 2px 3px 0;
}

div#editlink_buttons {
  text-align: right;
}

.webbook_button {
  overflow: visible !important;
}

div#del_webbook, div#rename_webbook, div#webbook_create_design, div#webbook_create_title, div#webbook_create_content {
  margin: 20px auto;
  width: 75%;
}

div#webbook_create_content {
  margin-top: 0;
}

#wb_images_option {
  display: flex;
  padding-left: 48px;
}

#wb_images_directory, #wb_images_description {
  flex-grow: 1;
}
fieldset.webbook_fieldset_add {
  border: none;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--md-unit));
}

fieldset.webbook_fieldset_add > div {
  display: flex;
  flex-direction: column;
  gap: calc(var(--md-unit) / 2 );
}

div#webbook_create_title {
  margin-bottom: 0;
}

div#login_webbook {
  width: 50%;
  margin: 20px auto;
}

td.content_A.upload_hover, td.content_B.upload_hover, td.content_C.upload_hover, td.content_D.upload_hover {
  border: 2px black dashed !important;
}

div.html5_upload_ui {
  background-color: transparent;
  opacity: 1;
  position: relative;
  color: black;
}

input#single_page, input#double_page {
  display: none;
}

div.upload_progress_holder {
  background-color: #000;
  border-radius: 0.5em;
  height: 0.5em;
  margin: 0px auto;
  padding: 2px !important;
  position: relative;
  overflow: hidden;
}

div.upload_progress {
  background-color: #FFFFFF;
  border-radius: 0.5em;
  height: 0.5em;
  margin: 0 !important;
  position: relative !important;
  width: 0;
}

div#webbook-upload-progress {
  display: none;
  text-align: center;
}
div#webbook_stats, div#webbook_contributors {
  margin: 5px 0;
}
div#webbook_stats>div, div#webbook_contributors>div {
  padding: 5px;
}
table#contributors_table {
  margin: 0 auto;
  border-collapse: collapse;
}

ul#webbook-documents-list {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  margin: var(--md-unit) 0;
  gap: var(--md-unit);
  padding: 0;
}
li.webbook-documents-item {
  align-items: center;
  border: var(--md-border-divider);
  cursor: move;
  display: flex;
  justify-content: space-between;
  padding: calc(var(--md-unit) / 2);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
li.webbook-documents-item .filename {
  overflow: hidden;
  text-overflow: ellipsis;
}
.webbook-documents-item-remove {
  cursor: pointer;
}
.webbook-documents-item[data-processing="true"] .material-icons.webbook-documents-item-remove {
    background: fuchsia;
}
#webbook-documents-add, #cover_image_select {
	align-items: center;
	border: var(--md-border-divider);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	height: 150px;
	position: relative;
	text-align: center;
	width: 150px;
}
#cover_image_select.hidden {
	display: none;
}
#book_settings div.oc-md-input-text-filled,
#book_settings div.oc-md-input-select-filled {
	width: 100%;
}
div#webbook-documents-controls {
  text-align: right;
}

/*to allow scrolling in TinyMCE in iOS*/
div#webbook p[data-format="portrait"] div.mce-edit-area {
  overflow: auto;
  -webkit-overflow-scrolling:touch;
  height: 297px;
}

div#webbook p[data-format="square"] div.mce-edit-area {
  overflow: auto;
  -webkit-overflow-scrolling:touch;
  height: 213px;
}

div#webbook p[data-format="landscape"] div.mce-edit-area {
  overflow: auto;
  -webkit-overflow-scrolling:touch;
  height: 100px;
}

@media only screen and (max-width:1000px) {
  div#workplace, div#left_menu_wrapper, div#right_menu_wrapper {
    height: auto;
  }
  
  div#book:not(.cover) {
    height: auto !important;
  } 

  div#workplace > div#book > div#pages {
    display: flex;
    flex-direction: column;
  }
  
  div#left_page, div#right_page  {
    height: 510px;
    width: 100%;
  }
}