﻿/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
    content: "\e114"; /* adjust as needed, taken from bootstrap.css */
    float: right; /* adjust as needed */
    color: grey; /* adjust as needed */
}

.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}

.panel-toggle {
    text-align: left !important;
}

.panel-toggle span {
    float: right;
}

.modal-top {
    z-index: 1060 !important; /* Higher than Bootstrap's default modal */
}

/*.modal-backdrop {
    z-index: 1070 !important;*/ /* Higher backdrop for second modal */
/*}*/

/*-------------------------------*/

.icon-pointer {
    cursor: pointer;
}

td.other-website-client {
    background-color: cornflowerblue;
}

    td.other-website-client a:link {
        /*color: yellow;*/
    }

dt, dd {
    padding-top: 12px;
}

/*-------------------------------*/

.dl-horizontal {
    margin-bottom: 0;
}

.dl-horizontal dt {
    white-space: normal;
    /*padding-top: 12px;*/
    /*margin-top: 12px;*/
}

@media (min-width: 768px) {
    .dl-horizontal.dl-horizontal-wide {
        /*width: 600px;*/
    }

    .dl-horizontal.dl-horizontal-wide dt {
        width: 200px;
    }

    .dl-horizontal.dl-horizontal-wide dd {
        margin-left: 220px;
    }
}

/*-------------------------------*/

.dl-narrow {
}

.dl-narrow dt {
    width: 60px;
}

.dl-narrow dd {
    margin-left: 80px;
    width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*-------------------------------*/

.dl-narrow2 {
}

.dl-narrow2 dt {
    width: 75px;
}

.dl-narrow2 dd {
    margin-left: 85px;
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*-------------------------------*/

.dl-narrow3 {
}

.dl-narrow3 dt {
    width: 100px;
}

.dl-narrow3 dd {
    margin-left: 110px;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*-------------------------------*/

.dl-narrow4 {
}

.dl-narrow4 dt {
    width: 100px;
}

.dl-narrow4 dd {
    margin-left: 110px;
    width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*-------------------------------*/

.table-responsive {
    z-index: 999;
    overflow-y: auto !important;
}

.text-white {
    color: white;
}

.navigation-menu a:link {
    color: white;
}

.text-gray {
    color: #333;
}

.thumbnail .small {
    margin-bottom: 0px;
}

.glyphicon-spin {
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}

.dropdown-menu {
    min-width: 200px;
}

.dropdown-menu.columns-2 {
    min-width: 400px;
}

.dropdown-menu.columns-3 {
    min-width: 600px;
}

.dropdown-menu li a {
    padding: 5px 15px;
    font-weight: 300;
}

/*.dropdown-menu {
    overflow-y: visible !important;
    z-index: 999;
    ul {
        overflow-y: visible !important;
    }

    li {
        overflow-y: visible !important;
    }

    li:hover {
        cursor: pointer;
    }
}*/

.ui-autocomplete {
    z-index: 9999 !important;
}

#artistNameContainer {
    display: block;
    position: relative
} 

.table td {
    font-size: smaller;
}

.multi-column-dropdown {
    background-color: white;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.multi-column-dropdown li a {
    display: block;
    clear: both;
    line-height: 1.428571429;
    /*    color: #333;*/
    white-space: normal;
}

.multi-column-dropdown li a:hover {
    text-decoration: none;
    color: #262626;
    background-color: #999;
}

@media (max-width: 767px) {
    .dropdown-menu.multi-column {
        min-width: 240px !important;
        overflow-x: hidden;
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

/*dt {
    clear: both;
}*/
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.input-file {
    /*width: 280px;*/
    /*text-align: left;*/
}

.bootstrap-tagsinput {
    width: 280px;
}

.dropdownlist-search {
    width: 280px;
}

.label {
    line-height: 2;
}

.exception-text textarea {
    max-width: 100%;
}

.exception-text input {
    max-width: 100%;
}

/*.form-horizontal input, select, textarea {
    max-width: 280px;
}*/

/*input,
select {
    max-width: 280px;
}*/

#searchClear, #popupSearchClear {
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #ccc;
}

.div-hidden {
    display: none;
    visibility: hidden;
}

.panel-black {
    border-color: #000000;
}

    .panel-black > .panel-heading {
        color: #FFFFFF;
        background-image: none;
        background-color: #000000;
    }

    .panel-black > .panel-body {
        background-image: none;
        background-color: #f9f9f9;
    }

.panel-gray {
    border-color: #000000;
}

    .panel-gray > .panel-heading {
        color: #FFFFFF;
        background-image: none;
        background-color: #808080;
    }

    .panel-gray > .panel-body {
        background-image: none;
        background-color: #f9f9f9;
    }

.btn-submit {
    width: 150px;
}

#dropzone {
    background: white;
    border: black dashed 3px;
    /*width: 200px;
    padding: 50px;*/
    text-align: center;
    color: black;
    min-height: 100px;
    max-width: 600px;
}

.inline {
    display: inline-block;
    vertical-align: middle;
}

.clearBoth {
    clear: both;
}

.video-placeholder {
    height: 1720px;
}

.video-section .pattern-overlay {
    /*background-color: rgba(71, 71, 71, 0.29);*/
    background-color: rgba(71, 71, 71, 0.0);
    padding: 110px 0 32px;
    min-height: 1500px;
    /* Incase of overlay problems just increase the min-height*/
}

.bg-white {
    background-color: #ffffff;
}

.vertical-center {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(249, 249, 249, 0.7);
}

.label-text {
    padding-top: 7px;
}

.img-thumbnail-red {
    /*background-color: #4cff00;*/
    border: 1px solid #be0000;
}

.navbar-nav > li > a.profile-image {
    padding-top: 10px;
    padding-bottom: 10px;
}

.profile-image {
    padding-top: 10px;
    padding-bottom: 10px;
}
/* Screenshot radiobox
-------------------------------------------------- */
.scrollable-panel {
    height: 500px;
    overflow-y: scroll;
    /*width: 100%;*/
}

.radio-screenshot input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

    /* IMAGE STYLES */
    .radio-screenshot input + img {
        cursor: pointer;
    }

    /* CHECKED STYLES */
    .radio-screenshot input:checked + img {
        outline: 2px solid #f00;
    }

/* MARGIN MESSAGE
-------------------------------------------------- */

.mt-0,
.my-0 {
    margin-left: 0 !important;
}

.mt-1,
.my-1 {
    margin-top: 0.25rem !important;
}

.mt-2,
.my-2 {
    margin-top: 0.5rem !important;
}

.mt-3,
.my-3 {
    margin-top: 1rem !important;
}

.padding12px {
    padding-top: 12px;
}

.mlr-waveform {
    padding-left: 8px;
    padding-right: 8px;
}

/* WAVEFORM CURSOR
-------------------------------------------------- */

.preview-image-waveform {
    position: relative;
}

.cursor-waveform {
    position: absolute;
    display: block;
    height: 80px;
    width: 2px;
    /*background: #00008077;*/
    background: #E64865BB;
}

.input-tiktok-start {
    width: 150px;
    /*margin: 40px;*/
}

/* VALIDATION MESSAGE
-------------------------------------------------- */

.field-validation-valid {
    display: none;
}

.validation-summary-valid {
    display: none;
}

/* LINK COLOR
-------------------------------------------------- */

.link-white {
    color: #9d9d9d;
}

a.link-white:hover,
a.link-white:focus {
    color: #ffffff;
    text-decoration: none;
}

.link-bright {
    color: #ffffff;
}

a.link-bright:hover,
a.link-bright:focus {
    color: #ffffff;
    text-decoration: none;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (max-width: 768px) {
    h1 {
        font-size: 35px;
    }

    h2 {
        font-size: 25px;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 17px;
    }
    /*#videoBackgroundElement {
        height:700px; 
        z-index: 0;
    }*/
}

@media (min-width: 768px) {
    .dl-wide dt {
        width: 220px;
    }

    .dl-wide dd {
        margin-left: 240px;
    }

    /*-------------------------------*/

    .dl-product {
        margin-top: 0;
    }

    .dl-product dt {
        width: 120px;
    }

    .dl-product dd {
        margin-left: 140px;
    }
}
