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


/* ---- Google Font  ---- */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);
@import url(https://fonts.googleapis.com/css?family=Nunito:400,600,700);
@import url(https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,800;0,900;1,800&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap);
* {
    font-family: 'Lexend', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

p {
    font-family: 'Roboto', sans-serif;
}

:root {
    --light: #fff;
    --dark: #121212;
    --black: #000;
    --black2: #000;
    --white: #ffffff;
    --grey: #f1f0f6;
    --dark-grey: #8d8d8d;
    --dark-grey2: #262626;
    --dark-grey3: #181818;
    --black: #000;
    --green: #006e39;
    --green2: #77c22e;
    --light-green: #e3ffcb;
    --light-green2: #e0fc3f;
    --light-blue: #d0e4ff;
    --dark-blue: #0c5fcd;
    --dark-blue2: #4989c8;
    --dark-blue3: #094983;
    --red: #fc3b56;
    --red2: #e80018;
    --red3: #8b081d;
    --pink: #fc038f;
    --pink2: #f40028;
    --purple: #5c18eb;
    --orange: #fd8e00;
    --orange2: #fd7a00;
    --yellow: #fed508;
    --yellow2: #feb008;
    --fuel-color: #ffff00;
    --fuel-color-over: #ffc400;

    --primary: #fed508;
	--secondary: #121212;
	--tertiary: #262626;
	--quaternary: #ffc400;
    
    
    /* ---- Font & typography  ---- */
    --ag-font-10: 10px;
    --ag-font-12: 12px;
    --ag-font-14: 14px;
    --ag-font-18: 18px;
    --ag-font-20: 20px;
    --ag-font-24: 24px;
    --ag-font-28: 28px;
}

html {
    overflow-x: hidden;
}

body {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}


/* Scroll page */


/* width */

::-webkit-scrollbar {
    width: 8px;
}


/* Track */

::-webkit-scrollbar-track {
    background: var(--dark);
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: var(--dark-grey3);
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover { background: var(--dark-grey); }

body.dark {
    --light: #0c0c1e;
    --grey: #060714;
    --white: #ffffff;
    --black: #535353;
    --black2: #000;
    --dark: #ffffff;
    --dark-grey2: #dddddd;
    --dark-grey3: #bdbdbd;
    --light-green2: #535353;
    --dark-blue: #535353;
}

a { text-decoration: none; }
li { list-style: none; }

.clear { clear: both !important; width: 100%; }


/* ---- Font & typography  ---- */

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

.ag-font-12 {
    font-size: 12px !important;
}

.ag-font-14 {
    font-size: 14px !important;
}

.ag-font-16 {
    font-size: 16px !important;
}

.ag-font-18 {
    font-size: 18px !important;
}

.ag-font-20 {
    font-size: 20px !important;
}

.ag-font-24 {
    font-size: var(--ag-font-24) !important;
}

.ag-font-28 {
    font-size: 28px !important;
}


.ag-border-1 { border: 1px solid;}

.ag-border-color1 { border-color: var(--dark-grey2)}


/* =============================================================================
Form Input Fix
========================================================================== */

.btn-upgrade {
    font-size: 12px !important;
    display: flex;
    justify-content: center;
    text-decoration: none;
    align-items: center;
    padding: 12px 0;
    color: var(--white) !important;
    background: var(--orange) !important;
    transition: all .3s ease;
    border-radius: 5px;
    font-weight: 600;
    margin-bottom: 12px;
}

.btn-upgrade2 {
    font-size: 12px !important;
    display: flex;
    justify-content: center;
    text-decoration: none;
    align-items: center;
    padding: 12px 0;
    color: var(--white) !important;
    background: var(--orange) !important;
    transition: all .3s ease;
    border-radius: 5px;
    font-weight: 600;
}

.btn-upgrade:hover,
.btn-upgrade2:hover {
    background: var(--orange2) !important;
    transition: all .5s ease;
}

.btn-details {
    font-size: 12px !important;
    display: flex;
    justify-content: center;
    align-self: center;
    text-decoration: none;
    align-items: center;
    padding: 12px 0;
    color: var(--light) !important;
    background: var(--dark-grey3) !important;
    transition: all .3s ease;
    border-radius: 5px;
    font-weight: 600;
    margin-bottom: 12px;
}

.btn-details2 {
    font-size: 12px !important;
    display: flex;
    justify-content: center;
    text-decoration: none;
    padding: 12px 0;
    color: var(--light) !important;
    background: var(--dark-grey3) !important;
    transition: all .3s ease;
    border-radius: 5px;
    font-weight: 600;
}

.btn-details3 {
    font-size: 12px !important;
    display: block;
    justify-content: center;
    align-items: center !important;
    text-decoration: none;
    align-items: center;
    color: var(--light) !important;
    background: var(--dark-grey3) !important;
    transition: all .3s ease;
    border: 1px solid var(--dark-grey2) !important;
    border-radius: 5px;
    font-weight: 600;
    height: 32px;
}

.btn-details:hover,
.btn-details2:hover,
.btn-details3:hover {
    background: var(--dark-grey) !important;
    transition: all .5s ease;
}

.btn-fuel-details {
    font-size: 12px !important;
    display: flex;
    text-decoration: none;
    align-items: center;
    padding: 12px 0;
    color: var(--black) !important;
    background: var(--fuel-color) !important;
    transition: all .3s ease;
    border-radius: 5px;
    font-weight: bold !important;
    margin-bottom: 12px;
}

.ag-wrp-btn-fuel {
    display: block;
    width: 40px;
}

.ag-wrp-btn-fuel .material-icons {
    font-size: 8px !important;
    vertical-align: middle !important;
}

.btn-fuel-details:hover {
    background: var(--fuel-color-over) !important;
    transition: all .5s ease;
}

.w-btn-fix1 {
    width: 120px;
}


/* =============================================================================
Global styles
========================================================================== */

::selection {
    background: #ed5900;
    color: #ffffff;
}

::-moz-selection {
    background: #ed5900;
    color: #ffffff;
}

::-webkit-selection {
    background: #ed5900;
    color: #ffffff;
}

.switch-mode {
    display: block;
    min-width: 40px;
    margin-left: 10px;
    height: 25px;
    border-radius: 25px;
    background: var(--dark-grey);
    cursor: pointer;
    position: relative;
}

.switch-mode::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    width: calc(25px - 4px);
    background: var(--orange);
    border-radius: 50%;
    transition: all 0.3s ease;
}

#switch-mode:checked+.switch-mode::before {
    left: calc(100% - (25px - 4px) - 2px);
}


/* =============================================================================
Icon - Logo Bg
========================================================================== */

.dot-live {
    height: 10px;
    width: 10px;
    margin-right: 5px;
    background-color: var(--red2);
    border-radius: 50%;
    display: inline-block;
    animation: fadeOut ease 1s infinite;
    -webkit-animation: fadeOut ease 1s infinite;
    -moz-animation: fadeOut ease 1s infinite;
    -o-animation: fadeOut ease 1s infinite;
    -ms-animation: fadeOut ease 1s infinite;
}

.dot-heart {
    margin-right: 5px;
    color: var(--red) !important;
    /* background-color: var(--red2); */
    border-radius: 50%;
    display: inline-block;
    animation: fadeOut ease 1s infinite;
    -webkit-animation: fadeOut ease 1s infinite;
    -moz-animation: fadeOut ease 1s infinite;
    -o-animation: fadeOut ease 1s infinite;
    -ms-animation: fadeOut ease 1s infinite;
}


/*-- Icon BG Colour --*/

.bg-yellow { background-color: var(--yellow) !important; }
.bg-yellow2 { background-color: var(--yellow2) !important; }
.bg-fuel { background-color: var(--fuel-color); }
.bg-orange { background-color: var(--orange) !important; }

.bg-white { background-color: var(--light); }
.bg-black { background-color: var(--black); }

/*-- BG Color Change Dark Mood --*/
.bg-grey { background-color: var(--black2) !important; }

.bg-grey2-1 { background-color: var(--dark-grey2) !important }
.bg-grey2 { background-color: var(--dark-grey) !important }
.bg-grey3 { background-color: var(--dark-grey3) !important; }

.bg-red2 { background-color: var(--red2) !important; }
.bg-red3 { background-color: var(--red3); }
.bg-pink { background-color: var(--pink); }
.bg-pink2 { background-color: var(--pink2); }
.bg-green { background-color: var(--green) !important; }
.bg-green2 { background-color: var(--green2) !important; }
.bg-dblue { background-color: var(--dark-blue) !important; }
.bg-dblue2 { background-color: var(--dark-blue2) !important; }
.bg-dblue3 { background-color: var(--dark-blue3) !important; }
.bg-purple { background-color: var(--purple) !important; }


/*-- Text Colour --*/

.ag-text-black {
    color: var(--black) !important;
}

.ag-text-white {
    color: var(--white) !important;
}

.ag-text-white2 {
    color: var(--light) !important;
}

.ag-text-grey {
    color: var(--dark-grey) !important;
}

.ag-text-green {
    color: var(--light-green2) !important;
}

.ag-text-green2 {
    color: var(--green) !important;
}

.ag-text-red {
    color: var(--red) !important;
}

.ag-text-pink {
    color: var(--pink) !important;
}

.ag-text-orange {
    color: var(--orange) !important;
}

.ag-text-blue {
    color: var(--dark-blue) !important;
}

.ag-text-yellow {
    color: var(--yellow) !important;
}


/*-- BG Gradient Colour --*/

.bg-gradient-red2 {
    background: rgb(225, 0, 0);
    background: linear-gradient( 0deg, rgba(225, 0, 0, 1) 0%, rgba(225, 0, 0, 0) 50%);
}

.bg-gradient-green {
    background: rgb(16, 110, 57);
    background: linear-gradient( 0deg, rgba(16, 110, 57, 1) 0%, rgba(16, 110, 57, 0) 50%);
}

.bg-gradient-yellow {
    background: rgb(255, 216, 0);
    background: linear-gradient( 0deg, rgba(255, 216, 0, 1) 0%, rgba(255, 216, 0, 0) 50%);
}

.bg-black-ag {
    background-color: var(--black2);
    font-size: var(--ag-font-12) !important;
    vertical-align: middle !important;
    height: 15px;
    font-weight: 600 !important;
    padding: 0px 2px !important;
    margin: 0 0 0 2px;
}

.bg-black-ag .material-icons {
    font-size: var(--ag-font-12) !important;
}


/*-- Icon Wrap --*/

.ag-icon {
    min-width: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
    color: var(--light);
    border: 1px solid var(--dark-grey3);
    border-radius: 20px;
    width: 23px !important;
    padding: 5px !important;
    height: 28px;
    font-size: 16px !important;
    background: rgba(0, 0, 0, 0.24) !important;
}

.ag-icon2 {
    min-width: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--light);
    border: 1px solid var(--dark-grey3);
    border-radius: 20px;
    width: 23px !important;
    padding: 5px !important;
    height: 28px;
    font-size: 16px !important;
    background: rgba(0, 0, 0, 0.24) !important;
    text-decoration: none !important;
}

.ag-icon3 {
    min-width: 28px;
    display: flex;
    position: absolute;
    z-index: 3;
    right: 0;
    margin: 10px 10px 0 0;
    justify-content: center;
    align-items: center;
    color: var(--white);
    border: 1px solid var(--dark-grey3);
    border-radius: 20px;
    width: 23px !important;
    padding: 5px !important;
    height: 28px;
    font-size: 16px !important;
    background: rgba(0, 0, 0, 0.24) !important;
}

.ag-icon-badge {
    min-width: 28px;
    position: absolute;
    z-index: 3;
    right: 0;
    margin: 10px 10px 0 0;
    justify-content: center;
    align-items: center;
    width: 23px !important;
    padding: 5px !important;
    font-size: 16px !important;
}

.ag-icon3:hover,
.ag-icon3.active,
.ag-icon2:hover,
.ag-icon2.active,
.ag-icon5:hover {
    color: var(--orange) !important;
    transition: all .3s ease;
}

.ag-icon4 {
    min-width: 28px;
    display: flex;
    position: absolute;
    z-index: 3;
    margin: 14px 0 0 3px;
    color: var(--white);
    border: 1px solid var(--dark-grey3);
    border-radius: 20px;
    width: 23px !important;
    padding: 5px !important;
    height: 28px;
    font-size: 16px !important;
    background: rgba(0, 0, 0, 0.24) !important;
}

.ag-icon4:hover,
.ag-icon4.active {
    color: var(--orange) !important;
    transition: all .3s ease;
}

.ag-icon6 {
    min-width: 28px;
    display: flex;
    color: var(--white);
    border: 1px solid var(--dark-grey3);
    border-radius: 20px;
    width: 23px !important;
    padding: 5px !important;
    height: 28px;
    font-size: 16px !important;
    background: rgba(0, 0, 0, 0.24) !important;
}

.ag-icon6:hover,
.ag-icon6.active,
.ag-icon10:hover,
.ag-icon9:hover {
    color: var(--orange) !important;
    transition: all .3s ease;
}

.ag-icon9 {
    min-width: 28px;
    position: absolute;
    left: 12px;
    margin: 10px 10px 0 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white) !important;
    border: 1px solid var(--dark-grey3);
    border-radius: 20px;
    width: 23px !important;
    padding: 5px !important;
    height: 28px;
    font-size: 16px !important;
    background: rgba(0, 0, 0, 0.24) !important;
    text-decoration: none !important;
}

.ag-icon10 {
    min-width: 28px;
    position: absolute;
    left: 182px;
    margin: 10px 10px 0 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: right;
    color: var(--white) !important;
    border: 1px solid var(--dark-grey3);
    border-radius: 20px;
    width: 23px !important;
    padding: 5px !important;
    height: 28px;
    font-size: 16px !important;
    background: rgba(0, 0, 0, 0.24) !important;
    text-decoration: none !important;
}

.ag-icon12 {
    min-width: 28px;
    position: absolute;
    left: 40%;
    top: 30%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: right;
    color: var(--white) !important;
    font-size: 50px !important;
    text-decoration: none !important;
}

.ag-icon-event-card {
    position: absolute;
    z-index: 3;
    margin: 12px 0 0 50px;
    color: var(--white);
    font-size: var(--ag-font-14);
    text-shadow: 2px 2px 2px var(--dark2) !important;
}

.ag-top-fan2 {
    font-size: var(--ag-font-12);
    color: var(--light) !important;
}

.ag-icon-club {
    width: 42px;
    height: 42px;
    border-radius: 20px;
    display: block;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px;
    border: 1px solid var(--dark-grey);
}

.ag-icon-club-30 {
    width: 28px !important;
}

.ag-icon-club-40 {
    width: 40px !important;
}

.ag-icon-club-42 {
    width: 42px !important;
}

.ag-user-name-info {
    font-size: var(--ag-font-14);
    font-weight: bold;
    color: var(--orange);
    margin: 6px 0;
    display: block;
    overflow: hidden;
    width: 220px;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1 !important;
}

.ag-dropdown-fix {
    font-size: var(--ag-font-14) !important;
    display: flex !important;
    align-items: center !important;
    color: var(--light) !important;
}

.ag-dropdown-fix:hover,
.ag-dropdown-fix:hover span {
    color: var(--orange) !important;
    background-color: var(--dark-grey2) !important;
    -webkit-transition: opacity .5s .25s ease-out;
    transition: opacity .5s .25s ease-out;
    transition: all .3s ease;
}

.ag-dropdown-fix.active {
    color: var(--light) !important;
    background-color: var(--orange) !important;
    -webkit-transition: opacity .5s .25s ease-out;
    transition: opacity .5s .25s ease-out;
    transition: all .3s ease;
}


.ag-list-drop-fix a {
    text-decoration: none !important;
    width: 400px;
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--dark-grey3);
}

.ag-list-drop-fix a:hover {
    background-color: var(--dark-grey2) !important;
    -webkit-transition: opacity .5s .25s ease-out;
    transition: opacity .5s .25s ease-out;
    transition: all .3s ease;
    color: var(--orange) !important;
}


/*-- Divider Menu --*/

.dropdown-divider {
    border-top: 1px solid var(--light) !important;
}

.divider {
    margin: 14px 0 0 20px;
    font-size: 12px;
    font-weight: 700;
    color: var(--light) !important;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.divider2 {
    padding: 12px 0 !important;
    display: flow-root;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 700;
    color: var(--light) !important;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-align: center;
}

.divider2:hover {
    background-color: var(--dark-grey2) !important;
    transition: all 0.3s ease;
}

.divider3 {
    margin: 14px 0;
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    color: var(--dark-grey) !important;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.divider4 {
    margin: 8px 0;
    width: 100%;
    color: var(--dark-grey) !important;
}


/* =============================================================================
Form Component
========================================================================== */

.form-select.form-select-fix1 {
    border: 1px solid var(--black) !important;
    background-color: var(--dark-grey3) !important;
    color: var(--light) !important;
    font-size: var(--ag-font-14);
}

.form-control.ag-form-fix-input {
    border: 1px solid var(--black) !important;
    background-color: var(--dark-grey3) !important;
    color: var(--light) !important;
    font-size: var(--ag-font-14);
}

.ag-form-fix-input input [type="file"] {
    background-color: var(--dark-grey2) !important;
    color: var(--light) !important;
}

.form-control.ag-form-fix-input input {
    border: 1px solid var(--black) !important;
    background-color: var(--dark-grey3) !important;
    color: var(--light) !important;
    font-size: var(--ag-font-14);
}


/* .form-control.ag-form-fix-input-dash {
    border: 1px solid var(--black) !important;
    background-color: var(--dark-grey3) !important;
    color: var(--light) !important;
    font-size: var(--ag-font-14);
} */

.form-control.ag-form-fix-input-dash{
    border: 1px solid var(--black) !important;
    background-color: var(--dark-grey3) !important;
    color: var(--light) !important;
    font-size: var(--ag-font-14) !important;
}

.form-control.ag-form-fix-input-dash .filter-option {
    /* border: 1px solid var(--black) !important; */
    background-color: var(--dark-grey3) !important;
    color: var(--light) !important;
    font-size: var(--ag-font-14) !important;
}

.form-control.ag-form-fix-input-dash .filter-option2 {
    /* border: 1px solid var(--black) !important; */
    /* background-color: var(--dark-grey3) !important; */
    color: var(--light) !important;
    font-size: var(--ag-font-14) !important;
}
.form-control.ag-form-fix-input-dash .filter-option2:hover { color: var(--orange) !important;}

.form-label.ag-form-label-fix {
    color: var(--light);
    font-size: var(--ag-font-14);
}

.form-label.ag-form-label-fix2 {
    color: var(--dark-grey);
    font-size: var(--ag-font-12);
    padding: 8px 0 0 0px;
}

.form-control.form-contfix1 {
    background-color: var(--dark-grey2) !important;
}


/* =============================================================================
Sidebar
========================================================================== */

.logoFix {
    width: 40px;
    padding-left: 12px;
}

.isnlogoFix {
    max-width: 80px;
    width: 100%;
    padding-left: 12px;
}

.dsclogoFix {
    max-width: 160px;
    width: 100%;
    padding-left: 12px;
}


/*-- Sidebar Right--*/

#sidebar-right {
    position: fixed;
    /* max-width: 300px; */
    width: 10%;
    /* background: var(--dark-grey2); */
    color: var(--light);
    top: 50%;
    right: 0;
    /* height: 100%; */
    overflow-y: auto;
    scrollbar-width: none;
    transition: all 0.3s ease;
    z-index: 10;
    /* padding: 30px; */
    padding: 10px 10px 10px 10px;
    /*Add this*/
}

.ag-new-event-side {
    height: 30px;
}

.ag-new-event-side h1 {
    font-size: var(--ag-font-14);
    align-items: center !important;
    padding: 5px 0 0 0;
}

.ag-new-event-side a {
    display: flex;
    text-decoration: none;
}

.ag-new-event-side a:hover span {
    color: var(--orange) !important;
}

.ag-wrp-thumb-catagories3 {
    min-width: 230px !important;
}

.ag-wrp-thumb-catagories3:hover {
    transform: scale(1.05);
    transition: all 0.7s ease;
}

.ag-wrp-thumb-catagories4 {
    width: 100%;
    height: 200px !important;
}


/*-- Sidebar --*/

#sidebar {
    position: fixed;
    max-width: 240px;
    width: 100%;
    background: var(--dark-grey2);
    top: 0;
    left: 0;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    transition: all 0.3s ease;
    z-index: 200;
}

#sidebar.hide {
    max-width: 60px;
}

#sidebar.hide:hover {
    max-width: 240px;
}

#sidebar::-webkit-scrollbar {
    display: none;
}

#sidebar .brand {
    font-size: 20px;
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 64px;
    font-weight: 700;
    color: var(--white);
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
    /*background: var(--black);*/
    background-color: rgba(26, 26, 26, 0.816);
    transition: all 0.3s ease;
    padding: 0 6px;
    /*border-bottom: 1px solid var(--dark-grey);*/
}

#sidebar .text-wrp-brand {
    display: block;
    padding: 0 0 0 15px;
}

#sidebar .icon-right {
    margin-left: auto;
    transition: all 0.3s ease;
}

#sidebar .side-menu {
    padding: 0;
    transition: all 0.3s ease;
}

#sidebar.hide .side-menu {
    padding: 0;
}

#sidebar.hide:hover .side-menu {
    padding: 0;
}

#sidebar .side-menu a {
    display: flex;
    align-items: center;
    font-size: var(--ag-font-14);
    color: var(--light);
    padding: 12px 16px 9px 17px;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-decoration: none;
}

#sidebar .side-menu>li>a:hover,
#sidebar .side-menu>li>span {
    background: var(--dark-grey3);
    color: var(--orange) !important;
    transition: all 0.3s ease;
}

#sidebar .side-menu>li>a:hover>span {
    color: var(--orange) !important;
}

#sidebar .side-menu>li>a.active .icon-right {
    transform: rotateZ(90deg);
}

#sidebar .side-menu>li>a.active,
#sidebar .side-menu>li>a.active span,
#sidebar .side-menu>li>a.active:hover {
    background: var(--dark-grey3);
    color: var(--orange) !important;
    /* color: var(--orange); */
    text-decoration: none;
}

#sidebar.hide:hover .divider {
    text-align: left;
}

#sidebar.hide .divider {
    text-align: center;
    margin: 10px;
}

#sidebar .side-dropdown {
    padding-left: 20px;
    max-height: 0;
    overflow-y: hidden;
    transition: all 0.15s ease;
}

#sidebar .side-dropdown.show {
    max-height: 1000px;
}

#sidebar .side-dropdown a:hover,
#sidebar .side-dropdown a.active {
    color: var(--orange);
}

#sidebar .ads {
    width: 100%;
    padding: 20px;
}

#sidebar.hide .ads {
    display: none;
}

#sidebar.hide:hover .ads {
    display: block;
    width: 200px;
    transition: all 0.3s ease;
}

#sidebar .ads .wrapper {
    background: var(--dark-grey3);
    padding: 80px 10px 0px 10px;
    border: 1px solid var(--dark-grey3);
    border-radius: 10px;
    width: 200px;
    transition: all 0.3s ease;
}

#sidebar .ads .wrapper p {
    font-size: 10px;
    color: var(--white);
    text-align: center;
}

#sidebar .ads .ag-ads-bg-wrap {
    background-image: url("../img/ads/agilemas-comm.jpg");
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

#sidebar .ads .wrapper p span {
    font-weight: 700;
}

#sidebar .copyrights {
    width: 100%;
    padding: 20px;
    position: relative;
    bottom: 0;
}

#sidebar .copyrights p {
    font-size: 10px;
    color: var(--dark-grey);
    text-align: center;
}

#sidebar.hide .copyrights {
    display: none;
}


/* Sidebar End */


/* =============================================================================
Content Centre
========================================================================== */

#content {
    position: fixed;
    width: calc(100% - 238px);
    left: 238px;
    transition: all 0.3s ease;
}

#sidebar.hide+#content {
    width: calc(100% - 60px);
    left: 60px;
}


/* Main Start */

main {
    width: 100%;
    background-color: var(--dark);
    padding: 0px 20px 20px 20px;
}

.ag-main-content {
    height: 100vh;
    width: 100% !important;
    position: relative;
    z-index: -100;
    background-color: var(--dark);
    overflow-y: scroll;
}

.ag-center-content {
    width: calc(100% - 184px);
    background-color: var(--dark) !important;
}


/* Sub-page */

.ag-title-sub {
    padding: 20px 0 10px 0;
    align-items: center;
    border-bottom: 1px solid var(--dark-grey2);
}


/* --20px 16px 10px 0;--*/

.ag-title-sub h1 {
    font-size: var(--ag-font-28);
    color: var(--light);
    padding: 8px 0 0 0;
}

.ag-title-sub h3 {
    font-size: var(--ag-font-12);
    margin: 0;
}

.ag-fix-title-sub-form {
    min-width: 260px;
    border: 1px solid var(--dark-grey) !important;
    color: var(--light) !important;
    margin: 0 14px !important;
    outline: none;
    align-items: center !important;
}

.ag-filter-sub {
    align-items: center !important;
}

.ag-filter-sub2 {
    align-items: center !important;
    margin: 0 10px 0 10px;
}

.ag-filter-sub2:hover,
.ag-filter-sub3:hover {
    background-color: var(--dark-grey2);
    border-radius: 20px;
}

.ag-filter-sub3 {
    align-items: center !important;
    margin: 0 10px 0 10px;
    position: absolute;
    right: 260px;
    z-index: 1;
    font-size: var(--ag-font-14);
    text-decoration: none;
    color: var(--light);
}


/* =============================================================================
Navbar
========================================================================== */


/* Navbar Start */

nav {
    color: var(--white) !important;
    height: 64px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    grid-gap: 10px;
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    /*border-bottom: 1px solid var(--dark-grey) !important;*/
}

nav .toggle-sidebar {
    font-size: 18px;
    cursor: pointer;
}

nav form {
    max-width: 400px;
    width: 100%;
}

nav .form-group {
    position: relative;
}

nav .form-group input {
    width: 100%;
    background: var(--dark-grey2);
    border: 1px var(--dark-grey2);
    color: var(--white) !important;
    border-radius: 30px;
    outline: none;
    padding: 10px 36px 10px 16px;
    transition: all 0.3s ease;
}

nav .form-group input:focus {
    box-shadow: 0 0 0 1px var(--dark-grey), 0 0 0 4px var(--dark-grey);
}

nav .form-group .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 16px;
    color: var(--white);
}

nav .nav-link {
    position: relative;
}

nav .nav-link .icon {
    font-size: 18px;
    color: var(--dark);
}

nav .nav-link .badge {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--light);
    background: var(--red);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
}

nav .profile {
    position: relative;
}

nav .profile img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
}

nav .profile .profile-link {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: var(--light);
    padding: 10px 0;
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    width: 160px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

nav .profile .profile-link.show {
    opacity: 1;
    pointer-events: visible;
    top: 100%;
}

nav .profile .profile-link a {
    padding: 10px 16px;
    display: flex;
    grid-gap: 10px;
    font-size: 14px;
    color: var(--dark);
    align-items: center;
    transition: all 0.3s ease;
}

nav .profile .profile-link a:hover {
    background: var(--grey);
    transition: all 0.3s ease;
}

.divider1 {
    color: var(--white) !important;
    height: 30px;
    border: 1px solid var(--dark-grey) !important;
}


/* Dropdown / Notifications  */

.ag-fix-drop {width: 260px !important; }
.ag-fix-drop li a span { color: var(--light) !important;}

.dropdown-menu-dark {
    background-color: var(--dark) !important;
    color: var(--light) !important;
}

.ag-notification-text {
    font-size: 10px !important;
    text-align: right;
    color: var(--dark-grey);
}

.ag-notification-wrp {
    min-width: 400px !important;
    font-size: var(--ag-font-14) !important;
}

.ag-notification-wrp2 {
    min-width: 260px !important;
    font-size: var(--ag-font-14) !important;
}

.ag-badge-fix {
    font-size: 12px !important;
    padding: 4px 4px !important;
    position: absolute !important;
    left: -10px !important;
}

.ag-btn-fix {
    border-radius: 80px !important;
    color: var(--white) !important;
    text-decoration: none !important;
    border: 1px solid var(--dark-grey3) !important;
}

.ag-btn-fix:hover {
    background-color: var(--dark-grey2) !important;
    -webkit-transition: opacity 0.5s 0.25s ease-out;
    transition: opacity 0.5s 0.25s ease-out;
    transition: all 0.3s ease;
}

.ag-btn-fix span {
    font-size: var(--ag-font-20);
    width: 20px;
    height: 30px;
}

.ag-btn-fix2 {
    border: 1px solid var(--fuel-color) !important;
    color: var(--dark) !important;
    border-radius: 80px !important;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    /*background-color: var(--fuel-color) !important;*/
    background-color: #ffff00 !important;
    padding: 4px 10px !important;
}

.ag-btn-fix2:hover {
    background-color: var(--fuel-color-over) !important;
    -webkit-transition: opacity 0.5s 0.25s ease-out;
    transition: opacity 0.5s 0.25s ease-out;
    transition: all 0.3s ease;
}

.ag-btn-fix2 span {
    font-size: var(--ag-font-20);
    width: 20px;
    height: 30px;
    color: var(--black2);
}

.icon-fix-menu {
    padding-top: 5px;
}

.ag-btn-fix3 {
    border-radius: 80px !important;
    border: 1px solid var(--fuel-color) !important;
    color: var(--dark) !important;
}

.ag-btn-fix3:hover {
    background-color: var(--dark-grey) !important;
    transition: all 0.3s ease;
    -webkit-transition: opacity 0.5s 0.25s ease-out;
    transition: opacity 0.5s 0.25s ease-out;
}

.text-title-header-mobile {
    margin: 0;
    padding: 0;
    font-size: var(--ag-font-20);
    color: var(--light);
    width: 100%;
    font-weight: bold;
    display: -webkit-box;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
}


/* =============================================================================
Banner
========================================================================== */

.carousel-control-prev,
.carousel-control-next {
    width: 5% !important;
}

.carousel-main-prev-icon,
.carousel-main-next-icon {
    font-size: 40px !important;
    background-color: #000;
    border-radius: 40px;
}

.ag-drop-qr {
    font-size: var(--ag-font-12) !important;
    width: 270px;
    padding: 0;
}

.ag-drop-qr span {
    display: block;
    padding: 5px 0;
    text-align: center;
}

.ag-profile-border {
    border: 1px solid var(--dark-grey3) !important;
}


/*--- Banner Setting---*/

.carousel-indicators [data-bs-target] {
    width: 10px !important;
    height: 10px !important;
}

.ag-bg-setting-1 {
    background-color: var(--yellow) !important;
}

.ag-bg-setting-2 {
    background-color: var(--white) !important;
    border: 1px solid var(--dark-grey);
}


/*--- Banner Background---*/

.ag-wrp-banner-bg {
    width: 100%;
    height: 400px;
}

.img_banner_bg_cover {
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    height: 400px !important;
}

.img_banner_bg_01-kedah {
    /* background-image: url("../img/banner/bnnr-kdafc2022.jpg"); */
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    height: 400px !important;
}

.img_banner_bg_01-mfl {
    background-image: url("../img/banner/bnnr-msl2022.jpg");
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    height: 400px !important;
}

.img_banner_bg_01-lsm {
    background-image: url("../img/banner/bnnr-lms.jpg");
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    height: 400px !important;
}

.img_banner_bg_01-mill {
    /* background-image: url("../img/banner/bnnr-mill.jpg"); */
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    height: 400px !important;
}

.img_banner_bg_01-fitx {
    background-image: url("../img/banner/bnnr-fitmalaysiax.jpg");
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    height: 400px !important;
}

.img_banner_bg_01-mysukantv {
    background-image: url("../img/banner/bnnr-mysukantv.jpg");
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    height: 400px !important;
}

.player-performance-background {
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    height: 200px !important;
    width: 400px !important;
}

.card-placement-bg {
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    height: 200px !important;
    /* width: 400px !important; */
}

.card-placement-bg-3 {
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    height: 140px !important;
    /* width: 400px !important; */
}

.card-match-photo {
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    height: 300px !important;
}

.card-placement-bg-2 {
    background-size: cover;
    /* -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover; */
    /* height: 180px !important; */
    /* width: 400px !important; */
}


/*--- Image Banner Background---*/

.img_banner_bg_0 {
    /* background-image: url("../img/banner/bnnr-kdafc2022.jpg"); */
    /* background-image: url(url('assets/img/card-thumb/mill_bg.jpeg')); */
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.img_banner_bg_01 {
    background-image: url("../img/banner/bnnr-kdafc2022.jpg");
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.img_banner_bg_02 {
    background-image: url("../img/banner/bnnr-nsl2021.jpg");
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.img_banner_bg_03 {
    background-image: url("../img/banner/bnnr-msl2022.jpg");
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.img_banner_bg_04 {
    background-image: url("../img/banner/bnnr-semuanyabola.jpg");
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.img_banner_bg_05 {
    background-image: url("../img/banner/bnnr-akk1.jpg");
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.img_banner_bg_06 {
    background-image: url("../img/banner/bnnr-vocketfc.jpg");
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.img_banner_bg_05 {
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.ag-bg-light-banner {
    background-color: var(--white);
    height: 244px;
}

.ag-bg-light-banner2 {
    background-color: var(--white);
    height: 244px;
    padding: 28px 24px 0 26px;
}


/*--- Banner Badge---*/

.ag-wrp-tag-badge {
    padding: 28px 24px 0 26px !important;
    border-radius: 50px !important;
    text-align: left;
}

.ag-wrp-tag-badge2 {
    padding: 0px 0 0 46px;
    border-radius: 50px !important;
    text-align: left;
}

.ag-wrp-tag-badge3 {
    border-radius: 50px !important;
    text-align: left;
}

.ag-wrp-tag-badge3 a {
    text-decoration: none !important;
    font-size: var(--ag-font-10);
    font-weight: 400;
    color: var(--light);
    cursor: pointer;
    padding: 4px 10px;
    background-color: var(--dark-grey) !important;
}

.ag-wrp-tag-badge3 a:hover {
    color: var(--light);
    cursor: pointer;
    background-color: var(--dark-grey2) !important;
    transition: all 0.5s ease;
}

.ag-wrp-tag-badge4 {
    padding: 0px 0 0 0px;
    border-radius: 50px !important;
    text-align: left;
}

.ag-wrp-tag-badge a,
.ag-wrp-tag-badge2 a,
.ag-wrp-tag-badge4 a {
    text-decoration: none !important;
    font-size: var(--ag-font-10);
    font-weight: 400;
    color: var(--light);
    cursor: pointer;
    padding: 4px 10px;
    background-color: var(--dark-grey) !important;
}

.ag-wrp-tag-badge a.ag-badge-follow,
.ag-wrp-tag-badge2 a.ag-badge-follow,
.ag-wrp-tag-badge3 a.ag-badge-follow,
.ag-wrp-tag-badge4 a.ag-badge-follow {
    color: var(--dark-grey);
    cursor: pointer;
    background-color: var(--dark-grey3) !important;
}

.ag-wrp-tag-badge a:hover,
.ag-wrp-tag-badge2 a:hover,
.ag-wrp-tag-badge4 a:hover {
    color: var(--light);
    cursor: pointer;
    background-color: var(--dark-grey2) !important;
    transition: all 0.5s ease;
}

.ag-top-fan {
    font-size: var(--ag-font-12);
}

.ag-vs-text {
    font-size: var(--ag-font-14);
}

.ag-wrp-text-banner1 h5 {
    width: 100%;
    text-align: initial;
    font-weight: bold;
    text-overflow: ellipsis;
    overflow: hidden !important;
    display: -webkit-box;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
}

.ag-wrp-text-banner1 p {
    text-overflow: ellipsis;
    overflow: hidden !important;
    word-break: keep-all;
    margin: 0;
}


/*--- Banner 1 Content---*/

.ag-wrp-banner-cont {
    display: flex;
    height: 260px;
    color: var(--dark2) !important;
    padding: 0 0 10px 0 !important;
    top: 20% !important;
}

.ag-wrp-banner-cont .ag-thumb-box1 {
    height: 260px !important;
    width: 200px;
}

.ag-wrp-text-banner1 {
    padding: 28px 24px 0 26px !important;
    text-decoration: none;
    color: var(--dark2);
    display: block;
    text-align: left !important;
}

.ag-wrp-text-banner1:hover,
.ag-wrp-text-banner-club:hover {
    color: var(--orange);
    cursor: pointer;
    transition: all 0.5s ease;
}

.ag-notification-text-wrp {
    margin: 0 0 0 10px;
    max-width: 450px !important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    overflow-wrap: break-word !important;
    text-align: left !important;
}

.ag-notification-text-wrp:hover {
    color: var(--orange);
}

.ag-notification-text-wrp2 {
    margin: 0 0 0 10px;
    max-width: 450px !important;
    color: var(--light) !important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    overflow-wrap: break-word !important;
    text-align: left !important;
}

.ag-notification-text-wrp2:hover {
    color: var(--orange) !important;
}

.ag-club-name-text {
    font-size: var(--ag-font-14);
    font-weight: bold;
    margin: 0;
    padding: 0;
    overflow: hidden;
    max-width: 247px;
    text-overflow: ellipsis !important;
    white-space: nowrap;
}

.ag-wrap-box-img0 {
    /* background: url("../img/banner-add/thumb_kda1.jpg") no-repeat; */
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.ag-wrap-box-img1 {
    background: url("../img/banner-add/thumb_kda1.jpg") no-repeat;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.ag-wrap-box-img2 {
    background: url("../img/banner-add/thumb_sb1.jpg") no-repeat;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.ag-wrap-box-img3 {
    background: url("../img/banner-add/thumb_akk1.jpg") no-repeat;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.ag-wrap-box-img4 {
    background: url("../img/banner-add/thumb_vocketfc1.jpg") no-repeat;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.ag-wrap-box-img5 {
    background: url("../img/banner-add/thumb_suunto1.jpg") no-repeat;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.ag-wrap-box-img6 {
    background: url("../img/banner-add/thumb_sandrawoo.jpg") no-repeat;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.ag-wrap-box-img7 {
    background: url("../img/banner-add/thumb_LMSsystem.jpg") no-repeat;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.ag-wrap-box-img8 {
    /* background: url("../img/banner-add/thumb_mill.jpg") no-repeat; */
    background-size: cover !important;
    background-position: center;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.ag-wrap-box-img9 {
    background: url("../img/banner-add/thumb_fitx.jpg") no-repeat;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.ag-wrap-box-img10 {
    background: url("../img/banner-add/thumb_kda1.jpg") no-repeat;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.ag-wrap-box-img11 {
    background: url("../img/banner-add/thumb_mfl2022.jpg") no-repeat;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.ag-wrap-box-img12 {
    background: url("../img/banner-add/thumb_mysukantv.jpg") no-repeat;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.ag-wrap-add {
    height: 244px !important;
    width: 100% !important;
    background-size: cover !important;
    position: relative;
    background-position: center !important;
}


/*--- Banner 2 Content---*/

.ag-wrp-banner2 {
    padding: 26px 36px 0 20px !important;
    color: var(--white);
    text-align: right;
    font-size: var(--ag-font-20) !important;
    background-color: rgba(0, 0, 0, 0.24) !important;
    height: 244px;
}

.ag-wrp-text-banner2 {
    text-overflow: ellipsis;
    overflow: hidden !important;
    font-size: var(--ag-font-12);
    word-break: keep-all;
    padding: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    text-align: left;
    -webkit-box-orient: vertical;
}

.ag-wrp-text-banner-club {
    padding: 0 26px 0 20px;
    display: block;
    text-decoration: none;
    color: var(--black2);
}

.ag-wrp-text-banner-club2 {
    display: block;
    text-decoration: none;
    color: var(--black);
}

.ag-wrp-text-banner-club2:hover {
    color: var(--orange);
    transition: all 0.5s ease;
}

.ag-club-name-text2 {
    font-size: var(--ag-font-20);
    font-weight: bold;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
}

.ag-wrp-text-banner-para {
    text-overflow: ellipsis;
    overflow: hidden !important;
    font-size: var(--ag-font-12);
    word-break: keep-all;
    display: -webkit-box;
    padding: 8px 0 0 55px;
    -webkit-line-clamp: 2;
    text-align: left;
    -webkit-box-orient: vertical;
}

.ag-wrp-banner2 h5 {
    font-size: var(--ag-font-14);
    margin: 0 0 3px 0;
}

.ag-banner-wrp-btn2 {
    padding: 15px 0 20px 55px;
}

.ag-text-finals {
    font-size: var(--ag-font-12);
    color: var(--orange);
}

.ag-width-fuel-fix-btn {
    width: 50% !important;
}


/*--- Banner 3 Content---*/

.ag-club-name-text3 {
    margin: 0;
    padding: 0 0 0 10px;
    text-align: left;
}

.ag-club-name-text3 h4 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: var(--ag-font-18);
    display: -webkit-box;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
}

.ag-viewers-info {
    font-size: var(--ag-font-12);
    display: flex;
}


/*--- Sidebar Banner Top Feed---*/

#owl-sidebar-right-feed:hover {
    color: var(--orange) !important;
}

.ag-card-fix4 {
    height: 60px !important;
    width: 230px !important;
    text-decoration: none !important;
    border-radius: 8px;
    display: block !important;
}

.ag-card-fix4:hover {
    color: var(--orange) !important;
}

.ag-club-name-text4 {
    margin: 0;
    padding: 10px 0 0 0;
    text-align: left;
    color: var(--white);
    overflow: hidden !important;
    width: 130px;
    text-overflow: ellipsis !important;
    display: -webkit-box;
    font-size: var(--ag-font-14);
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
}


/* =============================================================================
Content Menu
========================================================================== */

.ag-menu-wrap {
    align-items: center !important;
    /*padding: 10px 0 0 0;*/
}

.ag-menu-nav-items a.active,
.ag-menu-nav-items a:hover {
    background-color: var(--orange);
    border-radius: 20px;
    color: var(--black);
    /* font-weight: 700; */
    /* transition: all 0.5s ease; */
}


/*@media (lightness(var(--orange)) >= 50%) {
  .ag-menu-nav-items a {
    color: white;
  }
}

@media (lightness(var(--orange)) < 50%) {
  .ag-menu-nav-items a {
    color: black;
  }
}*/

.ag-menu-nav-items a {
    display: flex;
    padding: 6px 15px;
    background-color: var(--dark-grey2);
    align-items: center !important;
    color: var(--light);
    font-size: var(--ag-font-14);
    text-decoration: none;
    border-radius: 20px;
}

.ag-menu-nav-items a.disable {
    background-color: var(--dark-grey3);
    cursor: unset;
    color: var(--dark-grey2);
}

.ag-menu-nav-items a.disable .ag-icon {
    color: var(--dark-grey2);
    border: 1px solid var(--dark-grey2) !important;
}


/*--- Title Main---*/

.ag-title-main {
    align-items: baseline !important;
    padding: 16px 0 9px 0;
    margin: 6px 0;
    border-top: 1px solid var(--dark-grey2);
    border-bottom: 1px solid var(--dark-grey2);
}

.ag-title-main2 {
    /* align-items: baseline !important; */
    align-items: center !important;
    /*padding: 16px 0 9px 0;*/
    margin: 15px 0 14px 0;
    /*border-top: 1px solid var(--dark-grey2);
    border-bottom: 1px solid var(--dark-grey2);*/
    /* width: 99%; */
}

.ag-title-main h1 {
    font-size: var(--ag-font-14);
    color: var(--light);
    display: flex;
}

.ag-title-main2 h1 {
    font-size: var(--ag-font-14);
    text-decoration: none !important;
    color: var(--light);
    /* padding: 8px 0; */
    padding: 8px 0 0 0;
    font-weight: 600;
}

.ag-text-view-all {
    font-size: var(--ag-font-12);
    color: var(--light) !important;
    text-decoration: none;
    padding-right: 10px;
}

.ag-text-view-all.active,
.ag-text-view-all.active span,
.ag-text-view-all:hover {
    color: var(--orange) !important;
    transition: all 0.3s ease;
}


/*--- Card Display---*/

.card.ag-card-fix {
    background: none !important;
}

.ag-card-fix {
    font-size: var(--ag-font-14);
    text-decoration: none;
    color: var(--light);
    padding: 0 !important;
    border: none !important;
    border: 1px solid;
}

.ag-card-fix:hover {
    color: var(--orange);
    transition: all 0.3s ease;
}

.ag-card-fix h3 {
    /* overflow: hidden !important; */
    text-overflow: ellipsis !important;
    font-size: var(--ag-font-14);
    /* display: -webkit-box; */
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
}

.ag-card-fix h4 {
    font-size: var(--ag-font-12);
    color: var(--orange);
}

.ag-card-fix h5 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: var(--ag-font-14);
    display: -webkit-box;
    padding-right: 10px;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
}

.card.ag-card-fix2 {
    background-color: var(--dark-grey2) !important;
    text-decoration: none !important;
    border: none !important;
    width: 232px;
}

.card.ag-card-fix3 {
    background: none !important;
}

.card.ag-card-fix3 {
    font-size: var(--ag-font-14);
    text-decoration: none;
    color: var(--light);
    padding: 0 !important;
    border: none !important;
    border: 1px solid;
}

.ag-card-fix:hover,
.ag-card-fix3:hover {
    color: var(--orange);
    transition: all .3s ease;
}

.ag-card-fix3 h1 {
    overflow: hidden !important;
    text-align: left;
    text-overflow: ellipsis !important;
    font-size: var(--ag-font-14);
    display: -webkit-box;
    /*max-width: 150px;*/
    /*-webkit-line-clamp: 2 !important;*/
    -webkit-box-orient: vertical;
}

.ag-wrap-card {
    padding: 10px;
}

.ag-width-thumb-icon {
    width: 90px;
}

.ag-width-thumb-icon img {
    padding: 8px !important;
}

.ag-wrap-card span {
    margin: 0 !important;
    padding: 0px 0 0 0 !important;
    font-size: var(--ag-font-12);
    text-align: left;
}

.ag-wrp-thumb-catagories {
    width: 100%;
    min-height: 170px;
}

.ag-wrp-thumb-catagories:hover {
    transform: scale(1.05);
    transition: all 0.7s ease;
}

.ag-wrap-card2 {
    padding: 10px;
    width: 230px !important;
}

.ag-wrap-card2:hover {
    color: var(--orange);
    transition: all 0.3s ease;
}

.ag-wrap-card2 h3 {
    overflow: hidden !important;
    text-decoration: none !important;
    text-overflow: ellipsis !important;
    font-size: var(--ag-font-14);
    display: -webkit-box;
    color: var(--light);
    -webkit-line-clamp: 2 !important;
    height: 33px;
    -webkit-box-orient: vertical;
}

.ag-wrap-card2 h4 {
    font-size: var(--ag-font-12);
    color: var(--orange);
}

.ag-wrap-card2 span {
    margin: 0 !important;
    padding: 0px 0 0 0 !important;
    font-size: var(--ag-font-12);
    color: var(--light);
}

.owl-carousel .ag-card-fix2 img {
    width: 276px !important;
}

.ag-wrp-card-box {
    width: 260px !important;
    display: block;
}

.ag-wrp-card-box2 {
    width: 400px !important;
    display: block;
}

.ag-wrp-card-box3 {
    /*width: 400px !important;*/
    display: block;
    text-align: left;
}


/* =============================================================================
Carousel
========================================================================== */

.carousel-item {
    height: 400px;
}

.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    margin: 5px 3px;
    background-color: var(--yellow-color);
    display: block;
    transition: opacity 0.2s ease;
    border-radius: 30px;
    border-bottom: 0 !important;
    border-top: 0 !important;
    --webkit-backface-visibility: visible;
}

.carou1 {
    margin: 30px 0 80px 0px;
}

.carou1 .owl-dots {
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}

.carou1 .owl-nav {
    margin-top: 20px;
    margin-left: 38%;
    margin-bottom: 20px;
}

.carou1 .owl-nav [class*="owl-"] {
    color: #fff;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
    background: #d6d6d6;
    display: inline-block;
    cursor: pointer;
    border-radius: 140px;
}

.carou1 .owl-nav [class*="owl-"]:hover {
    background: #e9e9e9;
    color: #000000;
    text-decoration: none;
    transition: 0.3s;
}

.carou1 .owl-nav span {
    margin: 0 !important;
    padding: 0 !important;
}

.carou1 .owl-nav .disabled {
    opacity: 0.5;
    cursor: default;
}

.carou1 .owl-nav.disabled+.owl-dots {
    margin: 5px 0;
}

.carou1 .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
}

.carou1 .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 3px;
    background: #d6d6d6;
    display: block;
    transition: opacity 0.2s ease;
    border-radius: 30px;
    margin-top: 20px;
    --webkit-backface-visibility: visible;
}

.carou1 .owl-dots .owl-dot.active span,
.carou1 .owl-dots .owl-dot:hover span {
    background: #fec300;
    transition: 0.3s;
}

.figOp {
    display: block;
    border: 1px solid #aeaeae;
    background-color: var(--dark-grey3);
    padding: 30px;
    border-radius: 10px;
    font-family: var(--body-font);
    height: 200px;
    color: var(--yellow-color);
    opacity: 0;
    -webkit-transition: opacity 0.5s 0.25s ease-out;
    transition: opacity 0.5s 0.25s ease-out;
}

.figOp.is-visible {
    opacity: 1;
}

.figOp:hover {
    background-color: var(--grey-color2);
    color: var(--grey-color);
    transition: all 0.3s ease;
}

.figOp.disabled {
    background-color: var(--grey-color2) !important;
    color: var(--grey-color) !important;
    opacity: 0.8 !important;
}

.ag-video-youtube {
    height: 245px;
    width: 100%;
}


/*--- Carousel Sports Analytic---*/

.ag-wrp-categories-sports {
    text-decoration: none !important;
}

.ag-wrp-categories-sports-fix {
    width: 100%;
    min-height: 140px;
    border: 1px solid var(--dark-grey2);
    border-radius: 10px;
}


/*--- Carousel 2---*/

.ag-wrp-categories {
    text-decoration: none !important;
}

.ag-wrp-catagories-fix {
    width: 100%;
    min-height: 140px;
    border: 1px solid var(--dark-grey2);
    border-radius: 10px;
}

.ag-wrp-catagories-fix h1 {
    color: var(--white);
    font-size: var(--ag-font-28);
    padding: 40px 0px 1px 20px;
    font-weight: 600;
}

.ag-wrp-catagories-fix img {
    width: 130px !important;
    height: 100px;
    position: absolute;
    bottom: -54px !important;
    vertical-align: middle !important;
}

.bg-sports-analytics {
    background: rgb(0, 0, 0);
    background: linear-gradient( 90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 255, 177, 1) 100%);
}

.bg-active-lifestyle {
    background: rgb(0, 0, 0);
    background: linear-gradient( 90deg, rgba(0, 0, 0, 1) 0%, rgba(254, 31, 101, 1) 100%);
}

.bg-e-learning {
    background: rgb(0, 0, 0);
    background: linear-gradient( 90deg, rgba(0, 0, 0, 1) 0%, rgba(13, 175, 244, 1) 100%);
}

.bg-marketplace {
    background: rgb(0, 0, 0);
    background: linear-gradient( 90deg, rgba(0, 0, 0, 1) 0%, rgba(255, 206, 0, 1) 100%);
}

.bg-booking {
    background: rgb(0, 0, 0);
    background: linear-gradient( 90deg, rgba(0, 0, 0, 1) 0%, rgba(87, 27, 126, 1) 100%);
}


/*--- Advertisement---*/

.ads2 {
    border: 1px solid var(--dark-grey3);
    height: 140px;
    width: 100%;
    text-decoration: none;
}

.ads2 a {
    text-decoration: none;
}

.ag-ads2-title {
    font-size: var(--ag-font-10);
    text-align: center !important;
    text-decoration: none !important;
    position: absolute;
    color: var(--white);
    padding: 10px 0 0 10px !important;
    margin: 0 auto !important;
    width: 200px;
    display: flex;
}

.ag-ads-wrap-info {
    padding: 36px 18px 36px 0;
}

.ads2 h2 {
    font-size: var(--ag-font-20);
    text-align: right;
    font-weight: bold;
    width: 300px;
    display: flex;
    margin: 8px 20px 0 0;
    color: var(--white);
}

.ag-ads-bg {
    background-position: left;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    height: 138px;
    background-repeat: no-repeat;
}

.ag-ads2-bg {
    background-image: url("../img/ads/ads-fam-banner.jpg");
    background-position: left;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    height: 138px;
    background-repeat: no-repeat;
}

.ag-ads3-bg {
    background-image: url("../img/ads/ads-suunto-banner.jpg");
    background-position: left;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    height: 138px;
    background-repeat: no-repeat;
}

.ag-ads4-bg {
    background-image: url("../img/ads/ads-lms-banner.jpg");
    background-position: left;
    background-size: cover !important;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    height: 138px;
    background-repeat: no-repeat;
}

.ag-ads4-fitx-bg {
    background-image: url("../img/ads/ads-fitx-banner.jpg");
    background-position: left;
    background-size: cover !important;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    height: 138px;
    background-repeat: no-repeat;
}

.ag-card-text {
    color: var(--light);
    text-decoration: none !important;
}

.ag-card-text h3 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: var(--ag-font-14);
    display: -webkit-box;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
}


/*--- 4 Box ---*/

#owl-four {
    height: 246px !important;
    width: 100% !important;
    display: block;
}

.ag-wrp-thumb-catagories2 {
    width: 100%;
    height: 174px !important;
    border: 1px solid var(--dark-grey2);
}

.ag-wrp-thumb-catagories2:hover {
    transform: scale(1.05);
    transition: all 0.7s ease;
}

.ag-text-card-categories {
    position: absolute;
    left: 0;
    display: block;
    z-index: 3;
    margin: 10px 0 0 10px;
    color: var(--white);
    width: auto !important;
    padding: 5px !important;
    height: 28px;
    align-items: center !important;
    font-size: var(--ag-font-12);
}

.ag-text-card-categories:hover {
    color: var(--orange) !important;
    transition: all 0.3s ease;
}

.ag-card-categories-icon4 {
    position: absolute;
    display: flex;
    min-width: 28px;
    z-index: 3;
    right: 0;
    justify-content: right;
    align-items: right !important;
    color: var(--white);
    border: 1px solid var(--dark-grey3);
    border-radius: 20px;
    width: 23px !important;
    padding: 5px !important;
    height: 28px;
    font-size: 16px !important;
    margin: 10px 10px 10px 0;
    background: rgba(0, 0, 0, 0.24) !important;
}

.ag-card-categories-icon4:hover,
.ag-card-categories-icon4.active {
    color: var(--orange) !important;
    transition: all 0.3s ease;
}

.ag-card-btn-click {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
}

.ag-card-btn-click span {
    background-color: var(--orange) !important;
    width: 100% !important;
    color: var(--white);
    font-size: var(--ag-font-12);
}

.ag-card-btn-click span:hover {
    background-color: var(--orange2) !important;
    color: var(--light);
}

.ag-card-btn-click2 {
    position: absolute;
    bottom: 0;
    padding: 6px 0px 6px 26% !important;
    margin: 10px 10px 11px 10px !important;
    width: 93% !important;
    color: var(--black) !important;
    text-decoration: none;
    align-items: center !important;
    background: var(--fuel-color) !important;
    border-radius: 5px;
    font-weight: 600;
}

.ag-card-btn-click2 span {
    background-color: var(--black2) !important;
    width: 20% !important;
    color: var(--white);
}

.ag-card-btn-click2:hover {
    background: var(--fuel-color-over) !important;
    transition: all .5s ease;
}

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

.bg-black-ag2 .material-icons {
    font-size: var(--ag-font-12) !important;
}


/* =============================================================================
Pop-up - Modal
========================================================================== */

.ag-wrap-card3 {
    padding: 10px;
}

.ag-wrap-card3 h5 {
    overflow: hidden !important;
    text-decoration: none !important;
    font-weight: bold;
    text-overflow: ellipsis !important;
    font-size: var(--ag-font-18);
    display: -webkit-box;
    color: var(--white);
    width: 100%;
    -webkit-line-clamp: 1 !important;
    height: 24px;
    -webkit-box-orient: vertical;
}

.ag-wrap-card3 h4 {
    font-size: var(--ag-font-14) !important;
    color: var(--orange);
    align-items: center !important;
    padding-top: 3px;
}

.ag-wrap-card3 span {
    font-size: var(--ag-font-12);
    color: var(--white) !important;
}

.ag-modal-btn {
    margin: 0 !important;
}

.ag-popup-footer-fix {
    display: block !important;
    border-top: 1px solid var(--dark-grey2) !important;
    padding: 0 !important;
}

.ag-modal-fix-close-btn {
    position: absolute !important;
    right: 20px;
    top: 6px;
}

.ag-btn-close-fix1 {
    width: 30px !important;
    height: 30px !important;
    padding: 5px !important;
    font-size: var(--ag-font-18) !important;
    border-radius: 20px !important;
    background: var(--dark-grey2) !important;
    color: var(--light) !important;
    opacity: 1 !important;
}

.ag-background-modal {
    background-color: var(--black) !important;
    border: 1px solid var(--black) !important;
}

.ag-modal-team-ratio {
    background-color: var(--dark-grey2) !important;
    border-radius: 10px;
}

.ag-modal-team-ratio h5 {
    color: var(--light);
    font-size: var(--ag-font-12);
    text-align: center;
    padding-top: 10px;
}

.ag-modal-team-ratio h2 {
    color: var(--light);
    font-size: var(--ag-font-28);
    text-align: right;
    font-weight: bold;
    padding: 4px 0 0 0;
}

.ag-icon5 {
    min-width: 28px;
    display: flex;
    z-index: 1;
    color: var(--light);
    border: 1px solid var(--dark-grey3);
    border-radius: 20px;
    width: 23px !important;
    padding: 5px !important;
    height: 28px;
    font-size: 16px !important;
    background: rgba(0, 0, 0, 0.24) !important;
    cursor: pointer;
}

.ag-arrow-up {
    color: var(--green);
}

.ag-arrow-down {
    color: var(--red);
}


/* =============================================================================
League Page
========================================================================== */

.ag-owl-fixture {
    width: 320px !important;
    text-decoration: none !important;
    color: var(--light);
}


/*--- Card Display---*/

.ag-wrp-thumb-catagories5 {
    width: 320px;
    display: block;
    background-color: var(--dark-grey2);
    border-radius: 8px;
    text-decoration: none !important;
}

.ag-wrp-thumb-catagories5:hover {
    transform: scale(1.01);
    transition: all 0.7s ease;
}

.card.ag-card-fix5 {
    background: none !important;
}

.ag-card-fix5 {
    font-size: var(--ag-font-14);
    text-decoration: none;
    color: var(--light);
    padding: 0 !important;
    border: none !important;
    border: 1px solid;
    display: block;
}

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

.ag-card-btn-click3 span {
    background-color: var(--black2) !important;
    width: 30% !important;
    color: var(--white);
}

.ag-card-btn-click3:hover {
    background: var(--fuel-color-over) !important;
    transition: all 0.5s ease;
}

.btn-fixture-details {
    background-color: var(--dark-grey3) !important;
    display: block;
    width: 100%;
    color: var(--light) !important;
    font-size: var(--ag-font-12) !important;
    border: 1px solid var(--dark-grey2) !important;
}

.btn-fixture-details:hover,
.btn-fixture-details.active {
    background-color: var(--dark-grey) !important;
    transition: all 0.5s ease;
}

.ag-fixture-details {
    padding: 10px 10px 10px 10px !important;
    background-color: var(--dark-grey2);
    text-align: center !important;
    border-radius: 10px 10px 0px 0px;
}

.ag-fixture-details2 {
    padding: 18px 10px 0px 10px;
    text-align: center !important;
    border-radius: 10px 10px 0px 0px;
}

.ag-fixture-details h1 {
    font-size: var(--ag-font-12);
    padding: 10px 0 0 0;
    margin: 0;
    color: var(--light);
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100px;
    display: -webkit-box;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
}

.ag-fixture-details2 h1 {
    font-size: var(--ag-font-12);
    padding: 10px 0 0 0;
    margin: 0;
    color: var(--white);
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100px;
    display: -webkit-box;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
}

.ag-fixture-details h2 {
    font-size: var(--ag-font-28);
    margin: 0;
    font-weight: bold;
}

.ag-fixture-details h3 {
    font-size: var(--ag-font-12);
    padding: 5px 0 0 0;
    margin: 0;
    color: var(--dark-grey);
}

.ag-fixture-details span {
    font-size: var(--ag-font-12);
    padding: 2px 0;
}

.ag-text-league-info {
    font-size: var(--ag-font-14);
    padding: 0;
    margin: 0;
    color: var(--light);
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 80px;
    display: -webkit-box;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
}

.ag-fixture-details {
    font-size: var(--ag-font-12);
    padding: 0;
    margin: 0;
    font-weight: bold !important;
}

.ag-fixture-text-team {
    font-size: var(--ag-font-12);
    font-weight: bold !important;
}

.ag-fixture-text-team-mode {
    font-size: var(--ag-font-12);
    font-weight: bold !important;
    color: var(--white);
}

.ag-fixture-box-datails {
    padding: 10px;
    border-top: 1px solid var(--dark-grey);
    border-bottom: 1px solid var(--dark-grey);
}

.ag-fixture-box-datails h4 {
    font-size: var(--ag-font-12);
    color: var(--dark-grey);
}

.ag-fixture-box-datails h5 {
    font-size: var(--ag-font-14);
    padding: 0;
    margin: 0;
    color: var(--light);
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
}

.ag-match-details-btn {
    padding: 15px 10px 13px 10px;
}

.ag-width-thumb-icon2 {
    width: 70px;
    height: 70px;
}

.ag-width-thumb-icon2 span {
    font-size: var(--ag-font-28);
    font-weight: bold;
    display: block;
    padding: 12px 0 0 0;
}

.ag-league-box {
    padding: 26px 16px !important;
    display: block;
    border: 1px solid var(--dark-grey2) !important;
    height: 160px;
    cursor: pointer;
    background-color: var(--dark-grey2);
    border-radius: 15px;
}

.ag-league-box:hover {
    background-color: var(--dark-grey3);
}

.ag-league-box h1 {
    font-size: var(--ag-font-12);
    text-align: center;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100px;
    display: -webkit-box;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
}

.ag-width-thumb-icon3 {
    width: 70px;
    height: 70px;
    margin: 0 auto 10px auto;
    align-items: center !important;
}

.ag-width-thumb-icon3 img {
    padding: 10px !important;
}

.ag-width-thumb-icon14 {
    width: 50px;
    height: 50px;
}

.ag-width-thumb-icon14 img {
    padding: 10px !important;
}


/*--- Carousel Sports Analytic---*/

.ag-wrp-categories-sports {
    text-decoration: none !important;
}

.ag-wrp-categories-sports-fix {
    width: 100%;
    min-height: 140px;
    border: 1px solid var(--dark-grey2);
}

.ag-wrp-categories-info {
    padding: 30px 0 0 30px;
}

.ag-wrp-categories-info h1 {
    color: var(--white);
    font-size: 24px;
    width: 248px;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
}

.ag-wrp-categories-info h2 {
    font-size: var(--ag-font-18);
    width: 248px;
    color: var(--white);
}

.ag-wrp-categories-info h2 span {
    color: var(--orange);
}

.ag-wrp-categories-info h5 {
    font-size: var(--ag-font-12);
    color: var(--white);
}

.ag-icon-browser-sports {
    position: absolute;
    right: 30px;
    top: 30%;
}

.bg-categories-browser {
    background: rgb(77, 77, 77);
    background: linear-gradient( 90deg, rgba(77, 77, 77, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.ag-club-name-text4 {
    margin: 0;
    padding: 10px 0 0 0;
    text-align: left;
    color: var(--white);
    overflow: hidden !important;
    width: 130px;
    text-overflow: ellipsis !important;
    display: -webkit-box;
    font-size: var(--ag-font-14);
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
}


/* =============================================================================
News Page
========================================================================== */

.ag-bg-news-1 {
    background: url(../img/news/thumb_news-post-1.jpg);
}

.ag-bg-news-2 {
    background: url(../img/news/thumb_news-post-2.jpg);
}

.ag-bg-news-3 {
    background: url(../img/banner-add/thumb_vocketfc1.jpg);
}

.ag-wrp-news-info-pdd {
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat;
    width: 100%;
    cursor: pointer;
}

.ag-owl-news {
    width: 320px !important;
    text-decoration: none !important;
    color: var(--light);
}


/*--- Card Display---*/

.ag-wrp-thumb-news {
    width: 320px;
    display: block;
    text-decoration: none !important;
}

.ag-wrp-thumb-news:hover {
    transform: scale(1.01);
    transition: all 0.7s ease;
}

.ag-news-box-datails {
    padding: 10px;
    border-top: 1px solid var(--dark-grey);
    cursor: pointer;
}

.ag-news-box-datails:hover {
    background-color: var(--dark-grey3);
    transition: all 0.5s ease;
}

.ag-news-box-datails h5 {
    font-size: var(--ag-font-18);
    color: var(--white);
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100%;
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
}

.ag-news-box-datails h4 {
    font-size: var(--ag-font-12);
    color: var(--white);
}

.ag-news-box-datails h4 a {
    text-decoration: none;
    color: var(--white);
    padding-right: 5px;
}

.ag-news-box-datails h4 a:hover {
    color: var(--orange);
    transition: all 0.7s ease;
}

.ag-wrap-news-info {
    padding: 10px;
    height: 200px;
}

.ag-wrap-news-info h2 {
    font-size: var(--ag-font-18);
    color: var(--white);
    width: 100%;
    margin-top: 116px;
    text-shadow: 2px 2px 2px var(--dark-grey3) !important;
    display: -webkit-box;
    height: 68px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical;
}

.ag-wrap-news-info small {
    font-size: var(--ag-font-14);
    color: var(--white);
    width: 100%;
    margin-top: 116px;
    text-shadow: 2px 2px 2px var(--dark-grey3) !important;
    display: -webkit-box;
    height: 68px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical;
}

.owl-carousel .ag-card-fix2 img {
    width: 276px !important;
}


/* =============================================================================
Team Content
========================================================================== */

.ag-menu-nav-items2 a.active {
    border-radius: 4px;
    color: var(--light);
    transition: all 0.5s ease;
}

.ag-menu-nav-items2 a {
    display: flex;
    padding: 6px 10px;
    align-items: center !important;
    background-color: var(--dark-grey3);
    color: var(--light);
    font-size: var(--ag-font-14);
    text-decoration: none;
    border-radius: 4px;
}

.ag-menu-nav-items2 a:hover {
    color: var(--white);
    background-color: var(--green);
    transition: all 0.7s ease;
}

.ag-menu-nav-items2 a.disable {
    background-color: var(--dark-grey3);
    cursor: unset;
    color: var(--dark-grey2);
}

.ag-menu-nav-items2 a.disable .ag-icon {
    color: var(--dark-grey2);
    border: 1px solid var(--dark-grey2) !important;
}


/*--- Banner Background---*/

.ag-wrp-team-banner {
    position: static;
    padding: 80px;
}

.ag-logo-fix-team {
    width: 80px !important;
}

.ag-width-thumb-icon4 {
    width: 90px;
    height: 80px;
}

.ag-wrp-team-banner1 {
    background: rgb(0, 0, 0, 0.6);
    padding: 6px 0px 10px 20px;
    color: var(--white);
}

.ag-wrp-team-banner2 {
    background: rgb(0, 0, 0);
    background: linear-gradient( 0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8939950980392157) 40%, rgba(0, 0, 0, 1) 90%);
    padding: 6px 0px 10px 20px;
    color: var(--white);
}

.ag-wrp-team-banner2 h1 {
    font-size: var(--ag-font-28);
    display: -webkit-box;
    width: 100% !important;
    height: 36px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
}

.ag-wrp-team-banner2 h2 {
    font-size: var(--ag-font-18);
}

.ag-wrp-team-banner2 .info-club {
    font-weight: bold;
    color: var(--orange) !important;
}

.ag-wrp-team-banner2 h3 {
    font-size: var(--ag-font-12);
    display: flex;
    align-items: center !important;
}

.ag-wrp-team-banner2 h4 {
    font-size: var(--ag-font-12);
    display: flex;
    align-items: center !important;
}

.ag-wrp-team-banner2 span {
    margin: 0 10px 0 0 !important;
    color: var(--white) !important;
}

.ag-wrp-team-banner2 a:hover span {
    color: var(--orange) !important;
    transition: all 0.7s ease;
}

.ag-wrp-team-banner2 p {
    font-size: var(--ag-font-12);
    display: -webkit-box;
    width: 70% !important;
    overflow: hidden !important;
    /*text-overflow: ellipsis !important; background-color: #860ccd;
  	-webkit-line-clamp: 2 !important; height: 40px !important;
  	-webkit-box-orient: vertical;*/
}

.ag-team-text-more .addText {
    display: none;
}

.ag-team-text-more .link {
    color: var(--white);
    font-weight: bold;
}

.ag-owl-league6 {
    text-decoration: none !important;
    color: var(--light);
}


/*--- Card Display---*/
.ag-card-club6 {
    width: 150px;
    display: block;
    background-color: var(--dark-grey3);
    border-radius: 8px;
    text-decoration: none !important;
}

.ag-card-club6:hover,
.ag-card-club8:hover {
    transform: scale(1.01);
    transition: all 0.7s ease;
    background-color: var(--dark-grey);
}

.ag-card-club8 {
    width: 200px;
    display: block;
    background-color: var(--fuel-color);
    border-radius: 8px;
    text-decoration: none !important;
    color: var(--black) !important;
}


/*--- Card Display---*/

.ag-wrp-thumb-club {
    width: 100px;
    display: block;
    border-radius: 8px;
    text-decoration: none !important;
    cursor: pointer;
}

.ag-wrp-thumb-club h5 {
    font-size: var(--ag-font-18) !important;
    padding: 10px 0 0 0 !important;
    margin-top: 5x;
    display: block;
    border-top: 1px solid var(--dark-grey2) !important;
}

.ag-wrp-thumb-club h4 {
    font-size: var(--ag-font-14) !important;
    padding: 10px 0 0 0 !important;
    margin-bottom: 5x;
    display: block;
    /* border-bottom: 1px solid var(--dark-grey2) !important; */
}

.ag-club-details {
    padding: 0 10px 0 0 !important;
    text-align: center !important;
    border-radius: 10px 10px 0px 0px;
    font-size: var(--ag-font-14) !important;
}

.ag-club-details h1 {
    font-size: var(--ag-font-24) !important;
    text-align: left !important;
    font-weight: bold;
    margin: 0;
}

.ag-club-box-datails {
    font-size: var(--ag-font-28) !important;
    padding: 0 !important;
}

.ag-club-box-datails h4 {
    font-size: var(--ag-font-12);
    color: var(--light);
    align-items: center !important;
    padding: 10px 0 0 0 !important;
}

.ag-club-box-datails h6 a {
    font-size: var(--ag-font-12);
    display: inline-block !important;
    text-align: left !important;
    text-decoration: none !important;
}

.ag-club-form a {
    text-decoration: none !important;
    color: var(--white) !important;
}

.popover-header {
    background-color: var(--orange) !important;
    color: var(--light);
    border-radius: 0 !important;
    font-size: var(--ag-font-12) !important;
}

.popover-body {
    color: var(--black) !important;
    margin: 0 !important;
    height: 80px !important;
    padding-top: 10 !important;
    font-weight: bold;
}

.ag-icon8 {
    display: flex;
    margin: 0 8px 0 0;
    color: var(--white);
    border: 1px solid var(--dark-grey2);
    border-radius: 20px;
    width: 35px !important;
    height: 35px;
    padding: 0 0 0 8px !important;
    font-size: var(--ag-font-20) !important;
    align-items: center !important;
    text-decoration: none !important;
    text-align: center !important;
}

.ag-owl-club {
    text-decoration: none !important;
    color: var(--light);
}

.ag-card-club7 {
    text-decoration: none;
    color: var(--light);
    padding: 0 !important;
    border: none !important;
    border: 1px solid;
    display: block;
}

.ag-card-club7 h1 {
    font-size: var(--ag-font-14) !important;
}


/*--- Card Display---*/

.ag-wrp-thumb-club5 {
    width: 280px;
    display: block;
    background-color: var(--dark-grey2);
    text-decoration: none !important;
}

.ag-wrp-thumb-club5:hover {
    transform: scale(1.01);
    transition: all 0.7s ease;
}

.ag-club-details2 {
    height: 168px;
    padding: 18px 14px 0px 14px;
    text-align: center !important;
}

.ag-club-details2 h1 {
    font-size: var(--ag-font-28) !important;
    margin: 0;
    font-weight: bold !important;
    color: var(--white);
    width: 55px !important;
}

.ag-club-details2 h2 {
    font-size: var(--ag-font-28) !important;
    color: var(--white);
}

.ag-club-details2 h3 {
    font-size: var(--ag-font-28) !important;
    width: 110px;
    text-align: left;
    padding: 4px 0;
    position: absolute;
    top: 160px;
    text-align: left;
}

.ag-club-box-datails2 {
    padding: 10px;
    border-top: 1px solid var(--dark-grey3);
    margin: 0 !important;
    cursor: pointer !important;
    width: 100% !important;
}

.ag-club-box-datails2:hover {
    background-color: var(--dark-grey3) !important;
    transition: all 0.7s ease;
}

.ag-club-box-datails2 .ag-club-player {
    font-size: var(--ag-font-18);
}

.ag-club-box-datails2 h3 {
    font-size: var(--ag-font-20);
    text-align: center;
    font-weight: bold;
}

.ag-club-box-datails2 h3 span {
    color: var(--dark-grey);
    font-size: var(--ag-font-12);
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-weight: normal;
    width: 32px;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
}

.ag-club-box-datails2 h4 {
    font-size: var(--ag-font-14);
    color: var(--dark-grey);
}

.ag-club-box-datails2 h5 {
    font-size: var(--ag-font-14);
    padding: 0;
    margin: 3px 0;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    /* width: 185px; */
    width: 200px;
    display: -webkit-box;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
}


/*--- Table---*/

.ag-table-fix1 {
    --bs-table-bg: var(--dark-grey2) !important;
    --bs-table-striped-bg: var(--dark-grey) !important;
    --bs-table-striped-color: var(--light) !important;
    --bs-table-active-bg: var(--dark-grey3) !important;
    --bs-table-active-color: var(--dark-grey) !important;
    --bs-table-hover-bg: var(--dark-grey3) !important;
    --bs-table-hover-color: var(--light) !important;
    color: var(--light) !important;
    border-color: var(--dark-grey3) !important;
    font-size: var(--ag-font-14);
    font-weight: normal;
    cursor: pointer;
    width: 99% !important;
}

.ag-title-main3 {
    align-items: center !important;
    color: var(--light);
    padding: 0 0 10px 0;
    font-size: var(--ag-font-14);
}

.ag-table-viewall {
    text-decoration: none !important;
    color: var(--light);
    align-items: center !important;
}

.ag-table-viewall:hover {
    color: var(--orange) !important;
}

.table> :not(caption)>*>* {
    border-color: var(--dark-grey3) !important;
}


/* =============================================================================
Team Stats Content
========================================================================== */

.ag-wrp-top-banner-stick {
    z-index: 2;
    padding: 10px 2% 5px 5px;
    position: fixed;
    width: calc(100% - 184px);
}

.ag-wrp-top-banner-stick h1 {
    font-size: var(--ag-font-20);
    color: var(--white);
    display: flex;
    padding: 10px 0 0 10px;
    margin: 0;
}

.ag-wrp-top-banner-stick h2 {
    font-size: var(--ag-font-14);
    padding: 0 0 0 10px;
    color: var(--white);
}

.ag-wrp-top-banner-stick h3 {
    font-size: var(--ag-font-18);
    color: var(--white);
    padding: 5px 8px 0px 0px;
    align-items: center !important;
}

.ag-width-thumb-icon5 {
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    border: 1px solid var(--dark);
}

.ag-info-top-banner-stick {
    position: fixed;
    right: 20%;
}

.ag-sticky-hdr-stats h1 {
    font-size: var(--ag-font-20);
    display: -webkit-box;
    max-width: 360px !important;
    height: 36px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
}

.ag-league-title-competition {
    padding: 6px;
    margin-top: 12px;
    width: 99%;
}

.ag-league-title-competition h1 {
    font-size: var(--ag-font-14);
    color: var(--white);
    padding: 8px 0 0 10px;
}

.ag-view-competition {
    font-size: var(--ag-font-12);
    color: var(--light) !important;
    text-decoration: none;
}

.ag-icon7 {
    color: var(--dark-grey);
    font-size: var(--ag-font-18) !important;
}

.powered-by {
    font-size: var(--ag-font-12);
    color: var(--light);
}

.powered-by img {
    display: block;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid var(--dark-grey2);
}

.ag-view-text-competition {
    font-size: var(--ag-font-20);
    font-weight: bold;
    text-align: right;
}

.ag-col-fix-table {
    max-width: 50px;
    font-size: var(--ag-font-12);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--dark-grey3) !important;
    color: var(--orange) !important;
    font-size: var(--ag-font-14);
    font-weight: bold;
    padding: 10px 20px;
    transition: all 0.7s ease;
}

.nav-pills-fix .nav-link {
    color: var(--light) !important;
    padding: 10px 20px;
    font-size: var(--ag-font-14);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--orange) !important;
    transition: all 0.7s ease;
}

.ag-player-box-card h5 {
    font-size: var(--ag-font-14);
    padding: 0;
    margin: 3px 0;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 280px;
    display: -webkit-box;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
}

.ag-player-box-card {
    padding: 10px;
    border-top: 1px solid var(--dark-grey3);
    margin: 0 !important;
    cursor: pointer !important;
}

.ag-player-box-card:hover {
    background-color: var(--dark-grey3) !important;
    transition: all 0.7s ease;
}

.ag-player-box-card {
    font-size: var(--ag-font-18);
}

.ag-player-box-card h3 {
    font-size: var(--ag-font-20);
    text-align: center;
    font-weight: bold;
}

.ag-player-box-card h4 {
    font-size: var(--ag-font-14);
    color: var(--dark-grey);
}

.ag-match-player-details-btn {
    padding: 15px 0 6px 0;
}

.ag-match-player-details-btn2 {
    padding: 0 10px 10px 10px;
}

.ag-img-fix-card {
    width: 116px !important;
    margin-left: 40px !important;
}


/* =============================================================================
Fixtures Content
========================================================================== */

.ag-banner-fixtures {
    height: 310px;
    background-position: center;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    padding: 20px;
}

.ag-bg-banner-fix1 {
    background: url(../img/match/banner-LS24-bg-matchday.jpg);
}

.ag-banner-fixtures-details {
    padding: 0 0 0 10px;
}

.ag-banner-fixtures-details h1 {
    font-size: var(--ag-font-20);
    color: var(--white);
    font-weight: bold;
    margin: 0;
    max-width: 320px;
}

.ag-banner-fixtures-details h2 {
    font-size: var(--ag-font-12);
    color: var(--white);
}

.ag-box-fixtures-box {
    position: none;
    margin-top: 0px;
    margin-right: 20px;
}


/* Sub-page */

.ag-title-sub2 {
    padding: 20px 16px 10px 0;
    align-items: center;
    border-bottom: 1px solid var(--dark-grey2);
    background: rgb(0, 0, 0);
    background: linear-gradient( 90deg, rgba(0, 0, 0, 0.20214023109243695) 0%, rgba(0, 0, 0, 0.1993391106442577) 100%);
}

.ag-title-sub2 h3 {
    font-size: var(--ag-font-14);
    margin: 0;
    padding: 0;
    color: var(--light);
}

.ag-title-sub2 h1 {
    font-size: var(--ag-font-20);
    color: var(--light);
}


/* =============================================================================
Match Details
========================================================================== */

.ag-fix-league-wrp {
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: top center !important;
}


/* Background-here */

.ag-bg-league-msl-1 {
    background: url(../img/match/banner-LS24-bg.jpg);
}

.ag-video-wrp-feed {
    width: 560px !important;
    height: 260px !important;
    display: block;
    background-color: var(--dark-grey2);
    /*margin: 50px auto;*/
}

.ag-wrp-video-auto {
    width: 470px !important;
    height: 260px !important;
}

.ag-match-home-player {
    background-color: var(--bg-gradient-yellow) !important;
    width: 100%;
}

.ag-match-home-player img {
    width: 130px;
    height: 180px;
}

.ag-match-away-player {
    background-color: var(--bg-gradient-green) !important;
    width: 100%;
}

.ag-match-away-player img {
    width: 130px;
    height: 180px;
}

.ag-wrp-fixture-match-1 {
    margin: 20px auto;
    border-radius: 8px;
    padding: 0 !important;
    background-color: var(--dark-grey2);
    max-width: 820px !important;
}

.ag-wrp-fixture-match-1 h4 {
    font-size: var(--ag-font-12);
    color: var(--dark-grey);
    text-align: center;
    padding: 10px 0 0 0;
}

.ag-fixture-match-details {
    min-width: 120px !important;
    min-height: 80px;
    margin: 0 auto !important;
    text-align: center;
    border-left: 1px solid var(--dark-grey);
    border-right: 1px solid var(--dark-grey);
    background-color: var(--dark-grey3);
}

.ag-fixture-match-details h1 {
    font-size: var(--ag-font-28);
    font-weight: bold;
    color: var(--light);
    padding: 10px 0 0px 0;
    text-align: center;
}

.ag-fixture-match-details h2 {
    font-size: var(--ag-font-14);
    color: var(--light);
}

.ag-fixture-match-home-details,
.ag-fixture-match-away-details {
    min-height: 50px;
}

.ag-fixture-match-home-details h1 {
    font-size: var(--ag-font-14);
    text-align: right;
    color: var(--light);
    font-weight: bold;
}

.ag-fixture-match-home-details span {
    font-size: var(--ag-font-14);
    color: var(--orange);
    padding: 10px;
}

.ag-fixture-match-away-details h1 {
    font-size: var(--ag-font-14);
    text-align: left;
    color: var(--light);
    font-weight: bold;
}

.ag-fixture-match-away-details span {
    font-size: var(--ag-font-14);
    color: var(--orange);
    padding: 10px;
}

.ag-sub-title-fixture {
    width: 150px !important;
    display: block;
}


/* Match Box */

.ag-fixture-match-details-list {
    border-top: 1px solid var(--dark-grey3);
    border-bottom: 1px solid var(--dark-grey3);
    color: var(--light);
    font-size: var(--ag-font-12);
    background-color: var(--dark-grey2);
    width: 99%;
}

.ag-fixture-match-details-list h5 {
    font-size: var(--ag-font-12);
    padding: 0 0 0 10px;
    margin: 0;
}

.ag-border-top {
    border-top: 1px solid var(--dark-grey);
}

.ag-fix-score-home {
    text-align: right !important;
    padding: 10px 20px 10px 20px;
    border-right: 1px dashed var(--dark-grey);
    color: var(--light);
}

.ag-fix-score-home a,
.ag-fix-score-away a {
    text-decoration: none;
    color: var(--dark-grey) !important;
}

.ag-fix-score-home a:hover,
.ag-fix-score-away a:hover {
    color: var(--orange2) !important;
    background-color: var(--dark-grey3);
}

.ag-fix-score-home a span:hover,
.ag-fix-score-away a span:hover {
    color: var(--orange2) !important;
}

.ag-fix-score-home h3 {
    font-size: var(--ag-font-14);
    text-align: right !important;
    margin: 0 !important;
    color: var(--light) !important;
    padding: 5px 0 0 10px;
}

.ag-fix-score-away {
    text-align: left !important;
    padding: 10px 20px 10px 20px;
    color: var(--light);
}

.ag-fix-score-away h3 {
    font-size: var(--ag-font-14);
    text-align: left !important;
    margin: 0 !important;
    color: var(--light) !important;
    padding: 5px 0 0 10px;
}

.ag-table-fix2 {
    --bs-table-bg: var(--dark-grey2) !important;
    --bs-table-striped-bg: var(--dark-grey) !important;
    --bs-table-striped-color: var(--light) !important;
    --bs-table-active-bg: var(--dark-grey3) !important;
    --bs-table-active-color: var(--orange) !important;
    --bs-table-hover-bg: var(--dark-grey3) !important;
    --bs-table-hover-color: var(--light) !important;
    border-color: var(--dark-grey3) !important;
    cursor: pointer;
    font-size: var(--ag-font-12);
    color: var(--light) !important;
}

.ag-title-bg-standings th {
    background-color: var(--dark-grey3) !important;
    border-bottom: 1px solid var(--dark-grey2) !important;
}

.ag-table-fix2.table> :not(caption)>*>* {
    padding: 6px !important;
}

.ag-viewmore-standings {
    display: block;
    padding: 4px 0;
    margin: 0;
    color: var(--light);
    background-color: var(--dark-grey3);
    text-align: center;
    font-size: var(--ag-font-12);
    text-decoration: none;
}

.ag-viewmore-standings:hover {
    color: var(--orange);
    transition: all 0.7s ease;
}

.ag-wrp-timeline-fixtures {
    max-width: 820px;
    margin: 0 auto;
    border: 1px solid var(--dark-grey2) !important;
}

.ag-wrp-timeline-refresh {
    display: block;
    background-color: var(--dark-grey);
    padding: 10px;
}

.ag-wrp-timeline-refresh-box {
    color: var(--light);
    font-size: var(--ag-font-14);
    padding: 0 0 0 10px;
    border-bottom: 1px solid var(--dark-grey2) !important;
}

.ag-wrp-timeline-view {
    background-color: var(--dark-grey3);
}

.ag-wrp-timeline-club-view {
    display: block;
    padding: 6px;
    border-right: 1px solid var(--dark-grey);
}

.ag-wrp-timeline-club-view span {
    margin: 5px 0;
}

.ag-wrp-timeline-stats-view {
    padding: 10px 2px;
    border-left: 1px solid var(--dark-grey);
}

.timeline-min {
    position: relative;
    height: 1px;
    width: 100% !important;
    background: var(--dark-grey);
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.time-fixture {
    cursor: pointer;
}

.ag-time-score-home {
    position: absolute !important;
    top: -46px !important;
    z-index: 2;
}

.ag-time-score-away {
    position: absolute !important;
    top: 24px !important;
    z-index: 2;
}

.ag-time-centre {
    position: absolute !important;
    top: -56px !important;
    text-align: center !important;
    color: var(--red2);
    font-size: var(--ag-font-12);
    z-index: 1;
    width: 30px;
    font-weight: bold;
    background-color: var(--dark-grey2);
    height: 113px !important;
}

.ag-time-centre-info {
    position: absolute !important;
    bottom: -23px !important;
    color: var(--light);
    font-size: var(--ag-font-14);
    font-weight: bold;
    padding-left: 5px;
    z-index: 2;
}

.ag-time-centre-info-home {
    position: absolute !important;
    bottom: 0 !important;
    color: var(--light);
    font-size: var(--ag-font-14);
    font-weight: bold;
    padding-left: 5px;
    z-index: 2;
}

.ag-goal-popup {
    line-height: 10px;
    color: var(--dark-grey);
}

.ag-text-lineup {
    font-size: var(--ag-font-14) !important;
    display: -webkit-box;
    text-align: center !important;
    overflow: hidden !important;
    height: 40px;
    max-width: 240px;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
}

.ag-view-text-competition2 {
    font-size: var(--ag-font-14);
    font-weight: bold;
    text-align: right;
}

.ag-fix-flag-profile {
    margin: 6px 0 6px 10px;
}

.ag-fix-flag-profile2 {
    margin: 6px 10px 6px 0;
}

.caption-stats-info {
    color: var(--light);
    font-weight: bold;
    font-size: var(--ag-font-14);
}

.btn-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
}

#carousel-main-banner {
    /* margin-right: 12px; */
}


/* =============================================================================
Setting Profile
========================================================================== */

#ag-setting-page {
    width: 100%;
    height: 100vh;
    background-color: var(--dark-grey2);
}

.ag-main-content2 {
    height: 100vh;
    position: relative;
    background-color: var(--dark);
    overflow: hidden;
}

.wrp-scroll-edit {
    overflow-y: scroll !important;
    height: 100vh;
    padding: 20px 20px 30px 10px;
}

.ag-menu-side-setting {
    overflow-y: scroll;
    height: 100vh;
    padding: 20px 10px 20px 0;
}

.ag-menu-container {
    padding: 50px 24% 10px 20px;
    width: 100%;
    background-color: var(--dark-grey2);
}

.ag-menu-container2 {
    padding: 0 24% 30px 10px;
    width: 100%;
    background-color: var(--dark-grey2);
}

.ag-menu-container3 {
    padding: 0 24% 30px 10px;
    max-width: 70%;
    background-color: var(--dark-grey2);
}

.ag-menu-container h4,
.ag-menu-container2 h4,
.ag-menu-container3 h4 {
    font-size: var(--ag-font-14);
    margin: 0;
    color: var(--light);
    font-weight: bold;
}

.ag-menu-container h5,
.ag-menu-container2 h5,
.ag-menu-container3 h5 {
    font-size: var(--ag-font-14);
    color: var(--dark-grey);
}

.ag-title-sub {
    /*border-bottom: 1px solid var(--dark-grey2);*/
}

.ag-title-sub a {
    text-align: none !important;
}

.ag-title-sub h1 {
    font-size: var(--ag-font-28);
    color: var(--light);
    font-weight: 700;
}

.ag-title-sub-profile {
    border-bottom: 1px solid var(--dark-grey2);
    align-items: center;
}

.ag-title-sub-profile a {
    text-align: none !important;
}

.ag-title-sub-profile h1 {
    font-size: var(--ag-font-28);
    color: var(--light);
    align-self: center !important;
}

.ag-title-sub-profile h2 {
    font-size: var(--ag-font-18);
    font-weight: bold;
    color: var(--light);
    align-self: center !important;
}

.side-menu-setting {
    padding: 0;
    transition: all 0.3s ease;
    width: 200px;
    float: right;
}

.side-menu-setting li {
    display: block;
    text-align: right;
}

.side-menu-setting li a {
    text-align: right !important;
}

.side-menu-setting a {
    display: block;
    align-items: center;
    font-size: var(--ag-font-14);
    color: var(--light);
    padding: 6px;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-decoration: none;
}

.side-menu-setting>li>a:hover,
.side-menu-setting>li>span {
    background: var(--dark-grey3);
    color: var(--orange);
    transition: all 0.3s ease;
}

.side-menu-setting>li>a:hover>span {
    color: var(--orange);
}

.side-menu-setting>li>a.active .icon-right {
    transform: rotateZ(90deg);
}

.side-menu-setting>li>a.active,
.side-menu-setting>li>a.active span,
.side-menu-setting>li>a.active:hover {
    background: var(--dark-grey3);
    color: var(--orange);
    text-decoration: none;
}

.ag-setting-profile-wrp-box {
    width: 100%;
    background-color: var(--orange);
    margin: 20px 0;
    padding: 18px;
    border-radius: 8px;
}

.ag-profile-info4 {
    display: block;
    color: var(--white);
}

.ag-profile-info4 h1 {
    font-size: var(--ag-font-28);
    font-weight: bold;
}

.ag-profile-info4 h2 {
    font-size: var(--ag-font-12);
    color: var(--light);
}

.ag-profile-info4 h4 {
    font-size: var(--ag-font-12);
    margin: 2px;
}

.btn-setting-orange {
    background-color: var(--orange) !important;
    display: block;
    width: 100%;
    color: var(--light) !important;
    font-size: var(--ag-font-14) !important;
    border: 1px solid var(--dark-grey2) !important;
}

.btn-setting-orange:hover,
.btn-setting-orange.active {
    background-color: var(--dark-grey) !important;
    transition: all 0.5s ease;
}

.ag-club-icon-drop {
    border-left: 1px solid var(--dark-grey3);
}

.ag-icon14 {
    min-width: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--light);
    border: 1px solid var(--dark-grey3);
    border-radius: 20px;
    width: 23px !important;
    padding: 5px !important;
    height: 28px;
    font-size: 16px !important;
    background: rgba(0, 0, 0, 0.24) !important;
    text-decoration: none !important;
}

.ag-icon14:hover {
    color: var(--orange) !important;
    transition: all 0.3s ease;
}

.collapse-fix1 h3 {
    font-size: var(--ag-font-12);
}

.btn-fixture-details4 {
    background-color: var(--dark-grey2) !important;
    align-self: center;
    display: flex;
    color: var(--light) !important;
    height: 36px;
    font-size: var(--ag-font-12) !important;
    border: 1px solid var(--dark) !important;
}

.btn-fixture-details4:hover,
.btn-fixture-details4.active {
    background-color: var(--orange) !important;
    transition: all 0.5s ease;
}

.ag-beta-testing {
    position: fixed;
    z-index: 999;
    width: 100%;
    display: block;
    background-color: var(--red2);
    color: var(--white);
    padding: 6px 0;
    text-align: center;
    font-size: var(--ag-font-12);
}


/* =============================================================================
Login Page
========================================================================== */

.ag-login-wrp {
    height: 100%;
    display: flex;
    position: relative;
    align-items: center;
}

.ag-login-wrp-info {
    background-color: var(--dark);
}

.ag-left-login-wrp {
    flex-grow: 0;
    max-width: 30%;
    flex-basis: 30%;
    height: 100%;
}

.ag-bg-login1 {
    /*background: url(../img/ads/agilemas-login-left.jpg);*/
    background: url(/assets/img/main-product/main_banner_bg-lms1.jpg);
    background-position: center;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.brand-login {
    position: absolute;
    top: 0;
    padding: 20px 0;
    left: 0;
    font-size: var(--ag-font-20);
    font-weight: bold;
    color: var(--white);
}

.ag-left-login-text {
    position: relative;
    top: 40%;
    padding: 0 60px 0 60px;
}

.ag-left-login-text h2 {
    font-size: var(--ag-font-28);
    color: var(--white);
}

.ag-left-login-text p {
    font-size: var(--ag-font-14);
    color: var(--white);
}

.foot-login-copy {
    position: absolute;
    bottom: 0;
    font-size: var(--ag-font-12);
    color: var(--white);
    padding: 0 0 20px 20px;
}


/*--- Right---*/

.ag-right-login-wrp {}

.ag-wrp-mode-login {
    padding: 0;
}

.ag-login-signup-wrp {
    padding: 0 0;
}

.ag-login-signup {
    color: var(--light);
    font-size: var(--ag-font-14);
}

.tab-login-content-fix {
    height: 100%;
    background-color: var(--dark-grey2) !important;
    border-radius: 5px;
}

.wrp-input-showhide {
    padding: 12px 10px 2px 10px;
    color: var(--dark);
    display: block;
}

.ag-login-details {
    padding-top: 20px;
    color: var(--light);
}

.ag-login-details2 {
    padding-top: 20px;
}

.ag-login-details h1 {
    font-size: var(--ag-font-28);
}

.ag-login-details2 h1 {
    font-size: var(--ag-font-28);
    color: var(--light);
}

.ag-login-details h4 {
    font-size: var(--ag-font-14);
}

.nav-main-login .nav-link {
    color: var(--light) !important;
    font-size: var(--ag-font-14);
}

.nav-main-login .nav-link:disabled {
    color: var(--light) !important;
    background-color: var(--dark-grey) !important;
}

.label-form-fix {
    color: var(--dark-grey);
    font-size: var(--ag-font-14);
}

.label-form-fix2 {
    color: var(--dark-grey);
    font-size: var(--ag-font-12);
    text-decoration: none;
    display: block;
    text-align: right !important;
}

.label-form-fix2:hover {
    color: var(--orange);
}

.btn-login {
    background-color: var(--orange) !important;
    color: var(--white) !important;
    margin: 10px 0 !important;
}

.btn-FB {
    background-color: #094983 !important;
    color: var(--white) !important;
    font-size: var(--ag-font-14) !important;
}

.btn-FB i,
.btn-GM i {
    padding-right: 10px;
}

.btn-GM {
    background-color: var(--dark-grey) !important;
    color: var(--white) !important;
    font-size: var(--ag-font-14) !important;
}

.ag-qr-login-wrp {
    width: 200px;
    padding: 20px;
    border: 1px solid var(--dark-grey) !important;
}

.over-qr-refresh {
    position: absolute;
    background-color: rgba(240, 240, 240, 0.805);
    ;
    width: 154px;
    height: 154px;
}

.over-qr-refresh p {
    font-size: var(--ag-font-14);
    text-align: center;
    padding-top: 40px;
    margin: 0 0 10px 0;
    line-height: 18px;
    color: var(--black);
}

.over-qr-refresh a {
    border-radius: 0 !important;
}


/* =============================================================================
Profile Page
========================================================================== */

.ag-width-thumb-icon6 {
    width: 70px !important;
    height: 70px !important;
    display: flex !important;
}

.alert-fix {
    padding: 10px !important;
    margin-top: 10px;
    margin-bottom: 10px !important;
    font-size: var(--ag-font-14);
    color: var(--white);
}

.close-fix {
    background-color: var(--orange) !important;
    padding: 4px 14px;
    border: 1px solid var(--orange);
    border-radius: 6px !important;
    color: var(--white);
}

.close-fix:hover {
    background-color: var(--orange2) !important;
}

.ag-profile-agilemas {
    background-color: var(--dark-grey2);
    color: var(--light);
    height: 235px;
    margin: 10px;
    border-radius: 20px;
}

.ag-profile-agilemas2 {
    background-color: var(--dark-grey2);
    color: var(--light);
    height: 200px;
}

.ag-profile-picture-wrp {
    width: 200px;
    display: block;
}

.ag-profile-picture-wrp2 {
    width: 200px;
    display: block;
    height: 200px;
    margin: 0 auto;
    border-right: 1px solid var(--dark-grey3);
}

.ag-profile-picture-wrp2 img {
    height: 200px;
    padding: 0 0 0 20px;
}

.ag-profile-info,
.ag-profile-info2 {
    display: block;
    padding: 14px;
    min-height: 146px;
}

.ag-profile-info.border-right-profile,
.ag-profile-info3.border-right-profile {
    border-right: 1px solid var(--dark-grey3) !important;
}

.ag-profile-info h1,
.ag-profile-info2 h1 {
    font-size: var(--ag-font-20);
    font-weight: bold;
}

.ag-profile-info h2,
.ag-profile-info2 h2 {
    font-size: var(--ag-font-14);
    color: var(--light);
    margin: 2px;
}

.ag-profile-info h3 {
    font-size: var(--ag-font-12);
}

.ag-profile-info h4,
.ag-profile-info3 h4 {
    font-size: var(--ag-font-12);
    color: var(--dark-grey);
    margin: 2px;
    text-shadow: 1px 1px 2px var(--black);
}

.ag-profile-info3 {
    display: block;
    padding: 14px;
    min-height: 200px;
}

.ag-profile-info3 h1 {
    font-size: var(--ag-font-28);
    font-weight: bold;
}

.ag-profile-info3 h2 {
    font-size: var(--ag-font-12);
    color: var(--light);
}

.ag-profile-info3 h3 {
    font-size: var(--ag-font-18);
    padding-bottom: 10px;
}

.bg-profile-jhj {
    background: url(../img/card-thumb/johor_jewels_bg-card.jpg);
    height: 200px;
    width: 200px;
    background-size: cover !important;
}

.bg-profile-jdt {
    background: url(../img/card-thumb/jdt_fc-bg-card.jpg);
    background-size: cover !important;
}

.bg-profile-selfc {
    background: url(../img/card-thumb/selangor_fc-card.jpg);
    height: 200px;
    width: 200px;
    background-size: cover !important;
}

.bg-profile-selfc2 {
    background: url(../img/card-thumb/selangor_fc-card2.jpg);
    background-size: cover !important;
}

.bg-profile-kdafc2 {
    background: url(../img/card-thumb/kedah_fc-card2.jpg);
    background-size: cover !important;
}

.bg-profile-klcity2 {
    background: url(../img/card-thumb/klcity_fc_football_card2.jpg);
    background-size: cover !important;
}

.bg-profile-sripahang2 {
    background: url(../img/card-thumb/sripahang_fc-card2.jpg);
    background-size: cover !important;
}

.ag-profile-club {
    color: var(--light);
    font-size: var(--ag-font-12);
    align-items: center !important;
    width: 100%;
    padding: 6px 6px 0 16px;
    border-top: 1px solid var(--dark-grey3);
}

.ag-profile-club span {
    margin: 0 4px;
    align-items: center !important;
    display: flex;
}

.ag-profile-club span a {
    text-decoration: none;
    color: var(--light);
}

.ag-profile-club-mobile {
    color: var(--light);
    font-size: var(--ag-font-12);
    align-items: center !important;
    width: 310px;
    padding: 16px 0px 16px 16px;
    border-top: 1px solid var(--dark-grey3);
}

.ag-profile-club-mobile a {
    display: inline-block;
    width: 100%;
}

.ag-icon-socmed {
    display: block;
    padding: 8px;
    text-align: center;
    color: var(--light);
    align-self: center !important;
}

.ag-icon-socmed:hover {
    color: var(--orange);
}

.ag-card-fix7 {
    width: 142px !important;
    text-decoration: none !important;
    padding: 20px;
    display: block !important;
    border: 1px solid var(--dark-grey3);
}

.ag-width-thumb-icon7 {
    width: 100px !important;
    height: 100px !important;
    display: flex !important;
}

.ag-profile-name-text {
    margin: 0;
    padding: 10px 0 0 0;
    text-align: center;
    color: var(--light);
    font-size: var(--ag-font-14);
    font-weight: bold;
}

.border-right-booking {
    border-right: 1px solid var(--dark-grey) !important;
}

.ag-facilities-details {
    padding: 0 0 0 10px !important;
    background-color: var(--dark-grey2);
    text-align: center !important;
    border-radius: 10px 10px 0px 0px;
}

.ag-facilities-details h1 {
    font-size: var(--ag-font-12);
    padding: 10px 0 0 0;
    margin: 0;
    color: var(--light);
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100px;
    display: -webkit-box;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
}

.ag-facilities-info-wrp {
    padding: 10px 18px;
    text-align: left;
    height: 90px;
    border-bottom: 1px solid var(--dark-grey);
}

.ag-facilities-info2-wrp {
    padding: 0 0 0 14px;
    text-align: center;
    height: 46px;
    align-items: center;
}

.ag-fac-info2-text1 {
    font-size: var(--ag-font-12);
    color: var(--dark-grey);
    padding-top: 8px;
}

.ag-fac-info2-text2 {
    font-size: var(--ag-font-14);
    font-weight: bold;
}

.ag-facilities-info-wrp h3 {
    font-size: var(--ag-font-18);
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100%;
    display: -webkit-box;
    height: 40px !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
}

.ag-facilities-info-wrp h4 {
    font-size: var(--ag-font-12);
    color: var(--dark-grey);
}

.ag-width-thumb-icon8 {
    width: 80px;
    margin: 10px 20px 0 10px;
}

.ag-width-thumb-icon8 h1 {
    font-size: var(--ag-font-12);
    padding: 10px 0 10px 0;
    margin: 0;
    color: var(--light);
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box;
    width: 100%;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
}

.ag-facilities-text {
    font-size: var(--ag-font-12);
    font-weight: bold !important;
    margin-bottom: 14px;
}

.ag-icon-club2 {
    width: 42px;
    height: 42px;
    border-radius: 20px;
    position: absolute;
    z-index: 3;
    display: block;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px;
    margin: 0 0 10px 10px;
}

.ag-width-thumb-icon9 {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
}

.ag-width-thumb-icon10 {
    /*--width: 90px;--*/
    height: 130px;
}

.ag-width-thumb-icon10 h5,
.ag-width-thumb-icon13 h5 {
    font-size: var(--ag-font-14);
    color: var(--white);
    padding: 5px 0 5px 0;
    margin: 0;
}

.ag-width-thumb-icon10 img {
    height: 130px;
}

.ag-width-thumb-icon13 img {
    height: 110px;
}

.ag-width-thumb-icon11 {
    width: 60px;
    border-radius: 40px;
    border: 1px solid var(--dark-grey);
}

.ag-width-thumb-icon11 img {
    padding: 5px !important;
}

.ag-width-thumb-profile {
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
}

.ag-width-thumb-icon12 {
    width: 70px;
    height: 70px;
    align-items: center !important;
}

.ag-width-thumb-icon12 img {
    padding: 4px 10px 10px 10px !important;
}

.bg-fuel h3 {
    font-size: var(--ag-font-18);
}

.bg-fuel h3 b {
    font-size: var(--ag-font-28) !important;
}

.bg-fuel h2 {
    font-size: var(--ag-font-18);
}

.ag-link-more {
    text-decoration: none;
    color: var(--light);
}

.ag-link-more:hover {
    color: var(--orange);
}

.ag-wrp-payment {
    padding: 4px 0 10px 0;
    border-bottom: 1px solid var(--dark-grey);
}

.ag-wrp-payment a {
    text-decoration: none;
    color: var(--dark-grey) !important;
}

.ag-wrp-payment a:hover {
    color: var(--orange) !important;
}

.ag-wrp-payment h4 {
    font-size: var(--ag-font-14);
    color: var(--dark-grey) !important;
}

.ag-wrp-payment h4.active {
    color: var(--light) !important;
}

.ag-card-fix9 {
    height: 54px !important;
    width: 100%;
    display: block;
    margin: 6px 0;
    cursor: pointer;
    text-decoration: none !important;
    display: block !important;
    justify-content: center;
}

.ag-card-fix11 {
    height: 40px !important;
    width: 100%;
    display: block;
    margin: 6px 0;
    cursor: pointer;
    text-decoration: none !important;
    display: block !important;
    justify-content: center;
}

.ag-pop-details h5 {
    font-size: var(--ag-font-12);
    color: var(--white);
}

.ag-card-fix10 {
    height: 180px !important;
    width: 142px !important;
    text-decoration: none !important;
    padding: 20px;
    margin: 5px;
    display: block !important;
    border: 1px solid var(--dark-grey3);
}

.ag-width-thumb-icon10 {
    width: 100px !important;
    height: 100px !important;
    display: flex !important;
}


/* =============================================================================
Tagged Page
========================================================================== */

.ag-wrp-tag-badge4 {
    text-align: left;
    padding: 10px 0 6px 0;
}

.ag-wrp-tag-badge4 h3 {
    font-size: var(--ag-font-12);
    padding: 4px 0 0 0;
    color: var(--light);
}

.ag-wrp-tag-badge4 a {
    text-decoration: none !important;
    border-radius: 20px !important;
    font-size: var(--ag-font-14);
    margin: 0 4px;
    color: var(--light);
    cursor: pointer;
    padding: 8px 10px;
    background-color: var(--dark-grey) !important;
}

.ag-wrp-tag-badge4 a:hover,
.ag-wrp-tag-badge5 a:hover {
    color: var(--light);
    cursor: pointer;
    background-color: var(--dark-grey2) !important;
    transition: all 0.5s ease;
}

.ag-wrp-tag-badge5 {
    text-align: left;
}

.ag-wrp-tag-badge5 a {
    text-decoration: none !important;
    border-radius: 20px !important;
    font-size: var(--ag-font-14);
    color: var(--light);
    cursor: pointer;
    padding: 8px 10px;
    background-color: var(--dark-grey) !important;
}

.ag-icon15 {
    min-width: 28px;
    justify-content: center;
    align-items: center;
    color: var(--light);
    border-radius: 20px;
    width: 23px !important;
    padding: 0 5px !important;
    height: 28px;
    font-size: var(--ag-font-14) !important;
    background: rgba(0, 0, 0, 0.24) !important;
    text-decoration: none !important;
}

.ag-icon15:hover {
    color: var(--orange) !important;
    transition: all 0.3s ease;
}

.tagify {
    border-color: var(--dark-grey3) !important;
    padding: 2px 0 !important;
    width: 100% !important;
    --tag-bg: var(--dark-grey2) !important;
    --tag-text-color: var(--light) !important;
    --tag-remove-btn-color: var(--light) !important;
    --tag-hover: var(--orange) !important;
    --tag-remove-btn-bg--hover: #ff0000 !important;
    --placeholder-color-focus: var(--light) !important;
    text-align: left !important;
}

:root {
    --tagify-dd-bg-color: var(--dark-grey) !important;
    --tagify-dd-color-primary: var(--dark-grey2) !important;
}

.tags-look {
    color: var(--black2) !important;
    font-weight: bold;
}

.tags-look .tagify__dropdown__item {
    display: inline-block;
    border-radius: 3px;
    padding: 0.3em 0.5em;
    border: 1px solid var(--dark-grey3) !important;
    background-color: var(--dark-grey3) !important;
    margin: 0.2em;
    font-size: var(--ag-font-12);
    color: var(--light) !important;
    transition: 0s;
}

.tags-look .tagify__dropdown__item--active {
    color: var(--light) !important;
}

.tags-look .tagify__dropdown__item:hover {
    background-color: var(--dark-grey2) !important;
    border: 1px solid var(--dark-grey3) !important;
    color: var(--light) !important;
}

.tagify__dropdown__foot {
    color: var(--light) !important;
}

.tagify.form-control {
    background-color: var(--dark-grey3) !important;
}

.tagify__input {
    margin: 10px 0 18px 5px !important;
}

.ag-icon-club3 {
    width: 30px !important;
    height: 30px !important;
    border-radius: 20px;
    display: block;
    justify-content: center !important;
    align-items: center !important;
    padding: 2px;
    border: 1px solid var(--dark-grey);
}


/*--- Table---*/

.ag-table-fix4 {
    --bs-table-bg: var(--dark-grey2) !important;
    --bs-table-striped-bg: var(--dark-grey) !important;
    --bs-table-striped-color: var(--light) !important;
    --bs-table-active-bg: var(--dark-grey3) !important;
    --bs-table-active-color: var(--orange) !important;
    --bs-table-hover-bg: var(--dark-grey3) !important;
    --bs-table-hover-color: var(--light) !important;
    color: var(--light) !important;
    border-color: var(--dark-grey3) !important;
    font-size: var(--ag-font-12);
    font-weight: normal;
    cursor: pointer;
    margin: 0 !important;
}

.ag-icon-table {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    border: 1px solid var(--dark-grey3);
    border-radius: 20px;
    width: 26px;
    height: 26px;
    padding: 5px !important;
    font-size: 12px !important;
    margin-top: 4px;
    text-decoration: none !important;
}

.ag-list-table-form {
    max-width: 170px;
    float: right;
}

.ag-list-table-form ul {
    display: flex;
    padding: 0 !important;
    margin: 0 !important;
}

.ag-list-table-form li {
    display: inline-block;
    text-align: center;
}

#ag-text-show {
    display: none;
}

#ag-text-show:target {
    display: block;
}

#ag-text-show+div.ag-view-controls {
    list-style-type: none;
}

#ag-text-show+div.ag-view-controls .hide,
#ag-text-show:target+div.ag-view-controls .show {
    display: none;
}

#ag-text-show:target+div.ag-view-controls .hide,
#tag-text-show+div.ag-view-controls .show {
    display: inline-block;
}

.ag-icon-club2 {
    width: 42px;
    height: 42px;
    border-radius: 20px;
    position: absolute;
    z-index: 3;
    display: block;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px;
    margin: 0 0 10px 10px;
}


/*--- Team of the week---*/

.ag-wrp-team-title {
    padding-top: 6px;
    border-top: 1px solid var(--dark-grey2);
}

.ag-box-field-wrp {
    background: url(../img/gfx-add/football-field.jpg);
    background-repeat: no-repeat;
    background-color: #0f6d39;
    background-position: center top;
    height: 600px;
    width: 100%;
}

.ag-box-formation {
    position: absolute;
    padding: 4px 0 0 10px;
    font-size: var(--ag-font-14);
    color: var(--white);
}

.ag-team-week-wrp {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.ag-team-week-wrp h1 {
    font-size: var(--ag-font-14);
    color: var(--light);
    min-width: 120px;
}

.ag-list-totw-player-wrp {
    min-height: 100px;
}

.ag-nav-top-player {
    position: absolute;
    padding: 10px 0 0 0;
}

.ag-nav-top-player ul li a.page-link {
    background-color: var(--dark-grey2) !important;
    color: var(--light);
    border: 1px solid var(--dark-grey3);
    border-radius: 0 !important;
}

.ag-nav-top-player ul li a:hover {
    background-color: var(--dark-grey);
}

.ag-nav-top-player ul .page-item.active .page-link,
.ag-nav-top-player ul .page-item .page-link:hover {
    background-color: var(--dark-grey3) !important;
    border: 1px solid var(--dark-grey3) !important;
}

.ag-nav-top-player ul li.page-item.disabled .page-link {
    border: 1px solid var(--dark-grey3) !important;
    background-color: var(--dark-grey2) !important;
    color: var(--dark-grey3);
}

.wrp-player-totw {
    width: 90px;
    margin: 0 10px;
    display: block;
}

.wrp-player-totw h4 {
    font-size: var(--ag-font-12);
    color: var(--black2);
    background-color: rgb(166, 255, 0);
    display: -webkit-box;
    text-align: center;
    padding: 4px 0;
    height: 19px;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
}

.ag-width-thumb-player {
    height: 150px;
    width: 150px;
}

.ag-player-team-info {
    display: flex;
    position: absolute;
    padding-top: 84px;
}

.ag-icon-club4 {
    width: 30px;
    height: 30px;
    border-radius: 20px;
    color: var(--white);
    display: block;
    justify-content: center !important;
    align-items: center !important;
    font-size: var(--ag-font-14);
    text-align: center;
    margin-left: 30px;
    padding: 2px;
    border: 1px solid var(--dark-grey);
}

.ag-wrp-thumb-catagories6 {
    width: 100%;
    height: 130px !important;
}

.ag-filter-sub4 {
    align-items: center !important;
}

.ag-filter-sub4 h5 {
    font-size: var(--ag-font-20);
}


/* =============================================================================
Player Details
========================================================================== */

.ag-link-menu-nav {
    border: 1px solid var(--dark-grey2);
    display: block;
    padding: 6px 4px;
    margin: 10px 0px;
}

.ag-link-menu-nav.active,
.ag-link-menu-nav.active h1,
.ag-link-menu-nav.active select {
    background-color: var(--dark-grey3);
    color: var(--dark-grey2) !important;
}

.ag-link-menu-nav:hover {
    background-color: var(--dark-grey3);
    cursor: pointer;
}

.ag-profile-stats {
    padding: 0 0 20px 0;
}

#myChart {
    margin: 10px auto;
}

.ag-chart-radar1 {
    padding: 10px;
    background-color: var(--dark-grey2);
    width: 100%;
}

.ag-chart-wrp {
    padding: 20px;
    background-color: var(--dark-grey2);
    width: 340px;
    height: 360px;
    margin-bottom: 20px;
    border-radius: 10px;
}

.wrp-fix-matches {
    padding-left: 0 !important;
}

.wrp-fix-matches h1,
.wrp-fix-compare h1 {
    font-size: var(--ag-font-14);
    color: var(--light);
}

.wrp-fix-matches h2 {
    color: var(--light);
    font-size: var(--ag-font-14) !important;
}


.wrp-fix-matches span {
    color: var(--light);
    font-size: var(--ag-font-12) !important;
}

.wrp-fix-matches .dropdown-menu span {
    color: var(--dark-grey2) !important;
    font-size: var(--ag-font-12) !important;
}

.wrp-fix-matches h2 .accordion-button {
    font-size: var(--ag-font-14) !important;
    padding: 10px;
    background-color: var(--dark-grey2);
    color: var(--light) !important;
}
.wrp-fix-matches-title .accordion-button {
    padding: 10px;
    background-color: var(--dark-grey2);
    color: var(--light) !important;
}

.wrp-fix-matches h2 .accordion-button:not(.collapsed) {
    color: var(--orange) !important;
    background-color: var(--dark-grey3);
}
.wrp-fix-matches-title .accordion-button:not(.collapsed) {
    color: var(--orange) !important;
    background-color: var(--dark-grey3) !important;
}

.wrp-fix-matches .accordion-body {
    padding: 10px !important;
}

.wrp-fix-matches .ag-text-stats-box {
    font-weight: bold;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

.ag-stats-filter-user {
    padding: 20px 0;
    margin-bottom: 20px;
    border-top: 1px solid var(--dark-grey2);
    border-bottom: 1px solid var(--dark-grey2);
}

.ag-stats-filter-user-mobile {
    padding: 20px;
    margin-bottom: 20px;
    border-top: 1px solid var(--dark-grey2);
    border-bottom: 1px solid var(--dark-grey2);
}

.ag-stats-filter-user h1 {
    font-size: var(--ag-font-14);
    color: var(--light);
    padding: 0 10px;
}

.ag-stats-filter-user-mobile h1 {
    font-size: var(--ag-font-14);
    color: var(--light);
}

.ag-league-box2 {
    padding: 10px 16px !important;
    display: block;
    border: 1px solid var(--dark-grey2) !important;
    text-align: center;
    cursor: pointer;
    background-color: var(--dark-grey2);
}

.ag-league-box2:hover,
.ag-league-box2:active {
    background-color: var(--dark-grey3);
}

.ag-league-box2 h1 {
    font-size: var(--ag-font-12);
    text-align: center;
    color: var(--dark-grey);
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 70px;
    display: -webkit-box;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
}

.ag-league-box2 h2 {
    font-size: var(--ag-font-12);
}

.ag-info-heatmap {
    font-size: var(--ag-font-12) !important;
    background-color: var(--dark-grey);
    display: flex;
    width: 90px;
    margin: 0 auto 6px auto;
}

.ag-player-heatmap {
    background-color: var(--dark-grey2);
    width: 100%;
    padding: 20px 0;
}

.ag-football-field {
    background-color: #006e39;
    width: 320px;
    height: 200px;
    margin: 0 auto;
}

.ag-heatmap-bg1 {
    background: url(../img/heatmap/bergson_HMap.jpg);
    background-size: contain;
}

.ag-icon-table2 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--light);
    border: 1px solid var(--dark-grey3);
    border-radius: 20px;
    width: 26px;
    height: 26px;
    padding: 5px !important;
    font-size: 12px !important;
    margin-top: 4px;
    text-decoration: none !important;
}


/*--- Accordian Stats---*/

.ag_acc_stats-wrp .accordion-item {
    background-color: var(--dark-grey2) !important;
    color: var(--light);
    padding: 0 !important;
    border: 1px solid var(--dark-grey3);
}

.ag-stats-box-info-wrp {
    font-size: var(--ag-font-14);
    display: block;
    background-color: var(--dark-grey3);
    padding: 5px;
    border: 1px solid var(--dark-grey2);
}

.ag-stats-box-info-wrp:hover {
    background-color: var(--dark-grey2);
    border: 1px solid var(--dark-grey3);
    transition: all 0.7s ease;
}

.ag-stats-box-info-wrp h3 {
    font-size: var(--ag-font-12);
    color: var(--dark-grey);
    text-decoration: dashed;
}

.ag-stats-box-info-wrp h4 {
    font-size: var(--ag-font-14);
}

.ag-stats-box-info-wrp h5 {
    font-size: var(--ag-font-12) !important;
}

.mobile-width-100 {
    width: 100%;
}

.btn-fixture-details3 {
    background-color: var(--dark-grey3) !important;
    align-self: center;
    display: flex;
    color: var(--light) !important;
    height: 36px;
    width: 50%;
    margin: 0 10px;
    font-size: var(--ag-font-12) !important;
    border: 1px solid var(--dark-grey2) !important;
}

.ag_acc_stats-wrp2 {
    padding-left: 0 !important;
}

.ag_acc_stats-wrp2 h1 {
    font-size: var(--ag-font-14);
    color: var(--light);
}

.ag_acc_stats-wrp2 h2 {
    color: var(--light);
    font-size: var(--ag-font-14) !important;
}

.ag_acc_stats-wrp2 h2 .accordion-button {
    font-size: var(--ag-font-14) !important;
    padding: 10px;
    background-color: var(--dark-grey2);
    color: var(--light) !important;
}

.ag_acc_stats-wrp2 h2 .accordion-button:not(.collapsed) {
    color: var(--orange) !important;
    background-color: var(--dark-grey3);
}

.ag_acc_stats-wrp2 .accordion-body {
    padding: 10px !important;
    background-color: var(--dark-grey2);
    color: var(--light) !important;
}

.ag_acc_stats-wrp2 .ag-text-stats-box {
    font-weight: bold;
}

.ag_acc_stats-wrp2 .accordion-item {
    border: 0;
}

.ag-matches-info-media {
    border: 1px solid var(--dark-grey3);
    background-color: var(--dark-grey3);
    padding: 6px;
}

.ag-matches-info-media:hover {
    background-color: var(--dark-grey2);
    transition: all 0.7s ease;
}

.ag-matches-info-media img {
    width: 180px;
}

.ag-text-media-title {
    font-size: var(--ag-font-14);
    color: var(--light);
    display: -webkit-box;
    text-align: left;
    padding: 0 0 20px 0;
    height: 42px;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
}

.ag-text-media-source {
    font-size: var(--ag-font-12);
    color: var(--dark-grey);
}

.ag-icon11 {
    min-width: 28px;
    position: absolute;
    left: 100px;
    margin: 36px 10px 0 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: right;
    cursor: pointer;
    color: var(--white) !important;
    border: 1px solid var(--dark-grey3);
    border-radius: 20px;
    width: 23px !important;
    padding: 5px !important;
    height: 28px;
    font-size: 16px !important;
    background: rgba(0, 0, 0, 0.24) !important;
    text-decoration: none !important;
}


/*--- Marketplace---*/

.ag-wrp-card-box-product-marketplace {
    border-radius: 20px;
}

.ag-wrp-thumb-catagories7:hover {
    transform: scale(1.05);
    transition: all 0.7s ease;
}

#timer,
#timer2 {
    display: inline-flex;
    font-size: var(--ag-font-18);
    text-align: right;
}

#timer3 {
    display: inline-flex;
    font-size: var(--ag-font-14);
    text-align: right;
    color: var(--white);
    padding: 10px 0 0 0;
}

#timer span,
#timer2 span {
    font-weight: normal;
    font-size: var(--ag-font-12);
}

.count-title {
    font-weight: normal !important;
    font-size: var(--ag-font-12);
    align-self: center;
}

.wrp-cont-agilemas a.video_click img {
    padding: 20px 0;
    display: block;
    align-items: center !important;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 300px;
}

.ag-wrp-thumb-catagories9 {
    background-color: var(--black);
    width: 100%;
    height: 131px !important;
    min-width: 230px !important;
    border: 1px solid var(--dark-grey2);
}

.ag-wrp-thumb-catagories9:hover {
    transform: scale(1.05);
    transition: all 0.7s ease;
}


/* ================ Carousel Dashboard Chart ======================== */

.details_box_dash-thumb2 {
    width: 410px;
    display: block;
    border-radius: 8px;
    text-decoration: none !important;
}

.details_box_dash-thumb2 h1 {
    font-size: var(--ag-font-18);
    color: var(--light);
    padding: 0 0 0 20px;
    margin: 0;
}

.details_box_dash-thumb2 h2 {
    font-size: var(--ag-font-10);
    color: var(--yellow2);
    padding: 20px 0 12px 20px;
    margin: 0;
}

#chart_dash,
#chart_dash2 {
    max-width: 410px;
    margin: 0 10px 10px 10px;
}

#chart_pie_dash {
    max-width: 410px !important;
    height: 355px !important;
    margin: 0 10px 10px 10px;
}

#chart_chartgoal_dash {
    max-width: 410px;
}


/* ================ Carousel Dashboard Details ======================== */

.details_box_dash {
    display: block;
    background-color: var(--dark-grey2);
    border-radius: 8px;
    border: 1px solid var(--dark-grey2);
}

.details_box_dash:hover,
.details_box_dash-thumb:hover {
    cursor: pointer;
    background-color: var(--dark-grey3);
    transition: all .5s ease;
}

.details_box_dash-thumb {
    width: 200px;
    display: block;
    border-radius: 8px;
    text-decoration: none !important;
}

.details_box_dash h1 {
    font-size: var(--ag-font-28);
    color: var(--light);
    padding: 10px;
    margin: 0;
}

.details_box_dash h2 {
    font-size: var(--ag-font-18);
    font-weight: 700;
    color: var(--light);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.details_box_dash h3 {
    font-size: var(--ag-font-10);
    color: var(--yellow2);
    margin-bottom: 0;
    padding: 14px 0 0 0;
}

.font-weight-light {
    font-weight: 300 !important;
}

.font-weight-lighter {
    font-weight: lighter !important;
}

.font-weight-normal {
    font-weight: 400 !important;
}

.font-weight-bold {
    font-weight: 600 !important;
}

.font-weight-bolder {
    font-weight: 700 !important;
}

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

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

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


/* =============================================================================
Marketplace
========================================================================== */

.ag-wrap-card-price {
    display: block;
    margin-left: 46px;
}

.ag-wrap-card-price h3 {
    font-size: var(--ag-font-12);
    padding: 6px 0px 0px 0;
    margin: 0;
    color: var(--dark-grey);
    text-align: left;
}

.ag-wrap-card-price h4 {
    font-size: var(--ag-font-20);
    padding: 0px 0 0 0;
    font-weight: bold;
    text-align: left;
}

.ag-wrp-thumb-catagories7:hover {
    transform: scale(1.05);
    transition: all 0.7s ease;
}

.ag-btn-fix-market1 {
    border-radius: 80px !important;
    color: var(--light) !important;
    text-decoration: none !important;
    border: 1px solid var(--dark-grey2) !important;
    height: 50px;
    width: 50px;
}

.ag-btn-fix-market1.active {
    background-color: var(--dark-grey);
}

.ag-btn-fix-market1 span {
    font-size: var(--ag-font-20) !important;
    width: 20px;
    height: 30px;
}

.ag-badge-fix-market {
    font-size: var(--ag-font-12) !important;
    padding: 0 4px;
    font-weight: bold;
    color: var(--white);
}

.ag-btn-fix-market1:hover {
    background-color: var(--dark-grey) !important;
    -webkit-transition: opacity .5s .25s ease-out;
    transition: opacity .5s .25s ease-out;
    transition: all .3s ease;
}

.wrp-market-item {
    color: var(--light);
}

.wrp-market-item h1 {
    font-size: var(--ag-font-20) !important;
    font-weight: bold;
    color: var(--light);
    margin: 0;
}

.wrp-market-item h2 {
    font-size: var(--ag-font-28);
    font-weight: bold;
    color: var(--light);
    margin: 0;
}

.wrp-market-item h3 {
    font-size: var(--ag-font-14);
    color: var(--light);
}

.ag-market-rating {
    color: var(--light);
    align-self: center;
    display: flex;
}

.ag-market-rating .checked {
    color: var(--orange);
}

.ag-details-market {
    font-size: var(--ag-font-14);
    color: var(--light);
    display: flex;
    align-self: center;
}

.ag-icon-market-share {
    justify-content: center;
    display: inline-flex;
    align-items: center;
    color: var(--white);
    border: 1px solid var(--dark-grey3);
    border-radius: 20px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.24) !important;
    text-decoration: none !important;
}

.ag-icon-market-share span {
    font-size: 16px;
}

.ag-icon-market-share:hover,
.ag-icon-market-share.active {
    color: var(--orange) !important;
    transition: all .3s ease;
}

.wrp-market-price-box {
    padding: 10px;
    background-color: var(--dark-grey2);
}

.ag-variation-market {
    font-size: var(--ag-font-14);
}

.ag-variation-market ul {
    margin: 0;
    padding: 0;
}

.ag-variation-market ul li {
    display: inline-block;
    color: var(--light);
    margin: 0 3px;
    cursor: pointer;
}

.ag-variation-market ul li button {
    background-color: var(--dark-grey3);
    color: var(--light);
}

.ag-variation-market ul li button:hover,
.ag-variation-market ul li button.active {
    background-color: var(--dark-grey);
    transition: all .3s ease;
}

.ag-variation-market ul li button.outofstock {
    color: var(--dark-grey2);
}

.ag-variation-market ul li button.outofstock:hover {
    background-color: var(--dark-grey3);
    transition: all .3s ease;
}

.ag-form-fix-input-market {
    border: 1px solid var(--dark-grey3) !important;
    background-color: var(--dark) !important;
    color: var(--light) !important;
    font-size: var(--ag-font-14);
}

.btn-delete-market {
    font-size: var(--ag-font-12) !important;
    display: flex;
    justify-content: center;
    text-decoration: none;
    align-items: center;
    padding: 12px 0;
    color: var(--white) !important;
    background: var(--red) !important;
    transition: all .3s ease;
    border-radius: 5px;
    font-weight: 600;
    margin-bottom: 12px;
}

#timer,
#timer2 {
    display: inline-flex;
    font-size: var(--ag-font-18);
    text-align: right;
}

#timer3 {
    display: inline-flex;
    font-size: var(--ag-font-14);
    text-align: right;
    color: var(--white);
    padding: 10px 0 0 0;
}

#timer span,
#timer2 span {
    font-weight: normal;
    font-size: var(--ag-font-12);
}

.count-title {
    font-weight: normal !important;
    font-size: var(--ag-font-12);
    align-self: center;
}

.ag-wrp-thumb-product-marketplace {
    width: 100%;
    min-height: 170px;
    object-fit: cover;
    height: 200px !important
}

.ag-wrp-thumb-product-marketplace:hover {
    transform: scale(1.05);
    transition: all 0.7s ease;
}


/* =============================================================================
Suunto
========================================================================== */


/* Background-here */

.ag-bg-suunto-sandrawoo-1 {
    background: url(../img/banner/bnnr-sandrawoo.jpg);
    height: 310px !important;
}

.ag-wrp-video-auto2 {
    width: 560px !important;
    height: 300px !important;
}

.ag-wrp-thumb-catagories9 {
    background-color: var(--black);
    width: 100%;
    height: 131px !important;
    min-width: 230px !important;
    border: 1px solid var(--dark-grey2);
}

.ag-wrp-thumb-catagories9:hover {
    transform: scale(1.05);
    transition: all 0.7s ease;
}

.ag-box-session h1 {
    font-size: var(--ag-font-14);
    color: var(--white);
    padding: 8px 0 0 10px;
}

.ag-box-session h2 {
    font-size: var(--ag-font-14);
    color: var(--white);
    padding: 0 0 0 10px;
    margin: 0;
    font-weight: bold;
}

.ag-box-session h3 {
    font-size: var(--ag-font-14);
    color: var(--white);
    padding: 2px 0 0 10px;
    margin: 0;
}

.ag-icon13 {
    min-width: 28px;
    display: flex;
    position: absolute;
    z-index: 3;
    right: 0;
    margin: 10px 10px 0 0;
    justify-content: center;
    align-items: center;
    color: var(--white);
    border: 1px solid var(--dark-grey3);
    border-radius: 20px;
    width: 23px !important;
    padding: 5px !important;
    height: 28px;
    background: rgba(0, 0, 0, 0.24) !important;
    text-decoration: none !important;
}

.ag-icon13 span {
    font-size: 16px;
}

.ag-icon13:hover,
.ag-icon13.active {
    color: var(--orange) !important;
    transition: all .3s ease;
}


/* =============================================================================
E-learning
========================================================================== */

.ag-view-text-competition3 {
    font-size: var(--ag-font-18);
    font-weight: bold;
    text-align: left;
}

.ag-bg-fitx-trainer1 {
    /* background: url(../img/banner/bnnr-fitmalaysiax_trainer1.jpg) no-repeat; */
    height: 400px !important;
}

.ag-bg-akk-event1 {
    background: url(../img/banner/bnnr-akk_event1.jpg) no-repeat;
    background-position: top center;
    background-size: cover;
    height: 400px !important;
}

.ag_event_details-wrp {
    padding: 20px;
    background-color: var(--dark-grey2);
}

.ag_event_details-wrp h1 {
    font-size: var(--ag-font-28);
    color: var(--light);
}

.ag_event_details-wrp p {
    font-size: var(--ag-font-14);
    color: var(--light);
}

.ag-view-text-competition3 {
    font-size: var(--ag-font-18);
    font-weight: bold;
    text-align: left;
}


/* ================ Create Profile ======================== */

.ag-profile-agilemas-dash {
    padding: 10px;
    background-color: var(--dark-grey2) !important;
}


/* ================ Create Profile ======================== */

.ag-profile-agilemas-dash {
    padding: 10px;
    background-color: var(--dark-grey2) !important;
}


/*-- Wrap Info Profile 1 --*/

.wrp-pic-bg-profile-dash {
    height: 200px;
}

.wrp-pic-bg-profile-dash img {
    height: 200px;
    margin: 0 auto !important;
}

.bg-profile-jdt2 {
    /* background: url(../../assets/img/card-thumb/mfl_jdt_card_bg.jpg); */
    background-size: cover !important;
}


/*-- Wrap Info Profile 2 --*/

.ag-profile-info-dash .badge {
    font-size: var(--ag-font-10);
    font-weight: normal;
}

.ag-profile-info-dash h1 {
    font-size: var(--ag-font-20);
    font-weight: bold;
}

.ag-profile-info-dash h3 {
    font-size: var(--ag-font-14);
    color: var(--light);
}

.ag-profile-info-dash h4 {
    font-size: var(--ag-font-12);
    color: var(--dark-grey);
    margin: 2px;
}

.ag-profile-border-right {
    border-right: 1px solid var(--dark-grey3) !important;
}

.ag-light-border-right {
    border-right: 1px solid var(--light) !important;
}

.wrp-infobox-dash {
    border: 1px solid var(--dark-grey3);
    padding: 6px 6px;
    margin-right: 4px;
}

.wrp-infobox-dash h1 {
    font-size: var(--ag-font-20);
    text-align: center;
    font-weight: bold;
    padding-top: 10px;
    height: 34px;
}

.ag-icon-socmed-dash {
    display: block;
    padding: 6px;
    padding: 3px;
    text-align: center;
    color: var(--light);
    align-self: center !important;
    border-radius: 20px;
    border: 1px solid var(--dark-grey3);
    font-size: var(--ag-font-14);
    margin-top: 4px;
}

.ag-icon-socmed-dash:hover {
    background-color: var(--orange);
    color: var(--light);
}

.collapse-dash-fix h3 {
    font-size: var(--ag-font-12);
}

.ag-role-pdd-fix {
    display: block;
    padding: 10px 0;
    border: 1px solid var(--dark-grey3) !important;
}


/* ================ Icons ======================== */

.ag-icon-club-dash {
    width: 42px;
    height: 42px;
    border-radius: 20px;
    display: block;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px;
    border: 1px solid var(--dark-grey);
}

.ag-icon-club1-dash {
    width: 28px !important;
}

.ag-filter-profile-dash {
    margin: 0 10px 0 0;
}

.ag-filter-profile-dash:hover {
    background-color: var(--dark-grey2);
    border-radius: 20px;
}


/*-- Icon Wrap --*/

.ag-icon-btn-dash {
    font-size: var(--ag-font-18) !important;
}


/*-- Badge --*/

.bg-info {
    color: var(--black) !important;
}

.ag-badge-dash-follow {
    color: var(--dark-grey);
    font-weight: normal !important;
    cursor: pointer;
    background-color: var(--dark-grey3) !important;
    text-decoration: none;
    border: 1px solid var(--dark-grey3);
    height: 20px;
}

.ag-badge-dash-follow:hover,
.ag-icon-dash2:hover {
    color: var(--light);
    cursor: pointer;
    background-color: var(--dark-grey2) !important;
    transition: all .5s ease;
    border: 1px solid var(--dark-grey3);
}

.ag-badge-dash-approved {
    color: var(--black) !important;
    font-weight: normal !important;
    cursor: pointer;
    background-color: var(--yellow) !important;
    text-decoration: none !important;
    border: 1px solid var(--dark-grey3);
    height: 20px;
}

.ag-badge-dash-pending {
    color: var(--black) !important;
    font-weight: normal !important;
    cursor: pointer;
    background-color: var(--dark-grey) !important;
    text-decoration: none !important;
    border: 1px solid var(--dark-grey3);
    height: 20px;
}

.ag-badge-dash-approved:hover {
    background-color: var(--yellow2);
    transition: all .5s ease;
}


/* Tab 3 Box */

.nav-tabs2 {
    border-bottom: 1px solid var(--dark-grey2);
}

.nav-pills .nav-link2.active,
.nav-pills .show>.nav-link {
    background-color: var(--dark-grey2) !important;
    color: var(--orange) !important;
    font-size: var(--ag-font-14);
    font-weight: bold;
    padding: 10px 20px;
    transition: all 0.7s ease;
}

.nav-pills-fix2 .nav-link {
    color: var(--light) !important;
    padding: 10px 20px;
    font-size: var(--ag-font-14);
}

.nav-pills .nav-link {
    border-radius: 0.3rem;
    background-color: var(--dark-grey2) !important;
    font-size: var(--ag-font-14);
    padding: 10px 20px;
    transition: all 0.7s ease;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--orange) !important;
    transition: all 0.7s ease;
}

.ag-icon-club5 {
    width: 70px;
    height: 70px;
    border-radius: 50px;
    color: var(--white);
    display: block;
    justify-content: center !important;
    background-color: var(--red2) !important;
    padding: 2px;
    border: 1px solid var(--dark-grey2);
}

.ag-icon-club5 h2 {
    font-size: var(--ag-font-20) !important;
    text-align: center !important;
    font-weight: bold;
    margin: 0;
}

.ag-icon-club5 h3 {
    font-size: var(--ag-font-12);
    text-align: center;
}


/* ================ Button ======================== */

.btn-dash-default {
    background-color: var(--dark-grey3) !important;
    display: block;
    width: 100%;
    color: var(--light) !important;
    font-size: var(--ag-font-14) !important;
    border: 1px solid var(--dark-grey2) !important;
}

.btn-dash-default:hover,
.btn-dash-default.active {
    background-color: var(--dark-grey) !important;
    transition: all .5s ease;
}

.btn-dash-default2 {
    background-color: var(--dark-grey3) !important;
    display: block;
    width: 100%;
    color: var(--light) !important;
    font-size: var(--ag-font-14) !important;
    border: 1px solid var(--dark-grey2) !important;
}

.btn-dash-default2:hover,
.btn-dash-default2.active {
    background-color: var(--dark-grey3) !important;
    transition: all .5s ease;
}

.btn-dash-orange {
    background-color: var(--yellow) !important;
    display: block;
    width: 100%;
    color: var(--black) !important;
    font-size: var(--ag-font-14) !important;
    border: 1px solid var(--dark-grey2) !important;
}

.btn-dash-orange:hover,
.btn-dash-orange.active {
    background-color: var(--yellow2) !important;
    transition: all .5s ease;
}


/* =============================================================================
Subsciptions
========================================================================== */

.ag-subscribe-wrp {
    height: 100%;
    display: flex;
    position: relative;
    align-items: center;
}

.ag-subscribe-wrp-info {
    background-color: var(--dark);
}

.wrp-cont-subscribe {
    color: var(--light);
}

.wrp-sub-subscribe-categories-box {
    border-radius: 20px;
}

.wrp-box-subscribe-info {
    border: 1px solid var(--dark-grey2);
    padding: 20px;
    border-radius: 10px;
    height: 300px !important;
}

.wrp-box-subscribe-info h3 {
    font-size: var(--ag-font-18);
    line-height: 10px;
    font-weight: bold;
}

.wrp-box-subscribe-info h4 {
    font-size: var(--ag-font-20);
}

.wrp-box-subscribe-info p {
    font-size: var(--ag-font-14);
}

.ag-box-subscribe-wrp {
    display: block;
    padding: 20px;
    font-size: var(--ag-font-14);
    margin: 10px 0;
}

.ag-lms-subbox-bg1 {
    background: url(../img/main-product/lms_bg1.jpg) no-repeat top center;
    background-size: contain;
    background-size: cover;
}

.ag-lms-subbox-bg2 {
    background: url(../img/main-product/lms_bg2.jpg) no-repeat top center;
    background-size: contain;
    background-size: cover;
}

.ag-lms-subbox-bg3 {
    background: url(../img/main-product/lms_bg3.jpg) no-repeat top center;
    background-size: contain;
    background-size: cover;
}

.ag-lms-subbox-bg4 {
    background: url(../img/main-product/lms_bg4.jpg) no-repeat top center;
    background-size: contain;
    background-size: cover;
}

.ag-lms-features-wrap {
    padding: 6px;
    margin-top: 20px;
}

.ag-lms-features-wrap2 {
    padding: 20px;
    margin-top: 60px;
    background-color: rgba(0, 0, 0, 0.418)
}

.ag-lms-features-wrap h1,
.ag-lms-features-wrap2 h1 {
    font-size: var(--ag-font-20);
    color: var(--orange);
    font-weight: bold;
    text-align: center;
    line-height: 22px;
}

.ag-lms-features-wrap2 h3 {
    font-size: var(--ag-font-14);
    color: var(--light);
    font-weight: bold;
    text-align: center;
    line-height: 22px;
}

.ag-lms-features-wrap p,
.ag-lms-features-wrap2 p {
    font-size: var(--ag-font-14);
    color: var(--light);
    text-align: center;
}

.ag-lms-features-wrap img,
.ag-lms-features-wrap2 img {
    width: 60px !important;
    margin: 0 auto 20px auto;
}

.modal-dialog-subscription {
    max-width: 800px !important;
}

.wrp-showhide-box {
    background-color: var(--dark-grey2) !important;
}

#sidebg-login {
    position: fixed;
    max-width: 460px;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    transition: all 0.3s ease;
    z-index: 200;
}

#content-login {
    position: fixed;
    width: calc(100% - 238px);
    left: 338px;
    transition: all 0.3s ease;
}

.ag-wrp-news-info2 {
    padding: 8px;
}

.ag-wrp-news-info2 a {
    display: inline-block;
    text-align: center;
    font-size: var(--ag-font-12);
    text-decoration: none;
    color: var(--light);
}

.ag-wrp-news-info2 a span {
    display: block;
    margin: 0 4px 4px 4px;
    align-items: center !important;
}

.ag-wrp-news-info2 a:hover {
    color: var(--orange);
}

.ag-wrp-news-info2 .fuel-news,
.ag-wrp-news-info2 .fuel-news span {
    color: var(--yellow);
}


/* =============================================================================
Backets
========================================================================== */

.tournament-headers {
    flex-grow: 1;
    color: var(--light);
    border-bottom: 1px solid var(--dark-grey2);
    margin: 0;
}

.tournament-headers .wrp-tour-title {
    width: 100%;
    margin: 0 !important;
}

.tournament-headers .wrp-tour-title h1 {
    text-align: center !important;
    background-color: var(--dark-grey3);
    font-size: var(--ag-font-12);
    margin: 0;
    padding: 10px 0;
}

.tournament-brackets {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    background: var(--dark);
}

.bracket {
    padding-left: 0;
    display: flex;
    margin: 0;
    padding: 30px 0;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-around;
    list-style-type: none;
    border-right: 1px dashed var(--dark-grey2);
    flex: 1;
}

.bracket h3 {
    font-size: var(--ag-font-14);
    color: var(--light);
    text-align: center;
    margin: 4px 0 0 0;
}

.bracket h4 {
    display: block;
    font-size: var(--ag-font-12);
    color: var(--dark-grey);
    text-align: center;
    margin: 0 auto;
}

.team-item {
    background-color: var(--dark-grey2);
    padding: 20px;
    display: block;
    margin: 10px;
    position: relative;
    vertical-align: middle;
    line-height: 2;
    text-align: center;
    border-radius: 8px;
    min-width: 220px;
}

.team-item:after {
    content: '';
    border-color: var(--orange);
    border-width: 2px;
    position: absolute;
    display: none;
    width: 10px;
    right: -11px;
}

.team-item:nth-of-type(odd):after {
    border-right-style: solid;
    border-top-style: solid;
    height: 100%;
    top: 50%;
}

.team-item:nth-of-type(even):after {
    border-right-style: solid;
    border-bottom-style: solid;
    height: 100%;
    top: -50%;
}

.team-item:before {
    content: '';
    border-top: 2px solid var(--orange);
    position: absolute;
    height: 2px;
    width: 10px;
    left: -10px;
    top: 50%;
}

.bracket-2 .team-item:nth-of-type(odd):after {
    height: 200%;
    top: 50%;
}

.bracket-2 .team-item:nth-of-type(even):after {
    height: 200%;
    top: -150%;
}

.bracket-3 .team-item:nth-of-type(odd):after {
    height: 350%;
    top: 50%;
}

.bracket-3 .team-item:nth-of-type(even):after {
    height: 350%;
    top: -300%;
}

.bracket-4 .team-item:nth-of-type(odd):after {
    height: 700%;
    top: 50%;
}

.bracket-4 .team-item:nth-of-type(even):after {
    height: 700%;
    top: -650%;
}

.bracket:first-of-type .team-item:before {
    display: none;
}

.bracket-4 .team-item:after {
    display: none;
}

.team-item time {
    display: inline-block;
    background-color: var(--dark-grey2);
    border: 2px solid var(--dark-grey);
    width: 80px;
    color: var(--light);
    font-size: var(--ag-font-20);
    font-weight: bold;
    margin: 0 6px;
}

#monitor {
    background: #000;
    position: relative;
    border-top: 3px solid #888;
    margin: 5%;
    padding: 2% 2% 4% 2%;
    border-radius: 10px;
    border-bottom-left-radius: 50% 2%;
    border-bottom-right-radius: 50% 2%;
    transition: margin-right 1s;
}

#monitor:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 3%;
    left: 36%;
    height: .5%;
    width: 28%;
    background: #ddd;
    border-radius: 50%;
    box-shadow: 0 0 3px 0 white;
}

#monitorscreen {
    position: relative;
    background-color: #777;
    background-size: cover;
    background-position: top center;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
    overflow: hidden;
}

.ag-navtop-bg {
    background-color: var(--dark);
}

@media all and (min-width: 960px) {
    #monitor {
        -webkit-animation: tvflicker .2s infinite alternate;
        -moz-animation: tvflicker .5s infinite alternate;
        -o-animation: tvflicker .5s infinite alternate;
        animation: tvflicker .5s infinite alternate;
    }
    @-webkit-keyframes tvflicker {
        0% {
            box-shadow: 0 0 100px 0 rgba(200, 235, 255, 0.4);
        }
        100% {
            box-shadow: 0 0 95px 0 rgba(200, 230, 255, 0.45);
        }
    }
    @-moz-keyframes tvflicker {
        0% {
            box-shadow: 0 0 100px 0 rgba(225, 235, 255, 0.4);
        }
        100% {
            box-shadow: 0 0 60px 0 rgba(200, 220, 255, 0.6);
        }
    }
    @-o-keyframes tvflicker {
        0% {
            box-shadow: 0 0 100px 0 rgba(225, 235, 255, 0.4);
        }
        100% {
            box-shadow: 0 0 60px 0 rgba(200, 220, 255, 0.6);
        }
    }
    @keyframes tvflicker {
        0% {
            box-shadow: 0 0 100px 0 rgba(225, 235, 255, 0.4);
        }
        100% {
            box-shadow: 0 0 60px 0 rgba(200, 220, 255, 0.6);
        }
    }
}


/* =============================================================================
Booking
========================================================================== */

.ag-booking-wrap-card-price {
    display: block;
}

.ag-booking-wrap-card-price h3 {
    font-size: var(--ag-font-12);
    padding: 6px 0px 0px 0;
    margin: 0;
    color: var(--dark-grey);
    text-align: left;
}

.ag-booking-wrap-card-price h4 {
    font-size: var(--ag-font-20);
    padding: 0px 0 0 0;
    font-weight: bold;
    text-align: left;
}

.text-small {
    font-size: var(--ag-font-14);
}

.ag-bg-modal {
    background-color: var(--dark-grey3) !important;
    font-size: var(--ag-font-12);
}

.btn-xs {
    padding: 0.375rem 1rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}

@media (max-width: 768px) {
    .d-sm-none {
        display: none !important;
    }
}

.dashboard-stage-tabs-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.dashboard-stage-tabs-buttons {
    display: flex;
    align-items: center;
    padding: 10px;
}

.dashboard-stage-tab-button {
    background-color: transparent;
    border: 1px solid #ddd;
    padding: 10px 20px;
    margin-right: 10px;
    cursor: pointer;
}

.dashboard-stage-tab-button.active {
    background-color: #ddd;
}

.dashboard-stage-tab-contents {
    flex: 1;
    padding: 20px;
}

.dashboard-stage-tab-content {
    display: none;
}

.dashboard-stage-tab-content.active {
    display: block;
}

.content-control-panel {
    background-color: var(--dark-grey3);
    border-radius: 0.3rem !important;
    padding: 0px 10px;
    margin-bottom: 10px;
}

.content-control-panel-2 {
    background-color: var(--dark-grey2-1) !important;
    border-radius: 0 !important;
    /* border-radius: 0.3rem !important;
    padding: 0px 10px;
    margin-bottom: 10px; */
}


/* =============================================================================
Cropping Style
========================================================================== */

.preview-logo {
    overflow: hidden;
    width: 150px;
    height: 193px;
    margin: 10px;
    border: 1px solid red;
}

.preview-banner {
    overflow: hidden;
    width: 150px;
    height: 193px;
    margin: 10px;
    border: 1px solid red;
}

.preview-bg {
    overflow: hidden;
    width: 150px;
    height: 193px;
    margin: 10px;
    border: 1px solid red;
}

.owl-carousel {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
}

.owl-carousel.owl-loaded {
    opacity: 1;
    visibility: visible;
}


/* =============================================================================
Football Field & Position
========================================================================== */

.football-field {
    width: 600px;
    height: 800px;
    background: url(../img/field/football_field.jpg);
    background-size: 30%;
    position: relative;
    display: block;
}

.football-field__box {
    width: 90%;
    height: 90%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    margin: 30px auto;
    position: relative;
}

.football-field__line {
    position: absolute;
    width: 100%;
    height: 2px;
}

.football-field__line--goal--top {
    width: 15%;
    height: 5%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-top: none;
    left: 42.5%;
}

.football-field__line--goal--bottom {
    bottom: 0;
    width: 15%;
    height: 5%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: none;
    margin: 0 42.5%;
}

.football-field__line--penalty--top {
    width: 35%;
    height: 10%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-top: none;
    margin: 0 32.5%;
}

.football-field__line--penalty--bottom {
    bottom: 0;
    width: 35%;
    height: 10%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: none;
    margin: 0 32.5%;
}

.football-field__line--penalty--arc--top {
    top: 0;
    width: 25%;
    height: 12%;
    border-radius: 0 0 60% 60%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-top: none;
    border-left-color: transparent;
    border-right-color: transparent;
    margin: 0 37.5%;
}

.football-field__line--penalty--arc--bottom {
    bottom: 0;
    width: 25%;
    height: 12%;
    border-radius: 60% 60% 0 0;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: none;
    border-left-color: transparent;
    border-right-color: transparent;
    margin: 0 37.5%;
}

.football-field__line--penalty--arc {
    top: 0;
    width: 25%;
    height: 12%;
    border-radius: 0 0 60% 60%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-top: none;
    border-left-color: transparent;
    border-right-color: transparent;
    margin: 0 37.5%;
}

.arrow {}

.football-field__line--mid {
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.8);
}

.football-field__line--circle {
    top: 44%;
    width: 17%;
    height: 12%;
    margin: auto;
    border-radius: 70%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    left: 41.5%;
}

.player {
    position: absolute;
}

.player__item {
    width: 9%;
    height: 7%;
    /*background: repeating-linear-gradient(90deg, #9c1737, #9c1737 10%, #325082 10%, #325082 20%);*/
    border-radius: 50%;
    /*border: 3px solid #325082;*/
    box-shadow: 0 0 30px #000000;
    text-align: center;
    display: flex;
    justify-content: center;
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.player__item--shirt {
    bottom: 25%;
    font-size: 1em;
    text-align: center;
    color: #ebe52d;
}

.player__item--label {
    font-size: 0.7em;
    top: 75%;
    position: absolute;
    background-color: #ebe52d;
    color: #9c1737;
    border-radius: 10%;
    padding: 5%;
}

.player__item--card {
    position: absolute;
    top: -350%;
    background-color: var(--dark-grey3);
    font-size: 0.7em;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 30px #000000;
    z-index: 2;
    display: none;
    flex-flow: column;
    padding: 15px;
}

.player__item--card:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-top: 10px solid #ffffff;
    border-right: 10px solid transparent;
}

.player__item--card:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 40%;
    background-color: var(--dark-grey2);
    z-index: -1;
}

.player__item--card--name {
    color: #fff;
    margin-bottom: 10px;
}

.player__item--card--photo {
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

.player__item--card--photo-bg {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 50%;
}

.player__item--card--info {
    display: flex;
}

.player__item--card--info--column {
    display: table;
    padding: 2%;
}

.player__item--card--info--item {
    text-align: center;
}

.football-player__item--1 {
    bottom: 1%;
    left: 45%;
}

.football-player__item--2 {
    bottom: 25%;
    right: 5%;
}

.football-player__item--3 {
    bottom: 15%;
    right: 25%;
}

.football-player__item--4 {
    bottom: 15%;
    left: 25%;
}

.football-player__item--5 {
    bottom: 42%;
    right: 30%;
}

.football-player__item--6 {
    bottom: 25%;
    left: 5%;
}

.football-player__item--7 {
    bottom: 42%;
    left: 30%;
}

.football-player__item--8 {
    top: 30%;
    left: 45%;
}

.football-player__item--9 {
    top: 15%;
    right: 5%;
}

.football-player__item--10 {
    top: 15%;
    left: 5%;
}

.football-player__item--11 {
    top: 8%;
    left: 45%;
}


/* =============================================================================
Match Timeline
========================================================================== */


/* The actual timeline (the vertical ruler) */

.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}


/* The actual timeline (the vertical ruler) */

.timeline::after {
    content: '';
    position: absolute;
    width: 3px;
    background-color: var(--dark-grey);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}


/* Container around content */

.timeline-container {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}


/* The circles on the timeline */

.timeline-container::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -8px;
    background-color: var(--dark-grey2);
    border: 4px solid var(--dark-grey);
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}


/* Place the container to the left */

.timeline-left {
    left: 0;
}


/* Place the container to the right */

.timeline-right {
    left: 50%;
}


/* Add arrows to the left container (pointing right) */

.timeline-left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid var(--dark-grey2);
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent var(--dark-grey2);
}


/* Add arrows to the right container (pointing left) */

.timeline-right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid var(--dark-grey2);
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--dark-grey2) transparent transparent;
}


/* Fix the circle for containers on the right side */

.timeline-right::after {
    left: -10px;
}


/* The actual content */

.timeline-content {
    padding: 20px 20px;
    background-color: var(--dark-grey2);
    color: #fff;
    position: relative;
    border-radius: 6px;
}


/* Media queries - Responsive timeline on screens less than 600px wide */

@media screen and (max-width: 600px) {
    /* Place the timelime to the left */
    .timeline::after {
        left: 31px;
    }
    /* Full-width containers */
    .timeline-container {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    /* Make sure that all arrows are pointing leftwards */
    .timeline-container::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }
    /* Make sure all circles are at the same spot */
    .timeline-left::after,
    .timeline-right::after {
        left: 15px;
    }
    /* Make all right containers behave like the left ones */
    .timeline-right {
        left: 0%;
    }
}

/* =============================================================================
TV page breadcrumb
========================================================================== */

.breadcrumb-fix1 { }
.breadcrumb-fix1 a { font-size: var(--ag-font-18);}
.breadcrumb-fix1 a:hover, .breadcrumb-fix1 .active { color: var(--fuel-color-over);}


/* =============================================================================
Border Modal
========================================================================== */

.ag-border-color2 { border-color: #262626 !important;}

.border-secondary-1 { border: 1px solid var(--dark-grey2) !important; }
.border-secondary-2 { border: 1px solid var(--dark-grey) !important; }
.border-secondary-3 { border: 1px solid var(--dark-grey3) !important; }

.border-top-secondary { border-top: 1px solid var(--dark-grey2) !important;}
.border-top-secondary-2 { border-top: 1px solid var(--dark-grey) !important;}
.border-top-secondary-3 { border-top: 1px solid var(--dark-grey3) !important;}

.border-bottom-secondary { border-bottom: 1px solid var(--dark-grey2) !important;}
.border-bottom-secondary-2 { border-bottom: 1px solid var(--dark-grey) !important;}
.border-bottom-secondary-3 { border-bottom: 1px solid var(--dark-grey3) !important;}

.btn_secondary { 
    background-color: var(--dark-grey2) !important; 
    border-color: var(--dark-grey2) !important; color: var(--white) !important; }

.btn_secondary:hover, .btn-secondary2:hover { background-color: var(--dark-grey) !important;}

.btn-secondary2 {
    background-color: var(--dark-grey3) !important; 
    border: 1px solid var(--dark-grey3) !important; color: var(--white) !important;
}

/* =============================================================================
Socmedia Modal Share
========================================================================== */

.socmed-post { padding: 0;}
.socmed-post li { font-size: var(--ag-font-20); padding: 4px 0; border-radius: 220px; margin: 4px;}
.socmed-post li a { color: var(--white); padding: 8px 10px; border-radius: 220px;}
.socmed-post li a:hover { color: var(--black); background-color: var(--yellow2) !important;}


/* =============================================================================
Border Radius
========================================================================== */

.border-radius-0    { border-radius: 0 !important; }
.border-radius-1    { border-radius: 10px !important; }
.border-width-1     { border-width: 1px !important; }
.border-width-2     { border-width: 2px !important; }
.border-width-3     { border-width: 3px !important; }
.border-width-4     { border-width: 4px !important; }
.border-width-5     { border-width: 5px !important; }
.border-width-6     { border-width: 6px !important; }
.border-width-7     { border-width: 7px !important; }
.border-width-8     { border-width: 8px !important; }
.border-width-9     { border-width: 9px !important; }
.border-width-10    { border-width: 10px !important; }

.line-height-1      { line-height: 1px !important;}
.line-height-2      { line-height: 20px !important;}


.btn-grey-def {
    background-color: var(--dark-grey3) !important;
    display: block;
    color: var(--light) !important;
    border: 1px solid var(--dark-grey3) !important;
}

.btn-grey-def:hover,
.btn-grey-def.active {
    background-color: var(--dark-grey) !important;
    transition: all 0.5s ease;
}

.ag-icon-dash-1 {
    align-items: center;
    color: var(--white);
    border: 1px solid var(--dark-grey3);
    border-radius: 20px;
    font-size: 26px;
    padding: 2px 5px;
    background: rgba(0, 0, 0, 0.24) !important;
    text-decoration: none !important;
    background-image: url(../img/AgileMAS-logo-bk.png);
}

.ag-dash-sub-icon .ag-icon-dash-1:hover { color: var(--orange) !important; transition: all .3s ease;}


.h-md-500 { height: 500px!important; }
.h-lg-160 { height: 160px!important; }
.h-lg-240 { height: 240px!important; }
.h-lg-336 { height: 336px!important; }

.border-radius-10 { border-radius: 10px !important;}


.table-1st-child-fix .table th:nth-child(1),
.table-1st-child-fix .table td:nth-child(1) {
  position: sticky !important;
  left: -1px;
  background-color: var(--dark-grey3);
  color: #373737;
}


.table-2nd-child-fix .table th:nth-child(2),
.table-2nd-child-fix .table td:nth-child(2) {
  position: sticky;
  left: 0;
  background-color: var(--dark-grey3);
  color: #373737;
}


/* .table-2nd-child-feed-fix {
  position: absolute;
  left: 0; right: 0;
  top: 30px;
  z-index: 5;
  background-color:  #ff7a7a !important;
  color: #ff7a7a;
} */

.table-4th-child-fix .table th:nth-child(4),
.table-4th-child-fix .table td:nth-child(4) {
  position: sticky !important;
  right: -1px;
  background-color: var(--dark-grey3);
  color: #373737;
}





/* Stylingthe last h2 tag by giving margin bottom */
.progress-bar-container:not(:last-child) {
    margin-bottom: 50px;
}

/* Styling the h2 tag by giving color,
letter spacing, font-size etc.*/
.progress-bar-container h2 {
    font-family: Arial, Helvetica, sans-serif;
    color: #eee;
    letter-spacing: 1px;
    font-size: 20px;
}

/* Styling the border and box
effect of the progress bar*/
.progress-bar {
    /* width: 800px; */
    height: 5px;
    margin-top: 10px;
    border: 1px solid #565656;
    border-radius: 5px;
    box-shadow: 0 0 10px rgb(245, 159, 0);
}

/* Stylingthe background color of each
animation and border radius */
.percentage {
    display: block;
    height: 100%;
    background-color: orange;
    border-radius: 5px;
    animation: progress 1500ms ease-in 1;
}

/* Assigning width of each languages*/
.c {
    width: 85%;
}

/* Animating the progress bar by
initially starting from 0*/
@keyframes progress {
    from {
        width: 0;
    }
}




.package-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .packages {
    margin: 20px;
    width: 300px;
    padding-bottom: 1.5em;
    height: 100%;
    background-color: #1e2321;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 19px 38px rgba(30, 35, 33, 1), 0 15px 12px rgba(30, 35, 33, 0.2);
    flex-wrap: wrap;
    color: #f4f4f4;
  }

 
  .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider-price {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #231e1e;
    -webkit-transition: 0.4s;
    box-shadow: 2px 6px 25px #1e2321;
    transform: translate(0px, 0px);
    border-radius: 20px !important;
    transition: 0.6s ease transform, 0.6s box-shadow;
  }

  .slider-price:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--dark-grey);
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 20px !important;
  }

  input:checked + .slider-price {
    background-color: var(--yellow);
  }
  
  input:focus + .slider-price {
    box-shadow: 0 0 1px var(--yellow);
  }
  
  input:checked + .slider-price:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }




/*  Inside - Animation*/

  .bg-green-fade {
    margin-right: 5px;
    background-color: var(--green2) !important;
    /* background-color: var(--red2); */
    border-radius: 50%;
    display: inline-block;
    animation: fadeOut ease 4s infinite;
    -webkit-animation: fadeOut ease 4s infinite;
    -moz-animation: fadeOut ease 4s infinite;
    -o-animation: fadeOut ease 4s infinite;
    -ms-animation: fadeOut ease 4s infinite;
}

.arrow-fwrd {
    width: 250px;
    height:160px; 
    top: 20px !important;    
    position: relative;
    animation-name: arrow-frwd;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}


@keyframes arrow-frwd {
    0%   {
        right: 18px; top:0px;
        opacity: 0.5;
    }
    100%  {
        right:10px; top:0px;
        opacity: 0.9;
        
    }
  }

/*  Background Inside color */

.bg-inside-gradient-red {
    background: rgb(194,46,46);
    background: linear-gradient(270deg, rgba(194,46,46,0.5) 0%, 
    rgba(24,24,24,1) 100%);
}

.bg-inside-gradient-green {
    background: rgb(0,127,65);
    background: linear-gradient(270deg, rgba(0,127,65,0.5) 20%, 
    rgba(24,24,24,0) 100%);
}

/*  0-39% */
.bg-inside-none {
    background: rgba(0, 0, 0, 0);
}

/*  0-39% */
.bg-inside-red {
    background: rgb(194,46,46, 0.5);
}

/*  40-69% */
.bg-inside-yellow {
    background: rgba(194, 167, 46, 0.5);
}

/*  70-100% */
.bg-inside-green {
    background: rgb(0,127,65, 0.5);
}


/*  Grid Background Inside color - Shots on goals */
.heat-box-col-1 { top:71px; left:34px; width: 53px; height:33px;}
.heat-box-col-2 { top:106px; left:34px; width: 53px; height:33px;}
.heat-box-col-3 { top:137px; left:34px; width: 53px; height:33px;}

.heat-box-col-2-row-1 { top:71px; left:88px; width: 53px; height:33px; }
.heat-box-col-2-row-2 { top:106px; left:88px; width: 53px; height:33px; }
.heat-box-col-2-row-3 { top:137px; left:88px; width: 53px; height:33px; }

.heat-box-col-3-row-1 { top:71px; left:142px; width: 53px; height:33px; }
.heat-box-col-3-row-2 { top:106px; left:142px; width: 53px; height:33px; }
.heat-box-col-3-row-3 { top:137px; left:142px; width: 53px; height:33px; }

.heat-box-col-4-row-1 { top:71px; left:195px; width: 53px; height:33px; }
.heat-box-col-4-row-2 { top:106px; left:195px; width: 53px; height:33px; }
.heat-box-col-4-row-3 { top:137px; left:195px; width: 53px; height:33px; }


/*  Grid Background Inside color - Heatmap team attack */
.heat-box-field-col-1 { top:10px; left:11px; width: 65px; height:40px; }
.heat-box-field-col-2 { top:50px; left:11px; width: 65px; height:40px; }
.heat-box-field-col-3 { top:91px; left:11px; width: 65px; height:40px; }
.heat-box-field-col-4 { top:131px; left:11px; width: 65px; height:40px; }

.heat-box-field-col-2-row-1 { top:10px; left:76px; width: 65px; height:40px; }
.heat-box-field-col-2-row-2 { top:50px; left:76px; width: 65px; height:40px; }
.heat-box-field-col-2-row-3 { top:91px; left:76px; width: 65px; height:40px; }
.heat-box-field-col-2-row-4 { top:131px; left:76px; width: 65px; height:40px; }

.heat-box-field-col-3-row-1 { top:10px; left:143px; width: 61px; height:40px; }
.heat-box-field-col-3-row-2 { top:50px; left:143px; width: 61px; height:40px; }
.heat-box-field-col-3-row-3 { top:91px; left:143px; width: 61px; height:40px; }
.heat-box-field-col-3-row-4 { top:131px; left:143px; width: 61px; height:40px; }

.heat-box-field-col-4-row-1 { top:10px; left:205px; width: 64px; height:40px; }
.heat-box-field-col-4-row-2 { top:50px; left:205px; width: 64px; height:40px; }
.heat-box-field-col-4-row-3 { top:91px; left:205px; width: 64px; height:40px; }
.heat-box-field-col-4-row-4 { top:131px; left:205px; width: 64px; height:40px; }


/*  Grid Background Inside color - Def - Heatmap Goals Corner Kick*/
/*--- Box Heat 1-3 (leftpost) - Left - 3 box ---*/
.heat-box-half-field-col-1 { top:56px; left:12px; width: 53px; height:47px; }
.heat-box-half-field-col-2 { top:104px; left:12px; width: 53px; height:42px; }
.heat-box-half-field-col-3 { top:147px; left:12px; width: 53px; height:20px; }

/*--- Box Heat 4-5 (outsidepost) ---*/
.heat-box-half-field-col-1-row-1 { top:56px; left:65px; width: 149px; height:31px; }
.heat-box-half-field-col-1-row-2 { top:88px; left:65px; width: 149px; height:13px; }

/*--- Box Heat 6-10 (centerpost) ---*/
.heat-box-half-field-col-2-row-2 { top:105px; left:171px; width: 41px; height:41px; }
.heat-box-half-field-col-1-row-3 { top:105px; left:67px; width: 40px; height:41px; }
.heat-box-half-field-col-1-row-4 { top:147px; left:67px; width: 40px; height:20px; }
.heat-box-half-field-col-2-row-3 { top:105px; left:107px; width: 63px; height:62px; }
.heat-box-half-field-col-3-row-3 { top:146px; left:171px; width: 41px; height:22px; }
.heat-box-half-field-col-3-row-4 { top:105px; left:171px; width: 41px; height:41px; }

/*--- Box Heat 11-13 (rightpost) - Right - 3 box ---*/
.heat-box-half-field-col-3-row-1 { top:56px; left:215px; width: 53px; height:47px; }
.heat-box-half-field-col-3-row-2 { top:104px; left:215px; width: 53px; height:42px; }
.heat-box-half-field-col-3-row-3-3 { top:147px; left:215px; width: 53px; height:20px; }

/*  Grid Background Inside color - Attack - Heatmap Goals Corner Kick*/
/*--- Box Heat 1-3 (leftpost) - Left - 3 box ---*/
.heat-box-half-field-attack-col-1 { top:56px; left:12px; width: 53px; height:20px; }
.heat-box-half-field-attack-col-2 { top:78px; left:12px; width: 53px; height:42px; }
.heat-box-half-field-attack-col-3 { top:121px; left:12px; width: 53px; height:47px; }

/*--- Box Heat 4-6 (centerpost) ---*/
.heat-box-half-field-attack-col-1-row-2 { top:56px; left:67px; width: 40px; height:20px; }
.heat-box-half-field-attack-col-2-row-2 { top:78px; left:67px; width: 41px; height:41px; }
.heat-box-half-field-attack-col-2-row-3 { top:56px; left:109px; width: 63px; height:62px; }

/*--- Box Heat 7-10 (centerpost -outside) ---*/
.heat-box-half-field-attack-col-1-row-3 { top:56px; left:173px; width: 39px; height:20px; }
.heat-box-half-field-attack-col-2-row-3-3 { top:78px; left:173px; width: 41px; height:41px; }
.heat-box-half-field-attack-col-3-row-3 { top:122px; left:65px; width: 149px; height:13px; }
.heat-box-half-field-attack-col-3-row-3-2 { top:137px; left:65px; width: 149px; height:30px; }

/*--- Box Heat 11-13 (rightpost) - Right - 3 box ---*/
.heat-box-half-field-attack-col-1-row-4 { top:56px; left:215px; width: 53px; height:20px; }
.heat-box-half-field-attack-col-2-row-4 { top:78px; left:215px; width: 53px; height:42px; }
.heat-box-half-field-attack-col-3-row-4 { top:122px; left:215px; width: 53px; height:45px; }



/*  Grid Inside - All Position */
.ag-position-fb-lw     { top: 20px; left:205px; }
.ag-position-fb-st     { top: 73px; left:205px; }
.ag-position-fb-rw     { top: 132px;left:205px;}

.ag-position-fb-am    { top: 73px; left:165px; }

.ag-position-fb-ml     { top: 14px; left:125px; }
.ag-position-fb-mcl    { top: 53px; left:125px; }
.ag-position-fb-mcr    { top: 93px; left:125px; }
.ag-position-fb-mr     { top: 132px; left:125px; }

.ag-position-fb-dm    { top: 73px; left:83px; }

.ag-position-fb-dl     { top: 14px; left:42px }
.ag-position-fb-dcl    { top: 53px; left:42px; }
.ag-position-fb-dcr    { top: 93px; left:42px; }
.ag-position-fb-dr     { top: 132px; left:42px; }

.ag-position-fb-gk    { top: 73px; left:5px; }


/*  Grid Inside - Fwrd - 2 */
.ag-position-point-fb-fw-1    { top: 60px; left:200px; }
.ag-position-point-fb-fw-2     { top: 98px; left:200px; }

/*  Grid Inside - Mid - 4 */
.ag-position-point-fb-ml     { top: 24px; left:131px; }
.ag-position-point-fb-mcl    { top: 60px; left:131px; }
.ag-position-point-fb-mcr    { top: 98px; left:131px; }
.ag-position-point-fb-mr     { top: 134px; left:131px; }

/*  Grid Inside - Def - 4 */
.ag-position-point-fb-dl    { top: 24px; left:60px }
.ag-position-point-fb-dcl   { top: 60px; left:60px; }
.ag-position-point-fb-dcr   { top: 98px; left:60px; }
.ag-position-point-fb-dr    { top: 134px; left:60px; }

/*  Grid Inside - Def - 5 */
.ag-position-point-fb-dcc-1 { top: 14px; left:60px; }
.ag-position-point-fb-dcc-2 { top: 49px; left:60px; }
.ag-position-point-fb-dcc-3 { top: 80px; left:60px; }
.ag-position-point-fb-dcc-4 { top: 111px; left:60px; }
.ag-position-point-fb-dcc-5 { top: 144px; left:60px; }


/*  Grid Inside - Goalkeeper 1 */
.ag-position-point-fb-gk    { top: 83px; left:10px; }


/*  Grid Inside - Fwrd - 3 */
.ag-position-point-fb-cfw-1 { top: 32px; left:200px; }
.ag-position-point-fb-cfw-2 { top: 80px; left:200px; }
.ag-position-point-fb-cfw-3 { top: 126px; left:200px; }

/*  Grid Inside - Fwrd - 4 */
.ag-position-point-fb-cfc-1 { top: 24px; left:200px; }
.ag-position-point-fb-cfc-2 { top: 60px; left:200px; }
.ag-position-point-fb-cfc-3 { top: 98px; left:200px; }
.ag-position-point-fb-cfc-4 { top: 134px; left:200px; }


/*  Grid Inside - Mid - 3 */
.ag-position-point-fb-cmc-1 { top: 32px; left:131px; }
.ag-position-point-fb-cmc-2 { top: 80px; left:131px; }
.ag-position-point-fb-cmc-3 { top: 126px; left:131px; }


/*  Grid Inside - Mid - 5 */
.ag-position-point-fb-mcl-1 { top: 14px; left:131px; }
.ag-position-point-fb-mcl-2 { top: 49px; left:131px; }
.ag-position-point-fb-mcl-3 { top: 80px; left:131px; }
.ag-position-point-fb-mcl-4 { top: 111px; left:131px; }
.ag-position-point-fb-mcl-5 { top: 144px; left:131px; }

/*  Grid Inside - Def - 3 */
.ag-position-point-fb-dc-1  { top: 32px; left:60px }
.ag-position-point-fb-dc-2  { top: 80px; left:60px; }
.ag-position-point-fb-dc-3  { top: 126px; left:60px; }

/*  Grid Inside - Def Mid - 1 */
.ag-position-point-fb-def-mc-1 { top: 80px; left:96px; }

/*  Grid Inside - Def Mid - 2 */
.ag-position-point-fb-def-mcc-1 { top: 60px; left:96px; }
.ag-position-point-fb-def-mcc-2 { top: 98px; left:96px; }

/*  Grid Inside - Attc Mid - 1 */
.ag-position-point-fb-att-mc-1 { top: 80px; left:167px; }

/*  Grid Inside - Attc Mid - 2 */
.ag-position-point-fb-att-mcc-1 { top: 32px; left:167px; }
.ag-position-point-fb-att-mcc-2 { top: 126px; left:167px; }

/*  Grid Inside - Attc Mid - 3 */
.ag-position-point-fb-att-mcc-3 { top: 32px; left:167px; }
.ag-position-point-fb-att-mcc-4 { top: 80px; left:167px; }
.ag-position-point-fb-att-mcc-5 { top: 126px; left:167px; }