@font-face {
  font-family: Hammer;
  src: url("../font/HammersmithOne-Regular.ttf");
}

@font-face {
  font-family: Roboto;
  src: url("../font/Roboto-Regular.ttf");
}

* {
  font-family: var(--global-font);
  box-sizing: border-box;
  font-size: 1.4rem;
  padding: 0;
  margin: 0 auto;
  border-radius: 0.3rem;
  border: 0;
}

html { font-size: 10px; }

body {
  background: var(--global-bkg-img) top center;
  background-size: auto 100vh;
  margin: auto !important;
}

button, select, [onclick] { cursor: pointer }

@media (orientation: portrait) {
  html {
    font-size: 1.4vh;
  }
}

:root {
  --color-00: #064847;
  --color-01: #DBEFED;
  --color-02: MediumSeaGreen;
  --color-03: white;
  --color-04: lightgray;
  --color-05: darkgray;
  --color-06: black;
  --color-07: red;
  --color-11: #6366F1;
  --color-12: blue;
  --color-13: gray;

  --bkg-00: rgba(219,239,237,0.9);
  --bkg-01: rgba(255,255,255,0.95);
  --bkg-02: rgba(208,212,218,0.9);
  --bkg-03: rgba(255,255,255,0.8);
  --bkg-04: rgba(0,0,0,0.3);
  --bkg-05: rgba(219,239,237,0.93);
  --bkg-06: #edf7f6;

  --global-font: Roboto;
  --global-bkg-img: url('../image/bkg.jpg');


  --primary-bkg:          var(--color-01);
  --primary-text:         var(--color-00);
  --primary-border:       var(--color-00);
  --primary-neutral:      var(--color-04);
  --primary-hover-bkg:    var(--color-03);
  --primary-hover-text:   var(--color-00);
  --primary-hover-border: var(--color-02);


  --page-bgcolor: var(--bkg-05);
  --pageheader-bgcolor: var(--color-00);
  --pageheader-color: var(--color-03);
  --pageheader-menu-bordercolor: var(--color-00);
  --pageheader-menu-bgcolor: var(--color-00);
  --pageheader-menu-color: var(--color-03);
  --pageheader-selection-bordercolor: var(--color-02);
  --pageheader-selection-bgcolor: var(--color-00);
  --pageheader-selection-color: var(--color-03);
  --pageheader-hover-bordercolor: var(--color-01);
  --pageheader-hover-bgcolor: var(--color-01);
  --pageheader-hover-color: var(--color-00);
  --pageheader-button-bgcolor: var(--color-01);
  --pageheader-button-color: var(--color-00);
  --pageheader-button-hover-bgcolor: var(--color-03);
  --pageheader-button-hover-color: var(--color-00);


  --login-btn-bkg-color: var(--color-11);
  --login-btn-text-color: var(--color-03);
  --login-btn-hover-bkg-color: var(--color-12);

  --cover-bkg-color: var(--bkg-04);

  --card-bkg-color: var(--bkg-01);
  --card-border-color: var(--color-04);

  --menu-font: 'Hammer';
  --menu-header-color: var(--color-00);
  --menu-icons-img: url('../image/icons.png');
  --menu-item-color: var(--color-06);
  --menu-item-hover-bkg-color: var(--color-01);
  --menu-bkg: var(--bkg-00);
  --menu-width: 300px;

  --contents-bkg-color: var(--bkg-02);
  --contents-card-bkg-color: var(--bkg-03);
  --contents-actions-img: url('../image/opt.png');

  --tree-icons-img: url('../image/tree.png');

  --loading-img: url('../image/loading.gif');
  
  --newbtn-border-color: var(--color-02);
  --newbtn-text-color: var(--color-02);
  --newbtn-bkg-color: var(--color-03);
  --newbtn-hover-bkg-color: var(--color-02);
  --newbtn-hover-text-color: var(--color-03);
  
  --cancelbtn-border-color: var(--color-07);
  --cancelbtn-text-color: var(--color-07);
  --cancelbtn-bkg-color: var(--color-03);
  --cancelbtn-hover-bkg-color: var(--color-07);
  --cancelbtn-hover-text-color: var(--color-03);

  --table-border-color: var(--color-04);
  --table-header-bkg-color: var(--bkg-00);
  --table-body-hover-bkg-color: var(--color-03);

  --list-item-border-color: var(--color-00);

  --side-bkg-color: var(--bkg-01);
  --side-border-color: var(--color-04);
  --side-shadow-color: var(--color-05);
  --side-header-bkg-color: var(--color-01);

  --view-bkg-color: var(--color-01);
  --view-hover-bkg-color: var(--bkg-01);

  --treeitem-background: var(--color-01);

  --title-bkg-color: var(--color-00);
  --title-border-color: none;
  --title-text-color: var(--color-03);

  --tabview-border-color: var(--color-00);
  --tabview-selection-color: var(--color-02);

  --fieldset-border-color: var(--color-04);
  --fieldset-background-color: var(--bkg-00);
  --fieldset-background-selected: var(--color-02);

  --link-bordercolor: var(--color-00);
  --link-bgcolor: var(--color-01);
  --link-color: var(--color-00);
  --link-hover-bgcolor: var(--color-03);

  --disabled-background-color: var(--bkg-6);
  --disabled-color: var(--color-13);

  --license-bkg-color: var(--color-01);
  --license-border-color: var(--color-00);
  --license-hover-bkg-color: var(--color-03);
  --license-hover-border-color: var(--color-02);
  --license-title-color: var(--color-00);
  --license-text-color: var(--color-06);
}

button.newBtn {
  background-color: var(--newbtn-bkg-color);
  border: 1px solid var(--newbtn-border-color);
  color: var(--newbtn-text-color);
  font-weight: bold;
  padding: 1.4rem;
}

button.newBtn:hover {
  background-color: var(--newbtn-hover-bkg-color);
  color: var(--newbtn-hover-text-color)
}

hr[class^="opt"] {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  background-image: var(--contents-actions-img);
  background-size: auto 2.5rem;
  margin: 0 0.5rem;
  vertical-align: middle;
}