html, body {
font-size: 13px;
}
body {
color: #707070;
background-color: #ffffff;
font-size: 13px;
font-family: "Gotham SSm A", "Gotham SSm B", Gotham, Montserrat, Raleway, Verdana, Arial, Helvetica, sans-serif;
letter-spacing: 0.05em;
}
.modal .modal-dialog {
max-width: 95%;
}
@media (max-width: 499px) {
.media-upload .modal .ajax__fileupload_dropzone {
display: none !important;
}
.media-upload .modal .ajax__fileupload_selectFileContainer {
display: block;
width: 100% !important;
float: none !important;
height: 28px;
line-height: 28px;
margin-top: 25px;
}
.media-upload .modal .ajax__fileupload_selectFileButton {
display: block;
color: #fff;
background-color: #ff9c00;
width: 100%;
margin: 0;
height: 28px;
line-height: 28px;
}
.media-upload .modal .ajax__fileupload_topFileStatus > div {
position: relative !important;
margin: 5px auto;
height: auto !important;
}
.media-upload .modal .ajax__fileupload_queueContainer {
margin-top: 0 !important;
}
}
.modal .modal-body {
max-width: 100%;
}
.study-info #DirectionsLabel p a {
word-wrap: break-word;
}
@media (max-width: 767px) {
body {
font-size: 0.9em;
}
}
a, .btn {
transition: color .25s ease, background .3s ease, border .3s ease;
}
a {
color: #f89a1c;
}
a:hover {
color: #03b0db;
text-decoration: none;
}
h1 {
font-size: 2em;
margin: 1.5em auto;
}
h2 {
font-size: 2em;
font-weight: 500;
text-transform: uppercase;
margin: 0 auto 0.75em;
}
p {
font-size: 1.15em;
line-height: 1.6;
margin-bottom: 1.25em;
}
/*
Bootstrap Spacing
Bootstrap spacing classes are missing in the currently used Bootstrap v3.3.7 min version
see https://getbootstrap.com/docs/4.0/utilities/spacing/
*/
.mt-2 { margin-top: 24px!important;}
.mx-1 {
margin-left: 8px !important;
margin-right: 8px !important;
}
.bnt {
font-size: 12px;
}
.btn-lg {
font-size: 16px;
}
h1.page-title {
color: #ff9c00;
font-size: 2.65em;
font-weight: 500;
line-height: 1.2em;
margin: 1em auto 0.5em;
text-transform: uppercase;
}
.page-title + .sub-title {
font-size: 1.2em;
line-height: 1.7em;
margin: 0 auto 1.5em;
}
h2.bordered {
padding-bottom: 0.5em;
border-bottom: 1px solid #ccc;
}
/* Global classes */
.page-title {
color: #ff9c00;
font-size: 2.5em;
margin: 0 auto 1em;
text-transform: uppercase;
}
.page-title.super-title {
color: #03b0db;
font-size: 2.75em;
font-weight: bold;
letter-spacing: 1px;
line-height: 0.9em;
text-shadow: 4px 4px 0 rgba(3,176,219,0.19);
text-align: center;
margin-bottom: 1em;
}
.title-content {
font-size: 1.1em;
line-height: 1.75em;
margin: 0 auto 1em;
}
.page-title + .title-content {
margin-top: -1.25em;
margin-bottom: 1.5em;
}
/* helpers */
.btn-facebook, .btn-googleplus, .btn-twitter, .btn-x-twitter { color: #fff !important; border-color: transparent !important; }
.btn-googleplus { background-color: #dd4b39 !important; }
.btn-googleplus:hover { background-color: #b63c29 !important; }
.btn-twitter { background-color: #55acee !important; }
.btn-twitter:hover { background-color: #1da0e7 !important; }
.btn-x-twitter { background-color: #000000 !important; }
.btn-x-twitter:hover { background-color: #121212 !important; }
.btn-facebook { background-color: #3b5998 !important; }
.btn-facebook:hover { background-color: #2e4476 !important; }
.btn-x-social { background-color: #000000 !important; }
.btn-x-social:hover { background-color: #333333 !important; }
.btn-copy-link { background-color: #82909c !important; }
.btn-copy-link:hover { background-color: #707c87 !important; }
.btn-disabled {
cursor: default;
}
.btn {
border-radius: 0;
letter-spacing: 0.1em;
}
.btn-primary {
background-color: #ff9c00;
border-color: transparent;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:active:focus {
background-color: #03b0db;
border-color: transparent;
}
.btn-main {
color: #ff9c00;
background-color: transparent;
text-transform: uppercase;
border-color: #ff9c00;
border-radius: 0;
padding: 0.4em 1.3em;
}
.btn-main:hover,
.btn-main:active,
.btn-main.active,
.btn-main:focus,
.btn-main:active:focus {
color: #fff;
background-color: #ff9c00;
}
.btn-main .fa-caret-right {
margin-left: 10px;
}
/*
Date: 2024-03-13
Author: Simone Scigliuzzi
Task: https://amrt.atlassian.net/browse/FMP-1022
Add Facebook, Google, Apple and Microsoft as federated login providers. Place these below the login button with the label “Or login with”
*/
.btn-main.icon48 {
padding: 0;
width: 48px;
height: 48px;
border-radius: 50%;
}
{
border-radius: 50%;
}
}
.btn-inverse {
color: #707070;
background-color: transparent;
text-transform: uppercase;
border-color: #707070;
border-radius: 0;
padding: 0.4em 1.1em 0.3em;
}
.btn-inverse:hover {
color: #fff;
background-color: #707070;
border-color: #707070;
}
.btn-inverse.btn-disabled:hover {
color: #707070;
background-color: transparent;
border-color: #707070;
}
.btn-inverse.btn-danger {
color: #d9534f;
border-color: #d43f3a;
}
.btn-inverse.btn-success {
color: #5cb85c;
border-color: #4cae4c;
}
.btn-inverse.btn-info {
color: #5bc0de;
border-color: #46b8da;
}
.btn-default {
background-color: #eee;
border-color: transparent;
}
.btn-default:hover,
.btn-default:active,
.btn-default:focus,
.btn-default:active:focus {
background-color: #dcdcdc;
border-color: transparent;
}
.badge-primary {
color: #fff;
background-color: #fe9c00;
background-color: rgba(254, 156, 0, 0.9);
}
.badge-secondary {
color: #fff;
background-color: #03b0db;
background-color: rgba(51,122,183,0.9);
}
.badge-danger {
color: #fff;
background-color: #e94306;
}
.badge-pending {
color: #fff;
background-color: #f6b515;
}
.badge-success {
color: #fff;
background-color: #23b360;
}
.badge-default {
color: #fff;
background-color: #707070;
}
.gradient-overlay {
position: relative;
}
.gradient-overlay:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(315deg, #03b0db 0%, #f89a1c 100%);
opacity: 0.6;
}
p.small-text {
font-size: 0.9em;
line-height: 1.5;
}
/* Global Classes */
ul.social-buttons {
list-style: none;
margin: 0 -6px;
padding: 0;
font-size: 0;
line-height: 0;
}
ul.social-buttons li {
display: inline-block;
font-size: 1rem;
line-height: 1;
text-align: center;
margin: 0 6px 12px;
}
ul.social-buttons li a {
display: block;
width: 28px;
height: 28px;
line-height: 28px;
color: #707070;
background-color: transparent;
border: 1px solid #e6e7e8;
}
ul.social-buttons li a:hover {
color: #fff;
background-color: #e7e6e8;
}
ul.social-buttons li.facebook a {
color: #3b5998;
border-color: #3b5998;
}
ul.social-buttons li.facebook a:hover {
color: #fff;
background-color: #3b5998;
}
ul.social-buttons li.google-plus a {
color: #dd4b39;
border-color: #dd4b39;
}
ul.social-buttons li.google-plus:hover a {
color: #fff;
background-color: #dd4b39;
}
ul.social-buttons li.twitter a {
color: #55acee;
border-color: #55acee;
}
ul.social-buttons li.twitter:hover a {
color: #fff;
background-color: #55acee;
}
ul.social-buttons li.x-twitter a {
color: #000;
border-color: #000;
}
ul.social-buttons li.x-twitter:hover a {
color: #fff;
background-color: #000;
}
ul.social-buttons li.linkedin a {
color: #0077b5;
border-color: #0077b5;
}
ul.social-buttons li.linkedin:hover a {
color: #fff;
background-color: #0077b5;
}
/* Overrides */
label {
font-weight: 300;
}
hr {
border-color: #ccc;
}
strong.branded {
color: #03b0db;
}
.table.table-bordered > thead > tr > th {
font-weight: 500;
background-color: #efefef;
}
span.alert {
display: block;
}
.alert li {
color: inherit;
}
.ajax__calendar {
position: relative;
z-index: 15;
}
/* Layout */
.header {
background-color: #ffffff;
}
.header-top {
padding-top: 1.5em;
padding-bottom: 1.5em;
}
.header-top .logo {
display: inline-block;
margin-bottom: -0.5em;
}
.header-top .logo img {
display: block;
width: 266px;
max-width: 100%;
height: auto;
}
.header-top .col-right {
text-align: right;
}
.nav-top {
text-align: right;
}
.nav-top > .nav {
float: right;
margin-top: 0.5em;
}
.nav-top > .nav > li {
position: relative;
float: left;
margin: 0 0.4em;
}
.nav-top > .nav > li > a {
position: relative;
display: block;
color: #606060;
font-size: 1.15em;
padding: 0.8em;
}
.nav-top > .nav > li > a:hover {
color: #ff9c00;
text-decoration: none;
background-color: transparent;
}
.nav-top > .nav > li.break {
margin: 0;
padding: 0.5em;
}
.nav-top > .nav > li.button > a {
color: #ff9c00;
font-weight: 500;
text-transform: uppercase;
border: 1px solid #ff9c00;
padding: 0.5em 1.2em;
}
.nav-top > .nav > li.button > a:hover {
color: #fff;
background-color: #ff9c00;
}
.nav-top > .nav > li > .subnav {
display: none;
position: absolute;
top: 100%;
background: #fff;
z-index: 999;
list-style: none;
text-align: left;
margin: 0;
padding: 0;
box-shadow: #f89a1c 0px -2px 0px 0px, rgba(0, 0, 0, 0.1) 2px 4px 15px 0px;
width: 300px;
}
.nav-top > .nav > li:hover > .subnav {
display: block;
}
.nav-top .subnav li {
position: relative;
display: block;
padding: 0 8px;
box-sizing: border-box;
}
.nav-top .subnav li:first-child {
padding-top: 8px;
}
.nav-top .subnav li:last-child {
padding-bottom: 8px;
}
.nav-top .subnav > li > a {
margin: 0;
padding: 8px;
display: block;
color: #606060;
}
.nav-top .subnav > li > a:hover {
color: #ff9c00;
text-decoration: none;
}
.user-profile {
position: relative;
padding-top: 0.5em;
padding-right: 1em;
}
.user-profile:after,
.user-profile .profile:after {
content: '\0020';
display: block;
clear: both;
}
.user-profile > a {
position: relative;
float: right;
text-decoration: none;
text-align: left;
line-height: 1.5em;
padding: 10px;
padding-right: 30px;
margin-top: -6px;
border: 1px solid #eee;
}
.user-profile .profile {
font-size: 1.1em;
text-decoration: none;
padding: 0.4em 0;
min-width: 15em;
max-width: 100%;
}
.user-profile .notification-badge {
position: absolute;
top: -5px;
left: -5px;
width: 24px;
height: 24px;
color: #fff;
background: #f89a1c;
font-size: 11px;
line-height: 24px;
font-style: normal;
text-align: center;
border-radius: 50%;
}
.user-profile .dropdown-caret {
position: absolute;
top: 50%;
width: 30px;
text-align: center;
right: 0;
color: #ccc;
font-size: 1.1em;
line-height: 1;
transform: translateY(-50%);
}
.user-profile .dropdown-menu {
padding: 0.75em 1.25em;
width: 325px;
max-width: 90%;
max-width: 90vw;
}
.user-profile .dropdown-menu > li > a {
color: #707070;
font-size: 1em;
line-height: 1.4em;
font-weight: 500;
padding: 0.25em;
}
.user-profile .dropdown-menu > li > a:hover {
color: #ff9c00;
background-color: transparent;
}
.user-profile .dropdown-menu:before {
position: absolute;
top: -10px;
right: 19px;
display: inline-block;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.15);
content: '';
}
.user-profile .dropdown-menu:after {
position: absolute;
top: -9px;
right: 20px;
display: inline-block;
border-right: 9px solid transparent;
border-bottom: 9px solid #ffffff;
border-left: 9px solid transparent;
content: '';
}
.header .profile-img {
float: left;
width: 2.4em;
height: 2.4em;
margin-right: 0.5em;
color: #fff;
background: #ddd;
border-radius: 50%;
font-size: 1.5em;
text-align: center;
line-height: 2.5em;
box-shadow: 0 1px 3px -1px rgba(0,0,0,.35);
}
.header .profile-img i {
font-size: 1.5em;
line-height: 1.6;
}
.header .dropdown-menu .profile-img {
display: none;
}
.header .profile-name {
display: block;
float: left;
text-align: left;
padding: 0.5em 0;
line-height: 1em;
font-weight: 500;
}
.header .profile-name .user-welcome {
color: #03b0db;
font-size: 0.85em;
font-weight: 500;
text-transform: uppercase;
}
.header .profile-name .user-name {
display: block;
font-size: 1.1em;
line-height: 1.5em;
height: 1.5em;
text-transform: uppercase;
color: #ff9c00;
max-width: 15em;
overflow: hidden;
/*margin-top: 0.5em;*/
}
.header .profile-name .user-points {
display: block;
color: #03b0db;
}
.mobile-nav {
position: fixed;
display: block;
right: 0;
top: 80px;
bottom: 0;
left: 100%;
width: 100%;
height: 100%;
height: calc(100% - 80px);
overflow: auto;
opacity: 0;
transition: left .5s ease-in-out, opacity 1s ease-in-out;
background: #fff;
}
body.show-nav .mobile-nav {
opacity: 1;
left: 0;
transition: left .5s ease-in-out, opacity .5s ease-in-out;
}
.mobile-nav ul {
display: block;
list-style: none;
margin: 0;
padding: 1em 1.5em;
}
.mobile-nav ul li {
position: relative;
display: block;
text-align: center;
padding: 1em 0;
}
.mobile-nav ul li a {
color: #707070;
font-size: 1.5em;
font-weight: 500;
}
.mobile-nav ul li a:hover,
.mobile-nav ul li a:focus,
.mobile-nav ul li a:active {
color: #03b0db;
}
.mobile-nav ul li.divider {
border-top: 1px solid #dedede;
margin-top: 1em;
padding-top: 0;
}
.mobile-nav ul li.button a {
display: inline-block;
min-width: 150px;
color: #ff9c00;
font-weight: 500;
text-transform: uppercase;
border: 1px solid #ff9c00;
padding: 0.5em 1.2em;
}
.mobile-nav ul li.button a:hover {
color: #fff;
background-color: #ff9c00;
}
.mobile-nav ul li.profile:after {
content: '';
display: table;
clear: both;
}
.mobile-nav ul li .subnav-more {
position: absolute;
top: 10px;
right: 100px;
right: 15vw;
color: rgba(51,51,51,0.27);
font-size: 1.5em;
font-weight: 300;
transition: 300ms;
cursor: pointer;
}
.mobile-nav ul li.open > .subnav-more {
transform: rotate(45deg);
}
.mobile-nav ul li > .subnav {
display: none;
}
.mobile-nav ul li > .subnav li {
font-size: 0.8em;
padding-top: 0.75em;
padding-bottom: 0.75em;
}
@media (min-width: 768px) {
.mobile-nav {
display: none !important;
}
}
@media (max-width: 767px) {
body.show-nav {
overflow: hidden;
}
h1.page-title {
font-size: 2.5em;
}
}
.announce-panel {
background-color: #03b0db;
position: relative;
z-index: 999;
}
.announce-panel p, .announce-panel a {
display: block;
color: #ffffff;
margin: 0;
text-align: center;
padding: 10px 0;
font-size: 1.1em;
font-weight: 700;
}
.announce-panel p > a {
padding: 0;
}
.announce-panel-orange {
background-color: #ff9c00;
position: relative;
z-index: 999;
}
.announce-panel-orange p, .announce-panel-orange a {
display: block;
color: #ffffff;
margin: 0;
text-align: center;
padding: 10px 0;
font-size: 1.1em;
font-weight: 700;
}
.announce-panel-orange p > a {
padding: 0;
}
/*
@media (min-width: 768px) {
header {
height: 120px;
}
.header-top {
position: fixed;
top: 0;
left: 0;
background: #fff;
width: 100%;
height: 120px;
padding-top: 30px;
padding-bottom: 30px;
box-shadow: 0 1px 1px rgba(0,0,0,.25);
z-index: 99;
}
}
@media (min-width: 768px) and (max-width: 991px) {
header {
height: 100px;
}
.header-top {
height: 100px;
}
.nav-top {
font-size: 12px;
}
}
@media (max-width: 767px) {
.nav-top {
font-size: 13px;
}
}
*/
@media (min-width: 992px) and (max-width: 1199px) {
.nav-top > .nav > li > a {
font-size: 1.05em;
padding: 0.55em;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.nav-top {
font-size: 0.9em;
}
.nav-top > .nav > li.break {
padding: 0;
}
.nav-top > .nav > li > a {
font-size: 1.05em;
padding: 0.5em 0.25em;
}
.nav-top > .nav > li.button > a {
font-size: 1em;
padding: 0.5em 0.75em;
}
}
@media (max-width: 767px) {
body {
padding-top: 80px;
}
.header {
position: fixed;
top: 0;
width: 100%;
height: 80px;
border-bottom: 1px solid #e6e7e8;
z-index: 990;
}
.announce-panel, .announce-panel-orange {
z-index: 989;
}
.header-top .logo img {
width: auto;
height: 50px;
}
body.logged-in .header-top .logo img {
margin-left: 0;
margin-right: 0;
}
.header-nav {
display: none;
}
.nav-top > .nav {
float: none;
text-align: center;
}
.nav-top > .nav > li {
float: none;
display: inline-block;
margin-bottom: 0.71em;
}
.nav-top > .nav > li.break {
display: block;
font-size: 0;
padding: 0;
}
.user-profile {
font-size: 0.8em;
}
.user-profile > a {
padding-right: 0;
}
.user-profile .dropdown-toggle > .profile-name {
display: none;
}
.user-profile .dropdown-toggle > .dropdown-caret {
display: none;
}
.user-profile .dropdown-menu {
margin-top: 0.75em;
margin-right: 1em;
}
}
.header-nav .navbar {
background-color: #fff;
border-color: #e6e7e8;
box-shadow: 0 3px 6px rgba(0,0,0,.02);
margin-bottom: 0;
}
.header-nav .navbar-collapse {
padding-left: 0;
padding-right: 0;
}
.header-nav .navbar .navbar-nav > li > a {
color: #707070;
font-size: 1.1em;
line-height: 1.2em;
font-weight: 500;
padding-left: 2em;
padding-right: 2em;
}
.header-nav .navbar .navbar-nav > li > a:hover {
color: #ff9c00;
}
.header-nav .navbar .navbar-nav > li > a i {
font-size: 1.1em;
}
.header-nav .navbar .navbar-nav > li > a.current {
/*background: #f5f5f5;*/
color: #00a3c5;
}
@media (min-width: 768px) and (max-width: 991px) {
.header-nav .navbar .navbar-nav > li > a {
padding-left: 1.5em;
padding-right: 1.5em;
}
}
@media (max-width: 767px) {
.header-nav .navbar-collapse {
padding-left: 15px;
padding-right: 15px;
}
.header-nav .navbar .navbar-nav > li > a {
padding-left: 15px;
padding-right: 15px;
}
}
.signup-banner {
background-color: #03b0db;
text-align: center;
padding: 5em;
}
.signup-banner h2 {
color: #fff;
font-size: 3em;
letter-spacing: 0.18px;
font-weight: 500;
}
.signup-banner .btn {
text-transform: uppercase;
font-size: 1.1em;
font-weight: 500;
padding: 0.75em 2em;
}
.signup-banner .btn:hover,
.signup-banner .btn:active,
.signup-banner .btn:focus {
background: #606060;
}
.footer-main {
background-color: #fcf7f0;
background: linear-gradient(135deg, #fcf7f0 0%, #e9f5f9 100%);
border-top: 1px solid #efefef;
border-bottom: 1px solid #efefef;
border-color: rgba(0,0,0,.05);
padding-top: 3em;
padding-bottom: 3em;
}
.footer-main .footer-logo {
display: block;
max-width: 100%;
width: 220px;
height: auto;
}
.footer-main h3 {
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
color: #707070;
margin: 0 auto 1em;
}
.footer-main ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-main li {
margin: 0.75em 0 0;
}
.footer-main li a {
color: #707070;
text-decoration: none;
}
.footer-main li a:hover {
color: #03b0db;
}
.footer-main ul.social {
font-size: 1.75em;
margin: 0 -0.4em;
}
.footer-main ul.social li {
display: inline-block;
margin: 0 0.4em;
}
@media (min-width: 768px) {
.footer-main li a {
font-size: 0.9em;
}
}
.footer-bottom {
color: #979797;
padding-top: 1em;
padding-bottom: 1em;
}
.footer-bottom a {
color: #979797;
}
.footer-bottom a:hover {
color: #03b0db;
}
.footer-bottom .col-left {
text-align: left;
}
.footer-bottom .col-left p {
font-size: 0.85em;
line-height: 1.5em;
margin: 11px 0;
}
.footer-bottom .col-right {
text-align: right;
}
.footer-bottom .bottom-logo {
display: inline-block;
width: auto;
max-width: 100%;
height: 20px;
margin-right: 1em;
}
.footer-bottom .fmp-logo {
width: auto;
max-width: 100%;
height: 40px;
}
@media (max-width: 767px) {
.footer-main {
padding-top: 2.5em;
padding-bottom: 1em;
}
.footer-main .col-logo {
margin-bottom: 2.5em;
}
.footer-main .col-logo img {
display: block;
margin: 0 auto;
}
.footer-main .col-list {
margin-bottom: 2.5em;
}
.footer-bottom .col-left,
.footer-bottom .col-right {
text-align: center;
}
.footer-bottom .col-left {
margin-bottom: 1.5em;
}
.footer-bottom a {
display: block;
}
.footer-bottom .bottom-logo {
display: block;
height: 30px;
margin: 0 auto 1.5em;
}
}
/* Title Section */
.title-section {
position: relative;
padding: 1em 0;
min-height: 250px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
z-index: 1;
}
.title-section .title-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background: linear-gradient(315deg, #03b0db 0%, #f89a1c 100%);
}
.title-section .title-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.title-section .container {
position: relative;
z-index: 1;
}
.title-section h1 {
color: #fff;
font-size: 3.6em;
line-height: 1.2em;
text-transform: uppercase;
text-shadow: 0 3px 7px rgba(0,0,0,.35);
margin: 0;
}
.title-section p {
color: #fff;
font-size: 1.5em;
line-height: 1.3;
font-weight: 500;
text-shadow: 0 3px 7px rgba(0,0,0,.35);
margin: 0.5em 0 0;
}
@media (max-width: 767px) {
.title-section {
min-height: 200px;
}
.title-section h1 {
font-size: 2.8em;
}
}
@media (min-width: 767px) {
.tabpanel {
border: none !important;
}
.tabpanel:after {
content: '';
display: block;
clear: both;
}
.tabpanel .nav-tabs {
border: none;
float: left;
width: 20%;
background: #f5f5f5;
font-size: 1.05em;
padding: 1em;
}
.tabpanel .tab-content {
border: none;
float: right;
width: 77%;
padding: 0;
}
/*
.tabpanel .tab-content .btn-primary:hover {
color: #fff;
background-color: #ff9c00;
border-color: #ff9c00;
}
*/
.nav-tabs > li {
position: relative;
display: block;
float: none;
text-align: right;
margin: 0;
}
.nav-tabs > li > a {
color: #707070;
margin: 0;
line-height: 1.4em;
border: none;
border-radius: 0;
text-transform: uppercase;
font-weight: 400;
padding: 0.5em;
}
.nav-tabs > li > a:hover {
color: #00a3c5;
background: none;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
color: #00a3c5;
background: none;
border: none;
}
.nav-tabs > li.active a:after {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 0 3px 4px;
border-color: transparent transparent transparent #00a3c5;
content: '';
top: 50%;
left: 100%;
transform: translateY(-50%);
margin-top: -1.5px;
}
}
.tab-pane-wrapper .nav-tabs {
display: none;
}
@media (min-width: 768px) {
.tab-pane-wrapper .nav-tabs {
display: block;
}
.tab-pane-wrapper .tab-pane {
border: none;
}
.tab-pane-wrapper .tab-pane .tab-header {
display: none;
}
.tab-pane-wrapper .tab-pane .collapse {
display: block;
}
}
@media (max-width:767px) {
.tab-pane-wrapper .tab-content > .tab-pane {
display: block !important;
opacity: 1;
}
.tab-pane-wrapper .tab-header {
background: #707070;
color: #ffffff;
border-bottom: 1px solid rgba(0,0,0,.3);
padding: 10px 15px;
}
.tab-pane-wrapper .tab-header h5 {
margin: 0;
}
.tab-pane-wrapper .tab-header h5 a {
display: flex;
color: #fff;
text-decoration: none;
align-items: center;
justify-content: center;
}
.tab-pane-wrapper .tab-header h5 a:hover {
color: #fff;
}
.tab-pane-wrapper .tab-header h5 a span {
flex: 1 1 100%;
}
.tab-pane-wrapper .tab-header h5 a i {
padding: 5px;
}
.tab-pane-wrapper .tab-body {
border: 1px solid #999;
padding: 15px;
}
.tab-pane-wrapper .tab-table-wrapper {
margin-left: -15px;
margin-right: -15px;
padding-top: 10px;
}
.tab-pane-wrapper .tab-table-wrapper:last-child {
margin-bottom: -15px;
}
.tab-pane-wrapper .tab-table-wrapper .table {
margin-bottom: 0;
}
.tab-pane-wrapper .tab-table-wrapper table.DetailsTable tr:first-child {
border-top: 1px solid #d0d0d0;
}
.tab-pane-wrapper .DetailsHeaderPanel {
margin: 0 auto 10px;
}
.tab-pane-wrapper .DetailsHeaderPanel h2 {
font-size: 16px;
line-height: 30px;
}
.tab-pane-wrapper .DetailsHeaderPanel .btn {
font-size: 13px;
line-height: 16px;
}
}
/* Current Projects Subnav */
/* Subnav */
.subnav {
text-align: center;
margin: auto;
}
.subnav > .nav {
list-style: none;
margin: 0 -10px;
font-size: 0;
}
.subnav > .nav > li {
float: none;
display: inline-block;
font-size: 1em;
vertical-align: top;
margin: 0;
padding: 0 10px 20px;
}
.subnav > .nav > li > a {
display: block;
color: #ff9c00;
font-size: 1.1em;
font-weight: 400;
border: 1px solid #ff9c00;
padding: 0.6em 1.2em;
border-radius: 0;
}
.subnav > .nav > li > a:focus,
.subnav > .nav > li > a:hover,
.subnav > .nav > li.active > a,
.subnav > .nav > li.active > a:focus,
.subnav > .nav > li.active > a:hover {
color: #fff;
background-color: #ff9c00;
}
/*
@media (max-width: 991px) {
.subnav .nav-pills > li {
width: 25%;
}
}
@media (max-width: 767px) {
.subnav .nav-pills > li {
width: 33%;
width: 33.33%;
width: calc(100%/3);
}
}
@media (max-width: 599px) {
.subnav .nav-pills > li {
width: 50%;
}
}
*/
/* Relevant 2017 Classes */
/* Custom Styles */
.checkbox-list input[type="checkbox"],
.checkbox-list input[type="radio"] {
float: left;
margin-top: 4px;
}
.checkbox-list label {
display: block;
margin: 0 0 8px;
padding: 2px 0 0 20px;
line-height: 18px;
}
.checkbox-list br {
font-size: 0;
line-height: 0;
display: none;
}
@media (max-width: 767px) {
.checkbox-container .row {
margin-top: -10px;
}
.checkbox-container .row:first-child {
margin-top: 0;
}
}
.redleadintext {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.1em;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #993333;
}
span.Error {
color: #ff0000;
font-weight: normal;
white-space: nowrap;
}
div.PageHeaderPanel {
background-color: #81BEF7;
color: #fff;
font-size: 1.2em;
font-weight: bold;
padding:2px;
width: 100%;
}
div.DetailsHeaderPanel {
color: #5d5d5d;
font-size: 1.25em;
margin-top: 1.5em;
margin-bottom: 0.8em;
text-transform: uppercase;
font-weight: normal;
}
div.DetailsHeaderPanel h2 {
font-size: 2rem;
}
div.DetailsHeaderPanel span.desc {
display: block;
color: #6f6f6f;
font-size: 0.9em;
text-transform: none;
margin-top: 0.25em;
}
div.HeaderPanel {
font-size: 1.2em;
color: #606060;
margin-top: 30px;
margin-bottom: 15px;
text-transform: uppercase;
font-weight: normal;
}
div.FilterPanel {
border-style:ridge;
border-width:thin;
padding-top:3px;
padding-bottom: 3px;
padding-left: 5px;
width: 99.5%;
}
div.ReturnLinksPanel {
background-color: #F2F2F2;
padding-top:3px;
padding-bottom: 3px;
padding-left: 5px;
width: 100%;
}
div.SectionHeaderPanel {
background-color: #6699CC;
color: white;
font-family: Arial;
font-size: 1.1em;
font-weight: bold;
padding-top:3px;
padding-bottom: 3px;
padding-left: 5px;
text-align: center;
height: 25px;
width: 100%;
}
div.prospect-h2 {
font-size: 1.3em;
color: #606060;
margin: 25px 0 20px 0;
}
td.prospectHighlight {
padding: 10px;
border: 0px;
background-color:#CFDCE2;
color: black;
padding-left: 25px;
padding-right: 25px;
text-align: center;
}
.DetailsField .checkbox-list table>tbody>tr>td {
border: none;
margin: 0;
padding: 0;
}
/* Studies Section */
.studies-section {
padding-top: 2em;
}
.studies-section .studies-more {
color: #fff;
background-color: #03b0db;
padding: 1.5em 2.5em;
margin: 0 auto 3em;
}
.studies-section .studies-more:after {
display: table;
content: '';
clear: both;
}
.studies-section .studies-more p {
font-size: 1.2em;
line-height: 1.4;
padding: 7px 0;
margin-bottom: 0;
letter-spacing: 0.825px;
}
.studies-section .studies-more .btn {
color: #fff;
background-color: #ff9c00;
font-size: 1em;
line-height: 1em;
padding: 0.75em 2.5em;
text-transform: uppercase;
}
.studies-section .studies-more .btn:hover {
background-color: #707070;
}
.studies-section .study-location {
max-width: 900px;
margin: 0 auto 1.5em;
}
.studies-section .study-location p {
font-size: 1em;
font-weight: 500;
letter-spacing: 0.25px;
text-align: center;
text-transform: uppercase;
}
.studies-section .study-location ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.studies-section .study-location ul li {
display: inline-block;
margin: 0 0.5em 1em;
}
.studies-section .study-location ul li a {
display: block;
text-align: center;
color: #ff9c00;
background: #fff;
border: 1px solid #ff9c00;
padding: 6px 11px;
text-transform: uppercase;
font-weight: 700;
font-size: 0.85em;
transition: 250ms;
}
.studies-section .study-location ul li.active a,
.studies-section .study-location ul li a:hover {
color: #fff;
background-color: #ff9c00;
}
.studies-section .study-select {
text-align: right;
margin-bottom: 1.5em;
}
.studies-section .study-select .select-label {
display: inline-block;
font-size: 0.85em;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.5px;
}
.studies-section .study-select .study-dropdown {
display: inline-block;
margin-left: 1em;
text-align: left;
font-size: 0.9em;
}
.studies-section .study-select .study-dropdown .btn {
min-width: 150px;
text-align: left;
font-size: 1.05em;
font-weight: 500;
letter-spacing: 0.5px;
padding: 0.5em 0.65em 0.5em;
padding-right: 0.75em;
}
.studies-section .study-select .study-dropdown .caret {
float: right;
margin-top: 0.5em;
margin-left: 0.5em;
}
.studies-section .study-visibility {
margin-bottom: 1.5em;
}
.studies-section .study-visibility .visibility-label {
display: inline-block;
font-size: 0.85em;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.5px;
}
.studies-section .study-visibility .visibility-buttons {
display: inline-block;
margin-left: 1em;
text-align: left;
font-size: 0.9em;
}
.studies-table.table,
.studies-table.table > tbody > tr > td {
border: 0;
}
.studies-table.table > tbody > tr > td {
padding: 0;
}
.empty-info {
position: relative;
padding: 1em 2em;
margin: 2em auto;
border: 1px solid #dedede;
min-height: 50px;
line-height: 1.2em;
}
.empty-info.empty-info-highlight{
font-size: 1.1em;
color: #fff;
background-color: #03b0db;
padding: 0.5em 1.5em;
}
.studies-table .project-info {
position: relative;
padding: 0 0 0 350px;
margin: 1.5em auto;
border: 1px solid #dedede;
background: #fff;
min-height: 200px;
line-height: 1.2em;
}
.studies-table .project-info.project-hidden {
display: none;
min-height: 0;
}
.project-info .project-image {
position: absolute;
top: 0;
left: 0;
width: 350px;
height: 100%;
background: linear-gradient(315deg, #03b0db 0%, #f89a1c 100%);
}
.project-info .project-image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.project-info .project-detail {
padding: 2.25em 2em 2em;
}
.project-info .project-detail:after {
content: '';
display: table;
clear: both;
}
.project-info .project-detail h3 {
color: #ff9c00;
font-size: 1.6em;
line-height: 1.3;
margin: 0 auto 0.75em;
}
.project-info .project-detail p {
font-weight: 300;
margin: 0.5em auto 1.5em;
}
.project-info .project-detail p.project-notice {
font-size: 1.1em;
}
.project-info .project-detail .btn {
margin: 0 1em 1em 0;
}
.project-info .project-specs {
margin: 0;
padding: 0;
display: block;
list-style: none;
font-size: 1.05em;
font-weight: 500;
color: #707070;
}
.project-info .project-specs li {
display: inline-block;
margin: 0 2em 1em 0;
}
.project-info .project-specs li i {
margin-right: 8px;
color: #03b0db;
margin-left: 2px;
}
.project-info .project-specs.recruiter li {
padding-left: 28px;
}
.project-info .project-specs.recruiter li i {
float: left;
width: 20px;
margin: 0 0 0 -28px;
padding-right: 2px;
text-align: center;
}
.project-info .project-specs.recruiter li strong {
display: block;
}
.project-info .project-specs.single li {
display: block;
}
.project-info .project-incentive {
float: right;
font-size: 1.3em;
color: #03b0db;
letter-spacing: 0.5px;
line-height: 1.7;
white-space: nowrap;
}
.project-info .project-badge {
float: right;
}
.project-info .project-badge .badge {
font-size: 0.65em;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.5px;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
padding: 3px 10px;
}
.project-info .project-date-badge {
position: absolute;
top: 0;
left: 0;
margin: 1.25em;
background: #03b0db;
color: #fff;
border-radius: 50%;
padding: 10px;
width: 55px;
height: 55px;
}
.project-info .project-date-badge span {
display: block;
text-align: center;
font-size: 0.7em;
line-height: 1;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 0.5px;
}
.project-info .project-date-badge span + span {
font-size: 2em;
font-weight: 500;
}
.project-info .project-share {
float: right;
list-style: none;
font-size: 0;
line-height: 0;
margin: 5px -3px;
padding: 0;
}
.project-info .project-share li {
display: inline-block;
vertical-align: middle;
color: #888;
font-size: 1rem;
line-height: 1.5;
margin: 0 3px;
}
.project-info .project-share .label {
color: #03b0db;
font-size: 0.7rem;
line-height: 2;
font-weight: 500;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.project-info .project-share .social a {
display: block;
color: #888;
padding: 5px 3px;
}
.project-info .project-share .social a:hover {
color: #03b0db;
}
.project-info .project-share .social a.facebook:hover {
color: #3b5998;
}
.project-info .project-share .social a.google-plus:hover {
color: #dd4b39;
}
.project-info .project-share .social a.twitter:hover {
color: #55acee;
}
.project-info .project-share .social a.x-twitter:hover {
color: #000000;
}
.project-info .project-share .social a.linkedin:hover {
color: #0077b5;
}
.project-info .project-share .button .btn {
color: #888;
font-size: 0.8rem;
text-transform: uppercase;
border-color: #9c9c9c;
background-color: transparent;
padding: 5px 10px;
margin: 0 0 0 6px;
}
.project-info .project-share .button .btn i {
margin-right: 3px;
line-height: 1;
background-color: transparent;
}
.project-info .project-share .button .btn:active,
.project-info .project-share .button .btn:hover {
color: #fff;
border-color: #03b0db;
background-color: #03b0db;
}
.project-info .project-hide {
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.project-info .project-hide a {
display: block;
padding: 5px;
width: 23px;
height: 26px;
white-space: nowrap;
font-size: 13px;
line-height: 15px;
transition: .3s all;
text-align: center;
}
.project-info .project-hide a i {
position: relative;
top: -3px;
}
.project-info .project-hide a span {
width: 0;
overflow: hidden;
transition: .3s;
display: inline-block;
transition: all 0.3s;
opacity: 0;
overflow: hidden;
}
.project-info .project-hide a:hover {
background: #f89a1e;
color: #fff;
width: 75px;
height: 30px;
padding-top: 7px;
}
.project-info .project-hide a:hover span {
width: auto;
opacity: 1;
padding-left: 5px;
}
@media (min-width: 1200px ) {
.studies-section .studies-more p {
float: left;
max-width: 80%;
max-width: calc(100% - 130px);
}
.studies-section .studies-more .btn {
float: right;
}
}
@media (max-width: 1199px) {
.studies-section .studies-more {
text-align: center;
}
.studies-section .studies-more p {
margin-bottom: 0.75em;
}
.project-info .project-share {
float: none;
display: block;
margin-top: 1rem;
}
}
@media (max-width: 992px) {
.studies-table .project-info {
padding-left: 275px;
}
.project-info .project-image {
width: 275px;
}
}
@media (max-width: 767px) {
.studies-table .project-info {
padding-left: 0;
}
.project-info .project-image {
width: auto;
position: relative;
}
.project-info .project-image img {
position: relative;
max-height: 150px;
object-position: top center;
}
.studies-section .study-select {
text-align: left;
}
.project-info .project-date-badge {
display: none;
}
}
.no-projects {
color: #03b0db;
font-size: 1.4em;
line-height: 2em;
font-weight: 500;
text-align: center;
border: 2px solid #03b0db;
padding: 1em;
margin: 1em auto;
background: #fff;
}
.no-projects p:last-child {
margin-bottom: 0;
}
.study-detail {
padding: 3em;
margin-bottom: 3em;
background: #fff;
line-height: 1.2em;
border: 1px solid #dedede;
}
.study-detail .study-description h3 {
font-size: 1.7em;
color: #ff9c00;
margin: 0 auto 1.5em;
}
.study-detail h4 {
text-transform: uppercase;
color: #03b0db;
margin-bottom: 1em;
}
.study-detail .project-detail-info {
margin-top: 2em;
}
.dl-max-width {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
/* Referral Form Inviter */
.referral-header {
display: block;
width: 100%;
height: auto;
margin: 0 auto 10px;
}
.referral-form .import-buttons {
background: #f3f3f3;
padding: 10px;
border-radius: 4px;
border: 1px solid #ddd;
}
.referral-form .title {
display: inline-block;
vertical-align: middle;
margin: 0 0 10px;
}
.referral-form .title > span {
display: inline-block;
font-weight: bold;
margin: 0 10px 10px 0;
*display: inline;
*zoom: 1;
}
.referral-form .title > ul {
display: inline-block;
margin-bottom: 0;
}
.referral-form .import-link, .import-buttons .import-link img {
display: block;
}
.referral-form textarea {
max-height: 200px;
}
.referral-buttons h4 {
color: #444;
font-size: 1.15em;
font-weight: normal;
margin: 0 0 6px;
}
.referral-list {
display: block;
padding: 0 0 0 40px;
list-style: none;
}
.referral-list li {
position: relative;
margin: 0 0 1.15em;
min-height: 26px;
}
.referral-list li > span {
counter-increment: numList;
content: counter(numList);
float: left;
position: absolute;
left: -40px;
top: 2px;
width: 24px;
height: 24px;
font-size: 1em;
line-height: 24px;
font-weight: bold;
text-align: center;
color: #fff;
background: #fbb700;
border-radius: 50%;
}
.referral-list li p em {
color: #FBB700;
text-shadow: 0 0 1px rgba(0,0,0,.2);
}
.panel-title .fa-minus { display: block; }
.panel-title .collapsed .fa-minus { display: none; }
.panel-title .fa-plus { display: none; }
.panel-title .collapsed .fa-plus { display: block; }
.panel-share {
border-color: #0690ad;
}
.panel-share > .panel-heading {
color: #fff;
background-color: #03b0db;
border-color: #089ec4;
}
.panel-share > .panel-heading a {
color: #fff;
text-decoration: none;
}
.panel-share > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #089ec4;
}
.panel-share .referral-buttons a i {
margin-right: 5px;
}
#ContactModal .modal-header {
background: #286090;
}
#ContactModal .modal-title {
color: #fff;
}
#ContactModal .modal-header .close {
color: #fff;
text-shadow: 0 1px 0 #000;
filter: alpha(opacity=50);
opacity: .5;
}
#ContactModal .modal-header .close:hover {
filter: alpha(opacity=80);
opacity: .8;
}
#ContactModal .modal-body {
min-height: 100px;
font-size: 0.9em;
}
#ContactModal .modal-body .loading {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100px;
background: url('../images/loading.gif') center center no-repeat;
}
#ContactModal .modal-body tr input[type="checkbox"] {
position: relative;
margin: 0;
top: 2px;
}
#ContactModal .modal-body .dt-bootstrap .select-all {
padding-left: 10px;
text-align: center;
padding-right: 10px;
}
#ContactModal .modal-body div.dataTables_paginate ul.pagination {
font-size: 0.9em;
}
#ContactModal .modal-body .pagination>li>a,
#ContactModal .modal-body .pagination>li>span {
padding: 5px 10px;
}
section.body {
margin: 0 auto 4em;
padding-top: 2em;
background: #ffffff;
background: linear-gradient(#fcfeff 0%, #fff 800px, #fff 100%);
background: linear-gradient(0deg, rgba(252,247,240,0) 0%, #fcfeff 800px, #fcfeff 100%);
}
/*remove if bootstrap will update to versione 4*/
.mb-1 {
margin-bottom:8px;
}
.mt-1 {
margin-top: 8px;
}
.my-1 {
margin-top: 8px;
margin-bottom: 8px;
}
table.participant-edit {
}
table.DetailsTable {
font-size: 1em;
color: #707070;
overflow-wrap: anywhere;
}
@media screen and (max-width: 600px) {
table.DetailsTable {
font-size: 0.9em;
}
table.DetailsTable td.DetailsRowHeader {
padding-left: 0.5em !important;
padding-right: 0!important;
}
}
@media screen and (max-width: 540px) {
table.DetailsTable, table.DetailsTable tbody, table.DetailsTable tr, table.DetailsTable .tdr {
display: block;
width:100% !important;
}
.tb-container {
margin-left: -10px;
margin-right: -10px;
}
}
table.DetailsTable td.DetailsRowHeader {
min-width: 100px;
}
table.DetailsTable .command {
text-align: -webkit-center;
text-align: center;
}
table.DetailsTable tr {
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #d0d0d0;
}
table.DetailsTable .checkbox-list tr {
border-bottom: 0 !important;
}
table.DetailsTable .checkbox-list td {
padding-left: 5px !important;
padding-right: 5px !important;
}
table.DetailsTable td {
border-top: 0 !important;
}
table.DetailsTable td.DetailsRowHeader {
background: none;
font-weight: 600;
padding-left: 2em;
padding-right: 2em;
width: 25%;
}
table.DetailsTable td.DetailsRowHeader span.required {
color: #ff9c00;
}
table.DetailsTable td.DetailsRowHeader span.not-required i {
display: none;
}
table.DetailsTable th.DetailsSectionTitle {
background: #707070;
color: #fff;
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
margin: 0;
padding: 10px 15px;
}
@media screen and (max-width: 600px) {
table.DetailsTable {
font-size: 0.9em;
}
table.DetailsTable td.DetailsRowHeader {
padding-left: 0.5em !important;
padding-right: 0 !important;
}
}
@media screen and (max-width: 540px) {
table.DetailsTable, table.DetailsTable tbody, table.DetailsTable tr, table.DetailsTable .tdr {
display: block;
width: 100% !important;
}
.tb-container {
margin-left: -10px;
margin-right: -10px;
}
table.DetailsTable > tbody > tr > td,
table.DetailsTable > tbody > tr > th {
padding: 4px;
}
table.DetailsTable th.DetailsSectionTitle {
display: block;
background: #efefef;
font-size: 13px;
color: #707070;
margin: -10px 0 -5px;
padding: 8px;
}
}
table.smtable {
width: 100%;
}
table.smtable tr {
border-bottom:0 !important;
}
table.smtable td:first-child {
text-align: right;
}
table.smtable td:last-child {
padding-left:20px;
}
.w-100 {
width: 100%;
}
@media screen and (max-width: 600px) {
table.dpcollector > tbody > tr > th, table.dpcollector > tbody > tr > td {
width: 100% !important;
display: block !important;
}
}
table.dpcollector > tbody > tr > th:first-child,
table.dpcollector > tbody > tr > td:first-child {
width: 30%;
}
table.dpcollector > tbody > tr > th {
background-color: #f5f5f5;
}
table.dpcollector > tbody > tr > th.required-entry {
background-color: #effcff;
}
table.dpcollector > tbody > tr > td {
padding: 1em 0.5em;
border: 0;
}
table.dpcollector .required {
color: #ff9c00;
margin-right: 5px;
}
table.dpcollector .not-required {
color: transparent;
margin-right: 5px;
}
table.dpcollector .not-required i {
visibility: hidden;
opacity: 0;
}
table.dpcollector img {
max-width: 100%;
height: auto;
}
@media (max-width: 420px) {
table.dpcollector .input-sm {
max-width: 200px;
}
}
.dpbuttons .btn,
table.DetailsTable .btn {
font-size: 1em;
}
.dpbuttons .btn-right {
float: right;
}
.profile-progress {
margin-bottom: 20px;
}
.profile-progress:after {
content: '\0020';
display: block;
clear: both;
}
.profile-progress .progress {
height: 2em;
border-radius: 2em;
margin: 0;
}
.profile-progress .progress .progress-bar {
border-radius: 2em;
background-color: #03b0db;
}
.profile-progress .status {
color: #03b0db;
font-size: 1.1em;
line-height: 1em;
font-weight: 300;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.profile-progress .status .percent {
display: block;
font-size: 2.2em;
line-height: 1em;
font-weight: 700;
}
@media (min-width: 768px) {
.profile-progress {
display: flex;
align-items: center;
}
.profile-progress .progress {
float: left;
width: 85%;
}
.profile-progress .status {
float: right;
width: 15%;
}
}
@media (min-width: 992px) {
.profile-progress .progress {
width: 90%;
}
.profile-progress .status {
width: 10%;
}
}
/* Progress Header */
.progress-header {
max-width: 950px;
margin: 0 auto 3em;
padding-top: 3em;
}
.progress-steps {
display: flex;
flex-direction: row;
}
.progress-steps .progress-step {
position: relative;
color: #707070;
padding: 0 1.5em;
text-align: center;
text-decoration: none;
z-index: 1;
flex-grow: 1;
flex-basis: 0;
}
.progress-steps .progress-step:hover {
color: #FF9C00;
}
.progress-steps .progress-step:before,
.progress-steps .progress-step:after {
position: absolute;
display: block;
content: '';
top: 21px;
width: 50%;
height: 10px;
background: #d0d0d0;
z-index: -1;
}
.progress-steps .progress-step.active:before,
.progress-steps .progress-step.active:after {
background: #ff9c00;
}
.progress-steps .progress-step:before {
left: 0;
}
.progress-steps .progress-step:after {
right: 0;
}
.progress-steps .progress-step:first-child:before,
.progress-steps .progress-step:last-child:after {
display: none;
}
.progress-steps .progress-step .progress-step-icon {
display: block;
font-size: 2.15em;
width: 50px;
height: 50px;
color: #fff;
background: #d0d0d0;
border-radius: 50%;
line-height: 52px;
margin: 0 auto 15px;
}
.progress-steps .progress-step.active .progress-step-icon {
background: #ff9c00;
}
.progress-steps .progress-step p {
text-transform: uppercase;
font-weight: 500;
margin: 0;
font-size: 1em;
}
.consumer-progress .progress-steps .progress-step {
width: 25%;
}
/* ajax tabcontainer progress steps */
.signup-form {
margin-bottom: 2em;
}
.progress-tabs .ajax__tab_header {
max-width: 950px;
margin: 0 auto 3em;
padding-top: 3em;
display: flex;
flex-direction: row;
}
.progress-tabs .ajax__tab_header > span {
position: relative;
color: #707070;
padding: 0 1.5em;
text-align: center;
text-decoration: none;
z-index: 1;
flex-grow: 1;
flex-basis: 0;
}
.progress-tabs .ajax__tab_header > span:before,
.progress-tabs .ajax__tab_header > span:after {
position: absolute;
display: block;
content: '';
top: 21px;
width: 50%;
height: 10px;
background: #d0d0d0;
z-index: -1;
}
.progress-tabs .ajax__tab_header > span:before {
left: 0;
}
.progress-tabs .ajax__tab_header > span:after {
right: 0;
}
.progress-tabs .ajax__tab_header > span:first-child:before,
.progress-tabs .ajax__tab_header > span:last-child:after {
display: none;
}
.progress-tabs .ajax__tab_header > span.ajax__tab_active:before,
.progress-tabs .ajax__tab_header > span.ajax__tab_active:after,
.progress-tabs .ajax__tab_header > span.ajax__tab_pre:before,
.progress-tabs .ajax__tab_header > span.ajax__tab_pre:after {
background: #ff9c00;
}
.progress-tabs.ajax__tab_default .ajax__tab_tab {
cursor: default;
}
.progress-tabs .ajax__tab_tab .step-icon {
display: block;
font-size: 2.15em;
width: 50px;
height: 50px;
color: #fff;
background: #d0d0d0;
border-radius: 50%;
line-height: 52px;
margin: 0 auto 15px;
}
.progress-tabs .ajax__tab_active .ajax__tab_tab .step-icon,
.progress-tabs .ajax__tab_pre .ajax__tab_tab .step-icon {
background: #ff9c00;
}
.progress-tabs .ajax__tab_tab p {
text-transform: uppercase;
font-weight: 500;
margin: 0;
font-size: 1em;
}
/* Fix toolkit styles */
.progress-tabs.ajax__tab_xp .ajax__tab_header {
background: none;
font-family: "Gotham SSm A", "Gotham SSm B", Gotham, Montserrat, Raleway, Verdana, Arial, Helvetica, sans-serif;
font-size: 1rem;
}
.progress-tabs.ajax__tab_xp .ajax__tab_header > span {
float: none;
height: auto;
margin: auto;
}
.progress-tabs.ajax__tab_xp .ajax__tab_header .ajax__tab_outer {
background: none !important;
height: auto;
padding: 0;
}
.progress-tabs.ajax__tab_xp .ajax__tab_header .ajax__tab_inner {
background: none !important;
padding: 0;
height: auto;
}
.progress-tabs.ajax__tab_xp .ajax__tab_header .ajax__tab_tab {
background: none !important;
padding: 0;
}
.progress-tabs.ajax__tab_xp .ajax__tab_body {
background: transparent;
border: none;
font-family: "Gotham SSm A", "Gotham SSm B", Gotham, Montserrat, Raleway, Verdana, Arial, Helvetica, sans-serif;
font-size: 1rem;
padding: 0;
}
@media (max-width: 767px) {
.progress-header,
.progress-tabs .ajax__tab_header {
display: block;
font-size: 1.2rem;
padding-top: 0;
}
.progress-steps,
.progress-tabs .ajax__tab_header .ajax__tab_outer {
display: block;
}
.progress-steps .progress-step,
.progress-tabs .ajax__tab_header > span {
text-align: left;
padding: 0;
}
.progress-steps .progress-step:before,
.progress-steps .progress-step:after,
.progress-tabs .ajax__tab_header > span:before,
.progress-tabs .ajax__tab_header > span:after {
display: none;
}
.progress-steps .progress-step .progress-step-icon,
.progress-tabs .ajax__tab_tab .step-icon {
float: left;
font-size: 1em;
line-height: 28px;
text-align: center;
width: 28px;
height: 28px;
margin: 0 10px 5px 0;
}
.progress-steps .progress-step .progress-step-title,
.progress-tabs .ajax__tab_tab .step-title {
font-size: 1.1em;
line-height: 28px;
}
.progress-steps .progress-step:hover,
.progress-tabs .ajax__tab_active .ajax__tab_tab .step-title,
.progress-tabs .ajax__tab_pre .ajax__tab_tab .step-title {
color: #ff9c00;
}
.progress-steps .progress-step {
display: block;
clear: both;
margin-bottom: 0.5em;
}
.consumer-progress .progress-steps .progress-step {
width: 100%;
}
}
.page-title + .dashboard-links {
margin-top: 3em;
}
.dashboard-links > .row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-grow: 1;
flex-basis: auto;
justify-content: center;
}
.dashboard-links > .row .col-link {
display: flex;
flex: 1 0 50%;
margin-bottom: 2em;
}
.dashboard-link {
display: block;
background: #fff;
border: 1px solid #e6e7e8;
width: 100%;
height: 100%;
padding: 0.5em 4em 2em;
position: relative;
transition: 300ms background;
text-decoration: none;
}
.dashboard-link:active,
.dashboard-link:focus,
.dashboard-link:hover {
text-decoration: none;
background-color: #f8fcff;
}
.dashboard-link .link-icon {
display: block;
margin: 3.5em auto 2.5em;
width: 75%;
background-color: #d6ebf8;
border-radius: 50%;
max-width: 150px;
}
.dashboard-link .link-icon img {
width: 100%;
height: auto;
padding: 15%;
}
.dashboard-link .link-content {
text-align: center;
display: block;
}
.dashboard-link .item-title {
display: block;
color: #03b0db;
font-size: 1.4em;
font-weight: 500;
margin-bottom: 0.5em;
}
.dashboard-link .item-description {
display: block;
color: #707070;
font-size: 1em;
line-height: 1.5em;
font-weight: 300;
margin-bottom: 1.5em;
}
.dashboard-link .link-status {
position: absolute;
top: 1.3em;
right: 1.2em;
}
.dashboard-link .link-status .badge {
font-size: 0.75em;
line-height: 1.3;
font-weight: 300;
letter-spacing: 0.5px;
padding-left: 10px;
padding-right: 10px;
text-transform: uppercase;
}
@media (max-width: 992px) {
.dashboard-links > .row .col-link {
max-width: 50%;
}
}
@media (max-width: 767px) {
.dashboard-links > .row {
margin: 0 -16px 3em;
}
.dashboard-links > .row .col-link {
padding: 0;
margin: 0 0 -1px -1px;
}
.dashboard-link {
padding-top: 2em;
}
.dashboard-link .item-description {
display: none;
}
}
.welcome-header .member-name {
font-size: 1.4em;
text-transform: uppercase;
color: #ff9c00;
margin: 0 auto 0.5em;
}
.welcome-header .page-title {
font-size: 2.1em;
font-weight: 400;
text-transform: none;
color: #707070;
margin: 0 auto 0.25em;
}
.bonus-points > p {
margin-bottom: 2em;
}
.bonus-points .points-available {
display: block;
font-size: 1.3em;
font-weight: 500;
color: #ff9c00;
text-transform: uppercase;
margin: 0 auto 1em;
}
.bonus-points .points-message {
display: block;
font-size: 1.1em;
line-height: 1.5;
margin: 0 auto 2em;
}
.bonus-points .drawings-panel .remaining {
display: block;
color: #606060;
font-size: 1.5em;
font-weight: 500;
text-align: center;
text-transform: uppercase;
margin: 0 auto 2em;
padding: 1em;
border: 5px solid #d6ebf8;
}
.bonus-points .drawings-panel .entry-list {
margin-bottom: 2em;
}
.bonus-points .drawings-panel .entry-list:after {
content: '';
display: table;
clear: both;
}
.bonus-points .drawings-panel .entry-list p {
font-size: 1.3em;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 1em;
}
.bonus-points .drawings-panel .entry-list ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.bonus-points .drawings-panel .entry-list li {
display: flex;
margin: 0 3em 2em 0;
flex-direction: row;
float: left;
}
.bonus-points .drawings-panel .entry-list li .entry-value {
display: block;
color: #fff;
font-size: 1em;
line-height: 35px;
font-weight: 500;
text-align: center;
background-color: rgba(35, 179, 96, 0.9);
border-radius: 4px;
padding: 0 1em;
}
.bonus-points .drawings-panel .entry-list li .entry-count {
display: block;
font-size: 1.5em;
color: #03b0db;
line-height: 35px;
}
.bonus-points .drawings-panel .entry-list li .entry-count .count-sep {
float: left;
margin-left: 0.75em;
margin-right: 0.75em;
}
.bonus-points .info-content h2 {
margin-top: 1em;
padding-top: 2.5em;
border-top: 1px solid #ccc;
}
.contest-list .contest-entry {
display: flex;
margin-bottom: 1.5em;
}
.contest-entry .value {
width: 65px;
float: left;
margin-right: 15px;
}
.contest-entry .entry-value span {
color: #fff;
background-color: rgba(35, 179, 96, 0.9);
padding: 0;
text-align: center;
display: block;
border-radius: 4px;
font-weight: 500;
font-size: 1.1em;
line-height: 1;
overflow: hidden;
width: 65px;
height: 40px;
line-height: 40px;
}
.contest-entry .entry-progress {
position: relative;
width: 100%;
margin: 8px;
height: 24px;
border: 1px solid #03b0db;
border-radius: 2em;
}
.contest-entry .entry-progress .progress-bar {
min-width: 60px;
border-radius: 2em;
background-color: #03b0db;
}
.contest-entry .entry-progress .progress-label {
display: block;
text-align: right;
color: #fff;
font-size: 0.8em;
line-height: 24px;
padding-right: 1em;
}
.contest-entry .entry-action {
width: 185px;
float: right;
margin-left: 15px;
}
.contest-entry .entry-action .btn {
display: block;
font-size: 0.8em;
line-height: 30px;
padding: 0 0.75em;
margin: 5px auto;
min-width: 15em;
}
.contest-entry .entry-action .btn-main {
font-weight: 500;
}
.reward-activities {
border: 5px solid #D6EBF8;
box-shadow: 6px 5px 0 0 #D6EBF8;
background: #fff;
padding: 3em;
margin: 2em auto;
}
.reward-activities .section-header h3 {
font-size: 1.8em;
text-transform: uppercase;
margin: 0 auto 0.5em;
}
.reward-activities .section-header p {
font-size: 1.3em;
text-transform: uppercase;
margin: 0 auto 1em;
}
.reward-activities .section-content {
font-size: 0;
line-height: 0;
}
.reward-activities .section-item {
display: block;
font-size: 1em;
line-height: 1.5em;
margin: 0 auto 1em;
border: 1px solid #c0c0c0;
}
.reward-activities .section-item a {
display: block;
padding: 2em;
color: #707070;
text-decoration: none;
}
.reward-activities .section-item a:hover {
background: #f6fbff;
}
.reward-activities .section-item .item-title {
display: block;
color: #03b0db;
font-size: 1.15em;
font-weight: 500;
margin: 0 auto 0.5em;
transition: all 0.2s;
}
.reward-activities .section-item a:hover .item-title {
color: #ff9c00;
}
.reward-activities .section-item .item-title .badge {
display: inline-block;
font-size: 0.7em;
line-height: 1.1em;
margin-left: 0.5em;
font-weight: 400;
}
.reward-activities .section-item p {
font-size: 1em;
margin: 0;
}
.reward-activities .highlight {
color: #ff9c00;
}
@media (min-width: 768px) {
.reward-activities .section-content {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
justify-content: center;
margin: 0 -1%;
}
.reward-activities .section-item {
display: flex;
width: 48%;
margin: 0 1% 1em;
}
.reward-activities .section-item a {
flex: 1;
}
}
.program-items .program-item {
margin-bottom: 2em;
}
.program-item .item-icon-image {
width: 100%;
padding-top: 100%;
position: relative;
background-color: #d6ebf8;
border-radius: 50%;
overflow: hidden;
margin: 1em auto;
}
.program-item .item-icon-image img {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
max-width: 65%;
height: auto;
}
.program-item .item-title {
color: #ff9c00;
font-size: 1.7em;
margin: 0 auto 0.25em;
text-transform: uppercase;
}
.program-item .item-value {
color: #03b0db;
font-size: 1.3em;
margin: 0 auto 0.5em;
text-transform: uppercase;
}
.program-item p {
line-height: 1.5em;
margin: auto;
}
.program-item .item-action {
margin: 1em auto;
}
@media (max-width: 767px) {
.program-item .item-icon {
max-width: 200px;
margin: 0 auto 0.5em;
}
}
@media (min-width: 768px) {
.program-items .program-item {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: center;
}
.program-item .item-icon {
flex: 1;
margin-right: 30px;
}
.program-item .item-content {
flex: 3;
}
}
@media (min-width: 992px) {
.program-item .item-icon {
width: 250px;
margin-right: 50px;
}
}
/* Sidebar Widgets */
.col-sidebar {}
.widget {
border: 1px solid #eee;
margin: 0 auto 2em;
font-size: 1em;
}
.widget .widget-title {
}
.widget .widget-title h3 {
margin: 0;
}
.widget .widget-content {
padding: 1.25em;
}
.widget .widget-content p {
color: #707070;
font-size: 1em;
line-height: 1.8;
font-weight: 300;
}
.widget .widget-content .alert {
}
.widget .widget-content .alert a {
color: #03b0db;
}
.widget.widget-featured {
background: #fff;
border: 5px solid #d6ebf8;
}
.widget.widget-featured .widget-title {
text-align: center;
padding: 1em;
margin: -5px -5px auto;
background: #03b0db;
box-shadow: 0 1px 0 0 #dddddd;
}
.widget.widget-featured .widget-title h3 {
color: #fff;
font-size: 1.3em;
text-transform: uppercase;
}
.widget.widget-featured .widget-content {}
.widget.widget-borderless {
border: 0;
}
.widget.widget-borderless .widget-content {
padding: 0;
}
.widget-welcome {}
.widget-welcome:after {
content: '';
display: table;
clear: both;
}
.widget-welcome .profile-img {
float: left;
width: 60px;
height: 60px;
margin-right: 1.25em;
color: #fff;
background: #ddd;
border-radius: 50%;
text-align: center;
box-shadow: 0 1px 3px -1px rgba(0,0,0,.35);
margin-bottom: 1.25em;
}
.widget-welcome .profile-img i {
font-size: 35px;
line-height: 60px;
}
.widget-welcome .welcome-name {
color: #03b0db;
font-size: 1.3em;
line-height: 1.2;
font-weight: 500;
text-transform: uppercase;
padding-top: 0.25em;
margin-bottom: 0.5em;
}
.widget-welcome .btn {
font-size: 0.85em;
font-weight: 400;
letter-spacing: 0;
}
.widget-drawings .remaining {
font-size: 1rem;
background-color: #f3f3f3;
padding: 1em;
text-align: center;
}
.widget-drawings .remaining h4 {
color: #03b0db;
font-size: 1.5em;
line-height: 1;
text-transform: uppercase;
margin: 0 auto 0.5em;
}
.widget-drawings .remaining h5 {
color: #707070;
font-size: 0.9em;
line-height: 1;
text-transform: uppercase;
margin: 0;
}
.widget-drawings .body {
padding-bottom: 1.5em;
}
.widget-drawings .entries {
font-size: 0.9em;
margin: 1em auto 0;
}
.widget-drawings .entries p {
color: #707070;
font-size: 1em;
text-transform: uppercase;
text-align: center;
}
.widget-drawings .entries ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 0;
line-height: 0;
text-align: center;
}
.widget-drawings .entries ul li {
display: inline-block;
width: 47%;
margin: 0 1% 0.5em;
padding-left: 40px;
font-size: 0.8rem;
color: #979797;
line-height: 1.5;
text-align: left;
}
.widget-drawings .entries li .count {
float: left;
width: 40px;
margin-left: -40px;
color: #0db0db;
font-size: 2.5em;
line-height: 1.25em;
font-weight: 600;
text-align: center;
}
.widget-drawings .info-block {
padding: 0 1em;
font-size: 0.8em;
line-height: 1.2;
}
.widget-drawings .info-block a {
color: #ff9c00;
}
.widget-drawings .info-block a:hover {
color: #03b0db;
}
.widget-drawings .info-block a i {
float: left;
color: #03b0db;
font-size: 2em;
margin-right: 0.4em;
margin-top: 0.1em;
}
.widget-referral .widget-content {
font-size: 0.9em;
}
.widget-referral .widget-content a {
color: #00afdd;
}
.widget-referral .widget-content a:hover {
color: #f89a1c;
}
.widget-news .widget-content ul {
list-style: none;
margin: 0.5em;
padding: 0;
}
.widget-news .widget-content li {
padding-bottom: 1.75em;
margin-bottom: 1.75em;
border-bottom: 1px solid #eee;
}
.widget-news .widget-content li:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
.widget-news .widget-content li h4 {
color: #f89a1c;
font-size: 1.1em;
font-weight: 500;
letter-spacing: 0.76px;
margin: 0 0 1.25em;
}
.widget-news .widget-content li p {
}
.widget-news .widget-content li a {
font-size: 0.9em;
color: #707070;
font-weight: 500;
}
.widget-news .widget-content li a:hover {
color: #f89a1c;
}
.widget-winners ul {
list-style: none;
display: block;
margin: 0;
padding: 0.75em;
}
.widget-winners li {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 1.5em;
}
.widget-winners li:last-child {
margin-bottom: 0;
}
.widget-winners li .item-date {
background: #ff9c00;
border-radius: 50%;
padding: 12px 0;
color: #fff;
text-align: center;
display: flex;
flex-direction: column;
width: 54px;
height: 54px;
}
.widget-winners li .item-date .date-month {
display: block;
text-transform: uppercase;
font-size: 1.1em;
line-height: 1.2;
}
.widget-winners li .item-date .date-year {
display: block;
font-size: 0.8em;
line-height: 1.2;
}
.widget-winners li .item-info {
margin-left: 1.5em;
}
.widget-winners li .item-info .item-name {
display: block;
font-size: 1.2em;
color: #03b0db;
line-height: 1.4;
font-weight: 500;
}
.widget-winners li .item-info .item-location {
font-size: 0.85em;
font-weight: 400;
}
.widget-winners li.empty-set {
display: block;
text-align: center;
}
.widget-winners li.empty-set strong {
display: block;
font-size: 1.1em;
margin-bottom: 0.5em;
}
.widget-self-serve {
background: #f5f5f5;
}
.widget-self-serve .widget-title {
background: #02b0db;
padding: 15px;
margin: -1px;
}
.widget-self-serve .widget-title h3 {
text-align: center;
color: #fff;
font-size: 18px;
line-height: 24px;
font-weight: 500;
}
.widget-self-serve .widget-title h3 strong {
display: block;
font-weight: 500;
}
.widget-self-serve .widget-content a {
display: block;
color: #808080;
font-size: 12px;
line-height: 1.5;
text-align: center;
padding: 25px;
text-decoration: none;
}
.widget-self-serve .widget-content a:hover {
color: #f89a1c;
}
.widget-self-serve .widget-content a img {
display: block;
margin: auto;
max-width: 95px;
margin-bottom: 25px;
}
/* Login */
body.login {
padding: 0 !important;
}
.body.login {
padding: 0;
margin: 0;
}
.body.login .background-col {
position: relative;
margin-left: -15px;
}
.body.login .background-col .login-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url('../images/login-screen-bg.jpg') center center no-repeat;
background-size: cover;
}
.body.login .content-col {
padding-top: 2em;
padding-bottom: 2em;
min-height: 100vh;
}
.body.login .learn-more-content {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
font-size: 3.5em;
line-height: 1;
font-weight: 700;
text-transform: uppercase;
padding: 15%;
}
.body.login .learn-more-content .title-top {
margin-bottom: 0.5em;
}
.body.login .learn-more-content .title-bottom {
margin-bottom: 1em;
}
.body.login .learn-more-content .btn.btn-main {
font-size: 1.25rem;
font-weight: 500;
color: #fff;
background-color: #ff9c00;
}
.body.login .learn-more-content .btn.btn-main:hover {
background-color: #03b0db;
border-color: #03b0db;
}
@media (min-width: 768px) {
.body.login .background-col .login-bg {
position: fixed;
width: 41.66666667%;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.body.login .content-col {
margin-left: 6%;
}
}
.login-form {
max-width: 550px;
margin-bottom: 4em;
}
.login-form .login-logo {
display: block;
margin: 0 auto 3em;
max-width: 100%;
height: auto;
}
.login-form h2 {
font-size: 2em;
line-height: 1.1em;
font-weight: 500;
color: #ff9c00;
text-transform: uppercase;
margin: 0 auto 0.25em;
padding: 0;
}
.login-form h1 {
color: #03b0db;
font-size: 1.3em;
line-height: 1.2em;
text-transform: uppercase;
margin: 0 auto 1.5em;
}
.login-form label {
font-size: 1em;
color: #707070;
text-transform: uppercase;
font-weight: 500;
line-height: 1.2em;
margin-bottom: 0.5em;
}
.login-form .form-control {
height: 40px;
padding: 8px 12px;
font-size: 1em;
line-height: 1.4;
border-radius: 0;
border-color: #dddddd;
box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.11);
}
.login-form .form-control + span {
display: block;
margin-top: 0.5em;
}
.login-form .login-link {
float: right;
text-align: right;
font-size: 0.9em;
line-height: 19px;
margin: 0;
}
.login-form .login-link a {
color: #ff9c00;
}
.login-form .login-link a:hover {
color: #03b0db;
text-decoration: none;
}
.login-register {
max-width: 550px;
}
.login-register h3 {
font-size: 1.15em;
}
.login-register p {
font-size: 1em;
}
@media (min-width: 768px) {
.body.login .content-col {
display: flex;
flex-direction: column;
justify-content: center;
}
}
@media (max-width: 767px) {
.body.login .background-col {
display: none;
}
.body.login .content-col {
padding-left: 30px;
padding-right: 30px;
}
.login-form,
.login-register {
margin-left: auto;
margin-right: auto;
}
}
/* To Organize */
/* form styles */
.intro .required {
color: #ff9c00;
}
.form .form-group {
margin-bottom: 20px;
}
.form .control-label {
font-size: 1em;
color: #707070;
text-transform: uppercase;
font-weight: 500;
line-height: 1.2em;
margin-bottom: 0.5em;
}
.form .form-control {
height: 36px;
padding: 6px 10px;
font-size: 1em;
line-height: 1.4;
border-radius: 0;
border-color: #dddddd;
box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.11);
}
.form .control-label .required {
color: #ff9c00;
margin-left: 5px;
}
.form .control-label .not-required {
color: transparent;
margin-left: 5px;
}
.form .control-label .not-required i {
visibility: hidden;
opacity: 0;
}
.form textarea.form-control {
height: auto;
}
.form .input-group-btn .btn.btn-default {
height: 36px;
padding: 8px 10px;
font-size: 1rem;
line-height: 1.4;
border-radius: 0;
border-color: #dddddd;
box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.11);
}
.form .controls:before,
.form .controls:after {
display: table;
content: " ";
}
.form .controls:after {
clear: both;
}
.form .controls .btn-main {
font-size: 1.1em;
line-height: 1.4;
font-weight: 500;
}
.form .controls .btn-left {
float: left;
}
.form .controls .btn-right {
float: right;
}
.form .has-error .control-label {
color: #a94442;
}
.form .has-error .form-control {
border-color: #a94442;
box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.11), inset 0 1px 1px rgba(0,0,0,.075);
}
.form .has-error .form-control:focus {
border-color: #843534;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #ce8483;
}
.form .has-error .input-group-btn .btn.btn-default {
color: #a94442;
border-color: #a94442;
}
.form .form-dob .form-control {
display: inline-block;
width: 75px;
margin-right: 10px;
}
.form.contact-form {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* Project Details */
.project-details .project-type {
list-style: none;
margin: 0 0 20px;
padding: 0;
font-size: 0;
line-height: 0;
}
.project-details .project-type li {
display: inline-block;
width: 25%;
padding: 1em;
font-size: 1.15em;
line-height: 1.2em;
text-align: center;
text-transform: uppercase;
font-weight: 500;
}
.project-details .project-type li .icon {
display: block;
color: #03b0db;
font-size: 1.8em;
font-weight: 600;
margin-bottom: 0.5em;
}
.project-details .project-desc {
margin-bottom: 2em;
font-size: 1.1em;
line-height: 1.5;
}
.project-panels {
text-align: center;
}
.project-panels .panel {
background: #fff;
border: 1px solid #e6e7e8;
padding: 2em 1em;
}
.project-panels .panel h3 {
font-size: 1.4em;
line-height: 1.4;
margin: 0 0 1em;
text-transform: uppercase;
font-weight: 500;
}
.body .intro {
margin-top: 2em;
}
.sidebar-box {
background: #fff;
border: 1px solid #e6e7e8;
padding: 2em;
margin: 2em auto;
}
.sidebar-box h3 {
margin: 0 0 0.75em;
font-size: 1.15em;
line-height: 1.3;
color: #0db0db;
}
.sidebar-box p {
font-size: 1em;
line-height: 1.5em;
}
.sidebar-box .btn i {
margin-right: 5px;
}
.sidebar-share ul {
display: block;
list-style: none;
margin: 0 -5px;
padding: 0;
font-size: 0;
line-height: 0;
}
.sidebar-share ul li {
display: inline-block;
text-align: center;
margin: 0 5px;
}
.sidebar-share h3 {
font-size: 1em;
line-height: 1.2em;
font-weight: 500;
text-transform: uppercase;
margin: 0 0 1em;
}
.sidebar-share {
margin: 0 auto 2em;
}
.sidebar-share a {
display: block;
width: 30px;
height: 30px;
font-size: 1.15em;
line-height: 30px;
border: 1px solid;
}
.sidebar-share a:hover {
color: #fff;
}
.sidebar-share .facebook {
color: #3c6195;
border-color: #3c6195;
}
.sidebar-share .facebook:hover {
background-color: #3c6195;
}
.sidebar-share .twitter {
color: #28add6;
border-color: #28add6;
}
.sidebar-share .twitter:hover {
background-color: #28add6;
}
.sidebar-share .x-twitter {
color: #000000;
border-color: #000000;
}
.sidebar-share .x-twitter:hover {
color: #ffffff;
background-color: #000000;
}
.sidebar-share .linkedin {
color: #0077b5;
border-color: #0077b5;
}
.sidebar-share .linkedin:hover {
background-color: #0077b5;
}
.sidebar-share .googleplus {
color: #dc4e41;
border-color: #dc4e41;
}
.sidebar-share .googleplus:hover {
background-color: #dc4e41;
}
/* Study details */
.study-details .study-specs {
display: block;
list-style: none;
font-size: 0;
text-align: center;
margin: 1rem auto 2rem;
padding: 0;
}
.study-details .study-specs li {
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 1rem;
text-align: left;
margin: 0 1.25em 1.3em;
padding-left: 50px;
}
.study-details .study-specs li.no-icon {
padding-left: 0;
}
.study-details .study-specs .icon {
position: absolute;
display: block;
width: 40px;
text-align: right;
margin-left: -50px;
padding-top: 0.15em;
}
.study-details .study-specs i {
font-size: 2em;
color: #03b0db;
}
.study-details .study-specs strong {
display: block;
font-size: 0.9em;
font-weight: 500;
color: #0db0db;
/*white-space: nowrap;*/
text-transform: uppercase;
}
.study-details .study-specs span {
display: block;
font-size: 1.15em;
font-weight: 500;
text-transform: uppercase;
/*white-space: nowrap;*/
}
.study-details .study-specs .icon {
float: left;
}
.study-details .study-description {
font-size: 1.3em;
line-height: 1.75;
text-align: center;
}
.study-details h3 {
color: #ff9c00;
font-size: 1.4em;
font-weight: 500;
margin: 0 auto 1em;
}
.study-details .study-referral {
border: 1px solid #e6e7e8;
background: #fff;
padding: 2em;
margin-bottom: 2.5em;
}
.study-details .study-referral h3 {
color: #0db0db;
font-size: 1.25rem;
font-weight: 500;
line-height: 1.5;
margin: 0 auto 0.75em;
}
.study-details .study-referral p {
font-size: 1.1em;
line-height: 1.5;
}
.study-details .study-referral .control-label {
font-size: 0.9em;
}
.study-details .study-referral textarea {
height: 10rem;
}
.study-details .study-share {
text-align: center;
}
.study-details .study-share h4 {
font-size: 1.1em;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.25px;
margin: 0 auto 1em;
}
.study-details .panel {
background: #fff;
border: 1px solid #e6e7e8;
padding: 2em;
}
.study-details .panel h2 {
color: #03b0db;
font-size: 1.8em;
line-height: 1.3;
font-weight: 500;
text-transform: uppercase;
margin: 0 auto 0.5em;
}
.study-details .panel p {
font-size: 1.1em;
line-height: 1.75;
min-height: 3.2em;
margin: 0 0 0.25em;
}
.study-details .panel .btn {
font-size: 1em;
letter-spacing: 0;
margin: 1em 0.5em 0 0;
}
.study-details .share-row {
margin-top: 3em;
}
@media (min-width: 768px) {
.study-details .panel-row {
display: flex;
flex-direction: row;
flex-grow: 1;
margin-bottom: 1em;
}
.study-details .panel-row .panel {
margin-bottom: 0;
height: 100%;
}
}
.QuestionPanel > table {
width: 100%;
}
.QuestionPanel .QuestionText {
text-align: left;
}
.QuestionPanel img {
max-width: 100%;
height: auto;
}
.QuestionText .QuestionMedia {
display: block;
margin: auto;
text-align: center;
padding: 10px;
}
.QuestionText .QuestionMedia img {
max-width: 400px;
margin: 0 auto 10px;
}
.BuilderHeaderText .QuestionMedia {
display: block;
margin: auto;
text-align: center;
padding: 10px;
}
.BuilderHeaderText .QuestionMedia img {
max-width: 400px;
margin: 0 auto 10px;
}
.QGroupLegend {
font-size: 13px;
line-height: 16px;
padding: 5px;
}
.QGroupLegend p {
margin: 0 auto 8px;
}
.QGroupLegend p strong {
display: block;
font-weight: 700;
}
.QGroupTable {
width: auto;
border: 1px solid #ddd;
border-collapse: collapse;
}
.QGroupTable td {
padding: 8px;
border: 1px solid #ddd;
}
.QGroupTable .qgt-corner {
background: #f5f5f5;
}
.QGroupTable .qgt-header {
background: #ececec;
vertical-align: bottom;
text-align: center;
}
.QGroupTable .qgt-title {
background: #ececec;
vertical-align: top;
text-align: left;
}
.QGroupTable .qgt-cell {
vertical-align: middle;
text-align: center;
}
.QGroupTable .qg-image {
display: block;
margin: 10px auto;
text-align: center;
}
.QGroupTable .qg-image img {
width: 100%;
max-width: 75px;
height: auto;
}
label .item-image {
display: block;
max-width: 150px;
padding: 10px;
}
label .item-image img {
width: 100%;
height: auto;
}
.hl-text {
display: block;
font-size: 13px;
font-weight: 400;
margin: 5px 0;
}
.hl-button {
display:inline-block;
font-size:13px;
line-height: 1em;
font-weight: 400;
color:#333;
background-color:#efefef;
border-radius:4px;
border:1px solid #bbb;
padding: 8px 16px;
text-decoration:none;
transition: all 150ms;
margin: 5px 0;
box-shadow:inset 0px 1px 0px 0px #ffffff;
}
.hl-button:hover {
color: #000;
background-color:#dedede;
text-decoration: none;
}
.hl-button:active, .hl-button:focus {
position:relative;
top:1px;
text-decoration: none;
}
.ll-capture-control {
text-align: center;
}
.ll-capture-control iframe {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.ll-media-success {
display: none;
font-size: 1.1em;
font-weight: 500;
padding: 1em 0;
text-align: left;
}
.ll-media-success.ll-media-uploaded {
display: block;
}
.aytm-pw-embed {
max-width: 600px;
margin: auto;
}
.aytm-pw-embed-loader {
position: relative;
clear: both;
height: 280px;
padding: 40px 0 0;
margin: 0 auto;
text-align: center;
background: transparent url(https://aytm.com/images/pw/selp.png) no-repeat scroll center center
}
.aytm-pw-embed-loader-image {
width: 200px;
margin: 0 auto;
padding: 25px 0 0;
border: none;
}
.user-notice {
color: #fff;
background-color: #03b0db;
padding: 1.5em 2.5em;
margin: 0 auto 3em;
}
.user-notice:after {
display: table;
content: '';
clear: both;
}
.user-notice p {
font-size: 1.2em;
line-height: 1.4;
padding: 7px 0;
margin-bottom: 0;
letter-spacing: 0.825px;
}
.user-notice .btn {
color: #fff;
background-color: #ff9c00;
font-size: 1em;
line-height: 1em;
padding: 0.75em 2.5em;
text-transform: uppercase;
}
.user-notice .btn:hover {
background-color: #707070;
}
@media (min-width: 1200px ) {
.user-notice p {
float: left;
max-width: 80%;
max-width: calc(100% - 130px);
}
.user-notice .btn {
float: right;
}
}
/*!
* Hamburgers
* @description Tasty CSS-animated hamburgers
* @author Jonathan Suh @jonsuh
* @site https://jonsuh.com/hamburgers
* @link https://github.com/jonsuh/hamburgers
*/
.hamburger {
padding: 14px 0;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
outline: none;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger:focus {
outline: none;
}
.hamburger-box {
width: 30px;
height: 18px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 30px;
height: 3px;
background-color: #03b0db;
border-radius: 3px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -7px;
}
.hamburger-inner::after {
bottom: -7px;
}
.hamburger--squeeze .hamburger-inner {
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze.is-active .hamburger-inner {
transform: rotate(45deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (max-width: 767px) {
.form .form-control {
font-size: 16px;
}
}
/* timk FMP-43 */
.ajax__fileupload .ajax__fileupload_queueContainer .ajax__fileupload_fileItemInfo .removeButton,
.ajax__fileupload .ajax__fileupload_footer .ajax__fileupload_uploadbutton {
width: 75px !important;
padding-left: 4px !important;
padding-right: 4px !important;
}
.ajax__fileupload_fileItemInfo .filetype {
display: none !important;
}
/* timk FMP-56*/
.calMenuHidden {
display: none;
background-color: #ffffff;
border: solid 1px black;
Z-INDEX: 101;
POSITION: absolute;
padding: 0px 3px 0 3px;
/*top: 0;*/
}
.calMenuHidden ul.calMenu {
list-style: none;
padding-left: 0;
}
.calMenuHidden ul.calMenu li {
list-style: none;
padding: 0 0 0 0;
line-height: 30px;
float: none !important;
display: block;
margin-bottom: 0;
}
.calMenuHidden ul.calMenu .li-apple {
background: url('/images/cal-apple.png') no-repeat no-repeat;
padding-left: 30px;
float: none !important;
}
.calMenuHidden ul.calMenu .li-google {
background: url('/images/cal-google.png') no-repeat no-repeat;
padding-left: 30px;
float: none !important;
}
.calMenuHidden ul.calMenu .li-outlook {
background: url('/images/cal-outlook.png') no-repeat no-repeat;
padding-left: 30px;
float: none !important;
}
.calMenuHidden ul.calMenu .li-outlook-com {
background: url('/images/cal-outlook-com.png') no-repeat no-repeat;
padding-left: 30px;
float: none !important;
}
.calMenuHidden ul.calMenu .li-yahoo {
background: url('/images/cal-yahoo.png') no-repeat no-repeat;
padding-left: 30px;
float: none !important;
}
.calMenuHidden ul.calMenu .li-office365 {
background: url('/images/cal-office365.png') no-repeat no-repeat;
padding-left: 30px;
float: none !important;
}
.calMenuHidden ul.calMenu a:link {
text-decoration: none;
font-weight: bold;
}
.calMenuHidden ul.calMenu a:hover {
color: #000000;
}
.calMenuHidden ul.calMenu li:hover {
cursor: pointer;
text-decoration: underline;
}
/* timk FMP-7 added styling for self-schedule user control */
/* the div row class for a time slot item */
.ssTimeSlot {
border: 1px solid #000000;
background-color: #ff9c00;
padding: 3px;
margin: 0px;
white-space:nowrap;
max-width: 300px;
align-items: center;
}
.ssTimeSlotText {
color: #000000;
/*font-weight: bold;*/
font-size: 24px;
}
/* the div around the date display */
.ssTimeSlotDateContainer {
height: 40px;
font-size: 22px;
font-weight: bold;
float: none;
display: table-cell;
vertical-align: bottom;
}
/* the label that displays the date */
.ssTimeSlotDate {
vertical-align: bottom !important;
}
.ssConfirmContainer {
max-width: 400px;
}
/* the selected time for the confirmation message */
.ssSelectedTime {
}
/* the selected date for the confirmation message */
.ssSelectedDate {
}
.ssButtonPanel {
margin-top: 10px;
}
@media (min-width: 767px) {
.messages-wrapper .row {
display: flex;
flex: 1 1 auto;
flex-direction: row;
}
.messages-wrapper .messages-column,
.messages-wrapper .message-chat-column {
display: flex;
float: none;
flex-direction: column;
flex-grow: 1;
}
.messages-wrapper .messages-column {
border-right: 1px solid #ddd;
padding-right: 0;
}
.messages-wrapper .message-chat-column {
padding-left: 0;
}
.messages-box {
height: 100%;
}
.message-chat-box {
/*min-height: 500px;*/
max-height: 450px;
min-height: 250px;
display: flex;
flex-direction: column-reverse;
height: 100%;
}
}
.messages-wrapper {
box-shadow: 0 6px 12px 3px rgba(0,0,0,.15);
border: 1px solid #ddd;
margin-bottom: 30px;
}
.messages-header,
.message-chat-header {
min-height: 50px;
padding: 10px 15px;
border-bottom: 1px solid #ddd;
}
.messages-header p {
font-size: 14px;
line-height: 30px;
text-transform: uppercase;
font-weight: 700;
margin: 0;
}
.messages-header .form-group {
display: flex;
margin-bottom: 10px;
align-items: center;
}
.messages-header .form-group:last-child {
margin-bottom: 0;
}
.messages-header .form-group .control-label {
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
margin: 0 10px 0 0;
}
.messages-header .form-group .form-control {
height: 30px;
font-size: 13px;
line-height: 18px;
padding: 3px 8px;
text-overflow: ellipsis;
}
.messages-box {
overflow-x: hidden;
overflow-y: auto;
}
.messages-box .list-group {
margin-bottom: 0;
}
.messages-box .list-group-item {
color: #808080;
border-radius: 0;
border-left: 0;
border-right: 0;
}
.messages-box .list-group-item:first-child {
border-top: 0;
}
.messages-box .list-group-item.unread {
color: #555;
font-weight: bold;
}
.messages-box .list-group-item.current:before {
display: block;
position: absolute;
content: '';
top: 0;
left: 0;
width: 5px;
height: 100%;
background-color: #337ab7;
}
.message-list-item {
}
.message-list-item .message-title {
display: flex;
align-items: center;
justify-content: space-between;
letter-spacing: -0.0875px;
}
.message-list-item .message-title p {
font-size: 14px;
font-weight: 500;
margin: 0;
}
.message-list-item .message-title .date {
color: #b0b0b0;
font-size: 12px;
font-weight: 300;
}
.message-list-item .message-subject p {
font-size: 12px;
font-weight: 500;
margin-bottom: 5px;
}
.message-list-item .message-preview {
font-size: 12px;
line-height: 1.4;
max-height: 1.4em;
font-weight: 300;
margin-bottom: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.message-list-item .message-preview i {
margin-right: 5px;
}
.messages-box .list-group-item.unread .message-list-item .message-title,
.messages-box .list-group-item.unread .message-list-item .message-preview {
color: #505050;
font-weight: 500;
}
.message-chat-box {
/*min-height: 500px;*/
max-height: 450px;
min-height: 250px;
overflow-x: hidden;
overflow-y: auto;
padding: 15px;
display: flex;
flex-direction: column-reverse;
}
.message-chat-box .message-chat-notice {
display: flex;
flex-grow: 1;
justify-content: center;
height: 100%;
font-size: 24px;
color: #ddd;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
padding: 0 20%;
}
.mesage-chat-body {
flex: 1;
font-size: 12px;
font-weight: 400;
}
.message-chat {
display: flex;
margin-bottom: 1em;
max-width: 70%;
flex-grow: 1;
}
.message-chat .message-chat-body {
flex: 1;
}
.message-chat .message-date {
font-size: 12px;
padding: 0 5px;
}
.message-chat .message-chat-content {
background: #f5f5f5;
padding: 10px 15px;
border-radius: 4px;
display: inline-block;
}
.message-chat .message-chat-content p {
font-size: 13px;
margin: 0;
}
.message-chat.message-chat-tx {
margin-left: auto;
text-align: right;
}
.message-chat.message-chat-tx .message-date {
text-align: right;
}
.message-chat.message-chat-tx .message-chat-content {
background-color: #337ab7;
color: #fff;
text-align: left;
}
.message-chat-footer {
display: flex;
flex-direction: row;
flex: 1 1 auto;
padding: 15px;
border-top: 1px solid #ddd;
background: #fcfcfc;
}
.message-chat-footer .form-control {
font-size: 12px;
/*
border-radius: 0;
background: #f6f7f8;
border: none;
padding: 8px 15px;
height: 40px;
*/
}
.message-chat-footer .form-control[disabled] {
color: #555;
background: #ccc;
opacity: .65;
}
.message-chat-footer .footer-actions {
margin-left: 15px;
}
.message-chat-footer .footer-actions .btn {
font-size: 13px;
text-transform: uppercase;
height: 40px;
}
.message-chat-footer .footer-actions .btn[disabled] {
color: #555;
background-color: #ccc;
opacity: .65;
}
.linked-comment-row {
display: none;
}
.preview-alert {
}
.preview-alert .preview-info {
display: flex;
align-items: center;
margin-top: 10px;
}
.preview-alert .preview-buttons {
}
.preview-alert .preview-pages {
font-weight: 700;
text-align: right;
}
/*
Date: 2024-03-13
Author: Simone Scigliuzzi
Task: https://amrt.atlassian.net/browse/FMP-1022
Add Facebook, Google, Apple and Microsoft as federated login providers. Place these below the login button with the label “Or login with”
*/
.divider {
display: flex;
align-items: center;
}
.divider::before, .divider::after {
flex: 1;
content: '';
padding: 1px;
background-color: #f7f7f7;
margin: 10px;
}
.social-login {
background: none;
border: solid 1px #707070;
padding: 4px;
display:inline-block;
margin:2px;
width:215px;
white-space:nowrap;
text-align:left;
}
.social-login:hover {
background-color: #eeeeee;
}
.social-login img {
width: 25px;
height: 25px;
}
@media screen and (max-width: 767px) {
.table-responsive {
overflow-y: auto;
}
.mobile-header {
display: none;
visibility: hidden;
}
.mobile-footer {
display: none;
visibility: hidden;
}
.logged-in-body-tag {
padding-top: 0px !important;
}
section.body {
padding-top: 0px;
}
.QGroupTable {
width: auto;
table-layout: auto;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.QGroupTable .qgt-title {
min-width: 150px;
word-wrap: break-word;
word-break: break-word;
white-space: normal;
}
.QGroupTable .qgt-header {
min-width: 80px;
word-wrap: break-word;
word-break: break-word;
white-space: normal;
}
.QGroupTable .qgt-cell {
min-width: 50px;
}
/* Mobile view from prescreener form input field*/
input[id*="ContentPlaceHolder1"][type="text"] {
width: 100% !important;
}
textarea[id*="ContentPlaceHolder1"] {
width: 100% !important;
}
/* Mobile view form homework video screen table*/
table#dpq1700_gvFiles {
table-layout: fixed;
}
video {
width: -webkit-fill-available;
}
.mobile-dashboard-view {
display: none;
}
}
.mobile-app-notice {
position: fixed;
left: 0;
right: 0;
bottom: -120px;
background: #222;
color: #fff;
text-shadow: 0 0 10px rgba(0,0,0,0.75);
z-index: 9999;
transition: bottom 0.5s cubic-bezier(0.4,0,0.2,1);
padding: 20px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
text-align: center;
}
.mobile-app-notice.show {
bottom: 0;
}
.mobile-app-notice .notice-content {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}
.mobile-app-notice .notice-text {
font-size: 18px;
margin-right: 10px;
}
.mobile-app-notice .store-link img {
height: 36px;
margin: 0 4px;
}
.mobile-app-notice .close-notice {
cursor: pointer;
background: none;
border: none;
color: #fff;
font-size: 20px;
line-height: 1;
padding: 5px;
margin: -20px 0 0 -5px;
}
@media (max-width: 600px) {
.mobile-app-notice {
bottom: -240px;
}
.mobile-app-notice .notice-content {
gap: 8px;
}
.mobile-app-notice .notice-text {
width: 100%;
margin-right: 0;
margin-bottom: 8px;
}
.mobile-app-notice .store-link img {
height: 32px;
}
.mobile-app-notice .close-notice {
position: absolute;
top: 0;
right: 0;
margin: 0;
}
}