/*-------------------- GLOBAL CSS ----------------------------------------------------------------------*/

@font-face {
    font-family: 'Avenir'; /* Buraya bir isim verin */
    src: url('../fonts/Avenir.otf'); /* .ttf dosyasının yolunu ekleyin */
}

:root {
    --primary-color: #0078ae !important;
    --primary-color2: #84bd00 !important;
    --primary-dark-color: #323a45 !important;
    --primary-light-color: #e9b25c30 !important;
    --secondary-color: #747373 !important;
    --dark-color: #1a1a20 !important;
    --dark-grey-color: #6d8a8c !important;
    --grey-color: rgba(133,133,133,1) !important;
    --white-color: #ffffff !important;
    --border-color: rgba(0,0,0,.2) !important;
}

@media (max-width: 1024px)
{
    .no-resp {display: none !important;}
    .only-resp {display: block !important;}
    .tb-item-no-resp {display: none !important;}
    .admin-section .alert {top: 20%;}
}

@media (max-width: 820px)
{
    body {font-size: 12px;}
    table.dataTable td {font-size: 12px;}
}

@media (max-width: 500px)
{
    .tb-item-no-mobile {display: none !important;}
    h5 {font-size: 14px;}
    .admin-section .dashboard {width: 300px;height: 300px;}
    .form-element {min-height: 50px;}
    .form-element label span {top: 4px;}
    .form-element input,.form-element select {height: 30px;font-size: 12px;}
    .form-element button {font-size: 12px;}
    .form-element .eye {top: 28px;}
    .form-btn {font-size: 12px;margin-top: 10px;}
    .dt-buttons button {margin: 10px;font-size: 12px;}
    div.dataTables_wrapper div.dataTables_filter {float: unset;}
    div.dataTables_wrapper div.dataTables_filter input {font-size: 12px;}
    table.dataTable {margin: 20px 0 !important;}
    table.dataTable th,
    table.dataTable td{padding: 5px;}
    div.dataTables_wrapper div.dataTables_paginate ul.pagination li a {font-size: 10px !important;}
    div.dataTables_wrapper div.dataTables_length label select {font-size: 12px !important;margin-bottom: 20px;}
    .admin-section .alert {top: 10%;}
}


/*-------------------- LOGIN PAGE ----------------------------------------------------------------------*/

@media (max-width: 1200px)
{
    .login-container .logo {margin-left: 25%;}
    .login-container .login-form {margin-left: 25%;}
}

@media (max-width: 820px)
{
    .login-container .logo {width: 70%;margin-left: 15%;}
    .login-container .login-form {width: 70%;margin-left: 15%;}
}

@media (max-width: 500px)
{
    .login-container .logo {width: 90%;margin-left: 5%;}
    .login-container .login-form {width: 90%;margin-left: 5%;padding: 50px 20px;text-align: center}
}





/*-------------------- SIDE BAR ----------------------------------------------------------------------*/

@media (max-width: 1024px)
{
    .side-bar {left: -280px;box-shadow: 2px 2px 8px rgba(0,0,0,.1);z-index: 13;}
}

@media (max-width: 820px)
{
    .side-bar {width: 200px;}
    .side-bar .user-area .user-avatar {width: 40px;height: 40px;border-radius: 20px;}
    .side-bar .user-area img {width: 20px;height: 20px;}
    .side-bar .user-area h2 {font-size: 12px;margin: 0;}
    .side-bar .user-area button {font-size: 12px;}
    .side-bar .user-area .dropdown-menu {top: 5px !important;left: 0px !important;padding: 20px 10px;min-width: 120px;}
    .side-bar .user-area .dropdown-menu a {padding: 5px 0px;font-size: 12px;}
    .side-bar .user-area .dropdown-menu a i {margin-right: 5px;}
    .side-bar .menu-area .menu-title {height: 30px;}
    .side-bar .menu-area .menu-title h2 {font-size: 12px;}
    .side-bar .menu-area .menu-items ul .menu-item {width: 100%;min-height: 40px;margin-bottom: 10px;}
    .side-bar .menu-area .menu-items ul .menu-item span {right: 10px;font-size: 10px;top: 12px;}
    .side-bar .menu-area .menu-items ul .menu-item a {height: 40px;padding: 10px 5px;font-size: 12px;}
    .side-bar .menu-area .menu-items ul .menu-item a span {font-size: 12px;margin-left: 5px;}
    .side-bar .menu-area .menu-items ul li .sub-menu {padding: 40px 0 0 10px;height: 40px;}
    .side-bar .menu-area .menu-items .sub-menu .sub-menu-item {width: 150px;margin-bottom: 10px;}
    .side-bar .menu-area .menu-items .sub-menu .sub-menu-item a {font-size: 10px;padding: 0;line-height: 20px;}
    .side-bar .menu-area .menu-items ul li a i {margin-right: 2px;}
}





/*-------------------- TOP BAR ----------------------------------------------------------------------*/

@media (max-width: 1024px)
{
    .top-bar {padding: 0 35px;}
    .top-bar .top-right.only-resp {display: flex !important;}
    .top-bar .notifications {width: fit-content;}
}

@media (max-width: 500px)
{
    .top-bar {padding: 0 10px;}
    .top-bar h2 {font-size:12px;}
    .top-bar h2 span i {margin-right: 1px;font-size: 20px;}
    .top-bar h2 img {width: 100px;}
    .top-bar .top-left h2 {display: flex;align-items: center;justify-content: center;}
    .top-bar .top-right i {margin-right: 0px;margin-top: 4px;}
    .top-bar .top-right input {font-size: 11px;width: 100px;}
    .top-bar .results {right: 5px;}
    .top-bar .notifications .not {width: 7px;height: 7px;right: -6px;}
    .top-bar .notifications .content {width: 300px;right: -140px;max-height: 400px;}
    .top-bar .notifications .content .item {font-size: 10px}
    .top-bar .notifications .content .item.first {height: 50px;}
    .top-bar .notifications .content .notification-item .text{padding: 0 15px;}
}






/*-------------------- ADMIN SECTION ----------------------------------------------------------------------*/


@media(max-width: 1024px)
{
    .admin-section {padding: 100px 35px 75px;}
    .admin-section .main-content .edit-img {margin-bottom: 50px;}
}

@media(max-width: 820px)
{
    .admin-section .alert {padding: 75px;}
    .admin-section .alert:after {opacity: 1;}
    .admin-section .section-title h2 {font-size: 16px;}
    .admin-section .main-content {margin-top: 20px;}
    .admin-section .main-content .edit-img img {width: 80%;margin-left: 10%;}
    .admin-section .main-content .content-title h2 {font-size: 16px;}
    .admin-section .main-content .content-button a {font-size: 12px;}
    .admin-section .main-content .content-button a:hover {background: var(--primary-color);color: var(--white-color);border-color: var(--primary-color);}
    .admin-section .main-content .content-title p {font-size: 12px;}
    .admin-section .main-content .content .nav-tabs button {font-size: 14px;}
    .admin-section .main-content .content .tab-content {padding: 20px 10px;}
}

@media(max-width: 500px)
{
    .admin-section {padding: 100px 20px 75px}
    .admin-section .error-text {bottom: -12px;font-size: 8px;}
    .admin-section .alert {width: 300px; padding: 75px 20px;text-align: center;}
    .admin-section .alert:after {opacity: 1;}
    .admin-section .section-title h2 {font-size: 16px;}
    .admin-section .main-content {margin-top: 20px;}
    .admin-section .main-content .edit-img {margin-bottom: 30px;}
    .admin-section .main-content .edit-img img {width: 100%;margin-left: 0%;}
    .admin-section .main-content .content-title {padding: 10px}
    .admin-section .main-content .content-title h2 {font-size: 12px;}
    .admin-section .main-content .content-button {padding: 10px;}
    .admin-section .main-content .content-button a {font-size: 12px;}
    .admin-section .main-content .content-title p {font-size: 12px;margin: 0;}
    .admin-section .main-content .content {padding: 10px;}
    .admin-section .main-content .content .nav-tabs button {font-size: 10px;}
    .admin-section .main-content .content .nav-tabs.tb-2 button {width: 50%;font-size: 12px;}
    .admin-section .main-content .content .nav-tabs.tb-3 button {width: 33%;font-size: 12px;}
    .admin-section .main-content .content .tab-content {padding: 10px;}
    .admin-section .main-content .content .sub-content {margin: 20px 0;padding: 20px;}
    .note-editor.note-airframe
    .note-editing-area
    .note-editable,
    .note-editor.note-frame
    .note-editing-area .note-editable {padding: 10px !important;}
    .note-editor button {font-size: 10px !important;}
}



/*-------------------- PATIENT SECTION ----------------------------------------------------------------------*/

@media (max-width: 1440px) {
    .patient-page .patient.patient-info .bar {padding: 22px 0;}
    .patient-page .patient.patient-info .bar div {width: 46px;height: 46px;line-height: 46px;}
    .patient-page .patient.patient-info .bar div a {font-size: 16px;}
}

@media (max-width: 1200px) {
    .patient-page .patient.patient-info .bar {padding: 27px 0;}
    .patient-page .patient.patient-info .bar div:first-child {width: 80px;}
    .patient-page .patient.patient-info .bar div {width: 36px;height: 36px;line-height: 36px;}
    .patient-page .patient.patient-info .bar div a {font-size: 14px;}
}

@media (max-width: 1024px)
{
    .patient-page .patient.patient-info {border-right: none;}
    .patient-page .patient.patient-info .bar {justify-content: flex-start;padding-left: 10px;}
    .patient-page .patient.patient-info .bar div {margin: 0 10px;}
    .patient-page .patient.patient-info .bar div:hover p {display: none;}
    .patient-page .patient.patient-info .content .bottom-content .lead .status,
    .patient-page .patient.patient-info .content .bottom-content .lead .source {margin: 10px;}
    .patient-page .patient.patient-info .content {display: flex;justify-content: space-evenly;align-items: center;}
    .patient-page .patient.patient-info .content .top-content {padding: 0;border-bottom: none;}
    .patient-page .patient.patient-info .content .bottom-content .lead h5{width: max-content;margin: 0 auto 10px;}
    .patient-page .patient.patient-info .delete-pat {margin-top: 20px;}
    .patient-page .patient.patient-data {padding-left: 10px;}
}

@media (max-width: 820px)
{
    .patient-page .patient.patient-info .content {display: flex;justify-content: space-around;align-items: center;}
    .patient-page .patient.patient-data .ex-op-menu {top: 73px;}
    .patient-page .patient.patient-data nav .nav-tabs {height: auto;padding-bottom: 20px;padding-left: 10px;}
    .patient-page .patient.patient-data nav .nav-tabs button {padding-bottom: 6px;}
    .patient-page .patient.patient-data nav .nav-tabs button.active {background: var(--primary-color);color: var(--white-color);border-radius: 5px}
}

@media (max-width: 500px)
{
    .patient-page .patient.patient-info .bar {padding: 20px 0;}
    .patient-page .patient.patient-info .content {flex-direction: column;}
    .patient-page .patient.patient-info .content .top-content {width: 100%;padding-bottom: 20px;border-bottom: 1px solid rgba(0,0,0,.2);}
    .patient-page .patient.patient-info .content .bottom-content {width: 100%;}
    .patient-page .patient.patient-data .ex-op-menu {right: -10px;top: 140px;}
    .patient-page .patient.patient-data nav .nav-tabs button {padding-bottom: 6px;width: 50%;}
    .fc .fc-toolbar {flex-direction: column;}
    .fc .fc-toolbar-title {margin: 5px 0;}
    .fc .fc-daygrid-day-frame {padding: 0;overflow: hidden;}
    #calendar {padding: 10px;height:max-content;}
    .patient-page .patient.patient-data .file p {font-size: 10px;}
}