/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
    font-family: Kanit;
    color: #555555;
}

a {    
    text-decoration: none;
}

footer {
    color: #555555;
}

    footer a {
        color: lightgray;
        text-decoration: none;
    }

        footer a:hover {
            text-decoration: none;
            color: white;
        }


h1, h2, h3, h4, h5, h6 {
    font-family: Kanit;
}

.card-hover {
    transition: 0.3s;
}

    .card-hover:hover {
        box-shadow: 0 2px 6px -4px rgba(0,0,0,.2),0 8px 10px -4px rgba(0,0,0,.14),0 8px 12px 4px rgba(0,0,0,.05);
        transform: translateY(-2px);
    }

.BorderCheck {
    border: dashed 1px red;
}

.textHeadBorderMiddle {
    text-align: center;
    color: #070747;
    font-size: 26px;
    border-bottom: 2px solid #636363;
    line-height: 0.1em;
    margin: 10px 0 20px;
}

    .textHeadBorderMiddle > span {
        background-color: #FAFAFA;
        padding: 0 10px;
    }


.Title1 {
    font-size: xx-large;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

.Title2 {
    font-size: x-large;
    font-weight: bold;
    margin-top: 8px;
    margin-bottom: 8px;
}

.Title3 {
    font-size: large;
    font-weight: bold;
    margin-top: 6px;
    margin-bottom: 6px;
}

.Title4 {
    font-size: medium;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
}

.Title5 {
    font-size: small;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
}

.TextIndent2 {
    text-indent: 2em;
    text-align: justify;
}

.TextIndent3 {
    text-indent: 3em;
    text-align: justify;
}

.TextIndent4 {
    text-indent: 4em;
    text-align: justify;
}

.inner-bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

.inner-top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}

.inner-top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

.inner-bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

.inner-centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.right {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#pics {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}


.shadowed {
    /* box-shadow */
    -webkit-box-shadow: rgba(0,0,0,0.25) 0px 0 10px;
    -moz-box-shadow: rgba(0,0,0,0.25) 0 0 10px;
    box-shadow: rgba(0,0,0,0.15) 0 0 10px;
}


.FlexBox {
    display: flex;
    min-height: 32px;
    padding: 1px;
}

.Flex-First-Col {
    text-align: right;
    width: 140px;
}

.Flex-Second-Col {
    flex: 1;
    padding-left: 5px;
}

@media (max-width: 767px) {
    .content-to-hide {
        display: none;
    }
}

.InnerContainer {
    position: relative;
    text-align: center;
    aspect-ratio: 16/9;
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
}

    .InnerContainer:hover .LinkMove {
        opacity: 0.7;
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .InnerContainer:hover .RotateZoom {
        transform: rotate(1deg) scale(1.1);
        transition: all 1s;
    }

    .InnerContainer:not(:hover) .RotateZoom {
        transition: all 1s;
    }

    .InnerContainer:hover .ShowDateBox {
        transition: 1s;
        background: rgba(255, 255, 255, 0.7);
        color: black;
    }

    .InnerContainer:not(:hover) .ShowDateBox {
        transition: 1s;
    }

.RotateZoom {
}

.LinkMove {
    opacity: 0;
    transform: translate3d(-25px, 0, 0);
    transition: 0.4s all ease-in-out;
}

.itemHasBadge {
    position: relative;
    padding-top: 5px;
    margin-right: 20px;
    display: inline-block;
    max-height: 55px;
}

.notify-badge {
    position: absolute;
    right: -10px;
    top: -5px;
    background: red;
    text-align: center;
    border-radius: 10px 10px 10px 10px;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
}

.NameText {
    position: absolute;
    bottom: -10px;
    right: -5px;
    white-space: normal;
    width: 120px;
    text-align: right;
}


.ddlTextleft {
    text-align: left;
}

.ddlTextRight {
    text-align: right;
}

.DivPadding {
    padding: 4px;
}

.txtHeight {
    height: 37px !important;
}
.border-blue {
    border: solid skyblue 1px;
}

.required:after {
    content: " *";
    color: red;
}

/*--------------------------------------------------------------
# Nave bar
--------------------------------------------------------------*/
.avatar {
    height: 40px;
    width: 40px
}

.avatar-lg {
    height: 64px;
    width: 64px
}

.avatar-title {
    align-items: center;
    color: #3b7ddd;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%
}

.navbar a:hover {
    cursor : pointer ;
}

.navbar-tran-bg {
    background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), color-stop(10.94%, rgba(219,219,250,0.01)), color-stop(86.46%, #fff), to(rgba(255,255,255,0)));
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(219,219,250,0.01) 10.94%, #fff 86.46%, rgba(255,255,255,0) 100%);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(219,219,250,0.01) 10.94%, #fff 86.46%, rgba(255,255,255,0) 100%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-style: solid;
    -o-border-image: -o-linear-gradient(right, rgba(243,244,245,0.801) 1%, #f9fbff 50%, rgba(255,255,255,0) 100%) 100% 0 100% 0/2px 0 2px 0 stretch;
    border-image: -webkit-gradient(linear, right top, left top, color-stop(1%, rgba(243,244,245,0.801)), color-stop(50%, #f9fbff), to(rgba(255,255,255,0))) 100% 0 100% 0/2px 0 2px 0 stretch;
    border-image: linear-gradient(to left, rgba(243,244,245,0.801) 1%, #f9fbff 50%, rgba(255,255,255,0) 100%) 100% 0 100% 0/2px 0 2px 0 stretch
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    background: #7cc576;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
}

    .back-to-top i {
        font-size: 28px;
        color: #fff;
        line-height: 0;
    }

    .back-to-top:hover {
        background: #97d193;
        color: #fff;
    }

    .back-to-top.active {
        visibility: visible;
        opacity: 1;
    }

/*--------------------------------------------------------------
# Disable AOS delay on mobile
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0 !important;
    }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
    height: 90px;
    transition: all 0.5s;
    z-index: 997;
    transition: all 0.5s;
    background: #fff;
    box-shadow: 0 4px 10px -3px rgba(191, 191, 191, 0.5);
}

    #header .logo h1 {
        font-size: 28px;
        margin: 0;
        line-height: 1;
        font-weight: 400;
        letter-spacing: 3px;
        text-transform: uppercase;
    }

        #header .logo h1 a, #header .logo h1 a:hover {
            color: #fff;
            text-decoration: none;
        }

    #header .logo img {
        padding: 0;
        margin: 0;
        max-height: 40px;
    }

@media (max-width: 992px) {
    #header {
        height: 70px;
    }
}

.scrolled-offset {
    margin-top: 90px;
}

@media (max-width: 992px) {
    .scrolled-offset {
        margin-top: 90px;
    }
}
/*--------------------------------------------------------------
# Select 2
--------------------------------------------------------------*/
.select2-selection__rendered {
    word-wrap: break-word !important;
    text-overflow: inherit !important;
    white-space: normal !important;
    font-size: medium !important;
}

.select2-container .select2-selection--single {
    height: 100% !important;
    min-height: 37px !important;
    font-size: small !important;
}

.select2-selection__arrow {
    height: inherit !important;
}

.select2-results__options li {
    line-height: inherit !important;
    font-size: small !important;
    padding: 4px !important;
}

.select2-container--open {
    z-index: 9999999 !important;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
.navbar a:hover, .navbar .active, .navbar .active:focus {
    color: dodgerblue;
}
/*--------------------------------------------------------------
# offcanvas
--------------------------------------------------------------*/
.offcanvas .icon {
    color: dodgerblue;
    width: 32px;
    display: inline-block;
    font-size: large;
}
.offcanvas a:hover {
    color: dodgerblue;
}
/*--------------------------------------------------------------
# Button
--------------------------------------------------------------*/
/* Green */
.success {
    border-color: #04AA6D;
    color: green;
}

    .success:hover {
        background-color: #04AA6D;
        color: white;
    }
/*--------------------------------------------------------------
# Fade in
--------------------------------------------------------------*/
.fade-scroll {
    opacity: 0;
}

.fade-one {
    animation: fadeIn 5s;
    -webkit-animation: fadeIn 5s;
    -moz-animation: fadeIn 5s;
    -o-animation: fadeIn 5s;
    -ms-animation: fadeIn 5s;
    animation-timing-function: ease-in-out;
}

.fade-two {
    animation: fadeIn 5s;
    animation-delay: 200ms;
    animation-fill-mode: both;
    animation-duration: 350ms;
    animation-timing-function: ease-in-out;
}

.fade-three {
    animation: fadeIn 5s;
    animation-delay: 500ms;
    animation-fill-mode: both;
    animation-duration: 350ms;
    animation-timing-function: ease-in-out;
}

.fade-four {
    animation: fadeIn 5s;
    animation-delay: 1000ms;
    animation-fill-mode: both;
    animation-duration: 350ms;
    animation-timing-function: ease-in-out;
}

.fade-five {
    animation: fadeIn 5s;
    animation-delay: 1500ms;
    animation-fill-mode: both;
    animation-duration: 350ms;
    animation-timing-function: ease-in-out;
}

.fade-six {
    animation: fadeIn 5s;
    animation-delay: 1000ms;
    animation-fill-mode: both;
    animation-duration: 350ms;
    animation-timing-function: ease-in-out;
}

.fadein {
    animation-name: fadein;
    animation-fill-mode: both;
    animation-duration: 350ms;
    animation-timing-function: ease-in-out;
}

@keyframes fadein {
    0% {
        opacity: 0;
        transform: translateY(50%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-text {
    animation: fadeIn 5s;
    -webkit-animation: fadeIn 5s;
    -moz-animation: fadeIn 5s;
    -o-animation: fadeIn 5s;
    -ms-animation: fadeIn 5s;
    animation-timing-function: ease-in-out;
}

/*--------------------------------------------------------------
#   (Product Detail)
--------------------------------------------------------------*/
/*-------detail----------*/

.product-detail {
    padding-top: 40px;
}

    .product-detail .portfolio-info {
        padding: 15px;
        box-shadow: 0px 0 30px rgba(21, 21, 21, 0.08);
    }

        .product-detail .portfolio-info h3 {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .product-detail .portfolio-info ul {
            list-style: none;
            padding: 0;
            font-size: 15px;
        }

            .product-detail .portfolio-info ul li + li {
                margin-top: 10px;
            }

    .product-detail .portfolio-description {
        padding:30px 15px 10px 15px;
    }

        .product-detail .portfolio-description h3 {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .product-detail .portfolio-description h4 {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .product-detail .portfolio-description p {
            font-size : 15px;
            padding: 0;
        }

/*-------Swipper----------*/
.product-detail swiper-container {
    width: 100%;
    height: 300px;
}

.product-detail swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .product-detail swiper-slide img {
        display: sw;
        aspect-ratio: 4/3;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-detail swiper-slide {
        background-size: cover;
        background-position: center;
    }

    .product-detail .mySwiper {
        height: 80%;
        width: 100%;
    }

    .product-detail .mySwiper2 {
        height: 20%;
        box-sizing: border-box;
        padding: 10px 0;
    }

        .product-detail .mySwiper2 swiper-slide {
            width: 25%;
            height: 100%;
            opacity: 0.5;
        }

        .product-detail .mySwiper2 .swiper-slide-thumb-active {
            opacity: 1;
        }

    .product-detail swiper-slide img {
        display: sw;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    .product-detail .ShowImageSlide {
        width: 100%;
    }


/*--------------------------------------------------------------
# default-page-swipper  (Default Page)
--------------------------------------------------------------*/

.default-page-swipper swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.default-page-swipper swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.default-page-swipper .autoplay-progress {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--swiper-theme-color);
}

    .default-page-swipper .autoplay-progress svg {
        --progress: 0;
        position: absolute;
        left: 0;
        top: 0px;
        z-index: 10;
        width: 100%;
        height: 100%;
        stroke-width: 4px;
        stroke: var(--swiper-theme-color);
        fill: none;
        stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
        stroke-dasharray: 125.6;
        transform: rotate(-90deg);
    }

/*--------------------------------------------------------------
# Spinner
--------------------------------------------------------------*/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

    #spinner.show {
        transition: opacity .5s ease-out, visibility 0s linear 0s;
        visibility: visible;
        opacity: 1;
    }


/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
    padding: 60px 0;
    overflow: hidden;
}

.section-bg {
    background-color: whitesmoke;
}

.section-title {
    text-align: center;
    padding-bottom: 20px;
}

    .section-title h2 {
        font-size: 30px;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 10px;
        padding-bottom: 0;
        color: #151515;
    }

    .section-title p {
        margin-bottom: 0;
        color: #aeaeae;
    }

/*--------------------------------------------------------------
# Top Head Page  mt-2 p-2 w-100 bg-info align-self-center text-dark
--------------------------------------------------------------*/
.top-head-page {
    text-align: left;
    margin-top: 15px;
    padding: 15px;
    width: 100%;
    background-color: #004A99;
    color: black;
}


/*--------------------------------------------------------------
# About Us
--------------------------------------------------------------*/
.about .image {
    padding: 20px;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

.about .content h3 {
    font-weight: 600;
    font-size: 26px;
}

.about .content ul {
    list-style: none;
    padding: 0;
}

    .about .content ul li {
        padding-bottom: 10px;
        display: flex;
        align-items: flex-start;
    }

    .about .content ul i {
        font-size: 24px;
        padding: 2px 6px 0 0;
        color: #7cc576;
    }

.about .content p:last-child {
    margin-bottom: 0;
}
/*--------------------------------------------------------------
# Height
--------------------------------------------------------------*/
.w-0 {
    width: 0% !important;
}

.w-1 {
    width: 1% !important;
}

.w-2 {
    width: 2% !important;
}

.w-3 {
    width: 3% !important;
}

.w-4 {
    width: 4% !important;
}

.w-5 {
    width: 5% !important;
}

.w-6 {
    width: 6% !important;
}

.w-7 {
    width: 7% !important;
}

.w-8 {
    width: 8% !important;
}

.w-9 {
    width: 9% !important;
}

.w-10 {
    width: 10% !important;
}

.w-15 {
    width: 15% !important;
}

.w-20 {
    width: 20% !important;
}

.w-25 {
    width: 25% !important;
}

.w-30 {
    width: 30% !important;
}

.w-35 {
    width: 35% !important;
}

.w-40 {
    width: 40% !important;
}

.w-45 {
    width: 45% !important;
}

.w-50 {
    width: 50% !important;
}

.w-55 {
    width: 55% !important;
}

.w-60 {
    width: 60% !important;
}

.w-65 {
    width: 65% !important;
}

.w-70 {
    width: 70% !important;
}

.w-75 {
    width: 75% !important;
}

.w-80 {
    width: 80% !important;
}

.w-85 {
    width: 85% !important;
}

.w-90 {
    width: 90% !important;
}

.w-95 {
    width: 95% !important;
}

.w-100 {
    width: 100% !important;
}

.w-auto {
    width: auto !important;
}

.mw-100 {
    max-width: 100% !important;
}

.vw-100 {
    width: 100vw !important;
}

.min-vw-100 {
    min-width: 100vw !important;
}

.h-25 {
    height: 25% !important;
}

.h-50 {
    height: 50% !important;
}

.h-75 {
    height: 75% !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

.mh-100 {
    max-height: 100% !important;
}

.vh-100 {
    height: 100vh !important;
}

.min-vh-25 {
    min-height: 25vh !important;
}

.min-vh-35 {
    min-height: 35vh !important;
}

.min-vh-45 {
    min-height: 45vh !important;
}

.min-vh-50 {
    min-height: 50vh !important;
}

.min-vh-55 {
    min-height: 55vh !important;
}

.min-vh-65 {
    min-height: 65vh !important;
}

.min-vh-70 {
    min-height: 70vh !important;
}

.min-vh-75 {
    min-height: 75vh !important;
}

.min-vh-80 {
    min-height: 80vh !important;
}

.min-vh-85 {
    min-height: 85vh !important;
}

.min-vh-90 {
    min-height: 90vh !important;
}

.min-vh-95 {
    min-height: 95vh !important;
}

.min-vh-100 {
    min-height: 100vh !important;
}

/*--------------------------------------------------------------
# Position
--------------------------------------------------------------*/
.position-static {
    position: static !important;
}

.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

.position-fixed {
    position: fixed !important;
}

.position-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
}
/*--------------------------------------------------------------
# Margin
--------------------------------------------------------------*/
.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important
}

.me-0 {
    margin-right: 0 !important
}

.me-1 {
    margin-right: .25rem !important
}

.me-2 {
    margin-right: .5rem !important
}

.me-3 {
    margin-right: 1rem !important
}

.me-4 {
    margin-right: 1.5rem !important
}

.me-5 {
    margin-right: 3rem !important
}

.me-6 {
    margin-right: 4.5rem !important
}

.me-7 {
    margin-right: 6rem !important
}

.me-auto {
    margin-right: auto !important
}
/*--------------------------------------------------------------
# Shadow
--------------------------------------------------------------*/
.shadow-primary {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4) !important;
}

.shadow-secondary {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(210, 210, 210, 0.4) !important;
}

.shadow-info {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 188, 212, 0.4) !important;
}

.shadow-warning {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4) !important;
}

.shadow-success {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(76, 175, 80, 0.4) !important;
}

.shadow-danger {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(244, 67, 54, 0.4) !important;
}

.shadow-dark {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(64, 64, 64, 0.4) !important;
}

.shadow-light {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4) !important;
}

/*--------------------------------------------------------------
# ICON SHAP
--------------------------------------------------------------*/
.icon-shape {
    width: 48px;
    height: 48px;
    background-position: center;
    border-radius: 0.5rem;
}

    .icon-shape i {
        color: #fff;
        opacity: 0.8;
        top: 11px;
        position: relative;
    }

    .icon-shape .ni {
        top: 14px;
    }

.icon-xxs {
    width: 20px;
    height: 20px;
}

    .icon-xxs i {
        top: 0;
        font-size: 0.65rem;
    }

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

    .icon-xs i {
        top: -1px;
        font-size: 0.75rem;
    }

.icon-sm {
    width: 32px;
    height: 32px;
}

    .icon-sm i {
        top: 4px;
        font-size: 0.875rem;
    }

.icon-md {
    width: 48px;
    height: 48px;
}

    .icon-md i {
        top: 30%;
        font-size: 1.125rem;
    }

    .icon-md.icon-striped {
        background-position-x: 85px;
        background-position-y: 85px;
    }

        .icon-md.icon-striped i {
            top: 11%;
            margin-left: -10px;
            font-size: 0.875rem;
        }

.icon-lg {
    width: 64px;
    height: 64px;
}

    .icon-lg i {
        top: 31%;
        font-size: 1.5rem;
    }

    .icon-lg.icon-striped {
        background-position-x: 111px;
        background-position-y: 111px;
    }

        .icon-lg.icon-striped i {
            top: 21%;
            margin-left: -15px;
        }

.icon-xl {
    width: 100px;
    height: 100px;
    border-radius: 0.5rem;
}

    .icon-xl i {
        top: 35%;
        font-size: 2.1rem;
    }

    .icon-xl.icon-striped {
        background-position-x: 80px;
        background-position-y: 80px;
    }

        .icon-xl.icon-striped i {
            top: 30%;
            margin-left: -15px;
        }

/*--------------------------------------------------------------
# Margin
--------------------------------------------------------------*/
.mt-n1 {
    margin-top: -0.25rem !important;
}

.mt-n2 {
    margin-top: -0.5rem !important;
}

.mt-n3 {
    margin-top: -1rem !important;
}

.mt-n4 {
    margin-top: -1.5rem !important;
}

.mt-n5 {
    margin-top: -3rem !important;
}

.mt-n6 {
    margin-top: -4rem !important;
}

.mt-n7 {
    margin-top: -6rem !important;
}

.mt-n8 {
    margin-top: -8rem !important;
}

.mt-n9 {
    margin-top: -10rem !important;
}

.mt-n10 {
    margin-top: -12rem !important;
}

.mt-n11 {
    margin-top: -14rem !important;
}

.mt-n12 {
    margin-top: -16rem !important;
}
/*--------------------------------------------------------------
# text-Align
--------------------------------------------------------------*/
.text-center {
    text-align: center !important
}

.align-top {
    vertical-align: top !important
}

.align-middle {
    vertical-align: middle !important
}

.align-bottom {
    vertical-align: bottom !important
}
/*--------------------------------------------------------------
# Backgroud Gradiant
--------------------------------------------------------------*/
.bg-gradient-primary {
    background-image: linear-gradient(195deg, #EC407A 0%, #D81B60 100%);
}

.bg-gradient-secondary {
    background-image: linear-gradient(195deg, #747b8a 0%, #495361 100%);
}

.bg-gradient-success {
    background-image: linear-gradient(195deg, #66BB6A 0%, #43A047 100%);
}

.bg-gradient-info {
    background-image: linear-gradient(195deg, #49a3f1 0%, #1A73E8 100%);
}

.bg-gradient-warning {
    background-image: linear-gradient(195deg, #FFA726 0%, #FB8C00 100%);
}

.bg-gradient-danger {
    background-image: linear-gradient(195deg, #EF5350 0%, #E53935 100%);
}

.bg-gradient-light {
    background-image: linear-gradient(195deg, #EBEFF4 0%, #CED4DA 100%);
}

.bg-gradient-dark {
    background-image: linear-gradient(195deg, #42424a 0%, #191919 100%);
}

.bg-gradient-faded-primary {
    background-image: radial-gradient(370px circle at 80% 50%, rgba(233, 30, 99, 0.6) 0, #c1134e 100%);
}

.bg-gradient-faded-secondary {
    background-image: radial-gradient(370px circle at 80% 50%, rgba(123, 128, 154, 0.6) 0, #626780 100%);
}

.bg-gradient-faded-success {
    background-image: radial-gradient(370px circle at 80% 50%, rgba(76, 175, 80, 0.6) 0, #3d8b40 100%);
}

.bg-gradient-faded-info {
    background-image: radial-gradient(370px circle at 80% 50%, rgba(26, 115, 232, 0.6) 0, #135cbc 100%);
}

.bg-gradient-faded-warning {
    background-image: radial-gradient(370px circle at 80% 50%, rgba(251, 140, 0, 0.6) 0, #c87000 100%);
}

.bg-gradient-faded-danger {
    background-image: radial-gradient(370px circle at 80% 50%, rgba(244, 67, 53, 0.6) 0, #e91d0d 100%);
}

.bg-gradient-faded-light {
    background-image: radial-gradient(370px circle at 80% 50%, rgba(240, 242, 245, 0.6) 0, #d1d7e1 100%);
}

.bg-gradient-faded-dark {
    background-image: radial-gradient(370px circle at 80% 50%, rgba(52, 71, 103, 0.6) 0, #233045 100%);
}

.bg-gradient-faded-white {
    background-image: radial-gradient(370px circle at 80% 50%, rgba(255, 255, 255, 0.6) 0, #e6e6e6 100%);
}

.bg-gradient-faded-primary-vertical {
    background-image: radial-gradient(200px circle at 50% 70%, rgba(233, 30, 99, 0.3) 0, #e91e63 100%);
}

.bg-gradient-faded-secondary-vertical {
    background-image: radial-gradient(200px circle at 50% 70%, rgba(123, 128, 154, 0.3) 0, #7b809a 100%);
}

.bg-gradient-faded-success-vertical {
    background-image: radial-gradient(200px circle at 50% 70%, rgba(76, 175, 80, 0.3) 0, #4CAF50 100%);
}

.bg-gradient-faded-info-vertical {
    background-image: radial-gradient(200px circle at 50% 70%, rgba(26, 115, 232, 0.3) 0, #1A73E8 100%);
}

.bg-gradient-faded-warning-vertical {
    background-image: radial-gradient(200px circle at 50% 70%, rgba(251, 140, 0, 0.3) 0, #fb8c00 100%);
}

.bg-gradient-faded-danger-vertical {
    background-image: radial-gradient(200px circle at 50% 70%, rgba(244, 67, 53, 0.3) 0, #F44335 100%);
}

.bg-gradient-faded-light-vertical {
    background-image: radial-gradient(200px circle at 50% 70%, rgba(240, 242, 245, 0.3) 0, #f0f2f5 100%);
}

.bg-gradient-faded-dark-vertical {
    background-image: radial-gradient(200px circle at 50% 70%, rgba(52, 71, 103, 0.3) 0, #344767 100%);
}

.bg-gradient-faded-white-vertical {
    background-image: radial-gradient(200px circle at 50% 70%, rgba(255, 255, 255, 0.3) 0, #fff 100%);
}

/*--------------------------------------------------------------
# Backgroud Color
--------------------------------------------------------------*/
.bg-100 {
    background-color: #FAFAFA !important
}

.bg-200 {
    background-color: #E8E5E9 !important
}

.bg-300 {
    background-color: #DFDBDF !important
}

.bg-400 {
    background-color: #D5D1D6 !important
}

.bg-500 {
    background-color: #CCC6CD !important
}

.bg-600 {
    background-color: #C3BCC4 !important
}

.bg-700 {
    background-color: #B9B1BB !important
}

.bg-800 {
    background-color: #B0A7B2 !important
}

.bg-900 {
    background-color: #A79CA8 !important
}

.bg-1000 {
    background-color: #778295 !important
}

.bg-1100 {
    background-color: #44224B !important
}

.bg-1200 {
    background-color: #091E40 !important
}

.bg-white {
    background-color: #fff !important
}

.bg-primary {
    background-color: #717CFF !important
}

.bg-secondary {
    background-color: #A79CA8 !important
}

.bg-success {
    background-color: #5fa500 !important
}

.bg-info {
    background-color: #3EB8F4 !important
}

.bg-warning {
    background-color: #ffee25 !important
}

.bg-danger {
    background-color: #ff717c !important
}

.bg-light {
    background-color: #F9FAFD !important
}

.bg-dark {
    background-color: #44224B !important
}

.bg-body {
    background-color: #fff !important
}

.bg-transparent {
    background-color: rgba(0,0,0,0) !important
}

.bg-gradient {
    background-image: var(--bs-gradient) !important
}

/*--------------------------------------------------------------
# Z-index
--------------------------------------------------------------*/
.z-index-0 {
    z-index: 0 !important;
}

.z-index-1 {
    z-index: 1 !important;
}

.z-index-2 {
    z-index: 2 !important;
}

.z-index-3 {
    z-index: 3 !important;
}

/*--------------------------------------------------------------
# Border Radius
--------------------------------------------------------------*/
.border-radius-top-start {
    border-top-left-radius: 0.25rem !important;
}

.border-radius-top-start-0 {
    border-top-left-radius: 0 !important;
}

.border-radius-top-start-sm {
    border-top-left-radius: 0.125rem !important;
}

.border-radius-top-start-md {
    border-top-left-radius: 0.25rem !important;
}

.border-radius-top-start-lg {
    border-top-left-radius: 0.5rem !important;
}

.border-radius-top-start-xl {
    border-top-left-radius: 0.75rem !important;
}

.border-radius-top-start-2xl {
    border-top-left-radius: 1rem !important;
}

.border-radius-top-start-circle {
    border-top-left-radius: 50% !important;
}

.border-radius-top-start-pill {
    border-top-left-radius: 50rem !important;
}

.border-radius-top-end {
    border-top-right-radius: 0.25rem !important;
}

.border-radius-top-end-0 {
    border-top-right-radius: 0 !important;
}

.border-radius-top-end-sm {
    border-top-right-radius: 0.125rem !important;
}

.border-radius-top-end-md {
    border-top-right-radius: 0.25rem !important;
}

.border-radius-top-end-lg {
    border-top-right-radius: 0.5rem !important;
}

.border-radius-top-end-xl {
    border-top-right-radius: 0.75rem !important;
}

.border-radius-top-end-2xl {
    border-top-right-radius: 1rem !important;
}

.border-radius-top-end-circle {
    border-top-right-radius: 50% !important;
}

.border-radius-top-end-pill {
    border-top-right-radius: 50rem !important;
}

.border-radius-bottom-start {
    border-bottom-left-radius: 0.25rem !important;
}

.border-radius-bottom-start-0 {
    border-bottom-left-radius: 0 !important;
}

.border-radius-bottom-start-sm {
    border-bottom-left-radius: 0.125rem !important;
}

.border-radius-bottom-start-md {
    border-bottom-left-radius: 0.25rem !important;
}

.border-radius-bottom-start-lg {
    border-bottom-left-radius: 0.5rem !important;
}

.border-radius-bottom-start-xl {
    border-bottom-left-radius: 0.75rem !important;
}

.border-radius-bottom-start-2xl {
    border-bottom-left-radius: 1rem !important;
}

.border-radius-bottom-start-circle {
    border-bottom-left-radius: 50% !important;
}

.border-radius-bottom-start-pill {
    border-bottom-left-radius: 50rem !important;
}

.border-radius-bottom-end {
    border-bottom-right-radius: 0.25rem !important;
}

.border-radius-bottom-end-0 {
    border-bottom-right-radius: 0 !important;
}

.border-radius-bottom-end-sm {
    border-bottom-right-radius: 0.125rem !important;
}

.border-radius-bottom-end-md {
    border-bottom-right-radius: 0.25rem !important;
}

.border-radius-bottom-end-lg {
    border-bottom-right-radius: 0.5rem !important;
}

.border-radius-bottom-end-xl {
    border-bottom-right-radius: 0.75rem !important;
}

.border-radius-bottom-end-2xl {
    border-bottom-right-radius: 1rem !important;
}

.border-radius-bottom-end-circle {
    border-bottom-right-radius: 50% !important;
}

.border-radius-bottom-end-pill {
    border-bottom-right-radius: 50rem !important;
}

.border-radius-xs {
    border-radius: 0.1rem;
}

.border-radius-sm {
    border-radius: 0.125rem;
}

.border-radius-md {
    border-radius: 0.375rem;
}

.border-radius-lg {
    border-radius: 0.5rem;
}

.border-radius-xl {
    border-radius: 0.75rem;
}

.border-radius-2xl {
    border-radius: 1rem;
}

.border-radius-section {
    border-radius: 10rem;
}

.border-bottom-end-radius-0 {
    border-bottom-right-radius: 0;
}

.border-top-end-radius-0 {
    border-top-right-radius: 0;
}

.border-bottom-start-radius-0 {
    border-bottom-left-radius: 0;
}

.border-top-start-radius-0 {
    border-top-left-radius: 0;
}

.border-dashed {
    border-style: dashed;
}






/*--------------------------------------------------------------
# Flex-Center
--------------------------------------------------------------*/
.flex-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.flex-between-center {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.flex-end-center {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.flex-1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

/*--------------------------------------------------------------
# Btn - glow + Hover top
--------------------------------------------------------------*/
.btn-glow {
    position: relative
}

    .btn-glow::before {
        content: '';
        height: 80%;
        width: 80%;
        position: absolute;
        top: 10%;
        left: 10%;
        display: inline-block;
        background-color: inherit;
        opacity: 0.55;
        -webkit-filter: blur(26px);
        filter: blur(26px);
        -webkit-transform: translateY(45%);
        -ms-transform: translateY(45%);
        transform: translateY(45%);
        z-index: -1;
        border-radius: 10px
    }

.hover-top {
    -webkit-transform: translateY(0) translateZ(0);
    transform: translateY(0) translateZ(0);
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease
}

    .hover-top.hover-top-shadow-lg:hover, .hover-top.hover-top-shadow-lg:focus {
        -webkit-transform: translateY(-0.3125rem) translateZ(0);
        transform: translateY(-0.3125rem) translateZ(0)
    }

    .hover-top:hover, .hover-top:focus {
        -webkit-transform: translateY(-0.125rem) translateZ(0);
        transform: translateY(-0.125rem) translateZ(0);
        -webkit-box-shadow: 0.5rem 0.5rem 1.5rem rgba(22,28,45,0.1) !important;
        box-shadow: 0.5rem 0.5rem 1.5rem rgba(22,28,45,0.1) !important;
        background-color: #53ACF8;
        color: #fff
    }

        .hover-top:hover .heading-color, .hover-top:focus .heading-color {
            color: #fff
        }

/*--------------------------------------------------------------
# Btn
--------------------------------------------------------------*/
.btn {
    transition: none;
    margin-bottom : 5px;
}

.btn:hover {
    color: #7b809a;
}

.btn-check:focus + .btn, .btn:focus {
    outline: 0;
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.09), 0 2px 3px -1px rgba(0, 0, 0, 0.07);
}

.btn:disabled, .btn.disabled,
fieldset:disabled .btn {
    pointer-events: none;
    opacity: 0.65;
}

.btn-primary {
    color: #000;
    background-color: #e91e63;
    border-color: #e91e63;
}

    .btn-primary:hover {
        color: #000;
        background-color: #ec407a;
        border-color: #eb3573;
    }

    .btn-check:focus + .btn-primary, .btn-primary:focus {
        color: #000;
        background-color: #ec407a;
        border-color: #eb3573;
        box-shadow: 0 0 0 0.2rem rgba(198, 26, 84, 0.5);
    }

    .btn-check:checked + .btn-primary,
    .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active,
    .show > .btn-primary.dropdown-toggle {
        color: #000;
        background-color: #ed4b82;
        border-color: #eb3573;
    }

        .btn-check:checked + .btn-primary:focus,
        .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus,
        .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(198, 26, 84, 0.5);
        }

    .btn-primary:disabled, .btn-primary.disabled {
        color: #000;
        background-color: #e91e63;
        border-color: #e91e63;
    }

.btn-secondary {
    color: #000;
    background-color: #7b809a;
    border-color: #7b809a;
}

    .btn-secondary:hover {
        color: #000;
        background-color: #8f93a9;
        border-color: #888da4;
    }

    .btn-check:focus + .btn-secondary, .btn-secondary:focus {
        color: #000;
        background-color: #8f93a9;
        border-color: #888da4;
        box-shadow: 0 0 0 0.2rem rgba(105, 109, 131, 0.5);
    }

    .btn-check:checked + .btn-secondary,
    .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active,
    .show > .btn-secondary.dropdown-toggle {
        color: #000;
        background-color: #9599ae;
        border-color: #888da4;
    }

        .btn-check:checked + .btn-secondary:focus,
        .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus,
        .show > .btn-secondary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(105, 109, 131, 0.5);
        }

    .btn-secondary:disabled, .btn-secondary.disabled {
        color: #000;
        background-color: #7b809a;
        border-color: #7b809a;
    }

.btn-success {
    color: #000;
    background-color: #4CAF50;
    border-color: #4CAF50;
}

    .btn-success:hover {
        color: #000;
        background-color: #67bb6a;
        border-color: #5eb762;
    }

    .btn-check:focus + .btn-success, .btn-success:focus {
        color: #000;
        background-color: #67bb6a;
        border-color: #5eb762;
        box-shadow: 0 0 0 0.2rem rgba(65, 149, 68, 0.5);
    }

    .btn-check:checked + .btn-success,
    .btn-check:active + .btn-success, .btn-success:active, .btn-success.active,
    .show > .btn-success.dropdown-toggle {
        color: #000;
        background-color: #70bf73;
        border-color: #5eb762;
    }

        .btn-check:checked + .btn-success:focus,
        .btn-check:active + .btn-success:focus, .btn-success:active:focus, .btn-success.active:focus,
        .show > .btn-success.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(65, 149, 68, 0.5);
        }

    .btn-success:disabled, .btn-success.disabled {
        color: #000;
        background-color: #4CAF50;
        border-color: #4CAF50;
    }

.btn-info {
    color: #fff;
    background-color: #1A73E8;
    border-color: #1A73E8;
}

    .btn-info:hover {
        color: #fff;
        background-color: #1662c5;
        border-color: #155cba;
    }

    .btn-check:focus + .btn-info, .btn-info:focus {
        color: #fff;
        background-color: #1662c5;
        border-color: #155cba;
        box-shadow: 0 0 0 0.2rem rgba(60, 136, 235, 0.5);
    }

    .btn-check:checked + .btn-info,
    .btn-check:active + .btn-info, .btn-info:active, .btn-info.active,
    .show > .btn-info.dropdown-toggle {
        color: #fff;
        background-color: #155cba;
        border-color: #1456ae;
    }

        .btn-check:checked + .btn-info:focus,
        .btn-check:active + .btn-info:focus, .btn-info:active:focus, .btn-info.active:focus,
        .show > .btn-info.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(60, 136, 235, 0.5);
        }

    .btn-info:disabled, .btn-info.disabled {
        color: #fff;
        background-color: #1A73E8;
        border-color: #1A73E8;
    }

.btn-warning {
    color: #000;
    background-color: #fb8c00;
    border-color: #fb8c00;
}

    .btn-warning:hover {
        color: #000;
        background-color: #fc9d26;
        border-color: #fb981a;
    }

    .btn-check:focus + .btn-warning, .btn-warning:focus {
        color: #000;
        background-color: #fc9d26;
        border-color: #fb981a;
        box-shadow: 0 0 0 0.2rem rgba(213, 119, 0, 0.5);
    }

    .btn-check:checked + .btn-warning,
    .btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active,
    .show > .btn-warning.dropdown-toggle {
        color: #000;
        background-color: #fca333;
        border-color: #fb981a;
    }

        .btn-check:checked + .btn-warning:focus,
        .btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus,
        .show > .btn-warning.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(213, 119, 0, 0.5);
        }

    .btn-warning:disabled, .btn-warning.disabled {
        color: #000;
        background-color: #fb8c00;
        border-color: #fb8c00;
    }

.btn-danger {
    color: #000;
    background-color: #F44335;
    border-color: #F44335;
}

    .btn-danger:hover {
        color: #000;
        background-color: #f65f53;
        border-color: #f55649;
    }

    .btn-check:focus + .btn-danger, .btn-danger:focus {
        color: #000;
        background-color: #f65f53;
        border-color: #f55649;
        box-shadow: 0 0 0 0.2rem rgba(207, 57, 45, 0.5);
    }

    .btn-check:checked + .btn-danger,
    .btn-check:active + .btn-danger, .btn-danger:active, .btn-danger.active,
    .show > .btn-danger.dropdown-toggle {
        color: #000;
        background-color: #f6695d;
        border-color: #f55649;
    }

        .btn-check:checked + .btn-danger:focus,
        .btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus,
        .show > .btn-danger.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(207, 57, 45, 0.5);
        }

    .btn-danger:disabled, .btn-danger.disabled {
        color: #000;
        background-color: #F44335;
        border-color: #F44335;
    }

.btn-light {
    color: #000;
    background-color: #f0f2f5;
    border-color: #f0f2f5;
}

    .btn-light:hover {
        color: #000;
        background-color: #f2f4f7;
        border-color: #f2f3f6;
    }

    .btn-check:focus + .btn-light, .btn-light:focus {
        color: #000;
        background-color: #f2f4f7;
        border-color: #f2f3f6;
        box-shadow: 0 0 0 0.2rem rgba(204, 206, 208, 0.5);
    }

    .btn-check:checked + .btn-light,
    .btn-check:active + .btn-light, .btn-light:active, .btn-light.active,
    .show > .btn-light.dropdown-toggle {
        color: #000;
        background-color: #f3f5f7;
        border-color: #f2f3f6;
    }

        .btn-check:checked + .btn-light:focus,
        .btn-check:active + .btn-light:focus, .btn-light:active:focus, .btn-light.active:focus,
        .show > .btn-light.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(204, 206, 208, 0.5);
        }

    .btn-light:disabled, .btn-light.disabled {
        color: #000;
        background-color: #f0f2f5;
        border-color: #f0f2f5;
    }

.btn-dark {
    color: #fff;
    background-color: #344767;
    border-color: #344767;
}

    .btn-dark:hover {
        color: #fff;
        background-color: #2c3c58;
        border-color: #2a3952;
    }

    .btn-check:focus + .btn-dark, .btn-dark:focus {
        color: #fff;
        background-color: #2c3c58;
        border-color: #2a3952;
        box-shadow: 0 0 0 0.2rem rgba(82, 99, 126, 0.5);
    }

    .btn-check:checked + .btn-dark,
    .btn-check:active + .btn-dark, .btn-dark:active, .btn-dark.active,
    .show > .btn-dark.dropdown-toggle {
        color: #fff;
        background-color: #2a3952;
        border-color: #27354d;
    }

        .btn-check:checked + .btn-dark:focus,
        .btn-check:active + .btn-dark:focus, .btn-dark:active:focus, .btn-dark.active:focus,
        .show > .btn-dark.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(82, 99, 126, 0.5);
        }

    .btn-dark:disabled, .btn-dark.disabled {
        color: #fff;
        background-color: #344767;
        border-color: #344767;
    }

.btn-white {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}

    .btn-white:hover {
        color: #000;
        background-color: white;
        border-color: white;
    }

    .btn-check:focus + .btn-white, .btn-white:focus {
        color: #000;
        background-color: white;
        border-color: white;
        box-shadow: 0 0 0 0.2rem rgba(217, 217, 217, 0.5);
    }

    .btn-check:checked + .btn-white,
    .btn-check:active + .btn-white, .btn-white:active, .btn-white.active,
    .show > .btn-white.dropdown-toggle {
        color: #000;
        background-color: white;
        border-color: white;
    }

        .btn-check:checked + .btn-white:focus,
        .btn-check:active + .btn-white:focus, .btn-white:active:focus, .btn-white.active:focus,
        .show > .btn-white.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(217, 217, 217, 0.5);
        }

    .btn-white:disabled, .btn-white.disabled {
        color: #000;
        background-color: #fff;
        border-color: #fff;
    }

.btn-outline-primary {
    color: #e91e63;
    border-color: #e91e63;
}

    .btn-outline-primary:hover {
        color: #000;
        background-color: #e91e63;
        border-color: #e91e63;
    }

    .btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
        box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.5);
    }

    .btn-check:checked + .btn-outline-primary,
    .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
        color: #000;
        background-color: #e91e63;
        border-color: #e91e63;
    }

        .btn-check:checked + .btn-outline-primary:focus,
        .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus {
            box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.5);
        }

    .btn-outline-primary:disabled, .btn-outline-primary.disabled {
        color: #e91e63;
        background-color: transparent;
    }

.btn-outline-secondary {
    color: #7b809a;
    border-color: #7b809a;
}

    .btn-outline-secondary:hover {
        color: #000;
        background-color: #7b809a;
        border-color: #7b809a;
    }

    .btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
        box-shadow: 0 0 0 0.2rem rgba(123, 128, 154, 0.5);
    }

    .btn-check:checked + .btn-outline-secondary,
    .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
        color: #000;
        background-color: #7b809a;
        border-color: #7b809a;
    }

        .btn-check:checked + .btn-outline-secondary:focus,
        .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus {
            box-shadow: 0 0 0 0.2rem rgba(123, 128, 154, 0.5);
        }

    .btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
        color: #7b809a;
        background-color: transparent;
    }

.btn-outline-success {
    color: #4CAF50;
    border-color: #4CAF50;
}

    .btn-outline-success:hover {
        color: #000;
        background-color: #4CAF50;
        border-color: #4CAF50;
    }

    .btn-check:focus + .btn-outline-success, .btn-outline-success:focus {
        box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.5);
    }

    .btn-check:checked + .btn-outline-success,
    .btn-check:active + .btn-outline-success, .btn-outline-success:active, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show {
        color: #000;
        background-color: #4CAF50;
        border-color: #4CAF50;
    }

        .btn-check:checked + .btn-outline-success:focus,
        .btn-check:active + .btn-outline-success:focus, .btn-outline-success:active:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus {
            box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.5);
        }

    .btn-outline-success:disabled, .btn-outline-success.disabled {
        color: #4CAF50;
        background-color: transparent;
    }

.btn-outline-info {
    color: #1A73E8;
    border-color: #1A73E8;
}

    .btn-outline-info:hover {
        color: #fff;
        background-color: #1A73E8;
        border-color: #1A73E8;
    }

    .btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
        box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.5);
    }

    .btn-check:checked + .btn-outline-info,
    .btn-check:active + .btn-outline-info, .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show {
        color: #fff;
        background-color: #1A73E8;
        border-color: #1A73E8;
    }

        .btn-check:checked + .btn-outline-info:focus,
        .btn-check:active + .btn-outline-info:focus, .btn-outline-info:active:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus {
            box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.5);
        }

    .btn-outline-info:disabled, .btn-outline-info.disabled {
        color: #1A73E8;
        background-color: transparent;
    }

.btn-outline-warning {
    color: #fb8c00;
    border-color: #fb8c00;
}

    .btn-outline-warning:hover {
        color: #000;
        background-color: #fb8c00;
        border-color: #fb8c00;
    }

    .btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus {
        box-shadow: 0 0 0 0.2rem rgba(251, 140, 0, 0.5);
    }

    .btn-check:checked + .btn-outline-warning,
    .btn-check:active + .btn-outline-warning, .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show {
        color: #000;
        background-color: #fb8c00;
        border-color: #fb8c00;
    }

        .btn-check:checked + .btn-outline-warning:focus,
        .btn-check:active + .btn-outline-warning:focus, .btn-outline-warning:active:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus {
            box-shadow: 0 0 0 0.2rem rgba(251, 140, 0, 0.5);
        }

    .btn-outline-warning:disabled, .btn-outline-warning.disabled {
        color: #fb8c00;
        background-color: transparent;
    }

.btn-outline-danger {
    color: #F44335;
    border-color: #F44335;
}

    .btn-outline-danger:hover {
        color: #000;
        background-color: #F44335;
        border-color: #F44335;
    }

    .btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus {
        box-shadow: 0 0 0 0.2rem rgba(244, 67, 53, 0.5);
    }

    .btn-check:checked + .btn-outline-danger,
    .btn-check:active + .btn-outline-danger, .btn-outline-danger:active, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show {
        color: #000;
        background-color: #F44335;
        border-color: #F44335;
    }

        .btn-check:checked + .btn-outline-danger:focus,
        .btn-check:active + .btn-outline-danger:focus, .btn-outline-danger:active:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus {
            box-shadow: 0 0 0 0.2rem rgba(244, 67, 53, 0.5);
        }

    .btn-outline-danger:disabled, .btn-outline-danger.disabled {
        color: #F44335;
        background-color: transparent;
    }

.btn-outline-light {
    color: #f0f2f5;
    border-color: #f0f2f5;
}

    .btn-outline-light:hover {
        color: #000;
        background-color: #f0f2f5;
        border-color: #f0f2f5;
    }

    .btn-check:focus + .btn-outline-light, .btn-outline-light:focus {
        box-shadow: 0 0 0 0.2rem rgba(240, 242, 245, 0.5);
    }

    .btn-check:checked + .btn-outline-light,
    .btn-check:active + .btn-outline-light, .btn-outline-light:active, .btn-outline-light.active, .btn-outline-light.dropdown-toggle.show {
        color: #000;
        background-color: #f0f2f5;
        border-color: #f0f2f5;
    }

        .btn-check:checked + .btn-outline-light:focus,
        .btn-check:active + .btn-outline-light:focus, .btn-outline-light:active:focus, .btn-outline-light.active:focus, .btn-outline-light.dropdown-toggle.show:focus {
            box-shadow: 0 0 0 0.2rem rgba(240, 242, 245, 0.5);
        }

    .btn-outline-light:disabled, .btn-outline-light.disabled {
        color: #f0f2f5;
        background-color: transparent;
    }

.btn-outline-dark {
    color: #344767;
    border-color: #344767;
}

    .btn-outline-dark:hover {
        color: #fff;
        background-color: #344767;
        border-color: #344767;
    }

    .btn-check:focus + .btn-outline-dark, .btn-outline-dark:focus {
        box-shadow: 0 0 0 0.2rem rgba(52, 71, 103, 0.5);
    }

    .btn-check:checked + .btn-outline-dark,
    .btn-check:active + .btn-outline-dark, .btn-outline-dark:active, .btn-outline-dark.active, .btn-outline-dark.dropdown-toggle.show {
        color: #fff;
        background-color: #344767;
        border-color: #344767;
    }

        .btn-check:checked + .btn-outline-dark:focus,
        .btn-check:active + .btn-outline-dark:focus, .btn-outline-dark:active:focus, .btn-outline-dark.active:focus, .btn-outline-dark.dropdown-toggle.show:focus {
            box-shadow: 0 0 0 0.2rem rgba(52, 71, 103, 0.5);
        }

    .btn-outline-dark:disabled, .btn-outline-dark.disabled {
        color: #344767;
        background-color: transparent;
    }

.btn-outline-white {
    color: #fff;
    border-color: #fff;
}

    .btn-outline-white:hover {
        color: #000;
        background-color: #fff;
        border-color: #fff;
    }

    .btn-check:focus + .btn-outline-white, .btn-outline-white:focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
    }

    .btn-check:checked + .btn-outline-white,
    .btn-check:active + .btn-outline-white, .btn-outline-white:active, .btn-outline-white.active, .btn-outline-white.dropdown-toggle.show {
        color: #000;
        background-color: #fff;
        border-color: #fff;
    }

        .btn-check:checked + .btn-outline-white:focus,
        .btn-check:active + .btn-outline-white:focus, .btn-outline-white:active:focus, .btn-outline-white.active:focus, .btn-outline-white.dropdown-toggle.show:focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
        }

    .btn-outline-white:disabled, .btn-outline-white.disabled {
        color: #fff;
        background-color: transparent;
    }

.btn-link {
    font-weight: 400;
    color: #e91e63;
    text-decoration: none;
}

    .btn-link:hover {
        color: #e91e63;
        text-decoration: none;
    }

    .btn-link:focus {
        text-decoration: none;
    }

    .btn-link:disabled, .btn-link.disabled {
        color: #6c757d;
    }

.btn-lg, .btn-group-lg > .btn {
    padding: 0.75rem 1.75rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
}

.btn-sm, .btn-group-sm > .btn {
    padding: 0.375rem 1rem;
    font-size: 0.75rem;
    border-radius: 0.5rem;
}

    .btn:not([class*="btn-outline-"]) {
        border: 0;
    }

    .btn:active, .btn:active:focus, .btn:active:hover {
        box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.09), 0 2px 3px -1px rgba(0, 0, 0, 0.07);
        transform: none;
        opacity: 0.85;
    }

    .btn.bg-white:hover {
        color: #7b809a;
    }

    .btn.btn-link {
        box-shadow: none;
        font-weight: 700;
    }

        .btn.btn-link:hover, .btn.btn-link:focus {
            box-shadow: none;
        }

    .btn.btn-round {
        border-radius: 1.875rem;
    }

    .btn.btn-icon-only {
        width: 2.375rem;
        height: 2.375rem;
        padding: 0.7rem 0.7rem;
    }

    .btn.btn-sm.btn-icon-only, .btn-group-sm > .btn.btn-icon-only {
        width: 1.5rem;
        height: 1.5rem;
        padding: 0.3rem 0.3rem;
    }

    .btn.btn-sm i, .btn-group-sm > .btn i {
        font-size: 0.5rem;
    }

    .btn.btn-lg.btn-icon-only, .btn-group-lg > .btn.btn-icon-only {
        width: 3.25rem;
        height: 3.25rem;
        padding: 1rem 1rem;
    }

    .btn.btn-lg i, .btn-group-lg > .btn i {
        font-size: 1.2rem;
        position: relative;
        top: 0px;
    }

    .btn.btn-rounded {
        border-radius: 1.875rem;
    }

    .btn .material-icons {
        vertical-align: middle;
        margin-top: -1px;
        margin-bottom: -1px;
        font-size: 1.1rem;
        display: inline-block;
        top: 0;
    }

.btn-check:checked + .btn svg .color-background {
    fill: #fff;
}

.btn-check:checked + .btn:hover svg .color-background {
    fill: #344767;
}

.icon-move-right i {
    transition: all 0.2s cubic-bezier(0.34, 1.61, 0.7, 1.3);
}

.icon-move-right:hover i, .icon-move-right:focus i {
    transform: translateX(5px);
}

.icon-move-left i {
    transition: all 0.2s cubic-bezier(0.34, 1.61, 0.7, 1.3);
}

.icon-move-left:hover i, .icon-move-left:focus i {
    transform: translateX(-5px);
}

.btn-primary,
.btn.bg-gradient-primary {
    box-shadow: 0 3px 3px 0 rgba(233, 30, 99, 0.15), 0 3px 1px -2px rgba(233, 30, 99, 0.2), 0 1px 5px 0 rgba(233, 30, 99, 0.15);
}

    .btn-primary:hover,
    .btn.bg-gradient-primary:hover {
        background-color: #e91e63;
        border-color: #e91e63;
        box-shadow: 0 14px 26px -12px rgba(233, 30, 99, 0.4), 0 4px 23px 0 rgba(233, 30, 99, 0.15), 0 8px 10px -5px rgba(233, 30, 99, 0.2);
    }

    .btn-primary .btn.bg-outline-primary,
    .btn.bg-gradient-primary .btn.bg-outline-primary {
        border: 1px solid #e91e63;
    }

    .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active,
    .show > .btn-primary.dropdown-toggle,
    .btn.bg-gradient-primary:not(:disabled):not(.disabled).active,
    .btn.bg-gradient-primary:not(:disabled):not(.disabled):active,
    .show >
    .btn.bg-gradient-primary.dropdown-toggle {
        color: color-yiq(#e91e63);
        background-color: #e91e63;
    }

    .btn-primary.focus, .btn-primary:focus,
    .btn.bg-gradient-primary.focus,
    .btn.bg-gradient-primary:focus {
        color: #fff;
    }

.btn-outline-primary {
    box-shadow: none;
}

    .btn-outline-primary:hover:not(.active) {
        background-color: transparent;
        opacity: .75;
        box-shadow: none;
        color: #e91e63;
    }

.btn-secondary,
.btn.bg-gradient-secondary {
    box-shadow: 0 3px 3px 0 rgba(123, 128, 154, 0.15), 0 3px 1px -2px rgba(123, 128, 154, 0.2), 0 1px 5px 0 rgba(123, 128, 154, 0.15);
}

    .btn-secondary:hover,
    .btn.bg-gradient-secondary:hover {
        background-color: #7b809a;
        border-color: #7b809a;
        box-shadow: 0 14px 26px -12px rgba(123, 128, 154, 0.4), 0 4px 23px 0 rgba(123, 128, 154, 0.15), 0 8px 10px -5px rgba(123, 128, 154, 0.2);
    }

    .btn-secondary .btn.bg-outline-secondary,
    .btn.bg-gradient-secondary .btn.bg-outline-secondary {
        border: 1px solid #7b809a;
    }

    .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active,
    .show > .btn-secondary.dropdown-toggle,
    .btn.bg-gradient-secondary:not(:disabled):not(.disabled).active,
    .btn.bg-gradient-secondary:not(:disabled):not(.disabled):active,
    .show >
    .btn.bg-gradient-secondary.dropdown-toggle {
        color: color-yiq(#7b809a);
        background-color: #7b809a;
    }

    .btn-secondary.focus, .btn-secondary:focus,
    .btn.bg-gradient-secondary.focus,
    .btn.bg-gradient-secondary:focus {
        color: #fff;
    }

.btn-outline-secondary {
    box-shadow: none;
}

    .btn-outline-secondary:hover:not(.active) {
        background-color: transparent;
        opacity: .75;
        box-shadow: none;
        color: #7b809a;
    }

.btn-success,
.btn.bg-gradient-success {
    box-shadow: 0 3px 3px 0 rgba(76, 175, 80, 0.15), 0 3px 1px -2px rgba(76, 175, 80, 0.2), 0 1px 5px 0 rgba(76, 175, 80, 0.15);
}

    .btn-success:hover,
    .btn.bg-gradient-success:hover {
        background-color: #4CAF50;
        border-color: #4CAF50;
        box-shadow: 0 14px 26px -12px rgba(76, 175, 80, 0.4), 0 4px 23px 0 rgba(76, 175, 80, 0.15), 0 8px 10px -5px rgba(76, 175, 80, 0.2);
    }

    .btn-success .btn.bg-outline-success,
    .btn.bg-gradient-success .btn.bg-outline-success {
        border: 1px solid #4CAF50;
    }

    .btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active,
    .show > .btn-success.dropdown-toggle,
    .btn.bg-gradient-success:not(:disabled):not(.disabled).active,
    .btn.bg-gradient-success:not(:disabled):not(.disabled):active,
    .show >
    .btn.bg-gradient-success.dropdown-toggle {
        color: color-yiq(#4CAF50);
        background-color: #4CAF50;
    }

    .btn-success.focus, .btn-success:focus,
    .btn.bg-gradient-success.focus,
    .btn.bg-gradient-success:focus {
        color: #fff;
    }

.btn-outline-success {
    box-shadow: none;
}

    .btn-outline-success:hover:not(.active) {
        background-color: transparent;
        opacity: .75;
        box-shadow: none;
        color: #4CAF50;
    }

.btn-info,
.btn.bg-gradient-info {
    box-shadow: 0 3px 3px 0 rgba(26, 115, 232, 0.15), 0 3px 1px -2px rgba(26, 115, 232, 0.2), 0 1px 5px 0 rgba(26, 115, 232, 0.15);
}

    .btn-info:hover,
    .btn.bg-gradient-info:hover {
        background-color: #1A73E8;
        border-color: #1A73E8;
        box-shadow: 0 14px 26px -12px rgba(26, 115, 232, 0.4), 0 4px 23px 0 rgba(26, 115, 232, 0.15), 0 8px 10px -5px rgba(26, 115, 232, 0.2);
    }

    .btn-info .btn.bg-outline-info,
    .btn.bg-gradient-info .btn.bg-outline-info {
        border: 1px solid #1A73E8;
    }

    .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active,
    .show > .btn-info.dropdown-toggle,
    .btn.bg-gradient-info:not(:disabled):not(.disabled).active,
    .btn.bg-gradient-info:not(:disabled):not(.disabled):active,
    .show >
    .btn.bg-gradient-info.dropdown-toggle {
        color: color-yiq(#1A73E8);
        background-color: #1A73E8;
    }

    .btn-info.focus, .btn-info:focus,
    .btn.bg-gradient-info.focus,
    .btn.bg-gradient-info:focus {
        color: #fff;
    }

.btn-outline-info {
    box-shadow: none;
}

    .btn-outline-info:hover:not(.active) {
        background-color: transparent;
        opacity: .75;
        box-shadow: none;
        color: #1A73E8;
    }

.btn-warning,
.btn.bg-gradient-warning {
    box-shadow: 0 3px 3px 0 rgba(251, 140, 0, 0.15), 0 3px 1px -2px rgba(251, 140, 0, 0.2), 0 1px 5px 0 rgba(251, 140, 0, 0.15);
}

    .btn-warning:hover,
    .btn.bg-gradient-warning:hover {
        background-color: #fb8c00;
        border-color: #fb8c00;
        box-shadow: 0 14px 26px -12px rgba(251, 140, 0, 0.4), 0 4px 23px 0 rgba(251, 140, 0, 0.15), 0 8px 10px -5px rgba(251, 140, 0, 0.2);
    }

    .btn-warning .btn.bg-outline-warning,
    .btn.bg-gradient-warning .btn.bg-outline-warning {
        border: 1px solid #fb8c00;
    }

    .btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active,
    .show > .btn-warning.dropdown-toggle,
    .btn.bg-gradient-warning:not(:disabled):not(.disabled).active,
    .btn.bg-gradient-warning:not(:disabled):not(.disabled):active,
    .show >
    .btn.bg-gradient-warning.dropdown-toggle {
        color: color-yiq(#fb8c00);
        background-color: #fb8c00;
    }

    .btn-warning.focus, .btn-warning:focus,
    .btn.bg-gradient-warning.focus,
    .btn.bg-gradient-warning:focus {
        color: #fff;
    }

.btn-outline-warning {
    box-shadow: none;
}

    .btn-outline-warning:hover:not(.active) {
        background-color: transparent;
        opacity: .75;
        box-shadow: none;
        color: #fb8c00;
    }

.btn-danger,
.btn.bg-gradient-danger {
    box-shadow: 0 3px 3px 0 rgba(244, 67, 53, 0.15), 0 3px 1px -2px rgba(244, 67, 53, 0.2), 0 1px 5px 0 rgba(244, 67, 53, 0.15);
}

    .btn-danger:hover,
    .btn.bg-gradient-danger:hover {
        background-color: #F44335;
        border-color: #F44335;
        box-shadow: 0 14px 26px -12px rgba(244, 67, 53, 0.4), 0 4px 23px 0 rgba(244, 67, 53, 0.15), 0 8px 10px -5px rgba(244, 67, 53, 0.2);
    }

    .btn-danger .btn.bg-outline-danger,
    .btn.bg-gradient-danger .btn.bg-outline-danger {
        border: 1px solid #F44335;
    }

    .btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active,
    .show > .btn-danger.dropdown-toggle,
    .btn.bg-gradient-danger:not(:disabled):not(.disabled).active,
    .btn.bg-gradient-danger:not(:disabled):not(.disabled):active,
    .show >
    .btn.bg-gradient-danger.dropdown-toggle {
        color: color-yiq(#F44335);
        background-color: #F44335;
    }

    .btn-danger.focus, .btn-danger:focus,
    .btn.bg-gradient-danger.focus,
    .btn.bg-gradient-danger:focus {
        color: #fff;
    }

.btn-outline-danger {
    box-shadow: none;
}

    .btn-outline-danger:hover:not(.active) {
        background-color: transparent;
        opacity: .75;
        box-shadow: none;
        color: #F44335;
    }

.btn-light,
.btn.bg-gradient-light {
    box-shadow: 0 3px 3px 0 rgba(240, 242, 245, 0.15), 0 3px 1px -2px rgba(240, 242, 245, 0.2), 0 1px 5px 0 rgba(240, 242, 245, 0.15);
}

    .btn-light:hover,
    .btn.bg-gradient-light:hover {
        background-color: #f0f2f5;
        border-color: #f0f2f5;
        box-shadow: 0 14px 26px -12px rgba(240, 242, 245, 0.4), 0 4px 23px 0 rgba(240, 242, 245, 0.15), 0 8px 10px -5px rgba(240, 242, 245, 0.2);
    }

    .btn-light .btn.bg-outline-light,
    .btn.bg-gradient-light .btn.bg-outline-light {
        border: 1px solid #f0f2f5;
    }

    .btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active,
    .show > .btn-light.dropdown-toggle,
    .btn.bg-gradient-light:not(:disabled):not(.disabled).active,
    .btn.bg-gradient-light:not(:disabled):not(.disabled):active,
    .show >
    .btn.bg-gradient-light.dropdown-toggle {
        color: color-yiq(#f0f2f5);
        background-color: #f0f2f5;
    }

.btn-outline-light {
    box-shadow: none;
}

    .btn-outline-light:hover:not(.active) {
        background-color: transparent;
        opacity: .75;
        box-shadow: none;
        color: #f0f2f5;
    }

.btn-dark,
.btn.bg-gradient-dark {
    box-shadow: 0 3px 3px 0 rgba(52, 71, 103, 0.15), 0 3px 1px -2px rgba(52, 71, 103, 0.2), 0 1px 5px 0 rgba(52, 71, 103, 0.15);
}

    .btn-dark:hover,
    .btn.bg-gradient-dark:hover {
        background-color: #344767;
        border-color: #344767;
        box-shadow: 0 14px 26px -12px rgba(52, 71, 103, 0.4), 0 4px 23px 0 rgba(52, 71, 103, 0.15), 0 8px 10px -5px rgba(52, 71, 103, 0.2);
    }

    .btn-dark .btn.bg-outline-dark,
    .btn.bg-gradient-dark .btn.bg-outline-dark {
        border: 1px solid #344767;
    }

    .btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active,
    .show > .btn-dark.dropdown-toggle,
    .btn.bg-gradient-dark:not(:disabled):not(.disabled).active,
    .btn.bg-gradient-dark:not(:disabled):not(.disabled):active,
    .show >
    .btn.bg-gradient-dark.dropdown-toggle {
        color: color-yiq(#344767);
        background-color: #344767;
    }

    .btn-dark.focus, .btn-dark:focus,
    .btn.bg-gradient-dark.focus,
    .btn.bg-gradient-dark:focus {
        color: #fff;
    }

.btn-outline-dark {
    box-shadow: none;
}

    .btn-outline-dark:hover:not(.active) {
        background-color: transparent;
        opacity: .75;
        box-shadow: none;
        color: #344767;
    }

.btn-white,
.btn.bg-gradient-white {
    box-shadow: 0 3px 3px 0 rgba(255, 255, 255, 0.15), 0 3px 1px -2px rgba(255, 255, 255, 0.2), 0 1px 5px 0 rgba(255, 255, 255, 0.15);
}

    .btn-white:hover,
    .btn.bg-gradient-white:hover {
        background-color: #fff;
        border-color: #fff;
        box-shadow: 0 14px 26px -12px rgba(255, 255, 255, 0.4), 0 4px 23px 0 rgba(255, 255, 255, 0.15), 0 8px 10px -5px rgba(255, 255, 255, 0.2);
    }

    .btn-white .btn.bg-outline-white,
    .btn.bg-gradient-white .btn.bg-outline-white {
        border: 1px solid #fff;
    }

    .btn-white:not(:disabled):not(.disabled).active, .btn-white:not(:disabled):not(.disabled):active,
    .show > .btn-white.dropdown-toggle,
    .btn.bg-gradient-white:not(:disabled):not(.disabled).active,
    .btn.bg-gradient-white:not(:disabled):not(.disabled):active,
    .show >
    .btn.bg-gradient-white.dropdown-toggle {
        color: color-yiq(#fff);
        background-color: #fff;
    }

.btn-outline-white {
    box-shadow: none;
}

    .btn-outline-white:hover:not(.active) {
        background-color: transparent;
        opacity: .75;
        box-shadow: none;
        color: #fff;
    }

.btn-outline-white {
    border-color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.1);
}

.btn-primary,
.btn.bg-gradient-primary {
    color: #fff;
}

    .btn-primary:hover,
    .btn.bg-gradient-primary:hover {
        color: #fff;
    }

.btn-secondary,
.btn.bg-gradient-secondary {
    color: #fff;
}

    .btn-secondary:hover,
    .btn.bg-gradient-secondary:hover {
        color: #fff;
    }

.btn-danger,
.btn.bg-gradient-danger {
    color: #fff;
}

    .btn-danger:hover,
    .btn.bg-gradient-danger:hover {
        color: #fff;
    }

.btn-info,
.btn.bg-gradient-info {
    color: #fff;
}

    .btn-info:hover,
    .btn.bg-gradient-info:hover {
        color: #fff;
    }

.btn-success,
.btn.bg-gradient-success {
    color: #fff;
}

    .btn-success:hover,
    .btn.bg-gradient-success:hover {
        color: #fff;
    }

.btn-warning,
.btn.bg-gradient-warning {
    color: #fff;
}

    .btn-warning:hover,
    .btn.bg-gradient-warning:hover {
        color: #fff;
    }

.btn-dark,
.btn.bg-gradient-dark {
    color: #fff;
}

    .btn-dark:hover,
    .btn.bg-gradient-dark:hover {
        color: #fff;
    }

.btn-light,
.btn.bg-gradient-light {
    color: #3A416F;
}

    .btn-light:hover,
    .btn.bg-gradient-light:hover {
        color: #3A416F;
    }
/*--------------------------------------------------------------
# Rounded
--------------------------------------------------------------*/
.rounded {
    border-radius: 0.25rem !important;
}

.rounded-0 {
    border-radius: 0 !important;
}

.rounded-1 {
    border-radius: 0.125rem !important;
}

.rounded-2 {
    border-radius: 0.25rem !important;
}

.rounded-3 {
    border-radius: 0.5rem !important;
}

.rounded-circle, .avatar.rounded-circle img {
    border-radius: 50% !important;
}

.rounded-pill {
    border-radius: 50rem !important;
}

.rounded-top {
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
}

.rounded-end {
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
}

.rounded-bottom {
    border-bottom-right-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
}

.rounded-start {
    border-bottom-left-radius: 0.25rem !important;
    border-top-left-radius: 0.25rem !important;
}


/*--------------------------------------------------------------
# head-service
--------------------------------------------------------------*/

.headservice .icon-box i {
    color: #7cc576;
    font-size: 20px;
    padding-right: 4px;
    float: left;
}

.headservice .icon-box h6 {
    font-size: 20px;
    font-weight: 700;
    margin: 5px 0 10px 30px;
}

.headservice .icon-box2 h6 {
    font-size: 20px;
    font-weight: 700;
    margin: 5px 0 10px 30px;
}

.headservice .icon-box i {
    font-size: 20px;
    float: left;
    color: #7cc576;
}

.headservice .icon-box2 i {
    font-size: 20px;
    float: left;
    color: dodgerblue;
}

.headservice .icon-box p {
    font-size: 16px;
    color: #959595;
    margin-left: 30px;
}

.headservice .icon-box2 p {
    font-size: 16px;
    color: #959595;
    margin-left: 30px;
}

.headservice .image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 400px;
}



/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 5px 0 10px 60px;
}

.services .icon-box2 h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 5px 0 10px 60px;
}

.services .icon-box i {
    font-size: 48px;
    float: left;
    color: #309EE8;
}

.services .icon-box2 i {
    font-size: 48px;
    float: left;
    color: dodgerblue;
}

.services .icon-box p {
    font-size: 15px;
    color: #959595;
    margin-left: 60px;
}

.services .icon-box2 p {
    font-size: 15px;
    color: #959595;
    margin-left: 60px;
}

.services .image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 300px;
}
/*--------------------------------------------------------------
# documents
--------------------------------------------------------------*/
.documents .image {
    aspect-ratio: 3/4;
    max-height: inherit;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.documents a:hover .image {
    opacity: 0.8;
}

.documents p{
    font-size : 13px;
    color :darkgrey;
}

.documents .header-text {
    font-size : 16px;
    font-weight : bold ;
        
}

/*--------------------------------------------------------------
# news  (Default page)
--------------------------------------------------------------*/
.news .image {
    aspect-ratio: 16/9;
    max-height: inherit;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.news a:hover .image {
    opacity: 0.8;
}
.news .header-text {
    font-size: 16px;
    font-weight: bold;
    color : midnightblue ;
    padding: 10px 0 10px 0;
}

.news .sub-header {
    font-size: 14px;
    color: darkred;
    padding: 0 0 5px 0;
}
.news p {
    font-size: 13px;
    color: black;
    text-indent: 10px;
    width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    max-height: 100%;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
/*--------------------------------------------------------------
# product-default (Default Page)
--------------------------------------------------------------*/
.product-default a{
    color: dodgerblue;
    text-decoration : none;
}
.product-default p {
    font-size: 18px;
    color: black;
    text-indent: 15px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    max-height: 100%;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}


/*--------------------------------------------------------------
# patentsearch (Default Page)
--------------------------------------------------------------*/
.patentsearch .text-title {
    font-size: 15px;
}

.patent-link {
    width: 100%;
    text-align: center;
    padding: 5px;
    margin-bottom: 5px;
}

.patentsearch .div-img-height{
    height: 80px;
}

.patentsearch {
    background: whitesmoke;
    padding: 15px 0;
    text-align: center;
}

    .patentsearch img {
        height: 100%;
        filter: grayscale(100);
        transition: all 0.4s ease-in-out;
        display: inline-block;
        padding: 10px 0;
    }

    .patentsearch .patent-link:hover img {
        filter: none;
        transform: scale(1.2);
    }

@media (max-width: 768px) {
    .patentsearch img {
        height: 100%;
    }
}

@media (max-width: 575px) {
    .patentsearch img {
        height: 100%;
    }
}





/*--------------------------------------------------------------
# Storys
--------------------------------------------------------------*/
.storys .icon-box h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 5px 0 10px 60px;
}

.storys .icon-box i {
    font-size: 48px;
    float: left;
    color: #309EE8;
}

.storys .icon-box p {
    font-size: 15px;
    color: #959595;
    margin-left: 60px;
}

.storys .image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 400px;
}


/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-item {
    max-height: 400px;
    aspect-ratio: 4 / 3;
    margin-bottom : 10px;
}

.portfolio #portfolio-flters {
    padding: 0;
    margin: 0 auto 25px auto;
    list-style: none;
    text-align: center;
}

    .portfolio #portfolio-flters li {
        cursor: pointer;
        display: inline-block;
        padding: 10px 18px 12px 18px;
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
        text-transform: uppercase;
        color: #555555;
        transition: all 0.3s ease-in-out;
        margin: 0 4px 10px 4px;
        background: whitesmoke;
        border-radius: 4px;
    }

        .portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
            background: dodgerblue;
            color: #fff;
        }

        .portfolio #portfolio-flters li:last-child {
            margin-right: 0;
        }

.portfolio .portfolio-wrap {
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: rgba(0, 0, 0, 0.6);
}

    .portfolio .portfolio-wrap::before {
        content: "";
        background: rgba(21, 21, 21, 0.6);
        position: absolute;
        left: 30px;
        right: 30px;
        top: 30px;
        bottom: 30px;
        transition: all ease-in-out 0.3s;
        z-index: 2;
        opacity: 0;
    }

    .portfolio .portfolio-wrap .portfolio-info {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        z-index: 3;
        transition: all ease-in-out 0.3s;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5px 15px 5px 15px;
    }

        .portfolio .portfolio-wrap .portfolio-info::before {
            display: block;
            content: "";
            width: 48px;
            height: 48px;
            position: absolute;
            top: 35px;
            left: 35px;
            border-top: 3px solid #fff;
            border-left: 3px solid #fff;
            transition: all 0.5s ease 0s;
            z-index: 9994;
        }

        .portfolio .portfolio-wrap .portfolio-info::after {
            display: block;
            content: "";
            width: 48px;
            height: 48px;
            position: absolute;
            bottom: 35px;
            right: 35px;
            border-bottom: 3px solid #fff;
            border-right: 3px solid #fff;
            transition: all 0.5s ease 0s;
            z-index: 9994;
        }

        .portfolio .portfolio-wrap .portfolio-info h5 {
            font-size: 18px;
            color: #fff;
            font-weight: bold;
        }

        .portfolio .portfolio-wrap .portfolio-info p {
            color: #ffffff;
            font-size: 13px;
            text-transform: uppercase;
            padding: 0;
            margin: 0;
        }

    .portfolio .portfolio-wrap .portfolio-links {
        text-align: center;
        z-index: 4;
    }

        .portfolio .portfolio-wrap .portfolio-links a {
            color: #fff;
            margin: 0 2px;
            font-size: 28px;
            display: inline-block;
            transition: 0.3s;
        }

            .portfolio .portfolio-wrap .portfolio-links a:hover {
                color: #76a5c5;
            }

    .portfolio .portfolio-wrap:hover::before {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 1;
    }

    .portfolio .portfolio-wrap:hover .portfolio-info {
        opacity: 1;
        padding: 25px;
    }

        .portfolio .portfolio-wrap:hover .portfolio-info::before {
            top: 15px;
            left: 15px;
        }

        .portfolio .portfolio-wrap:hover .portfolio-info::after {
            bottom: 15px;
            right: 15px;
        }

/*--------------------------------------------------------------
# swiper-auto-slide
--------------------------------------------------------------*/
.swiper-auto-slide swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-auto-slide swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .swiper-auto-slide swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.swiper-auto-slide .swiper-pagination {
    margin-top: 40px;
    position: relative;
}

    .swiper-auto-slide .swiper-pagination .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        background-color: #fff;
        opacity: 1;
        border: 1px solid #7cc576;
    }

    .swiper-auto-slide .swiper-pagination .swiper-pagination-bullet-active {
        background-color: #7cc576;
    }


.swiper-auto-slide .portfolio-info {
    padding: 15px;
    box-shadow: 0px 0 30px rgba(21, 21, 21, 0.08);
}

    .swiper-auto-slide .portfolio-info h3 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }

    .swiper-auto-slide .portfolio-info ul {
        list-style: none;
        padding: 0;
        font-size: 15px;
    }

        .swiper-auto-slide .portfolio-info ul li + li {
            margin-top: 10px;
        }

.swiper-auto-slide .portfolio-description {
    padding: 30px 15px 10px 15px;
}

    .swiper-auto-slide .portfolio-description h4 {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .swiper-auto-slide .portfolio-description p {
        padding: 0;
    }

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team {
    background: #fff;
    padding: 60px 0;
}

    .team .member {
        margin-bottom: 20px;
        overflow: hidden;
    }

        .team .member .member-img {
            position: relative;
            overflow: hidden;
            border-radius: 5px;
        }

        .team .member .social {
            position: absolute;
            left: 0;
            bottom: -40px;
            right: 0;
            height: 40px;
            opacity: 0;
            transition: bottom ease-in-out 0.4s;
            background: rgba(48, 158, 232, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .team .member .social a {
                transition: color 0.3s;
                color: rgba(255, 255, 255, 0.7);
                margin: 0 10px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

                .team .member .social a i {
                    line-height: 0;
                }

                .team .member .social a:hover {
                    color: #fff;
                }

            .team .member .social i {
                font-size: 18px;
                margin: 0 2px;
            }

        .team .member .member-info h4 {
            font-weight: 700;
            margin: 15px 0 5px 0;
            font-size: 18px;
        }

        .team .member .member-info span {
            display: block;
            font-size: 14px;
            text-transform: uppercase;
            font-weight: 400;
            margin-bottom: 15px;
            color:royalblue;
        }

        .team .member .member-info p {
            font-style: italic;
            font-size: 14px;
            line-height: 26px;
            color: #888888;
        }

        .team .member:hover .social {
            bottom: 0;
            opacity: 1;
            transition: bottom ease-in-out 0.4s;
        }

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info {
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
}

    .contact .info i {
        font-size: 20px;
        color: #309EE8;
        float: left;
        width: 44px;
        height: 44px;
        background: #E2F4FF;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        transition: all 0.3s ease-in-out;
    }

    .contact .info h4 {
        padding: 0 0 0 60px;
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 5px;
        color: #151515;
    }

    .contact .info p {
        padding: 0 0 0 60px;
        margin-bottom: 0;
        font-size: 14px;
        color: #484848;
    }

    .contact .info .email, .contact .info .phone, .contact .info .website, .contact .info .facebook {
        margin-top: 40px;
    }

        .contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i, .contact .info .website:hover i, .contact .info .facebook:hover i {
            background: #309EE8;
            color: #fff;
        }

.contact .php-email-form {
    width: 100%;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
}

    .contact .php-email-form .form-group {
        padding-bottom: 8px;
    }

    .contact .php-email-form .error-message {
        display: none;
        color: #fff;
        background: #ed3c0d;
        text-align: left;
        padding: 15px;
        font-weight: 600;
    }

        .contact .php-email-form .error-message br + br {
            margin-top: 25px;
        }

    .contact .php-email-form .sent-message {
        display: none;
        color: #fff;
        background: #18d26e;
        text-align: center;
        padding: 15px;
        font-weight: 600;
    }

    .contact .php-email-form .loading {
        display: none;
        background: #fff;
        text-align: center;
        padding: 15px;
    }

        .contact .php-email-form .loading:before {
            content: "";
            display: inline-block;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            margin: 0 10px -6px 0;
            border: 3px solid #18d26e;
            border-top-color: #eee;
            -webkit-animation: animate-loading 1s linear infinite;
            animation: animate-loading 1s linear infinite;
        }

    .contact .php-email-form input, .contact .php-email-form textarea {
        border-radius: 0;
        box-shadow: none;
        font-size: 14px;
    }

    .contact .php-email-form input {
        height: 44px;
    }

    .contact .php-email-form textarea {
        padding: 10px 12px;
    }

    .contact .php-email-form button[type="submit"] {
        background: #7cc576;
        border: 0;
        padding: 10px 24px;
        color: #fff;
        transition: 0.4s;
        border-radius: 4px;
    }

        .contact .php-email-form button[type="submit"]:hover {
            background: #61b959;
        }

@-webkit-keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
    padding: 40px 0;
}

    .breadcrumbs h2 {
        font-size: 26px;
        font-weight: 300;
    }

    .breadcrumbs ol {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 15px;
    }

        .breadcrumbs ol li + li {
            padding-left: 10px;
        }

            .breadcrumbs ol li + li::before {
                display: inline-block;
                padding-right: 10px;
                color: #2f2f2f;
                content: "/";
            }

@media (max-width: 768px) {
    .breadcrumbs .d-flex {
        display: block !important;
    }

    .breadcrumbs ol {
        display: block;
    }

        .breadcrumbs ol li {
            display: inline-block;
        }
}

/*--------------------------------------------------------------
# AVATAR
--------------------------------------------------------------*/

.avatar {
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border-radius: 50rem;
    height: 48px;
    width: 48px;
    transition: all .2s ease-in-out;
}

    .avatar img {
        width: 100%;
    }

    .avatar + .avatar-content {
        display: inline-block;
        margin-left: 0.75rem;
    }

    .avatar.avatar-raised {
        margin-top: -24px;
    }

    .avatar.avatar-scale-up:hover {
        transform: scale(1.2);
    }

.active .avatar.avatar-scale-up {
    transform: scale(1.2);
}

.avatar-xxl {
    width: 110px !important;
    height: 110px !important;
}

    .avatar-xxl.avatar-raised {
        margin-top: -55px;
    }

.avatar-xl {
    width: 74px !important;
    height: 74px !important;
}

    .avatar-xl.avatar-raised {
        margin-top: -37px;
    }

.avatar-lg {
    width: 58px !important;
    height: 58px !important;
    font-size: 0.875rem;
}

    .avatar-lg.avatar-raised {
        margin-top: -29px;
    }

.avatar-sm {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.875rem;
}

    .avatar-sm.avatar-raised {
        margin-top: -18px;
    }

.avatar-xs {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.75rem;
}

    .avatar-xs.avatar-raised {
        margin-top: -12px;
    }

.avatar-group .avatar {
    position: relative;
    z-index: 2;
    border: 2px solid #fff;
}

    .avatar-group .avatar:hover {
        z-index: 3;
    }

    .avatar-group .avatar + .avatar {
        margin-left: -1rem;
    }

.rtl .avatar-group .avatar + .avatar {
    margin-left: 0;
    margin-right: -1rem;
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
    background: url("../img/footer-bg.jpg") center center no-repeat;
    color: #fff;
    font-size: 14px;
    position: relative;
}

    #footer::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.85);
        z-index: 1;
    }

    #footer .footer-top {
        position: relative;
        z-index: 2;
        text-align: center;
        padding: 80px 0;
    }

        #footer .footer-top .footer-logo img {
            height: 80px;
        }

        #footer .footer-top h3 {
            font-size: 36px;
            font-weight: 700;
            color: #fff;
            position: relative;
            font-family: "Kanit", sans-serif;
            padding: 30px 0 0 0;
            margin-bottom: 0;
        }

        #footer .footer-top p {
            font-size: 15px;
            font-style: italic;
            margin: 30px 0 0 0;
            padding: 0;
        }

        #footer .footer-top .footer-newsletter {
            text-align: center;
            font-size: 15px;
            margin-top: 30px;
        }

            #footer .footer-top .footer-newsletter form {
                background: #fff;
                padding: 6px 10px;
                position: relative;
                border-radius: 50px;
                box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
                text-align: left;
            }

                #footer .footer-top .footer-newsletter form input[type="email"] {
                    border: 0;
                    padding: 4px 8px;
                    width: calc(100% - 100px);
                }

                #footer .footer-top .footer-newsletter form input[type="submit"] {
                    position: absolute;
                    top: 0;
                    right: -1px;
                    bottom: 0;
                    border: 0;
                    background: none;
                    font-size: 16px;
                    padding: 0 20px;
                    background: #7cc576;
                    color: #fff;
                    transition: 0.3s;
                    border-radius: 50px;
                    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
                }

                    #footer .footer-top .footer-newsletter form input[type="submit"]:hover {
                        background: #5ab652;
                    }

        #footer .footer-top .social-links {
            margin-top: 30px;
        }

            #footer .footer-top .social-links a {
                font-size: 18px;
                display: inline-block;
                background: #7cc576;
                color: #fff;
                line-height: 1;
                padding: 8px 0;
                margin-right: 4px;
                border-radius: 50%;
                text-align: center;
                width: 36px;
                height: 36px;
                transition: 0.3s;
            }

                #footer .footer-top .social-links a:hover {
                    background: #5ab652;
                    color: #fff;
                    text-decoration: none;
                }

    #footer .footer-bottom {
        border-top: 1px solid #222222;
        z-index: 2;
        position: relative;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    #footer .copyright {
        text-align: center;
    }

    #footer .credits {
        text-align: center;
        font-size: 13px;
        padding-top: 5px;
    }

footer a{
    font-size : 15px;

}