[as='Popup'].titles #TitleForm {

@include display(flex);
@include flex-direction(column);

}

[as='Popup'].titles #TitleForm > h2 {

text-align: center;
margin: 12px 0;
font-weight: 100;

}

[as='Popup'].titles #TitleForm > div.fieldset {

@include display(flex);
@include flex-direction(column);

margin: 0 5%;

}

[as='Popup'].titles #TitleForm > div.fieldset.title > input {

@include flex(1);

border: 1px solid $gray-blue;
border-radius: 2px;
font-family: inherit;
font-size: inherit;

}

[as='Popup'].titles #TitleForm div.actions {

@include flex-direction(row);
@include justify-content(flex-end);
@include align-items(center);

margin: 12px 5%;

}

[as='Popup'].titles #TitleForm > div.actions p {

font-size: 0.8em;
margin: 0 8px;

}

[as='Popup'].titles #TitleForm div.actions button {

@include transition(box-shadow 0.2s);
@include flex(0 0 auto);
text-transform: uppercase;
font-size: 0.8em;
font-weight: bold;
padding: 4px 8px;
border-radius: 2px;
color: lighten($green, 35%);
text-shadow: 0 -1px darken($green, 10%);
text-decoration: none;
background-color: darken($green, 5%);
margin: 0;

&:active {
  box-shadow: inset 0 0 1px 0 darken($green, 25%);
}

}

[as='Popup'].titles #TitleForm ul.titles {

@include display(flex);
@include flex-direction(column);

border-top: 1px solid rgba($navy-blue, 0.5);
box-shadow: inset 0 1px 0 0 rgba(white, 0.5);
padding: 0 5%;

}

[as='Popup'].titles #TitleForm ul.titles > h3 {

margin: 12px auto;
text-align: center;

}

[as='Popup'].titles #TitleForm ul.titles > li {

@include display(flex);
@include align-items(center);

}

[as='Popup'].titles #TitleForm ul.titles > li > .name {

font-size: 1.4em;
margin-left: 12px;

}

[as='Popup'].titles #TitleForm ul.titles > li > time {

@include flex(0 0 20%);
font-size: 0.8em;
font-weight: bold;

}