/* Minification failed. Returning unminified contents. (1549,12): run-time error CSS1038: Expected hex color, found '#0009' */ /*------------------------------------------------------------------ [ 5.7 ] Modal Dialog Boxes */ .modal-dialog .GenericContainer h2 { font-size: 26px; line-height: 22px; margin-top: 10px; font-weight: 400; } #adminCourseChangeModal { /* z-index: 99999999999; */ } /* NEED TO VALIDATE */ #adminCourseChangeModal .ui-jqgrid tr.jqgrow { cursor: pointer ; } .modal ~ span.select2-container.select2-container--default.select2-container--open { z-index: 999999999999; } #MyBody .modal-dialog .toplinks.helpMenu { color: #646464 !important; } /*------------------------------------------------------------------ [ 5.7.1 ] FAQ Modal Location: Course.js, Modal_Core and Modal_Course.js, Course_1.Master.cs */ #FAQModal { display: none; } #FAQModal .container { -webkit-touch-callout: initial; -webkit-user-select: initial; -html-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; user-select: initial; } #FAQModal a#rp { display: none; } #FAQModal .edit-resource { float: right; color: #5a8b6e; text-decoration: none; font: 13px "Open Sans"; margin-right:40px} #FAQModal .search_catalog:before { content: '\e902'; float: right; position: absolute; left: 30px; font-family: 'icomoon_EL' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; font-size: 34px; margin-top: 12px; color: #807f7f; } #FAQModal .searchFAQ { width: 95% !important; font: 1.25rem / 3 sans-serif; height: 39px; max-width: 780px; padding: 8px 8px 8px 50px; border-radius: 12px; background: #f7f7f7; border: 0; box-shadow: -2px 7px 7px -8px #8a8a8a; margin-right: 30px; } #FAQModal .searchFAQ::placeholder { font: 1.25rem/3 sans-serif; } [class*="cust_bg_target"] .FAQAns { background-color: transparent !important; } #FAQModal .loader { text-align: center; } #FAQModal .spinner { margin: 0 auto; border: 6px solid #f3f3f3; /* Light grey */ border-top: 6px solid #3498db; /* Blue */ border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #FAQModal .FAQAns .doctypeframe { width: 100% !important; } #FAQModal .FAQAns .hidden-search-text { display: none; } #FAQModal .FAQAns.no-padding { padding: 0px !important } .FAQEnt { -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s; margin: 10px 5px 10px 5px; position: relative; } .modernBullet .FAQEnt { background-color: #f8f8f8; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; padding: 0px; box-shadow: 0 1px 2px #E6E6E6; } .modernBullet .FAQEnt:hover { box-shadow: 0 1px 2px #d0d0d0; box-shadow: 0 1px 2px #C1C1C1; } .classicBullet .FAQEnt { margin-right: 10px; margin-bottom: 10px; margin-left: 10px; padding: 0; box-shadow: 0 2px 0px #bebebe; } .classicBullet .FAQEnt:hover { box-shadow: 0 2px 0px #97d173; } .FAQQuestion { cursor: pointer; display: inline; } .modernBullet .FAQQuestion { margin: 0; padding: 7px; display: block; position: relative; word-break: break-word; } .modernBullet .FAQQuestion a { font-weight: 500; font-size: 16px; } .modernBullet:not(.spin):not(.plus) .FAQQuestion::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); right: 32px; position: absolute; right: 24px; top: 50%; height: 2px; width: 13px; background: #8EA2B1; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; content: ''; box-sizing: border-box; } .classicBullet .FAQQuestion { margin: 0; padding: 7px; display: block; position: relative; word-break: break-word; } .classicBullet .FAQQuestion a { font-weight: 500; font-size: 16px; } .classicBullet:not(.spin):not(.plus) .FAQQuestion::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); right: 32px; position: absolute; right: 24px; top: 50%; height: 2px; width: 13px; background: #8EA2B1; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; content: ''; box-sizing: border-box; } .FAQAns { background-color: #FFFFFF; padding: 20px; transition-property: background-color; -webkit-transition-duration: 0.7s; -moz-transition-duration: 0.7s; transition-duration: 0.7s; position: relative; z-index: 1; font: normal 14px Verdana; color: #565656; } .FAQAns:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .modernBullet:not(.spin):not(.plus) .FAQQuestion.content-visible::before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .modernBullet:not(.spin):not(.plus) .FAQQuestion::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; right: 15px; top: 50%; height: 2px; width: 13px; background: #8EA2B1; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; content: ''; box-sizing: border-box; } .modernBullet:not(.spin):not(.plus) .FAQQuestion.content-visible::after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .classicBullet:not(.spin):not(.plus) .FAQQuestion.content-visible::before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .classicBullet:not(.spin):not(.plus) .FAQQuestion::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; right: 15px; top: 50%; height: 2px; width: 13px; background: #8EA2B1; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; content: ''; box-sizing: border-box; } .classicBullet:not(.spin):not(.plus) .FAQQuestion.content-visible::after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .faqSectionHeader { -webkit-transition-duration: 0.7s; -moz-transition-duration: 0.7s; transition-duration: 0.7s; padding: 2px; padding-left: 5px; margin-bottom: 5px; margin-left: -5px; margin-right: 0px; border-radius: 3px; } .FAQSectionHighlight { background: #fdf5ce; color: #c77405; } .advanced_filtering_box { overflow: hidden; border: 1px solid rgb(229, 229, 229); margin: -24px -2px -2px 2px; width: 470px; box-sizing: border-box; padding: 21px 0px 12px 9px; } .advanced_filtering_box div { float: left; } .advanced_filtering_box .UserSearchTitle { padding-top: 3px; padding-left: 5px; } .advanced_filtering_box > div { margin-bottom: 10px; } /* spin style resource */ ul.spin .FAQQuestion { display: block; padding: 11px 35px; font-size: 20px; font-weight: 600; color: #fff; background-color: inherit; border: none; position: relative; transition: all 0.3s ease 0s; background-color: #bbb; } ul.spin .FAQQuestion a { color: #fff; font-weight: bold; } ul.spin .FAQQuestion:after { content: "\ed61"; color: inherit !important; font-family: 'icomoon_EL'; font-weight: 900; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background: inherit; text-align: center; font-size: 23px; border: 5px solid #fff; position: absolute; top: -1px; left: -20px; transition: all 0.3s ease 0s; } ul.spin .FAQQuestion:hover:after { content: "\e90b"; } ul.spin .FAQQuestion.content-visible:after { content: "\e90b"; } ul.spin .FAQQuestion:hover:after { transform: rotate(360deg); } /* plus style resource */ ul.plus .FAQQuestion { display: block; position: relative; padding: 10px 30px 10px 60px; background-image: url(/App_Themes/Images/1x1_fff.png) !important; font-size: 18px; font-weight: 700; color: #000; border-style: solid; border-width: 1px; border-color: #e0e0e0; background-color: #ccc; } ul.plus .FAQQuestion:before { width: 40px; height: 100%; content: "\ed61"; font-family: 'icomoon_EL'; font-weight: 900; font-size: 25px; color: #fff !important; position: absolute; top: 0px; left: 0px; z-index: 2; transition: all 0.3s ease 0s; background: #ccc; line-height: 2; text-align: center; } ul.plus .FAQQuestion.content-visible:before { content: "\e90b"; } ul.plus .FAQAns { border: 1px solid rgba(204, 204, 204, 0.47); } /* free form resource */ .freeform_bg_zindex_override::before { z-index: -1; } /* modern resources and custom backgrounds - offset the custom background so that it doesnt overlap the header the background MUST be dynamically applied on FAQEnt (outer wrapper), NOT FAQAns (inner content wrapper) all these problems stem from the fact I changed the bg target to FAQAns from FAQEnt for logical reasons to avoid that ugly background application to the accordion header... by doing this, it for whatever reason is creating this mess, so I'm back to applying the background at the outer container...but with a twist.. I push the covering background down, so that it doesnt overlap the header! same clean result, but without all these annoying css bugs. */ .FAQEnt[class*="cust_bg_target_"]::before { margin-top: 36px!important; } /*offset the custom background DOWN to not overlap the accordion header!*/ /*ul.plus .FAQAns:before { content: ""; display: block; width: 40px; height: 100%; background: rgba(0,0,0,0.05); position: absolute; top: 0; left: 0; }*/ /*------------------------------------------------------------------ [ 5.7.2 ] Contact Modal Location: Catalog.js,Modal_Core and Modal_Course.js, Course_1.Master */ #ContactModal { display: none; } .btnContactCustom { font-size: 12px; text-decoration: underline; position: absolute; right: 30px; } .contactModal .contactSubHeading { font-size: 26px; line-height: 22px; margin-top: 10px; font-weight: 400; } .contactName, .contactEmail, .contactMessage { float: left; } .contactEmail { margin-left: 40px; } .contactName b, .contactEmail b, .contactMessage b { font-family: 'Open Sans'; color: #6e6e6e; font-weight: 400 !important; } .contactName input, .contactEmail input { width: 225px !important; display: block; } .contactMessage textarea { height: 100px; width: 504px !important; display: block; } .contactSend { clear: both; } .contactSend .btn { width: 516px; height: 50px; font-size: 20px; margin-top: 20px; background-color: #75A646; color: #fff !important; text-transform: uppercase; outline: none; max-width: 52%; margin: auto !important; display: block; margin-top: 20px !important; } .contactSend .btn:hover { background-color: #659539; } #ContactStudentModal #txtMessage { visibility: hidden; } #AdminContactModal a.YardiHelp { display: none !important; } #AdminContactModal.modal.in { overflow: hidden; } /*------------------------------------------------------------------ [ 5.7.3 ] Activity Modal Location: Modal_Core and Modal_Course.js GlobalAdmin.aspx, StudentHistory.aspx, Starred.aspx */ .filterbg { min-height: 51px; border: 1px solid #F5F5F5; width: 800px; margin-right: auto; margin-left: auto; z-index: 1; position: relative; top: +5px; border-radius: 2px; margin-top: 0px; } .chapterbg { color: #6D6D6D; text-decoration: none; -ms-word-wrap: break-word; word-wrap: break-word; } .chapterbg1 { background-color: #F6F6F6; color: #6D6D6D; text-decoration: none; -ms-word-wrap: break-word; word-wrap: break-word; } .chapterbg h3, .chapterbg1 h3 { color: #6D6D6D; font: 600 14px 'Open Sans'; } .ActivityTitle:hover { text-decoration: none !important; } .ActivityTitle:link, .ActivityTitle:visited { text-decoration: underline; } .ActivityModalData { padding-top: 5px; } ul.ETLHeader { margin-left: 10px; float: left; margin-right: 30px; color: #565656; } ul.ETLHeader li:first-child { list-style: none; margin-left: -20px; font-weight: 600; text-decoration: underline; } /*------------------------------------------------------------------ [ 5.7.4 ] Student Achievement Modal Location: AjaxMethods.asmx */ #StdtAchievement h1 { border-bottom: 2px solid #ddd; min-width: 100px; display: inline; padding-right: 15px; padding-bottom: 5px; color: #777; } .awardBadge.notearned, .LockedAchivements .awardBadge { opacity: .8; } .awardBadge.notearned, .LockedAchivements .awardBadge img { filter: grayscale(1); } .awardBadge { cursor: auto; text-align: center; position: relative; margin: 10px 9px 22px 9px; width: 180px; float: left; box-sizing: border-box; min-height: 100px; height: 180px; } .awardBadge:hover .tileTitleAchieve { height: auto; } .awardBadge:hover { z-index: 10; margin-left: -20px; margin-right: -20px; width: 238px; height: 180px; opacity: 1; } .awardBadge .awardBageWrapper { position: relative; background: #fff; transition: background .5s; } .awardBadge:hover .awardBageWrapper { min-height: 105px; padding: 10px 10px 10px 10px; margin: -50px 0px 0px -20px; transition: margin .3s,min-height .3s,width .3s,padding .3s; box-shadow: 3px 5px 30px -8px #000; border-radius: 8px; } .awardBadge .imgAchieve { min-width: 45px; min-height: 35px; margin: 10px 0 10px 0; height: 90px; } .awardBadge .tileTitleAchieve { color: #555; display: block; margin: 0; font-size: 18px; padding-left: 5px; height: 44px; padding-right: 5px; line-height: 21px; overflow: hidden; } .awardBadge .awardBageWrapper_Desc { padding: 0 10px; display: none; height: 80px; text-align: left; overflow-y: auto; } .awardBadge:hover .awardBageWrapper_Desc { display: block; margin-top: 15px; } .awardBadge .awardBage_earned { display: none; font-size: 15px; } .awardBadge:hover .awardBage_earned { display: block; margin-top: 15px; } .awardBadge:hover .imgAchieve { height: 110px; } .LockedAchivements .awardBadge:hover .imgAchieve { height: 64px; } .LockedAchivements .awardBadge:hover .awardBageWrapper_Desc { height: 290px; } .LockedAchivements .awardBadge:hover .awardbagewrapper_actions { list-style: none; padding-left: 0; margin-top: 6px; } .LockedAchivements .awardBadge:hover .awardbagewrapper_actions li { background: #f7f7f7; margin: 5px 0px; padding: 1px 2px; border-bottom: 2px solid #8bbcef; border-radius: 2px; } /*shadow 3D effect */ .awardBadge:hover .awardBadge_shadow { animation: tilt 3s ease-in-out 2; overflow: hidden; position: relative; } .awardBadge:hover .awardBadge_shadow::after { content: ""; z-index: 4; width: 74%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.4) 50%, transparent ) no-repeat; top: 0; animation: bg-shift 3s ease-in-out 2; position: absolute; left: 10%; animation-fill-mode: forwards; } @keyframes tilt { 0% { transform: perspective(200px) rotatey(20deg); } 50% { transform: perspective(200px) rotatey(-20deg); } 100% { transform: perspective(200px) rotatey(20deg); } } @keyframes bg-shift { 0% { background-position: -100px; } 50% { background-position: 100px; } 100% { background-position: -100px; } } /*End of shadow 3D effect */ /*------------------------------------------------------------------ [ 5.7.5 ] Glossary All Modal Location:Modal_Core and Modal_Course.js, AjaxMethods.asmx */ .glossAllEditLink { float: right; margin-right: 30px; text-decoration: underline; font-weight: bold; color: #c86800; } .glossAllHeadDiv { font-weight: bold; } .glossAllHeadDiv a { font-size: 17px !important; } .glossAllHeadDevide { font-size: 5pt; position: relative; top: -3px; } .glossAllHeadActive { padding: 0px 2px 0px 2px; cursor: pointer; } .glossAllTitle { font-weight: bold; } .glossAllCatTitle { font-weight: bold; font-size: 17px; } .glossAllBodyDiv { font-size: 11pt; } .glossAllBodyDiv p { margin-left: 10px; } /*------------------------------------------------------------------ [ 5.7.6 ] Catalog Detail Modal Location: CatalogDetail.aspx, Modal_Core and Modal_Course.js */ /*Related Tab*/ .relatedcoursesheader { font: normal 14px 'Open Sans'; margin-bottom: 3px; background-color: #fff; } .relatedcoursesheader:first-letter { text-transform: capitalize; } .relatedcoursesdiv .RelatedTitle { font: 600 15px 'open sans'; padding-bottom: 7px; display: block; } #CatalogDetailModal .relatedcoursestext { margin: -3px 0 10px 0; padding: 5px 5px 5px 25px; background-color: rgb(255, 255, 255); position: relative; } #CatalogDetailModal .relatedcoursesdiv, #pnlEvent .relatedcoursesdiv { width: 100%; margin-top: 20px; margin-bottom: -34px; margin-left: -20px; background-color: #f4f4f4; box-shadow: inset 0px 20px 16px -16px #bbbbbb; padding: 15px 20px 20px 20px } .relatedInfo { font: normal 14px 'open sans'; } .relatedInfo p { margin: 0; width: 99%; display: inline-block; } .relatedcoursestextelem { position: absolute; right: 0; top: 0; bottom: 0; width: 130px; background-color: #e6e6e6; padding-top: 20px; padding-left: 30px; } /*Course Tab*/ #CatalogDetailContent .courseList { width: 100% !important; margin-left: 5px; margin-top: 15px; } #CatalogDetailContent .courseList .coursename { width: 450px !important; font-size: 16px; } #CatalogDetailContent .courseList .CoursenameSpan { width: 397px !important; } #CatalogDetailContent .thumblist { left: 5px; margin: 6px 20px 15px -9px; width: 103px; } #CatalogDetailContent .thumblist .SwitchSpace { display: none; } #CatalogDetailContent .search { right: 5px; } #CatalogDetailContent .courseThumb .coursename { width: 251px !important; } #CatalogDetailContent .courseThumb li { margin-left: 16px; } #tabstyle { background-image: url(); line-height: 28px; border: 1px solid #9ea9ae; overflow: auto; margin-top: 5px; } /*Track Tab*/ #CatalogDetailContent .TrackDetailNOTCollapsedCD { width: 724px; padding-left: 0px; padding-bottom: 0; padding-top: 10px; } #CatalogDetailContent .TrackDetail .Description { width: 515px; } #CatalogDetailContent .TrackListpnl { padding-bottom: 5px !important; } #CatalogDetailContent .courseList.TrackList { width: 718px !important; } #CatalogDetailContent .TrackDetail .thumTrkImgDiv { margin-right: 30px; } #CatalogDetailContent .courseList.TrackList .coursename { width: 447px !important; } #CatalogDetailContent .TrackDetail .CompleteBy { margin-top: 10px; position: absolute; right: 180px; bottom: 18px; width: 160px; margin-right: 0px; } #CatalogDetailContent .TrackDetail .Progress { float: right; margin: 0px 44px 10px 0px; width: 155px; } #CatalogDetailContent .DueBy .GlossMessage { position: absolute; width: 147px; left: -160px; top: -7px; margin-top: 0px !important; } #CatalogDetailContent .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 734px; } #CatalogDetailContent .gdvwiki .MainWiki { width: 580px !important; } #CatalogDetailContent .chaptersdiv { padding-top: 15px; clear: both; } #CatalogDetailContent .divCatalogDetailMessage { top: 5px; text-align: right; right: 20px; position: fixed; z-index: 22; border: #f1f1f1 1px solid; padding: 10px; background-color: rgb(250,250,250); background-color: rgba(250, 250, 250, 0.8); } .CatalogDetailActions { text-align: right; height: 13px; padding-top: 5px; padding-right: 15px; position: relative; z-index: 20; left: -40px; top: 6px; } #CatalogDetailContent .QuestionExplanation { width: 85%; } #CatalogDetailContent h1 { font-size: 15px; } .WelcomeHeader { margin: 2px 0px 8px 20px; font: bold 23px Arial, Helvetica, sans-serif, Calibri; } .CatalogDueBy { color: #797979; float: left; width: 100%; padding-left: 20px; padding-top: 2px; padding-bottom: 1px; } .CatalogDueByExpiring { color: rgb(171, 111, 111); float: left; width: 100%; padding-left: 20px; padding-top: 2px; padding-bottom: 1px; } /* edit link */ .courseModalEditLink { position: absolute; right:10px; color: #C86800; font-weight: bold; text-decoration: none; font: 700 13px'Open Sans'; } /* region Track Modal preview in LP - admin */ .TrackDetail .TrackLogo, .TrackDetail_Modal .TrackLogo { max-height: 70px; max-width: 135px; overflow: hidden; min-height: 55px; transition: all 0.15s ease-in; } .TrackDetail:hover .TrackLogo { width: 105px; max-height: 135px; max-width: 105px; } .TrackDetail_Modal .Description { margin: 10px 0px 15px 0px; max-width: 550px; width: calc(100% - 133px); float: left; font: normal 13px arial; color: #7c7c7c; } .TrackDetail_Modal .TrackName { font: normal 18px 'Open Sans', sans-serif; font-weight: 600; color: #757575 !important; max-width: 550px; width: calc(100% - 133px); margin: 20px 0px 0px 0px; } .TrackDetail_Modal .thumTrkImgDiv { width: 75px; border: 2px solid white; margin: 22px 70px 10px 6px; min-height: 60px; } span.DueBy.due2 { background-color: #ffe8e8; padding: 10px 20px; top: -52px; position: absolute; right: 74px; } .TrackDetail_Modal { width: 100%; float: left; } .TrackDetail_Modal .trackCourseList { width: 98%; max-width: 850px; margin: 20px auto 0px auto; padding: 0px; list-style: none; clear: both; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .TrackDetail_Modal .trackCourseList li { height: 34px; margin-bottom: 8px !important; clear: both; border-bottom: 2px solid #CCC; border: 1px solid #E0E0E0; background-color: #FCFCFC; border-radius: 4px; overflow: hidden; position: relative } .TrackDetail_Modal .trackCourseList .MainSection { float: left; width: 75%; background-color: #FcFcFc; } .TrackDetail_Modal .trackCourseList .statusdivbg { float: right; width: 186px; background-color: #FAFAFA; height: 40px; border-left: 1px solid #DDD; height: 46px; position: absolute; right: 0px; } .TrackDetail_Modal .trackCourseList .coursename { margin: 6px 5px 0px 4px; font: normal 15px 'Open Sans', sans-serif; color: #696969; font-weight: 600; width: calc(100% - 71px) !important; box-sizing: border-box; height: 144px; } .TrackDetail_Modal .trackCourseList .CoursenameSpan { width: 100%; box-sizing: border-box; overflow: hidden; padding-left: 10px; font: normal 14px 'Open Sans', sans-serif; color: #696969; } .TrackDetail_Modal .trackCourseList .lblStatus { text-transform: uppercase; font-size: 14px; font-weight: bold; margin-top: 4px; display: block; opacity: .8; font-family: 'Open Sans'; font-weight: 600; margin-left: 10px; } .TrackDetail_Modal .trackCourseList li:hover .lblStatus { opacity: 1; } .TrackDetail_Modal .trackCourseList .thumImgDiv { width: 49px; text-align: center; height: 37px; overflow: hidden; } .TrackDetail_Modal .trackCourseList .thumImg { max-height: 37px; max-width: 50px; float: left; } .TrackDetail_Modal .trackCourseList .BtnAction { height: 35px; width: 44px; text-align: center; color: white !important; opacity: .9; } .TrackDetail_Modal .trackCourseList li:hover .BtnAction { opacity: 1; } .TrackDetail_Modal .trackCourseList .BtnAction a { color: white !important; position: relative; top: +7px; padding: 8px 10px 10px 10px; font-size: 16px; } .TrackDetail_Modal .trackCourseList .ProgressBar { width: 100px; height: 19px; margin-left: 10px; margin-top: 3px; border: 0px; border-bottom: 1px solid #b1b1b1 !important; border-radius: 0px; position: relative; overflow: visible; background: none !important; } .TrackDetail_Modal .trackCourseList .ProgressInnerlbl { position: absolute; margin-top: 0px; margin-left: 40px; z-index: 1; text-shadow: 0px 1px 2px #FFF; font-size: 11px; font-weight: normal; } .TrackDetail_Modal .trackCourseList .margintopFlexible { margin-top: 4px; } .TrackDetail_Modal .trackCourseList .flex_btn1 { /* sliding right image */ background: #FFF url('images/admin.png') no-repeat 0px; width: 28px; height: 37px; } .TrackDetail_Modal .trackCourseList .flex_btn1 span { /* background left image Continue*/ display: none; } .TrackDetail_Modal .trackCourseList .statusdivbg .GetStarted, .TrackDetail_Modal .trackCourseList .statusdivbg .Continue { margin-left: 15px; } .TrackDetail_Modal .trackCourseList li:hover .GetStarted, .TrackDetail_Modal .trackCourseList li:hover .Continue { color: #20c17e; } .TrackDetail_Modal .trackCourseList .statusdivbg .Completed { margin-left: 10px; } .TrackDetail_Modal .trackCourseList li:hover .Completed { color: #345f77; } .TrackDetail_Modal .trackCourseList .statusdivbg .Action { margin-left: 10px; } .TrackDetail_Modal .trackCourseList li:hover .Action { color: #9e5d5d; } .TrackDetail_Modal .trackCourseList .statusdivbg .Expired { margin-left: 10px; } .TrackDetail_Modal .trackCourseList li:hover .Expired { color: #82879c; } .TrackDetail_Modal .trackCourseList .statusdivbg .Signup { margin-left: 10px; } .TrackDetail_Modal .trackCourseList li:hover .Signup { color: #b28a35; } .TrackDetail_Modal .trackCourseList .statusdivbg .GetStartedButton { background-color: #77d05a; } .TrackDetail_Modal .trackCourseList .statusdivbg .ContinueButton { background-color: #e6d664; } .TrackDetail_Modal .trackCourseList .statusdivbg .CompletedButton { background-color: #66c0e2; } .TrackDetail_Modal .trackCourseList .statusdivbg .ActionButton { background-color: #ab6f6f; } .TrackDetail_Modal .trackCourseList .statusdivbg .ExpiredButton { background-color: #e06666; } .TrackDetail_Modal .trackCourseList .statusdivbg .SignupButton { background-color: #c59e4f; } .TrackDetail_Modal .trackCourseList li:hover .SignupButton { background-color: #b28a35; } .TrackDetail_Modal .trackCourseList .statusdivbg .NotCompleted_Class { background-color: #28d08a; } .TrackDetail_Modal .trackCourseList li:hover .NotCompleted_Class { background-color: #20c17e; } .TrackDetail_Modal .trackCourseList .statusdivbg .Completed_Class { background-color: #42718b; } .TrackDetail_Modal .trackCourseList li:hover .Completed_Class { background-color: #345f77; } .TrackDetail_Modal .trackCourseList li:hover .coursename { color: #555555; } .TrackDetail_Modal .trackCourseList li:hover { border: 1px solid #bfbfbf; } .TrackDetail_Modal .trackCourseList .adminmode { float: right; position: relative; top: -21px; background-color: #FCF1F1; padding: 2px 5px 2px 5px; font: 600 11px 'open sans'; color: #4F0808; } .TrackDetail_Modal .trackCourseList .Expired .statusdivbg .StatusMSG { color: #C87173; font-size: 12px; margin-left: 5px; height: 26px; margin-top: -7px; } .Expired .statusdivbg .GetStartedButton, .Expired .statusdivbg .ContinueButton { background-color: #C87173 !important; } /* #endregion */ /* #region Events signup modal */ .EventCatalogs { margin-top: 10px; margin-bottom: 6px; } .EventCatalogs .Title { font: bold 15px arial; width: 100%; color: #5F5F5F; } .EventCatalogs #lblEventOrgName:before { content: 'INSTRUCTOR'; display: block; top: 25px; left: 10px; } .EventCatalogs #lblEventOrgName, .EventCatalogs #lblEventOrgEmail, .EventCatalogs #lblEventOrgTitle { position: relative; top: 25px; left: 10px; } #CatalogDetailModal #pnlEvent { padding-top: 128px; } #CatalogDetailModal .prereqlist + div#pnlEvent { padding-top: 60px; } #CatalogDetailModal #pnlEvent .hideWhenRecommend { margin-right: 0px; margin-top: -83px; } #CatalogDetailModal #pnlEvent .CatalogDetailActions { padding-right: 0px; } #CatalogDetailModal #pnlEvent .CatalogDetailActions a { float: right; color: #C86800; font-weight: bold; text-decoration: none; font: 700 13px'Open Sans'; margin-bottom: 25px; position: absolute; top: -150px; right: 14px; } #CatalogDetailModal #pnlEvent .CatalogDetailActions a#lblDuplicateEvent { right: 64px; } /* French (France) */ [lang="fr"] #CatalogDetailModal #pnlEvent .CatalogDetailActions a#lblDuplicateEvent, [lang="fr-CA"] #CatalogDetailModal #pnlEvent .CatalogDetailActions a#lblDuplicateEvent { margin-right: 10px; } #CatalogDetailModal #divLocationDetail.EventCatalogs { clear: both; width: 100%; margin-left: 20px; margin-bottom: 32px; margin-top: 0px; float: none; } #CatalogDetailModal #lblEventTags, #lblEventSkills { font-weight: 600; font: 600 13px 'Open Sans'; display: block; } #CatalogDetailModal #lbtnEventSingup, #hplSecAction, #lbtnTakeEventTest, #lbtnTakeEventSurvey { padding: 16px 51px; color: #fff !important; text-transform: uppercase; background-color: #0065C9; margin-right: -20px; margin-left: 23px; border: 0px; box-shadow: 5px -10px 15px -5px rgba(255, 255, 255, 0.1); background: radial-gradient( at top right, #5bda2c, #398c37); font-size: 18px; } #CatalogDetailModal #lbtnCancelEventSignup { padding: 7px 24px !important; color: #fff !important; text-transform: uppercase; background-color: #0065C9; margin-top: 18px; margin-right: -20px; border: 0px; background: radial-gradient( at top right, #c2c2c2, #888888); font-size: 15px; } #CatalogDetailModal #lbtnJoinSession { padding: 16px 51px; color: #fff !important; text-transform: uppercase; background-color: #0065C9; margin-right: -20px; margin-left: 23px; border: 0px; box-shadow: 5px -10px 15px -5px rgba(255, 255, 255,.10); background: radial-gradient( at top right, #5bda2c, #398c37); font-size: 18px; display: block ; margin-top: 10px; } #CatalogDetailModal .JoinLinkURL { display: none } #CatalogDetailModal.notAssigned #lbtnJoinSession { display: none } #CatalogDetailModal #BlankThemeBody_liEventSignup .icomoon-clock { position: absolute; top: 65px; right: -2px; font-size: 25px; color: #125b9d; padding-left: 4px; } #CatalogDetailModal .modal-dialog.margin10.event { background-color: white; max-width: 955px; min-width: 725px; padding: 13px 20px; box-sizing: border-box; min-height: 37px; } #CatalogDetailModal .modal-dialog.margin10.event .GenericContainer:before { content: ''; width: 87%; height: 136px; background-color: #F0F0F0; position: absolute; margin-top: -28px; margin-left: -20px; background-repeat: no-repeat; background-size: contain; box-sizing: border-box } #CatalogDetailModal #lblEventDescription table { max-width: 100%; padding-top: 15px; } #CatalogDetailModal #divInstructorDetail .imgEventOrg { border-radius: 173px; position: relative; width: 175px; height: 173px; background-repeat: no-repeat; background-size: cover; z-index: 36; background-position: center center; display: block; } #CatalogDetailModal #divInstructorDetail { float: left; width: 41% !important; box-sizing: content-box; margin-left: 20px !important; margin-bottom: 26px !important; height: 263px; } #CatalogDetailModal #lblEventName { color: #444; text-transform: uppercase; position: absolute; top: 0px; font-size: 20px; width: 80%; left: 0px; } #CatalogDetailModal #lblEventDate { font-size: 16px; height: 30px; font-weight: bold; } #CatalogDetailModal #lblEventTime { font-size: 14px; } #CatalogDetailModal #lblEventTimeZone { font-size: 12px; } #CatalogDetailModal #lblOwnUpcoming { font: 500 15px 'open sans'; } #CatalogDetailModal .eventDescription { /*font-family: Muli;*/ overflow-wrap: break-word; word-wrap: break-word; word-break: break-word;} #CatalogDetailModal .eventDescription p { margin-top: 8px; } #CatalogDetailModal #modalfooter { display: none } #CatalogDetailModal #pnlCourseSkills a { padding: 9px; background-color: #f1f1f1; display: inline; margin: 5px; text-decoration: none; float: left; transition: transform .1s; } #CatalogDetailModal #pnlCourseSkills a:hover { transform: scale(1.08); } #CatalogDetailModal .Testirow { margin: 19px 0px; } #CatalogDetailModal .Testirow:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #CatalogDetailModal .Testirow .PosterProfile { width: 103px; text-align: center; cursor: pointer; } #CatalogDetailModal .Testirow .PosterProfile .logocontainer { border-radius: 70px; width: 70px; height: 68px; overflow: hidden; margin: 0 auto; } #CatalogDetailModal .Testirow .PosterProfile .logocontainer:after { content: attr(data-init); text-align: center; width: 61px; margin: 0 auto; height: 63px; padding: 31px 0 0 2px; background-color: #e7e7e7; position: absolute; top: 0; left: 20px; border-radius: 100%; box-sizing: border-box; color: #4a4a4a; font-size: 19px; line-height: 0; letter-spacing: 2px; text-transform: uppercase; } #CatalogDetailModal .Testirow .PosterProfile .logocontainer .logobg { border-radius: 68px; position: relative; width: 70px; height: 68px; background-repeat: no-repeat; background-size: cover; z-index: 36; background-position: center center; display: block; } #CatalogDetailModal .Testirow .MainWiki { width: 80%; background: #ECF0F1; padding: 10px 10px 5px 10px !important; border-radius: 5px; box-sizing: border-box; margin-top: 0px; position: relative; z-index: 9; } #CatalogDetailModal .Testirow .MainWiki:after { content: ""; position: absolute; left: -19px; top: 0px; border-left: 19px solid transparent; border-right: 25px solid transparent; border-top: 25px solid #ECF0F1; z-index: -1; } #CatalogDetailModal .attendeeswidget { width: 100%; margin-left: -20px; padding: 15px 20px 20px 20px; margin-bottom: 0px;position:relative } #CatalogDetailModal .attendeeswidget .attendeeswidget_heading { margin-bottom: 10px; width: 100%; font: bold 15px Arial,Helvetica,sans-serif,Calibri; color: #565656; margin-left: -20px; padding: 15px 20px 20px 20px; margin-bottom: 0px; box-shadow: inset 0 20px 13px -18px #d4d4d4; display: block; } #CatalogDetailModal .attendeeswidget .attendeeswidget_search { position: absolute; right: 0px; top: 15px; background-color: #e7e7e7; border-radius: 4px; padding: 3px 12px; } #CatalogDetailModal .attendeeswidget a.attendeeswidget_search:after { content: '\e902'; font-family: 'icomoon_EL' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; font-size: 32px; } #CatalogDetailModal .attendeeswidget .attendeeswidget_container { width: 100%; box-sizing: content-box; max-height: 280px; overflow: hidden; overflow-y: auto; } #CatalogDetailModal .attendeeswidget .attendeeswidget_container .recentattendee { position: relative; float: left; cursor: pointer; width: 149px; text-align: center; margin-top: 5px; margin-bottom: 28px; animation-duration: 350ms; opacity: 0; height: 105px; transition: transform .5s; } #CatalogDetailModal .attendeeswidget .attendeeswidget_container .recentattendee:hover { transform: scale(1.05); } #CatalogDetailModal .attendeeswidget .attendeeswidget_container .recentattendee.divViewMore { float: right; margin-right: 21px; } #CatalogDetailModal .attendeeswidget .attendeeswidget_container .recentattendee .logocontainer:after { content: attr(data-init); text-align: center; width: 66px; margin: 0 auto; height: 68px; padding: 34px 0px 0px 2px; background-color: #e7e7e7; position: absolute; top: 0; left: 42px; border-radius: 100%; box-sizing: border-box; color: #4a4a4a; font-size: 20px; line-height: 0; letter-spacing: 2px; text-transform: uppercase; } #CatalogDetailModal .attendeeswidget .attendeeswidget_container .recentattendee .logocontainer .logobg { border-radius: 68px; position: relative; width: 70px; height: 68px; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 36; background-position: center center; display: block; } #CatalogDetailModal .attendeeswidget .attendeeswidget_container .recentattendee .logocontainer { border-radius: 70px; width: 70px; height: 68px; overflow: hidden; margin: 0 auto; } #CatalogDetailModal .attendeeswidget .attendeeswidget_container .recentattendee .attendee_title { font-size: 12px; display: inline-block; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; line-height: 14px; } #CatalogDetailModal .attendeeswidget .attendeeswidget_container .recentattendee .attendee_dept { font-size: 12px; display: inline-block; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; line-height: 14px; } #CatalogDetailModal .attendeeswidget .attendeeswidget_container .recentattendee .moreattenddees { margin-top: 25px; font-size: 17px; background-color: rgba(66, 66, 66,0.68); color: #fff; transition: margin .3s, padding .3s; } #CatalogDetailModal .attendeeswidget .attendeeswidget_container .recentattendee .moreattenddees:hover { background-color: rgba(66, 66, 66,0.87); padding: 10px 14px; margin-top: 19px; } /* attendee styleing */ .attendeeswidget_container .OnlineStatus { height: 20px; width: 20px; position: absolute; top: 46px; left: 88px; z-index: 50; border-radius: 20px; border: solid #f5f5f5; } /*.attendeeswidget_container .OnlineStatus.OnlineStatus_Active { background-color: #0ca10c; } .attendeeswidget_container .OnlineStatus.OnlineStatus_Idol { background-color: #ffbc00; }*/ /* Temp Work for Chat */ #CatalogDetailModal { transition: background-color .2s, padding-right .3s; } #CatalogDetailModal .chat { display: none; right: 241px; z-index: -1; transition: right .3s !important; } #CatalogDetailModal.assigned { padding-right: 385px; } #CatalogDetailModal.assigned .chat { width: 350px; background-color: #efefef; position: absolute; right: -402px; margin-top: 0; top: 150px; box-sizing: border-box; bottom: -13px; border-radius: 0 2px 2px 0; padding-right: 7px; padding-top: 20px; display: block; z-index: 1; border-radius: 9px; } #CatalogDetailModal .CatalogDetailActions_top { text-align: right; height: 13px; position: absolute; z-index: 20; right: 56px; top: -12px; } #CatalogDetailModal .CatalogDetailActions_top a { float: right; color: #C86800; font-weight: bold; text-decoration: none; font: 700 13px'Open Sans'; margin-bottom: 25px; margin-left: 25px; } .ulQuickStyle { margin: 0px; padding: 0px; border-bottom: 1px solid #f1f3fa; } .ulQuickStyle li { padding-top: 0; font-size: 16px; letter-spacing: 0; text-align: left; min-height: 38px; margin-top: 1px; border-top: 1px solid #f1f3fa; box-shadow: none; line-height: 34px; list-style: none; cursor: pointer; padding-left: 20px; font-weight: 600; transition: background-color .3s; } .ulQuickStyle li:hover { background-color: #f1f1f1; } .ulQuickStyle li:hover:after { right: 15px; } .ulQuickStyle li:after { content: ''; color: #adadad; font-size: 14px !important;font-family: 'icomoon_EL' !important; speak: none; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; margin-top: 3px; right: 20px; transition: right .3s; } /*widget delayed animation on exposure*/ /* Chat Wall*/ .divChatWall_msg_wrapper { height: calc(100% - 3px); overflow: auto; } .chatEntry { margin: 17px 0 31px 10px; position: relative; opacity: 0; } .chatEntry .logocontainer { border-radius: 100%; width: 45px; height: 45px; overflow: hidden; margin: 0 auto; float: left; margin-top: 1px; z-index: 1; position: relative; } .chatEntry .logocontainer:after { content: attr(data-init); text-align: center; width: 40px; margin: 0 auto; height:40px; padding: 19px 0 0 2px; background-color: #fafafa; position: absolute; top: 1px; left: 0; border-radius: 100%; box-sizing: border-box; color: #4a4a4a; font-size: 15px; line-height: 0; letter-spacing: 2px; text-transform: uppercase; } .chatEntry .logocontainer .logobg { border-radius: 100%; position: relative; width: 40px; height: 40px; background-repeat: no-repeat; z-index: 36; display: block; background-size: cover; background-position: center center; } .chatEntry .logocontainer:not([Data-incognito]) { transition: transform .3s; cursor: pointer; } .chatEntry .logocontainer:not([Data-incognito]):hover { transform: scale(1.15); } .chatEntry .chatMessage { float: left; margin-left: 6px; background-color: #ffffff; padding: 5px; width: calc(100% - 65px); border-radius: 7px; margin-bottom: 7px; border-radius: 0 7px 7px 7px; } .chatEntry span.PostName { font-size: 13px; font-weight: 600; display: block; top: -20px; margin-left: -13px; cursor: pointer; position: absolute; transition: all .15s; } .chatEntry span.PostName:hover { font-size: 15px; font-weight: 600; display: block; top: -21px; cursor: pointer; margin-left: -15px; } .chatEntry span.PostDate { font-size: 10px; display: block; float:right } .chatEntry .strMessage { margin: 7px 0px; font-size:14px} .strMessage .refUser { font-size: 14px; font-weight: 600; color: #004dc1; font-style: italic; } .chat .txtChatMsg { width: 100%; MARGIN-LEFT: 6PX; MARGIN-TOP: -6px; outline: none; box-sizing: border-box; padding-top: 7px; padding-right: 41px; position: absolute; top: -120px; height: 76px; padding: 17px; border-radius: 5px; left: -7px; font-size: 14px; font-family: 'Open Sans'; } .chat .msgPost { width: unset; background-color: #277bb6; color: #fff; transition: padding .3s !important; position: absolute; right: 0px; font-size: 16px; outline: none !important; top: -40px; border-width: 0px; } .chat .msgPost:hover { background-color: #1e6ca2; color: #fff !important; padding: 4px 16px !important; } .msgPost:after { content: 'Send'; } .chat .AddToChat { } .chat .removeFromChat { padding: 1px 8px; opacity: 0.5; cursor:pointer; margin-left:2px; } .chat .divAddToChatSrc { display: none; } .chat a.cwLoadMore { margin: 20px 0 200px 0; display: inline-block; text-align: center; width: 100%; } .chat.cw-disabled textarea { pointer-events: none; opacity: 0.6; } .chat.cw-disabled a, .chat.cw-disabled .chatEntry, .chat.cw-disabled .chatHeader .btn-group { pointer-events: none; opacity:0.6; } .chat.cw-disabled .chatHeader .chatHeaderMember .removeFromChat { display: none !important; } .chat.cw-disabled .chatEntry .chatMessage { opacity: 0.6; } .chat:before { content: 'CHAT WITH YOUR PEERS '; color: #ffffff; position: absolute; top: -162px; font-size: 18px; right: 0px; font-weight: 600; z-index: 100; width: 100%; } /*chat Bubble*/ .chatMessage:before, .chatMessage:after { content: ""; position: absolute; height: 42px; width: 20px; top: 0PX; left: 34px; z-index: -1; } .chatMessage:before { background: #ffffff; } .chatMessage:after { background: #efefef; border-radius: 0 85% 0 0; } /* END Chat Wall*/ /* replay to panel */ .replyChatPanel { margin-top: 5px; z-index: 1; width: 100%; outline: none; box-sizing: border-box; position: absolute; top: -136px; height: 40px; border-radius: 5px 5px 0 0; left: -1px; background-color: #277bb6; color: #fff; font-size: 11px; padding: 6px 25px 0px 10px; overflow: hidden; line-height: 12px; } .replyChatPanel .removeReply { position: absolute; top: 7px; right: 8px; color: #fff; font-size: 18px; text-transform: lowercase; } .replyChatPanel .replyName { font-size: 14px; } .replyChatPanel .replyMsg { overflow: hidden; text-overflow: ellipsis; height: 14px; width: 79%; display: block; position: relative; white-space: pre; margin-top: 5px; font-size: 13px; } .replyChatPanel + textarea.txtChatMsg { top: -96px; height: 55px; } .chatEntry .btnReply { position: absolute; right: 4px; opacity: 1; transition: font-size.3s, margin .3s, color.3s; top: 0px; padding: 5px 4px 10px 10px; color: #b2b2b2; font-size: 12px;z-index:9} .chatEntry:hover .btnReply { opacity: 1; color: #0096ff; margin-right: 4px; font-size: 14px; background-color:#fff; } .chatEntry .replyChatPanel { top: 0px; left: 0; padding: 10px; height: unset; font-size: 13px !important; background-color: #F4F4F4; color: #393939; border-left: 5px solid #AAA; position:relative; } .chatEntry .replyChatPanel .replyMsg { overflow: visible; height: unset; margin-top: 5px; } ul.PrivateChatList:empty { border: 0px; content: 'You have no Conversations'; } ul.PrivateChatList:empty:after { content: 'You have no Conversations'; font-size: 17px; margin-top: 20px; display: block; } /* French (France) */ [lang="fr"] ul.PrivateChatList:empty::after { content: "Vous n'avez aucune conversation"; } /* French (Canada) */ [lang="fr-CA"] ul.PrivateChatList:empty::after { content: "Vous n'avez aucune conversation"; } /* German */ [lang="de-DE"] ul.PrivateChatList:empty::after { content: "Sie haben keine Unterhaltungen"; } /* Spanish (Spain) */ [lang="es-ES"] ul.PrivateChatList:empty::after { content: "No tienes conversaciones"; } /* replay to panel */ /* private chats */ #PrivateMsgModal.modal.in { background-color: rgba(50, 50, 50,.98); } #PrivateMsgModal .modal-header { margin-bottom: 40px; } #PrivateMsgModal .privateChatListNotification { padding: 9px 15px !important; font-size: 14px !important; background-color: #6b6b6b !important; color: #fff !important; float: right; margin: -85px 120px 0 0 !important; border-radius: 0 0 5px 5px !important; width: 200px; user-select: none; border-width: 0px !important; box-shadow: none !important; } #PrivateMsgModal .startPrivateConversation { padding: 9px 15px !important; font-size: 14px !important; background-color: #6b6b6b !important; color: #fff; margin-top: -20px; margin-bottom: 20px; width: 25%; text-align: center; } .PrivateChatList { width: 29%; float: left; list-style-type: none; margin: 0; height: 632px; overflow: auto; padding: 0px; box-sizing: border-box; border-left: 2px solid #ddd; border: 2px solid #ddd; } .PrivateChatList li { margin: 0px 0px; padding: 11px 0px 7px 51px; clear: both; position: relative; box-shadow: 0px -3px 0 -1px #dedede; background-color: #F7F7F7; border-left: 7px solid #f7f7f7; cursor: pointer; transition: border-color .3s; min-height: 45px; } .PrivateChatList .ChatName .logocontainer { border-radius: 100%; width: 45px; height: 45px; overflow: hidden; margin: 0 auto; float: left; margin-top: 1px; position: absolute; left: 4px; top: 5px; } .PrivateChatList li.cwUnread { border-left: 7px solid #27b64e; } .PrivateChatList li:hover { background-color: #fafafa; border-left: 7px solid #277bb6; z-index: 9; box-shadow: 16px 5px 11px -3px #7d7d7d, 0px -3px 0 -1px #dedede; } .PrivateChatList li.cwOpen { background-color: #ffffff; border-left: 7px solid #277bb6; z-index: 9; box-shadow: 16px 5px 11px -3px #7d7d7d, 0px -4px 0 -1px #dedede; } .PrivateChatList li .ChatName { font-size:15px; } .PrivateChatList .ChatName .logocontainer:after, .msgNotice .logocontainer:after { background-color: #ececec; } /* private group chat */ .PrivateChatList li[data-typ="-2"] .logocontainer::after {background-color: #ecd2d2; } .PrivateChatList li .ChatName span { margin-right: 5px } .PrivateChatList li .LastMsg { margin: 3px 10px 4px 0px; overflow: hidden; max-height: 20px; font-style: italic; } .PrivateChatList li .LastMsgDate { position: absolute; right: 0px; top: 0px; padding: 0px 5px 2px 7px; border-style: solid; border-color: #F7F7F7; border-width: 0px; } .PrivateChatList li.cwOpen .LastMsgDate, .PrivateChatList li:hover .LastMsgDate { border-width: 0px 0px 2px 2px; border-color: #efefef; background: #fff; } .PrivateChatList .OnlineStatus { height: 10px; width: 10px; position: absolute; bottom: 0px; right: 4px; z-index: 50; border-radius: 10px; border: solid white; } .OnlineStatus.OnlineStatus_Active { background-color: #0ca10c; } .OnlineStatus.OnlineStatus_Idol { background-color: #ffbc00; } .PrivateChatView { width: 70%; float: left; height: 620px; position: relative; padding-right: 20px; box-sizing: border-box; padding-left: 20px; } .PrivateChatView .txtChatMsg { bottom: 23px; top: unset; left: unset; border-radius: 0px; width: 93%; height: 63px; } .PrivateChatView .replyChatPanel { top: -21px; left: 5px; position: relative; border-radius: 0; padding: 3px 15px; min-height: 39px; padding-top: 5px; } .PrivateChatView .chatEntry .replyChatPanel { top: 0px; left: 0px; } .PrivateChatView .replyChatPanel + textarea.txtChatMsg { top: unset; left: unset; height: 59px; } .PrivateChatView .msgPost { margin-left: 9px; top: unset; bottom: -9px; right: unset; left: 19px; } .PrivateChatView .divChatWall_msg_wrapper { height: 500px; margin-top: 10px; display: flex; flex-direction: column-reverse; } .PrivateChatView .chat:after {content:'' !important } .PrivateChatView .chatEntry { -webkit-animation-name: fadeInUp !important; animation-name: fadeInUp !important; margin: 37px 0 11px 10px; } .PrivateChatView .chatEntry span.PostName { font-weight: 500; } .PrivateChatView .chat:before { content: '' } @media (max-width: 1100px) { #CatalogDetailModal { padding-right: 0px !important; } #CatalogDetailModal.assigned .chat { width: 100%; height: 400px; position: relative; clear: both; right: auto; top: auto; height: 550px !important; } #CatalogDetailModal.assigned .chat .txtChatMsg { MARGIN-LEFT: 0; MARGIN-TOP: 0; outline: none; box-sizing: border-box; padding-top: 7px; padding-right: 0; position: relative; top: auto; height: 44px; padding: 6px; left: 10px; width: 80%; border-radius: 0px; } #CatalogDetailModal.assigned .divChatWall_msg_wrapper { height: calc(100% - 96px); } #CatalogDetailModal.assigned .chat .msgPost { width: 9%; float: right; position: relative; right: auto; font-size: 20px; padding-left: 4px; outline: none !important; top: auto; text-align: center; padding-top: 10px; padding-bottom: 10px; margin-right: 5px; } .chat:before { content: 'CHAT WITH YOUR PEERS '; color: #ffffff; position: absolute; top: -154px; font-size: 17px; right: 147px; font-weight: 600; z-index: 100; position: relative; top: -10px; left: 13px; color: #444; } } .chatEntry.chatSysMsg { margin: 0px 0px 0px 7px; padding: 0px 2px; font-style: italic; color: #666 !important; font-size: 13px; } .chatEntry.chatSysMsg .strMessage { margin: 1px 0px 2px 0px; width: 85%; float: left; } .chatEntry.chatSysMsg .strMessage .RosName { display: inline-block; transition: transform .1s; transition-timing-function: linear; } .chatEntry.chatSysMsg .strMessage .RosName:hover { transform: scale(1.05) !important; } /* end private chats */ /* conversation */ .ChatName .logocontainer, .msgNotice .logocontainer { border-radius: 100%; width: 45px; height: 45px; overflow: hidden; margin: 0 auto; float: left; margin-top: 1px; position: absolute; left: 4px; top: 2px; } .ChatName .logocontainer:after, .msgNotice .logocontainer:after { content: attr(data-init); text-align: center; width: 40px; margin: 0 auto; height: 40px; padding: 19px 0 0 2px; background-color: #fafafa; position: absolute; top: 1px; left: 0; border-radius: 100%; box-sizing: border-box; color: #4a4a4a; font-size: 15px; line-height: 0; letter-spacing: 2px; text-transform: uppercase; } .ChatName .logocontainer .logobg, .msgNotice .logocontainer .logobg { border-radius: 100%; position: relative; width: 40px; height: 40px; background-repeat: no-repeat; z-index: 36; display: block; background-size: cover; background-position: center center; } /* notificatrion (replies) */ .PrivateChatList li[data-typ="-3"] .ChatName .logocontainer .logobg.icomoon-bubble-star:before { position: relative; top: 7px; left: 11px; font-size: 20px; color: #277bb6; } .PrivateChatList li[data-typ="-3"] .LastMsg { display: none; } .PrivateChatList li[data-typ="-3"] .ChatName > span { font-size: 17px; line-height: 34px; } .chat.privateChat[data-type="-3"] .replyName { display: none; } /* end conversation */ .PrivateChatView .chat .chatHeader { position: absolute; width: 576px; height: 51px; top: -60px; } .PrivateChatView .chatHeader .LeaveChat, .PrivateChatView .chatHeader .RenameChat, .PrivateChatView .chatHeader .removeFromChat { display: none; } .PrivateChatView .chat .chatHeader .chatCustName { display: block; font-size: 22px; } .PrivateChatView .chat .chatHeader .chatHeader_title_wrapper { width: 545px; float: left; overflow: auto; height: 60px; } .PrivateChatView .chat .chatHeader .chatHeader_title { } .PrivateChatView .chat .chatHeader .chatHeaderMember { padding: 3px; font-size: 15px; line-height: 32px; float:left; margin-right:10px; } .PrivateChatView .chat .chatHeader .chatHeaderMember .logocontainer { position: relative; width: 35px; height: 35px; left: 0px; top: 0px; } .PrivateChatView .chat .chatHeader .chatHeaderMember .logocontainer:after { width: 30px; height: 30px; padding: 14px 0 0 2px; } .PrivateChatView .chat .chatHeader .chatHeaderMember .logocontainer .logobg { width: 30px; height: 30px; } .PrivateChatView .chat .chatHeader:hover .removeFromChat { opacity:1; } .PrivateChatView .chat.ChatWall_Group_multi .chatHeader .LeaveChat { display: block; } .PrivateChatView .chat.ChatWall_Group_multi .chatHeader .removeFromChat { display: inline-block; } .PrivateChatView .chat.ChatWall_Group .chatHeader .RenameChat { display: block; } .PrivateChatView .chat[data-type="-3"] .txtChatMsg, .PrivateChatView .chat[data-type="-3"] .msgPost, .PrivateChatView .chat[data-type="-3"] .chatConfigAction { display: none !important; } .PrivateChatView .chat[data-type="-3"] .divChatWall_msg_wrapper { height:621px; } /* notice */ .msgNotice { } .msgNotice .logocontainer { left: 5px; top: 15px; } .msgNotice .name { font-weight:600; } .msgNotice .msg { margin: 3px 10px; } /* end notice*/ /* #endregion */ /* Class names bases on state of user requesting that data. for custom application from univ Type and Univ CSS .notAssigned { } .assigned {} .completed {} */ /*------------------------------------------------------------------ [ 5.8 ] Glossary Tooltip Location: Common.js */ .GlossViewAll { position: absolute; bottom: 5px; right: 10px; font: bold 13px sans-serif; color: #565656; text-decoration: underline; cursor: pointer; } .GlossAdminLink { position: absolute; top: 10px; right: 10px; font: bold 13px sans-serif; color: #c86800; cursor: pointer; } /*------------------------------------------------------------------ [ 5.8.1 ] Help Wizard Popover Location: Common.js */ .helpWizardPopoverExit { line-height: 15px; font-size: 26px; font-weight: bold; cursor: pointer; margin-top: 2px; } .helpWizardButtonContainer { border-top: 1px solid #ccc; margin-top: 7px; padding-top: 9px; } /*------------------------------------------------------------------ [ 5.9 ] Student/Admin Buttons Location: Course_1.Master */ .Nexticons { background-position: 14px 14px; background-repeat: no-repeat; display: inline-block; height: 14px; line-height: 14px; vertical-align: text-top; width: 12px; background: url('Images/nextprev2.png') -11px 0; margin: 5px 0 0 7px; } .Previcons { background-position: 14px 14px; background-repeat: no-repeat; display: inline-block; height: 14px; line-height: 14px; vertical-align: text-top; width: 12px; background: url('Images/nextprev2.png') 0 0; margin: 4px 7px 0 0; } .SelectedModeButton { background: #FFFFFF none repeat-x 0px -15px; border: 1px solid rgb(204, 204, 204); border-radius: 2px; box-shadow: none; color: rgb(14, 90, 14); display: block; float: right; height: 20px; margin-bottom: 0px; opacity: 0.65; position: relative; text-align: center; text-decoration: none solid rgb(14, 90, 14); text-shadow: rgba(255, 255, 255, 0.74902) 0px 1px 1px; vertical-align: middle; padding: 5px 8px 3px 8px; font-weight: 600; font-size: 14px; font-family: 'Open Sans'; } .img-selected-mode { width: 0px; height: 0px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #FFFFFF; position: relative; bottom: -52px; margin-top: -30px; float: left; left: 50%; margin-left: -7px; } /*------------------------------------------------------------------ [ 5.11 Question Interactions] Location: admin_CourseMap, question-interactions.js */ .add-btngroup { border-color: #EEE !important; cursor: default !important; } .AssignmentQuestion { height: 100px; width: calc(100% - 90px); padding: 15px; margin-top: 11px; border: 1px solid #adadad; outline: 0; font: 500 17px sans-serif; color: #383838; line-height: 22px; clear: both; overflow-y: auto; } .AssignmentQuestion.form-input.filled { box-shadow: 0 2px 0 0 #9c9c9c !important; margin-left: 0px; width: 90% } #pnlTestModalContainer .TestModalStyle { position: relative } #pnlTestModalContainer .type_Anonymous_Survey .survey_Anonymous { display: block !important; position: absolute; top: 0px; left: 0px; margin-top: 0px !important; } #pnlTestModalContainer .type_Anonymous_Survey .modal-header { margin-top: 150px } #pnlTestModalContainer .StudentAnswerChoice { margin-right: 5px; margin-left: 5px; } .TestModalStyle .modal-header { margin: 15px 0 15px 15px; font-size: 25px; } .TestModalStyle .lblmessage { color: #8c8c8c; padding-bottom: 30px; display: block; text-align: center; box-shadow: 0 0 black; padding-top: 15px; } .TestModalStyle .testsubmit { text-align: center } .TestModalStyle .testsubmit .TestModalAction { width: 300px; height: 50px; font-size: 17px !important; margin-top: 30px; background-color: #75A646; color: #fff !important; text-transform: uppercase; outline: none; max-width: 52%; } .txtQWordCount { color: #6d6d6d; font-size: 13px; position: absolute; top: -10px; right: 20px; } /* jsPlumb position problem for course.aspx */ .ContentDIV { position: relative; } /* jsPlumb position problem for modal don't change margin this affect absolute audio pushup */ .QuestionEntry { position: relative; margin: 10px 7px 10px 0px; /* forced 0px left and right for live preview.*/ } .JQSortable_review:not(.QBucket) { width: 89%; } .TestModalAction { margin: 0px } .QuestionTypeIcon { height: 17px; vertical-align: middle; margin-left: 5px; margin-right: 10px; } /* sort the bucket */ .divQBucketSource { margin-top: 10px; width: 99%; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; margin-left: 3px; margin-right: 3px; } .divQBucketSource ul { list-style-type: none; margin: 0px; padding: 4px 0 2px 0; clear: both; overflow: auto; border-top: 1px solid #BDBDBD; margin-top: 2px; } .divQBucketSource ul li, .divQBucket ul li { margin-top: 5px; padding: 5px 3px 4px 5px; overflow: hidden; font-size: 1.2em; background-color: #F5F5F5; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; vertical-align: middle; cursor: move; float: left; width: 169px; margin: 5px 9px; } .divQBucketSource ul li:nth-child(5n +1 ) { clear: both; } .divQBucketSource span { font: 600 16px 'open sans'; } .divQBucketSource .BTitle { font: 600 16px 'open sans'; } .divQBucketSource .Bnote { font: 500 13px 'open sans'; font-style: italic; color: #76967C; margin-right: 5px; float: right; } .divQBucket { width: 205px; float: left; border-width: 1px; border-color: #CFCCCC; border-style: dashed; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; padding-top: 4px; margin-left: 30px; margin-top: 10px; margin-right: 10px; } .divQBucket ul { list-style-type: none; margin: 0px; padding: 5px; clear: both; overflow: auto; border-top: 2px solid #BDBDBD; margin-top: 4px; min-height: 75px; } .divQBucket .bucketTitle { padding-left: 5px; font: 500 16px 'open sans'; } .QBucket:empty { background-image: url('../images/diagrams/EmptySort.png'); background-repeat: no-repeat; background-position-x: 19px; background-position-y: 10px; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .QuestionRowDiv_Review ul.QBucket:empty { background-image: url('../images/diagrams/EmptySortReview.png'); background-repeat: no-repeat; background-position-x: 19px; background-position-y: 10px; } .QAnswerTitle { margin-top: 10px; } .FIBQCount { border: #CECDCD 1px solid; font-size: 18px !important; width: 14px; padding: 3px 7px; position: relative; top: 2px; left: -3px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: #F6F6F6; } /*Sortable UI dupe for modal CSS.*/ .modal-dialog .SortQuestionDiv { float: left; width: 83%; overflow: hidden; background: url(../images/Controls/drag.png) no-repeat; padding-left: 22px; min-height: 21px } .modal-dialog .QuestionEntry .JQSortable { list-style-type: none; margin: 0; padding: 20px 0 0 0; margin-left: 0; clear: both; overflow: auto; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; transition: all .3s ease-in; width: 100%; /* min-height: 85px; */ } .modal-dialog .QuestionEntry .JQSortable_li { margin-top: 0; margin-bottom: 6px; margin-right: 24px; height: 28px; padding: 11px 5px 4px 7px; font-size: 15px; cursor: s-resize; border: 1px solid #ededed; background-color: #fdfdfd; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; vertical-align: middle; margin-left: 20px; position: relative; box-shadow: 0 0 0 0 rgba(0,0,0,0) } .modal-dialog .QuestionEntry .JQSortable_li:hover { box-shadow: 0 6px 10px -10px #828282 } .modal-dialog .QuestionEntry .JQSortable .JQSortable_li { min-height: 30px !important; overflow: auto !important; height: auto !important; margin-bottom: 10px !important; transition: padding .3s,border-width .3s,box-shadow .3s } .modal-dialog .QuestionEntry .divQBucket .JQSortable { min-height: 90px !important; } /*------------------------------------------------------------------ [ 5.12 Review Questions at Performance Card ] Location: Course_1.Master, StudentHistory.aspx */ #rptRQuestions div.QuestionRowDiv:nth-child(even) { background-color: #F6F6F6; color: #6D6D6D; padding-top: 20px; padding-bottom: 20px; border-bottom-width: 0 !important; } .QuestionRowDiv { padding: 5px 0 20px 20px; } .QuestionRowDiv .horizontalDisplay tbody { display: flex; flex-direction: row; } .QuestionRowDiv .horizontalDisplay tr { background-color: #E8E8E8; margin-left: 8px; width: 100px; line-height: 100px; max-height: 100px; text-align: center; box-sizing: border-box; position: relative; } .QuestionRowDiv .horizontalDisplay td { width: 100%; display: inline-block; vertical-align: middle; overflow: hidden; max-height: 100px; line-height: normal; word-break: break-word; } .QuestionRowDiv table.marginleft30.horizontalDisplay { margin-bottom: 40px; } .Coursecontent .QuestionRowDiv { position: relative; padding: unset; } .QuestionRowDiv:not(:last-child) { border-bottom: solid 2px #CCC; } .QuestionRowDiv audio::-webkit-media-controls-panel, .QuestionRowDiv video::-webkit-media-controls-panel { background: none !important; height: auto; } .rpt-performance-report .ShowUnderLine { position: relative; } .ShowUnderLine a:link { text-decoration: underline !important; } .ShowUnderLine a:hover { text-decoration: none !important; } #BlankThemeBody_pnlEventMainPanel .QuestionRowDiv { border-bottom: none; padding-bottom: 0px; padding-left: 0px; } #BlankThemeBody_pnlEventMainPanel .QuestionRowDiv:after { visibility: visible; content: ''; width: 80%; margin-left: 10%; padding-top: 20px; border-bottom: 1px solid #ccc; } #BlankThemeBody_pnlEventMainPanel .QuestionRowDiv:last-child:after { visibility: hidden; } .question_review_mode { padding-top: 18px; padding-left: 17px; } #HistoryModal .modal-dialog { overflow: hidden; } /* Media Record - Course Video Response */ .QuestionRowDiv audio::-webkit-media-controls-panel, .QuestionRowDiv video::-webkit-media-controls-panel, .QuestionEntry audio::-webkit-media-controls-panel, .QuestionEntry video::-webkit-media-controls-panel { background: none !important; height: auto; } .QuestionEntry video { display: block; text-align: center; margin: 0 auto; margin-bottom: 0px !important; } .QuestionEntry #videoPlayerContainer #startRecording { width: 340px; margin-left: 0px; } /*.QuestionEntry #videoPlayerContainer #stopRecording { margin-left: -8px; }*/ .QuestionEntry #videoPlayerContainer #retakeRecording { width: 90px; margin-left: -6px; } .QuestionEntry #videoPlayerContainer #saveRecording { width: 322px; margin-left: 0px; } #videoReviewWrapper .playerState { display: none; } /*------------------------------------------------------------------ [ 5.13 Add Ownership Heading Button ] Location: Admin_ManageUsers.aspx */ /*.btnAddNewOwnershipHeading { background: #E5E3E3 none repeat-x 0 -15px; border-radius: 2px; color: #0E5A0E; display: block; opacity: .8; text-decoration:none; vertical-align: middle; padding: 6px 8px; font-weight: 600; font-size: 13px; font-family: 'Open Sans'; border-top-left-radius: 14px; margin: 0 -5px -1px 0px; } .btnAddNewOwnershipHeading span { top: 2px; position: relative; margin: 0px 5px 0px 3px; }*/ /*------------------------------------------------------------------ [ 5.14 Tag Navigations ] Location: Admin_UniversitySetting.aspx, catalog.aspx */ li ~ .TgNavEmpty { display: none; } .TagNavTop { width: 100%; padding-left: 0px; } .TagNavTop .removeTag { margin-left: 64px; background-color: white; padding: 2px; border-radius: 3px; opacity: 0.8; } .TagNavTop .TgName { width: 100%; float: left; } .TagNavTop li { list-style: none; width: 70px; height: 73px; border: 1px #EAEAEA solid; overflow: hidden; border-right-width: 0; border-style: dotted; } .TagNavTop li:last-of-type { border-right-width: 1px; } .TagNavTop li .IconAction { margin-top: 6px; display: block; display: none } .TagNavTop li .IconAction span { display: block; position: absolute; font: 500 11px'Open Sans'; margin-left: 0; margin-top: -23px; color: #2C792C; text-decoration: underline; } .TagNavTop li .lblTGName { display: block; } .TagTitles { display: block; font-size: 13px; margin-left: 20px; } select.TagNavEditBox { margin-top: 5px; } .ddlCalWidgetTopNav { margin-top: 0px; } .TagNavTop li, .ddlCalWidgetTopNav li { margin: 0; padding: 3px 5px 4px 4px; list-style-type: none; float: left; text-align: center; font: 600 12px'open sans'; cursor: pointer; min-width: 47px; border-radius: 4px; max-width: 88px; height: 48px; overflow: hidden; } .TagNavTop li.btnTagChange:first-child { height: 41px; } .settings-list .TagNavTop li:not(.TgNavEmpty), .ddlCalWidgetTopNav li { height: 44px !important } /*For admin view of tags*/ .ddlCalWidgetTopNav .ActiveTag { background-color: #E8E8E8; } .TagNavTop li.btnTagChange .TopNavCaption { line-height: 11px; font-size: 11px; word-break: break-word; } .TagNavTop li img, .ddlCalWidgetTopNav li img { max-width: 34px; height: 24px; } .TagNavTop .TgNavEmpty { width: 358px; font-size: 13px; height: 24px; font-weight: 500; background-color: #F9F9F9; padding-top: 6px; max-width: unset; } ul .catalog_tags_select2 { width: 25px; vertical-align: middle; margin-right: 5px; max-height: 25px; margin-top: 2px; } .TagList .catalog_tags_select2 { width: 25px; vertical-align: bottom; margin-right: 5px; max-height: 25px; margin-top: 2px; } .TagEditBox { margin-top: 4px; } .aTagManagement { /* float: right; */ position: absolute; /* top: -15px; */ margin-top: -20px; margin-left: 300px; } .ulCatalogBrowseTab > li { margin-bottom: -1px !important } /*------------------------------------------------------------------ [ 5.15 Event Import Modal ] Location: jquery.event-integration-import.js */ .eventIntegrationJqWrap { word-wrap: break-word; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; overflow: hidden; height: auto; vertical-align: middle; padding-top: 3px; padding-bottom: 3px; } .ddlEventImportTZ .select2-choice { font-size: 13px !important; } .ddlEventImportLoc .select2-choice { font-size: 13px !important; } .ddlEventImportInst .select2-choice { font-size: 13px !important; } .ddlEventImportStat .select2-choice { font-size: 13px !important; } .ddlImportEvent_selection { display: inline-block; background-repeat: no-repeat; background-size: 20px 20px; height: 20px; padding-left: 25px; } .ddlImportEvent_optionText { /*width: 155px;*/ height: 20px; display: table-cell; vertical-align: middle; } #select2-ddlCreateOrLinkEvent-results span.ddlImportEvent_optionText { white-space: nowrap; } .eventIntegration_sourceContainer { display: inline-block; height: 22px; vertical-align: middle; text-align: left; } .eventIntegration_sourceText { font-weight: bold; font-size: 15px; } .eventIntegration_jqHeaders { text-align: left !important; } [id*=Bulk] .select2-choice { height: 13px !important; font-size: 13px !important; font-weight: bold !important; color: #333 !important; background-color: #f7f7f7 !important; border: none !important; box-shadow: none !important; } [id*=Bulk] .select2-chosen { margin-top: -4px; } [id*=Bulk] .select2-arrow { background: #f7f7f7 !important; } #importEventModal #importControlsContainer, #importEventModal #divFileUploadEventImporter { padding: 0px 50px; } #importEventModal #selectedExternalSourceMessageContainer { display: inline-block; margin: 18px 0px 20px 50px; vertical-align: top; width: 91%; text-align: left; box-sizing: border-box; padding: 16px 25px; } #importEventModal #importOptions a { width: 218px; } #eventImport { text-align: center; } #eventImport #importOptions { display: inline-block; } #eventImport #importOptions a { font-size: 14px; float: left; padding: 35px 50px; background: #eee; margin: 60px 50px; width: 190px; height: 100px; text-align: center; border-bottom-width: 2px; border-bottom-style: solid; box-shadow: 0px 4px 4px -5px rgba(0, 0, 0, .44); border-radius: 2px; transition: transform .3s, border-width .3s; } #eventImport #importOptions a:hover { border-bottom-width: 4px; box-shadow: 0px 7px 7px -8px rgba(0, 0, 0, .44); transform: translateY(-3px); } #eventImport #importOptions a:before { display: block; height: 45px; margin-top: 20px; margin-bottom: 11px; font-family: 'icomoon_EL' !important; speak: none; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; font-size: 40px; } #eventImport #importOptions #importFromFile:before { content: '\e9a9'; } #eventImport #importOptions #importFromFile { border-bottom-color: #69ab40; } #eventImport #importOptions #importFromYardiWebinars:before { content: ''; background-image: url('https://cdn.yardiaspire.com/images/Controls/Ylogo.png'); background-repeat: no-repeat; background-position: center; } #eventImport #importOptions #importFromYardiWebinars { border-bottom-color: #4057ab; } #eventImport #importOptions #importFromExternal:before { content: '\e9c2'; } #eventImport #importOptions #importFromExternal { border-bottom-color: #ffe100; } #eventImportContainer.view-default #importControlsContainer { display: none; } #eventImportContainer.view-file #importFromYardiWebinars, #eventImportContainer.view-file #importFromExternal { opacity: 0.5; } #eventImportContainer.view-file #importControlsContainer { display: none; } #eventImportContainer.view-internal #importFromFile, #eventImportContainer.view-internal #importFromExternal { opacity: 0.5; } #eventImportContainer.view-external #importFromFile, #eventImportContainer.view-external #importFromYardiWebinars { opacity: 0.5; } #eventImportContainer.view-internal #divFileUploadEventImporter, #eventImportContainer.view-external #divFileUploadEventImporter { display: none; } .chbPageMarkerContainer { position: absolute; left: 68px; margin-top: 36px; } /*------------------------------------------------------------------ [ 5.16 Learning Plan Related ] Location: admin_LearningPlan.aspx */ .LPSortable_li:hover .divLearningCondition div, .LPSortable_li:hover .divLearningCondition span { opacity: 1; } .LPStepActionPanel { width: 225px; } #ActionPendingModal .modal-header span { font-size: 24px !important; font-weight: 500; margin: 1px 0 0 0px; display: block; margin-left: 25px; margin-bottom: -5px; } .btn .stepicon { margin-right: 6px !important; top: 2px; position: relative; margin-right: 6px !important; font-size: 21px !important; line-height: 9px !important; position: relative !important; top: 4px !important; } /* student modal */ .LPSignUp { float: right; padding-right: 30px; } .LPSteps { position: relative; width: 93%; max-width: 850px; margin: 0px; margin-left: 30px; padding: 0px; list-style: none; clear: both; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-top: 10px; } .LPSteps > li { height: 34px; margin-bottom: 8px !important; clear: both; border-bottom: 2px solid #CCC; border: 1px solid #E0E0E0; background-color: #FCFCFC; border-radius: 4px; overflow: hidden; font: normal 13px 'Open Sans', sans-serif; color: #696969; font-weight: 600; position: relative; } .LPSteps li:not(.LPNoAccess) { cursor: pointer; } .LPSteps .LPType0 { font: normal 17px 'Open Sans'; border: none; background-color: #fff; margin-top: 20px; margin-bottom: 0px !important; line-height: .95; cursor: default !important; user-select: text; padding-right: 10px; width: 100%; box-sizing: border-box; padding-bottom: 0px; height: auto; } .LPSteps .LPType0 .LPStatus { display: none; } .LPSteps .LPType2 { border: none; background-color: #fff; font: normal 17px 'Open Sans'; margin-bottom: 5px !important; } .LPSteps .LPType2 .LPTitle { padding: 10px 0px 0px 10px; } .LPSteps .LPType-2 { margin-left: 10px; } .LPSteps .LPStep .LPTitle { float: left; width: calc(100% - 160px); display: table; height: 34px; } .LPSteps .LPStep .LPTitle div { display: table-cell; vertical-align: middle; padding: 0px 8px !important; line-height: 1.3; } .LPStatus { float: right; margin-right: 39px; } .LPStatus .LPStatusStr { width: 120px; background-color: #FAFAFA; height: 34px; border-left: 1px solid #DDD; box-sizing: border-box; text-align: center; position: relative; vertical-align: middle; display: table; } #ActionPendingModal .LPStatus .LPStatusStr { display: table-cell; /*Over-ride for Actin pending*/} .LPStatus .LPStatusStr .DueBy { position: absolute; left: -140px; bottom: -1px; font-size: 11px; background-color: #ffe8e8; padding: 3px 8px; } .LPStatus .LPStatusStr .Eventdate { position: absolute; bottom: -1px; font-size: 11px; padding: 3px 8px; left: -58px; background-color: #fafafa; border-left: 1px solid #ddd; } .LPStatus .LPStatusStr .DueBy .icomoon-warning { margin-right: 5px; } .LPStatus .LPStatusBtn { float: right; background-color: #77d05a; font-size: 20px; padding: 5px 10px; margin-top: -2px; margin-right: -1px; position: absolute; right: 0; } .LPStatus .LPStatusBtn span { color: #fff !important; } .LPStatus.pastDue .LPStatusBtn { background-color: #e06666; } .LPStatus.completed .LPStatusBtn { background-color: #66c0e2 } .LPStatus.inProgress .LPStatusBtn { background-color: #e6d664 } .LPStatus.pastDue .LPStatusStr { padding: 2px 5px; line-height: 15px; color: #C87173; } .LPStatus.completed .LPStatusBtn:after { content: '\e907'; color: #fff; font-family: 'icomoon_EL' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 29px; -webkit-font-smoothing: antialiased; } .LPStatus.completed .LPStatusBtn span { visibility: hidden; } .LPStatus .LPStatusStr .LPStatusStrAlign { display: table-cell; vertical-align: middle; } .LPStatus .LPStatusStr .LPStatusStrAlign .LPProgressBar { margin-top: 1px; } .LPSteps .LPType_double_line .LPStatus .LPStatusStr { padding: 0px 3px; } .LPType0 ul, .LPSortable ul { display: block; list-style-type: disc; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 40px; } .LPType0 li, .LPSortable li { padding-top: 4px; } .NoAccess .LPStatusBtn { background-image: url(/images/LPLock.png); background-size: 61%; background-position: center center; height: 27px; width: 19px; background-repeat: no-repeat; background-color: #959595; } .LPProgressBar { height: 20px !important; position: relative; border: 0px !important; background: none !important; padding-bottom: 0px; overflow: visible !important; border-bottom: 1px solid #b1b1b1 !important; border-radius: 0px !important; } div#lblProgress:after { color: #696969; } .LPProgressBar .ProgressInnerlbl { margin-left: 35%; margin-top: 1px; } .LPSortable_li { margin-top: 0; margin-bottom: 8px; margin-right: 4px; padding: 4px 4px 5px 7px; font-size: 15px; cursor: s-resize; border: 1px solid #ededed; background-color: #f9f9f9; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; vertical-align: middle; position: relative; list-style: none; } .Dragging .LPSortable_li { height: 19px; overflow: hidden; padding: 1px 4px 5px 7px; margin-bottom: 6px; } .Dragging .LPSortable_li .dragImg, .Dragging .JQSortable_btnDelete { visibility: hidden; } .LPSortable_li .stepicon { margin-right: 3px; font-size: 22px !important; line-height: 9px !important; position: relative !important; top: 4px !important; margin-left: -13px; } /* <----- need more styling here !!! */ .LPViewDetail { font-weight: 600; font-size: 13px; margin-left: 20px; text-decoration: underline; } #txtOverwriteDur, #txtOverrideDefaultDays { /*margin-left: 8px;*/ margin-right: 8px; width: 45px; } #txtOverwriteDur { margin-left: 18px; } #txtOverrideDefaultDays { margin-left: 50px; } .NavActiveSticky .TrackUpdateComment.LPStepActionPanel { top: 96px; transition: top .3s; } .LPStepHardDue { display:block; margin-top:5px; } .LPStepHardDue .LPStepHardDue_detail { } /*LP Taask Type*/ #lpRefModal .GenericContainer { padding-bottom: 0px !important } #lpRefModal .GenericContainer > .paddingbottom10 { padding-bottom: 0px !important } #lpRefModal .LPTaskAcknowledge { text-align: center; padding-top: 40px; padding-bottom: 20px; background-color: #fff !important; position: relative; } #lpRefModal .LPTaskAcknowledge .btn { width: 85px; height: 24px; font-size: 25px; background-color: #75a646; color: #fff !important; margin: auto !important; display: block; margin-top: 20px !important; padding: 10px 25px; } #lpRefModal .LPTaskAcknowledge .btn:hover { background-color: #659539; } .TaskAcknowledge { display: inline-block; position: relative; cursor: pointer; font-size: 17px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-left: 40px; padding-top: 3px; } /* Hide the browser's default checkbox */ .TaskAcknowledge input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .TaskAcknowledge .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border: 2px solid #b5b5b5; line-height: 1; transition: background .3s; } /* On mouse-over, add a grey background color */ .TaskAcknowledge:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked */ .TaskAcknowledge input:checked ~ .checkmark { background-color: #75a646; border-color: #75a646; } /* Create the checkmark/indicator (hidden when not checked) */ .TaskAcknowledge .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .TaskAcknowledge input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .TaskAcknowledge .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* activeate date update modal */ .LPacitveClear { margin-left: 5px; margin-top: -5px; } .LPStepActivateCmment { display: block; margin-left: 57px; margin-top: 3px; color: #b94a48; } #AddingLearningConditionModal .modal-dialog .GenericContainer { margin-top: 30px; } #AddingLearningConditionModal .modal-dialog #btnAddNewLearningCondition { font-size: 15px; padding: 10px 30px; } /* LP Step Modal - Video Response */ #lpStepModal .GenericContainer { padding-bottom: 0px !important } #lpStepModal .GenericContainer > .paddingbottom10 { padding-bottom: 0px !important } #lpStepModal #learningPlanVideoResponse { padding-top: 40px; padding-bottom: 20px; background-color: #fff !important; position: relative; } /* LP modal related */ /*#LearningPlanModal .LPSteps > li { overflow: visible; } #LearningPlanModal .LPStatus { margin-right:36px; } #LearningPlanModal .LPStatus .LPStatusBtn { border-bottom-right-radius: 4px; border-top-right-radius: 4px; height: 24px; margin-top: 0px; padding: 3px 10px 7px 10px; } #LearningPlanModal .LPStatus .LPStatusStr { border-bottom: 1px solid #DDD; height: 35px; } #LearningPlanModal .LPStatus.pastDue .LPStatusStr { line-height: 14px; }*/ /* .LPStatus.completed .LPStatusBtn:after { content: ""} address missalign ... */ .ModalPendingHide { display: none !important; } /*------------------------------------------------------------------ [ 5.17 Auto Mapper Related ] Location: admin_UniversitySettings.aspx */ #divAutoMapperMapping { padding: 20px 10px 0px 10px; } .divMapCombo { width: 100%; } .collabWidget_icomoon.icomoon-files { display: none; } #scormWindow { margin: -10px 0px 0px -24px; width: 1057px; height: 693px; } #scormWindow.popUpMode, #divScormOnSession, #divScormComp, #divScormInComp { display: none; } @media (max-width: 1199px) { #scormWindow { margin: -10px 0px 10px -24px; width: 101%; height: 693px; } } #divScormOnSession, #divScormComp, #divScormInComp { margin-top: 15px; } .brandingEdit { width: 275px; } .brandingEdit > div { width: 100%; padding: 0px 5px 4px 5px; clear: both; line-height: 36px; } .brandingEdit > div:nth-child(odd) { background-color: #f5f5f5; } .highlight { border: 1px solid red !important; } /*------------------------------------------------------------------ [ 5.18 Smart Mapping ] Location: admin_UniversitySettings.aspx */ .smartMappingGridOverRide { text-decoration: line-through; color: #b9b9b9; } #gbox_smartMappingGrid .ui-jqgrid-htable th.ui-th-ltr { font-weight: 500 !important; font-size: 14px !important; } /*------------------------------------------------------------------ [ 5.19 reporting chart ] Location: */ #divReportingChartModalBody { width: 100%; position: relative; } #divReportingChartModalBody input[type=text] { margin:0px; padding: 10px 0px 1px 0px; } #divReportingChartModalBody hr { margin-block-start: 0.5em; margin-block-end: 0.5em; } #divReportingChartModalBody .current > rect { stroke: #F57C00; } #divReportingChartModalBody .viewAll .NodeMenu, #tree.NoNodeMenu .NodeMenu { display: none; } #divReportingChartModalBody.StudentMode div[data-item="nodeAction1"], #divReportingChartModalBody.StudentMode div[data-item="nodeAction2"], #divReportingChartModalBody.StudentMode div[data-item="nodeAction3"] { display: none; } #divReportingChartModalBody g[control-expcoll-id='0'] { display: none; } #divReportingChartModalBody g.viewAll > rect { cursor: pointer; } #divReportingChartModalBody div.chart-menu span { font-weight: 600; color: #525252 !important; } /* toolbar position */ /*#divReportingChartModalBody div.bg-toolbar-container { bottom: unset; top: 90px; }*/ /*------------------------------------------------------------------ [ 5.20 Announcement modal ] Location: */ #AnnouncementModal .Replaycontrol { display: none; } .ModalAnnouncement { margin: 20px 0px; position: relative; padding: 5px 20px 5px 15px; z-index: 4; cursor: default; border-left: 3px solid #ccc; } .ModalAnnouncement.AnnoListPending { border-left: 3px solid #60a7ff; padding-top: 20px; } .ModalAnnouncement.AnnoPopUpPending { border-left: 3px solid #ffa060; } .ModalAnnouncement.AnnoListPending:after { content: 'NEW'; position: absolute; top: 0; left: 0px; font-size: 10px; font-weight: 600; letter-spacing: .5px; color: #ffffff; background: #61a7ff; padding: 1px 7px; } .ModalAnnouncement.AnnoPopUp { border-left: 3px solid #ffa060; padding-top: 20px; } .ModalAnnouncement.AnnoPopUp:after { content: '\ed4f'; position: absolute; top: 0; left: 0px; letter-spacing: .5px; color: #ffffff; background: #ffa060; padding: 1px 6px; text-align: center; min-width: 24px; font-family: 'icomoon_EL' !important; speak: none; font-style: normal; font-weight: normal; font-size: 11px; font-variant: normal; text-transform: none; line-height: 15px; -webkit-font-smoothing: antialiased; } .ModalAnnouncement .AnsTitle { font: 500 24px 'open sans'; } .ModalAnnouncement .AnsMessage { position: relative; } .stat-ActionNeeded #lblActionPending { font-size: 16px !important } .largeTileStat .icomoon-trophy2 { font-size: 42px } /*------------------------------------------------------------------ [ 5.20 Aspire YSearch modal ] Location: Modal_Lazy.js */ .YSearchModal .actionBtns .btn-searchResult { color: #FFF; display: block; height: 20%; width: 100px; background-color: #5DB95D; border-color: #5DB95D; padding: 8px 20px; font-size: 14px; text-transform: capitalize; border-radius: 3px; text-align: center; font-weight: 400; } .YSearchModal a:hover { text-decoration: underline; } .YSearchModal #TypeFilter { width: 230px !important; } .YSearchModal #lbtnAdvanceYSearch { left: 46px; top: 64px; } .YSearchModal #pnlAdvanYSearch.UserSearchTool { display: none; overflow: hidden; border: 1px solid rgb(229, 229, 229); width: 78%; box-sizing: border-box; padding: 25px; margin: 0px -2px -2px 46px; } .YSearchModal #txtYSearch { width: 80%; margin: 20px 0 30px 36px; padding: 0 10px 0 19px; outline: none; box-sizing: border-box; height: 44px; vertical-align: top; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); border: 1px solid #e0e0e0; } .YSearchModal .spellSuggest { font-size: 14px; color: #dd4b39; } .YSearchModal .spellSuggest .suggestTerm { padding-right: 20px; } .YSearchModal .noResultsMsg { font-size: 18px; display: block; } .YSearchTSKFilter .tagFilterDropdown .searchLabels { margin-right: 5px; } .YSearchTSKFilter .skillFilterDropdown .searchLabels { margin-right: 2px; } .YSearchTSKFilter #TagYSearch, .YSearchTSKFilter #SkillYSearch { width: 287px !important; } .YSearchResultItem { transition: background .2s; cursor: pointer; margin: 30px 10px 35px 10px; } .YSearchResultItem:hover { background: #f7f7f7; } .actionBtns { display: none !important; } .YSearchResultItem em { font-weight: 800; font-style: normal; } .YSearchResultItem .pageIDLabel { color: transparent; } .YSearchResultItem #containerName { font-size: 18px; margin-bottom: 3px; display: inline-block; color: #1a439e; } .YSearchResultItem #pageName, .YSearchModal .searchLabels { font-size: 14px; } .YSearchResultItem #keywordMatch { font-size: 13px; } .YSearchResultItem #sectionName { display: block; font-size: 14px;} .YSearchResultItem #contentMatch { font-size: 12px; display: block; max-height: 35px; overflow: hidden; } .YSearchResultItem .labelType { border: 1px solid #ebebeb; border-radius: 2px; padding: 0 4px; display: inline-block; height: 14px; line-height: 16px; text-align: center; font-weight: normal; color: #4d5156; font-size: 11px; letter-spacing: 0.75px; vertical-align: middle; } .YSearchResultsCount { font-size: 14px; color: #70757a; margin-left: 35px; } #btnYSearch { margin-bottom: 5px; background: rgba(255, 255, 255, 0); border: none; font-size: 28px; left: -57px; position: relative; color: #9e9e9e; top: 8px; } .YSearch_loadMore { clear: both; width: 94% !important; display: block; text-align: center; padding: 5px; box-sizing: border-box; text-decoration: none; transform: none !important; position: relative; } /*------------------------------------------------------------------ [ 5.21 ] Roster Modal Location: Modal_Lazy.js */ #RosterInfoModal { z-index: 9999999;} #RosterInfoModal.sideModal .modal-sidepanel-source { padding: 0px; } .rosterModalDetails { margin-left: 10px; } .rosterModalDetails .userName { color: #6495ED; font-weight: 600; font-size: 16px; display: inline-block; } .rosterModalDetails .userTitle, .rosterModalDetails .userDept, .rosterModalDetails .userCity, .rosterModalDetails .userState, .rosterModalDetails .userCountry { font-size: 14px; } .rosterModalDetails .userTitle.commaClass:after, .rosterModalDetails .userCity.commaClass:after { content: ',\00a0' } /*blank space*/ .rosterModalDetails .userCountry { display: block; } #RosterInfoModal.sideModal .modalHeader { font-weight: 600; font-size: 15px; display: inline-block; width: 100%; border-bottom: 1px solid #ddd; } #RosterInfoModal.sideModal .rosterModalStartPrivateConversation { padding: 14px 15px !important; font-size: 16px !important; background-color: #277bb6 !important; width: 85%; text-align: center; margin-left: 16px; color: #fff; margin: 15px 0 25px 15px; } #RosterInfoModal.sideModal .rosterModalSkills { margin: 0px 10px; clear: both; } #RosterInfoModal.sideModal .rosterModalSkills .userSkills, #RosterInfoModal.sideModal .rosterModalSkills .userAchieve { font-size: 13px; padding: 7px 5px; margin-right: 6px; margin-bottom: 11px; display: inline-block; text-align: center; color: #FFF; border-radius: 3px; background-color: rgba(138, 138, 138, 0.95); cursor: pointer; transition: transform .1s, box-shadow .3s; } #RosterInfoModal.sideModal .rosterModalSkills .userSkills:hover, #RosterInfoModal.sideModal .rosterModalSkills .userAchieve:hover { transform: scale(1.05); box-shadow: 0px 5px 9px -7px #000000; } #RosterInfoModal.sideModal .rosterModalCustFields { margin: 0px 10px 30px 10px; font-size: 14px; } #RosterInfoModal.sideModal .rosterModalCustFields #custVal { width: 365px; max-height: 500px; min-height: 20px; padding: 10px 5px 5px 10px; margin-bottom: 10px; display: block; background-color: rgba(241,241,241, .40); opacity: .9; box-shadow: 0 2px 0 0 #b5b9c791; cursor: default; color: #2b2b2b; } #RosterInfoModal.sideModal .rosterModalCustFields #custLabel { position: relative; top: 5px; font-weight: 600; font-size: 15px; color: #525252; } #RosterInfoModal.sideModal .studentSearchBg { border-radius: 68px; position: relative; width: 70px; height: 68px; background-repeat: no-repeat; background-size: cover; z-index: 36; background-position: center center; display: block; } #RosterInfoModal.sideModal .studentSearchBgContainer:after { content: attr(data-init); text-align: center; width: 66px; margin: 0 auto; height: 68px; padding: 34px 0px 0px 2px; background-color: #e7e7e7; position: absolute; top: 0; border-radius: 100%; box-sizing: border-box; color: #4a4a4a; font-size: 20px; line-height: 0; letter-spacing: 2px; } #RosterInfoModal.sideModal .divChatAdd .rosterModalStartPrivateConversation { padding: 14px 15px !important; font-size: 16px !important; background-color: #277bb6 !important; width: 73%; text-align: center; margin-left: 16px; color: #fff; margin: 15px 0 25px 15px; } #RosterInfoModal.sideModal .divChatAdd button.dropdown-toggle { border-top-left-radius: 0; border-bottom-left-radius: 0px; font-size: 16px !important; background-color: #277bb6 !important; text-align: center; margin: 15px 0 0px -1px; color: white; height: 50px; } #RosterInfoModal.sideModal .divChatAdd button.dropdown-toggle .caretBlack { border-top: 15px solid #ffffff !important; border-right: 15px solid transparent; border-left: 15px solid transparent; } #RosterInfoModal.sideModal .divChatAdd ul.dropdown-menu li a { color: #ffffff; background-color: #277bb6; } /* side modal scroll issue */ #RosterInfoModal.sideModal .modal-dialog { overflow: auto; } /*------------------------------------------------------------------ [ 5.22 ] User Search Modal Location: Modal_Lazy.js */ #UserSearchDetailModalContent #txtFNameSearch, #UserSearchDetailModalContent #txtLNameSearch { margin: 10px 0px 25px 0px; width: 235px; } #UserSearchDetailModalContent .stateFilterDropdown { margin-left: 10px; } #UserSearchDetailModalContent .stateFilterDropdown { margin-left: 0px; margin-top: 20px !important; margin-bottom: 3px; } #UserSearchDetailModalContent .margintop30 { margin-right: 20px; margin-top: 20px !important; margin-bottom: 3px; } #UserSearchDetailModalContent .stateFilterDropdown { margin-left: 0px; margin-top: 20px !important; margin-bottom: 3px; } #UserSearchModal a#lbtnAdvanceSearch { border-width: 0px; background: #fff !important; font-size: 16px !important; margin-top: 12px; padding-left: 0px !important ;cursor:pointer} #UserSearchModal .modal-header { margin-left: 20px } #UserSearchModal #btnUserSearch { margin: 35px 0 35px 0; font-size: 18px; padding: 10px 36px; } #UserSearchModal a#lbtnAdvanceSearch:after { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #7b7b7b; font-size: 0; line-height: 0; content: ''; margin-left: 10px; position: relative; top: -2px; } #UserSearchModal .lbtnAdvanceSearch.lbtnAdvanceSearch-Active:after { display: none } #UserSearchModal .skillFilterDropdown > span:first-child, #UserSearchModal .achieveFilterDropdown > span:first-child { display: block; width: 35px; background-color: #ffffff; margin-bottom: -9px; z-index: 999; padding: 3px 4px 3px 4px; position: relative; margin-left: 5px; } #UserSearchModal #pnlAdvanSearch_modal label.form-label { padding: 0px 5px 3px 2px; } .studentSearchResultBg { border-radius: 68px; position: relative; width: 70px; height: 68px; background-repeat: no-repeat; background-size: cover; z-index: 36; background-position: center center; display: block; } .studentSearchResultBgContainer { border-radius: 70px; width: 70px; height: 68px; overflow: hidden; margin: 0 auto; } .studentSearchResultBgContainer:after { content: attr(data-init); text-align: center; width: 66px; margin: 0 auto; height: 68px; padding: 34px 0px 0px 2px; background-color: #e7e7e7; position: absolute; top: 0; left: 40px; border-radius: 100%; box-sizing: border-box; color: #4a4a4a; font-size: 20px; line-height: 0; letter-spacing: 2px; text-transform: uppercase; } .studentSearchResultBgContainer .OnlineStatus, .studentSearchBgContainer .OnlineStatus, .ManageUserImg .OnlineStatus { height: 20px; width: 20px; position: absolute; top: 46px; left: 110px; z-index: 50; border-radius: 20px; border: solid white; } /*.studentSearchResultBgContainer .OnlineStatus.OnlineStatus_Active { background-color: #0ca10c; } .studentSearchResultBgContainer .OnlineStatus.OnlineStatus_Idol { background-color: #ffbc00; }*/ #select2-StateUserSearch-results .select2-results__option[aria-disabled=true] { display: none; } .UserSearchResults { padding: 20px 0px 20px 0px } .UserSearchResults ul { padding: 0; margin: 0; } .UserSearchResults ul#resultSetStudents { padding-top: 10px; display: flex; flex-wrap: wrap; list-style: none; padding-left: 0; width:100%; margin: auto; } .UserSearchResults ul#resultSetStudents li.UserSearchResultItem { position: relative; width: 149px; height: 105px; margin-top: 5px; margin-bottom: 20px; text-align: center; cursor: pointer; animation-duration: 350ms; float: left; opacity: 0; } .UserSearchResults ul#resultSetStudents li.UserSearchResultItem #title { font-size: 12px; display: inline-block; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; line-height: 14px; } .UserSearchResults ul#resultSetStudents li.UserSearchResultItem #dept { font-size: 12px; display: inline-block; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; line-height: 14px; } .UserSearchResults ul.customMsg { list-style-type: none; padding: 10px 0px 0px 0px; margin: 0; margin-top: -26px; background: #fff; margin-bottom: 29px; } .UserSearchResults ul li#customSearchMsg { border: 1px solid #ddd; width: calc(100% - 60px); margin: auto; text-decoration: none; display: block; position: relative; box-sizing: content-box; text-align: center; font-size: 17px; padding: 14px; } /* close button */ .UserSearchResults ul li#customSearchMsg .close { cursor: pointer; position: absolute; top: 30%; right: 11px; padding: 5px; transform: translate(0%, -50%); font-size: 30px !important; text-transform: lowercase; font-weight: 600 !important; } .UserSearchResults span.resultCountMsg { position: absolute; right: 25px; bottom: -1px; font-size: 14px; font-weight: 500; } .UserSearchResults span.noResultsMsg { display: block; font-size: 15px; } .UserSearchResults .ViewMoreBtn { position: relative; opacity: 0; text-align: center; animation-delay: 800ms; animation-duration: 1000ms; } .UserSearchResults a#loadMoreStudents { font-size: 14px; background-color: rgba(66,66,66,.68); color: #fff; transition: margin .3s,padding .3s; } .UserSearch_loading { clear: both; width: 94% !important; display: block; text-align: center; padding: 5px; left: 12px; box-sizing: border-box; text-decoration: none; transform: none !important; position: relative; } .ProfAdminDevider { display: block; width: 100%; border-bottom: 3px Solid #adadad; margin: 8px -8px 15px 0px; padding-top: 15px; font-size: 20px; font-weight: 300; } /*------------------------------------------------------------------ [ ? ] Page preview */ #PagePreviewModal .divlbltitle { padding-top: 10px; } #PagePreviewModal .CourseTitle { font: 600 19px 'open sans'; color: #565656; padding-left: 17px; width: 850px; float: left; height: 28px; overflow: hidden; } #PagePreviewModal .Chapter { font: 600 18px 'open sans'; color: #3B5C74; border-bottom: 1px solid #DADADA; padding: 0 6px 2px 0; margin-left: 15px; } #PagePreviewModal .LblTitle { font: 600 17px 'open sans'; color: #565656; padding-left: 22px; padding-top: 5px; display: block; } #PagePreviewModal .CourseSideControls { padding: 13px 0 9px 0; position: fixed; margin-left: 1059px; width: 40px; text-align: center; border-top-right-radius: 20px; background-color: rgba(255, 255, 255, 0.8); border-bottom-right-radius: 20px; border: 1px solid #ccc; border-left-style: dotted; top: 170px; z-index: 999; } #PagePreviewModal .Coursecontent { min-height: 350px; position: relative; padding: 10px 20px 0px 15px; z-index: 4; /*Zindex is needed for paper statck note !! or the before css will not be visible*/ cursor: default; } #PagePreviewModal .jAudioPushUp { top: -96px !important; } #PagePreviewModal .EditpagePreview { z-index: 99999; position: relative; } /*-------------------------------------------- [] AdminDashTileModal admin modal */ #AdminDashTileModal .modal-dialog { margin-bottom: 0px !important; padding-bottom: 0px !important; } #AdminDashTileModal .GenericContainer { margin-bottom: 0px !important; padding-bottom: 0px !important; } #AdminDashTileModal .modal.in { background-color: #000000ab; } #AdminDashTileModal .ui-jqgrid tr.jqgrow { cursor: auto !important; } /*-------------------------------------------- [] admin Point Edit modal */ #pointEditModal .modal-dialog .GenericContainer { position: relative; padding: 15px; } #divPointCurTarget { margin-left: 140px; } #aPointCurTarget { height: 17px; position: relative; top: 4px; cursor: pointer; margin-left: 2px; } #aPointCurTarget_change { margin-left: 10px; text-decoration: underline; } /*-------------------------------------------- [] related training edit modal */ #relatedTrainingContainer #divSrc .code_editor_toolbar_header { width: 610px; } #relatedTrainingContainer #divSrc .CodeMirror { width: 607px; } #relatedTrainingContainer #divSrc .code_editor_toolbar_footer { width: 610px; } #relatedTrainingContainer #divSrc .code_editor_revision { display: none; } /*------------------------------------------------------------------ [ End of Content ] */ /* LPPerfomanceModal */ #LPPerfomanceModal .AdminWidget { cursor: default !important; background-color: #A3A3A3 !important; } #divRosLPSummary .jqgrow, #divRosCourseSummary .jqgrow,#gbox_gdRosRecCourseSummary_attempt .jqgrow, #gbox_gdRosEventSummary .jqgrow,#gdRosESignSummary .jqgrow, #gbox_gdLPperform .jqgrow { cursor: pointer; } /*Temp hide Chat Wall and video greeting*/ #CatalogDetailModal.assigned { padding-right: 0px; } #CatalogDetailModal.assigned .chat { display: none; } #MyBody .ChatValidationAccess { display: none!important } .conferenceOnly {display : none} /* BulkCourseSetting Modal */ #BulkCourseSetting a.btn { font-size: 16px; padding: 8px 20px; margin-bottom: -10px; } /*End Temp hide chat wall*/ /*-------------------------------------------- [] BEGIN: eSign Signature Modal (Profile) */ .ySigModal.modal {transition: background-color .2s;width: 100%;left: 0;margin-top: 0;}.ySigModal.modal-content {border-radius: 2px;}.ySigModal.modal-body {padding-bottom: 0;padding-top: 0;user-select: none;}.ySigModal.modal-backdrop {opacity: .7;z-index: 1049;}.ySigModal .modal-header {border-bottom: none;}.ySigModal .modal-footer {padding-top: 5px;border-top: none;text-align:center }.ySigModal.modal .modal-dialog {width: 510px;background-color: white;left: 87px;position: relative;top: 36px;padding: 25px;}#signature_options li {margin-top: 4px;margin-bottom: 4px;line-height: normal;}.ySigModal #signature_options input[type="radio"].styled + label {padding-top: 8px;padding-bottom: 5px;padding-left: 10px;cursor: pointer;margin-bottom: 0px;margin: 0px;display: block;}#signature_options img {max-height: 30px;vertical-align: middle;}#signatureExpiredLabel {display: none;}.ySigModal #signature_options input[name="selectedSignature"]:checked + label {background: rgba(134, 183, 88, 0.35) !important;}.ySigModal #signature_options li:hover label {background: rgba(165, 174, 156, 0.25);}input[type="radio"].styled + label:before {display:none}.ySigModal {left: 0;top: 0;margin-top: 0;width: 100%;height: 100%;}.ySigModal #saveSignatureButton {width: 300px;height: 50px;font-size: 17px !important;margin-top: 30px;background-color: #75A646;color: #fff !important;text-transform: uppercase;outline: none;max-width: 52%;}.ySigModal #signatureLabel {margin-left: 20px;padding-top: 4px;font-weight: 400;font-size: 24px;font-family: 'Open Sans';}.modal-body p {font-size: 13px;line-height: 16px;}.ySigModal input[type="radio"].styled {position: absolute;opacity: 0;-moz-opacity: 0;-webkit-opacity: 0;-o-opacity: 0;}.ySigModal input[type="radio"].styled + label {position: relative;padding: 0 0 0 25px;font-size: 16px;margin: 0 0 10px 0;}#legalDisclosureLink {text-decoration: underline;} /*-------------------------------------------- [] END: eSign Signature Modal (Profile) */ /*-------------------------------------------- [] BEGIN: Point Report Modal (student dashboard) */ #StudentReportModal .ui-tabs .ui-tabs-tab.ui-tabs-active { background-color: #fff !important; } #StudentReportModal .ui-tabs .ui-tabs-tab { margin-bottom: -5px; z-index: 9999; background: none !important; box-shadow: none !important; } #StudentReportModal .ui-tabs-tab.ui-tabs-active { border-style: solid; border-width: 2px 2px 0px 2px !important; border-color: #ddd !important; } #StudentReportModal .ui-tabs-tab.ui-tabs-active { color: #0077D1 !important; } #StudentReportModal .ui-tabs-modern { filter: none; } #StudentReportModal .ui-tabs-tab p { font-weight: 600 !important; font-family: 'Open Sans' !important; text-transform: uppercase; } #StudentReportModal .ui-tabs .ui-tabs-tab { margin-bottom: -4px; z-index: 9999; background: none !important; box-shadow: none !important; } #StudentReportModal .tab-navbar.ui-tabs-nav { border-style: solid; border-width: 0px 0px 2px 0px !important; border-color: #ddd !important; } #StudentReportModal .tab-navbar.ui-tabs-nav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #StudentReportModal .ui-tabs-panel.ui-tabs-panel-active { border-top: 0px solid #f5f5f5; } #StudentReportModal .ui-tabs-panel.ui-tabs-panel-active { border: none; } #StudentReportModal #ulStudentActivityResult .pageLi .strrLi { position: absolute; left: 16px; } #StudentReportModal #ulStudentActivityResult .pageLi span { cursor: pointer; } #StudentReportModal #ulStudentActivityResult .pageLi { padding-left: 60px; font-weight: 500; font-size: 15px; position: relative; } #StudentReportModal #ulStudentActivityResult .pgActionLi { font-size: 14px; font-weight: 500; padding-left: 75px; font-style: italic; } #StudentReportModal #ulStudentActivityResult .courseLi { font-size: 18px; font-weight: 500; border-bottom: 1px solid #E5E3E3; vertical-align: middle; line-height: 34px; background-color: #fff; vertical-align: bottom; padding-top: 40px; } #StudentReportModal .tab_leaderboard { padding: 0px; } #StudentReportModal .tab_leaderboard .dash_Leader_Board:after { content: '' !important; } #StudentReportModal .tab_leaderboard .dash_Leader_Board { border-width: 0px; } #StudentReportModal .tab_leaderboard .dash_Leader_Board { padding: 23px 5px !important; } #StudentReportModal table#rblLeaderboardFilter { margin-bottom: 20px; } #StudentReportModal .ui-tabs-modern .ui-tabs-tab.ui-tabs-active, .ui-tabs-modern .ui-tabs-tab, #StudentReportModal .ui-tabs-modern .ui-tabs-tab.ui-tabs-active, .ui-tabs-modern .ui-tabs-tab:hover { padding-left: 25px !important; padding-right: 25px !important; } #StudentReportModal .ui-tabs-tab p { font-size: 16px; } /*-------------------------------------------- [] END: Point Report Modal (student dashboard) */ /*-------------------------------------------- [] BEGIN: transcript modal */ .tdTranscriptSumary { vertical-align: top; float: left; min-height: 170px } /*-------------------------------------------- [] END: transcript modal */ /*------------------------------------------------------------------ Second Chance Modal Location: SecondChanceModal.js Author: Chris Cruz Since: 2026 */ /* Base Modal */ #SecondChanceModal { display: none; z-index: 9999999 !important; } #SecondChanceModal.modal.in { background-color: rgba(0, 0, 0, 0.6) !important; } #SecondChanceModal .modal-dialog { background-color: white; padding: 13px 20px; width: 900px; max-width: 95%; box-sizing: border-box; } #SecondChanceModal .modal-header { border-bottom: 1px solid #e9ecef; padding: 15px 20px; background-color: #f8f9fa; margin: -13px -20px 0 -20px; } #SecondChanceModal .modal-header span { font: 600 20px 'Open Sans'; color: #2c3e50; } #SecondChanceModal .second-chance-subtitle { margin: 5px 0 0 0; color: #666; font-size: 14px; font-weight: normal; } #SecondChanceModal .GenericContainer { padding-bottom: 0 !important; } #SecondChanceModal .GenericContainer > .paddingbottom10 { padding-bottom: 0 !important; } /* Container */ #SecondChanceModal .second-chance-container { font-family: 'Open Sans', sans-serif; margin: 0 -20px -13px -20px; } /* Video Player */ #SecondChanceModal .second-chance-player { background: #000; position: relative; min-height: 400px; } #SecondChanceModal .second-chance-player iframe { display: block; } /* Loading overlay */ #SecondChanceModal .second-chance-loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 10; } #SecondChanceModal .second-chance-loading-inner { text-align: center; color: #fff; } #SecondChanceModal .second-chance-loading .spinner { border: 4px solid rgba(255, 255, 255, 0.3); border-top: 4px solid #fff; border-radius: 50%; width: 40px; height: 40px; animation: secondChanceSpin 1s linear infinite; margin: 0 auto 15px; } @keyframes secondChanceSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Resume Prompt Overlay */ #SecondChanceModal .second-chance-resume-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; display: flex; align-items: center; justify-content: center; z-index: 20; } #SecondChanceModal .second-chance-resume-overlay .resume-overlay-content { text-align: center; color: #fff; padding: 40px; max-width: 500px; } #SecondChanceModal .second-chance-resume-overlay h3 { font-size: 24px; font-weight: 600; margin: 0 0 12px 0; color: #fff; } #SecondChanceModal .second-chance-resume-overlay .resume-overlay-subtext { font-size: 15px; color: rgba(255, 255, 255, 0.75); margin: 0 0 35px 0; } #SecondChanceModal .second-chance-resume-overlay .resume-overlay-buttons { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; } #SecondChanceModal .second-chance-resume-overlay .btn-resume-overlay { background: #28a745; color: #fff; padding: 14px 30px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, transform 0.1s ease; font-size: 15px; } #SecondChanceModal .second-chance-resume-overlay .btn-resume-overlay:hover { background: #218838; transform: translateY(-2px); } #SecondChanceModal .second-chance-resume-overlay .btn-restart-overlay { background: transparent; color: #fff; padding: 14px 30px; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 6px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease; font-size: 15px; } #SecondChanceModal .second-chance-resume-overlay .btn-restart-overlay:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.8); transform: translateY(-2px); } /* Progress Section */ #SecondChanceModal .second-chance-progress { padding: 20px 25px; background: #f8f9fa; border-top: 1px solid #e9ecef; } #SecondChanceModal .second-chance-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } #SecondChanceModal .second-chance-progress-label { font-weight: 600; color: #2c3e50; font-size: 14px; } #SecondChanceModal .second-chance-time-display { font-family: 'Courier New', monospace; color: #666; font-size: 14px; } #SecondChanceModal .second-chance-progress .progress-bar-container { background: #e9ecef; border-radius: 10px; height: 8px; overflow: hidden; } #SecondChanceModal .second-chance-progress .progress-bar-fill { background: linear-gradient(90deg, #27ae60 0%, #2ecc71 100%); height: 100%; width: 0%; transition: width 0.3s ease; border-radius: 10px; } #SecondChanceModal .second-chance-progress-footer { display: flex; justify-content: space-between; margin-top: 10px; } #SecondChanceModal .second-chance-progress-footer span { font-size: 12px; color: #888; } #SecondChanceModal .second-chance-progress-footer span.completed, #SecondChanceModal .second-chance-progress-footer span.status-complete { color: #27ae60; font-weight: 600; } #SecondChanceModal .second-chance-progress-footer span.status-incomplete { color: #856404; } /* Footer - Validation Warning (hidden by default) */ #SecondChanceModal .second-chance-footer { padding: 15px 25px; background: #fff3cd; border-top: 1px solid #ffeeba; display: none; } #SecondChanceModal .second-chance-footer .warning-message { display: flex; align-items: center; color: #856404; font-size: 13px; } #SecondChanceModal .second-chance-footer .warning-message .icomoon-warning { font-size: 18px; margin-right: 10px; color: #856404; } /* Submit Button Container */ #SecondChanceModal .second-chance-submit-container { padding: 15px 25px; background: #fff; border-top: 1px solid #e9ecef; display: flex; justify-content: center; align-items: center; } #SecondChanceModal .btn-save-second-chance { background: #28a745; color: #fff; padding: 12px 40px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease, transform 0.1s ease; font-size: 16px; } #SecondChanceModal .btn-save-second-chance:hover:not(:disabled) { background: #218838; transform: translateY(-1px); } #SecondChanceModal .btn-save-second-chance:active:not(:disabled) { transform: translateY(0); } #SecondChanceModal .btn-save-second-chance:disabled { background: #94d3a2; cursor: not-allowed; opacity: 0.7; } /* Completed state */ #SecondChanceModal.video-completed .second-chance-progress { background: #d4edda; } #SecondChanceModal.video-completed #secondChanceProgressBar { background: linear-gradient(90deg, #28a745 0%, #34ce57 100%); } /* Responsive */ @media (max-width: 960px) { #SecondChanceModal .modal-dialog { width: 95% !important; margin: 20px auto !important; } #SecondChanceModal .second-chance-footer { flex-direction: column; gap: 15px; } #SecondChanceModal .second-chance-footer .warning-message { margin-right: 0; margin-bottom: 10px; } #SecondChanceModal .second-chance-submit-container { padding: 15px; } #SecondChanceModal .btn-save-second-chance { width: 100%; padding: 12px 20px; } #SecondChanceModal .second-chance-resume-overlay .resume-overlay-content { padding: 20px; } #SecondChanceModal .second-chance-resume-overlay h3 { font-size: 18px; } #SecondChanceModal .second-chance-resume-overlay .resume-overlay-buttons { flex-direction: column; gap: 10px; } #SecondChanceModal .second-chance-resume-overlay .btn-resume-overlay, #SecondChanceModal .second-chance-resume-overlay .btn-restart-overlay { width: 100%; justify-content: center; } } /*------------------------------------------------------------------ Name: Author.css Description: CSS which drives the entire authoring/student experience Author: Spencer Gresoro [Table of contents] -- each section is a region - collapse to get an overview -------------------------------------------------------------------*/ /* Default styling for all policy search system modals (search + preview) */ .policy-search-system-modal { background: white; padding: 20px !important; box-shadow: 0 3px 9px rgba(59, 59, 59, 0.5); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; background-clip: padding-box; outline: none; min-width: 1125px; width: 95%; max-width: 1500px; min-height: 560px; max-height: 85vh; } .policy-search-system-modal .modal-body { max-height: calc(85vh - 120px); overflow-y: auto; } .policy-search-modal .modal-title { font-size: 1.5rem; } .policy-search-modal .description-panel { background-color: #f8f9fa; border-radius: 0.375rem; } .policy-search-modal .policy-rows .list-group-item { border-left: 0; border-right: 0; border-top: 0; border-bottom: 1px solid #e2e8f0; padding: 10px 0; margin: 0; } .policy-search-modal .policy_search_row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: nowrap; gap: 16px; } .policy-search-modal .policy-rows .list-group-item:first-child { border-top: 1px solid #e2e8f0; } .policy-search-modal .min-width-0 { min-width: 0; flex: 1 1 auto; } .policy-search-modal .policy-row-header { display: inline-flex; align-items: center; flex-wrap: nowrap !important; gap: 8px; margin-bottom: 8px; width: auto; max-width: 100%; } .policy-search-modal .policy-row-title { display: inline-block; flex: 0 1 auto; width: auto !important; max-width: none; font-size: 1rem; font-weight: 700; line-height: 1.2; margin: 0px !important; } .policy-search-modal .policy-row-view-btn { white-space: nowrap; align-self: flex-start; margin-top: 2px; border-radius: 10px; } .policy-search-modal .policy-text-snippet { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px !important; line-height: 1.35; } .policy-search-modal .policy-additional-info { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0 !important; margin-bottom: 15px; line-height: 1.25; font-style: italic; font-weight: 600; color: #5f6b7a; } .policy-search-modal .content-type-badge { display: inline-block; flex: 0 0 auto; font-weight: 700; background: #eef2f6; color: #1f2d3d; border: 1px solid #d9e2ec; padding: 3px 10px; margin-left: 8px !important; line-height: 1.2; white-space: nowrap; border-radius: 50rem !important; font-size: 0.875rem; } .policy-search-modal .search-summary { font-weight: 700; border-left: 4px solid #0d6efd; } .policy-preview-content { line-height: 1.6; } .policy-preview-content img { max-width: 100%; height: auto; } .policy-preview-content .aspire-policy-header, .policy-preview-content .aspire-policy-footer { overflow: hidden; } .policy-preview-content .aspire-policy-header::after, .policy-preview-content .aspire-policy-footer::after { content: ''; display: table; clear: both; } .policy-search-modal .search-row .policy-search-input-group { display: flex; width: 100%; } .policy-search-modal .search-row .policy-search-input { flex: 1; min-width: 0; height: 46px; padding: 0.5rem 0.75rem; font-size: 1rem; line-height: 1.5; margin-right: 5px; color: #212529; background: #fff; border: 1px solid #ced4da; border-radius: 0.375rem; box-sizing: border-box; } .policy-search-modal .search-row .policy-search-input::placeholder { color: #6c757d; } .policy-search-modal .search-row .policy-search-input:focus { outline: 0; border-color: #86b7fe; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .policy-search-modal .search-row .policy-search-btn { flex-shrink: 0; height: 46px; padding: 0.5rem 1.25rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #fff; background: #0d6efd; border: 1px solid #0d6efd; border-radius: 0.375rem; cursor: pointer; } .policy-search-modal .search-row .policy-search-btn.ml-2 { margin-left: 0.5rem !important; } .policy-search-modal .search-row .policy-search-btn:hover:not(:disabled) { background: #0b5ed7; border-color: #0a58ca; } .policy-search-modal .search-row .policy-search-btn:disabled { opacity: 0.65; cursor: not-allowed; } /* Policy search toolbar (ported from Angular policy-search-modal.component.scss) */ .policy-search-modal .search-row .policy-search-toolbar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.75rem; max-width: 100%; } .policy-search-modal .search-row .policy-search-toolbar .policy-search-input { flex: 1 1 12rem; border-radius: 10px; padding: 0.65rem 1.1rem; min-height: 3.125rem; font-size: 1.05rem; line-height: 1.4; margin-right: 0; } .policy-search-modal .search-row .policy-search-toolbar .policy-search-action { flex: 0 0 auto; align-self: stretch; padding-left: 1.25rem; padding-right: 1.25rem; min-height: 3.125rem; border-radius: 10px; } /* Space below search toolbar (grid, tree, vector results) */ .policy-search-modal .policy-collection-grid, .policy-search-modal .policy-search-embed-tree, .policy-search-modal .policy-search-vector-section { margin-top: 1.25rem; } .policy-search-modal .policy-search-embed-tree .policy-search-tree-back-btn { border-radius: 10px; } /* Policy grid — table row feel, title column header left-aligned */ .policy-search-modal .policy-grid-table table.table { border-collapse: collapse; } .policy-search-modal .policy-grid-table table.table thead th { padding: 0.75rem; vertical-align: top; text-align: left; border-bottom: 1px solid #e9e9e9; font-weight: 600; } .policy-search-modal .policy-grid-table table.table thead th.text-right { text-align: right; } .policy-search-modal .policy-grid-table table.table tbody td { padding: 0.75rem; vertical-align: top; border-top: 1px solid #e9e9e9; } .policy-search-modal .policy-grid-table table.table tbody tr:first-child td { border-top: none; } .policy-search-modal .policy-grid-table .policy-search-main-grid-row { cursor: pointer; } .policy-search-modal .policy-grid-table .policy-search-main-grid-row:hover { background-color: rgba(0, 0, 0, 0.075); } .policy-search-modal .policy-grid-table .policy-search-main-grid-row:focus-visible { outline: 2px solid #0d6efd; outline-offset: -2px; } .policy-search-modal .policy-grid-table .policy-search-grid-view-btn.btn_resource_edit { align-items: center; border: 1px solid #dedede; border-radius: 10px; color: #212529; display: inline-flex; font-weight: 600; justify-content: center; min-height: 33px; min-width: 75px; padding: 0.35rem 0.85rem; } /* ===================================================================== Policy search embedded tree — compact, read-only (mirrors Angular) ===================================================================== */ .policy-search-modal .policy-search-embed-policy-title { color: #0009; font-weight: 400; font-size: 18px; } .policy-search-modal .policy-search-treeview-host { color: #505050; font-family: 'Open Sans', sans-serif; font-size: 13px; } /* --- Section node (grey card) --- */ .policy-search-modal .policy-search-treeview-host .aspire-tree-section-node { background: rgba(221, 221, 221, 0.32); box-shadow: 0 4px 6px #c7c7c7; border-radius: 4px; margin-top: 16px; margin-bottom: 10px; padding: 0 0 6px; } .policy-search-modal .policy-search-treeview-host .ps-tree-section-header { display: flex; align-items: center; padding: 8px 12px; gap: 6px; } .policy-search-modal .policy-search-treeview-host .ps-tree-caret { flex: 0 0 auto; cursor: pointer; font-size: 10px; line-height: 1; color: #333; user-select: none; width: 14px; text-align: center; } .policy-search-modal .policy-search-treeview-host .ps-tree-section-name { flex: 1 1 auto; font-size: 14px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .policy-search-modal .policy-search-treeview-host .ps-tree-status { flex: 0 0 auto; background-color: rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.04); border-radius: 2px; color: #a5a3a3; font-size: 13px; min-width: 70px; padding: 3px 6px; text-align: center; } /* --- Nested sections indentation --- */ .policy-search-modal .policy-search-treeview-host .ps-tree-children .aspire-tree-section-node { margin-left: 14px; margin-right: 4px; } /* --- Item rows --- */ .policy-search-modal .policy-search-treeview-host .ps-tree-item { display: flex; align-items: center; gap: 8px; padding: 5px 12px; margin: 0 4px; border-bottom: 1px solid rgba(221, 221, 221, 0.78); background: #fff; } .policy-search-modal .policy-search-treeview-host .ps-tree-item-name { flex: 1 1 auto; font-size: 14px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Expando pill (POLICY > / PROCEDURE >) */ .policy-search-modal .policy-search-treeview-host .a-content-expando { background: #99E5FF; border-radius: 4px; color: #1a1a1a; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 22px; padding: 2px 5px; text-align: center; text-decoration: none; width: 73px; font-size: 10px; font-weight: 700; white-space: nowrap; } .policy-search-modal .policy-search-treeview-host .a-content-expando.pol::before { content: 'POLICY >'; } .policy-search-modal .policy-search-treeview-host .a-content-expando.proc { background: #9BEDD2; width: 95px; } .policy-search-modal .policy-search-treeview-host .a-content-expando.proc::before { content: 'PROCEDURE >'; font-size: 9px; } /* View button inside tree */ .policy-search-modal .policy-search-treeview-host .btn_resource_edit { flex: 0 0 auto; align-items: center; border: 1px solid #dedede; border-radius: 10px; color: #212529; cursor: pointer; display: inline-flex; font-weight: 600; justify-content: center; line-height: 1.4; min-height: 28px; min-width: 60px; padding: 2px 12px; font-size: 13px; } /* Children indentation */ .policy-search-modal .policy-search-treeview-host .ps-tree-children { padding-left: 0; } .policy-search-modal .policy-search-treeview-host .ps-tree-item-children { margin-left: 12px; } .policy-search-modal .policy-search-treeview-host .ps-tree-item-highlight { background: #fff3cd !important; transition: background 0.6s ease; } .policy-search-item-preview-modal .policy-preview-iframe.doctypeframe { width: 100%; height: 550px; min-height: 400px; border: 0; display: block; } .policy-search-item-preview-modal .policy-search-preview-modal-body { min-height: 0; } /* #region Ckeditor Structure */ /*Hack to make the side triangle of the banner work in IE 10 11 since IE does not support css filter */ @media all and (-ms-high-contrast:none) { /* IE10 */ div[class^=SideBanner_Left]:After { background-color: inherit; background-image: url(/images/controls/ColorNoteSidebannerLeft.png); width: 15px; height: 10px; border-bottom: none; border-right-width: 0px; } div[class^=SideBanner_Right]:After { background-color: inherit; background-image: url(/images/controls/ColorNoteSidebannerRight.png); width: 15px; height: 10px; border-bottom: none; border-left-width: 0px; } /* IE11 */ *::-ms-backdrop, div[class^=SideBanner_Left]:After { background-color: inherit; background-image: url(/images/controls/ColorNoteSidebannerLeft.png); width: 15px; height: 10px; border-bottom: none; border-right-width: 0px; } *::-ms-backdrop, div[class^=SideBanner_Right]:After { background-color: inherit; background-image: url(/images/controls/ColorNoteSidebannerRight.png); width: 15px; height: 10px; border-bottom: none; border-left-width: 0px; } } .cke_contents a { text-decoration: none; cursor: pointer; outline: none; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; } .cke_screen_reader_only { display: none } .cke_editor_txtAddPageContents .cke_wysiwyg_div, .cke_editor_txtModalQuestionEdit_question .cke_wysiwyg_div, .txt_yhelp + .cke .cke_wysiwyg_div, .cke_editor_txtCustTabContent .cke_wysiwyg_div { background-color: #fbfbfb; overflow-y: scroll; } .cke_editor_txtAddPageContents .cke_wysiwyg_div { padding: 5px 28px !important; } /*force background for certain */ .AdminHide, .AH { display: none; } table[border='1'], table[border='2'], table[border='3'], table[border='4'] { border-width: 0px !important; border-collapse: collapse; border-color: #aaaaaa; border-style: solid } table[border='1'] td, table[border='1'] th { border-width: 1px; border-color: inherit; border-style: solid } table[border='2'] td, table[border='2'] th { border-width: 2px; border-color: inherit; border-style: solid } table[border='3'] td, table[border='3'] th { border-width: 3px; border-color: inherit; border-style: solid } table[border='4'] td, table[border='4'] th { border-width: 4px; border-color: inherit; border-style: solid } table[border='5'] td, table[border='5'] th { border-width: 5px; border-color: inherit; border-style: solid } table[border='6'] td, table[border='6'] th { border-width: 6px; border-color: inherit; border-style: solid } table[border='7'] td, table[border='7'] th { border-width: 7px; border-color: inherit; border-style: solid } table[border='8'] td, table[border='8'] th { border-width: 8px; border-color: inherit; border-style: solid } table[border='9'] td, table[border='9'] th { border-width: 9px; border-color: inherit; border-style: solid } table[border='10'] td, table[border='10'] th { border-width: 10px; border-color: inherit; border-style: solid } .cke_contents table:not([border]):not(.paste_from_word) { border-color: #F5F5F5; border-style: solid; border: 1px dashed #C5C5C5; border-style: dashed !important; } .cke_contents table:not([border]):not(.paste_from_word) { border-collapse: collapse; } .cke_contents table:not([border]):not(.paste_from_word) td, .cke_contents table:not([border]):not(.paste_from_word) th { border: 1px dashed #C5C5C5; } /*default border color*/ .cke_custom_merge_title_Insert a span.cke_combo_inlinelabel { width: 38px !important; } .cke_panel_block { outline: none; -webkit-user-select: none; } .cke_contents table[border='0'] { border-collapse: collapse; } .cke_contents table[border='0'] td, .cke_contents table[border='0'] th { border: 1px dashed #C5C5C5; } .cke_source { white-space: normal !important; box-sizing: border-box; } .cke_editor_txtAddPageTitle .cke_top { display: none; } .cke_editor_txtFAQQuestion .cke_top { display: none; } .cke_editor_txtTitleAdd .cke_top { display: none; } .cke_editor_txtDescriptionAdd .cke_top { display: none; } /*.btnPreviewContent { display: none !important }*/ user agent stylesheetfigure { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 40px; -webkit-margin-end: 40px; } /*.EventAccGrpsTitle { background: #e5e3e3 0px 0px; height: 20px; font: bold 13px sans-serif; color: #565656; padding: 5px; }*/ .EventAccGrpsTitle { height: 23px; font: 600 15px 'open sans'; color: #868686; padding: 5px 5px 0 5px; background-color: #FFF; border-bottom: 4px solid #E5E3E3; } .EventAccGrps { font-size: 13px; padding: 5px; padding-left: 10px; line-height: 20px; border-bottom: 3px solid #f5f5f5; } .EventAccGrps img { height: 14px; position: relative; top: 4px; right: 5px; float: right; } .EventAccGrps:nth-child(even) { background-color: #ffffff; } .EventAccGrps:nth-child(odd) { background-color: #f5f5f5; } .cke_editor_txtAddPageTitle .cke_wysiwyg_div { padding-top: 5px; font: normal 19px sans-serif; } .cke_wysiwyg_div { z-index: 1; } .cke_dialog_contents_body { padding-top: 9px !important; } /*dialog overrides*/ .cke_dialog .FlashPreviewBox { border: 1px ridge #BBB !important; } .cke_dialog_body { background: #fff !important; border: 1px solid #bcbcbcba !important; border-radius: 0px !important; } input.cke_dialog_ui_input_text:focus, input.cke_dialog_ui_input_password:focus, textarea.cke_dialog_ui_input_textarea:focus, select.cke_dialog_ui_input_select:focus { border-color: #C5C5C5 !important; } input.cke_dialog_ui_input_text, input.cke_dialog_ui_input_password, textarea.cke_dialog_ui_input_textarea { box-shadow: none !important; border-top-color: #c9cccf !important; } .cke_dialog_footer { background-image: none !important; outline: none !important; box-shadow: none !important; background: #F5F5F5 !important; } .cke_dialog_title { border-bottom: none !important; background-image: none !important; background: #fff !important; padding: 8px !important; cursor: move !important; } select.cke_dialog_ui_input_select { box-shadow: none !important; } /*buttons*/ a.cke_dialog_ui_button { background-image: none !important; border-color: transparent !important; box-shadow: none !important; text-shadow: 0 0 transparent !important; border-width: 1px !important; padding: 3px 0px !important; border-radius: 0px !important; } .cke_dialog_footer .cke_dialog_ui_button { margin-top: 3px !important; } a.cke_dialog_ui_button span { text-shadow: 0 0 transparent !important; } a.cke_dialog_ui_button_ok { background: #09863e !important; } a.cke_dialog_ui_button_ok:hover { background: #53aa78 !important; } a.cke_dialog_close_button { top: 5px !important; } a.cke_dialog_ui_button_cancel:not(.anim_close) { margin-left: 15px !important; } a.cke_dialog_ui_button_ok { padding: 3px 5px !important; } .cke_dialog_footer_buttons { float: left; margin-left: 10px !important; } .cke_dialog .ImagePreviewBox { border: 1px solid#949494 !important; border-radius: 2px !important; } a.cke_dialog_tab { margin-right: 7px !important; color: #808080 !important; border: 1px solid #DCDCDC !important; border-radius: 2px 2px 0 0 !important; background: #F5F5F5 !important; background-image: none !important; border-radius: 0px !important; } a.cke_dialog_tab_selected { background: #fff !important; color: #383838 !important; border-bottom-color: #fff !important; } .cke_dialog_contents { border-color: #DCDCDC !important; } .cke_reset_all fieldset { border-width: 0px !important; } /* #endregion */ /* #region Merge Fields */ /* merge field tool */ .cke_custom_merge_title_Insert a span.cke_combo_inlinelabel { width: 35px; font-weight: 600; font-family: 'open sans'; } .cke_custom_merge_title_Merge_Fields a span.cke_combo_inlinelabel { width: 75px; font-weight: 600; font-family: 'open sans'; } .cke_merge_height_1 { height: 29px !important; } .cke_merge_height_2 { height: 58px !important; } .cke_merge_height_3 { height: 87px !important; } .cke_merge_height_4 { height: 116px !important; } .cke_merge_height_5 { height: 145px !important; } .cke_merge_height_6 { height: 174px !important; } .cke_merge_height_7 { height: 203px !important; } .cke_merge_height_8 { height: 232px !important; } .cke_merge_height_9 { height: 261px !important; } .cke_merge_height_10 { height: 290px !important; } .cke_merge_height_11 { height: 319px !important; } .cke_merge_height_12 { height: 348px !important; } .cke_merge_height_13 { height: 377px !important; } /* #endregion */ /* #region Random */ /*Dialog select overide */ select.cke_dialog_ui_input_select { line-height: 20px !important; padding-top: 0px !important; color: #636363 !important; /* text-decoration: none; */ border: 1px solid #DBDBDB !important; border-radius: 3px !important; height: 30px !important; background: url('images/arrpwddl.png') no-repeat right #fff !important; cursor: pointer; } /* add a pointer to anything clickable ! */ [data-page-preview-page-id] { cursor: pointer; } /*exception for login slide show*/ #slideshow img { max-width: 100%; } /* #endregion */ /* #region Image Tag Plugin */ .ddlAlignImageTag label { vertical-align: middle !important; } .WizImgControlPanel { margin: 7px; padding-top: 3px; margin-bottom: 20px; top: -7px; width: 889px; padding-left: 0px; background-color: #fff; z-index: 9; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .WizImgControlPanel li { position: relative; margin-right: 5px; margin-top: 5px; } .WizImgControlPanel li a { font-size: 12px !important; padding: 5px !important; padding-bottom: 3px !important; background-color: #f1f1f1; border-bottom-width: 5px !important; } .WizImgControlPanel li a.WizImgAdd { padding: 8px 15px !important; border-radius: 3px; color: #4E983A; } .WizImgControlPanel.nav.nav-tabs::after { content: none; } .WizImgPCount { font-size: 9px; font-style: italic; } .WizImgDelete { font-size: 12px !important; position: absolute; top: -3px; right: -3px; padding: 0 2px !important; line-height: 13px !important; border-radius: 5px !important; } .WizImgContainer { position: relative; } .WizImgAdd .icomoon-plus-circle { color: #4E983A !important; font-size: 12px !important; margin-left: -5px !important; margin-right: 3px !important; vertical-align: middle; } .WizImgContainer:after { /* ff, ie8, o, s, etc. */ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .image_tag_wizard_subcontrols { display: block; clear: both; margin-top: 10px; position: relative; top: 15px; } /* #endregion */ /* #region Widget drag handle overrids */ /*Drag handle override */ img.cke_widget_drag_handler { width: 35px !important; height: 31px !important; cursor: n-resize !important; } .cke_widget_drag_handler_container { transition: none !important; } .cke_widget_wrapper:hover > .cke_widget_drag_handler_container { background-position: 15px 7px !important; height: 31px !important; padding-right: 12px; background-repeat: no-repeat !important; background-color: rgba(220, 220, 220, 0.85) !important; margin-top: -16px !important; border-top-left-radius: 2px; border-top-right-radius: 2px; /*margin-left: 26px;*/ cursor: move; width: 32px; animation-name: fadeIn; -webkit-animation-duration: .3s !important; animation-duration: .3s !important; transform: translateX(0); opacity: 1; } .cke_widget_wrapper:hover > div[class*=postit_Left] + .cke_widget_drag_handler_container { margin-top: -7px !important; transform: rotate(-5deg); } .cke_widget_wrapper:hover > div[class*=postit_Right] + .cke_widget_drag_handler_container { margin-top: -24px !important; transform: rotate(5deg); } .cke_widget_wrapper:hover > div[class*=buble1_Left] + .cke_widget_drag_handler_container { margin-top: -21px !important; } .cke_widget_wrapper:hover > div[class*=buble1_Left] + .cke_widget_drag_handler_container { margin-top: -21px !important; } /* #endregion */ /* #region Resizer Handles */ .cke_image_resizer { display: none; width: 23px !important; height: 23px !important; bottom: -7px !important; right: -4px !important /* reduced to prevent horizontal scroll*/; background: #3A3A3A !important; outline: none !important; background-image: url(/images/controls/drag-side.png) !important; background-repeat: no-repeat !important; background-position-x: 3px !important; background-position-y: 3px !important; border-radius: 2px !important; animation-name: rubberBand; -webkit-animation-duration: .5s !important; animation-duration: .5s !important; transform: translateX(0); z-index: 6; } [data-image-align="right"] .cke_image_resizer { right: auto; left: -5px; cursor: sw-resize; background-image: url(/images/controls/drag-sideL.png) !important; } /*flip background image when image is floating left*/ img[data-free-drag="on_absolute"] ~ .cke_image_resizer { z-index: 1000000 !important; } /* Image + freedrag, raise the z-index of the resizer handle */ /* Left and Center aligned resizer handles */ .noalign > .widget_resizer, .Left > .widget_resizer, .Center > .widget_resizer, .slideUnder .widget_resizer, .imagehover .widget_resizer, .stepInteraction .widget_resizer, .interactionWidget .widget_resizer.widget_resizer_h { width: 23px !important; height: 23px !important; bottom: -6px; right: -6px; background: #3A3A3A !important; outline: none !important; background-image: url(/images/controls/drag-side.png) !important; background-repeat: no-repeat !important; border-radius: 2px !important; float: right; display: none; position: absolute; z-index: 99; cursor: se-resize; background-position: 3px 3px !important; } .interactionWidget:not(.tilecrawl_interaction) .widget_resizer.widget_resizer_h { top: inherit; } .custom_template.Center .widget_resizer { position: relative; margin-top: -15px; } .widget_resizer.widget_resizer_h:not(.hoverimage.widget_resizer) { margin: 8px; } .stepInteraction .widget_resizer { position: relative; top: 9px; right: 0px; display: block; animation-name: rubberBand; -webkit-animation-duration: .5s !important; animation-duration: .5s !important; transform: translateX(0); } .slideUnder .widget_resizer { margin: 8px; } div[data-interaction-name="hidden-box-square"] .widget_resizer, div[data-interaction-name="hidden-box-arrow"] .widget_resizer { width: 23px !important; height: 23px !important; bottom: -6px; right: -6px; background: #3A3A3A !important; outline: none !important; background-image: url(/images/controls/drag-side.png) !important; background-repeat: no-repeat !important; background-position: 3px 3px !important; border-radius: 2px !important; float: right; display: none; position: absolute; top: inherit; z-index: 99; cursor: se-resize; } div[data-interaction-name="hidden-box-square"] .widget_resizer { position: absolute; top: initial !important; } /* Right aligned resizer handles */ .right > .widget_resizer, .Right > .widget_resizer, .flashDeck.Right .widget_resizer, .slideUnder.rightSide .widget_resizer, .tab-interaction-widget.Right .widget_resizer.widget_resizer_h, .interaction-wrapper-wheel.Right .widget_resizer.widget_resizer_h, .accordion2.Right > .widget_resizer.widget_resizer_h { width: 23px !important; height: 23px !important; bottom: -7px; left: -7px; background: #3A3A3A !important; outline: none !important; background-image: url(/images/controls/drag-sideL.png) !important; background-repeat: no-repeat !important; background-position: 3px 3px !important; border-radius: 3px !important; display: none; position: absolute; top: inherit; z-index: 99; cursor: sw-resize; } /* Tab interaction */ .tab-interaction-widget .widget_resizer.widget_resizer_h { bottom: -4px; right: -14px; } /* Wheel interaction */ .interaction-wrapper-wheel .widget_resizer_h { position: relative !important; top: 347px !important; right: 1px !important; } .interaction-wrapper-wheel.wheel-venn .widget_resizer_h { top: 402px !important; } .interaction-wrapper-wheel.Left .widget_resizer_h { bottom: 0px !important; right: 0px !important; } .interaction-wrapper-wheel.Right .widget_resizer_h { bottom: 0px !important; left: 1px !important; float: left !important; } /* poptile */ .pop_tile_wrapper .widget_horizontal_resizer { position: absolute; top: 25px; right: -27px; height: 30px; width: 30px; border-radius: 3px; -moz-box-shadow: 0px 0px 11px 0px rgba(255,255,255,1); background: url(images/resizeLeftRight.png) no-repeat center transparent !important; background-position: 0px 20px; padding: 12px; cursor: ew-resize; } .pop_tile_wrapper.Right .widget_horizontal_resizer { position: absolute; top: 25px; left: -27px; height: 30px; width: 30px; border-radius: 3px; -moz-box-shadow: 0px 0px 11px 0px rgba(255,255,255,1); background: url(images/resizeLeftRight.png) no-repeat center transparent !important; background-position: 0px 20px; padding: 12px; cursor: ew-resize; } /* Resizer Visibility */ #Note:hover > .widget_resizer, .media_embed:hover > .widget_resizer, .Wrapperforms:hover > .widget_resizer, .Wrapperimage:hover > .cke_image_resizer, .Wrapperimage > p > .cke_image_resizer_wrapper:hover .cke_image_resizer, .Wrapperimage > figure > .cke_image_resizer_wrapper:hover .cke_image_resizer, .stepInteraction:hover .widget_resizer, .hoverimage:hover .widget_resizer, .Show.Hover:hover .widget_resizer, .slideUnder:hover .widget_resizer, .custom_template.Left:hover .widget_resizer, .custom_template.Right:hover .widget_resizer, .custom_template.Center:hover .widget_resizer, .custom_template.noalign:hover .widget_resizer, .custom_shape:hover .widget_resizer, .interactionWidget:hover .widget_resizer.widget_resizer_h { display: block; } .interactionWidget:hover .widget_resizer:not(.hoverimage.widget_resizer) { display: block; } /*todo: remove */ /* Base Resizer Classes */ .cke_resizer { display: none; } .widget_resizer { animation-name: rubberBand; -webkit-animation-duration: .5s !important; animation-duration: .5s !important; transform: translateX(0); } .hResizer { cursor: ew-resize !important; } .tour3D .widget_resizer { cursor: ew-resize !important; } /* Hide resizers */ .project-info-image .widget_resizer, .Wrapperimage:hover .accordion-icon ~ .cke_image_resizer, div[class*=buble1] > div.widget_resizer, div[class*=postit] > div.widget_resizer { display: none !important; } /*force clear when image is set to center this was if it is preceeded by a floating element the wrapper will not be pushed over the prceeding element*/ div.Wrapperimage { clear: both; } /* Resizer Overlay Mask - The overlay mask for avoiding loss of position when resizing and cursor leaves content and enters the iframe */ .widget-resizer-overlay-mask { top: 0; left: 0; width: 100%; height: 100%; z-index: 9; position: fixed; /*background-color: rgba(194, 89, 89, 0.5)!important;*/ } /* vertical resizer */ .widget_resizer_vertical { position: absolute; bottom: -28px; height: 30px; width: 30px; margin-left: 45%; border-radius: 3px; -moz-box-shadow: 0px 0px 11px 0px rgba(255,255,255,1); background: url(images/resizeUpDown.png) no-repeat center transparent !important; background-position: 0px 20px; padding: 12px; cursor: ns-resize; } /* resizer dimension helpers */ .resize_dimension_viewer { height: 16px; min-width: 50px; background-color: white; border: 1px solid #efefef; font-size: 14px; color: black; padding: 0 12px 12px 12px; margin: 0; border-radius: 15px; position: absolute; font-family: 'Open Sans'; font-weight: 400; z-index: 9; } .interactionWidget > .resize_dimension_viewer { padding-top: 0px; padding-bottom: 35px; } .resize_dimension_viewer_extended { width: 100%; height: 3px; text-align: center; padding-top: 18px; border-radius: 0px; bottom: 0; box-sizing: border-box; } .resize_dimension_viewer:not(.resize_dimension_viewer_extended) { top: 30px; left: -50px; } .resize_dimension_viewer_extended:not(.Center) { top: 25px; left: -106px; min-width: 130px; border-radius: 15px; padding-top: 14px; } .WrapperCustom_MediaEmbed .resize_dimension_viewer_extended { height: 29px; padding-top: 0px; } .slideUnder > .resize_dimension_viewer_extended { padding-bottom: 25px; } .custom_shape .resize_dimension_viewer, #Note .resize_dimension_viewer, .custom_template .resize_dimension_viewer { padding-top: 5px; height: auto; } .media_embed .resize_dimension_viewer { padding-top: 5px; } /* right aligned widgets */ .Right > .widget_resizer > .resize_dimension_viewer:not(.Center) { left: -3px; } .Right > .widget_resizer > .resize_dimension_viewer.resize_dimension_viewer_extended:not(.Center), [data-image-align="right"] .resize_dimension_viewer.resize_dimension_viewer_extended:not(.Center) { top: 25px; left: -1px; } .slideUnder.rightSide > .resize_dimension_viewer_extended { left: 0px; } .resize_dimension_viewer.vertical_resizer { left: 50px; } .resize_dimension_viewer_unit_font { font-size: 11px; } [data-mynotetype="shape"].Right > .widget_resizer { margin-left: 70px; } [data-mynotetype="shape"].Left > .widget_resizer, [data-mynotetype="shape"].Center > .widget_resizer { margin-right: 70px; } /*when resizing, the editor should have these cursor style for the lifespan of the 'drag', i removed these from the image plugin and am adding it here so that they're universally availble, even when the image plugin is not loaded*/ .cke_editable.ck_rs_cusor_sw, .cke_editable.ck_rs_cusor_sw * { cursor: sw-resize !important; } .cke_editable.ck_rs_cusor_se, .cke_editable.ck_rs_cusor_se * { cursor: se-resize !important; } /* #endregion */ /* #region Rotator */ .widget_rotator { display: none; position: absolute; left: 98%; bottom: 25%; width: 27px !important; height: 27px !important; background-image: url(/images/controls/rotator.png) !important; background-repeat: no-repeat !important; background-position: center; z-index: 99; cursor: grab; } .custom_shape:hover .widget_rotator, .Wrapperimage:hover .widget_rotator, *[data-mynotetype]:hover .widget_rotator { display: block; } .rotate_helper { width: 20px; height: 20px; line-height: 33px; text-align: center; } /* #endregion Rotator */ /* #region Edit Tabs - controls for launching various dialogs to edit widgets */ .media_embed:hover .widget_EditTab, #PictureInteraction:hover .widget_EditTab, #Note:hover > .widget_EditTab, .custom_template:hover > .widget_EditTab, .WrapperCustom_ToC:hover .widget-toc > .widget_EditTab { display: block; } /* Edit Tabs for all Widgets */ .widget_EditTab { display: none; position: absolute; top: 0; right: 0; cursor: pointer !important; width: 45px; height: 25px; background-color: #59C3F5; text-align: center; border-radius: 0px 0px 0px 20px; color: #FFF; padding: 0 3px 5px 5px; outline: 0px solid #ace !important; animation-name: fadeIn; -webkit-animation-duration: .3s !important; animation-duration: .3s !important; font-size: 18px; margin: 2px; font-family: 'Open Sans' !important; font-weight: 400; z-index: 99999; } .widget_EditTab p { font-size: 18px !important; margin: 2px; font-family: 'Open Sans' !important; } /* Special inline edit tab for Image2 */ span.widget_EditTab { font-size: 19px; margin: 2px; font-family: 'Open Sans' !important; line-height: 22px; } /* Template edit tabs */ .template-edit-tab { width: 135px; } .template-edit-tab p { font-size: 14px; } /* Mirco edit tab style for resizable controls */ /*.widget_EditTab_Micro { width: 58px; height: 30px; }*/ /* Special Edit Tabs for Micro and Compact Audio Players (Custom_MediaEmbed - media variant widget) */ div[data-playertype*=Compact] .widget_EditTab, div[data-playertype*=Micro] .widget_EditTab { line-height: 1; cursor: pointer !important; width: 50px; height: 20px; background-color: #59C3F5; text-align: center; border-radius: 0px 0px 0px 25px; color: #FFF; padding: 5px; display: none; position: absolute; right: 0; top: 0; z-index: 99999; outline: 0px solid #ace !important; animation-name: fadeIn; -webkit-animation-duration: .3s !important; animation-duration: .3s !important; } div[data-playertype*=Compact] .widget_EditTab p, div[data-playertype*=Micro] .widget_EditTab p { font-size: 13px !important; margin: 2px; font-family: 'Open Sans' !important; } div[data-playertype*=Micro] + .cke_widget_drag_handler_container, div[data-playertype*=CirclePlayer] + .cke_widget_drag_handler_container { margin-left: -30px !important; } /* Edit Tabs */ .RoundNote .widget_EditTab { border-radius: 0px 28px 0px 25px; } div[class*=Stackpaper_] .widget_EditTab { border-radius: 0px 13px 0px 20px; right: 1px; top: 1px; } div[class*=buble1_] .widget_EditTab { padding-right: 0px; right: 9px; top: -5px; } /* Wheel interaction edit tabs */ .wheel-interaction .widget_EditTab { width: 28px; height: 12px; position: absolute; top: -5px; left: 22px; border-radius: 8px 8px 0px 0px; transform: rotate(0deg) !important; font-size: 14px !important /* to prevent certain style of pinwheel from taking over.*/; } .wheel-icomoon .widget_EditTab { top: -37px; color: white !important; } .interaction-wrapper-wheel.wheel-flat .widget_EditTab { top: -92px; } .interaction-wrapper-wheel.wheel-venn .widget_EditTab { left: 106px; top: -16px; width: 40px; height: 14px; font-size: 15px !important; color: white !important; } /*This will never be perfect since the position will be affected by the width of the pintbox title.*/ div[class*=PintBox_] .widget_EditTab { top: 8px; border-top-right-radius: 105% 12px; right: -8px; height: 28px; } .media_embed:hover .widget_EditTab, #PictureInteraction:hover, .Wrapperimage:hover .widget_EditTab, .wheel-interaction li:hover .widget_EditTab, .custom_shape:hover .widget_EditTab { display: block; } /* #endregion */ /* #region Sliders */ .image2-sliders { margin-top: 5px; margin-bottom: 5px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .custom-link-sliders-image2 .ui-widget-header { background: #DEDEDE !important; border-radius: 2px 0px 0px 2px; } .custom-link-sliders-input-image2 { border: 0; color: #090E08 !important; font-weight: inherit; font-family: 'open sans'; width: 40px; } .custom-link-sliders-image2 { height: 8px !important; vertical-align: text-top !important; display: -webkit-box; display: -ms-inline-flexbox; padding: 2px 1px; width: 184px; cursor: pointer !important; } .custom-link-sliders-image2 * { cursor: pointer !important; } .custom-link-sliders-image2 .ui-slider-handle { display: block; border: 4px solid #C7C7C7 !important; margin-top: -4px; margin-bottom: -4px; border-radius: 0px; outline: none; } /* #endregion */ /* #region Colored Note Dialog */ /* title visibility */ span.cbToggleTitle:before { content: 'Show Title:'; margin-left: 3px; } input.cbToggleTitle + label { margin-left: 37px; } /* content visibility */ span.cbToggleContent:before { content: 'Show Message:'; margin-left: 3px; } input.cbToggleContent + label { margin-left: 10px; } /* adminstrator and yh book visibility mode */ /*.cbToggleAdminView,*/ .ddlYHBookContextView, .ddlYHBookContextView + .select2 { display: none; } /*.cke_editor_txtYHEditFreeform_dialog .cbToggleAdminView, .cke_editor_txtYSecEditDesc_dialog .cbToggleAdminView,*/ .cke_editor_txtYHEditFreeform_dialog .ddlYHBookContextView + .select2, .cke_editor_txtYSecEditDesc_dialog .ddlYHBookContextView + .select2 { display: block; } /* expose in YH only for the time being */ span.cbToggleAdminView:before { content: 'Author Note:'; } input.cbToggleAdminView + label { margin-left: 6px; } #ddlYHBookContextView { width: 250px !important; } #ddlYHBookContextView + .select2-container { position: relative; left: 0px; top: 10px; } #ddlYHBookContextView + .select2-container:before { content: 'Book Context Only:' } /* select 2 styling */ .select2_colorednote_dialog { width: 146px !important; border-top-right-radius: 4px !important; } .select2_colorednote_dialog .select2-results__options { overflow-y: hidden !important; } .select2_colorednote_dialog .select2-results { max-height: 365px !important; width: 141px; } .select2_colorednote_dialog .select2-results li { padding-bottom: 4.5px; padding-top: 1.5px; text-indent: 0; width: 141px; } .select2_colorednote_dialog .select2-choice { height: 26px !important; } .select2_colorednote_dialog .sp-preview { border: solid 1px #DEDEDE !important; height: 18px !important; } .select2_colorednote_dialog .sp-preview { border: solid 1px #DEDEDE !important; } .select2_colorednote_dialog .select2-result-label { font-size: 13px !important; } .color-note-gallery-text { padding-left: 0px !important; } /* NOT USED IN NOTES ANYMORE: generic shape gallery - once i remove this from the other random places its used, and just use the dynamic shape plugin instead, we can nuke all this */ .lbl_gen_shape_gallery { vertical-align: top !important; } .btn_gen_shape_gallery { width: 120px !important; height: 22px !important; text-overflow: ellipsis; overflow: hidden; } .gen_shape_gallery { display: none; position: absolute; top: -1px; left: -1px; z-index: 999999999999999999999; border: 1px solid #e6e6e6; background-color: white; height: 500px; width: 610px; } .gen_shape_gallery_header { margin: 8px 0 0 15px; } .gen_shape_gallery_controls { background-color: white; width: 610px; box-shadow: 0px 4px 8px -7px rgba(86, 86, 86, 0.65); } .gen_shape_gallery_controls_sub { background-color: white; width: 597px; } .gen_shape_gallery_controls_sub a { cursor: pointer; margin-left: 5px; } .gen_shape_gallery_controls_sub .cancel { display: none; } .gen_shape_gallery > .preview-icomoon-container { padding-top: 8px !important; height: 333px; max-height: unset !important; margin: 25px 15px 15px 15px !important; } .lbl_search_gen_shape_gallery { margin-left: 15px; } .search_gen_shape_gallery { margin: 15px; box-shadow: none !important; border-radius: 3px; border: 1px solid #c9cccf; padding: 4px 6px; outline: 0; width: 250px; } .lbl_filter_gen_shape_gallery { margin-right: 15px; } .filter_gen_shape_gallery { width: 125px; cursor: pointer; } .gen_shape_gallery .close { top: 8px; } .gen_shape_gallery_shift_preview_frame { position: absolute; margin-left: 287px; top: -4px; border: 1px solid #ccc; padding-left: 19px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; background: white; width: 285px; } /* #endregion */ /* #region Colored Note Styles */ .buble_Content #Icon { width: 45px; float: left; clear: both; padding: 0px 10px 0px 10px; } .buble_Content .Left .custom_shape_content { left: -6px; position: relative; } /* Shift content left to prevent shape form touching text when inside a color note*/ #Icon ~ span.cke_widget_drag_handler_container { display: none !important; } /* force a title style */ .buble_Title { font-family: "Lucida Grande","Lucida Sans",Arial,Helvetica,Sans-Serif; background: url(images/Notes/Note_underline.jpg) 0 100% repeat-x; margin: 0px 10px 0px 15px; padding: 5px 0px 5px 0px; font-size: 22px; color: #565656; font-weight: bold; } /*.buble_Content .cke_image_nocaption { float: left; }*/ /* Classic and Round note */ div[class*=Note_][data-mynotetype] { border: 1px solid #DFDFDF; text-align: left; -webkit-box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.27), 0 0 40px rgba(255, 255, 255, 0.55) inset; box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.27), 0 0 40px rgba(255, 255, 255, 0.55) inset; position: relative; clear: both; } .RoundNote { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 4px solid #DFDFDF; -webkit-box-shadow: #C4C4C4 0px 4px 9px, 0 0 40px rgba(255, 255, 255, 0.55) inset; -moz-box-shadow: #C4C4C4 0px 4px 9px, 0 0 40px rgba(255, 255, 255, 0.55) inset; box-shadow: #C4C4C4 0px 4px 9px, 0 0 40px rgba(255, 255, 255, 0.55) inset; } .buble_Title h1, .buble_Title p { font-family: "Lucida Grande","Lucida Sans",Arial,Helvetica,Sans-Serif; margin: 0; padding: 0; font-size: 22px; color: #565656; font-weight: bold; } .buble_Content { margin-left: 25px; padding-bottom: 10px; padding-top: 0px; padding-right: 25px; position: relative; color: #565656; } /* Metro Note */ div[class*=MetroNote_][data-mynotetype] { text-align: left; color: #fff !important; box-shadow: 0 1px 1px rgba(0,0,0,.12); position: relative; border: none; } div[class*=MetroNote_][data-mynotetype] .buble_Title h1, div[class*=MetroNote_][data-mynotetype] .buble_Title p { color: #fff; } div[class*=MetroNote_][data-mynotetype] .buble_Title { background-image: none; border-bottom: 1px solid #fff; } div[class*=MetroNote_][data-mynotetype] .buble_Content { padding-right: 0px; color: #fff !important; } div[class*=Note_][data-mynotetype].Left { margin-right: 10px; clear: none !important /*only block element should clear*/; } div[class*=Note_][data-mynotetype].Right { margin-left: 10px; clear: none !important /*only block element should clear*/; } /* Minimal Note */ div[class*=Minimal_][data-mynotetype] { text-align: left; box-shadow: 0 1px 1px rgba(0,0,0,.12); position: relative; background-color: #F5F5F5; color: #565656; border-width: 0px; border-top-width: 5px; background: url(/App_Themes/Images/1x1_F5F5F5.png) repeat; border-style: solid; margin-bottom: 5px; box-sizing: border-box; } div[class*=Minimal_][data-mynotetype].noteBorderTop { border-width: 5px 0 0 0; } div[class*=Minimal_][data-mynotetype].noteBorderRight { border-width: 0 5px 0 0; padding-top: 5px; } div[class*=Minimal_][data-mynotetype].noteBorderBottom { border-width: 0 0 5px 0; padding-top: 5px; } div[class*=Minimal_][data-mynotetype].noteBorderLeft { border-width: 0 0 0 5px; padding-top: 5px; } div[class*=Minimal_][data-mynotetype] .buble_Title { background-image: none; border-bottom: 1px solid #ABABAB; } div[class*=Minimal_][data-mynotetype] .buble_Content { padding-right: 0px; } div[class*=Minimal_][data-mynotetype].Left { /*margin-right: 10px;*/ clear: none !important; /*only block element should clear*/ } div[class*=Minimal_][data-mynotetype].Right { /*margin-left: 10px;*/ clear: none !important; /*only block element should clear*/ } /* Section Note */ div[class*=section][data-mynotetype] { text-align: left; position: relative; background-color: #ffffff !important; color: #565656; border-left-width: 5px; background: url(/App_Themes/Images/1x1_F5F5F5.png) repeat; border-style: solid; margin-bottom: 0px; box-sizing: border-box; min-height: 17px; border-width: 0 0 0 5px; padding-top: 5px; } div[class*=section][data-mynotetype].noteBorderRight { border-width: 0 5px 0 0; padding-top: 5px; } div[class*=section][data-mynotetype].noteBorderLeft { border-width: 0 0 0 5px; padding-top: 5px; } div[class*=section][data-mynotetype] .buble_Title { display: none !important; } div[class*=section][data-mynotetype] .buble_Content { padding-right: 0px; display: block !important; } div[class*=section][data-mynotetype].Left { /*margin-right: 10px;*/ clear: none !important; /*only block element should clear*/ } div[class*=section][data-mynotetype].Right { /*margin-left: 10px;*/ clear: none !important; /*only block element should clear*/ } /*generate colors*/ .section_Blue { border-color: #3aa0d1; } .section_Green { border-color: #76dc18; } .section_Orange { border-color: #ff9800 } .section_Gray { border-color: #7a7a7a; } /* Pint box note */ div[class*=PintBox_][data-mynotetype] { padding: 19px 0px 0px 0px; position: relative; clear: both; } div[class*=PintBox_][data-mynotetype].Left { clear: none !important; /*only block element should clear*/ margin-right: 15px; } div[class*=PintBox_][data-mynotetype].Right { clear: none !important; /*only block element should clear*/ margin-left: 15px; } div[class*=PintBox_][data-mynotetype]:after { content: " "; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: #fff; } div[class*=PintBox_][data-mynotetype] .buble_Content { margin-left: 0 !important; padding: 9px; position: relative; z-index: 2; border: 5px solid; padding-top: 0px; margin-top: 3px; border-top-width: 0; background-color: #fff; border-radius: 2px; border-bottom-left-radius: 40% 26px; border-bottom-right-radius: 40% 26px; padding-bottom: 20px; border-color: inherit; } div[class*=PintBox_][data-mynotetype] .buble_Content:before { width: 100%; background: #FFF; z-index: 27; content: ''; top: -13px; position: absolute; height: 14px; left: 0px; margin-right: 9px; padding-right: -27px; bottom: 0; -webkit-border-top-left-radius: 50% 16px; border-top-left-radius: 50% 16px; -webkit-border-top-right-radius: 50% 16px; border-top-right-radius: 84% 16px; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .2); } div[class*=PintBox_][data-mynotetype] .buble_Content:after { content: " "; position: absolute; border-color: inherit; top: 0px; border-width: 2px; left: 2px; border-top-width: 0px; border-style: solid; right: 2px; bottom: 2px; z-index: -1; border-radius: 2px; border-bottom-left-radius: 40% 21px; border-bottom-right-radius: 40% 21px; visibility: visible; height: inherit; } /* Neon Note */ div[class*=Neon_][data-mynotetype] { text-align: left; margin-bottom: 5px; box-shadow: inset 0 0 0.3em, 0 0 0.3em; position: relative; border-radius: 15px; border-width: 2px; border-style: solid; /* Animation definition*/ -webkit-animation-duration: .5s !important; animation-duration: .5s !important; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; animation-name: Neon_note; -webkit-animation-name: Neon_note; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; background-color: #fff; } div[class*=Neon_][data-mynotetype] > .buble_Title { left: 50%; padding: 0 1em; position: absolute; top: -13.6px; text-align: center; transform: translateX(-50%); -webkit-transform: translateX(-50%); background: #fff; border-left: 0.2em solid; border-right: 0.2em solid; border-color: inherit; margin: 0px !important; /* Animation definition*/ -webkit-animation-duration: .3s !important; animation-duration: .3s !important; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; animation-name: Neon_Tite; -webkit-animation-name: Neon_Tite; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } div[class*=Neon_][data-mynotetype] .buble_Content { color: #444; } div[class*=Neon_][data-mynotetype].Left { /*margin-right: 10px;*/ clear: none !important; /*only block element should clear*/ } div[class*=Neon_][data-mynotetype].Right { /*margin-left: 10px;*/ clear: none !important; /*only block element should clear*/ } @keyframes Neon_note { from { box-shadow: none; } 20% { box-shadow: none; } 50% { box-shadow: inset 0 0 .7em, 0 0 .7em; } 70% { box-shadow: none; } 80% { box-shadow: inset 0 0 .6em, 0 0 .6em; } 90% { box-shadow: none; } 95% { box-shadow: inset 0 0 .8em, 0 0 .8em; } 97% { box-shadow: none; } to { box-shadow: inset 0 0 0.5em, 0 0 0.5em; } } @-webkit-keyframes Neon_note { from { box-shadow: inset 0 0 0.1em, 0 0 0.1em; } 20% { box-shadow: none; } 50% { box-shadow: inset 0 0 .7em, 0 0 .7em; } 70% { box-shadow: none; } 80% { box-shadow: inset 0 0 .6em, 0 0 .6em; } 90% { box-shadow: none; } 95% { box-shadow: inset 0 0 .8em, 0 0 .8em; } 97% { box-shadow: none; } to { box-shadow: inset 0 0 0.5em, 0 0 0.5em; } } @-webkit-keyframes Neon_Tite { from { opacity: 1; } 20% { opacity: 0; } 50% { opacity: 1; } 70% { opacity: 0; } 80% { opacity: 1; } 90% { opacity: 0; } 95% { opacity: 1; } 97% { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes Neon_Tite { from { opacity: 1; } 20% { opacity: 0; } 50% { opacity: 1; } 70% { opacity: 0; } 80% { opacity: 1; } 90% { opacity: 0; } 95% { opacity: 1; } 97% { opacity: 0; } to { opacity: 1; } } /* Ribbon */ div[class*=PintBox_][data-mynotetype] .buble_Title { border-color: inherit; width: 100%; left: 0px; z-index: 2; margin: -16px -11px; display: block; position: relative; padding: 15px 0px 0px 19px; background: inherit; -webkit-border-top-left-radius: 50% 16px; border-top-left-radius: 50% 16px; -webkit-border-top-right-radius: 50% 16px; border-top-right-radius: 50% 16px; text-decoration: none; font-size: 20px; color: #fff; min-height: 46px; background-image: none; } /*Side triangle*/ div[class*=PintBox_][data-mynotetype] .buble_Title:before { left: 0px; border-color: rgba(0, 0, 0, 0); border-width: 0 11px 11px 0; border-right-color: inherit; } div[class*=PintBox_][data-mynotetype] .buble_Title:after { right: 0px; border-color: rgba(0, 0, 0, 0); border-width: 0 0 11px 11px; border-left-color: inherit; } div[class*=PintBox_][data-mynotetype] .buble_Title:after, div[class*=PintBox_][data-mynotetype] .buble_Title:before { content: ''; position: absolute; border-style: solid; bottom: -11px; z-index: 0; filter: brightness(95%); -webkit-filter: brightness(95%); } div[class*=PintBox_][data-mynotetype] .buble_Title h1, div[class*=PintBox_][data-mynotetype] .buble_Title p { display: block; position: relative; color: #fff; margin: 0px 15px 0px 4px; padding: 0px; font-size: 22px; font-weight: bold; background-image: none; } /*Ribbon end*/ /* Side Banner Note */ div[class*=SideBanner_][data-mynotetype] { text-align: left; color: #fff !important; box-shadow: 0 1px 1px rgba(0,0,0,.12); margin-bottom: 10px; } div[class*=SideBanner_][data-mynotetype] .buble_Content { padding-right: 0px; } div[class*=SideBanner_][data-mynotetype] .buble_Title { background: none; border-bottom: 1px solid #fff; } div[class*=SideBanner_][data-mynotetype] h1, div[class*=SideBanner_][data-mynotetype] p { color: #FFF; } div[class*=SideBanner_Right][data-mynotetype] { margin-right: -35px; margin-left: 15px; clear: none !important; /*only block element should clear*/ padding-right: 10px; } div[class*=SideBanner_Left][data-mynotetype] { margin-left: -41px; margin-right: 15px; clear: none !important; /*only block element should clear*/ } .txt_yhelp + .cke div[class*=SideBanner_Right][data-mynotetype] { margin-right: 0px !important; } .txt_yhelp + .cke div[class*=SideBanner_Left][data-mynotetype] { margin-left: 0px !important; } .FAQAns div[class*=SideBanner_Left][data-mynotetype]:not(div[data-free-drag='on_absolute']) { margin-left: -36px; } div[class*=SideBanner_Left][data-mynotetype]:After { filter: brightness(85%); -webkit-filter: brightness(85%); content: ""; position: absolute; width: 0px; height: 0px; border-bottom: 10px solid rgba(0, 0, 0, 0); border-right-color: inherit; border-right-style: solid; border-right-width: 15px; } div[class*=SideBanner_Right][data-mynotetype]:After { filter: brightness(85%); -webkit-filter: brightness(85%); content: ""; position: absolute; width: 0px; height: 0px; border-bottom: 10px solid rgba(0, 0, 0, 0); border-left-color: inherit; border-left-style: solid; border-left-width: 15px; right: 0; } /* POST IT NOTES */ div[class*=postit_][data-mynotetype]:not(.cke_widget_wrapper) { padding-top: 15px; margin: 15px 25px; border: 1px solid #E8E8E8; border-bottom-right-radius: 60px 5px; -webkit-box-shadow: 2px 4px 2px rgba(0, 0, 0, 0.14), 0 0 10px rgba(0, 0,0, 0.055) inset; box-shadow: 2px 4px 2px rgba(0, 0, 0, 0.14), 0 0 10px rgba(0, 0,0, 0.055) inset; } div[class*=postit_][data-mynotetype]:not(.cke_widget_wrapper):not([id="NoteID"]) { width: 275px !important; } div[class*=postit_Right][data-mynotetype] { -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); margin-left: 15px; } div[class*=postit_Left][data-mynotetype] { -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); margin-right: 15px; } /* PINS */ div[class*=postit][data-mynotetype]:before { background: url(images/Notes/Pin.png) no-repeat; z-index: 1; height: 38px; width: 41px; content: ''; top: -20px; position: absolute; left: +125px; } .cke_button__custom_colorednote_icon { -moz-transform: rotate(-4deg); -webkit-transform: rotate(-4deg); -o-transform: rotate(-4deg); -ms-transform: rotate(-4deg); transform: rotate(-4deg); } /* FULL width Mode */ div[class*=MetroNote_][data-mynotetype].width100, div[class^=Note_][data-mynotetype].width100 { padding: 2px 22.5px !important; margin-left: -25px !important; border-right-width: 0px; border-left-width: 0px; } .cke div[class*=MetroNote_][data-mynotetype].width100, .cke div[class^=Note_][data-mynotetype].width100 { padding: 2px 8px !important; margin-left: -8px !important; } /* Cke prevent extra scroll bar in full width */ div[class*=Stackpaper_][data-mynotetype].width100 { margin-left: -16px !important; } .cke div[class*=Stackpaper_][data-mynotetype].width100 { padding: 8px 0px; margin-left: 0px !important; } /* STACKED NOTE */ div[class*='Stackpaper_'][data-mynotetype] { border: 4px solid #FFF; padding: 3px 0px; position: relative; -webkit-box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.27), 0 0 40px rgba(255, 255, 255, 0.25) inset; box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.27), 0 0 40px rgba(255, 255, 255, 0.25) inset; clear: both; margin-top: 16px !important; margin-bottom: 24px !important; box-sizing: border-box; } .stackpaper-zindex { z-index: inherit !important; } /* authoring context */ div[class*='Stackpaper'][data-mynotetype]:not([data-widget]) { z-index: inherit !important; } /* student context */ div[class*='Stackpaper_'][data-mynotetype]:Before { height: 98%; width: 99%; background: inherit; border: 6px solid #FFF; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); left: -4px; top: -2px; -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); -o-transform: rotate(-2deg); -webkit-transform: rotate(-2deg); transform: rotate(-2deg); content: ""; } div[class*='Stackpaper_'][data-mynotetype]:After { height: 98%; width: 99%; background: inherit; border: 6px solid #FFF; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); right: -9px; top: 1px; -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); z-index: -2; content: ""; position: absolute; } div[class*=Stackpaper_][data-mynotetype].Left { margin-right: 15px; clear: none !important; /*only block element should clear*/ } div[class*=Stackpaper_][data-mynotetype].Right { margin-left: 15px; clear: none !important; /*only block element should clear*/ } /* STACKED NOTE END*/ /*************** Bubble 1 Shout out ! ***** START ***/ /* Main */ div [class*='buble1_Right_'][data-mynotetype]:not(.cke_widget_wrapper) { background-image: url(images/Notes/Buble1/L_middle.png); background-repeat: repeat-y; position: relative; float: right; margin: 18px 15px 40px 15px; width: 235px !important; } /* TOP */ div [class*='buble1_Right_'][data-mynotetype]:Before { background-image: url(images/Notes/Buble1/L_top.png); background-color: inherit; background-repeat: no-repeat; height: 16px; width: 235px; font-size: 1px; content: ''; top: -16px; right: 0; position: absolute; } /* Bottom */ div [class*='buble1_Right_'][data-mynotetype]:After { background-image: url(images/Notes/Buble1/L_bottom.png); background-color: inherit; background-repeat: no-repeat; height: 31px; width: 235px; content: ''; bottom: -31px; position: absolute; } /* Main */ div [class*='buble1_Left_'][data-mynotetype]:not(.cke_widget_wrapper) { background-image: url(images/Notes/Buble1/R_middle.png); background-repeat: repeat-y; position: relative; float: Left; margin: 18px 15px 40px 15px; width: 228px !important; } /* TOP */ div [class*='buble1_Left_'][data-mynotetype]:Before { background-image: url(images/Notes/Buble1/R_top.png); background-repeat: no-repeat; background-color: inherit; height: 16px; width: 236px; font-size: 1px; content: ''; top: -16px; left: 0; position: absolute; } /* Bottom */ div [class*='buble1_Left_'][data-mynotetype]:After { background-image: url(images/Notes/Buble1/R_bottom.png); background-repeat: no-repeat; background-color: inherit; height: 31px; width: 236px; content: ''; bottom: -31px; left: 0; position: absolute; } div [class*='buble1_Left_'][data-mynotetype] .buble_Title { margin-right: 12px; } div [class*='buble1_Right_'][data-mynotetype] .buble_Title { margin-Left: 22px; } div [class*='buble1_Left_'][data-mynotetype] .buble_Content { margin-left: 18px; padding-bottom: 0px; padding-top: 0px; padding-right: 15px; } div [class*='buble1_Right_'][data-mynotetype] .buble_Content { margin-left: 25px; padding-bottom: 0px; padding-top: 0px; padding-right: 5px; } /*************** Bubble 1 END ***/ .Liftcorner { position: relative; } .Liftcorner:before, .Liftcorner:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width: 300px; background: #999; box-shadow: 0 15px 10px #999; transform: rotate(-3deg); } .Liftcorner:after { transform: rotate(3deg); right: 10px; left: auto; } /**** default custom color ****/ .Note_Custom1, .postit_Left_Custom1, .postit_Right_Custom1, .Stackpaper_Custom1, .Note_Custom2, .postit_Left_Custom2, .postit_Right_Custom2, .Stackpaper_Custom2, .Note_Custom3, .postit_Left_Custom3, .postit_Right_Custom3, .Stackpaper_Custom3 { background: #FAFAFA; } .buble1_Left_Custom1, .buble1_Right_Custom1, .MetroNote_Custom1, .buble1_Left_Custom2, .buble1_Right_Custom2, .MetroNote_Custom2, .buble1_Left_Custom3, .buble1_Right_Custom3, .MetroNote_Custom3, .SideBanner_Left_Custom1, .SideBanner_Right_Custom1, .SideBanner_Left_Custom2, .SideBanner_Right_Custom2, .SideBanner_Left_Custom3, .SideBanner_Right_Custom3 { background-color: #828282; border-color: #828282; } /* Text Color Note - A colored note with no background or border */ div[data-mynotetype="text"] { text-align: left; position: relative; clear: both; } div[data-mynotetype="text"] > .buble_Title { display: none !important; } div[data-mynotetype="text"] > .buble_Content { color: inherit !important; margin: 0px !important; padding: 0px !important; } /* Border guide inside editor only */ .cke_widget_wrapper div[data-mynotetype="text"] { border: 1px dashed #DFDFDF; } /*Glow Function*/ .glowred { -moz-box-shadow: 0 0 9px #F00; -webkit-box-shadow: 0 0 9px #F00; box-shadow: 0px 0px 9px #F00; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .glowyellow { -moz-box-shadow: 0 0 9px #D0B600; -webkit-box-shadow: 0 0 9px #D0B600; box-shadow: 0px 0px 9px #D0B600; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .glowblue { -moz-box-shadow: 0 0 9px #003DC5; -webkit-box-shadow: 0 0 9px #003DC5; box-shadow: 0px 0px 9px #003DC5; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .glowgreen { -moz-box-shadow: 0 0 9px #2CB300; -webkit-box-shadow: 0 0 9px #2CB300; box-shadow: 0px 0px 9px #2CB300; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .glowred.no, .glowyellow.no, .glowblue.no, .glowgreen.no { box-shadow: none !important; } /* Color Case */ div[class*=colorCase_][data-mynotetype] { text-align: left; position: relative; background: none !important; } div[class*=colorCase_][data-mynotetype] > .buble_Title { margin: 0px; display: inline-block !important; background: inherit !important; color: inherit; border: 18px solid; box-sizing: content-box; height: 0px; border-radius: 10px 10px 0 0; padding: 0px; -webkit-animation-duration: .8s !important; animation-duration: .8s !important; transform: translateX(0); animation-name: slideInUp; } div[class*=colorCase_][data-mynotetype] > .buble_Title h1, div[class*=colorCase_][data-mynotetype] .buble_Title p { margin-bottom: 0px; margin-top: -14px; color: #fff; font-weight: 400 !important; font-family: 'open sans'; font-size: 21px; } div[class*=colorCase_][data-mynotetype] > .buble_Title:after { content: ''; position: absolute; right: -46px; bottom: -18px; width: 28px; height: 32px; border-radius: 0 0 0 16px; box-shadow: -1px 9px 0 0; } div[class*=colorCase_][data-mynotetype] > .buble_Content { display: block; background-color: #ffffff; border-width: 3px; border-color: inherit; border-style: solid; border-radius: 0px 5px 5px 5px; box-sizing: unset !important; padding: 0px 15px 10px 15px; margin-left: 0px; } /* end color case */ /* Icon Case */ div[class*=iconcase][data-mynotetype] { text-align: left; position: relative; background: none !important; } div[class*=iconcase][data-mynotetype] > .buble_Title { margin: 0px; display: inline-block !important; background: inherit !important; color: inherit; border: 18px solid; box-sizing: content-box; height: 0px; border-radius: 10px 10px 0 0; padding: 0px; -webkit-animation-duration: .8s !important; animation-duration: .8s !important; transform: translateX(0); animation-name: slideInUp; pointer-events: none; } div[class*=iconcase][data-mynotetype] > .buble_Title *:not(.iconcase_header) { display: none; } div[class*=iconcase][data-mynotetype] > .buble_Title > h1 { margin: -13px 1px 0 0px; } div[class*=iconcase][data-mynotetype] > .buble_Title > h1:before { font-size: 25px; color: #fff; position: relative; top: 3px; } div[class*=iconcase][data-mynotetype] > .buble_Title:after { content: ''; position: absolute; right: -46px; bottom: -18px; width: 28px; height: 32px; border-radius: 0 0 0 16px; box-shadow: -1px 9px 0 0; } div[class*=iconcase][data-mynotetype] > .buble_Content { display: block; background-color: #ffffff; border-width: 3px; border-color: inherit; border-style: solid; border-radius: 0px 5px 5px 5px; box-sizing: unset !important; padding: 0px 15px 10px 15px; margin-left: 0px; } /* end icon case */ /* Box */ div[class*="box_"][data-mynotetype] { text-align: left; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); position: relative; background-color: #f5f5f5; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAADElEQVQYV2P4+vUrAAXCAuAEnLG0AAAAAElFTkSuQmCC'); } div[class*="box_"][data-mynotetype] > .buble_Title { background: #404040; border-color: inherit; position: relative; margin: 0 -8px 0 -8px; text-shadow: 2px 2px rgba(0, 0, 0, 0.4); padding: 12px 15px; text-align: left; box-shadow: 0px 5px 1px -2px rgba(0, 0, 0, 0.3); z-index: 9; } div[class*="box_"][data-mynotetype] > .buble_Title h1 { color: #fff; } div[class*="box_"][data-mynotetype] > .buble_Title:before { content: ""; position: absolute; bottom: -8px; right: 0; border: 4px solid transparent; border-top: 4px solid #000; border-left: 4px solid #000; border-top-color: #404040; border-left-color: #404040; filter: brightness(75%); -webkit-filter: brightness(75%); } div[class*="box_"][data-mynotetype] > .buble_Title:after { content: ""; position: absolute; bottom: -8px; left: 0; border: 4px solid transparent; border-right: 4px solid #000; border-top: 4px solid #000; border-right-color: #404040; border-top-color: #404040; filter: brightness(75%); -webkit-filter: brightness(75%); } div[class*="box_"][data-mynotetype] > .buble_Content { background-color: #f5f5f5; border-top: 10px solid; border-color: inherit; margin: 0px; padding-left: 25px } div[class*="box_"][data-mynotetype].Left { clear: none !important; /*only block element should clear*/ } div[class*="box_"][data-mynotetype].Right { clear: none !important; /*only block element should clear*/ } .collapse_box_title { padding: 0px !important; } .collapse_box_title * { display: none; } /* end box*/ /* split */ div[class*="split_"][data-mynotetype] { font: 13px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica; background: #fff; /*border: 1px solid #ddd;*/ color: #333; padding: 20px; position: relative; margin: 0 5px; -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.3); -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.3); box-shadow: 0 9px 19px -4px rgba(0,0,0,.3); background-color: white !important; border-width: 0; } div[class*="split_"][data-mynotetype] > .buble_Title { position: relative; padding: 30px; margin: -20px -20px 20px -20px; border-bottom: 8px solid; border-bottom-color: inherit; background-color: #eee; background-image: -moz-linear-gradient(#fafafa,#eee); background-image: -webkit-linear-gradient(#fafafa, #eee); background-image: -o-linear-gradient(#fafafa, #eee); background-image: -ms-linear-gradient(#fafafa, #eee); background-image: linear-gradient(#fafafa, #eee); text-align: center; } div[class*="split_"][data-mynotetype] > .buble_Content { margin-left: 0px; } div[class*=split_][data-mynotetype].noteBorderTop > .buble_Title { border: 0px; border-top-color: inherit; border-top-style: solid; border-top-width: 8px; } div[class*=split_][data-mynotetype].noteBorderRight > .buble_Title { border: 0px; border-right-color: inherit; border-right-style: solid; border-right-width: 8px; } div[class*=split_][data-mynotetype].noteBorderBottom > .buble_Title { border: 0px; border-bottom-color: inherit; border-bottom-style: solid; border-bottom-width: 8px; } div[class*=split_][data-mynotetype].noteBorderLeft .buble_Title { border: 0px; border-left-color: inherit; border-left-style: solid; border-left-width: 8px; } /* end split */ /* wave */ div[class*="wave_"][data-mynotetype] { border-radius: 20px; box-shadow: 0 0 10px rgba(46, 59, 125, 0.23); background-image: url(/App_Themes/Images/1x1_fff.png) !important; } div[class*="wave_"][data-mynotetype] .note-wave-img { position: absolute; top: 37px; left: 0; width: 100%; height: 83px; overflow: hidden; } div[class*="wave_"][data-mynotetype] > .buble_Title { background-color: inherit !important; background: none; margin: 0px; padding: 14px 25px 0px 25px; border-radius: 20px 20px 0 0; height: 70px; } div[class*="wave_"][data-mynotetype] > .buble_Title > h1 { color: #fff; } div[class*="wave_"][data-mynotetype] .note-wave-layer { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } div[class*="wave_"][data-mynotetype] > .buble_Content { margin: 0; padding: 20px; } div[class*="wave_"][data-mynotetype]:hover .note-wave-layer--1 { -webkit-transform: translate3d(15px, 0, 0); transform: translate3d(15px, 0, 0); } div[class*="wave_"][data-mynotetype]:hover .note-wave-layer--2 { -webkit-transform: translate3d(-15px, 0, 0); transform: translate3d(-15px, 0, 0); } /* end wave */ /* shape */ div[class*="shape_"][data-mynotetype] { position: relative; display: inline-block; padding: 2px 10px 10px 18px; margin-bottom: 70px; border-radius: 0 100px 100px 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAADElEQVQYV2P4+vUrAAXCAuAEnLG0AAAAAElFTkSuQmCC'); z-index: 1; box-shadow: whitesmoke 0px 0px 0px 15px; margin-top: 15px !important; margin-bottom: 15px !important; border-width: 2px; border-style: solid; } div[class*="shape_"][data-mynotetype].Center { display: block; left: -15px; } div[class*="shape_"][data-mynotetype]:before { font-family: 'icomoon_EL'; color: #fff; font-size: 100px; border-radius: 50%; transform: translateY(-50%); position: absolute; right: -26px; top: 50%; z-index: 1; } div[class*="shape_"][data-mynotetype]:after { font-family: 'icomoon_EL'; content: '\ee78'; color: inherit; font-size: 160px; border-radius: 50%; transform: translateY(-50%); position: absolute; right: -75px; top: 50%; border: 20px solid #F7F7F7; } div[class*="shape_"][data-mynotetype] > .buble_Title { color: #000; text-align: left; min-height: 25px; padding: 15px 100px 0px 20px; color: #808080; background: none !important; font-size: 25px; font-weight: 600; margin: 18px 0 5px; text-decoration: none !important; margin-right: 62px; } div[class*="shape_"][data-mynotetype] > .buble_Content { margin-right: 95px; } /* right aligned shape notes */ div[class*="shape_"][data-mynotetype][data-mydirection="Right"] { border-radius: 100px 0px 0px 100px; } div[class*="shape_"][data-mynotetype][data-mydirection="Right"]:before { left: -26px; right: unset; } div[class*="shape_"][data-mynotetype][data-mydirection="Right"]:after { left: -75px; right: unset; } div[class*="shape_"][data-mynotetype][data-mydirection="Right"] > .buble_Title { margin: 18px 5px 5px 78px; padding: 15px 20px 0px 60px; } div[class*="shape_"][data-mynotetype][data-mydirection="Right"] > .buble_Content { margin-left: 140px; margin-right: 0px; } /* end shape */ /* fold */ div[class*="fold_"][data-mynotetype] { background-image: url(/App_Themes/Images/1x1_fff.png) !important; z-index: 1; border-width: 1px; border-style: solid; } div[class*="fold_"][data-mynotetype]:after { content: ""; position: absolute; bottom: -1px; right: -1px; border-top-width: 30px; border-top-style: solid; border-top-color: inherit; border-right: 30px solid #fff; } div[class*="fold_"][data-mynotetype][data-mydirection="Right"]:after { content: ""; position: absolute; bottom: -1px; left: -1px; right: unset; border-right-width: 30px; border-right-style: solid; border-right-color: inherit; border-bottom: 30px solid #fff; border-top: none; } div[class*="fold_"][data-mynotetype] > .buble_Title { display: block; background-color: inherit; padding: 15px 15px 15px 35px; margin-left: 0px; margin-right: 0px; } div[class*="fold_"][data-mynotetype] > .buble_Content { margin-left: 35px; } div[class*="fold_"][data-mynotetype] > .buble_Title > h1 { font-size: 19px; color: white; } /* end fold */ /* note adjustments */ /* remove the border (underline under title area) or underline image, from specific notes when toggled to title only mode */ div[class*=MetroNote_][data-mynotetype][data-parts="title"] > .buble_Title, div[class*=SideBanner][data-mynotetype][data-parts="title"] > .buble_Title, div[class*=Minimal][data-mynotetype][data-parts="title"] > .buble_Title { border-bottom: none; } [data-mynotetype="Note"][data-parts="title"] > .buble_Title, div[class*=Stackpaper][data-mynotetype][data-parts="title"] > .buble_Title { background: none; } /* #endregion */ /* #region Link Styles */ /* Button Design Start*/ .bg_Red1 { background-color: #E91D62; } .bg_Red2 { background-color: #F44236; } .bg_Purple1 { background-color: #9C26B0; } .bg_Purple2 { background-color: #6739B6; } .bg_DarkBlue1 { background-color: #3E50B4; } .bg_DarkBlue2 { background-color: #2A80B9; } .bg_LightBlue1 { background-color: #2095F2; } .bg_LightBlue2 { background-color: #01BBD4; } .bg_Aqua1 { background-color: #1BBC9B; } .bg_Aqua2 { background-color: #019587; } .bg_Green1 { background-color: #63BD10; } .bg_Green2 { background-color: #8BC24A; } .bg_Orange1 { background-color: #FEC107; } .bg_Orange2 { background-color: #FF9700; } .bg_Brown { background-color: #795549; } .bg_Gray1 { background-color: #9D9D9D; } .bg_Gray2 { background-color: #607C8A; } .bg_Black { background-color: #363F46; } /* Push Flat */ .btn_Pushsqr, .btn_Pushpill, .btn_Flatsqr, .btn_Flatpill { border-radius: 5px; padding: 10px 20px; font-size: 17px; text-decoration: none !important; color: #fff; display: inline-block; border-bottom: 7px solid rgba(0, 0, 0, 0.19); box-shadow: 0 2px 3px 0px rgba(0,0,0,0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.15); transition: margin .05s, border .05s, transform .05s, box-shadow .05s; margin: 3px; } .btn_Pushpill, .btn_Flatpill { border-radius: 100px; } /*keep last for btn_PushFlat */ .btn_Pushsqr:hover, .btn_Pushpill:hover { transform: translate(0px, 2px); -webkit-transform: translate(0px, 2px); opacity: .96; border-bottom-width: 5px; margin-bottom: 5px; box-shadow: 0 2px 3px 0px rgba(0,0,0,0.1), 0px 2px 10px 0px rgba(0, 0, 0, 0.1); } .btn_Pushsqr:active, .btn_Pushpill:active { transform: translate(0px, 5px); -webkit-transform: translate(0px, 5px); border-bottom-width: 0px; margin-bottom: 10px; box-shadow: none; } /* Flat Square */ .btn_Flatsqr, .btn_Flatpill { -webkit-animation: none; transition: transform .0s !important; border-width: 0px; box-shadow: 0 2px 3px 0px rgba(0,0,0,0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.15); } .btn_Flatsqr:hover, .btn_Flatpill:hover { transform: scale(.985); } .btn_Flatsqr:active, .btn_Flatpill:active { transform: scale(.95); box-shadow: none; } /* Side Arrow */ .btn_sidearrow { display: inline-block; border: 0; padding: 10px 15px; outline: none; text-decoration: none !important; color: #666; padding-right: 0px !important; box-shadow: 0 2px 3px 0px rgba(0,0,0,0.1), 0px 2px 5px 0px rgba(0, 0, 0, 0.1) !important; /*background image used to force the gray color so that background is inherited */ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN89B8AAskB44g04okAAAAASUVORK5CYII=) !important; overflow: hidden; vertical-align: middle; margin: 3px; } a.btn_sidearrow:after { content: '❯'; position: relative; color: #fff; padding: inherit; padding-right: 15px; padding-left: 15px; margin-left: 12px; -webkit-transition: margin 100ms; transition: margin 100ms; background-image: none; background-color: inherit; right: 0px; top: 0px; text-align: center; border-radius: inherit; border-bottom-left-radius: 0px; border-top-left-radius: 0px; padding-top: 300px; } .aspire_form_element.btn_sidearrow .aspire_form_element_btn_text { margin: auto; } .aspire_form_element.btn_sidearrow:after { content: '❯'; position: relative; color: #fff; padding: inherit; padding-right: 15px; padding-left: 15px; margin-left: 12px; -webkit-transition: margin 100ms; transition: margin 100ms; background-image: none; background-color: inherit; right: 0px; top: 0px; text-align: center; border-radius: inherit; border-bottom-left-radius: 0px; border-top-left-radius: 0px; height: inherit; display: flex; align-content: center; justify-content: center; flex-wrap: nowrap; align-items: center; } .btn_sidearrow:hover:after { margin-left: 19px; } .btn_sidearrow:active { transform: translate(0px, 3px); } /* Stitch */ .btn_Stitch { display: inline-block; padding: 10px 15px; color: #fff; font-size: 17px; border: 2px dashed #fff; border-radius: 10px; text-decoration: none !important; position: relative !important; margin: 3px 3px; } .btn_Stitch:before { content: ''; padding: 5px; height: 100%; width: 100%; background: inherit; position: absolute !important; z-index: -1; top: -5px; left: -5px; border-radius: inherit; box-shadow: 0 2px 2px 0px rgba(0,0,0,0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.15); } .btn_Stitch:hover { top: 1px; } .btn_Stitch:hover:before { box-shadow: 0 2px 2px 0px rgba(0,0,0,0.1), 0px 2px 10px 0px rgba(0, 0, 0, 0.1); } .btn_Stitch:active { border: 2px dashed rgba(255, 255, 255, 0.68); top: 4px; } .btn_Stitch:active:before { box-shadow: none; } /* Pulse */ .btn_Pushpulse, .btn_Flatpulse { min-width: 40px; display: inline-block; padding: 25px 10px; margin-bottom: 3px; font-size: 17px; text-align: center; text-decoration: none !important; color: white; border: none; border-radius: 50%; cursor: pointer; border-bottom: 5px solid rgba(0, 0, 0, 0.19); transition: margin .05s, border .05s, transform .05s, box-shadow .05s; box-shadow: 0 2px 3px 0px rgba(0,0,0,0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.15), inset 0px 0px 1px 1px rgba(0,0,0,0.19); } .btn_Flatpulse { border-width: 0px; box-shadow: 0 2px 3px 0px rgba(0,0,0,0.21), 0px 2px 10px 0px rgba(0, 0, 0, 0.1),inset 0px 0px 2px 1px rgba(0,0,0,0.10); } .btn_Pushpulse:hover, .btn_Flatpulse:hover { transform: scale(.98); } /*keep last for btn_Pushpulse */ .btn_Pushpulse:active, .btn_Flatpulse:active { transform: translate(0px, 5px); border-width: 0px; box-shadow: none; margin-bottom: 5px; } .btn_Flatpulse:active { transform: translate(0px, 3px); margin-bottom: 3px; } /* Basic links style for gallery use only */ .custom-links-default:not(.custom_shape):not([data-image-type]) { font-style: normal; color: #0008C8; text-decoration: underline !important; background-color: transparent !important; } .custom-links-default:hover { text-decoration: none !important; } /* btn Simplelink , Simple link button*/ .btn_Simplelink { padding: 4px 0px 2px; color: #566473; text-shadow: none; text-decoration: none; display: inline-flex; border-radius: 0px !important; font-weight: 700; position: relative !important; margin: 0; background-image: url('/App_Themes/Images/1x1_fff.png') !important; } .btn_Simplelink::before, .btn_Simplelink::after { position: absolute; top: 99%; left: 0; padding: 0; margin: 0; width: 100%; height: 3px; background-image: none; background-color: inherit; content: ''; -webkit-transition: top 0.3s,-webkit-transform 0.3s; -moz-transition: top 0.3s,-moz-transform 0.3s; transition: top 0.3s, transform 0.3s; -webkit-transform: scale(0.85); -moz-transform: scale(0.85); transform: scale(0.85); } .btn_Simplelink::after { opacity: 0; -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s; -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s; transition: top 0.3s, opacity 0.3s, transform 0.3s; } .btn_Simplelink:hover::before, .btn_Simplelink:hover::after, .btn_Simplelink:focus::before, .btn_Simplelink:focus::after { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); top: 100%; } .btn_Simplelink:hover::after, .btn_Simplelink:focus::after { top: 0%; opacity: 1; } .btn_Simplelink:active::before, .btn_Simplelink:active::after { top: 95%; } .btn_Simplelink:active::after { top: 9%; } /* Custom Links - links created out of widgets and other structures */ .custom_link_target { cursor: pointer !important; } /* #endregion */ /* #region Live Preview Boundaries and FreeDrag */ /* Global free-drag friendly editor identifier - class is attached to each instance on loaded - if not free-drag friendly, hide quicktool button to disable freedrag */ span[quick-tools-free-drag-toggle] { display: none; } .enable-free-drag span[quick-tools-free-drag-toggle] { display: block; } .txt_yhelp + .cke [quick-tools-free-drag-toggle] { display: none; } .txt_yhelp + .cke .custom_shape [quick-tools-free-drag-toggle] { display: block; } /*welcome message*/ .cke_editor_BlankThemeBody_AdminMenu_txtUnivIndex .ckeditor-free-drag-boundary { margin: 9px 20px 20px 12px; padding: 0px 3px 0px 0px; position: relative; width: 771px; background-color: #ffffff; border: 1px solid #d5d5d5; border-style: dotted; } .cke_editor_BlankThemeBody_AdminMenu_txtUnivIndex .ckeditor-live-page-boundaries { margin: 0px 5px 0px 15px; padding: 5px 25px 0px 0px; position: relative; width: 647px; height: 100%; background-color: #fff; border-radius: 3px; } /* Page Edit : Free Drag and Live Page Boundary (e.g. txtAddPageContents) */ .ckeditor-free-drag-boundary { outline: none; margin: 15px 5px 0px -13.5px; padding-top: 0px; position: relative; width: 1058px; background-color: #ffffff; border: 1px solid #d5d5d5; border-style: dotted; } .ckeditor-live-page-boundaries { outline: none; margin: 0px 5px 0px 25px; padding: 5px 0px 0px 0px; position: relative; background-color: #fff; border-radius: 3px; min-height: 350px; height: 100%; width: 1013px; z-index: 1; } /* Modern and Classic Resource Container */ .cke_editor_txtFAQAnswer .ckeditor-free-drag-boundary { margin: 9px 20px 20px 12px; padding: 0px 3px 0px 0px; position: relative; width: 850px; background-color: #ffffff; border: 1px solid #d5d5d5; border-style: dotted; } .cke_editor_txtFAQAnswer .ckeditor-live-page-boundaries { margin: 0px 5px 0px 15px; padding: 5px 25px 0px 0px; position: relative; width: 810px; height: 100%; background-color: #fff; border-radius: 3px; } /* Free Form Resource Containers */ .cke_editor_txtCustTabContent .ckeditor-free-drag-boundary { margin: 25px 0px 0px 9.5px; padding-top: 0px; position: relative; width: 900px; background-color: #ffffff; border: 1px solid #d5d5d5; border-style: dotted; } .cke_editor_txtCustTabContent .ckeditor-live-page-boundaries { margin-top: 26px; padding: 5px 20px 0px 0px; position: relative; width: 855px; height: 100%; background-color: #fff; border-radius: 3px; } /* Test Question */ #cke_txtModalQuestionEdit_question .ckeditor-free-drag-boundary { margin: 15px 5px 0px 12.5px; padding-top: 0px; position: relative; width: 1058px; background-color: #ffffff; border: 1px solid #d5d5d5; border-style: dotted; min-height: 50px; } #cke_txtModalQuestionEdit_question .ckeditor-live-page-boundaries { min-height: 50px; } /* announcements */ #cke_txtAnnoMessage .ckeditor-free-drag-boundary { margin: 15px 5px 0px 12.5px; padding-top: 0px; position: relative; width: 1058px; background-color: #ffffff; border: 1px solid #d5d5d5; border-style: dotted; min-height: 150px; } #cke_txtAnnoMessage .ckeditor-live-page-boundaries { min-height: 150px; } .cke_editor_txtAnnoMessage .cke_wysiwyg_div { background-color: rgb(251, 251, 251); overflow-y: scroll; } /* image tag wizard */ #PictureInteractionWrapper .ckeditor-free-drag-boundary { margin: 15px 5px 0px 0px; } /* Maximized View requries centering of the boundary element, you cannot use the Center class, as that overrides Margin properties, giving an inaccurate representation of the view (live or edit) */ .cke_maximized .ckeditor-free-drag-boundary { margin: 0 auto !important; } /* YH Resource boundaries */ .txt_yhelp:not(.template_editor) + .cke .ckeditor-free-drag-boundary { margin: 15px 5px 0px 0; padding-top: 0px; position: relative; width: 995px; background-color: #ffffff; border: 1px solid #d5d5d5; border-style: dotted; } .txt_yhelp:not(.template_editor) + .cke .ckeditor-live-page-boundaries { margin: 5px 5px 0px 10px; padding: 5px 0px 0px 0px; position: relative; background-color: #fff; border-radius: 3px; min-height: 350px; height: 100%; width: 980px; z-index: 1; } /* Learning plan reference */ .cke_editor_txtStepLabel.enable-free-drag .ckeditor-free-drag-boundary { margin: 9px 20px 20px 12px; padding: 0 3px 0 0; position: relative; width: 915px; background-color: #fff; border: 1px solid #d5d5d5; border-style: dotted; } .cke_editor_txtStepLabel.enable-free-drag .ckeditor-live-page-boundaries { margin: 0 5px 0 15px; padding: 5px 25px 0 0; position: relative; width: 878px; height: 100%; background-color: #fff; border-radius: 3px; } /* Adjust the editor textarea for an offset */ #cke_txtAddPageContents { margin-left: -25.5px; } #txtAddPageContents { visibility: hidden; } .free-drag-popout { z-index: 999999 !important; } /* #endregion */ /* #region Selection Modals (galleries to select different resources) */ /* Gallery Headers */ .style-gallery-header, .tab-style-gallery-header, .color-gallery-header, .page-selection-gallery-header, .page-preview-gallery-header, .page-preview-backdrop-gallery-header, .page-preview-border-gallery-header, .color-note-gallery-header { margin: 10px !important; font-weight: 600; font-family: 'Open Sans'; font-size: 14px; color: #717171; } .page-selection-gallery-grid-header { font-size: 12px; } .page-preview-gallery-header { margin: 10px 0px 0px 0px !important; } .tab-style-gallery-header { text-align: center; } /* Fake Select Control for all Galleries */ .pseudo-select .color-gallery-input.pseudo-select, .border-color-gallery-input-image2.pseudo-select, .caption-color-gallery-input-image2.pseudo-select, .box-shadow-color-gallery-input-image2.pseudo-select, .border-color-gallery-image2-text, .caption-color-gallery-image2-text, .box-shadow-color-gallery-image2-text, .color-note-gallery-text, .style-gallery-text, .tab-style-gallery-text, .color-gallery-text, .page-preview-gallery-text, .page-preview-backdrop-gallery-text, .page-preview-border-gallery-text, .page-selection-gallery-text { cursor: pointer !important; } .btn_link_style_gallery, .tab-style-gallery-input, .page-selection-gallery-input, .color-gallery-input, .btn_link_modal_gallery, .page-preview-backdrop-gallery-input, .page-preview-border-gallery-input { cursor: pointer !important; width: 180px !important; height: 25px !important; float: left !important; } .btn_link_modal_gallery.pseudo-select { position: relative; margin-top: 17px; margin-left: 33px; } .page-selection-gallery-input.pseudo-select { width: 25px !important; content: 'Edit'; position: relative; top: 18px; } .page-preview-backdrop-gallery-input, .page-preview-border-gallery-input { margin: 0px 0px 5px 1px; } .border-color-gallery-input-image2, .border-color-gallery-input-image2, .caption-color-gallery-input-image2, .box-shadow-color-gallery-input-image2 { width: 23px; height: 25px; float: left; } .color-note-gallery-input { width: 120px !important; height: 22px !important; /*float: right !important;*/ margin-bottom: 6px !important; position: relative; left: 46px; } /*.color-note-gallery-input:before { content: 'Style:'; position: relative; left: 0px; }*/ /* Display Text on the Control (fake dropdown control) */ .style-gallery-text, .tab-style-gallery-text, .color-gallery-text, .page-preview-backdrop-gallery-text, .page-preview-border-gallery-text, .page-selection-gallery-text { padding-left: 30px; vertical-align: middle !important; padding-top: 2px; } .style-gallery-text { padding-left: 5px; } .page-preview-gallery-text { vertical-align: middle !important; padding-top: 2px; text-align: left !important; } .color-note-gallery-text, .border-color-gallery-image2-text, .caption-color-gallery-image2-text, .box-shadow-color-gallery-image2-text { padding-left: 5px; vertical-align: middle !important; padding-top: 2px; } /* Close Button */ .style-gallery-close-button, .tab-style-gallery-close-button, .color-gallery-close-button, .page-preview-gallery-close-button, .page-preview-backdrop-gallery-close-button, .page-preview-border-gallery-close-button, .page-selection-gallery-close-button, .color-note-gallery-close-button, .border-color-gallery-image2-close-button, .caption-color-gallery-image2-close-button, .box-shadow-color-gallery-image2-close-button { right: -8px !important; margin: 8px !important; border: none !important; background-color: transparent !important; } /* This is a gallery fired off of an admin menu */ .tab-style-gallery-close-button { background-image: url(images/close.png); background-repeat: no-repeat; background-position: 0 0; position: absolute; cursor: pointer; text-align: center; height: 20px; width: 20px; z-index: 5; right: 0px !important; } /* Color Gallery Icon */ .color-gallery-icon, .page-preview-backdrop-gallery-icon, .page-preview-border-gallery-icon { width: 25px !important; height: 25px !important; background-size: 25px !important; float: left !important; cursor: pointer !important; background-position: 0px 25px !important; background-image: url(/images/Controls/ckspecific_colorGallery.png); } /* Colored Note Iframe */ .color-note-gallery-iframe { width: 890px; height: 652px !important; margin: 0 15px 15px 15px !important; } /* Hover FX for Gallery Items */ .color-gallery .color-column:hover, .tab-style-gallery .td:hover, .page-preview-backdrop-gallery .color-column:hover, .page-preview-border-gallery .color-column:hover, .border-color-gallery-image2 .border-color-column-image2:hover, .caption-color-gallery-image2 .caption-color-column-image2:hover, .box-shadow-gallery-image2 .box-shadow-color-column-image2:hover { width: 41px !important; position: absolute; border-width: 0px; height: 36px; margin-top: -1px; margin-left: -2px; border-left-width: 0px !important; } /* Page Preview Gallery - Modal Items Underlay and Cursor Css */ .modal-preview-underlay { position: absolute; top: 0; opacity: .3; width: 250px; height: 100% !important; } .page-preview-item { position: relative; z-index: 1; } .page-preview-item #PagePreviewModal, .page-preview-item #PagePreviewModal > div, .page-preview-item #PagePreviewModal a, .page-preview-item #PagePreviewModal p, .page-preview-item #PagePreviewModal h2 { cursor: pointer !important; } /* Page Preview Gallery - Sub Color Galleries - Special positioning for the Spectrum Color Pallete */ .page-preview-gallery .sp-container { position: absolute !important; top: -1px; right: -175px; } /* Hide Tablet for 4.4 release */ td[page-preview-class="page-preview-tablet"] { visibility: hidden; } /* Gallery Parent Table */ .style-gallery { background-color: white !important; border: dotted 1px !important; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important; left: 0px !important; position: absolute !important; z-index: 99 !important; top: 0px !important; } .tab-style-gallery { background-color: white !important; } .color-gallery { margin-top: -37px !important; right: 80px !important; position: absolute !important; z-index: 1 !important; background-color: #F5F5F5 !important; width: 421px !important; } .page-preview-gallery { background-color: white !important; border: dotted 1px !important; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important; left: 0px !important; position: absolute !important; z-index: 99 !important; top: 0px; padding: 0px 0px 5px 23px; } .page-preview-backdrop-gallery, .page-preview-border-gallery { margin-top: -37px !important; right: 67px !important; position: absolute !important; z-index: 99999 !important; background-color: #F5F5F5 !important; width: 421px !important; } .page-selection-gallery * { text-align: left; } .page_selection_gallery .ui-draggable-handle { width: 760px !important; } .page-selection-gallery[data-context="template"] .favorites_btn { visibility: hidden; } .page-selection-gallery-gridview { width: 98%; } .color-note-gallery { background-color: white !important; border: dotted 1px !important; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important; left: -50px !important; position: absolute !important; z-index: 99 !important; top: -155px !important; } .border-color-gallery-image2, .caption-color-gallery-image2, .box-shadow-color-gallery-image2 { position: absolute; top: 221px; right: 9px; width: 405px; background-color: #ffffff; box-shadow: 0 0 3px rgba(0,0,0,.50); z-index: 1; } .page-selection-gallery .sortable2-Wrapper ol { border: none; margin-right: 0px; } /* Gallery Child Table */ .color-gallery-base-table, .page-preview-backdrop-gallery-base-table, .page-preview-border-gallery-base-table, .border-color-gallery-image2-base-table, .caption-color-gallery-image2-base-table, .box-shadow-color-gallery-image2-base-table { margin-left: 9px !important; } /* Gallery Row Headers */ .style-gallery-row-header, .tab-style-gallery-row-header, .color-gallery-row-header, .page-preview-gallery-row-header, .page-preview-backdrop-gallery-row-header, .page-preview-border-gallery-row-header, .page-selection-gallery-row-header, .color-note-gallery-row-header { height: 34px !important; } /* Gallery Rows */ .style-gallery-row, .tab-style-gallery-row, .page-preview-gallery-row, .page-selection-gallery-row { border-bottom: 2px solid #fff !important; height: 100px !important; } .page-selection-gallery-row { height: 50px !important; } /* Gallery Columns */ .style-gallery-column, .tab-style-gallery-column, .page-preview-gallery-column, .page-selection-gallery-column { text-align: center !important; width: 285px !important; vertical-align: middle !important; } .style-gallery-column a, .tab-style-gallery-column a, .page-preview-gallery-column a, .page-selection-gallery-column a { cursor: pointer !important; } .color-gallery td, .page-preview-backdrop-gallery td, .page-preview-border-gallery td, .border-color-gallery-image2 td, .caption-color-gallery-image2 td, .box-shadow-color-gallery-image2 td { vertical-align: top !important; } /* Color Gallery Color Wheel */ .color-wheel { position: relative; left: -10px; top: 6px; width: 159px !important; height: 98px !important; float: left; cursor: pointer !important; background-image: url(/images/Controls/ckspecific_colorwheel.png) !important; background-size: 52%; padding: 9px !important; background-repeat: no-repeat; background-position-x: 49px; } .color-wheel:hover { background-size: 56%; background-position-x: 45px; background-position-y: -3px; } /* Colored Note Gallery Row, Column */ .color-note-gallery-row { border-bottom: 2px solid #fff !important; height: 100px !important; } .color-note-gallery-column { text-align: center !important; width: 285px !important; vertical-align: middle !important; } /* Gallery Mask - obfuscates the UI and brings the Gallery to the forefront */ .gallery-mask { position: absolute; width: 100%; height: 100%; background: white; z-index: 9998; opacity: 0.75; top: 0; } /* Page and Resource Selection Gallery */ /* Resource Selection -> Select which contains the various Resources loaded for this University */ select.page-selection-gallery-resource-select { width: 359px; margin-left: 10px; display: none; } #page-selection-gallery[data-type="resource"] select.page-selection-gallery-resource-select { display: block; } /* Fake Dropdown / Select */ .page-selection-gallery span.MiniSelect_Status { font-size: smaller !important; cursor: pointer !important; margin: 17px 5px 5px 5px; } .page-selection-gallery-select.MiniSelect_Container { width: 488px; cursor: pointer !important; display: none; } #page-selection-gallery[data-type="page"] .MiniSelect_Container { display: block; } .page-selection-gallery-select-logo { max-height: 20px; /*min-height: 15px;*/ } /* Logo */ a.page-selection-gallery-select { padding: 4px 0px 0px 1px; width: 475px; height: 35px; cursor: pointer !important; } .page-selection-gallery-select-side, .page-selection-gallery-select-side b { cursor: pointer !important; } .page-selection-gallery-select-side b { bottom: -14px; } /* Gridview */ ul.page-selection-gallery-gridview { overflow-y: auto; overflow-x: hidden; /*max-height: 505px;*/ max-width: 800px; padding: 0px 12px 0px 12px; margin: 0px; line-height: 1.8; } /* hotfix */ div ul.page-selection-gallery-gridview li { overflow: initial; } li.page-selection-gallery-page:hover { border: 1px solid #dedede; background-color: #eee; } .page-selection-gallery-course, .page-selection-gallery-page { cursor: pointer !important; font-size: 13px; list-style-type: none; height: 18px; margin-left: 0px; margin-right: 0px; text-align: left; } #page-selection-gallery .btn-group.right { margin-top: -1px; margin-right: -1px; } .page-selection-gallery-page { margin-left: 15px !important; height: 19px; } .page-selection-gallery li.preselected, .user_content_favorite_grid_row.preselected { background-color: rgba(148, 201, 208, 0.47) !important; } /* CMStatus */ .page-selection-gallery-page span[class*="CM"] { right: 70px; padding-top: 2px; } /* last li in collection gets margin on the bottom to facilitate ddl (add/select entry) */ ul.page-selection-gallery-gridview li[data-page-preview-id]:last-child { margin-bottom: 75px; } .page-selection-gallery-gridview [data-item-title="Final Page"] .ResAdd:not(.ResSelect) { display: none; } .page_selection_gallery[data-link-type="pagelink"] .MiniSelect_Container, .page_selection_gallery[data-link-type="pagelink"] .favorites_btn_page_gallery { display: none !important; } .page_selection_gallery[data-link-type="pagelink"] h4 { margin-top: 30px !important; } .page-selection-gallery .favorites_btn_page_gallery { float: right; margin-right: 20px; padding: 9px 0 10px 0; width: 220px; text-align: center; } .page_gallery_row_page_name { display: inline-block; width: 600px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } /*add entry dialog hacky b.s. to prevent it from shifting behind the curtain when modals are opened up*/ .cke_reset_all.cke_dialog_container[class*="dialog"].z_max.dialog-pos-outer { z-index: 9999999 !important; } /* #endregion */ /* #region Image Plugin */ /*Image enhanced plugin*/ figure { text-align: center; border-radius: 2px; padding: 0px; display: inline-block; position: relative; } figure img { padding-bottom: 0px !important; } figcaption { padding-bottom: 5px; } /* Juxtapose structure */ div.juxtaposeStruct { display: none; } div[data-image-type="juxtapose"] .widget_rotator, div[data-image-type="juxtapose"] .qt-freedrag { display: none !important; } div[data-image-type="juxtapose"] figure { display: none !important; } /* ck's css modifies display prop after this, so !important modifier is neccessary */ div[data-image-type="juxtapose"] .juxtaposeStruct { display: block; } /* Hover image dynamic label structure */ .hover-image-dynamic-label-target { margin: 5px !important; background-color: rgba(255, 255, 255, 0); border-width: 0px; } .hover-image-dynamic-label-target:before { content: attr(data-image-label); position: absolute; background-color: rgba(0, 0, 0, 0.7); font-size: 14px; color: white; line-height: 1; padding: 4px; z-index: 1; } [data-image-align="none"]:not([data-image-type="juxtapose"]) { display: inline-block; } .juxtaposeStruct.juxtaposeCallToAction:after { content: 'Slide to Reveal'; height: 20px; position: absolute; /*left: 0px; right: 0px;*/ background-color: rgba(0,0,0,.7); color: #fff; width: inherit; text-align: center; } .juxtaposeStruct.juxtaposeCallToAction.Center:after { margin: auto; left: 10px; right: 0px; } .cke_wysiwyg_div .juxtaposeStruct.juxtaposeCallToAction.Center:after { left: 0px; } .juxtaposeStruct.jux_student_view .jx-slider { z-index: 0; } .hoverCallToAction:after { content: 'Hover or Tap to Reveal'; height: 20px; position: absolute; left: 0px; right: 0px; background-color: rgba(0,0,0,.7); color: #fff; width: inherit; text-align: center; bottom: -15px; } [data-image-align="center"] .hoverCallToAction:after { margin: auto; } /* #endregion */ /* #region Links Plugin Dialog */ /* Remove standard drag handle from pin */ .infoImageWrapper .cke_widget_wrapper .cke_widget_drag_handler_container, .preview-button .cke_widget_wrapper:hover .cke_image_resizer, .preview-button .cke_widget_wrapper .cke_widget_drag_handler_container { display: none !important; } /* spectrum container - flat - */ .color-gallery-spectrum + .sp-container { position: absolute !important; top: 3px; left: 309px; } /* url/command input and content input */ .custom-links-text-input input, .custom-links-url-input input { height: 30px; width: 206px !important; } .custom-links-link-manage-controls-hbox .cke_dialog_ui_hbox_first { padding-right: 0px !important; } .custom-links-url-input input { width: 164px !important; } .custom-links-text-input-disabled { opacity: 0.70; } /* email controls */ .custom-links-email-mailto input, .custom-links-email-subject input { width: 206px !important; padding: 6px !important; } /* required to play */ span.cbRequiredToPlay { margin-top: 18px; } span.cbRequiredToPlay:before { content: 'Required to Play:'; margin-left: 3px; } input.cbRequiredToPlay + label { width: 50px; margin-left: 10px; } /* edit link resource button */ .btn-link-dialog-resource { position: relative; top: 18px; } .custom-links-preview-div { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; background-color: #FFF; border: 1px solid #eaeaea; text-align: center !important; z-index: 0; position: relative !important; width: 509px !important; padding: 19px; min-height: 60px; min-height: 60px; overflow: auto; max-height: 250px !important; } .link-hbox { width: 90% !important; } .custom-links-link-type-select option[value="pagelink"] { display: none; } .cke_editor_txtAddPageContents_dialog .custom-links-link-type-select option[value="pagelink"] { display: block; } .custom-links-link-type-select option[value="yharticle"] { display: none; } .cke_editor_txtYHEditFreeform_dialog .custom-links-link-type-select option[value="yharticle"], .cke_editor_txtYSecEditDesc_dialog .custom-links-link-type-select option[value="yharticle"] { display: block; } /* target type controls for url and link to file */ /*.btn_toggle_url_target_type { position: relative; top: 5px; left: 44px; float: left; }*/ .btn_toggle_url_target_type { position: relative; top: 5px; left: 18px; float: left; } [data-view-link-type="linktofile"] .btn_toggle_url_target_type { left: 22px; } [data-view-link-type="url"] .custom-links-url-input input { width: 205px !important; } .btn_toggle_url_target_type label { display: block !important; } .inputSwitch.cbToggleTargetType { width: 206px; } .cbToggleTargetType.inputSwitch input + label:after { content: 'Leave Aspire'; } .cbToggleTargetType.inputSwitch input:checked + label:after { content: 'Open New Page'; } /*span.inputSwitch.cbToggleTargetType { width: 185px; } .cbToggleTargetType.inputSwitch input + label:after { content: 'Navigate Away'; } .cbToggleTargetType.inputSwitch input:checked + label:after { content: 'New Page'; }*/ /* advanced settings - sliders - jqueryui widgets */ .lbtnAdvanceSearch { position: absolute; left: 0px; top: 37px; padding: 1px 12px !important; box-shadow: none; color: #585858 !important; font-size: 12px !important; user-select: none; } .pagesearchlabel { display: none; left: 89px; top: 37px; position: absolute; color: #808080 !important; font-size: 12px !important; user-select: none; background-color: white; } .lbtnAdvanceSearch-Active { background-color: #acecb4 !important; border-color: #acecb4 !important; } .custom-link-sliders .ui-widget-header { background: #DEDEDE !important; border-radius: 2px 0px 0px 2px; } .custom-link-sliders-input { border: 0; color: #090E08 !important; font-weight: inherit; font-family: 'open sans'; width: 70px; } .custom-link-sliders { height: 12px !important; vertical-align: text-top !important; display: -webkit-box; display: -ms-inline-flexbox; padding: 2px 1px; width: 180px; cursor: pointer !important; } .custom-link-sliders .ui-slider-handle { border: 2px solid #C7C7C7 !important; display: block; margin-top: -2px; margin-bottom: -2px; border-radius: 0px; outline: none; } .custom-links-preview-div .ck_control { display: none !important; } .btn_link_modal_gallery:after { content: 'Modal Styles:'; position: absolute; top: -19px; left: 0; font-family: 'Open Sans'; font-size: 13px; color: #525252; } /* draggable links - new as of 5.4 - */ .custom-links-preview-div > a { top: 0 !important; left: 0 !important; z-index: initial !important; } a[data-link-type]:hover > .free-drag-handle { display: block !important; top: -20px !important; left: 0 !important; } a.btn_sidearrow[data-link-type]:hover > .free-drag-handle { top: 0px !important; } /* #endregion */ /* #region Templates Plugin */ .custom_template { position: relative; } /* No pointer events and a border for the content wrapper */ .cke .custom_template_content { border: 1px dashed #C5C5C5; pointer-events: none; } /* Mask overlay for the template widget */ .cke .custom_template:before { content: ''; top: 0; bottom: 0px; left: 0; right: 0; position: absolute; background: rgba(255, 255, 255, .4); z-index: 9000; height: 100%; margin: 0 auto; } .cke .custom_template:hover::before { background: rgba(255, 255, 255, .65); } /* dialog styling */ /*.custom-templates-type-select { cursor: pointer !important; } .custom-templates-type-select option[value="resource"] { display: none; } .cke_editor_txtYHEditFreeform_dialog .custom-templates-type-select option[value="page"], .cke_editor_txtYSecEditDesc_dialog .custom-templates-type-select option[value="page"] { display: none; } .cke_editor_txtYHEditFreeform_dialog .custom-templates-type-select option[value="resource"], .cke_editor_txtYSecEditDesc_dialog .custom-templates-type-select option[value="resource"] { display: block; }*/ /* custom template buttons */ .btn.custom_templates_gallery_button, .btn.favorites_btn { width: 125px; padding: 20px 35px 20px 35px; /* float: left; */ text-align: center; margin-bottom: 10px; cursor: pointer; padding-top: 0px !important; position: relative; overflow: hidden; } .btn.custom_templates_gallery_button:not(.custom_templates_prefab_gallery_button) { margin-right: 15px; } .btn.custom_templates_prefab_gallery_button { margin-left: 15px; } .btn.custom_templates_prefab_gallery_button .Info { margin-right: 15px; } /* all nodes inside the button structure get pointer cursor and user-select none */ .btn.custom_templates_gallery_button *, .btn.favorites_btn * { cursor: pointer !important; user-select: none; } /* icon node */ .btn.custom_templates_gallery_button i, .btn.favorites_btn i { font-size: 45px; position: relative; top: 40px; left: 0px; } /* wrapper for instruction and label */ .btn.custom_templates_gallery_button .Info, .btn.favorites_btn .Info { float: right; padding-left: 10px; padding-top: 45px; font: 600 17px 'open sans'; color: #545454; /* text-align: right; */ width: 90px; } /* instruction description that scrolls-down on hovering the buttons */ .btn.custom_templates_gallery_button .lblInstruction, .btn.favorites_btn .lblInstruction { font-size: 15px; position: absolute; top: -30px; width: 100%; left: 0px; margin: 0px; text-align: left; padding-left: 7px; padding-top: 4px; font-weight: 500; color: #f9f9f9; transition: all 0.3s cubic-bezier(0.18, 0.89, 0.15, 1.3); transition-delay: .1s; } .btn.custom_templates_gallery_button:hover .lblInstruction, .btn.favorites_btn:hover .lblInstruction { top: 0px !important; } /* hovering the buttons, invert the colors */ .btn.custom_templates_gallery_button:hover, .btn.favorites_btn:hover { border: 1px solid #e3e3e3; background-color: #808080 !important; color: #fff; } .btn.custom_templates_gallery_button:hover .Info, .btn.favorites_btn:hover .Info { color: #fff; } .custom_templates_gallery_button:not(.custom_templates_prefab_gallery_button) .custom_templates_gallery_button_text_page { padding-left: 6px; } /* selection text */ .lbl_template_selection { display: block !important; } .lbl_template_selection:before { content: 'Selection: '; font-weight: 600; font-size: 14px; } .cbToggleTemplateMode.inputSwitch input + label:after { content: 'Linked'; } .cbToggleTemplateMode.inputSwitch input:checked + label:after { content: 'Copy'; } .cbToggleTemplatePageSettingsMode.inputSwitch input + label:after { content: 'Ignore'; } .cbToggleTemplatePageSettingsMode.inputSwitch input:checked + label:after { content: 'Replace'; } .cbToggleTemplateMode, .cbToggleTemplatePageSettingsMode { display: block; } .template_insert_mode_controls { float: left; margin-right: 25px; } /* Template state change dialog - the mirco confirmation dialog that pops up with you click on the quicktool option to change state from dynamic to static */ .template-state-change-dialog { visibility: visible; font-size: 13px !important; padding: 6px 10px !important; /* background: #dea690!important; */ background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f9f9f9)) !important; } /* template info box */ .modal .template-dialog-type-info-box-wrapper { height: 70px; position: relative; border-radius: 7px; padding: 10px; } .template_state_change_modal_commit_controls { margin-top: 25px; margin-left: -11px; } .template_state_change_modal_commit_controls a { float: left; background-color: #cccbcb; padding: 4px 15px 4px 15px; border-radius: 0px; cursor: pointer; color: white; user-select: none; } .template_state_change_modal_commit_controls .cancel { margin-left: 4px; } .template_state_change_modal_commit_controls a:hover { background-color: #565656; transform: scale(1.05); } .template-dialog-type-info-box-wrapper { max-height: 150px; position: relative; top: -4px; margin: 0px 0px -10px 3px; border: 1px solid rgba(235, 237, 241, 0.75); border-radius: 7px; padding: 15px 5px 5px 20px; } .template-dialog-type-info-box-wrapper .icomoon-info { position: relative; margin-right: 8px; font-size: 25px !important; color: #888888; float: left; } .template-dialog-type-info-box-wrapper p { margin-top: 0px; } /* Yardi Help Article Gallery */ .yh_custom_template [data-container-id] > .hoverOpacityHandle .ResAdd.ResSelect { display: none; } /* hide select for section headers */ table.page-selection-gallery[data-type="resource"] .page-selection-gallery-gridview { width: 800px !important; } table.page-selection-gallery[data-type="resource"] .page-selection-gallery-gridview .sortable2-Wrapper { padding-left: 25px; height: 500px; overflow-y: auto; } /* preset templates gallery */ .preset_templates_gallery_drag_handle { width: 466px; height: 44px; cursor: move; top: -9px; left: -10px; } .inputSwitch.cbToggleTemplateMode, .inputSwitch.cbToggleTemplatePageSettingsMode { width: 115px; } .info_template_insert_mode_copy, .info_template_insert_mode_linked, .info_template_page_settings_ignore, .info_template_page_settings_replace { display: none; } .info_template_page_settings_ignore, .info_template_page_settings_replace { margin-top: 25px; } .copymode .info_template_insert_mode_copy, .linkedmode .info_template_insert_mode_linked, .ignoremode .info_template_page_settings_ignore, .replacemode .info_template_page_settings_replace { display: block; } /* special views, copy mode only and hiding the page settings controls when the context isn't realievent */ .template_copy_mode_only .cbToggleTemplateMode { opacity: .6; pointer-events: none; } .template_hide_page_settings_controls .ps_control { display: none !important; } /*engagement engine scripts not supported in embedded templates*/ .cke .sg_not_supported > .custom_template_content::before { content: 'LINKED Templates Do Not Support Engagement Engine Content'; color: #ff6b15; position: absolute; font-size: 12px; font-weight: bolder; z-index: 9; margin: 3px; } /* #endregion */ /* #region Media Embed Plugin */ /* Give a proper margin to the media plugin for the other media tag */ select.ck-other-media-align { margin-left: 29px; } /* Flank spacing for each Media Widget */ .media_embed.Right { margin-left: 20px; } .media_embed.Left { margin-right: 20px; } .media_embed.Center { clear: both; } .media_embed { position: relative; z-index: 1; } /* keep alert notices on top of dialog - instead of blured or behind - */ .cke_editor_txtAddPageContents_dialog + #alert-nottys { z-index: 10000 !important; } .audioWidget .widget_resizer { display: none !important; } .embed_media_link_node { display: none; } [data-media-widget-behaviour="link"] { margin: 0 !important; z-index: unset; cursor: pointer !important; } [data-media-widget-behaviour="link"]:not(.freedrag_embedded_media_link) { width: unset !important; height: unset !important; } .videoWidget[data-media-widget-behaviour="link"] > .embed_media_link_node { display: block; text-align: center; background-color: #3aa0d1; } .videoWidget[data-media-widget-behaviour="link"] > .widget_EditTab.ck_control { padding: 2px; height: 18px; font-size: 11px; } .videoWidget[data-media-widget-behaviour="link"] > .widget-quick-tools { min-width: 50px; } .videoWidget[data-media-widget-behaviour="link"] > .widget_Media, .videoWidget[data-media-widget-behaviour="link"] > .widget-quick-tools [quick-tools-justify="Center"], .videoWidget[data-media-widget-behaviour="link"] > .widget-quick-tools [quick-tools-button-type="autoplay"], .videoWidget[data-media-widget-behaviour="link"] > .widget_resizer { display: none; } .videoWidget[data-media-widget-behaviour="link"] + .cke_widget_drag_handler_container { margin-left: 0px; } /* link style adjustments for the new block versions of these specific styles */ /* side arrow -- new -- */ .embed_media_link_node.btn_sidearrow::after { content: '❯'; position: absolute; display: flex; align-items: center; color: #fff; padding: inherit; padding-right: 15px; background-color: inherit; right: 0px; top: 3px; bottom: 0px; text-align: center; border-radius: inherit; border-bottom-left-radius: 0px; border-top-left-radius: 0px; margin: 0; -webkit-transition: right 200ms, left 200ms; transition: right 200ms, left 200ms; font-weight: 600; font-family: 'Open Sans'; cursor: pointer; } [data-mydirection="Left"] .embed_media_link_node.btn_sidearrow > * { margin-right: 40px; } [data-mydirection="Right"] .embed_media_link_node.btn_sidearrow > * { margin-left: 25px; margin-right: 20px; } [data-mydirection="Left"] .embed_media_link_node.btn_sidearrow:hover::after { right: -19px; } [data-mydirection="Right"] .embed_media_link_node.btn_sidearrow::after { content: '<'; right: unset !important; left: 0px; } [data-mydirection="Right"] .embed_media_link_node.btn_sidearrow:hover::after { left: -19px; } /* linked embedded media, when its launched, make it max size */ .popup_embed_media_iframe_wrapper { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .popup_embed_media_iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .audioWidget[data-free-drag="on_absolute"] .widget-quick-tools { min-width: unset; } .embedded_media_nondisplay { font-size: 14px; font-weight: bold; width: 179px !important; height: 22px !important; padding: 3px; color: #ff5e00; } .embedded_media_nondisplay [class*="_resizer"], .embedded_media_nondisplay .qt-align-coreset { display: none !important; } .cke .embedded_media_nondisplay .widget_Media::after { content: 'Downloadable Content'; position: absolute; top: 0px; left: 0; font-size: 14px; font-weight: bold; width: 250px; } /* start - dialog and modals for custom media embed/audio ect */ /* base structure for audio interface */ .media_audio_dialog, .audio_player_gallery { display: flex; display: -webkit-flex; display: -ms-flexbox; flex-wrap: wrap; } .media_audio_dialog > .flex_column { width: 45%; height: 70px; } .media_audio_dialog > .flex_column label { display: block; margin-left: 2px; } .media_audio_dialog > .flex_column select, .audio_player_gallery_controls select { width: 154px; } .browse_audio_btn { width: 100% !important; height: 90px !important; } /* inputs for generic src, embed code and hidden iframe for custom embed code*/ .txtAudioUrl { height: 22px !important; width: 357px !important; margin-top: 0px !important; background-color: #fff; border: 1px solid #c9cccf; border-top-color: #aeb3b9; padding: 4px 6px; border-radius: 3px; outline: 0; width: 100%; margin-left: 2px; } #txtGenSrc { height: 22px !important; width: 50%; margin-top: 0px !important; background-color: #fff; border: 1px solid #c9cccf; border-top-color: #aeb3b9; padding: 4px 6px; border-radius: 3px; outline: 0; margin-left: 2px; } .txtEmbedCode { height: 70px; width: 592px; white-space: normal !important; } .txtCustomIframe { display: none; } #txtGenSrc, .txtAudioUrl { margin-bottom: 5px; } /* src buttons */ .CKAudioUploader, .CKMediaUploader { position: relative; top: 0px; left: 3px; } .CKMediaUploader, .CKMediaUploader * { cursor: pointer !important; } /* align for embed code and custom embed code */ .ddlEmbedCodeAlign, .ddlIframeAlign { width: 125px; text-align: left; cursor: pointer !important; } /* audio player type button */ .ddlAudioPlayerType { width: 225px; height: 21px; } /* audio player gallery */ .audio_player_gallery_top_controls { width: 415px !important; } .audio_player_gallery_controls { margin-bottom: 15px; display: flex; display: -webkit-flex; display: -ms-flexbox; flex-wrap: wrap; } .lbl_audio_player_color, .lbl_audio_player_color_control, .audio_player_gallery_controls .dynadialog_color_button { display: none; } .audio_player_gallery_controls .dynadialog_color_button { float: left; margin: 2px 0 0 0; width: 100px; height: 28px; position: initial; } .audio_player_control_color { margin-left: 50px; } .theme_color .lbl_audio_player_color, .theme_color .lbl_audio_player_color_control, .theme_color .audio_player_gallery_controls .dynadialog_color_button { display: block; margin-left: 15px; } .audio_player_color { background-color: rgb(245, 245, 245); } .audio_player_control_color { background-color: #0082B2; } .dynagallery_column.audio_player_gallery { width: 300px; height: 80px; } [data-selection="CirclePlayer"], [data-selection="MicroBarPlayer"] { height: 200px !important; } [data-selection="CirclePlayer"] > div, [data-selection="MicroBarPlayer"] > div { width: 200px; height: 200px; margin: 0 auto !important; } .theme_dark [data-selection="CirclePlayer"], .theme_color [data-selection="CirclePlayer"] { display: none; } .preview_AudioPlayer { display: flex; display: -webkit-flex; display: -ms-flexbox; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; width: 119px; height: 88px; text-align: center; z-index: 1; } .dyancolor_color_audio_player { margin: 0 !important; } .lbl_audio_validator, .lbl_custom_iframe_info { margin-left: 3px; color: #a2a2a2; } /* end - dialog and modals for custom media embed/audio ect */ /* #endregion */ /* #region Page Marker Plugin */ .WrapperCustom_PageMarker { width: 100%; clear: both; display: block; } .page-marker-wrapper { background-color: #f5f5f5; border: 1px solid #b8b2b2; margin: 18px 0px; } .page-marker-wrapper:hover, .page-marker-wrapper:hover .pseudo-select-option-list { z-index: 999; } /* Page Marker Header - title and buttons */ .page-marker-button-container { float: right; } .page-marker-title { background-color: white; width: 500px; margin-left: 5px; border: 1px solid #7f9db9; height: 35px; margin-top: 6px; margin-right: 0px; display: block; float: left; width: 700px; overflow: auto; } .page-marker-title p { font: 500 19px 'open sans' !important; margin-top: 5px !important; margin-left: 5px !important; margin-bottom: 2px; } .page-marker-buttons { width: 50px; } .page-marker-button-clone { float: right; margin: 3px 5px 0 0; } .page-marker-button-remove { float: left; margin: 3px 5px 0 0; padding: 9px 14px !important; display: inline-block; } .page-marker-remove-icon { background-image: url(../images/Controls/false2.png); width: 14px; height: 14px; } /* Settings Bar - The container div which holds all the below elements */ /*.page-marker-settings { margin-bottom: 5px; margin-left: 5px; margin-top: 5px; }*/ /* alternate page marker */ .page-marker-settings { margin-bottom: -12px; margin-left: 5px; } /* Control Labels */ /*div.page-marker-settings-labels { font-weight: 600 !important; font-size: 13px !important; font-family: 'Open Sans' !important; color: #3A3A3A; display: block; margin-bottom: 5px; margin-top: 5px; }*/ /* alternate page marker */ div.page-marker-settings-labels { font-weight: 600 !important; font-size: 11px !important; font-family: 'Open Sans' !important; color: #3A3A3A; display: block; margin-bottom: 1px; margin-top: -4px; visibility: hidden; height: 7px; } /* Dropdowns */ .WrapperCustom_PageMarker .pseudo-select-option-list { top: 118px; } page.page-marker-wrapper[data-page-number="1"] .pseudo-select-option-list { top: 100px !important; } /* Time */ .ddl-page-time.pseudo-select { width: 20px !important; height: 25px; padding-top: 8px; margin-top: -1px; } .ddl-page-time.pseudo-select-option-list { position: absolute; width: 31px; padding: 6px; left: 43px; display: block; background-color: rgb(245, 245, 245); border: 1px solid #7f9db9; } .ddl-page-time.pseudo-select-option-list > div { font-size: 9pt; line-height: 6px; } /*.ddl-page-time-metric.pseudo-select { width: 120px; height: 25px; padding-top: 8px; }*/ /* alternate page marker */ .ddl-page-time-metric.pseudo-select { width: 120px; height: 25px; padding-top: 8px; margin-bottom: 16px; } .ddl-page-time-metric.pseudo-select-option-list { position: absolute; width: 132px; padding: 6px; left: 90px; background-color: rgb(245, 245, 245); border: 1px solid #7f9db9; } .page-marker-settings-time-image { width: 26px; float: left; margin-right: 10px; margin-top: 6px; } /* Uploads */ .ddl-page-uploads.pseudo-select { width: 121px; height: 25px; padding-top: 8px; } .ddl-page-uploads.pseudo-select-option-list { position: absolute; width: 131.5px; padding: 6px; left: 305px; display: block; background-color: rgb(245, 245, 245); border: 1px solid #7f9db9; } .page-marker-settings-uploads-image { width: 39px; float: left; margin-right: 7px; } /* Discussions */ .page-discussions-checkbox-fake { display: inline-block; } .page-discussions-label { vertical-align: top; margin-left: 10px; } .page-marker-settings-discussions-image { vertical-align: middle; width: 34px; margin-right: 10px; } /* Hidden . Page visibility */ .page-hidden-checkbox-fake { display: inline-block; margin-bottom: 3px; } .page-hidden-label { vertical-align: top; margin-left: 10px; } .page-marker-settings-hidden-image { vertical-align: bottom; width: 28px; height: 24px; padding-top: 7px !important; } /* switch button overrides for the above two fake checkbox*/ .page-marker-settings div[class*=admin-panel-switch] { width: 33px; } .page-hidden-checkbox-fake div[class*=admin-panel-switch] { margin-left: 7px; } .page-marker-settings div[class*=admin-panel-switch]:after { content: ''; } /* Quick Stats */ /*.page-marker-quick-stats { width: 62px; text-align: center; display: block !important; height: 43px; padding-bottom: 23px !important; margin-right: 5px; }*/ /* alternate page marker */ .page-marker-quick-stats { width: 100px; text-align: center; display: block !important; height: 42px; padding: 4px !important; margin-right: 5px; margin-bottom: 19px !important; } .page-marker-quick-stats div { display: block; padding-top: 10px; } .page-marker-quick-stats .page-marker-settings-labels { text-align: center; font-weight: 600 !important; font-size: 11px !important; font-family: 'Open Sans' !important; color: #3A3A3A; display: block; margin-bottom: 1px; margin-top: -4px; visibility: visible; padding-top: 7px; } .page-marker-quick-stats-text { } /* Controls General */ .pseudo-select p { position: absolute; width: 150px; height: 70px; top: 50%; margin-top: -35px; } .pseudo-select-option-list > div { padding-top: 4px; padding-bottom: 4px; } .pseudo-select-option-list > div:hover { background-color: #ccc; } /* Page spacer */ page.page-marker-wrapper[data-page-number="1"] { margin-top: 0px; } .page-marker-wrapper:before, .page-marker-wrapper:after { position: absolute; left: 0px; padding: 1px 40px 2px 40px; background: rgba(219, 255, 219, 0.64); font-size: 12px; color: #666; right: 0px; text-align: center; } .page-marker-wrapper:before { content: 'Page End'; margin-top: -19px; border-radius: 4px 4px 0 0; } .page-marker-wrapper:after { content: 'Page Start'; margin-top: 1px; border-radius: 0px 0px 4px 4px; } /* Content Area */ .page-marker-content-area-marker { width: 100%; height: 45px; text-align: center; vertical-align: middle; padding: 20px 0px 0px 0px; background-color: #fcfbff; border: 1px solid #ccc; margin: 5px 0px; } /* Page Tag - custom tag used for the Page Marker plugin (content and controls) */ page { display: block; } page[data-page-number="1"] + .cke_widget_drag_handler_container { display: none !important; } span[title="Insert paragraph here"] + div.WrapperCustom_PageMarker > page[data-page-number="1"] { display: none !important; } /* Custom_quickPageMarkers */ .cke_button__custom_quickpagemarkers_icon { display: none !important; } /* no icon */ .cke_button__custom_quickpagemarkers_icon ~ span.cke_button_arrow { } .cke_button__custom_quickpagemarkers_label { display: block !important; padding-right: 6px; padding-left: 4px; } .quick-page-markers-panel { width: 99px !important; /*border-radius: 0px; border: none;*/ } /* #endregion */ /* #region Quicktools */ /* base structure */ .widget-quick-tools { position: absolute; top: -28px; right: 0px; height: 28px; float: left; padding: 3px; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; margin: 0 0px 7px 0; background-color: transparent; /* min-width: 156px; */ z-index: 9; } /* adjustments to base structure by type */ .jAudioPushUp .widget-quick-tools { top: 0px !important; right: 300px !important; } div[data-playertype*="MicroBarPlayer"].jAudioPushUp .widget-quick-tools { right: 170px !important; } div[data-playertype="CirclePlayer"].jAudioPushUp .widget-quick-tools { right: 200px !important; } .slideUnder > .widget-quick-tools { top: 0px !important; -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; } .interaction-wrapper-wheel > .widget-quick-tools { top: 0px; } .slideUnder.rightSide > .widget-quick-tools { top: 0px !important; left: 0px !important; } div[data-free-drag="on_absolute"].slideUnder.rightSide > .widget-quick-tools { top: 0px !important; right: 0px !important; left: initial !important; } div[class*="SlideBookmark"] > .widget-quick-tools { top: 0px !important; right: -2px !important; } [data-mynotetype="buble1"] > .widget-quick-tools { margin-top: -12px; } [data-mynotetype="buble1"] > .widget-quick-tools > [quick-tools-parts-toggle] { display: none; } /* quicktool adjustments for smaller sized widgets */ /* notes */ #Note[adjust-quicktool-reduced] .widget-quick-tools { min-width: 0; } #Note[adjust-quicktool-reduced] > .widget-quick-tools > [quick-tools-justify], #Note[adjust-quicktool-reduced] > .widget-quick-tools > [quick-tools-parts-toggle] { display: none; } .free-drag-handle:hover { z-index: 9999999; } /* shapes */ .custom_shape .widget-quick-tools { /* min-width: 55px; */ top: -32px; z-index: 2; } [data-base-type="svg"][data-svg-type="custom"] .qt-color { display: none; } .custom_shape[adjust-quicktool-reduced] .widget-quick-tools { left: 36px; min-width: 186px; } .custom_shape[adjust-quicktool-reduced] .widget_EditTab, .custom_shape > .widget-quick-tools > .quick-tools-button-edit { display: none !important; } .custom_shape[adjust-quicktool-reduced] > .widget-quick-tools > .quick-tools-button-edit { display: block !important; } .custom_shape.Right[adjust-quicktool-reduced] .widget-quick-tools { margin-left: -195px; } /* images */ .Wrapperimage[data-image-align="left"][adjust-quicktool-reduced] .widget-quick-tools, .Wrapperimage[data-image-align="none"][adjust-quicktool-reduced] .widget-quick-tools { left: 41px; min-width: 102px; } .Wrapperimage[data-image-align][adjust-quicktool-reduced] > .widget-quick-tools > [quick-tools-justify], .Wrapperimage[data-image-align][adjust-quicktool-reduced] > .widget_EditTab { display: none !important; } .Wrapperimage[data-image-align] > .widget-quick-tools > .quick-tools-button-edit { display: none; } .Wrapperimage[data-image-align][adjust-quicktool-reduced] > .widget-quick-tools > .quick-tools-button-edit { display: block !important; } .Wrapperimage[data-image-align] > .widget-quick-tools > .quick-tools-button-edit > span { position: relative; top: 9px; } .Wrapperimage[data-image-align="right"][adjust-quicktool-reduced] > .widget-quick-tools { left: -105px; } .Wrapperimage[data-image-align]:not([data-image-align="center"]) .cke_widget_drag_handler_container { margin-left: -6px; } /* quicktool visibility */ #Note:hover > .widget-quick-tools, .media_embed:hover .widget-quick-tools, .Wrapperimage:hover .widget-quick-tools, .Wrapperimage > p > .cke_image_resizer_wrapper:hover .widget-quick-tools, .interactionWidget:hover > .widget-quick-tools, .PictureInteraction:hover .widget-quick-tools, .WrapperCustom_Templates:hover .widget-quick-tools, .WrapperCustom_Shapes:hover .widget-quick-tools, .WrapperCustom_ToC:hover .widget-quick-tools { visibility: visible; -moz-transition-delay: 0s; -o-transition-delay: 0s; -webkit-transition-delay: 0s; transition-delay: 0s; } .hidden-box-square-wrapper > .widget-quick-tools { visibility: hidden !important; } /* Buttons */ .quick-tools-button { display: inline-block; height: 18px; padding: 4px 4px; outline: 0; cursor: default; float: left; border: 1px solid #ccc !important; } .quick-tools-button:not([class*="University_"]) { background-color: #fff; } .quick-tool-option-selected { background-color: #D0D0D0; border: 1px solid #CCC !important; cursor: pointer; } .quick-tools-button:hover:not(.quicktool_color_button) { background-color: #D0D0D0; border: 1px solid #CCC; cursor: pointer; visibility: visible; } .quick-tool-button-disabled:hover { background-color: #ffffff; } .quick-tools-button-icon { cursor: inherit; background-repeat: no-repeat; margin-top: 1px; width: 16px; height: 16px; float: left; display: inline-block; } .quick-tools-button-icon-justifyleft { background: url(/ckeditor/skins/mono_aspire/icons.png) 0 -960px no-repeat !important; } .quick-tools-button-icon-justifycenter { background: url(/ckeditor/skins/mono_aspire/icons.png) 0 -936px no-repeat !important; } .quick-tools-button-icon-justifyright { background: url(/ckeditor/skins/mono_aspire/icons.png) 0 -984px no-repeat !important; } .quick-tools-button-icon-noalign { background: url(/images/noalign.png) no-repeat; background-position: center; background-size: 18px; background-position-y: 0px; } .quick-tools-button-icon-pushUp { background: url(/ckeditor/skins/mono_aspire/icons.png) 0 -912px no-repeat !important; height: 8px; } .quick-tools-button-icon-autoplay { background: url('/ckeditor/plugins/Custom_MediaEmbed/images/auto-play.png'); } .quick-tools-button-icon-rtp { background-image: url(../images/Controls/I_info_off.png); background-position: 1px -4px; background-size: 18px; background-repeat: no-repeat; width: 16px; height: 16px; } .quick-tools-button-icon-parts-both { background: url(/images/cycle_colorednote_parts.png) no-repeat top left; width: 16px; height: 16px; background-position: 0 0 !important; } .quick-tools-button-icon-parts-message { background: url(/images/cycle_colorednote_parts.png) no-repeat top left; width: 16px; height: 16px; background-position: 0 -21px !important; } .quick-tools-button-icon-parts-title { background: url(/images/cycle_colorednote_parts.png) no-repeat top left; width: 16px; height: 16px; background-position: 0 -42px !important; } .quick-tools-button-icon-free-drag-off { background-image: url(../images/Controls/drag.png); background-position: 3px 3px !important; background-size: 15px; background-repeat: no-repeat; width: 16px; height: 16px; } .quick-tools-button-icon-free-drag-on_absolute { background-image: url(../images/Controls/drag.png); background-position: 1px 1px !important; background-size: 18px; background-repeat: no-repeat; width: 16px; height: 16px; } .quick-tools-button-icon-free-drag-on_relative { background-image: url(../images/Controls/drag.png); background-position: -1px -1px !important; background-size: 18px; background-repeat: no-repeat; width: 16px; height: 16px; } .quick-tools-button-icon-template-mode-dynamic { background-image: url(../images/Controls/lock-open.png); background-position: 1px 1px; background-size: 15px; background-repeat: no-repeat; width: 16px; height: 16px; } .quick-tools-button-icon-template-mode-static { background-image: url(../images/Controls/edit.png); background-position: 1px 1px; background-size: 18px; background-repeat: no-repeat; width: 16px; height: 16px; } span[quick-tools-template-mode-toggle="dynamic"].quick-tools-button { background-color: #ffffff; } span[quick-tools-template-mode-toggle="static"].quick-tools-button { background-color: #D0D0D0; pointer-events: none; } .quick-tools-button-icon-remove-widget { background-image: url(../images/Controls/false.png); background-position: 0px 2px !important; background-size: 16px; background-repeat: no-repeat; width: 16px; height: 16px; opacity: .9; } .quick-tool-button-disabled { display: none; } /* slide banner adjustments */ div[data-interaction-name="slide-banner"] span[quick-tools-justify="Center"], [data-mynotetype="SideBanner"] > .widget-quick-tools [quick-tools-justify="Center"], [data-mynotetype="SideBanner"] > .widget-quick-tools [quick-tools-justify="noalign"], [data-mynotetype="buble1"] > .widget-quick-tools [quick-tools-justify="noalign"] { display: none !important; } span[quick-tools-bookmark-style] { display: none; } div[class*="SlideBookmark"] span[quick-tools-bookmark-style] { display: block; } span[quick-tools-bookmark-style] span:after { font-size: smaller; font-weight: 700; margin: -1px; } [data-slide-banner-bookmark-style="bookmark1"] span[quick-tools-bookmark-style] span:after { content: '1'; } [data-slide-banner-bookmark-style="bookmark2"] span[quick-tools-bookmark-style] span:after { content: '2'; } [data-slide-banner-bookmark-style="bookmark3"] span[quick-tools-bookmark-style] span:after { content: '3'; } [data-slide-banner-bookmark-style="bookmark4"] span[quick-tools-bookmark-style] span:after { content: '4'; } /* notes adjustments */ div[data-mynotetype="PintBox"] > .widget-quick-tools > span[quick-tools-button-type="toggle-parts"], div[data-mynotetype="colorCase"] > .widget-quick-tools > span[quick-tools-button-type="toggle-parts"], div[data-mynotetype="text"] > .widget-quick-tools > span[quick-tools-button-type="toggle-parts"] { display: none; } /* disable freedrag for linked and/or captioned images */ .linked-image span[quick-tools-free-drag-toggle="on_absolute"].quick-tools-button { display: none; } .linked-image span[quick-tools-free-drag-toggle="off"].quick-tools-button { display: none; } figure.image.cke_widget_element > span.cke_image_resizer_wrapper > span.widget-quick-tools > span[quick-tools-free-drag-toggle="on_absolute"], figure.image.cke_widget_element > span.cke_image_resizer_wrapper > span.widget-quick-tools > span[quick-tools-free-drag-toggle="off"] { display: none; } /* Interaction Widgets - hide all specified buttons and then expose them by type */ .interactionWidget > .widget-quick-tools span[quick-tools-justify], div[data-interaction-name="hidden-box-arrow"] > .widget-quick-tools span[quick-tools-justify], .interactionWidget > .widget-quick-tools span[quick-tools-toggle], div[data-interaction-name="hidden-box-arrow"] > .widget-quick-tools span[quick-tools-toggle], .interactionWidget > .widget-quick-tools span[quick-tools-free-drag-toggle], div[data-interaction-name="hidden-box-arrow"] > .widget-quick-tools span[quick-tools-free-drag-toggle], [data-interaction-name="hidden-box-square"] > .widget-quick-tools > .quick-tools-button, .interactionWidget > .widget-quick-tools .quick-tools-button-edit, .interactionWidget .pop_tile_edit, .interactionWidget .leaderboard_edit { display: none; } /* expose buttons by type */ .interactionWidget.pop_tile_wrapper > .widget-quick-tools span[quick-tools-justify], .interactionWidget.pop_tile_wrapper > .widget-quick-tools span[quick-tools-free-drag-toggle], .interactionWidget.pop_tile_wrapper > .widget-quick-tools .pop_tile_edit, .interactionWidget.slideUnder .widget-quick-tools span[quick-tools-justify], .interactionWidget.slideUnder .widget-quick-tools span[quick-tools-toggle], .interactionWidget.slideUnder .widget-quick-tools span[quick-tools-free-drag-toggle], .interactionWidget.tab-interaction-widget .widget-quick-tools span[quick-tools-justify], .interactionWidget.tab-interaction-widget .widget-quick-tools span[quick-tools-free-drag-toggle], .interactionWidget.interaction-wrapper-wheel .widget-quick-tools span[quick-tools-justify], .interactionWidget.interaction-wrapper-wheel .widget-quick-tools span[quick-tools-free-drag-toggle], .interactionWidget.accordion2 > .widget-quick-tools, .interactionWidget.accordion2 > .widget_resizer, .interactionWidget.accordion2 > .widget-quick-tools span[quick-tools-free-drag-toggle], .interactionWidget.accordion2 > .widget-quick-tools span[quick-tools-justify], .interactionWidget.flashDeck > .widget-quick-tools, .interactionWidget.flashDeck > .widget_resizer, .interactionWidget.flashDeck > .widget-quick-tools span[quick-tools-free-drag-toggle], .interactionWidget.flashDeck > .widget-quick-tools span[quick-tools-justify], .interactionWidget.panel_interaction .widget-quick-tools span[quick-tools-free-drag-toggle], .interactionWidget.tilecrawl_interaction .widget-quick-tools span[quick-tools-free-drag-toggle], .interactionWidget.leaderboard_widget > .widget-quick-tools .qt-freedrag, .interactionWidget.leaderboard_widget > .widget-quick-tools .qt-align-coreset:not(.qt-align-center), .interactionWidget.leaderboard_widget > .widget-quick-tools .leaderboard_edit { display: block; } /* Quick tool overides*/ .tour3D .widget-quick-tools span[quick-tools-autoplay], .tour3D .widget-quick-tools span[quick-tools-free-drag-toggle], .customIframe > .widget-quick-tools > [quick-tools-rtp], .customIframe > .widget-quick-tools > [quick-tools-autoplay], .customIframe > .widget-quick-tools > [quick-tools-justify="jAudioPushUp"] { display: none; } /* neon note push tools up abit */ [data-mynotetype="Neon"] > .widget-quick-tools { top: -50px; padding-bottom: 30px; } /* Generic Image Destroy Controls */ .delete-image-button { width: 107px; height: 3px; position: absolute; background-color: #ff8d00; padding: 23px; border-radius: 0px 0px 0px 27px; top: 0px; right: 0px; text-align: center; color: white; cursor: pointer; z-index: 2; } /* #endregion */ /* #region Admin Menu */ /* Admin Panel - Old Structure and Static Inputs */ .interactionWidget .Admin > * { display: none; } .interactionWidget .Admin { background: transparent; border: transparent; color: transparent; } /* admin panel general */ .interactionWidget .admin-panel { z-index: 99; display: none; background-color: #f8fafa; color: black; padding: 10px 5px 5px 0px; border-radius: 0 0 0 28px; z-index: 0; position: absolute; top: -15px; right: 0; min-width: 190px; border: 1px solid #e6e1e1; } .cke .admin-panel { display: block; } div[data-interaction-name].interactionWidget > .Admin > .admin-panel { top: 0px; } div[data-interaction-name="flash-deck"].interactionWidget .Admin > .admin-panel { top: 0px; width: 202px; } div[data-interaction-name="simple-accordion"] > .Admin > .admin-panel, div[data-interaction-name="heading-accordion"] > .Admin > .admin-panel { min-width: 213px; } .stepInteraction > .Admin > .admin-panel { top: -16px; width: 190px; } [data-interaction-name="compare-and-contrast"] > .Admin .admin-panel { width: 200px; } .interactionWidget .admin-panel { -webkit-transition: all .5s cubic-bezier(0.65, 0.05, 0.36, 1); -moz-transition: all .5s cubic-bezier(0.65, 0.05, 0.36, 1); -o-transition: all .5s cubic-bezier(0.65, 0.05, 0.36, 1); transition: all .5s cubic-bezier(0.65, 0.05, 0.36, 1); } .interaction-wrapper-wheel > .Admin > .admin-panel { display: block; position: absolute; top: 39px !important; right: 0; width: 202px; background-color: #f8fafa; color: black; padding: 10px 5px 5px 10px; border-radius: 0 0 0 28px; z-index: 1; } .tab-interaction-widget > .Admin > .admin-panel { padding: 10px 5px 5px 10px; border-radius: 0 0 0 28px; /*top: 39px !important;*/ width: 194px; } [data-interaction-name="panels"] > .Admin > .admin-panel { width: 203px; text-align: left; } [data-interaction-name="panels"] > .Admin { z-index: 9999; } .slider-interaction-widget > .slider-interaction-tile-outter-wrapper > .Admin > .admin-panel { display: block; position: absolute; top: 0; right: 0; min-width: 184px; width: 204px; background-color: #f8fafa; color: black; padding: 10px 5px 5px 10px; border-radius: 0 0 0 28px; z-index: 1; } .slideUnder > .Admin > .admin-panel { top: 3px !important; width: 202px; height: 89px; border-radius: 5px 0 0 5px; padding: 8px; } .accordion2 > .Admin > .admin-panel { top: 0px; width: 202px; } .admin-panel:hover { z-index: 99 !important; } .admin-panel-option-row { height: 25px; margin-bottom: 10px; margin-left: 20px; display: block; } .admin-panel-option-row.admin-panel-slide-banner-style { position: absolute; top: 36px; } .admin-panel-option-row.admin-panel-slide-banner-color { position: absolute; top: 69px; } div[data-interaction-name="tab"] .admin-panel-option-row { margin-left: 12px; } div[data-interaction-name="simple-accordion"] .admin-panel-option-row { margin-left: 25px; } .admin-panel-labels { display: inline; padding: 7px; padding-top: 0px; font-size: 13px !important; color: #6c6c6c; } /* Admin Panel Switches */ .admin-panel-switches { padding: 2px; background: #dfdfdf; width: 35px; position: absolute; right: 10px; } .slideUnder.rightSide > .Admin .admin-panel-switches { right: 33px; } .admin-panel-switch-on { background: #dfefae; cursor: pointer; font-size: 0px; width: 100%; height: 19px; display: inline-block; border-radius: 3px; position: relative; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; vertical-align: middle; } .admin-panel-switch-on:after { left: calc(100% - 4px); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); content: 'on'; position: absolute; top: 0; left: -11px; width: 23px; height: 18px; background: #fff; border-radius: 3px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 10px; text-align: center; padding-top: 3px; text-transform: capitalize; color: #888888; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .admin-panel-switch-off { background: #dfdfdf; cursor: pointer; font-size: 0px; width: 100%; height: 19px; display: inline-block; border-radius: 3px; position: relative; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; vertical-align: middle; } .admin-panel-switch-off:after { left: calc(100% - 4px); -moz-transform: translateX(50%); -ms-transform: translateX(50%); -o-transform: translateX(50%); -webkit-transform: translateX(50%); transform: translateX(50%); content: 'off'; position: absolute; top: 0; left: -11px; width: 23px; /*40px;*/ height: 18px; background: #fff; border-radius: 3px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 10px; text-align: center; padding-top: 3px; text-transform: capitalize; color: #888888; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .media_admin_panel .admin-panel-switches { position: relative; margin-left: 6px; } /* fake ddls */ .fake-ddl { display: inline-block; } [data-admin-panel-control="ddl"] .admin-panel-labels { display: inline-block; min-width: 42px; } .admin-panel-select-tab-style > .admin-panel-labels { vertical-align: top; } [class*="admin-panel"].pseudo-select { min-height: 20px; padding-top: 2px; cursor: pointer; padding-bottom: 2px; } [class*="admin-panel"].pseudo-select-option-list:not(.admin-panel-dropdown-select-tab-style) { display: block; position: absolute; background-color: #fff; border: 1px solid #DBDBDB; margin-top: -5px; cursor: pointer; z-index: 1; width: 124px; } [class*="admin-panel"][class*="-count"].pseudo-select-option-list { width: 49px; } .interactionWidget .pseudo-select-option-list > div { padding-top: 4px; padding-bottom: 4px; padding-left: 5px; line-height: 1.0; } .admin-panel-dropdown-select-slide-banner-style.pseudo-select-option-list div { line-height: .80; } .admin-panel-dropdown-select-tab-count.pseudo-select-option-list div, .admin-panel-dropdown-select-slider-count.pseudo-select-option-list div { line-height: 0.5; } [data-slider-style="Boxes"] .admin-panel-dropdown-select-slider-count.pseudo-select-option-list div { line-height: 0.5 !important; } .pseudo-select-option-list.admin-panel-dropdown-select-flash-deck-count { width: 32px; height: 96px; overflow: auto; } /* style and count fake ddl */ [class*="admin-panel"].pseudo-select[class*="-style"], [class*="admin-panel"].pseudo-select-option-list[class*="-style"] { min-width: 100px; } [class*="admin-panel"].pseudo-select[class*="-count"], [class*="admin-panel"].pseudo-select-option-list[class*="-count"] { min-width: 25px; } .pseudo-select.admin-panel-dropdown-select-flash-deck-count { width: 22px; } /* style, count, color - select2 ddl */ .admin-panel-option-row[class*="-color"] select[id*="Colors"], .admin-panel-option-row[class*="-style"] select[id*="Style"] { width: 126px; } .admin-panel-option-row[class*="-count"] select[id*="Count"] { width: 50px; } .admin-panel-option-row > [class*="ColorPicker"] ~ .sp-container { position: absolute !important; top: -1px !important; right: -1px; width: 254px; height: 224px; border-radius: 0px 0px 0px 15px !important; } /* z-index */ .interaction-wrapper-wheel:hover > .Admin > .admin-panel, .tab-interaction-widget:hover > .Admin > .admin-panel, .slider-interaction-widget:hover > .slider-interaction-tile-outter-wrapper > .Admin > .admin-panel .admin-panel, div[data-interaction-name="hidden-box-squares"]:hover > .Admin > .admin-panel { z-index: 1; } /* venn wheel */ .interaction-wrapper-wheel.wheel-venn .pseudo-select-option-list.admin-panel-dropdown-select-wheel-count *:nth-child(n+3) { display: none !important; } /* Venn style, hide specified 'count' options from the fake dropdown ( the range is 2-3 circles ) */ /* Slide Banner */ .slideUnder .Admin { position: absolute !important; right: 0px !important; z-index: 2; } .slideUnder.rightSide .Admin { position: absolute !important; left: -14px !important; width: 221px; } .slideUnder.rightSide .admin-panel { border-radius: 0 5px 5px 0; left: 14px; } /* hidden box variants and compare and contrast adjustments */ .admin-panel-dropdown-hidden-box-color.pseudo-select, .admin-panel-dropdown-hidden-box-arrow-color.pseudo-select, .admin-panel-dropdown-compare-contrast-color.pseudo-select { width: 85px; } .admin-panel-dropdown-hidden-box-color.pseudo-select-option-list, .admin-panel-dropdown-hidden-box-arrow-color.pseudo-select-option-list, .admin-panel-dropdown-compare-contrast-color.pseudo-select-option-list { width: 109px !important; margin-top: -1px !important; } /* accordion */ .admin-panel-option-row.admin-panel-color-all-cards { float: left; height: 15px; padding: 2px; } .ColorPickerFlashDeck ~ .sp-container { position: absolute !important; right: -1px; width: 252px; height: 225px; border-radius: 0 0 0 15px !important; top: -1px !important; } /* Media Widget - Admin panel special css */ .videoWidget .admin-panel, .audioWidget .admin-panel, .customIframe .admin-panel { display: none; } .tour3D .admin-panel { left: 70px; top: -30px; border-radius: 0 6px 0 0; display: block; background-color: #f8fafa; color: black; padding: 3px 0px 0px 0px; z-index: 0; position: absolute; text-align: right; border: 1px solid #e6e1e1; } .tour3D .admin-panel-option-row { height: 15px; margin-bottom: 10px; float: left; margin-left: 2px; } .txt_yhelp + .cke .admin-panel-required-play { visibility: hidden; } /* ? no idea what this is for */ .e-widget-editable-focused .Admin { display: none !important; } /* #endregion */ /* #region Freedrag Handle */ .free-drag-handle { display: none; width: 44px; height: 30px; top: -31px; left: 0px; position: absolute; background-image: url(../images/Controls/drag2.png); background-position: 11px 4px !important; background-size: 22px; background-repeat: no-repeat; cursor: move; background-color: rgba(255, 255, 255, 0.8); border-radius: 5px 5px 0px 0px; border: 1px solid #cccccc; } .interaction-wrapper-wheel .free-drag-handle { top: 0px; } [data-free-drag="on_absolute"]:hover > .free-drag-handle { display: block; } .slideUnder .free-drag-handle { top: 0px; } .Wrapperimage .free-drag-handle, .WrapperCustom_Shapes .free-drag-handle { left: 0; } /* #endregion */ /* #region Docking System for Admin Panel */ /* Base - horrizontal by default */ .admin-dock-node { display: none; padding-left: 13px; background-image: url(../images/Controls/dock-right.png); background-position: 2px 0px; background-size: 17px; background-repeat: no-repeat; position: absolute; left: 3px; width: 30px; height: 37px; } /* Horrizontal undock */ .admin-dock-node-horrizontal { background-image: url(../images/Controls/dock-left.png); } /* tab, wheel, slider undock */ .interactionWidget > .Admin > .admin-panel.undocked, .slider-interaction-tile-outter-wrapper > .Admin > .admin-panel.undocked { overflow: visible; } /* tab, wheel, slider docked */ .interactionWidget > .Admin > .admin-panel.docked, .slider-interaction-tile-outter-wrapper > .Admin > .admin-panel.docked { width: 0px !important; min-width: 0px; height: 21px; right: 0px !important; overflow: hidden; padding: 12px; } /* tab, wheel, slider docked - hide rows */ .interactionWidget > .Admin > .admin-panel > .admin-dock-node-horrizontal ~ .admin-panel-option-row, .slider-interaction-tile-outter-wrapper > .Admin > .admin-panel > .admin-dock-node-horrizontal ~ .admin-panel-option-row { display: none; } /* accordion docked */ [data-interaction-name="simple-accordion"] > .Admin > .docked { width: 0px; min-width: 0px !important; height: 33px; right: 0px !important; overflow: hidden; padding: 16px; } /* accordion undocked */ [data-interaction-name="simple-accordion"] > .Admin > .admin-dock-node-horrizontal ~ .admin-panel-option-row { display: none; } /* Slide banner right aligned */ .slideUnder.rightSide > .Admin > .admin-panel > .admin-dock-node:not(.admin-dock-node-horrizontal-right) { background-image: url(../images/Controls/dock-left.png); left: 187px; } .slideUnder.rightSide > .Admin > .admin-panel > .admin-dock-node.admin-dock-node-horrizontal-right { left: 0px; background-position: 2px 3px; } /* admin panel docking node visibility by type */ .interactionWidget .admin-dock-node { display: block; } /* Admin panel docking node hover fx */ .admin-dock-node:hover { border-radius: 10px; height: 24px; width: 14px; outline: none; cursor: pointer; } .admin-dock .admin-panel-option-row, .admin-dock-half .admin-panel-option-row { visibility: hidden; -webkit-transition: all .5s cubic-bezier(0.65, 0.05, 0.36, 1); -moz-transition: all .5s cubic-bezier(0.65, 0.05, 0.36, 1); -o-transition: all .5s cubic-bezier(0.65, 0.05, 0.36, 1); transition: all .5s cubic-bezier(0.65, 0.05, 0.36, 1); } /* #endregion */ /* #region Dyna Background Modal and Various other parts that touch it */ /* the button that launches it from anywhere */ .admin_panel_color_button { position: absolute; display: inline-block; float: left; border: 1px solid #CCC !important; background-color: #ffffff; background: url(images/arrpwddl.png) no-repeat right #fff !important; width: 123px; height: 26px; font: normal 15px 'open sans'; text-align: left; text-decoration: none; line-height: 30px; color: #636363; border-radius: 2px; transition: background-color.3s, border-color .3s; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; outline: none; cursor: pointer; } .admin_panel_color_button_preview { height: 22px; width: 103px; background-color: #ccc; margin-left: 2px; margin-top: 2px; cursor: pointer; } /* step interaction special css for color picker */ .admin-panel-step-interaction-color .admin_panel_color_button { width: 80px; } .admin-panel-step-interaction-color .admin_panel_color_button_preview { width: 60px; } /* panels interaction special css for color picker */ .admin-panel-select-panels-color .admin_panel_color_button { width: 80px; } .admin-panel-select-panels-color .admin_panel_color_button .admin_panel_color_button_preview { width: 76px; } .admin_panel_reset_rainbow { width: 39px; height: 20px; font: normal 15px 'open sans'; display: inline-block; position: absolute; right: 0px; border-radius: 3px; background-image: url(../images/Controls/refresh.png); background-repeat: no-repeat; background-size: 16px; background-position-y: 6px; background-position-x: 7px; cursor: pointer; } /* quicktool button */ .quicktool_color_button { padding: 0px; width: 27px; height: 26px; font: normal 15px 'open sans'; text-align: left; text-decoration: none; line-height: 30px; color: #636363; border: 1px solid #DBDBDB; border-radius: 2px; transition: background-color.3s, border-color .3s; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; outline: none; cursor: pointer; } .quicktool_color_button_input { display: block; padding-left: 33px; } /*.quicktool_color_button_preview { left: 0px; }*/ /* dynacolor modal */ .dynacolor_modal_drag_handle.ui-draggable-handle { position: absolute; width: 318px; height: 32px; cursor: move; top: -34px; left: -10px; /* border: 1px solid red; */ } .dynacolor_modal_drag_handle.dyna_gallery_styles.ui-draggable-handle { position: absolute; width: 347px; height: 44px; cursor: move; top: -9px; left: -10px; } .dynacolor_modal_drag_handle.dyna_gallery_poptile.ui-draggable-handle { width: 583px; height: 32px; } .dynacolor_modal_drag_handle.shape_and_color_gallery { top: -9px; } .dyna_modal_wrapper .close { line-height: 12px !important; font-size: 32px !important; font-weight: 500 !important; top: 7px; right: 0px; height: 19px; } .dyna_modal_wrapper.modal.in { background-color: transparent; overflow: hidden; } .dyna_modal_wrapper_mask_enabled { background-color: rgba(0, 0, 0, 0.3) !important; } /* Palette button for dynacolor, node mode */ /* Base class */ .color-palette { cursor: pointer; position: absolute; top: 0; right: 0; z-index: 999999999; background: rgba(255, 255, 255, 0) url(/images/Controls/paint_bucket_small.png) no-repeat; background-position: center; width: 25px; height: 24px; margin-right: -12px; margin-top: -13px; } .color-palette * { cursor: none; } /* Table cell coloring */ .cell-dynacolor .color-palette:first-of-type { margin-right: -5px; margin-top: -7px; } /* Tab interaction content panels*/ div[data-tab-interaction-content-editable] .color-palette { top: 15px; left: 0; } /* Wheel button */ .wheel-interaction-button .color-palette { margin: 0px; left: 0px; top: 0px; } .interaction-wrapper-wheel.wheel-compact .wheel-interaction-button .color-palette { left: 116px; top: 41px; } /* Wheel spin wheels */ .interaction-wrapper-wheel .color-palette { top: 0px; left: 64px; } .interaction-wrapper-wheel.wheel-compact .color-palette { left: -6px; } .interaction-wrapper-wheel.wheel-venn .color-palette { top: 0px; left: 64px; z-index: 99999; } /* Wheel content pane */ div[data-wheel-interaction-content-editable] .color-palette { margin-right: 54px; top: 23px; left: 100px; } /* Slider Interaction */ .slider-interaction-widget .project-info .color-palette { top: 50%; } .slider-interaction-widget .cd-project-content .color-palette { margin-right: 54px; top: 23px; left: 100px; } /* Slide Banner Interaction */ .slideUnder .color-palette { margin-right: 0px; margin-top: 5px; } .slideUnder.rightSide .color-palette { left: 0px; } /* Step Interaction - Square Tiles */ div[data-interaction-name="square-interaction-small"] .MainDiag5Step_TitlesSQR .color-palette, div[data-interaction-name="square-interaction-large"] .MainDiag5Step_TitlesSQR .color-palette { margin-top: 15px; margin-right: -15px; } /* Accordion Interaction */ .accordion-header .color-palette { top: 16px; right: 15px; } .accordion-Content .color-palette { top: 17px; right: 15px; } [data-interaction-name="heading-accordion"] .accordion-header .color-palette { top: 29px; right: 0px; } [data-interaction-name="heading-accordion"] .accordion-Content .color-palette { top: 87px; right: 28px; } /* Hide palette for all Content inside template widgets */ .custom_template_content .color-palette { display: none; } /* override to hide the university custom color items in select2 menus */ li[data-select2-id*="Custom1"], li[data-select2-id*="Custom2"], li[data-select2-id*="Custom3"] { display: none !important; } .pop_tile_wrapper > .color-palette { top: 15px; right: -7px; } .tilecrawl_container > .color-palette { top: 15%; } /* special cloned preview node thats appended when comming in off the pop tile edit modal */ .cloned_pop_tile_preview { top: -350px !important; position: relative !important; } .dyna_color_modal .sp-button-container, .dyna_color_modal .btn_revert_cust_bg { display: none; } .hideAdvBackgroundControls .dynacolor_modal_drag_handle { top: -10px; z-index: 9999999; } .dynacolor_modal_drag_handle { /*border: 1px solid red;*/ } .dynabg_tabs { margin-top: 25px; } .hideAdvBackgroundControls .dynabg_tabs { margin-top: 0px; } .dyna_color_modal:not(.exclude_position) > .modal-dialog { position: fixed; top: 200px; left: 180px; } .hideAdvBackgroundControls .ui-tabs-nav, .hideAdvBackgroundControls .cust_bg_image_controls { display: none; } .cke_table-faked-selection { -webkit-box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.48); -moz-box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.48); box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.48); } /* gradiant preselection */ .grad_preset_thumbs { float: left; position: relative; } .grad_preset_thumbs:hover::before { content: 'Recently Used'; font-size: 12px !important; font-weight: 600; position: absolute !important; top: -15px; left: 0; } .grad_preset_wrapper { width: 270px !important; height: 50px !important; margin-top: 0px; margin-bottom: 20px; } .custom_background_color_plugin .grad_preset_wrapper { margin-top: 20px !important; } .grad_preset_thumb { position: relative !important; float: left !important; width: 48px !important; height: 30px !important; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); margin: 2px 1px !important; border: solid 1px #efefef !important; cursor: pointer !important; } .grad_preset_thumb_inner { display: block !important; position: absolute !important; float: left !important; top: -3px !important; left: -2px !important; width: 48px !important; height: 30px !important; background-position: 50% 50% !important; background-repeat: no-repeat !important; margin: 2px 1px !important; border: solid 1px #efefef !important; cursor: pointer !important; } .grad_preset_thumbs span.grad_preset_thumb { margin-right: 3px !important; } div#grapick { margin-bottom: 40px; } .dyna_modal_wrapper .YardiHelp { display: none; } /* #endregion */ /* #region Dyna Style Gallery ( covers a wide range of the new bootstrap driven modal galleries ) */ .dynagallery_container { width: 100%; background-color: #fff; } .dynagallery_modal_label { margin-top: 0px; font-size: 20px; font-weight: 500; } .dyna_style_gallery .dynagallery_container { display: flex; display: -webkit-flex; display: -ms-flexbox; flex-wrap: wrap; } .dynagallery_column { width: 180px; height: 120px; } .dynagallery_column[data-type="tab"][data-selection="classic"] { background: url(Images/DynaGallery/tab_classic.png) no-repeat center center; } .dynagallery_column[data-type="tab"][data-selection="simple"] { background: url(Images/DynaGallery/tab_simple.png) no-repeat center center; } .dynagallery_column[data-type="tab"][data-selection="modern"] { background: url(Images/DynaGallery/tab_modern.png) no-repeat center center; } .dynagallery_column[data-type="tab"][data-selection="bracket"] { background: url(Images/DynaGallery/tab_bracket.png) no-repeat center center; } .dynagallery_column[data-type="tab"][data-selection="timeline"] { background: url(Images/DynaGallery/tab_timeline.png) no-repeat center center; } .dynagallery_column[data-type="tab"][data-selection="flow"] { background: url(Images/DynaGallery/tab_flow.png) no-repeat center center; } .dynagallery_column[data-type="tab"][data-selection="pop"] { background: url(Images/DynaGallery/tab_pop.png) no-repeat center center; } .dynagallery_column[data-type="tab"][data-selection="folder"] { background: url(Images/DynaGallery/tab_folder.png) no-repeat center center; } .dynagallery_column[data-type="tab"][data-selection="3dclip"] { background: url(Images/DynaGallery/tab_3dclip.png) no-repeat center center; } .dynagallery_column[data-type="tab"][data-selection] { background-size: 125px; } .dynagallery_column[data-type="accordion"][data-selection="classic"] { background: url(Images/DynaGallery/accordion_classic.png) no-repeat center center; } .dynagallery_column[data-type="accordion"][data-selection="simple"] { background: url(Images/DynaGallery/accordion_simple.png) no-repeat center center; } .dynagallery_column[data-type="accordion"][data-selection="flat"] { background: url(Images/DynaGallery/accordion_flat.png) no-repeat center center; } .dynagallery_column[data-type="accordion"][data-selection="spin"] { background: url(Images/DynaGallery/accordion_spin.png) no-repeat center center; } .dynagallery_column[data-type="accordion"][data-selection="plus"] { background: url(Images/DynaGallery/accordion_plus.png) no-repeat center center; } .dynagallery_column[data-type="accordion"][data-selection] { background-size: 175px; } .dynagallery_column[data-type="tilecrawl"][data-selection="default"] { background: url(Images/DynaGallery/tilecrawl_default.png) no-repeat center center; } .dynagallery_column[data-type="tilecrawl"][data-selection="rounded"] { background: url(Images/DynaGallery/tilecrawl_rounded.png) no-repeat center center; } .dynagallery_column[data-type="tilecrawl"][data-selection="thumbs"] { background: url(Images/DynaGallery/tilecrawl_thumbs.png) no-repeat center center; } .dynagallery_column[data-type="tilecrawl"][data-selection="tile"] { background: url(Images/DynaGallery/tilecrawl_tile.png) no-repeat center center; } .dynagallery_column[data-type="panels"][data-selection="classic"] { background: url(Images/DynaGallery/panels_classic.png) no-repeat center center; } .dynagallery_column[data-type="panels"][data-selection="invert"] { background: url(Images/DynaGallery/panels_invert.png) no-repeat center center; } .dynagallery_column[data-type="panels"][data-selection="flat"] { background: url(Images/DynaGallery/panels_flat.png) no-repeat center center; } .dynagallery_column[data-type="panels"][data-selection="line"] { background: url(Images/DynaGallery/panels_line.png) no-repeat center center; } .dynagallery_column[data-type="panels"][data-selection="border"] { background: url(Images/DynaGallery/panels_border.png) no-repeat center center; } .dynagallery_column[data-type="panels"][data-selection] { background-size: 165px; } .dynagallery_column[data-type="wheel"][data-selection="classic"] { background: url(Images/DynaGallery/wheel_classic.png) no-repeat center center; } .dynagallery_column[data-type="wheel"][data-selection="droplet"] { background: url(Images/DynaGallery/wheel_droplet.png) no-repeat center center; } .dynagallery_column[data-type="wheel"][data-selection="gearwheel"] { background: url(Images/DynaGallery/wheel_gearwheel.png) no-repeat center center; } .dynagallery_column[data-type="wheel"][data-selection="rounded"] { background: url(Images/DynaGallery/wheel_rounded.png) no-repeat center center; } .dynagallery_column[data-type="wheel"][data-selection="award"] { background: url(Images/DynaGallery/wheel_award.png) no-repeat center center; } .dynagallery_column[data-type="wheel"][data-selection="badge"] { background: url(Images/DynaGallery/wheel_badge.png) no-repeat center center; } .dynagallery_column[data-type="wheel"][data-selection="house"] { background: url(Images/DynaGallery/wheel_house.png) no-repeat center center; } .dynagallery_column[data-type="wheel"][data-selection="venn"] { background: url(Images/DynaGallery/wheel_venn.png) no-repeat center center; } .dynagallery_column[data-type="wheel"][data-selection="compact"] { background: url(Images/DynaGallery/wheel_compact.png) no-repeat center center; } .dynagallery_column[data-type="wheel"][data-selection="octagon"] { background: url(Images/DynaGallery/wheel_octagon.png) no-repeat center center; } .dynagallery_column[data-type="slider"][data-selection="default"] { background: url(Images/DynaGallery/slider_default.png) no-repeat center center; } .dynagallery_column[data-type="slider"][data-selection="thumbnails"] { background: url(Images/DynaGallery/slider_thumbnails.png) no-repeat center center; } .dynagallery_column[data-type="slider"][data-selection="boxes"] { background: url(Images/DynaGallery/slider_boxes.png) no-repeat center center; } .dynagallery_column[data-type="slider"][data-selection="modern"] { background: url(Images/DynaGallery/slider_modern.png) no-repeat center center; } .dynagallery_column[data-type="slider"][data-selection="reveal"] { background: url(Images/DynaGallery/slider_reveal.png) no-repeat center center; } .dynagallery_column[data-type="slider"][data-selection="reveal_simple"] { background: url(Images/DynaGallery/slider_reveal_simple.png) no-repeat center center; } .dynagallery_column[data-type="slider"][data-selection] { background-size: 125px; } .dynagallery_column[data-type="slideBanner"][data-selection="slideUnder"] { background: url(Images/DynaGallery/slideBanner_classic.png) no-repeat center center; } .dynagallery_column[data-type="slideBanner"][data-selection="SlideSquare"] { background: url(Images/DynaGallery/slideBanner_square.png) no-repeat center center; } .dynagallery_column[data-type="slideBanner"][data-selection="SlideLeaf"] { background: url(Images/DynaGallery/slideBanner_leaf.png) no-repeat center center; } .dynagallery_column[data-type="slideBanner"][data-selection="SlideModern"] { background: url(Images/DynaGallery/slideBanner_modern.png) no-repeat center center; } .dynagallery_column[data-type="slideBanner"][data-selection="hexagon"] { background: url(Images/DynaGallery/slideBanner_hexagon.png) no-repeat center center; } .dynagallery_column[data-type="slideBanner"][data-selection="SlideLottery"] { background: url(Images/DynaGallery/slideBanner_lottery.png) no-repeat center center; } .dynagallery_column[data-type="slideBanner"][data-selection="SlideBookmark1"] { background: url(Images/DynaGallery/slideBanner_bookmark.png) no-repeat center center; } .dynagallery_column[data-type="slideBanner"][data-selection] { background-size: 140px; } .dynagallery_column[data-type="deck"][data-selection="classicFlash"] { background: url(Images/DynaGallery/deck_classic.png) no-repeat center center; } .dynagallery_column[data-type="deck"][data-selection="roundClassicFlash"] { background: url(Images/DynaGallery/deck_rounded.png) no-repeat center center; } .dynagallery_column[data-type="deck"][data-selection="minimal"] { background: url(Images/DynaGallery/deck_minimal.png) no-repeat center center; } .dynagallery_column[data-type="deck"][data-selection="metroFlash"] { background: url(Images/DynaGallery/deck_metro.png) no-repeat center center; } .dynagallery_column[data-type="deck"][data-selection] { background-size: 125px; } .dynagallery_column { cursor: pointer; border: 1px solid #e4e4e4; position: relative; overflow: hidden; transition: background-position-y .3s; } .dynagallery_column:hover { box-shadow: 0px 4px 10px -5px #bbb8b8; background-color: #FFFEFA; background-position-y: bottom !important; } .dynagallery_column.selected_item { box-shadow: 0 0 6px 0px #bbb8b8; border: #FFD1A4 1px solid; background-color: #FFFEFA; } .dynagallery_column:after { content: attr(data-title); position: absolute; top: 0px; left: -100px; transition: right .1s ease-out, font-size.2s ease-out; color: #fff; font-size: 0px; padding: 3px 7px; background: #cccccc; } .dynagallery_column:hover:after { left: 0px; font-size: 14px; z-index: 99999 } /* link style gallery (embeddd media links) */ .dynagallery_column.media_link_styles { display: flex; display: -webkit-flex; display: -ms-flexbox; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; width: 119px; height: 88px; text-align: center; z-index: 1; } .dynagallery_column.media_link_styles a { margin: 0 auto; } .media_link_styles_gallery_top_controls { height: 40px !important; margin: 20px 0 12px 0; display: flex; display: -webkit-flex; display: -ms-flexbox; align-items: flex-end; } .media_link_color_gallery_controls { width: 100%; } .media_link_color_gallery_controls .dynadialog_color_button { margin-left: 0; position: initial; } .media_link_color_gallery_controls .dynadialog_color_button::before { content: 'Color:'; font-family: 'Open Sans'; font-size: 12px; color: #525252; font-weight: 500; position: relative; top: -20px; } /* modal style gallery */ .lbl_media_link_modal_gallery { cursor: help; font-weight: 500; font-size: 12px; } .media_link_modal_gallery_controls #btn_media_link_modal_gallery { margin-left: 0; width: 150px; } .preview_modal_styles .modal-dialog { min-width: unset !important; height: unset; box-sizing: unset; margin: 4px !important; overflow: hidden; } .preview_modal_styles.modal-dialog { background-color: white; padding: 10px; min-height: 97px; width: 151px !important; border-color: rgb(204, 204, 204); } .preview_modal_styles.modal.in { position: relative; display: block; width: 180px; height: 125px; overflow: hidden; background-color: unset; } .modal_style_item.dynagallery_column { position: relative; z-index: 1; width: unset; height: unset; cursor: pointer; } .modal_style_item.dynagallery_column * { cursor: pointer; } .modal_style_item .modal-preview-underlay { width: 180px; } .modal_style_item .styleModal_4 .close, .modal_style_item .styleModal_5 .close { border-color: inherit; } .styleModal_4 .preview_modal_styles { height: 79px; min-height: 0; } .styleModal_4 .preview_modal_styles .GenericContainer > div > div { height: 20px; } .styleModal_4 .preview_modal_styles .Coursecontent { overflow: hidden; height: 45px !important; } .styleModal_5 .preview_modal_styles .GenericContainer > div > div { margin-top: 15px; } .styleModal_5 .preview_modal_styles .GenericContainer > div > div[class*="clearfix"] { display: none; } /* color buttons */ .media_link_color_gallery_controls .btn_modal_gallery_border_color, .media_link_color_gallery_controls .btn_modal_gallery_background_color { width: 120px !important; } .media_link_color_gallery_controls .btn_modal_gallery_background_color { float: right; } .media_link_color_gallery_controls .btn_modal_gallery_border_color::before { content: 'Border Color:'; } .media_link_color_gallery_controls .btn_modal_gallery_background_color::before { content: 'Background Color:' } /* #endregion */ /* #region Dyna Poptile Dialog */ /* rtp for pop tile*/ .poptile_rtp { cursor: pointer; float: right; margin-top: 15px; } .poptile_rtp:before { content: 'Required Play'; position: absolute; right: 0; top: 29px; font-size: small; font-weight: 600; } /* preview frame for pop tile */ .poptile_preview_container { position: absolute; top: 100px; right: -333px; } .hide_pop_tile_preview { display: none; } /* images for pop tile */ .btn_select_poptile_bg { margin-right: 2px; margin-top: 6px; background-color: #cccbcb; padding: 4px 15px 4px 15px; border-radius: 5px; cursor: pointer; color: white; width: 82px; display: none; } /* selection bar for pop tile */ .poptile_quickbar_wrapper { position: relative; top: -8px; min-height: 30px; margin-bottom: 5px; margin-top: 10px; max-width: 500px; } .poptile_quickbar_item { position: relative; background-color: white; border: 1px solid #ccc; padding: 9px; margin-left: 4px; margin-top: 3px; font-weight: bold; border-radius: 3px; width: 25px; float: left; text-align: center; } .poptile_quickbar_item:hover, .poptile_quickbar_item.active_poptile { background-color: #ccc; color: white; cursor: pointer; } .btn_remove_poptile { position: absolute; top: -7px; right: 1px; width: 15px; height: 15px; border-radius: 100%; background-color: white; } .btn_remove_poptile:after { content: "\ed60"; font-size: 17px; font-family: 'icomoon_EL'; position: relative; top: -2px; right: 2px; color: red; } .btn_add_poptile { height: 18px; } .btn_add_poptile:after { content: "\ed61"; font-size: 25px; font-family: 'icomoon_EL'; position: relative; top: -3px; color: darkseagreen; } .btn_add_poptile:hover { transform: scale(1.1); } .poptile_quickbar_wrapper .poptile_quickbar_item:nth-child(21) { display: none; } /* tile and description for pop tile */ .lbl_poptile_title { display: block; margin-left: 15px; } .input_poptile_title { width: 250px; margin: 2px 0 13px 13px; } .lbl_poptile_desc { display: block; margin-left: 15px; } .input_poptile_desc { height: 60px; width: 455px; } #cke_pop_tile_desc_editor { width: 571px !important; height: 83px; margin-left: 15px; margin-bottom: 25px; display: table; } #cke_pop_tile_desc_editor .cke_contents { overflow-y: auto; } /* shapes for pop tile */ .dynagallery_container .gen_shape_gallery_controls { margin-left: 4px; border: 1px solid rgba(204, 204, 204, 0.4); width: 571px; } .dynagallery_container .gen_shape_gallery_controls:before { content: 'Customize Shape'; position: absolute; top: -7px; right: 23px; background-color: #fff; font-size: smaller; font-weight: 600; padding-left: 5px; padding-right: 5px; } .shape_size_container { left: 15px; padding-top: 7px; position: relative; } .lbl_shape_color.gen_label { position: relative; top: 16px; float: left; } .dynadialog_color_button { display: inline-block; position: relative; float: left; border: 1px solid #CCC !important; background-color: #ffffff; padding: 0px; width: 27px; height: 26px; font: normal 15px 'open sans'; border-radius: 2px; cursor: pointer !important; margin-left: 19px; top: 13px; box-shadow: inset 0 0 0px 1px white; } .inputSwitch.poptile_color_all { position: relative; top: 11px; margin-left: 20px; } .shape_size_out { width: 45px; } .dynagallery_container .gen_shape_gallery { display: block; height: 360px; top: 0px; border: none; position: relative; width: 592px; } .dynagallery_container .preview-icomoon-container { height: 212px; } .panel .preview-icomoon-container { height: 270px; } /* #endregion */ /* #region Dynamic content shifter and dynamic accordion controls */ .dynacontent-control { background-color: #f7f7f7; z-index: 9; position: absolute; right: 65px; margin-top: -12px; cursor: pointer; width: 95px; padding: 3px 3px 3px 7px; border-radius: 5px; } .dynacontent-control-button { padding-right: 21px; border: 1px solid rgba(189, 179, 179, 0.6509803921568628); background-repeat: no-repeat; background-size: 15px; background-position-y: 3px; background-position-x: 3px; } .dynacontent-control-button:hover { filter: brightness(1.25); } .dynacontent-control-button.moveUp { background-image: url(../images/Controls/dock-up.png); } .dynacontent-control-button.moveDown { background-image: url(../images/Controls/dock-down.png); background-position-y: 2px; } .dynacontent-control-button.addContent { background-image: url(../images/Controls/plus.png); background-position-y: 2px; } .dynacontent-control-button.removeContent { background-image: url(../images/Controls/false.png); background-size: 13px; } /* visuals for shifting content */ .fadein_accordion_unit { opacity: 1; -moz-animation-name: fadein_accordion_unit; -o-animation-name: fadein_accordion_unit; -webkit-animation-name: fadein_accordion_unit; animation-name: fadein_accordion_unit; -moz-animation-iteration-count: 1; -o-animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -moz-animation-duration: 500ms; -o-animation-duration: 500ms; -webkit-animation-duration: 500ms; animation-duration: 500ms; } .content_shift_visual { box-shadow: 0 0 13px 6px #eae38f !important; } .ui-tabs-tab.content_shift_visual { box-shadow: inset 0 0 5px 5px #eae38f !important; } @keyframes fadein_accordion_unit { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadein_accordion_unit { 0% { opacity: 0; } 100% { opacity: 1; } } [data-accordion-rows-count="1"] .dynacontent-control-button.moveUp, [data-accordion-rows-count="1"] .dynacontent-control-button.moveDown { pointer-events: none; opacity: .5; } /* #endregion */ /* #region CkWidget Styling */ /* Widget Wrapper -- removing default outlining ! */ .cke_widget_wrapper:hover .cke_widget_editable { outline: none !important; } .cke_widget_wrapper:hover > .cke_widget_element { outline: none !important; cursor: default; } .cke_widget_editable, .cke_widget_wrapper.cke_widget_focused > .cke_widget_element { outline: none !important; cursor: default; } .cke_widget_wrapper.cke_widget_focused > .cke_widget_element, .cke_widget_wrapper .cke_widget_editable.cke_widget_editable_focused { cursor: default; } /* removes the outlining for the 'editShell' I sometimes use to nest widgets eg. For Admin Menu inside of interactions, accordions ect. */ .editShell.cke_widget_editable.cke_widget_editable_focused { outline: none !important; } /*style for wrapper with a floating element*/ .WrapperInline { border-width: 1px 0px 0px 0px; } /* #endregion */ /* #region Shapes / Graphics widget and dialog */ .custom_shape_content { line-height: 0px; font-size: 150px; background-color: transparent !important; background: transparent !important; padding-bottom: 4%; } [data-free-drag="on_absolute"][data-base-type="shape"] .custom_shape_content.v2 { line-height: normal !important; } .shapes-base:before { color: inherit; font-size: inherit; font-family: 'icomoon_EL'; z-index: -1; } /* width slider */ .shapes-sliders { margin-top: 5px; margin-bottom: 5px; } .custom-shapes-sliders { height: 12px !important; display: -webkit-box; display: -ms-inline-flexbox; padding: 2px 1px; width: 253px; cursor: pointer !important; } .custom-shapes-sliders-input { border: 0; color: #090E08; font-weight: inherit; font-family: 'open sans'; width: 40px; } .custom-shapes-sliders .ui-widget-header { background: #DEDEDE; border-radius: 2px 0px 0px 2px; } .custom-shapes-sliders .ui-slider-handle { border: 2px solid #C7C7C7; display: block; margin-top: -2px; margin-bottom: -2px; border-radius: 0px; outline: none; cursor: pointer; } .shape-size-ghost { display: none; width: 60px; height: 60px; font-size: 60px; position: absolute; left: 0px; top: 1px; color: #58B3F0; background-color: rgba(255, 255, 255, 0.36) !important; border: 1px dashed rgba(102, 102, 102, 0.36) !important; z-index: 2; } .shape-size-ghost:before { position: absolute; color: inherit; font-size: inherit; font-family: 'icomoon_EL'; opacity: 0.6; } .select2-shape-color-results .select2-results { width: 137px; } /* shape previews */ /* base container */ .preview-icomoon-container { margin: 24px 0px 0px 13px; padding-top: 8px; height: 500px; max-height: 500px; overflow: auto; overflow-x: hidden; } .preview-icomoon-container *:hover, .container_gen_shape_gallery *:hover { cursor: pointer; filter: brightness(1.25); transform: scale(1.25); } /* preview shape items (icomoon sets) */ .preview-shape { font-size: 25px !important; float: left; width: 40px; height: 44px !important; max-height: 150px; overflow-y: visible; background: transparent !important; } .preview-shape:before { color: inherit; font-size: inherit; font-family: 'icomoon_EL'; padding: 5px; z-index: -1; } .shape-preview-selected:before { border: 1px solid #f0c858; } .Left.custom_shape + .cke_widget_drag_handler_container, .Right.custom_shape + .cke_widget_drag_handler_container { margin-left: 0px; } .custom_shape[adjust-quicktool-reduced] .widget-quick-tools { left: 28px; top: -13px; } /*tabs*/ #custom_shapes_panels { background: #fff; } #custom_shapes_panels .ui-tabs-panel { min-width: 0; padding: 0; margin: 0; } #custom_shapes_panels ul { width: 100%; margin-bottom: 15px; } #custom_shapes_panels li.ui-tabs-tab { cursor: pointer; border: 1px solid #ececec; background: #f6f6f6; width: 125px; height: 30px; user-select: none; padding: 0; line-height: 30px; border-radius: 5px 5px 0 0; } #custom_shapes_panels li.ui-tabs-tab a { cursor: pointer; color: #858585; } #custom_shapes_panels li.ui-tabs-tab.ui-state-active { background-color: #cccbcb; } #custom_shapes_panels li.ui-tabs-tab.ui-state-active a { color: #fff; } #custom_shapes_panels li.ui-tabs-tab:hover { background-color: #565656; } #custom_shapes_panels li.ui-tabs-tab:hover a { color: #fff; } .svg_graphics_ui_container { display: grid; grid-template-columns: auto auto; padding: 0px; } .svg_graphics_ui_container label, .svg_graphics_ui_container input, .svg_graphics_ui_container select, .svg_graphics_ui_container .dynadialog_color_button { display: block !important; margin-left: 0; } .svg_graphic_ui_grid_item { padding: 10px 5px; font-size: 13px; user-select: none; } /*general labels and inputs default styling*/ #panel_graphics .gen_label { cursor: help; } #panel_graphics .gen_input { width: 40px; } #panel_graphics .slider_gen { width: 235px; margin-top: 10px; } #panel_graphics .section_head { margin-bottom: 5px !important; color: #4a4a4a; font-weight: 600; font-size: 10px; text-align: left; margin-top: 10px; user-select: none; text-decoration: underline; } #panel_graphics .dynadialog_color_button { clear: both; top: 0; } /*new preview container css to handle svg*/ .shapes_preview_container svg { background-color: transparent !important; } /*dimenion pseudo-element labels for units*/ .svg_dim_unit::after { content: 'px'; position: relative; top: 20px; left: 30px; } .svg_dim_unit.points::after { content: 'pt'; left: 3px; } .svg_dim_unit.shape_size::after { top: -1px; left: 62px; } .svg_dim_unit_height::after { left: 27px; } .svg_dim_unit.stroke_size::after { left: 41px; } .svg_intermission_unit::after { content: 'sec'; position: relative; top: 20px; left: -14px; } /*svg type selection*/ .svg_type_controls { width: 330px; } .svg_sel_type { width: 190px; } /*custom svg - view and controls*/ .svg_custom .svg_custom_controls { display: block; } .svg_custom .svg_stroke_controls, .svg_custom .svg_fill_controls, .svg_custom .svg_animation_controls { display: none !important; } .svg_custom_controls { display: none; grid-column: 1; border-bottom: 0; } .svg_custom_textarea { width: 60% !important; height: 20px; overflow: hidden; overflow-y: visible; /* transition: height .5s; */ } .active.svg_custom_textarea { width: 315px !important; height: 235px !important; position: absolute; top: 90px; left: 3px; transition: height .5s; } .btn_import_svg_file { cursor: pointer !important; padding: 3px 31px; border-radius: 3px; font-weight: 600 !important; margin-top: 2px; float: right; } /*blob svg*/ .svg_blob_controls { display: none; } .svg_blob .svg_blob_controls { display: block; } .btn.btn_generate_blob { position: relative; float: right; top: 11px; right: 145px; } .svg_points_controls { margin-top: 30px; } /*dimension controls*/ .svg_circle .svg_height_controls, .svg_blob .svg_height_controls { display: none; } /*stroke and fill color buttons*/ .svg_color_controls { position: relative; left: 10px; top: 29px; } /*animation controls*/ .svg_animation_controls { grid-column: 1 / 3; } .svg_sel_animation { width: 116px; } .btn_replay_animated_svg { width: 130px; height: 31px; text-align: center !important; margin-top: 22px; border-radius: 3px; background-color: #cccbcb; color: #fff; cursor: pointer !important; } .svg_animation_controls_container .gen_input { height: 20px; } .svg_animation_controls_container.gen_flex > div { margin-left: 10px; } /*svg text widgets - view and controls */ .svg_text_controls { display: none; } .svg_text .svg_text_controls { display: block; } .svg_custom_text { width: 60% !important; height: 20px; overflow: hidden; overflow-y: visible; /* transition: height .5s; */ } .active.svg_custom_text { width: 220px !important; transition: width .5s; } .svg_text .svg_dimension_controls { display: none; } .svg_text .svg_fill_color_controls { /* display: none!important; */ } .svg_text .shapes_preview_container { /* background-color: transparent; */ } .svg_text_template { display: none; } .svg_text .svg_anim_basic { display: none; } .svg_text .svg_text_template { display: block; } /*seperate modal version for nodes*/ .modal-dialog.shapes_for_nodes { background-color: white; /* padding: 40px; */ width: 601px; min-height: 391px; } /*modal version for nodes*/ .modal-dialog.shapes_for_nodes.note { top: 10% !important; left: 0; position: relative; } /*#endregion*/ /* #region Magic Line */ .ck-magicline { z-index: 99999999999 !important; } /* #endregion */ /* #region Add Item Entries from Galleries */ .page-selection-gallery-mask:after { content: ''; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: white !important; opacity: 0.5; pointer-events: none; } .disable-pointer * { pointer-events: none; } .addentry-dialog .cke_dialog_title { visibility: visible; font-size: 13px !important; padding: 6px 10px !important; /* background: #dea690!important; */ background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f9f9f9)) !important; } .addentry-dialog-resource-title input { height: 30px; width: 350px !important; } /* #endregion */ /* #region Special CSS */ .dialog-pos-outer { left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: 99998; position: fixed; overflow: auto; } .dialog-pos-inner { position: absolute !important; top: 90px !important; } .offset_dialog_from_top { margin-top: 45px !important; } .cke_dialog_background_cover { width: 100% !important; background-color: #ccc !important; } .cust_bg_override_mask { opacity: 0 !important; } /* Spectrum Palette Override, Fake Hex Input */ .spectrum-placeholder ~ .sp-container { background-color: #fff !important; border: none !important; } /* Spectrum Fake Hex input - special fake input for hex input inside editor/spectrum instance */ .dynamic-hex-input { width: 90px; height: 17px; padding-top: 4px !important; background-color: #ffffff; border: 1px solid #cfcfde; position: absolute; padding: 2px; margin: 5px; text-align: left; overflow: hidden; right: 45px; bottom: 50px; } .dynamic-hex-input * { line-height: 0px !important; width: 250px; } /* Media Widget - Overlay, X-Ray, Bookmarking */ .media_embed_overlay_panel { position: absolute; background-color: rgba(82, 79, 101, 0.78); width: 173px; height: 52px; padding: 11px; color: white; } /* Hover is being hijacked in IE/Edge when going over an iframe, therefore you can never get to the controls, this was the only solution I could find that's pure CSS to target specific browsers */ /* IE 10 and above */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .media_embed .widget_EditTab { display: block; } .media_embed.tour3d .admin-panel { display: block; } .media_embed .widget-quick-tools { visibility: visible; -moz-transition-delay: 0s; -o-transition-delay: 0s; -webkit-transition-delay: 0s; transition-delay: 0s; } .media_embed .widget_resizer { display: block; } .WrapperCustom_MediaEmbed .free-drag-handle { display: block; } } /* Edge */ @supports (-ms-ime-align:auto) { .media_embed .widget_EditTab { display: block; } .media_embed.tour3d .admin-panel { display: block; } .media_embed .widget-quick-tools { visibility: visible; -moz-transition-delay: 0s; -o-transition-delay: 0s; -webkit-transition-delay: 0s; transition-delay: 0s; } .media_embed .widget_resizer { display: block; } .WrapperCustom_MediaEmbed .free-drag-handle { display: block; } } /* Upload Images and Files */ .cke_widget_uploadimage.cke_upload_loading.Wrapperuploadimage { background-image: url(/images/controls/loading_gear.gif) !important; width: 50px; height: 50px; } .cke_widget_uploadimage img { visibility: hidden; } /* End Upload Images and Files */ /* Save Snapshot - hide the drag handles */ #cke_overlay .cke_widget_drag_handler_container { display: none !important; } /* interactions dialog - 'replace page' switch button */ span.chkInsertOpt { margin-top: 18px; } span.chkInsertOpt:before { content: 'Replace Page:'; margin-left: 3px; } input.chkInsertOpt + label { margin-left: 5px; } /* image tag - 'rtp and wizard mode' switch buttons */ input.cbImageTagRtp + label { width: 40px !important; margin-bottom: 5px; } input.cbImageTagWizard + label { width: 40px !important; } /* drives styling of new feature for hiding all controls except target ck control on engagement */ .hide-ck-control { display: none !important; } .engaged_ck_control { display: block !important; } .hide-dynacolor .color-palette { display: none !important; } /* override rotate transform on specific animated targets, the animation css collides with the transform - aka - rotate is not supported for animated images/notes */ .cke #Note[data-delayshow], .cke [data-image-type][data-delayshow] { /* transform: rotate(0) !important; */ } /* freedrag content shift inside of performance card modal */ #HistoryModal .rpt-performance-report + #rptRQuestions .QuestionRowDiv { overflow-x: auto; position: relative; } #HistoryModal .rpt-performance-report + #rptRQuestions .QuestionRowDiv [data-free-drag="on_absolute"] { margin-left: 23px !important; margin-top: 57px !important; } /* univ course color label inside settigs (context) */ .univ_course_color_label { display: inline-block; overflow: hidden; white-space: nowrap; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; width: 166px; } /* freedrag content inside of answered question structure */ /*.Coursecontent .QuestionRowDiv [data-free-drag="on_absolute"] { margin-left: 11px !important; margin-top: 9px !important; }*/ .cke_dialog_open { margin-right: 17px !important; } .ck_collapse_toolbar_button { width: 0 !important; height: 0 !important; } .ck_collapse_toolbar_button * { display: none !important; } .course_rtp_tooltip_adjust_arrow .arrow { left: 10% !important; } /* #endregion */ /* #region Admin Viewable Only - currently implemented for colored notes */ /* The default pseudo element for notes tagged as 'Author Note' - notes only visible by admins */ .cke_editable #Note[data-admin-view]:not([data-mynotetype="postit"]):not([data-mynotetype="Stackpaper"]):not([data-mynotetype="buble1"]):before { content: 'Author Note'; position: absolute; top: -17px; left: 0px; background: #d65757; color: white; border-radius: 2px; width: 125px; text-align: center; font: 400 12px "Open Sans"; } /* small adjustments by type*/ .cke_editable #Note[data-admin-view][data-mynotetype="SideBanner"]:before { left: 15px !important; } .cke_editable #Note[data-admin-view][data-mynotetype="RoundNote"]:before { left: 19px !important; } /* #region Special - Postit, Stackpaper, Buble - special - pseudo elements are drawn on the title/content area depending on visibility - these note types already use pseudo elements at the inner wrapper level :) */ /* default and title view */ .cke_editable #Note[data-admin-view="default"][data-mynotetype="postit"] .buble_Title:before, .cke_editable #Note[data-admin-view="title"][data-mynotetype="postit"] .buble_Title:before, .cke_editable #Note[data-admin-view="default"][data-mynotetype="Stackpaper"] .buble_Title:before, .cke_editable #Note[data-admin-view="title"][data-mynotetype="Stackpaper"] .buble_Title:before, .cke_editable #Note[data-admin-view="default"][data-mynotetype="buble1"] .buble_Title:before, .cke_editable #Note[data-admin-view="title"][data-mynotetype="buble1"] .buble_Title:before { content: 'Author Note'; position: absolute; top: -37px; left: 0px; background: #d65757; color: white; border-radius: 2px; width: 125px; text-align: center; font: 400 12px "Open Sans"; } /* content view only */ .cke_editable #Note[data-admin-view="content"][data-mynotetype="postit"] .buble_Content:before, .cke_editable #Note[data-admin-view="content"][data-mynotetype="Stackpaper"] .buble_Content:before, .cke_editable #Note[data-admin-view="content"][data-mynotetype="buble1"] .buble_Content:before { content: 'Author Note'; position: absolute; top: -54px; left: -25px; background: #d65757; color: white; border-radius: 2px; width: 125px; text-align: center; font: 400 12px "Open Sans"; } /* small adjustments by type*/ .cke_editable #Note[data-admin-view="content"][data-mynotetype="buble1"].Left .buble_Content:before { top: -51px !important; left: -18px !important; } .cke_editable #Note[data-admin-view="content"][data-mynotetype="buble1"].Right .buble_Content:before { top: -51px !important; left: -25px !important; } .cke_editable #Note[data-admin-view][data-mynotetype="postit"] .buble_Content:before { top: -66px !important; } /* #endregion */ /* student view context */ [data-admin-view], div[class*="shape_"][data-mynotetype][data-admin-view] { display: none; } /* authoring context */ .cke_editable [data-admin-view] { display: inherit; } /* special adjustments */ .cke_editable div[class*="shape_"][data-mynotetype] { display: inherit; } .cke_editable div[class*="shape_"][data-mynotetype].Center { display: block; } /* #endregion */ /* #region YH Book Viewable Only - currently implemented for colored notes */ /* The default pseudo element for notes tagged as 'YH Book Context View' - notes only visible by admins */ .cke_editable #Note[data-yhbook-visible]:not([data-mynotetype="postit"]):not([data-mynotetype="Stackpaper"]):not([data-mynotetype="buble1"]):before { content: 'YH Book Context View'; position: absolute; top: -17px; left: 0px; background: #d65757; color: white; border-radius: 2px; width: 125px; text-align: center; font: 400 12px "Open Sans"; } /* small adjustments by type*/ .cke_editable #Note[data-yhbook-visible][data-mynotetype="SideBanner"]:before { left: 15px !important; } .cke_editable #Note[data-yhbook-visible][data-mynotetype="RoundNote"]:before { left: 19px !important; } /* #region Special - Postit, Stackpaper, Buble - special - pseudo elements are drawn on the title/content area depending on visibility - these note types already use pseudo elements at the inner wrapper level :) */ /* default and title view */ .cke_editable #Note[data-yhbook-visible="default"][data-mynotetype="postit"] .buble_Title:before, .cke_editable #Note[data-yhbook-visible="title"][data-mynotetype="postit"] .buble_Title:before, .cke_editable #Note[data-yhbook-visible="default"][data-mynotetype="Stackpaper"] .buble_Title:before, .cke_editable #Note[data-yhbook-visible="title"][data-mynotetype="Stackpaper"] .buble_Title:before, .cke_editable #Note[data-yhbook-visible="default"][data-mynotetype="buble1"] .buble_Title:before, .cke_editable #Note[data-yhbook-visible="title"][data-mynotetype="buble1"] .buble_Title:before { content: 'YH Book Context View'; position: absolute; top: -37px; left: 0px; background: #d65757; color: white; border-radius: 2px; width: 125px; text-align: center; font: 400 12px "Open Sans"; } /* content view only */ .cke_editable #Note[data-yhbook-visible="content"][data-mynotetype="postit"] .buble_Content:before, .cke_editable #Note[data-yhbook-visible="content"][data-mynotetype="Stackpaper"] .buble_Content:before, .cke_editable #Note[data-yhbook-visible="content"][data-mynotetype="buble1"] .buble_Content:before { content: 'YH Book Context View'; position: absolute; top: -54px; left: -25px; background: #d65757; color: white; border-radius: 2px; width: 125px; text-align: center; font: 400 12px "Open Sans"; } /* small adjustments by type*/ .cke_editable #Note[data-yhbook-visible="content"][data-mynotetype="buble1"].Left .buble_Content:before { top: -51px !important; left: -18px !important; } .cke_editable #Note[data-yhbook-visible="content"][data-mynotetype="buble1"].Right .buble_Content:before { top: -51px !important; left: -25px !important; } .cke_editable #Note[data-yhbook-visible][data-mynotetype="postit"] .buble_Content:before { top: -66px !important; } /* #endregion */ /* student view context */ [data-yhbook-visible] { display: none; } /* authoring context */ .cke_editable [data-yhbook-visible] { display: inherit; } /* #endregion */ /* #region Dynalink */ span.dynalink { position: absolute; margin: 0 auto !important; font-size: 14px; text-align: center; color: #1f1d20; background-color: #e1e8e7; z-index: 9999; width: 250px; height: 30px; padding-top: 10px; border-radius: 5px; cursor: pointer; } /* #endregion */ /* #region Precision Plugin - new def experimental */ .precision_grid .cke_editable::before { content: ''; pointer-events: none; position: absolute; top: 0; right: 5px; bottom: 0; left: 0; min-height: 355px; background: transparent url(../images/Controls/grid_50.png) repeat; z-index: 9999999999999999; margin: 0px -25px 0px -25px; } /* #endregion */ /* #region Image2 Dialog */ .btn_image2_browse_server { margin-top: 19px !important; } /* advanced settings preview node */ .image-preview-ghost-container { position: absolute; top: 0px; left: 101%; background-color: white; box-shadow: 0 0 3px rgba(0,0,0,.50); } .image-preview-ghost-container:before { content: 'Preview'; position: absolute; top: 0px; left: 0px; color: #383838; font-weight: 600; background-color: rgba(255, 255, 255, 0.7); padding: 2px 5px 2px 5px; z-index: 1; } .image-preview-ghost-figure { margin: 0px; } .image-preview-ghost-figure-off { display: unset; } .image-preview-ghost { display: block; } /* color ddl/buttons - the buttons that open the color galleries */ #slider-border-image2 { float: left; } #border-color-gallery-input-image2 { position: relative; top: -12px; left: 12px; margin-bottom: -20px; } #caption-color-gallery-input-image2 { margin-left: 3px; position: relative; top: -2px; } #box-shadow-color-gallery-input-image2 { margin-left: 3px; position: relative; top: 13px; } /* color gallery table pos */ table.border-color-gallery-image2, table.box-shadow-color-gallery-image2, table.caption-color-gallery-image2 { top: 37%; left: 9px; } /* spectrum positioning */ .border-color-gallery-image2-spectrum + .sp-container, .box-shadow-color-gallery-image2-spectrum + .sp-container, .caption-color-gallery-image2-spectrum + .sp-container { top: 30%; left: 125px; } /* slider adjustments */ #slider-border-radius-image2 { width: 381px; } /* switch button for caption - container */ .cbImage2CaptionContainer { padding: 1px; font-size: 14px; font-weight: 400; color: #555; text-align: center; float: left; width: 55px; margin-bottom: 5px; } /* advanced section containers - organize various controls into grid-like structure */ .image2-dialog-container { content: ''; display: table; clear: both; } .image2-dialog-container-column { float: left; width: 47%; margin-right: 11px !important; } .image2-dialog-container-column-bs-color { float: left; width: 100%; margin-bottom: 14px !important; } .image2-dialog-container-column-border { width: 100%; } /* heading/dividers in the image2 dialog */ .header-divide { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .header-divide > span { position: relative; display: inline-block; font-weight: 600; margin: 8px 0px 8px 0px; cursor: help; } .header-divide > span:before, .header-divide > span:after { content: ""; position: absolute; top: 50%; width: 343px; height: 1px; background: #dedede; } .header-divide > span:before { right: 100%; margin-right: 15px; } .header-divide > span:after { left: 100%; margin-left: 15px; } .header-divide.box-shadow-header-divide > span:after { width: 315px; } .header-divide.image-spacing-header-divide > span:after { width: 300px; } .header-divide.image-rounding-header-divide > span:after { width: 290px; } /* mask for when a color gallery is open */ .dont-disable, .dont-disable ~ [class*="spectrum"], .dont-disable ~ .sp-container { pointer-events: all !important; z-index: 3; } /* #endregion */ /* #region CkEditor Toolbar - Special - Custom Preview, Custom Precesion and Custom Background toolbar items */ .cke_button__custom_precision, .cke_button__custom_background, .cke_button__custom_preview, .cke_button__custom_pagesettings { border: 1px solid #e9e9e9 !important; } /* #endregion */ /* #region Quicktool Preselection - driven by this css instead of js now - */ /* #region Freedrag */ /* style the button as 'enabled' when freedrag is on */ [data-free-drag="on_absolute"] > .widget-quick-tools > [quick-tools-free-drag-toggle="off"], [data-free-drag-enabled="true"] [quick-tools-free-drag-toggle] { background-color: #D0D0D0; } /* hide alignment buttons when freedrag is on */ [data-free-drag-enabled="true"] span[quick-tools-justify], [data-free-drag="on_absolute"] > .widget-quick-tools > span[quick-tools-justify], [data-free-drag="on_absolute"] + .cke_widget_drag_handler_container { display: none !important; } /* hide the free drag handle by default */ .free-drag-handle { display: none !important; } /* only expose the free drag handle when these attributes are set to the parent */ [data-free-drag="on_absolute"] > .free-drag-handle, [data-free-drag-enabled="true"] .free-drag-handle { display: block !important; } /* #endregion */ /* #region Alignment */ /* alignment - notes and media */ [data-mydirection="Left"] > .widget-quick-tools > span[quick-tools-justify="Left"], [data-mydirection="Center"] > .widget-quick-tools > span[quick-tools-justify="Center"], [data-mydirection="Right"] > .widget-quick-tools > span[quick-tools-justify="Right"], [data-mydirection="noalign"] > .widget-quick-tools > span[quick-tools-justify="noalign"], [data-mydirection="jAudioPushUp"] > .widget-quick-tools > span[quick-tools-justify="jAudioPushUp"], /* alignment - image 2 */ [data-image-align="left"] > .widget-quick-tools > span[quick-tools-justify="Left"], [data-image-align="center"] > .widget-quick-tools > span[quick-tools-justify="Center"], [data-image-align="right"] > .widget-quick-tools > span[quick-tools-justify="Right"], [data-image-align="none"] > .widget-quick-tools > span[quick-tools-justify="noalign"], /* alignment - interactions, template, shapes */ [data-align="left"] > .widget-quick-tools > span[quick-tools-justify="Left"], [data-align="center"] > .widget-quick-tools > span[quick-tools-justify="Center"], [data-align="right"] > .widget-quick-tools > span[quick-tools-justify="Right"], [data-align="noalign"] > .widget-quick-tools > span[quick-tools-justify="noalign"] { background-color: #D0D0D0; border: 1px solid #CCC !important; cursor: pointer; } /* alignment - notes - disable center align option for these note types */ [data-mynotetype="buble1"] > .widget-quick-tools > span[quick-tools-justify="Center"], [data-mynotetype="postit"] > .widget-quick-tools > span[quick-tools-justify="Center"], [data-mynotetype="sidebanner"] > .widget-quick-tools > span[quick-tools-justify="Center"] { display: none; } /* alignment - media - hide pushup option for video widget variants and in course builder context */ .videoWidget [quick-tools-justify="jAudioPushUp"], #cke_txtCourseBuilderContents [quick-tools-justify="jAudioPushUp"] { display: none; } /* #endregion */ /* #region Toggle parts for notes */ [data-parts="both"] > .widget-quick-tools > span[quick-tools-parts-toggle] span { background: url(/images/cycle_colorednote_parts.png) no-repeat top left; width: 16px; height: 16px; background-position: 0 0 !important; } [data-parts="title"] > .widget-quick-tools > span[quick-tools-parts-toggle] span { background: url(/images/cycle_colorednote_parts.png) no-repeat top left; width: 16px; height: 16px; background-position: 0 -42px !important; } [data-parts="content"] > .widget-quick-tools > span[quick-tools-parts-toggle] span { background: url(/images/cycle_colorednote_parts.png) no-repeat top left; width: 16px; height: 16px; background-position: 0 -21px !important; } /* #endregion */ /* #region Autoplay - media */ [data-autoplay="true"] > .widget-quick-tools > span[quick-tools-autoplay] { background-color: darkseagreen; } /* #endregion */ /* #region RTP - media */ .media_embed.NotPlayedYet > .widget-quick-tools > span[quick-tools-rtp] { background-color: orange; } /* #endregion */ /* #region Slide banner - tilt */ [data-slide-banner-tilt="off"] > .widget-quick-tools > span[quick-tools-toggle] > span { background: url(/images/cycle_slide_banner_tilt_v2.png) no-repeat top left; width: 16px; height: 16px; background-position: 0 0 !important; } [data-slide-banner-tilt="on"] > .widget-quick-tools > span[quick-tools-toggle] > span { background: url(/images/cycle_slide_banner_tilt_v2.png) no-repeat top left; width: 16px; height: 16px; background-position: 0 -17px !important; } /* #endregion */ /* #endregion */ /* #region Ck widget draghandles - only expose one at a time */ .cke_widget_drag_handler_container { display: none !important; } .WrapperCustom_Imagetagg:hover > .PictureInteraction + .cke_widget_drag_handler_container, .widget_engaged:not([data-free-drag="on_absolute"]):not(.slider-interaction-thumbnail) ~ .cke_widget_drag_handler_container { display: block !important; } /* #endregion */ /* #region Custom Table of Contents */ .widget-toc { display: table; border: 1px solid #cbcbcb; background-color: #fcfcfc; padding: 0px 10px 0px 0px; font-size: 95%; } .widget-toc ol { padding: 0px 0px 0px 12px; /*counter-reset: item;*/ } .widget-toc ol li { display: block; position: relative; } /*.widget-toc ol li:not(.toc-item-disabled):before { content: counters(item, "."); counter-increment: item; position: absolute; margin-right: 100%; right: 0.5rem; }*/ .toc-item { font-style: normal; color: #0008C8; text-decoration: underline; cursor: pointer; user-select: none; } .toc-title { text-align: left; font-weight: 700 !important; margin: 6px; padding: 0px; user-select: none; } .toc-control { position: absolute; background-color: #f7f7f7; cursor: pointer; width: 23px; } .toc-control-button.removeContent { background-image: url(../images/Controls/false.png); background-repeat: no-repeat; background-size: 10px; background-position-y: 4px; background-position-x: 5px; } .toc-item-disabled > .toc-item > .toc-control > .toc-control-button.removeContent { background-image: url(../images/Controls/plus_Thumb.png) !important; } .toc-control-button { padding-right: 21px; border: 1px solid rgba(189, 179, 179, 0.6509803921568628); } .toc-item-disabled > span.toc-item { display: none; } .cke .toc-item-disabled > span.toc-item { display: block; text-decoration: line-through; } /* #endregion */ /* #region Override Ckeditor Anchor (flag) css */ .cke_editable.cke_contents_ltr a[name], .cke_editable.cke_contents_ltr a[data-cke-saved-name] { background: inherit !important; border: inherit !important; background-size: inherit !important; padding-left: inherit !important; cursor: pointer !important; } /* #endregion */ /* #region Rtp 2.0 */ /* rtp targets - visuals are set to 1s for demo purposes */ .rtp_enable_visual_queue .ui-tabs-tab.NotPlayedYet { animation: rtpVisualQueueBounce 1.5s 1s linear infinite; } .rtp_enable_visual_queue .wheel.NotPlayedYet > [data-wheel-interaction-text], .rtp_enable_visual_queue [class*="flashDeckCard"].NotPlayedYet { animation: rtpVisualQueueGlowOutset 1.5s 1s linear infinite; } /* generic visual queue classes */ .rtp_enable_visual_queue .rtp_visual_queue_bounce_glow_outset { animation: rtpVisualQueueBounceGlowOutset 1.5s 1s linear infinite; } .rtp_enable_visual_queue .rtp_visual_queue_bounce_glow_inset { animation: rtpVisualQueueBounceGlowInset 1.5s 1s linear infinite; } .rtp_enable_visual_queue .rtp_visual_queue_bounce { animation: rtpVisualQueueBounce 1.5s 1s linear infinite; } .rtp_enable_visual_queue .rtp_visual_queue_glow_outset { animation: rtpVisualQueueGlowOutset 1.5s 1s linear infinite; } .rtp_enable_visual_queue .rtp_visual_queue_glow_inset { animation: rtpVisualQueueGlowInset 1.5s 1s linear infinite; } .rtp_enable_visual_queue .rtp_visual_queue_glow_inset_steps { animation: rtpVisualQueueGlowInsetSteps 1.5s 1s linear infinite; } /* slider tiles need this in order for the animation to work */ .rtp_visual_queue_bounce_glow_outset[data-slider-interaction-widget-live-tile] { position: relative; } /* disable the visual queue on hovering parent */ .rtp_enable_visual_queue .ui-tabs:hover .ui-tabs-tab.NotPlayedYet, .rtp_enable_visual_queue .interaction-wrapper-wheel:hover .wheel.NotPlayedYet > [data-wheel-interaction-text], .rtp_enable_visual_queue .slider-interaction-widget:hover .cd-slider > li > [class*=rtp_visual_queue], .rtp_enable_visual_queue .flashDeck:hover [class*="flashDeckCard"].NotPlayedYet { animation: none; } /* visual queue animation definitions (extend to multiple variants as needed) */ @-webkit-keyframes rtpVisualQueueBounceGlowOutset { 0% { bottom: 0px; box-shadow: 0px 0px 0px 0px #ffa53896; } 50% { bottom: -5px; box-shadow: 0px 0px 8px 4px #ffa53896; } 100% { bottom: 0px; box-shadow: 0px 0px 0px 0px #ffa53896; } } @-webkit-keyframes rtpVisualQueueBounceGlowInset { 0% { bottom: 0px; box-shadow: inset 0px 0px 0px 0px #ffa53896; } 50% { bottom: -5px; box-shadow: inset 0px 0px 8px 4px #ffa53896; } 100% { bottom: 0px; box-shadow: inset 0px 0px 0px 0px #ffa53896; } } @-webkit-keyframes rtpVisualQueueBounce { 0% { bottom: 0px; } 50% { bottom: -5px; } 100% { bottom: 0px; } } @-webkit-keyframes rtpVisualQueueGlowOutset { 0% { box-shadow: 0px 0px 0px 0px #ffa53896; } 50% { box-shadow: 0px 0px 8px 4px #ffa53896; } 100% { box-shadow: 0px 0px 0px 0px #ffa53896; } } @-webkit-keyframes rtpVisualQueueGlowInset { 0% { box-shadow: inset 0px 0px 0px 0px #ffa53896; } 50% { box-shadow: inset 0px 0px 8px 4px #ffa53896; } 100% { box-shadow: inset 0px 0px 0px 0px #ffa53896; } } @-webkit-keyframes rtpVisualQueueGlowInsetSteps { 0% { bottom: 0px; box-shadow: inset 0px 0px 0px 0px #fdfbf996; } 50% { bottom: -5px; box-shadow: inset 0 0 10px 12px #fdfbf996; } 100% { bottom: 0px; box-shadow: inset 0px 0px 0px 0px #fdfbf996; } } /* #endregion */ /* #region Favorite System for Content Selection Galleries */ /* grid inside the modal */ .user_content_favorite_grid { width: 500px; } .favorites_gallery_drag_handle.ui-draggable-handle { position: absolute; width: 466px; height: 44px; cursor: move; top: -9px; left: -10px; } .user_content_favorite_grid_row:not(.header) { border: 1px solid #cccccc75; line-height: 25px; padding-left: 15px; height: 24px; margin: 5px 0 1px 0px; } .user_content_favorite_grid_row:not(.header):hover { cursor: pointer; border: 1px solid #dedede; background-color: #eee; } .page-selection-gallery [data-item-id] button { background: transparent; cursor: pointer; } .page-selection-gallery [data-item-id]:hover { cursor: pointer; background-color: #eee !important; } /* content titles, handle overflow for long titles */ .user_content_favorite_grid_row_name, .user_content_favorite_grid_row.header h4 { display: inline-block; width: 390px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } /* set favorites controls */ .add_favorite[class*="icomoon-star"] { padding-top: 3px; padding-bottom: 5px; float: left; background-color: transparent !important; border: none; cursor: pointer; } .user_content_favorite_grid_row .add_favorite[class*="icomoon-star"] { float: right; } .page-selection-gallery-page .add_favorite { float: right; padding: 2px 10px 0px 10px; } .add_favorite.icomoon-star-full { color: goldenrod !important; } /* misc */ .user_content_favorite_grid_row.header { border-radius: 0 9px 0 0; padding: 3px 0 0 5px; height: 25px; margin-top: 14px; border: 1px solid #dedede; background-color: #F9F9F9; } .user_content_favorite_grid_row.header h4 { margin: 2px; } .user_content_favorite_grid_row .btn-group { margin-top: -2px; } /* #endregion */ /* #region Author Helper */ .author_helper_wrapper { position: fixed; top: 303px; background-color: #ffffff; border-top-width: 8px !important; border-top-color: #3b95c4 !important; border-top-style: solid !important; border: 1px solid #c3c3c3; cursor: default; z-index: 99999; height: 600px; width: 335px; margin-left: 1132px; padding: 5px; transition: height .27s, width.3s,padding .3s, background-color .4s; border-radius: 0 0 3px 3px; } .author_helper_grid { overflow-y: auto; overflow-x: hidden; height: 437px; width: 335px; } .author_helper_grid_drag_handle.ui-draggable-handle { position: absolute; width: 466px; height: 44px; cursor: move; top: -9px; left: -10px; } .ah_yardi_help_link { float: right; margin-right: 10px; margin-top: 1px; } .ah_yardi_help_link span { font-size: 21px !important; color: #ccc !important; } .authoring_helper_dock .ah_yardi_help_link { display: none; } /* header */ .author_helper_main_header { padding: 10px 0px 5px 27px; cursor: move; margin: 0px; color: #686a68; } .author_helper_grid_row.header { padding: 3px 0 0 5px; height: 25px; border: 1px solid #dedede; background-color: #F9F9F9; width: 328px; /*hardcoded for Transition*/ } .author_helper_grid_row.header input { top: -3px; left: 3px; margin-right: 13px; cursor: pointer; } .author_helper_grid_row.header h4 { margin: 2px; margin-left: 4px; } /* rows */ .author_helper_grid_row:not(.header) { position: relative; border: 1px solid rgba(204, 204, 204, 0.4588235294117647); line-height: 23px; padding-left: 15px; padding-bottom: 1px; height: 23px; margin: 5px 0 1px 0px; transition: background-color 250ms linear; } .author_helper_grid_row:not(.header):hover, .author_helper_grid_row:not(.header):hover p { cursor: pointer; border: 1px solid #dedede; background-color: #dedede; } .author_helper_grid_row p { position: relative; display: block; background-color: #fff; z-index: 1; padding-right: inherit; top: 0; margin-top: 0; margin-bottom: 0; padding-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .author_helper_grid_row .horizontal_treeline { top: 12px; } /* no items available message */ .author_helper_no_items_available .author_helper_grid:before { content: 'No Items Available'; font-size: 16px; font-weight: 600; position: relative; display: block; width: 100%; text-align: center; top: 40px; } /* node name, header, handle text overflow for long text */ .author_helper_grid_row_name, .author_helper_grid_row.header h4 { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: 600; font-size: 12px; } input.author_helper_type_input { border: none; outline: none; position: relative; } .author_helper_grid_row_name { width: 49%; } .author_helper_header_elements { width: 140px; cursor: help } .author_helper_header_order { cursor: help; } /* controls */ /* top controls container */ [class*="_top_controls"] { height: 90px; width: 331px; } /* bulk actions */ .author_helper_wrapper .UserActions, .sg_wrapper .UserActions { float: right; /* margin-right: 14px; */ text-align: center; } .author_helper_wrapper .UserActions ul.DisabledLink, .sg_wrapper .UserActions ul.DisabledLink { background-color: #ccc; } .author_helper_wrapper .UserActions .author_helper_bulk_actions_button_title, .sg_wrapper .UserActions .sg_bulk_title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0px 5px 0px 5px; display: block; width: 137px; } [class*="_bulk_actions_button_title"]:after { display: inline-block; width: 0; height: 0; vertical-align: middle; margin-left: 3px; border-top: 4px solid #fff; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; } [class*="_top_controls"] .UserActions li { width: 142px !important; } [class*="_top_controls"] .UserActions .drop-menu li { text-align: left; padding-left: 8px; width: 134px; line-height: 25px; font-size: 12px; width: 134px !important; } .disable_bulk_color.action_color, .disable_ah_draggable_section { color: rgba(255, 255, 255, 0.42); } /* the filter ddl */ .author_helper_filter { width: 175px; cursor: pointer; margin-top: 6px; margin-left: 0px; height: 35px; } .author_helper_filter option { } /* css set by changing types in the filter ddl that drives visibility in the grid */ .author_helper_grid_row:not(.header) { display: none; } .author_helper_grid_show_all .author_helper_grid_row:not([data-element-base-type="styles"]), .author_helper_grid_show_animated .author_helper_grid_row:not([data-delayanimation="none"]), .author_helper_grid_show_animated .author_helper_grid_row:not([data-click-animation="none"]), .author_helper_grid_show_widgets .author_helper_grid_row[data-iswidget="true"]:not([data-element-type="Image"]):not([data-isinteraction="true"]), .author_helper_grid_show_formelements .author_helper_grid_row[data-element-type*="Form Element"], .author_helper_grid_show_interactions .author_helper_grid_row[data-isinteraction="true"], .author_helper_grid_show_links .author_helper_grid_row[data-element-type="Link"], .author_helper_grid_show_links .author_helper_grid_row[data-element-type="Glossary"], .author_helper_grid_show_paragraphs .author_helper_grid_row[data-element-type="Paragraph"], .author_helper_grid_show_headers .author_helper_grid_row[data-element-type="Heading"], .author_helper_grid_show_images .author_helper_grid_row[data-element-type="Image"], .author_helper_grid_show_list .author_helper_grid_row[data-element-type="List Item"], .author_helper_grid_show_table .author_helper_grid_row[data-element-type="Table"], .author_helper_grid_show_table .author_helper_grid_row[data-element-type="Table Row"], .author_helper_grid_show_table .author_helper_grid_row[data-element-type="Table Cell"], .author_helper_grid_show_freedrag .author_helper_grid_row[data-isfreedrag="true"], .author_helper_grid_show_colorable .author_helper_grid_row[data-bulk-color="true"], .author_helper_grid_show_customid .author_helper_grid_row[data-is-cust-identifier="true"], .author_helper_grid_show_styles .author_helper_grid_row, .author_helper_grid_show_hidden_only .hidden_element, .author_helper_grid_show_sg_elements [data-is-sg-element="true"] { display: block; } /* todo: combine this block and the above into one, didn't have time to redefine class names to more generic when i wrote game maker, s.g.*/ /* css set by changing types in the filter ddl that drives visibility in the grid */ .sg_el_grid .sg_row { display: none; } .sg_grid_show_all .sg_el_grid .sg_row:not([data-element-base-type="styles"]), .sg_grid_show_animated .sg_el_grid .sg_row:not([data-delayanimation="none"]), .sg_grid_show_animated .sg_el_grid .sg_row:not([data-click-animation="none"]), .sg_grid_show_widgets .sg_el_grid .sg_row[data-iswidget="true"]:not([data-element-type="Image"]):not([data-isinteraction="true"]), .sg_grid_show_formelements .sg_el_grid .sg_row[data-element-type*="Form Element"], .sg_grid_show_interactions .sg_el_grid .sg_row[data-isinteraction="true"], .sg_grid_show_links .sg_el_grid .sg_row[data-element-type="Link"], .sg_grid_show_links .sg_el_grid .sg_row[data-element-type="Glossary"], .sg_grid_show_paragraphs .sg_el_grid .sg_row[data-element-type="Paragraph"], .sg_grid_show_headers .sg_el_grid .sg_row[data-element-type="Heading"], .sg_grid_show_images .sg_el_grid .sg_row[data-element-type="Image"], .sg_grid_show_list .sg_el_grid .sg_row[data-element-type="List Item"], .sg_grid_show_table .sg_el_grid .sg_row[data-element-type="Table"], .sg_grid_show_table .sg_el_grid .sg_row[data-element-type="Table Row"], .sg_grid_show_table .sg_el_grid .sg_row[data-element-type="Table Cell"], .sg_grid_show_freedrag .sg_el_grid .sg_row[data-isfreedrag="true"], .sg_grid_show_colorable .sg_el_grid .sg_row[data-bulk-color="true"], .sg_grid_show_customid .sg_el_grid .sg_row[data-is-cust-identifier="true"], .grid_filter_inputs [data-element-base-type="inputs"], .sg_grid_show_styles .sg_el_grid .sg_row, .sg_grid_show_hidden_only .hidden_element, .sg_grid_show_sg_elements [data-is-sg-element="true"] { display: block; } /* buttons */ .author_helper_grid button { background: transparent; cursor: pointer; } .toggle_visible, .jump_to_node { float: right; padding: 2px 8px 0px 8px !important; } .disable_eyeball .toggle_visible { display: none; } .author_helper_grid_row .btn-group { margin-top: -2px; } .icomoon-eye-blocked + .jump_to_node { opacity: .5 !important; background: #ccc; pointer-events: none; } /* checkbox */ .author_helper_grid .cbox { top: -5px; left: -7px; cursor: pointer; } /* toggle visible entity */ [data-visible-hidden="true"] { visibility: hidden !important; opacity: 0 !important; } [data-visible-hidden="true"] * { visibility: hidden !important; opacity: 0 !important; } .author_helper_wrapper * { user-select: none !important; } /* disabled author helper on toggling into source mode */ .author_helper_wrapper.disabled { pointer-events: none; } .author_helper_wrapper.disabled { display: none; } /*.author_helper_wrapper.disabled:before { content: ' '; width: 100%; height: 100%; position: absolute; background-color: white; z-index: 9999; opacity: .5; pointer-events: none; }*/ /* individual selection order labels !*/ .author_helper_wrapper [data-selection-order]:after { content: attr(data-selection-order); color: #444; position: relative; float: right; left: 0; width: 40px; overflow: hidden; text-overflow: ellipsis; border: 1px solid #dedede; border-radius: 3px 0 0 3px; padding-left: 3px; top: -1px; } /* maximized view */ .maximized_view.author_helper_wrapper:not(.popout) { right: 17px; } /* docking feature */ .authoring_helper_dock_node { cursor: pointer; padding-top: 9px; font-size: 18px; position: absolute; padding-bottom: 5px; left: 7px; content: '\ed5f'; font-family: 'icomoon_EL' !important; speak: none; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: #686a68; } .authoring_helper_dock:hover { background-color: #f9fdf1; /* border: 1px solid #e5e9d7; */ } span.authoring_helper_dock_node:after { content: '\ed60'; } .authoring_helper_dock .authoring_helper_dock_node:after { content: '\ed5f'; } .authoring_helper_dock { width: 143px; height: 26px; padding: 2px 10px 10px 3px; overflow: hidden; } .authoring_helper_dock .author_helper_draghandle { opacity: 0; transition: opacity 0s } .author_helper_draghandle { font-family: 'icomoon_EL' !important; speak: none; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; right: 4px; top: 6px; word-spacing: inherit; z-index: -1; transition: opacity .3s } /*.author_helper_draghandle:before { content: '\e981'; position: absolute; right: 6px; }*/ .author_helper_draghandle:after { content: '\e981'; } .authoring_helper_dock input, .authoring_helper_dock select { display: none; } /* prevent tabbing into these inputs when docked!!!!! */ /*authoring helper pinned*/ .authoring_helper_pin { width: 40px; height: 20px; display: flex; cursor: pointer; font-size: 14px; position: absolute; right: 47px; content: '\ed5f'; font-family: 'icomoon_EL' !important; speak: none; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; color: #686a68; justify-content: center; align-items: center; border: 1px solid #e6e6e6c7; } .authoring_helper_pin:hover { background-color: rgb(219, 219, 219); border: 1px solid rgb(219, 219, 219); } .authoring_helper_pin:after { content: '\ea37'; } .authoring_helper_dock .authoring_helper_pin { display: none; } .authoring_helper_pinned .authoring_helper_pin { background-color: #e4e4e4; border-radius: 3px; } .authoring_helper_pinned.authoring_helper_dock .authoring_helper_pin { padding: 1px; top: -2px; height: 14px; } .authoring_helper_dock.authoring_helper_pinned .authoring_helper_pin { display: flex; right: 0px; justify-content: center; align-items: center; } /* icon by element type */ [class*="_row"] .jump_to_node { background-position: 8px 3px !important; background-size: 16px; background-repeat: no-repeat; width: 16px; height: 20px; filter: grayscale(.75); opacity: .9; } [class*="_row"][data-iswidget="true"] .jump_to_node { background-image: url('/images/AuthorHelper/mergefield.png'); } [class*="_row"][data-element-type="Media"] .jump_to_node { background-image: url('/images/AuthorHelper/media.gif'); } [class*="_row"][data-element-base-type="tables"] .jump_to_node { background-image: url(/images/AuthorHelper/table.png); background-position: 6px 3px !important; background-size: 20px; } [class*="_row"][data-isinteraction="true"] .jump_to_node { background-image: url('/images/AuthorHelper/interaction.png'); } [class*="_row"][data-element-type="Image"] .jump_to_node { background-image: url('/images/AuthorHelper/image.png'); background-position: 7px 2px !important; background-size: 19px; } [class*="_row"][data-element-type="Link"] .jump_to_node { background-image: url('/images/AuthorHelper/Custom_Links.png'); } [class*="_row"][data-element-type="Color Note"] .jump_to_node { background-image: url('/images/AuthorHelper/Custom_ColoredNote.png'); } [class*="_row"][data-element-type="Custom Shape"] .jump_to_node { background-image: url('/images/AuthorHelper/Custom_Shapes.png'); } [class*="_row"][data-element-type="Graphic Wrapper"] .jump_to_node { background-image: url('/images/AuthorHelper/Custom_Shapes.png'); } [class*="_row"][data-element-type="Picture Interaction"] .jump_to_node { background-image: url('/images/AuthorHelper/Custom_Imagetagg.png'); } [class*="_row"][data-element-type="Template"] .jump_to_node { background-image: url('/images/AuthorHelper/Custom_Templates.png'); } [class*="_row"][data-element-type="List Item"] .jump_to_node { background-image: url('/images/AuthorHelper/bullets.png'); background-position: 3px -1px !important; background-size: 26px; opacity: .7; } [class*="_row"][data-element-type="Paragraph"] .jump_to_node::after { content: '¶'; padding-left: 4px; } [class*="_row"][data-element-type="Heading"] .jump_to_node { background-image: url('/images/AuthorHelper/heading.png'); background-size: 18px; background-position: 7px 1px !important; opacity: 1 !important; } [class*="_row"][data-element-type="Bold"] .jump_to_node { background-image: url('/images/AuthorHelper/strong.png'); background-size: 18px; background-position: 7px 3px !important; opacity: 1 !important; } [class*="_row"][data-element-type="Glossary"] .jump_to_node { background-image: url('/images/AuthorHelper/glossary.png'); } [class*="_row"][data-element-base-type="styles"] .jump_to_node { background-image: url('/images/AuthorHelper/styletag.png'); background-size: 18px; background-position: 7px 3px !important; opacity: 1 !important; } [class*="_row"][data-element-type*="Form Element: Textfield"] .jump_to_node { background-image: url('/images/AuthorHelper/textfield.png'); } [class*="_row"][data-element-type*="Form Element: Textarea"] .jump_to_node { background-image: url('/images/AuthorHelper/textarea.png'); } [class*="_row"][data-element-type*="Form Element: Checkbox"] .jump_to_node { background-image: url('/images/AuthorHelper/checkbox.png'); } [class*="_row"][data-element-type*="Form Element: Radio"] .jump_to_node { background-image: url('/images/AuthorHelper/radio.png'); } [class*="_row"][data-element-type*="Form Element: Select"] .jump_to_node { background-image: url('/images/AuthorHelper/select.png'); } [class*="_row"][data-element-type*="Form Element: Button"] .jump_to_node { background-image: url('/images/AuthorHelper/button.png'); } .eagleeye_control { display: none !important; } .author_helper_grid_show_freedrag [data-isfreedrag="true"] .drag_state_box::before { content: attr(data-zindex); position: absolute; left: 129px; color: white !important; font-size: 10px; font-weight: 600; z-index: 2; padding: 0px 5px 0px 28px; background-image: url(/images/controls/stackon.png); background-repeat: no-repeat; background-size: 22px; background-position-x: 3px; height: 23px; background-color: #6fb4b7; width: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .author_helper_grid_show_freedrag [data-isfreedrag="true"][data-stacklock="true"] .drag_state_box::before { background-image: url(/images/controls/stackoff.png); } .hide_drag_state_box .drag_state_box { display: none; } .nested_element { transition: background-color .5s ease; } .highlight_nested_element { background-color: #c3e6ee !important; } .highlight_nested_element:hover { background-color: #a2cad4 !important; } .highlight_target { background-color: #FFFDE6 !important; } /*pulse target found with autofind via the helper*/ .pulse_target_helper { opacity: 1; animation-iteration-count: 3 !important; -webkit-animation-name: pulse_target_helper !important; animation-name: pulse_target_helper !important; -webkit-animation-duration: 1s !important; animation-duration: 1s !important; box-shadow: 0 0 4px 1px #f502ff !important; } @-webkit-keyframes pulse_target_helper { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.075, 1.075, 1.075); transform: scale3d(1.075, 1.075, 1.075); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse_target_helper { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.075, 1.075, 1.075); transform: scale3d(1.075, 1.075, 1.075); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } /*highlight row in grid*/ .author_helper_found_target { background-color: #cee6f1 !important; opacity: 1; animation-iteration-count: 1 !important; -webkit-animation-name: author_helper_found_target !important; animation-name: author_helper_found_target !important; -webkit-animation-duration: 1s !important; animation-duration: 1s !important; } @-webkit-keyframes author_helper_found_target { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.02, 1.02, 1.02); transform: scale3d(1.02, 1.02, 1.02); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes author_helper_found_target { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.02, 1.02, 1.02); transform: scale3d(1.02, 1.02, 1.02); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } /*remove animations visual queue*/ .rmv_animation_visual_queue { animation: rmv_animation_visual_queue .2s linear infinite; } @keyframes rmv_animation_visual_queue { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; } } /* #endregion */ /* #region Templates - Prefab Templates Selection Modals */ /* tag and search system for custom prefab templates */ .templates_search_controls #txtYhelpSearch { width: 300px; margin-bottom: 15px; } .templates_search_controls .input-group-addon { width: 56px; top: 2px; position: relative; } .templates_search_controls .select-tag-editbox { width: 389px; } .templates_search_controls a.btnYHsearch { position: relative; left: -35px; } /* hidden visibility */ .yh_selection_gallery[data-context="template"] .section_select_entry, /* section selection not allowed in the grid for custom templates */ .template_prefab_selection_gallery .section_select_entry, /* section selection not allowed in the template prefab grid */ .template_prefab_selection_gallery .yh_section_controls, /* only show section controls in templates prefab selection grid when in template editing interface */ .template_prefab_selection_gallery .add_entry, /* hide add entry option in templates prefab selection grid (its only exposed in the editing environments for template authors) */ .yh_selection_gallery option[data-istemplate="1"] /* template books don't belong in the article selection gallery */ { display: none; } /* new adjustments to the yh article and course page gallery */ .page_selection_gallery * { user-select: none; } .page_selection_gallery + #PagePreviewModal a.close { position: absolute; background: #fff; padding: 10px; right: -20px; top: -20px; border: 2px solid #757575; box-shadow: 2px 4px 9px -3px #292929; } .page_selection_gallery + #PagePreviewModal .modal-dialog { padding: 0px !important } /* no user selection on gallery items */ .modal .article_name_container { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 60% !important; display: inline-block; margin-left: 15px; line-height: 20px; top: 4px; position: relative; } .btn_yh_grid_expando_controls { color: #525252 !important; font-size: 13px !important; padding: 9px 9px 9px 13px; } /* yh articles grid collapse button */ .page-selection-gallery-gridview li[data-item-id] .add_favorite { padding-top: 6px; font-size: 19px; } .page-selection-gallery-gridview #YHSortable2-webserv .btn-group { margin-top: 0px; margin-right: 0px; } /* new search feature for ck gallery modals */ .ck_galleries_search_controls { margin-left: 10px; margin-top: 10px; margin-bottom: 10px; margin-right: 100%; } .ck_galleries_search_controls .form-input { width: 349px; } .page-selection-gallery[data-type="page"] .ck_galleries_search_controls .form-input { width: 469px; } /* thumbnail view for custom prefab templates */ .template_grid_thumbnail_view .sortable2-container .sortable2-container { clear: both; } /* sub sections in thumbnail view need to clear: both */ .template_grid_thumbnail_view .CMPageContent { position: relative; width: 100%; height: 167px; top: 0px; border-top: 1px solid rgba(204, 204, 204, 0.52); overflow: hidden; padding: 3px 3px 0px 4px; box-sizing: border-box; background: #f7f7f7; display: block; } .template_grid_thumbnail_view .innerContentpage { height: 170px; background-color: white; position: relative; } .template_grid_thumbnail_view .innerContentpage .preview { padding: 0px 2px; pointer-events: none; box-sizing: content-box; margin: 0 0 0 5px; top: 0px; left: -1px; margin-top: 6px; overflow: visible; padding-top: 0px; position: absolute; } .template_grid_thumbnail_view .innerContentpage .preview:not(.template_thumb) { width: 1011px; min-height: 551px; -webkit-transform: scale(.28); -ms-transform: scale(.28); transform: scale(0.28); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } .template_grid_thumbnail_view .innerContentpage .preview:after { content: ''; position: absolute; bottom: 0px; width: 100%; height: 10px; left: 0px; z-index: 9999; right: 71px; -webkit-box-shadow: inset 0px -4px 15px 0px rgba(255, 255, 255, 0.5); -moz-box-shadow: inset 0px -4px 15px 0px rgba(255, 255, 255, 0.5); box-shadow: inset 0px -4px 15px 0px rgba(255, 255, 255, 0.5); } .preview.template_thumb { margin-top: 1px !important; margin-left: -2px !important; } .template_grid_thumbnail_view .hoverOpacityHandle { width: 70px; } .template_grid_thumbnail_view .page-selection-gallery-gridview { overflow: hidden; overflow-y: auto; } .template_grid_thumbnail_view li[data-item-id] { width: 305px; float: left; border: 2px solid #cccccc61 !important; margin-right: 20px !important; margin-bottom: 5px !important; margin-top: 5px !important; } .btn_toggle_templates_thumbnail_view { border-top: 0px; border-right: 0px; border-color: #eee; padding: 3px 6px 2px 7px; background-color: #EFEFEF; border-radius: 3px; color: #ddd; margin-right: 16px; margin-top: 7px; cursor: pointer; } /* misc */ .template_prefab_selection_gallery .select_template_h4 { position: absolute; top: -10px; } /* header for the template prefab selection modal */ .rdl_toggle_template_fav { padding: 1px; margin-left: -1px; } /* toggle favorites only view on/off radio button */ .templates_search_controls { margin-left: -2px; } /* hide these articles (templates) in all modals except for the template prefab selection modal */ .yh_selection_gallery .sortable2-Wrapper[data-yhid="68"], /* no template items exposed in the regular yh articles selection modal */ .yh_selection_gallery .sortable2-Wrapper[data-yhid="102"], /* no template items exposed in the regular yh articles selection modal */ .yh_selection_gallery .sortable2-Wrapper[data-yhid="105"], /* no template items exposed in the regular yh articles selection modal */ .user_content_favorite_grid_row[data-content-container-id="68"][data-type="1"], /* no template items exposed in the favorites selection modal */ .user_content_favorite_grid_row[data-content-container-id="102"][data-type="1"], /* no template items exposed in the favorites selection modal */ .user_content_favorite_grid_row[data-content-container-id="105"][data-type="1"] /* no template items exposed in the favorites selection modal */ { display: none; } /* only show favorited 'templates' inside the template prefab selection modal */ .template_prefab_selection_gallery .sortable2-Wrapper[data-yhid="68"], .template_prefab_selection_gallery .sortable2-Wrapper[data-yhid="102"], .template_prefab_selection_gallery .sortable2-Wrapper[data-yhid="105"] { display: block; } .templates_search_controls { min-height: 63px; } .templates_search_controls .form-group { float: left; width: 348px; margin-right: 0; margin-top: 0; margin-left: 0; } /* replace entire page with custom template selection */ .short.replace_page { cursor: pointer; width: 100px; margin-left: 24px; } .short.replace_page:before { content: 'Replace Page'; position: absolute; left: 140px; font-size: small; font-weight: 600; margin-left: 48px; margin-top: 4px; } /* #endregion */ /* #region Diff Compare Feature for Revisions */ /* html text diff mode */ ins { background-color: #d4fcbc !important; } del { background-color: #fbb6c2 !important; color: #555 !important; } .show_deleted ins { background-color: unset !important; text-decoration: unset !important; } .show_added del { background-color: unset !important; color: unset !important; text-decoration: unset !important; } /* overlay diff mode */ .html_diff_overlay_container { width: 1012px; position: absolute; top: 5px; display: none; } .diff_mode_info { font-size: 18px; width: 975px; position: fixed; background-color: #fff; padding: 10px; padding-top: 77px; z-index: 9999; } .diff_mode_info div:not(.diff_mode_info_please) { margin-top: 15px; } .diff_mode_info_please { color: #a0c688; margin-right: 10px; font-size: 31px; } .diff_mode_arrow::before { font-family: 'icomoon_EL' !important; content: '\edd2'; color: #a0c688; transition: opacity .3s; font-size: 36px; } .diff_mode_info ~ .GenericContainer { display: none; } .revision_diff_control_panel { width: 950px; position: fixed; background-color: #fff; padding: 30px 10px 0px 0px; top: 48px; border-radius: 4px; margin-left: 0px; z-index: 999; border: 1px solid #ffffff00; } .revision_diff_control_panel::before { content: 'Select Compare Mode'; padding: 3px; border-radius: 3px; color: #828282; position: relative; left: 10px; position: absolute; left: 2px; top: 1px; } .compare_label:before { content: 'Compare'; color: #fff; background-color: #a0c688; padding: 1px; position: absolute; left: 78px; width: 71px; text-align: center; border-radius: 0px 0px 5px 5px; } .compare_against_label:before { content: 'Against'; color: #fff; background-color: #daaaaa; padding: 1px; position: absolute; left: 80px; width: 71px; text-align: center; border-radius: 0px 0px 5px 5px; } /* preview container for the other snapshot content used by both modes */ .revision_diff_control_panel, .html_diff_opacity_slider, .text_diff_controls { display: none; } .diff_mode .html_diff_overlay_container, .diff_mode .revision_diff_control_panel, .diff_mode_overlay .html_diff_opacity_slider, .diff_mode_textcompare .text_diff_controls { display: block; } .slider_html_diff_overlay { margin-top: -10px } .slider_html_diff_overlay label { font-weight: 600; margin-top: -10px } .diff_mode .modal-header { margin-bottom: 65px; } /* experimenetal diff mode */ previous_version * { background-color: #d4fcbc !important; } current_version * { background-color: #fbb6c2 !important; color: #555 !important; } previous_version:before { content: 'Previous Version'; font-weight: 600; } current_version:before { content: 'Current Version'; font-weight: 600; } .previous_version:before { content: 'Previous Version'; font-weight: 600; height: 100%; width: 100%; background-color: #84b766; position: relative; color: white; padding: 2px; border-radius: 5px; top: 2px; } .current_version:before { content: 'Current Version'; font-weight: 600; height: 100%; width: 100%; background-color: #fbb6c2; position: relative; color: white; padding: 2px; border-radius: 5px; top: 2px; } .overlay_compare_position { position: absolute !important; top: 0px; left: 15px; min-height: 350px; width: 1012px; padding-top: 0px; } /* Content Revision System, new features like revision slider */ #CHModal > .modal-dialog { background-color: white; padding: 10px; min-height: 350px; width: 1058px !important; left: 0px; margin-top: 48px; } #CHModal .Replaycontrol { right: 200px; border-radius: 0px 4px 4px 0px !important; } /* slider - generic */ .slider_container_gen, .slider_container_gen * { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; outline: none; } .slider_label_gen { font-weight: 600; } .slider_out_gen { border: 0; color: #090E08; font-weight: inherit; font-family: 'open sans'; width: 150px; } .slider_gen { display: -webkit-box; display: -ms-inline-flexbox; padding: 2px; height: 8px; width: 280px; border-radius: 2px; } .slider_gen .ui-widget-header { background: #DEDEDE !important; border-radius: 2px 0px 0px 2px; } .slider_gen .ui-slider-handle { border: 4px solid #C7C7C7; display: block; margin-top: -4px; margin-bottom: -4px; } /* slider revisions snapshot comparing */ .snapshot_slider > .slider_out_gen { width: 100%; } .snapshot_slider > .slider_gen { height: 15px; margin: 5px 0px 5px 0px; } .snapshot_slider > .slider_gen > .ui-slider-handle { border: 8px solid #C7C7C7; } .hide_ch_revert .ch_revert { display: none; } .disabled_overflow { overflow: hidden; } #CHModal .ui-slider { position: relative; text-align: left; } #CHModal .ui-slider .ui-slider-handle { position: absolute; z-index: 2; /* width: 1.2em; */ height: 1.2em; cursor: default; -ms-touch-action: none; touch-action: none; } #CHModal .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } #CHModal .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } #CHModal .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } #CHModal .ui-slider-horizontal .ui-slider-range-min { left: 0; } #CHModal .ui-slider-horizontal .ui-slider-range-max { right: 0; } /* end revision slider new */ /* #endregion */ /* #region Custom Background Modal */ .dyna_custom_backgrounds { } .fat_modal.custom_background_modal { background-color: rgb(255, 255, 255); width: 340px !important; position: relative; } .dyna_custom_backgrounds .modal-header { margin: 0 0 5px 5px; cursor: move; } .dyna_custom_backgrounds label { font-family: 'Open Sans'; font-size: 12px; font-weight: 600; user-select: none; } /* tabs for custom background plugin */ #cust_bg_tabs { background: #fff; } #cust_bg_tabs .ui-tabs-panel { min-width: 0; padding: 0; margin: 0; } #cust_bg_tabs ul { width: 100%; } #cust_bg_tabs li.ui-tabs-tab { border: 1px solid #ececec; background: #f6f6f6; width: 88px; user-select: none; padding: 0; height: 30px; line-height: 30px; border-radius: 0px; border-radius: 5px 5px 0 0; } #cust_bg_tabs li.ui-tabs-tab a { color: #858585; } .tab_solid_colors { padding: 6px 10px; } .tab_gradient_colors { padding: 6px 17px; } .tab_bganim { padding: 6px 13px; } #cust_bg_tabs li.ui-tabs-tab.ui-state-active { background-color: #cccbcb; } #cust_bg_tabs li.ui-tabs-tab.ui-state-active a { color: #fff; } #cust_bg_tabs li.ui-tabs-tab:hover { background-color: #565656; } #cust_bg_tabs li.ui-tabs-tab:hover a { color: #fff; } /* image controls */ .cust_bg_image_controls { margin-top: 0; margin-left: 10px; } .btnBgImageSrc { padding: 6px 6px 6px 6px !important; border-radius: 0 !important; position: relative; top: -1px; } .txtBgImageSrc { width: 192px; height: 30px; margin-bottom: 5px !important; background-color: #fff; border: 1px solid #c9cccf; outline: 0; -moz-box-sizing: border-box; border-radius: 0px; margin-left: 0px !important; } .cust_bgimage_pos, .cust_bgimage_repeat, .cust_bg_blending { width: 128px; margin-left: 0; } .cust_bgimage_repeat { margin-left: 4px; } /* transparency slider */ .dyna_custom_backgrounds #slider_cust_bg_opacity { width: 255px; margin-bottom: 15px; } .dyna_custom_backgrounds .slider_wrapper { margin-top: 5px; margin-bottom: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .dyna_custom_backgrounds .slider_target .ui-widget-header { background: #DEDEDE !important; border-radius: 2px 0px 0px 2px; } .dyna_custom_backgrounds .slider_output { border: 0; color: #090E08 !important; font-weight: inherit; font-family: 'open sans'; width: 40px; } .dyna_custom_backgrounds .slider_target { height: 8px !important; vertical-align: text-top !important; display: -webkit-box; display: -ms-inline-flexbox; padding: 2px 1px; width: 184px; cursor: pointer !important; } .dyna_custom_backgrounds .slider_target * { cursor: pointer !important; } .dyna_custom_backgrounds .slider_target .ui-slider-handle { display: block; border: 4px solid #C7C7C7 !important; margin-top: -4px; margin-bottom: -4px; border-radius: 0px; outline: none; } /* wraps image controls and slider */ .cust_bg_image_controls_sub { margin-bottom: 20px; display: none; } /* commit controls */ .cust_bg_commit_controls { margin-top: 10px; } .cust_bg_commit_controls a { float: left; background-color: #cccbcb; padding: 4px 15px 4px 15px; border-radius: 0px; cursor: pointer; color: white; user-select: none; } .cust_bg_commit_controls .btn_revert_cust_bg { float: right; background-color: #c28a8a; } .cust_bg_commit_controls .cancel { margin-left: 4px; } .cust_bg_commit_controls a:hover { background-color: #565656; transform: scale(1.05); } .cust_bg_commit_controls a.btn_revert_cust_bg:hover { color: #fff; } .ee_mode .btn_revert_cust_bg { display: none; } .ee_mode option[value="pan_zoom_custom"] { display: none; } /* spectrum for custom backgrounds */ .sp-container.custom_background_color_plugin { position: relative !important; width: 285px; top: 5px; } .sp-container.custom_background_color_plugin .sp-picker-container { width: 265px !important; } .sp-container.custom_background_color_plugin .sp-button-container { display: none; } .sp-container.custom_background_color_plugin .sp_elearn_colors_wrapper, .sp-container.custom_background_color_plugin .sp-cf.sp-palette-row.sp-palette-row-selection { width: 275px !important; } .sp-container.custom_background_color_plugin .sp_elearn_colors_thumb, .sp-container.custom_background_color_plugin .sp-palette-container .sp-thumb-el { margin-right: 7px !important; width: 24px !important; height: 22px !important; } .sp-container.custom_background_color_plugin .sp_elearn_colors_thumb span, .sp-container.custom_background_color_plugin .sp-palette-container .sp-thumb-el span { width: 24px !important; height: 22px !important; } .sp-container.custom_background_color_plugin .univ_and_context_colors .sp_elearn_colors_thumb { margin-right: 3px !important; } .sp-container.custom_background_color_plugin .sp_univ_colors_thumbs .sp_elearn_colors_thumb:nth-child(4) { margin-right: 32px !important; } /* grapick gradient picker */ .grapick-cont { padding: 10px 8px 0px 8px; margin-top: 17px; } .grp-wrapper { height: 45px !important; } .grapick_inputs { margin-bottom: 5px; } #sel_grad_angle, #sel_grad_type { width: 130px; margin-left: 0; } .grapick_inputs_labels_angle { margin-left: 45px; } /* adjustment for spectrum instances of grapick */ #grapick .sp-preview { margin: 0px !important; width: 15px !important; height: 15px !important; } #grapick .sp-dd { display: none; } /*special views*/ .active_tab_bganim .anim_bg_hide_control { display: none; } /*.grp-handler { border: 5px solid rgba(234, 28, 28, 0); border-top: 0; border-bottom: 0; margin-left: -5px; }*/ /*.grp-handler-drag { border-left-color: rgba(0,0,0,0.5) !important; cursor: col-resize; width: 100%; height: 100%; border: 5px solid rgba(234, 28, 28, 0); border-top: 0; border-bottom: 0; }*/ /*Added back to enhance contrast between dark and light and also widen the drag area.*/ .grp-handler { width: 7px; margin-left: -4px; user-select: none; -webkit-user-select: none; -moz-user-select: none; height: 100%; border-style: dashed; border-width: 0 2px 0 2px; border-color: #6c6c6c; } .grp-handler-close { color: rgba(104, 0, 0, .60); text-align: center; width: 15px; height: 15px; margin-left: -4px; line-height: 11px; font-size: 20px; cursor: pointer; border: 1px solid #ddd; padding: 1px 0px 0 1px; border-bottom-width: 0px; } .grp-handler-drag { background-color: rgba(0, 0, 0,.02) !important; cursor: col-resize; width: 100%; height: 100%; box-shadow: 0 0 2px 1px #fff; } /* #endregion */ /* #region Emoji */ /* emoji panel */ .cke_emoji-panel { width: 500px !important; height: 430px !important; padding-top: 39px; top: 21px !important; left: 20px !important; } .cke_emoji-panel:after { content: 'x'; font-size: 44px; position: absolute; top: -9px; right: 21px; font-family: 'open sans'; cursor: pointer } /* #endregion */ /* #region Basic Draggable nodes - not widget based freedrag */ /* using margin to drive the offset of draggable elements in multiple views */ [data-draggable-element] { position: absolute !important; } .Coursecontent [data-draggable-element] { margin-top: -17px; margin-left: 13px; } .QuestionEntry [data-draggable-element] { margin-top: -17px; margin-left: 0px; } .FAQAns [data-draggable-element] { margin-top: 7px; margin-left: 19px; } /* #endregion */ /* #region misc */ /*delay show elements, hidden by default outside authoring to prevent flashing*/ [data-delayshow]:not([data-treelevel]) { opacity: 0; } .innerContentpage [data-delayshow], .script_generator_ui [data-delayshow] { opacity: 1 !important; } .script_generator_ui .sg_disable_row[data-delayshow] { opacity: .5 !important; } .cke [data-delayshow] { opacity: 1; } .hidden { display: none } .hiddenImportant { display: none !important; } .cke_editable .hidden { display: inherit; opacity: .8; border: 1px dashed #c1c1c1; } /* this is used to force hidden elements visible in order to get their computed width!, mainly used for pre-processing of freedrag elements */ .forceVisible { visibility: visible !important; display: block !important; } .cke_dialog_container { z-index: 99998 !important; } /*custom bg adjustments against the inline styling, to help with alignment, in title on mode of page, it was 4px off from top*/ .courseContainer .Coursecontent:not(.MainYHelpContent)::before, .MainYHelpContent .MainBodyContent::before { top: 4px !important; } /* #endregion */ /* #region Codemirror */ /*toolbars, button defenitions*/ .code_editor_toolbar_header, .code_editor_toolbar_footer { background: #f2f2f2; display: flex; width: 1000px; height: 32px; } .code_editor_toolbar_button { background-color: inherit; background-repeat: no-repeat; background-size: 28px; background-position: center; width: 40px; height: 30px; border: 1px solid rgba(181,181,181,.25); cursor: pointer; background-color: white; border-radius: 2px; background-position-y: 2px; } .code_editor_toolbar_button_enabled { background-color: #ccc; } .code_editor_search { background-image: url(/images/CodeMirror/search_code_editor.png); } .code_editor_replace { background-image: url(/images/CodeMirror/replace_code_editor.png); } .code_editor_comment { background-image: url(/images/CodeMirror/comment_code_editor.png); } .code_editor_uncomment { background-image: url(/images/CodeMirror/uncomment_code_editor.png); } .code_editor_autoformat { background-image: url(/images/CodeMirror/autoformat_code_editor.png); background-size: 25px; height: 29px; width: 53px; } .code_editor_toggle_autocomplete { background-image: url(/images/CodeMirror/code_editor_toggle_autocomplete.png); } .code_editor_toggle_maximize { background-image: url(/images/CodeMirror/code_editor_toggle_maximize.png); } /*themes controls*/ .lbl_code_mirror_themes { font-family: 'Open Sans'; font-size: 13px; color: #525252; margin-left: 50px; padding-top: 5px; cursor: help; font-weight: 600; } .code_mirror_themes { width: 150px; position: relative; top: -2px; cursor: pointer; } /*revisions button*/ .code_editor_revision { border: #dbd0d0; margin-left: 821px; margin-top: 2px; } /*hover buttons on the toolbar*/ .code_editor_autoformat:hover { background-color: #fff; } .code_editor_toolbar_button:hover { background-color: #ccc; } /*search override width and height, make nicer*/ .CodeMirror-search-label + input { width: 65% !important; height: 22px; } /* #region special toolbar buttons/sizing in maximized view */ /* toolbar and buttons in maximized view */ .CodeMirror-fullscreen .code_editor_toolbar_header { width: 100%; } .CodeMirror-fullscreen .code_editor_toolbar_button { width: 3%; min-width: 25px; background-size: 28px; background-position-y: 2px; } /* autoformat for maximized view */ .code_editor_toolbar_header .code_editor_autoformat { display: none; height: 30px; } .CodeMirror-fullscreen .code_editor_toolbar_header .code_editor_autoformat { display: block; } /* revisions for maximized mode */ .code_editor_toolbar_header .code_editor_revision { display: none; float: right; } .CodeMirror-fullscreen .code_editor_toolbar_header .code_editor_revision { display: block; } /*footer in maximized view */ .code_editor_outer_wrapper.CodeMirror-fullscreen .code_editor_toolbar_footer { display: none; } /* #endregion */ /*hinting active*/ li.CodeMirror-hint-active { background: #08f !important; color: white !important; } /*fullscreen vs. regular*/ .CodeMirror-fullscreen .CodeMirror { width: 100%; height: 95% !important; overflow-y: visible; } .CodeMirror { width: 997px; height: 500px !important; border: 1px solid #ebebeb; } .cke_source + .CodeMirror:not(.CodeMirror-fullscreen) { width: 100%; height: 100% !important; } .CodeMirror-fullscreen { z-index: 12 !important; } /*ckeditor specific below*/ /*in edit mode, hide these controls on the toolbar*/ .cke_button__searchcode.cke_button_disabled, .cke_button__commentselectedrange.cke_button_disabled, .cke_button__uncommentselectedrange.cke_button_disabled { display: none; } /*code mirror source editor font/style ect*/ .CodeMirror div { font: 13px !important; font-style: normal !important; font-size: 12px !important; line-height: 1.4em !important; font-family: monospace !important; } /*intellisense z-index override so that its visible always*/ .CodeMirror-hints { z-index: 99999999 !important; } /* #endregion */ /* #region Ck and CodeMirror loading gear */ /*generic*/ .ck_loading_gear_container { position: relative; } .ck_loading_gear { display: none; position: absolute; align-items: center; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; background: rgba(117,117,117,0.24); z-index: 9999999999999999999999999; } .ck_loading_gear.processing { display: flex; } .ck_loading_gear.processing::before { position: absolute; content: 'Processing'; color: #fff; font-size: 18px; margin-top: 100px; } .ck_loading_gear > img { width: 75px; height: 75px; border-radius: 100%; } /*vimeo loading gear*/ .ck_loading_gear.ck_loading_gear_vimeo.processing { margin-top: 66px; margin-bottom: 45px; } .ck_loading_gear.ck_loading_gear_vimeo.processing::before { content: 'Loading Videos ... Please Wait'; } .cke .CodeMirror-linenumber { width: 22px !important; } .cke .CodeMirror-gutter-elt { left: 2px !important; } .cke .CodeMirror-linenumber { left: 10px !important; } /* #endregion */ /* #region Reactions (widget and modal) */ /* #region reaction widget */ .reaction_widget_container { background-color: white; position: absolute; top: 10px; right: 300px; height: 50px; } /*primary reaction widget*/ .reactions_widget { height: 37px; padding: 10px; position: absolute; top: -60px; left: 0; box-shadow: 1px 1px 2px #cccccc, -1px 0px 2px #eeeeee; border-radius: 44px 44px; display: none; background: #fff; z-index: 99999; flex-wrap: nowrap; } .reaction_widget_flex { display: flex; min-width: 288px; /*need min-width, for i.e. to work with flex*/ } .reaction_icon { cursor: pointer; width: 38px; height: 38px; opacity: 0; background-repeat: no-repeat; background-size: 100%; background-position: center center; margin: 0 10px 0 10px; } .reaction_icon_disabled { display: none; } .reaction_like { background-image: url('../images/Reactions/reactions_like.png'); } .reaction_love { background-image: url('../images/Reactions/reactions_love.png'); } .reaction_haha { background-image: url('../images/Reactions/reactions_haha.png'); } .reaction_wow { background-image: url('../images/Reactions/reactions_wow.png'); } .reaction_sad { background-image: url('../images/Reactions/reactions_sad.png'); } .reaction_angry { background-image: url('../images/Reactions/reactions_angry.png'); } .reaction_bulb { background-image: url('../images/Reactions/reactions_bulb.png'); } .reaction_check { background-image: url('../images/Reactions/reactions_check.png'); } .reaction_clap { background-image: url('../images/Reactions/reactions_clap.png'); } .reactions_widget.reaction_delay_effect .reaction_icon.reaction_selection_button { opacity: 1; animation-name: reaction_delay; animation-duration: .3s; } .reactions_widget .reaction_icon:first-of-type, .reaction_list .reaction_icon:first-of-type { margin-left: 0; } .reactions_widget .reaction_icon:last-of-type, .reaction_list .reaction_icon:last-of-type { margin-right: 0; } @keyframes reaction_delay { 30% { transform: scale(1.175); margin-right: 11px } 100% { transform: scale(1 ); margin-right: 10px } } .reaction_widget_container:hover .reaction_like { animation-delay: 0s } .reaction_widget_container:hover .reaction_love { animation-delay: .05s } .reaction_widget_container:hover .reaction_haha { animation-delay: .1s } .reaction_widget_container:hover .reaction_wow { animation-delay: .15s } .reaction_widget_container:hover .reaction_sad { animation-delay: .2s } .reaction_widget_container:hover .reaction_angry { animation-delay: .25s } .reaction_widget_container:hover .reaction_bulb { animation-delay: .3s } .reaction_widget_container:hover .reaction_check { animation-delay: .35s } .reaction_widget_container:hover .reaction_clap { animation-delay: .4s } /*transform to scaleup on hover*/ .reaction_widget_container .reaction_icon:hover { transform: scale(1.0); } /*reaction_icon descriptive text, e.g. haha, wow . . . exposed on hovering the particular reaction_icon in the widget*/ .reaction_icon::before { display: inline-block; color: #ffffff; text-align: center; line-height: 17px; font-size: .7em; width: 32px; height: 17px; margin-left: 10%; background-color: rgba(0, 0, 0, 0.6); border-radius: 20px; position: absolute; top: -8px; opacity: 0; } .reactions_widget .reaction_like::before { content: 'Like' } .reactions_widget .reaction_love::before { content: 'Love' } .reactions_widget .reaction_haha::before { content: 'Haha' } .reactions_widget .reaction_wow::before { content: 'Wow' } .reactions_widget .reaction_sad::before { content: 'Sad' } .reactions_widget .reaction_angry::before { content: 'Angry' } .reactions_widget .reaction_bulb::before { content: 'Inovate' } .reactions_widget .reaction_check::before { content: 'Want' } .reactions_widget .reaction_clap::before { content: 'Clap' } .reaction_icon:hover::before { opacity: 1; transition: opacity .2s ease-in; } /*reaction list and count*/ .reaction_list_wrapper { position: absolute; width: 270px; padding-top: 50px; } .reaction_list { display: flex; position: absolute; top: 0px; z-index: 0; background: #fff; box-shadow: none; height: 25px; flex-wrap: nowrap; padding-left: 0; } .reaction_list div { opacity: 1; margin-right: 30px; width: 24px; height: 24px; background-size: 22px; } .reaction_list > div::before { display: none; /*no descriptive text*/ } /*no reactions, the "Like" text */ .reaction_default_like_text { position: relative; left: -29px; padding-left: 0px !important; font-size: 14px !important; } /*count on reaction list*/ .reaction_icon.reaction_count { display: flex; align-items: center; padding-left: 30px; } /* #endregion */ /* #region reactions modal start */ /*launching button*/ .btn_launch_reactions_modal.icomoon-users { font-size: 35px; color: #ccc; cursor: pointer; margin-left: 5px; border-left: 2px solid; padding-left: 13px; padding-right: 11px; } /*modal wrapper */ .modal.reactions_modal_wrapper.in { background-color: rgba(255, 255,255,0); } .reactions_modal { background-color: white; padding: 10px !important; width: 560px !important; /* forcing static look important is needed*/ right: 39px !important; padding: 30px 60px !important; } /*title*/ .reactions_modal_wrapper .modal-header span::before { content: '\e60b'; font-family: 'icomoon_EL'; color: #ccc; font-size: 34px; margin-left: 250px; } /*filter*/ .reactions_modal_filter { display: flex; height: 44px; background: #848484; color: #fff; z-index: 99999; flex-wrap: nowrap; overflow: hidden; font-weight: 600; /* border: 1px solid #cccccc1f; */ } .reactions_modal_filter > div { opacity: 1; width: 115px; height: 44px; cursor: pointer; background-size: 28px; padding: 0px 0 0 10px; margin: 0; transition-property: background-size; transition-duration: .15s; overflow: hidden; } .reactions_modal_filter .icomoon-users { font-size: 23px; color: #fff; width: 100px; display: flex; align-items: center; padding-left: 25px; } .reactions_modal_filter .icomoon-users::after { content: 'ALL'; font-size: 13px; font-family: 'Open Sans'; letter-spacing: 1px; } .reaction_count_total { position: relative; top: -12px; left: -40px; } .reaction_count { font-size: 12px; font-family: 'Open Sans'; font-weight: bold; } /*filter selection/hover states*/ .reactions_modal_filter > div:hover { background-size: 35px; background-color: #ccc; } .selected_reaction_filter { background-color: #4e4e4e; color: #fff !important; } /*actual filtering system*/ [data-filter-reactions-type] { display: none; } [data-filter-reactions="0"] [data-filter-reactions-type], [data-filter-reactions="1"] [data-filter-reactions-type="1"], [data-filter-reactions="2"] [data-filter-reactions-type="2"], [data-filter-reactions="3"] [data-filter-reactions-type="3"], [data-filter-reactions="4"] [data-filter-reactions-type="4"], [data-filter-reactions="5"] [data-filter-reactions-type="5"], [data-filter-reactions="6"] [data-filter-reactions-type="6"], [data-filter-reactions="7"] [data-filter-reactions-type="7"] { display: block; } /*reactions grid and rows */ .reactions_modal_grid { padding: 0; } .reactions_modal_row { padding: 10px; border-bottom: 1px solid #ccc; transition: background-color .3s; } .reactions_modal_row:not([Data-incognito]) { cursor: pointer; } .reactions_modal_row:not([Data-incognito]):hover { transform: scale(1.01); background-color: #e8e8e8; } .reactions_modal_row .reactions_modal_row_icon { cursor: auto; } /*image*/ .reactions_modal_row_user_image { position: relative; display: inline-block; border-radius: 100%; width: 50px; height: 50px; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 1; } /*initials*/ .reactions_modal_row_user_initials { position: absolute; left: 10px; color: #fff; font-size: 40px; overflow: hidden; } .reactions_modal_row_user_initials:after { content: attr(data-init); width: 50px; height: 50px; color: white; border-radius: 100%; box-sizing: border-box; font-size: 20px; line-height: 0; letter-spacing: 2px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; background: linear-gradient(#e6e6e6, #a2a2a2); } /*small icon*/ .reactions_modal_row_icon { position: relative; opacity: 1; display: inline-block; left: -19px; top: -5px; width: 22px; height: 22px; z-index: 2; } /*user name and departement wrapper*/ .reactions_modal_name_department_wrapper { float: right; width: 82%; margin-top: 10px; } /*user name*/ .reactions_modal_row_name { font-size: 15px; font-weight: 600; } /*title and department*/ .reactions_modal_row_title, .reactions_modal_row_department { display: block; font-size: 12px; } /* #endregion reactions modal */ /* #endregion */ /*#region Form Element Widgets */ /*the border on the widget wrapper is causing the shifting ... can we remove the border ?*/ .cke_widget_forms { border-width: 0 !important; } /*core css for form element here*/ /* make these inline form elements behave like our other block widgets! */ .aspire_form_elements, .aspire_form_elements > .aspire_form_element { display: block !important; } /*new button structure (div instead of input)*/ .aspire_form_elements[data-type="button"] > div.aspire_form_element { text-align: center; display: flex !important; flex-wrap: nowrap; align-content: center; align-items: center; justify-content: center; } /*center aligned*/ .aspire_form_elements.center > .aspire_form_element { margin: auto auto; } /*#region resizing min/max*/ .aspire_form_elements[data-type*="textfield"] > input, .aspire_form_elements[data-type="textarea"] > textarea { min-width: 100px !important; min-height: 16px !important; } /*checkbox and radio */ .aspire_form_elements[data-type="checkbox"] > input, .aspire_form_elements[data-type="radio"] > input { min-width: 13px !important; min-height: 13px !important; } /*select*/ .aspire_form_elements[data-type="select"] > select { min-width: 100px !important; min-height: 30px !important; } /*button (old input and new div structure)*/ .aspire_form_elements[data-type="button"] > .aspire_form_element { min-width: 30px !important; min-height: 30px !important; } .aspire_form_elements[data-type="button"] > input { transition: none !important; } .aspire_form_elements[data-type="button"] > div.aspire_form_element.resizing_active { transition: none; } /*#endregion*/ /*#region ck control adjustements for form elements*/ /* general */ .aspire_form_elements > .widget-quick-tools { min-width: 112px; } /*text*/ .aspire_form_elements.left[data-type*="text"] > .widget-quick-tools { left: 42px; } .aspire_form_elements.right[data-type*="text"] > .widget-quick-tools { right: 0px; } /*checkboxes - nightmare */ .aspire_form_elements.left[data-type="checkbox"] > .widget-quick-tools { left: 13px; height: 25px; padding-left: 25px; top: -6px; } .aspire_form_elements.right[data-type="checkbox"] > .widget-quick-tools { right: 13px; height: 25px; padding-right: 25px; top: -6px; } .aspire_form_elements[data-type="checkbox"] > .widget_resizer { bottom: -20px !important; } .aspire_form_elements.left[data-type="checkbox"] > .widget_resizer { right: -17px !important; } .aspire_form_elements.right[data-type="checkbox"] > .widget_resizer { left: -17px !important; } /*radio - nightmare */ .aspire_form_elements.left[data-type="radio"] > .widget-quick-tools { left: 13px; height: 25px; padding-left: 25px; top: -6px; } .aspire_form_elements.right[data-type="radio"] > .widget-quick-tools { right: 13px; height: 25px; padding-right: 25px; top: -6px; } .aspire_form_elements[data-type="radio"] > .widget_resizer { bottom: -20px !important; } .aspire_form_elements.left[data-type="radio"] > .widget_resizer { right: -17px !important; } .aspire_form_elements.right[data-type="radio"] > .widget_resizer { left: -17px !important; } /*select*/ .aspire_form_elements.left[data-type="select"] > .widget-quick-tools { left: 42px; } /*button*/ .aspire_form_elements.left[data-type="button"] > .widget-quick-tools { left: 42px; } /*hide qt buttons for specific types i.e. no color for checkboxes*/ .aspire_form_elements[data-type="select"] .qt-color, .aspire_form_elements[data-type="checkbox"] .qt-color { display: none !important; } /*debug drag handles .cke_widget_drag_handler_container { display: block !important; }*/ /*#endregion*/ /*#region features - like transparency . . . extend here*/ .transparent_form_element > .aspire_form_element { border: 1px solid transparent !important; background: transparent !important; outline: none !important; } .cke .transparent_form_element { border: 1px dashed #ccc; background: #fff; opacity: .8; } .cke .transparent_form_element:hover::after { content: 'Transparent'; font-size: 12px; position: absolute; top: 0px; right: 0px; background-color: #cccccc; color: #fff; padding: 5px; font-weight: 600; } .cke .transparent_form_element[data-type="radio"]:hover::after, .cke .transparent_form_element[data-type="checkbox"]:hover::after { right: -146px; top: 26px; } /*#endregion*/ /*#region form element dialog adjustments*/ .ddl_form_element_font_size { width: 100px; margin-right: 65px; overflow-y: auto; } .lbl_fe_button_style { cursor: help !important; } .btn_fe_button_style { cursor: pointer !important; display: flex; justify-content: flex-start; align-items: center; } .fe_button_style_preview { transform: scale(0.5); } [class*="form_elements_rtp_switch"], [class*="form_elements_transparent_switch"], [class*="form_elements_selected"] { margin-left: 2px; } .cke_dialog_ui_input_textarea { white-space: initial !important; } .ck_form_elements_select_label { position: relative; top: 5px; font-weight: 600; } .ck_select_modification_controls { } /*#endregion*/ /*#endregion*/ /*#region Selected Elements Feature*/ /*migrate code here when feature is completed*/ /*#endregion*/ /* #region Interactions*/ /* #region misc */ /* center clearfix to prevent the visible wrapper from beeing pushed up when a floating element preceeds it.*/ .WrapperBlock, .stepInteraction { clear: both; } .IWORKS { display: none !important; } #Newcolor { margin-left: 30px; margin-right: 30px; } /*.main-box-block { padding-left: 40px; width: 100%; box-sizing: border-box; }*/ /* force clearfix for the outer hidden box wrapper shell*/ /*.main-box-block .WrapperCustom_interactions:nth-child(1):after { content: "."; height: 0; clear: both; visibility: hidden; }*/ .messagepnl { width: 400px; margin-left: 250px; padding: 5px; } .messagepnl img { vertical-align: middle; width: 22px; border-width: 0px; padding-right: 5px; } /* Jquery Global style for interaction */ .Read1, .Read2, .Read3, .Read4, .Read5, .Read6, .Read7, .Read8 { cursor: pointer; } /* #endregion */ /* #region 'Explore' nodes in student view */ .exploreInteraction { display: none; z-index: 10; } .wheel-compact .exploreInteraction { top: 0px !important; left: 27% !important; } .wheel-compact.Center .exploreInteraction { top: 75px !important; left: 27% !important; } /* #endregion */ /* #region Hover System */ .Hover { margin: 20px; padding: 20px; padding-left: 22px; -moz-outline: none; outline: none; position: relative; -webkit-box-shadow: 0 0 8px 1px rgba(0,0,0,.2); -moz-box-shadow: 0 0 8px 1px rgba(0,0,0,.2); box-shadow: 0 0 8px 1px rgba(0,0,0,.2); -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .Hover:hover { -webkit-box-shadow: 0 0 8px 1px rgba(0,0,0,.2), inset 0 0 7px 3px rgba(0,0,0,.2); -moz-box-shadow: 0 0 8px 1px rgba(0,0,0,.2), inset 0 0 7px 3px rgba(0,0,0,.2); box-shadow: 0 0 8px 1px rgba(0,0,0,.2), inset 0 0 7px 3px rgba(0,0,0,.2); } .Bump5 { -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .Bump5:hover { top: -2px; position: relative; } .Bump10:hover { top: -10px; position: relative; } .Bump15:hover { top: -15px; position: relative; } .Bump20:hover { top: -20px; position: relative; } .HoverNoBump { margin: 20px; padding: 20px; -moz-outline: none; outline: none; position: relative; -webkit-box-shadow: 0 0 8px 1px rgba(0,0,0,.2); -moz-box-shadow: 0 0 8px 1px rgba(0,0,0,.2); box-shadow: 0 0 8px 1px rgba(0,0,0,.2); -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .HoverNoBump:hover { -webkit-box-shadow: 0 0 8px 1px rgba(0,0,0,.2), inset 0 0 7px 3px rgba(0,0,0,.2); -moz-box-shadow: 0 0 8px 1px rgba(0,0,0,.2), inset 0 0 7px 3px rgba(0,0,0,.2); box-shadow: 0 0 8px 1px rgba(0,0,0,.2), inset 0 0 7px 3px rgba(0,0,0,.2); } .TightHoverNoBump { margin: 10px; padding: 10px; -moz-outline: none; outline: none; position: relative; -webkit-box-shadow: 0 0 8px 1px rgba(0,0,0,.2); -moz-box-shadow: 0 0 8px 1px rgba(0,0,0,.2); box-shadow: 0 0 8px 1px rgba(0,0,0,.2); -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .Show .HiddenBox { clear: both; } .Hover1 { margin-right: 189px; margin: 20px; padding: 20px; -moz-outline: none; outline: none; position: relative; -webkit-box-shadow: 0 0 8px 1px rgba(255,0,0,.5); -moz-box-shadow: 0 0 8px 1px rgba(255,0,0,.5); box-shadow: 0 0 8px 1px rgba(255,0,0,.5); -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; width: 74px; } .Hover2 { margin: 20px; padding: 20px; -moz-outline: none; outline: none; position: relative; -webkit-box-shadow: 0 0 8px 1px rgba(255,190,63,.8); -moz-box-shadow: 0 0 8px 1px rgba(255,190,63,.8); box-shadow: 0 0 8px 1px rgba(255,190,63,.8); -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .Hover3 { margin: 20px; padding: 20px; -moz-outline: none; outline: none; position: relative; -webkit-box-shadow: 0 0 8px 1px rgba(0,0,255,.5); -moz-box-shadow: 0 0 8px 1px rgba(0,0,255,.5); box-shadow: 0 0 8px 1px rgba(0,0,255,.5); -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .Hover4 { margin: 20px; padding: 20px; -moz-outline: none; outline: none; position: relative; -webkit-box-shadow: 0 0 8px 1px rgba(0,255,0,.5); -moz-box-shadow: 0 0 8px 1px rgba(0,255,0,.5); box-shadow: 0 0 8px 1px rgba(0,255,0,.5); -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .Hover5 { margin: 20px; padding: 20px; -moz-outline: none; outline: none; position: relative; -webkit-box-shadow: 0 0 8px 1px rgba(0,150,255,.5); -moz-box-shadow: 0 0 8px 1px rgba(0,150,255,.5); box-shadow: 0 0 8px 1px rgba(0,150,255,.5); -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .Hover6 { margin: 20px; padding: 20px; -moz-outline: none; outline: none; position: relative; -webkit-box-shadow: 0 0 8px 1px rgba(130,170,39,.5); -moz-box-shadow: 0 0 8px 1px rgba(130,170,39,.5); box-shadow: 0 0 8px 1px rgba(130,170,39,.5); -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .Hover7 { margin: 20px; padding: 20px; -moz-outline: none; outline: none; position: relative; -webkit-box-shadow: 0 0 8px 1px rgba(39, 55, 170, 0.55); -moz-box-shadow: 0 0 8px 1px rgba(130,170,39,.5); box-shadow: 0 0 8px 1px rgba(39, 55, 170, 0.55); -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .Hover8 { margin: 20px; padding: 20px; -moz-outline: none; outline: none; position: relative; -webkit-box-shadow: 0 0 8px 1px rgba(252, 139, 0, 0.64); -moz-box-shadow: 0 0 8px 1px rgba(130,170,39,.5); box-shadow: 0 0 8px 1px rgba(252, 139, 0, 0.64); -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .Hover9 { margin: 20px; padding: 20px; -moz-outline: none; outline: none; position: relative; -webkit-box-shadow: 0 0 8px 1px rgba(162, 39, 170, 0.5); -moz-box-shadow: 0 0 8px 1px rgba(130,170,39,.5); box-shadow: 0 0 8px 1px rgba(162, 39, 170, 0.5); -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .Hover1:hover { -webkit-box-shadow: 0 0 8px 1px rgba(255,0,0,.4), inset 0 0 7px 3px rgba(255,0,0,.5); -moz-box-shadow: 0 0 8px 1px rgba(255,0,0,.4), inset 0 0 7px 3px rgba(255,0,0,.5); box-shadow: 0 0 8px 1px rgba(255,0,0,.4), inset 0 0 7px 3px rgba(255,0,0,.5); } .Hover2:hover { -webkit-box-shadow: 0 0 8px 1px rgba(255,190,63,.8), inset 0 0 7px 3px rgba(255,190,63,.8); -moz-box-shadow: 0 0 8px 1px rgba(255,190,63,.8), inset 0 0 7px 3px rgba(255,190,63,.8); box-shadow: 0 0 8px 1px rgba(255,190,63,.8), inset 0 0 7px 3px rgba(255,190,63,.8); } .Hover3:hover { -webkit-box-shadow: 0 0 8px 1px rgba(0,0,255,.4), inset 0 0 7px 3px rgba(0,255,0,.5); -moz-box-shadow: 0 0 8px 1px rgba(0,0,255,.4), inset 0 0 7px 3px rgba(0,0,255,.5); box-shadow: 0 0 8px 1px rgba(0,0,255,.4), inset 0 0 7px 3px rgba(0,0,255,.7); } .Hover4:hover { -webkit-box-shadow: 0 0 8px 1px rgba(0,255,0,.4), inset 0 0 7px 3px rgba(0,255,0,.6); -moz-box-shadow: 0 0 8px 1px rgba(0,255,0,.4), inset 0 0 7px 3px rgba(0,255,0,.6); box-shadow: 0 0 8px 1px rgba(0,255,0,.4), inset 0 0 7px 3px rgba(0,255,0,.6); } .Hover5:hover { -webkit-box-shadow: 0 0 8px 1px rgba(0,150,255,.4), inset 0 0 7px 3px rgba(0,150,255,.6); -moz-box-shadow: 0 0 8px 1px rgba(0,150,255,.4), inset 0 0 7px 3px rgba(0,150,255,.6); box-shadow: 0 0 8px 1px rgba(0,150,255,.4), inset 0 0 7px 3px rgba(0,150,255,.6); } .Hover6:hover { -webkit-box-shadow: 0 0 8px 1px rgba(130,170,39,.4), inset 0 0 7px 3px rgba(130,170,39,.6); -moz-box-shadow: 0 0 8px 1px rgba(130,170,39,.4), inset 0 0 7px 3px rgba(130,170,39,.6); box-shadow: 0 0 8px 1px rgba(130,170,39,.4), inset 0 0 7px 3px rgba(130,170,39,.6); } .Hover7:hover { -webkit-box-shadow: 0 0 8px 1px rgba(41, 39, 170, 0.4), inset 0 0 7px 3px rgba(39, 67, 170, 0.6); -moz-box-shadow: 0 0 8px 1px rgba(130,170,39,.4), inset 0 0 7px 3px rgba(130,170,39,.6); box-shadow: 0 0 8px 1px rgba(41, 39, 170, 0.4), inset 0 0 7px 3px rgba(39, 67, 170, 0.6); } .Hover8:hover { -webkit-box-shadow: 0 0 8px 1px rgba(253, 140, 0, 0.69), inset 0 0 7px 3px rgba(219, 127, 33, 0.45); -moz-box-shadow: 0 0 8px 1px rgba(130,170,39,.4), inset 0 0 7px 3px rgba(130,170,39,.6); box-shadow: 0 0 8px 1px rgba(253, 140, 0, 0.69), inset 0 0 7px 3px rgba(219, 127, 33, 0.45); } .Hover9:hover { -webkit-box-shadow: 0 0 8px 1px rgba(150, 39, 170, 0.4), inset 0 0 7px 3px rgba(156, 39, 170, 0.6); -moz-box-shadow: 0 0 8px 1px rgba(130,170,39,.4), inset 0 0 7px 3px rgba(130,170,39,.6); box-shadow: 0 0 8px 1px rgba(150, 39, 170, 0.4), inset 0 0 7px 3px rgba(156, 39, 170, 0.6); } .Hover1Active { -webkit-box-shadow: 0 0 8px 1px rgba(255,0,0,.4), inset 0 0 7px 3px rgba(255,0,0,.5); -moz-box-shadow: 0 0 8px 1px rgba(255,0,0,.4), inset 0 0 7px 3px rgba(255,0,0,.5); box-shadow: 0 0 8px 1px rgba(255,0,0,.4), inset 0 0 7px 3px rgba(255,0,0,.5); } .Hover2Active { -webkit-box-shadow: 0 0 8px 1px rgba(255,190,63,.8), inset 0 0 7px 3px rgba(255,190,63,.8); -moz-box-shadow: 0 0 8px 1px rgba(255,190,63,.8), inset 0 0 7px 3px rgba(255,190,63,.8); box-shadow: 0 0 8px 1px rgba(255,190,63,.8), inset 0 0 7px 3px rgba(255,190,63,.8); } .Hover3Active { -webkit-box-shadow: 0 0 8px 1px rgba(0,0,255,.4), inset 0 0 7px 3px rgba(0,255,0,.5); -moz-box-shadow: 0 0 8px 1px rgba(0,0,255,.4), inset 0 0 7px 3px rgba(0,0,255,.5); box-shadow: 0 0 8px 1px rgba(0,0,255,.4), inset 0 0 7px 3px rgba(0,0,255,.7); } .Hover4Active { -webkit-box-shadow: 0 0 8px 1px rgba(0,255,0,.4), inset 0 0 7px 3px rgba(0,255,0,.6); -moz-box-shadow: 0 0 8px 1px rgba(0,255,0,.4), inset 0 0 7px 3px rgba(0,255,0,.6); box-shadow: 0 0 8px 1px rgba(0,255,0,.4), inset 0 0 7px 3px rgba(0,255,0,.6); } .Hover5Active { -webkit-box-shadow: 0 0 8px 1px rgba(0,150,255,.4), inset 0 0 7px 3px rgba(0,150,255,.6); -moz-box-shadow: 0 0 8px 1px rgba(0,150,255,.4), inset 0 0 7px 3px rgba(0,150,255,.6); box-shadow: 0 0 8px 1px rgba(0,150,255,.4), inset 0 0 7px 3px rgba(0,150,255,.6); } .Hover6Active { -webkit-box-shadow: 0 0 8px 1px rgba(130,170,39,.4), inset 0 0 7px 3px rgba(130,170,39,.6); -moz-box-shadow: 0 0 8px 1px rgba(130,170,39,.4), inset 0 0 7px 3px rgba(130,170,39,.6); box-shadow: 0 0 8px 1px rgba(130,170,39,.4), inset 0 0 7px 3px rgba(130,170,39,.6); } .Hover7Active { -webkit-box-shadow: 0 0 8px 1px rgba(130,170,39,.4), inset 0 0 7px 3px rgba(130,170,39,.6); -moz-box-shadow: 0 0 8px 1px rgba(130,170,39,.4), inset 0 0 7px 3px rgba(130,170,39,.6); box-shadow: 0 0 8px 1px rgba(130,170,39,.4), inset 0 0 7px 3px rgba(130,170,39,.6); } .Hover8Active { -webkit-box-shadow: 0 0 8px 1px rgba(130,170,39,.4), inset 0 0 7px 3px rgba(130,170,39,.6); -moz-box-shadow: 0 0 8px 1px rgba(130,170,39,.4), inset 0 0 7px 3px rgba(130,170,39,.6); box-shadow: 0 0 8px 1px rgba(130,170,39,.4), inset 0 0 7px 3px rgba(130,170,39,.6); } .Hover9Active { -webkit-box-shadow: 0 0 8px 1px rgba(130,170,39,.4), inset 0 0 7px 3px rgba(130,170,39,.6); -moz-box-shadow: 0 0 8px 1px rgba(130,170,39,.4), inset 0 0 7px 3px rgba(130,170,39,.6); box-shadow: 0 0 8px 1px rgba(130,170,39,.4), inset 0 0 7px 3px rgba(130,170,39,.6); } /*.hoverimage { width: 41%; margin-top: 70px; }*/ .Hover_NoAnimation { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; } /* #endregion */ /* #region Hidden Text System */ .HiddenText { text-indent: -2000px; -webkit-transition: all .1s ease-in; -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; transition: all .1s ease-in; } .Hidebox { position: relative; } .LargeTitle { position: absolute; left: 0px; Top: +32px; font-style: normal; color: #ffffff; font-family: verdana,geneva,sans-serif; } .LargeTitle p { margin-top: 2px; } .SmallTitle { padding-bottom: 25px; display: inline-block; } .VisibleText p { padding-bottom: 30px; } .HiddenText:hover { text-indent: 0px; } .HidenStyle { z-index: 3; padding-left: 40px; } .Hidden { /* DO NOT STYLE THIS BOX !!! THIS CLASS IS USED IN JQUERY AND CAN'T HAVE ANY CSS OR IT WILL BREAK OTHER INTERACTIONS */ } .IWORKS:hover span { color: #CE6D40; } .IWORKS span { font-family: Arial, Helmet, Freesans, sans-serif; font-size: 14px; font-weight: bold; line-height: 24px; color: #505050; padding-bottom: 10px; position: relative; top: -8px; } .IWORKS { padding-left: 30px; padding-top: 10px; width: 435px; height: 60px; } .IWORKS2 { padding-left: 15px; padding-top: 10px; width: 230px; height: 55px; } .IWORKS2 div { z-index: 300; position: absolute; background-color: rgb(253, 246, 215); border: 1px solid rgb(150, 150, 150); width: 100%; padding: 5px; margin-top: 3px; } .Admin { /*border: 1px solid #C1ECC4; /* padding: 10px 5px 10px 10px; width: 255px; margin-right: 15px; border-radius: 2px; background-color: #F6FFF7; z-index: 99; text-align:right */ } .Admin span { font: normal 14px Verdana; color: #636363; } .scaytTextBox { background-color: white; border: none; cursor: text; } /* #endregion */ /* #region Simon Interaction */ .MainDiag { width: 764px; height: 621px; z-index: 1; position: relative; } .MainDiag2parts { width: 764px; height: 310px; z-index: 1; position: relative; } .D1J { width: 380px; height: 310px; text-align: left; z-index: 1; -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } div[data-interaction-name="simon-interaction"] .D1J { width: 491.5px; } .D2J { width: 380px; height: 310px; text-align: left; z-index: 1; -webkit-transition: all .1s ease-in; -moz-transition: all .1s ease-in; -o-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } div[data-interaction-name="simon-interaction"] .D2J { width: 491.5px; } .D3J { width: 380px; height: 310px; text-align: left; z-index: 1; -webkit-transition: all .1s ease-in; -moz-transition: all .1s ease-in; -o-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } div[data-interaction-name="simon-interaction"] .D3J { width: 491.5px; } .D4J { width: 380px; height: 310px; text-align: left; z-index: 1; -webkit-transition: all .1s ease-in; -moz-transition: all .1s ease-in; -o-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } div[data-interaction-name="simon-interaction"] .D4J { width: 491.5px; } .WrapperCustom_interactions .D1J, .WrapperCustom_interactions .D2J, .WrapperCustom_interactions .D3J, .WrapperCustom_interactions .D4J { border: 1px dotted #dadada; } div[data-interaction-name="simon-interaction"] .simon-interaction-container { width: 100% !important; } div[data-interaction-name="simon-interaction"] .simon-interaction-image-container { z-index: 2; position: absolute; top: 193px; left: 378px; } .MainDiag table.Hiden { width: 100%; } p.simon_read_step { font-weight: 600 !important; font-size: 13px; font-family: 'Open Sans'; color: #555; } /* #endregion */ /* #region Small Step Interaction */ #MainDiag5Step { height: 525px; position: relative; width: 850px; margin-left: auto; margin-right: auto; } .MainDiag5StepHidden { position: relative; height: 175px; } /* undo the padding added because we lack control at the image2 plugin.*/ .MainDiag5StepHiddenPhased2 { z-index: 1; height: 525px; top: 0px; } #MainDiag5Step .stepsmainPhase { position: relative; top: 0px !important; width: 100%; height: 100%; } #MainDiag5Step .stepsmainPhase2 { position: relative; top: -210px; width: 100%; } #MainDiag5Step .MainDiag5Step_Image { z-index: 2; position: absolute; top: 175px; left: 0px; } div[data-interaction-name="square-interaction-small"] #MainDiag5Step .MainDiag5Step_Image { top: 178px; } #MainDiag5Step .MainDiag5Step_TitlesSQR { z-index: 4; position: relative; top: 201px; color: White; height: 90px; width: 135px; text-align: center; float: left; left: initial !important; margin-left: 23px; } /* Square v3*/ div[data-interaction-name] #MainDiag5Step .MainDiag5Step_TitlesSQR { margin-left: 28px; } #MainDiag5Step .MainDiag5Step_Titles { z-index: 4; top: 200px; color: White; height: 100px; width: 153px; text-align: center; float: left; position: relative; left: 19px !important; display: flex; flex-direction: column; justify-content: center; } #MainDiag5Step .MainDiag5Step_ImageNumber { z-index: 20; position: absolute; top: 165px; left: -10px; } #MainDiag5Step .MainDiag5Step_Image img { border: 0px solid #ffffff; float: left; } #MainDiag5Step .MainDiag5Step_Box1:after, #MainDiag5Step .MainDiag5Step_Box3:after, #MainDiag5Step .MainDiag5Step_Box5:after { content: ''; position: absolute; border: 3px solid #d0d2d3; width: 0px; height: 27px; left: 144px; } #MainDiag5Step .MainDiag5Step_Box2:after, #MainDiag5Step .MainDiag5Step_Box4:after { content: ''; position: absolute; border: 3px solid #d0d2d3; width: 0px; height: 27px; left: 135px; top: -39px; } /* General Css for Version 1,2,3 */ #MainDiag5Step .MainDiag5Step_Box1, #MainDiag5Step .MainDiag5Step_Box2, #MainDiag5Step .MainDiag5Step_Box3, #MainDiag5Step .MainDiag5Step_Box4, #MainDiag5Step .MainDiag5Step_Box5 { z-index: 4; position: absolute; top: -21px; width: 275px; height: 180px; padding: 0px; margin-bottom: 30px; border: 3px solid #d0d2d3; border-radius: 14px; -webkit-box-shadow: inset 0px -73px 54px -58px rgba(0, 0, 0, 0.1), 0px 0px 1px 1px rgb(223, 223, 223); -moz-box-shadow: inset 0px -73px 54px -58px rgba(0, 0, 0, 0.1), 0px 0px 1px 1px rgb(223, 223, 223); box-shadow: inset 0px -73px 54px -58px rgba(0, 0, 0, 0.1), 0px 0px 1px 1px rgb(223, 223, 223); } #MainDiag5Step .MainDiag5Step_Box1 { left: -65px; } #MainDiag5Step .MainDiag5Step_Box2 { top: auto; bottom: 4px; left: 98px; margin-top: 35px; margin-bottom: 0; } #MainDiag5Step .MainDiag5Step_Box3 { left: 253px; } #MainDiag5Step .MainDiag5Step_Box4 { top: auto; bottom: 4px; left: 422px; margin-top: 35px; margin-bottom: 0; } #MainDiag5Step .MainDiag5Step_Box5 { left: 569px; } /* Step Interactions ( Small Variants ) Version 1 and 2 Templates only - background and background-color are used for templates pre-v3 */ #MainDiag5Step .MainDiag5Step_Box1:not([data-step-interaction-piece]) { background: none; background-color: #AC92C1; } #MainDiag5Step .MainDiag5Step_Box2:not([data-step-interaction-piece]) { background: none; background-color: #92B7D9; } #MainDiag5Step .MainDiag5Step_Box3:not([data-step-interaction-piece]) { background: none; background-color: #D9E899; } #MainDiag5Step .MainDiag5Step_Box4:not([data-step-interaction-piece]) { background: none; background-color: #F7CF9F; } #MainDiag5Step .MainDiag5Step_Box5:not([data-step-interaction-piece]) { background: none; background-color: #FAF296; } div[data-step-interaction-color="rainbow"] #MainDiag5Step .MainDiag5Step_Box1 { background: none; background-color: #AC92C1; } div[data-step-interaction-color="rainbow"] #MainDiag5Step .MainDiag5Step_Box2 { background: none; background-color: #92B7D9; } div[data-step-interaction-color="rainbow"] #MainDiag5Step .MainDiag5Step_Box3 { background: none; background-color: #D9E899; } div[data-step-interaction-color="rainbow"] #MainDiag5Step .MainDiag5Step_Box4 { background: none; background-color: #F7CF9F; } div[data-step-interaction-color="rainbow"] #MainDiag5Step .MainDiag5Step_Box5 { background: none; background-color: #FAF296; } div[data-step-interaction-color="rainbow"] #MainDiag5Step2 .MainDiag5Step_Box1 .FlowSquareHiddenBox1 { background: none; background-color: #AC92C1; } div[data-step-interaction-color="rainbow"] #MainDiag5Step2 .MainDiag5Step_Box2 .FlowSquareHiddenBox2 { background: none; background-color: #92B7D9; } div[data-step-interaction-color="rainbow"] #MainDiag5Step2 .MainDiag5Step_Box3 .FlowSquareHiddenBox3 { background: none; background-color: #D9E899; } div[data-step-interaction-color="rainbow"] #MainDiag5Step2 .MainDiag5Step_Box4 .FlowSquareHiddenBox4 { background: none; background-color: #F7CF9F; } div[data-step-interaction-color="rainbow"] #MainDiag5Step2 .MainDiag5Step_Box5 .FlowSquareHiddenBox5 { background: none; background-color: #FAF296; } div[data-step-interaction-color="rainbow"] #MainDiag5Step2 [data-node-color] div[class^="FlowSquareHiddenBox"] { background: none; background-color: none; } /* End Step Interactions ( Small Variants ) Version 1 and 2 Templates only - background and background-color are used for templates pre-v3 */ #MainDiag5Step .MainDiag5Step_Text { overflow: hidden; height: 100%; vertical-align: top; color: #333; background-color: rgba(255, 255, 255, 0.4); border-radius: 9px; padding: 0 10px !important; } div[data-interaction-name="flow-interaction-large"] .StepContent [class*="FlowSquareHiddenBox"], div[data-interaction-name="square-interaction-large"] .StepContent [class*="FlowSquareHiddenBox"] { overflow: visible; height: 100%; vertical-align: top; color: #333; background-color: rgba(255, 255, 255, 0.35); /* border-radius: 9px; */ } #MainDiag5Step table.MainDiag5Step_Text { width: 100%; } #MainDiag5Step .MainDiag5Step_Text p { margin-top: 5px; margin-bottom: initial; } #MainDiag5Step .MainDiag5Step_Text tr { vertical-align: text-top; } #MainDiag5Step .MainDiag5Step_Titles p { font-size: 24px; margin-top: 0; margin-bottom: 0; font-weight: 600 !important; color: white !important; } #MainDiag5Step .MainDiag5Step_TitlesSQR p { font-size: 24px; margin-top: 0; margin-bottom: 0; font-weight: 600 !important; color: white !important; } /* #endregion */ /* #region Large Step Interaction */ .StepInteractionHiddenContent { width: 100% !important; } #MainDiag5Step2 { top: 15px; width: 793px; height: 635px; z-index: 1; position: relative; margin-left: auto; margin-right: auto; } div[data-step-interaction-steps="5"] #MainDiag5Step2 .MainDiag5Step_Image { z-index: 2; position: absolute; top: 5px; left: 100px; } div[data-step-interaction-steps="4"] #MainDiag5Step2 .MainDiag5Step_Image { z-index: 2; position: absolute; top: 5px; left: 163px; } div[data-step-interaction-steps="3"] #MainDiag5Step2 .MainDiag5Step_Image { z-index: 2; position: absolute; top: 5px; left: 241px; } #MainDiag5Step2 .MainDiag5Step_Image { z-index: 2; position: absolute; top: 5px; left: 0px; } /*All interactions text boxes*/ #MainDiag5Step2 .MainDiag5Step_Titles { z-index: 4; position: absolute; top: 33px; color: White; height: 85px; width: 149px; text-align: center; } /*V3 text box adjustment */ div[data-step-interaction-color] .MainDiag5Step_Titles:not(.MainDiag5Step_Title1) { margin-left: 3px !important; } /*V3 Rainbow text box adjustment */ div[data-step-interaction-color="rainbow"] .MainDiag5Step_Titles:not(.MainDiag5Step_Title1) { margin-left: 0px !important; } #MainDiag5Step2 .MainDiag5Step_TitlesSQR { z-index: 4; position: absolute; top: 37px; color: White; height: 85px; width: 135px; text-align: center; top: 30px; } /* flow */ #MainDiag5Step2 .MainDiag5Step_Title1 { left: +9px; } #MainDiag5Step2 .MainDiag5Step_Title2 { left: +167px; } #MainDiag5Step2 .MainDiag5Step_Title3 { left: +327px; } #MainDiag5Step2 .MainDiag5Step_Title4 { left: +486px; } #MainDiag5Step2 .MainDiag5Step_Title5 { left: +634px; } /*Flow V3*/ div[data-step-interaction-steps="5"] #MainDiag5Step2 .MainDiag5Step_Title1 { left: 116px; } div[data-step-interaction-steps="5"] #MainDiag5Step2 .MainDiag5Step_Title2 { left: +267px; } div[data-step-interaction-steps="5"] #MainDiag5Step2 .MainDiag5Step_Title3 { left: +420px; } div[data-step-interaction-steps="5"] #MainDiag5Step2 .MainDiag5Step_Title4 { left: +577px; } div[data-step-interaction-steps="5"] #MainDiag5Step2 .MainDiag5Step_Title5 { left: +740px; } div[data-step-interaction-steps="4"] #MainDiag5Step2 .MainDiag5Step_Title1 { left: +180px; } div[data-step-interaction-steps="4"] #MainDiag5Step2 .MainDiag5Step_Title2 { left: +334px; } div[data-step-interaction-steps="4"] #MainDiag5Step2 .MainDiag5Step_Title3 { left: +488px; } div[data-step-interaction-steps="4"] #MainDiag5Step2 .MainDiag5Step_Title4 { left: +646px; } div[data-step-interaction-steps="3"] #MainDiag5Step2 .MainDiag5Step_Title1 { left: +260px; } div[data-step-interaction-steps="3"] #MainDiag5Step2 .MainDiag5Step_Title2 { left: +411px; } div[data-step-interaction-steps="3"] #MainDiag5Step2 .MainDiag5Step_Title3 { left: +572px; } /* Square */ div[data-step-interaction-steps="5"] #MainDiag5Step2 .MainDiag5Step_Title1.MainDiag5Step_TitlesSQR { left: 107px; margin-left: 0; } div[data-step-interaction-steps="5"] #MainDiag5Step2 .MainDiag5Step_Title2.MainDiag5Step_TitlesSQR { left: +270px; margin-left: 0; } div[data-step-interaction-steps="5"] #MainDiag5Step2 .MainDiag5Step_Title3.MainDiag5Step_TitlesSQR { left: +433px; margin-left: 0; } div[data-step-interaction-steps="5"] #MainDiag5Step2 .MainDiag5Step_Title4.MainDiag5Step_TitlesSQR { left: +596px; margin-left: 0; } div[data-step-interaction-steps="5"] #MainDiag5Step2 .MainDiag5Step_Title5.MainDiag5Step_TitlesSQR { left: +759px; margin-left: 0; } div[data-step-interaction-steps="4"] #MainDiag5Step2 .MainDiag5Step_Title1.MainDiag5Step_TitlesSQR { left: +170px; margin-left: 0; } div[data-step-interaction-steps="4"] #MainDiag5Step2 .MainDiag5Step_Title2.MainDiag5Step_TitlesSQR { left: +334px; margin-left: 0; } div[data-step-interaction-steps="4"] #MainDiag5Step2 .MainDiag5Step_Title3.MainDiag5Step_TitlesSQR { left: +496px; margin-left: 0; } div[data-step-interaction-steps="4"] #MainDiag5Step2 .MainDiag5Step_Title4.MainDiag5Step_TitlesSQR { left: +659px; margin-left: 0; } div[data-step-interaction-steps="3"] #MainDiag5Step2 .MainDiag5Step_Title1.MainDiag5Step_TitlesSQR { left: +248px; margin-left: 0; } div[data-step-interaction-steps="3"] #MainDiag5Step2 .MainDiag5Step_Title2.MainDiag5Step_TitlesSQR { left: +411px; margin-left: 0; } div[data-step-interaction-steps="3"] #MainDiag5Step2 .MainDiag5Step_Title3.MainDiag5Step_TitlesSQR { left: +574px; margin-left: 0; } /* Square v3*/ div[data-interaction-name] #MainDiag5Step .MainDiag5Step_Title1.MainDiag5Step_TitlesSQR { margin-left: 6px; } /* Image Numbers */ #MainDiag5Step2 .MainDiag5Step_ImageNumber { z-index: 3; position: absolute; top: 0px; left: -17px; } div[data-step-interaction-steps="5"] #MainDiag5Step2 .MainDiag5Step_ImageNumber { z-index: 3; position: absolute; top: 0px; left: 86px; } div[data-step-interaction-steps="4"] #MainDiag5Step2 .MainDiag5Step_ImageNumber { z-index: 3; position: absolute; top: 0px; left: 152px; } div[data-step-interaction-steps="3"] #MainDiag5Step2 .MainDiag5Step_ImageNumber { z-index: 3; position: absolute; top: 0px; left: 229px; } #MainDiag5Step2 .MainDiag5Step_Image img { border: 0px solid #ffffff; float: left; } #MainDiag5Step2 .MainDiag5Step_Box1_Top, #MainDiag5Step2 .MainDiag5Step_Box2_Top, #MainDiag5Step2 .MainDiag5Step_Box3_Top, #MainDiag5Step2 .MainDiag5Step_Box4_Top, #MainDiag5Step2 .MainDiag5Step_Box5_Top { display: none; } #MainDiag5Step2 .MainDiag5Step_Box1_Middle, #MainDiag5Step2 .MainDiag5Step_Box2_Middle, #MainDiag5Step2 .MainDiag5Step_Box3_Middle, #MainDiag5Step2 .MainDiag5Step_Box4_Middle, #MainDiag5Step2 .MainDiag5Step_Box5_Middle { width: 611px; position: relative; min-height: 50px; border: 3px solid #dfdfdf; border-radius: 3px; -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,1), 0px 2px 2px 0px rgba(223, 223, 223, 0.73); -moz-box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,1), 0px 2px 2px 0px rgba(223, 223, 223, 0.73); box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,1), 0px 2px 2px 0px rgba(223, 223, 223, 0.73); margin-top: 69px; margin-left: 32px; } #MainDiag5Step2 .MainDiag5Step_Box1_Middle:not(.StepContent), #MainDiag5Step2 .MainDiag5Step_Box2_Middle:not(.StepContent), #MainDiag5Step2 .MainDiag5Step_Box3_Middle:not(.StepContent), #MainDiag5Step2 .MainDiag5Step_Box4_Middle:not(.StepContent), #MainDiag5Step2 .MainDiag5Step_Box5_Middle:not(.StepContent) { padding: 10px; } /* v1 and v2 Step Interaction Large Variants Pseudo-Element */ #MainDiag5Step2 .MainDiag5Step_Box1_Middle:not(.StepContent):before { background: url(../images/Diagrams/Step1_top.png) no-repeat; height: 70px; width: 641px; font-size: 1px; content: ''; position: absolute; top: -71px; left: -25px; } #MainDiag5Step2 .MainDiag5Step_Box2_Middle:not(.StepContent):before { background: url(../images/Diagrams/Step2_top.png) no-repeat; height: 70px; width: 641px; font-size: 1px; content: ''; position: absolute; top: -71px; left: -25px; } #MainDiag5Step2 .MainDiag5Step_Box3_Middle:not(.StepContent):before { background: url(../images/Diagrams/Step3_top.png) no-repeat; height: 70px; width: 641px; font-size: 1px; content: ''; position: absolute; top: -71px; left: -25px; } #MainDiag5Step2 .MainDiag5Step_Box4_Middle:not(.StepContent):before { background: url(../images/Diagrams/Step4_top.png) no-repeat; height: 70px; width: 641px; font-size: 1px; content: ''; position: absolute; top: -71px; left: -25px; } #MainDiag5Step2 .MainDiag5Step_Box5_Middle:not(.StepContent):before { background: url(../images/Diagrams/Step5_top.png) no-repeat; height: 70px; width: 641px; font-size: 1px; content: ''; position: absolute; top: -71px; left: -25px; } /* End v1 and v2 Step Interaction Large Variants Pseudo-Element */ /* v3 Step Interaction Large Variants Pseudo-Element 5 step */ .MainDiag5Step_Box1.StepInteractionHiddenContent:before { height: 6px; width: 395px; content: ''; position: absolute; top: 34px; left: 27%; margin-left: -104px; background-color: #d0d2d3; z-index: 0; transform: rotate(11deg); -webkit-transform: rotate(11deg); box-shadow: 6px 5px 5px rgba(144, 144, 144, 0.15); } .MainDiag5Step_Box2.StepInteractionHiddenContent:before { height: 6px; width: 177px; content: ''; position: absolute; top: 34px; left: 44%; margin-left: -110px; background-color: #d0d2d3; z-index: 0; transform: rotate(26deg); -webkit-transform: rotate(26deg); box-shadow: 6px 5px 5px rgba(144, 144, 144, 0.15); } .MainDiag5Step_Box3.StepInteractionHiddenContent:before { height: 6px; width: 75px; content: ''; position: absolute; top: 31px; left: 60%; margin-left: -129px; background-color: #d0d2d3; z-index: 0; transform: rotate(-79deg); -webkit-transform: rotate(-79deg); box-shadow: -6px 5px 5px rgba(144, 144, 144, 0.15); } .MainDiag5Step_Box4.StepInteractionHiddenContent:before { height: 6px; width: 183px; content: ''; position: absolute; top: 35px; left: 60%; margin-left: -110px; background-color: #d0d2d3; z-index: 0; transform: rotate(-25deg); -webkit-transform: rotate(-25deg); box-shadow: -6px 5px 5px rgba(144, 144, 144, 0.15); } .MainDiag5Step_Box5.StepInteractionHiddenContent:before { height: 6px; width: 310px; content: ''; position: absolute; top: 33px; left: 60%; margin-left: -110px; background-color: #d0d2d3; z-index: 0; transform: rotate(-14deg); -webkit-transform: rotate(-14deg); box-shadow: -6px 5px 5px rgba(144, 144, 144, 0.15); } /* v3 Step Interaction Large Variants Pseudo-Element 4step */ div[data-step-interaction-steps='4'] .MainDiag5Step_Box1.StepInteractionHiddenContent:before { width: 294px; top: 32px; left: 27%; margin-left: -45px; transform: rotate(14deg); -webkit-transform: rotate(14deg); } div[data-step-interaction-steps='4'] .MainDiag5Step_Box2.StepInteractionHiddenContent:before { width: 150px; left: 49%; transform: rotate(31deg); -webkit-transform: rotate(31deg); } div[data-step-interaction-steps='4'] .MainDiag5Step_Box3.StepInteractionHiddenContent:before { width: 84px; top: 31px; left: 63%; margin-left: -129px; transform: rotate(-58deg); -webkit-transform: rotate(-58deg); } div[data-step-interaction-steps='4'] .MainDiag5Step_Box4.StepInteractionHiddenContent:before { width: 271px; top: 36px; left: 60%; margin-left: -121px; transform: rotate(-17deg); -webkit-transform: rotate(-17deg); } /* v3 Step Interaction Large Variants Pseudo-Element 3step */ div[data-step-interaction-steps='3'] .MainDiag5Step_Box1.StepInteractionHiddenContent:before { width: 226px; top: 31px; left: 27%; margin-left: 26px; transform: rotate(18deg); -webkit-transform: rotate(18deg); } div[data-step-interaction-steps='3'] .MainDiag5Step_Box2.StepInteractionHiddenContent:before { width: 70px; top: 31px; margin-left: 20px; transform: rotate(75deg); -webkit-transform: rotate(75deg); } div[data-step-interaction-steps='3'] .MainDiag5Step_Box3.StepInteractionHiddenContent:before { width: 185px; top: 31px; left: 60%; margin-left: -117px; transform: rotate(-22deg); -webkit-transform: rotate(-22deg); } .MainDiag5Step_Titles p, .MainDiag5Step_TitlesSQR p { margin: 0px; line-height: normal; } /* End v3 Step Interaction Large Variants Pseudo-Element */ /* Large Arrow V3 important neede to offset inline */ /*/Live View*/ div[data-interaction-name='hidden-box-arrows'] .Show { margin: 30px auto !important; min-width: 260px; box-sizing: border-box; padding-left: 25px; } div[data-interaction-name='hidden-box-arrows'] .SmallTitle { padding-bottom: 0px; display: inline-block; margin-bottom: 5px; margin-top: 10px; } div[data-interaction-name='hidden-box-arrows'] [data-image-hidden-box-arrow] { margin-bottom: -15px; } /*Edit view*/ .WrapperCustom_interactions div[data-interaction-name='hidden-box-arrow'] { margin-top: 15px !important; margin-bottom: 15px !important; box-sizing: border-box; background-color: #fff; min-width: 262px; } .WrapperCustom_interactions div[data-interaction-name='hidden-box-arrow'] [quick-tools-remove-widget] { display: none; } /* End Large Arrow V3 */ /* Step Interactions ( Large Variants ) Version 1 and 2 Templates only - background and background-color are used for templates pre-v3 */ #MainDiag5Step .MainDiag5Step_Box1_Middle:not(.StepContent), #MainDiag5Step .MainDiag5Step_Box2_Middle:not(.StepContent), #MainDiag5Step .MainDiag5Step_Box3_Middle:not(.StepContent), #MainDiag5Step .MainDiag5Step_Box4_Middle:not(.StepContent), #MainDiag5Step .MainDiag5Step_Box5_Middle:not(.StepContent) { background: none; } #MainDiag5Step2 .MainDiag5Step_Box1_Middle:not(.StepContent) { background-color: #AD92C2; } #MainDiag5Step2 .MainDiag5Step_Box2_Middle:not(.StepContent) { background-color: #8CB7DA; } #MainDiag5Step2 .MainDiag5Step_Box3_Middle:not(.StepContent) { background-color: #DBE999; } #MainDiag5Step2 .MainDiag5Step_Box4_Middle:not(.StepContent) { background-color: #FCD49D; } #MainDiag5Step2 .MainDiag5Step_Box5_Middle:not(.StepContent) { background-color: #FCF48F; } /* End Step Interactions ( Large Variants ) Version 1 and 2 Templates only - background and background-color are used for templates pre-v3 */ #MainDiag5Step2 .Position { z-index: 4; position: relative; top: 130px; left: 30px; width: 700px; } /*V3*/ div[data-step-interaction-steps] #MainDiag5Step2 .Position { left: 0px; top: 130px; padding-top: 65px; } #MainDiag5Step2 .MainDiag5Step_Text h1 { font-family: Verdana; background: url(images/Notes/Note_underline.jpg) 0 100% repeat-x; padding-bottom: 10px; padding-left: 20px; margin-top: 0; padding-top: 0; font-size: 22px; margin-bottom: 0; color: #353535; font-weight: bold; } #MainDiag5Step2 .MainDiag5Step_Text p { color: #353535; } #MainDiag5Step2 table.MainDiag5Step_Text { width: 100%; } #MainDiag5Step2 .MainDiag5Step_Text tr { vertical-align: text-top; } #MainDiag5Step2 { height: 600px; position: relative; width: 805px; margin-left: auto; margin-right: auto; } div[data-interaction-name] #MainDiag5Step2 { height: 600px; position: relative; width: 100% !important; } #MainDiag5Step2 .MainDiag5Step_Titles p { font-size: 24px; margin-top: 0; margin-bottom: 0; font-weight: 600 !important; color: white !important; } #MainDiag5Step2 .MainDiag5Step_TitlesSQR p { font-size: 24px; margin-top: 0; margin-bottom: 0; font-weight: 600 !important; color: white !important; } div [class*='FlowSquareHiddenBox'] { min-height: 150px !important; padding: 10px; } /* #endregion */ /* #region Hidden Box Interaction */ .hereBoxVisibleText { width: 100%; } .hereBoxVisibleText h2 { background: url(images/Notes/Note_underline.jpg) 0 100% repeat-x; margin-left: -4px; padding-bottom: 6px; padding-left: -0px; margin-top: 0; padding-top: 0; font-size: 19px; margin-bottom: 0; font-weight: 500; } .HereText { position: absolute; top: -67px; left: +33px; width: 75px; text-align: center; } .HereText h1 { font-size: 17px !important; line-height: 18px !important; } .blueHereText h1 { line-height: 18px; color: #3581A7; font-size: 17px; } .greenHereText h1 { line-height: 18px; color: #749322; font-size: 17px; } .yellowHereText h1 { line-height: 18px; color: #A69335; font-size: 17px; } .redHereText h1 { line-height: 18px; color: #AA4010; font-size: 17px; } .navyHereText h1 { line-height: 18px; color: #3f7ac4; font-size: 17px; } .orangeHereText h1 { line-height: 18px; color: #DBA33C; font-size: 17px; } .purpleHereText h1 { line-height: 18px; color: #3B44D9; font-size: 17px; } .grayHereText h1 { line-height: 18px; color: #7A8083; font-size: 17px; } [data-interaction-name="hidden-box-squares"] .cke_widget_drag_handler_container { display: none !important; } [data-interaction-name="hidden-box-square"]:not(.author_helper_grid_row) { width: 275px; } /* #endregion */ /* #region 3 Step Circular Interaction */ #Steps3Circular { width: 763px; height: 685px; z-index: 1; position: relative; margin-left: 25px; left: +100px; } #FAQModal #Steps3Circular { left: +20px; } #Steps3Circular .TriggerPanel { z-index: 4; position: relative; float: left; margin: 20px 30px 0 70px; background: url(../images/Diagrams/redbutton.png) no-repeat; } #Steps3Circular .TriggerPanel2 { z-index: 4; position: relative; float: left; margin: 20px 30px 0 30px; background: url(../images/Diagrams/bluebutton.png) no-repeat; } #Steps3Circular .TriggerPanel3 { z-index: 4; position: relative; float: left; margin: 20px 30px 0 30px; background: url(../images/Diagrams/yellowbutton.png) no-repeat; } #Steps3Circular .MainDiag5Step_Titles { z-index: 4; padding: 10px 5px 55px 5px; color: White; height: 35px; width: 160px; overflow: hidden; } #Steps3Circular .Imageback { z-index: 0; position: absolute; top: 309px; left: 300px; width: 170px; } #Steps3Circular .Image { z-index: 3; position: absolute; top: 309px; left: 300px; width: 170px; } #Steps3Circular .Imagenumbers { z-index: 2; position: absolute; top: 324px; left: 318px; width: 137px; height: 132px; background: url(../images/Diagrams/3numbCycle.png) no-repeat; } #Steps3Circular .MainDiag5Step_Text p { color: #353535; } #Steps3Circular .Box1Text { width: 242px; margin-left: 30px; margin-top: 63px; height: 347px; } #Steps3Circular .Box2Text { width: 213px; margin-left: 14px; margin-top: 64px; height: 337px; } #Steps3Circular .Box3Text { width: 462px; margin-top: 20px; text-align: center; } #Steps3Circular .Box1Text p, #Steps3Circular .Box2Text p, #Steps3Circular .Box3Text p { font-weight: bold !important; color: White !important; } #Steps3Circular .Box1 { z-index: 2; width: 280px; height: 424px; position: absolute; left: 101px; top: 258px; background: url(../images/Diagrams/ArrowYellow_S.png) no-repeat; } #Steps3Circular .Box2 { z-index: 2; width: 280px; height: 424px; position: absolute; left: 386px; top: 257px; background: url(../images/Diagrams/Arrowblue_s.png) no-repeat; } #Steps3Circular .Box3 { z-index: 2; width: 478px; height: 288px; position: absolute; left: 146px; top: 100px; background: url(../images/Diagrams/Arrowred_s.png) no-repeat; } #Steps3Circular .MainDiag5Step_Titles p { font-size: 24px; margin-top: 0; margin-bottom: 0; } /* #endregion */ /* #region Image Tag */ /*img[data-free-drag="off"] { max-width: 1059px; } img[data-free-drag="on_absolute"] { max-width: 1059px; }*/ .WizImgContainer img { max-width: 1013px; } .PictureInteraction { position: relative; /*width: 1006px !important; Removed by yves*/ float: none !important; } .PictureInteraction:after { /* ff, ie8, o, s, etc. */ content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* General Picture Info Box */ .PictureInteraction .more { position: absolute !important; width: 225px; text-align: left; overflow: visible !important; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; /* future proofing */ border: 1px solid rgba(255, 255, 255, 0); } /* make right and bottom arrow work */ .PictureInteraction .WizImgContainer { float: none !important; } .PictureInteraction .WizImgContainer .WrapperCustom_Imagetagg { position: static !important; } /* make background image align work */ .WizImgContainer.left { text-align: left; } .WizImgContainer.center { text-align: center; } .WizImgContainer.right { text-align: right; } .PictureInteraction .more.animated.NotOpen { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 3s; animation-duration: 1.5s; } .PictureInteraction .more.XLmore { width: 450px; } .PictureInteraction .more #Content p { position: relative; padding: 0px; font-size: 13px !important; font-weight: bold !important; color: White; text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 1px; } .PictureInteraction .more #Content { padding-right: 0px; visibility: visible; margin-left: 45px; margin-right: 10px; } .PictureInteraction .infoImage { float: left; padding: 0px; max-width: 32px; max-height: 32px; border: 0px; margin-left: 1px; } /*legacy caption before image2 plugin added a p tag around the icon*/ .more > img { padding-top: 5px !important; padding-left: 5px !important; } /*.WrapperCustom_interactions {clear:both}*/ .Height #Content { display: none !important; /*Do not change*/ } .Height .Controls { visibility: hidden !important; } .Height .wizControl { visibility: hidden !important; } /*Wizard */ .more .wizControl { visibility: visible; float: right; width: 100%; background-color: rgba(68, 68, 68, 0.6); border-top: 2px solid rgba(0, 0, 0, 0.24); margin-top: 9px; position: relative; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; min-height: 40px; } .more .wizControl .btn { color: #464646 !important; margin: 6px; font: 500 13px 'Open Sans'; padding: 3px 10px; background-color: #fff; background-image: -moz-linear-gradient(top, #fff, #fff); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#fff)); background-image: -webkit-linear-gradient(top, #fff, #fff); } .more .wizControl .btn:hover { color: #000; } .more .wizControl .wizClose { padding: 10px 0 0 10px; float: left; color: white !important; text-decoration: underline; } .more .wizControl .wizClose:hover { text-decoration: none; } .more .wizControl .wizNext { float: right; visibility: hidden; font-weight: 600 !important; } .more .wizControl .wizPrev { margin-right: 10px; float: right; visibility: hidden; } .more .wizControl .wizIndex { padding: 10px 0 0 10px; float: left; color: white !important; } /*Make the image float right when collpased if right edge so bring to life doesn't make the image move !*/ .PictureInteraction .RightEdge.NotOpen .infoImage { float: right; } .PictureInteraction .Height { height: 40px; } /*Arrow Code*/ .PictureInteraction .more:before { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; margin-top: 7px; border-width: 13px; } .PictureInteraction .more.LeftArrow:before { left: -26px; } .PictureInteraction .more.RightArrow:before { right: -26px; } .PictureInteraction .more.LeftArrow[data-alignment='1']:before, .PictureInteraction .more.LeftArrow[data-alignment='2']:before, .PictureInteraction .more.RightArrow[data-alignment='3']:before { bottom: 6px; } .PictureInteraction .more.TopArrow.LeftEdge:before { left: 8px; top: -33px; } .PictureInteraction .more.TopArrow.RightEdge:before { right: 8px; top: -33px; } .PictureInteraction .more.BottomArrow.LeftEdge:before { left: 8px; bottom: -26px; } .PictureInteraction .more.BottomArrow.RightEdge:before { right: 8px; bottom: -26px; } /*Colors for Boxes and Arrows*/ .PictureInteraction .Gray { background: #7A7A7A; border-color: #7A7A7A; } .PictureInteraction .Yellow { background: #DEC612; border-color: #DEC612; } .PictureInteraction .Orange { background: #FE9801; border-color: #FE9801; } .PictureInteraction .Red { background: #F55959; border-color: #F55959; } .PictureInteraction .Green { background: #63BD10; border-color: #63BD10; } .PictureInteraction .Turquoise { background: #63DEE4; border-color: #63DEE4; } .PictureInteraction .Blue { background: #3aa0d1; border-color: #3aa0d1; } .PictureInteraction .Purple { background: #A94BC7; border-color: #A94BC7; } .PictureInteraction .Custom1, .PictureInteraction .Custom2, .PictureInteraction .Custom3 { background: #7A7A7A; border-color: #7A7A7A; } .PictureInteraction .more.LeftArrow:before { border-right-color: inherit; } .PictureInteraction .more.RightArrow:before { border-left-color: inherit; } .PictureInteraction .more.TopArrow:before { border-bottom-color: inherit; } .PictureInteraction .more.BottomArrow:before { border-Top-color: inherit; } .PictureInteraction .pin_editor_controls { margin-left: 50px; color: #FFF; margin-top: 10px; } /* Remove standard drag handle from pin */ #PictureInteraction .cke_widget_drag_handler_container { display: none !important; } .WrapperCustom_AdminMenu, #PictureInteraction .WizImgContainer .WrapperCustom_Imagetagg { border-width: 0px; } .WrapperCustom_Imagetagg .WrapperCustom_Imagetagg { border-width: 0px !important; /*remove wrapper outlines for image tags*/ } /* Div Wrapper for the icon on the pin, needed to wrap in a block element so we could target the icon as an editable area ~! */ .infoImageWrapper { float: left; padding: 5px; max-width: 32px; max-height: 32px; border: 0; margin-left: 0; } .infoImageWrapper p { margin: auto; } /* Remove image resizer drag handle for the icon on a pin */ .infoImageWrapper .cke_image_resizer, /* Pin Widget - hide image resizer drag handle - */ .more .cke_widget_wrapper:hover .cke_image_resizer { display: none !important; } .ui-resizable-helper { border: 1px dashed blue; } .WizImgContainer .ui-resizable-handle { width: 23px !important; height: 23px !important; bottom: 1px !important; right: 1px !important /* reduced to prevent horizontal scroll*/; background: #3A3A3A !important; outline: none !important; background-image: url(/images/controls/drag-side.png) !important; background-repeat: no-repeat !important; background-position-x: 3px !important; background-position-y: 3px !important; border-radius: 2px !important; } .WizImgContainer .right .ui-resizable-handle { left: 0; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; } .WizImgContainer .center .ui-resizable-handle { position: sticky; left: 100%; animation: none; } /* IMAGE TAG NEW - file with other image tag css when feature complete - this was made when we extended image tag to include shapes */ .more.tag_voh { transition: width .25s } .more.tag_voh:not(:hover) { background-color: transparent !important; border-color: transparent !important; } .more.tag_voh:not(:hover) > #Content { display: none !important; } .more.tag_voh:hover > .shape_enabled, .voh_fx_temp .shape_enabled { font-size: 35px !important; transition: font-size .5s; } .shapes_preview_container { display: flex; align-items: center; right: 0; top: 0px; justify-content: center; position: absolute; font-size: 185px; border: 1px dashed rgba(102, 102, 102, 0.36) !important; z-index: 2; } .shapes_preview_container:not(.prev_bg_override) { background-color: rgba(255, 255, 255, 0.36) !important; } .modal-dialog .shapes_preview_container { top: -79px; } .shape_enabled { display: flex; float: left; padding: 0px !important; font-size: 35px; color: #fff; justify-content: center; align-items: center; width: 42px; height: 38px; background-color: transparent !important; background-image: none !important; } .cke .shape_enabled:hover::after { content: 'Edit'; position: absolute; top: 0; cursor: pointer !important; width: 34px; height: 17px; background-color: #59C3F5; opacity: .7; text-align: center; color: #FFF; padding-top: 7px; font-size: 13px !important; font-family: 'Open Sans' !important; border-radius: 0 0 10px 10px; line-height: 1; } .tagIcon.infoImage { float: left; padding: 17px; border: 0; margin: 3px 4px; background-repeat: no-repeat; background-size: contain; background-image: url('https://cdn.yardiaspire.com/images/Diagrams/Info.png'); } /* END IMAGE TAG NEW */ /* #endregion */ /* #region Accordion Interaction */ .accordion2 { overflow: visible; width: 1011px; position: relative; } .txt_yhelp + .cke .accordion2 { width: 980px; } .accordion { margin: 0 auto !important; position: relative; } .accordion2.Left > .center.accordion, .accordion2.Right > .center.accordion { margin: 0px !important; width: 100% !important; } .accordion-icon { width: 30px; vertical-align: middle; position: relative; left: -5px; padding: 0 !important; } /*.accordion-header .cke_image_resizer, .accordion-header .cke_widget_drag_handler_container { display: none !important; }*/ .accordion-header { background: white; margin-top: 10px; padding: .5em .5em .5em .7em; border: 1px solid #cccccc; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; position: relative } .accordion-header p { margin: 0px; font: bold 18px Arial; color: #1c94c4; } .accordion-Content { border: 1px solid #dddddd; background: #eeeeee; color: #333333; padding: 1em 2.2em; border-top: 0; margin-left: 31px !important; margin-right: 31px !important; position: relative; overflow: hidden !important; } .accordion-Content p { font: normal 14px Verdana !important; } .accordion-Content p:first-child { margin-top: 6px; } .accordion-Content:after { /* clearfix applied to accordion-Content as backup for structures (.accordion-Content) with missing clearfix class */ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .accordion-header .cke_widget_wrapper.Wrapperimage { border-width: 0px !important; } .accordion-header .Wrapperimage .cke_widget_drag_handler_container { display: none !important; } /* new accordion styles */ .accordion-style-flat .accordion-header { box-shadow: 0 1px 1px rgba(66, 66, 66, 0.2); border: 0px; -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; -khtml-border-top-left-radius: 0px; border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; -khtml-border-top-right-radius: 0px; border-top-right-radius: 0px; } .accordion-style-flat .accordion-header:not([class*="University"]) { background-color: rgb(248, 248, 248); } .accordion-style-flat .accordion-header::before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); right: 32px; position: absolute; right: 24px; top: 50%; height: 2px; width: 13px; background: #8EA2B1; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; content: ''; box-sizing: border-box; } .accordion-style-flat .accordion-header::after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); position: absolute; right: 15px; top: 50%; height: 2px; width: 13px; background: #8EA2B1; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; content: ''; box-sizing: border-box; } .accordion-style-flat .accordion-header.ui-accordion-header-active::before, .cke .accordion-style-flat .accordion-header::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .accordion-style-flat .accordion-header.ui-accordion-header-active::after, .cke .accordion-style-flat .accordion-header::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .accordion-style-flat .accordion-Content { border: 0px; background: #fff; box-shadow: 0 1px 1px rgba(66, 66, 66, 0.2); color: #333333; padding: 1em 2.2em; border-top: 0; margin-left: 0px !important; margin-right: 0px !important; position: relative; } .accordion-style-simple .accordion-header { border-radius: 0px; border: 0px; border: 1px dashed rgba(208, 208, 208, 0.5); } .accordion-style-simple .accordion-Content { border: 0px; background: #fff; color: #333333; padding: 0 0 0 25px; border-top: 0; margin-left: 0px !important; margin-right: 0px !important; position: relative; border: 1px dashed rgba(208, 208, 208, 0.5); border-top-width: 0px; } .accordion-style-simple .accordion-header p { font: normal 15px Verdana; } .accordion-style-simple .accordion-Content p { font: normal 14px Verdana; } .accordion-style-flat .accordion-header p, .accordion-style-simple .accordion-header p { color: #444; } .accordion-style-flat .accordion-icon, .accordion-style-simple .accordion-icon, .accordion-style-spin .accordion-icon, .accordion-style-plus .accordion-icon { display: none; } .accordion-style-flat > .accordion > .accordion-header > .ui-accordion-header-icon { visibility: hidden; } /* #region new accordion styles */ /* spin */ .accordion-style-spin .accordion .accordion-header { padding: 0; border: none; border-radius: 10px; } .accordion-style-spin .accordion .accordion-header p { display: block; padding: 20px 35px; font-size: 20px; font-weight: 600; color: #fff; background-color: inherit; background: inherit; border: none; position: relative; transition: all 0.3s ease 0s; } .accordion-style-spin .accordion-header:not([class*="University"]) { background-color: #ccc; } .accordion-style-spin .accordion .accordion-header p:first-of-type:after { content: "\ed61"; color: inherit !important; font-family: 'icomoon_EL'; font-weight: 900; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background: inherit; text-align: center; font-size: 23px; border: 5px solid #fff; position: absolute; top: 7px; left: -20px; transition: all 0.3s ease 0s; } .accordion-style-spin .accordion .accordion-header:hover p:first-of-type:after { content: "\e90b"; } .accordion-style-spin .accordion .accordion-header.ui-state-active p:first-of-type:after { content: "\e90b"; } .accordion-style-spin .accordion .accordion-header p:first-of-type:hover:after { transform: rotate(360deg); } .accordion-style-spin .accordion .accordion-Content { background: #fff; border: none; margin-left: 0px !important; } /* end spin */ /* plus */ .accordion-style-plus .accordion-header { padding: 0; border-style: solid; border-width: 1px; border-color: #e0e0e0; } .accordion-style-plus .accordion-header:not([class*="University"]) { background-color: #ccc; } .accordion-style-plus .accordion-header:before { content: ""; width: 40px; height: 100%; background: inherit; position: absolute; top: 0; left: 0; z-index: 1; } .accordion-style-plus .accordion-header p { display: block; padding: 10px 30px 10px 60px; background-image: url(/App_Themes/Images/1x1_fff.png) !important; font-size: 18px; font-weight: 700; color: #000; position: relative; } .accordion-style-plus .accordion-header p:first-of-type:before { content: "\ed61"; color: inherit !important; font-family: 'icomoon_EL'; font-weight: 900; font-size: 25px; color: #fff !important; position: absolute; top: 9px; left: 8px; z-index: 2; transition: all 0.3s ease 0s; } .accordion-style-plus .accordion-header.ui-state-active p:first-of-type:before { content: "\e90b"; } .accordion-style-plus .accordion .accordion-Content { margin-left: 1px !important; padding-left: 65px; background-color: #fff; } .accordion-style-plus .accordion .accordion-Content:before { content: ""; display: block; width: 40px; height: 100%; background: rgba(0,0,0,0.05); position: absolute; top: 0; left: 0; } /* end plus */ /* end new accordion styles */ /* simulate the icons added to this style on intialization using pseudo-elements, for inside the editor */ .cke .accordion-style-simple .accordion-header:before { content: ''; position: absolute; left: .5em; top: 50%; margin-top: -8px; background-image: url(images/ui-icons_454545_256x240.png); background-position: -64px -16px; width: 16px; height: 16px; } .cke .accordion-style-simple .accordion-header, .cke .accordion-style-flat .accordion-header { padding-left: 25px } /* #endregion */ /* ON SCREEEN CSS*/ .onscreen { position: relative; -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 100ms ease; transition: all 1400ms ease; } .accordion-header div { margin: 0; font: bold 18px Arial !important; color: #1c94c4; } .accordion-unit + .cke_widget_drag_handler_container { margin-left: 31px !important; } .accordion-unit + span.cke_reset.cke_widget_drag_handler_container { display: none !important; } .accordion-wrapper ~ .cke_widget_drag_handler_container { display: none !important; } span.cke_reset.cke_widget_drag_handler_container { z-index: 999 !important; } /* #endregion */ /* #region Compare and Contrast Interaction */ #MainDiag2Step { width: 793px; height: 535px; z-index: 1; position: relative; margin: 0 auto; } #MainDiag2Step .MainDiag5Step_Text p { color: #353535; } #MainDiag2Step .Image { z-index: 3; position: relative; left: 228px; width: 346px; } #MainDiag2Step .Box1 { z-index: 2; width: 390px; position: relative; left: 0px; top: -40px; } #MainDiag2Step .Box2 { z-index: 2; width: 350px; position: relative; top: -40px; } #MainDiag2Step .TriggerPanel { z-index: 4; position: absolute; top: 25px; margin: 0 30px 0 30px; } #MainDiag2Step .MainDiag5Step_Titles { /* border:1px solid black; */ z-index: 4; top: 37px; color: White; height: 35px; width: 280px; overflow: hidden; } #MainDiag2Step .MainDiag5Step_Box1_Top { background: url(../images/Diagrams/2step_Box1_T.png) no-repeat; height: 9px; width: 350px; font-size: 1px; } #MainDiag2Step .MainDiag5Step_Box1_Bottom { background: url(../images/Diagrams/2step_Box1_B.png) no-repeat bottom; height: 12px; width: 350px; margin-bottom: 16px; } #MainDiag2Step .MainDiag5Step_Box1_Middle { background: url(../images/Diagrams/2step_Box1_M.png) repeat-y; width: 315px; padding: 5px 20px 18px 20px; min-height: 80px; } #MainDiag2Step .MainDiag5Step_Box2_Top { background: url(../images/Diagrams/2step_Box2_T.png) no-repeat; height: 9px; width: 350px; font-size: 1px; } #MainDiag2Step .MainDiag5Step_Box2_Bottom { background: url(../images/Diagrams/2step_Box2_B.png) no-repeat bottom; height: 12px; width: 350px; margin-bottom: 16px; } #MainDiag2Step .MainDiag5Step_Box2_Middle { background: url(../images/Diagrams/2step_Box2_M.png) repeat-y; width: 315px; padding: 5px 20px 18px 20px; min-height: 80px; } #MainDiag2Step.V2 .MainDiag5Step_Box1_Top { background: url(../images/Diagrams/2step_Box1_T_V2.png) no-repeat; height: 9px; width: 350px; font-size: 1px; } #MainDiag2Step.V2 .MainDiag5Step_Box1_Bottom { background: url(../images/Diagrams/2step_Box1_B_V2.png) no-repeat bottom; height: 12px; width: 350px; margin-bottom: 16px; } #MainDiag2Step.V2 .MainDiag5Step_Box1_Middle { background: url(../images/Diagrams/2step_Box1_M_V2.png) repeat-y; width: 315px; padding: 5px 20px 18px 20px; min-height: 80px; } #MainDiag2Step.V2 .MainDiag5Step_Box2_Top { background: url(../images/Diagrams/2step_Box2_T_V2.png) no-repeat; height: 9px; width: 350px; font-size: 1px; } #MainDiag2Step.V2 .MainDiag5Step_Box2_Bottom { background: url(../images/Diagrams/2step_Box2_B_V2.png) no-repeat bottom; height: 12px; width: 350px; margin-bottom: 16px; } #MainDiag2Step.V2 .MainDiag5Step_Box2_Middle { background: url(../images/Diagrams/2step_Box2_M_V2.png) repeat-y; width: 315px; padding: 5px 20px 18px 20px; min-height: 80px; } #MainDiag2Step.V3 .MainDiag5Step_Box1_Top { background: url(../images/Diagrams/2step_Box1_T_V3.png) no-repeat; height: 9px; width: 350px; font-size: 1px; } #MainDiag2Step.V3 .MainDiag5Step_Box1_Bottom { background: url(../images/Diagrams/2step_Box1_B_V3.png) no-repeat bottom; height: 12px; width: 350px; margin-bottom: 16px; } #MainDiag2Step.V3 .MainDiag5Step_Box1_Middle { background: url(../images/Diagrams/2step_Box1_M_V3.png) repeat-y; width: 315px; padding: 5px 20px 18px 20px; min-height: 80px; } #MainDiag2Step.V3 .MainDiag5Step_Box2_Top { background: url(../images/Diagrams/2step_Box2_T_V3.png) no-repeat; height: 9px; width: 350px; font-size: 1px; } #MainDiag2Step.V3 .MainDiag5Step_Box2_Bottom { background: url(../images/Diagrams/2step_Box2_B_V3.png) no-repeat bottom; height: 12px; width: 350px; margin-bottom: 16px; } #MainDiag2Step.V3 .MainDiag5Step_Box2_Middle { background: url(../images/Diagrams/2step_Box2_M_V3.png) repeat-y; width: 315px; padding: 5px 20px 18px 20px; min-height: 80px; } #MainDiag2Step.V4 .MainDiag5Step_Box1_Top { background: url(../images/Diagrams/2step_Box1_T_V4.png) no-repeat; height: 9px; width: 350px; font-size: 1px; } #MainDiag2Step.V4 .MainDiag5Step_Box1_Bottom { background: url(../images/Diagrams/2step_Box1_B_V4.png) no-repeat bottom; height: 12px; width: 350px; margin-bottom: 16px; } #MainDiag2Step.V4 .MainDiag5Step_Box1_Middle { background: url(../images/Diagrams/2step_Box1_M_V4.png) repeat-y; width: 315px; padding: 5px 20px 18px 20px; min-height: 80px; } #MainDiag2Step.V4 .MainDiag5Step_Box2_Top { background: url(../images/Diagrams/2step_Box2_T_V4.png) no-repeat; height: 9px; width: 350px; font-size: 1px; } #MainDiag2Step.V4 .MainDiag5Step_Box2_Bottom { background: url(../images/Diagrams/2step_Box2_B_V4.png) no-repeat bottom; height: 12px; width: 350px; margin-bottom: 16px; } #MainDiag2Step.V4 .MainDiag5Step_Box2_Middle { background: url(../images/Diagrams/2step_Box2_M_V4.png) repeat-y; width: 315px; padding: 5px 20px 18px 20px; min-height: 80px; } div[data-compare-contrast-color="red-green"] .TwoStepLeftBox { background: rgba(0, 0, 0, 0) !important; background-color: #f3bbcb !important; border: 5px solid #f4f2f3; border-radius: 5px; width: 315px; padding: 5px 20px 18px 20px !important; min-height: 80px; } div[data-compare-contrast-color="red-green"] .TwoStepRightBox { background: rgba(0, 0, 0, 0) !important; background-color: #bef0c6 !important; border: 5px solid #f4f2f3; border-radius: 5px; width: 315px; padding: 5px 20px 18px 20px !important; min-height: 80px; } div[data-compare-contrast-color="green-blue"] .TwoStepLeftBox { background: rgba(0, 0, 0, 0) !important; background-color: #e1f4bc !important; border: 5px solid #f4f2f3; border-radius: 5px; width: 315px; padding: 5px 20px 18px 20px !important; min-height: 80px; } div[data-compare-contrast-color="green-blue"] .TwoStepRightBox { background: rgba(0, 0, 0, 0) !important; background-color: #bdd8f0 !important; border: 5px solid #f4f2f3; border-radius: 5px; width: 315px; padding: 5px 20px 18px 20px !important; min-height: 80px; } div[data-compare-contrast-color="grey-blue"] .TwoStepLeftBox { background: rgba(0, 0, 0, 0) !important; background-color: #e1e1e1 !important; border: 5px solid #f4f2f3; border-radius: 5px; width: 315px; padding: 5px 20px 18px 20px !important; min-height: 80px; } div[data-compare-contrast-color="grey-blue"] .TwoStepRightBox { background: rgba(0, 0, 0, 0) !important; background-color: #bdd8f0 !important; border: 5px solid #f4f2f3; border-radius: 5px; width: 315px; padding: 5px 20px 18px 20px !important; min-height: 80px; } div[data-compare-contrast-color="blue-purple"] .TwoStepLeftBox { background: rgba(0, 0, 0, 0) !important; background-color: #bcdcf4 !important; border: 5px solid #f4f2f3; border-radius: 5px; width: 315px; padding: 5px 20px 18px 20px !important; min-height: 80px; } div[data-compare-contrast-color="blue-purple"] .TwoStepRightBox { background: rgba(0, 0, 0, 0) !important; background-color: #f0bdc4 !important; border: 5px solid #f4f2f3; border-radius: 5px; width: 315px; padding: 5px 20px 18px 20px !important; min-height: 80px; } .MainDiag5Step_Titles p { font-size: 24px; margin-top: 0; margin-bottom: 0; font-weight: 600 !important; color: #fff !important; } .TwoStepLeftTitle h1, .TwoStepRightTitle h1 { color: #fff; font-weight: bold; font-size: 26px; margin: 0; } /* #endregion */ /* #region Slide Banner Interaction */ .WrapperCustom_interactions .slideUnder { border: 1px dashed rgb(204, 204, 204); min-width: 220px; } .slide-banner-sub-content { position: absolute; width: 100%; padding: 0px 30px 0 180px; box-sizing: border-box; top: 31px; bottom: 28px; overflow: hidden; } .rightSide .slide-banner-sub-content { padding: 0px 180px 0 30px; left: 0px; } .slideUnder { overflow: hidden; position: relative; padding: 28px 160px 28px 0px; float: left; min-height: 174px; } .slideUnder.rightSide { padding: 28px 0px 28px 160px; float: right; } .slideUnder.rightSide:before { left: initial; right: 0px; } .slideUnder:hover { z-index: 999999999; /*force above all while in one slide to prevent an adjacent slider to drop focus*/ } .slideUnder:not(.sliderOnBoundary)::before { -webkit-box-shadow: 0px 0 7px 2px rgb(167, 167, 167); -moz-box-shadow: 0px 0 7px 2px rgb(167, 167, 167); box-shadow: 0px 0 7px 2px rgb(167, 167, 167); content: ''; left: 0px; top: -20px; bottom: -20px; position: absolute; /*z-index: 99;*/ border-right: 1px solid rgb(214, 214, 214); } /*Hover Effects for Sliding*/ .slideUnder.SlideActive .slider_inner { transform: translateX(-3%) !important; -webkit-transform: translateX(-3%) !important; z-index: 999; } .slideUnder:not(.q8):not(.q9) .slider_inner:hover .sliderTitle { box-shadow: none !important; } .slideUnder.SlideActive.rightSide .slider_inner { transform: translateX(3%) !important; -webkit-transform: translateX(3%) !important; } .slideUnder .slider_inner { transform: translateX(-100%); -webkit-transform: translateX(-100%); border: 0px solid; -o-transition: transform 0.55s cubic-bezier(0.18, 0.89, 0.4, 1.16) 0s; -webkit-transition: -webkit-transform 0.55s; -moz-transition: transform 0.55s cubic-bezier(0.18, 0.89, 0.4, 1.16) 0s; transition: transform 0.6s cubic-bezier(0.39, 0.85, 0.4, 1.16) 0s; position: relative; border-left: none; width: 100%; z-index: 9999999999999999; } .slideUnder.rightSide .slider_inner { transform: translateX(100%); -webkit-transform: translateX(100%); } /*Main Box*/ .slideUnder .slider_inner .contentbox { float: left; padding: 0px 20px 10px 35px; border: 1px solid #eee; background-color: #fdfdfd; width: 100%; box-sizing: border-box; } /*Side Tab - Title*/ .slideUnder .slider_inner .sliderTitle { float: right; padding: 5px 10px 0 20px; width: 160px; word-wrap: break-word; top: 0; bottom: 0; right: -160px; height: 100%; /* min-width: 94px; */ position: absolute; border-radius: 0 13px 13px 0; border-width: 0px; border-style: solid; box-sizing: border-box; box-shadow: inset 50px -50px 100px hsla(0, 0%, 0%, 0.05), inset 13px 0 9px -7px rgba(0, 0, 0, 0.3); z-index: 0; overflow-y: hidden; outline: none !important; } .slideUnder .slider_inner .sliderTitle p { font-size: 22px; color: #FFFFFF; font-family: 'open sans'; margin-top: 3px; margin-bottom: 0px; } /*Right Side*/ .slideUnder.rightSide .slider_inner .sliderTitle { left: -160px; border-radius: 13px 0 0 13px; box-shadow: inset 50px -50px 100px hsla(0, 0%, 0%, 0.05), inset -12px 0 9px -7px rgba(0,0,0,0.4); } /* Styles */ /* Bookmark - General */ div[class*="SlideBookmark"] .sliderTitle { background-repeat: repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTCtCgrAAAAADElEQVQYV2M4fPgwAASWAkrEwwbGAAAAAElFTkSuQmCC); } /* Default - old - */ .slideUnder.SlideBookmark .sliderTitle:after { position: absolute; content: ''; width: 33px; top: 0; height: 37px; background: #3aa0d1; border-radius: 0 0 30px 30px; z-index: -1; right: 10px; } .slideUnder.SlideBookmark.rightSide .sliderTitle:after { left: 10px; right: initial; } /* Slide Banner - Bookmark Pseudo Element General Css */ div[class*="SlideBookmark"] .sliderTitle:after { position: absolute; width: 33px; top: 0; height: 37px; background: #3aa0d1; color: #efefef; background-color: inherit; border-radius: 0 0 30px 30px; z-index: -1; right: 10px; font-size: 25px; font-family: 'icomoon_EL'; line-height: 31px; padding-left: 3px; text-align: center; } div[class*="SlideBookmark"].rightSide .sliderTitle:after { left: 10px; right: initial; } .slideUnder.SlideBookmark1 .sliderTitle:after { content: '\f059'; font-size: 25px; line-height: 35px; } .slideUnder.SlideBookmark2 .sliderTitle:after { content: '\e432'; font-size: 19px; } .slideUnder.SlideBookmark3 .sliderTitle:after { content: '\e356'; font-size: 21px; padding-left: 2px; padding-right: 1px; } .slideUnder.SlideBookmark4 .sliderTitle:after { content: '\eba7'; font-size: 21px; line-height: 35px; padding-left: 2px; padding-right: 1px; color: #efde00; } .slideUnder[class*="SlideBookmark"][data-slide-banner-bookmark-style="bookmark1"] .sliderTitle:after { content: '\f059'; font-size: 25px; line-height: 35px; } .slideUnder[class*="SlideBookmark"][data-slide-banner-bookmark-style="bookmark2"] .sliderTitle:after { content: '\e432'; font-size: 19px; } .slideUnder[class*="SlideBookmark"][data-slide-banner-bookmark-style="bookmark3"] .sliderTitle:after { content: '\e356'; font-size: 21px; padding-left: 2px; padding-right: 1px; } .slideUnder[class*="SlideBookmark"][data-slide-banner-bookmark-style="bookmark4"] .sliderTitle:after { content: '\eba7'; font-size: 21px; line-height: 35px; padding-left: 2px; padding-right: 1px; color: #efde00; } /* leaf */ .slideUnder.SlideLeaf .sliderTitle { border-radius: 100px 0; height: 116px; } .slideUnder.SlideLeaf .contentbox { border-radius: 0 100px 0 0; } .slideUnder.rightSide.SlideLeaf .sliderTitle { border-radius: 0 100px !important; } .slideUnder.rightSide.SlideLeaf .contentbox { border-radius: 100px 0 0 0; } /* Color edge*/ .slideUnder.SlideModern .sliderTitle { background-color: #fff !important; box-shadow: inset 50px -50px 100px hsla(0, 0%, 75%, 0.05), inset 13px 0 9px -7px rgba(255, 255, 255, 0.3) !important; border-width: 5px; border-left-width: 2px; margin-right: 1px; padding-top: 0px; } .slideUnder.SlideModern.rightSide .sliderTitle { border-width: 5px 2px 5px 5px; margin-left: 1px; } .slideUnder.SlideModern:hover .sliderTitle { margin-left: 0px; margin-right: 0px; } .slideUnder.SlideModern .slider_inner .sliderTitle p { color: #444; } /*SlideSquare*/ .slideUnder.SlideSquare .sliderTitle { border-radius: 0 !important; } /*lottery*/ .slideUnder.SlideLottery .sliderTitle { z-index: -1; } .slideUnder.SlideLottery .contentbox:before { content: ""; position: absolute; width: 30px; height: 30px; right: -160px; background-color: #fff; border-radius: 0 0 0 30px; top: 0px; top: -1px; margin-right: -1px; } .slideUnder.SlideLottery .contentbox:after { content: ""; position: absolute; width: 30px; height: 30px; right: -160px; bottom: 0px; background-color: #fff; border-radius: 30px 0px 0px 0px; bottom: -1px; margin-right: -1px; } .slideUnder.rightSide.SlideLottery .contentbox:before { left: -160px; right: initial; border-radius: 0px 0px 30px 0px; } .slideUnder.rightSide.SlideLottery .contentbox:after { left: -160px; right: initial; border-radius: 0px 30px 0px 0px; } /*Hexagon*/ .slideUnder.hexagon .sliderTitle:before, .slideUnder.hexagon .sliderTitle:after, .slideUnder.hexagonLong .sliderTitle:before, .slideUnder.hexagonLong .sliderTitle:after { content: ""; position: absolute; width: 0; border-color: transparent; border-left: 150px solid transparent; border-right: 150px solid transparent; border-style: solid; right: 9px; left: initial; } .slideUnder.hexagon .sliderTitle, .slideUnder.hexagonLong .sliderTitle { box-shadow: none !important; padding-top: 0; } .slideUnder.rightSide.hexagon .sliderTitle:before, .slideUnder.rightSide.hexagon .sliderTitle:after, .slideUnder.rightSide.hexagonLong .sliderTitle:before, .slideUnder.rightSide.hexagonLong .sliderTitle:after { right: 9px; left: initial; } .slideUnder.hexagonLong .sliderTitle:before, .slideUnder.hexagonLong .sliderTitle:after { border-left: 950px solid transparent; border-right: 600px solid transparent; } .slideUnder.hexagon .sliderTitle:before, .slideUnder.hexagonLong .sliderTitle:before { top: -16px; border-bottom-width: 13px; border-bottom-color: inherit; } .slideUnder.hexagon .sliderTitle:after { bottom: -16px; border-top-width: 13px; border-top-color: inherit; } .slideUnder.hexagonLong .sliderTitle:after { bottom: -83px; border-top-width: 80px; border-top-color: inherit; } .slideUnder.hexagonLong .sliderTitle:before { top: -83px; border-bottom-width: 80px; border-bottom-color: inherit; } .slideUnder.hexagon:before, .slideUnder.hexagonLong:before { box-shadow: 0px 0 8px 4px rgb(121, 121, 121); } /* Left Aligned Hexagon p-element */ .slideUnder.hexagon .contentbox { /* border-bottom: 26px solid #3aa0d1; */ /* border-top: 26px solid #3aa0d1; */ border-bottom-color: #3aa0d1; border-top-color: #3aa0d1; border-top-width: 0px; border-bottom-width: 0px; } .slideUnder.hexagon .contentbox:after { content: ""; position: absolute; width: 0px; height: 0px; border-left: 160px solid transparent; border-right: 161px solid transparent; border-bottom: 26px solid #3aa0d1; top: -25px; right: -149px; border-bottom-color: inherit; } .slideUnder.hexagon .contentbox:before { content: ""; position: absolute; width: 0px; height: 0px; border-left: 160px solid transparent; border-right: 161px solid transparent; border-top: 26px solid #3aa0d1; /* border-top: inherit; */ bottom: -25px; right: -149px; border-top-color: inherit; } /* Right Aligned Hexagon p-element */ .slideUnder.rightSide.hexagon .contentbox:after { left: -149px; } .slideUnder.rightSide.hexagon .contentbox:before { left: -149px; } /* Tilt */ .slideUnder.tilt .slider_inner { transform: translateX(-100.5%) rotate(-4deg) translateY(10px); -webkit-transform: translateX(-100.5%) rotate(-4deg) translateY(10px); } .slideUnder.rightSide.tilt .slider_inner { transform: translateX(100.5%) rotate(4deg) translateY(10px); -webkit-transform: translateX(100.5%) rotate(4deg) translateY(10px); } .slideUnder.tilt .slider_inner.slider_extended_tilt { transform: translateX(-100.5%) rotate(-4deg) translateY(28px); -webkit-transform: translateX(-100.5%) rotate(-4deg) translateY(28px); } .slideUnder.rightSide.tilt .slider_inner.slider_extended_tilt { transform: translateX(100.5%) rotate(4deg) translateY(28px); -webkit-transform: translateX(100.5%) rotate(4deg) translateY(28px); } /* Deprecated styles for slide banner interaction - kept for future styling - /*circle*/ /*.slideUnder.q3 .contentbox { min-height: 160px; } .slideUnder.rightSide.q3 .sliderTitle { border-radius: 100%; height: 160px; margin-left: 80px; padding-left: 5px; padding-right: 81px; } .slideUnder.q3 .sliderTitle { border-radius: 100%; height: 160px; margin-right: 80px; padding-left: 87px; }*/ /*sharp pull tab*/ /*.slideUnder.q8 .contentbox:before { top: 0px; border-bottom: 30px solid rgba(230, 0, 0, 0); border-top: 0; bottom: initial; border-top-width: 0px !important; } .slideUnder.q8 .contentbox:before, .slideUnder.q8 .contentbox:after { content: ""; position: absolute; width: 0px; height: 0px; border-top: 30px solid rgba(255, 255, 255, 0); border-left-color: #ffffff; border-left-style: solid; border-left-width: 52px; right: -52px; bottom: 0px; } .slideUnder.q8.rightSide .contentbox:after { left: -52px; top: 0px; transform: rotate(180deg); } .slideUnder.q8.rightSide .contentbox:before { left: -52px; bottom: 0px; transform: rotate(180deg); top: initial; }*/ /*Long pull tab*/ /* .slideUnder.q9 .contentbox:before { top: 0px; border-bottom: 30px solid rgba(230, 0, 0, 0); border-top: 0; bottom: initial; border-top-width: 0px !important; } .slideUnder.q9 .contentbox:before, .slideUnder.q9 .contentbox:after { content: ""; position: absolute; width: 0px; height: 0px; border-top: 30px solid rgba(255, 255, 255, 0); border-left-color: #ffffff; border-left-style: solid; border-left-width: 160px; right: -160px; bottom: 0px; } .slideUnder.q9 .sliderTitle { border-radius: 0 !important; padding-top: 7px !important; } .slideUnder.q9.rightSide .contentbox:after { left: -160px; top: 0px; transform: rotate(180deg); } .slideUnder.q9.rightSide .contentbox:before { left: -160px; bottom: 0px; transform: rotate(180deg); top: initial; }*/ /*rocket engin cone*/ /*slideUnder.q10 .sliderTitle { border-radius: 0 !important; } .slideUnder.q10 .contentbox:before { top: 0px; border-bottom: 22px solid rgba(191, 5, 5, 0); border-top: 0; bottom: initial; border-top-width: 0px !important; } .slideUnder.q10 .contentbox:after { content: ""; position: absolute; width: 0px; height: 0px; border-top: 22px solid rgba(255, 255, 255, 0); border-left-color: #ffffff; border-left-style: solid; border-left-width: 22px; right: -160px; bottom: 0px; } .slideUnder.q10 .contentbox:before { content: ""; position: absolute; width: 0px; height: 0px; border-top: 22px solid rgba(255, 255, 255, 0); border-left-color: #ffffff; border-left-style: solid; border-left-width: 22px; right: -160px; bottom: 0px; } .slideUnder.q10.rightSide .contentbox:after { left: -160px; top: 0px; transform: rotate(180deg); } .slideUnder.q10.rightSide .contentbox:before { left: -160px; bottom: 0px; transform: rotate(180deg); top: initial; }*/ /* #endregion */ /* #region Slider Interaction */ /* Wrappers */ .slider-interaction-widget { position: relative; margin-right: 0px; } .slider-interaction-tile-outter-wrapper { overflow: hidden; width: 100%; position: relative; } .WrapperCustom_interactions .slider-interaction-widget ~ .cke_widget_drag_handler_container { display: none !important; } .WrapperCustom_interactions .slider-interaction-widget:hover + .cke_widget_drag_handler_container { display: block !important; } /* Tiles */ .hidden-tile { display: none !important; } /* Slider Interaction - Tile Images */ /* Quick Tools */ .cd-slider .widget-quick-tools { display: none !important; } .project-info .cke_widget_wrapper:hover .widget-quick-tools { display: block !important; } /* Resizer */ .cd-slider:hover .cke_image_resizer { display: none !important; } /* Drag Handle */ .cd-slider .cke_widget_drag_handler_container { display: none !important; } .project-info .cke_widget_wrapper:hover + .cke_widget_drag_handler_container { display: block !important; } /* Tile */ .cd-slider .project-info-image p { margin: 0px !important; padding: 0px !important; line-height: 0 !important; } .cd-slider .project-info-image .cke_widget_wrapper { border: none !important; } .cd-slider img { display: block; width: 231px; height: 174.75px; margin: 0px !important; } .cd-slider .project-info { padding: 14px 10px 10px 10px; border-radius: 0 0 .25em .25em; text-align: center; height: 173px; box-sizing: border-box; overflow: hidden; transition: border 150ms; } .cd-slider .project-info p { color: #444; } /* End - Slider Interaction Tile Images */ /* Edit Tabs */ .slides-in:hover .Wrapperimage .widget_EditTab { display: block; margin: 0px; } .slides-in:hover > .widget_EditTab { display: block; } .slider-interaction-tile-edit-tab { width: 90px; padding: 4px 4px 7px 5px; right: 62px; background-color: rgb(89, 195, 245) !important; border-radius: 0px 0px 20px 20px; top: 173px; height: 15px; font-size: 15px !important; font-family: 'Open Sans' !important; line-height: 16px !important; } div[data-slider-style="Thumbnails"] .slider-interaction-tile-edit-tab { border-radius: 40px 40px 0px 0px; top: 147px; } div[data-slider-style="Boxes"] .slider-interaction-tile-edit-tab, div[data-slider-style="Modern"] .slider-interaction-tile-edit-tab { top: -1px !important; } /* Expirementing with simple update button on image */ .slider-interaction-widget .widget-socials .primary-user { display: none; } .WrapperCustom_interactions .slider-interaction-widget .widget-socials .primary-user { color: #fff; font-weight: 300; margin: 0; padding: 0; position: absolute; font-size: 40px; line-height: 45px; z-index: 1; right: 64px; top: 35px; float: none; display: block; } /* Admin Controls */ .slider-interaction-widget-dropdown-label { background-color: red; } .slider-interaction-widget-dropdown { width: 125px !important; height: 25px; padding-top: 8px; margin-top: 1px; right: 8px; position: absolute; } /* Tile FX -- cursor and various other fx */ .cd-slider > li:hover { cursor: pointer !important; margin-top: 5px; margin-bottom: -5px; } /* Content Panel Navigation */ .slider-content-panel-nav div { position: absolute; top: -1px; bottom: -1px; width: 35px; background: url(Images/Squeezebox_Interaction/cd-arrow.svg) no-repeat center center; background-size: 38px; background-color: #505152; cursor: pointer; } .nextPanel { right: -1px; left: auto; } .prevPanel { left: -1px; transform: rotate(180deg); } /* Patterns - reusable parts of our design */ .cd-btn { display: inline-block; padding: 1.4em 8em; background-color: #eebb00; box-shadow: 0 1px 20px rgba(238, 187, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4); color: #ffffff !important; font-size: 1.3rem; font-weight: bold; text-transform: uppercase; letter-spacing: 4px; -webkit-transition: box-shadow 0.2s; -moz-transition: box-shadow 0.2s; transition: box-shadow 0.2s; text-decoration: none !important; } .no-touch .cd-btn:hover { box-shadow: 0 1px 30px rgba(238, 187, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .cd-img-replace { /* replace text with image */ color: transparent; overflow: hidden; text-indent: 100%; white-space: nowrap; } /*course override*/ .ContentDIV .cd-projects-wrapper { padding-top: 14px !important; } .ContentDIV .slider-interaction-widget { margin-top: 25px; } /* Projects Slider */ .cd-projects-wrapper { width: 100%; /*background-color: #ffffff;*/ -webkit-transition: visibility 0s 0.5s; -moz-transition: visibility 0s 0.5s; transition: visibility 0s 0.5s; overflow: hidden; padding-top: 54px !important; } .cd-projects-wrapper::before { /* never visible - this is used in jQuery to check the current MQ */ content: 'mobile'; display: none; } .cd-projects-wrapper.projects-visible { display: block; -webkit-transition: visibility 0s 0s; -moz-transition: visibility 0s 0s; transition: visibility 0s 0s; } .projects-visible .cd-slider { /* smooth scrolling on iOS */ -webkit-overflow-scrolling: touch; } .cd-slider li.slides-in { -webkit-transition: -webkit-transform 0.48s 0.15s; -moz-transition: -moz-transform 0.48s 0.15s; transition: transform 0.48s 0.15s; /* this class is used to trigger the entrance animation */ -webkit-animation: none; -moz-animation: none; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(0); -webkit-transform: translateY(0); } .cd-slider li.slides-in h2 { display: block !important; font-size: 1.5em !important; } .cd-slider { width: 3500px; margin-top: 0px; margin-bottom: 0px; padding-left: 0px; padding-bottom: 8px; top: 0; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; /* Force hardware acceleration */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cd-slider::after { clear: both; content: ""; display: table; } .cd-slider li { list-style-type: none !important; margin: 4%; border-radius: .25em; -webkit-transition: opacity 0s 0.5s; -moz-transition: opacity 0s 0.5s; transition: opacity 0s 0.5s; /* Force hardware acceleration */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; float: left; width: 231px; margin: 0 38px 0 0; top: 50%; padding-top: 0px !important; -webkit-transform: translateX(400%) translateY(-50%) rotate(-10deg); -moz-transform: translateX(400%) translateY(-50%) rotate(-10deg); -ms-transform: translateX(400%) translateY(-50%) rotate(-10deg); -o-transform: translateX(400%) translateY(-50%) rotate(-10deg); transform: translateX(400%) translateY(-50%) rotate(-10deg); -webkit-transition: opacity 0s 0.3s, -webkit-transform 0s 0.3s; -moz-transition: opacity 0s 0.3s, -moz-transform 0s 0.3s; transition: opacity 0s 0.3s, transform 0s 0.3s; } .cd-slider li.slides-in:first-of-type { /* change transition duration/delay for the entrance animation */ -webkit-transition: -webkit-transform 0.55s 0s; -moz-transition: -moz-transform 0.55s 0s; transition: transform 0.55s 0s; } .cd-slider li.slides-in:nth-of-type(2) { -webkit-transition: -webkit-transform 0.53s 0.05s; -moz-transition: -moz-transform 0.53s 0.05s; transition: transform 0.53s 0.05s; } .cd-slider li.slides-in:nth-of-type(3) { -webkit-transition: -webkit-transform 0.5s 0.1s; -moz-transition: -moz-transform 0.5s 0.1s; transition: transform 0.5s 0.1s; } .cd-slider li.slides-in:nth-of-type(4) { -webkit-transition: -webkit-transform 0.48s 0.15s; -moz-transition: -moz-transform 0.48s 0.15s; transition: transform 0.48s 0.15s; } /* Animation for Next Tiles */ .cd-slider.next li.current { /* next slide animation */ -webkit-animation: cd-slide-1 0.5s; -moz-animation: cd-slide-1 0.5s; animation: cd-slide-1 0.5s; } .cd-slider.next li.current + li { -webkit-animation: cd-slide-2 0.5s; -moz-animation: cd-slide-2 0.5s; animation: cd-slide-2 0.5s; } .cd-slider.next li.current + li + li { -webkit-animation: cd-slide-3 0.5s; -moz-animation: cd-slide-3 0.5s; animation: cd-slide-3 0.5s; } .cd-slider.next li.current + li + li + li + li { -webkit-animation: cd-slide-4 0.5s; -moz-animation: cd-slide-4 0.5s; animation: cd-slide-4 0.5s; } .cd-slider.next li.current + li + li + li + li + li { -webkit-animation: cd-slide-5 0.5s; -moz-animation: cd-slide-5 0.5s; animation: cd-slide-5 0.5s; } .cd-slider.next li.current + li + li + li + li + li ~ li { -webkit-animation: cd-slide-6 0.5s; -moz-animation: cd-slide-6 0.5s; animation: cd-slide-6 0.5s; } /* Animation for Next Tiles */ .cd-slider.prev li { /* previous slide animation */ -webkit-animation: cd-slide-7 0.5s; -moz-animation: cd-slide-7 0.5s; animation: cd-slide-7 0.5s; } .cd-slider.prev li.previous { /* previous slide animation - the previous class is used to target the slide which was visible right before the current one */ -webkit-animation: cd-slide-1 0.5s; -moz-animation: cd-slide-1 0.5s; animation: cd-slide-1 0.5s; } .cd-slider.prev li.previous + li { -webkit-animation: cd-slide-2 0.5s; -moz-animation: cd-slide-2 0.5s; animation: cd-slide-2 0.5s; } .cd-slider.prev li.previous + li + li { -webkit-animation: cd-slide-3 0.5s; -moz-animation: cd-slide-3 0.5s; animation: cd-slide-3 0.5s; } .cd-slider.prev li.current + li { -webkit-animation: cd-slide-4 0.5s; -moz-animation: cd-slide-4 0.5s; animation: cd-slide-4 0.5s; } .cd-slider.prev li.current + li + li { -webkit-animation: cd-slide-5 0.5s; -moz-animation: cd-slide-5 0.5s; animation: cd-slide-5 0.5s; } .cd-slider.prev li.current, .cd-slider.prev li.current + li + li ~ li { -webkit-animation: none; -moz-animation: none; animation: none; } @-webkit-keyframes cd-slide-1 { 50% { -webkit-transform: translateX(-85%); } } @-moz-keyframes cd-slide-1 { 50% { -moz-transform: translateX(-85%); } } @keyframes cd-slide-1 { 50% { -webkit-transform: translateX(-85%); -moz-transform: translateX(-85%); -ms-transform: translateX(-85%); -o-transform: translateX(-85%); transform: translateX(-85%); } } @-webkit-keyframes cd-slide-2 { 50% { -webkit-transform: translateX(-55%); } } @-moz-keyframes cd-slide-2 { 50% { -moz-transform: translateX(-55%); } } @keyframes cd-slide-2 { 50% { -webkit-transform: translateX(-55%); -moz-transform: translateX(-55%); -ms-transform: translateX(-55%); -o-transform: translateX(-55%); transform: translateX(-55%); } } @-webkit-keyframes cd-slide-3 { 50% { -webkit-transform: translateX(-23%); } } @-moz-keyframes cd-slide-3 { 50% { -moz-transform: translateX(-23%); } } @keyframes cd-slide-3 { 50% { -webkit-transform: translateX(-23%); -moz-transform: translateX(-23%); -ms-transform: translateX(-23%); -o-transform: translateX(-23%); transform: translateX(-23%); } } @-webkit-keyframes cd-slide-4 { 50% { -webkit-transform: translateX(23%); } } @-moz-keyframes cd-slide-4 { 50% { -moz-transform: translateX(23%); } } @keyframes cd-slide-4 { 50% { -webkit-transform: translateX(23%); -moz-transform: translateX(23%); -ms-transform: translateX(23%); -o-transform: translateX(23%); transform: translateX(23%); } } @-webkit-keyframes cd-slide-5 { 50% { -webkit-transform: translateX(55%); } } @-moz-keyframes cd-slide-5 { 50% { -moz-transform: translateX(55%); } } @keyframes cd-slide-5 { 50% { -webkit-transform: translateX(55%); -moz-transform: translateX(55%); -ms-transform: translateX(55%); -o-transform: translateX(55%); transform: translateX(55%); } } @-webkit-keyframes cd-slide-6 { 50% { -webkit-transform: translateX(65%); } } @-moz-keyframes cd-slide-6 { 50% { -moz-transform: translateX(65%); } } @keyframes cd-slide-6 { 50% { -webkit-transform: translateX(65%); -moz-transform: translateX(65%); -ms-transform: translateX(65%); -o-transform: translateX(65%); transform: translateX(65%); } } @-webkit-keyframes cd-slide-7 { 50% { -webkit-transform: translateX(-95%); } } @-moz-keyframes cd-slide-7 { 50% { -moz-transform: translateX(-95%); } } @keyframes cd-slide-7 { 50% { -webkit-transform: translateX(-95%); -moz-transform: translateX(-95%); -ms-transform: translateX(-95%); -o-transform: translateX(-95%); transform: translateX(-95%); } } /* Project slider navigation */ .cd-slider-navigation { margin: 0px; display: block; padding: 0; height: 0px; } .cd-slider-navigation a { position: absolute; top: 51%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: 0; height: 60px; width: 45px; background: url(Images/Squeezebox_Interaction/cd-arrow.svg) no-repeat center center; -webkit-transition: opacity 0.2s 0s, visibility 0s 0s; -moz-transition: opacity 0.2s 0s, visibility 0s 0s; transition: opacity 0.2s 0s, visibility 0s 0s; background-color: #505152; border-radius: 2px; -webkit-box-shadow: 0px 0px 11px 0px rgba(255,255,255,1); -moz-box-shadow: 0px 0px 11px 0px rgba(255,255,255,1); box-shadow: -1px 0px 8px 0px rgb(255, 255, 255); } .cd-slider-navigation a.next { right: 0; left: auto; } .cd-slider-navigation a.prev { -webkit-transform: translateY(-50%) rotate(180deg); -moz-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); -o-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .cd-slider-navigation a.inactive { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s; -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s; transition: opacity 0.2s 0s, visibility 0s 0.2s; } /* Project content panel */ .cd-project-content { position: absolute; top: 0; display: none; background-color: #ffffff; border: 1px solid #d2d2d2; width: 99%; margin-left: 0px; z-index: 999; animation-duration: .6s !important; margin-bottom: 30px; padding-left: 55px; box-sizing: border-box; } .cd-project-content > div > * { max-width: 890px; } .cd-project-content.is-visible { display: block; } /* force current slide to stay on top during animation*/ .cd-project-content.fadeOutDown { z-index: 9999999; } .cd-project-content h2 { display: block !important; font-size: 35px !important; font-weight: bold !important; margin-top: 25px !important; margin-bottom: 25px !important; } /*.cd-project-content em { display: block; font-size: 1.8rem; font-style: italic; margin: 1em auto; }*/ .cd-project-content .close { display: block; height: 32px; width: 32px; position: absolute; top: 15px; right: 43px; background: url(Images/Squeezebox_Interaction/cd-close-dark.svg) no-repeat center center; background-size: contain; opacity: .9; } /* Keyframes */ @-webkit-keyframes cd-translate { 0% { opacity: 0; -webkit-transform: translateY(100px); } 100% { -webkit-transform: translateY(0); opacity: 1; } } @-moz-keyframes cd-translate { 0% { opacity: 0; -moz-transform: translateY(100px); } 100% { -moz-transform: translateY(0); opacity: 1; } } @keyframes cd-translate { 0% { opacity: 0; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } } /* styles */ div[data-slider-style="Modern"] .cd-slider .project-info { background: #fff !important; border-bottom: 6px solid; } div[data-slider-style="Modern"] .cd-slider .slides-in:hover .project-info { border-bottom-width: 25px; } div[data-slider-style="Modern"] .cd-slider .SliderHelp p { bottom: 0px; position: absolute; text-align: center; width: 91%; margin: 5px 0px; display: block !important; color: inherit; } .cke_inner div[data-slider-style="Modern"] .cd-slider .SliderHelp p { margin: 23px 0px; } div[data-slider-style="Modern"] .cd-slider .slides-in:hover .SliderHelp p { color: #fff; } div[data-slider-style="Modern"] .cd-slider > li:hover { margin-top: 0px; margin-bottom: 0px; } div[data-slider-style="Modern"] > .slider-interaction-tile-outter-wrapper > .cd-projects-wrapper > .cd-slider > li .project-info-image, div[data-slider-style="Default"] div.SliderHelp, div[data-slider-style="Boxes"] div.SliderHelp, div[data-slider-style="Thumbnails"] div.SliderHelp { display: none; } div[data-slider-style="Thumbnails"] > .slider-interaction-tile-outter-wrapper > .cd-projects-wrapper > .cd-slider > li .project-info, div[data-slider-style="Thumbnails"] > .slider-interaction-tile-outter-wrapper > .Admin > .admin-panel > .admin-panel-select-slider-color, div[data-slider-style="Boxes"] > .slider-interaction-tile-outter-wrapper > .cd-projects-wrapper > .cd-slider > li .project-info-image { display: none; } /* slide n' reveal (type 1 = allow hidden content panes, type 2 = no hidden content panes */ div[data-slider-style*="Reveal"] .slides-in .project-info-image { position: relative; background: #333; z-index: 1; transform: translateY(83px); transition: transform 0.5s; } div[data-slider-style*="Reveal"] .slides-in .project-info { position: relative; box-sizing: border-box; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8); transform: translateY(-90px); transition: transform 0.5s; } div[data-slider-style*="Reveal"] .slides-in:hover .project-info-image { transform: translateY(0); opacity: .9; } div[data-slider-style*="Reveal"] .slides-in:hover .project-info { transform: translateY(0); } div[data-slider-style*="Reveal"] .slides-in h2 { display: block !important; font-size: 1.5em !important; margin: 10px 0px; } div[data-slider-style*="Reveal"] .SliderHelp, div[data-slider-style="Reveal_simple"] .slider-interaction-tile-edit-tab { display: none !important; } ​​​​​​​ /* all */ .cd-slider > li:hover * { cursor: pointer; } .cd-project-content.first_slide .prevPanel { display: none !important; } .cd-project-content.last_slide .nextPanel { display: none !important; } /* #endregion */ /* #region Flash Deck Interaction */ .interactionWidget.flashDeck { padding: 1px; } .deck { height: 356px; list-style: none; margin: 15px auto; padding: 0; position: relative; text-align: center; width: 500px; background: none; } .card { display: none; height: 300px; position: relative; width: 500px; border-color: inherit; position: absolute; background: #fff; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTCtCgrAAAAADElEQVQYV2P4//8/AAX+Av6nNYGEAAAAAElFTkSuQmCC) !important; } .card:first-child { display: block; } .card_off { display: none !important /* important needed to fix a bug and overite the inline style for display.*/; } .side_one, .side_two { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -ms-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; height: inherit; position: absolute; width: inherit; overflow: hidden; box-sizing: border-box; -webkit-box-shadow: 0 3px 5px rgba(181, 181, 181, 0.65); -moz-box-shadow: 0 3px 5px rgba(181, 181, 181, 0.65); box-shadow: 0 3px 5px rgba(181, 181, 181, 0.65); border-top: 1px solid rgba(214, 214, 214, 0.23); background-color: inherit; } /*Slide reference*/ .side_one:after, .side_two:after { content: 'Front'; position: absolute; top: 3px; right: 6px; font-size: 12px; font-family: 'open sans'; color: #777; } .quickDeck .side_one:after, .quickDeck .side_two:after { content: ''; } .side_two:after { content: 'Back'; } /*Slide Count*/ .side_one:before { content: attr(data-countInfo); position: absolute; top: 3px; left: 6px; font-size: 12px; font-family: 'open sans'; color: #777; } /*Card styles : Classic : Default, roundClassic , Simple, Metro, Paperstack -- deck University_MetroBlue Metro*/ .deck.classicFlash .side_one, .deck.classicFlash .side_two { padding-top: 46px; background-image: linear-gradient(rgb(255, 188, 218) 0px,#ff78b4 2px, rgba(255, 255, 255, 0) 0px); background-position: 0 44px; } .deck.classicFlash .side_one p { margin-top: 9px; border-bottom: 1px solid rgba(127, 191, 255, 0.72); } .deck.metroFlash .side_one, .deck.metroFlash .side_two { border-top-width: 10px; border-top-style: solid; border-color: inherit; background: #f7f7f7 !important; } .deck.roundClassicFlash .side_one, .deck.roundClassicFlash .side_two { border-radius: 17px; } /*NAV*/ .nav_deck { cursor: pointer; position: relative; bottom: -315px; width: 323px; margin: 0 auto; height: 37px; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ } .nav_deck .btnNext, .nav_deck .btnPrev { position: absolute; left: 0; top: 0px; cursor: pointer; border-radius: 4px 0 0 4px; height: 40px; width: 70px; font-size: 28px; line-height: 39px; background-color: #efefef; border: 1px solid #E4E4E4; text-align: center; } .nav_deck .btnNext { left: auto; right: 0px; border-radius: 0 4px 4px 0; } .nav_deck .btnPrev:before, .nav_deck .btnNext:before { content: '‹'; position: absolute; font-size: 41px; top: -2px; right: 0px; width: 100%; } .nav_deck .btnNext:before { content: '›'; } .nav_deck .btnFlip { cursor: pointer; height: 40px; width: 179px; font-size: 28px; color: #777; line-height: 39px; background-color: #fbfbfb; border: 1px solid #ececec; text-align: center; display: block; margin: auto; } .nav_deck .btnNext:hover, .nav_deck .btnPrev:hover { background-color: #dcdcdc; } .nav_deck .btnFlip:hover { background-color: #f7f7f7; } /*Animation*/ .side_two { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -180deg); transform: perspective(400px) rotate3d(1, 0, 0, -180deg); animation-name: none; } .flip .side_two { animation-name: flipInX2; } .side_one, .side_two { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes flipOutX2 { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg); transform: perspective(400px) rotate3d(1, 0, 0, 0deg); -webkit-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); -moz-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 180deg); transform: perspective(400px) rotate3d(1, 0, 0, 180deg); -webkit-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); -moz-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); } } @-webkit-keyframes flipOutX2 { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg); transform: perspective(400px) rotate3d(1, 0, 0, 0deg); box-shadow: 0 10px 5px rgba(181,181,181,.65); } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 180deg); transform: perspective(400px) rotate3d(1, 0, 0, 180deg); } } .flipOutX2 { -webkit-animation-name: flipOutX2; animation-name: flipOutX2; } @keyframes flipInX2 { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -180deg); transform: perspective(400px) rotate3d(1, 0, 0, -180deg); -webkit-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); -moz-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg); transform: perspective(400px) rotate3d(1, 0, 0, 0deg); } } @-webkit-keyframes flipInX2 { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -180deg); transform: perspective(400px) rotate3d(1, 0, 0, -180deg); -webkit-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); -moz-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg); transform: perspective(400px) rotate3d(1, 0, 0, 0deg); } } .flipInX2 { -webkit-animation-name: flipInX2; animation-name: flipInX2; } @keyframes flipOutX2_R { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 180deg); transform: perspective(400px) rotate3d(1, 0, 0, 180deg); -webkit-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); -moz-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg); transform: perspective(400px) rotate3d(1, 0, 0, 0deg); } } @-webkit-keyframes flipOutX2_R { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 180deg); transform: perspective(400px) rotate3d(1, 0, 0, 180deg); -webkit-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); -moz-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg); transform: perspective(400px) rotate3d(1, 0, 0, 0deg); } } .flipOutX2_R { -webkit-animation-name: flipOutX2_R; animation-name: flipOutX2_R; } @keyframes flipInX2_R { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -0deg); transform: perspective(400px) rotate3d(1, 0, 0, -0deg); -webkit-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); -moz-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); } 30% { -webkit-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); -moz-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -180deg); transform: perspective(400px) rotate3d(1, 0, 0, -180deg); } } @-webkit-keyframes flipInX2_R { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -0deg); transform: perspective(400px) rotate3d(1, 0, 0, -0deg); -webkit-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); -moz-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); } 30% { -webkit-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); -moz-box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); box-shadow: 0 2px 4px rgba(181, 181, 181, 0.25); } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -180deg); transform: perspective(400px) rotate3d(1, 0, 0, -180deg); } } .flipInX2_R { -webkit-animation-name: flipInX2_R; animation-name: flipInX2_R; } /* Quick Deck */ .btnFlip.quickDeck { display: none !important; } .btnPrev.quickDeck { width: 158px; } .btnNext.quickDeck { width: 158px; } .enable-flashdeck-buttons { color: #92ceb5; } .disable-flashdeck-buttons { color: #ff425c; opacity: .75; cursor: pointer; pointer-events: none; } .deck-unlocked .btnPrev, .deck-unlocked .btnNext { color: #92ceb5 !important; } .flashDeck[data-free-drag="on_absolute"] > .deck { margin-top: 0 } /* #endregion */ /* #region Tabs Interaction */ /* wrapper */ .tab-interaction-widget { min-width: 40em; } /* tabs */ .ui-tabs { position: relative; /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ padding: .2em; } .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } .ui-tabs .ui-tabs-tab { position: relative; float: left; min-width: 48px; text-align: center; padding: 7px 14px; margin: 1px .2em 0 0; font-weight: 500; white-space: nowrap; cursor: pointer; -moz-transition: all 0.1s ease-in !important; -o-transition: all 0.1s ease-in !important; -webkit-transition: all 0.1s ease-in !important; transition: all 0.1s ease-in !important; } .ui-tabs:not(.ui-tabs-pop) .ui-tabs-tab { color: #333; } .ui-tabs-active { border-width: 2px 3px 0px 3px; z-index: 1; } .ui-tabs-tab { cursor: pointer; } .ui-tabs-active.ui-tabs-tab { cursor: text; } /* content panel */ .ui-tabs-content-panels { clear: both; } .ui-tabs-panel { display: none; position: relative; min-height: 12em; min-width: 300px; padding: 1em 1.4em; background-color: rgba(255, 255, 255, 0); margin-left: 3px; } .ui-tabs-panel-active { display: block; border: 1px dashed rgba(204, 204, 204, 0.5); } /* vertical tabs */ /* admin-panel-vertical temp hidding*/ .admin-panel-vertical { display: none } .ui-tabs-vertical { width: 55em; } /* tabs */ .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; display: block; } .ui-tabs-vertical .ui-tabs-tab { clear: left; border-bottom-width: 1px; border-right-width: 0; margin: 0 -1px .2em 0; display: block; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-tabs-vertical .ui-tabs-tab.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; } /* content panels */ .ui-tabs-vertical .ui-tabs-content-panels { clear: none; padding: 5px 1px 1px 168px; } /* alignment */ .ui-tabs.Right { margin-left: 10px; } .ui-tabs.Left { margin-right: 10px; } /* Tab Styles */ /* classic */ .ui-tabs-classic .ui-tabs-tab { border-radius: 13px 13px 0px 0px; } .ui-tabs-classic .ui-tabs-tab:hover { margin-top: -2px; padding-bottom: 10px; } .ui-tabs-classic .ui-tabs-tab.ui-tabs-active, .ui-tabs-classic .ui-tabs-tab:active { margin-top: -2px; padding-bottom: 10px; } /* flat */ .ui-tabs-flat .ui-tabs-tab { border-radius: 0px; } .ui-tabs-flat .ui-tabs-tab:hover { margin-top: -2px; } .ui-tabs-flat .ui-tabs-tab.ui-tabs-active, .ui-tabs-flat .ui-tabs-tab:active { margin-top: -2px; padding-bottom: 9px; } /* simple */ .ui-tabs-simple .ui-tabs-tab { border-radius: 0px; border: 0px; background: url(/App_Themes/Images/1x1_F5F5F5.png) repeat !important; border: 1px solid #f5f5f5 !important; box-shadow: inset 0px -2px 10px 0px rgba(136, 136, 136, 0.2); } .ui-tabs-simple .ui-tabs-tab:hover { box-shadow: inset 0px -2px 10px 0px rgba(136, 136, 136, 0.1); } .ui-tabs-simple .ui-tabs-tab.ui-tabs-active { box-shadow: none } .ui-tabs-simple .ui-tabs-panel-active { border: 2px solid #f5f5f5; } /* 3d clip */ .ui-tabs-3dclip .ui-tabs-tab { border-top-left-radius: 4px; display: inline-block; font-size: 24px; font-weight: 500; line-height: 30px; margin-right: 11px; padding: 0.25em 0.75em; z-index: 1; box-shadow: 4px 3px 4px #1c1c1c5c; } .ui-tabs-3dclip .ui-tabs-tab:after { content: ''; background: inherit; border-top-right-radius: 22px; border-top-left-radius: 4px; border-top-width: 2px; border-top-style: solid; border-top-color: inherit; width: 6px; border-left-color: inherit; border-left-width: 2px; border-left-style: solid; height: 14px; position: absolute; top: 0; right: -8px; filter: brightness(0.5); } .ui-tabs-3dclip > .ui-tabs-content-panels { position: relative; top: -34px; border-top: 4px solid #f5f5f5; } .ui-tabs-3dclip > .ui-tabs-content-panels > .ui-tabs-panel { padding-top: 35px; border: none; } .ui-tabs-3dclip > .ui-tabs-content-panels > .ui-tabs-panel .color-palette { top: 50px; } /* modern */ .ui-tabs-modern .ui-tabs-tab { border-width: 4px 0 0 0 !important; background: url(/App_Themes/Images/1x1_F5F5F5.png) repeat !important; border-radius: 0px; padding: 6px 12px !important; margin-right: 7px !important; border-top-style: solid; color: #333 !important; box-shadow: inset 0px -2px 10px 0px rgba(136, 136, 136, 0.2); } .ui-tabs-modern .ui-tabs-tab p { margin-top: 5px; } .ui-tabs-modern .ui-tabs-tab:hover { margin-top: -1px; padding: 8px 12px 6px 12px !important; box-shadow: inset 0px -2px 10px 0px rgba(136, 136, 136, 0.1); } .ui-tabs-modern .ui-tabs-tab.ui-tabs-active, .ui-tabs-modern .ui-tabs-tab:active { margin-top: -2px; padding: 9px 12px 6px 12px !important; box-shadow: none; } .ui-tabs-modern .ui-tabs-panel-active { border-top: 4px solid #f5f5f5; } /* bracket */ .ui-tabs-bracket .ui-tabs-tab { padding: 3px 20px !important; margin-right: 15px !important; font-size: 17px; font-weight: 600; border-top-width: 3px; border-bottom-width: 3px; border-bottom-style: solid; border-top-style: solid; border-radius: 0; } .ui-tabs-bracket .ui-tabs-tab.ui-tabs-active, .ui-tabs-bracket .ui-tabs-tab:hover { border-top-width: 3px; border-top-style: solid; border-bottom-width: 3px; border-bottom-style: solid; background: #fff !important; margin-bottom: 9px; } .ui-tabs-bracket .ui-tabs-tab:before { content: ""; border-top-width: 15px; border-top-style: solid; border-top-color: inherit; border-right: 15px solid transparent; border-bottom: 15px solid transparent; position: absolute; top: 0; left: -50%; transition: all 0.3s ease 0s; } .ui-tabs-bracket .ui-tabs-tab:hover:before, .ui-tabs-bracket .ui-tabs-tab:before { left: 0; } .ui-tabs-bracket .ui-tabs-tab:after { content: ""; border-bottom-width: 15px; border-bottom-style: solid; border-bottom-color: inherit; border-left: 15px solid transparent; border-top: 15px solid transparent; position: absolute; bottom: 0; right: -50%; transition: all 0.3s ease 0s; } .ui-tabs-bracket .ui-tabs-tab:hover:after, .ui-tabs-bracket .ui-tabs-tab:after { right: 0; } .ui-tabs-bracket .ui-tabs-panel { border-top: 3px solid #384d48; border-bottom: 3px solid #384d48; font-size: 17px; color: #384d48; background-color: rgba(255, 255, 255, 0) !important; } .ui-tabs-bracket .ui-tabs-panel:before { content: ""; border-top-width: 25px; border-top-style: solid; border-top-color: inherit; border-right: 25px solid transparent; border-bottom: 25px solid transparent; position: absolute; top: 0; left: 0; } .ui-tabs-bracket .ui-tabs-panel:after { content: ""; border-bottom-width: 25px; border-bottom-style: solid; border-bottom-color: inherit; border-left: 25px solid transparent; border-top: 25px solid transparent; position: absolute; bottom: 0; right: 0; } .ui-tabs-bracket .ui-tabs-tab p { font-weight: 800; color: white; margin-top: 8px; } .ui-tabs-bracket .ui-tabs-tab.ui-tabs-active p, .ui-tabs-bracket .ui-tabs-tab:hover p { color: #333; } /* timeline */ .ui-tabs-timeline .ui-tabs-tab::after { background: #e5e5e5 none repeat scroll 0 0; bottom: 0; content: ""; display: block; height: 4px; margin: 0 auto; position: absolute; right: -30px; top: 37px; width: 85%; z-index: -1; } .ui-tabs-timeline .ui-tabs-tab.visited::after { background-color: inherit; } [data-tab-count="1"].ui-tabs-timeline .ui-tabs-tab:nth-child(1)::after { width: 0; } [data-tab-count="2"].ui-tabs-timeline .ui-tabs-tab:nth-child(2)::after { width: 0; } [data-tab-count="3"].ui-tabs-timeline .ui-tabs-tab:nth-child(3)::after { width: 0; } [data-tab-count="4"].ui-tabs-timeline .ui-tabs-tab:nth-child(4)::after { width: 0; } [data-tab-count="5"].ui-tabs-timeline .ui-tabs-tab:nth-child(5)::after { width: 0; } [data-tab-count="6"].ui-tabs-timeline .ui-tabs-tab:nth-child(6)::after { width: 0; } [data-tab-count="7"].ui-tabs-timeline .ui-tabs-tab:nth-child(7)::after { width: 0; } [data-tab-count="8"].ui-tabs-timeline .ui-tabs-tab:nth-child(8)::after { width: 0; } [data-tab-count="9"].ui-tabs-timeline .ui-tabs-tab:nth-child(9)::after { width: 0; } [data-tab-count="10"].ui-tabs-timeline .ui-tabs-tab:nth-child(10)::after { width: 0; } [data-tab-count="11"].ui-tabs-timeline .ui-tabs-tab:nth-child(11)::after { width: 0; } [data-tab-count="12"].ui-tabs-timeline .ui-tabs-tab:nth-child(12)::after { width: 0; } [data-tab-count="13"].ui-tabs-timeline .ui-tabs-tab:nth-child(13)::after { width: 0; } [data-tab-count="14"].ui-tabs-timeline .ui-tabs-tab:nth-child(14)::after { width: 0; } .ui-tabs-timeline .ui-tabs-tab { display: block; height: 68px; width: 57px; border-style: solid; border-width: 2px; font-size: 30px; border-radius: 50%; margin-right: 27px !important; margin-bottom: 4px !important; z-index: unset; display: flex; flex-direction: column; justify-content: center; } .ui-tabs-timeline .ui-tabs-tab:not(.ui-tabs-active):not(.visited) { background-color: white !important; } .ui-tabs-timeline .ui-tabs-tab.ui-tabs-active, .ui-tabs-timeline .ui-tabs-tab.visited { color: #fff; } .ui-tabs-timeline .ui-tabs-tab p { font-size: 14px; line-height: 1px; font-weight: 600; } /* folder */ .ui-tabs-folder .ui-tabs-tab { font-size: 17px; border-radius: 0 85px 0 0; z-index: 1; } .ui-tabs-folder .ui-tabs-tab:hover { border: 1px solid transparent; } .ui-tabs-folder .ui-tabs-tab:before { content: ""; width: 100%; height: 100%; position: absolute; bottom: 5px; left: -1px; font-size: 17px; background: inherit; border: 1px solid #d3d3d3; border-bottom: 0px none; border-radius: 3px 10px 0 0; transform-origin: left center 0; transform: perspective(4px) rotateX(2deg); z-index: -1; } .ui-tabs-folder .ui-tabs-tab.ui-tabs-active:before { background: #fff; } .ui-tabs-folder .ui-tabs-tab.ui-tabs-active, .ui-tabs-folder .ui-tabs-tab.ui-tabs-active:focus, .ui-tabs-folder .ui-tabs-tab.ui-tabs-active:hover { border: 1px solid transparent; background: transparent; color: #444; z-index: 2; } .ui-tabs-folder .ui-tabs-panel { border: 1px solid #d3d3d3; padding: 20px; line-height: 22px; } .ui-tabs-folder .ui-tabs-tab p { font-weight: 800; color: white; margin-top: 8px; } .ui-tabs-folder .ui-tabs-tab.ui-tabs-active p, .ui-tabs-foloder .ui-tabs-tab:hover p { color: #333; } @media only screen and (max-width: 767px) { .ui-tabs-folder .ui-tabs-tab { padding: 15px 10px; font-size: 14px; } .ui-tabs-folder .ui-tabs-tab:before { bottom: 6px; } } @media only screen and (max-width: 480px) { .ui-tabs-folder .ui-tabs-tab { width: 100%; margin-bottom: 5px; } .ui-tabs-folder .ui-tabs-tab:before { bottom: 0; transform: none; border-bottom: 1px solid #d3d3d3; } } /* flow */ .ui-tabs-flow .ui-tabs-tab::after { background: #e5e5e5 none repeat scroll 0 0; bottom: 0; content: ""; display: block; height: 4px; margin: 0 auto; position: absolute; right: -30px; top: 37px; width: 85%; z-index: -1; } .ui-tabs-flow .ui-tabs-tab.visited::after { background-color: inherit; } [data-tab-count="1"].ui-tabs-flow .ui-tabs-tab:nth-child(1)::after { width: 0; } [data-tab-count="2"].ui-tabs-flow .ui-tabs-tab:nth-child(2)::after { width: 0; } [data-tab-count="3"].ui-tabs-flow .ui-tabs-tab:nth-child(3)::after { width: 0; } [data-tab-count="4"].ui-tabs-flow .ui-tabs-tab:nth-child(4)::after { width: 0; } [data-tab-count="5"].ui-tabs-flow .ui-tabs-tab:nth-child(5)::after { width: 0; } [data-tab-count="6"].ui-tabs-flow .ui-tabs-tab:nth-child(6)::after { width: 0; } [data-tab-count="7"].ui-tabs-flow .ui-tabs-tab:nth-child(7)::after { width: 0; } [data-tab-count="8"].ui-tabs-flow .ui-tabs-tab:nth-child(8)::after { width: 0; } [data-tab-count="9"].ui-tabs-flow .ui-tabs-tab:nth-child(9)::after { width: 0; } [data-tab-count="10"].ui-tabs-flow .ui-tabs-tab:nth-child(10)::after { width: 0; } [data-tab-count="11"].ui-tabs-flow .ui-tabs-tab:nth-child(11)::after { width: 0; } [data-tab-count="12"].ui-tabs-flow .ui-tabs-tab:nth-child(12)::after { width: 0; } [data-tab-count="13"].ui-tabs-flow .ui-tabs-tab:nth-child(13)::after { width: 0; } [data-tab-count="14"].ui-tabs-flow .ui-tabs-tab:nth-child(14)::after { width: 0; } .ui-tabs-flow .ui-tabs-tab { display: block; min-height: 68px; border-style: solid; border-width: 2px; font-size: 30px; margin-right: 27px !important; margin-bottom: 4px !important; z-index: unset; } .ui-tabs-flow .ui-tabs-tab:not(.ui-tabs-active):not(.visited) { background-color: white !important; } .ui-tabs-flow .ui-tabs-tab.ui-tabs-active, .ui-tabs-flow .ui-tabs-tab.visited { color: #fff; } .ui-tabs-flow .ui-tabs-tab p { font-size: 14px; line-height: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .ui-tabs-flow .ui-tabs-tab p:first-of-type { margin-top: 26px; } /* pop */ .ui-tabs-pop .ui-tabs-tab { display: block; min-height: 68px; max-height: 68px; border-style: solid; border-width: 2px; font-size: 30px; margin-right: 0px !important; } .ui-tabs-pop .ui-tabs-tab.ui-tabs-active { background-color: #5a5454 !important; border-color: #5a5454 !important; z-index: 1; margin-top: -17px; padding-bottom: 25px; } .ui-tabs-pop .ui-tabs-tab.ui-tabs-active + .ui-tabs-tab ~ .ui-tabs-tab { z-index: 2; } .ui-tabs-pop .ui-tabs-tab:not(.ui-tabs-active):not(.last_tab) { border-right: 1px solid #ccc !important; } .ui-tabs-pop .ui-tabs-tab:not(.ui-tabs-active):hover { margin-top: -2px; padding-bottom: 10px; filter: brightness(1.2); } .ui-tabs-pop .ui-tabs-tab:not(.ui-tabs-active):hover .color-palette { margin-right: 1px; } /* p tag content for tab */ .ui-tabs-pop .ui-tabs-tab p { color: white; } .ui-tabs-pop .ui-tabs-tab.ui-tabs-active p { color: inherit; } .ui-tabs-pop .ui-tabs-tab p { font-size: 14px; line-height: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .ui-tabs-pop .ui-tabs-tab p:first-of-type { margin-top: 26px; } .ui-tabs-pop .ui-tabs-tab.ui-tabs-active p:first-of-type { margin-top: 44px; } /* content panels for pop tab */ .ui-tabs-pop .ui-tabs-panel { border-radius: 0 0 20px 20px; } .ui-tabs-pop .ui-tabs-panel > .color-palette { display: none; } .ui-tabs-pop .ui-tabs-panel-active { background-color: #5a5454 !important; border: none; margin-left: 2px; z-index: 2; } .ui-tabs-pop .ui-tabs-panel-active p { color: white !important; } /* boxshadow and border radius differ depending on tab placement (first, all in between, and last ) */ .ui-tabs-pop .ui-tabs-tab.ui-tabs-active { box-shadow: 0px 30px 7px 10px #35323296; } /* all tabs in between 1 and the last in count, boxshadow when active */ .ui-tabs-pop .ui-tabs-tab.ui-tabs-active:nth-child(1) { box-shadow: 9px 19px 7px 0px #35323296; } /* first tab boxshadow when active */ .ui-tabs-pop .ui-tabs-tab:nth-child(1) { border-radius: 20px 0 0 0; } /* first tab border radius */ [data-tab-count="1"].ui-tabs-pop .ui-tabs-tab:nth-child(1) { border-radius: 20px 20px 0 0; } [data-tab-count="2"].ui-tabs-pop .ui-tabs-tab:nth-child(2) { border-radius: 0 20px 0 0; } [data-tab-count="2"].ui-tabs-pop .ui-tabs-tab.ui-tabs-active:nth-child(2) { box-shadow: -9px 19px 7px 0px #35323296; } [data-tab-count="3"].ui-tabs-pop .ui-tabs-tab:nth-child(3) { border-radius: 0 20px 0 0; } [data-tab-count="3"].ui-tabs-pop .ui-tabs-tab.ui-tabs-active:nth-child(3) { box-shadow: -9px 19px 7px 0px #35323296; } [data-tab-count="4"].ui-tabs-pop .ui-tabs-tab:nth-child(4) { border-radius: 0 20px 0 0; } [data-tab-count="4"].ui-tabs-pop .ui-tabs-tab.ui-tabs-active:nth-child(4) { box-shadow: -9px 19px 7px 0px #35323296; } [data-tab-count="5"].ui-tabs-pop .ui-tabs-tab:nth-child(5) { border-radius: 0 20px 0 0; } [data-tab-count="5"].ui-tabs-pop .ui-tabs-tab.ui-tabs-active:nth-child(5) { box-shadow: -9px 19px 7px 0px #35323296; } [data-tab-count="6"].ui-tabs-pop .ui-tabs-tab:nth-child(6) { border-radius: 0 20px 0 0; } [data-tab-count="6"].ui-tabs-pop .ui-tabs-tab.ui-tabs-active:nth-child(6) { box-shadow: -9px 19px 7px 0px #35323296; } [data-tab-count="7"].ui-tabs-pop .ui-tabs-tab:nth-child(7) { border-radius: 0 20px 0 0; } [data-tab-count="7"].ui-tabs-pop .ui-tabs-tab.ui-tabs-active:nth-child(7) { box-shadow: -9px 19px 7px 0px #35323296; } [data-tab-count="8"].ui-tabs-pop .ui-tabs-tab:nth-child(8) { border-radius: 0 20px 0 0; } [data-tab-count="8"].ui-tabs-pop .ui-tabs-tab.ui-tabs-active:nth-child(8) { box-shadow: -9px 19px 7px 0px #35323296; } [data-tab-count="9"].ui-tabs-pop .ui-tabs-tab:nth-child(9) { border-radius: 0 20px 0 0; } [data-tab-count="9"].ui-tabs-pop .ui-tabs-tab.ui-tabs-active:nth-child(9) { box-shadow: -9px 19px 7px 0px #35323296; } [data-tab-count="10"].ui-tabs-pop .ui-tabs-tab:nth-child(10) { border-radius: 0 20px 0 0; } [data-tab-count="10"].ui-tabs-pop .ui-tabs-tab.ui-tabs-active:nth-child(10) { box-shadow: -9px 19px 7px 0px #35323296; } [data-tab-count="11"].ui-tabs-pop .ui-tabs-tab:nth-child(11) { border-radius: 0 20px 0 0; } [data-tab-count="11"].ui-tabs-pop .ui-tabs-tab.ui-tabs-active:nth-child(11) { box-shadow: -9px 19px 7px 0px #35323296; } [data-tab-count="12"].ui-tabs-pop .ui-tabs-tab:nth-child(12) { border-radius: 0 20px 0 0; } [data-tab-count="12"].ui-tabs-pop .ui-tabs-tab.ui-tabs-active:nth-child(12) { box-shadow: -9px 19px 7px 0px #35323296; } [data-tab-count="13"].ui-tabs-pop .ui-tabs-tab:nth-child(13) { border-radius: 0 20px 0 0; } [data-tab-count="13"].ui-tabs-pop .ui-tabs-tab.ui-tabs-active:nth-child(13) { box-shadow: -9px 19px 7px 0px #35323296; } [data-tab-count="14"].ui-tabs-pop .ui-tabs-tab:nth-child(14) { border-radius: 0 20px 0 0; } [data-tab-count="14"].ui-tabs-pop .ui-tabs-tab.ui-tabs-active:nth-child(14) { box-shadow: -9px 19px 7px 0px #35323296; } /* #endregion */ /* #region Wheel Interaction */ /* Inner wrapper and button */ .wheel-interaction { position: relative; left: 50%; top: 220px; width: 140px; height: 140px; margin-top: -70px; margin-left: -70px; } .wheel-interaction, .wheel-interaction-button { font-family: 'Oswald', sans-serif; font-weight: 300; color: white !important; } .wheel-interaction-button { position: relative; width: 100%; height: 100%; border-radius: 50%; border: 0; font-size: 20px; cursor: pointer; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); align-items: flex-start; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 36px 6px; } .wheel-interaction-button:hover { filter: brightness(1.25); } .wheel-interaction-button:focus { outline: none; } /* Wheels */ .wheel-interaction ul { position: absolute; list-style: none; padding: 0; margin: 0; top: -20px; right: -20px; bottom: -20px; left: -20px; } .wheel-interaction li { position: absolute; width: 0; height: 100%; margin: 0 50%; -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; z-index: 1; } /* Wheel editable universal properties */ .wheel-interaction li div[data-wheel-interaction-text] { position: absolute; left: 50%; bottom: 100%; width: 0; height: 0; margin-left: 0; border-radius: 50%; text-align: center; font-size: 1px; /*overflow: hidden;*/ cursor: pointer; box-shadow: none; border-style: solid; border-width: 15px; } .wheel-interaction.open li div[data-wheel-interaction-text] { width: 80px; height: 80px; margin-left: -40px; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); font-size: 14px; display: flex; flex-direction: column; justify-content: center; } /* Text Color - Important - *Exclude Ocatagon, gearwheel, house, badge, droplet, box */ .interaction-wrapper-wheel:not(.wheel-octagon):not(.wheel-gearwheel):not(.wheel-house):not(.wheel-badge):not(.wheel-award):not(.wheel-droplet):not(.wheel-box) .wheel-interaction li div[data-wheel-interaction-text] { color: white !important; } /* Line Height - also see adjustments below this style */ .wheel-interaction li div[data-wheel-interaction-text] p { margin: 0px; line-height: normal; } /* Text adjustments - Special margin per style to align the text correctly */ .interaction-wrapper-wheel.wheel-house .wheel-interaction li div[data-wheel-interaction-text] p:first-child { margin-top: 12px; } .interaction-wrapper-wheel.wheel-badge .wheel-interaction li div[data-wheel-interaction-text] p:first-child { margin-top: 20px; } .interaction-wrapper-wheel.wheel-award .wheel-interaction li div[data-wheel-interaction-text] p { margin-top: 0px; margin-bottom: 0px; } .interaction-wrapper-wheel.wheel-box .wheel-interaction li div[data-wheel-interaction-text] p { margin-top: -11px; } /* Icomoon driven styles - default color property for text */ .interaction-wrapper-wheel.wheel-octagon .wheel-interaction li div[data-wheel-interaction-text] *, .interaction-wrapper-wheel.wheel-gearwheel .wheel-interaction li div[data-wheel-interaction-text] *, .interaction-wrapper-wheel.wheel-award .wheel-interaction li div[data-wheel-interaction-text] *, .interaction-wrapper-wheel.wheel-droplet .wheel-interaction li div[data-wheel-interaction-text] *, .interaction-wrapper-wheel.wheel-box .wheel-interaction li div[data-wheel-interaction-text] *, .interaction-wrapper-wheel.wheel-venn .wheel-interaction li div[data-wheel-interaction-text] * { color: #444; font-size: 14px; } .interaction-wrapper-wheel.wheel-badge .wheel-interaction li div[data-wheel-interaction-text] *, .interaction-wrapper-wheel.wheel-house .wheel-interaction li div[data-wheel-interaction-text] * { color: white; font-size: 17px; } /* Venn diagram font size */ .interaction-wrapper-wheel.wheel-venn .wheel-interaction li div[data-wheel-interaction-text] * { font-size: 18px; } /* Spokes - pseudo-element */ .wheel-interaction li:after { content: ''; position: absolute; width: 0px; z-index: -1; border: 2px solid #b9b9b9; margin-top: -6px; } .interaction-wrapper-wheel.wheel-classic li:after { height: 15px; } .interaction-wrapper-wheel.wheel-rounded li:after, .interaction-wrapper-wheel.wheel-venn li:after, .interaction-wrapper-wheel.wheel-compact li:after, .interaction-wrapper-wheel.wheel-octagon li:after, .interaction-wrapper-wheel.wheel-gearwheel li:after, .interaction-wrapper-wheel.wheel-house li:after, .interaction-wrapper-wheel.wheel-badge li:after, .interaction-wrapper-wheel.wheel-award li:after, .interaction-wrapper-wheel.wheel-droplet li:after, .interaction-wrapper-wheel.wheel-box li:after { border: 0px; } /* Outer wrapper and content panel */ .interaction-wrapper-wheel { min-width: 500px; min-height: 440px; position: relative; z-index: 1 } .cke_widget_wrapper .interaction-wrapper-wheel { overflow: hidden; } .wheel-content-panel-wrapper .cd-project-content { margin-top: 29px; } /* Authoring context only helper border */ .cke .interaction-wrapper-wheel { border: 1px dashed rgba(215, 215, 230, 0.65) !important; } /* Wheel Styles */ /* Classic */ .interaction-wrapper-wheel.wheel-classic li div[data-wheel-interaction-text] { margin-left: -44px; border: 6px solid #fff !important; } /* Ocatagon, gearwheel, house, badge, droplet, box universal properties */ .interaction-wrapper-wheel.wheel-octagon li div[data-wheel-interaction-text], .interaction-wrapper-wheel.wheel-gearwheel li div[data-wheel-interaction-text], .interaction-wrapper-wheel.wheel-house li div[data-wheel-interaction-text], .interaction-wrapper-wheel.wheel-badge li div[data-wheel-interaction-text], .interaction-wrapper-wheel.wheel-award li div[data-wheel-interaction-text], .interaction-wrapper-wheel.wheel-droplet li div[data-wheel-interaction-text], .interaction-wrapper-wheel.wheel-box li div[data-wheel-interaction-text] { background: rgba(255, 255, 255, 0) !important; border-radius: 0px; width: 80px; height: 50px; border-width: 0px; overflow: visible; margin-bottom: 23px; box-shadow: none; } .interaction-wrapper-wheel.wheel-gearwheel .wheel-interaction li div[data-wheel-interaction-text] p { margin-top: 10px; } /* Ocatagon, gearwheel, house, badge, droplet, box universal pseudo-element properties */ .interaction-wrapper-wheel.wheel-octagon li div[data-wheel-interaction-text]:before, .interaction-wrapper-wheel.wheel-gearwheel li div[data-wheel-interaction-text]:before, .interaction-wrapper-wheel.wheel-house li div[data-wheel-interaction-text]:before, .interaction-wrapper-wheel.wheel-badge li div[data-wheel-interaction-text]:before, .interaction-wrapper-wheel.wheel-award li div[data-wheel-interaction-text]:before, .interaction-wrapper-wheel.wheel-droplet li div[data-wheel-interaction-text]:before, .interaction-wrapper-wheel.wheel-box li div[data-wheel-interaction-text]:before { position: absolute; width: 33px; height: 37px; padding-left: 3px; left: -10px; top: 6px; color: inherit; font-size: 95px; font-family: 'icomoon_EL'; text-align: center; line-height: 31px; z-index: -1; } /* Octagon - specific icomoon properties */ .interaction-wrapper-wheel.wheel-octagon li div[data-wheel-interaction-text]:before { content: "\e90d"; } /* Gearwheel - specific icomoon properties */ .interaction-wrapper-wheel.wheel-gearwheel li div[data-wheel-interaction-text]:before { content: "\e613"; } /* House - specific icomoon properties */ .interaction-wrapper-wheel.wheel-house li div[data-wheel-interaction-text]:before { content: "\e91c"; top: 0px; } /* Badge - specific icomoon properties */ .interaction-wrapper-wheel.wheel-badge li div[data-wheel-interaction-text]:before { content: "\e9b4"; left: 0px; font-size: 73px; } /* Award - specific icomoon properties */ .interaction-wrapper-wheel.wheel-award li div[data-wheel-interaction-text]:before { content: "\eba0"; left: -10px; } /* Droplet - specific icomoon properties */ .interaction-wrapper-wheel.wheel-droplet li div[data-wheel-interaction-text]:before { content: "\e935"; } /* Box - specific icomoon properties */ .interaction-wrapper-wheel.wheel-box li div[data-wheel-interaction-text]:before { content: "\e904"; } /* Rounded */ .interaction-wrapper-wheel.wheel-rounded li div[data-wheel-interaction-text] { border-width: 0px; border-radius: 32px; margin-bottom: 6px; box-shadow: none; } .interaction-wrapper-wheel.wheel-rounded .wheel-interaction-button { border-color: white; border-width: 9px; border-style: double; padding: 26px 6px; box-shadow: none; } /* Venn */ /* Variable container height depending on count, too save screen space */ .interaction-wrapper-wheel.wheel-venn { min-height: 430px; } div[data-wheel-count="2"].interaction-wrapper-wheel.wheel-venn { min-height: 360px; } .wheel-venn .wheel-interaction { top: 188px; } div[data-wheel-count="2"].wheel-venn .wheel-interaction { top: 85px; } .interaction-wrapper-wheel.wheel-venn .wheel-interaction li { margin: 0% 50%; } .interaction-wrapper-wheel.wheel-venn .wheel-interaction ul { top: 57%; } .interaction-wrapper-wheel.wheel-venn li div[data-wheel-interaction-text] { width: 260px; height: 260px; border-width: 0px; margin-bottom: -84px; margin-left: -130px; box-shadow: none; border-radius: 100%; } .interaction-wrapper-wheel.wheel-venn .wheel-interaction-button { display: none; } /* 2 Count Venn Diagram - override the transforms */ div[data-wheel-count="2"].wheel-venn .wheel-interaction li:nth-of-type(1) { -moz-transform: rotate(-117deg) !important; -ms-transform: rotate(-117deg) !important; -o-transform: rotate(-117deg) !important; -webkit-transform: rotate(-117deg) !important; transform: rotate(-117deg) !important; } div[data-wheel-count="2"].wheel-venn .wheel-interaction li div[data-wheel-interaction-text="1"] { -moz-transform: rotate(117deg) !important; -ms-transform: rotate(117deg) !important; -o-transform: rotate(117deg) !important; -webkit-transform: rotate(117deg) !important; transform: rotate(117deg) !important; } div[data-wheel-count="2"].wheel-venn .wheel-interaction li:nth-of-type(2) { -moz-transform: rotate(117deg) !important; -ms-transform: rotate(117deg) !important; -o-transform: rotate(117deg) !important; -webkit-transform: rotate(117deg) !important; transform: rotate(117deg) !important; } div[data-wheel-count="2"].wheel-venn .wheel-interaction li div[data-wheel-interaction-text="2"] { -moz-transform: rotate(-117deg) !important; -ms-transform: rotate(-117deg) !important; -o-transform: rotate(-117deg) !important; -webkit-transform: rotate(-117deg) !important; transform: rotate(-117deg) !important; } /* Compact */ .interaction-wrapper-wheel.wheel-compact .wheel-interaction ul { top: -20px; bottom: -20px; } .interaction-wrapper-wheel.wheel-compact li div[data-wheel-interaction-text] { margin-left: -39px; border-width: 0px; box-shadow: none; border: 6px solid #f3f7f8 !important; } .interaction-wrapper-wheel.wheel-compact .wheel-interaction-button { width: 250px; height: 250px; position: absolute; right: -53px; top: -53px; padding: 100px 39px; } /* Hover FX */ .wheel-interaction li div[data-wheel-interaction-text]:hover { filter: brightness(1.25); } /* #endregion */ /* #region Juxtapose CSS*/ div.jx-slider { width: 100%; height: 100%; position: relative; overflow: hidden; cursor: pointer; } div.jx-handle { position: absolute; height: 100%; width: 40px; cursor: col-resize; z-index: 15; margin-left: -20px; } .vertical div.jx-handle { } div.jx-control { height: 100%; margin-right: auto; margin-left: auto; width: 3px; background-color: #f3f3f3; box-shadow: 0px 0px 4px 1px #b3b3b3; } .vertical div.jx-control { height: 3px; width: 100%; background-color: #f3f3f3; position: relative; top: 50%; transform: translateY(-50%); } div.jx-controller { position: absolute; margin: auto; top: 0; bottom: 0; height: 60px; width: 9px; margin-left: -3px; background-color: #f3f3f3; box-shadow: 0px 0px 4px 1px #b3b3b3; } .vertical div.jx-controller { height: 9px; width: 100px; margin-left: auto; margin-right: auto; top: -3px; position: relative; } div.jx-arrow { position: absolute; margin: auto; top: 0; bottom: 0; width: 0; height: 0; transition: all .2s ease; } .vertical div.jx-arrow { position: absolute; margin: 0 auto; left: 0; right: 0; width: 0; height: 0; transition: all .2s ease; } div.jx-arrow.jx-left { left: 2px; border-style: solid; border-width: 8px 8px 8px 0; border-color: transparent #f3f3f3 transparent transparent; } div.jx-arrow.jx-right { right: 2px; border-style: solid; border-width: 8px 0 8px 8px; border-color: transparent transparent transparent #f3f3f3; } .vertical div.jx-arrow.jx-left { left: 0px; top: 2px; border-style: solid; border-width: 0px 8px 8px 8px; border-color: transparent transparent #f3f3f3 transparent; } .jx-arrow.jx-left:after { content: ""; position: absolute; width: 0px; z-index: -1; margin-left: -3px; margin-top: -10px; left: 2px; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #b7b7b7 transparent transparent; } .vertical div.jx-arrow.jx-right { right: 0px; top: initial; bottom: 2px; border-style: solid; border-width: 8px 8px 0 8px; border-color: #f3f3f3 transparent transparent transparent; } .jx-arrow.jx-right:after { content: ""; position: absolute; z-index: -1; margin-left: -9px; margin-top: -10px; border-style: solid; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #b7b7b7; } div.jx-handle:hover div.jx-arrow.jx-left, div.jx-handle:active div.jx-arrow.jx-left { left: -1px; } div.jx-handle:hover div.jx-arrow.jx-right, div.jx-handle:active div.jx-arrow.jx-right { right: -1px; } .vertical div.jx-handle:hover div.jx-arrow.jx-left, .vertical div.jx-handle:active div.jx-arrow.jx-left { left: 0px; top: 0px; } .vertical div.jx-handle:hover div.jx-arrow.jx-right, .vertical div.jx-handle:active div.jx-arrow.jx-right { right: 0px; bottom: 0px; } div.jx-image { position: absolute; height: 100%; display: inline-block; top: 0; overflow: hidden; -webkit-backface-visibility: hidden; } .vertical div.jx-image { width: 100%; left: 0; top: initial; } div.jx-image img { height: 100%; z-index: 5; position: absolute; margin-bottom: 0; max-height: none; max-width: none; max-height: initial; max-width: initial; } .vertical div.jx-image img { height: initial; width: 100%; } div.jx-image.jx-left { left: 0; background-position: left; } div.jx-image.jx-left img { left: 0; } div.jx-image.jx-right { right: 0; background-position: right; } div.jx-image.jx-right img { right: 0; bottom: 0; } .veritcal div.jx-image.jx-left { top: 0; background-position: top; } .veritcal div.jx-image.jx-left img { top: 0; } .vertical div.jx-image.jx-right { bottom: 0; background-position: bottom; } .veritcal div.jx-image.jx-right img { bottom: 0; } div.jx-image div.jx-label { font-size: 1em; padding: .25em .75em; position: relative; display: inline-block; top: 0; background-color: #000; /* IE 8 */ background-color: rgba(0,0,0,.7); color: white; z-index: 10; white-space: nowrap; line-height: 18px; vertical-align: middle; } div.jx-image.jx-left div.jx-label { float: left; left: 0; } div.jx-image.jx-right div.jx-label { float: right; right: 0; } .vertical div.jx-image div.jx-label { display: table; position: absolute; } .vertical div.jx-image.jx-right div.jx-label { left: 0; bottom: 0; top: initial; } div.jx-credit { line-height: 1.1; font-size: 0.75em; } div.jx-credit em { font-weight: bold; font-style: normal; } div.jx-image.transition { transition: width .5s ease; } div.jx-handle.transition { transition: left .5s ease; } .vertical div.jx-image.transition { transition: height .5s ease; } .vertical div.jx-handle.transition { transition: top .5s ease; } a.jx-knightlab { display: none; } /* #endregion */ /* #region poptile */ /* base */ .pop_tile_wrapper { background-color: #e6e6e6; text-align: center; border-width: 0px; border-top: 1px solid rgba(255, 255, 255, 0); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0 auto; } .pop_tile_wrapper::after { content: ""; clear: both; display: table; } .pop_tile_inner_wrapper { margin-top: 10px; } /* tiles */ .pop_tile_item { text-align: center; position: relative; margin: 10px 7px 50px 8px; width: 236px; float: left; height: 200px; cursor: pointer; } .pop_tile_item .squareWrapper { background: #ffffff; position: relative; -webkit-transition: all 0.5s cubic-bezier(0.67, -0.51, 0.42, 1.43); transition: all 0.5s cubic-bezier(0.67, -0.51, 0.42, 1.43); border-radius: 10px; box-shadow: 0 0 8px -3px black; } .pop_tile_item .pop_tile_item_title { overflow-y: auto; } .pop_tile_item .pop_tile_item_title p { color: #555; display: block; font-weight: 700; margin: 0; font-size: 21px; height: 25px; } .pop_tile_item .pop_tile_desc { padding: 0 10px; line-height: 1.675em; opacity: 0; display: none; color: #333333; -webkit-transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out; height: 250px; overflow-y: auto; text-align: left; } .pop_tile_item .pop_tile_desc p { font: normal 14px Verdana; } .pop_tile_item .square { position: relative; width: 100%; border-radius: 10px; } .pop_tile_item.NotPlayedYet .squareWrapper .square { animation: pulsateBoxShadow 1.5s 1.5s ease-out infinite; } .cke .pop_tile_item.NotPlayedYet .squareWrapper .square, .poptile_preview_container .pop_tile_item.NotPlayedYet .squareWrapper .square { animation: none; } .pop_tile_wrapper:hover .pop_tile_item .squareWrapper { animation: none; } .cke .pop_tile_item:hover::after { content: 'Click to Edit'; position: absolute; top: -50px; left: -20px; cursor: pointer !important; width: 367px; height: 25px; background-color: #59C3F5; opacity: .7; text-align: center; border-radius: 10px 10px 0px 0px; color: #FFF; padding: 0 3px 5px 5px; font-size: 18px !important; margin: 2px; font-family: 'Open Sans' !important; } /* tiles animate in -> */ .pop_tile_item:not(.opened) { transform: scale(0); -ms-transform: none; animation: pop_tile_wrapper_entrance 1s 0s cubic-bezier(0.67, -.0, 0.42, 1.43); animation-fill-mode: forwards } .pop_tile_item:nth-child(1) { animation-delay: .4s; } .pop_tile_item:nth-child(2) { animation-delay: .5s; } .pop_tile_item:nth-child(3) { animation-delay: .6s; } .pop_tile_item:nth-child(4) { animation-delay: .7s; } .pop_tile_item:nth-child(5) { animation-delay: .8s; } .pop_tile_item:nth-child(6) { animation-delay: .9s; } .pop_tile_item:nth-child(7) { animation-delay: .10s; } .pop_tile_item:nth-child(8) { animation-delay: .10s; } .pop_tile_item:nth-child(9) { animation-delay: .11s; } .pop_tile_item:nth-child(10) { animation-delay: .10s; } .pop_tile_item:nth-child(11) { animation-delay: .11s; } .pop_tile_item:nth-child(12) { animation-delay: .12s; } .pop_tile_item:nth-child(13) { animation-delay: .13s; } .pop_tile_item:nth-child(14) { animation-delay: .14s; } .pop_tile_item:nth-child(15) { animation-delay: .15s; } .pop_tile_item:nth-child(16) { animation-delay: .16s; } .pop_tile_item:nth-child(17) { animation-delay: .17s; } .pop_tile_item:nth-child(18) { animation-delay: .18s; } .pop_tile_item:nth-child(19) { animation-delay: .19s; } .pop_tile_item:nth-child(20) { animation-delay: .20s; } /* tiles jump animated on rtp , exclude this from inside editor context */ .pop_tile_item.NotPlayedYet .squareWrapper { animation: jumpjump 1.5s 10s linear infinite } .cke .pop_tile_item.NotPlayedYet .squareWrapper, .poptile_preview_container .pop_tile_item.NotPlayedYet .squareWrapper { animation: none; } /* content */ .pop_tile_item .square:after { content: ""; display: block; padding-bottom: 100%; } .pop_tile_item .square .square-content { height: 100%; position: absolute; width: 100%; } .pop_tile_item .square .square-content .table { height: 100%; } .pop_tile_wrapper .pop_tile_item.active_poptile .squareWrapper { box-shadow: 0 0 9px 4px #ff682e; } .pop_tile_item_entity { font-family: 'icomoon_EL' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; border-color: transparent !important; font-size: 75px; } .pop_tile_item_entity:not([data-poptile-bg-image]) { background: none !important; } .pop_tile_item_entity p { font: normal 14px Verdana; } /* shape base p-element, content is driven by the class on the node */ .pop_tile_item_entity:before { font-family: 'icomoon_EL'; color: inherit; font-size: inherit; position: relative; top: 15px; color: inherit; } /* bg image ! */ [data-poptile-bg-image]:before { content: '' !important; } [data-poptile-bg-image] { height: 150px; background-repeat: no-repeat !important; background-size: cover !important; background-position-y: top !important; box-sizing: content-box; position: relative; top: -37px; border-radius: 16px 16px 0 0; } /* hover */ /* max */ [data-col-size="max"].pop_tile_wrapper:hover .pop_tile_item:nth-child(5) { clear: both; } [data-col-size="max"].pop_tile_wrapper:hover .pop_tile_item:nth-child(9) { clear: both; } [data-col-size="max"].pop_tile_wrapper:hover .pop_tile_item:nth-child(13) { clear: both; } [data-col-size="max"].pop_tile_wrapper:hover .pop_tile_item:nth-child(17) { clear: both; } /* 3 */ [data-col-size="3"].pop_tile_wrapper:hover .pop_tile_item:nth-child(4) { clear: both; } [data-col-size="3"].pop_tile_wrapper:hover .pop_tile_item:nth-child(7) { clear: both; } [data-col-size="3"].pop_tile_wrapper:hover .pop_tile_item:nth-child(10) { clear: both; } [data-col-size="3"].pop_tile_wrapper:hover .pop_tile_item:nth-child(13) { clear: both; } [data-col-size="3"].pop_tile_wrapper:hover .pop_tile_item:nth-child(16) { clear: both; } [data-col-size="3"].pop_tile_wrapper:hover .pop_tile_item:nth-child(19) { clear: both; } /* 2 */ [data-col-size="2"].pop_tile_wrapper:hover .pop_tile_item:nth-child(odd) { clear: both; } /* 1 */ [data-col-size="1"].pop_tile_wrapper:hover .pop_tile_item { clear: both; } /* hover */ .pop_tile_item:not(.no_hoverfx):hover, .pop_tile_item:not(.no_hoverfx):active, .pop_tile_item.opened { z-index: 10; margin-left: -49px; margin-right: -39px; width: 339px; margin-top: -60px; margin-bottom: 80px; } .cke .pop_tile_item:hover { margin-top: 40px; margin-bottom: 0px; } .pop_tile_item:not(.no_hoverfx):hover .squareWrapper, .pop_tile_item:not(.no_hoverfx):active .squareWrapper, .pop_tile_item.opened .squareWrapper { height: auto !important; padding: 5px 10px 10px 10px; margin: -50px -20px -20px -20px; -webkit-box-shadow: 0px 0px 73px -3px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 73px -3px rgba(0, 0, 0, 0.75); -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .pop_tile_item:not(.no_hoverfx):hover .square:after, .pop_tile_item:not(.no_hoverfx):active .square:after, .pop_tile_item.opened .square:after { padding-bottom: 0; } .pop_tile_item:not(.no_hoverfx):hover .square-content, .pop_tile_item:not(.no_hoverfx):active .square-content, .pop_tile_item.opened .square-content { padding-bottom: 0; position: relative; } .pop_tile_item:not(.no_hoverfx):hover .pop_tile_desc, .pop_tile_item:not(.no_hoverfx):active .pop_tile_desc, .pop_tile_item.opened .pop_tile_desc { opacity: 1; display: block; } /* generic shared */ .table { display: table; width: 100%; } .table .table-cell { display: table-cell; vertical-align: middle; } /* animation definitions for pop tiles */ @-webkit-keyframes pop_tile_wrapper_entrance { /****** 1 ******/ 0% { transform: scale(0); } 100% { transform: scale(1); } /****** 2 ******/ from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } /*******3 *****/ from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } to { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(1,1,1) translate3d(0, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @-webkit-keyframes jumpjump { 0% { bottom: 1px } 40% { bottom: -4px } 66% { bottom: 0px } 100% { bottom: 4px } } .pop_tile_wrapper .pop_tile_item:hover .square { animation: none !important; } @-webkit-keyframes pulsateBoxShadow { 0% { box-shadow: inset 0px 0px 2px #FFA538 } 50% { box-shadow: inset 0px 0px 6px #FFA538 } 100% { box-shadow: inset 0px 0px 2px #FFA538 } } /* #endregion poptile */ /* #region panels interaction */ /* #region wrappers for panel interaction */ .panel_interaction { width: 981px; padding: 30px 0 30px 0px; text-align: center; position: relative; clear: both; } .panel_interaction[data-panels-count="1L"], .panel_interaction[data-count="1L"], .panel_interaction[data-panels-count="1R"], .panel_interaction[data-count="1R"] { position: relative; width: 500px; } .panel_interaction[data-panels-count="1L"], .panel_interaction[data-count="1L"] { float: left; } .panel_interaction[data-panels-count="1R"], .panel_interaction[data-count="1R"] { float: right; } .panel_interaction_box { position: relative; width: 441px; display: inline-block; margin: 6px; border: 1px #cccccc82 solid; } .panel_interaction_row_two { display: flex; align-items: baseline; justify-content: center } .panel_interaction_box_one > .panel_interaction_content_container, .panel_interaction_box_wrapper_one { border-radius: 0px 50px } .panel_interaction_box_two > .panel_interaction_content_container, .panel_interaction_box_wrapper_two { border-radius: 50px 0px; } .panel_interaction_box_three > .panel_interaction_content_container, .panel_interaction_box_wrapper_three { border-radius: 50px 0px 50px 0px } .panel_interaction_box_four > .panel_interaction_content_container, .panel_interaction_box_wrapper_four { border-radius: 0px 50px 0px 50px } /* #endregion */ /* #region icon for panels interaction */ .panel_interaction_icon_container { width: 80px; z-index: 100; /*background-color: inherit;*/ } .panel_interaction_icon_container .icon { z-index: 100; font-size: 30px; line-height: 18px; padding: 20px 14px; border: 14px solid #fff; border-radius: 50%; color: #FFF !important; position: absolute; background-color: inherit; cursor: pointer; } .panel_interaction_icon_container .icon::before { font-size: 30px } .icon_top_left { top: -30px; left: -30px; } .icon_top_right { top: -30px; right: -30px; } .icon_bottom_left { bottom: -30px; left: -30px; } .icon_bottom_right { bottom: -30px; right: -30px; } /* #endregion */ /* #region content section for panel interaction */ .panel_interaction_content_container { min-height: 150px; padding: 20px; overflow: hidden; text-align: center; } [class*=panel_interaction_title] h1 { color: #fff; font-weight: 600; font-size: 28px; } [class*=panel_interaction_desc] p { color: #333; font-size: 14px; display: block } .cke_wysiwyg_div .panel_interaction_box, .visited.panel_interaction_box { border-color: transparent !important; } /* #endregion */ /* #region styles for panel interaction */ .classic_panel_interaction .panel_interaction_box::before { background-image: url(/App_Themes/Images/1x1_fff.png) !important; content: ""; float: left; width: 60px; height: 60px; position: absolute; z-index: 1; } .classic_panel_interaction .panel_interaction_box_wrapper_one::before { top: -17px; left: -17px; } .classic_panel_interaction .panel_interaction_box_wrapper_two::before { top: -17px; right: -17px; } .classic_panel_interaction .panel_interaction_box_wrapper_three::before { bottom: -17px; left: -17px; } .classic_panel_interaction .panel_interaction_box_wrapper_four::before { bottom: -17px; right: -17px; } .invert_panel_interaction .panel_interaction_box { border-width: 1px; border-style: solid; border-color: #cccccc82; } .invert_panel_interaction .panel_interaction_icon_container { background-color: #fff !important; } .invert_panel_interaction .panel_interaction_content_container { background-color: transparent !important; border-width: 2px; border-style: solid; } .invert_panel_interaction .panel_interaction_icon_container .icon { border-width: 14px; border-style: solid; border-color: inherit; color: inherit !important; } .invert_panel_interaction .panel_interaction_icon_container .icon::before { color: inherit; } .invert_panel_interaction .panel_interaction_box [class*=panel_interaction_title] h1 { color: #9E9E9E; font-weight: 600; font-size: 28px; } .flat_panel_interaction .panel_interaction_content_container, .flat_panel_interaction [class*="panel_interaction_box_wrapper"] { border-radius: 0px; } .flat_panel_interaction .panel_interaction_icon_container .icon { border: none; border-radius: 0px; } .flat_panel_interaction .panel_interaction_icon_container .icon_top_left { top: 0px; left: 0px; } .flat_panel_interaction .panel_interaction_icon_container .icon_top_right { top: 0px; right: 0px; } .flat_panel_interaction .panel_interaction_icon_container .icon_bottom_left { bottom: 0px; left: 0px; } .flat_panel_interaction .panel_interaction_icon_container .icon_bottom_right { bottom: 0px; right: 0px; } .flat_panel_interaction [class*="panel_interaction_box_"] > .panel_interaction_content_container::before { background-image: url(/App_Themes/Images/1x1_fff.png) !important; content: ""; float: left; width: 58px; height: 58px; position: absolute; } .flat_panel_interaction .panel_interaction_box_one > .panel_interaction_content_container::before { top: 0; left: 0; } .flat_panel_interaction .panel_interaction_box_two > .panel_interaction_content_container::before { top: 0; right: 0; } .flat_panel_interaction .panel_interaction_box_three > .panel_interaction_content_container::before { bottom: 0; left: 0; } .flat_panel_interaction .panel_interaction_box_four > .panel_interaction_content_container::before { bottom: 0; right: 0; } .flat_panel_interaction .panel_interaction_box::before { background-image: url(/App_Themes/Images/1x1_fff.png) !important; content: ""; float: left; width: 53px; height: 43px; position: absolute; z-index: 1; } .flat_panel_interaction .panel_interaction_box_wrapper_one::before { top: 0; left: 0px; } .flat_panel_interaction .panel_interaction_box_wrapper_two::before { top: 0; right: 0px; } .flat_panel_interaction .panel_interaction_box_wrapper_three::before { bottom: 0; left: 0px; } .flat_panel_interaction .panel_interaction_box_wrapper_four::before { bottom: 0; right: 0px; } .line_panel_interaction .panel_interaction_box { border-width: 1px; border-style: solid; border-color: #cccccc82; } .line_panel_interaction .panel_interaction_icon_container { background-color: #fff !important; } .line_panel_interaction .panel_interaction_content_container { background-color: transparent !important; border-width: 0px; border-style: solid; } .cke .line_panel_interaction .panel_interaction_content_container { border-width: 2px; } .line_panel_interaction .panel_interaction_icon_container .icon { border-width: 2px; border-style: solid; border-color: inherit; color: inherit !important; } .line_panel_interaction .panel_interaction_icon_container .icon::before { color: inherit; } .line_panel_interaction .panel_interaction_box [class*=panel_interaction_title] h1 { color: #9E9E9E; font-weight: 600; font-size: 28px; } .line_panel_interaction .panel_interaction_content_container { transition: color 0.25s 0.0833333333s; position: relative; } .line_panel_interaction .panel_interaction_content_container::before, .line_panel_interaction .panel_interaction_content_container::after { border: 0 solid transparent; box-sizing: border-box; content: ""; pointer-events: none; position: absolute; width: 0; height: 0; bottom: 0; right: 0; } .line_panel_interaction .panel_interaction_content_container::before { border-bottom-width: 2px; border-left-width: 2px; border-radius: inherit; } .line_panel_interaction .panel_interaction_content_container::after { border-top-width: 2px; border-right-width: 2px; border-radius: inherit; } .line_panel_interaction .panel_interaction_box.visited .panel_interaction_content_container { color: inherit; } .line_panel_interaction .panel_interaction_box.visited .panel_interaction_content_container::before, .line_panel_interaction .panel_interaction_box.visited .panel_interaction_content_container::after { border-color: inherit; transition: border-color 0s, width 0.25s, height 0.25s; transition-delay: 0s, 0s, 0.25s; width: 100%; height: 100%; } .line_panel_interaction .panel_interaction_box.visited .panel_interaction_content_container::before { transition-delay: 0s, 0s, 0.25s; } .line_panel_interaction .panel_interaction_box.visited .panel_interaction_content_container::after { transition-delay: 0s, 0.25s, 0s; } .border_panel_interaction .panel_interaction_box { border-width: 1px; border-style: solid; border-color: #cccccc82; } .border_panel_interaction .panel_interaction_icon_container { background-color: #fff !important; } .border_panel_interaction .panel_interaction_content_container, .border_panel_interaction [class*="panel_interaction_box_wrapper"] { border-radius: 0px; } .border_panel_interaction .panel_interaction_box_one > .panel_interaction_content_container, .border_panel_interaction .panel_interaction_box_three > .panel_interaction_content_container { border-right-width: 30px; } .border_panel_interaction .panel_interaction_box_two > .panel_interaction_content_container, .border_panel_interaction .panel_interaction_box_four > .panel_interaction_content_container { border-left-width: 30px; } .border_panel_interaction .panel_interaction_content_container { background-color: transparent !important; border-width: 1px; border-style: solid; } .border_panel_interaction .panel_interaction_icon_container .icon { border-width: 1px; border-style: solid; border-radius: 0; border-color: inherit !important; color: inherit !important; } .border_panel_interaction .panel_interaction_icon_container .icon::before { color: inherit !important; } .border_panel_interaction .panel_interaction_box [class*=panel_interaction_title] h1 { color: #9E9E9E; font-weight: 600; font-size: 28px; } /* #endregion */ /* #region animations for panel interaction */ .panel_interaction_content_container { animation-duration: 1ms; animation-fill-mode: backwards; animation-play-state: paused; } .panel_interaction_box_one .panel_interaction_content_container, .panel_interaction_box_two .panel_interaction_content_container { animation-name: stretchDown2; } .panel_interaction_box_three .panel_interaction_content_container, .panel_interaction_box_four .panel_interaction_content_container { animation-name: stretchUp2; } .border_panel_interaction .panel_interaction_box_one .panel_interaction_content_container, .border_panel_interaction .panel_interaction_box_three .panel_interaction_content_container { animation-name: stretchLeft2; } .border_panel_interaction .panel_interaction_box_two .panel_interaction_content_container, .border_panel_interaction .panel_interaction_box_four .panel_interaction_content_container { animation-name: stretchRight2; } /* student side is hover triggered */ div:not(.cke_wysiwyg_div) .panel_interaction_box_one .panel_interaction_icon_container:hover + .panel_interaction_content_container, div:not(.cke_wysiwyg_div) .panel_interaction_box_two .panel_interaction_icon_container:hover + .panel_interaction_content_container { animation-duration: 1s; animation-play-state: running; animation-fill-mode: forwards; } div:not(.cke_wysiwyg_div) .panel_interaction_box_three .panel_interaction_icon_container:hover + .panel_interaction_content_container, div:not(.cke_wysiwyg_div) .panel_interaction_box_four .panel_interaction_icon_container:hover + .panel_interaction_content_container { animation-duration: 1s; animation-play-state: running; animation-fill-mode: forwards; } /* author side is automatic */ .cke_wysiwyg_div .panel_interaction_box_one .panel_interaction_icon_container + .panel_interaction_content_container, .cke_wysiwyg_div .panel_interaction_box_two .panel_interaction_icon_container + .panel_interaction_content_container { animation-duration: 1s; animation-play-state: running; animation-fill-mode: forwards; } .cke_wysiwyg_div .panel_interaction_box_three .panel_interaction_icon_container + .panel_interaction_content_container, .cke_wysiwyg_div .panel_interaction_box_four .panel_interaction_icon_container + .panel_interaction_content_container { animation-duration: 1s; animation-play-state: running; animation-fill-mode: forwards; } /* strechUp2 */ .stretchUp2 { animation-name: stretchUp2; -webkit-animation-name: stretchUp2; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes stretchUp2 { 0% { transform: scaleY(0); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes stretchUp2 { 0% { -webkit-transform: scaleY(0); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* stretchDown2 */ .stretchDown2 { animation-name: stretchDown2; -webkit-animation-name: stretchDown2; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; } @keyframes stretchDown2 { 0% { transform: scaleY(0); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes stretchDown2 { 0% { -webkit-transform: scaleY(0); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* stretchLeft2 */ .stretchLeft2 { animation-name: stretchLeft; -webkit-animation-name: stretchLeft; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } @keyframes stretchLeft2 { 0% { transform: scaleX(0); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchLeft2 { 0% { -webkit-transform: scaleX(0); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /* stretchRight2 */ .stretchRight2 { animation-name: stretchRight; -webkit-animation-name: stretchRight; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; } @keyframes stretchRight2 { 0% { transform: scaleX(0); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchRight2 { 0% { -webkit-transform: scaleX(0); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } .panel_interaction_icon_container:hover + div { pointer-events: none !important; } /* #endregion */ /* #region dyna color palette for panels */ .panel_interaction_content_container + .color-palette { margin-right: 65px; } /* #endregion */ /* #region resizers for panels */ .panel_interaction_desc_one + .widget_resizer_vertical, .panel_interaction_desc_two + .widget_resizer_vertical { top: -13px; left: 200px; margin-left: unset; } .panel_interaction_desc_three + .widget_resizer_vertical, .panel_interaction_desc_four + .widget_resizer_vertical { bottom: -13px; left: 200px; margin-left: unset; } [class*="panel_interaction_desc_"] + .widget_resizer_vertical { display: none; } .panel_interaction_box:hover .widget_resizer_vertical { display: block; } [class*="panel_interaction_desc_"] + .widget_resizer_vertical .resize_dimension_viewer.vertical_resizer { top: 15px; } /* #endregion */ /* #region fake edit tab for panels */ .cke_wysiwyg_div .panel_interaction_icon_container:hover .icon::after { content: 'Edit'; position: absolute; top: -15px; left: 14px; cursor: pointer !important; background-color: #59C3F5; border-radius: 10px; color: #FFF; padding: 5px; font-size: 12px; } /* #endregion */ /* #region explore me for panels */ .explore_panel_interaction:before { color: rgba(134, 134, 134, 0.69); font-size: 20px; position: absolute; animation: tada 6s forwards; } .panel_interaction_box_one.explore_panel_interaction:before, .panel_interaction_box_two.explore_panel_interaction:before { top: 10px; } .panel_interaction_box_one.explore_panel_interaction:before { content: '\002BAA Explore Me'; left: 65px; } .panel_interaction_box_two.explore_panel_interaction:before { content: 'Explore Me \002BAB'; right: 65px; } .panel_interaction_box_three.explore_panel_interaction:before, .panel_interaction_box_four.explore_panel_interaction:before { bottom: 10px; } .panel_interaction_box_three.explore_panel_interaction:before { content: '\002BA8 Explore Me'; left: 65px; } .panel_interaction_box_four.explore_panel_interaction:before { content: 'Explore Me \002BA9'; right: 65px; } /* #endregion */ /* #region view overrides for panels*/ .cke_editor_txtFAQAnswer .panel_interaction, .FAQAns .panel_interaction { width: 750px !important; } .cke_editor_txtFAQAnswer .panel_interaction_box, .FAQAns .panel_interaction_box { width: 350px !important; } /* #endregion */ /* #endregion */ /* #region Special Css */ .flex_content { display: flex; flex-direction: column; justify-content: center; } .flex_content p { margin: 0px; line-height: normal } /* #endregion */ /* #region new icon box interaction */ /* icon info box */ .sb_wrapper { width: 220px; height: 220px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .sb_container { position: absolute; width: 220px; height: 220px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .sb_box { position: absolute; width: 220px; height: 220px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: 3px; overflow: hidden; -webkit-transition: -webkit-box-shadow ease 1s; transition: -webkit-box-shadow ease 1s; transition: box-shadow ease 1s; transition: box-shadow ease 1s, -webkit-box-shadow ease 1s; } .sb_icon_bg { width: 80px; height: 80px; border-radius: 100%; border: 1px solid rgba(225, 227, 232, 0.18); -webkit-box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25); box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25); background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; -webkit-transition-delay: 0.32s; transition-delay: 0.32s; will-change: transform; } .sb_icon { position: relative; -webkit-transition: all 0.6s ease; transition: all 0.4s ease; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; will-change: transform; font-size: 48px; color: rgb(175, 215, 219); display: flex; } .sb_icon:before { color: inherit; font-size: inherit; font-family: 'icomoon_EL'; z-index: -1; } .sb_title { position: relative; } .sb_wrapper:hover .sb_box { border: 1px solid rgba(225, 227, 232, 0.18); -webkit-box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25); box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.25); -webkit-transition-delay: 0.32s; transition-delay: 0.32s; } .sb_wrapper:hover .sb_icon_bg { -webkit-transform: translateY(-32px) scale(6); transform: translateY(-32px) scale(6); } .sb_wrapper:hover .sb_icon { -webkit-transform: translateY(-48px) scale(1.4); transform: translateY(-48px) scale(1.4); } .sb_title_wrapper { position: relative; bottom: -75px; width: 200px; text-align: center; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transition-delay: 0.32s; transition-delay: 0.32s; } .sb_wrapper:hover .sb_title_wrapper { opacity: 0; -webkit-transform: translateY(-4px) scale(.8); transform: translateY(-4px) scale(.8); } .sb_box::after { content: "I want this content to be driven by a structure... Not content"; position: absolute; width: 170px; top: 111px; opacity: 0; font-size: 13px; color: #5d6494; line-height: 20px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transition-delay: 0.32s; transition-delay: 0.32s; } .sb_wrapper:hover .sb_box::after { opacity: 1; } .hid_block { display: none !important; } /* #endregion */ /* #region tilecrawl */ .tilecrawl_wrapper { width: 300px; height: 420px; perspective: 900px; margin: 0 auto; text-align: left; } .tilecrawl_wrapper p { font-size: 14px; color: #fff; text-align: left; letter-spacing: 1px; } /* tilecrawl title */ .tilecrawl_title { color: #111; position: fixed; top: 0%; left: 30%; letter-spacing: 2px; } /* containers */ .tilecrawl_wrapper .tilecrawl_container { position: absolute; top: 0%; width: 100%; height: 100%; transition: .5s all ease; transform: rotateX(60deg) scale(0.7); perspective: 900px; box-shadow: 0px 10px 50px #555; animation: tilecrawl_entry 1s linear 1; } .tilecrawl_wrapper .tilecrawl_container:nth-child(2) { left: -100%; z-index: 0; } .tilecrawl_wrapper .tilecrawl_container:nth-child(3) { position: absolute; top: 0%; width: 100%; z-index: 300; } .tilecrawl_wrapper .tilecrawl_container:nth-child(4) { left: 100%; z-index: 0; } /* default colors */ .tilecrawl_interaction[data-color="default"] .tilecrawl_container:nth-child(2) { background: linear-gradient(to bottom, #59476f 30%, #7b88d1 100%), rgb(58, 160, 209); } .tilecrawl_interaction[data-color="default"] .tilecrawl_container:nth-child(3) { background: linear-gradient(to bottom, #eba65b 30%, #d99267 100%), rgb(58, 160, 209); } .tilecrawl_interaction[data-color="default"] .tilecrawl_container:nth-child(4) { background: linear-gradient(to bottom, #59476f 30%, #7b88d1 100%), rgb(58, 160, 209); } .tilecrawl_interaction[data-count="2"] .tilecrawl_container:nth-child(2) { left: -50% !important; } .tilecrawl_interaction[data-count="2"] .tilecrawl_container:nth-child(4) { left: 50% !important; } .tilecrawl_container:hover, /*.keep_interaction_open .tilecrawl_container,*/ .visited.tilecrawl_container { cursor: pointer; transform: rotate(0deg) scale(1) translateY(10px); transition: .5s all ease; z-index: 400; } /* images */ .tilecrawl_interaction [class*="tilecrawl_image_"] { position: absolute; top: 5%; left: 0%; width: 100%; color: #ccc; font-size: 150px; text-align: center; display: flex; align-items: center; justify-content: center; background-color: transparent !important; } [class*="tilecrawl_image_"] > p { display: none; } /* desc box */ [class*="tilecrawl_desc_"] { position: relative; top: 45%; height: 49%; width: 93%; overflow: hidden; color: #111; padding: 6px; margin-left: 5px; margin-right: 5px; } /* hover me msg container and label */ .tilecrawl_hover_msg_container { position: absolute; top: 80%; width: 100%; left: 0%; height: 20%; } .cke .tilecrawl_hover_msg_container { z-index: -1; } .tilecrawl_hover_msg { color: #111; position: absolute; top: 30%; left: 30%; letter-spacing: 2px; } .tilecrawl_hover_msg_li { position: absolute; top: 25%; list-style: none; color: #111; } .tilecrawl_hover_msg_li:nth-child(1) { left: 15%; animation: tilecrawl_msg_back 1s linear infinite; } .tilecrawl_hover_msg_li:nth-child(2) { right: 15%; animation: tilecrawl_msg_fwrd 1s linear infinite; } @keyframes tilecrawl_msg_fwrd { 50% { transform: translateX(10px); opacity: 0.5; } 100% { transform: translateX(10px); opacity: 0; } } @keyframes tilecrawl_msg_back { 50% { transform: translateX(-10px); opacity: 0.5; } 100% { transform: translateX(-10px); opacity: 0; } } @keyframes tilecrawl_entry { 0% { top: -20%; opacity: 0.1; } 100% { top: 0%; } } .cke .tilecrawl_hover_msg_container { display: none; } .cke div[class*="tilecrawl_image_"]:hover::after { content: 'Edit Icon'; position: absolute; top: -23px; cursor: pointer !important; width: 80px; height: 28px; background-color: #59C3F5; opacity: .7; text-align: center; color: #FFF; padding-top: 9px; font-size: 14px !important; font-family: 'Open Sans' !important; border-radius: 0 0 10px 15px; } /* admin panel for tilecrawl */ .tilecrawl_interaction > .Admin { z-index: 1; } .tilecrawl_interaction > .Admin > .admin-panel { width: 203px; text-align: left; } .admin-panel-select-tilecrawl-color .admin_panel_color_button { width: 80px; } .admin-panel-select-tilecrawl-color .admin_panel_color_button .admin_panel_color_button_preview { width: 76px; } /*styles*/ .tilecrawl_thumbs [class*="tilecrawl_image"] { height: 100%; } .tilecrawl_thumbs [class*="tilecrawl_desc_"] { display: none; } .tilecrawl_tile [class*="tilecrawl_image"] { display: none; } .tilecrawl_tile [class*="tilecrawl_desc_"] { height: 90%; top: 5%; } .tilecrawl_rounded .tilecrawl_container { border-radius: 35px; } .tilecrawl_rounded [class*="tilecrawl_desc_"] { height: 40%; } /* #endregion */ /* #endregion Interactions */ /* #region Misc */ /* start old course silver css */ /* Default global css */ /* paragraphs */ .MainBodyContent p, .cke_contents p { font: normal 14px Verdana; } /* list items */ .MainBodyContent li, .cke_contents li { font: normal 14px Verdana; padding-top: 5px; } /* tables and child elements of tables */ .MainBodyContent table, .MainBodyContent tr, .MainBodyContent td, .cke_contents table, .cke_contents tr, .cke_contents td { font: normal 14px Verdana; } .MainBodyContent table, .MainBodyContent tr, .MainBodyContent td, .cke_contents table, .cke_contents tr, .cke_contents td, .YHContentPanel td { vertical-align: top; } /* divs and default font */ .MainBodyContent div:not(.pop_tile_item_entity):not([class*="tilecrawl_image_"]):not(.jp-current-time):not(.jp-duration), .cke_contents div:not(div[class*=dynaEditable]):not(.pop_tile_item_entity):not([class*="tilecrawl_image_"]):not(.jp-current-time):not(.jp-duration) { font: normal 14px Verdana; } /* pullquotes */ div.pullquote { font: 600 17px 'open sans'; color: #565656 } .pullquote { width: 30%; border: 0; padding: 10px 3em; margin-top: 5px; margin-bottom: 5px; position: relative; } .pullquote.right { margin-left: 30px; } .pullquote.left { margin-right: 30px; } .pullquote:before { left: 0; top: .5em; content: open-quote; } .pullquote:after { right: 0.2em; bottom: 0; content: close-quote; } .pullquote:before, .pullquote:after { position: absolute; font-size: 3em; line-height: 0; quotes: "“" "”" "‘" "’"; height: 0em; font-family: Georgia, Times, 'Times New Roman', serif; } .pullquote { quotes: "“" "”" "‘" "’"; } /* fix for all links in course.aspx for lblcoursecontent */ .MainBodyContent a:not(.btn_Pushsqr):not(.btn_Pushpill):not(.btn_Flatsqr):not(.btn_Flatpill):not(.btn_sidearrow):not(.btn_Stitch):not(.btn_Pushpulse):not(.btn_Flatpulse):not(.btn_Simplelink):not(.no-link-style), .cke_contents a:not(.btn_Pushsqr):not(.btn_Pushpill):not(.btn_Flatsqr):not(.btn_Flatpill):not(.btn_sidearrow):not(.btn_Stitch):not(.btn_Pushpulse):not(.btn_Flatpulse):not(.btn_Simplelink):not(.no-link-style):not(.select2-choice):not(.ui-tabs-anchor) { font-style: normal; color: #0008C8; text-decoration: underline; } .MainBodyContent a:hover:not(.btn_Pushsqr):not(.btn_Pushpill):not(.btn_Flatsqr):not(.btn_Flatpill):not(.btn_sidearrow):not(.btn_Stitch):not(.btn_Pushpulse):not(.btn_Flatpulse):not(.btn_Simplelink):not(.no-link-style), .cke_contents a:hover:not(.btn_Pushsqr):not(.btn_Pushpill):not(.btn_Flatsqr):not(.btn_Flatpill):not(.btn_sidearrow):not(.btn_Stitch):not(.btn_Pushpulse):not(.btn_Flatpulse):not(.btn_Simplelink):not(.no-link-style):not(.select2-choice):not(.ui-tabs-anchor) { font-style: normal; color: #0008C8; text-decoration: none; } .MainBodyContent .Hiden, .MainBodyContent .HidenNoteForAdmins { display: none; position: relative } /* For Sortable Quesation Types*/ /* .MainBodyContent .JQSortable_li {width:620px}*/ .glossary:not(.merge_glossary) { font-weight: 700 !important; color: #c86800 !important; text-decoration: underline !important; min-width: 30px; display: inline-block; } .glossary:not(.merge_glossary):hover { font-weight: 700 !important; color: #c86800; text-decoration: none !important } .glossary img { margin-bottom: -4px; } .glossary .cke_widget_wrapper { border: none; } .glossary .cke_widget_drag_handler_container, .glossary .cke_image_resizer { display: none !important } .merge_glossary img { display: none; } /*.lblQuestionInfo p { display: inline; line-height:20px; }*/ /* template specific classes starts*/ .width25 { width: 25%; } .ControlWrapper { background-color: #F3F3F3; } .width480 { width: 480px; } .width200 { width: 200px; } .columnbg { background-color: #f9f7f7; } .columnbg1 { background-color: #efeeee; } .columndivider { width: 1px; background-color: #ffffff; min-height: 62px; } .marginleft7 { margin-left: 7px; } .paddingleft70 { padding-left: 70px; } /*end course silver*/ .html5pointWrapper .DC1 { top: 0px; left: 0px; height: 100%; width: 100%; opacity: 1; } .html5pointWrapper .DC0 { top: 0px; left: 0px; height: 100%; width: 100%; opacity: 0; } .html5pointWrapper ::selection { background-color: transparent; } .html5pointWrapper ::-moz-selection { } .html5pointWrapper div, .html5pointWrapper iframe { position: absolute; position: absolute; } .html5pointWrapper pre { position: absolute; margin: 0px; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; } .html5pointWrapper img[src*='/pres/'] { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; } .html5pointWrapper input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .html5pointWrapper .transOrgin { -moz-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0px 0px; -ms-transform-origin: 0 0; } .html5pointWrapper .SC { position: relative !important; display: block !important; } #resizer.html5pointWrapper { max-height: 540px !important; width: 100% !important; overflow: hidden; } .hidSC { display: none; } .tempSlideImg { opacity: .3; } .containerSC:not(.empty) { position: relative; display: inline-block; } .containerSC:not(.empty)::before { content: 'Read Only'; color: #000; text-align: center; width: 100%; min-width: 600px; top: 38%; position: absolute; font-size: 550%; font-weight: bold; z-index: -1; } .presentationWrapper { display: inline-block; position: relative; margin-top: 0px; margin-bottom: 10px; } .pwContainer { text-align: center; } /*END Top Notifications*/ /*------------------------------------------------------------------ [ 4.12 Bootstrap Modals ] File(s): Course_1.Master, Modal_Core and Modal_Course.js */ /* Modal styles*/ div[class*='styleModal_'] .modal-header { display: none; } div[class*='styleModal_'] .modal-dialog { margin-top: 41px; } div[class*='styleModal_'] .close { font-size: 45px !important; line-height: 30px !important; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ } div[class*='styleModal_'] .GenericContainer, div[class*='styleModal_'] .GenericContainer .paddingbottom10 { padding-bottom: 0px !important; } div[class*='styleModal_'] .GenericContainer .clearfix h2 /*Chapter*/ { margin-top: 10px; margin-bottom: 0px; padding-top: 0px; } div[class*='styleModal_'] .GenericContainer .clearfix .textstyle4 { padding-top: 0px; } div[class*='styleModal_'] .GenericContainer .clearfix .LblTitle /*Title*/ { padding-left: 0px; } div[class*='styleModal_'] .GenericContainer .textstyle4 a /*Edit*/ { padding-top: 10px; } div[class*='styleModal_'] .GenericContainer .Coursecontent { padding-top: 10px !important; } div[class*='styleModal_'] .GenericContainer .MainBodyContent { position: relative; padding-top: 0px; padding-left: 0px; margin-left: 0px; margin-top: -4px; } /*div[class*='styleModal_'] .GenericContainer .MainBodyContent { position: relative; padding-top: 0px; padding-left: 11px; margin-left: -10px; }*/ /*Cool postal borders*/ .styleModal_2 .modal-dialog { background: url(https://cdn.yardiaspire.com/images/controls/modalborder.png) 0 0 repeat-x,url(https://cdn.yardiaspire.com/images/controls/modalborder.png) 0 100% repeat-x; padding-top: 15px; } /*Minimalist */ .styleModal_3 .modal-dialog { border-radius: 0px !important; box-shadow: 0 1px 3px rgba(126, 126, 126, 0.5); border-width: 0px !important; border-top-width: 9px !important; border-top-style: solid; border-top-color: aqua; } /*Fat border Square*/ .styleModal_4 .modal-dialog { border-radius: 0px !important; box-shadow: 0 1px 3px rgba(126, 126, 126, 0.5); border-width: 10px !important; border-style: solid; border-color: aqua; padding-left: 1px !important; padding-right: 0px !important; } .styleModal_4 .GenericContainer .clearfix h2 { padding-left: 7px; } .styleModal_4 .GenericContainer .clearfix .LblTitle { padding-left: 3px !important; } .styleModal_4 .close { padding: 9px; border: 9px solid; margin-top: -20px; margin-right: -10px; border-color: cyan; } /*Morph/plain*/ .styleModal_5 .modal-dialog { background-color: rgba(255, 255, 255, 0) !important; box-shadow: none; } .styleModal_5 .modal-dialog > .close { padding: 11px 12px; border: 5px solid; margin-top: -20px; margin-right: -10px; border-color: #54af39; z-index: 99999; background-color: #fff; } .styleModal_5 .GenericContainer .clearfix h2.paddingtop2 /*Chapter*/ { display: none; } .styleModal_5 .GenericContainer .clearfix .LblTitle /*Title*/ { display: none; } .styleModal_5 .GenericContainer .textstyle4:first-child { /*position: absolute; right: 10px;*/ } .styleModal_5 .GenericContainer .textstyle4 a /*Edit*/ { /*top: 2px !important; right: -20px; background-color: #fff; padding: 2px !important;*/ z-index: 999999999; } /*Ipad White*/ .styleModal_6 .modal-dialog { } /*Ipad Black*/ .styleModal_7 .modal-dialog { background: url(/images/controls/ipadmodal.png) 0 0 no-repeat; padding-top: 15px !important; background-size: cover; min-height: 748px !important; padding: 35px 91px 0 91px !important; box-shadow: none; background-color: rgba(255, 255, 255, 0) !important; } .styleModal_7 .GenericContainer { padding-bottom: 0px !important; background-color: #fff; height: 657px; } /*temp new style*/ .styleModal_8 .modal-dialog { z-index: initial !important; } .styleModal_8 .modal-dialog:after { content: ""; position: absolute; left: -20px; top: -20px; right: -20px; bottom: -20px; z-index: -1; background: url(//assets.atlasobscura.com/assets/topography__2x-9a881e804210ac0c9942620dbf63e7737b108b12889ec7cef5f9b3720adb520d.png); background-size: 325px; background-color: rgba(255, 255, 255, 0.86); opacity: .65; display: inline; border: 2px solid rgba(56, 59, 62, 0.77); } .styleModal_8 .modal-dialog.ui-draggable-dragging:after { opacity: .1; } .GenericContainer form { min-width: 300px; } .modal-open-fix { overflow: hidden; } #FAQModal .modal-dialog { left: 0px; position: relative; } #FAQModal { overflow-y: scroll; } #UserDocModal .modal-dialog .GenericContainer { padding-top: 20px; box-sizing: border-box; } /* Responsive */ #FAQModal img { max-width: 100% !important; height: inherit !important; } #FAQModal iframe { max-width: 100% !important; } #FAQModal .media_embed { max-width: 100% !important; } .table-responsive { min-height: .01%; overflow-x: auto; } #pnlTranscriptModalContainer table { max-width: 100% !important; table-layout: fixed; width: 100% !important; margin: 0px } #pnlTranscriptModalContainer table td, #pnlTranscriptModalContainer table th { width: initial !important; padding: 0px } /* student transcript */ .StudentTranscripiptHeader .ManageUserImg { width: 110px; float: left; padding: 10px 20px; height: 125px; text-align: center; } .StudentTranscripiptHeader .TransFilters { float: left; padding-top: 10px; padding-bottom: 25px; } .StudentTranscripiptHeader .TransFilters .TransFilterRow { padding: 3px; } .StudentTranscripiptHeader .TransFilters .TransFilterRow > div { display: inline-block; } .StudentTranscripiptHeader .TransFilters .TransFilterRow > div:first-child { width: 75px; } #aTransApply { margin-left: 80px; } #aTransApply, #aTransDownload { width: 100px; text-align: center; font-weight: 600 !important; } .FAQmodalmenu { top: 170px; max-height: 75%; overflow-y: auto; background-color: #fff; position: fixed; width: 235px; list-style-type: none; padding: 0px 100px 0px 0px; margin-left: -15px; border-top-left-radius: 2px; border-bottom-left-radius: 2px; transition: all .01s; filter: drop-shadow(3px 2px 3px #38383863); } .FAQmodalmenu:hover { z-index: 99999; margin-left: -10px; transition: margin .1s ease-in; padding-right: 1px; } @-webkit-keyframes bounceFAQmodalMenu { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(500px, 0, 0); transform: translate3d(500px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-35px, 0, 0); transform: translate3d(-35px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceFAQmodalMenu { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(500px, 0, 0); transform: translate3d(500px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-35px, 0, 0); transform: translate3d(-35px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceFAQmodalMenu { -webkit-animation-name: bounceFAQmodalMenu; animation-name: bounceFAQmodalMenu; } .FAQmodalmenu li { padding: 12px 16px 15px 10px; transition: all .4s; border-bottom: 1px solid #EFEFEF; font-size: 13px; position: relative; } .FAQmodalmenu li:hover { background-color: rgba(85, 85, 85, 0.35); } .FAQmodalmenu li::before { -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); /*transform: rotate(-35deg);*/ position: absolute; right: 5px; top: 26px; height: 1px; width: 13px; background: #c77405; /*-webkit-backface-visibility: hidden; backface-visibility: hidden;*/ content: ''; } .FAQmodalmenu li::after { -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); /*transform: rotate(35deg);*/ position: absolute; right: 5px; top: 19px; height: 1px; width: 13px; background: #c77405; /*-webkit-backface-visibility: hidden; backface-visibility: hidden;*/ content: ''; } /*------------------------------------------------------------------ [ 5.2 ] Question Editor Location: jquery.question-editor.js */ /* Question Edit modal, ordering type */ .JQSortable_question { list-style-type: none; margin: 0px; padding: 5px; margin-left: 0px; clear: both; } .JQSortable_question_li { margin-top: 10px; padding: 3px 3px 0px 3px; overflow: hidden; font-size: 1.2em; background-color: #FFF; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; vertical-align: middle; } /*Scyat Styling*/ .JQSortable_question_li .scaytTextArea { border: 1px solid #CECDCD; border-bottom-width: 0px; border-top-width: 0px; margin-top: -2px; font: normal 15px 'open sans'; color: #636363; margin-bottom: 0px; padding-left: 3px; } .AnswerCell .scaytTextArea, .CorrectCell .scaytTextArea { border: 1px solid #CECDCD; font: normal 15px 'open sans'; color: #636363; } #MQEditFillBucket1 .scaytTextArea, #MQEditFillBucket2 .scaytTextArea, #MQEditFillBucket3 .scaytTextArea, #MQEditFillBucket4 .scaytTextArea { border-left-width: 0px; } /*survey*/ .editSurveyAnswers .select2-container { margin: 3px } .select2-container .select2-selection--single .select2-selection__rendered { padding-top: 3px; padding-bottom: 1px; margin-top: -1px; } .ddlOptionBuilder { vertical-align: middle; outline: none } .ddlOptionBuilder_Drop .select2-results__group { font-weight: 600; } .ddlOptionBuilder_Drop .select2-results .select2-results__option { font-size: 14px !important } .optionBuilderScale { display: none; float: right; margin-right: 110px; } .JQSortable_grab { cursor: s-resize; height: 37px; width: 25px; } .rblAnsOpts { margin: 10px 10px 0px 0px; width: 95%; /*max-width: 700px;*/ border-spacing: 0px; } .rblAnsOpts input[type="radio"] { transform: scale(1.4); height: 32px; cursor: pointer; outline: none; margin: 1px 3px 0px 5px; } .rblAnsOpts label { position: relative; float: right; width: calc(100% - 33px); padding-bottom: 8px; padding-top: 7px; cursor: pointer; } .rblAnsOpts tr:hover { background-color: #FFFCDE; } .TestDataList > tbody > tr > td { border-top-width: 2px; border-top-style: solid; border-color: #CCC; } .TestDataList > tbody > tr:first-child > td { border-top-width: 0px; } .TestDataList { padding-top: 0px; margin-top: 10px; width: 1022px; } .Questiontypelist { margin: 0px; padding: 0px; list-style: none; width: 1000px !important; padding-bottom: 10px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .Questiontypelist li { float: left; margin: 13px 15px; cursor: pointer !important; background-color: #F5F5F5; width: 370px; height: 95px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border: 1px solid #F0EEEE; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; padding: 3px 10px; color: #4e4e4e; } .Questiontypelist li:hover { border: 2px solid #84B152; padding: 2px 9px; background-color: #ffffff; } .Questiontypelist .ContainerLogo { width: 60px; float: left; border-right: 1px solid #CECECE; padding: 10px 5px 10px 10px; margin-right: 20px; margin-top: 12px; min-height: 45px; max-height: 45px; } .Questiontypelist .ContainerLogo img { max-height: 45px; } .Questiontypelist .ContainerDesc { width: 251px; float: left; margin-top: 19px; } .Questiontypelist .ContainerDesc .QuestionTitle { font: 600 14px 'open sans'; } .Questiontypelist .ContainerDesc .QuestionDesc { margin-top: 8px; font: 500 13px'Open Sans'; } .QMENewChoise { min-width: 75px; } img.txtareaFillBlank { vertical-align: middle; } span.txtareaFillBlank { text-decoration: underline; font: 600 16px 'open sans'; color: #565656; } .QEditBucketAns { padding: 8px 0px !important; } div.QEditBucket { width: 245px; float: left; margin-bottom: 17px; margin-right: 20px; } input.bucketTitle { width: 205px; margin: 0px -1px 2px 5px !important; background-color: #E3E4E6; border: none !important; border-bottom: 2px solid #FFF !important; } .QEditBucket { background-color: #E3E4E6; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; margin-left: 3px; margin-right: 3px; padding: 4px; } .QEditBucketAns .QEditBucket:nth-child(4n + 1) { clear: both; } .divQBucketContainer .divQBucket:nth-child(4n +1) { clear: both; } .AddBucket { text-align: center; } .RemoveBucket { padding: 0px 3px 0px 5px !important; position: relative; top: -9px; right: -6px; font-size: 14px !important; } .RemoveBucketFillin { padding: 1px 6px !important; position: relative; top: -4px; right: -28px; font-size: 14px !important; } .aInsertTextBox { display: block; text-decoration: underline !important; color: #777; margin-left: 7px; padding-top: 2px; } .aInsertTextBox:hover { text-decoration: none !important; } .editQHeader { font-weight: 600 !important; font-size: 13px; font-family: 'Open Sans'; color: #777; } /***** HotSpot *****/ .divHSEditAction { border: solid 1px #e7e6e6; width: 1092px; padding: 6px 4px 2px 4px; background-color: #c9ffc9; margin-top: 5px; user-select: none; } .divHSEditAction input { background-color: transparent; } .HsPageWrapper { width: 1060px; background-color: #fbfbfb; border: solid 1px #e7e6e6; padding: 20px; } .HsPageWrapper .HSImgContainer { background-color: white; border: 1px dotted #d5d5d5; padding: 10px 0px; } .divHSEditAction #divQEHSEditAction { display: none; } .divHSEditAction #divQEHSEditAction #aQEHSEditUndo { text-decoration: underline; font-weight: 500; top: 3px; position: relative; } .divHSEditAction .imgTaggAlign > div { background-color: #f6f6f6; } /* adding new area mode */ .divHSEditAction.AddingArea { pointer-events: none; background-color: #d7ffd7; } .divHSEditAction.AddingArea > div { opacity: 0.6; } .divHSEditAction.AddingArea .HSAreaEdit { opacity: 1.0; pointer-events: all; } .divHSEditAction.AddingArea #divQEHSDefaultAction { display: none; } .divHSEditAction.AddingArea #divQEHSEditAction { display: block; } .QERemoveHS { position: absolute; color: #CE6262 !important; border-color: #CE6262 !important; } .divQEditHSBGImg { position: relative; } .divQEditHSBGImg img { max-width: 100%; cursor: pointer; } .imgTaggAlign { display: inline; } .imgTaggAlign > div { height: 18px; width: 18px; padding: 4px 12px; outline: 0; cursor: default; border: 1px solid #CCC !important; display: inline; } .imgTaggAlign .justifyLeft { background: url(/ckeditor/skins/mono_aspire/icons.png) 5px -955px no-repeat #ffffff; } .imgTaggAlign .justifyCenter { background: url(/ckeditor/skins/mono_aspire/icons.png) 6px -931px no-repeat #ffffff; } .imgTaggAlign .justifyRight { background: url(/ckeditor/skins/mono_aspire/icons.png) 5px -978px no-repeat #ffffff; } .imgTaggAlign > div:hover, .imgTaggAlign > div.selected { background-color: #D0D0D0; } .HSAnsPin { width: 26px; height: 26px; position: absolute; opacity: 0.7; background-image: url(https://cdn.yardiaspire.com/images/Controls/QuestionType/3.png); background-size: contain; margin-top: -13px; margin-left: -13px; } .HSAnsPin.hover { opacity: 1; } .legend-label.HSUrsAns .HSAnsPin { height: 15px; width: 15px; } .divQEditHSBGImg .ui-resizable-handle { background-position-x: 6px !important; background-position-y: 5px !important; background-size: 19px !important; width: 30px !important; height: 30px !important; -webkit-animation-duration: .8s !important; animation-duration: .8s !important; transform: translateX(0); animation-name: tada; bottom: -3px !important; right: -3px !important; background-color: #3a3a3a !important; outline: none !important; background-image: url(/images/controls/drag-side.png) !important; background-repeat: no-repeat !important; border-radius: 2px !important; } .divQEditHSBGImg.right .ui-resizable-handle { left: -3px; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; } .divQEditHSBGImg div.ui-resizable, .divQEditHSBGImg div.maphilighted, div.imgQEditHotSpot { background-repeat: no-repeat; background-color: transparent; background-size: 100% 100% !important; } .imgQEditHotSpot + map { cursor: pointer !important; } .right .ui-resizable-resizing { left: 0px !important; } .ui-resizable-resizing .QERemoveHS { display: none; } .legend-HS-label-div { width: 105px; display: inline-block; } .legend-HS-label-div .HS-selecd { position: relative; margin-left: 20px; top: 4px; opacity: 0.5; } .legend-label.selected { font-weight: 600; } .legend-label.HSUrsAns .HS-selecd { } .legend-label.HSUrsAns.selected .HS-selecd { opacity: 1; } .legend-label.HSCorAns .HS-selecd { border: solid 1px #59920a; background-color: #79b02d; width: 50px; height: 10px; } .legend-label.HSCorAns.selected .HS-selecd { opacity: 1; } /* displaying test */ .divHSQConfig { margin-bottom: 15px; } /***** HotSpot *****/ /* yardi help styling */ /* YH specific style for techwriters - begin */ table.tstyle1 td { border-bottom: 1px solid black !important } table.tstyle1 th { border-bottom: 2px solid black !important } table.tstyle1 tr:first-child td, table.tstyle1 tr:first-child th { border-top: 1px solid black !important; } /*end*/ /* #endregion */ /* #region Experiments and Debugging */ /* misc */ .quicktool_color_button_input > .quicktool_color_button_preview { left: 3px; } .ck_control_draghandle { display: block; position: absolute; top: 0px; right: 0px; width: 35px; height: 35px; background-color: #efefef; border-radius: 0 0 0 25px; background-image: url(../images/Controls/drag2.png); background-position: 12px 9px !important; background-size: 17px; background-repeat: no-repeat; cursor: move; } .quicktool_btn_edit:before { content: 'Edit'; background-color: #59C3F5; color: #FFF; font-family: "Open Sans"; font-size: 13px; font-weight: bold; vertical-align: top; padding: 3px 10px 3px 10px; margin: -3px; border-radius: 3px; } /* show all controls - used for debugging dynamic controls, you will also have to comment out the section in the js which removes them on mouse out *see objAuthoringControls ~ function setupCkControls() ~ look for comment *remove all controls* */ .visible_override_ckcontrol.ck_control:not(.admin-panel) { visibility: visible !important; display: block !important; } /* special */ /*.eagle_eye { filter: blur(10px); } /* greyscale or something , or filter lighting , look into IE support */ /* #endregion */ /* #region selected element feature - all parts - */ /*mode class appended to container - disable most toolbar items in selection mode*/ .selection_mode_active .cke_top a:not(.cke_button__custom_lassoselection) { opacity: .5 !important; pointer-events: none !important; } /*base*/ .sel_helper { display: none; position: fixed; width: 168px; background: #f9f9f9; border: 1px solid #ccc; border-top-color: #3b95c4; border-top-width: 8px; padding: 9px; padding-bottom: 0px; font-weight: 500; z-index: 999999; margin-top: 19px !important; margin-left: 1px !important; transition: width .25s ease-in-out !important; } .sel_el_show_hotkeys.sel_helper { width: 273px; } .sel_helper_banner { user-select: none; height: 38px; } .sel_helper_elem_count { margin-left: 5px; font-size: 14px; font-weight: 900; user-select: none; } /* drag handle */ .sel_helper_drag_handle { font-family: 'icomoon_EL' !important; position: absolute; left: 0; top: 7px; transition: opacity .3s; cursor: move; font-size: 16px; width: 185px; height: 45px; margin-top: -7px; padding: 2px; } .sel_el_show_hotkeys .sel_helper_drag_handle { width: 286px; } .sel_helper_drag_handle::before { content: '\e981'; position: absolute; right: 3px; margin-top: 2px; margin-right: 3px; } /*helper exposed when elements are selected*/ [data-selected-elements-active] .sel_helper { display: block; } /*title*/ .sel_helper_title { margin-left: 10px; color: #686a68; font-family: 'Open Sans'; font-weight: 600; font-size: 13px; } /*the expand button to open the hotkey menu*/ /*base*/ .sel_helper_expando { cursor: pointer; font-size: 18px; font-family: 'icomoon_EL' !important; color: #686a68; } /*show*/ .sel_helper_expando::before { content: 'Show Actions'; font-size: 11px; position: absolute; top: 26px; left: 35px; font-family: 'Open Sans'; font-weight: 600; } .sel_helper_expando:after { content: '\ed5f'; position: absolute; top: 26px; left: 13px; font-size: 16px; } /*hide*/ .sel_el_show_hotkeys .sel_helper_hotkey_menu { opacity: 1; pointer-events: all; height: 480px; } .sel_el_show_hotkeys .sel_helper_expando::before { content: 'Hide Actions'; } .sel_el_show_hotkeys .sel_helper_expando:after { content: '\ed60'; } /*end expando button*/ /*hotkey menu*/ .sel_helper_hotkey_menu { position: fixed; background: white; border-radius: 0px 0px 3px 3px; padding: 3px 10px 10px 10px; margin-top: 0; margin-left: -10px; border: 1px solid #ccc; width: 271px; z-index: 0; opacity: 0; transition: height .27s; height: 0; overflow: hidden; transition: width .25s ease-in-out !important; } .sel_helper ul { padding-left: 0px; list-style-type: none; margin-bottom: 2px; font-size: 11px; cursor: default; } .sel_helper li { margin: 7px 0px; display: flex; align-content: center; align-items: center; cursor: pointer; } .sel_helper_non_actionable_row { cursor: default !important; } /*disable draggable exclusive actions when selection doesnt support it*/ .sel_helper_control_row.disabled { opacity: .4; } .sel_helper_control_row.disabled .sel_helper_control { pointer-events: none; } /*hotkey columns*/ .sel_helper_hotkey_keys, .sel_helper_hotkey_desc { margin-right: 8px; } .sel_helper_hotkey_keys { font-weight: 600; color: #2f2f2f; } /*actionable buttons from the hotkey menu - the little blue border selection effect*/ .sel_helper_control.actionable:hover { transform: scale(1.10); } .sel_helper_control.actionable:hover::before { content: ''; position: absolute; background-color: #85C1E9; width: 3px; height: 90%; bottom: 0; left: 27px; } .sel_helper_control.actionable:hover::after { content: ''; position: absolute; background-color: #85C1E9; width: 3px; height: 90%; bottom: 0; right: 27px; } /*icons for each hotkey button*/ .hotkey_icon { background-size: 23px !important; background-repeat: no-repeat !important; height: 25px; width: 25px; display: inline-block; margin-right: 14px; } .hotkey_icon_cancel { background-image: url('/images/SelectedElementFeatures/cancel.png'); } .hotkey_icon_lasso { background-image: url('/images/SelectedElementFeatures/lasso.png') !important; } .hotkey_icon_lasso.on { background-color: #DDD; background-position-x: 2px; background-position-y: 1px; padding-left: 1px; padding-right: 1px; } .hotkey_icon_delete { background-image: url('/images/SelectedElementFeatures/delete.png'); } .hotkey_icon_applycss { background-image: url('/images/SelectedElementFeatures/applycss.png'); } .hotkey_icon_shift { background-image: url('/images/SelectedElementFeatures/shift.png'); } .hotkey_icon_fullshift { background-image: url('/images/SelectedElementFeatures/fullshift.png'); } .hotkey_icon_justify_horizontal_center { background-image: url('/images/SelectedElementFeatures/justify_horizontal_center.png'); } .hotkey_icon_justify_horizontal { background-image: url('/images/SelectedElementFeatures/justify_horizontal.png'); } .hotkey_icon_justify_vertical_center { background-image: url('/images/SelectedElementFeatures/justify_vertical_center.png'); } .hotkey_icon_justify_vertical { background-image: url('/images/SelectedElementFeatures/justify_vertical.png'); } .hotkey_icon_dock { background-image: url('/images/SelectedElementFeatures/dock.png'); } .hotkey_icon_smartgrid { background-image: url('/images/SelectedElementFeatures/smartgrid.png'); } .hotkey_icon_clone { background-image: url('/images/SelectedElementFeatures/clone.png'); } .hotkey_icon_smartresizer { background-image: url('/images/SelectedElementFeatures/smartresizer.png'); } /*docked*/ .sel_helper_docked, .sel_helper_docked .sel_helper_drag_handle { margin: 0px; width: 27px !important; /* z-index: 2; */ transition: width .25s ease-in-out !important; } .sel_helper_docked .sel_helper_banner, .sel_helper_docked .sel_helper_hotkey_menu { width: 25px !important; transition: width .25s ease-in-out !important; } .sel_helper_docked .sel_helper_title, .sel_helper_docked .sel_helper_drag_handle::before, .sel_helper_docked .sel_helper_expando::before { content: ''; } .sel_helper_docked .sel_helper_expando::after { font-size: 21px; top: 14px; left: 12px; } .sel_helper_docked span.sel_helper_hotkey_desc, .sel_helper_docked span.sel_helper_hotkey_keys, .sel_helper_docked .sel_helper_title { display: none !important; } .sel_helper_docked .hotkey_icon { margin-right: 0px; } /*elements selected*/ /*selected visual*/ .selected_elem_ck > .cke_widget_element { box-shadow: 0px 0px 4px 1px #f502ff !important; } /*selection order node - accomidate better placement for freedrag vs. standard aligned*/ .helper_selection_order { position: absolute; left: 0; top: 5px; display: flex; justify-content: space-evenly; align-content: center; align-items: center; border: 1px solid white; border-radius: 3px; padding: 2px; font-weight: 800; font-size: 14px; color: #fff; height: 25px; width: 25px; background: #00a8ff; z-index: 1; } .ui-draggable .helper_selection_order { right: 0; } /*hack for non-draggable links and the visual selection node*/ .selected_elem_ck[data-link-type]:not(.ui-draggable) { transform: scale(1); } /* #endregion */ /* #region docked element */ /*vertical dock*/ .cke [data-dock-shift="vertical"].cke_widget_wrapper { width: 1059px !important; } /*horizontal dock*/ .cke [data-dock-shift="horizontal"] { top: 0px !important; height: 100% !important; bottom: 0px !important; } [data-dock-shift="horizontal"] { bottom: 3px !important; } /* #endregion */ /*#region smart grid*/ /*wrapper*/ .smart_grid_modal { display: block; background-color: #fff; overflow: hidden; padding: 15px; width: 430px; } /*controls*/ .smart_grid_labels, .smart_grid_input, .smart_grid_modal .inputSwitch { display: block; } .smart_grid_label { font-weight: 600; cursor: help; margin-bottom: 4px; margin-top: 15px; } .smart_grid_input { outline: none; border: 1px solid #ccc; line-height: 2; font-size: 14px; display: inline; width: 60%; } .smart_grid_spacing_wrapper { margin-top: 15px; } .smart_grid_compute_center_wrapper { margin: 15px 0px; } .smart_grid_commit_controls a { float: left; background-color: #cccbcb; padding: 8px 24px 8px; border-radius: 0px; cursor: pointer; color: white; user-select: none; text-align: center; margin-left: 2px; margin-top: 10px; } /*important - this is the animation effect when adjusting to grid layout*/ [data-row-number] { transition: top .5s ease 0s, left .5s ease 0s !important; } /*#endregion*/ /*#region freedrag element percision via box-shadow*/ /* wrapper border/boxshadow - depends on freedrag*/ .cke_widget_wrapper:not(.hidden-box-square-wrapper):not(.ui-draggable) { border: 1px dotted #dadada; } /*use box-shadow for draggable widgets for better percision - border causes 1px offsets we dont want*/ .cke_widget_wrapper.ui-draggable:not(.hidden-box-square-wrapper) { box-shadow: inset 0 0px 0px 1px #ccc; } /*#endregion*/ /*#region authoring helper bulk action button*/ .ah_bulk_action_icon { background-size: 17px; background-repeat: no-repeat; background-position-x: center; background-position-y: 3px; height: 19px; width: 19px; display: inline-block; margin-right: 10px; position: relative; top: 3px; } .ah_bulk_action_icon.hide { background-image: url('/images/AuthorHelper/BulkActionButtonIcons/hide.png'); } .ah_bulk_action_icon.show { background-image: url('/images/AuthorHelper/BulkActionButtonIcons/show.png'); } .ah_bulk_action_icon.animations { background-image: url('/images/AuthorHelper/BulkActionButtonIcons/Animations.png'); } .ah_bulk_action_icon.freedrag { background-image: url('/images/AuthorHelper/BulkActionButtonIcons/enable_drag.png'); } .ah_bulk_action_icon.justify { background-image: url('/images/AuthorHelper/BulkActionButtonIcons/justify_horizontal_center.png'); } .ah_bulk_action_icon.dock { background-image: url('/images/AuthorHelper/BulkActionButtonIcons/enable_drag.png'); } .ah_bulk_action_icon.clone { background-image: url('/images/AuthorHelper/BulkActionButtonIcons/clone.png'); } .ah_bulk_action_icon.color { border: 1px solid #fff; /*background-image: url('/images/AuthorHelper/BulkActionButtonIcons/color.png');*/ } .ah_bulk_action_icon.delete { background-image: url('/images/AuthorHelper/BulkActionButtonIcons/delete.png'); } .ah_bulk_action_icon.applycss { background-image: url('/images/AuthorHelper/BulkActionButtonIcons/applycss.png'); height: 21px; } /*new bulk action button color*/ .ah_bulk_action_main > ul, .ah_bulk_action_main .ah_drop_menu li { background: #3B95C4; /* height: 32px; */ } .ah_bulk_action_main li:hover, .ah_bulk_action_base_li .ah_drop_menu li:hover { background: #4fa9d8; } /*submenus*/ .ah_submenu { display: none; left: 139px !important; top: 0px !important; border-radius: 0px; } .ah_submenu li { border-radius: 0px !important; } .ah_submenu li:first-child { border-radius: 0px 3px 0px 0px !important; } .ah_submenu li:last-child { border-radius: 0px 0px 3px 3px !important; } .drop-menu ah_drop_menu { display: flex; } .ah_bulk_action_submenu_wrapper:hover .ah_submenu { display: block; } .ah_bulk_action_base_li.ah_flip_submenu .ah_submenu { left: -140px !important; } /*#endregion*/ /*#region smart resizer modal*/ /*wrapper*/ .smart_resizer_modal { display: block; background-color: #fff; overflow: hidden; padding: 15px; width: 430px; } /*controls*/ .smart_resizer_labels, .smart_resizer_input, .smart_resizer_modal .inputSwitch { display: block; } .smart_resizer_input { outline: none; border: 1px solid #ccc; line-height: 2; font-size: 14px; } .smart_resizer_commit_controls a { float: left; background-color: #cccbcb; padding: 8px 24px 8px; border-radius: 0px; cursor: pointer; color: white; user-select: none; text-align: center; margin-left: 2px; margin-top: 10px; } /*u.i. views by type*/ .smartresizer_shape .aspect_ratio_wrapper, .smartresizer_shape .smart_resizer_height_wrapper { display: none; clear: both; } .smart_resizer_input_wrapper { width: 100%; height: 40px; } .smart_resizer_input { float: left; width: 56%; } .smart_resizer_input_label { float: right; width: 40%; font-weight: 600; } .aspect_ratio_wrapper { margin-top: 8px; } /*#endregion*/ /* #region new course page admin control placement - aka edit button - see debug button css in scriptgenerator.css */ .course_page_admin_controls { position: absolute; right: -31px; top: 5px; } .course_page_admin_controls.pp_modal { right: -40px; } .modal-open .course_page_admin_controls:not(.pp_modal) { display: none; } .course_page_admin_controls .lknedit { position: fixed; text-align: center; text-decoration: none !important; min-width: 68px; border: 1px solid #ccc; border-radius: 3px !important; margin-top: -1px; margin-left: -28px; z-index: 999; background: rgba(255, 255, 255, 0.9); padding: 0px 2px !important; color: #888; } .course_page_admin_controls .lknedit:hover { color: #333333 !important; background-color: #e3e3e3 !important; } .course_page_admin_controls a:hover { border-color: #ccc; } /*#endregion*/ /* #region lasso selection banner */ .ui-selectable-helper { z-index: 9999; cursor: crosshair; } .selection_mode_banner { position: absolute; top: -53px; right: -2px; background-color: #3b95c4 !important; color: white; font-size: 18px; font-weight: bolder; width: 250px; height: 50px; text-align: center; display: flex; align-items: center; flex-direction: column; justify-content: center; z-index: 1; } .selection_mode_banner .selection_mode_banner_cancel { cursor: pointer; } .selection_mode_banner .selection_mode_banner_cancel::before { content: '(Esc)'; position: absolute; font-size: 10px; right: 22px; top: 33px; height: 25px; width: 25px; display: inline-block; opacity: .5; } .selection_mode_banner .selection_mode_banner_cancel:hover::before { opacity: 1; } .selection_mode_banner .selection_mode_banner_cancel::after { content: url('/images/SelectedElementFeatures/cancel_frombanner.png'); position: absolute; right: 22px; top: 11px; background-size: 23px !important; background-repeat: no-repeat !important; height: 25px; width: 25px; display: inline-block; } .selection_lasso_cursor .cke .ckeditor-live-page-boundaries { cursor: crosshair !important; } /* #endregion */ /*#region validation and admin feedback (both admin and student side css)*/ /*admin side*/ .validation_previous_feedback_label { text-align: center; font-weight: bold; font-size: 14px; color: #525252; padding: 5px; margin-bottom: 3px; border: 1px solid #ebebeb; border-bottom: none; width: 137px; border-radius: 0px 6px 0px 0px; position: relative; top: 3px; } .validation_previous_feedback_container { background-color: #FAFAFA; width: 1003px; max-height: 300px; overflow: hidden; overflow-y: scroll; border: 1px solid #ebebeb; } .validation_feedback_comment_row { position: relative; min-height: 200px; margin-top: 15px; padding-bottom: 10px; padding-left: 15px; border-bottom: 3px solid #ccc; } .validation_feedback_comment_date { font-weight: 900; } .validation_give_credit_button label, .validation_include_in_feedback_button label { color: #525252; font-size: 14px; font-weight: bold !important; padding: 10px 15px; text-align: center; font-weight: 500; margin: 20px 0px 10px -5px; } .validation_include_in_feedback_button label { margin-left: -4px; } /*student side*/ .validation_action_required_label { font-size: 18px; } .btn.validation_submit_for_review { background-color: #fff; font-size: 14px; padding: 10px 15px; text-align: center; font-weight: 600 !important; margin: 5px; } .btn.validation_submit_for_review:hover { background-color: #ccc; } /*feedback panel*/ #pnlComment { display: none; } [admin_feedback_initialized] #pnlComment { display: block; } /*#endregion*/ /*#region merge field 2.0 - new structure and controls*/ .Custom_MergeField { display: inline-block; } .Wrapperplaceholder.aligned { display: inline !important; border: none !important; } .Custom_MergeField > .widget-quick-tools { left: 42px; min-width: 155px; float: left; } .Custom_MergeField.left > .widget-quick-tools { left: 42px; } .Custom_MergeField.right > .widget-quick-tools { top: 10px; left: -100px; padding-bottom: 25px; } /*the edit dialog*/ .mf_dialog_lbl { color: #474747; font-weight: 600; height: 25px; margin-left: 2px; cursor: help !important; } .mf_dialog_hr { height: 1px; border-width: 0; background-color: #cccccc5e; margin: 5px 0 15px 0; } .mf_dialog_preselection { color: #383855; margin-left: 2px; cursor: pointer !important; } .mf_dialog_ddl { width: 59%; } /*#endregion*/ /*#region animated images for custom backgrounds plugin*/ .ckeditor-free-drag-boundary::before, .courseContainer .Coursecontent:not(.MainYHelpContent)::before, .MainYHelpContent .MainBodyContent::before { animation-fill-mode: forwards; } .anim_bg_dpad_wrapper { width: 100%; height: 90px; margin: auto; display: flex; justify-content: center; align-items: center; } .bganim_controls_wrapper { padding: 10px 2px; display: flex; align-items: flex-start; flex-direction: row; } .anim_bg_coord_start_controls label { cursor: help; } .anim_bg_dpad_wrapper .d-pad { margin-right: 40px; } .anim_bg_dpad_wrapper .anim_bg_dpad { display: inline-block; } .anim_bg_behavior_controls { min-width: 140px; /* margin-right: 10px; */ } .btn_replay_animated_bg.btn { padding: 4px; top: 21px; position: relative; width: 185px; } /* o-pad*/ .anim_bg_dpad { position: relative; background: #ddd; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; float: left; cursor: auto; transform: scale(0.75); } .anim_bg_dpad:after { content: ''; position: absolute; z-index: 2; width: 20%; height: 20%; top: 50%; left: 50%; background: #ddd; border-radius: 50%; transform: translate(-50%,-50%); display: none; transition: all .25s; cursor: pointer; } /*.anim_bg_dpad:hover:after { width: 30%; height: 30%; }*/ .anim_bg_dpad span { display: block; position: absolute; -webkit-tap-highlight-color: rgba(255,255,255,0); width: 50%; height: 50%; text-align: center; transform: rotate(45deg); border: 1px solid rgb(255,255,255); } .anim_bg_dpad span.selected { background-color: #696969 !important; } .anim_bg_dpad span:before { content: ''; position: absolute; width: 60%; height: 60%; top: 50%; left: 50%; background: rgba(255,255,255,0.1); border-radius: 50%; transform: translate(-50%,-50%); transition: all .25s; cursor: pointer; display: none; } .anim_bg_dpad span:after { content: ''; position: absolute; width: 0; height: 0; border-radius: 5px; border-style: solid; transform: translate(-50%,-50%) rotate(-45deg); transition: all .25s; } .anim_bg_dpad span.up { bottom: 50%; left: 50%; transform: translate(-50%,-20%) rotate(45deg); border-top-left-radius: 50%; z-index: 1; } .anim_bg_dpad span.up:hover { background: linear-gradient(315deg,rgba(255,255,255,0) 15%,rgba(255,255,255,0.4) 100%); } .anim_bg_dpad span.up:before { left: 57%; top: 57%; } .anim_bg_dpad span.up:after { left: 53%; top: 53%; border-width: 0 13px 19px 13px; border-color: transparent transparent #aaa transparent; } .anim_bg_dpad span.up:active:after { border-bottom-color: #333; } .anim_bg_dpad span.down { top: 50%; left: 50%; transform: translate(-50%,20%) rotate(45deg); border-bottom-right-radius: 50%; z-index: 1; } .anim_bg_dpad span.down:hover { background: linear-gradient(135deg,rgba(255,255,255,0) 15%,rgba(255,255,255,0.4) 100%); } .anim_bg_dpad span.down:before { left: 43%; top: 43%; } .anim_bg_dpad span.down:after { left: 47%; top: 47%; border-width: 19px 13px 0px 13px; border-color: #aaa transparent transparent transparent; } .anim_bg_dpad span.down:active:after { border-top-color: #333; } .anim_bg_dpad span.left { top: 50%; right: 50%; transform: translate(-20%,-50%) rotate(45deg); border-bottom-left-radius: 50%; border: none; } .anim_bg_dpad span.left:hover { background: linear-gradient(225deg,rgba(255,255,255,0) 15%,rgba(255,255,255,0.4) 100%); } .anim_bg_dpad span.left:before { left: 57%; top: 43%; } .anim_bg_dpad span.left:after { left: 53%; top: 47%; border-width: 13px 19px 13px 0; border-color: transparent #aaa transparent transparent; } .anim_bg_dpad span.left:active:after { border-right-color: #333; } .anim_bg_dpad span.right { top: 50%; left: 50%; transform: translate(20%,-50%) rotate(45deg); border-top-right-radius: 50%; border: none; } .anim_bg_dpad span.right:hover { background: linear-gradient(45deg,rgba(255,255,255,0) 15%,rgba(255,255,255,0.4) 100%); } .anim_bg_dpad span.right:before { left: 43%; top: 57%; } .anim_bg_dpad span.right:after { left: 47%; top: 53%; border-width: 13px 0 13px 19px; border-color: transparent transparent transparent #aaa; } .anim_bg_dpad span.right:active:after { border-left-color: #333; } /*.anim_bg_dpad span:hover:after { left: 50%; top: 50%; }*/ .anim_bg_dpad.up span.up:after { border-bottom-color: #333; } .anim_bg_dpad.down span.down:after { border-top-color: #333; } .anim_bg_dpad.left span.left:after { border-right-color: #333; } .anim_bg_dpad.right span.right:after { border-left-color: #333; } .anim_bg_outer_wrapper input { width: 100px; } /*disable zoom settings in pan/scan*/ .dyna_custom_backgrounds.pan_bgimage .bganim_zoom_settings { opacity: .5; pointer-events: none; } /*disable end cord. settings in zoom*/ .dyna_custom_backgrounds.zoom_bgimage #end_y, .dyna_custom_backgrounds.zoom_bgimage [for="end_y"], .dyna_custom_backgrounds.zoom_bgimage #end_x, .dyna_custom_backgrounds.zoom_bgimage [for="end_x"] { opacity: .5; pointer-events: none; } /*new controls section - wip.*/ .bganim_unit { font-size: smaller; font-weight: 600; margin-left: 4px; } .custom_ratio_controls { display: none; } .pan_zoom_custom .custom_ratio_controls { display: block; margin-top: 5px; } .bganim_fill_mode_controls { padding: 0 5px 10px 5px; } .bganim_fill_mode_controls, .bganim_fill_mode_controls .bganim_fill_mode_controls label, .bganim_fill_mode_controls .bganim_fill_mode_controls input { display: block; } .import_coords_prev { /*display: none;*/ margin-bottom: 5px; text-align: center; width: -webkit-fill-available; } /*#endregion */ /* #region auto grow and toolbar docking feature */ /* toolbar and sub control docking system */ [data-editor-mode="wysiwyg"] .cke_top.ckeditor_autoheight_toolbar_docked:not(.disable_ckeditor_autoheight_toolbar_docked) { user-select: none; position: fixed; top: 63px; width: 1089px; z-index: 2; transition: top 5s; } [data-editor-mode="wysiwyg"] .ckeditor_yh .cke_top.ckeditor_autoheight_toolbar_docked:not(.disable_ckeditor_autoheight_toolbar_docked) { width: 1032px; } [data-editor-mode="wysiwyg"] .track_desc + .cke .cke_top.ckeditor_autoheight_toolbar_docked:not(.disable_ckeditor_autoheight_toolbar_docked) { width: 535px; } #CourseBuilderModal [data-editor-mode="wysiwyg"] .cke_top.ckeditor_autoheight_toolbar_docked:not(.disable_ckeditor_autoheight_toolbar_docked) { top: 5px; width: 1030px; } /*container*/ [data-editor-mode="wysiwyg"] .ckeditor_autoheight:not(.disable_autoheight) { height: auto !important; min-height: 400px; } /*hide overflow*/ [data-editor-mode="wysiwyg"] .ckeditor_autoheight:not(.disable_autoheight) .cke_wysiwyg_div { overflow-y: hidden; } /*#endregion*/ /*#region ckfinder - new modal implementation of our file management system*/ /*todo: lets do this programmatically - detect siblings with higher z and add one*/ /*force the z-index of the modal to be highests in view so that it doesnt set behind other ckeditor open dialogs (smh - they even step on their own toes)*/ #ckf-modal { z-index: 9999999999999999999 !important; border-radius: 0px !important; } .ckf-file-preview-root { z-index: 9999999999999999999 !important; } /*cleanup the header of the div they draw* and add a label*/ #ckf-modal-header { background: white !important; border-radius: 0px !important; border-bottom: none !important; } #ckf-modal-header::before { content: 'ASPIRE File Management'; font-size: 20px; font-weight: 500; margin-top: 3px; margin-left: 10px; display: inline-block; } /*#endregion*/ /*#region web proofreader (wpr) - non ckeditor target inputs (scale down the badge), also bump up the zindex on the dialog, as too not be obfuscated by any other view when open*/ .wprEnabled + div > .wsc-badge:not(.wsc-badge--small) { transform: scale(.75); } .wsc-dialog { z-index: 9999999999 !important; } /*#endregion*/ /*#region leaderboard*/ /*leaderboard widget structure*/ .leaderboard_widget .dash_Leader_Board { width: 450px; margin-left: 0px; } .leaderboard_var_display { line-height: 2; } .small.dashboard-stat.incognito1 { cursor: auto; } /*leaderboard modal*/ .leaderboard_modal { display: block; background-color: #fff; overflow: hidden; padding: 15px; width: 430px; } .leaderboard_modal .inputSwitch, .leaderboard_controls_wrapper input, .leaderboard_controls_wrapper label { display: block; } .leaderboard_show_globals_controls { display: none; } #input_leaderboard_title { width: 97%; outline: none; line-height: 1.5; font-size: 14px; } #ddl_leaderboard_variable_selection { width: 270px; } .leaderboard_commit_controls a { float: left; background-color: #cccbcb; padding: 8px 24px 8px; border-radius: 0px; cursor: pointer; color: white; user-select: none; text-align: center; margin-left: 2px; margin-top: 10px; } /*#endregion*/ /*#region new template previewing/selection system and metadata tag - note to self, migrate to Templates region when this feature is finished*/ /*dynamic preivew/selection popup box*/ .template_gallery_popbox { display: block; position: absolute; width: 100%; z-index: 999999; left: 0px; right: 0px; top: 34px; bottom: 0px; background: rgba(0, 0, 0, 0.6); border-radius: 0px; border-width: 0px; border-style: solid; border-color: rgb(204, 204, 204); border-image: initial; overflow: hidden; background: rgba(0,0,0,0.6); animation-duration: .2s; animation-fill-mode: forwards; animation-name: fadeInUp; } .template_gallery_popbox > div { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .btn_popbox { margin-left: 11px; margin-right: 11px; width: 95px; text-align: center; border-radius: 0px; border-width: 0px; padding: 7px 20px !important; font-size: 14px !important; animation-duration: .5s !important; } /*hide the old ddl for selection in template gallery context*/ .preset_templates_gallery .add_favorite + .btn-group { display: none; } /*small adjustment because of the above line of css*/ .preset_templates_gallery .hoverOpacityHandle { width: 35px; } /*custom tag used to contain metadata about template usage*/ template_meta { display: none !important; } /*#endregion*/ /* #region animations plugin */ .set_animations_ui { padding-top: 0px !important; overflow: auto !important; background: white; padding: 10px; } #MyBody .set_animations_ui { overflow: scroll !important; overflow-x: hidden !important; } /* needed to over-rider fatmodal when long list is present.*/ .set_animations_ui * { user-select: none; } .set_animations_ui .YardiHelp { display: block; margin-top: 22px !important; } .set_animations_ui .cbox { cursor: pointer !important; } .set_animations_container { color: #000 !important; padding: 10px 10px 0; margin-top: 5px; text-align: center; } .set_animations_container p { margin: 0 0 10px; } #lbl_anim_elems { font-weight: bold; font-size: large; margin-top: 0px; color: #919596; text-align: center; margin-bottom: 11px; padding: 10px; } .anim_ui_label { font-size: 11px; } .anim_ui_label.anim_ui_selected_elements_header { font-weight: bold; font-size: 12px; color: #9a9ca0; } .anim_ui_controls { padding: 10px; text-align: left; display: flex; padding-left: 0; height: 100px; } .anim_ui_controls > div { width: auto; padding: 7px; text-align: left; padding-right: 10px; min-width: 60px; } /*configuration for special view when configured to hide the overview tab*/ .anim_ui_hide_overview .anim_tabs_ui, .anim_ui_hide_overview #tab_anim_overview { visibility: hidden; } /*special css to drive animation previewing and the view while the animation modal is open (such as hiding widget wrapper borders and drag handles, or hiding the authoring helper*/ .anim_editor_max_mode .cke_contents { margin-right: 840px !important; padding-bottom: 25px; } .anim_editor_max_mode .cke_inner::before { content: 'Preview' !important; background-color: #ffa1a1; color: #fff; font-size: 18px; font-weight: bold; padding: 70px; position: relative; left: 28px; } .anim_editor_max_mode .cke_top, .anim_editor_max_mode .author_helper_wrapper { display: none !important; } .anim_editor_max_mode .cke_widget_wrapper { border: none !important; } .anim_editor_max_mode .cke_widget_wrapper.ui-draggable { box-shadow: none !important; } .anim_editor_max_mode .cke .cke_widget_wrapper .cke_widget_drag_handler_container, .anim_editor_max_mode .cke_widget_wrapper .ck_control { display: none !important; } .anim_editor_max_mode .Replaycontrol { display: none; } /*tabs*/ #anim_tabs { background: #fff; } .tab_anim_set, .tab_anim_overview { padding: 8px 45px; } .tab_anim_set::before { content: '\276E'; font-size: 25px; position: absolute; left: 8px; } .tab_anim_overview::after { content: '\276F'; font-size: 20px; position: absolute; right: 8px; } #anim_tabs .ui-tabs-panel { min-width: 0; padding: 0; margin: 0; margin-top: 15px; min-height: 500px; } #anim_tabs .anim_tabs_ui { margin-top: 44px; } #anim_tabs li.ui-tabs-tab { cursor: pointer; background: #f6f6f6; width: 225px; height: 30px; user-select: none; padding: 0; line-height: 30px; } #anim_tabs li.ui-tabs-tab a { cursor: pointer; color: #858585; } #anim_tabs li.ui-tabs-tab.ui-state-active { background-color: #cccbcb; } #anim_tabs li.ui-tabs-tab.ui-state-active a { color: #fff; } #anim_tabs li.ui-tabs-tab:hover { background-color: #565656; } #anim_tabs li.ui-tabs-tab:hover a { color: #fff; } .anim_ui_set .li_anim_set_tab { display: none !important; } .anim_ui_overview .li_anim_overview_tab, .anim_ui_overview .li_anim_set_tab { display: none !important; } /*various controls*/ .set_animations_container .select2-container { top: 0; } .anim_ui_input, .anim_ui_shift_controls input { width: 32px; border: 1px solid gainsboro; padding: 5px; } .anim_ui_sub_control { padding-top: 10px !important; } .btn_preview_animations { position: relative; width: 135px; margin-top: 5px; margin-bottom: 30px; margin-right: 5px; margin-left: 5px; text-align: center !important; border: none; padding: 10px; cursor: pointer !important; background-color: #3b95c4; color: white; } .btn_preview_animations.preview_all { background-color: #d1603a; } .btn_preview_animations:hover { transform: scale(1.05); font-weight: 600 !important; background-color: #e3e3e3; } .anim_drag_set_controls { padding-top: 10px; } .anim_stagger_controls { display: none; } .expose_stagger_controls.anim_stagger_controls { display: flex; } .stagger_override_controls { display: none; } .anim_ui_shift_controls input { width: 55px; } .anim_ui_shift_controls { display: none; } .expose_shift_controls_entrance .shift_controls_entrance, .expose_shift_controls_exit .shift_controls_exit, .expose_shift_controls_click .shift_controls_click { display: block; } .expose_shift_controls_entrance .anim_ui_repeat_controls { display: none; } .anim_modal_control_unit { position: absolute; font-size: 9px; margin-top: 9px; } .gen_commit_controls.animation_ui a { display: block; padding: 8px 50px 8px; } .gen_commit_controls.animation_ui a:hover { transform: scale(1.05); } .select_animation_dropdown { width: 165px; } .highlight_anim_target { box-shadow: 0px 0px 4px 1px #f502ff !important; } .anim_settings_invalid { border-color: rgb(185, 74, 72) !important; color: rgb(185, 74, 72) !important; } .drag_set_custom_helper { background-color: yellow; } .anim_ui_overview .ok { display: none !important; } /* filter */ .animtion_elements_filter { width: 175px; margin-top: 0px; height: 35px; cursor: pointer !important; float: left; padding-left: 10px; } /* bulk action button */ .set_animations_ui .UserActions { float: left; margin-top: 0; } .set_animations_ui .UserActions * { cursor: pointer; } .set_animations_ui .UserActions ul.DisabledLink { background-color: #ccc; } .set_animations_ui .UserActions .author_helper_bulk_actions_button_title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0px 5px 0px 5px; display: block; width: 140px; background: #3B95C4; padding-bottom: 3px; padding-top: 2px; } .set_animations_ui .UserActions .drop-menu li { font-size: 14px; background: #3b95c4; } .set_animations_ui .UserActions .drop-menu li:hover { background: #78b1d0; } .author_helper_bulk_actions_button_title:after { display: inline-block; width: 0; height: 0; vertical-align: middle; margin-left: 3px; border-top: 4px solid #fff; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; } .set_animations_ui .UserActions li { width: 142px !important; } .set_animations_ui .UserActions .drop-menu li { text-align: left; padding-left: 8px; width: 134px; } /*element grid*/ .anin_element_grid_header_table { width: 100%; border-collapse: collapse; } .anim_global_dialog_tip { padding: 5px; margin-top: 0; color: grey; font-weight: bold; font-size: 12px; clear: both; } .anin_element_grid { min-height: 325px; overflow: auto; overflow-x: hidden; max-height: 800px; } .anin_element_grid_table { width: 100%; border-collapse: collapse; } .anin_element_grid_th { font: 600 14px 'open sans' !important; color: #868686 !important; border-bottom: 4px solid #e5e3e3 !important; padding-bottom: 5px; text-align: center !important; } .th_anim_cb_bulk { width: 37px; padding-left: 3px; } .th_anim_target { width: 222px; text-align: left !important; } .th_anim_load { width: 146px; } .th_anim_out { width: 147px; } .th_anim_order { width: 52px; cursor: help !important; } .anin_element_grid_td { text-align: center !important; padding: 5px; overflow: hidden; border: none; } a[id*="tab-allowed-tags"], a[id*="tab-doc-animations"] { display: none !important; } .horizontal_treeline { position: relative; top: 10px; border-color: #565656; } .anin_element_grid_table .el_row_name_input { width: 100%; } .anin_element_grid_td.cb { width: 25px; padding-right: 0px; } .anim_name_td { width: 165px; text-align: left !important; margin-left: 31px; padding-left: 10px; } .anin_element_grid_td_load_anim_name, .anin_element_grid_td_out_anim_name, .anin_element_grid_td_click_anim_name { width: 108px; } .anin_element_grid_td_sel_order { width: 30px; } .animation_elements_grid_no_items_available:before { content: 'No Items Available'; font-size: 16px; font-weight: 600; position: relative; display: block; width: 90px; text-align: center; top: 0; } .anin_element_grid_tr { border: 1px solid #f0f0f0; } .anin_element_grid_tr * { cursor: pointer !important; } .anin_element_grid_tr:hover { cursor: pointer; border: 1px solid #dedede; background-color: #dedede; } /*replay button setting/button and data */ .cbToggleNoReplayLabel { float: right; width: 150px; } .cbToggleNoReplayLabel:before { position: absolute; top: -22px; margin-left: 3px; content: 'Replay Button:'; font-weight: 600; } .cbToggleNoReplay + label { margin-left: 3px; } /*custom_data_wrapper + custom_data are legacy and not used anymore*/ .custom_data_wrapper, custom_data, animation_settings, .anim_data { display: none !important; } /*#endregion*/ /*#region accessibility checker (DISABLED BECAUSE OF MAJOR BUG) */ .cke_toolgroup a.cke_button__a11ychecker { display: none; } /*#endregion*/ /* #region generics */ .gen_commit_controls { background-color: white; width: 581px; bottom: 0px; margin: 5px 5px 10px 0px; height: 5px; } .gen_commit_controls a { float: left; margin-top: 8px; margin-right: 8px; background-color: #cccbcb; padding: 4px 25px 4px 25px; cursor: pointer; color: white; } .gen_commit_controls a:hover { -webkit-font-smoothing: subpixel-antialiased; background: #8a8a8a !important; color: #fff !important; } .gen_commit_controls .ok { display: none; } /*general grid layout for graphics u.i.*/ .gen_flex { display: flex; flex-wrap: nowrap; } /* generic */ .gen_input_controls { margin-top: 15px; margin-left: -10px; } .gen_input { box-shadow: none !important; border-radius: 3px; border: 1px solid #c9cccf; padding: 4px 6px; outline: 0; } .gen_label { font-size: smaller; font-weight: 600; margin-top: 7px; user-select: none; } .gen_label_alt { font-size: 15px; font-weight: 600; margin-top: 28px; margin-left: 2px; user-select: none; cursor: help; } /*disable a control*/ .disabled_control { opacity: .5 !important; background: #ccc !important; pointer-events: none !important; } /* #endregion */ /*#region one n' one survey*/ .OBOS .TestDataList > tbody > tr > td { border: none; padding: 0px; } .OBOS .OBOSNav_Progress { height: 23px; border-bottom: 7px solid #adadad; border-radius: 0; overflow: visible; background: none; text-align: left; margin: 0px; width: 100%; position: absolute; bottom: -11px; } .OBOS .OBOSNav_Progress_Label { background-color: #fff; margin-bottom: -20px; display: inline-block; position: absolute; left: 0px; bottom: 13px; padding: 0px 5px; z-index: 9; } .OBOS .OBOSNav_Progress_Bar { background-image: none !important; height: 11px; position: absolute; bottom: -9px; border: 0 !important; background-color: #32d290 !important; transition: width .3s; max-width: 100%; } .OBOS .QuestionEntry { min-height: 350px; padding-bottom: 85px; } .OBOS .rblAnsOpts, .OBOS .jsPlumb-container { margin-bottom: 19px; } .OBOS .OBOSNav { text-align: center; margin-top: 20px; position: absolute; text-align: center; width: 100%; bottom: 27px; } .OBOS .OBOSNav .btn { min-width: 130px; color: #fff !important; margin: 0 11px; font-size: 18px; padding: 12px 20px; background-color: #15a167; border-width: 0px; } .OBOS .OBOSNav > a:nth-child(1) { background-color: #adadad; min-width: 130px; } .OBOS .OBOSNav .btn:hover { box-shadow: inset 0px 0px 20px 20px rgba(255,255,255,.22); } /*#endregion*/ /************************************************************************/ /*************** STOP - Spencers Construction zone below this line **********************/ /*#region new animation controls - unfinished*/ #tab_anim_set .sg_sub_modal_tile { background-color: #fcfcfc; border: 1px solid #E0E0E0; width: 250px; min-height: 100px; margin-left: 6px; display: none; } /*.selected { background: #ccc !important; }*/ /*#endregion*/ /* #region new colored css -- modal and other misc */ /*base ui*/ .note_edit_ui { width: 480px; } .note_edit_ui * { user-select: none; } .note_edit_ui .cbox { cursor: pointer !important; } #note_editor_outerwrapper { display: grid; grid-template-columns: auto auto; } #note_editor_outerwrapper > div { margin-top: 10px; } .note_edit_ui .modal-header { margin-top: 10px; margin-bottom: 0px; } /*global control styling*/ #note_editor_outerwrapper select { width: 150px; } /*style gallery*/ .ddl_note_style option { display: none; } .modal-dialog.colored_note_gallery { background-color: white; padding: 10px; width: 1066px; height: 767px; position: relative; top: 9%; left: 0px; } [data-selection] { padding: 10px; width: 160px; height: 100px; } .colored_note_gallery [data-selection] { width: 244px; padding: 15px 10px } [data-selection="box"] { background: url(/images/ColoredNote/box.png) no-repeat center center; } [data-selection="Note"] { background: url(/images/ColoredNote/Note.png) no-repeat center center; } [data-selection="RoundNote"] { background: url(/images/ColoredNote/RoundNote.png) no-repeat center center; } [data-selection="MetroNote"] { background: url(/images/ColoredNote/MetroNote.png) no-repeat center center; } [data-selection="Minimal"] { background: url(/images/ColoredNote/Minimal.png) no-repeat center center; } [data-selection="PintBox"] { background: url(/images/ColoredNote/PintBox.png) no-repeat center center; } [data-selection="Stackpaper"] { background: url(/images/ColoredNote/Stackpaper.png) no-repeat center center; } [data-selection="buble1"] { background: url(/images/ColoredNote/buble1.png) no-repeat center center; } [data-selection="SideBanner"] { background: url(/images/ColoredNote/SideBanner.png) no-repeat center center; } [data-selection="postit"] { background: url(/images/ColoredNote/postit.png) no-repeat center center; } [data-selection="text"] { background: url(/images/ColoredNote/text.png) no-repeat center center; } [data-selection="Neon"] { background: url(/images/ColoredNote/Neon.png) no-repeat center center; } [data-selection="colorCase"] { background: url(/images/ColoredNote/colorCase.png) no-repeat center center; } [data-selection="split"] { background: url(/images/ColoredNote/split.png) no-repeat center center; } [data-selection="wave"] { background: url(/images/ColoredNote/wave.png) no-repeat center center; } [data-selection="shape"] { background: url(/images/ColoredNote/shape.png) no-repeat center center; } [data-selection="fold"] { background: url(/images/ColoredNote/fold.png) no-repeat center center; } [data-selection="section"][data-color="Blue"] { background: url(/images/ColoredNote/section_Blue.png) no-repeat center center; } [data-selection="section"][data-color="Orange"] { background: url(/images/ColoredNote/section_Orange.png) no-repeat center center; } [data-selection="section"][data-color="Green"] { background: url(/images/ColoredNote/section_Green.png) no-repeat center center; } [data-selection="section"][data-color="Gray"] { background: url(/images/ColoredNote/section_Gray.png) no-repeat center center; } .colored_note_gallery .dynagallery_column:hover { background-position-y: 6px; } .colored_note_gallery .dynagallery_column:after { content: none } .colored_note_gallery .dynagallery_column:after { content: none } /*color control*/ .btn_note_coloring { width: 75px; margin: 0; top: 0; background-color: #ffffff; border-radius: 2px; cursor: pointer !important; } .btn_note_coloring:hover { transform: scale(1.05); } /*admin note switch*/ #note_editor_outerwrapper > div.note_admin_view_controls { margin-top: 17px; } .cbToggleAdminView { width: 150px; } /*preview*/ .preview_container { border: 1px solid #e1e1e1; padding: 25px 5px; margin-top: 15px; clear: both; display: flex; align-content: center; justify-content: center; align-items: center; z-index: 1; } .preview_container > #Note { width: 80%; height: 65%; position: relative; } .preview_container > #Note[data-mynotetype="shape"] { width: 63%; } /*type specific controls (hide and show based on note type)*/ .note_border_controls, .note_shape_gallery_controls, .note_yh_controls { display: none; } .yh_authoring .note_yh_controls { display: block !important; } .aspire_authoring [data-selection="section"] { display: none; } /*border and alignment control visibility based on note type*/ [data-view-notetype="minimal"] .note_border_controls, [data-view-notetype="split"] .note_border_controls { display: block; } [data-view-notetype="shape"] .note_shape_gallery_controls { display: block; } [data-view-notetype="postit"] .ddl_note_align > option[value="Center"], [data-view-notetype="postit"] .ddl_note_align > option[value="noalign"], [data-view-notetype="buble1"] .ddl_note_align > option[value="Center"], [data-view-notetype="buble1"] .ddl_note_align > option[value="noalign"], [data-view-notetype="sidebanner"] .ddl_note_align > option[value="Center"], [data-view-notetype="sidebanner"] .ddl_note_align > option[value="noalign"] { display: none; } /*commit controls*/ .note_edit_ui .ok { display: block; } /*we need to generate these colors in the database ~ this keeps getting left out*/ /*.section_Blue { border-color: #3aa0d1; } .section_Green { border-color: #76dc18; } .section_Orange { border-color: #ff9800 } .section_Gray { border-color: #7a7a7a; }*/ /*#endregion*/ /*#region css applicator modal*/ .css_apply_modal_ui { width: 460px !important; } .select_custom_classes_filter { width: 150px; } .css_apply_modal_ui .select_custom_classes, .css_apply_modal_ui .select_custom_classes_remove { width: 450px !important; } .multi_element_class_missmatch .btn_css_append { display: none !important; } .css_apply_modal_ui .setstyle_textarea { width: 438px; height: 50px; border-radius: 2px; } .css_apply_modal_ui .gen_commit_controls a { display: block; padding: 8px 50px 8px; } .select_custom_classes_remove_container { display: none; } .set_style_asfx .select_custom_classes_remove_container { display: block; } .set_style_asfx .btn_css_append { display: none !important; } /*#endregion*/ /*#region dyna modal new fat style -- shelve with modal css i guess*/ .fat_modal { overflow: hidden !important; background: white; padding: 25px; position: relative; left: 0px; top: 5%; width: 500px; } .fat_modal .modal-header { margin-top: 10px; } .fat_modal .close { /* top: 18px; */ right: -5px; z-index: 99999; line-height: 23px !important; font-size: 61px !important; font-weight: 300 !important; color: #646464; position: relative; margin: 0px !important; user-select: none; overflow: hidden; height: 33px; } /*#endregion*/ /* #region Page Settings Admin and Student */ /*base*/ .page_settings_modal.fat_modal:not(.preview) { overflow: auto !important; background: white; width: 785px !important; } #page_settings_outer_wrapper { opacity: 0; transition: opacity .5s ease-in-out; } .page_settings_modal .YardiHelp { display: block; margin-top: 11px !important; } .page_settings_modal .dynagallery_container { margin-top: 20px; } .page_settings_modal .page_settings_row { height: 50px; width: 240px; } .page_settings_modal label { font-family: 'Open Sans'; font-size: 12px; font-weight: 600; user-select: none; } .page_settings_modal textarea { width: 703px; } .template_lvl_css { display: none; } .page_settings_modal .inputSwitch { float: right; } .page_settings_modal #navtype, .page_settings_modal #transition { float: right; position: relative; top: -4px; margin-right: 0; width: 130px; } /*scripts*/ .btn.btn_init_code_preview { margin-top: 5px; width: 200px; background: #3b95c4 !important; color: white; border-radius: 6px; padding: 10px; } .btn.btn_init_code_preview:hover { opacity: .85; } .btn_import_script { cursor: pointer !important; padding: 3px 31px; border-radius: 3px; font-weight: 600 !important; margin: 8px 0 8px 2px; display: block; width: 250px; } .btn_unlink_script { margin-left: 2px; width: 75px; border: 1px solid #e7c443; border-radius: 6px; margin-bottom: 4px; } .script_file_path_container { display: none; } .script_file_path_container.open { display: flex; cursor: help; align-items: center; } .lbl_script_path_prefix { margin-left: 10px; font-weight: 600; } .lbl_script_path { height: 30px; display: flex; align-items: center; margin-left: 10px; color: red; float: right; } /*commit/cancel*/ .page_settings_commit_controls { margin-top: 50px; } .page_settings_commit_controls a { float: left; background-color: #cccbcb; padding: 4px 15px 4px 15px; border-radius: 0px; cursor: pointer; color: white; user-select: none; } .page_settings_commit_controls .btn_revert_page_settings { float: right; background-color: #c28a8a; } .page_settings_commit_controls .cancel { margin-left: 4px; } .page_settings_commit_controls a:hover { background-color: #565656; transform: scale(1.05); } .page_settings_commit_controls a.btn_revert_cust_bg:hover { color: #fff; } /*autogrow css for textareas (requires JS)*/ .grow_wrap { height: 568px !important; width: 100% !important; } .grow_wrap::after { content: attr(data-replicated-value) " "; white-space: pre-wrap; visibility: hidden; } .grow_wrap > textarea { resize: none; overflow: hidden; } .grow_wrap > textarea, .grow_wrap::after { border: 1px solid black; padding: 0.5rem; font: inherit; grid-area: 1 / 1 / 2 / 2; } /*generic accordion -- move this to generic css section*/ .accrd_gen { } .accrd_section { color: white; position: relative; margin: 2px 0 0 0; background: #adc4ca !important; padding: 7px; border-radius: 6px 6px 0 0; } .accrd_section label { margin-left: 25px; } .accrd_section_close_rnd { border-radius: 6px; background: #cccbcb !important; } .accrd_content { display: none; border: 1.5px dashed #ccccccb0; border-radius: 0 0 6px 6px; } .accrd_toggle_icon { position: absolute; margin-top: -8px; color: white; font-size: 12px; font-family: 'icomoon_EL'; padding: 4px; top: 15px; left: 5px; text-indent: 0px; cursor: pointer; height: 100%; width: 25px; } .accrd_toggle_icon_closed::before, .accrd_toggle_icon_open::before { content: "\ed85"; transition: transform .3s; display: inline-block; } .accrd_toggle_icon_closed::before { transform: rotate(90deg); } .ps_no_templates .accrd_sec_templatecss, .ps_no_templates .accrd_sec_templatescript { display: none; } /* special css when a template is driving the page settings */ .template_driven_disabled .modal-header::after { display: block; content: 'A Template on your Page is Driving These Settings. To Modify you must A) Remove the Template B) Change the Templates Page Settings'; margin-top: 30px; padding: 10px; background: orange; color: white; } .template_driven_disabled .cbToggleShowChapter, .template_driven_disabled #navtype, .template_driven_disabled #transition, .template_driven_disabled .cbToggleShowNextButton, .template_driven_disabled .cbToggleShowPreviousButton { pointer-events: none; opacity: .6; } /* Course side css, Modern Bar Navigation */ .modernBarNav { position: absolute; top: 0px; bottom: 0px; width: 60px; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; background-color: rgba(80, 81, 82, 0.00); cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: center; z-index: 9; } .modernBarNav:hover { background-color: rgba(80, 81, 82, 0.2); transition: background-color 500ms; } .modernBarNav.Next { right: 0; } .modernBarNav.Prev { left: 0; } .modernBarNav::after { font-family: 'none'; font-size: 80px; color: #8b8b8b; opacity: .5; } .modernBarNav:hover::after { color: white; opacity: 1; } .modernBarNav.Next::after { margin-left: 6px; content: '\2771'; } .modernBarNav.Prev::after { margin-right: 6px; content: '\2770'; } .pnlWikiContents { background: white; z-index: 9; } /* page navigation animations */ .navSlideOutRight { -webkit-animation-name: navSlideOutRight; animation-name: navSlideOutRight; } @-webkit-keyframes navSlideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 20% { -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0) !important; } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes navSlideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 20% { -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0) !important; } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .navSlideOutLeft { -webkit-animation-name: navSlideOutLeft; animation-name: navSlideOutLeft; } @-webkit-keyframes navSlideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 20% { -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0) !important; } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes navSlideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 20% { -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0) !important; } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .navFlipOutLeft { -webkit-animation-name: navFlipOutLeft; animation-name: navFlipOutLeft; } @keyframes navFlipOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0) rotateY(-220deg); transform: translate3d(-100%, 0, 0) rotateY(-220deg); } } @-webkit-keyframes navFlipOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0) rotateY(-220deg); transform: translate3d(-100%, 0, 0) rotateY(-220deg); } } .navFlipOutRight { -webkit-animation-name: navFlipOutRight; animation-name: navFlipOutRight; } @keyframes navFlipOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0) rotateY(220deg); transform: translate3d(100%, 0, 0) rotateY(220deg); } } @-webkit-keyframes navFlipOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0) rotateY(220deg); transform: translate3d(100%, 0, 0) rotateY(220deg); } } .navZoomOutLeft { -webkit-animation-name: navZoomOutLeft; animation-name: navZoomOutLeft; } @-webkit-keyframes navZoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes navZoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .navZoomOutRight { -webkit-animation-name: navZoomOutRight; animation-name: navZoomOutRight; } @-webkit-keyframes navZoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes navZoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .navRotateOutLeft { -webkit-animation-name: navRotateOutLeft; animation-name: navRotateOutLeft; } @-webkit-keyframes navRotateOutLeft { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes navRotateOutLeft { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .navRotateOutRight { -webkit-animation-name: navRotateOutRight; animation-name: navRotateOutRight; } @-webkit-keyframes navRotateOutRight { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes navRotateOutRight { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } /* page settings preview in revisions */ .revisions_btn_controls { width: 33%; float: left; } .show_page_settings_preview .close { right: 100px; } .page_settings_modal.preview { position: absolute; right: 5px; top: 8px; } .page_settings_modal.preview > .container { width: 400px !important; background: white; padding: 20px; } .page_settings_modal.preview textarea { width: 230px !important; } .page_settings_modal.preview .page_settings_row { pointer-events: none; } .page_settings_modal.preview .page_settings_page_controls { opacity: .65; } .show_page_settings_preview .grow_wrap { height: 510px !important; } .show_page_settings_preview .page_settings_modal.preview { display: block !important; z-index: 999999; } .show_page_settings_preview .cm_readonly_editor .CodeMirror { height: 508px !important; } .show_page_settings_preview .btn_init_code_preview, .show_page_settings_preview .btn_import_script, .show_page_settings_preview .code_editor_toolbar_header, .show_page_settings_preview .code_editor_toolbar_footer, .show_page_settings_preview .page_settings_commit_controls { display: none !important; } /*#endregion*/ /*#region page settings code mirror*/ .page_settings_modal .code_editor_outer_wrapper { width: 100%; } .page_settings_modal .CodeMirror { width: 100%; } .page_settings_modal .accrd_content { display: block; } .page_settings_modal .CodeMirror-search-label + input { width: 65% !important; height: 22px; } /*toolbars, button defenitions*/ .page_settings_modal .code_editor_toolbar_header, .page_settings_modal .code_editor_toolbar_footer { width: 100%; } .page_settings_modal .code_editor_toggle_maximize { display: none; } .page_settings_modal .code_editor_revision { display: none; } .page_settings_modal .code_editor_toolbar_header .code_editor_revision { display: none; } /*readonly editors -- move to the base CSS defs for codemirror*/ .cm_readonly_editor .CodeMirror { height: 535px !important; } .cm_readonly_editor .code_editor_comment, .cm_readonly_editor .code_editor_uncomment, .cm_readonly_editor .code_editor_replace, .cm_readonly_editor .code_editor_toggle_autocomplete, .cm_readonly_editor .code_editor_autoformat { visibility: hidden; } .cm_readonly_editor [class*="code_mirror_themes"] { } .cm_readonly_editor .code_editor_toolbar_footer { display: none; } /*#endregion*/ /*#region script mode confirm box*/ .browse_script_confirm { z-index: 99999999; overflow: hidden !important; width: 450px !important; height: 200px; margin-top: 40%; } .browse_script_confirm .gen_commit_controls a { margin-top: 45px; width: 175px; padding: 22px; text-align: center; } .browse_script_confirm .gen_commit_controls .ok { display: block; } /*#endregion*/ /*#region live previewing/debugging */ .live_preview_controls { float: left; margin-right: 5px; margin-top: 1px; display: flex; align-content: center; justify-content: center; align-items: center; } .live_preview_controls .btn { width: 100px; text-align: center; margin-right: 5px; } /*#endregion*/ /*#region setscript modal - shelve with EE css*/ .modal-dialog.setscript_selection_modal { background: white; height: 746px; width: 1000px; } /*fx script code mirror*/ .modal-dialog.setscript_selection_modal .CodeMirror { width: 997px; height: 513px !important; } .setscript_selection_modal .code_editor_outer_wrapper { width: 100%; } .setscript_selection_modal .CodeMirror { width: 100%; } .setscript_selection_modal .accrd_content { display: block; } .setscript_selection_modal .CodeMirror-search-label + input { width: 65% !important; height: 22px; } .setscript_selection_modal .code_editor_toolbar_header, .setscript_selection_modal .code_editor_toolbar_footer { width: 100%; } .setscript_selection_modal .code_editor_toggle_maximize { display: none; } .setscript_selection_modal .code_editor_revision { display: none; } .setscript_selection_modal .code_editor_toolbar_header .code_editor_revision { display: none; } /*#endregion*/ /*#region placeholder injector - Shelve with Widgets General, maybe with handles and such? */ /*base*/ .new_placeholder_widget { border: 1px dashed #ccc !important; background: #ccc !important; } /*default*/ .new_placeholder_widget.cke_widget_wrapper > div.cke_widget_element { background: none !important; box-shadow: none; border: none; } /*shapes*/ .new_placeholder_widget.cke_widget_wrapper > div.cke_widget_element.custom_shape { background: #ccc !important; } /*dynamic message*/ .new_placeholder_widget > .cke_widget_element::before { content: attr(data-inject-placeholder); position: absolute; padding: 12px; font-size: 19px; color: white; font-weight: 600; text-align: center; display: flex; justify-content: center; align-items: center; } /*hide editable region content*/ .cke_widget_wrapper.new_placeholder_widget > .cke_widget_element .cke_widget_editable, .cke_widget_wrapper.new_placeholder_widget .custom_shape_content { opacity: 0; } /*#endregion*/ /*#region shapes - shelve with Shapes modal CSS */ .dyna_modal_wrapper:not([data-open-panel]) > .shape_edit_ui.fat_modal { width: 912px; } .dyna_modal_wrapper:not([data-open-panel]) > .shape_edit_ui .ok { display: none !important; } .shape_edit_ui.fat_modal { width: 610px; overflow: visible !important; } .shape_edit_ui .shapes_preview_container { top: -40px; } .shape_edit_ui_header_container { display: none; } .shape_edit_ui .YardiHelp { display: block; margin-top: 25px; } .shape_edit_ui .shape_edit_ui_header_container { display: block; } .shapes_for_nodes .shape_edit_ui_header_container { display: none; } .btn_back_gallery { width: 125px; padding: 5px; text-align: center; position: absolute; top: -7px; left: 0; } .shape_edit_ui_header { text-align: center; } /*gallery*/ .panel_gallery { margin-top: 50px; } .graphics_gallery { margin: 0px; padding: 0px; list-style: none; padding-bottom: 10px; -webkit-touch-callout: none; user-select: none; } .graphics_gallery li { float: left; margin: 13px 15px; cursor: pointer !important; background-color: #F5F5F5; width: 274px; height: 95px; box-sizing: border-box; border: 1px solid #F0EEEE; border-radius: 2px; padding: 3px 10px; color: #4e4e4e; } .graphics_gallery li:hover { border: 2px solid #84B152; padding: 2px 9px; background-color: #ffffff; } .graphics_gallery .ContainerLogo { width: 60px; float: left; border-right: 1px solid #CECECE; padding: 10px 5px 10px 10px; margin-right: 20px; margin-top: 10px; min-height: 45px; max-height: 45px; } .graphics_gallery .ContainerLogo lottie-player { margin-left: -7px; margin-top: -8px } .graphics_gallery .ContainerDesc { width: 154px; float: left; margin-top: 19px; } .graphics_gallery .ContainerDesc .QuestionTitle { font: 600 14px 'open sans'; } .graphics_gallery .ContainerDesc .QuestionDesc { margin-top: 8px; font: 500 11px'Open Sans'; } /*gallery tiles*/ /*views visibility by type*/ /*todo: gallery vs. type panels css - just use one class e.g. .gallery */ #panel_shapes, #panel_graphics, [data-open-panel="shape"] .panel_gallery, [data-open-panel="svg"] .panel_gallery, .shapes_preview_container, .btn_back_gallery { display: none; } [data-open-panel="shape"] #panel_shapes, [data-open-panel="svg"] #panel_graphics, [data-open-panel="shape"] .shapes_preview_container, [data-open-panel="shape"] .btn_back_gallery, [data-open-panel="svg"] .shapes_preview_container, [data-open-panel="svg"] .btn_back_gallery { display: block; } .svg_type_controls { display: none; } .svg_custom .svg_type_controls, .svg_blob .svg_type_controls, .svg_lottie .svg_type_controls { display: block; } /*lottie controls inside shapes modal*/ .svg_lottie_controls { display: none; padding-left: 0; } .svg_lottie .svg_lottie_controls { display: block; width: 311px; } .svg_lottie .svg_height_controls, .svg_lottie .svg_stroke_controls, .svg_lottie .svg_fill_controls, .svg_lottie .svg_animation_controls { display: none; } .btn_import_lottie_file { margin-left: 2px; width: 150px; float: left; margin-top: 15px; padding: 6px 0; } .btn.btn_lottie_site { margin-top: 15px; margin-left: 20px; background-image: url(/ckeditor/plugins/Custom_Shapes/icons/lottie_icon.png); background-repeat: no-repeat; background-size: 20px; background-position: 8px 6px !important; padding: 5px 9px 0px 35px; font-size: 12px; height: 33px; box-sizing: border-box; } .lbl_lottie_site { position: relative; top: 21px; padding-left: 10px; width: 250px; } .lottie_textarea { display: block; margin-top: 7px; width: 288px !important; height: 22px; } .svg_lottie_controls > div { display: grid; grid-template-columns: auto auto auto; } .svg_lottie_controls > div > div { width: 125px; height: 60px; } .hide_loop_controls .lottie_loop_controls { display: none; } /*#endregion*/ /*#region e.e. and lottie as fx - shelve with EE css */ .modal-dialog.lottie_selection_modal { width: 350px; overflow: visible !important; } .lottie_selection_modal .YardiHelp { display: block !important; } .lottie_fx_controls .gen_label { display: block; } .lottie_fx_controls > div { padding: 10px; display: grid; grid-template-columns: auto auto auto auto; } .lottie_fx_controls .gen_input { width: 40px; } .lottie_source_controls, .lottie_segment_controls { display: none; } .show_source_controls .lottie_source_controls, .show_segment_controls .lottie_segment_controls { display: block; } .lottie_fx_controls .shapes_preview_container { background-color: white !important; left: 375px; width: 400px; height: 400px; margin-top: 2px; padding: 5px; overflow: hidden; } lottie-player.preview_lottie_as_fx { width: 350px; height: 350px; } /*no transition! so that you dont see these things moving into place when you open a modal and need to preselect (check) them!*/ .lottie_fx_controls .inputSwitch input + label::after { -webkit-transition: none !important; transition: none !important; } .lottie_segment_input { margin-bottom: 5px; border: none; } /*range slider (used exclusively in e.e. lottie fx u.i. currently*/ .segment_slider_container { margin-left: 8px; margin-bottom: 5px; } .lottie_fx_controls .ui-slider { position: relative; text-align: left; } .lottie_fx_controls .ui-slider .ui-slider-handle { position: absolute; z-index: 2; height: 12px; cursor: pointer; -ms-touch-action: none; touch-action: none; top: 0px !important; } .lottie_fx_controls .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } .lottie_fx_controls .ui-slider.ui-state-disabled .ui-slider-handle, .lottie_fx_controls .ui-slider.ui-state-disabled .ui-slider-range { filter: inherit; } .lottie_fx_controls .ui-slider-horizontal { height: .8em; } .lottie_fx_controls .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } .lottie_fx_controls .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .lottie_fx_controls .ui-slider-horizontal .ui-slider-range-min { left: 0; } .lottie_fx_controls .ui-slider-horizontal .ui-slider-range-max { right: 0; } .lottie_fx_controls .ui-slider-vertical { width: .8em; height: 100px; } .lottie_fx_controls .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } .lottie_fx_controls .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .lottie_fx_controls .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .lottie_fx_controls .ui-slider-vertical .ui-slider-range-max { top: 0; } /*#endregion*/ /*#region e.e. and media as fx - shelve with EE css */ .modal-dialog.media_selection_modal { width: 350px; overflow: visible !important; } .media_selection_modal .YardiHelp { display: block !important; } .media_fx_controls .gen_label { display: block; } .media_fx_controls > div { padding: 10px; display: grid; grid-template-columns: auto auto auto auto; } .media_fx_controls .gen_input { width: 40px; } /*views by media type*/ .section_head.source::after { content: 'Choose a Media File:'; } .vimeo_view .section_head.source::after { content: 'Enter a Video ID' } .vimeo_view .btn_import_media_file { display: none; } .media_fx_controls .media_seek_out { width: 75px; } .media_source_controls, .media_seek_controls { display: none; } .show_source_controls .media_source_controls, .show_seek_controls .media_seek_controls { display: block; } .media_fx_controls .media_fx_preview { background-color: white !important; margin-top: 2px; padding: 5px; overflow: hidden; position: absolute; top: -10%; left: 109%; } /*no transition! so that you dont see these things moving into place when you open a modal and need to preselect (check) them!*/ .media_fx_controls .inputSwitch input + label::after { -webkit-transition: none !important; transition: none !important; } .media_segment_input { margin-bottom: 5px; border: none; } .media_textarea { display: block; margin-top: 7px; width: 288px !important; height: 22px; } /*#endregion*/ /* #region media rewrite */ .media_edit_ui { width: 608px; } [data-open-panel="vimeo"] > .modal-dialog { width: 1000px; } .media_edit_ui .btn.btn_back_gallery { position: relative; margin-bottom: 20px; } /*view default hidden*/ #panel_vimeo, #panel_audio, #panel_embed, #panel_custom_iframe, [data-open-panel="vimeo"] .panel_gallery, [data-open-panel="audio"] .panel_gallery, [data-open-panel="embed"] .panel_gallery, [data-open-panel="custom_iframe"] .panel_gallery, .btn_back_gallery { display: none; } /*view show*/ [data-open-panel="vimeo"] #panel_vimeo, [data-open-panel="audio"] #panel_audio, [data-open-panel="embed"] #panel_embed, [data-open-panel="custom_iframe"] #panel_custom_iframe, [data-open-panel="vimeo"] .btn_back_gallery, [data-open-panel="audio"] .btn_back_gallery, [data-open-panel="embed"] .btn_back_gallery, [data-open-panel="custom_iframe"] .btn_back_gallery { display: block; } /*vimeo ui*/ [data-open-panel="vimeo"] .gen_commit_controls .ok { display: none !important; } /*general labels and inputs default styling*/ #custom_media_panels .gen_label { cursor: help; } #custom_media_panels .gen_input { width: 40px; } #custom_media_panels .section_head { margin-bottom: 5px !important; color: #4a4a4a; font-weight: 600; font-size: 10px; text-align: left; margin-top: 10px; user-select: none; text-decoration: underline; } /*#endregion*/ /*#region new misc*/ .template_metadata { display: none !important; } /*#endregion*/ /*#region media widget new css */ .vimeoBackground .qt-autoplay, .vimeoBackground .qt-rtp { display: none; } /*#endregion */ /*#region js plumb overrides*/ svg._jsPlumb_connector.endpointSourceLabelDashed path[stroke-dasharray] { stroke-width: 4; stroke-dasharray: 20, 8; stroke: red; } svg._jsPlumb_connector.endpointSourceLabelDashed path:not([stroke-dasharray]) { stroke: red; fill: red; } .QuestionEntry .legend-label .user-color { border-bottom-color: red; } .endpointSourceLabelSolid { opacity: 1 } /*#endregion*/ /* * Description: Complete CSS for the Engagement Engine feature * Author: Spencer Gresoro * Date: */ /* #region dynamic header/title based on enabled view */ .sg_wrapper .modal-header > span::after { font-size: 22px; content: 'Engagement Engine'; position: relative; left: 6px; } .sg_element_grid_open .modal-header > span::after { content: 'Select Elements'; } /*.sg_var_wizard_open .modal-header > span::after { content: 'Course Variables'; }*/ /* #endregion */ /*#region base structure */ .sg_wrapper { width: 42% !important; /*override side modal width since it's set to important, the modals child container needs its width set inline as well due to important being set for side modals, you need the overlay so they can't interact with the controls of the editor as well!*/ overflow: auto !important; z-index: 99997 !important; } .sg_wrapper > .modal-dialog { min-width: 200px; width: 400px; left: 0px; background-color: #fff; padding: 10px; border-radius: 0px; min-height: 100px; } .script_generator_ui { overflow-y: scroll !important; } .sg_el_sel_panel { display: none; height: 624px; } .sg_el_grid { overflow-y: auto; height: 650px; width: 100%; float: left; } .sg_wrapper .modal-header { font-size: 17px; } .sg_wrapper * { user-select: none !important; /*no ugly drag selection*/ } #script_generator_template { width: 100%; min-height: 499px; height: 606px; } .sg_wrapper.cust_bg_open { opacity: .5; } /* #endregion */ /*#region tabs */ /* tabs for engagement engine system */ #sg_tabs { background: #fff; } #sg_tabs .ui-tabs-panel { min-width: 0; padding: 0; margin: 0; } #sg_tabs ul.tablist { width: 100%; } #sg_tabs li.ui-tabs-tab { border: 1px solid #ececec; background: #f6f6f6; width: 25%; user-select: none; padding: 0; height: 30px; line-height: 30px; border-radius: 0 40px 0 0 !important; margin-left: -3px; margin-right: 5px; } #sg_tabs li.ui-tabs-tab a { color: #858585; } .sg_tab_scripts { padding: 6px 35px; } .sg_tab_variables_li { margin-left: -30px !important; } .sg_tab_variables { padding: 6px 41px; } #sg_tabs li.ui-tabs-tab.ui-state-active { background-color: #cccbcb; } #sg_tabs li.ui-tabs-tab.ui-state-active a { color: #fff; } #sg_tabs li.ui-tabs-tab:hover { background-color: #565656; } #sg_tabs li.ui-tabs-tab:hover a { color: #fff; } /*#endregion */ /* #region header */ .sg_scripts_header { padding: 10px 0px 5px 27px; cursor: move; margin: 0px; } .sg_row.header { padding: 3px 0 0 5px; height: 35px; background-color: #cccbcb; color: #fff; width: 100%; /*hardcoded for Transition*/ } .sg_row.header input { top: -8px; left: -3px; margin-right: 0px; cursor: pointer; } .sg_row.header h4 { margin: 6px; font-size: 14px; } /* #endregion */ /*#region insert script button */ .sg_wrapper .UserActions { float: right; margin-top: 0px; margin-right: 3px; } .sg_insert_script_ddl_button:after { display: inline-block; width: 0; height: 0; vertical-align: middle; border-top: 4px solid #858585; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; margin-left: 3px; } .sg_wrapper ul.drop-menu li:hover { background: #b5b5b5; color: #fff; } .sg_wrapper .UserActions li { width: 142px !important; background: #f6f6f6; color: #858585; font-size: 13px; font-weight: 600; } .sg_wrapper .UserActions .drop-menu li { text-align: left; padding-left: 8px; width: 134px !important; } .sg_insert_script_ddl_button + ul { border: 1px dashed #ccc; border-radius: 6px; margin-left: -1px; } .sg_export_menu_splitter { margin-left: -5px; } /*#endregion */ /*#region big no script placeholder */ /* todo: extend to drag n' drop zone */ .sg_noscripts #sg_entries::before { content: "Please Insert a New Trigger"; color: #ccc; font-size: 32px; font-weight: 800; border: 2px dashed #ccc; border-radius: 6px; text-align: center; width: 80%; display: inline-block; padding: 50px; margin-top: 2px; } .sg_noscripts .sg_help_panel * { display: none; } /*#endregion */ /*#region import/export controls */ /*loading progress for import*/ #sg_tab_scripts .ck_loading_gear { position: absolute; align-items: center; justify-content: center; top: 43px; right: 29%; bottom: 16px; left: 0; background: rgba(117,117,117,33%); z-index: 9999999999999999999999999; border-radius: 6px; } a.btn.sg_import_scripts { float: right; color: #858585; font-size: 13px; font-weight: 600 !important; margin-right: 4px; } .sg_export_scripts img { height: 16px; margin-left: 8px; margin-top: 10px; } .sg_import_scripts img { } /*#endregion */ /* #region grids (element and variables wizard) */ .sg_row:not(.header) { position: relative; line-height: 23px; padding-left: 15px; height: 23px; margin: 5px 0 1px 0px; padding: 2px; } .sg_row:not(.sg_entry_registered_element):not(.header) { border: 1px solid #ccc; /* background: white; */ } .sg_row:not(.header):hover, .sg_row:not(.header):hover p { cursor: pointer; border: 1px solid #dedede; background-color: #dedede; } .sg_row p { position: relative; display: block; background-color: #fff; z-index: 1; padding-right: inherit; top: 0; margin-top: 0; margin-bottom: 0; padding-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sg_row .horizontal_treeline { top: 12px; width: 200px; } .sg_el_grid .sg_ui_cust_id { border: 1px solid #ccc; } /* node name, header, handle text overflow for long text */ .sg_row_name, .sg_row.header h4 { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .sg_ui_cust_id { border: none; outline: none; position: relative; width: 360px; /* margin-left: 2px !important; */ } .sg_cond_header .sg_ui_cust_id { margin-left: 30px; margin-top: 7px; height: 17px; border: 1px solid #ccc; } .sg_row_name { max-width: 80%; } /* controls */ /* top controls container */ .sg_top_controls { height: 50px; width: 330px; } /*auto scroll element switch*/ .sg_autofind_elements { float: right; margin-right: 2px; margin-top: 3px; } .sg_autofind_elements > span { margin-right: 5px; } /* the filter ddl */ .sg_el_filter { width: 175px; cursor: pointer; margin-top: 6px; margin-left: 0px; height: 35px; } .sg_el_filter option { } /* buttons */ .sg_el_grid button { background: transparent; cursor: pointer; } .sg_row .btn-group { margin-top: -2px; } /* checkbox */ .sg_el_grid .cbox { top: -5px; left: 0; cursor: pointer; } /*trigger entries panel*/ .sg_entries_panel { float: left; width: 72%; min-height: 100%; border-radius: 3px; margin-top: 4px; overflow: hidden; } /*control labels*/ .sg_entries_panel .sg_ui_lbl { display: block; margin: 15px 5px 2px 4px; font-weight: 600; font-size: 11px; } /*drop down lists*/ .sg_entries_panel select { height: 33px; } /*inputs*/ .sg_entry_selections_outer_wrapper input:not(.sg_ui_cust_id) { font: normal 15px 'open sans'; color: #636363; border: 1px solid #dddddd; width: 118px; height: 29px; background-color: white; cursor: text !important; outline: none; } /*toggled views*/ .sg_el_sel_panel, .sg_element_grid_open .sg_scripts_header, .sg_element_grid_open .close, .sg_element_grid_open .sg_tabs, .sg_element_grid_open .sg_entries_panel, .sg_element_grid_open .sg_help_panel { display: none; } .sg_element_grid_open .sg_el_sel_panel { display: block; } /*variables grid*/ .sg_vars_grid { width: 100%; overflow-y: auto; overflow-x: hidden; } /* variable filter in the debugger */ .sg_vars_wiz_filter_container { display: block; margin-top: 9px; } .sg_vars_wiz_filter_input { width: 275px; background: white; margin-bottom: 12px !important; } /*column headers*/ .sg_vars_grid_column_headers { width: 100%; font-size: 13px; font-weight: 600; } .sg_vars_grid_column_headers > span:nth-child(1) { margin-left: 9px; margin-right: 112px; } .sg_vars_grid_column_headers > span:nth-child(2) { margin-left: -5px; margin-right: 15px; } .sg_vars_grid_column_headers > span:nth-child(3) { margin-right: 75px; } .sg_vars_grid_column_headers > span:nth-child(4) { margin-left: 54px; margin-right: 85px; } .sg_ui_cust_id.sg_var_name { left: 5px; width: 187px; border: 1px solid #ccc; margin-right: 7px; } .sg_var_dt { width: 77px; } .sg_var_behaviour { width: 134px; } .sg_row.sg_var_entry { height: 32px; } .sg_var_value { border: none; outline: none; position: relative; width: 206px; border: 1px solid #ccc; } .inputSwitch.sg_var_graded_control { margin-left: 6px; } .sg_vars_add { float: right; background-color: #f6f6f6; border-radius: 0; padding: 6px 40px 6px; margin-right: 3px; margin-top: 1px; cursor: pointer; color: #858585; user-select: none; text-align: center; } .sg_vars_add:hover { background-color: #565656; color: white; } .sg_var_entry:not(.sg_var_entry_new) .no_bubble:not(.sg_var_value) { font-weight: 600; outline: none !important; border: none !important; background: transparent !important; color: #858585 !important; pointer-events: none; } .sg_var_entry_new { background-color: #aee4ae; } .btn_delete_variable { width: 22px; height: 22px; padding: 2px; float: right; margin-top: 3px; background-size: 23px; background-repeat: no-repeat; background-position-y: 2px; } .btn_delete_variable.DisabledView { visibility: visible !important; } .sg_delete_var_tooltip { width: 190px; text-align: left; } .sg_delete_var_tooltip a { color: #57b48c } .sg_var_entry_cb { visibility: hidden; } /*seperators for cleaner variables view*/ [class*="sg_var_label"] { margin-top: 55px !important; } [class*="sg_var_label"]::before { font-family: 'icomoon_EL'; position: absolute; top: -27px; font-size: 26px; color: #858585; } [class*="sg_var_label"]::after { position: absolute; top: -28px; left: 36px; color: #616161; font-size: 14px; font-weight: 600; } .sg_var_label_new:before { /* content: '\ed5f'; */ } .sg_var_label_new::after { content: 'New Variables...'; left: 0; } .sg_var_label_global:before { content: '\e9fd'; } .sg_var_label_global::after { content: 'Global Variables'; } .sg_var_label_context:before { content: '\e919'; } .sg_var_label_context::after { content: 'Course Variables'; } /*update button*/ .sg_disable_var_update { opacity: .50; pointer-events: none; } /*loading gear*/ .ck_loading_gear_variables { position: absolute; top: 38px; border-radius: 0 0 6px 6px; margin-bottom: 15px; } /* #endregion */ /*#region elements button changes*/ /*element icon*/ .sg_choose_element_button_icon { background-image: url(/images/EngagementEngine/sg_choose_elements_icon.png); background-repeat: no-repeat; background-position-x: 4px; background-position-y: 4px; background-size: 41px; height: 49px; width: 49px; margin-left: -49px; position: relative; background-color: #4daec76e; border-radius: 100%; } /*new ul structure*/ ul.sg_entry_selected_element_names_ul { text-align: left; font-size: 11px; font-weight: 600; z-index: 0; margin-top: 6px; } span.sg_entry_buttons_lbl.sg_entry_button_select_elements { margin-top: 20px; } /*alt element button*/ .sg_alt_el_wrapper { width: 100%; } .sg_alt_el_wrapper .sg_entry_hr { margin-top: 19px; } .sg_alt_el_wrapper .sg_ui_lbl { position: relative; top: -24px; z-index: 1; width: 131px; background: #fff; } .sg_choose_elements_secondary { border: 1px solid #dddddd; } /*#endregion*/ /* #region trigger entries */ #sg_entries { display: none; margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .sg_entries_wrapper { overflow: hidden; } .sg_entry { width: 540px; margin-bottom: 10px; } .sg_entry_controls { position: relative; overflow: hidden; margin: 0px; } .sg_conds_panel .sg_entry_controls { float: left; padding-bottom: 10px; } .sg_cond_statement_operator { margin-top: 33px; margin-left: 2px; } .sg_cond_statement_ddl_logic_operator { width: 57px; margin-top: 34px; } /*trigger entry header*/ .sg_entries_panel .sg_entry_header { display: block; cursor: move; position: relative; margin: 2px 0 0 0; font-size: 100%; background: #cccbcb; padding-left: 2.2em; padding: .5em .5em .5em .7em; zoom: 1; outline: none; line-height: 1.3; border-radius: 6px 6px 0 0; } .sg_entries_panel .sg_entry_header.accrd_section_close_rnd { border-radius: 6px !important; } .sg_entry_header:hover { background: #cacaca; } .sg_cond_clone { color: #fff !important; font-size: 16px; padding: 4px 10px 0px 0px !important; } /*trigger entry validator special styling*/ .sg_entry_header.sg_no_el_sel::after, .sg_entry_header.sg_no_var_sel::after { /* content: 'Invalid'; */ position: absolute; left: 29px; top: -4px; font-size: 13px; color: #da6262; } /*script settings buttons - various*/ .sg_header_btns { float: right; margin-right: 4px; margin-top: 3px; } .sg_add_entry, .sg_launch_var_wizard, .sg_walkthgouh { float: right; font-family: 'Open Sans'; background: #fff; margin-right: 4px; background-color: #cccbcb; border-radius: 0px; cursor: pointer; color: white; user-select: none; text-align: center; } .sg_ui_static.sg_launch_var_wizard, .sg_add_entry { padding: 6px 23px; margin-top: 0.5px; font-size: 12px; font-weight: 800; } .sg_ui_static.sg_walkthgouh { border-radius: 100%; width: 20px; height: 20px; text-align: center; display: flex; align-items: center; justify-content: center; padding: 3px; position: absolute; top: -42px; left: 190px; display: none; } .sg_add_entry:hover, .sg_launch_var_wizard:hover, .sg_walkthgouh:hover { background-color: #8a8a8a; color: white; /* transform: scale(1.5); */ } .sg_entries_panel, .sg_entry_header a { color: #fff; } .sg_entry_remove { color: #f32525; margin-right: 8px; } /*selection buttons*/ .sg_entry_selections { list-style-type: none; margin: 0; padding: 0; display: block; width: 100%; cursor: pointer; height: 100%; } .sg_entry_selections li { float: left; width: 67px; height: 60px; font-size: 1.5em; text-align: center; display: flex; align-items: center; justify-content: center; font-family: 'Open Sans'; margin: 2px 2px; } .sg_entry_selections.sg_sel_lg li { /* height: 65px; */ } .sg_entry_selections.sg_sels_med li { height: 31px; font-size: 12px; } .sg_entry_selections.sg_sels_small li { height: 31px; width: 76px; font-size: 10px; font-weight: 600; position: relative; } /*remove fx button*/ [data-effect] > .sg_rmv_fx { display: none; } [data-effect].sel_control > .sg_rmv_fx { display: block; } .sg_rmv_fx { position: absolute; font-size: 11px; top: 0px !important; margin-left: 57px; background: red !important; color: white; height: 15px; width: 13px; padding: 1px 3px; border-radius: 3px; } /*hide effects button - dynamic label based on mode*/ li.sg_fx_visibility::before { content: 'Visibility'; } li.sg_fx_visibility[data-effect="hide"]::before { content: 'Hide'; } li.sg_fx_visibility[data-effect="hide"][data-hidemode="collapse"]::before { content: 'Collapse'; } li.sg_fx_visibility[data-effect="show"]::before { content: 'Show'; } /*state effects button - dynamic label */ li.sg_fx_state::before { content: 'State'; } li.sg_fx_state[data-effect="enable"]::before { content: 'Enable'; } li.sg_fx_state[data-effect="disable"]::before { content: 'Disable'; } /*rtp effects button - dynamic label based on mode*/ li.sg_fx_rtp { /* width: 158px !important; */ } li.sg_fx_rtp > .sg_rmv_fx { /* margin-left: 139px; */ } li.sg_fx_rtp::before { content: 'Required Play'; white-space: pre; } li.sg_fx_rtp[data-effect="rmvrtp"]::before { content: 'Remove \A Required Play'; } li.sg_fx_rtp[data-effect="setrtp"]::before { content: 'Set \A Required Play'; } /*modes, element button*/ .sg_entry_buttons { cursor: pointer; width: 94%; min-height: 34px; text-align: center; border-radius: 6px; display: flex; background: #fff; align-items: center; justify-content: center; overflow: hidden; font-size: 16px; padding: 10px; } .sg_entry_buttons * { cursor: pointer !important; user-select: none; } .sg_entry_buttons i { font-size: 20px; } .sg_entry_buttons .lblInstruction { font-size: 15px; position: absolute; top: -30px; width: 100%; left: 0px; margin: 0px; text-align: left; padding-left: 7px; padding-top: 4px; font-weight: 500; color: #f9f9f9; transition: all 0.3s cubic-bezier(0.18, 0.89, 0.15, 1.3); transition-delay: .1s; font-size: .6em; } .sg_entry_buttons:hover .lblInstruction { top: 0px !important; } .sg_entry_buttons_lbl { padding-left: 10px; padding-top: 10px; } .sg_entry_buttons[data-mode] { width: 171px; float: left; font-size: 12px; font-weight: 600; /* border: 1px solid#cccccc4d; */ } /*little nudge on the effects controls*/ #effects_selectable { /* margin-top: 5px; */ } /* #endregion */ /* #region event selection filtering based on element type*/ .sg_entry_events li[data-event] { display: none; } .sg_entry_events.sg_evts_default .sg_evt_default, .sg_entry_events.sg_evts_text .sg_evt_text, .sg_entry_events.sg_evts_text .sg_evt_submit, .sg_entry_events.sg_evts_change .sg_evt_change, .sg_entry_events.sg_evts_change .sg_evt_submit, .sg_entry_events.sg_evts_media .sg_evt_default, .sg_entry_events.sg_evts_media .sg_evt_media { display: flex; } /* #endregion */ /* #region conditions */ .sg_cond_wrapper { width: 100%; } .sg_cond_statement { float: left; border: 1px solid rgba(204,204,204,65%); border-radius: 5px; padding: 5px; margin-bottom: 5px; cursor: move; } .sg_entry_controls.sg_entry_events { width: 47%; } .sg_cond_statement_operator, .sg_statement_ddl_actions { width: 50px; margin-left: 2px; } .sg_statement_ddl_actions { width: 119px; } .sg_outer_statements_wrapper.sg_rmv_template_mode_action { clear: both; } /*mode related css*/ .sg_entry[data-mode="action"] > h3::before { content: 'Action'; color: white; margin-left: 22px; } .sg_entry[data-mode="set"] > h3::before { content: 'Set'; color: white; margin-left: 23px; margin-right: 20px; } .sg_entry[data-mode="fx"] > h3::before { content: 'Fx'; color: white; margin-left: 25px; margin-right: 23px; } /*condition entries*/ .sg_cond_entry { background: #fff; color: #333; font-size: 14px; width: 98%; margin-bottom: 10px; border-radius: 6px 6px 0 0; } .sg_cond_header.accrd_section_close_rnd { border-radius: 6px !important; } .sg_cond_header { position: relative; background: #b5b5b5; color: white; border: 1px solid #cccccc78; cursor: pointer; font-size: 12px; cursor: move; border-radius: 6px 6px 0 0; height: 32px; margin-left: -1px; margin-right: -1px; } .sg_cond_header a { background-repeat: no-repeat; padding: 14px; /* border: 1px solid red; */ background-position: center; background-size: 20px; border-radius: 6px; margin-top: 2px; } a.btn_remove_cond, a.btn_delete_variable { background-image: url(../images/EngagementEngine/removeCondition.png); margin-right: 5px; } a.btn_add_cond { background-image: url(../images/EngagementEngine/addCondition.png); margin-right: 10px !important; } .sg_cond_header:hover .accrd_toggle_icon { color: #fff; } .sg_cond_controls_wrapper { padding: 2px 10px; } a.sg_cond_btns { float: right; } a.sg_cond_btns:hover, a.sg_entry_remove:hover, a.sg_fx_anim:hover, a.sg_fx_jtp:hover, a.sg_fx_setvar:hover { color: #5a5a5a; } /*do once*/ #other_opts_selectable { height: 37px; } .sg_entry_other_opts { margin-bottom: 10px; } li.sg_ui_do_once_sel { margin-left: 0px; width: 50%; } /* select2 for variables - select2 adjustments by context*/ .sg_vars_input ~ .select2 { margin: 2px 2px 0px 1px; padding: 0; } .sg_cond_wrapper .select2 { width: 163px !important; } [data-mode="fx"] .sg_cond_wrapper .select2 { width: 232px !important; } /*commit controls (update, cancel, set elements, revert ect)*/ .sg_cancel_set_el, .sg_cancel_vars { margin-left: 4px; } .sg_commit_controls { clear: both; height: 9px; margin-top: 20px; margin-bottom: 30px; } .sg_commit_controls a { float: left; background-color: #cccbcb; padding: 8px 24px 8px; border-radius: 0px; cursor: pointer; color: white; user-select: none; text-align: center; margin-left: 5px; } .sg_commit_controls .sg_remove_all_scripts, .sg_commit_controls .sg_del_vars { float: left; background-color: #c28a8a; margin-right: 30px; } .sg_commit_controls .cancel { margin-left: 4px; } .sg_commit_controls a.btn_revert_cust_bg:hover { color: #fff; } /* #endregion */ /* #region statements */ /*set self and reset action*/ .sg_statement_action_setself .sg_cond_value, .sg_statement_action_reset .sg_cond_value { display: none; } /*reset and setself actions make select2 larger*/ .sg_statement_action_setself .select2-container, .sg_statement_action_reset .select2-container { width: 285px !important; } /*submit action css*/ .sg_statement_action_submit .sg_ui_vars_selection, .sg_statement_action_submit .sg_cond_value { display: none; } /*filter valid options*/ .sg_ui_opts_ints option:not([int]):not([statement]), .sg_ui_opts_bools option:not([bool]):not([statement]), .sg_ui_opts_strings option:not([string]):not([statement]) { display: none; } /* #endregion */ /*#region new labels and dividers */ /*fx selection label*/ .sg_fxs .sg_ui_lbl { position: relative; top: -13px; z-index: 1; width: 113px; background: #fff; margin-top: 5px; } /*new hr tags*/ .sg_fxs .sg_entry_hr { margin-top: 8px; } /*statements label*/ .sg_ui_lbl_define_statements { position: relative; top: 10px; z-index: 1; width: 113px; background: #fff; } /*#endregion */ /*#region help/info scripts panel */ /*help/info panel*/ .sg_help_panel { float: right; width: 25%; min-height: 589px; border: 1px solid #ccc; border-radius: 6px; margin-top: 5px; margin-bottom: 7px; padding: 10px; font-size: 12px; } /*help info visibility by type*/ .sg_help_panel_examples_wrapper { display: none; } .sg_help_panel_show_action .sg_help_panel_action, .sg_help_panel_show_set .sg_help_panel_set, .sg_help_panel_show_fx .sg_help_panel_fx { display: block; } .sg_help_panel_scriptname { margin-left: 4px; color: orangered; } .sg_help_panel_elements_list { color: #4e6b6b; } .sg_help_panel b { font-size: 12px; } .sg_help_panel ul { padding-left: 15px; } .sg_help_panel h3 { margin-top: 0; color: #887188; } .sg_help_panel h5 { margin: 15px 0 2px 0; } .sg_selected_script_entry_for_info { background: #adc4ca !important; } /*#endregion */ /*#region big view - distraction free view */ .sg_max_mode .cke_top, .sg_max_mode .author_helper_wrapper { display: none !important; } .sg_max_mode .cke_contents { margin-right: 810px !important; padding-bottom: 25px; } .sg_max_mode .cke_inner::before { content: 'Engagement Engine View'; background-color: #ffa1a1; color: #fff; font-size: 18px; font-weight: bold; padding: 70px; position: relative; left: 28px; } /*#endregion */ /* #region general section */ /*hovering controls in the script maker*/ .sg_entry_selections li:hover, .sg_entry .sg_entry_buttons:hover, .sg_commit_controls a:hover, .sg_cond_header:hover { -webkit-font-smoothing: subpixel-antialiased; background: #8a8a8a !important; color: #fff !important; } .sg_entry_selections .sel_control, .sg_entry_buttons.sel_control, .sg_entry_registered_element, .sg_btn_elements_has_selection { background: #adc4ca; color: white; } .sg_entry_selections_outer_wrapper { display: none; background: #f1f1f1; color: #333; margin: 0; padding: 1em 0 0 1em; border: 1.5px dashed #ccccccb0; border-radius: 0 0 6px 6px; } .sg_entry_selections li { border: 1px solid #dddddd; background: #f6f6f659; color: #333333; border-radius: 6px; } .sg_entries_panel .sg_ui_lbl { color: #565656; } /*disabled row*/ .sg_disable_row { pointer-events: none !important; opacity: .5 !important; } /*validation*/ .sg_validator_label { font-weight: 600; } .sg_validator_items { margin: 2px !important; padding: 10px; list-style: circle; color: orangered; } .sg_input_invalid { background-color: #f5dde1 !important; } /*general hide*/ .sg_hide_ui { display: none !important; } /* #endregion */ /* #region script effects - used when a script is initited */ /*show / hide*/ .sg_element.hide:not(.sg_debugger_peak_element) { visibility: hidden !important; opacity: 0; pointer-events: none; } .sg_element.collapse_hide { display: none !important; } .sg_element.show { visibility: visible; transition: visibility 2s linear,opacity 0.3s linear; } /*enable / disable*/ .sg_element.enabled { pointer-events: all !important; opacity: 1 !important; transition: opacity 1.5s; } .sg_element.disabled { pointer-events: none !important; opacity: .5; transition: opacity 1.5s; animation-iteration-count: 1; -webkit-animation-name: shake; animation-name: shake; -webkit-animation-duration: 1s; animation-duration: 1s; } /*rtp*/ .aspire_form_elements.NotPlayedYet:hover { transform: scale(1.05); box-shadow: 0px 5px 9px -7px #000000; } .sg_element_removed_rtp { animation-iteration-count: 1; -webkit-animation-name: tada; animation-name: tada; -webkit-animation-duration: 1s; animation-duration: 1s; } /*scripted animations - special css that drives the behaviour of animations fired via scripts*/ .sg_animated_noblink_opacity:not(.sg_animated_via_script_out_override) { opacity: 1 !important; } /*force pointer events none on animated out elements */ .sg_animated_via_script_out_override { pointer-events: none !important; } /* #endregion */ /* #region script debugger tool */ #sg_debugger_template { display: none; } .sg_debugger { position: fixed; top: -12px; left: -14px; min-width: 388px; background-color: #fff; border: 1px solid #ccc; color: black; font-size: 12px; text-align: left; font-weight: 600; padding: 5px 15px 15px 15px; margin-left: 15px; margin-top: 15px; width: 384px; z-index: 99999999999999999999999999; } .sg_debugger_heaader { text-align: left; /* color: #fff; */ font-size: 15px; margin-top: 0; margin-bottom: 0; cursor: m; } .sg_debugger_drag_handle { font-family: 'icomoon_EL' !important; speak: none; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; right: 4px; top: 8px; word-spacing: inherit; z-index: -1; transition: opacity .3s; cursor: move; font-size: 16px; z-index: 2; } .sg_debugger_drag_handle:before { content: '\e981'; position: absolute; right: 3px; } .sg_debugger_drag_handle:after { /* content: '\e981'; */ } /*sections*/ .sg_debugger_hr { position: relative; top: 22px; } .sg_debugger_sections { text-align: left; font-size: 11px; background: inherit; left: 0; position: relative; /* color: #fff; */ } .sg_debugger_sections_overview { width: 190px; } .sg_debugger_sections_variable_watcher { width: 95px; } .sg_debugger_sections_debug_output { width: 80px; } /*overview*/ .sg_debugger_overview_totals { font-size: 14px; } .sg_debugger_overview { display: flex; flex-wrap: nowrap; cursor: pointer; } .sg_debugger_overview > div { background-color: #a0a0a0; width: 85px; margin: 6px; text-align: center; line-height: 18px; font-size: 11px; color: white; border-radius: 3px; } /*popover summary */ .sg_debugger_summary_header { text-align: center; } .sg_debugger_summary_listitems { padding-left: 19px; } .sg_debugger_summary_listitems li { padding-bottom: 5px; } .sg_debugger_summary_variable_dt { color: blue !important; margin-right: 4px; } /* #region variable watcher*/ .sg_debugger_variable_watcher { height: 195px; overflow: auto; background-color: #a0a0a0; color: white; padding: 3px; border-radius: 3px; max-height: 508px; min-height: 150px; } .sg_ui_cust_id.sg_debugger_variable_watcher_input.sg_ui_keyup_validation { margin-top: -1px; border-radius: 2px; border: 1px solid #ccc; display: block; width: 345px; padding-top: 3px; } .sg_debugger_variable_watcher_commit { float: right; margin-right: 28px; background: #5e5e5e; color: white !important; margin-top: -40px !important; padding: 0px 6px 3px 6px; z-index: 9999; cursor: pointer; text-align: center; height: 13px; } /*toggle popwatch*/ .sg_debugger_popwatch_toggle { background-image: url(../images/EngagementEngine/popout_variable_watcher.png); margin-right: 10px !important; position: absolute; width: 20px; height: 20px; background-size: 20px; right: 15px; background-repeat: no-repeat; z-index: 9; margin: 0px !important; background-color: white; border-radius: 2px; } /*popwatch outer wrapper */ .sg_debugger_popwatch { position: fixed; padding: 14px; border: 1px solid #ccc; border-radius: 6px; margin-top: 5px; background: #fff; padding-top: 0; cursor: move; z-index: 2; height: auto; } .sg_debugger_popwatch .sg_debugger_variable_watcher { height: auto !important; } /*adjust view in popwatch mode*/ .sg_debugger_popwatch_enabled .sg_debugger_logic_output { height: 695px; } .sg_debugger_popwatch_enabled .sg_debugger_hr_variable_watcher { display: none; } .sg_debugger_popwatch_enabled .sg_debugger_hr_debug_output { margin-top: 15px; } /* variable filter in the debugger */ .sg_debugger .sg_filter_variables_input { width: 377px; background: white; margin-bottom: 12px !important; } .sg_filter_variables_label { background: transparent; z-index: 99; } .sg_filter_variables_label::after { content: 'Filter' !important; } /* #endregion variable watcher */ /*debug output*/ .sg_debugger_logic_output { background: white; color: black; height: 412px; width: 97%; overflow-y: scroll; font-size: 12px; border: 1px solid #ccc; } .sg_debug_output { display: block; padding: 3px; margin-left: 5px !important; margin-top: 5px; clear: both; } [class*=".sg_debug_output_"] { color: black; } .sg_debug_output_event { background: #85a8e8; } .sg_debug_output_variable_change { background: orange; } .sg_debug_output_nofx { background: #e8caff; } .sg_debug_output_statement { background: #eded27; } .sg_debug_output_statement_truthy { background: #84e284; } .sg_debug_output_fx { background: #84e284; } .sg_debug_output_prescan { background: #cfb0ff; } .sg_debug_output_indent { margin-left: 20px !important; } /*legend*/ .sg_debugger_legend { position: relative; top: -10px; margin-left: -40px; list-style: none; cursor: pointer; } .sg_debugger_legend li { float: left; margin-right: 15px; } .sg_debugger_legend span { float: left; width: 82px; height: 19px; display: flex; align-items: center; justify-content: center; } .sg_debugger_legend .sg_debug_legend_event { background: #85a8e8; } .sg_debugger_legend .sg_debug_legend_varchange { background-color: orange; } .sg_debugger_legend .sg_debug_legend_nofx { background-color: orangered; } .sg_debugger_legend .sg_debug_legend_statement.truthy { background-color: #84e284; } .sg_debugger_legend .sg_debug_legend_statement { background-color: #eded27; } .sg_debugger_legend .sg_debug_legend_generic { background-color: #fff; } .sg_debugger_legend_embedded_name { font-size: 9px; font-weight: 600; } /*peek element hyperlink*/ .sg_debugger_element_hyperlink:hover { transform: scale(1.05); box-shadow: 0px 5px 9px -7px #000000; } .sg_debugger_element_hyperlink { font-size: 13px; padding: 7px 5px; margin-right: 6px; margin-bottom: 3px; display: inline-block; text-align: center; color: #FFF; border-radius: 3px; background-color: rgba(138, 138, 138, 0.95); cursor: pointer; transition: transform .1s, box-shadow .3s; } /*expose hidden content for 'peek element' feature*/ .sg_debugger_peak_element { display: block !important; visibility: visible !important; opacity: 1 !important; } .sg_debugger_peak_element.primary { border: 1px solid red !important; } /*controls...*/ /*toggle debugger button*/ .sg_debugger_toggle { display: none; background-color: #fff; position: fixed; margin-left: -28px; padding: 0px 2px !important; margin-top: 22px; color: #888; font-weight: bold !important; border-radius: 3px; text-align: center; min-width: 68px; border: 1px solid #ccc; } /*only visislbe to valid authors (when edit button is rendered) and toggled on */ .course .lknedit + .sg_debugger_toggle, .course .EditpagePreview + .sg_debugger_toggle { /*display: block;*/ } .course .EditpagePreview + .sg_debugger_toggle { position: absolute; right: -150px; padding-top: 5px !important; } /*page preview toggle debugger override*/ /*autoclear*/ span.sg_debugger_autoclear_logic_output_container { float: right; height: 5px; position: relative; top: -45px; right: 7px; } /*bottom controls*/ .sg_debugger_controls { color: #fff; font-weight: 800 !important; margin-top: 10px; margin-left: 1px; display: inline-block; border: none; } .sg_debugger_sub_container div { margin-bottom: 2px; } .sg_debugger_close { float: right; color: white; margin-right: 15px; background: #888888; margin-right: 0; } .sg_debugger_close:hover { color: #fff; } .sg_debugger_reset_variables, .sg_debugger_clear_output { background: #c37575; } .sg_debugger_export_script_data { background: #888888; text-align: center; } /*no selection with laso in this view*/ div#sg_debugger_template { user-select: none; } /* #endregion */ /*#region help info - expose - */ .modal-dialog.script_generator_ui .YardiHelp { display: block !important; margin-top: 24px; } .sg_help_primary { top: -45px; right: 15px; } .sg_help_debugger { float: right; cursor: pointer; position: relative; top: -17px; right: 115px; } /*#endregion*/ /*#region modals for various effects (set style, setvar, hide, jtp, import data, ect) */ /*wrapper*/ .jtp_selection_modal, .hide_selection_modal, .import_sgdata_modal, .setstyle_selection_modal, .setscript_selection_modal { display: block; background-color: #fff; overflow: hidden; width: 700px; } .setstyle_selection_modal { width: 572px; } /*tiles*/ .sg_sub_modal_tile_container { height: 127px; display: flex; justify-content: center; flex-wrap: wrap; cursor: pointer; margin-top: 84px; } .sg_sub_modal_tile { background-color: #fcfcfc; border: 1px solid #E0E0E0; width: 170px; min-height: 100px; float: left; margin: 15px; margin-bottom: 40px !important; padding-top: 0px !important; position: relative; overflow: hidden; } .hide_selection_modal { width: 775px; } .hide_selection_modal .sg_sub_modal_tile_container { height: 130px; } .hide_selection_modal .sg_sub_modal_tile { width: 200px; height: 50px; } .hide_selection_modal i { font-size: 24px !important; margin-left: 5px; } .hide_selection_modal .Info .lblInstruction { font-size: 12px !important; } .hide_selection_modal .Info .sg_sub_modal_tile_label { font-size: 16px; } /*import sg data modal*/ .import_sgdata_modal .sg_sub_modal_tile_container { margin-top: 30px; } .import_sgdata_modal_info { border: 1px dashed #ccc; border-radius: 6px; color: #868686; } .import_sgdata_modal_info span { font-size: 14px; font-weight: 600; margin: 15px 0px 15px 10px; display: block; } [data-sg-import-modal-context="sg"] .sg_sub_modal_tile.copy { display: none; } .import_sgdata_modal .sg_sub_modal_tile { width: 176px; } .import_sgdata_modal_override_only .sg_sub_modal_tile { width: 285px; } .import_sgdata_modal_override_only .sg_sub_modal_tile.merge { display: none; } .import_sgdata_modal i { font-size: 45px !important; margin-left: 6px; } /*tiles generic*/ .sg_sub_modal_tile .Info { float: right; padding-left: 10px; padding-top: 16px; font: 600 17px 'open sans'; color: #545454; text-align: right; } .sg_sub_modal_tile .lblInstruction { font-size: 15px; position: absolute; top: -30px; width: 100%; left: 0px; margin: 0px; text-align: left; padding-left: 7px; padding-top: 4px; font-weight: 500; color: #f9f9f9; transition: all 0.3s cubic-bezier(0.18, 0.89, 0.15, 1.3); transition-delay: .1s; } .sg_sub_modal_tile:hover { border: 1px solid #e3e3e3; } .sg_sub_modal_tile:hover .Info { color: #709E52 !important; } .sg_sub_modal_tile i { font-size: 29px; position: relative; top: 45px; } .sg_sub_modal_tile i.previous::before { display: inline-block; transform: rotate(180deg); } .sg_sub_modal_tile_label { display: block; clear: both; margin-top: 27px; font-size: 16px; } .sg_sub_modal_tile:hover { border: 1px solid #e3e3e3; background-color: #808080 !important; } .sg_sub_modal_tile:hover * { color: #fff !important; } .sg_sub_modal_tile:hover .lblInstruction { color: #fff; top: 7px !important; } .sg_sub_modal_tile:hover [class*=icomoon-] { opacity: 0.1; } .sg_sub_modal_tile.selected { background-color: #cccbcb !important; border: 1px solid #ccc; } /*set styles modal*/ .setstyle_sel_modal_textarea { width: 555px; height: 25px; display: block; padding-top: 8px; } /*setvar as fx modal*/ .setvar_sel_modal { background-color: #fff; width: 910px !important; overflow: hidden; } .setvar_sel_modal { display: block; background-color: #fff; } .setvar_sel_modal_grid { max-height: 500px; overflow: auto; } .setvar_sel_modal .sg_entry_controls { float: left; padding-bottom: 10px; } .setvar_sel_modal .sg_ui_lbl { display: block; margin: 15px 5px 2px 4px; font-weight: 600; font-size: 11px; color: #565656; } .setvar_sel_modal input:not(.sg_ui_cust_id) { font: normal 15px 'open sans'; color: #636363; border: 1px solid #dddddd; width: 118px; height: 29px; background-color: white; cursor: text !important; outline: none; } .setvar_sel_modal select { height: 33px; } .setvar_sel_modal option[value="self"], .setvar_sel_modal option[value="submit"], .setvar_sel_modal .sg_cond_statement_operators { display: none; } .setvar_sel_modal .select2 { width: 365px !important } .setvar_sel_modal .sg_cond_statement_value_input { width: 275px !important; } .setvar_sel_modal .sg_cond_statement { width: 96%; border: none; padding: 7px; cursor: default; } .setvar_sel_modal .sg_commit_controls { margin-left: 5px; } /*#endregion*/ /* #region misc odss and ends */ /* hide global variable related data and options from the u.i. in the template editor */ .sg_wrapper[data-instance-type="template"] .sg_var_global, .sg_wrapper[data-instance-type="template"] .sg_var_behaviour option[value="global"] { display: none; } /*just testing css, nothing platform specific*/ .spencer_buttons { background-color: #6d6c6c; font-size: 15px; font-weight: bolder !important; width: 175px; border-radius: 3px; color: white; padding: 12px; } /* special nodes that contain the contain the script and variable data (Json)*/ sg_data, sg_variable_data { display: none; } /*prescan-prerender container*/ .sg_prescan_hide_content { visibility: hidden; } /* #endregion */ /*------------------------------------------------------------------ [ 5.3.10 ] Student Dashboard Purpose: Styles for Student Dashboard page Location: Dashboard */ /*Calendar styles*/ .dash_Event_Calendar .box .fc-grid .fc-day-number { float: left !important; font-weight: 600; padding: 5px 0 2px 12px; } .dash_Event_Calendar .box .fc-widget-content { border-color: #e5e5e5 } .dash_Event_Calendar .box table.fc-border-separate { border-collapse: collapse } .middlecontent { padding-bottom: 30px; } .box { background-color: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .boxheader { background-color: #eeeeee; background-image: -moz-linear-gradient(top, #f5f5f5, #e7e7e7); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#e7e7e7)); background-image: -webkit-linear-gradient(top, #f5f5f5, #e7e7e7); background-image: -o-linear-gradient(top, #f5f5f5, #e7e7e7); background-image: linear-gradient(to top, #f5f5f5, #e7e7e7); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#e7e7e7', GradientType=0); border-bottom: 1px solid #c5c5c5; padding: 1px 5px 0px 10px; text-align: left; } .boxheader h2 { font-size: 15px; } .box2 { background-color: #eeeeee; border: 2px solid white; text-align: center; padding: 15px 19px; margin-bottom: 10px; } .box2:hover { border-color: #94BB7A; } .box2:hover .icontextsmall, .box2:hover .icontextbig { color: #709E52; } .QuickStats a:hover .Labels, .QuickStats a:hover .SCounter { color: #709E52; } .QuickStats .QuickRow { padding: 5px 2px 1px 2px; border: 2px solid rgba(0, 0, 0, 0); } .QuickStats a:hover .QuickRow { border-color: #709E52; } .boxpadding { padding: 10px; } .icontextbig { font: 55px arial; color: #545454; display: inline-block; min-width: 64px; text-align: right; left: 3px; position: relative; } .icontextsmall { font: 16px arial; color: #545454; width: 47px; display: inline-block; padding-left: 10px; } .boxrow { background-color: #ffffff; padding: 2px 2px; box-sizing: border-box; } .iconplus { font-size: 26px; color: #cf8500; padding-left: 5px; } .viewmore:link, .viewmore:visited, .viewmore:hover { color: #324f63; } .fade { opacity: 0; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .fade.in { opacity: 1; } .collapse { position: relative; height: 0; overflow: hidden; -webkit-transition: height 0.35s ease; -moz-transition: height 0.35s ease; -o-transition: height 0.35s ease; transition: height 0.35s ease; } .collapse.in { height: auto; } .QuickStats .Labels { font: normal 14px sans-serif; color: #757575; } .QuickStats .SCounter { font: normal 25px sans-serif !important; color: #565656; display: inline-block; } .QuickStats .gray { background-color: #EBEBEB; } .QuickIconW-Track { height: 25px; width: 25px; background-image: url(images/NavIcons.png); background-position: -49px -53px; display: inline-table; position: relative; top: 8px; left: -3px; } .QuickIconW-Course { height: 25px; width: 25px; background-image: url(images/NavIcons.png); background-position: -74px -53px; display: inline-table; position: relative; top: 8px; left: -3px; } .QuickIconW-Event { height: 25px; width: 25px; background-image: url(images/NavIcons.png); background-position: -236px -53px; display: inline-table; position: relative; top: 8px; left: -3px; } .QuickStats .QuickIcon-Track { height: 35px; width: 40px; background-image: url(images/quicklink3.png); background-position: -2px -2px; } .QuickStats .QuickIcon-Course { height: 35px; width: 40px; background-image: url(images/quicklink3.png); background-position: -39px -2px; } .QuickStats .QuickIcon-Achivement { height: 35px; width: 40px; background-image: url(images/quicklink3.png); background-position: -84px -2px; } .QuickStats .QuickIcon-Event { height: 35px; width: 40px; background-image: url(images/quicklink3.png); background-position: 41px -2px; } .QuickIcon-LargeTrack { height: 60px; width: 50px; background-image: url(images/DAshMainLink.png); background-position: -61px 7px; background-repeat: no-repeat; } .QuickIcon-LargeCourse { height: 60px; width: 50px; background-image: url(images/DAshMainLink.png); background-position: -121px 7px; background-repeat: no-repeat; } .QuickIcon-LargeEvent { height: 60px; width: 50px; background-image: url(images/DAshMainLink.png); background-position: -242px 7px; background-repeat: no-repeat; } .QuickIcon-LargeAlert { height: 60px; width: 50px; background-image: url(images/DAshMainLink.png); background-position: -384px 7px; background-repeat: no-repeat; } #DashTracks a:hover .CourseName { color: #709E52; } #DashTracks a:hover .boxrow { border-color: #709E52; } #DashTracks a:hover btn2-success { background-color: #47a447; } #DashTracks .boxrow { min-height: 44px; padding-top: 9px; border: 2px solid rgba(0, 0, 0, 0); } #DashTracks a:nth-child(even) .boxrow { background-color: #e7e7e7; } #DashTracks a:nth-child(odd) .boxrow { background-color: #fff; } #DashTracks .CourseName { width: 60%; padding: 5px 0 0 5px; font: normal 13px sans-serif; } #DashTracks .Progressbar { width: 24%; } #DashTracks .Progressbar .ui-progressbar { height: 22px; } #DashTracks .Progressbar .ProgressInnerlbl { margin-top: 3px; margin-left: 55px; font: bold 13px Trebuchet MS,Tahoma,Verdana,Arial,sans-serif; } #DashTracks .Action { width: 8%; font: normal 13px sans-serif; margin-top: -3px; margin-right: 6px; } #DashRecActs .boxrow:nth-child(even) { background-color: #e7e7e7; } #DashRecActs .boxrow:nth-child(odd) { background-color: #fff; } /********** DASHBOARD END *************/ .ulCatalogBrowseTab li > a { text-decoration: none; background-color: rgba(255, 255, 255, 0.66); } .ulCatalogBrowseTab { position: absolute; top: -45px; width: 485px; } .HoverNAv { background-color: #324F63; } .nav .divider-vertical { min-height: 73px; border-right: 1px solid #3B5C74; margin: 0; padding: 0; } /********* NEW DASH CSS END *************/ .dashboard-stat { transition: background-color 0.2s ease; display: block; margin-bottom: 14px; overflow: hidden; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.03); } .middlecontent .dashboard-stat [class*='icomoon-'] { margin-left: -7px; } .dashboard-stat .visual { width: 140px; height: 82px; display: block; float: left; padding-top: 22px; padding-bottom: 3px; padding-left: 10px; margin-bottom: 0px; font-size: 50px; background-color: rgba(0, 0, 0, 0.05); color: #fff; text-align: center; } .dashboard-stat .details { position: relative; right: auto; padding-right: 0px; padding-top: 10px; width: calc(100% - 170px); margin-left: 170px; color: #fff; } .dashboard-stat .details .number { padding-top: 11px; text-align: right; font-size: 34px; line-height: 36px; letter-spacing: -1px; margin-bottom: 0px; font-weight: 600; text-align: center; } .dashboard-stat .details .desc { padding-top: 12px; font-size: 16px; letter-spacing: 0px; font-weight: 300; text-align: center; } .dashboard-stat.Course { background-color: #7ABB3E; } .dashboard-stat.Course:hover { background-color: #6EAB34; } .dashboard-stat.Event { background-color: #EA9A22; } .dashboard-stat.Event:hover { background-color: #CE871D; } .dashboard-stat.Track { background-color: #3598dc; } .dashboard-stat.Track:hover { background-color: #2A88CA; } .small.dashboard-stat { transition: background-color 0.2s ease; display: block; margin-bottom: 22px; overflow: hidden; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.03); background-color: #bbb; } .small.dashboard-stat:hover { background-color: #A5A5A5; } .small.dashboard-stat .visual { transition: background-color 0.2s ease; width: 65px; height: 50px; padding-bottom: 0px; padding-top: 0px; padding-left: 7px; margin-bottom: 0px; font-size: 35px; line-height: 35px; background-color: rgba(0, 0, 0, 0.05); } .small.dashboard-stat .visual i { width: 100%; height: 100%; display: block; background-size: 40%; margin-left: 12px; background-position: center left; } .small.dashboard-stat .details { position: relative; padding-right: 0px; padding-top: 0px; margin-left: 75px; width: calc(100% - 75px); } .dashboard-stat .details .desc { padding-top: 0px; font-size: 16px; letter-spacing: 0px; font-weight: 300; text-align: center; margin-top: 1px; } .stat-ActionNeeded { position: relative; cursor: pointer } /* 1 or 2 active resources */ .catalogResource1 .small.dashboard-stat, .catalogResource2 .small.dashboard-stat { margin-bottom: 62px; } .catalogResource1 .small.dashboard-stat .visual, .catalogResource2 .small.dashboard-stat .visual { height: 110px; } .catalogResource1 .small.dashboard-stat .details, .catalogResource2 .small.dashboard-stat .details { padding-top: 42px; } /* 3 active resources */ .catalogResource3 .small.dashboard-stat { margin-bottom: 22px; } .catalogResource3 .small.dashboard-stat .visual { height: 79px; } .catalogResource3 .small.dashboard-stat .details { padding-top: 29px; } /* 4 active resources */ .catalogResource4 .small.dashboard-stat { margin-bottom: 19px; } .catalogResource4 .small.dashboard-stat .visual { height: 56px; } .catalogResource4 .small.dashboard-stat .details { padding-top: 18px; } /* 5 active resources */ .catalogResource5 .small.dashboard-stat { margin-bottom: 15px; } .catalogResource5 .small.dashboard-stat .visual { height: 44px; } .catalogResource5 .small.dashboard-stat .details { padding-top: 9px; } /* 6 active resources */ .catalogResource6 .small.dashboard-stat { margin-bottom: 7px; } .catalogResource6 .small.dashboard-stat .visual { height: 41px; } .catalogResource6 .small.dashboard-stat .details { padding-top: 8px; } .portlet-title { padding: 15px 20px 10px 20px; border-bottom: 1px solid #eef1f5; font-weight: 600 !important; color: #6c8dae; font-size: 16px; text-align: left; text-transform: capitalize; } .box.dash_Private_Catalog .portlet-title .cheers { -webkit-animation-duration: .5s !important; animation-duration: .3s !important; transform: translateX(0); -webkit-animation-duration: .3s !important; transform: translateX(0); font-size: 14px; font-weight: 500; font-style: initial; text-transform: capitalize; opacity: 0; float: right; margin-top: -39px; margin-right: -7px; cursor: default; } .dash_Private_Catalog:hover .portlet-title .cheers { opacity: 1; animation-name: fadeInDown; } .dash_Private_Catalog .portlet-title .cheers:before { font-family: 'icomoon_EL' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; content: "\eba7"; top: 0px; color: #FBE330; position: relative; left: -3px; } .box .details .detailSection { padding: 10px 20px 20px 20px } .box .details .Action { border-radius: 99px; height: 34px; padding: 0; width: 34px; margin-top: 6px; margin-right: -39px; background-color: #fff; border-color: #FFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1); border-radius: 99px; } .box .details .Action i { color: rgba(110, 137, 162, 0.28); font-size: 21px; top: 6px; position: relative; left: 8px; transition: color .5s ease; } .box .details .detailSection:hover i { color: #bbb; } .box .details .subTitle { color: #3391D2; position: relative; border-bottom: 2px solid #F5F5F5; margin-bottom: 8px; padding-bottom: 2px; margin-top: 5px; margin-right: 50px; font-size: 15px; font-weight: 500; transition: margin 0.6s ease; } .box .details .detailSection:hover .subTitle { margin-right: 45px; } .box .details .detailSection .line { width: 0px; border-bottom: 2px solid #c5c5c5; transition: width .3s ease; height: 0px; position: absolute; margin-top: 2px; } .box .details .detailSection:hover .line { width: 100%; } .box .details .subrow { line-height: 10px; margin-left: 10px; color: #afafaf; font-weight: 500; font-size: 12px; } .box .details .detailSection:hover .subrow { color: #888 } .box .fc-header-title h2 { color: #6c8dae !important; } .box .fc-header-title { margin-top: -5px; margin-bottom: 5px; } /*Leader Board */ .dash_Leader_Board { background-color: white; height: 332px !important; padding-top: 60px !important; box-shadow: none; border: 1px solid #E5E5E5; position: relative; } .dash_Leader_Board:after { font-weight: 600 !important; color: #6c8dae; font-size: 16px; text-align: left; content: attr(data-restitle); color: #212121; position: absolute; top: 20px; left: 20px; } [lang="fr"] [class^="dash_temp_"] .dash_Leader_Board:after { content: "Classement" !important; /* French (France) */ } [lang="fr-CA"] .dash_Leader_Board:after { content: "Classement" !important; /* French Canadian */ } [lang="de-DE"] .dash_Leader_Board:after { content: "Bestenliste" !important; /* German */ } [lang="es-ES"] .dash_Leader_Board:after { content: "Clasificación" !important; /* Spanish */ } .dash_Leader_Board .box .fc-grid .fc-day-number { float: left !important; font-weight: 600; padding: 5px 0px 2px 12px; } .dash_Leader_Board .small.dashboard-stat { margin-bottom: 0; border: 0px; border-radius: 0px; background-color: #ffffff; border-top: 1px solid #f1f3fa; box-shadow: none; cursor: pointer; } .dash_Leader_Board .small.dashboard-stat:hover { background-color: #fafafa; } .dash_Leader_Board .details .desc { color: #212121; text-align: left; padding-left: 0px; font-weight: 500; font-size: 15px !important; text-transform: capitalize; } .dash_Leader_Board .details .desc_Stats_Comp { color: #a0a0a0; font-size: 11px; } .dash_Leader_Board .details .desc:after { font-weight: 600 !important; font-size: 16px; text-align: left; content: attr(data-ranking); color: #212121; position: absolute; right: 20px !important; top: 14px; margin-right: 0px !important; } .dash_Leader_Board .small.dashboard-stat .details { padding-top: 9px; } .dash_Leader_Board .small.dashboard-stat .visual { height: 53px; transition: none; background-color: inherit } .dash_Leader_Board .small.dashboard-stat .visual i { display: block; margin-left: 5px; margin-top: 4px; border-radius: 66px; width: 46px; height: 45px; background-size: cover !important; z-index: 36; background-position: center top !important; } .dash_Leader_Board .cheers { -webkit-animation-duration: .5s !important; animation-duration: .3s !important; transform: translateX(0); -webkit-animation-duration: .3s !important; transform: translateX(0); font-size: 14px; font-weight: 500; font-style: initial; text-transform: capitalize; opacity: 0; float: right; margin-top: -47px; margin-right: 6px; cursor: default; } .dash_Leader_Board:hover .cheers { opacity: 1 !important; animation-name: fadeInDown !important; } /*Leader board adjustment for student side filters */ .dash_Leader_Board[data-widget-style='1'] { padding-top: 37px !important; } .dash_Leader_Board[data-widget-style='1']:after { top: 12px; left: 30px; } .dash_Leader_Board[data-widget-style='1'] .small.dashboard-stat .visual { height: 50px; } .dash_Leader_Board[data-widget-style='1'] .small.dashboard-stat .visual i { width: 43px; height: 43px; } .dash_Leader_Board[data-widget-style='1'] .cheers { margin-top: -28px; } .dash_Leader_Board .leaderboard_point_display:After { content: ' Points'; } /* German */ [lang="de-DE"] .dash_Leader_Board .leaderboard_point_display::after { content: " Punkte"; } /* Spanish (Spain) */ [lang="es-ES"] .dash_Leader_Board .leaderboard_point_display::after { content: " Puntos"; } .dash_Leader_Board .modern-Radiolist label { min-width: 35px !important; } /*Continue Learning Widget */ .dash_ContinueLearning { background-color: white; height: 166px !important; padding-top: 60px !important; box-shadow: none; border: 1px solid #E5E5E5; position: relative; padding: 24px; margin-bottom: 20px !important } .dash_ContinueLearning:after { font-weight: 600 !important; color: #6c8dae; font-size: 16px; text-align: left; content: attr(data-restitle); color: #212121; position: absolute; top: 20px; left: 20px; } [lang="fr"] .dash_ContinueLearning:after { content: "Poursuivre l’apprentissage" !important; /* fr (France) */ } [lang="fr-CA"] .dash_ContinueLearning:after { content: "Continuer à apprendre" !important; /* French Canadian */ } [lang="de-DE"] .dash_ContinueLearning:after { content: "Weiterlernen" !important; /* German (Germany) */ } [lang="es-ES"] .dash_ContinueLearning:after { content: "Continuar aprendiendo" !important; /* Spanish (Spain) */ } .dash_ContinueLearning .Feedback { opacity: 0 !important; animation-name: none !important; -webkit-animation-duration: .5s !important; animation-duration: .3s !important; transform: translateX(0); -webkit-animation-duration: .3s !important; transform: translateX(0); font-size: 14px; font-weight: 500; font-style: initial; opacity: 0; float: right; margin-top: -39px; margin-right: 10px; cursor: default; } .dash_ContinueLearning:hover .Feedback { opacity: 1 !important; animation-name: fadeInDown !important; } .dash_ContinueLearning #LPSource { width: 100% !important; margin: 0px; } .dash_ContinueLearning #LPSource li { height: 39px; margin-top: -1px !important; border: 1px solid #eef1f5 !important; background-color: #ffffff; border-left: 0px solid !important; border-right: 0px solid !important; border-radius: 0px; } .dash_ContinueLearning #LPSource li:hover { background-color: #FAFAFA; } .dash_ContinueLearning #LPSource .MainSection { width: calc(100% - 125px) !important; } .dash_ContinueLearning #LPSource .coursename { width: calc(100% - 65px) !important; margin: 6px 0px 0px 0px; font: normal 12px 'Open Sans' !important; overflow: hidden } .dash_ContinueLearning #LPSource .CoursenameSpan { font-weight: 500; font-size: 13px; margin-top: 5px; } .dash_ContinueLearning #LPSource .statusdivbg { width: 121px; background-color: #fbfcfe; border-left: 2px solid #f1f3fa; } .dash_ContinueLearning #LPSource .BtnAction { display: none } .dash_ContinueLearning #LPSource .ProgressBar { margin-left: 4px; margin-top: 3px; } .dash_ContinueLearning #LPSource .thumImg { margin-top: 3px; } .dash_ContinueLearning .courseList { padding: 0px; } .dash_ContinueLearning .courseList li { height: 34px; margin-top: 8px !important; clear: both; border-bottom: 2px solid #CCC; border: 1px solid #E0E0E0; background-color: #FCFCFC; border-radius: 4px; overflow: hidden; } .dash_ContinueLearning .courseList .MainSection { float: left; } .dash_ContinueLearning .courseList .statusdivbg { float: left; width: 211px; font-size: 12px; background-color: #FAFAFA; height: 40px; border-left: 2px solid #f1f1f1; margin-left: 1px; } .dash_ContinueLearning .courseList .coursename { width: 622px; margin: 6px 5px 0px 4px; font: normal 15px 'Open Sans', sans-serif; color: #696969; font-weight: 600; } .dash_ContinueLearning .courseList .CoursenameSpan { width: 577px; height: 22px; overflow: hidden; padding-left: 10px; font: normal 15px 'Open Sans', sans-serif; color: #696969; font-weight: 600; } .dash_ContinueLearning .courseList .borderstyle1 { border: 0px solid #cccccc; } .dash_ContinueLearning .courseList .devider2 { display: none; } .dash_ContinueLearning .courseList .thumImgDiv { width: 60px; text-align: center; height: 37px; overflow: hidden; } .dash_ContinueLearning .courseList .thumImg { max-height: 34px; max-width: 63px; float: left; } .dash_ContinueLearning .courseList .ProgressBar { width: 100px; height: 19px; margin-left: 28px; margin-top: 3px; border: 0; background-color: rgba(221,221,221,0) !important; border-bottom: 1px solid #b1b1b1 !important; border-radius: 0; position: relative; overflow: visible } .dash_ContinueLearning .courseList .ProgressInnerlbl { position: absolute; margin-top: 0px; margin-left: 40px; z-index: 1; text-shadow: 0px 1px 2px #FFF; font-size: 11px; font-weight: normal; } .dash_ContinueLearning .courseList .margintopFlexible { margin-top: 4px; } .dash_ContinueLearning .courseList li:hover .coursename { color: #555555; } .dash_ContinueLearning .courseList li:hover { border: 1px solid #bfbfbf; } /*.dash_CLASSIC */ .dashboard_classic .dash_Leader_Board { padding-top: 42px !important; height: 280px !important; } .dashboard_classic .dash_Leader_Board:after { color: #6c8dae !important; top: 12px !important; } .dashboard_classic .dash_Leader_Board .small.dashboard-stat .visual { height: 46px; } .dashboard_classic .dash_Leader_Board .small.dashboard-stat .visual i { margin-top: 4px; width: 38px; height: 38px; } .dashboard_classic .dash_Leader_Board .small.dashboard-stat .details { padding-top: 4px; } .dashboard_classic .dash_Private_Catalog { height: 280px; } .dashboard_classic .cheers { display: none } /*.dash_temp_1 */ /* Header */ #MyBody.dash_temp_1 { background-color: #f8f8f8; } .dash_temp_1 header { background-color: #4193CF; box-shadow: 0 1px 3px 0 rgba(156,156,156,.3); position: relative; } .dash_temp_1 header.CompactView { position: fixed; left: unset !important; margin-left: 0px !important; width: 100% } .dash_temp_1 .toplinks.helpMenu.icomoon-question-circle, .dash_temp_1 .pc-icon .pc-icon-icomoon { color: rgba(255, 255, 255, 0.91); } .dash_temp_1 header .TopLinkActions .LknAdminContainer { margin: 0px !important; padding: 0px !important; border-width: 0px !important; margin-right: -20px !important; } .dash_temp_1 header .TopLinkActions .LknAdmin { padding: 8px 4px; font-size: 12px; margin-left: 20px } .dash_temp_1 .widget-socials .puserborder { border-width: 0px !important; } .dash_temp_1 .widget-socials .widget-social-subtitle { color: #212121; font-weight: 500; font-size: 25px; } .dash_temp_1.dash_temp_3 .widget-socials .widget-social-subtitle { font-size: 30px; } .dash_temp_1 .widget-socials .primary-user { height: 95px; margin-left: 48px; } .dash_temp_1 .widget-socials .primary-user:after, .dash_temp_1 .widget-socials .primary-user:before { color: #969696 !important; } .dash_temp_1 .widget-socials .primary-user:before { bottom: -33px; left: 3px; } .dash_temp_1 .widget-socials .primary-user:after { top: 16px; left: 16px; } .dash_temp_1 .widget-socials .primary-user:hover:before { text-shadow: none !important; } .dash_temp_1 .widget-socials .primary-user-stats a:before { color: #20C17E; } .dash_temp_1 .widget-socials .primary-user-stats a { color: #969696; } /* Header NAV */ .TopLinkActions .nav, .dash_temp_1 nav #BlankThemeBody_HiddenForPublic { display: none } .dashboard .TopLinkActions .nav { display: block; margin-top: 0; } .dashboard .TopLinkActions .nav li { float: left; margin-right: 14px; text-transform: uppercase; height: 26px; } .dash_temp_1 .TopLinkActions .nav { display: block; } .dash_temp_1 .TopLinkActions .nav { display: block; margin-top: 0px } .dash_temp_1 .TopLinkActions .nav li { float: left; margin-right: 14px; text-transform: uppercase; height: 26px; } .dash_temp_1 .TopLinkActions .nav li:last-child { margin-right: 0px; } .dash_temp_1 .TopLinkActions .nav li:hover, .dash_temp_1 .TopLinkActions .nav li:active { background-color: none !important; background-color: rgba(255, 255, 255, 0) !important; border-bottom: 3px solid rgba(255, 255, 255, 0.6); padding-bottom: 9px; } .dash_temp_1 header.CompactView .nav li:hover, .dash_temp_1 header.CompactView .nav li:active { padding-bottom: 2px; } .dash_temp_1 header.CompactView .TopLinkActions .nav li.dashboard { display: none } .dash_temp_1 header.CompactView .TopLinkActions { margin-left: -40px } .dash_temp_1 .TopLinkActions .nav li.HoverNAv { background-color: none !important; background-color: rgba(255, 255, 255, 0) !important; border-bottom: 3px solid #fff; padding-bottom: 9px; } .dash_temp_1 .TopLinkActions .nav li a { color: #fff !important; padding-bottom: 17px; } /*Top Nav*/ .dash_temp_1 .StudentTopNAV { background-color: #ffffff !important; box-shadow: 0px 3px 1px -2px #d0d0d0; min-height: 0px } /*Stats*/ .dash_temp_1 .largeTileStat .dashboard-stat { background-image: url(/App_Themes/Images/1x1_fff.png); background-color: #3598dc; box-shadow: none; border: 1px solid #E5E5E5; } .dash_temp_1 .largeTileStat:Hover .dashboard-stat { background-image: url(/App_Themes/Images/1x1_FFF80.png); background-color: #3598dc; } .dash_temp_1 .largeTileStat .dashboard-stat .visual { float: right; width: 110px; background-image: none; background-color: inherit; } .dash_temp_1 .largeTileStat .dashboard-stat .details { margin-left: 0px; text-align: left; } .dash_temp_1 .largeTileStat .dashboard-stat .details .desc { color: #212121; text-transform: uppercase; font-size: 14px; text-align: left; padding-left: 24px; padding-top: 5px; FONT-WEIGHT: 600; } .dash_temp_1 .largeTileStat .dashboard-stat .details .number { color: #20c17e; font-size: 45px; font-weight: 300; text-align: left; padding-left: 20px; } @media (max-width: 979px) { .dashboard-stat .details { margin-left: 0px; } .dashboard-stat .desc { font-size: 11px !important; } } /*Catalog*/ .dash_temp_1 .dash_Private_Catalog { height: 332px } .dash_temp_1 .dash_Private_Catalog .portlet-title { padding: 20px 20px 20px 20px; color: #212121; } .dash_temp_1 .dash_Private_Catalog .details .subTitle { color: #212121; border-bottom-width: 0px; margin-top: 0px; margin-bottom: 4px; } .dash_temp_1 .box .details { transition: background-color 0.2s ease; } .dash_temp_1 .box .details .detailSection { padding: 26px 20px 26.2px 20px; } .dash_temp_1 .dash_Private_Catalog .details .subrow { margin-left: 0px; } .dash_temp_1 .dash_Private_Catalog .details .line { display: none; } .dash_temp_1 .dash_Private_Catalog .details .Action { margin-top: 0px; box-shadow: none; background-color: unset; } .dash_temp_1 .dash_Private_Catalog .details .Action .icomoon-play4:before { content: '\e966'; color: #adadad; font-size: 14px; } .dash_temp_1 .box .details > div:nth-child(odd) { background-color: #FAFAFA; } .dash_temp_1 .box .details > div:hover { background-color: #f1f1f1; } .dash_temp_1 .box { box-shadow: none; border: 1px solid #E5E5E5; } .dash_Private_Catalog_Container .box .details > div { height: 88.5px; } .dash_temp_1 .dash_Event_Calendar .box { padding-top: 27px !important; box-shadow: none; border: 1px solid #E5E5E5; } .dash_temp_1 .dash_Private_Catalog:hover .portlet-title .cheers:before { color: #20c17e; } /* Calendar*/ .dash_temp_1 .dash_Event_Calendar .box td.fc-header-right { padding-top: 44px; } .dash_temp_1 .dash_Event_Calendar .box .fc-header-title h2 { color: #212121 !important; } .dash_temp_1 .dash_Event_Calendar .box .fc-widget-content { border-color: #e5e5e5; } .dash_temp_1 .dash_Event_Calendar .box table.fc-border-separate { border-collapse: collapse; } .dash_temp_1 .dash_Event_Calendar .box .fc-day-header { background-color: #ffffff; border: 1px solid #ffffff; border-bottom-color: #e5e5e5; font-size: 11px; line-height: 16px; text-align: left; padding-left: 10px; } .dash_Event_Calendar .box .CompactEvent { background-color: rgba(229, 229, 229, 0.38) !important; text-align: left; padding: 7px 0px 0px 10px !important; margin-top: -29px; margin-right: -4px; font-size: 0px; box-shadow: inset 14px -2px 0 -6px #30c588; } .dash_temp_1 .dash_Event_Calendar .box .CompactEvent { box-shadow: inset 14px -2px 0 -6px #3598dc; } /*Resource */ .dash_temp_1 .dash_Resouerce_List { background-color: white; height: 332px !important; padding-top: 60px !important; box-shadow: none; border: 1px solid #E5E5E5; position: relative; } .dash_temp_1 .dash_Resouerce_List:after { font-weight: 600 !important; color: #6c8dae; font-size: 16px; text-align: left; content: attr(data-restitle); color: #212121; position: absolute; top: 20px; left: 20px; } [lang="fr"] [class*="dash_temp_"] .dash_Resouerce_List:after { content: "Ressource" !important; /* French (France) */ } [lang="fr-CA"] [class*="dash_temp_"] .dash_Resouerce_List:after { content: "Ressource" !important; /* French Canadian */ } [lang="de-DE"] [class*="dash_temp_"] .dash_Resouerce_List:after { content: "Ressource" !important; /* German */ } [lang="es-ES"] [class*="dash_temp_"] .dash_Resouerce_List:after { content: "Recurso" !important; /* Spanish */ } .dash_temp_1 .dash_Event_Calendar .box .fc-grid .fc-day-number { float: left !important; font-weight: 600; padding: 5px 0px 2px 12px; } .dash_temp_1 .dash_Resouerce_List .small.dashboard-stat { margin-bottom: 0; border: 0px; border-radius: 0px; background-color: #ffffff; border-top: 1px solid #f1f3fa; } .dash_temp_1 .dash_Resouerce_List .small.dashboard-stat:hover, .dash_temp_1 .dash_Resouerce_List .small.dashboard-stat:hover .visual { background-color: #f1f1f1; } .dash_temp_1 .dash_Resouerce_List a:nth-child(odd) .small { background-color: #FAFAFA; } .dash_temp_1 .dash_Resouerce_List .small.dashboard-stat .visual { background-color: #ffffff; } .dash_temp_1 .dash_Resouerce_List a:nth-child(odd) .small .visual { background-color: #FAFAFA; } .dash_temp_1 .dash_Resouerce_List .details .desc { color: #212121; text-align: left; padding-left: 0px; font-weight: 500; font-size: 14px !important } .dash_temp_1 .dash_Resouerce_List .visual i { background-size: 40% !important; } .dash_temp_1 .dash_Resouerce_List .visual .icon-info { background: url(../images/Controls/icons/icon-Info_thumb.png) no-repeat 3px; } .dash_temp_1 .dash_Resouerce_List .visual .icon-Clip { background: url(../images/Controls/icons/icon-Clip_thumb.png) no-repeat 3px; } .dash_temp_1 .dash_Resouerce_List .visual .icon-Home { background: url(../images/Controls/icons/icon-Home_thumb.png) no-repeat 2px; } .dash_temp_1 .dash_Resouerce_List .visual .icon-MagGlass { background: url(../images/Controls/icons/icon-MagGlass_thumb.png) no-repeat 3px 26px; } .dash_temp_1 .dash_Resouerce_List .visual .icon-Sign { background: url(../images/Controls/icons/icon-Sign_thumb.png) no-repeat 3px 20px; } .dash_temp_1 .dash_Resouerce_List .visual .icon-Stack { background: url(../images/Controls/icons/icon-Stack_thumb.png) no-repeat 3px; } .dash_temp_1 .dash_Resouerce_List .visual .icon-Video { background: url(../images/Controls/icons/icon-Video_thumb.png) no-repeat 3px; } .dash_temp_1 .dash_Resouerce_List .visual .icon-Book { background: url(../images/Controls/icons/icon-Book_thumb.png) no-repeat 3px 9px; } .dash_temp_1 .dash_Resouerce_List .visual .icon-Link { background: url(../images/Controls/icons/icon-Link_thumb.png) no-repeat 3px; } /*Resource 1 OR 2 ITems*/ .dash_temp_1 .catalogResource1 .small.dashboard-stat .details, .dash_temp_1 .catalogResource2 .small.dashboard-stat .details { padding-top: 56px; } .dash_temp_1 .catalogResource1 .small.dashboard-stat .visual, .dash_temp_1 .catalogResource2 .small.dashboard-stat .visual { height: 134px; } .dash_temp_1 .catalogResource1 .visual i, .dash_temp_1 .catalogResource2 .visual i { background-position-y: 50px !important; } /*Resource 3ITems*/ .dash_temp_1 .catalogResource3 .small.dashboard-stat .details { padding-top: 31px; } .dash_temp_1 .catalogResource3 .small.dashboard-stat .visual { height: 89px; } /*Resource 4 ITems*/ .dash_temp_1 .catalogResource4 .small.dashboard-stat .details { padding-top: 25px; } .dash_temp_1 .catalogResource4 .small.dashboard-stat .visual { height: 66px; } /*Resource 5 ITems*/ .dash_temp_1 .catalogResource5 .small.dashboard-stat .details { padding-top: 15px; } .dash_temp_1 .catalogResource5 .small.dashboard-stat .visual { height: 53px; } .dash_temp_1 .catalogResource5 .visual .icon-Sign, .dash_temp_1 .catalogResource5 .visual .icon-MagGlass { background-position-y: 10px !important; } /*Resource 6 ITems*/ .dash_temp_1 .catalogResource6 .small.dashboard-stat .details { padding-top: 11px; } .dash_temp_1 .catalogResource6 .small.dashboard-stat .visual { height: 44px; } .dash_temp_1 .catalogResource6 .visual .icon-Sign, .dash_temp_1 .catalogResource6 .visual .icon-MagGlass { background-position-y: 10px !important; } .dash_temp_1 #TopStudentmenuShort .dashboard { background-color: #4193CF !important; } .dash_temp_1 nav.StudentNavCompactView { display: block } .dash_temp_2 .dash_Leader_Board { margin-left: 0px !important } /*.dash_temp_2 */ /* Header */ .dash_temp_2 #wrapper .container.paddingbottom60 { padding-bottom: 20px !important; } /* remove scrll bar for low res screens*/ #MyBody.dash_temp_2 { background-color: #f8f8f8; } .dash_temp_2 header { background-color: #4193CF; box-shadow: 0 1px 3px 0 rgba(156,156,156,.3); position: relative; } .dash_temp_2 header.CompactView { position: fixed; left: unset !important; margin-left: 0px !important; width: 100% } .dash_temp_2 .toplinks.helpMenu.icomoon-question-circle, .dash_temp_2 .pc-icon .pc-icon-icomoon { color: rgba(255, 255, 255, 0.91); } .dash_temp_2 .icomoon-user.toplinks { font-family: 'Open Sans' !important; background-color: #ffffff4a; font-size: 14px; padding: 4px; line-height: normal !important; color: #ffffff; border-radius: 100px; margin-left: 10px; width: 19px; text-align: center; HEIGHT: 19PX; text-transform: uppercase; } .dash_temp_2 .icomoon-user.toplinks:before { content: attr(data-init); } .dash_temp_2 .icomoon-user.toplinks:after { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #ffffff; content: ''; position: absolute; margin-top: 9px; margin-left: 8px; } .dash_temp_2 header .TopLinkActions .LknAdmin { padding: 8px 4px; font-size: 12px; } .dash_temp_2 .widget-socials .puserborder { border-width: 0px !important; } .dash_temp_2 .widget-socials .widget-social-subtitle { color: #212121; font-weight: 500; font-size: 25px; } .dash_temp_2 .widget-socials .primary-user:after, .dash_temp_2 .widget-socials .primary-user:before { color: #969696 !important; } .dash_temp_2 .widget-socials .primary-user:before { bottom: -33px; left: 3px; } .dash_temp_2 .widget-socials .primary-user:after { top: 16px; left: 16px; } .dash_temp_2 .widget-socials .primary-user:hover:before { text-shadow: none !important; } .dash_temp_2 .widget-socials .primary-user-stats a:before { color: #20C17E; } .dash_temp_2 .widget-socials .primary-user-stats a { color: #969696; } /* Header NAV */ .dash_temp_2 nav #BlankThemeBody_HiddenForPublic { display: none } .dash_temp_2 .TopLinkActions .nav { display: block; } .dash_temp_2 .TopLinkActions .nav { display: block; margin-top: 0px; padding-left: 20px; } .dash_temp_2 .TopLinkActions .nav li { float: left; margin-right: 14px; text-transform: uppercase; height: 26px; } .dash_temp_2 .TopLinkActions .nav li:last-child { margin-right: 0px; } .dash_temp_2 .TopLinkActions .nav li:hover, .dash_temp_2 .TopLinkActions .nav li:active { background-color: none !important; background-color: rgba(255, 255, 255, 0) !important; border-bottom: 3px solid rgba(255, 255, 255, 0.6); padding-bottom: 9px; } .dash_temp_2 header.CompactView .nav li:hover, .dash_temp_2 header.CompactView .nav li:active { padding-bottom: 2px; } .dash_temp_2 header.CompactView .TopLinkActions .nav li.dashboard { display: none } .dash_temp_2 header.CompactView .TopLinkActions { margin-left: -40px } .dash_temp_2 .TopLinkActions .nav li.HoverNAv { background-color: none !important; background-color: rgba(255, 255, 255, 0) !important; border-bottom: 3px solid #fff; padding-bottom: 9px; } .dash_temp_2 .TopLinkActions .nav li a { color: #fff !important; padding-bottom: 17px; font-size: 17px; } /*Top Nav*/ .dash_temp_2 .StudentTopNAV { background-color: #ffffff !important; box-shadow: 0px 3px 1px -2px #d0d0d0; min-height: 0px } /*Stats*/ .dash_temp_2 .topDashInfo { position: relative; height: 280px; margin-left: 0px; display: block; margin-right: -0px; overflow: hidden; border-bottom: 1px solid #E5E5E5; background-color: #FBFCFE; } .dash_temp_2 .topDashInfo a { width: 50%; display: inline-block; margin: 0px; text-align: center } .dash_temp_2 .topDashInfo a:Hover { background-color: #F1F7FC; } .dash_temp_2 .topDashInfo a .dashboard-stat { margin-bottom: 0px; height: 200px; box-shadow: none; border: 1px solid #E5E5E5; } .dash_temp_2 .topDashInfo a .visual { display: none } .dash_temp_2 .topDashInfo a .details { width: 100% !important; padding-top: 95px } .dash_temp_2 .topDashInfo a .details .desc { color: #212121; text-transform: uppercase; font-size: 17px; FONT-WEIGHT: 600; background-color: unset !important; } .dash_temp_2 .topDashInfo a .details .number { color: #20c17e; font-size: 80px; font-weight: 300; text-align: center; padding-top: 0px; padding-bottom: 55px; background-color: unset !important; } .dash_temp_2 .topDashInfo a.dash_Combined_Assignment_Count .details .number { border-left: 1px solid #E5E5E5; } @media (max-width: 979px) { .dashboard-stat .details { margin-left: 0px; } .dashboard-stat .desc { font-size: 11px !important; } } /*Catalog*/ .dash_temp_2 .dash_Private_Catalog { padding: 0px 0px 10px 0px; position: relative; margin-bottom: 20px !important; } .dash_temp_2 .dash_Private_Catalog .cheers { opacity: 0 !important; animation-name: none !important; margin-top: -7px !important; -webkit-animation-duration: .5s !important; animation-duration: .3s !important; transform: translateX(0); -webkit-animation-duration: .3s !important; transform: translateX(0); font-size: 14px; font-weight: 500; font-style: initial; text-transform: capitalize; opacity: 0; float: right; margin-top: -39px; margin-right: -7px; cursor: default; } .dash_temp_2 .dash_Private_Catalog_Container:hover .portlet-title .cheers { opacity: 1 !important; animation-name: fadeInDown !important; } .dash_temp_2 .dash_Private_Catalog:hover .portlet-title .cheers:before { color: #20c17e; } .dash_temp_2 .dash_Private_Catalog .portlet-title { padding: 29px 20px 29px 20px; color: #212121; text-transform: uppercase; } .dash_temp_2 .dash_Private_Catalog .details .subTitle { color: #212121; border-bottom-width: 0px; margin-top: 0px; margin-bottom: 4px; } .dash_temp_2 .box .details { transition: background-color 0.2s ease; } .dash_temp_2 .box .details .detailSection { padding: 39px 20px 39px 20px } .dash_temp_2 .dash_Private_Catalog .details .subrow { margin-left: 0px; } .dash_temp_2 .dash_Private_Catalog .details .line { display: none; } .dash_temp_2 .dash_Private_Catalog .details .Action { margin-top: 0px; box-shadow: none; background-color: unset; } .dash_temp_2 .dash_Private_Catalog .details .Action .icomoon-play4:before { content: '\e966'; color: #adadad; font-size: 14px; } .dash_temp_2 .box .details > div:hover { background-color: #FAFAFA; } .dash_temp_2 .box { box-shadow: none; border: 1px solid #E5E5E5; } .dash_temp_2 .dash_Event_Calendar { margin-bottom: 20px } .dash_temp_2 .dash_Event_Calendar .box { height: 300px !important; padding-top: 27px !important; box-shadow: none; border: 1px solid #E5E5E5; padding-left: 20px; padding-right: 20px; } /* Calendar*/ .dash_temp_2 .dash_Event_Calendar .box td.fc-header-right { padding-top: 35px; } .dash_temp_2 .dash_Event_Calendar .box .fc-header-title h2 { color: #212121 !important; text-transform: uppercase; } .dash_temp_2 .dash_Event_Calendar .box .fc-widget-content { border-color: #e5e5e5; } .dash_temp_2 .dash_Event_Calendar .box table.fc-border-separate { border-collapse: collapse; } .dash_temp_2 .dash_Event_Calendar .box .fc-day-header { background-color: #ffffff; border: 1px solid #ffffff; border-bottom-color: #e5e5e5; font-size: 11px; line-height: 16px; text-align: left; padding-left: 10px; } /* Leader Board*/ .dash_temp_2 .dash_Leader_Board { padding: 24px; } .dash_temp_2 .dash_Leader_Board:after { text-transform: uppercase } .dash_temp_2 .dash_ContinueLearning:after { text-transform: uppercase } /*Resource */ .dash_temp_2 .dash_Resouerce_List { margin-left: 0px !important; background-color: white; padding-top: 60px !important; box-shadow: none; border: 1px solid #E5E5E5; position: relative; padding: 24px; min-height: 280px; } .dash_temp_2 .dash_Resouerce_List:after { font-weight: 600 !important; color: #6c8dae; font-size: 16px; text-align: left; content: attr(data-restitle); color: #212121; position: absolute; top: 20px; left: 25px; text-transform: uppercase; } .dash_temp_2 .dash_Event_Calendar .box .fc-grid .fc-day-number { float: left !important; font-weight: 600; padding: 5px 0px 2px 12px; } .dash_temp_2 .dash_Resouerce_List .small.dashboard-stat { margin-bottom: 0; border: 0px; border-radius: 0px; background-color: #ffffff; border-top: 1px solid #f1f3fa; box-shadow: none; } .dash_temp_2 .dash_Resouerce_List .small.dashboard-stat:hover, .dash_temp_2 .dash_Resouerce_List .small.dashboard-stat:hover .visual { background-color: #fAFAFA; } .dash_temp_2 .dash_Resouerce_List .small.dashboard-stat .visual { background-color: #ffffff; } .dash_temp_2 .dash_Resouerce_List .details .desc { color: #212121; text-align: left; padding-left: 0px; font-weight: 500; font-size: 14px !important; background-color: rgba(255, 255, 255, 0) !important; } .dash_temp_2 .dash_Resouerce_List .visual i { background-size: 40% !important; } .dash_temp_2 .dash_Resouerce_List .visual .icon-info { background: url(../images/Controls/icons/icon-Info_thumb.png) no-repeat 3px; } .dash_temp_2 .dash_Resouerce_List .visual .icon-Clip { background: url(../images/Controls/icons/icon-Clip_thumb.png) no-repeat 3px; } .dash_temp_2 .dash_Resouerce_List .visual .icon-Home { background: url(../images/Controls/icons/icon-Home_thumb.png) no-repeat 2px; } .dash_temp_2 .dash_Resouerce_List .visual .icon-MagGlass { background: url(../images/Controls/icons/icon-MagGlass_thumb.png) no-repeat 3px } .dash_temp_2 .dash_Resouerce_List .visual .icon-Sign { background: url(../images/Controls/icons/icon-Sign_thumb.png) no-repeat 3px; } .dash_temp_2 .dash_Resouerce_List .visual .icon-Stack { background: url(../images/Controls/icons/icon-Stack_thumb.png) no-repeat 3px; } .dash_temp_2 .dash_Resouerce_List .visual .icon-Video { background: url(../images/Controls/icons/icon-Video_thumb.png) no-repeat 3px; } .dash_temp_2 .dash_Resouerce_List .visual .icon-Book { background: url(../images/Controls/icons/icon-Book_thumb.png) no-repeat 3px; } .dash_temp_2 .dash_Resouerce_List .visual .icon-Link { background: url(../images/Controls/icons/icon-Link_thumb.png) no-repeat 3px; } .dash_temp_2 .dash_Resouerce_List .details .desc:after { content: '\e966'; color: #adadad; font-size: 14px !important; background-color: rgba(255, 255, 255, 0) !important; font-family: 'icomoon_EL' !important; speak: none; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; margin-top: 3px; right: 20px; transition: right .3s; } .dash_temp_2 .dashboard-stat:hover .details .desc:after { right: 15px } /*Resource 1 OR 2 ITems*/ .dash_temp_2 .catalogResource1 .small.dashboard-stat .details, .dash_temp_2 .catalogResource2 .small.dashboard-stat .details { padding-top: 56px; } .dash_temp_2 .catalogResource1 .small.dashboard-stat .visual, .dash_temp_2 .catalogResource2 .small.dashboard-stat .visual { height: 134px; } .dash_temp_2 .catalogResource1 .visual i, .dash_temp_2 .catalogResource2 .visual i { background-position-y: 50px !important; } /*Resource 3ITems*/ .dash_temp_2 .catalogResource3 .small.dashboard-stat .details { padding-top: 31px; } .dash_temp_2 .catalogResource3 .small.dashboard-stat .visual { height: 89px; } /*Resource 4 ITems*/ .dash_temp_2 .catalogResource4 .small.dashboard-stat .details { padding-top: 25px; } .dash_temp_2 .catalogResource4 .small.dashboard-stat .visual { height: 66px; } /*Resource 5 ITems*/ .dash_temp_2 .catalogResource5 .small.dashboard-stat .details { padding-top: 15px; } .dash_temp_2 .catalogResource5 .small.dashboard-stat .visual { height: 53px; } .dash_temp_2 .catalogResource5 .visual .icon-Sign, .dash_temp_2 .catalogResource5 .visual .icon-MagGlass { background-position-y: 10px !important; } /*Resource 6 ITems*/ .dash_temp_2 .catalogResource6 .small.dashboard-stat .details { padding-top: 11px; } .dash_temp_2 .catalogResource6 .small.dashboard-stat .visual { height: 44px; } .dash_temp_2 .catalogResource6 .visual .icon-Sign, .dash_temp_2 .catalogResource6 .visual .icon-MagGlass { background-position-y: 10px !important; } .dash_temp_2 #TopStudentmenuShort .dashboard { background-color: #4193CF !important; } .dash_temp_2 nav.StudentNavCompactView { display: block } /* end FIX old Dash*/ .MainBodyContent a { text-decoration: none; cursor: pointer; outline: none; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; } /*remove mentor feautures from orgChart admins side since js dis not loaded. */ .dashboard #divReportingChartModalBody > .chart-menu [data-item="nodeAction1"], .dashboard #divReportingChartModalBody > .chart-menu [data-item="nodeAction2"], .dashboard #divReportingChartModalBody > .chart-menu [data-item="nodeAction3"] { display: none } /* MOBILE STUFF TO MORE TO CORE ASPIRE !!! */ #MyBody form[action="./resource?isMobile=1"] form { display: none; } /* MOBILE STUFF TO MORE TO CORE ASPIRE !!! */ @charset "UTF-8"; /*! * http://daneden.me/animate * Version - 3.5.0 * Licensed under the MIT license - http://opensource.org/licenses/MIT * Animation DDL Attention Seekers: bounce flash pulse rubberBand shake swing tada Bouncing Entrances: bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp Fading Entrances: fadeIn FadeInZoom fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig Flippers: flipInX flipInY Rotating Entrances: rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight Sliding Entrances: slideInUp slideInDown slideInLeft slideInRight stretch Entrances: stretchUp stretchDown stretchLeft stretchRight slideInUpstretch growUp Zoom Entrances: zoomIn zoomInDown zoomInUp zoomInLeft zoomInRight */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } /* strechUp */ .stretchUp { animation-name: stretchUp; -webkit-animation-name: stretchUp; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes stretchUp { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes stretchUp { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* stretchDown */ .stretchDown { animation-name: stretchDown; -webkit-animation-name: stretchDown; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; } @keyframes stretchDown { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes stretchDown { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* stretchLeft */ .stretchLeft { animation-name: stretchLeft; -webkit-animation-name: stretchLeft; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } @keyframes stretchLeft { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchLeft { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /* stretchRight */ .stretchRight { animation-name: stretchRight; -webkit-animation-name: stretchRight; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; } @keyframes stretchRight { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchRight { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /* slideInUpstretch */ .slideInUpstretch { animation-name: slideInUpstretch; -webkit-animation-name: slideInUpstretch; animation-duration: 1.3s; -webkit-animation-duration: 1.3s; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } @keyframes slideInUpstretch { 0% { transform: translateY(100%) scaleX(0.5); } 30% { transform: translateY(-8%) scaleX(0.5); } 40% { transform: translateY(2%) scaleX(0.5); } 50% { transform: translateY(0%) scaleX(1.1); } 60% { transform: translateY(0%) scaleX(0.9); } 70% { transform: translateY(0%) scaleX(1.05); } 80% { transform: translateY(0%) scaleX(0.95); } 90% { transform: translateY(0%) scaleX(1.02); } 100% { transform: translateY(0%) scaleX(1); } } @-webkit-keyframes slideInUpstretch { 0% { -webkit-transform: translateY(100%) scaleX(0.5); } 30% { -webkit-transform: translateY(-8%) scaleX(0.5); } 40% { -webkit-transform: translateY(2%) scaleX(0.5); } 50% { -webkit-transform: translateY(0%) scaleX(1.1); } 60% { -webkit-transform: translateY(0%) scaleX(0.9); } 70% { -webkit-transform: translateY(0%) scaleX(1.05); } 80% { -webkit-transform: translateY(0%) scaleX(0.95); } 90% { -webkit-transform: translateY(0%) scaleX(1.02); } 100% { -webkit-transform: translateY(0%) scaleX(1); } } /* fadeInZoom */ .fadeInZoom { animation-name: fadeInZoom; -webkit-animation-name: fadeInZoom; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } @keyframes fadeInZoom { 0% { transform: scale(0); opacity: 0.0; } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeInZoom { 0% { -webkit-transform: scale(0); opacity: 0.0; } 60% { -webkit-transform: scale(1.1); } 80% { -webkit-transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } } /* Grow */ .growUp { animation-name: growUp; -webkit-animation-name: growUp; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes growUp { 0% { transform: rotate(0deg) scaleY(0.6); } 20% { transform: rotate(-2deg) scaleY(1.05); } 35% { transform: rotate(2deg) scaleY(1); } 50% { transform: rotate(-2deg); } 65% { transform: rotate(1deg); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } } @-webkit-keyframes growUp { 0% { -webkit-transform: rotate(0deg) scaleY(0.6); } 20% { -webkit-transform: rotate(-2deg) scaleY(1.05); } 35% { -webkit-transform: rotate(2deg) scaleY(1); } 50% { -webkit-transform: rotate(-2deg); } 65% { -webkit-transform: rotate(1deg); } 80% { -webkit-transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0deg); } } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } @keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } .pulse_large { opacity: 1; animation-iteration-count: infinite; -webkit-animation-name: pulse_large; animation-name: pulse_large; -webkit-animation-duration: 1s; animation-duration: 1s; } @-webkit-keyframes pulse_large { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse_large { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDownRight { 40% { opacity: 1; -webkit-transform: scale3d(.375, .375, .375) translate3d(200px, -60px, 0); transform: scale3d(.375, .375, .375) translate3d(200px, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutDownRight { 40% { opacity: 1; -webkit-transform: scale3d(.375, .375, .375) translate3d(200px, -60px, 0); transform: scale3d(.375, .375, .375) translate3d(200px, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDownRight { -webkit-animation-name: zoomOutDownRight; animation-name: zoomOutDownRight; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /* #region https://www.minimamente.com/project/magic/ */ .spaceInLeft { -webkit-animation-name: spaceInLeft; animation-name: spaceInLeft; } @-webkit-keyframes spaceInLeft { 0% { opacity: 0; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale(0.2) translate(-200%, 0%); transform: scale(0.2) translate(-200%, 0%); } 100% { opacity: 1; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale(1) translate(0%, 0%); transform: scale(1) translate(0%, 0%); } } @keyframes spaceInLeft { 0% { opacity: 0; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale(0.2) translate(-200%, 0%); transform: scale(0.2) translate(-200%, 0%); } 100% { opacity: 1; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale(1) translate(0%, 0%); transform: scale(1) translate(0%, 0%); } } .spaceInRight { -webkit-animation-name: spaceInRight; animation-name: spaceInRight; } @-webkit-keyframes spaceInRight { 0% { opacity: 0; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale(0.2) translate(200%, 0%); transform: scale(0.2) translate(200%, 0%); } 100% { opacity: 1; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale(1) translate(0%, 0%); transform: scale(1) translate(0%, 0%); } } @keyframes spaceInRight { 0% { opacity: 0; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale(0.2) translate(200%, 0%); transform: scale(0.2) translate(200%, 0%); } 100% { opacity: 1; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale(1) translate(0%, 0%); transform: scale(1) translate(0%, 0%); } } .spaceOutLeft { -webkit-animation-name: spaceOutLeft; animation-name: spaceOutLeft; } @-webkit-keyframes spaceOutLeft { 0% { opacity: 1; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale(1) translate(0%, 0%); transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale(0.2) translate(-200%, 0%); transform: scale(0.2) translate(-200%, 0%); } } @keyframes spaceOutLeft { 0% { opacity: 1; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale(1) translate(0%, 0%); transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale(0.2) translate(-200%, 0%); transform: scale(0.2) translate(-200%, 0%); } } .spaceOutRight { -webkit-animation-name: spaceOutRight; animation-name: spaceOutRight; } @-webkit-keyframes spaceOutRight { 0% { opacity: 1; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale(1) translate(0%, 0%); transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale(0.2) translate(200%, 0%); transform: scale(0.2) translate(200%, 0%); } } @keyframes spaceOutRight { 0% { opacity: 1; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale(1) translate(0%, 0%); transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale(0.2) translate(200%, 0%); transform: scale(0.2) translate(200%, 0%); } } .perspectiveLeft { -webkit-animation-name: perspectiveLeft; animation-name: perspectiveLeft; } @-webkit-keyframes perspectiveLeft { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); transform: perspective(800px) rotateY(-180deg); } } @keyframes perspectiveLeft { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); transform: perspective(800px) rotateY(-180deg); } } .perspectiveLeftReturn { -webkit-animation-name: perspectiveLeftReturn; animation-name: perspectiveLeftReturn; } @-webkit-keyframes perspectiveLeftReturn { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); transform: perspective(800px) rotateY(-180deg); } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } } @keyframes perspectiveLeftReturn { 0% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); transform: perspective(800px) rotateY(-180deg); } 100% { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } } .perspectiveRight { -webkit-animation-name: perspectiveRight; animation-name: perspectiveRight; } @-webkit-keyframes perspectiveRight { 0% { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } 100% { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg); } } @keyframes perspectiveRight { 0% { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } 100% { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg); } } .perspectiveRightReturn { -webkit-animation-name: perspectiveRightReturn; animation-name: perspectiveRightReturn; } @-webkit-keyframes perspectiveRightReturn { 0% { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg); } 100% { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } } @keyframes perspectiveRightReturn { 0% { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg); } 100% { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } } .animateIn { -webkit-animation-name: animateIn; animation-name: animateIn; } @keyframes animateIn { 0% { opacity: 0; transform: scale(0.6) translateY(-8px); } 100% { opacity: 1; } } /* #endregion */ /* * Project: CirclePlayer * http://www.jplayer.org * * Copyright (c) 2012 Happyworm Ltd * * Author: Silvia Benvenuti * Edited by: Mark J Panaghiston * Date: 2nd October 2012 * Artwork inspired by: http://forrst.com/posts/Untitled-CJz */ .cp-container { position: relative; width: 104px; /* 200 - (2 * 48) */ height: 104px; background: url("/JavaScript/JPlayer/Core/circle-player/skin/bgr.jpg") 0 0 no-repeat; padding: 48px; -webkit-tap-highlight-color: rgba(0,0,0,0); } .cp-container :focus { border: none; outline: 0; } /* buffer / progress */ .cp-buffer-1, .cp-buffer-2, .cp-progress-1, .cp-progress-2 { position: absolute; top: 0; left: 0; width: 104px; height: 104px; clip: rect(0px,52px,104px,0px); -moz-border-radius: 52px; -webkit-border-radius: 52px; border-radius: 52px; } .cp-buffer-1, .cp-buffer-2 { background: url("/JavaScript/JPlayer/Core/circle-player/skin/buffer.png") 0 0 no-repeat; } /* FALLBACK for .progress * (24 steps starting from 1hr filled progress, Decrease second value by 104px for next step) * (It needs the container selector to work. Or use div) */ .cp-container .cp-fallback { background: url("/JavaScript/JPlayer/Core/circle-player/skin/progress_sprite.jpg") no-repeat; background-position: 0 104px; } .cp-progress-1, .cp-progress-2 { background: url("/JavaScript/JPlayer/Core/circle-player/skin/progress.png") 0 0 no-repeat; } .cp-buffer-holder, .cp-progress-holder, .cp-circle-control { position: absolute; width: 104px; height: 104px; } .cp-circle-control { cursor: pointer; } .cp-buffer-holder, .cp-progress-holder { clip: rect(0px,104px,104px,52px); display: none; } /* This is needed when progress is greater than 50% or for fallback */ .cp-buffer-holder.cp-gt50, .cp-progress-holder.cp-gt50, .cp-progress-1.cp-fallback { clip: rect(auto, auto, auto, auto); } /* play controls */ .cp-controls { margin: 0; padding: 26px; } .cp-controls li { list-style-type: none; display: block; /*IE Fix*/ position: absolute; } .cp-controls li a { position: relative; display: block; width: 50px; height: 50px; text-indent: -9999px; z-index: 1; cursor: pointer; } .cp-controls .cp-play { background: url("/JavaScript/JPlayer/Core/circle-player/skin/controls.jpg") 0 0 no-repeat; } .cp-controls .cp-play:hover { background: url("/JavaScript/JPlayer/Core/circle-player/skin/controls.jpg") -50px 0 no-repeat; } .cp-controls .cp-pause { background: url("/JavaScript/JPlayer/Core/circle-player/skin/controls.jpg") 0 -50px no-repeat; } .cp-controls .cp-pause:hover { background: url("/JavaScript/JPlayer/Core/circle-player/skin/controls.jpg") -50px -50px no-repeat; } /* volume controls */ .cp-jplayer { width: 0; height: 0; } .cp-container .jp-volume-controls { position: absolute; bottom: 41px; top: auto; left: 66px; width: 106px; } .jp-volume-bar { position: absolute; overflow: hidden; background: #dbdbdb; top: 5px; left: 22px; width: 37px; height: 5px; cursor: pointer; } .jp-mute, .cp-container .jp-volume-max { width: 18px; height: 15px; } .cp-container .jp-volume-controls .jp-mute { display: block; position: absolute; background-color: transparent; overflow: hidden; text-indent: -9999px; border: none; cursor: pointer; } .cp-container .jp-play:before, .cp-container .jp-mute:before { color: #767C82; line-height: 1; } /* transparent cirlce player skin */ .transparent_audioskin + .cp-container { background: transparent !important; } .transparent_audioskin + .cp-container .cp-controls .cp-play { background: url("/JavaScript/JPlayer/Core/circle-player/skin/transparent_controls.jpg") 0 0 no-repeat; } .transparent_audioskin + .cp-container .cp-controls .cp-play:hover { background: url("/JavaScript/JPlayer/Core/circle-player/skin/transparent_controls.jpg") -50px 0 no-repeat; } .transparent_audioskin + .cp-container .cp-controls .cp-pause { background: url("/JavaScript/JPlayer/Core/circle-player/skin/transparent_controls.jpg") 0 -50px no-repeat; } .transparent_audioskin + .cp-container .cp-controls .cp-pause:hover { background: url("/JavaScript/JPlayer/Core/circle-player/skin/transparent_controls.jpg") -50px -50px no-repeat; } /** * Icons * ----------------------------------------------------------------------------- */ .jp-button button:before, .cp-container .jp-volume-controls button.jp-mute:before, .cp-container .jp-volume-controls button.jp-play:before, .icon:before { font-family: 'icomoon_EL' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 17px; } .jp-play:before { content: "\ed85"; text-indent: 0.1875em; } .jp-mute:before { content: "\ed90"; } .jp-state-playing .jp-play:before { content: "\ed86"; text-indent: 0; } .jp-state-muted .jp-mute:before { content: "\ed95"; } /* Player ---------------------------------------------------------------------------------------------------*/ .jp-playlist { display: none; } .jp-default-player-wrapper .jp-jplayer { height: 0px; width: 0px; } .jp-default-player-wrapper .jp-audio { width: 300px; border: 0px; } .jp-default-player-wrapper .jp-audio .jp-progress { position: static; top: auto; height: auto; display: block; overflow: inherit; background-color: #DBDBDB; border-radius: 7px; } .jp-audio .jp-time-holder { position: static; top: 50px; } .jp-audio a { color: #d2d6db; text-decoration: none; } .jp-audio a:hover { color: #ffffff; } .jp-default-player-wrapper .jp-interface { background-color: #f5f5f5; background-repeat: repeat-x; border-radius: 1px; height: 30px; position: relative; width: 300px; } .jp-default-player-wrapper .jp-current-time { font: normal 8px Verdana; } .jp-default-player-wrapper .jp-duration { font: normal 8px Verdana; } /* Controls - Play/Pause/Mute */ .jp-button { float: left; } .jp-default-player-wrapper .jp-play, .jp-audio > div > .jp-volume-button > .jp-mute { background: rgba(0, 0, 0, 0) !important; border: 0; border-radius: 0; color: #767C82; cursor: pointer; display: block; height: 30px; margin: 0; outline: none; overflow: hidden; padding: 0; position: relative; -webkit-transition: none; transition: none; width: 34px; } .jp-default-player-wrapper .jp-play:hover { background: rgba(212, 212, 212, 0.62); } .jp-button .jp-mute:before { font-size: 14px; line-height: 32px; } .jp-play:before, .jp-mute:before { font-size: 25px; font-size: 1.6rem; line-height: 1.875em; position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; text-indent: 0; } .jp-play:hover, .jp-mute:hover { color: #5A5A5A; } /* Progress Bar */ .jp-time-rail { float: left; padding: 10px; position: relative; width: calc(100% - 155px); } .jp-time-rail:before { border-left: 1px solid; content: " "; position: absolute; top: 0; bottom: 0; border-color: rgba(0, 0, 0, 0.1); left: 0; } .jp-seek-bar, .jp-play-bar { border-radius: 15px; height: 7px; background: #C5C5C5; cursor: pointer; position: relative; margin-top: 2px; } .jp-play-bar { -webkit-animation: progress-bar 0.75s linear infinite; animation: progress-bar 0.75s linear infinite; } .jp-play-bar, .jp-volume-bar-value { background-color: #0082B2; background-image: none; } /* Volume Bar */ .jp-audio > div > .jp-volume-bar { float: left; z-index: 99; position: relative; margin: 12px 0 0 -2px; width: 18%; cursor: pointer; background: #dbdbdb; height: 6px; top: 0px; left: 0px; } .jp-volume-bar-value { height: 6px; margin: 0px; border-radius: 1px; } /* Time Holder */ .jp-time-holder { float: left; width: calc(100% - 125px); font-size: 10px; float: left; padding-left: 45px; position: relative; width: calc(100% - 155px); margin-top: -11px; color: #95989A; } .jp-current-time { float: left; } .jp-duration { float: right; } /* Spencers Css - I'll combine these with above css when I have time */ /* Custom_MediaEmbed - Preview Window - */ .preview_AudioPlayer .jp-jplayer { height: 0px; width: 0px; } .preview_AudioPlayer .jp-audio { width: 300px; border: 0px; } .preview_AudioPlayer .jp-audio .jp-progress { position: initial; top: initial; height: initial; } .preview_AudioPlayer .jp-interface { background-color: #f5f5f5; background-repeat: repeat-x; border-radius: 1px; height: 30px; position: relative; width: 300px; } .preview_AudioPlayer .jp-current-time { font: normal 8px Verdana; } .preview_AudioPlayer .jp-duration { font: normal 8px Verdana; } .preview_AudioPlayer .jp-play { background: rgba(0, 0, 0, 0)!important; border: 0; border-radius: 0; color: #767C82; cursor: pointer; display: block; height: 30px; margin: 0; outline: none; overflow: hidden; padding: 0; position: relative; -webkit-transition: none; transition: none; width: 34px; } .preview_AudioPlayer .jp-play:hover { background: rgba(212, 212, 212, 0.62)!important; } /* Base Type Styles - Audio Players - */ .largePlayer .jp-interface { height: 50px; } .largePlayer .jp-play, .largePlayer .jp-mute { height: 50px !important; width: 40px !important; } .largePlayer .jp-button button:before, .largePlayer .icon:before { font-size: 32px; } .largePlayer .jp-time-rail { padding: 20px 10px; } .largePlayer .jp-button .jp-mute:before { font-size: 17px; line-height: 51px; } .largePlayer .jp-volume-bar { margin: 22px 0 0 -6px !important; } .largePlayer .jp-time-holder { padding-left: 50px; margin-top: -13px; font-size: 12px; } .largePlayer button.jp-play:before { margin-top: -5px; } .compactPlayer { background-color: transparent !important; } .compactPlayer .jp-interface, .jp-default-player-wrapper .jp-audio.compactPlayer { width: 170px; } .compactPlayer .jp-time-rail { width: calc(100% - 115px); } .compactPlayer .jp-play, .compactPlayer .jp-mute { width: 29px; } .compactPlayer .jp-time-holder { display: none; } .darkSkin .jp-interface { background-color: #969696; } .darkSkin .jp-play:hover, .darkSkin .jp-mute:hover { color: #fff; } .darkSkin .jp-play, .darkSkin .jp-mute, .darkSkin .jp-time-holder { color: #E0E3E8; } .darkSkin .jp-play:hover { background: rgba(90, 90, 90, 0.62); } .darkSkin .jp-seek-bar, .darkSkin .jp-default-player-wrapper .jp-audio .jp-progress { background: #DBDBDB; } .cke_widget_wrapper .audioWidget .widget_Media { pointer-events: none !important; } /* prevent onclick events from audio controls inside the editor ~! */ .transparent_audioskin + div .jp-interface { background-color: transparent !important; } .transparent_audioskin + div .jp-time-rail:before { border-left: 0px !important; } QuestionEntry, ._jsPlumb_overlay { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .jsPlumb-container .window { border-collapse: separate; box-shadow: 1px 1px 3px #AAA; -o-box-shadow: 1px 1px 3px #AAA; -webkit-box-shadow: 1px 1px 3px #AAA; border-radius: 2px; filter: alpha(opacity=80); z-index: 20; background-color: #FCFCFC; padding: 0.5em; margin: 30px; padding-left: 20px; max-width: 540px; color: #5C5C5C; /*border-width: 1px;*/ } .jsPlumb-container { display: inline-block; } .jsPlumb-container .source { margin-right: 20px; } .jsPlumb-container .target { margin-left: 120px; } div .jsPlumb-container .active:not(._jsPlumb_endpoint) { /*border:1px dotted green;*/ box-shadow: 1px 1px 3px #4CA9CE; -o-box-shadow: 1px 1px 3px #4CA9CE; -webkit-box-shadow: 1px 1px 3px #4CA9CE; } div .jsPlumb-container .hover { box-shadow: 1px 1px 3px #10749C !important; -o-box-shadow: 1px 1px 3px #10749C !important; -webkit-box-shadow: 1px 1px 3px #10749C !important; } .jsPlumb-container ._jsPlumb_connector { z-index:4; } .jsPlumb-container ._jsPlumb_endpoint, .endpointSourceLabel { z-index: 21; font: 600 13px 'open sans' !important; } .endpointTargetLabel { display: none; font: 600 13px 'open sans' !important; } .endpointSourceLabelDashed { opacity: 0.7; } .endpointSourceLabelSolid { opacity: 0.6; } ._jsPlumb_endpoint { z-index:1; } ._jsPlumb_overlay.aLabel { background-color: white; padding: 0.4em; font: 12px sans-serif; color: #444; z-index: 21; border: 1px solid #D8D8D8; opacity: 0.8; filter: alpha(opacity=80); cursor: pointer; } .col1 { clear: left; float: left; width: 25%; /*padding: 20px 0;*/ margin: 0 0 0 4%; display: inline; } .col2 { float: right; width: 61%; /*padding: 20px 0;*/ margin: 0 3% 0 0; display: inline; } .col1_2 { width: 45%; } .col2_2 { width: 40%; } /* Legend CSS */ .legend-window { box-shadow: 1px 1px 3px #E9E9E9; -o-box-shadow: 1px 1px 3px #E9E9E9; -webkit-box-shadow: 1px 1px 3px #E9E9E9; border-radius: 2px; z-index: 20; background-color: #F9FEFF; padding: 10px 0 5px 0 ; margin: 30px; padding-left: 30px; width: 250px; color: #5C5C5C; } .answer-legend { text-align: left; margin-bottom: 5px; font: 600 13px 'Open Sans'; margin-top: 10px; } .legend-window .legend-scale ul { margin: 0; padding: 10px 0 0 0; float: left; } .legend-window .legend-scale ul li { list-style: none; margin-left: 0; line-height: 18px; margin-bottom: 2px; } .answer-legend ul.legend-labels li span { display: block; float: left; height: 6px; width: 67px; margin-right: 20px; margin-left: 0; } .answer-legend { height: 70px; color: #999; clear: both; } .answer-legend a { color: #777; } .user-color { border-bottom: 4px dashed #61B7CF; } .correct-color { border-bottom: 4px solid #7AB02C; } .solid-arrow { display: none; } .dashed-arrow { display: none; } ._jsPlumb_endpoint.active { border: 2px dashed #595959; } .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .introjs-overlay { position: absolute; box-sizing: content-box; z-index: 999999; opacity: 0; transition: all .3s ease-out } .introjs-showElement { z-index: 9999999 !important } tr.introjs-showElement > td { z-index: 9999999 !important; position: relative } tr.introjs-showElement > th { z-index: 9999999 !important; position: relative } .introjs-disableInteraction { z-index: 99999999 !important; position: absolute; background-color: #fff; opacity: 0 } .introjs-relativePosition { position: relative } .introjs-helperLayer { box-sizing: content-box; position: absolute; z-index: 9999998; border-radius: 4px; transition: all .3s ease-out } .introjs-helperLayer * { box-sizing: content-box } .introjs-helperLayer :before { box-sizing: content-box } .introjs-helperLayer :after { box-sizing: content-box } .introjs-tooltipReferenceLayer { font-family: "Helvetica Neue",Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif; box-sizing: content-box; position: absolute; visibility: hidden; z-index: 100000000; background-color: transparent; transition: all .3s ease-out } .introjs-tooltipReferenceLayer * { font-family: "Helvetica Neue",Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif } .introjs-helperNumberLayer { font-family: "Helvetica Neue",Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif; color: #9e9e9e; text-align: center; padding-top: 10px; padding-bottom: 10px } .introjs-arrow { border: 5px solid transparent; content: ""; position: absolute } .introjs-arrow.top { top: -10px; left: 10px; border-bottom-color: #fff } .introjs-arrow.top-right { top: -10px; right: 10px; border-bottom-color: #fff } .introjs-arrow.top-middle { top: -10px; left: 50%; margin-left: -5px; border-bottom-color: #fff } .introjs-arrow.right { right: -10px; top: 10px; border-left-color: #fff } .introjs-arrow.right-bottom { bottom: 10px; right: -10px; border-left-color: #fff } .introjs-arrow.bottom { bottom: -10px; left: 10px; border-top-color: #fff } .introjs-arrow.bottom-right { bottom: -10px; right: 10px; border-top-color: #fff } .introjs-arrow.bottom-middle { bottom: -10px; left: 50%; margin-left: -5px; border-top-color: #fff } .introjs-arrow.left { left: -10px; top: 10px; border-right-color: #fff } .introjs-arrow.left-bottom { left: -10px; bottom: 10px; border-right-color: #fff } .introjs-tooltip { box-sizing: content-box; position: absolute; visibility: visible; background-color: #fff; min-width: 310px; max-width: 300px; border-radius: 5px; box-shadow: 0 3px 30px rgba(33,33,33,.3); transition: opacity .1s ease-out } .introjs-tooltiptext { padding: 15px 20px 20px 20px; } .introjs-dontShowAgain { padding-left: 20px; padding-right: 20px } .introjs-dontShowAgain input { padding: 0; margin: 0; margin-bottom: 2px; display: inline; width: 10px; height: 10px } .introjs-dontShowAgain label { font-size: 14px; display: inline-block; font-weight: 400; margin: 0 0 0 5px; padding: 0; background-color: #fff; color: #616161; -webkit-user-select: none; user-select: none } .introjs-tooltip-title { width: 90%; min-height: 1.5em; margin: 0; padding: 0; font: 500 18px 'Open Sans' !important; } .introjs-tooltiptext { font-size: 16px; font-weight: 500; font-family: 'Open sans'; } .introjs-tooltip-header { position: relative; padding-left: 20px; padding-right: 20px; padding-top: 10px; min-height: 1.5em } .introjs-tooltipbuttons { padding: 10px; padding-bottom: 15px; text-align: right; white-space: nowrap } .introjs-tooltipbuttons:after { content: ""; visibility: hidden; display: block; height: 0; clear: both } .introjs-button { font-weight: 500 !important; font-size: 13px; font-family: 'Open Sans'; text-decoration: none !important; background-color: #f1f1f1; display: inline-block; padding: 4px 12px; margin-bottom: 0; line-height: 20px; vertical-align: middle; cursor: pointer; color: #525252; border: 1px solid #f1f1f1; border-bottom-color: #eaeaea; transition: .25s; transition-property: initial; transition-duration: .25s; transition-timing-function: initial; transition-delay: initial; outline: none !important; width: 38%; text-align: center; box-sizing: border-box; } .introjs-button:hover { outline: 0; text-decoration: none; background-color: #e0e0e0; color: #212121 } .introjs-button:focus { outline: 0; text-decoration: none; background-color: #eee; box-shadow: 0 0 0 .2rem rgba(158,158,158,.5); color: #212121 } .introjs-button:active { outline: 0; text-decoration: none; background-color: #e0e0e0; border-color: #9e9e9e; color: #212121 } .introjs-button::-moz-focus-inner { padding: 0; border: 0 } .introjs-skipbutton { position: absolute; top: 0; right: 0; display: inline-block; width: 45px; height: 45px; line-height: 45px; color: #616161; font-size: 30px; cursor: pointer; font-weight: 500; text-align: center; text-decoration: none; line-height: 33px; } .introjs-skipbutton:focus, .introjs-skipbutton:hover { color: #212121; outline: 0; text-decoration: none; box-shadow: 0 0 0 .2rem rgba(158,158,158,.5); } .introjs-donebutton { width: 50%; margin-right: 10px; } .introjs-prevbutton { float: left } .introjs-nextbutton { float: right } .introjs-disabled { color: #9e9e9e; box-shadow: none; cursor: default; background-color: #fcfcfc; background-image: none; } .introjs-disabled:focus, .introjs-disabled:hover { color: #9e9e9e; border-color: #bdbdbd; box-shadow: none; cursor: default; background-color: #f4f4f4; background-image: none; text-decoration: none } .introjs-hidden { display: none } .introjs-bullets { text-align: center; padding-top: 10px; padding-bottom: 10px } .introjs-bullets ul { box-sizing: content-box; clear: both; margin: 0 auto 0; padding: 0; display: inline-block } .introjs-bullets ul li { box-sizing: content-box; list-style: none; float: left; margin: 0 2px } .introjs-bullets ul li a { transition: width .1s ease-in; box-sizing: content-box; display: block; width: 6px; height: 6px; background: #ccc; border-radius: 10px; text-decoration: none; cursor: pointer } .introjs-bullets ul li a:focus, .introjs-bullets ul li a:hover { width: 15px; background: #999; text-decoration: none; outline: 0 } .introjs-bullets ul li a.active { width: 15px; background: #999 } .introjs-progress { box-sizing: content-box; overflow: hidden; height: 6px; border-radius: 4px; background-color: #ecf0f1; position: absolute; width: 100%; bottom: 0px; left: 0px; display: block !important; border-radius: 0px; margin-top: 5px; } .introjs-progressbar { box-sizing: content-box; float: left; width: 0%; height: 100%; font-size: 10px; line-height: 10px; text-align: center; background-color: #08c } .introjsFloatingElement { position: absolute; height: 0; width: 0; left: 50%; top: 50% } .introjs-fixedTooltip { position: fixed } .introjs-hint { box-sizing: content-box; position: absolute; background: 0 0; width: 20px; height: 15px; cursor: pointer } .introjs-hint:focus { border: 0; outline: 0 } .introjs-hint:hover > .introjs-hint-pulse { background-color: rgba(60,60,60,.57) } .introjs-hidehint { display: none } .introjs-fixedhint { position: fixed } @keyframes introjspulse { 0% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(0,0,0,.7) } 70% { transform: scale(1); box-shadow: 0 0 0 10px transparent } 100% { transform: scale(.95); box-shadow: 0 0 0 0 transparent } } .introjs-hints { position: relative; z-index: 10000; } .introjs-hint-pulse { box-sizing: content-box; width: 15px; height: 15px; border-radius: 30px; background-color: rgba(136,136,136,.24); z-index: 10; position: absolute; transition: all .2s ease-out; animation: introjspulse 2s infinite } .introjs-hint-no-anim .introjs-hint-pulse { animation: none } .introjs-hint-dot { box-sizing: content-box; background: 0 0; border-radius: 60px; height: 50px; width: 50px; position: absolute; top: -18px; left: -18px; z-index: 1; opacity: 0 } a.introjs-skipbutton { font-size: 0px; } a.introjs-skipbutton:after { content: 'x'; font-size: 20px } /*Grid*/ .ui-jqgrid {position: relative;} .ui-jqgrid .ui-jqgrid-view {position: relative;left:0; top: 0; padding: 0; font-size:12px;} /* caption*/ .ui-jqgrid .ui-jqgrid-titlebar {padding: .3em .2em .2em .3em; position: relative; font-size: 12px; border-left: 0 none;border-right: 0 none; border-top: 0 none; color: #373E4A;background-color: #FFF;border-color: #EBEBEB;} .ui-jqgrid .ui-jqgrid-caption {text-align: left;} /* header*/ .ui-jqgrid .ui-jqgrid-hdiv {position: relative; margin: 0;padding: 0; overflow-x: hidden; border-left: 0 none !important; border-top : 0 none !important; border-right : 0 none !important;} .ui-jqgrid .ui-jqgrid-hbox {float: left; padding-right: 20px;} .ui-jqgrid .ui-jqgrid-htable {table-layout:fixed;margin:0;} .ui-jqgrid .ui-jqgrid-htable th {height:22px;padding: 0 2px 0 2px;} .ui-jqgrid .ui-jqgrid-htable th div {overflow: hidden; position:relative; height:17px;} .ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column {overflow: hidden;white-space: nowrap;text-align:center;border-top : 0 none;border-bottom : 0 none;} .ui-th-ltr, .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr {border-left : 0 none;} .ui-th-rtl, .ui-jqgrid .ui-jqgrid-htable th.ui-th-rtl {border-right : 0 none;} .ui-first-th-ltr {border-right: 1px solid; } .ui-first-th-rtl {border-left: 1px solid; } .ui-jqgrid .ui-th-div-ie {white-space: nowrap; zoom :1; height:17px;} .ui-jqgrid .ui-jqgrid-resize {height:20px !important;position: relative; cursor :e-resize;display: inline;overflow: hidden;} .ui-jqgrid .ui-grid-ico-sort {overflow:hidden;position:absolute;display:inline; cursor: pointer !important;} .ui-jqgrid .ui-icon-asc {margin-top:-3px; height:12px; margin-left:1px;} .ui-jqgrid .ui-icon-desc {margin-top:3px;height:12px;} .ui-jqgrid .ui-i-asc {margin-top:0;height:16px;} .ui-jqgrid .ui-i-desc {margin-top:0;margin-left:13px;height:16px;} .ui-jqgrid .ui-jqgrid-sortable {cursor:pointer;} .ui-jqgrid tr.ui-search-toolbar th { border-top-width: 1px !important; border-top-color: inherit !important; border-top-style: ridge !important } tr.ui-search-toolbar input {margin: 1px 0 0 0} tr.ui-search-toolbar select {margin: 1px 0 0 0} /* body */ .ui-jqgrid .ui-jqgrid-bdiv {position: relative; margin: 0; padding:0; overflow: auto; text-align:left;} .ui-jqgrid .ui-jqgrid-btable {table-layout:fixed; margin:0; outline-style: none; } .ui-jqgrid tr.jqgrow { outline-style: none; background: #fff;border-color:#f1f1f1} .ui-jqgrid tr.jqgroup { outline-style: none; } .ui-jqgrid tr.jqgrow td {font-weight: normal; overflow: hidden; white-space: pre; height: 22px;padding: 2px 5px;border-bottom-width: 1px; border-bottom-color: inherit; border-bottom-style: solid;} .ui-jqgrid tr.jqgfirstrow td {padding: 0 2px 0 2px;border-right-width: 1px; border-right-style: solid;} .ui-jqgrid tr.jqgroup td {font-weight: normal; overflow: hidden; white-space: pre; height: 22px;padding: 0 2px 0 2px;border-bottom-width: 1px; border-bottom-color: inherit; border-bottom-style: solid;} .ui-jqgrid tr.jqfoot td {font-weight: bold; overflow: hidden; white-space: pre; height: 22px;padding: 0 2px 0 2px;border-bottom-width: 1px; border-bottom-color: inherit; border-bottom-style: solid;} .ui-jqgrid tr.ui-row-ltr td {text-align:left;border-right-width: 1px; border-right-color: inherit; border-right-style: solid;} .ui-jqgrid tr.ui-row-rtl td {text-align:right;border-left-width: 1px; border-left-color: inherit; border-left-style: solid;} .ui-jqgrid td.jqgrid-rownum { padding: 0 2px 0 2px; margin: 0; border: 0 none;} .ui-jqgrid .ui-jqgrid-resize-mark { width:2px; left:0; background-color:#777; cursor: e-resize; cursor: col-resize; position:absolute; top:0; height:100px; overflow:hidden; display:none; border:0 none; z-index: 99999;} /* footer */ .ui-jqgrid .ui-jqgrid-sdiv {position: relative; margin: 0;padding: 0; overflow: hidden; border-left: 0 none !important; border-top : 0 none !important; border-right : 0 none !important;} .ui-jqgrid .ui-jqgrid-ftable {table-layout:fixed; margin-bottom:0;} .ui-jqgrid tr.footrow td {font-weight: bold; overflow: hidden; white-space:nowrap; height: 21px;padding: 0 2px 0 2px;border-top-width: 1px; border-top-color: inherit; border-top-style: solid;} .ui-jqgrid tr.footrow-ltr td {text-align:left;border-right-width: 1px; border-right-color: inherit; border-right-style: solid;} .ui-jqgrid tr.footrow-rtl td {text-align:right;border-left-width: 1px; border-left-color: inherit; border-left-style: solid;} /* Pager*/ .ui-jqgrid .ui-jqgrid-pager { border-left: 0 none !important;border-right: 0 none !important; border-bottom: 0 none !important; margin: 0 !important; padding: 0 !important; position: relative; height: 25px;white-space: nowrap;overflow: hidden;font-size:11px;} .ui-jqgrid .ui-pager-control {position: relative;} .ui-jqgrid .ui-pg-table {position: relative; padding-bottom:2px; width:auto; margin: 0;} .ui-jqgrid .ui-pg-table td {font-weight: 700; font-family: 'open sans'; vertical-align:middle; padding:1px;} .ui-jqgrid .ui-pg-button { height:19px !important;} .ui-jqgrid .ui-pg-button span { display: block; margin: 1px; float:left;} .ui-jqgrid .ui-state-disabled:hover {padding:1px;} .ui-jqgrid .ui-pg-input { height:13px;font-size:.8em; margin: 0;} .ui-jqgrid .ui-pg-selbox {font-size:.8em; line-height:18px; display:block; height:18px; margin: 0;} .ui-jqgrid .ui-separator {height: 18px; border-left: 1px solid #ccc ; border-right: 1px solid #ccc ; margin: 1px; float: right;} .ui-jqgrid .ui-paging-info {font-weight: normal;height:19px; margin-top:3px;margin-right:4px;} .ui-jqgrid .ui-jqgrid-pager .ui-pg-div {padding:1px 0;float:left;position:relative;} .ui-jqgrid .ui-jqgrid-pager .ui-pg-button { cursor:pointer; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-div span.ui-icon {float:left;margin:0 2px;} .ui-jqgrid td input, .ui-jqgrid td select .ui-jqgrid td textarea { margin: 0;} .ui-jqgrid td textarea {width:auto;height:auto;} .ui-jqgrid .ui-jqgrid-toppager {border-left: 0 none !important;border-right: 0 none !important; border-top: 0 none !important; margin: 0 !important; padding: 0 !important; position: relative; height: 25px !important;white-space: nowrap;overflow: hidden;} .ui-jqgrid .ui-jqgrid-toppager .ui-pg-div {padding:1px 0;float:left;position:relative;} .ui-jqgrid .ui-jqgrid-toppager .ui-pg-button { cursor:pointer; } .ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon {float:left;margin:0 2px;} /*subgrid*/ .ui-jqgrid .ui-jqgrid-btable .ui-sgcollapsed span {display: block;} .ui-jqgrid .ui-subgrid {margin:0;padding:0; width:100%;} .ui-jqgrid .ui-subgrid table {table-layout: fixed;} .ui-jqgrid .ui-subgrid tr.ui-subtblcell td {height:18px;border-right-width: 1px; border-right-color: inherit; border-right-style: solid;border-bottom-width: 1px; border-bottom-color: inherit; border-bottom-style: solid;} .ui-jqgrid .ui-subgrid td.subgrid-data {border-top: 0 none !important;} .ui-jqgrid .ui-subgrid td.subgrid-cell {border-width: 0 0 1px 0;} .ui-jqgrid .ui-th-subgrid {height:20px;} /* loading */ .ui-jqgrid .loading {position: absolute; top: 45%;left: 45%;width: auto;z-index:101;padding: 6px; margin: 5px;text-align: center;font-weight: bold;display: none;border-width: 2px !important; font-size:11px;} .ui-jqgrid .jqgrid-overlay {display:none;z-index:100;} /* IE * html .jqgrid-overlay {width: expression(this.parentNode.offsetWidth+'px');height: expression(this.parentNode.offsetHeight+'px');} */ * .jqgrid-overlay iframe {position:absolute;top:0;left:0;z-index:-1;} /* IE width: expression(this.parentNode.offsetWidth+'px');height: expression(this.parentNode.offsetHeight+'px');}*/ /* end loading div */ /* toolbar */ .ui-jqgrid .ui-userdata {border-left: 0 none; border-right: 0 none; height : 21px;overflow: hidden; } /*Modal Window */ .ui-jqdialog { display: none; width: 300px; position: absolute; padding: .2em; font-size:11px; overflow:visible;} .ui-jqdialog .ui-jqdialog-titlebar { padding: .3em .2em; position: relative; } .ui-jqdialog .ui-jqdialog-title { margin: .1em 0 .2em; } .ui-jqdialog .ui-jqdialog-titlebar-close { position: absolute; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; cursor:pointer;} .ui-jqdialog .ui-jqdialog-titlebar-close span { display: block; margin: 1px; } .ui-jqdialog .ui-jqdialog-titlebar-close:hover, .ui-jqdialog .ui-jqdialog-titlebar-close:focus { padding: 0; } .ui-jqdialog-content, .ui-jqdialog .ui-jqdialog-content { border: 0; padding: .3em .2em; background: none; height:auto;} .ui-jqdialog .ui-jqconfirm {padding: .4em 1em; border-width:3px;position:absolute;bottom:10px;right:10px;overflow:visible;display:none;height:80px;width:220px;text-align:center;} .ui-jqdialog>.ui-resizable-se { bottom: -3px; right: -3px} .ui-jqgrid>.ui-resizable-se { bottom: -3px; right: -3px } /* end Modal window*/ .ui-jqdialog-content .CaptionTD {vertical-align: middle;border: 0 none; padding: 2px;white-space: nowrap;} .ui-jqdialog-content .DataTD {padding: 2px; border: 0 none; vertical-align: top;} .ui-jqdialog-content .form-view-data {white-space:pre} .fm-button { display: inline-block; margin:0 4px 0 0; padding: .4em .5em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; } .fm-button-icon-left { padding-left: 1.9em; } .fm-button-icon-right { padding-right: 1.9em; } .fm-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; position: absolute; top: 50%; margin-top: -8px; } .fm-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; position: absolute; top: 50%; margin-top: -8px;} #nData, #pData { float: left; margin:3px;padding: 0; width: 15px; } /* End Eorm edit */ /*.ui-jqgrid .edit-cell {}*/ .ui-jqgrid .selected-row, div.ui-jqgrid .selected-row td {font-style : normal;border-left: 0 none;} /* inline edit actions button*/ .ui-inline-del.ui-state-hover span, .ui-inline-edit.ui-state-hover span, .ui-inline-save.ui-state-hover span, .ui-inline-cancel.ui-state-hover span { margin: -1px; } /* Tree Grid */ .ui-jqgrid .tree-wrap {float: left; position: relative;height: 18px;white-space: nowrap;overflow: hidden;} .ui-jqgrid .tree-minus {position: absolute; height: 18px; width: 18px; overflow: hidden;} .ui-jqgrid .tree-plus {position: absolute; height: 18px; width: 18px; overflow: hidden;} .ui-jqgrid .tree-leaf {position: absolute; height: 18px; width: 18px;overflow: hidden;} .ui-jqgrid .treeclick {cursor: pointer;} /* moda dialog */ * iframe.jqm {position:absolute;top:0;left:0;z-index:-1;} /* width: expression(this.parentNode.offsetWidth+'px');height: expression(this.parentNode.offsetHeight+'px');}*/ .ui-jqgrid-dnd tr td {border-right-width: 1px; border-right-color: inherit; border-right-style: solid; height:20px} /* RTL Support */ .ui-jqgrid .ui-jqgrid-caption-rtl {text-align: right;} .ui-jqgrid .ui-jqgrid-hbox-rtl {float: right; padding-left: 20px;} .ui-jqgrid .ui-jqgrid-resize-ltr {float: right;margin: -2px -2px -2px 0;} .ui-jqgrid .ui-jqgrid-resize-rtl {float: left;margin: -2px 0 -1px -3px;} .ui-jqgrid .ui-sort-rtl {left:0;} .ui-jqgrid .tree-wrap-ltr {float: left;} .ui-jqgrid .tree-wrap-rtl {float: right;} .ui-jqgrid .ui-ellipsis {-moz-text-overflow:ellipsis;text-overflow:ellipsis;} /* Toolbar Search Menu */ .ui-search-menu { position: absolute; padding: 2px 5px;} .ui-jqgrid .ui-search-table { padding: 0; border: 0 none; height:20px; width:100%;} .ui-jqgrid .ui-search-table .ui-search-oper { width:20px; } a.g-menu-item, a.soptclass, a.clearsearchclass { cursor: pointer; } .ui-jqgrid .ui-search-table .ui-search-input>input, .ui-jqgrid .ui-search-table .ui-search-input>select { display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-jqgrid .ui-jqgrid-view input, .ui-jqgrid .ui-jqgrid-view select, .ui-jqgrid .ui-jqgrid-view textarea, .ui-jqgrid .ui-jqgrid-view button { font-size: 11px } /* search filter */ .ui-search-toolbar { border: none; height: 30px !important; } .ui-search-toolbar .ui-th-ltr { padding-top: 0px !important; } .ui-search-input input { font: normal 13px sans-serif !important; background: white; border: #A6A7AA solid 1px; } .ui-jqgrid-hdiv { border:0px solid !important} .ui-jqgrid-hbox,.ui-jqgrid-bdiv { background:#fff} /*.ui-jqgrid { border: 1px solid #DDD;}*/ .ui-jqgrid .ui-jqgrid-htable th div:first-child {text-align: left;} .ui-jqgrid tr.ui-row-ltr td, .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr { border-right:0px} .ui-jqgrid .ui-jqgrid-htable th div { height: 22px;} .ui-jqgrid tr.jqgrow { color: #39372E;} .ui-jqgrid .ui-jqgrid-titlebar { color: #373E4A;background-color: #FFF;border-color: #EBEBEB; font-size:13px;} .ui-jqgrid-btable tr:nth-child(odd):not(.jqgfirstrow) { background-color: #FAFAFA} .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr { background-color: #F5F5F5; border-bottom-width: 1px; color: #A6A7AA;padding: 4px 2px 0px 2px;color: #333; } .ui-jqgrid .ui-state-highlight { border: 1px solid #DDD;} .ui-jqgrid tr.ui-state-hover { border: 1px solid #DDD; background-color:#F0F0F0 !important;} .ui-jqgrid-titlebar-close { display:none} .ui-jqgrid .ui-pg-selbox { font-size: .8em !important;height: 18px !important;} .ui-jqgrid th.ui-state-hover { background:#fff;background-color: #FFFFEF !important;border-color: #CCC; } .ui-jqgrid .ui-pg-input { padding: 0px; border: 1px solid #ddd; width: 17px; vertical-align: bottom; font-size: 11px; padding-left: 2px; -webkit-highlight: none; outline: none; font-family: 'Open Sans' !important; } .ui-jqgrid .ui-paging-info { margin-top: 0px;margin-right: 9px;} .ui-jqgrid .ui-jqgrid-view {font-size:13px;} .ui-jqgrid .ui-jqgrid-bdiv {position: relative; margin: 0; padding:0; overflow: auto; text-align:left; overflow:visible; } .ui-jqgrid tr.jqgrow td {font-weight: normal; overflow: hidden; white-space: normal; height: 22px; padding: 2px 5px; border-bottom-width: 1px; border-bottom-color: inherit;border-bottom-style: solid;} .ui-jqgrid .ui-jqgrid-pager .ui-pager-table { width: 100%; table-layout: fixed; height: 100%; } .ui-jqgrid .ui-jqgrid-pager { height: 28px; background-color: whitesmoke;} .ui-jqgrid .ui-jqgrid-pager .ui-pager-control { border-top: 2px solid #e5e3e3; padding-top: 1px !important; color:#747474; } /* including clear button within search textbox */ .ui-search-input input:target[type=text].ui-widget-content { padding-right:15px; } .ui-search-clear { max-width: 3px; } a.clearsearchclass { position: absolute; right: 15px; } a.clearsearchclass:hover { color: #333; } /* icon overide for collapsable grids.*/ span.ui-icon.ui-icon-plus, span.ui-icon.ui-icon-minus { font-family: 'icomoon_EL'; font-weight: normal; font-style: normal; text-indent: 3px; font-size: 12px; padding-top: 4px; } span.ui-icon.ui-icon-plus:before { content: "\ed5f"; } span.ui-icon.ui-icon-minus:before { content: "\ed60"; } /* Search*/ .ui-search-toolbar {border: none;height: 28px !important;} .ui-search-input input {font: normal 12px sans-serif !important;background: white;border: #dadada solid 1px;height: 21px;} .ui-search-toolbar th { padding-left: 0px !important; } .ui-search-input input {border-radius:1px; outline: 0; } .ui-search-input input::-webkit-input-placeholder { color: rgba(170, 170, 170, 0.79); font-size: 12px; } .ui-search-input input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: rgba(170, 170, 170, 0.79); font-size: 12px; } .ui-search-input input::-moz-placeholder { /* Firefox 19+ */ color: rgba(170, 170, 170, 0.79); font-size: 12px; } .ui-search-input input:-ms-input-placeholder { /* IE 10+ */ color: rgba(170, 170, 170, 0.79); font-size: 12px; } .ui-search-input input:-moz-placeholder { /* Firefox 18- */ color: rgba(170, 170, 170, 0.79); font-size: 12px; } .ui-jqgrid tr.ui-search-toolbar th {border-top-width:0px !important } /* Toolbar options for search*/ ul#sopt_menu { padding: 0px; margin-top: 4px; border-radius: 2px; box-shadow: 0px 3px 4px -3px rgba(80, 80, 80, 0.78);z-index:99999 } ul#sopt_menu li { margin: 0px; } ul#sopt_menu li.ui-state-highlight { border: 1px solid rgb(229, 227, 227); background: rgb(229, 227, 227) !important; } ul#sopt_menu li:hover { background: rgb(245, 245, 245) !important; } a.soptclass { color: #999; text-decoration: none !important;margin-right: 1px; padding: 0px 3px 0px 3px !important; width: 14px; display: block; text-align: center; font-weight: 500; } a.soptclass:hover {background-color: #cccccc; } ul#sopt_menu li a { color: #363636; color: #4e4e4e; font-weight: 500 !important; }