.sites .screen img {
    width: 262px;
}
.sites .site {
    float: left;
    width: 262px;
    margin-right: 30px;
    margin-bottom: 30px;
}
.sites .site .screen {

    border: 1px solid #dddddd;
    width: 100%;
    height: 160px;
    overflow: hidden;
    position: relative;
    background: transparent url(https://assets.bravenet.com/bn/img/screenfill.png) top center no-repeat;
}
.sites .site .screen a {
    width: 100%;
    height: 160px;
    display: block;
}
.sites .site .screen .icon {
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -20px;
    margin-top: -20px;
    visibility: hidden;
    border-radius: 50%;
    background-color: #fff;
    padding: 5px;
    opacity: 0.5;
    border: 1px solid #f3f3f3;
    transition: transform 0.1s;
    cursor: pointer;
    pointer-events: none;
    color: #000;
}
.sites .site .screen .editing {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: #fff;
    z-index: 99999;
}
.sites .site .screen .editing img {
    width: 120px;
    height: 47px;
    position: relative;
    left: 50%;
    top: 50%;
    margin-left: -60px;
    margin-top: -23.5px;
}
.sites .site .screen:hover {
    border-color: #aaa;
}
.sites .site .screen:hover .icon {
    visibility: visible;
    transform: scale(1.2);
}
.sites .site .screen.add-site {
    background-image: none;
}

.sites .site .screen.add-site a {
    font-size: 120px;
    color: #dddddd;
    text-decoration: none;
    width: 258px;
    height: 160px;
    display: block;
    line-height: 145px;
    text-align: center;
}
.sites .site .screen.add-site a:hover {
    color: #cfcfcf;
}
.sites .site:nth-child(4n+0) {
    margin-right: 0;
}
.sites .site-header {
    background-color: #F6F6F6;
    border: 1px solid #ddd;
    border-top: 0;
    padding: 7px 5px;
}

.sites .site-label {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
    margin: 0;
    padding:0;
    float: left;
    line-height: 2.5em;
    padding-left:5px;
}

.sites .add-header .site-label {
    float: none;
    width: 100%;
}

.sites .dropdown {
    float: right;
    width: 10%;
    text-align:right;
    line-height: 29px;
}
.sites .dropdown a {
    color: #939393;
    font-size: 18px;
    text-decoration: none;
    line-height: 24px;
    font-size: 14px;
    vertical-align: middle;
}

.sites .dropdown .material-icons,
.sites .dropdown .material-icons-outlined {
    vertical-align: inherit;
    margin-right: 5px;
}
.sites .dropdown ul {
    text-align: left;
    width: auto!important;
    max-width: 180px!important;
}
.sites .dropdown ul li:last-child {
    margin-bottom: 0;
}
.sites .dropdown ul a {
    color: #666;
    padding: 5px 10px;
}
.sites .dropdown ul a .material-icons,
.sites .dropdown ul a .material-icons-outlined {
    margin-right: 5px;
}
.sites .dropdown ul a:hover {
    color: #0373B4;
    background-color: #f3f3f3;
}
.header-nav {
    display: block;
    float: right;
}
.manage-link .icon {
    font-size: 24px;
    vertical-align: sub;
}

.new-features {
    margin-bottom: 48px;
}

.new-features > a {
    display: block;
    position: relative;
    width: 100%;
}

.new-features > a > img {
    margin-left: -4px;
}

span.site-status {
    font: 10px "Lato", sans-serif;
    position: absolute;
    padding: 5px;
    text-transform: uppercase;
    border: rgb(255 255 255 / 92%) 1px solid;
    background: rgb(124 124 124 / 78%);
    color: white;
    text-shadow: 1px 1px 1px black;
}

span.site-status[data-align="top-left"] {
    left: 0;
    top: 0;
    margin-top: 5px;
    margin-left: 5px;
}

span.site-status[data-align="top-right"] {
    right: 0;
    top: 0;
    margin-top: 5px;
    margin-right: 5px;
}

span.site-status[data-align="bottom-left"] {
    left: 0;
    bottom: 0;
    margin-top: 5px;
    margin-left: 5px;
}

span.site-status[data-align="bottom-right"] {
    right: 0;
    bottom: 0;
    margin-top: 5px;
    margin-right: 5px;
}

span.site-status[data-status="published"] {
    border: #b5ffe642 1px solid;
    background: #37ad40;
}

span.site-status[data-status="expiring"] {
    border: rgb(241 113 52 / 96%) 1px solid;
    background: rgba(255, 124, 54, 0.96);
}

span.site-status[data-status="expired"],
span.site-status[data-status="unpublished"]{
    border: rgba(239, 19, 19, 0.91) 1px solid;
    background: rgba(255, 46, 46, 0.96);
}

span.site-status[data-status="active"] {
    border: rgb(255 255 255 / 92%) 1px solid;
    background: rgb(124 124 124 / 78%);
}