#logo {    width: 100%;    margin-left: auto;    margin-right: auto;    text-align: center;    font-size: 12px;    padding-top: 0px;    margin-top: 0px;    position: sticky;    top: 0px;    background-color: white;    z-index: 1000;}.daterangepicker .today{ background-color: #85ee8c; opacity: 0.7;}/*HOVER DATEPICKERA*/#rangedatepicker2:hover{    background-color: #accfff;}.btn:focus,.btn:active {    outline: none !important;    box-shadow: none!important;}/*CONTAINER MENU DATEPICKERA*/#nav_data>.container-fluid{    padding-left: 0px!important;}/*IKONKA KALENDARZ DATEPICKERA*/.bi-calendar4-week{    left: -2px;    top:-1.5px;    position: relative;}#fullScreenMask {    position : fixed ;    top :  0 ;    left :  0 ;    width :  100% ;    height :  100% ;    display : none ;    background - color : #ffffff ;}#fullscreen {    width :  100 % ;    height :  100 % ;}.btn:focus {    outline: none;    box-shadow: none;}body {    overflow-y: scroll !important;}#navbar_logo{padding:0px;margin:0px;height: 14px;font-size: 12px;}.tabulator {    margin-top: 5px;    margin-bottom: 5px;    background-color: white !important;}.tabulator .tabulator-header .tabulator-col {    background: rgba(var(--bs-light-rgb)) !important;}li {    line-height: 1;}input[type="search"] {    height: 24px;}.dropdown-menu[name="2"] {    left: -120px !important;    /*top: -20px!important;*/    /*margin-top: 0px!important;*/    /*padding-top: 0px!important;*/    z-index: 1300;    font-size: 18px;}.dropdown-menu[name="2"] .dropdown-item {    height: 26px;}#machine, #logout, #zarzadzaj, #dropdownMenuButton1 {    padding: 6px !important;    padding-top: 0px !important;    margin: 0px;    width: 42px !important;    height: 36px !important;}.btn-group[id="maszyny1"] {    width: 650px !important;}.btn[typ="awariapilabtnl"]{width: 25% !important;}.btn[typ="zapisz_maszyna"],.btn[typ="zapisz_user"]{    height: 26px;    padding-top: 0px;}.btn[type="menu1"] {    min-width: 120px !important;    padding-left: 7px;}.form-control {    height: 22px !important;    font-size: 12px;}#rangedatepicker {    font-size: 13px;}#produktselect {    max-width: 200px;}#zapisz_wyswietlaj_zdarzenia, #zapisz_opcje, #zapisz_ustawienia, #zapisz_zakresy_analiza {    height: 30px;    padding-top: 2px;}.btn {    margin-left: 1px !important;}.btn[type="menu1"] {    /*width:800px;*/    margin-top: 2px;    /*width: 100px!important;*/    max-width: 100px !important;    height: 35px !important;    padding-top: 3px;}/*NAVBAR TABELE PRODUKTÓW*/.navbar[brd="border"] {    border: 1px solid #c9c9c9;    border-bottom: none;    margin-top: 3px;}.navbar {    height: 35px;    line-height: 0.4;}.table[brd="border"] td, .table th {    border: 1px inset lightgray;}table[brd="border"].table {    border: 1px solid #c9c9c9;}.table[name='login'] {    max-width: 200px;    font-size: 12px;    font-weight: bolder;    margin: auto;}.table[name='login'] .btn {    height: 27px;    padding-top: 0px;}.input-group-text {    font-size: 12px;    padding-left: 4px;}#akord, #ilosc_skokow_b, #skok_b, #tester {    height: 32px;    padding-top: 3px;}.input-group-prepend {    width: 90px;    height: 38px !important;}#akordi, #skok_i, #ilosc_skokow_i, #max_skala {    max-width: 80px;    height: 32px !important;}.column {    float: left;    width: 50%;}.column[name='2'] {    display: flex;    justify-content: flex-end;}.column[name='end'] {    display: flex;    justify-content: flex-end;    max-width: 33%;}.column[name='mid'] {    display: flex;    justify-content: center;    max-width: 33%;}.col-sm {    max-width: 33%;}.row:after {    content: "";    display: table;    clear: both;}/*PIERWSZA KOLUMNA - SZEROKOŚĆ NA SZTYWNO*/.table[name='elementy'] thead tr th:first-child,.table[name='elementy'] tbody tr td:first-child {    width: 220px;    min-width: 220px;    max-width: 220px;    word-break: break-all;}/*PIERWSZA KOLUMNA - SZEROKOŚĆ NA SZTYWNO*/.table[name='elementy2'] thead tr th:first-child,.table[name='elementy2'] tbody tr td:first-child {    width: 90px;    min-width: 90px;    max-width: 90px;    word-break: break-all;}.table[name='elementy3'] thead tr th:first-child,.table[name='elementy3'] tbody tr td:first-child {    width: 90px;    min-width: 90px;    max-width: 90px;    word-break: break-all;}.table[name='elementy2'] td {    padding: 6px;}/*PIERWSZA KOLUMNA - SZEROKOŚĆ NA SZTYWNO*/.table[name='elementy2'] thead tr th:nth-child(2),.table[name='elementy2'] tbody tr td:nth-child(2) {    width: 55px;    min-width: 55px;    max-width: 55px;    word-break: break-all;}.nav-link.active {    background-color: #ffffff !important;    border: 1px solid #0883ff;}.nav-tabs {    border-bottom: 1px solid #0883ff;}.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {    border-left: 1px solid #0883ff;    border-right: 1px solid #0883ff;    border-top: 1px solid #0883ff;}/*.btn-group*//*{*//*    background-color: white;*//*    width: 50%;*//*      z-index: 1000;*//*}*/#datepicker {    padding: 0px;    margin-bottom: -16px;    height: 25px;    width: 125px;    font-size: 14px;    line-height: 1;    left: 0px;}#tabele {    /* table-layout:fixed;    margin-top: 3px;    width: 100%;    height: 100vh; */}.btn[pressed="true"] {    background-color: #0a58ca;;}/* USTAWIENIA WYŚWIETLANIA TELEFONIE TELEFON POZYCJA PIONOWA*/@media screen and (max-width: 729px){    #rangedatepicker2    {        display:inline;        font-size: 14px!important;        width: 130px!important;        min-width: 130px!important;        height: 30px;        line-height: 1.5!important;        background-color: white;        color: #0a53be;        border-color: #0a53be;    }    #wczytaneprzyciski    {        height: 30px!important;    }    #button_left,#button_right    {        width: 25px!important;        max-width: 25px!important;        height: 30px!important;        margin-top: 0px!important;        padding: 0px;    }    #some-element {        display: none;    }    #akord, #ilosc_skokow_b, #skok_b {        height: 32px;        padding-top: 3px;    }    #example-table {        font-size: 10px;    }    .input-group-text {        width: 110px;    }    input[name="zak"] {        max-width: 125px;    }    #machine, #logout, #zarzadzaj {        margin: 1px;        padding: 3px;        padding-left: 6px;        padding-right: 6px;        width: 34px;        height: 34px;    }    #menu_ustawienia {        width: 100vw;        margin: auto;    }    .btn-group[id="maszyny1"] {        width: 250px !important;    }    .btn {        height: 28px;        padding: 0px;        font-weight: bold !important;        line-height: 2.0 !important;        font-size: 10px !important;    }    /*MENU NA SAMEJ GÓRZE , PRZYCISKI WYBORU MASZYN I AWARIA*/    .btn[type="menu1"] {        min-width: 50px !important;        max-width: 50px !important;        height: 36px !important;        padding: 0px;        padding-top: 7px;    }    .btn[type="menu2"] {        min-width: 55px !important;        /*max-width: 55px!important;*/        line-height: 1;        height: 45px !important;        padding: 0px;        padding-top: 4px;    }    .btn[type="menu_awaria_maszyny"] {        min-width: 55px !important;        /*max-width: 55px!important;*/        line-height: 1;        height: 30px !important;        padding: 0px;        padding-top: 4px;    }    #row2 {        width: 100vw;    !important;    }    .content {        max-width: 100vw;        margin-left: 0px;        margin-right: 0px;    }    #wykresy {        width: 100vw;        height: 500px;        margin: auto;    }    #wykresy2 {        width: 100vw;        height: 500px;        margin: auto;    }    .table {        font-size: 10px;        width: 98vw;    }    .navbar    {        position: sticky;        display: flex;        align-items: center;        justify-content: space-between;        margin: auto;        width: 100vw;        background-color: white;        height: 48px;    }    /*NAVBAR NA KTÓRYM JEST FLAGA  , ANALIZA ORAZ DANE*/    #navbar2 {        z-index: 1300;        height: 32px !important;        padding-top: 0px !important;        margin-top: 0px !important;    }    /*LISTA MASZYN*/    #navbar5 {        z-index: 1200;        top: 32px !important;        background-color: white;        height: 32px !important;        margin-bottom: 6px;    }    /*LISTA MASZYN*/    /*#wczytaneprzyciski {*/    /*    z-index: 1200;*/    /*    top: 32px !important;*/    /*    background-color: white;*/    /*    height: 32px !important;*/    /*    margin-bottom: 6px;*/    /*}*/    /*DZIENNA ANALIZA, ANALIZA CZASU PRACY, ANALIZA CZASOWO ILOŚCIOWA, ANALIZA CZASU PRODUKCJI*/    #navbar3 {        z-index: 1200;        top: 70px !important;        background-color: white;        height: 45px !important;        padding-top: 0px !important;        margin-top: 0px !important;    }    #navbar4 {        z-index: 1200;        top: 50px !important;        background-color: white;        height: 34px !important;    }    #maszyny {        position: sticky;        top: 25px;        margin-top: 0px;        height: 30px;        margin-bottom: 3px;        background-color: #ffffff !important;        width: 100%;    }    #DivPrzyciskiAwariaMaszyny {        z-index: 2;        position: sticky;        top: 40px;        width: 100vw;        margin: auto;    }    #DivPrzyciskiMaszyny {        width: 100vw;        margin: auto;        position: sticky;        top: 40px;        z-index: 2;    }    .btn[name="skalabutton"] {        height: 25px;        padding-left: 2px;        padding-right: 2px;        padding-top: 0px;        border-top: 0px;        margin-left: 2px;        margin-right: 1px;        margin-top: 3px;        font-size: 8px;    }    .btn[name="zmianabutton"] {        height: 25px;        width: 25px !important;        padding-top: 0px;        border-top: 0px;        margin-left: 5px;        margin-top: 3px;    }    .btn[name="zmianabuttona"], .btn[name="download-csv"] {        height: 25px;        width: 30px !important;        padding-top: 0px;        border-top: 0px;        margin-left: 7px !important;        margin-top: 3px;    }    .btn[name="download-csv"] {        height: 25px;        width: 30px !important;        padding-top: 0px;        border-top: 0px;        margin-left: 7px !important;        margin-top: 3px;    }    #tablesearchb {        margin-top: 5px !important;        height: 25px !important;        width: 50px;        padding-top: 0px;    }    #tablesearch {        margin-top: 5px !important;        height: 25px !important;        width: 100px !important;        max-width: 100px !important;    }    .table[name='elementy'] td {        max-width: 30px;    }    /*PIERWSZA KOLUMNA - SZEROKOŚĆ NA SZTYWNO*/    .table[name='elementy'] thead tr th:first-child,    .table[name='elementy'] tbody tr td:first-child {        width: 130px;        min-width: 130px;        max-width: 130px;        word-break: break-all;    }    /*PIERWSZA KOLUMNA - SZEROKOŚĆ NA SZTYWNO*/    .table[name='elementy3'] thead tr th:first-child,    .table[name='elementy3'] tbody tr td:first-child {        width: 65px;        min-width: 65px;        max-width: 65px;        word-break: break-all;    }    #tabele {        table-layout: fixed;        width: 38vw !important;        margin-right: auto;    }    .container-fluid {        height: 20px;        max-height: 20px;        width: 98vw;        max-width: 98vw;        margin: 0px;        line-height: 0.5;        /* background-color: rgb(242, 242, 242); */        font-size: 10px;        font-weight: bold;        /* z-index: -1; */    }    .navbar-toggler-icon {        width: 20px;        height: 20px;    }    .navbar-toggler {        width: 22px;        height: 20px;        padding: 0px;        border: 1px solid #666565 !important;    }    /* NAV-BAR-A , NA SAMEJ GÓRZE */    .nav-tabs {        height: 50px;    }    /* PRZYCISKI NAV-BAR-A , NA SAMEJ GÓRZE */    .nav-link {        height: 50px;        line-height: 2.4 !important;        font-size: 12px !important;        font-weight: bold !important;    }}/* USTAWIENIA WYŚWIETLANIA NA TABLECIE TABLET*/@media screen and (max-width: 800px) and (min-width: 730px)  and (orientation: portrait) {    #menu_ustawienia {        width: 100vw;        margin: auto;    }    #row2 {        width: 100vw;    !important;    }    .content {        max-width: 100vw;        margin: auto;    }    .btn[pressed="true"] {        background-color: #0a58ca!important;    }    #wykresy {        width: 96vw;        height: 600px;        margin-top: 20px;    }    #wykresy2 {        width: 96vw;        height: 600px;        margin-top: 20px;    }    .table {        font-size: 10px;        width: 100vw;    }    .table[name='elementy'] td {        max-width: 30px;    }    .table[name='elementy2'] {        table-layout: fixed;        word-wrap: break-word;        width: 100vw;    }    .table[name='elementy2'] td {        font-size: 10px;    }    table[name='elementy2'] th, table[name='elementy2'] td {        overflow: hidden;    }    #tabele {        table-layout: fixed;        width: 38vw !important;        margin-right: auto;    }    #navbarToggleExternalContent {        width: 100vw;        margin: auto;    }    #DivPrzyciskiAwariaMaszyny {        z-index: 2;        position: sticky;        top: 40px;        width: 100vw;        margin: auto;    }    #DivPrzyciskiMaszyny {        width: 100vw;        margin: auto;        position: sticky;        top: 40px;        z-index: 2;    }    #maszyny {        position: sticky;        top: 25px;        /*margin-top: 0px;*/        height: 50px;        margin-bottom: 3px;        background-color: #ffffff !important;        width: 100vw;    }    .btn-light {        background-color: white;        height: 26px !important;        padding: 1px;    }    .navbar {        position: sticky;        display: flex;        align-items: center;        justify-content: space-between;        margin: auto;        width: 100vw;        background-color: white;        height: 48px;    }    /*NAVBAR NA KTÓRYM JEST FLAGA*/    #navbar2 {        z-index: 1300;        height: 40px !important;        padding-top: 0px !important;        margin-top: 0px !important;    }    #navbar3 {        z-index: 1200;        top: 40px !important;        background-color: white;        height: 42px !important;    }    #navbar5 {        z-index: 1200;        top: 40px !important;        background-color: white;        height: 42px !important;    }    #navbar4 {        z-index: 1200;        top: 30px !important;        background-color: white;        height: 32px !important;    }    .nav-tabs {        height: 40px;    }    /* PRZYCISKI NAV-BAR-A , NA SAMEJ GÓRZE */    .nav-link {        height: 38px;        line-height: 1.5 !important;        font-size: 12px !important;        font-weight: bold !important;        /*line-height: 2.4!important;*/        /*font-size: 12px!important;*/        /*font-weight: bold!important;*/    }    .dropdown-menu {        left: -22px !important;        /*top: -20px!important;*/        margin-top: 0px !important;        padding-top: 0px !important;        z-index: 1300;    }    .navbar-toggler-icon {        width: 20px;        height: 20px;    }    .navbar-toggler {        width: 22px;        height: 20px;        padding: 0px;        border: 1px solid #666565 !important;    }    NAV-BAR-A, NA SAMEJ GÓRZE    .nav-tabs {        height: 40px;    }    .bg-light {        /* max-height: 35px; */        width: 100vw;        margin: auto;        /* z-index: -1; */        /* background-color: #ffffff!important; */    }    .btn {        height: 40px;        font-size: 14px !important;        font-weight: bold !important;        line-height: 2.0 !important;    }    .btn[name="skalabutton"], .btn[name="zmianabutton"] {        height: 25px;        padding-top: 0px;        border-top: 0px;        margin-left: 5px;        margin-top: 3px;    }    .container-fluid {        height: 20px;        max-height: 20px;        width: 98vw;        max-width: 98vw;        margin: 0px;        line-height: 0.5;        font-size: 10px;        font-weight: bold;    }}/* USTAWIENIA WYŚWIETLANIA NA TABLECIE*/@media screen and (max-width: 1349px) and (min-width: 601px) and (orientation: landscape) {    /*NAVBAR NA SAMEJ GÓRZE*/    #navbar2 {        z-index: 1300;        height: 46px !important;        width: 100vw;        background-color: white;        /*height: 30px;*/    }    /*SUBMENU*/    #navbar3 {        width: 100vw;        z-index: 1200;        top: 46px !important;        background-color: white;        height: 42px !important;    }    /*LISTA MASZYN*/    #navbar5 {        width: 100vw;        z-index: 1200;        top: 46px !important;        background-color: white;        height: 42px !important;    }    #navbar4 {        width: 100vw;        z-index: 1200;        top: 36px !important;        background-color: white;        height: 32px !important;    }    #menu_ustawienia {        width: 100vw;        margin: auto;    }    #DivPrzyciskiAwariaMaszyny {        z-index: 1000;        position: sticky;        top: 45px;    }    #wykresy {        width: 100vw;        height: 600px;        margin-top: 20px;    }    #wykresy2 {        width: 96vw;        height: 600px;        margin-top: 20px;    }    .table {        font-size: 10px;        width: 98vw;    }    #maszyny {        position: sticky;        top: 35px;        margin-top: 0px;        height: 50px;        margin-bottom: 3px;        background-color: #ffffff !important;        width: 100%;        /* z-index:10; */    }    .btn {        height: 40px;        font-size: 14px !important;        font-weight: bold !important;        line-height: 2.0 !important;    }    .btn[name="skalabutton"], .btn[name="zmianabutton"] {        height: 25px;        padding-top: 0px;        border-top: 0px;        margin-left: 5px;        margin-top: 3px;    }    .table[name='elementy'] td {        max-width: 30px;    }    .table[name='elementy2'] {        table-layout: fixed;        word-wrap: break-word;    }    .table[name='elementy2'] td {        font-size: 10px;    }    table[name='elementy2'] {        table-layout: fixed;        word-wrap: break-word;        width: 100vw;    }    table[name='elementy2'] th, table[name='elementy2'] td {        overflow: hidden;    }    #tabele {        table-layout: fixed;        width: 38vw !important;        margin-right: auto;    }    .container-fluid {        height: 20px;        max-height: 20px;        width: 98vw;        max-width: 98vw;        margin: 0px;        line-height: 0.5;        /* background-color: rgb(242, 242, 242); */        font-size: 10px;        font-weight: bold;        /* z-index: -1; */    }    .navbar-toggler-icon {        width: 20px;        height: 20px;    }    .navbar-toggler {        width: 22px;        height: 20px;        padding: 0px;        border: 1px solid #666565 !important;    }    /* NAV-BAR-A , NA SAMEJ GÓRZE */    .nav-tabs {        height: 50px;    }    /* PRZYCISKI NAV-BAR-A , NA SAMEJ GÓRZE */    .nav-link {        height: 50px;        line-height: 2.4 !important;        font-size: 12px !important;        font-weight: bold !important;    }}/* USTAWIENIA WYŚWIETLANIA NA PC */@media screen and (min-width: 1350px) {    #rangedatepicker2    {        display:inline;        font-size: 14px!important;        width: 130px!important;        min-width: 130px!important;        height: 35px;        line-height: 1.5!important;        background-color: white;        color: #0a53be;        border-color: #0a53be;    }    #wczytaneprzyciski    {    height: 42px!important;    }    #button_left,#button_right    {        width: 25px!important;        max-width: 25px!important;        height: 40px!important;        margin-top: 0px!important;        padding: 0px;    }    #tablesearchb {        margin-top: 5px !important;        height: 25px !important;        width: 70px;        padding-top: 0px;    }    #tablesearch {        margin-top: 5px !important;        height: 25px !important;        width: 300px;    }    /*KARTY PARAMETRÓW*/    .card {        max-width: 120px;        text-align: center;    }    .card-body {        background-color: white;    }    .card-header {        padding-top: 4px;        padding-bottom: 4px;    }    .card-title {        font-size: 14px;    }    #row2 {        width: 800px;        margin: auto;        margin-bottom: 3px;    }    .content {        max-width: 800px !important;        margin: auto;    }    #wykresy {        width: 800px;        height: 500px;        margin: auto;    }    #wykresy2 {        width: 800px;        height: 500px;        margin: auto;        margin-top: 25px;    }    .table {        font-size: 10px;        width: 800px;        margin: auto;    }    .table[name='elementy'] td, .table[name='elementy3'] td {        font-size: 12px;        min-width: 110px;        height: 6px;    }    .table[name='elementy2'] {        table-layout: fixed;        word-wrap: break-word;        width: 800px;    }    .table[name='elementy2'] td {        font-size: 10px;    }    #navbarToggleExternalContent {        width: 800px;        margin: auto;    }    #DivPrzyciskiAwariaMaszyny {        width: 800px;        margin: auto;        position: sticky;        top: 40px;        z-index: 2;    }    #DivPrzyciskiMaszyny {        /*width:800px;*/        margin: auto;        position: sticky;        top: 40px;        z-index: 2;    }    .btn-group[id="maszyny1"] {        width: 650px !important;    }    #maszyny    {        position: sticky;        height: 35px;        background-color: #ffffff !important;        width: 800px;        margin: auto;    }    .btn-light {        background-color: white;        height: 26px !important;        padding: 1px;    }    .navbar {        position: sticky;        display: flex;        align-items: center;        justify-content: space-between;        margin: auto;        width: 800px;        background-color: white;        height: 38px;        margin-top: 0px;        margin-bottom: 0px;        line-height: 0;        padding: 0px;    }    /*NAVBAR NA SAMEJ GÓRZE*/    #navbar2 {        z-index: 1300;        height: 40px !important;        width: 800px;        /*height: 30px;*/    }    /*LISTA MASZYN*/    #navbar5 {        width: 800px;        z-index: 1200;        top: 40px !important;        background-color: white;        height: 42px !important;        margin-bottom: 1px;    }    /*LISTA MASZYN WIECEJ NIZ 4 PRZYCISKI*/    #navbar6 {        width: 800px;        z-index: 1200;        /*top: 18px !important;*/        background-color: white;        height: 62px !important;        margin-bottom: 1px;    }    /*SUBMENU*/    #navbar3 {        width: 800px;        z-index: 1200;        top: 50px !important;        background-color: white;        height: 42px !important;        margin-bottom: 3px;    }    /*SUBMENU*/    #navbar4 {        margin-bottom: 12px;        width: 800px;        z-index: 1200;        top: 86px !important;        background-color: white;        height: 32px !important;    }    .nav-link {        height: 44px !important;    }    .dropdown-menu {        z-index: 1300;        left: -22px !important;    }    .btn {        height: 40px;        font-size: 14px !important;        font-weight: bold !important;        line-height: 1.8 !important;    }    .btn[name="skalabutton"], .btn[name="zmianabutton"], .btn[name="zmianabuttona"], .btn[name="download-csv"] {        height: 25px;        margin-left: 5px;        margin-top: 3px;        padding-top: 0px;        border-top: 0px;    }    /* NAGŁÓWEK WYSWIETLANYCH TABEL */    .container {        height: 20px;        max-height: 20px;        width: 800px;        max-width: 500px;        line-height: 0.5;        /* background-color: rgb(242, 242, 242); */        font-size: 10px;        font-weight: bold;        /* z-index: -1; */        margin: auto;    }    .container-fluid {        margin-top: 0px;        margin-bottom: 6px;        padding-top: 0px;        width: 800px;    }    .navbar-toggler-icon {        width: 20px;        height: 20px;        z-index: 2;    }    .navbar-toggler {        width: 22px;        height: 20px;        padding: 0px;        line-height: 0px;        border: 1px solid #666565 !important;        z-index: 2;    }    .bg-light {        width: 800px;        margin: auto;        margin-top: 3px !important;    }    /* NAV-BAR-A , NA SAMEJ GÓRZE */    .nav-tabs {        height: 50px;    }    /* PRZYCISKI NAV-BAR-A , NA SAMEJ GÓRZE */    .nav-link {        height: 50px;        line-height: 2.4 !important;        font-size: 12px !important;        font-weight: bold !important;    }    #menu_ustawienia {        width: 800px;        margin: auto;    }    #przyciski {        position: sticky;        top: 18px;    }    #logo {        width: 800px;        margin: auto;    }}/* .btn-primary, .btn-primary:active, .btn-primary:visited {  border-color: white !important;}.btn-primary:hover {  border-radius: 10px;  -o-transition: all .4s ease-in-out;  -webkit-transition: all .4s ease-in-out;  transition: all .4s ease-in-out;} */