﻿@font-face {
    font-family: Heebo;
    src: url('../fonts/Heebo-Bold.woff2') format('woff2'),
    url('../fonts/Heebo-Bold.woff') format('woff'), 
    url('../fonts/Heebo-Bold.ttf') format('truetype'), 
    url('../fonts/Heebo-Bold.svg#svgFontName') format('svg'); 
    font-weight: 700;
}

@font-face {
    font-family: Heebo;
    src: url('../fonts/Heebo-Medium.woff2') format('woff2'),
    url('../fonts/Heebo-Medium.woff') format('woff'),
    url('../fonts/Heebo-Medium.ttf') format('truetype'), 
    url('../fonts/Heebo-Medium.svg#svgFontName') format('svg'); 
    font-weight: 500;
}

@font-face {
    font-family: Heebo;
    src: url('../fonts/Heebo-Regular.woff2') format('woff2'),
    url('../fonts/Heebo-Regular.woff') format('woff'), 
    url('../fonts/Heebo-Regular.ttf') format('truetype'), 
    url('../fonts/Heebo-Regular.svg#svgFontName') format('svg'); 
    font-weight: 400;
}

body {
    direction: rtl;
    margin: 0;
    font-size: 18px;
    font-family: Arial,Helvetica,sans-serif;
    color: #143a84;
    /* min-height:100vh;*/
}

.exitForm {
    background-color: transparent;
    border: none;
    padding: 0;
}

#environment {
    /*float: right;*/
    position:absolute;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: #143a84;
}

    a:hover, a:focus {
        text-decoration: underline;
    }

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input::-ms-clear, input::-ms-reveal {
    display: none;
}

input::-ms-clear {
    display: none;
}

.textIndent {
    text-indent: -300px;
}

select::-ms-expand {
    display: none;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('../images/selectArrow.png') no-repeat left 5px top 12px;
    background-size: 11px 11px;
}

legend {
    margin: 0px;
    font-size: 14px;
    color: #525558;
}

.displayNone {
    display: none !important;
}

.floatDiv {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 260px;
    background: #fff;
    padding: 20px;
    z-index: 1;
    border-radius: 5px;
}

/*#region master */
header {
    height: 66px;
    justify-content: center;
    display: flex;
    align-items: center;
    display: -ms-flexbox;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
}

.maccabi img {
    height: 36px;
    width: 95px;
}

.main {
    position: relative;
}


.full-width-image {
    height: 480px;
    position: relative;
}

    .full-width-image.regular {
        background: url(../images/backgroundImg.png) no-repeat;
        display: block;
        background-size: cover;
    }

    .full-width-image.kosher {
        background: url(../images/backgroundImgKosher.png) no-repeat top -56px left 0px;
        background-size: cover;
    }

#rc-imageselect, .g-recaptcha {
    transform: scale(0.74);
    -webkit-transform: scale(0.74);
    transform-origin: right top;
    -webkit-transform-origin: right top;
}


.form-row {
    height: 70px;
}

.technicalError {
    z-index: 10;
}
/*#endregion */
/*#region datePicker */

/*#endregion */
/*#region datePicker */
.ui-datepicker {
    top: 86px !important;
    /*  right: 50px !important;*/
    border-radius: 5px;
    width: 384px;
    /*min-height: 370px;*/
    background: #FFF;
    opacity: 0.95;
    z-index: 20 !important;
    /*left: initial !important;*/
}

.ui-datepicker-title {
    display: flex;
    justify-content: center;
}

.ui-datepicker-next, .ui-datepicker-prev {
    display: none;
}

.ui-datepicker-month, .ui-datepicker-year {
    color: #525558 !important;
    font-size: 14px;
    border-radius: 7px;
    border: solid 1px #ccccd0;
    width: 80px;
    height: 34px;
    padding-right: 5px;
}

.ui-datepicker-month {
    margin-left: 20px;
}

.ui-datepicker-calendar {
    border-collapse: separate;
    border-spacing: 28px 10px;
}

    .ui-datepicker-calendar thead th {
        font-size: 18px;
        color: #143a84;
        font-weight: normal !important;
        text-align: center;
    }

    .ui-datepicker-calendar tbody td {
        text-align: center;
    }

        .ui-datepicker-calendar tbody td a {
            color: #525558;
            width: 21px;
            height: 24px;
            display: block;
        }

        .ui-datepicker-calendar tbody td.ui-state-disabled span {
            color: #ceced2;
        }

.ui-datepicker-current-day, a.ui-state-hover {
    position: relative;
}

    .ui-datepicker-current-day a::after, a.ui-state-hover::after {
        content: "";
        position: absolute;
        width: 28px;
        height: 28px;
        background-color: #143a84;
        right: -2.5px;
        border-radius: 28px;
        z-index: -1;
        top: -1px;
    }

    .ui-datepicker-current-day a, .ui-datepicker-days-cell-over a:not(.ui-state-hover), .ui-datepicker-current-day a {
        color: #fff !important;
    }

a.ui-state-hover {
    color: #525558 !important;
    text-decoration: none;
}

    a.ui-state-hover::after {
        border: 2px solid #143a84 !important;
        background-color: transparent !important;
        text-decoration: none !important;
        top: -2px !important;
        right: -3px;
    }

.ui-datepicker-days-cell-over {
    position: relative;
}

    .ui-datepicker-days-cell-over a::after {
        content: "";
        position: absolute;
        width: 28px;
        height: 28px;
        background-color: #143a84;
        right: -2px;
        border-radius: 28px;
        z-index: -1;
        top: -1px;
        color: #fff !important;
    }

.ui-datepicker .title {
    text-align: center;
    font-size: 24px;
    margin: 20px 0;
}

    .ui-datepicker .title img {
        position: absolute;
        top: 20px;
        left: 20px;
    }

.heightBox {
    height: 24px;
}

.ui-datepicker-buttonpane {
    position: absolute;
    left: 20px;
    top: 22px;
}

    .ui-datepicker-buttonpane .ui-datepicker-close {
        border: none;
        background: url(../images/cancel.png) no-repeat;
        width: 20px;
        height: 20px;
    }
/*#endregion */
/*#region login */
.logo{
    margin:78px auto 60px;
    display:block;
}
.login {
    position: absolute;
    top: 20px;
    right: 50px;
    width: 384px;
    height: 370px;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
}

    .login h2 {
        font-size: 24px;
        text-align: center;
    }



.nav li {
    border-bottom: 2px solid #9a9a9a;
    text-align: center;
}

    .nav li a {
        color: #9a9a9a;
        text-decoration: none;
    }

.otpHeader::after {
    content: "";
    display: block;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    clear: both;
    position: absolute;
    left: 50%;
}

.otpHeader {
    color: #722c7b;
    font-weight: bold;
    width: 175px;
    text-align: center;
    margin: 0 auto;
    border-bottom: 2px solid #722c7b;
    font-weight: bold;
}

    .otpHeader::after {
        border-top: 7px solid #722c7b;
    }


.login .form-group {
    position: relative;
    border: 0px;
    padding: 15px 0 0px;
    height: 65px;
    margin-bottom: 0px;
}
.login .exitForm.exitText {
    color: #143a84;
    text-decoration: underline;
    cursor:pointer
}

.login .exitForm.positionTop {
    position: absolute;
    left: 20px;
    top: 20px;
}


.login #IdentifyWithOTP .form-group {
    /*   height: 70px;*/
}

.login .form-group a {
    position: absolute;
    left: 14px;
    top: 18px;
    border: 0px;
}

.login input {
    height: 34px;
    width: 100%;
    border-radius: 7px;
    border: solid 1px #ccccd0;
    padding: 5px 10px;
    font-size: 18px;
    color: #525558;
}

    .login input::after {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        background-image: url('../images/tooltip.png');
    }

.login .password {
    height: 50px;
}

.login .citizen select {
    width: 54px;
    height: 34px;
    border-radius: 7px;
    border: solid 1px #ccccd0;
    padding: 5px 10px;
    margin-right: 10px;
    color: #525558;
}


.login .dropdown-toggle {
    background-color: #fff !important;
    color: #525558 !important;
    border: solid 1px #ccccd0;
    border-radius: 7px;
    height: 34px;
    font-size: 14px;
    width: 54px;
    padding-right: 10px;
    text-align: right;
    background: url('../images/triangle.svg') no-repeat left 8px top 13px !important;
}

.dropdown-item:first-child {
    background: url('../images/triangle.svg') no-repeat left 8px top 13px !important;
}

.login .dropdown-toggle::after {
    border: 0px;
}

.login .dropdown-menu {
    top: -35px !important;
    left: 1px !important;
    font-size: 14px;
    min-width: 35px !important;
    padding: 0px;
    margin: 0px;
    border-radius: 7px !important;
}

.dropdown-item {
    padding: 4px 10px;
    width: 54px
}

    .dropdown-item:first-child {
        border-radius: 7px 7px 0 0;
    }

    .dropdown-item:last-child {
        border-radius: 0 0 7px 7px;
    }

.login .dropdown-item:hover, .login .dropdown-item:focus {
    background: #143a84 !important;
    color: #fff;
}

.btn-secondary.dropdown-toggle:focus, .btn-secondary.dropdown-toggle:hover {
    box-shadow: none !important;
}

.btn.btn-secondary.dropdown-toggle:focus {
    outline: -webkit-focus-ring-color auto 5px;
}

.login label {
    color: #525558;
}

.login .citizen label {
    font-size: 14px;
}

.login button.submit {
    width: 100%;
    background-color: #143a84;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #143a84;
    font-size: 20px;
    cursor: pointer;
    margin-top:30px;
}
.login button.submit.getOtp{
    margin-top:0;
}

.login button.submit.disable {
    background-color: rgba(180, 180, 180, 1);
    color: rgba(82, 85, 88, 1);
    border: 1px solid rgba(82, 85, 88, 1);
}

    .login button.submit:hover, .login button.submit:focus {
        background-color: #0b214c;
    }

.login .enterOTPKey button.submit {
    width: calc(100% - 40px);
    /*position: absolute;*/
    bottom: 0;
    margin: 20px auto;
    display: block;
}

.login .sendToApp {
    width: 48%;
    background-color: #143a84;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #143a84;
    font-size: 20px;
    line-height: 1.2rem;
    cursor: pointer;
    padding: 3%;
}
.ovals {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 375px;
    height: 335px;
    background: url(../images/group-5.png) no-repeat;
}

#successEmailSentMob .sendToApp-wrapper {
    width: 100%;
    margin-top: 50px;
}

#successEmailSentMob {
    display: block;
}

#codeOTP {
    padding-left: 40px;
}

#successEmailSentMob .text {
    width: 100%;
}

.login button.submit.disableBtn {
    opacity: 0.5;
    pointer-events: none;
}

.login button.submit:disabled {
    background-color: rgba(154, 154, 154, 1);
    border-color: rgba(180, 180, 180, 1);
}
/*.login .show button:hover, .login .show button:focus {
    background-color: #0b214c;
    color: white;
}*/
.login .finalLinks a {
    position: absolute;
    bottom: 10px;
    font-size: 14px;
    text-decoration: underline;
}

    .login .finalLinks a:hover, .login .finalLinks a:focus {
        text-decoration: none;
    }

    .login .finalLinks a:last-child {
        left: 20px;
        left: 20px;
    }

.login .error input, .login .error .dropdown-toggle {
    border: 1px solid #d71b1f;
}

.form-group.citizen {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
}

    .form-group.citizen a {
        position: relative;
        left: auto;
        top: auto;
    }

    .form-group.citizen label {
        margin-bottom: initial;
    }


.message {
    height: 20px;
}

.enterPersonalDetails {
    position: relative;
}

.tooltip.tooltipMyID {
    margin-right: 35px;
    font-size: 18px;
    top: 1px !important;
    opacity: 1;
}

.tooltip.tooltipMyEmail {
    margin-right: 35px;
    font-size: 18px;
    top: 1px !important;
    opacity: 1;
}

.tooltip.tooltipCitizen {
    margin-right: 25px;
    font-size: 18px;
    top: 5px !important;
}

.tooltip.tooltipPassword {
    margin-right: 40px;
    font-size: 18px;
    top: 5px !important;
}


.tooltip.tooltip4digits {
    margin-right: 40px;
    font-size: 18px;
    top: 5px !important;
}



.tooltip.fade.show.bs-tooltip-top {
    top: -20px !important;
}

    .tooltip.fade.show.bs-tooltip-top .flipMobileTop::after {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg);
        right: 100px;
        top: 131px;
    }

.tooltip > .tooltip-inner {
    background-color: #fff;
    color: #525558;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
    max-width: 240px;
    padding: 20px 20px 20px 15px;
    text-align: right;
    line-height: 21px;
    font-size: 18px;
}

.tooltip .arrow {
    display: none !important;
}

.tooltipImage::after {
    content: "";
    display: block;
    width: 25px;
    height: 23px;
    position: absolute;
    right: -18px;
    top: 40%;
    background: url('../images/tooltipBubbleArrow.png') no-repeat;
}

.tooltipImage img {
    display: none;
}
/*#endregion */
/*#region floating place holder */
.floatingPlaceHolder {
    z-index: 1;
}

    .floatingPlaceHolder input {
        background: transparent;
    }

    .floatingPlaceHolder label {
        position: absolute;
        right: 10px;
        width: 100%;
        top: 20px;
        transition: 0.3s;
        z-index: -1;
    }

    .floatingPlaceHolder:focus ~ label, .floatingPlaceHolder .has-content ~ label {
        top: -4px;
        right: 1px;
        color: #525558;
        font-size: 14px;
        transition: 0.3s;
    }

/*#endregion */


#IdentifyWithOTP {
    margin-top: 10px;
}



.datepicker {
    margin: 0;
    top: 80px !important;
    right: 49px !important;
    width: 386px !important;
    height: 390px !important;
}

    .datepicker .table-condensed {
        margin: 0 auto;
    }

        .datepicker .table-condensed thead {
            /*  display: none;*/
        }

        .datepicker .table-condensed tbody .day {
            color: #525558;
            font-size: 18px;
            padding: 10px 12px;
            position: relative;
        }

.table-condensed thead tr:last-child {
    color: #143a84;
    font-size: 18px;
}

.datepicker table tr td.today, .datepicker table tr td.today:hover, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover {
    background-image: none;
    background-color: transparent;
    color: #fff !important;
    position: relative;
}


    .datepicker table tr td.today::after, .datepicker table tr td.active::after, .datepicker table tr .day:hover::after {
        content: "";
        display: block;
        background-color: #143a84;
        width: 40px;
        height: 40px;
        position: absolute;
        top: 3px;
        right: 3px;
        border-radius: 40px;
        z-index: -1;
    }


.datepicker table tr td.day:hover, .datepicker table tr td.day.focused, .datepicker table tr td.active {
    background: initial !important;
    background-color: initial !important;
    color: #fff !important;
}


    .datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover {
        background-color: transparent !important;
        background-image: none;
        color: #fff !important;
        border-radius: 20px;
    }


.old.day, .new.day {
    visibility: hidden;
}
/*#endregion */



/*#region radioButton */
.labelListWrap {
    float: right;
    width: 100%;
    border-bottom: 1px solid rgba(222, 224, 227, 1);
    margin-bottom: 10px;
    padding-bottom: 10px;
    display: flex;
}

    .labelListWrap:last-child {
        border: none;
    }

    .labelListWrap.disable label {
        color: rgba(154, 154, 154, 1);
        width: auto;
    }

    .labelListWrap.disable button {
        color: rgba(154, 154, 154, 1);
        border-color: rgba(180, 180, 180, 1);
    }


    .labelListWrap button {
        float: left;
        border-radius: 5px;
        padding: 3px 15px;
        max-height: 26px;
        align-self: center;
    }

.labelList {
    margin: 5px 20px 10px;
    float: right;
    position: relative;
}

    .labelList label {
        float: right;
        padding: 0px 7px 0 0;
    }

    .labelList .dates {
        padding-right: 7px;
    }

    .labelList, .labelList .lblRadio {
        height: inherit;
        font-size: 14px;
        line-height: 10px;
    }

.lblRadio input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 17px;
    height: 17px;
    margin: 0;
    right: -20px;
    top: -3px;
    z-index: 11;
}


.checkmark {
    position: absolute;
    background-color: #0d47a1;
    width: 17px;
    height: 17px;
    border-radius: 100%;
    right: -20px;
    top: -3px;
    text-align: center;
}

.lblRadio .checkmark:after {
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkmark,
.lblRadio input[type=radio] {
    background-color: white;
    border: 1px solid gray;
}

.lblRadio input[type="radio"]:hover ~ .checkmark {
    background-color: #143a84;
    border: 1px solid #143a84;
}

.lblRadio input[type=radio]:checked ~ .checkmark {
    background-color: #143a84;
    border: 1px solid #143a84;
}

    .lblRadio input[type=radio]:checked ~ .checkmark:after {
        display: block;
    }

/*#endregion */

/*#region checkbox */
.lblRadio input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 17px;
    height: 17px;
    margin: 0;
    right: -20px;
    top: -3px;
    z-index: 11;
}

.lblRadio input[type=checkbox] {
    background-color: white;
    border: 1px solid gray;
}

.lblRadio input[type="checkbox"]:hover ~ .checkmark {
    background-color: #143a84;
    border: 1px solid #143a84;
}

.lblRadio input[type=checkbox]:checked ~ .checkmark {
    background-color: #143a84;
    border: 1px solid #143a84;
}

    .lblRadio input[type=checkbox]:checked ~ .checkmark:after {
        display: block;
    }



/*#endregion */


/*#region IdentifyWithOTP */
#IdentifyWithOTP fieldset {
    margin: 10px 0;
}

#IdentifyWithOTP legend {
    margin: 0px;
    font-size: 14px;
    width: auto;
    float: right;
    line-height: 27px;
    margin-left: 14px;
    color: #525558;
}

#IdentifyWithOTP .textError {
    display: none;
    font-size: 14px;
    color: #d71b1f;
}


#IdentifyWithOTP .sendAgain.unclickable img {
    display: inline-block;
    padding-right: 10px;
    position: absolute;
    top: -5px;
}

#IdentifyWithOTP .sendAgain.unclickable a, .waiting.unclickable a {
    color: #e1e1e4;
    pointer-events: none;
    cursor: default;
}

.waiting.unclickable img {
    display: inline-block;
    padding-right: 10px;
}

/*#endregion */
/*#region Error Message */
.errorMessage {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .errorMessage .closeButton {
        position: absolute;
        top: 15px;
        left: 20px;
    }

    .errorMessage .text {
        text-align: center;
    }

        .errorMessage .text::before {
            content: "";
            display: block;
            height: 90px;
            width: 74px;
            margin: 0 calc(50% - 36px)
        }
    .errorMessage .desc{
        font-size:16px;
    }
    .errorMessage.attention .text::before {
        background: url(../images/attention.png) no-repeat;
    }

    .errorMessage.failed .text::before {
        background: url(../images/failed.png) no-repeat;
    }

    .errorMessage.technical .text::before {
        background: url(../images/technical.png) no-repeat;
        width: 80px;
    }

    .errorMessage .text .title {
        font-size: 24px;
        font-weight: bold;
    }

    .errorMessage .desc a {
        text-decoration: underline;
    }

        .errorMessage .desc a:focus, .errorMessage .desc a:hover {
            text-decoration: underline;
            color: #0056b3;
        }
/*#endregion */


/*#region enterOTPKey */

.enterOTPKey .form-group {
    font-size: 14px;
    color: #525558;
    line-height: 16px;
}

    .enterOTPKey .form-group:first-child {
        height: 55px;
    }

    .enterOTPKey .form-group:nth-child(2) {
        height: 65px;
    }

    .enterOTPKey .form-group a {
        top: 21px;
    }

.enterOTPKey .sendAgain {
    font-size: 14px;
    color: #143a84;
}

    .enterOTPKey .sendAgain a {
        position: relative;
        top: 0;
        left: 0;
        text-decoration: underline;
    }

    .enterOTPKey .sendAgain img, .waiting img {
        display: none;
    }

.send .phone,
.enterOTPKey .phone {
    unicode-bidi: bidi-override !important;
    direction: ltr !important;
    text-align: right;
}

.enterOTPKey .heightAuto {
    margin-bottom: 10px;
}

.send-type {
    height: 46px;
}

.send-by {
    height: 40px;
    color: #525558;
    font-size: 14px;
}

input:-webkit-autofill:disabled {
    -webkit-text-fill-color: rgb(84, 84, 84);
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    transition: background-color 5000s ease-in-out 0s;
}

.disable {
    opacity: 0.5;
}

.unclickable {
    pointer-events: none;
    cursor: default;
}

.tooltip-disabled {
    cursor: default;
}

#dvSAML {
    visibility: hidden;
}
/*#endregion */
.container{
    max-width:100%;
}
.relContainer{
    position:relative
}
@media screen and (max-width: 992px) {
    .container {
        max-width: 100% !important;
        width: 100%;
    }
}

.login {
    position: relative;
    margin: 0 auto;
    right: initial;
}

.box {
    height: 145px;
    width: 400px;
    margin: 0 auto 30px;
}

    .box.secondBox > div {
        margin-right: 0px;
    }

.tooltip {
    margin-left: 20px;
}

.tooltipImage img {
    display: block;
    width: 12px;
    height: 12px;
}



.tooltipImage img {
    position: absolute;
    right: 15px;
    top: 8px;
}




.ui-datepicker {
    position: relative;
    margin: 0 calc(50% - 192px);
    /*// right: initial !important;
    // left: initial !important;*/
    max-width: 500px;
}
    .ui-datepicker#ui-datepicker-div{
        top:140px !important;
    }

    .bubble {
        margin-left: 10px;
    }




#IdentifyWithOTP .captcha {
    margin-bottom: 100px;
}


#ForgetPassword form {
    margin-bottom: 215px;
}


#ForgetPassword .wrapSubmit {
    position: absolute;
    bottom: 20px;
    width: calc(100% - 40px);
}

#recaptcha {
    position: absolute;
    bottom: 70px;
}

#ForgetPassword .positionMssgBox {
    position: absolute;
    bottom: 78px;
    left: 0;
    max-width: 129px;
    padding-left: 20px;
}




#successEmailSent {
    z-index: 12;
}

    #successEmailSent .text::before {
        background: url(../images/success.png) no-repeat;
    }


#successEmailSentMob {
    z-index: 12;
}

    #successEmailSentMob .text::before {
        background: url(../images/success.png) no-repeat;
    }

@media screen and (max-width: 640px) .messageBox .emptyFormError {
    position: absolute;
    bottom: 160px;
}

.messageBox .textError {
    position: absolute;
    bottom: 160px;
}

#rc-imageselect, .g-recaptcha {
    transform: scale(0.73);
    -webkit-transform: scale(0.73);
}

#ForgetPassword .messageBox {
    font-size: 12px;
}

.full-width-image.regular, .full-width-image.kosher {
    background: none;
    height: auto;
}
.bigImg {
    background: url(../images/group-4_tablet.png) no-repeat center -20px;
    width: 738px;
    left: 0;
    position: absolute;
}
.login {
    background-color: #ffffff;
    width: 100%;
    padding-bottom: 20px;
    height: auto;
    max-height: 329px;
    max-width: 384px;
}
.slogen {
    margin: 686px auto 0;
    color: white;
    font-family: 'Heebo';
    font-size: 18px;
    width: 293px;
    height: 80px;
    white-space:nowrap;
}
    .slogen .font36{
        font-size:36px;
        font-weight:700;
    }

    .groupLogos {
        background: white;
        width: 608px;
        height: 128px;
        box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.2);
        text-align: center;
        padding: 14px 20px;
        margin: 43px auto 0;
    }
    .groupLogos img {
        margin-left: 20px;
        margin-top: 15px;
    }
    .groupLogos .groupTitle {
        color: #9a9a9a;
        font-size:12px;
        font-family:'Heebo';
    }

    .boxShadow {
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
    }
.callMaccabi{
    color:#525558;
    font-size:14px;
    text-align:center;
    width:100%;
    margin:30px 0;
    font-family:Heebo;
}
    .callMaccabi a {
        color: #525558;
    }

    .login .finalLinks a:last-child {
        left: 0px;
    }

.form-group.citizen {
    justify-content: flex-start;
}

    .form-group.citizen a {
        margin-right: 10px;
    }

    .form-group.citizen label {
        margin-left: 10px;
    }


.ui-datepicker {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    background-color: #ffffff;
    margin: 0 auto;
    /*width: calc(100% - 30px);*/
    padding-bottom: 10px;
    height: auto;
    top:116px !important;
}


.ui-datepicker-calendar {
    width: 100%;
    border-spacing: 10px;
}

    .ui-datepicker-calendar tbody td a {
        margin: 0 auto;
        position: relative;
    }

.ui-datepicker-days-cell-over a::after, .ui-datepicker-current-day a::after {
    right: -4px;
    top: -2px;
}


.tooltip > .tooltip-inner {
    width: 210px;
}



.tooltipImage.flipMobileTop img {
    position: absolute;
    left: 15px;
    top: 15px;
    right: initial;
}


#IdentifyWithOTP .col.myID {
    width: 100%
}

#IdentifyWithOTP .col.citizen {
    width: calc(100% - 30px);
    right: 0px;
}

#IdentifyWithOTP .send-type {
    height: auto;
    bottom: 45px;
}

    #IdentifyWithOTP .send-type legend {
        width: 100%;
    }

    #IdentifyWithOTP .send-type.visibilityHidden{
        visibility: hidden;
    }

    #IdentifyWithOTP {
        /* height: 310px;*/
    }

    #IdentifyWithOTP .enterPersonalDetails {
        /*height: 310px;*/
    }


        #IdentifyWithOTP .enterPersonalDetails .submit {
            /*position: absolute;
            bottom: 20px;
            right: 0px;*/
        }

    #IdentifyWithOTP .terms .labelList {
        color: #525558;
    }

    #IdentifyWithOTP .terms {
        color: #525558;
        width: 100%;
        text-align:center;
    }

        #IdentifyWithOTP .terms button {
            text-decoration: underline;
            border: none;
            background: #fff;
            color: #143a84;
            padding-right:0px;
        }

    #IdentifyWithOTP .modal-body {
        height: 90vh;
        overflow-y: scroll;
    }

    #IdentifyWithOTP .finalLinks a:last-child {
        left: 20px;
    }

    #IdentifyWithOTP .enterPersonalDetails .birthDate ~ .textError {
        position: absolute;
        bottom: -15px;
    }

.btn-secondary.dropdown-toggle:focus, .btn-secondary.dropdown-toggle:hover {
    box-shadow: none !important;
    outline: none !important;
}

.btn.btn-secondary.dropdown-toggle:focus {
    outline: -webkit-focus-ring-color auto 5px;
}

.form-group.heightAuto {
    height: auto;
}
.ui-datepicker-current{
    display:none;
}

@media screen and (min-width: 316px) and (max-width: 400px) {
    .tooltip > .tooltip-inner {
        width: 158px;
        font-size: 15px;
    }

    .tooltip.fade.show.bs-tooltip-top .flipMobileTop::after {
        top: 152px;
    }

    .errorMessage .desc {
        font-size: 12px;
    }
}

@media screen and (max-width: 991px) {
    /*.tooltipImage.flipMobile::after {
        left: -19px;
        right: auto;
        transform: scaleX(-1);
    }*/

   
}

.mainDiv{
    z-index:9;
    height:1018px;
}
@media screen and (max-width: 991px) and (min-width:768px) {
    .ovals {
        display: none;
    }
    .bigImg {
        background: none;
        left: auto;
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
        z-index:9;
    }
    .slogen {
        margin: -202px auto 0;
    }
        .mainDiv {
        background: url('../images/group-4_tablet.png') no-repeat center bottom;
        /*height: 100vh;*/
    }
    .logo {
        margin: 30px auto 290px;
    }
    .ui-datepicker#ui-datepicker-div {
        top:321px !important;
    }
    .tooltipImage.flipTablet::after {
        left: -19px;
        right: auto;
        transform: scaleX(-1);
    }

    .tooltipImage.flipMobile img {
        position: absolute;
        left: 15px;
        top: 8px;
        right: initial;
    }
   
}
@media screen and (max-width:767px){
    .tooltipImage.flipMobile img {
        position: absolute;
        left: 15px;
        top: 8px;
        right: initial;
    }
    .tooltipPassword .tooltipImage::after {
        left: -19px;
        right: auto;
        transform: scaleX(-1);
    }
    .bigImg,
    .ovals {
        display: none;
    }
    .mainDiv{
        height:auto;
    }

    .ui-datepicker#ui-datepicker-div {
        top: 139px !important;
    }
    #ui-datepicker-div{
        left:0 !important;
    }
    .tooltip.tooltipMyID {
        left: -240px !important;
    }
}
