.thaimeccsite.frontend .container .departmentName{
    font-size: 40px;
    color: #0077c2;
    font-weight: bold;
    text-shadow: 0px 2px 3px  #8a8a8a;
    
}
.thaimeccsite.frontend .container .position{
    font-size: 20px;
    color: #0077c2;
    display: flex;
    flex-wrap: wrap;  
    justify-content: space-evenly;
  
}
    
.thaimeccsite.frontend .container .executive {
   
    display: flex;
    flex-direction: column;  
   
    align-items: center; 
    max-width: 250px; 
    max-height: 250px; 
    flex: 0 0 auto; 
    margin: 20px 20px 0px 20px;  

}
.thaimeccsite.frontend .container .executive .fullName{
    font-size: 1em;
    font-weight: bold;
    text-align: center;
}
.thaimeccsite.frontend .container .executive .position{
    font-size:  .625em;
    text-align: center;
}
.thaimeccsite.frontend .container .executive .phoneNumber {
    font-size: .625em;
    text-align: center;
}
.thaimeccsite.frontend .container .executive .avatar{
    align-items: center;
    width: 100px;  
    height: 180px;
    
}
.thaimeccsite.frontend .container .executive .avatar img {
    object-fit: contain;
    width: 100%;
    height: 100%;
     
}
 
.executive_editor {
    display: flex;
    width: 100%;
    height: calc(100vh - 130px);
}

.executive_editor .component_panel {
    background-color: #cfd8dc;
    width: 20%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
    border-radius: 10px 0 0 10px;
    align-content: flex-start;
}

.executive_editor .editor_panel {
    background-color: #fff;
    width: 60%;
    padding: 10px;
    /* display: flex;
    flex-direction: column;
    gap: 10px; */
    height: 100%;
    overflow-y: auto;
}

.executive_editor .property_panel {
    background-color: #cfd8dc;
    width: 20%;
    border-radius: 0 10px 10px 0;
    padding: 10px;
}

.executive_editor .component_panel .executive_component_button {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: fit-content;
    gap: 10px;
    padding: 10px;
    background: #ffffff;
    border-radius: 10px;
    user-select: none;
}

.executive_editor .editor_panel .department_executive_component {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px;
    min-height: 50px;
    background-color: #ECEFF1;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

.executive_editor .editor_panel .department_executive_component.selected {
    border: 1px solid black;
}

.department_executive_component.drag_over, .department_executive_component.selected.drag_over {
    border-top: 3px solid #00796B !important;
}

.executive_editor .editor_panel .department_executive_component .container {
    min-height: 50px;
    /* display: flex; */
    /* flex-direction: column; */
    align-items: center;
    /* gap: 10px; */
}

.executive_editor .editor_panel .department_executive_component .container .department_executive_component {
    border: 1px dotted black;
}

.executive_editor .editor_panel .department_executive_component .container .department_executive_component.selected {
    border: 1px solid black;
}

.executive_editor .property_panel input {
    background-color: #fff;
}

.executive_editor .editor_panel .position_executive_component {
    width: 100%;
    /* height: 200px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* gap: 10px; */
    border: 1px dashed black;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    font-size: .8em;
	background: #fff;
	height: -webkit-fill-available;
}

.executive_editor .editor_panel .position_executive_component.selected {
    border: 1px solid black;
}

.executive_editor .editor_panel .position_executive_component .avatar_box {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100px;
    /* background: #00796B; */
	background: #fff;
	aspect-ratio: 2/3;
}
.executive_editor .editor_panel .position_executive_component .frame {
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
	width: 100%;
	min-height: 100%;
	aspect-ratio: 2/3;
}
.executive_editor .editor_panel .position_executive_component .frame img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.executive_editor .editor_panel .position_executive_component .avatar {
    position: absolute;
    top: 0;
    z-index: 1;
	width: 100%;
	min-height: 100%;
	aspect-ratio: 2/3;
}
.executive_editor .editor_panel .position_executive_component .avatar img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #0f75bc;
}
.executive_editor .editor_panel .position_executive_component .name_box {
    /* position: absolute; */
    z-index: 3;
    bottom: 0;
    width: 100%;
    background: #ffffffd1;
}