@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');

:root {
  --green-color: #4dac34;
  --gray-color: #f4f4f4;
  --dark-gray-color: #526169;
  --white-color: #fff;
  --dark-color: #000;
  --dark-blue-color: #091c3e;
  --brown-color: #757575;
  --red-color: #ff0000;
  --yellow-color: #DFCB1F;
  --dark-green-color: #357d13;
  --orange-color: #FFA500;
  --countries-url: "/layout/images/countries/";
}

/* Colours */ 
.bg-color1{
    background-color: var(--green-color);
    color: var(--white-color);
    font-weight: bold;
}
.bg-color2{
    background-color: var(--gray-color);
}
.bg-color-dark{
    background-color: var(--dark-color) !important;
}
.bg-color-dark-blue{
    background-color: var(--dark-blue-color) !important;
}
.bg-color-dark-grey{
    background-color: var(--dark-gray-color) !important;
}
.bg-white {
    background-color: var(--white-color) !important;
}
.bg-brown {
    background-color: var(--brown-color) !important;
}
.bg-color-red {
    background-color: var(--red-color) !important;
}
.bg-color-yellow {
    background-color: var(--yellow-color) !important;
}
.bg-color-orange {
    background-color: var(--orange-color) !important;
}
.bg-color-dark-green {
    background-color: var(--dark-green-color) !important;
}


.btn-color1, .btn-color-dark.active{
    background-color: var(--green-color);
    color: var(--white-color);
    font-weight: bold;
}
.btn-color2{
    background-color: var(--gray-color);
}
.btn-color-dark{
    background-color: var(--dark-color) !important;
    color: var(--white-color);
}
.btn-color-dark-blue{
    background-color: var(--dark-blue-color) !important;
    color: var(--white-color);
}
.btn-color-red{
    background-color: var(--red-color) !important;
    color: var(--white-color);
}
.btn-color-orange {
    background-color: var(--orange-color) !important;
    color: var(--white-color);
}
.btn-color-yellow {
    background-color: var(--yellow-color) !important;
    color: var(--white-color);
}
.btn-outline-color1 {
    color: var(--green-color);
    border-color: var(--green-color);
}
.btn-outline-color2 {
    color: var(--green-color);
    border-color: var(--gray-color);
}
.btn-outline-color-dark {
    color: var(--dark-color);
    border-color: var(--dark-color);
}
.btn-outline-color-dark-blue {
    color: var(--dark-blue-color);
    border-color: var(--dark-blue-color);
}
.btn-outline-color-red {
    color: var(--red-color);
    border-color: var(--red-color);
}

.ft-color-black {
    color: var(--dark-color) !important;
}
.ft-color-white {
    color: var(--white-color) !important;
}
.ft-color-green {
    color: var(--green-color) !important;
}
.ft-color-red {
    color: var(--red-color) !important;
}
.ft-color-dark-blue {
    color: var(--dark-blue-color) ;
}
.ft-color-yellow {
    color: var(--yellow-color) ;
}
.ft-color-orange {
    color: var(--orange-color) ;
}
.ft-color-gray {
    color: var(--gray-color) ;
}
.ft-color-dark-gray {
    color: var(--dark-gray-color) ;
}

.border-color-dark-grey{
    border-color: var(--dark-gray-color) !important;
}

/* width */
.w-90{
    width: 90% !important;
}
.w-80{
    width: 80% !important;
}
.w-70{
    width: 70% !important;
}
.w-60{
    width: 60% !important;
}
.w-40{
    width: 40% !important;
}
.w-30{
    width: 30% !important;
}
.w-20{
    width: 20% !important;
}
.w-15{
    width: 15% !important;
}
.w-10{
    width: 10% !important;
}
.w-5{
    width: 5% !important;
}

/* width */
.mw-90{
    max-width: 90% !important;
}
.mw-80{
    max-width: 80% !important;
}
.mw-70{
    max-width: 70% !important;
}
.mw-60{
    max-width: 60% !important;
}
.mw-40{
    max-width: 40% !important;
}
.mw-30{
    max-width: 30% !important;
}
.mw-20{
    max-width: 20% !important;
}
.mw-15{
    max-width: 15% !important;
}
.mw-10{
    max-width: 10% !important;
}
.mw-5{
    max-width: 5% !important;
}

/* height */
.h-10{
    height: 10% !important;
}
.h-90{
    height: 90% !important;
}
.h-80{
    height: 80% !important;
}
.h-70{
    height: 70% !important;
}
.h-60{
    height: 60% !important;
}
.h-40{
    height: 40% !important;
}
.h-30{
    height: 30% !important;
}
.h-20{
    height: 20% !important;
}
.h-50sm100md{
    height: 50% !important;
}

.h-20p{
    height: 20px !important;
}

.overflow-y-hidden{
    overflow-y: hidden;
}

.min-h-80{
    min-height: 80px !important;;
}
.min-h-60{
    min-height: 60px !important;;
}
.min-h-20{
    min-height: 20px !important;;
}

/*border-radius*/
.rounded-top-end {
    border-top-right-radius: 0.25rem !important;
}
.rounded-bottom-end {
    border-bottom-right-radius: 0.25rem !important;
}
.rounded-top-start {
    border-top-left-radius: 0.25rem !important;
}
.rounded-bottom-start {
    border-bottom-left-radius: 0.25rem !important;
}

/* Text size */
.fs-7 {
    font-size: 0.9rem !important;
}
.text-small{
    font-size: 0.80rem !important;
}
.text-smaller{
    font-size: 0.75rem !important;
}
.text-tiny{
    font-size: 0.6rem !important;
}
.max-w-30{
    max-width: 30px;
}
.fs-60{
    font-size: 60px !important;
}
/* Customization */
.link {
    cursor: pointer;
}
.link:hover {
    text-decoration: underline;
    color: var(--dark-blue-color);
    font-weight: bold;
}
.navbar-brand img {
    height: 30px;
    content: url('../images/imgs/logo-light-h40.png');
}
.navbar-toggler-icon{
    width: 30px !important;
    height:30px !important;
}
.navbar-toggler:focus {
    box-shadow: none;
}
.nav-link{
    color: var(--white-color)!important;
}
ul.dropdown-menu.bg-dark a.dropdown-item:hover {
    background-color: var(--green-color);
    color: var(--white-color);
    font-weight: bold;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--green-color)!important;
    font-weight: bold;
}
.nav-tabs.bg-color-dark .nav-link.active{
    background-color: var(--green-color)!important;
}
.evo-note-player{
    height: 20px;
    width: 20px;
    line-height: 20px;
}
.evo-note-player-small{
    height: 16px;
    width: 16px;
    line-height: 16px;
}
.clt-rank{
    height: 30px;
    width: 30px;
    line-height: 30px;
}
.evo-arrow-hau{
    color : var(--green-color);
}
.evo-arrow-sta{
    color : var(--dark-color);
}
.evo-arrow-bai{
    color : var(--red-color);
}

.img-wh140 {
    height: 140px;
    width: 140px;
}

.img-wh100 {
    height: 100px;
    width: 100px;
}
.img-wh80 {
    height: 80px;
    width: 80px;
}
.img-wh60 {
    height: 60px;
    width: 60px;
}
.img-wh30 {
    height: 30px;
    width: 30px;
}
.img-wh20 {
    height: 20px;
    width: 20px;
}
.img-h100 {
    height: 100px;
}
.img-h80 {
    height: 80px;
}
.img-h70 {
    height: 70px;
}
.img-h60 {
    height: 60px;
}
.img-h50 {
    height: 50px;
}
.img-h40 {
    height: 40px;
}
.img-h30 {
    height: 30px;
}
.img-h20 {
    height: 20px;
}
.img-h15 {
    height: 15px;
}

.img-w100 {
    width: 100px;
}
.logo-wh-15-20{
    width:15px;
    height:15px;
}

a.plus {
    height: 25px;
    width: 25px;
    background-color: #091c3e;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 25px;
    font-size: 20px;
    font-weight: bolder;
    color: #fff;
    cursor: pointer;
}

.indexClubBadge {
    width: 120px;
    height: 120px;
    background: #fff;
}
.indexClubBadge140 {
    width: 160px;
    height: 160px;
    background: #fff;
}
.indexClubBadge60 {
    width: 80px;
    height: 80px;
    background: #fff;
}


span.result-span {
    width: 16px;
    display: block;
    margin-left: 5px;
    height: 16px;
    max-height: 16px;
}
span.result-span.victoire{
    background: url("/layout/images/imgs/victoire.png");
}
span.result-span.defaite{
    background: url("/layout/images/imgs/defaite.png");
}
span.result-span.nulle{
    background: url("/layout/images/imgs/equite.png");
}
span.badge-goal{
    background: url("/layout/images/imgs/goal.png") no-repeat;
    background-position: center;
    background-size: 6px;
    height: 6px;
    width: 6px;
}

div.horizontal-pitch{
    width: 800px;
    height: 510px;
    background-image: url('/layout/images/imgs/terrain.png');
    flex: none;
}
div.vertical-pitch{
    flex: none;
    width: 100%;
    background-image: url(/layout/images/imgs/terrain-vert.png);
    background-size: 100%;
    height: 160vw;
}

div.tabcup{
    width: 900px;
    height: 900px;
    flex: none;
    overflow: auto;
}
div.tabcup > .row{
    width: 700px;
    overflow-x: scroll;
}

div.connector-4{
    height:112px;
}
div.connector-2{
    height:224px;
}
div.connector-1{
    height:448px;
}

div.pitch-formation{
    background: url('/layout/images/imgs/terrain-vert.png') no-repeat bottom;
    background-size: 100%;
    height: 500px;
}
div.dropzone-player{
    width: 23%;
    height: auto;
    min-height: 70px;
}
div.drop-player{
    /*width: 100%;
    height: 100%;
    min-height: 70px;*/
    max-width: 110px;
    max-height: 85px;
    width: 100%;
    height: 100%;
    min-height: 75px;
}
div.drop-number{
    color: var(--white-color) !important;
    font-size: 25px;
    font-weight: bold;
    /*height: 55px;*/
    min-height: 55px;
    text-shadow: 0 0 2px black;
}

div.drag-player{
    /*
    max-width: 75px;
    max-height: 68px;
    width: 100%;
    height: auto;
    */
    max-width: 110px;
    max-height: 85px;
    width: 100%;
    height: 100%;
    min-height: 75px;
}
div.drag-player-photo{
    width: 40px;
    /*height: 50px;*/
    overflow-y: hidden;
    overflow-x: hidden;
    position:relative;
}
div.drag-player-photo img.img-h70{
    height: 60px;
}
div.drag-player-photo img.drag-player-photo-img{
    position: absolute;
}
i.drag-player-availibility-icon{
    position:relative;
}
img.drag-player-photo-logo{
    width: 20px;
    height: 20px;
    bottom:0;
    right:0;
    position:relative;
}
div.drag-player-right{
    /*width: 35px;
    height: 50px;*/
    width: 60px;
    height: 50px;
}
div.drag-player-right img.img-wh30 {
    height: 20px;
    width: 20px;
}
div.drag-player-number span{
    /*font-size: 20px;*/
    font-size: 10px;
}

div.store-pitch div.drag-player{
    margin-left: 4px;
    margin-top: 2px;
    margin-bottom: 2px;
}
div.tactic-player-zone{
    width: auto;
    height: 78px;
    margin: auto;
}
div.tactic-player-empty{
    width: 100%;
    height: 60px;
}

.bonus-col img{
    height:70px;
    width: 70px;
    cursor: pointer;
    transition: transform 1s;
    object-fit: contain;
}
.bonus-col label{
    overflow: hidden;
    position: relative;
}
.imgbgchk:checked + label>.tick_container{
    opacity: 1;
}
/*aNIMATION */
.imgbgchk:checked + label>img, .imgbgchk:disabled + label>img{
    /*transform: scale(1.25);*/
    opacity: 0.3;
}
.tick_container {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 80%;
    left: 80%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    cursor: pointer;
    text-align: center;
}
.tick {
    background-color: #4CAF50;
    color: white;
    font-size: 14px;
    /*padding: 6px 12px;*/
    height: 20px;
    width: 20px;
    border-radius: 100%;
}



#alertBlock{
    position: fixed;
    bottom: 5px;
    left:2%;
    width: 96%;
    z-index: 2000;
}
.alert{
    display: none;
}



table.roster-full-details td:first-child {
    position: sticky;
    left: 0;
}
table.roster-full-details td:first-child {
    background-color: var(--white-color);    
}

td.team-roster-player-card{
    width: 60% !important
}
a.btn-player-modal{
    cursor : pointer;
}

div.mercato-basket-accordion-mobile{
    /*max-height: 100vh;*/
    max-height: 100%;
    overflow-y: scroll;
}

#basketColumn a.accordion-button::after {
    margin: auto;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M416 352c-8.188 0-16.38-3.125-22.62-9.375L224 173.3l-169.4 169.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25C432.4 348.9 424.2 352 416 352z'/%3e%3c/svg%3e");
    
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    div.tabcup > .row{
        width: 700px;
        overflow-x: scroll;
    }
    div.dropzone-player{
        /*width: 85px;*/
        width: 110px;
    }
    div.drop-player{
        /*width: 85px;
        height: 78px;*/
        max-width: 110px;
        max-height: 85px;
        width: 110px;
        height: 85px;
    }
    div.drop-number{
        /*height: 60px;*/
        height: 68px;
    }
    div.drag-player{
        /*width: 85px;
        height: 78px;
        max-width: 85px;
        max-height: 78px;*/
        
        max-width: 110px;
        max-height: 85px;
        width: 110px;
        height: 85px;
    }
    
    .text-small{
        font-size: 0.85rem !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    
    .navbar-brand img {
        height: 80px;
        content: url('../images/imgs/logo-full-h80.png'); 
    }
    
    div.drag-player-photo{
        /*width: 50px;
        height: 60px;*/
        width: 50px;
        height: 68px;
        overflow-y: hidden;
    }
    div.drag-player-photo img.img-h70{
        height: 70px;
    }
    div.drag-player-right{
        /*width: 35px;
        height: 60px;*/
        width: 60px;
        height: 68px;
    }
    div.drag-player-right img.img-wh30 {
        height: 30px;
        width: 30px;
    }
    div.drag-player-number span{
        /*font-size: 20px;*/
        font-size: 16px;
    }
    
    td.team-roster-player-card{
        width: 50% !important
    }
    
    .h-50sm100md{
        height: 100% !important;
    }
    
    .logo-wh-15-20{
        width:15px;
        height:15px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    div.tabcup > .row{
        width: 100%;
        overflow-x: unset;
    }
    td.team-roster-player-card{
        width: 40% !important
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    
    div.tactic-player-zone{
        width: 85px;
    }
}


/* Pays */

.pays{
    width: 20px;
    max-height: 13px;
    height: 13px;
    display: block;
    margin-left: 10px;
}
.pays-fra{background: url("/layout/images/countries/FRA.png");}
.pays-mco{background: url("/layout/images/countries/MNE.png");}
.pays-nga{background: url("/layout/images/countries/NIG.png");}
.pays-cmr{background: url("/layout/images/countries/CAM.png");}
.pays-prt{background: url("/layout/images/countries/POR.png");}
.pays-srb{background: url("/layout/images/countries/SER.png");}
.pays-col{background: url("/layout/images/countries/COL.png");}
.pays-arg{background: url("/layout/images/countries/ARG.png");}
.pays-nld{background: url("/layout/images/countries/HOL.png");}
.pays-bra{background: url("/layout/images/countries/BRE.png");}
.pays-pol{background: url("/layout/images/countries/POL.png");}
.pays-ven{background: url("/layout/images/countries/VEN.png");}
.pays-bie{background: url("/layout/images/countries/BLR.png");}
.pays-swe{background: url("/layout/images/countries/SUE.png");}
.pays-tgo{background: url("/layout/images/countries/TOG.png");}
.pays-mad{background: url("/layout/images/countries/MAD.png");}
.pays-mar{background: url("/layout/images/countries/MAR.png");}
.pays-cvi{background: url("/layout/images/countries/CIV.png");}
.pays-dza{background: url("/layout/images/countries/ALG.png");}
.pays-sen{background: url("/layout/images/countries/SEN.png");}
.pays-mli{background: url("/layout/images/countries/MLI.png");}
.pays-gin{background: url("/layout/images/countries/GUI.png");}
.pays-dnk{background: url("/layout/images/countries/DAN.png");}
.pays-gha{background: url("/layout/images/countries/GHA.png");}
.pays-ita{background: url("/layout/images/countries/ITA.png");}
.pays-ury{background: url("/layout/images/countries/URU.png");}
.pays-tur{background: url("/layout/images/countries/TUR.png");}
.pays-hrv{background: url("/layout/images/countries/CRO.png");}
.pays-caf{background: url("/layout/images/countries/RCE.png");}
.pays-isl{background: url("/layout/images/countries/ISL.png");}
.pays-bel{background: url("/layout/images/countries/BEL.png");}
.pays-usa{background: url("/layout/images/countries/USA.png");}
.pays-deu{background: url("/layout/images/countries/ALL.png");}
.pays-cod{background: url("/layout/images/countries/CON.png");}
.pays-tun{background: url("/layout/images/countries/TUN.png");}
.pays-che{background: url("/layout/images/countries/SUI.png");}
.pays-ben{background: url("/layout/images/countries/BEN.png");}
.pays-moz{background: url("/layout/images/countries/MOZ.png");}
.pays-mdg{background: url("/layout/images/countries/MAD.png");}
.pays-alb{background: url("/layout/images/countries/ALB.png");}
.pays-bfa{background: url("/layout/images/countries/BUF.png");}
.pays-nor{background: url("/layout/images/countries/NOR.png");}
.pays-zaf{background: url("/layout/images/countries/AFS.png");}
.pays-cze{background: url("/layout/images/countries/RTC.png");}
.pays-eco{background: url("/layout/images/countries/ECO.png");}
.pays-rwa{background: url("/layout/images/countries/RWA.png");}
.pays-tca{background: url("/layout/images/countries/TCA.png");}
.pays-gab{background: url("/layout/images/countries/GAB.png");}
.pays-mrt{background: url("/layout/images/countries/MAU.png");}
.pays-hti{background: url("/layout/images/countries/HAI.png");}
.pays-cog{background: url("/layout/images/countries/RDC.png");}
.pays-rou{background: url("/layout/images/countries/ROU.png");}
.pays-rus{background: url("/layout/images/countries/RUS.png");}
.pays-jpn{background: url("/layout/images/countries/JAP.png");}
.pays-esp{background: url("/layout/images/countries/ESP.png");}
.pays-cpv{background: url("/layout/images/countries/CAV.png");}
.pays-svn{background: url("/layout/images/countries/SLN.png");}
.pays-kor{background: url("/layout/images/countries/CDS.png");}
.pays-eng{background: url("/layout/images/countries/ANG.png");}
.pays-zwe{background: url("/layout/images/countries/ZIM.png");}
.pays-gnb{background: url("/layout/images/countries/GUB.png");}
.pays-cri{background: url("/layout/images/countries/CRI.png");}
.pays-chl{background: url("/layout/images/countries/CHI.png");}
.pays-can{background: url("/layout/images/countries/CAN.png");}
.pays-grc{background: url("/layout/images/countries/GRE.png");}
.pays-aut{background: url("/layout/images/countries/AUT.png");}
.pays-egy{background: url("/layout/images/countries/EGY.png");}
.pays-wls{background: url("/layout/images/countries/GAL.png");}
.pays-ukr{background: url("/layout/images/countries/UKR.png");}
.pays-uzb{background: url("/layout/images/countries/OUZ.png");}
.pays-arm{background: url("/layout/images/countries/ARM.png");}
.pays-jam{background: url("/layout/images/countries/JAM.png");}
.pays-pan{background: url("/layout/images/countries/PAN.png");}
.pays-ksv{background: url("/layout/images/countries/KOS.png");}
.pays-ecu{background: url("/layout/images/countries/EQU.png");}
.pays-jor{background: url("/layout/images/countries/JOR.png");}
.pays-ago{background: url("/layout/images/countries/AGO.png");}
.pays-hun{background: url("/layout/images/countries/HON.png");}
.pays-mar{background: url("/layout/images/countries/MAR.png");}
.pays-mlt{background: url("/layout/images/countries/MLT.png");}
.pays-bdi{background: url("/layout/images/countries/BUR.png");}
.pays-com{background: url("/layout/images/countries/COM.png");}
.pays-aus{background: url("/layout/images/countries/AUS.png");}
.pays-blr{background: url("/layout/images/countries/BLR.png");}
.pays-bih{background: url("/layout/images/countries/BOS.png");}
.pays-bgr{background: url("/layout/images/countries/BUL.png");}
.pays-fin{background: url("/layout/images/countries/FIN.png");}
.pays-gmb{background: url("/layout/images/countries/GAM.png");}
.pays-geo{background: url("/layout/images/countries/GEO.png");}
.pays-gnq{background: url("/layout/images/countries/GIN.png");}
.pays-hnd{background: url("/layout/images/countries/HND.png");}
.pays-irn{background: url("/layout/images/countries/IRA.png");}
.pays-irq{background: url("/layout/images/countries/IRQ.png");}
.pays-irl{background: url("/layout/images/countries/IRL.png");}
.pays-isr{background: url("/layout/images/countries/ISR.png");}
.pays-jpn{background: url("/layout/images/countries/JAP.png");}
.pays-ken{background: url("/layout/images/countries/KEN.png");}
.pays-lva{background: url("/layout/images/countries/LET.png");}
.pays-ltu{background: url("/layout/images/countries/LIT.png");}
.pays-lux{background: url("/layout/images/countries/LUX.png");}
.pays-mac{background: url("/layout/images/countries/MAC.png");}
.pays-mys{background: url("/layout/images/countries/MAL.png");}
.pays-mex{background: url("/layout/images/countries/MEX.png");}
.pays-mda{background: url("/layout/images/countries/MOL.png");}
.pays-nam{background: url("/layout/images/countries/NAM.png");}
.pays-nzl{background: url("/layout/images/countries/NZL.png");}
.pays-ouz{background: url("/layout/images/countries/OUZ.png");}
.pays-pry{background: url("/layout/images/countries/PAR.png");}
.pays-per{background: url("/layout/images/countries/PER.png");}
.pays-svk{background: url("/layout/images/countries/SVQ.png");}
.pays-tza{background: url("/layout/images/countries/TAN.png");}
.pays-tto{background: url("/layout/images/countries/TRT.png");}
.pays-zmb{background: url("/layout/images/countries/ZAM.png");}
.pays-are{background: url("/layout/images/countries/ARE.png");}
.pays-sle{background: url("/layout/images/countries/SLE.png");}