@charset "utf-8";
*,*::before,*::after{
box-sizing: border-box;
}
*{
margin: 0;
padding: 0;
font: inherit;
}
.debug * {
background: rgb(0 100 0 / 0.1) !important;
outline: 1px dotted rgba(0,128,0,.5) !important;
}
@font-face{font-family:Lexend;src:url(fonts/Lexend-VariableFont_wght.ttf);}
body{
min-height: 100dvh;
}
input,div,textarea,select{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
outline: none;
}
input,textarea,select,textarea{
padding: 10px;
width: 100%;
}
textarea{
height: 100px;
padding: 10px;
outline: none;
font-weight: 300;
font-size: 0.8rem;
}
input[type="button"]{
cursor: pointer;
width: auto;
}
.xinput-astext {
border: none;
border-bottom: 1px solid #000;
background: transparent;
outline: none;
padding: 0 0 1px;
margin: 0 4px;
font-size: inherit;
font-family: inherit;
color: inherit;
width: auto;
min-width: 3ch;
text-align: center;
}
.xinput-astext:focus {
outline: none;
box-shadow: none !important;
}
.xcheckbox,
.xradio {
display: flex;
align-items: center;
gap: 6px;
margin: 4px 0;
/* Label */
label {
line-height: 1.4em;
cursor: pointer;
padding-top: 1px;
border-radius: 4px;
transition:
color 0.15s ease,
background-color 0.15s ease,
opacity 0.15s ease;
/* Hover label */
&:hover {
background-color: rgba(0, 0, 0, 0.05);
opacity: 0.95;
}
}
/* Checkbox */
input[type="checkbox"],
input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 1em;
height: 1em;
border: 2px solid #6b7280;
border-radius: 4px;
background-color: #ffffff;
cursor: pointer;
margin-top: 2px;
position: relative;
padding: 6px;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
/* Hover effect */
&:hover {
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
&:checked {
background-color: #4f46e5;
border-color: #4f46e5;
&::after {
content: "";
position: absolute;
/* UPDATED (sesuai permintaan) */
width: 0.4em;
height: 0.6em;
top: 0.1em;
left: 0.35em;
border: solid white;
border-width: 0 0.18em 0.18em 0;
transform: rotate(45deg);
}
}
}
/* ====================== COLOR VARIANTS ====================== */
&.green input[type="checkbox"]:checked {
background-color: #22c55e;
border-color: #22c55e;
}
&.blue input[type="checkbox"]:checked {
background-color: #3b82f6;
border-color: #3b82f6;
}
&.yellow input[type="checkbox"]:checked {
background-color: #eab308;
border-color: #eab308;
}
&.red input[type="checkbox"]:checked {
background-color: #ef4444;
border-color: #ef4444;
}
&.purple input[type="checkbox"]:checked {
background-color: #a855f7;
border-color: #a855f7;
}
&.black input[type="checkbox"]:checked {
background-color: #000000;
border-color: #000000;
}
&.grey input[type="checkbox"]:checked {
background-color: #6b7280;
border-color: #6b7280;
}
&.white input[type="checkbox"]:checked {
background-color: #ffffff;
border-color: #d1d5db;
input[type="checkbox"]:checked::after {
border-color: #000000;
}
}
}
img,picture,svg,video{
max-width: 100%;
display: block;
}
a{text-decoration:none;cursor: pointer;}
a:visited{color: initial}
p{text-wrap: pretty;}
/* GRID */
.xcol-2,.mcol-2,.xcol-3,.mcol-3,.xcol-4,.mcol-4{display: grid}
.xcol-1-2,.mcol-1-2{
display: grid;
grid-template-columns: 1fr 2fr;
}
.xcol-2,.mcol-2,.xcol-2-2-1,.xcol-2-1-1{grid-template-columns: 1fr 1fr;}
.xcol-3,.mcol-3,.mcol-3-2,.xcol-3-3-1{
grid-template-columns: repeat(3, 1fr);}
.xcol-4,.mcol-4,.mcol-4-2,.xcol-4-3-2,.xcol-4-3-1,.xcol-4-2-1,.xcol-4-4-2,.xcol-4-4-1{
grid-template-columns: repeat(4, 1fr);}
.xcol-5,.mcol-5,.mcol-5-2,.mcol-5-3{grid-template-columns: repeat(5, 1fr);}
.xcol-6,.mcol-6,.mcol-6-2{grid-template-columns: repeat(6, 1fr);}
.xcol-8,.mcol-8,.mcol-8-2,.xcol-8-5-2{
grid-template-columns: repeat(8, 1fr);}
.xcol-2-1,.mcol-2-1{
display: grid;
grid-template-columns: 2fr 1fr;
}
.xcol-12,.mcol-12{grid-template-columns: repeat(12, 1fr)}
.xcol-f21,.xcol-f21-21-1{
grid-template-columns: 2fr 1fr;
}
.xcol-f31-21-1{
grid-template-columns: 3fr 1fr;
}
.xcol-1f-2f,.mcol-1f-2f{grid-template-columns: 1fr 2fr}
.xcol-2f-1f,.mcol-2f-1f{grid-template-columns: 2fr 1fr}
.xcol-6f-4f,.mcol-6f-4f{grid-template-columns: 6fr 4fr;}
.xcol-1f-2f-1f,.mcol-1f-2f-1f{grid-template-columns: 1fr 2fr 1fr}
.xcol-custom{
display: grid;
grid-template-columns: var(--fr);
}
.mcol-autofill{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.xgap{
gap: var(--xgap);
}
.x-inline{
display: inline-flex;
align-items: center;
gap: 6px;
}
@media (max-width: 1024px) {
.xcol-f31-21-1{
grid-template-columns: 2fr 1fr;
}
.xcol-8-5-2{
grid-template-columns: repeat(5, 1fr);
}
.xcol-4-3-2,
.xcol-3-3-1{
grid-template-columns: repeat(3, 1fr);
}
.xcol-4-2-1{
grid-template-columns: repeat(2, 1fr);
}
.xcol-2-1-1{
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.xcol-8-5-2,
.xcol-4-4-2,
.xcol-4-3-2{
grid-template-columns: repeat(2, 1fr);
}
.xcol-4-4-1,.xcol-2-2-1,.xcol-3-3-1,.xcol-4-2-1,
.xcol-f21-f21-f1,.xcol-f31-21-1{
grid-template-columns: 1fr;
}
}
/* FONT SIZE */
body{
.fs-06{font-size: 0.6rem}
.fs-065{font-size: 0.65rem}
.fs-07{font-size: 0.7rem}
.fs-08{font-size: 0.8rem}
.fs-09{font-size: 0.9rem}
.fs-1{font-size: 1rem}
.fs-11{font-size: 1.1rem}
.fs-12{font-size: 1.2rem}
.fs-13{font-size: 1.3rem}
.fs-14{font-size: 1.4rem}
.fs-15{font-size: 1.5rem}
.fs-16{font-size: 1.6rem}
.fs-17{font-size: 1.7rem}
.fs-18{font-size: 1.8rem}
.fs-2{font-size: 2rem}
.fs-3{font-size: 3rem}
.fw-300{font-weight: 300 !important}
.fw-400{font-weight: 400 !important}
.fw-600{font-weight: 600 !important}
.ff-custom{font-family: var(--ff);}
.number{font-family: Roboto-Mono;}
.h1{
font-size: 180%;
line-height: 2.2rem;
}
.h2{
font-size: 140%;
line-height: 1.8rem;
}
.h3{
font-size: 120%;
line-height: 1.4rem;
}
.h1,.h2,.h3{
&.green{
color: #19d284;
}
&.blue{
color: #18a8ee;
}
&.yellow {
color: #f4c430;
}
&.red {
color: #ff4d4f;
}
&.purple {
color: #8b5cf6;
}
&.orange {
color: #fb923c;
}
&.teal {
color: #14b8a6;
}
&.pink {
color: #ec4899;
}
&.gray {
color: #64748b;
}
}
@media (max-width: 1024px) {
.h1{
font-size: 150%;
line-height: 1.9rem;
}
}
@media (max-width: 480px) {
.h1{
font-size: 120%;
line-height: 1.5rem;
}
}
}
/* FONT PROPERTY */
/* MOBILE */
.fs-m-14{font-size: 1.4rem}
.fs-m-15{font-size: 1.5rem}
.fs-m-16{font-size: 1.6rem}
.fs-m-17{font-size: 1.7rem}
.fs-m-18{font-size: 1.8rem}
.fs-m-2{font-size: 2rem}
/* LINK */
/* pastikan teks & icon sejajar */
a .link{
display: inline-flex;
align-items: center;
gap: 4px; /* jarak icon - teks */
position: relative;
}
/* pseudo icon */
a .link::before{
content: "";
font-family: "Font Awesome 6 Pro";
font-weight: 900;
font-size: 0.95em;
line-height: 1;
--fa-primary-opacity: 1;
--fa-secondary-opacity: .35;
}
a:hover .link::before{
transform: translateX(-2px) scale(1.05);
opacity: 1;
}
/* PDF */
a[href$=".pdf"] .link::before{
content: "\f1c1"; /* file-pdf */
color: #e53935;
}
a[href$=".xls"] .link::before,
a[href$=".xlsx"] .link::before{
content: "\f1c3"; /* file-excel */
color: #2e7d32;
}
a[href$=".doc"] .link::before,
a[href$=".docx"] .link::before{
content: "\f1c2"; /* file-word */
color: #1565c0;
}
a[href$=".ppt"] .link::before,
a[href$=".pptx"] .link::before{
content: "\f1c4";
color: #d84315;
}
/* ZIP */
a[href$=".zip"] .link::before,
a[href$=".rar"] .link::before,
a[href$=".7z"] .link::before,
a[href$=".gz"] .link::before{
content: "\f1c6";
color: #6d4c41;
}
/* WIDTH */
.w100{width: 100%}
.mw-500,.mw-700,.mw-1000, .mw-1200{
width: 100%;
}
.mw-500{max-width: 500px;}
.mw-600{max-width: 600px;}
.mw-700{max-width: 700px;}
.mw-800{max-width: 800px;}
.mw-1000 {max-width: 1000px;}
.mw-1200 {max-width: 1200px;}
.mw-custom{max-width: var(--mw);}
.mh-custom{max-height: var(--mh);}
.xw{width: var(--xw);}
.xh{height: var(--xh);}
/* BARIS */
.xline{
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
}
.xline-2{
-webkit-line-clamp: 2;
line-clamp: 2;
}
/* IMAGE FIX */
.ximage{
img{
object-fit: cover;
}
.circle{border-radius: 100%}
.square-200{
width: 200px;
height: 200px;
}
.square-250{
width: 250px;
height: 250px;
}
.square-300{
width: 300px;
height: 300px;
}
}
.enter{
padding: 10px 0;
}
.enter-2{padding: 20px 0;}
.enter-4{padding: 40px 0;}
.enter-6{padding: 60px 0;}
.enter-8{padding: 80px 0;}
/* BHVR */
.left,.xleft{
display: grid;
text-align: left;
justify-content: flex-start;
}
.right,
.xright{
text-align: right;
justify-content: end;
align-content: center;
.div-select{
display: grid;
justify-content: end;
select{
width: max-content;
background: transparent;
border: solid 1px #ccc;
padding: 5px 10px;
cursor: pointer;
}
}
}
.xmiddle{
display: grid;
align-content: center;
align-items: center;
}
.xsquare{
aspect-ratio: 1/1;
object-fit: cover;
}
.xcircle{
border-radius: 100%;
}
.xrounded-5{
border-radius: 5px;
border: solid 1px #e8e8e8;
}
.xrounded-10{
border-radius: 10px;
}
.img-40{
width: 40px;
height: 40px;
max-width: 40px;
max-height: 40px;
object-fit: cover;
}
.img-50{
width: 50px;
height: 50px;
max-width: 50px;
max-height: 50px;
object-fit: cover;
}
.xcursor{
cursor: pointer;
}
/* SECTION */
body{
section{
width: 100%;
}
.section-80{
width: 80%;
margin: auto;
}
.section-80-90-100{
width: 80%;
margin: auto;
}
.section-80-90{
width: 80%;
margin: auto;
}
@media (max-width: 1024px) {
.section-80-90{width: 90%;}
.section-80-90-100{width: 90%;}
}
@media (max-width: 480px) {
.section-80-90-100{width: 100%;}
}
}
/* ELEMENTS */
/* BUTTON */
.btn-clickable{
box-shadow: #094c66 4px 4px 0 0;
transition: transform 200ms, box-shadow 2s;
}
.btn-clickable:active{
transform: translateY(4px) translateX(4px);
box-shadow: #094c66 0px 0 0 0;
}
/* BOF */
.xbutton {
--fg: #fff;
--radius: 12px;
--shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
--press-scale: 0.96;
--glow: rgba(255, 255, 255, 0.25);
--speed: 0.25s;
appearance: none;
border: none;
border-radius: var(--radius);
padding: 12px 20px;
font-size: 0.8rem;
font-family: system-ui, sans-serif;
font-weight: 500;
cursor: pointer;
position: relative;
overflow: hidden;
transition:
transform var(--speed) ease,
box-shadow var(--speed) ease,
filter var(--speed) ease;
box-shadow: var(--shadow);
outline: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
i{
width: auto;
font-size: 130%;
}
/* warna yang pakai var(--fg) */
&.green,
&.blue,
&.gold,
&.purple,
&.lightblue,
&.orange,
&.red {
color: var(--fg);
}
/* warna dengan color spesifik */
&.yellow { color: #3a2f00; }
&.pink { color: #3a0030; }
&.grey {color: #2b2b2b;}
/* white: warna khusus */
&.white {
border: 1px solid #e2e8f0 !important;
background-color: #f8fafc !important;
color: #2d3748 !important;
}
/* background masing-masing */
&.green {
background: linear-gradient(135deg, #51e88c, #1fa95b);
}
&.red {
background: linear-gradient(135deg, #ff6b6b, #d93838);
}
&.black {
background: linear-gradient(135deg, #3a3a3a, #111);
color: #f5f5f5;
}
&.blue {
background: linear-gradient(135deg, #5ea3ff, #3c6df0);
}
&.yellow {
background: linear-gradient(135deg, #ffe680, #f5c400);
}
&.purple {
background: linear-gradient(135deg, #b37aff, #6d3af0);
}
&.lightblue {
background: linear-gradient(135deg, #a8e0ff, #5bbef0);
}
&.orange {
background: linear-gradient(135deg, #ffb347, #ff7b00);
}
&.pink {
background: linear-gradient(135deg, #ff9ecd, #ff5fa2);
}
&.gold {
background: linear-gradient(135deg, #ffd700, #b8860b);
}
&.grey{
background: linear-gradient(135deg, #d9d9d9, #9f9f9f);
}
&:disabled,
&.disabled {
opacity: .55;
filter: grayscale(30%);
cursor: not-allowed;
pointer-events: none;
/* kalau tombol ingin warna lebih pudar */
/* background-color: #dcdcdc !important; */
}
&.lite{
padding: 6px 8px;
font-size: 0.7rem;
font-weight: 300;
}
}
.xselect{
border: 1px solid #e2e8f0;
border-radius: 8px;
background-color: #f8fafc;
font-size: 0.8rem;
color: #2d3748;
transition: all 0.3s ease;
font-weight: 300;
width: auto;
&.green,
&.blue,
&.purple,
&.lightblue,
&.red {
color: #fff;
}
&.green {
background: linear-gradient(135deg, #51e88c, #1fa95b);
}
&.red {
background: linear-gradient(135deg, #ff6b6b, #d93838);
}
&.blue {
background: linear-gradient(135deg, #5ea3ff, #3c6df0);
}
&.orange {
background: linear-gradient(135deg, #ffb347, #ff7b00);
}
}
select.xbutton{
appearance: auto;
}
.xbutton::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
background: var(--glow);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
transition:
width 0.45s ease,
height 0.45s ease,
opacity 0.6s ease;
}
.xbutton:hover {
filter: brightness(1.06);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}
.xbutton:active {
transform: scale(var(--press-scale));
}
.xbutton:active::after {
width: 220%;
height: 220%;
opacity: 0.3;
}
.xbutton:focus-visible,
.xbutton:focus {
outline: 2px solid rgba(110, 150, 255, 0.18);
outline-offset: 3px;
border: none !important;
box-shadow: none !important;
}
.xbutton:not(:active)::after {
width: 0;
height: 0;
opacity: 0;
}
/* EOF */
/* BOX */
.xbox-shadow{
background: rgba( 255, 255, 255, 0.6 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
padding: 30px;
}
.xbox-content {
--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
padding: 1.5rem;
--tw-bg-opacity: 1;
background-color: rgba(255,255,255,var(--tw-bg-opacity));
border-radius: .5rem;
transition: box-shadow .25s ease, background-color .25s ease;
}
.xbox-content:hover{
background-color: rgba(249,250,251,1);
box-shadow: 0 6px 10px rgba(0,0,0,.08);
}
/* FORM */
.xform{
.xinput-label-i span {
position: absolute;
font-size: 1rem;
font-weight: 600;
padding: 10px;
color: initial;
.fa-envelope{
color: #888787;
}
}
textarea:focus,
input:not([type="checkbox"]):focus{
outline: none; /* Menghilangkan garis biru bawaan */
/*border: 2px solid #007BFF; /* Menambahkan border biru */
box-shadow: 0 0 5px #007BFF; /* Efek glow */
}
.xform-input{
width: 100%;
padding: 12px 16px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background-color: #f8fafc;
font-size: 0.8rem;
color: #2d3748;
transition: all 0.3s ease;
font-weight: 300;
}
}
.xform-title{
padding: 20px 0;
font-size: 0.8rem;
font-weight: 400;
}
.xform-line{
border-bottom: solid 1px #e2e8f0;
margin: 20px 0 40px;
}
.xselect-transparent select{
border: none;
border-radius: 0;
padding: 12.5px;
background-color: #fff;
border-bottom: solid 2px #f7f7f7;
cursor: pointer;
}
/* FORM INPUT RP
*/
.xinput-label-rp{
position: relative;
}
.xinput-label-rp span{
position: absolute;
font-size: 0.75rem;
font-weight: 500;
padding: 12px 0 0 5px;
color: gray;
}
.xinput-label-rp input{
border: none;
border-bottom: solid 2px #f7f7f7;
padding: 10px 5px;
border-radius: 0;
padding-left: 26px !important;
}
/* FORM INPUT SYMBOL IN RIGHT
*/
.xinput-label-in-right{
position: relative;
}
.xinput-label-in-right span{
position: absolute;
font-size: 0.75rem;
font-weight: 500;
padding: 12px 0;
color: gray;
right: 0;
padding-right: 5px;
}
.xinput-label-in-right input{
border: none;
border-bottom: solid 2px #f7f7f7;
padding: 10px 5px;
border-radius: 0;
padding-right: 24px !important;
}
.xinput-label-i span{
position: absolute;
font-size: 1.2rem;
font-weight: 500;
padding: 10px;
color: #888;
}
.xinput-label-i input {
padding-left: 36px;
padding-top: 12px;
}
/* TABEL */
.xtable-toolbar{
padding: 20px 0;
}
.xtable{
border-spacing: 0;
border-collapse: collapse;
width: 100%;
&.ff{
font-family: var(--ff);
}
&.fs-custom{
font-size: var(--fs);
input{
font-size: var(--fs);
}
}
.td-number{
font-family: Roboto-Mono;
}
.td-no{
font-family: Roboto-Mono;
width: 30px;
}
.th-rp,
.th-usd,
.td-usd,
.xright{
text-align: right;
}
.td-rp{
text-align: right;
}
.td-rp::before,
.th-rp::before{
content: 'Rp.';
float: left;
}
.td-usd::before,
.th-usd::before{
content: '$';
float: left;
}
&.lite{
*{
font-weight: 300;
font-size: 0.7rem;
}
}
}
.xborder{
border: solid 1px #ccc;
}
.xtable .td-nourut{
width: 30px;
border-right: dotted 1px #3ebbf0;
}
/* TABLE THEME DAX */
.xtable-theme-dax tr th{
background-color: #fff;
padding: 8px 0;
}
.xtable-theme-dax tr td{
padding: 8px 10px;
}
.xtable-theme-dax tr:nth-child(odd){
background-color: #fff;
}
.xtable-theme-dax tr:nth-child(even){
background-color: #f4f9ff;
}
.xpaging{
margin: 50px auto;
width: fit-content;
padding: 10px 15px;
border-radius: 3px;
.box-arrow,
.box-number,
.paging-box,
.paging-i-current,
button{
border-radius: 5px;
margin: 1px;
}
button{
border: none;
}
.box-arrow{
border-radius: 3px;
color: #9d9d4e;
padding: 5px 8px;
&.active{
color: yellow;
}
}
.box-number,
.paging-box,
.paging-i-current{
padding: 5px 10px;
color: #fff;
cursor: pointer;
}
.box-number.active,
.paging-i-current{
background-color: yellow;
color: #000;
}
.box-arrow:hover,
.box-number:hover,
.paging-box:hover{
background-color: #939300;
}
&.blue{
background: radial-gradient(ellipse at bottom, #036298 0%, #123a53 100%);
}
&.whiteblack{
.box-number,
.paging-box,
.paging-i-current{
background-color: #f0f0f0;
color: #4d4d4d;
cursor: pointer;
border: solid 1px #e1e1e1;
}
.paging-i-current{
background-color: #333;
color: #fff;
}
.box-number:disabled{
color: #ccc;
cursor: default;
}
.box-arrow:hover,
.box-number:hover,
.paging-box:hover{
background-color: #979797;
}
}
}
/* DATALIST THEME DEFAULT */
.xdatalist{
position: relative;
width: 100%;
}
.xdatalist .xform-input{
padding-right: 30px;
}
.xdatalist-i{
width: min-content;
position: absolute;
top: 0;
right: 0;
padding: 10px;
font-size: 1rem;
color: cadetblue;
}
.xdatalist-select{
position: absolute;
z-index: 1;
}
.xdatalist-option{
background-color: #f7f7f7;
padding: 10px 5px;
border-bottom: solid 1px #ecebeb;
}
.xdatalist-option:hover{
cursor: pointer;
background-color: #e6e6e6;
}
.xdatalist-selected{
display: none;
position: absolute;
top: 10px;
left: 5px;
padding: 5px 25px 5px 5px;
border-radius: 5px;
}
.xdatalist-selected-text{
color: #fff;
}
.xdatalist-selected i{
position: absolute;
right: 5px;
font-size: 1rem;
color: #fffdfd;
cursor: pointer;
}
.xdatalist-selected i:hover{
color: #b55;
}
/* LOGIN */
.xlogin-split{
height: 100%;
position: absolute;
width: 100%;
display: grid;
gap: 0;
}
.xlogin-site-name{
background-color: rgba(0,0,0,.8);
color: #fff;
padding: 20px;
font-size: 1.4rem;
width: max-content;
margin: 50px;
border-radius: 10px;
font-family: Lexend;
}
/* ANIMATION */
.xreveal{
opacity: 0;
transition: 2s all ease;
}
.xreveal.active{
transform: translate(0, 0);
opacity: 1;
}
.xreveal-to-up{
transform: translateY(150px);
}
.xreveal-to-down{
transform: translateY(-150px);
}
.xreveal-to-left{
transform: translateX(150px);
}
.xreveal-to-right{
transform: translateX(-150px);
}
/* SEARCH */
.xsearch{
position: relative;
padding-bottom: 1px;
bottom: 0;
right: 0;
}
.xsearch-icon{
position: absolute;
left: 0;
padding: 10px;
}
.xsearch-icon i{
color: grey;
font-size: 0.9rem;
}
.xsearch-input input{
padding: 10px 0 10px 30px;
border-radius: 3px;
border: solid 1px #ccc;
}
.xsearch-input input:focus{
outline: none;
}
/* IMAGE */
.xthumb{
object-fit: cover;
}
/* IMAGE TEMPLATES */
/*
*/
.ximg-image-text{
display: grid;
grid-template-columns: 50px 1fr;
}
.ximg-image-text-img{
justify-content: center;
}
.ximg-image-text-img img{
max-width: 100%;
}
.xinfo{
padding: 15px;
border-radius: 15px;
font-size: 0.7rem;
margin: 20px 0;
font-weight: 300;
text-align: center;
strong{
font-size: 0.7rem;
}
&.grey{
background-color: #f7f7f7;
border: solid 1px #ccc;
color: #666;
}
&.red{
background-color: #FFF5F5;
border:solid 1px #E53935;
color: #C62828;
}
}
.xlabel{
display: inline-block;
padding: 5px 8px;
border-radius: 10px;
font-size: 0.7rem;
transition: all 0.2s ease-in-out;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
&.warning{
color: #794342;
background-color: #fde3e3;
border: 1px solid #fbc0bd;
}
&.warning:hover{
background-color: #fbc0bd;
}
&.green{
color: #42796f;
background-color: #e3fcfd;
border: 1px solid #4cead3;
}
&.blue{
color: #599aff;
background-color: #daf1ff;
border: 1px solid #a2cfff;
}
&.date{
background-color: #f7f7f7;
border: solid 1px #ccc;
color: #666;
}
&.yellow {
background-color: #f9eec0;
border: solid 1px #f2dd87;
font-size: 0.7rem;
}
&.yellow:hover{
background-color: #ffe781;
}
&.black{
color: #444;
background-color: #e3e3e3;
border: 1px solid #b5b9b8;
}
&.lite{
font-weight: 300 !important;
font-size: 0.7rem !important;
}
}
/*
&.purple {
background: linear-gradient(135deg, #b37aff, #6d3af0);
color: var(--fg);
}
&.lightblue {
background: linear-gradient(135deg, #a8e0ff, #5bbef0);
color: var(--fg);
}
&.orange {
background: linear-gradient(135deg, #ffb347, #ff7b00);
color: #3a1e00;
}
*/
/* REPLACE QUILL */
.ql-editor{
min-height: 200px;
}
@media only screen and (max-width : 480px) {
.no-mobile{display:none}
.mcol-2,.mcol-2-1,.mcol-3,.mcol-4,.mcol-8,.mcol-12,.mcol-1f-2f,.mcol-2f-1f,.mcol-6f-4f{
grid-template-columns: 1fr;
}
.mcol-3-2,.mcol-4-2,.mcol-5-2,.mcol-6-2,.mcol-8-2{grid-template-columns: repeat(2, 1fr);}
.mcol-5-2{grid-template-columns: repeat(2, 1fr)}
.mcol-5-3{grid-template-columns: repeat(3, 1fr)}
/* FONT SIZE */
.fs-m-14{font-size: 1.2rem}
.fs-m-15{font-size: 1.3rem}
.fs-m-16{font-size: 1.4rem}
.fs-m-17{font-size: 1.5rem}
.fs-m-18{font-size: 1.6rem}
.fs-m-2{font-size: 1.8rem}
}