/* general */
html {margin: 0; padding: 0; scroll-behavior: smooth;}
body {font: normal 0.95em Arial, sans-serif; direction: rtl; margin: 0; padding: 0;}

@view-transition {
  navigation: auto;
}

th {text-align: right; background: #FFDDBC; padding: 2px 5px; font-weight: bold;}
ul {list-style-image: url('/media/bullet.gif'); padding: 0; margin: 5px 15px}
li {margin: 2px 0;}

h2 {color: #704A7C; font: normal 1.2em Arial, sans-serif; margin: 0}
h3 {color: #704A7C; font: bold 1em Arial, sans-serif; margin: 0; }
h3 em {font: bold 0.8em Arial, sans-serif; color: black}

tr {transition: 0.3s all;}
td {transition: 0.5s all;}

details {transition: 0.5s all;}
details summary {padding: 5px; color: #704A7C; font: bold 1em Arial, sans-serif; margin: 0; cursor: pointer;}
details summary:hover {color: orange;} 

time {font-size: 91%;}

a {color: #1770B0; transition: 0.3s all;}
a:hover {color: #F58B21}

/* input {width: 120px; border-style: none; border: 1px solid #7F9DB9} */
input {border: 1px solid #7F9DB9; transition: 0.3s all;}
input[readonly] {background-color: lightgray;}
input:hover, input:active, input:focus {background-color: lightyellow;}

.c-main {background: #FAEAFF; border-bottom: 1px solid #704A7C; padding: 1% 1%;} 
.c-main-content {max-width: 1300px; margin: 0 auto;}

.c-tabs {margin: 10px 0 0 0; padding: 0; border-bottom: 1px solid #704A7C;}
.c-tabs ul {list-style-type: none; list-style-image: none; margin: 0; padding: 0;}
.c-tabs ul li {display: inline-block; margin: 0 20px 0 0; padding: 1px 10px 0 10px; border-radius: 5px 5px 0 0;}
.c-tabs ul li[selected] {padding: 1px 13px 0 13px; font-weight: bold; border-left: 1px solid #704A7C; border-top:1px solid #704A7C; border-right:1px solid #704A7C; background-color: palegoldenrod;}
.c-tabs ul li a {text-decoration: none;}
.c-tabs ul li a[disabled] {color:grey;}

.c-warning {border: 1px solid #444; background-color: lightsalmon; text-align: center; padding: 1%; width: 80%; margin: 0 auto; border-radius: 5px;}

.c-box {background: white; border: 1px solid #704A7C; display: flex; justify-content: space-between; align-items: stretch; padding: 10px; }
.c-box {flex-wrap: wrap; align-items: flex-start;}
.c-box > details {margin: 10px; border-radius: 5px;}
.c-box > details:hover {background-color: blanchedalmond;}

.c-just-box {background: white; border: 1px solid #704A7C; padding: 10px;}

.c-date {width: 110px; padding: 0 2px;}

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

/* <form class="c-box-form"> <details> <ul> <li> <label> <input> */
.c-box-form {display: flex; flex-wrap: wrap; padding: 1%; border: 1px solid #555; background-color: white; justify-content: space-between;}
.c-box-form details {border-radius: 5px; padding: 0 8px;}
.c-box-form details:hover {background-color: wheat;}
.c-box-form details label {width: 140px; display: inline-block;}
.c-box-form details ul {padding: 0 10px 0 0; margin: 0;}
.c-box-form details ul li {padding: 2px 8px; border-radius: 5px; transition: 0.3s all;}
.c-box-form details ul li:hover,
.c-box-form details ul li:active,
.c-box-form details ul li:focus {background-color: beige;}
.c-box-form input, .c-box-form select {width: 140px; box-sizing: border-box;}



.c-fulltable {width: 100%; border: 1px solid #704A7C; border-collapse: collapse; background-color: white;}
.c-fulltable tr:nth-child(even) {background-color: lightgray;}
.c-fulltable tr:hover {background-color: lightsalmon;}
.c-fulltable td, .c-fulltable th {border: 1px solid #704A7C;}

.c-actions-line {width: 95%; text-align: left; padding: 2% 0;}
.c-actions-line a {text-decoration: none;}

/* under pet and client view: for "edit" and "transfer" links */
.c-edit-line {text-align: left;}

.c-delete-button {transition: 0.3s all; border: 1px solid gray; background-image: url('/icons/delete.svg'); background-repeat: no-repeat; background-size: contain; padding-left: 20px;}
.c-delete-button:hover {background-color: #ffb56c;}

.c-button {transition: 0.3s all;}
.c-button:hover {background-color: #ffb56c;}
a.c-button, input.c-button {display: inline-block; padding: 1px 15px; background-color: wheat; border: 2px solid #1770B0; border-radius: 2px; text-align: center; text-decoration: none; font-weight: bold; cursor: pointer; text-transform: capitalize;}

.c-reminders-actions > div {margin: 15px 8px;}

dialog {padding: 20px; border: 2px solid black; border-radius: 10px; box-shadow: 5px 5px 10px gray; width: 50%}
dialog iframe {border: 0;}


.c-pet-pic {height: 100px; max-width: 200px; object-fit: cover;}






.free {width: auto}
.readonly {color: gray;}
.adder {text-decoration: none; text-align: center; font-weight: bolder; font-size: 150%; color: green; padding: 0 10px;}
.remover {color: red;}
.report {font-size:12px}
.report .button {width:auto;padding: 0 4px;}

/* #entrance input[name="login"], #entrance input[name="password"] {width: 200px; font-size: 150%;} */
/* #entrance input[type="submit"] {font-size: 150%; text-transform: capitalize;} */

/* header & tabs */
/* .logo {padding: 0 5px; width: 45%} */
/* .menu {vertical-align: top} */
/* .vetter {padding: 10px 15px; direction: ltr} */

/* .tabs {list-style-type: none; list-style-image: none; margin: 0; padding: 0;}
.tabs li {display: inline-block; margin: 0 20px 0 0; padding: 1px 10px 0 10px; border-radius: 5px 5px 0 0;}
.tabs li[selected] {padding: 1px 13px 0 13px; font-weight: bold; border-left: 1px solid #704A7C; border-top:1px solid #704A7C; border-right:1px solid #704A7C; background-color: palegoldenrod;}
.tabs a {text-decoration: none;}
.tabs a[disabled] {color:grey;} */

/* .line {border-bottom: 1px solid #704A7C; clear: both} */

/* main */
/* main.main {padding: 2%;} */

/* .big {padding: 20px} */
h3 a {font: normal 0.9em Arial, sans-serif}

/* .box p.owner{padding:0;margin:0;font-size:80%;} */
/* a.button, input.button {display: inline-block; padding: 1px 15px; background-color: wheat; border: 2px solid #1770B0; border-radius: 2px; text-align: center; text-decoration: none; font-weight: bold; cursor: pointer; text-transform: capitalize;} */
/* a.next {display: block; padding: 2px; text-align: center; text-decoration: none; text-transform: capitalize;} */
.zebra {background-color: #c0c0c0}
.hover:hover{ background-color: #ffb56c !important; }
.treat {font-weight: bold;}
.notes {width: 60%}
.price {width: 60px; direction: ltr; text-align:right;}

.hour_dropdown {width:50px;}


.pet-image {float:left; height:60px;}

/* forms */
.checkbox {width: 20px !important;}
select {border-style: none; border: 1px solid #7F9DB9}
input[type="checkbox"] {width:20px;}
textarea {font: normal 0.9em Arial, sans-serif; width: 99px; border-style: none; border: 1px solid #7F9DB9}
/* .datepicker img {width: 17px; height: 20px; margin: 0 2px;} */
/* .date {width: 110px; padding: 0 2px;} */
.double {width: 200px}
.small {width: 40px}


/* .max {width: 97%} */
/* .half {width: 48.1%} */

.data {font-weight: bold; padding-left: 30px}
.check input {border: none}
.hah {border: 1px solid #7F9DB9 !important}

/* init */
#pet_edit {display: none; font: normal 0.82em Arial, sans-serif}
#client_edit {display: none; font: normal 0.82em Arial, sans-serif} 
#week {display: none}
#message, #day {width: 205px}

/* calendar */
#EndTitle {text-align: center}
.dates_container {direction: rtl; border: 1px solid #704A7C}
.orange_blue {background: #FFDDBC; border-bottom: 1px solid #704A7C; padding: 1px 3px}
.over {cursor: pointer; background: #FFDDBC}

/* patch for Mozilla
ul {margin: 0; padding: 0} */

.dialog {background-color: white;border: 1px solid blue;display: none;position: absolute;}
.non_active{text-decoration: line-through;}

/* datatable */
/* div.box table input {width:160px;margin:2px;} */
.preftable {margin-bottom: 30px;}
.preftable tr:hover {background-color: #ccc;}
.preftable input, .preftable select {width: 65%; margin: 2px;}

.report-table {border-collapse: collapse; color: #444;}
.report-table tr:hover { background-color: #ffb56c !important; }
.report-table td {padding: 5px;}
.report-table a:focus {color: black; font-weight: bolder;}
.report-table input {width: auto; min-width: 93px;}
.report-table input[type="checkbox"] {min-width: 20px;}

.show-hide {cursor: pointer;}

.c-visit-closed {color: gray;} /* visitshistory template */
.c-pet-not-active {color: gray;} /* listofpets template */
.c-pet-kennel {font-weight: bold; color: red;} /* listofpets template */
.c-pet-today {background-color: yellow !important;} /* listofpets template */

#undone_repeated_reminders_div table {color: red;}
#undone_repeated_reminders_div table td {padding: 5px;}
#recently_done_repeated_reminders_div table tr:hover, #undone_repeated_reminders_div table tr:hover {background-color: #ffb56c !important;}
#undone_repeated_reminders_div li {margin-top: 4px; }

/* colors */
.c-routine {color: green;} 
.c-exams {color: green;}
.c-avchana {color: green;}
.c-medical {color: green;}
.c-chirurgic {color: green;}
.c-labexams {color: green;}
.c-tfasim {color: black;}
.c-products {color: green;}
.c-remarks {color: black;}
.c-training {color: blue;} 
.c-maintenance {color: black;}
.c-operational {color: red;}
.c-other {color: black;}

.tresults {font-size: 90%;}
.tresults thead th {padding: 5px; font-size: 95%;}
.tresults tbody tr:hover {background-color: #ccc;}
.tresults tr:nth-child(even) {background-color: #f2f2f2;}

.page-break {page-break-after: always;}

.c-pets-matrix {max-width: 100%;}
.c-pets-matrix article {border: 1px solid black; background-color: white; padding: 0; margin: 0;}
.c-pets-matrix article > div {width: 100%; text-align: center; display: flex; justify-content: space-evenly; border-bottom: 1px solid black;  padding: 0; margin: 0;}
.c-pets-matrix article > div > span {width: 100%; border: 1px solid gray;  padding: 10px; margin: 0; transition: 0.3s all;}
.c-pets-matrix article > div > span:hover {background-color: beige;}
.c-pets-matrix form {padding: 10px; margin: 0;}


#errorMissing {text-transform: capitalize;}
#total_price {border: 1px solid black; font-size: 130%; padding: 10px; margin: 10px; background-color: white;}

footer {text-align: center; margin: 40px; font-size: 90%;}

.c-sm-icon {height: 14px; margin: 0 3px;}
.c-sm-icon:hover {cursor: pointer; background-color: yellow;}

/* Remove default link styling on desktop if desired */
.c-phone-link {
    text-decoration: none;
    color: inherit;
}

/* last clients lastclients */
#id-last-clients {
    display: none;
    position: fixed;
    bottom: 100vh;
    left: 0;
    width: 100%;
    background-color: #f1f1f1;
    padding: 10px;
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1);
    transition: 0.3s all;
}

#id-last-clients-list {
    margin: 5px auto;
    width: 40%;
    min-width: 250px;
    text-align: right;
}

#id-last-clients li {
    margin: 20px 0;
}

/* Add an icon or underline only on small screens */
@media (max-width: 768px) {
    .c-phone-link {
        color: #007bff;
        text-decoration: underline;
    }
    .c-phone-link::before {
        content: "📞 ";
    }
}