*{
  box-sizing:border-box;
}

body{
  font-family:Helvetica, sans-serif;
  margin:0px;
}

a{
  color:#009933;
}

.url-shortnr{
  padding:15px 15px 0 15px;
}

.url-shortnr form{
  padding:15px;
  background:#009933;
  max-width:1000px;
}

.url-shortnr .input-holder{
}
.url-shortnr label{
  color:#fff;
  margin-bottom:5px;
  display:block;
}
.url-shortnr form input{
  margin-right:5px;
  padding:5px 5px;
  font-size:20px;
  line-height:40px;
  height:40px;
  display:inline-block;
  width:300px;
}
.url-shortnr .btn-shortn{
  width:100px;
  font-size:16px;
  display:inline-block;
  position:relative;
  /*top:-3px;*/
  line-height:40px;
  height:40px;
  cursor:pointer;
}

/**
 * Url Shortnr List
 */

.url-shortnr-list{
  max-width:600px;
  min-width:280px;
  width:100%;
}

.url-shortnr-list-row{
  margin:0;
  padding:15px;
  line-height:22px;
  border:solid #eee 2px;
}
.url-shortnr-list-row:nth-child(even){
  background:#eee;
}
.name-cell{
  font-weight:bold;
  font-size:20px;
  line-height:30px;
}
  .url-shortnr-list-row:not(.new-url-btn):not(.edit-form) .name-cell::before{
    /*display:none;*/
    content: "go.secu.nl/";
    font-weight:normal;
    opacity:0.4;
  }
  .name-cell .dashed-border{
    border-bottom:dashed 2px #666;
  }

.url-cell::before{
  content: "» ";
}
.date-cell{
  display:none;
}

/**
 * Url Shortnr form
 */
.new-url-btn{
  border:dashed 2px #ccc;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  cursor:pointer;
}
.new-url-btn.is-active{
  border-color:#009933;
  border-style:solid;
}
  .new-url-btn:hover{
    border-color:#009933;
  }
  .new-url-btn.is-active .dashed-border,
  .new-url-btn:hover .dashed-border{
    border-color:#009933;
    color:#009933;
  }
  .new-url-btn .url-cell{
    display:none;
  }
  .new-url-btn .name-cell{

  }
  .new-url-btn.is-active .description-cell{
    visibility:hidden;
  }

.url-shortnr-list-row{
  cursor:pointer;
}
.url-shortnr-list-row.edit-form{
  cursor:default;
}
.url-shortnr-list-row.edit-form{
  background:#009933;
  color:#fff;
  border:dashed 2px #ccc;
  border-color:#009933;
}
.edit-form .url-cell::before{
  content:"";
}

form.edit-form input{
  border:none;
  border-radius:4px;
  width:100%;
  margin-left:5px;
}
.edit-form .name-cell,
.edit-form .url-cell{
  display:flex;
  justify-content:space-around;
}
.edit-form > div:not(:last-child){
  margin-bottom:15px;
}
.edit-form .name-cell{
  line-height:40px;
}
@media (max-width:480px){
  .edit-form .name-cell span{
    display:none;
  }
}
.edit-form .url-cell{
  line-height:40px;
}
form.edit-form .submit-cell input{
  border:solid #009933 2px;
  color:#000;
  background:#fff;
  cursor:pointer;
  display:block;
  height:40px;
  line-height:38px;
  font-weight:bold;
  text-align:center;
  border-radius:4px;
  float:right;
  min-width:120px;
  width:auto;
  padding:0;
  max-width:100%;
  margin:0 auto;
}
form.edit-form .submit-cell input[type="button"]{
  float:left;
  /*color:#f00;*/
  color:#A50000;
  margin-left:1.5%;
  /*min-width:40px;*/
  border-color:#fff;
}

form.edit-form .description-cell input{
  width:98.0%;
}

/**
 * Clearfix
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after {
    clear: both;
}