#SelectedSubevent
{
    position:absolute;
    width:100%;
    height:100%;
    left:100%;
    overflow:hidden;
    background-color:gray;
}

.LabelSectionDom 
{
    position:absolute;
    top:0%;
    width:100%;
    height:10%;
}

.LabelDescription 
{
    position:absolute;
    left:20%;
    width:77.5%;
    font-size:0.8em;
    top:4%;
    height:90%;
    //background-color: rgba(89,89,89,.6);
    //color:rgb(240,240,240);
}

.LabelDescriptionTop /*media*/
{
  position: relative;
  left: 5%;
  width: 90%;
  height: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  text-align: center;
  /* line-height: 200%; */
}

.LabelDescriptionTopDesktop /*media*/
{
    position:absolute;
    left:5%;
    width:90%;
    height:50%;
    overflow:hidden;
    text-overflow:ellipsis;
    font-weight:600;
}

.LabelDescriptionBottom  /*media*/
{
  position: relative;
  display: table;
  /* top: 50%; */
  /* left: 5%; */
  width: 100%;
  /* height: 50%; */
  /* display: table-cell; */
  vertical-align: middle;
  font-weight: 600;
}

.LabelDescriptionBottomLocation 
{
    position: relative;
    width: 100%;
    /* height: 100%; */
    /* display: table-cell; */
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    
}

.LabelDescriptionBottomTime 
{
    position: relative;
    /* left: 55%; */
    width: 100%;
    height: 100%;
    text-overflow: ellipsis;
    font-size: 0.7em;
    text-align: center;
}

#BackIconSelectedEvent  /*media*/
{
     position: absolute ;
     left : 5px ; 
     top :  50% ; 
     margin-top :  -28px ;  
     width :  56px ;  
     height :  56px;
}

#BackIconSelectedEventDesktop  /*media*/
{
     position: absolute ;
     left : 25px ; 
     top :  50% ; 
     margin-top :  -50px ;  
     width :  100px ;  
     height :  100px;
}


.SubEventNonLabelSection 
{
    position:absolute;
    width:100%;
    height:18%;
    overflow:hidden;
    font-family: 'Poiret One', cursive;
    display: table;
    overflow:hidden;
    
    text-overflow:ellipsis;
}

#CompletionMap 
{
    position:absolute;
    top:10%;
    //background-color:chocolate;
}

#NextEvent 
{
    position:absolute;
    top:28%;
}

#WeatherSubEvent 
{
    position:absolute;
    top:46%;

}

#RangeUpdate 
{
    position:absolute;
    top:64%;
    //background-color:red;
}

#EventOptions 
{
    position:absolute;
    top:82%;
    //background-color:blue;
}

.SubEventLabelSection
{
    position:absolute;
    display:table;
    height:100%;
    font-size:0.8em;
    width:25%;
    text-align: center; 
    top:25%;
    overflow:hidden;
    text-overflow:ellipsis;
}


#LabelNextEvent /*media*/
{
    top:25%;
    font-size:0.8em;
}

#LabelRangeModify {
    //font-size:35px;
}


.SubEventContentSection
{
    position:absolute;
    left:25%;
    height:100%;
    width:75%;
    overflow:hidden;
}
.SectionSplitter 
{
    position:absolute;
    top:15%;
    height:70%;
    width:4px;
    left:25%;
    background-color:rgb(38,38,38);
}

.SelectedEventOption 
{
    position: relative;
    width: 25%;
    height: 100%;
    display: inline-block;
}

.SelectedEventOptionImageContainer
{
    position:absolute;
    left:10%;
    width:80%;
    top:10%;
    height: 70%;
}

#OptionContainer
{
      left: 12.5%;
  /* transform: translateX(-50%); */
  position: relative;
}



.SelectedEventOptionImage /*media*/
{
    position:absolute;
    width:50px;
    height:50px;
    margin:0 auto;
    top:10%;
    
}

.SelectedEventOptionText
{
    position:absolute;
    left:5%;
    width:90%;
    height: 20%;
    top:80%;
}



#ProcrastinateOption {
    //position:absolute;
    //left:0%;
}


#SilentOption {
    //position:absolute;
    //left:25%;
    display:none;
}


#DirectionsOption {
    //position:absolute;
    //left:50%;
}


#MoreOption {
    //position:absolute;
    //left:75%;
}

.ColonString 
{
    position:absolute;
    top:38%;
    width:25%;
    text-align:center;
    font-size:100%;
    height:10%;
    width:2px;
    background-color:rgb(250,250,250);
}


#ColonString1
{
    left:25%;
}

#ColonString2 {
    left:50%;
}

#ColonString3 {
    left:75%;
}


.TimeElementStringDark/*media*/
{
    font-family: 'Poiret One', cursive;
    top:50%;
    height:3em;
    margin-top:-1em;
    font-size:1.2em;
}

.TimeElementStringLight/*media*/
{
    font-family: 'Poiret One', cursive;
    top:50%;
    height:3em;
    margin-top:-1em;
    font-size:1.2em;
}

.HourString 
{
    left:25%;
    position:absolute;

    width:25%;
    text-align:center;   
}

.MinuteString
{
    left:50%;
    position:absolute;
    width:25%;
    text-align:center;
}

.SecondString 
{
    left:75%;
    position:absolute;
    width:25%;
    text-align:center;
}
.DayString 
{
    left:0;
    position:absolute;
    width:25%;
    text-align:center;
}

.TimeElementText /*media*/
{
    font-weight:400;
    font-size:0.5em;
}

#SelectedSubEventRangeSliderContainer 
{
    position:absolute;
    top:75%;
    left: 12.5%;
    width:75%;
}


#SelectedSubEventEndDateContainer /*media*/
{
  position: absolute;
  top: 50%;
  height: auto;
  width: auto;
  left: 12.5%;
  font-size: .85em;
  transform: translateY(-50%);
}

#SelectedSubEventEndDateContainerName /*media*/
{
    position:relative;
    font-size:.70em;
    font-weight:700;
    margin-top:10%;
}


#SelectedDeadline
{
  color: white;
  border: none;
  border-bottom: solid white 1px;
  width: 9em;
  position: relative;
}

#SelectedSubEventEndDateContainerContent 
{
    position:absolute;
    font-size:.7em;
    left:20.5%;
}

.PieChart 
{
    left:10%;
    top:50%;
    margin-top:-75px;
    position:absolute;
}

.pieChartContainer /*media*/ {
    margin-top: -38px;
    margin-left: 0;
    height: 80px !important;
    width: 80px !important;
}
.LegendEncasingDom /*media*/
{
    position:absolute;
    width:100%;
    height:1em;
    font-size:.8em;
    
}

.LegendContainer /*media*/
{
    position:absolute;
    top:10%;
    width:45%;
    height:80%;
    left:55%;
}

.LegendColor 
{
    position:absolute;
    left:0;
    height:20px;
    width:20px;
    border-radius:3px;
    box-shadow:rgba(10,10,10,.9) 0px 5px 5px;

    background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(208,208,208,.2) 35%, rgba(36,36,36,0.3) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(35%, rgba(208,208,208,1)), color-stop(100%, rgba(36,36,36,0.99)));
    background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(208,208,208,1) 35%, rgba(36,36,36,0.99) 100%);
    background: -o-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(208,208,208,1) 35%, rgba(36,36,36,0.99) 100%);
    background: -ms-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(208,208,208,1) 35%, rgba(36,36,36,0.99) 100%);
    background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(208,208,208,.2) 35%, rgba(36,36,36,0.3) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#242424', GradientType=1 );

}

.LegendText /*media*/
{
    position:absolute;
    left:25px;
}


/*Edit sub event*/
.edit-subevent-page {
    height:100%;
    background-color: #ffffff;
    position: relative;
}

.editable-field-container {
    white-space: nowrap;
    height: 45px;
    line-height: 50px;
    font-size: 20px;
}

.editable-field-label {
    height: auto;
    width: 140px;
}

.editable-field-input {
    height: auto;
    border: solid 1px gray;
    width: 215px;
}

.editable-field-container .ui-icon-clock {
    display: none;
}

.Save-Edit-SubEvent,
.Cancel-Edit-SubEvent {
    display: block;
}
.edit-subEvent-page-content {
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
}
.edit-subEvent-page-content-container{
    width: 100%;
}

.edit-subEvent-page-title {
    text-align: center;
    height: 80px;
    line-height: 90px;
    font-size: 24px;
}

.edit-subEvent-page-footer {

}

.edit-subEvent-page-footer button {
    outline: 0;
    border: solid 1px gray;
    width: 90%;
    left: 5%;
    height: 60px;
    background: transparent;
    margin-top: 10px;
    position: relative;
    text-align: center;
    box-sizing: border-box;
    line-height: 60px;
    border-radius: 4px;
}