/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates #aeaeae
-----------------------------------------------------------------*/

.counter {
    font-family: 'Segoe UI', sans-serif;
    font-weight: 400;
    color: #FFFFFF;
    font-size: 42px;
}

.topmargin-md {
    margin-top: 50px !important;
}

.dark .list-group-item {
    margin: 6px 0 0;
    color: #FFFFFF !important;
    background-color: rgba(0,0,0,0.2);
    border: 0px;s
}


.list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.dark a.list-group-item.active, .dark a.list-group-item.active:hover, .dark a.list-group-item.active:focus {
    color: #ffffff;
    background-color: #282828;
    border-color: #000000;
}

.list-group-item + .list-group-item.active {
    margin-top: 6px;
}

.dark .table {
    color: #FFFFFF;
    border-bottom-width: 0px;
}

.dark .pricing-title {
    background-color: #282828;
}

@media (min-width: 767.99px) {
    .heading-block h2 {
        font-size: 42px;
    }
}

.pricing-price:after {
    border-top: 0px !important;
}

.feature-box.fbox-center.fbox-small.fbox-plain .fbox-icon i {
    font-size: 62px !important;
}

.dark .feature-box p {
    color: #FFFFFF;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 16px !important;
    text-align: left;
}

.dark .feature-box h3 {
    color: #FFFFFF;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 20px !important;
}

/* ----- | Story-Box | ----- */
.story-box {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    cursor: pointer;
}

    .story-box .story-box-image {
        width: 70%;
        height: 500px;
        z-index: 2;
        overflow: hidden;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }

        .story-box .story-box-image img {
            display: block;
            height: auto;
            width: 100%;
            opacity: 1;
            transition: opacity .3s ease;
        }

    .story-box:hover .story-box-image img {
        opacity: .9;
    }

    .story-box .story-box-info {
        box-sizing: border-box;
        width: 50%;
        height: 430px;
        padding: 60px;
        margin: 35px 0 0 -20%;
        background: #282828;
        z-index: 4;
        transition: all ease-in .3s;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }

    .story-box.description-left .story-box-info {
        -ms-flex-order: -1;
        order: -1;
        margin: 35px -20% 0 0;
    }

    .story-box .story-box-info .story-title {
        font-family: 'Segoe UI', sans-serif;
        font-size: 26px;
        text-transform: uppercase;
        line-height: 1.4;
        font-weight: 700;
        letter-spacing: 0;
        color: #FFF;
    }

    .story-box .story-box-info .story-box-content p {
        font-size: 16px;
        font-weight: 400;
        color: #CCCCCC;
        line-height: 16px;
        font-family: 'Segoe UI', sans-serif;
    }

    .story-box .story-box-info .story-box-content a {
        font-size: 16px;
        text-decoration: underline !important;
    }

/* ----- Story-Box Responsive ----- */
@media (max-width: 991px) {

    .story-box .story-box-image {
        height: auto;
        width: 100%;
        height: 400px;
        -ms-flex-order: -1;
        order: -1;
    }

    .story-box.description-left .story-box-info {
        -ms-flex-order: -1;
        order: -1;
        margin: 35px -20% 0 0;
    }

    .story-box.description-left .story-box-info {
        margin: -40px 5% 0;
    }

    .story-box .story-box-info {
        max-width: 90%;
        height: auto;
        -ms-flex-preferred-size: 90%;
        flex-basis: 90%;
        margin: -40px 5% 0;
    }

    #side-panel-trigger {
        right: 40px !important;
    }

    .mobile-side-panel {
        position: absolute;
        display: block;
        top: 26px;
        font-size: 18px;
        color: #222;
        right: 40px;
        padding: 10px;
    }
}


@media (max-width: 767px) {

    .story-box.description-left .story-box-info {
        margin: -100px 5% 0;
    }

    .story-box .story-box-info {
        padding: 35px;
        text-align: center;
        margin: -100px 5% 0;
    }

    .customers-count {
        border-right: none
    }
}

@media (max-width: 479px) {

    .story-box .story-box-info {
        width: 100%;
        padding: 15px;
        text-align: center;
        margin: -200px 5% 0;
    }

    .story-box.description-left .story-box-info {
        margin: -200px 5% 0;
    }

    ul.tab-nav:not(.tab-nav-lg) li a i {
        display: none;
    }
}


/* ----- Tab ----- */
ul.tab-nav:not(.tab-nav-lg) {
    border-bottom: none;
}

    ul.tab-nav:not(.tab-nav-lg):not(.tab-nav2) li {
        float: left;
        border: none;
        height: auto;
        text-align: center;
    }



.tabs.tabs-alt ul.tab-nav li.ui-tabs-active a {
    border: none;
}

.dark ul.tab-nav.tab-nav2 li a:hover {
    background-color: #282828;
}

.dark ul.tab-nav.tab-nav2 li.ui-tabs-active a {
    background-color: #282828;
}

ul.tab-nav:not(.tab-nav-lg):not(.tab-nav2) li a {
    color: #FFFFFF;
    height: auto;
    line-height: 1;
    background-color: transparent;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 0 20px 0;
    letter-spacing: 1px;
}

    ul.tab-nav:not(.tab-nav-lg) li a i {
        display: block;
        font-size: 62px;
        margin: 0 0 17px 0;
        color: #dfdfdf;
    }

ul.tab-nav:not(.tab-nav-lg) li.ui-tabs-active a {
    top: 0;
}

ul.tab-nav:not(.tab-nav-lg):not(.tab-nav2) li.ui-tabs-active a:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0%;
    background: #EEE;
}

.tab-container {
    margin: 30px 0 0;
}


/* ----- Tab Responsive ----- */
.acctitle {
    line-height: 30px;
    font-size: 20px;
    font-weight: 500;
    color: #444;
    border-top: 1px dotted #DDD;
    padding: 12px 0 12px 24px;
    text-align: center;
}

.acc_content {
    padding: 10px 0 25px;
}

.acctitle i {
    color: var(--themecolor);
    font-size: 48px;
    top: 3px;
}

    .acctitle i.icon-ok-circle,
    .acctitle i.icon-remove-circle {
        display: none;
    }


.portfolio-overlay {
    background-color: #000000;
}

    .portfolio-overlay .portfolio-desc h3 a {
        font-size: 16px;
        font-weight: 700;
        color: #CCC !important;
        text-shadow: none;
    }

    .portfolio-overlay .portfolio-desc span {
        margin-top: 12px;
        /* text-transform: uppercase; */
        font-size: 14px;
        letter-spacing: 1px;
        font-weight: 300;
        padding-left: 30px;
        padding-right: 30px;
        text-align: left !important;
    }

.feature-box .fbox-icon i, .feature-box .fbox-icon img {
    background-color: #2d2d2d !important;
}

.pricing-features li {
    font-size: 16px !important;
    height: 37.33px;
    color: #FFFFFF !important;
    border-top: 1px solid #363636;
    padding: 10px !important;
}

.dark .table {
    color: #FFFFFF;
    background-color: #282828;
}

.table-hover tbody tr:hover {
    color: #FFFFFF;
    background-color: #000000;
}

.table-hover tbody tr:active {
    color: #FFFFFF;
    background-color: #000000;
}


.pricing-title h3 {
    font-size: 42px;
}

.device-xs .pricing-title h3 {
    font-size: 22px;
}

.device-xs .pricing-price {
    font-size: 28px;
}

.pricing-price {
    font-size: 48px;
    color: #FFFFFF !important;
}

.device-xs .pricing-price span.price-tenure {
    font-size: 18px;
}

.pricing-price span.price-tenure {
    color: #e7e7e7;
}

.pricing-title {
    padding: 15px 0;
    background-color: #282828;
    border-radius: 3px 3px 0 0;
    text-shadow: 1px 1px 1px #FFF;
    border-bottom: none;
}

.pricing-features-name-column {
    width: 30%;
    padding-left: 20px;
    border-right: 1px solid #282828;
}

.pricing-features-value-column {
    width: 35%;
    border-left: 1px solid #282828;
}

.table th, .table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #282828;
    border-bottom-width: 0px;
}

.sidenav > .ui-tabs-active > a, .sidenav > .ui-tabs-active > a:hover {
    color: #333 !important;
    text-shadow: 0px 0px 0px rgba(0,0,0,0.0) !important;
    font-family: 'Segoe UI', sans-serif !important;
    border-color: none !important;
    font-size: 14px !important;
    font-weight: 500;
}

/*[tabindex="-1"]:focus {
    outline: -webkit-focus-ring-color solid 2px !important;
}*/

.dark .sidenav > li > a {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500;
}

.dark .sidenav {
    margin-top: 15px;
}

h3 {
    margin: 0 0 15px 0;
}

h4 {
    margin: 0 0 5px 0;
}

.dark .copyright-links a {
    color: #ffffff;
    border-bottom-color: rgba(255,255,255,0.25);
}

#copyrights .col_half {
    margin-bottom: 0 !important;
    color: #ffffff;
}

.acctitle i {
    margin-left: 20px;
}

.dark #footer .social-icon.si-borderless,
#footer.dark .social-icon.si-borderless {
    color: #DDD !important;
}

.button.button-small {
    padding: 0 17px;
    font-size: 12px;
    height: auto;
    line-height: 34px;
}

.device-md .opm-medium-word {
    font-size: 60px;
}

.opm-medium-word {
    font-size: 72px;
}

.device-xs .opm-medium-word {
    font-size: 22px;
    letter-spacing: 0.5px;
}

.device-xs .button-large {
    padding: 0 14px;
    font-size: 8px;
    height: auto;
}

@media (max-width: 767.98px) {
    .emphasis-title h1, .emphasis-title h2 {
        font-size: 20px !important;
    }

    .button.button-small {
        padding: 0 14px;
        font-size: 8px;
        height: auto;
        line-height: 34px;
    }

    .table th, .table td {
        font-size: 8px;
    }

    #copyrights .col_half:last-child {
        display: block;
        position: relative;
    }
}

outline: webkit focus ring color auto 1px;
}

.loader,
.loader:before,
.loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
}

.dark .button.button-border:not(.button-light) {
    border-color: rgba(255,255,255,0.4);
    color: white;
    display: inline-block;
}

.dark .button a:hover {
    color: #333;
}

.dark .table a:hover {
    color: #FFFFFF;
}

.dark .pricing-features-value-column a:hover {
    color: #FFFFFF;
}

.style-msg, .style-msg2 {
    margin-top: 20px;
}

.side-tabs ul.tab-nav {
    width: max-content;
    margin-right: 30px;
}

.dark .section, .section.dark {
    background-color: #222222;
    border-color: rgba(255,255,255,0.1);
}

.input-group .button {
    margin: 0;
        
}
#page-title {
    padding: 30px 0;
}

.msgtitle {
    color: #FFF;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    text-transform: uppercase;
}

.form-control {
    font-size: 0.9rem;
}


/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

#page-menu nav {
    position: relative;
    float: left;
}


#page-menu, #page-menu-wrap {
    background-color: #282828;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #495057;
    background: none;
    border-color: #dee2e6 #dee2e6 #fff;
}

.nav-tabs {
    border-bottom: 0px;
}
.col_one_fourth {
    width: 23%;
}

.dark .form-control:not(.not-dark), .dark .sm-form-control:not(.not-dark) {
    color: #FFF;
    background-color: rgba(0,0,0,0.2);
    border-color: rgba(0,0,0,0.25);
}



.col_three_fourth {
    width: 72%;
}

.dark code {
    color: #FF7f82;
    background-color: rgba(0,0,0,0.0) !important;
}

.dark pre {
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
}

.more-link:hover {
    border-bottom-color: #FFFFFF;
    color: #FFFFFF !important;
}

.entry:after {
    height: 1px !important;
}

.entry-content p img {
    max-width: 60%;
    max-height: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.entry-content h2 {
    margin-top: 40px;
    margin-bottom: 5px;
    font-size: 24px;
}

.entry-content h3 {
    margin-top: 25px;
    margin-bottom: 5px;
    font-size: 20px;
}

.entry-content p {
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.entry-content ul {
    margin-left: 1em !important;
}

.entry-content ol {
    margin-left: 1em !important;
}

babylon {
    max-width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

model-viewer {
    width: initial;
    height: 600px;
}

nav-bar button {
    padding: 10px !important;
}

.entry-content a {
    text-decoration: underline !important;
    font-weight: 600;
}

    .entry-content a:hover {
        color: #FFFFFF;
    }

.triangle-button {
    cursor: default !important;
}

.triangle-button:hover {
    background: transparent !important;
}

.input-group-text:hover {
    color: #ffffff !important;
}

.small-thumbs .entry-image, .ievent .entry-image {
    margin: 0 30px 30px 0 !important;
}

.popover-body {
    padding: 0.5rem 0.75rem;
    color: #ffffff;
    background-color: #000000;
}

.center .heading-block > span {
    max-width: 900px !important;
    margin-left: auto;
    margin-right: auto;
}

.dark .tagcloud a {
    color: #FFFFFF;
    border-color: transparent;
    background-color: rgba(0,0,0,0.2);
}

.dark .entry-meta li a {
    color: #FFF;
}

.dark .entry-meta li {
    border-left-color: rgba(255,255,255,0.08);
    color: #FFF;
}