.bg { background: rgba(0,0,0, .25); }
.bg-w { background: rgba(255,255,255, .25); }
.border { border: 1px solid var(--b-color); }

.tn,
.tn * 
{
    transition: .3s;
}

hr 
{
    width: 98%;
    height: 1px;
    background: #ccc;
    margin: 15px auto;
}

.hr-light
{
    background: var(--l-color);
    opacity: .8;
}

.hr-dark
{
    background: var(--d-color);
    opacity: .8;
}

/* TEXT */

.s-title 
{
    font-size: clamp(18px, 0.625rem + 2.5vw, 40px);
    font-weight: 400;
    margin-bottom: 20px;
}

.sb-title
{
    font-size: clamp(18px, 0.8068rem + 1.5909vw, 32px);
}

.slogan 
{
    font-size: clamp(14px, 0.7841rem + 0.4545vw, 18px);
}

/* FIGURE */
.rect
{
    width: 100%;
    background: var(--l-color);
    aspect-ratio: 1;
}

.rect-v
{
    width: 100%;
    background: var(--l-color);
    aspect-ratio: 1 / 2;
}

.rect-h
{
    width: 100%;
    aspect-ratio: 2 / 1;
}

.rect-1
{
    width: 100%;
    aspect-ratio: 1.7 / 1.03;
}

.rect-2
{
    width: 100%;
    aspect-ratio: 23 / 19;
}

.rect-3
{
    width: 100%;
    aspect-ratio: 23 / 13;
}

.rect-4
{
    width: 100%;
    background: var(--l-color);
    aspect-ratio: 2 / 1;
}

.rect-5
{
    width: 100%;
    background: var(--l-color);
    aspect-ratio: 2 / 1;
}

.rounded
{
    border-radius: 50%;
}

.rounded-fx
{
    border-radius: 100px;
}

/* SCROLL */

.o-hidden
{
    overflow: hidden;
}

.o-hidden-v 
{
    overflow-y: hidden;
}

.o-hidden-h
{
    overflow-x: hidden;
}

.scroll-v
{
    width: 100%;
    /* height: 400px; */
    overflow-y: auto;
}

.scroll-v::-webkit-scrollbar
{
    width: 6px;
    height: 6px;
    background: transparent;
}

.scroll-v::-webkit-scrollbar-thumb
{
    width: 6px;
    border-radius: 6px;
    background: var(--d-active);
}

.scroll-h
{
    width: 100%;
    min-width: 320px;
    overflow-x: auto;
}

.scroll-h::-webkit-scrollbar
{
    /* width: 6px;
    height: 6px;
    background: transparent; */
}

.scroll-h::-webkit-scrollbar-thumb
{
    /* width: 6px;
    border-radius: 6px;
    background: var(--d-hover); */
}


/* ARTICLE */

.article 
{ 
    width: 100%; 
    min-width: 100px; 
    min-height: 100px; 
    background: var(--w-color); 
    position: relative; 
}
.article-body 
{ 
    padding: 18px; 
    width: inherit; 
    min-height: inherit; 
}
.article-img 
{ 
    width: 100%; 
    min-height: 160px; 
    object-fit: cover; 
}
.article-icon 
{ 
    width: 28px; 
    height: 28px; 
    object-fit: contain; 
}
.article-title 
{ 
    font-size: clamp(14px, 0.7841rem + 0.4545vw, 18px); 
    font-weight: bold; 
}
.article-params 
{ 
    font-size: clamp(14px, 0.8295rem + 0.2273vw, 16px); 
    font-weight: bold; 
}
.article-text 
{ 
    font-size: clamp(14px, 0.8295rem + 0.2273vw, 16px); 
}
.article-link 
{ 
    font-size: clamp(14px, 0.8295rem + 0.2273vw, 16px); 
}
.article-link:hover 
{ 
    text-decoration: underline; 
}
.article-overlay 
{ 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0, .7); 
    position: absolute; top: 0; left: 0; 
}

/* TABLE */
.table
{
    background: var(--w-color);
    padding: 10px;
}

.table-action tbody tr:hover
{
    cursor: pointer;
    background: var(--d-active);
}

.table-action tbody tr:hover td:first-child
{
    border-radius: 40px 0 0 40px;
}

.table-action tbody tr:hover td:last-child
{
    border-radius: 0 40px 40px 0;
}


table, th, td 
{ 
    border-collapse: collapse; 
    /* border: 1px solid var(--b-color);  */
    /* background: var(--w-color);  */
}
table 
{ 
    width: 100%; 
}
th, td 
{ 
    padding: 12px 18px; 
    border-bottom: 1px solid var(--d-active);
}
th 
{ 
    font-size: 14px; 
    text-align: left;
}
td 
{ 
    font-size: 14px; 
} 

.list-row 
{
    min-height: 68px;
}

.line-row
{
    border-bottom: 1px solid var(--d-active);
}

/* FORM */

.frame 
{
    border: 1px solid var(--d-hover);
    border-radius: 40px;
    background: var(--d-hover);
    padding: 15px;
}

.form-area 
{ 
    padding: 15px 0; 
}

.form-label
{
    font-size: 14px;
    color: var(--s-color); ;
    display: block;
    margin: 5px 0;
}

.form-input
{
    padding: 10px 15px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    background: var(--d-color);
}

.form-input:focus 
{
    border-color: var(--p-color);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

textarea.form-input 
{
    min-height: 100px;
    resize: none;
}

select.form-input
{
    appearance: none;
}

.form-select 
{
    position: relative;
}

.form-select svg 
{
    position: absolute;
    top: 50%; right: 10px;
    transform: translateY(-50%);
    color: var(--w-color);
}
/* BUTTONS */

.btn 
{
    /* min-width: 260px; */
    padding: 20px;
    height: 60px;
    border-radius: 50px;
    font-size: 14px;
    text-align: center;
    background: var(--d-hover);
    color: var(--w-color);

    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
    cursor: pointer;

}

.btn:hover 
{
    background: var(--d-active);
}

.btn-primary
{
    background: var(--p-color);
}

.btn-primary:hover 
{
    background: var(--p-hover);
}

.btn-success
{
    background: var(--g-color);
}

.btn-success:hover 
{
    background: var(--g-hover);
}

.btn-err
{
    background: var(--r-color);
}

.btn-err:hover 
{
    background: var(--r-hover);
}

.btn-light
{
    background: var(--l-color);
    color: var(--b-color);
}

.btn-light:hover 
{
    background: var(--l-hover);
}

.btn-dark
{
    background: var(--d-active);
}

.btn-dark:hover 
{
    background: var(--d-color);
}

.btn-fx 
{
    min-width: 260px;
}

.btn-link:hover 
{
    text-decoration: underline;
    cursor: pointer;
}

.icon 
{
    font-size: 24px;
}

.icon-min
{
    font-size: 14px;
}

.icon-img 
{
    width: 24px;
    height: 24px;
}


.popup-overlay 
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(28, 36, 40, 0.8);
    backdrop-filter: blur(5px);
    z-index: 1000;
}

.popup-wrap
{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup
{
    padding: 30px;
    border-radius: 40px;
    background: var(--d-hover);
    position: relative;
    max-width: 800px;
    width: 96%;
    max-height: 96vh;

    display: flex;
    flex-direction: column;
}

.popup-head
{
    position: absolute;
    top: 20px; right: 20px;
}

.rounded-btn,
.popup-btn
{
    width: 56px;
    height: 56px;
    background: transparent;
    border: 1px solid var(--d-active);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.rounded-btn i,
.popup-btn i,
.check-wrap i 
{
    color: var(--s-color);
    position: relative;
}

.check-wrap i 
{
    font-size: 18px;
}

.rounded-btn:hover,
.popup-btn:hover 
{
    background: var(--d-active);
}

.check-wrap i 
{
    font-size: 18px;
}

.popup-btn:hover 
{
    background: var(--d-active);
}

.check-wrap
{
    width: 56px;
    height: 56px;
}

.check-btn,
.check-button
{
    appearance: none;
    position: absolute;
    top: 0; left: 0;
}

.check-btn:before 
{
    content: "";
    position: absolute;
    top: 0; left: 0;
    display: block;
    width: 56px;
    height: 56px;
    background: var(--d-active);
    border: 1px solid var(--d-active);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.check-btn:hover:before
{
    border-color: var(--s-color);
}

.check-btn:checked:before
{
    background: var(--p-color);
    border-color: var(--p-color);
}

.check-btn:checked + i 
{
    color: var(--w-color);
}

/* ///////////////////////////////////// */

.check-label 
{
    display: block;
    position: relative;
}


.check-button
{
    position: absolute;
    top: 0; left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.check-button:before 
{
    content: "";
    position: absolute;
    top: 0; left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    cursor: pointer;
}

.check-action .btn
{
    text-align: left;
}

.check-action .btn i 
{
    opacity: 0;
}

.check-toggle .btn
{
    padding: 10px;
    height: 48px;
    width: 140px;
}

.check-toggle .btn i 
{
    opacity: 1;
}

.text-checked
{
    display: none;
}

.check-button:hover + .check-action .btn 
{
    background: var(--d-color);
    padding: 20px;
}

.check-button:checked + .check-action .btn 
{
    background: var(--p-color);
    padding: 20px;
}

.check-button:checked + .check-action .btn i
{
    opacity: 1;
}


.check-button:hover + .check-toggle .btn 
{
    background: var(--p-hover);
}

.check-button:checked + .check-toggle .btn 
{
    background: var(--d-color);
}

.check-button:checked + .check-toggle .btn 
{
    background: var(--d-color);
}

.check-button:checked + .check-toggle i 
{
    transform: rotate(-45deg);
}

.check-button:checked + .check-toggle .text-checked 
{
    display: inline;
}

.check-button:checked + .check-toggle .text-unchecked 
{
    display: none;
}







@media (min-width: 280px)
{
    .section { padding: 30px 0; }
}

@media (min-width: 568px)
{

}

@media (min-width: 768px)
{

}

@media (min-width: 992px)
{
    .section { padding: 50px 0; }   
}

@media (min-width: 1200px)
{
  
}