html,body{font-family: 'Roboto', sans-serif;
    font-size:14px;
 /*    color:#344960; */
 color:#1a1a1a;
    background:#EBEBEB}

/* a{color:#344960} */
/* a:hover{color:#ff7400} */


/* FireFox */
html * {
    @supports not selector(::-webkit-scrollbar) {
        * {
            scrollbar-width: auto;
            scrollbar-color: #808080 #e0e0e0;
        }

        .sidebar-left {
            scrollbar-color: #4094df #007bff;
            scrollbar-width: auto;
        }
    }
}

/* Chrome */
::-webkit-scrollbar {
    width: 3px;
    background: #eff7fd;
}
::-webkit-scrollbar-track {
    background: #eff7fd;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    margin:3px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: #bbbbbb;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}

main.hiddenScrollbar::-webkit-scrollbar {
    display: none; /* chrome, safari, opera*/

}
.hiddenScrollbar{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

::-webkit-file-upload-button,
::file-selector-button {
  display: none;
}





.center{text-align:center}
.right{text-align:right}
.mTop5{margin-top:5px}
.mTop10{margin-top:10px}
.mTop15{margin-top:15px}
.mBot5{margin-bottom:5px}
.mBot10{margin-bottom:10px}
.mBot15{margin-bottom:15px}
.mLeft10{margin-left:10px}
.mRight10{margin-right:10px}
.gray{color:gray}
.red{color:#e14646}
.floatL{float:left}
.floatR{float:right}
.small{font-size:11px}
sup{color:red;font-weight:bold}
.hidden{display:none}
.relative{position:relative}

#h1{font-size:54px;margin-bottom:15px;font-weight:400;color:#344960}
#h1 div.logo{background:#fff;padding:10px;float:left}
#h1 span{color:#ff6e00}

input[type=submit],input[type=button],button,button.orange{background: rgb(223, 117, 20);color: white;border-radius: 4px;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2)}
input[type=submit]:hover,input[type=button]:hover,button:hover{background: rgb(255, 109, 0)}
input[type=text],input[type=email],input[type=password],textarea{font-size:14px}
textarea{width:650px;padding:14px;resize:none;font-size:11px;background:#fff;border:0;color:#000}

#container{width:760px;margin:auto;}
/* #wrapper{background:#f9f9f6;padding:15px;margin-bottom:15px;box-shadow: 0 4px 5px -2px rgba(0,0,0,0.29);border-left:1px rgba(0,0,0,0.04) solid;border-top:1px rgba(0,0,0,0.04) solid}
 */
/* #headerWrapper{background:#003c71} */
#header{width:760px;margin:auto}
#headerText{font-family: 'Fira Sans', sans-serif;font-size:13px;color:#fff;float:left;padding:12px 0}
#headerText a{color:#fff}

#linguaSelect{float:right;padding:8px 0}

#loghiTable{margin:15px 0;width:100%}
#aziendaLogo{float:left;max-height:50px;max-width:200px}
#aziendaLogo img{max-height:50px}
#qaplaLogo{
    margin-top: 1rem;
    flex-direction: column; 
}
.powered{
    font-size: 10px;
    color: #344960;
    margin-bottom: .5rem;
}

#qaplaLogoIMG{width: 100px}
#aziendaLogo{text-align:left;vertical-align:middle}

.d-flex{
	display: flex;
	align-items: center;
	justify-content: center;
}
.ticketHeader{
	margin-block: 1rem;
}

#status{
    border-radius: .5rem;
    background:#fff;
    margin-bottom:15px;
    font-size:22px;
    padding:20px;
    height:60px;
    display:flex;
    align-items: center;
    justify-content: space-between;
   
}

.statusContainer{
	width: 100%;
	display: flex;
}

#statusDisplay{margin-top:5px;padding-left:60px}
/* #corriereLogo{float:left} */
#logoContainer{
    display:flex;
    width: 50%;
}
#logoContainer img{
    vertical-align:middle;
    width:48px;
    height:48px;
    vertical-align:middle;
    margin-right:20px;
    border-radius: 5px;
}

#qaplaTracking{
    width: 50%;
    display: flex;
    justify-content: end;
    align-items: center;
    font-size: 12px;
}



#trakingStatus{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-block: 2px;
}
#qaplaStatus {
    display: flex;
    align-items: center;
}
#qaplaStatus #statusName{
    margin-right:10px;
    font-size:12px;
}
#qaplaStatus .shipping-status-icon{
    width: 15px;
    height:15px;
}

#tracking{text-align:center;padding:20px;font-size:20px}
#wrapper{
    background-color: #FFF;
    padding: 10px;
    border-radius: .5rem;
    position:relative;
    height: 65vh;
}

#wrapperHeader{
    position: absolute;
    top:0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    width: 100%; 
    font-size: 1rem;
    background-color: #F9FAFB;
    border-radius: .5rem .5rem 0 0;
    border-bottom: solid 1px #E2E8F0;
}


#statusNome{float:right;padding:14px 20px;color:#fff;border-radius:5px;font-size:18px}
#corriereImg{vertical-align:middle;width:48px;height:48px}



#trackingNumber{font-family: 'Roboto', sans-serif;
    font-size:16px;

}
#trackingNumber:hover{color:#ff7f3f}

#wrapperHeader span{
    margin-inline-start: 20px;
}
#ticket{
    display:flex;
    align-items: center;
    padding: 7px  10px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;   
    background:#003C71;
    color: white;
    border-radius: 4px;
    text-decoration: none;
    border:none;
    
}

#wrapperContent{
    height: calc(100% - 55px);
    position:relative;
    /* background-color:  violet; */
    margin-top: 50px;
}



#ticket:hover{
    background:#054a86;
    color:#fff;
}

.ticketTitolo{background:#B2B2B2;padding:10px 8px;border-bottom:1px #b1b1b1 solid;color:#fff}


#lista{
    overflow-y: auto;
    height: calc(100% - 120px);
    padding:5px 10px;
    display: flex;
    flex-direction: column;
}
.ticketElement{
    width: 60%;
    margin-block: .7rem;
    background-color:#3ee167;
    border-radius: .5rem;
    padding:10px;
    font-size: 12px;
}
.ticketElement.ticketCompany{
    background-color:#FFF7ED;
    border:solid 1px #FED7AA;
        align-self: flex-start;
}
.ticketElement.ticketClient{
    background-color:#EFF6FF;
    border:solid 1px #BFDBFE;
    align-self: flex-end;
}
.ticketTitle{
    display:flex;
    justify-content: space-between;
    align-items: center;
    height:30px;

}
.ticketTitle .companyTitle{
    color:#b35619;
}
.ticketTitle .clientTitle{
    color:rgb(28, 84, 153);
}
.ticketTitle .date{
    color: #344960;
}
.ticketText{
    line-height: 20px;
}

#formContainer{
    border: solid 1px #DBEAFE;
    position: absolute;
    border-radius: 5px;
    width: 100%;
    height: 110px;
}
#rispondiForm{
    display: flex;
    flex-direction: column;
    padding: .5rem;
    position: relative;
}
#nota{
    width: 94%;
    border:solid 1px #D1D5DB;
    border-radius: 5px;
    outline: none;
    padding:8px;
   
}
#nota:focus{
    outline: none;
}
#controlContainer{
    width: 6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-inline: 5px;
}
#inputContainer{
    display: flex;
    align-items: start;
}
#labelTextarea{
    display: flex;
    align-items: center;
    font-size: 10px;
    color: #344960;
    margin-bottom: .25rem;
}
#sendTicket{
    width: 30px;
    height: 30px;
    border:none;
    outline: none;
    color:#FFF;
    background-color: #FA8231;
    cursor: pointer;
}
#sendTicket:hover{
     background-color: #FAA064;
}
#attachementsList{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: #344960;
    margin-top: .5rem;
}

#fileLabel{
    max-width: 50%;
    display: flex;
    align-items: center;
    font-size: 14px;
    cursor:pointer;
    color: #344960;
}

#fileLabel i {
    margin-right:10px;

}
#file{
    font-size: 10px;
    cursor: pointer;
}

#counter{
    position:absolute;
    right: 70px;
    bottom:10px;
    font-size:10px;
    color: #344960;
}





.ticketTesto > div{padding:18px 8px;background:#F7F7F7;margin-bottom:2px;margin-top:1px;color:#1A1A1A}
.ticketText img{max-width:200px;display:block;margin:10px auto;cursor:pointer;border:1px #333 solid}
.ticketText img:hover{border-color:#344960;}

#postIMG{width:152px;height:26px;line-height:26px;cursor:pointer;display:inline-block;color:#fff;font-size:12px;font-weight:bold;padding-left:14px;border-radius:3px;background:#7F8C8D url('/btn.png') no-repeat 142px center;margin-top:2px}
#postIMG:hover{background-color:#FF6E00}

div.cusErrorPanel
{
    z-index: auto;         
    position:absolute;
    width: 276px;
    height: 35px;
    overflow: hidden;
    text-indent: 5px;
    line-height: 40px;
    font-size: 12px;
    font-family: Arial;
    background: url(https://cdn.qapla.it/www/img/tooltop.gif) no-repeat left top;
    opacity:0.9;
    filter: alpha(opacity=90);
    color: red;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/*
 * SimpleModal Confirm Modal Dialog
 * http://www.ericmmartin.com/projects/simplemodal/
 * http://code.google.com/p/simplemodal/
 *
 * Copyright (c) 2010 Eric Martin - http://ericmmartin.com
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Revision: $Id: confirm.css 242 2010-03-14 00:55:02Z emartin24 $
 *
 */

#confirm {display:none;z-index:99999999999}
#alert {display:none;z-index:99999999999}

/* Overlay */
#confirm-overlay {background-color:#eee; cursor:wait;}

/* Container */
#confirm-container {min-height:140px; width:420px;text-align:left; background:#fff; border:1px solid #000;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

-moz-box-shadow:0 0 0 1px #eee inset, 0 0 20px rgba(0,0,0,0.9);
-webkit-box-shadow:0 0 0 1px #eee inset, 0 0 20px rgba(0,0,0,0.9);
box-shadow:0 0 0 1px #eee inset, 0 0 20px rgba(0,0,0,0.9);

}
#confirm-container .header {height:24px;line-height:24px; width:100%;; color:#fff; font-weight:bold;text-align:left;font-size:13px;
background: #404853;
background: linear-gradient(#687587, #404853);
}
#confirm-container .header span {padding-left:8px;}
#confirm-container .message {color:#333; font-size:14px; margin:0;padding:20px 4px 12px 12px;height:32px;font-size:14px}

#confirm-container .buttons {line-height:22px;width:160px;float:right;padding:10px 8px 0;} 
#confirm-container button{margin-left:10px}

#confirm-container a.modal-close,
#confirm-container a.modal-close:link,
#confirm-container a.modal-close:active,
#confirm-container a.modal-close:visited {text-decoration:none; font-weight:bold; position:absolute; right:10px; top:2px; color:#fff;}
#confirm-container a.modal-close:hover {color:#ccc;}

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (max-width : 767px) {
	#container{width:98%;margin:auto}
	#header{width:100%}
	#statusDisplay,#qaplaLogo,#headerText,#spacer{display:none}
	#linguaSelect{float:right;margin-right:5px}
	#ticket{float:none;margin:auto}
	#trackingNumber{float:none;text-align:center}
	#statusButton{float:none;display:block;margin:10px auto 10px auto;padding-left:0;padding-right:0;width:90%}
	#aziendaLogo{margin:auto;float:none;text-align:center}
	#corriereLogo{float:none;margin:auto;text-align:center;margin-top:5px}
	
	textarea{width:90%}
}