@font-face {
font-family: "SF Thin";
font-weight: 300;
src: url("https://sf.abarba.me/SF-UI-Display-Thin.otf");
}
@font-face {
font-family: "SF Display";
font-weight: 400;
src: url("https://sf.abarba.me/SF-UI-Display-Regular.otf");
}
@font-face {
font-family: "SF Light";
font-weight: 200;
src: url("https://sf.abarba.me/SF-UI-Display-Light.otf");
}
@font-face {
font-family: 'Lato Light';
src: url('../font/Lato-Light.eot');
src: url('../font/Lato-Light.eot?#iefix') format('embedded-opentype'),
url('../font/Lato-Light.woff') format('woff'),
url('../font/Lato-Light.ttf') format('truetype'),
url('../font/Lato-Light.svg#80d8021909d835b751af094d043ad177') format('svg');
font-style: normal;
font-weight: 200;
}
@font-face {
font-family: 'Lato';
src: url('../font/Lato-Regular.eot');
src: url('../font/Lato-Regular.eot?#iefix') format('embedded-opentype'),
url('../font/Lato-Regular.woff') format('woff'),
url('../font/Lato-Regular.ttf') format('truetype'),
url('../font/Lato-Regular.svg#80d8021909d835b751af094d043ad177') format('svg');
font-style: normal;
font-weight: 200;
}
.header {
width: 100%;
height: 44px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
flex-direction: row;
background-color: rgb(50, 50, 50);
}
.apple-icon-wrapper {
display: flex;
justify-content: center;
margin-left: 14px;
width: 16px;
}
.apple-icon-right {
position: absolute;
right: 0;
top: 0;
justify-content: center;
margin-right: 14px;
width: 16px;
}
.apple-icon {
fill: white;
width: 16px;
height: 44px;
}
.apple-ico {
fill: white;
width: 22px;
height: 44px;
}
#header .rightH > span.spreat {
position: relative;
width: 1px;
background: #fff;
height: 22px;
margin: -2px 7px 0 8px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
opacity: 0.9; }
#header .rightH > a.setup {
position: absolute;
color: #fff;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
opacity: 0.7;
top: 8px;
right: 58px;
font: 21px 'Lato', Tahoma;
}
#header .rightH > a.setup:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 1; }
footer.foot .apple {
position: relative;
float: left !important
}
footer.foot .apple a.apple-logo {
position: absolute;
display: inline-block;
float: left !important;
width: 30px;
height: 35px;
background: transparent url("../img/apple.png") no-repeat;
left: 3px;
top: 4px;
z-index: 9999;
}
footer.foot .foot-link {
position: relative;
text-align: right;
padding-top: 10px;
direction: ltr;
color: #ffffff;
font-family:"SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 13px;
font-weight: 500 !important; }
footer.foot .foot-link a {
position: relative;
display: inline-block;
color: #ffffff;
padding: 0 12px;
letter-spacing: 0.5px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7; }
footer.foot .foot-link a:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1; }
footer.foot .foot-link span.copyright {
padding: 0 5px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7; }
footer.foot .foot-link span.footer-link-separator {
position: relative;
display: inline-block;
height: 10px;
width: 1px;
background: #ffffff;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
opacity: 0.2; }
@media screen and (max-width: 600px) {
#header .rightH > span.spreat {
visibility: hidden;
}
html{
overflow-x: hidden;
}
body{
max-width: 100%;
overflow-x: hidden;
}
footer.foot .foot-link {
visibility: hidden;
}
#header .rightH > a.setup {
visibility: hidden;
}
footer.foot .apple a.apple-logo {
float: left !important;
}
footer.foot{
z-index: 9999;
margin-top: 5px !important;
bottom: 0px;
width: 100%;
background: transparent;
height: 41px;
text-align: left;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif!important;
}
}
stylesheet-packed.css:97
html {
display: none;
}
stylesheet-packed.css:9
html {
-ms-content-zooming: none;
}
html {
background-attachment: fixed;
background-size: contain;
height: 100%;
min-height: 100%;
background-image: url(../../images/bgiCloudNew.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: initial;
}
body {
position: relative;
padding: 0;
margin: 0;
overflow-x: hidden !important;
background-repeat: none;
background-attachment: fixed;
background-size: contain;
height: 100%;
min-height: 100%;
direction: ltr;
height: 100vh;
font-family: 'Lato Light', Tahoma;
min-width: 100%;
m-width: 100%;
-webkit-font-smoothing: antialiased;
background-image: url(../../images/bgiCloudNew.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: initial;
}
body.find {
background: #e0e0e0 repeat-x top left;
background-image: url("../img/mapafind.png"), url("../img/map2.png");
background-size: cover;
}
.hiden {
display: none !important; }
.show {
display: block !important; }
.snippet-container {
word-break: break-all;
text-align: left !important;
white-space: nowrap;
word-wrap: break-word;
max-height: 200px !important;
overflow-z: auto; }
.applef {
font-size: 11px;
font-family: 'Lato Light', Tahoma;
font-weight: 300 !important;
}
a, a:hover, input {
text-decoration: none;
outline: none !important; }
.container-fluid {
padding: 0 10px !important; }
#header .rightH {
position: relative;
min-height: 44px;
padding-top: 11px; }
#header .rightH a, #header .rightH span {
cursor: default;
display: inline-block;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease; }
#header .rightH > a.help {
position: relative;
height: 22px;
width: 22px;
padding: 0 10px;
background: url("../img/help.png") no-repeat 0px 0px;
margin-right: 3px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8; }
#header .rightH > a.help:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
opacity: 0.6; }
#header .leftH {
position: relative; }
#header .leftH span.icloud {
position: absolute;
display: inline-block;
width: 56px;
height: 16px;
background: url("../img/icloud.png") no-repeat 0 0;
top: 14px;
left: 13px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
z-index: 9999;
}
#header2 {
background: #fff;
color: #24a337; }
#header2 .rightH {
position: relative;
min-height: 44px;
padding-top: 11px; }
#header2 .rightH a, #header2 .rightH span {
cursor: default;
display: inline-block;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease; }
#header2 .rightH > a.help {
position: relative;
height: 22px;
width: 22px;
padding: 0 10px;
background: url("../img/help2.png") no-repeat 0px 0px;
margin-right: 3px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8; }
#header2 .rightH > a.help:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
opacity: 0.6; }
#header2 .rightH > span.spreat {
position: relative;
width: 1px;
background: #24a337;
height: 22px;
margin: -2px 7px 0 8px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
opacity: 0.9; }
#header2 .rightH > a.setup {
position: absolute;
color: #24a337;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
opacity: 0.6;
top: 8px;
right: 58px;
font: normal 21px 'Lato', Tahoma;
}
#header2 .rightH > a.setup:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8; }
#header2 .leftH {
position: relative; }
#header2 .leftH span.find {
position: absolute;
left: 75px;
top: 10px;
font: normal normal 300 20px 'Lato', Tahoma, Verdana, Segoe, sans-serif; }
#header2 .leftH span.icloud {
position: absolute;
display: inline-block;
width: 56px;
height: 16px;
background: url("../img/icloud.png") no-repeat;
background-position: -56px 0;
top: 14px;
left: 13px;
float: left;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8; }
#header2 .leftH a {
position: relative;
color: #24a337;
font: normal normal 500 20px 'Lato Light', Tahoma, Verdana, Segoe, sans-serif;
top: 10px;
right: 140px; }
.imessage {
position: relative;
margin: 65px auto 0 auto;
min-height: 200px;
width: 100%;
text-align: center !important;
direction: ltr !important; }
.imessage a {
position: relative;
display: block; }
.imessage a img {
position: relative;
width: 130px;
height: 130px;
display: block;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
z-index: 9999;
}
.imessage a span {
position: relative;
display: block;
font: 18px 'Lato', Tahoma, Verdana, Segoe, sans-serif;
color: #fff;
text-align: center;
padding: 15px 0 50px 0;
text-shadow: 1px 1px 14px rgba(0,0,0,0.5); }
.login-form {
position: relative;
width: 324px;
margin: 0 auto 0 auto;
padding-top: 5%;
z-index: 9999;
}
.login-form img.img-cloud {
position: relative;
margin-top:20px;
z-index: 9999;
}
.login-form h3 {
position: relative;
-webkit-font-smoothing: antialiased;
color: #494949;
z-index: 99999;
font-family: 'SF Display';
font-size: 21px;
font-weight: 400;
}
.login-form form.cloud-login {
position: relative;
background: rgba(255, 255, 255, 0.75);
background-clip: padding-box;
border-radius: 6px;
cursor: default;
margin-top: 20px;
z-index: 99999;
}
.login-form form.cloud-login input[type=email], .login-form form.cloud-login input[type=password] {
position: relative;
width: 100%;
padding: 13px 10px;
border: 0px;
background: white;
text-align: left;
font-size: 17px;
line-height: 1.29412;
font-weight: 400;
letter-spacing: -0.021em;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
z-index: 9999;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
outline: none !important;
border: 1px solid #d6d6d6;
}
.login-form form.cloud-login > input[type=email] {
border-radius: 6px 6px 0 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.login-form form.cloud-login > input[type=email]:focus {
box-shadow: 0 0 0 1px #078DFA; }
.login-form form.cloud-login > input[type=password] {
z-index: 99;
border-radius: 0 0 6px 6px;
direction: rtl !important; }
.login-form form.cloud-login > input[type=password]:focus {
box-shadow: 0 0 0 1px #078DFA; }
.dolo{
position: absolute;
top: 12px;
right: 12px;
background: transparent url("../img/login.png") no-repeat;
width: 26px;
height: 26px;
border: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.3;
z-index: 99999;
}
.dolog{
position: absolute;
top: 58px;
right: 12px;
background: transparent url("../img/login.png") no-repeat;
width: 26px;
height: 26px;
border: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.3;
z-index: 99999;
}
.dologx{
position: absolute;
top: 65px;
right: 1px;
background: transparent url("../img/login.png") no-repeat;
width: 26px;
height: 26px;
border: none;
z-index: 99999;
background-color:#fff;
border-radius: 18px;
}
.login-form form.cloud-login img.loading {
position: absolute;
top: 60px;
right: 12px;
width: 26px;
height: 26px;
border: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
z-index: 999;
display: none; }
.login-form form.cloud-login .alrt {
position: absolute;
z-index: 9999;
width: 320px;
right:0;
left: 0;
margin: 0 auto;
background: #f5e49c;
direction: ltr;
padding: 6px 10px 8px 10px;
top: 110px;
border-radius: 6px;
border: 1px rgba(80, 62, 48, 0.5) solid;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
display: none; }
.login-form form.cloud-login .alrt:after {
position: absolute;
top: -13px;
left: 0;
right: 0;
margin: 0 auto;
content: " ";
width: 0;
height: 0;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-bottom: 13px solid #f5e49c;
z-index: 99999; }
.login-form form.cloud-login .alrt h3 {
margin: 0;
padding: 0;
font: 16px 'Lato', Tahoma;
color: #503e30;
text-align: left; }
.login-form form.cloud-login .alrt p {
margin: 0;
padding: 0;
font: 14px 'Lato Light', Tahoma;
color: #503e30;
text-align: left; }
.login-form form.cloud-login .alrt a {
position: absolute;
right: 10px;
top: 11px;
border-radius: 4px;
font: bold 16px 'Lato Light', Tahoma;
border: 1px rgba(80, 62, 48, 0.3) solid;
color: #503e30;
padding: 5px 10px; }
.login-form .keepme {
position: relative;
display: block;
text-align: center;
color: #000;
font-size: 16px !important;
font-family: 'SF Light';
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.9; }
.login-form .forget {
position: relative;
margin-top: 40px;
display: block;
background: transparent url("../img/forgetbg.png") no-repeat top center;
padding: 15px 0;
color: #ffffff;
font-family: 'Lato', Tahoma;
text-align: center;
z-index: 9999;
}
.login-form .forget a {
color: #2980B9;
opacity: 0.8;
text-decoration: block;
direction: ltr !important;
z-index: 9999;
}
.login-form .forget a:hover {
opacity: 1;
z-index: 9999;
text-decoration: underline;
}
.login-form .newid {
position: relative;
margin-top: 0px;
display: block;
color: #000;
font-family: 'Lato', Tahoma;
text-align: center;
z-index: 9999;
}
.login-form .newid a {
color: #2980B9;
opacity: 0.8;
z-index: 9999;
direction: ltr !important; }
.login-form .newid a:hover {
opacity: 1;
z-index: 9999;
text-decoration: underline;
}
.dologin {
background: transparent url("../img/login2.png") no-repeat !important;
z-index: 999 !important; }
footer.foot {
z-index: 9999;
margin-top: 180px;
bottom: 0px;
width: 100%;
background: transparent;
height: 41px;
text-align: left;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif!important;
}
footer.foot .foot-link {
position: relative;
text-align: center;
padding-top: 10px;
direction: ltr;
color: #7f7f7f;
font-size: 11px;
font-weight: bold !important;
font-family: 'SF Thin';
letter-spacing: 0px;
}
footer.foot .foot-link a {
position: relative;
display: inline-block;
color: #7f7f7f;
padding: 0 5px;
letter-spacing: 0.5px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7; }
footer.foot .foot-link a:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1; }
footer.foot .foot-link span.copyright {
padding: 0 5px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7; }
footer.foot .foot-link span.footer-link-separator {
position: relative;
display: inline-block;
height: 10px;
width: 1px;
background: #7f7f7f;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
opacity: 0.2; }
.text-center {
text-align: center !important; }
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0; }
* html .clearfix {
zoom: 1; }
*:first-child + html .clearfix {
zoom: 1; }
#compass {
position: absolute;
z-index: 999;
height: 100vh;
min-height: 100%;
width: 100%;
background: #e0e0e0 repeat-x top left;
background-image: url("../img/map.png"), url("../img/map2.png");
background-size: cover; }
#compass .compass {
position: relative;
display: block;
width: 222px;
height: 222px;
margin: 0 auto;
top: 100px; }
#compass .compass img {
position: absolute; }
#compass .compass img.compass1 {
top: 7px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
-webkit-animation: compass-oscillate 3s ease-in-out infinite;
animation: compass-oscillate 3s ease-in-out infinite; }
#compass .compass img.compass2 {
top: 75px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto; }
#compass .compass img.compass3 {
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto; }
#compass .compass span {
position: absolute;
display: block;
text-align: center;
color: #777;
font: normal normal 300 20px 'Lato', Tahoma, Verdana, Segoe, sans-serif;
direction: ltr;
width: 100%;
bottom: -50px; }
.findmap {
position: absolute;
z-index: 99;
width: 100%;
height: 100%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto; }
@-webkit-keyframes compass-oscillate {
0% {
-webkit-transform: rotate(-25deg); }
70% {
-webkit-transform: rotate(35deg); }
100% {
-webkit-transform: rotate(-25deg); } }
@keyframes compass-oscillate {
0% {
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg); }
70% {
-webkit-transform: rotate(35deg);
transform: rotate(35deg); }
100% {
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg); } }
.ltr {
direction: ltr !important; }
.rtl {
direction: rtl !important; }
@media only screen and (min-width: 320px) and (max-width: 480px) {
footer.foot .apple {
left: 47%;
}
#header .rightH > a.setup {
font-size: 18px;
top: 10px;
}
#header2 .rightH > a.setup {
font-size: 18px;
top: 10px; }
.login-form {
width: 300px;
padding-top: 0px; }
.login-form form.cloud-login .alrt {
width: 300px;
right: 0px;
padding-bottom: 10px; }
.login-form form.cloud-login .alrt h3 {
font-size: 13px;
text-align: center; }
.login-form form.cloud-login .alrt p {
font-size: 13px;
margin-bottom: 10px;
text-align: center; }
.login-form form.cloud-login .alrt a {
padding: 2px 5px;
position: relative;
top: 0;
right: -40%;
margin-right: 150px; }
footer.foot {
height: auto;
position: relative;
text-align: center !important; }
footer.foot .foot-link {
text-align: center; }
}
#preloader {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-attachment: fixed;
background-size: contain;
height: 100%;
min-height: 100%;
z-index: 999999;
background-image: url(../../images/bgiCloudNew.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: initial;
}
#status {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-attachment: fixed;
background-size: contain;
height: 100%;
min-height: 100%;
z-index: 999;
background-image: url(../../images/bgiCloudNew.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: initial;
}
#status span {
position:absolute;
left:50%;
top:43%;
background-image:url(../img/loader.gif);
background-size: 20px;
background-repeat:no-repeat;
width: 80px;
height: 80px;
}