/** *============================================================= * Business Insider Admin Settings Page Styles *============================================================= */ /* General Style */ .cqueal-header-bar { height: auto; padding: 20px; background: #fff; border: 1px solid rgba( 0,0,0,0.1 ); -webkit-display: flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-align-items: center; align-items: center; } .cqueal-header-bar .title { font-size: 28px; font-weight: 600; margin: 0px; line-height: 1; } .cqueal-header-left, .cqueal-header-right { -webkit-flex-grow: 1; flex-grow: 1; } .cqueal-header-right { text-align: right; } .cqueal-settings-tabs { padding-top: 15px; } .cqueal-settings-tab h4 { font-size: 22px; } .cqueal-settings-tab p { font-size: 14px; } .cqueal-settings-tabs ul { width: 100%; height: auto; margin: 25px 0px 20px 0px; } .cqueal-settings-tabs ul li { display: inline-block; } .cqueal-settings-tabs ul li a { padding: 15px 20px; background: #ECF0F1; color: #646464; font-size: 16px; font-weight: 600; text-transform: uppercase; text-decoration: none; border: 1px solid rgba( 0,0,0,0.1 ); border-bottom: none; } .cqueal-settings-tabs ul li a:focus { outline: none; box-shadow: none; } .cqueal-settings-tab { background: #fff; padding: 15px 25px; margin-top: -8px; border: 1px solid rgba( 0,0,0,0.1 ); border-top: none; position: relative; } .cqueal-settings-tabs ul li.ui-tabs-active a { background: #fff; outline: none; box-shadow: none; color: #343434; } p.cqueal-el-title { font-size: 15px; font-weight: 600; color: #333; margin: .5em; } .cqueal-settings-tab p.cqueal-elements-control-notice { color: #42418e; font-size: 16px; border: 1px solid #42418e; padding: 10px; text-align: center; display: block; } .cqueal-form-control { width: 100%; } textarea.cqueal-form-control { padding: 15px; font-size: 14px; font-weight: 600; color: #5d5d5d; } .row { width: 100%; height: auto; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: flex-start; padding: 15px 0px; } .col-full { width: 100%; height: auto; } .col-half { width: 49%; height: auto; } .col-one-third { width: 32%; height: auto; } .cqueal-checkbox-container { display: flex; flex-flow: row wrap; align-items: center; } .cqueal-checkbox { min-width: 250px; font-size: 24px; flex: 0 0 auto; display: flex; align-items: center; margin: 10px; } .cqueal-checkbox input[type=checkbox] { visibility: hidden; display: none; } .cqueal-checkbox label { width: 2em; height: 1em; position: relative; cursor: pointer; display: block; } .cqueal-checkbox label:before { content: ''; position: absolute; width: 2em; height: 1em; left: 0.1em; transition: background 0.1s 0.1s ease; background: #CBCFD0; border-radius: 50px; } .cqueal-checkbox label:after { content: ''; position: absolute; width: .8em; height: .8em; border-radius: 100%; left: .2em; top: .1em; transition: all 0.2s ease; box-shadow: 0 0 0 5px #fcfff4 inset; background: #CBCFD0; z-index: 2; animation: switch-off .3s ease-out; } .cqueal-checkbox input[type=checkbox]:checked + label:before { background: #7E86F9; box-shadow: inset 0px 1px 1px rgba(84, 152, 140, 0.5); } .cqueal-checkbox input[type=checkbox]:checked + label:after { left: 1.2em; background: #7E86F9; animation: switch-on .3s ease-out; } @keyframes switch-on { 50% { transform: scaleX(1.3); } } @keyframes switch-off { 50% { transform: scaleX(1.3); } } .cqueal-settings-tab { display: none; } .cqueal-settings-tab.active { display: block; } .cqueal-tabs li a.active { background-color: #fff; } .cqueal-settings-footer { padding: 20px 25px 15px 25px; background: #fff; margin-top: 10px; border: 1px solid rgba( 0,0,0,0.1 ); } .cqueal-settings-footer .submit { padding: 0px; } .cqueal-settings-footer p.submit { margin-top: 0px; } .cqueal-settings-tab img { max-width: 100%; } .button.cqueal-btn { background-color: #0099CC; color: #fff; padding: 6px 20px; border: none; box-shadow: none; font-size: 14px; height: auto; text-transform: uppercase; text-shadow: none; letter-spacing: .05em; } .button.cqueal-btn:hover, .button.cqueal-btn:focus { background-color: #1E96F1; color: #fff; } .cqueal-save-btn-wrap { margin: 30px 0 20px; } .cqueal-save-btn-wrap .cqueal-btn { background-color: #3CCD94; color: #fff; padding: 10px 20px } .cqueal-save-btn-wrap .cqueal-btn:hover, .cqueal-save-btn-wrap .cqueal-btn:focus { background-color: #02CC7B; color: #fff; } .cqueal-btn.cqueal-demo-btn { background-color: #42418e; color: #fff; } .cqueal-btn.cqueal-demo-btn:hover, .cqueal-btn.cqueal-demo-btn:focus { background-color: #FF0188; color: #fff; } .cqueal-btn.cqueal-license-btn { background-color: #0dc9c3; } .cqueal-btn.cqueal-license-btn:hover, .cqueal-btn.cqueal-license-btn:focus { background-color: #08d1ca; } .cqueal-btn.cqueal-demo-btn, .cqueal-btn.cqueal-license-btn, .cqueal-btn.cqueal-review-btn { padding: 10px; display: block; max-width: 250px; margin-bottom: 15px; text-align: center; font-size: 13px; } .premium-elements-title { margin: 50px 0 30px; } .premium-elements-title img { width: 75px; float: left; } .premium-elements-title .section-title { color: #157EFB; margin: 35px 5px 0; text-transform: uppercase; letter-spacing: 1px; font-size: 20px; border-bottom: 6px double #157EFB; padding-bottom: 10px; display: inline-block; } .go-premium .cqueal-btn.cqueal-license-btn { margin-top: 30px; } .go-premium img { width: 100%; max-width: 400px; display: block; float: right; } .cqueal-notice { background-color: #F7F6D4; padding: 10px 15px; border-radius: 5px; box-shadow: 0 0 15px 0 rgba(0,0,0, .15); max-width: 90%; color: #9A7223; } .cqueal-notice h5 { font-size: 1.2em; font-weight: bold; } .cqthemes-addons-community-link { background-color: #475A96; margin: 15px 0; display: inline-block; border-radius: 3px; } .cqthemes-addons-community-link:hover { background-color: #3351b2; } .cqthemes-addons-community-link a { color: #fff; text-decoration: none; padding: 15px 20px; font-size: 1.4em; display: flex; align-items: center; align-content: center; } /* Header Button */ .cqueal-header-bar .cqueal-btn { background-color: #3CCD94; } .cqueal-header-bar .cqueal-btn:hover, .cqueal-header-bar .cqueal-btn:focus { background-color: #02CC7B; } .cqueal-save-btn-wrap .cqueal-btn.save-now, .cqueal-header-bar .cqueal-btn.save-now { background: #E74C3C; } .cqueal-save-btn-wrap .cqueal-btn.save-now:hover, .cqueal-header-bar .cqueal-btn.save-now:hover { background: #ff5544; } /* Admin Blocks */ .cqueal-admin-general-wrapper { width: 100%; display: flex; flex-flow: row wrap; align-content: center; } .cqueal-admin-general-wrapper .cqueal-admin-general-inner { max-width: 70em; height: auto; flex: 1 1 70%; } .cqueal-admin-general-wrapper .cqueal-sidebar { flex: 1 1 200px; padding: 20px; } .cqueal-admin-block-wrapper { display: flex; flex-flow: row wrap; justify-content: space-between; margin: -10px; } .cqueal-admin-block-wrapper .cqueal-admin-block { background-color: #fff; flex: 1 1 auto; min-width: 250px; width: 300px; margin: 10px 10px 25px 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); } .cqueal-admin-block-large, .cqueal-sidebar-widget { background: #fff; margin-bottom: 25px; padding: 1em; box-shadow: 0 1px 4px rgba(0,0,0,0.1); } .cqueal-admin-block-wrapper .cqueal-admin-block.cqueal-admin-block-banner { padding: 8px; } .cqueal-admin-block-header { max-height: 4em; overflow: hidden; border-bottom: 1px solid rgba(0,0,0,0.1); background-color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.065); display: flex; align-content: center; align-items: center; } .cqueal-admin-block-header-icon { width: 42px; box-shadow: 1px 0 0 0 rgba(0,0,0,0.1); padding: 10px; } .cqueal-admin-block-header-icon svg { width: 80%; display: block; margin: 0 auto; } .cqueal-admin-block-review .cqueal-admin-block-header-icon svg { width: 100%; } .cqueal-admin-block-support .cqueal-admin-block-header-icon { width: 30px; } .cqueal-settings-tab .cqueal-admin-title { margin: 1em 0; padding: 0 1.26582em; font-size: 1.185em; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .cqueal-admin-block-content { overflow: hidden; position: relative; padding: 1em 1.5em 1.5em; background-color: #fff; } .cqueal-preview-img { width: 100%; height: 100%; vertical-align: middle; object-fit: cover; } .cqueal-admin-sidebar { flex: 1 1 200px; padding: 20px; } .cqueal-sidebar-block { margin: calc(10% + 1.5em) auto; } .cqueal-sidebar-block .cqueal-admin-sidebar-logo { max-width: 150px; display: block; margin: 0 auto; } .cqueal-sidebar-block .cqueal-admin-sidebar-logo > img, .cqueal-sidebar-block .cqueal-admin-sidebar-logo > svg { width: 100%; display: block; margin: 10px auto; } .cqueal-admin-sidebar-cta a { font-size: 1em; color: rgba(35,40,45,0.45); text-decoration: none; text-transform: uppercase; letter-spacing: .065em; text-align: center; margin: 20px auto; display: block; border: 1px solid rgba(35,40,45,0.185); border-radius: 4px; padding: 15px; width: 200px; outline: none; box-shadow: none; transition: all .3s; } .cqueal-admin-sidebar-cta a:hover { color: #23282d; box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.715); } .free-vs-pro table { width: 100%; border-collapse: collapse; } .free-vs-pro td { text-align: center; } .free-vs-pro { max-width: 100%; } .free-vs-pro h1 { display: block; text-align: center; width: 100%; font-size: 38px; font-weight: 600; } .welcome-description-wrap { display: inline-block; width: 100%; margin: 20px 0; } .free-vs-pro .about-text { margin: 20px 10px; width: 65%; float: left; } .free-vs-pro table td h3 { margin: 20px; padding-left: 20px; text-align: left; } .wrap table { border: 1px solid #e1e1e1; border-collapse: collapse; } .wrap table th { width: 33%; } .wrap table th:first-child { background-color: rgba(0, 0, 0, 0.03); } .free-vs-pro table td .table-desc { font-size: 15px; margin: 20px; padding-left: 20px; display: block; text-align: left; } .free-vs-pro table .table-feature-title > h3 { color: #404040; } .wrap .free-vs-pro table th { background-color: #24B37E; } .wrap .free-vs-pro table th:last-child { background-color: #228B9B; } .wrap .free-vs-pro table th h3 { color: #fff; margin: 15px; } .free-vs-pro tr:nth-child(2n) { background-color: #e7e7e7; } .wrap .free-vs-pro table td span { font-size: 25px; } .wrap .free-vs-pro table td .dashicons.dashicons-no { color: #CE2D2D; } .wrap .free-vs-pro table td .dashicons.dashicons-yes { color: #24B37E; } .free-vs-pro table tr .btn-wrapper { padding: 10px 0; } .free-vs-pro table tr .btn-wrapper .button { background-color: #228b9b; color: #fff; font-size: 14px; line-height: 0; padding: 27px 0; width: 59%; } .free-vs-pro table tr .btn-wrapper .button:hover { background: #097282 none repeat scroll 0 0; color: #fff; }