/* Index ------------- 1.Header 2.Sidebar 3.Home 4.Banner Alignment 5.Metadata library 6.Channels, Learning path, courses and awards 7.Advance Search 8.Filter icons CSS 9.Channels Detail 10.Learning path Detail 11.Login & User Registration 12.Forgot password 13.Package List - with login 14.Package List - with out login 15.Category packages - with login 16.Category packages - with out login 17.Shopping Cart 18.User payment steps - with login 19.User payment steps - with out login 20.Billing address - with login 21.Billing address with out login 22.Review Order - with login 23.Review Order - with out login 24.Payment - with login 25.Payment - with out login 26.Confirmation 27.Confirmation - with out login 28.Redeem package popup 29.Category package details popup (info icon poup) 30.Subscribe Message popup 31.Purchase license flow popup 32.Free Subscribe Message popup 33.Purchase Order Confirmation popup 34.Terms and conditions popup 35.Cancel redeem license key confirmation popup 36.Thank you for signing up popup 37.Awards - Overview 38.Awards - Leaderboard 39.Awards - Trophy Case 40.Awards - Info popup 41.Awards - all type popups 42.Self Registration Payment Mode 43.Courses 44.My Profile 45.Change password 46.Subscription 47.Video Assessment 48.Notification 49.Learner Activity Dashboard 50.Learning Path viewer 51.Take Survey 52.Subscription 53.Expanded Profile page 54.Terms and condition Checkbox 55. Preference Check Box Common Styles New Tiles */ /* 1.Header --------------------- */ header { background: #FFFFFF; box-shadow: 0px 2px 3px rgba(32, 33, 36, 0.1); padding: 0px !important; } header.main-header.self-reg{ background: #1976d2; /* this will change the Website Masthead Color (top menu background color) Self Registration */ } .logo { height: 48px !important; } .logo img { max-height: 63px !important; } .logo img { max-width: 90%; } body { font-family: 'Inter', sans-serif !important; } nav.header-menu ul li a, .mobile-cart-login li.cart-menu a, .mobile-cart-login li.my-acnt a { color: #ffffff; /* this will change the top menu text color */ } nav.header-menu ul li a.active, nav.header-menu ul li a:hover { color: #5CB5C2; /* this will change the top menu text rollover color */ } .search-inner-blk .btn.btn-default { background: #ffffff; /* this will change the search Library background color */ color: #000000; /* this will change the search Library text color */ } .search-inner-blk .btn.btn-default:after{ border-top-color: #d4d2d2; /* this will change the search Library dropdown arrow color */ } header .input-group .form-control, .main-banner .input-group .form-control, .banner-search .input-group .form-control, .col-md-12.search-blk .form-control { background-color: #ffffff; /* this will change the search text box background color */ color: #000000; /* this will change the search text box text color */ } .search-inner-blk .input-group-btn .btn.btn-default { background-color: #FB5124; /* this will change the search icon background color */ color: #ffffff; /* this will change the search icon color */ } .search-inner-blk .input-group-btn .btn.btn-default:hover, .search-inner-blk .input-group-btn .btn.btn-default:focus { background-color: #000000; /* this will change the search icon background rollover color */ color: #ffffff; /* this will change the search icon rollover color */ outline: none; } ul li.my-acnt .hdrgt_menu ul li a { color: #222 !important; /* this will change the profile dropdown menus color */ border-bottom: 2px solid rgb(217,217,217); font-size: 14px !important; padding: 4% 0% 4% 5% !important; width: 86% !important; font-weight: 600 !important; } ul li.my-acnt .hdrgt_menu ul li:hover a, ul li.my-acnt .hdrgt_menu ul li a:hover { color: #ffffff !important; /* this will change the profile dropdown menus hover text color */ background-color: #0D6EFD; /* this will change the profile dropdown menus hover background color */ } ul li.my-acnt .hdrgt_menu ul li a.upgrd-btn{ background: #fff !important; /* this will change the upgrade button background color */ color: #333 !important; /* this will change the upgrade button text color */ border-radius: 3px !important; border: 1px solid #666 !important; margin-top: 13px !important; margin-bottom: 13px !important; } .channel-viewer-content .stripe-close-btn { right: unset !important; top: 14px !important; } ul.user-profile-menu-list li .hdrgt_menu li { margin-left: 20px !important; } ul li.my-acnt .hdrgt_menu ul li a.upgrd-btn:hover{ background: #0D6EFD !important; /* this will change the upgrade button hover background color */ color: #ffffff !important; /* this will change the upgrade button hover text color */ } .hdrgt_main .hdrgt_menulink span{ background: #FB5124; /* this will change the header profile no-image background color */ color:#ffffff; /* this will change the header profile no-image text color */ } .hdrgt_menulink:after{ border-top-color: #d4d2d2;/* this will change the header profile dropdown arrow color */ } .cr-top-menu ul.navbar-nav.page-menu { /* position: absolute; */ top: 0; left: 250px; padding: 12px; } .cr-top-menu ul.navbar-nav.page-menu li { margin-right: 15px; margin-top: 0px; } .cr-top-menu ul.navbar-nav.page-menu li a, .dropbtn { color: #202124; text-transform: uppercase; font-size: 12px; line-height: 34px; font-weight: 600; letter-spacing: 1px; } .cr-top-menu ul.navbar-nav.page-menu li a { padding: 0 16px 10px !important; } .cr-top-menu .dropdown{ margin-top:0; display:none; } .cr-user-notlogged .language-dropdown { right: 130px; top: -2px; } .cr-user-notlogged .cr-top-menu .dropbtn, .cr-page-uit-dashboard .cr-top-menu .dropbtn, .cr-page-uit-channels .cr-top-menu .dropbtn, .cr-page-uit-channels-content .cr-top-menu .dropbtn, .cr-page-uit-favorite .cr-top-menu .dropbtn, .cr-page-uit-studios .cr-top-menu .dropbtn, .lp-detail-view-enabled .lp-enroll-wrap{ display: none; } .login-register-btn { position: absolute; right: 0; top: 0; margin-top: 20px; margin-right: 20px; } .language-dropdown { position: absolute; right: 100px; top: 0; display: none; padding: 12px !important; } .custom-profile-container .user-informaction { min-height: 550px !important; } .language-dropdown span { font-size: 20px; margin-top: 9px; } .cr-top-menu nav.header-menu { clear: none; } ul.user-profile-menu-list li { margin-top: 3px; } .cr-top-menu { padding-top: 0; } .cr-top-menu header { border-bottom: 0; height: 60px; } .cr-top-menu .top-notification-lists { top: 50px; } .hdrgt_menu { top: 40px; width: 280px !important; } .top-notification-lists { width: 500px !important; } /* 2.Sidebar */ /* Old Menu */ nav.header-menu ul.navbar-nav.page-menu, .closemobilemenu{ background: #1976d2; /* this will change the "Left-nav menu" background color */ } nav.header-menu ul.navbar-nav.page-menu li a, ul.navbar-nav.page-menu li i svg, .page-menu li svg{ border-color: #1976d2; /* this will change the "Left-nav menu" border color */ color: #f1f6f8 !important; /* this will change the "Left-nav menu" icon color */ fill: #f1f6f8 !important; /* this will change only uishare the "Left-nav menu" icon color */ } nav.header-menu ul.navbar-nav.page-menu li a.active, nav.header-menu ul li a.active, nav.header-menu .navbar-nav.page-menu li a.nav-link.active { color: #ffffff !important; /* this will change the "Left-nav menu" active menu color */ background: #FB5124; /* this will change the "Left-nav menu" active menu background color */ } nav.header-menu ul.navbar-nav.page-menu li a:hover, ul.navbar-nav.page-menu li a:hover svg { color: #FB5124 !important; /* this will change the "Left-nav menu" active menu color */ fill: #FB5124 !important; /* this will change the "Left-nav menu" active menu color */ } .header-menu .navbar-nav { padding: 12px; } /* New Menu */ .mobile-menu-slide span { background: #ffffff; /* this will change the Left menu bar(three line menu) color */ } .closemobilemenu { background: #364a62; /* this will change the Left menu title background color */ color: #ffffff; /* this will change the Left menu title text color */ } .closemobilemenu span { color: #e0dddd; /* this will change the Left menu close icon color */ border-color: #e0dddd; /* this will change the Left menu close circle color */ } .main-page-inner-wrap .page-menu li a { color: #111; /* this will change the Left menu text color */ border-color: #eee;/* this will change the Left border color */ } .main-page-inner-wrap .page-menu li i, .page-menu li i svg { color: #aaa; /* this will change the Left menu icon color */ fill: #aaa;/* this will change the Left menu text and svg on hover color */ } .main-page-inner-wrap .page-menu li a.active i, .main-page-inner-wrap .page-menu li a.active, .main-page-inner-wrap .page-menu li a.active svg { color: #22a7df; /* this will change the Left menu text and icon active color */ fill: #22a7df;/* this will change the Left menu text and svg on hover color */ } .main-page-inner-wrap .page-menu li a:hover, .main-page-inner-wrap .page-menu li a:hover i, .main-page-inner-wrap .page-menu li a:hover svg { color: #22a7df; /* this will change the Left menu text and icon on hover color */ fill: #22a7df;/* this will change the Left menu text and svg on hover color */ } /* 3.Home --------------------- */ .home-tab-block .tab-tops { background: #DEE6EA; /* this will change the slide menu background color */ } .home-tab-block .tabs-menu li a.tab-link { color: #414244; /* this will change the slide menu text color */ } .home-tab-block .tabs-menu li a.tab-link:hover, .home-tab-block .tabs-menu li.current a.tab-link { color: #1976d2; /* this will change the slide menu text rollover and active color */ } .home-tab-block .tabs-menu li.current a.tab-link:after { border-color: #1976d2; /* this will change the slide menu text underline color */ } .home-tab-block .tab-tops .bx-wrapper .bx-prev::before, .home-tab-block .tab-tops .bx-wrapper .bx-next::before{ color: #414244; /* this will change the slide menu arrows color */ } .home-tab-block .tab-tops .bx-wrapper .bx-prev:hover::before, .home-tab-block .tab-tops .bx-wrapper .bx-next:hover::before{ color: #414244; /* this will change the slide menu arrows color */ } .home-slide-content h3 { color: #414244; /* this will change the slide title color */ } .slide-outer-box { background: #ffffff; /* this will change the slide content box background color */ min-width: 291px !important; max-width: 291px !important; } .result-list-view .title-col h4 a, .videosection .video-cont h4 a { color: #000000; /* this will change the slide content box text color */ } .result-list-view .title-col h4 a:hover, .videosection .video-cont h4 a:hover { color: #000000; /* this will change the slide content box text rollover color */ } body, .right-content-section { background: #f1f6f8; /* this will change the home page background color */ } .package-wrap .owl-nav div.owl-next:before, .videosection .owl-nav div.owl-next:before, .videosection .bx-wrapper .bx-next:before, .package-wrap .owl-nav div.owl-prev:before, .videosection .owl-nav div.owl-prev:before, .videosection .bx-wrapper .bx-prev:before{ background: #ffffff; /* this will change the slider arrow background color */ color: #FB5124; /* this will change the slider arrow color */ } /* 4.Banner Alignment ---------------------*/ .main-banner{ /* background-position: left top;*/ /*this will show the Standard Banner from the Left*/ background-position: right top; /*this will show the Standard Banner from the Right*/ } .banner-search{ /* background-position: left top; */ /*this will show the Full Banner from the Left*/ background-position: right top; /*this will show the Full Banner from the Right*/ } /* 5.Metadata library --------------------- */ .popup-tab-block .tab-left { background: #f1f6f8; /* this will change the metadata left column background color */ } .popup-tab-block .tab-vertical li a { color: #414244; /* this will change the metadata left column text color */ } .popup-tab-block .tab-vertical li.current, .popup-tab-block .tab-vertical li:hover { background: #1976d2; /* this will change the metadata left column text rollover and active button background color */ } .tab-vertical .current a, .tab-vertical li:hover a { color: #1976d2; /* this will change the metadata left column text rollover text color */ } .tab-left .mCSB_scrollTools .mCSB_draggerRail{ background: #999999; /* this will change the metadata left column scrollbar background color */ } .tab-left .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background: #ffffff; /* this will change the metadata left column scrollbar active scroll color */ } .tab-right .mCSB_scrollTools .mCSB_draggerRail{ background: #bbbbbb; /* this will change the metadata right column scrollbar background color */ } .tab-right .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background: #333333; /* this will change the metadata right column scrollbar active scroll color */ } .col-md-10.tab-right { background: #ffffff; /* this will change the metadata right column background color */ } .tabright-content li h3 a { color: #414244; /* this will change the metadata right column tags text color */ } .tabright-content li h3 a:hover { color: #1976d2; /* this will change the metadata right column tags rollover text color */ } .tabright-content li a { color: #414244; /* this will change the metadata right column sub tags text color */ } .tabright-content li a:hover { color: #1976d2; /* this will change the metadata right column sub tags rollover text color */ } .cls-btn a { background: #FB5124; /* this will change the metadata left column close button background color */ color: #ffffff; /* this will change the metadata left column close button text color */ } .cls-btn a:hover { background: #FB5124; /* this will change the metadata left column close button background rollover color */ color: #ffffff; /* this will change the metadata left column close button text rollover color */ } /* 6.Channels, Learning path, courses and awards --------------------- */ .language-filter .form-control.mat-form-field{ min-width: 0px !important; display: none; } .channel_bc li, .awards-section h2 { color: #202124; /* this will change the channels, learningpath, courses and awards title color */ line-height: 46px; } .chnl-tab-link { color: #222121 !important; } .tab-header > ul:after, .awards-tab-menu{ border-color: #cccccc; /* this will change the channels, learningpath, courses and awards menu border-bottom color */ } .chnl-tab-link, .awards-tab-menu li { color: #414244; /* this will change the channels, learningpath, courses and awards category title color */ } li.current .chnl-tab-link, .awards-tab-menu li.active { color: #1976d2; /* this will change the channels learningpath, courses and awards category title rollover color */ border-color : #1976d2; /* this will change the learningpath, courses and awards category title rollover border color */ } .tab-header .chnl-tab-link:hover:after, .tab-header li.current .chnl-tab-link:after { border-color: #1976d2; /* this will change the channels and learning path category title underline color */ } .sortby_main label{ color: #202124; /* this will change the sort by title color */ } .group-select button, a.sortby_menulink, a.selectall_menulink { background-color: #ffffff; /* this will change the channels and learning path Sort by filter background color */ color: #414244; /* this will change the channels and learning path Sort by filter text color */ } .group-select .dropdown-toggle:after { color: #202124; /* this will change the "Sort By - Select" arrow color */ border-top: 6px solid !important; border-right: 6px solid transparent !important; border-left: 6px solid transparent !important; margin-top: -10px !important; } .group-select .bootstrap-select.btn-group .dropdown-menu li a span.text{ color:#414244 !important; /* this will change the "Sort By - Select option" color */ } .group-select .bootstrap-select.btn-group .dropdown-menu li.selected a span.text, .group-select .bootstrap-select.btn-group .dropdown-menu li a:hover span.text{ color:#1976d2 !important; /* this will change the "Sort By - Select option" active and hover color */ } .group-select .bootstrap-select.btn-group .dropdown-menu{ background: #ffffff; /* this will change the "Sort By - Select" dropdown background color */ border-color:#FB5124; /* this will change the "Sort By - Select" dropdown border color */ } .search-form input { border-color: #FB5124; /* this will change the "Search box" border color */ color: #414244; /* this will change the "Search box" text color */ background: #ffffff; /* this will change the "Search box" background color */ } .back-category a { color: #ffffff; } .demo-version{ background: #1976d2; /* this will change the Demo message background color */ } .demo-version p { color: #ffffff; /* this will change the Demo message text color */ } .demo-version .upgrade-btn, #demo-message .upgrade-btn{ background: #FB5124; /* this will change the Demo message upgrade button background color */ border-color: #FB5124; /* this will change the Demo message upgrade button border color */ color: #ffffff; /* this will change the Demo message upgrade button text color */ } .demo-version .upgrade-btn:hover, #demo-message .upgrade-btn:hover{ background: #f1f6f8; /* this will change the Demo message upgrade button background hover color */ border-color: #f1f6f8; /* this will change the Demo message upgrade button border hover color */ color: #414244; /* this will change the Demo message upgrade button text hover color */ } #demo-message .modal-header h4{ color: #333333; /* this will change the Demo Popup title color */ } #demo-message p{ color: #3a5865; /* this will change the Demo Popup text color */ } #demo-message .modal-header .close{ color: #000000; /* this will change the Demo Popup close button color */ } #more-info-box .modal-header h4{ color: #333333; /* this will change the "Content Info" Popup title color */ } #more-info-box ul li { color: #666666; /* this will change the "Content Info" Popup list color */ } #more-info-box ul li span { color: #444444; /* this will change the "Content Info" Popup list label color */ } #more-info-box .launch-pop-wrap a{ background: #1fb9df; /* this will change the "Content Info" Popup button background color */ color: #ffffff; /* this will change the "Content Info" Popup button text color */ } #more-info-box .launch-pop-wrap a:hover{ background: #333333; /* this will change the "Content Info" Popup button hover background color */ color: #ffffff; /* this will change the "Content Info" Popup button hover text color */ } #more-info-box .tags-list li a{ background: #ececec; /* this will change the "Content Info" Popup content list background color */ color: #737373; /* this will change the "Content Info" Popup content list text color */ } .new-tail-description{ color: #454545; /* this will change the "Content Desctiption" text color */ } .lp-detail-section-list .lp-desc-more-btn{ color:#1976d2; /* this will change the "Learnig path" view more link text color */ } .lp-detail-section-list .lp-desc-more-btn:hover{ color:#1976d2; /* this will change the "Learnig path" view more link text hover color */ } #more-info-box .modal-content, #lp-certificate-message .modal-content { background: #f8fcfc; } .lp-viewer-head { background-color: #0D6EFD !important; } .slide-outer-box .video-cont-meta{ display: none !important; } /* 7.Advance Search --------------------- */ .search-sidebar-fixed { background: #f1f6f8; /* this will change the advance search left column background color */ } .search-sidebar-fixed h2.results-title { color: #414244; /* this will change the advance search left column title color */ } .filter-category h4.panel-title a { color: #222121; /* this will change the advance search metadata category text color */ } .filter-category h4.panel-title a:hover, .filter-category h4.panel-title a:focus { color: #222121; /* this will change the advance search metadata category text rollover color */ } .search-sidebar-fixed form label { color: #202124; /* this will change the advance search left column tag text color */ font-size: 14px !important; } .search-sidebar-fixed form input[type="checkbox"]:checked+label.disable, .search-sidebar-fixed form .active input[type="checkbox"] label.disable, .filter-category label.disable{ color: #d0cdcd; /* this will change the advance search left column unselected (disabled) tag text color */ } .search-sidebar-fixed form label.selected { color: #202124; /* this will change the advance search left column tag selected text color */ } .search-sidebar-fixed .btn-outline-primary { color: #ffffff; /* this will change the advance search reset button text color */ background: #FB5124; /* this will change the advance search reset button text background color */ } .search-sidebar-fixed .btn-outline-primary:hover, .search-sidebar-fixed .btn-outline-primary:focus { background: #FB5124; /* this will change the advance search reset button rollover background color */ color: #ffffff; /* this will change the advance search reset button rollover text color */ border-color: #FB5124; /* this will change the advance search reset button rollover border color */ } .grid-layout .group-select .dropdown-menu { background-color: #ffffff; /* this will change the advance search sort by & filter by content type dropdown background color */ } .grid-layout .group-select .bootstrap-select.btn-group .dropdown-menu li a span.text { color: #414244 !important; /* this will change the advance search sort by & filter by content type dropdown text color */ } .filter-scroll .mCSB_scrollTools .mCSB_draggerRail { background: #999999; /* this will change the advance search scrollbar background color */ } .filter-scroll .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background: #ffffff; /* this will change the advance search scrollbar active bar color */ } /* 8.Filter icons CSS --------------------- */ .filter-category .panel-subtitle span.active:after, .filter-category .panel-heading h4 a:after { border-left-color: #1976d2; /* this will change the advance search filter right arrow */ } .filter-category .panel-subtitle span.active.opened:after, .filter-category .panel-heading.opened h4 a:after { border-top-color: #1976d2; /* this will change the advance search filter down arrow */ } .search-sidebar-fixed form label:before { background: #ffffff; /* this will change the advance search checkbox color */ } .search-sidebar-fixed form label.selected:before { background-color: #1976d2; /* this will change the advance search checkbox selected color */ } /* 9.Channels Detail --------------------- */ .bread-crumbs-section { background: #f1f6f8; /* this will change the Channel name bar background color */ } .breadcrumb-item { color: #414244; /* this will change the Channel name bar text(Back to Channel Default) color */ } .breadcrumb-item:hover { color: #1976d2; /* this will change the Channel name bar text(Back to Channel Default) hover color */ } .breadcrumb-item.active { color: #1976d2; /* this will change the Channel name bar text(Channel name) color */ } .breadcrumb-item+.breadcrumb-item:before{ color: #414244; /* this will change the breadcrumb arrow color */ } .tab-header-detail .chnl-tab-link { color: #414244; /* this will change the Overview, Ratings, Comments, Tags menu options text color */ } .tab-header-detail .chnl-tab-link:hover:after, .tab-header-detail li.current .chnl-tab-link:after { border-color: #0D6EFD; /* this will change the Overview, Ratings, Comments, Tags menu options border color */ } .tab-header-detail li.current .chnl-tab-link, .tab-header-detail .chnl-tab-link:hover { color: #414244; /* this will change the Overview, Ratings, Comments, Tags menu options text active color */ border-color: #0D6EFD; /* this will change the Overview, Ratings, Comments, Tags menu options border color */ } .description_content, .description_content p, .description_content li, .description_short_content, .description_short_content p, .description_short_content li { color: #414244; /* this will change the Description text color */ } .sidebar-tab-heading { color: #414244; /* this will change the Breakdown text color */ } .progress-bar { background-color: #1976d2; /* this will change the progress bar color */ } .progress-text p { color: #414244; /* this will change the rating total count number color */ } .leave-comment-blk input { background: #ffffff; /* this will change the comment box background color */ } .form-control:focus { color: #414244; /* this will change the comment box text color */ } .leave-comment-blk .cmnt-btn { background: #0D6EFD; /* this will change the comment submit button background color */ color: #ffffff; /* this will change the comment submit button text color */ border-color: #0D6EFD; /* this will change the comment submit button border color */ } .leave-comment-blk .cmnt-btn:hover { background: #FB5124; /* this will change the comment submit button hover background color */ color: #ffffff; /* this will change the comment submit button hover text color */ border-color: #FB5124; /* this will change the comment submit button hover border color */ } .videosection span.viewcount { color: #9AA0A6; /* this will change the view/views text color */ font-size: 14px !important; margin-right: 20px !important; } .videosection span.viewcount span{ font-size: 14px !important; } span.viewcount.ng-star-inserted{ margin-top: -16px !important; } .user-ratings p.total-count{ color: #0D6EFD; /* this will change the Ratings count text color */ } .content-lock{ background: #FB5124; /* this will change the DEMO Lock Icon background color */ color: #ffffff; /* this will change the DEMO Lock Icon color */ } .videosection .v-name, .img-col .v-name{ background: #FB5124; /* this will change the Demo, Free label background color */ color: #ffffff; /* this will change the Demo, Free label text color */ } .videosection span.v-timing { color: #414244; /* this will change the Content Duration text color */ } .content-status-grid-overdue{ color: #f00000; /* this will change the overdue text color */ } .tags-content-inner a { background: #414244; /* this will change the Tags background color */ color: #ffffff; /* this will change the Tags text color */ } .tags-content-inner a:hover { background: #414244; /* this will change the Tags rollover background color */ color: #ffffff; /* this will change the Tags rollover text color */ } .troubleshooting-stripe { background: #1976d2; /* this will change the Content name bar background color */ } .troubleshooting-stripe .stripe-title { color: #ffffff; /* this will change the Content name bar text color */ } .stripe-close-btn { color: #ffffff; /* this will change the close button color */ } .channel-content-header .user-ratings p.total-count, .channel-content-header .viewcount { color: #414244; /* this will change the Content name bar Subscribed/View count/Rating count text color */ } .comments-content-inner .comments_actions a, .cmmnt_rply_lnk{ color: #414244; /* this will change the channels and learning path Comment Action link color */ } .comments-content-inner .comments_actions a:hover, .cmmnt_rply_lnk:hover{ color: #1976d2; /* this will change the channels and learning path Comment Action link hover color */ } .author-details span{ background: #414244; /* this will change the author background color */ color: #ffffff; /* this will change the author text color */ } #confirm-commentdelete p{ color: #454545; /* this will change the "delete comment" popup text color */ } #confirm-commentdelete .confirmdiv a.conform-print-btn{ background-color: #FB5124; /* this will change the "delete comment" popup YES button background color */ color: #ffffff; /* this will change the "delete comment" popup YES button text color */ } #confirm-commentdelete .confirmdiv a.cancel-print-btn{ background-color: #FB5124; /* this will change the "delete comment" popup No button background color */ color: #ffffff; /* this will change the "delete comment" popup No button text color */ } #confirm-commentdelete .confirmdiv a.conform-print-btn:hover{ background-color: #FB5124; /* this will change the "delete comment" popup YES button hover background color */ color: #ffffff; /* this will change the "delete comment" popup YES button hover text color */ } #confirm-commentdelete .confirmdiv a.cancel-print-btn:hover{ background-color: #FB5124; /* this will change the "delete comment" popup No button hover background color */ color: #ffffff; /* this will change the "delete comment" popup No button hover text color */ } /* 10.Learning path Detail --------------------- */ .back-button i { color: #FB5124; /* this will change the left arrow color */ } .back-button { border-color: #FB5124; /* this will change the left arrow circle color */ } .back-text { color: #212529; /* this will change the back text color */ } .lp-detail-description { background: #1976d2; /* this will change the description color */ } .lp-detail-description-wrap h1 { color: #fff; /* this will change the Learning Path title color */ } .lp-detail-description-scroll { color: #f9f9f9; /* this will change the Learning Path description color */ } .lp-detail-description-wrap .user-ratings p.total-count { color: #333; /* this will change the Ratings count text color */ } .lp-detail-view-enabled .lp-detail-description-wrap .user-ratings p.total-count { color: #fff; /* this will change the Ratings count text color */ } .lp-detail-top-section { background: #fff; /* this will change the Learning Path info box background color */ } .lp-detail-top-section li { color: #212529; /* this will change the (Section, Pieces of content, Required, Enrolled) text color */ border-color: #dee0e4; /* this will change the border right color */ } .lp-detail-top-section a.user-like-btn i { color:#868484; /* this will change the "Favorite icon" color */ } .lp-tabs-menu { border-color: #1976d2; /* this will change the tab border color */ } .brand-box.lp-last-viewed-content { background-color: #F1F6F8; /* this will change the Continue where you left off background color */ } .brand-box.lp-last-viewed-content h3 { color: #FB5124; /* this will change the Continue where you left off text color */ } .brand-box { background-color: #fff; /* this will change the section background color */ } .third-nav li { color: #212529; /* this will change the Estimate Time & Pieces of content color */ border-color: #b1b1b1; /* this will change the border left of Estimate Time & Pieces of content color */ } .lp-detail-section-content { border-color: #c8c8c8 !important; /* this will change the border color bewteen section title and content */ border-top: 1px solid #c8c8c8 !important; } .lp-detail-section-lists.lpgreybg { background: #fafafa; /* this will change the alternative background color for section content */ } .cetrify { color: #333; /* this will change the Certificate text color */ } .certificate-lock-icon i { color: #666; /* this will change the Certificate lock icon color */ } .lp-detail-inner-sec .lp-content-free, .lp-detail-inner-sec .v-name { background: #FB5124; /* this will change the LP content demo and free background color */ color: #fff; /* this will change the LP content demo and free text color */ } span.btn-info-dark { background-color: #F0B352; /* this will change LP content the reguired background color */ color: #0D0D0D; /* this will change LP content the reguired text color */ } .lp-detail-inner-sec .content-lock i { color: #FB5124; /* this will change LP lock icon color */ } .lp-content-action a.btn-resume, .lp-content-action a.btn-completed { background: none; /* this will change the backgroung color for Completed, Resume & Watch Again button color */ color: #333; /* this will change the text color for Completed, Resume & Watch Again button text color */ border-color: #333; border-radius: 4px; padding: 5px 0; } .lp-content-action a.btn-completed:hover, .lp-content-action a.btn-resume:hover { background: #0D6EFD; /* this will change the backgroung color for Completed, Resume & Watch Again button color */ color: #fff; /* this will change the text color for Completed, Resume & Watch Again color */ border-color: #0D6EFD; border-radius: 4px; padding: 5px 0; } .lp-detail-tabs .lp-tabs-menu li a { color: #414244; /* this will change the tab default text color */ } .lp-detail-view-enabled .lp-detail-tabs .lp-tabs-menu li a:hover, .lp-detail-tabs .lp-tabs-menu li a:hover { color: #0D6EFD; /* this will change the tab default text hover color */ } .lp-detail-tabs .lp-tabs-menu li a.active { border-color: #FB5124; /* this will change the active border color */ color: #FB5124; /* this will change the active text color */ background: #ffffff; /* this will change the active background color */ border-bottom: 2px solid #0D6EFD !important; } .right-content-section .prof-sub-imglp, .right-content-section .prof-sub-imgchnl { width: 130px !important; } .lp-detail-section-list h3 { color: #414244; /* this will change the section color */ } .lp-detail-section-list h3 i { color: #414244; /* this will change the section arrow color */ } .lp-detail-section-lists h4, .lp-detail-section-lists h4 a { color: #414244; /* this will change the section content name color */ margin-top: 8px !important; } .lp-detail-view-enabled .lp-detail-section-lists h4 a:hover, .lp-detail-section-lists h4 a:hover { color: #0D6EFD !important; /* this will change the section content name hover color */ } .lp-progress-bar span, .content-progress-all{ background: #dcdcdc; /* this will change the progress bar color */ } .lp-progress-bar span span, .content-progress-all span { background: #1976d2; /* this will change the progress active bar color */ } .lp-progress-bar label { color: #414244; /* this will change the viewed percentage text color */ } .lp-content-progress p{ color: #1976d2; /* this will change the "Required" text color */ } .content-required{ border-color: #dddddd; /* this will change the "Required Icon" border color */ color: #ff0000; /* this will change the "Required Icon" color */ } .content-completed{ border-color:#93da46; /* this will change the "Completed Icon" border color */ color: #93da46; /* this will change the "Completed Icon" color */ } .lp-trophy-completed{ color: #bbbbbb; /* this will change the "Certificate" text color */ } .lp-trophy-completed.lp-completed { color: #555555; /* this will change the "Certificate" text active color */ } .lp-trophy-completed i { color: #bbbbbb; /* this will change the "Certificate" trophy color */ } .lp-trophy-completed.lp-completed i { color: #ffc600; /* this will change the "Certificate" trophy active color */ } #lp-certificate-message #completionMessage{ color: #FB5124; /* this will change the Certificate completion popup header color */ } #lp-certificate-message p { color: #000; /* this will change the Certificate completion popup test color */ } .lp-content-action a { background: #ffffff; /* this will change the view button background color */ color: #0D6EFD; /* this will change the view button text color */ border-color: #0D6EFD; /* this will change the view button border color */ border-radius: 0; } .lp-content-action a:hover { background: #0D6EFD; /* this will change the view button background hover color */ color: #ffffff; /* this will change the view button text hover color */ border-color: #0D6EFD; /* this will change the view button hover border color */ } .lp-view-all-btn { background: #FB5124; /* this will change the Expand all button background color */ color: #ffffff; /* this will change the Expand all button text color */ } .lp-view-all-btn:hover { background: #FB5124; /* this will change the view all button background hover color */ color: #ffffff; /* this will change the view all button text hover color */ } .channel_bc li.last_child a{ font-weight: 600 !important; } /* Start Learning Path Detail view */ .learning-path-top-right figure{ border: 1px solid #E4E5E7 !important; box-shadow: 0px 4px 12px 2px rgb(32 33 36 / 12%) !important; border-radius: 10px !important; } span.category-tag { display: none; } span.difficulty-tag { display: none; } .learning-path-top-sec { background-color: #F2FAFF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='220%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffffff' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffffff' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffffff' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffffff' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFFFFF' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23f3faff' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23e7f6ff' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23dcf1ff' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23d0edff' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23C4E8FF' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E"); background-position: center; background-size: cover; /* this will change the top Learning path top section background color*/ border-top:4px solid #fff; } .breadcrumb-wrap li a { color: #202124; /* this will change the breadcrumb course line color */ } .breadcrumb-wrap li { color: #202124; /* this will change the breadcrumb Learning path title color */ } .custom-page-name { color: #202124; /* this will change the Course text color */ } .learning-path-top-sec h1 { color: #202124; /* this will change the Learning path title color */ font-size: 22px; margin-bottom: 20px; font-weight: 600; } .learning-path-top-description .short-description { line-height: 21px; color: #202124; font-size: 13px; } .lp-detail-description .short-description { color: #444; /* this will change the short description text color */ line-height: 22px; } .learning-path-meta-info li .custom-rating-icon svg { fill: #F7B32F; /* this will change the rating star color */ } .learning-path-meta-info li svg { fill: #202124; /* this will change the Enrolled & Updated icon color */ } .lp-detail-view-enabled .lp-detail-tabs .lp-tabs-menu li a { color: #202124; /* this will change the Overview, Course & related tab text color */ font-size: 14px; font-weight: 600; } .cr-page-channeldetail header, .cr-page-learningpath header { background: #fff !important; } .breadcrumb-wrap li span.bk-page-menu { color: #202124 !important; font-size: 12px; } .breadcrumb-wrap li span.bk-page-menu:hover { color: #888 !important; } .learning-path-meta-info li { color: #202124; /* this will change the Enrolled & Updated text color */ font-size: 13px; } .learning-path-progress-wrap { background: #e6e6e6; /* this will change the Progress bar background gray color */ } .learning-path-progress-wrap span { background: #12D440; /* this will change the Progress bar fill background color */ } .lp-video-wrap { background: #e0e4ed; /* this will change the Video background color */ } .lp-video-wrap svg { fill: #96a1ba; /* this will change the Video Play icon color */ } .lp-video-wrap:hover svg, .lp-video-wrap svg:hover { fill: #FB5124; /* this will change the Video Play icon color on hover */ } .lp-video-wrap p { color: #fff; /* this will change the "Watch a 1 minute preview" text color */ font-size: 13px; } .lp-detail-tabs .lp-tabs-menu li a { color: #868e96; /* this will change the tab text color */ height: 42px; } .lp-detail-tabs .lp-tabs-menu li a:hover { color: #FB5124; /* this will change the tab text color on hover */ } .lp-detail-view-enabled .lp-detail-tabs .lp-tabs-menu li a.active { border-color: #0D6EFD; /* this will change the tab active border color */ color: #000; /* this will change the tab active text color */ font-weight:800; } .lp-detail-view-enabled .lp-certificate-wrap .brand-box { border-color: #c8c8c8; /* this will change the Diploma of Completion border color */ background: #f7f7fa; /* this will change the Diploma of Completion background color */ padding-top: 34px !important; } .channel-content-lists .lp-detail-certificate .certificate-trophy-icon svg{ height: 32px !important; margin-top: 13px !important; } .lp-detail-view-enabled .lp-certificate-wrap .certificate-icon-wrap span.download-icon { border-color: #0D6EFD; /* this will change the Download certificate border color */ background: #0D6EFD; /* this will change the Download certificate background color */ color: #fff; /* this will change the Download certificate text color */ } .lp-detail-view-enabled .lp-detail-view-enabled .lp-certificate-wrap .certificate-icon-wrap span.email-icon { border-color: #555; /* this will change the Email certificate border color */ background: #f7f7fa; /* this will change the Email certificate background color */ color: #444; /* this will change the Email certificate text color */ padding: 3px 15px; margin-top: 3px; } .lp-detail-view-enabled .lp-certificate-wrap .certificate-icon-wrap span:hover { border-color: #0D6EFD; /* this will change the Email certificate border color on hover */ color: #fff; /* this will change the Email certificate border color on hover */ background: #0D6EFD; /* this will change the Email certificate background color on hover */ } .lp-detail-view-enabled .lp-certificate-wrap .sidebar-tab-heading { color: #4d5259; /* this will change the Rate This text color */ } .fa-globe:before { color: #fff; } .user-ratings.custom-rating-icon svg, .user-ratings.rating-icons .ratings .star-fill, .user-ratings.rating-icons .ratings.active .star-fill, .user-ratings.rating-icons .ratings.hover_active .star-unfill, .user-ratings.rating-icons span.ratings span, .certificate-outer-wrap .desc-rating .rating-icons span.ratings svg { fill: #F7B32F; /* this will change the add rate star color */ } .lp-detail-view-enabled .long-description h3, .lp-detail-view-enabled .lp-details-info h3 { color: #202124; /* this will change the Course details title color */ font-weight: 600 !important; } .lp-detail-view-enabled .long-description h1:after, .lp-detail-view-enabled .long-description h2:after, .lp-detail-view-enabled .long-description h3:after, .lp-detail-view-enabled .long-description h4:after, .lp-detail-view-enabled .long-description h5:after, .lp-detail-view-enabled .long-description h6:after, .lp-detail-view-enabled .lp-details-info h3:after { background: #0D6EFD; /* this will change the Course details title box color */ width: 13px; height: 13px; } .lp-detail-view-enabled .lp-details-info-list h5 { color: #202124; /* this will change the Difficulty Level, Langunage, Completion time, Product covered title color */ font-size: 16px !important; font-weight: 600 !important; } .lp-detail-content .lp-details-info-list p{ font-size: 12px !important; color: #5F6368 !important; } .lp-detail-view-enabled .lp-detail-icon { background: rgba(200,200,200,0.35); /* this will change the Difficulty Level, Langunage, Completion time, Product covered icon background color */ } .lp-detail-view-enabled .lp-detail-icon svg { fill: #0D6EFD; /* this will change the Difficulty Level, Langunage, Completion time, Product covered icon color */ } .lp-detail-view-enabled .lp-detail-content .long-description ul li:after { color: #FB5124; /* this will change the Description plus icon color */ } .lp-detail-view-enabled .lp-detail-tab-info{ border: 0px solid #ddd !important; box-shadow: 0px 4px 12px 2px rgb(32 33 36 / 12%) !important; } .lp-detail-view-enabled .lp-detail-tab-info h3 { color: #000000; /* this will change the Learning path title color */ font-weight: 600 !important; font-size: 16px !important; } .lp-detail-view-enabled .lp-detail-tab-info .sec-count { color: #9AA0A6; /* this will change the Learning path section text color */ } .lp-detail-view-enabled .lp-detail-tab-info .start-learn { background: #0D6EFD; /* this will change the Learning path Start, Resume background color */ padding: 10px 0; font-size: 14px; margin-bottom: 16px; text-transform: capitalize; border: 1px solid #0D6EFD; } .lp-detail-view-enabled .lp-detail-tab-info .start-learn:hover { background: #fff; /* this will change the Learning path Start, Resume background color on hover */ border: 1px solid #0D6EFD; color: #222!important; } .lp-detail-view-enabled span.start-learn.lp-completed { background: #0D6EFD; /* this will change the Learning path Completed background color */ } .lp-detail-view-enabled span.start-learn:hover { background: #555; /* this will change the Learning path Start, Resume, Completed background color */ } .lp-detail-view-enabled .lp-detail-tab-btn span { border-color: #fff; /* this will change the Learning path Share, Favorite border color */ color: #202124; /* this will change the Learning path Share, Favorite test color */ background: #fff; /* this will change the Learning path Share, Favorite background color */ font-size: 14px !important; text-transform: capitalize !important; } .lp-detail-view-enabled .lp-detail-tab-btn span.lp-share-btn:hover { border-color: #fff; /* this will change the Learning path Share border color on hover */ color: #202124; /* this will change the Learning path Share test color on hover */ background: #fff; /* this will change the Learning path Share background color on hover */ font-size: 14px !important; } .rate-corse.ng-star-inserted{ display: none !important; } .lp-detail-view-enabled .lp-detail-view-enabled .lp-detail-section-lists h4, .lp-detail-view-enabled .lp-detail-section-lists h4 a { color: #3C4043; /* this will change the Learning path content title color */ } .lp-detail-view-enabled .lp-detail-view-enabled .lp-detail-section-lists h4 a:hover { color: #0D6EFD; /* this will change the Learning path content title color on hover */ } .lp-detail-view-enabled .brand-box-top .module-count { color: #1D4E8C; /* this will change the Module text color */ } .brand-box-top .module-count { color: #0D6EFD !important; font-size: 12px !important; font-weight: 600 !important; } .lp-detail-view-enabled .brand-box.lp-last-viewed-content h3, .lp-detail-section-list h3 { color: #3C4043; /* this will change the Section title color */ font-size: 16px !important; font-weight: 600 !important; } .lp-detail-view-enabled .sec-expand-icon i { color: #0D6EFD; /* this will change the Section expand icon color */ } .lp-detail-view-enabled .lp-content-action a { background: #0D6EFD; /* this will change the Viwe button border color */ color: #ffffff; /* this will change the Viwe button text color */ border-color: #0D6EFD; border-radius: 3px; padding: 5px 0; } .lp-detail-view-enabled .lp-content-action a.btn-completed { background: #0D6EFD; /* this will change the Completed button text color */ border-color: #0D6EFD; /* this will change the Completed button text color */ color: #ffffff; /* this will change the Completed button background color */ border-radius: 3px; padding: 5px 0; } .lp-detail-view-enabled .lp-content-action a.btn-resume { background: #0D6EFD; /* this will change the Resume button background color */ color: #ffffff; /* this will change the Resume button background color */ border-color: #0D6EFD; /* this will change the Resume button background color */ border-radius: 3px; padding: 5px 0; } .lp-detail-view-enabled .lp-content-action a:hover, .lp-detail-view-enabled .lp-content-action a.btn-resume:hover, .lp-detail-view-enabled .lp-content-action a.btn-completed:hover { background: #fff; /* this will change the Viwe, Completed, button background color on hover */ color: #000; /* this will change the Viwe, Completed, button background color on hover */ border: 1px solid #000; /* this will change the Viwe, Completed, button background color on hover */ transition: all .3s ease; } .lp-detail-view-enabled .lp-content-action a.btn-resume:hover { background: #fff; /* this will change the Resume button background color on hover */ border: 1px solid #000; /* this will change the Resume button background color on hover */ color: #000; transition: all .3s ease; } .lp-detail-view-enabled .new-demo-version .upgrade-btn { background: #e8552f; /* this will change the Upgraden button background color */ border-color: #e8552f; /* this will change the Upgraden button border color */ top: 20px; width: 170px; padding: 4px; border-radius: 3px; } .lp-detail-view-enabled .new-demo-version .upgrade-btn:hover { background: #555; /* this will change the Upgraden button background color on hover */ color: #fff; /* this will change the Upgraden button text color on hover */ border-color: #555; /* this will change the Upgraden button border color on hover */ } .lp-detail-view-enabled .lp-view-all-btn { background: #fff; /* this will change the Hide all button background color */ border:1px solid #000; color: #000; } .lp-detail-view-enabled .lp-view-all-btn:hover { background: #0D6EFD; /* this will change the Hide all button background color on hover */ border:1px solid #0D6EFD; color: #fff; } .lp-detail-tab-info li { font-size: 13px; color: #5F6368; padding-left: 25px; } .lp-detail-tab-info li svg { fill: #0D6EFD; } .lp-detail-view-enabled .brand-box.lp-last-viewed-content { background-color: #F3F8FF; border: 2px solid #85B7FE !important; } .lp-detail-view-enabled a.user-like-btn.active.favorite-txt span i, .lp-detail-view-enabled a.user-like-btn.favorite-txt span:hover i { color: #0D6EFD; } .lp-detail-view-enabled .user-ratings.custom-rating-icon .content-rating-count { display: block; } .lp-detail-view-enabled .user-ratings.custom-rating-icon .total-count { display: none; } .lp-detail-view-enabled .lp-content-action .lp-progress-bar, .lp-detail-view-enabled .cr-page-learningpath .lp-content-progress, .cr-page-learningpath-viewer .lp-content-progress { display: none; } /* .lp-detail-view-enabled .learning-path-progress-per-wrap { display: none; } */ .lp-detail-view-enabled .learning-path-progress-text-wrap { display: block; } .learning-path-progress-text-wrap { color: #fff !important; } .lp-detail-view-enabled .lp-related-content .slide-outer-box { min-height: 323px !important; } .learning-path-progress-text-wrap svg { fill: #fff !important; } .cr-top-menu .viewer-section { margin-top: -60px; } .lp-section-description { float: left; width: 100%; } .lp-detail-content p { line-height: 21px; color: #3C4043 !important; font-size: 14px; } .lp-detail-content .long-description ul li { color: #333; } .slide-outer-box { background: #ffffff; /* this will change the slide content box background color */ min-width: 291px !important; max-width: 291px !important; } /* End Learning Path Detail view */ .lp-comment-img span { background: #22a7df; /* this will change the commnet user text background color */ color: #ffffff; /* this will change the commnet user text color */ } .lp-comment-text h3 { color: #000000; /* this will change the commnet user name color */ } .lp-comment-text p { color: #000000; /* this will change the commnet text color */ } .lp-comment-action label { color: #000000; /* this will change the commnet date color */ } .lp-comment-action a { color: #000000; /* this will change the commnet action button text color */ border-color: #000000; /* this will change the commnet action button border color */ } .lp-comment-action a:hover, .lp-comment-action a:focus { color: #000000; /* this will change the commnet action button text hover color */ border-color: #000000; /* this will change the commnet action button border hover color */ } .lp-comment-form label { color: #000000; /* this will change the Leave a comment text color */ } .lp-comment-form input[type="submit"], .lp-comments .comment_reply .cmnt-btn { background: #0D6EFD; /* this will change the submit button background color */ color: #ffffff; /* this will change the submit button text color */ border-color: #0D6EFD; /* this will change the submit button border color */ } .lp-comment-form input[type="submit"]:hover, .lp-comments .comment_reply .cmnt-btn:hover { background: #FB5124; /* this will change the submit button hover background color */ color: #ffffff; /* this will change the submit button hover text color */ border-color: #FB5124; /* this will change the submit button hover border color */ } .lp-comments .comment_reply a.cmmnt_delete_lnk{ background: #1976d2; /* this will change the cancel button background color */ color: #ffffff; /* this will change the cancel button text color */ border-color: #1976d2; /* this will change the cancel button border color */ } .lp-comments .comment_reply a.cmmnt_delete_lnk:hover{ background: #1976d2; /* this will change the cancel button hover background color */ color: #ffffff; /* this will change the cancel button hover text color */ border-color: #1976d2; /* this will change the cancel button hover border color */ } .lp-detail-description .circle-prog-bar svg circle{ stroke: #dcdcdc; /* this will change the content "Lp Progress Circle" color */ } .lp-detail-description .circle-prog-bar{ color: #414244; /* this will change the content "Lp Progress Circle" color */ } .wrap-file-icon-channel .circle-prog-bar{ color: #0067df; /* this will change the content "Lp Progress Circle" color */ } .wrap-file-icon-learningpath .circle-prog-bar{ color: #0D6EFD; /* this will change the content "Lp Progress Circle" color */ } .lp-viewer-title span{ color: #414244; /* this will change the content "Previous & Next" arrow color */ } .lp-viewer-title span:hover{ color: #1976d2; /* this will change the content "Previous & Next" arrow hover color */ } .expand-screen-btn{ background: #414244; /* this will change the "Hide & Show side pannel" icon background color */ color: #ffffff; /* this will change the "Hide & Show side pannel" icon color */ } .expand-screen-btn:hover{ background: #1976d2; /* this will change the "Hide & Show side pannel" icon hover background color */ color: #ffffff; /* this will change the "Hide & Show side pannel" icon hover color */ } .full-screen-wrap .exit-fill-screen, .full-screen-wrap .full-screen{ color: #1976d2; /* this will change the content "Full Screen" icon color */ } .full-screen-wrap .exit-fill-screen:hover, .full-screen-wrap .full-screen:hover{ color: #1976d2; /* this will change the content "Full Screen" icon hover color */ } .others-default-launch a{ background: #1976d2; /* this will change the SCORM "Click here to launch" button background color */ color: #ffffff; /* this will change the SCORM "Click here to launch" button text color */ } .others-default-launch a:hover{ background: #1976d2; /* this will change the SCORM "Click here to launch" button hover background color */ color: #ffffff; /* this will change the SCORM "Click here to launch" button hover text color */ } .live-labs-wrap a.launch-live-btn{ background: #1976d2; /* this will change the ZIP "Click here to download" button background color */ color: #ffffff; /* this will change the ZIP "Click here to download" button text color */ } .live-labs-wrap a.launch-live-btn:hover{ background: #1976d2; /* this will change the ZIP "Click here to download" button hover background color */ color: #ffffff; /* this will change the ZIP "Click here to download" button hover text color */ } .assessment-question { background-color: #ffffff; /* this will change the QUIZ box background color */ box-shadow: 0 0 5px #000000; /* this will change the QUIZ box box-shadow color */ } .assessment-question-top{ background-color: #209ed1; /* this will change the QUIZ header background color */ } .assessment-viewer-wrap{ background-color: #b9e4f5; /* this will change the QUIZ section background color */ } .assessment-viewer-wrap h2 { color: #333333; /* this will change the QUIZ title color */ } .assessment-viewer-wrap p { color: #444444; /* this will change the QUIZ question count text color */ } .assessment-viewer-wrap p.retake-available{ color: #444444; /* this will change the QUIZ retake available text color */ } .assessment-result-wrap{ background-color: #b9e4f5; /* this will change the QUIZ result section background color */ } .assessment-result-wrap p { color: #444444; /* this will change the QUIZ result section text color */ } .quiz-success-message{ color: #444444; /* this will change the QUIZ result section success message text color */ } .assessment-result-btn a { background-color: #1976d2; /* this will change the QUIZ-Retake button background color */ border-bottom-color:#1976d2; /* this will change the QUIZ-Retake button border color */ color:#ffffff; /* this will change the QUIZ-Retake button text color */ } .assessment-btn.assessment-begin-btn { background-color: #1976d2; /* this will change the QUIZ-Begin button background color */ border-bottom-color:#1976d2; /* this will change the QUIZ-Begin button border color */ color:#ffffff; /* this will change the QUIZ-Begin button text color */ } .assessment-btn.assessment-resume-btn { background-color: #1976d2; /* this will change the QUIZ-Resume button background color */ border-bottom-color:#1976d2; /* this will change the QUIZ-Resume button border color */ color:#ffffff; /* this will change the QUIZ-Resume button text color */ } .assessment-btn.assessment-startover-btn { background-color: #1976d2; /* this will change the QUIZ-StartOver button background color */ border-bottom-color:#1976d2; /* this will change the QUIZ-StartOver button border color */ color:#ffffff; /* this will change the QUIZ-StartOver button text color */ } span.next-question-btn, span.next-question-btn.disable-btn { background-color: #1976d2; /* this will change the QUIZ next button background color */ border-bottom-color:#1976d2; /* this will change the QUIZ next button border color */ color:#ffffff; /* this will change the QUIZ next button text color */ } span.next-question-btn.disable-btn{ opacity: 0.8; } span.pre-question-btn{ border-color:#1976d2; /* this will change the QUIZ previous button border color */ color:#1976d2; /* this will change the QUIZ previous button text color */ } .assessment-question-list .radio-button input[type=radio]:checked+label:before, .assessment-question-list .radio-button input[type=checkbox]:checked+label:before{ background-color: #1976d2; /* this will change the QUIZ Radio button 'checked' background color */ border-color: #1976d2; /* this will change the QUIZ Radio button 'checked' border color */ } .assessment-progress{ background: #caddd4; /* this will change the QUIZ progress bar background color */ } .assessment-progress-status { background: #2ccc83; /* this will change the QUIZ progress bar active background color */ } .correct-answer { background: #1976d2; /* this will change the QUIZ Correct Answer background color */ color: #ffffff; /* this will change the QUIZ Correct Answer text color */ } .no-correct-answer{ background: #e06767; /* this will change the QUIZ Wrong Answer background color */ color: #ffffff; /* this will change the QUIZ Wrong Answer text color */ } #save-quiz-popup .modal-header h4{ color: #333333; /* this will change the QUIZ Save Popup popup title color */ } #save-quiz-popup .modal-header .close { color: #1976d2; /* this will change the QUIZ Save Popup popup close icon color */ opacity: 1; /* this will change the QUIZ Save Popup popup close icon opacity */ } #save-quiz-popup .modal-header .close:hover { color: #1976d2; /* this will change the QUIZ Save Popup popup close icon hover color */ opacity: 1; /* this will change the QUIZ Save Popup popup close icon hover opacity */ } #save-quiz-popup a.save-exit{ background-color: #1976d2; /* this will change the Save Popup - Save & Exit" button background color */ color: #ffffff; /* this will change the "Save Popup - Save & Exit" button color */ } #save-quiz-popup a.exit{ background-color: #1976d2; /* this will change the "Save Popup - Exit without Saving" button background color */ color: #ffffff; /* this will change the "Save Popup - Exit without Saving" button color */ } #save-quiz-popup a.save-exit:hover{ background-color: #1976d2; /* this will change the Save Popup - Save & Exit" button hover background color */ color: #ffffff; /* this will change the "Save Popup - Save & Exit" button hover color */ } #save-quiz-popup a.exit:hover{ background-color: #1976d2; /* this will change the "Save Popup - Exit without Saving" button hover background color */ color: #ffffff; /* this will change the "Save Popup - Exit without Saving" button hover color */ } .submission-icons span{ color: #1976d2; /* this will change the VIDEO ASSESSMENT 'Record a video & Upload a file' icon color */ } .submission-icons span .labletext { color: #1976d2; /* this will change the VIDEO ASSESSMENT 'Record a video & Upload a file' text color */ } .submission-form .text-area-outer { border-color:#b7b6b6; /* this will change the VIDEO ASSESSMENT comment textarea border color */ } .submission-form textarea { color: #5f5f5f; /* this will change the VIDEO ASSESSMENT comment textarea text color */ } .submission-form .saveanswer{ background:#1976d2; /* this will change the VIDEO ASSESSMENT save answer button background color */ color:#ffffff; /* this will change the VIDEO ASSESSMENT save answer button color */ } .submission-form .submit-btn{ background:#1976d2; /* this will change the VIDEO ASSESSMENT submit button background color */ color:#ffffff; /* this will change the VIDEO ASSESSMENT submit button color */ } .submission-form .saveanswer:hover{ background:#1976d2; /* this will change the VIDEO ASSESSMENT save answer button hover background color */ color:#ffffff; /* this will change the VIDEO ASSESSMENT save answer button hover color */ } .submission-form .submit-btn:hover{ background:#1976d2; /* this will change the VIDEO ASSESSMENT submit button hover background color */ color:#ffffff; /* this will change the VIDEO ASSESSMENT submit button hover color */ } .submitedlist p span.download-icon, .submitedlist p.viewvideocomment { color: #807e7e; /* this will change the VIDEO ASSESSMENT uploaded file text color */ } .submitedlist p span.download-icon:hover, .submitedlist p.viewvideocomment:hover { color: #1976d2 !important; /* this will change the VIDEO ASSESSMENT uploaded file hover text color */ } .remove-files { color: #807e7e !important; /* this will change the VIDEO ASSESSMENT uploaded file remove icon color */ } .remove-files:hover { color: #22a7df !important; /* this will change the VIDEO ASSESSMENT uploaded file hover remove icon color */ } #confirmSubmit p { color: #555555; /* this will change the VIDEO ASSESSMENT confirm submit popup text color */ } #confirmSubmit .modal-body a{ color: #ffffff; /* this will change the VIDEO ASSESSMENT confirm submit popup button color */ background: #FB5124; /* this will change the VIDEO ASSESSMENT confirm submit popup button background color */ } #confirmSubmit .modal-body a:hover{ color: #ffffff; /* this will change the VIDEO ASSESSMENT confirm submit popup button hover text color */ background: #FB5124; /* this will change the VIDEO ASSESSMENT confirm submit popup button hover background color */ } .lp-detail-tabs .tab-content h3{ color:#828181; /* this will change the VIDEO ASSESSMENT Grading Criteria title color */ } .lp-detail-tabs .tab-content ul li span { color: #1976d2; /* this will change the VIDEO ASSESSMENT Grading Criteria point's text color */ } .lp-detail-tabs .tab-content ul li { color: #828181; /* this will change the VIDEO ASSESSMENT Grading Criteria point description text color */ } .lp-detail-tabs .tab-content .dropdown-menu p { color: #828181; /* this will change the VIDEO ASSESSMENT Grading Criteria's popup description text color */ } p.submitedon{ color:#555555; /* this will change the VIDEO ASSESSMENT "Submitted" date text color */ } p.viewvideocomment i { color: #1976d2; /* this will change the VIDEO ASSESSMENT video comments file icon color */ } /* 11.Login & User Registration --------------------- */ .user-language{ color: #ffffff; /* this will change the language selectbox label text color */ } .login-wrap h1{ color: #000; /* this will change the title color */ } .login-wrap label{ color: #000; /* this will change the lable text color */ } .login-wrap .field-wrap input, .login-wrap .field-wrap .select_box select{ background: #ffffff; /* this will change the input-field background-color */ color: #000000; /* this will change the input-field text color */ border-color:#bbbbbb; /* this will change the input-field border color */ } .login-wrap .forgot-password{ color: #000; /* this will change the "Forgot Password?" text color */ } .login-wrap .forgot-password:hover { color: #0D6EFD; /* this will change the "Forgot Password?" hover text color */ } .login-wrap .login-btn{ background: #0D6EFD; /* this will change the Signup & Login button background-color */ color: #ffffff; /* this will change the Signup & Login button text color */ } .login-wrap .login-btn:hover{ background: #414244; /* this will change the Signup & Login button hover background-color */ color: #ffffff; /* this will change the Signup & Login button hover text color */ } .login-page-wrap.registeration-page-wrap .reset-btn-wrap a { color: #ffffff; /* this will change the BackToLogin button text color */ } .login-page-wrap.registeration-page-wrap .reset-btn-wrap a:hover { color: #ffffff; /* this will change the BackToLogin button hover text color */ } .login-wrap .registeration-link{ color: #000; /* this will change the "New user? Sign up & Purchase License Flow" text color */ } .login-wrap .registeration-link:hover { color: #0D6EFD; /* this will change the "New user? Sign up & Purchase License Flow" hover text color */ } .login-default-msg{ color: #000; /* this will change the "Login description" text color */ } .cancel-license-wrap span { color: #1976d2; /* this will change the "Cancel license purchase" text color */ } .cancel-license-wrap span:hover { color: #ffffff; /* this will change the "Cancel license purchase" text hover color */ } .terms-condition-wrap p{ color: #000; /* this will change the "Powered by Content Raven" text color */ } .terms-condition-wrap a{ color: #000; /* this will change the "Terms & Conditions" text color */ } .terms-condition-wrap a:hover{ color: #0D6EFD; /* this will change the "Terms & Conditions" hover text color */ } .back-login a{ color: #ffffff; /* this will change the "Back To Login" text color */ } .text-valid, .login-page-wrap.registeration-page-wrap .error_msg{ color: #ffffff; /* this will change the error text color - bellow each required input field */ } .login-alert-message { color: #000000; /* this will change the alert message color (popup) */ } #logout-alert .pay-update-cart a{ background: #0D6EFD; /* this will change the alert message button background color (logout popup) */ color: #ffffff; /* this will change the alert message button text color (logout popup) */ } #logout-alert .pay-update-cart a:hover{ background: #0D6EFD; /* this will change the alert message button hover background color (logout popup) */ color: #ffffff; /* this will change the alert message button hover text color (logout popup) */ } #logout-alert .modal-header .close{ color: #454545; /* this will change the alert message close icon (logout popup) */ } .login-results-fail, .login-results p.error{ color: #f00000; /* this will change the error message text color - (The user name or password is incorrect) */ background: #ffffff; /* this will change the error message background color - (The user name or password is incorrect) */ border-color:#ffffff; /* this will change the error message border color - (The user name or password is incorrect) */ } /* 12.Forgot password --------------------- */ #forgot-password .modal-header h4{ color: #333333; /* this will change the "Forgot password - popup" Title text color */ } #forgot-password .field-wrap label{ color: #000000; /* this will change the "Forgot password - popup" Primary Email Address lable text color */ } #forgot-password .feedback-form .field-wrap input{ border-color:#bbbbbb; /* this will change the "Forgot password - popup" input border color */ color:#55595c; /* this will change the "Forgot password - popup" input text color */ background: #ffffff; /* this will change the "Forgot password - popup" input background color */ } #forgot-password .forgot-pass-btn{ background: #FB5124; /* this will change the "Forgot password - popup" Send button background color */ color: #ffffff; /* this will change the "Forgot password - popup" Send button text color */ } #forgot-password .forgot-pass-btn:hover{ background: #FB5124; /* this will change the "Forgot password - popup" Send button hover background color */ color: #ffffff; /* this will change the "Forgot password - popup" Send button hover text color */ } #forgot-password .forgot-pass-btn.close { background: #FB5124; /* this will change the "Forgot password - popup" Cancel button background color */ color: #ffffff; /* this will change the "Forgot password - popup" Cancel button text color */ } #forgot-password .forgot-pass-btn.close:hover { background: #FB5124; /* this will change the "Forgot password - popup" Cancel button hover background color */ color: #ffffff; /* this will change the "Forgot password - popup" Cancel button hover text color */ } /* 13.Package List - with login --------------------- */ .package-heading h2 { color: #26313f; /* this will change the package header title color */ } .package-filter .sortby_main label { color: #666666; /* this will change the sort by title color */ } .package-filter .group-select button{ background-color: #ffffff; /* this will change the "Sort By" button background color */ color: #22a7df !important; /* this will change the "Sort By" button text color */ } .package-filter .group-select .bootstrap-select.btn-group .dropdown-menu { border-color: #cccccc; /* this will change the "Sort By" dropdown border color */ background: #ffffff; /* this will change the "Sort By" dropdown background color */ } .package-filter .group-select .bootstrap-select.btn-group .dropdown-menu li a span.text { color: #22a7df !important; /* this will change the "Sort By" dropdown text color */ } .package-filter .group-select .bootstrap-select.btn-group .dropdown-menu li.selected a span.text, .package-filter .group-select .bootstrap-select.btn-group .dropdown-menu li a:hover span.text { color: #22a7df !important; /* this will change the "Sort By" dropdown active text color */ } .package-filter .date-range-form input.form-control, .package-filter .search-inner-blk input.form-control{ background: #ffffff; /* this will change the "Sort By" From To Date background color */ color: #454545; /* this will change the "Sort By" From To Date color */ } .date-range-form span.clear-date { color: #22a7df; /* this will change the clear date text color */ } .package-slide-wrap { background: #ffffff; /* this will change the package list background color */ } .package-slide-wrap:hover { border-color: #8dd5f3; /* this will change the package list hover border color */ } .package-slide-wrap h3 { color: #444444; /* this will change the package name color */ background: #f2f3f6; /* this will change the package name background color */ } .package-slide-wrap:hover h3 { color: #22a7df; /* this will change the package hover name color */ } .package-slide-wrap .package-price { color: #444444; /* this will change the package cost color */ } .package-slide-wrap .package-desc { color: #000000; /* this will change the package description color */ } .package-days-top p span, .package-start-wrap .package-days span { color: #000000; /* this will change the package access/duration label text color */ } .package-days-top { color: #000000; /* this will change the package access/duration text color */ } .package-slide-wrap .package-start { background: #22a7df; /* this will change the package add to cart/Subscribe button background color */ color: #ffffff; /* this will change the package add to cart/Subscribe button text color */ } .package-slide-wrap .package-start:hover { background: #666666; /* this will change the package add to cart/Subscribe button background hover color */ color: #ffffff; /* this will change the package add to cart/Subscribe button text hover color */ } .package-wrap .owl-dot { background: #ffffff; /* this will change the package bottom circle background color */ border-color: #22a7df; /* this will change the package bottom circle border color */ } .package-wrap .owl-dot.active { background: #22a7df; /* this will change the package bottom active background color */ } .redeem-license a { color: #00a9e4; /* this will change the package bottom purchase license text color */ } .redeem-license a:hover { color: #333333; /* this will change the package bottom purchase license text hover color */ } .cart-items-package h4{ color: #0db90d; /*this will change the package top ordered list "Added in cart" text color */ } .cart-items-package{ background: #ffffff; /*this will change the package top ordered list "Added in cart" box background color */ border-color: #c1c4c5; /*this will change the package top ordered list "Added in cart" box border color */ } .cart-items-package .cart-item-title p.cart-title{ color: #000000; /*this will change the package top ordered list package title text color */ } .cart-items-package button.close{ color: #888d90; /*this will change the package top ordered list close icon color */ opacity: 1; /*this will change the package top ordered list close icon opacity */ } .cart-items-package button.close:hover{ color: #22a7df; /*this will change the package top ordered list close icon hover color */ } .cart-items-package .cart-item-title p.cart-title-amt{ color: #000000; /*this will change the package top ordered list package amount text color */ } .cart-item-total p.order-sum{ color: #000000; /*this will change the package top ordered list package subtotal text color */ } .cart-item-total p.order-item{ color: #000000; /*this will change the package top ordered list package count text color */ } .cart-item-total p.order-item span{ color: #22a7df; /*this will change the package top ordered list package count color */ } .cart-item-btn .edit-cart-btn{ color: #22a7df; /*this will change the package top ordered list "Edit your cart" text color */ background: #ffffff; /*this will change the package top ordered list "Edit your cart" text background color */ border-color:#22a7df; /*this will change the package top ordered list "Edit your cart" text border color */ } .cart-item-btn .proceed-cart-btn{ color: #ffffff; /*this will change the package top ordered list "Proceed to Checkout" text color */ background: #22a7df; /*this will change the package top ordered list "Proceed to Checkout" text background color */ border-color:#22a7df; /*this will change the package top ordered list "Proceed to Checkout" text border color */ } .cart-item-btn .edit-cart-btn:hover{ color: #ffffff; /*this will change the package top ordered list "Edit your cart" hover text color */ background: #000000; /*this will change the package top ordered list "Edit your cart" hover text background color */ border-color:#000000; /*this will change the package top ordered list "Edit your cart" hover text border color */ } .cart-item-btn .proceed-cart-btn:hover{ color: #ffffff; /*this will change the package top ordered list "Proceed to Checkout" hover text color */ background: #000000; /*this will change the package top ordered list "Proceed to Checkout" hover text background color */ border-color:#000000; /*this will change the package top ordered list "Proceed to Checkout" hover text border color */ } .nopackages-available { color: #d0cdcd; /*this will change the "No package available" text color */ } .package-purchase{ border-top-color:#83c339; /*this will change the "Purchased Tick icon" background color */ color:#ffffff; /*this will change the "Purchased Tick icon" color */ } /* 14.Package List - with out login --------------------- */ .user-package-section .package-heading h2 { color: #ffffff; /* this will change the package header title color */ } .user-package-section .package-filter .sortby_main label { color: #666666; /* this will change the sort by title color */ } .user-package-section .package-filter .group-select button{ background-color: #ffffff; /* this will change the "Sort By" button background color */ color: #22a7df !important; /* this will change the "Sort By" button text color */ } .user-package-section .package-filter .group-select .bootstrap-select.btn-group .dropdown-menu { border-color: #cccccc; /* this will change the "Sort By" dropdown border color */ background: #ffffff; /* this will change the "Sort By" dropdown background color */ } .user-package-section .package-filter .group-select .bootstrap-select.btn-group .dropdown-menu li a span.text { color: #22a7df !important; /* this will change the "Sort By" dropdown text color */ } .user-package-section .package-filter .group-select .bootstrap-select.btn-group .dropdown-menu li.selected a span.text, .user-package-section .package-filter .group-select .bootstrap-select.btn-group .dropdown-menu li a:hover span.text { color: #22a7df !important; /* this will change the "Sort By" dropdown active text color */ } .user-package-section .package-filter .date-range-form input.form-control, .user-package-section .package-filter .search-inner-blk input.form-control{ background: #ffffff; /* this will change the "Sort By" From To Date background color */ color: #454545; /* this will change the "Sort By" From To Date color */ } .user-package-section .date-range-form span.clear-date { color: #22a7df; /* this will change the clear date text color */ } .user-package-section .package-slide-wrap { background: #ffffff; /* this will change the package list background color */ } .user-package-section .package-slide-wrap:hover { border-color: #8dd5f3; /* this will change the package list hover border color */ } .user-package-section .package-slide-wrap h3 { color: #444444; /* this will change the package name color */ background: #f2f3f6; /* this will change the package name background color */ } .user-package-section .package-slide-wrap:hover h3 { color: #22a7df; /* this will change the package hover name color */ } .user-package-section .package-slide-wrap .package-price { color: #444444; /* this will change the package cost color */ } .user-package-section .package-slide-wrap .package-desc { color: #000000; /* this will change the package description color */ } .user-package-section .package-days-top p span, .user-package-section .package-start-wrap .package-days span { color: #000000; /* this will change the package access/duration label text color */ } .user-package-section .package-days-top { color: #000000; /* this will change the package access/duration text color */ } .user-package-section .package-slide-wrap .package-start { background: #22a7df; /* this will change the package add to cart/Subscribe button background color */ color: #ffffff; /* this will change the package add to cart/Subscribe button text color */ } .user-package-section .package-slide-wrap .package-start:hover { background: #000000; /* this will change the package add to cart/Subscribe button background hover color */ color: #ffffff; /* this will change the package add to cart/Subscribe button text hover color */ } .user-package-section .package-wrap .owl-dot { background: #ffffff; /* this will change the package bottom circle background color */ border-color: #22a7df; /* this will change the package bottom circle border color */ } .user-package-section .package-wrap .owl-dot.active { background: #22a7df; /* this will change the package bottom active background color */ } .user-package-section .redeem-license a { color: #00a9e4; /* this will change the package bottom purchase license text color (Received a License Key? Click Here) */ } .user-package-section .redeem-license a:hover { color: #333333; /* this will change the package bottom purchase license text hover color (Received a License Key? Click Here) */ } .user-package-section .cart-items-package h4{ color: #0db90d; /*this will change the package top ordered list "Added in cart" text color */ } .user-package-section .cart-items-package{ background: #ffffff; /*this will change the package top ordered list "Added in cart" box background color */ border-color: #c1c4c5; /*this will change the package top ordered list "Added in cart" box border color */ } .user-package-section .cart-items-package .cart-item-title p.cart-title{ color: #333333; /*this will change the package top ordered list package title text color */ } .user-package-section .cart-items-package button.close{ color: #888d90; /*this will change the package top ordered list close icon color */ opacity: 1; /*this will change the package top ordered list close icon opacity */ } .user-package-section .cart-items-package button.close:hover{ color: #22a7df; /*this will change the package top ordered list close icon hover color */ } .user-package-section .cart-items-package .cart-item-title p.cart-title-amt{ color: #000000; /*this will change the package top ordered list package amount text color */ } .user-package-section .cart-item-total p.order-sum{ color: #000000; /*this will change the package top ordered list package subtotal text color */ } .user-package-section .cart-item-total p.order-item{ color: #000000; /*this will change the package top ordered list package count text color */ } .user-package-section .cart-item-total p.order-item span{ color: #22a7df; /*this will change the package top ordered list package count color */ } .user-package-section .cart-item-btn .edit-cart-btn{ color: #22a7df; /*this will change the package top ordered list "Edit your cart" text color */ background: #ffffff; /*this will change the package top ordered list "Edit your cart" text background color */ border-color:#22a7df; /*this will change the package top ordered list "Edit your cart" text border color */ } .user-package-section .cart-item-btn .proceed-cart-btn{ color: #ffffff; /*this will change the package top ordered list "Proceed to Checkout" text color */ background: #22a7df; /*this will change the package top ordered list "Proceed to Checkout" text background color */ border-color:#22a7df; /*this will change the package top ordered list "Proceed to Checkout" text border color */ } .user-package-section .cart-item-btn .edit-cart-btn:hover{ color: #ffffff; /*this will change the package top ordered list "Edit your cart" hover text color */ background: #000000; /*this will change the package top ordered list "Edit your cart" hover text background color */ border-color:#000000; /*this will change the package top ordered list "Edit your cart" hover text border color */ } .user-package-section .cart-item-btn .proceed-cart-btn:hover{ color: #ffffff; /*this will change the package top ordered list "Proceed to Checkout" hover text color */ background: #000000; /*this will change the package top ordered list "Proceed to Checkout" hover text background color */ border-color:#000000; /*this will change the package top ordered list "Proceed to Checkout" hover text border color */ } .user-package-section .nopackages-available { color: #d0cdcd; /*this will change the "No package available" text color */ } .user-package-section .package-purchase{ border-top-color:#22a7df; /*this will change the "Purchased Tick icon" background color */ color:#ffffff; /*this will change the "Purchased Tick icon" color */ } /* 15.Category packages - with login --------------------- */ .find-your-paths h2 { color: #000000; /* this will change the category text color */ } .find-your-paths .cat-desc{ color: #444444; /* this will change the category description color */ } .find-your-paths .close-your-path{ color: #444444; /* this will change the category package list close icon color */ } .path-list { background: #ffffff; /* this will change the category package list background color */ } .path-list-left > h3 { color: #000000; /* this will change the category package title text color */ background: #dee0e9; /* this will change the category package title background color */ } .paths-lists h3 span.p-cost{ color: #22a7df; /* this will change the category package cost text color */ } .paths-lists h3 span.p-name label{ color: #000000; /* this will change the category package course start and end date text color */ } .path-list-package-content { color: #000000; /* this will change the category package description text color */ } .path-list-content .desc-tags h4, .list-package-tags h3 { color: #000000; /* this will change the category package channel/learning path/subscription title text color */ } .list-package-tags li { background: #999999; /* this will change the category package channel/learning path tag background color */ color: #ffffff; /* this will change the category package channel/learning path tag text color */ } .list-package-tags.purchase-packages .tags-list li:hover { background: #666666; /* this will change the category package channel/learning path tag background hover color */ } .path-list .view-more-btn { color: #22a7df; /* this will change the category package view more/view less text color */ } .path-list a.get-started-btn{ color: #ffffff; /* this will change the category package "Add To Cart" button text color */ background-color: #22a7df; /* this will change the category package "Add To Cart" button background color */ } .path-list a.get-started-btn:hover{ color: #ffffff; /* this will change the category package "Add To Cart" button hover text color */ background-color: #000000; /* this will change the category package "Add To Cart" button hover background color */ } .path-list .view-more-btn:hover { color: #d0cdcd; /* this will change the category package view more/view less text hover color */ } .subscription-list li, .long-desc-wrap { color: #000000; /* this will change the category package subscription list text color */ } .subscription-list li span, span.desc-label{ color: #000000; /* this will change the category package subscription list label text color */ } .add-cart-txt{ color: #22a7df; /* this will change the "Added in cart" text color */ } /* 16.Category packages - with out login --------------------- */ .user-package-section .find-your-paths h2 { color: #ffffff; /* this will change the category text color */ } .user-package-section .find-your-paths .cat-desc{ color: #ffffff; /* this will change the category description color */ } .user-package-section .find-your-paths .close-your-path{ color: #ffffff; /* this will change the category package list close icon color */ } .user-package-section .path-list { background: #ffffff; /* this will change the category package list background color */ } .user-package-section .path-list-left > h3 { color: #000000; /* this will change the category package title text color */ background: #dee0e9; /* this will change the category package title background color */ } .user-package-section .paths-lists h3 span.p-cost{ color: #22a7df; /* this will change the category package cost text color */ } .user-package-section .paths-lists h3 span.p-name label{ color: #000000; /* this will change the category package course start and end date text color */ } .user-package-section .path-list-package-content { color: #000000; /* this will change the category package description text color */ } .user-package-section .path-list-content .desc-tags h4 { color: #ffffff; /* this will change the category package channel/learning path/subscription title text color */ } .user-package-section .list-package-tags h3 { color: #000000; /* this will change the category package channel/learning path/subscription title text color */ } .user-package-section .list-package-tags li { background: #999999; /* this will change the category package channel/learning path tag background color */ color: #ffffff; /* this will change the category package channel/learning path tag text color */ } .user-package-section .list-package-tags.purchase-packages .tags-list li:hover { background: #666666; /* this will change the category package channel/learning path tag background hover color */ } .user-package-section .path-list .view-more-btn { color: #22a7df; /* this will change the category package view more/view less text color */ } .user-package-section .path-list a.get-started-btn{ color: #ffffff; /* this will change the category package "Add To Cart" button text color */ background-color: #22a7df; /* this will change the category package "Add To Cart" button background color */ } .user-package-section .path-list a.get-started-btn:hover{ color: #ffffff; /* this will change the category package "Add To Cart" button hover text color */ background-color: #000000; /* this will change the category package "Add To Cart" button hover background color */ } .user-package-section .path-list .view-more-btn:hover { color: #d0cdcd; /* this will change the category package view more/view less text hover color */ } .user-package-section .subscription-list li, .user-package-section .long-desc-wrap { color: #000000; /* this will change the category package subscription list text color */ } .user-package-section .subscription-list li span, .user-package-section span.desc-label { color: #000000; /* this will change the category package subscription list label text color */ } .user-package-section .back-login a{ color: #ffffff; /* this will change the back to login text color */ } .user-package-section .back-login a:hover{ color: #ffffff; /* this will change the back to login hover text color */ } .user-package-section .add-cart-txt{ color: #22a7df; /* this will change the "Added in cart" text color */ } /* 17.Shopping Cart --------------------- */ li.cart-menu a.nav-link, li.cart-menu a.nav-link:hover{ color:#353c4a; /* this will change the cart icon color */ } li.cart-menu a.nav-link span.spnCartCount{ background: #22a7df; /* this will change the cart count background color */ color: #ffffff; /* this will change the cart count text color */ } .cart-header-section h2 { color: #22a7df; /* this will change the shopping cart text color */ } .user-view-cart .cart-header-section h2{ color: #ffffff; /* this will change the shopping cart text color (with out login) */ } .cart-empty-msg{ color: #000000; /* this will change the shopping cart empty message text color */ } .cart-empty-msg a{ color: #22a7df; /* this will change the shopping cart empty message "Click Here" link text color */ } .user-package-section .cart-empty-msg{ color: #ffffff; /* this will change the shopping cart empty message text color (with out login) */ } .user-package-section .cart-empty-msg a{ color: #d0cdcd; /* this will change the shopping cart empty message "Click Here" link text color (with out login) */ } .checkout-lists { background: #ffffff; /* this will change the shopping cart package list background color */ color: #000000; /* this will change the shopping cart package list text color */ } .total-checkout-bar { background: #ffffff; /* this will change the total cart background color */ } .total-checkout-bar h3 { color: #000000; /* this will change the order summary text color */ } .total-checkout-bar .total-price-list p, .total-checkout-bar .total-qty { color: #000000; /* this will change the Total Qty 1 Items/Sub-Total/Total text color */ } .total-checkout-bar .total-price-list .pay-update-cart a { color: #ffffff; /* this will change the Checkout button text color */ background: #22a7df; /* this will change the Checkout button background color */ } .total-checkout-bar .total-price-list .pay-update-cart a:hover { color: #ffffff; /* this will change the Checkout button hover text color */ background: #666666; /* this will change the Checkout button background hover color */ } .total-checkout-bar .total-price-list .pay-update-cart a:first-child { color: #ffffff; /* this will change the Continue Shopping button text color */ background: #22a7df; /* this will change the Continue Shopping button background color */ } .total-checkout-bar .total-price-list .pay-update-cart a:first-child:hover { color: #ffffff; /* this will change the Continue Shopping button hover text color */ background: #666666; /* this will change the Continue Shopping button background hover color */ } /* 18.User payment steps - with login --------------------- */ .payment-steps li { color: #b5b8b9; /* this will change the payment step text color */ } .payment-steps li .step-count { color: #333333; /* this will change the payment step count text color */ background: #ffffff; /* this will change the payment step background color */ border-color: #dddddd; /* this will change the payment step border color */ } .payment-steps li.active .step-count{ color: #ffffff /* this will change the payment step count text color */ } .payment-steps li.active { color: #333333; /* this will change the payment step count text color */ } .payment-steps li.active span { background: #6ec159; /* this will change the payment step count background color */ border-color: #6ec159; /* this will change the payment step count border color */ } .last-step:after, .step-line:before, .step-line:after { background: #dddddd; /* this will change the payment step line color */ } #button-pay, .payment-user-info-wrap span.next-step { background: #22a7df; /* this will change the review order button background color */ color: #ffffff; /* this will change the review order button text color */ } #button-pay:hover, .payment-user-info-wrap span.next-step:hover { background: #000000; /* this will change the review order button hover background color */ color: #ffffff; /* this will change the review order button hover text color */ } /* 19.User payment steps - with out login --------------------- */ .user-package-section .payment-steps li { color: #d0cdcd; /* this will change the payment step text color */ } .user-package-section .payment-steps li .step-count { color: #b5b8b9; /* this will change the payment step count text color */ background: #ffffff; /* this will change the payment step background color */ border-color: #b5b8b9; /* this will change the payment step border color */ } .user-package-section .payment-steps li.active .step-count{ color: #ffffff /* this will change the payment step count text color */ } .user-package-section .payment-steps li.active { color: #ffffff; /* this will change the payment step count text color */ } .user-package-section .payment-steps li.active span { background: #b5b8b9; /* this will change the payment step count background color */ border-color: #b5b8b9; /* this will change the payment step count border color */ } .user-package-section .last-step:after, .user-package-section .step-line:before, .user-package-section .step-line:after { background: #d0cdcd; /* this will change the payment step line color */ } .user-package-section #button-pay, .user-package-section .payment-user-info-wrap span.next-step { background: #b5b8b9; /* this will change the review order button background color */ color: #ffffff; /* this will change the review order button text color */ } .user-package-section #button-pay:hover, .user-package-section .payment-user-info-wrap span.next-step:hover { background: #000000; /* this will change the review order button background hover color */ color: #ffffff; /* this will change the review order button text hover color */ } /* 20.Billing address - with login --------------------- */ .payment-user-info label { color: #000000; /* this will change the label text color */ } .payment-col select, .payment-col input, .payment-user-info .payment-col select, .payment-user-info .payment-col input { background: #ffffff; /* this will change the input/select background color */ color: #000000; /* this will change the input/select text color */ } /* 21.Billing address with out login --------------------- */ .user-package-section .payment-user-info label { color: #ffffff; /* this will change the label text color */ } .user-package-section .payment-col select, .user-package-section .payment-col input, .user-package-section .payment-user-info .payment-col select, .user-package-section .payment-user-info .payment-col input { background: #ffffff; /* this will change the input/select background color */ color: #000000; /* this will change the input/select text color */ } /* 22.Review Order - with login --------------------- */ .payment-review-info .billing-adr h3 { color: #333333; /* this will change the Billing address title text color */ } .payment-review-info .billing-adr p { color: #666666; /* this will change the address text color */ } .payment-cart-item h3 { color: #333333; /* this will change the Cart items title text color */ } .payment-cart-item li { background: #ffffff; /* this will change the Cart items package list background color */ } .payment-cart-item h4 { color: #555555; /* this will change the Cart items package title text color */ } .cart-package-info { color: #555555; /* this will change the Cart items package text color */ } /* 23.Review Order - with out login --------------------- */ .user-package-section .payment-review-info .billing-adr h3 { color: #ffffff; /* this will change the Billing address title text color */ } .user-package-section .payment-review-info .billing-adr p { color: #ffffff; /* this will change the address text color */ } .user-package-section .payment-cart-item h3 { color: #ffffff; /* this will change the Cart items title text color */ } .user-package-section .payment-cart-item li { background: #ffffff; /* this will change the Cart items package list background color */ } .user-package-section .payment-cart-item h4 { color: #000000; /* this will change the Cart items package title text color */ } .user-package-section .cart-package-info { color: #555555; /* this will change the Cart items package text color */ } /* 24.Payment - with login --------------------- */ .payment-user-type-left li { color: #b5b8b9; /* this will change the payment title text color */ } .payment-user-type-left li:hover, .payment-user-type-left li.active { color: #22a7df; /* this will change the payment title text active/hover color */ } .payment-user-card label { color: #000000; /* this will change the payment label (Card Number, Card Number, Cvv) color */ } .input-wrapper { background: #ffffff; /* this will change the payment input background color */ } /* 25.Payment - with out login --------------------- */ .user-package-section .payment-user-type-left li { color: #ffffff; /* this will change the payment title text color */ } .user-package-section .payment-user-type-left li:hover, .user-package-section .payment-user-type-left li.active { color: #ffffff; /* this will change the payment title text active/hover color */ } .user-package-section .payment-user-card label { color: #ffffff; /* this will change the payment label color */ } .user-package-section .input-wrapper { background: #ffffff; /* this will change the payment input background color */ } .cr-page-channeldetail .lp-detail-view-enabled .page-title-wrap.new-page-title-wrap { background: #F0F0F0 !important; border-radius: 8px !important; padding: 0px 12px 0px 0 !important; } /* 26.Confirmation - with login --------------------- */ .payment-confirmation .payment-success span { border-color:#30D968; /* this will change the Payment Successful Icon border color */ color:#30D968; /* this will change the Payment Successful Icon color */ } .payment-confirmation .payment-fail span{ border-color:#f00000; /* this will change the Payment fail Icon border color */ color:#f00000; /* this will change the Payment fail Icon color */ } .payment-confirmation .payment-success p.pay-success-txt { color: #30D968 !important; /* this will change the Payment Successful text color */ } .payment-confirmation .payment-fail p, .payment-confirmation .payment-success p { color: #000000 !important; /* this will change the Payment Amount/Confirmation Number text color */ } .pay-success-home a { background: #22a7df; /* this will change the home button background color */ color: #ffffff; /* this will change the home button text color */ } .pay-success-home a:hover { background: #000000; /* this will change the home button background hover color */ color: #ffffff; /* this will change the home button hover text color */ } /* 27.Confirmation - with out login --------------------- */ .user-package-section .payment-confirmation .payment-success span { border-color:#ffffff; /* this will change the Payment Successful Icon border color */ } .user-package-section .payment-confirmation .payment-fail span{ border-color:#f00000; /* this will change the Payment fail Icon border color */ } .user-package-section .payment-confirmation .payment-success p.pay-success-txt { color: #ffffff !important; /* this will change the Payment Successful text color */ } .user-package-section .payment-confirmation .payment-fail p, .user-package-section .payment-confirmation .payment-success p { color: #ffffff !important; /* this will change the Payment Amount/Confirmation Number text color */ } .user-package-section .pay-success-home a { background: #b5b8b9; /* this will change the Login button background color */ color: #ffffff; /* this will change the Login button text color */ } .user-package-section .pay-success-home a:hover { background: #000000; /* this will change the Login button background hover color */ color: #ffffff; /* this will change the Login button hover text color */ } /* 28.Redeem package popup --------------------- */ #launchSessionModal .modal-header h4, #add-redeem-license-key .modal-header h4{ font-size: 18px; color: #0D6EFD; /* this will change the title text color */ text-align: center; } #add-redeem-license-key .license-key-wrap label{ color:#666; /* this will change the label text color */ font-size: 15px; text-align: center; margin-bottom: 15px; } #add-redeem-license-key .license-key-wrap label span { display: none; } #add-redeem-license-key .license-key-wrap input[type="text"]{ color:#000000; /* this will change the input color */ border-color:#666; /* this will change the input border color */ width: 100%; margin-bottom: 80px; } #add-redeem-license-key .license-key-wrap .license-submit-btn{ background: #0D6EFD; /* this will change the submit button background color */ color: #ffffff; /* this will change the submit button text color */ height: 30px; border-radius: 3px; font-size: 14px; float: none; } #add-redeem-license-key .license-key-wrap .license-submit-btn:hover{ background: #000000; /* this will change the submit button hover background color */ color: #ffffff; /* this will change the submit button hover text color */ } .license-key-wrap { text-align: center; } .license-note-txt { position: absolute; top: 90px; width: 100%; font-size: 13px; font-style: italic; display: block; } #add-redeem-license-key .modal-content { background: #f8fcfc; } .license-key-form .error_msg { margin-top: 5px; } /* 29.Category package details popup (info icon poup) --------------------- */ #category-package-details h4, #package-details h4{ color: #000000; /* this will change the title text color */ } #category-package-details .long-desc-wrap p, #package-details .long-desc-wrap p{ color: #000000; /* this will change the description text color */ } #category-package-details .tags-list li, #package-details .tags-list li{ color: #ffffff; /* this will change the Tags text color */ background: #999999; /* this will change the Tags background color */ } .package-slide-wrap a.user-info-btn{ color:#22a7df; /* this will change the "info icon" color */ } .package-slide-wrap a.user-info-btn:hover{ color:#22a7df; /* this will change the "info icon" hover color */ } /* 30.Subscribe Message - popup --------------------- */ #subscribe-message .modal-header h4 { color: #000000; /* this will change the "Subscribe Message - popup" title color */ } #subscribe-message .modal-body .order-confirmation-msg{ color: #000000; /* this will change the "Subscribe Message - popup" message text color */ } #subscribe-message .popup-btn-wrap a[title=Yes]{ background: #22a7df; /* this will change the "Subscribe Message - popup" Yes button background color */ color: #ffffff; /* this will change the "Subscribe Message - popup" Yes button text color */ } #subscribe-message .popup-btn-wrap a[title=Yes]:hover{ background: #888888; /* this will change the "Subscribe Message - popup" Yes button hover background color */ color: #ffffff; /* this will change the "Subscribe Message - popup" Yes button hover text color */ } #subscribe-message .popup-btn-wrap a[title=No], #subscribe-message .popup-btn-wrap a[title=Cancel]{ background: #22a7df; /* this will change the "Subscribe Message - popup" No button background color */ color: #ffffff; /* this will change the "Subscribe Message - popup" No button text color */ } #subscribe-message .popup-btn-wrap a[title=No]:hover, #subscribe-message .popup-btn-wrap a[title=Cancel]:hover{ background: #888888; /* this will change the "Subscribe Message - popup" No button hover background color */ color: #ffffff; /* this will change the "Subscribe Message - popup" No button hover text color */ } /* 31.Purchase license flow popup --------------------- */ #redeem-license-key .modal-header h4{ color: #000000; /* this will change the title text color */ } #redeem-license-key .modal-body .order-confirmation-msg{ color:#000000; /* this will change the message text color */ } #redeem-license-key .pay-update-cart a[title=Yes]{ background: #b5b8b9; /* this will change the "Purchase license flow - popup" Yes button background color */ color: #ffffff; /* this will change the "Purchase license flow - popup" Yes button text color */ } #redeem-license-key .pay-update-cart a[title=Yes]:hover{ background: #000000; /* this will change the "Purchase license flow - popup" Yes button hover background color */ color: #ffffff; /* this will change the "Purchase license flow - popup" Yes button hover text color */ } #redeem-license-key .pay-update-cart a[title=No]{ background: #b5b8b9; /* this will change the "Purchase license flow - popup" No button background color */ color: #ffffff; /* this will change the "Purchase license flow - popup" No button text color */ } #redeem-license-key .pay-update-cart a[title=No]:hover{ background: #000000; /* this will change the "Purchase license flow - popup" No button hover background color */ color: #ffffff; /* this will change the "Purchase license flow - popup" No button hover text color */ } /* 32.Free Subscribe Message popup --------------------- */ #free-subscribe-message .modal-header h4{ color: #000000; /* this will change the "Free Subscribe Message - popup" title text color */ } #free-subscribe-message .order-confirmation-msg p{ color: #000000; /* this will change the "Free Subscribe Message - popup" message text color */ } /* 33.Purchase Order Confirmation popup --------------------- */ #proceedcheckout-setting .modal-header h4 { color: #000000; /* this will change the "Purchase Order Confirmation - popup" title text color */ } #proceedcheckout-setting .modal-body .order-confirmation-msg{ color: #000000; /* this will change the "Purchase Order Confirmation - popup" message text color */ } #proceedcheckout-setting .pay-update-cart a{ background: #22a7df; /* this will change the "Purchase Order Confirmation - popup" button background color */ color: #ffffff; /* this will change the "Purchase Order Confirmation - popup" button text color */ } #proceedcheckout-setting .pay-update-cart a:hover{ background: #22a7df; /* this will change the "Purchase Order Confirmation - popup" button hover background color */ color: #ffffff; /* this will change the "Purchase Order Confirmation - popup" button hover text color */ } /* 34.Terms and conditions popup --------------------- */ #terms-conditions .modal-header h4 { color: #000000; /* this will change the "Terms and conditions - popup" title text color */ } #terms-conditions .modal-body, #terms-conditions .modal-body p{ color: #000000; /* this will change the "Terms and conditions - popup" description text color */ } #terms-conditions .modal-body a { color: #22a7df; /* this will change the "Terms and conditions - popup" description link text color */ } #terms-conditions .modal-body a:hover { color: #b5b8b9; /* this will change the "Terms and conditions - popup" description link text hover color */ } #terms-conditions .pay-update-cart a{ background: #22a7df; /* this will change the "Terms and conditions - popup" button background color */ color: #ffffff; /* this will change the "Terms and conditions - popup" button text color */ } #terms-conditions .pay-update-cart a:hover{ background: #b5b8b9; /* this will change the "Terms and conditions - popup" button background hover color */ color: #ffffff; /* this will change the "Terms and conditions - popup" button text hover color */ } #terms-conditions .modal-dialog{ max-width: 100%; width: 1000px; /* this will change the "Terms and conditions - popup" size */ } /* 35.Cancel redeem license key confirmation popup --------------------- */ #cancel-redeem-license-key .modal-header h4 { color: #000000; /* this will change the "Cancel redeem license key - popup" title text color */ } #cancel-redeem-license-key .modal-body .order-confirmation-msg { color: #000000; /* this will change the "Cancel redeem license key - popup" description text color */ } #cancel-redeem-license-key .pay-update-cart a{ background: #84b125; /* this will change the "Cancel redeem license key - popup" button background color */ color: #ffffff; /* this will change the "Cancel redeem license key - popup" button text color */ } #cancel-redeem-license-key .pay-update-cart a:hover{ background: #84b125; /* this will change the "Cancel redeem license key - popup" button background color */ color: #ffffff; /* this will change the "Cancel redeem license key - popup" button text color */ } /* 36.Thank you for signing up popup --------------------- */ #registeration-message .success_modal p { color: #000000; /* this will change the "Thank you for signing up - popup" text color */ } #registeration-message .modal_ok_btn { background: #FB5124; /* this will change the "Thank you for signing up - popup" button background color */ color: #ffffff; /* this will change the "Thank you for signing up - popup" button text color */ } #registeration-message .modal_ok_btn:hover { background: #FB5124; /* this will change the "Thank you for signing up - popup" button hover background color */ color: #ffffff; /* this will change the "Thank you for signing up - popup" button hover text color */ } /* 37.Awards - Overview */ .points-levels{ color: #67686b; /* this will change the "Awards - overview" point & level text color */ width: 40% !important; float: left !important; } .level-bar{ background: #d0cdcd; /* this will change the "Awards - overview" level bar default background color*/ } .level-bar-filled{ background: #a8da05; /* this will change the "Awards - overview" level bar filled background color*/ } .overview-box li{ background: #ffffff; /* this will change the "Awards - overview" box background color*/ border-color: #cccccc; /* this will change the "Awards - overview" box border-bottom color*/ min-height: 100px !important; } .overview-box li h3{ color: #67686b; /* this will change the "Awards - overview" box title color*/ } .overview-box li h4{ color: #414244; /* this will change the "Awards - overview" box text color*/ margin: 0px 0 !important; } .overview-box li a{ color: #1976d2; /* this will change the "Awards - overview" box link text color*/ } .overview-box{ margin-bottom: 60px; float: right !important; width: 60% !important; margin-top: 0px !important; } .awards-content.overview-content{ width: 100% !important; float: left !important; } .rank-lists, .leaderboard-top-rank{ margin-top: 20px; } thead th { background-color: #0D6EFD; color: #ffffff; text-align: left; } table.table.table-hover.table-dark { border-collapse: collapse; margin: 25px 0; font-size: 0.9em; font-family: sans-serif; min-width: 400px; box-shadow: 0 0 20px rgb(0 0 0 / 15%); } table.table.table-hover.table-dark { width: 50%; } /* 38.Awards - Leaderboard */ .leaderboard-top-rank h3{ color: #414244; /* this will change the "Awards - Leaderboard" title text color */ } .leaderboard-top-rank .bootstrap-select button{ background: #ffffff; /* this will change the "Awards - Leaderboard" select-box background color */ color: #0fa9e6; /* this will change the "Awards - Leaderboard" select-box text color */ } .leaderboard-top-rank .bootstrap-select .dropdown-toggle:after { border-top-color: #b5b0b0; /* this will change the "Awards - Leaderboard" select-box arrow color */ } .leaderboard-top-rank .bootstrap-select .dropdown-menu{ background: #ffffff; /* this will change the "Awards - Leaderboard" select-box dropdown background color */ border-color:#cccccc; /* this will change the "Awards - Leaderboard" select-box dropdown border color */ } .leaderboard-top-rank .bootstrap-select .dropdown-menu li a{ color: #0fa9e6; /* this will change the "Awards - Leaderboard" select-box dropdown text color */ } .leaderboard-top-rank .bootstrap-select .dropdown-menu li.selected a, .leaderboard-top-rank .bootstrap-select .dropdown-menu li:hover a { color: #2693ff; /* this will change the "Awards - Leaderboard" select-box dropdown active text color */ } .lb-date-filter{ color: #676565; /* this will change the "Awards - Leaderboard" date input field text color */ } .date-group button { background: #22a7df; /* this will change the "Awards - Leaderboard" date update button background color */ color: #ffffff; /* this will change the "Awards - Leaderboard" date update button color */ } .rank-lists li { background: #ffffff; /* this will change the "Awards - Leaderboard" list background color */ border-color:#dddddd; /* this will change the "Awards - Leaderboard" list border color */ } .rank-lists li, .rank-lists li p { color:#67686b; /* this will change the "Awards - Leaderboard" list text color */ } .users-list-scroll li.selecteduser, .all-users-list li:hover { background: #f9f4e5; /* this will change the "Awards - Leaderboard" list hover background color */ border-color:#c8c8ca; /* this will change the "Awards - Leaderboard" list hover border color */ } .users-list-scroll li.currentuser { background: #ece5ce; /* this will change the "Awards - Leaderboard" currentuser list background color */ box-shadow: 5px 2px 5px #9c9b96; /* this will change the "Awards - Leaderboard" currentuser list box-shadow color */ } .rank-lists.rank-list-head li{ color:#333333; /* this will change the "Awards - Leaderboard" list header text color */ } .rank-lists.rank-list-head li .sortbycolunm.active{ color:#0fa9e6; /* this will change the "Awards - Leaderboard" list header text active color */ } .user-details-popup{ background: #ffffff; /* this will change the "Awards - Leaderboard" sidebar background color */ border-color: #dddddd; /* this will change the "Awards - Leaderboard" sidebar border color */ } .user-details-close span{ color: #5f5d5d; /* this will change the "Awards - Leaderboard" sidebar close icon color */ border-color: #b7b2b2; /* this will change the "Awards - Leaderboard" sidebar close icon border color */ } .rank-lists .user-image span, .user-details-meta .user-details-img span{ background: #22a7df; /* this will change the "Awards - Leaderboard" no-image background color */ color: #ffffff; /* this will change the "Awards - Leaderboard" no-image text color */ } .user-details-meta h3 { color: #444444; /* this will change the "Awards - Leaderboard" sidebar username text color */ } .user-details-meta p { color: #444444; /* this will change the "Awards - Leaderboard" sidebar emailid text color */ } ul.user-details-points { border-color: #dddddd; /* this will change the "Awards - Leaderboard" sidebar point & level border top color */ color: #444444; /* this will change the "Awards - Leaderboard" sidebar point & level text color */ } .user-details-badges h2{ color: #444444; /* this will change the "Awards - Leaderboard" sidebar badges heading text color */ } .user-details-badges ul li { box-shadow: 0px 1px 2px #cccccc; /* this will change the "Awards - Leaderboard" sidebar badges box-shadow color */ background: #ffffff; /* this will change the "Awards - Leaderboard" sidebar badges background color */ } .user-details-badges ul li h3{ color: #67686b; /* this will change the "Awards - Leaderboard" sidebar badges title text color */ } .user-details-badges ul li p{ color: #67686b; /* this will change the "Awards - Leaderboard" sidebar badges description text color */ } /*39.Awards - Trophy Case .trophycase-list li{ border: 1px solid #e0dbdb; background: #ffffff; box-shadow: none; border-radius: 0; min-height: 170px; width: 23.4%; padding-top: 5px; padding-right: 45px; } .trophycase-list .info-icon .fa-ellipsis-v { display: block; color: #333; margin-top: 5px; } .trophycase-desc-wrap, .trophycase-list .info-icon span, .trophycase-list li .info-icon, .trophycase-list li .tick-icon, .trophycase-list li figure, .dashboard-cer-download .fa-eye.certificate-icon { display: none; } .dashboard-cer-download .certi-custom-download.certificate-icon { display: block; } .dashboard-cer-download { position: absolute; bottom: 0; right: 70px; width: 30px; height: 30px; } .trophycase-list li h3{ text-align: left; font: 18px/22px 'OpenSansbold'; color: #333; white-space: normal; } .trophycase-list li p{ color: #444444; /* this will change the "Awards - Trophy Case" badge description color */ } */ .trophycase-list li h4{ color: #666; /* this will change the "Awards - Trophy Case" badge completed on date text color */ padding: 0 83px 0 15px; text-align: left; font: 12px 'OpenSansSemiBold'; font-style: italic; } .trophycase-list li .tick-icon { background: #9fcd06; /* this will change the "Awards - Trophy Case" badge tick icon background */ color: #ffffff; /* this will change the "Awards - Trophy Case" badge tick icon color */ } .trophycase-list li .lock-icon { color: #000000; /* this will change the "Awards - Trophy Case" badge lock icon color */ } .mydashboard-section .trophycase-list li { background-image: url('images/fileType/achievements_webinar.png'); background-position: right top; background-repeat: repeat-y; background-size: contain; } .mydashboard-section .trophycase-list li.achievements-content-lp { background-image: url('images/fileType/achievements_course.png'); } .mydashboard-section .trophycase-list li.achievements-content-channel { background-image: url('images/fileType/achievements_lP.png'); } .mydashboard-section .trophycase-list.list-view li{ background-position: left top; } /*40.Awards - Info popup*/ .awards-section .modal-header .close{ color: #5f5d5d; /* this will change the "Awards" popup close icon color */ border-color: #b7b2b2; /* this will change the "Awards" popup close icon border color */ } .awards-section .modal-header .close:hover{ color: #5f5d5d; /* this will change the "Awards" popup close icon hover color */ border-color: #b7b2b2; /* this will change the "Awards" popup close icon hover border color */ } .awards-section .modal-header h4 { color: #000000; /* this will change the "Awards popup title text color */ } .awards-section .modal-body h3{ color: #000000; /* this will change the "Awards" popup subtitle text color */ } .awards-section .modal-body p{ color: #454545; /* this will change the "Awards" popup text color */ } .awards-section .modal-footer button{ color: #ffffff; /* this will change the "Awards" popup button text color */ background: #00a9e4; /* this will change the "Awards" popup button background color */ } .awards-section .modal-footer button:hover{ color: #ffffff; /* this will change the "Awards" popup button hover text color */ background: #00a9e4; /* this will change the "Awards" popup button hover background color */ } /*41.Awards - all type popups*/ .preview-popup .close-btn{ color: #5f5d5d; /* this will change the "Awards - all type popups" close icon color */ border-color: #b7b2b2; /* this will change the "Awards - all type popups" close icon border color */ } .preview-popup .modal-body h2 span{ color: #000000; /* this will change the "Awards - all type popups" message text color */ } .preview-popup .modal-body h3{ color: #454545; /* this will change the "Awards - all type popups" description text & rewarded text color */ } .preview-popup .modal-body h2 strong, .preview-popup .modal-body h3 strong{ color: #454545; /* this will change the "Awards - all type popups" Point text color */ } .preview-popup .level-bar{ background: #d0cdcd; /* this will change the "Awards - all type popups" level bar default background color*/ color: #000000; /* this will change the "Awards - all type popups" level bar text color */ } .preview-popup .level-bar-filled{ background: #22a7df; /* this will change the "Awards - all type popups" level bar filled background color*/ } .preview-popup .popup-button .buttonprimary { color: #ffffff; /* this will change the "Awards - all type popups" button text color */ background: #22a7df; /* this will change the "Awards - all type popups" button background color */ } .preview-popup .popup-button .checkbox label{ color: #000000; /* this will change the "Awards - all type popups" dont show again check box text color */ } /*42.Self Registration Payment Mode*/ .payment-method-popup .close{ color: #333333; /* this will change the close button color */ } .payment-method-popup .modal-title { color: #333333; /* this will change the title color */ } .payment-method-popup .modal-body ul li{ color: #333333; /* this will change the options color */ } .payment-method-popup .radio-button label:before { background: #ffffff; /* this will change the radio-button background color */ border-color: #dddddd; /* this will change the radio-button border color */ } .payment-method-popup .radio-button i{ color: transparent; /* this will change the radio-button tick icon color */ } .payment-method-popup .radio-button input[type=radio]:checked+label:before { background-color: #22a7df; /* this will change the radio-button active background color */ border-color: #22a7df; /* this will change the radio-button active border color */ } .payment-method-popup .radio-button input[type=radio]:checked+label i{ color: #ffffff; /* this will change the radio-button active tick icon color */ } .payment-method-popup .payment-info-icon i { border-color: #22a7df; /* this will change the info icon border color */ color: #22a7df !important; /* this will change the info icon color */ } .payment-info-desc { border-color:#cccccc; /* this will change the info description border color */ background-color: #ffffff; /* this will change the info description background color */ color: #333333; /* this will change the info description text color */ } .payment-method-popup .modal-footer a { color: #ffffff; /* this will change the button text color */ background-color: #22a7df; /* this will change the button background color */ border-color: #22a7df; /* this will change the button border color */ } .payment-method-popup .modal-footer a:hover{ color: #22a7df; /* this will change the button hover text color */ background-color: #ffffff; /* this will change the button hover background color */ border-color: #22a7df; /* this will change the button hover border color */ } /*43.Courses*/ .view-all-courses{ background: #22a7df; /* this will change the "view all courses" button background color */ color: #ffffff; /* this will change the "view all courses" button text color */ border-color: #22a7df; /* this will change the "view all courses" button border color */ } .view-all-courses:hover{ background: #ffffff; /* this will change the "view all courses" button hover background color */ color: #22a7df; /* this will change the "view all courses" button hover text color */ border-color: #22a7df; /* this will change the "view all courses" button hover border color */ } .course-section .prof-sub-header .sub-visible-content { background: #b5b8b9; /* this will change the "courses list" header background color */ color: #fff; /* this will change the "courses list" header text color */ } .course-section .assesment-list .lp-content-list { border-top-color:#b5b8b9; /* this will change the "courses list" border color */ } .course-section .assesment-list .lp-content-list-tit h3, .course-section .class-list > div{ color: #464545; /* this will change the "courses list" text color */ } .class-list .lp-content-action a { background: #ffffff; /* this will change the "courses list" view button background color */ color: #22a7df; /* this will change the "courses list" view button text color */ border-color: #22a7df; /* this will change the "courses list" view button border color */ } .class-list .lp-content-action a:hover { background: #22a7df; /* this will change the "courses list" view button background hover color */ color: #ffffff; /* this will change the "courses list" view button text hover color */ border-color: #22a7df; /* this will change the "courses list" view button border color */ } /*44.My Profile*/ .prof-upgrd-btn{ background: #5CB5C2; /* this will change the "upgrade" button background color */ color: #ffffff; /* this will change the "upgrade" button text color */ border-color: #5CB5C2 !important; /* this will change the "upgrade" button border color */ } .prof-upgrd-btn:hover{ background: #ffffff; /* this will change the "upgrade" button hover background color */ color: #0D6EFD; /* this will change the "upgrade" button hover text color */ border-color: #0D6EFD; /* this will change the "upgrade" button hover border color */ } .right_prof_sec .form-group input, .right_prof_sec .form-group select { background: #ffffff; /* this will change the input-field background-color */ color: #000000; /* this will change the input-field text color */ border-color:#000000; /* this will change the input-field border color */ } .contact-info-form .right_prof_sec label{ color: #26313f; /* this will change the label color */ } .left_prof_sec .delete-logo { color: #22a7df; /* this will change the "Remove" thump text color */ } .right_prof_sec .reset-btn{ background: #ffffff; /* this will change the "change password" button background color */ color: #9f9f9f; /* this will change the "change password" button text color */ border-color: #9f9f9f; /* this will change the "change password" button border color */ } .right_prof_sec .reset-btn:hover{ background: #FB5124; /* this will change the "change password" button hover background color */ color: #ffffff; /* this will change the "change password" button hover text color */ border-color: #FB5124; /* this will change the "change password" button hover border color */ } .contact-info-form .save-btn { background: #ffffff; /* this will change the "save changes" button background color */ color: #9f9f9f; /* this will change the "save changes" button text color */ border-color: #9f9f9f; /* this will change the "save changes" button border color */ } .contact-info-form .save-btn:hover { background: #FB5124; /* this will change the "save changes" button hover background color */ color: #ffffff; /* this will change the "save changes" button hover text color */ border-color: #FB5124; /* this will change the "save changes" hover button border color */ } .lp-viewer-section .stripe-sidebar { width: 24.5% !important; top: 48 !important; } .lp-viewer-section .stripe-sidebar.show-sidebar { border: 0.5px solid #0D6EFD !important; border-radius: 10px !important; box-shadow: 0 3px 10px rgb(0 0 0 / 50%) !important; } .uitube-alert-btn{ text-align: right !important; padding-right: 12px !important; /* padding-top: 20px; */ } .uitube-alert-btn a{ background: #0D6EFD !important; } /* 45.Change password --------------------- */ #change_password .modal-header h4{ color: #000000; /* this will change the "Change password - popup" Title text color */ } #change_password .chng_pswd_frm .form-control.code-input{ box-shadow: 0 2px 0 #000000; /* this will change the "Change password - popup" input border color */ color:#55595c; /* this will change the "Change password - popup" input text color */ background: #ffffff; /* this will change the "Change password - popup" input background color */ } #change_password .submit-btn { background: #FB5124; /* this will change the "Change password - popup" button background color */ color: #fff; /* this will change the "Change password - popup" button text color */ border-color: #FB5124; /* this will change the "Change password - popup" button border color */ } #change_password .submit-btn:hover { background: #FB5124; /* this will change the "Change password - popup" button hover background color */ color: #ffffff; /* this will change the "Change password - popup" button hover text color */ border-color: #FB5124; /* this will change the "Change password - popup" hover button border color */ } /*46.Subscription*/ .prof-sub-header .sub-visible-content { background: #0D6EFD; /* this will change the "subscription list" header background color */ } .prof-sub-header .sub-visible-content p{ color: #ffffff; /* this will change the "subscription list" header text color */ } .sub-visible-content *, .sub-visible-content p, .sub-visible-content span { color: #2c2c2c; /* this will change the "subscription list" list text color */ } .sub-visible-content{ background: #ffffff; /* this will change the "subscription list" list background color */ } .sub-hidden-content { border-top-color: #c8c8c8; /* this will change the "subscription list" list detail border color */ background: #ffffff; /* this will change the "subscription list" list detail background color */ } .sub-hidden-content * { color: #2c2c2c !important; /* this will change the "subscription list" detail text color */ } .sub-visible-content .subsribed-type i{ color: #0D6EFD; /* this will change the "Subscription Type Icon" color */ } .show-dtl-btn, .hide-dtl-btn { color: #0D6EFD; /* this will change the "Show & Hide" button text color */ border-color: #0D6EFD; /* this will change the "Show & Hide" button border color */ width: 110px !important; } .show-dtl-btn:hover, .hide-dtl-btn:hover { color: #ffffff; /* this will change the "Show & Hide" button hover text color */ border-color: #0D6EFD; /* this will change the "Show & Hide" button hover border color */ background-color: #0D6EFD; /* this will change the "Show & Hide" button hover background color */ } .qck_frm_btn input { background: #0D6EFD !important; border: 2px solid #0D6EFD !important; } .qck_frm_btn input:hover { color: #0D6EFD !important; } .add_ct_table ul.addct_tblhead li { background: #0D6EFD !important; } /*47.Video Assessment */ .assesment-box .info-box{ background: #ffffff; /* this will change the "Video Assessment" Box background color */ border-color:#ffffff; /* this will change the "Video Assessment" Box border color */ } .assesment-box .current .info-box{ background: #ffffff; /* this will change the "Video Assessment" active Box background color */ border-color:#0067df; /* this will change the "Video Assessment" active Box border color */ } .assesment-box .info-box h2{ color:#6c6d6f; /* this will change the "Video Assessment" Box text color */ } .assesment-box .info-box i{ color:#0067df; /* this will change the "Video Assessment" Box icon color */ } .assesment-box .info-box h2 span{ color:#0067df; /* this will change the "Video Assessment" Box count color */ } .assesment-box span.avg-score{ color:#0067df; /* this will change the "Video Assessment" Box Avg Score text color */ } .assesment-list .bootstrap-select.btn-group .dropdown-menu li a span.text{ color:#454545; /* this will change the "Sort By - Select option" color */ } .assesment-list .bootstrap-select.btn-group .dropdown-menu li.selected a span.text, .assesment-list .bootstrap-select.btn-group .dropdown-menu li a:hover span.text { color:#0067df; /* this will change the "Sort By - Select option" hover color */ } .assesment-list .bootstrap-select .dropdown-toggle::after{ border-top-color:#0067df; /* this will change the "Sort By - Select option" arrow color */ } .assesment-list .bootstrap-select.btn-group .dropdown-menu{ border-color: #cccccc; /* this will change the "Sort By" dropdown border color */ background: #ffffff; /* this will change the "Sort By" dropdown background color */ } .assesment-list .bootstrap-select button { background: #ffffff; /* this will change the "Sort By" menu background color */ border-color: #cccccc; /* this will change the "Sort By" menu border color */ color: #454545; /* this will change the "Sort By" menu text color */ } .assesment-list .prof-sub-header .sub-visible-content { background: #001433; /* this will change the "Video Assessment" list header background color */ color: #ffffff; /* this will change the "Video Assessment" list header text color */ } .assesment-list .sub-visible-content *, .assesment-list .sub-visible-content p{ color: #ffffff; /* this will change the "Video Assessment" list header text color */ } .assesment-list .lp-content-list h3{ color: #464545; /* this will change the "Video Assessment" list title color */ } .assesment-list .lp-content-list p { color: #9e9e9e; /* this will change the "Video Assessment" contents list color */ } .assesment-list .graded-points { color: #828181; /* this will change the "Video Assessment" Assigned Date & Due Date color */ } .assesment-list .lp-content-action a { background: #ffffff; /* this will change the view button background color */ color: #0067df; /* this will change the view button text color */ border-color: #0067df; /* this will change the view button border color */ } .assesment-list .lp-content-action a:hover { background: #0067df; /* this will change the view button background hover color */ color: #ffffff; /* this will change the view button text hover color */ border-color: #0067df; /* this will change the view button hover border color */ } .vassessment-cbox label { color: #ffffff; /* this will change the video comment label color */ } .vassessment-cbox textarea{ background: #ffffff; /* this will change the video comment textarea background color */ color: #454545; /* this will change the video comment textarea color */ border-color: #cccccc; /* this will change the video comment textarea border color */ } .vassessment-cbox span { background: #0067df; /* this will change the video comment button background color */ color:#ffffff; /* this will change the video comment button text color */ } .vassessment-cbox span:hover { background: #000000; /* this will change the video comment button hover background color */ color:#ffffff; /* this will change the video comment button hover text color */ } .vassessment-cbox span.comment-cancel-btn{ color: #0067df; /* this will change the video comment close icon color */ background: none; } .vassessment-cbox #learnervideocommandlimit{ color:#ffffff; /* this will change the video comment limot text color */ } .lp-content-action span{ color: #0067df; /* this will change the "Awaiting feedback" text color */ } .assesment-list .lp-content-list p.manditoryfields { color: #f00000 !important; /* this will change the "Expired" text color */ } #launchModal .modal-header h4{ color: #333333; /* this will change the "Video assessment" launch popup title color */ } #launchModal .modal-header .close{ color: #454545; /* this will change the "Video assessment" launch popup close icon color */ } #launchModal.assess-dash-popup p a{ color: #454545; /* this will change the "Video assessment" launch popup content list color */ } #launchModal.assess-dash-popup p a:hover{ color: #0067df; /* this will change the "Video assessment" launch popup content list hover color */ } .lp-detail-tabs .lp-tabs-menu li a span { color: #454545; /* this will change the "Open - waiting for review tab" tab color */ } .lp-result-img span.no-img { background: #0067df; /* this will change the "Open - waiting for review tab" profile background color */ color: #fff; /* this will change the "Open - waiting for review tab" profile text color */ } .assess-detail .lp-detail-tabs .tab-content h3{ color: #828181; /* this will change the "Open - waiting for review tab" title text color */ } .assess-detail .lp-result-list .lp-result-name p{ color: #828181; /* this will change the submited date text color */ } .assess-detail .feedback-btn { color: #0067df; /* this will change the "Open - waiting for review tab" feedback button color */ border-color: #0067df; /* this will change the "Open - waiting for review tab" feedback button border color */ } .assess-detail .feedback-btn:hover { color: #ffffff; /* this will change the "Open - waiting for review tab" feedback button hover color */ border-color: #0067df; /* this will change the "Open - waiting for review tab" feedback button hover border color */ background: #0067df; /* this will change the "Open - waiting for review tab" feedback button hover background color */ } .lp-detail-content p.text-red { color: #ad634a !important; /* this will change the "Open - waiting for review tab" overdue days text color */ } .vjs-marker{ background: #0067df !important; /* this will change the video assessment video marker color */ } .video-js .vjs-play-progress { background-color: #e8e1e1 !important; /* this will change the video assessment video progress background color */ } .video-js .vjs-big-play-button { border-color: #0067df; /* this will change the video Play icon border color */ color: #0067df; /* this will change the video Play icon color */ background-color: #ffffff; /* this will change the video Play icon background color */ } .video-js .vjs-big-play-button:focus, .video-js:hover .vjs-big-play-button{ border-color: #528001; /* this will change the video Play icon hover border color */ color: #528001; /* this will change the video Play icon hover color */ background-color: #ffffff; /* this will change the video Play icon hover background color */ } .video-js .vjs-control{ color: #ffffff; /* this will change the video Play Pause icon hover color (progress bar) */ } .video-js .vjs-progress-holder .vjs-play-progress{ color: #ffffff; /* this will change the video progress bar handle color */ } .lp-assessment-action a{ border-color: #0067df; /* this will change the view border color */ color: #0067df; /* this will change the view color */ } .lp-assessment-action a:hover{ border-color: #0067df; /* this will change the view border color */ background-color: #0067df; /* this will change the view bg color */ color: #ffffff; /* this will change the view color */ } /*Assessment grading section*/ .learner_grader_desc h3, .learnersubmissions-title, .assess-title{ color:#616060; /* this will change the "Grader grading section" title color */ } .learner_grader_desc .assess-feedback-description { background: #ffffff; /* this will change the "Learner & Grader description" background color */ } .assess-feedback-description.lp-result-list a.accordion-toggle{ color:#1976d2; /* this will change the View more & View less text color */ } /*Learner Submission*/ .assess-feedback-description { background: #d0e3f5; /* this will change the Learner Submission section background color */ } .lp-result-list-right{ background: #ffffff; /* this will change the Learner Submission section background color */ } .lp-result-list.assess-feedback-description .lp-result-name h3{ color:#616060; /* this will change the "Learner Submission" Name text color */ } .lp-result-list.assess-feedback-description .lp-result-name p{ color:#616060; /* this will change the "Learner Submission" submited date text color */ } .assess-detail .lp-details-content > div p.learner-description{ color:#616060; /* this will change the "Learner Submission" description text color */ } .gradepoint-lists h4{ color: #616060; /* this will change the "Learner Submission" gradepoint text color */ } .gradepoint-lists .info-icon-circle{ color: #FB5124; /* this will change the "Learner Submission" gradepoint info icon color */ } .gradepoint-list-items{ background: #ffffff; /* this will change the "Learner Submission" gradepoint popup background color */ } .gradepoint-list-items p label{ color: #616060; /* this will change the "Learner Submission" gradepoint popup criteria color */ } .gradepoint-list-items p span{ color: #616060; /* this will change the "Learner Submission" gradepoint popup criteria point color */ } .feedback-btn{ color: #FB5124; /* this will change the "Learner Re-Submission" feedback button color */ border-color: #FB5124; /* this will change the "Learner Re-Submission" feedback button border color */ } .feedback-btn:hover{ color: #ffffff; /* this will change the "Learner Re-Submission" feedback button hover color */ border-color: #FB5124; /* this will change the "Learner Re-Submission" feedback button hover border color */ background: #FB5124; /* this will change the "Learner Re-Submission" feedback button hover background color */ } /*Feedback section*/ .assess-feedback-section-in { background: #ffffff; /* this will change the Feedback section background color */ } .feedback-tab-menu ul li > label{ color: #616060; /* this will change the Feedback section criteria name text color */ } .pointslider-slide .noUi-target { border-color: #d3d3d3; /* this will change the Feedback section slider default border color */ background: #dcdcdc; /* this will change the Feedback section slider default background color */ } .pointslider-slide .noUi-horizontal .noUi-connect { background: #1976d2; /* this will change the Feedback section slider active background color */ } .pointslider-slide .noUi-horizontal .noUi-handle{ border-color:#1976d2; /* this will change the Feedback section slider Handle color */ } .pointslider-slide .noUi-pips { color: #999999; /* this will change the Feedback section slider point count color */ } .feedback-pop { border-color: #e2e0e0; /* this will change the Feedback section slider popup border color */ background: #ffffff; /* this will change the Feedback section slider popup background color */ box-shadow: 1px 2px 4px #e2e2e2; /* this will change the Feedback section slider popup box-shadow color */ } .feedback-pop h2 { color: #807e7e; /* this will change the Feedback section slider popup title color */ } .feedback-pop .clarity-info span { color: #1976d2; /* this will change the Feedback section slider popup point color */ } .feedback-tab-menu ul li .clarity-info label{ color: #616060; /* this will change the Feedback section slider popup point description color */ } .feedback-pop .close-popup { color: #b4b1b1; /* this will change the Feedback section slider popup close icon color */ } .feedback-pop .close-popup:hover { color: #1976d2; /* this will change the Feedback section slider popup close icon hover color */ } .criteria-total{ color: #1976d2; /* this will change the Feedback section criteria total points color */ border-color:#dcdcdc; /* this will change the Feedback section criteria total points border color */ } .feedback-tab-menu ul li label i{ color: #cfcfcf; /* this will change the Feedback section criteria description icon color */ } .feedback-tab-menu ul li label .dropdown-menu p { color: c; /* this will change the Feedback section criteria description text color */ } .re-submission.checkbox label { color: #828181; /* this will change the Require Re-Submission text color */ } .re-submission.checkbox .cbox { border-color:#1976d2; /* this will change the Require Re-Submission check box border color */ color: #1976d2; /* this will change the Require Re-Submission check box checked color */ } .assess-feedback-section-in .submitedlist p{ color:#1976d2; /* this will change the Feedback section uploaded files color */ } .more-info-action-col .action-btns .action-btn:hover{ background: #fff; border: 1px solid #000; color: #000; transition: all .3s ease; } /*48.Notification*/ .notification-bell{ color: #b1adad; /* this will change the notification bell icon color */ } .notification-bell span.spnCartCount{ background: #FB5124; /* this will change the notification count background color */ color: #ffffff; /* this will change the notification count text color */ } a.read-notifi-link { background: #fff;/* this will change the "Read all" notification background color */ color: #000; /* this will change the "Read all" notification text color */ border: 1px solid #000; } a.read-notifi-link:hover { background: #000000; /* this will change the "Read all" notification hover background color */ color: #fff; /* this will change the "Read all" notification hover text color */ } .notification-lists-wrap li { background: #ffffff; /* this will change the list background color */ border-color: #ccc; /* this will change the list border color */ margin-bottom: 8px; } .notification-lists-wrap .user-text, .top-notification-lists .user-text { color: #22a7df; /* this will change the type icon color */ } .notify-user-content { color: #777777; /* this will change the content color */ } .notifi-time { color: #aaaaaa; /* this will change the time text color */ } .notify-user-content .notification-list-title, .top-notification-lists .notify-user-content { color: #333333; /* this will change the title color */ } .notification-lists-wrap li .view-notifi-link{ background: #fff; /* this will change the view button background color */ color: #000; /* this will change the view button color */ border: 1px solid #000; } .notification-lists-wrap li .view-notifi-link:hover{ background: #000000; /* this will change the view button background color */ color: #ffffff; /* this will change the view button color */ } #more-info-box .modal-header h4 span { display: none !important; } .notification-lists-head h3 { color: #444444; /* this will change the Notification dropdown head title color */ } .top-notification-lists a.all-notification { color: #0D6EFD !important; /* this will change the Notification dropdown "See all notifications" link color */ padding: 15px 10px !important; } .top-notification-lists .notifylist-close { color: #777777; /* this will change the Notification dropdown list close icon color */ } .top-notification-lists .notifylist-close:hover { color: #000000; /* this will change the Notification dropdown list close icon hover color */ } .title-col.lp-title-col { margin-top: 30px !important; } /*49.Activity Dashboard*/ .assesment-box-left, .assesment-box-right{ background: #ffffff;/* this will change the Activity Dashboard box background color */ box-shadow: 0px 2px 2px 1px #cccccc; /* this will change the Activity Dashboard box shadow color */ } .assesment-box-left h3, .assesment-box-right h3 { color: #989898; /* this will change the Activity Dashboard box title color */ } .mydashboard-section .assesment-box .info-box h2{ color:#6c6d6f; /* this will change the "Video Assessment" Box text color */ } .mydashboard-section .assesment-box .info-box i{ color:#abafb1; /* this will change the "Video Assessment" Box icon color */ } .mydashboard-section .assesment-box .current .info-box i, .mydashboard-section .assesment-box .info-box:hover i{ color:#22a7df; /* this will change the "Video Assessment" active Box icon color */ } .mydashboard-section .assesment-box .info-box h2 span{ color:#abafb1; /* this will change the "Video Assessment" Box count color */ } .mydashboard-section .assesment-box .current .info-box h2 span, .mydashboard-section .assesment-box .info-box:hover h2 span{ color:#22a7df; /* this will change the "Video Assessment" active Box count color */ } .dashboard-sub-menu li{ float:left; } ul.dashboard-sub-menu.clearfix { border-bottom: 2px solid #e5e5e7; } /* Class */ .file-icon-course.default-cont-thumb { background-image: url('images/fileType/uipath/ilt_tumb.png'); background-repeat: no-repeat; background-size: 90%; background-color: #fff; background-position: center; } .category-grid-col.class-wrap .video-post-in a { background-image: url('images/fileType/uipath/ilt_tumb.png'); background-repeat: no-repeat; background-size: cover; } #more-info-box .file-icon-course.default-cont-thumb img, .pinfo-content-course .launch-pop-wrap, .class-wrap .class-content-list, .class-wrap .lp-content-action.class-new-action, .class-wrap .channel-lp-tag-list .class-start-end-date, .category-grid-col.class-wrap .video-post-in a i, .pinfo-content-course .format-list, .pinfo-content-course .info-ratings { display: none; } .class-wrap .channel-lp-tag-list .class-start-end-date.date-calender-icon { display: block; } .class-wrap .channel-lp-tag-list.new-tail-description { position: absolute; bottom: 12px; } .category-grid-col.class-wrap { height: 320px; } .class-wrap .class-start-end-date > span { margin-right: 4px; font-size: 12px; color: #999; } .class-wrap .class-start-end-date i { float: left; margin-right: 4px; font-size: 16px; color: #999; } .category-grid-col.class-wrap span.more-info-icon { bottom: 8px; display: block; } div#more-info-box.pinfo-content-course p.info-duration { font-size: 12px; color: #888; } #more-info-box.pinfo-content-course .modal-content { background: #f8fcfc; } .pinfo-content-course .more-info-title-wrap { padding-left: 130px; } #more-info-box.pinfo-content-course figure { width: 120px; height: 60px; } /* 50 Learning path Viewer --------------------------*/ .view-close { color: #696969; /* this will change the close icon color */ } .view-close-text { color: #fff; /* this will change the close text color */ } .btn-outline-blue { color: #000000; /* this will change the view full path border color */ border-color: #000000; /* this will change the view full path text color */ } .btn-outline-blue:hover { color: #000000; /* this will change the view full path border color on hover */ border-color: #000000; /* this will change the view full path text color on hover */ } .lp-detail-inner-sec h2 { color: #212529; /* this will change the next/previous content title color */ } .lp-next-content .next-arrow, .lp-previous-content .next-arrow { color: #FB5124; /* this will change the next/previous arrow color */ } .lp-next-content .view-close-text, .lp-previous-content .view-close-text { color: #fff; /* this will change the NEXT/PREV arrow text color */ } .lp-detail-desc-wrap .lp-detail-inner-sec h2 { color: #212529; /* this will change the Learning path content title color */ } .desc-nav li { color: #212529; /* this will change the Time/Status/Enrolled text color */ border-color: #ddd; /* this will change the border color */ } .cont-complete { color: #059c05; /* this will change the Completed/In progress text color */ } .cont-not-start { color: #0D6EFD; /* this will change the Not started text color */ } .sidebar-tab-heading { color: #4d5259; /* this will change the Description text color */ } .lp-viewer-section .lp-video-assessment-wrap .lp-detail-inner-sec h2 { color: #333; /* this will change the assessment title text color */ } /* 51. Take Survey --------------------------*/ .take-servey-page .troubleshooting-stripe { background: #26313f; /* this will change the Survey title bar background color */ } .take-servey-page .troubleshooting-stripe .stripe-title { color: #ffffff; /* this will change the Survey title text color */ } .take-servey-page .stripe-close-btn { color: #ffffff; /* this will change the Close button color */ } .servey-lists-wrap { background: #ffffff; /* this will change the Question background color */ padding: 25px 20px 25px; } .servey-list h3 { color: #333333; /* this will change the Question title color */ margin-bottom: 15px; font-size: 15px; } .servey-list span.required-servey { color: #ff0000; /* this will change the Question required(*) color */ } .other-comments input, .servey-list-input input, .servey-list-input textarea { border-color: #dddddd; /* this will change the border color for Input & Textarea */ background: #ffffff; /* this will change the background color for Input & Textarea */ } .servey-list .max-length-txt { color: #999999; /* this will change the text color for Maximum character limit */ } .matrix-choice-lists .checkmark, .multiple-choice .custom-check-box .checkmark { background-color: #ffffff; /* this will change the border color for check box and radio buttom */ border-color: #bbbbbb; /* this will change the background color for check box and radio buttom */ } .custom-check-box input:checked ~ .checkmark { background-color: #0067DF; /* this will change the border color for selected check box and radio buttom */ border-color: #0067DF; /* this will change the border color for selected check box and radio buttom */ } .custom-check-box .checkmark:after { border-color: #ffffff; /* this will change the tick color for check box and radio buttom */ } .multiple-choice .custom-check-box { color: #555555; /* this will change the option text color for check box and radio buttom */ } .other-comments label { color: #333333; /* this will change the Other comment label color */ } .promoter-score-head .score-left-txt, .promoter-score-head .score-right-txt { color: #555555; /* this will change the Promoter score label color (Not at all likely, Extremely likely) */ } .promoter-score span.first-box, .promoter-score span { background: #ffffff; /* this will change the Promoter score box color */ border-color: #dddddd; /* this will change the Promoter score box border color */ color: #333333; /* this will change the Promoter score number color */ } .promoter-score span.score-active, .promoter-score span:hover { background: #0067DF; /* this will change the Promoter score background color for On hover and selected */ color: #ffffff; /* this will change the Promoter score number color for On hover and selected */ } .matrix-choice-clm-list { color: #555555; /* this will change the Matrix choice column text color */ } .matrix-choice-row { color: #555555; /* this will change the Matrix choice row text color */ } .matrix-choice-lists.odd, .matrix-choice-lists.even { background: none; /* this will change the Matrix choice row alternative background color */ } .survey-submit span { color: #ffffff; /* this will change the Survey submit button text color */ background: #0067DF; /* this will change the Survey submit button background color */ font-size: 13px; padding: 8px 15px; height: auto; width: 110px; float: right; } .survey-submit span:hover { color: #ffffff; /* this will change the Survey submit button text color on hover */ background: #666666; /* this will change the Survey submit button background color on hover */ } .take-survey-page { margin-top: 0; } .servey-lists-wrap.user-info-wrap { width: 1000px; margin: 0 auto; } .servey-lists-wrap.user-info-wrap .servey-list { max-width: 350px; width: 350px; padding: 10px 0; } .servey-lists-wrap.user-info-wrap .servey-list-content { margin-left: 0; } .multiple-choice .custom-check-box { font-size: 14px; margin-bottom: 15px; } .checkmark { height: 20px; width: 20px; bottom: -1px; right: 0; } .multiple-choice .custom-check-box .checkmark { height: 22px; width: 22px; } .custom-check-box .checkmark:after { left: 7px; top: 3px; } .multiple-choice .custom-check-box .checkmark:after { top: 2px; left: 7px; } .servey-list span.required-servey { position: static; } /* .servey-list.even, .servey-list.even .servey-lists-wrap { background: #fafafa; } */ .error_msg { margin-bottom: 10px; } .servey-lists-wrap.user-info-wrap h3 { margin-bottom: 2px; } .other-comments, .servey-list-input { max-width: 100%; width: 100%; } .servey-list-input textarea { height: 100px; } .card-tags{ position: absolute; bottom: -14%; font-size: 9px; font-weight: 700; line-height: 11px; color: #484848; display:none; } .card-tag-assist { position: absolute; left: 5%; bottom: -28%; color: #484848; font-size: 9px; font-weight: 500; line-height: 11px; display:none; } .content-status-list-due { margin: 60px 0 0 -260px !important; } /* 52.Subscription --------------------------*/ .subscription-new-design .package-filter h4.panel-title a{ color: #3C3C3C; /* this will change the filter title text color */ } .subscription-new-design .package-filter h4.panel-title a i{ color: #6d6b6b; /* this will change the filter title icon color */ } .subscription-new-design .package-filter h4.panel-title a, .subscription-new-design .package-filter .collapse.in, .subscription-new-design .package-filter .panel-group{ border-color: #cecbcb; /* this will change the filter border color */ } .subscription-new-design .checkbox-css{ color: #757575; /* this will change the checkbox label text color */ } .subscription-new-design .checkmark{ border-color: #22a7df; /* this will change the checkbox border color */ background-color: #ffffff; /* this will change the checkbox background color */ } .subscription-new-design input:checked ~ .checkmark{ background-color: #22a7df; /* this will change the checkbox active background color */ } .subscription-new-design .checkbox-css .checkmark:after, .subscription-new-design .checkbox-css .checkmark:before{ border-color: #ffffff; /* this will change the checkbox checked icon color */ } .subscription-new-design .selecting-option label.checkbox-css{ color: #ffffff; /* this will change the Learning Type tags color */ background-color: #929191; /* this will change the Learning Type tags background color */ } .subscription-new-design .selecting-option label.selected.checkbox-css { color: #ffffff; /* this will change the Learning Type selected tags color */ background-color: #414141; /* this will change the Learning Type selected tags background color */ } .subscription-new-design .selecting-option .checkbox-css input:checked ~ .checkmark:before, .subscription-new-design .selecting-option .checkbox-css input:checked ~ .checkmark:after{ border-color: #ffffff; /* this will change the Learning Type selected tags close icon color */ } .subscription-new-design .package-filter .form-control{ background-color: #ffffff; /* this will change the textbox background color */ color: #454545; /* this will change the textbox text color */ } .subscription-new-design .package-filter form > span i{ color: #bcbec1; /* this will change the textbox icon color */ } .subscription-new-design .package-filter .ng5-slider .ng5-slider-bar { background: #d8e0f3; /* this will change the range slider default background color */ } .subscription-new-design .package-filter .ng5-slider .ng5-slider-active.ng5-slider-pointer:after, .subscription-new-design .package-filter .ng5-slider .ng5-slider-selection { background: #22a7df; /* this will change the range slider active background color */ } .subscription-new-design .package-filter .ng5-slider .ng5-slider-pointer{ background: #ffffff; /* this will change the range slider handle color */ } .subscription-new-design .package-filter .ng5-slider .ng5-slider-bubble, .subscription-new-design .package-filter .ng5-slider .ng5-slider-bubble.ng5-slider-limit{ color:#454545; /* this will change the range slider price text color */ } .subscription-new-design .resetfilter { background: #22a7df; /* this will change the filter reset button background color */ color: #ffffff; /* this will change the filter reset button text color */ } .subscription-new-design .resetfilter:hover{ background: #666666; /* this will change the filter reset button hover background color */ color: #ffffff; /* this will change the filter reset button hover text color */ } .subscription-new-design .find-your-paths, .subscription-new-design .path-list, .subscription-new-design .path-list .view-more-btn{ background: #ffffff; /* this will change the package, session, course list section background color */ } .subscription-new-design .path-list-left .session-info li{ color: #5a5959; /* this will change the package, session icons (learnig type, seats available, start date, end date, access) color */ } .subscription-new-design .path-list-right .p-cost{ color: #5a5959; /* this will change the package, session, course cost color */ } /*Common Styles*/ a.user-info-btn{ color:#FB5124; /* this will change the "info icon" color */ } a.user-info-btn:hover{ color:#FB5124; /* this will change the "info icon" hover color */ } .remove-from-cart { color:#ec2323; /* this will change the "Remove icon" color */ } .remove-from-cart:hover { color:#ec2323; /* this will change the "Remove icon" hover color */ } .content-view-button a{ color:#202124; /* this will change the "List & Grid view icon" color */ } .content-view-button a:hover, .content-view-button a.active{ color:#202124; /* this will change the "List & Grid view icon" hover and active color */ } a.user-like-btn i, #more-info-box h2.more-info-title i{ color:#696969; /* this will change the "Favorite icon" color */ } a.user-like-btn { opacity: remove !important; } .back-to-top a{ background: #FB5124; /* this will change the "Back To Top" icon background color */ color: #ffffff;/* this will change the "Back To Top" icon color */ } .more-info-icon a.user-like-btn { opacity: 1; } a.user-like-btn .user-fav-txt.hidden { display: inline-block; } .img-col.video-col.file-icon-channel.ng-star-inserted{ display: none; } .channel-content-lists .certificate-icon-wrap{ top: 45px !important; right: 17% !important; } .lp-detail-certificate .certificate-trophy-icon{ } .channel-certificate.brand-box.lp-detail-certificate.lp-completed{ padding-top: 22px !important; } .channel-content-lists .channel-certificate.lp-detail-certificate{ padding-top: 22px !important; } .list-view-blk .img-col a, .chl-list-view-blk .img-col a{ height: 90px !important; } span.certificate-lock-icon{ top: 28px !important; } .content-list-view-blk span.v-timing.ng-star-inserted{ margin-top: 30px !important; } .lp-detail-content .title-col p > span, .title-col p > span{ margin-left: 10px !important; color: #5F6368 !important; } .list-view-blk .title-col h4, .chl-list-view-blk .title-col h4 { margin-top: 25px !important; margin-left: 10px !important; } /*New Tiles*/ .more-info-icon a.user-like-btn, a.user-info-btn-new{ color:#414244; /* this will change the "info icon text" color*/ } a.user-info-btn-new span{ background-color:#696969; /* this will change the "info icon" background color*/ margin-bottom: 6px; } a.user-info-btn-new:hover{ color:#414244; /* this will change the "info icon text" hover color*/ } a.user-info-btn-new:hover span{ background-color:#696969; /* this will change the "info icon" hover background color*/ } span.more-info-icon{ color: #414244; /* this will change the "more info dots icon" color*/ display:inline-flex !important; float:right !important; } span.more-info-icon:hover{ color: #1976d2; /* this will change the "more info dots icon" hover color*/ } #more-info-box h2.more-info-title{ color: #414244; /* this will change the "More Info" Popup More Info text color */ } .videosection .content-status-grid{ color: #0D6EFD!important; background: #fff!important; padding-left: 6px!important; margin-bottom: 10px!important; padding-right: 6px!important; padding-top: 1px!important; padding-bottom: 1px!important; position: absolute !important; right: 5.5% !important; top: 2% !important; font-size: 10px !important; } .videosection .content-status-grid.cont-notstarted, .cont-notstarted-label{ color: #0D6EFD!important; /* this will change the "Not Started" text color */ background: #fff!important; /* this will change the "Not Started" background color */ padding-left: 6px!important; margin-bottom: 10px!important; padding-right: 6px!important; padding-top: 1px!important; padding-bottom: 1px!important; position: absolute; right: 5.5%; top: 2%; font-size: 10px; } .videosection .content-status-grid.cont-inprogress, .cont-inprogress-label{ color: #0D6EFD!important; /* this will change the "In Progress" text color */ background: #fff!important; /* this will change the "In Progress" background color */ padding-left: 6px!important; margin-bottom: 10px!important; padding-right: 6px!important; padding-top: 1px!important; padding-bottom: 1px!important; position: absolute; right: 5.5%; top: 2%; font-size: 10px; } .videosection .content-status-grid.cont-completed, .cont-completed-label{ color: #0D6EFD!important; /* this will change the "Completed" text color */ background: #fff!important; /* this will change the "Completed" background color */ padding-left: 6px!important; margin-bottom: 10px!important; padding-right: 6px!important; padding-top: 1px!important; padding-bottom: 1px!important; position: absolute; right: 5.5%; top: 2%; font-size: 10px; } .videosection .content-status-grid.cont-enrolled, .cont-enrolled-label{ color: #0D6EFD!important; /* this will change the "Enrolled" text color */ background: #fff!important; /* this will change the "Enrolled" background color */ padding-left: 6px!important; margin-bottom: 10px!important; padding-right: 6px!important; padding-top: 1px!important; padding-bottom: 1px!important; position: absolute; right: 5.5%; top: 2%; font-size: 10px; } .content-status-list-due.cont-notstarted{ color: #fff!important; /* this will change the "Not Started" text color */ background: #0D6EFD !important; /* this will change the "Not Started" background color */ padding-left: 9px!important; margin-bottom: 10px!important; padding-right: 10px!important; padding-top: 2px!important; padding-bottom: 2px!important; left: 70%; top: 54px; position: relative; } .content-status-list-due.cont-inprogress{ color: #fff!important; /* this will change the "In Progress" text color */ background: #0D6EFD !important; /* this will change the "In Progress" background color */ padding-left: 9px!important; margin-bottom: 10px!important; padding-right: 10px!important; padding-top: 2px!important; padding-bottom: 2px!important; left: 70%; top: 54px; position: relative; } .content-status-list-due.cont-completed{ color: #fff!important; /* this will change the "Completed" text color */ background: #0D6EFD !important; /* this will change the "Completed" background color */ padding-left: 9px!important; margin-bottom: 10px!important; padding-right: 10px!important; padding-top: 2px!important; padding-bottom: 2px!important; left: 70%; top: 54px; position: relative; } .content-status-list-due.cont-enrolled { color: #fff!important; /* this will change the "Enrolled" text color */ background: #0D6EFD !important; /* this will change the "Enrolled" background color */ padding-left: 9px!important; margin-bottom: 10px!important; padding-right: 10px!important; padding-top: 2px!important; padding-bottom: 2px!important; left: 70%; top: 54px; position: relative; } .cont-progress-bar > label { background: #e6e6e6; /* this will change the "progrss bar default background color */ } .cont-progress-bar label label{ background: #12D440; /* this will change the "progrss bar completed % background color */ } .overdue-text{ color: #12d440; /* this will change the due date text color */ } /*Resume video document popup*/ #video-alert .modal-header h4{ color: #000000; /* this will change the Resume video - popup title color */ } #video-alert .modal-header .close { color: #000000; /* this will change the Resume video - popup close icon color */ opacity: 1; /* this will change the Resume video - popup close icon opcity */ } #video-alert .video-alert-btn a{ background: #1976d2; /* this will change the Resume video - button background color */ color: #ffffff; /* this will change the Resume video - button text color */ } #video-alert .video-alert-btn a:hover{ background: #1976d2; /* this will change the Resume video - button hover background color */ color: #ffffff; /* this will change the Resume video - button hover text color */ } /* Carousel menu in Channel & Activity dashboard */ .home-tab-block.carousel-menu-wrap .tab-tops { background: #dee6e9; /* this will change the slide menu background color */ display: none !important; } div.home-tab-block.carousel-menu-wrap .tabs-menu li a.tab-link { color: #000; /* this will change the slide menu text color */ } div.home-tab-block.carousel-menu-wrap .tabs-menu li a.tab-link:hover { color: #000; /* this will change the slide menu text onhover color */ } .home-tab-block.carousel-menu-wrap .tabs-menu li.current a.tab-link:after { border-color: #000000; /* this will change the slide menu active border color */ } /* Expanded Profile Page */ .users-dashBoard .user-tophead { background: #0D6EFD; } .users-dashBoard .btn.btn-info.download_btn.right-btn { background: #0D6EFD; border: 1px solid#ffffff !important; color: #fff; } .users-dashBoard .btn.btn-info.download_btn.right-btn:hover{ background: #fff; border: 1px solid #0D6EFD !important; color: #0D6EFD; } .users-dashBoard .user-login h5, .users-dashBoard .user-login .h5{ color: #0D6EFD; } .users-dashBoard .download_btn{ color: #FFFFFF; background-color: #0D6EFD; } .users-dashBoard .download_btn:hover{ color: #0D6EFD; background-color: #FFFFFF; border: 1px solid #0D6EFD; } .users-dashBoard .users-left-col{ border-right: 1px solid #FF6900; } /* Terms and condition checkbox */ .users-dashBoard .kt-checkbox.kt-checkbox--success>input:checked~span { border: 1px solid #0D6EFD; background: #0D6EFD; } .users-dashBoard .kt-checkbox>span{ border: 1px solid #0D6EFD; } /* Preference*/ .users-dashBoard .custom_options_height label input[type=checkbox]:checked+.custom_name:before{ background: #0D6EFD; } .users-dashBoard .custom_options_height label input[type=checkbox]+.custom_name:before{ border: 2px solid #0D6EFD; } .add_ct_table ul.addct_tblhead li { background: #0D6EFD !important; } .stripe-sidebar { padding-top: 20px !important; } #offline .copy-activation-code, #share-link .copy-linkurl { background: #0D6EFD !important; } .sub-visible-content .prof-sub-title p { line-height: 50px !important; } /*UI Acadamic*/ p, a, body { font-family: 'Inter', sans-serif !important; } p, a, li { line-height: 20px; } body, .grey-loader, .right-content-section, .viewer-section.lp-viewer-section{ background-color: #ffffff; } .page-title-wrap.new-page-title-wrap, .page-title-wrap.mydashboard-title-wrap, .lp-detail-description, .survey-title-wrap { padding: 40px 20px 18px 0; margin-right: 0 !important; height: 226px; background-position: center; background-size: 10px 10px; background-color: #F2FAFF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='220%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffffff' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffffff' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffffff' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffffff' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFFFFF' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23f3faff' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23e7f6ff' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23dcf1ff' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23d0edff' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23C4E8FF' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; border-top:4px solid #fff; } .lp-detail-page .lp-detail-description { padding-left: 30px; padding-top: 20px; } .survey-title-wrap{ padding:15px 30px; border-top:1px solid #e4e2e2; } .lp-detail-description-wrap h1, .lp-detail-description-wrap .long-description h2, .lp-detail-description-wrap .long-description h3, .lp-detail-description-wrap .long-description h4, .lp-detail-description-wrap p, .lp-detail-description-scroll, .survey-desc-wrap h3{ color: #454545; } .bread-crumbs-section, .lp-back-detail-btn{ padding: 8px; min-height: auto; background: #fff; } .bread-crumbs-section.vassessment-bc { background-image: radial-gradient(#f1eeee 1px, #fbfbfb 0%); background-position: 0 0; background-size: 10px 10px; padding-left: 10px; } .paddingtop_95 { padding-top: 20px; } .result-list-view{ background: transparent; } .cr-top-menu.no-login-user .search-result-sec{ padding-top:0px; } .content-list-view-blk:hover, .wrap-file-icon-channel.content-list-2876.-wrap.ng-star-inserted:hover{ background: #F3F8FF !important; border-radius: 10px !important; border: 1px solid #85B7FE !important; } .videosection .content-status-grid.cont-inprogress, .content-status-list-due.cont-inprogress, .cont-inprogress-label, .videosection .content-status-grid.cont-completed, .content-status-list-due.cont-completed, .cont-completed-label, .videosection .content-status-grid.cont-enrolled, .content-status-list-due.cont-enrolled, .cont-enrolled-label, .videosection .content-status-grid, .videosection .content-status-grid.cont-notstarted, .content-status-list-due.cont-notstarted, .cont-notstarted-label{ background: transparent; padding-left: 0; } #more-info-box h2.more-info-title i{ top:17px; } .slide-outer-box.islp, .slide-outer-box { border: 1px solid #ffffff !important; background: #ffffff; box-shadow: 0px 3px 10px 1px rgb(0 0 0 / 13%); border-radius: 5px; min-height: 323px; } .lp-detail-view-enabled .videosection .item { width: 40% !important; } .slide-outer-box.islp:after{ display: none; } .slide-outer-box.islp.slide-outer-box:hover{ box-shadow: 0px 7px 28px rgb(32 33 36 / 30%) !important; } .video-post{ border-radius: 0; padding-top: 52.4%; } .cont-progress-bar > label{ height: 8px; } .result-list-view .title-col h4 a, .videosection .video-cont h4 a, #more-info-box .modal-header h4 { color: #202124; font-size: 14px; margin-bottom: 5px; line-height: 21px; font-weight: 600; } span.breadcrumbs-slash{ padding-left: 14px; padding-right: 14px; } .content-list-view-blk{ border: 1px solid #EFF0F1 !important; background: #F8F9FA !important; height: 163px !important; border-radius: 10px !important; margin-bottom: 4px; width: 95%; } .back-to-top a { background: #0067df; width: 40px; height: 40px; line-height: 30px; box-shadow: 0px 2px 2px 0px #054ea5; } .channel_bc li a, .awards-section h2, .page-banner h1 { font-size: 24px; color: #000000; } .breadcrumb-item, .back-text, a.lp-back-detail-btn i{ font-size: 12px; color: #0067df; padding:0; } a.lp-back-detail-btn i{ font-size: 16px; padding-right: 4px; } .lp-back-detail-btn{ height: 37px; display: block; } .breadcrumb-item i { font-size: 14px; } .breadcrumb-item.active, .breadcrumb-item:hover, #more-info-box h2.more-info-title { color: #0D6EFD; } .item-info-popup li, .list-package-tags li, #package-details .tags-list li, #category-package-details .tags-list li, #more-info-box .tags-list li { background: #66C7D6 !important; } .breadcrumb-item+.breadcrumb-item:before { color: #0067df; font-size: 14px; line-height: 14px; vertical-align: middle; margin-top: -1px; } .search-sidebar-fixed { background: #ffffff; padding-top: 0; padding-left: 29px; padding-right: 0; top: 214px; position: absolute; margin-left: 0; } .advance-search-page .channel_bc { margin-top: 0; margin-left: 0; } .showing-results.page-full-view .search-grid-col { width: 20%; } .videosection .video-cont h4 { min-height: 90px; } .advance-search-page .result-grid-view { margin-top: 20px; } .search-filter-icon, .results-title{ display: none; } .search-sidebar-fixed .reset-btn input, .search-sidebar-fixed .reset-btn input:hover, .search-sidebar-fixed .reset-btn input:focus { height: auto; border: none; width: auto; background: none; color: #222121; } .showing-results.page-full-view{ margin-left: 300px; padding-top:30px; padding-left: 0; padding-right: 0; } .search-sidebar-fixed form.search-form { margin: 15px 0 25px 0; width: 100%; display: block; } .filter-category .panel-heading, .filter-category .panel-subtitle, .filter-category .panel-collapse{ border:none } .filter-category .panel-heading h4:before { position: absolute; content: ""; top: 20px; z-index: -1; left: 0; right:0; } .filter-category h4.panel-title a { color: #222121; font-size: 16px; display: inline; background: #fff; padding-right: 20px; font-weight: 600; } .user-ratings.custom-rating-icon { display: none; } .search-sidebar-fixed form label:before { background: #fff; border: 1px solid #aaaaaa; border-radius: 0; padding-right: 10px; margin-top: 2px; } .filter-category .panel.panel-default { margin-bottom: 15px; } .filter-scroll .mCSB_scrollTools .mCSB_draggerRail { background: #c0c0c0; } .search-sidebar-fixed form label.selected:before { background-color: #0D6EFD; border-color: #0D6EFD; } .filter-category h4.panel-title a:hover, .filter-category h4.panel-title a:focus { color: #0D6EFD; } .search-sidebar-fixed .btn-outline-primary{ color: #0D6EFD; } .search-sidebar-fixed .btn-outline-primary:hover, .search-sidebar-fixed .btn-outline-primary:focus{ background-color: #0D6EFD; } .search-sidebar-fixed form label{ margin:10px 0; } .group-select button, a.sortby_menulink, a.selectall_menulink { box-shadow: none; border: 1px solid #fff; color: #202124; font-size: 14px; } .group-select .bootstrap-select.btn-group .dropdown-menu li a span.text { color: #454545 !important; } .group-select .bootstrap-select.btn-group .dropdown-menu li.selected a span.text, .group-select .bootstrap-select.btn-group .dropdown-menu li a:hover span.text, .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) { color: #0067df !important; } .filter-scroll .mCSB_scrollTools .mCSB_draggerRail, .filter-scroll .mCustomScrollBox:hover>.mCSB_scrollTools .mCSB_draggerRail { width: 6px; } .filter-scroll .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .filter-scroll .mCustomScrollBox:hover>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:4px; } .result-list-view .content-lock i { font-size: 10px; } .result-list-view .content-lock { top: 0px; left: 0px; border-radius: 0; height: 20px; } .result-list-view .videosection .v-name, .result-list-view .img-col .v-name { position: absolute; left: 0; top: 0; margin: 0; border-radius: 0; } .channel_bc{ margin-top:0; } .result-list-view .type-col{ line-height: 75px; } .chl-list-view-blk .rating-col{ margin-top:18px; } .tab-header > ul { border-bottom: 2px solid #e5e5e7; } li.current .chnl-tab-link, .awards-tab-menu li.active { color: #0D6EFD !important; border-bottom: 2px solid #0D6EFD !important; font-weight: 600 !important; font-size: 17px !important; } .chnl-tab-link, .awards-tab-menu li{ font-weight: 600 !important; font-size: 17px !important; } .awards-section{ background: #eaf0f8 !important; } .overview-box li{ width: 430px !important; } .overview-box li h3{ display: flex !important; float: left !important; } .overview-box li .current-best{ margin-top: 0px !important; display: flex !important; } .overview-box li .current-best h4{ padding: 0px 5px !important; } a.register-btn-header{ background: #001433; } a.register-btn-header:hover{ background: #001433; } a.login-btn-header{ background: #fff; border: #BDC1C6 1px solid; color: #202124 !important; font-size: 14px !important; padding: 6px 17px !important; } a.login-btn-header:hover{ background: #fff; border: #0D6EFD 1px solid; color: #0D6EFD !important; } .cr-top-menu ul.navbar-nav.page-menu li a:hover, .cr-top-menu ul.navbar-nav.page-menu li a.active{ border-bottom: 4px solid #0D6EFD; color: #202124; } .language-filter .mat-form-field-infix { padding: 6px !important; border-radius: 0px !important; width:50px !important; } .group-select .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width: 80% !important; } .group-select button, a.selectall_menulink, a.sortby_menulink{ padding-left: 12px !important; } .language-info-icon{ padding-left: 10px !important; display:none; } .chl-enroll-btn { color: #353535 !important; border: 1px solid #808080 !important; } .chl-enroll-btn:hover { background: none !important; color: #353535 !important; } .mat-form-field-infix{ min-width: 90px !important; } /* bellow css needs to disable 1.Sort by 2.Search 3.List view & Grid view buttons 4.Category menus, 5.Learning Path Banner header 6.Footer 7.I'm done with the lesson, 8.Learning Plan Title Action disabled, 9.Learning Plan Button disabled (info - popup); */ .chnl-detail-content .page-title-wrap.new-page-title-wrap, .chnl-detail-content .tab-header, .channel-list-sec .sortby_main, .channel-list-sec .search-form, .channel-list-sec .tab-header, .videosection span.v-timing, .search-hide-filter .selectall_main, .content-scorm-percentage, .lp-detail-top-section, .am-done-with-the-lession, .lp-detail-section-list .third-nav, .channel-info-popup .launch-pop-wrap, .total-viewed-duration, .selectall_main, .search-head-top .search-inner-blk .library-btn, .upgrade-menu, .key-menu, .cart-menu, .cr-top-menu .search-head-top .input-group-btn, .custom-content-image .custom-default-icon{ display: none; } .channel-count, .videosection .slide-outer-box.islp span.viewcount.duration-count, .search-filter i{ display: block; } .search-filter i { top: 1px !important; right: 0px !important; background: #8c8c8c !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 14px !important; padding-bottom: 10px !important; color:#fff !important; } .right-content-section.mydashboard-section { padding-bottom: 50px; } .circle-prog-bar label{ margin-top:13px; } .channel-detail-blk{ margin-top:0; } .search-form input{ border-color:#808080; border-radius: 0; } .assessments-page-category{ margin-top:20px; } .chl-list-view-blk .circle-prog-bar, .list-view-blk .circle-prog-bar { margin-top: 10px; display: none; } .cont-status-col span{ margin-top:60px; } .like-info-col.list-col { margin-top: 18px; } .result-list-view .like-info-col.list-col a.user-like-btn { margin-top: 24px; display: none; } .mobile-menu-slide span { background: #fff !important; margin-top: 0px; } .topmenu-close-btn { top: -47px; background: #fff; color: #000; font-weight: 400; left: 15px; padding: 0; } .cr-top-menu .hdrgt_main .hdrgt_menulink { height: 26px; width: 26px; background: #353c4a; } .cr-top-menu .hdrgt_main .hdrgt_menulink span { background: #353c4a; color: #ffffff; font-size: 14px; line-height: 27px; height: 26px; width: 26px; } .hdrgt_menulink:after{ display: none; } .hdrgt_menulink:before { font-family: "Font Awesome 5 Pro"; content: "\f107"; position: absolute; right: -16px; color: #202124; top: 3px; } .cr-top-menu .notification-bell { color: #202124; margin-top: 4px; font-size: 20px; } .cr-top-menu span.top-menu-search { margin-top: 9px; color: #353c4a; margin-right: 0; display:none; } .show-channel-list-btn{ left: unset !important; right: 18% !important; top: 65px !important; } .cr-top-menu.login-user .page-banner h1{ padding-top:0; } #more-info-box .modal-content{ border-radius: 0; } #more-info-box h2.more-info-title { border-bottom: 1px solid #ccc; padding: 12px; font-size: 18px; } #more-info-box h2.more-info-title button i, #more-info-box .more-info-title button.close{ color: #454545; } .channel-content-lists:before{ right: 97px !important; } .channel-content-lists li{ height: 90px; border-radius: 10px; width: 80%; margin-left: 123px; margin-bottom: 25px; } .more-info-action-col{ margin: 16px; } .channel-content-lists .channel-certificate.lp-detail-certificate{ height: 90px !important; border-radius: 10px !important; width: 80%; margin-left: 123px; border: 1px solid #85B7FE !important; } .more-info-action-col .action-btns .action-btn, .channel-content-lists:before, #more-info-box .launch-pop-wrap a { background: #0D6EFD; color:#ffffff; border: 1px solid #0D6EFD; border-radius: 3px; } .more-info-action-col .more-info-btn, .show-channel-list-btn span, .channel-detail-blk a.user-info-btn-dot label, .channel-content-lists .user-info-btn-dot label{ color: #202124; padding-top: 7px; } .show-channel-list-btn span{ width: 60px !important; height: 40px !important; font-size: 20px !important; border-radius: 4px !important; border: 1px solid #BDC1C6 !important; } .search-sidebar-fixed .reset-btn { position: absolute; top: 55px; right: 1px; z-index: 1; } .channel-detail-blk .chl-list-view-blk .title-col h4 a { font-size: 14px; color: #454545; } .channel-detail-blk .chl-list-view-blk .title-col p{ font-size: 11px; } .lp-detail-description-wrap h1, .survey-desc-wrap h3{ font-size: 30px; } .like-info-col.list-col a.user-info-btn-dot{ padding:0; } .channel-detail-blk .like-info-col.list-col a.user-info-btn-dot{ margin-top: 20px; } .footer-menu{ background: #0067df; } .brand-box { border: 1px solid #0D6EFD; box-shadow: none; } .lp-progress-bar span span, .content-progress-all span{ background-color: #12D440; } .lp-detail-tabs .lp-tabs-menu { border-color: #ccc; } .chl-list-view-blk .content-list-view-blk .img-col a, .result-list-view .content-list-view-blk .title-col h4 a, .tags-list.channel-list li, .list-view-blk .img-col a, .chl-list-view-blk .img-col a{ pointer-events: none; color: #202124; font-size: 18px; margin-bottom: 5px; line-height: 21px; font-weight: 600; } .cr-top-menu.no-login-user { padding-top: 0; } a.user-info-btn-new.ng-star-inserted { padding-right:10px; display: none; } span.viewcount.duration-count.ng-star-inserted { float: left; right: 155%; padding-top: 1px; } span.category-tag.ng-star-inserted{ position: absolute; left: 0%; top: 41%; color: #FFF; font-size: 11px; font-weight: 500; letter-spacing: 0.75px; line-height: 13px; background: #40919D; padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; display:none; } span.difficulty-tag.ng-star-inserted { position: absolute; right: 0%; top: 2%; color: #FFF; font-size: 11px; letter-spacing: 0.28px; line-height: 13px; background: #4F4F4F; padding-left: 6px; padding-right: 5px; padding-top: 3px; padding-bottom: 3px; display:none; } .save-notes-btn:focus, .save-notes-btn{ background: #0D6EFD !important; } /* File type icons */ .custom-default-icon.file-icon-videoassessment img, .custom-default-icon.file-icon-survey img, .custom-default-icon.file-icon-assessment img, .custom-default-icon.file-icon-assessments img, .custom-default-icon.file-icon-scorm img, .file-icon-videoassessment.default-cont-thumb img, .file-icon-survey.default-cont-thumb img, .file-icon-assessment.default-cont-thumb img, .file-icon-assessments.default-cont-thumb img { display: none!important; } #more-info-box figure.file-icon-videoassessment, #more-info-box figure.file-icon-survey, #more-info-box figure.file-icon-assessment, #more-info-box figure.file-icon-assessments, #more-info-box figure.file-icon-scorm, .custom-default-icon.file-icon-videoassessment, .custom-default-icon.file-icon-survey, .custom-default-icon.file-icon-assessment, .custom-default-icon.file-icon-assessments, .custom-default-icon.file-icon-scorm, .file-icon-videoassessment a, .file-icon-survey a, .file-icon-scorm a, .file-icon-assessment a, .file-icon-assessments a, .file-icon-scorm.default-cont-thumb .demo-lp-cnt, .file-icon-assessments.default-cont-thumb .demo-lp-cnt { background-repeat: no-repeat; background-position: center center; } #more-info-box figure.file-icon-scorm.default-cont-thumb, .custom-default-icon.file-icon-scorm, .file-icon-scorm.default-cont-thumb a, .file-icon-scorm.default-cont-thumb .demo-lp-cnt { background-image: url('images/fileType/scorm.png'); background-size: 26px; } .file-icon-scorm.default-cont-thumb .demo-lp-cnt, .file-icon-assessments.default-cont-thumb .demo-lp-cnt, .file-icon-survey.default-cont-thumb .demo-lp-cnt, .file-icon-videoassessment.default-cont-thumb .demo-lp-cnt { width: 36px; height: 36px; } #more-info-box figure.file-icon-assessment.default-cont-thumb, #more-info-box figure.file-icon-assessments.default-cont-thumb, .custom-default-icon.file-icon-assessment, .custom-default-icon.file-icon-assessments, .file-icon-assessment.default-cont-thumb a, .file-icon-assessments.default-cont-thumb a, .file-icon-assessments.default-cont-thumb .demo-lp-cnt { background-image: url('images/fileType/quiz.png'); } #more-info-box figure.file-icon-survey.default-cont-thumb, .custom-default-icon.file-icon-survey, .file-icon-survey.default-cont-thumb a, .file-icon-survey.default-cont-thumb .demo-lp-cnt { background-image: url('images/fileType/survey.png'); } #more-info-box figure.file-icon-videoassessment.default-cont-thumb, .custom-default-icon.file-icon-videoassessment, .file-icon-videoassessment.default-cont-thumb a, .file-icon-videoassessment.default-cont-thumb .demo-lp-cnt { background-image: url('images/fileType/asignment.png'); } /**Regular Fonts**/ .more-info-title-wrap li, .long-desc-wrap p, .item-info-popup li, .list-package-tags li, #package-details .tags-list li, #category-package-details .tags-list li, #more-info-box .tags-list li, .launch-pop-wrap a, #more-info-box .lp-desc-meta p, .title-col p, .chnl-tab-link, .awards-tab-menu li, .videosection span.viewcount, .circle-prog-bar label, .circle-prog-bar label span, .videosection .content-status-grid, .overdue-text, ul li.my-acnt .hdrgt_menu ul li a, .cont-status-col span, .users-dashBoard .accordion-form label, .cr-top-menu .footer-menu ul.navbar-nav.page-menu li a, .lp-detail-content .long-description li { font-family: 'Inter', sans-serif !important; } /**SemiBold Fonts**/ h1, h2, h3, h4, h5, #more-info-box .modal-header h4, #more-info-box .lp-desc-meta span, #more-info-box .modal-body h5, .cr-top-menu ul.navbar-nav.page-menu li a, .result-list-view .title-col h4 a, .chl-list-view-blk .title-col h4 a, .result-list-view .title-col h4 a, .videosection .video-cont h4 a, .channel_bc li a, .awards-section h2, .page-banner h1, .breadcrumb-item, .filter-category h4.panel-title a, li.current .chnl-tab-link, .awards-tab-menu li.active, #more-info-box h2.more-info-title, .dropbtn, .lp-detail-description-wrap h1, .users-left-col h6, .users-dashBoard .accordion .card .card-header, .users-dashBoard .accordion.accordion-toggle-arrow .card .card-header .card-title.collapsed, .lp-back-detail-btn, .lp-detail-tabs .lp-tabs-menu li a.active, .custom-page-name, .lp-detail-tab-info .sec-count, .certificate-outer-wrap.locked-certificate .cetrify, .lp-certificate-wrap .cetrify, .lp-certificate-wrap .sidebar-tab-heading, .lp-certificate-wrap .certificate-icon-wrap span, .start-learn, .lp-detail-tab-btn span, .brand-box.lp-last-viewed-content h3, .lp-detail-section-list h3, .lp-detail-section-lists h4, .lp-detail-section-lists h4 a, .brand-box-top .module-count, .lp-comment-text h3, .learning-path-progress-text-wrap, .lp-comment-form input[type="submit"], .lp-comments .comment_reply .cmnt-btn, #certificate-download-msg p, #lp-certificate-message p, .user-ratings p.total-count, .lp-detail-content .new-demo-version p, .new-demo-version .upgrade-btn, .lp-detail-view-enabled .lp-detail-section-lists h4, .lp-detail-view-enabled .lp-detail-section-lists h4 a, #lp-certificate-message #completionMessage, #lp-certificate-message #completionMessage *, #lp-certificate-message h3 { font-family: 'Inter', sans-serif !important; } .learning-path-top-sec h1, .lp-detail-tab-info h3, .lp-details-info-list h5, .lp-detail-view-enabled .lp-detail-tabs .lp-tabs-menu li a, .long-description h1, .long-description h2, .long-description h3, .long-description h4, .long-description h5, .long-description h6, .lp-details-info h3 { font-family: "InterBold", "OpenSansSemiBold"; } .filter-category .panel-subtitle span:after, .filter-category .panel-heading h4 a:after, .filter-category .panel-subtitle span.active.opened:after, .filter-category .panel-heading.opened h4 a:after, .filter-category .panel-subtitle span.active:after { width: 8px; height: 8px; border-radius: 0; right: 5px; top: 5px; border: none; border-left: 1px solid #000; border-bottom: 1px solid #000; cursor: pointer; transform: rotate(-45deg); } .filter-category .panel-subtitle span.active.opened:after, .filter-category .panel-heading.opened h4 a:after { transform: rotate(135deg); top: 8px; } .filter-category .panel-subtitle span.active:after, .filter-category .panel-subtitle span.active.opened:after{ top:14px; width:6px; height: 6px; } .filter-category .panel-subtitle span.active.opened:after { top: 17px; } .selected-tags-list li:hover, .selected-tags-list li.clearall{ color:#0067df; } .sortby_main { position: absolute; right: -20px; top: 133px; } ul.selected-tags-list { width: calc(100% - 385px); float: left; margin-left: 20px; margin-top: -15px; } ul.selected-tags-list.language-filter-enabled{ width: calc(100% - 650px); } .sortby_main label, .page-title-wrap .language-filter form label { font-size: 13px; margin-right: 10px; margin-top: 6px; font-weight: 400; } .page-title-wrap .language-filter form label{ margin-right:6px; display: none; } .sortby_main label:after, .page-title-wrap .language-filter form label:after { content: ":"; padding-left: 2px; } .sortby_main .group-select button{ padding-top:5px; height: 30px; } .group-select-cr-notshown { display : none; } .search-text-info span{ font-weight: 800; } .search-text-info { color: #222121 !important; font-size: 22px !important; font-weight: 600 !important; } .advance-search-page .result-list-view { margin-left: 5px; margin-top: 22px; } .new-dashboard .content-view-button { position: absolute; top: -50px; display: none; right:15px; } .cr-top-menu .search-head-top { right: 125px; top: 35px; } .cr-top-menu .search-head-top .input-group .form-control { height: 31px; box-shadow: none; border: 1px solid #e6e5e5; border-radius: 0; } .cr-top-menu .search-head-top .input-group.add-on{ width:235px; } .modal-body.share-pop-wrap { } .dashboard-sub-menu li:first-child a{ padding-left: 5px; } .dashboard-search .check-box input[type=checkbox]:checked+label:before{ color:#0067df; } .trophycase-list.list-view li .dashboard-cer-download { bottom: 15px; position: absolute; right: 25px; } .content-view-button a{ margin-left: 18px; } .content-view-button a.list-view-btn{ float: right; } .channel-detail-blk span.show-channel-list-btn, .class-filtered .content-view-button { display: none; } .cr-top-menu ul.navbar-nav.page-menu li a.deactive.active { font: "InterSemiBold", "OpenSansSemiBold"; color: #0c0c0c; border-bottom: 2px solid transparent; } @media screen and (max-width: 1280px) { .slide-outer-box{ min-width: 291px !important; max-width: 291px !important; } span.viewcount.duration-count.ng-star-inserted{ padding-top: 23px !important; } .right-content-section .prof-sub-title { width: 170px !important; } } @media screen and (min-width: 1019px) and (max-width: 1100px) { /* .advance-search-page .showing-results.page-full-view .search-grid-col { width: 51% !important; } */ } @media screen and (min-width: 600px) and (max-width: 1020px) { /* .advance-search-page .showing-results.page-full-view .search-grid-col { width: 51% !important; } */ } @media screen and (min-width: 1021px) and (max-width: 1100px) { .showing-results.page-full-view .search-grid-col { width: 50% !important; } } @media only screen and (max-width: 1024px){ .advance-search-page .showing-results.page-full-view .search-grid-col { width: 50%; } .header-menu .navbar-nav { padding: 12px 86px 12px 12px !important; } } @media screen and (min-width: 1280px) and (max-width: 1400px) { .advance-search-page .showing-results.page-full-view .search-grid-col { width: 33% !important; } } @media screen and (min-width: 1401px) and (max-width: 1450px) { .advance-search-page .showing-results.page-full-view .search-grid-col { width: 32%!important; } } @media screen and (min-width: 1100px) and (max-width: 1279px) { .advance-search-page .showing-results.page-full-view .search-grid-col { width: 42% !important; } } @media screen and (min-width: 1279px) and (max-width: 1400px) { /* .advance-search-page .showing-results.page-full-view .search-grid-col { width: 25% !important; } */ } @media screen and (min-width: 1751px) and (max-width: 1840px) { .showing-results.page-full-view .search-grid-col { width: 25% !important; } } @media screen and (min-width: 100px) and (max-width: 660px){ .advance-search-page .showing-results.page-full-view .search-grid-col { width: 100%!important; } } @media screen and (min-width: 769px) and (max-width: 950px){ .advance-search-page .showing-results.page-full-view .search-grid-col { width: 51%!important; } } @media only screen and (max-width: 1024px){ .list-view-blk .img-col, .chl-list-view-blk .img-col{ width:80px; display: none; } .result-list-view .title-col, .chl-list-view-blk .title-col{ width:400px; } } @media screen and (min-width: 1451px) and (max-width: 1750px) { .showing-results.page-full-view .search-grid-col { width: 31% !important; } } @media screen and (min-width: 1366px) and (max-width: 1367px) { .videosection .video-cont h4 { min-height: 95px; } .cr-user-notlogged .videosection .video-cont h4 { min-height: 105px; } .chnl-detail-content .chl-list-view-blk .like-info-col { width: 75px; } .dashboard-search .search-form{ width:238px; } } @media screen and (min-width: 100px) and (max-width: 768px) { .home-slide-content .videosection{ width:100%; } .channel-content-lists .channel-certificate.lp-detail-certificate{ width: 100%; margin-left: 0px; } .more-info-action-col{ margin: 0px; } .channel-content-lists li{ margin-left: 0px; width: 100%; padding-left: 0px; } .list-view-blk .content-list-view-blk, .chl-list-view-blk .content-list-view-blk{ padding-left: 0px; } .content-list-view-blk{ width: 100% !important; } .lp-detail-section-wraps .lp-detail-tab-content .sortby_main{ top:-40px; display: none; } .cr-top-menu .login-register-btn { right: 31px !important; } .cr-top-menu.no-login-user .search-result-sec{ padding-top:0; } .cr-top-menu .mobile-menu-slide{ background: #000 !important; padding: 6px 6px 3px 6px !important; left: 90% !important; } .sortby_main label{ margin-top: 0px; } .channel_bc li a, .awards-section h2, .page-banner h1{ font-size: 30px; } .page-title-wrap.new-page-title-wrap, .page-title-wrap.mydashboard-title-wrap, .bread-crumbs-section{ padding: 10px 10px 10px 0; } .showing-results.page-full-view { margin-left: 0; padding-top: 0; } .save-notes-btn:focus, .save-notes-btn { background: #0D6EFD !important; } .search-sidebar-fixed { background: #ffffff; padding-top: 15px; padding-left: 15px; padding-right: 15px; top: 55px; position: absolute; z-index: 9; padding-bottom: 15px; margin-left: -300px; width: 300px; border: 1px solid #ccc; border-left: none; } .search-sidebar-fixed .search-filter-icon { display: block; background: #fff; border: 1px solid #ccc; border-left: none; top: 63px; } .advance-search-page .search-text-info { margin: 0; text-align: right; } .certificate-icon-wrap span { margin-bottom: 4px !important; } .cr-top-menu .notification-bell { font-size: 16px; line-height:14px } .hdrgt_menulink:before { right: -12px; top: 7px; font-size: 14px; } .result-list-view .title-col h4 a, .videosection .video-cont h4 a { font-size: 14px; } .like-info-col.list-col { margin-top: 8px; } .result-list-view .title-col, .chl-list-view-blk .title-col { width: calc(100% - 140px); } .lp-detail-description-wrap h1 { font-size: 20px; } .breadcrumb-item{ padding-left:0; } .cr-top-menu span.top-menu-search{ margin-top:8px; } .new-dashboard .content-view-button{ top:0; } .dashboard-sub-menu li:before{ top:6px; } .cr-top-menu .search-head-top { right: 35px; width: auto; left: 0; top: 44px; } .cr-top-menu .search-head-top .input-group.add-on { width:100%; } .sortby_main{ top: 64px; } ul.selected-tags-list { width: 100%; margin-left: 0; margin-top: 0; } .cr-top-menu ul.navbar-nav.page-menu { /* border-bottom: 4px solid #0D6EFD !important; */ } .title-col p > span{ min-width: 0px !important; margin-right: 0px !important; } .content-status-list-due { margin: 30px 0 0 -260px !important; } .cont-status-col span.content-status-list-due { margin: 25px !important; bottom: 0px !important; right: 0px !important; } .result-list-view .like-info-col.list-col a.user-info-btn-new, .result-list-view .like-info-col.list-col a.user-like-btn{ margin-top: 0 !important; } .result-list-view .like-info-col.list-col a.user-like-btn{ padding-top: 3px !important; } } @media screen and (min-width: 768px) and (max-width: 769px) { .cr-top-menu .notification-bell { font-size: 20px; margin-top: 5px; } .topmenu-close-btn { top: -47px; left: 17px; padding: 1px 4px; } .mobile-menu-slide{ border:none; top: 17px; } .result-list-view .list-view-blk, .result-list-view .chl-list-view-blk{ max-width:100% } } @media screen and (min-width: 300px) and (max-width: 768px) { .cr-top-menu ul.navbar-nav.page-menu li a, .dropbtn{ color: #111 !important; } .page-title-wrap.new-page-title-wrap, .page-title-wrap.mydashboard-title-wrap, .lp-detail-description, .survey-title-wrap{ line-height: 54px !important; } .top-notification-lists { width: 370px !important; } .cr-top-menu .notification-bell{ color: #000; } li.cart-menu a.nav-link, .notification-bell, .header-mobile-search, li.cart-menu a.nav-link:hover{ /* background-color: #222222 !important; */ border: none !important; } .cr-top-menu ul.navbar-nav.page-menu{ top: 107px !important; left: 147px !important; } .showing-results.page-full-view{ } .page-title-wrap .language-filter{ right: 0 !important; top: 118px !important; position: absolute; } .sortby_main{ right: 45px !important; } .slide-outer-box{ min-width: 291px !important; max-width: 291px !important; } span.viewcount.duration-count.ng-star-inserted{ padding-top: 0px !important; } #more-info-box .launch-pop-wrap{ width: 100%; margin-bottom: -53px; } .right-content-section .prof-sub-title{ width: 170px !important; } .lp-certificate-wrap .certificate-icon-wrap { top: 23px; right: 10px; left: 62%; } .lp-certificate-wrap .certificate-icon-wrap span { font-size: 10px; padding: 5px 10px 5px 18px; } .cr-page-learningpath-viewer .certificate-outer-wrap.locked-certificate .lp-detail-certificate .certificate-trophy-icon{ left: 5%; } } @media screen and (max-width: 768px) and (min-width: 480px){ .result-list-view .title-col, .chl-list-view-blk .title-col { width: calc(100% - 210px); } .cr-top-menu .search-head-top .input-group.add-on { width: 235px; top: -41px; right: 72px; float: right; } } @media (max-width: 1150px){ .cr-top-menu .dropdown { display: inline-block; } } @media screen and (max-width: 767px) and (min-width: 100px){ .lp-viewer-section .stripe-sidebar { display: none !important; } } .cr-user-logged.cr-page-content-catalog .result-list-view .content-list-view-blk .title-col h4 a { pointer-events: inherit; } .cr-user-logged.cr-page-content-catalog .back-category a { color: #333; } .page-title-wrap .language-filter { right:240px; top:88px; position: absolute; } .language-filter .mat-form-field-infix { padding: 6px; border: 1px solid #fff; background: transparent; width:150px; } .cr-page-learning-paths .tab-header > ul{ padding-right: 490px; } #lp-certificate-message .modal-content { border: 0; } /**RSHARE EDITS **/ .uitube-outer-box { height: 285px; background: #fff; position: relative; border-radius: 7px; box-shadow: 5px 2px 11px #e5e5e5; overflow: hidden; border: 1px solid #d0d0d0; } .gridsection .bx-wrapper .bx-next:before, .gridsection .bx-wrapper .bx-prev:before, .gridsection .owl-nav div.owl-next:before, .gridsection .owl-nav div.owl-prev:before, .gridsectionFor .bx-wrapper .bx-next:before, .gridsectionFor .bx-wrapper .bx-prev:before, .gridsectionFor .owl-nav div.owl-next:before, .gridsectionFor .owl-nav div.owl-prev:before { background: #e7e7e7; content: '\279C'; width: 50px; height: 50px; right: 2px; position: absolute; top: 46%; z-index: 0; border-radius: 50%; color: #252525; text-indent: 0; font-size: 30px; text-align: center; line-height: 50px; } .uitube-request .uitube-plus { border: 1px solid #555555; display: inline-block; width: 24px; height: 24px; border-radius: 50%; color: #5e5e5e; text-align: center; font: 22px/21px OpenSansSemiBold; } .header-mobile-search{ display: none; } .lp-detail-section-wraps .lp-detail-tab-content .sortby_main { position: absolute; right: 0px; top: 10px; } .lp-detail-view-enabled .lp-detail-section-wraps .page-title-wrap.new-page-title-wrap{ height: 0px; } .learner-desc { font-weight: 400 !important; font-size: 13px !important; line-height: 19px; color: #333 !important; font-family: sans-serif, Arial, Verdana, "Trebuchet MS" !important; word-break: break-word; } strong { font-weight: bold !important; } .assesmentv3 .description_content p { font-size: 13px !important; font-family: sans-serif, Arial, Verdana, "Trebuchet MS" !important; color: #333 !important; } em { font-style: italic !important; }