.admin .list { margin: 20px 0 }

.admin .list a {
    color: #008adb;
    text-decoration: none;
    cursor: pointer;
}

.admin .list .img {
    padding: 1px 5px;
    width: 50px;
}

.admin .list .img img {
    object-fit: contain;
    width: 50px;
    height: 50px;
}

.admin .list .thumb {
    padding: 5px 10px;
    width: 50px;
}

.admin .list .thumb img { height: 29px; }

.admin .list a:hover { color: #204182; }

.admin .list > div:nth-child(2n) { background-color: #F7F7F7; }

.admin .list > div.upcoming { background-color: #e4f9e5; }

.admin .list > div.hidden { background-color: #f8dada; }

.admin .list > div:not(:first-child):hover { background-color: #E6F2F9; }

.admin ul.status {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin ul.status li {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.admin ul.status li ul {
    position: absolute;
    display: none;
    white-space: nowrap;
    background: #FFF;
    padding: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);

    z-index: 1; /* TODO: da se testwa s popupi i galerii */
}

.admin ul.status li ul li {
  display: block;
}

.admin ul.status li ul li a {
  display: block;
  padding: 5px 10px;
}

.admin ul.status li ul li a:hover {
  background-color: #1CC664;
  color: #FFF;
  text-decoration: none;
}

.admin ul.status li:hover > ul { display: block; }

.admin .list .yes { background-image: url(/svg/admin/yes.svg); }

.admin .list .no { background-image: url(/svg/admin/no.svg); }

.admin .list .yes,
.admin .list .no {
    background-position: center;
    background-repeat: no-repeat;
    width: 50px;
}

.admin .list .editable {
    outline: dashed 1px;
    outline-offset: -5px;
}

.admin .list .red { background-color:#f5cbcb !important; }
/* TODO: green, blue */

.admin .emptylist {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #E3E3E3;
    background-color: #F7F7F7;
}

/* Mobile */
@media (max-width: 959.999px) {
    .admin .list {
        border-top: 1px solid #E3E3E3;
        border-bottom: 1px solid #E3E3E3;
    }

    .admin .list > div { padding: 10px; }

    .admin .list > div:first-child { display: none; }

    .admin .list > div:not(:first-child) {
        position: relative;
        overflow: hidden;
    }

    .admin .list > div > div { margin: 5px 0; }

    .admin .list > div > div.xAdmin {
        position: absolute;
        top: 0;
        opacity: 0;
        right: -200px;

        -webkit-transition: right 0.5s ease, opacity 0.5s ease;
        -moz-transition: right 0.5s ease, opacity 0.5s ease;
        -ms-transition: right 0.5s ease, opacity 0.5s ease; /* IE10 is actually unprefixed */
        -o-transition: right 0.5s ease, opacity 0.5s ease;
        transition: right 0.5s ease, opacity 0.5s ease;
    }

    .admin .list > div:hover > div.xAdmin,
    .admin .list > div:active > div.xAdmin {
        right: 10px;
        opacity: 1;
        border: 1px solid #BBB;
        padding: 1px;
        background-color: rgba(230,230,230,0.8);
        z-index: 1;
        white-space: nowrap;
    }
}

/* Desktop */
@media (min-width: 960px) {
    .admin .list {
        border: 1px solid #E3E3E3;
        background-color: #FFF;
        display: table;
        width: 100%;
        box-sizing: border-box;
        margin-top: 20px;
    }

    .admin .list > div { display: table-row; }

    .admin .list > div > div {
        display: table-cell;
        vertical-align: top;
    }

    .admin .list > div > div.w50 { width: 50px; }

    .admin .list > div > div.w80 { width: 80px; }

    .admin .list > div > div.w100 { width: 100px; }

    .admin .list > div > div.w120 { width: 120px; }

    .admin .list > div > div.w150 { width: 150px; }

    .admin .list > div > div.w200 { width: 200px; }

    .admin .list > div > div.w300 { width: 300px; }

    .admin .list > div:not(:last-child) > div { border-bottom: 1px solid #E3E3E3; }

    .admin .list > div > div:not(:last-child) { border-right: 1px solid #E3E3E3; }

    .admin .list > div > div:not(.xAdmin):not(.img):not(.thumb) {
        padding: 10px;
        line-height: 19px;
    }

    .admin .list > div > div.xAdmin {
        width: 35px;
        padding: 2px;
    }

    .admin .list > div:first-child > div.sort {
        background-repeat: no-repeat;
        background-position: center right 5px;
    }

    .admin .list > div:first-child > div[data-index] { padding-right: 35px; }

    .admin .list > div:first-child > div.sort strong { cursor: pointer; }

    .admin .list .sort.asc { background-image: url(/svg/admin/up.svg); }

    .admin .list .sort.desc { background-image: url(/svg/admin/down.svg); }

/*
    TODO:
    .admin .list .yes,
    .admin .list .no {
        background-position: center;
        background-repeat: no-repeat;
    }

    .admin .list .yes { background-image: url(/svg/yes.svg); }

    .admin .list .no { background-image: url(/svg/no.svg); }
*/
}

/* retina display */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
    .admin h1 { font-size: 32px; }
}