/********************************
    FORM LOGIN
********************************/

/* sfondo */
body.loginWindow{
    background-image: url(background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.loginWindow .x-shadow{
  display: none !important;
}
.x-window-header {
    background: none !important;
}
.loginWindow .ext-el-mask{
    background-color: transparent;
    background-color: rgba(0, 0, 0, 0.2);
}

.x-plain.loginPanelItems-body.x-form{
    width: auto !important;
    position: relative;
}
#saveAccount{
  top:0;
}

/* tolgo tutte le immagini dei bordi di ext-js dalla windows di login */
#loginWindow .x-window-tc,#loginWindow .x-window-tl,#loginWindow .x-window-tr,
#loginWindow .x-window-mc,#loginWindow .x-window-ml,#loginWindow .x-window-mr,
#loginWindow .x-window-bc,#loginWindow .x-window-bl,#loginWindow .x-window-br,
body#loginWindow.x-body-masked .x-window-plain .x-window-mc,
#loginWindow body.x-body-masked .x-window-plain .x-window-mc,
#loginWindow .x-window-plain .x-window-body,
#loginWindow .x-window-body.x-window-body-noborder,
#loginWindow .x-panel-body-noheader,#loginWindow .x-panel-mc .x-panel-body,
#loginWindow .x-panel-tc,#loginWindow .x-panel-tl,#loginWindow .x-panel-tr,
#loginWindow .x-panel-mc,#loginWindow .x-panel-ml,#loginWindow .x-panel-mr,
#loginWindow .x-panel-bc,#loginWindow .x-panel-bl,#loginWindow .x-panel-br,
#loginWindow .x-panel,
#loginWindow .x-panel-bwrap,
.loginPanel .x-panel-tc,.loginPanel .x-panel-tl,.loginPanel .x-panel-tr,
.loginPanel .x-panel-mc,.loginPanel .x-panel-ml,.loginPanel .x-panel-mr,
.loginPanel .x-panel-bc,.loginPanel .x-panel-bl,.loginPanel .x-panel-br,
.loginPanel .x-panel
{
  background-image:none !important;
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
}

#loginWindow{
  width: 400px !important;
  position: relative !important;
  background-color: white;
  border-radius: 20px;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* disabilito il drag nascondendo la barra*/
#loginWindow .x-window-header.x-window-header-noborder.x-unselectable.x-window-draggable{
  display: none;
}

#loginId{
    position: relative !important;
}

/* imposta larghezza finestra */
#loginWindow .x-panel-body.x-form, #loginId, #loginWindow .loginPanel{
  width: 400px !important;
  /*height: 40vh !important;*/
}

.loginPanel {
    height: auto !important;
}

/* IE */
.ext-ie #loginWindow .loginPanel{
height: 450px !important;
}

/* topbar */
  #loginWindow .x-panel-header-text {
      visibility: hidden;
  }
  /*#loginWindow .x-panel-tc{*/
  #loginWindow .x-window-tc{
    background-image: url(logo_login.svg) !important;
    background-size: 230px;
    background-repeat: no-repeat;
    height: 113px;
    background-position-y: center;
    background-position-x: center;
 }


/*label finestra login*/
#loginWindow .x-form-label-left label.x-form-item-label {
  color: #565656;
  font: normal 10pt verdana;
  text-align: left;
  line-height: 22px;
  left: 13px;
  width: 100px !important;
}

/*input field finestra  login */
#loginWindow .x-form-item{
  margin-top: 8px;
}

#loginWindow .x-form-text,#loginWindow textarea.x-form-field {
  height: 30px;
  width: 260px !important; /* 293px se si aumenta modificare anche la larghezza della finestra sempre da css e #loginWindow #language*/
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border: 1px solid #565656;
  background-color: #FFFFFF;
}


.x-form-invalid, textarea.x-form-invalid {
    /*background-color: #FFFFFF;*/
    background-image: none;
    border-color: #FFFFFF;
}

#loginWindow .x-form-element{
    padding-left: 104px !important;
}

/* combo lingua company site*/
  #loginWindow .x-form-field-wrap.x-form-field-trigger-wrap .x-form-trigger.x-form-arrow-trigger{
    height: 28px;
    background-image: url(combo.png);
    width: 21px;
    right: 4px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: -1px 7px;
    border-color: #FFF;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px 4px 4px 0px;
    border-radius: 0px 4px 4px 0px;
  }

  #loginWindow .x-form-field-wrap{
    width: 260px !important;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    background-color: transparent;
  }

  #loginWindow .x-form-field-wrap.x-trigger-wrap-focus{
    border: none;
  }
  #loginWindow .x-form-field-wrap.x-form-field-trigger-wrap .x-form-trigger.x-form-arrow-trigger.x-form-trigger-over{
    background-image: url(combo_hover.png);
  }
  #loginWindow #language,
  #loginWindow #siteId,
  #loginWindow #companyId{
     /*270*/
  }

/* salva utente */
#x-form-el-saveAccount label{
  color: #565656;
  font: normal 11px verdana;
  opacity: 0.9;
  top: 0px;
  font-size: 10pt;
  line-height: 11px;
}


/* reset password */
#forgotpwdDiv{
    position: absolute;
    right: 38px; /* 17 */
    /*bottom: 72px;*/
    font: normal 11px verdana;
    opacity: 0.9;
    color: #565656;
}
  /* IE */
  .ext-ie #forgotpwdDiv{
      top: 214px;
  }
/*.loginWindow .x-window-body {
    height: auto !important;
}
.loginWindow .x-panel-mc form {
    height: auto !important;
}*/

/* nascondo il titolo della finestra di cambio psw */
.loginWindow .x-panel-tl,
.loginWindow .x-panel-tc,
.loginWindow .x-panel-tr,
.loginWindow .x-panel-bl,
.loginWindow .x-panel-bc,
.loginWindow .x-panel-br {
    display: none;
}

/* lascio il titolo nel form di login */
.loginWindow #loginId .x-panel-tl,
.loginWindow #loginId .x-panel-tc,
.loginWindow #loginId .x-panel-tr,
.loginWindow #loginId .x-panel-bl,
.loginWindow #loginId .x-panel-bc,
.loginWindow #loginId .x-panel-br {
  display: block;
}


/* bottone login */
    #loginId .x-plain-body.x-plain-body-noheader{
      margin-top: 30px;
      margin-bottom: 10px;
      width: 100% !important; /*fix per bottone login tagliato*/
    }
    #loginId .x-btn.x-btn-noicon.x-abs-layout-item{
        top: 0px !important;
        left: 18px !important;
        width: 347px !important;
        height: 30px !important;
        background-color: #00A5C3;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
    }
    #loginId .x-btn.x-btn-noicon.x-abs-layout-item:hover {
        border: none;
    }
    #loginId .x-btn.x-btn-noicon.x-abs-layout-item.x-btn-over{
      background-color: #4bb1cd;
    }
    #loginId .x-btn.x-btn-noicon.x-abs-layout-item button{
      color: #FFFFFF;
      font-size: 16px;
      font-family: verdana;
      text-transform: uppercase;
      line-height: 16px;
    }

    #loginId .x-btn.x-btn-noicon.x-abs-layout-item tbody, #loginId .x-btn.x-btn-noicon.x-abs-layout-item tr, #loginId .x-btn.x-btn-noicon.x-abs-layout-item td{
      background-image: none;
      border: none;
      height: 12px;
    }



/* finestra di messaggio */
/*    .loginWindow .x-window form.x-plain-body,*/
    .loginWindow .x-window-tl,.loginWindow .x-window-tr,.loginWindow .x-window-tc,
    .loginWindow .x-window-ml,.loginWindow .x-window-mr,.loginWindow .x-window-mc,
    .loginWindow .x-window-bl,.loginWindow .x-window-br,.loginWindow .x-window-bc,
    body.loginWindow.x-body-masked .x-window-plain .x-window-mc,
    .loginWindow .x-window-plain .x-window-body  {
        background-image: none;
        background-color: white;
        border-width: 0px;
    }

    /*bordo top center */
    .loginWindow .x-window-tc .x-window-header.x-unselectable.x-window-draggable{
      margin-top: 4px;
      background: url(logo_panel_topbar.png) no-repeat left;
      background-size: contain;
      height: 15px;
    }
    .loginWindow .x-window-header .x-window-header-text{
      visibility: hidden;
    }

    .x-tool.x-tool-close{
      background: url(close.png) no-repeat left;
      background-position: 0;
      background-size: contain;
    }
    .x-window-dlg .ext-mb-info {
      background-image: url(icon-info.png);
      background-size: contain;
    }
    .x-window-dlg .ext-mb-warning {
      background-image: url(icon-warning.png);
      background-size: contain;
    }
    .x-window-dlg .ext-mb-error {
      background-image: url(icon-error.png);
      background-size: contain;
    }


/* bottoni */
    .loginWindow .x-btn-tl,.loginWindow .x-btn-tr,.loginWindow .x-btn-tc,
    .loginWindow .x-btn-ml,.loginWindow .x-btn-mr,.loginWindow .x-btn-mc,
    .loginWindow .x-btn-bl,.loginWindow .x-btn-br,.loginWindow .x-btn-bc {
      background-image: none;
    }
    .loginWindow .x-window-dlg .ext-mb-text,.loginWindow .x-window-dlg .x-window-header-text {
      font-size: 12px;
      font-family: verdana;
      color: #3c3c3b;
    }
    .loginWindow .x-btn-noicon {
        background: none;
        background-image: none;
        background-color: #00A5C3;
        padding: 0px;
        border-radius: 4px;
    }
    .loginWindow .x-btn-noicon:hover {
        background-color: #f1aa83;
    }
    .loginWindow .x-btn button {
      color: #FFF;
      font: normal 12px verdana;
    }

/* barra di caricamento */
    /*bordo*/
    .x-progress-wrap{
      border: solid 0px #47ae46;
    }
    /* colore barra vuota */
    .x-progress-inner {
        background-color: #e3f5e3;
        background-image: none;
    }
    /* barra piena */
    .x-progress-bar {
        background-color: #47ae46;
        background-image: none;
        border-top-color: #47ae46;
        border-bottom-color: #47ae46;
        border-right-color: #47ae46;
    }

/* loading - activityindicator */
  .ext-el-mask-msg.x-mask-loading{
      border-color:#FFFFFF;
      background-color:#FFFFFF;
      background-image: none;
      border: 0px solid #FFF;
  }
  .x-mask-loading div {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    color: #3c3c3b;
    font: normal 12px Verdana;
    border: 0px solid #FFF;
    background-image: url(loading.svg);
    background-size: 40px 30px;
    padding: 12px 16px 10px 49px;
  }

/* combo */
.loginWindow .x-layer.x-combo-list, .loginWindow .x-combo-list-inner{
    width: 289px !important;
}
.loginWindow .x-layer.x-combo-list {
    margin: 0px;
    border: 0px solid #FFF;
    background-color: transparent;
    -webkit-box-shadow: 4px 9px 18px 0px rgba(50, 50, 50, 0.7);
    -moz-box-shadow:    4px 9px 18px 0px rgba(50, 50, 50, 0.7);
    box-shadow:         4px 9px 18px 0px rgba(50, 50, 50, 0.7);
}
.loginWindow .x-combo-list-inner{
    margin-top: 1px;
    border-radius: 4px;
    border-color: #CCC;
    border-width: 1px;
    /*background-color: #FFF;*/
}
.loginWindow .x-combo-list .x-combo-selected {
    border: none !important;
    background-color: rgba(80, 163, 237, 0.2);
    color: black;
}
.loginWindow .x-combo-list-item{
    padding: 4px 2px;
}



.loginWindow .x-panel,
.x-panel-body-noheader,
.x-panel-mc .x-panel-body,
ul.x-tab-strip-top,
.x-border-layout-ct,
.x-toolbar,
.x-panel-noborder .x-panel-tbar-noborder .x-toolbar,
.x-tab-strip-top .x-tab-right,.x-tab-strip-top .x-tab-left, .x-tab-strip-top .x-tab-strip-inner,
.x-panel-noborder .x-panel-header-noborder, .x-panel-header,
form,
.x-window-tl,.x-window-tr,.x-window-tc,
.x-window-ml,.x-window-mr,.x-window-mc,
.x-window-bl,.x-window-br,.x-window-bc,
.x-window form.x-plain-body,
body.x-body-masked .x-window-plain .x-window-mc,
.x-window-plain .x-window-mc,
.x-panel-tc,.x-panel-tl,.x-panel-tr,
.x-panel-mc,.x-panel-ml,.x-panel-mr,
.x-panel-bc,.x-panel-bl,.x-panel-br
{
    background-color: transparent;
    border: 0px solid #FFFFFF;
    background-image: none;
    
    /* animo tutti gli spostamenti */
    -webkit-transition: top 0.7s ease-in-out, right 0.7s ease-in-out,left 0.7s ease-in-out;
    -moz-transition: top 0.7s ease-in-out, right 0.7s ease-in-out,left 0.7s ease-in-out;
    -o-transition: top 0.7s ease-in-out, right 0.7s ease-in-out,left 0.7s ease-in-out;
    -ms-transition: top 0.7s ease-in-out, right 0.7s ease-in-out,left 0.7s ease-in-out;
    transition: top 0.7s ease-in-out, right 0.7s ease-in-out,left 0.7s ease-in-out;
}


.loginPanelItems-body .x-plain-bwrap,
.loginPanelItems-body .x-plain{
    width: 380px !important;
}

.loginWindow .x-window-tl, .loginWindow .x-window-tr, .loginWindow .x-window-tc, .loginWindow .x-window-ml, .loginWindow .x-window-mr, .loginWindow .x-window-mc, .loginWindow .x-window-bl, .loginWindow .x-window-br, .loginWindow .x-window-bc, body.loginWindow.x-body-masked .x-window-plain .x-window-mc, .loginWindow .x-window-plain .x-window-body{
    background-color: none !important;
}

.x-window.x-resizable-pinned {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    border-radius: 6px;
    background: white;
}

#appVersionDiv {
    position: relative;
    font: normal 11px verdana;
    opacity: 0.9;
    color: #565656;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

/*NL - Senza Logo release si vede tagliata la versione release */
/* Se si rimette il logo, togliere questo css */
#appVersionDiv {
    margin-bottom: 5px;
}

#appIconVersion {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    position: relative; 
    top: -2 !important; 
}

/* Pannellino cambio password */
.changePwd .x-form-text.x-form-invalid {
    background-color: #FDBAB9;
    border: 1px solid #F95354;
}

.changePwd .x-form-text {
    margin:4px 0;
    height:30px;
    border-radius: 4px;
    width: 150px !important;
    border: 1px solid;
}
.changePwd .x-form-item-label {
    height:23px;
    margin-top:10px;
    margin-left: 20px;
}

.changePwd .x-btn {
    display: relative !important;
    top: unset !important;
    bottom: 10px !important;
    width: 270px !important;
    left: 20px !important;
    height: 40px !important;
    border-radius: 6px;
}

.changePwd .x-btn:hover {
        border: none;
    }
.changePwd .x-btn.x-btn-over{
  background-color: #4bb1cd;
}

.changePwd .x-btn button {
    text-transform: uppercase;
    font-size: 14px;
}

.changePwd .x-plain-body.x-plain-body-noheader {
    height:50px !important;
}


/*Messaggio password scaduta*/
.x-window-dlg .ext-mb-question {
    background-image: url(question-mark.svg);
}

.x-window-dlg .x-toolbar-left {
  height:50px;
}

.x-window-dlg .x-toolbar-left .x-btn {
  height: 30px;
  margin: 0 10px;
  width: 90px !important;
}

.x-window-dlg .x-toolbar-left .x-btn:hover {
    border: none;
}
.x-window-dlg .x-toolbar-left .x-btn.x-btn-over{
  background-color: #4bb1cd;
}


/*Password dimenticata*/
.forgotPanelItems .x-form-text,#loginWindow textarea.x-form-field {
  height: 30px;
  width: 310px !important; /* 293px se si aumenta modificare anche la larghezza della finestra sempre da css e #loginWindow #language*/
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border: 1px solid #565656;
  background-color: #FFFFFF;
  margin-left: 5px;
  padding-left: 10px;
}


.forgotPanelItems .x-form-invalid, textarea.x-form-invalid {
    /*background-color: #FFFFFF;*/
    background-image: none;
    border-color: #FFFFFF;
}

.forgotPanelItems .x-form-field-wrap.x-form-field-trigger-wrap .x-form-trigger.x-form-arrow-trigger{
    height: 28px;
    background-image: url(combo.png);
    width: 21px;
    right:-60px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: -1px 7px;
    border-color: #FFF;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px 4px 4px 0px;
    border-radius: 0px 4px 4px 0px;
}

.forgotPanelItems .x-form-item-label{
    height:23px;
    margin-top:5px;
    margin-left: 10px;
}

.x-toolbar-left {
    height:50px !important;
}

.x-toolbar-cell .x-btn {
    display: relative !important;
    bottom: 10px !important;
    width: 100px !important;
    margin: 0 40px;
    height: 30px;
    border-radius: 6px;
}

 .x-toolbar-left .x-btn .x-btn-text{
  text-transform: uppercase;
}
.x-toolbar-left .x-btn:hover {
    border: none;
}
.x-toolbar-left .x-btn.x-btn-over{
  background-color: #4bb1cd;
}

.x-window-body.forgotPanel {
  height: 80px !important;
}