File: /home/suanchonac/domains/suanchon.ac.th/public_html/pretest2567/css/uikit-mini-skc.css
/* ========================================================================
Component: Grid
========================================================================== */
/*
* 1. Allow cells to wrap into the next line
* 2. Reset list
*/
.uk-grid {
display: flex;
/* 1 */
flex-wrap: wrap;
/* 2 */
margin: 0;
padding: 0;
list-style: none;
}
/*
* Grid cell
* Note: Space is allocated solely based on content dimensions, but shrinks: 0 1 auto
* Reset margin for e.g. paragraphs
*/
.uk-grid > * {
margin: 0;
}
/*
* Remove margin from the last-child
*/
.uk-grid > * > :last-child {
margin-bottom: 0;
}
/* Gutter
========================================================================== */
/*
* Default
*/
/* Horizontal */
.uk-grid {
margin-left: -30px;
}
.uk-grid > * {
padding-left: 30px;
}
/* Vertical */
.uk-grid + .uk-grid,
.uk-grid > .uk-grid-margin,
* + .uk-grid-margin {
margin-top: 30px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
/* Horizontal */
.uk-grid {
margin-left: -40px;
}
.uk-grid > * {
padding-left: 40px;
}
/* Vertical */
.uk-grid + .uk-grid,
.uk-grid > .uk-grid-margin,
* + .uk-grid-margin {
margin-top: 40px;
}
}
/*
* Small
*/
/* Horizontal */
.uk-grid-small,
.uk-grid-column-small {
margin-left: -15px;
}
.uk-grid-small > *,
.uk-grid-column-small > * {
padding-left: 15px;
}
/* Vertical */
.uk-grid + .uk-grid-small,
.uk-grid + .uk-grid-row-small,
.uk-grid-small > .uk-grid-margin,
.uk-grid-row-small > .uk-grid-margin,
* + .uk-grid-margin-small {
margin-top: 15px;
}
/*
* Medium
*/
/* Horizontal */
.uk-grid-medium,
.uk-grid-column-medium {
margin-left: -30px;
}
.uk-grid-medium > *,
.uk-grid-column-medium > * {
padding-left: 30px;
}
/* Vertical */
.uk-grid + .uk-grid-medium,
.uk-grid + .uk-grid-row-medium,
.uk-grid-medium > .uk-grid-margin,
.uk-grid-row-medium > .uk-grid-margin,
* + .uk-grid-margin-medium {
margin-top: 30px;
}
/*
* Large
*/
/* Horizontal */
.uk-grid-large,
.uk-grid-column-large {
margin-left: -40px;
}
.uk-grid-large > *,
.uk-grid-column-large > * {
padding-left: 40px;
}
/* Vertical */
.uk-grid + .uk-grid-large,
.uk-grid + .uk-grid-row-large,
.uk-grid-large > .uk-grid-margin,
.uk-grid-row-large > .uk-grid-margin,
* + .uk-grid-margin-large {
margin-top: 40px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
/* Horizontal */
.uk-grid-large,
.uk-grid-column-large {
margin-left: -70px;
}
.uk-grid-large > *,
.uk-grid-column-large > * {
padding-left: 70px;
}
/* Vertical */
.uk-grid + .uk-grid-large,
.uk-grid + .uk-grid-row-large,
.uk-grid-large > .uk-grid-margin,
.uk-grid-row-large > .uk-grid-margin,
* + .uk-grid-margin-large {
margin-top: 70px;
}
}
/*
* Collapse
*/
/* Horizontal */
.uk-grid-collapse,
.uk-grid-column-collapse {
margin-left: 0;
}
.uk-grid-collapse > *,
.uk-grid-column-collapse > * {
padding-left: 0;
}
/* Vertical */
.uk-grid + .uk-grid-collapse,
.uk-grid + .uk-grid-row-collapse,
.uk-grid-collapse > .uk-grid-margin,
.uk-grid-row-collapse > .uk-grid-margin {
margin-top: 0;
}
/* Divider
========================================================================== */
.uk-grid-divider > * {
position: relative;
}
.uk-grid-divider > :not(.uk-first-column)::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
border-left: 1px solid #e5e5e5;
}
/* Vertical */
.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
content: "";
position: absolute;
left: 0;
right: 0;
border-top: 1px solid #e5e5e5;
}
/*
* Default
*/
/* Horizontal */
.uk-grid-divider {
margin-left: -60px;
}
.uk-grid-divider > * {
padding-left: 60px;
}
.uk-grid-divider > :not(.uk-first-column)::before {
left: 30px;
}
/* Vertical */
.uk-grid-divider.uk-grid-stack > .uk-grid-margin {
margin-top: 60px;
}
.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
top: -30px;
left: 60px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
/* Horizontal */
.uk-grid-divider {
margin-left: -80px;
}
.uk-grid-divider > * {
padding-left: 80px;
}
.uk-grid-divider > :not(.uk-first-column)::before {
left: 40px;
}
/* Vertical */
.uk-grid-divider.uk-grid-stack > .uk-grid-margin {
margin-top: 80px;
}
.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
top: -40px;
left: 80px;
}
}
/*
* Small
*/
/* Horizontal */
.uk-grid-divider.uk-grid-small,
.uk-grid-divider.uk-grid-column-small {
margin-left: -30px;
}
.uk-grid-divider.uk-grid-small > *,
.uk-grid-divider.uk-grid-column-small > * {
padding-left: 30px;
}
.uk-grid-divider.uk-grid-small > :not(.uk-first-column)::before,
.uk-grid-divider.uk-grid-column-small > :not(.uk-first-column)::before {
left: 15px;
}
/* Vertical */
.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin,
.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin {
margin-top: 30px;
}
.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin::before {
top: -15px;
left: 30px;
}
.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin::before {
top: -15px;
}
.uk-grid-divider.uk-grid-column-small.uk-grid-stack > .uk-grid-margin::before {
left: 30px;
}
/*
* Medium
*/
/* Horizontal */
.uk-grid-divider.uk-grid-medium,
.uk-grid-divider.uk-grid-column-medium {
margin-left: -60px;
}
.uk-grid-divider.uk-grid-medium > *,
.uk-grid-divider.uk-grid-column-medium > * {
padding-left: 60px;
}
.uk-grid-divider.uk-grid-medium > :not(.uk-first-column)::before,
.uk-grid-divider.uk-grid-column-medium > :not(.uk-first-column)::before {
left: 30px;
}
/* Vertical */
.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin,
.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin {
margin-top: 60px;
}
.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin::before {
top: -30px;
left: 60px;
}
.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin::before {
top: -30px;
}
.uk-grid-divider.uk-grid-column-medium.uk-grid-stack > .uk-grid-margin::before {
left: 60px;
}
/*
* Large
*/
/* Horizontal */
.uk-grid-divider.uk-grid-large,
.uk-grid-divider.uk-grid-column-large {
margin-left: -80px;
}
.uk-grid-divider.uk-grid-large > *,
.uk-grid-divider.uk-grid-column-large > * {
padding-left: 80px;
}
.uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before,
.uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before {
left: 40px;
}
/* Vertical */
.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin {
margin-top: 80px;
}
.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
top: -40px;
left: 80px;
}
.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before {
top: -40px;
}
.uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before {
left: 80px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
/* Horizontal */
.uk-grid-divider.uk-grid-large,
.uk-grid-divider.uk-grid-column-large {
margin-left: -140px;
}
.uk-grid-divider.uk-grid-large > *,
.uk-grid-divider.uk-grid-column-large > * {
padding-left: 140px;
}
.uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before,
.uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before {
left: 70px;
}
/* Vertical */
.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin {
margin-top: 140px;
}
.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
top: -70px;
left: 140px;
}
.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before {
top: -70px;
}
.uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before {
left: 140px;
}
}
/* Match child of a grid cell
========================================================================== */
/*
* Behave like a block element
* 1. Wrap into the next line
* 2. Take the full width, at least 100%. Only if no class from the Width component is set.
* 3. Expand width even if larger than 100%, e.g. because of negative margin (Needed for nested grids)
*/
.uk-grid-match > *,
.uk-grid-item-match {
display: flex;
/* 1 */
flex-wrap: wrap;
}
.uk-grid-match > * > :not([class*='uk-width']),
.uk-grid-item-match > :not([class*='uk-width']) {
/* 2 */
box-sizing: border-box;
width: 100%;
/* 3 */
flex: auto;
}
/* ========================================================================
Component: Card
========================================================================== */
.uk-card {
position: relative;
box-sizing: border-box;
transition: box-shadow 0.1s ease-in-out;
}
/* Sections
========================================================================== */
.uk-card-body {
display: flow-root;
padding: 30px 30px;
}
.uk-card-header {
display: flow-root;
padding: 15px 30px;
}
.uk-card-footer {
display: flow-root;
padding: 15px 30px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
.uk-card-body {
padding: 40px 40px;
}
.uk-card-header {
padding: 20px 40px;
}
.uk-card-footer {
padding: 20px 40px;
}
}
/*
* Remove margin from the last-child
*/
.uk-card-body > :last-child,
.uk-card-header > :last-child,
.uk-card-footer > :last-child {
margin-bottom: 0;
}
/* Media
========================================================================== */
/*
* Reserved alignment modifier to style the media element, e.g. with `border-radius`
* Implemented by the theme
*/
/* Title
========================================================================== */
.uk-card-title {
font-size: 1.5rem;
line-height: 1.4;
}
/* Badge
========================================================================== */
/*
* 1. Position
* 2. Size
* 3. Style
* 4. Center child vertically
*/
.uk-card-badge {
/* 1 */
position: absolute;
top: 15px;
right: 15px;
z-index: 1;
/* 2 */
height: 22px;
padding: 0 10px;
/* 3 */
background: #1e87f0;
color: #fff;
font-size: 0.875rem;
/* 4 */
display: flex;
justify-content: center;
align-items: center;
line-height: 0;
border-radius: 2px;
text-transform: uppercase;
}
/*
* Remove margin from adjacent element
*/
.uk-card-badge:first-child + * {
margin-top: 0;
}
/* Hover modifier
========================================================================== */
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover {
background: #fff;
box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}
/* Style modifiers
========================================================================== */
/*
* Default
* Note: Header and Footer are only implemented for the default style
*/
.uk-card-default {
background: #fff;
color: #666;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.uk-card-default .uk-card-title {
color: #333;
}
.uk-card-default.uk-card-hover:hover {
background-color: #fff;
box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}
.uk-card-default .uk-card-header {
border-bottom: 1px solid #e5e5e5;
}
.uk-card-default .uk-card-footer {
border-top: 1px solid #e5e5e5;
}
/*
* Primary
*/
.uk-card-primary {
background: #1e87f0;
color: #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.uk-card-primary .uk-card-title {
color: #fff;
}
.uk-card-primary.uk-card-hover:hover {
background-color: #1e87f0;
box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}
/*
* Secondary
*/
.uk-card-secondary {
background: #222;
color: #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.uk-card-secondary .uk-card-title {
color: #fff;
}
.uk-card-secondary.uk-card-hover:hover {
background-color: #222;
box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}
/* Size modifier
========================================================================== */
/*
* Small
*/
.uk-card-small.uk-card-body,
.uk-card-small .uk-card-body {
padding: 20px 20px;
}
.uk-card-small .uk-card-header {
padding: 13px 20px;
}
.uk-card-small .uk-card-footer {
padding: 13px 20px;
}
/*
* Large
*/
/* Desktop and bigger */
@media (min-width: 1200px) {
.uk-card-large.uk-card-body,
.uk-card-large .uk-card-body {
padding: 70px 70px;
}
.uk-card-large .uk-card-header {
padding: 35px 70px;
}
.uk-card-large .uk-card-footer {
padding: 35px 70px;
}
}
/*
* Default
*/
.uk-card-body > .uk-nav-default {
margin-left: -30px;
margin-right: -30px;
}
.uk-card-body > .uk-nav-default:only-child {
margin-top: -15px;
margin-bottom: -15px;
}
.uk-card-body > .uk-nav-default > li > a,
.uk-card-body > .uk-nav-default .uk-nav-header,
.uk-card-body > .uk-nav-default .uk-nav-divider {
padding-left: 30px;
padding-right: 30px;
}
.uk-card-body > .uk-nav-default .uk-nav-sub {
padding-left: 45px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
.uk-card-body > .uk-nav-default {
margin-left: -40px;
margin-right: -40px;
}
.uk-card-body > .uk-nav-default:only-child {
margin-top: -25px;
margin-bottom: -25px;
}
.uk-card-body > .uk-nav-default > li > a,
.uk-card-body > .uk-nav-default .uk-nav-header,
.uk-card-body > .uk-nav-default .uk-nav-divider {
padding-left: 40px;
padding-right: 40px;
}
.uk-card-body > .uk-nav-default .uk-nav-sub {
padding-left: 55px;
}
}
/*
* Small
*/
.uk-card-small > .uk-nav-default {
margin-left: -20px;
margin-right: -20px;
}
.uk-card-small > .uk-nav-default:only-child {
margin-top: -5px;
margin-bottom: -5px;
}
.uk-card-small > .uk-nav-default > li > a,
.uk-card-small > .uk-nav-default .uk-nav-header,
.uk-card-small > .uk-nav-default .uk-nav-divider {
padding-left: 20px;
padding-right: 20px;
}
.uk-card-small > .uk-nav-default .uk-nav-sub {
padding-left: 35px;
}
/*
* Large
*/
/* Desktop and bigger */
@media (min-width: 1200px) {
.uk-card-large > .uk-nav-default {
margin: 0;
}
.uk-card-large > .uk-nav-default:only-child {
margin: 0;
}
.uk-card-large > .uk-nav-default > li > a,
.uk-card-large > .uk-nav-default .uk-nav-header,
.uk-card-large > .uk-nav-default .uk-nav-divider {
padding-left: 0;
padding-right: 0;
}
.uk-card-large > .uk-nav-default .uk-nav-sub {
padding-left: 15px;
}
}
/* ========================================================================
Component: Width
========================================================================== */
/* Equal child widths
========================================================================== */
[class*='uk-child-width'] > * {
box-sizing: border-box;
width: 100%;
}
.uk-child-width-1-2 > * {
width: 50%;
}
.uk-child-width-1-3 > * {
width: calc(100% * 1 / 3.001);
}
.uk-child-width-1-4 > * {
width: 25%;
}
.uk-child-width-1-5 > * {
width: 20%;
}
.uk-child-width-1-6 > * {
width: calc(100% * 1 / 6.001);
}
.uk-child-width-auto > * {
width: auto;
}
/*
* 1. Reset the `min-width`, which is set to auto by default, because
* flex items won't shrink below their minimum intrinsic content size.
* Using `1px` instead of `0`, so items still wrap into the next line,
* if they have zero width and padding and the predecessor is 100% wide.
*/
.uk-child-width-expand > :not([class*='uk-width']) {
flex: 1;
/* 1 */
min-width: 1px;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
.uk-child-width-1-1\@s > * {
width: 100%;
}
.uk-child-width-1-2\@s > * {
width: 50%;
}
.uk-child-width-1-3\@s > * {
width: calc(100% * 1 / 3.001);
}
.uk-child-width-1-4\@s > * {
width: 25%;
}
.uk-child-width-1-5\@s > * {
width: 20%;
}
.uk-child-width-1-6\@s > * {
width: calc(100% * 1 / 6.001);
}
.uk-child-width-auto\@s > * {
width: auto;
}
.uk-child-width-expand\@s > :not([class*='uk-width']) {
flex: 1;
min-width: 1px;
}
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
.uk-child-width-1-1\@m > * {
width: 100%;
}
.uk-child-width-1-2\@m > * {
width: 50%;
}
.uk-child-width-1-3\@m > * {
width: calc(100% * 1 / 3.001);
}
.uk-child-width-1-4\@m > * {
width: 25%;
}
.uk-child-width-1-5\@m > * {
width: 20%;
}
.uk-child-width-1-6\@m > * {
width: calc(100% * 1 / 6.001);
}
.uk-child-width-auto\@m > * {
width: auto;
}
.uk-child-width-expand\@m > :not([class*='uk-width']) {
flex: 1;
min-width: 1px;
}
}
/* Desktop and bigger */
@media (min-width: 1200px) {
.uk-child-width-1-1\@l > * {
width: 100%;
}
.uk-child-width-1-2\@l > * {
width: 50%;
}
.uk-child-width-1-3\@l > * {
width: calc(100% * 1 / 3.001);
}
.uk-child-width-1-4\@l > * {
width: 25%;
}
.uk-child-width-1-5\@l > * {
width: 20%;
}
.uk-child-width-1-6\@l > * {
width: calc(100% * 1 / 6.001);
}
.uk-child-width-auto\@l > * {
width: auto;
}
.uk-child-width-expand\@l > :not([class*='uk-width']) {
flex: 1;
min-width: 1px;
}
}
/* Large screen and bigger */
@media (min-width: 1600px) {
.uk-child-width-1-1\@xl > * {
width: 100%;
}
.uk-child-width-1-2\@xl > * {
width: 50%;
}
.uk-child-width-1-3\@xl > * {
width: calc(100% * 1 / 3.001);
}
.uk-child-width-1-4\@xl > * {
width: 25%;
}
.uk-child-width-1-5\@xl > * {
width: 20%;
}
.uk-child-width-1-6\@xl > * {
width: calc(100% * 1 / 6.001);
}
.uk-child-width-auto\@xl > * {
width: auto;
}
.uk-child-width-expand\@xl > :not([class*='uk-width']) {
flex: 1;
min-width: 1px;
}
}
/* Single Widths
========================================================================== */
/*
* 1. `max-width` is needed for the pixel-based classes
*/
[class*='uk-width'] {
box-sizing: border-box;
width: 100%;
/* 1 */
max-width: 100%;
}
/* Halves */
.uk-width-1-2 {
width: 50%;
}
/* Thirds */
.uk-width-1-3 {
width: calc(100% * 1 / 3.001);
}
.uk-width-2-3 {
width: calc(100% * 2 / 3.001);
}
/* Quarters */
.uk-width-1-4 {
width: 25%;
}
.uk-width-3-4 {
width: 75%;
}
/* Fifths */
.uk-width-1-5 {
width: 20%;
}
.uk-width-2-5 {
width: 40%;
}
.uk-width-3-5 {
width: 60%;
}
.uk-width-4-5 {
width: 80%;
}
/* Sixths */
.uk-width-1-6 {
width: calc(100% * 1 / 6.001);
}
.uk-width-5-6 {
width: calc(100% * 5 / 6.001);
}
/* Pixel */
.uk-width-small {
width: 150px;
}
.uk-width-medium {
width: 300px;
}
.uk-width-large {
width: 450px;
}
.uk-width-xlarge {
width: 600px;
}
.uk-width-2xlarge {
width: 750px;
}
/* Auto */
.uk-width-auto {
width: auto;
}
/* Expand */
.uk-width-expand {
flex: 1;
min-width: 1px;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
/* Whole */
.uk-width-1-1\@s {
width: 100%;
}
/* Halves */
.uk-width-1-2\@s {
width: 50%;
}
/* Thirds */
.uk-width-1-3\@s {
width: calc(100% * 1 / 3.001);
}
.uk-width-2-3\@s {
width: calc(100% * 2 / 3.001);
}
/* Quarters */
.uk-width-1-4\@s {
width: 25%;
}
.uk-width-3-4\@s {
width: 75%;
}
/* Fifths */
.uk-width-1-5\@s {
width: 20%;
}
.uk-width-2-5\@s {
width: 40%;
}
.uk-width-3-5\@s {
width: 60%;
}
.uk-width-4-5\@s {
width: 80%;
}
/* Sixths */
.uk-width-1-6\@s {
width: calc(100% * 1 / 6.001);
}
.uk-width-5-6\@s {
width: calc(100% * 5 / 6.001);
}
/* Pixel */
.uk-width-small\@s {
width: 150px;
}
.uk-width-medium\@s {
width: 300px;
}
.uk-width-large\@s {
width: 450px;
}
.uk-width-xlarge\@s {
width: 600px;
}
.uk-width-2xlarge\@s {
width: 750px;
}
/* Auto */
.uk-width-auto\@s {
width: auto;
}
/* Expand */
.uk-width-expand\@s {
flex: 1;
min-width: 1px;
}
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
/* Whole */
.uk-width-1-1\@m {
width: 100%;
}
/* Halves */
.uk-width-1-2\@m {
width: 50%;
}
/* Thirds */
.uk-width-1-3\@m {
width: calc(100% * 1 / 3.001);
}
.uk-width-2-3\@m {
width: calc(100% * 2 / 3.001);
}
/* Quarters */
.uk-width-1-4\@m {
width: 25%;
}
.uk-width-3-4\@m {
width: 75%;
}
/* Fifths */
.uk-width-1-5\@m {
width: 20%;
}
.uk-width-2-5\@m {
width: 40%;
}
.uk-width-3-5\@m {
width: 60%;
}
.uk-width-4-5\@m {
width: 80%;
}
/* Sixths */
.uk-width-1-6\@m {
width: calc(100% * 1 / 6.001);
}
.uk-width-5-6\@m {
width: calc(100% * 5 / 6.001);
}
/* Pixel */
.uk-width-small\@m {
width: 150px;
}
.uk-width-medium\@m {
width: 300px;
}
.uk-width-large\@m {
width: 450px;
}
.uk-width-xlarge\@m {
width: 600px;
}
.uk-width-2xlarge\@m {
width: 750px;
}
/* Auto */
.uk-width-auto\@m {
width: auto;
}
/* Expand */
.uk-width-expand\@m {
flex: 1;
min-width: 1px;
}
}
/* Desktop and bigger */
@media (min-width: 1200px) {
/* Whole */
.uk-width-1-1\@l {
width: 100%;
}
/* Halves */
.uk-width-1-2\@l {
width: 50%;
}
/* Thirds */
.uk-width-1-3\@l {
width: calc(100% * 1 / 3.001);
}
.uk-width-2-3\@l {
width: calc(100% * 2 / 3.001);
}
/* Quarters */
.uk-width-1-4\@l {
width: 25%;
}
.uk-width-3-4\@l {
width: 75%;
}
/* Fifths */
.uk-width-1-5\@l {
width: 20%;
}
.uk-width-2-5\@l {
width: 40%;
}
.uk-width-3-5\@l {
width: 60%;
}
.uk-width-4-5\@l {
width: 80%;
}
/* Sixths */
.uk-width-1-6\@l {
width: calc(100% * 1 / 6.001);
}
.uk-width-5-6\@l {
width: calc(100% * 5 / 6.001);
}
/* Pixel */
.uk-width-small\@l {
width: 150px;
}
.uk-width-medium\@l {
width: 300px;
}
.uk-width-large\@l {
width: 450px;
}
.uk-width-xlarge\@l {
width: 600px;
}
.uk-width-2xlarge\@l {
width: 750px;
}
/* Auto */
.uk-width-auto\@l {
width: auto;
}
/* Expand */
.uk-width-expand\@l {
flex: 1;
min-width: 1px;
}
}
/* Large screen and bigger */
@media (min-width: 1600px) {
/* Whole */
.uk-width-1-1\@xl {
width: 100%;
}
/* Halves */
.uk-width-1-2\@xl {
width: 50%;
}
/* Thirds */
.uk-width-1-3\@xl {
width: calc(100% * 1 / 3.001);
}
.uk-width-2-3\@xl {
width: calc(100% * 2 / 3.001);
}
/* Quarters */
.uk-width-1-4\@xl {
width: 25%;
}
.uk-width-3-4\@xl {
width: 75%;
}
/* Fifths */
.uk-width-1-5\@xl {
width: 20%;
}
.uk-width-2-5\@xl {
width: 40%;
}
.uk-width-3-5\@xl {
width: 60%;
}
.uk-width-4-5\@xl {
width: 80%;
}
/* Sixths */
.uk-width-1-6\@xl {
width: calc(100% * 1 / 6.001);
}
.uk-width-5-6\@xl {
width: calc(100% * 5 / 6.001);
}
/* Pixel */
.uk-width-small\@xl {
width: 150px;
}
.uk-width-medium\@xl {
width: 300px;
}
.uk-width-large\@xl {
width: 450px;
}
.uk-width-xlarge\@xl {
width: 600px;
}
.uk-width-2xlarge\@xl {
width: 750px;
}
/* Auto */
.uk-width-auto\@xl {
width: auto;
}
/* Expand */
.uk-width-expand\@xl {
flex: 1;
min-width: 1px;
}
}
/* ========================================================================
Component: Padding
========================================================================== */
.uk-padding {
padding: 30px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
.uk-padding {
padding: 40px;
}
}
/* Small
========================================================================== */
.uk-padding-small {
padding: 15px;
}
/* Large
========================================================================== */
.uk-padding-large {
padding: 30px;
}
/* Desktop and bigger */
@media (min-width: 1200px) {
.uk-padding-large {
padding: 70px;
}
}
/* Remove
========================================================================== */
.uk-padding-remove {
padding: 0 !important;
}
.uk-padding-remove-top {
padding-top: 0 !important;
}
.uk-padding-remove-bottom {
padding-bottom: 0 !important;
}
.uk-padding-remove-left {
padding-left: 0 !important;
}
.uk-padding-remove-right {
padding-right: 0 !important;
}
.uk-padding-remove-vertical {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.uk-padding-remove-horizontal {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*jaideejung007 ปรับภาพโปสเตอร์ของ Movieinfo ไม่ให้ล้นขอบในกระทู้*/
.uk-card img {
max-width: 100%;
}
.morecontent span {
display: none;
}
.morelink {
display: block;
}
.skc-score-info-text {
text-align: right;
font-size:14px;
padding-right:5px;
font-weight:bold;
}
.skc-score-info-green-bar {
font-size:14px;
text-align:left;
padding-left:5px;
/*padding-top:5px;*/
min-height:20px;
border-bottom:1px dashed #e2e2e2;
border-left:3px solid #007360;
}
.skc-score-info-cyan-bar {
font-size:14px;
text-align:left;
padding-left:5px;
/*padding-top:5px;*/
min-height:20px;
border-bottom:1px dashed #e2e2e2;
border-left:3px solid #01c1e1;
}
.skc-score-info-pink-bar {
font-size:14px;
text-align:left;
padding-left:5px;
/*padding-top:5px;*/
min-height:20px;
border-bottom:1px dashed #e2e2e2;
border-left:3px solid #ff95ef;
}
.skc-score-info-red-bar {
font-size:14px;
text-align:left;
padding-left:5px;
/*padding-top:5px;*/
min-height:20px;
border-bottom:1px dashed #e2e2e2;
border-left:3px solid #d00913;
}