@import url('https://fonts.googleapis.com/earlyaccess/opensanshebrew.css');
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
@import url("../../fonts/combinumerals/style.css");

:root {
    --color-dark: #00275c;
    --color-dark-tint: #4c678c;
    --color-dark-alpha: rgb(0, 39, 92, 0.7);
    --color-lighter: #e2f0ff;/* #d7eaff; /* #c5dae3;*/
    --color-light: #019cdb;
    --color-light-tint: #66c3e9;
    --color-bg-light:#f7f8f9;
    --color-lightgrey: #e4e4e4;
    --color-grey-bg:#efefef;
    --color-emph: #db001b;
    --color-emph-light:#f4b2ba;
    --color-emph-medium:#fe8391;/*#fe5266;*/
    --color-emph-dark: #58000b;
    --color-text: #4f4e4e;
    --color-map-bg: #eaf0f0;
    --color-map-border:#757878;
    --color-grey-border:#bfc5ca;
    --color-ok-dark:#008013;
    --color-ok-light:#7eb341;
    --color-ok-extra-light:#e9f6e5;
    --color-fail-dark:#b12424;
    /*--color-fail-light:#f2dede;*/
    --color-fail-extra-light:#ffebf1;

    --color-alert-mild-dark:#d35400;/*dark vivid orange*/
    --color-alert-mild-bg:#fff4e5; /*light orange*/

    --color-gold:#e8b921;

    --font-awesome: "Font Awesome 6 Pro";
    --font-ui: "Assistant";

    --shade-card: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 6px 2px -2px rgba(0, 0, 0, 0.2);
    --shade-card-soft: 0 3px 4px 0 rgba(0, 0, 0, 0.10), 0 2px 6px 1px rgba(0, 0, 0, 0.08), 0 4px 2px -2px rgba(0, 0, 0, 0.15);

}

/* normalize */
body.app-body {
    height: 100%; margin: 0; padding: 0;
    font-family: 'Assistant', 'Open Sans Hebrew', Arial, Helvetica, sans-serif;
    font-size: 20px;line-height:1.7em;
    direction: rtl;
    color: var(--color-text);
    -moz-osx-font-smoothing: grayscale;
    overflow-x:hidden
}
body.app-body *{box-sizing: border-box}
ul{padding: 0; margin: 0; list-style: none; }
.ui-widget {font-family: var(--font-ui) !important; font-size:18px; z-index:2000}
.centered {text-align: center; margin:auto}
.clear{clear:both}
.separate_top {margin-top: 15px;border-top: solid 1px #ccc;}
.separate_btm {margin-bottom: 15px;border-bottom: solid 1px #ccc;}
.rel{position: relative;}

/* ==== general layout elements ====*/
.noshow, .hidden_div {display: none !important;}
.shade_down {box-shadow: var(--shade-card)}
.dots-circle{position:relative}
.dots-circle:before {position:absolute;font-family: Font Awesome Kit; font-weight: normal !important; content:'\e030'; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering:auto; font-style:normal; line-height:1;}
.dots-circle.two-dots:before {content:'\e030'}
.dots-circle.dot-arrow:before {content:'\e031'}
.flex_wrapper{display: flex; justify-content: space-around}
.flex-top-wrap{display: flex; align-items: first baseline; flex-wrap: wrap;}

/*====btns====*/
.btn, .app-body .account-btn{display:inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-light); color:var(--color-light);line-height:32px;font-size:16px;border-radius:20px !important;padding:0px 10px; white-space: nowrap; cursor: pointer; text-decoration:none;background-color: white; font-family:var(--font-ui) !important; font-weight:600 !important;}
.btn:hover {text-decoration: none; background-color:var(--color-light); color:white}
.btn i{margin:0 7px; font-size:13px}
.btn:hover i{font-weight:600 !important}
.btn.btn_dark{border-color:var(--color-dark); color:var(--color-dark)}
.btn.btn_dark:hover{background-color:var(--color-dark); color:white}
.btn.btn_strong{border-color:var(--color-light);background-color:var(--color-light); color:white}
.btn.btn_strong:hover{background-color:var(--color-dark);border-color:var(--color-dark); color:white}
.btn.fn_btn {border: 1px solid var(--color-light-tint);color:var(--color-light-tint);padding: 0px 6px;font-size: 14px;line-height:22px}
.btn.fn_btn:hover{color:white; background-color: var(--color-light-tint)}
.btn.cfa_btn{background-color: var(--color-emph); border:1px solid var(--color-emph); color:white; padding:0 30px; margin:20px}
.btn.cfa_btn:hover{background-color: var(--color-emph-dark); border-color:var(--color-emph-dark); color: white; }
.btn.btn_ok{background-color:var(--color-ok-extra-light); color:var(--color-ok-dark); border-color:var(--color-ok-dark)}
.btn.btn_ok:hover{background-color:var(--color-ok-dark); border-color:var(--color-ok-dark); color:white}

.btn.show_on_map, .btn.text_map_icon, .btn.nav_btn_container{background-color: var(--color-grey-bg);border-color:#d4d4d4;color:var(--color-dark-alpha);line-height:19px; height:22px; width:40px;text-align:center;}
.btn.nav_btn_container{width:auto; padding: 0 0 0 8px}
.nav_btn_container a{font-weight:normal}
.btn.show_on_map i, i.btn.text_map_icon {font-size:17px; margin:auto;vertical-align: middle;}
.btn.text_map_icon{font-family:var(--font-awesome) !important;font-weight:300 !important;}
.btn.text_map_icon:hover{font-weight:600 !important}
.admin_btns{text-align: center; padding:0 !important}

.edit_link {z-index:999999; left:40%; top: 0px; padding: 1px 5px 1px 5px; color:#FFFFFF;font-weight:bold; text-align: center; margin:0 auto 10px 0; }

/*====details====*/
/*summary button*/
.more_details{--size:25px;}
.more_details summary{list-style-type: none;position: relative;white-space:nowrap;
  display: flex; width: auto; cursor: pointer;
  height: var(--size); line-height: var(--size);
  border: 1px solid var(--color-light);  border-radius: calc(var(--size) * 0.65);
  font-size: calc(var(--size) * 0.6); font-weight: bold;
  padding: 0 10px 0 40px; color: var(--color-light);}
.more_details summary::before {position: absolute; left: 7px; font-family: var(--font-awesome);font-weight: 300; content: '\f0ab';}
.more_details summary i{margin-left:5px; font-size: calc(0.6 * var(--size));}
.more_details:hover summary::before{font-weight:bold !important}

.more_details[open] summary{z-index:12}
.more_details summary span.close_text {display: none;}
.more_details[open] summary::before { content: '\f0aa'; font-weight: bold;}
.more_details[open] summary span.open_text {display: none;}
.more_details[open] summary span.close_text {display: inline-block;}

/*details content*/
.more_details>div{position: absolute;background-color: var(--color-bg-light); z-index: 10; border-radius: var(--size) 0 var(--size); padding: 20px 18px;  margin: -35px -10px 5px;}

/*====forms====*/
.app-body input, .app-body textarea, .app-body .form_1col input
{display: block; width: 100%; height: 42px; margin:0 0 20px 0;
    padding: 0px;text-indent: 12px; font-size: 14px; color: var(--color-text);
    background-color: var(--color-grey-bg); border: 1px solid #dcdcdc; border-radius: 7px
}
.app-body label{display:flex; justify-content:space-between; align-items: baseline;font-weight:600;color: var(--color-dark);}
.app-body label i{font-size:0.9em; margin-left:7px; }

/*====links====*/
a{text-decoration: none;color: var(--color-light);font-weight: bold;}
a:hover{text-decoration: underline;transition-timing-function: ease-in-out;transition-duration: .2s;}
.modal_opener:not(.fn_btn), .lex_entry, .lex_entry a{cursor:pointer; display: inline;border-bottom:0.1em solid white;transition-timing-function: ease-in-out;transition-duration: .2s;}
.modal_opener:hover, .lex_entry:hover, .lex_entry a:hover{text-decoration: none}
.modal_opener{color:var(--color-dark);}
.modal_opener:not(.fn_btn):hover{border-bottom-color: var(--color-emph);}
.lex_entry, .lex_entry a, .icon-caret-left::before{color:var(--color-light)}
.lex_entry a:hover{border-bottom-color: var(--color-light);}

/*====boxes====*/
.app-box, .boxed_text, .boxed_text_kids {clear:both;border:1px solid var(--color-dark); border-radius:0 30px 0 30px; padding:10px;}
.please_purchase{text-align:center; width:90%; margin: 30px auto}
details.details-box{position:relative}
details.details-box summary::-webkit-details-marker {display:none;}
details.details-box > summary {list-style: none;cursor: pointer}
details.details-box[open] summary ~ * {animation: sweep .8s ease-in-out;}
details.details-box[open] summary{position: absolute; top: 2px; width: 100%; padding-right: 25px; border-bottom: 1px solid var(--color-light);font-weight:bold}
.details-box .details_content{position:relative;border: 1px solid var(--color-light); border-radius:0 30px 0 30px; padding: 30px 12px 12px 12px;}
.close_details{position: absolute;left: 13px;bottom: 9px;}

.boxed_text_kids {box-shadow:var(--shade-card); margin: 20px auto; border:1px solid var(--color-light);}
.boxed_text_kids h4, .boxed_text h4{margin: 0; padding:0 10px 0 85px; position:relative;background-color: var(--color-dark);border-radius: 0 20px 0 20px;color: white;box-shadow: var(--shade-card);}
.boxed_text_kids h4 img{position:absolute; left:15px;top:3px;width:65px;}
.app-body .shade_down{box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);}
/*====login====*/
.show_pwd_toggler {float: left;font-weight: bold;font-size: 14px;line-height: 25px;}
.app-login {text-align: right; margin: 20px auto;max-width:400px}
.app-login h2.sharav_login_header, .app-login h2.main_header{font-family:var(--font-ui);font-size:18px; color:var(--color-dark);text-align: center;margin-top:10px}
.btn.cfa_btn.form-submit {border-radius: 20px; margin:10px 0; width:100%; font-family:var(--font-ui)}
.btn.cfa_btn.form-submit:hover{background-color: var(--color-emph-dark);}
.btn.form-submit{width:100%; }
.app-body .citizen_success{font-family:var(--font-ui);font-weight:600; border-radius:10px; border:0px; background-color: var(--color-bg-light)}
#forgot_pass_wrapper{text-align: start; margin: -15px 0 30px 4px;font-size:17px}
#forgot_pass_wrapper a{text-decoration: underline;}
#forgot_pass_wrapper:hover a{text-decoration-thickness:2px}

.divider h6{line-height: 1.1 !important; background: white !important;}

/*====text elements====*/
.italicized_term{font-weight:100}
.area_intro .italicized_term{font-weight:400}
.smallprint{font-size:0.8em; line-height:1.1em}
.red_text{color: var(--color-fail-dark);}
h1{font-weight: 100; font-size: 80px;line-height: 1;margin:10px auto;text-align: center; color: var(--color-light);}
.running_text{padding:10px 0;}
[class^="trip_num"], [class^="trip_label"] {position:relative;color:var(--color-dark) !important;background-color:inherit !important; font-weight:600}
a[class^="trip_label"]{text-decoration: 5px underline #d3e3fd !important;text-underline-offset: 0.05em;}
a[class^="trip_label"]:hover{text-decoration: 5px underline var(--color-emph) !important;}
.square_icon{padding-right: 20px;margin-bottom:-10px}
.square_icon li{list-style: disc;}
.square_icon li::marker{color: var(--color-light)}
.utensils-icon{color: #f79020; }

.ltr-field{direction:ltr; unicode-bidi: isolate;}

@media screen and (max-width: 560px) {
    h1{font-size:60px; margin:10px auto}
}

/*====bullets====*/
.red_font{color: var(--color-emph)}
.bullet_num{display: inline-block; margin-left: 3px;border-radius: 50%; height: 1.5em;width: 1.5em; text-align: center; line-height: 1.5em; font-size: 0.85em;font-weight: 600;}
.poi_bullet_num{color:var(--color-pink)}
.bullet_num.main_poi{color: #ffffff;background-color: var(--color-emph); font-weight:bold}
.bullet_num.alt_poi{background-color: var(--color-emph-medium); color:white; font-weight:bold}
.alt_poi_bullet {color: var(--color-emph-medium);}

.star_rank_full, .star_rank_half, .star_rank_empty{color:var(--color-light)}
.star_rank_half{filter:opacity(0.7)}
.star_rank_empty{filter:opacity(0.6)}

.error{background-color: var(--color-fail-light); color: var(--color-fail-dark); border-right: 3px solid var(--color-fail-dark);}

/*====animation====*/
.bouncer {animation-duration: 2s; animation-iteration-count: 5; animation-name: bounce-4; animation-timing-function: ease;}
@keyframes bounce-4 {
    0%   { transform: scale(1,1)    translateY(0); }
    10%  { transform: scale(1.1,.9) translateY(0); }
    30%  { transform: scale(.9,1.1) translateY(-20px); }
    50%  { transform: scale(1,1)    translateY(0); }
    100% { transform: scale(1,1)    translateY(0); }
}

.pulser {animation-duration: 2s; animation-iteration-count: infinite; animation-name: pulse; animation-timing-function: ease-in-out;}
@keyframes pulse {
    0%   { transform: scale(1,1)    translateY(0); }
    25%  { transform: scale(1.12,.1.12) translateY(0); }
    50%  { transform: scale(1.15,1.15) translateY(0); }
    75%  { transform: scale(1.12,1.12)    translateY(0); }
    100% { transform: scale(1,1)    translateY(0); }
}

.wiggler {animation-duration: 2s; animation-iteration-count: 4; animation-name: wiggle; animation-timing-function: ease-in-out;}
/* Keyframes */
@keyframes wiggle {
  0%, 7% {transform: rotateZ(0);}
  20% {transform: rotateZ(6deg);}
  25% {transform: rotateZ(-6deg);}
  30% {transform: rotateZ(4deg);}
  35% {transform: rotateZ(-3deg);}
  40%, 100% {transform: rotateZ(0);}
}

.jelloer{animation: jello 2s ease-in-out 0s 1 normal none;}
@keyframes jello {
	0%  {transform: scale3d(1, 1, 1);}
	30% {transform: scale3d(1.25, 0.75, 1);}
	40% {transform: scale3d(0.75, 1.25, 1);}
	50% {transform: scale3d(1.15, 0.85, 1);}
	65% {transform: scale3d(0.95, 1.05, 1);}
	75% {transform: scale3d(1.05, 0.95, 1);}
	100% {transform: scale3d(1, 1, 1);}
}

.bounceyer{animation: boncey 2s ease-in-out 0s 1 normal none;}
@keyframes boncey {
	0%  {animation-timing-function: ease-in;opacity: 1;transform: translateY(-60%);}
	24% {opacity: 1;}
	40% {animation-timing-function: ease-in;transform: translateY(-50%);}
	65% {animation-timing-function: ease-in;transform: translateY(-25%);}
	82% {animation-timing-function: ease-in;transform: translateY(-5%);}
	93% {animation-timing-function: ease-in;transform: translateY(-3%);}
    25%,
	55%,
	75%,
	87% {animation-timing-function: ease-out;transform: translateY(0px);}
	100% {animation-timing-function: ease-out;opacity: 1;transform: translateY(0px);}
}