body {
 font-size: 12px;
}

hr {
 page-break-after: always;
 border: none;
}

table {
 border: 2px gray solid; 
}

th.title {
 padding : 5px 25px 5px;
 text-align: center;
 letter-spacing: 4px;
 background-color: #aaaaaa;
 border: 2px gray solid; 
}

img#tsrlogo {
 width: 80px;
 margin-left: 5px;
 align: left;
}

div.w640 {
 padding-top 10px;
 margin: 0 auto;
 width: 640px;
 border: 1px solid #77f;
}

div#main-title {
 // width: 1200px;
 // font-size: 20px;
 text-align: center;
 border-bottom: 4px solid #77f;
 background:-webkit-gradient(linear, left top, right bottom, from(#ccf), to(#fff));
 background:-moz-linear-gradient(left, #ccf, #fff);
 background:linear-gradient(left, #ccf, #fff);
}

table#main-title {
 //width: 1200px;
 border: 0px;
}

td#logo {
 width: 80px;
 height: 60px;
}

td#title {
 height: 60px;
}

span#title {
 letter-spacing: 10px;
 margin-left:450px;
 font-size: 18px;
}

td#infomation {
 height: 60px;
 text-align: right;
}

span#company {
 font-size: 12px;
}

span#restricted {
 font-size: 12px;
}

span#createddate {
 font-size: 12px;
}

div#clear {
 clear:both;
}

div#internaluseonly {
 text-align: right;
 margin-right: 15px;
 font-size: 12px;
 clear:both;
}

div#selecterCount {
 text-align: right;
 //width: 1200px;
 margin-right: 15px;
 font-size: 14px;
}

div#sitelink {
 text-align: right;
 //width: 1200px;
 margin-right: 15px;
 font-size: 14px;
}

div#logout {
 text-align: right;
 margin-right: 0px;
 font-size: 12px;
 float: right;
}

p.rText {
 text-align: right;
}

/* 基本情報 */
table {
 border: 2px solid #000000;
 margin: 5px;
 font-size: 12px;
} 

td#userid {
 padding: 3px;
 width: 80px;
 text-align: center;
 background-color: #cccccc;
 border-left-width :2px;
 border-bottom-width :2px;
}

td#userid-v {
 padding: 3px;
 width: 80px;
 text-align: center;
 border-bottom-width :2px;
}

td#appeal {
 padding: 3px;
 padding-left:5px;
 text-align: left;
 border-left-width :2px;
 border-right-width :2px;
 border-bottom-width :2px;
}

td#sex {
 padding: 3px;
 width: 80px;
 text-align: center;
 background-color: #cccccc;
 border-bottom-width :2px;
}

td#sex-v {
 padding: 3px;
 width: 80px;
 text-align: center;
 border-bottom-width :2px;
}

td#exp {
 padding: 3px;
 width: 80px;
 text-align: center;
 background-color: #cccccc;
 border-bottom-width :2px;
}

td#exp-v {
 padding: 3px;
 width: 80px;
 text-align: center;
 border-bottom-width :2px;
}

td#hiredate {
 display:none;
 padding: 3px;
 width: 80px;
 text-align: center;
 background-color: #cccccc;
 border-bottom-width :2px;
}

td#hiredate-v {
 display:none;
 padding: 3px;
 width: 120px;
 text-align: center;
 border-bottom-width :2px;
}

td#nearest {
 padding: 3px;
 width: 80px;
 text-align: center;
 background-color: #cccccc;
 border-bottom-width :2px;
}

td#nearest-v {
 padding: 3px;
 padding-left:5px;
 width: 540px;
 text-align: left;
 border-right-width :2px;
 border-bottom-width :2px;
}

td#age {
 padding: 3px;
 width: 80px;
 text-align: center;
 background-color: #cccccc;
 border-bottom-width :2px;
}

td#age-v {
 padding: 3px;
 width: 80px;
 text-align: center;
 border-bottom-width :2px;
}

td#qu {
 padding: 3px;
 width: 80px;
 text-align: center;
 background-color: #cccccc;
 border-top-width :2px;
 border-left-width :2px;
 border-bottom-width :2px;
}

td#qu-v {
 padding: 3px;
 padding-left:5px;
 text-align: left;
 border-top-width :2px;
 border-bottom-width :2px;
 border-right-width :2px;
}

/* プロジェクト概要 */
table#project {
 border: 2px solid #000000; 
 table-layout:fixed;
}

th.pnumber {
 padding: 3px;
 width: 40px;
 text-align: center;
 background-color: #cccccc;
 border-bottom-width :2px;
 border-left-width :2px;
}

td.project {
 padding: 3px;
 width: 120px;
 height: 25px;
 text-align: center;
 background-color: #cccccc;
}

td.project-v {
 padding: 3px;
 padding-left:5px;
 width: 450px;
 height: 25px;
 background-color: #ffffff;
}


td.position {
 padding: 3px;
 width: 120px;
 height: 25px;
 text-align: center;
 background-color: #cccccc;
}

td.position-v {
 padding: 3px;
 padding-left:5px;
 width: 180px;
 height: 15px;
 text-align: left;
 background-color: #ffffff;
}

td.role {
 padding: 3px;
 width: 120px;
 height: 15px;
 text-align: center;
 background-color: #cccccc;
}

td.role-v {
 padding: 3px;
 padding-left:5px;
 height: 15px;
 width: 450px;
 background-color: #ffffff;
}

td.product {
 padding: 3px;
 width: 120px;
 height: 15px;
 text-align: center;
 background-color: #cccccc;
 border-bottom-width :2px;
}

td.product-v {
 padding: 3px;
 padding-left:5px;
 width: 700px;
 height: 15px;
 background-color: #ffffff;
 border-bottom-width :2px;
}

td.startdate {
 padding: 3px;
 width: 120px;
 height: 15px;
 text-align: center;
 background-color: #cccccc;
}

td.enddate {
 padding: 3px;
 width: 120px;
 height: 15px;
 text-align: center;
 background-color: #cccccc;
}

td.period {
 padding: 3px;
 width: 120px;
 height: 15px;
 text-align: center;
 background-color: #cccccc;
}

td.ddate-v {
 padding: 3px;
 width: 120px;
 height: 15px;
 text-align: center;
 background-color: #ffffff;
 border-right-width :2px;
}

td.bdate-v {
 padding: 3px;
 width: 120px;
 height: 15px;
 text-align: center;
 background-color: #ffffff;
 border-right-width :2px;
 border-bottom-width :2px;
}

td.responsive {
 width: 120px;
 height: 15px;
}

td.responsive-v {
 width: 450px;
 height: 15px;
 padding-left:5px;
}

/* プロジェクト詳細 */
table#project {
 border: 2px solid #000000; 
}

td.pname {
 width: 120px;
 text-align: center;
 height: 25px;
 background-color: #cccccc;
 border-left-width :2px;
}

td.pname-v {
 padding-left:5px;
 height: 25px;
 width: 800px;
 background-color: #ffffff;
}

td.tanto {
 text-align: center;
 height: 25px;
 background-color: #cccccc;
 border-left-width :2px;
}

td.tanto-v {
 padding: 3px;
 padding-left:5px;
 width: 800px;
 height: 25px;
 background-color: #ffffff;
}

td.sdate {
 padding: 3px;
 width: 80px;
 height: 25px;
 text-align: center;
 background-color: #cccccc;
}

td.sdate-v {
 padding: 3px;
 width: 120px;
 height: 15px;
 text-align: center;
 background-color: #ffffff;
 border-right-width :2px;
}

td.edate {
 padding: 3px;
 width: 80px;
 height: 25px;
 text-align: center;
 background-color: #cccccc;
}

td.edate-v {
 padding: 3px;
 width: 120px;
 height: 15px;
 text-align: center;
 background-color: #ffffff;
 border-right-width :2px;
}

td.pdate {
 padding: 3px;
 width: 80px;
 height: 25px;
 text-align: center;
 background-color: #cccccc;
}

td.epdate-v {
 padding: 3px;
 width: 120px;
 height: 15px;
 text-align: center;
 background-color: #ffffff;
 border-right-width :2px;
}

td.yakuwari {
 text-align: center;
 background-color: #cccccc;
 border-left-width :2px;
}

td.yakuwari-v {
 padding: 3px;
 padding-left: 5px;
 width: 600;
 height: 25px;
 text-align: left;
 background-color: #ffffff;
}

td.kibo {
 padding: 3px;
 width: 80px;
 height: 25px;
 text-align: center;
 background-color: #cccccc;
}

td.kibo-v {
 padding: 3px;
 width: 240px;
 height: 15px;
 text-align: center;
 background-color: #ffffff;
}

td.gyoshu {
 padding: 3px;
 width: 80px;
 height: 25px;
 text-align: center;
 background-color: #cccccc;
}

td.gyoshu-v {
 padding: 3px;
 width: 240px;
 height: 15px;
 text-align: center;
 background-color: #ffffff;
}

td.detail {
 width: 720px;
 padding-left: 10px;
 text-align: justify;
 height: 25px;
 border-left-width :2px;
 background-color: #cccccc;
}

td.tool {
 width: 200px;
 padding-left: 10px;
 text-align: justify;
 height: 25px;
 background-color: #cccccc;
}

td.document {
 width: 200px;
 padding-left: 10px;
 text-align: justify;
 height: 25px;
 background-color: #cccccc;
 border-right-width :2px;
}

td.tool-v {
 width: 200px;
 padding: 3px;
 padding-left: 5px;
 text-align: left;
 vertical-align: top;
 background-color: #ffffff;
 border-bottom-width :2px;
}

td.detail-v {
 padding: 3px;
 padding-left: 5px;
 text-align: left;
 vertical-align: top;
 background-color: #ffffff;
 border-bottom-width :2px;
 border-left-width :2px;
}

td.document-v {
 padding: 3px;
 padding-left: 5px;
 text-align: left;
 vertical-align: top;
 background-color: #ffffff;
 border-bottom-width :2px;
 border-right-width :2px;
}

td.startdate {
 padding: 3px;
 width: 60px;
 height: 25px;
 text-align: center;
 background-color: #cccccc;
}

td.startdate-v {
 padding: 3px;
 width: 240px;
 height: 15px;
 text-align: center;
 background-color: #ffffff;
 border-right-width :2px;
}

td.enddate {
 padding: 3px;
 width: 60px;
 height: 25px;
 text-align: center;
 background-color: #cccccc;
}

td.enddate-v {
 padding: 3px;
 width: 240px;
 height: 15px;
 text-align: center;
 background-color: #ffffff;
 border-right-width :2px;
}

td.period {
 padding: 3px;
 width: 60px;
 height: 25px;
 text-align: center;
 background-color: #cccccc;
 border-bottom-width :2px;
}

td.period-v {
 padding: 3px;
 width: 240px;
 height: 25px;
 text-align: center;
 background-color: #cccccc;
 border-bottom-width :2px;
 border-right-width :2px;
}

/* スキル */
table.skill {
 border: 2px solid #000000; 
 //width: 1200px;
 margin: 5px;
 font-size: 12px;
} 

td.catergory {
 padding: 3px;
 padding-left: 5px;
 width: 160px;
 height: 25px;
 text-align: left;
 border-left-width :2px;
}

td.subCatergory {
 padding: 3px;
 padding-left: 5px;
 width: 160px;
 height: 25px;
 text-align: left;
}

td.skillName {
 padding: 3px;
 padding-left: 5px;
 width: 320px;
 height: 25px;
 text-align: left;
}

td.skill {
 padding: 3px;
 width: 40px;
 height: 25px;
 text-align: center;
}

td.skill-k {
 padding: 3px;
 width: 40px;
 height: 25px;
 text-align: center;
 border-right-width :2px;
}

td.skill-t {
 padding: 3px;
 width: 40px;
 height: 25px;
 letter-spacing: 3px;
 text-align: center;
 background-color: #cccccc;
}

td.skill-lt {
 padding: 3px;
 width: 40px;
 height: 25px;
 letter-spacing: 3px;
 text-align: center;
 background-color: #cccccc;
 border-left-width :2px;
}

td.skill-kt {
 padding: 3px;
 width: 40px;
 height: 25px;
 letter-spacing: 3px;
 text-align: center;
 background-color: #cccccc;
 border-right-width :2px;
}

td.skill-tc {
 font-size: 10px;
 padding: 3px;
 width: 40px;
 height: 25px;
 text-align: center;
 background-color: #cccccc;
}

td.skillDetail {
 font-size: 10px;
 padding-right: 8px;
 height: 20px;
 text-align: right;
 border-left-width :2px;
 border-bottom-width :2px;
 border-right-width :2px;
}

/* 資格情報 */
table#shikaku {
 border: 2px solid #000000; 
}

td.dantai {
 padding: 3px;
 width: 120px;
 height: 25px;
 text-align: center;
 background-color: #cccccc;
}

td.dantai-v {
 padding: 3px;
 padding-left: 5px;
 height: 25px;
 text-align: left;
 background-color: #ffffff;
}

td.bunrui {
 padding: 3px;
 width: 120px;
 height: 25px;
 text-align: center;
 background-color: #cccccc;
}

td.bunrui-v {
 padding: 3px;
 padding-left: 5px;
 height: 25px;
 text-align: left;
 background-color: #ffffff;
}

td.shikaku {
 padding: 3px;
 height: 25px;
 text-align: center;
 background-color: #cccccc;
}

td.shikaku-v {
 padding: 3px;
 padding-left: 5px;
 height: 25px;
 text-align: left;
 background-color: #ffffff;
}

td.shutoku {
 padding: 3px;
 width: 120px;
 height: 25px;
 text-align: center;
 background-color: #cccccc;
}

td.shutoku-v {
 padding: 3px;
 padding-left: 5px;
 height: 25px;
 text-align: center;
 background-color: #ffffff;
}

//ユーザーリスト
table.userList {
 border: 0px;
 margin: 0 auto;
 width: 640px;
}

th.userList {
}

tr.userListTop {
  background-color: #ccf;
}

tr.userListData {
  background-color: #fff;
}

td.userListName {
 padding-left: 5px;
}

td.userListDispCount {
 text-align: center;
}

td.userListCheckBox {
 text-align: center;
}

tr.userListData:nth-child(2n+1){
  background: #eee;
}


.middle {
 vertical-align:middle;
}

//スキルインプットフォーム
table#skInput {
    width: auto;
    border: 1px solid #eeeeee;
    border-collapse: collapse;
    border-spacing: 0;
}

th.skInput {
    color: #fff;
    padding: 5px;
    border-bottom: 1px solid #eeeeee;
    border-left: 1px solid #eeeeee;
    background: #4682B4;
    font-weight: bold;
    text-align: center;
}

td.skInput {
    padding: 3px;
    border-bottom: 1px solid #eeeeee;
    border-left: 1px solid #eeeeee;
}

td.center {
    text-align:center;
}

th.left {
    text-align:left;
}

tr.skInput:nth-child(2n+1) {
    background: #eeeeee;
}

input.logout {
    margin: 3px;
    align: left;
}

/* ログインフォーム */
div#login {
  margin: 0 auto;
  width: 400px;
  height: 200px:
  text-align: center;
  border: 1px solid #ccf;
  padding: 20px;
  padding-top: 3px;
  text-align: center;

}

h3#login {
  text-align: center;
  font-size: 20px;
  border-top: 4px solid #77f;
  border-bottom: 4px solid #77f;
  background:-webkit-gradient(linear, left top, right bottom, from(#ccf), to(#fff));
  background:-moz-linear-gradient(left, #ccf, #fff);
  background:linear-gradient(left, #ccf, #fff);
  height: 20px:
}

div#footer {
  font-style: italic;
  border-bottom: 4px solid #77f;
  border-top: 1px solid #77f;
  text-align: right;
}

img.icon {
  padding: 5px;
  width: 32px;
  height: 32px;
  vertical-align:middle;
}

#menu div {
  position: relative;
}

.arrow_box {
  display: none;
  position: absolute;
  padding: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;  
  border-radius: 8px;
  background: #777;
  color: #fff;
  width: 300px;
}

.arrow_box:after {
  position: absolute;
  bottom: 100%;
  left: 25px;
  width: 0;
  height: 0;
  margin-left: -10px;
  border: solid transparent;
  border-color: rgba(51, 51, 51, 0);
  border-bottom-color: #777;
  border-width: 10px;
  pointer-events: none;
  content: " ";
}

span:hover + p.arrow_box {
  display: block;
}

//評価インプットフォーム
table#paInput {
    width: auto;
    border: 1px solid #eeeeee;
    border-collapse: collapse;
    border-spacing: 0;
}

th.paInput {
    color: #fff;
    padding: 5px;
    border-bottom: 1px solid #eeeeee;
    border-left: 1px solid #eeeeee;
    background: #4682B4;
    font-weight: bold;
    text-align: center;
}

td.paCount {
    padding: 3px;
    border-bottom: 1px solid #eeeeee;
    border-left: 1px solid #eeeeee;
    width: 3em;
}

td.paConcept {
    padding: 3px;
    border-bottom: 1px solid #eeeeee;
    border-left: 1px solid #eeeeee;
    width: 12em;
}

td.paAbility {
    padding: 3px;
    border-bottom: 1px solid #eeeeee;
    border-left: 1px solid #eeeeee;
    width: 14em;
}

td.paLevel {
    padding: 3px;
    text-align: center;
    border-bottom: 1px solid #eeeeee;
    border-left: 1px solid #eeeeee;
    width: 5em;
}

td.paRadio {
    padding: 3px;
    text-align: center;
    border-bottom: 1px solid #eeeeee;
    border-left: 1px solid #eeeeee;
    width: 10em;
}

td.paBody {
    padding: 3px;
    border-bottom: 1px solid #eeeeee;
    border-left: 1px solid #eeeeee;
}

td.paComment {
    padding-left: 3px;
    border-bottom: 1px solid #eeeeee;
    border-left: 1px solid #eeeeee;
    font-size: 0.8em;
}

tr.paInput:nth-child(2n+1) {
    background: #eeeeee;
}

textarea.paTextAreaTarget {
    width: 580px;
    min-height: 2em;
}

textarea.paTextAreaLeader {
    width: 580px;
    min-height: 2em;
}

textarea.paTextAreaManage {
    width: 580px;
    min-height: 2em;
}

input[type="radio"],input[type="checkbox"]{
  position: relative;
  top: 2px;
  font-size: 0.9em;
}

.outline {
    opacity: 0;
}

.loading {
    left:40%;
    top:40%; 
    position: fixed;
}

/* タブ切り替え */
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:20px 0;
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #325A8C;
  display: block;
  order: -1;
}
.tab-label {
  color: White;
  background: LightGray;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
}
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
.tab-switch:checked+.tab-label {
  background: #325A8C;
}
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 2px 0px;
  opacity: 1;
  transition: .5s opacity;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.tab-switch {
  display: none;
}