/* Map Studio CSS 2018-2019 */

/* Legende */
/*
            .classLegendeContent {
               display: flex;
               flex-direction: row; 
               border-bottom: 1px dashed red;
               padding-top:5px;
            }
*/
/*
            .classLegendItemCheck {
               flex-grow: 0;
            }
            .classLegendItemName {
               flex-grow: 3;
            }
*/
            .classLegendItemHeadline {
               font-weight: bold;
               /* flex-grow: 3; */
            }
            #legende{
               border: 1px solid black;
               width: 250px;
               height: auto;
            }
            #legendeHeadline{
               font-size: 16px;
               font-family: Arial, Helvetica, sans-serif;
               font-weight: bold;
               padding-left: 20px;
               padding-bottom:10px;
               background-color: #E8E8E8;
            }

#legendeContent{
   display: grid;
   grid-template-columns: 10% 10% 10% 67%;
   grid-row-gap: 5px;
   grid-column-gap: 5px;
   border: 1px dashed red;
   padding: 5px;
}

.localLegendLayer{
   background-color: #bbddfb;
   border-bottom: 2px solid blue;
}

/* ENDE - Legende */

/* Map Service */

.mapServiceHeadline{
   font-size: 30px;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
}

.mapServiceSubTitle{
   font-size: 20px;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: normal;
   font-style: italic;
}

#studioMapServiceOverview{
}

#studioMapServiceOverview{
   display: flex;
   flex-direction: column;
   width: 100%; 
   padding: 5px;
}

#studioMapServiceOverviewAdministration{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   padding: 5px;
   background-color: #979899;
}

#studioMapServiceOverviewSettings {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   padding: 5px;
}


.studioMapServiceOverviewLayerListCSS{
   display: grid;
   /* grid-template-rows: 1fr 1fr 1fr; */
   grid-template-columns: 5% 17% 18% 6% 6% 6% 6% 8% 6% 6% 5% 5%;
   grid-row-gap: 5px;
   grid-column-gap: 5px;
   border: 1px dashed red;
   padding: 5px;
}

.classLayerOrderElements{
   display: flex;
   flex-direction: row;
}

.classLayerOrderArrow{
   display: flex;
   flex-direction: column;
}

.studioMapLayerClassificationOverviewCSS{
   display: grid;
   grid-template-columns: 5% 30% 8% 8% 34% 9%;
   grid-row-gap: 5px;
   grid-column-gap: 5px;
   /* border: 1px dashed red; */
   padding: 5px;
}

#studioMapLayerBasicAttributesPreviewTxt{
   display: grid;
   width: 350px;
   grid-template-columns: 50% 50%;
   grid-row-gap: 5px;
   grid-column-gap: 5px;
   border: 1px solid black;
   padding: 5px;
}

.overviewActionImages{
   height: 30px;
}

.studioMapServiceOverviewLayerListHLCSS{
}

.classLayerRecord {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   border-bottom: 1px dashed red;
   padding-bottom: 5px;
   padding-top:5px;
}

.layerproperties {
   margin-left: 5px;
   margin-right: 5px;
}

/* ENDE - Map Service */

#mainMapContainer {
   display: flex;
   flex-direction: row;   
}

#mapDisplayContainer {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
   justify-content: center; 
}

.mapDisplayButtons {
   margin: 5px;
}

#mapDisplayAction {
   display: flex;
   justify-content: center;
}

#mapServiceContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px;
    margin-bottom:5px;
    border: 1px solid black;
}

#infoContainer{
   display: flex;
   flex-direction: column;
   padding: 5px;
   border: 1px solid black;
}

#content {
   width: 100%;
}

#studioCommunication {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
   border: 1px solid black;
   /* padding: 5px; */
   margin-top: 5px;
   background-color: #E8E8E8;
}

.studioMessages {
   padding: 5px; 
   margin: 5px;
}

#studioHeadline {
   display: flex; 
   padding: 5px;
   border: 1px solid black;
   justify-content: center;
   font-size: 30px;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
}

#studioContent {
   display: flex;
   /* justify-content: center; */
   height: auto;
   border: 1px solid black;
   padding: 5px; 
   margin-top: 5px;
   /* flex-direction: column; */  /* behebt das Problem beim neuen Karten-Dienst, verschiebt aber das Login-Menu */
}

/* Neuer Karten-Dienst */

#studioNewMapService{
   display: flex;
   flex-direction: column;
}

.studioNewMapServiceAttributes{
   display: grid;
   /* grid-template-rows: 1fr 1fr 1fr; */
   grid-template-columns: 50% 50%;
   grid-row-gap: 5px;
   grid-column-gap: 5px;
   border: 1px dashed red;
   padding: 5px;
}

.studioNewMapServiceAttributeSaveAction{
   grid-column: 1 / span 2;

}

.mapServiceAttributes {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}


/* ENDE Neuer Karten-Dienst  */

/* Login Menue  */

#studioLogin {
   display: flex;
   flex-direction: column;
   justify-content: center;
   background-color: #E8E8E8;
   width: 300px;
   padding: 5px;
}

#studioLoginContent {
   display: flex;
   flex-direction: row;
   padding: 5px;
}

#studioLoginAction {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   padding: 5px;
}

#studioLoginActionNewMapService {
   font-size: 10px;
   font-family: Arial, Helvetica, sans-serif;
}

input[type=button] {
   background-color: lightblue;
}

.studioLoginInput {
}

.labelDsplPwd {
   font-size: 8px;
   font-family: Arial, Helvetica, sans-serif;
}

/* ENDE Studio Login Menue */

/* Symbol Selector */

#studioMapLayerClassificationSymbolSelection{
   display: flex;
   padding: 5px;
   /* border: 1px solid black; */
   flex-direction: row;
   flex-wrap: wrap;
}

#symbolSelector{
   display: flex;
   padding: 5px;
   /* border: 1px solid black; */
   flex-direction: row;
   flex-wrap: wrap; 
}

.singleSymbol{
   display: flex;
   padding: 5px;
   border: 1px solid black;
   flex-direction: column;
}

.symbolSelectorMapColor{
   display: flex;
   padding: 5px;
   border: 1px solid black;
   flex-direction: row;
}

.symbolSelectorMapColorColor{
   display: flex;
   flex-direction: column;
}

.symbolSelectorAction{
   display: flex;
   padding: 5px;
   flex-direction: row;
   justify-content: space-between;
   border: 1px solid black;
   margin-top: 5px;
}

.symbolSelectorActionText{
   font-size: 20px;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
}

/* ENDE Symbol Selector */

/* Service Administration */

#studioServiceAdministration{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 5px;
   background-color: lightcyan;
   width: 100%;
   border: solid 1px;
}

.studioServiceAdministrationItems{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin: 5px;
   border-bottom: solid;
    padding-bottom: 15px;
    padding-top: 10px;
    background-color: grey;
    padding-left: 5px;
    padding-right: 5px;
}

/* Layer Settings */

#studioServiceLayerAdministration{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 5px;
   background-color: lightcyan;
   width: 100%;
   border: solid 1px;
}

.studioServiceLayerAdministrationItems{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin: 5px;
   border-bottom: solid;
   padding-bottom: 15px;
   padding-top: 10px;
   background-color: grey;
   padding-left: 5px;
   padding-right: 5px;
}

.studioMapLayerBasicAttributes {
   display: grid;
   /* grid-template-rows: 1fr 1fr 1fr; */
   grid-template-columns: 15% 10% 10% 15% 48%;
   grid-row-gap: 5px;
   grid-column-gap: 5px;
   border: 1px dashed red;
   padding: 5px;
}

.studioMapLayerBasicAttributesClassDrei{
   grid-column: 2 / span 3;
}

.studioMapLayerBasicAttributesClassZwei{
   grid-column: 3 / span 2;
}

.studioMapLayerBasicAttributesClassPreview{
  grid-row: 1 / span 8;
  grid-column: 5 / span 1;
  display: flex;
  flex-direction: row;
}

.studioMapLayerBasicAttributesInput{
  width: 70px;
  padding: 5px;
  margin: 2px;
  box-sizing: border-box;
}

#studioMapLayerClassificationOverview{
   display: flex;
   flex-direction: column;   
}

#studioMapLayerClassificationControl{
   display: flex;
   flex-direction: row;
   padding: 5px;
   margin: 5px;
}

.studioMapLayerClassificationControlItems{
   margin-left: 10px;
   margin-right: 10px;
}

#studioMapLayerAutoClassification{
   display: grid;
   grid-template-columns: 48% 48%;
   grid-row-gap: 5px;
   grid-column-gap: 5px;
   /* border: 1px dashed red; */
   padding: 5px;
}

/* FeatureInfo  */

.featureInfoListCSS{
   display: grid;
   /* grid-template-columns: <Wird dynamisch eingefuegt> */
   grid-row-gap: 5px;
   grid-column-gap: 5px;
   border: 1px solid black;
   padding: 5px;
}

/* Label  */

.studioMapLayerClassificationLabelSetupCSS{
   display: grid;
   grid-template-columns: 5% 12% 10% 8% 8% 10% 12% 13% 13% 5%;
   grid-row-gap: 5px;
   grid-column-gap: 5px;
   /* border: 1px dashed red; */
   padding: 5px;
}

.classLabelInputFieldsCSS{
   width: 50px;
}

/* Query Editor  */
#containerQueryEditorAndResults{
   display: flex;
   flex-direction: column;
}

.queryEditorAttributes{
   display: grid;
   grid-template-columns: 25% 25% 25% 25%;
   grid-row-gap: 5px;
   grid-column-gap: 5px;
   border: 1px solid black;
   padding: 10px;
   margin-bottom: 20px;
}

#containerQueryResults{
   padding: 5px;
   display: flex;
   flex-direction: column;
}

#queryEditorHeadline{
   grid-column: 1 / span 4;  /* Startet in der ersten Spalte und überdeckt 4. In diesem Fall werden aus den 4 Einzelzellen eine */
   font-size: 16px;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   margin-bottom: 10px;
}

#queryResultsHeadline{
   font-size: 16px;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
}

#queryEditorQueryArea{
   grid-column: 1 / span 4;
   margin-top: 20px;
}

#queryEditorExecute{
   grid-column: 1 / span 4;
   justify-self: right;
   padding-right: 30px;
   margin-top: 20px;
}

.queryEditorQueryAreaCSS{
   width: 98%;
   height: auto; 
}
.separatorLine{
   grid-column: 1 / span 4;
   border-bottom: 3px solid black;
   /* padding-bottom: 10px; */
   margin-top: 5px;
   margin-bottom: 10px;
   width: 98%;
}

#queryEditorShowTableView{
    border: 1px dashed black;
    width: 82%;
    padding: 10px;
}

/* Felderauswahl  */

#studioMapLayerOutputFieldDefinition {
   padding: 5px;
   display: flex;
   flex-direction: column;
}

#studioMapLayerOutputFieldContent{ 
   display: grid;
   grid-template-columns: 10% 30% 30%;
   grid-row-gap: 5px;
   grid-column-gap: 5px;
   border: 1px solid black;
   padding: 10px;
   margin-bottom: 20px;
}

/* ENDE Felderauswahlt */

/* Copy Map Service */

.studioMapServiceCopyServiceLayerListCSS{
   display: grid;
   /* grid-template-rows: 1fr 1fr 1fr; */
   grid-template-columns: 5% 15% 10% ;
   grid-row-gap: 5px;
   grid-column-gap: 5px;
   border: 1px dashed red;
   padding: 5px;
}