/**
	mypage skin css
*/

.mypage .my-control-label{padding: 6px 12px;}
.mypage-img{
    overflow: hidden;
    max-width: 100%;
    border:1px solid #ddd;
}
.mypage-img-c {
	width: 200px;
	height: 200px;
	border-radius: 50%;
    margin: 0 auto;
}
.mypage-img-h {
	width: 320px;
	height: 200px;
	
}
.mypage-img-v {
	width: 200px;
	height: 280px;
}
.mypage-img img{
	position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.form-group label, .form-group {
	font-size: 16px;
}
.form-control-static{
    padding: 10px 12px;
}
.mypage .table.table-striped th{
	vertical-align: middle;
	white-space: break-space;
}

.inputfile{
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.inputfile + label {
    color: #fff;
    background-color: #2c353c;
    font-weight: 300;
    font-size: 13px;
    margin-top: 10px;
    border-radius: 3px;
    padding: 5px 10px;
    z-index: 9999;
    cursor: pointer;

}
.inputfile-1 + label {
    position: inherit;
    transform: translateX(-50%);
    left:50%;
}


@media screen and (max-width:550px) {
    .col-xs-3.col-sm-3 .mypage-img-v{
      height: 150px;
      min-height: 100px;
    }
    .table-responsive {
        table-layout:fixed;
        width:100%;
        text-align:center;
        border-left: none;
        border-right: none;
      }
      .table-responsive tr{border-top:2px solid #555}
      .table-responsive th { 
        background:#ccc;
      }
      .table-responsive td, .table-responsive th {
        padding:10px 20px;
        border-top:1px solid #ccc;
        word-break:break-all
      }
        /*block*/
        .table-responsive thead {
          display:none;
        }
        .table-responsive tr {
          display:block;
          margin-bottom:10px;
          border-top:none;
        }
        .table-responsive th, .table-responsive td {
            display:block;
            position:relative;
            padding:10px 0;
            padding-left:50% !important;
            width: unset !important;
            border-width:0 0 1px 0;
        }
        .table-responsive th, .table-responsive td:nth-child(7), .table-responsive th, .table-responsive td:last-child{padding-left: 10px !important;}
      
        .table-responsive td:before {
          display:block;
          position:absolute;
          left:0;
          top:0;
          width:50%;
          padding:7px 0;
          font-weight: 600;
        }
        .table-responsive td:nth-child(1):before {content:'차량번호';}
        .table-responsive td:nth-child(2):before {content:'상태';}
        .table-responsive td:nth-child(3):before {content:'차량모델';}
        .table-responsive td:nth-child(4):before {content:'탑승인원';}
        .table-responsive td:nth-child(5):before {content:'연식';}
        .table-responsive td:nth-child(6):before {content:'수정';}
        .table-responsive td.nopost:before{content: none !important;}
      }