html, body {width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Barlow', sans-serif; color: #313733; background-color: #FFF;}
header {height: 8%; text-align: center; border-bottom: 1px solid #C2C5C3; display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 0 12px; background: #FFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);}
header h1 {margin: 0; padding: 0; text-align: center; font-family: 'Barlow Semi Condensed', sans-serif; font-size: 105%; font-weight: normal;}
header h2 {margin: 0; padding: 0; text-align: center; font-size: 75%; font-weight: normal;}
.c-header-border-img { width: 30px; height: 30px; border: 1px solid #E1E2DD; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.c-header-border-img:hover { background: #F0F0F0; }
a {color: #313733;}

.c-main {width: 100%; height: 79%; overflow-x: hidden;}
.c-win {width: 500%; height: 100%; background-color: white; display: flex; transition: 0.7s all; transform: translateX(-20%);}
.c-win > section {width: 100%; height: 100%; display: inline-block; overflow-y: scroll;overflow-x: hidden;} /* */

.c-main-nav {display: flex; height: 9%; text-align: center; align-items: center; justify-content: space-evenly; font-size: 75%; padding-top: 9px; margin: 0; border-top: 1px solid #F4F4F4;}
.c-main-nav > a {width: 32%; padding: 4px; margin: 0; text-decoration: none; color: #313733; border-bottom: 4px solid transparent; outline: none; border-radius: 5%; transition: 0.5s all;}
.c-main-nav > a:hover, .c-main-nav > a:focus {font-weight: 700;}

.c-settings-container { padding: 14px; }
.c-settings-title-container { display: flex; align-items: center; gap: 12px; }
.c-settings-title { color: #000; font-size: 18px; font-weight: 700; }
.c-settings-logout { display: flex; padding: 6px 12px; justify-content: center; align-items: center; gap: 6px; border-radius: 20px; background: #CD0000; color: #FFF; font-size: 12px; font-weight: 700; text-decoration: none; text-align: center; }
.c-settings-logout:hover { background: #B20000; }
.c-settings-subtitle { color: #000; font-size: 14px; font-weight: 700; text-transform: uppercase; margin-top: 24px; margin-bottom: 12px;}
.c-settings-data-container { display: flex; padding: 16px; flex-direction: column; border-radius: 4px; border: 1px solid #E1E2DD; }
.c-settings-data-content { display: flex; margin-bottom: 16px; align-items: center; }
.c-settings-coordinates-container { display: flex; justify-content:space-between; }
.c-settings-coordinates-item { display: flex; flex-direction: column; width: 45%; }
.c-settings-data-label { color:#595959; width: 40%; font-size: 11px; }
.c-settings-data-info { font-size: 12px; color:#000; margin-bottom: 2px; word-wrap: break-word; }
.c-button-settings-grey { background: #E1E2DD; width: fit-content; text-decoration:none; padding:6px 12px; font-family: 'Barlow'; color: #313733; }
.c-button-settings-grey:hover { background: #C8C9C5; }
.c-settings-data-input { font-size: 12px; margin-bottom: 16px; padding: 6px 0px 6px 6px; }
.c-settings-plan-item { display: flex; flex-direction: column; width: 45%; flex: 1; max-width: calc(33.33% - 12px); }
.c-settings-data-devtools { color: #313733; font-size: 12px; font-weight: 700; }

#id-clients {}
.c-clients-list {list-style: none; padding: 0; margin: 0; font-size: 12px; }
.c-clients-list li {padding: 12px 0; list-style: none; text-transform: capitalize; transition: 0.3s all; overflow: hidden; margin-bottom: 4px; border-radius: 4px; background-color: #F4F4F4;} /* list-style: square inside url("sqpurple.gif") */
.c-clients-list li:hover {background-color: lightgray;}
.c-clients-list li a {text-decoration: none; padding-left: 4px;}
.c-clients-list li a.c-due-date {color: red; font-weight: bold;}
.c-classification-line-diamond {border-left: 4px solid #F2EDDA; background: url("../images/range_icon_diamond.svg") no-repeat 98%;}
.c-classification-line-gold {border-left: 4px solid #F8EFB9; background: url("../images/range_icon_gold.svg") no-repeat 98%;}
.c-classification-line-silver {border-left: 4px solid #D5D8D6; background: url("../images/range_icon_silver.svg") no-repeat 98%;}
.c-classification-line-bronze {border-left: 4px solid #D9BA9F; background: url("../images/range_icon_bronze.svg") no-repeat 98%;}
.c-classification-line-prospect {border-left: 4px solid transparent; background: url("../images/range_icon_prospect.svg") no-repeat 98%;}


#id-plan {}
#id-plan details {padding-bottom: 4px; }
#id-plan summary {padding: 10px; border-radius: 4px; background: #F4F4F4; color: #000; font-size: 14px; line-height: 20px; }
#id-plan summary span {float: right;}
#id-plan ul {padding: 0; margin: 0;}
#id-plan li {padding: 0; margin: 0;}
.c-planned-clients { font-size: 12px; padding: 0px 4px; border-radius: 4px; background: #E1E2DD; }
.c-button-plan { border-radius: 20px;  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; line-height: 20px; border-width: 0px; cursor: pointer; }
.c-button-plan-black { background: #010912; padding: 6px 10px; color: #F5F5F5; border: 1px solid;}
.c-button-plan-black:hover { background: #000408; }
.c-button-plan-black input[type="checkbox"] { accent-color: #30E49D; }
.c-button-plan-white { background: #FFF; padding: 6px; color: #313733; border: 1px solid #313733; }
.c-button-plan-white:hover { background: #F0F0F0; }
.c-button-plan-green { background: #30E49D; padding: 6px 12px; color: #313733; border: none; }
.c-button-plan-green:hover { background: #28C485; }
.c-button-plan-grey { background: #E1E2DD;	padding: 3px 10px; color: #313733; }
.c-button-plan-grey:hover { background: #C8C9C5; }
.c-button-plan-red { background: #CD0000;	padding: 6px 10px; color: #F5F5F5; }
.c-button-plan-container { display: flex; padding: 10px 0px 10px 10px; justify-content: flex-start; align-items: flex-start; gap: 8px; }
.c-client-plan-list { padding: 10px; border-radius: 4px; background: #FFF; margin: 20px 10px; color: #000; font-size: 14px; font-weight: 700; position: relative; }
.c-box-menu-content { display: none; padding: .5rem 1rem; border: 1px solid #E1E2DD; border-radius: 4px; font-size: 12px; white-space: nowrap; width: fit-content; margin-left: auto; flex-direction: column;  background: #FFF; position: absolute; z-index: 1; right: 10px; }
.c-box-menu-content > *:not(:last-child) { margin-bottom: 10px; }
.c-box-menu-content a { text-decoration: none; font-weight: 400; }
.c-client-plan-lunch { display: flex; align-items: center; justify-content: center; gap: 15px; font-weight: bold; }
.c-client-plan-info { display: flex; flex-direction: row; justify-content: space-between; }
.c-plan-client-container { background: #F4F4F4; padding-bottom: 15px; }
.c-client-plan {width: 100%; border-collapse: collapse;}
.c-client-plan td, .c-client-plan th {padding: 5px; border: 1px solid #C2C5C3; font-weight: normal; vertical-align: middle; max-width: 100vw; }
.c-client-plan th {background: url("../images/meeting_location_pin.svg") no-repeat 97%;}
.c-client-plan th a.c-client-plan-name {position: relative; bottom: 5px; line-height: 30px;padding: 2px;}
.c-client-plan th a.c-virtual-visit-name {padding-left: 25px; background: url('../images/call.svg') left center no-repeat;}
.c-client-plan a {text-decoration: none; color: #313733;}
.c-client-plan input[type="range"] {width: 40%; display: inline-block;}
.c-client-plan input[type="range"] + input[type="range"] {position: relative; left: -6px;}
.c-client-plan small {color: #949695;}
.c-client-plan a img {height: 24px; margin-right: 10px;}
.c-client-plan button {transition: 0.3s all; border: 1px solid #258320; background-color: lightgray; color: #666; box-shadow: inset 0 1px 1px 0 gray; padding: 3px 10px; text-decoration: none; font-size: 90%;}
.c-client-plan button:hover {background-color: gray;}
.c-client-plan button img {padding: 0 2px; position: relative; top: 2px;}
.c-client-plan a[href^="tel"] {color: green; text-decoration: underline;}
.c-client-plan a[href^="tel"] img {height: 15px;}
.c-plan-classification-diamond {color: #DACBB0; background: url("../images/colourd_range_icon_diamond.svg") no-repeat 95%;}
.c-plan-classification-gold {color: #BFAC30; background: url("../images/colourd_range_icon_gold.svg") no-repeat 95%;}
.c-plan-classification-silver {color: gray; background: url("../images/colourd_range_icon_silver.svg") no-repeat 95%;}
.c-plan-classification-bronze {color: gray; background: url("../images/colourd_range_icon_bronze.svg") no-repeat 95%;}
.c-inside-message {text-align: center; margin: 20px 15px; padding: 17px 7px;}
.c-inside-message h4 {padding: 0; margin: 0;}
.c-inside-message > div {display: flex; justify-content: space-evenly; margin-top: 14px; font-size: 80%;}
.c-inside-message > div img {height: 25px;}
.c-inside-message > div a {padding: 7px; border: 1px solid transparent; border-radius: 3px;}
.c-inside-message > div a:hover, .c-inside-message > div a:focus, .c-inside-message > div a:active {background-color: #ddd;}

.c-plans { display: flex;flex-wrap: wrap;justify-content: space-evenly;gap: 10px;margin: 10px 14px;padding: 8px;box-shadow: 0px 0px 40px 0px #DBDBDB;border-radius: 20px;font-size: 12px;font-weight: 700; }
.c-plans-item { flex-basis: 39%; text-align: center; padding: 12px; border-radius: 20px; background: #E1E2DD;}
.c-plans-item:first-child { background: #30E49D; }
.c-plans-item img { height: 24px; }
.c-plans-item a { text-decoration: none; }
.c-plans-item span { display: block; }
.c-plan-client-details span { font-size: 12px; font-weight: 400; margin-bottom: 10px; }
.c-plan-client-details-container { display: flex; flex-direction: column; margin-top: 5px; }
#id-all-plan { margin: 20px 15px; }

#id-export-plan {display: none;}
.c-list-plans {text-align: center;}
.c-list-plans caption, .c-list-plans th {font-weight: bold;}
.c-list-plans td {padding: 5px 2px;}

.c-table-plan-summary { border-collapse: collapse; }
.c-table-plan-summary td { border-top:1px solid #e0e0e0; padding: 4px; }

.c-sleep {border-collapse: collapse; padding: 0; margin: 0 auto; width: 90%;}
.c-sleep caption {color: #000; font-size: 14px; font-weight: 700; text-transform: uppercase; margin-bottom: 16px; }
.c-sleep thead { font-size: 12px; }
.c-sleep tbody { font-size: 14px; }
.c-sleep th {font-weight: normal; color: #999;}
.c-sleep td {width: 14%; height: 30px; margin: 2px; text-align: center; border-radius: 10px; transition: all 0.5s;}
.c-sleep td.on   {background-color: lightgreen;}
.c-sleep td.area {border: 1px solid gray; border-radius: 10px;}

.c-calendar { border-radius: 4px; border: 1px solid #E1E2DD; background: var(--Primary-White, #FFF); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); }
#id-sleep td.today { font-weight: 700; color: #000; }

.c-statistics-container { padding: 10px; border-radius: 4px; background: #FFF; margin-top: 10px; color: #000; }
.c-settings-title { font-size: 14px; font-weight: 700; font-size: 18px; }
.c-statistics-item-subtitle { font-size: 14px; font-weight: 500; margin-bottom: 10px; margin-top: 20px; }

.c-statistics-table {border-collapse: collapse; font-size: 12px; font-weight: 500; border: 1px solid #E1E2DD;}
.c-statistics-table td {padding: 10px; }
.c-statistics-table th{background-color: #E1E2DD; font-weight: 500; }
.c-statistics-item-summary { list-style: none; color: #000; font-size: 14px; display: flex; }
.c-statistics-item-summary::-webkit-details-marker { display: none; }
.c-statistics-item-summary-img { vertical-align: text-bottom; margin-right: 6px; }

.c-statistics-activity-table {border-collapse: collapse; font-size: 12px; font-weight: 500; border: 1px solid #E1E2DD; line-height: 16px; font-size: 11px; }
.c-statistics-activity-table tr:nth-child(even){background-color: #f2f2f2;}
.c-statistics-activity-table th{background-color: #E1E2DD; font-weight: 500; }
.c-statistics-update-container { display: flex; align-items: center; gap: 12px; font-size: 11px; margin: 10px 0; justify-content: space-between; }

.c-filter-container { padding: 12px; height: 15px; overflow: hidden; transition: 0.5s all; font-size: 12px;}

dialog {position: fixed; width: 100%; height: 80%; overflow-y: scroll; left: 0; top: -100%; display: block; background: black; box-sizing: border-box; margin: 0; border: 0; color: white; transition: 0.5s all; font-size: 90%;}
dialog table {width: 100%;}
dialog caption {font-weight: bolder; margin-bottom: 5px;}
dialog input {font-size: 100%;}
dialog input:read-only, dialog select:read-only, dialog textarea:read-only {border-color: lightblue;}
.c-dialog-photos { position: relative; overflow: hidden; }
.c-dialog-photos img {/*height: 100px; display: block;*/ margin: 5px auto;}
.c-dialog-button {border: 1px solid white; background-color: black; padding: 4px 16px; color: white; transition: 0.2s all; cursor: pointer;}
.c-dialog-button-delete {border: 1px solid white; background-color: black; color: white; transition: 0.2s all; padding: 4px;}
.c-dialog-button.c-save {background-color: green;}
.c-dialog-button.c-cancel {background-color: red;}
.c-dialog-button:hover {background-color: gray;}
.c-classification {text-transform: capitalize; width: 100%; display: inline-block;}
.c-navigator {width: 100%; display: inline-block; background: url('../images/meeting_location_pin.svg') no-repeat 95%;}
.c-navigator:hover {color: gray;}
.c-whatsapp {width: 70%; display: inline-block; background: url('../images/icons/whatsapp.svg') no-repeat 95%; text-decoration: none;}
.c-dialog-button-close {text-decoration: none; font-weight: bolder; position: fixed; right: 20px; background-color: black; border: 1px solid gray; border-radius: 20px; padding: 2px 10px; font-size: 120%; z-index: 2;}
.c-dialog-button-close:hover {background-color: grey;}

.c-inside-balloon .c-classification {width: 90%;}
.c-inside-balloon-title { margin: 4px 0 8px 0; color: #000; font-family: 'Barlow'; font-size: 14px; line-height: 16px; }
.c-inside-balloon-container { display: flex; margin-bottom: 4px; }
.c-inside-balloon-text { display: flex; flex-direction: column; gap: 4px; font-family: 'Barlow'; line-height: 16px;}
.c-inside-balloon-data-info { font-size: 12px; color: #000; width: 70%; }
.c-inside-balloon-data-label { font-size: 11px; width: 50%; color: #595959; }
.c-inside-balloon-classification-text { color: #000; font-size: 12px; line-height: 20px; padding-left: 8px; }

#id-add-photo { display: none;}

/* activities buttons */
/* .c-activity-button {} */
.c-client-activities-container {padding: 5px 0; }
.c-client-activities {display: flex; flex-wrap: wrap; overflow: hidden; transition: 0.4s all; flex-direction: column; } /* container for all activities buttons */
.c-activity-made {color: green !important;} /* after the user clicks the button and complete activity we want to sign it was made */
.c-close {display: inline-block; margin-right: 5%; text-decoration: none; border-radius: 30px; background-color: #ddd; color: #333; padding: 2px 7px; transition: 0.3s all;position: absolute;right: 0;} /*close button of activity*/
.c-close:hover, .c-close:focus {background-color: black; color: white;}
.c-activity-sync-dialog {text-align: center;margin-top: 50%;}
.c-activity-sync-dialog-title {font-size: 1.5em;}
/* activity dialog*/
#id-activity-dialog {overflow: hidden; height: 100%;}

#id-activity-loader{text-align: center;margin-top: 5vh;}


/* visit wizard (new flow) */
.c-client-outer-container {width: 100%; overflow: hidden;}
.c-client-check-container {width: 600%; box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: nowrap;}
.c-client-check-container > section {width: 100%; box-sizing: border-box; transition: all 0.3s; text-align: center; padding: 20px 0; display: flex; flex-direction: column; justify-content: space-between;}
.c-client-check-container .c-activity-button {margin: 5% 0; width: 80%; border: none; padding: 6px 12px; border-radius: 20px; background-color: #E1E2DD; color: #313733; font-size: 12px; font-weight: 700; }
.c-activity-button:hover { cursor: pointer; background-color: grey; }
.c-client-check-container .c-activity-button:first-of-type {margin-top: 18px;}
.c-client-check-container .c-obligatory-button {font-weight: 600;}


.c-offline-container {font-size: 1.1em; height: 210px;}
.c-offline-container-hide {height: 0px;}
#id-client-dialog-visitwizard.c-offline-container-hide {height: 22vh;}
#id-client-dialog-visitwizard {display: contents;}
.c-offline-container button {transition: 0.3s all;
    border: 1px solid #258320;
    background-color: #d3d3d3;
    color: #666666;
    box-shadow: inset 0 1px 1px 0 grey;
    padding: 8px 10px;
    text-decoration: none;
	margin: 1px;
    max-width: 100%;
    border-radius: 5px;}

textarea[name="remark"]{ height: 10vh;}
.c-disclaimer-content {width: 100%; min-height: 100vh;}

.c-slide { width: 100%; height: 100%; flex: 1 0 100%; }
.c-relative-image {display: flex; flex-direction: column; justify-content: center; width: 100px; margin: 0 auto;}
.c-slide-text-content { display: flex; align-items: center; color: #595959; font-size: 11px; padding: 0px 20px; justify-content: center; gap: 10px; margin-bottom: 10px; }
/* Pricing survey */
#id-pricing-survey-dialog  {max-width: 500px; margin: 0 auto; overflow-y: scroll; overflow-y: hidden;}
.c-container-pricing-survey{display: flex; flex-direction: row;}
#id-pricing-survey{overflow-x: hidden; padding: 1vw;}
.c-container-pricing-survey section {min-width: 100vw; max-height: 90vh; overflow-y: scroll;}
#id-container-checkbox {width: 80%;}
#id-container-checkbox label { font-size: 11px; display: flex; align-items: center;}
#id-container-checkbox input[type="checkbox"] { accent-color: #30E49D; }

.send-pricing-survey{float: right; border: 1px solid white; background-color: black; padding: 4px 16px; color: white; transition: 0.2s all; margin: 10px; border-radius: 5px;}
#id-send-pricing-survey-div{float: right;}

#id-popup-pricing-survey{background-color: white; position: absolute; top: 5px; height: 100%; width: 100%; z-index: 1;}
#id-popup-pricing-survey h2{text-align: center;}
#id-popup-pricing-survey h5{font-size: 1em; padding-left: 10px; max-width: 300px;}

#id-view-open-visit{position: absolute; top: -6px; right: -20px; margin: 0px; background-color: #ed3024;border-radius: 50%; padding: 1px 5px; color: #e1e4e2; min-width: 10px;}

.c-icon-logo-name{max-width: 100px; cursor: pointer;}
.c-icon-img{margin: 0px 4px;}

.c-highlight-image {border-left: 4px solid #F2EDDA !important; background: url("../images/bulb.png") no-repeat 90%, url("../images/range_icon_diamond.svg") no-repeat 98%,#fcfc74 !important; background-size: 17px 17px !important;}

.c-clients-viewed-title{ display: flex; justify-content: space-between;}
.c-clients-viewed-btn{ margin-right: 2%; background: url("../images/trash.svg") no-repeat 100%; background-size: 17px 17px; width: 20px; border: none; cursor: pointer;};

.c-suggestion-item:hover{ color: dodgerblue; cursor: pointer; }

.c-login-button{ display: flex; justify-content: center; }

.c-login-form input, .c-login-form select { width: 100%; box-sizing: border-box; }
.c-login-title-container { display: flex; gap: 8px; margin-bottom: 20px; }
.c-login-title-text-container { display: flex; flex-direction:column; align-items:start; }
.c-login-title { color: #000; font-size: 30px; margin:0; }
.c-login-form-label { color: #000; font-size: 12px; line-height: 20px; }
.c-login-form-input { margin-top:2px; font-size: 12px; line-height:20px; padding: 8px 10px; margin-bottom: 18px; border-radius: 4px; border: 1px solid #9E9E9E; }
.c-login-button-divider { display: flex; align-items: center; width: 100%; text-align: center; margin: 10px 0; color: #333; }
.c-login-button-divider hr { flex-grow: 1; height: 1px; background: #E1E2DD; border: none; margin: 0 10px; }
.c-login-form-password-container { margin-bottom:18px; position: relative; }
.c-login-form-password-forget { background: transparent; border: none; text-decoration: underline; padding: 0; font-size: 12px; line-height: 20px; font-family: 'Barlow', sans-serif; color: #000; }
.c-login-show-password { cursor: pointer; border: none; background-color: transparent; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
.c-login-show-password img { vertical-align: middle; }

.c-login-settings-error { color: brown; text-align: center;  margin: 15px 0;}
.c-clients-near-dialog-title{ font-weight: bold; display: flex; justify-content: center; }

.c-disable-select { pointer-events: none; background-color: #cccccc; }

.c-details-title:hover { cursor: pointer; color: gray; }

.c-btn-days { display: flex; gap: 5px; margin-bottom: 3px; }
.c-btn-days input[type="checkbox"] { width: 16px; height: 16px; }
.c-btn-days input[type="checkbox"] { accent-color: #30E49D; }
.c-btn-days:hover { cursor: pointer; }

.c-slide-arrow { position: absolute; display: flex;	top: 0;	bottom: 0; margin: auto; height: 4rem; background: transparent; border: none;	width: 2rem; font-size: 3rem; padding: 0; cursor: pointer; opacity: 0.5; transition: opacity 100ms; }
.c-slide-arrow-prev { left: 0; padding-left: 0.25rem; border-radius: 0 2rem 2rem 0; }
.c-slide-arrow-next { right: 0; padding-left: 0.75rem; border-radius: 2rem 0 0 2rem; }
.c-slide-arrow:hover { opacity: 1; }
.c-slides-container { width: 100%; display: flex; overflow: hidden; scroll-behavior: smooth; list-style: none; margin: 0; padding: 0; border-radius: 4px; background: #F4F4F4; }
.c-input-add-visit { width: 100%; text-align: center; }
.c-trash-img-white { filter: invert(98%) sepia(2%) saturate(0%) hue-rotate(246deg) brightness(102%) contrast(105%); }
.c-visit-picture-render { display: flex; flex-direction: column; align-items: center; margin: 10px 6px; border-radius: 4px; border: 1px solid #9E9E9E; padding: 10px; justify-content: center; height: 150px; }
.c-pagination-button-container { text-align: center; margin-top: 10px; margin-bottom: 20px; }
.c-pagination-button { background: black; color: white; cursor: pointer; border: 1px solid white; transition: 0.2s all; padding: 10px 35px; border-radius: 25px; }
.c-pagination-button:hover { background: grey; }
.c-pagination-button:disabled { background-color: revert; cursor: not-allowed; color: black;}
.c-client-plan-disclaimer { padding: 5px; color: red; font-size: large; text-align: center; font-weight: bold; }
.ql-toolbar { background-color: white;	color: black; margin: 0px 15px;}
.c-visit-input-radio { margin-top: 10px; accent-color: #30E49D; display: flex; justify-content: center; align-items: center;}
.c-visit-input-radio input[type="radio"] { width: 16px; height: 16px; }
.c-row-plan-add { list-style: none; }
.c-row-plan-add a { text-decoration: none; display: block; width: 100%; padding: 5px; color: #313733; font-size: 12px; }
.c-row-plan-add a:hover { background: white; color: black; }

#id-client-dialog-top { word-break: break-word; }

#id-dialog, #id-dialog-extra { background: white; color: #000; padding: 15px 30px; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column;}
.c-dialog-button-close-plan { text-decoration: none; position: fixed; right: 20px; padding: 2px 10px; font-size: 1.3em; z-index: 2; color: #000; }
.c-dialog-plan-title { display: flex; align-items: center; gap: 8px; color: #000; font-size: 20px; font-weight: 700; margin: 20px 0px; }
.c-dialog-plan-label { font-size: 11px; margin-bottom: 2px; }
.c-dialog-plan-input { width: 95%; font-size: 12px; margin-bottom: 16px; padding: 6px 0px 6px 6px; }
.c-dialog-plan-input:read-only { background: white; border-color: rgb(118, 118, 118); }
.c-dialog-plan-select { width: 98%; font-size: 12px; margin-bottom: 16px; padding: 6px 0px 6px 6px; }
.c-dialog-plan-reminder { border-radius: 4px; border: 1px solid #EDD6B6; background: #EDD6B6; display: flex; padding: 10px; align-items: center; gap: 16px; font-size: 11px; margin-bottom: 16px; }
.c-dialog-plan-reminder a { color: #000; font-weight: 700; }
.c-dialog-plan-action { margin-top: auto; margin-bottom: 20px;  padding: 12px 16px; border-radius: 20px; background: #30E49D; font-size: 14px; font-weight: 700; border: none; color: #313733; cursor: pointer; font-family: 'Barlow', sans-serif;}
.c-dialog-plan-action:hover { background: #28C485;}
.c-label-container { display: flex; align-items:center; font-size: 12px;}

.c-dialog-plan-list { max-height: 35%; border-radius: 4px; background: #FFF; box-shadow: 0px 32px 32px -8px rgba(0, 0, 0, 0.08); overflow-y: auto; overflow-x: hidden; }

.c-plan-title-container { margin: 20px 15px; display: flex; flex-direction: column; gap: 12px; color: #000; font-weight: 700;}
.c-plan-title { font-size: 18px; color: #000; font-weight: 700; }
.c-plan-subtitle-container { display: flex; justify-content: space-between; align-items: center; }
.c-plan-subtitle { font-size: 14px; text-transform: uppercase; }
.c-plan-subtitle-edit { font-size: 12px; display: block; border: none; background: none; text-decoration: underline; color: #313733; font-weight: 700; display: none; }

.c-clients-title { color: #000; font-weight: 700; font-size: 14px; margin-bottom:12px;}
.c-dialog-client-data-container { display: flex; margin-bottom: 16px; }
.c-dialog-client-data-label { font-size: 11px; width: 30%; }
.c-dialog-client-data-info { font-size: 12px; }
.c-dialog-client-subtitle { margin: 10px 0px; text-transform: uppercase; font-size: 14px; }

.c-plan-day-summary { list-style: none; cursor: pointer;}
.c-plan-day-summary::-webkit-details-marker { display: none; }
.c-plan-day-img { margin-left: 8px; transition: transform 0.3s ease; }
details[open] .c-plan-day-img { transform: rotate(90deg); }

.c-plan-client-details summary::-webkit-details-marker { display: none; }
.c-plan-details-img { margin-right: 5px; transition: transform 0.3s ease; }
.c-plan-client-details[open] .c-plan-details-img { transform: rotate(90deg); }

#id-toast { position: absolute; left: 50%; transform: translateX(-50%); padding: 15px; border-radius: 5px; opacity: 0; transition: opacity 0.5s ease-in-out; z-index: -1; margin-bottom: unset; }
#id-toast.show { opacity: 1; transition: opacity 0.5s ease-in-out; z-index: 1000; }

.c-visit-container-expanded { border: 1px solid #E1E2DD; border-radius: 4px; margin-bottom: 15px; padding: 10px; }

.c-client-section-container { display: flex; align-items: center; margin-bottom: 20px; }
.c-client-section-indicator { display: flex; flex-direction: column; align-items: center; align-self: stretch; padding: 0px 5px; text-align: center; font-size:12px; }
.c-client-section-line { height: 1px; width: 100%; background: #E1E2DD; }
.c-client-indicator-step { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background-color: #E1E2DD; display: flex; justify-content: center; align-items: center; color: #313733; }
.c-active-indicator { background-color: #30E49D; font-weight: 700; }

label.c-checkbox { display: inline-flex; align-items: center; vertical-align: middle; gap: 10px; transition: background .3s; }
label.c-checkbox input { display: none; }
label.c-checkbox > span { /* the track of the switch */ flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; width: 35px; height: 19px; margin-left: 5px; padding: 0 2px; background-color: #30E49D; border-radius: 30px; transition: background .2s; }
label.c-checkbox > span > span { /* the thumb of the switch */ position: absolute; right: 2px; width: 15px; height: 15px; background-color: white; border-radius: 50%; transition: all .3s; }
input:not(:checked) + .c-checkbox > span, .c-checkbox input:not(:checked) ~ span  { background-color: #D4D4D4; }
input:not(:checked) + .c-checkbox > span > span, .c-checkbox input:not(:checked) ~ span > span { right: calc(100% - 17px); }

.c-visit-details, .c-last-visit-details, .c-ticket-details { border-radius: 4px; background: #F4F4F4; padding: 10px; font-size: 12px; line-height: 20px; margin-bottom: 6px;}
.c-visit-details-container { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.c-visit-details-subtitle { color: #595959; font-size: 11px; width: 40%; line-height: normal; }
.c-visit-details-content { line-height: normal; width: 100%; word-break: break-word; }

.c-last-visit-details-img, .c-ticket-details-img { margin-left: 8px; transition: transform 0.3s ease; }
.c-last-visit-details[open] .c-last-visit-details-img, .c-activity-details[open] .c-activity-details-img, .c-ticket-details[open] .c-ticket-details-img { transform: rotate(90deg); }

.c-activity-details { list-style: none; }
.c-activity-details summary::-webkit-details-marker { display: none; }
.c-activity-details-img { margin-right: 6px; transition: transform 0.3s ease; }

.c-ticket-data-container { display: flex; align-items: center; justify-content: space-between; }
.c-ticket-data-content { display: flex; justify-content:space-between; align-items: center; width: 100%; }

.c-activity-questions input[type="checkbox"] { accent-color: #30E49D; }

input[name="morning_start"]:invalid+span:after { content: '✖'; }
input[name="morning_start"]:valid+span:after { content: '✓'; }
input[name="lunch_time"]:invalid+span:after { content: '✖'; }
input[name="lunch_time"]:valid+span:after { content: '✓'; }
input[name="last_meeting"]:invalid+span:after { content: '✖'; }
input[name="last_meeting"]:valid+span:after { content: '✓'; }

.c-share-whatsapp-btn { background-color: transparent; border: none; cursor: pointer; padding: 0px; }
.c-share-whatsapp-btn img { width: 25px; height: auto; }
.c-share-whatsapp-btn:hover img { opacity: 0.8; }

@media (min-width: 500px) {
	html { background-color: #F0F3F1; height: 98%; }
	body { max-width: 500px; margin: 10px auto; border:1px solid #999; border-radius: 5px; }
	#id-dialog, #id-dialog-extra, .c-corona { max-width: 500px; margin: 0 auto; }
	.c-dialog-button-close, .c-dialog-button-close-plan { position: absolute }
	.c-main-nav img {height: 33px;}
}