html{
 touch-action: manipulation!important;
 font-family: arial;
}
body { 
 filter: none!important;
 clear: both;
}
a{touch-action: manipulation;}
a[x-apple-data-detectors] {
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}
.bg-dark-gray{
 background-color: #333;
}
.bg {
 position: fixed;
 width: 100%;
 height: 100%;
 z-index: 1;
 background-repeat: no-repeat;
 background-position: center center;
 image-rendering: pixelated;
 background-size: cover;
}

.sunrise {
 background: linear-gradient(to bottom, #1e528e 0%,#265889 50%,#9da671 100%);
}
.day { 
 /*background: linear-gradient(to bottom, #0096ff 0%,#1e528e 100%);*/
 background: #074595;
 /*background: -webkit-linear-gradient(#074595, #0096ff );*/
 background: -webkit-linear-gradient(#24354D,#5C7B9D );
 background: -o-linear-gradient(#24354D,#5C7B9D );
 background: -moz-linear-gradient(#24354D,#5C7B9D );
 /*background: linear-gradient(#24354D,#5C7B9D );*/
 background: linear-gradient(#000,#5C7B9D );
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#24354D', EndColorStr='#5C7B9D ');
 
}
.blue-sky {
 /* background: linear-gradient(rgb(28, 84, 167) 20.83%, rgb(65, 119, 193) 78.65%, rgb(65 119 193 / 70%) 100%); */
 background: #1b3d67;
}
.sunset {
 background: linear-gradient(to bottom, #154277 0%,#576e71 30%,#e1c45e 70%,#b26339 100%);
}
.night {
 background: linear-gradient(to bottom, #40405c 0%,#6f71aa 80%,#8a76ab 100%);
 /*background: linear-gradient(to top,#9662a2,#654e90,#313575,#112158);*/
}
.midnight {
 background: linear-gradient(to bottom, #20202c 0%,#515175 100%);
}
.bg1 {
 /*background: linear-gradient(to top,rgba(0,0,0,0.2),rgba(0,0,0,0.3));*/
 position: fixed;
 width: 100%;
 height: 100%;
 z-index: 1;
 /* background: url(https://www.weather2day.co.il/pics/background/day_opacity.png) 0px 0px / 100% 100% no-repeat; */
}
.bg2 {
 position: fixed;
 width: 100%;
 background-repeat: no-repeat;
 opacity: 0.6;
 background-size: cover;
 height: 100%;
 z-index: 1;
}

.bg3 {
 position: fixed;
 background-image: url(/images/cloud-1001.svg);
 width: 100%;
 background-repeat: no-repeat;
 background-position: top;
 opacity: 0.4;
 background-size: auto;
 height: 100%;
 z-index: 1;
}

.pull-spinner {
 height:25px;
 width:25px;
 margin:0px auto;
 position:relative;
 -webkit-animation: rotation .6s infinite linear;
 -moz-animation: rotation .6s infinite linear;
 -o-animation: rotation .6s infinite linear;
 animation: rotation .6s infinite linear;
 border-left:4px solid rgba(202,202,202,.15);
 border-right:4px solid rgba(202,202,202,.15);
 border-bottom:4px solid rgba(202,202,202,.15);
 border-top:4px solid rgba(202,202,202,.9);
 border-radius:100%;
}

@-webkit-keyframes rotation {
 from {-webkit-transform: rotate(0deg);}
 to {-webkit-transform: rotate(359deg);}
}

@-moz-keyframes rotation {
 from {-moz-transform: rotate(0deg);}
 to {-moz-transform: rotate(359deg);}
}

@-o-keyframes rotation {
 from {-o-transform: rotate(0deg);}
 to {-o-transform: rotate(359deg);}
}

@keyframes rotation {
 from {transform: rotate(0deg);}
 to {transform: rotate(359deg);}
}

/* Preloader https://codepen.io/niklausgerber/pen/MKrVdQ */
#preloader {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 99;
}
#status {
 width:200px;
 height:200px;
 position:absolute;
 left:50%;
 top:50%;
 /*background-image:url(/images/Progress.gif);*/
 /*background-image:url(/images/loading.gif);*/
 /*background-size: 35px;*/
 background-repeat:no-repeat;
 background-position:center;
 margin:0 0 0 -100px;
 /*margin:-100px 0 0 -100px;*/
}

.icon-block {
 padding: 0 15px;
}
.icon-block .material-icons {
 font-size: inherit;
}
.rtl {
 direction: rtl;
}
h1, h2, h3, h4, h5, h6, p {
 direction: rtl;
}

td, th {
 text-align: right;
}

strong {
 font-weight: bold;
}

nav .brand-logo {
 font-size: 1.2rem;
 white-space: nowrap;
 overflow-x: scroll;
 white-space: nowrap;
 width: 160px;
 scrollbar-width: none; /* For Firefox */
 -ms-overflow-style: none;  
}

.brand-logo::-webkit-scrollbar {
 display: none; /* Hides the scrollbar for WebKit browsers like Chrome and Safari */
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 576px) { 
 nav .brand-logo {
  width: auto;
 }
}
nav .btn-floating:hover {
 background-color: transparent;
}
.side-nav a {
 padding: 0 16px;
}
.btn-floating:hover {
 background-color: transparent;
}
.navy {
 background-color: #2f4662;
}

.navy:hover {
 background-color: rgba(47, 70, 98, 0.85);
}
.shakuf {
 background-color: rgba(255, 255, 255, 0.2);
}
.shakuf-lavan {
 background-color: #FFF;
 border-top: 1px solid #d0d0d0;
}
.shakuf-black {
 background-color: rgba(0, 0, 0,0.2);
}
.collapsible-header {
 background-color: rgba(0, 0, 0,0.2);
}
.collapsible-header, .collapsible-body {
 text-align: right;
 direction: rtl;
}
.nav-color {
	background: #4aa2e0;
}
.nav-color-new {
	background: none;
}
.nav-color-new.scrolled {
 background-color: rgba(0,0,0,.2) !important;
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 /*transition: background-color 100ms linear;*/
}
.nav-color-makam {
 background: #000;
}
#navbar {
 transition: top 0.3s;
}
.navbar-float {
 position: fixed;
 left: 0.5em;
 top: 0.5em;
 z-index: 11;
}
.navbar-back i{
 font-size: 24px;
 line-height: inherit;
 color: #fff;
}
.navbar-back {
 background-color:#4aa2e0;
 box-shadow: rgba(101, 119, 134, 0.5) 0px 2px 5px 0; 
 display: inline-block;
 color: #fff;
 overflow: hidden;
 z-index: 1;
 width: 40px;
 height: 40px;
 line-height: 40px;
 padding: 0;
 text-align: center;
 border-radius: 50%;
 -webkit-transition: .3s;
 transition: .3s;
 cursor: pointer;
 vertical-align: middle;
}
@media screen and (min-width: 601px){
.navbar-fixed {
 height: 50px;
}
}
.navbar-fixed {
 height: 50px;
}
.nav-up{
 top: -50px;
}

#sidenav-overlay {
}
nav .button-refresh {
 left: 0.5em;
}

/* MAKAM application */
nav .button-makam-rate {
 right: 0.5em;
 top: 0.5em;
}
nav .button-makam {
 left: 0.5em;
}
nav .button-makam.btn-floating:hover {
 background-color: #333;
}
nav .button-makam-rate.btn-floating:hover {
 background-color: #333;
}
nav .button-makam i.material-icons {
 line-height: 40px;
 height: 42px;
}
/* / MAKAM application */


nav .btn-floating:hover {
 background-color: #4aa2e0;
}
nav .button-refresh i.material-icons {
 line-height: 42px;
 height: 42px;
}
nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {
 height: 42px;
 line-height: 42px;
}
.dropdown-content {
 min-width: 150px;
}
.dropdown-content li>a>i {
 margin: 0 -10px 0 8px;
 float: right;
}
.z-depth-1, nav, .card-panel, .card, .toast, .btn, .btn-large, .btn-floating, .dropdown-content, .collapsible, .side-nav {
 box-shadow: none;
 -webkit-box-shadow: none;
}
@media only screen and (min-width: 601px){
nav a.button-collapse i {
 height: 50px;
 line-height: 50px;
}
}
nav .button-collapse {
 line-height: 64px;
}
@media only screen and (min-width: 601px) {
    nav a.button-collapse {
        height: -webkit-fill-available;
        line-height: normal;
    }
}
.menu-icon {
  width: 28px;
  height: 28px;
}
.menu-refresh {
  padding: 2px;
}
nav ul li {
 float: right;
}
nav {
 color: rgba(0, 0, 0, 0.87);
 height: 50px;
 line-height: 50px;
}
nav .button-collapse {
 height: 50px;
 line-height: 50px;
 display: flex;
 align-items: center;
}
nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons{
 height: 50px;
 line-height: 50px;
}
.drag-target {
  width: 4px;
}
.side-nav {
 overflow-y: scroll;
 width: 245px;
 height: 100%;
 z-index: 11111;
 background-color: #1b3d67;
}

.side-nav li > a {
 font-size: 16px;
 color: #FFF;
 padding-right: 28%;
 direction: rtl;
 height: 55px;
 line-height: 55px;
}
.side-nav li:hover{
  background-color: #10253e;
}
.side-nav li>a:hover{
  background-color: transparent;
}
.more-title span {
 font-size: 16px;
 color: #FFF;
 padding-right: 24%!important;
 direction: rtl;
 height: 55px;
 line-height: 55px; 
}
.more-content {
 font-size: 16px;
 color: #FFF;
 width: 100%;
 direction: rtl;
 height: 55px;
 line-height: 55px; 
 margin: 0;
}
.select-wrapper span.caret {
 left: 0!important;
 right: auto;
 color: #6f6f6f;
}
.select-wrapper input.select-dropdown {
 margin: 0;
}
.container {
 width: 100%;
}
.container .row {
 margin: 0;
}
@media only screen and (min-width: 993px) {
.container {
 width: 100%;
}
nav a.button-collapse {
    display: flex;
}
}

[type="radio"] + label:before, [type="radio"] + label:after {
 right: 0;
}

[type="radio"]:not(:checked) + label, [type="radio"]:checked + label {
 padding-right: 35px;
 padding-left: 0;
}
.input-area {
 position: relative;
 margin-top: 1rem;
}
.input-area label {
 top: 0;
 right: 0;
 position: absolute;
 font-size: 1rem;
 cursor: text;
 height: 100%;
 transform: translateY(12px);
 pointer-events: none;
 transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}
.col ul {
 padding: 0;
}

.input-field label {
 text-align: right;
 right:0;
}
.row .col {
 direction: rtl;
}
.row {margin-bottom: 10px;}
.input-field.col label {
 right: 0;
 left: 0;
}

.input-field label:not(.label-icon).active {
 -webkit-transform: translateY(-14px) scale(1);
 transform: translateY(-14px) scale(1);
}

.input-area label:not(.label-icon).active {
 -webkit-transform: translateY(-14px) scale(1);
 transform: translateY(-14px) scale(1);
}

.file-field .file-path-wrapper {
 padding-right: 10px;
 padding-left: 0;
}

.select-wrapper input.select-dropdown {
 color: #9e9e9e;
 
}
.dropdown-content li > a, .dropdown-content li > span {
 color: #4aa2e0
}

.collapsible-header i {
 margin-right: 0;
 margin-left: 1rem;
}

.side-nav .collapsible li, .side-nav.fixed .collapsible li {
 text-align: right;
 direction: rtl;
 
}
.side-nav .collapsible-body, .side-nav.fixed .collapsible-body {
 background-color: transparent;
}
.dropdown-content, .dropdown-content.active {
 top: 54px!important;
}
.dropdown-content li {
 text-align: right;
}
.row .col {
 float: right;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
 direction: rtl;
}

.collection {border:0;margin: 0;}
.collection .collection-item{
 background-color: rgba(255,255,255,.05); 
 border-bottom:1px solid rgba(255,255,255,.2); 
}
.collection a.collection-item{color:#fff;}
.collection a.collection-item:not(.active):hover {
 background-color: rgba(255,255,255,.2);
}
/*------------------------------| Navigation icons |------------------------------*/
.nav-icon {
 background-size: 10%;
 background-position: 90%;
 background-repeat: no-repeat;
 display:block;
 }
 .warnings-icon {
  background-image: url(/images/no-warnings.svg);
  background-size: 12%;
 }
.radar-icon {
 background-image: url(/images/radar_icon_48.png);
 }
.radar-satellite-icon {
background-image: url(/images/satellite-alt-outline-rounded.svg);
 background-size: 12%;
}
.radar-temperature-icon {
background-image: url(/images/clarity--thermometer-line.svg);
 background-size: 12%;
}
.settings-icon {
background-image: url(/images/settings.svg);
}
.radar-jordan-icon {
 background-image: url(/images/radar_jordan.png);
}
.location-icon {
 background-image: url(/images/pin.svg);
 }
.radar-clouds-icon {
 background-image: url(/images/umbrella_white.svg);
 background-size: 12%;
 } 
.radar-clouds-icon-black {
 background-image: url(/images/umbrella_black.svg);
 background-size: 12%;
 }  
.camlive-icon {
 background-image: url(/images/live_white.svg);
 background-size: 12%;
 }
.plane-icon {
 background-image: url(/images/send.svg);
 background-size: 12%;
 /*content: "\f1d9";*/
 }
 /*------------------------------| PREMIUM |------------------------------*/
.premium-icon span:before {
 content: "👑";
 font-style: normal;
 font-weight: normal;
 text-decoration: inherit;
 padding-right: 0.5em;
 padding-left: 0.5em;
 color: #FFF;
 font-size: 22px;
 position: absolute;
 right: 10px;
}
.premium-container {
 background: #00234e;
 color: #fff;	
 padding: 16px 16px 16px 0;
 line-height: unset!important;
}
.premium-connected {
 background: #d49500;
 color: #fff;
 font-size: 10px;
 font-weight: bold;
 display: inline;
 vertical-align: middle;
 border-radius: 12px;
 padding: 4px;
 margin: 0 8px;
}
#email-sent-to {
 font-weight: 700
}
.error {
 border-color: #b63e5a;
 color: #fff;
 background: #e26868;
 display: inline-block;
 padding: 2px;
 margin: 5px;
 border-radius: 5px
}
.code-error {
 border-color: #b63e5a;
 color: #9f6000;
 background-color: #feefb3;
 display: inline-block;
 padding: 2px;
 margin: 5px;
 border-radius: 5px
}
a.premium-logout {
 line-height: 18px;
 background-color: #f5f5f5;
 text-decoration: none!important;
 border-radius: 6px;
 padding: 0 8px;
 font-size: 12px;
 color: #000!important
}
.premium-button {
 text-align: center;
 border: 0;
 background-color: #2196f3;
 border: 2px solid #2196f3;
 font-weight: 700;
 font-size: .975rem;
 color: #fff;
 padding: 0.625rem 16px;
 display: inline-block;
 text-decoration: none;
 cursor: pointer;
 outline: 0;
 transition: background-color .2s;
 border-radius: 3rem;
 -webkit-tap-highlight-color: transparent;
}
.premium-button:hover {
 background-color: #0C85E9;
}
.login-button {
  background-color: #ffffff;
  box-shadow: none;
  border: 0;
  color: #2196f3;
  border: 2px solid #2196f3;
  font-weight: bold;
  padding: 0.625rem 16px;
  display: inline-block;
  line-height: 18px;
  transition: background-color 0.2s;
}
.login-button:hover {
  background-color: #2196f3;
  color: #fff;
}
/*------------------------------| PREMIUM END |------------------------------*/
.arrow-right-icon span:before {
 content: "\f061";
 font-family: FontAwesome;
 font-style: normal;
 font-weight: normal;
 text-decoration: inherit;
 padding-right: 0.6em;
 padding-left: 0.4em;
 color: #FFF;
 font-size: 22px;
 float: right;
 }
.weather-icon {
 /*background-image: url(/images/weather.png);*/
 background-image: url(/images/forecast_white.svg);
 background-size: 12%;
 }
.weather-icon-black {
 background-image: url(/images/forecast_black_02.svg);
 background-size: 28px 24px;
 } 
.sea-state-icon {
 background-image: url(/images/boat.svg);
 background-size: 12%;
 }
.settings-icon {
  background-image: url(/images/settings.svg);
  background-size: 12%;
}
.meduzot-icon {
 background-image: url(/images/jellyfish.svg);
 background-size: 10.5%;
 } 
.more-icon {
 background-image: url(/images/more_horizen_white.svg);
 background-size: 28px;
 background-position: 90% 10px;
 } 
.bell-icon {
 background-image: url(/images/bell_48.png);
 }
.umbrella-icon {
 background-image: url(/images/umbrella.svg);
 background-size: 28px;
 }
.about-icon {
 background-image: url(/images/info.svg);
 background-size: 9%;
 margin-right: 1px;
 }
.rate-icon {
 background-image: url(/images/rate_48.png);
 }
/*------------------------------| source selector |------------------------------*/
      .source-selector-container {
        width: 100%;
      }

      .source-selector-buttons {
        display: flex;
        gap: 8px;
        direction: rtl;
        margin: 10px;
      }

      .source-selector-button {
        flex: 1;
        padding: 12px;
        background: #22407a;
        color: #ffffff;
        border: 1px solid #2a4d80;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.2s ease-in-out;
        -webkit-tap-highlight-color: transparent;
      }

      .source-selector-button:hover {
        background: #3b6fbf;
      }

      .source-selector-button[aria-pressed="true"] {
        background: #3b6fbf;
        border-color: #3b6fbf;
      }

      @media (max-width: 500px) {
        .source-selector-button {
          font-size: 14px;
          padding: 10px;
        }
      }

/*------------------------------| observations |------------------------------*/
 
.uv-circle {
	border-radius: 50%;
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 2px;
}

#uv-scale-0\.0,
#uv-scale-0 {
	background: #dcdcdc;
}

#uv-scale-1\.0,
#uv-scale-2\.0,
#uv-scale-1,
#uv-scale-2 {
	background: #00b050;
}

#uv-scale-3\.0,
#uv-scale-4\.0,
#uv-scale-5\.0,
#uv-scale-3,
#uv-scale-4,
#uv-scale-5 {
	background: #cccc00;
}

#uv-scale-6\.0,
#uv-scale-7\.0,
#uv-scale-6,
#uv-scale-7 {
	background: #f79646;
}

#uv-scale-8\.0,
#uv-scale-9\.0,
#uv-scale-10\.0,
#uv-scale-8,
#uv-scale-9,
#uv-scale-10 {
	background: red;
}

#uv-scale-11\.0,
#uv-scale-12\.0,
#uv-scale-13\.0,
#uv-scale-14\.0,
#uv-scale-11,
#uv-scale-12,
#uv-scale-13,
#uv-scale-14 {
	background: #7030a0;
}

.observations-container {
 list-style: none;
 /*display: inline-flex;*/
 direction:rtl;
 padding-right: 0;
 padding-left: 0;
 margin:0;
}

.observations-container ul.observation {
 padding: 5px;
 margin: 5px 10px;
 border-radius: 2px;
 -moz-box-shadow: 0 2px 1px rgba(12,12,12,0.05);
 -webkit-box-shadow: 0 2px 1px rgba(12,12,12,0.05);
 box-shadow: 0 2px 1px rgba(12,12,12,0.05);
 display: flex;
 justify-content: center;
 flex-direction: row-reverse;
}

.observations-container ul.observation .panel-1 {
 vertical-align: top;
 text-align: right;

}

.observations-container ul.observation .temperature {
 display: inline-block;
 font-size: 3rem;
 text-align: center;
 direction: ltr;
 unicode-bidi: embed;
 padding-right: 10%;
 transition:color 2s ease;
}

.observations-container ul.observation .panel-2 {
 display: inline-block;
 text-align: right;
 letter-spacing: 1px;
 color: #fff;
 font-size: 14px;
}

.observations-container ul.observation {
 line-height: 1.8;
 text-align: center;
 position: relative;
}
.observations-container ul.observation .wind_speed,
.observations-container ul.observation .wind_direction,
.observations-container ul.observation .humidity,
.observations-container ul.observation .rain,
.observations-container ul.observation .update {
 text-align: right;
}
.observations-container ul.observation span {
 font-size: 12px;
}
.observations-container ul.observation .update {
 position:absolute;
 bottom: 0;
 left: 5px;
 font-size: 10px;
 color: rgba(255,255,255,0.5);
}
.observations-container > *:nth-child(n+2) {
 display: none;
}
/* temprature color */
.purple-cold-temperature {
 color:#eb5bff;
}
.blue-temperature {
 color:#5eb8ff;
}
.blue-middle-temperature {
 color: #00b4fc;
}
.green-temperature {
 color:limegreen;
}
.orange-temperature {
 color:orange;
}
.red-temperature {
 color:red;
}
.pink-temperature {
 color:#e91e63;
}
/*------------------------------| FORECAST |------------------------------*/
.alerts-button {
 height: 35px;
 width: 35px;
 margin: 7px 7px;
 border-radius: 35px;
 background-size: 20px;
 background-position: center;
 background-image: url(/images/warning.svg);
 background-repeat: no-repeat;	
}
.forecast-car-button {
 height: 35px;
 width: 35px;
 margin: 7px 7px;
 border-radius: 35px;
 background-size: 20px;
 background-position: center;
 background-image: url(/images/umbrella_white.svg);
 background-repeat: no-repeat;	
}
.info-button {
  border-radius: 36px;
  width: 36px;
  height: 36px;
  right: 1.5em;
  top: 0.5em;
}
.info-button i {
 padding: 0px 8px !important;
 line-height: 42px !important;
 height: 42px !important;
 display: block !important;
}
.tabs .tab a:hover, .tabs .tab a.active {
	color: #4aa2e0;
}
.tabs .tab a {
	color: #4aa2e0;
}
.tabs .indicator {
 background-color: #4aa2e0;
}
.container {
 position: relative;
 z-index: 2;
}
.forecast-notification {
 border-radius: 2px;
 direction: rtl;
 padding: 10px 0px;
 text-align: center;
 margin: 10px 10px;
 color: white;
}

.forecast .collapsible {
  margin: 10px;
}
.forecast .collapsible-header {
  border-bottom: 0;
	padding: 0;
}
.forecast .collapsible-body {
  border-bottom: 0;
	color: #FFF;
	text-align: right;
	padding:0;
}
.forecast .collapsible {
	border: 0;
}
.forecast-notification img {
 width: 22px;
 vertical-align: middle;
 margin-left: 10px;
}
.forecast-container {
 padding-right: 0;
 padding-left: 0;
 direction: rtl; 
 margin: 0;
}
.forecast-container li {
 list-style-type: none;
}
.forecast-container .box {
 /*background: url("/images/grey-up.png") repeat-x scroll center bottom rgba(0, 0, 0, 0);
 border-color: rgba(0, 0, 0, 0.5);*/
 margin: 10px 10px;
 padding-right: 5px;
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;
 -moz-box-shadow: 0 2px 1px rgba(12,12,12,0.05);
 -webkit-box-shadow: 0 2px 1px rgba(12,12,12,0.05);
 box-shadow: 0 2px 1px rgba(12,12,12,0.05);
}

.forecast-container .box > li {
 display: inline-block;
}

.forecast-container .title {
 font-size: 16px;
 color: #fff;
}

.forecast-container .date {
 padding: 1% 2%;
 width: 60%;
}

.forecast-container .temperatures {
 padding: 0;
 width: 25%;
 direction: ltr;
}

.forecast-container .date .mm {
 color: #47ffc5;
 direction: rtl;
}
.forecast-container .image img {
 /*width: 38.4px;*/
 height: 36px;
}

.forecast-container .weather-type {
 color: rgba(255,255,255,0.8);
 font-size: 12px;
 letter-spacing: 1px;
}

.forecast-container .temperatures .max {
 color: #ffb747;
 direction:ltr;
 display: inline-block;
 font-size: 22px;
 line-height: 50px;
 width: 15%;
}

.forecast-container .temperatures .min {
 color: #b2dfff;
 direction:ltr;
 display: inline-block;
 width: 55%;
}

.last-update {
 font-size: 10px;
 padding: 0.5em;
 text-align: left;
 color:#9197a3;
 display:none;
}
.forecast-container i {
 margin-right: 0;
 margin-left: 0;
 width: auto;
 font-size: 1em;
}

.forecast-container .image img {
 top: 15%;
}
.hourly_extra_data span.hourly_title {
 font-weight: 700;
 font-size: 14px;
}

.box.hourly {
 padding: 0;
}

.box.hourly th, .box.hourly td {
 padding: 5px 0;
 font-weight: 400;
 text-align: center;
}

.box.hourly span.kph,.box.hourly span.mm {
 font-size: 10px;
}

.box.hourly table td, .box.hourly table th {
 border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
.hourly_extra_data span {
  font-size: 12px;
}
.hourly_extra_data {
 text-align:right;
}
.tooltip {
 position: relative;
 z-index: 1000;
}
.hourly-mark {
 border-bottom: 1px dotted #fcd859;
}
.tooltip .tooltiptext {
 visibility: hidden;
 position: absolute;
 width: 230px;
 background-color: #000;
 color: #fff;
 text-align: right;
 font-weight: normal;
 padding: 5px 5px;
 border-radius: 6px;
 z-index: 1;
 opacity: 0;
 transition: opacity 0.3s;
}
.tooltip-top {
 bottom: 125%;
 margin-left: -60px;
}

.tooltip-top::after {
 content: "";
 position: absolute;
 top: 100%;
 left: 90%;
 margin-left: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: #000 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
 visibility: visible;
 opacity: 1;
}
th.tooltip:hover {
 color: #fcd859;
}
.box.hourly table tr:last-child td, .box.hourly table tr:last-child th {
 border-bottom: 0;
}

.forecast-buttons-container {
 position: fixed;
 left: 0;
 border-bottom:10px solid #d9d9d9;
 bottom: 0;
 width: 100%;
 z-index: 1000;
}
ul.top-forecast-buttons {
 overflow-x: auto;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 width: 100%;
 padding: 0;
 margin: 0 auto;
 direction: rtl;
 white-space: nowrap;
}
ul.top-forecast-buttons li {
 width: 20%;
 display: inline-table;
 margin:0;
}
@media screen and (min-width:180px) and (max-width:320px){
 ul.top-forecast-buttons li {width: 19%;}
} 
ul.top-forecast-buttons li:last-child {
 margin-left: 0;
}
ul.top-forecast-buttons li span {
 display: block;
 padding:0;
}
ul.top-forecast-buttons li img {
 vertical-align: bottom;
}
.forecast-button {
 color: #000;
 font-weight: 400;
 font-size: 0.8rem;
 padding: 6px 0 6px 0;
 display: block;
}
/*------------------------------| RADAR |------------------------------*/

.image-container {
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: #333;
 text-align: center;
 margin: 0 auto;
}

.image-container img
{
 max-width: 100%;
 max-height: 100%;
}
#opacityRange::-webkit-slider-runnable-track {
  background: none;
  height: 8px;
}
#rain-radar {background: #333;}
#rain-radar #slider-container,
#satellite #slider-container,
#rain-radar-jordan #slider-container
{
 direction: ltr;
 position: absolute;
 width: 100%;
 bottom: 4em;
 display: -webkit-flex; /* NEW */
 display: flex;
 -webkit-flex-wrap: wrap; /* NEW */
 flex-wrap: wrap;
 justify-content: center; 
}

#rain-radar #slider-container .player-controls,
#satellite #slider-container .player-controls,
#rain-radar-jordan #slider-container .player-controls
{
 /*position: absolute;*/
 bottom: 0;
 margin: 0 2% 0 0;
 cursor: pointer;
 line-height: 1;
 -webkit-tap-highlight-color: transparent; 
}
#rain-radar #slider-container .player-controls-refresh,
#satellite #slider-container .player-controls-refresh,
#rain-radar-jordan #slider-container .player-controls-refresh
{
 /*position: absolute;*/
 bottom: 0;
 margin:0 2%;
 cursor: pointer;
 line-height: 1;
 -webkit-tap-highlight-color: transparent; 
}
#rain-radar #slider-container .range-field,
#satellite #slider-container .range-field,
#rain-radar-jordan #slider-container .range-field
{
 position: absolute;
 bottom: 15px;
 left: 45px;
 right: 15px;
}
.radar-clouds-sidenav {
 display: block;
 height: 18px;
 right: 10px!important;
 margin: 0;
 z-index: 455!important;
 padding: 0px;
 position: absolute!important;
 top: 92px;
 width: 32px;
 outline: none;
}
#radar-clouds iframe {
 width: 100%;
 height: 100%;
 border: 0;
 position: fixed;
 padding-top: 50px;
 bottom: 0;
 left: 0;
 right: 0;
}
#meduzot iframe {
 width: 100%;
 height: 100%;
 border: 0;
 position: fixed;
 top: 23px;
 bottom: 0;
 left: 0;
 right: 0;
}
#radar-clouds .model.selected {
  padding: 0 0.6em;
}
/*------------------------------| rainRadarLegend |------------------------------*/
.makamRadarLegend {
 padding: 0;
 background: rgba(0, 0, 0, 0.47);
 color: white;
 direction: rtl;
 position: absolute;
 bottom: 0;
 width: 100%;
 z-index: 10;
 right: 0px;
}

.makamRadarLegend .legendTitle {
 font-size: 10px;
 text-align: center;
}
.makamRadarLegend .colorsWrapper {
 text-align: center;
}
.makamRadarLegend .colorsWrapper .legend {
 display: inline-block;
 font-family: Arial;
 font-size: 10px;
 padding-left: 1px;
 text-align: center;
 padding-top: 2px;
}
.makamRadarLegend .colorsWrapper .legend .legendBreak {
 width: 17px;
 height: 6px;
}
.makamRadarLegend.app {
 bottom: 48px!important;
 position:fixed;
}
.makamRadarLegend.app {
 background: rgba(255, 255, 255, 0.7);
 color: #000;
 position: inherit;
}
.app >.makamRadarLegend .legendTitle {
 line-height: 20px;
 margin: 0 2px;
}
.app1 >.makamRadarLegend .colorsWrapper {
 text-align: center;
}
.app1 >.makamRadarLegend .colorsWrapper .legend {
 display: inline-block;
 font-family: Arial;
 font-size: 9px;
 padding-left: 0!important;
 text-align: center;
 position: relative;
 padding-top: 0!important;
}
.app >.makamRadarLegend .colorsWrapper .legend .legendBreak {
 width: 16.2px!important;
}
@media screen and (min-width:180px) and (max-width:320px){
 .app >.makamRadarLegend .colorsWrapper .legend .legendBreak {width: 10.2px!important;}
}
.app1 >.makamRadarLegend .colorsWrapper .legend span {
 color: #FFF;
 position: absolute;
 top: 0;
 right: 2px;
 text-shadow: 1px 0 #000;
}

/*------------------------------| Leafelt |------------------------------*/

/*------------------------------| SLIDER |------------------------------*/
#slider-container.app {
 height: 90px;
 position: fixed;
 padding: 20px 0;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
#play, #pause, #refresh{
 font-size: 38px;
 color: rgb(255, 255, 255);
 background: rgba(86, 86, 86, 0.8);
 border-radius: 20px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
 #play:active, #pause:active,#refresh:active, #plus1:active, #minus1:active{
 transform: translateY(2px);
 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
 }
#refresh{
 -webkit-transition-duration: 2s linear;
 -moz-transition-duration: 2s linear;
 -o-transition-duration: 2s linear;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 outline: 0;
}
#refresh:active {
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
} 
.makam input[type=range] {
 border: 1px solid #000;
 border-radius: 18px;
}
.makam #slider::-webkit-slider-runnable-track {
 background: rgba(255, 255, 255, 0.8);
}
.makam #slider:focus::-webkit-slider-runnable-track
{
 background: rgba(255, 255, 255, 0.8);
}
.makam input[type=range] {
 border: 0;
}
.makam #slider::-webkit-slider-thumb {
 border: 1px solid #333;
}

input[type=range] {
 border: 0;
 border-radius: 18px;
 margin: 10px 0px 12px;
}

#slider {
 -webkit-appearance: none;
 width: 60%;
 left: auto;
}
#slider:focus {
 outline: none;
}
#slider::-webkit-slider-runnable-track {
 width: 100%;
 /*height: 11.4px;*/
 height: 7px;
 border-color: #333;
 cursor: pointer;
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 background:rgba(255, 255, 255, 0.8);
 border-radius: 5.5px;
 /*border: 0.2px solid #010101;*/
}
#slider::-webkit-slider-thumb {
 box-shadow: 0.9px 0.9px 1px #000031, 0px 0px 0.9px #00004b;
 border: 1px solid #333;
 height: 32px;
 width: 32px;
 border-radius: 15px;
 background: #FFF;
 cursor: pointer;
 -webkit-appearance: none;
 margin-top: -12px;
}
#slider:focus::-webkit-slider-runnable-track {
 background: rgba(54, 126, 189, 0.78);
}
#slider::-moz-range-track {
 width: 100%;
 height: 11.4px;
 cursor: pointer;
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 background: rgba(48, 113, 169, 0.78);
 border-radius: 1.3px;
 border: 0.2px solid #010101;
}
#slider::-moz-range-thumb {
 box-shadow: 0.9px 0.9px 1px #000031, 0px 0px 0.9px #00004b;
 border: 1.8px solid #00001e;
 height: 32px;
 width: 32px;
 border-radius: 15px;
 background: #ffffff;
 cursor: pointer;
}
#slider::-ms-track {
 width: 100%;
 height: 11.4px;
 cursor: pointer;
 background: transparent;
 border-color: transparent;
 color: transparent;
}
#slider::-ms-fill-lower {
 background: rgba(42, 100, 149, 0.78);
 border: 0.2px solid #010101;
 border-radius: 2.6px;
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
#slider::-ms-fill-upper {
 background: rgba(48, 113, 169, 0.78);
 border: 0.2px solid #010101;
 border-radius: 2.6px;
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
#slider::-ms-thumb {
 box-shadow: 0.9px 0.9px 1px #000031, 0px 0px 0.9px #00004b;
 border: 1.8px solid #00001e;
 height: 32px;
 width: 32px;
 border-radius: 15px;
 background: #ffffff;
 cursor: pointer;
 height: 11.4px;
}
#slider:focus::-ms-fill-lower {
 background: rgba(48, 113, 169, 0.78);
}
#slider:focus::-ms-fill-upper {
 background: rgba(54, 126, 189, 0.78);
}

#slider + .thumb {
 display: none;
}

/*------------------------------| Rain Forecast show |------------------------------*/
.rain-container {
 position:fixed;
 bottom:65px; 
 background: #FFF;
 text-align: center;
 width: 100%;
}
#rain {
 direction: rtl;
}

/*------------------------------| MODAL IN FORECAST TPL |------------------------------*/
#forecast .row .col {
 padding: 0 0.5em;
}
#more {
top: auto!important;
bottom: 12%;
width: 95%;
}
#alerts {
  margin: 2% auto;
}
#alerts .modal-footer , #weather .modal-footer {
 height: auto;
}
.alerts-modal, .facebook-modal {
 background-color: #fafafa;
 padding:0px;
 max-height: 85%;
 width: 95%;
 z-index: 10000000000;	
}
.modal-footer {
 padding:0;
 margin:0;
 height: auto;
}
.alerts-title {
 background-color: #c9302c;
 padding: 5px;
 color: #fff;
 margin: 0;
}
.facebook-title {
 background-color: #4267b2;
 padding: 5px;
 color: #fff;
 margin: 0;
}
.center-buttons {
 position: fixed;
 bottom: 15px;
 width: 100%; 
 z-index: 10; 
 right: 0px;
 text-align: center;
}
.jw-icon-fullscreen {
 display: none;
}
.video-window {
 background: #000;
 width: 98%;
 height: 280px;
}

.live-bg, .about-bg {
 background-image: url(/images/blue-sky.jpg);
 background-repeat: repeat-y;
}
#about,#live {
 position: relative;
 z-index: 2;
}
#about .opacity-container{
 background: rgba(255,255,255,.2);
 padding: 5px;
 color: #FFFFFF;
 margin: 10px;
 letter-spacing: 1px;
}
.live-container h2 {
 color: #FFFFFF;
 margin: 0;
 padding: 1em;
 display: block;
 font-size: 1.5em;
 font-weight: bold;
 text-align: center;
}

/*------------------------------| IMS FORECAST DAYS |------------------------------*/

#ims-forecast-container {
 margin-top: 0;
}

#ims-forecast-container ul.days {
 list-style: none;
 padding: 0;
 margin: 0;
}
#ims-forecast-container li.single-day:first-child .title {
 /*background-color:rgba(185, 234, 255,0.45) ;*/
 color: #fff;
}
#ims-forecast-container .single-day {
 float: right;
 margin-right: 11px;
}

#ims-forecast-container .info {
 /*padding: 5px;*/
 padding: 10px 5px 18px 0;
 font-size: 14px;
}

#ims-forecast-container li.single-day:first-child {
 margin-right: 0;
 margin-top: 0;
 width: 415px;
}

#ims-forecast-container li.single-day:nth-child(2) {
 width: 230px;
}

#ims-forecast-container li.single-day:nth-child(3) {
 width: 210px;
}

#ims-forecast-container li.single-day:nth-child(4) {
 width: 190px;
}

#ims-forecast-container .info .sub-title {
 display: block;
 font-weight: 700;
 color: #fff799;
}

#ims-forecast-container .info .sub-title:nth-child(2) {
 margin-top: .5em;
}

#ims-forecast-container .title {
 font-weight: 700;
 color: #FFF;
 text-align: right;
 padding: 0 5px;
 font-size: 16px;
 border-bottom: 2px solid #FFF;
}

 
#ims-forecast-container li.single-day img {
 margin: 15px auto; 
 display: block;
}
#ims-forecast-container li.single-day .wi {
 /*margin: 25px 0 10px 25px;*/
 margin: 10px 0 10px 10px;
 text-align: center;
 color: #fff;
 font-size: 1.5em;
}

.forecast-latest-update {
 font-size: 10px;
 color: rgba(255,255,255,0.5);
 padding-top: 5px;
 margin-right: 5px;
 direction: ltr;
 clear: both;
}

@media screen and (max-width: 736px) {
  #ims-forecast-container li.single-day:first-child, 
  #ims-forecast-container li.single-day:nth-child(2),
  #ims-forecast-container li.single-day:nth-child(3),
  #ims-forecast-container li.single-day:nth-child(4)
  {
   width: 100%;
  }
  #ims-forecast-container .single-day {
   float: none;
   width: 100%;
   margin-top: 15px;
   margin-right: 0;
  }
}

.hidden
{
  display: none !important;
}

.hidden-soft
{
  display: none;
}

#site-login .spinner
{
  display: inline-block;
  vertical-align: middle;
}

#site-login fieldset
{
  border: none;
}