@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');

/* main settings */

html {
    font-family: 'Poppins', sans-serif;
    height: 100%;
}

body {
    overflow-y: hidden;
    height: 100%;
}

img {
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
}

/* specific settings */

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}

/* navbar */

.header {
    display: flex;
    position: relative;
    align-items: center;
}

.top_logo {
    padding: .8rem;
    display: flex;
    align-items: center;
    width: 30%;
    margin-right: auto;
}

.main_logo {
    width: 3rem;
}

.main_title {
    color: #3c3c3c;
    font-weight: 400;
    margin-left: 1rem;
}

.nav_other {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    margin-right: 1rem;
}

.notifications_btn {
    height: 40px;
    margin-left: .5rem;
    padding: .45rem;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    transition: background .1s;
}

.notifications_btn:hover {
    background: #e1e1e1;
    cursor: pointer;
}

.notifications_div {
    position: relative;
}

#notifications_dot {
    display: none;
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 100%;
}

.notifications_main_div {
    display: flex;
    margin-top: 1.5rem;
    height: calc(100% - 68px);
    flex-flow: column nowrap;
    overflow-y: auto;
}

.notifications_main_div hr {
    margin-top: .9rem;
    width: 100%;
    border-bottom: 1px solid #555;
}

.notifications_nav_bar {
    margin: 0 auto;
    width: max-content;
    height: 44px;
    border: 2px solid white;
    border-radius: .5rem;
    padding-block: .5rem;
}

.notifications_nav_bar span {
    color: white;
    padding: .52rem .5rem .55rem;
    border-radius: .37rem;
    user-select: none;
    transition: background .05s ease-in-out;
}

.notifications_nav_bar span:hover {
    background: #555;
    cursor: pointer;
}

.notifications_nav_bar .notifications_active {
    background: white;
    color: black;
    font-weight: 500;
}

.notifications_nav_bar .notifications_active:hover {
    background: white;
    color: black;
}

.notifications_span {
    display: block;
    margin-top: .5rem;
    color: white;
    word-wrap: break-word;
}

.notifications_span:first-child {
    margin-top: auto;
}

.notifications_span:last-of-type {
    font-size: 1.1rem;
}

.notifications_span_link:hover {
    cursor: pointer;
    text-decoration: underline;
}

.suggested_main_div {
    margin-top: 3rem;
    height: calc(100% - 44px - 7.6rem);
    overflow-y: auto;
}

.suggested_main_div table {
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0;
    color: white;
}

.suggested_main_div table th {
    border-top: 2px solid white;
}

.suggested_main_div table th, .suggested_main_div table td {
    position: relative;
    padding: .6rem;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
}

.suggested_main_div table th:first-child, .suggested_main_div table td:first-child {
    border-left: 2px solid white;
}

.suggested_main_div table thead th {
    position: sticky;
    top: 0;
    background: white;
    color: black;
    z-index: 1;
}

.suggested_link:hover {
    text-decoration: underline;
    cursor: pointer;
}

.suggested_clear {
    position: fixed;
    bottom: 1.5rem;
    left: calc(50% - 6.3rem);
    padding: .8rem 3.5rem;
    width: max-content;
    background: white;
    color: black;
    font-weight: 600;
    border-radius: .5rem;
    transition: .15s ease-in;
    user-select: none;
}

.suggested_clear:hover {
    background: #c03;
    color: white;
    cursor: pointer;
}

.show_all_btn {
    height: 40px;
    margin-left: .5rem;
    padding: .45rem;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    transition: background .1s;
}

.show_all_btn:hover {
    background: #e1e1e1;
    cursor: pointer;
}

.add_btn {
    height: 40px;
    margin-left: .5rem;
    padding: .2rem;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    transition: background .1s;
}

.add_btn:hover {
    background: #e1e1e1;
    cursor: pointer;
}

.search_bar {
    display: flex;
}

#search {
    margin-left: .5rem;
    background: white;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    font-weight: 500;
    padding: .3rem .6rem;
    height: 40px;
    transition: background .1s;
    width: 15rem;
}

#search:hover {
    background: #e1e1e1;
}

#search:focus {
    background: white;
}

.search_alt-btn, #search_alt-div {
    display: none;
}

.search_alt-btn {
    height: 40px;
    margin-left: .5rem;
    padding: .5rem;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    transition: background .1s;
}

.search_alt-btn:hover {
    background: #e1e1e1;
}

#search_alt-div {
    position: absolute;
    display: grid;
    grid-template-columns: 3rem auto;
    top: 0;
    left: -100%;
    width: 100%;
    background: white;
    transition: left .25s ease-in-out;
    z-index: 100;
}

.search_alt-back_btn {
    margin-top: .4rem;
    display: inline-block;
    background: white;
    color: black;
    height: 40px;
    width: 40px;
    margin-left: .5rem;
    padding: .2rem;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    transition: background .1s;
}

.search_alt-back_btn:hover {
    background: #e1e1e1;
}

#search_alt-input {
    margin: .4rem;
    background: white;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    font-weight: 500;
    padding: .3rem .6rem;
    height: 40px;
    transition: background .1s;
}

#search_alt-input:hover {
    background: #e1e1e1;
}

#search_alt-div div {
    grid-column: 1 / span 2;
    padding-top: .12rem;
    margin: 0 auto;
    user-select: none;
}

#search_alt-div label {
    padding: .1rem .6rem 0;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
}

#search_alt-div label span {
    margin-left: .5rem;
    font-size: .9rem;
    vertical-align: top;
}

#search_alt-all_checkbox {
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.sort_btn {
    /* WYLACZONE */
    display: none;
    height: 40px;
    margin-left: .5rem;
    padding: .2rem;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    transition: background .1s;
}

.sort_btn:hover {
    background: #e1e1e1;
}

.sort_btn::after {
    content: ' ';
    width: 2rem;
    height: 4rem;
    border: 1px solid black;
}

#miejsce {
    margin-left: 1rem;
    background: white;
    color: black;
    border: 2px solid #8c8c8c;
    border-radius: .5rem 0 0 .5rem;
    font-weight: 500;
    padding: .3rem;
    height: 40px;
    transition: background .1s;
}

#miejsce:hover {
    background: #e1e1e1;
}

.miejsce_alt-btn {
    margin-left: 1rem;
    background: white;
    color: black;
    height: 40px;
    width: 40px;
    padding: .2rem;
    border: 2px solid #8c8c8c;
    border-radius: .5rem 0 0 .5rem;
    transition: background .1s;
}

.miejsce_alt-btn:hover {
    background: #e1e1e1;
}

.miejsce_alt-btn, #miejsce_alt-div {
    display: none;
}

#miejsce_alt-div {
    position: absolute;
    display: grid;
    grid-template-columns: 3rem auto;
    top: 0;
    left: -100%;
    width: 100%;
    background: white;
    transition: left .25s ease-in-out;
    z-index: 100;
}

.miejsce_alt-back_btn {
    margin-top: 1.2rem;
    display: inline-block;
    background: white;
    color: black;
    height: 40px;
    width: 40px;
    margin-left: .5rem;
    padding: .2rem;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    transition: background .1s;
}

.miejsce_alt-back_btn:hover {
    background: #e1e1e1;
}

#miejsce_alt-select {
    margin: 1.2rem .5rem;
    background: white;
    color: black;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    font-weight: 500;
    padding: .3rem;
    height: 40px;
    transition: background .1s;
}

#miejsce_alt-select:hover {
    background: #e1e1e1;
}

.odswiez {
    height: 40px;
    border: 2px solid #8c8c8c;
    border-left: 0px;
    padding: .45rem;
    border-radius: 0 .5rem .5rem 0;
    transition: background .1s;
}

.odswiez:hover {
    background: #e1e1e1;
    cursor: pointer;
}

.nav_logout {
    height: 40px;
    margin-right: 1rem;
    padding: .4rem;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    transition: background .1s;
}

.nav_logout:hover {
    background: #e1e1e1;
    cursor: pointer;
}

/* loading */

#loading {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 999;
    background-color: white;
}

/* table */

#content {
    height: calc(100% - 6rem);
    overflow-y: auto;
    margin-top: .3rem;
}

.tabela_lista {
    width: calc(100% - 2rem);
    border-collapse: separate;
    border-spacing: 0;
    text-align: center;
    margin: 0 1rem;
    font-size: min(calc(1.8vw - 4px), 1rem);
}

.tabela_lista th {
    border-top: 2px solid #8c8c8c;
}

.tabela_lista th, .tabela_lista td {
    border-bottom: 2px solid #8c8c8c;
    border-right: 2px solid #8c8c8c;
    position: relative;
    padding-left: .5rem;
    padding-right: .5rem;
}

.tabela_lista th:first-child, .tabela_lista td:first-child {
    border-left: 2px solid #8c8c8c;
}
.tabela_lista th:first-of-type {
    border-left: 0;
    border-top: 0;
}

.tabela_lista thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: white;
}

.tabela_lista input[type="button"] {
    position: absolute;
    inset: 0;
    border: none;
    width: 100%;
    background: #a7a7a7;
    color: white;
    transition: background .15s;
}

.tabela_lista input[type="button"]:hover {
    background: #5c5c5c;
}

.tabela_lista .list_padd_0 {
    padding: 0;
}

/* img popup */

#entire_screen {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 999;
    opacity: 0;
    display: none;
    transition: opacity .15s linear;
    width: 100vw;
    height: 100vh;
}

.img_main, .close_img {
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
}

.img_main {
    position: relative;
    background-position: center;
    width: calc(100vw - 3rem);
    height: calc(100vh - 3rem);
    margin: 1.5rem;
}

.close_img {
    background-image: url(../pics/close_btn.png);
    position: absolute;
    top: 0;
    right: 0;
    width: 2rem;
    height: 2rem;
}

.close_img:hover {
    cursor: pointer;
}

/* ilosc div */

.ilosc_div {
    display: none;
    position: absolute;
    z-index: 80;
    top: 100%;
    right: 0;
    background: white;
    width: max-content;
    border: 2px solid #5c5c5c;
    border-radius: .5rem 0 .5rem .5rem;
    padding: .3rem .8rem;
    color: black;
}

.ilosc_div span {
    display: block;
}

.mobile_ilosc_div {
    position: relative;
    text-align: right;
    margin-top: .2rem;
}

.mobile_ilosc_div .ilosc_btn {
    border: none;
    width: 2.8rem;
    height: 1.6rem;
    background: #a7a7a7;
    color: white;
    transition: background .15s;
}

.mobile_ilosc_div .ilosc_div {
    top: 1.6rem;
}

/* select popup */

#popup {
    position: fixed;
    width: 20rem;
    height: 9rem;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 1rem auto;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    border-radius: .5rem;
    transition: transform .2s ease-in-out;
    z-index: 999;
    padding: .6rem .8rem;
    font-size: 1.1rem;
    font-weight: 600;
    transform: translateY(120%);
    text-align: center;
}

#popup div:first-of-type {
    margin-top: 1rem;
}

#popup div {
    cursor: pointer;
    text-align: left;
    margin-left: 1.3rem;
}

#popup div:hover {
    color: #afafaf;
}

#popup div:hover .popup-icon {
    filter:invert(.6);
}

.popup-span {
    font-size: .9rem;
    font-weight: 400;
    user-select: none;
}

.popup-icon {
    display: inline-block;
    width: 1.3rem;
    filter:invert();
    vertical-align: middle;
    margin-right: .3rem;
    user-select: none;
}

/* form actions */

.item_form {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;
    width: max-content;
}

.form_main_title {
    margin-bottom: 1rem;
    text-align: center;
}

#move_miejsce_z, #miejsce_docelowe, #ilosc_produktow, #move_ilosc_produktow, #count_ilosc_produktow, #add_miejsce_docelowe, #move_miejsce_docelowe, #add_marka, #add_ilosc_produktow, .add_new_item_form input[type='text'], .edit_item_form input[type='text'], #edit_marka, #request_ilosc_produktow, #request_opis, #add_existing_miejsce_docelowe, #add_existing_ilosc_produktow {
    margin-left: .5rem;
    background: none;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    font-weight: 500;
    padding: .3rem;
    height: 40px;
    transition: background .15s;
    margin-bottom: .7rem;
    color: white;
}

#move_miejsce_z:hover, #miejsce_docelowe:hover, #move_miejsce_docelowe:hover, #ilosc_produktow:hover, #move_ilosc_produktow:hover, #count_ilosc_produktow:hover, .move_item_form input[type='button']:hover, #add_miejsce_docelowe:hover, #add_marka:hover, #add_ilosc_produktow:hover, .add_new_item_form input[type='text']:hover, .add_new_item_form input[type='button']:hover, .edit_item_form input[type='text']:hover, .edit_item_form input[type='button']:hover, #edit_marka:hover, .count_item_form input[type='button']:hover, #request_ilosc_produktow:hover, #request_opis:hover, .request_item_form input[type='button']:hover, #add_existing_miejsce_docelowe:hover, #add_existing_ilosc_produktow:hover, .add_existing_item_form input[type='button']:hover {
    background: #555555;
}

#ilosc_produktow:focus, #add_ilosc_produktow:focus, #move_ilosc_produktow:focus, #count_ilosc_produktow:focus, .add_new_item_form input[type='text']:focus, .edit_item_form input[type='text']:focus, #request_ilosc_produktow:focus, #request_opis:focus, #add_existing_ilosc_produktow:focus {
    background: none;
}

#ilosc_produktow, #move_ilosc_produktow, #count_ilosc_produktow, #request_ilosc_produktow, #add_existing_ilosc_produktow {
    width: 5.5rem;
}

.count_item_form .count_aktualna_ilosc {
    margin-left: .5rem;
    height: 2.2rem;
    font-weight: bold;
    text-align: left;
}

.add_new_item_form input[type='button'] {
    margin-left: 10.5rem;
    height: 40px;
    padding: 0 .6rem;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    transition: background .15s;
    font-weight: 700;
    background: none;
    color: white;
}

.add_existing_item_form input[type='button'] {
    margin-left: 10.5rem;
    height: 40px;
    padding: 0 .6rem;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    transition: background .15s;
    font-weight: 700;
    background: none;
    color: white;
}

.move_item_form input[type='button'] {
    margin-left: calc(50% - 4.5rem);
    height: 40px;
    padding: 0 .6rem;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    transition: background .15s;
    font-weight: 700;
    background: none;
    color: white;
}

.edit_item_form input[type='button'] {
    margin-left: 10.5rem;
    height: 40px;
    padding: 0 .6rem;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    transition: background .15s;
    font-weight: 700;
    background: none;
    color: white;
}

.count_item_form input[type='button'] {
    margin-left: 10.5rem;
    height: 40px;
    padding: 0 .6rem;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    transition: background .15s;
    font-weight: 700;
    background: none;
    color: white;
}

.request_item_form input[type='button'] {
    height: 40px;
    padding: 0 .6rem;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    transition: background .15s;
    font-weight: 700;
    background: none;
    color: white;
}

.minus_one_item_form {
    text-align: center;
    width: 100%;
}

.request_item_form {
    width: 100%;
    text-align: center;
}

.minus_one_item_form input {
    margin: 0 .3rem;
    height: 40px;
    padding: 0 .6rem;
    border: 2px solid #8c8c8c;
    border-radius: .5rem;
    transition: background .15s;
    font-weight: 700;
    background: none;
    color: white;
}

.minus_one_item_form input:hover {
    background: #555555;
}

.minus_one_item_form input:last-of-type {
    font-weight: 300;
}

.add_new_item_form span {
    display: inline-block;
    width: 10rem;
    text-align: right;
    vertical-align: middle;
}

.add_existing_item_form span {
    display: inline-block;
    width: 10rem;
    text-align: right;
}

.move_item_form span {
    display: inline-block;
    width: calc(50% - 5rem);
    text-align: right;
}

.edit_item_form span {
    display: inline-block;
    width: 10rem;
    text-align: right;
    vertical-align: middle;
}

.count_item_form span {
    display: inline-block;
    width: 10rem;
    text-align: right;
}

#add_ilosc_produktow {
    width: 4.1rem;
}

#add_cena_kat, #add_cena_zakup, #add_cena_klient, #edit_cena_kat, #edit_cena_zakup, #edit_cena_klient {
    width: 5rem;
}

.add_new_item_form .checkbox_span {
    width: max-content;
    margin: 1.2rem .3rem .8rem .8rem;
}

.add_new_item_form b {
    color: red;
}

#request_opis {
    height: auto;
    width: 100%;
    margin: 1rem 0;
}

.info{
    color: green;
    font-weight: 400;
    margin-top: 1rem;
}

.info_wrong {
    color: red;
    font-weight: 600;
    margin-top: 1rem;
}

/* id > 3 mobile */

.mobile_flex_lista {
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
    margin: 0 .5rem;
}

.mobile_flex_grid {
    display: grid;
    grid-template-columns: .5rem 2.1rem auto auto;
    grid-template-rows: auto 1fr;
    border-bottom: 2px solid #8c8c8c;
    row-gap: 0;
}

.mobile_grid_checkbox_div {
    position: relative;
    grid-row: 1 / span 2;
}

.mobile_grid_checkbox_div label {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.mobile_grid_checkbox {
    position: absolute;
    top: calc(50% - .55rem);
    margin: 0 .5rem;
    width: 1.1rem;
    height: 1.1rem
}

.mobile_grid_marka {
    grid-row: 1 / span 2;
    width: .5rem;
}

.mobile_grid_nazwa {
    font-size: 1.05rem;
    font-weight: 500;
    margin-top: .2rem;
}

.mobile_grid_nr_kat {
    font-size: .8rem;
}

.mobile_grid_ilosc {
    margin-top: .2rem;
    text-align: right;
    font-size: 1.1rem;
}

.mobile_grid_cena_klient {
    text-align: right;
    font-size: .9rem;
}

#mobile_nav_bar {
    position: sticky;
    top: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    background: white;
    text-align: center;
    transition: height .2s ease-in-out, opacity .2s ease-in-out;
    z-index: 10;
}

.mobile_popup_div {
    display: inline-block;
    width: calc(100% - .8rem);
    padding: .8rem .7rem;
    background: #979797;
    margin-bottom: .2rem;
}

.mobile_popup_div:active {
    background: #5c5c5c;
}

.mobile_popup_icon {
    display: inline-block;
    width: 1.3rem;
    padding: .12rem;
    filter: invert();
    vertical-align: middle;
    margin-right: .3rem;
    user-select: none;
}

.mobile_popup_span {
    color: white;
    font-size: .9rem;
    font-weight: 400;
    user-select: none;
}


/* animations */

.loading-anim {
    animation: loading .4s ease-out forwards;
}

/* media queries */

@media only screen and (max-width: 860px) {
    #search {
        width: calc(102vw - 40rem);
    }
}

@media only screen and (max-width: 725px) {
    .search_alt-btn {
        display: block;
        width: 40px;
    }

    #search {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    .main_title {
        display: none;
    }

    .top_logo {
        width: auto;
    }
}

@media only screen and (max-width: 450px) {
    .miejsce_alt-btn {
        display: block;
    }

    #miejsce {
        display: none;
    }

    #search_alt-input {
        width: calc(100% - 1rem);
    }

    #content {
        margin-top: .3rem;
    }
}

/* keyframes */

@keyframes loading {
    0% {
        opacity: 1;
    }
    99% {
        opacity: 0;
        height: 100vh;
    }   
    100% {
        opacity: 0;
        height: 0;
    }
}