@import url('https://kit-pro.fontawesome.com/releases/v5.15.3/css/pro.min.css');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.space {
    height: 65px;
}
.bg-btn-orange {
    background: #f78c18;
    color: #fff;
}
.bg-btn-orange:hover {
    color: #fff !important;
}
.fw-bold {
    font-weight: bold;
}
.fs-18 {
    font-size: 18px;
}
.m-0 {
    margin: 0px;
}
.d-none {
    display: none;
}
.text-black {
    color: #000;
}
.text-darkblue {
    color: #0d1732;
}
.pt-13 {
    padding-top: 13px;
}
.pt-35 {
    padding-top: 35px;
}
.pr-15 {
    padding-right: 15px;
}
.f-mb-20 {
    margin-bottom: 20px;
}
.m-auto {
    margin: auto;
}
/* BackGround Color */
.red {
    /* background: linear-gradient(70deg, #ff4d6f 50%, #fe7893 60%) !important; */
    background: #ff4d6f !important;
}
.green {
    /* background: linear-gradient(70deg, #38d288 52%, #54f196 60%) !important; */
    background: #54f196 !important;
}
.yellow {
    /* background: linear-gradient(70deg, #f1a752 50%, #fdd87d 66%) !important; */
    background: #f1a752 !important;
}
.orange {
    /* background: linear-gradient(70deg, #ff7c5a 58%, #feba79 63%) !important ; */
    background: #ff7c5a !important;
}
.blue {
    background: #3ea7ee !important;
}
.bg-gre {
    background: #47d485 !important;
    color: #fff;
}
.bg-aqua {
    background: #4cb5e2 !important;
}
.bg-yellow {
    background: #e1b868 !important;
}
/* Light BackGround  */
.light-bg-red {
    background: #fde3e2;
}
.light-bg-green {
    background: #e8f6e9;
}
.light-bg-perpal {
    background: #e7e6f8;
}
.light-bg-orange {
    background: #fdf0e0;
}
.light-bg-blue {
    background: #e2f3fb;
}
.light-bg-gray {
    background: #ededf5;
}
.light-bg-perat {
    background: #eef8dd;
}
.light-bg-cgreen {
    background: #e2fcef;
}
/* Text-Color */
.text-dark-red {
    color: #e1183c !important;
}
.text-red {
    color: #e55344 !important ;
}
.text-blue {
    color: #156dd9 !important;
}
.text-green {
    color: #61c068;
}
.text-perpal {
    color: #5756cf;
}
.text-orange {
    color: #ee9c40;
}
.text-gray {
    color: #47464a !important;
}
.text-white {
    color: #fff;
}

.text-perat {
    color: #559500;
}
.text-cgreen {
    color: #079553;
}

.d-flex {
    display: flex;
}
.d-block {
    display: block !important;
}
.navbar,
header,
.sidebar {
    background-color: #2f1b74 !important;
}
.logo {
    background: #263c8f !important;
    border: 20 0px 0px 20px !important;
}
.bg-body {
    background: #f0f2ff !important;
}

.total-filter {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.total-filter div {
    background: #ffffff;
    padding: 3px 2px;

    border-radius: 50px;
}

.btn-info {
    border-radius: 20px !important;
    margin: 2px;
    margin-left: 3px !important;
    background: #fff;
    border: none;
    font-weight: 600;
}

.btn-info {
    color: #000;
    background-color: #fff;
    border-color: #fff;
    border-radius: 20px;
}
.btn-info.focus,
.btn-info:focus {
    outline: none;
    color: #fff;
    background-color: #f78c18;
    border-color: #f78c18;
}
.btn-info:hover {
    color: #fff;
    background-color: #f78c18;
    border-color: #f78c18;
}
.btn-info.active,
.btn-info:active,
.open > .dropdown-toggle.btn-info {
    color: #fff;
    background-color: #f78c18;
    border-color: #f78c18;
    font-weight: 400;
}
.btn-info.active.focus,
.btn-info.active:focus,
.btn-info.active:hover,
.btn-info:active.focus,
.btn-info:active:focus,
.btn-info:active:hover,
.open > .dropdown-toggle.btn-info.focus,
.open > .dropdown-toggle.btn-info:focus,
.open > .dropdown-toggle.btn-info:hover {
    outline: none;

    color: #fff;
    background-color: #f78c18;
    border-color: #f78c18;
}

/*  ENd  */
.col-5 {
    width: 40%;
    padding-left: 40px;
}
.col-7 {
    width: 60%;
}
.px-12 {
    padding-left: 12px;
    padding-right: 12px;
}
.pr-6 {
    padding-right: 6px !important;
}
.pb-10 {
    padding-bottom: 10px;
}
.info-box {
    display: block;
    min-height: 90px;
    background: linear-gradient(70deg, #3ea7ee 33%, #5ad0fe 63%);
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    margin-bottom: 18px;
    display: flex;
    padding: 22px 10px !important;
}
.pt-10 {
    padding-top: 10px;
}
.py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}
.info-box small {
    font-size: 14px;
}
.info-box .progress {
    background: rgba(0, 0, 0, 0.2);
    margin: 5px -10px 5px -10px;
    height: 2px;
}
.info-box .progress,
.info-box .progress .progress-bar {
    border-radius: 0;
}
.info-box .progress .progress-bar {
    background: #fff;
}
.info-box-icon {
    border-top-left-radius: 2px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 2px;
    display: block;
    float: left;
    height: 100px;
    width: 35%;
    text-align: center;
    font-size: 45px;
    line-height: 90px;
    background: rgba(0, 0, 0, 0.2);
}
.info-box-icon > img {
    max-width: 100%;
}
.info-box-content {
    padding: 5px 10px;
    margin-right: 20px;
    color: #fff;
    text-align: left !important;
    width: 65%;
    margin-left: 0px !important;
}
.info-box-number {
    display: block;
    font-weight: 700;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.info-box-text,
.progress-description {
    display: block;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 300;
    color: #fff;
}
.info-box-text {
    text-transform: uppercase;
}
.info-box-more {
    display: block;
}

.chart {
    width: 60%;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
    background: #f78c18 !important;
}
.body-right-side {
    background-color: #fff;
    border-radius: 20px;
    margin-left: auto;
}
.Reminder-box {
    width: 100%;
    flex-wrap: nowrap;
    padding-left: 15px !important;
    padding-top: 0px;
    padding-bottom: 15px;
    padding-right: 10px;
    margin-left: 0px;
    margin-right: 0px;
}
.border-gray {
    border-top: 2px solid #f0f0f0;
}
.Reminder-box .icon {
    font-size: 25px;

    text-align: left;
}
.Reminder-box .icon i {
    height: 60px;
    width: 60px;
    padding-top: 15px;
    border-radius: 50%;
    text-align: center;
}
.Reminder-box .col-lg-2 {
    margin-top: 25px;
}
.Reminder-box .Heading {
    margin-left: auto;
    margin-top: 32px;
}
.Reminder-box .Heading p {
    font-size: 16px;
}
.Reminder-box .Heading h4 {
    font-weight: bold;
    margin: 0;
    letter-spacing: 0.5px;
}
.Reminder-box .col-lg-3 {
    font-size: 20px;
    text-align: right;
    margin-top: 20px;
    color: #277ae1;
    font-weight: 500;
}
.Reminder-box .col-lg-3 span {
    display: block;
}
.absent {
    color: #ed902b;
}

/* Tasks Section */
.task-activity {
    padding-top: 12px;
}

.my-task {
    background: #fff;
    border-radius: 20px;
    padding-right: 13px;
    padding-left: 12px;
}
.task-icon {
    padding: 20px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.task-icon i,
.task-icon h2 {
    display: inline;
}
.task-icon h2 {
    font-size: 20px;
    margin-left: 10px;
}
.task-icon i {
    font-size: 30px;
    color: #3fd5c7;
}
.task-box {
    padding-top: 15px;
    padding-bottom: 5px;
}
.project {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 7px;
    display: flex;
    flex-wrap: nowrap;
}

.project-date p {
    font-size: 18px;
    background-color: #ededf5;
    width: auto;
    display: inline;
    padding: 1px 20px;
    margin-left: 20px;
    border-radius: 5px;
    text-align: center;
    font-weight: 500;
    color: #47464a;
}
.project .cercial {
    font-size: 16px;
    display: inline !important;
    width: 5%;
}
.project .project-name {
    display: inline;
    width: 75%;
    font-size: 15px;
    font-weight: 400;
    color: #364363;
}
.project .status {
    display: inline;
    height: max-content;
    padding: 3px 8px;
    font-size: 15px;
    text-align: center;
    border-radius: 5px;
    font-weight: 500;
    margin-top: 5px;
    margin-left: 5px;
}
.priority {
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
}

.priority .status {
    text-align: center;
    display: inline;
    padding: 3px 8px;
    border-radius: 5px;
    font-weight: 500;
    margin-left: 5px;
}
.project .time {
    color: #9aa1b4 !important;
    display: inline;
    width: max-content;
    position: absolute;
    right: 30px;
}
.myactivity {
    padding-bottom: 10px;
}
.myactivity .task-box {
    padding-bottom: 0px !important;
}
/* SideBar */
.sidebar-menu li a {
    color: #fff !important;
}
.myactivity .priority {
    padding-top: 0px !important;
}
.myactivity .project-name {
    width: 100%;
}
.myactivity .time {
    color: #9aa1b4 !important;
    display: inline;
    width: max-content;
    position: absolute;
    right: 30px;
}
.myactivity .priority p {
    margin-left: 22px;
}
.myactivity .task-icon span.search i {
    font-size: 16px !important;
}

/* TodoList And Sales Pyment Due */

.todolist .todos {
    width: 90%;
}
.todolist {
    padding-bottom: 10px;
}
.todolist .cercal {
    width: 5%;
    padding-left: 20px;
    text-align: center;
    display: flex;
    margin-top: 10px;
}
.side-border {
    padding-left: 5px;
}
.side-border div {
    width: 6px;
    background: #e2f3fb;
    height: 75px;
    border-left: 5px solid #e2f3fb;
    position: absolute;
}
.cercial {
    position: relative !important;
}
.cercal .cercial i {
    z-index: 1;
    font-size: 18px;
    position: absolute;
}
.info-pyment i {
    font-size: 18px !important;
}
.info-pyment {
    text-align: right;
    padding-top: 10px;
}
.export-file p {
    padding: 5px 10px;
    margin-left: 8px;
    border-radius: 5px;
}

.export-file p span {
    font-weight: 500;
    color: #000;
    margin-left: 8px;
}
.filter p {
    text-align: right;
    padding-right: 20px;
}
.filter .filter-icon p {
    padding: 4px 10px;
    border-radius: 5px;
    width: auto;
    display: inline;
}
.filter .filter-icon p span {
    margin-left: 5px;
    font-weight: 500;
    color: #000;
}
.filter .filter-icon {
    text-align: right;
    padding-right: 15px;
}
.product-file {
    justify-content: space-around;
}
.product-location {
    justify-content: space-between;
    background: #f4f5fa;
    padding: 8px 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.product-location span {
    color: #2f1b74;
    font-weight: 500;
    font-size: 15px;
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
}
.product-data {
    height: 300px;
    display: flex;
}
.product-data p {
    margin: auto;
    display: inline;
    font-size: 16px;
    font-weight: 500;
}
.show-entries {
    color: #697086;
    font-weight: 500;
}
.next-pre {
    text-align: right;
}
.next-pre span {
    width: 80px !important;
    display: inline-block;
    padding: 6px 9px;
    margin-right: 10px;
    border-radius: 5px;
    text-align: center;
    background: #f4f5fa;
    font-weight: 500;
}
.sale-order-box {
    width: 97% !important;
    margin-left: 1.5% !important;
}
.sale-order-box .entries {
    margin-bottom: 10px;
}
.sale-order-box .entries p {
    margin-left: 10px;
    margin-right: 10px;
    font-size: 16px;
    font-weight: 500;
}
.sale-order-box .entries select {
    padding: 3px 0px;
    padding-right: 10px;
    height: 30px;
    border-radius: 3px;
    font-weight: 500;
    font-size: 16px;
}
.sale-order-box .entries select option {
    font-weight: 500;
}
.sale-order-box .product-file {
    padding: 15px;
    padding-right: 25px;
    padding-top: 8px;
}
.sale-order-box .product-filter {
    padding-top: 10px;
}
.sale-order-box .product-filter i {
    padding-top: 10px;
    color: #c3c6d5;
}
/* .sidebar-menu .active a {
    background-color: #f78c18 !important;
} */
.nav-tabs > i > a:hover {
    border-color: none;
}
.skin-blue-light .sidebar-menu > li.active {
    border-left: none;
}
/*.nav-tabs > li.active > a,*/
/*.nav-tabs > li.active > a:focus,*/
/*.nav-tabs > li.active > a:hover {*/
/*    color: #555;*/
/*    cursor: default;*/
/*    background-color: #f78c18 !important;*/
/*    border: 1px solid #ddd;*/
/*    border-bottom-color: transparent;*/
/*}*/
.tw-pb-1.tw-rounded-md.tw-bg-gray-200.tw-text-primary-700 {
    background: transparent;
}
.sidebar-menu > li > .treeview-menu {
    margin: 0 1px;
    background: #493685 !important;
}

.skin-black-light .sidebar-menu > li.active > a,
.skin-black-light .sidebar-menu > li.menu-open > a,
.skin-black-light .sidebar-menu > li:hover > a,
.skin-blue-light .sidebar-menu > li.active > a,
.skin-blue-light .sidebar-menu > li.menu-open > a,
.skin-blue-light .sidebar-menu > li:hover > a,
.skin-green-light .sidebar-menu > li.active > a,
.skin-green-light .sidebar-menu > li.menu-open > a,
.skin-green-light .sidebar-menu > li:hover > a,
.skin-purple-light .sidebar-menu > li.active > a,
.skin-purple-light .sidebar-menu > li.menu-open > a,
.skin-purple-light .sidebar-menu > li:hover > a,
.skin-red-light .sidebar-menu > li.active > a,
.skin-red-light .sidebar-menu > li.menu-open > a,
.skin-red-light .sidebar-menu > li:hover > a,
.skin-yellow-light .sidebar-menu > li.active > a,
.skin-yellow-light .sidebar-menu > li.menu-open > a,
.skin-yellow-light .sidebar-menu > li:hover > a {
    background-color: #f78c18 !important;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: none;
    padding-right: 0px;
}
.sidebar {
    padding-right: 10px;
}

.skin-black-light .sidebar-menu > li > .treeview-menu,
.skin-blue-light .sidebar-menu > li > .treeview-menu,
.skin-green-light .sidebar-menu > li > .treeview-menu,
.skin-purple-light .sidebar-menu > li > .treeview-menu,
.skin-red-light .sidebar-menu > li > .treeview-menu,
.skin-yellow-light .sidebar-menu > li > .treeview-menu {
    background-color: #2f1b74 !important;
    width: 100%;
}
.skin-black-light .sidebar-menu > li > .treeview-menu,
.skin-blue-light .sidebar-menu > li > .treeview-menu,
.skin-green-light .sidebar-menu > li > .treeview-menu,
.skin-purple-light .sidebar-menu > li > .treeview-menu,
.skin-red-light .sidebar-menu > li > .treeview-menu,
.skin-yellow-light .sidebar-menu > li > .treeview-menu :hover {
    background: #382288bc !important;
}

.skin-blue-light .content-wrapper .content-header-custom {
    background: none;
}
.first-section .row-custom .col-md-6 {
    padding-right: 7px !important;
}
aside.main-sidebar {
    background: #2f1b74 !important;
}
.daterangepicker .ranges li.active {
    background: #f78c18;
}
nav .navbar-custom-menu .m-8.pull-left.mt-15.hidden-xs {
    position: absolute;
    left: 5%;
    line-height: 1.5;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
    width: 120px !important;
    border-radius: 50%;
}
@media (max-width: 1199px) {
    .pr-8 {
        padding-right: 8px;
    }
    .mb-10 {
        margin-bottom: 10px;
    }
    .mb-20 {
        margin-bottom: 20px;
    }
    div.hidden-xs {
        visibility: hidden !important;
    }
}

@media (max-width: 500px) {
    .navbar-custom-menu .dropdown.user.user-menu span {
        display: -webkit-box;
        max-width: 60px;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.625;
    }
    .navbar-custom-menu .m8 {
        margin: 7px !important;
    }
    .navbar-nav > .user-menu .user-image {
        float: left;
        margin-right: 10px;
    }
    .dropdown.user.user-menu {
        width: 100px;
    }
}
@media (max-width: 320px) {
    .body-right-side .col-7 {
        padding-right: 0px;
    }
    .body-right-side .col-3 {
        padding-left: 0px;
        padding-right: 5px;
    }
    .body-right-side .col-2 {
        padding: 0;
    }
    .first-section div.col-lg-6.col-md-12.pt-13.pr-8.mb-10 {
        padding: 0px;
    }
    .project .project-name {
        display: inline;
        height: max-content;
        width: 58%;
        font-size: 15px;
        font-weight: 400;
        color: #364363;
        padding-left: 5px;
    }
    .secound-section .col-lg-6.col-md-12.pr-6.mb-20,
    .secound-section .col-lg-6.col-md-12.pr-8 {
        padding: 0px !important;
    }
    .task-activity .export-file {
        text-align: center;
    }
    .task-activity .col-lg-6.col-md-12.pr-6.mb-20,
    .task-activity .col-lg-6.col-md-12.pr-8 {
        padding: 0px !important;
    }
    .mytask-status {
        width: max-content;
        justify-content: end;
        flex-wrap: wrap;
    }
    .side-border div {
        width: 6px;
        background: #e2f3fb;
        height: 88px;
        border-left: 5px solid #e2f3fb;
        position: absolute;
    }
}
@media (min-width: 320px) {
    .body-right-side .col-7 {
        padding-right: 0px;
    }
    .body-right-side .col-3 {
        padding-left: 0px;
        padding-right: 5px;
    }
    .body-right-side .col-2 {
        padding: 0;
    }
    .first-section div.col-lg-6.col-md-12.pt-13.pr-8.mb-10 {
        padding: 0px;
    }
    .project .project-name {
        display: inline;
        height: max-content;
        width: 58%;
        font-size: 15px;
        font-weight: 400;
        color: #364363;
        padding-left: 5px;
    }
    .secound-section .col-lg-6.col-md-12.pr-6.mb-20,
    .secound-section .col-lg-6.col-md-12.pr-8 {
        padding: 0px;
    }
    .task-activity .export-file {
        text-align: center;
    }
    .task-activity .col-lg-6.col-md-12.pr-6.mb-20,
    .task-activity .col-lg-6.col-md-12.pr-8 {
        padding: 0px;
    }
    .mytask-status {
        width: max-content;
        justify-content: end;
        flex-wrap: wrap;
    }
    .project .status {
        margin-top: 5px;
    }
}

@media (min-width: 425px) {
    .body-right-side .col-7 {
        padding-right: 0px;
    }
    .body-right-side .col-3 {
        padding-left: 0px;
        padding-right: 5px;
    }
    .body-right-side .col-2 {
        padding: 0;
    }
    .first-section div.col-lg-6.col-md-12.pt-13.pr-8.mb-10 {
        padding-top: 13px;
        padding-right: 15px;
        padding-left: 15px;
    }
    .project .project-name {
        display: inline;
        height: max-content;
        width: max-content;
        font-size: 15px;
        font-weight: 400;
        color: #364363;
        padding-left: 5px;
    }
    .secound-section .col-lg-6.col-md-12.pr-6.mb-20,
    .secound-section .col-lg-6.col-md-12.pr-8 {
        padding-right: 15px;
        padding-left: 15px;
    }
    .task-activity .export-file {
        text-align: center;
    }
    .task-activity .col-lg-6.col-md-12.pr-6.mb-20,
    .task-activity .col-lg-6.col-md-12.pr-8 {
        padding-right: 15px;
        padding-left: 15px;
    }
    .Reminder-box {
        width: 100%;
        flex-wrap: nowrap;
        padding-left: 25px !important;
        padding-top: 0px;
        padding-bottom: 15px;
        padding-right: 25px;
        margin-left: 0px;
        margin-right: 0px;
    }
    .mytask-status {
        width: max-content;
        justify-content: space-between;
        right: 20px;
        position: absolute;
        flex-wrap: wrap;
    }
}
/* Fornt Page */

.f_read_button {
    background: #0d1732;
    color: #fff;
    padding: 10px;
    border-color: #0d1732;
    border-radius: 3px;
}

.f_read_button a {
    color: #fff;
}
body {
    font-family: 'Montserrat', sans-serif;
}
.f-logo img {
    height: 30px;
    padding-left: 30px;
}
.f-navbar {
    background-color: transparent !important;
    border: none;
    padding-bottom: 10px;
}
.f-navbar {
    background-image: url('../img/forntPage/main_menu_header.svg') !important;
}
.f-banner {
    width: 100%;
    background-image: url('../img/forntPage/BGbanner.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.f-owerly {
    width: 100%;

    padding-top: 70px;
}
.f-login-singup {
    padding-top: 25px;
}
.f-login-singup ul .f-singup {
    background-image: url('../img/forntPage/Asset19.svg');
    background-repeat: no-repeat;
    background-size: cover;
}
.f-login-singup ul li {
    padding: 0px 10px;
    border-radius: 4px;
}

.f-login-singup ul li a {
    padding-top: 5px;
    padding-bottom: 5px;
    color: black;
    font-size: 16px;
}
.f-login-singup ul .f-login {
    background-color: #f1f1f2 !important;
    margin-right: 10px;
}
.f-banner h1 {
    color: #f3c028;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: 'Montserrat', sans-serif;
}
.f-banner h3 {
    color: #fff;
    letter-spacing: 0.5px;
    font-family: 'Montserrat', sans-serif;
}
.f-owerly .container-fluid {
    padding-left: 60px;
    padding-right: 35px;
}

.f-owerly button {
    padding: 5px 12px;
    border: none;
    border-radius: 4px;
    margin-top: 80px;
    background-image: url('../img/forntPage/Asset19.svg');
}
.f-owerly button a {
    color: #000;
}
.f-singup a:hover {
    background: none !important;
}
.f-pc {
    background-image: url('../img/forntPage/Asset15.svg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 410px;
    width: 500px;
    padding-left: 20px;
    padding-top: 20px;
}
.f-pc img {
    width: 93%;
    height: 245px;
}
.f-owerly .col-lg-7 .d-flex {
    margin-top: 120px;
}
.f-tablet {
    background-image: url('../img/forntPage/tabletScreen.svg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 210px;
    margin-top: 160px;
    margin-left: -120px;
}
.f-tablet img {
    height: 226px;
    padding-left: 13px;
    padding-top: 16px;
    width: 87%;
}
.f-mobile {
    background-image: url('../img/forntPage/Asset14.svg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 100px;
    height: 150px;
    margin-top: 245px;
    margin-left: -65px;
}
.f-mobile img {
    width: 73%;
    padding-left: 11px;
    padding-top: 11px;
    border-radius: 11px;
    border-top-left-radius: 20px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
}
.f-about-section {
    margin-top: -5px;
    padding-top: 70px;
    padding-bottom: 170px;
    background-image: url(../img/forntPage/GrayBG.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
}
.f-about-section h3 {
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}
.f-about-section p.desc {
    width: 73%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    letter-spacing: 1px;
    color: #f58b1f;
    font-size: 18px;
}
.f-about-section .about-title {
    text-align: left;
}
.f-navbar {
    position: fixed;
    top: 0;
    width: 100%;
}
.f-about-section .f-box {
    background-image: url(../img/forntPage/orange.svg);
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    padding: 5px 30px;
    text-align: center;
    background-size: cover;
    font-size: 23px;
    font-weight: bold;
    color: #fff;
    background-position: center;
    border-radius: 4px;
}
.f-boxs .col-lg-3 {
    padding: 0px 30px;
}
.f-boxs {
    padding-top: 30px;
}
.f-key-box {
    background-image: url(../img/forntPage/Rounded-Square.svg);
    background-repeat: no-repeat;
    background-position: center;
    padding: 27px;
    text-align: center;
}
.f-key-box img {
    height: 135px;
}
.f-key-boxs {
    margin-bottom: 60px;
}
.f-key-box p {
    font-weight: bold;
    color: black;
    padding-top: 10px;
}
.f-keyFeatures h3 {
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}
.Industeries {
    background-image: url(../img/frontPage/IndustryBG.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
.overflow-indus {
    background-image: url(../img/frontPage/banner1-svg.svg);
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 25px;
    padding-bottom: 50px;
}
.Industeries h3 {
    color: #fff;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}
.indus-box {
    background-image: url(../img/forntPage/Asset19.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
    font-size: 23px;
    color: #fff;
    font-weight: bolder;
    border-radius: 20px;
    padding: 16px;
}
.indus-boxs .col-lg-4 {
    padding: 12px 25px;
}
.about-Security {
    padding-top: 70px;
    padding-bottom: 250px;
    background-image: url(../img/forntPage/GrayBG.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
}
.about-Security h3 {
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}
.about-Security .desc {
    width: 55%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #f58b1f;
    font-size: 18px;
    line-height: 1;
}
.about-Security .p {
    font-weight: 365;
    letter-spacing: 1px;
}
.about-Security .pl h3 {
    margin: 0;
    color: #000;
}
.about-Security .pl {
    padding-left: 35px;
    padding-top: 15px;
    padding-bottom: 5px;
}
.suc-box {
    background-image: url(../img/forntPage/orange.svg);
    background-repeat: no-repeat;
    padding: 5px 30px;
    text-align: center;
    background-size: cover;
    font-size: 23px;
    font-weight: bold;
    color: #fff;
    background-position: center;
    border-radius: 4px;
}
.secu-boxs {
    padding-top: 30px;
}
.aundroid {
    position: relative;
    bottom: 170px;
}
.aundroid .col-lg-7 {
    padding-top: 100px;
}
.aundroid .col-lg-7 h3 {
    margin-top: 0px;
    margin-top: 0;
    font-size: 61px;
    font-weight: bold;
}
.aundroid p.text-black.fs-18 {
    letter-spacing: 2px;
}
.aundroid .f-mobiles .mobile {
    background-image: url(../img/forntPage/Asset14.svg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 284px;
    height: 342px;
    padding-left: 24px;
    padding-top: 26px;
}
.f-mobiles {
    display: flex;
    padding-top: 50px;
}
.aundroid .f-mobiles .mobile img {
    width: 73%;
    height: 98%;
    border-radius: 16px;
}
.f-second-mobile {
    margin-top: 100px;
}
.pricing {
    padding-bottom: 50px;
}
.pricing .title {
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    color: #000;
}
.text-center {
    text-align: center;
}
.discount-tabs {
    text-align: center;
    padding-top: 30px;
}
.discount-tabs h3 {
    display: inline;
}
.discount-tabs img {
    display: block;
    height: 20px;
    margin: auto;
}
.f-counter .row {
    border-bottom: 2.5px solid #f1f1f2;
    padding: 9px 0px;
}
.f-counter {
    padding-right: 50px;
}
.f-counter h4 {
    font-weight: bold;
    font-size: 20px;
}
.text-see-green {
    color: #39b45a;
}

.total-invoice {
    color: #fff;
    font-size: 18px;
    padding: 10px;
}
.bg-dark-blue {
    background: #0d1732;
    border-radius: 25px;
}
.total-invoice p {
    margin: 0px;
}
.total-invoice hr {
    margin: 8px;
}
.f-module-box .module-price {
    margin-left: auto;
}
.f-module-box .module-name {
    margin-left: 10px;
}
.f-module-box {
    background: #f2f2f2;
    padding: 10px 8px 0px 11px;
    font-size: 17px;
    border-radius: 8px;
    border: 1px solid gray;
    color: #666667;
}
.f-module-boxs .col-lg-6 {
    padding: 10px 15px;
}
.row.f-module-boxs {
    border-bottom: 0px;
}
.blue-module {
    background: rgb(63, 109, 180);
    background: linear-gradient(90deg, rgba(63, 109, 180, 1) 35%, rgba(59, 184, 234, 1) 75%);
    color: #ffff;
    border-color: #fff;
}
.add-module {
    height: 358px;
}
.add-module .modules {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
}
.add-module .modules::-webkit-scrollbar {
    display: none;
}
.modules .row {
    width: 100%;
}
.buy-now {
    display: flex;
    border-top: 1px solid;
    padding-bottom: 20px;
    padding-top: 10px;
}
.buy-now button {
    margin: auto;
    background: transparent;
    border: none;
    font-size: 20px;
    font-weight: bold;
}
.total-box {
    padding: 20px 15px;
}
.total-box :last-child {
    margin-left: auto;
}
.AVAILABILITy .left-side img {
    width: 100%;
}
.AVAILABILITy .left-side {
    padding: 0px;
}
.AVAILABILITy .right-side {
    background: #f3c028;
    text-align: center;
}

.AVAILABILITy .right-side img {
    width: 150px;
    padding-bottom: 30px;
}
.AVAILABILITy .right-side h3 {
    font-weight: bold;
    color: black;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;
    padding-bottom: 20px;
}

.AVAILABILITy .right-side p {
    color: black;
    font-size: 20px;
    padding: 0px 14% 14%;
}
.FAQ {
    padding: 50px;
}
.FAQ h3 {
    text-align: center;
    color: #000;
    padding-bottom: 12px;
    font-size: 40px;
    font-weight: 600;
}
.f-yello-box {
    text-align: center;
    padding-top: 100px;
}

.f-accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.f-active,
.f-accordion:hover {
    background-color: #ccc;
}

.f-panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
}
.f-panel p {
    padding: 10px;
}
.unlimited-img {
    height: 20px;
}
#unlimited-users {
    position: absolute;
    height: 10px;
    left: 7%;
}

.module-box-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#f-modules .col-lg-6 .row {
    padding: 5px;
}
#f-modules .col-lg-6 {
    display: none;
    padding: 10px 15px;
}
.form {
    background-color: #0d1732;
    padding: 50px;
}
.form input {
    width: 100%;
    height: 55px;
    border-radius: 10px;
    border: none;
    padding: 5px 35px;
}
.form .col-lg-6,
.form .col-lg-9,
.form .col-lg-3 {
    padding: 20px;
}
.skin-blue .content-wrapper .content-custom,
.skin-blue-light .content-wrapper .content-custom {
    margin-top: 0px !important;
}
.form {
    text-align: center;
    font-weight: bold;
    font-family: 'Montserrat';
    color: #fff;
}
.f-orange {
    color: #f58b1f;
}
.form h3 {
    text-align: center;
    font-weight: bold;
    font-family: 'Montserrat';
    color: #fff;
    padding-bottom: 20px;
    font-size: 35px;
}
.form [type='submit'] {
    background-image: url(../img/forntPage/Asset19.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.form button {
    font-size: 18px;
    padding: 8px 50px;
    border-radius: 6px;
    font-weight: bold;
    background: rgb(245, 139, 31);
    background: linear-gradient(90deg, rgba(245, 139, 31, 1) 35%, rgba(243, 192, 40, 1) 75%);
    margin: auto;
    display: block;
    border: none;
}
.footer {
    background: #333333;
    color: #fff !important;
    font-size: 18px;
    padding: 50px;
}
.footer .row .col-lg-4 h3,
.footer a {
    color: #fff;
}
.footer .first p {
    padding: 10px;
}
.footer .row {
    padding-top: 15px;
}
.footer .bottom :first-child {
    text-align: right;
}
.footer .bottom span {
    padding: 0px 10px;
}
.footer .second {
    padding-left: 15%;
}
.footer .third {
    padding-left: 18%;
}
.nav.navbar-nav.navbar-right {
    display: flex;
    justify-content: end;
    padding-right: 10px;
}
.navbar-collapse.collapse.in {
    background-color: #2f1b74;
}
.navbar-nav > li > a {
    float: left;
}
.f-main {
    height: 100vh;
}
.f-navbar #navbar {
    margin-left: auto;
    margin-top: auto;
}
.Select {
    margin-left: 50px;
}
section.form input {
    color: black;
}
.f-navbar.navbar-default .navbar-nav > li > a {
    color: #fff;
}
.Select li {
    list-style: none;
}
.Select {
    display: flex;
    margin-top: auto;
}
.Select img {
    height: 20px;
    width: 30px;
    margin-right: 5px;
}
.totalmobile {
    font-size: 20px;
    color: #fff;
}
.totalmobile button {
    color: #fff;
}
.navbar-toggle.collapsed {
    background: none;
}

@media (max-width: 320px) {
    .footer {
        padding: 0;
    }
    .f-owerly .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
    .f-pc {
        background-image: url(../img/forntPage/Asset15.svg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 410px;
        width: 400px;
        padding-left: 11px;
        padding-top: 11px;
    }
    .f-pc img {
        width: 96%;
        height: 107px;
    }
    .f-mobile img {
        width: 73%;
        padding-left: 6px;
        padding-top: 6px;
        border-radius: 8px;
        border-top-left-radius: 9px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 7px;
    }
    .f-mobile {
        background-image: url(../img/forntPage/Asset14.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100px;
        height: 150px;
        margin-top: 95px;
        margin-left: -59px;
    }
    .f-tablet img {
        height: 148px;
        padding-left: 10px;
        padding-top: 11px;
        width: 87%;
    }
    .f-tablet {
        background-image: url(../img/forntPage/tabletScreen.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: 255px;
        margin-top: 20px;
        margin-left: -58px;
    }
    .f-about-section p.desc {
        width: 94%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        letter-spacing: 1px;
        color: #f58b1f;
        font-size: 18px;
    }
    .f-boxs .col-lg-3 {
        padding: 5px 30px;
    }
    .overflow-indus {
        background-repeat: repeat;
    }
    .about-Security .desc {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        color: #f58b1f;
        font-size: 18px;
        line-height: 1;
    }
    .row.secu-boxs .col-lg-3 {
        padding: 10px 15px;
    }
    .aundroid .col-lg-7 h3 {
        font-size: 55px;
    }
    .aundroid .f-mobiles .mobile {
        background-image: url(../img/forntPage/Asset14.svg);
        background-size: cover;
        background-repeat: no-repeat;
        width: 284px;
        height: 426px;
        padding-left: 31px;
        padding-top: 31px;
    }
    .aundroid .f-mobiles .mobile img {
        width: 73%;
        height: 97%;
        border-radius: 22px;
    }
    .f-mobiles {
        display: block;
    }
    .f-key-box {
        background-image: url(../img/forntPage/Rounded-Square.svg);
        background-repeat: no-repeat;
        background-position: center;
        padding: 8px;
        background-size: cover;
        border-radius: 15px;
        text-align: center;
    }
    .f-key-box img {
        height: 75px;
    }
    .f-key-boxs {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        margin: 0px;
    }
    .f-key-boxs .col-lg-3 {
        width: 50%;
        padding: 10px;
    }
    .discount-tabs {
        display: flex;
        flex-wrap: wrap;
    }
    .discount-tabs .col-lg-3 {
        width: 50%;
    }
    .col-lg-7 .f-counter {
        padding-right: 0px;
    }
    .col-lg-7 .f-counter .row.text-black.fs-18 {
        display: flex;
        flex-wrap: nowrap;
    }
    .col-lg-7 .f-counter .row.text-black.fs-18 .col-lg-6 {
        width: 36%;
    }
    .col-lg-7 .f-counter .row.text-black.fs-18 .col-lg-6 p {
        width: 100%;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    .AVAILABILITy .row {
        width: 100%;
        margin: 0;
    }
    .AVAILABILITy .row {
        width: 100%;
    }
    .FAQ {
        padding: 0px;
    }
    .form {
        padding: 0px;
    }
    .indus-box {
        padding: 12px;
    }
    .total-invoice {
        display: none;
    }
    span.px-12 {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
    .padding div:nth-child(2) {
        padding: 0;
    }
    .f-logo img {
        padding: 0px;
    }
}

@media (min-width: 320px) {
    .aundroid .f-mobiles .mobile {
        margin: auto;
    }
    .f-owerly .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
    .f-pc {
        background-image: url(../img/forntPage/Asset15.svg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 410px;
        width: 400px;
        padding-left: 11px;
        padding-top: 11px;
    }
    .f-pc img {
        width: 96%;
        height: 107px;
    }
    .f-mobile img {
        width: 73%;
        padding-left: 6px;
        padding-top: 6px;
        border-radius: 8px;
        border-top-left-radius: 9px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 7px;
    }
    .f-mobile {
        background-image: url(../img/forntPage/Asset14.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100px;
        height: 150px;
        margin-top: 95px;
        margin-left: -59px;
    }
    .f-tablet img {
        height: 148px;
        padding-left: 10px;
        padding-top: 11px;
        width: 87%;
    }
    .f-tablet {
        background-image: url(../img/forntPage/tabletScreen.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: 255px;
        margin-top: 20px;
        margin-left: -58px;
    }
    .f-about-section p.desc {
        width: 94%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        letter-spacing: 1px;
        color: #f58b1f;
        font-size: 18px;
    }
    .f-boxs .col-lg-3 {
        padding: 5px 30px;
    }
    .overflow-indus {
        background-repeat: repeat;
    }
    .about-Security .desc {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        color: #f58b1f;
        font-size: 18px;
        line-height: 1;
    }
    .row.secu-boxs .col-lg-3 {
        padding: 10px 15px;
    }
    .aundroid .col-lg-7 h3 {
        font-size: 59px;
    }
    .aundroid .f-mobiles .mobile {
        background-image: url(../img/forntPage/Asset14.svg);
        background-size: cover;
        background-repeat: no-repeat;
        width: 284px;
        height: 426px;
        padding-left: 31px;
        padding-top: 31px;
    }
    .aundroid .f-mobiles .mobile img {
        width: 73%;
        height: 97%;
        border-radius: 22px;
    }
    .f-mobiles {
        display: block;
    }
    .f-key-box {
        background-image: url(../img/forntPage/Rounded-Square.svg);
        background-repeat: no-repeat;
        background-position: center;
        padding: 8px;
        background-size: cover;
        border-radius: 15px;
        text-align: center;
    }
    .f-key-box img {
        height: 75px;
    }
    .f-key-boxs {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        margin: 0px;
    }
    .f-key-boxs .col-lg-3 {
        width: 50%;
        padding: 10px;
    }

    .discount-tabs {
        display: flex;
        flex-wrap: wrap;
    }
    .discount-tabs .col-lg-3 {
        width: 50%;
    }
    .col-lg-7 .f-counter {
        padding-right: 0px;
    }
    .col-lg-7 .f-counter .row.text-black.fs-18 {
        display: flex;
        flex-wrap: nowrap;
    }
    .col-lg-7 .f-counter .row.text-black.fs-18 .col-lg-6 {
        width: 40%;
    }
    .AVAILABILITy .row {
        width: 100%;
        margin: 0;
    }
    .AVAILABILITy .row {
        width: 100%;
    }
    .FAQ {
        padding: 0px;
    }
    .form {
        padding: 0px;
    }
    .indus-box {
        padding: 12px;
    }
    .total-invoice {
        display: none;
    }
    span.px-12 {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .padding div:nth-child(2) {
        padding: 0;
    }
    .f-logo img {
        padding: 0px;
    }
    .totalmobile {
        display: block !important;
    }
}
@media (min-width: 330px) {
    .f-tablet img {
        height: 39%;
        padding-left: 10px;
        padding-top: 11px;
        width: 87%;
    }
    .f-pc img {
        width: 96%;
        height: 31%;
    }
}
@media (min-width: 340px) {
    .f-tablet img {
        height: 40%;
        padding-left: 10px;
        padding-top: 11px;
        width: 87%;
    }
    .f-pc img {
        width: 96%;
        height: 31%;
    }
}
@media (min-width: 350px) {
    .f-tablet img {
        height: 41%;
        padding-left: 10px;
        padding-top: 11px;
        width: 87%;
    }
    .f-pc img {
        width: 96%;
        height: 31%;
    }
}
@media (min-width: 360px) {
    .f-tablet img {
        height: 42%;
        padding-left: 10px;
        padding-top: 11px;
        width: 87%;
    }
    .f-pc img {
        width: 96%;
        height: 33%;
    }
    span.px-12 {
        padding: 0px !important;
    }
    span.px-12 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .f-logo img {
        padding-left: 30px;
    }
}
@media (min-width: 375px) {
    .f-pc img {
        width: 93%;
        height: 34%;
    }
    .f-tablet img {
        height: 43%;
        padding-left: 10px;
        padding-top: 11px;
        width: 87%;
    }
}

@media (min-width: 390px) {
    .f-tablet img {
        height: 46%;
        padding-left: 10px;
        padding-top: 11px;
        width: 87%;
    }
}
@media (min-width: 414px) {
    .f-pc img {
        width: 93%;
        height: 37%;
    }
    .f-tablet img {
        height: 47%;
        padding-left: 10px;
        padding-top: 11px;
        width: 87%;
    }
}
@media (min-width: 425px) {
    .f-pc img {
        width: 93%;
        height: 36%;
    }
    .f-tablet img {
        height: 49%;
        padding-left: 10px;
        padding-top: 11px;
        width: 87%;
    }
    .f-mobile img {
        width: 73%;
        padding-left: 8px;
        padding-top: 8px;
        border-radius: 12px;
        border-top-left-radius: 14px;
        border-top-right-radius: 12px;
        border-bottom-left-radius: 12px;
    }
}
@media (min-width: 443px) {
    .f-pc img {
        width: 93%;
        height: 36%;
    }
    .f-tablet img {
        height: 50%;
        padding-left: 10px;
        padding-top: 11px;
        width: 87%;
    }
    .f-mobile img {
        width: 73%;
        padding-left: 8px;
        padding-top: 8px;
        border-radius: 12px;
        border-top-left-radius: 14px;
        border-top-right-radius: 12px;
        border-bottom-left-radius: 12px;
    }
}
@media (min-width: 455px) {
    .f-pc img {
        width: 93%;
        height: 39%;
    }
    .f-tablet img {
        height: 52%;
        padding-left: 10px;
        padding-top: 11px;
        width: 87%;
    }
    .f-mobile img {
        width: 73%;
        padding-left: 8px;
        padding-top: 8px;
        border-radius: 12px;
        border-top-left-radius: 14px;
        border-top-right-radius: 12px;
        border-bottom-left-radius: 12px;
    }
}
@media (min-width: 473px) {
    .f-pc img {
        width: 93%;
        height: 39%;
    }
    .f-tablet img {
        height: 53%;
        padding-left: 10px;
        padding-top: 11px;
        width: 87%;
    }
    .f-mobile img {
        width: 73%;
        padding-left: 8px;
        padding-top: 8px;
        border-radius: 12px;
        border-top-left-radius: 14px;
        border-top-right-radius: 12px;
        border-bottom-left-radius: 12px;
    }
}
@media (min-width: 485px) {
    .f-pc img {
        width: 93%;
        height: 40%;
    }
    .f-tablet img {
        height: 54%;
        padding-left: 10px;
        padding-top: 11px;
        width: 87%;
    }
    .f-mobile img {
        width: 73%;
        padding-left: 8px;
        padding-top: 8px;
        border-radius: 12px;
        border-top-left-radius: 14px;
        border-top-right-radius: 12px;
        border-bottom-left-radius: 12px;
    }
}
@media (min-width: 515px) {
    .f-pc img {
        width: 93%;
        height: 41%;
    }
    .f-tablet img {
        height: 57%;
        padding-left: 10px;
        padding-top: 11px;
        width: 87%;
    }
    .f-mobile img {
        width: 73%;
        padding-left: 8px;
        padding-top: 8px;
        border-radius: 12px;
        border-top-left-radius: 14px;
        border-top-right-radius: 12px;
        border-bottom-left-radius: 12px;
    }
    .f-tablet {
        background-image: url(../img/forntPage/tabletScreen.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: 255px;
        margin-top: 20px;
        padding-left: 5px;
        margin-left: -58px;
        padding-top: 6px;
    }
    .aundroid .f-mobiles .mobile {
        background-image: url(../img/forntPage/Asset14.svg);
        margin: auto;
        background-size: cover;
        background-repeat: no-repeat;
        width: 284px;
        height: 426px;
        padding-left: 31px;
        padding-top: 31px;
    }
    #unlimited-users {
        position: absolute;
        height: 10px;
        left: 12%;
    }
}
@media (min-width: 600px) {
    .f-pc img {
        width: 93%;
        height: 51%;
    }
    .f-tablet img {
        height: 61%;
        padding-left: 10px;
        padding-top: 11px;
        width: 87%;
    }
    .Select {
        margin-left: 0px;
    }
    .f-navbar.navbar-default .navbar-nav > li > a {
        padding: 10px;
    }
    .f-logo img {
        padding-left: 0px;
    }
}
@media (min-width: 700px) {
    .f-mobiles {
        display: flex;
        padding-top: 50px;
    }
    #unlimited-users {
        position: absolute;
        height: 10px;
        left: 6%;
    }
    .f-logo img {
        padding-left: 30px;
    }
    .Select {
        margin-left: 50px;
    }
    .f-navbar.navbar-default .navbar-nav > li > a {
        padding: 10px 15px;
    }
}
@media (min-width: 768px) {
    .f-pc img {
        width: 93%;
        height: 50%;
    }
    .f-tablet img {
        height: 61%;
        padding-left: 10px;
        padding-top: 11px;
        width: 75%;
    }
    .f-mobile {
        background-image: url(../img/forntPage/Asset14.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100px;
        height: 150px;
        margin-top: 95px;
        margin-left: -94px;
    }
    .f-key-box img {
        height: 135px;
    }
    .f-key-box {
        background-image: url(../img/forntPage/Rounded-Square.svg);
        background-repeat: no-repeat;
        background-position: center;
        padding: 20px;
        background-size: contain;
        border-radius: 15px;
        text-align: center;
    }
}
@media (min-width: 992px) {
    .totalmobile {
        display: none !important;
    }
    .total-invoice {
        display: block;
    }
}
@media (min-width: 1024px) {
    .f-tablet img {
        height: 61%;
        padding-left: 10px;
        padding-top: 11px;
        width: 79%;
    }
    .f-key-boxs .col-lg-3 {
        width: 25%;
    }
    .FAQ {
        padding-bottom: 50px;
    }
    .form form,
    .form {
        padding: 50px;
    }
    .f-keyFeatures {
        padding: 50px;
    }
    .f-counter {
        padding-right: 50px;
    }
}
@media (min-width: 1200px) {
    .f-pc {
        background-image: url('../img/forntPage/Asset15.svg');
        background-size: cover;
        background-repeat: no-repeat;
        height: 410px;
        width: 500px;
        padding-left: 20px;
        padding-top: 20px;
    }
    .f-pc img {
        width: 93%;
        height: 245px;
    }
    .f-tablet {
        background-image: url('../img/forntPage/tabletScreen.svg');
        background-size: cover;
        background-repeat: no-repeat;
        width: 210px;
        margin-top: 160px;
        margin-left: -120px;
    }
    .f-tablet img {
        height: 221px;
        padding-left: 9px;
        padding-top: 10px;
        width: 87%;
    }
    .f-mobile {
        background-image: url('../img/forntPage/Asset14.svg');
        background-size: cover;
        background-repeat: no-repeat;
        width: 100px;
        height: 150px;
        margin-top: 245px;
        margin-left: -65px;
    }
    .f-mobile img {
        width: 73%;
        padding-left: 11px;
        padding-top: 11px;
        border-radius: 11px;
        border-top-left-radius: 20px;
        border-top-right-radius: 15px;
        border-bottom-left-radius: 15px;
    }
    .f-key-box img {
        height: 135px;
    }
    .f-key-box {
        background-image: url(../img/forntPage/Rounded-Square.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        padding: 20px;
        border-radius: 15px;
        text-align: center;
    }
    .f-mobiles {
        display: flex;
        padding-top: 50px;
    }
    .aundroid .f-mobiles .mobile img {
        width: 80%;
        height: 84%;
        border-radius: 16px;
    }
    .f-second-mobile {
        margin-top: 100px;
    }

    .discount-tabs .col-lg-3 {
        width: 25%;
    }
    .f-counter {
        padding-right: 50px;
    }
}

@media (max-width: 767px) {
    .f-navbar #navbar {
        width: 100%;
        position: absolute;
        top: 50px;
        margin-left: -15px;
    }
    .f-navbar.navbar-default .navbar-nav > li > a {
        float: none;
        color: black;
    }
    .Select {
        margin-left: 50px;
    }
    .button-toggle {
        margin-left: auto !important;
    }
    section.form {
        padding-bottom: 50px;
    }
    .text-see-green span {
        font-size: 15px;
    }
}

.discountper {
    display: block;
    font-weight: 600;
    font-size: large;
    color: #d60303;
    font-style: italic;
}

.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px !important;
}

.swiper-slide img {
    display: block;
    width: 100%;
}
.mac-bg-img {
    padding: 10px;
    background-image: url(../img/forntPage/softwarescreen.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 600px;
    width: 600px;
}
@media screen and (max-width: 600px) {
    .mac-bg-img {
        padding: 10px;
        background-image: url(../img/forntPage/softwarescreen.svg);
        background-repeat: no-repeat;
        background-size: cover;
        height: 350px;
        width: 350px;
    }
}
.mac-bg-img img {
    height: 55%;
}
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right {
    background-image: none !important;
}
.f-slider h3 {
    font-size: 40px;
    color: black;
    text-align: center;
}
.pr-0 {
    padding: 0 !important;
}
.f-white-nav {
    background-color: #fff !important;
    background-image: none !important;
    width: 100%;
    position: fixed;
    top: 0;
}
.f-white-nav.navbar-default .navbar-nav > li > a {
    color: #000 !important;
}
.f-accordion {
    display: flex;
}
.f-accordion i {
    margin-left: auto;
}
/*.navbar-default .navbar-nav > li{*/
/*    color: #fff !important ;*/
/*}*/
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    background-color: #5e46af !important;
}
/*.navbar-default .navbar-brand {*/
/*    color: #fff !important;*/
/*}*/
a.sm\:tw-inline-flex.tw-transition-all.tw-duration-200.tw-gap-2.tw-bg-primary-800.hover\:tw-bg-primary-700.tw-py-1\.5.tw-px-3.tw-rounded-lg.tw-items-center.tw-justify-center.tw-text-sm.tw-font-medium.tw-ring-1.tw-ring-white\/10.hover\:tw-text-white.tw-text-white {
    background: #483786;
}
tbody .btn-info {
    border-radius: 3px !important;
}

html {
    height: -webkit-fill-available !important;
}
.pricing {
    position: relative;
}

.popup {
    position: absolute;
    background: #fff;
    padding: 50px;
    z-index: 50;
    width: auto;
    margin: auto;
    left: 35%;
    top: 38%;
    right: 35%;
    box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 75%);
}
.popup form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.popup form input {
    width: 30rem;
    padding: 5px;
    border: none;
    border-bottom: 1px solid;
    margin-top: 40px;
}
.popup form input[type='submit'] {
    cursor: pointer;
    border: none;
    background: #0d1732;
    color: #fff;
    width: fit-content;
    padding: 5px 20px;
}
.popup form input:focus {
    border: none;
    outline: none;
}
.popup button {
    margin-left: 100%;
    background: transparent;
    border: none;
    font-size: 20px;
}
.popuphide {
    display: none;
}
.dropdown-item {
    color: #3c8dbc !important;
}
#side-bar {
    background: #301b74;
}
a.drop_down{
    color:#fff;
}
utton.clock_in_btn {
    background: #483786;
}
summary.tw-inline-flex.tw-transition-all.tw-ring-1.tw-ring-white\/10.hover\:tw-text-white.tw-cursor-pointer.tw-duration-200.tw-bg-primary-800.hover\:tw-bg-primary-700.tw-py-1\.5.tw-px-3.tw-rounded-lg.tw-items-center.tw-justify-center.tw-text-sm.tw-font-medium.tw-text-white.tw-gap-1{
    background: #483786;    
}
#btnCalculator {
    background: #483786;
}
a.tw-hidden.sm\:tw-inline-flex.tw-transition-all.tw-duration-200.tw-gap-2.tw-bg-primary-800.hover\:tw-bg-primary-700.tw-py-1\.5.tw-px-3.tw-rounded-lg.tw-items-center.tw-justify-center.tw-text-sm.tw-font-medium.tw-ring-1.tw-ring-white\/10.tw-text-white.hover\:tw-text-white {
    background: #483786;
}
#view_todays_profit {
    background: #483786;
}
button.tw-hidden.lg\:tw-inline-flex.tw-transition-all.tw-ring-1.tw-ring-white\/10.tw-duration-200.tw-bg-primary-800.hover\:tw-bg-primary-700.tw-py-1\.5.tw-px-3.tw-rounded-lg.tw-items-center.tw-justify-center.tw-text-sm.tw-font-medium.tw-text-white.hover\:tw-text-white.tw-font-mono {
    background: #483786;
}
#show_unread_notifications {
    background: #483786;
}
button.side-bar-collapse {
    background: #483786;
}
summary.tw-dw-m-1.tw-inline-flex.tw-transition-all.tw-ring-1.tw-ring-white\/10.tw-cursor-pointer.tw-duration-200.tw-bg-primary-800.hover\:tw-bg-primary-700.tw-py-1\.5.tw-px-3.tw-rounded-lg.tw-items-center.tw-justify-center.tw-text-sm.tw-font-medium.tw-text-white.hover\:tw-text-white.tw-gap-1 {
    background: #483786;
}
button.clock_in_btn{
    background: #483786;
}
.tw-transition-all.tw-duration-5000.tw-border-b.tw-bg-gradient-to-r.tw-from-primary-800.tw-to-primary-900.tw-shrink-0.lg\:tw-h-15.tw-border-primary-500\/30.no-print {
    background: #301b74;
}
a.drop_down:focus {
    background: #f68c17;
    color:#fff;
}
a.drop_down:hover {
    background: #f68c17;
    color:#fff;
}
a.tw-flex.tw-items-center.tw-justify-center.tw-w-full.tw-border-r.tw-h-15.tw-bg-primary-800.tw-shrink-0.tw-border-primary-500\/30 {
    background: #243d92;
}
a.tw-flex.tw-items-center.tw-gap-3.tw-px-3.tw-py-2.tw-text-sm.tw-font-medium.tw-tracking-tight.tw-text-gray-600.tw-transition-all.tw-duration-200.tw-rounded-lg.tw-whitespace-nowrap.hover\:tw-text-gray-900.hover\:tw-bg-gray-100.tw-bg-gray-200.tw-text-primary-700{
        background: #f68c17;
        color:#fff;
}
/*a{*/
/*    color:#fff !important;*/
/*}*/
a.tw-flex.tw-items-center.tw-gap-3.tw-px-3.tw-py-2.tw-text-sm.tw-font-medium.tw-tracking-tight.tw-text-gray-600.tw-transition-all.tw-duration-200.tw-rounded-lg.tw-whitespace-nowrap.hover\:tw-text-gray-900.hover\:tw-bg-gray-100:hover {
    background: #f68c17 !important;
    color:#fff !important;
}
a.tw-flex.tw-items-center.tw-gap-3.tw-px-3.tw-py-2.tw-text-sm.tw-font-medium.tw-tracking-tight.tw-text-gray-600.tw-transition-all.tw-duration-200.tw-rounded-lg.tw-whitespace-nowrap.hover\:tw-text-gray-900.hover\:tw-bg-gray-100 {
        color:#fff !important;
}
.tw-space-y-3\.5 a{
    color: #fff !important;
}
.task-icon {
    padding: 15px !important;
}
.buttons-excel {
    margin-left: 10px;
}

.buttons-pdf {
    margin-left: 10px;
}
.buttons-print {
    margin-left: 10px;
}
.buttons-collection {
    margin-left: 10px;
    margin-top: 4px;
}
table, .dataTables_scrollHeadInner{
    width:100% !important;
}
div[class="my-task pb-10"]{
    height: 406px;
}

.project-date{
    left: 40%;
    position: absolute;
    bottom: 10px;
}
.project .time{
    position: relative !important;
    left: 42% !important;
}
.todolist{
        max-height: 261px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 261px;
}
 /* Blurred background overlay */
 /*     div[class="my-task pb-10"]::before {*/
 /*       content: "";*/
 /*       position: absolute;*/
 /*       top: 0;*/
 /*       left: 0;*/
 /*       width: 100%;*/
 /*       height: 100%;*/
         /* background: inherit;Inherit the semi-transparent white background 
        filter: blur(10px); /* Apply the blur effect */
 /*       z-index: 1;*/
 /*     }*/

      /* Blurred "My Tasks" header */
 /*     div[class="my-task pb-10"] .task-icon {*/
 /*       position: relative;*/
 /*       z-index: 2;*/
 /*     }*/

 /*     div[class="my-task pb-10"] .task-icon h2 {*/
 /*       font-size: 1.5em;*/
 /*       font-weight: bold;*/
 /*       margin: 0 0 10px;*/
 /*       position: relative;*/
 /*       overflow: hidden;*/
 /*       color: transparent;*/
 /*       text-shadow: 0 0 2px #333;*/
 /*     }*/

      /* Centered "No Data" message */
 /*     div[class="my-task pb-10"] .project-date {*/
 /*       z-index: 3;*/
 /*       font-size: 1.2em;*/
 /*       color: #333;*/
 /*       text-align: center;*/
 /*       margin-top: 20px;*/
 /*     }*/

      /* Icon styling */
 /*     div[class="my-task pb-10"] .task-icon i {*/
 /*       color: #3fd5c7;*/
 /*       margin-right: 8px;*/
 /*       z-index: 3;*/
 /*       position: relative;*/
 /*     }*/
 .login-form {
    width: 405px;
    margin-top: 254px;
    margin-left: calc(50% - 202px); /* 50% of the width minus half the form width */
}