580 lines
11 KiB
CSS
580 lines
11 KiB
CSS
.tarif_head_automatic_files {
|
|
|
|
@media (max-width: 768px) {
|
|
.pricing-card {
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
.popular-badge {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #daf2ee;
|
|
padding: 10px;
|
|
margin: -20px -28px 20px;
|
|
}
|
|
|
|
.popular-badge span {
|
|
color: #0aa690;
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.pricing-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.plan-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.plan-title {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 24px;
|
|
line-height: 24px;
|
|
color: #16274f;
|
|
margin: 0;
|
|
}
|
|
|
|
.plan-subtitle {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #4b5162;
|
|
margin: 0;
|
|
}
|
|
|
|
.price-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.price-wrapper {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 4px;
|
|
}
|
|
|
|
.price {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
letter-spacing: -0.24px;
|
|
line-height: 24px;
|
|
color: #16274f;
|
|
}
|
|
|
|
.highlighted .price,
|
|
.highlighted .price-period,
|
|
.highlighted .sessions {
|
|
color: #0aa690;
|
|
|
|
}
|
|
|
|
|
|
.mysy_highlighted {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
|
|
.price-period {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
color: #16274f;
|
|
}
|
|
|
|
.sessions {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
color: #16274f;
|
|
}
|
|
|
|
.choose-plan-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12px 10px;
|
|
border-radius: 200px;
|
|
border: 1px solid #c7c9ce;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.choose-plan-btn span {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 122%;
|
|
color: #4b5162;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.position_detail_price{
|
|
margin-top: -20px;
|
|
margin-bottom: 5rem;
|
|
width: 100%;
|
|
float: left;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
@media only screen and (min-width: 601px) and (max-width: 991px) {
|
|
|
|
.pricing-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 20px 2px;
|
|
background-color: #ffffff;
|
|
/* border: 1px solid #ecf1fc;*/
|
|
/* min-width: 200px;*/
|
|
max-width: 300px;
|
|
flex: 1;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.popular-badge {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #daf2ee;
|
|
padding: 10px;
|
|
margin: -20px -2px 0px;
|
|
}
|
|
|
|
.popular-badge span {
|
|
color: #0aa690;
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.pricing-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.plan-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.plan-title {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
line-height: 24px;
|
|
color: #16274f;
|
|
margin: 0;
|
|
}
|
|
|
|
.plan-subtitle {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #4b5162;
|
|
margin: 0;
|
|
}
|
|
|
|
.price-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.price-wrapper {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 4px;
|
|
}
|
|
|
|
.price {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
letter-spacing: -0.24px;
|
|
line-height: 24px;
|
|
color: #16274f;
|
|
}
|
|
|
|
.highlighted .price,
|
|
.highlighted .price-period,
|
|
.highlighted .sessions {
|
|
color: #0aa690;
|
|
|
|
}
|
|
|
|
|
|
.mysy_highlighted {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
|
|
.price-period {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
color: #16274f;
|
|
}
|
|
|
|
.sessions {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
color: #16274f;
|
|
}
|
|
|
|
.choose-plan-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12px 2px;
|
|
border-radius: 200px;
|
|
border: 1px solid #c7c9ce;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.choose-plan-btn span {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
line-height: 122%;
|
|
color: #4b5162;
|
|
padding: 0 2px;
|
|
}
|
|
|
|
|
|
.position_detail_price{
|
|
margin-top: -20px;
|
|
margin-bottom: 5rem;
|
|
width: 100%;
|
|
float: left;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
@media only screen and (min-width: 992px) and (max-width: 1199px) {
|
|
|
|
.pricing-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 20px 2px;
|
|
background-color: #ffffff;
|
|
/* border: 1px solid #ecf1fc;*/
|
|
/* min-width: 200px;*/
|
|
max-width: 300px;
|
|
flex: 1;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.popular-badge {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #daf2ee;
|
|
padding: 10px;
|
|
margin: -20px -2px 0px;
|
|
}
|
|
|
|
.popular-badge span {
|
|
color: #0aa690;
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.pricing-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.plan-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.plan-title {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 24px;
|
|
line-height: 24px;
|
|
color: #16274f;
|
|
margin: 0;
|
|
}
|
|
|
|
.plan-subtitle {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #4b5162;
|
|
margin: 0;
|
|
}
|
|
|
|
.price-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.price-wrapper {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 4px;
|
|
}
|
|
|
|
.price {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
letter-spacing: -0.24px;
|
|
line-height: 24px;
|
|
color: #16274f;
|
|
}
|
|
|
|
.highlighted .price,
|
|
.highlighted .price-period,
|
|
.highlighted .sessions {
|
|
color: #0aa690;
|
|
|
|
}
|
|
|
|
|
|
.mysy_highlighted {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
|
|
.price-period {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
color: #16274f;
|
|
}
|
|
|
|
.sessions {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
color: #16274f;
|
|
}
|
|
|
|
.choose-plan-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12px 2px;
|
|
border-radius: 200px;
|
|
border: 1px solid #c7c9ce;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.choose-plan-btn span {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
line-height: 122%;
|
|
color: #4b5162;
|
|
padding: 0 2px;
|
|
}
|
|
|
|
|
|
.position_detail_price{
|
|
margin-top: -20px;
|
|
margin-bottom: 5rem;
|
|
width: 100%;
|
|
float: left;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
@media only screen and (min-width: 1200px) {
|
|
|
|
.pricing-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 20px 28px;
|
|
background-color: #ffffff;
|
|
/* border: 1px solid #ecf1fc;*/
|
|
min-width: 200px;
|
|
max-width: 300px;
|
|
flex: 1;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.popular-badge {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #daf2ee;
|
|
padding: 10px;
|
|
margin: -20px -28px 20px;
|
|
}
|
|
|
|
.popular-badge span {
|
|
color: #0aa690;
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.pricing-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.plan-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.plan-title {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 24px;
|
|
line-height: 24px;
|
|
color: #16274f;
|
|
margin: 0;
|
|
}
|
|
|
|
.plan-subtitle {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #4b5162;
|
|
margin: 0;
|
|
}
|
|
|
|
.price-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.price-wrapper {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 4px;
|
|
}
|
|
|
|
.price {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
letter-spacing: -0.24px;
|
|
line-height: 24px;
|
|
color: #16274f;
|
|
}
|
|
|
|
.highlighted .price,
|
|
.highlighted .price-period,
|
|
.highlighted .sessions {
|
|
color: #0aa690;
|
|
|
|
}
|
|
|
|
|
|
.mysy_highlighted {
|
|
margin-top: 28px;
|
|
}
|
|
|
|
|
|
.price-period {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
color: #16274f;
|
|
}
|
|
|
|
.sessions {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
color: #16274f;
|
|
}
|
|
|
|
.choose-plan-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12px 10px;
|
|
border-radius: 200px;
|
|
border: 1px solid #c7c9ce;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.choose-plan-btn span {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
line-height: 122%;
|
|
color: #4b5162;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
|
|
.position_detail_price{
|
|
margin-top: -10px;
|
|
margin-bottom: 5rem;
|
|
width: 100%;
|
|
float: left;
|
|
}
|
|
|
|
}
|
|
|
|
} |