/** * File: component.scss; * Description: This file is intended for viewing and displaying each indidividual component * Version: 1.0-alpha * */ :root { --dark-saphire: #002c77; --saphire400: #005c96; --saphire300: #00abcb; --colorC: #00968F; --information: #1e5ddC; --success:#148f3d; --warning: #ffeb00; --error: #c53532; --green500: #00ac41; --purple500: #8246af; --pink500: #ee3d8b; --neutral_white: #ffffff; --onyx_Lighter_400: #f0f0f0; --onyx_lighter_500: #e6e6ee; --onyx100: #cccccc; --onyx200: #999999; --onyx300:#666666; --onyx500: #333333; --mercer-blue-60d: #00163b; --mercer-blue-20d: #00235f; --mercer-blue-20l: #072a71; --mercer-blue-60l: #8096bb; --mercer-opacity-15: #0B41AD; --color-a-60d: #041a45; --color-a-20d: #09348b; --color-a-20l: #3c67be; --color-a-60l: #9db3de; --color-b-60d: #003f59; --color-b-20d: #007eb3; --color-b-20l: #33b1e6; --color-b-60l: #80ceef; --color-c-60d: #003c39; --color-c-20d: #007873; --color-c-20l: #33aba6; --color-c-60l: #80cac7; --bs-gutter-x: 12px; --bs-gutter-y: 12px; } @font-face { font-family: 'Proxima Nova'; font-weight: 200; src: url("../../fonts/ProximaNova-Light.otf") format("opentype"), url("../../fonts/ProximaNova-Light.ttf") format("truetype"), url("../../fonts/ProximaNova-Light.woff") format("woff"), url("../../fonts/ProximaNova-Light.woff2") format("woff2"), url("../../fonts/ProximaNova-Light.eot?#iefix") format("embedded-opentype"), url("../../fonts/ProximaNova-Light.eot"); } @font-face { font-family: 'Proxima Nova'; font-weight: 400; src: url("../../fonts/ProximaNova-Regular.otf") format("opentype"), url("../../fonts/ProximaNova-Regular.ttf") format("truetype"), url("../../fonts/ProximaNova-Regular.woff") format("woff"), url("../../fonts/ProximaNova-Regular.woff2") format("woff2"), url("../../fonts/ProximaNova-Regular.eot?#iefix") format("embedded-opentype"), url("../../fonts/ProximaNova-Regular.eot"); } @font-face { font-family: 'Proxima Nova'; font-weight: 600; src: url("../../fonts/ProximaNova-Semibold.otf") format("opentype"), url("../../fonts/ProximaNova-Semibold.ttf") format("truetype"), url("../../fonts/ProximaNova-Semibold.woff") format("woff"), url("../../fonts/ProximaNova-Semibold.woff2") format("woff2"), url("../../fonts/ProximaNova-Semibold.eot?#iefix") format("embedded-opentype"), url("../../fonts/ProximaNova-Semibold.eot"); } @font-face { font-family: 'Proxima Nova'; font-weight: 700; src: url("../../fonts/ProximaNova-Bold.otf") format("opentype"), url("../../fonts/ProximaNova-Bold.ttf") format("truetype"), url("../../fonts/ProximaNova-Bold.woff") format("woff"), url("../../fonts/ProximaNova-Bold.woff2") format("woff2"), url("../../fonts/ProximaNova-Bold.eot?#iefix") format("embedded-opentype"), url("../../fonts/ProximaNova-Bold.eot"); } @font-face { font-family: 'Proxima Nova'; font-weight: 800; src: url("../../fonts/ProximaNova-Extrabold.otf") format("opentype"), url("../../fonts/ProximaNova-Extrabold.ttf") format("truetype"), url("../../fonts/ProximaNova-Extrabold.woff") format("woff"), url("../../fonts/ProximaNova-Extrabold.woff2") format("woff2"), url("../../fonts/ProximaNova-Extrabold.eot?#iefix") format("embedded-opentype"), url("../../fonts/ProximaNova-Extrabold.eot"); } @font-face { font-family: 'MMC Display'; font-weight: 400; src: url("../../fonts/MMCDisplay_Rg.otf") format("opentype"), url("../../fonts/MMCDisplay_Rg.ttf") format("truetype"), url("../../fonts/MMCDisplay_Rg.woff") format("woff"), url("../../fonts/MMCDisplay_Rg.woff2") format("woff2"), url("../../fonts/MMCDisplay_Rg.eot?#iefix") format("embedded-opentype"), url("../../fonts/MMCDisplay_Rg.eot"); } @font-face { font-family: 'MMC Display'; font-weight: 700; src: url("../../fonts/MMCDisplay_Bd.otf") format("opentype"), url("../../fonts/MMCDisplay_Bd.ttf") format("truetype"), url("../../fonts/MMCDisplay_Bd.woff") format("woff"), url("../../fonts/MMCDisplay_Bd.woff2") format("woff2"), url("../../fonts/MMCDisplay_Bd.eot?#iefix") format("embedded-opentype"), url("../../fonts/MMCDisplay_Bd.eot"); } @font-face { font-family: 'Noto Sans'; font-weight: 400; src: url("../../fonts/NotoSans-Regular.otf") format("opentype"), url("../../fonts/NotoSans-Regular.ttf") format("truetype"), url("../../fonts/NotoSans-Regular.woff") format("woff"), url("../../fonts/NotoSans-Regular.woff2") format("woff2"), url("../../fonts/NotoSans-Regular.eot?#iefix") format("embedded-opentype"), url("../../fonts/NotoSans-Regular.eot"); } @font-face { font-family: 'Noto Sans'; font-weight: 700; src: url("../../fonts/NotoSans-Bold.otf") format("opentype"), url("../../fonts/NotoSans-Bold.ttf") format("truetype"), url("../../fonts/NotoSans-Bold.woff") format("woff"), url("../../fonts/NotoSans-Bold.woff2") format("woff2"), url("../../fonts/NotoSans-Bold.eot?#iefix") format("embedded-opentype"), url("../../fonts/NotoSans-Bold.eot"); } .component-outer-wrapper * { font-family: 'Noto Sans', sans-serif; /*font-weight: 400!important;*/ } .component-outer-wrapper .row.bs { max-width: none !important; /*margin-left: -15px!important;*/ /*margin-right: -15px!important;*/ } .component-outer-wrapper .row.bs.docs { margin-left: 0 !important; margin-right: 0 !important; } .component-outer-wrapper b, .component-outer-wrapper strong, .component-outer-wrapper th, .component-outer-wrapper thead, .component-outer-wrapper dt, .component-outer-wrapper legend { font-family: 'Noto Sans', sans-serif; font-weight: 900 !important; } .changelog-contents * { word-break: break-all; } html, body { font-family: 'Noto Sans'; font-weight: 400; font-size: 16px; } * { margin: 0; padding: 0; } .container-fluid.no-pad { padding-left: 0; padding-right: 0; } .component-main-wrapper { padding-bottom: 75px; } .component-main-wrapper table { background: initial; } .component-outer-wrapper { overflow-x: hidden; } .dark-saphire { background: var(--dark-saphire); } .saphire400 { background: var(--saphire400); } .saphire300 { background: var(--saphire300); } .color-c { background-color: var(--colorC); } .mercer-opacity-15 { background-color: var(--mercer-opacity-15); opacity: 15%; } .information { background: var(--information); } .warning { background: var(--warning); color: var(--dark-saphire)!important; } .success { background: var(--success) } .error { background: var(--error); } .green500 { background-color: var(--green500); } .purple500 { background-color: var(--purple500); } .pink500{ background-color: var(--pink500); } .onyx-lighter-400 { background-color: var(--onyx_Lighter_400); color: var(--onyx500)!important; } .onyx-lighter-500 { background-color: var(--onyx_lighter_500); color: var(--onyx500)!important; } .neutral_white { background-color: var(--neutral_white); color: var(--onyx500)!important;; } .onyx100 { background-color: var(--onyx100); } .onyx200 { background-color: var(--onyx200); } .onyx300{ background-color: var(--onyx300); } .onyx500{ background-color: var(--onyx500); } .mercer-blue-60d{ background-color: var(--mercer-blue-60d); } .mercer-blue-20d{ background-color: var(--mercer-blue-20d); } .mercer-blue-20l{ background-color: var(--mercer-blue-20l); } .mercer-blue-60l{ background-color: var(--mercer-blue-60l); } .color-a-60d { background-color: var(--color-a-60d); } .color-a-20d { background-color: var(--color-a-20d); } .color-a-20l{ background-color: var(--color-a-20l); } .color-a-60l{ background-color: var(--color-a-60l); } .color-b-60d{ background-color: var(--color-b-60d); } .color-b-20d{ background-color: var(--color-b-20d); } .color-b-20l{ background-color: var(--color-b-20l); } .color-b-60l{ background-color: var(--color-b-60l); } .color-c-60d{ background-color: var(--color-c-60d); } .color-c-20d{ background-color: var(--color-c-20d);; } .color-c-20l{ background-color: var(--color-c-20l); } .color-c-60l{ background-color: var(--color-c-60l); } .color-code { padding: 0.5rem; color: white; margin-bottom: 1rem; font-size: 1rem; height: 80px; } .color-code p { margin-bottom: .2rem; } .grid-layout { padding-left: 36px; padding-right: 36px; background-color: #E1FFF1; } .grid-layout .__mst_custom-gutter .column-bg{ background-color: #932077; opacity: 0.25; height: 500px; text-align: center; font-size: 1rem; vertical-align: middle; } .__mst_custom-gutter > [class*='col-'] { padding-right:6px; padding-left: 6px; } .grid-layout { padding-left: 16px; padding-right: 16px; background-color: #E1FFF1; } @media(min-width:767px) { /* Modify this based on column def */ .__mst_custom-gutter > [class*='col-'] { padding-right:8px; padding-left:8px; } .grid-layout { padding-left: 20px; padding-right: 20px; background-color: #E1FFF1; } .color-code { padding: 1rem; } } @media(min-width:1024px) { /* Modify this based on column def */ .__mst_custom-gutter > [class*='col-'] { padding-right:12px; padding-left: 12px; } .grid-layout { padding-left: 36px; padding-right: 36px; background-color: #E1FFF1; } } h1.component-title, h2.component-title, h3.component-title, h4.component-title, h5.component-title, h6.component-title, h1.component-subtitle, h2.component-subtitle, h3.component-subtitle, h4.component-subtitle, h5.component-subtitle, h6.component-subtitle, h1.component-subheading, h2.component-subheading, h3.component-subheading, h4.component-subheading, h5.component-subheading, h6.component-subheading { font-family: "Noto Sans", sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; margin-top: 15px; margin-bottom: 15px; } .component-wrapper { padding-top: 0.438rem; padding-bottom: 0.438rem; padding-left: 50px; padding-right: 50px; } .component-wrapper.bg-section { background: #BBEEF9; color: #002C77; } .component-buffer { border-bottom: 1px solid #ddd; padding-top: 10px; padding-bottom: 10px; } .component-buffer p { margin-bottom: 5px; } .component-description-wrapper { margin-bottom: 35px; padding-left: 50px; padding-right: 50px; } .component-description { margin-bottom: 30px; border-bottom: 1px solid #dddddd; } .component-body { font-size: 16px; font-weight: 400; letter-spacing: 0; } .component-heading { font-size: 16px; color: white; background: #002C77; padding-top: 0.5rem; padding-bottom: 0.5rem; /* padding-top: 1.125rem; padding-bottom: 1.125rem; */ padding-left: 50px; padding-right: 50px; } .component-heading .component-title { font-size: 1.5rem; font-weight: bold; line-height: 3rem; color: #FFFFFF; display: inline-block; vertical-align: middle; margin: 0; } .component-heading .download_buttons { margin-top: 0px; margin-bottom: 0px; float: right; vertical-align: middle; display: inline-block; } .component-heading .download_buttons a button, .component-heading .download_buttons a button.__mst_button_campaign { margin-bottom: 0; } .component-info .component-title { font-weight: 400; margin-top: 0; margin-bottom: 0; color: #003A80; line-height: 1.3; font-size: 1rem; } .component-info .component-body { margin-bottom: 0; } .component-subheading { font-size: 22px; line-height: 28px; font-weight: 400; } h6.component-subtitle { font-weight: bold; } .component-table-thirds { width: 100%; } .component-table-thirds tr td { width: 33.33%; text-align: center; border-bottom: 0; } .component-table-thirds tr td:first-child, .component-table-thirds tr td:first-of-type { text-align: left; } .component-table-thirds tr td:last-child, .component-table-thirds tr td:last-of-type { font-weight: bolder; } .component-section-outer .component-title { font-weight: bold; } .component-code-wrapper { /*margin-top: 50px;*/ } .component-code-outer { position: relative; } .component-code-outer pre.component-code { font-size: 14px; line-height: 22px; font-weight: normal; max-height: 550px; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; background: #eee; border-radius: 5px; border-left: 6px solid #002C77; padding-right: 60px; overflow-x: auto; } .component-code-outer pre.component-code.hidden { display: none; } .component-code-outer .code-copy { padding-left: 6px; padding-right: 6px; padding-top: 4px; padding-bottom: 4px; font-size: 12px; line-height: 14px; background: #002C77; border-radius: 4px; border: 0px; color: #FFFFFF; position: absolute; right: 10px; /*bottom: 50%;*/ top: 10px; /*-webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%);*/ } .component-section { padding-top: 15px; padding-bottom: 15px; } .prettyprint.linenums { padding-left: 0; } .prettyprint .linenums { padding-left: 30px; /*margin-left: 30px;*/ } .prettyprint .linenums li { list-style-type: decimal; } .docs_content_call .prettyprint.linenums { padding-left: 0; } .docs_content_call .prettyprint .linenums { padding-left: 0px; margin-left: 0px; } .docs_content_call .prettyprint .linenums li { list-style-type: decimal; } .np-top { padding-top: 0; } .np-left { padding-left: 0; } .np-right { padding-right: 0; } .np-bot { padding-bottom: 0; } .no-pad { padding: 0; } .mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; } .mt-30 { margin-top: 30px; } .mt-40 { margin-top: 40px; } .mt-50 { margin-top: 50px; } .mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-40 { margin-bottom: 40px; } .mb-50 { margin-bottom: 50px; } .pl-30 { padding-left: 30px !important; } .pr-30 { padding-right: 30px !important; } header nav.navbar.navbar-expand-lg { padding: 2.25rem 2rem; } header nav.navbar.navbar-expand-lg .navbar-brand { line-height: 0; padding: 0; } header nav.navbar.navbar-expand-lg .nav-item .nav-link { color: black; } header nav.navbar.navbar-expand-lg .nav-link{ border: 0; padding-right: 1.5rem; padding-left: 1.5rem; margin-right: 2px; } header nav.navbar.navbar-expand-lg .navbar-nav { margin-bottom: -2.2rem!important; } header nav.navbar.navbar-expand-lg .nav-item { margin: 0; } header nav.navbar.navbar-expand-lg .nav-item.active .nav-link, header nav.navbar.navbar-expand-lg .nav-item:hover .nav-link{ font-weight: bold; color: #002c77; border-bottom: 2px solid #002c77; } .docs_container #leftNavigation .doc_panel_inner .navigation_wrapper #navigationList #accordion .card { background-color: black; background-clip: border-box; border: 1px solid #fff; border-radius: 0; border-left: 0; border-right: 0; } /* start of input field*/ .__mst_form_input.selected { border: 1px solid #00ABCB; } .__mst_form_input.error { border: 1px solid #C53532; } ::placeholder { color: #cccccc !important; } input.disabled,input.__mst_form_input.disabled { border: 1px solid #f0f0f0 !important; background: white !important; color: #f0f0f0 !important; } input.disabled,input.__mst_form_input.disabled:focus { box-shadow: none; } input.disabled,input.__mst_form_input.disabled:active { box-shadow: none; border:0; } input.disabled,input.__mst_form_input.disabled::placeholder { color: #f0f0f0; } input.__mst_form_input.success { color: black } span.__mst_error-message { color: #C53532; } label, label.__mst_form_label { margin-bottom: 0 !important; } select, select.__mst_form_input{ height: 40px !important; } input, input.__mst_form_input { height: 2.5rem; } .input-group-addon { padding: 6px 12px; font-size: 14px; font-weight: 400; line-height: 1; color: #555; text-align: center; background-color: #eee; border: 1px solid #ccc; width: 1%; white-space: nowrap; vertical-align: middle; display: table-cell; } .suffix input { border-radius: 4px 0px 0px 4px; } .input-group-addon { border-left: 0; border-radius: 0px 4px 4px 0px; } .prefix input { border-radius: 0px 4px 4px 0px; } .prefix .input-group-addon { border-right: 0; border-radius: 4px 0px 0px 4px; } .presuffix input { border-radius: 0px; } .input-group-addon.prefix { border-radius: 4px 0px 0px 4px; border-right: 0; } .input-group-addon.suffix { border-radius: 0px 4px 4px 0px !important; border-left: 0; } .input-group { position: relative; display: table; border-collapse: separate; } input[type="password"].password { background-image: none !important; } .field-icon { float: right; margin-left: -25px; margin-top: -25px; position: relative; z-index: 2; bottom: 15px; right: 10px; } .__mst_input_group .__mst_input_label { padding: 5px 10px !important; } .__mst_input_group .__mst_input_label._mst_input_small { padding: 3px 10px !important; } .__mst_input_group._mst_input_small input{ height: 32px !important; } .blockquote_text { color: #707070; font-size: 0.875rem; font-style: italic; } .subheading.grey_text { color: #666666; margin-top: 0; font-weight: normal; } /* nav.__mst_nav_container{ height: 52px; width: 100%; background-color: #002c77; display: flex; justify-content: space-between; } .__mst_header_logo_new{ padding: 0px 28px; height: 20px; display: flex; position: relative; top: 15px; } .__mst_large_logo{ display: block; } .__mst_small_logo{ display: none; } nav.__mst_nav_container ul{ display: flex; align-content: center; margin-right: 10px; box-sizing: border-box; } nav.__mst_nav_container ul li em.search, nav.__mst_nav_container ul li em.user, nav.__mst_nav_container ul li em.envelop{ font-size: 20px; color: white; position: relative; top: 3px; } nav.__mst_nav_container.__mst_dropdown_nav ul li em.search{ display: none; } nav.__mst_nav_container.__mst_dropdown_nav ul li{ padding: 0 8px; } nav.__mst_nav_container.__mst_dropdown_nav ul li label.__mst_user{ color: white; font-size: 15px; position: relative; bottom: -2.2px; padding-right: 0; margin-left: -8px; padding-left: 0; } nav.__mst_nav_container.__mst_dropdown_nav ul .__mst_line_divider{ margin: 8px 0 8px 16px; padding: 0; } nav.__mst_nav_container ul li em.search:active{ border-radius: 3px; line-height: 35px; transition: 0.1s; box-shadow: rgb(255 255 255 / 49%) 0px 5px 10px; } nav.__mst_nav_container li{ display: inline-block; line-height: 50px; padding: 0 10px; position: relative; top: 0; } nav.__mst_nav_container a{ color: white; font-size: 15px; border: 1px solid transparent; padding-right: 4px; border-radius: 3px; position: relative; bottom: -2.2px; } .__mst_hamburger_logo_new{ position: relative; top: 6px; margin: 0 8px; } */ /* Extra css for RIS header begins here*/ /* nav.__mst_nav_container.__mst_ris_nav{ background-color: #ffffff; justify-content: space-between; box-shadow: -1px 1.5px 2px 2px #69696952; } nav.__mst_nav_container .__mst_ris_label{ text-transform: uppercase; color: #002c77; font-weight: bold; position: relative; top: 0.1rem; margin-right: 28px; display: flex; align-items: center; } */ /* css for dropdown begins*/ /* nav.__mst_nav_container.__mst_dropdown_nav select.__mst_form_input { margin: 15px auto 8px; height: 24px; width: 400px; border-radius: 3px; box-shadow: none; outline: none; border: 1px solid #999999; display: block; font-family: 'Noto Sans', sans-serif; font-weight: 400; font-size: 1em; line-height: 1.5em; box-sizing: border-box; transition: box-shadow .25s,border-color .25s ease-in-out; } */ /* css for dropdown ends here*/ /* @media (max-width: 1024px) { nav.__mst_nav_container{ height: 48px; } nav.__mst_nav_container .__mst_header_logo_new{ padding: 0px 24px; height: 18px; display: flex; position: relative; top: 14px; } nav.__mst_nav_container ul{ margin-right: 0; position: relative; bottom: 3px; } nav.__mst_nav_container li{ padding: 0; } nav.__mst_nav_container li em.search{ padding: 0 8px; } nav.__mst_nav_container ul li a{ font-size: 14px; padding-left: 8px; padding-right: 0px; } nav.__mst_nav_container a.__mst_hamburger_logo_new{ top: 6px; margin: 0 20px 0 32px; padding-left: 0; } nav.__mst_nav_container .__mst_ris_label{ top: 0.2rem; margin-right: 20px; text-align: end; } */ /* css for dropdown begins here*/ /* nav.__mst_nav_container.__mst_dropdown_nav select.__mst_form_input{ margin: 12px 8px; width: 300px; } nav.__mst_nav_container.__mst_dropdown_nav ul li.__mst_line_divider{ margin: 10px 0 5px 16px; } nav.__mst_nav_container.__mst_dropdown_nav ul li.__mst_line_divider img{ position: relative; bottom: 2px; } nav.__mst_nav_container.__mst_dropdown_nav ul li a.__mst_hamburger_logo_new{ margin: 0 12px 0 8px; } */ /* css for dropdown ends here*/ /* } */ /* @media (max-width: 767px){ nav.__mst_nav_container{ height: 40px; } nav.__mst_nav_container a.__mst_header_logo_new { padding: 0px 20px; height: 20px; top: 9px; } .__mst_large_logo{ display: none; } .__mst_small_logo{ display: block; } nav.__mst_nav_container ul{ bottom: 7px; } nav.__mst_nav_container li{ padding: 0 0 0 10px; } nav.__mst_nav_container.__mst_dropdown_nav ul li{ padding: 0; } nav.__mst_nav_container ul li a{ display: none; } nav.__mst_nav_container ul li em.search{ padding: 0 10px; } nav.__mst_nav_container.__mst_dropdown_nav ul li em.search, nav.__mst_nav_container.__mst_dropdown_nav ul li em.user{ padding: 0 10px; } nav.__mst_nav_container ul li a.__mst_hamburger_logo_new{ top: 6px; margin: 0 20px 0 -22px; display: inline-block; } nav.__mst_nav_container.__mst_dropdown_nav ul li a.__mst_hamburger_logo_new{ margin: 0 20px 0 10px; } nav.__mst_nav_container.__mst_dropdown_nav ul .__mst_line_divider{ display: none; } nav.__mst_nav_container.__mst_dropdown_nav select.__mst_form_input { display: none; } nav.__mst_nav_container.__mst_dropdown_nav ul li em.search{ display: inline-block; } nav.__mst_nav_container.__mst_dropdown_nav ul li em.envelop, nav.__mst_nav_container.__mst_dropdown_nav ul li label.__mst_user{ display: none; } /* css for dropdown ends here*/ /* } */ @media all and (max-width: 768px) { .component-table-thirds tr td { display: block; width: 100%; text-align: left; } } @media all and (max-width: 500px) { .component-wrapper, .component-description-wrapper, .component-heading { padding-left: 30px; padding-right: 30px; } .component-heading .download_buttons { display: block; } } @media all and (min-width: 992px) { /* .docs_content_call { position: relative !important; bottom: 10px !important; } */ } /*# sourceMappingURL=component.css.map */ /*end of nav header*/ /* start of radio button*/ /*picklist radio css ends here*/ /*End of radio*/ /* Start of checkbox*/ /** * Custom new checkbox Buttons */ /* .__mst_checkbox_new { display: flex; flex-direction: row; align-items: center; } .__mst_checkbox_new.__mst_state_display{ justify-content: center; } .__mst_checkbox_new.inline { display: inline-block; margin-right: 15px; } .__mst_checkbox_new .__mst_checkbox_wrapper, .__mst_checkbox_new .__mst_checkbox_label_wrapper { display: inline-block; vertical-align: middle; } .__mst_checkbox_new .__mst_checkbox_wrapper { position: relative; margin: 8px 12px; } .__mst_checkbox_new .__mst_checkbox_wrapper:hover { cursor: pointer; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -ms-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; width: 20px; height: 18px; margin: 0; vertical-align: top; cursor: pointer; position: initial; display: inline-block; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input:disabled:hover, .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input[disabled]:hover { cursor: not-allowed; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input:disabled:after, .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input[disabled]:after { border: 2px solid #999999; background: #FFFFFF; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input:disabled:checked + .__mst_checkbox_styler, .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input[disabled]:checked + .__mst_checkbox_styler { background: #999999; z-index: 100; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input:disabled:checked + .__mst_checkbox_styler:hover, .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input[disabled]:checked + .__mst_checkbox_styler:hover { cursor: not-allowed; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input:focus { outline: 1px solid #80CEEF; outline-offset: 3px; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input:active{ -moz-box-shadow: 0 0 0 1px #fff inset, 0 0 0 1px #666666, 0 0 2px 1px #80ceef; box-shadow: 0 0 0 1px #fff inset, 0 0 0 1px #666666, 0 0 2px 1px #80ceef; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input:hover{ box-shadow: 0px 0px 1px 2px #0B41AD4A; cursor: pointer; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input:checked + .__mst_checkbox_styler, .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input[checked] + .__mst_checkbox_styler { background: #0B41AD; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input + .__mst_checkbox_styler { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0px; height: 20px; width: 20px; z-index: -1; -webkit-transition: all .35s ease; -moz-transition: all .35s ease; -ms-transition: all .35s ease; -o-transition: all .35s ease; transition: all .35s ease; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input:checked + .__mst_checkbox_styler:after, .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input[checked] + .__mst_checkbox_styler:after { font-family: 'Mericon'; font-weight: normal; font-style: normal; line-height: 1; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; content: "\e969"; font-size: 19px; position: relative; bottom: 1.5px; right: 1.5px; -webkkit-font-feature-settings: 'liga' 1; -moz-font-feature-settings: 'liga' 1; font-feature-settings: 'liga' 1; color: #FFFFFF; } .__mst_checkbox_new .__mst_checkbox_label_wrapper .__mst_checkbox_label { vertical-align: middle; } */ /* different states checkbox starts below */ /* .__mst_checkbox_new.__mst_state_display{ text-align: center; } .__mst_checkbox_container_box{ margin-right: 8px; } .remove_margin{ margin: 0; text-align: center; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input.default:focus, .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input.hover:focus, .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input.active:focus { outline: none; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input.default:hover, .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input.focus:hover{ -moz-box-shadow: 0 0 0 1px #fff inset, 0 0 0 1px #666666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 1px #666666; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input.default:active, .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input.hover:active, .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input.focus:active{ box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow:none; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input.hover{ box-shadow: 0px 0px 1px 2px #0B41AD4A; cursor: pointer; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input.focus { outline: 1px solid #80CEEF; outline-offset: 3px; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input.active, .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input.active:hover{ -webkit-box-shadow: 0 0 0 3px #fff inset, 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); -moz-box-shadow: 0 0 0 3px #fff inset, 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); box-shadow: 0 0 0 3px #fff inset, 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); } .__mst_checkbox_new.list{ margin-bottom: -8px; } .__mst_checkbox_new.list_secondary{ margin-bottom: -4px; } .__mst_checkbox_grp_title{ margin-bottom: 4px; margin-left: 12px; color: #333333; font-weight: bold; text-transform: capitalize; margin-top: 0px; } .__mst_checkbox_grp .__mst_checkbox_new:last-child{ margin-bottom: 8px; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input.media_mobile_Size_input{ width: 14px; height: 14px; } .__mst_checkbox_new .__mst_checkbox_wrapper.media_mobile_Size_wrap{ margin: 8px ; } */ /*picklist checkbox css starts here*/ /* .__mst_picklist_container{ margin-top: 100px; padding: 32px; } .__mst_picklist_outer{ display: flex; width: 70%; justify-content: space-between; flex-wrap: wrap; } .__mst_pickList_box{ margin: 20px 10px; width: 200px; border-radius: 3px; box-shadow: -1px 1.5px 2px 2px #00000029; list-style: none; padding: 0; display: flex; flex-direction: column; } .__mst_pickList_box.picklist_default .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input:hover, .__mst_pickList_box.picklist_focus .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input:hover, .__mst_pickList_box.picklist_down .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input:hover{ box-shadow: 0px 0px 1px 2px #0B41AD4A; cursor: pointer; } .__mst_pickList_box.picklist_default .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input:active, .__mst_pickList_box.picklist_focus .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input:active{ box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow:none; } .__mst_pickList_box.picklist_default .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input:focus, .__mst_pickList_box.picklist_down .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input:focus{ outline: none; } .__mst_pickList_box.picklist_down .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input:active{ -webkit-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); -moz-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); } .__mst_pickList_box.picklist_default .__mst_checkbox_picklist_item:focus-within, .__mst_pickList_box.picklist_down .__mst_checkbox_picklist_item:focus-within{ box-shadow: none; margin: 0; } .__mst_checkbox_picklist_item{ padding: 1rem; } .__mst_checkbox_new.__mst_checkbox_picklist_item .__mst_checkbox_wrapper { position: relative; margin: 0 12px 0 0; } .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input:hover{ color: #3C67BE; cursor: pointer; } .__mst_checkbox_picklist_item:hover{ color: #3C67BE; } .__mst_checkbox_picklist_item:focus-within{ box-shadow: 0 0 0 2px #80CEEF inset; margin: 1px 2px; } */ /*picklist checkbox css ends here*/ /*multi level checkbox starts here*/ /* .__mst_pickList_box.mlt_lvl{ width: 70%; padding-top: 1rem; } .__mst_pickList_box.mlt_lvl .__mst_checkbox_picklist_item{ padding: 0.5rem 1rem; } .__mst_pickList_box.mlt_lvl label.__mst_checkbox_mlt_lvl__label{ font-weight: bold; } .__mst_pickList_box.mlt_lvl label.__mst_checkbox_mlt_lvl__label:hover, .__mst_pickList_box.mlt_lvl .__mst_checkbox_picklist_item:hover{ color: initial; } .__mst_pickList_box.mlt_lvl label.__mst_checkbox_mlt_lvl__label span{ font-weight: normal; } .__mst_pickList_box.mlt_lvl .__mst_checkbox_mlt_lvl_wrapper{ margin-left: 46px; } .__mst_radio_mlt_lvl_wrapper{ padding: 10px 35px; } */ /*multi level checkbox ends here*/ /*select all checkbox starts here*/ /* .__mst_pickList_box.select_all{ border: 1px solid #E6E6E6; box-shadow: none; width: 100%; } .__mst_pickList_box.select_all .__mst_checkbox_wrapper{ margin: 0; padding: 12px 12px; border-right: 1px solid #E6E6E6; } .__mst_pickList_box.select_all .__mst_checkbox_label_wrapper{ margin-left: 12px; } */ /*radio css inside checkbox*/ /* *{ font-family: 'Noto Sans', sans-serif; } */ /** * Custom Radio Buttons */ /* .__mst_radio_new { */ /* display: flex; flex-direction: row; align-items: center; } .__mst_radio_new.__mst_state_display{ justify-content: center; } .__mst_radio_new.inline { display: inline-block; margin-right: 15px; } .__mst_radio_new .__mst_radio_wrapper, .__mst_radio_new .__mst_radio_label_wrapper { display: inline-block; vertical-align: middle; } .__mst_radio_new .__mst_radio_wrapper { position: relative; margin: 8px 12px; } .__mst_radio_new .__mst_radio_wrapper:hover { cursor: pointer; } .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border: 2px solid #FFF; border-radius: 50%; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -ms-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; width: 25px; height: 25px; margin: 0; vertical-align: top; cursor: pointer; position: initial; display: inline-block; } .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input:disabled:hover, .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input[disabled]:hover { cursor: not-allowed; } .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input:disabled:after, .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input[disabled]:after { border: 2px solid #999999; background: #FFFFFF; } .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input:disabled:checked + .__mst_radio_styler, .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input[disabled]:checked + .__mst_radio_styler { background: #999999; z-index: 100; } .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input:disabled:checked + .__mst_radio_styler:hover, .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input[disabled]:checked + .__mst_radio_styler:hover { cursor: not-allowed; } .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid #0B41AD; border-radius: 50%; } .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input:focus { outline: 1px solid #80CEEF; outline-offset: 2px; } .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input:active{ -webkit-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); -moz-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); color: #0B41AD; } .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input:hover{ box-shadow: 0px 0px 1px 2px #0B41AD4A; cursor: pointer; } .__mst_radio_new .__mst_radio_label_wrapper .__mst_radio_label:hover{ cursor: pointer; color: #3C67BE; } .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input:checked + .__mst_radio_styler, .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input[checked] + .__mst_radio_styler { background: #0B41AD; } .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input + .__mst_radio_styler { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 4px; z-index: -1; border-radius: 50%; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -ms-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; } .__mst_radio_new .__mst_radio_label_wrapper .__mst_radio_label { vertical-align: middle; } .container{ display: flex; justify-content: space-between; flex-wrap: wrap; } .__mst_radio_new.list{ margin-bottom: -8px; } .__mst_radio_new.list_secondary{ margin-bottom: -4px; } .__mst_radio_grp_title{ margin-bottom: 4px; margin-left: 12px; color: #333333; font-weight: bold; text-transform: capitalize; margin-top: 0px; } .__mst_radio_grp .__mst_radio_new:last-child{ margin-bottom: 8px; } .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input.media_mobile_Size_input{ width: 25px; height: 25px; } .__mst_radio_new .__mst_radio_wrapper.media_mobile_Size_wrap{ margin: 8px ; } @media screen and (max-width:767px) { .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input { width: 25px; height: 25px; } .__mst_radio_new .__mst_radio_wrapper{ margin: 8px ; } } */ /*picklist radio css starts here*/ /* .__mst_picklist_container{ margin-top: 100px; padding: 32px; } .__mst_picklist_outer{ display: flex; width: 70%; justify-content: space-between; flex-wrap: wrap; } .__mst_pickList_box{ margin: 20px 10px; width: 200px; border-radius: 3px; box-shadow: -1px 1.5px 2px 2px #00000029; list-style: none; padding: 0; display: flex; flex-direction: column; } .__mst_pickList_box.picklist_default .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input:hover, .__mst_pickList_box.picklist_focus .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input:hover, .__mst_pickList_box.picklist_down .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input:hover{ box-shadow: 0px 0px 1px 2px #0B41AD4A; cursor: pointer; } .__mst_pickList_box.picklist_default .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input:active, .__mst_pickList_box.picklist_focus .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input:active{ box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow:none; } .__mst_pickList_box.picklist_default .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input:focus, .__mst_pickList_box.picklist_down .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input:focus{ outline: none; } .__mst_pickList_box.picklist_down .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input:active{ -webkit-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); -moz-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); } .__mst_pickList_box.picklist_default .__mst_radio_picklist_item:focus-within, .__mst_pickList_box.picklist_down .__mst_radio_picklist_item:focus-within{ box-shadow: none; margin: 0; } .__mst_radio_new.__mst_radio_picklist_item .__mst_radio_wrapper { position: relative; margin: 0 12px 0 0; } .__mst_radio_new .__mst_radio_wrapper .__mst_radio_input:hover{ color: #3C67BE; cursor: pointer; } .__mst_radio_picklist_item:hover{ color: #3C67BE; } .__mst_radio_picklist_item:focus-within{ box-shadow: 0 0 0 2px #80CEEF inset; margin: 1px 2px; } */ /*picklist radio css ends here*/ /* @media screen and (max-width:767px) { .__mst_checkbox_new .__mst_checkbox_wrapper .__mst_checkbox_input { width: 14px; height: 14px; } .__mst_checkbox_new .__mst_checkbox_wrapper{ margin: 8px ; } .__mst_pickList_box.mlt_lvl .__mst_checkbox_mlt_lvl_wrapper{ margin-left: 42px; } } */ /* start of picklist */ .__mst_picklist_container{ margin-top: 100px; padding: 32px; } .__mst_picklist_container .__mst_picklist_outer{ display: flex; flex-wrap: wrap; } .__mst_pickList_box{ margin: 20px 10px; width: 200px; border-radius: 3px; box-shadow: -1px 1.5px 2px 2px #00000029; list-style: none; padding: 0; display: flex; flex-direction: column; } .__mst_pickList_box .__mst_pickList_item{ display: flex; flex-direction: column; font-size: 1rem; padding: 1rem; align-items: flex-start; cursor: pointer; margin-left: 0; margin-bottom: 0; } .__mst_pickList_box .__mst_pickList_item:hover{ background-color: #E6E6E6; } .__mst_pickList_box .__mst_pickList_item.focused{ background-color: #80CEEF; } .__mst_pickList_box .__mst_pickList_item:focus-within{ background-color: #80CEEF; } /*picklist with radio starts here*/ .__mst_radio_new { display: flex; flex-direction: row; align-items: center; } .__mst_radio_new .__mst_radio_wrapper_new, .__mst_radio_new .__mst_radio_label_wrapper_new { display: inline-block; vertical-align: middle; } .__mst_radio_new.__mst_radio_picklist_item .__mst_radio_wrapper_new { position: relative; margin: 0 12px 0 0; /* bottom: 4px; */ } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; /* border: 2px solid #FFF; */ border-radius: 50%; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -ms-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; width: 20px; height: 20px; margin: 2px; vertical-align: top; cursor: pointer; position: initial; display: inline-block; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:disabled:checked + .__mst_radio_styler_new, .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new[disabled]:checked + .__mst_radio_styler_new { background: #999999; z-index: 100; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid #0B41AD; border-radius: 50%; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:checked + .__mst_radio_styler_new, .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new[checked] + .__mst_radio_styler_new{ background: #0B41AD; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new + .__mst_radio_styler_new { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 4px; z-index: -1; border-radius: 50%; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -ms-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; } .__mst_radio_new .__mst_radio_label_wrapper_new .__mst_radio_label_new { vertical-align: middle; cursor: pointer; font-size: 16px; margin-bottom: 0; margin-top: 0; } .__mst_pickList_box .__mst_radio_new .__mst_radio_label_wrapper_new .__mst_radio_label_new:hover{ color: #3C67BE; } .__mst_radio_new.list.__mst_radio_picklist_item{ padding: 1rem; margin-bottom: 0; } .__mst_pickList_box .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:hover{ box-shadow: 0px 0px 1px 4px #0B41AD4A; cursor: pointer; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:focus{ border: none; } .__mst_radio_picklist_item:hover{ color: #3C67BE; } .__mst_radio_picklist_item:focus-within{ box-shadow: 0 0 0 2px #80CEEF inset; margin: 1px 2px; } /*picklist with radio ends here*/ /*picklist checkbox css starts here*/ .__mst_checkbox_new { display: flex; flex-direction: row; align-items: baseline; } .__mst_checkbox_new .__mst_checkbox_wrapper_new, .__mst_checkbox_new .__mst_checkbox_label_wrapper_new { display: inline-block; vertical-align: middle; } .__mst_checkbox_new .__mst_checkbox_wrapper_new { position: relative; margin: 8px 12px; top: 2px; } .__mst_checkbox_new .__mst_checkbox_wrapper_new:hover { cursor: pointer; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -ms-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; width: 18px; height: 18px; margin: 0; vertical-align: top; cursor: pointer; position: initial; display: inline-block; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:disabled:hover, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[disabled]:hover { cursor: not-allowed; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:disabled:after, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[disabled]:after { border: 2px solid #999999; background: #FFFFFF; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:disabled:checked + .__mst_checkbox_styler_new, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[disabled]:checked + .__mst_checkbox_styler_new { background: #999999; z-index: 100; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:disabled:checked + .__mst_checkbox_styler_new:hover, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[disabled]:checked + .__mst_checkbox_styler_new:hover { cursor: not-allowed; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:active{ -moz-box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:hover{ box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #0b41ad, 0px 0px 3px 3px #0b41ad4a; cursor: pointer; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:focus{ border: none; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:checked + .__mst_checkbox_styler_new, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[checked] + .__mst_checkbox_styler_new { background: #0B41AD; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new + .__mst_checkbox_styler_new { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 1px 1px 7px; z-index: -1; -webkit-transition: all .35s ease; -moz-transition: all .35s ease; -ms-transition: all .35s ease; -o-transition: all .35s ease; transition: all .35s ease; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:checked + .__mst_checkbox_styler_new:after, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[checked] + .__mst_checkbox_styler_new:after { font-family: 'Mericon'; font-weight: normal; font-style: normal; line-height: 1; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; content: "\e969"; font-size: 16px; position: relative; bottom: 2px; right: 0; -webkkit-font-feature-settings: 'liga' 1; -moz-font-feature-settings: 'liga' 1; font-feature-settings: 'liga' 1; color: #FFFFFF; } .__mst_checkbox_new .__mst_checkbox_label_wrapper_new .__mst_checkbox_label_new { vertical-align: middle; font-size: 16px; margin-bottom: 0; margin-top: 0; } .__mst_checkbox_new.list.__mst_checkbox_picklist_item{ padding: 1rem 1.25rem; margin-bottom: 0; } .__mst_checkbox_new.__mst_checkbox_picklist_item .__mst_checkbox_wrapper_new { position: relative; margin: 0 12px 0 0; top: 3px; } /* .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:hover{ color: #3C67BE; cursor: pointer; } */ .__mst_checkbox_new .__mst_checkbox_label_wrapper_new .__mst_checkbox_label_new:hover{ color: #3C67BE; } .__mst_checkbox_picklist_item:focus-within{ box-shadow: 0 0 0 2px #80CEEF inset; margin: 1px 2px; } /*picklist checkbox css ends here*/ /*extra css for dynamic picklist variation starts here*/ .__mst_picklist_container .__mst_picklist_outer .__mst_pickList_left_box{ margin: 20px 10px; width: 200px; /* border: 1px solid black; */ border-radius: 3px; box-shadow: -1px 1.5px 2px 2px #69696952; /* height: 300px; overflow-y: scroll; */ } .__mst_picklist_container .__mst_picklist_outer .__mst_pickList_left_box::-webkit-scrollbar{ width: 8px; background: #b0b2b4; /* border-radius: 0 8px 8px 0; */ } .__mst_picklist_container .__mst_picklist_outer .__mst_pickList_left_box::-webkit-scrollbar-thumb{ background: #363738; height: 20px; /* border-radius: 0 8px 8px 0; */ } .__mst_picklist_container .__mst_picklist_outer .__mst_pickList_left_box .option{ padding: 12px 24px; cursor: pointer; } .__mst_picklist_container .__mst_picklist_outer .__mst_pickList_left_box .option:hover{ background: #E6E6E6; } .__mst_picklist_container .__mst_picklist_outer .__mst_pickList_left_box .option.clicked{ background: #7ad7ec; } .__mst_picklist_container .__mst_picklist_outer .__mst_pickList_left_box label{ cursor: pointer; } .__mst_picklist_container .__mst_picklist_outer .__mst_pickList_left_box .option .radio{ display: none; } .__mst_picklist_container .__mst_picklist_outer .__mst_pickList_right_box .option{ padding: 12px 24px; cursor: pointer; } .__mst_picklist_container .__mst_picklist_outer .__mst_pickList_right_box .option:hover{ background: #414b57; } .__mst_picklist_container .__mst_picklist_outer .__mst_pickList_right_box .option.clicked{ background: #7ad7ec; } .__mst_picklist_container .__mst_picklist_outer .__mst_pickList_right_box label{ cursor: pointer; } .__mst_picklist_container .__mst_picklist_outer .__mst_pickList_right_box .option .radio{ display: none; } .__mst_picklist_container .__mst_picklist_outer .__mst_pickList_icon_box{ margin: 20px 10px; width: 50px; border: 1px solid black; display: flex; flex-direction: column; justify-content: center; } .__mst_picklist_container .__mst_picklist_outer .__mst_pickList_icon_box .__mst_arrow_btn{ margin-bottom: 0.5rem; margin-left: 0.25rem; width: 2.5rem; height: 2rem; font-size: larger; } .__mst_picklist_container .__mst_picklist_outer .__mst_pickList_right_box{ margin: 20px 10px; width: 200px; /* border: 1px solid black; */ border-radius: 3px; box-shadow: -1px 1.5px 2px 2px #69696952; /* height: 300px; overflow-y: scroll; */ } /*extra css for dynamic picklist vriation ends here*/ @media screen and (max-width:767px) { .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new { width: 16px; height: 16px; margin: 4px 3px 3px 3px; } .__mst_pickList_box .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:hover { box-shadow: 0 0 0 3px #fff, 0px 0px 1px 5px #0b41ad4a; cursor: pointer; } .__mst_radio_new.__mst_radio_picklist_item .__mst_radio_wrapper_new { /* margin: 0 8px 0 0; */ margin: 4px 8px; } .__mst_radio_new.__mst_radio_picklist_item .__mst_radio_label_wrapper_new .__mst_radio_label_new{ position: relative; top: 1px; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:after{ top: 1px; bottom: 1px; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new + .__mst_radio_styler_new{ top: 1px; bottom: 1px; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:focus{ outline-offset: 5px; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new { width: 15px; height: 15px; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new + .__mst_checkbox_styler_new { bottom: 10px; margin: 0; /* bottom: 7px; */ top: 1px; left: 1px; right: 1px; } .__mst_checkbox_new.__mst_checkbox_picklist_item .__mst_checkbox_wrapper_new .__mst_checkbox_input_new + .__mst_checkbox_styler_new{ /* bottom: 6px; */ bottom: 7px; top: 1px; left: 1px; right: 1px; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:checked + .__mst_checkbox_styler_new:after, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[checked] + .__mst_checkbox_styler_new:after{ bottom: 4px; right: 1px; font-size: 15px; } .__mst_checkbox_new.__mst_checkbox_picklist_item .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:checked + .__mst_checkbox_styler_new:after, .__mst_checkbox_new.__mst_checkbox_picklist_item .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[checked] + .__mst_checkbox_styler_new:after{ /* bottom: 1px; */ bottom: 2px; right: 1px; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:hover { box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #0B41AD, 0px 0px 3px 3px #0b41ad4a; cursor: pointer; } .__mst_checkbox_new.__mst_checkbox_picklist_item .__mst_checkbox_wrapper_new { margin: 0 8px 0 0; top: 3px; } .__mst_radio_new .__mst_radio_label_wrapper_new .__mst_radio_label_new { font-size: 14px; position: relative; /* bottom: 1px; */ top: 1px; } .__mst_checkbox_new .__mst_checkbox_label_wrapper_new .__mst_checkbox_label_new { font-size: 14px; position: relative; bottom: 2px; } .__mst_checkbox_new.__mst_checkbox_picklist_item .__mst_checkbox_label_wrapper_new .__mst_checkbox_label_new{ bottom: 0; top: 1px; } .__mst_pickList_box .__mst_pickList_item { font-size: 0.875rem; padding: 0.875rem; } .__mst_radio_picklist_item{ padding: 0.875rem; } .__mst_checkbox_picklist_item{ padding: 0.875rem 1rem; } } /* End of picklist*/ /*start of navigation header component*/ nav.__mst_nav_container{ height: 52px; width: 100%; background-color: #002c77; display: flex; justify-content: space-between; } .__mst_header_logo_new{ padding: 0px 28px; height: 20px; display: flex; position: relative; top: 15px; } .__mst_large_logo{ display: block; } .__mst_small_logo{ display: none; } nav.__mst_nav_container ul{ display: flex; align-content: center; margin-right: 10px; box-sizing: border-box; margin-left: 0; padding-left: 0; } nav.__mst_nav_container ul li em.search, nav.__mst_nav_container ul li em.user, nav.__mst_nav_container ul li em.envelop{ /* font-size: 20px; */ color: white; /* position: relative; */ /* top: 3px; */ } nav.__mst_nav_container.__mst_dropdown_nav ul li em.search{ display: none; } nav.__mst_nav_container.__mst_dropdown_nav ul li{ padding: 0 8px; margin-left: 0; margin-bottom: 0; } nav.__mst_nav_container.__mst_dropdown_nav ul li label.__mst_user{ display: inline-block; color: white; font-size: 14px; position: relative; padding-right: 0; margin-left: -8px; padding-left: 0; vertical-align: middle; margin-top: 0; line-height: 15px; } nav.__mst_nav_container.__mst_dropdown_nav ul li.__mst_line_divider{ margin: 0 0 0 16px; padding: 0; } nav.__mst_nav_container ul li em.search:active{ /* border: 1px solid white; */ border-radius: 3px; line-height: 35px; transition: 0.1s; box-shadow: rgb(255 255 255 / 49%) 0px 5px 10px; } nav.__mst_nav_container li{ display: inline-block; line-height: 50px; padding: 0 10px; position: relative; top: 1px; margin-left: 0; margin-bottom: 0; } nav.__mst_nav_container a{ color: white; font-size: 15px; border: 1px solid transparent; padding-right: 4px; border-radius: 3px; position: relative; /* bottom: -2.2px; */ } .__mst_hamburger_logo_new{ position: relative; top: 0px; margin: 0 8px; } /* Extra css for RIS header begins here*/ nav.__mst_nav_container.__mst_ris_nav{ background-color: #ffffff; justify-content: space-between; box-shadow: -1px 1.5px 2px 2px #69696952; } nav.__mst_nav_container .__mst_ris_label{ color: #002c77; font-weight: bold; position: relative; margin-right: 28px; display: flex; align-items: center; margin-top: 0; font-size: 1.25rem; } /* css for dropdown begins*/ nav.__mst_nav_container.__mst_dropdown_nav select.__mst_form_input { /* padding: 10px 15px; */ margin: 15px auto 8px; height: 24px; width: 400px; border-radius: 3px; box-shadow: none; outline: none; border: 1px solid #999999; display: block; font-family: 'Noto Sans', sans-serif; font-weight: 400; font-size: 1em; line-height: 1.5em; box-sizing: border-box; transition: box-shadow .25s,border-color .25s ease-in-out; } /* css for dropdown ends here*/ /*css for custom dropdown starts here*/ .__mst_option_box_new{ width: 100%; display: flex; flex-direction: column-reverse; } .__mst_option_box_new.__mst_box_fix{ width: 30vw; } .__mst_option_box_new .__mst_option_container_new{ max-height: 0; width: 100%; opacity: 0; transition: all 0.4s; overflow: hidden; border-radius: 2px; box-shadow: -1px 1px 8px 0 #666666; font-size: 16px; color: #666666; background-color: #FFFFFF; } .__mst_option_box_new .__mst_option_container_new.__mst_header_option_fix{ position: absolute; width: 30vw; top: 51px; font-size: 16px; } .__mst_option_box_new .__mst_select_new{ display: flex; /* justify-content: space-between; */ /* background: #2f3640; */ color: #666666; align-items: center; border-radius: 2px; border: 1px solid #999999; box-shadow: 0 0 2px 1px #999999; /* margin-bottom: 8px; */ position: relative; padding: 0 8px; height: 40px; width: 100%; background-color: #FFFFFF; } .__mst_option_box_new .__mst_select_new.__mst_header_select_fix{ /* width: 400px; */ bottom: 10px; height: 2rem; } .__mst_option_box_new .__mst_select_new .dropdown_label_new{ font-size: 1rem; margin: 0; /* display: flex; line-height: 1rem; */ display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .__mst_option_box_new .__mst_option_container_new .dropdown_item_label_new{ font-size: 16px; margin: 0; display: flex; line-height: 16px; } /* .__mst_option_box_new .__mst_select_new .dropdown_label_new.__mst_header_label_fix{ font-size: 1.5vw; } */ .__mst_option_box_new .__mst_select_new:hover{ box-shadow: 0 0 2px 0px #0b41ad; border: 1px solid #0b41ad; } .__mst_option_box_new .__mst_select_new:active{ box-shadow: 0 0 2px 6px #D5D5D5; background-color: #D5D5D5; border-radius: 0; } .__mst_option_box_new .__mst_select_new:focus-within{ box-shadow: 0 0 2px 0 #999999, 0 0 0 2px #fff, 0 0 0 3px #80CEEF; /* outline-color: #80CEEF; outline-offset: 2px; outline-width: 2px; */ } .__mst_option_box_new .__mst_select_new.disabled{ background-color: #F3F3F3; cursor: not-allowed; color: #66666699; pointer-events: none; } .__mst_option_box_new .__mst_select_new .dropdown_disable_icon_new{ display: none; } .__mst_option_box_new .__mst_select_new.disabled .dropdown_icon_new{ display: none; } .__mst_option_box_new .__mst_select_new.disabled .dropdown_disable_icon_new{ display: inline-block; } .__mst_option_box_new .__mst_select_new .dropdown_icon_new, .__mst_option_box_new .__mst_select_new .dropdown_disable_icon_new{ margin-left: 8px; } /* .__mst_option_box_new .__mst_select_new::after{ content: ""; background: url("Drop down Icon_20px.svg"); background-repeat:no-repeat; background-size: contain; position: absolute; height: 100%; width: 16px; right: 10px; top: 12px; margin-left: 8px; transition: all 0.4s; } */ .__mst_option_box_new .__mst_option_container_new.active{ max-height: 160px; opacity: 1; overflow-y: scroll; z-index: 1; } .__mst_option_box_new .__mst_option_container_new.active + .__mst_select_new .dropdown_icon_new{ transform: rotateX(180deg); transition: all 0.4s; position: relative; bottom: 1px; /* top: -13px; */ } .__mst_option_box_new .__mst_option_container_new::-webkit-scrollbar{ /* margin: 8px 0; */ width: 8px; /* background: #00000029; */ /* height: 5px; */ /* border-radius: 0 8px 8px 0; */ /* border-radius: 8px; */ } .__mst_option_box_new .__mst_option_container_new.__disable_scroll::-webkit-scrollbar{ display: none; } .__mst_option_box_new .__mst_option_container_new::-webkit-scrollbar-track{ margin-block: 8px; /* width: 8px; */ background: #00000029; /* height: 5px; */ /* border-radius: 0 8px 8px 0; */ border-radius: 16px; } .__mst_option_box_new .__mst_option_container_new::-webkit-scrollbar-thumb{ background: #707070; /* border-radius: 0 8px 8px 0; */ border-radius: 16px; height: -5px; } .__mst_option_box_new .__mst_option_container_new .__mst_options_new{ display: flex; align-items: center; height: 40px; padding: 10px 8px; cursor: pointer; } .__mst_option_box_new .__mst_option_container_new .__mst_options_new:hover{ background: #80CEEF; color: #003A80; } .__mst_option_box_new label{ cursor: pointer; margin-bottom: 0; } .dropdown_label_new{ width: 100%; /* height: 100%; */ /* display: flex; */ /* align-items: center; */ /* padding: 4px 22px 4px 0; */ /* font-size: 2.2vh; */ } .__mst_option_box_new .__mst_option_container_new .__mst_options_new .__mst_options_radio_new, .__mst_option_box_new .__mst_select_new .__mst_options_radio_new{ appearance: none; /* display: none; */ margin: 0; } .__mst_option_box_new .__mst_option_container_new .__mst_options_new .__mst_options_radio_new:focus, .__mst_option_box_new .__mst_select_new .__mst_options_radio_new:focus{ border: none; box-shadow: none; margin: 0; } @media screen and (max-width:767px){ .__mst_option_box_new .__mst_select_new{ height: 32px; } .__mst_option_box_new .__mst_select_new .dropdown_label_new{ font-size: 14px; } .__mst_option_box_new .__mst_option_container_new{ font-size: 14px; } .__mst_option_box_new .__mst_option_container_new .dropdown_item_label_new{ font-size: 14px; } .__mst_option_box_new .__mst_option_container_new .__mst_options_new{ padding: 8px 8px; } } /*css for custom dropdown ends here*/ @media (max-width: 1024px) { nav.__mst_nav_container{ height: 48px; } nav.__mst_nav_container .__mst_header_logo_new{ padding: 0px 24px; height: 18px; display: flex; position: relative; top: 14px; } nav.__mst_nav_container ul{ margin-right: 0; position: relative; bottom: 3px; } nav.__mst_nav_container li{ padding: 0; } nav.__mst_nav_container li em.search{ padding: 0 8px; } nav.__mst_nav_container ul li a{ font-size: 14px; padding-left: 8px; padding-right: 0px; } nav.__mst_nav_container a.__mst_hamburger_logo_new{ top: 0px; margin: 0 20px 0 32px; padding-left: 0; } nav.__mst_nav_container .__mst_ris_label{ margin-right: 20px; text-align: end; line-height: normal; } /* css for dropdown begins here*/ nav.__mst_nav_container.__mst_dropdown_nav select.__mst_form_input{ margin: 12px 8px; width: 271px; } nav.__mst_nav_container.__mst_dropdown_nav ul li.__mst_line_divider{ margin: 8px 0 5px 16px; } nav.__mst_nav_container.__mst_dropdown_nav ul li.__mst_line_divider img{ position: relative; bottom: 9px; } nav.__mst_nav_container.__mst_dropdown_nav ul li a.__mst_hamburger_logo_new{ margin: 0 12px 0 8px; } /* css for dropdown ends here*/ .__mst_option_box_new .__mst_select_new.__mst_header_select_fix { bottom: 8px; } } @media (max-width: 767px){ nav.__mst_nav_container{ height: 40px; } nav.__mst_nav_container a.__mst_header_logo_new { padding: 0px 20px; height: 20px; top: 9px; } .__mst_large_logo{ display: none; } .__mst_small_logo{ display: block; } nav.__mst_nav_container ul{ bottom: 7px; } nav.__mst_nav_container li{ padding: 0 0 0 10px; } nav.__mst_nav_container.__mst_dropdown_nav ul li{ padding: 0; } nav.__mst_nav_container .__mst_ris_label{ line-height: 1rem; font-size: 1rem; } nav.__mst_nav_container ul li a{ display: none; } nav.__mst_nav_container ul li em.search{ padding: 0 10px; } nav.__mst_nav_container.__mst_dropdown_nav ul li em.search, nav.__mst_nav_container.__mst_dropdown_nav ul li em.user{ padding: 0 10px; font-size: 25px; } nav.__mst_nav_container ul li a.__mst_hamburger_logo_new{ top: -1px; margin: 0 20px 0 -22px; display: inline-block; } nav.__mst_nav_container.__mst_dropdown_nav ul li a.__mst_hamburger_logo_new{ margin: 0 20px 0 10px; } nav.__mst_nav_container.__mst_dropdown_nav ul li.__mst_line_divider{ display: none; } nav.__mst_nav_container.__mst_dropdown_nav select.__mst_form_input { display: none; } nav.__mst_nav_container.__mst_dropdown_nav .__mst_option_box_new.__mst_box_fix { display: none; } nav.__mst_nav_container.__mst_dropdown_nav ul li em.search{ display: inline-block; } nav.__mst_nav_container.__mst_dropdown_nav ul li em.envelop, nav.__mst_nav_container.__mst_dropdown_nav ul li label.__mst_user{ display: none; } /* css for dropdown ends here*/ } /*end of navigation header component*/ /*start ofcheckbox component*/ /** * Custom new checkbox Buttons */ .__mst_checkbox_new { display: flex; flex-direction: row; align-items: baseline; } .__mst_checkbox_new.__mst_state_display{ justify-content: center; } .__mst_checkbox_new.inline { display: inline-block; margin-right: 15px; } .__mst_checkbox_new .__mst_checkbox_wrapper_new, .__mst_checkbox_new .__mst_checkbox_label_wrapper_new { display: inline-block; vertical-align: middle; } .__mst_checkbox_new .__mst_checkbox_wrapper_new { position: relative; margin: 8px 12px; top: 2px; } /* .__mst_checkbox_new .__mst_checkbox_wrapper_new:hover { cursor: pointer; } */ .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -ms-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; width: 18px; height: 18px; margin: 0; vertical-align: top; cursor: pointer; position: initial; display: inline-block; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:disabled:hover, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[disabled]:hover { cursor: not-allowed; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:disabled:after, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[disabled]:after { border: 2px solid #999999; background: #FFFFFF; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:disabled:checked + .__mst_checkbox_styler_new, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[disabled]:checked + .__mst_checkbox_styler_new { background: #999999; z-index: 100; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:disabled:checked + .__mst_checkbox_styler_new:hover, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[disabled]:checked + .__mst_checkbox_styler_new:hover { cursor: not-allowed; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:focus { outline: 1px solid #80CEEF; outline-offset: 3px; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:active, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.media_mobile_Size_input:active{ -webkit-box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); -moz-box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:hover{ box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #0b41ad, 0px 0px 3px 3px #0b41ad4a; cursor: pointer; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:checked + .__mst_checkbox_styler_new, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[checked] + .__mst_checkbox_styler_new { background: #0B41AD; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new + .__mst_checkbox_styler_new { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 1px 1px 7px; z-index: -1; -webkit-transition: all .35s ease; -moz-transition: all .35s ease; -ms-transition: all .35s ease; -o-transition: all .35s ease; transition: all .35s ease; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:checked + .__mst_checkbox_styler_new:after, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[checked] + .__mst_checkbox_styler_new:after { font-family: 'Mericon'; font-weight: normal; font-style: normal; line-height: 1; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; content: "\e969"; font-size: 16px; position: relative; bottom: 2px; right: 0; -webkkit-font-feature-settings: 'liga' 1; -moz-font-feature-settings: 'liga' 1; font-feature-settings: 'liga' 1; color: #FFFFFF; } .__mst_checkbox_new .__mst_checkbox_label_wrapper_new .__mst_checkbox_label_new { vertical-align: middle; font-size: 16px; margin-bottom: 0; } .__mst_checkbox_new .__mst_checkbox_label_wrapper_new .__mst_checkbox_label_new:hover{ cursor: pointer; color: #3C67BE; } /* different states checkbox starts below */ .__mst_checkbox_new.__mst_state_display{ text-align: center; } .__mst_checkbox_container_box{ margin-right: 8px; } .remove_margin{ margin: 0; text-align: center; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.default:focus, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.hover:focus, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.active:focus { outline: none; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.default:hover, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.focus:hover{ -moz-box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666; } /* .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.default:active, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.hover:active, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.focus:active{ box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow:none; } */ .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.hover{ box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #0b41ad, 0px 0px 3px 3px #0b41ad4a; cursor: pointer; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.focus { outline: 1px solid #80CEEF; outline-offset: 3px; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.active{ -webkit-box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666; -moz-box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.active:active{ -webkit-box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); -moz-box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); } /* different states checkbox ends below */ /* .container{ width: 60%; display: flex; justify-content: space-between; flex-wrap: wrap; } */ .__mst_checkbox_new.list{ margin-bottom: -8px; } .__mst_checkbox_new.list_secondary{ margin-bottom: -4px; } .__mst_checkbox_grp_title{ margin-bottom: 4px; margin-left: 8px; color: #333333; font-weight: bold; text-transform: capitalize; margin-top: 0px; } .__mst_checkbox_grp_title.__mst_mobile_size_label{ margin-left: 5px; } .__mst_checkbox_grp .__mst_checkbox_new:last-child{ margin-bottom: 8px; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.media_mobile_Size_input{ width: 15px; height: 15px; } .__mst_checkbox_new .__mst_checkbox_wrapper_new.media_mobile_Size_wrap{ margin: 8px ; } .__mst_checkbox_new .__mst_checkbox_wrapper_new.media_mobile_Size_wrap .__mst_checkbox_input_new + .__mst_checkbox_styler_new { bottom: 10px; top: 1px; right: 1px; left: 1px; margin: 0; } .__mst_checkbox_new .__mst_checkbox_wrapper_new.media_mobile_Size_wrap .__mst_checkbox_input_new:checked + .__mst_checkbox_styler_new:after, .__mst_checkbox_new .__mst_checkbox_wrapper_new.media_mobile_Size_wrap .__mst_checkbox_input_new[checked] + .__mst_checkbox_styler_new:after{ bottom: 4px; right: 1px; font-size: 15px; } .__mst_checkbox_new .__mst_checkbox_wrapper_new.media_mobile_Size_wrap .__mst_checkbox_input_new:hover { box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #0B41AD, 0px 0px 3px 3px #0b41ad4a; cursor: pointer; } .__mst_checkbox_new .__mst_checkbox_wrapper_new.media_mobile_Size_wrap .__mst_checkbox_input_new { box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666; } .__mst_checkbox_new .__mst_checkbox_wrapper_new.media_mobile_Size_wrap + .__mst_checkbox_label_wrapper_new .__mst_checkbox_label_new{ font-size: 14px; position: relative; bottom: 2px; } /*picklist checkbox css starts here*/ .__mst_picklist_container{ margin-top: 100px; padding: 32px; } .__mst_picklist_outer{ display: flex; width: 70%; justify-content: space-between; flex-wrap: wrap; } .__mst_pickList_box{ margin: 20px 10px; width: 200px; border-radius: 3px; box-shadow: -1px 1.5px 2px 2px #00000029; list-style: none; padding: 0; display: flex; flex-direction: column; } /* diffrent state checkbox picklist */ .__mst_pickList_box.picklist_default .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:active, .__mst_pickList_box.picklist_focus .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:active{ box-shadow: 0 0 0 1px #fff, 0 0 0 2px #666666; -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #666666; -moz-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #666666; } .__mst_pickList_box.picklist_default .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:focus, .__mst_pickList_box.picklist_down .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:focus{ outline: none; } .__mst_pickList_box.picklist_down .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:active{ -webkit-box-shadow: 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); -moz-box-shadow: 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); box-shadow: 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); } .__mst_pickList_box.picklist_default .__mst_checkbox_picklist_item:focus-within, .__mst_pickList_box.picklist_down .__mst_checkbox_picklist_item:focus-within{ box-shadow: none; margin: 0; } .__mst_pickList_box .__mst_checkbox_picklist_item{ font-size: 1rem; padding: 1rem 1.25rem; } /* .__mst_checkbox_picklist_item{ padding: 1rem; } */ .__mst_checkbox_new.__mst_checkbox_picklist_item .__mst_checkbox_wrapper_new { position: relative; margin: 0 12px 0 0; top: 3px; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:hover{ cursor: pointer; } .__mst_checkbox_picklist_item:hover{ color: #3C67BE; } .__mst_checkbox_picklist_item:focus-within{ box-shadow: 0 0 0 2px #80CEEF inset; margin: 1px 2px; } /*picklist checkbox css ends here*/ /*multi level checkbox starts here*/ .__mst_pickList_box.mlt_lvl{ width: 100%; padding-top: 1rem; font-size: 1rem; } .__mst_pickList_box.mlt_lvl .__mst_checkbox_picklist_item{ padding: 0.5rem 1rem; } .__mst_pickList_box.mlt_lvl label.__mst_checkbox_mlt_lvl__label{ font-weight: bold; margin-top: 0; line-height: 20px; } .__mst_pickList_box.mlt_lvl label.__mst_checkbox_mlt_lvl__label:hover, .__mst_pickList_box.mlt_lvl .__mst_checkbox_picklist_item:hover{ color: initial; } .__mst_pickList_box.mlt_lvl label.__mst_checkbox_mlt_lvl__label span{ font-weight: normal; } .__mst_pickList_box.mlt_lvl .__mst_checkbox_mlt_lvl_wrapper{ margin-left: 46px; /* margin-top: -5px; */ } .__mst_radio_mlt_lvl_wrapper{ padding: 10px 35px; } /*multi level checkbox ends here*/ /*select all checkbox starts here*/ .__mst_pickList_box.select_all{ border: 1px solid #f3f3f3; box-shadow: none; width: 100%; padding: 13px; border-bottom: 1.5px solid #f3f3f3; } .__mst_pickList_box.select_all .__mst_checkbox_wrapper_new{ margin: 0; /* outline: 1px solid #E6E6E6; */ /* outline-offset: 12px; */ margin-right: 12px; position: relative; top: 0px; left: 1px; box-shadow: 0 0 0 14px #f3f3f3; } .__mst_pickList_box.select_all .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new{ margin: 3px; } .__mst_pickList_box.select_all .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new + .__mst_checkbox_styler_new{ margin: 4px 4px 4px; } /* .__mst_pickList_box.select_all .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:checked + .__mst_checkbox_styler_new:after, .__mst_pickList_box.select_all .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[checked] + .__mst_checkbox_styler_new:after{ bottom: -1px; right: -3px; } */ .__mst_pickList_box.select_all .__mst_checkbox_label_wrapper_new{ margin-left: 12px; } /*radio css inside checkbox*/ .__mst_radio_new { display: flex; flex-direction: row; align-items: center; } .__mst_radio_new .__mst_radio_wrapper_new, .__mst_radio_new .__mst_radio_label_wrapper_new { display: inline-block; vertical-align: middle; } .__mst_radio_new .__mst_radio_wrapper_new { position: relative; margin: 4px 12px; } .__mst_radio_new .__mst_radio_wrapper_new:hover { cursor: pointer; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; /* border: 2px solid #FFF; */ border-radius: 50%; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -ms-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; width: 20px; height: 20px; margin: 2px; vertical-align: top; cursor: pointer; position: initial; display: inline-block; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:disabled:hover, .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new[disabled]:hover { cursor: not-allowed; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:disabled:after, .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new[disabled]:after { border: 2px solid #999999; background: #FFFFFF; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:disabled:checked + .__mst_radio_styler_new, .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new[disabled]:checked + .__mst_radio_styler_new { background: #999999; z-index: 100; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:disabled:checked + .__mst_radio_styler_new:hover, .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new[disabled]:checked + .__mst_radio_styler_new:hover { cursor: not-allowed; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid #0B41AD; border-radius: 50%; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:focus { outline: 1px solid #80CEEF; outline-offset: 4px; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:active{ -webkit-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); -moz-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:hover{ box-shadow: 0px 0px 1px 2px #0B41AD4A; cursor: pointer; } .__mst_radio_new .__mst_radio_label_wrapper_new .__mst_radio_label_new:hover{ cursor: pointer; color: #3C67BE; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:checked + .__mst_radio_styler_new, .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new[checked] + .__mst_radio_styler_new { background: #0B41AD; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new + .__mst_radio_styler_new { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 4px; z-index: -1; border-radius: 50%; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -ms-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; } .__mst_radio_new .__mst_radio_label_wrapper_new .__mst_radio_label_new { vertical-align: middle; cursor: pointer; font-size: 16px; margin-bottom: 0; } /* .__mst_radio_new.list{ margin-bottom: -8px; } */ .__mst_radio_grp .__mst_radio_new:last-child{ margin-bottom: 8px; } .__mst_radio_picklist_item{ padding: 1rem; } .__mst_pickList_box .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:hover{ box-shadow: 0px 0px 1px 4px #0B41AD4A; cursor: pointer; } .__mst_radio_picklist_item:hover{ color: #3C67BE; } .__mst_radio_picklist_item:focus-within{ box-shadow: 0 0 0 2px #80CEEF inset; margin: 1px 2px; } @media screen and (max-width:767px) { .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new { width: 16px; height: 16px; margin: 4px 3px 3px 3px; } .__mst_radio_mlt_lvl_wrapper .__mst_radio_new.list{ margin-bottom: 0; } .__mst_radio_new .__mst_radio_wrapper_new{ /* margin: 0 8px 0 0 ; */ margin: 4px 8px; } .__mst_pickList_box .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:hover { box-shadow: 0 0 0 3px #fff, 0px 0px 1px 5px #0b41ad4a; cursor: pointer; } .__mst_radio_new .__mst_radio_label_wrapper_new .__mst_radio_label_new { font-size: 14px; position: relative; top: 1px; } .__mst_radio_new.__mst_radio_picklist_item .__mst_radio_label_wrapper_new .__mst_radio_label_new{ position: relative; top: 1px; } .__mst_radio_new.__mst_radio_picklist_item .__mst_radio_wrapper_new { margin: 0 8px 0 0; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:after{ top: 1px; bottom: 1px; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new + .__mst_radio_styler_new{ top: 1px; bottom: 1px; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:focus{ outline-offset: 5px; } } @media screen and (max-width:767px) { .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new { width: 15px; height: 15px; } .__mst_checkbox_new .__mst_checkbox_wrapper_new{ margin: 8px; } .__mst_checkbox_new .__mst_checkbox_label_wrapper_new .__mst_checkbox_label_new { font-size: 14px; position: relative; bottom: 2px; } .__mst_checkbox_new.__mst_checkbox_picklist_item .__mst_checkbox_label_wrapper_new .__mst_checkbox_label_new{ bottom: 0; top: 1px; } .__mst_checkbox_new.__mst_checkbox_picklist_item .__mst_checkbox_wrapper_new { margin: 0 8px 0 0; top: 3px; } .__mst_checkbox_grp_title{ margin-left: 5px; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new + .__mst_checkbox_styler_new { bottom: 10px; margin: 0; /* bottom: 7px; */ top: 1px; left: 1px; right: 1px; } .__mst_checkbox_new.__mst_checkbox_picklist_item .__mst_checkbox_wrapper_new .__mst_checkbox_input_new + .__mst_checkbox_styler_new{ bottom: 7px; top: 1px; left: 1px; right: 1px; /* bottom: 6px; */ } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:checked + .__mst_checkbox_styler_new:after, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[checked] + .__mst_checkbox_styler_new:after{ bottom: 4px; right: 1px; font-size: 15px; } .__mst_checkbox_new.__mst_checkbox_picklist_item .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:checked + .__mst_checkbox_styler_new:after, .__mst_checkbox_new.__mst_checkbox_picklist_item .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[checked] + .__mst_checkbox_styler_new:after{ /* bottom: 1px; */ bottom: 2px; right: 1px; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:hover, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.hover { box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #0B41AD, 0px 0px 3px 3px #0b41ad4a; cursor: pointer; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.default:hover, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.focus:hover{ -moz-box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666; } /* .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.active, .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.active:hover{ -webkit-box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); -moz-box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); } */ .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.active{ -webkit-box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666; -moz-box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666; } .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new.active:active{ -webkit-box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); -moz-box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666666, 0px 0px 2px 8px rgba(0, 92, 150, 0.1); } /*multi level checkbox responsive part*/ .__mst_pickList_box.mlt_lvl .__mst_checkbox_mlt_lvl_wrapper{ margin-left: 42px; } .__mst_pickList_box .__mst_checkbox_picklist_item { font-size: 0.875rem; } /*multi level checkbox responsive part ends here*/ .__mst_pickList_box.select_all .__mst_checkbox_new .__mst_checkbox_label_wrapper_new .__mst_checkbox_label_new { font-size: 16px; position: relative; bottom: 0; } .__mst_pickList_box.select_all .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new + .__mst_checkbox_styler_new { bottom: 0; top: 0; right: 0; left: 0; margin: 4px 4px 4px; } /* .__mst_pickList_box.select_all .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:checked + .__mst_checkbox_styler_new:after, .__mst_pickList_box.select_all .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[checked] + .__mst_checkbox_styler_new:after{ bottom: 2px; } */ .__mst_pickList_box.select_all .__mst_checkbox_wrapper_new .__mst_checkbox_input_new{ height: 18px; width: 18px; } .__mst_pickList_box.select_all .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new:checked + .__mst_checkbox_styler_new:after, .__mst_pickList_box.select_all .__mst_checkbox_new .__mst_checkbox_wrapper_new .__mst_checkbox_input_new[checked] + .__mst_checkbox_styler_new:after{ font-size: 18px; bottom: 2px; } } /*end of checkbox component*/ /* start of radio component*/ .__mst_radio_new { display: flex; flex-direction: row; align-items: center; } .__mst_radio_new.__mst_state_display{ justify-content: center; } .__mst_radio_new.inline { display: inline-block; margin-right: 15px; } .__mst_radio_new .__mst_radio_wrapper_new, .__mst_radio_new .__mst_radio_label_wrapper_new { display: inline-block; vertical-align: middle; } .__mst_radio_new .__mst_radio_wrapper_new { position: relative; margin: 4px 12px; } .__mst_radio_new .__mst_radio_wrapper_new:hover { cursor: pointer; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; /* border: 2px solid #FFF; */ border-radius: 50%; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -ms-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; width: 20px; height: 20px; margin: 2px; vertical-align: top; cursor: pointer; position: initial; display: inline-block; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:disabled:hover, .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new[disabled]:hover { cursor: not-allowed; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:disabled:after, .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new[disabled]:after { border: 2px solid #999999; background: #FFFFFF; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:disabled:checked + .__mst_radio_styler_new, .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new[disabled]:checked + .__mst_radio_styler_new { background: #999999; z-index: 100; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:disabled:checked + .__mst_radio_styler_new:hover, .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new[disabled]:checked + .__mst_radio_styler_new:hover { cursor: not-allowed; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid #0B41AD; border-radius: 50%; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:focus { outline: 1px solid #80CEEF; outline-offset: 4px; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:active{ -webkit-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); -moz-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:hover{ box-shadow: 0px 0px 1px 4px #0B41AD4A; cursor: pointer; } .__mst_radio_new .__mst_radio_label_wrapper_new .__mst_radio_label_new:hover{ cursor: pointer; color: #3C67BE; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:checked + .__mst_radio_styler_new, .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new[checked] + .__mst_radio_styler_new { background: #0B41AD; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new + .__mst_radio_styler_new { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 4px; z-index: -1; border-radius: 50%; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -ms-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; } .__mst_radio_new .__mst_radio_label_wrapper_new .__mst_radio_label_new { font-size: 16px; } /* different states radio starts below */ .__mst_radio_new.__mst_state_display{ text-align: center; } .__mst_radio_container_box{ margin-right: 8px; } .remove_margin{ margin: 0; text-align: center; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.default:focus { outline: none; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.default:active{ box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow:none; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.default:hover{ box-shadow: none; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.hover{ box-shadow: 0px 0px 1px 4px #0B41AD4A; cursor: pointer; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.disabled:hover{ box-shadow: none; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.hover:focus{ outline: none; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.hover:active{ box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow:none; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.focus { outline: 1px solid #80CEEF; outline-offset: 4px; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.focus:hover{ box-shadow: none; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.focus:active{ box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow:none; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.active:focus { outline: none; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.active{ box-shadow: none; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.active:hover{ box-shadow: initial; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.active:active{ -webkit-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); -moz-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); } /* different states radio ends here */ /* .container{ width: 60%; display: flex; justify-content: space-between; flex-wrap: wrap; } */ /* .__mst_radio_new.list{ margin-bottom: -8px; } */ .__mst_radio_new.list_secondary{ margin-bottom: 2px; } .__mst_radio_grp_title{ margin-bottom: 4px; margin-left: 12px; color: #333333; font-weight: bold; text-transform: capitalize; margin-top: 0px; } .__mst_radio_grp .__mst_radio_new:last-child{ margin-bottom: 8px; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.media_mobile_Size_input{ width: 16px; height: 16px; margin: 4px 3px 3px 3px; } .__mst_radio_new .__mst_radio_wrapper_new.media_mobile_Size_wrap{ margin: 4px 8px ; } .__mst_radio_new .__mst_radio_wrapper_new.media_mobile_Size_wrap+.__mst_radio_label_wrapper_new .__mst_radio_label_new{ font-size: 14px; position: relative; top: 1px; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.media_mobile_Size_input:hover { box-shadow: 0 0 0 3px #fff, 0px 0px 1px 5px #0b41ad4a; cursor: pointer; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.media_mobile_Size_input:after{ top: 1px; bottom: 1px; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.media_mobile_Size_input + .__mst_radio_styler_new{ top: 1px; bottom: 1px; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new.media_mobile_Size_input:focus{ outline-offset: 5px; } /* .__mst_pickList_box .__mst_radio_picklist_item{ font-size: 0.875rem; padding: 0.875rem; } */ /*picklist radio css starts here*/ /* .__mst_picklist_container{ margin-top: 100px; padding: 32px; } .__mst_picklist_outer{ display: flex; width: 70%; justify-content: space-between; flex-wrap: wrap; } .__mst_pickList_box{ margin: 20px 10px; width: 200px; border-radius: 3px; box-shadow: -1px 1.5px 2px 2px #00000029; list-style: none; padding: 0; display: flex; flex-direction: column; }*/ .__mst_pickList_box.picklist_default .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:hover, .__mst_pickList_box.picklist_focus .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:hover, .__mst_pickList_box.picklist_down .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:hover{ box-shadow: 0px 0px 1px 4px #0b41ad4a; cursor: pointer; } .__mst_pickList_box.picklist_default .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:active, .__mst_pickList_box.picklist_focus .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:active{ box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow:none; } .__mst_pickList_box.picklist_default .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:focus, .__mst_pickList_box.picklist_down .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:focus{ outline: none; } .__mst_pickList_box.picklist_default .__mst_radio_picklist_item:focus-within, .__mst_pickList_box.picklist_down .__mst_radio_picklist_item:focus-within{ box-shadow: none; margin: 0; } .__mst_pickList_box.picklist_down .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:active{ -webkit-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); -moz-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); } /* .__mst_pickList_box .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:active{ -webkit-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); -moz-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); } .__mst_pickList_box .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:focus{ outline: none } */ /* .__mst_pickList_box .__mst_radio_picklist_item{ font-size: 1rem; padding: 1rem; cursor: pointer; } .__mst_radio_new.__mst_radio_picklist_item .__mst_radio_wrapper_new{ position: relative; margin: 0 12px 0 0; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:hover{ color: #3C67BE; cursor: pointer; } .__mst_radio_picklist_item:hover{ color: #3C67BE; } .__mst_radio_picklist_item:focus-within{ box-shadow: 0 0 0 2px #80CEEF inset; margin: 1px 2px; } */ /*picklist radio css ends here*/ @media screen and (max-width:767px) { .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new { width: 16px; height: 16px; margin: 4px 3px 3px 3px; } .__mst_radio_mlt_lvl_wrapper .__mst_radio_new.list{ margin-bottom: 0; } .__mst_radio_new .__mst_radio_wrapper_new{ margin: 4px 8px; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:hover { box-shadow: 0 0 0 3px #fff, 0px 0px 1px 5px #0b41ad4a; cursor: pointer; } .__mst_radio_new .__mst_radio_label_wrapper_new .__mst_radio_label_new { font-size: 14px; position: relative; top: 1px; } .__mst_radio_new.__mst_radio_picklist_item .__mst_radio_label_wrapper_new .__mst_radio_label_new{ position: relative; top: 1px; } .__mst_radio_new.__mst_radio_picklist_item .__mst_radio_wrapper_new { margin: 0 8px 0 0; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:after{ top: 1px; bottom: 1px; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new + .__mst_radio_styler_new{ top: 1px; bottom: 1px; } .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:focus{ outline-offset: 5px; } .__mst_pickList_box .__mst_radio_picklist_item{ /* font-size: 0.875rem; */ padding: 0.875rem; } .__mst_pickList_box.picklist_default .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:hover, .__mst_pickList_box.picklist_focus .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:hover, .__mst_pickList_box.picklist_down .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:hover{ box-shadow: 0 0 0 3px #fff, 0px 0px 1px 5px #0b41ad4a; cursor: pointer; } .__mst_pickList_box.picklist_down .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:active{ -webkit-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); -moz-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); } /* .__mst_pickList_box .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:active{ -webkit-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); -moz-box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); box-shadow: 0px 0px 2px 8px rgba(0, 92, 150, 0.1); } .__mst_pickList_box .__mst_radio_new .__mst_radio_wrapper_new .__mst_radio_input_new:focus{ outline: none } */ } /* end of radio component*/ /*start of input stepper*/ .__mst_stepper_wrapper_new{ display: flex; } .__mst_stepper_wrapper_new input[type="number"]{ -moz-appearance: textfield; appearance: textfield; text-align: end; font-size: 16px; height: 40px; border: 1px solid #707070; color: #333333; /* border-color: #707070; */ border-radius: 0 !important; margin-top: 0 !important; border-top-left-radius: 3px !important; border-bottom-left-radius: 3px !important; padding-right: 8px; width: 54px; } .__mst_stepper_wrapper_new input[type="number"]::-webkit-outer-spin-button, .__mst_stepper_wrapper_new input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; } .__mst_stepper_wrapper_new .__mst_val_change_btn{ display: flex; flex-direction: column; /* border: 1px solid #707070; */ border-left: none; height: 40px; width: 24px; } button.__mst_step_btn{ /* color: #3264FE; */ background-color: #F0F0F0; /* border: none; */ /* height: 20px; */ font-size: 15px; cursor: pointer; width: 100%; height: 50%; margin: 0; padding: 0; } .__mst_stepper_wrapper_new input:disabled{ color: #999999; border-color: #999999 !important; cursor: not-allowed !important; } /* .__mst_stepper_wrapper_new input:disabled + .__mst_val_change_btn .__mst_step_btn{ border-color: #999999 !important; } */ button.__mst_step_btn:disabled{ background-color: #E6E6E6; cursor: not-allowed; opacity: 1 !important; } button.__mst_step_btn#increment:disabled{ border-top: 1px solid #999999; border-right: 1px solid #999999; } button.__mst_step_btn#decrement:disabled{ border-bottom: 1px solid #999999; border-right: 1px solid #999999; } button.__mst_step_btn#decrement:disabled:hover, button.__mst_step_btn#increment:disabled:hover{ background-color: #E6E6E6; } button.__mst_step_btn:disabled .dropdown_icon_disabled_new{ display: inline-block; width: 10px; } button.__mst_step_btn:disabled .dropdown_small_icon_new{ display: none; } button.__mst_step_btn:disabled:focus{ background-color: inherit; } button.__mst_step_btn:disabled:focus img, button.__mst_step_btn:disabled:hover img{ filter: none; } button.__mst_step_btn:disabled:active{ background-color: #E6E6E6; box-shadow: inherit; } /* button.__mst_step_btn:disabled:focus-within{ outline: 1px solid #80CEEF; outline-offset: 2px; } */ button.__mst_step_btn:hover{ background-color: #E6E6E6; } button.__mst_step_btn:hover img{ filter: brightness(0) saturate(100%) invert(17%) sepia(82%) saturate(2368%) hue-rotate(214deg) brightness(98%) contrast(104%); } button.__mst_step_btn:focus{ background-color: #F0F0F0; } button.__mst_step_btn:active{ /* background-color: #0B41AD33; box-shadow: 0px 0px 2px 4px #0B41AD33; */ background-color: #3C67BE; /* transition-delay: 0.15s; */ } button.__mst_step_btn:active img{ filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(293deg) brightness(106%) contrast(102%); } /* button.__mst_step_btn:focus-within{ outline: 1px solid #80CEEF; outline-offset: 2px; } */ button.__mst_step_btn#increment{ border-top: 1px solid #707070; border-right: 1px solid #707070; border-left: none; border-bottom: none; border-top-right-radius: 3px; } button.__mst_step_btn#decrement{ border-bottom: 1px solid #707070; border-right: 1px solid #707070; border-left: none; border-top: none; border-bottom-right-radius: 3px; } button.__mst_step_btn#increment img{ transform: rotateX(180deg); position: relative; /* bottom: 5px; */ bottom: 2px; /* right: 1.5px; */ } button.__mst_step_btn#decrement img{ position: relative; bottom: 2px; /* right: 1.5px; */ /* border-top: 1px; */ } /* .dropdown_small_icon_new{ display: none; } */ .dropdown_icon_disabled_new{ display: none; } @media screen and (max-width:767px){ .__mst_stepper_wrapper_new input[type="number"]{ height: 32px; font-size: 14px; } .__mst_stepper_wrapper_new .__mst_val_change_btn{ height: 32px; width: 20px; } /* .dropdown_large_icon_new{ display: none; } */ .dropdown_small_icon_new{ display: inline-block; } button.__mst_step_btn:disabled .dropdown_icon_disabled_new{ display: inline-block; width: 10px; } button.__mst_step_btn:disabled .dropdown_small_icon_new{ display: none; } button.__mst_step_btn#increment img { bottom: 2px; /* right: 1.5px; */ } button.__mst_step_btn#decrement img{ bottom: 3px; /* right: 1.5px; */ } } /*end of input stepper*/ /*start of dropdown*/ /*end of dropdown*/ /* table css starts here */ .__mst_component-tablewrapper { padding-top: 7px; padding-bottom: 7px; padding-left: 50px; padding-right: 50px; } .__mst_component-tablewrapper.__mst_bg-section { background: #BBEEF9; color: #002C77; } .__mst_component-tableinfo .__mst_component-tabletitle { font-size: 16px; font-weight: 600; margin-top: 0; margin-bottom: 0; } .__mst_component-tabledescription { padding-top: 7px; padding-bottom: 7px; padding-left: 50px; padding-right: 50px; } .__mst_component-tablepara { font-size: 16px; letter-spacing: 0px; color: #333333; text-align: left; margin-top: 52px; margin-bottom: 0; line-height: 24px; } .__mst_component-section { padding-top: 15px; padding-bottom: 0px; } .__mst_component-subtitle { font-size: 20px; line-height: 28px; letter-spacing: 0.5px; color: #002C77; margin-bottom: 5px; font-weight: bold; margin-top: 0; } .__mst_component-tablesubpara { font-size: 16px; letter-spacing: 0px; color: #333333; text-align: left; margin-top: 2px; margin-bottom: 0; line-height: 24px; } .__mst_table_basic { font-size: 14px; line-height: 24px; border-collapse: collapse; width: 100%; padding-top: 20px; margin-top: 24px; margin-bottom: 24px; background: #F0F0F0 !important; } .__mst_table_basic tbody { padding: 20px 0 0px 20px; display: block; margin: 24px auto; width: 70%; } .__mst_table_basic tbody td { border-bottom: none; background: #F0F0F0; } .__mst_table_basic tbody td:first-child { color: #333333; } .__mst_table_accordion tbody td:first-child { color: #333333; } .__mst_table_basic tbody td:last-child { color: #666666; } .__mst_basictable_cell { text-align: left; padding: 0 0px 12px 16px; } .__mst_basictable_cell:nth-child(odd) { border-right: 1px solid #dddddd; text-align: left; padding: 0 16px 12px 2px; font-weight: 600; width: 50%; } table, table.__mst_table_standard { width: 100%; padding-top: 16px; margin-top: 16px; margin-bottom: 24px; font-family: "Noto Sans", sans-serif; font-weight: 400; border-collapse: collapse; font-size: 1em; line-height: 1.5em; text-align: left; } table thead th, table thead th.__mst_table_standard_header, table.__mst_table_standard thead th, table.__mst_table_standard thead th.__mst_table_standard_header { font-weight: bold !important; /* padding-top: 10px; */ /* padding-bottom: 10px; */ padding-left: 16px; padding-right: 16px; background: #333333; color: #FFFFFF; border-right: 1px solid #FFFFFF; font-size: 16px; line-height: 16px; letter-spacing: 0.4px; } table thead th:first-child, table thead th.__mst_table_standard_header:first-child, table.__mst_table_standard thead th:first-child, table.__mst_table_standard thead th.__mst_table_standard_header:first-child { padding-left: 12px; } table thead th:last-child, table thead th.__mst_table_standard_header:last-child, table.__mst_table_standard thead th:last-child, table.__mst_table_standard thead th.__mst_table_standard_header:last-child { border-right: 0; padding-right: 12px; } table tbody td, table tbody td.__mst_table_standard_cell, table.__mst_table tbody td, table.__mst_table tbody td.__mst_table_standard_cell { color: #666666; padding-left: 16px; padding-right: 16px; border-bottom: 1px solid #CCCCCC; letter-spacing: 0.35px; line-height: 21px; border-right: 1px solid #FFFFFF; background: none; } table tbody td, table tbody td.__mst_table_alternates, table.__mst_table tbody td, table.__mst_table tbody td.__mst_table_standard_cell { color: #666666; padding-left: 16px; padding-right: 16px; border-bottom: 1px solid #CCCCCC; letter-spacing: 0.35px; line-height: 21px; border-right: 1px solid #FFFFFF; } table tbody td:first-child, table tbody td.__mst_table_standard_cell:first-child, table.__mst_table tbody td:first-child, table.__mst_table tbody td.__mst_table_standard_cell:first-child { padding-left: 12px; } table tbody td:last-child, table tbody td.__mst_table_standard_cell:last-child, table.__mst_table tbody td:last-child, table.__mst_table tbody td.__mst_table_standard_cell:last-child { border-right: 0; padding-right: 12px; } table.__mst_table_alternates tbody tr:nth-child(even) td, table.__mst_table.alternates tbody tr:nth-child(even) td.__mst_table_standard_cell { background-color: #E6E6E6; position: relative; z-index: 0; } table td.__mst_table_standard_cell .__mst_checkbox_new{ align-items: center; } .__mst_table_link { color: #0B41AD !important; border-bottom: 1px dotted #0B41AD; } .__mst_table_alternates>tbody>tr>td.__mst_txt-align:nth-child(3), .__mst_table_alternates>thead>tr>th.__mst_txt-align:nth-child(3), .__mst_table_alternates>tbody>tr>td.__mst_txt-align:nth-child(2), .__mst_table_alternates>thead>tr>th.__mst_txt-align:nth-child(2) { text-align: right; } .__mst_table_customalternates>tbody>tr>td.__mst_txt-align:nth-child(3), .__mst_table_customalternates>thead>tr>th.__mst_txt-align:nth-child(3), .__mst_table_customalternates>tbody>tr>td.__mst_txt-align:nth-child(2), .__mst_table_customalternates>thead>tr>th.__mst_txt-align:nth-child(2) { text-align: right; } .__mst_infoicon { display: none; } /* accordion css starts here */ .__mst_table_accordion { padding: 0; margin: 25px auto; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .__mst_table_accordion .__mst_accordion_table_title_wrapper { padding-top: 15px; padding-bottom: 15px; padding-left: 25px; padding-right: 25px; text-align: left; border-top: 1px solid #999999; border-bottom: 1px solid #999999; /** * States */ /** * Set border for the next one */ } .__mst_table_accordion .__mst_accordion_table_title_wrapper>* { display: table-cell; vertical-align: middle; } .__mst_table_accordion .__mst_accordion_table_title_wrapper:first-of-type { border-top: none; } .__mst_table_accordion .__mst_accordion_table_title_wrapper:last-of-type { border-bottom: none; } .__mst_table_accordion .__mst_accordion_table_title_wrapper:hover { cursor: pointer; } .__mst_table_accordion .__mst_accordion_table_title_wrapper .__mst_accordion_title_icon { color: #002C77; } .__mst_table_accordion .__mst_accordion_table_title_wrapper .__mst_accordion_title_icon.active i.mericon-plus-circle, .__mst_table_accordion .__mst_accordion_table_title_wrapper .__mst_accordion_title_icon.active .mericon-plus-circle { display: none; } .__mst_table_accordion .__mst_accordion_table_title_wrapper .__mst_accordion_title_icon.active i.mericon-minus-circle, .__mst_table_accordion .__mst_accordion_table_title_wrapper .__mst_accordion_title_icon.active .mericon-minus-circle { display: block; } .__mst_table_accordion .__mst_accordion_table_title_wrapper .__mst_accordion_title_icon i.mericon-plus-circle, .__mst_table_accordion .__mst_accordion_table_title_wrapper .__mst_accordion_title_icon .mericon-plus-circle { display: block; } .__mst_table_accordion .__mst_accordion_table_title_wrapper .__mst_accordion_title_icon i.mericon-minus-circle, .__mst_table_accordion .__mst_accordion_table_title_wrapper .__mst_accordion_title_icon .mericon-minus-circle { display: none; } .__mst_table_accordion .__mst_accordion_table_title_wrapper .__mst_accordion_title_icon i.mericon-plus-circle, .__mst_table_accordion .__mst_accordion_table_title_wrapper .__mst_accordion_title_icon .mericon-plus-circle, .__mst_table_accordion .__mst_accordion_table_title_wrapper .__mst_accordion_title_icon i.mericon-minus-circle, .__mst_table_accordion .__mst_accordion_table_title_wrapper .__mst_accordion_title_icon .mericon-minus-circle { -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -ms-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; } .__mst_table_accordion .__mst_accordion_table_title_wrapper .__mst_accordion_title>* { margin: 0; } .__mst_table_accordion .__mst_accordion_table_content { display: none; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -ms-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; padding-top: 20px; padding-bottom: 20px; } .__mst_table_accordion .__mst_accordion_table_content.active { display: revert; } .__mst_table_input { width: 30% !important; height: 31px; table-layout: auto; margin-bottom: 6px; box-sizing: content-box; display: inline-flex !important; padding: 5px 0 5px 0; } .__mst_table_editable_input { width: 85% !important; table-layout: auto; margin-bottom: 6px; box-sizing: content-box; display: inline-flex !important; padding: 5px 0 5px 0; } #__mst_table_form_input { border-top-left-radius: 3px !important; border-bottom-left-radius: 3px !important; text-align: right; height: auto; } .__mst_table_accordion_icon { display: inline-flex; position: relative; top: 2px; margin-right: 8px; } .__mst_link_align { margin-right: 8px; position: relative; left: 26px; } .__mst_table_mericon-plus-circle { color: #0B41AD !important; } .__mst_table_accordion_text { font-weight: 400; } /* accordion css ends here */ .__mst_table_resposive { overflow-x: auto; } table.__mst_table_custom_data tbody tr:nth-child(even) td, table.__mst_table_custom_data tbody tr:nth-child(even) td.__mst_table_standard_cell { background-color: #fff; } .__mst_table_editable { border-bottom: none !important; } .__mst_table_editable_border { border-top: 1px solid #999999; } .__mst_custom_table_standard_header { padding-left: 18px !important; } .__mst_table_icon { padding: 0 8px 0px 0; } .__mst_table_checkbox_custom { display: inline-flex; position: relative !important; top: 2px !important; } .__mst_table_mobilecustom { display: none; } .__mst_fieldstable { text-align: right; } .__mst_table_specialalign { display: none; } .__mst_editable_fomr { height: auto; } .__mst_addmore_link { font-size: 14px; margin-left: 16px } .__mst_add_more { padding: 0 0 12px 0; border-bottom: 1px solid #CCCCCC; } .__mst_table_error_message { padding: 16px 0 0 0; margin-bottom: 32px; margin-left: 16px; } .__mst_table_error_message i, .__mst_table_error_message span { color: #C53532; font-size: 14px; } .__mst_table_close { font-size: 10px; transform: translate(-4px, -1px); } .__mst_tbale_closelink { /* border-radius: 50%; */ margin-left: 10px; margin-top: 5px; display: flex; background-image: url(../../../../docs/assets/img/tablecloseicon.svg); width: 0%; max-width: 100%; height: 1vh; background-repeat: no-repeat; background-size: contain; /* margin: 20px auto;*/ } .__mst_main_table { width: 60%; } .__mst_table_headerimgone { background-image: url(../../../../docs/assets/img/headerone.svg); width: 100%; max-width: 100%; height: 28vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_table_headerimgtwo { background-image: url(../../../../docs/assets/img/headertwo.svg); width: 100%; max-width: 100%; height: 28vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_table_mainimg { background-image: url(../../../../docs/assets/img/mainimg.svg); width: 100%; max-width: 100%; height: 38vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_table_mainimgone { background-image: url(../../../../docs/assets/img/mainimgone.svg); width: 100%; max-width: 100%; height: 15vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_table_mainimgtwo { background-image: url(../../../../docs/assets/img/mainimgtwo.svg); width: 100%; max-width: 100%; height: 40vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_table_mainimgthree { background-image: url(../../../../docs/assets/img/mainimgthree.svg); width: 100%; max-width: 100%; height: 15vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_table_mainimgfour { background-image: url(../../../../docs/assets/img/mainimgfour.svg); width: 100%; max-width: 100%; height: 28vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_table_mainimgfive { background-image: url(../../../../docs/assets/img/mainimgfive.svg); width: 100%; max-width: 100%; height: 14vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_tableimgone { background-image: url(../../../../docs/assets/img/tableimg1.svg); width: 100%; max-width: 100%; height: 50vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_tableimgtwo { background-image: url(../../../../docs/assets/img/tableimg2.svg); width: 100%; max-width: 100%; height: 47vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_tableimgthree { background-image: url(../../../../docs/assets/img/tableimg3.svg); width: 100%; max-width: 100%; height: 47vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_tableimgtfour { background-image: url(../../../../docs/assets/img/tableimg4.svg); width: 100%; max-width: 100%; height: 47vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_table_standard tbody tr:nth-of-type(even), .__mst_table_customalternates tbody tr:nth-of-type(even) { background: white } .__mst_tableimgtfive { background-image: url(../../../../docs/assets/img/tableimg5.svg); width: 100%; max-width: 100%; height: 55vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_tableimgtfive-1 { background-image: url(../../../../docs/assets/img/tableimg5-1.svg); width: 100%; max-width: 100%; height: 91vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_tableimgtsix { background-image: url(../../../../docs/assets/img/tableimg6.svg); width: 100%; max-width: 100%; height: 55vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_tableimgtsix-1 { background-image: url(../../../../docs/assets/img/tableimg6-1.svg); width: 100%; max-width: 100%; height: 60vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_tableimgtseevn { background-image: url(../../../../docs/assets/img/tableimg7.svg); width: 100%; max-width: 100%; height: 50vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_tableimgtseevn-1 { background-image: url(../../../../docs/assets/img/tableimg7-1.svg); width: 100%; max-width: 100%; height: 36vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_tableimgteight { background-image: url(../../../../docs/assets/img/tableimg8.svg); width: 100%; max-width: 100%; height: 70vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_tableimgtnine { background-image: url(../../../../docs/assets/img/tableimg9.svg); width: 100%; max-width: 100%; height: 45vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_tableimgten { background-image: url(../../../../docs/assets/img/tableimg10.svg); width: 100%; max-width: 100%; height: 41vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_tableimgeleven { background-image: url(../../../../docs/assets/img/tableimg11.svg); width: 100%; max-width: 100%; height: 41vh; background-repeat: no-repeat; background-size: contain; margin: 20px auto; } .__mst_table_customalternates tbody tr td.__mst_table_standard_cell.__mst_table_borderalign, .__mst_table_accordion tbody tr td.__mst_table_standard_cell.__mst_table_borderalign, .__mst_table_custom_data tbody tr td.__mst_table_standard_cell.__mst_table_borderalign { border: none; } .__mst_table_customalternates tbody tr td.__mst_table_standard_cell.__mst_table_borderaligndark, .__mst_table_accordion tbody tr td.__mst_table_standard_cell.__mst_table_borderaligndark, .__mst_table_custom_data tbody tr td.__mst_table_standard_cell.__mst_table_borderaligndark { border-top: 1px solid #666666; border-bottom: 1px solid #666666; } .__mst_table_checkbox { display: flex !important; align-items: center; margin: 0 !important; } .__mst_radiotable_align{ line-height: 13px; margin-left: 0px !important; } .__mst_radiotable_inputicon{ width: 12px !important; height: 12px !important; } .__mst_tablecheckbox_icon{ margin-bottom: 0 !important; } .__mst_tablecheckbox_list{ line-height: 10px !important; margin-left: 4px !important; top: 0px !important; margin-right: 12px !important; } .__mst_tablecheckbox_input { width: 12px !important; height: 12px !important; } .__mst_tablecheckbox_span{ bottom: 0px !important; margin: 0 !important; } .__mst_tablecheckbox_span::after{ bottom: 0 !important; font-size: 12px !important; } .__mst_table_dropdownlist .__mst_select_new{ height: 35px ; margin-bottom: 8px ; box-shadow: none; } .__mst_tbaledecriptionfirst{ width: 45%; } .__mst_tbaledecriptionsecond{ width: 30%; } .__mst_tbaledecriptionthird{ width: 25%; } .__mst_table_inputlabel{ display: flex !important; justify-content: center; align-items: center; height: 19px; } .check:focus{ box-shadow: none; } /* Media Quiers stats here */ @media screen and (max-width: 767px) { .__mst_tableaccordian_mobileview { display: flex; } .__mst_tableaccordian_mobileview i { margin-top: 3px;} .__mst_table_headerimgone, .__mst_table_headerimgtwo, .__mst_table_mainimgone, .__mst_table_mainimgthree, .__mst_table_mainimgfive { height: 10vh; } .__mst_table_mainimg, .__mst_table_mainimgtwo, .__mst_table_mainimgfour { height: 20vh; } .__mst_main_table { width: 100%; } .__mst_tableimgtnine { height: 17vh; } .__mst_tableimgten { height: 17vh; } .__mst_tableimgeleven { height: 17vh; } .__mst_tableimgone { height: 19vh; } .__mst_tableimgtwo { height: 17vh; } .__mst_tableimgthree { height: 19vh; } .__mst_tableimgtfour { height: 19vh; } .__mst_tableimgtfive { height: 22vh; } .__mst_tableimgtfive-1 { height: 40vh; } .__mst_tableimgtsix { height: 22vh; } .__mst_tableimgtsix-1 { height: 24vh; } .__mst_tableimgtseevn { height: 17vh; } .__mst_tableimgtseevn-1 { height: 17vh; } .__mst_tableimgteight { height: 32vh; } .__mst_component-tablesubpara { font-size: 14px; line-height: 18px; } .__mst_component-subtitle { font-size: 18px; line-height: 24px; } td[data-title="Total"] { font-weight: bold; color: #333333 !important; } .__mst_table_basic tbody { width: 100%; } #tbl_posts { width: max-content; } .__mst_table_mobilecustom { display: block; } .__mst_table_specialalign { display: block; } .__mst_table_mobilecustom::before { text-align: left; } .__mst_table_input { width: 80% !important; height: 30px; } .__mst_input_group .__mst_input_label{ border: 1px solid #999999 !important; height: auto; } .__mst_table_editable_input{ width: 75% !important; height: 30px; } .__mst_table_customalternates thead { display: none; } .__mst_table_customalternates tbody, .__mst_table_customalternates tbody tr { display: block; width: 100%; } .__mst_table_customalternates tbody tr th::before, .__mst_table_customalternates tbody tr td::before { content: attr(data-title); display: block; } .__mst_table_customalternates tbody tr td { display: flex; width: 100%; justify-content: space-between; align-items: center; } .__mst_table_customalternates tbody tr td:first-child { flex-direction: row-reverse; background-color: #666666; font-weight: bold; } .__mst_table_customalternates .__mst_table_link { color: #fff!important; border-bottom: none; } .__mst_table_customalternates tbody tr td:nth-child(3) { background-color: #E6E6E6; } .__mst_total { display: none !important; } .__mst_table_customalternates, .__mst_total_value strong { color: #333333 !important; } .__mst__totalvalue { background-color: #fff !important; } .__mst_infoicon { content: "\2139"; width: 20px; height: 20px; border: 1px solid; border-radius: 15px; display: inline-block; text-align: center; background: white; color: #666666; } .__mst_radiotable_inputicon{ width: 8px !important; height: 9px !important; } } @media screen and (min-width: 768px) { table.__mst_table_customalternates tbody tr:nth-child(even) td, table.__mst_table_customalternates tbody tr:nth-child(even) td.__mst_table_standard_cell { background-color: #E6E6E6; } table.__mst_table_customalternates tbody tr td.__mst_total_value strong, table.__mst_table_accordion tbody tr td.__mst_total_value strong, table.__mst_table_custom_data tbody tr td.__mst_total_value strong { color: #333333; } } /* table css ends here */ /* Loader and Spinners starts here */ .__mst_main_spinners { width: 60%; } .__mst_component-spinnersdescription { padding-top: 7px; padding-bottom: 7px; padding-left: 50px; padding-right: 50px; } .__mst_component-spinnerspara { font-size: 16px; letter-spacing: 0px; color: #333333; text-align: left; margin-top: 2px; margin-bottom: 0; line-height: 24px; } .__mst_spinneranimation { display: flex; align-items: center; text-align: -webkit-center; } .__mst_spinneranimations { display: flex; align-items: center; /* text-align: -webkit-center; */ } .__mst_extra_loaderaction .__mst_loaderaction { border: 6px solid #f0f0f0; border-radius: 50%; border-top: 6px solid #002C77; border-bottom: 6px solid #002C77; border-left: 6px solid #002C77; width: 84px; height: 84px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite; } .__mst_loaderaction::after { content: ''; width: 6px; height: 6px; background: #002C77; border-radius: 50%; position: absolute; } .__mst_loaderaction::before { content: ''; width: 6px; height: 6px; background: #002C77; border-radius: 50%; position: absolute; } .__mst_loader_colorchange .__mst_loaderaction::after { content: ''; width: 6px; height: 6px; background: #ffff; border-radius: 50%; position: absolute; } .__mst_loader_colorchange .__mst_loaderaction::before { content: ''; width: 6px; height: 6px; background: #ffff; border-radius: 50%; position: absolute; } .__mst_extra_loaderaction .__mst_loaderaction::after { bottom: 6px; left: 61px; } .__mst_extra_loaderaction .__mst_loaderaction::before { top: 6px; left: 61px; } .__mst_large_loaderaction .__mst_loaderaction::after { bottom: 3px; left: 44px; } .__mst_large_loaderaction .__mst_loaderaction::before { top: 3px; left: 44px; } .__mst_medium_loaderaction .__mst_loaderaction::after { bottom: 2px; left: 33px; width: 4px; height: 4px; } .__mst_medium_loaderaction .__mst_loaderaction::before { top: 2px; left: 33px; width: 4px; height: 4px; } .__mst_small_loaderaction .__mst_loaderaction::after { bottom: 0px; left: 20px; width: 4px; height: 4px; } .__mst_small_loaderaction .__mst_loaderaction::before { top: 0px; left: 20px; width: 4px; height: 4px; } .__mst_extrasmall_loaderaction .__mst_loaderaction::after { bottom: 0px; left: 12px; width: 3px; height: 3px; } .__mst_extrasmall_loaderaction .__mst_loaderaction::before { top: 0px; left: 12px; width: 3px; height: 3px; } .__mst_extrasmallethik_loaderaction .__mst_loaderaction::after { bottom: 0px; left: 10px; width: 2px; height: 2px; } .__mst_extrasmallethik_loaderaction .__mst_loaderaction::before { top: 0px; left: 10px; width: 2px; height: 2px; } .__mst_extrasmallethin_loaderaction .__mst_loaderaction::after { bottom: -1px; left: 6px; width: 2px; height: 2px; } .__mst_extrasmallethin_loaderaction .__mst_loaderaction::before { top: -1px; left: 6px; width: 2px; height: 2px; } .__mst_large_loaderaction .__mst_loaderaction { border: 6px solid #f0f0f0; border-radius: 50%; border-top: 6px solid #002C77; border-bottom: 6px solid #002C77; border-left: 6px solid #002C77; width: 64px; height: 64px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite; } .__mst_medium_loaderaction .__mst_loaderaction { border: 4px solid #f0f0f0; border-radius: 50%; border-top: 4px solid #002C77; border-bottom: 4px solid #002C77; border-left: 4px solid #002C77; width: 48px; height: 48px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite; } .__mst_small_loaderaction .__mst_loaderaction { border: 4px solid #f0f0f0; border-radius: 50%; border-top: 4px solid #002C77; border-bottom: 4px solid #002C77; border-left: 4px solid #002C77; width: 32px; height: 32px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite; } .__mst_extrasmall_loaderaction .__mst_loaderaction { border: 3px solid #f0f0f0; border-radius: 50%; border-top: 3px solid #002C77; border-bottom: 3px solid #002C77; border-left: 3px solid #002C77; width: 20px; height: 20px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite; } .__mst_extrasmallethik_loaderaction .__mst_loaderaction { border: 2px solid #f0f0f0; border-radius: 50%; border-top: 2px solid #002C77; border-bottom: 2px solid #002C77; border-left: 2px solid #002C77; width: 16px; height: 16px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite; } .__mst_extrasmallethin_loaderaction .__mst_loaderaction { border: 2px solid #f0f0f0; border-radius: 50%; border-top: 2px solid #002C77; border-bottom: 2px solid #002C77; border-left: 2px solid #002C77; width: 12px; height: 12px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite; } .__mst_loader_colorchange { background: #0B41AD; padding: 15px; } .__mst_loader_colorchange .__mst_loaderaction { border: 6px solid #09348b; border-radius: 50%; border-top: 6px solid #FFFFFF; border-bottom: 6px solid #FFFFFF; border-left: 6px solid #FFFFFF; width: 64px; height: 64px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite; } /* Safari */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* */ .__mst_radiallarge_loaderaction .__mst_radial_loaderaction { border: 6px solid #f0f0f0; border-radius: 50%; border-top: 6px solid #002C77; border-bottom: 6px solid #002C77; border-left: 6px solid #002C77; width: 64px; height: 64px; -webkit-animation: spin 0.7s linear 1; /* Safari */ animation: spin 2s linear 1; } /* Safari */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spinner { to { transform: rotate(360deg); } } /* spinner & icons with buttons starts here */ .__mst_btn_spinner_xsmall { display: inline-block; content: ""; box-sizing: border-box; position: absolute; /* top: 50%; left: 50%; */ /* top: 21%; */ /* left: 35%; */ /* position: relative; */ height: 20px; width: 20px; /* margin-top: -30px; margin-left: -30px; */ border-radius: 50%; border: 0.2em solid #002C77; border-top-color: #F0F0F0; animation: spinner 0.7s linear infinite; z-index: 1; /* opacity: 0; background-color: currentColor; */ } .btn_spinner_secondary { border-color: #0B41AD; border-top-color: #F0F0F0; } .btn_spinner_grey { border-color: #666666; border-top-color: #FFFFFF; } .__mst_btn_spinner_xxsmall { display: inline-block; content: ""; box-sizing: border-box; position: absolute; /* top: 50%; left: 50%; */ /* top: 21%; */ /* left: 35%; */ /* position: relative; */ height: 16px; width: 16px; /* margin-top: -30px; margin-left: -30px; */ border-radius: 50%; border: 0.17em solid #002C77; border-top-color: #F0F0F0; animation: spinner 0.7s linear infinite; z-index: 1; /* opacity: 0; background-color: currentColor; */ } .__mst_btn_spinner_xxxsmall { display: inline-block; content: ""; box-sizing: border-box; position: absolute; /* top: 50%; left: 50%; */ /* top: 21%; */ /* left: 35%; */ /* position: relative; */ height: 12px; width: 12px; /* margin-top: -30px; margin-left: -30px; */ border-radius: 50%; border: 0.17em solid #002C77; border-top-color: #F0F0F0; animation: spinner 0.7s linear infinite; z-index: 1; /* opacity: 0; background-color: currentColor; */ } /* .__mst_btn_new { display: flex; align-items: center; font-weight: bold; text-align: center; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; z-index: -1; margin-top: 0.25rem; margin-bottom: 0.25rem; width: 168px; height: 48px; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; } */ .__mst_btn_new_outline { background-color: #FFFFFF; color: #0B41AD; border: 2px solid #0B41AD; } .__mst_btn_new_secondary { background-color: #80CEEF; color: #002C77; } .__mst_btn_new_gray { background-color: #E6E6E6; color: #666666; } .__mst_btn_new_primary { color: #002C77; background-color: #9DB3DE; } .__mst_btn_new_success { background-color: #14853D; color: #FFFFFF; } .__mst_btn_new_danger { background-color: #C53532; color: #FFFFFF; width: auto; } ._mst_btn_new_primary, .spinner-btn-text { padding-left: 27px; color: #002C77; letter-spacing: 0.27px; line-height: 23px; font-size: 18px; font-weight: 600; margin-top: 0; } .spinner-btn-texts { padding-left: 27px; color: #666666; letter-spacing: 0.27px; line-height: 23px; font-size: 18px; font-weight: 600; margin-top: 0; } .__mst_btn_medium .spinner-btn-text { padding-left: 24px; color: #002C77; letter-spacing: 0.27px; line-height: 19px; font-size: 16px; font-weight: 600; } .__mst_btn_small .spinner-btn-text { padding-left: 24px; color: #002C77; letter-spacing: 0.27px; line-height: 17px; font-size: 14px; font-weight: 600; } /* .__mst_btn_new_success, .__mst_icon_btn_text { padding-left: 6px; color: #FFFFFF; letter-spacing: 0.27px; line-height: 23px; font-size: 18px; font-weight: 600; margin-top: 0; } */ /* .__mst_btn_medium .__mst_icon_btn_text { padding-left: 6px; color: #FFFFFF; letter-spacing: 0.27px; line-height: 19px; font-size: 16px; font-weight: 600; } */ /* .__mst_btn_small .__mst_icon_btn_text { padding-left: 6px; color: #FFFFFF; letter-spacing: 0.27px; line-height: 17px; font-size: 14px; font-weight: 600; margin-top: 2px; } */ .__mst_btn_new_success .__mst_loader_sucessicon, .__mst_btn_new_danger .__mst_loader_sucessicon { color: #FFFFFF !important; font-size: 24px !important; } .__mst_btn_medium .__mst_loader_sucessicon { color: #FFFFFF !important; font-size: 20px !important; } .__mst_btn_small .__mst_loader_sucessicon { color: #FFFFFF !important; font-size: 16px !important; } .__mst_btn_medium { width: auto; /* width: 140px; */ height: 40px; font-size: 0.825rem; } .__mst_btn_small { width: auto; /* width: 115px; */ height: 32px; font-size: 0.75rem; } .__mst_spinnerimg { background-image: url(../../../../docs/assets/img/spinner1.svg); width: 100%; max-width: 100%; height: 13vh; background-repeat: no-repeat; background-size: contain; display: flex; margin: 10px auto; } .__mst_spinnerimgone { background-image: url(../../../../docs/assets/img/spinner2.svg); width: 100%; max-width: 100%; height: 19vh; background-repeat: no-repeat; background-size: contain; display: flex; margin: 10px auto; } .__mst_spinnerimgtwo { background-image: url(../../../../docs/assets/img/spinner3.svg); width: 100%; max-width: 100%; height: 15vh; background-repeat: no-repeat; background-size: contain; display: flex; margin: 10px auto; } .__mst_spinnerimgthree { background-image: url(../../../../docs/assets/img/spinner4.svg); width: 100%; max-width: 100%; height: 35vh; background-repeat: no-repeat; background-size: contain; display: flex; margin: 10px auto; } .__mst_benefitwheel { background-image: url(../../../../docs/assets/img/spinner6.svg); width: 100%; max-width: 100%; height: 50vh; background-repeat: no-repeat; background-size: contain; display: flex; margin: 10px auto; } /* spinner & icons with buttons ends here */ /* */ .__mst_lodaeralign { display: flex; align-items: center; margin: 0 auto; /* width: 60%; */ margin-bottom: 40px; } .__mst_loader_text { display: inline-flex; margin: 5px; color: #333333; font-size: 18px; font-weight: 600; line-height: 23px; padding: 0 0 0 15px; } .__mst_loader_text_small { color: #333333; font-size: 16px; font-weight: 600; line-height: 19px; padding: 0 0 0 15px; } .__mst_loader_text_thin { color: #333333; font-size: 14px; font-weight: 600; line-height: 17px; padding: 0 0 0 15px; } .__mst_loader_text_large { display: inline-flex; margin: 5px; color: #333333; font-size: 18px; line-height: 23px; padding: 0 0 0 15px; } .__mst_loader_text_small_thin { color: #333333; font-size: 16px; line-height: 19px; padding: 0 0 0 15px; } .__mst_loader_text_thik { color: #333333; font-size: 14px; line-height: 17px; padding: 0 0 0 15px; } /* radial css */ /* */ .__mst_large_progressaction .__mst_progress { width: 84px; height: 84px; background: none; position: relative; } .__mst_large_progressaction .__mst_progress::after { border: 11px solid #E6E6E6; } .__mst_large_progressaction .__mst_progress .__mst_radialprogress-bar { border-width: 11px; } /* .__mst_large_progressaction .__mst_radialprogress_counter { transform: translate(27px, 27px); } */ .__mst_large_progressaction .__mst_radialprogress_text { font-size: 18px; } /* small size */ .__mst_small_progressaction .__mst_progress { width: 48px; height: 48px; background: none; position: relative; } .__mst_small_progressaction .__mst_progress::after { border: 7px solid #E6E6E6; } .__mst_small_progressaction .__mst_progress .__mst_radialprogress-bar { border-width: 7px; } /* .__mst_small_progressaction .__mst_radialprogress_counter { transform: translate(12px, 12px); } */ .__mst_small_progressaction .__mst_radialprogress_text { font-size: 14px; } /* small size */ /* extra small size*/ .__mst_extrasmall_progressaction .__mst_progress { width: 32px; height: 32px; background: none; position: relative; } .__mst_extrasmall_progressaction .__mst_progress::after { border: 4px solid #E6E6E6; } .__mst_extrasmall_progressaction .__mst_progress .__mst_radialprogress-bar { border-width: 4px; } /* .__mst_extrasmall_progressaction .__mst_radialprogress_counter { transform: translate(6px, 4px); } */ .__mst_extrasmall_progressaction .__mst_radialprogress_text { font-size: 10px; } /* extra small size*/ .__mst_progress { width: 64px; height: 64px; background: none; position: relative; } .__mst_progress::after { content: ""; width: 100%; height: 100%; border-radius: 50%; border: 8px solid #E6E6E6; position: absolute; top: 0; left: 0; } .__mst_progress>span { width: 50%; height: 100%; overflow: hidden; position: absolute; top: 0; z-index: 1; } .__mst_progress .__mst_radialprogress-left { left: 0; } .__mst_progress .__mst_radialprogress-bar { width: 100%; height: 100%; background: none; border-width: 8px; border-style: solid; position: absolute; border-color: #002C77 !important; top: 0; } .__mst_progress .__mst_radialprogress-left .__mst_radialprogress-bar { left: 100%; border-top-right-radius: 80px; border-bottom-right-radius: 80px; border-left: 0; -webkit-transform-origin: center left; transform-origin: center left; } .__mst_progress .__mst_radialprogress-right { right: 0; } .__mst_progress .__mst_radialprogress-right .__mst_radialprogress-bar { left: -100%; border-top-left-radius: 80px; border-bottom-left-radius: 80px; border-right: 0; -webkit-transform-origin: center right; transform-origin: center right; } .__mst_progress .progress-value { position: absolute; top: 0; left: 0; } .__mst_radialprogress_counter { display: flex; align-items: center; justify-content: center; height: 100%; } .__mst_radialprogress_text { color: #666666; font-size: 16px; line-height: 28px; font-weight: 600; letter-spacing: 0px; } /* */ /* /* radial css */ @media screen and (max-width: 767px) { .__mst_spinnerimgone { height: 8vh; } .__mst_spinnerimgtwo { height: 6vh; } .__mst_spinnerimgthree { height: 16vh; } .__mst_spinnerimgone { height: 8vh; } .__mst_spinnerimg { height: 7vh; } .__mst_main_spinners { width: 100%; } .__mst_spinneranimation { display: block; } .__mst_loaderaction { margin-bottom: 20px; } .__mst_lodaeralign { align-items: normal; width: auto; } .__mst_spinneranimations { display: block; } .__mst_benefitwheel { height: 30vh; } .__mst_radialprogress_mobilealign { margin-bottom: 20px; } } /* Loader and Spinners starts here */ /*Links and Tooltips starts here */ .__mst_main_tooltip_wrapper { width: 60%; } .__mst_component-tooltipescription { padding-top: 7px; padding-bottom: 7px; padding-left: 50px; /* padding-right: 50px; */ } .__mst_component-tooltippara { font-size: 16px; letter-spacing: 0px; color: #333333; text-align: left; margin-top: 52px; margin-bottom: 0; line-height: 24px; } .__mst_component-tooltipsubpara { font-size: 16px; letter-spacing: 0px; color: #333333; text-align: left; margin-top: 2px; margin-bottom: 0; line-height: 24px; } .__mst_linkdescription { font-size: 14px; color: #666666; margin: 0; letter-spacing: 0.35px; line-height: 17px; padding: 5px 0 5px 0; } .__mst_toolotip_hyper_links { display: flex; } .__mst_tooltiplinks a.__mst_normallink { color: #0B41AD; text-decoration: underline; border: none; font-size: 16px; padding: 4px; text-underline-offset: 0px; text-decoration-style: solid; text-underline-position: under; } .__mst_tooltiplinks a.__mst_hoverlink { color: #3C67BE; text-decoration: underline; border: none; font-size: 16px; padding: 4px; text-underline-offset: 0px; text-decoration-style: solid; text-underline-position: under; } .__mst_tooltiplinks a.__mst_focuslink { color: #3C67BE; text-decoration: underline; font-size: 16px; border: 2px solid #80CEEF; padding: 2px; padding: 4px; text-underline-offset: 0px; text-decoration-style: solid; text-underline-position: under; } .__mst_tooltiplinks a.__mst_activelink { color: #3C67BE; text-decoration: underline; font-size: 16px; border: 0px solid #80CEEF; padding: 2px; background: rgb(60 103 190 / 15%); padding: 4px; text-underline-offset: 0px; text-decoration-style: solid; text-underline-position: under; } .__mst_tooltiplinks a.__mst_disabledlink { color: #999999; text-decoration: underline; font-size: 16px; border: none; cursor: not-allowed; padding: 4px; text-underline-offset: 0px; text-decoration-style: solid; text-underline-position: under; } /* mainhyperlink */ .__mst_tooltiplinks a.__mst_hyperllink { color: #0B41AD; text-decoration: underline; border: none; font-size: 16px; border: 2px solid transparent; padding: 4px; text-underline-offset: 0px; text-decoration-style: solid; text-underline-position: under; } .__mst_tooltiplinks a.__mst_hyperllink:hover { color: #3C67BE; border: 2px solid transparent; padding: 4px; text-underline-offset: 0px; text-decoration-style: solid; text-underline-position: under; } .__mst_tooltiplinks a.__mst_hyperllink:focus { color: #3C67BE; border: 2px solid #80CEEF; padding: 4px; text-underline-offset: 0px; text-decoration-style: solid; text-underline-position: under; } .__mst_tooltiplinks a.__mst_hyperllink:active { color: #3C67BE; border: 2px solid transparent; padding: 4px; text-underline-offset: 0px; text-decoration-style: solid; text-underline-position: under; background: rgb(60 103 190 / 15%); } .__mst_tooltiplinks a.__mst_hyperllink:disabled { color: #999999; } /* mainhyperlink */ /* small linsk */ .__mst_smalltooltiplinks a.__mst_normallink { color: #0B41AD; text-decoration: underline; border: none; font-size: 14px; padding: 4px; text-underline-offset: 0px; text-decoration-style: solid; text-underline-position: under; } .__mst_smalltooltiplinks a.__mst_hoverlink { color: #3C67BE; text-decoration: underline; border: none; font-size: 14px; padding: 4px; text-underline-offset: 0px; text-decoration-style: solid; text-underline-position: under; } .__mst_smalltooltiplinks a.__mst_focuslink { color: #3C67BE; text-decoration: underline; font-size: 14px; border: 2px solid #80CEEF; padding: 2px; padding: 4px; text-underline-offset: 0px; text-decoration-style: solid; text-underline-position: under; } .__mst_smalltooltiplinks a.__mst_activelink { color: #3C67BE; text-decoration: underline; font-size: 14px; border: 0px solid #80CEEF; padding: 2px; background: rgb(60 103 190 / 15%); padding: 4px; text-underline-offset: 0px; text-decoration-style: solid; text-underline-position: under; } .__mst_smalltooltiplinks a.__mst_disabledlink { color: #999999; text-decoration: underline; font-size: 14px; border: none; cursor: not-allowed; padding: 4px; text-underline-offset: 0px; text-decoration-style: solid; text-underline-position: under; } /* mainhyperlink */ .__mst_smalltooltiplinks a.__mst_hyperllink { color: #0B41AD; text-decoration: underline; border: none; font-size: 14px; border: 2px solid transparent; padding: 4px; text-underline-offset: 0px; text-decoration-style: solid; text-underline-position: under; } .__mst_smalltooltiplinks a.__mst_hyperllink:hover { color: #3C67BE; border: 2px solid transparent; padding: 4px; text-underline-offset: 0px; text-decoration-style: solid; text-underline-position: under; } .__mst_smalltooltiplinks a.__mst_hyperllink:focus { color: #3C67BE; border: 2px solid #80CEEF; padding: 4px; text-underline-offset: 0px; text-decoration-style: solid; text-underline-position: under; } .__mst_smalltooltiplinks a.__mst_hyperllink:active { color: #3C67BE; border: 2px solid transparent; padding: 4px; text-underline-offset: 0px; text-decoration-style: solid; text-underline-position: under; background: rgb(60 103 190 / 15%); } .__mst_smalltooltiplinks a.__mst_hyperllink:disabled { color: #999999; } /* mainhyperlink */ /* small links */ /* toolotip links */ .__mst_tooltip_links a.__mst_normallink { color: #0B41AD; text-decoration: underline; border: none; font-size: 16px; padding: 4px; text-underline-offset: 0px; text-decoration-style: dotted; text-underline-position: under; } .__mst_tooltip_links a.__mst_hoverlink { color: #3C67BE; text-decoration: underline; border: none; font-size: 16px; padding: 4px; text-underline-offset: 0px; text-decoration-style: dotted; text-underline-position: under; } .__mst_tooltip_links a.__mst_focuslink { color: #3C67BE; text-decoration: underline; font-size: 16px; border: 2px solid #80CEEF; padding: 2px; padding: 4px; text-underline-offset: 0px; text-decoration-style: dotted; text-underline-position: under; } .__mst_tooltip_links a.__mst_activelink { color: #3C67BE; text-decoration: underline; font-size: 16px; border: 0px solid #80CEEF; padding: 2px; background: rgb(60 103 190 / 15%); padding: 4px; text-underline-offset: 0px; text-decoration-style: dotted; text-underline-position: under; } .__mst_tooltip_links a.__mst_disabledlink { color: #999999; text-decoration: underline; font-size: 16px; border: none; cursor: not-allowed; padding: 4px; text-underline-offset: 0px; text-decoration-style: dotted; text-underline-position: under; } /* mainhyperlink */ .__mst_tooltip_links a.__mst_hyperllink { color: #0B41AD; text-decoration: underline; border: none; font-size: 16px; border: 2px solid transparent; padding: 4px; text-underline-offset: 0px; text-decoration-style: dotted; text-underline-position: under; } .__mst_tooltip_links a.__mst_hyperllink:hover { color: #3C67BE; border: 2px solid transparent; padding: 4px; text-underline-offset: 0px; text-decoration-style: dotted; text-underline-position: under; } .__mst_tooltip_links a.__mst_hyperllink:focus { color: #3C67BE; border: 2px solid #80CEEF; padding: 4px; text-underline-offset: 0px; text-decoration-style: dotted; text-underline-position: under; } .__mst_tooltip_links a.__mst_hyperllink:active { color: #3C67BE; border: 2px solid transparent; padding: 4px; text-underline-offset: 0px; text-decoration-style: dotted; text-underline-position: under; background: rgb(60 103 190 / 15%); } .__mst_tooltip_links a.__mst_hyperllink:disabled { color: #999999; } /* tooltip links */ /* tooltip icon links */ .__mst_tooltip_icon_links a { border: none; } .__mst_tooltip_icon_links a.__mst_normallink>i { color: #0B41AD; text-decoration: none; border: none; font-size: 16px; padding: 2px; } .__mst_tooltip_icon_links a.__mst_hoverlink>i { color: #3C67BE; text-decoration: none; border: none; font-size: 16px; padding: 2px; } .__mst_tooltip_icon_links a.__mst_focuslink>i { color: #3C67BE; text-decoration: none; font-size: 16px; border: 2px solid #80CEEF; padding: 2px; } .__mst_tooltip_icon_links a.__mst_activelink>i { color: #3C67BE; text-decoration: none; font-size: 16px; border: 0px solid #80CEEF; background: rgb(60 103 190 / 15%); padding: 2px; } .__mst_tooltip_icon_links a.__mst_disabledlink>i { color: #999999; text-decoration: none; font-size: 16px; border: none; cursor: not-allowed; } /* mainhyperlink */ .__mst_tooltip_icon_links a.__mst_hyperllink>i { color: #0B41AD; text-decoration: none; font-size: 16px; border: 2px solid transparent; padding: 2px; } .__mst_tooltip_icon_links a.__mst_hyperllink>i:hover { color: #3C67BE; text-decoration: none; font-size: 16px; border: 2px solid transparent; padding: 2px; } .__mst_tooltip_icon_links a.__mst_hyperllink>i:focus { color: #3C67BE; text-decoration: none; font-size: 16px; border: 2px solid #80CEEF; padding: 2px; } .__mst_tooltip_icon_links a.__mst_hyperllink>i:active { color: #3C67BE; border: 2px solid transparent; text-decoration: none; font-size: 16px; padding: 2px; background: rgb(60 103 190 / 15%); } .__mst_tooltip_icon_links a.__mst_hyperllink>i:disabled { color: #999999; } /* tooltip icon links */ .__mst_tooltip_para { margin-bottom: 30px; } .__mst_tooltipalign { display: flex; } /* large Tooltip css stats here */ #__msttolltipevent { display: none; position: absolute; left: 5%; top: 0; transform: translate(17px, -75%); z-index: 1; } .__mst_large_tooltip { width: 289px; background-color: #fff; color: #666666; border-radius: 6px; position: absolute; z-index: 10; top: -60px; left: 100%; transform: translate(15%, -3%); border: 1px solid #CCCCCC; box-shadow: 0px 0px 14px 2px rgb(0 0 0 / 12%); } .__mst_tooltip_left::before { content: " "; position: absolute; left: -22px; bottom: 50%; z-index: 10; -webkit-transform: translate(11px, 50%); -moz-transform: translate(11px, 50%); -ms-transform: translate(11px, 50%); -o-transform: translate(11px, 50%); transform: translate(11px, 50%); width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-right: 11px solid #CCCCCC; } .__mst_tooltip_left::after { content: " "; position: absolute; left: -18px; bottom: 50%; z-index: 10; -webkit-transform: translate(9px, 50%); -moz-transform: translate(9px, 50%); -ms-transform: translate(9px, 50%); -o-transform: translate(9px, 50%); transform: translate(9px, 50%); width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #FFFFFF; } .__mst_large_tooltiptext { padding: 5px 12px; background: #002C77; border-top-left-radius: 6px; border-top-right-radius: 6px; } .__mst_large_tooltip_icon { color: #FFFFFF !important; margin-right: 5px; font-size: 20px !important; } .__mst_large_tooltip_colseicon { float: right; color: white !important; font-size: 26px !important; cursor: pointer; } .__mst_large_tooltip_head { color: #FFFFFF; display: inline-block; margin-right: 10px; margin-top: 0; margin-bottom: 0; vertical-align: middle; font-size: 14px; line-height: 24px; font-weight: 600; } .__mst_large_tooltip_subtext { padding: 10px 15px; color: #666666; font-size: 12px; line-height: 18px; letter-spacing: 0.3px; } /* Large Tooltip css stats here */ /* small Tooltip css statrts here */ #__ms_small_tolltipevent { display: none; position: absolute; left: 5%; top: 0; transform: translate(17px, -75%); z-index: 1; } #__ms_small_icon_tolltipevent { display: none; position: absolute; left: 5%; top: 0; transform: translate(17px, -75%); z-index: 1; } .__mst_small_tooltip { width: 250px; background-color: #fff; color: #666666; border-radius: 6px; position: absolute; z-index: 10; top: -57px; left: 10%; transform: translate(17%, 0%); border: 1px solid #CCCCCC; box-shadow: 0px 0px 14px 2px rgb(0 0 0 / 12%); } .__mst_tooltip_left::before { content: " "; position: absolute; left: -22px; bottom: 50%; z-index: 10; -webkit-transform: translate(11px, 50%); -moz-transform: translate(11px, 50%); -ms-transform: translate(11px, 50%); -o-transform: translate(11px, 50%); transform: translate(11px, 50%); width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-right: 11px solid #CCCCCC; } .__mst_tooltip_left::after { content: " "; position: absolute; left: -18px; bottom: 50%; z-index: 10; -webkit-transform: translate(9px, 50%); -moz-transform: translate(9px, 50%); -ms-transform: translate(9px, 50%); -o-transform: translate(9px, 50%); transform: translate(9px, 50%); width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #FFFFFF; } .__mst_small_tooltiptext { padding: 5px 12px; background: #002C77; border-top-left-radius: 6px; border-top-right-radius: 6px; } .__mst_small_tooltip_icon { color: #FFFFFF !important; margin-right: 5px; font-size: 16px !important; } .__mst_small_tooltip_colseicon { float: right; color: white !important; font-size: 26px !important; cursor: pointer; } .__mst_small_tooltip_head { color: #FFFFFF; display: inline-block; margin-right: 10px; margin-top: 0; margin-bottom: 0; vertical-align: middle; font-size: 12px; line-height: 24px; font-weight: 600; letter-spacing: 0.3px; } .__mst_small_tooltip_subtext { padding: 10px 15px; color: #666666; font-size: 11px; line-height: 16px; /* letter-spacing: 0.3px; */ letter-spacing: 0.28px; } /* small Tooltip css ends here */ /* small icon Tooltip css statrts here */ #__ms_small_icon_tolltipevent { display: none; position: absolute; left: 5%; top: 0; transform: translate(17px, -75%); z-index: 1; } .__mst_small_icon_tooltip { width: 250px; background-color: #fff; color: #666666; border-radius: 6px; position: absolute; z-index: 10; top: 0; left: 10%; transform: translate(-5%, -41%); border: 1px solid #CCCCCC; box-shadow: 0px 0px 14px 2px rgb(0 0 0 / 12%); } /* small icon Tooltip css ends here */ .__mst_tooltiptype { min-height: 125px; } .__mst_main_tooltip { height: 160px; position: relative; } .__mst_tooltiptype div>.__mst_tooltip_left, .__mst_tooltiptype div>.__mst_tooltip_right, .__mst_tooltiptype div>.__mst_tooltip_top, .__mst_tooltiptype div>.__mst_tooltip_bottom { /* position: relative; left: -40px; top:0; */ margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .__mst_main_tooltip { padding: 20px 0 20px 0; } .__mst_tooltip_right::before { content: " "; position: absolute; right: -11px; bottom: 44%; transform: rotate(179deg) !important; z-index: 10; -webkit-transform: translate(11px, 50%); -moz-transform: translate(11px, 50%); -ms-transform: translate(11px, 50%); -o-transform: translate(11px, 50%); transform: translate(11px, 50%); width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-right: 11px solid #CCCCCC; } .__mst_tooltip_right::after { content: " "; position: absolute; right: -9px; bottom: 44%; transform: rotate( 179deg) !important; z-index: 10; -webkit-transform: translate(9px, 50%); -moz-transform: translate(9px, 50%); -ms-transform: translate(9px, 50%); -o-transform: translate(9px, 50%); transform: translate(9px, 50%); width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #FFFFFF; } /* __mst_tooltip_right */ /*mst_tooltip_top */ .__mst_tooltip_top::before { content: " "; position: absolute; /* right: -11px; */ /* bottom: 50%; */ transform: rotate(90deg) !important; z-index: 10; -webkit-transform: translate(11px, 50%); -moz-transform: translate(11px, 50%); -ms-transform: translate(11px, 50%); -o-transform: translate(11px, 50%); transform: translate(11px, 50%); width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-right: 11px solid #CCCCCC; right: 50%; top: -17px; } .__mst_tooltip_top::after { content: " "; position: absolute; transform: rotate(90deg) !important; z-index: 10; -webkit-transform: translate(9px, 50%); -moz-transform: translate(9px, 50%); -ms-transform: translate(9px, 50%); -o-transform: translate(9px, 50%); transform: translate(9px, 50%); width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #002C77; right: 50%; top: -14px; } /*mst_tooltip_top */ /* mst_tooltip_bottom */ .__mst_tooltip_bottom::before { content: " "; position: absolute; transform: rotate(-91deg) !important; z-index: 10; -webkit-transform: translate(11px, 50%); -moz-transform: translate(11px, 50%); -ms-transform: translate(11px, 50%); -o-transform: translate(11px, 50%); transform: translate(11px, 50%); width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-right: 11px solid #CCCCCC; right: 50%; bottom: -18px; } .__mst_tooltip_bottom::after { content: " "; position: absolute; transform: rotate(-91deg) !important; z-index: 10; -webkit-transform: translate(9px, 50%); -moz-transform: translate(9px, 50%); -ms-transform: translate(9px, 50%); -o-transform: translate(9px, 50%); transform: translate(9px, 50%); width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #FFFFFF; right: 50%; bottom: -15px; } /* mst_tooltip_bottom */ .__mst_icon_largetooltiptext { color: #002C77; font-size: 16px; } .__mst_icon_smalltooltiptext { color: #002C77; font-size: 14px; } .__mst_tooltip_icon_links a.__mst_hyperllink>i.__mst_small_tooltip_icon_icon { font-size: 14px; } .__mst_tooltipimgthree { background-image: url(../../../../docs/assets/img/tooltipicoimg.svg); width: 100%; max-width: 100%; height: 28vh; background-repeat: no-repeat; background-size: contain; } .__mst_tooltipimgfoure { background-image: url(../../../../docs/assets/img/tooltipicoimgone.svg); width: 100%; max-width: 100%; height: 17vh; background-repeat: no-repeat; background-size: contain; } .__mst_tooltipimgone { background-image: url(../../../../docs/assets/img/tooltipimg1.svg); width: 100%; max-width: 100%; height: 24vh; background-repeat: no-repeat; background-size: contain; } .__mst_tooltipimgtwo { background-image: url(../../../../docs/assets/img/tooltipimg2.svg); width: 100%; max-width: 100%; height: 24vh; background-repeat: no-repeat; background-size: contain; } .__mst_tooltipimgsix { background-image: url(../../../../docs/assets/img/tooltipimg3.svg); width: 100%; max-width: 100%; height: 21vh; background-repeat: no-repeat; background-size: contain; } .__mst_tooltip_developernote { color: #666666; font-size: 16px; } .__mst_tooltiplinks, .__mst_smalltooltiplinks, .__mst_tooltip_links { padding: 0; } .__mst_developernotes { padding-bottom: 0 !important; } .__mst_developernotestext { padding-top: 0; } .__mst_icon_tooltipalign { padding-left: 0; } /* tooltips links */ @media screen and (max-width: 767px) { .__mst_main_tooltip_wrapper { width: 100%; } .__mst_component-tooltipescription { padding-right: 50px; } .__mst_tooltipiconimg { height: 10vh; } .__mst_tooltipimgone { height: 9vh; } .__mst_tooltipimgtwo { height: 15vh; } .__mst_tooltipimgsix { height: 21vh; } .__mst_tooltipimgthree { height: 12vh; } .__mst_tooltipimgfoure { height: 7vh; } #__msttolltipevent .__mst_large_tooltip { position: absolute; left: 60%; transform: translate(-15%, -3%); } #__ms_small_tolltipevent .__mst_small_tooltip { transform: translate(-7%, 0%); } .__mst_tooltipalign { display: block; } .__mst_toolotip_hyper_links { display: block; } .__mst_tooltiplinks { padding: 10px; } } /*Links and Tooltips ends here */ /*new buttons start here*/ .__mst_btn_new { display: flex; align-items: center; justify-content: center; /* font-weight: 400; */ font-weight: 600; /* color: #212529; */ /* text-align: center; */ /* vertical-align: middle; */ /* -webkit-user-select: none; */ /* -moz-user-select: none; */ /* -ms-user-select: none; */ /* user-select: none; */ position: relative; /* top: 0; bottom: 0; right: 0; left: 0; */ /* z-index: -1; */ margin-top: 0.25rem; margin-bottom: 0.25rem; width: auto; height: 48px; /* background-color: transparent; */ border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; } .__mst_btn_new.__mst_spinner_btn_new{ justify-content: flex-start; } .__mst_btn_new.__mst_spinner_btn_new .__mst_spinner_lbl_large{ padding-left: 32px; color: #4c6da8; } .__mst_btn_new.__mst_spinner_btn_new .__mst_spinner_lbl_medium{ padding-left: 24px; color: #4c6da8; } .__mst_btn_new.__mst_spinner_btn_new .__mst_spinner_lbl_small{ padding-left: 18px; color: #4c6da8; } .__mst_btn_new.__mst_spinner_btn_new.__mst_btn_new_primary:disabled{ background-color: #CCCCCC; color: #999999; border: none; opacity: 1; box-shadow: none; cursor: not-allowed; } .__mst_btn_new.__mst_spinner_btn_new.__mst_btn_new_outline:disabled{ background-color: #FFFFFF; color: #0B41AD; border: 2px solid #0B41AD; opacity: 1; box-shadow: none; cursor: not-allowed; } .__mst_btn_new.__mst_spinner_btn_new.__mst_btn_new_secondary:disabled{ background-color: #80CEEF; color: #002C77; border: none; opacity: 1; box-shadow: none; cursor: not-allowed; } .__mst_btn_new.__mst_spinner_btn_new.__mst_btn_new_gray:disabled{ background-color: #E6E6E6; color: #666666; border: none; opacity: 1; box-shadow: none; cursor: not-allowed; } .__mst_btn_new.__mst_spinner_btn_new.__mst_btn_new_primary:disabled label, .__mst_btn_new.__mst_spinner_btn_new.__mst_btn_new_gray:disabled label, .__mst_btn_new.__mst_spinner_btn_new.__mst_btn_new_secondary:disabled label, .__mst_btn_new.__mst_spinner_btn_new.__mst_btn_new_outline:disabled label{ cursor: not-allowed; } .__mst_icon_btn_new{ display: flex; align-items: center; justify-content: center; position: relative; margin-top: 0.25rem; margin-bottom: 0.25rem; width: auto; /* height: 48px; */ border: none; padding: 0; /* font-size: 1rem; */ /* line-height: 1.5; */ border-radius: none; transition: color .15s ease-in-out; background: none; cursor: pointer; } .__mst_btn_selected{ background-color: #002C77; color: #FFFFFF; } .__mst_btn_hover{ background-color: #3C67BE; color: #FFFFFF; } .__mst_btn_hover:hover{ background-color: #3C67BE; color: #FFFFFF; } .mst_btn_focus{ outline: 1px solid #80CEEF; outline-offset: 2px; } .mst_btn_down{ background-color: #335692; color: #FFFFFF; box-shadow: 0 0 2px 4px #0b41ad33; } .mst_btn_disabled{ background-color: #CCCCCC; color: #999999; } .mst_btn_disabled:hover{ background-color: #CCCCCC; cursor: not-allowed; } .mst_btn_disabled:focus{ background-color: #CCCCCC; } .__mst_btn_new_primary.mst_btn_focus:hover{ color: #FFFFFF; background-color: #0B41AD; } .__mst_btn_selected:hover{ background-color: #002C77; color: #FFFFFF; } .mst_btn_down:hover{ background-color: #335692; color: #FFFFFF; } .__mst_btn_new_primary{ color: #FFFFFF; background-color: #0B41AD; } .__mst_btn_new_outline{ background-color: #FFFFFF; color: #0B41AD; border: 2px solid #0B41AD; } .__mst_btn_new_primary:hover, .__mst_btn_new_outline:hover, .__mst_btn_new_sky:hover, .__mst_btn_new_outline_sky:hover{ background-color: #3C67BE; color: #FFFFFF; } button.__mst_btn_new_primary:focus:not(:focus-visible), button.__mst_btn_new_outline:focus:not(:focus-visible), button.__mst_btn_new_sky:focus:not(:focus-visible), button.__mst_btn_new_outline_sky:focus:not(:focus-visible) { outline: 1px solid #80CEEF; background-color: #002C77; color: #FFFFFF; } .__mst_btn_new_primary:focus, .__mst_btn_new_outline:focus, .__mst_btn_new_sky:focus, .__mst_btn_new_outline_sky:focus{ outline: 1px solid #80CEEF; outline-offset: 2px; background-color: #002C77; color: #FFFFFF; } .__mst_btn_new_primary:active, .__mst_btn_new_outline:active, .__mst_btn_new_sky:active, .__mst_btn_new_outline_sky:active{ background-color: #335692; color: #FFFFFF; box-shadow: 0 0 2px 4px #0b41ad33; } .__mst_btn_new_primary:disabled, .__mst_btn_new_outline:disabled, .__mst_btn_new_sky:disabled, .__mst_btn_new_outline_sky:disabled{ background-color: #CCCCCC; color: #999999; } .__mst_btn_new_outline_sky{ border: 2px solid #007EB3; color: #007EB3; background-color: #FFFFFF; } .__mst_btn_new_secondary{ background-color: #80CEEF; color: #002C77; } .__mst_btn_new_gray{ background-color: #E6E6E6; color: #666666; } .__mst_btn_new_tertiary{ color: #002C77; background-color: #9DB3DE; } .__mst_btn_new_sky{ color: #002C77; background-color: #80CEEF; } .__mst_btn_new_success{ background-color: #14853D; color: #FFFFFF; } .__mst_btn_new_danger{ background-color: #C53532; color: #FFFFFF; } .__mst_btn_new .spinner-btn-text{ display: inline-block; padding-left: 1.7em; /* color: #002C77; */ } .__mst_btn_new .__mst_icon_btn_text{ display: inline-block; padding-left: 0.75rem; margin-bottom: 0; cursor: pointer; font-size: inherit; font-weight: inherit; margin-top: 0; color: inherit; line-height: 1em; } .__mst_btn_new .__mst_icon_btn_text.text_gap_small{ padding-left: 0.5rem; } .mst_btn_large{ font-size: 1.25rem; } .__mst_btn_medium{ /* width: 140px; */ height: 40px; font-size: 1rem; } .__mst_btn_small{ /* width: 115px; */ height: 32px; font-size: 0.75rem; } .__mst_icon_medium{ font-size: 24px; margin-right: 20px; color: #666666; cursor: pointer; } .__mst_icon_small{ font-size: 16px; margin-right: 16px; color: #666666; cursor: pointer; } /* ._icon_size_large{ font-size: 20px; } ._icon_size_medium{ font-size: 16px; } ._icon_size_small{ font-size: 12px; } */ .__mst_icon_medium.__mst_icon_hover{ color: #3C67BE; } .__mst_icon_medium.__mst_icon_selected{ color: #002C77; } .__mst_icon_medium.__mst_icon_selected:hover{ color: #002C77; } .__mst_icon_medium.__mst_icon_focus{ outline: 1px solid #80CEEF; outline-offset: 2px; } .__mst_icon_medium.__mst_icon_focus:hover{ color: #666666; } .__mst_icon_medium.__mst_icon_down{ color: #656071; box-shadow: 0 0 2px 4px #0b41ad33; background-color: #0b41ad33; } .__mst_icon_medium.__mst_icon_down:hover{ color: #656071; box-shadow: 0 0 2px 4px #0b41ad33; background-color: #0b41ad33; } .__mst_icon_medium.__mst_icon_disabled{ color: #CCCCCC; } .__mst_icon_medium.__mst_icon_disabled:hover{ color: #CCCCCC; cursor: not-allowed; } .__mst_icon_medium:hover, .__mst_icon_small:hover{ color: #3C67BE; background-color: unset; } button.__mst_icon_medium:focus:not(:focus-visible), button.__mst_icon_small:focus:not(:focus-visible) { outline: 1px solid #80CEEF; } .__mst_icon_medium:focus-within, .__mst_icon_small:focus-within{ color: #002C77; outline: 1px solid #80CEEF; outline-offset: 2px; background-color: unset; } .__mst_icon_medium:active, .__mst_icon_small:active{ color: #656071; box-shadow: 0 0 2px 4px #0b41ad33; background-color: #0b41ad33; } .__mst_icon_medium:disabled, .__mst_icon_small:disabled{ color: #CCCCCC; } .__mst_btn_grp_new{ display: flex; justify-content: space-between; } .__mst_btn_grp_new_right{ display: flex; justify-content: end; } .btn_grp_size{ width: 150px; margin-right: 20px; } .__mst_btn_grp_new_mobile{ display: flex; justify-content: space-between; flex-direction: column-reverse; } .__mst_btn_grp_new_right_mobile{ display: flex; justify-content: end; flex-direction: column-reverse; } .btn_grp_size_mobile{ width: 300px; } /* spinner & icons with buttons ends here */ @media screen and (max-width: 786px) { .__mst_btn_grp_new{ flex-direction: column-reverse; } .__mst_btn_grp_new_right{ flex-direction: column-reverse; } .btn_grp_size{ width: 300px; margin-right: 0; } } /*new buttons end here*/