﻿.icon-hover-green:hover {
    color: #fff !important;
    background-color: #3ac8bf !important;
    border-radius: 5px;
}

.icon-hover-red:hover {
    color: #fff !important;
    background-color: #f46a6a !important;
    border-radius: 5px;
}

.icon-hover-blue:hover {
    color: #fff !important;
    background-color: #556ee6 !important;
    border-radius: 5px;
}

.icon-hover-grey:hover {
    background-color: #8c8a8c !important;
    color: white !important;
    border-radius: 5px;
}

.icon-hover-black:hover {
    background-color: black !important;
    color: white !important;
    border-radius: 5px;
}

.myInfo::before {
    content: url('../../assets/images/information-variant-circle.svg');
    display: inline-block;
    height: 27px;
    width: 18px;
    padding-top: 2px;
    color: #556ee6;
    filter: invert(46%) sepia(15%) saturate(2927%) hue-rotate(195deg) brightness(94%) contrast(92%);
    vertical-align: central;
    font-size: inherit;
    text-rendering: auto;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
}

.myInfo:hover::before {
    filter: invert(99%) sepia(1%) saturate(265%) hue-rotate(285deg) brightness(118%) contrast(100%) !important;
}

.hover-black:hover {
    color: black !important;
}

.button-hover-grey:hover {
    color: #000 !important;
    background-color: #ccc !important;
}

.button-hover-blue {
    border: 1px solid transparent;
}
.button-hover-blue:hover {
    color: #1A88C1 !important;
    background-color: white !important;
    border-radius: 5px;
    border-color: #1A88C1 !important;
    border: 1px solid #1A88C1;
}

.bimed-blue, .bimed-hover:hover {
    color: #000 !important;
    background-color: #1A88C1 !important;
}

.bg-bimed-color {
    background-color: #1A88C1;
}

.bimed-color {
    color: #1A88C1 !important;
}

.bimed-border {
    border: 1px solid #1A88C1;
}

.hover-bold:hover {
    font-weight: bold;
}

.hover-darker-text-danger:hover a, .hover-darker-text-danger:hover i, .hover-darker-text-danger:focus a, .hover-darker-text-danger:focus i {
    color: #c40e0e !important;
}

.transparent {
    background-color: transparent;
}

.column-image-upload {
    float: left;
    width: 33.33%;
}

.fade-in {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.image-fade {
    opacity: 1;
    transition: .5s ease;
    backface-visibility: hidden;
}

.clickable-image-container:hover .image-fade {
    opacity: 0.3;
    cursor: pointer;
}

.clickable-image-container:hover .fade-in {
    opacity: 1;
    cursor: pointer;
}

.field-icon {
    float: right;
    margin-right: 10px;
    margin-top: -26.765px; /*(38.53 + font-size)/2*/
    position: relative;
    z-index: 2;
    font-size: 15px;
    cursor: pointer;
}

.top-bar {
    position: fixed !important;
    width: 100%;
    z-index: 10;
    top: 0;
    overflow: hidden;
    box-sizing: border-box;
    /*transition: top 0.5s;*/
}

.stickyTopBarGrey {
    background-color: #f8f8fb;
    z-index: 3;
    position: fixed;
    width: 100%;
    padding-top: 24px;
    top:70px;
    /*margin-bottom: 0px !important;
    padding-bottom: 8px;*/
}
.stickyTopBarWhite {
    background-color: white;
    z-index: 3;
    position: fixed;
    margin-bottom: 0px !important;
    padding-top: 20px;
    padding-bottom: 8px;
}
.stickyTopBarThead {
    z-index: 3;
    position: fixed;
    overflow-y: hidden;
}

.vertical-center {
    align-items: center;
}

.horizontal-center {
    display: flex;
    justify-content: center;
}

.mySlides, .mySlidesSmall {
    width: calc(100% - 44px);
    z-index: 2;
    cursor: pointer;
}

/*#g-recaptcha-response {
    display: block !important;
    position: absolute;
    margin: -78px 0 0 0 !important;
    width: 302px !important;
    height: 76px !important;
    z-index: -999999;
    opacity: 0;
}*/

.price-good {
    color: rgb(0,0,0,0.55);
    font-size:34px;
    line-height:1;
}

.price-vat {
    color: rgb(0,0,0,0.55);
    font-size: 12px;
    line-height: 1;
}

.bimed-dots {
    color: #1A88C1;
}
.grey-dots li {
    color: rgb(0,0,0,0.55);
}
.grey-dots li span, .bimed-dots li span {
    color: rgb(33, 37, 41);
}

.selected-card {
    border-color: #1A88C1;
}

.grid-padding {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    padding-top: 0.5rem !important;
}

.grid-icon {
    max-height: 96px;
    aspect-ratio: 1/1;
}

.flag-icon {
    border-radius: 3px;
    width: 35px;
    /*height: 23.3333px;*/
    height: 24px;
    vertical-align: top !important;
}

.small-icon {
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 16px;
    text-align: center;
    text-size-adjust: 100%;
    /*color: rgb(0,0,0,0.55);*/
    /*color: #707071;*/
    filter: invert(46%) sepia(0%) saturate(25%) hue-rotate(91deg) brightness(95%) contrast(92%);
    vertical-align: top;
    margin-top: 0.2em; /*3.25px is the middle but I use 0.2em = 3.2px*/
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.logo { /*Boostrap override*/
    line-height: 52.25px !important;
}

.lang-selector p {
    font-size: 15px !important;
    color: rgb(0,0,0,0.55) !important;
}
.my-nav-link:focus, .my-nav-link:hover {
    color: rgb(0,0,0,0.55) !important;
}
.my-nav-link a:focus, .my-nav-link a:hover {
    color: rgb(0,0,0,0.7) !important;
}
.my-nav-link a {
    text-decoration: none;
    color: inherit;
}
.my-nav-link a:active {
    color: #1A88C1 !important;
}
.my-nav-link a.active{
    color: #1A88C1 !important;
}

.active a {
    color: #1A88C1 !important;
    border-bottom: 3px solid #1A88C1;
}

.passive {
    /*color: dimgrey;*/
    /*filter: grayscale(100%);*/
    background-color: #f0f0f0;
    opacity: 0.8;
    border-color: #dcdcdc;
    border-top-width: 1.1px;
    border-bottom-width: 1.1px;
}
    .passive:hover {
        background-color: #e6e6e6 !important;
        --bs-table-accent-bg: #e6e6e6 !important;
    }


/* common */
.ribbon {
    width: 135px; /*150px*/
    height: 135px; /*150px*/
    overflow: hidden;
    position: absolute;
}
    .ribbon::before,
    .ribbon::after {
        position: absolute;
        z-index: -1;
        content: '';
        display: block;
        border: 5px solid #2980b9;
    }
    .ribbon span {
        position: absolute;
        display: block;
        width: 225px;
        padding: 13px 0; /*15px 0*/
        background-color: #3498db;
        box-shadow: 0 5px 10px rgba(0,0,0,.1);
        color: #fff;
        font: 700 18px/1 'Lato', sans-serif;
        /*font-size: 18px;
        font-weight: 700;
        line-height: 18px;*/
        text-shadow: 0 1px 1px rgba(0,0,0,.2);
        /*text-transform: uppercase;*/
        text-align: center;
    }
.ribbon-top-right {
        top: -5px; /*-10px*/
        right: -5px; /*-10px*/
    }
    .ribbon-top-right::before,
    .ribbon-top-right::after {
        border-top-color: transparent;
        border-right-color: transparent;
    }
    .ribbon-top-right::before {
        top: 0;
        left: 0;
    }
    .ribbon-top-right::after {
        bottom: 0;
        right: 0;
    }
    .ribbon-top-right span {
        left: -29px; /*-25px*/
        top: 30px;
        transform: rotate(45deg);
    }

@media screen and (max-width: 580px) {
    .qrcode {
        display: none !important;
    }
}

@media (min-width: 1400px) { /*XL*/
    .grid-height {
        min-height: 287px !important;
    }
}

@media (min-width: 992px) { /*L*/    /*960px genişliğinde olmalı max | 936 taşmaması için*/
    .hide-large {
        display: none !important
    }

    .grid-height{
        min-height: 330px;
    }
}

@media (max-width: 991px) and (min-width: 768px) { /*M*/     /*min used to be 601*/
    .hide-medium {
        display: none !important
    }

    .grid-height {
        min-height: 422px;
    }
}

@media (max-width: 767px) { /*S*/     /*326px genişliğinde olmalı max | 302 taşmaması için*/ /*600*/

    .hide-small {
        display: none !important
    }

    .mobile {
        display: block;
        width: 100% !important
    }

}

:root {
    color-scheme: only light;
}
