@import url('https://fonts.googleapis.com/css?family=Courgette&display=swap');
@import url('./table.css');
@import url('./pagecontroller.css');
@import url('./tinymce.css');

/*
 * @import url('normalize.css');
 */

/*
 * colours 
 */
:root {
  --body-bg: #f9f9f9;
  --bg: #bdd7ea;
  --bglighter: #bdd7ea50;
  --bglightest: #bdd7ea95;
  --button-bg: #3066B6;
  --button-fg: #efefef;
  --button-sel-bg: #f9f9f9;
  --button-sel-fg: #0a3a6a;
  --link-bg: #3066B6;
  --link-bg-hover: #0d3c80;
  --warning-fg: red;
  --warning-bg: white;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

* {
	font-family: Arial, "Lucida Console", sans-serif;
  font-size: 15px;
}

html {
  background-image: repeating-linear-gradient(
    to right, 
    #ffffff,
    #ffffff 10%,
    var(--body-bg) 10%,
    var(--body-bg) 90%,
    #fffdc2 90%
  );
  min-width: 920px;
}
body {
  background: transparent;
  margin: 0 10%;
}

.nofound {
  font-style: italic;
  color: #666;
}

.novalue{
  font-style: italic;
  color: #666;
}

/*
 * PaginatorController
 */ 
.Widget_PaginatorController div {
  opacity: .6;
}
.Widget_PaginatorController div.Widget_PaginatorController_Info {
  opacity: 1;
}
.Widget_PaginatorController div:hover {
  opacity: 1;
}
/* end PaginatorController */ 

.sTitle  {
  background: white;
  padding-top: 20px;
}
.sTitle .titleContainer {
  background: var(--bg);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.sTitle .toTitle  {
  font-family: 'Courgette', cursive;
  display: block;
  line-height: 60px;
  font-size: 40px;
  font-weight: bold;
  color: var(--button-bg);
  text-shadow: 0 0 3px white;
  padding-left: 15px;
}

.sTitle img {
  position: relative;
  top: -20px;
  right: -30px;
  float: right;
}

.sTopMenu {
  background: var(--bg);
}
.sTopMenu .menuBar {
  margin-left: 5px;
}

.menuBar a.Widget_LinkButton,
.Widget_TabControl > .Tab_Links.Top > ul > li > a {
  color: var(--button-fg);
  background-color: var(--button-bg);
  display: inline-block;
  margin-right: 5px;
  padding: 10px 12px;
  text-decoration: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  font-weight: normal;
  border-color: gray;
}
.Widget_TabControl > .Tab_Links.Top > ul > li {
  margin: 0;
}
.menuBar a.Widget_LinkButton_Selected,
.Widget_TabControl > .Tab_Links.Top > ul > li.active > a {
  color: var(--button-sel-fg);
  background-color: var(--button-sel-bg);
}
.Widget_TabControl > .Tab_Links.Top > ul > li.active > a {
  background: white;
  border: 1px solid rgba(0,0,0,0.15);
  border-bottom: 0;
}
.menuBar a.Widget_LinkButton:hover,
.Widget_TabControl > .Tab_Links.Top > ul > li > a:hover {
  opacity: .8;
}

.Widget_TabControl .Tab_Links {
  padding: 5px 0 0 5px;
}
.Widget_TabControl > .Tab_Content {
  margin-top: -1px;
}

.menu.vertical {
  padding-top: 20px;
  border-right: 2px solid var(--bglighter);
}

.menu.vertical a {
  text-align: right;
  display: block;
  background: transparent;
  color: var(--button-bg);
}
.menu.vertical a:hover,
.menu.vertical a.Widget_LinkButton_Selected {
  color: var(--button-bg-hover);
}
.sMain .sContent {
  padding: 15px;
}
.sMain .sSub {
  padding: 15px; 
  padding-top: 0px; 
}

.sMain .title {
  display: inline-block;
  margin-bottom: 15px; 
  font-weight: bold;
}

.sFooter {
  color: #666;
  display: table;
  margin: auto;
  margin-top: 10px;
  text-align: center;
}

.buttons {
  display: inline-block;
  margin-top: 5px;
}

.Widget_LinkButton.button {
  background: var(--button-bg);
  color: var(--button-fg);
  display: inline-block;
  padding: 3px 8px;
  text-decoration: none;
  margin-right: 5px;
}

.Widget_LinkButton.text {
  color: var(--button-bg);
  display: inline-block;
  font-weight: bold;
}
.Widget_LinkButton.text:hover {
  color: var(--button-bg-hover);
  display: inline-block;
  font-weight: bold;
}


.buttons .button:first-child {
  margin-left: 0;
}


/*
 * Table search filter
 */

.Widget_FormLayout.flFilter {
  margin-bottom: 15px;
}

.Widget_LinkButton.button.warning {
  color: var(--warning-fg);
  background-color: var(--warning-bg);
  border: 1px solid var(--warning-fg);
  padding: 2px 7px;
}

/*
 * Login FormLayout
 * */
#login .flLogin {
  width: 380px;
  margin:auto;
  text-align: center;
}
#login .flLogin img {
  position: relative;
  bottom: -50px;
}
#login .flLogin .Widget_FormLayout {
  text-align: left;
  border: solid 1px #e2e2e2;
  border-radius: 4px;
  padding: 10px;
  padding-top: 50px;
  background: #ffffff;
  -webkit-box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.25) !important;
  -moz-box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.25) !important;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.25) !important;
}
#login .flLogin .Widget_FormLayout input {
  width: 210px !important;
  background-color: #ffffff !important;
  height: 25px !important;
  border: solid 1px #cdcdcd;
  border-radius: 4px;
  padding-left: 10px;
}
/* login form */

.Widget_FormLayout.flView label {
  color: #666;
  text-align: right;
}


/* FormLayout for editing */

.Widget_FormLayout.flEdit {
  min-width: 500px;
}

.Widget_FormLayout.flEdit fieldset .Widget_FormLayout_Row label {
  vertical-align: top;
}

/* Shrink left-hand side column */
.Widget_FormLayout.flEdit fieldset .Widget_FormLayout_Row > :first-child {
  width: 1%;
  white-space: nowrap;
}
.Widget_FormLayout.flEdit fieldset .Widget_FormLayout_Row > :not(:first-child) {
  width: 100%;
}
.Widget_FormLayout.flEdit fieldset .Widget_FormLayout_Row > :not(:first-child) input,
.Widget_FormLayout.flEdit fieldset .Widget_FormLayout_Row > :not(:first-child) textarea {
  width: 100%;
  box-sizing: border-box;
}
.Widget_FormLayout.flEdit fieldset .Widget_FormLayout_Row > :not(:first-child) input.Widget_Checkbox {
  width: auto;
}

/* FL swapped */
.Widget_FormLayout_Row_Swapped label {
  padding-left: 5px;
}


.Widget_Stack.detailHeader .Widget_NumberOutput,
.Widget_Stack.detailHeader .Widget_TextOutput,
.Widget_Stack.detailHeader .Widget_LinkButton {
  font-size: 150%;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 10px;
}
.Widget_Stack.detailHeader .Widget_NumberOutput,
.Widget_Stack.detailHeader .Widget_TextOutput.id {
  font-size: 120%;
  color: #949494;
}
.Widget_Stack.detailHeader .Widget_TextOutput,
.Widget_Stack.detailHeader .Widget_LinkButton {
  color: #666666;
  padding-left: 10px;
}

/* 'filter bar' */
.Widget_FormLayout_Row .Widget_Container.filterBar  {
  padding-left: 1px;
  width: auto;
  }
.Widget_FormLayout_Row .Widget_Container.filterBar a {
  font-weight: normal;
  display: inline-block;
  padding: 2px 10px;
  background: var(--button-sel-bg);
  color: var(--button-sel-fg);
  border-top: 1px solid #B3B3B3;
  border-bottom: 1px solid #B3B3B3;
  font-size: 13px;
  border-right: 1px solid #B3B3B3;
  margin-right: 0 !important;
  }
.Widget_FormLayout_Row .Widget_Container.filterBar a:hover {
  color: #000000;
  background: #C8C4C4;
  text-decoration: none;
}
.Widget_FormLayout_Row .Widget_Container.filterBar a:first-child {
  padding-left: 15px;
  border-left: 1px solid #B3B3B3;
  border-right: 1px solid #B3B3B3;
  box-shadow: none;
}
.Widget_FormLayout_Row .Widget_Container.filterBar a:last-child {
  padding-right: 15px;
  border-right: 1px solid #B3B3B3;
}
.Widget_FormLayout_Row .Widget_Container.filterBar a.Widget_LinkButton_Selected {
  background: var(--button-bg);
  color: var(--button-fg);
}

.status_oud {
  color: gray;
}

.validation_message {
  color: var(--warning-fg);
  background-color: var(--warning-bg);
  padding: 5px;
  display: inline-block;
}


.CodeMirror {
  width: 1100px;
}
.CodeMirror.cm-s-default {
  border: 1px solid #A9A9A9;
}


.api_var {
  font-weight: bold;
  color: green;
}
.Widget_TextOutput.api {
  font-weight: bold;
  text-transform: uppercase;
}
.Widget_TextOutput.api.get {
  color: #61affe;
}
.Widget_TextOutput.api.post {
  color: #49cc90;
}
.Widget_TextOutput.api.put {
  color: #fca130;
}

.Widget_MDOutput p {
  display: inline;
}

.Widget_LinkButton.internalLink {
  display: inline-block;
  background: none;
}

.Widget_NumberOutput.euro:before {
  content: "€";
  padding-right: 5px;
}

.Widget_TextOutput.documentation {
  display: block;
  font-style: italic;
  border: 1px solid #c7c7c7;
  padding: 5px;
}

.percentage,
.percentage .read {
  height: 20px;
}
.percentage {
  background: #7ed295;
  width: 100px;
}
.percentage .read {
  background: #178217;
  border-right: 1px solid white;
}

.materialImage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.materialImage a {
  display: none !important;
}
.materialImage:hover a {
  display: block !important;
}
.materialImage a {
  position: absolute;
}