body, body.grayTheme {
    width: 100%;
    height: 100%;
    --image-logo: url("../../img/logo/p6_logo.svg");
    --image-subject-cover: url("../../img/subject-covers/cover-gray-background.png");
    --image-background-games: url("/img/bg_games.png");

    --icon-wordtest: url("../../img/icons/grayTheme/icon_school_wordtest_simple.svg");
    --icon-wordtest-active: url("../../img/icons/grayTheme/icon_school_wordtest_current.svg");
    --icon-administration: url("../../img/icons/grayTheme/icon_school_administration_simple.svg");
    --icon-administration-active: url("../../img/icons/grayTheme/icon_school_administration_current.svg");
    --icon-add-child: url("../../img/icons/grayTheme/icon_add_child.svg");
    --icon-reports-family: url("../../img/icons/grayTheme/icon_reports_family.svg");
    --icon-reports-group: url("../../img/icons/grayTheme/icon_reports_group.svg");
    --icon-teacher: url("../../img/icons/grayTheme/icon-teacher.svg");
    --icon-special-character-hover: url("../../img/icons/grayTheme/icon-special-character.svg");
    --icon-group-party-simple: url("../../img/icons/grayTheme/icon_group_party_simple.svg");
    --icon-group-party-current: url("../../img/icons/grayTheme/icon_group_party_current.svg");
    --icon-palette-simple: url("../../img/icons/grayTheme/icon_palette_simple.svg");
    --icon-palette-current: url("../../img/icons/grayTheme/icon_palette_current.svg");
    --icon-calendar-clock-current: url("../../img/icons/grayTheme/icon_calendar_clock_current.svg");
    --icon-impressum-simple: url("../../img/icons/grayTheme/icon_impressum_simple.svg");
    --icon-impressum-current: url("../../img/icons/grayTheme/icon_impressum_current.svg");
    --icon-unconfirmed-profile-simple: url("../../img/icons/grayTheme/icon_unconfirmed_profile_simple.svg");
    --icon-unconfirmed-profile-current: url("../../img/icons/grayTheme/icon_unconfirmed_profile_current.svg");
    --icon-foot-prints: url('../../img/icons/grayTheme/icon_foot_prints.svg');
    --icon-p6-simple: url('../../img/icons/grayTheme/icon_p6_simple.svg');
    --icon-p6-current: url('../../img/icons/grayTheme/icon_p6_current.svg');
    --icon-p6-list-simple: url('../../img/icons/grayTheme/icon_p6_list_simple.svg');

    --background-sidebar-current: rgba(255, 255, 255, 1);
    --background-sidebar-hover: rgba(255, 255, 255, 1);

    --background-color-gray-darkestGray: #f2f2f2;
    --background-color-white-darkestGray: #fff;
    --background-color-white-middleDarkGray: #fff;
    --background-color-gray-middleDarkGray: #f2f2f2;
    --background-lightGray-black: #ccc;
    --background-darkorange-darkestGray: darkorange;
    --background-lighter-highlight: #fff2e5;
    --background-color-white-666: white;

    --background-color-white-middleDarkGray-white: #fff;
    --background-color-gray-darkestGray-white: #f2f2f2;
    --background-color-gray-darkestGray-none: #f2f2f2;
    --background-darkorange-darkorange-specific: darkorange;
    --background-color-gray-darkestGray-specific: #f2f2f2;
    --background-color-gray-middleDarkGray-specific: #f2f2f2;
    --background-color-gray-middleDarkGray-white: #f2f2f2;
    --background-color-white-darkestGray-gray: white;

    --progress-bar-default-background: #ccc;

    --background-ccc-222: #ccc;
    --background-d4d4d4-666: #d4d4d4;
    --background-999-222: #999;
    --background-f2f2f2-666: #f2f2f2;
    --background-f7f7f7-363636: #f7f7f7;
    --background-fff2e5-999-specific: #fff2e5;
    --background-e6e6e6-363636: #e6e6e6;
    --background-white-darkorange: white;
    --background-e5e5e5-999: #e5e5e5;
    --background-e9e9e9-222: #e9e9e9;
    --background-d3d3d3-363636: #d3d3d3;
    --background-e2e2e2-666: #e2e2e2;
    --background-e2e2e2-222: #e2e2e2;
    --background-666-363636-white: #666;
    --background-color-wizard-steps: white;

    --background-practice-line1: #fff;
    --background-practice-line2: #f5f5f5;

    --background-color-three: #eee;
    --background-color-five: #8e8e8e;
    --background-color-six: #c4c4c4;

    --color-icons: #999;
    --color-sidebar-buttName-current: darkorange;

    --color-333-999: #333;
    --color-333-222: #333;
    --color-white-222: white;
    --color-white-999: white;
    --color-ccc-999: #ccc;
    --color-ccc-gray: #ccc;
    --color-ccc-222: #ccc;
    --color-ccc-666: #ccc;
    --color-two: #8f8f8f;
    --color-747474-999: #747474;
    --color-444-999: #444;
    --color-four: #f2f2f2;
    --color-five: #626262;
    --color-six: #999;
    --color-activated-cards-progress-bar: #999;
    --color-eight: #8d8d8d;
    --color-nine: #b2b2b2;
    --color-ten: #817f7f;
    --color-eleven: #222;
    --color-5f5f5f-999: #5f5f5f;
    --color-thirteen: #666;
    --color-454545-999: #454545;
    --color-999-222: #999;
    --color-909090-white: #909090;
    --color-666-999: #666;
    --color-999-666: #999;
    --color-666-222: #666;
    --color-414141-999: #414141;
    --color-999-darkorange: #999;
    --color-eee-999: #eee;
    --color-eee-666: #eee;
    --color-aaa-999: #aaa;
    --color-a2a2a2-999: #a2a2a2;
    --color-darkorange-222: darkorange;
    --color-222-white: #222;
    --color-white-darkorange: white;
    --color-828282-999: #828282;
    --color-666-666-white: #666;
    --color-999-white-white: #999;
    --color-747474-999-white: #747474;
    --color-999-999-white: #999;
    --color-bbb-999-white: #bbb;
    --color-ccc-999-white: #ccc;
    --color-learn-progress-done: #D9D9D9;
    --color-learn-progress-due: #F0F0F0;

    --border-white-222: #fff;
    --border-white-666: #fff;
    --border-white-363636: #fff;
    --border-ccc-222: #ccc;
    --border-ccc-666: #ccc;
    --border-e0e0e0-666: #e0e0e0;
    --border-color-one: #ccc;
    --border-eee-222: #eee;
    --border-ddd-666: #ddd;
    --border-color-four: #e0e0e0;
    --border-color-five: #e5e5e5;
    --border-color-seven: #ddd;
    --border-color-eight: #808080;
    --border-999-666: #999;
    --border-f2f2f2-222: #f2f2f2;
    --border-8d8d8d-222: #8d8d8d;
    --border-darkorange-222: darkorange;
    --border-aaa-999: #aaa;
    --border-adadad-222: #adadad;
    --border-e5e5e5-222: #e5e5e5;


    --progress-bar-middle-background: #999;
    --text-color-black-gray: #000;

    --button-color-one: #817f7f;
    --button-color-two: #fff;
    --button-color-three: #444;
    --button-start-learn-hover-color: #ffc680;
    --button-start-learn-hover-border: #ffc680;
    --button-secondary-color: #817f7f;
    --button-secondary-color-learn: #817f7f;

    --button-background-one: #e9e9e9;
    --button-hover-focus-one: #000000;

    --reports-backdrop-color: rgba(255,255,255, 0.5);

    --sidebar-item-color-normal: #999;
    --sidebar-item-text-color-normal: #999;
    --sidebar-item-color-current: darkorange;

    --switch-sidebar-current-background-color: rgba(255,255,255,.4);
    --leaderboard-shadow-color: rgba(153,153,153,.75);
    --content-bar-background: #FFF4E0;


    background: url("../../img/bgs/gray-bg.jpg") no-repeat 0 0 fixed;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;

    --highlighted-text-color: darkorange;
    --highlighted-background-color: darkorange;
    --highlighted-border-color: darkorange;
    --highlighted-orange-white-text-color: darkorange;
    --color-grayOld-whiteNew: #999;
    --color-666-999-white: #666;
    --achievement-due-background: #E9E9E9;
    --achievement-done-background: white;
}
body.darkTheme {
    --image-logo: url("../../img/logo/p6_logo_white.svg");
    --image-subject-cover: url("../../img/subject-covers/darkTheme-cover-gray-background.png");
    --image-background-games: url("/img/darkTheme-bg_games.png");

    --icon-wordtest: url("../../img/icons/darkTheme/icon_school_wordtest_simple.svg");
    --icon-wordtest-active: url("../../img/icons/darkTheme/icon_school_wordtest_current.svg");
    --icon-administration: url("../../img/icons/darkTheme/icon_school_administration_simple.svg");
    --icon-administration-active: url("../../img/icons/darkTheme/icon_school_administration_current.svg");
    --icon-add-child: url("../../img/icons/darkTheme/icon_add_child.svg");
    --icon-reports-family: url("../../img/icons/darkTheme/icon_reports_family.svg");
    --icon-reports-group: url("../../img/icons/darkTheme/icon_reports_group.svg");
    --icon-teacher: url("../../img/icons/darkTheme/icon-teacher.svg");
    --icon-special-character-hover: url("../../img/icons/darkTheme/icon-special-character.svg");
    --icon-group-party-simple: url("../../img/icons/darkTheme/icon_group_party_simple.svg");
    --icon-group-party-current: url("../../img/icons/darkTheme/icon_group_party_current.svg");
    --icon-palette-simple: url("../../img/icons/darkTheme/icon_palette_simple.svg");
    --icon-palette-current: url("../../img/icons/darkTheme/icon_palette_current.svg");
    --icon-calendar-clock-current: url("../../img/icons/darkTheme/icon_calendar_clock_current.svg");
    --icon-impressum-simple: url("../../img/icons/darkTheme/icon_impressum_simple.svg");
    --icon-impressum-current: url("../../img/icons/darkTheme/icon_impressum_current.svg");
    --icon-unconfirmed-profile-simple: url("../../img/icons/darkTheme/icon_unconfirmed_profile_simple.svg");
    --icon-unconfirmed-profile-current: url("../../img/icons/darkTheme/icon_unconfirmed_profile_current.svg");
    --icon-foot-prints: url('../../img/icons/darkTheme/icon_foot_prints.svg');
    --icon-p6-simple: url('../../img/icons/darkTheme/icon_p6_simple.svg');
    --icon-p6-current: url('../../img/icons/darkTheme/icon_p6_current.svg');
    --icon-p6-list-simple: url('../../img/icons/darkTheme/icon_p6_list_simple.svg');


    --background-sidebar-current: darkorange;
    --switch-sidebar-current-background-color: rgba(255, 255, 255, .4);
    --leaderboard-shadow-color: rgba(34,34,34,.75);
    --background-sidebar-hover: #363636;

    --background-color-gray-darkestGray: #222;
    --background-color-white-darkestGray: #222;
    --background-color-white-middleDarkGray: #363636;
    --background-color-gray-middleDarkGray: #363636;
    --background-lightGray-black: #000;
    --background-darkorange-darkestGray: #222;
    --background-lighter-highlight: #555;
    --background-color-white-666: #666;

    --background-color-white-middleDarkGray-white: #363636;
    --background-color-gray-darkestGray-white: #222;
    --background-color-gray-darkestGray-none: #222;
    --background-darkorange-darkorange-specific: darkorange;
    --background-color-gray-darkestGray-specific: #222;
    --background-color-gray-middleDarkGray-specific: #363636;
    --background-color-gray-middleDarkGray-white: #363636;
    --background-color-white-darkestGray-gray: #222;

    --progress-bar-default-background: #555;

    --background-ccc-222: #222;
    --background-d4d4d4-666: #666;
    --background-999-222: #222;
    --background-f2f2f2-666: #666;
    --background-f7f7f7-363636: #363636;
    --background-fff2e5-999-specific: #999;
    --background-e6e6e6-363636: #363636;
    --background-white-darkorange: darkorange;
    --background-e5e5e5-999: #999;
    --background-e9e9e9-222: #222;
    --background-d3d3d3-363636: #363636;
    --background-e2e2e2-666: #666;
    --background-e2e2e2-222: #222;
    --background-666-363636-white: #363636;
    --background-color-wizard-steps: #363636;

    --background-practice-line1: #333;
    --background-practice-line2: #282828;

    --background-color-three: #222;
    --background-color-five: darkorange;
    --background-color-six: #363636;

    --color-icons: #999;
    --color-sidebar-buttName-current: #222;

    --color-333-999: #999;
    --color-333-222: #222;
    --color-white-222: #222;
    --color-white-999: #999;
    --color-ccc-999: #999;
    --color-ccc-gray: #99999955;
    --color-ccc-222: #222;
    --color-ccc-666: #666;
    --color-two: darkorange;
    --color-747474-999: #999;
    --color-444-999: #999;
    --color-four: #363636;
    --color-five: #999;
    --color-six: #666;
    --color-activated-cards-progress-bar: #fff2e5;
    --color-eight: #999;
    --color-nine: #999;
    --color-ten: #999;
    --color-eleven: #999;
    --color-5f5f5f-999: #999;
    --color-thirteen: #999;
    --color-454545-999: #999;
    --color-999-222: #222;
    --color-909090-white: white;
    --color-666-999: #999;
    --color-999-666: #666;
    --color-666-222: #222;
    --color-414141-999: #999;
    --color-999-darkorange: darkorange;
    --color-eee-999: #999;
    --color-eee-666: #666;
    --color-aaa-999: #999;
    --color-a2a2a2-999: #999;
    --color-darkorange-222: #222;
    --color-222-white: white;
    --color-white-darkorange: darkorange;
    --color-828282-999: #999;
    --color-666-666-white: #666;
    --color-999-white-white: white;
    --color-747474-999-white: #999;
    --color-999-999-white: #999;
    --color-bbb-999-white: #999;
    --color-ccc-999-white: #999;
    --color-learn-progress-done: #999;
    --color-learn-progress-due: #555;

    --border-white-222: #222;
    --border-white-666: #666;
    --border-white-363636: #363636;
    --border-ccc-222: #222;
    --border-ccc-666: #666;
    --border-e0e0e0-666: #666;
    --border-color-one: #999;
    --border-eee-222: #222;
    --border-ddd-666: #666;
    --border-color-four: #666;
    --border-color-five: #666;
    --border-color-seven: #363636;
    --border-color-eight: #666;
    --border-999-666: #666;
    --border-f2f2f2-222: #222;
    --border-8d8d8d-222: #222;
    --border-darkorange-222: #222;
    --border-aaa-999: #999;
    --border-adadad-222: #222;
    --border-e5e5e5-222: #222;

    --progress-bar-middle-background: #fff2e5;
    --text-color-black-gray: #999;

    --button-color-one: #666;
    --button-color-two: #222;
    --button-color-three: #999;
    --button-start-learn-hover-color: darkorange;
    --button-start-learn-hover-border: #222;
    --button-secondary-color: #999;
    --button-secondary-color-learn: #999;

    --button-background-one: #222;
    --button-hover-focus-one: darkorange;

    --reports-backdrop-color: rgba(54,54,54, 0.4);
    --content-bar-background: #FFF4E0;

    --sidebar-item-color-normal: #999;
    --sidebar-item-text-color-normal: #999;
    --sidebar-item-color-current: #222;

    background: #222;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;

    --highlighted-text-color: darkorange;
    --highlighted-background-color: darkorange;
    --highlighted-border-color: darkorange;
    --highlighted-orange-white-text-color: darkorange;
    --color-grayOld-whiteNew: #999;
    --color-666-999-white: #999;
    --achievement-due-background: #36363655;
    --achievement-done-background: #363636;
}
body.pinkTheme {
    --image-logo: url("../../img/logo/p6_logo_white.svg");

    --icon-wordtest: url("../../img/icons/pinkTheme/icon_school_wordtest_simple.svg");
    --icon-wordtest-active: url("../../img/icons/pinkTheme/icon_school_wordtest_current.svg");
    --icon-special-character-hover: url("../../img/icons/pinkTheme/icon-special-character.svg");
    --icon-group-party-simple: url("../../img/icons/pinkTheme/icon_group_party_simple.svg");
    --icon-group-party-current: url("../../img/icons/pinkTheme/icon_group_party_current.svg");
    --icon-palette-simple: url("../../img/icons/pinkTheme/icon_palette_simple.svg");
    --icon-palette-current: url("../../img/icons/pinkTheme/icon_palette_current.svg");
    --icon-teacher: url("../../img/icons/pinkTheme/icon-teacher.svg");
    --icon-calendar-clock-current: url("../../img/icons/pinkTheme/icon_calendar_clock_current.svg");
    --icon-impressum-simple: url("../../img/icons/pinkTheme/icon_impressum_simple.svg");
    --icon-impressum-current: url("../../img/icons/pinkTheme/icon_impressum_current.svg");
    --icon-unconfirmed-profile-simple: url("../../img/icons/pinkTheme/icon_unconfirmed_profile_simple.svg");
    --icon-unconfirmed-profile-current: url("../../img/icons/pinkTheme/icon_unconfirmed_profile_current.svg");
    --icon-foot-prints: url('../../img/icons/pinkTheme/icon_foot_prints.svg');
    --icon-p6-simple: url('../../img/icons/pinkTheme/icon_p6_simple.svg');
    --icon-p6-current: url('../../img/icons/pinkTheme/icon_p6_current.svg');
    --icon-p6-list-simple: url('../../img/icons/pinkTheme/icon_p6_list_simple.svg');

    --sidebar-item-color-normal: white;
    --sidebar-item-text-color-normal: white;
    --sidebar-item-color-current: white;

    background: url("../../img/bgs/pink-bg.jpg") no-repeat 0 0 fixed;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;

    --background-sidebar-current: #FF7A9C;
    --switch-sidebar-current-background-color: rgba(255, 255, 255, .4);
    --background-sidebar-hover: rgba(255, 255, 255, .4);

    --background-color-white-middleDarkGray-white: white;
    --background-color-gray-darkestGray-white: white;
    --background-color-gray-darkestGray-none: transparent;
    --background-darkorange-darkorange-specific: #ff6088;
    --background-color-gray-darkestGray-specific: #ff6088;
    --background-color-gray-middleDarkGray-specific: #ff6088;
    --background-lighter-highlight: #ff608833;
    --background-fff2e5-999-specific: #ff608833;
    --background-color-wizard-steps: rgba(255, 255, 255, .5);
    --background-666-363636-white: white;
    --background-color-gray-middleDarkGray-white: white;
    --background-color-white-darkestGray-gray: #f2f2f2;

    --progress-bar-default-background: white;
    --progress-bar-middle-background: #ff608855;
    --color-activated-cards-progress-bar: #ff608855;

    --color-icons: white;
    --color-sidebar-buttName-current: white;
    --color-666-666-white: white;
    --color-999-white-white: white;
    --color-747474-999-white: white;
    --color-999-999-white: white;
    --color-bbb-999-white: white;
    --color-ccc-999-white: rgba(255, 255, 255, .7);

    --color-eight: white;

    --content-bar-background: rgba(255,255,255,.75);

    --button-secondary-color: #999;

    --highlighted-text-color: #ff6088;
    --highlighted-background-color: #ff6088;
    --highlighted-border-color: #ff6088;
    --highlighted-orange-white-text-color: white;
    --color-grayOld-whiteNew: white;
    --color-666-999-white: white;
}
body.orangeTheme {
    --image-logo: url("../../img/logo/p6_logo_white.svg");

    --icon-wordtest: url("../../img/icons/orangeTheme/icon_school_wordtest_simple.svg");
    --icon-wordtest-active: url("../../img/icons/orangeTheme/icon_school_wordtest_current.svg");
    --icon-special-character-hover: url("../../img/icons/orangeTheme/icon-special-character.svg");
    --icon-group-party-simple: url("../../img/icons/orangeTheme/icon_group_party_simple.svg");
    --icon-group-party-current: url("../../img/icons/orangeTheme/icon_group_party_current.svg");
    --icon-palette-simple: url("../../img/icons/orangeTheme/icon_palette_simple.svg");
    --icon-teacher: url("../../img/icons/orangeTheme/icon-teacher.svg");
    --icon-palette-current: url("../../img/icons/orangeTheme/icon_palette_current.svg");
    --icon-calendar-clock-current: url("../../img/icons/orangeTheme/icon_calendar_clock_current.svg");
    --icon-impressum-simple: url("../../img/icons/orangeTheme/icon_impressum_simple.svg");
    --icon-impressum-current: url("../../img/icons/orangeTheme/icon_impressum_current.svg");
    --icon-unconfirmed-profile-simple: url("../../img/icons/orangeTheme/icon_unconfirmed_profile_simple.svg");
    --icon-unconfirmed-profile-current: url("../../img/icons/orangeTheme/icon_unconfirmed_profile_current.svg");
    --icon-foot-prints: url('../../img/icons/orangeTheme/icon_foot_prints.svg');
    --icon-p6-simple: url('../../img/icons/orangeTheme/icon_p6_simple.svg');
    --icon-p6-current: url('../../img/icons/orangeTheme/icon_p6_current.svg');
    --icon-p6-list-simple: url('../../img/icons/orangeTheme/icon_p6_list_simple.svg');

    --sidebar-item-color-normal: white;
    --sidebar-item-text-color-normal: white;
    --sidebar-item-color-current: white;

    background: url("../../img/bgs/orange-bg.jpg") no-repeat 0 0 fixed;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;

    --background-sidebar-current: #fc7c00;
    --switch-sidebar-current-background-color: rgba(255, 255, 255, .4);
    --background-sidebar-hover: rgba(255, 255, 255, .4);

    --background-color-white-middleDarkGray-white: white;
    --background-color-gray-darkestGray-white: white;
    --background-color-gray-darkestGray-none: transparent;
    --background-darkorange-darkorange-specific: #fc7c00;
    --background-color-gray-darkestGray-specific: #fc7c00;
    --background-color-gray-middleDarkGray-specific: #fc7c00;
    --background-lighter-highlight:  #fff2e5;
    --background-fff2e5-999-specific: #fc7c0033;
    --background-color-wizard-steps: rgba(255, 255, 255, .5);
    --background-666-363636-white: #666;
    --background-color-gray-middleDarkGray-white: white;
    --background-color-white-darkestGray-gray: #f2f2f2;

    --progress-bar-default-background: white;
    --progress-bar-middle-background: #fc7c0055;
    --color-activated-cards-progress-bar: #fc7c0055;

    --color-icons: white;
    --color-sidebar-buttName-current: white;
    --color-666-666-white: white;
    --color-999-white-white: white;
    --color-747474-999-white: white;
    --color-999-999-white: white;
    --color-bbb-999-white: white;
    --color-ccc-999-white: rgba(255, 255, 255, .7);

    --color-eight: #8d8d8d;

    --content-bar-background: #FFF4E0;

    --button-secondary-color: white;

    --highlighted-text-color: #fc7c00;
    --highlighted-background-color: #fc7c00;
    --highlighted-border-color: #fc7c00;
    --highlighted-orange-white-text-color: white;
    --color-grayOld-whiteNew: white;
    --color-666-999-white: white;
}
body.blueTheme {
    --image-logo: url("../../img/logo/p6_logo_white.svg");

    --icon-wordtest: url("../../img/icons/blueTheme/icon_school_wordtest_simple.svg");
    --icon-wordtest-active: url("../../img/icons/blueTheme/icon_school_wordtest_current.svg");
    --icon-special-character-hover: url("../../img/icons/blueTheme/icon-special-character.svg");
    --icon-group-party-simple: url("../../img/icons/blueTheme/icon_group_party_simple.svg");
    --icon-group-party-current: url("../../img/icons/blueTheme/icon_group_party_current.svg");
    --icon-palette-simple: url("../../img/icons/blueTheme/icon_palette_simple.svg");
    --icon-teacher: url("../../img/icons/blueTheme/icon-teacher.svg");
    --icon-palette-current: url("../../img/icons/blueTheme/icon_palette_current.svg");
    --icon-calendar-clock-current: url("../../img/icons/blueTheme/icon_calendar_clock_current.svg");
    --icon-impressum-simple: url("../../img/icons/blueTheme/icon_impressum_simple.svg");
    --icon-impressum-current: url("../../img/icons/blueTheme/icon_impressum_current.svg");
    --icon-unconfirmed-profile-simple: url("../../img/icons/blueTheme/icon_unconfirmed_profile_simple.svg");
    --icon-unconfirmed-profile-current: url("../../img/icons/blueTheme/icon_unconfirmed_profile_current.svg");
    --icon-foot-prints: url('../../img/icons/blueTheme/icon_foot_prints.svg');
    --icon-p6-simple: url('../../img/icons/blueTheme/icon_p6_simple.svg');
    --icon-p6-current: url('../../img/icons/blueTheme/icon_p6_current.svg');
    --icon-p6-list-simple: url('../../img/icons/blueTheme/icon_p6_list_simple.svg');

    --sidebar-item-color-normal: white;
    --sidebar-item-text-color-normal: white;
    --sidebar-item-color-current: white;

    background: url("../../img/bgs/blue-bg.jpg") no-repeat center center fixed;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;

    --background-sidebar-current: #0d75a5;
    --switch-sidebar-current-background-color: rgba(255, 255, 255, .7);
    --background-sidebar-hover: rgba(255, 255, 255, .7);

    --background-color-white-middleDarkGray-white: white;
    --background-color-gray-darkestGray-white: white;
    --background-color-gray-darkestGray-none: transparent;
    --background-darkorange-darkorange-specific: #0d75a5;
    --background-color-gray-darkestGray-specific: #0d75a5;
    --background-color-gray-middleDarkGray-specific: #0d75a5;
    --background-lighter-highlight: #0d75a533;
    --background-fff2e5-999-specific: #0d75a533;
    --background-color-wizard-steps: rgba(255, 255, 255, .5);
    --background-666-363636-white: white;
    --background-color-gray-middleDarkGray-white: white;
    --background-color-white-darkestGray-gray: #f2f2f2;

    --progress-bar-default-background: white;
    --progress-bar-middle-background: #0d75a555;
    --color-activated-cards-progress-bar: #0d75a555;

    --color-icons: white;
    --color-sidebar-buttName-current: white;
    --color-666-666-white: white;
    --color-999-white-white: white;
    --color-747474-999-white: white;
    --color-999-999-white: white;
    --color-bbb-999-white: white;
    --color-ccc-999-white: rgba(255, 255, 255, .7);

    --color-eight: white;

    --content-bar-background: rgba(255,255,255,.75);

    --button-secondary-color: white;

    --highlighted-text-color: #0d75a5;
    --highlighted-background-color: #0d75a5;
    --highlighted-border-color: #0d75a5;
    --highlighted-orange-white-text-color: white;
    --color-grayOld-whiteNew: white;
    --color-666-999-white: white;
}
body.blueTheme::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0b5d8344;
    z-index: -1;
}

@-webkit-keyframes showhome {from { opacity:0; } to { opacity:1; }}
@-moz-keyframes showhome {from { opacity:0; } to { opacity:1; }}
@keyframes showhome {from { opacity:0; } to { opacity:1; }}

@-moz-keyframes yoyo2 {0% { -moz-transform: rotate(-360deg); }}
@-ms-keyframes yoyo2 {from { transform:scale(1) rotate(0deg);}to { transform:scale(1) rotate(360deg);}}

@-ms-keyframes yoyo {from { transform:scale(1) rotate(0deg);}to { transform:scale(1) rotate(360deg);}}
@-moz-keyframes yoyo {from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(360deg);}}

@keyframes showdropdown {0% {opacity: 0;}100% {opacity: 1;}}
@-webkit-keyframes showdropdown {0% {opacity: 0;}100% {opacity: 1;}}

@-webkit-keyframes showphase {
    0%, 100% {
        -webkit-transform: scale(1,1);
        -moz-transform: scale(1,1);
        transform: scale(1,1);
    }
    20% {
        -webkit-transform: scale(1.5,1.5);
        -moz-transform: scale(1.5,1.5);
        transform: scale(1.5,1.5);
    }
}
@-moz-keyframes showphase {
    0%, 100% {
        -webkit-transform: scale(1,1);
        -moz-transform: scale(1,1);
        transform: scale(1,1);
    }
    20% {
        -webkit-transform: scale(1.5,1.5);
        -moz-transform: scale(1.5,1.5);
        transform: scale(1.5,1.5);
    }
}
@keyframes showphase {
    0%, 100% {
        -webkit-transform: scale(1,1);
        -moz-transform: scale(1,1);
        transform: scale(1,1);
    }
    20% {
        -webkit-transform: scale(1.5,1.5);
        -moz-transform: scale(1.5,1.5);
        transform: scale(1.5,1.5);
    }
}

@-webkit-keyframes show {0%{opacity:0;width:0%} 100% {opacity:1;}}
@-moz-keyframes show {0%{opacity:0;width:0%} 100% {opacity:1;}}
@keyframes show {0%{opacity:0;width:0%} 100% {opacity:1;}}
@-webkit-keyframes block {0%{color:#fff;} 100% {color:#788681;}}
@-moz-keyframes block {0%{color:#fff;} 100% {color:#788681;}}
@keyframes block {0%{color:#fff;} 100% {color:#788681;}}

*:focus {
    outline: none;
}
textarea {
    resize: none;
}
input[name=txtPassword] {
    outline: 0;
}
.login_page {
    background-image: url(../../img/p6o_background.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    height: 100%;
    overflow: auto;
}
.login_page:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.2;
}
a:active,
a:hover,
a:focus {
    text-decoration: none;
}
p[class*=icon-]:before {
    margin: 0 5px 0 -20px;
}
p[class*=icon-] {
    padding-left: 20px;
}

body {
    background-color: var(--background-color-gray-darkestGray);
}
/* -----------------------------------------
   Prevent selection
----------------------------------------- */
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /*z-index: 0;*/
}
/* End Prevent selection */
input, textarea, div[contenteditable=true] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

html {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
}
body {
    overflow: hidden;
}
#questionTxt h1,
#questionTxt h2,
#questionTxt h3,
#questionTxt h4,
#questionTxt h5,
#questionTxt h6,
#answerTxt h1,
#answerTxt h2,
#answerTxt h3,
#answerTxt h4,
#answerTxt h5,
#answerTxt h6,
#userAnswer h1,
#userAnswer h2,
#userAnswer h3,
#userAnswer h4,
#userAnswer h5,
#userAnswer h6 {
    text-transform: none;
}
pre { display: inline; }
#questionTxt > *,
#answerTxt > *,
#userAnswer > * {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
#questionTxt p,
#answerTxt p,
#userAnswer p{
    padding: 0;
    margin: 0;
    font-size: 175%;
    color: var(--text-color-black-gray);
}
.empty-message { margin-top: 50px; }

#questionContainer > .editField + .step1 {
    display: none;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
div[contenteditable=true]::-webkit-input-placeholder,
input:-moz-placeholder,
textarea:-moz-placeholder,
div[contenteditable=true]:-moz-placeholder,
input::-moz-p, textarea::-moz-p,
div[contenteditable=true]::-moz-p,
input:-ms-input-placeholderlaceholder,
textarea:-ms-input-placeholderlaceholder,
div[contenteditable=true]:-ms-input-placeholderlaceholder {
    color: gray;
}

/* disable animation on elements, which don't use it */
.ng-enter,
.ng-leave {
    -webkit-transition: none 0s;
    transition: none 0s;
}
.ng-animate {
    -webkit-animation: none 0s;
    animation: none 0s;
}
.ng-hide.ng-hide-animate{
    display: none !important;
}

/* -----------------------------------------
   Global styles
----------------------------------------- */
body > svg { display: none; }

input::-ms-clear { display: none; }
textarea::-ms-clear { display: none; }

.full-width { width: 100%; }
.full-height { height: 100%; }

.pull-left { float: left; }
.pull-right { float: right; }

.pos-rel { position: relative; }
.pos-abs { position: absolute; }
.pos-fix { position: fixed; }

.bl-block { display: block; }
.bl-inline { display: inline-block; }
.bl-hide { display: none; }

.opacity40 { opacity: 0.4; }
.opacity60 { opacity: 0.6; }

.text-tr-none { text-transform: none; }
.vis-hidden { visibility: hidden; }
.mtop5 { margin-top: 5px; }
.mtop10 { margin-top: 10px; }
.ptop20 { padding-top: 20px; }
.pbottom10 { padding-bottom: 10px; }
.pLeft10 { padding-left: 10px !important;}
.pLeft15 { padding-left: 15px !important;}

.bold {font-weight: bold;}

.col-orange { color:var(--highlighted-text-color); }
.col-orange-report { color:var(--highlighted-text-color); }
.col-gray { color: var(--color-666-999); }

.height100 { height: 100%; }
.height70 { height: 70%; }

.pointer {
    cursor: pointer;
}
.cursor-default {
    cursor: default;
}
ul.breadcrumbs li span.sp-libraty {
    font-size: 16px;
    text-transform: none;
    white-space: nowrap;
}

.custom-tooltip {
    opacity: 0;
    transition: all 0.25s ease;
    background: #666666;
    position: absolute;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    padding: 5px;
    z-index: 999;
    line-height: normal;
    width: 360px;
    left: 15px;
    top: -35px;
    display: none;
}
.de .custom-tooltip { width: 295px; }
.custom-tooltip > .nub {
    display: block;
    width: 0;
    height: 0;
    border: solid 5px;
    position: absolute;
    top: auto;
    bottom: -10px;
    border-color: #666666 transparent transparent transparent;
    left: 16px;
}
.sidebar .item-hover .custom-tooltip {
    opacity: 1;
    display: block;
}


/* -----------------------------------------
   Pre-load images
----------------------------------------- */
#preloadImages {
    width: 0;
    height: 0;
    background: url(../../img/parental_control_hover.png) no-repeat
}


.template {height: 100%;}
.body.row {min-width: 1024px; height: calc(100% - 100px);}
.body .middle .panel > .row {margin: 0 0 22px 0;}
.body .middle .fixed-table-container {overflow:auto;}
.body .middle .panel .fixed-table-container {overflow:auto;}
.body .middle .panel > .row:last-child,.body .middle .panel > .row:last-child .fieldset ul {margin: 0;}
.body .middle .panel > .row > h4 {margin: 0;}
.body .top.row {
    padding: 11px 0;
    color: #fff;
    height: 50px;
    max-height: 50px;
    background-color: white;
    position: relative;
}
.body .top.row h3 {width: 70%; display: inline-block;margin: 0 10px 0 0;color: #fff;line-height: 30px;font-weight: 200;padding:0 20px; float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important;}
.body .top.row h3 span.practiceHeader {
    position: relative;
    padding-right: 30px;
    margin-left: 0;
}
.top_for_name_cyrillic {
    width: 70%;
    display: inline-block;
    margin: -6px 10px 0 0;
    text-transform: uppercase;
    color: #fff;
    line-height: 30px;
    font-weight: 200;
    padding:0 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    font-size: 1.17em;
    text-align: right;
}

.top_for_name_cyrillic .no_transform {
    text-transform: none;
}

.practiceHeaderWrapper { width: 100%; }
.body .top.row i.arrow_carrot-right { font-size: 30px; position: relative; top: 5px; padding: 0; right:0; margin-right: 0; line-height: 28px; }
.ie11 .body .top.row i.arrow_carrot-right { top: -2px; }
.body .bottom.row {padding: 10px 6px 15px 20px; width:100%;}
.body.learnPage .bottom.row {padding-left: 27px;}
.body .bottom.row a {color: #fff;text-decoration: none;}
.body .bottom.row .button i.right{margin-left:6px}
.managePage .bottom.row {
    background: var(--background-color-gray-darkestGray-none);
    padding: 0 0 25px 0;
    margin-top: 15px;
}
.body .middle.row > h3,
.body .middle.row .four.columns h3 {font-size:0.8em; padding:32px 20px; line-height:1em; text-transform: uppercase;font-weight: 200;border: 1px solid #cccccc; margin:0px; color:#9B9B9B}
.body.learnPage .middle.row .four.columns:first-child h3 {border-right: none;}
.body.learnPage .middle.row .four.columns:first-child h3 .right {bottom: 8px;}
.body.learnPage .middle.row .four.columns:last-child h3 {border-left: none;}
.body .middle.row .four.columns h3.your {
    border: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}
.body.learnPage .middle.row .four.columns h3.your {border: 1px solid #cccccc; }
.body.learnPage .middle.row .four.columns h3.your.wrong {padding: 21px 20px;}
.body.learnPage .middle.row .four.columns h3.your .right {bottom: 8px;}
.body.learnPage .middle.row .four.columns h3.your .improvement {
    text-decoration: underline;
    text-transform: none;
    cursor: pointer;
    padding-left: 0;
    padding-top: 10px;
    display: inline-block;
}

.body.learnPage .middle.row .four.columns h3.your .languages.right {
    position: absolute;
    top: 25px;
    right: 5px;
}
.body.add > .middle {position: relative}
.body.add > .middle > .row {float: left;width: 70%;margin-left: 350px;min-width: 846px;}

.middle.row {
    background-color: transparent;
    position: relative;
    width: 100%;
    height: 100%;
}
.middleRowNew {
    background-color: transparent;
    position: relative;
    width: 100%;
    height: calc(100vh - 69px);
}
.learnPage .card-animation {
    width: 80%;
    margin-left: 10%;
    height: 100%;
}
.learnPage .card-animation .middle.row {
    background: var(--background-color-white-middleDarkGray);
}
.learnPage .card-animation .middle.row.topRow {
    height: 70px;
}
.learnPage .card-animation .middle.row.middleRow {
    height: calc(100% - 170px);
}
.learnPage .card-animation .middle:first-child.row:first-child {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}
.learnPage .card-animation .middle:last-child {
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

.learnPage .flag {
    position: absolute;
    z-index: 6;
    bottom: 10px;
    left: 15px;
    border-radius: .5rem;
    border: none;
}
.learnPage .step2 .flag,
.learnPage .step3 .flag {
    display: none;
}

.learnPage .progress-bar .current-progress {
    height: 15px;
    position: absolute;
    background-color: var(--highlighted-background-color);
    border-radius: .5rem;
    left: 0;
}
.learnPage .progress-bar .currentMiddleProgress {
    height: 15px;
    position: absolute;
    background-color: var(--progress-bar-middle-background);
    border-radius: .5rem;
    left: 0;
}
.learnPage #info_sign .button-was-right, .learnPage #info_sign .button-was-wrong {
    border: 1px solid var(--border-white-666);
    color: var(--button-color-one);
}
.learnPage #info_sign .button-was-right:hover,
.learnPage #info_sign .button-was-right:focus,
.learnPage #info_sign .button-was-wrong:hover,
.learnPage #info_sign .button-was-wrong:focus{
    color: var(--button-hover-focus-one);
    border-color: var(--button-hover-focus-one);
}
.learnPage .buttonNext {
    width: 100%;
    color: white;
}
.learnPage .buttonNext::before {
    background-color: rgba(105,180,45,1);
}
.learnPage .buttonNext:not([disabled]):hover::before, .learnPage .buttonNext:not([disabled]):focus::before {
    background-color: rgba(105,180,45,.7);
}
.learnPage .buttonNext::after {
    border: 1px solid rgba(105,180,45,.7);
}

.icon {display: inline-block;height: 24px;line-height: 24px;text-align: center;transform: scale(1.1, 1.1);transition: all 150ms ease 0s;width: 30px;cursor: pointer;}
.icon:hover {transform: scale(1.5, 1.5);}
.icon_check.checkbox {background: transparent; border: 1px solid var(--border-color-one); margin: 5px 10px 5px 2px;overflow: hidden;display: inline-block;width: 18px;height: 18px;text-align: center;position: relative; vertical-align: middle;}
.icon_check.checkbox:before {visibility: hidden;}
.icon_teacher {
    margin-left: 5px;
    width: 30px;
}
.icon_teacher_orange {
    height: 26px;
    margin-left: 2px;
    position: relative;
    top: -2px;
    vertical-align: middle;}

.set h1,
.set h2,
.set h3,
.set h4,
.set h5,
.set h6,
.set {color: var(--highlighted-text-color);}

.set > .icon_check.checkbox,
.set > td .icon_check.checkbox,
.set > .th-inner .icon_check.checkbox {
    border:0;
    font-size: 25px;
    line-height: 14px;
    overflow: visible;
}
.set > .icon_check.checkbox:before,
.set > td .icon_check.checkbox:before,
.set > .th-inner .icon_check.checkbox:before {
    visibility: visible;
    position: absolute;
    top: 3px;
    left: -2px;
}
.preferences-sub .set > .icon_check.checkbox:before,
.preferences-sub .set > td .icon_check.checkbox:before,
.preferences-sub .set > .th-inner .icon_check.checkbox:before {
    left: -3px;
}
.set > .radiobox {
    border: 1px solid var(--highlighted-border-color);
}
.set > .radiobox:before,
.set > td .radiobox:before {
    visibility: visible;
    border: 1px solid var(--highlighted-border-color);
    background: none repeat scroll 0 0 var(--highlighted-background-color);
    border-radius: 1000px 1000px 1000px 1000px;
    content: "";
    display: block;
    height: 8px;
    left: 4px;
    position: relative;
    top: 4px;
    width: 8px;
}
.set .radiobox + * {
    font-weight: bold;
}

.tabs {border-bottom: 0;}
#btnDelete {
    font-size: 16px;
}
.button {
    font-weight:400;
    height: 28px;
    border-radius: .5rem;
    transition: all 0.25s;
    color: var(--button-color-two);
    background: var(--highlighted-background-color);
}
.button:hover, .button:focus {
    opacity: .7;
}

#phaseDropDown .disabled, #unitDropDown .disabled, #subjectDropDown .disabled, #subjectsBatchDropDown .disabled {
    opacity: .5 !important;
}


.button[class*=icon-]:before, a[class*=icon-]:before {margin:0 10px 0 0;}
.button.third {background-color: var(--button-color-two); color: var(--highlighted-text-color); border: 1px solid var(--button-color-two);}
.button.start_learn {
    background-color: var(--highlighted-background-color);
    color: var(--button-color-two);
    font-size: 16px;
}
.button.start_learn:hover {

}
.login2 .button:hover {opacity: 0.8 }
.button.third:hover, .button.third:focus {border-color: var(--highlighted-border-color)}
.button.secondary {}
.button.secondary.grey {

}
.button.right i{margin-left: 10px}
.body .bottom.row a.button.secondary, .learnDirection a.secondary {
    outline: none;
    background: transparent;
    color: var(--button-secondary-color);
    font-size: 16px;
    border: 1px solid transparent;
}
.learnDirection a.secondary {
    color: var(--button-secondary-color-learn);
}
.body .bottom.row a.button.secondary:not(.disabled):hover,
.body .bottom.row a.button.secondary:not(.disabled):focus,
.learnDirection a.secondary:not(.disabled):hover,
.learnDirection a.secondary:not(.disabled):focus {
    background: transparent;
    color:var(--highlighted-text-color);
    border-color:var(--highlighted-border-color);
}
.button.icon-resize-small:before {transform: rotate(45deg);}
.button.link {background:none;color: var(--button-secondary-color);border: 1px solid transparent;border-radius:.7rem;font-weight: normal;}
.button.link:hover, .button.link:focus {
    color:var(--highlighted-text-color);
    border-color: var(--highlighted-border-color);
}
.clear {clear: both;}

.preferences .fieldset .custom ul.dropdown-menu a li.selected:before {color:var(--highlighted-text-color);}
.preferences .fieldset .custom ul.dropdown-menu a li:before {float:left;margin-right: 10px;color: #ffffff;}
.preferences .fieldset .custom ul.dropdown-menu a li{margin: 5px 0;}
.preferences .set > .icon_check.checkbox {margin: 3px 10px 7px 0px;}

input[type="text"], input[type="password"]{-webkit-border-radius: 0;-moz-border-radius: 0;-ms-border-radius: 0;-o-border-radius: 0;border-radius: 0;}
input[type="text"]:focus {border: 1px solid var(--highlighted-border-color);outline: none;background: transparent;}

.book-cover[class*=icon-] {color: #444;}

.swap-options .set > .radiobox:before {background-color: #000;}

.input-inline {display: inline !important;margin: 0 10px !important;vertical-align: middle !important;width: auto !important;}

fieldset {border-radius: 0 !important;}
.fieldset ul {list-style-type: none;}
.fieldset ul.row {margin: 0 0 10px 0;}

.radiobox:before {visibility: hidden;}
.radiobox {font-size: 10px;background: transparent;color: #fff;border: 1px solid #ccc;margin: 8px 10px 0 0 !important;-moz-border-radius: 20%;border-radius: 100%;overflow: hidden;display: inline-block;width: 18px;height: 18px;text-align: center;position: relative;vertical-align: middle;}

.swap-options .radiobox {border-color: #000;width: 14px;height: 14px;top: -6px;}
.swap-options label.ng-scope {margin-top: 10px;}
.swap-option-text {font-size: 14px;}
.swap-option-description {font-size: 10px;}
.swap-option {display: inline-block;}
.swap-type-img {margin-right: -18px;margin-left: -26px;}
.swap-options .set .radiobox + * {font-weight: normal !important;}
.swap-options {margin-left: 40px;}
.swap-options .radiobox:before {left: 2px;top: 2px;}

select {background: #fff;border: none;padding: 6px;text-transform: none;}

.left[class^="icon-"], .left[class*=" icon-"] {margin-right: 10px;}

.ui-state-default td .button.third {height: 20px;font-size: 11px;padding: 0 10px;text-transform: none;vertical-align: top;}
.tooltip {
    display: none;
}
span.tooltip {
    transition: opacity 1s;
    background-color: #666666;
    z-index: -1;
    border-radius: .5rem;
}
.tooltip.tip-top > .nub,
.tooltip.tip-centered-top > .nub {
    border-color: #666666 transparent transparent transparent;
}
*:hover > span.tooltip {
    opacity: 1;
    display: block;
    z-index: 999;
}
.tooltip.tip-top {
    top: -12px;
    left: 8px;
}
.tooltip.tip-top.activation-modal {
    left: 8px;
    top: -40px;
}
.tooltip.tip-top.edit-page-disabled {
    left: -30px;
    top: -27px;
    width: 100px;
}
.tooltip.tip-top.edit-page-disabled span.nub {
    left: 45%;
}

.tooltip-wrapper {position: relative;}
.tooltip-wrapper .tooltip.tip-top {width: 200px; top: auto; bottom: 100%;}
.tooltip-wrapper.left .tooltip.tip-top > .nub {left: 30px;}
.tooltip-wrapper.right .tooltip.tip-top {right: 0; left: auto;}
.managePage .tooltip-wrapper.right .tooltip.tip-top {right: 20px;}
.tooltip-wrapper.right .tooltip.tip-top > .nub {right: 40px;  left: auto;}

.units.td_icon .tooltip.tip-top {left: 170px; width: 200px; font-size: 12px; padding: 5px; top: -14px; z-index: 10;}
.de .units.td_icon .tooltip.tip-top {left: 126px; width: 300px; font-size: 12px; padding: 5px; white-space: normal; text-align: center; top: -30px;}
.units.td_icon .tooltip.tip-top > .nub {top: 25px;}
.de .units.td_icon .tooltip.tip-top > .nub {top: 40px; left: 144px;}

.long-name {
    opacity: 0;
    display: none;
    bottom: 100%;
    left: 0;
    position: absolute;
    width: 110%;
    text-align: center;
    z-index: 98;
    padding: 0 !important;
    margin: 0;
}
.long-name > .nub {
    display: block;
    width: 0;
    height: 0;
    border: solid 5px;
    border-color: black transparent transparent  transparent;
    border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
    position: absolute;
    top: 100%;
    left: 45%;
}
.long-name > .sub_title {
    min-width: 80px;
    display: inline-block;
    background: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
    padding: 5px;
    white-space: normal;
    word-wrap: break-word;
    line-height: normal;
    word-break: break-all;
}
.forMoveButtons {
    background: transparent none repeat scroll 0 0;
    left: 30px;
    position: absolute;
    top: 30px;
}
.footer-button-alternative {
    display: table;
    float: right;
    margin-right: 10px;
}
#subjectsBatchDropDown, #unitsBatchDropDown {
    width: 330px;
}
.forMoveButtons #subjectsBatchDropDown {
    width: 470px;
}
.forMoveButtons #unitsBatchDropDown {
    width: 310px;
}

#subjectsBatchDropDown .phaseList .long-name { width: 100%; top: 30px; max-width: 350px; }
#unitsBatchDropDown .phaseList .long-name { width: 100%; top: 30px; }
#subjectsBatchDropDown .phaseList .long-name .nub { top: -15px; }
#unitsBatchDropDown .phaseList .long-name .nub { top: -10px; }

#subjectsBatchDropDown .phaseList .up-menu .long-name,
#unitsBatchDropDown .phaseList .up-menu .long-name { width: 100%; top: -35px; }
#subjectsBatchDropDown .phaseList .up-menu .long-name .nub,
#unitsBatchDropDown .phaseList .up-menu .long-name .nub {
    top: 40px;
}

.table_lib .up-menu .long-name{bottom:100%;}
.subjects .up-menu .long-name{bottom:65%;}
.down-menu .long-name .nub {
    top: -10px;
    border-color: transparent transparent rgba(0, 0, 0, 0.85) transparent;
}
.up-menu.down-menu .long-name .nub {
    border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
}
.tooltip_container .down-menu .long-name .nub { top: -15px; }
.tooltip_container {border: #e9e9e9;}
.tooltip_container .alias {
    color: #999;
    float: left;
    font-size: 16px;
    padding: 10px 9px 5px;
}

.approvePage .tooltip_container .alias,
.approvePage .tooltip_container .alias,
.approvePage .tooltip_container .alias,
.approvePage .tooltip_container .alias {
    color: var(--color-999-white-white);
}

.tooltip_container .up-menu.down-menu .long-name {
    top: -45px;
}
.tooltip_container .up-menu.down-menu .long-name .nub {
    top: 20px;
}

.table_lib .down-menu .long-name,
.tooltip_container .down-menu .long-name {
    top:20px;
}
.subjects .down-menu .long-name {top:130%;}

*:hover > span.long-name {display: block;
    -webkit-animation: showhome 0.2s forwards 0.2s;
    -moz-animation: showhome 0.2s forwards 0.2s;
    animation: showhome 0.2s forwards 0.2s;
}

.warnRedCardsAmount .tooltip.tip-top {top: -22px; left: 2px;}

.footer.row {padding: 0 22px; background-color: #fff;}
.footer.row {background-color: transparent; border-top: 5px solid #fff;padding: 10px;text-align: center;}
.footer.row p {margin: 0;}
.footer.row a {color:#ffffff}

.logo {
    width: 270px;
    margin: 10px 0 0;
    background: var(--image-logo) no-repeat;
    display: inline-block;
    height: 50px;
    background-size: contain;
    background-position: left center;
}

.panel {background-color: var(--background-color-white-middleDarkGray); border: none; overflow: visible;}
.panel.side {background: #e5f1ed !important}
.panel .columns {padding: 0 15px 0 0;}

.loading {
    position: relative;
    overflow: hidden;
}
.loadingSubjects {
    -ms-animation: yoyo2 2s linear infinite;
    -moz-animation: yoyo2 2s linear infinite;
}
.loadingSubjectsDelete {
    -ms-animation: yoyo2 2s linear infinite;
    -moz-animation: yoyo2 2s linear infinite;
}

.loadingCard {
    position: absolute;
    background: url('../../img/loading-icon-home.svg') left top no-repeat;
    width: 30px;
    height: 30px;
    background-size: 30px;
    line-height: 22px;
    padding: 3px;
    top: 20%;
    right: 22px;
}
.loadingSubjects {
    position: absolute;
    background: url('../../img/loading-icon-upload.svg') left top no-repeat;
    width: 30px;
    height: 30px;
    background-size: 30px;
    line-height: 22px;
    top: -1px;
    left: 0;
    z-index: 999;
}
.reveal-modal-footer.row.active .loadingSubjects {left: 20px;}

#loadingId,
#loading-bg {
    background-color: #eee;
    height: 100%;
    opacity: 0.4;
    overflow: visible;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 14500;
}

.red {color: red;}
.dangerBorder { border: 2px solid var(--highlighted-border-color) !important;}
/* -----------------------------------------
  List Components
----------------------------------------- */

.list-shell {overflow-y: auto;overflow-x: hidden;margin: 0 0 22px 0;}
.list-shell.form.custom li {
    position: relative;
    background: var(--background-color-white-middleDarkGray-white);
    padding: 2px;
    margin-bottom: 5px;
    -webkit-transition: background 0.15s ease-in-out;
    -moz-transition: background 0.15s ease-in-out;
    -o-transition: background 0.15s ease-in-out;
    transition: background 0.15s ease-in-out;
    border-radius: .5rem;
}
.list-shell.form.custom li.single_item { margin-bottom: 10px; }

.list-shell.form.custom li.practice {overflow: hidden;}
.list-shell.form.custom li.inactive, .list-shell.form.custom li.inactive a, .table-items.fixed-layout tr.inactive td{color:#cccccc;}
.list-shell.form.custom li.inactive img {opacity: 0.3;}
.list-shell.form.custom li .button-group {
    position: absolute;
    bottom: -50px;
    right: 25px;
    -webkit-transition: bottom 0.15s ease-in-out;
    -moz-transition: bottom 0.15s ease-in-out;
    -o-transition: bottom 0.15s ease-in-out;
    transition: bottom 0.15s ease-in-out;
}
.list-shell.form.custom li:hover .button-group {bottom: 5px;}
.list-shell.form.custom .active span.custom.radio:before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
    background: #222222;
    position: relative;
    top: 3px;
    left: 3px;
}
.list-shell.form.custom span.custom.checkbox:before {
    content: "";
    display: block;
    line-height: 0.8;
    height: 14px;
    width: 14px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
    color: #fff;
}
.list-shell.form.custom .active span.custom.checkbox:before {content: "\00d7";color: #222222;}
.list-shell form.custom div.row .six label {color:#000000;}

/* -----------------------------------------
   Additional Table
----------------------------------------- */
table {
    background-color: white;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.table {
    display: table;
}
.table .table-row {
    display: table-row;
}
.table .table-cell {
    display: table-cell;
}
.table-items,
table.table-summary {
    border: hidden;
    padding: 0;
}
.table-items th {
    padding: 0;
}
.table-items th.first {
    min-width: 50px;
}
.table-items th.second,
.table-items th.third {
    min-width: 150px;
}
.table-items td {
    padding: 5px 0;
    vertical-align: middle;
    color: var(--color-333-999);
}
.table-items td i.checkbox {
    margin-left:10px;
}
.table-items tbody tr.set td {
    color: var(--highlighted-text-color);
}
.table-items tbody tr.grey td {
    color: var(--color-ccc-666);
}
.table-items tbody tr.grey.set td {
    color: var(--color-two);
}

/* -----------------------------------------
   subjects dropdown
----------------------------------------- */
#subjectDropDown {
    min-width: 470px;
    width: 36%;
    z-index: 6;
}
#subjectDropDown .phaseList {
    width: inherit;
}
#subjectDropDown .phaseList tr {
    background: var(--background-color-gray-darkestGray);
}
#subjectDropDown.managePageClass .tooltip_container {
    min-width: 190px;
    width: 100%;
}
#subjectDropDown .libPhaseModal {
    width: auto;
    min-width: 360px;
    max-width: 450px;
    border-radius: .5rem;
}
#subjectDropDown ul.breadcrumbs li a.selector.arrow_carrot-down {
    padding-left: 0;
}
#subjectDropDown .phaseList tr td span.smart_name {
    padding-right: 15px;
    max-width: 100%;
    margin-top: 3px;
}
#subjectDropDown .phaseList tr td span.long-name {
    left: -40px;
    max-width: 450px;
    min-width: 80px;
    width: auto;
    display: block;
}
#subjectDropDown .phaseList tr td span.long-name > .sub_title {
    width: 80%;
    display: inline-block;
}

#subjectDropDown > div.active > div.subjectSelect > div.unit_container.unit_list > table > tbody.phaseList > tr { min-height: 38px; height: auto; background: var(--background-color-white-darkestGray); border-bottom: none; border-top: 1px solid var(--border-ccc-666);}
#subjectDropDown > div.active > div.subjectSelect > div.unit_container.unit_list > table > tbody.phaseList > tr:not(.disabled):hover td { color: var(--highlighted-text-color);}
#subjectDropDown > div.active > div.subjectSelect > div.unit_container.unit_list > table > tbody.phaseList > tr > td.td-text { display: inline-block; float: left; }
#subjectDropDown > div.active > div.subjectSelect > div.unit_container.unit_list > table > tbody.phaseList > tr > td.td-text.set { color: var(--highlighted-text-color); }
#subjectDropDown > div.active > div.subjectSelect > div.unit_container.unit_list > table > tbody.phaseList > tr > td:first-child { width: 40px; }
#subjectDropDown > div.active > div.subjectSelect > div.unit_container.unit_list > table > tbody.phaseList > tr > td:last-child {
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
}
#subjectDropDown > div.active > div.subjectSelect > div.unit_container.unit_list > table > tbody.phaseList > tr > td.editMode:first-child { width: 27px; vertical-align: top; }
#subjectDropDown > div.active > div.subjectSelect > div.unit_container.unit_list > table > tbody.phaseList > tr > td.editMode:last-child {
    width: -webkit-calc(100% - 27px);
    width: calc(100% - 27px);
}
#subjectDropDown > div.active > div.subjectSelect > div.unit_container.unit_list > table > tbody.phaseList > tr > td input,
#subjectsBatchDropDown tbody.phaseList > tr > td input {
    width: 98%;
    border-radius: .5rem;
    font-size: 14px;
    padding: 2px 0 0 5px;
    color: var(--color-333-999);
    border-color: var(--border-white-666);
    background: var(--background-color-gray-darkestGray);
}
#subjectDropDown > div.active > div.subjectSelect > div.unit_container.unit_list > table > tbody.phaseList > tr > td input[disabled],
#subjectsBatchDropDown tbody.phaseList > tr > td input[disabled]
{opacity: .5;}
#subjectDropDown > div.active > div.subjectSelect > div.unit_container.unit_list > table > tbody.phaseList > tr > td.editableMode { width: 100%; }

#subjectDropDown .tooltip_container .libPhaseModal table { margin-right: 5px; }
#subjectDropDown div.fixed-table-container-inner.unit_container.unit_list { width: inherit; border-bottom: 1px solid var(--border-white-666); }

#subjectDropDown div.fixed-table-container-inner.unit_container.unit_list > .table-items { width: auto; margin: 0;}
#subjectDropDown div.fixed-table-container-inner.unit_container.unit_list > .table-items.table-editable { width: 99%; }
#subjectDropDown div.fixed-table-container-inner.unit_container.unit_list > .table-items > .phaseList,
#subjectDropDown div.fixed-table-container-inner.unit_container.unit_list > .table-items > .phaseList > .ui-state-default { width: auto; display: block; }
#subjectDropDown div.fixed-table-container-inner.unit_container.unit_list > .table-items > .phaseList > .ui-state-default > td:nth-child(2) .smart_name {  }

/* -----------------------------------------
   Units dropdown
----------------------------------------- */
#unitDropDown {
    min-width: 300px;
    width: 20%;
    z-index: 5;
}
#unitDropDown .libPhaseModal {
    min-width: 360px;
    width: auto;
    max-width: 500px;
    border-radius: .5rem;
}
#unitDropDown .phaseList tr td span.long-name {
    left: -40px;
    width: 99%;
}
#unitDropDown .subject_container {
    width: 85%;
}
#unitDropDown .tooltip_container .subject_name {
    width: 85%;
}
#unitDropDown .column .tooltip_container .subject_name {
    width: 85%;
}
#unitDropDown ul.breadcrumbs li a.selector.arrow_carrot-down {
    padding-left: 0;
}
#unitDropDown #selectItemLib .phaseList tr td span.smart_name {
    padding-right: 15px;
}
#unitDropDown #selectItemLib .unit_list #unitList > .phaseList tr {
    display: inline-block;
    width: 100%;
    background: var(--background-color-white-darkestGray);
    border-color: var(--border-ccc-666);
}
#unitDropDown #selectItemLib .unit_list #unitList > .phaseList tr.disabled {
    background: var(--background-color-white-darkestGray);
}
#unitDropDown #selectItemLib .unit_list #unitList > .phaseList tr:not(.disabled):hover td {
    color: var(--highlighted-text-color);
}
#unitDropDown #selectItemLib .unit_list #unitList > .phaseList tr > td:last-child {
    width: 100%;
    max-width: 378px;
    overflow-y: visible;
    overflow-x: visible;
}
#unitList > .phaseList tr.red td.set > span {
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 45px;
}
#unitDropDown #selectItemLib table { margin-right: 5px; overflow: visible; }
#unitDropDown #selectItemLib div.unit_container.unit_list { border-bottom: 1px solid var(--border-white-666); }
#selectItemLib #unitList tr.ui-state-default > td > input { width: 100%; border-radius: .5rem; font-size: 14px; padding: 2px 0 0 5px; background: var(--background-color-gray-darkestGray); color: var(--color-333-999); border-color: var(--border-white-666); }
#selectItemLib .tooltip_container .libPhaseModal .fixed-table-container-inner table {}
#unitDropDown #selectItemLib > div > table#unitList.table-editable { width: 99% }

#unitDropDown #unitsButton > li:nth-child(3) { float: right; }
.title_lib #unitsButton.breadcrumbs { padding-left: 0; cursor: default; }
.title_lib #unitsButton.breadcrumbs > li { cursor: pointer; }
.title_lib #unitsButton.breadcrumbs > li:first-child {
    padding-left: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 58%
}

/* -----------------------------------------
   phases dropdown
----------------------------------------- */
#phaseDropDown {
    float: left;
    min-width: 220px;
    padding-right: 15px;
    width: 16%;
    z-index: 4;
}
#phaseDropDown .libPhaseModal {
    min-width: 300px;
    width: auto;
    border-radius: .5rem;
}
#phaseDropDown #phasesButton > li:nth-child(3) { float: right; }
.title_lib #phasesButton.breadcrumbs > li:first-child { padding-left: 10px; }

#subjectDropDown div.libPhaseModal > table.table-items tbody tr:first-child:hover,
#unitDropDown div.libPhaseModal > table.table-items tbody tr:first-child:hover,
#phaseDropDown div.libPhaseModal > table.table-items tbody tr:first-child:hover,
#subjectsBatchDropDown div.libPhaseModal > table.table-items tbody tr:first-child:hover,
#unitsBatchDropDown div.libPhaseModal > table.table-items tbody tr:first-child:hover { cursor: default; }

#unitDropDown div.libPhaseModal > table.table-items tbody tr,
#phaseDropDown div.libPhaseModal > table.table-items tbody tr,
#subjectDropDown div.libPhaseModal > table.table-items tbody tr,
#subjectsBatchDropDown div.libPhaseModal > table.table-items tbody tr,
#unitsBatchDropDown div.libPhaseModal > table.table-items tbody tr{
    background: var(--background-color-white-darkestGray);
}


#subjectDropDown div.libPhaseModal > table.table-items tbody tr:first-child i:hover,
#unitDropDown div.libPhaseModal > table.table-items tbody tr:first-child i:hover,
#phaseDropDown div.libPhaseModal > table.table-items tbody tr:first-child i:hover,
#subjectsBatchDropDown div.libPhaseModal > table.table-items tbody tr:first-child:hover,
#unitsBatchDropDown div.libPhaseModal > table.table-items tbody tr:first-child:hover {cursor: pointer;}

#unitList tr.ui-state-default td:nth-child(2) { width: 100%; max-width: 390px; }
#subjectsBatchDropDown .unit_container tr.ui-state-default td:nth-child(2) { width: 100%; max-width: 390px; }

.table-items tbody tr {
    background: var(--background-color-white-middleDarkGray);
    cursor: pointer;
    overflow: hidden;
}
.table-items tbody tr:hover {
    background: var(--background-color-gray-darkestGray);
    border-color: var(--border-ccc-222);
}
.wizardPage .table-items tbody tr td {
    border-bottom: 1px solid var(--border-eee-222);
}
.unit_container .table-items tbody tr {
    background: var(--background-color-white-darkestGray);
}
.table-items tbody tr.disabled {
    cursor: auto;
}
.table-items tbody td .dropdown {
    vertical-align: middle;
    margin: 0;
}
.table-items.attachement td:nth-child(3),
.table-items.attachement td:nth-child(5) {
    overflow: visible !important;
    width: 40px !important;
    padding: 0;
}
.table-items .icon-list {color: #999;transform: scale(1.2, 1.2);transition: all 0.15s ease-out;opacity: 0;display: none;width: 100px;height: 20px;text-align: center;}
.table-items .icon-list:hover {color: #222;}
.table-items tr:hover .icon-list {opacity: 1;}
.table-items thead .th-inner .arrow_left-right_alt {padding-top: 14px; font-size: 150%;}
.table-items th, .table-items td, /*.phaseList tr td, .phaseList tr td span,*/ .selectUnits div {overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important;}
.phaseList tr td span.smart_name {display: block;width: 100%;overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; }

.table-items .expand {width: 99% !important;}

.table-summary {margin: 0 20px}
.table-summary tr {background: #fff;border-bottom: 1px solid #eee;cursor: pointer;}
.table-summary tr:last-child td {padding: 22px 6px;}
.table-summary td {padding: 11px 6px;}
.table-summary td:nth-child(1) {width: 20%;}

.fixed-layout {table-layout: fixed;}

.th-inner {position: absolute;top: 0;text-align: left; cursor: pointer; color: var(--color-747474-999);}
.th-inner.default_cursor { cursor: default; }
.th-inner i {display: none;}
.th-inner i[class^="icon-"], .th-inner i[class*="icon-"] {margin: 0 !important;}
.th-inner i[class^="icon-chevron-"], .th-inner i[class*="icon-chevron-"] {margin: 2px 0 0 22px !important;}
.th-inner.set {color: var(--highlighted-text-color);}
.th-inner.set i {display: inline;}

.fixed-table-container-inner {height: auto;border-top: 1px solid var(--border-ddd-666);}
.fixed-table-container, .list-shell {
    width: 100%;
    margin: 0 0 10px auto;
    position: relative;
}
.fixed-table-container-inner {
    overflow-x: hidden;
    overflow-y: auto;
}
.fixed-table-container-inner .icon-paper-clip {font-style: italic;line-height: inherit;font-size: smaller;color:grey;}
.middle .fixed-table-container-inner .fixed-table-container.loading {overflow: hidden;}

/* -----------------------------------------
   Phase Bar
----------------------------------------- */
.phasebar .panel {
    font-weight: 200;
    padding: 0;
    line-height: 23px;
    margin: 0 10px 0 0;
    text-align: center;
    width: 25px;
    height: 25px;
    color: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: rgba(252,124,0,0);
    overflow: visible;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.phasebar .phaseActive {background-color: rgba(252,124,0,1);color: #fff;-webkit-animation: showphase 0.5s ease 1;-moz-animation: showphase 0.5s ease 1;animation: showphase 0.5s ease 1;}
.phasebar .phaseVisited {color: #ffffff; opacity: 1;}
.phasebar.disabled {opacity: 1;color: #fff;}
.phasebar.disabled .phaseActive {background-color: transparent;}

/* -----------------------------------------
   Query Card Page
----------------------------------------- */
#userAnswer {border-top-left-radius: .5rem; border-top-right-radius: .5rem;}
/* practice page */
.de .learnPage .bottom.row #btnno,
.de .learnPage .bottom.row #compareBtn { width: 197px; }
.en .learnPage .bottom.row #btnno,
.en .learnPage .bottom.row #compareBtn { width: 160px; }
#compareBtn:not([disabled]):focus, #compareBtn:not([disabled]):hover {
    background: var(--highlighted-background-color);
    color: white;
}

#yourAnswer, #practiceAnswer { display: block; position: relative;}
#yourAnswer .inputWrap, #practiceAnswer .inputWrap {
    height: 100%;
}
    /* add page left and right edit div-contenteditable */
.step1 #questionTxt,
.step1 #answerTxt {
    height: -webkit-calc(100% - 78px);
    height: calc(100% - 78px);
    display: block;
}
.step2 #questionTxt,
.step2 #answerTxt {
    height: -webkit-calc(100% - 252px);
    height: calc(100% - 252px);
}
.step3 #questionTxt,
.step3 #answerTxt {
    height: -webkit-calc(100% - 78px);
    height: calc(100% - 78px);
}
#questionContainer { position: relative; display: block; }

#questionTxt.disabled *,
#answerTxt.disabled * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#questionTxt *,
#answerTxt *,
#userAnswer *{
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;

}
#questionTxt ul,
#answerTxt ul {
    margin-left: 20px;
}

#answerContainer { position: relative; }

.greytext iframe html body p {
    color: var(--color-four);
}
#questionContainer .annotation-icon,
#answerContainer .annotation-icon {
    float: left;
    font-size: 28px;
    padding-top: 15px;
    width: 8%;
    color: #999;
}

#questionContainer.step2 .annotation-icon,
#questionContainer.step3 .annotation-icon,
#answerContainer.step2 .annotation-icon,
#answerContainer.step3 .annotation-icon {
    display: none;
}
#questionContainer.step2 .annotation-content,
#questionContainer.step3 .annotation-content,
#answerContainer.step2 .annotation-content,
#answerContainer.step3 .annotation-content {
    display: none;
}
#questionContainer, #answerContainer {
    outline: none;
    height: 100%;
}


#questionContainer .annotation-content,
#answerContainer .annotation-content {
    background-color: var(--background-color-white-middleDarkGray);
    height: 70px;
    padding: 0 75px 0 25px;
    border: 1px solid var(--border-color-four);
    border-top: none;
}
#questionContainer .annotation-text,
#answerContainer .annotation-text {
    color: var(--color-333-999);
    height: auto;
    max-height: 70px;
    min-height: 20px;
    outline: medium none;
    overflow-x: hidden;
    overflow-y: auto;
    width: 90%;
}

.safari #questionContainer .annotation-text,
.safari #answerContainer .annotation-text {
    top: 20%;
}

#questionContainer .annotation-text:empty:not(:focus):after,
#answerContainer .annotation-text:empty:not(:focus):after {
    display: block;
    content: attr(data-placeholder);
    font-style: italic;
    color: #ccc;
}

#questionContainer .annotation-text *,
#answerContainer .annotation-text * {
    font-size: 15px !important;
    color: var(--color-333-999) !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
}

#questionContainer textarea.annotation-text,
#answerContainer textarea.annotation-text {
    text-align: left;
    font-size: 100%;
    border: none;
    padding: 20px 0 5px 16px;
    box-shadow: none;
    background-color: var(--background-color-white-middleDarkGray);
}
#questionContainer textarea.annotation-text:focus,
#answerContainer textarea.annotation-text:focus {
    background: none;
}

#questionContainer .disabled + .annotation-content,
#answerContainer .disabled + .annotation-content {
    border: 1px solid var(--border-color-four);
    border-top: none;
}

/* error message for annotation */
#answerContainer .annotation-content,
#questionContainer .annotation-content {
    border: 1px solid var(--border-color-four);
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
    border-top: none;
}
#answerContainer .annotation-content:hover,
#questionContainer .annotation-content:hover,
#answerContainer .annotation-content.selected,
#questionContainer .annotation-content.selected {
    border-color: var(--border-color-four);
}
#answerContainer .annotation-content.error:hover,
#questionContainer .annotation-content.error:hover,
#answerContainer .annotation-content.error.selected,
#questionContainer .annotation-content.error.selected {
    border-color: #EBB0A9;
}

#practiceAnswer .query_symbols,
#questionContainer .query_symbols,
#answerContainer .query_symbols {
    background: var(--background-color-white-middleDarkGray) none repeat scroll 0 0;
    bottom: 0;
    position: relative;
    width: 100%;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

#practiceAnswer .query_symbols {
    position: absolute;
}

#answerContainer .query_symbols .first-step,
#questionContainer .query_symbols .first-step {
    bottom: 25px;
    height: 30px;
    position: absolute;
    right: 15px;
    width: 10%;
}
#practiceAnswer .query_symbols .first-step {
    border-top: none;
    width: 100%;
}

#answerContainer .query_symbols .first-step > div.panel,
#practiceAnswer .query_symbols .first-step > div.panel,
#questionContainer .query_symbols .first-step > div.panel {
    padding: 0;
    margin-bottom: 0;
}

#practiceAnswer .query_symbols .first-step .right .searchLetter,
#answerContainer .query_symbols .first-step .right .searchLetter,
#questionContainer .query_symbols .first-step .right .searchLetter {
    cursor: pointer;
    font-size: 26px;
    display: block;
}
#practiceAnswer .query_symbols .first-step .right .searchLetter img,
#answerContainer .query_symbols .first-step .right .searchLetter img,
#questionContainer .query_symbols .first-step .right .searchLetter img {
    width: 50px;
}

#practiceAnswer .query_symbols .first-step .right .searchLetter {
    position: relative;
    font-size: 18px;
    right: 15px;
    color: #999;
    border-radius: .5rem;
    width: 54px;
    height: 32px;
    line-height: 1.7;
    text-align: center;
}
#practiceAnswer .query_symbols .first-step .right .searchLetter:hover {
    color: var(--highlighted-text-color);
}

#answerContainer .query_symbols .first-step .right .searchLetter,
#questionContainer .query_symbols .first-step .right .searchLetter {
    padding: 0 5px;
}

#practiceAnswer .query_symbols .second-step,
#questionContainer .query_symbols .second-step,
#answerContainer .query_symbols .second-step  {
    height: auto;
    position: relative;
    bottom: 10px;
    z-index: 25;
    border: none;
}

#practiceAnswer .query_symbols .second-step{
    bottom: 0;
}
.addPage #questionContainer .query_symbols .second-step,
.addPage #answerContainer .query_symbols .second-step  {
    border: 2px solid var(--border-color-four);
}

#yourAnswer .query_symbols .first-step {
    height: 45px;
    border-left: 1px solid var(--border-color-four);
    border-right: 1px solid var(--border-color-four);
    border-bottom: 1px solid var(--border-color-four);
}

#yourAnswer .query_symbols .second-step,
#yourAnswer .query_symbols .third-step {
    border: 1px solid var(--border-color-four);
}

#practiceAnswer .query_symbols .second-step .left,
#questionContainer .query_symbols .second-step .left,
#answerContainer .query_symbols .second-step .left { max-width: 80%; }

#practiceAnswer .query_symbols .second-step .left,
#practiceAnswer .query_symbols .second-step .right,
#answerContainer .query_symbols .second-step .left,
#answerContainer .query_symbols .second-step .right,
#questionContainer .query_symbols .second-step .left,
#questionContainer .query_symbols .second-step .right { max-height: 73px; margin-bottom: 0; }

#practiceAnswer .query_symbols .second-step .left .sub-text,
#questionContainer .query_symbols .second-step .left .sub-text,
#answerContainer .query_symbols .second-step .left .sub-text {
    color: var(--color-747474-999);
    padding: 20px 10px 0 20px;
    line-height: 20px;
    font-size: 15px;
}

#practiceAnswer .query_symbols .second-step .right .searchLetter,
#questionContainer .query_symbols .second-step .right .searchLetter,
#answerContainer .query_symbols .second-step .right .searchLetter { color: var(--highlighted-text-color); cursor: pointer; padding: 17px 15px; font-size: 25px; }

#practiceAnswer .query_symbols .second-step .right .searchLetter.active,
#questionContainer .query_symbols .second-step .right .searchLetter.active,
#answerContainer .query_symbols .second-step .right .searchLetter.active { color: var(--highlighted-text-color); }

#practiceAnswer .query_symbols .second-step .languages-list,
#questionContainer .query_symbols .second-step .languages-list,
#answerContainer .query_symbols .second-step .languages-list {
    border-top: 1px solid var(--border-ddd-666);
    max-height: 190px;
    height: 190px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#practiceAnswer .query_symbols .second-step .languages-list ul li,
#answerContainer .query_symbols .second-step .languages-list ul li,
#questionContainer .query_symbols .second-step .languages-list ul li {
    margin-top: 10px;
    margin-bottom: 10px;
    list-style: none;
    cursor: pointer;
}

#practiceAnswer .query_symbols .second-step .languages-list ul li:hover,
#answerContainer .query_symbols .second-step .languages-list ul li:hover,
#questionContainer .query_symbols .second-step .languages-list ul li:hover { background: var(--background-color-gray-middleDarkGray); }

#answerContainer .query_symbols .second-step .languages-list ul li.current,
#answerContainer .query_symbols .second-step .languages-list ul li.current a { color: var(--highlighted-text-color); }
#practiceAnswer .query_symbols .second-step .languages-list ul li.current,
#practiceAnswer .query_symbols .second-step .languages-list ul li.current a { color: var(--highlighted-text-color); }
#questionContainer .query_symbols .second-step .languages-list ul li.current,
#questionContainer .query_symbols .second-step .languages-list ul li.current a { color: var(--highlighted-text-color); }

#practiceAnswer .query_symbols .second-step .languages-list ul li span,
#answerContainer .query_symbols .second-step .languages-list ul li span,
#questionContainer .query_symbols .second-step .languages-list ul li span { cursor: pointer; }

#practiceAnswer .query_symbols .second-step .languages-list ul li a,
#answerContainer .query_symbols .second-step .languages-list ul li a,
#questionContainer .query_symbols .second-step .languages-list ul li a { cursor: pointer; color: var(--color-747474-999); }

#practiceAnswer .query_symbols .second-step .languages-list ul li a i,
#answerContainer .query_symbols .second-step .languages-list ul li a i,
#questionContainer .query_symbols .second-step .languages-list ul li a i { margin-right: 20px; }

#practiceAnswer .query_symbols .second-step .languages-list ul li a i::before,
#answerContainer .query_symbols .second-step .languages-list ul li a i::before,
#questionContainer .query_symbols .second-step .languages-list ul li a i::before { visibility: hidden; }

#practiceAnswer .query_symbols .second-step .languages-list ul li.current a i::before,
#answerContainer .query_symbols .second-step .languages-list ul li.current a i::before,
#questionContainer .query_symbols .second-step .languages-list ul li.current a i::before { visibility: visible; }

#practiceAnswer .query_symbols .third-step,
#questionContainer .query_symbols .third-step,
#answerContainer .query_symbols .third-step {
    height: auto;
    position: relative;
    bottom: 10px;
    z-index: 100;
}

#practiceAnswer .query_symbols .third-step{
    bottom: 0;
}

#questionContainer .query_symbols .third-step,
#answerContainer .query_symbols .third-step {
    border: 2px solid var(--border-color-four);
}

#practiceAnswer div.query_symbols .third-step p.searchLetter,
#questionContainer div.query_symbols .third-step p.searchLetter,
#answerContainer div.query_symbols .third-step p.searchLetter {
    color: var(--highlighted-text-color);
    cursor: pointer;
    font-size: 1.5em;
    margin-top: -22px;
    text-align: left;
    width: 8%;
}

#practiceAnswer .query_symbols .third-step .top-list,
#practiceAnswer .query_symbols .third-step .bottom-list,
#questionContainer .query_symbols .third-step .top-list,
#questionContainer .query_symbols .third-step .bottom-list,
#answerContainer .query_symbols .third-step .top-list,
#answerContainer .query_symbols .third-step .bottom-list {
    height: 22px;
}

#practiceAnswer .query_symbols .third-step .top-list p,
#practiceAnswer .query_symbols .third-step .bottom-list p,
#questionContainer .query_symbols .third-step .top-list p,
#questionContainer .query_symbols .third-step .bottom-list p,
#answerContainer .query_symbols .third-step .top-list p,
#answerContainer .query_symbols .third-step .bottom-list p {
    color: var(--color-five);
    margin-bottom: 5px;
    text-align: center;
    width: 11%
}

#practiceAnswer .query_symbols .third-step .bottom-list p.center,
#questionContainer .query_symbols .third-step .bottom-list p.center,
#answerContainer .query_symbols .third-step .bottom-list p.center{
    display: block;
    margin: auto;
    text-align: center;
    width: 81%;
    cursor: default;
}

#practiceAnswer .query_symbols .third-step .top-list p.searchLetter,
#questionContainer .query_symbols .third-step .top-list p.searchLetter,
#answerContainer .query_symbols .third-step .top-list p.searchLetter,
#practiceAnswer .query_symbols .third-step .top-list p.arrow_carrot-up,
#questionContainer .query_symbols .third-step .top-list p.arrow_carrot-up,
#answerContainer .query_symbols .third-step .top-list p.arrow_carrot-up,
#practiceAnswer .query_symbols .third-step .top-list p.arrow_carrot-down,
#questionContainer .query_symbols .third-step .top-list p.arrow_carrot-down,
#answerContainer .query_symbols .third-step .top-list p.arrow_carrot-down{
    margin-bottom: 0;
}

#practiceAnswer .query_symbols .third-step p.lang-select,
#questionContainer .query_symbols .third-step p.lang-select,
#answerContainer .query_symbols .third-step p.lang-select { color: var(--color-five); text-decoration: underline; cursor: pointer; }

#practiceAnswer .query_symbols .third-step .arrow_carrot-down,
#practiceAnswer .query_symbols .third-step .arrow_carrot-up,
#questionContainer .query_symbols .third-step .arrow_carrot-down,
#questionContainer .query_symbols .third-step .arrow_carrot-up,
#answerContainer .query_symbols .third-step .arrow_carrot-down,
#answerContainer .query_symbols .third-step .arrow_carrot-up {
    cursor: pointer;
    float: right;
    font-size: 1.5em;
    margin: 0;
    width: 8%;
    color: var(--color-six);
}

#practiceAnswer .query_symbols .third-step .letters-list,
#questionContainer .query_symbols .third-step .letters-list,
#answerContainer .query_symbols .third-step .letters-list { min-height: 50px; max-height: 50px; margin-top: 5px; overflow-y: hidden; padding: 0; }

#practiceAnswer .query_symbols .third-step .letters-list ul,
#questionContainer .query_symbols .third-step .letters-list ul,
#answerContainer .query_symbols .third-step .letters-list ul {
    float: left;
    margin-bottom: 5px;
    width: 92%;
}

#practiceAnswer .query_symbols .third-step .letters-list ul li,
#questionContainer .query_symbols .third-step .letters-list ul li,
#answerContainer .query_symbols .third-step .letters-list ul li {
    color: var(--color-five);
    cursor: pointer;
    float: left;
    font-size: 16px;
    list-style: outside none none;
    padding: 0;
    position: relative;
    text-align: center;
    top: 0;
    width: 10%;
}

#practiceAnswer .query_symbols .third-step .letters-list ul li:hover,
#questionContainer .query_symbols .third-step .letters-list ul li:hover,
#answerContainer .query_symbols .third-step .letters-list ul li:hover { background: var(--background-color-gray-middleDarkGray); }

.queryPage .four.columns {
    padding-right:0;
    height: calc(100% - 20px);
}
.learnPage .progress-bar {
    background-color: var(--progress-bar-default-background);
    height: 15px;
    position: relative;
    width: 70%;
    border-radius: .5rem;
}
.learnPage .card-counter {
    margin-left: 10px;
    text-align: left;
    width: calc(30% - 10px);
}
.learnPage .card-counter .progress-cards {
    color: var(--highlighted-text-color);
    text-shadow: 0 0 0.15rem rgba(255,255,255,1);
    font-weight: 600;
}
.learnPage .card-counter .progress-activated-cards {
    color: var(--color-activated-cards-progress-bar);
    text-shadow: 0 0 0.15rem rgba(255,255,255,1);
    font-weight: 600;
}
.learnPage .card-counter .total-cards {
    color: var(--color-bbb-999-white);
}
.learnPage .practice-close .icon_close {
    font-size: 28px;
    color: var(--color-999-999-white);
    margin-right: 25px;
    cursor: pointer;
}
.learnPage .practice-close .icon_close:hover {
    opacity: .7;
}
.learnPage .publisher-logo {
    margin-right: 30px;
    float: right;
}
.learnPage .publisher-logo #subjectImage {
    max-height: 35px;
    margin-top: -5px;
}
.learnPage .subject-name.pull-right {
    overflow: hidden;
    width: auto;
    max-width: 90%;
    float: right;
    text-transform: none !important;
}
.learnPage .subject-name #subjectName {
    color: var(--color-999-999-white);
}

.learnPage.queryPage .arrow-left {
    background-color: transparent;
    position: absolute;
    top: 49%;
    left: 15px;
    z-index: 11;
}
.learnPage .arrow-left .arrow_carrot-left {
    color: var(--color-999-999-white);
    font-size: 45px;
    cursor: pointer;
}
.learnPage .arrow-right {
    position: absolute;
    top: 49%;
    right: 15px;
    z-index: 11;
}
.learnPage .arrow-right .arrow_carrot-right {
    color: var(--color-999-999-white);
    font-size: 45px;
    cursor: pointer;
}
.learnPage .arrow-right .arrow_carrot-right.disabled:hover {
    cursor: auto;
    color: #c2c2c2;
}

.learnPage .arrow-right .arrow_carrot-left:hover,
.learnPage .arrow-right .arrow_carrot-right:hover {
    opacity: .5;
}

.learnPage .card-item {
    background-color: transparent;
    width: 100%;
    padding-top: 39px;
    padding-bottom: 60px;
    height: 100%;
}

.learnPage .card-item .footer-row {
    padding-bottom: 20px;
    height: 100px;
}

.learnPage .card-item .lines-left {
    position: absolute;
    left: 0;
    margin-left: calc(10% - 25px);
    height: calc(100% - 100px);
    width: auto;
    z-index: 0;
}
.learnPage .card-item .lines-left .line-white {
    height: 90%;
    width: 20px;
    background: var(--background-practice-line1);
    top: 5%;
    position: relative;
    float: left;
}
.learnPage .card-item .lines-left .line-gray {
    height: 80%;
    width: 20px;
    background: var(--background-practice-line2);
    top: 10%;
    position: relative;
    left: -45px;
    float: left;
}
.learnPage .card-item .lines-right {
    position: absolute;
    right: 0;
    margin-right: calc(10% - 25px);
    height: calc(100% - 100px);
    width: auto;
    z-index: 0;
}
.learnPage .card-item .lines-right .line-white {
    height: 90%;
    width: 20px;
    background: var(--background-practice-line1);
    top: 5%;
    position: relative;
    float: right;
}
.learnPage .card-item .lines-right .line-gray {
    height: 80%;
    width: 20px;
    background: var(--background-practice-line2);
    top: 10%;
    position: relative;
    left: 45px;
    float: right;
}
.learnPage .card-item .lines-left div, .learnPage .card-item .lines-right div {
    border-radius: .5rem;
}

.learnPage .card-item .answer-status {
    padding-top: 10px;
    padding-bottom: 8px;
    text-align: center;
}
.learnPage .card-item .answer-status .icon_error-circle_alt, .learnPage .card-item .answer-status .icon_question_alt2 {
    color: var(--highlighted-text-color);
}
.learnPage .card-item .answer-status .icon_check_alt2 {
    color: #69B42D;
}

.learnPage .question-example {
    padding-top: 5px;
    margin-top: 10px;
}
.learnPage .annotation-content {
    background-color: var(--background-color-white-middleDarkGray);
    padding: 10px 0 10px 0;
    position: relative;
    margin-top: 30px;
    border-top: 1px solid var(--border-color-five);
}

.learnPage .annotation-content.error {
    border: 1px solid #FF6666;
}

.learnPage .annotation-content.error textarea:focus {
    background: var(--background-color-white-middleDarkGray);
}
.learnPage .edit-card-icon { position: absolute; z-index: 30; cursor: pointer; }
.learnPage .edit-card-icon,
.learnPage .content-feedback,
.learnPage .annotation-icon {
    font-size: 24px;
    color: #B2B2B2;
}
.learnPage .content-feedback {}
.learnPage .annotation-icon {
    position: absolute;
    top: 35px;
    left: 5px;
    z-index: 30;
}
.learnPage .icon-annotation {
    position: relative;
    bottom: 5px;
}
.learnPage .content-feedback:hover,
.learnPage .icon-annotation:hover {
    cursor: pointer;
}
.learnPage .content-feedback .tooltip.tip-bottom {
    position: absolute;
    top: 35px;
    right: -79px;
    width: 180px;
}
.learnPage .content-feedback .content-feedback-icon { position: relative; top: 3px; }

.learnPage .content-edit-card {
    width: 24px;
    margin-top: 25px;
}
.learnPage .content-edit-card .tooltip.tip-top {
    width: 60px;
    text-align: center;
    top: -30px;
    left: -20px;
}
.de .learnPage .content-edit-card .tooltip.tip-top {
    width: 130px;
    left: -55px;
}
.learnPage .content-edit-card .tooltip.tip-top.user-premium {
    width: 200px;
    top: -50px;
    left: -90px;
}

.learnPage .annotation-text {
    outline: none;
    border: none;
    box-shadow: none;
    color: var(--color-nine);
    font-size: 17px;
    line-height: 20px;
    min-height: 140px;
    background-color: var(--background-color-white-middleDarkGray);
    margin-bottom: 0;
    padding:  10px 10px 10px 45px;
    white-space: pre-wrap;
    word-break: normal;
    overflow: hidden;
}

#annotationEditable.ng-leave {
    -webkit-transition: none !important;
    transition: none !important;
}

.queryPage .four.columns:first-child{ }
.queryPage .four.columns.form.custom { }
.queryPage .four.columns h3 i {
    font-size: 20px;
    line-height: 9px;
    padding-right: 5px;
}
.queryPage .bottom.row .arrow_carrot-right {
    font-size: 30px;
    position: absolute;
    right: 0;
    top: -2px;
    font-weight: 200;
}
.queryPage .bottom.row .button.right.default-button {
    padding-right: 25px;
}
.queryPage .bottom.row .button.left i{
    margin-left: 10px;
}
.queryPage .text.enter {  }
.queryPage .bottom.row div.right {
    background: transparent;
    margin: 0;
}

.input_aids .panel > .row {
    margin: 3px 0;
}
.input_aids .arrow_carrot-up, .input_aids .arrow_carrot-down {
    cursor: pointer;
    margin-left: 40%;
    font-size: 20px;
}
.input_aids .last {
    float: left;
}
.queryPage .text > i {
    display:block;
    margin:30% auto 0;
    font-size: 10em;
    text-align: center;
    font-style: normal;
    color:#E4E4E4;
}
.queryPage .bottom.row .button i.right {
    margin-right: 6px;
}
.queryPage div.top + div {
    background-color: #ffffff;
}

.learnPage.queryPage {
    background-color: var(--background-color-gray-darkestGray-none);
}
.learnPage.queryPage > .card-item {
    position: relative;
    z-index: 10;
}
.learnPage.queryPage > .card-item + .card-item {
    z-index: 1;
    position: fixed;
}
.learnPage.queryPage > .card-item + .card-item + .card-item {
    display: none;
}
.query_symbols .custom.dropdown  {padding: 3px 5px; height: 32px}
.query_symbols .dropdown .dropdown-wrapper {left: -275px;width: 310px;padding: 0;top: -82px;}
.query_symbols .custom.dropdown {padding: 3px 5px;height: 32px;}
.query_symbols .f-dropdown:before {border-color: #ffffff transparent transparent;left: 270px;top: 70px;}
.query_symbols .panel {
    padding: 17px 20px;
    background-color: transparent;
}
.query_symbols .panel .searchLetter {
    width: 60px;
    border-radius: .7rem;
    height: 35px;
    background: url(/img/icons/icon-special-character-gray.svg) no-repeat center;
}
.query_symbols .panel .searchLetter:hover {
    background: var(--icon-special-character-hover) no-repeat center;
}
.query_symbols.form.custom .right.panel {
    margin-bottom:0;
}
.query_symbols .bottom-list .status-icon {
    display: inline-block;
    cursor: pointer;
    margin-right: 10px;
}
.query_symbols .bottom-list .status-icon.status-active {
    color: var(--highlighted-text-color);
}
.query_symbols .bottom-list .status-icon > i {
    font-size: 13px;
}
.question_content {
    padding:26px 20px 20px;
    overflow-y:auto;
    word-break: break-all;
}
.question_content .question-wrapper {
    margin-bottom: 0;
    padding-top: 20px;
    margin-left: 15px;
    margin-right: 15px;
    word-break: break-all;
}
.question_content .cardQuestionExample {
    margin-bottom: 5px;
}

.queryPage .four.columns .question_content .cardQuestionExample,
.queryPage .four.columns .question_content .cardQuestionExample * {
    word-break: normal;
}

.question_content {
    padding: 0;
    color: #B2B2B2;
    margin-left: 35px;
    margin-right: 35px;
    height: 100%;
}
.inputWrap textarea {outline: none; padding: 22px 20px 20px 20px; border-color: #858585;}
.query_answer {border: 1px solid #919191}

.examples h6,
.examples p {
    color: #666;
}
.text {
    overflow: auto;
}
.body .middle.row .four.columns .answer-wrong h3 {
    color: #EBB0A9;
    border-bottom: 3px solid #EBB0A9;
    padding: 32px 20px;
}
.body .middle.row .answer-wrong h3 .wrong {
    display: inline-block !important;
}
.body .middle.row .answer-correct h3 .correct {
    display: inline-block !important;
}
.body .middle.row .four.columns .answer-correct h3 {
    color: #007a50;
    border-bottom: 3px solid #007a50;
    padding: 32px 20px;
}

.answer-wrong[class*=icon-]:before {
    float: right;
    font-size: 1.5em;
    color: #ff0000;
}
.answer-wrong-part {
    background: #fee5cc;
}
.answer-correct[class*=icon-]:before {
    float: right;
    font-size: 1.5em;
    color: #007a50;
}
.answer-learn .query_symbols.form.custom {
    border: 1px solid var(--highlighted-border-color);
    border-top: 1px #cccccc;
}
.answer-learn textarea{
    border: 1px solid var(--highlighted-border-color);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    font-weight: 200;
}

.answer-wrong-part h3, .answer-learn h3 {color: var(--highlighted-text-color) !important;}
.answer-wrong-part[class*=icon-]:before,.answer-learn[class*=icon-]:before {float: right;font-size: 2em;margin: -5px 0 0;color: var(--highlighted-text-color);}
.answer-test {background: var(--background-color-gray-middleDarkGray);}
.answer-test[class*=icon-]:before {float: right;font-size: 1.5em;margin: -5px 0 0;color: var(--highlighted-text-color);}
.answer-test h3 {color: var(--highlighted-text-color) !important;}

.custom.dropdown.hidden {width: 22px !important;border: none !important;box-shadow: none !important;margin-left: 10px !important;background: none !important;}
.custom.dropdown.hidden a.current {margin: auto !important;color: #999 !important;}
.custom.dropdown.hidden a.current:hover {color: #444 !important;}
.custom.dropdown.hidden a.selector {display: none !important;}

div.compare-answer {
    background: var(--background-color-white-middleDarkGray);
    padding: 20px 20px 20px 20px;
    line-height: 1.2em;
    vertical-align: top;
    overflow: auto;
    height: 50%;
}
div.compare-answer del,
.compare-answer ins,
.compare-answer span {
    overflow: hidden;
}
div.compare-answer del {
    background: #ffcccc;
    text-decoration: none;
}
div.compare-answer ins {
    background: #7ee78d;
    text-decoration: none;
    width: 0;
}
span.compare-answer {
    display: block;
}
.queryPage .correct_answer {
    padding: 20px 25px 20px 25px;
    position: relative;
    max-height: calc(100% - 100px)
}
.queryPage .correct_answer > div > p {
    margin-bottom: 0;
}
.card-audio {
    display: block;
    margin-top: 25px;
    text-align: center;
}
.card-audio .icon-speaker {
    color: #999;
}
.card-audio .icon-speaker.playing {
    color: var(--highlighted-text-color);
}
.image_publisher {
    height: 40px;
    position: absolute;
    right: 5%;
    top: 5px;
    z-index: 7;
}
.queryPage .image_publisher {
    top: 20px;
}
.image_publisher img {
    display: block;
    margin: 0 auto;
    height: 100%;
}

.query_symbols.form.custom {margin-bottom: 0}
.nowrap {display: inline-block !important;overflow: hidden;vertical-align:top;}
.no-wrap {
    white-space: nowrap;
}
#userInput ins {
    display:none;
}
#userInput {
    width: 100%;
}
.imageContainer {
    display: inline-block;
    height: 65px;
    padding: 5px;
    text-align: center;
}
.thumb-wrapper {width: 50px;height: 50px;overflow: hidden;background-position: center center;background-size: cover;box-shadow: none;}
.subjectImage {display: inline-block;height: 79px;}
img.thumb {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
}

/*@media screen and (min-width:0\0) {   hack for ie9 and ie10 */
.explanation {width: 70%;float: right;margin: 0 20% 0 0;}
/*}*/
/* -----------------------------------------
   Dropdown List
----------------------------------------- */

.f-dropdown {background: var(--background-color-white-darkestGray); height: auto;list-style: none outside none;margin: 0;max-height: none;position: relative;z-index: 99;padding: 10px;box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);font-size: 14px;}
.f-dropdown p {font-size: inherit;}
.f-dropdown :first-child {margin-top: 0px;}
.f-dropdown :last-child {margin-bottom: 0px;}
.f-dropdown:after {border-color: transparent transparent var(--border-white-222); border-image: none;border-style: solid;border-width: 6px 6px 0;content: "";display: block;height: 0px;left: 9px;position: absolute;top: -20px;width: 0px;z-index: 98;}
.f-dropdown:before {border-color: transparent transparent var(--border-white-222); border-image: none;border-style: solid;border-width: 10px;content: "";display: block;height: 0px;left: 11px;position: absolute;top: -20px;width: 0px;z-index: 98;}
.f-dropdown li {cursor: pointer;font-size: 0.875em;line-height: 1em; margin: 0; padding: 0.5em; white-space: nowrap;}
.f-dropdown li:hover,.f-dropdown li:focus,.f-dropdown li.set {color: var(--highlighted-text-color);}
.f-dropdown li img {display: block;margin: 0 10px 0 0;}
.f-dropdown li a {color: #555555;}
.f-dropdown.content {background: none repeat scroll 0% 0% white;border: 1px solid #CCCCCC;font-size: 16px;height: auto;left: -9999px;list-style: none outside none;max-height: none;max-width: 200px;padding: 1.25em;position: absolute;top: -9999px;width: 100%;z-index: 99;}
.f-dropdown.content :first-child {margin-top: 0px;}
.f-dropdown.content :last-child {margin-bottom: 0px;}
.f-dropdown.tiny {max-width: 200px;}
.f-dropdown.small {max-width: 300px;}
.f-dropdown.medium {max-width: 500px;}
.f-dropdown.large {max-width: 800px;}
.f-dropdown.show-left:after {left: auto;right: 8px;}
.f-dropdown.show-left:before {left: auto;right: 0px;}

.dropdown-wrapper {padding: 22px;position:absolute;}
.dropdown {cursor: pointer;position: relative;display: inline-block;}
.dropdown:hover .dropdown-wrapper {opacity: 1; display: block;-webkit-animation: showdropdown 0.5s ease 1;-moz-animation: showdropdown 0.5s ease 1;animation: showdropdown 0.5s ease 1;}
.dropdown .dropdown-wrapper {opacity: 0;display: none; transition: all 0.5s ease;}

/* dropdown top right */
.dropdown.right.top .dropdown-wrapper {top: 10px;right: -38px;}
.dropdown.right.top .f-dropdown:after {border-color: transparent transparent #fff;right: 20px;bottom: auto;top: -20px;left: auto;}
.dropdown.right.top .f-dropdown:before {border-color: transparent transparent #eee;right: 22px;top: -20px;bottom: auto;left: auto;}

/* dropdown top left */
.dropdown.left.top .dropdown-wrapper {top: 10px;left: -38px;}
.dropdown.left.top .f-dropdown:after {border-color: transparent transparent #fff;left: 20px;bottom: auto;top: -20px;right: auto;}
.dropdown.left.top .f-dropdown:before {border-color: transparent transparent #eee;left: 22px;top: -20px;bottom: auto;right: auto;}

/* dropdown bottom right */
.dropdown.right.bottom .dropdown-wrapper {bottom: 10px;right: -38px;}
.dropdown.right.bottom .f-dropdown:after {border-color: transparent;right: 20px;bottom: -20px;top: 22px;left: 53px;}
.dropdown.right.bottom .f-dropdown:before {border-color: #fff transparent transparent;right: 22px;bottom: -20px;top: auto;left: auto;}

/* dropdown bottom left */
.dropdown.left.bottom .dropdown-wrapper {bottom: 10px;left: -38px;}
.dropdown.left.bottom .f-dropdown:after {border-color: #fff transparent transparent;right: auto;bottom: -20px;top: auto;left: 20px;}
.dropdown.left.bottom .f-dropdown:before {border-color: #eee transparent transparent;right: auto;bottom: -20px;top: auto;left: 22px;}

/* dropdown middle left */
.dropdown.left.middle .dropdown-wrapper {top: -145%;bottom: auto;left: 5px;}
.dropdown.left.middle .f-dropdown:after {border-color: transparent #fff transparent transparent;right: auto;bottom: auto;top: 0;left: -20px;}
.dropdown.left.middle .f-dropdown:before {border-color: transparent #ccc transparent transparent;right: auto;bottom: auto;top: 3px;left: -20px;}

/* dropdown black */
.dropdown.left.bottom.black .dropdown-wrapper {background: #666666; color:#ffffff; bottom: 30px;width: 130px; text-align: center; padding: 5px !important;}
.dropdown.left.bottom.black .f-dropdown:before, .dropdown.left.bottom.black .f-dropdown:after {border-color: #666666 transparent transparent;border-width: 9px; bottom: -18px;left:35%;}

.p6-dropdown {position: relative;}
li.p6-dropdown {list-style: none;}
.p6-dropdown.open:before{border-color: var(--border-ccc-222) transparent transparent; top:-10px;}
.p6-dropdown.open:after {border-color: var(--border-white-222) transparent transparent; top:-11px;}
.p6-dropdown.open:before, .p6-dropdown.open:after {border-image: none; border-style: solid; content: ""; display: block; height: 0; position: absolute;width: 0;z-index: 100;left: 50%;border-width: 10px 10px 0;}
.p6-dropdown > ul  {display: none; position: absolute; text-transform: none; margin: 20px 20px 10px; bottom: 100%;}
.editPhase.p6-dropdown > ul {
    margin: 20px 20px 10px 10px;
}
.open.p6-dropdown > ul {display: block;}
.p6-dropdown li.active {color: var(--highlighted-text-color);}
.p6-dropdown li i {font-size: 25px; float: left; margin-right:10px; margin-bottom: 10px;}
.p6-dropdown li span {font-size:10px;}
.p6-dropdown .f-dropdown li {padding-right: 50px;}
.p6-dropdown .f-dropdown li .deactivateIcon, .p6-dropdown .f-dropdown li .reactivateIcon {
    float: left;
    width: 30px;
}
.p6-dropdown .f-dropdown:before, .p6-dropdown .f-dropdown:after {border-color:transparent}
.table_lib .p6-dropdown > ul {left: -50%; border-radius: .5rem;}
.table_lib .addBtn .p6-dropdown > ul {left:-11%}
.p6-dropdown-container {margin-bottom: 0; color: var(--color-ten);}
.p6-dropdown.activate > ul {left: -50%}
.p6-dropdown.activate > ul li {text-transform: uppercase; font-size: 14px; margin: 4px 0;}
.p6-dropdown.activate > ul li.disabled:hover {cursor: default; color: var(--color-eleven);}
.p6-dropdown.activate > ul li span {text-transform: none; font-size: 12px}
.p6-dropdown.activate > ul li.disabled:hover span {text-transform: none; font-size: 12px; color: var(--color-eleven);}
.p6-dropdown.activate.open:before, .p6-dropdown.activate.open:after {left:7%;}

.p6-dropdown.activate > ul.start_learn {left: inherit; right: -35%; bottom: 110%;}
.p6-dropdown.activate > ul.start_learn.f-dropdown:before {left: inherit; right: -17%;}
.activation-wizard .p6-dropdown.activate.open:before {left: 23%; top: -13px;}
.activation-wizard .p6-dropdown.activate.open:after {left: 23%; top: -14px;}
.p6-dropdown.activate .button.start_learn {border: none; width: 40px; border-left: 1px solid #7fbca7;}
.p6-dropdown.activate .button.start_learn.disabled {border-left: 1px solid #fff;}
.p6-dropdown.activate .button.start_learn span {line-height: 17px;}
.p6-dropdown.activate .button.start_learn:hover {background-color: #7fbca7; color: #fff;}
.p6-dropdown.activate > ul.start_learn li {text-align: left; padding-left: 20px; padding-right: 20px;}
.p6-dropdown.activate .start_learn > div:first-child i {font-size: 23px; line-height: 14px;}
.p6-dropdown.activate .start_learn.hover-color {background-color: #7fbca7;}

/* TODO: Disable Learn/Relearn functions */
.p6-dropdown-container .tooltip-wrapper .f-dropdown li:hover,
.p6-dropdown-container .tooltip-wrapper .f-dropdown li:focus,
.p6-dropdown-container .tooltip-wrapper .f-dropdown li.set,
.p6-dropdown-container .tooltip-wrapper .f-dropdown:first-child:hover span { color: var(--highlighted-text-color); }
.p6-dropdown-container .tooltip-wrapper li { position: relative; left: 10px; }
.p6-dropdown-container .tooltip-wrapper li .tooltip.tip-top { width: auto; top: -45px; color: #ffffff; }

/*.p6-dropdown.activate a i{line-height: 10px}*/
.secondary.deactivate {margin-top: -1px; padding-right: 30px}
.secondary.deactivate i{font-size: 24px;position: absolute;right: 0;top: -1px;}

.p6-dropdown.editPhase .button.secondary,
.p6-dropdown.editPhase.open .button.secondary { background-size: contain; text-align: left}
ul.breadcrumbs li:hover a, ul.breadcrumbs li a:focus { text-decoration: none; }

/* -----------------------------------------
   Search Panel
----------------------------------------- */
div.search {
    position: absolute;
    right: 0;
    top: -11px;
    background-color: white;
    font-family: "proxima-nova",sans-serif;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.75);
    display: inline-block;
    font-size: 14px;
    margin: 0;
    padding: 2px 7px 1px 7px;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    width: auto;
    color: #999;
}
div.search.hidden {
    background-color: white;
    font-family: inherit;
    border: none;
    box-shadow: none;
    color: rgba(0, 0, 0, 0.75);
    padding: 0;
    color: #999;
    top: -5px;
    display: none;
}
div.search:focus, div.search:hover {background: #fafafa; color: #444;}
div.search input {
    display: inline;
    border: none;
    background: none;
    height: auto;
    width: 100px;
    min-width: 100px;
    font-family: "proxima-nova",sans-serif;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    box-shadow: none;
    margin: 0;
    padding: 4px 2px 2px 2px;
    color: #999;
}

div.search.hidden .icon-remove,
div.search.hidden input {
    display: none;
    width: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
div.search.hidden .icon-search {
    cursor: pointer;
    font-size: 16px;
}

/* -----------------------------------------
   Wizard Steps
----------------------------------------- */
/* Subject List */
.subject-header {
    margin: 0 0 10px;
    padding: 20px 0 0;
    position: relative;
}

.subject-image,
.subject-info {
    display: inline-block;
    vertical-align: middle;
    margin: 0 15px 0 0;
    width: auto;
    max-width: 200px;
}
.subject-image img {
    max-height: 75px;
    max-width: 68px;
    border-radius: .5rem;
}
.subject-image .coverLangCode {
    color: #999;
    left: 18px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 57px;
    width: 50px;
}
.subject-image .coverLangCode.reportsHome {
    top: 44px;
}
.subject-title {
    color: var(--color-5f5f5f-999);
    display: block;
    font-size: 24px;
    font-weight: 200;
    margin-bottom: 10px;
    max-height: 90px;
    width: 100%;
}
.summary-info p {
    color: var(--color-5f5f5f-999);
}
.summary-info p b {
    display: block;
    float: left;
    width: 140px;
}
.summary-info.prepare p b{
    width: 270px;
}
.prepare-mode {
    margin: 30px 0 10px 0;
    display: block;
    color: var(--color-5f5f5f-999);
    font-size: 26px;
}
.subject-items {font-weight: bold;}
.unit-list .subject-title {margin: 6px 0 0 0;padding-top: 3px;}

.practice_btn {border-top:1px solid #cccccc}
.practice_btn i{margin-left: 10px; margin-top: -5px}
.practice_btn .icon_close:before {font-size: 20px; }
.practice_list .list-shell .column.one {padding:  30px 0 44px; width: 5.333%}
.panel.wizard .row.panel .column.one {width: 5.333%}
.practice_list .list-shell.unit-list .column.one {padding:  12px 0 0 30px;}
.practice_list .list-shell .column.one i{opacity: 0; display:block; width:18px; height:18px; margin:0 auto;}
.practice_list .list-shell .column.one.set i, .practice_list .list-shell li.set .column.one i{opacity: 1}
.panel.wizard {padding: 30px 0 0 30px; background: var(--background-color-gray-darkestGray-none); width: 60%; height: 70px; }
/*** wizard activation ***/
.middle.row .wizardPage {
    width: calc(100% - 100px);
    float: right;
    background: var(--background-color-gray-darkestGray-none);
    height: 100%;
}
.wizardPage .date-bar {
    position: relative;
    top: 30px;
    right: 20px;
}
.wizStep {font-weight: normal;margin: 0 0 0 10px!important;}

.wizard-steps {margin: 0 0 10px 0; background: var(--background-color-gray-darkestGray-none); width: 30%; height: 33px;}
.wizard-steps .columns {height: 33px; margin: 0;}
.wizard-steps .columns .inner {
    background: var(--background-color-white-middleDarkGray) none repeat scroll 0 0;
    cursor: pointer;
    float: left;
    height: 33px;
    margin-right: 5px;
    padding: 0 20px;
    width: auto;
    min-width: 130px;
    border-radius: .5rem;
}
.wizard-steps .columns .inner:not(.active) {
    background: var(--background-color-wizard-steps);
}
.wizard-steps .columns.set h4 {
    font-size: 22px;
    font-weight: 200;
    line-height: 33px;
    padding-bottom: 8px;
    white-space: nowrap;
    text-align: center;
    color: var(--color-ccc-999-white);
}
.wizard-steps .columns .navigable:hover {color:var(--highlighted-text-color);}
.wizard-steps .columns.set .active h4 {color:var(--highlighted-text-color);}
.wizard-steps .columns:first-child {padding: 0;}
.wizard-steps .columns h4, .wizard-steps .columns h5 {color: var(--color-nine);margin: 0 0 3px 0;}
.wizard-steps .columns:last-child .inner:before {position: absolute;left:0;top:8px;color: var(--highlighted-text-color);font-size: 1.6em;}
.wizard-steps .columns:last-child h4 {margin: 0;}
.wizard-steps .columns:last-child h5 {font-size: 0.9em;font-weight: normal;margin: 0;}
.wizard-steps .columns:last-child h5 {margin: 0 0 0 -35px;}
.wizard-steps-header-instruction { padding: 10px 0 25px 40px; color: var(--color-747474-999-white); line-height: 24px;font-size: 1.5em; height: 55px;}

.warnRedCardsAmount {background-color: #FB7B00;}
.navBtn {
    background: var(--background-color-gray-darkestGray-none);
    padding: 0 0 10px 30px;
    position: absolute;
    bottom: 0;
    width: calc(100% - 100px);
}
.row.text-right button i{margin: 0 10px;}
.cards_selected {color: rgba(255,255,255,0.5); padding: 5px 10px 5px 0; margin: 0px 15px; min-width: 120px}
.cards_selected span {color: rgba(255,255,255,1)}
.body .top.row .cards_selected i {margin: -8px 0 0; padding: 0 10px;}
.row.panel.unit_list {padding:10px 0; margin-left:-10px;text-transform: uppercase}
.panel.wizard .row.panel.unit_list .column.one{width: 4.80%;}
.button.secondary.buttonBack {padding-left: 2px;}
.body.practice .middle .panel > .row:last-child {margin-left: 2px;}
.batch_activate {margin-right: 10px; margin-top: 2px; cursor: pointer;}
.batch_activate .icon_check.checkbox {margin: 3px 10px 7px 0;}

.subject-image-summary {
    float: left;
    margin-right: 50px;
}
.subject-image-summary img {
    max-height: 185px;
    width: 138px;
    border-radius: .5rem;
}
.summary-right-block {
    float: right;
    width: calc(100% - 188px);
}

.unitBottomBtns #btnNext, .cardBottomBtns #btnNext {
    background: var(--background-darkorange-darkorange-specific) none repeat scroll 0 0;
    border: 1px solid var(--highlighted-border-color);
    color: var(--button-color-two);
    font-size: 16px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
}
.unitBottomBtns #btnNext:hover, .cardBottomBtns #btnNext:hover, .summaryBottomBtns #btnStartLearning:hover {
    border-color: var(--highlighted-border-color);
    background-color: var(--background-darkorange-darkorange-specific);
}
.unitBottomBtns #btnNext.disabled {
}
.unitBottomBtns #btnCancel, .cardBottomBtns #btnCancel, .summaryBottomBtns #btnCancel{
    font-size: 16px;
    height: 35px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.unitBottomBtns #btnCancel:hover, .cardBottomBtns #btnCancel:hover, .cardBottomBtns #btnBack:hover, .summaryBottomBtns #btnCancel:hover, .summaryBottomBtns #btnBack:hover {

}
.unitBottomBtns #btnBack, .cardBottomBtns #btnBack, .summaryBottomBtns #btnBack{
    font-size: 16px;
    height: 35px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.summaryBottomBtns #btnStartLearning {
    background: var(--highlighted-background-color) none repeat scroll 0 0;
    bottom: 5px;
    color: var(--color-white-222);
    font-size: 16px;
    height: 35px;
    margin-right: 15px;
}
.navBtn #learnDirectionDdl {
    position: absolute;
    bottom: 46px;
    right: 200px;
}
.navBtn #learnDirectionDdl a {
    font-size: 17px;
    color: #999;
}
.navBtn #learnDirectionDdl a:hover {
    color: var(--highlighted-text-color);
}
.navBtn #learnDirectionDdl a .right.bottom {
    font-size: 24px;
    bottom: 4px;
}
.navBtn #learnDirectionDdl .p6-dropdown .f-dropdown li {
    font-size: 16px;
}
/* -----------------------------------------
   Modal
----------------------------------------- */

.reveal-modal {
    top: 20%;
    border-radius: .5rem;
}
.reveal-modal iframe, .reveal-modal frame {
    border-radius: .5rem;
}
.reveal-modal.fade {
    top: -125%;
    opacity: 0;
    -webkit-transition: opacity 0.6s linear, top 0.5s ease-out;
    -moz-transition: opacity 0.6s linear, top 0.5s ease-out;
    -o-transition: opacity 0.6s linear, top 0.5s ease-out;
    transition: opacity 0.6s linear, top 0.5s ease-out;
}
.reveal-modal.fade.in {
    top: 30%;
    opacity: 1;
}
.reveal-modal-header {
    padding: 10px 10px;
    background: var(--highlighted-background-color);
    line-height: 20px;
    color: #fff;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}
.reveal-modal-header i[class*=icon-] {
    cursor: pointer;
}
.reveal-modal-header h3 {
    margin: 3px 0 0 8px;
    font-weight: 500;
    color: var(--color-white-222);
}
.reveal-modal-form {
    margin-bottom: 0;
}
.reveal-modal-footer {
    padding: 10px;
    margin-bottom: 0;
    text-align: center;
    border-top: 1px solid var(--border-ddd-666);
    background: var(--background-color-white-middleDarkGray);
}
.reveal-modal-footer a {
    line-height: 30px;
    padding: 0 22px 0 22px;
}
.reveal-modal-footer:before,
.reveal-modal-footer:after {
    display: table;
    line-height: 0;
    content: "";
}
.reveal-modal-footer:after {
    clear: both;
}
.reveal-modal-footer .btn + .btn {
    margin-bottom: 0;
    margin-left: 5px;
}
.reveal-modal-footer .btn-group .btn + .btn {
    margin-left: -1px;
}
.reveal-modal-footer .btn-block + .btn-block {
    margin-left: 0;
}
.reveal-modal.media-panel {
    padding: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: none;
}
.reveal-modal.media-panel video,
.reveal-modal.media-panel img {
    margin: -2px 0 -4px 0;
}
.reveal-modal.media-panel .reveal-modal-header,
.reveal-modal.media-panel .reveal-modal-body {
    padding: 0;
    margin: 0;
    border: none;
    overflow: hidden;
}
.reveal-modal.media-panel button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 99;
}
.reveal-modal.finished-practice, .finished-seqex {
    padding-top: 20px;
    top:15% !important;
}
.reveal-modal.finished-practice .reveal-modal-footer {
    border-top: 1px solid var(--border-ccc-222);
    margin-top: 20px;
}
.reveal-modal.finished-practice h5 {
    color: var(--color-5f5f5f-999);
}
.reveal-modal.finished-practice .text-center span {
    color: var(--color-5f5f5f-999);
}

.close {
    font-size: 28px;
    font-weight: 200;
    line-height: 16px;
    color: var(--color-white-222);
    text-shadow: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    position: absolute;
    right: 10px;
}
.checkbox-practice {
    float: right;
    font-size: 28px;
    font-weight: 200;
    line-height: 16px;
    color: var(--color-white-222);
    text-shadow: none;
    padding: 0;
    background: transparent;
    border: 0;
}
.big-icon-end-practice {
    font-size: 180px;
    color: #FC7C00;
    cursor: default;
    vertical-align: middle;
    margin-top: 55px;
    display: block;
}
.close:hover,
.close:focus {
    text-decoration: none;
    cursor: pointer;
    opacity: 0.5;
}

/* -----------------------------------------
   Preferences Modal
----------------------------------------- */
.preferences-header {
    padding: 10px;
    background: var(--background-color-three);
    color: #666;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.preferences-header span:hover {
    cursor: pointer;
    color: var(--highlighted-text-color);
}
.preferences-header {
    color: var(--color-thirteen);
}
.preferences-header .close {
    width: 20%;
    text-align: right;
    color: var(--color-thirteen);
}

/** children list*******************************************************************************/

.preferences-childrenList .preferences-header span, .preferences-learn .preferences-header span {
    width: 20%;
    display: flex;
    align-items: center;
    font-size: 16px;
}
.preferences-header .arrow_carrot-left {
    font-size: 20px;
    position: relative;
    bottom: 1px;
}
.preferences-header p {
    text-align: center;
    margin-bottom: 0;
    font-size: 18px;
    width: 100%;
}
.preferences-header p.width60 {
    width: 60%;
}
.preferences-childrenList .preferences-header p {
    width: 60%;
}
.preferences-childrenUL {
    width: 100%;
    padding: 0;
    margin: 10px 0 0;
}
.preferences-childrenUL li {
    display: flex;
    width: 100%;
    margin-bottom: 5px;
    background: var(--background-color-white-middleDarkGray);
    border-radius: .7rem;
    height: 50px;
    padding: 7px 10px 7px 10px;
    font-size: 16px;
    align-items: center;
    color: #999;
    cursor: pointer;
}
.preferences-childrenUL li div {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.preferences-childrenUL li div p {
    width: 100%;
    line-height: 1;
    margin-bottom: 0;
}
.preferences-childrenUL li div p:first-of-type {
    color: var(--color-thirteen);
}
.preferences-childrenUL li div p:last-of-type {
    font-size: 14px;
}
.preferences-childrenUL li img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}
.preferences-childrenUL li i {
    font-size: 26px;
}
.preferences-childrenUL li:hover div p:first-of-type, .preferences-childrenUL li:hover i {
    color: var(--highlighted-text-color);
}
.preferences-childrenList .addChildButton {
    width: calc(100% - 20px);
    position: absolute;
    bottom: 10px;
    height: 40px;
    font-size: 16px;
    background: var(--highlighted-background-color);
}
/** end of children list*************************************************************************/
.modal .reveal-modal {
    z-index: 10000;
    display: block;
    visibility: visible;
    background: var(--background-color-white-middleDarkGray);
}

.reveal-modal.access {
    z-index: 18000;
}
.reveal-modal.preferences,
.reveal-modal.support,
.reveal-modal.access,
.reveal-modal.content-feedback,
.reveal-modal.save-card {
    padding-top: 20px;
    width: auto;
    min-width: 530px;
}
.reveal-modal.preferences {
    padding-top: 0;
    top: 10%;
    height: 70%;
    background: var(--background-color-three);
    /*background: #eee;*/
    min-height: 640px;
    width: 530px;
    border-radius: 5px;
    overflow: hidden;
}
.reveal-modal.save-card .reveal-modal-header {
    background: var(--highlighted-background-color);
}
.reveal-modal-body {
    position: relative;
    padding: 0;
}
.reveal-modal.preferences .reveal-modal-body {
    border-top: 1px solid var(--border-color-seven);
}
.reveal-modal.preferences .reveal-modal-body .preference-innerBlock {
    width: 100%;
    height: auto;
    margin-bottom: 22px;
}
.preference-innerBlock .lockedSetting *{
    opacity: .7;
    cursor: default !important;
}
.preference-innerBlock .preference-block-label {
    margin-bottom: 5px;
    line-height: 1;
    padding-left: 10px;
    font-size: 18px;
    color: #999;
    text-transform: uppercase;
    text-align: left;
}
.preference-innerBlock .preference-block-lock .preference-block-label {
    margin-bottom: 0;
    width: calc(100% - 55px);
}
.preference-innerBlock .preference-options-list {
    margin-bottom: 10px;
}
.preference-innerBlock .preference-options-list li {
    color: var(--color-thirteen);
    position: relative;
    width: 100%;
    cursor: pointer;
    background: var(--background-color-white-middleDarkGray);
    height: 50px;
    padding: 10px;
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.preference-innerBlock .preference-options-list.long-list li {
    border-bottom: 1px solid var(--border-eee-222);
}
.preference-innerBlock .preference-options-list li span {
    width: calc(100% - 30px);
}
.preference-innerBlock .preference-options-list li i {
    width: 30px;
    font-size: 20px;
    color: var(--highlighted-text-color);
}
.preference-innerBlock .preference-options-list li:first-of-type {
    border-top-left-radius: .7rem;
    border-top-right-radius: .7rem;
}
.preference-innerBlock .preference-options-list:not(.two-list) li:last-of-type {
    border-bottom: 1px solid var(--border-eee-222);
}
.preference-innerBlock .preference-options-list li:last-of-type {
    border-bottom-left-radius: .7rem;
    border-bottom-right-radius: .7rem;
    border-top: 1px solid var(--border-eee-222);
}
.preference-innerBlock .preference-options-list.long-list li:last-of-type {
    border-top: none;
}
.preference-innerBlock .preference-block-item {
    background: var(--background-color-white-middleDarkGray);
    border-radius: .7rem;
    padding: 10px;
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}
.preference-innerBlock .preference-block-item.oneOf {
    margin-bottom: 0;
    border-bottom-right-radius: unset;
    border-bottom-left-radius: unset;
    border-bottom: 1px solid var(--border-eee-222);
}
.preference-innerBlock .preference-block-item.lastOf {
    border-top-right-radius: unset;
    border-top-left-radius: unset;
}
.preference-innerBlock .preference-block-item .preference-block-item-name {
    display: inline-block;
    width: auto;
    margin-bottom: 0;
    color: var(--color-thirteen);
    font-size: 16px;
}
.preference-innerBlock .preference-block-item .preference-block-flexBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.preference-innerBlock .preference-block-item .preference-block-flexBox .switchOption,
.preference-innerBlock .preference-block-lock .switchOption {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 30px;
}
.preference-innerBlock .preference-block-item .preference-block-flexBox .switchOption .slider {
    background-color: #E9E9EB;
}
.preference-innerBlock .preference-block-lock .switchOption .slider {
    background-color: #DBDBDD;
}
body.darkTheme .preference-innerBlock .preference-block-item .preference-block-flexBox .switchOption .slider {
    background-color: #4B4B4D;
}
body.darkTheme .preference-innerBlock .preference-block-lock .switchOption .slider {
    background-color: #4B4B4D;
}
.preference-innerBlock .preference-block-item .preference-block-flexBox .switchOption .checker,
.preference-innerBlock .preference-block-lock .switchOption .checker {
    opacity: 0;
    width: 0;
    height: 0;
}
.preference-innerBlock .preference-block-item .preference-block-flexBox .switchOption .slider:before,
.preference-innerBlock .preference-block-lock .switchOption .slider:before {
    position: absolute;
    content: "";
    height: 27px;
    width: 28px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}
.preference-innerBlock .preference-block-item .preference-block-flexBox .switchOption .checker.set + .slider:before,
.preference-innerBlock .preference-block-lock .switchOption .checker.set + .slider:before {
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(22px);
}
.preference-innerBlock .preference-block-item .preference-block-flexBox .switchOption .checker.set + .slider {
    background-color: var(--highlighted-background-color);
}
.preference-innerBlock .preference-block-lock .switchOption .checker.set + .slider {
    background-color: #8E8E8E;
}
.preference-innerBlock .preference-block-item .preference-block-flexBox .switchOption .checker + .slider.round,
.preference-innerBlock .preference-block-lock .switchOption .checker + .slider.round {
    border-radius: 34px;
    height: 31px;
}
.preference-innerBlock .preference-block-item .selected-display {
    border: 1px solid var(--border-color-one);
    display: block;
    cursor: default;
    height: 22px;
    color: var(--color-thirteen);
    border-radius: .7rem;
    width: 40px;
    text-align: center;
    padding-top: 3px;
    font-size: 16px;
}
.preference-innerBlock .preference-block-item.phasesWider .selected-display {
    width: auto;
    padding: 5px;
    height: auto;
}
.preference-innerBlock .preference-block-item .slider-container {
    width: 100%;
    padding: 0;
    margin-top: 15px;
}
.preference-innerBlock .preference-block-item .slider-container input.progress-slider {
    height: 24px;
    -webkit-appearance: none;
    width: 100%;
    margin: -2px 0;
    padding: 0;
    background: var(--background-color-white-middleDarkGray);
}
.preference-innerBlock .preference-block-item .slider-container input.progress-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: var(--background-color-three);
    border-radius: .7rem;
}
.preference-innerBlock .preference-block-item .slider-container input.progress-slider::-moz-range-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: var(--background-color-three);
    border-radius: .7rem;
}
.preference-innerBlock .preference-block-item .slider-container input.progress-slider::-ms-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: transparent;
    color: transparent;
    border: none;
}
.preference-innerBlock .preference-block-item .slider-container input.progress-slider::-webkit-slider-thumb {
    height: 22px;
    width: 22px;
    border-radius: 28px;
    background: var(--background-color-five);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -9px;
}
.preference-innerBlock .preference-block-item .slider-container input.progress-slider::-moz-range-thumb {
    height: 22px;
    width: 22px;
    border-radius: 28px;
    background: var(--background-color-five);
    cursor: pointer;
}
.preference-innerBlock .preference-block-item .slider-container input.progress-slider::-ms-fill-lower {
    background: var(--background-color-five);
}
.preference-innerBlock .preference-block-item .slider-container input.progress-slider::-moz-range-progress {
    background: var(--background-color-five);
}
.preference-innerBlock .preference-block-item .slider-container input.progress-slider::-ms-thumb {
    margin-top: 1px;
    height: 22px;
    width: 22px;
    border-radius: 28px;
    background: var(--background-color-five);
    cursor: pointer;
    border: none;
}
.preference-innerBlock .preferences-block-info {
    margin-bottom: 0;
    font-size: 15px;
    text-align: left;
    word-break: break-word;
    color: #999;
    padding-left: 10px;
    width: 100%;
}
.preference-innerBlock .preferences-lock-info {
    margin-top: 10px;
    font-size: 15px;
    text-align: left;
    color: #666;
    padding-left: 10px;
    width: 100%;
}
.preference-innerBlock .preferences-lock-info i {
    margin-right: 5px;
}
.preference-innerBlock .preference-block-lock {
    padding-right: 10px;
    width: 100%;
    position: relative;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.preference-innerBlock .preference-block-lock .lock-bg {
    width: 55px;
    border-radius: 34px;
    background: #dbdbdd;
    height: 31px;
    cursor: pointer;
}
body.darkTheme .preference-innerBlock .preference-block-lock .lock-bg {
    background: #4B4B4D;
}
body.darkTheme .preference-innerBlock .preference-block-lock .lock-bg.set {
    background: var(--highlighted-background-color);
}
.preference-innerBlock .preference-block-lock .lock-bg.set{
    background: var(--highlighted-background-color);
}
.preference-innerBlock .preference-block-lock img {
    height: 36px;
    left: 9px;
    position: relative;
    bottom: 4px;
}
.empty-message-preferences {
    margin-top: 50px;
    color: #999;
    font-size: 14px;
    text-align: center;
}

.reveal-modal.content-feedback .reveal-modal-body,
.reveal-modal.preferences .reveal-modal-body,
.reveal-modal.access .reveal-modal-body,
.reveal-modal.support .reveal-modal-body {
    width: auto;
    height: auto;
    max-height: 500px;
}
.reveal-modal.preferences .reveal-modal-body {
    height: calc(100% - 40px);
    max-height: calc(100% - 40px);
    overflow-y: auto;
    background: var(--background-color-gray-darkestGray);
}
.reveal-modal.content-feedback .fieldset,
.reveal-modal.access .fieldset,
.reveal-modal.support .fieldset,
.reveal-modal.interactive-modal .fieldset,
.reveal-modal.save-card .fieldset {
    position: relative;
    padding: 10px 20px;
    color: var(--color-454545-999);
}
.reveal-modal.preferences .fieldset {
    background: var(--background-color-three);
    padding: 10px;
    height: calc(100% - 50px);
}
.reveal-modal.preferences .fieldset .logoutButton{
    width: calc(100% - 20px);
    position: absolute;
    bottom: 10px;
    height: 40px;
    font-size: 18px;
    background: var(--background-color-six);
    color: var(--color-white-999);
}
.reveal-modal.content-feedback .fieldset .f-dropdown,
.reveal-modal.preferences .fieldset .f-dropdown,
.reveal-modal.access .fieldset .f-dropdown,
.reveal-modal.support .fieldset .f-dropdown,
.reveal-modal.save-card .fieldset .f-dropdown {
    top: 40px;
    right: 14px;
    left: auto;
    min-width: 145px;
    max-width: 360px;
    border-radius: .5rem;
    color: var(--text-color-black-gray);
}
.reveal-modal.content-feedback .fieldset:last-child,
.reveal-modal.preferences .fieldset:last-child,
.reveal-modal.access .fieldset:last-child,
.reveal-modal.support .fieldset:last-child {
    border-bottom: none;
    margin: 0;
}
.reveal-modal.content-feedback .fieldset .pbottom10 .limitedWidth,
.reveal-modal.access .fieldset .pbottom10 .limitedWidth,
.reveal-modal.support .fieldset .pbottom10 .limitedWidth {
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
}
.reveal-modal.support .fieldset .cardInfo,
.reveal-modal.access .fieldset .cardInfo {
    padding: 1px 10px 10px;
    background: #f6f6f6;
}
.reveal-modal.content-feedback .error .support-content,
.reveal-modal.access .error .support-content,
.reveal-modal.support .error .support-content {
    border-color: #FF6666;
    background-color: rgba(198, 15, 19, 0.1);
}
.reveal-modal.content-feedback h5 {
    margin-bottom: 7px;
    margin-top: 7px;
    color: var(--text-color-black-gray);
}
.reveal-modal.content-feedback input {

    color: var(--text-color-black-gray);
    border: 1px solid var(--border-ddd-666);
}
.reveal-modal.content-feedback input:not([disabled]) {
    background: var(--background-color-white-middleDarkGray);
}
.reveal-modal.content-feedback .support-content,
.reveal-modal.access .support-content,
.reveal-modal.support .support-content {
    border: 1px solid #cccccc;
    padding: 10px;
    height: 130px;
    min-height: 130px;
    max-height: 200px;
    margin-bottom: 10px;
    width: 100%;
    overflow: auto;
}
.reveal-modal.content-feedback .support-content {
    height: 100px;
    min-height: 100px;
}
.reveal-modal.content-feedback .support-content:active,
.reveal-modal.content-feedback .support-content:focus,
.reveal-modal.access .support-content:active,
.reveal-modal.support .support-content:focus {
    outline: none;
    border: 1px solid #7fbca7;
}

.reveal-modal .form {
    margin: 0;
}
.reveal-modal.interactive-modal h4,
.reveal-modal.preferences h4,
.reveal-modal.support h4,
.reveal-modal.access h4 {
    font-size: 1em;
    margin: 0;
    font-weight: 400;
    line-height: 30px;
    color: var(--color-thirteen);
}
.reveal-modal.save-card h4 {
    font-size: 1em;
    margin: 20px;
    font-weight: 400;
    line-height: 30px;
    color: var(--color-thirteen);
}
.reveal-modal.preferences ul {
    list-style-type: none;
}
.reveal-modal.save-card ul {
    list-style-type: none;
    margin: 0 0 15px 15px;
}
.reveal-modal.save-card ul li {
    cursor: pointer;
}
.reveal-modal.save-card .icon_check.checkbox,
.reveal-modal.save-card .set > .icon_check.checkbox { margin: 0 10px 5px 0; }
.reveal-modal.preferences ul.preferences-items,
.reveal-modal.save-card ul.preferences-items {
    margin: auto;
    width: auto;
}
.reveal-modal.preferences ul.tabs,
.panel.activity ul.tabs,
.reveal-modal.import ul.tabs {
    margin: 10px 0 2px;
    text-align: left;
    padding: 0 20px;
}
.tabs li a:focus {
    font-weight:400;
}
.reveal-modal.preferences .tabs dd.active a,
.panel.activity ul.tabs li.active a,
.reveal-modal.preferences .tabs li.active a,
.reveal-modal.import .tabs li.active a {
    background: transparent;
    border-left: 0;
    border-right: 0;
    font-weight: 400;
    color: var(--highlighted-text-color);
}
.reveal-modal.preferences .tabs dd.active,
.panel.activity ul.tabs li.active,
.reveal-modal.preferences .tabs li.active,
.reveal-modal.import .tabs li.active {
    border-top: 0;
    border-bottom: 3px solid var(--highlighted-border-color);
}
.reveal-modal.preferences .userAvatarBlock {
    width: 300px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto 20px;
}
.reveal-modal.preferences .userAvatarBlock .avatar-wrapper {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.reveal-modal.preferences .userAvatarBlock .avatar-wrapper:before {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    height: 0;
    width: 100%;
    padding-bottom: 100%;
    border-radius: 50%;
    background-color: #F5F5F5;
}

/* .reveal-modal.preferences .userAvatarBlock .avatar-wrapper:before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
} */

.reveal-modal.preferences .userAvatarBlock .icon_pencil-edit,
.reveal-modal.preferences .userAvatarBlock .icon_pencil {
    position: absolute;
    right: -5px;
    top: 5px;
    z-index: 2;
    color: #999;
    padding: 6px;
    border-radius: 50%;
    background-color: var(--background-color-three);
    font-size: 12px;
    transform: rotate(90deg);
}
.reveal-modal.preferences .userAvatarBlock .avatar-wrapper:hover .icon_pencil-edit,
.reveal-modal.preferences .userAvatarBlock .avatar-wrapper:hover .icon_pencil {
    color: var(--highlighted-text-color);
}
.reveal-modal.preferences .userAvatarBlock img {
    position: relative;
    z-index: 2;
    width: 80px;
}
.reveal-modal.preferences .userAvatarBlock p {
    margin-bottom: 5px;
}
.reveal-modal.preferences .userAvatarBlock p.userName {
    color: #999;
    font-size: 18px;
}
.reveal-modal.preferences .userAvatarBlock p.userEmail {
    color: var(--highlighted-text-color);
    font-size: 14px;
}
.reveal-modal.preferences .preferences-items li {
    color: #9A9A9A;
    position: relative;
    display: flex;
    margin: 0 5px 5px 0;
    width: 100%;
    cursor: pointer;
    background: var(--background-color-white-middleDarkGray);
    border-radius: .7rem;
    height: 50px;
    padding: 7px 10px 7px 10px;
    font-size: 18px;
    align-items: center;
}
.reveal-modal.preferences .preferences-items li[disabled] {
    cursor: default;
}
.reveal-modal.preferences .preferences-items li[disabled] *:not(.tooltip):not(.premium-label) {
    opacity: .4;
}
.reveal-modal.preferences .preferences-items li i {
    font-size: 17px;
    margin-right: 15px;
}
.reveal-modal.preferences .preferences-items li i.arrow_carrot-right {
    font-size: 26px;
    position: absolute;
    right: 10px;
    margin-right: 0;

}
.reveal-modal.preferences .preferences-items li span.premium-label {
    color: var(--highlighted-text-color);
    opacity: 1;
    position: relative;
    bottom: 11px;
    font-size: 12px;
}
.reveal-modal.preferences .preferences-items li:not([disabled]):hover {
    color: var(--highlighted-text-color);
}
.reveal-modal.preferences .preferences-items li.tooltipInactive:hover {box-shadow: 0 0 0 rgba(0,0,0,0);}
.reveal-modal.preferences .preferences-items li.tooltipInactive:hover {
    box-shadow: 0 0 0 rgba(0,0,0,0);
}
.reveal-modal.preferences .preferences-items li span.tooltip {
    display:none;
    top: -45px;
    left: 0;
    position: absolute;
    width: 150px;
}
.reveal-modal.preferences .preferences-items li:hover span.tooltip {
    display: block;
}
.reveal-modal.preferences .preferences-items li.tooltipInactive i {
    opacity: 0.4;
}
.reveal-modal.preferences div[class*=icon-]:before {
    text-align: center;
}
.reveal-modal.preferences .preferences-sub {
    width: 450px;
}
.reveal-modal.preferences .preferences-sub.learn {
    width: 700px;
}
.reveal-modal.preferences.learnScreenPreferences {
    width: 700px;
}
.reveal-modal.medium.batchActivationModal {
    width: 700px;
}
.reveal-modal.preferences .preferences-sub.user {
    width: auto;
}
.reveal-modal.preferences .preferences-sub.parent {
    width:1000px;
}
.reveal-modal.preferences .preferences-sub.learn .tabs-content.contained {
    width: 700px;
}
.reveal-modal.preferences .preferences-sub.learn input {
    text-align: right;
    font-size: small;
}
.reveal-modal.preferences .preferences-sub.user .custom.dropdown.twelve {
    width: 70%
}
.reveal-modal.preferences .preferences-sub .preferences-items li {
    padding:0;
    margin:0;
    min-width: inherit;
    transform: scale(0.9);
    box-shadow: none;
}
.reveal-modal.preferences .preferences-sub .custom.dropdown.twelve li i.icon_check {
    opacity: 0;
    margin-right: 10px;
}
.reveal-modal.preferences .preferences-sub .custom.dropdown.twelve li.selected i.icon_check {
    opacity: 1;
}
.reveal-modal.preferences .preferences-sub .dropdown.right,
.reveal-modal.preferences .preferences-home .dropdown.right {
    position: static;
}
.reveal-modal.preferences label.set {
    font-weight: normal;
}
.reveal-modal.preferences > div {
    display: none;
}
.reveal-modal.preferences > div.active {
    display: block;
}
.reveal-modal.preferences .preferences-sub .reveal-modal-header h3 span, .import .reveal-modal-header h3 span {text-transform: none; opacity:0.5}
.import .reveal-modal-header h3 span {padding-left: 10px;}
.preferences-sub h3 .lower_case {text-transform: none;}
.reveal-modal-footer.row.active .loadingSubjects {left: 20px;}
.reveal-modal.preferences .tabs li.active {margin-top: 0}
.preferences .fieldset div.dropdown button.help {
    color: var(--color-eight);
    font-size: 1em;
    font-weight: 800;
    z-index: 95;
}
.reveal-modal.preferences .preferences-sub .reveal-modal-header h3 span,
.import .reveal-modal-header h3 span {
    text-transform: none;
    opacity:0.5
}
.import .reveal-modal-header h3 span {
    padding-left: 10px;
}
.preferences-sub h3 .lower_case {
    text-transform: none;
}
.reveal-modal-footer.row.active .loadingSubjects {
    left: 20px;
}
.reveal-modal.preferences .tabs li.active {
    margin-top: 0;
}
.preferences .fieldset div.dropdown button.help {
    color: var(--color-eight);
    font-size: 1em;
    font-weight: 800;
}
#preferencesThemesBtn .tooltip, #preferencesPersonalPhases .tooltip {
    top: 55px;
    left: 0;
}
#preferencesThemesBtn div {
    display: flex;
    align-items: center;
    padding-left: 3px;
}
i.paintRoller {
    background: var(--icon-palette-simple) no-repeat;
    width: 28px;
    height: 28px;
    position: relative;
    left: -4px;
    margin-right: 3px !important;
}
#preferencesThemesBtn:not([disabled]):hover .paintRoller {
    background: var(--icon-palette-current) no-repeat;
}
#preferencesParentRoleBtn i.parental_control_normal {
    background: var(--icon-group-party-simple) no-repeat;
    height: 26px;
    width: 25px;
    margin-right: 8px;
    position: relative;
    left: -3px;
}
#preferencesParentRoleBtn:not([disabled]):hover i.parental_control_normal {
    background: var(--icon-group-party-current) no-repeat;
}

/*************************new phase style********************************/

.phase_attent {background-color: #FBF180; position: relative}
.icon_attent {position: absolute; top:0; left:0; width: 92px;}
.atten_text {color:#666}
.attention { color: var(--highlighted-text-color); line-height: 18px;}
.phase_attent .icon_error-circle_alt {display:block; color: var(--highlighted-text-color); font-size: 48px; margin: 21px 0 0 30px;}
.atten_text .six span {text-transform: uppercase; cursor: pointer;}
.atten_text .six a {text-transform: uppercase; color: var(--highlighted-text-color); font-size: 14px;}
.atten_text .six a.regular {color:#454545;}
.gray_tab, .dropdown-table.row {background-color: #F7F7F7; margin-bottom: 10px; margin-top: 10px;}
body.darkTheme .gray_tab, body.darkTheme .dropdown-table.row {background-color: #363636; margin-bottom: 10px; margin-top: 10px;}
.gray_tab {border-radius: .5rem}
.gray_tab div, .dropdown-table.row div {font-size: 14px;}
.gray_tab .row {padding: 10px 20px; color: #999; }
.gray_tab .phases {border-bottom: 1px solid #cccccc;}
.gray_tab.phases .phase_duration .row {border-bottom: 1px solid var(--border-ccc-222);}
.gray_tab .head_title, .dropdown-table.row .head_title{
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-ccc-222);
    padding-bottom: 10px;
}
.phase-container {
    position: absolute;
    display: none;
}
.phase-container li {
    font-size: 14px;
    margin: 5px 0;
}

.phase-container.f-dropdown:before {left: 20px;}
.phase-container.f-dropdown:after {left: 20px;border-color: transparent transparent var(--border-ccc-666);border-width: 10px;display: block;top: -21px;z-index: 97;}
.reveal-modal.preferences .fieldset.phase_set .phase-container{top: 33px;left:0; min-width: 141px;}
.reveal-modal.preferences .fieldset.phase_set .repetition-container{
    min-width: 150px;
    max-height: 300px;
}

.phase_set .row {margin: 10px 0; position: relative}
.phase_set  .dropdown.column .f-dropdown{right:-8px}

/*****************************add style***************************************************/

.dropdown-toggle.white {width: 100%;padding: 7px 10px;display: block;background: #fff;color: var(--color-ccc-999);font-weight: 500;font-size: 15px;cursor: pointer;}
.dropdown-toggle.white .selector{font-size: 24px; line-height: 15px; margin-right: -4px;}
.top-padd {padding-top: 7px;}
.dropdown-table.row {padding-bottom: 10px;}
.dropdown-table .row {padding: 10px 20px 0;}
.dropdown-table [class*="column"] + [class*="column"]:last-child {padding-right: 15px;}

.tabs-content > * {display: none;}
.tabs-content > *.active {display: block;}

.form.custom .custom.dropdown ul {background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;display: none;left: 0;margin: 0;padding: 0;position: absolute;top: 26px;width: 100%;z-index: 9999;}
.form.custom .custom.dropdown:active ul {display: block !important;}
.form.custom div.custom.dropdown ul li {font-size: 14px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.form.custom .custom.dropdown .select-image {display: inline;height: 18px;margin: 0 5px 5px 0px;vertical-align: middle;}
.form.custom ul li {cursor: pointer;}
.preferences-sub.learn .form.custom ul li {
    position: relative;
}
.preferences-sub.learn .form.custom ul li .tooltip.tip-top {
    width: 160px;
    left: -30px;
    top: -20px;
}
.de .preferences-sub.learn .form.custom ul li .tooltip.tip-top {
    width: 175px;
}
.preferences-sub.learn .form.custom #general ul li .tooltip.tip-top {
    left: -10px;
    top: -25px;
}
.import .form.custom ul li.disabled, .import .form.custom ul li.disabled a, .import .form.custom ul.tabs li, .import .form.custom ul.tabs li a {cursor: default;}
.import .form.custom ul.tabs li a:focus {color: #6F6F6F;}
.reveal-modal.import .reveal-modal-footer .button.third.buttonFinish {padding-right: 10px; color: #CE002B;}
.reveal-modal.import .reveal-modal-footer .button.third.buttonFinish:hover {border-color: #CE002B;}

button.help {background: none;border: none;cursor: pointer;color: var(--highlighted-text-color);padding: 0;}
.constant .dropdown {
    top: 10px;
    position: absolute;
    right: 10px;
}
.constant button.help {
    font-size: 21px;
    border: 2px solid var(--border-white-222);
    color: var(--color-white-222);
    border-radius: 50%;
    width: 29px;
    font-weight: bold;
}
.discountCodeInfo {
    width: 300px;
    color: #999;
    font-size: 16px;
    right: -10px;
    top: 37px;
}
.discountCodeInfo:before {
    left: 267px;
}
/*-------------------------
 * IMAGES ZOOM
 * ------------------------*/
#p6zoomMask {
    position: fixed;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    z-index: -1;
    height: auto;
    width: auto;
}
#p6zoom {
    position: fixed;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    z-index: 999;
}
#p6zoom img {
    color: #000;
    max-height: 100%;
    max-width: 100%;
    border: 5px solid #eee;
    webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
#p6zoomLoader {
    position: relative;
}

#p6zoomLoader:before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: -1%;
    background: url(../../img/loading-icon-2.svg) no-repeat center;
    -ms-animation: yoyo 1s steps(9) 0s infinite;
    -webkit-animation: yoyo 1s steps(9) 0s infinite;
    -moz-animation: yoyo 1s steps(9) 0s infinite;
}

/*-------------------------
 * libModal
 * ------------------------*/
.showAll {
    font-size: 28px;
    color: var(--color-white-222);
    margin: -3px 0 0 -10px;
    float: left;
    transform:scaleY(1.2);
    -ms-transform:scaleY(1.2);
    -webkit-transform:scaleY(1.2);
}
.showAll:hover {
    color: #fff;
    opacity: .5;
}
.closeButton {
    float: right;
    position: relative;
    width:100%;
}
h5 i.icon-info-sign,
h4 i.icon-info-sign {
    color: #007a50
}
.cancelMultiEdit {float: left;width: 93px;height: 38px;font-weight: bold;color: #007a50;margin-right: 30px;padding: 12px 0px 0px 24px;}
.saveMultiEdit{border-radius: 5px;background-color: #ccc;color:#000;opacity: 0.5;font-family: inherit;}
.modal_coll_in {padding-top:5px;width:100%;text-align:center;color:#fff;}
.units {width: auto;text-align: left}
.units i { padding: 3px 3px 1px;width: 19px;margin:0 5px;color: #999; /*replaced*/}
.units i.active, .units i:hover {color: var(--highlighted-text-color);}
.units i.pen {background-color: #FC7C00;}
.units i.remove {background-color: #FF6666;}

i.pen.edit {background: transparent;color:#FC7C00;float:right;margin: 0 10px 0 0;}
.button.delete_lib {background-color: #FF6666;}
.button.delete_lib:hover, .button.delete_lib:focus {background-color: #f56363;}

.button:disabled:hover {border-color: transparent;}
.secondary .dropdown .table {width: 200px;}
.secondary .dropdown .table .table-cell {width: 50%;}
.secondary .dropdown .table-cell:first-child {border-right: 1px solid #ccc; }
.secondary .dropdown.left.bottom .dropdown-wrapper {left:-130px;}
.secondary p.info_drop{white-space: nowrap;font-size: small;text-transform: none;text-align: left}
.secondary .dropdown.left.bottom .f-dropdown:before, .secondary .dropdown.left.bottom .f-dropdown:after  {left:130px;}

.fifth {width: 20%;}

.bell_show {
    margin-right:10px;
    opacity:1;
    -webkit-animation: show 1s ease 1;
    -moz-animation: show 1s ease 1;
    animation: show 1s ease 1;
}
.phaseInactive {color:#788681!important;-webkit-animation: block 1s ease 1;-moz-animation: block 1s ease 1;animation: block 1s ease 1;}
.lib_last div.th-inner {padding-left:0;}
.middle .nine .panel .fixed-table-container {min-height:410px;max-height: 600px;overflow-y: auto;overflow-x: visible;}
.practice div.list-shell {
    background: var(--background-color-white-middleDarkGray) none repeat scroll 0 0;
    float: left;
    margin-left: 35px;
    overflow: hidden;
    padding-left: 20px;
    padding-top: 0;
    width: 96%;
    margin-bottom: 5px;
}
.practice .wizardPage .list-shell {
    width: calc(100% - 50px);
    border-radius: .7rem;
    overflow: auto;
    height: calc(100% - 205px);
}
li ul.supportIcon .f-dropdown::before {
    border-color: transparent transparent rgba(250, 250, 250, 1) transparent;
}
li ul.supportIcon {
    box-shadow: rgba(0, 0, 0, 0.247059) 0 0 4px 0;
    display: none;
    color: #8D8D8D;
    position: absolute;
    left: -78px;
    top: 45px;
    background-color: #ffffff;
    padding: 10px;
    z-index: 999;
}
li.open .supportIcon {
    display: block;
}
.showSubject {display: block !important; }

#info_sign { margin-left: 0; width: calc(50% - 5px); }
#info_sign .info_drop a {color:#007a50;}
#info_sign .dropdown-wrapper {
    bottom: 48px;
    left: 2px;
    padding: 10px
}
#info_sign .f-dropdown:before {
    right: 130px;
    bottom: -20px;
    border-color: #ccc transparent transparent;
}
#info_sign .f-dropdown:after {
    right: 130px;
    bottom: -19px;
    top: auto;
    border-color: #fff transparent transparent;
    left: auto;
    border-width: 10px;
}
#info_sign p.info_drop { font-size: 0.875em; line-height: 1.4em; color: #444; margin:10px}
.bottom #info_sign {margin:1px 10px 0 0;}
#info_sign .bell_show {
    margin-right: 0;
}
#info_sign > .analize > .dropdown-wrapper {
    width: 255px;
    cursor: default;
}


.showAllUnits {text-align: center; font-size: 12px; color: #f90; text-decoration: underline; font-weight: bold;padding: 10px 0;border-top: 1px solid #eee;cursor: pointer;}

.errorMessage {display: none;}
.error small.errorMessage {background: #FF6666;}
.error input, .error textarea{border-color: #FF6666;}
.error input:focus, .error textarea:focus{border-color: #FF6666;background-color: rgba(255, 102, 102, 0.1);}

.updateSubject div.row{margin-bottom: 20px;}
.updateSubject.error small.errorMessage {margin: -1px 0 3px 0;font-size: 10px;padding: 4px 6px;}
.updateSubject input {margin: 0 10px 0 0 ;font-size: small;height: 22px;}
.updateSubject .inputName {display:inline-block;width:100%;margin:10px 0;}
.updateSubject .button.third {height: 22px;font-size: 11px;padding: 0 10px;text-transform: none;vertical-align: top;float: right;}

.reveal-modal.medium.delete {width: 33%;margin-top: 0;margin-left: -18%;}
.reveal-modal.medium.delete .close {font-weight: normal; font-size: 1.7em;}
.reveal-modal.medium.delete .reveal-modal-header {background: #CC2929 !important; margin-top: 20px;}
.reveal-modal.medium.delete .reveal-modal-header h3 {line-height: 24px;}
.reveal-modal.medium.delete h4 {font-weight: 200; margin-left: 0; color: var(--text-color-black-gray);}
.reveal-modal.medium.delete .button.third.right {color: #CC2929; border: 1px solid var(--border-white-222); border-radius: .7rem; margin-left: 10px;}
.reveal-modal.medium.delete .button.third.right:hover, .reveal-modal.medium.delete .button.third.right:focus {color:#CC2929; border: 1px solid #CC2929;}
.reveal-modal.medium.delete .button.link {border: 1px solid var(--border-white-363636); border-radius:.7rem; color: var(--text-color-black-gray);}
.reveal-modal.medium.delete .button.link:hover, .reveal-modal.medium.delete .button.link:focus {border-color: var(--border-color-eight);}
.reveal-modal.medium.delete .row {padding-left: 20px; background: var(--background-color-white-darkestGray);}
.reveal-modal.medium.delete .itemName {color: #007a50;}
.reveal-modal.medium.delete .itemCount {color: var(--highlighted-text-color);}

.reveal-modal.medium.editing {
    margin-top: 0;
    padding-top: 20px;
    width: 700px;
}
.reveal-modal.medium.editing .close {font-weight: normal; font-size: 1.7em;}
.reveal-modal.medium.editing .four #phaseBatchDropDown .breadcrumbs {}
.reveal-modal.medium.editing .reveal-modal-header {background: var(--highlighted-background-color);}
.reveal-modal.medium.editing h4 {font-weight: 200}
.reveal-modal.medium.editing .row {padding-left:10px}
.reveal-modal.medium.editing .batch-tooltip {color: #747474;}
.reveal-modal.medium.editing .batch-tooltip + ul.breadcrumbs {margin-top: 5px;}

.reveal-modal.medium.practice-session-edit {
    width: 80%;
    height: 90%;
    top: 5%;
    left: 30%;
}

.reveal-modal.medium.practice-session-edit .body.row {
    min-width: 800px;
}

.reveal-modal.medium.practice-session h4 {font-weight: 400; margin-left: 20px; color: var(--text-color-black-gray);}

#yourAnswer.panel h3 {white-space: nowrap;padding-right: 40px;overflow:hidden;}

.add_buttons {position:relative;float:right;padding:20px 0;margin-right: 5px;}
.add_buttons .button {margin-right: 10px;}
.add .inputWrap {min-height: 283px;}
.inputWrap .bottom_area .right .close {color: #CCCCCC;font-size: 24px;font-weight:normal;margin:3px}
.inputWrap .input_area {height: 100%;}

.label01 {
    text-transform: uppercase;
    font-size: 0.9em;
    color: #999;
    cursor: text;
}
.label01.pad {
    padding: 0 0 15px 15px;
}

#answerTxt,
#questionTxt,
#userAnswer {
    background-color: var(--background-color-white-middleDarkGray);
    font-family: inherit;
    border: 1px solid var(--border-e0e0e0-666);
    color: rgba(0, 0, 0, 0.75);
    display: block;
    font-size: 16px;
    margin: 0;
    padding: 20px;
    width: 100%;
    overflow-y: auto;
    word-break: break-all;
    height: 100%;
}
/***------------------------------
 Quill editor styles
 --------------------------------***/
.ql-editor.ql-blank::before {
    font-size: 175%;
}
#userAnswer,
#answerTxt .ql-editor,
#questionTxt .ql-editor{
    border-bottom: none;
}
#answerTxt .ql-container,
#questionTxt .ql-container{
    height: calc(100% - 55px);
}
#answerTxt,
#questionTxt {
    border: none;
    padding: 0;
    overflow: hidden;
}
#answerTxt .ql-editor,
#questionTxt .ql-editor {
    border: 1px solid var(--border-e0e0e0-666);
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    border-bottom: none;
    padding: 20px;
    font-size: inherit;
}
#answerTxt .ql-toolbar,
#questionTxt .ql-toolbar {
    border: none;
    padding: 8px 8px 8px 0;
    margin-bottom: 10px;
}
.ql-toolbar.ql-snow .ql-formats {
    margin-right: 15px;
    float: left;
}
.learnPage div#userAnswer {
    border-top: 1px solid var(--border-e0e0e0-666);
    border-left: 1px solid var(--border-e0e0e0-666);
    border-right: 1px solid var(--border-e0e0e0-666);
    border-bottom: none;
    padding: 20px 20px 20px 20px;

    word-break: normal;
    overflow-x: hidden;
    height: calc(100% - 45px);
    width: calc(100% + 1px);
}
.learnPage div#userAnswer.placeholder {
    font-style: italic;
    color: rgba(0, 0, 0, 0.5);
}
div#userAnswer:focus {
    outline: 0;
}


.units_set {width:80%;}
.cards_count {width:20%;}
.first_col {width: 30px;}
.content_col {width:40%;}
.separator {height: 30px; padding-left: 10px !important;}

#cardAnswerText,
#cardQuestionText {
    display: block;
    min-height: 50px;
    word-break: normal;
    color: rgba(0, 0, 0, 0.75);
}
body.darkTheme #cardAnswerText,
body.darkTheme #cardQuestionText {
    color: #ccc;
}
#cardAnswerText *,
#cardQuestionText * {
    white-space: normal !important;
    word-break: break-word !important;
}
.cardQuestionTranscription, .cardAnswerTranscription {
    display: block;
    text-align: center;
    color: var(--color-333-999);
}
.add .input_area ul,
span#cardQuestionText ul,
span#cardAnswerText ul,
#cardsList #tableCards ul {
    display: block;
    list-style-type: disc;
    padding-left: 25px;
}
span#cardQuestionText ol,
span#cardAnswerText ol {
    padding-left: 10px;
}

.title_input .checkbox {
    cursor:pointer;
}

.item_content .icon_container {
    margin-left: 10px;
    width: 20px;
    height: 15px;
    position: relative;
    float: left;
}
.item_content div.text_container,
.subject_container {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    position: relative;
    float:left;
}
.item_content div.text_container {
    width: 80%;
}
.subject_container {
    width: 72%;
}
.de .subject_container {
    width: 66%;
}

.item_content div.text_container {
    line-height: 20px;
}
.placeholder {
    color: #b3b3b3;
    font-size: 20px;
}
/**********************************************login page new style************************************************************/
.login2 .panel{
    padding: 30px 35px;
}
.start .login2,
.browser_page .browser_panel {
    display: table;
    position: relative;
    border-spacing: 10px;
    margin: 10% auto 0;
    height: 340px;
    min-width: 350px;
    width: 350px;
}
.ie6 .browser_page .browser_panel,
.ie7 .browser_page .browser_panel {
    min-width: 600px;
    width: 600px;
}
.start .login2 {
    -webkit-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
    border-spacing: 0;
}
.start .table {
    position: relative;
    margin: 3% auto;
    height: 424px;
    background: none;
    border-spacing: 10px;
    width: 500px;
    transition: all 0.25s ease-out;
}
.start .learn_tile .table {
    height: 200px;
    width: 575px;
}

.login2 img{
    margin-bottom: 60px;
}
.banner {
    text-align: center;
    position: relative;
}
.banner a {
    display: inline-block;
    margin: 13px 14px 0 0;
}
.start .login2 h2,
.browser_page .browser_panel h2, .top .twelve  .table .wrapper h2{font-weight: 300;}

.start .login2 .panel .columns, .browser_page .browser_panel .panel .columns {padding: 0;}

.browser_page .browser_panel h2 {
    color:#999;
    padding-bottom: 30px;
}
.start .login2 h2 {
    color:#4e4e4e;
    margin-bottom: 25px;
}
.start .login2 input,
.browser_page .browser_panel input,
.start div.search,
.top .twelve div.table div.table-row div.wrapper {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
.start div.search {
    width: 100%;
    font-size: 14px;
    position: static;
    padding: 10px;
    border: none;
    border-radius: .5rem;
}
.login_page .start div.search {
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
}
.start div.search i{font-style: normal; float: left; padding-top: 5px;}
.start div.search input {background: none repeat scroll 0 0 rgba(0, 0, 0, 0);border: medium none;box-shadow: none;display: inline;height: auto;margin: 0 0 0 10px;min-width: 230px;padding: 3px 0 2px 0;transition: all 0.15s ease-in-out 0s;color:#666;}

div#rememberMe { margin-top: 0; margin-bottom: 20px; height: 15px; }
div#rememberMe > div { width: auto; }
div#rememberMe > div > input { float: left; }
div#rememberMe > div > label { float: left; margin: 2px 0 5px 2px;  color: #999999; cursor: pointer; display: block; font-size: 0.9em; font-weight: 500;}
#form-login .error.row { margin-top: 5px; }
#form-login .error.row span { text-decoration: underline; clear: left; cursor: pointer;}
.ie10 div#rememberMe > div > label { margin-top: 3px; }
.ie11 div#rememberMe > div > label { margin-top: 3px; }
#rememberCheck { margin-left: 0; }

.login_page div.footer, .footer.home_page { border-top: 0; }
.login_page div.wrapper { background: rgba(255,255,255,0.9); border-radius: .5rem; border-spacing: 0; text-align: center; margin-bottom: 0; position: relative;}
.login2 .button  { text-transform: none; height: auto; border: none; font-size: 24px; font-weight: 600; width:100%;background-color: darkorange !important; color:#ffffff !important; padding: 15px 0;border-radius: .5rem;}
.login2 .button[disabled]  { opacity: 1 !important; }
.login2 .button[disabled] span  { opacity: 0.5 !important; }
.browser_page .browser_panel  .wrapper .row {position: relative;height: 30px;width: 100%;margin:20px 0 5px;}
.login2 .wrapper .row {margin:0 0 5px 0;}
.login2 .wrapper .row:nth-child(2) .twelve {margin-top: 5px;}
.login2 .wrapper .row .twelve {padding: 0;}
.login2 .login-links {text-align: left; font-size: 14px; margin: 10px 0 0 0;}
.login2 .login-links a {color: #999; text-align: left; font-size: 0.9em;}
.login2 .login-links a:hover {color: #666; text-align: left; font-size: 0.9em;}
.login2 div#rememberMe .login-links > div { display: block; height: auto; text-align: right; }
.login2 div#rememberMe .login-links > div:first-child { margin-bottom: 10px; margin-top: 1px; }

.login2 .login-links-new {text-align: right; width: 40%; font-size: 14px; margin: 2px 0 15px; float: right;}
.login2 .login-links-new a {line-height: 18px;}
.login2 .error {color: #CE002B; font-size: 12px; margin-bottom: 20px; letter-spacing: 0.5px;}
.login2 .wrong, .login2 .wrong:hover {border: 1px solid #CE002B !important;}
.login2 .wrapper .row.submitButton { margin-top: 0; }

.checkbox_items {list-style-type: none; margin: 0; width: 60%; float: left; color:#4e4e4e;}
.checkbox_items li {cursor: pointer; text-align: left; font-size: 14px;}
.checkbox_items .icon_check.checkbox {margin: 0 10px 5px 0;}
.checkbox_items li span{line-height: 11px;}

/****************************************************header template*************************************************************************/
.head.row {
    height: 100px;
    padding: 20px 10px 0 20px;
    background-color: transparent;
    display: flex;
}
.head.row > div {
    display: flex;
    align-items: center;
}
.head.row .flexLeft {

}
.head.row > div.learnPage.rightArea {
    justify-content: flex-end;
}
.head.row .flexCenter {
    justify-content: center;
}
.head.row .flexRight {
    justify-content: flex-end;
    padding-right: 0;
}
.head.row .flex-ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
}
.head .inline-list {
    margin: auto;
    padding: 10px 0 0;
    white-space: nowrap;
}
.head .inline-list li {
    position: relative;
    cursor: pointer;
}
.head .inline-list li img.disabled {
    cursor: default;
}
.head .inline-list a {
    color: var(--color-icons);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.head .inline-list a img {
    width: 75px;
    margin-left: 10px;
}
.head .inline-list div {
    color: #999;
    cursor: pointer;
    font-size: 25px;
}
.top-bar ul > li {
    width: 40px;
}
.top-bar ul.inline-list > li {
    margin: 0 0 0 10px;
    vertical-align: top;
}
.top-bar ul > li a:not(.button) {padding: 0}

.top .twelve .table .table-row .wrapper {background-color:#ffffff;display: table-cell;vertical-align: middle;cursor: pointer; border-spacing: 10px;/* overflow: hidden;*/ position: relative; perspective: 600px;-moz-border-radius: 5px;border-radius: 5px;-webkit-border-radius: 0;-moz-border-radius: 0;-ms-border-radius: 0;-o-border-radius: 0;border-radius: 0;}
ul.inline-list > li.user-preferences {
    margin-right: 0;
    position: relative;
    cursor: pointer;
    min-width: 64px;
    width: auto;
    max-width: 300px;
    margin-left: 10px;
    bottom: 10px;
}
.user-preferences > a > i {font-size: 42px;}
.user-preferences .userNameInfo {
    display: flex;
    align-items: flex-end;
    width: auto;
    flex-direction: column;
    max-width: 210px;
    overflow: hidden;
}
#userName {
    font-size: 20px;
    top: 0;
    height: 21px;
    line-height: 20px;
}
.uppercase {text-transform:uppercase !important;}
.user-preferences span:nth-child(2) {font-size: 14px;line-height: 16px;bottom: 0;}

.user-preferences ul.user-menu {position: absolute; top: 85px; right: 0; display: none;}
.user-preferences.open ul.user-menu {display: block;border-radius: .5rem; z-index: 999}
.user-menu li{ padding: 0.5em; text-transform: none; line-height: 1.2em; font-size: 15px; color: #999; min-width: 250px; width: auto;}
.user-menu .userNameLi {padding: 15px 10px 15px 10px; border-bottom: 1px solid var(--border-eee-222);}
.user-menu .userNameLi p {font-size: 20px; color: #999; text-align: center; margin-bottom: 0;}
.user-menu .userNameLi span {width: 100%;text-align: center;display: block;}
.user-menu .userNameLi .emailInfo {color: #999; font-size: 13px;}
.user-menu .userNameLi .confirmEmail {
    margin-top: 5px;
    color: var(--highlighted-text-color);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
.user-menu .userNameLi .confirmEmail:hover {
    opacity: .7;
}
.user-menu li.simple {
    height: 40px;
    padding: 10px 15px;
}
.user-menu li.complex {
    height: 40px;
    padding: 10px 15px;
    background: var(--highlighted-background-color);
    color: var(--color-white-222);
}
.user-menu li.complex:hover {
    opacity: .7;
    background: var(--highlighted-background-color);
}
.user-menu li.simple:hover {
    color: var(--highlighted-text-color);
}
.user-menu li .icon_impressum {
    width: 14px;
    top: 0;
    left: 2px;
    background: var(--icon-impressum-simple) no-repeat;
}
.user-menu li:hover .icon_impressum {
    background: var(--icon-impressum-current) no-repeat;
}
.user-menu li.simple span, .user-menu li.complex span {
    font-size: 16px;
    display: flex;
    justify-content: flex-end;
    height: 100%;
}
.user-menu li.simple i {
    margin: 0 0 0 10px;
    font-size: 16px;
    top: 2px;
    position: relative;
}
.user-menu li.simple img {
    width: 11px;
    position: relative;
    margin-left: 5px;
    left: 8px;
}
.user-menu li.complex img {
    width: 16px;
    position: relative;
    left: 9px;
}
.user-menu li.simple .icon_unconfirmed {
    width: 25px;
    margin: 0;
    top: -2px;
    left: 6px;
    height: 23px;
    background: var(--icon-unconfirmed-profile-simple) no-repeat;
}
.user-menu li.simple:hover .icon_unconfirmed {
    background: var(--icon-unconfirmed-profile-current) no-repeat;
}
.user-menu i.icon_download {
    transform: rotate(-90deg);
    left: 2px;
    top: 0 !important;
}
.user-menu li.optionSimple > span {
    font-size: 16px;
}
#lnkLogout {
    border-top: 1px solid var(--border-eee-222);
}
.user-menu.f-dropdown {padding: 6px 0 6px 0;}
.user-menu.f-dropdown::before {border:none;}
#userEmail, #userNameBlock { cursor: default; }
.practice_session i{font-size: 26px;}
.practice_session a {margin-right: 14px;height: 34px;}
#gamesSideBtn .star-panel1 {
    cursor: pointer;
    display: block;
    position: absolute;
    right: 35px;
    top: 73px;
}
#gamesSideBtn .star-panel2 {
    cursor: pointer;
    display: block;
    position: absolute;
    right: 18px;
    top: 73px;
}
#gamesSideBtn .star-panel3 {
    cursor: pointer;
    display: block;
    position: absolute;
    right: 1px;
    top: 73px;
}
#gamesSideBtn .alt_star-panel1 {
    cursor: pointer;
    display: block;
    position: absolute;
    right: 59px;
    top: 51px;
}
#gamesSideBtn .alt_star-panel2 {
    cursor: pointer;
    display: block;
    position: absolute;
    right: 42px;
    top: 51px;
}
#gamesSideBtn .alt_star-panel3 {
    cursor: pointer;
    display: block;
    position: absolute;
    right: 25px;
    top: 51px;
}
#gamesSideBtn .star-panel1 i, #gamesSideBtn .star-panel2 i, #gamesSideBtn .star-panel3 i{
    font-size: 16px;
    color: var(--highlighted-text-color);
}
#gamesSideBtn .alt_star-panel1 i, #gamesSideBtn .alt_star-panel2 i, #gamesSideBtn .alt_star-panel3 i {
    font-size: 16px;
    color: #999;
}
#gamesSideBtn .star_locked {
    opacity: 0.4;
}
.table_lib {
    padding-right:0;
    width: calc(100% - 50px);
    margin: 0 0 0 30px;
    height: 100%;
    border-radius: .7rem;
}
.managePage .table_lib .table-items td {
    overflow: visible;
    border-bottom: 1px solid var(--border-eee-222);
    height: 60px;
}
.table_lib .table-items td {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
}
.table_lib .fixed-table-container-inner {
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
    background: var(--background-color-white-middleDarkGray);
    height: calc(100% - 255px);
}
#tableCards {
    border-bottom-left-radius: .5rem;
}
.column.count{color:var(--color-747474-999-white); margin-top:6px;margin-left: 10px; padding-right: 5px;}
.table_lib .column.count{margin-left: 22px;}
.column.select_cards{color:var(--highlighted-orange-white-text-color); margin-top:6px;}
.table_lib .search {position:relative;}
.table_lib table.table-items th {
    background: white;
}
.table_lib table.table-items th.lib_second {width: 70px;}
.table_lib table.table-items th.lib_third,  .table_lib table.table-items th.lib_four{width: 30%; max-width: 250px; min-width: 150px;}
.table_lib table.table-items .thumb-wrapper {width: 30px; height: 30px;}
.table_lib table.table-items th.lib_last {width: 50px; padding-right: 10px; }
.table_lib table.table-items th.lib_check {width: 48px; padding-right: 10px; padding-left: 8px; }
.activation-wizard .table_lib table.table-items th.lib_check .th-inner .icon_check.checkbox {display: none;}
#headerCardsTable, #headerCardsTable th, #headerTable{
    height: 50px;
    background: var(--background-color-white-middleDarkGray);
}
.table_lib table.table-items th.lib_phase {width: 100px;padding-right: 10px}
.table_lib .th-inner {line-height: 57px; text-transform: uppercase; font-weight: 200; display: block; font-size: 19px;}
.table_lib .th-inner.set i{display: block;position: absolute;right: 0;top: 12px;}
.table_lib .arrow_carrot-down:before, .table_lib .arrow_carrot-up:before {font-size: 28px;}
.table_lib .th-inner.set {padding-right: 30px;}
.table_lib table.table-items {margin-bottom: 0; border-top-left-radius: .5rem; border-top-right-radius: .5rem; border: none; overflow-y: hidden;}
.table_lib .panel div.fixed-table-container.row h2, .tooltip_container .fixed-table-container-inner h2{ color:#cccccc;}
.table_lib .fixed-table-container-inner div.fixed-table-container.row {
    border-bottom: 0;
    margin-bottom: 0;
    height: 100%;
}
.table_lib .fixed-table-container-inner div.fixed-table-container.row:focus {outline:0;}
.table_lib .table-items .lib_last .th-inner {padding-left: 10px;}
.table_lib .table-items .lib_last.set .th-inner {padding-left: 0;}
.table_lib td.direction_column {color: #999;}
.table_lib td.direction_column span.grey, .table_lib td.phase_col span.grey {color: var(--color-ccc-gray)}
.table_lib td.phase_col .p6phase {margin-left: 25%;}
.table_lib td.direction_column .two_arrow{ display:block; margin-top: -15px;}
.table_lib .bottom.row > .row {height: 40px;}
ul.breadcrumbs li a.selector.arrow_carrot-down {line-height: 23px;}
.reveal-modal.multipleEditPage ul.breadcrumbs li a.selector.arrow_carrot-down {padding-left: 0px;}

.title_input {min-width: 340px;position:absolute;letter-spacing: 0;left:0;top:0}
.title_input .icon-plus-sign{color:#ccc; margin:0 10px;cursor: pointer;}
.title_input .custom a.current {max-width: 260px;}
.title_input .form.custom div.custom.dropdown a.current, .title_lib.custom div.custom.dropdown a.current {margin-right: 24px;}
.title_input .tooltip_container .libPhaseModal {top:-20px;}

.title_lib.form.custom .custom.dropdown {padding: 3px 5px; height: 32px}
.lib_right .title_lib > .panel {position: relative; margin-bottom: 0; margin-left: 10px;}
.lib_right .title_lib > .panel.search-row {height: 55px; background-color: var(--background-color-gray-darkestGray-none); padding: 0 20px 0 30px; margin-top: 25px; margin-left: 0;}
.practice .title_lib > .panel.search-row {
    background-color: var(--background-color-gray-darkestGray-none);
    height: 55px;
    margin: 0;
    padding: 0 10px 0 30px;
}
.lib_right .title_lib > .panel.search-row > .column {width: 40%; min-width: 500px;}
.title_lib .breadcrumbs {
    background-color: var(--background-color-white-middleDarkGray);
    border: none;
    color: var(--highlighted-text-color);
    height: 35px;
    overflow: visible;
    padding: 6px 5px 3px 10px;
    border-radius: .5rem;
}
.reveal-modal #subjectsBatchDropDown .breadcrumbs, .reveal-modal #unitsBatchDropDown .breadcrumbs {
    border: 1px solid var(--border-e0e0e0-666);
}
.title_lib_left {height:50px;position: absolute;right: 2%;top:0;z-index:2;}
.title_lib_left img{display: block;margin: 0 auto; height:100%;}
.title_lib .counters {float: right;}
.title_lib .filter-by {float: left; padding: 8px 12px; min-width: 80px;}

.title_lib div.search{
    position:relative;
    top:0;
    background: var(--background-color-gray-darkestGray-white);
    box-shadow: none;
    color:#747474;
    border-radius: .5rem;
    width: 100%;
}
.practice .title_lib div.search {
    width: 40%;
}
.wizard-steps div.search {
    margin-top: 7px;
}
.wizard-steps .columns .inner.search-block {
    border: none;
}
.wizard-steps div.search .icon_search,
.title_lib div.search .icon_search {
    cursor: pointer;
    color: #999;
}
.wizard-steps div.search.non-active {}
.title_lib div.search.non-active {
    border: 1px solid var(--border-e0e0e0-666);
}
.wizard-steps div.search.active,
.title_lib div.search.active {
    border: 1px solid var(--highlighted-border-color);
}
.wizard-steps div.search div,
.title_lib div.search div {
    padding-top: 0;
}
.title_lib div.search input {
    width: calc(100% - 50px);
}
.wizard-steps div.search input[type="text"]:focus,
.title_lib div.search input[type="text"]:focus {
    border: 0;
    outline: 0;
}
.title_lib .searchLetter {
    font-size: 100%;
}
.title_lib .searchLetter:hover,
.title_lib .searchLetter.active {
    color: var(--highlighted-text-color);
}
.title_lib div.search .icon_close {
    position: relative;
    top: 1px;
    display: inline-block;
    padding-top: 0;
    height: 23px;
    font-size: 24px;
    line-height: 0.7;
    vertical-align: middle;
    color: #999;
}
.title_lib div.search i.icon_close { cursor: pointer; }

.lib_right .loading {height:250px;border-bottom: 0}
.lib_right .fixed-table-container.unit_list {height: 200px;overflow-y: auto;border-bottom: 1px solid #eee;}
.lib_right .fixed-table-container h2, .tooltip_container .fixed-table-container-inner h2{text-align: center;font-size: 18px;color: #999; /*replaced*/}

.tooltip_container {position:relative; z-index: 5;}
.tooltip_container .right{float:right;}
.tooltip_container.active .breadcrumbs {color: var(--highlighted-text-color); border-color: var(--highlighted-border-color);}
.tooltip_container.active .alias { border-color: var(--highlighted-border-color) transparent var(--highlighted-border-color) var(--highlighted-border-color);}
.tooltip_container .table-items tbody tr {
    border-bottom: 1px solid var(--border-ccc-666);
}
.tooltip_container .table-items tbody tr:first-of-type {
    border-top: 1px solid var(--border-ccc-666);
}
.tooltip_container .table-items tbody tr:not(.disabled):hover td, .tooltip_container .table-items tbody tr td.set {color: var(--highlighted-text-color);}
.tooltip_container.active .breadcrumbs a:before{color: var(--highlighted-text-color);}
.tooltip_container.empty .breadcrumbs {border-color:#ff0000;}
.tooltip_container.empty .alias {background: #ffcaca; color: #ff0000; border-color: #ff0000 transparent #ff0000 #ff0000;}
.tooltip_container .libPhaseModal .fixed-table-container-inner {
    border-top: none;
    /*overflow: visible;*/
}
.tooltip_container .libPhaseModal .fixed-table-container-inner.loading {
    border-top: 1px solid #eee;
    border-bottom:none;
    height: 120px;
}
.tooltip_container .libPhaseModal .select {height:auto;}
.tooltip_container .libPhaseModal .fixed-table-container-inner table {
    width: 100%;
    display: block;
    overflow: visible;
}
.tooltip_container .libPhaseModal .fixed-table-container-inner table .phaseList {
    display: block;
    overflow: visible;
}
.tooltip_container .libPhaseModal table {margin: 10px 0 10px 0px;}
.tooltip_container .libPhaseModal .right, .tooltip_container .libPhaseModal .left{margin: 10px;}
.tooltip_container .libPhaseModal .left i.active {color:#ff0000;}
.tooltip_container input[type="text"] {padding-bottom: 0;}
.tooltip_container.active:after{border-color:transparent  transparent  var(--background-color-white-darkestGray) transparent;border-image:none;border-style:solid;border-width: 10px;content: "";display: block;height: 0;left: 20px;position: absolute;width: 0;z-index: 99;top: 76%;}
.tooltip_container.active:before{border-color:transparent  transparent  var(--background-ccc-222) transparent;border-image:none;border-style:solid;border-width: 9px;content: "";display: block;height: 0;left: 21px;position: absolute;width: 0;z-index: 90;top: 76%;}
.multipleEdit .tooltip_container.active:after {left: 46px;}
.multipleEdit .tooltip_container.active:before {left: 47px;}
.multipleEdit .tooltip_container .delete-notification, .forMoveButtons .tooltip_container .delete-notification {padding-left: 37px; display: block; padding-top: 12px; font-size: small; color: #D2002C;}

.subject_container, .column .tooltip_container .subject_name {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.column .tooltip_container .subject_name {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;max-width: 70%;}
.addPageClass {width: 208px;}
.unitAdd {float: left!important;}
.managePageClass .tooltip_container {width: 229px;}

/*.phaseList {border-top: 1px solid #eee;}*/
.phaseList .errorInput input {border-color: #ff0000}
.phaseList .errorInput small.errorMessage {display: block; margin: 1px 3px 3px 0; font-size: 12px; padding: 1px 6px; color:red;}
.phaseList>:first-child .error small.errorMessage {margin: -4px 3px 3px; color:red;}
.phaseList tr td,
.phaseList tr td span,
.selectUnits div {
    font-size: small;
    padding:3px 0;
    /* max-width: 355px; */
}
.phaseList tr td.ng-binding { width: 100%; }
.phaseList tr td i.icon_plus{font-size:24px; color: var(--color-747474-999); margin-left: 0;}
.input1 .phaseList tr td i.icon_plus.hidden {opacity: 0;}
.phaseList tr td i.icon_trash_alt {font-size: 16px}
.phaseList tr td.editMode {padding-top: 8px;}
.phaseList a{text-transform: none;font-weight: bold;font-size:small;}
.phaseList td input {
    margin: 0;
    width: 98%;
    font-size: 14px;
    height: 30px;
    padding: 0 0 0 5px;
    border-radius: .5rem;
}
.phaseList td input.addUnit {width: 98%; margin:3px; border-radius: .5rem; font-size: 16px; padding: 0 0 0 5px; background: var(--background-color-white-darkestGray); color: #666; border-color: #666;}
.phaseList tr.drop td {color: #ff0000; height: 37px;}
.phaseList tr.drop .title_subject {text-decoration: line-through}
.phaseList tr.drop i{margin: 0 10px 5px; width: 18px;height: 18px;display: inline-block;vertical-align: middle; font-size: 20px;}
.phaseList tr.red td {padding: 5px 0 4px; text-decoration: line-through;color: #D2002C;}
.phaseList tr.red td span {padding-left: 7px; display: block; padding-top: 6px}
.phaseList tr.red td.td_icon {text-decoration: none; padding-top: 8px;}
.phaseList td.td_icon .icon_trash_alt {margin:0 5px}
.phaseList tr.red td i.icon_close {font-size: 24px; margin-left: -3px}

.button.edit {background-color: #ffffff;color: #f90;}
.bottom.row .button i.icon_close, .bottom.row .button i.icon_close.arrow_left-right_alt  {font-size: 24px; margin-top: -6px;}
.navBtn button i.icon_close, .navBtn button i.arrow_carrot-right {
    font-size: 25px;
    float: right;
    position: relative;
    bottom: 1px;
}
.navBtn button i.arrow_carrot-left {
    font-size: 25px;
    position: relative;
    bottom: 1px;
}
.navBtn button i.icon_pencil {font-size: 13px;}
ul.breadcrumbs {cursor: pointer;}
ul.breadcrumbs li.numberSelected span{float:left;font-size:100%;color: var(--highlighted-text-color);font-weight:400;}
ul.breadcrumbs li.numberSelected:hover span{text-decoration: underline}
ul.breadcrumbs li:before {content: "";}
ul.breadcrumbs li {
    padding-right: 0;
}
ul.breadcrumbs li.pull-right {
    float: right;
}
ul.breadcrumbs li a:before {font-size: 23px;color: #747474;}
ul.breadcrumbs li a.selector:hover {text-decoration: none}
ul.breadcrumbs li a, ul.breadcrumbs li span { padding-left: 7px; }
.breadcrumbs li span.phase_lib {color:#FC7C00;display: block;float:right;font-size: small;text-align: right;text-transform: none;text-decoration: underline;}

.libPhaseModal {width:436px;height:auto;margin:10px 0px;position:absolute;background-clip:padding-box;background-color:var(--background-color-white-darkestGray);box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);left:0;top:104%;outline:medium none;visibility:visible;z-index:97;border-radius: .5rem; border: none;}
.libPhaseModal.unitSelect > table .phaseList tr td.td_icon.editMode {padding-left: 0; padding-right: 0;}
/* TODO: Disable Learn/Relearn functions */
#phaseBatchDropDown #phaseList { overflow: visible; }
#phaseList tr {
    background: var(--background-color-white-darkestGray);
}
#phaseList tr:not(.disabled):hover td:not(.separator) {
    color: var(--highlighted-text-color);
}
#phaseList tr td {
    border-bottom: 1px solid var(--border-ccc-666);
}
.en #phaseBatchDropDown .libPhaseModal.twoPhase {left: -345px; width: 470px;}
.de #phaseBatchDropDown .libPhaseModal.twoPhase {left: -390px; width: 515px;}
#phaseBatchDropDown .libPhaseModal.twoPhase table {padding: 14px}
#phaseBatchDropDown .libPhaseModal.twoPhase table td {margin-left: 10px; color: #777777; padding: 3px 5px}
#phaseBatchDropDown .libPhaseModal.twoPhase table td span {padding-left: 0; color:#777777}
#phaseBatchDropDown .libPhaseModal.twoPhase > .fixed-table-container-inner.unit_container { overflow-x: visible; overflow-y: visible; width: 470px; }
#phaseBatchDropDown .libPhaseModal.twoPhase > .fixed-table-container-inner.unit_container .phaseList tr td,
#phaseBatchDropDown .libPhaseModal.twoPhase > .fixed-table-container-inner.unit_container .selectUnits div { overflow-x: visible; overflow-y: visible; width: 300px; }
#phaseBatchDropDown .libPhaseModal.twoPhase table.table-items tbody tr.ui-state-default { width: 100%; }
#phaseBatchDropDown .libPhaseModal.twoPhase table.table-items tbody tr.ui-state-default > td.pos-rel { width: 100%; }
#phaseBatchDropDown .libPhaseModal.twoPhase table td span.tooltip.tip-top {
    left: 40px;
    top: -45px;
    width: 90px;
    font-size: 12px;
    padding: 5px;
    color: #ffffff;
    z-index: 2500;
}
#phaseBatchDropDown .libPhaseModal.twoPhase table td span.tooltip.tip-top span.nub { top: 39px; }

.libPhaseModal.twoPhase table.table-items tbody tr {border-color: transparent;}
.libPhaseModal.twoPhase table.table-items td i.checkbox {font-size: 20px; margin-left: 0}

.secondary .dropdown .table {width: 200px;}
.secondary .dropdown .table .table-cell {width: 50%;}
.secondary .dropdown .table-cell:first-child {border-right: 1px solid #ccc;}
.secondary .dropdown.left.bottom .dropdown-wrapper {left:-130px;}
.secondary p.info_drop{white-space: normal;font-size: small;text-transform: none;}
.secondary .dropdown.left.bottom .f-dropdown:before, .secondary .dropdown.left.bottom .f-dropdown:after  {left:130px; z-index: 6;}

.search .dropdown .dropdown-wrapper{left:-265px;width:310px;padding: 0;top:35px;}
.search .dropdown .dropdown-wrapper .f-dropdown:before,.search .dropdown .dropdown-wrapper .f-dropdown:after{left:260px;}

.input1 .dropdown .dropdown-wrapper{left:-262px;width:310px;padding: 0;top:-80px;display: block;z-index: 5}
.input1 .dropdown .dropdown-wrapper a{text-transform: none;font-weight: bold;font-size: small}
.input1 .dropdown .dropdown-wrapper .f-dropdown:before,.input1 .dropdown .dropdown-wrapper .f-dropdown:after{left:260px;}
.input1 .panel > div > span {display: block;margin:5px 5px;padding: 3px 5px;float: left;outline: 1px solid #ccc;font-size: 12px;}

.nine .table-items tbody tr td div.dropdown .dropdown-wrapper.image {left:-80px; top:-130px}
.nine .table-items tbody tr td div.dropdown .dropdown-wrapper.image .f-dropdown:before,.nine .table-items tbody tr td div.dropdown .dropdown-wrapper.image .f-dropdown:after {left:60px;}
.nine .table-items .dropdown .dropdown-wrapper .f-dropdown li img{margin:0 auto; width:112px;}
.nine .search .dropdown .dropdown-wrapper .f-dropdown {height:130px; background-color:#fff;}

.search .f-dropdown li:hover, .f-dropdown li:focus, .f-dropdown li.set {background: #fff;color:#000;}
.search .current {font-size: small;}
.search .dropdown .dropdown-wrapper span {display: block;margin:5px 5px;padding: 3px 5px;float: left; font-size: 12px;}

.qLetter {font-family: Time New Roman;font-size: x-large;margin: 0 10px;cursor: pointer;}

.middle .nine .panel .fixed-table-container .fixed-table-container-inner table.table-items tbody td{font-size: small;}
.middle .bottom .row .button {margin: 0 22px 0 0;}

.three .panel > .panel ul.selected {background-color: #fff}

.arrow_right.centered,.arrow_left.centered  {font-size:200%;}
[class^="arrow-"]:after,[class*="arrow-"]:after {font-family: 'ElegantIcons';content: attr(data-icon);speak: none;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.arrow_left.centered.both:before, .arrow_left.centered.both:before {font-size: 30px;}
.arrow_left.centered.both:after {content:"\24";vertical-align:top;font-size:14px; margin-left:-32px;}
.arrow_right.centered.both:after {content:"\23";vertical-align:top;font-size:14px;margin-left:-12px;}

.subjectSelect tr.ui-state-default td i.icon_check, .input1 .unitSelect tr.ui-state-default td i.icon_check ,.multipleEdit .icon_check.checkbox{border-color: transparent; }
.subjectSelect tr.ui-state-default td i.icon_check {font-size: 25px;line-height: 14px;overflow: visible; color: var(--highlighted-text-color);}
.unitSelect > table {width:95%}
.td_icon {width:20px;}
.invisible {opacity:0; filter:alpha(opacity=0);}
.row .row.lib_right {position: relative;}
.listPopupBackground { position:absolute; left:0; top:0; z-index: 3; width: 100%; height:100%; overflow: visible; }

.phase_col > span.onedir { margin-top: 5px; }
.phase_col > span {display: block;}
.phase_col .p6phase{height: 10px;}
.phase_col .learned.scnd, .phase_col .p6phase.scnd{margin-top: -11px;margin-bottom: 5px;}
.learned {height: 15px;display: block;margin-left: 25%;position: relative;}
.learned span{height: 18px;display: block;width: 30px;background: var(--icon-p6-list-simple) no-repeat -5px -6px;background-size: 30px;margin-left: -6px;}
.set .learned span {
    background: var(--icon-p6-current) no-repeat -5px -6px;
    background-size: 30px;
}
.grey .learned span {
    opacity: .5;
}
.set.grey .learned span {
    background: var(--icon-p6-list-simple) no-repeat -5px -6px;
    background-size: 30px;
    opacity: .7;
}

/* browse.html */
.browser_page { font-family: inherit }
.browser_page .header p{font-weight: 200; line-height: 28px; font-size: 25px; text-transform: none; color: #333; margin: 30px 0 10px 0; }
.browser_page .text_content,
.browser_page .text_row * { padding: 0 10px; font-size: 12px; text-align: center; color: #333; }
.browser_page .text_content { margin: auto auto 20px; width: 80%; }
.browser_page .browser_names_row * { padding: 0 10px; font-size: 16px; text-align: center; }
.browser_page .browsers { border: none; vertical-align: middle; text-align: center; padding: 10px;  }
.browser_page a.browser_logo { margin: 0 auto; display: table; }
.browser_page a.browser_logo img { width:60px; height:60px; margin: 0 50px; }
.browser_page .nowrapp { white-space: nowrap; }
.wrapper.panel.default_cursor { cursor: default; }

.browser_page .wrapper#platform-desktop {
    min-width: 600px;
}
.browser_page .wrapper#platform-mobile {
    height: 350px;
    min-width: 600px;
}
.browser_page .wrapper#platform-mobile > .browsers td {
    text-align: center;
}
.browser_page .wrapper#platform-mobile > .browsers img {
    height: 60px;
}
.form.custom.login_page.browser_page {
    margin-bottom: 0;
}
.ie6 .browser_page .row.start,
.ie6 .browser_page .row.top,
.ie6 .browser_page .row.start .columns.twelve,
.ie6 .browser_page .footer.row,
.ie7 .browser_page .row.start .columns.twelve {
    background: url(../../img/p6o_background.png);
}
.ie6 .browser_page .wrapper#platform-desktop .logo {
    text-align: center;
}
.ie6 .browser_page .wrapper#platform-desktop .header {
    text-align: center;
    width: 550px;
}
.ie6 .browser_page .wrapper#platform-desktop .browsers,
.ie7 .browser_page .wrapper#platform-desktop .browsers {
    margin-top: 50px;
}
.ie6 .browser_page .wrapper#platform-desktop .text_content {
    width: 550px;
}
.ie6 .browser_page .wrapper#platform-desktop .browsers .browser_names_row .browser_logo {
    color: #007a50;
}

/********************add**********************************/

.input1, .input2 {padding: 0 5px 0 0; height: 100%;}
.input1 { padding-left: 10px;}
.input1 .panel, .input2 .panel {margin-top: 0; margin-bottom: 0; height: 100%;}
.input1 .breadcrumbs {margin-bottom: 0}
.button.default-button.right .icon-file-new {margin-left: 10px;}
.addBtn{
    background: transparent none repeat scroll 0 0;
    height: 40px;
    margin-top: 20px;
    padding: 0 58px 0 71px;
}
.addBtn button , .addBtn ul span li a{
    font-size: 18px;
}
.input1 .input_area.active, .input2 .input_area.active {height:80%}
.title_lib_left.addEdit {top:10px; width: 174px;}
.letters_add {position: absolute; top:3px ;left:2px; font-size:10px;}

.add_icons {
    width:6%;
    margin: 0 auto;
}
.add_icons > div {
    width: 40px;
    margin: 0 auto;
    padding-top: 50px;
}
.add_icons .row.panel {
    padding-left: 0;
    margin-bottom: 0;
    margin-left: 10px;
}
.add_icons .row.panel.abs {
    margin-bottom: 50px;
}
.add_icons .icon_check {
    position: absolute;
    bottom: 0;
    right: -10px;
    font-size:25px;
}
.default_cover {
    position: absolute;
    right: 20px;
    top: 7px;
}
.default_cover i {
    color:#cccccc;
    font-size: 39px;
}

/******************************************* tiny ********************/

.add .input_area h1, .add .input_area h2, .body.add .middle.row .input_area h3, .add .input_area p code {text-transform: none;color:#000000;background: transparent;}
.bottom .row div.secondary img {margin-top: -8px;width: 30px;float:left;}

/************************notification message************************************/
.notificationMessage {
    position: fixed;
    top: 78px;
    min-width: 300px;
    z-index: 100;
    left: 50%;
    transform: translate(-50%, 0);
}
.notificationMessage.overModal {
    z-index: 1100;
}
.notificationMessage span {
    display: block;
    width: auto;
    margin: auto;
    position: relative;
    min-height: 44px;
    padding:5px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 4px;
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0 4px;
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 4px;
}
.notificationMessage p {
    margin: 2px;
    font-size: 15px;
    text-align: center;
    word-wrap: break-word;
}
.notificationMessage span.info {background-color:#FCF28C;}
.notificationMessage span.info , .notificationMessage span.info a {color:black;}
.notificationMessage span.info a:hover {color: #999999;}
.notificationMessage span.error {background-color: #FEB2B2;}
.notificationMessage span.error p {color: red; }
.notificationMessage span .centred { margin-top: 4px; }

/************************************ sidebar *********************************************/

.wrapper_sidebar .sidebar {background-color: #fff; overflow: visible; z-index: 1005; left: -79px;}
.wrapper_sidebar .sidebar .control {display: block;}

/***************************home page version 2 *******************************************/

.sidebar {
    background: transparent none repeat scroll 0 0;
    height: auto;
    left: 10px;
    margin-top: 30px;
    padding: 0;
    position: relative;
    top: 0;
    width: 90px;
    z-index: 1;
    border-bottom-right-radius: .5rem;
    border-top-right-radius: .5rem;
}
.sidebar.barSwitch {
}
.sidebar.barMain {
    margin-top: 10px;
}
.user-premium .premium,
.sidebar .premium {
    text-decoration: underline;
    color: var(--highlighted-text-color);
    cursor: pointer;
}
.sidebar .features {
    height: 74px;
    position: relative;
    width: 100px;
    cursor: pointer;
    border-radius: .5rem;
}
.sidebar.school .features {
    height: 84px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.sidebar .features:hover {
    background: var(--background-sidebar-hover);
}
.sidebar .features i{
    color: var(--sidebar-item-color-normal);
    font-size: 26px;
}
.sidebar .current, .sidebar .current:hover {
    background: var(--background-sidebar-current);
}
.barSwitch.sidebar .current, .barSwitch.sidebar .features.current:hover {
    background: var(--switch-sidebar-current-background-color);
}
.barSwitch.sidebar .features:hover {
    background: var(--background-sidebar-hover);
}
.sidebar .current i {
    color: var(--sidebar-item-color-current);
}
.sidebar .features i.new_func{
    color: red;
    display: block;
    font-size: 12px;
    position: relative;
    top: -36px;
}
.sidebar .features .icon_search-2 {left: 39px;}
.sidebar .features .icon_plus {font-size: 42px;line-height: 29px;margin: 0 0 0 -4px;}
.sidebar .tooltip, .subjects .header .tooltip{ top:-17px; white-space: nowrap; }
.sidebar .tooltip.tip-top {left: 25px;}
.sidebar .forTooltip {
    margin: auto;
    padding-top: 15px;
    text-align: center;
}
.sidebar.school .forTooltip {
    padding-top: 0;
    margin: 0;
}
.sidebar .forTooltipPlus {
    margin: auto;
    padding-top: 13px;
    text-align: center;
}
.sidebar.school .forTooltipPlus {
    margin: 0;
    padding: 0;
}
.sidebar .forTooltipSearch {
    margin: auto;
    width: 23px;
    padding-top: 20px;
}
.sidebar .forTooltipGame {
    margin: auto;
    padding-top: 8px;
    text-align: center;
}
.sidebarImg {
    width: 40px;
}
.sidebarDictionaryImg, .sidebarReportsImg, .sidebarSchoolImg  {
    position: relative;
    right: 3px;
    width: 26px;
    margin: 0 -3px 0 0;
}
.sidebarSchoolImg {
    width: 38px;
}
.sidebar > div .buttName {
    text-align: center;
    color: var(--sidebar-item-text-color-normal);
    margin-bottom: 0;
    font-size: 14px;
    margin-top: 5px;
    font-weight: 100;
}
.sidebar div.current .buttName {
    color: var(--color-sidebar-buttName-current);
}
#addSidebtn .buttName, #gamesSideBtn .buttName {
    margin-top: -3px;
}
#dictionarySideBtn .buttName {
    margin: 0;
}
.subjects .header .tooltip.tip-top  { left: -25%; }
.sidebar .tooltip.tip-top > .nub { left: 16px; top: 25px; }
.subjects .header .tooltip.tip-top > .nub {left:40%}
.shopFreeContentReminder {
    background: var(--content-bar-background);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 55px;
    position: relative;
    margin-top: 5px;
}
.shopFreeContentReminder a {
    color: var(--highlighted-text-color);
    font-size: 25px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.shopFreeContentReminder a:hover, .shopFreeContentReminder > i:hover {
    opacity: .7;
}
.shopFreeContentReminder a i {
    font-size: 35px;
    margin-right: 10px;
}
.shopFreeContentReminder > i {
    position: absolute;
    top: 13px;
    right: 18px;
    font-size: 30px;
    color: var(--color-999-222);
    cursor: pointer;
}
.home .middle_row {position: relative; margin-bottom: 0; padding: 0; background: transparent;}
.home .content.row {position: relative; margin: 0 0 0 100px; overflow-y:auto; overflow-x: hidden; background: transparent;}
.home .content.row > .dashboardContent {
    width: calc(100% - 30px);
}
.home .content.row.dashboard {height: calc(100% - 10px);}
.home h2 {color:#8D8D8D;}
.home .tilesRow .loading {height: 100px;}
.home .subjects-list .loading {height: 300px;}
.welcome {
    background-color: var(--background-color-white-middleDarkGray-white);
    height: 363px;
    margin: 30px 0 0 20px;
    padding: 0;
    border-radius: .5rem;
}
.schoolPanel .welcome {
    margin-top: 8px;
}
.welcome_title {
    color: var(--highlighted-text-color);
    font-size: 30px;
    font-weight: 500;
    margin: 20px 0 0 20px;
    text-transform: none;
}
.welcome_instructions {color:#666; margin-bottom: 25px; margin-left: 20px; font-size: 19px; font-weight: lighter;}
.welcome_title i {font-size: 20px; margin-left: 10px}
.welcome_title.complete, .welcome_instructions.complete {color:#349576; opacity: 1;}
.rightBar {
    height: 35px;
    position: absolute;
    right: 30px;
    top: 50px;
    width: auto;
}
.date-bar {
    float: right;
    height: 35px;
    padding: 9px 0;
    width: 130px;
    background: var(--highlighted-background-color);
    z-index: 10;
    border-radius: 0.5rem;
}
.rightBar .date-bar {
    border-radius: .5rem;
}
.date-bar span {
    color: var(--color-white-222);
    float: right;
    font-size: 20px;
    font-weight: 500;
    width: 100%;
    text-align: center;
}
.welcome .row {
    padding: 0 20px;
    position: relative;
    overflow-x: hidden;
}
#welcomeBar.welcome .row {
    overflow-x: visible;
    display: flex;
}
#welcomeBar .topBarText {
    height:80px;
}
.mainTeacherLinks {
    width: calc(100% - 20px);
    height: 150px;
    margin-top: 30px;
    margin-left: 20px;
}
.mainTeacherLinks > div {
    display: flex;
    float: left;
    height: 100%;
    width: calc(25% - 15px);
    background: var(--background-color-white-middleDarkGray-white);
    margin-right: 15px;
    border-radius: .7rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    padding: 0 10px;
    position: relative;
}
.mainTeacherLinks .constant .highlighted {
    color: var(--highlighted-text-color);
}
.mainTeacherLinks .constant {
    margin-right: 10px;
    width: calc(25% - 10px);
    background-image: url("../../img/school/teacher-discount-percent-bg.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    background-color: var(--background-d4d4d4-666);
    padding: 0;
    display: block;
    cursor: default;
}
.mainTeacherLinks .constant .upperPiece {
    height: 60%;
    width: 100%;
    display: block;
    border-bottom: 3px dotted var(--border-white-222);
    padding-top: 27px;
}
.mainTeacherLinks .constant .upperPiece p {
    font-size: 26px;
    text-align: center;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
}
.mainTeacherLinks .constant .lowerPiece {
    height: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mainTeacherLinks .constant .lowerPiece.clickable {
    cursor: pointer;
}
.mainTeacherLinks .constant .lowerPiece p {
    color: var(--color-909090-white);
    font-size: 26px;
    font-weight: bold;
    margin: 0;
}
.mainTeacherLinks .constant .lowerPiece p.reqNotMet {
    font-size: 18px;
    cursor: default;
}
.mainTeacherLinks > div:not(.inactive):hover, .mainTeacherLinks > div.current {
    -webkit-box-shadow: 0px 3px 10px 2px rgba(153,153,153,1);
    -moz-box-shadow: 0px 3px 10px 2px rgba(153,153,153,1);
    box-shadow: 0px 3px 10px 2px rgba(153,153,153,1);
}
.mainTeacherLinks > div .llabel {
    color: #999;
    font-size: 18px;
    text-align: center;
    word-break: break-word;
}
.mainTeacherLinks > div:not(.inactive):hover .llabel, .mainTeacherLinks > div.current .llabel, .mainTeacherLinks > div:not(.inactive):hover i .mainTeacherLinks > div.current i {
    color: var(--highlighted-text-color);
}
.mainTeacherLinks > div.inactive .llabel, .mainTeacherLinks > div.inactive i, .mainTeacherLinks > div.inactive .teacherLinkImg {
    opacity: .4;
}
.mainTeacherLinks > div.inactive .tooltip {
    top: 155px;
    width: 100%;
    left: 0px;
    text-align: center;
}
.mainTeacherLinks > div i {
    font-size: 52px;
    margin-bottom: 10px;
    color: #999;
}
.mainTeacherLinks > div:not(.inactive):hover i, .mainTeacherLinks > div.current i {
    color: var(--highlighted-text-color);
}
.mainTeacherLinks > div .teacherLinkImg {
    margin-bottom: 10px;
}
.mainTeacherLinks div .teacherLinkImg.wordtestImg {
    background: var(--icon-wordtest) no-repeat;
    width: 39px;
    height: 52px;
    background-size: contain;
}
.mainTeacherLinks div:not(.inactive):hover .teacherLinkImg.wordtestImg, .mainTeacherLinks div.current .teacherLinkImg.wordtestImg{
    background: var(--icon-wordtest-active);
}
.mainTeacherLinks div .teacherLinkImg.administrationImg {
    background: var(--icon-administration);
    width: 79px;
    height: 50px;
}
.mainTeacherLinks div:not(.inactive):hover .teacherLinkImg.administrationImg, .mainTeacherLinks div.current .teacherLinkImg.administrationImg {
    background: var(--icon-administration-active);
}
.schoolFrames {
    position: absolute;
    height: calc(100% - 188px);
    left: 20px;
    margin-top: 8px;
    z-index: 1;
    width: calc(100% - 28px);
}
.schoolFrames > div {
    width: 100%;
    height: 0;
    background: white;
    padding: 35px 0 0 10px;
    overflow-y: hidden;
    border-radius: .7rem;
    transition: height linear 0.5s;
}
.schoolFrames > div.opened {
    height: 100%;
}
.schoolFrames > div .icon_close {
    position: absolute;
    right: 5px;
    top: 0;
    font-size: 36px;
    color: #999;
    cursor: pointer;
}
.schoolFrames > div iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.nav-carousel {
    display: block;
    float: left;
    height: 30px;
    left: 540px;
    position: absolute;
    top: -35px;
}
.nav-carousel .control{
    cursor: pointer;
    float: left;
}
.nav-carousel .control i{
    color: var(--highlighted-text-color);
    display: block;
    font-size: 30px;
}
.nav-carousel .control.inactive i, .nav-carousel .control.inactive i:hover {color: var(--color-ccc-999);}
h1.subject-name {
    color: var(--color-666-999);
    font-size: 30px;
    font-weight: 500;
    height: 35px;
    margin: 20px 0 10px 20px;
    overflow: hidden;
    text-transform: none;
    width: 530px;
}
p.last-action {
    color: var(--color-666-999);
    font-size: 19px;
    font-weight: lighter;
    margin: 10px 0 10px 20px;
    width: 490px;
}
p.last-action span {
    color: var(--highlighted-text-color);
}
.main-tile, .main-tile-fake {
    background: transparent;
    float: left;
    height: 245px;
    max-width: 500px;
    min-width: 500px;
    margin-right: 30px;
}
.main-tile .subject-cover {
    float: left;
    height: 240px;
    width: 180px;
    margin-right: 10px;
    border-radius: .5rem;
}
.main-tile-fake .leftTileButton {
    float: left;
    height: 240px;
    width: 180px;
    border: 3px var(--highlighted-border-color) dashed;
    cursor: pointer;
    margin-right: 10px;
    opacity: 0.7;
}
.main-tile-fake .leftTileButton:hover, .right-tiles-fake .leftTileButton:hover, .tiles-parent .right-tiles-fake .leftTileButton:hover {
    opacity: 1;
}
.main-tile-fake .leftTileButton i {
    color: var(--highlighted-text-color);
    display: block;
    font-size: 60px;
    left: 65px;
    position: relative;
    top: 60px;
    width: 0;
}
.main-tile-fake .leftTileButton p {
    color: var(--highlighted-text-color);
    font-size: 16px;
    margin: auto;
    position: relative;
    text-align: center;
    top: 70px;
    width: 120px;
}
.right-tiles-fake {
    background-color: var(--background-color-white-middleDarkGray);
    float: left;
    height: 240px;
    width: calc(100% - 530px);
}
.tiles-parent .right-tiles-fake {
    width: 180px;
}
.right-tiles-fake .leftTileButton {
    border: 3px dashed var(--border-999-666);
    cursor: pointer;
    float: left;
    height: 240px;
    margin-right: 10px;
    width: 180px;
    background: var(--background-color-gray-darkestGray);
    border-radius: .5rem;
    color: #999;
}
.right-tiles-fake .leftTileButton i {
    display: block;
    font-size: 60px;
    left: 55px;
    position: relative;
    top: 60px;
    width: 0;
}
.right-tiles-fake .leftTileButton:hover {
    color: var(--highlighted-text-color);
    border-color: var(--highlighted-border-color);
}
.right-tiles-fake .leftTileButton p {
    font-size: 16px;
    margin: auto;
    position: relative;
    text-align: center;
    top: 70px;
    width: 120px;
}
.right-tiles-fake .grey-mask {
    height: 240px;
    width: 100%;
    background: var(--image-subject-cover) repeat-x;
}

.welcome .tiles {
    width: 180px;
    height: 240px;
    float: left;
    position: relative;
    background: var(--background-color-white-darkestGray);
    margin: 0 9px 0 0;
    cursor: pointer;
    -webkit-transition: all 0.35s ease-out;
    -moz-transition: all 0.35s ease-out;
    -o-transition: all 0.35s ease-out;
    transition: all 0.35s ease-out;
    border-radius: .5rem;
}
.welcome .tiles.none-display {
    opacity: 0.2;
}
.main-tile .tiles {
    width: 100%;
    height: 240px;
    background-color: var(--background-color-white-darkestGray);
    float: left;
    position: relative;
    margin: 0 9px 0 0;
    cursor:default;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
.welcome .tiles:hover {box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.25)}
.main-tile .tiles:hover {box-shadow: none;}
.tile-info, .tile-info-fake {
    float:left;
    width: auto;
    cursor: default;
}
.tile-info .primary-action, .tile-info-fake .primary-action-fake {
    float: left;
    height: 137px;
    margin-bottom: 7px;
    width: 145px;
    background: var(--background-color-gray-darkestGray);
    border-radius: .5rem;
}
.tile-info .primary-action.active, .tile-info .primary-action.priority, .tile-info .primary-action.tabPriority, .tile-info .secondary-action.active, .tile-info .primary-action.learn-more {
    cursor: pointer;
}
.tile-info .primary-action.active:hover, .tile-info .primary-action.priority:hover, .tile-info .primary-action.tabPriority:hover, .tile-info .secondary-action.active:hover, .tile-info .primary-action.learn-more:hover {
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.15);
}
.tile-info .primary-action.priority, .tile-info .secondary-action.priority, .tile-info .primary-action.tabPriority, .tile-info .secondary-action.tabPriority {
    background: var(--highlighted-background-color);
}
.tile-info .primary-action.learn-more {
    background: #999;
}
.tile-info .primary-action.learn-more.tabPriority {
    background: var(--highlighted-background-color);
}
.tile-info .primary-action > i {
    display: block;
    font-size: 36px;
    margin: 24px auto 0;
    width: 42px;
    color: var(--color-ccc-222);
}
.tile-info .primary-action.active > i, .tile-info .primary-action.active > p, .tile-info .secondary-action.active > i,
.tile-info .secondary-action.active > p{
    color: #999;
}
.tile-info .primary-action.priority > i, .tile-info .primary-action.priority > p, .tile-info .secondary-action.priority > i,
.tile-info .secondary-action.priority > p, .tile-info .primary-action.tabPriority > i, .tile-info .primary-action.tabPriority > p, .tile-info .secondary-action.tabPriority > i,
.tile-info .secondary-action.tabPriority > p, .tile-info .primary-action.learn-more > p{
    color: var(--color-white-222);
}
.tile-info-fake .primary-action-fake:first-of-type, .tile-info .primary-action:first-of-type {
    margin-right: 10px;
}
.tile-info .primary-action > p, .tile-info-fake .primary-action-fake > p {
    color: var(--color-ccc-666);
    margin: 5px auto auto;
    text-align: center;
    width: 120px;
}
.tile-info .primary-action p.number, .tile-info-fake .primary-action-fake p.number {
    font-size: 20px;
}
.tile-info .primary-action p.thinner {
    width: 95px;
}
.tile-info .primary-action img, .tile-info-fake .primary-action-fake img {
    display: block;
    margin: 20px auto auto;
    width: 45px;
}
.tile-info .primary-action img.smaller, .tile-info-fake .primary-action-fake img.smaller {
    width: 35px;
}
.tile-info-fake .secondary-action-fake, .tile-info .secondary-action {
    clear: both;
    height: 45px;
    width: 100%;
    background: var(--background-color-gray-darkestGray);
    margin-top: 7px;
    border-radius: .5rem;
}
.tile-info-fake .secondary-action-fake i, .tile-info .secondary-action i {
    float: left;
    color: var(--color-ccc-666);
    font-size: 18px;
    margin: 13px 10px 10px 15px;
}
.tile-info .secondary-action img {
    float: left;
    width: 20px;
    margin: 13px 20px 10px 15px;
}
.tile-info-fake .secondary-action-fake p, .tile-info .secondary-action p{
    color: var(--color-ccc-666);
    float: left;
    font-size: 18px;
    margin: 14px auto;
    max-width: 255px;
    min-width: 205px;
    text-align: center;
    text-transform: uppercase;
    width: auto;
}
.tile-info .secondary-action p.wider {
    width: 100%;
    max-width: 100%;
}
.tile-info .secondary-action.gtc .tooltip {
    bottom: -24px;
}
.tooltip.wordtest {
    width: 300px;
    text-align: center;
    left: 210px;
    top: 245px;
    font-size: 14px;
}
.today-tomorrow {
    padding: 0 10px 10px 10px;
}
.should-today, .should-today-inactive{
    background: var(--background-color-gray-middleDarkGray) none repeat scroll 0 0;
    color: darkOrange;
    float: left;
    width: 47.5%;
}
.should-today:hover {
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
.should-today p, .should-tomorrow p, .should-today-inactive p{
    font-size: 18px;
    text-align: center;
    width: 100%;
    margin-top: 15px;
}
.should-today .counterCards, .should-tomorrow .counterCards, .should-today-inactive .counterCards{
    font-size: 25px;
}
.should-tomorrow {
    width: 47.5%;
    float: left;
    background: var(--background-color-gray-middleDarkGray) none repeat scroll 0 0;
    color: #646464;
    margin-left: 10px;
}
.active-inactive-all {
    padding: 0 8px 10px;
}
.active-users, .inactive-users, .all-users {
    background: var(--background-color-gray-middleDarkGray) none repeat scroll 0 0;
    color: #646464;
    float: left;
    width: 32%;
}
.inactive-users, .all-users {
    margin-left: 4px;
}
.active-users p, .inactive-users p, .all-users p {
    font-size: 15px;
    text-align: center;
    width: 100%;
    margin-top: 15px;
}
.active-users p.tooltip-title, .inactive-users p.tooltip-title, .all-users p.tooltip-title {
    text-transform: uppercase;
    margin-bottom: 15px;
}
.active-users .counterUsers {
    font-size: 25px;
    margin-top: 20px;
    color: #007A50;
}
.inactive-users .counterUsers {
    font-size: 25px;
    margin-top: 20px;
    color: #CD002B;
}
.last-activated-unit {
    background: var(--background-color-gray-middleDarkGray) none repeat scroll 0 0;
    color: white;
    left: 19px;
    position: absolute;
    top: 0;
    width: 182px;
    z-index: 150;
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.15);
    border-radius: .5rem;
}
.group-users-list {
    background: var(--background-color-gray-middleDarkGray) none repeat scroll 0 0;
    color: white;
    left: 519px;
    position: absolute;
    top: 0;
    width: 211px;
    z-index: 150;
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.15);
    border-radius: .5rem;
}
.group-users-list p, .last-activated-unit p {
    margin: 5px auto;
    text-align: center;
    width: 200px;
}
.last-activated-unit p {
    width: 182px;
}
.group-users-list p.inactive, .last-activated-unit p.inactive {
    color: #999;
}
.action-buttons {
    color: #999999;
    float: right;
    margin: 0 10px 0 0;
    width: 20px;
}
.action-buttons a i{
    font-size: 20px;
    color: #999;
}
.action-buttons a i:hover {
    cursor: pointer;
    color: var(--highlighted-text-color);
}
.action-buttons a i.disabled:hover {
    cursor: default;
    color: #999;
}
.action-buttons a:first-child {
    position: relative;
    top: 25px;
    right: -1px;
}
.action-buttons a:last-child {
    position: relative;
    top: 40px;
    right: -3px;
}
.tiles table {border-spacing:0; margin: 0; padding: 0; border: 0}
.tiles table tbody tr td {padding: 0; height: 86px;}
.tiles table td.name {padding-left: 10px;}
.tiles.activate table tbody tr td.name {text-align: right;}
.tiles table tbody tr td.icon_subj {text-align: left; width: 24%;}
.tiles.activate table tbody tr td {vertical-align: middle}
.tiles img {
    float: left;
    height: 240px;
    margin: 0;
    width: 180px;
    border-radius: .5rem;
}
.tiles .create-group-image {
    width: 100%;
    border-radius: .5rem;
}
.tiles.create-group:hover {
    opacity: 0.7;
}
.tiles.create-group {
    cursor: pointer;
}
.createGroup {
    color: var(--highlighted-text-color);
    font-size: 20px;
    font-weight: normal;
    left: 90px;
    position: absolute;
    top: 105px;
}
.userTileBar {
    width: 180px;
    background: var(--background-999-222);
    position: relative;
    top: 196px;
    left: 0;
    text-align: center;
    cursor: pointer;
}
.userTileBar.wider {
    width: 369px;
}
.userTileBar p {
    color: var(--color-white-999);
    display: block;
    height: 44px;
    margin: auto;
    position: absolute;
    top: 0;
    width: 180px;
    background: var(--background-999-222);
    font-size: 18px;
    padding: 13px 0;
    border-bottom-right-radius: .5rem;
    border-bottom-left-radius: .5rem;
}
.userTileBar.wider p {
    width: 369px;
}
.userTileBar.group p {
    background: #C09668;
    color: var(--color-white-222);
}
.userTileBar p span {
    position: absolute;
    right: 10px;
}
.userTileBar p.mainGroupTileUserName {
    background: var(--highlighted-background-color);
    cursor: pointer;
    color: var(--color-white-222);
}
.userTileBar i {
    color: white;
    font-size: 18px;
    position: absolute;
    right: 13px;
    top: 14px;
}
.userTileBar.group p {
    text-align: center;
}
.userTileBar.group.first p {
    background: var(--highlighted-text-color);
}
.tileUsers {
    height: auto;
    list-style: none;
    margin: 0;
    position: absolute;
    top: 240px;
    width: 180px;
    z-index: 150;
}
.tileUsers li {
    width: 180px;
    display: block;
    height: 44px;
    background: #999;
    color: white;
    text-align: center;
    border-bottom: 1px solid white;
    cursor: pointer;
}
.tileUsers li:first-of-type {
    border-top: 1px solid white;
}
.tileUsers li:hover {
    background: #CCC;
}
.tileUsers li p {
    font-size: 18px;
    margin: 0;
    padding: 8px 0;
}
.coverForGroupTiles .groupCircle {
    background: var(--background-color-white-darkestGray);
    border-radius: 25px;
    border: 2px solid var(--border-white-222);
    height: 50px;
    left: calc(50% - 29px);
    position: relative;
    top: 20px;
    width: 50px;
    cursor: pointer;
}
.coverForGroupTiles .groupCircle:hover {
    border-color: var(--highlighted-border-color);
}
.coverForGroupTiles .groupCircle i {
    position: absolute;
    font-size: 22px;
    color: var(--highlighted-text-color);
    left: calc(50% - 12px);
    top: 12px;
}
.tiles h2 {font-size: 20px; font-weight: 400; text-transform: none; margin-bottom: 0;}
.tiles h2.subj_name {font-size: 19px; text-overflow: ellipsis; overflow: hidden; width: 190px; white-space: nowrap; line-height: 19px; float: left; margin-top: 9px;}
.tiles h2.subj_name .smart_name, .list_container .smart_name {width: 82%;display: block;overflow: hidden; text-overflow: ellipsis;}

.tiles h2.learn, .tiles.subject h2.practice {text-transform: uppercase; opacity: 1; padding-top: 40px;}
h2.learn {color:#999;}
h2.practice, .practice_session i{color: var(--highlighted-text-color);}
.content.row  h2 i {margin-left: 5px; font-size: 18px; cursor: pointer; line-height: 14px;}
.content.row  h2 i.icon_menu {
    font-size: 27px;
    border: 1px solid transparent;
    position: relative;
    top: 3px;
}
.content.row  h2.dropdown i.icon_menu:hover {color: var(--highlighted-text-color); border: 1px solid var(--highlighted-border-color); border-radius: .5rem;}
.content.row .six .twelve .two h2 i {font-size: 30px; line-height: 22px;}
.tile_image {overflow: hidden; border-radius: .5rem;}

.tiles.activate h2 {font-size: 23px; font-weight: 300; text-transform: uppercase; position: relative; margin: 34px 0 0 0;}
.tiles.activate span.icon_subj.bl-inline > span {
    font-size: 23px;
    font-weight: 300;
    text-transform: uppercase;
    position: relative;
    margin: 34px 0 0 0;
    color: #8D8D8D;
}
.tiles.activate > div.name > div > h2 { width: 290px; text-align: center; font-size: 20px; }
.tiles.subject > div.name { max-width: 190px; float: left; }
#actionBar > .jcarousel > div > .tiles-parent > .tiles > .tile_image { float: left; }

.tiles.activate h2 i,
.tiles.activate span.icon_subj.bl-inline > span > i {font-size: 20px; cursor:pointer; }
.tiles.activate span.icon_subj.bl-inline > span > i.icon_cart { color: #FA7A00; }
.tiles.activate span.icon_subj.bl-inline > span > i.icon_plus { font-size: 32px; top: 6px; }

.home .content.row .subjects a.dropdown-toggle {
    color: var(--color-666-999);
    display: block;
    width: 100%;
    height: 100%;
    padding: 34px 13px;
}
.home .content.row .side-nav .activate i.plus {margin-top: -12px; margin-left: 103px; font-size: 41px;}
.home .content.row .two > i.plus {margin-top: 5px}
.activate.shop h2 {color: var(--highlighted-text-color); opacity: 1}

.subjects {position: relative; margin: 0; padding: 0;}
.subjects .header h2 {margin:20px; font-size: 23px; font-weight: 400; color:#666; text-transform: none; position: relative}
.subjects .header.absolute {position: absolute; height: 70px; left:0; top:0; border-bottom: 1px solid #cccccc; z-index: 91; padding-top: 6px;}
.subjects .header.fixed {position: fixed; height: 70px; left:100px; top:115px; border-bottom: 1px solid #cccccc; z-index: 91; padding-top: 6px; background: #fff; padding-right: 100px}

.item-filter {border:1px solid #ccc; padding: 5px;margin-top: -7px; width: 235px; float: right; cursor: pointer; margin-left: 20px;}
.item-filter:hover, .open .item-filter {border-color:#349576; color:#349576}
.content.row h2 .item-filter i.selector, .time-filter i.selector{font-size:25px; float: right;line-height: 17px;font-weight: 200;color: #666;}
.time-filter:hover *, .item-filter:hover *, .open .item-filter *, .content.row h2 .item-filter:hover i.selector, .content.row h2 .open i.selector {color: var(--highlighted-text-color);}
.feedback .f-dropdown :first-child:hover span {color: inherit;}
.filters-container {
    position: absolute;
    top: 130%;
    right:15px;
    width:235px;
    display:none;
    border-radius: .5rem;
}
.filters-container li {
    font-size: 14px;
    margin: 5px 0;
}
.filters-container.f-dropdown:before {top:-18px; border-color: transparent transparent #cccccc; left: 208px;border-width: 9px;}
.filters-container.f-dropdown:after {left: 207px;border-width: 10px; top: -18px;z-index: 99;}

.panel.confirmation {
    line-height: 26px;
    margin-bottom: 0;
}

.subject-menu {
    position: absolute;
    left: -92px;
    display: none;
    z-index: 1010;
    border-radius: .5rem;
}

.home .content.row .subject-menu i.icon_plus {position: absolute; top:9px; right: 3px; font-size: 24px;}
.home .content.row .subject-menu i.icon_book_alt {position: absolute; top:9px; right:3px}
.home .content.row .subject-menu i.icon_trash_alt {position: absolute; top:9px; right:7px; font-size: 16px;}
.home .content.row .subject-menu i.icon_documents_alt {position: absolute; top: 9px; right: 4px;}
.home .content.row .subject-menu i.icon_cart {position: absolute; top: 8px; right: 4px;}
.home .content.row .subject-menu i.icon_datareport, .home .content.row .subject-menu i.icon_tools, .home .content.row .subject-menu i.icon_lock-open {position: absolute; top: 8px; right: 4px;}
.home .content.row .subject-menu i.icon_pencil-edit, .home .content.row .subject-menu i.icon_refresh {position: absolute; right: 7px;top: 9px;}
.down-menu .subject-menu { top: 80%; background: var(--background-color-white-darkestGray);}
.up-menu .subject-menu { bottom: 80%; }
.up-menu .subject-menu.f-dropdown:before {top: 100.5%; border-color: var(--border-ccc-222) transparent transparent ;}
.up-menu .subject-menu.f-dropdown:after {top: 100%; border-color: var(--border-white-222) transparent transparent ;}

.open > .dropdown-menu {display: block;}
.subject-menu.f-dropdown:before {
    left:57%;
}
.subject-menu.f-dropdown:after {
    left:57%;
    border-width: 10px;
    top: -19px;
}
.subject-menu i, .user-menu i{float: right; margin-right: 0}
.list-shell.form.custom .subject-menu.premium { left: -126px; }
.list-shell.form.custom .subject-menu li { background: var(--background-color-white-darkestGray); border-bottom: 0px; padding: 0.5em; text-transform: none; width: 180px; line-height: 1.2em; font-size: 15px;}
.list-shell.form.custom .subject-menu li.noPointer {cursor: auto;}
.list-shell.form.custom .subject-menu li .disabled {color: rgb(141, 141, 141); cursor: auto;}
.list-shell.form.custom .subject-menu li:hover, .user-menu li:hover {background: transparent;}
.list-shell.form.custom .subject-menu.premium li {
    width: 220px;
}
.list-shell.form.custom .subject-menu.premium li span.tip {
    font-size: 10px;
    color: var(--highlighted-text-color);
    top: 0;
    position: absolute;
    padding-left: 5px;
    cursor: pointer;
}
.homeSubjectList li:first-child {
    border-top-left-radius: .5rem;
}
.homeSubjectList li:last-child {
    border-bottom-left-radius: .5rem;
}
.subjects .header .icon_plus {font-size: 30px; line-height: 16px; margin-top: 7px;}
.subjects .list-shell {margin-bottom: 0}
.subjects .list-shell.list-shell-visible {
    overflow: visible;
    background: transparent;
    padding-bottom: 10px;
}
.subjects .list-shell.form.custom li.practice{overflow: visible; color: var(--highlighted-text-color); cursor: pointer;}

.subjects .list-shell.form.custom li *.noCursor {
    cursor: default;
}
.subjects .list-shell.form.custom li.learn{color:#349576;}
.subjects ul.side-nav {
    left: 20px;
    padding-top: 0;
    padding-bottom: 0;
}
.homeSubjectList {
    width: calc(100% - 30px);
}
.subjects ul.side-nav.detailList {
    height: calc(100% - 70px);
    overflow: auto;
}
.subjects ul.side-nav .column.six {padding-bottom: 16px}
.subjects .subject-image {float: left; padding-top: 5px; padding-right: 15px; padding-left: 17px; width: 92px; overflow: hidden;}
.subjects p {
    padding-top: 20px;
    float: left;
    font-size: 18px;
    font-weight: 400;
    text-transform: none;
    width: 70%;
    position: relative;
    text-overflow: ellipsis;
    line-height: 1.1;
    margin-bottom: 0;
    margin-top: 14px;
    font-style: normal;
}
.homeSubjectList .itemDetail {
    display: block;
    float: left;
    font-size: 14px;
    color: #DB4215;
    margin-top: auto;
    width: 70%;
}
.subjects p .subj_list_in { white-space: nowrap; width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; }
.subjects h2.activate, .subjects p {color:#8D8D8D; }
.subjects p span {color: var(--color-666-999)}

.subjects h3 {
    padding-top: 20px;
    float: left;
    font-size: 18px;
    font-weight: 400;
    text-transform: none;
    width: 70%;
    position: relative;
    text-overflow: ellipsis;
    line-height: 1.1;
}
.subjects h3 .subj_list_in { white-space: nowrap; width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; }
.subjects h3 {color:#8D8D8D; }
.subjects h3 span {color: var(--color-666-999)}

.home .subjects .card_count {width: 150px; float: right; margin-right: 40px;}
.subjects .card_count .columns {text-align: center; padding-right: 0}
.home .subjects .card_count .columns {width: 50px;}
.subjects .card_count .columns.to-activate, .subjects .card_count .columns.due-card {border-right: 1px solid var(--border-ccc-666);}

.reports .subjects .totalCards {text-align: center; line-height: 1.1; margin-top: 19px;}
.reports .subjects .total {text-align: center;}
.reports .subjects .last_practiced { width: 50%; text-align: center;}
.reports .subjects .last_practiced_arrow {
    position: absolute;
    right: 0;
    bottom: 5px;
}
.subjects .subject_actions { float: left; width: 100%; max-width: 400px;}
.subjects .subject_actions > div:first-child { width: 60%;}
.subjects .subject_actions .columns {padding: 0;}
.subjects .subject_actions .columns:last-child { margin-right: 25px; }
.subjects .subject_actions  h2 {margin:34px 0; font-size: 18px; font-weight: 400;  text-transform: uppercase; text-align: left; white-space: nowrap; cursor: pointer;}
.subjects .subject_actions  h2.dropdown {
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    margin: 0;
    height: 87px;
    width: 65px;
}
.subjects .subject_actions  h2 span.next-practice {text-transform: none; color: #2D8E6C}
body.darkTheme .subjects .subject_actions  h2 span.next-practice {color: #666;}
.subjects .subject_actions .subject-count {padding-left: 25px;}

/* subjects tooltips */
.subjects h3 div.to-activate span.tooltip.tip-top { width: 95px; top: -35px; left: -27px; }
.subjects h3 div.due-card span.tooltip.tip-top { width: 110px; top: -35px; left: -35px; }
.subjects h3 div.over-due span.tooltip.tip-top { width: 165px; top: -35px; left: -100px; }
.subjects h3 div.over-due span.tooltip.tip-top > .nub { left: 73%; }

.de .subjects h3 div.to-activate span.tooltip.tip-top { width: 125px; top: -35px; left: -42px; }
.de .subjects h3 div.due-card span.tooltip.tip-top { width: 110px; top: -35px; left: -35px; }
.de .subjects h3 div.over-due span.tooltip.tip-top { width: 205px; top: -35px; left: -140px; }
.de .subjects h3 div.over-due span.tooltip.tip-top > .nub { left: 78%; }

.subjects .card_count .tooltip,
.subjects .subject_actions .tooltip {
    color: white;
    font-weight: bold;
    font-size: 12px;
    padding: 5px;
    text-transform: none;
}
.subjects .subject_actions span.tooltip.tip-top { top: -10px; left: -12px; }
.subjects .subject_actions span.tooltip.tip-top > .nub,
.subjects .subject_actions span.tooltip.tip-centered-top > .nub { padding: 0; margin: 0; left: 45%; }
.subjects .subject_actions h2.open .tooltip { display: none; opacity: 0; }
.subjects .subject_actions h2 span.tip {
    font-size: 10px;
    color: var(--highlighted-text-color);
    top: -13px;
    position: relative;
    padding-left: 2px;
    text-transform: lowercase;
}
.subjects .subject_actions h2 i.disabled {cursor: auto;}

.unfiltered, .filtered {
    color: var(--color-666-999-white);
    font-size: 1.4em;
    padding: 20px 0 20px 20px;
    background: transparent;
}
.home h2.noMachChosenFilter {text-align: center; font-size: 18px; color: #000;}
.subj_name .new {display: inline-block;}

.reports .subjects .list-shell.form.custom li.practice {
    color: var(--color-666-999);
    min-height: 70px;
    padding-left: 0;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    background: var(--background-color-white-middleDarkGray);
}
.reports .subjects .list-shell.form.custom li.make100 {min-height:100px; padding: 10px 5px 0 5px; border-radius: .5rem;}
.reports .subjects p { padding-top: 16px; padding-left: 10px; }
.reports .subjects .list-shell.form.custom li.make100 .counters {
    padding-top: 28px;
}

.tooltip.underModalZIndex {z-index: 9;}
.unitPlaceholder {font-style: italic; color: #ccc;}

.noData {
    display: inline-block;
    text-align: center;
    font-weight: 400;
    color: var(--color-444-999);
    text-transform: none;
    width: 100%;
    margin-top: 50px;
}
body.dark .noData {
    color: #999;
}
body.light .noData {
    color: #444;
}
.report-phases .pie_wrapper.noTooltip .noData {
    margin-right: 0;
}

/****New reports concept****/
.reports-right .classroomMain {
    height: calc(100% - 50px);
    width: 100%;
    background: var(--background-color-white-middleDarkGray);
    border-radius: .7rem;
    padding: 40px 0 0 0;
}
.reports-right .topClassroomInfo {
    padding: 10px 30px 0 40px;
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
    height: 70px;
}
.reports-right .topClassroomInfo p {
    font-size: 22px;
    color: var(--color-666-999);
}
.reports-right .topClassroomInfo > p {
    width: calc(100% - 360px);
}
.reports-right .topClassroomInfo .activityInfoBlock {
    width: 360px;
    position: relative;
    bottom: 10px;
}
.reports-right .topClassroomInfo .activityInfoBlock .infoPiece {
    min-height: 60px;
    width: 90px;
    float:left;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.reports-right .topClassroomInfo .activityInfoBlock .infoPiece.labelPiece {
    justify-content: flex-end;
}
.reports-right .topClassroomInfo .activityInfoBlock .infoPiece .icon_check_alt2 {
    color: #48920E;
}
.reports-right .topClassroomInfo .activityInfoBlock .infoPiece .icon_error-circle_alt {
    color: #FFC600;
}
.reports-right .topClassroomInfo .activityInfoBlock .infoPiece .icon_close_alt2 {
    color: #EB4100;
}
.reports-right .topClassroomInfo .activityInfoBlock .infoPiece span {
    font-size: 20px;
    color: var(--color-666-999);
}
.reports-right .topClassroomInfo .activityInfoBlock .infoPiece i {
    font-size: 32px;
    margin-bottom:10px;
}
.reports-right .classroomMain .groupReportsNavigation {
    list-style-type: none;
    margin-bottom: 0;
    border-bottom: 3px solid var(--background-color-gray-darkestGray);
    padding-left: 25px;
    display: flex;
    max-height: 41px;
}
.reports-right .classroomMain .groupReportsNavigation li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    padding: 0 30px 10px;
    font-size: 18px;
    color: #999;
    cursor: pointer;
}
.reports-right .classroomMain .groupReportsNavigation li.current {
    color: var(--highlighted-text-color);
    border-bottom: 3px solid var(--highlighted-border-color);
    margin-bottom: -3px;
}
.reports-right .classroomMain .heightAdjust {
    height: calc(100% - 125px);
}
.reports-right .classroomMain .infoList {
    list-style-type: none;
    margin: 0;
    border-bottom: 1px solid var(--background-color-gray-darkestGray);
}
.reports-right .classroomMain .infoList:first-child {
    display: flex;
    align-items: center;
    max-height: 71px;
}
.reports-right .classroomMain .infoList:last-of-type {
    height: calc(100% - 70px);
    overflow-y: auto;
    border-bottom: none;
}
.reports-right .classroomMain .infoList li {
    font-size: 18px;
    text-align: left;
    width: 100%;
    color: var(--color-666-999);
    border-bottom: 1px solid var(--background-color-gray-darkestGray);
    display: flex;
    min-height: 60px;
    align-items: center;
}
.reports-right .classroomMain .infoList li.topping {
    display: inline-block;
    font-weight: bold;
    width: calc(50% - 5px);
    border-bottom: none;
    padding: 20px 0 20px 40px;
}
.reports-right .classroomMain .infoList li.topping:last-child {
    width: 15%;
    text-align: center;
}
.reports-right .classroomMain .infoList li > span {
    display: flex;
    width: 50%;
    text-align: left;
    padding-left: 40px;
    word-break: break-all;
}
.reports-right .classroomMain .infoList li span.forTip {
    display: flex;
    align-items: center;
    width: 40px;
    position: relative;
}
.reports-right .classroomMain .infoList li > span:last-of-type {
    width: 15%;
    justify-content: center;
}
.reports-right .classroomMain .infoList li > span i {
    font-size: 24px;
    cursor: pointer;
}
.reports-right .classroomMain .infoList li > span i.icon_check_alt2 {
    color: #48920E;
}
.reports-right .classroomMain .infoList li > span i.icon_error-circle_alt {
    color: #FFC600;
}
.reports-right .classroomMain .infoList li > span i.icon_close_alt2 {
    color: #EB4100;
}
.reports-right .classroomMain .infoList li > span i.icon_error-triangle_alt {
    color: #999;
    margin-left: 10px;
}
.reports-right .tooltip.tip-right > .nub {
    top: calc(50% - 5px);
    border-color: transparent rgba(102, 102, 102, 1) transparent transparent;
}
.reports-right .tooltip.tip-left > .nub {
    border-color: transparent transparent transparent rgba(102, 102, 102, 1);
    top: calc(50% - 5px);
}
.reports-right .tooltip.reportTipPremium {
    width: 330px;
    left: 50px;
}
.reports-right .tooltip.reportTipIcon {
    width: 160px;
    left: 35px;
    text-align: center;
}
.reports-right .topClassroomInfo .activityInfoBlock .infoPiece span.tooltip {
    display: flex;
    width: 140px;
    right: 70px;
    color: white;
    font-size: 12px;
}
.reports-right .classroomMain .infoList li button.showReport {
    width: 17%;
    margin-left: 15%;
    background: var(--background-f7f7f7-363636);
    color: var(--color-666-222);
    text-transform: none;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 33px;
    overflow: hidden;
}
.reports-right .classroomMain.activityStandalone .heightAdjust,
.reports-right .classroomMain.phasesStandalone .heightAdjust,
.reports-right .classroomMain.difficultStandalone .heightAdjust {
    height: calc(100% - 125px);
}
.reports-right .classroomMain.activityStandalone .infoList:last-of-type,
.reports-right .classroomMain.phasesStandalone .infoList:last-of-type {
    height: calc(100% - 70px);
    overflow-y: auto;
}
.reports-right .classroomMain.difficultStandalone .infoList:last-of-type {
    height: calc(100% - 70px);
    overflow-y: auto;
}
.reports-right .classroomMain .infoList.activityStandalone li > span:last-of-type {
    width: 50%;
    justify-content: left;
}
.reports-right .classroomMain .infoList.activityStandalone li.topping:last-child {
    width: 50%;
    text-align: left;
}
.reports-right .classroomMain .infoList.activityStandalone li > span i.icon_close_alt2,
.reports-right .classroomMain .infoList.activityStandalone li > span i.icon_error-circle_alt,
.reports-right .classroomMain .infoList.activityStandalone li > span i.icon_check_alt2{
    margin-right: 10px;
    top: 2px;
    position: relative;
    cursor: default;
}
.reports-right .classroomMain .infoList.activityStandalone li > span.none {
    color: #EB4100;
}
.reports-right .classroomMain .infoList.activityStandalone li > span.few {
    color: #FFC600;
}
.reports-right .classroomMain .infoList.activityStandalone li > span.enough {
    color: #48920E;
}
.reports-right .classroomMain .infoList.phasesStandalone:first-of-type li,
.reports-right .classroomMain .infoList.difficultStandalone:first-of-type li {
    display: inline-block;
    font-weight: bold;
    border-bottom: none;
    padding: 20px 0 20px 40px;
}
.reports-right .classroomMain .infoList.phasesStandalone li > span {
    display: flex;
    justify-content: left;
    padding-left: 40px;
    width: 25%;
}
.reports-right .classroomMain .infoList.phasesStandalone li > span:first-of-type {
    width: 50%;
}
.reports-right .classroomMain .infoList.phasesStandalone li > span:last-of-type {
    justify-content: left;
}
.reports-right .classroomMain .infoList.phasesStandalone .studentName {
    width: calc(50% - 8px);
}
.reports-right .classroomMain .infoList.phasesStandalone .barelyMemorized {
    width: 25%;
}
.reports-right .classroomMain .infoList.phasesStandalone .goodMemorized {
    width: 25%;
}
.reports-right .classroomMain.activityStandalone .topClassroomInfo > p,
.reports-right .classroomMain.phasesStandalone .topClassroomInfo > p,
.reports-right .classroomMain.difficultStandalone .topClassroomInfo > p {
    width: 100%;
}
.reports-right .classroomMain .infoList.difficultStandalone .questionName {
    width: calc(40% - 8px);
}
.reports-right .classroomMain .infoList.difficultStandalone .correctAnswer {
    width: 40%;
}
.reports-right .classroomMain .infoList.difficultStandalone .answeredIncorrectly {
    width: 20%;
    text-align: center;
}
.reports-right .classroomMain .infoList.difficultStandalone li > span {
    display: flex;
    justify-content: left;
    padding-left: 40px;
    width: 40%;
}
.reports-right .classroomMain .infoList.difficultStandalone li > span:first-of-type {
    width: 40%;
}
.reports-right .classroomMain .infoList.difficultStandalone li > span:last-of-type {
    width: 20%;
    justify-content: center;
}
.reportsPage {
    width: calc(100% - 100px);
    float: right;
    background: var(--background-color-gray-darkestGray-none);
    height: calc(100% - 20px);
    margin-top: 30px;
}
.reportsPage .date-bar-reports {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 1;
}
.reportsPage .date-bar-reports span {
    color: var(--color-999-999-white);
    font-size: 14px;
}

/**************************************************** difficult words report *************************/
#difficultWordsContainer {
    padding: 0;
}
#inputControlContainer .report-table,
#difficultWordsContainer .report-table {
    width: 100%;
    table-layout: fixed;
    white-space: nowrap;
    border: none;
    border-spacing: 0;
    border-collapse: collapse;
    overflow-y: auto;
}
#inputControlContainer .report-table th,
#difficultWordsContainer .report-table th {
    color: var(--color-666-999);
    height: 50px;
    padding: 0;
    vertical-align: middle;
}
#inputControlContainer .report-table tr,
#difficultWordsContainer .report-table tr {
    border-bottom: 1px solid var(--border-f2f2f2-222);
    background: var(--background-color-white-middleDarkGray);
}
#inputControlContainer .report-table td,
#difficultWordsContainer .report-table td {
    padding: 9px 0;
    color: var(--color-666-999);
}
#difficultWordsContainer .report-table th:last-child,
#difficultWordsContainer .report-table td:last-child {
    text-align: center;
}
.report-table tr:hover {
    background: #f9f9f9;
}
.report-table thead,
.report-table tbody {
    float: left;
    width: 100%;
    background: var(--background-color-white-middleDarkGray);
}
.report-table tbody {
    overflow: auto;
}
.report-table tr {
    width: 100%;
    display: table;
    text-align: left;
}
.report-table tr th:first-child, .report-table tr td:first-child {
    padding-left: 35px !important;
}
.report-table tr th:last-child, .report-table tr td:last-child {
    padding-right: 15px !important;
}
.report-table thead tr {
    width: 100%;
}
.report-table td i {
    margin-left: 5px;
    vertical-align: middle;
}

/**************************************************** sequences of exercises *************************/

.hints .detailed td > div.hints_progress {width:32px; height:32px; background: #fff; border-radius: 50%;position: relative; float: right; z-index: 9; padding: 0/*; display: none*/}
.hints_progress .circle{width: 32px;height: 32px;}
.hints_progress .wrapper1 {width: 32px; height: 32px; clip: rect(0px, 32px, 32px, 16px);}
.hints_progress .circle.left_hints {clip: rect(0px, 16px, 32px, 0px);border-radius:50%; border: 3px solid var(--highlighted-border-color); transform:rotate(180deg);-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);}
.hints_progress .circle.right_hints {clip: rect(0px, 16px, 32px, 0px);border-radius:50%; border: 3px solid var(--highlighted-border-color);}
.hints_progress .circle.gray_hints {border-radius:50%; border: 3px solid #cccccc; opacity: 0.3;z-index: 998;}
.percent_hint, .f-dropdown p.percent_hint {position: absolute;font-weight: 200;color: var(--highlighted-text-color);text-align: center;font-size: 14px;margin-top: 9px;z-index: 999;top: 0px;width: 100%;}

.feedback .dropdown-menu {right:0;}
.feedback .dropdown-menu ul{list-style: none; float: left; padding: 0 10px}
.feedback .dropdown-menu ul li{width: 258px; height: 50px; position: relative; margin: 5px 0; text-transform: uppercase;}
.feedback .dropdown-menu ul li span {text-transform: none}
.feedback .dropdown-menu ul li .hints_progress {position: absolute; top: 0; right: 0;width: 32px;height: 32px;}

.sequences > .panel {padding-bottom: 0}
.learn_progress {
    width:68px;
    height:68px;
    position:relative;
    background: var(--background-color-white-middleDarkGray);
    border-radius: 50%;
    right: 0;
    top: 5px;
    z-index: 1;
}
.learn_progress .done {
    fill: var(--color-learn-progress-done);
}
.learn_progress .due {
    fill: var(--color-learn-progress-due);
}
.wrapper1 {width: 76px; height: 76px;position: absolute;}
.wrapper1.part {clip: rect(0px, 76px, 76px, 40px);}
.circle {
    width: 76px;
    height: 76px;
    position: absolute;
    z-index: 999;
    border-radius: 50%;
    background-color: #ffffff;
}
.learn_progress .circle {display: none;}
.gray {background: url(../../img/p6-phase-ball-gray.svg) no-repeat center;background-size: contain;opacity: 0.3;z-index: 998;}
.circle.leftside{width: 77px;height: 77px; background: url(../../img/p6-phase-ball.svg) no-repeat center;background-size: contain;transform:rotate(180deg);-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);}
.circle.rightside {background: url(../../img/p6-phase-ball.svg) no-repeat center;background-size: contain;}
.learn_progress .percent {z-index: 9999;position: absolute; width: 100%;}

.circle.mask {background-color: #ffffff; border-radius: 50%;}
.learn_progress .half {clip: rect(0px, 38px, 76px, 0px);}

.circle.left_learn{clip: rect(0px, 38px, 76px, 0px);background: url(../../img/p6-phase-ball-learn.svg) no-repeat center;background-size: contain; }
.circle.right_learn {clip: rect(0px, 38px, 76px, 0px);background: url(../../img/p6-phase-ball-learn.svg) no-repeat center;background-size: contain;}

.percent p {
    text-align: center;
    font-size: 30px;
    color:#349576;
    margin-top: 23px;
}
.learn_status {
    text-align: center;
    font-size: 25px;
    color: #999;
    position: relative;
    top: 20px;
}
.learn_status.icon_pencil-edit {
    font-size: 22px;
    margin-left: -4px;
    padding-bottom: 6px;
}
.learn_status .last_phase_img{height: 82px; margin: -30px 0 0 -7px; z-index: 999; }
.phase1 .percent {display: block;}
.phase1 .circle.left_learn {transform:rotate(180deg);-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);}
.learn_progress.phase1 > svg { margin-top: -45px; display: block; }

.conteiner_scrolled * {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.feedback * {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.seq-highlight {
    font-weight: bold;
}
.seq-A_BAD {
    color: #CE002B;
}
.seq-B_MEDIUM {
    color: #FA7A00;
}
.seq-C_GOOD {
    color: #347695;
}.seq-D_INFO {
     color: #349576;
 }

.examples {
    padding: 0 20px;
    overflow-y: auto;
    height: 100%;
    line-height: 25px;
    text-align: center;
    font-style: italic;
    margin-top: 20px;
}
.examples > span{
    font-size: 1.3em;
    font-weight: 300;
}
.examples > span.boldItalic20 {
    font-style: italic;
    font-weight: bold;
    line-height: 20px;
}
.examples .user_input {
    display: inline-block;
    min-width: 30px;
    height: 27px;
    margin: 0;
    padding: 0 21px 3px 10px;
    outline: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border: 1px solid #349576;
    background: transparent;
    position: relative;
}
.examples .next_input {
    display: inline-block;
    min-width: 40px;
    height: 18px;
    margin-bottom: -4px;
    padding: 0;
    outline: 0;
    border-bottom: 1px solid #000;
}
.examples .user_input.noneditable {
    border-color: transparent;
    min-width: 0;
    padding: 0 0 3px 0;
}
.examples .user_input.noneditable span {
    min-width: 0;
    font-weight: bold;
    font-style: italic;
    color:#349576;
}
.examples .user_input.noneditable i {
    display: none;
}

.examples .user_input span:focus {outline: 0}
.examples .user_input i {position:absolute; right:5px; top:8px; width:0; height: 0; border-width:5px; border-style: solid; border-color: transparent transparent transparent #349576;}
.examples .user_input span {display: inline-block;min-width: 30px;height: 16px;line-height: 20px;background: transparent;position: relative;}
.examples input:disabled {background: #efefef; border: 1px solid #ccc}

.examples .user_input input{webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);}

.examples .entered {color:#349576; text-decoration: underline}

.feedback {overflow-y: auto;overflow-x: hidden; margin-left: 10px;}
.feedback .answer .toper {padding: 20px 20px 10px; width: 100%}
.feedback .answer .your {padding-bottom: 5px; width: 100%}
.feedback .answer .your.starting {border-bottom: 1px solid #cccccc;}

.feedback .answer .toper h2 {color: #3e3e3e; font-weight: 200; font-size: 20px; text-transform: none; margin: 0px}
.feedback .answer .toper .column {padding: 0}
.feedback.scrolled {z-index:98; position: absolute; top:0; left:0; background-color: #fff; height: 101px; width:100%;}
.feedback .buttons {height: 40px;border-top: 2px solid #cccccc;border-bottom: 2px solid #cccccc;padding-top: 7px;padding-bottom: 35px;}
.feedback .answer {position: absolute;  color:#8D8D8D; background-color: #ffffff;}
.right_side .conteiner_scrolled{height: 100%; overflow-y: auto}
.right_side .conteiner_scrolled .feedback:first-child {border:1px solid #cccccc; border-bottom: 0; overflow-y: hidden;}

.feedback .check_list {border:1px solid #cccccc; border-top:0; margin: 0 0 10px;}
.feedback.scrolled .answer {position: absolute;color: #8D8D8D;background-color: #ffffff;margin: 1px 1px 10px 0;z-index: 99;width: 100%;}

.feedback .answer .arrows {position: absolute; top:50%; width: 20px; height: 20px;}
.feedback .answer .arrows i{font-size: 32px; display: block; transform:scaleY(1.3); -ms-transform:scaleY(1.3); -webkit-transform:scaleY(1.3); cursor: pointer}
.feedback .answer .feedback_left {left:0}
.feedback .answer .feedback_right{right:10px}

.feedback .list {position: relative; border: 0px; margin-left: 20px; width: 90%; margin-bottom: 5px}
.feedback .list tr td:first-child {width: 40px}
.feedback table tr td{ vertical-align: middle}
.feedback table tr td span{font-size: 13px;}
.feedback .list tr td.result {font-size: 1.2em;}
.feedback .list tr.info td, .info-color{color: #347695;}
.feedback .list tr.correct td, .up {color:#349576;}
.feedback .list tr.attent td, .same {color:#FA7A00;}
.feedback .list tr.failed td, .less {color:#CE002B;}

.feedback .list tr i {font-size: 25px; float:left; vertical-align: middle}
.hints .detailed .first_letter td {padding: 0; vertical-align: middle}
.first_letter h2 span {border-bottom: 2px dashed #cccccc; width: 100%; display: block; height: 13px;}
.first_letter i {color:#349576; }
.feedback .f-dropdown li {white-space:normal}

.feedback .hints {position: relative; background-color: #363636; padding: 0 5px; margin-top: 10px;}
.feedback.hints_cont  {padding-top: 101px;}

.feedback .hints > .row {padding-top: 5px; padding-bottom: 30px;}
.feedback .hints h2.title_hints {font-size: 20px; font-weight: 200; padding-left: 16px;}
.hints .detailed {margin: 2px 0; background-color: #ffffff}
.hints .detailed table{background: transparent; border: 0px; margin-bottom: 0}
.hints .detailed td {padding: 5px}
.hints .detailed td > div {position:relative; padding-top: 5px; padding-left: 28px;}
.hints .detailed td i.checkbox{position: absolute; top:0; left:0; cursor: pointer}
.hints .set > .icon_check.checkbox {margin-left: 0}
.feedback.hints_cont.scroll {padding-top: 126px;}

.feedback .hints h2 {color: #3e3e3e; font-weight: 200; text-transform: none; font-size: 16px; padding-left: 10px;}
.feedback .hint_image {width: 100px;}
.feedback .hint_image img {width: 100%; padding: 5px; outline: 1px solid #ccc;}
.feedback .answer .column {padding: 15px 20px 10px;}
.feedback .answer .user_answer {color:#000}
.instruction {padding-left: 33px;}
.instruction li {font-size: 14px; font-weight: 200; color:#8D8D8D; margin: 10px 0}
.feedback .answer .gradient{overflow:hidden; width: 190px;height: 18px;background: -moz-linear-gradient( left, #FA7A00, #349576);background: -webkit-linear-gradient( left, #FA7A00, #349576);background: -ms-linear-gradient( left, #FA7A00, #349576 );background: linear-gradient(left, #FA7A00, #349576 );}
.feedback .answer .gradient {color:#ffffff; padding: 0 5px; font-weight: 100; position: relative}
.feedback .answer .gradient span {font-size: 12px; color: #fff}
.feedback .answer .gradient .titles {z-index: 99; position: absolute; width: 190px; height: 18px; top:0; left: 0; padding: 3px}
.answer .gradient .triangle {width:0; height:0; top:0; left:50px; position: absolute; border-style: solid; border-width: 7px; border-color: #ffffff transparent transparent; }
.sequences > .panel, .reports > .panel{position: relative;}
.multy_choise {width:20px; height: 20px; margin: 2px; margin: -3px 0 0 3px}
.multy_choise span {display: block; width:8px; height: 8px; margin: 1px; background-color: #8D8D8D; float:left;}
*:hover > .multy_choise span {background-color: #000000;}

.session_progress { position:relative; bottom:0; left:0; width: 100%; height: 10px; background: #FFFFFF;  padding-left: 18px; }
.session_progress svg { display: block; float: left; }
.finished-seqex .fieldset h3 {text-align: left; font-weight: 200; color:  #349576;margin-left: 20px}
.finished-seqex .next {display: inline-block;float: right;font-size: 29px;line-height: 9px;}
.finished-seqex .reveal-modal-footer i.icon-home{margin-left: 10px}

.star_number {color: #FA7A00;font-size: 14px;position: absolute;bottom: 20px;left: -17px;}

/*****************************************************import*************************************************************************/

.reveal-modal.import { width: 900px; height: 450px; margin-left: -450px; z-index: 99999}
.reveal-modal.import .showAll {font-size: 30px;}
.reveal-modal.import .icon_error-circle_alt {display:block; font-size: 48px; margin: 2px 0 0 37px;}
.reveal-modal.import .reveal-modal-header {padding: 7px 10px;}
.reveal-modal.import .reveal-modal-header h3 {line-height: 24px; padding-left: 14px;}
.reveal-modal.import .reveal-modal-footer .button.third {padding-right: 20px; }
.reveal-modal.import .reveal-modal-footer .button.third i{ position: absolute; top:0; right:0; font-size:1.6em; display:inline-block; }
.reveal-modal.import .reveal-modal-footer .button.secondary i {font-size:1.6em; display:inline-block; position: absolute; left: 0; top: 0;}
.reveal-modal.import .reveal-modal-footer .button.secondary.left {padding-left: 20px;}
/*.reveal-modal.import .reveal-modal-footer .button.secondary {padding-right: 20px}*/
/*.reveal-modal.import .reveal-modal-footer .button.secondary i{ position: absolute;top:1px;right:0;font-size:1.6em; display:inline-block; }*/

.reveal-modal.import .fieldset {position: relative; padding: 10px 0;color:#454545;border-top: 1px solid #ddd;}
.reveal-modal.import h1{color: #616161; line-height: 24px;font-size: 1.5em;}
h1.titled{margin: 15px 20px 10px 35px;}
.reveal-modal.import .fieldset.note {border-top:1px solid transparent;}
.reveal-modal.import .fieldset h1{font-weight: 400; text-transform: none;}
.reveal-modal.import button.help {font-size: 18px;}
.reveal-modal.import ul.side-nav {padding: 16px 0 13px 0;}
.reveal-modal.import ul.tabs {border-bottom: 1px solid #ccc;height: 41px;padding-left: 36px;}
.reveal-modal.import ul.tabs li {padding-left: 30px; margin-left: -4px}
.reveal-modal.import ul.tabs li:first-child {padding-left: 0; margin-left:0}
.reveal-modal.import ul.tabs li a{padding: 0; }
.reveal-modal.import .list-shell .row table {outline: 0; border: none; background: transparent}
.reveal-modal.import .list-shell .row {height: 82px;}
.import .list-shell.form.custom li {border-color:transparent;}
.import .note .atten_text{margin-left: 95px; padding-top: 0px;}
.panel.rect {width: 580px;}
.panel.rect p{font-size: 14px;}
.reveal-modal.import .fieldset.finish{border-bottom: 1px solid transparent;}

.list-shell .row .icon_import {width: 82px; height: 82px;}
.list-shell .row .icon_import div{width: 38px; height: 55px; margin-left:20px;}
.list-shell .row .icon_import .csv { background: url(../../img/p6-csv_grey.svg) 0 0 no-repeat; }
.list-shell .row:hover .icon_import .csv, .reveal-modal.import .one.icon_import .csv { background: url(../../img/p6-csv.svg) 0 0 no-repeat;}
.list-shell .row .icon_import .p6x { background: url(../../img/p6-p6x_grey.svg) 0 0 no-repeat;}
.list-shell .row:hover .icon_import .p6x, .reveal-modal.import .one.icon_import .p6x { background: url(../../img/p6-p6x.svg) 0 0 no-repeat;}
.list-shell .row .icon_import .mdb { background: url(../../img/p6-mdb_grey.svg) 0 0 no-repeat;}
.list-shell .row:hover .icon_import .mdb, .reveal-modal.import .one.icon_import .mdb { background: url(../../img/p6-mdb.svg) 0 0 no-repeat;}
.list-shell .row .icon_import .p6 { background: url(../../img/p6-p6_grey.svg) 0 0 no-repeat;}
.list-shell .row:hover .icon_import .p6, .reveal-modal.import .one.icon_import .p6 { background: url(../../img/p6-p6.svg) 0 0 no-repeat;}
.reveal-modal.import .list-shell.form.custom li:last-child {border-bottom: 0px;}
.list-shell .row .title_import {vertical-align: middle; padding-left: 0; height: 76px;}
.reveal-modal.import .list-shell .row  h3{ font-weight: 200; text-transform: none; margin-bottom: 0; margin-top: 0;}
.reveal-modal.import .list-shell .title_import * {color:#616161;}
.reveal-modal.import .list-shell .title_import .tooltip.tip-top {color:#fff; top: 10px; left: 350px;}
.right_arrow, .left_arrow {width: 70px;}
.right_arrow i, .left_arrow i{ display: none; color:#349576;}
.right_arrow i.arrow_carrot-right, .left_arrow i.arrow_carrot-right {font-size: 47px; margin-top: 2px;}
.right_arrow i.icon_check, .left_arrow i.icon_check {font-size: 30px; margin: 16px 0 0 20px}
.list-shell .row:hover .right_arrow i {display: block;}
.list-shell .row.set .left_arrow i {display: block;}
.list-shell .row .title_import span {font-size: 12px;}
.list-shell .row.set .title_import *, .list-shell .row:hover .title_import * {color:#349576;}

.migrate {height: 400px;}
.reveal-modal.import .panel a{text-decoration: underline;}
.reveal-modal.import .panel p {padding: 0 15px; font-size: 14px;}
.reveal-modal.import .panel.trouble p {padding: 0 10px;}
.one.icon_import {width: 62px; height: 65px;}
.one.icon_import div{width: 38px; height: 55px; margin: 15px 0;}
.reveal-modal.import ol {padding-left: 15px;}
.reveal-modal.import ol li{margin: 3px 0;font-size: 14px;}
.file_limit {color:#999999; font-size: 12px}
.trouble, .reveal-modal.import .hint {background-color: var(--background-color-gray-middleDarkGray);  padding: 10px 21px;}
.trouble {height: 57px;}
.reveal-modal.import .fieldset.trouble.panel {padding-left: 27px;border-color: transparent;}
.reveal-modal.import .hint {height:80px;}
.trouble p, .reveal-modal.import .hint p { font-size: 14px; line-height: 19px;}
.trouble .title, .reveal-modal.import .hint .title {font-size: 18px;}
.finish {height: 270px; border-bottom: 1px solid transparent;}
.imported {height: 400px; border-bottom: 1px solid #cccccc;}
.upload {height: 345px;}
.upload .loadingSubjects {top:-5px;}
.reveal-modal.import .panel {margin-bottom: 0; padding: 10px 20px;}
.file {margin-top: 5px; border: 1px solid var(--border-white-666); padding: 5px; position: relative;height: 37px; width: 760px;}
.file:hover {border: 1px solid #cccccc;}
.upload_progress {color:#349576; margin-top: 5px; padding: 5px; position: relative; width: 600px;}
.upload_progress.complite {margin-top: 15px;}

.upload_progress .time {position: relative;height: 20px; width: 600px; margin-left: 5px; }
.upload_progress .time p{padding-left: 0; margin-left: 0}
.upload_progress .time.prg {padding-left: 30px;}
.upload_progress .time p {font-size: 17px; line-height: 16px;}
.upload_progress .time p > span{display: block; float: left; margin-right:10px; padding-top: 6px;}
.upload_progress .progress {float: left;position: relative; height: 15px; width: 450px; margin: 4px 10px 0 10px; border:1px solid #349576; padding: 0;}
.upload_progress .progress span {height: 100%; background: #349576; display: block;}
.file_limit.error {
    color: #CE002B;
    margin-left: 136px;
}
.upload_progress .icon_close{font-size: 25px; line-height: 11px;}
.upload_progress .abort {cursor: pointer;}
.upload_progress #progressBar {width: 0;}

.file .hideit {
    width: 135px;
    height:25px;
    overflow: hidden;
    opacity: 0;
    float: left;
}
.file .progress_upload {
    width: 600px;
    height: 30px;
    float: left;
    margin-left: 10px;
    text-overflow: ellipsis;
}
.file.error {
    border: 1px solid #CE002B;
    margin-bottom: 30px;
}
.file.error .overtext {
    border-right: 1px solid #CE002B;
}
.file .overtext {
    text-transform: uppercase;
    padding: 6px 6px 6px;
    position: absolute;
    top: 0;
    left: 0;
    height: 35px;
    text-align: center;
    width: 135px;
    z-index: 0;
}
.note {
    height: 75px;
    position:relative;
}
.note .atten_text {
    margin-left: 90px;
    padding-top: 10px;
}
.note .icon_error-circle_alt, .note .attention, .attention {
    color: #CE002B;
}

table.import_filed {outline: 0; border: 0; }
table.import_filed td{text-align: left; vertical-align: middle; padding: 9px 0;}
table.import_filed input {
    margin-bottom: 0;
    width: 300px;
}
.td_chek {
    width: 30px;
    cursor:pointer;
}
.td_text {
    width: 430px;
}
#import_filed .td_text {
    width: 610px;
}

.import_txt .dropdown-toggle{border: 1px solid #ccc;padding: 5px;margin-top: -7px;float: right;cursor: pointer;}
.import_txt.select_card_page, .import_compl {height: 345px;}
.reveal-modal.import .select_card_page .fieldset h1{margin-bottom: 28px;}
.import_txt.select_card_page .table_lib {margin-top: 20px; height: 196px;}
.import_txt.select_card_page .table_lib table.table-items .lib_last {padding-left: 22px; width: 60px;}
.import_txt.select_card_page .five.column.dropdowns .icon_check{font-size: 24px;}

.reveal-modal.import .open .dropdown-toggle {border-color: #349576; color: #349576;}
.reveal-modal.import .open .dropdown-toggle * {color: #349576;}
.reveal-modal.import .drops.twelve {padding: 5px 16px 0 33px;}
.import_txt .dropdowns { padding-right: 5px;}
.import_txt .dropdowns a{color:#999999;}
.import_txt .dropdowns .dropdown-menu {position: absolute;top: 130%;width: 100%;right: 0;z-index: 9;box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);border: 1px solid #cccccc;background-color: #fff;}
.import_txt .dropdowns.encoding .dropdown-menu {width: 170px;}
.columns_selector .head_dropdown{padding: 10px 5px;}
.head_dropdown i {float: right; margin: 5px 15px; color: #999; cursor: pointer;}
.drops .set > .icon_check.checkbox {margin: 3px 0px 0px 2px;}
.drops .icon_check.checkbox {margin: 0px 1px -4px 0;}
.drops td {vertical-align: middle;}
.drops .dropdowns {float:left;}
.drops .two.dropdowns {width: 205px; margin-right: 10px;}
.import_txt .columns_selector .dropdowns .dropdown-menu {right:0;}
.import_txt .two.dropdowns .dropdown-menu {width: 200px;}
.create_back.panel {padding-top: 0;}

.import_txt .dropdowns .dropdown-toggle i{font-size: 22px;position: absolute; top:0; right: 10px; line-height: 13px;}
.import_txt .dropdowns .dropdown-menu:before,
.import_txt .dropdowns .dropdown-menu:after {border-image: none;border-style: solid;border-width: 10px;content: "";display: block;height: 0px;right: 10px;position: absolute;}
.import_txt .dropdowns .dropdown-menu:before {border-color: transparent transparent #cccccc; top: -20px;}
.import_txt .dropdowns .dropdown-menu:after {border-color: transparent transparent #ffffff; top: -19px;}
.import_txt .dropdowns table {border:0px; margin-bottom: 10px;}
.import_txt .dropdowns .dropdown-toggle{ padding-right: 30px; }
.import_txt .time {margin-bottom: 10px}
.import_txt .head_dropdown {font-size: 15px;white-space: nowrap; padding: 15px 0px 15px 10px; border-bottom: 1px solid #cccccc; color: #757575;}
.import_txt .head_dropdown td {vertical-align: middle}
.import_txt .two .head_dropdown {padding: 0}
.import_txt .columns_selector {margin:20px 20px 0 33px; width: 938px;}
.import_txt .columns_selector .dropdowns {padding-left:0; padding-right: 0; width:134px; margin:0px;}
.import_txt .columns_selector .dropdowns .dropdown-menu {width: 180px;}
.import_txt .columns_selector .dropdowns .dropdown-toggle{ padding-right: 30px; width: 100%}
.reveal-modal.import .list-shell .row.import_list {height: 40px;width: 942px;}
.import_txt .panel p {margin-bottom: 2px}
.import_all {height: 208px; overflow: auto; margin-left: 33px;}
.import_list{padding-left: 20px}
.import_list div {width:134px; height: 20px; float:left; padding: 2px 5px; }
.import_txt .dropdowns.two .dropdown-toggle, .five.dropdowns .dropdown-toggle{ width: 100%}
.separate .icon_check {font-size: 24px; line-height: 24px;}
.separator_symb {width: 30px;}
.migrate_progress {
    height: 340px;
    width: 100%;
}
.migrate_status {top:246px; left:219px; width: 571px; height: 70px; position: absolute;}
.migrate_status p {font-size: 18px; margin-top: 35px; margin-left: 20px;}

.import_filed .icon_check.checkbox {margin: 5px 10px 5px 10px;}

/******************reports**********************/

.h3 {opacity: 0.7; margin-left: 10px; text-transform: none; display: inline-block; position: relative; font-size: 16px; padding-right: 25px;}
.h3 > a { display: inline-block; font-size: 16px; color: #ffffff; }
.h3 > a.bread-item { display: inline-block; font-size: 16px; color: #ffffff; }
.h3.last-h {opacity: 1; text-transform: capitalize;}
.h3.pointer {cursor: pointer;}
.body .top.row .h3 i.arrow_carrot-right {position: absolute; right:0; top:0; font-size: 18px;}
.reports-container {
    height:100%;
    position: relative;
    float: left;
}
.group-select {
    width: 270px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: 25px;
    border-radius: .5rem;
    height: calc(100% - 30px);
}
.group-select > .panel {
    cursor:pointer;
    margin: 0;
    font-size: 18px;
    padding: 13px 20px;
}
.group-select > .panel:first-child {
    font-size: 20px;
    padding: 20px 0 20px 20px;
}
.group-select .panel i, .reports-right .last_practiced_arrow i{color:#999; float: right; font-size: 26px; line-height: 16px; display: none;}
.group-select .panel i.icon_cog {font-size: 17px;}
.group-select .panel.set i{color:#299573;}

.reports .subjects .list-shell.form.custom.report-list li.practice, .reports .panel.activity .tabs li {cursor: pointer;}
.reports .subjects .list-shell.form.custom.report-list li.practice.heading span {
    font-size: 18px;
}
.group-select .set.panel i, .reports-right .practice:hover .last_practiced_arrow i {display: block; cursor: pointer;}

.reports > .panel {padding: 0; margin-bottom: 0; background: transparent;}
.reports-right {
    height: 100%;
    padding-left: 10px;
}
.reports-right.myself:not(.userGroup) {
    padding: 0 20px;
}
.reports-right .addChildToFamilyMain {
    height: calc(100% - 50px);
    width: 100%;
    background: var(--background-color-white-middleDarkGray);
    border-radius: .7rem;
    padding: 40px 0 0 40px;
}
.addChildToFamilyMain .iconHolder p i {
    background: var(--icon-add-child) no-repeat;
    display: block;
    height: 27px;
    width: 40px;
    position: relative;
    left: 19px;
    top: 25px;
}
.addChildToFamilyMain .infoHolder ul {
    list-style-type: none;
    margin-top: 20px;
}
.addChildToFamilyMain .infoHolder ul li {
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--color-666-999);
}
.addChildToFamilyMain .infoHolder ul li i {
    color: var(--highlighted-text-color);
    margin-right: 7px;
}
.addChildToFamilyMain .infoHolder .otherBenefits {
    width: 470px;
    height: auto;
    background: var(--background-color-gray-darkestGray);
    border-radius: .7rem;
    padding: 20px 15px;
}
.addChildToFamilyMain .infoHolder .otherBenefits span {
    color: var(--color-666-999);
    display: block;
    margin-bottom: 10px;
}
.addChildToFamilyMain .infoHolder .otherBenefits span:first-child {
    font-size: 18px;
    margin-bottom: 15px;
}
.addChildToFamilyMain .infoHolder .otherBenefits button {
    margin-top: 20px;
    height: 35px;
    width: 100%;
}
.reports-right.userGroup {
    width: calc(100% - 415px);
    float: right;
    right: 20px;
    position: absolute;
}
.reports-right.myself.userGroup #subjectsList.reports {
    height: calc(100% - 30px);
}
.reports-right.userGroup #subjectsList.userSingleReports {
    padding-top: 0;
    border-radius: .7rem;
}
.tabs.report {
    display:block;
    text-align:left;
    height:35px;
    position:absolute;
    top:30px;
    left:100px;
    z-index:9;
    width:100%;
}
.userGroup .tabs.report {left:101px;}
.tabs.report li {
    background: white none repeat scroll 0 0;
    font-size: 24px;
    margin-right: 5px;
    padding-left: 10px;
    width: 210px;
}
.tabs.report li a {
    color: var(--highlighted-text-color);
    font-size: 22px;
}
.tabs.report li {margin-left: 30px; border: 0;}
.tabs.report li.active a{background: transparent;border-left: 0;border-right: 0;font-weight: 400; height: 35px; line-height: 35px;}
.tabs.report li a{padding: 0; font-size: 22px;}
.report-tabs {
    height: 100%;
    overflow: hidden;
    background: var(--background-color-white-middleDarkGray);
    border-top-left-radius: .7rem;
}
.report-tabs.classroom {
    margin-top: 0;
    padding-top: 0;
    border-radius: .5rem;
}
.ie .report-tabs {
    margin-top: 0;
    padding-top: 0;
}
.reports-right > .panel { width:100%; height: 100%;}
.reports-right.myself .panel.reporting {
    padding: 0;
    background: var(--background-color-gray-darkestGray-none);
}
.reports-right.myself.userGroup .panel.reporting {padding: 0; }
.reports-right.myself .subjects .list-shell {
    width: 100%;
}
.panel.activity {padding: 0; margin: 0;}
.reports-right .left-tabs {width: 160px; border-right: 1px solid #ccc; position: absolute; top:0; left:0; height: 100%;}
.tab-container {height: 100%; position: relative; background: var(--background-color-gray-darkestGray-none);}
.reports-right .tabs-cont {width: 100%; height: 100%; position: relative;}
.reports-right .panel.activity, .reports-right .total .center {text-align: center;}
.reports-right .panel.activity {
    border-radius: .7rem;
}
.panel.activity .subjects .card_count {padding-top:5px;}
.panel.activity .subjects-list.report .reps h3 .actives {margin-top: 30px;text-align: left;padding-left: 0;}
.panel.activity .row.practice {background: var(--background-color-gray-darkestGray-none);border-bottom: 1px solid transparent;}
.panel.activity .row.practice:hover {border-color: transparent;}
.panel.activity i[class*=arrow_carrot-]
{cursor:pointer;position:absolute; font-size: 30px; color: var(--highlighted-text-color);}
.panel.activity i[class*=arrow_carrot-]:hover {opacity: 1;}
.panel.activity .arrow_carrot-left {left:0; top:0;}
.panel.activity .arrow_carrot-right {right:-10px; top:0;}
.panel.activity .reps .arrow_carrot-left { top:19px; }
.panel.activity .reps .returnButtonBigHeight {
    height: 40px;
    padding-top: 4px;
    top: 10px;
    background: var(--background-color-white-middleDarkGray);
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}
.panel.activity .reps .returnButtonBigHeight:hover { opacity: .6; }
.group-select.reports-container > .panel:first-child {font-size: 16px;}
.group-select.reports-container > .panel {font-size: 18px;}
.panel.activity .tabs li {margin: 0 20px;}
.panel.activity .tabs li a {padding: 0; color: var(--color-666-999); }
.reports-right .subjects .list-shell {
    margin-top: 0;
    overflow-y: visible;
    overflow-x: visible;
}
.list-shell.form.custom.subjects-list.report-list {
    overflow: hidden;
    background: none;
    border-radius: .7rem;
    height: calc(100% - 20px);
    min-width: 800px;
}
.list-shell.form.custom.subjects-list.report-list .emptyFamilyMember {
    background: var(--background-color-white-middleDarkGray);
    height: 100%;
    padding: 40px 0 0 40px;
}
.emptyFamilyMember .iconHolder, .addChildToFamilyMain .iconHolder {
    height: 100%;
    float: left;
    width: 110px;
}
.emptyFamilyMember .iconHolder p, .addChildToFamilyMain .iconHolder p {
    width: 80px;
    margin: 0;
    height: 80px;
    border-radius: 50%;
    background: var(--background-f2f2f2-666);
    display: block;
}
.emptyFamilyMember .iconHolder p i {
    font-size: 36px;
    position: relative;
    left: 10px;
    top: 6px;
    color: var(--color-666-222);
}
.emptyFamilyMember .infoHolder, .addChildToFamilyMain .infoHolder {
    width: calc(100% - 110px);
    float: right;
}
.emptyFamilyMember .infoHolder p, .addChildToFamilyMain .infoHolder p {
    margin: 0 0 15px 0;
    padding: 0;
    width: 100%;
    font-size: 24px;
    color: var(--highlighted-text-color);
}
.emptyFamilyMember .infoHolder span {
    color: var(--color-666-999);
    margin-bottom: 5px;
    display: block;
}
.emptyFamilyMember .infoHolder button {
    margin-top: 20px;
    height: 35px;
    min-width: 400px;
}
#subjectsList div.title-small.four.columns { height: 30px; }
#subjectsList .report div.title-small.four.columns > span { display: inline-block; line-height: 14px; margin-top: 4px; }
.reports-dropdown {position: absolute; right:20px; top:20px; width:22px; height: 18px; z-index: 91 }
.reports-dropdown i{color: #6f6f6f; font-size: 25px; line-height:18px; cursor: pointer;}
.legend > div{font-size:12px; padding-top: 10px; padding-left: 21px; text-align:left; height: 33px; position: relative;}
.legend > div span {padding: 0 15px 0 7px; line-height: 20px;}
.legend > div i{position: absolute; width: 18px; height: 18px; display: block; left:0; top:8px;}
.time-report {position: relative; height: 33px; margin-top: 12px;}
.time-report .periods > div {width: 14.2%; height: 100%; float: left; padding-top: 10px; font-size: 12px;}
.twelve.column.report-content{height: 100%;padding: 34px 20px 0;}

.up-bg {background-color:#23b813;}
.new-bg {background-color:#2379FF;}
.other-bg { background-color: #aaa }

.other-td {
    color: #4c7980;
}
.new-td {
    color:#777b47;
}
.overdue-td {
    color:#CD002B;
}
.up-td {
    color:#ffad10;
}
.overdue-bg {
    background-color:#CD002B;
}
.metr {
    padding-top: 117px;
    position: absolute;
    top: 0;
    left: 20px;
    width: 34px;
    height: 100%;
    padding-bottom: 82px;
}
.metr span {
    text-align: center;
    font-size: 13px;
}

.metr .positive div {
    height:20%;
}
.metr .negative div{
    height:25%;
}

.metr > div {width: 100%;}
.metr > div > div { border-right: 1px solid #cccccc;position:relative; float:left;  width:100%; border-bottom: 1px solid #ccc; }
.metr > div > div:first-child {border-top: 1px solid #cccccc;}
.metr > div > div span {position: absolute; left:3px; bottom: 4px;}
.periods {padding-left: 33px;  height: 100%;}
.period {width: 14.2%; height: 100%; border-right: 1px solid #cccccc; float: left; cursor:pointer;}
.period:hover {background-color: #363636 /*replaced*/}
.period > div {width: 100%;}
.period .graph {width:30px; margin: 0 auto; height:100%; position: relative;}
.period .graph .cols {position:absolute; left:0; width: 100%;}

.positive {height: 55%; border-bottom:1px solid #ccc;}
.negative {height: 45%; border-top:1px solid #ccc;}
.negative .graph div {top:0;}

.reports-right .subjects .subject-image {
    margin-right: 0;
    padding-left: 15px;
    width: 22%;
}
.ie .reports-right .subject-image img {
    height: 100%;
}
.reports-right .subject-image img {
    max-height: 75px;
}

p.img-list {width: 70%;}

.subjects-list.report .side-nav {
    padding-bottom: 0;
    margin-top: 0;
}
.group-select > .panel.second-bottom,
.group-select > .panel.first-bottom {
    position:absolute;
    left:-2px;
    padding-left: 30px;
    width: 210px;
}
.first-bottom {
    bottom: 0;
}
.second-bottom {
    bottom: 45px;
}
.units-title {
    height: 26px;
    z-index: 99;
    font-size: 16px;
    border-bottom: 1px solid var(--border-999-666);
    color: var(--color-666-999);
}
.units-title i {
    font-size: 21px;
}
.units-title span {
    margin-top: 5px;
    margin-left: 10px;
    cursor: pointer;
}
.units-list {
    overflow-y: auto;
    height: 96%;
}
.units-list > div {
    width: 100%;
    height: auto;
    min-height: 34px;
    max-height: 70px;
    border-bottom: 1px solid var(--border-ccc-666);
    text-align: left;
    padding: 8px 5px;
    font-size: 16px;
    overflow: hidden;
    cursor: pointer;
}
.units-list > div:last-child {
    border: none;
}
.units-list > div.set {
    background: var(--background-color-gray-middleDarkGray);
}
.units-list > div div {
    max-height: 70px;
    overflow: hidden;
    /* in case: reports, very long unit name */
    word-break: break-all;
    font-size: 14px;
    color: #999;
}
.units-list > div div.set {
    color: var(--highlighted-text-color);
}
.select-units-cont {
    border-left: 1px solid var(--border-ccc-666);
    background: var(--background-color-white-middleDarkGray);
    position: relative;
    width: 200px;
    height: 100%;
}
.select-units-cont i {
    cursor: pointer;
}
.units-header {
    background: #eee;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 100%;
    padding: 10px 15px;
    cursor: pointer;
}
.units-header > p {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    width: 200px;
    height: 20px;
    position: relative;
    left: -100px;
    margin-top: 50px;
    margin-left: 5px;
}
.filter-progress {
    padding:5px;
    position: absolute;
    width:192px;
    height: 25px;
    outline: 1px solid #cccccc;
}
.filter-progress.accuracy {
    right:20px;
    top: 80px;
}
.filter-progress.input-control-report {
    right: 35px;
    top: 0;
}
.filter-progress.input-control-report,
.filter-progress.diff-words {
    right: 35px;
    top: -35px;
    outline: none;
    border: 1px solid var(--border-ccc-666);
    border-radius: .5rem;
}
.filter-progress.input-control-report .filters-container,
.filter-progress.diff-words .filters-container {
    right: 0;
}

.filter-progress.diff-words .filters-container {
    width: 245px;
}
.filter-progress.input-control-report  .filters-container li,
.filter-progress.diff-words .filters-container li {
    width: 100%;
    font-size: 14px;
    padding: 10px 3px;
    margin: 0;
    color: var(--color-666-999);
}
.filter-progress.input-control-report  .filters-container li:hover,
.filter-progress.diff-words .filters-container li:hover {
    color: var(--highlighted-text-color);
}
.filter-progress.input-control-report .filters-container li + li,
.filter-progress.diff-words .filters-container li + li {
    border-top: 1px solid #f5f5f5;
}

.filter-progress.weeks {
    left: 40px;
    width: 235px;
}
.filter-progress.weeks .dropdown-toggle  {
    width: 225px;
    cursor: pointer;
    text-align: left;
    padding: 0 5px;
}
.filter-progress.phases {
    margin: 20px 0 0 40px;
    width: 211px;
    position: relative;
}
.filter-progress.phases ul {
    width: 211px;
}
.filter-progress.phases .filters-container.f-dropdown:before {
    left:188px;
}
.filter-progress.phases .filters-container.f-dropdown:after {
    left:187px;
}
.filter-progress.phases .dropdown-toggle {
    width: 201px;
    cursor: pointer;
    text-align: left;
    padding: 0 5px;
}
.filter-progress span {color: var(--color-666-999);}
.filter-progress a{float: left; color: var(--color-666-999);}
.filter-progress i{position: absolute; top: -5px; right: 0;}
.twelve.column.report-progress{position: relative; height: 100%;padding: 50px 190px 0 0;margin-top: -50px; margin-right: -190px;}
.memorization {height: 100%; border-left: 2px solid #ccc; border-bottom: 2px solid #ccc; position:relative; margin: 0 20px;}
.memorization .date {position: absolute; right:0px; bottom: 10px;}
.memorization .barely {position: absolute; left:0; bottom: 0; width: 100%; height: 20%; border-top:2px solid #BBDBD0;color:#BBDBD0;}

.barely-report-progress i{background-color: #BBDBD0;}
.long-legend i{background-color: var(--highlighted-background-color);}
.long-legend {color: var(--highlighted-text-color);}
.barely-legend i{background-color: #3ab8e7;}
.barely span, .good span, .long-term span {position: absolute; top:-20px; left:10px; font-size: 14px;}
.memorization .good {position: absolute; left:0; bottom: 20%; width: 100%; height: 40%; border-top:2px solid #81BEAC; color:#81BEAC;}
.memorization .long-term {position: absolute; left:0; bottom: 60%; width: 100%; height: 20%; border-top:2px solid #FD9C3E; color:#FD9C3E;}
.tab-container canvas {width:100%; height: 100%;}
.memorization .accuracy-level {position: absolute; left:0; bottom: 0; width: 100%; height: 80%; border-top:2px solid #81BEAC; color:#81BEAC;}
.accuracy-level span {position: absolute; top:-20px; left:10px; font-size: 14px;}

.cards-memorized {width: 169px; height: 102px; background-color: #ffffff; position: absolute; z-index: 10000; box-shadow: 1px 1px 1px 1px #ccc; padding: 7px 15px;}
.cards-memorized .row {height: 27px;}
.cards-memorized p{font-size: 17px;margin-top: 12px;}
.cards-memorized:after {border-color: #ffffff transparent transparent transparent ;border-image: none;border-style: solid; border-width: 10px;content: "";display: block;height: 0px;left: 74px;position: absolute;bottom: -19px;width: 0px;z-index: 99;}
.cards-memorized:before {border-color:#cccccc transparent transparent transparent ;border-image: none;border-style: solid; border-width: 10px;content: "";display: block;height: 0px;left: 74px;position: absolute;bottom: -20px;width: 0px;z-index: 99;}

.phase-memorized {
    width: 194px;
    background-color: #ffffff;
    position: fixed;
    z-index: 98;
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
    padding: 7px 15px;
    margin-left: 20px;
    margin-top: -60px;
}
.phase-memorized .row {border-bottom: 1px solid #ccc;}
.phase-memorized p{font-size: 14px; margin-top: 12px;}
.phase-memorized p span {font-size: 25px;}
.phase-memorized .panel {margin:0; padding: 12px 10px 2px;}
.phase-memorized .panel span {width: 40%; float: left; text-align: right;}
.phase-memorized:after {
    border-color:transparent #ffffff transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: 10px;
    content: "";
    display: block;
    height: 0;
    left: -20px;
    position: absolute;
    top: 60px;
    width: 0;
    z-index: 99;
}
.phase-memorized:before {
    border-color:transparent #cccccc transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: 10px;
    content: "";
    display: block;
    height: 0;
    left: -20px;
    position: absolute;
    top: 60px;
    width: 0;
    z-index: 99;
}


.cards-accuracy {width: 192px; height: 138px; background-color: #ffffff; position: absolute; z-index: 98; box-shadow: 1px 1px 1px 1px #ccc; padding: 7px 15px;}
.cards-accuracy .row {height: 27px;}
.cards-accuracy p{font-size: 17px;margin-top: 5px;margin-bottom: 0;}
.cards-accuracy p span {font-size: 25px; line-height: 35px;}
.cards-accuracy:after {border-color: #ffffff transparent transparent transparent ;border-image: none;border-style: solid; border-width: 10px;content: "";display: block;height: 0px;left: 81px;position: absolute;bottom: -19px;width: 0px;z-index: 99;}
.cards-accuracy:before {border-color:#cccccc transparent transparent transparent ;border-image: none;border-style: solid; border-width: 10px;content: "";display: block;height: 0px;left: 81px;position: absolute;bottom: -20px;width: 0px;z-index: 99;}
.cards-accuracy .panel p{font-weight:200; color:#6F6F6F; font-size: 16px; text-align: center; text-transform: uppercase; }
.cards-accuracy .panel {padding-top: 10px;}

.cards-phase-little {
    width: 175px;
    height: 69px;
    background-color: #ffffff;
    position: fixed;
    z-index: 98;
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
    padding: 7px 15px;
    margin-top: -85px;
    margin-left: -50px; }
.cards-phase-little p{font-size: 17px;margin-top: 5px;margin-bottom: 0; color:#6F6F6F;}
.cards-phase-little p span {font-size: 25px; line-height: 35px;}
.cards-phase-little:after {border-color: #ffffff transparent transparent transparent ;border-image: none;border-style: solid; border-width: 10px;content: "";display: block;height: 0px;left: 42px;position: absolute;bottom: -19px;width: 0px;z-index: 99;}
.cards-phase-little:before {border-color:#cccccc transparent transparent transparent ;border-image: none;border-style: solid; border-width: 10px;content: "";display: block;height: 0px;left: 42px;position: absolute;bottom: -20px;width: 0px;z-index: 99;}

.twelve.column.report-accuracy {
    position: relative;
    height: 100%;
    padding: 84px 0 0;
    margin-top: -84px;
    margin-right: 0;
}
.twelve.column.report-phases {
    padding: 0;
}
.twelve.column.report-phases .icon_check {
    margin: 5px 5px 5px 5px;
}
.twelve.column.report-phases .set .icon_check {
    margin: 5px 10px 5px 0;
}

.units-select {
    background-color: #fff;
    position: relative;
    z-index: 1;
}
.time-report.progr {padding-right: 20px;}
.time-report.progr .arrow_carrot-right {right:10px;}
.time-report.progr .arrow_carrot-left {left:10px;}
.vertical-title {position: absolute; top:38px; left: -60px; transform:rotate(-90deg); -ms-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);}
.vertical-title.accuracy {top:23px; left: -44px;}

.day_sector {margin-top:40px; float:left; position: relative;height: 100%; border-right: 2px solid #ccc;}
.day_sector div {position: absolute; bottom: 0; left:0; width: 100%; height: 30px;}
.day_sector span {display:block; text-align:center; width: 30%; height: 20px; position: relative; margin:0 auto; float:left; font-size:12px;}
.day-period {float:left;text-align: left;padding-left: 50px;color: #999;margin-top: -5px;}

.vertical-legend {width:150px; height: 120px; margin: 80px 0 0 40px;}
.vertical-legend .row {position: relative;padding-left: 30px;text-align: left;height: 35px;padding-top: 9px; line-height: 24px;}
.vertical-legend .row span {font-size: 14px; }
.vertical-legend i{position: absolute; width: 20px; height: 20px; display: block; left:0; top:8px;}

.legendWrapper {
    width: 250px;
}
.report-phases .legend {
    list-style: none;
    text-align: left;
    padding-left: 30px;
    margin-top: 20px;
    overflow-y: auto;
    overflow-x: hidden;
}
.report-phases .legend ul {
    list-style: none;
    margin-top: 10px;
    margin-left: 0;
}
.report-phases .legend .rootLi {
    margin-right: 10px;
    padding: 5px 0;
    border-bottom: 1px solid #ccc;
}
.report-phases .legend .rootLi + .rootLi {
    margin-top: 10px;
}
.report-phases .legend .rootLi:last-child {
    border: none;
}
.report-phases .legend .rootLi:after,
.report-phases .legend .rootLi:before {
    content: '';
    display: block;
    clear: both;
}
.report-phases .legend .rootLi i {
    width: 16px;
    height: 16px;
    margin: 2px
}
.report-phases .legend .rootLi > i {
    float: left;
    display: inline-block;
}
.report-phases .legend .rootLi > span {
    display: inline;
    color: var(--color-666-999);
}
.report-phases .legend .rootLi .percent {
    padding: 0;
    display: inline-block;
    float: right;
}
.report-phases .legend .rootLi span {
    padding-left: 6px;
    font-size: 14px;
}
.report-phases .legend .rootLi ul li:before,
.report-phases .legend .rootLi ul li:after {
    display: block;
    clear: both;
}
.report-phases .legend .rootLi ul li {
    padding: 1px 0;
    border-bottom: 1px dashed var(--border-ccc-666);
}
.report-phases .legend .rootLi ul li:last-child {
    border: none
}
.report-phases .legend .rootLi ul i {
    width: 40px;
    height: 8px;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid var(--border-ccc-666);
}
.report-phases .legend .rootLi ul span {
    padding-left: 20px;
    font-size: 13px;
    color: var(--color-666-999);
}
.reports .subjects .card_count .columns.over-due {border-right: 1px solid var(--border-ccc-666);}
.reports .subjects .card_count {width: 67%; margin-right: 20px; float: left;}
.reports .filters-container li {
    text-align: left;
    padding: 0;
}
.reports .filters {padding: 5px 10px;}

.reports .report-phases .inactive { fill: #aaa; }
.reports .report-phases .long-memory { color: #FA7A00; }
.reports .report-phases .barely_learned { fill: #3ab8e7}
.reports .report-phases .good_learned { fill: #23b813}

.reports .report-phases .arcBig path, .reports .report-phases .arcSmall path {
    stroke: #fff;
    stroke-width: 1px;
}

.reports .report-phases .circlePad {
    fill: #fff;
    stroke: #ececec;
    stroke-width: 0.7px;
}
.chart.pie {
    min-height: 350px;
}
.reports .report-phases .arcSmall text,
.reports .report-phases .arcBig text {
    fill: #fff;
}
.reports .report-phases #INACTIVE text,
.reports .report-phases #Inaktiv text {
    fill: #fff;
}
.reports .report-phases .long-memory { fill: var(--highlighted-background-color); }
.reports .report-phases .arcSmall text.arcLabel1 { text-anchor: middle; font: 14px sans-serif; }
.reports .report-phases .arcSmall text.arcLabel2 {
    text-anchor: middle;
    font: 15px sans-serif;
}
.reports .report-phases .arcBig text.arcLabel2 { text-anchor: middle; font: 12px sans-serif; }
.reports .report-phases .arc text.arcLabel2.textMiddle { text-anchor: middle;}
.pie_wrapper {
    margin: 0 220px 0 250px;
    width: -webkit-calc(100% - 470px);
    width: calc(100% - 470px);
}
.pie_wrapper.noTooltip {
    margin: 0;
    float: left;
    width: -webkit-calc(100% - 220px);
    width: calc(100% - 220px);
}
.pie_wrapper.noTooltip .noData {
    width: 100%;
}

/************************maintenance******************************************/

.login2.maintenance {width: 372px;}
.login2.maintenance h2{font-size:29px; line-height: 26px;}
.login2.maintenance div.wrapper {height:350px; padding-top: 56px; }
.login2.maintenance img {width: 115%; margin-left: -20px; margin-bottom: 0;}
.maintenance h3{font-weight:300; font-size:26px; text-transform:none; color: #4e4e4e;}


/************* empty classes for selectors *************/
.ql-stroke {
    stroke: #999 !important;
}
.ql-snow.ql-toolbar button:hover, button.ql-active, .ql-picker-label:hover, .ql-picker-label.ql-active, .ql-picker.ql-expanded .ql-picker-label {
    stroke: #999 !important;
    color: #999 !important;
    background: var(--background-color-gray-darkestGray) !important;
}
.ql-snow .ql-picker-options {
    background: var(--background-color-gray-darkestGray) !important;
    border: 1px solid var(--border-ccc-666) !important;
    top: 32px !important;
}
.multipleEditPage {}
.addPage, .managePage, .dictionaryPage, .achievementsPage, .gamesPage, .leaderBoardPage{
    float: right;
    width: calc(100% - 100px) !important;
    background: transparent;
    height: 100%;
    min-height: 518px;
}
.achievementsPage, .leaderBoardPage {
    padding: 30px 20px 0 20px;
}
.card-edit-content .addPage {
    width: 100% !important;
}
.addPage .date-bar {
    position: relative;
    top: 30px;
    right: 20px;
}
.addPage .mainContainer {
    margin-top: 30px;
    padding: 0;
}
.addPage .mainContainer .rowContainer {
    height: calc(100% - 135px);
    min-width: 1000px;
}
.addPage .languageSelectors {
    height: 33px;
    position: absolute;
    right: 160px;
    top: 30px;
    width: 120px;
    z-index: 10;
}
.addPage .languageSelectors .primaryLanguage, .add-subject-mask .secondaryLanguage {
    background: var(--background-color-white-darkestGray) none repeat scroll 0 0;
    float: left;
    height: 35px;
    width: 55px;
    border: 1px dashed var(--border-999-666);
    cursor: pointer;
    border-radius: .5rem;
}
.addPage .languageSelectors .secondaryLanguage {
    float: right;
    height: 35px;
    width: 55px;
    border: 1px dashed var(--border-999-666);
    cursor: pointer;
    border-radius: .5rem;
}
.addPage .languageSelectors .primaryLanguage .tooltip.tip-top {
    bottom: 39px;
    display: block;
    min-width: 130px;
    text-align: center;
    top: -32px;
    left: -42px;
}
.addPage .languageSelectors .secondaryLanguage .tooltip.tip-top {
    display: block;
    left: 21px;
    min-width: 130px;
    text-align: center;
    top: -32px;
}
.addPage .languageSelectors .primaryLanguage i, .addPage .languageSelectors .secondaryLanguage i, .add-subject-mask .languageSelectors .primaryLanguage i,
.add-subject-mask .languageSelectors .secondaryLanguage i{
    color: #999;
    font-size: 31px;
    margin-left: 11px;
}
.addPage .languageSelectors .primaryLanguage.flagset, .addPage .languageSelectors .secondaryLanguage.flagset, .add-subject-mask .languageSelectors .primaryLanguage.flagset,
.add-subject-mask .languageSelectors .secondaryLanguage.flagset{
    border: none;
}
.addPage .languageSelectors .primaryLanguage img, .addPage .languageSelectors .secondaryLanguage img, .add-subject-mask .languageSelectors .primaryLanguage img, .add-subject-mask .languageSelectors .secondaryLanguage img {
    width: 55px;
    height: 35px;
    border-radius: .5rem;
}
.addPage .languageSelectors .langTbl{
    position: absolute;
    top: 36px;
}
.addPage .languageSelectors .langTbl .languageTable, .add-subject-mask .languageTable, .edit-subject-mask .languageTable{
    display: block;
    overflow-y: auto;
    width: 160px;
    border-radius: .5rem;
    background: var(--background-color-white-darkestGray);
    border: none;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}
.edit-subject-mask .languageTable {
    height: 300px;
}
.addPage .languageSelectors .langTbl .languageTable tr, .add-subject-mask .languageTable tr, .edit-subject-mask .languageTable tr {
    cursor: pointer;
}
.addPage .languageSelectors .langTbl .languageTable tr:hover, .add-subject-mask .languageTable tr:hover, .edit-subject-mask .languageTable tr:hover {
    background: var(--background-color-gray-middleDarkGray);
}
.addPage .languageSelectors .langTbl .languageTable .langName, .add-subject-mask .languageTable .langName, .edit-subject-mask .languageTable .langName {
    display: block;
    padding: 6px 0 0 5px;
    width: 98px;
    color: #999;
}
.addPage .languageSelectors .langTbl .languageTable .langImg, .add-subject-mask .languageTable .langImg, .edit-subject-mask .languageTable .langImg {
    padding: 6px 5px 0;
}
.addPage .languageSelectors .langTbl .languageTable .langImg > img, .add-subject-mask .languageTable .langImg > img, .edit-subject-mask .languageTable .langImg > img {
    width: 35px;
    height: auto;
    border-radius: .5rem;
}
.addPage .no-premium {
    background: url('/img/premium/premium-add.jpg') calc(100% + 70px) 0 no-repeat;
    background-size: 88%;
    margin: 30px 30px 60px;
    padding-bottom: 90px;
}
.addPage .no-premium .main {
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 30%,rgba(255,255,255,0.2) 65%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 30%,rgba(255,255,255,0.2) 65%); /* Chrome10-25,Safari5.1-6 */
    background:  linear-gradient(left, rgba(255,255,255,1) 30%,rgba(255,255,255,0.2) 65%);
    background:  -ms-linear-gradient(left, rgba(255,255,255,1) 30%,rgba(255,255,255,0.2) 65%);
}
body.darkTheme .addPage .no-premium .main {
    background: -moz-linear-gradient(left, rgba(34,34,34,1) 30%,rgba(34,34,34,0.2) 65%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(34,34,34,1) 30%,rgba(34,34,34,0.2) 65%); /* Chrome10-25,Safari5.1-6 */
    background:  linear-gradient(left, rgba(34,34,34,1) 30%,rgba(34,34,34,0.2) 65%);
    background:  -ms-linear-gradient(left, rgba(34,34,34,1) 30%,rgba(34,34,34,0.2) 65%);
}
.add-container {
    margin: 30px;
    background: var(--background-color-white-middleDarkGray);
    border-radius: .5rem;
    height: calc(100% - 30px);
}

/*** LIBRARY ***/
.managePage .forFilter {
    background: transparent;
    padding: 30px;
    width: 88%;
}
.managePage .date-bar {
    position: relative;
    top: 30px;
    right: 20px;
}
.managePage .no-premium {
    background: url('/img/premium/premium-library.jpg') calc(100% + 70px) 0 no-repeat;
    background-size: 88%;
    margin: 30px 30px 60px;
    height: calc(100% - 40px);
    border-radius: .7rem;
}
.managePage .no-premium .main {
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 30%,rgba(255,255,255,0.2) 65%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 30%,rgba(255,255,255,0.2) 65%); /* Chrome10-25,Safari5.1-6 */
    background:  linear-gradient(left, rgba(255,255,255,1) 30%,rgba(255,255,255,0.2) 65%);
    background:  -ms-linear-gradient(left, rgba(255,255,255,1) 30%,rgba(255,255,255,0.2) 65%);
    height: 100%;
    border-radius: .7rem;
}
body.darkTheme .managePage .no-premium .main {
    background: -moz-linear-gradient(left, rgba(34,34,34,1) 30%,rgba(34,34,34,0.2) 65%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(34,34,34,1) 30%,rgba(34,34,34,0.2) 65%); /* Chrome10-25,Safari5.1-6 */
    background:  linear-gradient(left, rgba(34,34,34,1) 30%,rgba(34,34,34,0.2) 65%);
    background:  -ms-linear-gradient(left, rgba(34,34,34,1) 30%,rgba(34,34,34,0.2) 65%);
}

/*** REPORTS ***/
.chart .info {
    width: 320px;
    height: 102px;
    background-color: var(--background-color-white-darkestGray);
    position: fixed;
    top: 50%;
    left: calc(50% - 110px);
    z-index: 3001;
    box-shadow: 0 0 6px 2px var(--color-ccc-666);
    padding: 7px 15px;
    display: flex;
    align-items: center;
}
.userGroup .chart .info {
    left: 50%;
}
.chart .info .row {
    height: 27px;
}
.chart .info p {
    font-size: 17px;
    margin: 0;
}
.chart .info p a {
    text-decoration: underline;
    color: var(--highlighted-text-color);
}
.chart text {
    font: 11px sans-serif;
}
.chart text.legend {
    fill: #aaa;
}
.chart .cover {
    width: 100%;
    height: calc(100% - 130px);
    z-index: 50;
    position: absolute;
    bottom:0;
    background: var(--reports-backdrop-color);
}
.report-phases.chart .cover,
.input-control-container .cover,
#activityChartContainer.chart .cover,
.difficult-words-container.chart .cover {
    height: 100%;
}
.input-control-container .filter-progress > a,
.difficult-words-container .filter-progress > a {
    width: 100%;
    text-align: left;
}
.input-control-container.chart .body-container td,
.difficult-words-container.chart .body-container td {
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 750px;
    display: block;
    float: left;
}
.difficult-words-container.chart .body-container td span {
    cursor: pointer;
}

/*** ACCURACY REPORTS ***/
#accuracy-tip.cards-memorized { position: fixed; height: 115px; z-index: 2600; }
#accuracy-tip.cards-memorized .tool-info-date.row { font-size: 15px; margin-top: 10px; padding-bottom: 20px; width: 139px; min-width: 100px; text-align: center; }
#accuracy-tip.cards-memorized .tool-info-date.row .date {  }
#accuracy-tip.cards-memorized .tool-info-date.row .time { margin-left: 10px; }
#accuracy-tip.cards-memorized .text { margin: 10px 0 0 0; font-size: 14px; color: #289472; overflow: inherit; text-align: center; }
#accuracy-tip.cards-memorized .set { margin: 5px 0 0 0; font-size: 30px; padding-bottom: 15px; text-align: center; }

.accuracyChart.chart > .chartBlock { width: 94%; float: left; }
.accuracyChart.chart > .chartBlock.listActive {  }
.accuracyChart.chart .chartBlock .filter-progress.weeks { position: absolute; left: auto; right: 1%; z-index: 1025; }
.accuracyChart.chart .chartBlock .svgProgress { }
.accuracyChart.chart .chartBlock .svgProgress text { font-family: "proxima-nova", sans-serif; font-size: 13px; color: #7A7A7A; }
.accuracyChart.chart .units-select { background: #ffffff; position: relative; z-index: 2500; right: -15px; }
.accuracyChart.chart .chartBlock .svgProgress .axis.x,
.accuracyChart.chart .chartBlock .svgProgress .axis.y { stroke-width: 1px; }
.chart.accuracyChart .axis path, .chart.accuracyChart .axis line { fill: #CCCCCC; }
.chart.accuracyChart .yLegend { fill: #777777; text-anchor: end; font-size: 15px; }

.chart.accuracyChart .lineData { fill: none; stroke: #80BFAC; stroke-width: 5; }
.chart.accuracyChart .area { fill: #E7F6F1 }

.chart.accuracyChart .topLine { fill: none; stroke: #3C9D7F; stroke-width: 2; shape-rendering: crispEdges; }
.chart.accuracyChart .xLine { fill: none; stroke: #cdcdcd; stroke-width: 2; shape-rendering: crispEdges; }
.chart.accuracyChart .yLine { fill: none; stroke: #cdcdcd; stroke-width: 2; shape-rendering: crispEdges; }
.chart.accuracyChart .dateGrid { fill: none; stroke: #cdcdcd; stroke-width: 1; shape-rendering: crispEdges; }
.chart.accuracyChart .dateGridDay { fill: #B7B7B7; font-size: 13px; }
.chart.accuracyChart .legend.line  { fill: #3C9D7F; shape-rendering: crispEdges; }
.chart.accuracyChart .axis path,
.chart.accuracyChart .axis line { fill: none; stroke: none; }
.chart.accuracyChart .axis .tick line { fill: none; stroke: none }
.chart.accuracyChart circle { fill: #80BFAC; cursor: pointer; }

.activity .accuracyChart .goLeft,
.activity .accuracyChart .goRight {
    position: absolute;
    bottom: 24px;
    top: auto;
    z-index: 2500;
}
.activity .accuracyChart .goLeft {
    left:76px;
}
.activity .accuracyChart .goRight {
    right:-22px;
}
.activity.tool-info .row > div.nine {
    text-align: left;
}
.activity .up-td {
    color: #222222;
}
/*** END ACCURACY REPORTS ***/

/*** PROGRESS REPORTS ***/
.progressChart.chart .cards-memorized { position: fixed; }
.progressChart.chart > .chartBlock { width: 94%; float: left; }
.progressChart.chart > .chartBlock.listActive {  }
.progressChart.chart .chartBlock .filter-progress.weeks { position: absolute; left: auto; right: 1%; z-index: 1025; }
.progressChart.chart .chartBlock .svgProgress { }
.progressChart.chart .chartBlock .svgProgress text { font-family: "proxima-nova", sans-serif; font-size: 13px; color: #7A7A7A; }
.progressChart.chart .units-select { position: relative; z-index: 1025; right: -15px; }
.progressChart.chart .chartBlock .svgProgress .axis.x,
.progressChart.chart .chartBlock .svgProgress .axis.y { stroke-width: 1px; }
.chart.progressChart .axis path, .chart.progressChart .axis line { fill: #CCCCCC; }
.chart.progressChart .yLegend { fill: #777777; text-anchor: end; }

.chart.progressChart .lineData { fill: none; stroke: #80BFAC; stroke-width: 5; }
.chart.progressChart .area { fill: #E7F6F1 }
.chart.progressChart .memorizedLine { fill: none; stroke: #FD9C3E; stroke-width: 2; shape-rendering: crispEdges; }
.chart.progressChart .goodLine { fill: none; stroke: #80BFAC; stroke-width: 2; shape-rendering: crispEdges; }
.chart.progressChart .xLine { fill: none; stroke: #cdcdcd; stroke-width: 2; shape-rendering: crispEdges; }
.chart.progressChart .yLine { fill: none; stroke: #cdcdcd; stroke-width: 2; shape-rendering: crispEdges; }
.chart.progressChart .badLine { fill: none; stroke: #C2DED5; stroke-width: 2; shape-rendering: crispEdges; }
.chart.progressChart .legend.long  { fill: #FD9C3E; shape-rendering: crispEdges; }
.chart.progressChart .legend.good  { fill: #3C9D7F; shape-rendering: crispEdges; }
.chart.progressChart .legend.barely  { fill: #A1CDBF; shape-rendering: crispEdges; }
.chart.progressChart .axis path,
.chart.progressChart .axis line { fill: none; stroke: none; }
.chart.progressChart .axis .tick line { fill: none; stroke: none }
.chart.progressChart circle { fill: #80BFAC; cursor: pointer; }
.activity .progressChart .goLeft { position: absolute; bottom: -8px; left:76px; top: auto; z-index: 2500; }
.activity .progressChart .goRight { position: absolute; bottom: -8px; right:-22px; top: auto; z-index: 2500;}

.chart.progressChart .brush .extent {
    stroke: #fff;
    fill-opacity: .125;
    shape-rendering: crispEdges;
}
/*** END PROGRESS REPORTS ***/

/*** ACTIVITY REPORTS ***/
.activityChart.chart text {
    fill: var(--color-414141-999);
}
.activityChart.chart > #activityChartContainer {
    overflow: hidden;
    height: calc(100% - 150px);
}
.ie .activityChart.chart > #activityChartContainer {
    height: calc(100% - 220px);
}
.activityChart.chart .background { fill: none; }
.activityChart.chart .background.hovered { fill: #f8f8f8; }
.activityChart.chart .backgroundLine { stroke: #ccc; fill: none; shape-rendering: crispEdges; }
.rect { shape-rendering: crispedges; }
.activityChart.chart .rect0 { fill: #ddd; }
.activityChart.chart .rect1 { fill: var(--highlighted-background-color); }
.activityChart.chart .rect2 { fill: #2379FF; }
.activityChart.chart .rect3 { fill: #999; }
.activityChart.chart .rect5 { fill-opacity: 0; cursor: pointer;}
.activityChart.chart .activatedBubble,
.activityChart.chart .tongueActivated {
    fill: #e8ecb9;
}
.activityChart.chart .activatedBubbleText { text-anchor: middle; fill: #777b47; font-weight: 900; font-size: 14px }

.activityChart.chart .testedBubble,
.activityChart.chart .tongueTested {
    fill: #b9e5ec;
}
.activityChart.chart .testedBubbleText { text-anchor: middle; fill: #4c7980; font-weight: 900; font-size: 14px }
.activityChart.chart .axis path,
.activityChart.chart .axis line { fill: none; stroke: #cdcdcd; shape-rendering: crispEdges; }
.activityChart.chart .grid .tick line { stroke-width: 1px; stroke: #cdcdcd; shape-rendering: crispEdges; opacity: 0.5 }
.activityChart.chart .grid path { stroke-width: 0; }
.activityChart.chart text.legend { font-size: 13px }
.activityChart.chart .legend.practiced {fill: var(--highlighted-background-color); }
.activityChart.chart .legend.new {fill: #e8ecb9; }
.activityChart.chart .legend.other {fill: #b9e5ec; }
.activityChart.chart .legend.due {fill:#ddd; }
.activityChart.chart .axis.x .tick text { fill: #999; font-size: 14px; font-weight: 600 }
.activityChart.chart .axis.x .tick line { fill: none; stroke: none }
.activityChart.chart .axis.label  { font-size: 14px }
.activityChart.chart .axis.y.pad,
.activityChart.chart .axis.y.padRight {fill: var(--background-color-white-middleDarkGray);}

.activity .activityChart i[class*="arrow_carrot-"].goLeft {
    position: absolute;
    bottom: 60%;
    left: 0;
    top: auto;
    font-size: 76px;
}
.activity .activityChart i[class*="arrow_carrot-"].goRight {
    position: absolute;
    bottom: 60%;
    right: 0;
    top: auto;
    font-size: 76px;
}

.flexForMobiles {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.activityDeviceChart {
    background: var(--background-color-white-middleDarkGray);
}
body.light .activityDeviceChart { background: white; }
body.dark .activityDeviceChart { background: #363636; }

.activityDeviceChart text {
    fill: var(--color-414141-999);
}
body.light .activityDeviceChart text { fill: #414141; }
body.dark .activityDeviceChart text { fill: #999; }


.activityDeviceChart .background { fill: none; }
.activityDeviceChart .background.hovered { fill: #f8f8f8; }
.activityDeviceChart .backgroundLine { stroke: #ccc; fill: none; shape-rendering: crispEdges; }
.activityDeviceChart .rect0 { fill: #e1e1e1; }
.activityDeviceChart .rect1 { fill: var(--highlighted-background-color); }
.activityDeviceChart .rect2 { fill: #2379FF; }
.activityDeviceChart .rect3 { fill: #999; }
.activityDeviceChart .rect5 { fill-opacity: 0; cursor: pointer;}
.activityDeviceChart .activatedBubble,
.activityDeviceChart .tongueActivated {
    fill: #e8ecb9;
}
.activityDeviceChart .activatedBubbleText { text-anchor: middle; fill: #777b47; font-weight: 900; font-size: 14px }
.activityDeviceChart .testedBubble,.activityDeviceChart .tongueTested {
    fill: #b9e5ec;
}
.activityDeviceChart .testedBubbleText { text-anchor: middle; fill: #4c7980; font-weight: 900; font-size: 14px }
.activityDeviceChart .axis path,
.activityDeviceChart .axis line { fill: none; stroke: #cdcdcd; shape-rendering: crispEdges; }
.activityDeviceChart .grid .tick line { stroke-width: 1px; stroke: #cdcdcd; shape-rendering: crispEdges; opacity: 0.5 }
.activityDeviceChart .grid path { stroke-width: 0; }
.activityDeviceChart text.legend { font-size: 0.8em }
.activityDeviceChart .legend.practiced {fill: var(--highlighted-background-color); }
.activityDeviceChart .legend.new {fill: #e8ecb9; }
.activityDeviceChart .legend.other {fill: #b9e5ec; }
.activityDeviceChart .legend.due {fill:#e1e1e1; }
.activityDeviceChart .axis.x .tick text { fill: #888; font-size: 12px; font-weight: 600 }
.activityDeviceChart .axis.deviceX .tick text { fill: #888; font-size: 3.5vw; font-weight: 600 }
.activityDeviceChart .axis.x .tick line, .activityDeviceChart .axis.deviceX .tick line { fill: none; stroke: none }
.activityDeviceChart .axis.label  { font-size: 14px }
.activityDeviceChart .axis.y.pad,
.activityDeviceChart .axis.y.padRight{
    fill: var(--background-color-white-middleDarkGray);
}

body.light .activityDeviceChart .axis.y.pad,
body.light .activityDeviceChart .axis.y.padRight {
    fill: white;
}
body.dark .activityDeviceChart .axis.y.pad,
body.dark .activityDeviceChart .axis.y.padRight {
    fill: #363636;
}


.activityDeviceChart .axis.deviceY .tick text { font-size: 1.2em; }
.activity .noMobileData {position: absolute; right: 25px; font-size: 18px; text-align: right; bottom: 0; color: #6f6f6f;}
.accuracyChart .noMobileData { bottom: -25px; }

.legendMobile {
    width: 100%;
    color: #999;
    display: flex;
    padding: 15px 0 10px 0;
    justify-content: space-evenly;
}
body.light .legendMobile { color: #414141; background: white; flex: 1; }
body.dark .legendMobile { color: #999; background: #363636; flex: 1;}

.legendMobile > div {
    padding: 5px;
    width:auto;
}
.legendMobile div > div {
    width:3vw;
    height:3vw;
    padding: 0;
    float: left;
}
.legendMobile div > span {
    font-size: 3vw;
    display: block;
    width: calc(100% - 3vw - 5px);
    float: left;
    margin-left: 5px;
}
@media screen and (min-width: 600px) {
    .legendMobile div > div {
        width:18px;
        height:18px;
    }
    .legendMobile div > span {
        font-size: 18px;
        width: calc(100% - 24px);
    }
    .activityDeviceChart .axis.deviceX .tick text { font-size: 18px; }
}
.legendMobile div.new {background: #e8ecb9; border-radius: 50%;}
.legendMobile div.other {background: #b9e5ec; border-radius: 50%;}
.legendMobile div.due {background:#ddd; }
.legendMobile div.practiced {background: var(--highlighted-background-color); }

.activity.tool-info { display: none; }
.activity.tool-info .row { min-width: 0; }
.tool-info {
    display: none;
    opacity: 0;
    position:absolute;
    background-color: var(--background-color-white-darkestGray);
    width: 230px;
    min-height: 190px;
    top: -150px;
    left: 40px;
    z-index: 96;
}
body.light .tool-info.mobile { background: white; }
body.dark .tool-info.mobile { background: #222; }

.tool-info.right {
    -webkit-box-shadow: 0 0 3px 1px var(--color-ccc-666);
    -moz-box-shadow: 0 0 3px 1px var(--color-ccc-666);
    box-shadow: 0 0 3px 1px var(--color-ccc-666);
}
.tool-info.left {
    -webkit-box-shadow: 0 0 3px 1px var(--color-ccc-666);
    -moz-box-shadow: 0 0 3px 1px var(--color-ccc-666);
    box-shadow: 0 0 3px 1px var(--color-ccc-666);
}
.tool-info:after,
.tool-info:before {
    border-image: none;
    border-style: solid;
    border-width: 10px;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    bottom: 50px;
    width: 0;
    z-index: 99;
}
.tool-info.mobile:after,
.tool-info.mobile:before {
    border-width: 0;
}
.tool-info.right:not(.mobile):before {border-color: transparent var(--border-ddd-666) transparent transparent; left: -21px; }
.tool-info.right:not(.mobile):after {border-color: transparent var(--border-white-222) transparent transparent; left: -20px;}
.tool-info.left:before {border-color: transparent transparent transparent var(--border-ddd-666); right: -21px;}
.tool-info.left:after {border-color: transparent transparent transparent var(--border-white-222); right: -20px;}
.tool-info .row { margin: 10px; text-align: center; font-size:14px}
.tool-info table td {font-size: 14px; vertical-align: middle; padding: 2px 10px 2px 0; margin: 0;}
.tool-info table {border:0; margin-bottom: 0;}

.tool-info-date.row {
    height: 20px;
    padding: 8px 0 20px;
    border-bottom: 1px solid var(--border-ccc-666);
    color: var(--color-666-999);
}
body.light .tool-info.mobile .tool-info-date.row { color: #666; }
body.dark .tool-info.mobile .tool-info-date.row { color: #999; }

.learned-time.row {
    height: 70px;
    padding:10px 0;
    border-bottom: 1px solid var(--border-ccc-666);
    color: var(--color-666-999);
}
body.light .tool-info.mobile .learned-time.row { color: #666; }
body.dark .tool-info.mobile .learned-time.row { color: #999; }

body.light .tool-info.mobile .col-gray { color: #666; }
body.dark .tool-info.mobile .col-gray { color: #999; }

.learned-time.row span {font-size: 28px; margin: 5px 10px; font-weight: 200;}
.tool-info .panel p {
    font-weight:200;
    color:var(--color-666-999);
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
}
.tool-info .panel {padding-top: 15px;}
.days-report {height: 100%;margin-top: -28px;padding-top: 30px;}
.days-report.progress-table {margin-top: -83px; padding-top: 83px;}

.activityChart .overdueWrapper {
    position: relative;
    background: none;
}
.activityChart .overdueWrapper:before {
    content: "";
    background: none;
    right: 50%;
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    display: block;
}
.activityChart .overdue {
    position: relative;
    margin: 0 auto;
    display: table;
    text-align: left;
    border: 1px #f0f0f0 solid;
}
.activityChart .overdue > div {
    display: table-cell;
    vertical-align: middle;
    height: 52px;
    padding: 0 8px;
    background: #f5f5f5;
}
.activityChart .overdue .overdueCounter {
    color: #CD002B;
    background: #f5f5f5;
}
.activityChart .overdue .overdueCounter.icn {
    padding-left: 80px;
    text-align: right;
    font-size: 36px;
    font-weight: 800;
    background: url(../../img/reports/overdue_icon.svg) #f5f5f5 no-repeat 25% 50%;
    background-size: 36px;
}
.activityChart .overdue .overdueCounter .topText {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
}
.activityChart .overdue .overdueCounter .bottomText {
    font-size: 16px;
    text-transform: uppercase;
}
.activityChart .overdue .separator {
    width: 1px;
    height: 40px;
    background: #F5CFD7;
    padding: 0;
}
.activityChart .overdue .message {
    background: #f5f5f5;
    color: #464646;
    font-size: 14px;
    padding: 20px 30px 20px 10px;
}
.activityChart .overdue .message .topText {
    font-weight: 600;
}
.activatedTip {
    line-height: 1;
    font-weight: bold;
    padding: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 2px;
    z-index: 2500;
}
.activatedTip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: rgba(0, 0, 0, 0.8);
    content: "\25BC";
    position: absolute;
    text-align: center;
}
.activatedTip.n:after {
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
}
/*** END ACTIVITY REPORTS ***/

/*** PREDICTION REPORTS ***/
.predictionChart.chart {
    min-height: 350px;
    height: calc(90% - 32px);
    min-width: 810px;
}
.ie10 .predictionChart.chart,
.ie11 .predictionChart.chart {
    height: 80%;
}
.predictionChart.chart text {
    fill: #414141;
}
.predictionChart.chart .background {
    fill: none;
}
.predictionChart.chart .background.hovered {
    fill: #f8f8f8;
}
.predictionChart.chart .backgroundLine {
    stroke: #ccc;
    fill: none;
    shape-rendering: crispEdges;
}
.predictionChart.chart .horizontalTthLine {
    stroke: var(--highlighted-text-color);
}
.rect { shape-rendering: crispedges; }
.predictionChart.chart .rect0 { fill: var(--highlighted-background-color);}
.predictionChart.chart .rect1 { fill: #e1e1e1;}
.predictionChart.chart .rect2 { fill: #2379FF; }
.predictionChart.chart .rect3 { fill: #999999; }
.predictionChart.chart .rect5 { fill-opacity: 0; }
.predictionChart.chart .activatedBubble,
.predictionChart.chart .tongueActivated {
    fill: #e8ecb9;
}
.predictionChart.chart .activatedBubbleText { text-anchor: middle; fill: #777b47; font-weight: 900; font-size: 14px }
.predictionChart.chart .testedBubble, .predictionChart.chart .tongueTested {
    fill: #b9e5ec;
}
.predictionChart.chart .testedBubbleText { text-anchor: middle; fill: #4c7980; font-weight: 900; font-size: 14px }
.predictionChart.chart .axis path,
.predictionChart.chart .axis line { fill: none; stroke: #cdcdcd; shape-rendering: crispEdges; }
.predictionChart.chart .grid .tick line { stroke-width: 1px; stroke: #cdcdcd; shape-rendering: crispEdges; opacity: 0.5 }
.predictionChart.chart .grid path { stroke-width: 0; }
.predictionChart.chart text.legend { font-size: 13px }
.predictionChart.chart .legend.practiced {fill: #CD002B; }
.predictionChart.chart .legend.new {fill: #e8ecb9; }
.predictionChart.chart .legend.other {fill: #b9e5ec; }
.predictionChart.chart .legend.due {fill:#e1e1e1; }
.predictionChart.chart .axis.x .tick text { fill: #999; font-size: 12px; font-weight: 600 }
.predictionChart.chart .axis.x .tick line { fill: none; stroke: none }
.predictionChart.chart .axis.label  { font-size: 14px }
.predictionChart.chart .axis.tth{ font-size: 14px; fill: var(--highlighted-background-color); }
.predictionChart.chart .axis.y.pad {fill: #fff}

.ie10 .mainForPredictionChart,
.ie11 .mainForPredictionChart {
    height: 80%;
}
.mainForPredictionChart {
    background: var(--background-color-white-middleDarkGray);
}
body.light .mainForPredictionChart { background: white; }
body.dark .mainForPredictionChart { background: #363636; }

.mainForPredictionChart .horizontalTthLine {
    stroke: var(--highlighted-text-color);
}
.mainForPredictionChart text {
    fill: #414141;
}
.mainForPredictionChart .background {
    fill: none;
}
.mainForPredictionChart .background.hovered {
    fill: #f8f8f8;
}
.mainForPredictionChart .backgroundLine {
    stroke: #ccc;
    fill: none;
    shape-rendering: crispEdges;
}
.mainForPredictionChart .rect0 { fill: var(--highlighted-background-color);}
.mainForPredictionChart .rect1 { fill: #e1e1e1;}
.mainForPredictionChart .rect2 { fill: #2379FF; }
.mainForPredictionChart .rect3 { fill: #999; }
.mainForPredictionChart .rect5 { fill-opacity: 0; }
.mainForPredictionChart .activatedBubble,
.mainForPredictionChart .tongueActivated {
    fill: #e8ecb9;
}
.mainForPredictionChart .activatedBubbleText { text-anchor: middle; fill: #777b47; font-weight: 900; font-size: 14px }
.mainForPredictionChart .testedBubble,
.mainForPredictionChart .tongueTested {
    fill: #b9e5ec;
}
.mainForPredictionChart .testedBubbleText { text-anchor: middle; fill: #4c7980; font-weight: 900; font-size: 14px }
.mainForPredictionChart .axis path,
.mainForPredictionChart .axis line { fill: none; stroke: #cdcdcd; shape-rendering: crispEdges; }

.mainForPredictionChart .grid .tick line { stroke-width: 1px; stroke: #cdcdcd; shape-rendering: crispEdges; opacity: 0.5 }
.mainForPredictionChart .grid path { stroke-width: 0; }
.mainForPredictionChart text.legend { font-size: 13px }
.mainForPredictionChart .legend.practiced {fill: #CD002B; }
.mainForPredictionChart .legend.new {fill: #e8ecb9; }
.mainForPredictionChart .legend.other {fill: #b9e5ec; }
.mainForPredictionChart .legend.due {fill:#e1e1e1; }
.mainForPredictionChart .axis.x .tick text { fill: #888; font-size: 12px; font-weight: 600 }
.mainForPredictionChart .axis.device .tick text { fill: #888; font-size: 3.5vw; font-weight: 600 }
@media screen and (min-width: 700px) {
    .mainForPredictionChart .axis.device .tick text {
        font-size: 16px;
    }
}
.mainForPredictionChart .axis.x .tick line { fill: none; stroke: none }
.mainForPredictionChart .axis.label  { font-size: 14px }
.mainForPredictionChart .axis.tth{ fill: var(--highlighted-background-color); }
.mainForPredictionChart .axis.y.pad {fill: #fff}
/* END PREDICTION REPORT */

/*** END REPORTS ***/

/*** Accordion with users list ***/
#reportUsersBlock .familyBlock {
    background: var(--background-color-white-middleDarkGray);
    border-radius: .7rem;
    padding: 10px;
    margin-bottom: 10px;
}
#reportUsersBlock .familyBlock .familyHeading {
    color: var(--color-666-999);
    font-size: 20px;
}
#reportUsersBlock .familyBlock .familyHeading .familyIcon {
    background: var(--icon-reports-family) no-repeat;
    display: block;
    float: right;
    width: 34px;
    height: 22px;
}
#reportUsersBlock .familyBlock .linkGroup a {
    width: 100%;
    display: block;
    padding: 10px;
    background: var(--background-color-gray-darkestGray);
    border-radius: .7rem;
    margin-bottom: 3px;
    color: var(--color-666-999);
    font-size: 17px;
}
#reportUsersBlock .familyBlock a.addChild, #reportUsersBlock .groupBlock a.addGroup {
    color: var(--color-666-999);
    display: block;
    padding: 10px 5px 10px 10px;
    background: var(--background-color-white-darkestGray);
    font-size: 17px;
    border-radius: .7rem;
    cursor: pointer;
}
#reportUsersBlock .familyBlock .linkGroup a.set, #reportUsersBlock .familyBlock a.addChild.set  {
    background: var(--background-lighter-highlight);
    color: var(--highlighted-text-color);
}
#reportUsersBlock .familyBlock a.addChild i, #reportUsersBlock .groupBlock a.addGroup i {
    font-size: 21px;
    float: right;
    position: relative;
    bottom: 3px;
}
#reportUsersBlock .groupBlock {
    background: var(--background-color-white-middleDarkGray);
    border-radius: .7rem;
    padding: 10px;
    height: auto;
    overflow-y: auto;
}
#reportUsersBlock .groupBlock .panelGroup {
    height: calc(100% - 26px);
}
#reportUsersBlock .groupBlock .groupsHeading {
    color: var(--color-666-999);
    font-size: 20px;
}
#reportUsersBlock .groupBlock .groupsHeading .groupIcon {
    background: var(--icon-reports-group) no-repeat;
    display: block;
    float: right;
    width: 34px;
    height: 22px;
}
#reportUsersBlock .panel-group .accordion-group.groupHeading {
    background: var(--background-color-gray-darkestGray);
    border-radius: .7rem;
    margin-bottom: 3px;
}
#reportUsersBlock .panel-group .accordion-group.groupHeading.active {
    background: var(--background-lighter-highlight);
}
#reportUsersBlock .panel-group .accordion-heading {
    color: var(--highlighted-text-color);
    font-size: 20px;
    padding: 10px;
    text-align: left;
    text-transform: none;
}
#reportUsersBlock .panel-group .accordion-heading .accordion-toggle {
    width: 100%;
}
#reportUsersBlock .panel-group .accordion-heading .groupName {
    width: calc(100% - 35px);
    display: inline-block;
}
#reportUsersBlock .accordion-group .accordion-heading .accordion-toggle i {
    color: var(--color-666-999);
    display: inline;
    float: right;
    font-size: 26px;
    position: relative;
    bottom: 3px;
}
#reportUsersBlock .accordion-group.active .accordion-heading .accordion-toggle i {
    color: var(--highlighted-text-color);
}
#reportUsersBlock .panel-group {
    margin-bottom: 10px;
}
#reportUsersBlock .panel-group .accordion-heading.groupHeading:hover {
    background-color: var(--background-color-gray-darkestGray);
}
#reportUsersBlock .panel-group .accordion-heading  {
    cursor: pointer;
}
#reportUsersBlock .panel-group .accordion-heading a {
    color: var(--color-666-999);
    cursor: pointer;
}
#reportUsersBlock .panel-group .groupHeading.active .accordion-heading a {
    color: var(--highlighted-text-color);
}
#reportUsersBlock .panel-group .accordion-body {
    overflow: hidden;
}
#reportUsersBlock .panel-group .accordion-body.collapse {
    -webkit-transition: height 0.3s linear;
    -moz-transition: height 0.3s linear;
    -o-transition: height 0.3s linear;
    transition: height 0.3s linear;
}
#reportUsersBlock .panel-group .accordion-body .accordion-inner {
    padding: 0 8px 5px 8px;
}
#reportUsersBlock .panel-group .accordion-body .accordion-inner > a {
    display: flex;
    align-items: center;
    padding-left: 10px;
    border-radius: .5rem;
    margin-bottom: 2px;
    background: var(--background-color-white-darkestGray);
}
#reportUsersBlock .panel-group .accordion-body .accordion-inner > a:hover,
#reportUsersBlock .panel-group .accordion-body .accordion-inner > a.set {
    background-color: var(--background-color-white-darkestGray);
}
#reportUsersBlock .panel-group .accordion-body .accordion-inner > a > span.text {
    color: var(--color-666-999);
    margin-bottom: 0;
    padding: 10px 0;
    margin-right: 5px;
    display: inline-block;
    width: calc(100% - 35px);
    top: 2px;
    position: relative;
}
#reportUsersBlock .panel-group .accordion-body .accordion-inner > a.set > span.text,
#reportUsersBlock .panel-group .accordion-body .accordion-inner > a:hover > span.text{
    color: var(--highlighted-text-color);
    text-overflow: ellipsis;
    overflow: hidden;
}
#reportUsersBlock .panel-group .accordion-body .accordion-inner > a > .text.active {
    color: #279771;
}
#reportUsersBlock .panel-group .accordion-body .accordion-inner > a > i {display: none;}
#reportUsersBlock .panel-group .accordion-body .accordion-inner > a.set > i {
    display: inline;
    float: right;
    padding: 6px 0;
    font-size: 26px;
    color: var(--highlighted-text-color);
}

/* ----- cancel button add/edit form ----- */
#cancelBtn {
    margin-right: 10px;
}
#cancelBtn > i {
    font-size: 22px;
    bottom: 3px;
    margin-left: 0;
}
#cancelBtn:hover, #cancelBtn:focus {
}
#saveBtn{
    padding-top: 4px;
}
#saveAndDBtn {
    padding-top: 4px;
    margin-right: 10px;
}
#saveAndDBtn img {
    left: 2px;
    position: relative;
    top: 3px;
    width: 18px;
}

/* ---------------- INFOSCREEN iFrame ----------------*/
.infoscreen {
    width: 790px;
    height: 580px;
    border: none;
}
.infoscreen.agreement {
    height: 550px;
}
.addscreen {
    border: none;
    display: block;
    height: 699px;
    width: 684px;
    margin:3px;
    max-height: calc(100vh - 17vh);
    overflow-y: auto !important;
    overflow-x: hidden;
}
.surveyscreen {
    border: none;
    display: block;
    height: 669px;
    width: 684px;
    margin:3px;
    max-height: calc(100vh - 17vh);
    overflow-y: auto !important;
    overflow-x: hidden;
}
.whatsnewscreen {
    border: medium none;
    display: block;
    height: 309px;
    margin: 3px;
    max-height: calc(100vh - 17vh);
    overflow-x: hidden;
    overflow-y: auto !important;
    width: 684px;
}
.recommendScreen {
    border: none;
    display: block;
    height: 530px;
    width: 770px;
    max-height: calc(100vh - 17vh);
    overflow-y: auto !important;
    overflow-x: hidden;
}
.stickToMeScreen {
    border: none;
    display: block;
    height: 390px;
    width: 684px;
    margin:3px;
    max-height: calc(100vh - 17vh);
    overflow-y: auto !important;
    overflow-x: hidden;
}
.GDPRScreen {
    border: none;
    display: block;
    height: 80vh;
    width: calc(100% - 3px);
    margin: 3px;
    max-height: 83vh;
    overflow-y: auto !important;
    overflow-x: hidden;
}
.reveal-modal.GDPR {
    top: 7vh;
}
.reveal-modal.ad-visit {
    left: 46%;
    top: calc(100vh - 93vh);
    width: auto;
}
.reveal-modal.info-visit {
    left: 46%;
    top: calc(100vh - 93vh);
    width: 687px;
}
.reveal-modal.exit-visit {
    left: 46%;
    top: 18vh;
    width: 687px;
}
.collection-modal {
    position: relative;
    left: 30%;
    top: calc(100vh - 93vh);
    width: 40%;
    min-width: 600px;
    overflow: hidden;
}

/* ---------------- INFOSCREEN ----------------*/
.reveal-modal.first-visit {
    top: 150px;
    left: 40%;
    overflow: visible;
    height: 630px;
    width: 790px;
}
.reveal-modal.first-visit .row.remember {
    padding: 8px 5px 7px 20px;
    background-color: var(--background-color-white-darkestGray);
    border-top: 1px solid var(--border-ddd-666);
}
.reveal-modal.first-visit .row.remember span { cursor: pointer; }
.reveal-modal.first-visit .row.reveal-modal-footer { background-color: var(--background-color-white-darkestGray); }
.reveal-modal.first-visit .icon_check.checkbox,
.reveal-modal.first-visit .set > .icon_check.checkbox { margin: 0 10px 5px 0; }

/* ---------------- Agreement Modal ----------------*/
.reveal-modal.agreementModal {
    left: 43%;
    overflow: visible;
    height: 630px;
    width: 790px;
}
.reveal-modal.agreementModal .row.remember {
    padding: 8px 5px 7px 20px;
    background-color: var(--background-color-white-darkestGray);
    border-top: 1px solid var(--border-ddd-666);
}
.reveal-modal.agreementModal .row.remember span { cursor: pointer; }
.reveal-modal.agreementModal .row.reveal-modal-footer { background-color: var(--background-color-white-darkestGray); }
.reveal-modal.agreementModal .icon_check.checkbox,
.reveal-modal.agreementModal .set > .icon_check.checkbox { margin: 0 10px 5px 0; }

/* Prepare for a test => direction page */
#direction {
    background: var(--background-color-white-middleDarkGray) none repeat scroll 0 0;
    margin-left: 33px;
    min-height: 300px;
    padding-left: 40px;
    width: calc(100% - 30px);
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}
#direction > .item { clear: both; margin-top: 10px; height: 60px; color: #999; cursor: pointer; }
#direction > .item.active { color: var(--highlighted-text-color); }
#direction > .item:hover { color: var(--highlighted-text-color); }
#direction > .item:first-child { margin-top: 30px; }
#direction > .item > div { float: left; }
#direction > .item > .radio { margin-top: 6px; }
#direction > .item > .img { font-size: 36px; margin-left: 25px; }
#direction > .item:last-child > .radio { margin-top: 10px; }
#direction > .item:last-child > .img { margin-top: 8px; }
#direction > .item > .text { margin-left: 20px; max-width: 85%; }
#direction > .item > .text > h3 {
    font-weight: normal;
    color: inherit;
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
}
#direction > .item > .text > p {
    font-size: 14px;
    margin-bottom: 5px;
}
#partnerLogo {
    margin-right: 30px;
    margin-left: 30px;
    cursor: pointer;
    vertical-align: top;
}
#partnerLogo img {
    /*height: 29px;*/
    max-width: 220px;
    width: auto;
    height: 60px;
    padding: 0.5rem 0.8rem;
    margin-top: -15px;
    background: #fff;
    border-radius: 0.5rem;
    object-fit: contain;
}
/* Achievements buttons */
#btnSurvey i {
    font-size: 35px;
    bottom: 3px;
    position: relative;
}
#achievementsBtn img, #streakBtn img {
    height: 32px;
    margin-top: 3px;
}
#leaderBoardBtn img {
    height: 50px;
    position: relative;
    bottom: 6px;
    right: 3px;
}
.achievementsCounter {
    background-color: var(--highlighted-background-color);
    border: 2px solid var(--background-color-white-middleDarkGray);
    border-radius: 50%;
    height: 21px;
    left: 19px;
    position: absolute;
    top: -5px;
    width: 22px;
}
.achievementsCounter > .achi_bubble {
    color: white;
    display: block;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    text-align: center;
    bottom: 1px;
}
.streakCounter {
    color: var(--highlighted-orange-white-text-color);
    font-size: 18px;
    font-weight: normal;
    padding: 0;
    position: absolute;
    cursor: default;
    top: 5px;
    min-width: 25px;
    right: 38px;
    text-align: right;
}
#streakBtn .tooltip {
    right: -90px;
    text-align: center;
    top: 50px;
    width: 220px;
}
#leaderBoardBtn .tooltip {
    right: -90px;
    text-align: center;
    top: 50px;
    width: 220px;
    overflow-wrap: break-word;
    white-space: normal;
}

/* Notification center */
#notification-center {
    font-size: 26px;
    vertical-align: top;
    margin-right: 20px;
    position: relative;
    bottom: 10px;
}
#notification-center > div > i {
    color: var(--color-icons);
    cursor: pointer;
    font-size: 32px;
    bottom: -4px;
    position: relative;
}
#notification-center > div > i.triggered {
    color: var(--color-grayOld-whiteNew);
}
#notification-center > div > span.notify-counter {
    background-color: #FF0000;
    border-radius: 50%;
    display: block;
    height: 25px;
    left: 10px;
    width: 25px;
    position: absolute;
    top: 3px;
}
#notification-center > div > span.notify-counter > .noti_bubble {
    color: white;
    display: block;
    font-size: 13px;
    font-weight: normal;
    margin: auto;
    min-width: 23px;
    padding: 0;
    position: relative;
    text-align: center;
    top:2px;
}
#notification-center > div > span.notify-counter > .noti_bubble.first {
    left: 0;
}
#notification-center > ul.notifications-block {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    color: #999;
    height: auto;
    left: -420px;
    padding: 0;
    position: absolute;
    top: 50px;
    width: 450px;
    z-index: 999;
}
#notification-center > ul.notifications-block { display: block; border-radius: .5rem; }
#notification-center > ul.notifications-block.subject-menu.f-dropdown:before,
#notification-center > ul.notifications-block.subject-menu.f-dropdown:after { left: 94%; }
#flash-messages-block > .notify-flash-message.f-dropdown:before, #flash-messages-block > .notify-flash-message.f-dropdown:after { left: 94%; }
#notification-center > ul.notifications-block.subject-menu.f-dropdown:before { border-color: transparent transparent var(--border-8d8d8d-222); }
#notification-center > ul.notifications-block.subject-menu.f-dropdown:after { border-color: transparent transparent var(--border-white-222); }
#notification-center > ul.notifications-block > li {
    cursor: default;
    overflow: hidden;
    width: 100%;
    padding: 0;
}
#notification-center > ul.notifications-block > li:hover { color: #8D8D8D; }
#flash-messages {
    color: #339573;
    font-size: 25px;
    margin-right: 10px;
    position: relative;
}
#flash-messages-block > div {
    width: 448px;
    position: absolute;
    z-index: 1009;
    left: -457px;
    top: 41px;
}

/* notify messages */
#flash-messages-block > .notify-flash-message,
#notification-center > ul.notifications-block > li.notify-message > .notify-flash-message {
    font-size: 16px;
    text-align: left;
    padding: 20px 20px 10px 20px;
    border-bottom: 1px solid #eee;
    -webkit-box-shadow: 0 6px 4px 0 rgba(50, 50, 50, 0.3);
    -moz-box-shadow: 0 6px 4px 0 rgba(50, 50, 50, 0.3);
    box-shadow: 0 5px 4px 0 rgba(50, 50, 50, 0.3);
}
#flash-messages-block > .notify-flash-message > i { float: right; cursor: pointer; }
#notification-center > ul.notifications-block > li.notify-message > .notify-flash-message > i { cursor: pointer; }

#flash-messages-block > .notify-flash-message > i:first-child,
#notification-center > ul.notifications-block > li.notify-message > .notify-flash-message > i:first-child { float:left; padding-right: 10px; }

#flash-messages-block > .notify-flash-message > i:last-child,
#notification-center > ul.notifications-block > li.notify-message > .notify-flash-message > div > i:last-child { float:right; cursor: pointer; }

#flash-messages-block > .notify-flash-message > div,
#notification-center > ul.notifications-block > li.notify-message > .notify-flash-message > div {
    white-space: normal;
    padding-left: 5px;
    padding-bottom: 5px;
    line-height: 17px;
}

/* notify-warning message */
#flash-messages-block > .notify-warning,
#notification-center > ul.notifications-block > li.notify-message > .notify-warning { background-color: #FCF5A5; color: #B7923A; }

#flash-messages-block > .notify-flash-message.f-dropdown.corner-warning:before { border-color: transparent transparent #FCF5A5; }
#notification-center > ul.notifications-block.subject-menu.f-dropdown.corner-warning:before { border-color: transparent transparent #000000; }

#flash-messages-block > .notify-flash-message.f-dropdown.corner-warning:after { border-color: transparent transparent #000000 }
#notification-center > ul.notifications-block.subject-menu.f-dropdown.corner-warning:after { border-color: transparent transparent #FCF5A5; }
/* end notify-warning message */

/* notify-error message */
#flash-messages-block > .notify-error,
#notification-center > ul.notifications-block > li.notify-message > .notify-error { background-color: #F5CBD5; color: #970D24; }

#flash-messages-block > .notify-flash-message.f-dropdown.corner-error:before { border-color: transparent transparent #F5CBD5; }
#notification-center > ul.notifications-block.subject-menu.f-dropdown.corner-error:before { border-color: transparent transparent #000000; }

#flash-messages-block > .notify-flash-message.f-dropdown.corner-error:after { border-color: transparent transparent #ffffff; }
#notification-center > ul.notifications-block.subject-menu.f-dropdown.corner-error:after { border-color: transparent transparent #F5CBD5; }
/* end notify-error message */

/* notify-success message */
#flash-messages-block > .notify-success,
#notification-center > ul.notifications-block > li.notify-message > .notify-success { background-color: #D5EAE3; color: #518070; }

#flash-messages-block > .notify-flash-message.f-dropdown.corner-success:before { border-color: transparent transparent #D5EAE3; }
#notification-center > ul.notifications-block.subject-menu.f-dropdown.corner-success:before { border-color: transparent transparent #000000; }

#flash-messages-block > .notify-flash-message.f-dropdown.corner-success:after { border-color: transparent transparent #ffffff; }
#notification-center > ul.notifications-block.subject-menu.f-dropdown.corner-success:after { border-color: transparent transparent #D5EAE3; }
/* end notify-success message */

/* notify-info message */
#flash-messages-block > .notify-info,
#notification-center > ul.notifications-block > li.notify-message > .notify-info { background-color: var(--background-color-gray-middleDarkGray); color: #3F7A66; }

#flash-messages-block > .notify-flash-message.f-dropdown.corner-info:before { border-color: transparent transparent var(--background-color-gray-middleDarkGray); }
#notification-center > ul.notifications-block.subject-menu.f-dropdown.corner-info:before { border-color: transparent transparent #000000; }
#flash-messages-block > .notify-flash-message.f-dropdown.corner-info:after { border-color: transparent transparent #ffffff; }
#notification-center > ul.notifications-block.subject-menu.f-dropdown.corner-info:after { border-color: transparent transparent var(--background-color-gray-middleDarkGray); }
/* end notify-info message */

#notification-center > ul.notifications-block > li.notify-header { height: 50px; }
#notification-center > ul.notifications-block > li.notify-header > p {
    text-transform: uppercase;
    font-size: 16px;
    margin-top: 20px;
}
#notification-center > ul.notifications-block > li.notify-header > .action {
    cursor: pointer;
    color: #8D8D8D;
}
#notification-center > ul.notifications-block > li.notify-header > p { color: var(--highlighted-text-color); }
#notification-center > ul.notifications-block > li.notify-header > p:first-child { margin-left: 20px; }
#notification-center > ul.notifications-block > li.notify-header > p:last-child { margin-right: 20px; }
#notification-center > ul.notifications-block > li.notify-header > p:last-child > span {
    display: inline-block;
    float: left;
    margin-right: 10px;
}
#notification-center > ul.notifications-block > li.notify-header > p:last-child > span:hover {
    color: var(--highlighted-text-color);
}
#notification-center > ul.notifications-block > li.notify-content {
    border-top: 1px solid var(--border-eee-222);
    border-bottom: 1px solid var(--border-eee-222);
    max-height: 325px;
    overflow: auto;
}
#notification-center > ul.notifications-block > li.notify-content > p {
    font-size: 20px;
    text-align: center;
    padding: 20px;
}
#notification-center > ul.notifications-block > li.notify-content  .marketing-item {
    cursor: default;
    background-image: url(../../img/ma_notification.png);
    display: table;
    height: 161px;
    padding: 10px;
    width: 100%;
    border-top: 1px solid #eee;
}
#notification-center > ul.notifications-block > li.notify-content  .marketing-item > .cover {
    width: 8%;
    height: 120px;
    display: table-cell;
    vertical-align: middle;
    cursor: default;
}
#notification-center > ul.notifications-block > li.notify-content  .marketing-item > .cover img {
    max-height: 120px;
    max-width: 80px;
}
#notification-center > ul.notifications-block > li.notify-content  .marketing-item div {
    cursor: default;
}
#notification-center > ul.notifications-block > li.notify-content  .marketing-item > div.text-block {
    width: 86%;
    text-align: left;
}
#notification-center > ul.notifications-block > li.notify-content  .marketing-item > div.text-block .title {
    color: var(--highlighted-text-color);
    font-size: 16px;
    line-height: 16px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 390px;
}
#notification-center > ul.notifications-block > li.notify-content  .marketing-item > div.text-block .marketing-text {
    font-size: 14px;
    height: 100px;
    line-height: 14px;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    width: 390px;
}
#notification-center > ul.notifications-block > li.notify-content  .marketing-item .hours {
    font-size: 12px;
    color: #8D8D8D;
}
#notification-center > ul.notifications-block > li.notify-content  .marketing-item > div.text-block .marketing-text a {
    color: var(--highlighted-text-color);
    text-decoration: underline;
}
#notification-center > ul.notifications-block > li.notify-content  .marketing-item > div.notify-close {
    width: 6%;
    display: table-cell;
    vertical-align: top;
}
#notification-center > ul.notifications-block > li.notify-content  .marketing-item > div.notify-close > a > i {
    font-size: 20px;
    margin-top: -4px;
    color: #555;
}
#notification-center > ul.notifications-block > li.notify-content  .marketing-item > div.notify-close > a > i:hover {
    color: var(--highlighted-text-color);
}
#notification-center > ul.notifications-block > li.notify-content  .notify-item {
    height: 80px;
    padding: 10px;
    width: 100%;
    display: table;
    cursor: default;
    border-top: 1px solid var(--border-e0e0e0-666);
}
#notification-center > ul.notifications-block > li.notify-content  .notify-item.notify-new {
    background-color: var(--background-lighter-highlight);
}
body.darkTheme #notification-center > ul.notifications-block > li.notify-content  .notify-item.notify-new {
    background-color: #363636;
    border-top: 1px solid #222;
}
#notification-center > ul.notifications-block > li.notify-content  .notify-item > .cover {
    width: 8%;
    height: 60px;
    display: table-cell;
    vertical-align: middle;
    cursor: default;
}
#notification-center > ul.notifications-block > li.notify-content  .notify-item div {
    cursor: default;
}
#notification-center > ul.notifications-block > li.notify-content  .notify-item > .cover img {
    max-height: 60px;
    max-width: 40px;
}
#notification-center > ul.notifications-block > li.notify-content  .notify-item > div.text-block {
    width: 86%;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}
#notification-center > ul.notifications-block > li.notify-content  .notify-item > div.text-block .title {
    font-size: 14px;
    line-height: 16px;
    width: 280px;
    /*text-overflow: ellipsis;*/
    white-space: normal;
    overflow: hidden;
}
#notification-center > ul.notifications-block > li.notify-content  .notify-item > div.text-block .hours {
    font-size: 12px;
    color: #999;
}
#notification-center > ul.notifications-block > li.notify-content  .notify-item > div.text-block .cards-counter {
    font-size: 12px;
    margin-top: 5px;
    color: #999;
}
#notification-center > ul.notifications-block > li.notify-content  .notify-item > div.text-block .cards-counter > a {
    text-decoration: underline;
}
#notification-center > ul.notifications-block > li.notify-content  .notify-item,
#notification-center > ul.notifications-block > li.notify-content  .notify-item span {
    color: #999;
}
#notification-center > ul.notifications-block > li.notify-content  .notify-item > div.notify-close {
    width: 6%;
    display: table-cell;
}
#notification-center > ul.notifications-block > li.notify-content  .notify-item > div.notify-close > a > i {
    font-size: 20px;
    margin-top: -4px;
    color: #555;
}
#notification-center > ul.notifications-block > li.notify-content  .notify-item > div.notify-close > a > i:hover {
    color: var(--highlighted-text-color);
}
#notification-center > ul.notifications-block > li.notify-option {
    height: 70px;
    background-color: var(--highlighted-background-color);
    color: white;
}
#notification-center > ul.notifications-block > li.notify-option > div {
    float: left;
    height: 70px;
}
#notification-center > ul.notifications-block > li.notify-option > div.option-switch {
    width: 13%;
    padding: 25px 12px;
}
#notification-center > ul.notifications-block > li.notify-option > div.option-switch i{
    background: white;
    border: solid 1px var(--border-999-666);
    font-size: 18px;
}
#notification-center > ul.notifications-block > li.notify-option > div.option-switch .icon_check.checkbox::before {
    left: -1px;
    top: 2px;
}
#notification-center > ul.notifications-block > li.notify-option > div.text {
    width: 70%;
    color: var(--color-white-222);
    text-align: left;
    cursor: default;
}
#notification-center > ul.notifications-block > li.notify-option > div.text :first-child {
    font-size: 17px;
    font-weight: bold;
    margin: 15px 0 7px 0;
}
#notification-center > ul.notifications-block > li.notify-option > div.text :last-child {
    font-size: 12px;
}
#notification-center > ul.notifications-block > li.notify-option > div.great-icon {
    width: 7%;
    padding: 15px 0;
    cursor: default;
}
#notification-center > ul.notifications-block > li.notify-option > div.great-icon i {
    color: var(--color-white-222);
    font-size: 32px;
}
#notification-center > ul.notifications-block > li.notify-footer {
    height: 45px;
}
#notification-center > ul.notifications-block > li.notify-footer > p {
    text-align: center;
    font-size: 16px;
    margin: 15px auto 0 auto;
    text-transform: uppercase;
}
#notification-center > ul.notifications-block > li.notify-footer > p:not(.disabled):hover {
    color: var(--highlighted-text-color);
    cursor: pointer !important;
}

/* Fixes */
#deactivateBtn, #reactivateBtn { position: relative; top: 1px; margin-left: 10px;}
#subjectDropDown .phaseList tr td.editMode { vertical-align: top; padding-top: 12px; }
#subjectDropDown .phaseList tr td.units.td_icon { vertical-align: top; padding-top: 9px; }
#subjectDropDown .phaseList tr td.units.td_icon.editMode { padding-top: 17px; }
#subjectDropDown .phaseList tr td.editMode i.icon_plus { padding-top: 11px; }
#subjectDropDown .phaseList tr td.editMode i.icon_trash_alt { padding-top: 10px; }

#selectItemLib .phaseList tr td.editMode { vertical-align: top; padding-top: 12px; }
#selectItemLib .phaseList tr td.units.td_icon { vertical-align: top; padding-top: 9px; }
#selectItemLib .phaseList tr td.editMode i.icon_plus { padding-top: 11px; }
#selectItemLib .phaseList tr td.units.td_icon .icon_pencil.active { padding-top: 7px; display: block; }
/* end fixes */

/* icon phase-6 */
#changePhaseDDL .p6-dropdown .button.secondary .p6-button {
    background-image: var(--icon-p6-simple);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
    display: inline-block;
    float: right;
    height: 28px;
    width: 28px;
    margin-left: 4px;
    position: relative;
    top: -6px;
}
#changePhaseDDL .p6-dropdown .button.secondary:not(.disabled):hover .p6-button,
#changePhaseDDL .p6-dropdown .button.secondary:not(.disabled):focus .p6-button{
    background-image: var(--icon-p6-current);
}

/*multimedia*/
.addPage .file .progress_upload {
    width: 300px;
}
.addPage .file {
    height: 80px;
    width: 80px;
    max-height: 80px;
    max-width: 80px;
    border-radius: .5rem;
}
.addPage .thumbnail {
    min-width: 80px;
    min-height: 80px;
    max-width: 80px;
    max-height: 80px;
}
.addPage .thumbnail .icon.icon-speaker {
    font-size: 40px;
    padding-top: 20px;
    padding-left: 10px;
    min-width: 80px;
    min-height: 80px;
    max-width: 80px;
    max-height: 80px;
}
.addPage .thumbnail .icon.icon-speaker .delete-media {
    font-size: 14px;
}
.addPage .thumbnail .icon.icon-speaker:hover {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);;
    -ms-transform: scale(1.1, 1.1);;
    -o-transform: scale(1.1, 1.1);;
    transform: scale(1.1, 1.1);;
}
.addPage .thumbnail img {
    max-width: 80px;
    padding-right: 5px;
    max-height: 80px;
}
.addPage .file .hideit,
.addPage .file .overtext {
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.addPage .file .hideit .file-upload {
    width: 70px;
    height: 70px;
    cursor: pointer;
}
.addPage .file .overtext .icon_plus {
    font-size: 65px;
    color: #999;
    position: relative;
    left: -2px;
}
.addPage .recorder {
    width: 30px;
    height: 53px;
    position: relative;
}
.addPage .recorder .tip-bottom {
    width: 160px;
    right: -66px;
    top: 40px;
}
.addPage .recorder #audioInput {
    position: relative;
    top: 9px;
    left: 3px;
}
.addPage .recorder .overtext {
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.addPage .recorder .overtext.disabled {
    cursor: default;
}
.addPage .recorder .overtext .icon_mic {
    font-size: 25px;
    color: #999;
    margin: auto;
    display: block;
    width: 27px;
}
.addPage .recorder .overtext.disabled .icon_mic {
    opacity: .7;
}
.addPage .recorder .overtext:not(.disabled):hover .icon_mic {
    color: var(--highlighted-text-color);
}
.addPage .recorder .overtext .icon_stop_alt2 {
    font-size: 26px;
    color: var(--highlighted-text-color);
    margin: auto;
    display: block;
    width: 27px;
    animation: fadeInOut 1s linear infinite;
    position: relative;
    top: 0;
}
@keyframes fadeInOut {
    0%,100% { opacity: 0 }
    50% { opacity: 1 }
}
.addPage .icon-wrapper {
    height: 100%;
    min-height: 40px;
    max-height: 40px;
    margin-left: 5px;
    margin-top: 3px;
}
.addPage .icon-wrapper > img {
    max-width: 35px;
    max-height: 35px;
}
.addPage .icon-wrapper > .icon_image,
.addPage .icon-wrapper > .icon_volume-high_alt,
.addPage .icon-wrapper > .icon_comment_alt {
    font-size: 25px;
}
.addPage .form.custom ul li {
    cursor: default;
}
.addPage .form.custom ul li .button.secondary {
    background: transparent;
    color: #999;
    margin-right: 0;
}
.addPage .form.custom ul li .button.secondary:hover, .addPage .form.custom ul li .button.secondary:focus {
    color: var(--highlighted-text-color);
}
.addPage .file_limit.error {
    margin-left: 0;
    text-align: center;
    margin-top: 10px;
    min-width: 250px;
}
.media-buttons {
    position: absolute;
    right: 0;
    top: 0;
    height: 50px;
}
.media-buttons > li {
    display: inline-block;
    top: 0;
    float: left;
}
.media-dropdown {
    position: relative;
    list-style: none;
}
.media-window.mediaMinWidth {
    min-width: 260px;
}
.media-window .file {
    margin-top: 0;
}
.media-dropdown .media-window {
    background: var(--background-color-white-darkestGray);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-999-666);
    padding: 10px;
    margin: 10px;
    height: auto;
    max-height: 140px;
    text-transform: none;
    position: absolute;
    bottom: 100%;
    z-index: 99;
    display: none;
    list-style: none outside none;
    overflow: hidden;
    border-radius: .5rem;
}
.media-dropdown.open .media-window {
    display: block;
    position: absolute;
    right: -10px;
}
.media-dropdown.open:before,
.media-dropdown.open:after {
    border-image: none;
    border-style: solid;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    width: 0;
    z-index: 100;
    left: 35%;
    border-width: 10px 10px 0;
}
.media-dropdown.open:before {
    border-color: var(--border-ccc-666) transparent transparent;
    top: -10px;
}
.media-dropdown.open:after {
    border-color: var(--border-white-222) transparent transparent;
    top: -11px;
}
.media-dropdown .media-window > li {
    padding-right: 0;
    float: left;
    display: block;
}
.media-dropdown.open .thumbnail .delete-media {
    position: absolute;
    display: none;
    right: 0;
    top: 0;
}
.media-dropdown.open .thumbnail:hover .delete-media {
    display: block;
}
.image-background {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1015;
    background-color: rgba(0,0,0,0.8);
    text-align: center;
}
.image-background .image-wrapper {
    position: relative;
    display: inline-block;
    top: 15%;
    -webkit-box-shadow: 0 0 20px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: 0 0 20px 5px rgba(0,0,0,0.75);
    box-shadow: 0 0 20px 5px rgba(0,0,0,0.75);
}
.image-background #zommedImage {
    background: #fff;
    border: 2px solid #777;
    display: inline;
    padding: 20px;
    margin: auto;
    min-height: 200px;
    max-height: 640px;
    min-width: 200px;
    max-width: 640px;
    position: relative;
    z-index: 1020;
}
.image-background .image-wrapper .close-icon {
    position: absolute;
    right: -13px;
    top: -13px;
    z-index: 1021;
    cursor: pointer;
}
.image-background .reveal-modal {
    text-align: left;
}

/* -----------------------------------------
   Interactive tour
----------------------------------------- */
.interactive-tour.tour-practice-1 { top: -155px; } /* activation - practice question */
.interactive-tour.tour-practice-2 { top: -155px; left: auto; right: 35px; } /* activation - practice answer */
.de .interactive-tour.tour-practice-2 { top: -155px; left: auto; right: 35px; } /* activation - practice answer */
.interactive-tour.tour-practice-3 { top: auto; bottom: 60px; } /* activation - practice learn direction */
.interactive-tour.tour-practice-4 { top: 100px; } /* activation - practice user answer */
.interactive-tour.tour-practice-5 { left: auto; top: auto; bottom: 55px; } /* activation - practice submit button */
.interactive-tour.tour-practice-6 { left: auto; right: 15px; top: 60px; } /* activation - practice phases counter */
.interactive-tour.tour-practice-7 { top: 40px;} /* activation - practice progress bar */
.interactive-tour.tour-practice-8 { top: 65%; } /* activation - practice retype answer */
.interactive-tour.tour-practice-9 { top: auto; left: auto; right: 15%; bottom: 55px; } /* activation - practice i was right */
.interactive-tour.tour-practice-10 { top: auto; left: auto; right: 15%; bottom: 55px; } /* activation - practice i was wrong */
.interactive-tour.tour-practice-11 { top: auto; bottom: 70px; left: auto; right: 10px; } /* activation - practice submit button */

.interactive-tour {
    background: var(--background-color-white-darkestGray);
    padding: 0;
    height: auto;
    max-height: none;
    width: auto;
    min-width: 425px;
    max-width: 550px;
    font-size: 14px;
    list-style: none outside none;
    margin: 0;
    position: absolute;
    top: -100px;
    left: 25px;
    z-index: 98;
    box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.40);
    border-radius: 3px;
    cursor: auto;
}
.interactive-tour .header {
    height: 40px;
    width: 100%;
    background-color: var(--highlighted-background-color);
}
.interactive-tour .header .head-text {
    color: var(--color-white-222);
    padding: 10px 20px 10px 20px;
    margin: 0;
    font-size: 17px;
}
.interactive-tour .message {
    margin-bottom: 10px;
    margin-top: 10px;
    margin-right: 10px;
    line-height: 20px;
    text-transform: none;
    white-space: normal;
    color: var(--color-454545-999);
    font-weight: 100;
    font-size: 17px;
    padding: 5px 10px;
}
.interactive-tour .tour-foots {
    margin: 20px 10px 10px 10px;
    background: var(--icon-foot-prints) no-repeat;
    height: 60px;
    width: 60px;
}
.interactive-tour .close {
    position: absolute;
    right: 10px;
    top: 3px;
    width: 18px;
    height: 18px;
    color: var(--color-white-222);
    font-size: 20px;
    margin-right: 5px;
    margin-top: 5px;
}
.interactive-tour .close:hover {
    color: #000;
}
.interactive-tour .next {
    font-size: 14px;
    cursor: pointer;
    float: right;
    text-transform: none;
    white-space: normal;
    color: var(--color-666-999);
    border: 1px solid var(--color-666-999);
    margin-bottom: 10px;
    margin-right: 10px;
    border-radius: .7rem;
}
.interactive-tour > .next span {
    position: relative;
    text-transform: uppercase;
    padding: 5px 10px;
    display: block;
}
.interactive-tour .next:hover {
    border-color: var(--highlighted-border-color);
}
.interactive-tour .next:hover,
.interactive-tour .next:hover span {
    color: var(--highlighted-text-color);
    cursor: pointer;
}
.interactive-tour:before {
    border-image: none;
    border-style: solid;
    border-width: 10px;
    content: "";
    display: block;
    height: 0;
    left: 11px;
    position: absolute;
    width: 0;
    z-index: 98;
}
.interactive-tour:after {
    border-image: none;
    border-style: solid;
    border-width: 10px;
    content: "";
    display: block;
    height: 0;
    left: 11px;
    position: absolute;
    width: 0;
    z-index: 98;
}
.interactive-tour.tour-right:after,
.interactive-tour.tour-right:before { left: auto; right: 15px; }
.interactive-tour.top:before {
    border-color: transparent transparent var(--highlighted-border-color);
    top: -21px;
}
.interactive-tour.top:after {
    border-color: transparent transparent var(--highlighted-border-color);
    top: -20px;
}
.interactive-tour.bottom:before {
    border-color: var(--border-white-222) transparent transparent;
    bottom: -21px;
}
.interactive-tour.bottom:after {
    border-color: var(--border-white-222) transparent transparent;
    bottom: -20px;
}
.interactive-tour.tour-right:before {
    left: auto;
    right: 11px;
}
.interactive-tour.tour-right:after {
    left: auto;
    right: 11px;
}
.interactive-modal .set > .icon_check.checkbox {
    margin: 5px 10px 5px 0;
}
.game-tour {
    background: var(--background-color-white-darkestGray) none repeat scroll 0 0;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.4);
    cursor: auto;
    font-size: 14px;
    height: auto;
    left: 34px;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: left;
    top: 152px;
    width: 390px;
    z-index: 98;
}
.game-tour .header {
    height: 40px;
    width: 100%;
    background-color: var(--highlighted-background-color);
}
.game-tour .header .head-text {
    color: var(--color-white-222);
    padding: 10px 20px 10px 20px;
    margin: 0;
    font-size: 17px;
}
.game-tour .tour-foots {
    margin: 20px 10px 10px 10px;
    background: var(--icon-foot-prints) no-repeat;
    height: 60px;
    width: 60px;
}
.game-tour p.message {
    word-wrap: break-word;
    white-space: pre-line;
    margin-top: 20px;
}
.game-tour .close {
    position: absolute;
    right: 10px;
    top: 3px;
    width: 18px;
    height: 18px;
    color: var(--color-white-222);
    font-size: 20px;
    margin-right: 5px;
    margin-top: 5px;
}
.game-tour .ok {
    font-size: 16px !important;
    cursor: pointer;
    float: right;
    text-transform: none;
    white-space: normal;
    color: #646464;
    margin-bottom: 15px;
    margin-right: 10px;
}
.game-tour > .ok span {
    position: relative;
    border: 1px solid var(--highlighted-border-color);
    text-transform: uppercase;
    padding: 5px 10px;
}
.game-tour .ok:hover,
.game-tour .ok:hover span {
    color: var(--highlighted-text-color);
    cursor: pointer;
}
.game-tour:after {
    border-color: transparent transparent var(--highlighted-border-color);
    top: -20px;
    left: 10px;
}
.game-tour:after {
    border-image: none;
    border-style: solid;
    border-width: 10px;
    content: "";
    display: block;
    height: 0;
    right: 6px;
    position: absolute;
    width: 0;
    z-index: 98;
}
.card-item.animate-repeat.ng-leave {
    -webkit-animation-name: cardAnimation;
    animation-name: cardAnimation;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-animation-timing-function: easeInExpo;
    animation-timing-function: easeInExpo;
}

@-webkit-keyframes cardAnimation {
    0% { right: 0; opacity: 1; }
    100% { right: 100%; opacity: 0.6; }
}

@keyframes cardAnimation {
    0% { right: 0; opacity: 1; }
    100% { right: 100%; opacity: 0.6; }
}

.card-item.animate-repeat.ng-leave > .card-animation {
    -webkit-animation-name: cardBoxShadow;
    animation-name: cardBoxShadow;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-animation-timing-function: easeInExpo;
    animation-timing-function: easeInExpo;
}

@-webkit-keyframes cardBoxShadow {
    0% {
        -webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,0.25);
        -moz-box-shadow: 0 0 3px 0 rgba(0,0,0,0.25);
        box-shadow: 0 0 3px 0 rgba(0,0,0,0.25);
    }
    15% {
        -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
        -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
        box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
    }
    40% {
        -webkit-box-shadow: 0 0 12px 0 rgba(0,0,0,0.25);
        -moz-box-shadow: 0 0 12px 0 rgba(0,0,0,0.25);
        box-shadow: 0 0 12px 0 rgba(0,0,0,0.25);
    }
    100% {
        -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.25);
        -moz-box-shadow: 0 0 15px 0 rgba(0,0,0,0.25);
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.25);
    }
}
@keyframes cardBoxShadow {
    0% {
        -webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,0.25);
        -moz-box-shadow: 0 0 3px 0 rgba(0,0,0,0.25);
        box-shadow: 0 0 3px 0 rgba(0,0,0,0.25);
    }
    15% {
        -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
        -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
        box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
    }
    40% {
        -webkit-box-shadow: 0 0 12px 0 rgba(0,0,0,0.25);
        -moz-box-shadow: 0 0 12px 0 rgba(0,0,0,0.25);
        box-shadow: 0 0 12px 0 rgba(0,0,0,0.25);
    }
    100% {
        -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.25);
        -moz-box-shadow: 0 0 15px 0 rgba(0,0,0,0.25);
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.25);
    }
}

.card-item.animate-repeat.ng-leave .lines-left, .card-item.animate-repeat.ng-leave .lines-right {
    display: none;
}
.card-media {
    position: relative;
    padding-top: 20px;
}
.card-media .media-image {
    position: relative;
    height: 150px;
}
.card-media .media-image img {
    max-height: 150px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}
.card-media .pagination {
    position: relative;
    text-align: center;
    padding-top: 10px;
}
.card-media .pagination span {
    text-decoration: none;
    display: inline-block;
    font-size: 11px;
    height: 10px;
    width: 10px;
    line-height: 10px;
    background: #fff;
    border-radius: 10px;
    text-indent: -9999px;
    margin-right: 10px;
    -webkit-box-shadow: 0 0 2px #4E443C;
    -moz-box-shadow: 0 0 2px #4E443C;
    box-shadow: 0 0 2px #4E443C;
    cursor: pointer;
}
.card-media .pagination span.active,
.card-media .pagination span.active:hover{
    background: #b2b2b2;
    opacity: 1;
}
.card-media .pagination span:hover {
    background: #339573;
}
.card-audio .icon {
    width: 1.5em;
}
.sync-container {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    margin-left: -230px;
    margin-top: -50px;
    display: block;
    width: 500px;
}
.sync-loader {
    position: relative;
    display: block;
    width: 100%;
    height: 10px;
    margin-top: 38px;
}

/* ooo, css circles*/
.sync-circle {
    display: inline-block;
    position: relative;
    /* key up the animations! */
    -webkit-animation: dotloader 2.5s infinite;
    -moz-animation: dotloader 2.5s infinite;
    -ms-animation: dotloader 2.5s infinite;
    -o-animation: dotloader 2.5s infinite;
    animation: dotloader 2.5s infinite;
}

.sync-circle + .sync-circle {
    margin-left: -25px;
    /* staggered effect cause by delay property */
    -webkit-animation: dotloader 2.5s 0.2s infinite;
    -moz-animation: dotloader 2.5s 0.2s infinite;
    -ms-animation: dotloader 2.5s 0.2s infinite;
    -o-animation: dotloader 2.5s 0.2s infinite;
    animation: dotloader 2.5s 0.2s infinite;
}

.sync-circle + .sync-circle + .sync-circle {
    margin-left: -25px;
    -webkit-animation: dotloader 2.5s 0.4s infinite;
    -moz-animation: dotloader 2.5s 0.4s infinite;
    -ms-animation: dotloader 2.5s 0.4s infinite;
    -o-animation: dotloader 2.5s 0.4s infinite;
    animation: dotloader 2.5s 0.4s infinite;
}
.sync-circle + .sync-circle + .sync-circle + .sync-circle {
    margin-left: -25px;
    -webkit-animation: dotloader 2.5s 0.6s infinite;
    -moz-animation: dotloader 2.5s 0.6s infinite;
    -ms-animation: dotloader 2.5s 0.6s infinite;
    -o-animation: dotloader 2.5s 0.6s infinite;
    animation: dotloader 2.5s 0.6s infinite;
}

/* here be the animations matey! */
@keyframes dotloader {
    0%,20% { width: 4px; height: 4px; -moz-border-radius: 2px; border-radius: 2px; left: 0%; background-color: rgba(0, 0, 0, 0); }
    30%,70% { width: 8px; height: 8px; -moz-border-radius: 4px; border-radius: 4px; left: 50%; background-color: rgba(0, 0, 0, 0.5); }
    80%,100% { width: 4px; height: 4px; -moz-border-radius: 2px; border-radius: 2px; left: 100%; background-color: rgba(0, 0, 0, 0); }
}

@-moz-keyframes dotloader {
    0%,20% { width: 4px; height: 4px; -moz-border-radius: 2px; border-radius: 2px; left: 0%; background-color: rgba(0, 0, 0, 0); }
    30%,70% { width: 8px; height: 8px; -moz-border-radius: 4px; border-radius: 4px; left: 50%; background-color: rgba(0, 0, 0, 0.5); }
    80%,100% { width: 4px; height: 4px; -moz-border-radius: 2px; border-radius: 2px; left: 100%; background-color: rgba(0, 0, 0, 0); }
}

@-webkit-keyframes dotloader {
    0%,20% { width: 4px; height: 4px; -moz-border-radius: 2px; border-radius: 2px; left: 0%; background-color: rgba(0, 0, 0, 0); }
    30%,70% { width: 8px; height: 8px; -moz-border-radius: 4px; border-radius: 4px; left: 50%; background-color: rgba(0, 0, 0, 0.5); }
    80%,100% { width: 4px; height: 4px; -moz-border-radius: 2px; border-radius: 2px; left: 100%; background-color: rgba(0, 0, 0, 0); }
}

@-ms-keyframes dotloader {
    0%,20% { width: 4px; height: 4px; -moz-border-radius: 2px; border-radius: 2px; left: 0%; background-color: rgba(0, 0, 0, 0); }
    30%,70% { width: 8px; height: 8px; -moz-border-radius: 4px; border-radius: 4px; left: 50%; background-color: rgba(0, 0, 0, 0.5); }
    80%,100% { width: 4px; height: 4px; -moz-border-radius: 2px; border-radius: 2px; left: 100%; background-color: rgba(0, 0, 0, 0); }
}

@-o-keyframes dotloader {
    0%,20% { width: 4px; height: 4px; -moz-border-radius: 2px; border-radius: 2px; left: 0%; background-color: rgba(0, 0, 0, 0); }
    30%,70% { width: 8px; height: 8px; -moz-border-radius: 4px; border-radius: 4px; left: 50%; background-color: rgba(0, 0, 0, 0.5); }
    80%,100% { width: 4px; height: 4px; -moz-border-radius: 2px; border-radius: 2px; left: 100%; background-color: rgba(0, 0, 0, 0); }
}
.purchase-error-text {
    cursor: pointer;
    color: #007A50 !important;
}
.button.buy {
    height: auto;
    min-width: 300px;
    width: auto;
    background-color: var(--highlighted-background-color);
    border: medium none;
    border-radius: 0;
    padding: 15px 20px;
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 60px;
    box-shadow: 0 4px 6px -1px gray;
}
.button.buy:hover {
    background-color: #FA9430;
}
.button.buy span {
    text-transform: uppercase;
    vertical-align: sub;
}
.button.buy i {
    font-size: 24px;
    display: inline;
    padding: 20px;
    vertical-align: middle;
}
.activation-style-ul {
    list-style-type: none;
}
.activation-style-ul li {
    border: none !important;
    color: var(--color-828282-999);
    font-size: 18px;
}
.activation-style-ul li span {
    text-transform: uppercase;
}
.activation-style-ul li span.add-info {
    text-transform: none;
    font-size: 14px;
    margin-left: 34px;
    margin-top: -10px;
    display: block;
}
.activation-style-ul li.set *{
    color: var(--highlighted-text-color);
    font-weight: normal;
}
.activation-direction-ul {
    list-style-type: none;
    width: auto;
    height: auto;
    display: flex;
}
.activation-direction-ul li {
    float: left;
    width: 150px;
    height: 100px;
    color: #999;
    margin-left: 2px !important;
    background-color: var(--background-color-gray-darkestGray) !important;
    padding: 0 5px 0 10px !important;
    border-radius: .5rem;
}
.activation-direction-ul li i{
    color: #999;
    font-weight: normal;
    display: block;
    margin-left: 50px;
    margin-top: 20px;
}
.activation-direction-ul li.set i {
    color: var(--highlighted-text-color);
}
.direction-choice {
    width: 480px;
    margin-left: 5px;
    display: block;
}
.direction-choice p {
    color: var(--color-5f5f5f-999);
    margin-bottom: 5px;
    width: 100%;
    text-align: center;
}
.practiceDirectionInfo {
    color: #999;
    width: 100%;
    text-align: center;
}
.activation-direction-ul li .flagDashed {
    display: block;
    height: 30px;
    width: 45px;
    overflow: hidden;
    border: 1px dashed var(--border-999-666);
    margin: 4px;
    background: var(--background-color-white-darkestGray);
}
.activation-direction-ul li .flagDashed i {
    color: #999;
    font-size: 25px;
    margin: 1px 0 0 8px;
}
.activation-direction-ul li div.left-side {
    position:absolute;
    top: -25px;
    left: -10px;
    border-radius: .5rem;
}
.activation-direction-ul li div.right-side {
    position:absolute;
    top: -25px;
    right: -10px;
    border-radius: .5rem;
}
span.non-swappable {
    color: var(--highlighted-text-color);
}
#form-changeMail {
    float: left;
    padding: 10px;
    width: 500px;
}
#form-changeMail ul {
    list-style: none;
    margin: 0;
}
#form-changeMail ul li {
    display: inline-block;
    padding-right: 5px;
    color: #999;
}
#form-changeMail label {
    float: left;
}
#form-changeMail .emailConfirm {
    width: 280px;
    margin-bottom:-10px;
    background: var(--background-color-white-darkestGray);
    border-radius: .7rem;
    border-color: var(--highlighted-border-color);
    color: #999;
}
#subjectsList .row::before {
    clear: none;
}
#btnResend {
    float: left;
    margin-top: 10px;
}
.orange-survey {

}
.add-users {
    width: 150px;
    height: auto;
}
.add-users.tooltip.tip-top {
    left: -69px;
    top: -52px;
}
.learnPage.queryPage.vokkerPage {
    height: 100%;
}
#vokker {
    background: var(--background-color-white-666);
    margin-left: 5%;
    padding: 0 15px;
    width: 90%;
    border-radius: .5rem;
    height: calc(100% - 50px);
}
#vokker .card-block, #matchGame .card-block {
    float: left;
    height: calc(25% - 20px);
    margin: 10px;
    width: calc(25% - 20px);
    border-radius: .7rem;
}
#vokker .card-block.question {
    color: var(--color-333-999);
    background: var(--background-f7f7f7-363636);
}
#vokker .card-block.answer {
    color: var(--color-333-222);
    background: var(--background-fff2e5-999-specific);
}
#vokker .card-block .for-vertical-align {
    align-items: center;
    display: flex;
    height: 100%;
    overflow: hidden;
    width: 100%;
}
#vokker .card-block p {
    font-size: 1.4vw;
    margin: 0;
    max-height: 100%;
    text-align: center;
    width: 100%;
    padding: 10px;
}
#vokker .card-block.ui-draggable-dragging {
    z-index: 999;
    opacity: 0.5;
}
#vokker .card-block.right-choice {
    background: #C1E7CB;
}
#vokker .card-block.wrong-choice {
    background: #FF9D9D;
}
.finished-practice-smile {
    top: 15% !important;
    padding-top: 60px;
    width: 570px;
    margin-left: -290px;
    cursor: default;
}
.text-information .congrats-text {
    color: var(--highlighted-text-color);
    font-size: 3.5rem;
    line-height: 3.5rem;
    margin-bottom: 0;
}
.text-information .cards-info {
    color: var(--color-999-666);
    font-size: 22px;
}
.text-information .cards-info span {
    color: var(--color-666-999);
}
.smilies-middle {
    background: var(--highlighted-background-color) none repeat scroll 0 0;
    height: 100px;
    margin-top: 70px;
    margin-bottom: 160px;
}
.smilies-middle .all-info {
    position: absolute;
    top: 155px;
}
.smilies-middle .left.all-info {
    height: 100px;
    width: 140px;
    left: 20px;
}
.smilies-middle .right.all-info {
    height: 100px;
    width: 140px;
    right: 10px;
}
.smilies-middle .all-info p {
    color: var(--color-white-222);
    margin-bottom: 5px;
    font-size: 16px;
}
.smilies-middle .all-info p.learned-cards {
    font-size: 22px;
}
.smilies-middle .all-info p i {
    font-size: 18px;
}
img.smiley-img {
    margin: 30px auto;
    height: 220px;
}
.to-home {
    height: 50px;
    margin-bottom: 10px;
    padding-top: 10px;
    width: 100%;
}
.button.smiley-button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: var(--color-666-999);
    font-size: 18px;
}
.button.smiley-button:hover {
    color: var(--color-999-darkorange)
}
.button.smiley-button-buy {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: var(--highlighted-text-color);
    font-size: 20px;
}
.button.smiley-button-buy:hover {
    opacity: 0.8;
}
button.close-smiley, button.close-gift {
    color: #999;
    font-size: 34px;
    position: absolute;
    right: 20px;
    top: 20px;
}
.smiley-share {
    padding: 0 10px;
    color: var(--color-666-999);
    min-height: 30px;
    margin: 0 auto;
    width: auto;
    display: inline-block;
    text-transform: uppercase;
    font-size: 18px;
}
.smiley-share img {
    width: 27px;
    float: left;
}
.smiley-share > span {
    top: 8px;
    position: relative;
}
.smiley-share span.share-option {
    text-decoration: underline;
    color: var(--highlighted-text-color);
    cursor: pointer;
}
.smiley-share span.share-option:hover {
    opacity: 0.7;
}
.share-result > span {
    color: var(--color-666-999);
}
.share-result > span a {
    color: var(--highlighted-text-color);
    cursor: pointer;
}
.share-result > span a:hover {
    text-decoration: underline;
}
.smiley-stars {
    height: 80px;
    left: 170px;
    position: absolute;
    top: 70px;
    width: 230px;
}
.smiley-stars .icon_star {
    display: inline-block;
    font-size: 72px;
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 2px 2px #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;
}
.smiley-stars .icon_star:nth-child(1), .smiley-stars .icon_star:nth-child(3) {
    font-size: 72px;
    transform: translateY(0.8rem);
}
.star-orange {
    color: var(--highlighted-text-color);
}
.star-grey {
    color: var(--background-color-gray-middleDarkGray);
}
.close-practice {
    top: 15% !important;
    padding-top: 30px;
    width: 570px;
    margin-left: -290px;
    cursor: default;
    border-radius: .5rem;
}
.close-practice .smilies-middle .all-info {
    top: 165px;
}
.close-practice .grey-stars{
    height: 80px;
    left: 165px;
    position: absolute;
    top: 65px;
    white-space: nowrap;
    width: 230px;
}
.grey-stars .icon_star {
    color: var(--color-eee-999);
    display: inline-block;
    font-size: 78px;
    text-shadow: 2px 0 0 var(--background-color-white-middleDarkGray), -2px 0 0 var(--background-color-white-middleDarkGray), 0 2px 0 var(--background-color-white-middleDarkGray), 0 -2px 0 var(--background-color-white-middleDarkGray), 2px 2px var(--background-color-white-middleDarkGray), -2px -2px 0 var(--background-color-white-middleDarkGray), 2px -2px 0 var(--background-color-white-middleDarkGray), -2px 2px 0 var(--background-color-white-middleDarkGray)
}
.grey-stars .icon_star:nth-child(1), .icon_star:nth-child(3) {
    font-size: 78px;
    transform: translateY(0.8rem);
}
.close-practice .smilies-middle {
    margin-bottom: 0;
}
.grey-smiley-image {
    height: 170px;
    margin: -70px auto 10px;
    position: relative;
}
.close-practice .unlock-bonus p {
    color: #666;
    font-weight: 300;
    font-size: 20px;
}
.close-practice .unlock-bonus p span {
    color: var(--highlighted-text-color);
}
.close-practice .footer-buttons {
    height: auto;
    margin-bottom: 0;
    padding: 15px 10px 10px;
    width: 100%;
}
.close-practice .unlock-bonus table {
    width: auto;
    border: none;
    margin: auto;
    background: var(--background-color-white-middleDarkGray);
}
.close-practice .unlock-bonus tr td:first-child {
    color: var(--highlighted-text-color);
    font-size: 18px;
    padding: 5px;
}
.close-practice .unlock-bonus tr td {
    color: #666;
    padding: 5px 0;
}
button.stay-learning {
    background-color: var(--background-color-white-darkestGray);
    color: var(--highlighted-text-color);
    border: 1px solid var(--highlighted-border-color);
    border-radius: 8px;
    font-size: 16px;
    height: 35px;
    padding: 8px 20px 8px 15px;
    transition: all 0.25s ease-in-out 0s;
    margin-left: 10px;
}
button.stay-learning:hover, button.stay-learning:focus {
    background-color: var(--background-color-white-darkestGray);
    color: var(--highlighted-text-color);
    border: 1px solid var(--highlighted-border-color);
}
button.back-button {
    background: var(--background-color-white-middleDarkGray) none repeat scroll 0 0;
    border: 1px solid var(--border-aaa-999);
    border-radius: 8px;
    color: var(--color-aaa-999);
    font-size: 16px;
    height: 35px;
    text-transform: none;
    transition: all 0.25s ease-in-out 0s;
}
button.back-button:hover, button.back-button:focus {
    border-color: var(--border-adadad-222);
    background: var(--background-e6e6e6-363636);
    color: var(--color-333-222);
}
.forHomeSearch {
    left: 570px;
    width: 383px;
    position: absolute;
    top: 50px;
    height:35px;
}
.schoolPanel .forHomeSearch {
    top: 220px;
}
.forHomeSearch .searchPanel {
    background: var(--background-color-white-darkestGray);
    border: 1px solid var(--border-ccc-666);
    border-radius: .5rem;
    box-shadow: none;
    display: inline-block;
    float: left;
    height: 35px;
    margin: 0;
    padding: 1px 10px;
    position: relative;
    top: 0;
    width: calc(100% - 100px);
}
.forHomeSearch .searchPanel.active {
    border: 1px solid var(--highlighted-border-color);
}
.forHomeSearch .searchPanel .searchInput {
    background: transparent;
    border: medium none;
    color: #999;
    display: inline;
    font-family: "proxima-nova",sans-serif;
    font-size: 20px;
    height: 26px;
    left: 40px;
    position: absolute;
    top: 6px;
    width: 82%;
}
.forHomeSearch .searchPanel #complete{
    border: medium none;
    color: #dedede;
    display: inline;
    font-family: "proxima-nova",sans-serif;
    font-size: 20px;
    height: 20px;
    left: 40px;
    overflow: hidden;
    position: absolute;
    top: 9px;
    width: 82%;
}
.forHomeSearch .searchPanel .icon_close {
    color: var(--highlighted-text-color);
    cursor: pointer;
    float: right;
    font-size: 25px;
    margin: 2px 5px 0 0;
    width: 4%;
}
.forHomeSearch .searchPanel .icon_search {
    color: #999;
    float: left;
    font-size: 20px;
    margin-top: 6px;
}
.exactTbl {
    position: absolute;
    z-index: 1;
    top: 30px;
    width: 87%;
}
.exactTbl tbody, .exactTbl tr {
    cursor: pointer;
    display: block;
    width: 100%;
}
.exactTbl table .langImg > img {
    width: 31px;
}
.exactTbl table .foundWord {
    font-size: 16px;
    padding-top: 6px;
    text-align: left;
    color: #999;
}
.forHomeSearch .homeNoResults {
    background: #fff2dd none repeat scroll 0 0;
    color: var(--highlighted-text-color);
    font-size: 18px;
    height: auto;
    padding: 7px;
    position: absolute;
    text-align: center;
    top: 35px;
    width: 86%;
    z-index: 1;
}
.forHomeSearch .forFlag {
    float: left;
    height: 35px;
    padding-left: 8px;
    width: 60px;
    cursor: pointer;
}
.forHomeSearch .forFlag img {
    height: 35px;
    width: 50px;;
    border-radius: .5rem;
}
.forHomeSearch .langTbl {
    left: 56px;
    position: absolute;
    top: 35px;
    width: 314px;
    z-index: 1;
}
.forHomeSearch .langTbl table, .exactTbl table {
    display: block;
    overflow-y: auto;
    width: auto;
    border-radius: .5rem;
    border: none;
    background: var(--background-color-white-middleDarkGray);
}
.forHomeSearch .langTbl table tr {
    cursor: pointer;
}
.forHomeSearch .langTbl table tr td, .exactTbl table tr td {
    padding: 0;
}
.forHomeSearch .langTbl table tr:hover, .exactTbl table tr:hover, .exactTbl tr.selected {
    background: var(--background-color-gray-darkestGray);
}
.forHomeSearch .langTbl table .langImg, .exactTbl table .langImg {
    padding: 6px 5px 3px 5px;
}
.forHomeSearch .langTbl table .langImg > img {
    width: 40px;
    border-radius: 0.5rem;
}
.forHomeSearch .langTbl table .arrowTd {
    font-size: 16px;
    padding-top: 9px;
    color: #999;
}
.forHomeSearch .langTbl table .checkTd {
    font-size: 16px;
    padding: 10px;
    color: var(--highlighted-text-color);
}
.forHomeSearch .langTbl table .langName {
    font-size: 16px;
    padding-top: 9px;
    text-align: center;
    width: 160px;
    color: #999;
}
.forHomeSearch .langExpander {
    color: #999;
    font-size: 33px;
    cursor: pointer;
}
.forHomeSearch .langExpander:hover {
    opacity: .7;
}
.dictionaryPage .ponsLogo {
    position: relative;
    top: 30px;
    right: 30px;
    float: right;
}
.dictionaryPage .title_lib {
    height: 130px;
}
.dictionaryPage .ponsLogo img {
    height: 50px;
    width: 140px;
    border-radius: .5rem;
}
.title_lib .forSearch {
    width: 30%;
    height: 120px;
    padding-top: 30px;
    padding-left: 30px;
    float: left;
    min-width: 400px;
}
.forSearch .searchPanel {
    background: var(--background-color-white-middleDarkGray) none repeat scroll 0 0;
    box-shadow: none;
    position: relative;
    top: 0;
    display: inline-block;
    margin: 0;
    padding: 2px 15px 1px;
    height: 50px;
    width: 100%;
    border-radius: .5rem;
}
.forSearch .searchPanel.active {
    border: 1px solid var(--highlighted-border-color);
}
.forSearch .searchPanel .icon_search {
    color: #999;
    float: left;
    font-size: 23px;
    margin-top: 12px;
}
.forSearch .searchPanel .searchInput {
    border: medium none;
    color: #999;
    background: var(--background-color-white-middleDarkGray);
    display: inline;
    font-family: "proxima-nova",sans-serif;
    font-size: 22px;
    height: 45px;
    margin-left: 10px;
    width: 82%;
}
.searchPanel .searchInput:focus {
    outline: none;
}
.forSearch .searchPanel .icon_close {
    color: var(--highlighted-text-color);
    cursor: pointer;
    float: right;
    font-size: 30px;
    margin-right: 5px;
    margin-top: 5px;
    width: 4%;
}
.title_lib .forFlag {
    height: 50px;
    width: 180px;
    float: left;
    margin: 30px 0;
}
.title_lib .forFlag i {
    bottom: 15px;
    color: #666;
    font-size: 25px;
    position: relative;
    left: 2px;
}
.title_lib .forFlag img {
    height: 50px;
    width: 75px;
    clear: both;
    margin-left: 12px;
    border-radius: .5rem;
}
.title_lib .forLanguageFilter {
    color: var(--color-666-999-white);
    float: left;
    font-size: 24px;
    margin: 40px 0 0 90px;
    text-align: center;
    width: 70px;
    cursor: pointer;
}
.title_lib .translationAudio {
    float: left;
    font-size: 40px;
    padding-left: 20px;
    padding-top: 33px;
    width: 30px;
}
.title_lib .translationAudio .icon-speaker {
    cursor: pointer;
    color: var(--color-666-999-white);
}
.title_lib .translationAudio .icon-speaker.playing {
    color: var(--highlighted-text-color);
}
.dictionaryPage .mainRow {
    margin: 0 30px;
    overflow-y: auto;
    border-radius: .5rem;
    width: calc(100% - 50px);
    height: calc(100% - 190px);
}
.dictionaryPage .langPageTitle {
    color: var(--color-666-999-white);
    font-size: 1.5em;
    margin-bottom: 30px;
}
.dictionaryPage .forLanguages, .dictionaryPage .forWords, .dictionaryPage .forTranslations {
    width: 100%;
    height: auto;
}
.dictionaryPage .forLanguages .language {
    width: 100%;
    height: 70px;
    margin-bottom: 5px;
    background: var(--background-color-white-middleDarkGray);
    padding: 20px;
    cursor: pointer;
    opacity: 0.6;
    border-radius: .5rem;
}
.dictionaryPage .forLanguages .language.selected {
    opacity: 1;
}
.dictionaryPage .forLanguages .language:hover {
    background: var(--background-color-gray-middleDarkGray);
    opacity: 1;
}
.dictionaryPage .forLanguages .language img, .dictionaryPage .forWords .suggestion img {
    height: 30px;
    border-radius: .5rem;
}
.dictionaryPage .forLanguages .language i {
    bottom: 5px;
    color: #666;
    font-size: 25px;
    position: relative;
}
.dictionaryPage .forLanguages .language i.icon_check {
    color: var(--highlighted-text-color);
    margin-left: 40px;
}
.dictionaryPage .forLanguages .language span, .dictionaryPage .forWords .suggestion span,
.dictionaryPage .forTranslations .noTranslations span {
    bottom: 7px;
    color: var(--color-666-999);
    font-size: 22px;
    margin-left: 20px;
    position: relative;
}
.dictionaryPage .forLanguages .language.selected span {
    color: var(--highlighted-text-color);
}
.dictionaryPage .forWords .suggestion, .dictionaryPage .forTranslations .noTranslations {
    width: 100%;
    height: 70px;
    margin-bottom: 5px;
    background: var(--background-color-white-middleDarkGray);
    padding: 20px;
    cursor: pointer;
    border-radius: .5rem;
}
.dictionaryPage .forWords .suggestion:hover, .dictionaryPage .forTranslations .noTranslations:hover {
    background: var(--background-f7f7f7-363636);
}
.dictionaryPage .forWords .suggestion.selectedByKeyboard {
    background: var(--background-f7f7f7-363636);
}
.dictionaryPage .forWords .suggestion:hover span, .dictionaryPage .forTranslations .noTranslations:hover span {
    color: var(--highlighted-text-color);
}
.dictionaryPage .forWords .suggestion.selectedByKeyboard span {
    color: var(--highlighted-text-color);
}
.dictionaryPage .forWords .suggestion i.icon_search, .dictionaryPage .forTranslations .noTranslations i.icon_search {
    font-size: 30px;
    color: var(--color-666-999);
}
.dictionaryPage .forTranslations .translation {
    background: var(--background-color-white-middleDarkGray);
    width: 100%;
    height: auto;
    margin-bottom: 5px;
}
.dictionaryPage .forTranslations .translation > p {
    color: var(--highlighted-text-color);
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    padding: 20px;
}
.dictionaryPage .forTranslations .translation > p span {
    font-weight: normal;
    margin-left: 15px;
    color: var(--color-666-999);
    font-size: 20px;
}
.dictionaryPage .forTranslations .translation .wordTranslation {
    padding: 0;
    border-bottom: 2px solid var(--background-color-gray-darkestGray);
}
.dictionaryPage .forTranslations .translation .wordTranslation.expanded {
    border-left: var(--border-999-666) 5px solid;
}
.dictionaryPage .forTranslations .translation .wordTranslation .firstTranslation,
.dictionaryPage .forTranslations .translation .wordTranslation .otherTranslation {
    background: var(--background-color-white-middleDarkGray) none repeat scroll 0 0;
    cursor: pointer;
    display: table;
    height: 70px;
    width: 100%;
    paddinG: 0 20px;
}
.dictionaryPage .forTranslations .translation .wordTranslation .firstTranslation.checked,
.dictionaryPage .forTranslations .translation .wordTranslation .otherTranslation.checked {
    background: var(--background-f7f7f7-363636);
}
.dictionaryPage .forTranslations .translation .wordTranslation .firstTranslation:hover,
.dictionaryPage .forTranslations .translation .wordTranslation .otherTranslation:hover{
    background: var(--background-f7f7f7-363636);
}
.dictionaryPage .forTranslations .translation .wordTranslation .firstTranslation .exampleHeader,
.dictionaryPage .forTranslations .translation .wordTranslation .otherTranslation .exampleHeader{
    color: #999;
    font-size: 20px;
    font-weight: lighter;
    width: 15%;
    display: table-cell;
    vertical-align: middle;
    margin: 0;
    min-width: 200px;
    padding: 10px 20px 10px 0;
}
.dictionaryPage .forTranslations .translation .wordTranslation .firstTranslation .translationSource,
.dictionaryPage .forTranslations .translation .wordTranslation .firstTranslation .translationTarget,
.dictionaryPage .forTranslations .translation .wordTranslation .otherTranslation .translationSource,
.dictionaryPage .forTranslations .translation .wordTranslation .otherTranslation .translationTarget {
    display: table-cell;
    vertical-align: middle;
    margin: 0;
    font-size: 20px;
    color: var(--color-666-999);
    width: 30%;
}
.dictionaryPage .forTranslations .translation .wordTranslation .firstTranslation.checked .translationSource,
.dictionaryPage .forTranslations .translation .wordTranslation .firstTranslation.checked .translationTarget,
.dictionaryPage .forTranslations .translation .wordTranslation .otherTranslation.checked .translationSource,
.dictionaryPage .forTranslations .translation .wordTranslation .otherTranslation.checked .translationTarget,
.dictionaryPage .forTranslations .translation .wordTranslation .firstTranslation.checked .exampleHeader,
.dictionaryPage .forTranslations .translation .wordTranslation .otherTranslation.checked .exampleHeader{
    color: var(--highlighted-text-color);
}
.dictionaryPage .forTranslations .translation .wordTranslation .firstTranslation .translationTarget,
.dictionaryPage .forTranslations .translation .wordTranslation .otherTranslation .translationTarget{
    font-weight: bold;
    width: 100px;
}
.dictionaryPage .forTranslations .translation .wordTranslation .firstTranslation .arrow_right,
.dictionaryPage .forTranslations .translation .wordTranslation .otherTranslation .arrow_right{
    font-size: 20px;
    color: var(--color-666-999);
    width: 5%;
    display: table-cell;
    vertical-align: middle;
}
.dictionaryPage .forTranslations .translation .wordTranslation .otherTranslation .translationSource {
    margin-left: 15%;
}
.dictionaryPage .forTranslations .credit {
    background: var(--background-color-gray-darkestGray) none repeat scroll 0 0;
    height: 35px;
    padding-left: 38%;
    padding-top: 15px;
    width: 100%;
}
.dictionaryPage .forTranslations .credit p {
    display: inline;
    color: var(--color-666-999);
}
.dictionaryPage .forTranslations .translation .wordTranslation .firstTranslation .circles {
    display: table-cell;
    vertical-align: middle;
    color: #999;
    width: 2%;
    font-size: 45px;
}
.dictionaryPage .forTranslations .translation .wordTranslation .firstTranslation .circles:hover {
    color: #c2c2c2;
}
.dictionaryPage .forTranslations .translation .wordTranslation .firstTranslation .icon_check,
.dictionaryPage .forTranslations .translation .wordTranslation .otherTranslation .icon_check{
    color: var(--highlighted-text-color);
    display: table-cell;
    vertical-align: middle;
    width: 2%;
    font-size: 27px;
}
.dictionaryPage .dictionaryButton {
    position: relative;
    bottom: 0;
    width: 100%;
    background: white;
}
.dictionaryPage .dictionaryButton  .dictionary-button{
    height: 35px;
    right: 20px;
    top: 15px;
    padding: 10px 20px;
}
.dictionaryPage .dictionaryButton  .dictionary-button span {
    font-size: 18px;
}
.dictionaryPage .dictionaryButton  .dictionary-button[disabled]  {
    background: #999;
    color: white;
    opacity: 1 !important;
}
.dictionaryPage .no-premium {
    background: url('/img/premium/premium-dictionary.jpg') calc(100% + 70px) 0 no-repeat;
    background-size: 88%;
    margin: 30px 30px 60px;
    height: calc(100% - 40px);
    border-radius: .7rem;
}
.dictionaryPage .no-premium .main {
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 30%,rgba(255,255,255,0.2) 65%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 30%,rgba(255,255,255,0.2) 65%); /* Chrome10-25,Safari5.1-6 */
    background:  linear-gradient(left, rgba(255,255,255,1) 30%,rgba(255,255,255,0.2) 65%);
    background:  -ms-linear-gradient(left, rgba(255,255,255,1) 30%,rgba(255,255,255,0.2) 65%);
    height: 100%;
    border-radius: .7rem;
}
body.darkTheme .dictionaryPage .no-premium .main {
    background: -moz-linear-gradient(left, rgba(34,34,34,1) 30%,rgba(34,34,34,0.2) 65%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(34,34,34,1) 30%,rgba(34,34,34,0.2) 65%); /* Chrome10-25,Safari5.1-6 */
    background:  linear-gradient(left, rgba(34,34,34,1) 30%,rgba(34,34,34,0.2) 65%);
    background:  -ms-linear-gradient(left, rgba(34,34,34,1) 30%,rgba(34,34,34,0.2) 65%);
}
.forInfoBlockedPage {
    width: 40%;
    margin-top: 30px;
    margin-left: 50px;
    float: left;
    min-width: 400px;
}
.forInfoBlockedPage .title {
    height: 120px;
}
.forInfoBlockedPage p {
    color: #999;
    font-size: 19px;
    margin-left: 20px;
}
.forInfoBlockedPage .title img {
    width: 70px;
    float: left;
}
.forInfoBlockedPage .title p {
    color: var(--highlighted-text-color);
    font-size: 24px;
    margin: 0;
    padding-left: 80px;
    padding-top: 10px;
}
.forInfoBlockedPage table {
    border: none;
    background: none;
    margin-left: 20px;
    margin-bottom: 50px;
}
.forInfoBlockedPage table tr td {
    font-size: 18px;
    vertical-align: middle;
    color: #999;
}
.forInfoBlockedPage table tr td.check {
    color: var(--highlighted-text-color);
    width: 30px;
    font-size: 25px;
}
.forInfoBlockedPage .goPremium .go-premium-button {
    font-size: 24px;
    height: auto;
    margin-left: 20px;
    padding: 13px 20px;
    text-transform: none;
    color: var(--color-white-222);
    overflow: hidden;
}
.forInfoBlockedPage .goPremium .go-premium-button:hover {
    opacity: .7;
}
.forInfoBlockedPage .goPremium .go-premium-button img {
    float: left;
    height: 30px;
    margin-right: 10px;
    width: 30px;
}
.storageTip {
    padding: 20px 40px 0 40px;
    color: var(--color-666-999);
}

/*** REPORTS RE-DESIGN ***/
.subjects p.reports-subject-name {
    background: var(--background-color-white-middleDarkGray);
    height: 40px;
    margin-left: 30px;
    margin-top: 11px;
    padding-left: 0;
    padding-top: 10px;
    width: calc(100% - 30px);
    border-bottom-right-radius: .5rem;
    border-top-right-radius: .5rem;
}

.green { color: #278967; }
.darkorange {color: var(--highlighted-orange-white-text-color) !important;}
.highlighted {color: var(--highlighted-text-color) !important;}

/*** QUILL TEXT EDITOR ***/
[ng-quill-editor] { display: block; }
.ql-editor {
    display: block;
}
.ql-editor.ql-blank::before {
    text-align: center;
    color: var(--color-eee-666);
}
.fullHeight {
    height: 100%;
    position: relative;
}
.ql-editor p {
    text-align: center;
    word-break: normal;
}
/*** ACHIEVEMENTS PAGE ***/
.achievementsPage p {
    cursor: default;
}
.achievementsPage .headerRow {
    background: var(--background-color-white-middleDarkGray);
    width: 100%;
    height: 74px;
    border-radius: .7rem;
    display: flex;
    margin-bottom: 10px;
}
.achievementsPage .headerRow > div {
    display: flex;
    align-items: center;
    padding: 0 15px;
    color: var(--color-666-999);
    font-size: 22px;
    justify-content: space-between;
}
.achievementsPage .headerRow .miscInfo p{
    font-size: 14px;
    margin: 0;
    text-align: center;
}
.achievementsPage .headerRow .miscInfo p.number {
    font-size: 24px;
    margin-bottom: 5px;
}
.achievementsPage .mainRow {
    border-radius: .7rem;
    display: flex;
    height: calc(100% - 100px);
    flex-wrap: wrap;
    align-content: flex-start;
}
.achievementsPage .achTitle {
    color: #676767;
    height: 50px;
    margin-top: 30px;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
}
.achTitle p {
    font-size: 32px;
    margin-bottom: 0;
    color: var(--color-ccc-999);
}
.achievement {
    background: var(--achievement-due-background);
    height: calc(25% - 10px);
    margin-bottom: 10px;
    width: calc(25% - 9px);
    border-radius: .5rem;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-right: 12px;
}
.achievement:nth-child(4n) {
    margin-right: 0;
}
.achievement.achieved {
    background: var(--achievement-done-background);
}
.achievement.clickable, .achievement.clickable p {
    cursor: pointer;
}
.achievement img {
    height: 7vh;
}
.achievement p {
    color: #999;
    font-size: 2vh;
    height: auto;
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
    word-break: break-word;
}
.achievement p.additionalInfo {
    font-size: 13px;
    color: #999;
}

.back-fade-in {
    z-index: 1050;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    background: black;
    opacity: 0.8;
}
.push-ask {
    z-index: 1100;
    width: 550px;
    height: 160px;
    background: var(--background-color-gray-middleDarkGray);
    position: fixed;
    bottom: 40px;
    right: 40px;
    border-radius: .5rem;
}
.push-ask .left-bar {
    width: 15%;
    background: var(--highlighted-background-color);
    height: 100%;
    float: left;
    padding: 50px 0 0 10px;
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}
.push-ask .left-bar img {
    width: 60px;
}
.push-ask .message-content {
    padding: 15px 15px 0 4%;
    height: 76%;
    float: left;
    width: 85%;
    overflow: hidden;
}
.message-content p:first-child {
    color: var(--highlighted-text-color);
    font-size: 2.2vh;
    margin-bottom: 12px;
}
.message-content p {
    margin-bottom: 0;
    color: #817F7F;
}
.push-ask .buttons-row {
    height: 26%;
    width: 85%;
    float: left;
    padding: 0 5px 5px 4%;
}
.buttons-row button {
    height: 30px;
    font-size: 13px;
    color: white;
}
.buttons-row button:first-child {
    width: 40%;
    margin-right: 5%;
}
.buttons-row button:last-child {
    width: 51%;
}
.buttons-row button:hover {
    opacity: 0.8;
}
.dict {
    top: 95px;
    right: 5px;
    width: auto;
    cursor: pointer;
    float: left;
    position: relative;
}
.dict-func.disabled {
    opacity: 0.8;
    cursor: default;
}
.dict-func img {
    width: 36px;
}
.dict-func > span {
    color: var(--highlighted-text-color);
    background: var(--background-color-white-middleDarkGray);
    position: absolute;
    right: -5px;
    top: -3px;
}
.dict-hint {
    background: var(--background-color-gray-middleDarkGray) none repeat scroll 0 0;
    left: -130px;
    position: absolute;
    top: 50px;
    width: 300px;
    z-index: 150;
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.15);
    padding: 10px;
}
.dict-hint p {
    margin-bottom: 0;
    text-align: center;
    cursor: default;
    color: var(--color-666-999);
}
.dict-hint p.darkorange {
    cursor: pointer;
}
.consume-row {
    padding: 5px;
}
.consume-p {
    color: #666;
    margin: 10px 0 15px 0;
    padding-left: 5px;
    font-size: 18px;
}
.consume-p span {
    color: var(--highlighted-text-color);
}
/** Exit Intent **/
.ei-box {
    float: left;
    width: calc(33% - 12px);
    margin: 5px 10px 15px 0;
}
.ei-box:first-child {
    margin-left: 10px;
}
.ei-box-large {
    float: left;
    width: calc(50% - 16px);
    margin: 5px 10px 15px 0;
    background: var(--highlighted-background-color);
    color: white;
}
.ei-box-large:first-child {
    margin-left: 10px;
}
.ei-box-large {
    position: relative;
    height: 150px;
    border: 1px solid var(--highlighted-border-color);
}
.ei-box-large:hover {
    cursor: pointer;
    background: #FFE5CC;
    color: var(--highlighted-text-color);
}

.ei-box.flip-container {
    position: relative;
    height: 200px;
}
.ei-box.flip-container:hover .flipper, .ei-box.flip-container.hover .flipper {
    transform: rotateY(180deg);
}
.ei-box.flip-container:hover .flipper.done, .ei-box.flip-container.hover .flipper.done {
    transform: none;
}
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
}
.ei-box .flipper {
    background: var(--background-color-gray-darkestGray);
}
.flipper .front, .flipper .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
}
.flipper .front {
    z-index: 2;
    transform: rotateY(0deg);
}
.flipper .back {
    transform: rotateY(180deg);
}
.ei-icon {
    width:60px;
    padding-top: 10px;
}
.ei-box-large .left-block {
    height: 100%;
    padding: 15px 0 0 30px;
    float: left;
    width: 30%;
}
.ei-box-large .right-block {
    height: 100%;
    float: right;
    width: 70%;
    padding: 20px 5px 0 10px;
}
.ei-box-large img {
    width: 65px;
}
.ei-box p.box-name {
    color: #999;
    font-size: 22px;
    height: 44px;
    margin-bottom: 5px;
}
.ei-box p.box-desc {
    color: #999;
    font-size: 16px;
    margin-bottom: 5px;
}
.ei-box p.box-info {
    color: var(--highlighted-text-color);
    font-size: 18px;
    font-weight: bold;
}
.ei-box .flipper.done p.box-info {
    font-size: 27px;
}
.ei-box .back {
    padding-top: 20px;
}
.ei-box .back div {
    height: 100%;
}
.ei-box .back .box-name {
    height: auto;
    font-size: 20px;
}
.ei-box .back .box-info {
    cursor: pointer;
}
.ei-box .back .box-info:hover {
    opacity: 0.8;
}
.ei-box-large p.box-name {
    font-size: 22px;
    margin-bottom: 5px;
}
.ei-box-large p.box-desc {
    font-size: 16px;
    margin-bottom: 5px;
    height: 64px;
}
.ei-box-large p.box-info {
    font-size: 17px;
    font-weight: bold;
}
/*** end of exit intent ***/

/*** reports view for parents ***/
.overall {
    overflow-y: auto;
    height: 100%;
    padding: 5px 10px;
    background: #F8F8F8;
}
.list-row {
    width: 100%;
    height: 15vh;
    cursor: pointer;
    min-height: 110px;
    margin-bottom: 5px;
}
.list-row div {
    background: white;
    height: 100%;
}
.list-row .subject-cover {
    float: left;
    height: 100%;
}
.list-row .subject-cover img {
    height: 100%;
}
.list-row .subject-name {
    font-size: 20px;
    width: calc(70% - 20px);
    padding-left: 10px;
    color: #646464;
    float: left;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-height: 100px;
    overflow: hidden;
}
.list-row i {
    font-size:32px;
    color: #646464;
    margin: auto;
    width: 32px;
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.mobile-tabs-cover {
    text-align: center;
}
.mobile-tabs {
    display: inline-block;
    list-style: none;
    height: 40px;
    padding: 0;
    margin: 0 auto 10px auto;
}
.mobile-tabs li {
    display: inline-block;
    padding: 0;
    margin: 0;
    border-bottom: 3px solid #646464;
}
.mobile-tabs li a {
    color : #646464;
    display: block;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
}
.mobile-tabs li.active a {
    color : var(--highlighted-text-color);
}
.mobile-tabs li.active {
    border-bottom: 3px solid var(--highlighted-border-color);
}
.main-report {
    width: 100%;
    height: 100%;
}
.main-report.phases-main {
    height: auto;
}
.main-report .no-data {
    display: inline-block;
    text-align: center;
    font-weight: 400;
    color: #444;
    text-transform: none;
    width: 100%;
}
.phases-legend-list {
    list-style-type: none;
    padding: 10px;
    height: auto;
    background: #eee;
    width: 100%;
    margin: auto;
}
.main-li {
    border-bottom: 1px solid #ccc;
    width: 100%;
    margin-bottom: 5px;
}
.main-li i {
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: 3px;
}
.main-li span {
    display: inline;
    font-size: 15px;
    color: #646464;
}
.main-li span.number {
    float: right;
}
.main-li ul {
    list-style-type: none;
    margin: 10px 0 0;
}
.main-li .sec-li {
    padding: 1px 0;
    border-bottom: 1px dashed #ccc;
}
.main-li .sec-li:last-child {
    border-bottom: none;
}
.main-li .sec-li .rectangle {
    width: 40px;
    height: 8px;
    display: inline-block;
    border: 1px solid #ccc;
    top: 0;
}
/*** end of reports view for parents ***/

/*** group reports for mobiles ***/
.mobile-group-main {
    height: calc(100% - 70px);
    width: 100%;
    margin-top: 15px;
    overflow-y: auto;
}
.mobile-group-main table {
    border: none;
    border-spacing: 0;
    border-collapse: collapse;
    color: #666;
    height: auto;
    margin-bottom: 0;
}
.mobile-group-main table * {
    color: #666;
    font-size: 12px;
    vertical-align: middle;
}
.mobile-group-main table tr:first-of-type {
    border-bottom: 1px solid #e2e2e2;
}
.activity-group-main table tr.few * {
    color: #eb4100;
}
.activity-group-main table tr i {
    vertical-align: text-top;
    margin-left: 5px;
}
.activity-group-main table tr.enough i {
    color: #66be00;
}
.activity-group-main table th, .activity-group-main table td {
    width: 50%;
    padding: 8px 20px 8px 20px;
}
.activity-group-main table tr th:first-of-type, .activity-group-main table tr td:first-of-type {
    text-align: left;
}
.activity-group-main table tr th:last-of-type, .activity-group-main table tr td:last-of-type {
    text-align: right;
}
.phases-group-main table th, .phases-group-main table td {
    padding: 8px 20px 8px 20px;
}
.phases-group-main table tr * {
    vertical-align: middle;
}
.phases-group-main table tr.noPrem td {
    background: var(--background-color-gray-darkestGray);
    color: var(--color-a2a2a2-999);
}
.phases-group-main table tr :first-child {
    width: 40%;
    text-align: left;
}
.phases-group-main table tr :nth-child(2) {
    width: 30%;
    text-align: center;
}
.phases-group-main table tr :nth-child(3) {
    width: 30%;
    text-align: center;
}
.difficult-group-main table th, .difficult-group-main table td {
    padding: 8px 20px 8px 20px;
}
.difficult-group-main table td {
    word-break: break-all;
}
.difficult-group-main table tr * {
    vertical-align: middle;
}
.difficult-group-main table tr :first-child {
    width: 40%;
    text-align: left;
}
.difficult-group-main table tr :nth-child(2) {
    width: 40%;
    text-align: left;
}
.difficult-group-main table tr :nth-child(3) {
    width: 20%;
    text-align: center;
}
/*** end of group reports for mobiles***/

/*** collection page ***/
.collectionPage {
    width: 100%;
    background: var(--background-color-gray-middleDarkGray);
    border-radius: 15px;
}
.collectionPage * :focus {
    outline: none;
}
.collection-open {
    z-index: 999;
    height: 35px;
}
.collection-inner {
    background: var(--background-color-gray-darkestGray);
    padding: 5px 15px 5px 15px;
    width: 100%;
    border-radius: .5rem;
}
.collection-inner > i {
    position: absolute;
    font-size: 38px;
    right: 10px;
    top: 5px;
    color: #999;
    cursor: pointer;
}
.collection-inner > i:hover {
    opacity: 0.7;
}
.backToSubjects {
    float: left;
    font-size: 36px;
    cursor: pointer;
    color: var(--highlighted-text-color);
    margin-right: 20px;
}
.collection-inner h1 {
    color: var(--color-666-999);
    font-size: 30px;
    font-weight: 500;
    margin: 5px 0 15px 0;
    text-transform: none;
}
.elements-list {
    padding-right: 5px;
    overflow-y: auto;
    transition: 0.5s;
}
.elements-list::-webkit-scrollbar {
    width: 1em;
}
.elements-list::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.elements-list::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}
.elements-list.faded {
    opacity: 0.5;
    transition: 0.5s;
}
.elements-list ul {
    list-style-type: none;
    margin: 0;
}
.dots-menu {
    position: relative;
    top: -10px;
    right: -5px;
}
.dots-menu:after {
    content: '\2807';
    font-size: 3.2vh;
    color: #646464;
}
.dots-menu:hover:after {
    opacity: 0.5;
}
li.no-subjects, li.no-sessions {
    border-bottom: 1px solid #e2e2e2;
    background: white;
    color: #666;
    font-size: 20px;
    text-align: center;
    display: table;
    width: 100%;
    height: 100px;
    border-radius: .5rem;
}
li.no-subjects p, li.no-sessions p {
    font-size: 20px;
    display: table-cell;
    vertical-align: middle;
}
.subject-line {
    padding-right: 10px;
    width: 100%;
    cursor: pointer;
    height: 110px;
    margin-bottom: 7px;
    background: var(--background-color-white-middleDarkGray);
    border-radius: .5rem;
}
.subject-line:not(.edit-subject-mask):hover {
    opacity: .8;
}
.subject-line.remove-mode {
    background: #fae5ea;
}
.subject-line > div {
    height: 100%;
}
.subject-line .main-body {
    width: 100%;
}
.subject-line.remove-mode .main-body {
    width: 100%;
}
.subject-line .remove-subject-message {
    color: #cd002b;
    height: auto;
    padding: 0;
    border-radius: 10px;
    margin-top: 4px;
}
.remove-subject-message span {
    width: 90%;
    font-size: 18px;
    line-height: 16px;
    display: inline-block;
}
.remove-subject-message i {
    float: right;
    margin-top: 3px;
    font-size: 22px;
}
.remove-subject-message i:hover{
    opacity: 0.5;
}
/*** TODO:check this code to be useful ***/
.subject-line .actions {
    opacity: 0;
}
.subject-line:hover .actions, .subject-line.selected .actions, .unit-line:hover .actions, .unit-line.selected .actions {
    opacity: 1;
}
.subject-line .actions i:not([disabled]):hover {
    opacity: 0.7;
}
.subject-line .actions .delete {
    font-size: 20px;
    position: absolute;
    bottom: 20px;
    right: 11px;
}
.subject-line .actions .edit {
    font-size: 17px;
    float: right;
    margin: 10px 12px 0 0;
}
.collectionColumn .subject-cover {
    float: left;
    height: 100%;
}
.collectionColumn .subject-cover img {
    height: 100%;
    width: 80px;
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}
.collectionColumn .subject-body {
    width: calc(100% - 90px);
    padding-left: 20px;
    height: 100%;
    position: relative;
    padding-top: 5px;
}
.subject-line.edit-subject-mask .subject-body {
    width: calc(94% - 90px);
}
.subject-line .subject-body .sbj-name p {
    font-size: 20px;
    width: auto;
    max-width: calc(100% - 40px);
    color: var(--color-666-999);
    max-height: 52px;
    margin: 0;
    line-height: 25px;
    overflow: hidden;
    display: inline-block;
    word-break: break-all;
}
.subject-line .subject-body .sbj-name {
    height: auto;
    max-height: 52px;
}
.subject-line .subject-body .sbj-name i {
    font-size: 18px;
    opacity: 0;
    color: #999;
    transition: opacity .5s;
    position: relative;
}
.subject-line:hover .subject-body .sbj-name i {
    opacity: 1;
}
.subject-line .subject-body .sbj-name i:hover {
    opacity: 0.7;
}
.subject-line.remove-mode .subject-body p {
    color: #cd002b;
    text-decoration: line-through;
    width: 90%;
}
.subject-line .subject-body .icon_close {
    float: right;
    position: relative;
    font-size: 33px;
    color: #999;
    bottom: 29px;
    right: -5px;
}
.subject-line .subject-body .icon_close:hover {
    opacity: 0.7;
}
.subject-line:not(.edit-subject-mask) .subject-body .languages {
    height: 35px;
    width: 120px;
    min-width: 100px;
    margin-top: 0;
}
.subject-line.remove-mode img {
    opacity: 0.5;
}
.subject-body .languages .primaryLanguage, .subject-body .languages .secondaryLanguage {
    float: left;
    margin-right: 5px;
    border: 1px dashed var(--border-999-666);
    min-width: 40px;
    width: 55px;
    height: 35px;
    border-radius: .5rem;
}
.subject-body .languages .flagset {
    border: none;
}
.subject-body .languages i {
    color: #999;
    font-size: 31px;
    margin-left: 9px;
}
.subject-body .languages img {
    width: 100%;
    height: 35px;
    border-radius: .5rem;
}
.add-subject-button, .share-content-button {
    height: 40px;
    margin-top: 5px;
    font-size: 20px;
    margin-bottom: 2px;
}
.share-content-button i {
    margin-left: 10px;
}
.add-subject-mask {
    height: 135px;
    width: 100%;
    position: absolute;
    left: 0;
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(1,1,0,0);
    bottom: 0;
    padding: 10px 5px 5px 15px;
    background: var(--background-color-gray-middleDarkGray);
    border-radius: 0 0 15px 15px;
    box-shadow: 0 -5px 20px -5px #666;
}
.add-subject-mask.ng-enter {
    opacity: 0;
    transform: translateY(25%);
}
.add-subject-mask.ng-enter.ng-enter-active {
    opacity: 1;
    transform: none;
}
.add-subject-mask.ng-leave {
    opacity: 1;
    transform: none;
}
.add-subject-mask.ng-leave.ng-leave-active {
    opacity: 0;
    transform: translateY(25%);
}
.add-subject-mask .languages, .edit-subject-mask .languages {
    width: 210px;
    height: 45px;
    background: var(--background-color-white-darkestGray);
    float: left;
    border-radius: 10px;
}
.add-subject-mask .languageSelectors, .edit-subject-mask .languageSelectors {
    height: 35px;
    width: 100%;
    float: left;
    top: 5px;
    position: relative;
}
.add-subject-mask .languageSelectors .primaryLanguage, .add-subject-mask .languageSelectors .secondaryLanguage,
.edit-subject-mask .languageSelectors .primaryLanguage, .edit-subject-mask .languageSelectors .secondaryLanguage{
    margin-left: 10px;
    margin-right: 0;
}
.add-subject-mask .languageSelectors i.selector, .edit-subject-mask .languageSelectors i.selector {
    float: left;
    color: var(--color-666-999);
    font-size: 30px;
    margin-left: 0;
    cursor: pointer;
}
.add-subject-mask .languageSelectors i.selector:hover, .edit-subject-mask .languageSelectors i.selector:hover {
    opacity: 0.7;
}
.add-subject-mask .langTbl {
    position: absolute;
    bottom: 35px;
    left: 10px;
}
.edit-subject-mask .langTbl {
    position: absolute;
    top: 35px;
    left: 10px;
    z-index: 10;
}
.add-subject-mask .langTbl:last-of-type {
    position: absolute;
    bottom: 35px;
    left: 104px;
}
.edit-subject-mask .langTbl:last-of-type {
    position: absolute;
    top: 35px;
    left: 104px;
}
.add-subject-mask .primaryLanguage, .add-subject-mask .secondaryLanguage,
.edit-subject-mask .primaryLanguage, .edit-subject-mask .secondaryLanguage{
    position: relative;
}
.add-subject-mask .primaryLanguage, .edit-subject-mask .primaryLanguage {
    margin-right: 5px;
}
.add-subject-mask .primaryLanguage .tooltip.tip-bottom, .add-subject-mask .secondaryLanguage .tooltip.tip-bottom {
    display: block;
    left: -36px;
    min-width: 130px;
    text-align: center;
    bottom: -32px;
    position: absolute;
}
.add-subject-mask .validation-result, .add-unit-mask .validation-result, .edit-subject-mask .validation-result,
.unit-line .text_container .validation-result{
    position: absolute;
    bottom: 115px;
    left: 100px;
    background: #FFEBCC;
    color: red;
    padding: 10px;
}
.edit-subject-mask .validation-result {
    left: 30px;
    bottom: 112px;
}
.add-unit-mask .validation-result {
    bottom: 85px;
    left: 20px;
}
.unit-line .text_container .validation-result {
    bottom: 57px;
    left: 10px;
}
.validation-result > .nub {
    display: block;
    border: solid 9px;
    border-color: #FFEBCC transparent transparent transparent;
    bottom: -16px;
    left: 2%;
    position: absolute;
}
.collectionColumn .actions {
    height: 100%;
}
.collectionColumn .actions i {
    color: #999;
}
.collectionColumn .actions i:not([disabled]):hover, .collectionColumn .edit-unit-actions i:not([disabled]):hover {
    opacity: 0.7;
    cursor: pointer;
}
.add-subject-mask .actions .icon_check, .edit-subject-mask .actions .icon_check, .add-unit-mask .actions .icon_check {
    font-size: 25px;
    position: absolute;
    bottom: 20px;
    right: 8px;
    color: var(--highlighted-text-color);
}
.add-subject-mask .actions .icon_close, .edit-subject-mask .actions .icon_close, .add-unit-mask .actions .icon_close{
    font-size: 33px;
    float: right;
    margin-right: 5px;
}
.collectionColumn .actions i[disabled], .collectionColumn .edit-unit-actions i[disabled] {
    color: #e2e2e2;
}
.edit-unit-actions, .edit-line .actions {
    width: 12%;
    display: flex;
    justify-items: center;
    align-items: center;
}
.edit-unit-actions .icon_check {
    float: left;
    font-size: 25px;
    color: var(--highlighted-text-color);
    margin-top: 5px;
}
.edit-unit-actions .icon_check.red-text {
    color: #cd002b;
}
.edit-unit-actions .icon_close {
    float: left;
    font-size: 30px;
    color: #999;
    margin-top: 1px;
}
.unit-line .actions {
    padding: 9px 0;
    opacity: 0;
    display: flex;
    justify-items: center;
    align-items: center;
}
.unit-line .actions i {
    font-size: 18px;
}
.unit-line .actions .icon_trash_alt {
    margin-left: 20px;
}
.add-subject-mask .language-ask, .edit-subject-mask .language-ask {
    display: table-cell;
    vertical-align: middle;
    height: 40px;
    padding-left: 10px;
    color: var(--color-666-999);
}
.subject-name-input, .unit-name-input {
    font-size: 22px;
    width: 100%;
    color: var(--color-666-999);
    padding: 6px 6px 6px 10px;
    border: none;
    border-radius: 10px;
    height: 40px;
    background: var(--background-color-gray-darkestGray);
}
.subject-name-input {
    margin-bottom: 10px;
}
.unit-line .subject-name-input {
    margin-bottom: 0;
}
.subject-name-input:focus, .unit-name-input:focus {
    border: none;
}
.add-subject-mask .subject-name-input {
    background: var(--background-color-white-darkestGray);
}
.add-unit-mask .unit-name-input {
    background: var(--background-color-white-darkestGray);
}
.unit-name-input {
    width: 90%;
    margin-top: 20px;
}
.subject-name-input.dirty, .unit-name-input.dirty {
    border: 1px solid var(--highlighted-border-color);
}
.collection-button {
    background: none;
    color: var(--color-666-999);
    padding: 0;
    cursor: pointer;
    width: auto;
    border: none;
}
.collection-button[disabled] {
    background: var(--background-color-gray-darkestGray);
    color: #999;
    border-color: #999;
    cursor: default;
    opacity: 0.5;
}
.collection-button:not([disabled]):hover {
    opacity: 0.7;
}
.unit-line {
    padding: 5px;
    width: 100%;
    min-height: 50px;
    cursor: pointer;
    background: var(--background-color-white-middleDarkGray);
    margin-bottom: 5px;
    border-radius: .5rem;
    height: 5vh;
}
.unit-line:not(.remove-mode):not(.edit-mode):hover {
    opacity: .8;
}
.unit-line.remove-mode {
    background: #fae5ea;
}
.unit-line > div {
    height: 100%;
}
.unit-line .text_container {
    display: flex;
    width: 88%;
    padding: 0 10px 0 10px;
    position: relative;
    align-items: center;
}
.unit-line.remove-mode .text_container {
    display: table;
    width: 88%;
    padding-left: 10px;
    position: relative;
}
.unit-line .text_container p {
    font-size: 20px;
    text-align: left;
    color: var(--color-666-999);
    height: 35px;
    overflow: hidden;
    margin-bottom: 0;
    margin-top: 5px;
    word-break: break-all;
}
.unit-line .text_container p i {
    margin-right: 15px;
}
.unit-line .remove-unit-message {
    padding: 2px 5px 2px 10px;
    color: #cd002b;
    width: 95%;
    display: table-cell;
    height: auto;
    vertical-align: middle;
}
.unit-line .text_container > .icon_close {
    float: right;
    position: absolute;
    font-size: 30px;
    color: #999;
    bottom: 10px;
    right: 5px;
}
.unit-line .text_container > .icon_close:hover {
    opacity: 0.5;
}
.remove-unit-message span {
    width: 94%;
    font-size: 18px;
    line-height: 18px;
    display: inline-block;
}
.remove-unit-actions i.icon_check {
    float: right;
    margin: 10px 5px 0 0;
    font-size: 20px;
}
.add-unit-mask {
    height: 100px;
    background: var(--background-color-gray-middleDarkGray);
    width: 100%;
    padding: 5px 10px 5px 15px;
    position: absolute;
    left: 0;
    bottom: 0;
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(1,1,0,0);
    box-shadow: 0 -5px 20px -5px #666;
    border-radius: 0 0 15px 15px;
    z-index: 1;
}
.add-unit-mask.ng-enter {
    opacity: 0;
    transform: translateY(25%);
}
.add-unit-mask.ng-enter.ng-enter-active {
    opacity: 1;
    transform: none;
}
.add-unit-mask.ng-leave {
    opacity: 1;
    transform: none;
}
.add-unit-mask.ng-leave.ng-leave-active {
    opacity: 0;
    transform: translateY(25%);
}
.collectionColumn {
    width: 100%;
}
.modal.modal-changed-style {
    position: fixed !important;
    position: absolute;
}
.share-content-button .tooltip {
    bottom: 35px;
    top: auto;
}
.session-line {
    padding: 5px 10px;
    width: 100%;
    height: auto;
    margin-bottom: 7px;
    background: var(--background-color-white-middleDarkGray);
    cursor: pointer;
    border-radius: .5rem;
}
.session-line * {
    color: var(--color-666-999);
}
.session-line:not(.selected):hover {
    background: var(--background-color-gray-darkestGray);
}
.session-line .right {
    height: 50px;
    display: table;
}
.session-line .right i {
    font-size: 40px;
    color: #999;
    cursor: pointer;
    display: table-cell;
    vertical-align: middle;
}
.session-line .right i:hover {
    opacity: .5;
}
.share-line-cards {
    border-spacing: 0;
    margin-bottom: 5px;
    border: none;
    background: var(--background-color-white-middleDarkGray);
}
.share-line-cards tr td, .share-line-cards tr th {
    padding: 5px;
    width: 50%;
    text-align: left;
    vertical-align: middle;
}
.share-line-cards.consume tr td, .share-line-cards.consume tr th {
    width: 33%;
}
.share-link-input {
    width: 100%;
    height: 35px;
    border: none;
    border-bottom: 2px solid var(--highlighted-border-color);
    font-size: 21px;
    margin-bottom: 10px;
    background: var(--background-color-white-middleDarkGray);
}
.share-link-input::selection {
    background-color: var(--background-lighter-highlight);
}
.share-link-input::-moz-selection {
    background-color: var(--background-lighter-highlight);
}
.copy-share-link {
    float: right;
    position: absolute;
    top: 4px;
    right: 5px;
    text-transform: uppercase;
    color: var(--highlighted-text-color);
    font-size: 18px;
}
.copy-share-link:hover {
    opacity: .7;
}
.file-convert,
.file-convert:after {
    border-radius: 50%;
    width: 6.5em;
    height: 6.5em;
}
.file-convert {
    font-size: 4px;
    text-indent: -9999em;
    border-top: 1.1em solid var(--highlighted-border-color);
    border-right: 1.1em solid var(--highlighted-border-color);
    border-bottom: 1.1em solid #999;
    border-left: 1.1em solid #999;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: loadConvert 1.1s infinite linear;
    animation: loadConvert 1.1s infinite linear;
    top: 8px;
    left: 1px;
    position: relative;
    margin: auto;
}
@-webkit-keyframes loadConvert {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes loadConvert {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.score-container, .best-container, #game_2048 .gameHint p {
    color: var(--color-666-999) !important;
}
.restart-button {
    display: flex;
    background: var(--highlighted-background-color);
    border-radius: .7rem;
    padding: 0 20px;
    color: var(--color-white-222);
    border: 1px solid var(--highlighted-border-color);
    height: 50px;
    width: calc(100% - 20px);
    position: absolute;
    bottom: 10px;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}
.restart-button:hover {
    background: var(--highlighted-background-color);
    border: 2px solid var(--border-white-222);
    color: var(--color-white-222);
}
.gamesPage .mainRow {
    margin: 30px 20px 0 30px;
    overflow-y: hidden;
    border-radius: .5rem;
    height: calc(100% - 100px);
    padding: 0 15px;
    min-height: 518px;
    background: var(--background-color-white-darkestGray);
}
.gamesPage .mainRow.bgStars {
    background: var(--background-color-white-darkestGray) var(--image-background-games) no-repeat right;
    background-size: 35%;
    background-position-y: -10px;
}
#game_2048 .grid-cell {
    background: var(--background-color-gray-middleDarkGray) !important;
}
.gamesPage h1.atGames {
    color: var(--highlighted-text-color);
    font-size: 42px;
    font-weight: 500;
    margin: 20px 0 5px 15px;
    overflow: hidden;
    text-transform: none;
    width: auto;
    displaY: table;
}
.gamesPage h1.atGames.list {
    margin-bottom: 25px;
}
.gamesPage .backToGames {
    float: left;
    font-size: 40px;
    cursor: pointer;
    color: var(--highlighted-text-color);
    margin-right: 20px;
    margin-top: 25px;
    padding-left: 5px;
}
.gameSelection {
    height: 100%;
}
.gameSelection .gamesList {
    display: flex;
    flex-wrap: wrap;
    display: -webkit-flex;
}
.gameSelection .hoverContainer {
    margin-left: 15px;
    width: calc(25% - 15px);
    height: 25vh;
    min-height: 280px;
    min-width: 300px;
}
.gameSelection .hoverContainer:not(.blocked):hover .gameBlock{
    opacity: .7;
}
.gameSelection .hoverContainer.blocked .gameBlock {
    border: 2px dashed var(--border-e0e0e0-666);
}
.gameSelection .gameBlock {
    background: var(--background-color-gray-middleDarkGray-specific);
    transition: opacity .5s ease-in-out;
    width: 100%;
    height: 100%;
    padding: 15px 10px 10px;
    border-radius: .7rem;
}
.gamesList .playGameButton {
    transition: opacity .5s ease-in-out;
    opacity: 0;
    position: absolute;
    color: var(--highlighted-text-color);
    cursor: pointer;
    font-size: 60px;
    z-index: 99;
    pointer-events: none;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
}
.gamesList .hoverContainer:hover .playGameButton {
    opacity: 1;
    pointer-events: auto;
}
.gameBlock p.gameName {
    font-size: 28px;
    color: var(--highlighted-orange-white-text-color);
    border-radius: .7rem;
    width: auto;
    display: table;
    margin-left: 5px;
}
.gameSelection .hoverContainer.blocked .gameBlock p.gameName {
    color: #c2c2c2;
}
.gameBlock img.starIndi {
    position: absolute;
    width: 28px;
    top: 17px;
    right: 20px;
}
.gameBlock .imageLike {
    width: 100%;
    border: none;
    border-radius: .7rem;
    height: calc(100% - 140px);
    background: var(--background-color-gray-middleDarkGray);
    display: flex;
    justify-content: center;
    align-items: center;
}
.hoverContainer:not(.blocked) .gameBlock .imageLike img {
    width: 100%;
    height: 100%;
    border-radius: .7rem;
}
.hoverContainer.blocked .gameBlock .imageLike i {
    color: var(--color-999-222);
    font-size: 50px;
}
.gameSelection .gameBlock .gameDesc {
    margin: 0 0 0 5px;
    color: var(--color-666-666-white);
    height: 100px;
    text-align: left;
}
.gamePlay {
    overflow: hidden;
}
.gamePlay .b4GameInfo, .gamePlay .afterGameInfo {
    width: calc(100% - 150px);
    height: calc(100% - 165px);
    background: rgba(0, 0, 0, 0.75);
    position: fixed;
    top: 130px;
    left: 130px;
    z-index: 99;
    border-radius: .7rem;
}
.gamePlay .b4GameInfo div {
    height: 150px;
    top: 20%;
    position: relative;
    width: 400px;
    margin: auto;
}
.gamePlay .b4GameInfo div h1 {
    width: auto;
    font-size: 36px;
    color: var(--color-white-999);
    text-align: center;
}
.afterGameInfo .wonInfo, .afterGameInfo .lostInfo {
    background: var(--background-color-white-darkestGray);
    position: relative;
    top: 10%;
    margin: auto;
    width: 550px;
    padding: 0 0 20px;
    border-radius: .7rem;
}
.afterGameInfo .wonInfo p, .afterGameInfo .lostInfo p {
    color: var(--color-333-999);
    margin-bottom: 5px;
    text-align: center;
    width: 100%;
}
.afterGameInfo .major {
    height: 40px;
    width: 100%;
    background: var(--background-color-gray-middleDarkGray);
    display: table;
    border-top-left-radius: .7rem;
    border-top-right-radius: .7rem;
    margin-bottom: 40px;
}
.afterGameInfo .major p {
    color: var(--color-666-999);
    width: 100%;
    text-align: center;
    font-weight: bold;
    height: 100%;
    vertical-align: middle;
    display: table-cell;
}
.afterGameInfo .wonInfo .newRecord, .afterGameInfo .wonInfo .noRecord, .afterGameInfo .lostInfo .noRecord {
    font-size: 40px;
    font-weight: bold;
    color: #999;
}
.afterGameInfo p.margin-bottom {
    margin-bottom: 30px;
}
.afterGameInfo .wonInfo .newRecord {
    color: var(--highlighted-text-color);
}
.afterGameInfo .resultImage {
    width: 180px;
    margin: auto;
    display: block;
}
.afterGameInfo .timeSpent {
    width: 110px;
    margin: auto;
}
.afterGameInfo .numberContainer {
    height: 100px;
    position: relative;
    width: 100%;
    top: -55px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-top: 50px;
    margin-bottom: -40px;
}
.afterGameInfo .timeSpent .cardsBestTime {
    font-size: 28px;
    color: var(--color-666-999);
}
.afterGameInfo .numberContainer .cardsPercentage {
    font-size: 26px;
    font-weight: bold;
}
.afterGameInfo .timeSpent img {
    width: 32px;
    height: 21px;
}
.gamePlay .buttonsRow {
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}
.gamePlay .buttonsRow button {
    font-size: 18px;
    padding: 0 20px;
    height: 40px;
    text-transform: none;
    display: flex;
    float: left;
    justify-content: center;
    align-items: center;
}
.gamePlay .buttonsRow.wideButtons button {
    width: 110px;
}
.gamePlay .buttonsRow.wideButtons button.disabled {
    border: 1px solid;
}
.gamePlay .buttonsRow button.buySubject {
    width: 170px !important;
}
.gamePlay .buttonsRow.thinButtons button {
    width: 90px;
}
.gamePlay .buttonsRow .playAgain {
    background: var(--background-white-darkorange);
    border: 1px solid var(--highlighted-border-color);
    color: var(--color-666-222);
}
.gamePlay .buttonsRow.wideButtons .playAgain {
    width: 290px;
}
.gamePlay .buttonsRow.thinButtons .playAgain {
    width: 150px;
}
.gamePlay .buttonsRow .playAgain:hover {
    color: var(--highlighted-text-color);
    border: 1px solid var(--highlighted-border-color);
}
.gamePlay .buttonsRow .exitButton {
    background: var(--background-color-gray-middleDarkGray);
    color: var(--color-666-999);
    border: 1px solid var(--background-color-gray-middleDarkGray);
}
.gamePlay .buttonsRow .exitButton:hover {
    border: 1px solid #666;
}
@keyframes countDown {
    0%   {font-size:68px;}
    100% {font-size:32px;}
}
.gamePlay .b4GameInfo div p.counter {
    animation-name: countDown;
    animation-duration: 1s;
    animation-iteration-count: 3;
    animation-timing-function: linear;
    animation-delay: 0s;
    color: var(--color-white-222);
    text-align:center;
    background: var(--highlighted-background-color);
    width: 120px;
    height: 120px;
    border-radius: 60px;
    line-height: 120px;
    margin: auto;
}
/**
    match game styles start
**/
#matchGame .card-block {
    border-radius: .7rem;
}
#matchGame .optionsSelectors {
    height: auto;
    padding: 10px;
}
#matchGame .card-block.question {
    color: var(--color-333-999);
    background: var(--background-f7f7f7-363636);
}
#matchGame .card-block.answer {
    color: var(--color-333-222);
    background: var(--background-fff2e5-999-specific);
}
#matchGame .card-block .for-vertical-align {
    align-items: center;
    display: flex;
    height: 100%;
    overflow: hidden;
    width: 100%;
}
#matchGame .card-block p {
    font-size: 1.8vw;
    margin: 0;
    max-height: 100%;
    width: 100%;
    text-align: center;
    padding: 10px;
}
#matchGame .card-block.ui-draggable-dragging {
    z-index: 999;
    opacity: 0.5;
}
#matchGame .card-block.right-choice {
    background: #C1E7CB;
}
#matchGame .card-block.wrong-choice {
    background: #FF9D9D;
}
#matchGame .matchProgressBar {
    margin: 0 10px 10px 10px;
    border: none;
    height: 35px;
    position: relative;
    border-radius: 17px;
    background: var(--background-e5e5e5-999);
    overflow: hidden;
}
.matchProgressBar .tick {
    border-right: 3px solid var(--border-white-222);
    float: left;
    height: 100%;
    position: relative;
    z-index: 999;
}
.matchProgressBar .tick.noBrdr {
    border-right: none;
}
#matchGame .matchProgressBar .currentLevel {
    height: 100%;
    display: block;
    text-align: center;
    width: 100%;
    position: absolute;
    text-transform: uppercase;
    line-height: 35px;
    z-index: 2;
    font-size: 24px;
    font-weight: bold;
}
#matchGame .matchProgressBar .currentProgress {
    height: 100%;
    position: absolute;
    left: 0;
    animation-name: barBgColorChange;
    animation-timing-function: linear;
    animation-duration: 180s;
    animation-iteration-count: 1;
    transition: width 1s linear;
}

@keyframes barBgColorChange {
    0% {
        background-color: #fcd65c;
    }
    25% {
        background-color: #e5ae49;
    }
    50% {
        background-color: #fcb05c;
    }
    75% {
        background-color: #e58249;
    }
    100% {
        background-color: #fc7f5e;
    }
}
p.hAtGame {
    color: var(--color-666-999);
    font-size: 30px;
    margin: 5px 0 15px 0;
}
div.matchList {
    height: calc(100% - 70px);
}
#gameSubjectContainer {
    position: relative;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 51px);
    margin-top: 20px;
}
#gameSubjectContainer .subject-block{
    background-color: var(--background-color-white-middleDarkGray);
    border: 1px solid var(--border-e5e5e5-222);
    padding: 10px;
    border-radius: .7rem;
    margin: 0 15px 15px 0;
    width: calc(25% - 15px);
    height: 190px;
    min-width: 315px;
    float: left;
}
.subject-block .dpFlx {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 90;
}
#gameSubjectContainer .subject-block.moreSubjects {
    border: 2px dashed var(--border-e0e0e0-666);
    display: flex;
    justify-content: center;
    cursor: pointer;
    color: var(--color-666-999);
}
#gameSubjectContainer .subject-block.moreSubjects .moreInner {
    width: 100%;
    padding-top: 30px;
}
#gameSubjectContainer .subject-block.moreSubjects:hover {
    border: 3px dashed var(--highlighted-border-color);
    color: var(--highlighted-text-color);
}
#gameSubjectContainer .subject-block.moreSubjects i {
    font-size: 60px;
    margin: auto;
    width: 60px;
    display: block;
}
#gameSubjectContainer .subject-block.moreSubjects p {
    font-size: 24px;
    text-align: center;
}
.subjectHoverContainer {
    transition: opacity .5s ease-in-out;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
}
.subject-block:hover .subjectHoverContainer{
    opacity: .3;
}
.subjectHoverContainer .subjectCover {
    width: 120px;
    height: 170px;
    z-index: 10;
}
.subjectHoverContainer .subjectCover img {
    width: 120px;
    height: 170px;
    border-radius: .7rem;
}
.subjectHoverContainer .subjectNameContainer {
    width: 100%;
    height: 70px;
    z-index: 10;
    padding: 5px 10px 5px 10px;
    overflow: hidden;
}
.subjectHoverContainer .subjectNameContainer p {
    color: var(--color-666-999);
    font-size: 18px;
}
.subject-block .startGameButton {
    transition: opacity .5s ease-in-out;
    opacity: 0;
    position: absolute;
    cursor: pointer;
    z-index: 100;
    min-width: 80px;
    text-transform: none;
    padding-top: 15px;
}
.subject-block .startGameButton.activatedCards {
    top: 32px;
    width: calc(40% - 1px);
    border-top-left-radius: 2.5rem;
    border-bottom-left-radius: 2.5rem;
    border-top-right-radius: initial;
    border-bottom-right-radius: initial;
    height: 110px;
    left: 10%;
}
.subject-block .startGameButton.activatedCards.inactive {
    background-color: var(--background-e9e9e9-222);
    color: var(--color-444-999);
    cursor: pointer;
}
.subject-block .startGameButton.activatedCards.inactive:hover {
    background: var(--background-d3d3d3-363636);
}
.subject-block .startGameButton {
    background: var(--highlighted-background-color);
    color: white;
}
.subject-block .startGameButton:hover {
    background: var(--highlighted-background-color);
}
.subject-block .startGameButton.allCards {
    top: 32px;
    height: 110px;
    width: calc(40% - 1px);
    border-top-right-radius: 2.5rem;
    border-top-left-radius: initial;
    border-bottom-right-radius: 2.5rem;
    border-bottom-left-radius: initial;
    right: 10%;
}
.subject-block .startGameButton img {
    width: 40px;
}
.subject-block .startGameButton i {
    font-size: 40px;
}
.subject-block .startGameButton p {
    margin-top: 7px;
}
.subject-block:hover .startGameButton {
    opacity: 1;
    pointer-events: auto;
}
.subjectHoverContainer .subjectBottomStripe {
    position: absolute;
    bottom: -10px;
    left: -10px;
    height: calc(100% - 70px);
    width: calc(100% + 20px);
    z-index: 8;
    padding: 0 5px 0 130px;
    border-bottom-right-radius: .7rem;
    border-bottom-left-radius: .7rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.subjectHoverContainer .subjectBottomStripe > div {
    height: 100%;
    padding-top: 25px;
}
.cardPercentage, .cardBestTime {
    font-size: 28px;
    color: var(--color-666-999);
}
.cardPercentage {
    font-size: 16px;
    font-weight: bold;
    margin-top: 3px;
}
.cardClock {
    width: 30px;
    height: 21px;
}
.cardCup {
    width: 65px;
}
#gameInfoContainer {
    width: 50%;
    position: absolute;
    right: 0;
    top: -46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 46px;
    color: var(--color-666-999);
}
#gameInfoContainer * {
    font-size: 20px;
}
#gameInfoContainer .pagination{
    width: 200px;
    left: -100px;
    text-align: center;
    position: relative;
}
.cardBlockContainer {
    height: calc(100% - 121px);
}
/**
    match game styles end
**/
.smiley-stars.atGames {
    position: static;
    height: 100px;
    width: 250px;
    margin-left: 80px;
    margin-top: 30px;
}
.smiley-stars.atGames .icon_star {
    display: inline-block;
    font-size: 92px;
    text-shadow: 2px 0 0 var(--background-color-white-darkestGray), -2px 0 0 var(--background-color-white-darkestGray), 0 2px 0 var(--background-color-white-darkestGray), 0 -2px 0 var(--background-color-white-darkestGray), 2px 2px var(--background-color-white-darkestGray), -2px -2px 0 var(--background-color-white-darkestGray), 2px -2px 0 var(--background-color-white-darkestGray), -2px 2px 0 var(--background-color-white-darkestGray);
}
.smiley-stars.atGames .icon_star:nth-child(1), .smiley-stars .icon_star:nth-child(3) {
    font-size: 72px;
    transform: translateY(0.8rem);
}
.smiley-stars.atResult {
    position: relative;
    top: 0;
    left: calc(50% - 160px);
    background: var(--background-color-white-middleDarkGray);
    padding: 0 0 0 40px;
    width: 320px;
    height: 130px;
    border-radius: 55px;
    margin-top: 10px;
    z-index: 2;
    border: 1px solid var(--border-ccc-222);
}
.smiley-stars.atResult .icon_star {
    display: inline-block;
    font-size: 92px;
    text-shadow: 2px 0 0 var(--background-color-white-darkestGray), -2px 0 0 var(--background-color-white-darkestGray), 0 2px 0 var(--background-color-white-darkestGray), 0 -2px 0 var(--background-color-white-darkestGray), 2px 2px var(--background-color-white-darkestGray), -2px -2px 0 var(--background-color-white-darkestGray), 2px -2px 0 var(--background-color-white-darkestGray), -2px 2px 0 var(--background-color-white-darkestGray);
}
.smiley-stars.atResult .icon_star:nth-child(1), .smiley-stars .icon_star:nth-child(3) {
    font-size: 72px;
    transform: translateY(0.8rem);
}
.smiley-stars.atResult span {
    color: var(--highlighted-text-color);
    position: absolute;
    width: 100%;
    text-align: center;
    font-weight: bold;
    left: 0;
    bottom: 10px;
}
.smiley-stars.atResult.lost span {
    color: #999;
}
.presentAnimation {
    float: right;
    font-size: 26px;
    top: 15px;
    position: relative;
    color: var(--highlighted-text-color);
    cursor: pointer;
    animation-name: presentDrag, presentDrag, presentDrag;
    animation-timing-function: linear;
    animation-duration: .5s;
    animation-delay: 2s, 5s, 10s;
    animation-iteration-count: 2;
}

@keyframes presentDrag {
    0% {
        left: 0;
    }
    25% {
        left: 5px;
    }
    50% {
        left: 0;
    }
    75% {
        left: -5px;
    }
    100% {
        left: 0;
    }
}
.reveal-modal.gift-modal {
    top: 15% !important;
    padding-top: 60px;
    width: 570px;
    margin-left: -290px;
    cursor: default;
    background: #222;
    background-size: cover;
}
.gift-modal .text-information i {
    font-size: 64px;
    color: var(--highlighted-text-color);
    display: block;
    margin: 0 auto 20px;
    padding-left: 20px;
}
.gift-modal .giftInfo {
    margin-top: 10px;
    padding: 0 10px;
    font-size: 18px;
    text-align: center;
    color: #999;
}
.buttons-row-gift {
    width: 100%;
    margin-top: 30px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}
.buttons-row-gift button {
    width: 48%;
    height: 44px;
    font-weight: bold;
}
.darkButton {
    color: white;
    background-color: #363636;
}
.darkButton:hover, .darkButton:active, .darkButton:focus {
    background-color: #363636;
    opacity: .7;
}

/*** preferences for themes ***/
.switchDarkMode {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.switchDarkMode input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #999;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--background-color-white-middleDarkGray);
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slider {
    background-color: var(--highlighted-background-color);
}
input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
.slider.round {
    border-radius: 34px;
}
.slider.round:before {
    border-radius: 50%;
}
.themePref {
    height: 60px;
    padding-top: 20px;
    display: flex;
    justify-content: left;
    align-items: center;
}
.themePref > span {
    font-size: 18px;
    margin-right: 10px;
    height: 25px
}

/*** phasesInfoModal ***/
.phases-info-modal {
    top: 70px !important;
    padding: 10px 10px 10px;
    width: 900px;
    margin-left: -450px;
    cursor: default;
    background: var(--background-e2e2e2-666) !important;
}
.phases-info-modal .first-block {
    background: var(--background-color-white-middleDarkGray);
    border-radius: .7rem;
    padding: 10px 10px 0 10px;
}
.phases-info-modal .phases-bars {
    height: 300px;
    width: 100%;
    margin-bottom: 40px;
}
.phases-info-modal .phases-bars .bars {
    width: 100%;
    height: 100%;
}
.phases-info-modal .phases-bars .bars .bar-main {
    float: left;
    position: relative;
    background: var(--background-e2e2e2-222);
    border-radius: .7rem;
}
.phases-info-modal .phases-bars .bars .bar-main.bgOrange {
    background: var(--highlighted-background-color);
}
.phases-info-modal .phases-bars .phase-name {
    width: 100%;
    position: relative;
    text-align: center;
    font-size: 20px;
    top: 10px;
}
.phases-info-modal .phases-bars .phase-name.whiteClr {
    color: white;
}
.phases-info-modal .learnIcon {
    background: var(--icon-teacher) no-repeat;
    width: 26px;
    height: 30px;
    margin: 10px auto;
    display: block;
}
.phases-info-modal .phases-bars .phase-duration {
    font-size: 20px;
    position: absolute;
    width: inherit;
    bottom: -50px;
}
.phases-info-modal .first-block p {
    font-size: 26px;
    color: var(--color-666-999);
}
.phases-info-modal .first-block p.next-label {
    font-size: 20px;
    color: var(--highlighted-text-color);
    padding-bottom: 10px;
    margin: 0;
}
.phases-info-modal .first-block > p > i {
    display: inline-flex;
    background: var(--icon-calendar-clock-current) no-repeat;
    margin-left: 5px;
    width: 21px;
    height: 21px;
    background-size: contain;
    position: relative;
    top: 4px;
}
.phases-info-modal .first-block .phases-line {
    width: 100%;
    margin-bottom: 10px;
    height: 10px;
}
.phases-info-modal .first-block .phases-line .vertical-line {
    width: 5px;
    height: 20px;
    background: var(--background-e2e2e2-222);
    float: left;
}
.phases-info-modal .first-block .phases-line .line {
    margin-top: 8px;
    width: calc(100% - 15px);
    background: var(--background-e2e2e2-222);
    height: 3px;
    float: left;
}
.phases-info-modal .first-block .phases-line .arrow {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid var(--background-e2e2e2-222);
    float:right;
    bottom: 12px;
    position: relative;
}
.phases-info-modal .second-block {
    width: 100%;
    padding: 10px;
    background: var(--background-color-white-middleDarkGray);
    margin-top: 5px;
    border-radius: .7rem;
    opacity: 1;
    transition: all linear .5s;
    max-height: 300px;
    display: block;
}
.phases-info-modal .second-block.ng-animate {
    max-height: 0;
    opacity: 0;
    padding: 0;
    margin-top: 0;
    display: none;
}
.phases-info-modal .second-block p {
    color: var(--color-666-999);
    font-size: 22px;
    margin-bottom: 5px;
}
.phases-info-modal .third-block {
    transition: opacity linear .5s;
    opacity: 1;
    margin-top: 5px;
    width: 100%;
    max-height: 40px;
    display: block;
}
.phases-info-modal .third-block.ng-animate {
    opacity: 0;
    display: none;
}
.phases-info-modal .third-block button {
    width: 100%;
    height: 40px;
    font-size: 20px;
}
.phases-info-modal .third-block button:hover, .phases-info-modal .third-block button:focus {
    opacity: .7;
}

/*** beta role switch styles ***/
.switchBetaRole {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
    top: 3px;
    left: 2px;
}
.switchBetaRole .checker {
    opacity: 0;
    width: 0;
    height: 0;
}
.switchBetaRole .slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 16px;
    left: 2px;
    bottom: 1px;
    background-color: var(--background-color-white-middleDarkGray);
    -webkit-transition: .4s;
    transition: .4s;
}
.switchBetaRole .checker.set + .slider:before {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
}
.checker.set + .slider {
    background-color: var(--highlighted-background-color);
}
.checker + .slider.round {
    border-radius: 34px;
    height: 17px;
}

/*** beta window styles ***/
.reveal-modal.beta-modal {
    top: 15% !important;
    padding: 20px 20px 10px;
    width: 570px;
    margin-left: -290px;
    cursor: default;
    background: var(--background-color-white-darkestGray);
    background-size: cover;
}
.buttons-row-gift.betaInfo {
    padding: 0;
}
.beta-modal h1, .beta-modal h4 {
    color: var(--highlighted-text-color);
}
.beta-modal h4, .beta-modal p {
    text-align: left;
}
.beta-modal .betaInfoText {
    color: var(--color-222-white);
    font-size: 18px;
}
.beta-modal .betaInfoPrivacy {
    color: var(--color-999-666);
}
.propositionText {
    padding:20px;
    margin-bottom: 0;
    color: var(--color-747474-999);
}
.micPractice {
    position: absolute;
    left: calc(50% - 56px);
    z-index: 1;
    cursor: pointer;
    width: 107px;
    bottom: 10px;
}
.micPractice .innerMicPractice {
    display: flex;
    width: 100%;
}
.micPractice img {
    float: left;
    width: 35px;
    height: 38px;
    position: relative;
    top: 2px;
    right: 2px;
}
.micPractice i.icon_mic {
    font-size: 21px;
    color: #999;
    position: relative;
    left: 5px;
    top: 8px;
}
.micPractice i.icon_mic.active {
    color: indianred;
}
.betaBadge {
    position: absolute;
    color: var(--highlighted-text-color);
    font-weight: bold;
    font-size: 10px;
    display: block;
    cursor: default;
    text-align: center;
    bottom: 30px;
    left: 100px;
}
.switchVoiceOption {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 30px;
    top: 3px;
    left: 2px;
}
.switchVoiceOption .slider {
    background-color: var(--highlighted-background-color);
}
.switchVoiceOption .checker {
    opacity: 0;
    width: 0;
    height: 0;
}
.switchVoiceOption .slider:before {
    position: absolute;
    content: "";
    height: 27px;
    width: 28px;
    left: 2px;
    bottom: 2px;
    background-color: var(--background-666-363636-white);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}
.switchVoiceOption .checker.set + .slider:before {
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(22px);
}
.switchVoiceOption .checker.set + .slider {
    background-color: indianred;
}
.switchVoiceOption .checker + .slider.round {
    border-radius: 34px;
    height: 31px;
}

/***prototype code***/
.checkAnswerButton{
    color: white;
}
.checkAnswerButton::before {
    background-color: var(--highlighted-background-color);
}
.checkAnswerButton:not([disabled]):hover::before, .checkAnswerButton:not([disabled]):focus::before {
    opacity: .7;
}
.checkAnswerButton::after {
    border: 1px solid var(--highlighted-border-color);
}
.iKnowButton{
    width: calc(50% - 5px);
    color: white;
}
.iKnowButton::before {
    background-color: rgba(105,180,45,1);
}
.iKnowButton:not([disabled]):hover::before, .iKnowButton:not([disabled]):focus::before {
    background-color: rgba(105,180,45,.7);
}
.iKnowButton::after {
    border: 1px solid rgba(105,180,45,.7);
}
.iDontKnowButton{
    width: calc(50% - 5px);
    color: white;
}
.iDontKnowButton::before {
    background-color: rgba(230,60,0,1);
}
.iDontKnowButton:not([disabled]):hover::before, .iDontKnowButton:not([disabled]):focus::before {
    background-color: rgba(230,60,0,.7);
}
.iDontKnowButton::after {
    border: 1px solid rgba(230,60,0,.7);
}
.nextCardButton {
    width: calc(50% - 5px);
    color: white;
}
.nextCardButton::before {
    background-color: rgba(105,180,45,1);
}
.nextCardButton:not([disabled]):hover::before, .nextCardButton:not([disabled]):focus::before {
    background-color: rgba(105,180,45,.7);
}
.nextCardButton::after {
    border: 1px solid rgba(105,180,45,.7);
}
.iWasRightButton {
    color: white !important;
    border: none !important;
}
.iWasRightButton::before {
    background-color: rgba(153,153,153,1);
}
.iWasRightButton:not([disabled]):hover::before, .iWasRightButton:not([disabled]):focus::before {
    background-color: rgba(153,153,153,.7);
}
.iWasRightButton::after {
    border: 1px solid rgba(153,153,153,.7);
}
.helpMeButton{
    width: 100%;
}
.helpMeButton::before {
    background-color: rgba(153,153,153,1);
}
.helpMeButton:not([disabled]):hover::before, .helpMeButton:not([disabled]):focus::before {
    background-color: rgba(153,153,153,.7);
}
.helpMeButton::after {
    border: 1px solid rgba(153,153,153,.7);
}
.helpMeButton.halved {
    width: calc(50% - 5px);
}
.compareButton {
    width: 100%;
}
.compareButton::before {
    background-color: var(--highlighted-background-color);
}
.compareButton:not([disabled]):hover::before, .compareButton:not([disabled]):focus::before {
    opacity: .7;
}
.compareButton::after {
    border: 1px solid var(--highlighted-background-color);
}
.compareButtonRed {
    width: calc(50% - 5px);
}
.compareButtonRed::before {
    background-color: rgba(230,60,0,1);
}
.compareButtonRed:not([disabled]):hover::before, .compareButtonRed:not([disabled]):focus::before {
    background-color: rgba(230,60,0,.7);
}
.compareButtonRed::after {
    border: 1px solid rgba(230,60,0,.7);
}
.compareButtonRed.fromIDontKnow {
    width: 100%;
}
.recordButton {
    width: calc(50% - 5px);
}
.compareButtonRed.fromIDontKnow, .recordButton.fromIDontKnow {
    width: 100%;
}
.recordButton::before {
    background-color: rgba(205,92,92,1);
}
.recordButton:not([disabled]):hover::before, .recordButton:not([disabled]):focus::before {
    background-color: rgba(205,92,92,.7);
}
.recordButton:not([disabled])::after {
    border: 1px solid rgba(205,92,92,.7);
}
.recordButton.recording {
    background: indianred;
    animation: shadow-pulse 1s infinite;
}
.recordButton.recording span {
    display: block;
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}
@keyframes shadow-pulse
{
    0% {
        box-shadow: 0 0 0 0 rgba(205,92,92, 0.2);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(205,92,92, 0);
    }
}
.noInputSwitcher {
    width: 100%;
    display: block;
    font-size: 20px;
    color: #999;
    text-align: center;
    position: absolute;
    top: -35px;
    cursor: pointer;
}
.noInputSwitcher span.disabled {
    cursor: default;
}
.noInputSwitcher .tooltip {
    left: 20%;
    min-width: 60%;
    top: -27px;
    width: auto;
}
.dPBParams {
    background: none;
    height: 50px;
    font-size: 18px;
    color: white;
}
.dPBParams[disabled] {
    color: white !important;
    opacity: 0.3 !important;
    background: none !important;
}
.dPBParams span {
    z-index: 2;
    position: relative;
}
.dPBParams:hover, .dPBParams:focus {
    background: none !important;
}
.dPBParams::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: .5rem;
    transition: all 0.3s;
}
.dPBParams:not([disabled]):hover::before, .dPBParams:not([disabled]):focus::before {
    transform: scale(0.99,0.92);
}
.dPBParams::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s;
    border-radius: .5rem;
    transform: scale(1.1,1.1);
}
.dPBParams:not([disabled]):hover::after, .dPBParams:not([disabled]):focus::after {
    opacity: 1;
    transform: scale(1.02,1.1);
    animation-name: flash;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.practiceBottomButtons {
    margin-top: 30px;
}
.no-animate {
    -webkit-transition: none !important;
    transition: none !important;
}
.arrowsTTNoInput {
    position: absolute;
    padding: 16px;
    border-radius: .7rem;
    width: 100%;
    height: 200px;
    top: -230px;
    background: var(--background-color-gray-darkestGray);
}
.arrowsTTNoInput p {
    margin-bottom: 5px;
    text-align: center;
    color: var(--highlighted-text-color);
    height: 40%;
    font-size: 20px;
}
.arrowsTTNoInput img {
    margin: auto;
    display: block;
    height: calc(60% - 5px);
}
.leaderBoardPage .topBlock {
    background: var(--background-color-white-middleDarkGray);
    width: 100%;
    height: auto;
    border-radius: .7rem;
    padding: 14px 5px 5px 5px;
    margin-bottom: 10px;
    color: #999;
    font-size: 24px;
    text-align: center;
}
.leaderBoardPage .topBlock i {
    font-size: 70px;
    position: relative;
    bottom: 15px;
}
.leaderBoardPage .topBlock i:not(.disabled) {
    color: var(--highlighted-text-color);
    cursor: pointer;
}
.leaderBoardPage .topBlock span:not(.nub) {
    width: 100%;
    text-align: center;
}
.leaderBoardPage .generalInfo {
    display: flex;
    background: var(--background-color-white-middleDarkGray);
    width: 100%;
    align-items: center;
    border-radius: .7rem;
    padding: 0;
    height: 150px;
    color: #999;
}
.leaderBoardPage .generalInfo > div {
    height: 100%;
    width: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}
.leaderBoardPage .generalInfo > div img {
    height: 70px;
}
.leaderBoardPage .generalInfo > div span.forTooltip {
    display: flex;
    justify-content: center;
}
.leaderBoardPage .generalInfo > div span.tooltip {
    top: 83px;
    width: 230px;
}
.leaderBoardPage .generalInfo > div span.tooltip.placement {
    top: 140px;
}
.leaderBoardPage .generalInfo > div span.tooltip.overallParticipants {
    top: 83px;
}
.leaderBoardPage .generalInfo > div p {
    margin: 5px 0 2px 0;
}
.leaderBoardPage .generalInfo > div .highlighted {
    font-size: 20px;
}
.leaderBoardPage .generalInfo span.jumpToPlace, .leaderBoardPage .generalInfo span.refreshData {
    cursor: pointer;
    font-size: 18px;
    color: var(--highlighted-text-color);
    margin-top: 10px;
}
.leaderBoardPage .generalInfo span.overallLearned {
    margin-top: 8px;
}
.leaderBoardPage .generalInfo span.jumpToPlace.disabled, .leaderBoardPage .generalInfo span.refreshData.disabled {
    cursor: default;
    color: #999;
}
.leaderBoardPage .mainList {
    height: calc(100% - 354px);
    overflow-y: auto;
    margin-top: 5px;
}
.leaderBoardPage .mainList.fullHeight {
    height: calc(100% - 280px);
}
.leaderBoardPage .mainList.cropped {
    height: calc(100% - 440px);
}
.leaderBoardPage .mainList.schools.cropped {
    height: calc(100% - 493px);
}
.leaderBoardPage .mainList ul {
    background: none;
    margin: 0;
    overflow: hidden;
}
.leaderBoardPage .mainList ul li {
    color: #999;
    height: 50px;
    background: var(--background-color-white-middleDarkGray);
    width: 100%;
    border-bottom: 1px solid var(--border-eee-222);
    cursor: pointer;
}
.leaderBoardPage .mainList ul li.schoolLi {
    height: 70px;
}
.leaderBoardPage .mainList ul li.opened, .leaderBoardPage .currentUser li.opened {
    height: 160px;
}
.leaderBoardPage .mainList ul li.schoolLi.opened, .leaderBoardPage .currentUser li.schoolLi.opened {
    height: 210px;
}
.leaderBoardPage .mainList ul li:last-of-type {
    margin: 0;
}
.leaderBoardPage .mainList ul li .mainInfo, .leaderBoardPage .currentUser li .mainInfo {
    display: flex;
    align-items: center;
}
.leaderBoardPage .mainList ul li.schoolLi .mainInfo, .leaderBoardPage .currentUser li.schoolLi .mainInfo {
    padding-top: 15px;
}
.leaderBoardPage .mainList ul li .mainInfo span,
.leaderBoardPage .mainList ul li .additional span,
.leaderBoardPage .currentUser li .mainInfo span,
.leaderBoardPage .currentUser li .additional span {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
}
.leaderBoardPage .mainList ul li.schoolLi span {
    line-height: 1.1;
}
.leaderBoardPage .mainList ul li span img, .leaderBoardPage .currentUser li span img {
    height: 50px;
}
.leaderBoardPage .mainList ul li span img.smallerHeight, .leaderBoardPage .currentUser li span img.smallerHeight {
    height: 40px;
}
.leaderBoardPage .mainList ul li span i, .leaderBoardPage .currentUser li span i {
    font-size: 30px;
}
.leaderBoardPage .mainList ul li span i.favorite {
    font-size: 20px;
    left: 1px;
    position: relative;
    display: none;
}
.leaderBoardPage .mainList ul li:hover span i.favorite,
.leaderBoardPage .mainList ul li.opened span i.favorite,
.leaderBoardPage .mainList.schools.allSchools li.isFavorite i.favorite {
    display: block;
}
.leaderBoardPage .mainList ul li span i:hover, .leaderBoardPage .currentUser li span i:hover {
    color: var(--highlighted-text-color);
    cursor: pointer;
}
.leaderBoardPage .mainList ul li .additional, .leaderBoardPage .currentUser li .additional {
    width: 72%;
    margin-left: 18%;
}
.leaderBoardPage .mainList ul li.schoolLi .additional, .leaderBoardPage .currentUser li.schoolLi .additional {
    margin-left: 16%;
    width: 74%;
    margin-top: 10px;
}
.leaderBoardPage .mainList ul li .additional span.label1, .leaderBoardPage .currentUser li .additional span.label1 {
    width: 75%;
    display: inline-block;
}
.leaderBoardPage .mainList ul li .additional span.value, .leaderBoardPage .currentUser li .additional span.value {
    width: 25%;
    display: inline-block;
    text-align: end;
}
.leaderBoardPage .currentUser li .additional span.value {
    width: calc(25% - 12px);
}
.leaderBoardPage .currentUser {
    background: none;
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: calc(100% - 40px);
    list-style: none;
    -webkit-box-shadow: 0px 0px 15px 5px var(--leaderboard-shadow-color);
    -moz-box-shadow: 0px 0px 15px 5px var(--leaderboard-shadow-color);
    box-shadow: 0px 0px 15px 5px var(--leaderboard-shadow-color);
    border-radius: .7rem;
    margin-bottom: 10px;
}
.leaderBoardPage .currentUser li {
    color: #999;
    height: 50px;
    background: var(--background-color-white-middleDarkGray);
    width: 100%;
    border-radius: .7rem;
}
.leaderBoardPage .currentUser li.schoolLi {
    height: 70px;
}
.leaderBoardPage .currentUser li .mainInfo {
    color: var(--highlighted-text-color);
}
.leaderBoardPage .currentUser li.schoolLi .mainInfo {
    line-height: 1.1;
}
.leaderBoardPage .currentUser.opened li {
    height: 160px;
}
.leaderBoardPage .currentUser.opened li.schoolLi {
    height: 210px;
}
.leaderBoard-window {
    top: 15% !important;
    padding: 10px 15px;
    width: 500px;
    margin-left: -250px;
    cursor: default;
    background: var(--background-color-gray-middleDarkGray-white) !important;
    background-size: cover;
    color: var(--color-747474-999);
    text-align: left;
}
.leaderBoard-window h4 {
    font-weight: normal;
    font-size: 22px;
    margin-bottom: 10px;
    color: var(--color-747474-999);
    padding-left: 10px;
}
.leaderBoard-window p {
    padding-left: 10px;
    margin-bottom: 30px;
}
.dashboard-info table {
    border: none;
    background: none;
    margin-bottom: 25px;
}
.dashboard-info table {
    margin-bottom: 10px;
    padding-left: 10px;
}
.dashboard-info table tr td {
    font-size: 16px;
    vertical-align: middle;
    color: var(--color-747474-999);
    padding: 5px;
}
.dashboard-info table tr td.check {
    color: var(--highlighted-text-color);
    width: 30px;
    font-size: 25px;
}
.leaderBoard-window .preference-innerBlock {
    margin-bottom: 10px;
}
.leaderBoard-window .preference-block-item {
    background: var(--background-color-white-darkestGray-gray);
}
.leaderBoard-window .close {
    top: 5px;
    right: -5px;
    font-size: 30px;
    color: var(--color-747474-999);
}
.leaderBoard-window table {
    background: var(--background-color-white-darkestGray-gray);
    border: none;
    border-radius: .7rem;
}
.leaderBoard-window table tr td {
    color: var(--color-747474-999);
    background: var(--background-color-white-darkestGray-gray);
    padding: 5px;
}
.leaderBoard-window table i {
    font-size: 18px;
}
.leaderBoard-window table img {
    width: 27px;
    position: relative;
    right: 3px;
}
.leaderBoard-window table tr.poh td:first-of-type {
    padding-left: 30px;
    width: 15%;
}
.leaderBoard-window table tr.poh td:last-of-type {
    width: 20%;
    text-align: center;
}
.leaderBoardsNavigation {
    max-width: calc(100% - 160px);
    height: 65px;
    display: flex;
    justify-content: left;
    align-items: flex-start;
}
.leaderBoardsNavigation .leaderBoardTab {
    height: 100%;
    width: 20%;
    margin-right: 5px;
    cursor: pointer;
    color: var(--color-747474-999);
    position: relative;
}
.leaderBoardsNavigation .leaderBoardTab > div {
    background: var(--background-color-white-middleDarkGray);
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.leaderBoardsNavigation .leaderBoardTab.comingSoon > div {
    opacity: .5;
}
.leaderBoardsNavigation .leaderBoardTab > div img {
    height: 30px;
    margin-right: 5px;
}
.leaderBoardsNavigation .leaderBoardTab.selected {
    height: calc(100% + 5px);
    color: var(--highlighted-text-color);
}
.leaderBoardsNavigation .leaderBoardTab .tooltip {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: -10px;
}
.leaderBoardsNavigation i {
    color: var(--color-icons);
    cursor: pointer;
    font-size: 22px;
    align-self: center;
}
.leaderBoardsNavigation i.icon_search {
    left: 20px;
    position: relative;
}
.leaderBoardsNavigation i.social_share {
    left: 36px;
    position: relative;
}
.leaderBoardsNavigation .infoWindowTrigger {
    font-size: 23px;
    text-align: right;
    position: absolute;
    right: 25px;
}
.leaderBoardsNavigation i:hover {
    color: var(--highlighted-text-color);
}
.leaderBoardPage .selectSchool {
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: calc(100% - 40px);
    -webkit-box-shadow: 0px 0px 15px 5px var(--leaderboard-shadow-color);
    -moz-box-shadow: 0px 0px 15px 5px var(--leaderboard-shadow-color);
    box-shadow: 0px 0px 15px 5px var(--leaderboard-shadow-color);
    border-radius: .7rem;
    margin-bottom: 10px;
    height: 40px;
    font-size: 22px;
}
.searchSchoolWindow {
    top: 15% !important;
    padding: 20px 15px 10px 15px;
    width: 600px;
    margin-left: -300px;
    cursor: default;
    background: var(--background-color-gray-middleDarkGray-white) !important;
    background-size: cover;
    color: var(--color-747474-999);
    text-align: left;
    max-height: 65vh;
}
.searchSchoolWindow p {
    font-size: 18px;
}
.searchSchoolWindow .icon_close {
    right: 10px;
    top: 10px;
    color: var(--color-747474-999);
}
.searchSchoolWindow .forSuggestions {
    padding: 0;
    margin-top: 10px;
    border-right: .7rem;
    display: flex;
    flex-flow: column;
    max-height: calc(65vh - 150px);
    overflow: auto;
    text-align: left;
}
.searchSchoolWindow .forSuggestions .suggestion {
    height: auto;
    min-height: fit-content;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--background-color-white-darkestGray-gray);
    margin-bottom: 1px;
    padding: 10px;
    border-radius: .7rem;
}
.searchSchoolWindow .forSuggestions .suggestion:hover {
    opacity: .8;
}
.searchSchoolWindow .forSuggestions .suggestion .icon_search {
    margin-right: 10px;
}
.searchSchoolWindow .forSuggestions .suggestion span {
    margin-left: 5px;
    margin-right: 10px;
    line-height: 1.3;
}
.searchSchoolWindow .forSuggestions .suggestion span:first-child + span.imageSpan {
    margin-left: auto;
}
.searchSchoolWindow .forSuggestions .suggestion span.imageSpan {
    margin-left: 5px;
    text-align: center;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.searchSchoolWindow .forSuggestions .suggestion:not(.highlighted) span.imageSpan {
    display: none;
}
.searchSchoolWindow .forSuggestions .suggestion span.imageSpan img {
    height: 35px;
    cursor: pointer;
}
.searchSchoolWindow .forSuggestions .suggestion:hover span.imageSpan {
    display: block;
}
.mainList .emptyLeaderBoard {
    width: 100%;
    justify-content: center;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.preference-avatars-list {
    margin: -10px 0;
    padding-bottom: 20px;
    list-style: none;
}

.preference-avatars-list p {
    line-height: 1;
    /*word-break: break-all;*/
}

.preference-avatars-list .avatar-box {
    padding: 10px;
    margin: 10px 0;
    border-radius: 0.7rem;
    background-color: var(--background-color-white-middleDarkGray);
    cursor: default !important;
}

.preference-avatars-list .avatar-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.preference-avatars-list .avatar-image {
    position: relative;
    width: 80px;
    min-width: 80px;
    margin-right: 10px;
    overflow: hidden;
}

.preference-avatars-list .avatar-image:before {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    height: 0;
    width: 100%;
    padding-bottom: 100%;
    border-radius: 50%;
    background-color: #F5F5F5;
}

.preference-avatars-list .avatar-image img {
    display: block;
    width: 100%;
    position: relative;
    z-index: 2;
}

.preference-avatars-list .other-info {
    width: 100%;
}

.preference-avatars-list .other-info p {
    margin: 5px 0 0 0;
    font-size: 14px;
    color: var(--color-five);
}

.preference-avatars-list .avatar-title {
    display: flex;
    flex-direction: row;
    align-items: top;
    justify-content: space-between;
    width: 100%;
    font-size: 18px;
    color: var(--color-five);
}

.preference-avatars-list .avatar-box.active .avatar-title {
    color: var(--main-color);
}

.preference-avatars-list .avatar-box.disabled {
    opacity: 1 !important;
}

.preference-avatars-list .avatar-box.disabled .avatar-title,
.preference-avatars-list .avatar-box.disabled .avatar-image {
    opacity: 0.5;
}

.preference-avatars-list .avatar-title h2 {
    margin: 0;
    font-weight: normal;
    font-size: inherit;
    color: inherit;
}

.preference-avatars-list .avatar-title .icon_check {
    display: none;
    font-size: 1.5em;
    color: var(--main-color);
}

.preference-avatars-list .avatar-box.active .avatar-title .icon_check {
    display: block;
}

.preference-avatars-list .avatars-variants {
    margin-top: 10px;
    width: 100%;

    overflow-y: auto;
}

.preference-avatars-list .avatars-variants-list {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    flex-wrap: nowrap;
    min-width: min-content;
    margin: 0;
}

.preference-avatars-list .avatars-variants-list li {
    position: relative;
    width: 60px;
    min-width: 60px;
    margin: 0;
    opacity: 0.5;
    cursor: pointer;
}

.preference-avatars-list .avatars-variants-list li:before {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    height: 0;
    width: 100%;
    padding-bottom: 100%;
    border-radius: 50%;
    background-color: #F5F5F5;
}

.preference-avatars-list .avatars-variants-list li + li {
    margin-left: 10px;
}

.preference-avatars-list .avatars-variants-list li .icon_check {
    display: none;
    position: absolute;
    right: -8px;
    top: 4px;
    z-index: 1;
    color: var(--main-color);
    font-size: 20px;
}

.preference-avatars-list .avatars-variants-list li.active .icon_check {
    display: block;
}

.preference-avatars-list .avatars-variants-list li:hover {
    opacity: 0.8;
}

.preference-avatars-list .avatars-variants-list li.active {
    position: relative;
    opacity: 1;
}

.preference-avatars-list .avatars-variants-list li > img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
}

.preference-avatars-list .achivement-info {
    width: 100%;
    margin-top: 20px;
}

.preference-avatars-list .achivement-title {
    width: 100%;
    margin-top: 5px;
    font-size: 14px;
    color: var(--color-six);
}

.preference-avatars-list .achivement-title p {
    margin: 0;
    font-size: inherit;
    color: inherit;
}

.preference-avatars-list .achivement-progress {
    position: relative;
    margin-top: 0;
    width: 100%;
    height: 10px;
    margin-top: 10px;
    border-radius: 5px;
    background-color: #ccc;
    overflow: hidden;
}

.preference-avatars-list .achivement-progress .progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    height: 100%;
    border-radius: inherit;
    background-color: var(--highlighted-background-color);
}

.reveal-modal.start-selecting {
    padding: 20px;
    background-color: var(--background-color-gray-darkestGray);
    text-align: center;
    font-size: 14px;
}

.reveal-modal.start-selecting img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.reveal-modal.start-selecting h2 {
    color: var(--highlighted-background-color);
    font-weight: normal;
    font-size: 16px;
    text-transform: none;
}

.reveal-modal.start-selecting .checkbox-box {
    margin-top: 40px;
}

.reveal-modal.start-selecting .buttons {
    margin-top: 20px;
}

.reveal-modal.challenges-iframe .buttons {
    padding: 0 10px 10px;
}

.reveal-modal.start-selecting .button,
.reveal-modal.challenges-iframe .button {
    width: 100%;
}

.reveal-modal.start-selecting .buttons.auto .button,
.reveal-modal.challenges-iframe .buttons.auto .button {
    width: auto;
    float: right;
    margin-bottom: 0;
    margin-left: 10px;
}

.reveal-modal.start-selecting .buttons.in-row,
.reveal-modal.challenges-iframe .buttons.in-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.reveal-modal.start-selecting .buttons.in-row .button,
.reveal-modal.challenges-iframe .buttons.in-row .button {
    width: 100%;
    margin-bottom: 0;
}

.reveal-modal.start-selecting .buttons.in-row .button + .button,
.reveal-modal.challenges-iframe .buttons.in-row .button + .button {
    margin-left: 10px;
}

.reveal-modal.start-selecting .button:not(:last-child),
.reveal-modal.challenges-iframe .button:not(:last-child) {
    margin-bottom: 10px;
}

.reveal-modal.start-selecting .button.white,
.reveal-modal.challenges-iframe .button.white {
    background: var(--background-color-white-666);
    color: inherit;
}

.reveal-modal.start-selecting .close {
    color: inherit;
    top: 10px;
}

.reveal-modal.start-selecting .share-box input {
    width: 100%;
    height: 35px;
    border: none;
    border-bottom: 2px solid var(--highlighted-border-color);
    font-size: 21px;
    background: none;
    color: inherit;
    box-shadow: none;
    text-align: center;
}

.reveal-modal.school-section {
    font-size: 18px;
    padding: 40px;
    line-height: 1.2;
}

.reveal-modal.school-section .buttons .button {
    margin: 0 20px !important;
    font-size: inherit;
}

.reveal-modal.school-section p {
    font-size: inherit;
}

.leaderboard-warning {
    cursor: pointer;
}

.leaderboard-warning svg {
    height: 45px;
    vertical-align: middle;
}

.leaderboard-warning svg path {
    fill: var(--highlighted-text-color);
}

.leaderBoardsNavigation .leaderBoardTab > div svg {
    height: 30px;
    margin-right: 5px;
}

.leaderBoardsNavigation .leaderBoardTab > div svg path {
    fill: var(--color-747474-999);
}

.leaderBoardsNavigation .leaderBoardTab.selected > div svg path {
    fill: var(--highlighted-text-color);
}

#leaderBoardBtn.challenges:after,
.leaderBoardsNavigation .leaderBoardTab > div > span.challenges:after {
    content: ' ';
    display: block;
    position: absolute;
    right: -1px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: red;
}

.leaderBoardsNavigation .leaderBoardTab > div > span.challenges {
    position: relative;
}

.reveal-modal.challenges-iframe .GDPRScreen {
    width: 100%;
    margin: 0;
    padding-bottom: 10px;
}