.logo-octopus {
    postion: relative;
    width: 200px ;
    length: 50%;
    margin: 0 auto;
  }
  
  
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  
  .animated:hover {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  
  
  
  
  @-webkit-keyframes tada {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  
    10%, 20% {
      -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }
  
    30%, 50%, 70%, 90% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
  
    40%, 60%, 80% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
  
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  
  @keyframes tada {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      -ms-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  
    10%, 20% {
      -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
      -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }
  
    30%, 50%, 70%, 90% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
  
    40%, 60%, 80% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
  
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      -ms-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  
  .tada {
    -webkit-animation-name: tada;
    animation-name: tada;
  }
  
  
  .x-form-text, textarea.x-form-field {
      background-color: rgb(254, 254, 254);
      color: rgb(49, 55, 61);
      border-radius: 3px !important;
  }
  
  
  .x-form-field-wrap .x-form-trigger {
      border-color: #e0e0e0 !important;
      border-start-end-radius: 4px;
      border-end-end-radius: 4px;
  }
  
  .x-combo-list {
      border-radius: 4px !important;
  }
  
  .x-form-text, textarea.x-form-field {
     border: 1px solid #e0e0e0 !important;
  }
  
  
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background: white;
    width: 8px;
  }
  ::-webkit-scrollbar-thumb {
      outline: 1px solid transparent;
      background-color: #1b77d2;
      border-radius: 4px;
      width: 8px;
  }
  
  .x-window.blue-window-active.active-window {
      border: 1px solid #1b77d2!important;
      background-color: #1b77d2!important;
      border-radius: 4px !important;
  }
  
  
  .active-window.x-window.active-window.x-window .x-window-tl .x-window-tr .x-window-tc .x-window-header .x-tool-close {
      background-color: #c54a4a;
      border-radius: 12px !important;
  }
  
  
  .x-panel-body {
      border-color: #84878a !important;
  }
  
  
  
  .x-tab-panel .x-tab-strip .x-tab-strip-active {
      background-color: #1b77d2 !important;
      border-radius: 8px 8px 0px 0px !important;
  }
  
  .x-window.blue-window-active.active-window .x-btn {
      background-color: rgb(27 119 210) !important;
      border-color: rgb(27 119 210) !important;
      border-radius: 5px;
  }
  
    /*
      background: url(https://wallpaper.dog/large/5467206.jpg) no-repeat center center fixed;
      background-color: #1a1b37;
    */
  body {
  
      background-position: top left;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  
  .x-panel-btns td.x-toolbar-cell {
      padding: 0px;
  }
  
  .x-panel-btns {
      padding: 4px;
      overflow: hidden;
  }
  
  .x-window.blue-window-active.active-window .x-btn {
      background-color: rgb(22 96 134);
      border-color: rgb(22 96 134);
      border-radius: 8px;
      margin-right: 2px;
  }
  
  
  .x-btn:hover {
      box-shadow: 1px 1px 1px 1px #97B1BF;
  }
  
  .x-tab-panel .x-tab-panel-body {
      border-color: #aeb6be;
      background-color: #f5f5f5;
  }
  
  .x-toolbar {
      border-color: #f5f5f5 !important;
      background-color: #f5f5f5 !important;
  }
  
  .x-toolbar td, .x-toolbar span, .x-toolbar input, .x-toolbar div, .x-toolbar select, .x-toolbar label {
      font-size: 11px;
      font-weight: normal;
      font-family: "Segoe UI", tahoma, arial, verdana, sans-serif;
      color: #31373d;
  }
  
  .x-panel {
      border-color: #f5f5f5 !important;
      background-color: #f5f5f5 !important;
  }
  
  .x-toolbar.x-toolbar.x-toolbar.x-toolbar .x-btn .x-btn-text {
      color: #000000 ;
      font-size: 13px;
      font-family: "Segoe UI", tahoma, arial, verdana, sans-serif;
      font-weight: normal;
      text-shadow: none;
  }
  
  .x-panel > .x-panel-header {
      color: #31373d !important;
      font-weight: bold !important;
      font-size: 11px !important;
      font-family: "Segoe UI", tahoma, arial, verdana, sans-serif  !important;
      border-color: #ffffff00 !important;
      background-color: #e9e9e9bf !important
  }
  .x-grid3 {
      background-color: #ffffff;
  }
  
  .x-tab-panel .x-tab-strip-spacer {
      display: none;
  }
  
  .x-tab-panel .x-tab-strip-top {
      padding-top: 3px;
      background: #f5f5f5;
  }
  
  .x-tab-panel .x-tab-panel-header {
      border-color: #f5f5f5 !important;
      background: #f5f5f5 !important;
  }
  
  .x-panel .x-panel-body {
      border-color: #f5f5f5 !important;
      border-radius: 4px !important;
  }
  
  .x-grid3 .x-grid3-header {
      background-color: #f5f5f5;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #1b77d2;
  }
  
  .x-grid3 .x-grid3-hd-row td {
      border-left-color: transparent !important;
      border-right-color: #aeb6be !important;
      font-weight: 600 !important;
      font-size: 11px !important;
      font-family: "Segoe UI", tahoma, arial, verdana, sans-serif !important;
      color: #030202 !important;
      background: #f5f5f5 !important;
  }
  
  
  .x-grid3 table {
      table-layout: fixed;
  }
  
  .x-grid3 .x-grid3-row {
      background-color: white;
      border-color: #e6e6e6;
  }
  
  .x-grid3 td.x-grid3-hd-over .x-grid3-hd-inner {
    background-color: f5f5f5 !important;
  }
  
  .x-panel .x-panel-bbar .x-toolbar, .x-panel .x-panel-tbar .x-toolbar {
      border-color: #f5f5f5 !important;
  }
  
  .x-grid-group-hd div.x-grid-group-title {
      background-image: url(../images/azzurra-legacy/grid/group-collapse1.gif);
      color: #31373d;
      font: 12px "Segoe UI", tahoma, arial, verdana, sans-serif;
  }
  
  .x-window .x-window-header {
      color: #ffffff !important;
      font-family: "Segoe UI", tahoma, arial, verdana, sans-serif;
      font-weight: 400;
  }
  
  .x-window.blue-window-active.active-window .x-window-mc {
      border: 1px solid #1b77d2;
      border-radius: 8px;
  }
  
  .x-window.blue-window-active.active-window .x-btn {
      background-color: rgb(27 119 210) !important;
      border-color: rgb(27 119 210) !important;
      border-radius: 4px;
  }
  
  .x-grid3 td.x-grid3-hd-over .x-grid3-hd-inner {
    background-color: #f5f5f5;
  }
  
  
  .x-treegrid .td.x-grid3-hd-over, .x-treegrid td.sort-desc, .x-treegrid td.sort-asc, .x-treegrid td.x-grid3-hd-menu-open {
    border-right-color: #f5f5f5;
    background-color: #f5f5f5;
  }
  
  .x-menu {
      background-color: #4a4a4a;
      border-radius: 4px;
  }
  
  .x-tab-panel-bwrap {
      overflow: hidden;
      border-top: 3px solid #1b77d2;
  }
  
  .x-toolbar.x-toolbar.x-toolbar.x-toolbar .x-btn.x-btn-over {
      border-radius: 3px;
  }
  
  .x-panel .x-panel-mc, .x-panel .x-panel-body {
      background-color: rgb(245 245 245);
      font-size: 11px;
      font-family: "Segoe UI", tahoma, arial, verdana, sans-serif;
      font-weight: normal;
      color: #31373d;
  }
  
  .x-btn-group .x-btn-group-header {  
      background-color: #1b77d2 !important;
      border-radius: 4px !important;
  }
  
  .x-date-middle, .x-date-left, .x-date-right {
      background-color: #1b77d2 !important;
  }
  
  .x-btn {
      background-color: #1b77d2;
      border-width: 1px;
      border-style: solid;
      border-color: #1b77d2;
  }
  
  .x-btn.x-btn-over {
      background-color: #4395e6;
      border-color: #4395e6;
  }
  
  .x-combo-list .x-combo-selected {
      border-color: #cdd2d7 !important;
      background-color: #1b77d2 !important;
      color: #ffffff !important;
  }
  
  
  .folder {
      background-image: url(/images/folder-open-ico.png) !important;
  }
  
  .x-toolbar div.xtb-text {
      padding: 2px 2px 0px;
      line-height: 16px;
      display: block;
  }
  
  .x-tab-panel .x-tab-strip .x-tab-strip-over {
      background-color: #538db5 !important;
      border-radius: 8px 8px 0px 0px !important;
  }
  
  
  .x-btn-group {
      box-shadow: rgb(255 255 255 / 80%) 0px 1px inset;
      border-width: 0px;
      border-style: solid;
      border-color: rgb(255 255 255 / 0%);
      border-radius: 2px;
  }
  
  .x-date-inner .x-date-today a {
      border-color: #1b77d2;
  }
  
  .x-btn-group .x-btn-group-header .x-btn-group-header-text {
      font-size: 10.4px;
  }
  
  .x-grid3 .x-grid3-cell-inner {
      color: #0e0e0e;
  }
  
  .x-grid3 .x-grid3-row:last-child {
      border-bottom-width: 4px;
  }
  
  .x-window.blue-window-active.active-window .x-btn .x-btn-text {
      color: white !important;
  }
  
  .x-form-invalid, textarea.x-form-invalid{
      border-color: #c54a4a !important;
      color: #475059;
  }
  
  .x-tab-panel .x-tab-strip .x-tab-strip-over {
      background-color: #b1d8ff;
      border-radius: 8px 8px 0px 0px !important;
  }
  
  .x-tab-panel .x-tab-strip .x-tab-strip-over .x-tab.strip-text {
     color: #57626d;
  }
  
  
  .x-tree-node-leaf .x-tree-node-icon {
      background-image: url(../images/azzurra-legacy/tree/icons-small.png) !important;
      background-position: -32px center !important;
  }