/*
    Add to csHtml using the following snippit:
    @using IM.Web.Extensions;
    @section css {
        <link rel="stylesheet" type="text/css" href="@Url.CalculateFileVersionForNoCaching("~/Content/_aurora/components/training/training-videobutton.component.css")" />
    }

    --------------------

    Created By: Mark Greep
    Created On: 09/Sep/2025

    Relates to view(s):
		Views/Training/Index.cshtml

    Group prefix - Should also be listed in site.css to avoid conflict:
    	tb-
*/

training-video-button {
    /*mimics the normal margin of a md-button*/
    
}
training-video-button .md-button {
    margin: 0;
}

md-menu-content.tb-training-popup {
    width: 500px;
    min-height: 100px;
    max-height: 500px;
}
    md-menu-content.tb-training-popup .tb-training-results {
        width: 100%;
        padding: 10px;
    }


    .tb-training-popup .tb-training-title {
        margin: 0 0 5px 0;
        color: #424242;
    }
.tb-training-popup .tb-training-title2 {
    margin: 0 0 5px 0;
    background-color: #ffe3e3;
    font-size: 12px;
    width: 100%;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

.tb-training-popup .tb-training-popup-progress {
    overflow-y: hidden;
    width: 100%;
}

    .tb-training-popup .tb-training-section {
        width: 100%;
    }
        .tb-training-popup .tb-training-section md-toolbar {
            min-height: 24px;
            height: 24px;
            background-color: #344758;
        }
            .tb-training-popup .tb-training-section md-toolbar .md-toolbar-tools {
                max-height: 24px;
                height: 24px;
                font-size: 14px;
            }


        .tb-training-popup .tb-training-section .tb-training-video {
            position: relative;
            min-height: 64px;
            background-color: whitesmoke;
            border: 1px solid #d3d3d3;
            width: 100%;
            margin: 5px 0 0 0;
            padding: 10px;
            cursor: pointer;
        }
        .tb-training-popup .tb-training-section .tb-training-video:hover {
            background-color: lightblue;
        }

        .tb-training-popup .tb-training-section .tb-training-video img {
            width: 120px;
            max-height: 64px;
        }
            .tb-training-popup .tb-training-section .tb-training-video .tb-training-video-minutes {
                position: absolute;
                bottom: 0;
                
                left: 2px;
                background-color: orangered;
                color: white;
                padding: 3px 5px;
                transition: background-color 0.6s ease;
                font-size: 12px;
            }
            .tb-training-popup .tb-training-section .tb-training-video .tb-training-video-text {
                height: 100%;
                margin: 0 0 0 10px;
            }
                .tb-training-popup .tb-training-section .tb-training-video .tb-training-video-text .tb-training-video-desc {
                    font-size: 18px;
                }
                .tb-training-popup .tb-training-section .tb-training-video .tb-training-video-text .tb-training-video-comments {
                    margin: 4px 0 0 0;
                    font-size: 12px;
                    color: #646464;
                }





/* RESPONSIVE LAYOUT TEMPLATE - Copy this when adding media queries so we always stick to fixed widths */
@media (min-width: 0px) and (max-width: 320px) {
    /* layout-xs = 0 - 320px - iPhone 5 */
}

@media (min-width: 321px) and (max-width: 599px) {
    /* layout-xs = 321 - 599px - Most Phones */


    md-menu-content.tb-training-popup {
        width: 90%;
    }
        
        .tb-training-popup .tb-training-title {
            font-size: 12px;
        }
        .tb-training-popup .tb-training-section .tb-training-video img {
            width: 80px;
            max-height: 64px;
        }
        .tb-training-popup .tb-training-section .tb-training-video .tb-training-video-text .tb-training-video-desc {
            font-size: 16px;
        }

        .tb-training-popup .tb-training-section .tb-training-video .tb-training-video-text .tb-training-video-comments {
            margin: 2px 0 0 0;
            font-size: 12px;
        }

}

@media (min-width: 600px) and (max-width: 964px) {
    /* layout-sm = 600 - 959px - iPad Landscape */
}

@media (min-width: 965px) and (max-width: 1279px) {
    /* layout-?? = 1280 - 1440px - small resolutions */
}

@media (min-width: 1280px) and (max-width: 1440px) {
    /* layout-md = 960 - 1279px - iPad Portrait */
}

@media (min-width: 0) and (max-height: 599px) and (orientation: landscape) {
    /* 
        Small phones in landscape mode - VERY SMALL HEIGHT. Use this where the phone and tablet conflict.
        Tablet in portrait would have a small width, long height (and be covered above) 
        Phone in landscape would have a long width, small height and need further logic to fit - where this comes in. 
        Example in Dev tools: Samsung Galaxy S20 Ultra
    */

}