:not(:defined) {
    display: none;
}

/* Large desktop screens only */
@media only screen and (min-width: 1025px) {
    /*#page-content {
        background-color: red;
    }*/
    /* Layout Overides - Decreasing spacing between coloumns and inside columns */
    .no-left-padding {
        padding-left: 0 !important;
    }

    .less-right-padding {
        padding-right: 10px !important;
    }

    .no-right-padding {
        padding-right: 0 !important;
    }

    /* Footer difference for large desktop screens*/
    #page-content + footer .social-icons {
        margin-bottom: 0;
        margin-top: 8px;
    }

    #page-content + footer {
        padding-bottom: 0 !important;
    }

    #timeline-boxes {
        /*        background-color: red;*/
        background-color: #f9fafc;
        /*background-color: red;*/
    }

    #video-tagging-box, #edit-video-event-box, #video-event-information-box, #more-box {
        border: none !important;
    }
}

/* Small devices/tablets upwards */
@media only screen and (min-width: 768px) {
    .video-right-padding {
        padding-right: 0 !important;
    }

    #timeline-boxes {
        width: 32%;
    }

    /* right box on the timeline page */
    #timeline-boxes {
        padding-right: 0;
        padding-left: 0;
        overflow-y: scroll;
        margin-bottom: 0 !important;
        border-bottom: 1px solid #dbe1e8;
        /*    border-right: 1px solid #dbe1e8;*/
        /* To match the curve of the tabs*/
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
    }
}

.single-box {
    padding: 10px !important;
}



.indent {
    padding-left: 10px;
}

.double-indent {
    padding-left: 20px;
}

/* -----------------------------
   Timeline
----------------------------- */
.tagging_button_box, #edit-video-event-time-btn, #matrixTabLink, #timelineTabLink, .edit-mode-tab-row, .label_button, .playlist-centre-box-counter {
    cursor: pointer;
}


#video-tagging-box, #edit-video-event-box, #video-event-information-box, #more-box {
    background-color: #f9fafc;
    /*background-color: red;*/
}

#video-playlists-vis {
    margin-bottom: 15px;
}

/*#minusVideoEventStartTime, #plusVideoEventStartTime,
#minusVideoEventEndTime, #plusVideoEventEndTime {
    background-color: #f9fafc;
    padding: 0px 2px 2px 2px !important;
}
#minusVideoEventStartTime:hover, #plusVideoEventStartTime:hover,
#minusVideoEventEndTime:hover, #plusVideoEventEndTime:hover {
    background-color: #3498db;
}*/
/*#video-event-time-col .btn-info {
    color: #2979AF;
}
#video-event-time-col .btn-info:hover {
    color: #ffffff;
}*/

/* Giving all the inputs the same background colour */
/*#edit-video-event-box input, #video-event-information-box input,
#edit-video-event-box textarea, #video-event-information-box textarea,*/
/* labels*/
/*#edit-video-event-form-container #labelTagInputWrapper, #edit-video-event-form-container div.tagsinput {
    background-color: #f9fafc;*/
/*background-color: red;*/
/*}*/

/* right box on the timeline page */
#video-tagging-box, #edit-video-event-box, #video-event-information-box, #more-box {
    /*    border-bottom: 1px solid #dbe1e8;
*/
    border-right: 1px solid #dbe1e8;
    border-left: 1px solid #dbe1e8;
    border-top: none !important;
}

/*#timeline-boxes {
    margin-bottom: 10px;
}*/
#tabs-row {
    padding: 0;
    margin: 0;
    text-align: center;
    background-color: white;
}

#tabs-row .tab {
    background-color: white;
    border-bottom: 1px solid #dbe1e8;
    font-size: 1em;
    font-weight: 600;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    padding: 6px 0;
    color: #064B82;
}

#tabs-row .tab.active {
    /*background-color: #f9fafc; */
    background-color: #f9fafc;
    border-top: 1px solid #dbe1e8;
    border-left: 1px solid #dbe1e8;
    border-right: 1px solid #dbe1e8;
    border-bottom: none;
}

/*#tabs-row a .tab:hover {
    background-color: #1EB1F1;
    color: white;
    border-top: 1px solid #1EB1F1;
    border-left: 1px solid #1EB1F1;
    border-right: 1px solid #1EB1F1;
}*/
/*#tabs-row a .tab.active{
    color: white;
}*/


#timeline-boxes .block-title h2 {
    font-size: 14px;
}

/* The icons and buttons */
#timeline-boxes .pull-right.box-options button {
    font-size: 12px;
    padding: 3px 0;
}

#timeline-boxes .pull-right.box-options a {
    font-size: 10px;
}

#video-tagging-panel-dropdown, #video-tagging-panel-raiseup {
    height: 26px !important;
    width: 26px !important;
    line-height: 23px !important;
    font-size: 13px !important;
}

#video-tagging-panel-dropdown {
    padding-top: 2px;
}

#editTaggingPanel-btn {
    height: 26px !important;
    width: 26px !important;
    padding: 5px 8px !important;
}

#editTaggingPanel-btn i {
    position: relative;
    left: -2px;
    top: 1px;
    font-size: 12px;
}

.edit-btn {
    background-color: #3498db;
    border-color: #3498db;
    color: #ffffff;
    border-radius: 3px;
}

.edit-btn:hover {
    background-color: #064B82;
}

.edit-btn.active:hover {
    background-color: #3498db;
}

.edit-btn.active {
    background-color: #064B82;
}

.edit-btn i {
    padding: 5px 6px;
}

#edit-video-event-time-btn {
    position: absolute;
    top: 1px;
    z-index: 1000;
}

/*#edit-video-event-time-btn i {
    padding: 6px 7px;
}*/


/* telestration journey related 
--------------------------------- */
#new-telestration-btn-col {
    padding-left: 0;
}

.white-btn {
    border: #064B82 solid 1px;
    border-bottom: #064B82 solid 1px !important;
    border-radius: 5px;
    color: #064B82;
    background-color: white;
}

#telestration-time-adjustment-exit-btn {
    margin-right: 10px;
}

#open-telestration-btn {
    border: #064B82 solid 1px;
    border-bottom: #064B82 solid 1px !important;
    border-radius: 5px;
    color: #064B82;
    margin-top: 1px;
    text-align: center;
    padding: 3px 7px;
    font-weight: 600;
    background-color: white;
    position: relative;
    top: -5px;
    left: 5px;
    font-size: 13px;
    margin-bottom: 5px;
}

/* active button */
#open-telestration-btn:hover {
    background-color: #064B82;
    color: #ffffff;
    z-index: 1000;
}

#list-of-telestrations-col {
    padding-left: 5px;
}

/* List of telestrations - buttons*/
#list-telestrations-btns-row {
    margin-left: 0 !important;
}

#list-telestrations-btns-row div {
    padding: 0;
    text-align: left !important;
}

/* Review tab list of telestrations buttons row*/
#review-tab-drawing-tab-content #list-telestrations-btns-row {
    margin-bottom: 3px;
}

.listedTelestrationBtn {
    background-color: #064B82 !important;
    color: #ffffff !important;
    border: #064B82 solid 1px !important;
    border-bottom: #064B82 solid 1px !important;
    padding: 3px 10px;
    width: 95%;
}

.listedTelestrationBtn:hover {
    background-color: #3498db !important;
    color: #ffffff !important;
    border: #3498db solid 1px !important;
}

.listed-telestration-option-btn {
    padding: 3px 7px;
}

#list-of-telestrations-col {
    margin-bottom: 20px;
}

#telestration-pick-time-col #newTelestrationListOfTelestrations {
    margin: 10px 0 10px 10px;
}


/* edit mode - telestration - started drawing tool journey */
#telestration-pick-time-container {
    text-align: center;
    padding-top: 20px;
}

#modal-create-telestration-info .modal-body h2 {
    text-align: center;
}

#telestration-pick-time-container h2, #modal-create-telestration-info .modal-body h2, #edit-mode-default-message h2, #review-default-message h2 {
    font-weight: 800;
    font-size: 21px;
    font-weight: 700;
    color: #064B82;
    text-align: center;
}

#telestration-pick-time-container h3, #modal-create-telestration-info .modal-body h3 {
    font-size: 16px;
    font-weight: 500;
    padding: 0 25px;
    margin-top: 35px;
}

#telestration-pick-time-container button, #modal-create-telestration-info .modal-body button {
    float: right;
    pointer-events: none;
    margin-right: 20px;
    /*    font-size: 1em; */
    padding: 2px 5px;
    opacity: 0.6;
}

#telestration-pick-time-container button:hover, #modal-create-telestration-info .modal-body button:hover {
    background-color: #3498DB !important;
    border: solid 1px #3498DB !important;
}


#telestration-range-slider-zoom-minus,
#telestration-range-slider-zoom-plus,
#range-slider-zoom-plus,
#range-slider-zoom-minus {
    border: #064B82 solid 1px !important;
    background-color: #ffffff;
    border-radius: 3px;
}

#telestration-range-slider-zoom-minus:hover,
#telestration-range-slider-zoom-plus:hover,
#range-slider-zoom-plus:hover,
#range-slider-zoom-minus:hover {
    background-color: #064B82 !important;
    color: #ffffff !important;
}


/* ---------------------------
Event modal 
------------------------------
time picker style override */
#modal-regular .control-label, #modal-record .control-label {
    text-align: left;
}

.bootstrap-timepicker-widget table td a {
    color: #064B82;
}


#timeline-boxes .bootstrap-timepicker-widget.dropdown-menu.open {
    z-index: 1000;
}

#timeline-boxes .bootstrap-timepicker-widget input {
    padding-top: 10px;
    padding-bottom: 10px
}

#timeline-boxes .bootstrap-timepicker-widget td.separator {
    padding-top: 0;
}

.bootstrap-timepicker-widget.dropdown-menu tbody:after {
    content: 'Mins';
    position: absolute;
    left: 8px;
    bottom: 53px;
    z-index: 1000;
    font-size: 0.9em;
}

.bootstrap-timepicker-widget.dropdown-menu tbody:before {
    content: 'Secs';
    position: absolute;
    right: 8px;
    bottom: 52px;
    z-index: 1000;
    font-size: 0.9em;
}

#modal-add-event-audio-upload .modal-footer, #modal-add-event-microphone-rec .modal-footer {
    margin-top: 15px;
}

/* Mobile upwards */
/* --------------------------------------------- */
@media (min-width: 992px) {
    #voice-note-col {
        padding: 0;
        padding-top: 4px;
        padding-right: 5px;
        text-align: right;
    }

    /* Rec Modal */
    #modal-rec-clip-wrapper .form-group, #modal-regular .form-group {
        margin-bottom: 0;
    }

    /* Rec and Event modal styling 
    /* --------------------------------------------- */
    #modal-regular .modal-content,
    #modal-add-event-audio-upload .modal-content, #modal-add-event-microphone-rec .modal-content {
        width: 475px;
        margin-left: 60px;
    }

    #modal-rec-clip-audio-upload .modal-content, #modal-rec-clip-microphone-rec .modal-content {
        width: 475px;
    }
}

/* Mobile only */
@media only screen and (max-width: 600px) {
    #endTimeLabel {
        margin-top: 15px;
    }

    #addEventUploadAudioFileBtn {
        margin-top: 10px;
    }

    #recClipMicrophoneRecordCol {
        margin-top: 18px !important;
    }

    #recClipMicrophoneRecordStart {
        position: relative;
        top: -50px !important;
        left: 36px !important;
    }

    #recClipRecordingImg {
        position: relative;
        top: -72px !important;
        right: -24px !important;
    }

    #modal-rec-clip-wrapper #recordModalContent, #modal-regular .modal-body {
        padding-top: 10px;
    }

    #modal-rec-clip-wrapper #recordModalContent, #modal-regular .modal-body {
        padding-bottom: 0;
    }

    #rec-audio-form-group {
        margin-bottom: 0;
    }

    #voice-note-col {
        padding-left: 0;
    }

    /* So the initial box for these modes meets the accordion tab content button */
    #video-event-information-box, #edit-video-event-box {
        min-height: 100px;
    }
}

/* iPad - portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    #addEventUploadAudioFileBtn {
        margin-top: 10px;
    }

    #startTimeLabel, #endTimeLabel {
        text-align: left;
    }

    #voice-note-col {
        padding-left: 0;
    }

    #deleteAudioFile a {
        position: relative;
        top: -12px;
        left: -12px;
    }

    /* So the initial box for these modes meets the accordion tab content button */
    #video-event-information-box, #edit-video-event-box, #more-box {
        min-height: 110px !important;
    }
}

/* Edit event audio upload buttons positioning */
#recoringImg {
    height: 75px;
    width: 75px;
    position: relative;
    right: 11px;
    top: -11px;
}

/* Event and Rec modal audio upload buttons positioning */
#addEventMicrophoneRecordStart, #recClipMicrophoneRecordStart {
    position: relative;
    right: -37px;
    top: -43px;
    height: 31px;
}

#addEventUploadAudioFileBtn, #recClipUploadAudioFileBtn {
    position: relative;
    right: 1px;
    top: 4px;
    height: 31px;
}

#addEventRecordingImg, #recClipRecordingImg {
    height: 75px;
    width: 75px;
    position: relative;
    right: -27px;
    top: -54px;
}


#addEventMicrophoneRecordCol {
    height: 0;
}

#modal-regular .modal-body {
    padding-bottom: 0;
}

/* Rec Modal 
------------------------- */
#recClipAudioFileLabel {
    margin-top: 0;
}

#rec-audio-form-group {
    height: 77px;
}


/*#modal-rec-clip-wrapper #recordModalContent {
    padding-bottom: 0;
    padding-top: 0;
}*/

#recClipMicrophoneRecordCol {
    height: 0;
}

#modal-rec-clip-audio-upload .modal-footer, #modal-rec-clip-microphone-rec .modal-footer {
    margin-top: 15px;
}

/* Rec & Event button - audio modal */
#modal-rec-clip-audio-upload .name-label, #modal-rec-clip-microphone-rec .name-label, #modal-add-event-audio-upload .name-label, #modal-add-event-microphone-rec .name-label {
    padding-top: 10px;
}

/* ipad pro*/
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

    #timeline-boxes {
        width: 33% !important;
    }
}

/* Squad page */
#coachingStaffContainer {
    padding-left: 15px;
}

#coachingStaffContainer .table tbody tr td {
    padding: 2px 6px !important;
    font-size: 0.85em !important;
    line-height: 1.1 !important;
    vertical-align: middle !important;
}

#coachingStaffContainer .table tbody tr {
    height: auto !important;
    min-height: 20px !important;
}

#coachingStaffContainer .table {
    margin-bottom: 0 !important;
}

#coachingStaffContainer .btn-xs {
    padding: 1px 4px !important;
    font-size: 0.75em !important;
}

/* Squad page - edit user */
.box-delete-btn {
    float: right;
    border-radius: 15px;
    position: relative;
    top: 4px;
    margin-right: 10px;
    padding: 5px 9px;
}

/* iPad - portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .video-control {
        margin-bottom: 10px !important;
    }

    #matrix-options-box-ipad-portrait {
        margin-top: 10px;
    }

    #video-tagging-box, #edit-video-event-box, #video-event-information-box, #more-box {
        /*        border-bottom: 1px solid #dbe1e8;
*/
        border-right: 1px solid #dbe1e8;
        border-left: 1px solid #dbe1e8;
        border-top: none !important;
    }

    #timeline-boxes {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        border-bottom: none !important;
        /*      margin-bottom: 5px !important;*/
        max-height: 32em !important;
    }

    .video-right-padding {
        padding-right: 15px !important;
        z-index: 1000;
    }

    /* Timeline edit - voice note label onto two lines */
    #audio-input-label {
        padding: 0;
        padding-right: 5px;
        text-align: right;
        margin-left: 30%;
        position: relative;
        top: -4px;
        left: 0;
    }
}


/* iPad - landscape */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* Start and end time input */
    #videoEventStartTime, #videoEventEndTime {
        font-size: 9px !important;
        width: 100% !important;
    }

    /* Start and end time button */
    #minusVideoEventStartTime, #plusVideoEventStartTime, #minusVideoEventEndTime, #plusVideoEventEndTime {
        font-size: 10px !important;
    }

    #video-tagging-box, #edit-video-event-box, #video-event-information-box, #more-box {
        min-height: 23em !important;
    }

    #timeline-boxes {
        border-bottom: none !important;
    }

    #timelineTabLink, #matrixTabLink {
        font-size: 0.8em !important;
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    /* Voice note */
    #deleteAudioFile a {
        position: relative;
        top: -12px;
    }

    /* Squad page */
    #coachingStaffContainer {
        padding-left: 15px !important;
    }

    /* telestration related for ipad landscape 
        ---------------------------------------- */
    /* jouney to the telestration */
    #open-telestration-btn {
        position: relative;
        left: 12px;
    }

    #deleteAudioFile {
        top: 14px;
    }

    .listedTelestrationBtn {
        width: 9vw !important;
    }

    /* Drawing tool related */
    .telestration-control-btn {
        width: 45px !important;
    }

    .telestration-display-btn {
        font-size: 22px !important;
    }

    .telestration-display-btn i {
        top: -1px !important;
    }

    #line-arrow i {
        left: -2px;
        font-size: 28px;
        top: 1px !important;
    }

    #lineDisplayComponent i {
        left: -4px !important;
    }

    .telestration-customisation-label-col {
        padding-right: 5px !important;
    }
}


/* -----------------------------
   Fixtures page
----------------------------- */
/* fixtures page */
div#fixtures-block {
    overflow-y: auto;
    border-radius: 10px;
}

/* iPad - portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    #fixtures-block .block {
        padding-bottom: 40px !important;
    }

    #fixtures-block .block button#filter {
        position: relative;
        top: 20px;
    }
}

/* iPad only and in landscape mode */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
    #fixtures-block .block {
        padding-bottom: 40px !important;
    }

    #fixtures-block .block button#filter {
        position: relative;
        top: 20px;
    }
}


/* -----------------------------
   Match centre/Watch Page
----------------------------- */
/* iPad - portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    #right-match-notes-col {
        margin-bottom: 10px;
    }
}

/* iPad only and in landscape mode */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
    #right-match-notes-col {
        margin-bottom: 10px;
    }
}

.video-outer {
    padding: 10px !important;
}

.match-notes-link, .temp-user-buttons {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    font-weight: 600;
}

#temporary-user-logo-img {
    width: 80%;
    padding-left: 20%;
    margin-bottom: 15px;
}

#left-video-col {
    padding-right: 15px;
}
/* Desktop */
@media (min-width: 992px) {
    #left-video-col {
        padding-right: 20px;
    }   
}

/* video box */
#left-video-col .video-outer {
    padding: 0 !important;
    border-radius: 10px;
    overflow: hidden;
}

#right-match-notes-col {
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

#right-match-notes-col .widget {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-bottom: 0;
}

#right-match-notes-col .widget-header {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px
}

#right-match-notes-col #breakdowns-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 120px;
    max-height: 60vh;
}
#right-match-notes-col #breakdowns-wrapper .modal .control-label, #modal-start-tagging .modal .control-label{
    text-align: center;
    padding-top: 15px;
}


/* Overriding some of the main.css widget styling 
-------------------------------------------------------- */
#right-match-notes-col .widget-advanced .widget-header {
    padding-bottom: 20px;
}
#right-match-notes-col .widget-extra #timeline-options-wrapper {
    padding: 0 15px;
    border-bottom: 1px dotted #dddddd;
}
#right-match-notes-col .sub-header {
    margin-bottom: 10px;
}
#right-match-notes-col .widget-advanced .widget-main {
    padding: 5px 0;
}
#right-match-notes-col .widget-advanced .widget-extra {
    padding: 0;
}


#right-match-notes-col .widget-header h3 {
    font-weight: 700;
    font-size: 18px;
}

#right-match-notes-col #start-tagging {
    margin-bottom: 10px;
}
#right-match-notes-col #upload-timeline-link {
    float: right; 
    position: relative; 
    top: 2px;
    border-radius: 20px;
    padding: 5px 9px;
}


#right-match-notes-col .watch-page-linked-row {
    padding: 10px 5px;
    position: relative;
    /* Ensure proper height calculation for scrolling */
    box-sizing: border-box;
}

#right-match-notes-col .watch-page-linked-row:hover {
    background-color: #f2f4f8;
    cursor: pointer;
}
#right-match-notes-col .watch-page-timeline-col {
    padding-left: 30px;
}

#right-match-notes-col .dropdown-edit-button {
    float: right;
    position: absolute;
    right: 35px;
    z-index: 500;

    font-size: 2em;
    width: 1em;
    height: 1em;
    
    border: none;
    background-color: transparent;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 999em;
    top: 15px;
}

#right-match-notes-col #ellipsis-icon-for-edit-dropdown {
    top: 1px;
}
#right-match-notes-col #ellipsis-icon-for-edit-dropdown i {
    font-size: 0.9em;
    font-weight: 400;
    position: relative;
    top: -1px;
}

#right-match-notes-col .dropdown-edit-button:hover {
    background-color: #d2d9e7;
    filter: brightness(0.95);
}

/* edit button and dropdown from within the Analysis Timeline */
#right-match-notes-col .edit-dropdown-content 
{
    /*    display: none;
        position: absolute;
        top: 30px;
        z-index: 600;
        right: 15px;
        background-color: #f1f1f1;
        min-width: 140px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);*/

    position: absolute;
    z-index: 1000;
    display: none;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    text-align: left;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 10%);
    background-clip: padding-box;
    overflow: hidden;
    right: 62px;
    top: -1px;
    min-width: 100px;
}

#right-match-notes-col ul.edit-dropdown-content {
    list-style: none;
    padding: 0;
}

#right-match-notes-col ul.edit-dropdown-content li a {
    display: block;
    clear: both;
    font-weight: normal;
    font-size: 13px;
    color: #064B82;
    line-height: 1.42857143;
    white-space: nowrap;
    padding: 6px 10px;
    box-sizing: border-box;
    text-decoration: none;
    padding: 3px 10px 3px 20px;
}

#right-match-notes-col ul.edit-dropdown-content li a:hover {
    color: #fff;
    background-color: #27b4f1;
}
#right-match-notes-col #timeline-name {
    width: 19rem;
}
#right-match-notes-col .file-input-label {
    padding-top: 0;
}


/* small devices upwards */
@media only screen and (min-width: 768px) {
    #right-match-notes-col {
        padding-left: 0;
        padding-right: 0;
    }
}

#watch-notes-container #inline-match-notes-dynamic textarea {
    border: #27b4f1 solid 1px;
    border-radius: 10px;
}
.resize-container-bottom {
    margin-bottom: 0;
}



/* Notes box */
#watch-notes-container {
    padding-right: 15px;
    margin-bottom: 20px;
}
/* Desktop */
@media (min-width: 992px) {
    #watch-notes-container {
        margin-bottom: 0;
        padding-right: 20px;
    }
}

/* Match documents box */
#match-documents-update .match-documents-col {
    padding-right: 15px;
    margin-bottom: 20px;
}
/* Desktop */
@media (min-width: 992px) {
    #match-documents-update .match-documents-col {
        margin-bottom: 0;
        padding-right: 20px;
    }
}




.team-buttons {
    width: 110px;
}

input.delThread {
    transform: translateY(80px);
}

#filter {
    margin-left: 85%;
    margin-top: -60px;
}

input#sendTo {
    border-radius: 10px 0px 0px 10px;
}

a.ui-button.ui-widget.ui-button-icon-only.custom-combobox-toggle.ui-corner-right {
    height: 30px;
    margin-top: -1px;
    background-color: #3498db;
    color: white;
}

.custom-combobox {
    position: relative;
    display: inline-block;
}

.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
}

.custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
}

textarea#MatchNotes, textarea#videoEventInfoNotes,
textarea#videoEventNotes, textarea#videoEventInfoLabels,
input#videoEventTagName, input#videoEventInfoTagName {
    width: 100%;
    padding-left: 5px;
    border: solid 0.5px #cccccc;
}

input#videoEventTagName, input#videoEventInfoTagName {
    width: 50%;
}

.textareaContainer {
    display: block;
}

.avatar-toggle {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background-color: #064b82;
    display: block;
    color: #ffffff;
    font-size: 18px;
}

#newMessage {
    width: 90%;
    border-radius: 10px;
    background-color: #eaedf1;
    padding-left: 10px;
    color: #064b82;
    margin-bottom: 30px;
}


#sendMessage {
    height: 30px;
    position: absolute;
    top: 5%;
    background-color: #064b82;
    color: #ffffff;
    border-radius: 30px;
    border: 0;
    width: 30px;
    margin-left: 5px;
}

#msgList::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#msgList::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

#msgList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #555;
}

#threadList::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#threadList::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

#threadList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #555;
}

/* -------------------------
    Message centre page 
------------------------- */
.MessageCentre {
    padding-bottom: 10px;
}

.MessageCentre input {
    border-radius: 10px;
    padding-left: 10px;
}

.MessageCentre .block-title {
    margin: 0 0 20px -20px;
}

.MessageCentre .block-title h2 {
    padding-left: 30px;
}

.MessageCentre .row {
    margin: 0px;
}

.messageTo {
    background-color: #eaedf1;
    border-radius: 10px 10px 10px 0px;
    min-height: 30px;
    padding: 5px;
    color: #064b82;
    display: block;
    max-width: 90%;
    min-width: 60%;
    position: relative;
    margin-bottom: 30px;
    /*float:left*/
}

.messageTo:after {
    content: '';
    position: absolute;
    left: 0;
    top: 75%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-right-color: #eaedf1;
    border-left: 0;
    border-bottom: 0;
    margin-top: -13px;
    margin-left: -20px;
}

.messageFrom {
    background-color: #064b82;
    border-radius: 10px 10px 0px 10px;
    min-height: 30px;
    padding: 5px;
    color: #ffffff;
    display: block;
    max-width: 90%;
    min-width: 60%;
    position: relative;
    margin-bottom: 30px;
    margin-left: 40%;
}

.messageFrom:after {
    content: '';
    position: absolute;
    right: 0;
    top: 75%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-left-color: #064b82;
    border-right: 0;
    border-bottom: 0;
    margin-top: -13px;
    margin-right: -20px;
}

.MessageBlock {
    height: 80px;
    color: #064b82;
    margin-bottom: 10px;
}

.messageDate {
    text-align: right;
    font-style: italic;
    font-size: 0.7em;
    color: grey;
    margin-top: -20px;
}

.MessagesList {
    height: 60%;
    width: 100%;
    margin-top: 15px;
    overflow-y: auto;
    padding: 25px;
    border-radius: 10px;
    overflow-x: hidden;
}

#msgCenterWrapper {
    height: 105vh;
    overflow-y: hidden;
    overflow-x: hidden;
    margin-bottom: 0;
    /*padding-bottom: 150px;*/
    padding: 0 !important;
}

#msgCenterWrapper
.content-header {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.error_body {
    background-color: #064B82;
}


/*.vjs-mouse-display {
display:none !important;


}*/


.error_body .text-warning {
    color: #1EB1F1;
}

.end_agreement h4 {
    margin-top: 20px;
}

.end_agreement p {
    margin-bottom: 10px;
}

.end_agreement ul {
    list-style: none;
    margin-bottom: 10px;
}

.bootstrap-growl.alert {
    /*top: 20px !important;*/
    right: 20px !important;
}

.storage_totals {
    padding-bottom: 30px;
    padding-top: 20px;
}

.storage_totals h3 i {
    font-size: 36px;
    margin-bottom: 15px;
}

.bootstrap-timepicker-widget.dropdown-menu input {
    padding-bottom: 20px;
    padding-top: 0px;
}

.video-js {
    width: 100% !important;
    height: auto !important;
    padding-bottom: 56.25% !important;
    background-color: #ffffff !important;
}

.vjs-play-progress:after {
    display: none !important;
}

.videoStarter {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2000;
}

table .table_name {
    width: 230px;
}

.password_reset_page {
    min-height: 100vh;
    width: 100%;
    padding-top: calc(50vh - 250px);
}

.trade_mark {
    font-size: 10px;
    vertical-align: super;
    position: relative;
    top: -6px;
}

.temp_list li {
    margin-bottom: 14px;
}

.temp_list li:last-child {
    margin-bottom: 1px;
}

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

.table-matrix .text-center, .table-matrix .header-width {
    text-align: center !important;
}

#video-tagging-mode-add {
    padding-left: 0;
    padding-right: 0;
    padding-top: 5px;
}

.tagging_button_list {
    padding: 5px 5px;
    overflow-y: auto;
    /*max-height: 34rem;*/
}

.tagging_button_list .row {
    margin-left: -3px;
    margin-right: -3px;
}

.tagging_button_list .tagging_button_box, .tagging_button_list .label_button {
    padding: 0px 3px;
    color: white;
}

.tagging_button_list .tagging_button_box .well {
    margin-bottom: 6px;
    background-color: #808080;
}

.tagging_button_list .tagging_button_box .well .fa {
    color: #2979AF;
}

.tagging_button_list .tagging_button_box .well .btn:hover .fa {
    color: white;
}

.tagging_button_list .tagging_button_box .well .btn:hover {
    background-color: #2979AF;
}

/* difference to tagging button boxes */
.tagging_button_list .label_button .well {
    border-radius: 21px;
}

.tagging_button_box span {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    word-wrap: break-word;
}

.label_button span {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    word-wrap: break-word;
}

.well {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.input-group-addon {
    font-size: 13px;
    font-weight: 600;
}

/*.timeline-container ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 17px;
    background-color: rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .2);
}

.timeline-container ::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}*/


.my-video-dimensions {
    width: 100% !important;
    height: auto !important;
    padding-bottom: 56.25% !important;
}

.video-container #scrollVideo {
    z-index: 1000;
}

.video-control {
    margin-top: 5px;
    margin-bottom: 10px;
}

#page-content {
    min-height: 95vh !important;
    padding: 20px !important;
}

#mytimeline .timeline-groups-text {
    display: block;
    color: #fff;
    text-decoration: none;
    width: 170px;
    position: absolute;
    margin-top: -1px;
    left: 0px;
    padding-left: 10px;
    height: 33px;
    line-height: 33px;
}

#mytimeline .timeline-groups-text a {
    display: block;
    color: #fff;
    text-decoration: none;
}

#mytimeline .timeline-frame {
    border-top: 0px solid #fff;
}

.table-matrix thead tr, .table-matrix tbody .matrix-title {
    background-color: #064B82 !important;
    color: #fff;
}

.tile_button .support-centre-block:hover
{
    background-color: #f2f4f8 !important;
}

.tile_button:hover, .tile_button:focus {
    text-decoration: none !important;
}

.slim-scroll table.table {
    margin-bottom: 0px;
}

.table-matrix tbody .total-row, .table-matrix tbody .total-row.filled {
    background-color: #3498DB !important;
}

.table-matrix tbody .total-row.filled a {
    color: #fff;
}


.table-matrix tbody .matrix-title a {
    color: #fff;
}

.table-matrix tbody .filled {
    background-color: #e5e5e5 !important;
}


.timeline-event.background {
    display: none !important;
}

.table.table-matrix .header-width {
    text-align: left;
}

.table.table-matrix thead {
    text-align: left;
    height: 50px;
}

.table.table-matrix thead th {
    vertical-align: bottom;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: 400;
}

.table.table-matrix thead .header-width {
    white-space: nowrap;
    font-size: 13px;
}

.table-matrix .header-span {
    white-space: nowrap;
    font-size: 16px;
    float: left;
    transform: rotateZ(-90deg);
}

#mytimeaxis .timeline-frame, #mytimeline .timeline-groups-axis {
    background-color: #064B82;
}

#mytimeaxis .timeline-frame div.timeline-axis-text, #mytimeline .timeline-frame div.timeline-groups-text {
    color: #fff;
}

#mytimeline .timeline-event {
    cursor: pointer;
    background: #dadada;
    height: 33px;
    line-height: 25px;
}

#mytimeline div.timeline-event-content {
    margin: 3px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

/* Text truncation for analytics video/playlist names - allow 2-3 lines */
.overview-video-heading-truncated {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
    max-height: 2.6em; /* Allow 2 lines (1.3 * 2) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Add margin-right to prevent overlap with Viewed By button */
    margin-right: 8px;
    -webkit-box-orient: vertical;
}

/* Analytics Top Videos/Playlists layout fixes */

#mytimeline div.timeline-event-content a.timelink {
    font-size: 0.8em;
}

/* Active clip box */
/* fix - stop the jquery-ui.css from making the active clip box link text from being white 
--------------------------- */
.ui-state-active, .ui-state-active a {
    color: #454545 !important;
}

/* darken the background colour - by 10% - original colour was #dadada */
.ui-state-active {
    background-color: #A7A7A7 !important;
}


.playlist-container {
    height: 300px;
    margin-bottom: 20px;
}

.playlist-container table {
    margin-bottom: 0px;
}

.clublogo-image img {
    max-width: 200px;
}

.clubheader-image img {
    width: 100%;
}

.timeline-container #mytimeaxis {
    padding-right: 10px;
}


.timeline-container #mytimeline {
    height: 200px;
    overflow-y: scroll;
}

.block.faq_block {
    padding: 45px 15px;
}

@media screen and (max-height: 480px) {
    #filter {
        margin-left: 15px !important;
        margin-top: 30px !important;
        width: 42%;
    }
}

@media (max-width: 800px) {

    .hide-ipad-portrait {
        display: none;
    }
}

@media (max-width: 480px) {
    input.delThread {
        transform: translate(-25px, 40px);
    }

    .msglist {
        margin-top: 40px;
    }

    .messageFrom {
        margin-left: 0px;
        max-width: 100%;
    }

    .messageTo {
        max-width: 100%;
    }
}


/*#page-wrapper {
    cursor: pointer;
}*/


/* Header - related to individual user
---------------------------------- */
#account-tyle-label {
    font-size: 15px;
    font-weight: 300;
    line-height: 54px;
    color: #fff;
    padding-right: 5px;
}

#account-type-toggle {
    float: right;
    padding: 14px 5px 0 0;
}


.matchnote-scroll .sub-header {
    margin-top: 0px;
    padding-top: 0px;
}

/* Login page  
   ------------------------ */
.top-header-row, .login-main-container {
    margin-left: auto !important;
    margin-right: auto !important;
}

.login-overall-container .top-header-row i {
    font-size: 1.5em;
    color: #064B82;
}

.login-overall-container .top-header-row a {
    font-size: 1em;
    font-weight: bold;
    color: #064B82;
}

.login-overall-container .top-header-row i:hover, .login-overall-container .top-header-row a:hover {
    color: #3498db;
}

.login-overall-container #back-to-website-col, .login-overall-container #sign-up-col {
    margin-top: 2vh;
}

/* small devices upwards */
@media screen and (min-width: 768px) {
    .login-overall-container .top-header-row i {
        font-size: 1.4em;
        padding-left: 20px;
        padding-top: 5px;
    }

    .login-overall-container .top-header-row a {
        font-size: 1.3em;
        padding-right: 20px
    }

    .login-overall-container #sign-up-col {
        margin-top: 3vh;
    }
}

.login-overall-container #logo {
    margin-top: 5vh;
    margin-bottom: 5vh;
    text-align: center;
    width: 100%;
}

.login-overall-container #logo img, .password_reset_page #logo {
    max-width: 220px;
}

.login-main-container {
    margin-top: 10vh;
}

.login-main-container .form-group {
    margin-bottom: 30px;
}

.login-main-container .login_container {
    padding-top: 8px;
    padding-bottom: 20px;
    margin-bottom: 130px;
}

a.activate-link {
    text-decoration: underline;
    color: #064B82;
}

a.activate-link:hover {
    color: #31b0d5;
}


/* Fix - mobile having too much padding on the right  */
/*@media screen and (max-width: 480px) {
    #login-container-form .col-xs-4.text-right, #login-container-form .col-xs-12 {
        padding-right: 15px !important;
    }
}*/

.col-form-label {
    font-size: 13px;
    padding: 6px 8px;
    margin: 1px 0;
    color: #075899;
    border-radius: 4px;
    box-shadow: none;
    border-color: rgb(219, 225, 232);
}

#login-container-form .form-control {
    /*border-color: #41719C;*/
    border-left: 1px solid #dbe1e8;
    border-radius: 0 !important;
}

#login-container-form .form-control:focus {
    border-left: 1px solid #27b4f1 !important;
    border-radius: 0 !important;
}

#login-container-form .input-group-addon {
    border-radius: 0 !important;
}

#login-container-form > .block {
    border: none;
}

#login-container-form div.input-group, .password_reset_page .input-group {
    border: #41719C 1px solid;
    border-radius: 0;
}

#login-container-form h1 {
    font-size: 26px;
    color: #ffffff;
}


/*.login-footer {
    margin-top: 15vh;
    color: #000;    
    font-size: 13px;
}
.login-footer .main-row {
    padding-top: 5vh;
    padding-bottom: 5vh;
    background-color: #d3d3d3;
}
.login-footer a {
    display: block;
    color: #000;
    text-decoration: underline;
}
.login-footer p {
    margin-bottom: 0;
    font-weight: 600;
    background-color: white !important;
}
.login-footer .copyright-info {
    text-align: left;
}
.login-footer .copyright-info p {
    font-size: 12px;
    font-weight: 500;
}
.login-footer a {
    display: inline-block;
    color: #000;
}
.login-footer a:hover, .login-footer a:focus {
    text-decoration: underline;
    color: #000;
}*/


/*.panel.panel-default .panel-heading {*/
/*    padding: 0px;*/
/*}*/

.panel.panel-default .panel-heading .panel-title .accordion-toggle {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: inherit;
}

@media screen and (max-width: 991px) {
    /*.login-main-container {
        margin-top: 60px;
        min-height: 72vh;
    }*/
    #login-container-form .login-title {
        display: none !important;
    }

    .super_top_tiles {
        display: block;
    }

    .super_right_tiles {
        display: none;
    }

    /*.login-footer {
        position: relative;
    }*/
}

@media screen and (max-width: 480px) {
    .msglist {
        margin-top: 30px;
    }

    #login-container-form {
        width: 100%;
    }

    #filter {
        width: 35% !important;
        margin-top: 30px !important;
        margin-left: 15px !important;
    }
}

@media screen and (max-width: 376px) {

    #filter {
        width: 79%;
    }
}

@media screen and (max-width: 321px) {

    #filter {
        width: 74%;
    }
}

/* medium devices upwards */
@media screen and (min-width: 992px) {
    .super_top_tiles {
        display: none;
    }

    .super_right_tiles {
        display: block;
    }
}

/* no bigger than mobile */
@media (max-width: 767px) {

    .powering_header {
        font-size: 30px;
    }

    .trade_mark {
        top: -4px;
    }
}


.analytics_dashboard .chart {
    height: 220px;
}

.analytics_dashboard.super_user .chart {
    height: 230px;
}

.analytics_dashboard .bottom_heading {
    margin: 10px 0 0;
}

.analytics_dashboard .widget {
    border-radius: 0;
}

.analytics_dashboard .widget-main {
    padding-bottom: 0;
}

.analytics_dashboard .widget-content-light {
    margin-top: 15px;
}

.suggestion_box p {
    min-height: 60px;
}

@media screen and (min-width: 992px) and (max-width: 1250px) {
    .resize_font {
        font-size: 12px !important;
    }

    .resize_font_smallest {
        font-size: 10px !important;
    }

    .widget-simple .widget-icon {
        margin-right: 5px;
    }
}

#page-content + footer {
    padding-top: 0;
    padding-bottom: 12px;
    background-color: #22313F;
    color: #fff;
}

#page-content + footer p {
    font-size: 12px;
    margin: 10px;
}

#page-content + footer p a {
    text-decoration: underline;
}

#page-content + footer .social-icons {
    margin-bottom: 8px;
}

#page-content + footer a {
    color: #fff;
    font-size: 12px;
    margin: 0;
}

/* social media links */
#page-content + footer .social-icons a {
    color: #fff;
    font-size: 18px;
    margin: 0 15px;
}

#page-content + footer .social-icons a:hover {
    color: #27b4f1 !important;
}

.share-footage-outer {
    text-align: center;
    margin-top: 20px;
    border-top: 1px dotted #dddddd;
    padding-top: 20px;
}

.share-footage-outer .btn {
    border-radius: 15px;
    min-width: 30px;
    text-align: center;
    padding-right: 8px;
    padding-left: 8px;
}

@media screen and (min-width: 1199px) and (max-width: 1400px) {
    .match_center_playlists.block.full {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .match_center_playlists .block-title {
        margin-left: -5px;
        margin-right: -5px;
    }

    .match_center_playlists .btn-xs {
        padding-left: 3px;
        padding-right: 3px;
    }

    .match_center_playlists {
        font-size: 12px;
    }
}

.builder-nav-buttons {
    padding: 0 0 20px;
    overflow: hidden;
}

@media screen and (max-width: 1260px) {
    .builder-nav-buttons a {
        display: block !important;
        margin: 5px 0;
        float: none !important;
    }
}

@media screen and (max-width: 600px) {
    .team-buttons a.btn {
        padding-left: 3px;
        padding-right: 3px;
        margin: 0;
    }
}

@media screen and (max-width: 992px) {
    /* Mobile notification dropdwon difference */
    /*    .notification-dropdown-list {
        right: 0 !important;
        left: 0 !important;
    }*/
    /*    .notification-dropdown-list .alert {
        overflow: hidden;
    }*/
    .analytics_dashboard .widget {
        padding: 0 0px;
    }
}

@media screen and (max-width: 1199px) {
    #filter {
        margin-left: 30px;
        margin-top: 10px;
    }

    .mobile-overflow {
        overflow: hidden;
    }

    .timeline-bk-btn {
        display: block;
        width: 100%;
        margin-bottom: 20px;
    }
}

.create-role-form .checkbox input[type="checkbox"] {
    margin-left: 0;
}

.match_notes_widget_outer {
    position: relative;
}

.match_notes_widget_outer .sub-header {
    font-weight: normal;
    font-size: 16px;
    text-align: left;
    padding-top: 0px;
    padding-left: 15px;
}

.share_footage_button_outer .sub-header a {
    font-weight: 500;
    color: #075899 !important;
}

@media screen and (min-width: 1370px) {
    .share_footage_button_outer {
        width: 100%;
        bottom: 0;
        margin-bottom: 0;
    }
}

.bootstrap-timepicker-hour[disabled], .bootstrap-timepicker-minute[disabled] {
    cursor: default;
    background: #fff;
    border: none;
}

@media (max-width: 768px) {
    input.delThread {
        transform: translate(-20px, 60px);
    }

    /*    .timeline-hidden {
        display: none;
    } */
}

@media screen and (max-width: 675px) {
    .user_email {
        display: none;
    }

    .player_table .text-right, .coach_table .text-right {
        width: 150px;
    }
}

@media screen and (min-width: 676px) {
    .user_email_button {
        display: none;
    }

    .player_table .text-right, .coach_table .text-right {
        width: 110px;
    }
}

#video-container:-webkit-full-screen {
    width: 100%;
    height: 100%;
}

#video-container:-webkit-full-screen .video-control .hide-fullscreen {
    display: none;
}

#video-container:-webkit-full-screen .video-control {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;
}

#video-container:-moz-full-screen {
    width: 100%;
    height: 100%;
}

#video-container:-moz-full-screen .video-control .hide-fullscreen {
    display: none;
}

#video-container:-moz-full-screen .video-control {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;
}

#video-container:-ms-fullscreen {
    width: 100%;
    height: 100%;
}

#video-container:-ms-fullscreen .video-control .hide-fullscreen {
    display: none;
}

#video-container:-ms-fullscreen .video-control {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;
}

#video-container:fullscreen {
    width: 100%;
    height: 100%;
}

#video-container:fullscreen .video-control .hide-fullscreen {
    display: none;
}

#video-container:fullscreen .video-control {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.mobile-timeline-event-group {
    font-size: 13px;
    color: white;
    background-color: #064B82;
    border-top: solid 1px #eaedf1;
    border-left: solid 1px #eaedf1;
    border-right: solid 1px #eaedf1;
    font-family: Arail, sans-serif;
    transition: background-color 0.25s ease-in-out;
}

.mobile-timeline-event-group.active {
    background-color: #adcde6;
}

.mobile-timeline-event-group .mobile-timeline-expand, .mobile-timeline-event-group .mobile-timeline-collapse {
    float: right;
    font-size: 23px;
    padding-right: 10px;
}

.mobile-timeline-event-group .playlist-start .far {
    padding-right: 10px;
    padding-left: 10px;
    font-size: 22px;
    vertical-align: middle;
}

.mobile-timeline-event-group a {
    color: white;
    line-height: 36px;
}

.mobile-timeline-event-group a:hover, .mobile-timeline-event-group a:focus {
    text-decoration: none;
}

.mobile-timeline-event-group .mobile-timeline-panel {
    background: #eaedf1;
}

.mobile-timeline-event-group .timeline-event {
    background-color: transparent;
    display: block;
    border-left: solid 1px #064B82;
    border-right: solid 1px #064B82;
    border-bottom: solid 1px #064B82;
    transition: background-color 0.25s ease-in-out;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 15px;
    padding-right: 15px;
}

.mobile-timeline-event-group .timeline-event.active {
    background-color: #adcde6;
}

.mobile-timeline-event-group .timeline-event a {
    color: #064B82;
    line-height: 17px;
}

#mobile-timeline-panel-start-time {
    text-align: right;
    padding-right: 0px !important;
    padding-left: 0px !important;
}

#mobile-timeline-panel-label {
    padding-left: 20px !important;
    padding-right: 0px !important;
    word-wrap: break-word;
}

#mobile-timeline-panel-icons-col {
    /*    padding-left: 5px !important;
    padding-right: 0 !important;*/
    padding: 0;
}

#mobile-timeline-panel-icons-col i {
    padding-right: 10px;
    float: right;
}

#options-block-open, #options-block-close, #video-tagging-block-open, #video-tagging-block-close, #video-event-block-open, #video-event-block-close, #video-playlists-block-open, #video-playlists-block-close, #video-tagging-panel-dropdown, #video-tagging-panel-raiseup {
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    height: 30px;
    background-color: white;
    width: 30px;
    border: solid 1px #2979AF;
    line-height: 25px;
}

#options-block-open, #options-block-close, #video-event-block-open, #video-event-block-close, .box-options {
    margin-top: 0.5rem;
    margin-right: 0.75rem;
    float: right;
}

#options-block-open:hover, #options-block-close:hover, #video-tagging-block-open:hover, #video-tagging-block-close:hover, #video-event-block-open:hover, #video-event-block-close:hover, #video-playlists-block-open:hover, #video-playlists-block-close:hover, #video-tagging-panel-dropdown:hover, #video-tagging-panel-raiseup:hover {
    background-color: #2979AF;
    color: white;
}

#inline-match-notes, #inline-match-notes-static div {
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 30px;
    border: none;
    overflow: hidden;
    overflow-y: auto;
    height: 100%;
}

#inline-match-notes {
    margin-bottom: 5px;
    height: 100%;
}

/* small devices upwards - sm */
/*@media (min-width: 768px) {
    #inline-match-notes {
        margin-bottom: 0;
    }
}*/

#inline-match-notes-submit, #inline-match-notes-begin-edit {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    /*border-radius: 50%;*/
    padding: 3px 8px;
}

.match_notes_widget_outer h3 {
    margin-top: 0px;
    margin-bottom: 0px;
}

.recipient-list {
    margin-top: 15px;
}

.recipient-list label {
    font-weight: 400;
    margin: 0px;
}

.recipient-list input[type="checkbox"] {
    margin: 0px;
    margin-right: 10px;
}

.recipient-list hr {
    margin-top: 2px;
    margin-bottom: 5px;
}

.share-message {
    width: 100%;
    height: 100px;
}

.loader,
.loader:after {
    border-radius: 50%;
    width: 1em;
    height: 1em;
    display: inline-block;
}

.loader {
    margin: 1px auto;
    margin-right: 10px;
    font-size: 15px;
    position: relative;
    text-indent: -9999em;
    border-top: 3px solid rgba(255, 255, 255, 0.2);
    border-right: 3px solid rgba(255, 255, 255, 0.2);
    border-bottom: 3px solid rgba(255, 255, 255, 0.2);
    border-left: 3px solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.sendAnalysisTimeline.disabled {
    opacity: 1;
}

.video-tagging-switch-label {
    height: 30px;
}

#video-tagging-panel {
    margin-bottom: 0px;
    height: 40px;
}

/* Tagging box */
/* ----------------------------------------- */
/* right add and new button */
.box-btn {
    margin-left: 1rem;
    width: 50px;
}

/* Edit tagging panel fa btn */
.circle-btn {
    border-radius: 50% !important;
    text-align: center;
    vertical-align: middle;
    height: 30px;
    background-color: white;
    width: 30px;
    border: solid 1px #2979AF;
}

.box-border-bottom {
    padding-bottom: 3px;
}


/* Video tagging panel drop-down */
/* ----------------------------------------- */
#video-tagging-panel-names {
    background: white;
    display: block;
    position: absolute;
    z-index: 1;
    width: 100%;
    margin-right: -20px;
    border: 0.5px solid;
    border-top: 0px;
    border-radius: 0px 0px 5px 5px;
    border-color: #dbe1e8;
}

#video-tagging-panel-names .active {
    font-weight: 800;
    background-color: #075899;
    color: white;
}

#video-tagging-panel-names div:hover {
    background-color: #075899;
    color: white;
}

.video-tagging-panel-name:last-child {
    border-bottom: 0px;
}

.playlist-play.active {
    box-shadow: -5px 0px 0px 0px #3498DB;
    /*    background-color: #aad178 !important;
    border-color: #7db831 !important;*/
}

#tagging-panel-select-row {
    /*
    border-right: 0.5px solid;
    */
    border-color: #dbe1e8;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/* Pervent top border radius on these boxes */
#video-telestration-box, #video-tagging-box, #tagging-panel-select-row {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.options-block {
    margin-bottom: 8px;
}

.start-tagging {
    padding-bottom: 10px;
}

.start-tagging .switch span {
    width: 34px;
    height: 18px;
}

.start-tagging .switch span:after {
    width: 14px;
}

.start-tagging .switch input:checked + span:after {
    left: 16px;
}

.start-tagging h2 {
    font-size: 14px;
    padding-top: 5px;
}

#video-tagging-box {
    position: relative;
    border-bottom: 1px solid #dbe1e8;
    border-left: 1px solid #dbe1e8;
    border-right: 1px solid #dbe1e8;
    overflow-y: auto;
    height: 100%;
    min-height: 18em;
}

#modal-edittaggingpanel .modal-footer button {
    display: block;
    margin-left: 0;
    width: 100%;
}

/*------------------------------------------------
-- Edit Tagging Panel
------------------------------------------------*/
#taggingModal, #editTagModal {
    padding-bottom: 0 !important;
}

#taggingPanelTitle, #taggingButtonTypeNameTitle {
    font-weight: 600;
}

#sel-tagging-buttons-title {
    font-weight: 600;
    font-size: 11px;
}

#main-tagging-panel-desc, #sel-tagging-buttons-title {
    padding-left: 5px;
    padding-bottom: 4px;
}

#form-edit-btns {
    text-align: right;
}

#form-edit-btns button {
    width: 75px;
    margin-left: 4px;
}

.field-validation-error, #HotKeyAlreadyUsedValidation, #TagButtonAlreadyUsedValidation, #EmptyTagButtonValidation {
    font-size: 11px;
}

/* tagging modal label inputs */
#modal-editTaggingPanel .form-group .control-label,
#modal-createcustomtag .form-group .control-label {
    padding-top: 0;
}

.form-group.no-bottom-margin, #panel-edit-form-hr {
    margin-bottom: 0 !important;
}

/* for it to appear in the middle */
.one-line-label-padding-top {
    padding-top: 5px !important;
}

.un-bold {
    font-weight: normal;
}


#video-tagging-panel h2 {
    font-size: 13px;
}


/* Mobile upwards */
/* --------------------------------------------- */
@media (min-width: 992px) {
    /*  chossen tagging panel title  */
    #video-tagging-panel h2 {
        font-size: 16px !important;
    }

    #video-tagging-box, #edit-video-event-box, #video-event-information-box, #more-box {
        margin-bottom: 10px;
    }
}

#video-tagging-box, #edit-video-event-box, #video-event-information-box, #more-box {
    margin-bottom: 0;
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
    #video-tagging-panel h2 {
        font-size: 12px !important;
        padding-right: 0px !important;
    }
}


/* Small subset of screens larger than a ipad */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1134px) {
    #video-tagging-panel h2 {
        font-size: 12px !important;
        padding-right: 0px !important;
    }
}

/* -----------------------------
    Timeline - Edit mode 
----------------------------- */
#edit-mode-default-message, #review-default-message {
    padding-bottom: 15px;
    padding-top: 15px;
}

#edit-mode-default-message h2, #review-default-message h2 {
    padding-bottom: 15px;
}

/* edit > new telestration journey - drawing mode */
#telestration-pick-time-col .block-title, #edit-mode-default-message .block-title {
    border-top: 1px solid #dbe1e8;
}

#edit-mode-form-btn {
    text-align: right;
}

#edit-mode-label {
    text-align: left;
    padding-top: 8px;
}

/* -----------------------------
Timeline - Edit mode - tabs/accordion
----------------------------- */
.edit-mode-tab-row {
    border: 1px solid #dbe1e8;
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 10px;
    background-color: #ffffff;
    color: #064B82;
    margin-left: -10px;
    margin-right: -10px;
}

/* For voice note and drawings to show that they have content i.e. have a voice note */
.edit-mode-tab-row.has-content {
    border: solid rgb(52, 152, 219) 2px;
    /* Other approaches */
    /*    box-shadow: 0 0 0 1px rgb(52, 152, 219);    */
    /*    background-color: rgba(52, 152, 219,.1);  */
}

#clip-info-tab-content, #edit-tab-drawing-tab-content {
    padding-top: 10px;
}

.edit-mode-tab-row .tab-heading {
    font-size: 14px;
    padding-left: 8px;
    padding-right: 0;
}

.edit-mode-tab-row .icon-col {
    text-align: right;
    padding-right: 5px;
}

.edit-mode-tab-row i {
    font-size: 23px !important;
    padding-top: 5px;
    line-height: 0;
    font-weight: 500;
    position: relative;
    top: 5px;
}

#edit-tab-drawing-tab-content .row, #review-tab-drawing-tab-content .row {
    margin-left: 13px;
}

#review-tab-drawing-tab-content {
    margin-top: 15px;
}


/* -----------------------------
    Timeline - Edit mode - edit video event details form
----------------------------- */
/*  FIX - Stops the label input default just being "add a labe"  */
input#videoEventLabels_tag, input#videoEventInfoLabels_tag {
    width: 70px !important;
}


/* =============================
    video event information and editing
============================= */
#delete-event-link {
    border-radius: 3px !important;
}

#submit-edit-video-event-form-btn {
    border-radius: 3px;
    margin-left: 10px;
}

/* Disabled inputs */
#video-event-information input[type=text]:read-only, textarea#videoEventInfoNotes, textarea#videoEventInfoLabels {
    color: #5f5f5f;
}

#video-event-information input[type=text], textarea#videoEventInfoNotes, textarea#videoEventInfoLabels {
    border: none;
    background-color: #f9fafc !important;
}

#video-event-information .row {
    margin-bottom: 10px;
}

#video-event-information {
    margin-bottom: 4px;
    padding-bottom: 4px;
}

/*#edit-video-event-form-container .form-group {
    margin-bottom: 5px;
}*/

#edit-video-event-form {
    padding-right: 15px;
}

/* labels for inputs*/
#videoEventLabelsLabel {
    padding-top: 1px !important;
}

/* Start and end time */
#videoEventInfoStartTime, #videoEventInfoEndTime {
    text-align: left;
    width: 50% !important;
}

#video-event-information input[type=text], #video-event-information input[type=textarea],
#edit-video-event-form-container input[type=textarea] {
    width: 100%;
    padding-left: 5px;
}

/* left first column */
#video-event-information .col-xs-2,
#edit-video-event-form-container .col-xs-2 {
    padding: 0;
    padding-right: 5px;
    text-align: right;
}

/* time input column */
#edit-video-event-form-container .col-xs-8 {
    padding-right: 0;
    padding-top: 5px;
}

/* labels input styling */
#edit-video-event-form-container #labelTagInputWrapper {
    max-height: 84px !important;
    overflow: scroll;
    overflow-x: auto;
    border: solid 1px #cccccc;
    overflow: auto;
}

/* To stop the input tags border from showing used ours in the rule above */
#edit-video-event-form-container div.tagsinput {
    border: none !important;
}

/* Labels */
/*#edit-video-event-form-container #edit-mode-label, #edit-video-event-form-container {
    padding-top: 8px;
}*/
.videoEventTimeLabel {
    padding-top: 2px !important;
}

form#edit-video-event-form, #review-tab-clip-info-tab-content {
    padding-bottom: 5px;
}

#edit-video-event-audio-form, #review-tab-audio-tab-content {
    margin-bottom: 15px;
}

#review-tab-audio-tab-content {
    margin-left: 15px;
}

#audio-player-col {
    padding-left: 10px;
    margin-left: 20px;
    margin-bottom: 10px;
    text-align: left;
    padding-right: 0;
}

#delete-audio-file-col {
    padding: 0;
}

#deleteAudioFile {
    position: relative;
    top: 18px;
    margin-left: 5px;
}

#deleteAudioFile a {
    padding: 2px 6px;
}

#deleteAudioFile a i {
    font-size: 13px;
    color: #e74c3c;
}

#deleteAudioFile .btn:hover {
    background-color: #e74c3c !important;
}

#deleteAudioFile .btn:hover > i {
    color: #ffffff !important;
}

#currentAudioFileMessage {
    position: relative;
    left: 5%;
}

#videoEventAudioFilePlayer {
    width: 100% !important;
}



/* Scrollbar styling
------------------------------- */
/* small devices upwards - sm */
@media (min-width: 768px) {
    /* scroll bar */
    #videoEventNotes::-webkit-scrollbar, #videoEventInfoNotes::-webkit-scrollbar, #videoEventInfoLabels::-webkit-scrollbar, #labelTagInputWrapper::-webkit-scrollbar, .tagging_button_list::-webkit-scrollbar, #mytimeline::-webkit-scrollbar, #fixtures-block::-webkit-scrollbar, div#timeline-boxes::-webkit-scrollbar, .playlist-centre-right-container-col::-webkit-scrollbar, .playlist-centre-comment-input::-webkit-scrollbar, #inline-match-notes::-webkit-scrollbar, .matchnote-scroll::-webkit-scrollbar, .slimScrollDiv::-webkit-scrollbar, #inline-match-notes-static div::-webkit-scrollbar, .timeline-container::-webkit-scrollbar  {
        width: 10px;
        height: 10px;
    }

    /* Track  -- some elements now don't have trackers for example timeline and playlist page */
    #videoEventNotes::-webkit-scrollbar-track, #videoEventInfoNotes::-webkit-scrollbar-track, #videoEventInfoLabels::-webkit-scrollbar-track, #labelTagInputWrapper::-webkit-scrollbar-track, .tagging_button_list::-webkit-scrollbar-track, #fixtures-block::-webkit-scrollbar-track, .playlist-centre-comment-input::-webkit-scrollbar-track, .matchnote-scroll::-webkit-scrollbar-track, .slimScrollDiv::-webkit-scrollbar-track, #inline-match-notes-static div::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey;
        border-radius: 10px;
    }

    /* Handle */
    #videoEventNotes::-webkit-scrollbar-thumb, #videoEventInfoNotes::-webkit-scrollbar-thumb, #videoEventInfoLabels::-webkit-scrollbar-thumb, #labelTagInputWrapper::-webkit-scrollbar-thumb, .tagging_button_list::-webkit-scrollbar-thumb, #mytimeline::-webkit-scrollbar-thumb, #fixtures-block::-webkit-scrollbar-thumb, div#timeline-boxes::-webkit-scrollbar-thumb, .playlist-centre-right-container-col::-webkit-scrollbar-thumb, .playlist-centre-comment-input::-webkit-scrollbar-thumb, #inline-match-notes::-webkit-scrollbar-thumb, .matchnote-scroll::-webkit-scrollbar-thumb, .slimScrollDiv::-webkit-scrollbar-thumb, #inline-match-notes-static div::-webkit-scrollbar-thumb, .timeline-container::-webkit-scrollbar-thumb {
        background: #777777;
        border-radius: 10px;
    }
}


/* scroll styling for all devices */
/*-------------------------------- */
/* scroll bar */
#header_notifications::-webkit-scrollbar, .fht-tbody::-webkit-scrollbar, .overview-results-table::-webkit-scrollbar, #team-selector-block::-webkit-scrollbar, .modal-body::-webkit-scrollbar, .form-control::-webkit-scrollbar, #right-match-notes-col::-webkit-scrollbar, #breakdowns-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Handle */
#header_notifications::-webkit-scrollbar-thumb, .fht-tbody::-webkit-scrollbar-thumb, .overview-results-table::-webkit-scrollbar-thumb, #team-selector-block::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb, .form-control::-webkit-scrollbar-thumb, #right-match-notes-col::-webkit-scrollbar-thumb, #breakdowns-wrapper::-webkit-scrollbar-thumb {
    background: #777777;
    border-radius: 10px;
}

/* Track  -- some elements now don't have trackers for example timeline and playlist page */
#timeline-boxes::-webkit-scrollbar-track, .fht-tbody::-webkit-scrollbar-track, .overview-results-table::-webkit-scrollbar-track, .modal-body::-webkit-scrollbar-track, .form-control::-webkit-scrollbar-track, #right-match-notes-col::-webkit-scrollbar-track, #breakdowns-wrapper::-webkit-scrollbar-track {
    background-color: #ffffff;
    border-radius: 10px;
}


/* Start and end time buttons*/
#edit-video-event-form-container .edit-Event-Btn {
    margin-bottom: 5px;
    padding: 0px 6px 2px 6px;
    border: none;
}

#edit-video-event-form-container i {
    font-size: 13px;
}

#uploadAudioFileBtn {
    padding: 5px 7px !important;
}

/* time text input boxes */
#videoEventStartTime, #videoEventEndTime {
    width: 100%;
    font-size: 11px;
    height: 24px;
    border: solid 1px #cccccc;
    text-align: center;
}

#videoEventEndTimeLabel {
    padding-left: 4%;
    padding-right: 2%;
}

#edit-video-event-form-container #submit-tagging {
    margin-right: 15px !important;
}

/* Safari 6.1-10.0 (not 10.1) */
@media not all and (min-resolution: .001dpcm) {
    #edit-video-event-form-container #labelTagInputWrapper,
    #edit-video-event-form-container #videoEventNotes,
    #edit-video-event-form-container #videoEventStartTime,
    #edit-video-event-form-container #videoEventEndTime {
        border-radius: 5px 5px 5px 5px;
    }
}

/* Safari 11+ */
@media not all and (min-resolution: .001dpcm) {
    @supports (-webkit-appearance:none) and (stroke-color:transparent) {
        #edit-video-event-form-container #labelTagInputWrapper,
        #edit-video-event-form-container #videoEventNotes,
        #edit-video-event-form-container #videoEventStartTime,
        #edit-video-event-form-container #videoEventEndTime {
            border-radius: 5px 5px 5px 5px;
        }
    }
}

/* Record - stop start styling  elements
 =================================================== */
/* ipads upwards */
@media (min-width: 768px) {
    #modal-record .modal-dialog {
        width: 475px !important;
    }
}

/* Override blue background when button (btn-info) is active */
.record-btn.active {
    background-color: red !important;
    border: red 1px solid !important;
}

.record-btn {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/*#modal-record {
    z-index: 2147483647;
    position: absolute;
}*/


#edit-video-event-audio-form canvas {
    border: #2979AF solid 1px;
    border-radius: 3px;
}


/* ===================================================
Section pages
==================================================== */
.folders-box {
    padding-right: 20px
}


/* ====================================================
    Analytics Overview
==================================================== */
#analytics-header {
    position: relative;
    left: -10px;
    width: 100vw;
    margin-bottom: 20px;
}

/* Analytics tables responsive tweaks */
@media (max-width: 770px) {
    .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: visible !important;
        overflow-y: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .table-responsive table,
    .overview-results-table,
    .table.table-borderless.table-condensed.table-vcenter {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .table-responsive table td,
    .table-responsive table th,
    .overview-results-table td,
    .overview-results-table th,
    .table.table-borderless.table-condensed.table-vcenter td,
    .table.table-borderless.table-condensed.table-vcenter th {
        width: auto !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        padding: 8px 12px !important;
    }

    .overview-results-table,
    .overview-results-table table,
    .overview-results-table .table-responsive,
    .sessions-table,
    #user-sessions-table,
    #session-activity-table,
    .table.table-borderless.table-condensed.table-vcenter {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .table.table-borderless.table-condensed.table-vcenter,
    .overview-results-table table,
    .sessions-table,
    #user-sessions-table,
    #session-activity-table {
        max-width: 100% !important;
        width: 100% !important;
        table-layout: fixed !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .table.table-borderless.table-condensed.table-vcenter td,
    .table.table-borderless.table-condensed.table-vcenter th,
    .overview-results-table td,
    .overview-results-table th,
    .sessions-table td,
    .sessions-table th,
    #user-sessions-table td,
    #user-sessions-table th,
    #session-activity-table td,
    #session-activity-table th {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        padding: 4px 6px !important;
    }

    .overview-results-table {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .table.table-borderless.table-condensed.table-vcenter th:first-child,
    .overview-results-table th:first-child,
    .sessions-table th:first-child,
    #user-sessions-table th:first-child,
    #session-activity-table th:first-child {
        width: 40% !important;
        min-width: 0 !important;
    }

    .table.table-borderless.table-condensed.table-vcenter th:not(:first-child),
    .overview-results-table th:not(:first-child),
    .sessions-table th:not(:first-child),
    #user-sessions-table th:not(:first-child),
    #session-activity-table th:not(:first-child) {
        width: auto !important;
        min-width: 0 !important;
    }

    .analytics-col-with-padding .table.table-striped,
    .analytics-col-with-padding .table.table-hover,
    .analytics-col-with-padding .table.table-bordered,
    .analytics-col-with-padding .table.table-sm,
    .analytics-col-with-padding .table.table-lg,
    .overview-right-section-col .table.table-striped,
    .overview-right-section-col .table.table-hover,
    .overview-right-section-col .table.table-bordered,
    .overview-right-section-col .table.table-sm,
    .overview-right-section-col .table.table-lg,
    .most-viewed-col .table.table-striped,
    .most-viewed-col .table.table-hover,
    .most-viewed-col .table.table-bordered,
    .most-viewed-col .table.table-sm,
    .most-viewed-col .table.table-lg {
        max-width: 100% !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    .analytics-col-with-padding .table td,
    .analytics-col-with-padding .table th,
    .overview-right-section-col .table td,
    .overview-right-section-col .table th,
    .most-viewed-col .table td,
    .most-viewed-col .table th,
    .block .table td,
    .block .table th {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }
}

@media (max-width: 480px) {
    .table.table-borderless.table-condensed.table-vcenter,
    .overview-results-table table,
    .sessions-table,
    #user-sessions-table,
    #session-activity-table {
        font-size: 12px !important;
    }

    .table.table-borderless.table-condensed.table-vcenter th:first-child,
    .overview-results-table th:first-child,
    .sessions-table th:first-child,
    #user-sessions-table th:first-child,
    #session-activity-table th:first-child {
        width: 50% !important;
    }

    .table.table-borderless.table-condensed.table-vcenter .btn,
    .overview-results-table .btn,
    .sessions-table .btn,
    #user-sessions-table .btn,
    #session-activity-table .btn {
        font-size: 10px !important;
        padding: 2px 4px !important;
    }

    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Fine-grained table adjustments around tablet widths */
@media (max-width: 700px) and (min-width: 600px) {
    .table-responsive {
        overflow-x: visible !important;
        overflow-y: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .table-responsive table,
    .overview-results-table table,
    .table.table-borderless.table-condensed.table-vcenter {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
        min-width: 100% !important;
    }

    .table-responsive table td,
    .table-responsive table th,
    .overview-results-table td,
    .overview-results-table th,
    .table.table-borderless.table-condensed.table-vcenter td,
    .table.table-borderless.table-condensed.table-vcenter th {
        width: auto !important;
        max-width: none !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        padding: 6px 8px !important;
    }
}

/* @media (max-width: 768px) {
    .overview-results-table,
    .overview-results-table table,
    .overview-results-table .table-responsive,
    .sessions-table,
    #user-sessions-table,
    #session-activity-table,
    .table.table-borderless.table-condensed.table-vcenter {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .block .table-responsive,
    .block table,
    .analytics-col-with-padding .block,
    .overview-right-section-col .block,
    .most-viewed-col .block {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .table.table-borderless.table-condensed.table-vcenter td,
    .table.table-borderless.table-condensed.table-vcenter th,
    .overview-results-table td,
    .overview-results-table th,
    .sessions-table td,
    .sessions-table th,
    #user-sessions-table td,
    #user-sessions-table th,
    #session-activity-table td,
    #session-activity-table th {
        border: none !important;
        outline: none !important;
    }

    .block,
    .block .table-responsive,
    .analytics-col-with-padding,
    .overview-right-section-col,
    .most-viewed-col,
    .col-md-6,
    .col-md-5,
    .col-md-7,
    .col-lg-6,
    .col-xs-12 {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .row {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    .table.table-borderless.table-condensed.table-vcenter,
    .overview-results-table table,
    .sessions-table,
    #user-sessions-table,
    #session-activity-table {
        max-width: 100% !important;
        width: 100% !important;
        table-layout: fixed !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .table-responsive {
        overflow-x: auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .table.table-borderless.table-condensed.table-vcenter td,
    .table.table-borderless.table-condensed.table-vcenter th,
    .overview-results-table td,
    .overview-results-table th,
    .sessions-table td,
    .sessions-table th,
    #user-sessions-table td,
    #user-sessions-table th,
    #session-activity-table td,
    #session-activity-table th {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        padding: 4px 6px !important;
    }

    .overview-results-table {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .table.table-borderless.table-condensed.table-vcenter th:first-child,
    .overview-results-table th:first-child,
    .sessions-table th:first-child,
    #user-sessions-table th:first-child,
    #session-activity-table th:first-child {
        width: 40% !important;
        min-width: 0 !important;
    }

    .table.table-borderless.table-condensed.table-vcenter th:not(:first-child),
    .overview-results-table th:not(:first-child),
    .sessions-table th:not(:first-child),
    #user-sessions-table th:not(:first-child),
    #session-activity-table th:not(:first-child) {
        width: auto !important;
        min-width: 0 !important;
    }

    .analytics-col-with-padding,
    .overview-right-section-col,
    .most-viewed-col,
    .analytics-graph-col,
    .no-left-padding,
    .less-right-padding {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
} */

/* @media (max-width: 480px) {
    .table.table-borderless.table-condensed.table-vcenter,
    .overview-results-table table,
    .sessions-table,
    #user-sessions-table,
    #session-activity-table {
        font-size: 12px !important;
    }

    .col-md-6,
    .col-md-5,
    .col-md-7,
    .col-lg-6,
    .col-xs-12,
    .col-xs-4,
    .col-xs-5,
    .col-xs-6,
    .col-xs-3 {
        padding-left: 5px !important;
        padding-right: 5px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .table.table-borderless.table-condensed.table-vcenter th:first-child,
    .overview-results-table th:first-child,
    .sessions-table th:first-child,
    #user-sessions-table th:first-child,
    #session-activity-table th:first-child {
        width: 50% !important;
    }

    .table.table-borderless.table-condensed.table-vcenter .btn,
    .overview-results-table .btn,
    .sessions-table .btn,
    #user-sessions-table .btn,
    #session-activity-table .btn {
        font-size: 10px !important;
        padding: 2px 4px !important;
    }

    .analytics-col-with-padding,
    .overview-right-section-col,
    .most-viewed-col,
    .analytics-graph-col,
    .no-left-padding,
    .less-right-padding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .block,
    .row,
    .col-md-6,
    .col-md-5,
    .col-md-7,
    .col-lg-6 {
        overflow-x: hidden !important;
    }
} */

/* @media (max-width: 768px) {
    .analytics-tabs-row .col-xs-12 {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .analytics-tabs-row .col-xs-12 > div:first-child {
        flex-shrink: 0 !important;
        order: 1 !important;
    }

    .analytics-tabs-row .col-xs-12 > div:last-child {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        order: 2 !important;
        margin-top: 0 !important;
    }

    .analytics-tabs-row #btn-export-csv {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        margin-left: 10px !important;
    }

    .analytics-tabs-row #date-controls {
        flex-shrink: 0 !important;
    }
} */

/* @media (max-width: 480px) {
    .analytics-tabs-row .col-xs-12 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        overflow-x: visible !important;
    }

    .analytics-tabs-row .col-xs-12 > div:first-child {
        order: 1 !important;
        align-self: flex-start !important;
    }

    .analytics-tabs-row .col-xs-12 > div:last-child {
        order: 2 !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
        min-width: 0 !important;
    }

    .analytics-tabs-row .btn:not(#btn-export-csv) {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    .analytics-tabs-row #btn-export-csv {
        font-size: 14px !important;
        padding: 8px 16px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        min-width: auto !important;
        width: auto !important;
    }
} */

/* @media (max-width: 768px) {
    .analytics-col-with-padding .table.table-striped,
    .analytics-col-with-padding .table.table-hover,
    .analytics-col-with-padding .table.table-bordered,
    .analytics-col-with-padding .table.table-sm,
    .analytics-col-with-padding .table.table-lg,
    .overview-right-section-col .table.table-striped,
    .overview-right-section-col .table.table-hover,
    .overview-right-section-col .table.table-bordered,
    .overview-right-section-col .table.table-sm,
    .overview-right-section-col .table.table-lg,
    .most-viewed-col .table.table-striped,
    .most-viewed-col .table.table-hover,
    .most-viewed-col .table.table-bordered,
    .most-viewed-col .table.table-sm,
    .most-viewed-col .table.table-lg {
        max-width: 100% !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    .analytics-col-with-padding .table td,
    .analytics-col-with-padding .table th,
    .overview-right-section-col .table td,
    .overview-right-section-col .table th,
    .most-viewed-col .table td,
    .most-viewed-col .table th,
    .block .table td,
    .block .table th {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }

    .analytics-col-with-padding .content,
    .analytics-col-with-padding .content-header,
    .analytics-col-with-padding .panel,
    .analytics-col-with-padding .panel-body,
    .analytics-col-with-padding .well,
    .analytics-col-with-padding .card,
    .analytics-col-with-padding .card-body,
    .overview-right-section-col .content,
    .overview-right-section-col .content-header,
    .overview-right-section-col .panel,
    .overview-right-section-col .panel-body,
    .overview-right-section-col .well,
    .overview-right-section-col .card,
    .overview-right-section-col .card-body,
    .most-viewed-col .content,
    .most-viewed-col .content-header,
    .most-viewed-col .panel,
    .most-viewed-col .panel-body,
    .most-viewed-col .well,
    .most-viewed-col .card,
    .most-viewed-col .card-body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    .analytics-col-with-padding .block .block-title,
    .analytics-col-with-padding .block .block-content,
    .analytics-col-with-padding .block .block-section,
    .overview-right-section-col .block .block-title,
    .overview-right-section-col .block .block-content,
    .overview-right-section-col .block .block-section,
    .most-viewed-col .block .block-title,
    .most-viewed-col .block .block-content,
    .most-viewed-col .block .block-section {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    .analytics-col-with-padding .table-info.tw-w-full,
    .overview-right-section-col .table-info.tw-w-full,
    .most-viewed-col .table-info.tw-w-full {
        max-width: 100% !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    .analytics-col-with-padding .table-info.tw-w-full td,
    .analytics-col-with-padding .table-info.tw-w-full th,
    .overview-right-section-col .table-info.tw-w-full td,
    .overview-right-section-col .table-info.tw-w-full th,
    .most-viewed-col .table-info.tw-w-full td,
    .most-viewed-col .table-info.tw-w-full th {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }
} */

/* Datepicker row 
---------------------------------------------------- */
#overview-filtering-row .gi-calendar {
    font-size: 3.96rem; /* Reduced by 10% from 4.4rem */
    padding-bottom: 5px;
    min-width: 57.6px; /* Reduced by 10% from 64px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#overview-filtering-row div.header-section h1 small {
    font-size: 57%;
}

#overview-filtering-row #SelectedSeasonMonthAndYear.form-control {
    display: inline-flex;
    margin: 0;
    width: auto;
    min-width: 0;
    max-width: 150px;
    transition: max-width 0.2s ease;
}

#overview-filtering-row #overview-export-csv {
    float: none;
    position: static;
    right: auto;
}

/* Overide the datepicker css */
div.drp-buttons button.applyBtn.btn.btn-sm.btn-primary {
    background-color: #3498DB !important;
    font-weight: 100 !important;
}

div.drp-buttons button.cancelBtn.btn.btn-sm.btn-default {
    font-weight: 100 !important;
}



.analytics-col-with-padding {
    padding-right: 20px;
}

.overview-most-viewed-heading {
    font-weight: 700;
}

.most-viewed-col img {
    border-radius: 10px
}

/* Fix for the 860-1000px range where datepicker was too small */
@media (min-width: 860px) and (max-width: 1000px) {
    /* Override the landscape iPad rule that was making the calendar icon too small */
    #overview-filtering-row .gi-calendar {
        font-size: 3.96rem !important; /* Reduced by 10% from 4.4rem */
        min-width: 57.6px !important; /* Reduced by 10% from 64px */
        min-height: 57.6px !important; /* Reduced by 10% from 64px */
    }
}

/* Ensure the date selection dropdown maintains consistent size across all screen sizes */
@media (max-width: 456px) {
    #overview-filtering-row #SelectedSeasonMonthAndYear {
        min-width: 150px !important;
        max-width: none !important;
        width: 150px !important;
    }
}

@media (max-width: 430px) {
    #overview-filtering-row #SelectedSeasonMonthAndYear {
        min-width: 150px !important;
        max-width: none !important;
        width: 150px !important;
    }
}

@media (max-width: 400px) {
    #overview-filtering-row #SelectedSeasonMonthAndYear {
        min-width: 150px !important;
        max-width: none !important;
        width: 150px !important;
    }
}



/* ipads */
@media (min-width: 481px) and (max-width: 992px) {
    #overview-filtering-row .gi-calendar {
        font-size: 3.96rem; /* Reduced by 10% from 4.4rem */
    }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
    #overview-filtering-row .gi-calendar {
        font-size: 1.4rem; /* Fixed size instead of 3.6vw */
    }

    .overview-right-section-col {
        padding-left: 0 !important;
    }
}

/* desktop */
@media (min-width: 992px) {
    #overview-filtering-row .gi-calendar {
        font-size: 3.96rem; /* Reduced by 10% from 4.4rem */
        padding-bottom: 5px;
    }

    #overview-filtering-row #overview-export-csv {
        font-size: 1em;
    }

    /* Squad page */
    #coachingStaffContainer {
        padding-left: 0;
    }
}

.block.graph {
    padding: 10px 10px 0 10px !important
}


/* players watched content styling 
---------------------------------------------------- */
.players-watched-text {
    font-family: arial, sans-serif;
    color: #069;
    text-decoration: underline;
    cursor: pointer;
}

/* mobile element replicating a tooltip */
.mobile-player-names-tooltip-element {
    position: absolute;
    top: 100%;
    background: #ffffff;
    border: #2979AF solid 1px;
    padding: 4px;
    left: 14px;
    font-size: 1em;
    font-weight: 100;
    z-index: 10;
    color: #777777;
}

/* iPads  */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {
    .mobile-player-names-tooltip-element {
        left: 15%;
    }
}

.overview-results-table {
    overflow-y: auto;
    overflow-x: auto;
    position: relative;
}

#first-table-results {
    margin-bottom: 50px !important;
}

/* desktop */
@media (min-width: 992px) {
    .most-viewed-fixture-videos-content .overview-video-heading {
        font-size: 16px;
    }

    .most-viewed-fixture-videos-content small {
        font-size: 12px;
    }
}

#overview-by-videos-title {
    border-top: 1px solid #eaedf1;
}

/* ====================================================
    Playlist library
==================================================== */
#playlist-library-search-row {
    margin-left: 0;
    margin-right: 0;
}

#playlist-library-search-input-col {
    margin-bottom: 5px;
}

#playlist-library-search-icon-col {
    margin-top: 6px;
    padding-left: 0;
}

#playlist-library-search-btn {
    float: right;
}

#playlist-library-by-me-col label {
    float: left;
    width: 100%;
    text-align: center;
}

#playlist-library-by-me-col input {
    margin-right: 8px;
    margin-top: 6px;
    position: relative;
    top: 2px;
}

#playlist-library-by-me-col {
    padding-right: 0;
}

#playlist-library-by-me-label {
    border: 1px solid #dbe1e8;
    border-radius: 5px;
    padding-bottom: 6px;
    position: relative;
    top: 1px;
    font-weight: 500;
    font-size: 1em;
}

/*#playlist-library-by-me-label #by-me-text {
    position: relative;
    top: -1px !important;
}*/

#OrderByDropDown {
    font-size: 1em;
}

.playlist-top-button.sync-button.disabled.done {
    background-color: green;
    border: 1px solid green;
}

/* desktop */
@media (min-width: 992px) {
    #playlist-library-search-btn {
        float: left;
    }

    #playlist-library-search-input-col {
        padding-right: 8px;
    }

    #playlist-library-by-me-col {
        padding: 0;
    }

    #playlist-library-by-me-col label {
        width: 16%;
    }

    #playlist-library-by-me-col input {
        margin-top: 8px !important;
    }

    #playlist-library-clips-row {
        margin-top: 10px !important;
    }

    #playlist-library-by-me-label {
        float: right !important;
        border: 1px solid #dbe1e8;
        border-radius: 5px;
        padding-bottom: 6px;
        position: relative;
        top: 1px;
        font-weight: 500;
    }

    #playlist-library-by-me-label #by-me-text {
        top: 0 !important;
    }

    #OrderByDropDown {
        font-size: 1em;
    }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
    #playlist-library-by-me-col label {
        width: 22%;
    }
}

#playlist-library-clips-row {
    margin-left: 0;
    margin-right: 0;
    margin-top: 20px;
}

#playlist-library-clips-count {
    font-size: 0.8em;
    background-color: #000000;
    padding: 4px 7px;
    border-radius: 5px;
    color: #ffffff;
    font-weight: 600;
    position: absolute;
    top: 3%;
    left: 6%;
    opacity: 0.7;
}

#playlist-library-name-col {
    margin-top: 3px;
    padding-left: 5px !important;
    padding-right: 0;
}

#playlist-library-name-heading {
    font-size: 1.3em;
    font-weight: 700;
    margin: 0 0 !important;
    line-height: 1.5em;
}

#playlist-library-col {
    /*    min-height: 300px;*/
    padding: 0 25px;
    margin-bottom: 30px;
}

#playlist-library-info-username-and-date-row {
    position: relative;
    top: -2px;
}

.playlist-library-info {
    padding-left: 5px;
}

/*.playlist-library-date-col {
    padding: 0 5px 0 0;
    text-align: right;
}
#playlist-library-created-date-heading {
    margin-top: 10px;
}*/

.playlist-library-heading {
    font-size: 0.9em;
    font-weight: 600;
}

.playlist-library-heading {
    margin: 5px 0 0 0;
}

/*.playlist-library-sub-heading {
    margin: 5px 0 0 0;
}
*/
.ellipsis {
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

#playlist-library-button-col {
    margin-top: 4px;
    text-align: right;
    padding: 0;
}

.playlist-library-info-buttons {
    padding-right: 5px;
}

/* Share modal - */
.share-playlist-team-label {
    margin-top: 8px;
}


/* desktop */
/*@media (min-width: 992px) {

    #playlist-library-col {
        min-height: 330px;
    }
}*/

/* -------------------------------------
    Share playlist modal
------------------------------------- */
#share-playlist-all-options-row, #share-breakdown-all-options-row {
    margin-bottom: 10px;
}

.modal-body .playlist-heading {
    margin-top: 5px !important;
    margin-bottom: 8px;
}

.sharePlaylist.btn, .shareBreakdown.btn {
    float: right;
}

/* -------------------------------------
    Playlist page      
------------------------------------- */
.playlist-centre-right-container-col, #playlist-centre-no-clips-row {
    overflow-x: auto;
}

.playlist-centre-right-container-col {
    background-color: #eaedf1;
    padding-left: 0;
}

.playlist-centre-right-container-col {
    min-height: 500px !important;
    max-height: 600px;
}

/* desktop */
@media (min-width: 992px) {
    .playlist-centre-right-container-col {
        max-height: none;
        min-height: 0 !important;
    }
}


/* Video controls */
.video-control #tabs-row, .timeline-table-rel-btn-div {
    display: inline;
}

.video-control-tab-col {
    padding-right: 3px !important;
    padding-left: 0 !important;
}

.video-control-tab-col a {
    text-decoration: none !important;
}

#right-col-video-controls div {
    float: right;
}

#timeline-table-zoom-btns {
    margin-left: 3px;
}

#timelineTabLink, #matrixTabLink {
    border: #064B82 solid 1px;
    border-bottom: #064B82 solid 1px !important;
    border-radius: 5px;
    color: #064B82;
    font-size: 0.9em;
    margin-top: 1px;
}

.video-control #tabs-row .active {
    background-color: #064B82 !important;
    color: #ffffff !important;
    border: #064B82 solid 1px !important;
    border-bottom: #064B82 solid 1px !important;
}

#timelineTabLink {
    margin-right: 3px;
}

#expand-playlist-clip-box-row {
    text-align: center;
    font-size: 0.9em;
    padding-top: 6px;
    padding-bottom: 6px;
}

#expand-playlist-clip-box-row a {
    color: #064B82;
}

#expand-playlist-clip-box-row a:hover {
    color: #27b4f1;
}

#playlist-centre-left-col .single-box {
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}

.playlist-centre-box-row, #playlist-centre-no-clips-row {
    background-color: #ffffff;
    margin: 5px;
    padding: 0;
}

.playlist-centre-box-row .col-md-2, .playlist-centre-box-row .col-md-7 {
    padding-top: 2px;
}

.playlist-centre-box-top-row {
    margin-top: 0;
    padding: 0 !important;
}

#playlist-centre-toggle-row {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#playlist-centre-has-clips-options {
    margin-bottom: 0;
}

#deleteSelectedClipsForm, #selectedClipsProcessPlaylistForm {
    display: flex;
    flex-direction: row;
}

#playlist-centre-playlist-name-heading, #playlist-name-text-input {
    margin: 5px !important;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.5;
}

#playlist-name-text-input {
    font-size: 1em;
}

.playlist-centre-but-col {
    text-align: right;
    padding-left: 0;
    display: flex;
    justify-content: end;
}

#playlist-centre-select-all-col {
    text-align: left;
    padding-left: 20px;
    padding-right: 0;
}

#playlist-centre-select-all-col #playlist-centre-select-all-circle {
    display: inline-block;
}

#playlist-centre-select-all-text {
    position: relative;
    top: -8px;
    padding-left: 5px;
    font-size: 1em;
}


#playlist-centre-delete-selected-btn {
    margin-right: 5px;
    background-color: white;
    color: red;
    padding: 0 !important;
    font-size: 14px !important;
}

#playlist-centre-delete-selected-btn:hover {
    background-color: red;
    color: white;
}

#playlist-centre-toogle-but {
    margin: 5px 0 0 0;
    float: right;
}

.playlist-centre-box-row {
    /*    padding: 12px 20px; */
    padding: 12px 20px 12px 20px
}

.playlist-centre-box-counter, .playlist-centre-circle, #playlist-centre-select-all-circle {
    border: #064B82 solid 2px;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    padding: 1px;
    text-align: center;
    margin-top: 13px;
    font-weight: 700;
}

#playlist-centre-select-all-circle {
    margin-top: 6px !important;
}

/* -------------------------------------
    Playlist centre - box
------------------------------------- */
.playlist-centre-box-checkbox, #playlist-centre-select-all-checkbox {
    display: none;
}

.playlist-centre-box-counter-selected, .playlist-centre-select-all-circle-selected {
    background-color: #064B82;
    color: #ffffff;
}

.playlist-heading, .playlist-sub-heading, .playlist-clip-video-name {
    font-size: 1em;
    font-weight: 700;
}

.playlist-clip-video-name {
    font-weight: 500 !important;
}

/* has comments elements */
.playlist-video-event-has-replies-indicator {
    font-weight: 700;
    margin-top: 5px;
}

/* comment bubble icon */
.playlist-video-event-has-replies-indicator i {
    font-size: 1.4em;
    position: relative;
    top: 3px;
}

/* playlist box - center column */
.col-xs-7.col-md-7.playlist-box-col {
    padding-right: 0;
}


/* -------------------------------------
    Playlist centre - dropdown related
------------------------------------- */
.playlist-box-col #ellipsis-icon-for-edit-dropdown {
    font-size: 0.9em;
    font-weight: 400;
}

.outlined-ellipsis {
    border: 2px solid #064B82;
}

.playlist-box-col .dropdown-edit-button {
    font-size: 2.5em;
    width: 1.25em;
    height: 1.25em   ;
    border: none;
    background-color: #ffffff;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 999em;
    margin-top: 10px;
}

#dropdown-options-button {
    font-size: 2.5em;
    width: 1.25em;
    height: 1.25em   ;
    border: none;
    background-color: #ffffff;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 999em;
    margin-top: 10px;
}

#dropdown-options-menu {
    border-radius: 10px;
    background-color: #ffffff;
    min-width: 100px;
    z-index: 1000;
    box-shadow: 0 3px 6px rgb(0 0 0 / 10%);
    left: -110px;
    overflow: hidden;
}

#dropdown-options-list {
    padding: 0;
    margin: 0;
    background-color: #FFFFFF;
    width: 100%;
}

.dropdown-options-item {
    list-style: none;
    background-color: white;
    color: #064B82;
    width: 100%;
}

.dropdown-options-item a {
    background-color: white;
    width: 100%;
    border: 0;
    color: #064B82;
    padding: 6px 10px 6px 20px;
    text-align: start;
    border-radius: 0;
    font-size: 13px;
}

#playlist-centre-download-selected-btn-disabled {
    cursor: not-allowed;
    background-color: #eaedf1;
    color: #b8c2cc;
}

.dropdown-options-item a:hover {
    background-color: #3498db;
    color: white;
}

.dropdown-edit-button:hover {
    background-color: #f2f4f8;
    filter: brightness(0.95);
}

#dropdown-options-button:hover {
    background-color: #f2f4f8;
    filter: brightness(0.95);
}

.playlist-box-col .edit-dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 100px;
    overflow: auto;
    box-shadow: 0 3px 6px rgb( 0 0 0/ 10%);
    left: -40px;
    top: 40px !important;
    z-index: 1;
    top: 30px;
    border-radius: 10px;
    cursor: pointer;
}

.playlist-box-col .edit-dropdown-content a {
    color: #064B82;
    padding: 6px 10px 6px 20px;
    text-decoration: none;
    display: block;
}

.playlist-box-col .edit-dropdown-content a:hover {
    background-color: #3498DB;
    color: #ffffff;
}

.show {
    display: block;
}

/* playlist box being dragged style */
.dragging-playlist-clip {
    border: solid 2px #3498DB;
}


/* -------------------------------------
    Playlist centre - commenting      
------------------------------------- */
.playlist-centre-commenting-row, .playlist-centre-new-comment-row,
.playlist-centre-first-comment-row, .playlist-video-event-more-replies-row {
    margin-top: 5px;
    margin-left: 5px;
    font-size: 0.9em;
}

.playlist-centre-first-comment-row .col-md-2, .playlist-centre-first-comment-row .col-md-9,
.playlist-centre-commenting-row .col-md-2, .playlist-centre-commenting-row .col-md-9,
.playlist-centre-new-comment-row .col-md-2, .playlist-centre-new-comment-row .col-md-9 {
    padding-top: 5px;
    border-top: solid #eaedf1 1px;
}

/* new comment columns */
.playlist-centre-new-comment-row .col-md-2, .playlist-centre-new-comment-row .col-md-9 {
    padding-top: 10px;
}

/* Delete comment col*/
.playlist-centre-first-comment-row .col-md-1, .playlist-centre-commenting-row .col-md-1 {
    padding: 0 !important;
    margin-top: 8px;
}

.playlist-centre-circle {
    color: #064B82 !important;
    font-size: 12px !important;
    padding-top: 2px;
}

/* The clip timeline buttons over to the right on mobile */
#timeline-table-rel-btns-center {
    text-align: right;
    display: block;
}

/* Timeline edit - voice note label onto two lines */
#audio-input-label {
    padding: 0;
    padding-right: 5px;
    text-align: right;
    margin-left: 30%;
    position: relative;
    top: -6px;
    left: -6px;
}

/* After mobile screen upwards */
/* --------------------------------------------- */
@media (min-width: 992px) {
    /*    .playlist-centre-circle {
            margin-left: 10px;
        }*/
    /* The clip timeline buttons in the centre on other devices */
    #timeline-table-rel-btns-center {
        text-align: center;
        display: inline-block;
    }

    .dropdown-edit-button {
        right: -10px;
    }

    #matrix-table-wrapper {
        overflow: auto !important;
    }

    /* Timeline edit - voice note label onto two lines */
    #audio-input-label {
        padding: 0;
        padding-top: 4px;
        padding-right: 5px;
        text-align: right;
        margin-left: 30%;
    }
}


/* iPad only and in landscape mode */
/* --------------------------------------------- */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
    .playlist-centre-circle {
        margin-left: -10px !important;
    }

    #playlist-centre-select-all-text {
        font-size: 0.7em;
    }

    .dropdown-edit-button {
        right: 15px;
    }

    /* fix issue of the content in the container being dragable for some reason on ipad */
    .playlist-centre-right-container-col {
        overflow-x: hidden;
    }
}

#playlist-comment-user-name {
    font-weight: 600;
}

.playlist-video-event-datetime {
    color: gray;
    font-size: 0.8em;
}

#playlist-video-event-has-more-replies-col {
    padding-left: 0;
}

.playlist-video-event-has-more-replies-indicator {
    display: inline;
}

.playlist-video-event-has-more-replies-indicator a {
    color: #064B82;
}

.playlist-video-event-has-more-replies-indicator i {
    padding-right: 5px;
}

.playlist-centre-new-comment-row textarea {
    width: 100%;
}

.playlist-centre-comment-submit-btn {
    float: left;
    margin-right: 8px;
}

.delete-plvec-span a {
    line-height: 0;
    margin-bottom: 1px !important;
    border: solid 1px #e74c3c;
    border-radius: 15px;
    padding: 1px 2px;
}

.delete-plvec-span a i {
    font-size: 0.8em;
    color: #e74c3c;
}

.delete-plvec-span .btn-xs:hover {
    background-color: #e74c3c !important;
}

.delete-plvec-span .btn-xs:hover > i {
    color: #ffffff !important;
}

.playlist-box-disabled, .playlist-box-appear-disabled-only {
    opacity: 0.5;
}

/* Playlist edit related
-------------------------------- */
.range-slider-edit-options-col {
    padding-right: 0;
    text-align: right;
}

.range-slider-edit-options-col button {
    font-size: 1em;
    padding: 3px 7px;
}


/* Playlist mobile timeline table
-------------------------------- */
#timeline-mobile {
    padding: 0;
}

.mobile-tab-accordion-group {
    font-size: 13px;
    font-family: Arail, sans-serif;
    transition: background-color 0.25s
}

.mobile-tab-accordion-group i {
    color: #064B82;
    line-height: 36px;
    float: right;
    font-size: 23px;
}

.mobile-tab-accordion-group .row {
    padding-left: 15px;
    padding-right: 15px;
}

#mobile-timeline-tab-col, #mobile-matrix-col {
    border: solid 1px #ffffff;
    color: #064B82;
    border: solid 1px #064B82 !important;
    border-radius: 5px;
}

.playlist-mobile-accordion-active {
    background-color: #064B82 !important;
    color: #ffffff !important;
}


#mobile-timeline-accordion-heading, #mobile-matrix-accordion-heading {
    font-size: 1em;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 0;
    margin-top: 12px;
    padding-left: 10px;
    line-height: 1;
}

#mobile-matrix-accordion-heading {
    padding-left: 20px;
}


.table-matrix {
    border: #ffffff solid !important;
    /* To fix the first left column not correctly lining up. */
    min-width: 100px;
}

#matrix-table-wrapper {
    overflow: scroll;
}


/* iPad only and in portrait mode */
/* --------------------------------------------- */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
    playlist-centre-right-col {
        height: auto !important
    }
}


/* Timeline table 
---------------------------------------
first left column styling */
/*.timeline-groups-axis.timeline-groups-axis-onleft .timeline-axis {
    background-color: #ffffff !important;
}*/


/* Mobile timeline - collapsing and expanding the tab content elements 
------------------------------------ */
#mobile-accordion-tab-content-wrapper {
    margin-bottom: 15px;
}

#mobile-accordion-tab-content-col {
    color: #064B82;
    /*border: solid 1px #064B82 !important;*/
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 25px;
    background-color: #f9fafc;
    border-top: none;
    border-left: 1px solid #dbe1e8;
    border-top: 1px solid #dbe1e8;
    border-right: 1px solid #dbe1e8;
    border-bottom: 1px solid #dbe1e8;
}

#mobile-accordion-tab-content-col i {
    line-height: normal !important;
}


/* Temporary User page */
/* iPad only and in landscape mode */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
    #temp-user-left-div-wrapper {
        width: 100%;
    }

    #temp-user-right-div-wrapper {
        width: 100%;
    }

    #temporary-user-logo-img {
        width: 50% !important;
        position: relative;
        left: 170px;
    }
}

/* iPad - portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    #temporary-user-logo-img {
        width: 50% !important;
        position: relative;
        left: 140px;
    }
}

/* Touch devices - Range slider, handle, area to be bigger so it's more easier to move it when using touch interaction */
@media (pointer:coarse) {
    /* Local dev for confirming that the device has the rule against it. */
/*    #page-content {
        background-color: red !important;
    }*/
    .rc-slider-handle:before {
        content: "";
        position: absolute;
        width: 47px;
        height: 37px;
        margin-left: -26px;
        margin-top: -19px;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        /*background: red;*/
    }
}


/* Playlist */
/* ========================================================= */
/* Playlist multi video related */
/* ========================================================= */
/* Related to the multi vidoe playlist link */
#playlist-mvp-link {
    color: #3498db;
    float: right;
    padding-top: 4px !important;
    padding-right: 10px !important;
}

#playlist-mvp-link i {
    font-size: 2.4em;
}

#playlist-mvp-link:hover {
    color: #064B82;
}

.range-slider-col {
    padding: 10px 30px 0 30px;
}

.range-slider-zoom-options-col {
    padding-right: 0 !important;
}

.range-slider-zoom-options-col button {
    float: right;
    font-size: 1.4em;
    margin: 0 0 10px 4px;
    padding: 0px 7px;
}

/* multi video playlist modal
    ------------------------------------------------------------ */
/*#modal-playlist-multi-video {
    padding-right: 17px;
}*/
#modal-playlist-multi-video .modal-body {
    padding-top: 0 !important;
}

#modal-playlist-multi-video .control-label {
    padding-top: 8px;
}

#modal-playlist-multi-video .playlistSeasonCheckboxInput {
    position: relative;
    top: 1px;
    margin: 0 4px !important;
}

#modal-playlist-multi-video h4 {
    font-weight: 600;
}

#modal-playlist-multi-video #intro-message-col {
    padding-top: 15px;
    font-size: 1.1em;
}

#modal-playlist-multi-video #intro-message-col h4 {
    padding-top: 10px;
}

#modal-playlist-multi-video .row-section {
    padding-bottom: 10px;
}

#modal-playlist-multi-video #season-label {
    margin-left: 7px;
}

#modal-playlist-multi-video #season-label:first-child {
    margin-left: 0 !important;
    position: relative;
    left: -3px;
}

/* related to styling the multi video playlist modal dropdowns */
.option-heading-only {
    font-weight: 600;
    color: #064B82;
}

.option-with-value {
}


/* Range Slider styling 
-------------------------------- */
/* Clip time range slider 
------------------------------------- */
/* Left and right time information */
.clip-time-range-slider-row span.irs-min, .clip-time-range-slider-row span.irs-max {
    font-size: 12px !important;
    color: #6b6b6b !important;
}

/* increase the thickness of the bar and it's elements '*/
.clip-time-range-slider-row .irs--flat .irs-line, .clip-time-range-slider-row .irs--flat .irs-bar {
    height: 50px !important;
}

/* handles */
.clip-time-range-slider-row .irs-handle.from, .clip-time-range-slider-row .irs-handle.to {
    top: 21px !important;
    height: 50px !important;
    z-index: 1 !important;
}

/* To style the handles */
.clip-time-range-slider-row .irs--flat .irs-handle > i:first-child {
    width: 7px !important;
}

.clip-time-range-slider-row .irs-handle.from:hover, .clip-time-range-slider-row .irs-handle.to:hover {
    cursor: ew-resize;
}

/* For the telestration range slider */
#telestration-range-slider-col .clip-time-range-slider-row .irs-handle.from:hover, #telestration-range-slider-col .clip-time-range-slider-row .irs-handle.to:hover {
    cursor: default !important
}

#telestration-range-slider-col, #edit-video-event-times-col {
    padding: 10px 15px 0 30px;
}

/* Mobile only */
@media only screen and (max-width: 600px) {
    #telestration-range-slider-col, #edit-video-event-times-col {
        padding: 10px 30px 0 30px;
    }
}

/* iPad - portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    #telestration-range-slider-col, #edit-video-event-times-col {
        padding: 10px 30px 0 30px !important;
    }

    .listedTelestrationBtn {
        width: 11vw;
    }
}

/* The time information within the bubbles*/
.clip-time-range-slider-row .irs-from, .clip-time-range-slider-row .irs-to,
.clip-time-range-slider-row .irs-bar, .clip-time-range-slider-row .irs-single,
.clip-time-range-slider-row .irs-handle i {
    background-color: #064B82 !important;
    font-size: 12px;
    left: 31.5%;
}

.clip-time-range-slider-row .irs-from:before, .clip-time-range-slider-row .irs-to:before,
.clip-time-range-slider-row .irs-single:before {
    border-top-color: #064B82 !important;
}

/* Make the grey background bars a box */
.clip-time-range-slider-row .irs--flat .irs-line,
.video-time-range-slider-row .irs--modern .irs-line {
    border-radius: 0 !important;
}

/* video time range slider
-------------------------------------  */
/* so the handle is always over the clip box */
.video-time-range-slider-row irs irs--square js-irs-1, .video-time-range-slider-row irs-handle single {
    z-index: 100 !important;
}

/*    bar isn't shown and is layed on top of the clip range slider bar */
.video-time-range-slider-row .irs--square .irs-bar {
    display: none !important;
}

/* The grey bar*/
.video-time-range-slider-row .irs--square .irs-line {
    top: 31px;
    height: 12px;
    background-color: #cbd0d9 !important;
}

/* the handle */
.video-time-range-slider-row .irs-handle.single {
    top: 29px !important;
    background-color: #3498DB !important;
    border: 3px solid #3498DB !important;
}


/* Maintenance page */
#maintenance-container {
    text-align: center;
    margin-top: 5%;
}

#maintenance-container i {
    font-size: 7em;
}

#maintenance-container p {
    font-size: 1.5em;
}

/* access restricted page
    ------------------------------*/
#restricted-container {
    text-align: center;
    min-height: 600px;
}

#restricted-container #first-row {
    margin-top: 30%;
}

#restricted-container h2 {
    font-weight: 700;
}

#restricted-container i {
    font-size: 7em;
}

#restricted-container p {
    font-size: 1.2em;
    padding-top: 13px;
}

/* desktop */
@media (min-width: 992px) {
    #restricted-container {
        position: relative;
        top: -10px;
    }

    #restricted-container #first-row {
        margin-top: 9%;
    }
}


/* Permission - Team Selector */
.team-selector-club-heading {
    background-color: #f9fafc;
    border: 1px solid #dbe1e8;
    border-bottom: 1px solid #eaedf1;
    position: relative;
    top: 1px;
    padding: 10px 15px 7px 15px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.team-selector-club-heading h2 {
    margin: 0;
    font-size: 17px;
    font-weight: normal;
}

#team-selector-block {
    overflow: hidden;
    overflow-y: scroll;
    min-height: 215px;
    max-height: 400px;
    padding-bottom: 10px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.team-selector-list-of-teams-container {
    max-height: 84%;
}

.team-selector-list-of-teams-container table {
    margin-bottom: 0;
}

.select-row-button {
    font-size: 15px;
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    height: 25px;
    width: 25px;
}

#shareTaggingPanelModal {
    padding: 0;
}

#shareTaggingPanelModal > .modal-body {
    padding: 0;
    padding-top: 20px;
}

.ajs-message {
    border: 1px solid darkgreen !important;
    text-shadow: none !important;
}

#createPlaylistModalBody > .form-group {
    display: flex;
    align-items: center;
}

#shareTaggingPanel-btn {
    height: 26px !important;
    width: 26px !important;
    padding: 5px !important;
}

.match-notes-p {
    white-space: pre-line;
}

/*Tag input*/
.ReactTags__tags {
    display: flow-root;
}

.ReactTags__selected {
    display: inline;
}

.ReactTags__tagInput {
    display: inline-table;
}

.ReactTags__tag {
    display: inline-block;
    margin-right: 10px;
    background-color: #075899;
    padding: 3px;
    padding-left: 5px;
    color: white;
    border-radius: 5px;
    margin-bottom: 5px;
}

.ReactTags__remove {
    background-color: #0000;
    border: 0;
    font-weight: 1000;
    padding-right: 1px;
}

.ReactTags__tagInputField {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
    --fa-font-duotone: normal 900 1em/1 "Font Awesome 6 Duotone";
    --fa-font-light: normal 300 1em/1 "Font Awesome 6 Pro";
    --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Pro";
    --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Pro";
    --fa-font-thin: normal 100 1em/1 "Font Awesome 6 Pro";
    user-select: none;
    box-sizing: border-box;
    font: inherit;
    font-family: inherit;
    min-height: 1px;
    height: 30px;
    width: 128px;
    line-height: 1.42857143;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    font-size: 13px;
    padding: 6px 8px;
    max-width: 100%;
    margin: 1px 0;
    color: #075899;
    border-color: #dbe1e8;
    box-shadow: none;
    -webkit-appearance: none;
}

.ReactTags__suggestions {
    background-color: white;
    width: 174px;
    border-radius: 0px 5px 5px 0px;
}

.ReactTags__suggestions > ul {
    list-style-type: none;
    padding-left: 0px;
}

.ReactTags__activeSuggestion {
    background-color: #3498db;
    color: white;
    border-radius: 5px;
}

.ReactTags__suggestions > ul > li {
    padding: 5px;
}

/* 
Video player keyboard shortcuts key displaying
------------------------------------------------- */
#shortcut-keys-icon {
    font-size: 1.5em;
    padding-top: 1px;
}

#player-shortcut-keys-display {
    position: absolute;
    z-index: 1000;
    background: rgba(43, 51, 63, 0.7);
    color: #ffffff;
    border-radius: 10px;
    /* min-width: 200px; */
    padding: 0 15px 10px 15px
}

#player-shortcut-keys-display .row {
    margin-top: 10px;
}

#player-shortcut-keys-display h2 {
    font-size: 1.3em;
    font-weight: 700;
    margin: 0 0 10px 0;
    padding-left: 4px;
}

#player-shortcut-keys-display .keyboard-shortcut {
    background-color: #000000;
    padding: 3px;
    font-size: 1em;
    border-radius: 5px;
    box-shadow: 0 0px 4px #ffffff;
    width: fit-content;
}

#player-shortcut-keys-display .keyboard-shortcut.arrows {
    padding: 3px 6px;
    margin-left: 0.8rem;
}

#player-shortcut-keys-display .keyboard-shortcut-info-col {
    padding-left: 10px;
}

#player-shortcut-keys-display .keyboard-shortcut-info {
    font-size: 0.9em;
    padding-top: 2px;
}


/* Playlist clips
 -------------------------------- */
#edit-time-button {
    height: 30px !important;
    width: 30px !important;
    margin-top: 2px;
    margin-right: 15px;
}

.playlist-voicenote-icon {
    font-size: 18px;
}

.playlist-telestration-icon {
    font-szie: 18px;
}

.playlist-comment-icon {
    margin-right: 12px;
}

#playlist-centre-right-col .nav-pills li a {
    background-color: white;
    border: #064B82 solid 1px;
    color: #064B82;
    margin-left: 2px;
    margin-right: 2px;
}

#playlist-centre-right-col {
    overflow: hidden;
}

#deleteSelectedClipsForm {
    margin-left: auto;
}

#playlist-centre-right-col .nav-pills li a:hover {
    background-color: #064B82 !important;
    color: white;
    cursor: pointer;
}

#playlist-centre-right-col .nav-pills .active a {
    background-color: #064B82 !important;
    color: white;
}

/* Ensure nav-pills container properly centers content */
/* Playlist nav buttons i.e. comments, voice notes and drawings */
#playlist-centre-right-col .nav-pills li a {
    font-size: 1em;
    padding: 10px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    flex: 1;
    text-align-last: center;
    word-break: normal;
    word-wrap: normal;
    white-space: normal;
}

/* Ensure voice notes button text is always centered */
#playlist-centre-right-col .nav-pills li a:contains("Voice Notes"),
#playlist-centre-right-col .nav-pills li a {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    text-align-last: center !important;
    white-space: normal !important;
}

/* Responsive adjustments for smaller screens */
@media only screen and (max-width: 800px) {
    #playlist-centre-right-col .nav-pills li a {
        font-size: 0.9em;
        padding: 8px 4px;
    }
}

@media only screen and (max-width: 700px) {
    #playlist-centre-right-col .nav-pills li a {
        font-size: 0.8em;
        padding: 6px 2px;
    }
}

/* mobile only */
@media only screen and (max-width: 600px) {
    #playlist-centre-right-col .playlist-details-container .nav {
        display: inline-flex;
        justify-content: center;
    }

    #playlist-centre-right-col .playlist-details-container .nav-pills li a {
        padding: 7px 10px;
        font-size: 0.75em;
    }
}

.playlist-centre-first-comment-row {
    margin-right: 30px;
}

.playlist-centre-first-comment-row .col-xs-2 {
    padding-bottom: 5px;
}

.playlist-comment-open-delete-modal {
    cursor: pointer;
}

.playlist-comment-open-delete-modal:hover {
    color: #3498DB;
}

.voicenote-open-delete-modal {
    margin-left: auto;
}

.voicenote-open-delete-modal:hover {
    color: #D3D3D3;
}

/* sessions 
---------------------------- */
.avatar-circle {
    color: #FFFF;
    font-size: 3em;
    border: #e4e8ed solid 3.5px;
    border-radius: 50%;
    width: 7rem;
    height: 7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    padding-left: 14px;
    background-color: #eaedf1;
    margin-right: 20px;
}

.sessions-active-users-row {
    margin-left: -20px; 
    margin-right: -20px;
}
.sessions-active-users-row:hover {
    background-color: #f2f4f8;
}
.sessions-active-users-row a:hover {
    text-decoration: none;
}

.playlistInfoCard {
    background-color: red;
}

.playlistVideoDropdown li a {
    color: #064B82;
    padding-left: 20px;
}

.playlistVideoDropdown li a:hover {
    background-color: #3498DB !important;
}

.dropdown-menu {
    border: none;
}

#playlist-library {
    margin-bottom: 20px;
}

.row.playlist-centre-box-row.playlist-activate.playlist-play
{
    cursor: pointer;
}


#notification-container {
    min-width: 220px !important;
}
#notification-container li.dropdown-header {
    padding: 8px 10px !important;
    font-size: 12px;
    color: #075899;
    background-color: #f9fafc !important;
    border-top: 1px solid #eaedf1;
    border-bottom: 1px solid #eaedf1;
}

/*@keyframes fade-in {*/
/*    from { opacity: 0; }*/
/*}*/

/*@keyframes fade-out {*/
/*    to { opacity: 0; }*/
/*}*/

/*@keyframes slide-from-right {*/
/*    from { transform: translateX(90px); }*/
/*}*/

/*@keyframes slide-to-left {*/
/*    to { transform: translateX(-90px); }*/
/*}*/

/*!* define animations for the old and new content *!*/
/*::view-transition-old(slide-it) {*/
/*    animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,*/
/*    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;*/
/*}*/
/*::view-transition-new(slide-it) {*/
/*    animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,*/
/*    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;*/
/*}*/

/*!* tie the view transition to a given CSS class *!*/
/*#page-content {*/
/*    view-transition-name: slide-it;*/
/*}*/

/* Dropdown Styling */
sl-menu {
    padding: 5px;
    border-radius: 10px;
    overflow: hidden;
}

sl-menu-item {
    border-radius: 10px;
    font-size: 12px !important;
}

sl-menu-item:hover {
    border-radius: 10px;
    background-color: #F2F4F8  !important;
}

sl-menu-item::part(label) {
    font-size: 13px;
    color: #00579B;
}

sl-menu-item::part(base) {
    border-radius: 5px;
}

.menu-item {
    background-color: red !important;
}

* {
    scrollbar-color: auto !important;
}

* {
    --sb-track-color: #ffffff !important;
    --sb-thumb-color: #b1b1b1 !important;
    --sb-size: 10px !important;
}

*::-webkit-scrollbar {
    width: var(--sb-size) !important;
}

*::-webkit-scrollbar-track {
    background: var(--sb-track-color) !important;
    border-radius: 13px !important;
}

*::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color) !important;
    border-radius: 13px !important;

}

@supports not selector(::-webkit-scrollbar) {
    .page-column {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}

emoji-picker {
    --emoji-size: 1.3em;
}

@media (min-width: 1200px) {
  .row.video-flex-row,
  .playlist-centre-box-row {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Fix for video thumbnail height issues */
.thumbnail > img,
.playlist-thumbnail img,
.card-background img[src*="thumbnails"],
.playlist-card img,
.most-viewed-col img[src*="thumbnails"] {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 8px 8px 0 0 !important;
    max-width: 100% !important;
}

/* Ensure video thumbnails in cards maintain aspect ratio */
.card-background img[src*="thumbnails"],
.playlist-card img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 8px 8px 0 0 !important;
    max-width: 100% !important;
}

#right-match-notes-col,
.widget,
.widget-advanced,
.widget-main {
  height: 100%;
}

.widget-main {
  display: flex;
  flex-direction: column;
}

#breakdowns-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Ensure proper overflow behavior */
  position: relative;
  /* Force proper height calculation */
  box-sizing: border-box;
}

@media (min-width: 992px) {
  #breakdowns-wrapper {
    overflow-y: auto !important;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #888 #f1f1f1; /* Firefox */
  }
  #breakdowns-wrapper::-webkit-scrollbar {
    width: 10px;
    background: #f1f1f1;
  }
  #breakdowns-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
  }
}

/* === CLEAN RECORD BUTTON CSS === */

/* Remove ALL conflicting styles from other CSS files */
.taggingPanelRecord .record-border-svg,
.taggingPanelRecord .record-border,
.taggingPanelRecordWrapper .record-border-svg,
.taggingPanelRecordWrapper .record-border,
.record-btn-octagonal,
.record-btn-sliced,
.record-btn-ultra-thin,
.record-btn-border-animation,
.record-btn-clip-animation,
.record-btn-clip-animation-enhanced,
.record-btn-border-animation-alt,
.record-btn-clip-animation-alt,
.record-btn-clip-animation-enhanced-alt,
.record-btn-hexagonal,
.record-btn-diamond,
.record-btn-rounded-octagon,
.record-btn-polygon-border,
.record-btn-segment-border,
.record-btn-gradient-border,
.record-btn-perimeter-border,
.record-btn-shadow-border,
.record-btn-outline-border,
.record-btn-multi-border,
.record-btn-perimeter-elements,
.record-btn-gradient-perimeter,
.record-btn-no-clip,
.record-btn-transform-border,
.record-btn-working-border,
.record-btn-multi-side-border,
.record-btn-individual-borders,
.record-btn-css-vars-border,
.record-btn-true-moving-border,
.record-btn-gradient-moving-border,
.record-btn-octagonal-moving-border,
.record-btn-pure-border-octagon,
.record-btn-individual-segments,
.record-btn-gradient-mask,
.record-btn-svg-border,
.record-btn-svg-border-alt,
.record-btn-svg-perfect,
.record-btn-css-mask,
.record-btn-svg-seamless,
.record-btn-svg-infinite,
.record-btn-svg-perfect-loop,
.record-btn-solid-line,
.record-btn-constant-line,
.record-btn-perfect-moving-line {
  display: none !important;
  animation: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* Base record button styling */
.taggingPanelRecord {
  cursor: pointer;
  transition: all 0.2s ease;
  clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
  width: 100%;
  border: none;
  padding: 10px 18px !important;
  margin: 0;
  position: relative;
  min-width: 0;
  flex-shrink: 1;
}

.taggingPanelRecord:hover {
  transform: none;
  filter: brightness(0.95);
}

/* Record button wrapper */
.taggingPanelRecordWrapper {
  position: relative;
  width: 100%;
  display: inline-block;
  vertical-align: baseline;
  transition: all 0.2s ease;
  min-width: 0;
  flex-shrink: 1;
}

/* Recording animation - REDUCED INTENSITY BY HALF */
@keyframes recordPulseLight {
  0%, 100% { 
    transform: scale(1); 
    /*filter: brightness(1); */
  }
  50% { 
    transform: scale(1.02); /* Reduced from 1.05 to 1.025 */
    /*filter: brightness(1.125);  Reduced from 1.25 to 1.125 */
  }
}

.taggingPanelRecord.recording,
.taggingPanelRecordWrapper.recording {
  animation: recordPulseLight 1.5s ease-in-out infinite !important;
}

/* FINAL SOLUTION: Red border using wrapper approach */
.taggingPanelRecordWrapper.recording {
  position: relative !important;
}

.taggingPanelRecordWrapper.recording::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: #ff0000;
  clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
  z-index: -1;
  animation: recordPulseLight 1.5s ease-in-out infinite;
}

/* Tag & Label buttons - match height with record buttons */
.taggingPanelTag,
.taggingPanelLabel {
  display: inline-block;
  padding-bottom: 4px;
}

/* Responsive thumbnail sizing - removed fixed dimensions to match original design */
.most-viewed-col img[src*="thumbnails"] {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    max-width: 100% !important;
}

/* Chrome-specific optimizations for dynamic recording clips */
[data-temp-clip-id] {
    /* Ensure immediate visibility */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Fix for video thumbnail height issues */