JezK
Edit File: bosa-store.css
.keon-notice { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } .keon-notice { background-color: #fff; margin: 40px 20px 0 0; position: relative; padding-left: 20px; padding-right: 38px; border: 1px solid #c3c4c7; border-width: 1px 1px 1px 4px; border-style: solid; border-color: #c3c4c7; border-left-color: #00a32a; box-shadow: 0 1px 1px rgb(0 0 0 / 4%); } .keon-notice .getting-img { box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); border: 1px solid #dcdcde; } .keon-notice .getting-img img { max-width: 100%; width: auto; height: auto; } .admin-notice-dismiss { color: #0073aa; position: absolute; top: 0; right: 30px; border: none; margin: 0; padding: 9px; background: 0 0; cursor: pointer; text-decoration: none; vertical-align: top; } .keon-notice .admin-notice-dismiss button { right: -25px; } .admin-notice-dismiss:before { display: inline-block; line-height: 1; } .keon-notice .getting-content h2 { margin-bottom: 15px; } .keon-notice .getting-content .text { margin: 0 0 20px; } .keon-notice .button { margin-right: 10px; } @media screen and (max-width: 991px) { .admin-notice-dismiss { position: static; display: block; padding-bottom: 10px !important; } } @media only screen and (min-width: 768px) { .keon-notice.updated.notice { padding-left: 20px; } .keon-notice .getting-img { width: 270px; margin: 20px 0; } .getting-content { width: calc(100% - 312px); padding: 20px; } .getting-content h2 { font-size: 24px; margin-top: 0; } .getting-content h3 { font-size: 14px; } } .bosa-go-pro-notice { margin: 40px 20px 0 0; position: relative; padding: 0; border: 1px solid #c3c4c7; border-width: 1px 1px 1px 4px; border-style: solid; border-color: #c3c4c7; border-left-color: #F66C5E; gap: 30px; display: flex; align-items: center; /* flex-wrap: wrap;*/ } .bosa-go-pro-notice .getting-img { flex-basis: 80px; border-radius: 0; overflow: hidden; line-height: 1; padding: 45px 25px; background: #f2f2f2; } .bosa-go-pro-notice .getting-img img { max-width: 100%; width: 250px; height: auto; } .bosa-go-pro-notice .getting-content { flex: 2.5; padding: 0; width: 100%; } .bosa-go-pro-notice .bosa-notice-title { font-size: 18px; font-weight: 500; line-height: 1.3; margin: 0; color : #1d2327; } .bosa-go-pro-notice .bosa-title { color: #44268C; font-size: 1.1em; text-decoration: none; } .bosa-go-pro-notice .bosa-title:hover { color: #CE4334; } .bosa-go-pro-notice .bosa-demo-info-list { margin-top: 0; margin-bottom: 20px; } .bosa-demo-info-list p { color : #1e1e1e; } .bosa-go-pro-notice .button-wrapper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 25px; } .bosa-go-pro-notice .button-wrapper .btn-primary { text-decoration: none; background-color: #F66C5E; color: #FFFFFF; display: inline-block; font-size: 13px; font-weight: 500; padding: 8px 15px; line-height: 1.1; border-radius: 3px; -webkit-transition: background-color 0.4s; -ms-transition: background-color 0.4s; transition: background-color 0.4s; } .bosa-go-pro-notice .button-wrapper .btn-primary.btn-theme-detail { background: transparent; border: 1px solid #939393; color: #1a1a1a; } .bosa-go-pro-notice .button-wrapper .btn-primary.btn-theme-detail:hover{ border-color: #CE4334; } .bosa-go-pro-notice .button-wrapper .btn-primary:hover { background-color: #CE4334; color: #FFFFFF; } .bosa-go-pro-notice .button-wrapper .keon-remind-me-later { background-color: transparent; border: none; color: #b8b5b5;; padding: 0; cursor: pointer; } .bosa-go-pro-notice .button-wrapper .keon-remind-me-later:hover { background-color: transparent; color: #a9a9a9!important; } .bosa-go-pro-notice .admin-notice-dismiss, .bosa-go-pro-notice .notice-dismiss { padding: 12px; text-decoration: none; } .keon-toolset-top-dissmiss-btn { color: #d3d3d3; } .keon-toolset-top-dissmiss-btn:hover { color: #aaa; } .bosa-go-pro-notice .keon-remind-me-later{ font-size: 11px !important; font-weight: 400 !important; } .bosa-go-pro-notice .getting-content strong { margin-left: -5px; } @media only screen and (min-width: 1400px) { .bosa-go-pro-notice .getting-img { flex-basis: 80px; } .bosa-go-pro-notice .bosa-notice-title { font-size: 18px; } .bosa-go-pro-notice .bosa-demo-info-list p { font-size: 14px; margin-bottom: 8px; } .bosa-go-pro-notice .button-wrapper .btn-primary { font-size: 12px; } } @media only screen and (max-width: 768px) { .bosa-go-pro-notice { flex-direction: column; } .bosa-go-pro-notice .bosa-notice-title, .bosa-go-pro-notice .bosa-demo-info-list p { text-align: center; } .bosa-go-pro-notice .getting-img { flex-basis: auto; } .bosa-go-pro-notice .button-wrapper { justify-content: center; } }