.searchText {
    width: 150px;
    right: 20px;
    top: 5px;
    position: relative;
}

.icon-search-little {
    /*background-image: url('Images/search_24.png');*/
    height: 24px;
    width: 24px; 
    position: absolute;
    right: 205px;
    background-repeat: no-repeat;
    top: 5px;
}

.fa-search {
    height: 24px;
    width: 24px;
    position: absolute;
    right: 205px;
    background-repeat: no-repeat;
    top: 8px;
    font-size:18px !important;
}


.btn-enabled {
    background-image: url('../Images/enabled_orange_32.png');
    height: 32px;
}

.btn-disabled {
    background-image: url('../Images/disabled_grey_32.png');
    height: 32px;
}

.btn-model {
    background-image: url('../Images/modeladd_grey_32.png');
    height: 32px;
}

.btn-model:hover {
    background-image: url('../Images/modeladd_orange_32.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-view {
    background-image: url('../Images/viewadd_grey_32.png');
    height: 32px;
}

.btn-view:hover {
    background-image: url('../Images/viewadd_orange_32.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-edit {
    background-image: url('../Images/edit_grey_32.png');
    height: 32px;
}

.btn-edit:hover {
    background-image: url('../Images/edit_orange_32.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-share {
    background-image: url('../Images/share_grey_32.png');
    height: 32px;
}

.btn-share:hover {
    background-image: url('../Images/share_orange_32.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-sharedby {
    background-image: url('../Images/share_orange_32.png');
    height: 32px;
    cursor: default;
}

.btn-use{
    background-image: url('../Images/usemodel_grey_32.png');
    height: 32px;
}

.btn-use:hover{
    background-image: url('../Images/usemodel_orange_32.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-history{
    background-image: url('../Images/history_grey_32.png');
    height: 32px;
}

.btn-history:hover{
    background-image: url('../Images/history_orange_32.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-sendnow{
    background-image: url('../Images/sendnow_grey_32.png');
    height: 32px;
}

.btn-sendnow:hover{
    background-image: url('../Images/sendnow_orange_32.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-report{
    background-image: url('../Images/reportadd_grey_32.png');
    height: 32px;
    margin-left: 5px;
    margin-right: 5px;
}

.btn-report:hover{
    background-image: url('../Images/reportadd_orange_32.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-dashboard{
    background-image: url('../Images/dashboardadd_grey_32.png');
    height: 32px;
}

.btn-dashboard:hover{
    background-image: url('../Images/dashboardadd_orange_32.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}



.btn-delete {
    background-image: url('../Images/delete_grey_32.png');
    height: 32px;
}

.btn-delete:hover {
    background-image: url('../Images/delete_orange_32.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}


.btn-pdf{
    background-image: url('../Images/pdf_grey_32.png');
    height: 32px;
    width: 32px;
}

.btn-pdf:hover {
    background-image: url('../Images/pdf_orange_32.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}


.btn-html{
    background-image: url('../Images/html_grey_32.png');
    height: 32px;
    width: 32px;
}

.btn-html:hover {
    background-image: url('../Images/html_orange_32.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-youtubevideo{
    background-image: url('../Images/youtube_grey_32.png');
    height: 32px;
    width: 32px;
}

.btn-youtubevideo:hover {
    background-image: url('../Images/youtube_orange_32.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-localvideo{
    background-image: url('../Images/video_grey_32.png');
    height: 32px;
    width: 32px;
}

.btn-localvideo:hover {
    background-image: url('../Images/video_orange_32.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-newconn {
    background-image: url('../Images/connadd_grey_48.png');
    height: 48px;
    width: 48px;
}

.btn-newconn:hover {
    background-image: url('../Images/connadd_orange_48.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-newmodel {
    background-image: url('../Images/modeladd_grey_48.png');
    height: 48px;
    width: 48px;
}

.btn-newmodel:hover {
    background-image: url('../Images/modeladd_orange_48.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-newstoresprocedure {
    background-image: url('../Images/storedproceduresadd_grey_48.png');
    height: 48px;
    width: 48px;
}

.btn-newstoresprocedure:hover {
    background-image: url('../Images/storedproceduresadd_orange_48.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-newsubscription {
    background-image: url('../Images/subscriptionadd_grey_48.png');
    height: 48px;
    width: 48px;
}

.btn-newsubscription:hover {
    background-image: url('../Images/subscriptionadd_orange_48.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-newschedule {
    background-image: url('../Images/scheduleadd_grey_48.png');
    height: 48px;
    width: 48px;
}

.btn-newschedule:hover {
    background-image: url('../Images/scheduleadd_orange_48.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-newview {
    background-image: url('../Images/viewadd_grey_48.png');
    height: 48px;
    width: 48px;
}

.btn-newview:hover {
    background-image: url('../Images/viewadd_orange_48.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-newreport{
    background-image: url('../Images/reportadd_grey_48.png');
    height: 48px;
    width: 48px;
}

.btn-newreport:hover {
    background-image: url('../Images/reportadd_orange_48.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-newdashboard{
    background-image: url('../Images/dashboardadd_grey_48.png');
    height: 48px;
    width: 48px;
}

.btn-newdashboard:hover {
    background-image: url('../Images/dashboardadd_orange_48.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-open{
    background-image: url('../Images/preview_grey_32.png');
    height: 32px;
    width: 32px;
}




.btn-open:hover {
    background-image: url('../Images/preview_orange_32.png');
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.newItem{
    min-height: 225px;
}

.w3-card{
    max-height: 225px; 
    background-color: white;
}

.w3-footer{
    min-height: 32px;
}

.card-header {
    background-color: white;
    padding-top: 15px;
    height: 100px;
}

.card-header img{
    height:64px;
    width: 64px;
}

.card-title {
    font-weight: bold;
    text-transform: uppercase;
    text-overflow: ellipsis;
    color: #677381 !important
}

.cardSelected {
    /*margin: 14px !important;
	border-width: 3px;
	border-color: #666666;
	border-style: solid;*/
}

.newItemFooter{
    position: relative;
    top: 20px;
}
.card-footer{
    height:32px;
}

.short-card{
    top: 25px;
    height: 32px;
}
                            

.newItemSmall{
    max-height: 225px !important;
    min-height: 225px;
}   
/*
.newItemSmall .newItemFooter{
    top:0px !important;
}

.newItemSmall .w3-section{
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}*/


.listViewType .card-header .w3-container{
	display:none;
}
.listViewType .newItem .card-header .w3-container{
	display:inline-block;
	margin-left: 41px;
}
.listViewType .newItem .card-header,.listViewType .card-header{
	float:left;
	margin-top: 0px;
}
.listViewType .newItem .card-header img
{
	padding-top:5px;
	margin-left: 5px;
}
.listViewType .card-header img{
	width: 38px;
	float:left;
	margin: auto;
	vertical-align: middle;
	/* padding-top: 5px; */
	
}
.listViewType .newItem .card-header img{
	display:none;
}
.listViewType .newItem .card-header{
	background-image: url("../Images/Analysis_orange_48.png") !important;
	background-size: 38px;
	background-repeat: no-repeat;
	background-position-y: 4px;
	background-position-x: 5px;
}
.listViewType .w3-card,.listViewType .w3-card.newItem{
	height:48px;
	min-height:48px;
}
.listViewType .w3-card.newItem,.listViewType .w3-margin.firstResult {
    margin-top: 15px !important;
}
.listViewType .w3-card .w3-container{
	min-height: 43px !important;
	line-height: 46px !important;
	float:left;
}
.listViewType .w3-card .w3-footer{
	float:right;
	margin-top:8px;
	height: 32px;
	min-height: 32px;
}
.listViewType .w3-margin{
	margin-top: 0px !important;
	margin-bottom: 0px !important;
	margin-left:16px !important;
	margin-right:16px !important;
}

.listViewType .newItemFooter{
	float: right;
	margin-top: 7px !important;
	position: initial;
	margin-right: 5px;
	/* background-color: rgb(204, 204, 204); */
}
.listViewType .newItemFooter button{
	background-size:32px;
	height:32px;
	width: 32px;
	/* background-color: rgb(204, 204, 204) !important; */
}
.listViewType .w3-col.s12{
	width: 100% !important;
	/* margin: auto; */
	/* text-align: center; */
}

.listViewType .card-header{
	padding-top: 0px !important;
	margin-top: 5px;
	margin-left: 5px;
}
.listViewType .newItem .card-header{
    margin-left: 0px;
    height: 46px;
    background-color: transparent !important;
    color: #666 !important;
    font-weight: bold;
}

.listViewType .w3-card{
    border-top-width:0px;
}

.listViewType .w3-card:hover,.listViewType .newItem .card-header:hover{
	background-color:#f5f5f5 !important;
}
.listViewType .w3-white{
	background-color:transparent !important;
}


.listViewType .newItem,.listViewType .firstResult{
	border-top-width:1px;
}


/* Nuovi stili Portale 2.0 */
.w3-card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.06);
    border-radius: 15px;
    overflow: hidden;
    max-width: 290px;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); /* Aggiunta per una transizione più fluida al normale stato */
}

/* Stili per l'header della card */
.w3-card .card-header {
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.30); /* bordo su 3 lati */
    border-bottom: none; /* niente bordo sotto */
    border-top-left-radius: 15px; /* stesso raggio della card */
    border-top-right-radius: 15px;
    overflow: hidden; /* evita artefatti sugli angoli */
}

.w3-center.card-header {
    display: flex;
    flex-direction: column; /* mette icona sopra e testo sotto */
    align-items: center; /* centra orizzontalmente */
    justify-content: center; /* se serve, centra verticalmente */
    text-align: center;
}

.w3-center.card-header img {
    max-width: 64px; /* dimensiona icona */
    margin-bottom: 6px;
}

.w3-center.card-header p {
    margin: 0;
}

.card-title {
    padding-bottom: 15px !important;
}

/* Effetto al passaggio del mouse (hover) */
.w3-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), 0 6px 20px rgba(0, 0, 0, 0.12);
    animation: none !important;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Animazione di Pulsazione */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.06), 0 0 0 rgba(255, 255, 255, 0);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.06), 0 0 0 rgba(255, 255, 255, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.06), 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* Effetto per la card del portale centrale */
.w3-MasterCard {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), 0 6px 20px rgba(0, 0, 0, 0.12);
    animation: none;
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes MasterPulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);
        box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);
    }

    70% {
        -moz-box-shadow: 0 0 0 10px rgba(255,255,255, 0);
        box-shadow: 0 0 0 10px rgba(255,255,255, 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0);
    }
}

.main-searchText {
    border-radius: 10px !important;
    padding: 8px 12px;
    transition: opacity 0.2s ease;
}

/* Focus: avvia animazione allungamento barra di ricerca */
.main-searchText:focus {
    animation: expandSearch 0.4s forwards;
    left: 50%;
    transform: translateX(-50%);
}

@keyframes expandSearch {
    0% {
        width: 100%;
        left: 10%;
        transform: translateX(0);
    }

    100% {
        width: 200%;
        left: 50%;
        right: 50%;
        transform: translateX(-50%);
    }
}

.main-searchText:focus + .main-searchIcon,
.searchText:focus-within .main-searchIcon {
    animation: moveIcon 0.4s forwards;
}

@keyframes moveIcon {
    0% {
        right: 100%;
    }

    100% {
        right: 195%;
        transform: translateX(-60%);
    }
}

.w3-container {
    padding: 0.05em 0.5em 0.5em 0.5em !important;
    
}

.w3-card-badge {
    width: clamp(5em, calc(96%), 15em); /* min 5em, ideale 96%, max 15em */
    height: auto;
    max-height: 50px;
}

/* Restyling card portale senza icone */
.w3-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    height: 215px;
    min-height: 215px;
    max-height: 215px;
    max-width: 290px;
    padding: 22px 22px 22px 22px;
    font-size: 16px;
    overflow: hidden;
    cursor: default !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 25px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 34%, rgba(255, 255, 255, 0) 62%),
        linear-gradient(160deg, var(--avantune-color, #E84E0E) 0%, rgba(var(--avantune-color-rgb, 232, 78, 14), 0.94) 46%, rgba(191, 49, 0, 0.96) 100%);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(var(--avantune-color-rgb, 232, 78, 14), 0.22);
    transform: none;
    animation: none !important;
    transition: box-shadow 0.22s ease, border-color 0.22s ease;
}

.w3-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.15) 0 12%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(24deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 36px);
}

.w3-card::after {
    content: "";
    position: absolute;
    top: -8px;
    right: -12px;
    z-index: 1;
    width: 132px;
    height: 132px;
    pointer-events: none;
    background-image: url('../../Images/Arrow.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 1;
    transition: top 0.22s ease, right 0.22s ease, opacity 0.22s ease;
}

.w3-card:hover {
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.2), 0 6px 16px rgba(var(--avantune-color-rgb, 232, 78, 14), 0.25);
    transform: none;
    animation: none;
}

.w3-card:hover::after {
    top: -12px;
    right: -16px;
    opacity: 0.42;
}

.w3-MasterCard {
    animation: none !important;
    backface-visibility: visible;
    perspective: none;
}

.w3-card .card-header {
    position: relative;
    z-index: 1;
    display: block;
    height: auto;
    min-height: 90px;
    padding: 0 !important;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    background-color: transparent !important;
    text-align: left;
    max-width: 160px;
}

.w3-card .card-header p {
    display: -webkit-box;
    max-width: 196px;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 1.35em;
    font-weight: 700;
    line-height: 1.08;
    text-align: left;
    text-overflow: ellipsis;
    text-transform: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.w3-card .card-header img,
.w3-card .w3-card-badge {
    display: none;
}

.w3-card .card-action {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: auto !important;
    padding: 0 !important;
    line-height: normal !important;
}

.w3-card .card-start-button {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 15px !important;
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.w3-card .card-start-button:hover,
.w3-card .card-start-button:focus {
    border-color: rgba(255, 255, 255, 0.68) !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 8px 18px rgba(0, 0, 0, 0.12);
    outline: none;
}

.w3-card .card-start-button:active {
    transform: none;
}

.w3-card .card-start-label {
    display: inline-block;
}

.listViewType .w3-card,
.listViewType .w3-card.newItem {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 0;
}

@media (max-width: 480px) {
    .w3-card {
        font-size: 16px;
    }
}

#applicationContainer,
#mainApplicationContainer {
    box-sizing: border-box;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    padding-left: 12%;
    padding-right: 12%;
}

.portal-card-col {
    float: none !important;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex: 0 0 33.33333%;
    width: 33.33333%;
    max-width: 33.33333%;
    box-sizing: border-box;
}

.portal-card-col-full {
    flex-basis: 33.33333%;
    width: 33.33333%;
    max-width: 33.33333%;
}

.portal-card-col .w3-card {
    width: 290px;
    max-width: calc(100% - 16px);
    margin: 25px auto !important;
}

@media (min-width: 1560px) {
    .portal-card-col,
    .portal-card-col-full {
        flex-basis: 25%;
        width: 25%;
        max-width: 25%;
    }
}

@media (max-width: 1199px) and (min-width: 801px) {
    #applicationContainer,
    #mainApplicationContainer {
        padding-left: clamp(8px, calc((100vw - 596px) / 2), 12%);
        padding-right: clamp(8px, calc((100vw - 596px) / 2), 12%);
    }

    .portal-card-col {
        flex-basis: 50%;
        width: 50%;
        max-width: 50%;
    }

    .portal-card-col-full {
        flex-basis: 50%;
        width: 50%;
        max-width: 50%;
    }

    .portal-card-col .w3-card {
        width: 290px;
        max-width: 290px;
    }
}

@media (max-width: 800px) {
    #applicationContainer,
    #mainApplicationContainer {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #applicationContainer > .portal-card-col,
    #mainApplicationContainer > .portal-card-col,
    #applicationContainer > .portal-card-col-full,
    #mainApplicationContainer > .portal-card-col-full {
        display: flex !important;
        float: none !important;
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
    }

    #applicationContainer > .portal-card-col[style*="display: none"],
    #mainApplicationContainer > .portal-card-col[style*="display: none"],
    #applicationContainer > .portal-card-col-full[style*="display: none"],
    #mainApplicationContainer > .portal-card-col-full[style*="display: none"] {
        display: none !important;
    }

    .portal-card-col .w3-card {
        height: 215px !important;
        min-height: 215px !important;
        max-height: 215px !important;
        margin: 25px auto !important;
        width: 290px;
        max-width: calc(100% - 16px);
        font-size: 16px;
    }

    .w3-card .card-header {
        min-height: 90px;
    }

    .w3-card .card-header p {
        -webkit-line-clamp: 3;
    }

    .w3-card .card-start-button {
        min-height: 56px;
        padding: 14px 18px;
        font-size: 18px;
    }

    .w3-card::after {
        width: 132px;
        height: 132px;
    }
}

#toolbarSearchPanel {
    box-sizing: border-box;
    height: 44px;
    padding: 5px 20px 5px 12px;
    text-align: right;
    overflow: visible;
}

#toolbarSearchPanel .searchText {
    box-sizing: border-box;
    display: inline-block;
    width: 240px !important;
    max-width: calc(100vw - 32px);
    height: 34px !important;
    top: 0;
    right: 0;
    position: relative;
    text-align: left;
    vertical-align: top;
    transition: width 0.22s ease;
}

#toolbarSearchPanel .searchText:focus-within {
    width: 360px !important;
    max-width: calc(100vw - 32px);
}

#toolbarSearchPanel .main-searchText {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 100% !important;
    height: 34px;
    padding: 7px 12px 7px 38px;
    border-radius: 10px !important;
    border: 1px solid #c9c9c9;
    background-color: #fff;
    font-size: 16px;
    line-height: 20px;
    touch-action: manipulation;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

#toolbarSearchPanel .main-searchText:focus {
    animation: none;
    left: auto;
    transform: none;
    border-color: var(--avantune-color, #E84E0E);
    box-shadow: 0 0 0 3px rgba(var(--avantune-color-rgb, 232, 78, 14), 0.18);
    outline: none;
}

#toolbarSearchPanel .main-searchIcon {
    left: 11px;
    right: auto;
    top: 50%;
    height: 18px;
    width: 18px;
    line-height: 18px;
    color: #777;
    pointer-events: none;
    transform: translateY(-50%);
    animation: none !important;
    z-index: 2;
}

@media (max-width: 800px) {
    #toolbarSearchPanel {
        padding-right: 12px;
        text-align: center;
        overflow: visible;
    }

    #toolbarSearchPanel .searchText,
    #toolbarSearchPanel .searchText:focus-within {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px);
    }
}