html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, form {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    outline: none;
}
/* HTML5 display-role reset for older browsers */


article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* end of css reset */

/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../webfonts/JTUPjIg1_i6t8kCHKm459WxZOg3z8fZwjimrq1Q_.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../webfonts/JTUPjIg1_i6t8kCHKm459WxZOg3z-PZwjimrq1Q_.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../webfonts/JTUPjIg1_i6t8kCHKm459WxZOg3z8vZwjimrq1Q_.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../webfonts/JTUPjIg1_i6t8kCHKm459WxZOg3z_PZwjimrqw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../webfonts/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../webfonts/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../webfonts/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../webfonts/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../webfonts/JTURjIg1_i6t8kCHKm45_dJE3gTD_vx3rCubqg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../webfonts/JTURjIg1_i6t8kCHKm45_dJE3g3D_vx3rCubqg.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../webfonts/JTURjIg1_i6t8kCHKm45_dJE3gfD_vx3rCubqg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../webfonts/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
    
body,
input,
select,
textarea,
body * {
  font-family: 'Montserrat', sans-serif;
  box-sizing: border-box;
}
body::after, body::before,
input::after,
input::before,
select::after,
select::before,
textarea::after,
textarea::before,
body *::after,
body *::before {
  box-sizing: border-box;
}

body {
  background-color: #f2f2f2
}

html {
   height: 100%;
   overflow-y: scroll;
}

h1 {
  font-size: 2rem;
  text-align: center;
  margin: 0 0 2em;
}

.container {
  position: relative;
  margin: 10px;
  background: #fff;
  padding: 1rem 2rem;
  border-radius: 1px;
}
.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: none;
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
  -webkit-transition: -webkit-transform 0.28s ease-in-out;
  transition: -webkit-transform 0.28s ease-in-out;
  transition: transform 0.28s ease-in-out;
  transition: transform 0.28s ease-in-out, -webkit-transform 0.28s ease-in-out;
  z-index: -1;
}
.container:hover::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.button-container {
  text-align: center;
}

.hand { cursor: pointer; }

fieldset {
  margin: 0 0 3rem;
  padding: 0;
  border: none;
}

.form-radio,
.form-group {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1.5rem; /* ch 2rem  */
}

.form-inline > .form-group,
.form-inline > .btn {
  display: inline-block;
  margin-bottom: 0;
}

.form-help {
  margin-top: 0.125rem;
  margin-left: 0.125rem;
  color: #b3b3b3;
  font-size: 0.8rem;
}
.checkbox .form-help, .form-radio .form-help, .form-group .form-help {
  position: absolute;
  width: 100%;
}
.checkbox .form-help {
  position: relative;
  margin-bottom: 1rem;
}
.form-radio .form-help {
  padding-top: 0.25rem;
  margin-top: -1rem;
}

.form-group input {
  height: 1.5rem; /* ch  1.9rem */ 
}
.form-group textarea {
  resize: none;
}
.form-group select {
  width: 100%;
  font-size: 1rem;
  height: 1.6rem;
  padding: 0.125rem 0.125rem 0.0625rem;
  background: none;
  border: none;
  line-height: 1.6;
  box-shadow: none;
}
.form-group .control-label {
  position: absolute;
  top: -0.7rem; /* ch 0.25rem; */
  pointer-events: none;
  padding-left: 0.125rem;
  z-index: 1;
  color: grey; /* ch #b3b3b3;  */
  font-size: 0.8rem; /* ch 1rem; */
  font-weight: normal;
  -webkit-transition: all 0.28s ease;
  transition: all 0.28s ease;
}
.form-group .bar {
  position: relative;
  border-bottom: 0.0625rem solid #999;
  display: block;
}
.form-group .bar::before {
  content: '';
  height: 0.125rem;
  width: 0;
  left: 50%;
  bottom: -0.0625rem;
  position: absolute;
  background: #337ab7;
  -webkit-transition: left 0.28s ease, width 0.28s ease;
  transition: left 0.28s ease, width 0.28s ease;
  z-index: 2;
}
.form-group input,
.form-group textarea {
  display: block;
  background: none;
  padding: 0.125rem 0.125rem 0rem; /* ch  0.0625rem */ 
  font-size: 1rem;
  border-width: 0;
  border-color: transparent;
  line-height: 1.5; /* ch  1.9 */ 
  width: 100%;
  color: transparent;
  -webkit-transition: all 0.28s ease;
  transition: all 0.28s ease;
  box-shadow: none;
}
.form-group input[type="file"] {
  line-height: 1;
}
.form-group input[type="file"] ~ .bar {
  display: none;
}
.form-group select,
.form-group input:focus,
.form-group input:valid,
.form-group input.form-file,
.form-group input.has-value,
.form-group textarea:focus,
.form-group textarea:valid,
.form-group textarea.form-file,
.form-group textarea.has-value {
  color: #333;
}
.form-group select ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group input:valid ~ .control-label,
.form-group input.form-file ~ .control-label,
.form-group input.has-value ~ .control-label,
.form-group textarea:focus ~ .control-label,
.form-group textarea:valid ~ .control-label,
.form-group textarea.form-file ~ .control-label,
.form-group textarea.has-value ~ .control-label {
  font-size: 0.8rem;
  color: gray;
  top: -0.7rem; /* ch -0.8rem */
  left: 0;
}
.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
}
.form-group select:focus ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group textarea:focus ~ .control-label {
  color: #337ab7;
}
.form-group select:focus ~ .bar::before,
.form-group input:focus ~ .bar::before,
.form-group textarea:focus ~ .bar::before {
  width: 100%;
  left: 0;
}

.checkbox label,
.form-radio label {
  position: relative;
  cursor: pointer;
  padding-left: 2rem;
  text-align: left;
  color: #333;
  display: block;
}
.checkbox input,
.form-radio input {
  width: auto;
  opacity: 0.00000001;
  position: absolute;
  left: 0;
}

.radio {
  margin-bottom: 0.5rem;
}
.radio .helper {
  position: absolute;
  top: -0.25rem;
  left: -0.25rem;
  cursor: pointer;
  display: block;
  font-size: 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: #999;
}
.radio .helper::before, .radio .helper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  margin: 0.25rem;
  width: 1rem;
  height: 1rem;
  -webkit-transition: -webkit-transform 0.28s ease;
  transition: -webkit-transform 0.28s ease;
  transition: transform 0.28s ease;
  transition: transform 0.28s ease, -webkit-transform 0.28s ease;
  border-radius: 50%;
  border: 0.125rem solid currentColor;
}
.radio .helper::after {
  -webkit-transform: scale(0);
          transform: scale(0);
  background-color: #337ab7;
  border-color: #337ab7;
}
.radio label:hover .helper {
  color: #337ab7;
}
.radio input:checked ~ .helper::after {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
.radio input:checked ~ .helper::before {
  color: #337ab7;
}

.checkbox {
  /*
  margin-top: 2rem;
  margin-bottom: 1rem;
  */
}
.checkbox .helper {
  color: #999;
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  z-index: 0;
  border: 0.125rem solid currentColor;
  border-radius: 0.0625rem;
  -webkit-transition: border-color 0.28s ease;
  transition: border-color 0.28s ease;
}
.checkbox .helper::before, .checkbox .helper::after {
  position: absolute;
  height: 0;
  width: 0.2rem;
  background-color: #337ab7;
  display: block;
  -webkit-transform-origin: left top;
          transform-origin: left top;
  border-radius: 0.25rem;
  content: '';
  -webkit-transition: opacity 0.28s ease, height 0s linear 0.28s;
  transition: opacity 0.28s ease, height 0s linear 0.28s;
  opacity: 0;
}
.checkbox .helper::before {
  top: 0.65rem;
  left: 0.38rem;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
  box-shadow: none;
}
.checkbox .helper::after {
  top: 0.3rem;
  left: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.checkbox label:hover .helper {
  color: #337ab7;
}
.checkbox input:checked ~ .helper {
  color: #337ab7;
}
.checkbox input:checked ~ .helper::after, .checkbox input:checked ~ .helper::before {
  opacity: 1;
  -webkit-transition: height 0.28s ease;
  transition: height 0.28s ease;
}
.checkbox input:checked ~ .helper::after {
  height: 0.5rem;
}
.checkbox input:checked ~ .helper::before {
  height: 1.2rem;
  -webkit-transition-delay: 0.28s;
          transition-delay: 0.28s;
}

.radio + .radio,
.checkbox + .checkbox {
  margin-top: 0.5rem;
}

.has-error .legend.legend, .has-error.form-group .control-label.control-label {
  color: #d9534f;
}
.has-error.form-group .form-help,
.has-error.form-group .helper, .has-error.checkbox .form-help,
.has-error.checkbox .helper, .has-error.radio .form-help,
.has-error.radio .helper, .has-error.form-radio .form-help,
.has-error.form-radio .helper {
  color: #d9534f;
}
.has-error .bar::before {
  background: #d9534f;
  left: 0;
  width: 100%;
}

.button {
  position: relative;
  background: #c3e8ef;
  border: 0px solid #c3e8ef;
  font-size: 1rem;
  color: #193153;
  margin: 0 10px 10px 0;
  padding: 1rem 2rem;
  cursor: pointer;
  -webkit-transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  overflow: hidden;
  box-shadow: none;
  font-weight: 700;
}
.button span {
  color: #193153;
  position: relative;
  z-index: 1;
}
.button::before {
  content: '';
  position: absolute;
  background: #071017;
  border: 50vh solid #1d4567;
  width: 30vh;
  height: 30vh;
  border-radius: 50%;
  display: block;
  top: 50%;
  left: 50%;
  z-index: 0;
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
.button:hover {
  color: #337ab7;
  box-shadow: none;
  transition: 0.3s;
}
.button:active::before, .button:focus::before {
  -webkit-transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}
.button:focus {
  outline: none;
}



div {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;    
}

table.center {
    margin-left:auto;
    margin-right:auto;
}
td {
    margin:0;
    padding:0;
    color: #333;
    empty-cells: show;
}
ul {
    margin-top: 1em;
    margin-bottom: 2em;
    list-style: disc;
    padding-left: 35px;
}
#navi ul {
    margin: 0;
}
ol {
    margin-top: 1em;
    margin-bottom: 2em;    
    list-style: decimal;
    padding-left: 35px;
}
a, a:visited {
    color: #333;
    text-decoration: none;
    font-weight: normal;
}
a:hover {
    color: #999999 !important;
    cursor: pointer;
    transition: 0.3s;
}
sub { 
    vertical-align: sub;
    font-size: smaller;
}
sup { 
    vertical-align: super;
    font-size: smaller;
}

.select-container {position:relative; display: inline;}
.select-container:after {content:""; width:0; height:0; position:absolute; pointer-events: none;}
.select-container:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: 5px;
    right: 10px;
    border-top: 8px solid black;
    opacity: 0.5;
}
select::-ms-expand {
    display: none;
}

p {
    padding: 0px;
    margin: 0px;
}
h2 {
    padding: 0px;
    margin: 0px;
    font-size: 18px;
    font-weight: bold;
}
h3 {
    padding: 0px;
    margin: 0px;
    font-size: 14px;
    font-weight: bold;
}
b, strong {
    font-weight: bold;
}
hr {
    border: none;
    height: 1px;
    background-color: #304050;
    margin: 10px 0;
}
#mainContainer {
   margin: auto;
   margin-top: 50px;
  /* background-color: #fff;  */
}
#container {
   min-height:100%;
   position:relative;
}
#navi {min-height: 100vh;display: none; position: fixed; z-index: 100;}
#navi ul {padding-left: 17px; border-left: 3px solid #eaedf1; line-height: 40px;}
#navi a {
    color: #7a8899;
}
#navi a:hover {
    color: #ccc !important;
    transition: 0.3s;
}
#iconNavi i {font-size: 120%;}
#closeNavi {
  float: right; width: 50px; text-align: right;
}
#closeNavi i {font-size: 120%;}
.iconNavi {
   width: 20px;
   margin-right: 5px;
   display: inline-block;
   text-align: center;
   color: #7a8899;
}
.icon {
   width: 20px;
   margin-right: 5px;
   display: inline-block;
   text-align: center;
   color: #132d50;
}
.icon:hover{
  color: #337ab7;
  transition: 0.3s;
}
.btnRed {
    background-color: #990000;
    box-shadow: none;
}
.btnRed:hover {
    background-color: #d66262;
    box-shadow: none;
    transition: 0.3s;
}
.naviLinkHolder {display: inline-block; vertical-align: top;} 
.small { font-size: 80%; }
.adminTable {
    border: 1px #666 solid;
    padding: 2px;
    width: 100%;
}
.adminTable td {
    padding: 5px;
}
.adminTable td:first-child {
    width: 150px;
    vertical-align: middle;
}

.listTableDiv {
  color: #333;
  display: table;
  padding: 2px;
  width: 100%;
  box-shadow: none;
}
.listTableDivTr {
  display: table-row;
}
.listTableDivTr:nth-child(odd) {
  background-color: #fff;
}
.listTableDivTd {
  display: table-cell;
  padding: 0.75rem;
  vertical-align: middle;
  border-bottom: 1px solid #7a8899;
}
.listTableDivTr:last-child .listTableDivTd{
  border-bottom: 0px solid #7a8899;
}


.listTable {
    padding: 2px;
    width: 100%;
    box-shadow: none;
}
.listTable tr {

}
.listTable tr:nth-child(odd) {
    background-color: #fff;
}

.listTable tr:nth-child(even) {
    background-color: #f2f2f2;
}
.listTable tr:first-child {
    background-color: #fff;
}
.listTable tr:first-child td {
    vertical-align: top;
}
.listTable td {
    padding: 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid #7a8899;
}
.border {
    border: 1px #ccc solid;
    padding: 2px;
}
.border:hover span {
    cursor: pointer;
}
.pointer {
    cursor: pointer;
}

.colorTable { width: 300px;  border: 1px solid #ccc;}
.colorTable td {border: 1px solid #ccc;}

.checkboxItem {display: inline-block; margin-right: 10px; margin-top: 10px; padding: 2px 5px; border: 1px solid #ccc;}

#overlay { height: 100%; width: 100%; display: none; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9);}
#overlay-content { background-color: #fff; color: #333; padding: 20px; position: relative; top: 25%; max-width: 600px; text-align: center; margin-top: 30px; margin-left: auto; margin-right: auto;}
#overlay a { padding: 8px; text-decoration: none; color: #818181; display: block; transition: 0.3s; }
#overlay a:hover, .overlay a:focus { color: #f1f1f1; transition: 0.3s;}
#overlay .closebtn { position: absolute; top: 20px; right: 20px; font-size: 30px;}

#onePage {width: 100%; overflow: auto;}


#headerContainer { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; padding-left: 10px; line-height: 32px; height: 50px; background-color: #132d50; color: #fff; box-shadow: none;}
#headerContainer span {float: left; padding: 10px;}
#headerContainer a {color: #fff;}

#contentSubmenuSmall {display: none;}

#contentMenuContainer { float: left; color: #777777; background-color: #f3f3f4; padding: 0 10px; height: calc(100vh - 60px); min-width: 550px; max-width: 550px; overflow: auto;}
#contentFormContainer { float: left; color: #777777; background-color: #f3f3f4; padding: 0 10px; width: calc(100% - 800px); height: calc(100vh - 60px); overflow: auto; }

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    position: absolute;
    z-index: 1;

    top: -5px;
    right: 105%; 
}

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; 
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ddd;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 28px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #88d8b0;
}

input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

#hint {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    visibility: hidden;
    background-color: #fff;

    padding: 0px 5px;
    border: 0px solid #f9f9f9;
    max-width: 600px;
    box-shadow: none;
    color: gray;
    padding: 0.5rem;

}
#hintContainer {
    width: 100%;
}

#toast {
    position: fixed;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ce5e4f;
    color: #fff;
    box-shadow: none;
    padding: 1rem 2rem;
    z-index: 100;
    visibility: hidden;
}

.fadeIn { display: none; }

.mobile {display: none; line-height: 20px;}
.desktop {display: table-cell;}

.headerInput {
  display: inline-block;
  background-color: rgba(255,255,255,0.1);
  color: #fff;
  padding: 0.125rem 0.125rem 0.125rem 0.125rem;
  font-size: 1rem;
  border-width: 0;
  border-color: transparent;
  line-height: 1.9;
  width: 240px;
  -webkit-transition: all 0.28s ease;
  transition: all 0.28s ease;
  box-shadow: none;  
}

#subnaviContainer {z-index: 10; width: 100%; padding: 0em; margin: 0; background-color: #fff; box-shadow: none;}
#subnaviSelect {display: none; color: #fff; font-size: 1rem; margin-left: 10px; height: 50px; border: 0px; background-color: #132d50;}  

#subnaviContainer ul { list-style-type: none;margin: 0;padding: 0;overflow: hidden;}
#subnaviContainer li {float: left;background-color: #fff;}
#subnaviContainer li:not(:first-child) {   border-left: 2px solid #132d50; }
#subnaviContainer li a {  line-height: 45px;  display: block;  color: #7a8899;  text-align: center;  padding: 0rem 20px;  text-decoration: none;}
#subnaviContainer li a:hover:not(.active) {  background-color: #132d50;   color: #fff !important; }
#subnaviContainer .active {  background-color: #132d50;  color: #fff !important;  border-left: 0px solid #fff !important;}

.locked { color: #337ab7 !important; }

.flex { display: flex;}
.flex3 { display: flex;}

.blue { background-color: #193153 !important; color: #c3e8ef !important; }
.blue span { color: #c3e8ef;}
.red { background-color: #ce5e4f !important; color:  #ce5e4f !important; }
.redText {color:  #ce5e4f !important; }
.redIcon { color:  #ce5e4f !important; }
.shortBar {width: 150px;}
.hidden { display: none; }
.error  {color:  #ce5e4f !important;} 
.info {float: right; color: gray; font-size: 0.8rem; margin-top: 1rem; min-width: 20px; text-align: right; cursor: pointer;}

.textField { background-color: #f4f6f7; padding: 5px;}
.labelField { padding: 5px; font-weight: bold;}

.progressbar { background-color: #fff; border-radius: 13px; padding: 3px; }
.progressbar > div { background-color: #132d50; width: 100%; height: 20px; border-radius: 10px; box-shadow: none;}

.containerTitle {background-color: #c3e8ef !important; color: #193153 !important; font-weight: bold !important; margin-bottom: 0 !important;}
.containerFirst {margin-top: 0 !important;}

@media screen and (max-height: 450px) {
  #overlay a {font-size: 20px}
  #overlay .closebtn { font-size: 40px; top: 15px; right: 15px; }
}

@media screen and (max-width: 1100px) {
  .flex3 { display: block; }
}

@media screen and (max-width: 770px) {
  #subnaviTab {display: none;}
  #subnaviSelect {display: block;}
  #subnaviContainer { background-color: #132d50; }
}

@media screen and (max-width: 700px) {
  .mobile {display: table-cell;}
  .desktop {display: none}
}

@media screen and (max-width: 650px) {
  .flex { display: block; }
}