/*structures copied from https://getbootstrap.com/docs/5.0/getting-started/introduction/ */
:root {
    --c-blue: #0d6efd;
    --c-indigo: #6610f2;
    --c-purple: #6f42c1;
    --c-pink: #d63384;
    --c-red: #dc3545;
    --c-orange: #fd7e14;
    --c-yellow: #ffc107;
    --c-green: #198754;
    --c-teal: #20c997;
    --c-cyan: #0dcaf0;
    --c-white: #fff;
    --c-gray: #6c757d;
    --c-gray-dark: #343a40;
    --c-primary: #0d6efd;
    --c-secondary: #6c757d;
    --c-success: #46DBCE;
    --c-success-light: #6aebe1;
    --c-info: #0dcaf0;
    --c-warning: #ffc107;
    --c-danger: #dc3545;
    --c-light: #f8f9fa;
    --c-dark: #212529;
    --c-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --c-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --c-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --c-fs-xs: 0.5rem;
    --c-fs-sm: 0.8rem;
    --c-fs-md: 1.1rem;
    --c-fs-lg: 2rem;
    --c-fs-xl: 2.5rem;
    --c-p-xs: 0.5rem;
    --c-p-sm: 1rem;
    --c-p-md: 1.5rem;
    --c-p-lg: 2rem;
    --c-p-xl: 2.5rem;
    --c-m-xs: 0.5rem;
    --c-m-sm: 0.8rem;
    --c-m-md: 1.5rem;
    --c-m-lg: 2rem;
    --c-m-xl: 2.5rem;
    --c-w-xs: 0.5rem;
    --c-w-sm: 2rem;
    --c-w-md: 3rem;
    --c-w-lg: 9rem;
    --c-w-xl: 13rem;
    --c-h-xs: 0.5rem;
    --c-h-sm: 2rem;
    --c-h-md: 3rem;
    --c-h-lg: 9rem;
    --c-h-xl: 13rem;
    --c-rounded-xs: 0.5rem;
    --c-rounded-sm: 1rem;
    --c-rounded-md: 3rem;
    --c-rounded-lg: 2rem;
    --c-rounded-xl: 2.5rem;
    --box-shadow-sm: 0 0 28px rgb(167 167 167 / 19%);
}

/*
    Common >>>>>>>>>>>>>>>
*/

button,
select {
    text-transform: none;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) {
    cursor: pointer;
}

a {
    text-decoration: none;
}

/*
===============================================
    Base====================================
===============================================
*/


/*
    Background Color >>>>>>>>>>>>>>>
*/

.bg-blue-c {
    background-color: var(--c-blue);
}

.bg-indigo-c {
    background-color: var(--c-indigo);
}

.bg-purple-c {
    background-color: var(--c-purple);
}

.bg-pink-c {
    background-color: var(--c-pink);
}

.bg-red-c {
    background-color: var(--c-red);
}

.bg-orange-c {
    background-color: var(--c-orange);
}

.bg-yellow-c {
    background-color: var(--c-yellow);
}

.bg-c-c {
    background-color: var(--c-c);
}

.bg-teal-c {
    background-color: var(--c-teal);
}

.bg-cyan-c {
    background-color: var(--c-cyan);
}

.bg-white-c {
    background-color: var(--c-white);
}

.bg-gray-c {
    background-color: var(--c-gray);
}

.bg-gray-dark-c {
    background-color: var(--c-gray-dark);
}

.bg-primary-c {
    background-color: var(--c-primary);
}

.bg-secondary-c {
    background-color: var(--c-secondary);
}

.bg-success-c {
    background-color: var(--c-success);
}

.bg-info-c {
    background-color: var(--c-info);
}

.bg-warning-c {
    background-color: var(--c-warning);
}

.bg-danger-c {
    background-color: var(--c-danger);
}

.bg-light-c {
    background-color: var(--c-light);
}

.bg-dark-c {
    background-color: var(--c-dark);
}



/*
    Text Color >>>>>>>>>>>>>>>
*/

.text-blue-c {
    color: var(--c-blue);
}

.text-indigo-c {
    color: var(--c-indigo);
}

.text-purple-c {
    color: var(--c-purple);
}

.text-pink-c {
    color: var(--c-pink);
}

.text-red-c {
    color: var(--c-red);
}

.text-orange-c {
    color: var(--c-orange);
}

.text-yellow-c {
    color: var(--c-yellow);
}

.text-c-c {
    color: var(--c-c);
}

.text-teal-c {
    color: var(--c-teal);
}

.text-cyan-c {
    color: var(--c-cyan);
}

.text-white-c {
    color: var(--c-white);
}

.text-gray-c {
    color: var(--c-gray);
}

.text-gray-dark-c {
    color: var(--c-gray-dark);
}

.text-primary-c {
    color: var(--c-primary);
}

.text-secondary-c {
    color: var(--c-secondary);
}

.text-success-c {
    color: var(--c-success);
}

.text-info-c {
    color: var(--c-info);
}

.text-warning-c {
    color: var(--c-warning);
}

.text-danger-c {
    color: var(--c-danger);
}

.text-light-c {
    color: var(--c-light);
}

.text-dark-c {
    color: var(--c-dark);
}

/*
    Font Size >>>>>>>>>>>>>>>
*/
.fs-xs-c {
    font-size: var(--c-fs-xs);
}

.fs-sm-c {
    font-size: var(--c-fs-sm);
}

.fs-md-c {
    font-size: var(--c-fs-md);
}

.fs-lg-c {
    font-size: var(--c-fs-lg);
}

.fs-xl-c {
    font-size: var(--c-fs-xl);
}

/*
    Padding >>>>>>>>>>>>>>>
*/
.p-xs-c {
    padding: var(--c-p-xs);
}

.p-sm-c {
    padding: var(--c-p-sm);
}

.p-md-c {
    padding: var(--c-p-md);
}

.p-lg-c {
    padding: var(--c-p-lg);
}

.p-xl-c {
    padding: var(--c-p-xl);
}

/* --- */

.px-xs-c {
    padding: 0 var(--c-p-xs);
}

.px-sm-c {
    padding: 0 var(--c-p-sm);
}

.px-md-c {
    padding: 0 var(--c-p-md);
}

.px-lg-c {
    padding: 0 var(--c-p-lg);
}

.px-xl-c {
    padding: 0 var(--c-p-xl);
}

/* --- */

.py-xs-c {
    padding: var(--c-p-xs) 0;
}

.py-sm-c {
    padding: var(--c-p-sm) 0;
}

.py-md-c {
    padding: var(--c-p-md) 0;
}

.py-lg-c {
    padding: var(--c-p-lg) 0;
}

.py-xl-c {
    padding: var(--c-p-xl) 0;
}

/* --- */

.ps-xs-c {
    padding: 0 0 0 var(--c-p-xs);
}

.ps-sm-c {
    padding: 0 0 0 var(--c-p-sm);
}

.ps-md-c {
    padding: 0 0 0 var(--c-p-md);
}

.ps-lg-c {
    padding: 0 0 0 var(--c-p-lg);
}

.ps-xl-c {
    padding: 0 0 0 var(--c-p-xl);
}

/* --- */

.pe-xs-c {
    padding: 0 var(--c-p-xs) 0 0;
}

.pe-sm-c {
    padding: 0 var(--c-p-sm) 0 0;
}

.pe-md-c {
    padding: 0 var(--c-p-md) 0 0;
}

.pe-lg-c {
    padding: 0 var(--c-p-lg) 0 0;
}

.pe-xl-c {
    padding: 0 var(--c-p-xl) 0 0;
}

/*
    Margin >>>>>>>>>>>>>>>
*/

.m-xs-c {
    margin: var(--c-m-xs);
}

.m-sm-c {
    margin: var(--c-m-sm);
}

.m-md-c {
    margin: var(--c-m-md);
}

.m-lg-c {
    margin: var(--c-m-lg);
}

.m-xl-c {
    margin: var(--c-m-xl);
}


/* --- */

.mx-xs-c {
    margin: 0 var(--c-m-xs);
}

.mx-sm-c {
    margin: 0 var(--c-m-sm);
}

.mx-md-c {
    margin: 0 var(--c-m-md);
}

.mx-lg-c {
    margin: 0 var(--c-m-lg);
}

.mx-xl-c {
    margin: 0 var(--c-m-xl);
}

/* --- */

.my-xs-c {
    margin: var(--c-m-xs) 0;
}

.my-sm-c {
    margin: var(--c-m-sm) 0;
}

.my-md-c {
    margin: var(--c-m-md) 0;
}

.my-lg-c {
    margin: var(--c-m-lg) 0;
}

.my-xl-c {
    margin: var(--c-m-xl) 0;
}

/* --- */

.ms-xs-c {
    margin: 0 0 0 var(--c-m-xs);
}

.ms-sm-c {
    margin: 0 0 0 var(--c-m-sm);
}

.ms-md-c {
    margin: 0 0 0 var(--c-m-md);
}

.ms-lg-c {
    margin: 0 0 0 var(--c-m-lg);
}

.ms-xl-c {
    margin: 0 0 0 var(--c-m-xl);
}

/* --- */

.me-xs-c {
    margin: 0 var(--c-m-xs) 0 0;
}

.me-sm-c {
    margin: 0 var(--c-m-sm) 0 0;
}

.me-md-c {
    margin: 0 var(--c-m-md) 0 0;
}

.me-lg-c {
    margin: 0 var(--c-m-lg) 0 0;
}

.me-xl-c {
    margin: 0 var(--c-m-xl) 0 0;
}


/*
    Width >>>>>>>>>>>>>>>
*/
.w-xs-c {
    width: var(--c-w-xs);
}

.w-sm-c {
    width: var(--c-w-sm);
}

.w-md-c {
    width: var(--c-w-md);
}

.w-lg-c {
    width: var(--c-w-lg);
}

.w-xl-c {
    width: var(--c-w-xl);
}


/*
    Height >>>>>>>>>>>>>>>
*/
.h-xs-c {
    height: var(--c-h-xs);
}

.h-sm-c {
    height: var(--c-h-sm);
}

.h-md-c {
    height: var(--c-h-md);
}

.h-lg-c {
    height: var(--c-h-lg);
}

.h-xl-c {
    height: var(--c-h-xl);
}


/*
    Box Shadow >>>>>>>>>>>>>>>
*/
.shadow-sm-c {
    box-shadow: var(--box-shadow-sm);
}


/*
    Box Shadow >>>>>>>>>>>>>>>
*/
.rounded-xs-c {
    border-radius: var(--c-rounded-xs);
}

.rounded-sm-c {
    border-radius: var(--c-rounded-sm);
}

.rounded-md-c {
    border-radius: var(--c-rounded-md);
}

.rounded-lg-c {
    border-radius: var(--c-rounded-lg);
}

.rounded-xl-c {
    border-radius: var(--c-rounded-xl);
}


/*
===============================================
    FORMS====================================
===============================================
*/



/*
===============================================
    COMPONENTS====================================
===============================================
*/


/*
    Accordion >>>>>>>>>>>>>>>
*/


/*
    Alert >>>>>>>>>>>>>>>
*/


/*
    Badge >>>>>>>>>>>>>>>
*/


/*
    Breadcrumb >>>>>>>>>>>>>>>
*/


/*
    Buttons >>>>>>>>>>>>>>>
*/

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button;
}

.btn-c {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: var(--c-dark);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15sease-in-out, background-color .15sease-in-out, border-color .15sease-in-out, box-shadow .15sease-in-out;
}

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

/*primary*/
.btn-primary-c {
    color: #fff;
    background-color: var(--c-primary);
    border-color: var(--c-primary);
}

.btn-primary-c:hover {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.btn-outline-primary-c {
    color: var(--c-primary);
    border-color: var(--c-primary);
}

.btn-outline-primary-c:hover {
    color: #fff;
    background-color: var(--c-primary);
    border-color: var(--c-primary);
}


/*secondary*/
.btn-secondary-c {
    color: #fff;
    background-color: var(--c-secondary);
    border-color: var(--c-secondary);
}

.btn-secondary-c:hover {
    color: #fff;
    background-color: #5c636a;
    border-color: #565e64;
}

.btn-outline-secondary-c {
    color: var(--c-secondary);
    border-color: var(--c-secondary);
}

.btn-outline-secondary-c:hover {
    color: #fff;
    background-color: var(--c-secondary);
    border-color: var(--c-secondary);
}


/*success*/
.btn-success-c {
    color: #fff;
    background-color: var(--c-success);
    border-color: var(--c-success);
}

.btn-success-c:hover {
    color: #fff;
    background-color: #157347;
    border-color: #146c43;
}

.btn-outline-success-c {
    color: var(--c-success);
    border-color: var(--c-success);
}

.btn-outline-success-c:hover {
    color: #fff;
    background-color: var(--c-success);
    border-color: var(--c-success);
}


/*danger*/
.btn-danger-c {
    color: #fff;
    background-color: var(--c-danger);
    border-color: var(--c-danger);
}

.btn-danger-c:hover {
    color: #fff;
    background-color: #bb2d3b;
    border-color: #b02a37;
}

.btn-outline-danger-c {
    color: var(--c-danger);
    border-color: var(--c-danger);
}

.btn-outline-danger-c:hover {
    color: #fff;
    background-color: var(--c-danger);
    border-color: var(--c-danger);
}


/*warning*/
.btn-warning-c {
    color: #000;
    background-color: var(--c-warning);
    border-color: var(--c-warning);
}

.btn-warning-c:hover {
    color: #000;
    background-color: #ffca2c;
    border-color: #ffc720;
}

.btn-outline-warning-c {
    color: var(--c-warning);
    border-color: var(--c-warning);
}

.btn-outline-warning-c:hover {
    color: #000;
    background-color: var(--c-warning);
    border-color: var(--c-warning);
}


/*info*/
.btn-info-c {
    color: #000;
    background-color: var(--c-info);
    border-color: var(--c-info);
}

.btn-info-c:hover {
    color: #000;
    background-color: #31d2f2;
    border-color: #25cff2;
}

.btn-outline-info-c {
    color: var(--c-info);
    border-color: var(--c-info);
}

.btn-outline-info-c:hover {
    color: #000;
    background-color: var(--c-info);
    border-color: var(--c-info);
}


/*light*/
.btn-light-c {
    color: #000;
    background-color: var(--c-light);
    border-color: var(--c-light);
}

.btn-light-c:hover {
    color: #000;
    background-color: #f9fafb;
    border-color: #f9fafb;
}

.btn-outline-light-c {
    color: var(--c-light);
    border-color: var(--c-light);
}

.btn-outline-light-c:hover {
    color: #000;
    background-color: var(--c-light);
    border-color: var(--c-light);
}


/*dark*/
.btn-dark-c {
    color: #fff;
    background-color: var(--c-dark);
    border-color: var(--c-dark);
}

.btn-dark-c:hover {
    color: #fff;
    background-color: #1c1f23;
    border-color: #1a1e21;
}

.btn-outline-dark-c {
    color: var(--c-dark);
    border-color: var(--c-dark);
}

.btn-outline-dark-c:hover {
    color: #fff;
    background-color: var(--c-dark);
    border-color: var(--c-dark);
}


/*link*/
.btn-link-c {
    font-weight: 400;
    color: var(--c-primary);
    text-decoration: underline;
}

.btn-link-c:hover {
    color: #0a58ca;
}


/*size*/
.btn-group-sm-c>.btn-c,
.btn-sm-c {
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: .2rem;
}

.btn-group-lg-c>.btn-c,
.btn-lg-c {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    border-radius: .3rem;
}

/*disabled*/
.btn-c.disabled,
.btn-c:disabled,
fieldset-c:disabled .btn-c {
    pointer-events: none;
    opacity: .65;
}


/*
    Checkout >>>>>>>>>>>>>>>
*/

.checkout-01 {
    padding: 100px 200px;
}

.checkout-01 .form-group-item {
    padding: 2px;
    margin-bottom: 5px;
    border: 1px solid #eee;
    border-radius: 5px;
}

.checkout-01 .form-group-item input,
.checkout-01 .form-group-item textarea {
    outline: none;
    border: none;
    font-size: 14px;
    padding: 0 3px;
}

.checkout-01 .form-group-item input::placeholder,
.checkout-01 .form-group-item textarea::placeholder {
    color: #b9b9b9;
}

.checkout-01 .form-group-item label {
    font-weight: bold;
    font-size: 13px;
    padding: 0 3px;
}

.checkout-01 .order-details {
    min-width: 300px;
}

@media(max-width:1300px) {
    .checkout-01 {
        padding: 100px;
    }
}
@media(max-width:1100px) {
    .checkout-01 {
        padding: 50px;
    }
}	
@media(max-width:1100px) {
    .checkout-01 {
        padding: 10px;
    }
}	
@media(max-width:700px) {
    .checkout-01 {
        flex-wrap: wrap-reverse;
    }
}			

/*
    Buttons group >>>>>>>>>>>>>>>
*/


/*
    Card >>>>>>>>>>>>>>>
*/


/*
    Carousel >>>>>>>>>>>>>>>
*/


/*
    Close Button >>>>>>>>>>>>>>>
*/


/*
    Collapse >>>>>>>>>>>>>>>
*/


/*
    Dropdowns >>>>>>>>>>>>>>>
*/


/*
    List group >>>>>>>>>>>>>>>
*/


/*
    Modal >>>>>>>>>>>>>>>
*/


/*
    Nav & tabs >>>>>>>>>>>>>>>
*/


/*
    Navbar >>>>>>>>>>>>>>>
*/


/*
    Offcanvas >>>>>>>>>>>>>>>
*/


/*
    Pagination >>>>>>>>>>>>>>>
*/


/*
    Popovers >>>>>>>>>>>>>>>
*/


/*
    Progress >>>>>>>>>>>>>>>
*/


/*
    Page Footer >>>>>>>>>>>>>>>
*/

.page-footer .top {
    margin: 0 200px;
    position: relative;
    top: 70px;
}

.page-footer .subscribe {
    background-color: #658DE9;
    border: 1px solid #eee;
    max-width: 300px;
}

.page-footer .subscribe input {
    border: none;
    outline: none;
    background-color: transparent;
    color: #fff;
}

.page-footer .subscribe input::placeholder {
    color: rgb(255, 255, 255);
    opacity: 1;
    /* Firefox */
}

.page-footer .top .img {
    width: 700px;
}

.page-footer .links ul {
    padding: 0;
    margin: 0;
}

.page-footer ul li {
    list-style-type: none;
}

.page-footer a {
    color: #000;
}

.page-footer .bottom {
    padding: 0 200px;
    padding-top: 110px;
}

.page-footer .bottom .logo {
    width: 400px;
    padding-right: 50px;
}

.page-footer .social-media a {
    color: #000;
}

/*
    Scrollspy >>>>>>>>>>>>>>>
*/


/*
    Spinners >>>>>>>>>>>>>>>
*/


/*
    Toast >>>>>>>>>>>>>>>
*/


/*
    Tooltip >>>>>>>>>>>>>>>
*/


/*
    Alarm >>>>>>>>>>>>>>>
*/
.green .alarm-md {
    width: 230px;
    margin: 50px;
    border-radius: 20px;
}

.green .alarm-md .icon {
    text-align: center;
    padding: 20px;
}

.green .alarm-md .title {
    text-align: center;
}

.green .alarm-md .subtitle {
    text-align: center;
    color: var(--c-success);
}

.green .alarm-md .button {
    text-align: center;
    padding: 20px;
}