label { display: block; padding-bottom: 8px; }

/* reset styles */
select, input, button { margin: 0; }
/* adjust styles for forms */
label > input,
label > select { margin: 8px 0;  }
div.between > input, div.between > select { margin: 0 2px; }
div.flex > button { margin: 0 4px;  }

.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.left {text-align: left;}
.right {text-align: right;}
.center {text-align: center; justify-content: center;}
.full { width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; }
.spacer-top {margin-top: 16px;}
.spacer-bottom {margin-bottom: 16px;}
.spacer-bottom-small {margin-bottom: 8px;}
.nowrap {white-space: nowrap;}


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

.between { justify-content: space-between; }
.around  { justify-content: space-around; }
.start   { justify-content: flex-start; }
.end     { justify-content: flex-end; }

.xtrasmall {
    font-size: 11px;
    opacity: .7;
}


.container { margin: 0; }



.strong {
    font-weight: bold;                
}

.project_row {
    border-top: 1px solid #EAEAEA;
    padding: 5px 5px;
    padding-left: 40px;
    overflow: hidden;
}
.project_row:hover { background-color: #EAEAEA; border-radius: 2px; }
.project_row > p { margin: 0; padding: 0; padding-bottom: 6px; padding-left: 5px; }
.project_row > .name {
    font-weight: bold;
    opacity: 1;
    padding-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.android {
    background-image: url("images/android@3x.png");
    background-position: 8px 16px;
}


.ios {
    background-image: url("images/ios@3x.png");
    background-position: 8px 16px;
}

.web {
    background-image: url("images/web@3x.png");
    background-position: 8px 16px;
}

.uploading {
    background-image: url("images/spinner.gif");
    background-position: 8px 16px;
    background-size: 24px;
    pointer-events: none; 
}


.uploading_alt {
height: 56px;
background-image: url("images/spinner.gif");
background-position: center;
background-size: 24px;
}  

.recent_dot {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius:50%;
    background-color: #2C95ED;
    margin: 10px 0 0 8px;
}

.recent {
    background-color: #EEF9FF;
    border-color: #D1EFFF;
}

.recent:hover {
    border-color: transparent;
}

.loader {
margin: 96px 0 0 0;
height: 24px;
background-image: url("images/spinner.gif");
background-position: center;
background-size: 24px;
}

.notrans {
    opacity: 1;
}

.preview .column {
    width: calc(50% - 2px);
}

.column img {
    width: 100%;
    height: auto;
    border: 1px solid #EAEAEA;
    border-radius: 4px;
    margin: 0 0 4px 0;
}

.error {
    position: relative;
    min-height: 24px;
    top: 4px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 16px;
    color: #E04E50;
    background: #FBE9EA;
    border: 1px solid #F5C7C9;
    text-align: left;
}

.error button {
    margin: 4px 0 0 -2px;
}

.success {
    position: relative;
    min-height: 24px;
    top: 4px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 16px;
    color: #12A12A;
    background: #F2FDF4;
    border: 1px solid #AAE9B4;
    text-align: left;
}

.success button {
    margin: 4px 0 0 -2px;
}

.checkrow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 2px;
}
.checkrow > span { display: inline; margin: 0; padding: 0; }

.removable span {
    width: 100%;
    margin: 4px 0 4px 5px;
}

.removable div {
    height:16px; 
    width:16px;
    background: url('images/close@3x.png');
    background-size: 16px;
    margin: 0 5px 0 0;
    cursor: pointer;
}

.removable div:hover {
    background: url('images/closehover@3x.png');
    background-size: 16px;
}

#page-artboards label {
    white-space: nowrap;
    flex-wrap: nowrap;
}

.read-only {
    pointer-events: none;
    cursor: default;
    opacity: .6;
}
.read-only > .full {
    opacity: 1;   
}

#new-plugin button,
#new-plugin label { margin: 5px; }