@import url("scripts/normalize.min.css");
@import url("__font_assistant/fonts.css");
@import url("__font_icons/style.css");

HTML {font-size: 100%; /* IE hack */}
*{margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
*{box-sizing: border-box;}
*[aria-hidden="true"]{display: none;}
*{-webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: transparent;}
*:focus{outline: 1px dashed #ffffff; outline-offset: 1px;}
*:active:focus{outline: 1px dashed #ffffff; outline-offset: 1px;}
BODY{direction: rtl; font-weight: 400; font-family: 'Assistant', Arial, Helvetica, sans-serif; background-color: #000000; color: #ffffff;}
.centeredContent{padding: 0px 66px;}
IMG {border: 0px;}
button{cursor: pointer;}
input, select, textarea{font-family: 'Assistant', Arial, Helvetica, sans-serif; font-weight: 400; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}

h1, h2, h3, h4, h5, strong, B{font-weight: 700; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
ul, li{list-style: none;}
a{text-decoration: none;}
fieldset{margin: 0px; padding: 0px; border: 0; display: block; width: 100%;}
legend{position: static; text-align: right; width: 100%; display: block;}
i[role="img"][aria-hidden="true"]{display: inline;}

/* -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- */
a.skip-main{font: 400 12px arial; color: #2b2d3a; background-color: white; position: absolute; left: 50%; margin-left: -55px; top: 0px; padding: 2px 4px; opacity: 0;}
a.skip-main:focus, a.skip-main:active{opacity: 1; z-index:999;}

.tzurLogo{padding-top: 80px; padding-bottom: 12px; text-align: center;}
.tzurLogo a{display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; color: white;}
.tzurLogo img{width: 50px;}
.tzurLogo span{font-size: 16px; line-height: 16px; padding-left: 7px;}

/* login */
.loginPage{position: relative; min-height: 100vh;}
.loginBG{width: 100%; height: 100%; background-color: #000000; overflow: hidden; position: absolute; left: 0; top: 0;}
.loginBG img{display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; pointer-events: none;}
.loginContent{position: relative; z-index: 1;}
.loginContent_centered{padding: 50px 200px 0px;}

.loginFrame{max-width: 600px; display: flex; flex-direction: column; height: 100%;}
.loginLogo{margin: 0 auto; max-width: 182px; width: 100%;}
.loginLogo a{display: block; text-decoration: none;}
.loginLogo img{display: block; width: 100%;}
.loginFrame h1{text-align: center; font-size: 48px; padding-top: 40px;}

ul.loginJunction{padding-top: 5px;}
ul.loginJunction li{padding-top: 20px;}
ul.loginJunction li a{position: relative; display: flex; flex-direction: column; justify-content: center; height: 110px; padding: 0px 122px 0px 0px; color: #2b2d3a; border-radius: 14px;}
ul.loginJunction li a strong{font-size: 24px; line-height: 24px;}
ul.loginJunction li a span{font-size: 18px; line-height: 18px; padding-top: 3px;}
ul.loginJunction li a I{position: absolute; right: 36px; top: 50%; transform: translate(0, -50%); font-size: 44px;}
ul.loginJunction li a.loginJunction_cloud{background-color: #cde0fa;}
ul.loginJunction li a.loginJunction_etgar{background-color: #cce5e8;}
ul.loginJunction li a.loginJunction_etrog{background-color: #e5dff6;}
ul.loginJunction li a.loginJunction_cloud I{color: #1b72e4;}
ul.loginJunction li a.loginJunction_etgar I{color: #007e8a;}
ul.loginJunction li a.loginJunction_etrog I{color: #7f5ed4;}

.loginMessage{margin-top: 88px; background-color: rgba(255, 255, 255, 0.1); color: white; padding: 22px 40px 25px; font-size: 18px; line-height: 22px; border-radius: 14px;}
.loginMessage P{padding-top: 6px;}

@media screen and (max-width: 1600px) {
    .loginContent_centered{padding: 36px 150px 0px;}
    .loginFrame h1{font-size: 40px; padding-top: 36px;}
    .loginFrame{max-width: 540px;}
    
    ul.loginJunction li a{height: 96px; padding: 0px 100px 0px 0px;}
    ul.loginJunction li a I{right: 32px; font-size: 40px;}
    
    .loginMessage{margin-top: 44px;}
    .tzurLogo{padding-top: 48px;}
}

@media screen and (max-width: 1400px) {
    .loginContent_centered{padding: 36px 100px 0px;}
    .loginLogo{max-width: 142px;}
    .loginFrame h1{font-size: 36px; padding-top: 36px;}
    
    ul.loginJunction li a{height: 72px; padding: 0px 80px 0px 0px;}
    ul.loginJunction li a I{right: 28px; font-size: 30px;}
    ul.loginJunction li a strong{font-size: 21px; line-height: 24px;}

    .loginMessage{margin-top: 32px; padding: 18px 32px 22px; font-size: 16px; line-height: 22px;}
    .loginMessage P{padding-top: 4px;}
    .tzurLogo{padding-top: 36px;}
}

@media screen and (max-width: 1280px) {
    .loginContent_centered{padding: 36px 66px 0px;}
}

@media screen and (max-width: 1024px) {
    .loginContent_centered{padding: 36px 40px 0px;}
}

@media screen and (max-width: 767px) {
    .loginContent_centered{padding: 24px 40px 0px;}
    .loginLogo{max-width: 128px;}
    .loginFrame{max-width: 480px;}
    .loginFrame h1{font-size: 30px; padding-top: 24px;}
    
    .loginMessage{background-color: rgba(255, 255, 255, 0.7); color: #2b2d3a;}
}

@media screen and (max-width: 480px) {
    .loginContent_centered{padding: 21px 22px 0px;}
    .loginFrame h1{font-size: 24px; padding-top: 24px;}
    ul.loginJunction li{padding-top: 14px;}
    
    ul.loginJunction li a{height: 64px; padding: 0px 72px 0px 0px;}
    ul.loginJunction li a I{right: 22px; font-size: 26px;}
    ul.loginJunction li a strong{font-size: 18px; line-height: 24px;}
    ul.loginJunction li a span{font-size: 16px; line-height: 16px; padding-top: 3px;}

    .loginMessage{padding: 18px 22px 16px;}
}


/* login form */
.loginForm{padding-top: 5px;}
.loginForm li{padding-top: 15px;}
.loginForm li label{display: block; position: relative;}
.loginForm li label input{display: block; width: 100%; height: 70px; padding-top: 12px; font-size: 24px; text-indent: 60px; border: 0px; border-radius: 14px; color: #2b2d3a;}
.loginForm li label .labelText{pointer-events: none; position: absolute; right: 60px; top: 20px; z-index: 1; font-size: 24px; transition: all 0.3s ease-in-out; color: #2b2d3a;}
.loginForm li label.activeInput span.labelText{top: 4px; font-size: 18px; font-weight: 700;}
.loginForm li label I{position: absolute; right: 18px; top: 50%; transform: translate(0, -50%); font-size: 24px;}
.loginForm ul li:nth-child(1) label I{color: #7f5ed4;}
.loginForm ul li:nth-child(2) label I{color: #007e8a;}
.loginForm ul li:nth-child(3) label I{color: #c94092;}
.loginForm ul li:nth-child(4) label I{color: #7f5ed4;}
.loginForm ul li:nth-child(5) label I{color: #007e8a;}

.loginForm_captcha{margin-bottom: 15px; background-color: white; border-radius: 15px; height: 110px; display: flex; align-items: center; justify-content: center;}
.loginForm_captcha img{width: 80%; max-width: 434px;}
.loginForm_error{font-size: 18px; color: #ff5151; padding: 5px 18px 0px 0px;}

.loginForm_submit{padding-top: 18px;}
.loginForm_submit button{border: 0; background-color: #1b72e4; color: white; border-radius: 14px; height: 70px; width: 100%; font-weight: 700; font-size: 24px;}

.loginForm_check{padding-top: 20px;}
.loginForm_check label{display: inline-block; position: relative; cursor: pointer;}
.loginForm_check label input{position: absolute; opacity: 0;}
.loginForm_check label span{font-size: 18px; line-height: 21px; display: block; padding-right: 32px;}
.loginForm_check label a{color: white; text-decoration: underline;}
.loginForm_check label span:before{content: ''; position: absolute; right: 0; top: 0; box-sizing: border-box; width: 21px; height: 21px; background-color: white; border: 1px solid #bfc0c1; border-radius: 4px;}
.loginForm_check label span:after{display: none; text-align: center; font-size: 14px; line-height: 21px; content: "\e904"; font-family: 'icomoon' !important; position: absolute; right: 0; top: 0; box-sizing: border-box; width: 21px; height: 21px; color: #2b2d3a;}
.loginForm_check label input:checked + span:after{display: block;}
.loginForm_check label input:focus + span{outline: 1px dashed #ffffff; outline-offset: 1px;}


@media screen and (max-width: 1400px) {
    .loginForm li label input{height: 54px; font-size: 21px;}
    
.loginForm li label .labelText{top: 16px; font-size: 21px;}
.loginForm li label.activeInput span.labelText{top: 3px; font-size: 16px;}

    
}