@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i);
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap);
@import url(jconfirm.css);

*:focus{
    outline : none !important;
}

header{
    z-index : 10;
}

body{
    min-height : 100vh;
}

.clear{
    clear : both;
}

.relative{
    position : relative;
}

.hidden{
    visibility: hidden;
}

h5{
    font-size   : 1.0rem !important;
    font-weight : 600 !important;
}

.spacer-5{
    width  : 100%;
    height : 5px;
}

.spacer-10{
    width  : 100%;
    height : 10px;
}

.spacer-20{
    width  : 100%;
    height : 20px;
}

.spacer-30{
    width  : 100%;
    height : 30px;
}

.spacer-40{
    width  : 100%;
    height : 40px;
}

.spacer-50{
    width  : 100%;
    height : 50px;
}

.gap-3 {
    gap: 1rem;
}

a{
    background-color : transparent;
}

.text-black{
    color : #282828;
}

.global-errors{
    color        : #e50000;
    padding-left : 1rem !important;
    margin-top   : 10px;
}




.customization-select:after{
    content       : "";
    border-top    : .2em solid;
    border-right  : .2em solid transparent;
    border-bottom : 0;
    border-left   : .2em solid transparent;
    position      : absolute;
    top           : 50%;
    right         : 5px;
}

[type=reset], [type=submit], button, html [type=button]{
    -webkit-appearance : initial;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance : none;
    margin             : 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number]{
    -moz-appearance : textfield; /* Firefox */
}

/*--------------
   FLAGS LANG
--------------*/
.flag{
    display : inline-block;
    width   : 30px;
    height  : 18px;
}

.flag.flag-gb{
    background          : url(../images/flags/flags_en.png);
    background-position : center;
    background-size     : cover;
    cursor              : pointer;
}

.flag.flag-it{
    background          : url(../images/flags/flags_it.png);
    background-position : center;
    background-size     : cover;
    cursor              : pointer;
    margin-right        : 5px;
}

.collapsing{
    -webkit-transition-delay : 0s;
    transition-delay         : 0s;
    visibility               : hidden;
    transition               : unset !important;
}

.collapse.show{
    -webkit-transition-delay : 0s;
    transition-delay         : 0s;
    visibility               : visible;
}

/*--------------
   MAP CONTAINER
--------------*/
.match-page #viewer-container{
    /*height: calc(100vh - 100px);*/
    height     : 100%;
    max-height : 530px;
    background : #f4f4f4;
    border: 2px solid #E8E8E8;
    position   : relative;
    border-radius: 10px;
}

.zone-page #viewer-container{
    /*height: calc(100vh - 100px);*/
    height     : 100%;
    background : #f4f4f4;
    position   : relative;
    border-radius: 10px;
}

.match-page .stadium-map{
    margin-top: 25px;
}



.preview-3d-map{
    z-index : 2;
    height  : 106px;
    width   : 135px;
    right   : 140px;
    left    : auto;
    padding : 0;
    position: absolute;
    background: white;
}

/*--------------
   MAP MOBILE OVERLAY
--------------*/
#mobile-overlay{
    height   : 100%;
    position : absolute;
    width    : 100%;
    z-index  : 99999;
}

/*--------------
   MODAL COMPONENTS
--------------*/
.ticketing .modal-content{
    border-radius : 0.5rem;
}

.ticketing .modal-width{
    max-width : 395px;
}

.ticketing .modal-header{
    font-size     : 14px;
    border-bottom : none;
}

.dvm-viewer3d-wrapper .glide__arrow{
    display : none !important;
}

/*--------------
   SPINNER COMPONENTS
--------------*/
#loader{
    position        : fixed;
    z-index         : 5000000;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100vh;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : rgba(0, 0, 0, .6);
}

.loader,
.loaderMap{
    /*position      : fixed;*/
    border-radius : 50%;
    animation     : spin .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite
}

#maploader{
    width              : 100%;
    height             : 100%;
    position           : absolute;
    display            : flex;
    align-items        : center;
    justify-content    : center;
    z-index            : 999;
    visibility         : visible;
    opacity            : 1;
    -webkit-transition : .2s all;
    transition         : .2s all;
}

#maploader #loaderMap{
    width             : 80px;
    height            : 80px;
    position          : absolute;
    top               : 0;
    bottom            : 0;
    right             : 0;
    left              : 0;
    margin            : auto;
    -webkit-transform : translateZ(0);
    border-radius     : 50%;
}

#maploader .logo-image-container .logo{
    position : absolute;
    top      : 0;
    bottom   : 0;
    right    : 0;
    left     : 0;
    height   : 100%;
    width    : 100%;
}

#maploader .logo-image-container .logo.first{
    /*background-image  : url(../images/loader/loader_01.svg);*/
    -webkit-animation : rotating 2s linear infinite;
    animation         : rotating 2s linear infinite;
}

#maploader .logo-image-container .logo.second{
    /*background-image : url(../images/loader/loader_02.svg);*/
}

#maploader .logo-image-container .logo.third{
    /*background-image  : url(../images/loader/loader_03.svg);*/
    -webkit-animation : rotatingY 2s linear infinite;
    animation         : rotatingY 2s linear infinite;
}

#maploader .logo-image-container .logo.fourth{
    /*background-image  : url(../images/loader/loader_04.svg);*/
    -webkit-animation : rotatingYRev 2s linear infinite;
    animation         : rotatingYRev 2s linear infinite;
}

@-webkit-keyframes rotating{
    from{
        -webkit-transform : rotate(0);
        transform         : rotate(0)
    }
    to{
        -webkit-transform : rotate(360deg);
        transform         : rotate(360deg)
    }
}

@keyframes rotating{
    from{
        -ms-transform     : rotate(0);
        -webkit-transform : rotate(0);
        transform         : rotate(0)
    }
    to{
        -ms-transform     : rotate(360deg);
        -webkit-transform : rotate(360deg);
        transform         : rotate(360deg)
    }
}

@-webkit-keyframes rotatingY{
    from{
        -ms-transform     : rotate3d(0);
        -webkit-transform : rotateY(0);
        transform         : rotateY(0)
    }
    to{
        -ms-transform     : rotateY(360deg);
        -webkit-transform : rotateY(360deg);
        transform         : rotateY(360deg)
    }
}

@keyframes rotatingY{
    from{
        -ms-transform     : rotateY(0);
        -webkit-transform : rotateY(0);
        transform         : rotateY(0)
    }
    to{
        -ms-transform     : rotateY(360deg);
        -webkit-transform : rotateY(360deg);
        transform         : rotateY(360deg)
    }
}

@-webkit-keyframes rotatingYRev{
    from{
        -ms-transform     : rotateY(360deg);
        -webkit-transform : rotateY(360deg);
        transform         : rotateY(360deg)
    }
    to{
        -ms-transform     : rotateY(0);
        -webkit-transform : rotateY(0);
        transform         : rotateY(0)
    }
}

@keyframes rotatingYRev{
    from{
        -ms-transform     : rotateY(360deg);
        -webkit-transform : rotateY(360deg);
        transform         : rotateY(360deg)
    }
    to{
        -ms-transform     : rotateY(0);
        -webkit-transform : rotateY(0);
        transform         : rotateY(0)
    }
}

.mapLoader_title{
    text-align  : center;
    font-weight : 600;
    font-size   : 14px;
}

.mapLoader_text{
    text-align  : center;
    font-weight : 400;
    font-size   : 12px;
    opacity     : .6;
}

@keyframes spin{
    0%{
        transform : rotate(0deg);
    }
    100%{
        transform : rotate(360deg);
    }
}

/*--------------
   SCROLLER COMPONENTS
--------------*/


#scroller{
    position                    : absolute;
    z-index                     : 2;
    -webkit-tap-highlight-color : rgba(0, 0, 0, 0);
    width                       : 100%;
    -webkit-transform           : translateZ(0);
    -moz-transform              : translateZ(0);
    -ms-transform               : translateZ(0);
    -o-transform                : translateZ(0);
    transform                   : translateZ(0);
    -webkit-touch-callout       : none;
    -webkit-user-select         : none;
    -moz-user-select            : none;
    -ms-user-select             : none;
    user-select                 : none;
    -webkit-text-size-adjust    : none;
    -moz-text-size-adjust       : none;
    -ms-text-size-adjust        : none;
    -o-text-size-adjust         : none;
    text-size-adjust            : none;

}

/*MATCHES LAYOUT*/
.jbtron{
    /*background            : radial-gradient(circle, rgba(87, 154, 199, 0.12), rgb(36, 37, 42)), url(../images/logos/background-inter.jpg) repeat-x top center;*/
    background-attachment : scroll, scroll;
    background-origin     : padding-box, padding-box;
    background-clip       : border-box, border-box;
    overflow              : hidden;
    position              : relative;
    width                 : 100%;
    height                : 100%;
    margin-top            : 3%;
    background-repeat     : no-repeat;
    background-size       : cover;
    background-position-x : inherit;
    background-color      : #24252a;
    border                : 3px solid #A19161;
    /* background: radial-gradient(circle, rgba(87, 154, 199, 0.6), rgb(36, 37, 42)), url(../images/logos/background-everyone.jpg) repeat-x top center; */
    background            : #310000;
    background            : -moz-linear-gradient(top, #310000 0, #a60000 100%);
    background            : -webkit-linear-gradient(top, #310000 0, #a60000 100%);
    background            : linear-gradient(to bottom, #310000 0, #a60000 100%);
}

.matches-wrapper,
.matchcard-body{
    /*background            : radial-gradient(circle, rgba(87, 154, 199, 0.6), rgb(36, 37, 42)), url(../images/logos/background-everyone.jpg) repeat-x top center;*/
    filter                 : progid:DXImageTransform.Microsoft.gradient(startColorstr='#310000', endColorstr='#a60000', GradientType=0);
    background-attachment  : fixed;
    -webkit-font-smoothing : antialiased;
    width                  : 100%;
    height                 : 100%;
    margin-top             : 3%;
    background-repeat      : no-repeat;
    background-size        : cover;
    background-position    : center;
    background-color       : #24252a;
    color                  : #ffff;
    overflow               : hidden;
    position               : relative;
    background             : url(https://www.acmilan.com/images/logoCircles.png);
    background-position    : bottom;
}

.matches-wrapper{
    margin-top : 0%;
    min-height : 100vh;
}

.matchcard-body{
    /*background          : radial-gradient(circle, rgba(87, 154, 199, 0.12), rgb(36, 37, 42)), url(../images/logos/background-inter.jpg) repeat-x top center;*/
    background-position : center;
    background-size     : cover;
    border              : 1px solid #fff;
    border-bottom       : none;
    /* background: radial-gradient(circle, rgba(87, 154, 199, 0.6), rgb(36, 37, 42)), url(../images/logos/background-everyone.jpg) repeat-x top center; */
    background          : #310000;
    background          : -moz-linear-gradient(top, #310000 0, #a60000 100%);
    background          : -webkit-linear-gradient(top, #310000 0, #a60000 100%);
    background          : linear-gradient(to bottom, #310000 0, #a60000 100%);
}

.matchcard-body .match-img{
    height : 60px;
}

.matchcard-footer{
    background : #232429;
    border     : 1px solid #fff;
    border-top : none;
}

hr{
    border-top : 3px solid #a29161;
    margin     : 0 60px 15px;
}

/* el-input and qty START */
.el-input-number{
    position      : relative;
    display       : inline-flex;
    line-height   : 40px;
    width         : 120px !important;
    height        : 40px;
    border        : 1px solid lightgray;
    border-radius : .25em;
    z-index       : 2;
}

.el-input-number__decrease,
.el-input-number__increase{
    width           : 40px;
    height          : 100%;
    text-align      : center;
    background      : #f5f7fa;
    color           : #606266;
    cursor          : pointer;
    font-size       : 13px;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.el-input-number__decrease.is-disabled,
.el-input-number__increase.is-disabled{
    color  : #c0c4cc;
    cursor : not-allowed;
}

.el-input-number__decrease{
    border-radius : .5em 0 0 .5em;
}

.el-input-number__increase{
    border-radius : 0 .5em .5em 0;
}

.qty_input{
    width      : 40px;
    height     : 100%;
    text-align : center;
    color      : #606266;
    cursor     : pointer;
    outline    : 0;
    transition : border-color .2s cubic-bezier(.645, .045, .355, 1);
}

.qty_input .el-input__inner{
    border     : 0;
    padding    : 0;
    width      : 20px;
    background : none;
    text-align : center;
    height     : 39px;
}

.el-input.is-active .el-input__inner,
.el-input__inner:focus{
    outline-color : transparent;
}

.el-input-number:focus,
.el-input-number:hover{
    border-color : lightskyblue;
    z-index      : 2;
}

/* el-input and qty END */

.d2m-main > .d2m-interface-layer .mtk-minimap-wrapper{
    max-width : 135px !important;
}

a:hover{
    text-decoration : none;
}

.ui-widget{
    font-family : inherit;
    font-size   : 14px;
    line-height : 1.42857143;
    color       : #000033;
    font-weight : 400;
    z-index     : 12 !important;
}

.ui-widget.ui-autocomplete{
    max-width  : 450px;
    list-style : none;
    max-height : 250px;
    overflow   : hidden;
    overflow-y : auto;
}

.ui-widget.ui-autocomplete .ui-menu-item-wrapper{
    padding : 2px 5px;
}

.ui-menu-item-wrapper{
    cursor : pointer;
}

.badge-pill{
    font-size      : 100%;
    width          : 100%;
    text-align     : left;
    border-radius  : 0;
    background     : indianred;
    text-transform : capitalize;
}

.form-group input.datepicker:not(.on){
    background-image          : url(../images/calendar.png);
    -moz-background-origin    : content-box;
    -webkit-background-origin : content-box;
    background-origin         : content-box;
    background-position       : right center;
    background-repeat         : no-repeat;
    cursor                    : pointer;
}

/*payment*/
.btn-payment{
    background-color : lightgray; /*#009cde;*/
    border-radius    : 2px;
    margin           : 10px 0;
}

.comuni-list-autogenerate{
    display: block;
    position: fixed;
    border: none;
}

.axepta-sdk-inline-container{
    margin: auto;
}

.axepta-sdk-card{
    border: none !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}



.submit-cc{
    justify-content: center;
    display: flex;
}

.reduction-description{
    text-transform: uppercase;
}

.bypass-payment-info{
    border: 1px solid lightgray;
    border-radius: 5px;
    margin: 0 -1px 15px 15px;
    padding: 15px 0;
}

.bypass-payment-info svg{
    color: #99090b;
    margin-bottom: 10px;
}

.payment-bypass{
    margin-right: 15px;
}

.sector-select.choose-warning{
    border: 3px solid #8f090b;
}

.btn_choose_place.disabled{
    cursor: not-allowed;
    background-color: #99090b;
    border-color: #8f090b;
    opacity: .6;
}


.saleconditions-title{
    font-weight : bold;
    font-size: 20px;
    justify-content: center;
}

.saleconditions-container p {
    margin: 20px 0;
    font-size: 15px;
    text-align: justify;
}

.saleconditions-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px;
}
#payment-container-PAYPAL.payment-fragment-container{
     display: block;
    justify-content: center;
}

.paypal-msg{
    width: 100%;
    justify-content: center;
    display: flex;
    margin-bottom: 30px;

}


.paypal-button-container{
    width: 100%;
    display: flex;
    justify-content: center;

}

.paypal-button-container{
    width: 50%;
    margin: auto;
    padding-bottom: 50px;

}

.fattura-form .hidden-for-autocomplete{
    display: none !important;
}
.fattura-form .italy-container .form-group.italy-field-css{
    border-bottom: 1px solid #E9E9EA;
    border-left: 1px solid #E9E9EA;
    border-right: 1px solid #E9E9EA;
    padding-left: 0;
}
.fattura-form .italy-container .form-group.italy-field-css .form-group{
    padding-right: 0;
}

.fattura-form .ui-autocomplete-container div{
    top: -2px;
    right: -2px;

}

.fattura-form{
    padding-left: 0;
    padding-right: 1.5rem;
}

@media (min-width: 1024px) {
    .saleconditions-container {
        padding: 200px 150px 0;
    }
}

.checkEsito {
    margin-bottom: 0 !important;
}

.prelazione-continue {
    justify-content: center;
    display: flex;
    margin: auto;
    border: none !important;
}

.pre-continue {
    background-color: #c90c0f !important;
    color: #FFFFFF !important;
}


/** Prelazione **/
.preModalHeader {
    background-color: #c90c0f;
    color: #FFFFFF;
}

.pre-close{
    border-radius: 4.25rem !important;
    border: 1px solid #ced4da !important;
    background: white !important;
    padding: 0 5px 0 5px !important;
    right: 34px;
    position: absolute;
    top: 30px;
}

.pre-title{
    /*position : absolute;*/
    /*top      : 80px;*/
}

.pre-modal-title h5{
    color : #fff;
}

.pre-barr{
    border-bottom : 1px solid #000000;
}

.modal-title-prelazione{
    font-family: "GiorgioSansBold", sans-serif;
    font-size: 25px;
    text-transform : uppercase;
    color: #ffffff;
}

.pre-logo{
    width: 55%;
}



.pre-subtitle {
    color: #000000;
    font-family: "GiorgioSansBold", sans-serif;
    font-size: 20px;
}

.pre-input-group{
    margin : 25px 0 0 0;
}

.pre-input-group1{
    margin : 25px 0 0 0;
}

.pre-input{
    height : calc(3.25rem + 2px);
}

.pre-input-text{
    min-width : 45px;
    border: none !important;

}

.pre-show-popup{
    font-size : 120%;
    cursor    : pointer;
}

.pre-popover{
    top  : -3%;
    left : 66%;
}

.pre-continue{
    margin : 0 auto;
    border : 0;
}

.pre-modal-content{
    background-color : #ffffff;
    border           : 0;
    color: #000000;
}

.pre-error{
    padding-left : 50px;
    color: #e50000;
}

.pre-link{
    color       : #00b0f0;
    font-weight : bold;
    cursor      : pointer;
}
.continue-prelazione-btn{
    border: none !important;
    width: 100% !important;
}
.continue-prelazione-btn:hover{
    background-color: #FFFFFF;
}

.pre-continue{
    margin : 0 auto;
    border : 0;
    width  : 100% !important;
}

.pre-modal-header{
    background : #c90c0f;
}

.pre-modal-title h5{
    color : white !important;
}

.pre-modal-content button{
    color: #c90c0f;
}

.pre-modal-content .close{
    opacity: 1 !important;
}

.prelazione-error .error{
    color: #c90c0f;
}

.pre-title img{
    width: 10%;
}

.banner-container {
    justify-content: center;
}

.banner-container img{
    max-width: 100%;
    max-height: 90%;
}

.banner-container a{
    cursor: pointer;
}


.banner-container-mobile {
    margin-bottom: 1em;
}
.banner-container-mobile-first {
    margin-top: -1.5em;
}


.creditcard-invaliddata-errors{
    color: #e50000;
}




@media only screen and (max-width : 500px) and (min-width : 320px){

    #scroller,#wrapper{
        overflow: hidden;
    }
    .preview-3d-map{
        width: 106px;
        right: 105px;
    }

    .match-page .stadium-map {
        margin-top: 0;
    }
    .match-page #viewer-container {
        margin-top: 0;
    }

    .banner-container-mobile {
        display: flex !important;
    }

    .banner-container img{
        max-height: 100%;
    }

}




@media only screen and (max-width : 601px) and (min-width : 501px){
    .preview-3d-map{
        height: 78px;
        width: 113px;
        right: 135px;
    }

    .banner-container img{
        max-height: 100%;
    }


    .banner-container-mobile {
        display: flex !important;
    }
}

@media only screen and (min-width : 602px) and (max-width : 768px) {


    .preview-3d-map{
        height     : 94px;
        width      : 135px;
        right      : 145px;
    }

    .banner-container img{
        max-height: 100%;
    }


    .banner-container-mobile {
        display: flex !important;
    }
}

@media only screen and (min-width : 769px) and (max-width : 828px) {


    .preview-3d-map{
        height     : 105px;
        width      : 133px;
        right      : 146px;
    }


}

@media only screen and (min-width : 829px) and (max-width : 901px) {


    .preview-3d-map{
        height     : 105px;
        width      : 133px;
        right      : 146px;
    }
}

@media only screen and (min-width : 901px) and (max-width : 1024px) {




    .preview-3d-map{
        height     : 79px;
        width      : 120px;
        right      : 140px;
    }
}


@media only screen and (min-width : 320px) and (max-width : 1600px) {

    .helper-continue-form-button{
        cursor: not-allowed;
        background-color: #6c757d !important;
        border-color: #6c757d;
        text-transform: uppercase;
        border-radius: 4px;
        border: none;
        transition: .2s all;
        font-size: 15px;
        font-family: MilanTypeRevRegular, sans-serif;
        text-align: center;
        color: #252309;
        line-height: 40px;
    }

    .bypass-payment-info{
        padding: 15px;
    }
    .match-page #viewer-container{
        width: 70%;
    }
    .zone-page #viewer-container{
        width: 100%;
        height: 100%;
    }
    .stadium-map{
        justify-content: center;
        display: flex !important;
    }

}