:root {
    --primary-color: #2f9df8;
}


body * {
    font-family: 'Titillium Web', sans-serif;
}

#consultation-end {
    height: 100vh;
    width: 100%;
    background: rgb(47, 157, 248);
    background: linear-gradient(180deg, rgba(47, 157, 248, 1) 0%, rgba(85, 210, 247, 1) 100%);
}

#consultation-end .image-container {
    /* display: flex;
    align-items: center; */
    margin-top: 40px;
    margin-bottom: 200px;
}

#consultation-end .service-name {
    font-size: 30px;
    margin-bottom: 0;
}

#consultation-end img {
    width: 200px;
}

#consultation-end h1 {
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
}

#consultation-end p {
    color: #fff;
    text-align: center;
}

#consultation-end .container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.icons-container {
    display: flex;
    margin-top: auto;
    justify-content: center;
}

.recall-container,
.back-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    margin-right: 50px;
    margin-left: 50px;
}

.recall-container:hover,
.back-container:hover {
    cursor: pointer;
}

#consultation-end .phone-icon {
    width: 80px;
    margin-bottom: 20px;
    fill: #fff;
}

header {
    background-color: #fff;
    box-shadow: 0 3px 6px 0px rgba(0, 0, 0, .16);
    height: 70px;
    position: sticky;
    top: 0;
    z-index: 1000;
    position: -webkit-sticky;
}

header .container {
    display: flex;
    align-items: center;
    height: 70px;
}

header nav {
    display: inline-flex;
    justify-content: flex-end;
    flex: 1;
}

header nav a {
    padding: 10px 15px;
    text-transform: uppercase;
    font-weight: 700;
    color: rgb(105, 105, 105);
    font-size: 14px;
}

header nav a:hover {
    text-decoration: none;
    color: #2f9df8
}

header nav a.active {
    color: #2f9df8;
}

main {
    background: rgba(234, 237, 242, .49);
    min-height: calc(100vh - 70px);
}

.custom-card {
    background-color: #fff;
    box-shadow: 0 4px 8px 0px rgba(0, 0, 0, .1);
    border-radius: 16px;
    width: 99%;
    margin-right: auto;
    margin-left: auto;
    padding: 20px 20px 30px 20px;
    overflow: hidden;
    margin-bottom: 5px;
}

#login .slider {
    margin-top: 50px;
}

.input-header {
    color: rgb(155, 155, 155);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
}

#login input,
#patient-medical-record input {
    background-color: rgb(234, 237, 242);
    height: 54px;
    border-radius: 6px;
    border: none;
    padding-left: 10px;
    width: 50%;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.custom-button {
    background: rgb(47, 157, 248);
    background: linear-gradient(180deg, rgba(47, 157, 248, 1) 0%, rgba(85, 210, 247, 1) 100%);
    padding: 15px 30px;
    border-radius: 8px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    transition: .2s ease all;
}

.check-button {
    background: rgb(46, 126, 11);
}

.inverse-button {
    background: #fff;
    color: rgb(47, 157, 248);
    border: 1px solid rgb(47, 157, 248);
}

.custom-button:hover {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transform: scale(1.03);
}

.inverse-button:hover {
    color: rgb(47, 157, 248);

}

#login .input-header {
    margin-top: 15px;
    margin-bottom: 30px;
}

#login .custom-button {
    margin-top: 50px;
}

#login .data-info {
    color: rgb(155, 155, 155);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
}

.header-logo {
    height: 50px;
}

#appointments main,
#history main,
#user-appointment-start main,
#calendar main,
#my-link main,
#medical-record main,
#profile main,
#specialities main {
    padding-top: 30px;
}

.appointment-profile-picture {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 10px;
}

.profile-picture-col {
    text-align: center;
}


.list-name {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 5px;
}

.list-phone,
.list-email {
    color: rgb(105, 105, 105);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 5px;
    text-align: center;
    word-break: break-word;
}


#appointments .data-col p,
#history .data-col p,
#user-appointment-start .data-col p,
#user-appointment-start .profile-picture-col>div p:not(.list-name) {
    color: rgb(115, 115, 115)
}

.data-header {
    font-weight: 700;
}

.document-icon {
    height: 50px;
    margin-left: 5px;
    margin-right: 5px;
}

.data-col a:hover {
    text-decoration: none;
}

.custom-card .date-col {

    text-align: center;
    display: flex;
    flex-direction: column;
}

.custom-card .date-col p {
    color: rgb(105, 105, 105);
    font-weight: 700;
}

.custom-card .date-col .custom-button {
    width: 100%;
    text-transform: uppercase;
    font-size: 20px;
}

.custom-card .date-col .appointment-date {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 25px;
}

.custom-card .first-row {
    display: flex;
    justify-content: space-between;
    margin-top: 0px;
    height: 37.5px;
    align-items: center;
}

.custom-card .first-row p {
    margin-bottom: 0;
}



#appointments .appointments-info,
#history .appointments-info,
#user-appointment-start .appointments-info {
    text-align: center;
    color: rgba(105, 105, 105);
    font-weight: 700;
    margin-bottom: 30px;
    font-size: 18px;
}

#history .custom-card {
    margin-bottom: 30px;
}

.other-consultations {
    margin-top: 30px;
}

#appointments .closest-appointment {
    border: 2px solid var(--primary-color);
}



.custom-card .date-col p.consultation-start-info {
    font-size: 12px;
    font-weight: 400;
    margin-top: 10px;
    font-style: italic;
}

#appointments .custom-card:not(.closest-appointment) .custom-button:hover {
    transform: scale(1);
    cursor: default;
}

/* #appointments .closest-appointment .consultation-start-info {
    display: none;
} */

#appointments .custom-card:not(.closest-appointment) .custom-button {
    background: rgb(125, 125, 125);
}

#appointments .custom-card:not(.closest-appointment) .custom-button.inverse-button {
    color: #fff;
    border-color: transparent;
}

#appointments main>.container>.row,
#history #appointments main>.container>.row,
#user-appointment-start #appointments main>.container>.row {
    margin-bottom: 20px;
}


#settings main {
    padding-top: 30px;
}

/* #settings input[type="radio"],
#settings input[type="checkbox"] {
    height: auto;
    width: auto;
} */

#settings p {
    font-weight: 600;
    margin-bottom: 0;
}



.transparent {
    opacity: 0
}

.transparent:hover {
    cursor: default
}

.modal-data-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 10px;
}

#appointmentModal .col p {
    margin-bottom: 10px;
}

#appointmentModal .modal-data-col p {
    margin-bottom: 5px;
}

.consulting-hours select {
    width: 48%;
}

.consulting-hours .options {
    display: flex;
    justify-content: space-between;

}

.calendar-header {
    margin: 0 15px 20px 15px;
}

.upload-info {
    font-size: 14px;
    font-style: italic;
    margin-top: 25px;
}

.upload-document {
    width: 100%;
    padding: 10px 20px;
}

.hidden {
    display: none !important
}

.uploaded-files {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.uploaded-file {
    display: flex;
    align-items: center;
    word-break: break-all;
    text-align: left;
}

.file-icon {
    position: relative;
    display: inline-block;
    transition: 0.1s ease all;
    width: 60px;
    margin-bottom: 10px;
    margin-right: 20px;
}

.file-icon:hover {
    cursor: pointer;
    transform: scale(1.2);
}

.success-icon {
    color: green;
    position: absolute;
    bottom: 0px;
    right: 5px;
}

.delete-icon {
    color: red;
    position: absolute;
    top: 0px;
    right: 0px;
}

.cancel-appointment {
    /* height: 20px; */
    padding: 6px 10px;
    border: 1px solid #d41919;
    color: #d41919;
    margin-top: 20px;
    margin-bottom: 20px;
}

.cancel-appointment:hover {
    color: #d41919;
    transform: scale(1);
}

.custom-card .date-col .custom-button.cancel-appointment {
    font-size: 12px;
    line-height: 12px;
    background: #fff;
    width: 200px;
    text-transform: none;
    margin-right: 0;
}

#appointments .informations {
    margin-bottom: 30px;
    text-align: center;
}

#appointments .informations p {
    margin-bottom: 5px;
    font-weight: 700;
    font-style: italic;
}

#appointments .informations p#device-check {
    text-decoration: underline;
    color: var(--primary-color);
    display: inline-block;
    margin-bottom: 10px;
}

#appointments .informations p#device-check:hover {
    cursor: pointer;
}

#appointments .custom-card:not(.closest-appointment) .custom-button.cancel-appointment {
    background: #fff;
}

#appointments .custom-card:not(.closest-appointment) .custom-button.cancel-appointment:hover {
    cursor: pointer;
}

#appointments .button-row .custom-button {
    width: 250px;
    position: relative;
}

#appointments .button-row .custom-button .input-file {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0;
    top: 0;
    left: 0;
    padding-left: 0;
}

#appointments .closest-appointment .button-row .custom-button .input-file:hover {
    cursor: pointer;
}

#appointments .custom-card:not(.closest-appointment) .button-row .custom-button .input-file:hover {
    pointer-events: none;
}

.custom-card .date-col p.upload-info {
    font-weight: 400;
}

.copy-icon {
    width: 24px;
    height: 24px;
    box-sizing: content-box;
}

.my-link {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.my-link p:first-child {
    margin-bottom: 15px;
}

.my-link p:last-child {
    margin-bottom: 0;
}

.my-link p span:first-child {
    color: var(--primary-color);
    margin-right: 10px;
}

.my-link .copy-container {
    padding: 10px;
}

.my-link .copy-container:hover {
    cursor: pointer;
    text-decoration: underline;
}

#medical-record main {
    padding-bottom: 150px;
}

#medical-record .button-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

#medical-record .button-row .custom-button {
    margin: 10px 20px;
    width: 270px;
}

#medical-record .info {
    font-size: 0.9rem;
    font-style: italic;
}

#medical-record .save-info {
    margin-top: 50px;
    margin-bottom: 7px;
}

#medical-record .info span {
    font-weight: 700;
}

#medical-record .save-feedback {
    text-align: center;
    font-weight: 700;
    color: red;
    height: 24px;
}

#medical-record .save-feedback.saved {
    color: green
}

#medical-record .saved-info {
    font-style: italic;
    font-weight: 700;
    text-align: center;
}

#patient-medical-record #password {
    margin-top: 10px;
    margin-bottom: 20px;
}

#patient-medical-record #save-to-pdf {
    margin-bottom: 20px;
}


.section-header {
    color: rgb(28, 28, 28);
    background-color: rgb(210, 208, 208);
    font-weight: 700;
    padding: 10px 5px;
    font-size: 1.1rem;
}

.form-image {
    max-width: 100%;
    object-fit: contain;
}

#profile img {
    margin-bottom: 10px;
}

.dropdown-toggle::after,
.filter-option::after {
    display: none !important;
}

.added-labels {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    /* padding: 10px 10px 0 10px;
    background-color: rgb(238, 246, 254); */
}


.label-card {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 4px;
    box-shadow: 0px 2px 3px 1px #ccc;
    transition: all 0.2s ease;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: #fff;
}

.label-card:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.label-card i {
    font-size: 0.8rem;
    padding: 5px;
}

.add-input-row {
    display: flex;
    justify-content: space-between;
}

.add-input-row .custom-button {
    width: 100px;
    padding: 5px 10px;
    margin-left: 0;
    margin-right: 0;
}

.add-input {
    width: 50%;
}

#add-profile-image {
    margin-bottom: 15px;
}

.custom-tooltip {
    color: #222
}

.custom-tooltip:hover {
    color: #222
}

#settings .speciality-name {
    background-color: #eee;
    padding: 10px;
    font-size: 1.1rem;
}

.datas.status-disabled {
    pointer-events: none;
}

.custom-card-header {
    font-weight: 700;
    font-size: 18px;
    color: rgba(105, 105, 105);
    text-align: center;
    margin-bottom: 40px;
    margin-top: 10px;
}

.iti {
    width: 100%;
}

/* 
    Hamburger menü
*/

.hamburger-menu {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, .6);
    width: 0;
    height: 100%;
    overflow: hidden;
}

.menu-items {
    margin-left: auto;
    width: 30%;
    background-color: rgba(255, 255, 255, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
}

.menu-item {
    border-bottom: 1px solid rgb(200, 200, 200);
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}


.menu-item p {
    margin-bottom: 0;
}

.menu-item p:not(:nth-child(2)) {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.menu-item a {
    color: rgb(75, 75, 75);
    display: inline-block;
    width: 100%;
}

.menu-close {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-close p i {
    font-size: 20px;
    padding: 10px
}



/* 
Reszponzív
*/

@media only screen and (max-width: 1199px) {
    .custom-card .date-col .custom-button {
        font-size: 18px;
    }
}

@media only screen and (max-width: 991px) {
    header nav a {
        font-size: 14px;
        padding: 20px 10px;
    }

    .custom-card {
        font-size: 14px;
    }

    .custom-card .date-col {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .break {
        flex-basis: 100%
    }

    .custom-card .date-col .appointment-date {
        margin-left: 40px;
    }

    .custom-card .date-col .custom-button.cancel-appointment {
        margin-top: 20px;
    }

    .custom-card .date-col {
        padding-top: 10px;
    }

    .header-logo {
        height: 35px;
    }

    header nav {
        display: none
    }

    header .container {
        display: flex;
        justify-content: space-between;
    }

    #user-appointment-start .date-col .data-header {
        margin-top: 20px;
        margin-bottom: 25px;

    }

    header .container i {
        font-size: 24px;
        color: rgb(105, 105, 105);
        padding: 20px;
        margin-right: -20px;
    }

    .calendar .intervals .cell {
        font-size: 12px;
    }

}

@media only screen and (max-width: 767px) {
    #consultation-end img {
        width: 130px;
    }

    #consultation-end .service-name {
        font-size: 22px;
    }

    #consultation-end .image-container {
        margin-bottom: 100px;
    }

    #consultation-end h1 {
        font-size: 24px;
    }

    #consultation-end svg {
        width: 50px;
    }

    .recall-container,
    .back-container {
        margin-right: 20px;
        margin-left: 20px;
        /* width: 80px; */
    }


    #settings .custom-card p {
        font-size: 14px;
    }

    .input-header {
        font-size: 18px;
    }

    #login .input {
        height: 40px;
    }

    #calendar .custom-card .calendar-table {
        overflow-x: auto;
        margin: 0 15px;
    }

    .calendar .cell {
        width: 80px;
    }

    .calendar .day-name {
        font-size: 14px;
    }

    #user-appointment-start .data-col p {
        margin-bottom: 5px;
    }

    #appointments .button-row .custom-button {
        width: 100%;
    }


}

@media only screen and (max-width: 575px) {
    #consultation-end img {
        margin-right: auto;
        margin-left: auto;
        display: block;
        margin-bottom: 30px;
    }

    #consultation-end .image-container {
        margin-bottom: 50px;
    }

    header {
        height: 60px;
    }

    header .container {
        height: 60px;
    }

    .appointment-profile-picture {
        width: 80px;
        height: 80px;
        margin-right: 20px;
    }

    .profile-picture-col {
        display: flex;
        margin-bottom: 10px;
    }

    .modal-body .profile-picture-col>div {
        margin-top: 10px;
    }

    .modal-data-col {
        margin-bottom: 0;
    }

    #appointmentModal .modal-data-col p {
        margin-bottom: 10px;
    }

    .profile-picture-col>div p {
        text-align: left;
    }

    .custom-card .date-col {
        flex-direction: column;
    }

    .custom-card .date-col .break {
        display: none;

    }

    .custom-card .date-col .custom-button.cancel-appointment {
        margin-right: auto;
    }

    .custom-card .date-col .appointment-date {
        margin-left: 0;
    }

    .menu-items {
        width: 55%;
    }

    #calendar .custom-card {
        padding: 10px 0;
    }

    #user-appointment-start .profile-picture-col>div p {
        margin-bottom: 5px;
    }


    .uploaded-files {
        width: 100%;
        margin-top: 10px;
    }

    #login input {
        width: 100%;
    }

    #appointments .button-row .custom-button {
        margin-top: 10px;
        margin-bottom: 10px;
    }


}

.center-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}

.stars-container {
    display: flex;
    justify-content: space-between;
    width: 350px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

.doctor-rating {
    margin-bottom: 20px;
}

.star-icon {
    width: 50px;
    height: 50px;
    fill: white;
}

.star-icon.yellow path {
    fill: #ffc107
}

.star-icon:hover {
    cursor: pointer;
}

.rating-text {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.show-feedback-modal {
    margin-top: -30px;
    height: 24px;
    margin-bottom: 30px;
    text-decoration: underline;
}

.show-feedback-modal.visible:hover {
    cursor: pointer;
}

#consultation-end p.question {
    color: rgb(33, 37, 41);
    text-align: left;
}

#consultation-end .form-check {
    margin-bottom: 10px;
}

#consultation-end #errorCarousel {
    margin-left: -0.9rem;
    margin-right: -0.9rem;
    margin-top: 40px;
}

#consultation-end #errorCarousel .question {
    font-weight: 700;
}

#consultation-end .carousel-indicators {
    top: -55px;
    margin-left: 5%;
    margin-right: 5%;
    display: flex;
    justify-content: space-between;
    bottom: auto
}

#consultation-end .carousel-indicators li {
    text-indent: 0px;
    width: auto;
    height: 20px;
    margin: 0px;
    background-color: transparent;
    padding: 0px 10px 5px;
    border-bottom: 3px solid var(--primary-color);
}

#consultation-end .carousel-indicators li.active {
    /* background-color: rgb(179, 221, 255); */
}

#consultation-end .carousel-inner {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

#consultation-end .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

#consultation-end .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

#consultation-end .carousel-control-prev,
#consultation-end .carousel-control-next {
    width: 10%;
}

/* #consultation-end .carousel-control-prev-icon,
#consultation-end .carousel-control-next-icon {
    background-image: none;
}

#consultation-end .carousel-control-next-icon:after {
    content: '>';
    font-size: 55px;
    color: green;
}

#consultation-end .carousel-control-prev-icon:after {
    content: '<';
    font-size: 55px;
    color: green;
} */

#check .helper {
    display: none;
    font-size: 16px;
    color: red;
}