.menu-icon {
    vertical-align: center;
}

.menu-icon #menubutton {
    border: 0;
    background-color: white;
    padding: 0 0.7em;
    height: 100%;
    font-size: 1.3em;
    outline: none;
    cursor: pointer;
}

.menu-icon #menubutton .x {
    display: none;
}

.menu-icon #menubutton.opened .x {
    display: block;
}

.menu-icon #menubutton .bars {
    display: block;
}

.menu-icon #menubutton.opened .bars {
    display: none;
}

.ui.menu.gcc-submenu.opened {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 10;
    max-height: 100%;
    height: 100%;
    overflow: auto;
    padding-bottom: 10em;
}

.ui.menu.gcc-submenu.opened .dropdown.item {
    display: block;
}

.ui.menu.gcc-submenu.opened .item > .menu {
    position: initial;
    border: 0;
    box-shadow: none;
    margin-top: 5px;
    color: #8abc1e;
}

.ui.menu.gcc-submenu.opened .item > .menu > .item {
    background-color: white !important;
    color: #4b5058 !important;
    padding: 1em 0 1em 0.7em !important;
    margin-top: 4px;
}

.ui.menu.gcc-submenu.opened {
    background-color: white;
    color: black;
}

.ui.menu.gcc-submenu.opened > .ui > .item {
    border-bottom: 1px solid #dededf;

}

.ui.menu.gcc-submenu.opened > .ui > .item.active-item > a::before {
    background-color: #005cb9;
    content: " ";
    width: 5px;
    height: 5px;
    display: block;
    position: absolute;
    border-radius: 50%;
    margin-top: 5px;
    margin-left: -10px;
}

.ui.menu.gcc-submenu.opened .item,
.ui.menu.gcc-submenu.opened .item > a {
    color: black;
}

.ui.menu.gcc-submenu.opened .ui.dropdown.item.active {
    color: black;
}

.ui.menu.gcc-submenu.opened .active.item,
.ui.menu.gcc-submenu.opened .ui.dropdown.item.active:hover {
    color: black !important;
}

.support-phone img {
    margin: 0 7px 0 0 !important;
}

.support-phone b a {
    color: #333f52;
}

/* Mobile */
@media only screen and (max-width: 767px) {
    /*@media only screen and (max-width: 991px) {*/
    .gcc-submenu-wrapper.opened.ui.grid > .column {
        padding-top: 0;
        padding-bottom: 0;
    }

    .ui.menu.gcc-menu {
        /* margin: 0.6rem 0 !important; */
    }

    /*.ui.menu.gcc-menu>.ui.container {*/
    /*    margin-top: -1em !important;*/
    /*}*/
    .ui.menu.gcc-submenu {
        display: none;
    }


    .gcc-submenu-wrapper {
        display: none !important;
    }

    .gcc-submenu-wrapper.opened {
        display: inherit !important;
    }

    body.has-opened-menu .gcc-submenu-wrapper.opened.ui.grid {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 11;
        max-height: 100%;
        height: auto !important;
        overflow: auto;
        padding-bottom: 0em;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .dropdown.item {
        display: block;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item > .menu {
        position: initial;
        border: 0;
        box-shadow: none;
        color: #8abc1e;
        margin: 15px -1.2em -13px -1.2em;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item > .menu > .item > i {
        float: left;
        position: relative;
        margin: 0 0 0 -15px;
        padding: 0;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item > .menu > .item {
        background-color: white !important;
        color: #4b5058 !important;
        padding: 1em 1.3em 1em 0.7em !important;
        margin-top: 4px;
        box-shadow: inset 0 7px 9px -7px rgba(0, 0, 0, 0.7);
        border-top: 1px solid #dededf;
        padding-left: 3em !important;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item > .menu > .item .menu {
        margin: 18px -20px -16px -3em !important;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item > .menu > .item .menu > .item {
        /* margin: 0 0 0 1em !important; */
        padding-left: 4em !important;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu {
        background-color: white;
        color: black;
        box-shadow: inset 0 7px 9px -7px rgba(0, 0, 0, 0.4);
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu > .ui > .item {
        border-bottom: 1px solid #dededf;
        padding: 17px;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu > .ui > .item.active-item > a::before {
        background-color: #005cb9;
        content: " ";
        width: 5px;
        height: 5px;
        display: block;
        position: absolute;
        border-radius: 50%;
        margin-top: 5px;
        margin-left: -10px;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item,
    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item > a {
        color: #333f52;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item .icon {
        color: #c5d0de;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .ui.dropdown.item.active {
        color: #333f52;

    }

    /*.opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item > .menu > .item .menu {*/
    /*    !*background-color: red !important;*!*/
    /*}*/
    /*.opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item > .menu > .item .menu ~ i.dropdown.icon {*/
    /*    content: "\f0d8";*/
    /*    content: "л";*/
    /*    color: green;*/
    /*    background-color: blue;*/
    /*}*/
    /*i.dropdown.icon ~ .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item > .menu > .item .menu {*/
    /*    content: "\f0d8";*/
    /*    content: "kokл";*/
    /*    background-color: green;*/
    /*    color: blue;*/
    /*}*/
    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .ui.dropdown.item.active > i.dropdown.icon:before {
        content: "\f0d8";
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .active.item,
    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .ui.dropdown.item.active:hover {
        color: #333f52 !important;

    }

    .ui.top.right.pointing.dropdown.notifications-dropdown > .menu {
        right: 0 !important;
        left: 0 !important;
        margin: 0em;
        top: 0em !important;
        bottom: 0;
        position: fixed !important;
        border: 0;
        background-color: transparent;
        margin-top: 4em !important;
        /*pointer-events: none;*/
    }

    .ui.top.right.pointing.dropdown.notifications-dropdown > .menu > .scrolling.menu {
        bottom: 0;
        border: 0;
        height: 100%;
        min-height: 100%;
        box-shadow: inset 0 7px 9px -7px rgba(0, 0, 0, 0.4) !important;
        background-color: white;
        border-radius: 0 !important;
        pointer-events: initial;
    }

    .ui.top.right.pointing.dropdown.notifications-dropdown > .menu > .item {
        display: none;
    }

    .ui.top.right.pointing.dropdown.notifications-dropdown .menu .scrolling.menu .item {
        border-bottom: 1px solid #dfe3e9;
        padding: 1.5em 10px 1.5em 10px !important;
        margin: 0;
        width: 100%;
    }

    .ui.top.right.pointing.dropdown.notifications-dropdown .menu:after {
        display: none;
    }
}

/* Tablet / iPad Portrait */
/* old values [max-wedth:991px] */
@media only screen and (min-width: 768px) and (max-width: 1550px) {
    .gcc-submenu-wrapper.opened.ui.grid > .column {
        padding-top: 0; 
        padding-bottom: 0;
    }

    .ui.menu.gcc-submenu > .container {
        flex-direction: column;
    }

    .ui.menu.gcc-menu {               
        /* margin: 0.6rem 0 !important; */
    }

    .ui.menu.gcc-submenu {
        display: none;
    }

    .gcc-submenu-wrapper {
        display: none !important;
    }

    .gcc-submenu-wrapper.opened {
        display: inherit !important;
    }

    body.has-opened-menu .gcc-submenu-wrapper.opened.ui.grid {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu {
        display: block;
        position: fixed;
        right: 30px;
        z-index: 10;
        max-height: 500px;
        max-height: calc(80vh - 4em);
        height: auto !important;
        overflow: auto;
        max-width: 350px;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .dropdown.item {
        display: block;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item > .menu {
        position: initial;
        border: 0;
        box-shadow: none;
        color: #8abc1e;
        margin: 15px -1.2em -13px -1.2em;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item > .menu > .item > i {
        float: left;
        position: relative;
        margin: 0 0 0 -15px;
        padding: 0;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item > .menu > .item {
        background-color: white !important;
        color: #4b5058 !important;
        padding: 1em 1.3em 1em 0.7em !important;
        margin-top: 4px;
        border-top: 1px solid #dededf;
        padding-left: 3em !important;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item > .menu > .item .menu {
        margin: 18px 0 -16px -3em !important;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item > .menu > .item .menu > .item {
        padding-left: 4em !important;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu {
        background-color: white;
        color: black;
        border: 1px solid #dfe3e9;
        overflow: auto;
        margin-top: 61px
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu:after {
        display: block;
        position: absolute;
        pointer-events: none;
        content: '';
        visibility: visible;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        width: .5em;
        height: .5em;
        -webkit-box-shadow: -1px -1px 0 0 rgba(34, 36, 38, .15);
        box-shadow: -1px -1px 0 0 rgba(34, 36, 38, .15);
        background: #fff;
        z-index: 2;
        top: -.25em;
        left: auto !important;
        right: 1em !important;
        margin: 0;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu > .ui > .item {
        border-bottom: 1px solid #dededf;
        padding: 17px;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu > .ui > .item.active-item > a::before {
        background-color: #005cb9;
        content: " ";
        width: 5px;
        height: 5px;
        display: block;
        position: absolute;
        border-radius: 50%;
        margin-top: 5px;
        margin-left: -10px;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item,
    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item > a {
        color: #333f52;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .item .icon {
        color: #c5d0de;
    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .ui.dropdown.item.active {
        color: #333f52;

    }

    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .active.item,
    .opened.gcc-submenu-wrapper .ui.menu.gcc-submenu .ui.dropdown.item.active:hover {
        color: #333f52 !important;

    }
}

.ui.menu>.container, .ui.menu>.grid {
    justify-content: center !important;
}

.ui.menu .item>a:not(.ui){
    color: rgba(0,0,0,.87) !important;
}

.width-edit {
    width: 927px !important;
}

/* ========================================
   RTL Support for Menu
   ======================================== */

body.rtl-mode .ui.menu {
    direction: rtl !important;
}

body.rtl-mode .ui.menu .item {
    text-align: right !important;
}

body.rtl-mode .ui.menu:not(.vertical) .item {
    float: right !important;
}

body.rtl-mode .ui.menu .ui.dropdown .menu {
    left: auto !important;
    right: 0 !important;
}

body.rtl-mode .ui.menu .dropdown.item .menu {
    right: 0 !important;
    left: auto !important;
}

body.rtl-mode .ui.menu.basic.borderless.gcc-menu.mobile {
    margin-left: 10px !important;
    margin-right: -10px !important;
}

@media only screen and (max-width: 1024px) {
    body.rtl-mode .ui.menu .item.mobile-menu-toggle {
        float: right !important;
    }
    
    body.rtl-mode .ui.vertical.menu .item {
        text-align: right !important;
        padding-left: 4em !important;
        padding-right: 1em !important;
    }
    
    body.rtl-mode .ui.vertical.menu .nested.item {
        padding-left: 5em !important;
    }
}

@media only screen and (min-width: 1025px) {
    body.rtl-mode .ui.menu .item.mobile-menu-toggle {
        right: auto !important;
        left: 30px !important;
    }
}