@font-face {
    font-family: GothamMedium;
    src: url('../fonts/Gotham/GothamMedium.ttf');
}

@font-face {
    font-family: GothamBold;
    src: url('../fonts/Gotham/GothamBold.ttf');
}

@font-face {
    font-family: GothamLight;
    src: url('../fonts/Gotham/GothamLight.ttf');
}

@font-face {
    font-family: DrukText-Medium-Trial;
    src: url('../fonts/Druk/DrukText-Medium-Trial.otf');
}

@font-face {
    font-family: DrukText-Bold-Trial;
    src: url('../fonts/Druk/DrukText-Bold-Trial.otf');
}

@font-face {
    font-family: DrukText-BoldItalic-Trial;
    src: url('../fonts/Druk/DrukText-BoldItalic-Trial.otf');
}

@font-face {
    font-family: Metropolis-Regular;
    src: url('../fonts/Metropolis/Metropolis-Regular.otf');
}

@font-face {
    font-family: Metropolis-Bold;
    src: url('../fonts/Metropolis/Metropolis-Bold.otf');
}

@font-face {
    font-family: Metropolis-Light;
    src: url('../fonts/Metropolis/Metropolis-Light.otf');
}

@font-face {
    font-family: AxeHandel;
    src: url('../fonts/AxeHandel/AxeHandel.ttf');
}

@font-face {
    font-family: FuturaPTBoldOblique;
    src: url('../fonts/Futura/FuturaPTBoldOblique.otf');
}

@font-face {
    font-family: TextaRegular;
    src: url('../fonts/Texta/TextaRegular.ttf');
}

@font-face {
    font-family: AxiataBook;
    src: url('../fonts/Axiata/AxiataBook.otf');
}
@font-face {
    font-family: AxiataMedium;
    src: url('../fonts/Axiata/AxiataMedium.otf');
}

body{
    color: #333333; background-color: #FFFFFF;
    font-family: 'AxiataBook'; font-size: 16px;
}
html, body{overflow-x:hidden; margin:0;}

b, strong, .bold{font-family: 'Metropolis-Bold'!important;}
.lighter{font-family: 'Metropolis-Light'!important;}
.underline{ text-decoration: underline!important; }
.capitalize{text-transform: capitalize!important;}
.uppercase{text-transform: uppercase!important;}
.lowercase{text-transform: lowercase!important;}
.pointer{cursor:pointer;}
.inline-block{display: inline-block;}
::placeholder,.select2-selection__placeholder{ color: #ADA9BB; opacity: 1; font-family: 'Metropolis-Light'; text-transform: capitalize!important; }
.ellipsis-line{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ellip { display: block; height: 100%; }
.ellip-line { display: inline-block; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; max-width: 100%; }
.ellip, .ellip-line { position: relative; overflow: hidden; }

.ellipsis-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.letter-space{ letter-spacing: 0.14em; }
.break-word{word-wrap: break-word;}
textarea{resize: none!important;}

.noselect, .filter-row div, .dropdown-option, img, .user-icon {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.custom-scroll::-webkit-scrollbar {width:4px;}
.custom-scroll::-webkit-scrollbar-track {background: transparent;}
.custom-scroll::-webkit-scrollbar-thumb {background: rgba(200,200,200,0.5);}
.custom-scroll::-webkit-scrollbar-thumb:hover {background: rgba(200,200,200,0.8);}

/*::-webkit-scrollbar {width: 8px;}*/
/*::-webkit-scrollbar-track {background: #f1f1f1;}*/
/*::-webkit-scrollbar-thumb {background: #ADA9BB;}*/
/*::-webkit-scrollbar-thumb:hover {background: #555;}*/

/* bootstrap container */
/*.row{*/
/*margin-right: -22px!important; margin-left: -22px!important;*/
/*}*/
/*.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{*/
/*padding-right: 22px!important; padding-left: 22px!important;*/
/*}*/
/*.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-full{*/
/*padding-right: 22px!important; padding-left: 22px!important;*/
/*}*/
/*.container-fluid{*/
/*padding-right: 0!important; padding-left: 0!important;*/
/*}*/
.container-no-padding{padding: 0!important; }
.container-first{ padding-top:69px!important; }
.container-full{height: 100%;overflow-y: scroll;}

.bg-white{ background-color: #ffffff!important; }
.bg-black{ background-color: #000000!important; }
.bg-base{ background-color: #3D2360!important; }
.bg-red{ background-color: #E82D3A!important; }
.bg-grey{background-color: #666666 !important;}

.bg-transparent{background-color: transparent;}
.bg-white-blurred{background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,1));}
.bg-black-blurred{background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0.8));}
.bg-black-blurred-full{background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));}

.bg-coming-soon{ background-position: bottom center; background-size: cover; background-repeat: no-repeat; height: 90vh;}
.bg-registration{ background-position: center; background-size: cover; background-repeat: no-repeat; padding:14px 24px;}

a, a:hover, a:visited, a:focus{ text-decoration: none!important; }
.color-text, a.color-text, a.color-text:hover{ color: #333333!important; }
.color-base, a.color-base, a.color-base:hover, a.color-base:visited, a.color-base:focus{color: #3D2360!important;}
.color-yellow{color:#d6de23!important;}
.color-magenta, a.color-magenta, a.color-magenta:hover{color:#EC008B!important;}
.color-white, a.color-white, a.color-white:hover, a.color-white:visited, a.color-white:focus{ color: #ffffff!important; }
.color-black, a.color-black, a.color-black:hover, a.color-black:visited, a.color-black:focus{ color: #000000!important; }
.color-grey, a.color-grey, a.color-grey:hover{ color: #888888!important; }
.color-dark-grey, a.color-dark-grey, a.color-dark-grey:hover{ color: #5E5A6F!important; }
.color-light-grey{color: #989898!important;}
.color-red{color:#DE5421!important;}
.color-green{color:#98B751!important;}
.color-tertiary{color:#BDA7C5;}


.font-8{font-size:8px!important; line-height: 14px;}
.font-10{font-size:10px!important; line-height: 16px!important;}
.font-12{font-size:14px!important; line-height: 22px!important;}
.font-13{font-size:13px!important; line-height: 21px!important;}
.font-14{font-size:14px!important; line-height: 22px!important;}
.font-16{font-size:16px!important; line-height: 26px!important;}
.font-17{font-size:17px!important; line-height: 27px!important;}
.font-18{font-size:18px!important; line-height: 28px!important;}
.font-20{font-size:20px!important; line-height: 32px!important;}
.font-22{font-size:22px!important; line-height: 34px!important;}
.font-24{font-size:24px!important; line-height: 36px!important;}
.font-28{font-size:28px!important; line-height: 40px!important;}
.font-30{font-size:30px!important; line-height: 42px!important;}
.font-32{font-size:32px!important; line-height: 42px!important;}
.font-36{font-size:36px!important; line-height: 52px!important;}
.font-40{font-size:40px!important; line-height: 52px!important;}
.font-42{font-size:42px!important; line-height: 56px!important;}
.font-54{font-size:54px!important; line-height: 64px!important;}
.font-60{font-size:60px!important; }
.font-64{font-size:64px!important; line-height: 78px!important;}
.font-70{font-size:70px!important; line-height: 70px!important;}
.font-72{font-size:72px!important; line-height: 70px!important;}
.font-120{font-size:120px!important; line-height:144px;}

/* Gotham */
.font-gotham, .font-gotham::placeholder{font-family: 'GothamMedium' !important;}
.font-gotham.bold{font-family: 'GothamBold' !important;}

/* Metropolis */
.font-metropolis, .font-metropolis::placeholder{font-family: 'Metropolis-Regular' !important;}
.font-metropolis.bold{font-family: 'Metropolis-Bold' !important;}

/* Druk */
.font-druk, .font-druk::placeholder{font-family: 'DrukText-Medium-Trial' !important;}
.font-druk.bold , .font-druk.bold::placeholder{font-family: 'DrukText-Bold-Trial' !important;}
.font-druk.italic{font-family: 'DrukText-BoldItalic-Trial' !important;}


.font-title, .font-title::placeholder, .font-axe{font-family: 'AxeHandel' !important;}
.font-subtitle, .font-subtitle::placeholder, .font-futura{font-family: 'FuturaPTBoldOblique' !important;}



.text-more{white-space: pre; overflow: hidden; text-overflow: ellipsis;}

.pt4{padding-top:4px;}
.pt8{padding-top:8px;}
.pt12{padding-top:12px;}
.pt20{padding-top:20px;}
.pt24{padding-top:24px;}
.pt100{padding-top:100px;}
.pb8{padding-bottom:8px;}
.pb12{padding-bottom:12px;}
.pb24{padding-bottom:24px;}
.pb100{padding-bottom:100px;}
.pv12{padding-top:12px; padding-bottom:12px;}
.pv20{padding-top:20px; padding-bottom:20px;}
.pv24{padding-top:24px; padding-bottom:24px;}
.mv20{margin-top:20px; margin-bottom:20px;}
.mv24{margin-top:24px; margin-bottom:24px;}
.mb24{margin-bottom:24px;}
.mb20{margin-bottom:20px;}
.mv4{margin-top:4px; margin-bottom:4px;}
.mv8{margin-top:8px; margin-bottom:8px;}
.mt12{margin-top:12px;}
.mt4{margin-top:4px;}
.mt8{margin-top:8px;}
.mt16{margin-top:16px;}
.mt20{margin-top:20px;}
.mt24{margin-top:24px;}
.mv24{margin-top:24px;margin-bottom:24px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt60{margin-top:60px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mv40{margin-top:40px;margin-bottom:40px;}
.mv30{margin-top:30px;margin-bottom:30px;}
.mb8{margin-bottom:8px;}
.mr4{margin-right:4px;}
.ml8{margin-left:8px;}
.mh8{margin-left:8px; margin-right: 8px;}
.ml12{margin-left:12px;}
.mr8{margin-right:8px;}
.mr12{margin-right:12px;}
.mr16{margin-right:16px;}
.mr20{margin-right:20px;}
.mh4{margin-left:4px;margin-right:4px;}
.mb100{margin-bottom: 100px;}
.mt80{margin-top: 80px;}
.mt100{margin-top: 100px;}
.mv80{margin-bottom: 80px;margin-top:80px;}
.mv100{margin-bottom: 100px;margin-top:100px;}

.full-row{width:100%; position: relative;}
.absolute{ position: absolute!important;}
.row-flat{float:left;width:100%;min-height:1px;}
.col-half{float:left;width:50%;min-height:1px;}
.cols{float:left;min-height:1px;}
.bg-image{background-position: center top; background-repeat: no-repeat; background-size: cover;}
.bg-stretch{ background-size: 100% auto!important; }
.bg-auto{ background-size: auto; }
.bg-bottom{ background-position: center bottom; }
.bg-center{ background-position: center center; }
.bg-top{ background-position: center top; }
.bg-fixed{ background-attachment: fixed; }
.bg-contain{ background-size: contain; }
.bg-cover{ background-size: cover; }
.bg-no-repeat{ background-repeat: no-repeat; }
.bg-contains{ background-size: contain; background-position: center; background-repeat: no-repeat;}
.bg-desktop{ background-position: center top;  background-size: auto; }
.bg-pad{padding-top:80px!important; padding-bottom:80px!important;}

.bg-bottom-rounded{
    border-radius: 0 0 50% 50% / 50px; padding-bottom:60px;
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.3);
    box-shadow: 0 3px 6px rgba(0,0,0,.3);
}

.form-control, .form-control:focus, .form-control:active{
    color: #3D2360; padding:0; border-radius: 0; margin-bottom:8px; width: 100%; border:none;
    border-bottom: 1px solid #EAEAEA; background-color: transparent!important; outline: 0!important; box-shadow:none;
}
.form-control:disabled, .form-control[readonly]{
    background-color: #A8AABC;
}
.form-control::placeholder{color:#ADA9BB; text-transform: none!important;}
textarea.form-control-base{padding-top:8px!important;padding-bottom:8px!important;}
.help-text{ color: #ADA9BB; font-size:12px; margin-top:10px; width:100%; display:block;}
.help-text.error{ color: #E82D3A; }

.form-group{ width:100%; }
.form-group.with-icon, .form-group.with-icon-right{position: relative;}
.form-group.with-icon i, .form-group.with-icon-right i{
    display: inline-block; width: 32px; height: 32px; position: absolute; margin:6px; cursor: pointer;
    background-repeat: no-repeat; background-size: contain; background-position: center; z-index: 1; right: 0; top:0;
}
.form-group.with-icon-right div{
    display: inline-block; width: 50px; height: 24px; position: absolute; margin-left:16px; margin-right:16px;
    margin-top: 10px; right: 0; top:0; text-align: right; z-index: 1; font-size: 14px; color:#ADA9BB; cursor: pointer;
}
.form-group.with-icon input{
    padding-left: 56px; position: absolute;
}
.form-group.with-icon-right input{
    padding-right: 56px; position: relative;
}

/* select2 */
.select2 {
    width: 100%!important;
}
.select2-container .select2-selection--single {
    color: #3D2360; padding:8px 0 0; height:40px; border-radius:0; border:none; font-family: 'Metropolis-Regular';
    border-bottom: 1px solid #EAEAEA; margin-bottom:8px; background-color: transparent!important; outline: 0!important; box-shadow:none;
}
.select2-container .select2-selection--single .select2-selection__arrow{
    top: 8px; right: 10px;
}
.select2-container .select2-selection--single .select2-selection__arrow b {
    border-width:0; width:24px; height:24px;
    background-size: contain; background-repeat: no-repeat; left:0; top:20%;
}
.select2-container.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-width:0; width:24px; height:24px;
    background-size: contain; background-repeat: no-repeat; left:0; top:20%; transform: rotate(180deg);
}
.select2-container .select2-selection--single .select2-selection__rendered{ padding-left:0;}
.select2-container .select2-selection--single:focus { outline: 0; }
.select2-dropdown{
    border: 1px solid #EAEAEA; border-radius: 0;
}
.select2-container .select2-results__option--highlighted.select2-results__option--selectable{
    background-color: #3D2360;
}
.select2-results__option{ font-size:14px; }
.select2-search--dropdown .select2-search__field{outline: none;}

.dropdown-option{ padding: 0; background-color: #ffffff; border-color: #E8E8DE; border-radius:3px; min-width:8rem;}
.dropdown-option > div{ padding: 8px 16px; font-size: 14px; cursor: pointer;}
.dropdown-option > div:hover{ background-color: rgba(118, 107, 215, 0.05); }
.dropdown-option >div.disable{ color: #ADA9BB; background-color: #ffffff!important;}
.dropdown-option >div.disable i{ filter: invert(78%) sepia(11%) saturate(308%) hue-rotate(213deg) brightness(87%) contrast(86%); }

.overlay{ display: none; position: fixed; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); z-index: 1000; top: 0; left: 0; }
.overlay-trans{ display: none; position: fixed; width: 100%; height: 100%; background-color: transparent; z-index: 889; top: 0; left: 0; }

#block-loading {
    position: fixed; display: none; top: 0; left: 0; color: #3D2360;
    justify-content: center;align-items: center; width: 100%; height: 100%; overflow: hidden;
    background-color: rgba(240,240,240, 0.8); z-index: 9999;
}

*[class*="btn-"]{
    font-size: 12px; border: 1px solid transparent; outline: 0!important; cursor: pointer; border-radius: 4px; text-align: center; display: inline-block;
}
.btn{ border-radius: 8px; padding: 12px 20px; font-size:16px; font-family: 'Metropolis-Bold'; outline:0!important; box-shadow:none; }
.btn:focus{ outline:0!important; box-shadow:none; }
.btn img{ width:24px; height:24px; position:absolute; left: 40px; margin-top: -2px;}
.btn img.in{ position:inherit; width:16px; height:16px;}
.btn-small{ padding:4px 16px; border-radius: 4px; font-size:12px;}
.btn-prev{ padding:10px 20px; border-radius: 4px; font-size:14px;}
.btn-radius{border-radius: 100px;}
.btn-base, .btn-base:hover, .btn-base:active, .btn-base:focus, a.btn-base, a.btn-base:hover, a.btn-base:active, a.btn-base:focus{
    border-color: #EC008B!important; color: #FFFFFF!important;; background-color: #EC008B!important;;
}
.btn-secondary, .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus, a.btn-secondary, a.btn-secondary:hover, a.btn-secondary:active, a.btn-secondary:focus{
    border-color: #3D2360!important; color: #FFFFFF!important;; background-color: #3D2360!important;;
}
.btn-base-revert, .btn-base-revert:hover, .btn-base-revert:active, .btn-base-revert:focus, a.btn-base-revert, a.btn-base-revert:hover, a.btn-base-revert:active, a.btn-base-revert:focus{
    border-color: #EC008B; color: #EC008B; background-color: transparent;
}
.btn-base-link, .btn-base-link:hover, .btn-base-link:active, .btn-base-link:focus, a.btn-base-link, a.btn-base-link:hover, a.btn-base-link:active, a.btn-base-link:focus{
    border-color: transparent; color: #EC008B; background-color: transparent;
}
.btn-trans-white, .btn-trans-white:hover, .btn-trans-white:active, .btn-trans-white:focus{
    border-color: transparent; color:#ffffff; background-color: rgba(255, 255, 255, 0.15);
}
.btn-trans, .btn-trans:hover, .btn-trans:active, .btn-trans:focus{
    border-color: transparent; color: #ffffff; background-color: transparent;
}
.btn-outline-white, .btn-outline-white:hover, .btn-outline-white:active, .btn-outline-white:focus{
    border-color: #ffffff; color: #ffffff; background-color: transparent;
}
.btn-outline-purple, .btn-outline-purple:hover, .btn-outline-purple:active, .btn-outline-purple:focus{
    border-color: #3D2360; color: #3D2360; background-color: transparent;
}
.btn-outline-grey, .btn-outline-grey:hover, .btn-outline-grey:active, .btn-outline-grey:focus{
    border-color: #ADA9BB; color: #ADA9BB; background-color: transparent;
}
.btn-dark-grey, .btn-dark-grey:hover, .btn-dark-grey:active, .btn-dark-grey:focus{
    border-color: #484554; color: #484554; background-color: transparent;
}
.btn-disable, .btn-disable:hover, .btn-disable:active, .btn-disable:focus{
    border-color: #ADA9BB; color: #ffffff; background-color: #ADA9BB; cursor:not-allowed!important;
}
.btn-upload, .btn-upload:hover, .btn-upload:active, .btn-upload:focus{
    border-color: #EAEAEA; color: #333333; background-color: #EAEAEA; padding:8px 14px; font-size:14px;
}
.btn-custom-bg, .btn-custom-bg:hover, .btn-custom-bg:active, .btn-custom-bg:focus {
    font-family: 'Metropolis-Bold'; text-transform: uppercase; border-color:transparent; color: #EC008B; background: transparent;
    background-size: 100%; background-repeat: no-repeat; background-position: center; padding:24px 46px;
}

.btn-shadow, .btn-shadow:hover, .btn-shadow:active, .btn-shadow:focus{
    box-shadow: 0 0 6px 0 rgba(61, 35, 96, 0.17); color: #ADA9BB; border-width: 0; font-family: 'Metropolis-Regular';
    background: #ffffff; border-radius: 100px; padding:8px 16px!important; cursor:pointer; height:35px;
}

.header-default{ width: 100vw; height: 65px; padding: 0; position:fixed; background-color: transparent;
    /*border-bottom: 1px solid #ADA9BB;*/ -moz-box-sizing: border-box; box-sizing: border-box;
    top: 0; left: 0; right: 0; z-index: 910; font-size: 16px !important;
}
.header-space{ height: 65px; }
.header-space-2{ height: 117px; }
.header-logo{  background-size: contain; background-repeat: no-repeat; display: block; width: 50px; height:50px; margin-right:24px;}
.nav-menu{ padding: 24px 40px 12px 0px; }
.menu-border{width:100%; height:4px; margin-top:12px; background-color: transparent; border-radius: 100px 100px 0 0;}
a.nav-menu, a.menu-dropdown{color:#3D2360; font-family: 'GothamBold'; font-size: 14px; text-transform: uppercase;}
a.nav-menu i{filter: brightness(0) saturate(100%) invert(38%) sepia(6%) saturate(1257%) hue-rotate(211deg) brightness(90%) contrast(91%);}
a.nav-menu span{padding:0 8px;}
a.nav-menu .mr4{padding-right:0;}
a.nav-menu i{margin-right:8px;}
.stop-scrolling { height: 100%; overflow: hidden; }
.header-static{ background: #FFFFFF; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.16);}
.menu-icon{ width:24px; height:24px; cursor:pointer; background-position: center; background-size: contain; background-repeat: no-repeat;}
.header-reverse a.nav-menu{color:#ffffff;}
.header-reverse.header-static {background-color:#3D2360;  }
.header-reverse .menu-icon{filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1735%) hue-rotate(310deg) brightness(101%) contrast(101%);}

.nav-tabs{ border-bottom: 1px solid #E8E8DE; }
.nav-tabs .nav-link { border: 0; border-radius:0; font-size:14px; padding:5px; color: #5E5A6F;}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{ background-color: transparent; color: #3D2360; font-weight:500;}
.tab-pane{ padding: 10px 0;}
.nav-tabs.nav-user{ border:none; }
.nav-tabs.nav-user .nav-link{ padding:16px; color: #ADA9BB;}
.nav-tabs.nav-user .nav-item.show .nav-link, .nav-tabs.nav-user .nav-link.active { color: #33303E;}

/*.modal-menu .modal-dialog{margin:0 auto; height:100%; background-color:#18191F;}*/
/*.modal-menu .modal-content{background-color:#18191F; height:100%; border:0; border-radius:0;}*/
/*.modal-menu .modal-header{border-bottom:0;opacity: 1 !important; background-color: transparent;}*/
/*background-image:url('../img/ic_x_white.png'); background-size: contain; background-repeat: no-repeat; }*/

*[class*="ic-"], .ic{
    background-size: contain; background-repeat: no-repeat; background-position: center; display: inline-block;
}
.ic-12{width:12px; height:12px;}
.ic-16{width:16px; height:16px;}
.ic-20{width:20px; height:20px;}
.ic-24{width:24px; height:24px;}
.ic-30{width:30px; height:30px;}
.ic-40{width:40px; height:40px;}
.ic-60{width:60px; height:60px;}
.ic-80{width:80px; height:80px;}
.ic-100{width:100px; height:100px;}

.footer-default{ padding-top:40px; padding-bottom: 40px; }
/*.footer-default a, .footer-default a:hover, .footer-default a:visited, .footer-default a:focus{ color:#ffffff!important; }*/
.socmed{ background-color:transparent;}
.socmed a{ display:inline-block; width:24px; height:24px; background-size:cover; background-repeat:no-repeat; background-position:center; margin-left:8px;}
.socmed a:first-child{margin-left:0;}

input[type=checkbox] {
    display:none;
}
input[type=checkbox] + label { width: 100%; height: 24px;
    cursor: pointer; display:inline-block; padding: 0 0 0 0; background-size: 24px!important; background-position: left center!important; padding-left: 30px;
}
input[type=checkbox]:checked + label { background-size: contain;
    height: 24px; width: 100%; display:inline-block; padding: 0 0 0 0; padding-left: 30px;
}
button[disabled], input[type=button][disabled],
button:disabled, input[type=button]:disabled{
    opacity: 0.9!important; cursor: not-allowed!important;
    background-color: #5E5A6F!important; border-color:#5E5A6F!important; color: #fff!important;}
input[type=button], button{ min-height: 40px;}

.modal .modal-content{ border:0!important; border-radius:0;}
.modal .modal-header{ font-size: 18px; flex-direction: row; justify-content: start; align-items: center; border-bottom:0; padding:30px;}
.modal .modal-body{ padding:30px; padding-top:0; }
/*.modal-backdrop { background-color: rgba(240,240,240,0.8); }*/

body.modal-open, .modal-full{padding-right: 0!important;overflow-y:hidden!important;}
.modal-full .modal-dialog{margin:0 auto; height:100vh; background-color:#fff; max-width:100%!important;}
.modal-full .modal-content{background-color:#fff; height:100vh; border:0; border-radius:0;}
.modal-full .modal-header{border-bottom:0;opacity: 1 !important; background-color: transparent;}
.modal-full .modal-body{ width:100%; margin: 0 auto;}

.modal-full.over .modal-dialog, .modal-full.over .modal-content{ background-color: rgba(0,0,0,.2); color:#fff;}

/*.select2-dropdown{z-index:1010;}*/

/*.modal-open .modal {overflow-x: hidden;overflow-y: hidden;}*/

.input-search, .input-search:focus{
    box-shadow: 0 0 6px 0 rgba(61, 35, 96, 0.17);
    background-color: #ffffff; border-radius: 100px; padding:10px 16px; font-size:14px;
     background-size: 20px; background-position: 10px center;
    background-repeat: no-repeat; padding-left:40px; padding-right: 40px!important;
}
.input-search.bg-white, .input-search.bg-white:focus{background-color:#fff!important;}
.clear-search{ width: 20px!important; height:20px!important; margin-right:10px!important; visibility:hidden;}
/*.input-search:focus ~ .clear-search{visibility: visible!important;}*/
.img-full{width:100%;height: auto;}

.full-bg{width:100%; min-height:100vh; background-size:cover; background-position: center; background-repeat: no-repeat;}
.half-bg{width:100%; min-height:50vh; background-size:cover; background-position: center; background-repeat: no-repeat;}
.one-quarter-bg{width:100%; min-height:30vh; background-size:cover; background-position: center; background-repeat: no-repeat;}
.three-quarter-bg{width:100%; min-height:60vh; background-size:cover; background-position: center; background-repeat: no-repeat;}

.divider, .divider0{height:1px; background-color: #EAEAEA; width: 100%; float:left; margin-top:20px;margin-bottom:20px;}
.divider0{margin:0;}
.bg-transparent-white{ background: rgba(255,255,255, 0.8); }
.top-divider{ border-top: 1px solid #E8E8DE;}
.bottom-divider{ border-bottom: 1px solid #E8E8DE;}
.fixed-bottom{ padding-top:16px; padding-bottom:16px; border:0; position: fixed;}

.h-drag-container{width:100%; height:auto; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;}
.h-drag-container::-webkit-scrollbar{ display: none; }
.h-overflow-container{ width:max-content; }
.dragscroll{ overflow: auto;}

.flex3{ flex:0.3;}
.flex33{ flex:0.33;}
.flex35{ flex:0.35;}
.flex4{ flex:0.4;}
.flex5{ flex:0.5;}
.flex55{ flex:0.55;}
.flex6{ flex:0.6;}
.flex7{ flex:0.7;}

.bg-home{
    background-size: 40% auto, cover; background-position: left top, center; background-repeat: no-repeat;
}
.bg-team-register{
    background-size: 40% auto, 40% auto, cover; background-position: left top, right bottom, center; background-repeat: no-repeat;
}
.bg-match-register{
    background-size: 40% auto, 40% auto; background-position: left top, right bottom; background-repeat: no-repeat;
}
.bg-about{
    width:100%; margin-top:-10%; z-index:100; position: relative;
    background-size:cover; background-position: center; background-repeat: no-repeat;
}
.bg-about.about-final{ margin-top: 0;}
.blurry {
    height:30vh; margin-top: -10px;
    background-color: #000; opacity:0.8; box-shadow: black 0 0 10vh 60px;
}
.blurry-base {
    height:100px; margin-top: -10px;
    background-color: #3D2360; opacity:0.8; box-shadow: #3D2360 0 0 20px 60px;
}
.bg-final{ background-image: none!important;}
.success-register-team{overflow-y:auto;}
.success-register-team img{width:300px;}
.success-register-team::-webkit-scrollbar{ display: none; }
.about-item{ flex:0.5; line-height: 40px!important;}
.bg-reward{ background-color: #3D2360; }
.bg-reward img{ width: 60%; min-width:200px; height:auto; z-index: 100; margin-top:-20%; margin-bottom:40px; margin-right:30px;}
.bg-schedule{ background-size: cover; background-position: center top; background-repeat: no-repeat;}
.bg-field{ background-size: 100% auto; background-position: center bottom; background-repeat: no-repeat;}

.match-table{ width:100%; background-color: #fff;}
.match-table .header{background-color: #3D2360; color: #D6DE23; padding:24px; text-transform: uppercase;}
.match-item{ color: #3D2360; background-color: rgba(255,255,255,0.4); padding:24px; padding-top:0;}
.match-table .item:first-child{ padding-top:32px;}
.match-table .coming-soon{ width:30%;}
.match-team-logo{ width:56px; height:56px; background-repeat: no-repeat; background-size: contain; background-position: center; }
.match-item, .match-item .d-flex{gap:24px;}
.match-header{ text-align: left; padding:12px 24px; text-transform: uppercase; color:#333333; font-family:'Metropolis-Bold';}
.match-item-team{ flex:0.45;}
.match-item-stat{ flex:0.1;}

.schedule-place{ color: #333333;}
.home-schedules .schedule-place{ color: #888888;}
.box-sponsor{float:right;}

.divider-title{ background-color: #D6DE23; height:4px; width:125px; margin-top:8px; margin-bottom:12px;}
.input-file{display: none;}

.upload-photo-example, .upload-photo{ width:124px; height:124px;}
.upload-photo-example{ margin-right:24px;}
.upload-photo{  background-color:#F8F7F7; cursor:pointer; background-size: cover; background-repeat: no-repeat; background-position: center;}

.err-msg{color: #EC008B; font-size:14px; font-style: italic;}
.info-msg{color: #EC008B; font-size:14px; font-style: italic;}

.contact-fixed{ cursor:pointer; position:fixed; z-index:1000; bottom: 30%; right:0; padding:22px; background-color: #25D366; border-radius: 100px 0 0 100px;}
.contact-fixed:hover span{ display: block;}
.contact-fixed span{ margin-left:22px; display: none;}
.contact-fixed i{ width: 32px;height:32px;}

.confirm-tnc {cursor: pointer!important;}
.confirm-tnc i{ background-repeat:no-repeat; background-size:contain; background-position: center; display:block; width:20px;height:20px;}
.confirm-tnc span{ color: #EC008B;}
.tnc-box p{ font-size: 14px; }

.menu-sidebar{
    width: 100vw; height: 100vh; top: 0; right: 0; display:none; min-width:200px;
    z-index: 1001; position: fixed; background-color: #ffffff;
}
.menu-list a{ display:block; color:#3D2360; font-family: 'Metropolis-Bold'; font-size: 14px; text-transform: uppercase; margin: 16px 0;}
.sidebar-container{ padding: 30px 16px;}
.btn-menu-close{ display:block; width: 24px; height: 24px; cursor: pointer; opacity:1!important;
     background-repeat: no-repeat; background-size: contain; background-position: center;}
.header-breadcrumb{ background-color: #3D2360; min-height:52px; color:#ffffff; padding:10px 0 14px; }
.header-breadcrumb a{ color:#ffffff!important; font-family: Metropolis-Regular;}
.header-breadcrumb a.active{ color:#D6DE23!important;}
.header-breadcrumb a, .header-breadcrumb span{float:left; margin-top:4px;}

.activity-img{ box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.18); padding:16px; }
.activity-desc{ margin-top:16px; font-size:14px; line-height: 28px;}
.activity-text{ margin-top: 20px;}
.activity-container{ margin-top:48px; }

.message-log{
    border-radius:4px; border:1px solid #EC008B; color:#EC008B; padding:12px 10px; margin:40px 0 10px; background-color: rgba(236, 0, 139, 0.2);
}
.message-log *{margin-bottom:0!important;}
.message-log.success{ border-color: #D6DE23; background-color: #D6DE23; color: #888888;}

.accordion-header{ font-family: 'Metropolis-Bold'; cursor: pointer; padding: 12px 0; border-bottom:1px solid #EAEAEA; margin-bottom:16px;
    background-position: center right; background-repeat: no-repeat; background-size: 32px;
}
.accordion-header.active{ }
.accordion-content{font-size:14px;}
.accordion-content > div{margin-bottom:16px;}
.accordion-faq .accordion-header{font-family:'Metropolis-Regular'; font-size:14px;}

.help-rte{ margin-top:16px;}
.help-rte a, .help-rte a:hover, .help-rte a:active, .help-rte a:focus{color:#EC008B!important;}
.help-rte img.not-found, .not-found{ margin: 40px 0; width:250px;}
.title-help{ margin-bottom:24px; margin-top:-12px;}

.region-segment .accordion-header{ border-bottom: none; margin-bottom:0;}
.region-segment .accordion-content{ padding-left:16px; border-bottom: 1px solid #EAEAEA; padding-top:8px;}
.region-segment .accordion-content div{ cursor: pointer; }

.team-item{ padding:8px 16px; margin-bottom:24px; width:100%; box-shadow: 0 0 6px 0 rgba(0,0,0,.2);}
.team-item .team-logo, .teams-logo{ width:56px; height:56px; background-repeat: no-repeat; background-size: cover; background-position: center;margin-left:16px;
}
.teams-logo{ margin-left:0; margin-right: 24px; width:76px; height:76px;}
.team-item .team-name{ width: calc(100% - 72px);}
.team-item .team-logo-box{ width: 72px;}
.team-tools{ padding-top:60px; padding-bottom:40px;}
.filter-box{ min-height: 50vh; border-right: 1px solid #EAEAEA;}
.position-absolute-bottom{ position: absolute; bottom: 0; overflow-y: auto; }
.position-absolute-top{ position: absolute; top: 0; overflow-y: auto; }
.sticky::-webkit-scrollbar {width:0;}

.loader-section{ width:100%; min-width:200px; height:40vh; background-size: 100px; background-repeat: no-repeat; background-position: center;}
.loader-section.mini{ height:60px; background-size: 60px; }
.filter-row div.active{ color: #EC008B; }

.teams-detail{ margin-top:40px; }
.team-player-item{box-shadow: 0 0 4px 0 rgba(0,0,0,.18); padding:12px; border-radius: 4px; margin-bottom:24px;}
.player-image{ width:56px; height:56px; border-radius:50%; background-repeat: no-repeat; background-size: cover; background-position: center;}

.title-through{margin: 0 auto; padding: 0 10px; max-width:max-content;margin-top:-16px; position: relative;}
.divider-through{ border:1px solid #D6DE23; width: 100%; max-width: 400px; margin: 0 auto; position: relative;}
.sponsors { gap: 12px;}
.sponsors img{ width: 150px; height: auto; max-width: 100%; margin-bottom:16px;}
.activity-other img{ width:54px; height:auto; margin-bottom:8px;}
.special-guest{ gap:72px;}
.special-guest .img { border-radius: 50%; width:170px; height: 170px; background-size: cover; background-position: center; background-repeat: no-repeat; }

.qr{ border-radius: 12px; box-shadow: 0 0 6px 0 rgba(236, 0, 139, 0.16); padding:5px; width:max-content; background-size: cover;}

.partners { gap: 12px;}
.partners img{ width:150px; max-width:100%;}
.partners > .d-flex{ flex:0.5;}

.dropdown-header{ display:none; padding:0; z-index: 1000; }
.dropdown-box{
    width: 200px; margin-top: 65px; padding:10px; z-index: 902; min-height: 70px; max-height: 350px;
    background-color: #ffffff; border:1px solid #dee2e6; border-top-width:0; color:#33303E; position:relative; overflow-y: auto;
}
.menu-dropdown{padding:16px; padding-bottom:0;}
.dropdown-shadow{ z-index: 901; width:100%; height:100%; position:absolute; top:0; }

.carousels-item > div{ cursor: grab; height: 80vh; color: #fff; justify-content: center; padding: 24px;
    transition: width 0.5s;
    background-size: cover; background-repeat: no-repeat; background-position: center;}
.carousels-item .title{text-align: center;}
.carousels-item .c-description{display: none;}
.tns-nav{ text-align: center; }
.tns-nav button{ border-radius:100%; width:16px!important; min-height:16px!important; border-width: 0;
    margin-top: 24px; margin-left:4px; margin-right:4px; background-color: #E0D3E6;
    cursor: pointer; box-shadow: none; outline:0; }
.tns-nav button.tns-nav-active{ background-color: #EC008B;}



.header-dropdown{
    border: none; box-shadow: 0 0 4px rgba(0, 0, 0, 0.16); clip-path: inset(0px -4px -4px -4px); margin-top: 4px;
    border-radius: 4px; outline: none; padding-top:0; padding-bottom: 0; border-top-left-radius: 0; border-top-right-radius: 0;
}
.header-dropdown .dropdown-item:last-child{ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;}
.header-dropdown .dropdown-item:hover{
    background-color: #EC008B; color:#ffffff;
}
.header-dropdown .dropdown-item:focus, .header-dropdown .dropdown-item:active, .header-dropdown .dropdown-item.active  {
    background-color: #3D2360; color:#ffffff;
}

.header-sub-menu > a:first-child{ margin-top:0;}
.header-sub-menu > a { padding-left:24px;}

.custom-underline {
    display: inline-block;
    border-bottom: 10px solid #EC008B;
    padding-bottom: 4px;
}

/* Small Screen Style */
@media (max-width: 576px) {
}

/* Tablet Style */
@media (max-width:991px){
    .font-sm-4{font-size:4px!important; line-height: 10px;}
    .font-sm-8{font-size:8px!important; line-height: 14px;}
    .font-sm-10{font-size:10px!important; line-height: 16px!important;}
    .font-sm-12{font-size:12px!important; line-height: 20px!important;}
    .font-sm-13{font-size:13px!important; line-height: 21px!important;}
    .font-sm-14{font-size:14px!important; line-height: 22px!important;}
    .font-sm-16{font-size:16px!important; line-height: 26px!important;}
    .font-sm-17{font-size:17px!important; line-height: 27px!important;}
    .font-sm-18{font-size:18px!important; line-height: 28px!important;}
    .font-sm-20{font-size:20px!important; line-height: 32px!important;}
    .font-sm-22{font-size:22px!important; line-height: 34px!important;}
    .font-sm-24{font-size:24px!important; line-height: 36px!important;}
    .font-sm-28{font-size:28px!important; line-height: 40px!important;}
    .font-sm-30{font-size:30px!important; line-height: 42px!important;}
    .font-sm-36{font-size:36px!important; line-height: 52px!important;}
    .font-sm-40{font-size:40px!important; line-height: 52px!important;}
}

/* Mobile Style */
@media (max-width: 767px) {
    body{font-size:12px;}
    .btn{font-size:12px; padding:10px 16px;}
    .mobile-no-padding{ padding:0!important;}
    .footer-default{padding-top:45px; padding-bottom:45px;}
    .header-logo{ width: 50px; height:35px; margin-right:0;}
    .header-dropdown{ display: none!important;}

    .flex25m{ flex:0.25;}
    .flex3m{ flex:0.3;}
    .flex4m{ flex:0.4;}
    .flex5m{ flex:0.5;}
    .flex6m{ flex:0.6;}
    .flex65m{ flex:0.65;}
    .flex7m{ flex:0.7;}
    .flexm{ flex:1;}

    .font-m-4{font-size:4px!important; line-height: 10px;}
    .font-m-8{font-size:8px!important; line-height: 14px;}
    .font-m-10{font-size:10px!important; line-height: 16px!important;}
    .font-m-12{font-size:12px!important; line-height: 20px!important;}
    .font-m-13{font-size:13px!important; line-height: 21px!important;}
    .font-m-14{font-size:14px!important; line-height: 22px!important;}
    .font-m-16{font-size:16px!important; line-height: 26px!important;}
    .font-m-17{font-size:17px!important; line-height: 27px!important;}
    .font-m-18{font-size:18px!important; line-height: 28px!important;}
    .font-m-20{font-size:20px!important; line-height: 32px!important;}
    .font-m-22{font-size:22px!important; line-height: 34px!important;}
    .font-m-24{font-size:24px!important; line-height: 36px!important;}
    .font-m-28{font-size:28px!important; line-height: 40px!important;}
    .font-m-30{font-size:30px!important; line-height: 42px!important;}
    .font-m-36{font-size:36px!important; line-height: 52px!important;}
    .font-m-40{font-size:40px!important; line-height: 52px!important;}

    .modal-full .modal-dialog{margin:0 auto; height:100%;}
    .modal-full .modal-content{height:100%; border:0; border-radius:0;}
    .modal .btn-close-modal{ right:10px; top:10px;}
    .modal-auth .modal-body{ width:100%;}

    .modal-bottom .modal-dialog{ overflow:hidden; max-width: 100% !important; margin:0; height: 100%;}
    .modal-bottom .modal-content { position: absolute; bottom: 0!important; left: 0; right: 0;max-width: 100%; border-top-left-radius:50px; border-top-right-radius:50px; padding: 40px 16px 20px; }

    .btn-register-team{ margin-top: -30%; z-index:200;}
    .btn-fixed-bottom{ position: fixed; bottom:10%; left: 50%; transform: translateX(-50%); margin:0!important;}
    .bg-about{background-image: none;}
    .about-item{ flex:1; line-height: 26px!important;}
    .bg-reward{ margin-top:130px; }
    .bg-reward img{ width: 95%;margin-right:5px; margin-top:-100px; min-width: 100px; max-width:200px; margin-bottom:0;}
    .match-table .coming-soon{ width:50%;}
    .box-sponsor{float:left;}
    ::placeholder,.select2-selection__placeholder{ font-size:12px; }

    .btn-upload, .btn-upload:hover, .btn-upload:active, .btn-upload:focus{
        font-size:12px; padding:8px 14px;
    }
    .err-msg{font-size:10px; }
    .info-msg{font-size:10px; }
    .contact-fixed{ padding:12px; }
    .contact-fixed span, .contact-fixed:hover span{ display: none;}
    .contact-fixed i{ width:20px; height:20px;}

    .success-register-team img{width:200px;}
    .accordion-header{font-size:14px;}
    .accordion-content, .accordion-faq .accordion-header{font-size:12px;}

    .team-tools{ padding-top:24px; padding-bottom:24px;}

    .teams-logo{ width:36px; height:36px; }
    .team-player-item{ margin-bottom:16px;}
    .teams-detail{ margin-top:20px;}

    .title-through{margin-top:-12px;}

    .match-item, .match-item .d-flex{ gap:4px;}
    .match-item-team{ flex:0.4;}
    .match-item-stat{ flex:0.2;}
    .match-team-name{ min-height: 78px; margin-top:8px; margin-bottom:8px;}

    .carousels-item > div{  justify-content: end; }
    .carousels-item .title{ text-align: left;}
    .carousels-item .c-description{display: block;}

    .sponsors { gap: 40px;}
    .sponsors img{ width: 120px; height: auto; max-width: 100%; margin-bottom:16px;}

    .partners { gap: 40px;}
    .partners img{ width: 120px; height: auto; max-width: 100%; margin-bottom:16px;}
}
/* Desktop Style */
@media (min-width: 768px) {
    .btn-register-team{ margin-top: -40%;z-index:200;}
    .float-reg{ margin-left:30%;}
    .bg-final .btn-register-team{ margin-top:-9%;}

    .bg-about{padding:300px 0 100px; }
    .footer-page{ text-align: right;}
    .menu-sidebar{ display: none!important;}

    .activity-container{ margin-top:80px; }
    .activity-img{ flex:0.5;}
    .activity-text{ flex:0.5; margin-top:0;}
    .activity-container.flex-sm-row-reverse .activity-text{ margin-right: 40px;}
    .activity-container.flex-sm-row .activity-text{ margin-left: 40px; }
    .team-item{ min-height: 95px;}
    .teams-detail{margin-bottom:20px;}

    /*.carousels-item > div { width: 250px;}*/
    .carousels-item:hover > div, .carousels-item.tns-slide-current > div { justify-content: end; /*width: 400px;*/}
    .carousels-item:hover .title, .carousels-item.tns-slide-current .title{ text-align: left;}
    .carousels-item:hover .c-description, .carousels-item.tns-slide-current .c-description{display: block;}
}
@media (min-width:992px){
    .btn-fixed-bottom{ position: fixed; bottom:30px; left: 50%; transform: translateX(-50%); margin:0!important;}
}
@media (min-width:1200px){

}