/* ========================= standard ========================= */



/*title*/
.divTitle {
    padding: 20px;
    width: 70%;
    margin: 20px auto 20px auto;
}
.divTitle .fa {
    height: 24px;
}
.divTitle .divTitleBar1 {
    width: 50%;
    margin: 0 auto 0 auto;
}
.divTitle .divTitleBar1 .span {
    width: 20%;
}
.divTitle .divTitleBar1 .spanWide {
    width: 60%;
}

.divTitle .divTitleBar2 {
    width: 50%;
    margin: 0 auto 0 auto;
}
.divTitle .divTitleBar2 .span {
    width: 20%;
}
.divTitle .divTitleBar2 .spanWide {
    width: 60%;
}


/*main list*/
.list {
    width: 80%;
    margin: 20px auto 20px auto;
}
.list .ico {
    height: 24px;
}
.list .fa {
    font-size: 24px;
}
.box .line {
    padding: 0 0;
}
.line .span1-3{
    padding: 5px 5px;  
    width: 33.33%;
}
.line .span1-2{
      padding: 5px 5px;  
      width: 50%;
}

/*main performance*/
#idModalPerf .span {
    padding: 5px 5px; 
    width: 20%;
}
#idModalPerf .spanWide {
    padding: 5px 5px; 
    width: 60%;
}

#idPerfList .line{
    padding: 7px 0px;
}


/*modal dept*/
.deptsMember .ico {
    height: 24px;
}

/*depts*/
#idDeptMemberList {
    padding-bottom: 20px;
}
#idDeptSelectionList {
    padding-bottom: 20px;
}
#idDeptReasonList {
    padding-bottom: 20px;
}

/* ========================= dynamic < 1200px ========================= */


@media only screen and (max-width: 1200px) {

    /*title */
    .divTitle .divTitleBar1 {
        width: 100%
    }
    .divTitle .divTitleBar2 {
        width: 100%
    }


    /*main list */
    .list {
        width: 100%;
        margin: 20px auto 20px auto;
    }


}






/* ========================= dynamic < 600px ========================= */

@media only screen and (max-width: 600px) {

    /*title*/
    .divTitle {       
        width: 98%;
    }
    .divTitle .divTitleBar1 .span {
        width: 30%;
    }
    .divTitle .divTitleBar1 .spanWide {
        width: 40%;
    }
    .divTitle .divTitleBar2 .span {
        width: 15%;
    }
    .divTitle .divTitleBar2 .spanWide {
        width: 70%;
    }

    /*main list*/
    .line .span{
        padding: 2px 2px ;
    }
    .line .button{    
        padding: 2px 2px;
    }
    .line .span1-3-mobile{
      padding: 5px 5px;  
      width: 33.33%;
    }
    .line .span1-2-mobile{
        padding: 5px 5px;  
        width: 50%;
      }

}