.conatiner { display: flex; flex-direction: column; width: 100%; height: 100%; justify-content: space-between; margin-top: 10px; .black { color: black; } .highlight { color: #009fdb; } .center-content { display: flex; width: 100%; .action-info { background: #f2f2f2; padding: 6px 12px; border-radius: 5px; height: 32px; margin: 0 10px; display: flex; align-items: center; justify-content: center; min-width: 142px; } .center-content-item { width: 100%; } } .map-container { padding-left: 172px; .default { display: flex; width: 100%; margin: 1rem 0; min-height: 35px; .input-wrapper { width: 100%; display: flex; .input { height: 20px; padding: 5px; margin-left: 10px; width: 100%; border: 1px solid #d2d2d2; } } } .grid-container { padding-bottom: 10px; .layout { display: grid; grid-template-columns: 1fr 1fr 30px; grid-gap: 1px; .title { background-color: #f3f3f3; height: 30px; padding-left: 10px; display: flex; align-items: center; } .text-wrapper { height: 30px; border: 1px solid #f3f3f3; .input { width: 97%; height: 100%; border: none; padding: 0 5px; } } .btn-container { height: 30px; display: flex; align-items: baseline; } } } } } .from { display: flex; flex-direction: column; padding: 0 10px; .from-container { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-width: 350px; .input-text { border: none; flex: 1; width: 100%; min-width: 250px; padding: 5px 0 5px 5px; margin: 0; } } .label { border: 1px solid #d2d2d2; height: 30px; justify-content: flex-start; align-items: center; display: flex; } } .button-remove { display: flex; justify-content: center; color: #a7a7a7; &:hover { color: #009fdb; } } .action-container { display: flex; flex-direction: column; align-items: flex-end; } .action-item { width: 100%; margin-top: 0.5em; } .label .action-item-label { padding: 0 5px; width: 110px; }