:root {
    --companyBlue: #57c5e9;
    --companyGreen: #58dd00;
    --red: #B03060;
    --orange: #FE9A76;
    --yellow: #FFD700;
    --olive: #32CD32;
    --green: #016936;
    --teal: #008080;
    --blue: #0E6EB8;
    --violet: #EE82EE;
    --purple: #B413EC;
    --pink: #FF1493;
    --brown: #A52A2A;
    --grey: #A0A0A0;
    --black: #000000;
}


.mynavbarDropDown {
    display: block;
    width: 100%;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    color: var(--bs-dropdown-link-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    border: 0;
    border-radius: var(--bs-dropdown-item-border-radius,0);
}

    .mynavbarDropDown:hover {
        background-color: lightgray;
    }

.transparentBg {
    background-color: rgba(233,234, 235, 0.8) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

#overlay {
    position: fixed;
    top: 0;
    z-index: 999999;
    width: 100%;
    height: 100%;
    display: block;
    background: rgba(0,0,0,0.6);
}


.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    border-top: 4px solid #FFF;
    border-right: 4px solid transparent;
    box-sizing: border-box;
    text-align: center;
    line-height: 3;
    font-size: 1.5rem;
    color: white;
    animation: rotation 1s linear infinite;
}

    .loader i {
    }

    .loader::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border-bottom: 4px solid #FF3D00;
        border-left: 4px solid transparent;
    }

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes sp-anime {
    100% {
        transform: rotate(360deg);
    }
}


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

.navbarLogo-cGreen {
    color: var(--companyGreen);
}

.navbarLogo-cBlue {
    color: var(--companyBlue);
}

.navbar-toggler-icon {
    background-image: none !important;
    background-color: var(--bs-gray-800);
    height: 3px;
    width: 25px;
    margin: 10px 0;
    position: relative;
    transition: all 0.35s ease-out;
    transform-origin: center;
}

    .navbar-toggler-icon::before {
        display: block;
        background-color: var(--bs-gray-800);
        height: 3px;
        content: "";
        position: relative;
        top: -7px;
        transition: all 0.15s ease-out; /*taken down to hide quicker*/
        transform-origin: center;
    }

    .navbar-toggler-icon::after {
        display: block;
        background-color: var(--bs-gray-800);
        height: 3px;
        content: "";
        position: relative;
        top: 4px;
        transition: all 0.35s ease-out;
        transform-origin: center;
    }

.navbar-dark .navbar-toggler-icon,
.navbar-dark .navbar-toggler-icon::before,
.navbar-dark .navbar-toggler-icon::after {
    background-color: var(--bs-gray-100);
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    transform: rotate(45deg);
}

    .navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
        opacity: 0;
    }

    .navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
        transform: rotate(-90deg) translateX(7px);
    }

.text-small {
    font-size: 17px;
}

.text-xsmall {
    font-size: 0.85rem;
}

.text-2xsmall {
    font-size: 0.6rem;
}

.br-all-1 {
    border-radius: 1rem !important;
}

.br-br-1 {
    border-bottom-right-radius: 1rem !important;
}

.br-bl-1 {
    border-bottom-left-radius: 1rem !important;
}

.br-tr-1 {
    border-top-right-radius: 1rem !important;
}

.br-tl-1 {
    border-top-left-radius: 1rem !important;
}

.br-br-0 {
    border-bottom-right-radius: 0rem !important;
}

.br-bl-0 {
    border-bottom-left-radius: 0rem !important;
}

.br-tr-0 {
    border-top-right-radius: 0rem !important;
}

.br-tl-0 {
    border-top-left-radius: 0rem !important;
}

.br-tl-2 {
    border-top-left-radius: 2rem !important;
}

.br-all-2 {
    border-radius: 2rem !important;
}

.bg-darkOrange {
    background-color: #c99807 !important;
}

.bg-ultraViolet {
    background-color: #6B5B95 !important;
}

.cursor-pointer {
    cursor: pointer;
    user-select: none;
}

.bg-darkGreen {
    background-color: #07522f !important;
}

.divStriped .row:nth-of-type(odd) {
    background: white;
}

.divStriped .row:nth-of-type(even) {
    background-color: #e9ecef;
}

.select2-selection {
    -webkit-box-shadow: 0;
    box-shadow: 0;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    color: #555555;
    font-size: 14px;
    outline: 0;
    min-height: 48px;
    text-align: left;
}

.select2-selection__rendered {
    margin: 10px !important;
}   
/*.select2-selection--multiple{
    margin:10px !important;
}*/

.select2-selection__arrow {
    margin: 10px;
}

.spcBtn {
    font-size: 1.5rem;
    transition: all 0.5s;
    opacity: 0.90;
}

    .spcBtn:hover {
        transform: scale(1.03);
        transition: all 1s;
        opacity: 1;
        box-shadow: var(--bs-box-shadow) !important;
    }

.btnStyle-1 {
    background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
}

.btnStyle-2 {
    background-image: linear-gradient(45deg, rgba(255,128,8,1) 12%, rgba(56,128,213,1) 100%);
}

.btnStyle-3 {
    background-image: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(146,51,165,1) 6%, rgba(255,0,52,1) 50%, rgba(38,117,211,1) 100%);
}

.btnStyle-4 {
    background-image: linear-gradient(to right, #ff9a9e, #fad0c4);
}

.btnStyle-5 {
    background-image: linear-gradient(to bottom, #a18cd1, #fbc2eb);
}

.btnStyle-6 {
    background-image: linear-gradient(to left, #ffecd2, #fcb69f);
}

.btnStyle-7 {
    background-image: linear-gradient(120deg, #ff9a9e, #fecfef);
}

.btnStyle-8 {
    background-image: linear-gradient(to top, #667eea, #764ba2);
}

.btnStyle-9 {
    background-image: linear-gradient(to bottom right, #89f7fe, #66a6ff);
}

.btnStyle-10 {
    background-image: linear-gradient(to right, #6a11cb, #2575fc);
}

.btnStyle-11 {
    background-image: linear-gradient(135deg, #ff9a9e, #fecfef);
}

.btnStyle-12 {
    background-image: linear-gradient(45deg, #ff758c, #ff7eb3);
}

.btnStyle-13 {
    background-image: linear-gradient(to top, #43e97b, #38f9d7);
}

.btnStyle-14 {
    background-image: linear-gradient(to right, #f857a6, #ff5858);
}

.btnStyle-15 {
    background-image: linear-gradient(to bottom, #1f4037, #99f2c8);
}

.btnStyle-16 {
    background-image: linear-gradient(60deg, #16d9e3, #30c7ec, #46aef7);
}

.btnStyle-17 {
    background-image: linear-gradient(to left, #ff0844, #ffb199);
}

.btnStyle-18 {
    background-image: linear-gradient(to right top, #000428, #004e92);
}

.btnStyle-19 {
    background-image: linear-gradient(to right, #fc466b, #3f5efb);
}

.btnStyle-20 {
    background-image: linear-gradient(to right, #4facfe, #00f2fe);
}

.btnStyle-21 {
    background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}

.btnStyle-22 {
    background-image: linear-gradient(to top, #eb3349, #f45c43);
}

.btnStyle-23 {
    background-image: linear-gradient(to top left, #12c2e9, #c471ed, #f64f59);
}

.btnStyle-24 {
    background-image: linear-gradient(to top, #c6ffdd, #fbd786, #f7797d);
}

.btnStyle-25 {
    background-image: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b);
}

.btnStyle-26 {
    background-image: linear-gradient(to left, #56ccf2, #2f80ed);
}

.btnStyle-27 {
    background-image: linear-gradient(90deg, #fc5c7d, #6a82fb);
}

.btnStyle-28 {
    background-image: linear-gradient(to right, #0052d4, #4364f7, #6fb1fc);
}

.btnStyle-29 {
    background-image: linear-gradient(to bottom left, #e53935, #e35d5b);
}

.btnStyle-30 {
    background-image: linear-gradient(to right, #f12711, #f5af19);
}

.btnStyle-31 {
    background-image: linear-gradient(to bottom, #00c6ff, #0072ff);
}

.btnStyle-32 {
    background-image: linear-gradient(to top right, #fbc7d4, #9796f0);
}

.btnStyle-33 {
    background-image: linear-gradient(to left, #8e44ad, #3498db);
}

.bgChecked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJ3aGl0ZSI+PHBhdGggZD0iTTkgMTYuMTdMNC44MyAxMmwtMS40MiAxLjQxTDkgMTkgMjEgN2wtMS40MS0xLjQxeiIvPjwvc3ZnPg==');
    background-size: cover;
    border-radius: 50% !important;
    background-color: rgba(0, 0, 0, 0.15); /* %80 opak siyah */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    z-index: 1;
    pointer-events: none; /* Kaplama etkileşimi engelle */
}




.bgs {
    cursor: pointer;
    position: relative;
}

.icons {
    cursor: pointer;
    position: relative;
    background-color: rgba(0,0,0,1);
    opacity: 0.6;
    height: 40px;
    min-width: 40px;
}

    .icons.iconChecked {
        background-color: darkslateblue;
        opacity: 1 !important;
        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    }

.cardImage:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: 0;
    right: 0;
    border-bottom: 60px solid rgba(var(--bs-light-rgb),var(--bs-bg-opacity));
    border-left: 60px solid transparent;
    filter: drop-shadow(-4px -4px 2px rgba(0,0,0,0.1));
}

.cardImageText {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 15;
    padding-right: 5px;
}

.pl-3{
    padding-left:1rem !important;
}

.circle-number {
    width: 20px; /* Dairenin genişliği 20px */
    height: 20px; /* Dairenin yüksekliği 20px */
    background-color: #007bff; /* Dairenin arka plan rengi */
    color: white;
    border-radius: 50%; /* Yuvarlak şekli oluşturur */
    display: flex;
    align-items: center; /* Yatayda ortalama */
    justify-content: center; /* Dikeyde ortalama */
    font-size: 12px; /* Sayıların font boyutunu ayarladık */
    font-weight: bold;
    margin: 0 auto;
    margin-bottom: 10px; /* Dairenin üst kısmındaki boşluk */
}