/* VSDrive Plugin Styles */
.vsdrive {
    padding: 3em 0 2em;
}

/* Icons */
.vsdrive .dashicons {
    font-size: 1em;
    vertical-align: middle;
}

/* VSDrive Folders */
.vsdrive-folders-container {
    margin-bottom: 2em;
}

.vsdrive-folders {
    display: grid;
    grid-template-columns: auto auto auto auto;
}

.vsdrive-folders__folder {
    display: inline-grid;
    margin-bottom: 8px;
}

.folder-item,
.folder-item:hover,
.folder-item:focus {
    background: #EDEDED;
    border: 1px solid #EBEBEB;
    border-radius: 4px;
    margin-right: 4px;
    padding: 0.2em 0.5em 0.5em;
    font-size: 2.5em;
    text-decoration: none;
    outline: none;
}

.folder-item__icon.dashicons {
    color: #8CCCC5;
    width: 40px;
    height: 40px;
    vertical-align: middle;
}

.folder-item__name {
    color: #8CCCC5;
    line-height: 0;
    vertical-align: middle;
}
/* End VSDrive Folders */

/* VSDrive Files */
.vsdrive-files {
    margin: 1em 0;
}

.vsdrive-file {
    vertical-align: top;
    margin-right: 2px;
    margin-bottom: 4px;
    padding: 15px;
    border: 1px solid #A0A0A0;
    border-radius: 4px;
}

.vsdrive-file p {
    margin-bottom: 0;
    text-align: center;
}

.vsdrive-file__created {
    text-align: right;
    font-size: 70%;
    display: block;
    line-height: 0;
}

.vsdrive-file__created .dashicons {
    width: auto;
    height: auto;
    line-height: 0;
}

.vsdrive-file__icon.dashicons {
    font-size: 3em;
    width: 50px;
    height: 50px;
    margin: 15px auto 8px;
    color: #4dcabb;
    display: block;
}

.vsdrive-file__name {
    font-size: 90%;
}

.vsdrive-file__download,
.vsdrive-file__download:focus,
.vsdrive-file__download:hover {
    text-decoration: none;
    outline: none;
    background: #4dcabb;
    color: #FFFFFF;
    padding: 16px 12px 18px;
    display: inline-block;
    line-height: 0;
    border-radius: 4px;
    text-transform: uppercase;
}
/* End VSDRive Files */

/* Table */
.vsdrive table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

.vsdrive table thead {
    color: #4dcabb;
    border-bottom: 2px solid #4dcabb;
}

.vsdrive table th, td {
    text-align: left;
    padding: 16px;
}

.vsdrive table tr:nth-child(odd) {
    border-bottom: 1px solid #4dcabb;
}

.vsdrive table tr:nth-child(even) {
    background-color: rgba(238, 247, 246, 0.5);
    border-bottom: 1px solid #4dcabb;
}

.vsdrive-filename .dashicons {
    color: #8CCCC5;
}
/* End Table */

/* Utility Classes */
.vs-center {
    text-align: center !important;
}

.vsdrive-alert {
    text-align: center;
    padding: 2em 0 0;
    font-style: italic;
}

/* Ellips Loader
 * https://codepen.io/desandro/pen/owWLYz
 */
.loader-ellips {
    display: none;
    font-size: 10px; /* change size here */
    position: relative;
    width: 4em;
    height: 1em;
    margin: 10px auto;
}

.loader-ellips__dot {
    display: block;
    width: 1em;
    height: 1em;
    border-radius: 0.5em;
    background: #4dcabb; /* change color here */
    position: absolute;
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
    left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

@keyframes reveal {
    from { transform: scale(0.001); }
    to { transform: scale(1); }
}

@keyframes slide {
    to { transform: translateX(1.5em) }
}

.loader-ellips__dot:nth-child(1) {
    animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
    animation-name: slide;
}

.loader-ellips__dot:nth-child(4) {
    animation-name: reveal;
    animation-direction: reverse;
}

/* VSDrive Grid */
.vsdrive-row {
    display              : grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap      : 1rem;
    grid-row-gap         : 1rem;
}

@media (min-width: 0) {
    .vsdrive-col-sm-1 { grid-column: span 1; }
    .vsdrive-col-sm-2 { grid-column: span 2; }
    .vsdrive-col-sm-3 { grid-column: span 3; }
    .vsdrive-col-sm-4 { grid-column: span 4; }
    .vsdrive-col-sm-5 { grid-column: span 5; }
    .vsdrive-col-sm-6 { grid-column: span 6; }
    .vsdrive-col-sm-7 { grid-column: span 7; }
    .vsdrive-col-sm-8 { grid-column: span 8; }
    .vsdrive-col-sm-9 { grid-column: span 9; }
    .vsdrive-col-sm-10 { grid-column: span 10; }
    .vsdrive-col-sm-11 { grid-column: span 11; }
    .vsdrive-col-sm-12 { grid-column: span 12; }
}

@media (min-width: 768px) {
    .vsdrive-col-md-1 { grid-column: span 1; }
    .vsdrive-col-md-2 { grid-column: span 2; }
    .vsdrive-col-md-3 { grid-column: span 3; }
    .vsdrive-col-md-4 { grid-column: span 4; }
    .vsdrive-col-md-5 { grid-column: span 5; }
    .vsdrive-col-md-6 { grid-column: span 6; }
    .vsdrive-col-md-7 { grid-column: span 7; }
    .vsdrive-col-md-8 { grid-column: span 8; }
    .vsdrive-col-md-9 { grid-column: span 9; }
    .vsdrive-col-md-10 { grid-column: span 10; }
    .vsdrive-col-md-11 { grid-column: span 11; }
    .vsdrive-col-md-12 { grid-column: span 12; }
}

@media (min-width: 1200px) {
    .vsdrive-col-md-1 { grid-column: span 1; }
    .vsdrive-col-md-2 { grid-column: span 2; }
    .vsdrive-col-md-3 { grid-column: span 3; }
    .vsdrive-col-md-4 { grid-column: span 4; }
    .vsdrive-col-md-5 { grid-column: span 5; }
    .vsdrive-col-md-6 { grid-column: span 6; }
    .vsdrive-col-md-7 { grid-column: span 7; }
    .vsdrive-col-md-8 { grid-column: span 8; }
    .vsdrive-col-md-9 { grid-column: span 9; }
    .vsdrive-col-md-10 { grid-column: span 10; }
    .vsdrive-col-md-11 { grid-column: span 11; }
    .vsdrive-col-md-12 { grid-column: span 12; }
}