:root {
  --cassiopeia-color-primary: black;
  --cassiopeia-color-hover: #69696b;
  --cassiopeia-color-link: WHITE;
}
body {
    color : WHITE;
    background : BLACK;
}

.table-striped-columns>:not(caption)>tr>:nth-child(2n), .table-striped>tbody>tr:nth-of-type(odd)>* {
    color: WHITE;
}

body {
 font-family: Verdana, Arial, Meiryo, "微軟正黑體", "Microsoft JhengHei", sans-serif;
}
body::after {
  opacity: 1;
}
 
h1, h2, h3, h4, h5, h6 {
 font-family: 'Open Sans Condensed', Meiryo, "微軟正黑體", "Microsoft JhengHei", sans-serif;
}
 
input, button, select, textarea {
 font-family: Arial, Helvetica, Meiryo, "微軟正黑體", "Microsoft JhengHei", sans-serif; 
}
a {
  text-decoration: NONE;
}
a:not([class]) {
  text-decoration: NONE;
}
a:hover {
  text-decoration: NONE;
}
a:not([class]):hover {
  text-decoration: NONE;
}

.metismenu.mod-menu .metismenu-item.active > a, .metismenu.mod-menu .metismenu-item.active > button, .metismenu.mod-menu .metismenu-item > a:hover, .metismenu.mod-menu .metismenu-item > button:hover {
  text-decoration: NONE !important;
}
.container-nav, .menu-horizontal {
    justify-content: center !important;
}

.footer .grid-child{
  padding: 1rem 0.5em;
}

.footer {
    background-image: linear-gradient(135deg,var(--cassiopeia-color-primary) 10%,var(--cassiopeia-color-hover) 50%,var(--cassiopeia-color-primary) 90%);
}

.container-header{
  background-image: linear-gradient(135deg,var(--cassiopeia-color-primary) 10%,var(--cassiopeia-color-hover) 50%,var(--cassiopeia-color-primary) 90%);
}

@keyframes backgroundframe {
            0%{
              background-color:#000;
              background-blend-mode: multiply;
              background-image: url("/images/suioryuphoto/person/14th.png");
              background-size: contain;background-repeat: no-repeat;
              background-position-x: left;
              background-position-y: bottom;
            }
             4%{
              background-color:#000;
              background-blend-mode: multiply;
              background-image: url("/images/suioryuphoto/person/14th.png");
              background-size: contain;background-repeat: no-repeat;
              background-position-x: left;
              background-position-y: bottom;
            }
            23%{
              background-color:transparent;
              background-blend-mode: multiply;
              background-image: url("/images/suioryuphoto/person/14th.png");
              background-size: contain;background-repeat: no-repeat;
              background-position-x: left;
              background-position-y: bottom;
             
            }
            33%{
              background-color:#000;
              background-blend-mode: multiply;
              background-image: url("/images/suioryuphoto/person/14th.png");
              background-size: contain;background-repeat: no-repeat;
              background-position-x: left;
              background-position-y: bottom;             
            }
  			37%{
              background-color:#000;
              background-blend-mode: multiply;
              background-image: url("/images/suioryuphoto/person/15th.png");
              background-size: contain;background-repeat: no-repeat;
              background-position-x: right;
              background-position-y: bottom;
            }
            56%{
              background-color:transparent;
              background-blend-mode: multiply;
              background-image: url("/images/suioryuphoto/person/15th.png");
              background-size: contain;background-repeat: no-repeat;
              background-position-x: right;
              background-position-y: bottom;
            }
            66%{
              background-color:#000;
              background-blend-mode: multiply;
              background-image: url("/images/suioryuphoto/person/15th.png");
              background-size: contain;background-repeat: no-repeat;
              background-position-x: right;
              background-position-y: bottom;
            }
 		70%{
              background-color:#000;
              background-blend-mode: multiply;
              background-image: url("/images/suioryuphoto/person/16th.png");
              background-size: contain;background-repeat: no-repeat;
              background-position-x: left;
              background-position-y: bottom;
			}
            89%{
              background-color:transparent;
              background-blend-mode: multiply;
              background-image: url("/images/suioryuphoto/person/16th.png");
              background-size: contain;background-repeat: no-repeat;
              background-position-x: left;
              background-position-y: bottom;
            }
            100%{
              background-color:#000;
              background-blend-mode: multiply;
              background-image: url("/images/suioryuphoto/person/16th.png");
              background-size: contain;background-repeat: no-repeat;
              background-position-x: left;
              background-position-y: bottom;
            }
        }

.suioryu-logo{
    
}
.list-group-item{
 Background-color : Black !important;
 color : Black !important;
}

ul.jwts_tabbernav li.jwts_tabberactive a{
  background-color: rgb(170, 180, 178) !important;
  color : WHITE;
}
.tabletr tr:hover{
  background-color: #a5a6a2;
  color : black;
}

div.jwts_toggleControlContainer a.jwts_toggleOn{
  border-bottom: 1px dotted #ccc;
}
div.jwts_toggleControlContainer a.jwts_toggleControl{
  background-image: linear-gradient(135deg,var(--cassiopeia-color-primary) 10%,var(--cassiopeia-color-hover) 50%,var(--cassiopeia-color-primary) 90%) !important;  
}

.wrap {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 width: 100%;
 }

.ulwrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
   width: 100%;
 }
.ulwrap li{
  min-width: 400px;
  width: 45%;  
  margin: 2%;
}

	.tab_css{display:flex;flex-wrap:wrap;justify-content:center;}
	.tab_css input{display:none}
	.tab_css label{margin: 5px 5px 5px 0; padding: 10px 16px; width:15%;text-align: center; 
	cursor: pointer; border-radius: 0px; background: #999; 
	color: #fff; opacity: 0.5;}
	.tab_content{order:1;display: none; width:100%; border-bottom: 3px solid #ddd; line-height: 1.6; font-size: 1em; padding: 15px; border: 0.5px solid #ddd; border-radius: 2px;}
	.tab_css input:checked + label, .tab_css label:hover{opacity: 1; font-weight:bold;}
	.tab_css input:checked + label + .tab_content{display: initial;}

#spinner {  
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  resize: vertical;
  overflow: auto;
  z-index: 10000;
  background: rgba(255, 255, 255, 0.1);
}

.spinnerbox {
  position: relative; 
  top: 30%; 
  left: 45%; 
  transform: translate(-30%, -45%);
  height:150px;
  -webkit-animation: brightness 1s infinite;
  animation: brightness 1s infinite;
  transform: translateZ(0);
}

@keyframes brightness {
  0%, 100%  { 
    filter: brightness(1);
    -webkit-filter: brightness(none); }
  50% { 
    filter: brightness(2);
    -webkit-filter: brightness(2); }
}
/*! ----------------------767.98px-------------------------------------------------------------------------------------------- */

@media (max-width: 767.98px){
  
  .tab_css label{margin: 5px 5px 5px 0; padding: 10px 16px; width:auto;min-width:20%;;text-align: center; }
  
  .ulwrap li{
  min-width: min(350px,100%);
  width: 45%;  
  margin: 2%;
}
  
.spinnerbox {
  position: absolute; 
  top: 30%; 
  left: 30%; 
  transform: translate(-30%, -30%);
  height:150px;
  -webkit-animation: brightness 1s infinite;
  animation: brightness 1s infinite;
  transform: translateZ(0);
}
  
}