@import url(//fonts.googleapis.com/earlyaccess/opensanshebrew.css);
@import 'https://fonts.googleapis.com/css?family=Heebo:400,500,600,700,800,900&subset=hebrew';

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'OeKashiach';
}

p, a, li, button, input, div {
    font-family: 'Heebo', sans-serif;
}

body {
/ / background: rgba(161, 218, 232, 1);
    background: rgb(234 247 250);
    /*background: -moz-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(255, 255, 255, 1) 100%);*/
    /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(255, 255, 255, 1)));*/
    /*background: -webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(255, 255, 255, 1) 100%);*/
    /*background: -o-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(255, 255, 255, 1) 100%);*/
    /*background: -ms-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(255, 255, 255, 1) 100%);*/
    /*background: linear-gradient(to bottom, rgba(234, 234, 234, 1) 0%, rgba(255, 255, 255, 1) 100%);*/
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#ffffff', GradientType=0);*/
    /*background-size: 100% 250px;*/
    /*background-repeat: repeat-x;*/
    font-family: 'Heebo', sans-serif;
    direction: rtl;
    text-align: right;
}

body.gradient {
    margin: 0;
}

header {
    background: #fff;
    box-shadow: 0px -4px 40px 0px #4C9CB233;
    position: relative;
    padding: 5px 30px;
}

header .user-info {
    display: flex;
    align-items: center;
    font-family: Heebo;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: left;
    color: #0A262E;
    position: relative;
    gap: 0 10px;
}

header .user-info .avatar {
    position: relative;
}

header .user-info .avatar img {
    height: 54px;
    width: auto;
}

header .user-info .avatar .edit_avatar {
    background: url(images/arrow_down.svg) no-repeat center;
    width: 16px;
    height: 16px;
    display: inline-block;
    position: absolute;
    left: 100%;
    top: 0;
    transform: translate(10px, 10px);
}

header .user-info .btn {
    display: flex;
    align-items: center;
    gap: 0;
}

header .user-info .btns a {
    color: #54747D;
    display: inline-flex;
}

header .user-info .btns span {
    background: #BBD9E2;
    height: 12px;
    width: 1px;
    margin: 0 4px;
    display: inline-block;
}

.update-avatar {
    position: absolute;
    left: 100%;
    top: 100%;
    width: 860px;
    border: 1px solid #74B2C3;
    box-shadow: 0px 0px 10px 0px #1C76BD42;
    border-radius: 16px;
    padding: 8px;
    background: #fff;
    z-index: 99;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transform: translate(-30px, -30px)
}

.update-avatar .avatars-groups {
    display: flex;
    gap: 8px;
    padding-left: 40px;
}

.update-avatar .avatars-groups .group {
    padding: 16px;
    border-radius: 8px;
    background: #EAF7FA;
    gap: 5px;
    flex: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.update-avatar .avatars-groups .group label {
    cursor: pointer;
    width: calc(100% / 3 - 5px);
}

.update-avatar .avatars-groups .group:nth-child(2) label,
.update-avatar .avatars-groups .group:nth-child(3) label {
    cursor: pointer;
    width: calc(100% / 4 - 5px);
}

.update-avatar .avatars-groups .group label span {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}


.update-avatar .avatars-groups .group label span img {
    position: relative;
    z-index: 2;
}

.update-avatar .avatars-groups .group label input {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.update-avatar .avatars-groups .group label input:checked + span {
    background: linear-gradient(99.04deg, #00F2C7 0.25%, #26B3C8 56.86%);
    border-radius: 4px;
}

.update-avatar .avatars-groups .group label input:checked + span:before {
    content: '';
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    top: 1px;
    left: 1px;
    z-index: 1;
    position: absolute;
    display: block;
    border-radius: 4px;
    background: #fff;
}

.update-avatar .nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.update-avatar .nav .reset {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    position: absolute;
    left: 10px;
    top: 10px;
}

.update-avatar .nav .submit {
    border: 1px solid #BBD9E2;
    box-shadow: 4px 4px 4px 0px #A1D9E84D;
    height: 33px;
    width: 75px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    line-height: 16.8px;
    letter-spacing: 0.15px;
    text-align: center;
    color: #0A262E;
    cursor: pointer;
    background: #fff;
}


header a {

}

.mobile-link-to-homepage {
    display: inline-block;
    height: 48px;
    width: 220px;
}

.logo {
    float: right;
    width: 180px;
    text-align: right;
}

.navy {
    max-width: 1440px;
    margin: 0 auto;
    padding: 5px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

header nav {

}

header .menu {
    display: flex;
    align-items: center;
    gap: 0 14px;
}

header nav ul a {
    color: #0A262E;
    text-decoration: none;
    padding: 0 9px;
    font-family: Heebo;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    line-height: normal !important;
}

header nav ul a:hover, header nav ul a:active {
    text-decoration: underline;
}

.righth {
    display: inline;
    float: right;
    margin-right: 26px;
}

.righth a {
    color: #fff !important;
}

.lefth {
    display: inline;
    float: left;

}

.lefth a {
    color: #fff !important;
}

.msg_icon_top {
    margin-top: 10px;
    margin-left: -15px;
}

.ezpagesmain {
    max-width: 621px;
    width: 100%;
    margin: 0 auto;
    text-align: right;
}


/* ------------------------------------------------------------------ */
/* New Sidebar */
#SideMenuContainer {
    width: 160px;
}

.SideMenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.SideMenu > li {
    background: #FFF;
    font-weight: bold;
    margin: 0 0 5px;
    padding: 0;
    line-height: 33px;
    display: block;
    border: 1px solid #ddd;
    border-radius: 11px;
}

.SideMenu > li img {
    padding: 0 8px;
    vertical-align: middle;
}

.SideMenu > li a:link, .SideMenu > li a:visited, .SideMenu > li a:hover, .SideMenu > li a:active {
    text-decoration: none;
    font-weight: bold;
    color: #6d7072;
}

/* ------------------------------------------------------------------ */

/* Top Menu */
#TopMenu {
    margin: 0 auto;
    display: inline-block;
}

#TopMenu, #TopMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul#TopMenu {
    float: right;
}

#TopMenu > li {
    float: right;
    position: relative;
    padding: 1px 12px;
}

#TopMenu > li > a {
    position: relative;
    /*top: -4px;*/
}

#TopMenu > ul > li, #TopMenu > ul > li a:link, #TopMenu > ul > li a:visited, #TopMenu > ul > li a:hover, #TopMenu > ul > li a:active, #TopMenu > ul > li span {
    text-decoration: none;
    font-weight: bold;
    color: #000;
    display: block;
    /*line-height: 18px;*/
    padding: 1px 8px;
    font-size: 16px;
    font-weight: normal;
}

#TopMenu > li > span, #TopMenu > li > a {
    font-family: 'OeKashiach';
    font-size: 18px;
    font-weight: 500;
    color:  rgba(10, 38, 46, 1);
}

/* -- Sub menu -- */
#TopMenu > li > ul {
    position: absolute;
    top: 17px;
    right: 3px;
    display: none;
    background: #ebebeb;
    z-index: 9999;
}

/* Make fake links not clickable */
#TopMenu a[href^=javascript], #TopMenu a[href=#

]
{
    pointer-events: none
;
    cursor: text
;
}

#TopMenu > li ul {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

#TopMenu > li:hover > ul {
    display: block;
    border-top: 1px solid #FFF;
}

#TopMenu li:hover > ul {
    display: block;
}

#TopMenu > li > ul li {
    border: 1px solid #FFF;
    border-top: 0px;
}

#TopMenu > li li {
    padding: 5px 9px !important;
}

#TopMenu > li ul li, #TopMenu > li ul li a:link, #TopMenu > li ul li a:visited, #TopMenu > li ul li a:hover, #TopMenu > li ul li a:active {
    color: #000;
    text-align: right;
    white-space: nowrap;
    padding: 0;
    margin: 0;
}

#TopMenu > li ul li:hover {
    background: #ddd;
}

#TopMenu > li ul ul {
    width: 195px !important;
    left: -178px !important;
    top: 5px;
    display: none;
    position: absolute;
}

#TopMenu > li ul ul li {
    background: #ebebeb;
}

/* ------------------------------------------------------------------ */

/* Top Menu */
#TopMenuleft {
    margin: 0 auto;
    display: inline-block;
}

#TopMenuleft, #TopMenuleft ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul#TopMenuleft {
    padding-top: 0px;
    margin-left: 0px;
}

#TopMenuleft > li {
    float: right;
    position: relative;
    padding: 1px 13px;
}

#TopMenuleft > li > a {
    position: relative;
    /*top: -4px;*/
}

#TopMenuleft > li, #TopMenuleft > li a:link, #TopMenuleft > li a:visited, #TopMenuleft > li a:hover, #TopMenuleft > li a:active, #TopMenuleft > li span {
    text-decoration: none;
    font-weight: bold;
    color: #000;
    display: block;
    line-height: 11px;
    padding: 1px 8px;
    font-size: 16px;
    font-weight: normal;
}

/* -- Sub menu -- */
#TopMenuleft > li > ul {
    position: absolute;
    top: 36px;
    right: 3px;
    display: none;
    background: #ebebeb;
    z-index: 9999;
}

/* Make fake links not clickable */
#TopMenuleft a[href^=javascript], #TopMenuleft a[href=#

]
{
    pointer-events: none
;
    cursor: text
;
}

#TopMenuleft > li ul {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

#TopMenuleft > li:hover > ul {
    display: block;
    border-top: 1px solid #FFF;
}

#TopMenuleft li:hover > ul {
    display: block;
}

#TopMenuleft > li > ul li {
    border: 1px solid #FFF;
    border-top: 0px;
}

#TopMenuleft > li li {
    padding: 5px 9px !important;
}

#TopMenuleft > li ul li, #TopMenuleft > li ul li a:link, #TopMenuleft > li ul li a:visited, #TopMenuleft > li ul li a:hover, #TopMenuleft > li ul li a:active {
    color: #000;
    text-align: right;
    white-space: nowrap;
    padding: 0;
    margin: 0;
}

#TopMenuleft > li ul li:hover {
    background: #ddd;
}

#TopMenuleft > li ul ul {
    width: 195px !important;
    left: -178px !important;
    top: 5px;
    display: none;
    position: absolute;
}

#TopMenuleft > li ul ul li {
    background: #ebebeb;
}

/* share button ---------------------------------------------------- */

.share-btn-wrapper {
    display: flex;
    justify-content: center;
}

a.share-btn {
    background-color: #FA7711;
    color: #fff;
    border: 0;
    cursor: pointer;
    text-shadow: 0 1px 5px rgb(106 106 106 / 40%);
    font-family: 'OeKashiach';
    font-size: 20px;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 100px;
}

.ezhelp-link {
    position: fixed;
    top: 0;
    width: 300px;
    left: -300px;
    transition-duration: 0.3s;
    height: 100%;
    z-index: 2002;
}

.ezhelp-link > a {
    display: block;
    position: absolute;
    top: calc(50% + 11px);
    right: -83px;
    transform: rotate(-90deg);
    transform-origin: center bottom 0;
    padding: 15px 25px 9px;
    background: #22B14C;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 0 0 8px 8px;
}

@media screen and (max-width: 1200px) {
    .share-btn-wrapper {
        display: none;
    }

    a.share-btn {
        display: none;
    }
}

/* responsive ------------------------------------------------------------------ */
#content {
    width: 100%;
    /*	max-width: 815px;*/
    margin: 0 auto;
}

#content td {
    padding: 0 5px
}

table#phez_game_table_outer_layer {
    max-width: 600px;
    display: table;
}

/*
#content iframe
{
	max-width: 100%;
}
*/
#hamburger {
    display: none;
}

@media screen and (max-width: 800px) {
    body {
        margin: 0;
    }

    header .user-info .avatar .edit_avatar {
        transform: translate(10px, 40px);
    }

    .update-avatar .avatars-groups {
        flex-direction: column-reverse;
        height: 320px;
        overflow: hidden auto;
        direction: ltr;
        padding-left: 0;
        padding-top: 30px;
    }

    .update-avatar .nav {
        flex-direction: row;
        margin-top: 12px;
        justify-content: center;
    }

    .update-avatar .nav .reset {
        position: absolute;
        left: 10px;
        top: 10px;
    }

    .update-avatar {
        width: 320px;
        flex-direction: column;
        margin-top: 37px;
        margin-left: -20px;
    }

    header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
    }

    header nav {
        width: 100%;
    }

    #hamburger {
        display: block;
        background: url(images/burger_menu_icon.svg) no-repeat center;
        z-index: 99999;
        /*border: 1px solid #999;
        border-radius: 4px;*/
        line-height: 0;
        overflow: hidden;
        width: 32px;
        height: 30px;
    }

    header nav .menu ul#TopMenu {
        display: none;
    }

    header .user-info .content {
        font-size: 0;
    }

    header .user-info .btns span {
        display: none;
    }

    header .user-info {
        position: relative;
    }

    header .user-info .avatar img {
        height: 48px;
        width: auto;
    }

    header .user-info #unreadMessagesNumber {
        position: absolute;
        font-size: 14px;
        color: #0A262E;
        line-height: 1;
        left: 100%;
        top: 6px;
        width: 32px;
        height: 32px;
        background: url(images/Chat.svg) no-repeat center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    header .logo a {
        display: inline-block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        margin-left: 20px;
    }

    header .logo img {
        height: 56px !important
    }

    footer .content .msg a {
        width: 210px;
    }

    footer .content {
        flex-direction: column;
        gap: 15px;
        padding-top: 110px;
    }

    .logo {
        text-align: left;
    }
}

@media screen and (max-width: 600px) {
    .main nav {
        display: none;
    }

    .welcome {
        background: url(https://www.ezway.co.il/students/ezportal/images/40by115.png) #FA7711 no-repeat;
        background-position-x: center;
        /* position: relative; */
    }

    /*.mobile-link-to-homepage {
        position: absolute;
        height: 48px;
        width: 220px;
        right: 120px;
    }*/
    .ezpagesmain {
        max-width: 320px;
        width: 100%;
        margin: 0 auto;
        text-align: right;
    }
}

@media screen and (max-width: 380px) {
    .welcome {
        /*clear: both;*/
        /*padding-top: 0;*/
        background: url(https://www.ezway.co.il/students/ezportal/images/40by115.png) #FA7711 no-repeat;
        background-position-x: center;
    }

    #content td {
        padding: 0 0px;
    }
}

#jPanelMenu-menu {
    background: #3b3b3b;
    padding: 35px 0 0;
    margin: 0;
}

#jPanelMenu-menu ul {
    border-bottom: 1px solid #484848;
    display: none;
}

#jPanelMenu-menu li a, #jPanelMenu-menu li span {
    background: #3b3b3b;
    background: -o-linear-gradient(top, #3e3e3e, #383838);
    background: -ms-linear-gradient(top, #3e3e3e, #383838);
    background: -moz-linear-gradient(top, #3e3e3e, #383838);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3e3e3e), color-stop(1, #383838));
    background: -webkit-linear-gradient(#3e3e3e, #383838);
    background: linear-gradient(top, #3e3e3e, #383838);
    font-family: "museo-sans", "Museo Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    display: block;
    padding: 0.5em 5%;
    border-top: 1px solid #484848;
    border-bottom: 1px solid #2e2e2e;
    text-decoration: none;
    text-shadow: 0 -1px 2px #222222;
    color: #f7f7f7;
}

#jPanelMenu-menu li a:hover, #jPanelMenu-menu li a:focus {
    background: #404040;
    background: -o-linear-gradient(top, #484848, #383838);
    background: -ms-linear-gradient(top, #484848, #383838);
    background: -moz-linear-gradient(top, #484848, #383838);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #484848), color-stop(1, #383838));
    background: -webkit-linear-gradient(#484848, #383838);
    background: linear-gradient(top, #484848, #383838);
}

#jPanelMenu-menu li a:active {
    background: #363636;
    background: -o-linear-gradient(top, #3e3e3e, #2e2e2e);
    background: -ms-linear-gradient(top, #3e3e3e, #2e2e2e);
    background: -moz-linear-gradient(top, #3e3e3e, #2e2e2e);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3e3e3e), color-stop(1, #2e2e2e));
    background: -webkit-linear-gradient(#3e3e3e, #2e2e2e);
    background: linear-gradient(top, #3e3e3e, #2e2e2e);
    -moz-box-shadow: 0 2px 7px #222222 inset;
    -webkit-box-shadow: 0 2px 7px #222222 inset;
    box-shadow: 0 2px 7px #222222 inset;
    border-top-color: #222222;
    padding-top: 0.55em;
    padding-bottom: 0.45em;
}

.jPanelMenu-panel {
    /*	-moz-box-shadow: 0 0 25px #222222;
        -webkit-box-shadow: 0 0 25px #222222;
        box-shadow: 0 0 25px #222222;	*/
    background: transparent !important;
}

.ltr {
    direction: ltr;
}

footer {
    background: #BBD9E2;
    position: relative;
    width: 100%;
}

.content {
    width: 100%;
}

footer:before {
    content: '';
    width: 100%;
    height: 80px;
    display: block;
    background: url(images/foote-bg.svg) no-repeat bottom center;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
}

footer .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #54747D;
    position: relative;
    z-index: 1;
    padding: 100px 0 20px 0;
    margin: 0 auto;
}

footer .content .dev a {
    color: #54747D;
    display: inline-flex;
    align-items: center;
    gap: 0 8px;
}

footer .content .dev a img {
    transform: translateY(-5px);
}

footer .content .msg {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
}

footer .content .msg a {
    border: 2px solid #BBD9E2;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0px 0px 20px 0px #0000001A;
    font-size: 16px;
    font-weight: 500;
    line-height: 19.2px;
    letter-spacing: 0.15000000596046448px;
    color: #0A262E !important;
    background: #F7FCFD;
    border-radius: 60px;
    padding: 0 32px;
}

footer .content .msg a img {
    position: absolute;
    left: 100%;
    bottom: 0;
    transform: translate(-20px, 5px);
}