body {
    padding: 0;
    background: #111;
}

a,
a:hover {
    color: #009FDE;
    text-decoration: none !important;
    cursor: pointer;
}

input {
    outline: none !important;
    box-shadow: none !important;
}

input[type="time"]::-webkit-clear-button {
    -webkit-appearance: none;
    display: none;
}

input[type="time"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}

input[type="time"]::-ms-clear {
    display: none;
}

.list-unstyled {
    margin: 0;
}

.btn-gold {
    border-radius: 3px;
    font-weight: bold;
    color: #fde93f;
    padding-bottom: 4px;
    padding-top: 4px;
}

.btn-gold:hover {
    color: #fde93f;
}

.alert {
    display: inline-block;
    margin: 15px 0;
    width: 100%;
    position: relative;
}

.form-group:after {
    clear: both;
    content: " ";
    display: table;
}

.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.btn-primary {
    color: #fff !important;
    background-color: #337ab7 !important;
    border-color: #2e6da4 !important;
}

.btn-primary:hover {
    color: #fff !important;
    background-color: #286090 !important;
    border-color: #204d74 !important;
}

.padding-less {
    padding: 0 !important;
}

.margin-less {
    margin: 0 !important;
}

.navbar-right {
    margin: 0;
}

hr {
    margin: 10px 0;
    display: inline-block;
    width: 100%;
}

.btn-success.ladda-button {
    background-color: #5cb85c;
}

.btn-default.ladda-button {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-danger.ladda-button {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

.navbar.dropdown-menu {
    padding: 0;
}

.navbar.dropdown-menu li a {
    line-height: 30px;
}

.navbar.dropdown-menu li .profile {
    background-color: #000;
}

.navbar.dropdown-menu li .profile p,
.navbar.dropdown-menu li .profile a {
    line-height: 1em;
}

.navbar.dropdown-menu li .profile a {
    padding: 0;
    font-size: 11px;
}

.navbar.dropdown-menu li .profile .settings-profile-common {
    font-size: 11px;
}

.navbar {
    min-height: 44px;
    margin-bottom: 0;
}

.form-control:focus {
    border-color: inherit;
}

.clear,
.clear:after {
    clear: both;
    display: block;
}

.clear:after {
    content: ' ' !important;
    display: table !important;
}

.dotted {
    border-top: 1px dotted #eee;
    margin-bottom: 0;
}

.block {
    display: block !important;
}

.dropdown-menu > li > a {
    line-height: 1.4;
}

.relative {
    position: relative !important;
}

.btn-gold {
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.btn-gold:after {
    animation: shine 15s ease-in-out;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    top: -110%;
    left: -210%;
    width: 200%;
    height: 200%;
    opacity: 0;
    transform: rotate(30deg);
    background: rgba(255, 255, 255, 0.8);
    background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(255, 255, 255, 0.8) 77%,
            rgba(255, 255, 255, 0.8) 92%,
            rgba(255, 255, 255, 0.8) 100%
    );
}

.btn-gold:active:after {
    opacity: 0;
}

@keyframes shine {
    10% {
        opacity: 1;
        top: -30%;
        left: 100%;
        transition-property: left, top, opacity;
        transition-duration: 0.7s, 0.7s, 0.15s;
        transition-timing-function: ease;
    }
    100% {
        opacity: 0;
        top: -30%;
        left: 100%;
        transition-property: left, top, opacity;
    }
}

.pro-label {
    color: gold;
}

.container {
    max-width: 920px;
    width: 100%;
    padding: 0 15px;
}

.container .navbar-header {
    margin-right: 0;
    margin-left: 0;
}

.block-white {
    background-color: #fff;
    border-radius: 0;
}

.block-gray {
    background-color: #fafafa;
    border-radius: 5px;
}

.main-container {
    padding: 10px;
    width: 100%;
    position: relative;
    margin: auto;
    text-align: left;
}

.main-container:after {
    clear: both;
    content: ' ';
    display: table;
}

.aside-container {
    max-width: 270px;
    width: 100%;
}

.margin-left-10 {
    margin-left: 10px;
}

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

.navbar-inverse {
    background: #111;
    border: 0;
}

.navbar-inverse .navbar-brand img {
    height: 100%;
}

.navbar-inverse .navbar-nav > li > a {
    color: #fff;
    font-weight: 300;
}

.extra-padding {
    padding: 15px;
}

.fa-long-arrow-right {
    margin-left: 10px;
}

.mobile_menu {
    overflow: hidden;
}

.autosuggest .search-icon {
    display: none;
}

.premium-subscription {
    text-align: left;
}

.container-yout {
    max-width: 550px;
    color: #fff;
}

.container-home {
    color: #fff;
    min-height: 210px;
    margin-top: 120px;
    transition: 0.3s all ease-in;
}

.container-home h1 {
    font-size: 80px;
    font-weight: bold;
    text-shadow: 0 2px 5px black;
    margin-top: 0;
}

.container-home h2 {
    font-size: 20px;
    margin: 0;
    font-weight: 300;
}

.container-home form {
    margin-bottom: 10px;
}

.container-home input {
    outline: none !important;
    margin-top: 15px;
    margin-bottom: 0;
    padding: 0 20px;
    font-size: 14px;
    color: #fff;
    line-height: 42px;
    height: 42px;
    background-color: #4e4e4e;
    border: 0;
    border-radius: 25px;
    position: relative;
    z-index: 100;
    cursor: text !important;
}

.container-home input::-webkit-input-placeholder,
.container-home input:-moz-placeholder,
.container-home input::-moz-placeholder,
.container-home input:-ms-input-placeholder {
    color: #fff;
}

.home-autosuggest .auto-suggest.full ul {
    top: 20px;
    padding-top: 20px;
    border-radius: 0 0 5px 5px;
}

.home-autosuggest .search-icon {
    color: #fff;
    top: 13px;
    z-index: 102;
    right: 13px;
}

.nav-inverse {
    background-color: #43464b;
    border-radius: 0 !important;
}

.navbar-brand {
    color: #fff !important;
    width: 118px;
    height: 52px;
    padding: 0;
    background-image: url('https://yout.com/static/images/yout-w-a.d06f09cb.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    float: none;
    display: inline-block;
}

.video-list-item:after {
    clear: both;
    content: ' ';
    display: table;
}

.yout-content {
    margin-top: 70px;
    margin-bottom: 70px;
}

.video-thumbnail.search-videos {
    width: 120px;
    height: 90px;
    float: left;
    overflow: hidden;
    text-align: center;
    background-color: #000;
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.video-thumbnail img {
    width: 100%;
}

.remove-video {
    position: absolute;
    border-radius: 0;
    right: 0;
    top: 0;
}

.yout-video,
.yout-profile {
    min-height: 80vh;
    max-width: 800px;
    background: #fff;
    margin-top: 50px;
    margin-bottom: 50px;
}

.similar-videos {
    padding: 5px;
}

.similar-videos .timeline-wrap {
    max-height: 35px;
}

.similar-videos .video-thumbnail {
    width: 160px;
    height: 90px;
    float: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.similar-videos .video-thumbnail:after {
    content: "\A";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100px;
    width: 100%;
    z-index: 2;
    transition: all 150ms cubic-bezier(.25, .46, .45, .94);
    background-color: transparent;
    background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .5) 100%);
}

.similar-videos .video-thumbnail .yout_play_button {
    top: inherit;
    Bottom: 5px;
    left: 25px;
    width: 30px;
    background-size: contain;
}

.similar-videos .video-description-container {
    margin-left: 0;
    padding-left: 0;
    vertical-align: middle;
    position: absolute;
    bottom: 0;
    line-height: 1em;
    color: #fff;
    width: 100%;
    z-index: 100;
}

.similar-videos .video-title {
    color: #fff;
    font-size: 12px;
    padding: 5px;
    line-height: 1.4em;
}

.similar-videos .timeline-item-header {
    font-size: 12px;
    position: relative;
    z-index: 100;
}

.similar-videos .video-description {
    display: none;
}

.video-layout-container-description {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    padding: 15px;
}

.video-layout-title {
    font-size: 20px;
    color: #000;
}

.video-layout-description {
    font-size: 12px;
    margin: 10px 0;
}

.tag {
    display: inline-block;
    cursor: pointer;
    color: #167ac6;
    font-weight: bold;
    padding: 5px 10px;
    background: transparent;
    font-size: 12px;
}

.record-video {
    padding: 0 15px;
    clear: both;
}

.record-video:after {
    clear: both;
    content: " ";
    display: table;
}

.record-video label {
    line-height: 30px;
    font-size: 14px;
    margin: 0;
}

.record-video .form-group a {
    color: #aeaeae;
    padding-top: 4px;
    font-size: .75em;
    position: absolute;
    left: 10px;
    top: -15px;
}

.record-video .form-group input,
.record-video .form-group select {
    font-size: 14px;
    border-radius: 3px;
    height: 30px;
    max-width: 100%;
}

.record-video .form-group {
    margin-bottom: 5px;
    clear: both;
}

.video-record-button {
    margin-bottom: 15px;
    display: inline-block;
    width: 100%;
}

.btn-yout {
    padding: 10px;
    font-size: 16px;
    background-color: #3DA8E4;
    border-radius: 4px;
    color: #fff;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.27);
    font-weight: bold;
    transition: 0.1s all ease-in;
    margin: auto;
}

.btn-yout:hover {
    background-color: #318FC3;
    color: #fff;
}

.header-item {
    display: inline-block;
    vertical-align: top;
    transition: .1s ease-in all;
}

.header-item.make-full {
    transition: .1s ease-in all;
}

.mobile-toggle {
    transition: .2s ease-in all !important;
}

.header-search form {
    width: 100%;
}

.hamb-icon {
    display: inline-block;
}

.header-search form input {
    border: 0;
    border-radius: 3px;
    width: 100%;
    color: #FFF;
    background-color: #2f3237;
    padding-right: 32px;
    height: 38px;
    cursor: text !important;
    font-size: 14px;
    padding-left: 40px;
}

.hamb-main-menu a {
    color: #fff;
    padding: 10px 13px;
    display: inline-block;
    font-size: 20px;
}

.header-search {
    max-width: 400px;
    width: 100%;
}

.header-search form {
    margin: 7px 0;
}

.header-main-link {
    padding: 10px 15px;
}

.home-autosuggest .autosuggest-list {
    top: 20px;
}

.home-autosuggest .autosuggest-list li:first-child {
    padding-top: 25px;
}

.autosuggest-list {
    top: 40px;
    box-shadow: 0 0 8px -1px #6d6c6c;
    padding: 0;
    text-align: left;
    background-color: #fff;
    color: #333;
    position: absolute;
    width: 100%;
    z-index: 10;
    line-height: 2em;
    list-style: none;
}

.autosuggest-list li {
    font-size: 16px;
    padding-left: 15px;
    cursor: pointer;
}

.autosuggest-list li.active,
.autosuggest-list li:hover {
    background-color: #e4e4e4;
}

.page-header {
    margin-top: 0;
}

.yout-gif img,
.yout-gif video {
    width: 100%;
    border-radius: 5px;
    margin-top: 50px;
    margin-bottom: 0;
}

.home-search-container p {
    opacity: .8;
    font-size: 15px;
    margin-top: 10px;
}

.record-available-logos {
    font-size: 20px;
}

.record-available-logos a {
    color: #fff;
}

.pro-home,
.settings-container .profile-header-image {
    margin-top: 50px;
}

.main-logo img {
    width: 100%;
    max-width: 300px;
}

.example-list a {
    color: inherit;
}

.record-available-logos i {
    margin: 0 5px;
}

.search-column-title {
    background-color: #111111;
    color: #fff;
    text-align: center;
    font-size: 12px;
    position: relative;
    line-height: 30px;
}

.content-padding {
    padding: 15px;
}

.content-padding.content-padding-big {
    padding: 10px 50px;
}

.btn-dark {
    background-color: #111111;
    color: #fff !important;
}

.btn {
    outline: none !important;
}

/* TIMELINE */
.timeline-item-container {
    border-bottom: 1px solid #ddd;
    padding: 5px;
    font-size: 12px;
    margin-bottom: 5px;
}

.timeline-thumb-wrap {
    float: left;
}

.timeline-thumb-wrap a span.timeline-photo {
    height: 35px;
    display: inline-block;
    background-size: cover;
    background-position: center;
}

.timeline-thumb-wrap a span {
    display: inline-block;
    line-height: 35px;
    width: 35px;
    text-align: center;
    background-color: #111;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    text-shadow: -1px 1px 0 #000;
}

.timeline-item-header {
    vertical-align: middle !important;
    font-size: 13px;
    padding-left: 5px;
    line-height: 1em;
    height: 35px;
    font-weight: bold;
}

.timeline-item-header a {
    color: #333;
    display: block;
}

.timeline-item-header small {
    font-weight: 400;
    color: #657786;
    padding-left: 3px;
    position: relative;
}

.timeline-item-text {
    height: 120px;
    line-height: 1em;
    display: table;
    width: 100%;
}

.timeline-item-text div {
    line-height: 20px;
    color: #2f3237;
    font-size: 12px;
    overflow-wrap: break-word;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
}

.timeline-item-text span {
    display: inline-block;
    max-width: 100%;
    line-height: 1.3em;
    font-size: 14px;
    width: 100%;
}

.timeline-container .timeline-list {
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

.profile-container .timeline-item-text span {
    max-width: 240px;
}

.timeline-item-image {
    height: 120px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

.timeline-item-image:after {
    content: "\A";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100px;
    width: 100%;
    z-index: 2;
    transition: all 150ms cubic-bezier(.25, .46, .45, .94);
    background-color: transparent;
    background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .4) 100%);
}

.timeline-item-title {
    position: absolute;
    bottom: 0;
    width: 100%;
    color: #fff;
    font-weight: 700;
    z-index: 10;
    padding: 5px;
}

.yahoo_empty {
    color: #767676;
    text-align: center;
    font-size: 14px;
}

.text-left {
    text-align: left !important;
}

.table-row {
    display: table-cell;
    vertical-align: top;
}

.sidebar-container.table-row {
    width: 280px;
}

/* SEARCH VIDEOS ITEMS */
.video-list-item-content {
    margin-bottom: 10px;
}

.video-list-item .video-thumbnail {
    position: relative;
}

.video-list-item .video-thumbnail .playlist-mask {
    background-color: rgba(0, 0, 0, 0.7);
    width: 50%;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
}

.video-list-item .video-thumbnail .playlist-mask i {
    margin: 0;
    font-size: 30px;
    color: #fff;
    position: absolute;
    right: 50%;
    top: 50%;
    margin-right: -15px;
    margin-top: -20px;
}

.video-list-item.box-video {
    margin-bottom: 15px;
    float: left;
    max-width: 185px;
    margin-right: 15px;
    width: 100%;
}

.video-description-container {
    margin-left: 140px;
}

.video-title {
    color: #167ac6;
    line-height: 1.2em;
    font-size: 14px;
    display: inline-block;
    cursor: pointer;
    width: 100%;
}

.video-description {
    font-size: 14px;
    word-wrap: break-word;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding-left: 0;
    padding-right: 0;
    color: #2f3237;
    line-height: 1.3em;
}

.video-list-item {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #f0f0f0;
}

.video-item-recorder {
    padding-top: 5px;
    margin-bottom: 0;
    clear: both;
    padding-bottom: 5px;
}

.video-list-item:after, video:after {
    clear: both;
    content: " ";
    display: table;
}

.video-item-recorder .dropdown-menu {
    top: 0;
    margin: 0;
    min-width: 100%;
    border: 0;
    background-color: #337ab7;
    padding: 0;
}

.video-item-recorder .dropdown-menu span,
.video-item-recorder .dropdown-menu a {
    color: #fff !important;
    font-size: 12px;
    border-bottom: 1px solid #245e90;
    display: inline-block;
    width: 100%;
    padding: 10px 15px;
}

.video-item-recorder .dropdown-menu a:last-child {
    border: 0;
}

.search-record-dropdown {
    display: inline-block;
    transition: .2s ease-in-out all;
}

.video-item-recorder .dropdown-menu a:hover {
    background-color: #286090 !important;
}

.record-circle {
    background-color: #e52529 !important;
    margin-right: 5px !important;
    border-radius: 20px;
    padding: 0;
    line-height: 1em;
    height: 12px;
    width: 12px;
    display: inline-block;
}

.videos-search-container {
    padding: 5px;
}

.search-record-dropdown.open {
    width: 140px;
}

/* LOADER */
@-webkit-keyframes ld {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

@-moz-keyframes ld {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

@-o-keyframes ld {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes ld {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

.m-progress {
    position: relative;
    opacity: .8;
    color: transparent !important;
    text-shadow: none !important;
}

.m-progress img {
    opacity: 0 !important;
}

.m-progress:hover,
.m-progress:active,
.m-progress:focus {
    cursor: default;
    color: transparent;
    outline: none !important;
    box-shadow: none;
}

.m-progress:before {
    content: '';

    display: inline-block;

    position: absolute;
    background: transparent;
    border: 1px solid #fff;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;

    box-sizing: border-box;

    top: 50%;
    left: 50%;
    margin-top: -12px;
    margin-left: -12px;

    width: 24px;
    height: 24px;

    -webkit-animation: ld 1s ease-in-out infinite;
    -moz-animation: ld 1s ease-in-out infinite;
    -o-animation: ld 1s ease-in-out infinite;
    animation: ld 1s ease-in-out infinite;
}

.timeline-container .timeline-list:before,
.videos-search-container .videos-list:before,
.playlist-videos.m-progress:before,
.upload-photo.m-progress:before {
    border: 1px solid #000;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

.btn-default.m-progress:before {
    border-left-color: #333333;
    border-right-color: #333333;
}

/* PLAYLIST */
.video-list-item {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #f0f0f0;
}

.video-list-item-content {
    margin-bottom: 10px;
}

.playlist-main-video .video-thumbnail,
.playlist-videos .video-thumbnail {
    width: 200px;
    height: 130px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.timeline-container .timeline-list,
.playlist-videos,
.videos-search-container .videos-list {
    min-height: 300px;
}

.playlist-videos .video-description-container {
    margin-left: 220px;
}

.video-title {
    color: #167ac6;
    line-height: 1em;
    font-size: 14px;
    cursor: pointer;
}

.playlist-main-video .form-group, .playlist-videos .form-group {
    color: #333;
    margin-bottom: 5px;
}

.playlist-main-video .form-group label, .playlist-videos .form-group label {
    line-height: 30px;
    font-size: 14px;
    margin: 0;
}

.playlist-main-video .form-group a, .playlist-videos .form-group a {
    color: #aeaeae;
    padding-top: 4px;
    font-size: .75em;
    position: absolute;
    left: 10px;
    top: -15px;
}

.playlist_video_anchor {
    float: left;
}

.video-form-group {
    max-height: 40px;
}

.clear-right {
    clear: right !important;
}

/* VIDEO */
.hide-hotness .sidebar-video-container {
    width: 0;
    max-width: 0;
}

.hide-hotness,
.hide-hotness .main-container.table-row {
    width: 470px;
    transition: .3s all ease-in;
}

.hide-hotness .show-hotness {
    display: block;
}

.sidebar-video-container {
    width: 170px;
    max-width: 170px;
    overflow: hidden;
    transition: .3s all ease-in;
}

.table-display {
    display: table;
    width: 100%;
    vertical-align: top;
}

.yout_mask {
    padding: 17px 0;
    font-size: 30px;
    color: #fff;
    line-height: 160px;
    position: relative;
    height: 200px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: #000;
    display: inline-block;
}

.play_video_action {
    cursor: pointer;
}

.yout_mask:after {
    position: absolute;
    background-color: rgba(0, 0, 0, .3);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
}

.yout_play_button {
    background-image: url(https://yout.com/static/images/yout-button.png);
    position: absolute;
    height: 30px;
    width: 42px;
    top: 50%;
    left: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: -15px;
    margin-left: -21px;
}

.yout_mask:hover .yout_play_button {
    background-image: url(https://yout.com/static/images/yout-button-active.png);
}

.mainvideo-container {
    background-color: #fafafa;
}

.range-cotainer {
    margin-bottom: 0 !important;
    background: #dcdcdc;
    padding-top: 5px;
    padding-bottom: 10px;
    margin-top: -5px;
}

.range-time {
    margin-bottom: 10px;
}

.range-time input {
    max-width: 90px;
    display: inline-block;
}

.range-time:after {
    clear: both;
    content: ' ';
    display: table;
}

.recorder-settings .form-group {
    margin-bottom: 5px;
    clear: both;
}

.recorder-settings label {
    line-height: 30px;
    font-size: 12px;
    margin: 0;
}

.recorder-settings .form-group .toggle-title-artist {
    color: #aeaeae;
    padding-top: 4px;
    font-size: .75em;
    position: absolute;
    left: 10px;
    top: -15px;
    padding-left: 5px;
    padding-right: 5px;
}

.noUi-target {
    padding: 0 16px !important;
}

.noUi-connect {
    background: #A9A9A9 !important;
}

.switch {
    text-align: left;
}

.switch .option-switch.active {
    background: #097ab7;
    color: #fff;
    border: 1px solid #204d74;
}

.switch .option-switch {
    cursor: pointer;
    background: #fff;
    color: #4a4a4a;
    border: 1px solid #ddd;
    display: inline-block;
    line-height: 28px;
    padding: 0 15px;
    margin-right: -5px;
}

.recorder-settings .form-group input,
.recorder-settings .form-group select {
    font-size: 14px;
    border-radius: 3px;
    height: 30px;
    max-width: 100%;
}

.timeline-thumb-wrap {
    width: 35px;
}

.timeline-wrap {
    width: 100%;
    vertical-align: middle;
    position: relative;
}

.date-ago {
    color: #777;
    font-weight: normal;
}

.selection_quality {
    display: none;
}

.selection_quality.active {
    display: block;
}

.video-loading .yout_mask,
.video-loading .form-control,
.video-loading button,
.video-loading .option-switch,
.video-loading .option-switch.active {
    background-color: #ccc;
    color: #fff;
    border: 0;
}

.video-loading .yout_mask:after {
    display: none;
}

.video-loaded {
    display: none;
}

.video-frame {
    position: relative;
}

.video-frame audio,
.video-frame video {
    width: 100%;
    max-height: 400px;
}

.video-frame.soundcloud video {
    max-height: 60px;
}

.video-frame.soundcloud {
    padding: 30px;
    background-position: center;
    background-size: cover;
}

.option-switch a {
    color: inherit;
}

.padding-top-less {
    padding-top: 0 !important;
}

.padding-bottom-less {
    padding-bottom: 0 !important;
}

.goal-container h3,
.goal-container h4 {
    font-size: 15px;
    margin-top: 0;
}

.goal-container .progress-bar {
    background-color: #ecb559;
}

.block-dark,
.block-dark a {
    color: #fff !important;
}

.white-dark,
.white-dark a:not(.btn) {
    color: #4a4a4a !important;
}

.goal-container .progress-bar span {
    color: #4a4a4a;
    position: absolute;
    top: 0;
    left: 20px;
}

.goal-container p {
    margin: 0 0 10px;
    font-size: 12px;
}

.gold-button {
    border: 1px solid #f0f0f0;
    padding: 10px 0;
    text-align: center;
    border-bottom: 1px solid #b16a02;
    border-radius: 4px 4px 5px 5px;
    background: linear-gradient(180deg, #fdda86 0, #e19d3c 100%), #fdda86;
    background-repeat: repeat;
    background-position: 0 0;
    background-origin: padding-box;
    background-clip: border-box;
    background-size: auto auto;
    box-shadow: 0 -1px 1px 0 rgba(255, 255, 255, .701961) inset, 0 1px 1px 0 #b16a02;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .498039);
    font-weight: 700;
    display: block;
    color: #fff;
}

b,
.bold,
.strong,
strong {
    font-weight: bold;
}

.old-terms {
    text-decoration: line-through;
}

.gold-button:hover {
    color: #fff;
}

.gold-button h4,
.gold-button h3 {
    font-size: 12px;
    margin: 0;
    font-weight: bold;
    text-transform: capitalize;
}

.gold-button h3 {
    font-size: 18px;
}

.language-selection {
    background-color: #111111 !important;
    border: 2px solid #000 !important;
    color: #fff !important;
    padding: 14px 12px;
    font-size: 13px;
    margin-bottom: 20px;
}

.language-selection:focus,
.language-selection:active,
.language-selection:hover {
    background-color: #000 !important;
    color: #fff !important;
}

.footer .open > .dropdown-menu {
    bottom: 100%;
    top: inherit;
    width: 500px;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.dropdown-menu-columns li a {
    display: inline-block;
    padding: 5px 0;
    width: 100%;
    color: #424242;
    font-weight: 300;
}

.dropdown-menu-columns li a:hover {
    text-decoration: underline !important;
}

.footer {
    font-size: 11px;
    color: #9e9e9e;
}

.foot-footer a {
    color: #fff;
}

.main-footer {
    margin-top: 30px;
}

.access-form {
    border: 1px solid #ececec;
    text-align: left;
}

.access-signup {
    margin-top: 15px;
}

.access-form, .modal-container {
    padding: 10px;
}

.block-gray {
    background-color: #fafafa;
    border-radius: 5px;
}

.lost-password-container {
    margin-top: 10px;
    display: inline-block;
    width: 100%;
}

.page-header {
    margin: 0 0 15px;
    padding: 0;
    font-size: 30px;
    line-height: 44px;
    text-shadow: none;
    font-weight: 700 !important;
    text-rendering: optimizeLegibility;
    border: 0 !important;
}

.alert {
    padding: 10px;
}

.profile-image {
    display: inline-block;
    padding: 17px;
    background-size: cover;
    overflow: hidden;
    border-radius: 3px;
    vertical-align: middle;
}

.profile-summary {
    background-color: #000;
}

.profile-summary .settings-profile {
    padding: 10px;
}

.profile-summary .settings-profile .settings-profile-membership {
    color: #00ff6a;
    font-size: 12px;
}

.profile-summary .settings-profile a {
    padding: 0;
    font-size: 12px;
}

.profile-username {
    display: inline-block;
    line-height: 34px;
    border-radius: 3px;
    vertical-align: middle;
    width: 34px;
    text-align: center;
    background-color: #fff;
    color: #111111;
    text-transform: uppercase;
}

.profile-heading {
    background-color: #f9f9f9;
}

.profile-heading .profile-heading-content {
    display: inline-block;
    margin: 20px auto auto;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    padding: 30px 30px 80px;
}

.profile-header-image {
    height: 85px;
    width: 85px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    margin: auto;
    position: relative;
}

.you-are-pro:before {
    content: ' ';
    position: absolute;
    background-image: url('https://yout.com/static/images/you_are_pro.png');
    width: 30px;
    height: 30px;
    top: -30px;
    background-size: cover;
    left: 0;
    background-position: center;
}

.profile-heading .profile-heading-content .profile-header-name {
    color: #456;
    font-weight: 700;
    font-size: 20px;
    line-height: 1em;
}

.profile-heading .profile-heading-content .profile-header-name .username {
    font-style: normal;
    display: inline-block;
    font-size: 9pt;
    color: #8c8c8c;
    position: relative;
}

.profile-heading .profile-heading-content .profile-header-name .header-actions {
    margin-top: 10px;
}

.list-tabs ul {
    display: inline-block;
    position: relative;
    width: 100%;
    text-align: center;
}

.nav-tabs > li {
    float: none;
    margin-bottom: -1px;
    display: inline-block;
}

.nav-tabs {
    border-bottom: 1px solid #ddd;
}

.tab-content {
    margin: 0;
}

.timeline-item-header .bio {
    font-weight: normal;
    font-size: 11px;
    margin-top: 5px;
    height: 26px;
    overflow: hidden;
}

.tab-content:after {
    clear: both;
    content: ' ';
    display: table;
}

.follow-item {
    padding: 10px;
}

.follow-list .follow-item:nth-child(odd) {
    background-color: #f9f9f9;
}

.follow-heading {
    font-size: 11px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.follow-heading .total-follow {
    font-size: 18px;
}

.profile-heading-follow {
    margin: 30px -15px 30px;
}

.profile-heading-follow:after {
    clear: both;
    content: ' ';
    display: table;
}

.profile-actions {
    margin-top: 20px;
}

.dark-light {
    background-color: #fafafa;
}

.form-action {
    margin-top: 20px;
}

.form-action .btn {
    text-transform: uppercase;
}

.border-radious-full {
    border-radius: 20px;
    padding: 10px 20px;
    height: inherit;
}

.border-radious {
    border-radius: 3px;
}

.pro-page h2,
.signup-page h2,
.settings-page h2 {
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    line-height: 1em;
    padding: 5px 0;
    text-transform: capitalize;
}

.pro-page {
    margin-bottom: 0 !important;
}

label {
    font-weight: bold;
}

.profile-sidebar-content {
    padding-top: 30px;
}

.profile-sidebar-content .profile-header-image {
    margin-bottom: 20px;
}

.profile-sidebar-content .bio {
    font-size: 16px;
    color: #888888;
}

.profile-sidebar-content .quotes {
    color: #5184ba;
    font-size: 20px;
    margin: 20px 0;
}

.profile-sidebar-content .profile-header-name .name {
    font-weight: bold;
    font-size: 16px;
}

.profile-header-name a {
    color: inherit;
    display: inline-block;
    position: relative;
}

.profile-sidebar-content hr {
    margin: 25px 0;
}

.upload-photo {
    overflow: hidden;
}

.upload-photo input {
    position: absolute;
    top: -100px;
}

.upload-photo img {
    max-width: 150px;
    opacity: 0.5;
}

.upload-photo {
    border: 2px dashed #ccc;
    cursor: pointer;
}

.upload-photo.active,
.upload-photo:hover {
    border-color: #4a4a4a;
}

.settings-menu {
    border-bottom: 1px solid #eee;
}

.settings-menu a {
    display: inline-block;
    padding: 10px 20px;
    color: #4a4a4a;
    font-weight: bold;
}

.settings-menu a:hover,
.settings-menu a.active {
    border-bottom: 2px solid;
}

.btn-upgrade {
    background-color: #0f0f0f;
    color: #fff !important;
    border-bottom: 2px solid #0f0f0f !important;
}

.settings-page .alert-danger h2,
.settings-page .alert-danger h2 span {
    color: #aa544f;
}

.settings-page .alert-warning,
.settings-page .alert-warning h2 {
    color: #eea236;
}

.settings-page .alert-danger h2 span {
    margin-top: 5px;
}

.bordered-right {
    border-right: 1px solid #eee;
}

.premium-types-container:after {
    clear: both;
    content: ' ';
    display: table;
}

.premium-type h3 {
    font-weight: bold;
    font-size: 18px;
    padding: 2px 0;
}

.premium-type h4 {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: normal;
}

.premium-type h3,
.premium-type h4 {
    margin: 0;
}

.premium-types-container {
    justify-content: space-between;
    border-radius: 0.4em;
    background-color: #f1f1f1;
    padding: 0.2em;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 1em;
}

.premium-type.active {
    color: black;
    background-color: white;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    margin: auto;
    border-right: 0;
}

.premium-type:hover {
    color: black;
}

.premium-type {
    cursor: pointer;
    box-sizing: border-box;
    padding: 1.2em 2em;
    text-align: center;
    border-radius: 0.3em;
    color: #888;
    width: 25%;
    border-right: 1px solid #ddd;
}

.premium-type:last-child {
    border-right: 0;
}

.tabled {
    display: table;
    width: 100%;
    height: 100%;
}

.table-cell {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

.tachado {
    text-decoration: line-through;
}

.username-alert {
    text-align: right;
    color: #ffa9a9;
}

.form-control.failed {
    background-color: #ffdede;
}

.premium-block video,
.premium-block img {
    max-width: 100%;
}

.why-upgrade-container h2 {
    color: #fff;
    margin-bottom: 20px !important;
}

.text-center {
    text-align: center !important;
}

.content-padding:after {
    clear: both;
    content: ' ';
    display: table;
}

.premium-block {
    position: relative;
    margin-top: 20px;
}

.premium-block .heading {
    text-transform: capitalize;
}

.premium-block .order {
    color: #fff;
    position: absolute;
    top: -26px;
    left: 19px;
    font-size: 25px;
    font-weight: bold;
}

.premium-block .heading {
    font-weight: bold;
    font-size: 20px;
}

.premium-block .description {
    font-size: 20px;
}

.pro-why-main-description {
    margin-top: 10px;
    font-size: 16px;
}

.pro-why-main-description a {
    color: inherit;
}

.follow-actions {
    margin-bottom: 30px;
}

.follow-actions .btn {
    text-transform: uppercase;
}

.timeline-letter {
    text-transform: uppercase;
}

form label {
    text-transform: capitalize;
}

.authorize-container form .form-group {
    background-color: #fff;
    padding-left: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
}

.authorize-container form .form-group .label-side {
    max-width: 150px;
    line-height: 34px;
    width: 100%;
    text-align: right;
}

.authorize-container form .form-group .label-side label {
    font-size: 12px;
    line-height: 1em;
    margin: 0;
    word-wrap: break-word;
}

.authorize-container form .form-group .input-side {
    margin-left: 160px;
}

.authorize-container form .form-group .input-side:after {
    clear: both;
    content: ' ';
    display: table;
}

.authorize-container form .form-group .input-side input {
    border-radius: 0;
    font-size: 13px;
}

.authorize-container form .form-group .input-side input[disabled] {
    background-color: #f0f0f0;
}

.authorize-container form .form-group .input-side input,
.authorize-container form .form-group .input-side select {
    background-color: #fff;
    font-weight: 700;
    height: 34px;
    max-width: 100%;
    width: 100%;
    outline: none !important;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.authorize-container form .form-group .input-side input:focus,
.authorize-container form .form-group .input-side select:focus {
    border-bottom: 2px solid #ddd;
}

.authorize-container form .form-group .cvc-container label {
    font-size: 10px;
    margin: 0;
    text-align: left;
}

.payment-type-selection img {
    margin: 20px 0;
    max-width: 100%;
}

.visa:after,
.mastercard:after,
.amex:after,
.jcb:after,
.diners:after,
.discover:after {
    position: absolute;
    top: 5px;
    right: 5px;
    content: ' ';
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 20px;
    width: 30px;
}

.visa:after {
    background-image: url('https://yout.com/static/images/visa.jpg');
}

.mastercard:after {
    background-image: url('https://yout.com/static/images/mastercard.jpg');
}

.amex:after {
    background-image: url('https://yout.com/static/images/amex.jpg');
}

.jcb:after {
    background-image: url('https://yout.com/static/images/jcb.jpg');
}

.diners:after {
    background-image: url('https://yout.com/static/images/diners.jpg');
}

.discover:after {
    background-image: url('https://yout.com/static/images/discover.jpg');
}

.community-actions {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 10001;
}

.backdrop {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 10000;
}

.community-actions .community-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #fff;
    text-align: center;
    border: 4px solid #000;
    box-sizing: border-box;
    border-radius: 20px 20px 0 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    color: inherit;
}

.community-actions .community-icon span {
    position: absolute;
    font-weight: bold;
    font-size: 30px;
    top: 0;
    line-height: 1em;
}

.community-actions .community-icon.com-recommend span {
    left: 50%;
    margin-left: -7px;
    margin-top: 5px;
}

.community-actions .community-icon.com-blah span {
    left: 50%;
    margin-left: -12px;
    top: -2px;
}

.community-actions .community-icon.com-cojudo span.eye {
    left: 11px;
    font-size: 35px;
}

.community-actions .community-icon.com-cojudo span.eye:first-child {
    margin-top: -16px;
}

.community-actions .community-icon.com-cojudo span.eye {
    margin-top: -8px;
}

.community-actions .community-icon.com-cojudo span.mouth {
    font-size: 31px;
    top: 4px;
    right: 6px;
}

.timeline-modal {
    background-color: #fff;
    position: absolute;
    height: calc(100vh - 100px);
    width: 350px;
    bottom: 70px;
    right: 10px;
    border-radius: 20px 20px 0 20px;
    overflow: hidden;
}

.blah-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: #fff;
    border-radius: 20px 20px 0 20px;
    padding: 15px;
    width: 450px;
    transform: translate(-50%, -50%);
}

input,
textarea,
select {
    outline: none !important;
    box-shadow: none !important;
}

.blah-action {
    margin-top: 20px;
}

.user-follow {
    overflow: hidden;
}

.simple-modal-box {
    max-width: 600px;
    position: fixed;
    z-index: 100001;
    top: 20%;
    transform: translateX(-50%);
    left: 50%;
    width: 100%;
}

.simple-modal-box h2 {
    margin-top: 0;
}

.simple-modal-box .block-white {
    padding: 20px;
}

.simple-modal-box .premium-type {
    padding-right: 15px;
    padding-left: 15px;
    text-transform: uppercase;
}

.img-full {
    max-width: 100%;
}

.simple-modal-box .heading {
    font-weight: bold;
    font-size: 20px;
}

.simple-modal-box .description {
    font-size: 20px;
}

.simple-modal-content {
    color: inherit !important;
}

.simple-modal-content video {
    max-width: 100%;
    width: 100%;
}

.timeline-username.you-are-pro:before {
    content: ' ';
    background-image: url('https://yout.com/static/images/you_are_pro.png');
    height: 15px;
    width: 15px;
    display: inline-block;
    background-position: center;
    background-size: contain;
    line-height: 35px;
    position: relative;
    vertical-align: top;
    top: -2px;
    left: 0;
}

.powered-by-search img {
    height: 40px;
    opacity: 0.7;
    margin-top: 20px;
}

.timeline-item-header .dropdown-menu a {
}

.ios-alert {
    background-color: red;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 20px 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    z-index: 10001;
}

#gif-this-video {
    width: 100%;
}

.gif-previous-container {
    max-width: 500px;
    margin: auto;
    line-height: 0;
}

#range-start-time,
#range-duration {
    clear: both;
    margin-top: 10px;
    padding: 0 !important;
    margin-left: 15px;
    margin-right: 15px;
}

.gif-maker-container .noUi-connect {
    background-color: #9933ff !important;
}

@keyframes _1bsGNYZ4Nwg1ZH9HjjM45b {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(-29px, 0, 0);
        transform: translate3d(-29px, 0, 0)
    }
}

@keyframes _1bsGNYZ4Nwg1ZH9HjjM45b {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(-29px, 0, 0);
        transform: translate3d(-29px, 0, 0)
    }
}

.gif-times {
    position: relative;
}

.gif-times input {
    text-align: center;
}

.gif-times span {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 34px;
    padding-right: 6px;
    font-weight: bold;
    color: #999;
}

.question-marks {
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 125px;
}

.question-marks span {
    transform: rotate(-30deg);
    display: inline-block;
}

.question-marks span:last-child {
    transform: rotate(30deg);
}

.error-reason {
    color: #fff;
    font-size: 25px;
    margin-top: 60px;
}

.error-reason a {
    color: #fff;
    font-weight: bold;
}

.cancel-modal {
    position: fixed;
    background-color: #fff;
    top: 50%;
    left: 50%;
    max-width: 400px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px 0 #999;
    padding: 40px;
    z-index: 10002;
    width: 100%;
}

.ios-device .community-actions {
    bottom: 60px;
}

.billed-message span {
    display: none;
}

.billed-message span.active {
    display: block;
}

.timeline-item-actions {
    position: absolute;
    right: 0;
    top: 0;
}

.timeline-item-actions a {
    color: #4a4a4a;
    font-size: 18px;
    line-height: 35px;
}

.timeline-item-actions a i {
    transform: rotate(90deg);
}

.show-hotness {
    display: none;
}

.video-user-action a {
    display: block;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    color: #fff;
    background-color: #000;
    font-weight: bold;
    text-transform: uppercase;
}

.video-user-action.show-hotness a {
    display: inline-block;
    line-height: 1.5em;
    position: absolute;
    left: -73px;
    padding: 20px 20px;
}

.mail-verification-alert {
    position: fixed;
    top: 71px;
    margin: 0;
    font-size: 12px;
    padding: 5px;
    border-radius: 0;
    z-index: 100;
}

.mail-verification-alert a:hover {
    text-decoration: underline !important;
}

.not-verified .yout-content {
    margin-top: 100px;
}

.golden-feature {
    padding: 25px;
    text-align: center;
}

.golden-feature h2 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: bold;
}

.golden-feature p {
    font-size: 13px;
    line-height: 1.3em;
}

.sponcership-box {
    width: 100%;
    padding: 15px;
    border: 4px dashed #444;
    height: 175px;
    display: table-cell;
    vertical-align: middle;
}

.sponcership-box h2 {
    margin: auto;
    text-align: center;
    color: #fff;
    font-size: 14px;
}

.borderless {
    border: 0 !important;
}

.blah-tabs li a {
    color: #4a4a4a;
    padding: 5px 15px;
}

.blah-tabs .tab-content {
    margin-top: -1px;
}

.bordered {
    border: 1px solid #ddd;
}

.yout-emoticons a {
    display: inline-block;
    width: 45px;
    height: 45px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 3px;
    border-radius: 3px;
}

.yout-emoticons a:hover {
    background-color: #f0f0f0;
}

.timeline-modal-content {
    height: calc(100vh - 170px);
    width: 100%;
    position: relative;
    padding: 10px;
    overflow-y: scroll;
}

.search-tabs,
.timeline-tabs {
    text-align: center;
    padding: 10px;
    margin: 0;
}

.search-tabs a,
.search-tabs span,
.timeline-tabs a,
.timeline-tabs span {
    color: #4a4a4a;
    font-weight: bold;
    border-bottom: 2px solid transparent;
    font-size: 16px;
    padding: 0 13px;
    width: 100%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-tabs li.active span,
.search-tabs li.hover span,
.search-tabs li.active a,
.search-tabs li:hover a,
.timeline-tabs li.active span,
.timeline-tabs li.hover span,
.timeline-tabs li.active a,
.timeline-tabs li:hover a {
    border-color: #4a4a4a;
}

.search-tabs li,
.timeline-tabs li {
    width: 49%;
    padding: 0;
}

.search-column-title .timeline-tabs {
    padding: 0;
}

.search-tabs li span,
.search-tabs li a,
.search-column-title .timeline-tabs li span,
.search-column-title .timeline-tabs li a {
    color: #fff;
}

.search-tabs li.active span,
.search-tabs li:hover span,
.search-tabs li.active a,
.search-tabs li:hover a,
.search-column-title .timeline-tabs li.active span,
.search-column-title .timeline-tabs li:hover span,
.search-column-title .timeline-tabs li.active a,
.search-column-title .timeline-tabs li:hover a {
    border-color: #fff;
}

#emo-com {
    max-height: 500px;
}

.emoti_yout {
    max-width: 60px;
}

.sponsor-page h1 {
    font-size: 50px;
    padding: 20px 0;
}

.sponsor-page h3 {
    font-weight: bold;
}

.sponsor-page p {
    font-size: 18px;
}

.spons-box {
    padding-bottom: 0 !important;
    padding-top: 7px;
}

.spons-box a {
    color: #4a4a4a;
}

.spons-head {
    font-weight: bold;
}

.spons-head i {
    color: #ef8a8a;
    margin-left: 5px;
}

.spons-body {
    font-size: 12px;
    line-height: 1.3em;
    padding-bottom: 10px;
}

.spons-content {
    display: inline-block;
    width: 100%;
    box-shadow: 4px 4px 0 #b1b1b1;
    padding: 5px 15px;
}

.timeline-item-text span a {
    color: #167ac6;
}

.timeline-item-text span a:hover {
    color: #009FDE;
}

.video-item-recorder button {
    font-size: 13px;
}

.timeline-item-text span a.timeline-item-image {
    margin-top: 10px;
}

.other-sites {
    transform: translateX(-50%);
    left: 50%;
    color: #4a4a4a;
}

.other-sites a {
    color: #4a4a4a;
}

.list-sites {
    display: inline-block;
}

.list-sites ul li {
    display: none;
}

.list-sites ul li.active {
    display: block;
}

.list-sites ul {
    background-color: #fde93f;
    color: #fff;
    padding: 5px 0;
    font-weight: bold;
    min-width: 150px;
    text-align: center;
    text-shadow: -1px 1px 2px #000;
    cursor: pointer;
}

.spons-footer .btn {
    padding: 2px 5px !important;
    font-size: 12px;
    font-weight: bold;
}

.spons-items p {
    line-height: 1.2em;
    margin-top: 5px;
    margin-bottom: 0;
}

.spons-body a {
    color: #777;
}

.spons-items img {
    max-width: 100%;
}

.spons-items li.divider {
    width: 100%;
    border-top: 1px dashed #adadad;
    padding-top: 10px;
    margin-top: 10px;
}

.how-to-record-site-section img {
    max-width: 100%;
}

.better_quality_available,
.better_video_quality_available {
    display: inline-block;
}

.better_quality_available a,
.better_video_quality_available a {
    display: inline-block;
    line-height: 1.3em;
    font-size: 12px;
    font-weight: bold;
    padding: 0 10px;
}

.timeline-item-type {
    position: absolute;
    right: 0;
    background-color: rgba(255, 255, 255, .9);
    font-weight: bold;
    padding: 2px 10px;
    font-size: 11px;
    color: #000;
}

.full-text div span {
    max-width: 285px;
}

.loader-container {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}

.lds-ripple {
    display: inline-block;
    position: relative;
    height: 58px;
    width: 58px;
}

.lds-ripple div {
    position: absolute;
    border: 4px solid #fff;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes lds-ripple {
    0% {
        top: 28px;
        left: 28px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: -1px;
        left: -1px;
        width: 58px;
        height: 58px;
        opacity: 0;
    }
}

.why-upgrade-container {
    margin-top: 0 !important;
}

.signup-page {
    margin-bottom: 0;
}

.top-marged {
    margin-top: 50px;
}

.btn-default {
    color: #333 !important;
    background-color: #fff !important;
}

.in-checkout-page .mail-verification-alert {
    display: none;
}

.in-checkout-page .not-verified .yout-content {
    margin-top: 60px;
}

.hamb-main-menu a.main-hamb i {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.in-checkout-page .community-actions {
    display: none !important;
}

.highlighted {
    font-weight: bold;
    background: #fffd54;
    color: #0f1115;
    display: inline-block;
    padding: 2px 3px;
}

.bio ul li {
    line-height: 1.3em;
    margin-bottom: 4px;
    font-size: 15px;
}

.hide-text {
    text-indent: -9999px;
}

.btn-lg {
    padding-top: 8px;
    padding-bottom: 8px;
}

.btn-warning {
    color: #856404 !important;
    background-color: #fff3cd !important;
    border-color: #ffeeba !important;
}

.search-goal-bar {
    max-width: 320px;
    margin: auto;
}

.search-goal-bar .spons-content {
    border: 1px solid #ddd;
}

.search-goal-bar .spons-box {
    margin-top: 20px;
}

.text-red {
    color: #cb2431 !important;
}

.btn {
    white-space: normal;
    font-weight: bold;
}

.premium-type.upsell {
    width: 70%;
}

.green {
    color: green;
}

.offer-description {
    font-size: 14px;
    line-height: 1em;
    margin: 5px 0;
}

.btn-upsell {
    color: #fff !important;
    background: linear-gradient(#f76100, #e85b00, #de5700) !important;
    border-color: transparent !important;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
    outline: none !important;
    font-weight: bold;
}

a.disabled {
    pointer-events: none !important;
    cursor: default !important;
}

.item-type {
    display: inline-block;
    font-size: 11px;
    color: #000;
    font-weight: bold;
    position: absolute;
    right: 0;
    background-color: rgba(255, 255, 255, .9);
    padding: 0 5px;
    text-align: left;
    top: 0;
}

.btn-shadow {
    box-shadow: 3px 3px 0 0 #386938;
}


.billing-heading {
    text-transform: uppercase !important;
    font-weight: 300;
    color: #6a737d !important;
    font-size: 13px;
    margin-bottom: 10px;
}

.billing-page i {
    margin-right: 3px;
}

.payment-info-item {
    border-top: 1px solid #eee;
    margin-bottom: 5px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.payment-info-item:last-child {
    border-bottom: 0;
}

.empty-message {
    font-size: 16px;
}

.newsletter_subscription label {
    font-size: 12px;
}

.newsletter_subscription .btn {
    position: absolute;
    top: 0;
    right: 0;
}

.newsletter_subscription {
    color: #fff;
    margin: 0;
}

.newsletter_subscription input {
    padding-right: 92px;
}

@keyframes colorchange {
    0% {
        background: #b52869;
    }
    12% {
        background: #f12e6a;
    }
    24% {
        background: #9c19ab;
    }
    36% {
        background: #6848a8;
    }
    48% {
        background: #ff3a8a;
    }
    60% {
        background: #ee69bb;
    }
    72% {
        background: #eadb34;
    }
    84% {
        background: #00e39e;
    }
    100% {
        background: #25c6c4;
    }
}

@-webkit-keyframes colorchange {
    0% {
        background: #b52869;
    }
    12% {
        background: #f12e6a;
    }
    24% {
        background: #9c19ab;
    }
    36% {
        background: #6848a8;
    }
    48% {
        background: #ff3a8a;
    }
    60% {
        background: #ee69bb;
    }
    72% {
        background: #eadb34;
    }
    84% {
        background: #00e39e;
    }
    100% {
        background: #25c6c4;
    }
}

@keyframes loading-bar-spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.gif-loader {
    width: 100%;
    animation: colorchange 10s infinite;
    -webkit-animation: colorchange 10s infinite;
    height: 300px;
    position: relative;
}

.gif-loading {
    animation: colorchange 10s infinite;
    -webkit-animation: colorchange 10s infinite;
}

.gif-loader .gif-spinner-icon {
    left: 50%;
    margin-left: -20px;
    top: 50%;
    margin-top: -20px;
    position: absolute;
    z-index: 19 !important;
    animation: loading-bar-spinner 400ms infinite;
}

.gif-loader .gif-spinner-icon div {
    width: 40px;
    height: 40px;
    border: solid 4px transparent;
    border-top-color: #00C8B1 !important;
    border-left-color: #00C8B1 !important;
    border-radius: 50%;
}

.accept-terms {
    margin-top: 10px;
    display: block;
    font-size: 12px;
}

.accept-terms,
.accept-terms a {
    color: #000;
}

.accept-terms a i {
    margin-left: 5px;
}

.gif-links {
    margin-bottom: 25px;
}

.gif-form:after {
    clear: both;
    content: ' ';
    display: table;
}

.gif-footer-actions {
    padding: 25px 15px;
    border-top: 1px solid #ddd;
}

.border-radious-off {
    border-radius: 0 !important;
}

.gif-previous {
    background-color: #000 !important;
}

.time-line {
    padding: 20px 5px;
}

.time-line span {
    font-size: 12px;
    color: #ccc;
    display: inline-block;
    width: 4.7%;
    text-align: center;
}

#range-start-time {
    margin: 0;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

#range-start-time .noUi-handle {
    height: 72px !important;
    outline: none !important;
}

.gif-maker-container .noUi-connect {
    background-color: rgba(0, 17, 253, 0.4) !important;
}

.gif-maker-container .noUi-horizontal .noUi-handle {
    width: 12px !important;
    right: -6px !important;
}

.gif-maker-container .noUi-handle:before {
    left: 6px !important;
}

.gif-maker-container .noUi-handle:after {
    left: 3px !important;
}

.floating-text {
    cursor: pointer;
    position: absolute;
    text-align: center;
    font-size: 42px;
    font-weight: bold;
    color: #fff;
    line-height: 1em;
    padding: 3px;
    top: 80%;
    border: 2px solid transparent;
}

.floating-text:not(.prevent):hover {
    cursor: move;
    border: 2px dashed #fff;
}

.gif-maker-container .form .btn-success,
.gif-maker-container .form .btn-danger {
    text-transform: uppercase;
}

.gif-menu-button {
    cursor: pointer;
    color: #000 !important;
    padding: 14px 12px;
    margin-bottom: 3px;
    display: inline-block;
    width: 100%;
    background-color: #f0f0f0;
    font-size: 15px;
}

.gif-menu-button i {
    margin-right: 5px;
}

.disabled-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.5);
}

.time-line.active {
    background-color: rgba(76, 152, 242, 0.8) !important;
    border-left: 5px solid #4c98f2;
    border-right: 5px solid #4c98f2;
}

.time-line.active span {
    color: #fff;
}

.gif-creator {
    border-radius: 2px;
    background-color: #00e39e;
    color: #fff;
    letter-spacing: 1px;
    padding-right: 15px;
    padding-left: 15px;
    text-shadow: -1px 1px 0 #000;
    text-transform: uppercase;
    margin-top: 20px;
}

.gif-action {
    margin-top: 15px;
}

.customize-title {
    padding: 5px 10px;
    font-weight: bold;
    color: #525559;
    letter-spacing: 1px;
}

.premium-type.current {
    background-color: #c5c5c5;
    color: #fff;
}

.icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #fff;
}

.icon-bar + .icon-bar {
    margin-top: 4px;
}

.record-available-logos a img {
    max-height: 18px;
    margin: auto;
}

.record-available-logos a {
    text-align: center;
    display: inline-block;
    min-width: 20px;
}

.record-available-logos a .more {
    color: #fff;
    line-height: 17px;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 4px;
    font-weight: bold;
}

.timeline-item-actions a {
    display: inline-block;
    text-align: center;
    padding: 0 5px;
}

.timeline-item-actions .icon-bar {
    background-color: #000;
    width: 5px;
}

.btn-danger {
    background-color: #d9534f !important;
    border-color: #d43f3a !important;
}

.youtstore-link {
    color: #fff;
    padding: 15px 10px;
    display: inline-block;
}

.dropdown-plans {
    display: inline-block;
}

.dropdown-plans li:last-child {
    border: 0 !important;
}

.dropdown-plans li {
    border-bottom: 1px solid #ccc !important;
}

.discount-off {
    display: inline-block;
    background-color: #007739;
    color: #fff;
    padding: 3px 10px;
    border-radius: 3px;
    line-height: 1em;
    font-weight: bold;
    text-shadow: 1px 1px 0 #000;
}

.lifetime-container {
    clear: both;
}

.lifetime-wrapper img:nth-child(2n) {
    max-width: 60px;
}

.lifetime-wrapper img {
    max-width: 30px;
    display: inline-block;
    vertical-align: bottom;
}

.lifetime-wrapper {
    border: 5px dashed #ffc751;
    border-radius: 5px;
    display: inline-block;
    padding: 20px 30px;
    background-color: #ffe89b;
}

.stars-collection {
    position: absolute;
    width: 100%;
    left: 0;
    top: -50px;
}

.lifetime-wrapper span {
    font-size: 40px;
    font-weight: bold;
}

.lifetime-container {
    clear: both;
    margin-top: 70px;
}

.card-listing label input {
    margin-right: 10px;
}

.card-listing label {
    font-weight: normal;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 5px;
    min-width: 200px;
    cursor: pointer;
}

.card-listing label .card-brand {
    margin-right: 5px;
    font-weight: bold;
}

#rateModal .modal-dialog {
    width: 100%;
    margin: 0;
    height: 100%;
}

#rateModal .modal-content {
    border: 0;
    border-radius: 0;
    min-height: 100%;
    background: #f5f5f5;
}

#rateModal .modal-header {
    background: #000;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}

#rateModal .close-modal-icon {
    display: inline-block;
    line-height: 50px;
    vertical-align: top;
    float: right;
}

#rateModal .close-modal-icon img {
    height: 25px;
    line-height: 0;
}

.exceeded-wrapper {
    background-color: #fefde7;
    border-radius: 1ex;
    border: .1ex solid rgba(0, 0, 0, .1);
    font-size: 18px;
    line-height: 50px;
    margin-bottom: 20px;
}

.expanded {
    width: 100%;
}

.exceeded-wrapper span {
    color: #ff3e7e;
    font-size: 25px;
    vertical-align: bottom;
}

#rateModal .plan-item {
    color: #333;
    text-align: center;
    background-color: #fff;
    border: 1px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .1);
    border-radius: 5px;
    padding: 35px 0;
    display: inline-block;
    width: 100%;
}

#rateModal .plan-item .plan-name {
    font-weight: 600;
    font-size: 20px;
    color: #000;
    margin: 10px 0;
}

#rateModal .plan-item .plan-price {
    font-weight: bold;
    color: #ff3e7e;
    font-size: 42px;
}

#rateModal .plan-item .plan-button {
    margin-top: 30px;
}

#rateModal .plan-item .plan-price span {
    font-size: 20px;
    vertical-align: baseline;
    display: inline-block;
}

#rateModal .plan-item .save {
    position: absolute;
    background-image: url(/static/images/ticket.svg);
    background-position: center;
    background-repeat: no-repeat;
    width: 48px;
    height: 57px;
    color: #fff;
    font-size: 11px;
    padding-right: 11px;
    padding-top: 10px;
    top: -25px;
    left: 25px;
}

#rateModal .plan-item .best {
    position: absolute;
    background-color: #ff3e7e;
    color: #fff;
    left: 0;
    width: 100%;
    top: 10px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 5px 0;
}

#rateModal .plan-item.active {
    background: #fffef4;
}

#rateModal .container {
    max-width: 1120px;
    width: 100%;
}

.floating-text.prevent {
    display: inline-block;
    width: 100%;
    left: 0;
    right: 0;
}

.goal-container a {
    text-decoration: underline !important;
}

.loupe {
    position: absolute;
    z-index: 10001;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    line-height: 1em;
}

.loupe svg {
    height: 20px;
    width: auto;
}

.autosuggest input {
    padding-left: 45px;
}

.home-search-container {
    max-width: 584px;
    margin: auto;
}

.how-to-record-site-section ::marker {
    font-size: 23px;
    font-weight: bold;
}

.hide-example-list {
    display: none;
}

.total-hours {
    font-weight: bold;
}

.metadata-fields label input {
    display: inline-block;
    height: inherit !important;
}

.metadata-fields label {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em;
}

.yout-tooltip {
    position: relative;
    display: inline-block;
}

.yout-tooltip-content.active {
    display: inline-block;
}

.yout-tooltip-content {
    position: absolute;
    bottom: 100%;
    border: 2px solid #4a4a4a;
    padding: 10px;
    border-radius: 5px;
    display: none;
    background-color: #fff;
    font-size: 12px;
    line-height: 1.3em;
    width: 200px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.yout-tooltip-content.active:after {
    content: ' ';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #000000 transparent transparent transparent;
    position: absolute;
    bottom: -7px;
    left: 34%;
}

.metadata-fields ul li input {
    display: inline-block;
    margin: 0;
}

.metadata-fields ul li span {
    display: inline-block;
    max-width: 81px;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.how-to-video-link a {
    font-weight: bold;
    font-size: 12px;
}

.mp4-how-to {
    display: none;
}

.open-yout-tooltip {
    color: #949494;
    font-weight: bold;
    font-size: 12px;
    display: inline-block;
    vertical-align: top;
}

a.quality-info-anchor span {
    color: #333;
}

.quality-mp4-info {
    display: none;
}

.how-dvr {
    height: 340px;
}

.w640 {
    width: 640px;
    max-width: 640px;
}

.min-margin {
    margin: 10px 0;
}

.br-disclaimer {
    max-width: 360px;
    margin: auto;
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    line-height: 1.5em;
}

.superheader a {
    text-decoration: underline !important;
}

.superheader, .superheader a {
    color: #fff;
    font-size: 12px;
}

.playlist-example img {
    filter: blur(2px);
}

.tiktok {
    line-height: 0;
    display: inline-block;
}

.tiktok svg {
    height: 18px;
    width: auto;
}

.record-available-logos .dropdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}