body{
    background-color: #F5F5F5;
    min-width: 1280px;
}
 
/* login form */
.admin-login-wrap{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
}
 
.admin-login-wrap > img{
    margin-top : 140px;
}
.admin-login-wrap .login-form {
    background : #fff;
    padding : 30px;
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
    margin-top : 50px;
}
 
.admin-login-wrap .login-form form  h1{
    font-size : 36px;
    font-weight: 700;
    margin-bottom : 30px;
}
 
 
.admin-login-wrap .login-form form label{color: #B9B9B9;}
.admin-login-wrap .login-form form input{
    margin-bottom : 40px;
}
.admin-login-wrap .login-form form button{
    color : #00A99D;
    background : transparent;
    border : 1px solid #00A99D;
    width : 100%;
    height : 60px;
    font-size : 18px;
    font-weight: 700;
    border-radius: 5px;
    transition: 0.3s;
}
 
.admin-login-wrap .login-form form button:hover{
    background : #00A99D;
    color : #fff;
    transform: translateY(-3px);
}
 
 
/* admin layout */
.admin-layout{
    display : flex;
    
}
 
.admin-layout .admin-aside{
    background : #fff;
    width : 300px;
    height : 100vh;
    min-height : 800px;
    border-radius : 0px 50px 50px 0px;
    position : fixed;
    overflow: hidden;
    padding : 0;
}
.admin-layout .admin-aside .admin-nav{
    padding : 20px;
 
}
.admin-layout .admin-aside .admin-nav > img{
    display: block;
    margin: 0 auto;
}
.admin-layout .admin-aside .admin-nav ul{
    margin-top : 80px;
}
.admin-layout .admin-aside .admin-nav ul li a{
    color: #00A99D;
    text-decoration: none;
    font-size : 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
}
.admin-layout .admin-aside .admin-nav ul li a span{
    width : 25px;
    height : 25px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    margin-right : 5px;
}
.admin-layout .admin-aside .admin-nav ul li:first-child a span{
    background-image: url(../images/user-normal.svg);
 
}
.admin-layout .admin-aside .admin-nav ul li:first-child.current a span{
    background-image: url(../images/user-current.svg);
}
 
.admin-layout .utill-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px;
    margin-top : 220px;
}
.admin-layout .utill-btn button{
    width : 100%;
    height : 40px;
    margin-bottom : 20px;
    border-radius: 50px;
    border : 1px solid #00A99D;
    background : transparent;
    color : #00A99D;
    transition: 0.3s;
}
.admin-layout .utill-btn button:hover{
    color : #fff;
    background : #00A99D;
}
.admin-layout .utill-btn a{
    width : 100%;
    height : 40px;
    margin-bottom : 20px;
    border-radius: 50px;
    border : 1px solid #A9B0B5;
    background : transparent;
    color : #A9B0B5;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.admin-layout .admin-aside footer{
    position: absolute;
    bottom : 0;
    padding-bottom : 20px;
    background-color : #00A99D;
    height : 205px;
    width : 100%;
}
.admin-layout .admin-aside footer img{
    position: absolute;
    bottom : 0;
    left : 0;
}
 
.admin-layout .admin-aside footer small{
    position: absolute;
    bottom: 20px;
    color : #fff;
    left : 15px;
 
}
 
.admin-layout .admin-content{
    width : 100%;
    max-width : 1680px;
    min-width: 1280px;
    display: block;
    padding : 30px;
    padding-left : 330px;
}
 
.admin-layout .admin-content .admin-page-title{
    display : flex;
    justify-content: space-between;
    width: 100%;
    
}
.admin-layout .admin-content .admin-page-title h1{
    font-size : 36px;
    font-weight: 700;
}
 
.admin-layout .admin-content .admin-page-title .btn_wrap button:first-child{
    background : #00A99D;
    font-weight: 700;
    color : #fff;
    border: none;
    padding : 10px 20px;
    border-radius: 10px;
    font-size : 18px;
    margin : 8px;
}
.admin-layout .admin-content .admin-page-title .btn_wrap button:last-child{
    background : #000000;
    font-weight: 700;
    color : #fff;
    border: none;
    padding : 10px 20px;
    border-radius: 10px;
    font-size : 18px;
    margin : 8px;
    margin-right : 0;
}
 
/* search wrap */
.admin-layout .admin-content .admin-search{
    margin-top : 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.admin-layout .admin-content .admin-search .admin-search-input{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    background : #fff;
    padding : 20px;
    border-radius: 30px;
    position : relative;
}
.admin-layout .admin-content .admin-search .admin-search-input .search-form input{
    width : 85%;
 
    color : #000;
    padding : 10px 50px 10px 50px;
    font-weight : 700;
    background-color : transparent;
    background-image: url('../images/search.svg');
    background-repeat: no-repeat;
    background-position: 20px center;
    border:  none;
   
}
.admin-layout .admin-content .admin-search .admin-search-input .search-form select{
    background : transparent;
    border : none;
 
}
.admin-layout .admin-content .admin-search .admin-search-input .search-form {
    background : #F1F4F6;
    width : 100%;
    display : flex;
    border-radius: 50px;
    margin-bottom : 10px;
    align-items: center;
}
 
 
.admin-layout .admin-content .admin-search .admin-search-input input::placeholder{
    color : #939CA2;
    font-size : 18px;
    
}
.admin-layout .admin-content .admin-search .admin-search-input .search-result {
    display : flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top : 10px;
    margin-top : 10px;
    border-top : 1px solid #E1E1E1;
}
 
.admin-layout .admin-content .admin-search .admin-search-input .search-result p{
    margin-left : 20px;
    font-size : 18px;
    color: #939CA2;
    font-weight: 600;
}
.admin-layout .admin-content .admin-search .admin-search-input .search-result .btn-wrap{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.admin-layout .admin-content .admin-search .admin-search-input .search-result .btn-wrap .button{
    padding : 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}
.admin-layout .admin-content .admin-search .admin-search-input .search-result .btn-wrap .button:first-child{
    color : #939CA2;
    border : 1px solid #939CA2;
    margin-right: 15px;
    background : transparent;
    transition: .3s;
}
.admin-layout .admin-content .admin-search .admin-search-input .search-result .btn-wrap .button:first-child:hover{
    color : #000;
    border : 1px solid #000;
}
.admin-layout .admin-content .admin-search .admin-search-input .search-result .btn-wrap .button:last-child{
    color : #fff;
    border : 1px solid #00A99D;
    background : #00A99D;
    transition: .3s;
}
 
.admin-layout .admin-content .admin-search .admin-search-input .search-fillter > label{
    font-size : 18px;
    font-weight: 700;
    color : #939CA2;
    margin-bottom : 10px;
    margin-top : 10px;
}
.admin-layout .admin-content .admin-search .admin-search-input .search-fillter .skill-select label {
    margin-top : 0;
    color : #A9B0B5;
}
.admin-layout .admin-content .admin-search .admin-search-input .search-fillter{
    height : 0px;
    transition: 0.5s;
    overflow: hidden;
    opacity: 0;
}
.admin-layout .admin-content .admin-search .admin-search-input .search-fillter.open{
    height : inherit;
    opacity: 1;
}
 
.admin-layout .admin-content .admin-search .admin-search-input .search-form .open-btn{
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-right : 20px;
    margin-left : 20px;
}

.admin-layout .admin-content .admin-search .admin-search-input .search-form .open-btn .help-open-btn{
	position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);    
    background-color: #333;
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 10;
}

.admin-layout .admin-content .admin-search .admin-search-input .search-form .open-btn img{
    width : 20px;
}
 
 
.admin-layout .admin-content .admin-search .admin-search-input .search-fillter li ul{
    display : none;
}
/* card list*/
.admin-layout .admin-content .card-list-wrap{
    margin-top : 20px;
    overflow-y: scroll;
    height : calc(100vh - 180px);
}
 
.admin-layout .admin-content .card-list-wrap .card-list{
    border : 1px solid #00A99D;
    background : #fff;
    padding : 20px 30px 30px 30px;
    border-radius: 30px;
    position : relative;
    margin-bottom : 30px;
}
.admin-layout .admin-content .card-list-wrap .card-list p{font-size : 14px;}
.admin-layout .admin-content .card-list-wrap .card-list .status-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
.admin-layout .admin-content .card-list-wrap .card-list .status-wrap .standard-info{
    display: flex;
    align-items: center;
    margin-top : 5px;
}
.admin-layout .admin-content .card-list-wrap .card-list .status-wrap .standard-info input{
    width : 20px;
    height : 20px;
}
.admin-layout .admin-content .card-list-wrap .card-list .status-wrap .standard-info h3{
    font-size : 26px;
    font-weight: 700;
    margin-left : 15px;
}
.admin-layout .admin-content .card-list-wrap .card-list .status-wrap .btn-group select{
    background : transparent;
    border : none;
    font-size : 24px;
    font-weight: 700;
    color: #939CA2;
}
.admin-layout .admin-content .card-list-wrap .card-list .status-wrap .btn-group select:focus,
.admin-layout .admin-content .card-list-wrap .card-list .status-wrap .btn-group select:active,
.admin-layout .admin-content .card-list-wrap .card-list .status-wrap .btn-group select:hover{
    border: none;
    outline: none;
}
 
.admin-layout .admin-content .card-list-wrap .card-list .engineer-info{
    width : 100%;
    height : 100%;
    margin-top : 15px;
    overflow: hidden;
    transition: .3s;
}
.admin-layout .admin-content .card-list-wrap .card-list.on .engineer-info {
    display : none;
}
.admin-layout .admin-content .card-list-wrap .card-list .engineer-info .tbody{
    border-top : 2px solid #E1E1E1;
    display: flex;
    flex-wrap: wrap;
}
 
.admin-layout .admin-content .card-list-wrap .card-list .engineer-info .tbody .tr{
    border-bottom : 1px solid #E1E1E1;
    line-height : 40px;
    display: flex;
    width: 100%;
}
 
.admin-layout .admin-content .card-list-wrap .card-list .engineer-info .tbody .tr .td:nth-child(odd){
    background : #EFEFEF;
    text-align: center;
    width : 140px;
}

 
.admin-layout .admin-content .card-list-wrap .card-list .engineer-info .tbody .tr .td:nth-child(even){
    width : calc(50% - 140px);
    word-break: break-all;
}
 
.admin-layout .admin-content .card-list-wrap .card-list .engineer-info .tbody .tr .td{
    padding : 0px 10px;
    
}
 
 
.admin-layout .admin-content .card-list-wrap .card-list .flip{
    content: "�ｿｽ�ｿｽ";
    position: absolute;
    bottom : -20px;
    left : 50%;
    margin-left : -50px;
    height : 20px;
    background : #00A99D;
    color : #fff;
    width : 100px;
    text-align: center;
    border-radius: 0px 0px 10px 10px;
    cursor: pointer;
}
 
.admin-layout .admin-content .card-list-wrap .card-list .rotate {
    transform: rotate(180deg);
    border-radius: 10px 10px 0px 0px;
}
 
/* modal */
.admin-modal .modal-header,
.admin-modal .modal-footer{
	width: 100%;
    border : none;
    padding : 30px 50px;
}
.admin-modal .modal-header .modal-title{
    font-size : 36px !important;
    font-weight: 700;
}
.admin-modal .modal-body {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding : 0 50px;
}
.admin-modal .modal-body .left-side{
    color : #B9B9B9;
    font-weight : 700;
    width : 145px;
    padding-top : 8px;
}
.admin-modal .modal-body .left-side span{color : #f00;}
.admin-modal .modal-body .caution{
    color : #f00; 
    display: block; 
    width: 100%;
    font-weight: 700;
    margin-bottom : 10px;
}
 
.admin-modal .modal-body .right-side{
    width : calc(100% - 145px);
    margin-bottom : 30px;
}
.admin-modal .modal-body .right-side .flex-between{
    display : flex;
    justify-content: space-between;
    align-items: center;
}
.admin-modal .modal-body .right-side .flex-between input{ width : 47%}
 
.admin-modal .modal-body .right-side p{line-height : 1.8; word-break: keep-all;}
 
.admin-modal .modal-body .right-side #target_bcc button, 
.admin-modal .modal-body .right-side #target_bcc button:hover,
.admin-modal .modal-body .right-side #target_cc button,
.admin-modal .modal-body .right-side #target_cc button:hover{
    color: #000;
    background : url('../images/x.svg');
    border: none;
    padding: 0px 15px 0px 0px;
    margin-bottom: 10px;
    background-position-x: right;
    background-repeat: no-repeat;
    background-size: 10px;
    background-position-y: center;
    margin-right: 10px;
}

.modal-footer .mail-btn{
    background : #00A99D;
    color : #fff;
    width : 100%;
    line-height : 42px;
    font-size: 18px;
    font-weight: 700;
}
 
.modal-footer .modal-btn-delete{
    background : #000000;
    color : #fff;
    width : 48.85%;
    line-height : 42px;
    font-size: 18px;
    font-weight: 700;
}
 
.modal-footer .modal-btn-confirm{
    background : #00A99D;
    color : #fff;
    width : 48.85%;
    line-height : 42px;
    font-size: 18px;
    font-weight: 700;
}