:root {
    --grey-100: #E7F0F0;
    --grey-200: #F1F1F1;
    --grey-300: #E1E6EA;
    --grey-500: #B4B4B4;
    --grey-700: #727272;
    --grey-800: #333333;
    --background-color: #FAFAFA;
    --aqua-green-000: #F0F6F6;
    --aqua-green-100: #E7F0F0;
    --aqua-green-200: #D4E8E8;
    --aqua-green-300: #75C2C2;
    --aqua-green-400: #039A9A;
    --aqua-green-500: #007171;
    --font-body-small: clamp(0.875rem, 2vw, 1rem);
    --font-body: clamp(1rem, 1.2vw, 1.143rem);
    --font-h1: clamp(2.3rem, 3vw, 3.429rem);
    --font-h2: clamp(2rem, 2.5vw, 2.571rem);
    --font-h3: clamp(1.857rem, 2vw, 2rem);
    --font-20: clamp(1.143rem, 1.2vw, 1.286rem);
}

html {
    font-size: 14px;
}

body {
    background: var(--background-color);
}

a:hover, a:focus, a:active, a:target {
    color: var(--aqua-green-300) !important;
}

#module-concertohelp-help p,
#module-contactform-mytickets p {
    font-size: var(--font-body);
}

#module-concertohelp-help body,
#module-contactform-mytickets body {
    background-color: var(--background-color);
}

#module-concertohelp-help #main, #module-concertohelp-help #wrapper,
#module-contactform-mytickets #wrapper, #module-contactform-mytickets #main {
    background: var(--background-color);
    border: 0;
}

#module-concertohelp-help .footer-three,
#module-contactform-mytickets .footer-three {
    background: var(--background-color);
    padding: 10px 0;
}

#module-concertohelp-help .page-content.card.card-block,
#module-contactform-mytickets .page-content.card.card-block{
    background-color: transparent;
    border: 0;
    padding: 0;
}

#module-concertohelp-help  .breadcrumb,
#module-contactform-mytickets .breadcrumb {
    margin-bottom: 8px;
}
#module-concertohelp-help .breadcrumb ol, 
#module-contactform-mytickets .breadcrumb ol {
    text-align: left;
    font-weight: 500;
}

#module-contactform-mytickets h1,
#module-concertohelp-help h1 {
    color: var(--grey-800);
    font-size: var(--font-h1);
    font-weight: 400;
}

.btn-primary-help, 
#module-concertohelp-help .btn-primary,
#module-contactform-mytickets .btn-primary {
    background: var(--aqua-green-400);
    border: none;
    border-radius: 4px;
    color: #ffffff;
    display: inline-block;
    font-size: var(--font-body);
    font-weight: 400;
    padding: 12px 24px;
    padding: 0.857rem 1.714rem;
    line-height: 1.25;
    cursor: pointer;
    white-space: normal;
    text-align: center;
    text-transform: uppercase;
}

.btn-primary-help:focus-visible {
outline: auto;
}

.btn-secondary-help, 
#module-concertohelp-help .btn-secondary,
#module-contactform-mytickets .btn-secondary {
    background: #fff;
    border: 2px solid var(--aqua-green-400);
    border-radius: 4px;
    color: var(--aqua-green-400);
    display: inline-block;
    font-size: var(--font-body);
    font-weight: 400;
    padding: 12px 24px;
    padding: 0.857rem 1.714rem;
    line-height: 1.25;
    cursor: pointer;
    white-space: normal;
    text-align: center;
    text-transform: uppercase;
}

.btn-secondary-help:focus-visible {
outline: auto;
}

a.link-style {
    text-decoration: underline;
    color: var(--aqua-green-400);
    text-underline-offset: 2px;
}

@media screen and (min-width: 992px) {
    #module-concertohelp-help .wrapper-columns {
        padding-top: 0px;
    }
}

.breadcrumb li:not(:last-child):after {
    display: inline-block;
    content: ">";
    margin: 0 4px;
}

.m-top-24 {
    margin-top: 24px;
}

/* navbar */
#module-concertohelp-help #header, #module-concertohelp-help #header .header-top,
#module-contactform-mytickets #header, #module-contactform-mytickets #header .header-top {
    background-color: var(--aqua-green-500);  
}

#module-concertohelp-help #header.fixed-top:has(.V_1),
#module-contactform-mytickets #header.fixed-top:has(.V_1) {
    height: 220px /*240px*/;
}
#module-concertohelp-help #header.fixed-top:has(.V_2),
#module-contactform-mytickets #header.fixed-top:has(.V_2) {
    height: 100px;
}

#module-concertohelp-help #header.fixed-top .header-top, 
#module-contactform-mytickets #header.fixed-top .header-top {
    position: static;
    width: 100%;
}

.row-user-info {
    margin-top: /*24px*/ 20px;
}

#module-concertohelp-help  #_desktop_logo, #module-contactform-mytickets #_desktop_logo {
    position: static;
    z-index: 1100;
    margin-left: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.V_1 #_desktop_logo {
    order: 2;
}

.row-logo {
    display: flex;
    justify-content: center;
}

.logo-help-v1 {
    max-width: 90px;
}
.logo-help-v2 {
    max-width: 80px;
}

#_desktop_logo img.logo-help-v1 {
    margin-bottom: 4px;
}

#module-concertohelp-help #_desktop_logo h1 {
    font-size: var(--font-h2);
}

.login-link, .account {
    color: var(--grey-100);
    font-size: 16px;
    margin-right: 16px;
}
.login-link:hover, .login-link:focus, .login-link:target {
    color: var(--aqua-green-300);
    font-size: 16px;
    margin-right: 16px;
}
.login-link, .account {
    color: var(--grey-100);
    font-size: 16px;
    margin-right: 16px;
}

#module-concertohelp-help .btn-home, #module-contactform-mytickets .btn-home {
    background-color: #fff;
    color: var(--aqua-green-500);
    padding: 4px 24px;
    border-radius: 4px;
    font-size: 16px;
    width: fit-content;
}
#module-concertohelp-help .btn-home:hover, 
#module-concertohelp-help .btn-home:focus, 
#module-concertohelp-help .btn-home:target, 
#module-contactform-mytickets .btn-home:hover,
#module-contactform-mytickets .btn-home:focus,
#module-contactform-mytickets .btn-home:target {
    background-color: #fff;
    color: var(--aqua-green-300);
} 

#module-concertohelp-help .btn-home i, #module-contactform-mytickets .btn-home i {
    font-size: 20px;
}

#module-concertohelp-help .btn-home span, #module-contactform-mytickets .btn-home span {
    padding-top: 4px;
}

.header_user_info__list .account i {
    padding-right: 5px;
}

#_desktop_user_info .header_user_info .show > .dropdown-menu li a {
    color: var(--grey-800) !important;
    font-weight: 500;
}
#_desktop_user_info .header_user_info .show > .dropdown-menu li a:hover {
    color: var(--aqua-green-500) !important;
    text-decoration: underline;
}

#_desktop_user_info .header_user_info .show > .dropdown-menu li {
    border-bottom: 1px solid var(--aqua-green-500) !important;
}

.dropdown-menu {
    min-width: fit-content !important;
    width: 180px;
}

#_desktop_user_info .header_user_info .show > .dropdown-menu {
    padding: 12px 14px;
    transform: translate(40px, 5%);
}

.header-top .container .row.inner-wrapper.logo-row-1 {
    display: flex;
    justify-content: center;
}

.logo-link-1 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.logo-link-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 16px;
}

.row.row-user-info.V_1 {
    display: flex;
    flex-direction: column;
}

.row.row-user-info.V_2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#module-concertohelp-help #_desktop_user_info, #module-contactform-mytickets #_desktop_user_info {
    display: flex;
    justify-content: end;
}

a.logo-link-1, a.logo-link-2,
a.logo-link-1:hover,a.logo-link-2:hover  {
    color: #fff !important;
}

body:has(.header-top .V_1) #wrapper {
    padding-top: 130px /* 150px */;
}
body:has(.header-top .V_2) #wrapper{
    padding-top: 16px;
}

#_desktop_user_info {
    order: 2;
    z-index: 1200;
}

.logo-link-2 #logo-vmob, .logo-link-1 #logo-vmob {
    width: 60px !important;
    margin-right: 16px;
}

#menu-icon i {
    color: #fff;
}

@media (max-width: 991.98px) {
    #module-concertohelp-help #menu-icon {
        flex: 1.5 0 0%;
    }
    .top-logo a {
        display: flex;
        max-width: fit-content;
    }
    .top-logo a.logo-link-1 {
        flex-direction: row;
    }

    .top-logo {
        display: flex;
    justify-content: start;
    }
    
    .logo-link-2 {
        gap: 4px;
    }
    .logo-link-2 #logo-vmob, .logo-link-1 #logo-vmob {
        margin-right: 8px;
    }

    body:has(.header-top .V_2) #wrapper {
        padding-top: 85px;
    }
    body:has(.header-top .V_1) #wrapper {
        padding-top: 100px;
    }

    div.header_user_info__list {
        height: fit-content !important;
        margin-top: 16px !important;
        margin-bottom: 12px !important;
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-left: 12px;
    }
    .header_user_info i {
        display: inline-block;
        padding-right: 5px;
    }

    .dropdown-menu {
        top: 35%;
    }

    .header_user_info a.logout {
        padding: 6px 12px !important;
    }
}

@media (max-width: 600px) {
    #module-concertohelp-help #menu-icon {
        flex: 2 0 0%;
    }
}


@media (max-width: 450px) {
    #logo-vmob {
        display: none !important;
    }
    .faq-page h1 {
        word-break: break-word;
    }
}

.account .dropdown-toggle::after {
    margin-bottom: 2px;
}


/* home - aree tematiche */
#module-concertohelp-help .card, .help-area-form button {
    border: 0;
    padding: 0;
}

.intestazione-chelp {
    padding: 0 40px 32px;
}

.intestazione-chelp h1 {
    margin-bottom: .8rem;
    font-size: var(--font-h2) !important;
}

.intestazione-chelp p span {
    display: block;
}
@media (max-width: 700px) {
    .intestazione-chelp p span {
        display: inline;
    }
}

.help-area-form button {
    max-width: 600px;
    width: 100%;
}

.help-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
}

.help-area-card {
    width: 45%;
}

#module-concertohelp-help .card-area-tematica:hover {
    background-color: var(--aqua-green-200);
    color: var(--grey-800);
}

#module-concertohelp-help .card-area-tematica {
    border: 2px solid var(--aqua-green-500);
    padding: 24px;
    background-color: var(--aqua-green-000);
    border-radius: 6px;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-area-tematica i, 
.card-area-tematica h3 {
    color: var(--aqua-green-500);
}
.card-area-tematica h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 400;
    font-size: clamp(1.714rem, 2vw, 2rem);
    margin-bottom: 2px;
}
.card-area-tematica i {
    font-size: 32px;
}
.card-area-tematica p {
    font-family: "Ubuntu", sans-serif;
    font-size: clamp(1.143rem, 1.2vw, 1.286rem);
}

@media (max-width: 800px) {
    .intestazione-chelp {
        padding: 0 16px 20px;
    }

    .help-area-card {
        width: 90%;
        max-width: none;
    }
    .help-area-form button {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 450px) {
    .intestazione-chelp {
        padding: 0 4px 20px;
    }
}

/* sezione domande - risposte */
.faq-page h1 {
    font-size: clamp(2rem, 3vw, 3rem);
    margin-bottom: 8px;
    text-transform: uppercase;
    font-family: "Roboto Condensed", sans-serif;
}

.btn-back {
    display: flex;
    justify-content: end;
}

.btn-outlined-secondary {
    border: 2px solid var(--aqua-green-400);
    color: var(--aqua-green-400);
    padding: 6px 8px;
    border-radius: 6px;
    background-color: #fff;
    text-transform: uppercase;
    font-size: var(--font-body);
    height: fit-content;
}
.btn-outlined-secondary i {
    font-size: 16px;
}

.btn-outlined-secondary:hover, .btn-outlined-secondary:target, .btn-outlined-secondary:focus {
    border: 2px solid var(--aqua-green-400);
    color: #fff !important;
    background-color: var(--aqua-green-400);
}

.card-domanda {
    background-color: var(--aqua-green-100);
    padding: 24px 20px;
    border-radius: 0;
}

.card-domanda .card-header {
    background-color: transparent;
    border-bottom: 0;
    padding: 24px 20px;
}

.btn-toggle-domanda {
    transition: none;
    background-color: transparent;
    border: 0;
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    padding: 0;
}

.btn-toggle-domanda h5 {
    margin-bottom: 0;
    color: var(--aqua-green-500);
    font-size: clamp(1.25rem, 1.375vw, 1.375rem);
    text-align: left;
}

.btn-toggle-domanda img {
    transform: rotate(0deg); 
    transition: transform 0.3s ease;
}

.btn-toggle-domanda[aria-expanded="true"] img {
    transform: rotate(180deg); 
}

.card-domanda .card-block {
    padding: 0px 20px;
}
.card-domanda .card-block p, .card-domanda .card-block span {
    font-size: var(--font-body) !important;
    color: var(--grey-800);
}
.card-domanda .card-block a {
    color: var(--aqua-green-400) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}
.card-domanda .card-block a:hover, .card-domanda .card-block a:focus, .card-domanda .card-block a:target {
    color: var(--aqua-green-500) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

.card-domanda .card-block a.btn.btn-default {
    background-color: var(--aqua-green-400);
}

.card-domanda .card-block ul {
    list-style-type: disc;
    list-style-position: inside;
    font-size: var(--font-body) !important;
}

.link-form-contatto {
    transition: 0;
    background-color: transparent;
    border: 0;
    text-decoration: underline;
    color: var(--aqua-green-500);
    font-weight: 600;
    font-size: var(--font-body);
}

.link-form-contatto:hover, .link-form-contatto:focus, .link-form-contatto:target  {
    text-decoration: underline;
    color: var(--aqua-green-300);
}

.cta-supporto-tecnico {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 24px 20px;
    color: var(--aqua-green-500);
}

.cta-supporto-tecnico p {
    margin-bottom: 0;
    font-weight: 500;
}

.cta-supporto-tecnico a {
    text-decoration: underline;
    text-underline-offset: 1px;
}




/* contact form */
.p-servizio-assistenza {
    font-size: clamp(1.429rem, 1.7vw, 1.714rem);
}

.contact-form .form-control-label {
    font-weight: 500;
}

.form-group label {
    font-size: clamp(1.143rem, 1.2vw, 1.2rem);
}

.form-group select.form-control {
    padding-right: 30px;
    border-radius: 4px;
    border: 1px solid #DCDCDC;
    background: none;
    color: var(--grey-800);
    background-color: #fff;
    background-image: url(/modules/concertohelp/img/chevron_backward.svg);
    -webkit-background-size: 20px 20px;
    -moz-background-size: 20px 20px;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center right 10px;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.form-control:disabled {
    background-color: #fff;  
}

textarea.form-control, .form-control {
    color: var(--grey-800);
}

select:has(option[disabled]:checked), textarea[name="message"]::placeholder {
      color: var(--grey-700);
}

select:focus, select.form-control:focus {
    -webkit-background-size: 20px 20px !important;
    -moz-background-size: 20px 20px !important;
    background-size: 20px !important;
    background-image: url(/modules/concertohelp/img/chevron_backward.svg) !important;
    background-color: var(--grey-100) !important;
}

input[type="text"], input[type="password"], input[type="button"], input[type="submit"], input[type="email"], input[type="number"], textarea.form-control  {
    border-radius: 4px;
    border: 1px solid #DCDCDC;
}

.bootstrap-filestyle.input-group .form-control {
    background-color: #fff; 
}

.group-span-filestyle.input-group-btn .btn.btn-default  {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    font-size: var(--font-body-small);
    font-weight: 400;
    padding-left: 16px;
    padding-right: 16px;
    max-height: 44px;
}

label.required:after {
    color: var(--grey-800) !important;
    font-size: 16px !important;
    font-weight: 400;
}

.form-user-content {
    background-color: var(--grey-300);
    border-radius: 4px;
    border: 1px solid #DCDCDC;
    color: var(--grey-800);
    height: 44px !important;
    padding: 10px 20px 0 12px;
}

.form-user-content label {
    font-size: 15px;
    margin: 0;
    padding-top: 0 !important;
}

.form-control-comment {
    padding-top: 4px;
}

@media (max-width: 991.98px) { 
    form .form-footer {
    text-align: right;
    }
}

/* i miei ticket */

#module-contactform-mytickets {
    height: 125px;
}

#module-contactform-mytickets .table-bordered thead th {
    vertical-align: middle;
    border-right: 0;
    background-color: var(--aqua-green-500);
    color: #fff;
    font-size: var(--font-20);
    height: 20px;
    font-weight: 500;
}

table.table-bordered.dataTable tbody td {
    font-size: var(--font-body);
    color: var(--grey-800);
}

#module-contactform-mytickets input[type="search"] {
    border: 1px solid var(--grey-500);
    border-radius: 4px;
    height: 32px;
    padding: 4px 12px;
    background-color: #fff;
}

.page-item.disabled .page-link {
    color: var(--aqua-green-400);
    pointer-events: none;
    cursor: not-allowed;
    background-color: #fff;
    border-color: var(--aqua-green-400);
    border-radius: 0;
}
.pagination a {
    height: 32px;
}

@media (max-width: 991px) {
    .pagination a {
        width: 38px;
    }
}

ul.pagination li.paginate_button a {
    padding-top: 0;
    padding-bottom: 1px;
}

table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
    background-color: var(--aqua-green-400);
}

@media screen and (max-width: 767px) {
div.dataTables_wrapper div.dataTables_filter {
        text-align: right;
    }
    
}

/* ticket */
.bg-Pemployee, .bg-Pcustomer {
    border: 0;
    background-color: transparent;
    padding: 0 !important;
}
.bg-Pcustomer {
    margin-top: 0 !important;
}
.bg-Pemployee {
    margin-top: 0px !important;
}
.bg-Pemployee .ticket-section{
    background-color: var(--aqua-green-200);
}

.bg-Pemployee > .ticket-section > div > div {
    color: var(--aqua-green-400);
}

.contact-form h3.ticket-number-title {
    text-transform: uppercase;
    color: var(--aqua-green-100);
    background-color: var(--aqua-green-500);
    width: fit-content;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 0;
    font-size: 1.5rem;
}

#reqform .message-item {
    margin-top: 24px;
    padding: 0px !important;
}

.ticket-divider {
    border-bottom: 2px solid var(--aqua-green-400);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 8px;
    margin-bottom: 8px; 
}

.ticket-divider.m-0 {
    padding: 0 !important;
}

.message-body {
    color: var(--grey-800);
}

.message-body .col-sm-12 div {
    margin-bottom: 1.5rem;
}
.message-body .col-sm-12 div p {
    margin-bottom: 8px;
}

.title-detail, .ticket_title {
    color: var(--aqua-green-400);
    text-transform: uppercase;
    font-weight: 500;
    font-family: "Roboto Condensed", sans-serif;
    font-size: var(--font-h3);
}

.ticket-section {
    border: 2px solid var(--aqua-green-400);
    background-color: var(--grey-200);
    padding: 24px 20px;
    border-radius: 8px;
}

.ticket-section div div {
    color: var(--grey-700);
}

#reqform div.alert.alert-success {
    background-color: var(--aqua-green-200);
    color: var(--grey-800);
    padding: 12px;
    font-size: 20px;
    font-weight: 500;
    font-size: 16px;
}
#reqform > div.col-xs-12.alert.alert-success > ul > li > i {
    color: var(--aqua-green-400);
    margin-right: 4px;
}

#reqform div.alert.alert-danger {
    font-weight: 500;
    margin-bottom: 8px;
    margin-top: 8px;
    font-size: 16px;
}
#reqform > div.col-xs-12.alert.alert-danger > ul > li > i {
    color: #fff;
    margin-right: 4px;
}

#reqform div.alert.alert-success ul, .alert.alert-danger ul {
    margin-bottom: 0;
}

.btn-group-error {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 1rem;
    margin-top: 32px;
}

.material-icons.message-sizez {
    color: var(--aqua-green-400);
}

.div-risposta {
    border: 2px solid var(--aqua-green-300);
    background-color: var(--aqua-green-100);
    padding: 40px 48px;
    border-radius: 8px;
    margin-top: 32px;
}

.attachment-file p {
    margin-top: 1rem;
}

.ticket-open i.material-icons {
    margin: 0px 3px 2px 4px;
    font-size: 12px;
    color: #81DD3B;
}
.ticket-closed i.material-icons {
    margin: 0px 3px 2px 4px;
    font-size: 12px;
    color: #CE181B;
}
.ticket-pending i.material-icons {
    margin: 0px 3px 2px 4px;
    font-size: 12px;
    color: #F4CF3D;
}

.ticket-section a.btn.btn-default, .card-domanda .card-block a.btn.btn-default  {
    border-radius: 4px;
    margin-bottom: 4px;
    padding: 8px 18px;
    color: #fff !important;
    text-decoration: none !important;
}

@media screen and (max-width: 768px) {
    .div-risposta {
        padding: 40px 32px;
    }
}


/* gif caricamento */
#loading-gif {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(235, 242, 242, 0.65);
    z-index: 99999;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.loading-content {
    text-align: center;
}

.loading-content img {
    width: 300px;
    height: auto;
}

#loading-gif[style*="display:none"] {
    display: none !important;
}