#wpadminbar #wp-admin-bar-ayo_abar .ab-icon:before { content: '\f537'; top: 3px; } #ab-pins{ height: 22px; margin-left: 8px; } .pro_only { margin-top: -2px; font-size: 14px; font-weight: 600; color: #2196f3; float: right; } /*info_feed*/ .display-rss-feed{ position: relative; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); margin: 20px 20px 0px 0px; padding: 20px; height: 138px; font-family: "Open Sans","Tahoma","Verdana","Arial", sans-serif; width: 44.8%; float: left; font-size: 20px; font-weight: 700; } .display-rss-feed:hover { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.20), 0 2px 10px 0 rgba(0, 0, 0, 0.16); } .display-rss-feed-table{ padding-left: 20px; } .changes-buttons { float: left; } .info_feed{ background-color: #f9f9f9; margin: -50px 0px -205px 0px; padding: 250px 20px 205px 26px; } .info_feed-changes{ margin: 1390px 0px -205px 0px; padding: 86px 20px 235px 26px; } .wn-1 { float: left; margin-top: 1em; margin-bottom: 60px; width: 49%; vertical-align: top; } .wn-1-bugs { float: left; margin-top: 1em; margin-bottom: 40px; vertical-align: top; background: #fff; padding: 20px; width: 96.4%; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) } .wn-2 { float: right; margin-top: 1em; margin-bottom: 40px; width: 49%; vertical-align: top; } .wn-3 { float: right; margin-top: 1em; margin-bottom: 40px; width: 49%; vertical-align: top; } .wn-4 { float: left; margin-top: 1em; margin-bottom: 40px; width: 49%; vertical-align: top; } .wn-1-img { float: left; margin-top: 1em; background: #fff; padding: 20px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); vertical-align: top; width: 90%; } .wn-2-img { float: right; margin-top: 1em; background: #fff; padding: 20px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); vertical-align: top; width: 90%; } /*ScrollBar*/ #inner-content-div{ height: 198px; position: relative; overflow-x: auto; } .ps-container { -ms-touch-action: none; touch-action: none; overflow: hidden !important; -ms-overflow-style: none; } @supports (-ms-overflow-style: none) { .ps-container { overflow: auto !important; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .ps-container { overflow: auto !important; } } .ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail { display: block; background-color: transparent; } .ps-container.ps-in-scrolling { pointer-events: none; } .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { background-color: #eee; opacity: 0.9; } .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { background-color: #999; } .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { background-color: #eee; opacity: 0.9; } .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { background-color: #999; } .ps-container > .ps-scrollbar-x-rail { display: none; position: absolute; /* please don't change 'position' */ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; opacity: 0; -webkit-transition: background-color .2s linear, opacity .2s linear; -moz-transition: background-color .2s linear, opacity .2s linear; -o-transition: background-color .2s linear, opacity .2s linear; transition: background-color .2s linear, opacity .2s linear; bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */ height: 8px; } .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x { position: absolute; /* please don't change 'position' */ background-color: #aaa; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: background-color .2s linear; -moz-transition: background-color .2s linear; -o-transition: background-color .2s linear; transition: background-color .2s linear; bottom: 0; /* there must be 'bottom' for ps-scrollbar-x */ height: 8px; } .ps-container > .ps-scrollbar-y-rail { display: none; position: absolute; /* please don't change 'position' */ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; opacity: 0; -webkit-transition: background-color .2s linear, opacity .2s linear; -moz-transition: background-color .2s linear, opacity .2s linear; -o-transition: background-color .2s linear, opacity .2s linear; transition: background-color .2s linear, opacity .2s linear; right: 3px; /* there must be 'right' for ps-scrollbar-y-rail */ width: 8px; } .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y { position: absolute; /* please don't change 'position' */ background-color: #aaa; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: background-color .2s linear; -moz-transition: background-color .2s linear; -o-transition: background-color .2s linear; transition: background-color .2s linear; right: 0; /* there must be 'right' for ps-scrollbar-y */ width: 8px; } .ps-container:hover.ps-in-scrolling { pointer-events: none; } .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { background-color: #eee; opacity: 0.9; } .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { background-color: #999; } .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { background-color: #eee; opacity: 0.9; } .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { background-color: #999; } .ps-container:hover > .ps-scrollbar-x-rail, .ps-container:hover > .ps-scrollbar-y-rail { opacity: 0.6; } .ps-container:hover > .ps-scrollbar-x-rail:hover { background-color: #eee; opacity: 0.9; } .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x { background-color: #999; } .ps-container:hover > .ps-scrollbar-y-rail:hover { background-color: #eee; opacity: 0.9; } .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y { background-color: #999; } /* Let's get this party started */ .card-container-ayo-search::-webkit-scrollbar { width: 4px; } /* Track */ .card-container-ayo-search::-webkit-scrollbar-track { -webkit-border-radius: 4px; border-radius: 4px; } /* Handle */ .card-container-ayo-search::-webkit-scrollbar-thumb { -webkit-border-radius: 4px; border-radius: 4px; background: #bcbcbc; } .card-container-ayo-search::-webkit-scrollbar-thumb:window-inactive { background: #bcbcbc; } /* === Admin menu icon === */ #adminmenu div.wp-menu-image.svg{ background-size: 20px !important; background-position: 8px 8px !important; } /* === version === */ .display-version{ font-size: 11px; font-weight: bold; } /*START small toggle*/ /* Toggle Switch */ div.search_admin_panel{font-size:15px;} .toggleSwitch span span { display: none; } @media only screen { .toggleSwitch { display: inline-block; height: 18px; position: relative; overflow: visible; padding: 0; vertical-align: middle; float: right; cursor: pointer; width: 40px; } .toggleSwitch * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .toggleSwitch label, .toggleSwitch > span { line-height: 20px; height: 20px; vertical-align: middle; } .toggleSwitch input:focus ~ a, .toggleSwitch input:focus + label { outline: none; } .toggleSwitch label { position: relative; z-index: 3; display: block; width: 100%; } .toggleSwitch input { position: absolute; opacity: 0; z-index: 5; } .toggleSwitch > span { position: absolute; left: -20%; width: 100%; margin: 0; padding-right: 50px; text-align: left; white-space: nowrap; } .toggleSwitch > span span { position: absolute; top: 0; left: 0; z-index: 5; display: block; width: 50%; margin-left: 8px; text-align: left; font-size: 0.9em; width: 100%; left: 15%; top: -1px; opacity: 0; } .toggleSwitch a { position: absolute; right: 50%; z-index: 4; display: block; height: 100%; padding: 0; left: 2px; width: 18px; background-color: #fff; border: 1px solid #CCC; border-radius: 100%; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .toggleSwitch > span span:first-of-type { color: #ccc; opacity: 1; left: 10%; } .toggleSwitch > span:before { content: ''; display: block; width: 100%; height: 23px; position: absolute; left: 0px; top: -2px; background-color: #777777; border: 0; border-radius: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .toggleSwitch input:checked ~ a { border-color: #fff; left: 100%; margin-left: -8px; } .toggleSwitch input:checked ~ span:before { border-color: #2196F3; box-shadow: inset 0 0 0 30px #2196F3; } .toggleSwitch input:checked ~ span span:first-of-type { opacity: 0; } .toggleSwitch input:checked ~ span span:last-of-type { opacity: 1; color: #fff; } /* Switch Sizes */ .toggleSwitch.large {width:60px;height:27px;} .toggleSwitch.large a {width:27px;} .toggleSwitch.large > span {height: 29px; line-height: 28px;} .toggleSwitch.large input:checked ~ a {left: 41px;} .toggleSwitch.large > span span {font-size: 1.1em;} .toggleSwitch.large > span span:first-of-type {left: 50%;} .toggleSwitch.xlarge {width:80px;height:36px;} .toggleSwitch.xlarge a {width:36px;} .toggleSwitch.xlarge > span {height: 38px; line-height: 37px;} .toggleSwitch.xlarge input:checked ~ a {left: 52px;} .toggleSwitch.xlarge > span span {font-size: 1.4em;} .toggleSwitch.xlarge > span span:first-of-type {left: 50%;} } /* END small Toggle */ /**/ /* === The solution for two color background === */ .top-bg { background-image: linear-gradient(bottom, #104977 50%, #104977 50%); background-image: -o-linear-gradient(bottom, #104977 50%, #104977 50%); background-image: -moz-linear-gradient(bottom, #104977 50%, #104977 50%); background-image: -webkit-linear-gradient(bottom, #104977 50%, #104977 50%); background-image: -ms-linear-gradient(bottom, #104977 50%, #104977 50%); padding-top: 115px; padding-bottom: 160px; margin-top: 0px; height: 100%; } /* === The skewed BG === */ .skewed-bg { width: 100%; height: 100%; padding: 1px 0 0px 0; -ms-transform: skew(0deg, -3deg); -webkit-transform: skew(0deg, -3deg); transform: skew(0deg, -3deg); margin-top: 0px; margin:0; font-family: "Open Sans",sans-serif; font-size:12px; background: #1E67B1; } @-webkit-keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } @-moz-keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } @-ms-keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } @-o-keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } @keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} } p1 { line-height: 0; margin: 0; } #pin_featured { text-align: center; } div#ayo-general { width: 100%; padding-top: 0px; margin-top: -90px; -ms-transform: skew(0deg, 3deg); -webkit-transform: skew(0deg, 3deg); transform: skew(0deg, 3deg); } div#logo-text{ width: auto; top: 0px; color: #fff; padding-left: 20px; } div#text-intro { padding-left: 280px; padding-right: 20px; line-height: 1.4em; color: #fff; font-size: 14px; } div#logo { width: auto; position: absolute; top: 0px; } /* === The Cards === */ .line-ayo-search { background-color: #00bcd4 !important; height: 6px; width: 60px; margin-top: 10px; overflow:hidden; -webkit-transition: width 0.3s ease-in-out; -moz-transition: width 0.3s ease-in-out; -o-transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out; } .card2:hover .line-ayo-search { width: 100%; } .line-ayo-drag-and-drop-menu { background-color: #f44336 !important; height: 6px; width: 60px; margin-top: 10px; overflow:hidden; -webkit-transition: width 0.3s ease-in-out; -moz-transition: width 0.3s ease-in-out; -o-transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out; } .card2:hover .line-ayo-drag-and-drop-menu { width: 100%; } .line-ayo-floating-action-button { background-color: #ff9800 !important; height: 6px; width: 60px; margin-top: 10px; overflow:hidden; -webkit-transition: width 0.3s ease-in-out; -moz-transition: width 0.3s ease-in-out; -o-transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out; } .card2:hover .line-ayo-floating-action-button { width: 100%; } .line-pin-to-dashboard { background-color: #CDDC39 !important; height: 6px; width: 60px; margin-top: 10px; overflow:hidden; -webkit-transition: width 0.3s ease-in-out; -moz-transition: width 0.3s ease-in-out; -o-transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out; } .card2:hover .line-pin-to-dashboard { width:100%; } .line-changes { background-color: #0073aa !important; height: 6px; width: 60px; margin-top: 10px; overflow:hidden; -webkit-transition: width 0.3s ease-in-out; -moz-transition: width 0.3s ease-in-out; -o-transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out; } .card2-changes:hover .line-changes { width:62%; } .line-ayo-misc-tools { background-color: #795548 !important; height: 6px; width: 60px; margin-top: 10px; overflow:hidden; -webkit-transition: width 0.3s ease-in-out; -moz-transition: width 0.3s ease-in-out; -o-transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out; } .card2:hover .line-ayo-misc-tools { width:100%; } .actions { right: 10px; z-index: 2; top: 15px; list-style: none; padding: 0; margin: 0; } large{ color: #808080; margin: 0; line-height: 100%; font-size: 14px; font-weight: 400; } .card2 .card-header[class*="ayo-"] h2 { color: #808080; margin: 0; line-height: 100%; font-size: 20px; font-weight: 400; } .card2 .card-header[class*="ayo-"] h2 small { display: block; margin-top: 8px; color: #808080; font-size: 13px; line-height: 1.4; } .card3 .card-header[class*="ayo-"] h2 { color: #808080; margin: 0; line-height: 100%; font-size: 18px; font-weight: 400; } .card3 .card-header[class*="ayo-"] h2 small { display: block; margin-top: 8px; color: #808080; font-size: 13px; line-height: 1.4; } .card4 .card-header[class*="ayo-"] h2 { color: #808080; margin: 0; line-height: 100%; font-size: 18px; font-weight: 400; } .card4 .card-header[class*="ayo-"] h2 small { display: block; margin-top: 8px; color: #808080; font-size: 13px; line-height: 1.4; } .transition { transition: .3s cubic-bezier(.3, 0, 0, 1.3) } .boxes-row{ padding-left: 20px; width: 100%; box-sizing: border-box; } .box-ayo-settings-changes { width: 100%; float: left; filter: blur(0); -webkit-filter: blur(0); } .box-ayo-settings { width: 25%; float: left; filter: blur(0); -webkit-filter: blur(0); } .ayo-content-card { /* position: inherit; position:relative;*/ } .ayo-content-card-quick-search { width: 92%; /* position: inherit; position:relative;*/ } .card2 { position: relative; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); margin: 20px 20px 0px 0px; padding: 0; height: 390px; } .card2:hover { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.20), 0 2px 10px 0 rgba(0, 0, 0, 0.16); } .card2-changes { position: relative; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); margin: 20px 20px 0px 0px; padding: 0; height: 100%; } .card2-changes:hover { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.20), 0 2px 10px 0 rgba(0, 0, 0, 0.16); } .card-header { position: relative; padding: 23px 20px 23px 26px; } .card-header .ayo-search { padding: 23px 26px 42px; position: relative; } .card-container-ayo-search { padding: 23px 5px 0px 26px; background-color: #f9f9f9; height: 40%; overflow: hidden; position: inherit; overflow-x: hidden !important; } .card_circle-ayo-search { height: 300px; width: 450px; background-color: #f9f9f9; position: absolute; border-radius: 50%; margin-left: -75px; margin-top: -325px; } .card2:hover .card_circle-ayo-search { border-radius: 0; margin-top: -130px; } .card-header .ayo-pin-to-dashboard { padding: 23px 26px; position: relative; } .card-container-ayo-pin-to-dashboard { padding: 23px 26px 42px; background-color: #f9f9f9; height: 40%; overflow: hidden; position: inherit; } .card-container-ayo-changes { padding: 23px 26px 42px; background-color: #f9f9f9; height: 100%; overflow: hidden; position: inherit; } .card_circle-ayo-pin-to-dashboard { height: 300px; width: 450px; background-color: #f9f9f9; position: absolute; border-radius: 50%; margin-left: -75px; margin-top: -325px; } .card2:hover .card_circle-ayo-pin-to-dashboard { border-radius: 0; margin-top: -130px; } .card-header .ayo-drag-and-drop-pages { padding: 23px 26px; position: relative; } .card-container-ayo-drag-and-drop-pages { padding: 23px 26px 42px; background-color: #f9f9f9; height: 40%; overflow: hidden; position: inherit; } .card_circle-ayo-drag-and-drop-pages { height: 300px; width: 450px; background-color: #f9f9f9; position: absolute; border-radius: 50%; margin-left: -75px; margin-top: -325px; } .card2:hover .card_circle-ayo-drag-and-drop-pages { border-radius: 0; margin-top: -130px; } .card-header .ayo-extra-widgets { padding: 23px 26px; position: relative; } .card-container-ayo-extra-widgets { padding: 23px 26px 42px; background-color: #f9f9f9; height: 40%; overflow: hidden; position: inherit; } .card_circle-ayo-extra-widgets { height: 300px; width: 450px; background-color: #f9f9f9; position: absolute; border-radius: 50%; margin-left: -75px; margin-top: -325px; } .card2:hover .card_circle-ayo-extra-widgets { border-radius: 0; margin-top: -130px; } .form-table { font-size: 14px; margin-top: -20px; } p.submit { text-align: right; padding-top: 10px; padding-bottom: 6px; padding-right: 20px; } .card-footer { text-align: left; position: absolute; bottom: 0; padding-bottom: 8px; padding-right: 26px; } @media (max-width: 480px) { p.submit { padding-right: 15px; } div#text-intro { width: 95%; padding-top: 100px; padding-left: 0px; } div#ayo-general { margin-top: -40px; } .top-bg { padding-top: 115px; } } .h7 { font-size: 12px; color: rgba(128,128,128,0.7); font-style: italic; margin-top: 10px; } .brand_catext{ font-size:19px; } .upper-buttons{ text-align: right; } a.model_link { background: rgba(255, 255, 255, 0.20); padding: 4px 10px; border-radius: 4px; text-decoration: blink; } a.model_link:hover { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.06), 0 2px 10px 0 rgba(0, 0, 0, 0.02) !important; } a.model_link-changes { background: #0073AA; padding: 4px 10px; border-radius: 4px; text-decoration: blink; } a.model_link-changes:hover { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.06), 0 2px 10px 0 rgba(0, 0, 0, 0.02) !important; } /* === The Mobile Part === */ @media screen and (max-width: 640px) { .box-ayo-settings { width: 100%; float: left; } td.pin_featured.column-pin_featured { margin-left: -2.1%; max-width: 4% !important; } } @media screen and (min-width: 641px) { .box-ayo-settings { width: 50%; float: left; } td.pin_featured.column-pin_featured { margin-left: -7%; max-width: 19% !important; } } @media screen and (min-width: 1239px) { .box-ayo-settings { width: 25%; float: left; } }