/* =============================================================================
    Team Data Sukan
    UI/UX: Shay Rahman
   ==========================================================================*/

@media only screen and (min-width: 1921px) {
    #sidebar-right {
        /* min-width: 80px !important; */
        width: 23% !important;
        /* margin-right: 20px; */
    }
    .ag-center-content {
        width: 100%;
        background-color: #8D8D8D;
    }
    .ag-wrp-text-banner1 h5 {
        font-size: 20px;
        line-height: 24px;
        width: 100%;
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .ag-wrp-text-banner1 p {
        text-overflow: ellipsis;
        overflow: hidden !important;
        width: 100% !important;
        font-size: var(--ag-font-12);
        display: -webkit-box;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical;
    }
    .ag-width-thumb-icon {
        width: 90px;
    }
    .ag-info-top-banner-stick {
        right: 18% !important;
    }
    .ag-display-none {
        display: flex !important;
    }
    .ag-card-btn-click4 {
        display: none !important;
    }
    .display-hide-lg {
        display: none !important;
    }
    .ag-video-wrp-feed {
        width: 560px !important;
        height: 240px !important;
    }
    .ag-wrp-video-auto {
        width: 560px !important;
        height: 240px !important;
    }
}

@media only screen and (max-width: 1920px) {
    #sidebar-right {
        /* min-width: 80px !important; */
        width: 23% !important;
        /* margin-right: 20px; */
    }
    .ag-center-content {
        width: 100%;
        background-color: #8D8D8D;
    }
    .ag-wrp-text-banner1 h5 {
        font-size: 20px;
        line-height: 24px;
        width: 100%;
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .ag-wrp-text-banner1 p {
        text-overflow: ellipsis;
        overflow: hidden !important;
        width: 100% !important;
        font-size: var(--ag-font-12);
        display: -webkit-box;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical;
    }
    .ag-width-thumb-icon {
        width: 90px;
    }
    .ag-info-top-banner-stick {
        right: 18% !important;
    }
    .ag-display-none {
        display: flex !important;
    }
    .ag-card-btn-click4 {
        display: none !important;
    }
    .display-hide-lg {
        display: none !important;
    }
    .ag-video-wrp-feed {
        width: 560px !important;
        height: 240px !important;
    }
    .ag-wrp-video-auto {
        width: 560px !important;
        height: 240px !important;
    }
}

@media only screen and (max-width: 1440px) {
    
    #sidebar-right {
        /* min-width: 200px !important; */
        width: 23% !important;
        /* margin-right: 20px; */
    }
    .ag-center-content {
        width: 100%;
        background-color: #8D8D8D;
    }
    .ag-info-top-banner-stick {
        right: 20% !important;
    }
    .ag-video-wrp-feed {
        width: 400px !important;
        height: 220px !important;
    }
    .ag-wrp-video-auto {
        width: 400px !important;
        height: 220px !important;
    }
}

@media only screen and (max-width: 1024px) {
    
    .search {
        display: none;
    }
    .right-icons li {
        margin: 0 10px;
    }
    .search-icon {
        display: block;
    }
    #sidebar-right {
        display: none !important;
    }
    .ag-center-content {
        width: calc(100% - 2px);
        background-color: #414141;
    }
    .ag-wrp-thumb-catagories {
        min-height: 130px !important;
    }
    .ag-wrp-banner-cont {
        top: 26% !important;
    }
    .ag-wrap-add {
        height: 200px !important;
    }
    .ag-wrp-banner2 {
        height: 200px !important;
        padding: 14px 36px 0 20px !important;
    }
    .ag-video-youtube {
        height: 200px;
        width: 100%;
    }
    .ag-wrp-text-banner1 h5,
    .ag-wrp-text-banner-para {
        -webkit-line-clamp: 1 !important;
    }
    .ag-bg-light-banner {
        height: 200px;
    }
    .ag-width-fuel-fix-btn {
        width: 100% !important;
    }
    .ag-bg-light-banner2 {
        height: 200px !important;
    }
    .me-lg-auto {
        margin-right: auto;
    }
    .ag-wrp-top-banner-stick {
        width: calc(100% - 70px) !important;
    }
    .ag-sticky-hdr-stats h1 {
        width: 80% !important;
    }
    .ag-info-top-banner-stick {
        right: 0% !important;
    }
    .ag-card-btn-click4 {
        display: none !important;
    }
    .ag-fixture-match-details-list {
        width: 100%;
    }
    .ag-video-wrp-feed {
        width: 400px !important;
        height: 180px !important;
    }
    .ag-wrp-video-auto {
        width: 400px !important;
        height: 180px !important;
    }
    .wrp-player-totw {
        width: 70px;
    }
    .ag-icon-club4 {
        margin-left: 10px;
    }
    .ag-player-team-info {
        margin-top: -25px;
    }
    .ag-menu-container2 {
        padding: 0 0 30px 10px;
    }
    nav form {
        max-width: 200px;
        width: 100%;
    }
    
}

@media (max-width: 1200px) {

    .display-hide { display: none !important; }

}

@media (min-width: 1200px) {
	.text-xl-0 {
		font-size: .7em !important;
	}

	.text-xl-1 {
		font-size: .8em !important;
	}

	.text-xl-2 {
		font-size: .9em !important;
	}

	.text-xl-2-3,
		.text-xl-2-5 {
		font-size: .95em !important;
	}

	.text-xl-3 {
		font-size: 1em !important;
	}

	.text-xl-3-4,
		.text-xl-3-5 {
		font-size: 1.1em !important;
	}

	.text-xl-4 {
		font-size: 1.2em !important;
	}

	.text-xl-4-5 {
		font-size: 1.35em !important;
	}

	.text-xl-5 {
		font-size: 1.50em !important;
	}

	.text-xl-5-6,
		.text-xl-5-5 {
		font-size: 1.65em !important;
	}

	.text-xl-6 {
		font-size: 1.80em !important;
	}

	.text-xl-6-7,
		.text-xl-6-5 {
		font-size: 1.9em !important;
	}

	.text-xl-7 {
		font-size: 2em !important;
	}

	.text-xl-8 {
		font-size: 2.30em !important;
	}

	.text-xl-9 {
		font-size: 2.50em !important;
	}

	.text-xl-10 {
		font-size: 2.75em !important;
	}

	.text-xl-11 {
		font-size: 3em !important;
	}

	.text-xl-12 {
		font-size: 3.5em !important;
	}

	.text-xl-12-13,
		.text-xl-12-5 {
		font-size: 3.75em !important;
	}

	.text-xl-13 {
		font-size: 4em !important;
	}

	.text-xl-14 {
		font-size: 4.5em !important;
	}

	.text-xl-15 {
		font-size: 5em !important;
	}

	.text-xl-16 {
		font-size: 5.33em !important;
	}

	.text-xl-17 {
		font-size: 5.66em !important;
	}

	.text-xl-18 {
		font-size: 6em !important;
	}

	.text-xl-19 {
		font-size: 6.33em !important;
	}

	.text-xl-20 {
		font-size: 6.66em !important;
	}
}

@media (min-width: 800px) {

	.text-lg-0 {
		font-size: .7em !important;
	}

	.text-lg-1 {
		font-size: .8em !important;
	}

	.text-lg-2 {
		font-size: .9em !important;
	}

	.text-lg-2-3,
		.text-lg-2-5 {
		font-size: .95em !important;
	}

	.text-lg-3 {
		font-size: 1em !important;
	}

	.text-lg-3-4,
		.text-lg-3-5 {
		font-size: 1.1em !important;
	}

	.text-lg-4 {
		font-size: 1.2em !important;
	}

	.text-lg-4-5 {
		font-size: 1.35em !important;
	}

	.text-lg-5 {
		font-size: 1.50em !important;
	}

	.text-lg-5-6,
		.text-lg-5-5 {
		font-size: 1.65em !important;
	}

	.text-lg-6 {
		font-size: 1.80em !important;
	}

	.text-lg-6-7,
		.text-lg-6-5 {
		font-size: 1.9em !important;
	}

	.text-lg-7 {
		font-size: 2em !important;
	}

	.text-lg-8 {
		font-size: 2.30em !important;
	}

	.text-lg-9 {
		font-size: 2.50em !important;
	}

	.text-lg-10 {
		font-size: 2.75em !important;
	}

	.text-lg-11 {
		font-size: 3em !important;
	}

	.text-lg-12 {
		font-size: 3.5em !important;
	}

	.text-lg-12-13,
		.text-lg-12-5 {
		font-size: 3.75em !important;
	}

	.text-lg-13 {
		font-size: 4em !important;
	}

	.text-lg-14 {
		font-size: 4.5em !important;
	}

	.text-lg-15 {
		font-size: 5em !important;
	}

	.text-lg-16 {
		font-size: 5.33em !important;
	}

	.text-lg-17 {
		font-size: 5.66em !important;
	}

	.text-lg-18 {
		font-size: 6em !important;
	}

	.text-lg-19 {
		font-size: 6.33em !important;
	}

	.text-lg-20 {
		font-size: 6.66em !important;
	}
}

@media only screen and (width: 768px) {

    .auth-display-hide {
        display: none !important;
    }

    #sidebg-login {
        max-width: 340px !important;
    }

    #content-login {
        width: calc(100% - 100px) !important;
        left: 230px !important;
    }

    .ag-wrp-team-banner {
        padding: 130px 10px 0 0;
    }

    .text-md-0 {
		font-size: .7em !important;
	}

	.text-md-1 {
		font-size: .8em !important;
	}

	.text-md-2 {
		font-size: .9em !important;
	}

	.text-md-2-3,
		.text-md-2-5 {
		font-size: .95em !important;
	}

	.text-md-3 {
		font-size: 1em !important;
	}

	.text-md-3-4,
		.text-md-3-5 {
		font-size: 1.1em !important;
	}

	.text-md-4 {
		font-size: 1.2em !important;
	}

	.text-md-4-5 {
		font-size: 1.35em !important;
	}

	.text-md-5 {
		font-size: 1.50em !important;
	}

	.text-md-5-6,
		.text-md-5-5 {
		font-size: 1.65em !important;
	}

	.text-md-6 {
		font-size: 1.80em !important;
	}

	.text-md-6-7,
		.text-md-6-5 {
		font-size: 1.9em !important;
	}

	.text-md-7 {
		font-size: 2em !important;
	}

	.text-md-8 {
		font-size: 2.30em !important;
	}

	.text-md-9 {
		font-size: 2.50em !important;
	}

	.text-md-10 {
		font-size: 2.75em !important;
	}

	.text-md-11 {
		font-size: 3em !important;
	}

	.text-md-12 {
		font-size: 3.5em !important;
	}

	.text-md-12-13,
		.text-md-12-5 {
		font-size: 3.75em !important;
	}

	.text-md-13 {
		font-size: 4em !important;
	}

	.text-md-14 {
		font-size: 4.5em !important;
	}

	.text-md-15 {
		font-size: 5em !important;
	}

	.text-md-16 {
		font-size: 5.33em !important;
	}

	.text-md-17 {
		font-size: 5.66em !important;
	}

	.text-md-18 {
		font-size: 6em !important;
	}

	.text-md-19 {
		font-size: 6.33em !important;
	}

	.text-md-20 {
		font-size: 6.66em !important;
	}
}

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

    .display-hide { display: none !important; }
    .display-hide-lg { display: block !important; }

    .item { padding: 10px 0px; }

    /* .ag-right-login-wrp { max-width: 83%; flex-basis: 83%; } */

    .ag-wrp-mode-login { padding: 0 0 64px 0; }
    .ag-login-signup-wrp { padding: 70px 20px 0 0; }

    .sidebar {
        top: 0;
        transform: translateX(-100%);
        z-index: 100;
        display: none;
    }
    #sidebar.hide { display: none; }
    #sidebar.hide+#content { width: 100%; left: 0px; }
    .sidebar .left-icons { display: flex; }
    #sidebar-right { display: none; }

    .ag-main-content { overflow-x: hidden !important; }
    .nav-top-mobile { display: none !important; }
    .ag-sticky-hdr-stats h1 { width: 100% !important; }
    .ag-wrp-thumb-catagories { min-height: 110px !important; }

    /*--min-height: 130px !important;-*/
    .ag-wrp-catagories-fix h1 {
        padding: 40px 0 0 40px;
    }
    .ag-wrp-catagories-fix img {
        margin: 0px 9px -56px 0 !important;
        width: 100px !important;
        height: 70px !important;
        bottom: 0px !important;
    }
    .ag-btn-fix2 {
        justify-content: right !important;
        margin-left: 26%;
    }
    .ag-width-fuel-fix-btn {
        width: 100% !important;
    }
    .ag-bg-light-banner {
        height: 230px !important;
        /* width: 230px !important; */
        width: 350px !important;
    }
    .ag-bg-light-banner2 {
        height: 230px !important;
        width: 230px !important;
    }
    .ag-wrp-banner-cont {
        top: 26% !important;
    }
    .carousel-control-prev,
    .carousel-control-next {
        width: 10% !important;
    }
    .me-lg-auto {
        margin-right: auto;
    }
    .ads2 h2 {
        display: none;
    }
    /*-- Pop-up - Modal --*/
    .ag-modal-fix-close-btn { right: 14px; }
    .ag-modal-team-ratio h2 {  text-align: center; }

    /*-- Ads2 background --*/
    .ag-ads2-bg { background-image: url("https://agilemas.my/dev/assets/img/ads/ads-fam-banner-mobile.jpg"); }

    /*-- Sub-form --*/
    .ag-fix-title-sub-form {
        min-width: 140px;
    }
    /*-- Banner Club --*/
    .ag-wrp-team-banner {  padding: 30px 20px; }
    .ag-wrp-team-banner2 { margin: 90px 0 0 -80px; }
    .ag-wrp-team-banner2 h1 { width: 180px !important; }
    
    /* .ag-team-text-more { display: none !important; } */

    .ag-logo-fix-team { margin-right: 0px; }
    .ag-display-none { display: none !important; }

    /*-- Banner Club Fixtures--*/
    .ag-banner-fixtures-details h1 { max-width: 220px; }
    .ag-box-fixtures-box {  position: absolute; margin-top: 110px; }
    .ag-fixture-box-datails { display: none !important; }
    .ag-fixture-box-datails a { padding: 0 10px 0 0; }

    /*--.ag-wrp-thumb-catagories5 { width: 270px;}--*/

    .ag-card-btn-click4 {
        width: 100% !important;
        padding: 6px 15px 7px 70px !important;
        color: var(--black) !important;
        font-size: var(--ag-font-12) !important;
        text-decoration: none;
        align-items: center !important;
        background: var(--fuel-color) !important;
        border-radius: 5px;
        font-weight: 600;
    }
    .ag-card-btn-click4 span { height: 16px; }

    .ag-card-btn-click5 {
        width: 100% !important;
        padding: 6px 10px;
        color: var(--black) !important;
        font-size: var(--ag-font-12) !important;
        text-decoration: none;
        align-items: center !important;
        background: var(--fuel-color) !important;
        border-radius: 5px;
        font-weight: 600;
    }
    .ag-card-btn-click5 span { height: 16px; }

    .bg-black-ag3 {
        background-color: var(--dark) !important;
        font-size: var(--ag-font-14) !important;
        vertical-align: middle !important;
        height: 15px;
        font-weight: 600 !important;
        padding: 0px 30px 0px 4px !important;
        margin: 0 0 0 10px;
        width: 40px !important;
    }

    .bg-black-ag3 .material-icons { font-size: var(--ag-font-12) !important; }
    /*-- Score n Video Fixtures--*/
    .ag-sub-title-fixture {
        max-width: 100px !important;
    }
    .ag-sub-title-fixture2 {
        width: 180px !important;
    }
    .ag-box-fixtures-box2 {
        position: absolute;
        left: 14px;
        top: 348px;
    }
    .ag-wrp-thumb-catagories8 {
        width: 300px;
    }
    .btn-fixture-details {
        width: 100% !important;
    }
    .ag-wrp-video-auto {
        width: 308px !important;
        height: 176px !important;
    }
    .ag-fixture-match-home-details span,
    .ag-fixture-match-away-details span {
        display: none !important;
    }
    .ag-fixture-match-home-details {
        padding-left: 12px !important;
    }
    .ag-fixture-match-away-details {
        padding-right: 12px !important;
    }
    .ag-video-wrp-feed {
        height: 176px !important;
        margin-top: 0;
    }
    .ag-wrp-fixture-match-1 {
        max-width: 310px !important;
        width: 310px;
    }
    .ag-fixture-match-details-list {
        width: 100%;
    }
    .ag-fix-score-home,
    .ag-fix-score-away {
        padding: 10px !important;
        display: block;
    }
    .ag-fix-score-home h3 {
        text-align: left !important;
        -webkit-line-clamp: 2 !important;
    }
    .ag-fix-score-away h3 {
        text-align: right !important;
    }
    .ag-fix-score-home a {
        justify-content: flex-start !important;
    }
    .ag-fix-score-away a {
        justify-content: flex-end !important;
    }
    .ag-table-fix-mobile {
        margin: 0;
    }
    /*-- Profile--*/
    .ag-profile-picture-wrp {
        width: 308px !important;
        height: 100%;
        overflow: hidden;
        background-color: grey;
        background-size: cover !important;
    }
    .ag-width-thumb-icon10 img {
        height: 100px !important;
        margin-top: 26px;
    }
    .ag-profile-agilemas {
        margin: 20px 0 2px 0;
    }
    .ag-profile-picture-wrp2 {
        width: 310px;
    }
    .ag-profile-picture-wrp2 img {
        width: 155px;
        height: 200px;
        margin: 0 57px;
        padding: 0;
    }
    .ag-icon10 {
        left: 270px;
    }
    .ag-icon9 {
        left: 0;
    }
    .ag-profile-info2 {
        width: 192px;
    }
    .bg-profile-jhj,
    .bg-profile-selfc {
        width: 320px;
    }
    .ag-coach-week {
        font-size: var(--ag-font-14);
        color: var(--light);
        min-width: 120px;
    }
    .mobile-width-100 {
        width: 100%;
    }
    .ag-text-view-all {
        padding-right: 0;
    }
    .ag-filter-sub2 {
        margin: 0 10px;
    }
    /*-- Team of the week fix--*/
    .wrp-player-totw {
        width: 58px;
        margin: 0 2px;
    }
    .ag-box-field-wrp {
        height: 560px !important;
        width: 310px;
    }
    .mobile-pd-top-player {
        padding-top: 30px;
    }
    .ag-player-team-info {
        padding-top: 120px;
    }
    .ag-icon-club4 {
        margin-left: -2px;
    }
    /*-- Profile Player Display--*/
    .wrp-fix-matches {
        padding-left: 12px !important;
    }
    .wrp-fix-matches h1 {
        padding: 10px 0 6px 0;
    }
    .btn-fixture-details2 {
        width: 100%;
        margin-top: 20px;
    }
    .btn-fixture-details3 {
        width: 100%;
        margin-top: 20px;
    }
    .ag-stats-filter-user {
        padding: 20px 0;
    }
    .ag-profile-club-mobile {
        padding: 0;
    }
    .ag-football-field {
        width: 280px;
    }
    .ag-form-flex-fix1 {
        flex-direction: column;
    }
    /*-- Suunto--*/
    #timer3 {
        width: 100%;
        border: 1px solid var(--dark-grey2);
        padding: 10px;
        margin: 10px 0 0 0;
    }
    .w-btn-fix1 {
        width: 100% !important;
    }
    .ag-menu-container {
        padding: 50px 20px;
    }
    .ag-profile-info4 h1 {
        font-size: var(--ag-font-18);
        max-width: 200px;
    }
    .wrp-scroll-edit {
        overflow-y: auto !important;
        padding-top: 30px;
        padding-bottom: 100px;
    }
    .ag-menu-container2 {
        padding: 30px 0 30px 20px;
    }
    .side-menu-setting {
        float: none !important;
        width: 100%;
    }
    .side-menu-setting li {
        text-align: center;
    }
    .side-menu-setting li a {
        text-align: center;
    }
    /*-- News--*/
    .ag-title-main5 h1 {
        font-size: var(--ag-font-18);
        max-height: 72px !important;
    }
    .wrp-news-media-post {
        margin: 0;
    }
    .ag-twitter-tweet {
        max-width: 300px !important
    }
    .ag-instagram-feed iframe {
        min-width: 298px !important;
    }
    .ag-wrp-tag-badge4 a {
        height: 30px !important;
    }
    .ag-wrp-tag-badge3 a {
        margin: 0 0 4px 0;
    }
    #content-login {
        position: fixed;
        width: calc(100%);
        left: 0;
        transition: all 0.3s ease;
    }

    .agilemas-version {
        display: none !important;
    }

    .text-title-header-mobile { max-width: 180px; }

    .text-sm-0 { font-size: .7em !important; }
	.text-sm-1 { font-size: .8em !important; }
	.text-sm-2 { font-size: .9em !important; }

	.text-sm-2-3,
	.text-sm-2-5 {
	font-size: .95em !important;
	}

	.text-sm-3 { font-size: 1em !important; }
	.text-sm-3-4,
	.text-sm-3-5 {
	font-size: 1.1em !important;
	}

	.text-sm-4 { font-size: 1.2em !important; }
	.text-sm-4-5 { font-size: 1.35em !important; }

	.text-sm-5 { font-size: 1.50em !important; }

	.text-sm-5-6,
	.text-sm-5-5 {
	font-size: 1.65em !important;
	}

	.text-sm-6 { font-size: 1.80em !important; }

	.text-sm-6-7,
		.text-sm-6-5 {
		font-size: 1.9em !important;
	}

	.text-sm-7 {
		font-size: 2em !important;
	}

	.text-sm-8 {
		font-size: 2.30em !important;
	}

	.text-sm-9 {
		font-size: 2.50em !important;
	}

	.text-sm-10 {
		font-size: 2.75em !important;
	}

	.text-sm-11 {
		font-size: 3em !important;
	}

	.text-sm-12 {
		font-size: 3.5em !important;
	}

	.text-sm-12-13,
		.text-sm-12-5 {
		font-size: 3.75em !important;
	}

	.text-sm-13 {
		font-size: 4em !important;
	}

	.text-sm-14 {
		font-size: 4.5em !important;
	}

	.text-sm-15 {
		font-size: 5em !important;
	}

	.text-sm-16 {
		font-size: 5.33em !important;
	}

	.text-sm-17 {
		font-size: 5.66em !important;
	}

	.text-sm-18 {
		font-size: 6em !important;
	}

	.text-sm-19 {
		font-size: 6.33em !important;
	}

	.text-sm-20 {
		font-size: 6.66em !important;
	}

}