body {
    font-size: .875rem;
}

@media only screen and (max-width: 767px) {
    #map-canvas {
        height: 70vh !important;
    }

    .form-control-chosen {
        width: 100% !important;
    }
}

@media only screen and (min-width: 768px) {
    #map-canvas {
        height: calc(100vh - 70px) !important;
    }
}


.feather {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}

/*
 * Sidebar
 */

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100; /* Behind the navbar */
    padding: 70px 0 0; /* Height of navbar */
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
    position: relative;
    top: 0;
    height: calc(100vh - 48px);
    padding-top: .5rem;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
    .sidebar-sticky {
        position: -webkit-sticky;
        position: sticky;
    }
}

.sidebar .nav-link {
    font-weight: 500;
    color: #333;
}

.sidebar .nav-link .feather {
    margin-right: 4px;
    color: #999;
}

.sidebar .nav-link.active {
    color: #007bff;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
    color: inherit;
}

.sidebar-heading {
    font-size: .75rem;
    text-transform: uppercase;
}

/*
 * Content
 */

@media only screen and (min-width: 768px) {
    [role="main"] {
        padding-top: 70px; /* Space for fixed navbar */
    }
}

/*
 * Navbar
 */

.navbar-brand {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, .25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .form-control {
    padding: .75rem 1rem;
    border-width: 0;
    border-radius: 0;
}

.form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

.divProfilo, .divEvento {
    text-align: center;
}
.divProfilo h1, .divEvento h1 {
    color: #fff;
}
.divProfilo input[type=radio], .divEvento input[type=radio] {
    display: none;
}
.divProfilo input[type=radio]:checked + .box {
    background-color: #63BD4A;
}
.divEvento input[type=radio]:checked + .box {
    background-color: #f82;
}
.divProfilo input[type=radio]:checked + .box span, .divEvento input[type=radio]:checked + .box h2, .divEvento input[type=radio]:checked + .box h4, .divEvento input[type=radio]:checked + .box small {
    color: white;
    transform: translateY(70px);
}
.divProfilo input[type=radio]:checked + .box span:before, .divEvento input[type=radio]:checked + .box h2, .divEvento input[type=radio]:checked + .box h4, .divEvento input[type=radio]:checked + .box small {
    transform: translateY(0px);
    opacity: 1;
}
.divProfilo .box {
    padding: 10px ;
    background-color: #fff;
    transition: all 250ms ease;
    will-change: transition;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    position: relative;
}
.divProfilo > div > label, .divEvento > div > label  {
    width: 100%;
}
.divProfilo .box:active, .divEvento .box:active {
    transform: translateY(10px);
}
.divProfilo .box span, .divEvento .box span {
    transform: translate(0, 60px);
    left: 0;
    right: 0;
    transition: all 300ms ease;
    font-size: 1.5em;
    user-select: none;
    color: #63BD4A;
}
.divProfilo .box span:before, .divEvento .box span:before {
    font-size: 1.2em;
    display: block;
    transform: translateY(-80px);
    opacity: 0;
    transition: all 300ms ease-in-out;
    font-weight: normal;
    color: white;
}
.divProfilo > div > label > .front-end, .divProfilo > div > label > .back-end{
    border: 1px solid #63BD4A;
    border-radius: 5px;
    width: 100%;
}
.divEvento > div> label >.front-end, .divEvento > div > label > .back-end{
    border: 1px solid #f82;
    width: 100%;
}
.divProfilo p, .divEvento p {
    color: #fff;
    font-weight: 400;
}
.divProfilo p a, .divEvento p a {
    text-decoration: underline;
    font-weight: bold;
    color: #fff;
}

.badge-services{
    background-color: rgb(244, 244, 244);
    color: rgb(102, 102, 102);
    border-radius: 4px;
}

.btn-registrazione{
    display: block;
    padding: 3px 3px;
    background-color: #fd2;
    border-radius: 50px;
    border-color: #ec1;
    border-width: 1px;
    color: #333;
    font-size: 16px;
    width: 50%;
}

.btn-registrazione:hover, .btn-registrazione:focus, .btn-registrazione:active {
    transform: scale(1.05);
    background-color: #fd2;
    color: #333;
    border-color: #fd2;
}

.blink_me {
    background-color: #5db149 !important;
    color: white !important;
}

.blink_me > div > div > h6 > a {
    color: white !important;
}
.blink_me .badge-selected-service {
    background-color: white !important;
}

.immagineInstallatore {
    border:1px solid #BBB;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    background-color:#fff;
    text-align:center;
    height:70px;
    width:70px;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:90% auto;
}
.ribbon {
    position: absolute;
    right: -3px;
    top: -3px;
    z-index: 1;
    overflow: hidden;
    width: 70px;
    height: 70px;
    text-align: right;
}
.ribbon span {
    font-size: 0.8rem;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    line-height: 25px;
    transform: rotate(45deg);
    width: 94px;
    display: block;
    background: #79a70a;
    background: linear-gradient(#9bc90d 0%, #79a70a 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 12px; // change this, if no border
right: -29px; // change this, if no border
}

.ribbon span::before {
    content: '';
    position: absolute;
    left: 1px; top: 100%;
    z-index: -1;
    border-left: 2px solid #79A70A;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-top: 2px solid #79A70A;
}
.ribbon span::after {
    content: '';
    position: absolute;
    right: 1px; top: 100%;
    z-index: -1;
    border-right: 2px solid #79A70A;
    border-left: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-top: 2px solid #79A70A;
}
.gold span {
    background: linear-gradient(#ffd500 0%, #ffb700 100%);
}
.gold span::before {
    border-left-color: #ffb700;
    border-top-color: #ffb700;
}
.gold span::after {
    border-right-color: #ffb700;
    border-top-color: #ffb700;
}
.silver span {
    background: linear-gradient(#d4d4d4 0%, #8a8a8a 100%);
}
.silver span::before {
    border-left-color: #8a8a8a;
    border-top-color: #8a8a8a;
}
.silver span::after {
    border-right-color: #8a8a8a;
    border-top-color: #8a8a8a;
}
.bronze span {
    background: linear-gradient(#ee9134 0%, #CD7F32 100%);
}
.bronze span::before {
    border-left-color: #CD7F32;
    border-top-color: #CD7F32;
}
.bronze span::after {
    border-right-color: #CD7F32;
    border-top-color: #CD7F32;
}

.badge-services{
    background-color: rgb(244, 244, 244);
    color: rgb(102, 102, 102);
    border-radius: 4px;
}
.badge-selected-service{
    background-color: #68e4469e;
}