* {
    box-sizing: border-box;
    outline: none !important;
    border-color: transparent !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;

}

@font-face {
    font-family: 'Akkurat';
    src: url('Akkurat-Bold.woff2') format('woff2'), url('Akkurat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Akkurat';
    src: url('Akkurat.woff2') format('woff2'), url('Akkurat.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



*:not(.fab):not(.fas) {
    font-family: 'Akkurat', sans-serif !important;
    /*serve ad escludere le icone di fontawesome da questo font-family. Divesamente, non importa le icone da fontawesome*/
}




h1 { font-size: 14px; text-transform:uppercase;}
h2 { font-size: 14px;}
h3 { font-size: 14px;}
h4 { font-size: 12px;}

p { 
	font-size: 14px;
	line-height: 1.8;
}




a {
    text-decoration: none;
	color: inherit;
}
a:hover {
    text-decoration: none;
	color: inherit;
}

.color_white {
	color: #fff !important;
}


.hero-euro-fifa { 
  background-image: url("https://via.placeholder.com/500"); 
  background-color: #ffffff; 
  height: 300px; 
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: contain; 
} 



.modificheEffettuate {
    background-color: var(--success);
    color: white;
    border-radius: 5px;
    font-size: 12px;
	width: 100%;
}

.informazioneDiServizio {
    background-color: #4361df;
    color: white;
    border-radius: 5px;
    font-size: 12px;
	width: 100%;
}

.informazioneWarning {
    background-color: #ffc107;
    color: white;
    border-radius: 5px;
    font-size: 12px;
	width: 100%;
}

.erroreModificheNonEffettuate {
    background-color: #dc3545;
    border-radius: 5px;
    color: white;
    font-size: 12px;
	width: 100%;
}



:root {
    --text-xxs: 7px;
    --text-xs: 10px;
    --text-small: 12px;
    --text-medium: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-xxl: 20px;
	
	
    --main-color: #221e3c ; /* Blu        EX main-green HiBet */
	--main-light-color: #1470c0; /* Blu chiaro         EX dark-green HiBet */
	--main-dark-color: #0a2d4b; /* Blu SCURO        EX dark-green HiBet */
	
    --second-color: #c1ea00; /* Verde acido #c1ea00  #46e100 #93b41e   EX Dark Green */
	--second-light-color: #cff51d; /* Verde acido chiaro      EX Dark Green */
	--second-dark-color: #a6c900; /* Verde acido scuro      EX Dark Green */
	
    --third-color: #bb2363; /* EX Excel Green */
	
	--excel-color: #317237; /* EX Excel Green */
	
	--success: #28a745;
	--danger: #dc3545;
	--warning: #ffc107;
	
    --main-grey: #808080;
    --light-grey: #f5f5f7;
    --extra-light-grey: #d0d0d0;
    --gray-2: #f0f0f0;
    --gray-3: #e0e6ea;
    --gray-4: #d0d3d6;
    --gray-5: #707070;
    --gray-6: #a9a9ab;
    --gray-7: #dfe4e7;
    --gray-8: #babbbb;
	--gray-9: #585858;
	
    --main-border-radius: 5px;
	font-size: var(--text-small);
}

body {
    position: relative;
}

.main_color {color:var(--main-color)}

.text-main-grey {
    color: var(--main-grey);
}


.Status0 {
    background-color: #444444 !important;
    color: white !important;
}



/*  */
/*  */
/*  */


.heightFitContent {
    height: fit-content !important;
    height: -moz-fit-content !important;
}



#headerBarraBianca>.container {
    height: 60px;
}

#headerBarraBianca #disclaimer {
    font-size: var(--text-xs);
    font-weight: 800;
}

#numeriUtentiID {
    font-size: var(--text-small)
}

.pallinoVerde {
    height: 8px;
    width: 8px;
    border-radius: 100%;
    background-color: #00a651;
}

.pallinoRosso {
    height: 8px;
    border-radius: 100%;
    width: 8px;
    background-color: #ff0000;
}

#headerBarraGrigia {
    height: 5px;
    background-color: #808080;
}


#headerBarraHeader {
    background-color: var(--main-color);
	position: sticky;
	top: 0;
	z-index: 10000;
	border-bottom: 3px solid var(--second-color) !important;

}

#headerBarraHeader>.container {
    height: 55px;
	
	
}

#orologioCalendarioID {
    font-size: var(--text-small);
}

#headerBarraHeaderInputContainer input {
    background-color: var(--main-dark-color);
    border-color: var(--main-dark-color);
    border: 2px solid var(--main-dark-color);
    color: white;
}

.recuperaPassword h4 {
    margin-bottom: 0 !important;
}

.recuperaPassword span {
    height: 100%;
}

#usernameInput {
    border-radius: 7px;
    font-size: var(--text-small);
}

#passwordInput {
    border-radius: 7px 0 0 7px;
    font-size: var(--text-small);
}

#headerBarraHeaderInputContainer input:focus,
#headerBarraHeaderInputContainer input:active {
    outline: none !important;
    background-color: white;
    color: black;
    transition: all 0.3s ease-in-out;
}

#headerBarraHeaderInputContainer input:focus::placeholder,
#headerBarraHeaderInputContainer input:active::placeholder {
    color: black;
}


#headerBarraHeaderInputContainer input::placeholder {
    color: #c0c0c0;
    font-size: var(--text-small);
}

#headerBarraHeaderInputContainer .input-group-append {
    border: 2px solid transparent;
    margin-left: -4px;
}

#headerBarraHeaderInputContainer .input-group-append span {
    padding: 0 10px 0 10px !important;
    border: 1px solid var(--main-dark-color) !important;
    background-color: transparent !important;
    border-radius: 0 7px 7px 0;

}

#headerBarraHeaderInputContainer .form-control {
    width: 180px !important;
    height: 32px !important;
}

#headerBarraHeaderInputContainer .input-group {
    width: auto !important;
}

#headerBarraHeaderInputContainer>button {
    width: 100px;
    height: 32px;
    border-radius: 7px;
    background-color: #ffffff;
    color: var(--main-color);
    font-size: var(--text-small);
}

#headerBarraHeaderInputContainer button:active,
#headerBarraHeaderInputContainer button:hover {
    background-color: #2ba12b;
    color: white;
    transition: all ease-in 0.3s;
}



.text-main-color {
    color: var(--main-color) !important;
}
.text-main-light-color {
    color: var(--main-light-color) !important;
}
.text-main-dark-color {
    color: var(--main-dark-color) !important;
}

.text-second-color {
    color: var(--second-color) !important;
}
.text-second-light-color {
    color: var(--second-light-color) !important;
}
.text-second-dark-color {
    color: var(--second-dark-color) !important;
}

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

.text-white {
    color: #fff !important;
}

.text-third-color {
    color: var(--third-color) !important;
}
.text-excel-color {
    color: var(--excel-color) !important;
}

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

.text-gray-5 {
    color: var(--gray-5) !important;
}

.text-gray-6 {
    color: var(--gray-6) !important;
}

.text-gray-8 {
    color: var(--gray-8) !important;
}


.hrLightGrey {
    background-color: var(--light-grey);
}

.hrLightGrey2 {
    background-color: #e0e6ea;
}

.hrWhite {
    background-color: white;
}


.bg-main-color {
    background-color: var(--main-color) !important;
}

.bg-second-color {
    background-color: var(--second-color)  !important;
}

.bg-third-color {
    background-color: var(--third-color)  !important;
}

.bg-white {
    background-color: white !important;
}

.bg-transparent {
    background-color: transparent;
}

.bg-main-grey {
    background-color: var(--main-grey) !important;
}

.bg-gray-2 {
    background-color: var(--gray-2) !important;
}

.bg-gray-3 {
    background-color: var(--gray-3) !important;
}

.bg-gray-4 {
    background-color: var(--gray-4) !important;
}

.bg-gray-5 {
    background-color: var(--gray-5) !important;
}

.bg-gray-9 {
    background-color: var(--gray-9) !important;
}

.bg-danger {
    background-color: var(--danger) !important;
}

.border-extra-light-grey {
    border: 1px solid var(--extra-light-grey) !important;
}

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

.text-small {
    font-size: var(--text-small);
}

.p-075 {
    padding: 0.75rem !important;
}

.px-075 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.m-075 {
    margin: 0.75rem !important;
}

.input-1 {
    border: 1px solid #d0d0d0 !important;
    border-radius: 5px;
    background-color: var(--light-grey) !important;
    /* background-color: #f6f7f9 !important; */
    color: var(--main-grey);
}

.main-border-radius {
    border-radius: var(--main-border-radius);
}

.main-border-radius-bottom {
    border-radius: 0 0 var(--main-border-radius) var(--main-border-radius);
}

.logoSquadraMini {
    height: 20px;
    width: auto;
    object-fit: contain;
}

.text-area-1 {
    background-color: var(--light-grey);
    color: var(--main-grey);
    width: 100%;
    border-radius: 5px;
    height: 200px;
    border: 1px solid #c9c9ca !important;
}


.select2 {
    background-color: var(--light-grey);
    color: var(--main-grey);
    width: 150px;
    border-radius: 5px;
    height: 25px;
    border: 1px solid #c9c9ca !important;
}

.select2_danger {
    background-color: var(--danger);
    color: white;
    width: 150px;
    border-radius: 5px;
    height: 25px;
    border: 1px solid #c9c9ca !important;
}


.select3 {
    background-color: var(--light-grey);
    color: var(--main-grey);
    width: 100%;
    border-radius: 5px;
    height: 25px;
    border: 1px solid #c9c9ca !important;
	font-size:12px;
}


.select4 {
    background-color: var(--light-grey);
    color: var(--main-grey);
    border-radius: 5px;
    height: 25px;
    border: 1px solid #c9c9ca !important;
	font-size:12px;
}


.select5 {
    background-color: var(--light-grey);
    color: var(--main-grey);
    width: 100%;
    max-width: 300px;
    border-radius: 5px;
    height: 25px;
    border: 1px solid #c9c9ca !important;
	font-size:12px;
}


.select6 {
    color: var(--main-grey);
    background-color: white;
    height: 25px;
    border-radius: 5px;
    border: 1px solid #d0d0d0 !important;
}

.input1 {
    border-radius: 5px;
    background-color: white;
    border: 1px solid #d0d0d0 !important;
    height: 25px;
    color: var(--main-grey);
}

.input2 {
    background-color: var(--light-grey);
    color: var(--main-grey);
    width: 150px;
    border-radius: 5px;
    height: 25px;
    border: 1px solid #c9c9ca !important;
}

.inputQuotazioni {
    background-color: var(--light-grey);
    color: var(--main-grey);
    width: 32px;
    border-radius: 5px;
    height: 25px;
    border: 1px solid #c9c9ca !important;
	padding: 0px !important;
}


.input2_file {
    background-color: var(--light-grey);
    color: var(--main-grey);
    width: min-content;
    min-width: 150px;
    border-radius: 5px;
    / height: 25px; /
    border: 1px solid #c9c9ca !important;
}

.selectDataNascita {
    background-color: var(--light-grey);
    color: var(--main-grey);
    width: 33% !important;
    margin: -1px !important;
    border-radius: 5px;
    height: 25px;
    border: 1px solid #c9c9ca !important;
    -moz-appearance: none;
    -webkit-appearance: none;
    text-indent: 5px;
}




.w-20px{
  width: 20px !important;
}

.w-30px{
  width: 30px !important;
}

.w-50px{
  width: 50px !important;
}

.w-100px{
  width: 100px !important;
}

.w-120px{
  width: 120px !important;
}



/* RUOLO GIOCATORI */

.ruoloGiocatoreP {
    position: relative;
    margin: 0;
    width: 20px;
    height: 20px;
    background-color: #F9A825;
    color: white;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ruoloGiocatoreP::before {
    content: "P";
}

.ruoloGiocatoreD {
    position: relative;
    margin: 0;
    width: 20px;
    height: 20px;
    background-color: #2E7D32;
    color: white;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ruoloGiocatoreD::before {
    content: "D";
}


.ruoloGiocatoreC {
    position: relative;
    margin: 0;
    width: 20px;
    height: 20px;
    background-color: #0277BD;
    color: white;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ruoloGiocatoreC::before {
    content: "C";
}


.ruoloGiocatoreT {
    position: relative;
    margin: 0;
    width: 20px;
    height: 20px;
    background-color: #dd6bde;
    color: white;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ruoloGiocatoreT::before {
    content: "T";
}


.ruoloGiocatoreTrequartistaC {
    position: relative;
    margin: 0;
    width: 20px;
    height: 20px;
    background: linear-gradient(to top left, #75bce7  50%, #0277BD 50%);
    color: white;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ruoloGiocatoreTrequartistaC::before {
    content: "T";
}

.ruoloGiocatoreTrequartistaA {
    position: relative;
    margin: 0;
    width: 20px;
    height: 20px;
    background: linear-gradient(to top left, #dd6bde 50%, #C62828 50%);
    color: white;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ruoloGiocatoreTrequartistaA::before {
    content: "T";
}





.ruoloGiocatoreA {
    position: relative;
    margin: 0;
    width: 20px;
    height: 20px;
    background-color: #C62828;
    color: white;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ruoloGiocatoreA::before {
    content: "A";
}




.ruoloGiocatoreDC {
    position: relative;
    margin: 0;
    width: 20px;
    height: 20px;
    background-color: #2E7D32;
    color: white;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ruoloGiocatoreDC::before {
    content: "DC";
}

.ruoloGiocatoreDS {
    position: relative;
    margin: 0;
    width: 20px;
    height: 20px;
    background-color: #2E7D32;
    color: white;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ruoloGiocatoreDS::before {
    content: "DS";
}

.ruoloGiocatoreDD {
    position: relative;
    margin: 0;
    width: 20px;
    height: 20px;
    background-color: #2E7D32;
    color: white;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ruoloGiocatoreDD::before {
    content: "DD";
}

.ruoloGiocatoreB {
    position: relative;
    margin: 0;
    width: 20px;
    height: 20px;
    background-color: #2E7D32;
    color: white;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ruoloGiocatoreB::before {
    content: "B";
}


.ruoloGiocatoreE {
    position: relative;
    margin: 0;
    width: 20px;
    height: 20px;
    background-color: #0277BD;
    color: white;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ruoloGiocatoreE::before {
    content: "E";
}

.ruoloGiocatoreM {
    position: relative;
    margin: 0;
    width: 20px;
    height: 20px;
    background-color: #0277BD;
    color: white;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ruoloGiocatoreM::before {
    content: "M";
}

.ruoloGiocatoreW {
    position: relative;
    margin: 0;
    width: 20px;
    height: 20px;
    background-color: #dd6bde;
    color: white;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ruoloGiocatoreW::before {
    content: "W";
}

.ruoloGiocatorePC {
    position: relative;
    margin: 0;
    width: 20px;
    height: 20px;
    background-color: #C62828;
    color: white;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ruoloGiocatorePC::before {
    content: "PC";
}



.max-width-80 {
    max-width: 80%;
}

.sezioneCentraleContent h2 {
    margin-bottom: 0;
}



a .fa-info-circle {
    /*standard*/
}

a .fa-envelope {
    color: var(--main-color);
}

a .fa-times-circle {
    color: #dc3545;
}



#userSidebarContainer #headerBarraHeaderInputContainer{
    flex-direction: column;
}

#userSidebarContainer #headerBarraHeaderInputContainer >*{
    margin: 0 0 0.5rem 0 !important;
}


/* MEDIA QUERIES */
@media screen and (max-width: 991px) {

    #iconeSocialTop a {
        color: var(--main-color);

    }

    #headerBarraHeaderInputContainer {
        width: 100%;
    }

    #headerBarraHeaderInputContainer>button {
        width: 100px;
    }

    #headerBarraHeaderInputContainer .form-control {
        width: 180px !important;
    }
}

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

    #headerBarraHeaderInputContainer .form-control {
        width: 180px !important;
    }

    #headerBarraHeaderInputContainer>button {
        width: 90px;
    }
}

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

    #headerBarraHeaderInputContainer .form-control {
        width: 180px !important;
    }

    #headerBarraHeaderInputContainer>button {
        width: 20px;
    }

    #headerBarraBianca #disclaimer {
        font-size: var(--text-xxs);

    }
}



.votoLive {
    margin: 0;
    padding-top: 2px;
    width: 24px;
    height: 20px;
    background-color: var(--gray-6);
    color: white !important;
    border-radius: 5px;
    font-weight: bold;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
}

.votoLiveNegativo {
    margin: 0;
    padding-top: 2px;
    width: 24px;
    height: 20px;
    background-color: var(--danger);
    color: white !important;
    border-radius: 5px;
    font-weight: bold;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
}

.votoLivePositivo {
    margin: 0;
    padding-top: 2px;
    width: 24px;
    height: 20px;
    background-color: var(--success);
    color: white !important;
    border-radius: 5px;
    font-weight: bold;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
}


.progressBar_background {
  position: relative;
  width: 100%;
  height: 20px;
  background-color: #ddd;
}

.progressBar_color_P {
  position: absolute;
  height: 100%;
  background-color: #F9A825;
}

.progressBar_color_D {
  position: absolute;
  height: 100%;
  background-color: #2E7D32;
}

.progressBar_color_C {
  position: absolute;
  height: 100%;
  background-color: #0277BD;
}

.progressBar_color_A {
  position: absolute;
  height: 100%;
  background-color: #C62828;
}