/* 
 * Styling for ui elements.
 *
 * An ai element is a single small part of element, such as a button, a button container or a text field or text field container.  
*/

/** Should be used with SinglePagePaper */
.IndependentLogo { position:absolute;  width: 31px; height: 31px;  opacity: 0.3; left:21px; top:-14px;}

.ButtonPanel { margin:16px 0 10px 0; }
.ButtonPanel div { margin-right:20px; position:relative; left:10px; }
.SmallHeadline {  color: #3a818a; font-size:22px; line-height:22px; margin: 6px 0 16px 0; text-align:left }

.linkUrl { max-width:650px; margin:0 auto; text-align:left; position:relative; }
.TextFieldInputContainer input[type='text'], .TextFieldInputContainer input[type='password'] { width:100%; display:block; margin:1px auto 12px auto; }
.TextFieldInputContainer textarea { width:100%; height:80px; display:block; margin:1px auto 12px auto; }
.TextFieldInputContainer select { width:100%; margin:1px auto 12px auto; }
.sane .TextFieldInputContainer .HorizontalDivPanel { height: 24px; }
.sane .TextFieldInputContainer { max-width:auto; }

.SaneGlassPopupPanel .SmallHeadline { text-align:center;} 

.Block { display:block; }

.Sane .HorizontalDivPanel .ColorWidget { margin-left:7px; position:relative; top:2px;}
.Sane .HorizontalDivPanel  { margin:10px 0 0 0; }

.Sane .HorizontalDivPanel .SwitchButton { margin-left:7px; position:relative; top:2px;}

.Sane .MiniCkEditor + .stdButtonPanel { margin-top:12px; }

/**
 * Some nice default styling for misc combinations of components. 
 * 
 * Page must tag itself with the css class sane in order to get the default styling of ui elements in most cases.
 */ 
.sane .infoLable + input[type="text"], .gwt-InlineLabel + input[type="text"]   { margin-top:4px; }
.ToggleLabelR  { margin:5px 0 10px 0; font-size: 11px; line-height: 14px; }
.ToggleLabelR > img { position:relative; top:2px; margin-right:12px; float:left; }
.ChapterListWidget2 .ToggleLabelR > img { margin-right:12px !important }


/** Needed because the styling of our radio buttons is insane */ 
.HorizontalDivPanel.ContainsRadioButton { position: relative; top: -16px; margin-top: 6px;  }

.Center { text-align:center; }

.CreateBookAiPopup form { margin-top:40px; }

/* 
 * Styling for specific Widgets.
 *
 * A widget is a complex component.
 */
.MessageDialog { max-width:700px; }
.PageStatsController .SalesPeriodSelector { display:inline-block; margin-right:30px; }
.PageStatsController .periodSelectorContainer > * { vertical-align:middle; }

.periodSelectorContainer { background-color:#ccc; text-align:center; padding:12px;}

.AiEditorFixedBottom { padding-left:114px; font-size:10px; }

.AiEditorFixedBottom { position:fixed; bottom:0; z-index:999; height:32px; line-height:32px; border-style:solid; border-width:0; width:calc(62%); background-color: #EDEAE7;  }
.AiEditorFixedBottom .menuButton { display:none; }
.AiEditorFixedBottom .saveStatusLabel { position:relative; top: -4px; }
.AiEditorFixedBottom .showHistoryLabel { position:relative; top: -4px; margin-right:20px; } 

.ck-toolbar_grouping { border:none !important; }

.EditChatGptPrompt { width:90%; max-width:1200px; }
/* I should have a class to do this */
.EditChatGptPrompt table {width:100%; }
.EditChatGptPrompt td { padding:4px 0; }
.EditChatGptPrompt input { width:100%; }
.EditChatGptPrompt input[type="checkbox"] { width:auto;  }
.EditChatGptPrompt select { width:100%; } 

.Link {cursor:pointer; }

/**
Legacy styling
*/
.Sane .stdButtonPanel { margin-top:16px; }

.smallHeadline {   font-size:15px; line-height:18px; margin: 6px 0 16px 0; letter-spacing:1px; NOtext-transform:uppercase;  }

.smallestHeadline {   font-size:12px; line-height:15px; margin: 6px 0 10px 0; letter-spacing:1px; text-transform:uppercase;  }
.smallestHeadline .iconFont { font-size:18px; margin-right:15px; position:relative; top: 4px; }

.smallestHeadline.Link:hover { color: #5f5f5f; font-weight: bold; text-decoration: none; }

.ContentPane .smallHeadline:first-child { margin-top:16px; }

  
.AiLeft { width: 17%; float: left; min-height:300px; }
.AiPaper { background-color: white; margin: 40px 0 40px 0; width: 65%; float: left; min-height:600px; }
.AiRight { width: 18%; float: left; min-height:300px;}

.Sane .smallHeadline { text-align:center; }