:root { --white: #fff; --dark: #424242; --dark_grey: rgba(149,149,149,1); --dark_grey_hover: #a5a4a4; --dark_grey_active: #848383; --grey: rgba(190,190,190,1); --grey_hover: #cccbcb; --grey_active: #afafaf; --grey_medium: rgba(190,190,190,0.5); --light_grey: rgba(234,234,234,1); --light_grey_hover: #f3f3f3; --light_grey_active:#e0e0e0; --default: var(--mt-color-gray-50); --cyan: rgba(92,199,157,1); --m_background: rgba(255,255,255,1); --m_text: rgba(17,17,17,1); --m_text_mouseover: rgba(31,91,255,1); --m_icon: rgba(141,145,156,1); --m_icon_mouseover: rgba(31,91,255,1); --m_item_mouseover: rgba(31,91,255,0.1); --dummy_first: rgba(31,91,255,1); --dummy_second: rgba(31,70,176,1); --blue: rgba(31,91,255,1); --blue_medium: rgba(31,91,255,0.5); --blue_hover: rgba(65,116,255,1); --blue_active: rgba(28,82,230,1); --light_blue: rgba(31,91,255,0.2); --light_blue_hover: rgba(65,116,255,0.15); --light_blue_active: rgba(28,82,230,0.3); --red: rgba(244,63,74,1); --red_medium: rgba(244,63,74,0.5); --red_hover: rgba(246,92,101,1); --red_active: rgba(220,57,67,1); --light_red: rgba(244,63,74,0.2); --light_red_hover: rgba(246,92,101,0.15); --light_red_active: rgba(220,57,67,0.3); --pink: rgba(244,63,74,0.2); --pink_hover: rgba(246,92,101,0.15); --pink_active: rgba(220,57,67,0.3); /*deprecated, just in case*/ --green: rgba(0,210,135,1); --green_medium: rgba(0,210,135,0.5); --green_hover: rgba(38,217,153,1); --green_active: rgba(0,189,122,1); --light_green: rgba(0,210,135,0.2); --light_green_hover: rgba(38,217,153,0.15); --light_green_active: rgba(0,189,122,0.3); --orange: rgba(255,150,53,1); --orange_medium: rgba(255,150,53,0.5); --orange_hover: rgba(255,166,83,1); --orange_active: rgba(230,135,48,1); --light_orange: rgba(255,150,53,0.2); --light_orange_hover: rgba(255,166,83,0.15); --light_orange_active: rgba(230,135,48,0.3); --yellow:rgba(242,201,76,1); --yellow_medium:rgba(242,201,76,0.5); --yellow_hover:rgba(244,209,103,1); --yellow_active:rgba(218,181,68,1); --light_yellow:rgba(242,201,76,0.2); --light_yellow_hover:rgba(244,209,103,0.15); --light_yellow_active:rgba(218,181,68,0.3); --purple: rgba(155,81,224,1); --purple_medium: rgba(155,81,224,0.5); --purple_hover: rgba(170,107,229,1); --purple_active: rgba(140,73,202,1); --light_purple: rgba(155,81,224,0.2); --light_purple_hover: rgba(170,107,229,0.15); --light_purple_active: rgba(140,73,202,0.3); --banner_button: rgba(232,87,83,1); --banner_button_medium: rgba(232,87,83,0.5); --banner_button_hover: rgba(235,112,109,1); --banner_button_active: rgba(209,78,75,1); --dayquestion_background: rgba(31,91,255,1); --dayquestion_button_background: rgba(255,255,255,1); --dayquestion_button_background_hover: rgba(255,255,255,1); --dayquestion_button_background_active: rgba(230,230,230,1); --dayquestion_color: rgba(255,255,255,1); --dayquestion_button_color: rgba(17,36,66,1); --auth_button: rgba(31,91,255,1); --auth_button_medium: rgba(31,91,255,0.5); --auth_button_hover: rgba(65,116,255,1); --auth_button_active: rgba(28,82,230,1); --auth_button_text: #fff; --king: rgba(31,91,255,1); } :root { --mt_primary: var(--mt-color-black); --mt_common: var(--mt-color-gray-800); --mt_grey: #E6E9ED; --mt_light_grey: rgba(241, 242, 245, 0.5); --mt_dark_grey: #868EA3; /*MOT-15125*/ /*new design system naming*/ --mt_gray2: rgba(89, 94, 99, 1); --mt_gray3: rgba(134, 142, 163, 1); --mt_gray4: rgba(213, 215, 222, 1); --mt_gray5: rgba(230, 233, 237, 1); --mt_gray6: rgba(241, 242, 245, 1); /**/ --mt_blue: rgba(31,91,255,1); --mt_blue_medium: rgba(31,91,255,0.5); --mt_blue_hover: rgba(47,102,255,1); --mt_blue_active: rgba(23,68,191,1); --mt_light_blue: rgba(31,91,255,0.2); --mt_light_blue_hover: rgba(31,91,255,0.1); --mt_light_blue_active: rgba(31,91,255,0.4); --mt_green: rgba(18,213,143,1); --mt_green_medium: rgba(18,213,143,0.5); --mt_green_hover: rgba(18,213,143,1); --mt_green_active: rgba(0,158,101,1); --mt_light_green: rgba(0,210,135,0.2); --mt_light_green_hover: rgba(0,210,135,0.1); --mt_light_green_active: rgba(0,210,135,0.4); --mt_purple: rgba(187, 81, 224, 1); --mt_purple_hover: rgba(187, 107, 217, 1); --mt_light_purple: rgba(187, 81, 224, 0.2); --mt_light_purple_hover: rgba(187, 107, 217, 0.2); --mt_red: rgba(244, 63, 74, 1); --mt_red_medium: rgba(244, 63, 74, 0.5); --mt_red_hover: rgba(244, 81, 91, 1); --mt_red_active: #e43641; --mt_light_red: rgba(244, 63, 74, 0.2); --mt_light_red_hover: rgba(244, 63, 74, 0.15); --mt_light_red_active: rgba(244, 63, 74, 0.3); --mt_orange: rgba(255, 150, 53, 1); --mt_orange_medium: rgba(255, 150, 53, 0.5); --mt_light_orange: rgba(245, 159, 80, 0.2); --mt_yellow: rgba(242, 201, 76, 1); --mt_light_yellow: rgba(245, 159, 80, 0.2); --mt_light_yellow_hover: rgba(245, 159, 80, 0.1); --mt_light_yellow_active: rgba(245, 159, 80, 0.3); } .mt_primary_color {color: var(--mt_primary);} .mt_common_color {color: var(--mt_common);} .mt_grey_color {color: var(--mt_grey);} .mt_dark_grey_color {color: var(--mt_dark_grey);} .mt_yellow_color {color: var(--mt_yellow)} .mt_blue_color {color: var(--mt_blue)} .mt_blue_bg {background: var(--mt_blue)} .button.mt_blue_bg:hover {background: var(--mt_blue_hover)} .button.mt_blue_bg:active {background: var(--mt_blue_active)} .invert_transparent.mt_blue_bg {border-color: var(--mt_blue_medium); color: var(--mt_blue)} .mt_green_color {color: var(--mt_green)} .mt_green_bg {background: var(--mt_green)} .button.mt_green_bg:hover {background: var(--mt_green_hover)} .button.mt_green_bg:active {background: var(--mt_green_active)} .invert_transparent.mt_green_bg {border-color: var(--mt_green_medium); color: var(--mt_green)} .mt_light_green_color {color: var(--mt_light_green)} .mt_light_green_bg {background: var(--mt_light_green)} .button.mt_light_green_bg:hover {background: var(--mt_light_green_hover)} .button.mt_light_green_bg:active {background: var(--mt_light_green_active)} .invert_transparent.mt_light_green_bg {border-color: var(--mt_light_green); color: var(--mt_green)} .mt_red_color {color: var(--mt_red)} .mt_red_bg {background: var(--mt_red)} .button.mt_red_bg:hover {background: var(--mt_red_hover)} .button.mt_red_bg:active {background: var(--mt_red_active)} .invert_transparent.mt_red_bg {border-color: var(--mt_red_medium); color: var(--mt_red)} .mt_light_red_color {color: var(--mt_light_red)} .mt_light_red_bg {background: var(--mt_light_red)} .button.mt_light_red_bg:hover {background: var(--mt_light_red_hover)} .button.mt_light_red_bg:active {background: var(--mt_light_red_active)} .invert_transparent.mt_light_red_bg {border-color: var(--mt_light_red); color: var(--mt_red)} .mt_orange_color {color: var(--mt_orange)} .mt_orange_bg {background: var(--mt_orange)} .invert_transparent.mt_orange_bg {border-color: var(--mt_orange_medium); color: var(--mt_orange)} .mt_purple_bg {background-color: var(--mt_purple)} .mt_purple_bg_hover {background-color: var(--mt_purple_hover)} body, footer, .attach_block .attach_element, .lk_filter .submenu_switcher .submenu_item.active, .default_bg {background: var(--mt-color-gray-50);} /*Цвет бэкграунда и элементов, аналогичных бэкграунду*/ a, footer > div .feedback_btn, a:hover, .widget_navigation .owl-nav div:hover {color: var(--blue);} /* глобальный цвет ссылок*/ section, .section_header, .material_content, .ui-datepicker-header, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .default_text, .default_color, .sort_filter, .sort_filter select, .noimg .date_block, #header.noimg .item_content h2, #header.noimg .item_content p, .material_nav h4, #filter_group .category_filter li, #filter_group .category_filter li .inlay, input[type="text"], input[type="password"], textarea {color: rgba(66,66,66,1);} /* основной цвет */ .bordered, .section_header, .ui-datepicker-header {border-color: rgba(218,223,228,1) !important;} /*цвет границ*/ #filter_group.submenu_filter, .submenu_filter, .sort_filter, #filter_group .category_filter li, #submenu, label div:not([class]) {border-color: rgba(212,216,217,1);} /*цвет границ в фильтрах и у чекбоксов*/ .date, .like_comment, .material_wrapper > .r_float h3, .submenu_item, .material_nav p, .grid_block .grid .item_content p, .widget_navigation .owl-nav div {color: var(--dark_grey);} /*цвет блока дат, лайков, текст в карточках, текст фильтров*/ .breadcrumbs h2 a {color: var(--blue);} /*хлебные крошки ссылки*/ .submenu_active {background: var(--blue);} .submenu_item.active {border-color: var(--blue);} /*полоска подменю*/ #filter_group .category_filter li:hover, #filter_group .category_filter li:hover a, #filter_group .category_filter li.active {color: var(--white); background: var(--blue); border-color: var(--blue);} /*цвет второстепенного фильтра*/ /*STATIC COLORS*/ .noimg .date_block {border: 1px solid #364a5d;} /*цвет блока даты*/ #header .item_content .like_comment, #header .item_content .date {color: #dadbe0;} /*цвет в второстепенной информации в шапке материалов*/ #header.noimg, #comments, .learning_contest {background: var(--mt-color-gray-50);} /* светлый бэкграунд шапки материалов, блока комментариев*/ .social_material_block, .comment_post {background: #f0f3f4} /*бэкграунд блока лайков и обертки поля комментраия в материалах */ #header.noimg .item_content .date, #header.noimg .item_content .like_comment, #header.noimg .item_content .type_button {color: var(--grey);} /*цвет в второстепенной информации в шапке материалов без картинки-бэкграунда*/ .grid .item .item_content h4 a:visited:not(:hover) {color: #636363;} /*посещенные ссылки*/ /*END STATIC COLORS*/ /*FORMS INPUTS*/ input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="email"]:focus, textarea:focus, .sort_filter select:focus, .ui_toggling_list .ui_toggling_choosed.active, .textarea[contenteditable=true]:focus, .input-group.focus .bordered.input-group-addon {border-color: var(--blue_medium) !important;} .error input[type="text"], input[type="text"].error, .error input[type="password"], input[type="password"].error, .error input[type="email"], input[type="email"].error, textarea.error, .error textarea {border-color: var(--mt_red_medium) !important;} @media (hover: hover) { label.checkbox:hover div, label.radio:hover div {border-color: var(--blue) !important;} } label.checkbox.active div {background: var(--blue); border-color: var(--blue) !important;} label.radio div:before, label.radio div:after {background: var(--blue);} label.checkbox.active.disabled div {background: var(--grey); border-color: var(--grey) !important;} label.radio.active.disabled div:before, label.radio.active.disabled div:after {background: var(--grey);} label.checkbox.disabled, label.radio.disabled {cursor: default;} label.checkbox.disabled span, label.radio.disabled span {opacity:0.6;} label.checkbox.disabled:not(.correct) div, label.radio.disabled:not(.correct) div {border-color: rgba(212,216,217,1) !important;} label.checkbox.disabled:not(.incorrect) div, label.radio.disabled:not(.incorrect) div {border-color: rgba(212,216,217,1) !important;} label.checkbox.correct.active.disabled div {background: var(--green) !important; border-color: var(--green) !important;} label.checkbox.correct:not(.active).disabled div, label.radio.correct:not(.active).disabled div {background: var(--green) !important; border-color: var(--green) !important; opacity: 0.3} label.radio.correct.active.disabled div:before, label.radio.correct.active.disabled div:after {background: var(--green);} label.checkbox.incorrect.active.disabled div {background: var(--red) !important; border-color: var(--red) !important;} label.radio.incorrect.active.disabled div:before, label.radio.incorrect.active.disabled div:after {background: var(--red);} /*END FORMS INPUTS*/ /*ADDITIONAL ELEMENTS*/ .king_block .king_block_overlay, .king_block .king_block_overlay.blue_bg {background: var(--king);} .img_wrapper.dummy_wrapper {opacity: 1; background: linear-gradient(to right top, var(--dummy_first), var(--dummy_second));} .dummy_header {background: linear-gradient(to bottom, var(--dummy_first), var(--dummy_second));} /*END ADDITIONAL ELEMENTS*/ /*GENERAL COLORS*/ .dark_bg {background: var(--dark);} .dark_color {color: var(--dark);} .white_bg {background: var(--white);} .white_color {color: var(--white);} .green_bg {background: var(--green);} .green_color {color: var(--green);} .light_green_bg {background: var(--light_green);} .light_green_color {color: var(--light_green);} .blue_bg {background: var(--blue);} .blue_color {color: var(--blue);} .red_bg {background: var(--red);} .red_color {color: var(--red);} .pink_bg {background: var(--light_red);} .pink_color {color: var(--light_red);} .light_pink_bg {background: var(--light_red_hover);} .light_pink_color {color: var(--light_red_hover);} .light_red_bg {background: var(--light_red);} .light_red_color {color: var(--light_red);} .purple_bg {background: var(--purple);} .purple_color {color: var(--purple);} .violet_bg {background: var(--purple);} .violet_color {color: var(--purple);} .orange_bg {background: var(--orange);} .orange_color {color: var(--orange);} .yellow_bg {background: var(--yellow);} .yellow_color {color: var(--yellow);} .cyan_bg {background: rgba(92,199,157,1);} .cyan_color {color: rgba(92,199,157,1);} .light_blue_bg {background: var(--light_blue);} .light_blue_color {color: var(--light_blue);} .light_orange_bg {background: var(--light_orange);} .light_orange_bg {color: var(--light_orange);} .dark_grey_bg {background: var(--dark_grey);} .dark_grey_color {color: var(--dark_grey);} .grey_bg {background: var(--grey);} .grey_color, .pagination > a, .pagination > span {color: var(--grey);} .light_grey_bg {background: var(--light_grey);} .light_grey_color {color: var(--light_grey);} .transparent_bg {background: transparent; color: var(--dark_grey); border: 1px solid var(--dark_grey);} .semitransparent_bg {background: rgba(255,255,255,0.2); color: var(--white); border-color: transparent;} .button[data-type="submit"] { background: var(--mt-color-primary-500);} .button[data-type="submit"]:hover { background: var(--mt-color-primary-400);} .button[data-type="submit"]:active { background: var(--mt-color-primary-600);} .button.light_green_bg {color: var(--green)} .button.light_pink_bg {color: var(--red)} .button.light_blue_bg {color: var(--blue)} .button.light_grey_bg {color: var(--dark_grey)} .button.grey_bg {color: var(--dark)} .invert_transparent {background: transparent; border: 1px solid transparent;} .invert_transparent.green_bg {border-color: var(--green_medium) ; color: var(--green);} .invert_transparent.blue_bg {border-color: var(--blue_medium) ; color: var(--blue);} .invert_transparent.red_bg {border-color: var(--red_medium) ; color: var(--red);} .invert_transparent.pink_bg {border-color: var(--red_medium) ; color: var(--light_red);} .invert_transparent.light_pink_bg {border-color: var(--red_medium) ; color: var(--light_red_hover);} .invert_transparent.light_orange_bg {border-color: var(--orange_medium) ; color: var(--light_orange_hover);} .invert_transparent.purple_bg {border-color: var(--purple_medium); color: var(--purple);} .invert_transparent.violet_bg {border-color: var(--purple_medium); color: var(--purple);} .invert_transparent.orange_bg {border-color: var(--orange_medium); color: var(--orange);} .invert_transparent.cyan_bg {border-color: var(--cyan) ; color: var(--cyan);} .invert_transparent.light_blue_bg {border-color: var(--blue_medium); color: var(--blue);} .invert_transparent.dark_grey_bg {border-color: var(--grey) ; color: var(--dark_grey);} .invert_transparent.grey_bg {border-color: var(--grey) ; color: var(--grey);} .invert_transparent.light_grey_bg {border-color: var(--light_grey); color: var(--light_grey);} .button.invert_transparent:hover {border-color: transparent !important;} .invert_transparent.green_bg.active {background: var(--green);} .invert_transparent.blue_bg.active {background: var(--blue);} .invert_transparent.red_bg.active {background: var(--red);} .invert_transparent.pink_bg.active {background: var(--light_red);} .invert_transparent.light_pink_bg.active {background: var(--light_red_hover);} .invert_transparent.light_orange_bg.active {background: var(--light_orange_hover);} .invert_transparent.purple_bg.active {background: var(--purple);} .invert_transparent.violet_bg.active {background: var(--purple);} .invert_transparent.orange_bg.active {background: var(--orange);} .invert_transparent.cyan_bg.active {background: var(--cyan);} .invert_transparent.light_blue_bg.active {background: var(--light_blue);} .invert_transparent.dark_grey_bg.active {background: var(--dark_grey);} .invert_transparent.grey_bg.active {background: var(--grey);} .invert_transparent.light_grey_bg.active {background: var(--light_grey);} .inherit_bg, .button.inherit_bg {background: inherit;} .inherit_color, .button.inherit_color {color: inherit;} .not_hover:not(:hover), .button.not_hover:not(:hover) {color: inherit;} .not_hover_bg:not(:hover), .button.not_hover_bg:not(:hover) {background: transparent;} .button.green_bg:hover, a.type_button.green_bg:hover {background: var(--green_hover);} .button.blue_bg:hover, a.type_button.blue_bg:hover {background: var(--blue_hover);} .button.red_bg:hover, a.type_button.red_bg:hover {background: var(--red_hover);} .button.pink_bg:hover, a.type_button.pink_bg:hover {background: var(--light_red_hover);} .button.light_pink_bg:hover, a.type_button.light_pink_bg:hover {background: var(--light_red_hover);} .button.purple_bg:hover, a.type_button.purple_bg:hover {background: var(--purple_hover);} .button.violet_bg:hover, a.type_button.violet_bg:hover {background: var(--purple_hover);} .button.orange_bg:hover, a.type_button.orange_bg:hover {background: var(--orange_hover);} .button.cyan_bg:hover, a.type_button.cyan_bg:hover {background: var(--cyan);} .button.dark_grey_bg:hover, a.type_button.dark_grey_bg:hover {background: var(--dark_grey_hover);} .button.grey_bg:hover, a.type_button.grey_bg:hover {background: var(--grey_hover);} .button.light_grey_bg:hover, a.type_button.light_grey_bg:hover {background: var(--light_grey_hover);} .button.light_blue_bg:hover, a.type_button.light_blue_bg:hover {background: var(--light_blue_hover); color: var(--blue);} .button.semitransparent_bg:hover, a.type_button.semitransparent_bg:hover {background: rgba(255,255,255,0.15);} .button.transparent_bg:hover {color: inherit; opacity:0.8;} .button.green_bg:active, a.type_button.green_bg:active {background: var(--green_active);} .button.blue_bg:active, a.type_button.blue_bg:active {background: var(--blue_active);} .button.red_bg:active, a.type_button.red_bg:active {background: var(--red_active);} .button.pink_bg:active, a.type_button.pink_bg:active {background: var(--light_red_active);} .button.light_pink_bg:active, a.type_button.light_pink_bg:active {background: var(--light_red_active);} .button.purple_bg:active, a.type_button.purple_bg:active {background: var(--purple_active);} .button.violet_bg:active, a.type_button.violet_bg:active {background: var(--purple_active);} .button.orange_bg:active, a.type_button.orange_bg:active {background: var(--orange_active);} .button.cyan_bg:active, a.type_button.cyan_bg:active {background: var(--cyan);} .button.dark_grey_bg:active, a.type_button.dark_grey_bg:active {background: var(--dark_grey_active);} .button.grey_bg:active, a.type_button.grey_bg:active {background: var(--grey_active);} .button.light_grey_bg:active, a.type_button.light_grey_bg:active {background: var(--light_grey_active);} .button.light_blue_bg:active, a.type_button.light_blue_bg:active {background: var(--light_blue_active); color: var(--blue);} .button.semitransparent_bg:active, a.type_button.semitransparent_bg:active {background: rgba(255,255,255,0.15);} .button.transparent_bg:active {color: inherit; opacity:0.8;} .button, .button:hover {color: var(--white);} /*дефолтная кнопка*/ ::-webkit-input-placeholder, ::-moz-placeholder, :-moz-placeholder { color: var(--grey);} /*END GENERAL COLORS*/ /*MENU*/ .leading_block {background: rgba(236,240,241,0.2); box-shadow: 1px 0px 1px 1px rgba(0,0,0,0.1);} .leading_block .burger_menu:hover, .leading_block .notifications li.exit:hover {background: rgba(255, 255, 255, 0.1)} .leading_block .burger_menu i {background: var(--white);} .leading_block .notifications li .i,.leading_block .notifications li .inlay {color: var(--white);} .leading_block .notifications li .button { background: transparent !important; } .leading_block.scrolling, header.mobile .leading_block {background: var(--mt-color-gray-50);} .leading_block.scrolling .burger_menu i, header.minified .leading_block .burger_menu i, header.mobile .leading_block .burger_menu i {background: var(--dark);} .leading_block.scrolling .burger_menu:hover, .leading_block.scrolling .notifications li.exit:hover, header.mobile .leading_block .burger_menu:hover, header.mobile .leading_block .notifications li.exit:hover {background: rgba(0, 0, 0, 0.05);} .leading_block.scrolling .notifications li .i, .leading_block.scrolling .notifications li .inlay, header.mobile .leading_block .notifications li .i, header.mobile .leading_block .notifications li .inlay, header.mobile .leading_block.scrolling .notifications li .i {color: var(--dark);} header, header .edit_menu_block {background: var(--m_background);} header {box-shadow: 1px 0px 1px rgba(0,0,0,0.1);} header nav a {color: var(--m_text);} header nav .persona_info p {color: var(--m_text);} header nav .persona_info .inline-block {color: var(--m_text);} header nav .persona_info .inline-block .i-poll {color: var(--m_text);} header nav .persona_info .inline-block .i-database {color: var(--m_text);} header nav .menu_item a.inlay {color: var(--m_text);} header nav .menu_item a.inlay .icon_wrapper {color: var(--m_icon);} header nav .menu_item a.inlay:hover .icon_wrapper, header nav .menu_item a.inlay.active .icon_wrapper {color: var(--m_icon_mouseover)} header nav .menu_item a.inlay.active, header nav .menu_item a.inlay:hover {background: var(--m_item_mouseover); color: var(--m_text_mouseover);} header .achievements_list li {color: var(--m_text);} header .achievements_list a {color: var(--m_text);} /*END MENU*/ /* new color scheme start */ .mt-color-success-500-color {color: var(--mt-color-success-500)} .mt-color-success-500-bg {background: var(--mt-color-success-500)} .button.mt-color-success-500-bg:hover {background: var(--mt-color-success-400)} .button.mt-color-success-500-bg:active {background: var(--mt-color-success-600)} .invert_transparent.mt-color-success-500-bg:hover {border-color: var(--mt-color-success-300); color: var(--mt-color-success-500)} .mt-color-success-200-color {color: var(--mt-color-success-200)} .mt-color-success-200-bg {background: var(--mt-color-success-200)} .button.mt-color-success-200-bg:hover {background: var(--mt-color-success-100)} .button.mt-color-success-200-bg:active {background: var(--mt-color-success-300)} .mt-color-danger-500-color {color: var(--mt-color-danger-500)} .mt-color-danger-500-bg {background: var(--mt-color-danger-500)} .button.mt-color-danger-500-bg:hover {background: var(--mt-color-danger-400)} .button.mt-color-danger-500-bg:active {background: var(--mt-color-danger-600)} .invert_transparent.mt-color-danger-500-bg:hover {border-color: var(--mt-color-danger-300); color: var(--mt-color-danger-500)} .mt-color-danger-200-color {color: var(--mt-color-danger-200)} .mt-color-danger-200-bg {background: var(--mt-color-danger-200)} .button.mt-color-danger-200-bg:hover {background: var(--mt-color-danger-100)} .button.mt-color-danger-200-bg:active {background: var(--mt-color-danger-300)} .mt-color-warning-500-color {color: var(--mt-color-warning-500)} .mt-color-warning-500-bg {background: var(--mt-color-warning-500)} .button.mt-color-warning-500-bg:hover {background: var(--mt-color-warning-400)} .button.mt-color-warning-500-bg:active {background: var(--mt-color-warning-600)} .invert_transparent.mt-color-warning-500-bg:hover {border-color: var(--mt-color-warning-300); color: var(--mt-color-warning-500)} .mt-color-warning-200-color {color: var(--mt-color-warning-200)} .mt-color-warning-200-bg {background: var(--mt-color-warning-200)} .button.mt-color-warning-200-bg:hover {background: var(--mt-color-warning-100)} .button.mt-color-warning-200-bg:active {background: var(--mt-color-warning-300)} .mt-color-primary-500-color {color: var(--mt-color-primary-500)} .mt-color-primary-500-bg {background: var(--mt-color-primary-500)} .button.mt-color-primary-500-bg:hover {background: var(--mt-color-primary-400)} .button.mt-color-primary-500-bg:active {background: var(--mt-color-primary-600)} .invert_transparent.mt-color-primary-500-bg:hover {border-color: var(--mt-color-primary-300); color: var(--mt-color-primary-500)} .mt-color-primary-200-color {color: var(--mt-color-primary-200)} .mt-color-primary-200-bg {background: var(--mt-color-primary-200)} .button.mt-color-primary-200-bg:hover {background: var(--mt-color-primary-100)} .button.mt-color-primary-200-bg:active {background: var(--mt-color-primary-300)} .mt-color-red-500-color {color: var(--mt-color-red-500)} .mt-color-red-500-bg {background: var(--mt-color-red-500)} .button.mt-color-red-500-bg:hover {background: var(--mt-color-red-400)} .button.mt-color-red-500-bg:active {background: var(--mt-color-red-600)} .invert_transparent.mt-color-red-500-bg:hover {border-color: var(--mt-color-red-300); color: var(--mt-color-red-500)} .mt-color-red-200-color {color: var(--mt-color-red-200)} .mt-color-red-200-bg {background: var(--mt-color-red-200)} .button.mt-color-red-200-bg:hover {background: var(--mt-color-red-100)} .button.mt-color-red-200-bg:active {background: var(--mt-color-red-300)} .mt-color-yellow-500-color {color: var(--mt-color-yellow-500)} .mt-color-yellow-500-bg {background: var(--mt-color-yellow-500)} .button.mt-color-yellow-500-bg:hover {background: var(--mt-color-yellow-400)} .button.mt-color-yellow-500-bg:active {background: var(--mt-color-yellow-600)} .invert_transparent.mt-color-yellow-500-bg:hover {border-color: var(--mt-color-yellow-300); color: var(--mt-color-yellow-500)} .mt-color-yellow-200-color {color: var(--mt-color-yellow-200)} .mt-color-yellow-200-bg {background: var(--mt-color-yellow-200)} .button.mt-color-yellow-200-bg:hover {background: var(--mt-color-yellow-100)} .button.mt-color-yellow-200-bg:active {background: var(--mt-color-yellow-300)} .mt-color-green-500-color {color: var(--mt-color-green-500)} .mt-color-green-500-bg {background: var(--mt-color-green-500)} .button.mt-color-green-500-bg:hover {background: var(--mt-color-green-400)} .button.mt-color-green-500-bg:active {background: var(--mt-color-green-600)} .invert_transparent.mt-color-green-500-bg:hover {border-color: var(--mt-color-green-300); color: var(--mt-color-green-500)} .mt-color-green-200-color {color: var(--mt-color-green-200)} .mt-color-green-200-bg {background: var(--mt-color-green-200)} .button.mt-color-green-200-bg:hover {background: var(--mt-color-green-100)} .button.mt-color-green-200-bg:active {background: var(--mt-color-green-300)} /* new color scheme end */