:root {
    --red: #F24052;
    --light-red: #f9c3c8;
    --blue: #235196;
    --light-blue: #A2D8F5;
    --green: #008000;
    --light-green: #A5F5A2;
    --dark-grey: #4C4C4C;
    --grey: #7D7D7D;
    --light-grey: #A6A6A6;
    --not-white: #D0D0D0;
    --yellow: #FDC000;
}

@media print
{
    .no-print, .no-print * {
        display: none !important;
    }

    .print-full {
        width: 100%;
        max-width: 100%;
        padding: auto;
        margin: auto;
    }
}

@font-face {
    font-family: Rubik_Regular;
    font-style: normal;
    src: url(webfonts/rubik-regular.ttf);
}

@font-face {
    font-family: Rubik_Bold;
    font-style: normal;
    src: url(webfonts/rubik-bold.woff);
}

@font-face {
    font-family: Rubik_Extra_Bold;
    src: url(webfonts/rubik-extra-bold.woff);
}

@font-face {
    font-family: Montserrat_Regular;
    font-style: normal;
    src: url(webfonts/montserrat-regular.otf);
}

@font-face {
    font-family: Montserrat_Bold;
    font-style: normal;
    src: url(webfonts/montserrat-bold.otf);
}

html, body {
    background-color: white;
    color: var(--grey);
    /* font-family: 'Montserrat', Helvetica, Arial, sans-serif; */
    font-family: Rubik_Regular, Helvetica, Arial, sans-serif;
    font-size: 12pt;
    /*font-weight: 200;*/
    height: 100vh;
    margin: 0;
}

.app {
    min-height: 80%;
}

b {
    font-weight: bold;
}

i {
    font-style: italic;
}

.font-responsive{
    font-size: calc(10% + 1vw + 1vh);
}

.font-responsive-medium {
    font-size: calc(10% + 0.75vw + 0.75vh);
}

.font-responsive-small{
    font-size: calc(10% + 1vw);
}

.nobr {
    white-space: nowrap;
}

.row-link { cursor: pointer; color: var(--blue); }

.row-link:hover { cursor: pointer; color: var(--blue) !important; }

.overlaping-link {
    cursor: pointer;
    color: var(--blue) !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

h1, h2, h3, h4 {
    font-family: Rubik_Extra_Bold, Helvetica, Arial, sans-serif;
    text-align: center;
    color: black;
    text-transform: uppercase;
}

h1 {
    font-size: 20pt;
}

h2 {
    font-size: 18pt;
}

h3 {
    font-size: 12pt;
}

h4 {
    font-size: 12pt;
    text-align: start;
}


/* Tables*/
.small-cell {
    font-size: smaller !important;
}

.nowrap {
    white-space: nowrap;
}

.expand {
    width: 99%;
}

.small-table {
    font-size: small;
    word-wrap: break-word;
    color: black;
    padding-top: 5pt;
    padding-bottom: 5pt;
}

.cell-border-top {
    border-top: 1pt solid black;
}

.cell-border-bottom {
    border-bottom: 1pt solid black;
}

/* Bootstrap */
.form-check {
    display: flex;
}

.form-check-label {
    margin-bottom: 0px;
}

.btn {
    color: white !important;
}

.navbar-brand {
    color: var(--dark-grey);
    font-size: 12pt;
}

.nav-link {
    color: var(--dark-grey);
}

/* Laravel */
.page-link {
    color: var(--dark-grey) !important;
    border-color: var(--not-white) !important;
}

.active > .page-link {
    color: var(--red) !important;
    background-color: white !important;
}

/* General */
.error {
    color: var(--red) !important;
    font-weight: bold;
    margin: 5pt;
}

.warning {
    color: gold !important;
    font-weight: bold;
    margin: 5pt;
}

.result {
    color: var(--green) !important;
    font-weight: bold;
    margin: 5pt;
}

.small-form {
    display: inline;
}

.extra-small-text {
    font-size: xx-small !important;
}

.small-text {
    font-size: smaller !important;
}

.big-text {
    font-size: larger !important;
}

.form-check:has(.small-checkbox) {
    margin-bottom: 0px !important;
}

div.small-checkbox {
    margin-bottom: 0px !important;
}

input.small-checkbox {
    width: 1em !important;
    height: 1em !important;
    margin-bottom: 0px !important;
}

.comment {
    font-style: italic;
}

.small-comment {
    font-size: smaller !important;
    font-style: italic;
}

.small-icon {
    max-width: 48pt;
}

.big-icon {
    max-width: 256pt;
}

.five_chars {
    width: 5ch;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
}

.red-background {
    background-color: var(--red);
}

.button-blue, .button-red, .button-dark-grey, .button-light-grey, .button-yellow {
    border-radius: 5pt;
    font-weight: 200;
    font-family: Rubik_Extra_Bold, Helvetica, Arial, sans-serif;
    font-size: 12pt;
    text-transform: uppercase;
    border: none;
}

.button-wide {
    padding-left: 25pt;
    padding-right: 25pt;
}

.button-blue {
    background-color: var(--blue);
}

.button-red {
    background-color: var(--red);
}

.button-dark-grey {
    background-color: var(--grey);
}

.button-light-grey {
    background-color: var(--light-grey);
}

.button-yellow {
    background-color: var(--yellow);
}

.btn-sm {
    font-family: Rubik_Bold, Helvetica, Arial, sans-serif;
    font-size: 10pt;
}

.image-button {
    border-radius: 5pt;
    border: solid 1pt black;
    background: none;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.fullscreen-image {
    width: 100%;
    height: 80%;
    object-fit: contain;
}

.small-inline-button {
    width: 1.8rem;
    height: 1.8rem;
}

.separator-left {
    border-left: solid 1pt var(--not-white);
}

.separator-right {
    border-right: solid 1pt var(--not-white);
}

.separator-top {
    border-top: solid 1pt var(--not-white);
}

/* INPUTY */

select {
    font-family: Montserrat_Regular, Helvetica, Arial, sans-serif;
    color: var(--dark-grey) !important;
}

/* Ukrycie mini przycisków dla number inputu*/
input[type='number'] {
    -moz-appearance:textfield;
}

input {
    border-radius: 5pt !important;
    border-color: var(--not-white);
    border-style: solid;
    border-width: 1pt;
    color: var(--dark-grey) !important;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.input-small {
    border-radius: 5pt;
    text-align: center;
}

input[type="checkbox"] {
    width: 1.5em;
    height: 1.5em;
    border-radius: 0.25em !important;
    flex-shrink: 0;
}

input[type="checkbox"]:checked {
    background-color: var(--grey);
    border-style: none;
}

input[type="checkbox"] + label, input[type="radio"] + label {
    margin-top: auto;
    margin-left: 0.5em;
}

input[type="radio"] {
    border-radius: 50% !important;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

input[type="radio"]:checked {
    background-color: var(--grey);
    border-style: none;
}

textarea {
    border-radius: 5pt !important;
    color: var(--dark-grey) !important;
}

form > div > label {
    text-align: right;
}

/* Paginacja */

.pagination {
    justify-content: end;
}

.table-paginator {
    float: right;
    border-radius: 25pt;
}

/* Main */

.page-header {
    text-align: center;
    text-transform: uppercase;
    /*font-weight: 900;*/
    font-family: Rubik_Extra_Bold, Helvetica, Arial, sans-serif;
    font-size: 18pt;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;

    color: black;
}

.content-border, .small-border {
    border: solid 1pt var(--not-white);
    border-radius: 5pt;
}

.content-border {
    border: solid 1pt var(--not-white);
    border-radius: 5pt;

    padding-top: 20pt;
    padding-bottom: 20pt;
}

.hr-full {
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
}

.disease-name {
    text-transform: uppercase;
}

.main-img {
    -webkit-filter: drop-shadow(2px 2px 0 black)
                    drop-shadow(-2px -2px 0 black);
    filter: drop-shadow(2px 2px 0 0 black)
            drop-shadow(-2px -2px 0 0 black);
}

.main-text, .sec-text {
    font-family: Rubik_Extra_Bold, Helvetica, Arial, sans-serif;
    font-size: 18pt;
    color: white;
    text-transform: uppercase;
}

.sec-text {
    font-family: Rubik_Bold, Helvetica, Arial, sans-serif;
}

.header-3-way {

}

.tile-3-way {
    /*color: black;*/
    /*background-color: #A2D8F5;*/
    /*border-color: black;*/
    display: flex;
    flex-direction: column;
    height: 100%;
}

.list-tile {
    display: flex;

    border-color: var(--not-white);
    border-style: solid;
    border-width: 1px;
    margin-right: -1px;
    margin-top: -1px;

    color: var(--dark-grey) !important;
    font-weight: 300;
    text-decoration: none;
    text-transform: uppercase;

    cursor: pointer;
}

.list-tile:hover {
    background-color: var(--not-white);
}

.list-tile.active {
    background-color: var(--light-blue);
}

.atributes {
    text-align: center;
}

.atributes > div > img {
    width: 75%;
}

.atributes > div > span {
    /*display: block;*/
    display: none;
    clear: both;
    color: black;
    font-size: 16pt;
    font-family: Rubik_Extra_Bold, Helvetica, Arial, sans-serif;
    margin-top: 1rem;
}

.FAQ-question {
    margin-bottom: 10pt;

    background-color: var(--not-white);
    border-color: var(--light-grey);
    border-style: solid;
    border-width: 1pt;
    border-radius: 5pt;

    cursor: pointer !important;
}

.FAQ-question > h3 {
    font-size: 16pt;
    margin-top: 0.5rem;
}

.FAQ-question:hover {
    background-color: var(--light-grey);
}

.FAQ-answer {
    font-size: 16pt;
    text-align: center;
    margin-bottom: 25pt;
}

.disease-list {
    background-color: var(--blue);
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}

.payment-baner {
    display: inline-block;
    max-width: 10rem;
    height: 3rem;
    font-size: large;
}

.form-header {
    font-family: Rubik_Extra_Bold, Helvetica, Arial, sans-serif;
    font-size: 12pt;
    margin-top: 1rem;
}

.message-header {
    margin-top: 10pt;
    text-decoration: underline;
    color: var(--green);
}

.extra-msg-image {
    width: 100%;
    text-align: center;
}

.lang_flag {
    max-height: 18px;
}

.full-height {
    height: 100vh;
}

.flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
}

.position-ref {
    position: relative;
}

.top-right {
    position: absolute;
    right: 10px;
    top: 18px;
}

.content {
    text-align: center;
}

.title {
    font-size: 84px;
}


.m-b-md {
    margin-bottom: 30px;
}

.nav-item {
    list-style: none;
}

.doctor-button {
    margin: 0px 10px 10px 10px;
    min-width: 100px;
}

.answer-org-options {
    font-size: smaller;
}

.footer-logo {

}

.comment_row {
    text-align: center;
    font-size:small;
    border:none !important;
    margin-top: 0px;
    margin-bottom: .5rem;
    padding:0px;
}

.comment_data {
    border:none !important;
    margin:0px;
    padding-top:0px !important;
    padding-bottom:.3rem;
}

.tight_row {
    padding-bottom:0px;
}

.tight_data {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

.tight_label {
    margin-bottom: 0px !important;
}

.client_icon {
    width: 20px;
    float: right;
}

.disease_icon {
    height: 90%;
}

.tile-drug-name-vert {
    display: flex;
    flex-direction: column;
    height: 15rem;
    flex-grow: 1;
    color: var(--dark-grey) !important;
    font-weight: 300;
    text-decoration: none !important;
    align-items: center;
}

.drug-name-vert {
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.drug-icon-container-vert {
    display: flex;
    width: 80%;
    height: 60%;
    justify-content: center;
    align-items: center;
}

.drug-icon-vert {
    width: 90%;
    height: 90%;
    object-fit: scale-down;
}

.tile-drug-name {
    display: flex;
    height: 10rem;
    flex-grow: 1;
    color: var(--dark-grey) !important;
    font-weight: 300;
    text-decoration: none !important;
}

.drug_icon_container {
    display: flex;
    width: 50%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.drug_icon {
    width: 75%;
    height: 75%;
    object-fit: scale-down;
}

.drug_name {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.drug-blocked {
    color: var(--red) !important;
    text-decoration: underline;
}

.invalid-feedback {
    display: inline-block;
}

.answer-question {
    font-weight: bold;
}

.editor-line{
    margin-bottom: 0.75rem;
}

.question-editor-pane {
    border: 2px solid black;
}

/* Doctor */
.disabled-drug {
    text-decoration: line-through
}

.dose-removed {
    background-color: var(--red);
}

.dose-hidden {
    background-color: var(--light-grey);
}

.dose-visible {
    background-color: var(--light-blue);
}

/* ADMIN */
.order-state {
    text-decoration: underline;
    text-transform: uppercase;
    font-weight: 900;
}

/* -> Edytor Formularzy */

.event-container {
    background-color: white;
}

.effect-container {
    background-color: var(--light-green);
    margin-bottom: 0.75rem;
}

.condition-container {
    background-color: var(--light-blue);
    margin-bottom: 0.75rem;
}

/* LISTA ZAMÓWIEŃ */

a.active {
    font-family: Montserrat_Bold, Helvetica, Arial, sans-serif;
}

.side-menu-header {
    text-align: start;
    margin-left: 2rem;
    margin-right: 2rem;
    padding-bottom: 0.6rem;
    border-bottom: solid 1pt black;
}

ul.side-menu-links {
    list-style-type: none;
    font-family: Montserrat_Regular, Helvetica, Arial, sans-serif;
    text-transform: capitalize;
    margin-bottom: 0px;
}

ul.side-menu-links > li {
    padding-bottom: 1rem;
}

ul.side-menu-links > li:last-child {
    padding-bottom: 0rem;
}

ul.side-menu-links > li > a {
    color: var(--dark-grey) !important;
    text-decoration: none;
}

/* Tabela zamówień, Koszyk, Szczegóły zamówienia */
.order-table > div.header {
    border-bottom: solid 2pt black;
    font-weight: bold;
}

.order-table > div.header > div {
    /*font-family: Rubik_Bold, Helvetica, Arial, sans-serif;*/
    padding-top: 1rem;
    padding-bottom: 1rem;
    vertical-align: middle;
}

.order-table > div.data {
    border-bottom: solid 1px var(--not-white);
    border-top: none;
}

.order-table > div > div {
    padding: 1rem 1rem;
    color: black;
}

.order-table > div > div:first-child {
    font-family: Rubik_Bold, Helvetica, Arial, sans-serif;
    font-weight: bold;
}

.order-table > div > div {
    text-align: center;
    vertical-align: middle;
    align-self: center;
}

.order-link {
    text-transform: uppercase;
    color: var(--dark-grey) !important;
    /*font-weight: 300;*/
    font-size: 12pt;
    /*text-decoration: none;*/
    cursor: pointer;
}

.price-tag {
    font-weight: bold;
    text-decoration: underline;
    white-space: nowrap;
}

.order-hr { /* Tyko do <hr> */
    border-top: solid 1pt #D0D0D0 !important;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

/* KOSZYK */
.order-view > .row {
    margin-top: 10pt;
    padding-top: 10pt;
}

.basket {
    margin-bottom: 0px;
}

.basket > .row {
    /* border-bottom: solid 2pt #D0D0D0 !important; */
    margin-top: 5pt;
    padding-top: 5pt;
}

.basket > .row > div, .basket > .row > div > div {
    border-style: none;
    align-self: center;
}

.basket > .header {
    border-bottom: solid 1pt black !important;
}

.top-hr {
    border-top: solid 1pt var(--not-white) !important;
}

.drugs-list {
    margin-bottom: 0px;
}

/* Timeline */
.timeline-element {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    color:#4B4B4B;
    font-family: Montserrat_Regular, Helvetica, Arial, sans-serif;
    font-size: 10pt;
    text-transform: none;
}

.timeline-separator {
    width: 5%;
    display: flex;
    justify-content: center;
}

.timeline-element.active {
    border-width: 2pt;
    border-color: var(--blue) !important;
}

.timeline-element:not(.active) > img{
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.timeline-element > img {
    width: 100%;
}

@media (max-width: 767px) {
    .timeline-element > span {
        font-family: Rubik_Bold;
        font-size: 8pt;
        text-transform: uppercase;
    }
}

@media (min-width: 767px) {
    .timeline-element > span {
        font-family: Rubik_Bold;
        font-size: 12pt;
        text-transform: uppercase;
    }
}

.timeline-separator > img {
    align-self: center;
    width: 80%;
}

/* CHAT */

.chat-panel {
    border-radius: 5pt !important;
}

.chat-header {
    background-color: var(--blue);
    border-top-left-radius: 5pt !important;
    border-top-right-radius: 5pt !important;
}

.chat-header > h3 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.chat-avatar {
    display: flex;
    align-items: center;
}

.chat-doctor-avatar > img, .chat-avatar > img {
    width: 80pt;
    height: 80pt;
}

.chat-name {
    font-weight: bold;
    color: black;
    margin-top: 5pt;
}

.chat-note {
    color: var(--blue);
    font-style: italic;
}

.chat-comment {
    color: var(--blue);
    font-style: italic;
}

.chat-row {
    border-bottom: solid 1pt #E3E3E3;
}

.chat-patient-meta, .chat-doctor-meta {
    /*border: black 1px solid;*/
}

.chat-patient-text, .chat-patient-meta .chat-name, .chat-patient-meta .chat-time {
    text-align: right;
}

.chat-doctor-text, .chat-doctor-meta .chat-name, .chat-doctor-meta .chat-time {
    text-align: left;
}

.chat-time {
    font-size: smaller;
    color: var(--blue);
}

.message-icon {
    width: 1.5rem;
    display: inline;
}

/* Modal */
.modal-content {
    border-radius: 5pt;
}

.modal-header, .modal-footer {
    align-self: center;
    font-weight: 900;
}

.modal-header {
    display: block;
}

.modal-title img {
    height: 4em;
}

.count_in_unit{
    margin-right: 2pt;
}

/* PORADNIKI */

.advice-main-img {
	width:75%;
}

main.advice {
    padding: 3rem;
    font-family: Rubik_Regular !important;
    font-size: 14pt;
}

.advice-tag {
    text-decoration: underline;
    text-transform: uppercase;
}

main.advice > p {
    /* text-align: left; */
	font-family: Rubik_Regular !important;
}

main.advice > p > span {
	font-family: Rubik_Regular !important;
}

main.advice > h1 {
    /*margin-top: 2rem;
    margin-bottom: 2rem;*/
}

/* Kalendarz */
.selected {
    background-color: var(--blue) !important;
}

.calendar-month-header {

}

.calendar-month {
    font-size: small;
}

.calendar-month > .col {
    position: relative;
    padding-top: 5pt !important;
    padding-bottom: 5pt !important;
    min-height: 80pt;
}

.calendar-month > .col > ol {
    padding-left: 5pt;
}

.calendar-day-header {

}

.calendar-day {
    font-size: small;
}

.calendar-day > .col {
    position: relative;
    padding-top: 5pt !important;
    padding-bottom: 5pt !important;
    min-height: 80pt;
}

.calendar-day > .col > ol {
    padding-left: 5pt;
}

.calendar-day-empty {
    background-color: var(--light-grey);
}

.calendar-add-static-button {
    position: absolute;
    top: 5pt;
    right: 5pt;
}

.calendar-table {
    table-layout: auto;
}

.calendar-table > tbody > tr {
    height: 100%;
}

.calendar-table > tbody > tr > td {
    height: 100%;
    padding: 0px !important;
}

.expansive-td {

}

.calendar-duty {
    background-color: cadetblue !important;
    min-height: 10px;
}

/* Karuzela */
.carousel-item > .row > div {
    padding: 1rem;
}

.carousel-item > .row > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.carousel-indicators {
    bottom: -2rem;
}