/* Imports */
@import "_styles.css";

/*
	Suggested order:
--------------------------------------------------
	display, position, float, clear
	width, height
	margin, padding
	border, background
	color, font, line-height, text-align, text-decoration
	vertical-align, white-space, overflow, cursor, list-style
*/

/*
Global
*/
BODY,
HTML {
   background: #fff;
}

#logo img {
    height: 49px;
    width: auto;
    margin-right: 15px;
}

#logo {
    margin-top: 6px;
}

#logo A {
    color: #333;
    font-size: 2em;
}

#logo A:hover {
    text-decoration: none;
}

.center #logo {
    margin: 0 0 10px 0;
}

.page-title {
    margin-bottom: 10px;
}

#header {
    background: #fff;
    height: 60px;
}

.login-form {
    margin: 100px auto;
}

#left-panel {
    padding-top: 60px;
}

#header>div {
    margin-top: 6px;
}

ASIDE,
#ribbon {
    background: #292d31;
}

.table>thead>tr:first-child {
    background-color: #f2f2f2;
    background-image: none;
}

.table>thead>tr {
    background-color: #fcfcfc;
    background-image: none;
}

.table>tbody>tr.info:hover>td {
    background-color: #fde2da !important;
}

H1.page-title {
    font-weight: 500;
}

TABLE.table-filter TH {
    vertical-align: middle !important;
}

#datatable_wrapper .dt-toolbar-footer {
    margin-top: -7px;
    border: 1px solid #ccc;
}

.form-horizontal .form-group {
    margin-bottom: 7px;
}

TABLE.no-border {
    border: none;
}

.margin-right-20 {
    margin-right: 20px;
}

.video-wrapper {
    position: relative;
}

.video-wrapper .video-info {
    padding-left: 500px;
}

.video-wrapper .video-content {
    position: absolute;
    left: 0;
    z-index: 5;
}

.video-container {
    width: 470px;
    height: 264px;
    text-align: center;
    border: 1px solid #ccc;
}

.video-container .add-video {
  margin-top: 120px;
}

.thumbnails {
    margin-top: 10px;
}

.thumbnails .thumb-item {
    float: left;
    position: relative;
    display: inline-block;
    width: 150px;
    height: 88px;
    margin-left: 10px;
    text-align: center;
    border: 1px solid #ccc;
    cursor: pointer;
}

.thumbnails .actions {
    position: absolute;
    bottom: 0;
    padding: 3px 0;
    width: 100%;
    background: rgba(42, 42, 42, 0.75);
    z-index: 3;
}

.thumbnails .thumb-item  I {
    margin-top: 22px;
   font-size: 30px;
}

.thumbnails .thumb-item .actions I {
    margin-top: 0;
    font-size: 15px;
}

.thumbnails .thumb-item .actions A {
    float: right;
    margin-right: 10px;
    color: #fff;
}
.thumbnails .thumb-item .actions A:hover {
    color: #a3a3a3;
}

.thumbnails .thumb-item:first-child {
    margin-left: 0;
}

.thumbnails .thumb-item  IMG {
    max-width: 100%;
}

SPAN.value {
    display: block;
    padding-top: 7px;
}

.fa-spin {
    -webkit-animation: spin 2s infinite linear;
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}

.vjs-default-skin .vjs-big-play-button {
    left: 40%;
    top: 40%;
    width: 20%;
    height: 30%;}

@media only screen and (max-width:599px) {
    .vjs-default-skin .vjs-big-play-button {left:25%;top:25%;width:50%;height:50%;}
}
@media only screen and (min-width:600px) and (max-width:768px) {
    .vjs-default-skin .vjs-big-play-button {left:25%;top:25%;width:50%;height:50%;font-size:5em;}
}