/* css reset */
html, body{font-family: "맑은 고딕"; font-size: 12px; margin: 0;}

/* layout */
main{width: 100vw; height: 100vh; display: flex; font-size: 12px;}
main .map-section{width: calc(100% - 600px);}
main .grid-section{width: 600px; height: 100vh;}
.grid-section > .controls{height: 2em; display: flex; border-left: 1px silver solid;}
.grid-section > .grid-container{height: calc(100% - 2em); overflow: hidden;}
.button{display: flex; width: 5em; height: 2em; justify-content: center; align-items: center; border-right: 1px silver solid; cursor: pointer;}
.button.active{background-color: #03CF5D; color: white;}

.label-dot{position: absolute; width: 10px; height: 10px; box-sizing: border-box; margin-left: -5px; margin-top: -5px;
           background-color: white; border: 2px black solid; border-radius: 5px; user-select: none;}
.label-box{position: absolute; width: 200px; min-height: 50px; box-sizing: border-box; padding: 0.75em;
           background-color: rgba(255,255,255,0.95); border: 2px black solid; user-select: none; cursor: move; font-size: 13px;}
.label-box .title{border-bottom: 1px solid; border-bottom-color: inherit; padding-bottom: 0.5em; margin-bottom: 0.5em;}
.label-box .title:last-child{border-bottom: none; padding-bottom: 0; margin-bottom: 0;}
.label-box .line{line-height: 1.5em;}

.setting-panel{position: absolute; z-index: 999; width: 600px; background-color: white; border: 1px silver solid; box-sizing: border-box;}
.setting-panel *{box-sizing: border-box;}
.setting-panel .toolbar{display: flex; border-bottom: 1px silver solid; justify-content: space-between; background-color: lightgoldenrodyellow;}
.setting-panel .toolbar .title{padding: 0.5em 1em;}
.setting-panel .toolbar .button{padding: 0.5em 1em; height: auto; width: auto; border: none;}
.setting-panel .contents .header{width: 100%; background-color: palegreen; padding: 0.5em 1em;}
.setting-panel .contents .fields{display: flex; flex-wrap: wrap;}
.setting-panel .contents .fields .field{display: flex; padding: 0.5em; box-sizing: border-box; align-items: center; margin-right: 1em;}
.setting-panel .contents .fields .field label{color: darkslategrey; width: 10em;}
.setting-panel .contents .fields .field label:before{content: ">"; color: skyblue; margin-right: 0.5em;}
.setting-panel .contents .fields .field input{padding: 0.3em; box-sizing: border-box; width: 10em;}
.setting-panel .contents .fields .field select{padding: 0.3em; width: 10em;}

.handsontable{font-size: 12px;}
.handsontable .htCheckboxRendererInput{margin: 0;}

/* google map */
.map-section div[role=region]{outline: none;}
.gm-style *{animation: none !important;}
.gm-style > iframe + div{border: none !important;}