/**************************************************
*共通
************************************************** */
body {
    font-family:'メイリオ', 'Meiryo', sans-serif;
    height: 100%;
}
#header {
    width: 100%;
}
.wrapper {
    text-align: left;
}
.flexbox{
   display: flex;
}
#header .heading_name {
    padding: 20px 16px;
    line-height: 1px;
    border-bottom: 5px #e1e1e8 solid;
}
#container{
	width: 70%;
        margin: auto;
}
#content{
    text-align: center;
}
.footer_scr{
    width: 100%;
    height: 60px;
}
p {
    margin-bottom: 1px;
}
.error-message{
    color: red;
}
.message{
    text-align: center;
    color: red;
}
.form-control{
    width: 100px;
    margin: auto;
}
/**************************************************
*User login
************************************************** */
.login_form{
    width:500px;
    margin: 130px auto auto;
    text-align: center;
}
#UserLoginForm{
    padding: 0 50px;
}
/**************************************************
*User index
************************************************** */
.c40px {
    width: 40px;
    text-align: center;
    white-space: nowrap;
}
.index_form{
    text-align: center;
    margin-top: 100px;
}
/**************************************************
*User delete
************************************************** */
.delete_form{
    margin: auto;
    margin-top: 100px;
    width: 500px;
    text-align: center;
}
/**************************************************
*User edit
************************************************** */
.edit_form{
    margin: auto;
    margin-top: 100px;
    width: 500px;
    text-align: center;
}
.input-select{
    width: 400px;
    display: flex;
    margin: auto;
    padding: 10px;
}
#UserUserid,#UserUsername,#UserPassword,#UserEmail,#department_id,#position_id,#UserJoinDate{
    width: 190px;
    height: 40px;
    background: white;
    border: #6c757d solid 1px;
    border-radius: 4px;
    margin-bottom: 20px
}
/**************************************************
*User add
************************************************** */
.add_form{
    width: 500px;
    text-align: center;
    margin: auto;
    margin-top: 100px; 
}
/**************************************************
*TimecardDatas index
************************************************** */
.index_form2{
    text-align: center;
    margin-top: 50px;
}
.contents_top{
    font-size: 40px;
}
.login_user_name{
    text-align: right;
    font-size: 0.875rem;   
}
.submit{
    margin: 0px 30px;
}
.index_select{
    margin: auto 30px;
}
.s_select{
    border: solid 1px #6c757d;
    color: #6c757d;
    border-radius: 4px;
    background: #fff;
    width: 180px;
}
tr:nth-child(2n) td {
    background: white;
}
#ui-datepicker-div td {
    background: black;
}
th{
    position: sticky;
    top: 0;
    padding: 0px 0px 0px 4px;
    font-size: 15px;
    height: 40px;
    vertical-align: inherit;
    background-clip: padding-box;
    background: white;
}
#ui-datepicker-div th {
    background: black;
}
th::before{
    content : "" ;
    position : absolute ;
    top : 0 ;
    left : 0 ;
    width : 100% ;
    height : 100% ;
    border-top: 0px solid #333333;
    border-bottom: 2px solid #333333;
}
td {
    color: #333333;
    font-size: 15px;
    border-bottom: 1px solid #e1e1e8;
    padding-left: 4px;
    padding-right: 4px;
}
.c40px{width:40px;text-align:center;white-space:nowrap;}
.l40px{width:40px;text-align:left;white-space:nowrap;}
.r40px{width:40px;text-align:right;white-space:nowrap;}
.c50px{width:50px;text-align:center;white-space:nowrap;}
.l50px{width:50px;text-align:left;white-space:nowrap;}
.r50px{width:50px;text-align:right;white-space:nowrap;}
.c60px{width:60px;text-align:center;white-space:nowrap;}

.l60px{width:60px;text-align:left;white-space:nowrap;}
.r60px{width:60px;text-align:right;white-space:nowrap;}
.c70px{width:70px;text-align:center;white-space:nowrap;}
.l70px{width:70px;text-align:left;white-space:nowrap;}
.r70px{width:70px;text-align:right;white-space:nowrap;}
.c80px{width:80px;text-align:center;white-space:nowrap;}
.cY80px{width:80px;background-color:yellow!important;text-align:center;white-space:nowrap;}
.cRed80px{width:80px;background-color:pink!important;text-align:center;white-space:nowrap;}
.cRed80px2{width:80px;color:red;font-weight: bold;text-align:center;white-space:nowrap;}
.c80px2{width:80px;text-align:center;}
.l80px{width:80px;text-align:left;white-space:nowrap;}
.r80px{width:80px;text-align:right;white-space:nowrap;}
.c90px{width:90px;text-align:center;white-space:nowrap;}
.c90px2{width:90px;text-align:center;}
.l90px{width:90px;text-align:left;white-space:nowrap;}
.r90px{width:90px;text-align:right;white-space:nowrap;}
.c100px{width:100px;text-align:center;white-space:nowrap;}
.c100px2{width:100px;text-align:center;font-size:10px;}
.l100px{width:100px;text-align:left;white-space:nowrap;}
.r100px{width:100px;text-align:right;white-space:nowrap;}
.c110px{width:110px;text-align:center;white-space:nowrap;}
.c110px2{width:110px;text-align:center;font-size:10px;}
.l110px{width:110px;text-align:left;white-space:nowrap;}
.r110px{width:110px;text-align:right;white-space:nowrap;}
.c120px{width:120px;text-align:center;white-space:nowrap;}
.cY120px{width:120px;background-color:yellow!important;text-align:center;white-space:nowrap;}
.cRed120px{width:120px;background-color:pink!important;text-align:center;white-space:nowrap;}
.cRed120px2{width:120px;color:red!important;font-weight: bold!important;text-align:center;white-space:nowrap;}
.c120px2{width:120px;text-align:center;font-size:10px;}
.l120px{width:120px;text-align:left;white-space:nowrap;}
.r120px{width:120px;text-align:right;white-space:nowrap;}
.c130px{width:130px;text-align:center;white-space:nowrap;}
.l130px{width:130px;text-align:left;white-space:nowrap;}
.r130px{width:130px;text-align:right;white-space:nowrap;}
.c140px{width:140px;text-align:center;white-space:nowrap;}
.l140px{width:140px;text-align:left;white-space:nowrap;}
.r140px{width:140px;text-align:right;white-space:nowrap;}
.c150px{width:150px;text-align:center;white-space:nowrap;}
.l150px{width:150px;text-align:left;white-space:nowrap;}
.r150px{width:150px;text-align:right;white-space:nowrap;}
.c160px{width:160px;text-align:center;white-space:nowrap;}
.l160px{width:160px;text-align:left;white-space:nowrap;}
.r160px{width:160px;text-align:right;white-space:nowrap;}
.c170px{width:170px;text-align:center;white-space:nowrap;}
.l170px{width:170px;text-align:left;white-space:nowrap;}
.r170px{width:170px;text-align:right;white-space:nowrap;}
.c180px{width:180px;text-align:center;white-space:nowrap;}
.l180px{width:180px;text-align:left;white-space:nowrap;}
.r180px{width:180px;text-align:right;white-space:nowrap;}
.c190px{width:190px;text-align:center;white-space:nowrap;}
.l190px{width:190px;text-align:left;white-space:nowrap;}
.r19px{width:190px;text-align:right;white-space:nowrap;}
.c200px{width:200px;text-align:center;white-space:nowrap;}
.l200px{width:200px;text-align:left;white-space:nowrap;}
.r200px{width:200px;text-align:right;white-space:nowrap;}
.c210px{width:210px;text-align:center;white-space:nowrap;}
.l210px{width:210px;text-align:left;white-space:nowrap;}
.r210px{width:210px;text-align:right;white-space:nowrap;}
.c220px{width:220px;text-align:center;white-space:nowrap;}
.l220px{width:220px;text-align:left;white-space:nowrap;}
.r220px{width:220px;text-align:right;white-space:nowrap;}
.c230px{width:230px;text-align:center;white-space:nowrap;}
.l230px{width:230px;text-align:left;white-space:nowrap;}
.r230px{width:230px;text-align:right;white-space:nowrap;}
.c240px{width:240px;text-align:center;white-space:nowrap;}
.l240px{width:240px;text-align:left;white-space:nowrap;}
.r240px{width:240px;text-align:right;white-space:nowrap;}
.c250px{width:250px;text-align:center;white-space:nowrap;}
.l250px{width:250px;text-align:left;white-space:nowrap;}
.r250px{width:250px;text-align:right;white-space:nowrap;}
.c260px{width:260px;text-align:center;white-space:nowrap;}
.l260px{width:260px;text-align:left;white-space:nowrap;}
.r260px{width:260px;text-align:right;white-space:nowrap;}
.c270px{width:270px;text-align:center;white-space:nowrap;}
.l270px{width:270px;text-align:left;white-space:nowrap;}
.r270px{width:270px;text-align:right;white-space:nowrap;}
.c280px{width:280px;text-align:center;white-space:nowrap;}
.l280px{width:280px;text-align:left;white-space:nowrap;}
.r280px{width:280px;text-align:right;white-space:nowrap;}
.c290px{width:290px;text-align:center;white-space:nowrap;}
.l290px{width:290px;text-align:left;white-space:nowrap;}
.r290px{width:290px;text-align:right;white-space:nowrap;}
.c300px{width:300px;text-align:center;white-space:nowrap;}
.l300px{width:300px;text-align:left;white-space:nowrap;}
.r300px{width:300px;text-align:right;white-space:nowrap;}
.c400px{width:400px;text-align:center;white-space:nowrap;}
.l400px{width:400px;text-align:left;white-space:pre-line;}
.r400px{width:400px;text-align:right;white-space:nowrap;}

.logout{
    text-align: right;
    font-size: 0.875rem;
}

/**************************************************
*TimecardDatas edit
************************************************** */
.edit_form2{
    text-align: center;
    margin-top: 100px;
}
#remarks,
#TimecardDataHour,
#TimecardDataMin,
#TimecardDataClassificationData{
    border: solid 1px #6c757d;
    color: #333333;
    background-color: white;
    margin-bottom: 0px;
    border-radius: 4px;
}
#TimecardDataClassificationData{
    font-size: 0.775rem;
}
.remarks_text{
    display: flex;
    margin-left: auto;
    margin-right: auto;
}
.box5 {
    padding: 0.5em 1em;
    margin: auto;
    border-top: solid 5px #e1e1e8;
    border-bottom: solid 5px #e1e1e8;
    width: 300px;
    
}
.box5 p {
    margin: 0; 
    padding: 0;
}
/**************************************************
*TimecardDatas add
************************************************** */
.add_form2{
    text-align: center;
    margin-top: 100px;
}
.circle_btn {
    color: white;
    position: absolute;
    top: 60%;
    left: 42%;
}
.date_time{
    font-size: 60px;
}

/*********************************************
台帳のメインDIVの幅指定
*/
.daicyo_div {
    max-width: 1800px!important;
}
table th ,td {
   
    }
     
/*　スクロールバーの実装 */
.table_sticky {
    display: block;
    overflow-y: scroll;
    height: calc(100vh/2);
    border-collapse: collapse;
}
.table_sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
   
}

.div_center {
  margin: 0 auto;
}