/*
  body{
    background-color:#f2f3f5;
    margin:30px;
  }
  */
  
  .a_style{
    
    form, table{
      border-radius:10px;
    }
    
    form{
      position:relative;
      border:solid 2px #c0c0c0aa;
      margin:10px;
      padding:10px;
    }
    
    .contentpanel{
      padding:30px;
    }
    
    
    .container{
      width:100%;
      padding:20px 30px 30px 30px;
      box-sizing: border-box;
      border:solid 2px #d5d5d5;
      border-radius:8px;
      background-color:#fbfbfb;
      
      overflow: auto;
    }
    
    .contentpanel table,
    .container table{
      white-space: pre;
    }
    .contentpanel table{
      & tr{
        /*display: table;*/
      }
      
      &{
        /* display: table;*/
        display: block;
        width: 100%;
        max-height: calc(80vh - 100px);
      }
      &>tbody{
        display: table;
        width: 100%;
        box-sizing: border-box;
      }
      &,
      & :is(td,th){
        border: solid 1px #c0c0c0aa;
      }
      &, & :is(td,th){
        border-collapse:collapse;
      }
      /*
      */
      tr:last-of-type :is(td,th){
        border-bottom-width :0;
      }
      tr:first-of-type :is(td,th){
        border-top-width :0;
      }
      :is(td,th):first-of-type{
        border-left-width :0;
      }
      :is(td,th):last-of-type{
        border-right-width :0;
      }
    }
    .container h1{
      
      color:#2260cd;
      
      font-size: 1.17em;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      font-weight: bold;
    }
    form input{
      /*margin:10px;*/
    }
    form>div>subject{
      font-weight:bold;
    }
    form>div{
      margin-top:20px;
    }
    input,select,button,textarea{
      min-width:100px;
    }
    input[type='checkbox'], input[type='radio']{
      min-width:revert;
    }
    /*form>div>input, form>div>select, button{*/
    form input, form select, button, textarea{
      /*display:block;*/
      width:100%;
      
      box-sizing: border-box;
      
      padding: 10px;
      border-radius: 8px;
      border: solid 1px #d5d5d5;
    }
    form>div>input[type=submit],form button
    {
      background-color:#2260cd;
      color:#fbfbfb;
      font-weight:bold;
    }
    form>div>input[type=submit]:hover,form button:hover{
      background-color:#2c6cdc;
    }
    form>div>input[type=color]{
      height:50px;
      padding:7px;
    }
    select{
      /* appearance: none; */
      /* -webkit-appearance: none; */
    }
    
    /* Checkbox */
    input[type="checkbox"]{
      position:relative;
      width:25px;
      height:25px;
      margin-right:5px;
      vertical-align: middle;
    }
    input[type="checkbox"]:before{
      content: "";
      position: absolute;
      display: block;
      background-color:#eeeeee;
      width:100%;
      height:100%;
    }
    label:hover>input[type="checkbox"]:before{
      background-color:#cccccc;
    }
    label>input[type="checkbox"]:checked:before{
      background-color:#2196f3;
    }
    input[type="checkbox"]:after{
      transition:all 0.3s;
      content: "";
      position: absolute;
      display: block;
      
      
      background-color: transparent;
      
      left: 9px;
      top: 5px;
      width: 5px;
      height: 10px;
      border: solid transparent;
      border-width: 0 3px 3px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    input[type="checkbox"]:checked:after{
      border-color:white;
    }
    
    /* Radio 2 */
    input[type="radio"]{
      position:relative;
      width:25px;
      height:25px;
      margin-right:5px;
      vertical-align: middle;
    }
    input[type="radio"]:before{
      content: "";
      position: absolute;
      display: block;
      background-color:#eeeeee;
      width:100%;
      height:100%;
      border-radius:100%;
    }
    label:hover>input[type="radio"]:before{
      background-color:#cccccc;
    }
    label>input[type="radio"]:checked:before{
      background-color:#2196f3;
    }
    /*
    input[type="radio"]:after{
      content: "";
      position: absolute;
      display: block;
      
      
      background-color: transparent;
      
      left: 9px;
      top: 5px;
      width: 5px;
      height: 10px;
      border: solid transparent;
      border-width: 0 3px 3px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    */
    input[type="radio"]:after{
      transition:all 0.3s;
      content: "";
      position: absolute;
      display: block;
      
      left: 0px;
      right: 0px;
      top:0px;
      bottom:0px;
      margin:auto;
      
      
      background-color: transparent;
      width: 9px;
      height: 9px;
      border-radius:100%;
    }
    input[type="radio"]:checked:after{
      background-color: white;
      border-color:white;
    }
    
    
    
    /* Radio */
    /*
    input[type="radio"] {
        background-color: cadetblue;
        background-image: -webkit-linear-gradient(0deg, transparent 20%, hsla(0,0%,100%,.7), transparent 80%),
                          -webkit-linear-gradient(90deg, transparent 20%, hsla(0,0%,100%,.7), transparent 80%);
        border-radius: 10px;
        box-shadow: inset 0 1px 1px hsla(0,0%,100%,.8),
                    0 0 0 1px hsla(0,0%,0%,.6),
                    0 2px 3px hsla(0,0%,0%,.6),
                    0 4px 3px hsla(0,0%,0%,.4),
                    0 6px 6px hsla(0,0%,0%,.2),
                    0 10px 6px hsla(0,0%,0%,.2);
        cursor: pointer;
        display: inline-block;
        height: 15px;
        margin-left: 5px;
        margin-right: 5px;
        position: relative;
        width: 15px;
        -webkit-appearance: none;
    }
    input[type="radio"]:after {
        background-color: #444;
        border-radius: 25px;
        box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.4),
                    0 1px 1px hsla(0,0%,100%,.8);
        content: '';
        display: block;
        height: 7px;
        left: 4px;
        position: relative;
        top: 4px;
        width: 7px;
    }
    input[type="radio"]:checked:after {
        background-color: #f66;
        box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.4),
                    inset 0 2px 2px hsla(0,0%,100%,.4),
                    0 1px 1px hsla(0,0%,100%,.8),
                    0 0 2px 2px hsla(0,70%,70%,.4);
    }
    
    .radio{
      margin-right:10px;
    }
    */
    
    
    /* Select */
    select.focus{
      /* -webkit-focus-ring-color = '#5B9DD9' */
      outline: -webkit-focus-ring-color auto 5px;
    }
    select+selectlist{
      opacity:0;
      display:none;
    }
    /*select:focus+selectlist,*/
    select.focus+selectlist
    {
      opacity:1;
      display:block;
    }
    selectlist:focus {
      outline: none;
    }
    selectlist{
      background-color:#efefef;
      border: solid 1px #bbbbbb;
      display:block;
      max-width:100%;
      position:absolute;
      z-index:1;
      border-radius:5px;
      
      max-height:300px;
      overflow-y:auto;
      user-select: none;
    }
    selectlist>optionx.sel{
      color:#c8c8c8;
      background-color:#1e56b7;
    }
    selectlist>optionx:hover{
      color:#d5d5d5;
      background-color:#2260cd;
      cursor:pointer;
    }
    selectlist>optionx{
      transition:all 0.2s;
      padding:9px 18px 9px 18px;
      display:block;
    }
    selectlist>optionx img{
      height:20px;
      max-width:35px;
      /* vertical-align: sub; */
      position:absolute;
      left:10px;
    }
    selectlist>optionx[icon]{
      padding:9px 18px 9px 53px;
    }
  }