:root { --red: #ff3838; --gray: #777777; --blue: #2980b9; --white: #ffffff; --chalk: #f5f5f5; --green: #11b76b; --purple: #b12fad; --orange: #e86121; --yellow: #ffab10; --text: #555555; --dark: #290633; --border: #e8e8e8; --heading: #232d3b; --primary: #a64475; --primary-light: #93c9ea; --primary-hover: #a64475; --view: #8edb04; --click: #01cbd5; --rating: #e8ce00; --sale: #dc3545; --rent: #03a70c; --booking: #7209af; --facebook: #3b5998; --linkedin: #0e76a8; --twitter: #00acee; --primary-bshadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1); --primary-tshadow: 2px 3px 8px rgba(0, 0, 0, 0.1) } * { margin: 0px; padding: 0px; outline: 0px } a { text-decoration: none; display: inline-block } a:hover { text-decoration: none } ul,ol { list-style: none } h1,h2,h3,h4,h5,h6,p,ul,ol,li,span,label { margin-bottom: 0px } html,body { scroll-behavior: smooth } body { color: var(--text); font-size: 16px; font-weight: 400; line-height: 26px; text-align: right } h1,h2,h3,h4,h5,h6 { color: var(--heading) } h1 { font-size: 40px; line-height: 48px; font-weight: 700 } h2 { font-size: 38px; line-height: 46px; font-weight: 700 } h3 { font-size: 24px; line-height: 32px; font-weight: 700 } h4 { font-size: 20px; line-height: 28px; font-weight: 700 } h5 { font-size: 16px; line-height: 26px; font-weight: 500 } h6 { font-size: 14px; font-weight: 500 } body .small, body small { font-size: 11px; font-weight: 200; line-height:170%!important; } input,textarea { border: none; outline: none } input::placeholder,textarea::placeholder { font-size: 15px; color: var(--gray); } button { border: none; outline: none; background: none } button:focus { outline: none } .center-50 { text-align: center; margin-top: 50px } .center-20 { text-align: center; margin-top: 20px } @media (max-width: 991px) { .content-reverse { flex-wrap: wrap-reverse } } thead{ background: #F1F1F1; overflow: hidden; } .form-group { margin-bottom: 20px } .form-control { border: none; width: 100%; height: 40px; padding: 0px 15px; border-radius: 10px!important; color: var(--heading); background: var(--chalk); border: 1px solid var(--border)!important; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; margin-left:5px; } .form-control:focus { outline: none; box-shadow: none; color: var(--gray); background: var(--chalk); border-color: var(--primary) } textarea.form-control { height: 215px; padding: 15px 20px } .form-btn .btn { width: 100%; height: 50px; padding: 10px 30px } .form-label { font-size: 15px; font-weight: 700; color: var(--gray); margin-bottom: 4px; } label { font-size: 13px; font-weight: 400; color: var(--gray); margin-bottom: 4px; } .form-control::-webkit-file-upload-button { height: 45px; border: none; background: none; color: var(--placeholder) } .form-control::-webkit-file-upload-button:focus { border: none; outline: none } .btn { border: none; font-size: 14px; font-weight: 500; border: none; padding: 10px 15px; border-radius: 8px!important; letter-spacing: 0.5px; text-shadow: var(--primary-tshadow); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; margin-left:3px; } .btn:focus { box-shadow: none !important } .btn i { margin-top: -1px; margin-left: 5px } .btn-inline { color: var(--white); background: var(--primary); border-color: var(--primary) } .btn-inline:hover { color: var(--white); background: var(--primary-hover); border-color: var(--primary-hover) } .btn-outline { color: var(--primary); background: rgba(255,255,255,0.9); border-color: var(--primary) } .btn-outline:hover { color: var(--white); background: var(--primary); border-color: var(--primary) } .dropdown-list { width: 100%; display: none; background: var(--white); border-top: 2px solid var(--primary); box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.1); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .dropdown-list li { border-bottom: 1px solid var(--border) } .dropdown-list li:last-child { border-bottom: none } .dropdown-list li a span { color: var(--sale); margin-right: 10px } #main-menu .navbar-item > a { width: 100%; font-size: 15px; font-weight: 400; color: var(--text); padding: 10px 50px 10px 0px; position: relative; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } #main-menu .navbar-item > a:hover { color: var(--primary); background: var(--chalk) } #main-menu .navbar-item > a:hover::before { background: var(--primary) } #main-menu .navbar-item > a::before { position: absolute; content: ""; top: 48%; right: 30px; width: 10px; height: 2px; background: var(--gray); transform: translateY(-50%); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .nasted-dropdown { height: 292px; padding: 0px 8px; overflow-y: scroll } .nasted-dropdown li { border-bottom: 1px solid var(--border) } .nasted-dropdown li:last-child { border-bottom: none } .nasted-menu { width: 100%; cursor: pointer; padding: 8px 0px; color: var(--gray); display: flex; align-items: center; justify-content: center; justify-content: space-between; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .nasted-menu:hover { color: var(--primary) } .nasted-menu p { font-size: 15px; } .nasted-menu p span { font-size: 12px; margin-left: 8px } .nasted-menu i { font-size: 10px } .nasted-menu-list { padding: 0px 15px; display: none } .nasted-menu-list li a { font-size: 14px; padding: 6px 0px; position: relative; margin-right: 25px; color: var(--gray) } .nasted-menu-list li a::before { position: absolute; content: ""; top: 50%; right: -20px; transform: translateY(-50%); width: 10px; height: 1px; background: var(--gray) } .nasted-menu-list li a:hover { color: var(--primary) } .nasted-menu-list li a:hover::before { background: var(--primary) } @media (min-width: 768px) and (max-width: 991px) { .nasted-dropdown { height: 200px } } .nav { flex-wrap: nowrap; align-items: center; justify-content: center } .nav-tabs li { width: 100% } .nav-tabs li .nav-link { width: 100%; border: none; padding: 16px 0px; text-align: center; font-size: 14px; font-weight: 500; color: var(--heading); letter-spacing: 0.5px; border-radius: var(--tab-radius); border-bottom: 3px solid transparent; text-shadow: var(--primary-tshadow) } .nav-tabs li .nav-link:hover { background: var(--chalk); border-color: transparent } .nav-tabs li .active { color: var(--primary) !important; background: var(--chalk) !important; border-color: var(--primary) !important } .tab-pane { display: none; padding: 0px 50px } .tab-pane.active { display: block } @media (max-width: 575px) { .nav-tabs li .nav-link { padding: 10px 0px } .tab-pane { padding: 0px 15px } } @media (min-width: 576px) and (max-width: 991px) { .tab-pane { padding: 0px 25px } } .section { padding: 30px 0px 30px } .section-center-heading { text-align: center; margin-bottom: 45px } .section-center-heading h2 { margin-bottom: 15px } .section-center-heading h2 span { color: var(--primary) } .section-center-heading p { width: 600px; margin: 0 auto; font-size: 18px; line-height: 28px } .section-side-heading h2 { margin-bottom: 15px } .section-side-heading h2 span { color: var(--primary); font-style: italic } .section-side-heading p { font-size: 18px; line-height: 28px; margin-bottom: 45px } .inner-section { margin-bottom: 100px } @media (max-width: 767px) { .section { padding: 60px 0px 0px } .inner-section { margin-bottom: 60px } .section-side-heading { margin-bottom: 60px } .section-center-heading { margin-bottom: 30px } .section-center-heading p { width: 100%; font-size: 16px; line-height: 26px } } @media (max-width: 575px) { h2 { font-size: 28px; line-height: 36px } } @media (min-width: 768px) and (max-width: 991px) { .section { padding: 80px 0px 0px } .inner-section { margin-bottom: 80px } } .alert { border: none; padding: 0px; margin: 0px; border-radius: 0px; position: inherit } .table-list { width: 100% } .table-head { box-shadow: 0px 8px 25px 0px rgba(0,0,0,0.25) } .table-head tr { background: var(--primary) } .table-head tr th { text-align: center; padding: 16px 25px; color: var(--white); font-weight: 500; font-size: 15px; letter-spacing: 0.5px; white-space: nowrap; border-right: 1px solid #003399 } .table-head tr th:first-child { border-right: none; border-radius: 0px 6px 6px 0px } .table-head tr th:last-child { border-radius: 6px 0px 0px 6px } .table-body tr { border-bottom: 1px solid var(--border) } .table-body tr td { padding: 15px 25px; text-align: center; border-right: 1px solid var(--border) } .table-body tr td:first-child { border-right: none } .table-body .badge { font-size: 14px; font-weight: 400; padding: 6px 10px; letter-spacing: 0.5px; color: var(--white) } .table-product img { width: 100px; border-radius: 6px } .table-category h6 a { color: var(--heading) } .table-category h6 a:hover { color: var(--primary) } .table-price h5 { font-weight: 700 } .table-condition .use { background: var(--orange) } .table-condition .new { background: var(--green) } .table-status .runs { background: var(--purple) } .table-status .clos { background: var(--red) } .table-action { text-align: center } .table-action .icon { width: 35px; height: 35px; font-size: 14px; line-height: 35px; text-align: center; border-radius: 5px; margin: 3px; color: var(--primary); background: var(--chalk); text-shadow: var(--primary-tshadow); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .table-action .icon:hover { color: var(--white); background: var(--primary) } .table-action .active { color: var(--white); background: var(--primary) } @media (max-width: 991px) { .table-scroll { overflow-x: scroll } .table-list { width: 900px } } .modal-header h4 { font-weight: 500 } .modal-header button { font-size: 20px; color: var(--text); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .modal-header button:hover { color: var(--primary) } .modal-link { display: block; text-align: right; position: relative; padding: 10px 60px 10px 0px; border-radius: 5px; width: 100%; color: var(--text); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .modal-link:hover { color: var(--primary); background: var(--chalk) } .modal-link:hover::before { color: var(--primary) } .modal-link::before { position: absolute; content: "\f00c"; top: 50%; right: 30px; font-size: 12px; font-weight: 700; font-family: 'Font Awesome 5 Free'; color: var(--text); transform: translateY(-50%) } .modal-link.active { color: var(--primary); background: var(--chalk) } .modal-link.active::before { color: var(--primary) } .modal-number { margin: 15px 0px; text-align: center; color: var(--primary) } .modal-share { text-align: center; display: flex; align-items: center; justify-content: center; flex-wrap: wrap } .modal-share a { margin: 15px 15px; display: flex; align-items: center; justify-content: center; flex-direction: column } .modal-share a i { width: 60px; height: 60px; font-size: 20px; line-height: 60px; border-radius: 50%; margin-bottom: 5px; text-align: center; color: var(--white); background: var(--primary) } .modal-share a span { font-size: 15px; font-weight: 500; color: var(--heading); white-space: nowrap; } .modal-share .facebook { background: var(--facebook) } .modal-share .twitter { background: var(--twitter) } .modal-share .linkedin { background: var(--linkedin) } .breadcrumb { align-items: center; background: none; padding: 0px; margin: 0px } .breadcrumb li { } .breadcrumb li a { color: var(--chalk); text-shadow: var(--primary-tshadow) } .breadcrumb li a:hover { color: var(--primary-light); text-decoration: underline } .breadcrumb .active { color: var(--primary-light); text-shadow: var(--primary-tshadow) } .breadcrumb-item+.breadcrumb-item { padding: 0px } .breadcrumb-item+.breadcrumb-item::before { color: var(--primary-light); text-shadow: var(--primary-tshadow); padding: 0px 5px } .sale { background: var(--sale) } .rent { background: var(--rent) } .booking { background: var(--booking) } .flat-badge { color: var(--white); padding: 2px 8px; border-radius: 3px; font-size: 13px; line-height: 18px; } .cross-vertical-badge { position: relative; display: inline-block } .cross-vertical-badge:hover span { visibility: visible; opacity: 1; right: 35px } .cross-vertical-badge i { font-size: 16px; padding: 8px 8px 12px; color: var(--white); text-align: center; background: var(--primary); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; clip-path: polygon(0 0, 53% 0, 100% 0, 100% 100%, 50% 85%, 0 100%) } .cross-vertical-badge span { font-size: 15px; padding: 3px 5px; border-radius: 5px; color: var(--white); background: var(--dark); white-space: nowrap; position: absolute; top: 50%; right: 20px; z-index: 2; visibility: hidden; opacity: 0; transform: translateY(-50%); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; font-size:11px; } .cross-vertical-badge span::before { position: absolute; content: ""; width: 8px; height: 8px; border-radius: 1px; background: var(--dark); right: -4px; top: 50%; transform: translateY(-50%) rotate(45deg) } .cross-inline-badge { font-size: 15px; font-weight: 500; padding: 3px 15px 3px 22px; border-radius: 5px 0px 0px 5px; color: var(--white); background: var(--primary); clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 10% 50%, 0% 0%) } .cross-inline-badge span { margin-left: 8px; letter-spacing: 0.5px } .pagination { align-items: center; justify-content: center } .page-item { margin: 0px 3px } .page-item:first-child .page-link,.page-item:last-child .page-link { border-radius: 50% } .page-item .active { color: var(--white); background: var(--primary) } .page-link { width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; font-weight: 500; border: none; padding: 0px; color: var(--gray); background: var(--white) } .page-link:hover { color: var(--white); background: var(--primary) } .page-link:focus { box-shadow: none } @media (max-width: 991px) { .page-link { width: 35px; height: 35px; line-height: 35px } } .slider-arrow:hover .dandik,.slider-arrow:hover .bamdik { visibility: visible; opacity: 1 } .slider-dots ul { position: absolute; bottom: 30px; right: 50%; transform: translateX(50%) } .slider-dots ul li { width: 25px; height: 5px; border-radius: 30px; background: var(--gray); margin: 0px 10px; display: inline-block; cursor: pointer; box-shadow: 0px 15px 35px 0px rgba(0,0,0,0.1) } .slider-dots ul li button { display: none } .slider-dots ul li.slick-active { background: var(--primary) } .dandik,.bamdik { position: absolute; top: 50%; transform: translateY(-50%); font-size: 16px; width: 45px; height: 45px; line-height: 45px; border-radius: 50%; text-align: center; color: var(--primary); background: var(--white); text-shadow: var(--primary-tshadow); box-shadow: var(--primary-bshadow); visibility: hidden; opacity: 0; cursor: pointer; z-index: 1; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .dandik:hover,.bamdik:hover { color: var(--white); background: var(--primary) } .dandik { right: -25px } .bamdik { left: -25px } .star-rating { direction: rtl; margin-bottom: 25px; text-align: center } .star-rating input { display: none } .star-rating input:checked ~ label::after { opacity: 1 } .star-rating label { display: inline-block; position: relative; cursor: pointer; margin: 0px 8px } .star-rating label:hover::after { opacity: 1 } .star-rating label:hover:hover ~ label::after { opacity: 1 } .star-rating label::before { content: "\f005"; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 35px; display: block; color: #bbbbbb } .star-rating label::after { content: "\f005"; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 35px; position: absolute; display: block; top: 0px; left: 0px; color: #ffcc23; opacity: 0 } @media (max-width: 575px) { .star-rating label { margin: 0px 3px } } .dropdown-card { position: absolute; top: 62px; left: 0px; z-index: 3; width: 320px; border-radius: 8px; padding-bottom: 15px; background: var(--white); box-shadow: var(--primary-bshadow); display: none } .dropdown-header { padding: 15px 15px; display: flex; align-items: center; justify-content: space-between } .dropdown-header h5 { } .dropdown-header a { font-size: 13px; font-weight: 500; letter-spacing: 0.5px; color: var(--primary); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .dropdown-header a:hover { text-decoration: underline } .suggest-card { margin: 0px 8px; border-radius: 8px; padding: 18px 0px 11px; text-align: center; background: rgba(255,255,255,0.4); border:1px solid rgba(255,255,255,0.6); box-shadow:0px 0px 10px -5px #000 inset; } .suggest-card img { height: 50px; margin-bottom: 18px } .suggest-card h6 { font-weight: 500; margin-bottom: 5px; } .suggest-card h6:hover { color: var(--primary) } .suggest-card p { font-size: 14px; font-weight: 500; color: var(--primary) } .product-card { border-radius: 8px; margin-bottom: 30px; background: var(--chalk); overflow: hidden; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; max-width:300px!important; } .product-card:hover { background: var(--white); box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.1) } .product-card:hover .product-media::before { visibility: visible; opacity: 1 } .product-card:hover .product-img img { transform: scale(1.08) } .product-card:hover .product-action { visibility: visible; opacity: 1 } .product-media { position: relative } .product-media::before { position: absolute; content: ""; top: 0px; right: 0px; width: 100%; height: 100%; z-index: 1; background: linear-gradient(rgba(0,0,0,0) 65%, rgba(0,0,0,0.8) 90%); visibility: hidden; opacity: 0; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .product-img { overflow: hidden; height:200px; background:url('../../images/favicon-mesoon.png') no-repeat center center #F9F9F9; background-size:120px 120px; } .product-img img { width: 100%; transition: all linear .5s min-height:200px; font-size:0px; color:#FFF; } .product-badge { position: absolute; top: 0px; right: 15px; z-index: 2 } .product-type { position: absolute; top: 15px; left: 15px; z-index: 2 } .product-action { position: absolute; right: 0px; bottom: 0px; z-index: 2; width: 100%; padding: 15px 15px; visibility: hidden; opacity: 0; display: flex; align-items: center; justify-content: space-between; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .product-action li i { margin-left: 5px; margin-bottom: 1px; font-size: 14px } .product-action li span { font-size: 14px; color: var(--chalk) } .product-action .view i { color: var(--view) } .product-action .click i { color: var(--click) } .product-action .rating i { color: var(--rating) } .product-content { padding: 0px 15px; height:200px; } .product-category { margin-bottom: 5px; padding: 3px 0px 3px; border-bottom: 1px solid var(--border); font-size:11px; } .product-category li i { font-size: 13px; color: #999999; margin-left: 8px } .product-category .breadcrumb-item { font-size: 13px; color: var(--gray); white-space: nowrap } .product-category .breadcrumb-item::before { color: var(--gray) } .product-category .breadcrumb-item a { color: var(--gray) } .product-category .breadcrumb-item a:hover { color: var(--primary) } .product-title { margin-bottom: 5px } .product-title a { color: var(--heading); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; font-size:14px; font-weight:700; } .product-title a:hover { color: var(--primary) } .product-meta { margin-bottom: 12px; display: flex } .product-meta span { font-size: 13px; margin-left: 15px; white-space: nowrap } .product-meta i { margin-left: 5px; color: #999999 } .product-info { padding: 5px 0px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border) } .product-price { font-weight: 700; font-size:12px; } .product-price span { font-size: 12px; font-weight: 400; margin-right: 3px; color: var(--gray); white-space: nowrap; } .product-btn a,.product-btn button { margin-right: 8px; padding-right: 12px; color: var(--gray); border-right: 1px solid var(--border); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .product-btn a:hover,.product-btn button:hover { color: var(--primary) } .product-btn .fas.fa-heart { color: var(--primary) } .product-card.standard { display: flex; align-items: center } .product-card.standard .product-media { margin: 0px; } .product-card.standard .product-img img { width: 250px; height: auto } .product-card.standard .product-content { width: 100% } .ad-standard .product-card.standard .product-media { margin: 15px 15px } .ad-standard .product-card.standard .product-img img { width: 280px } @media (min-width: 380px) and (max-width: 575px) { .product-card { width: 350px; margin: 0px auto 30px } } @media (max-width: 575px) { .product-card.standard,.ad-standard .product-card.standard { flex-direction: column } .product-card.standard .product-media,.ad-standard .product-card.standard .product-media { margin: 0px } .product-card.standard .product-img img,.ad-standard .product-card.standard .product-img img { width: 100%; height: auto } } @media (min-width: 576px) and (max-width: 767px) { .product-card.standard .product-img img,.ad-standard .product-card.standard .product-img img { width: 225px } } .feature-card { position: relative; overflow: hidden } .feature-card::before { position: absolute; content: ""; top: 0px; right: 0px; width: 100%; height: 100%; border-radius: 8px; background: linear-gradient(rgba(0,0,0,0) 30%, rgba(0,0,0,0.9) 90%) } .feature-img { display: block } .feature-img img { width: 100%; border-radius: 8px } .feature-badge { position: absolute; top: 20px; right: -80px; box-shadow: 0px 5px 12px 0px rgba(0,0,0,0.3); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .feature-badge:hover { right: 0px } .feature-wish { position: absolute; top: 20px; left: 20px } .feature-wish i { width: 38px; height: 38px; font-size: 14px; line-height: 38px; border-radius: 8px; text-align: center; color: var(--border); background: rgba(0,0,0,0.3) } .feature-wish.active i { color: var(--white); background: var(--primary); text-shadow: var(--primary-tshadow) } .feature-content { position: absolute; left: 0px; bottom: 0px; width: 100%; padding: 0px 30px 25px } .feature-category { margin-bottom: 15px } .feature-category .flat-badge { margin-left: 12px } .feature-title { font-weight: 500; margin-bottom: 15px } .feature-title a { color: var(--chalk); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .feature-title a:hover { color: var(--primary-light) } .feature-meta { display: flex; flex-wrap: wrap } .feature-price { font-size: 22px; font-weight: 700; color: var(--primary-light); margin-left: 30px } .feature-price small { font-size: 15px; font-weight: 400; margin-right: 3px; } .feature-time { font-size: 15px; color: var(--border); white-space: nowrap } .feature-time i { margin-left: 5px } .feature-thumb { cursor: pointer; margin: 0px 6px; border-radius: 8px; border: 2px solid var(--white) } .feature-thumb img { width: 100%; border-radius: 8px; border: 3px solid var(--white) } .feature-thumb.slick-center { border: 2px solid var(--primary) !important } .ad-feature-slider { margin-bottom: 30px } .ad-feature-slider .feature-card { margin: 0px 10px; opacity: 0.5 } .ad-feature-slider .slick-center { opacity: 1 } @media (max-width: 400px) { .ad-feature-slider .feature-card { margin: 0px } } @media (max-width: 575px) { .feature-content { position: inherit; padding: 15px 15px 15px; background: var(--heading); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px } .feature-img img { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px } .feature-wish { top: 15px; right: 15px } .feature-title { font-size: 18px; line-height: 26px } .feature-meta { display: flex; flex-direction: column } .feature-price { margin: 0px 0px 5px } } .city-card { overflow: hidden; position: relative; text-align: center; margin-bottom: 22px; border-radius: 8px; height: 230px; width: 100% } .city-card:hover .city-content { bottom: 25px } .city-card:hover .city-content p { opacity: 1 } .city-card::before { position: absolute; content: ""; top: 0px; right: 0px; z-index: 1; width: 100%; height: 100%; border-radius: 8px; background: linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 90%); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .city-content { position: absolute; bottom: 5px; width: 100%; z-index: 1; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .city-content h4 { font-weight: 500; color: var(--white); } .city-content p { opacity: 0; color: var(--white); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } @media (min-width: 400px) and (max-width: 575px) { .city-card { width: 370px; margin: 0px auto 22px } } .category-card { overflow: hidden; border-radius: 8px; margin-bottom: 30px; background: var(--chalk); border: 1px solid var(--border); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .category-card:hover { background: var(--white); box-shadow: 0px 8px 25px 0px rgba(0,0,0,0.1) } .category-head { position: relative } .category-head img { width: 100%; height: auto } .category-content { position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; background: linear-gradient(rgba(0,69,187,0.5), rgba(8,2,41,0.5)) } .category-content h4 { color: var(--chalk); margin-bottom: 5px; font-weight: 500; opacity: 1 } .category-content p { font-size: 14px; line-height: 14px; color: var(--chalk) } .category-list { padding: 12px 20px } .category-list li { border-bottom: 1px solid var(--border) } .category-list li:last-child { border-bottom: none } .category-list li a { padding: 12px 0px; display: flex; align-items: center; justify-content: center; justify-content: space-between } .category-list li a:hover h6,.category-list li a:hover p { color: var(--primary) } .category-list li a h6 { font-size: 15px; } .category-list li a p { font-size: 14px; line-height: 14px; color: var(--heading) } @media (min-width: 350px) and (max-width: 575px) { .category-card { width: 320px; margin: 0px auto 30px } } .price-card { padding: 55px 50px 40px; background: var(--white); border-radius: 8px; border: 2px solid var(--white); box-shadow: 0px 15px 35px 0px rgba(0,0,0,0.1); position: relative; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .price-card:hover { border-color: var(--primary) } .price-head { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border) } .price-head i { font-size: 50px; line-height: 50px; display: inline-block; position: absolute; top: 15px; left: 15px; color: var(--primary) } .price-head h3 { font-size: 40px; color: var(--primary); margin-bottom: 20px; letter-spacing: -0.5px } .price-head h4 { text-transform: uppercase } .price-list { margin-bottom: 42px } .price-list li { display: flex; align-items: flex-start; justify-content: flex-start; margin: 20px 0px } .price-list li i { color: var(--primary); margin-left: 12px; font-size: 14px; margin-top: 6px } .price-list li p { color: var(--gray) } .price-btn .btn { padding: 12px 30px } .price-active { border-color: var(--primary) } @media (max-width: 991px) { .price-card { margin-bottom: 30px } } @media (max-width: 575px) { .price-card { padding: 55px 30px 40px } } @media (min-width: 350px) and (max-width: 575px) { .price-card { width: 320px; margin: 0px auto 30px } } @media (min-width: 576px) and (max-width: 767px) { .price-card { width: 380px; margin: 0px auto 30px } } @media (min-width: 992px) and (max-width: 1199px) { .price-card { padding: 65px 35px 50px } } .blog-card { background: var(--chalk); border-radius: 8px; border: 1px solid var(--border); position: relative; z-index: 1; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .blog-card:hover { background: var(--white); box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.1) } .blog-card:hover .blog-img img { transform: scale(1.08) rotate(1deg) } .blog-img { position: relative; overflow: hidden; z-index: -1; border-top-left-radius: 8px; border-top-right-radius: 8px } .blog-img img { width: 100%; border-top-left-radius: 8px; border-top-right-radius: 8px; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .blog-overlay { position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; padding: 15px 15px; border-top-left-radius: 8px; border-top-right-radius: 8px } .blog-overlay span { color: var(--white); padding: 2px 8px; border-radius: 3px; font-size: 13px; line-height: 18px; } .safety { background: #dc3545 } .marketing { background: #28a745 } .advertise { background: #982fd5 } .security { background: #e69721 } .blog-content { margin-top: -30px; padding: 0px 20px 20px } .blog-avatar { margin-bottom: 15px } .blog-avatar img { width: 60px; border-radius: 8px; border: 3px solid var(--white) } .blog-meta { display: flex; align-items: center; justify-content: center; justify-content: space-between; margin-bottom: 20px } .blog-meta li { display: flex; align-items: center; justify-content: center } .blog-meta li i { font-size: 15px; margin-left: 8px; color: var(--primary); margin-top: -1px } .blog-meta li p { font-size: 15px; line-height: 15px; color: var(--heading); } .blog-meta li p a { color: var(--heading) } .blog-text { margin-bottom: 27px } .blog-text h4 { font-weight: 600; margin-bottom: 10px } .blog-text h4 a { color: var(--gray); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .blog-text h4 a:hover { color: var(--primary) } .blog-read { font-size: 14px; font-weight: 600; color: var(--heading); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .blog-read:hover { color: var(--primary) } .blog-read:hover i { margin-right: 8px } .blog-read i { margin-right: 3px; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .best-card { display: flex; margin: 0px 15px 50px 0px } .best-card:hover .best-icon i { color: var(--white); background: var(--primary) } .best-icon i { width: 45px; height: 45px; line-height: 45px; text-align: center; border-radius: 50%; background: var(--chalk); color: var(--heading); font-size: 18px; margin-left: 25px; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .best-content h4 { margin-bottom: 15px } .team-card { text-align: center; margin-bottom: 50px } .team-card img { width: 100%; margin-bottom: 25px; border-radius: 8px } .team-card h5 { font-weight: 600; } .team-card h5 a { color: var(--heading) } .team-card p { font-size: 15px; font-weight: 500 } .team-card ul li { display: inline-block; margin: 0px 5px } .team-card ul li a i { width: 40px; height: 40px; font-size: 14px; line-height: 40px; text-align: center; border-radius: 50%; color: var(--gray); background: var(--white); box-shadow: 0px 5px 0px 0px var(--gray); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .team-card ul li a i:hover { color: var(--white); background: var(--primary); box-shadow: 0px 8px 18px 0px rgba(0,0,0,0.15) } @media (max-width: 575px) { .team-card { width: 290px; margin: 0px auto 50px } } .counter-card { display: flex; align-items: center; justify-content: center } .counter-image img { width: 60px; margin-left: 30px } .counter-content { text-align: right } .counter-content h2 { } .counter-content p { font-size: 18px; font-weight: 500; } @media (max-width: 767px) { .counter-card { margin-bottom: 60px } } .account-card { margin-bottom: 30px; padding: 0px 30px 30px; background: var(--white); border-radius: 8px } .account-title { padding: 18px 0px; margin-bottom: 25px; position: relative; display: flex; align-items: center; justify-content: center; justify-content: space-between; border-bottom: 1px solid var(--border) } .account-title::before { position: absolute; content: ""; bottom: -2px; right: 0px; width: 50px; height: 2px; background: var(--primary) } .account-title h3 { font-size: 20px } .account-title button,.account-title a { border: none; width: 55px; height: 30px; font-size: 14px; font-weight: 500; line-height: 30px; text-align: center; border-radius: 5px; color: var(--primary); background: var(--chalk); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .account-title button:hover,.account-title a:hover { color: var(--white); background: var(--primary); text-shadow: var(--primary-tshadow) } .account-card-list li { display: flex; align-items: center; justify-content: center; justify-content: space-between; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border) } .account-card-list li:last-child { padding-bottom: 0px; margin-bottom: 0px; border-bottom: none } .account-card-list li:hover h6 { color: var(--white); background: var(--primary) } .account-card-list li h5 { font-size: 16px; font-weight: 500 } .account-card-list li h6 { width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; color: var(--primary); background: var(--chalk) } .account-card-link li { margin-bottom: 8px } .account-card-link li:last-child { margin-bottom: 0px } .account-card-link li a { color: var(--gray) } .account-card-link li a:hover { color: var(--primary) } .account-card-link li a i { margin-left: 5px } .account-card-text { margin-right: 20px } .account-card-text li { list-style-type: disc; margin-bottom: 20px } .account-card-text li:last-child { margin-bottom: 0px } .account-card-form .form-group { margin-bottom: 20px } .account-card-form .form-group:last-child { margin-bottom: 0px } .account-card-form .form-group .btn { width: 100%; padding: 10px 30px } @media (max-width: 575px) { .account-card { padding: 0px 20px 20px } } .common-card { width: 100%; padding: 30px 30px; margin-bottom: 30px; border-radius: 8px; background: var(--white) } .card-header { padding: 0px; padding-bottom: 18px; margin-bottom: 25px; position: relative; background: transparent; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border) } .card-header::before { position: absolute; content: ""; bottom: -2px; right: 0px; width: 50px; height: 2px; background: var(--primary) } .card-title { font-weight: 600; margin-bottom: 0px; text-transform: uppercase } .card-btn { border: none; width: 55px; height: 30px; font-size: 14px; font-weight: 500; line-height: 30px; text-align: center; border-radius: 5px; color: var(--primary); background: var(--chalk); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .card-btn:hover { color: var(--white); background: var(--primary); text-shadow: var(--primary-tshadow) } @media (max-width: 575px) { .common-card { padding: 30px 25px } } .message-list { height: 400px; overflow-y: scroll } .message-item { border-top: 1px solid var(--border); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .message-item:hover { background: var(--chalk) } .message-link { padding: 12px 15px; display: flex; align-items: center; justify-content: flex-start; position: relative } .message-img { border-radius: 50%; margin-left: 12px; border: 2px solid var(--primary); position: relative } .message-img::before { position: absolute; content: ""; bottom: 0px; left: 0px; width: 15px; height: 15px; border-radius: 50%; background: #aaaaaa; border: 2px solid var(--white) } .message-img img { width: 50px; height: 50px; border-radius: 50%; border: 2px solid transparent } .message-img.active::before { background: var(--green) } .message-text h6 { margin-bottom: 5px; } .message-text h6 span { font-size: 400; font-size: 12px; color: var(--gray); padding-left: 5px; margin-left: 5px; white-space: nowrap; position: relative } .message-text h6 span::before { position: absolute; content: ""; top: 50%; left: 0px; width: 3px; height: 3px; border-radius: 50%; background: var(--gray); transform: translate(-50%, -50%) } .message-text p { font-size: 14px; line-height: 20px; color: var(--text) } .message-text p span { font-weight: 500; margin-left: 3px; } .message-count { font-size: 12px; padding: 0px 6px; line-height: 20px; border-radius: 30px; color: var(--white); background: var(--primary); position: absolute; top: 50%; left: 15px; transform: translateY(-50%) } .message-item.unread { border-radius: 8px; background: #e6f1f9 } .message-item.unread .message-text p { font-weight: 500; color: var(--heading) } .notify-list { height: 400px; overflow-y: scroll } .notify-item { position: relative; border-top: 1px solid var(--border); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .notify-item:hover { background: var(--chalk) } .notify-item.active { background: #e6f1f9 } .notify-link { padding: 12px 15px; display: flex; align-items: flex-start; justify-content: flex-start } .notify-img { border-radius: 50%; margin-left: 12px; border: 2px solid var(--primary) } .notify-img img { width: 50px; height: 50px; border-radius: 50%; border: 2px solid transparent } .notify-text { font-size: 15px; line-height: 20px; color: var(--text) } .notify-text span { font-weight: 500; } .notify-time { font-size: 13px; line-height: 20px; color: var(--primary) } .review-list { margin-bottom: 50px } .review-item { padding: 30px 45px; background: var(--chalk); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 25px } .review-item:last-child { margin-bottom: 0px } .review-author { padding-top: 25px; margin: 25px 50px 0px 0px; border-top: 1px solid var(--border) } .review-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px } .review-profile { display: flex; align-items: center; justify-content: flex-start } .review-avatar { margin-left: 15px; border-radius: 50%; border: 2px solid var(--primary) } .review-avatar img { width: 60px; border-radius: 50%; border: 2px solid var(--white) } .review-meta h6 { font-weight: 500; margin-bottom: 8px; color: var(--primary); } .review-meta h6 a { color: var(--heading) } .review-meta h6 a:hover { color: var(--primary) } .review-meta h6 span { font-size: 14px; font-weight: 400; color: var(--text); white-space: nowrap } .review-meta ul li { display: inline-block; margin-left: 3px } .review-meta ul li i { font-size: 14px; color: #bbbbbb } .review-meta ul li .active { color: #ffcc23 } .review-meta ul li h5 { font-size: 16px; font-weight: 600; } .review-widget { position: relative } .review-dots-btn i { width: 30px; height: 30px; font-size: 12px; line-height: 30px; text-align: center; border-radius: 50%; background: var(--white); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .review-dots-btn i:hover { color: var(--white); background: var(--primary) } .review-widget-list { position: absolute; top: 35px; left: 0px; width: 100px; padding: 10px 10px; background: var(--white); border-radius: 8px; box-shadow: var(--primary-bshadow); display: none } .review-widget-list li a { font-size: 13px; color: var(--gray); padding-right: 8px; display: block } .review-widget-list li a i { margin-left: 5px } .review-widget-list li a:hover { background: var(--chalk) } .review-widget-list.active { display: block } .review-reply { display: flex; align-items: flex-start; justify-content: flex-start; margin-top: 30px } .review-reply input { height: 35px; border-bottom: none; border-radius: 3px; background: var(--white); border: 1px solid #dddddd } .review-reply input:focus { background: var(--white); border-color: var(--primary) } .review-reply button { border: none; height: 35px; width: 115px; font-size: 14px; margin-right: 15px; border-radius: 3px; text-align: center; color: var(--white); background: var(--primary) } .review-reply button i { margin-left: 5px } .review-form-grid { display: grid; grid-gap: 20px; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto } .review-submit { width: 100%; padding: 12px 30px } @media (max-width: 575px) { .review-item { padding: 20px 20px } .review-author { padding-top: 15px; margin: 15px 0px 0px 30px } .review-profile { flex-direction: column; align-items: flex-start } .review-avatar { margin: 0px 0px 15px } .review-desc { font-size: 15px } } @media (min-width: 576px) and (max-width: 767px) { .review-form-grid { grid-gap: 0px; grid-template-columns: repeat(1, 1fr) } } .header-part { background: var(--white) } .header-part .container { padding: 18px 25px } .header-fixed { position: fixed; top: 0px; right: 0px; width: 100%; z-index: 3; background: var(--dark); box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.5); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .header-fixed .header-widget span { color: var(--chalk) } .header-fixed .header-widget sup { border-color: var(--dark) } .header-content { display: flex; align-items: center; justify-content: space-between } .header-list { display: flex; align-items: center; justify-content: center } .header-item { position: relative } .header-widget { position: relative; display: flex; align-items: center; justify-content: center } .header-widget img { width: 40px; height: 40px; border-radius: 50% } .header-widget i { width: 40px; height: 40px; font-size: 14px; line-height: 38px; border-radius: 50%; text-align: center; color: var(--text); background: var(--chalk); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .header-widget i:hover { color: var(--white); background: var(--primary); text-shadow: var(--primary-tshadow) } .header-widget span { font-weight: 500; margin-right: 8px; color: var(--text); white-space: nowrap; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .header-widget span:hover { color: var(--primary) } .header-widget sup { position: absolute; top: -8px; left: -8px; height: 24px; font-size: 12px; padding: 0px 6px; line-height: 20px; border-radius: 50%; color: var(--white); background: var(--primary); border: 2px solid var(--white); text-shadow: var(--primary-tshadow); box-shadow: var(--primary-bshadow); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .header-logo { margin: 0px 45px } .header-logo img { width: auto; height: 40px } .search-btn { display: none } .post-btn { width: 180px; padding: 12px 0px; margin-right: 20px } .header-left { display: flex; align-items: center; justify-content: flex-start } .header-right { display: flex; align-items: center; justify-content: flex-end } .header-right .header-item { margin-left: 20px } .header-form { width: 100%; margin: 0px 50px; position: relative } .header-search { border-radius: 8px; background: var(--chalk); display: flex; align-items: center; justify-content: center; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .header-search input { width: 100%; height: 45px; background: transparent } .header-search button i { width: 45px; height: 45px; line-height: 45px; text-align: center; color: var(--text); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .header-search button i:hover { color: var(--primary) } .header-search.active { border-radius: 8px 8px 0px 0px } .header-option { position: absolute; top: 45px; right: 0px; z-index: 2; width: 100%; display: none } .option-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-column-gap: 15px; grid-row-gap: 15px; padding: 15px 15px; border-radius: 0px 0px 8px 8px; background: var(--white); box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.08) } .option-grid input { width: 100%; height: 40px; padding: 0px 15px; border-radius: 6px; background: var(--chalk) } .option-grid button { grid-area: 3 / 1 / 4 / 3; font-size: 14px; font-weight: 500; padding: 5px 0px; border-radius: 6px; letter-spacing: 0.5px; color: var(--white); background: var(--primary); display: flex; align-items: center; justify-content: center } .option-grid button i { margin-left: 6px } @media (min-width: 1200px) { .header-part .container { max-width: 100% } } @media (max-width: 1199px) { .header-part .container { padding: 15px } .header-content { width: 100%; flex-direction: column; justify-content: center } .header-logo { margin: 0px } .header-user { display: none } .search-btn { display: block } .header-left { width: 100%; justify-content: space-between } .header-right { display: none } .header-form { margin-top: 15px; display: none } } #main-menu .navbar-item { border-bottom: 1px solid var(--border) } .navbar-link { font-size: 16px; font-weight: 400; padding: 12px 15px; color: var(--heading); display: flex; align-items: center; justify-content: center; justify-content: space-between; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .navbar-link:hover { color: var(--primary); background: var(--chalk) } .navbar-link i { font-size: 10px } .sidebar-part { position: fixed; right: 0px; top: 0px; width: 100%; height: 100vh; background: rgba(0,0,0,0.7); z-index: 3; visibility: hidden; opacity: 0; transition: all linear .2s } .sidebar-body { position: fixed; right: -300px; top: 0px; width: 300px; height: 100vh; background: #fbfbfb; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .sidebar-part.active { visibility: visible; opacity: 1 } .sidebar-part.active .sidebar-body { right: 0px } .sidebar-header { padding: 18px 15px; display: flex; align-items: center; justify-content: center; justify-content: space-between; border-bottom: 1px solid var(--border) } .sidebar-logo img { width: auto; height: 40px } .sidebar-cross { border: none; outline: none; background: none } .sidebar-cross i { font-size: 16px; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; color: var(--gray); text-shadow: var(--primary-tshadow); box-shadow: 0px 3px 10px 1px rgba(0,0,0,0.1) } .sidebar-cross i:hover { color: var(--white); background: var(--primary) } .sidebar-content { overflow-y: scroll; height: 100vh } .sidebar-profile { text-align: center; padding: 18px 0px } .sidebar-avatar { border-radius: 50%; border: 3px solid var(--primary); margin-bottom: 10px } .sidebar-avatar img { width: 120px; border-radius: 50%; border: 3px solid var(--border) } .sidebar-name { color: var(--heading); margin-bottom: 10px } .sidebar-post { font-size: 12px; padding: 8px 18px } .sidebar-menu { margin-bottom: 30px } .sidebar-menu .nav-tabs li .nav-link { font-size: 12px; padding: 8px 0px } .sidebar-menu .tab-pane { padding: 0px } .sidebar-footer { padding-bottom: 120px; text-align: justify; font-size:12px; padding-left:20px; padding-right:20px; } .sidebar-footer p { font-size: 14px; color: var(--heading) } .sidebar-footer p a { color: var(--primary) } .sidebar-footer p a:hover { text-decoration: underline } @media (max-width: 1199px) { .sidebar-footer { padding-bottom: 160px } } @media (max-width: 575px) { .sidebar-part.active { visibility: visible; opacity: 1 } .sidebar-part.active .sidebar-body { left: 0px; width: 100% } } .mobile-nav { position: fixed; bottom: 0px; right: 0px; width: 100%; z-index: 3; background: var(--white); border-radius: 10px 10px 0px 0px; box-shadow: 0px -5px 15px 0px rgba(0,0,0,0.1); display: none } .mobile-group { display: flex; align-items: center; justify-content: space-between } .mobile-widget { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 80px; padding: 8px 0px; border-radius: 8px; position: relative } .mobile-widget:hover { background: var(--chalk) } .mobile-widget:hover i { color: var(--primary) } .mobile-widget:hover span { color: var(--primary) } .mobile-widget i { font-size: 15px; margin-bottom: 5px; color: var(--text); text-shadow: 2px 3px 8px rgba(0,0,0,0.1) } .mobile-widget span { font-size: 10px; line-height: 12px; color: var(--text); text-transform: uppercase } .mobile-widget sup { position: absolute; top: -5px; right: 70%; font-size: 12px; padding: 0px 6px; line-height: 20px; border-radius: 50%; transform: translateX(50%); color: var(--white); background: var(--primary); border: 2px solid var(--green-chalk); text-shadow: var(--primary-tshadow) } .plus-btn { margin-top: -35px } .plus-btn i { width: 60px; height: 60px; font-size: 16px; line-height: 42px; border-radius: 50%; margin-bottom: 0px; text-align: center; color: var(--white); background: var(--primary); border: 8px solid var(--white) } .plus-btn:hover { background: transparent } .plus-btn:hover i { color: var(--white) } @media (max-width: 1199px) { .mobile-nav { display: block } } .header-filter { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px } .filter-short { width: 220px; display: flex; align-items: center; justify-content: center } .filter-show { width: 120px; display: flex; align-items: center; justify-content: center } .filter-label { font-size: 14px; font-weight: 500; margin-left: 8px; white-space: nowrap; text-transform: uppercase } .filter-select { height: 40px; font-size: 14px; border-radius: 3px; padding: .375rem .75rem .375rem 1.75rem; cursor: pointer; background: none } .filter-select:focus { border-color: #ced4da; box-shadow: none } .filter-action { display: flex; align-items: center; justify-content: flex-end } .filter-action a i { width: 40px; height: 40px; font-size: 15px; line-height: 40px; border-radius: 50%; text-align: center; color: var(--text); background: var(--white) } .filter-action a i:hover { color: var(--primary) } .filter-action .active i { color: var(--white); background: var(--primary) } .filter-action .active i:hover { color: var(--white) } @media (max-width: 575px) { .filter-label,.filter-action { display: none } .filter-show { width: 80px } .filter-short { width: 130px } } .product-widget { padding: 20px 15px 15px; border-radius: 6px; margin-bottom: 30px; background: var(--chalk); border: 1px solid var(--border) } .product-widget-title { font-weight: 500; padding-bottom: 15px; border-bottom: 1px solid var(--border) } .product-widget-group { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(1, 1fr); grid-column-gap: 10px; grid-row-gap: 10px; margin: 15px 0px } .product-widget-group input { width: 100%; height: 40px; padding: 0px 10px; border-radius: 6px; background: var(--white); font-size:12px!important; } .product-widget-btn { width: 100%; height: 40px; font-size: 14px; font-weight: 500; padding: 12px 0px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--primary); background: var(--white); border: 1px solid var(--primary); text-shadow: 2px 3px 8px rgba(0,0,0,0.1); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .product-widget-btn:hover { color: var(--white); background: var(--primary) } .product-widget-btn i { margin-top: -2px; margin-left: 6px } .product-widget-list { margin: 10px 0px } .product-widget-item { margin: 12px 0px; display: flex; align-items: center; justify-content: flex-start } .product-widget-checkbox { line-height: 0px } .product-widget-checkbox input { width: 15px; height: 15px; margin-left: 15px; cursor: pointer } .product-widget-label { width: 100%; cursor: pointer; display: flex; align-items: center; justify-content: space-between } .product-widget-label:hover .product-widget-number { color: var(--primary) } .product-widget-label:hover .product-widget-text { color: var(--primary) } .product-widget-type { font-size: 14px; padding: 0px 10px; line-height: 26px; border-radius: 4px; text-align: center; display: inline-block; } .product-widget-number { font-size: 15px } .product-widget-star i { font-size: 14px; margin-left: 3px; color: var(--yellow) } .product-widget-search input { width: 100%; height: 40px; padding: 0px 15px; border-radius: 6px; background: var(--white); border: 1px solid var(--border) } .product-widget-text { font-size: 15px; } .product-widget-scroll { height: 242px; padding-left: 8px; overflow-y: scroll; overflow-x: hidden } .product-widget-dropitem { margin: 15px 0px } .product-widget-link { width: 100%; font-size: 15px; color: var(--text); text-align: right; position: relative } .product-widget-link:hover { color: var(--primary) } .product-widget-link::before { position: absolute; content: "\f053"; font-size: 12px; font-weight: 900; font-family: "Font Awesome 5 Free"; top: 50%; left: 0px; transform: translateY(-50%) rotate(0deg); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .product-widget-link i { font-size: 12px; margin-left: 5px } .product-widget-link.active { color: var(--primary) } .product-widget-link.active::before { transform: translateY(-50%) rotate(-90deg) } .product-widget-dropdown { padding: 10px; margin: 8px 10px; border-radius: 6px; background: var(--white); display: none } .product-widget-dropdown li a { width: 100%; font-size: 14px; line-height: 18px; border-radius: 6px; padding: 8px 15px; color: var(--text); background: var(--white); white-space: nowrap; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .product-widget-dropdown li a:hover { color: var(--primary); background: var(--chalk) } .footer-pagection { padding-top: 30px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between } .page-info { font-weight: 500; color: var(--gray) } @media (max-width: 575px) { .footer-pagection { margin-bottom: 30px; flex-direction: column } .page-info { margin-bottom: 15px } } @media (min-width: 576px) and (max-width: 991px) { .footer-pagection { margin-bottom: 30px } } .blog-sidebar { padding: 25px 15px; margin-bottom: 30px; background: var(--chalk); border-radius: 8px; border: 1px solid var(--border) } .blog-sidebar-title { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--border) } .blog-sidebar-title h5 { font-weight: 700; text-transform: uppercase } .blog-src { position: relative } .blog-src input { width: 100%; height: 52px; border-radius: 50px; padding: 0px 60px 0px 20px; border: 2px solid var(--primary) } .blog-src button { border: none; outline: none; background: none; position: absolute; top: 6px; left: 6px } .blog-src button i { width: 40px; height: 40px; font-size: 14px; line-height: 40px; text-align: center; border-radius: 50%; color: var(--white); background: var(--primary); text-shadow: 2px 3px 8px rgba(0,0,0,0.1) } .blog-suggest li { display: flex; align-items: flex-start; justify-content: flex-start; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid var(--border) } .blog-suggest li:last-child { padding-bottom: 0px; margin-bottom: 0px; border-bottom: none } .suggest-img { margin-left: 15px } .suggest-img a img { width: 100px; border-radius: 8px } .suggest-title { margin-bottom: 20px } .suggest-title h4 { font-size: 18px; line-height: 26px } .suggest-title h4 a { color: var(--heading); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .suggest-title h4 a:hover { color: var(--primary) } .suggest-meta { display: flex; align-items: center; justify-content: center; justify-content: flex-start } .suggest-date { margin-left: 30px } .suggest-date,.suggest-comment { display: flex; align-items: center; justify-content: center; justify-content: flex-start } .suggest-date i,.suggest-comment i { font-size: 16px; margin-left: 8px; margin-top: -1px } .suggest-date p,.suggest-comment p { font-size: 15px; line-height: 18px; } .blog-cate { display: block } .blog-cate li { display: flex; align-items: center; justify-content: center; justify-content: space-between; border-bottom: 1px solid var(--border); margin-bottom: 12px; padding-bottom: 12px } .blog-cate li:hover h5 a { color: var(--primary) } .blog-cate li:hover p { color: var(--white); background: var(--primary) } .blog-cate li h5 { font-weight: 500 } .blog-cate li h5 a { color: var(--gray); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .blog-cate li h5 a:hover { text-decoration: underline } .blog-cate li p { font-size: 14px; font-weight: 500; width: 35px; height: 35px; line-height: 37px; text-align: center; border-radius: 50%; color: var(--primary); background: var(--white); text-shadow: 2px 3px 8px rgba(0,0,0,0.1) } .blog-tag li { display: inline-block; margin: 0px 0px 12px 8px } .blog-tag li a { color: var(--gray); font-size: 14px; padding: 2px 15px; border-radius: 30px; border: 1px solid var(--border) } .blog-tag li a:hover { color: var(--white); background: var(--primary) } .blog-icon li { display: inline-block; margin-left: 12px } .blog-icon li a i { width: 37px; height: 37px; font-size: 14px; line-height: 38px; text-align: center; border-radius: 50%; color: var(--primary); background: var(--white); text-shadow: 2px 3px 8px rgba(0,0,0,0.1) } .blog-icon li a i:hover { color: var(--white); background: var(--primary) } @media (max-width: 400px) { .suggest-meta { align-items: flex-start; flex-direction: column } .suggest-date { margin-bottom: 12px } .blog-icon li { margin: 6px } } @media (min-width: 992px) and (max-width: 1199px) { .suggest-meta { align-items: flex-start; flex-direction: column } .suggest-date { margin-bottom: 12px } .blog-icon li { margin: 6px } } .newsletter { margin-bottom: 70px } .news-content h2 { margin-bottom: 15px; color: var(--chalk) } .news-form { position: relative; margin-top: 23px } .news-form input { width: 100%; height: 60px; border: none; outline: none; padding: 0px 20px 0px 200px; border-radius: 8px; background: var(--white); box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.15) } .news-form .btn { position: absolute; top: 5px; left: 5px; height: 50px; padding: 10px 30px } @media (max-width: 991px) { .newsletter { margin-bottom: 60px } .news-content { margin: 0px 0px 30px } .news-form { margin: 0px } } @media (max-width: 575px) { .news-form input { padding: 0px 20px 0px 75px } .news-form .btn { padding: 10px 20px } .news-form .btn i { margin-left: 0px } .news-form .btn span { display: none } } .footer-part { background: #a64475; padding: 100px 0px 0px; color: #FFF; } .footer-content h3 { color: #FFF; font-weight: 500; padding-bottom: 15px; margin-bottom: 25px; border-bottom: 1px solid #333333; position: relative } .footer-content a{ color: #F1F1F1!important; } .footer-content h3::before { position: absolute; content: ""; bottom: -1px; right: 0px; width: 60px; height: 2px; background: var(--primary) } .footer-address li { display: flex; align-items: flex-start; justify-content: flex-start; margin-bottom: 21px } .footer-address li:last-child { margin-bottom: 0px } .footer-address li i { font-size: 20px; margin: 6px 0px 0px 20px } .footer-address li p span { display: block; line-height: 30px } .recomend-part{ padding-bottom:30px; } .footer-widget li { margin-bottom: 5px } .footer-widget li:last-child { margin-bottom: 0px } .footer-widget li a { color: var(--gray); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .footer-widget li a:hover { color: var(--chalk); text-decoration: underline } .footer-info a { margin-bottom: 30px } .footer-info a img { width: auto; height: 50px } .footer-count li { margin-bottom: 10px } .footer-count li:last-child { margin-bottom: 0px } .footer-count li h5 { margin-bottom: 3px; color: var(--chalk) } .footer-card-content { padding: 50px 0px; margin-top: 55px; display: flex; align-items: center; justify-content: center; justify-content: space-evenly; border-top: 1px solid #333333 } .footer-payment a,.footer-payment button,.footer-option a,.footer-option button,.footer-app a,.footer-app button { margin: 0px 5px } .footer-payment a img,.footer-app a img { width: auto; height: 38px } .footer-option button { border: none; outline: none; background: none; margin: 0px 8px; width: 120px; padding: 5px 0px; border-radius: 8px; color: var(--gray); border: 1px solid var(--gray); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .footer-option button:hover { color: var(--chalk); border: 1px solid var(--chalk) } .footer-option button i { margin-left: 8px } .footer-end { background: #290633 } .footer-end-content { padding: 15px 0px; display: flex; align-items: center; justify-content: center; justify-content: space-between; font-size:12px; color:#FFF; } .footer-end-content p a { color: var(--primary) } .footer-end-content p a:hover { text-decoration: underline } .footer-social li { display: inline-block; margin: 5px } .footer-social li a i { width: 40px; height: 40px; font-size: 16px; line-height: 40px; text-align: center; border-radius: 50%; color: var(--gray); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .footer-social li a i:hover { color: var(--white); background: var(--primary) } @media (max-width: 991px) { .footer-content { margin-bottom: 30px } .footer-end-content { padding: 25px 0px; flex-direction: column; text-align: center } .footer-end-content p { margin-bottom: 10px } } @media (max-width: 575px) { .footer-part { padding: 60px 0px 60px } .footer-content,.footer-info { margin-right: 30px } .footer-card-content { flex-direction: column } .footer-payment,.footer-option { margin-bottom: 30px } } @media (min-width: 576px) and (max-width: 767px) { .footer-part { padding: 80px 0px 60px } .footer-card-content { margin-top: 20px } .footer-payment a,.footer-payment button,.footer-option a,.footer-option button,.footer-app a,.footer-app button { margin: 5px } } @media (min-width: 768px) and (max-width: 991px) { .footer-part { padding: 90px 0px 60px } .footer-card-content { margin-top: 20px } .footer-payment,.footer-option,.footer-app { text-align: center } .footer-payment a,.footer-payment button,.footer-option a,.footer-option button,.footer-app a,.footer-app button { margin: 5px } } @media (min-width: 992px) and (max-width: 1199px) { .footer-part { padding-bottom: 60px } } .single-banner { background: url(../../images/bg/01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; padding: 30px 0px; position: relative; z-index: 1 } .single-banner::before { position: absolute; content: ""; top: 0px; right: 0px; width: 100%; height: 100%; background: linear-gradient(rgba(134, 4, 138, 0.65), rgba(112, 5, 90, 0.65)); z-index: -1 } .single-content { text-align: center } .single-content h2 { color: var(--white); margin-bottom: 3px; font-size:22px; text-align:right; } .single-content .breadcrumb { justify-content: center } @media (max-width: 767px) { .single-banner { padding: 20px 0px } } .dashboard-banner { padding: 100px 0px 200px } .dash-header-part { margin-top: 20px; position: relative; z-index: 1; background: #F1F1F1; border-radius: 10px; margin-bottom:20px; } .dash-header-card { padding: 30px 30px 0px 30px; } .dash-header-left { display: flex; align-items: center; justify-content: center; justify-content: flex-start } .dash-header-right { display: flex; align-items: center; justify-content: center } .dash-avatar { margin-left: 30px } .dash-avatar a { border-radius: 50%; border: 3px solid var(--primary) } .dash-avatar a img { width: 140px; border-radius: 50%; border: 3px solid var(--white) } .dash-intro h4 a { color: var(--heading); } .dash-intro h5 { font-size: 14px; line-height: 22px; color: var(--gray); margin-bottom: 8px } .dash-meta li { display: flex; align-items: flex-start; justify-content: flex-start; margin-bottom: 3px } .dash-meta li:last-child { margin-bottom: 0px } .dash-meta li i { font-size: 14px; margin-top: 5px; margin-left: 10px; color: var(--primary) } .dash-meta li span { font-size: 14px; line-height: 22px } .dash-focus { width: 100%; padding: 25px 0px; text-align: center; margin-right: 20px; border-radius: 8px; background: url(../../images/bg/04.png); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; z-index: 1 } .dash-focus::before { position: absolute; content: ""; top: 0px; right: 0px; width: 100%; height: 100%; border-radius: 8px; background: var(--primary); opacity: 0.8; z-index: -1 } .dash-focus:last-child { margin-left: 0px } .dash-focus h2 { color: var(--white); } .dash-focus p { color: var(--white); } .dash-list::before { background: #df1313 } .dash-book::before { background: #00af1e } .dash-rev::before { background: #d0a300 } .dash-header-alert { margin: 0px; margin-top: 30px; padding: 15px 25px; border-radius: 3px; background: var(--white); box-shadow: var(--primary-bshadow); border-right: 3px solid var(--primary); display: flex; align-items: flex-start; justify-content: flex-start; justify-content: space-between } .dash-header-alert button { border: none; outline: none; background: none; margin-right: 100px } .dash-header-alert button i { width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 3px; display: inline-block; color: var(--primary); background: var(--chalk); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .dash-header-alert button i:hover { color: var(--white); background: var(--primary) } .dash-menu-list { margin-top: 30px; border-top-left-radius: 7px; border-top-right-radius: 7px; overflow: hidden; } .dash-menu-list ul { display: flex; align-items: center; justify-content: center; justify-content: space-between } .dash-menu-list ul li { width: 100% } .dash-menu-list ul li a { width: 100%; font-size: 14px; font-weight: 500; text-align: center; padding: 12px 0px; color: var(--heading); background: var(--white); border-bottom: 2px solid var(--white) } .dash-menu-list ul li .active { color: var(--primary); text-shadow: var(--primary-tshadow); border-bottom: 2px solid var(--primary) } @media (max-width: 991px) { .dash-menu-list { overflow-x: scroll } .dash-menu-list ul { width: 900px } } @media (max-width: 575px) { .single-banner { padding: 60px 0px 160px } .dash-header-card { padding: 20px 20px 0px 20px } .dash-header-left { flex-direction: column; align-items: flex-start } .dash-avatar { margin-left: 0px; margin-bottom: 5px } .dash-intro h5 { margin-bottom: 12px } .dash-meta { margin-bottom: 25px } .dash-header-right { flex-direction: column } .dash-focus { margin-bottom: 20px; margin-left: 0px } .dash-focus:last-child { margin-bottom: 0px } .dash-header-alert button { margin-right: 0px } } @media (min-width: 576px) and (max-width: 767px) { .dash-header-right { margin-top: 30px } .dash-focus h2 { font-size: 32px } } @media (min-width: 768px) and (max-width: 991px) { .single-banner { padding: 80px 0px 180px } .dash-header-right { margin-top: 30px } } @media (min-width: 992px) and (max-width: 1199px) { .dash-avatar { margin-left: 25px } .dash-avatar a img { width: 120px } } .userlogin{ position:absolute; width:100%; height:100%; left:0; right:0; bottom:0; top:0; background:#f6f7f9; } .boxlogin{ position:absolute; width:320px; margin:auto; height:auto; top:10vh; left:50%; right:auto; background:#FFF; text-align:center; box-shadow:0px 0px 20px -10px #000; padding:10px; overflow-y:auto; font-size:12px; border-radius:5px; margin-left:-160px; } .boxlogin .body-login{ width: 90%; margin:auto; } .boxlogin .footer-login{ width: 100%; padding:30px; line-height:150%!important; } .boxlogin img{ margin: 30px auto 30px; max-width:300px; } .boxlogin h3 { font-weight: bold !important; font-size: 17px; text-align: right; color: #000000; } .boxlogin h4 { margin-bottom: 57px; text-align: right !important; color: #000; margin: 10px 0; font-size: 12px; line-height: 1.7; } .boxlogin h5 { margin-bottom: 57px; text-align: cetner !important; color: #000; margin: 10px 0; font-size: 11px; line-height: 1.7; color:red; } .dir-ltr{ direction:ltr!important; } .dir-ltr .col-1{ width: 10%!important; padding:5px; } .dir-ltr .col-1 .mb-3{ width: 100%!important; } .dir-ltr .col-1 .mb-3 .form-control-lg,.dir-ltr .col-2 .mb-3 .form-control-lg{ width: 100%!important; padding:0px; } table,.table-responsive{ width: 100%!important; float:right; clear:both; border-radius: 7px; overflow:hidden; border:1px solid #EFEFEF; } table.info td,table.info th{ padding:10px; } table.info tr{ border-bottom:1px solid #EFEFEF; } table.info th{ border-left:1px solid #EFEFEF; background:rgba(0,0,0,0.01); } .alert{ width:100%; float:right; clear:both; } @media(max-width:768px){ table td{ float:right; width:100%; } .input-group{ width:100%!important; } .js-stools-container-filters .js-stools-field-filter{ width:49%!important; margin:0; margin-bottom:5px; float:right; } .ordering-select,.filter-search-bar.btn-group,.filter-search-actions.btn-group{ width:100%; margin-bottom:5px; } } .js-stools-container-bar{ background-color: var(--vz-header-bg); box-shadow: 0 1px 2px rgba(56,65,74,.15); padding:10px; margin-bottom:10px; width: 100%!important; float:right; } .btn-toolbar{ display:block!important; } .ordering-select{ float:left; } .ordering-select > *{ width:48%; float:left; margin-left:2%; } .js-stools-container-filters{ background-color: var(--vz-header-bg); box-shadow: 0 1px 2px rgba(56,65,74,.15); padding:10px; margin-bottom:10px; display:none; } .js-stools-container-filters .js-stools-field-filter{ float:right; width:15.6666666%; margin-left:1%; height:40px; } .js-stools-container-filters-visible{ display:block; } .paper-cover{ width:700px!important; max-width:700px; float:none!important; height:1150px; display:block; margin:auto; border:1px solid #CCC; position:relative; background-size:100% 100%!important; overflow:hidden; } .sarbarg{ width:700px; height:1150px; display:block; position:absolute; z-index:0; } joomla-tab[view="accordion"] joomla-tab-element[active]{ overflow:hidden!important; } .paper-text{ position:absolute; top:250px; font-size:16px; left:70px; right:70px; width:500px; text-align:justify; z-index:1; } .paper-date{ position:absolute; right:400px; top:115px; font-size:12px; z-index:1; } .paper-number{ position:absolute; right:400px; top:143px; font-size:12px; z-index:1; } .paper-attachement{ position:absolute; right:400px; top:168px; font-size:12px; z-index:1; } .paper-owner{ position:absolute; bottom:270px; left:0; z-index:2; direction:ltr; } .paper-redirect{ position:absolute; bottom:240px; right:65px; z-index:2; } .paper-actions{ position:absolute; bottom:160px; right:65px; z-index:2; } .paper-writer{ position:absolute; bottom:120px; right:65px; z-index:2; } .main-content .validate.btn.btn-primary,.main-content .btn.btn-danger,.main-content .btn.btn-outline-primary{ width:125px!important; max-width:30.63333%!important; float:right; margin-left:2px!important; } .page-content{ width:100%!important; float:right; overflow:hidden; position:relative; } .rounded-3{ border-radius:10px!important; } .border-left{ border-left:1px solid rgba(0,0,0,0.1); } .note{ min-height:200px; } .container-fluid a.btn{ display:inline-block; margin-left:1px!important; width:auto; } @media(max-width:768px){ .action-nav{ width:100%; } .action-nav button,.container-fluid a.btn{ width:30.63333%!important; margin-left:2%; margin-bottom:2%!important; } h2{ font-size:16px; font-weight:bold; } } @media print { #printarea,.modal-body{ padding:0px; margin:0px; width:105%!important; display:block; top:0px; margin-top:-3%; margin-left:-3%; margin-right:-3%; margin-bottom:-3%; } button.btn-close,.modal-footer{ display:none!important; } .paper-date{ position:absolute; right:470px; top:115px; font-size:12px; } .paper-number{ position:absolute; right:470px; top:143px; font-size:12px; } .paper-attachement{ position:absolute; right:470px; top:168px; font-size:12px; } .paper-owner{ position:absolute; bottom:200px; left:100px; } } @media screen2 { html body { opacity:0!important; width:0px!important; max-width:0px!important; min-width:0px!important; height:0px!important; position:static!important; padding:0px!important; margin:0px!important; position:absolute!important; z-index:-1; overflow:hidden; border:1px solid #000; } html body #paper-cover{ opacity:1!important; width:100%!important; max-width:100%!important; min-width:100%!important; height:100%!important; position:fixed!important; z-index:99999999!important; left:0; right:0; top:0; bottom:0; } } .attchlink{ width:99%; float:right; margin:0.5%; } .delete-btn { position: absolute !important; left: 5px; top: 10px; z-index: 5; cursor: pointer; } .attchlink img{ float:right; } .attchlink span{ white-space:pre-line; } #form-access .control-group{ background:rgba(0,0,0,0.02); padding:10px; border-radius:10px; margin-bottom:10px; } #form-access .form-check.form-check-inline{ background:rgba(0,0,0,0.02); padding:10px; border-radius:10px; margin-bottom:10px; width:12.75%; } #form-access .form-check .form-check-input{ margin-right:0!important; margin-left:10px; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } body.contentpane{ background:#FFFFFF; padding: 0px; margin:0px; } @media print { body { padding: 0px; margin:0px; } } body.contentpane,.paper-a4-cover{ font-family: 'B Nazanin'!important; width:810px; max-width:100%; height:1120px; background:#FFF; margin:auto; position:relative; text-align:right; direction:rtl; float:right; overflow:hidden; } .paper-a4-cover *,.paper-cover *{ font-family: 'B Nazanin'!important; } .paper-a4-date,.paper-a4-number,.paper-a4-attachement,.paper-a4-text{ position:absolute; } img.paper-a4-sarbarg{ width:810px; height:100%; left:0; right:0; top:0; bottom:0; } .paper-a4-date{ right:460px; top:110px; font-size:13px; } .paper-a4-number{ right:460px; top:135px; font-size:13px; } .paper-a4-attachement{ right:460px; top:160px; font-size:13px; } .paper-a4-text{ width:610px; right:100px; top:250px; text-align:justify; } .paper-a4-text h4{ margin-bottom:20px; } .paper-a4-text .text{ margin-bottom:0px; width:100%; float:right; font-size:12pt; } .watermark{ position: absolute; bottom:13px; right:74px; width:100%; font-size:13px; color:#999; } .paper-a4-owner{ width:640px; position: absolute; bottom:340px; left:60px; text-align: left; } .paper-a4-owner > div{ width:160px; display: inline-block; text-align:center; } .paper-a4-owner img{ width:100%; } .paper-a4-redirect{ position:absolute; bottom:240px; right:65px; z-index:2; } .paper-a4-actions{ position:absolute; bottom:200px; left:0px; z-index:2; } .paper-a4-actions > div { width: 260px; display: inline-block; text-align: center; } .paper-a4-actions *{ font-style: italic!important; } .paper-a4-writer{ position:absolute; bottom:120px; right:65px; z-index:2; } .paper-a4-approve{ position:absolute; bottom:150px; right:65px; z-index:2; } #message-typer{ min-height:100px; overflow-y:auto; border:1px solid #CCC; background:rgba(0,0,0,0.02); border-radius:6px; padding:10px; margin-top:10px; margin-bottom:10px; } #help-type{ list-style:none; padding:0; margin:0; } #help-type li{ border:1px solid #CCC; background:rgba(255,0,0,0.02); border-radius:6px; padding:10px; margin-top:10px; margin-bottom:10px; } .zoom { border-radius: 5px; } .magnifying > body { overflow-x: hidden; } .magnify { position: relative; display: inline-block; } .magnify-lens{ transform: scale(1.5); } .magnify .magnify-lens { /* Create the magnifying lens */ position: absolute; width: 200px; height: 200px; border-radius: 100%; /* Multiple box shadows to achieve the glass lens effect */ -webkit-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25); box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25); /* Hide the mouse pointer */ cursor: none; /* Hide the lens by default */ display: none; /* Place the lens on top of other elements */ z-index: 100; } .magnify .magnify-lens.loading { background: #333; opacity: 0.75; } .magnify .magnify-lens.loading:after { /* Loading text */ position: absolute; top: 45%; left: 0; width: 100%; color: #fff; content: 'Loading...'; font: italic normal 16px/1 Calibri, sans-serif; text-align: center; text-shadow: 0 0 2px rgba(51, 51, 51, 0.8); text-transform: none; } body .wrapper { text-align: center; } body .iframe { width: 100%; height: 600px; display: block; } .contentpane{ padding:0px; margin:0px; } .js-calendar.open{ max-width:260px!important; } joomla-tab { display:flex; flex-direction:column; float: right; width: 100%; } .lock-page{ position:fixed; width:100%; height:100%; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.9); z-index:999999999; } #clock{ position:absolute; left:50%; top:50%; width:300px; height:100px; margin-left:-150px; margin-top:-50px; color:#FFF; font-size:32px; text-align:center; z-index:1; direction:ltr; font-family:Arial; } #clock:before { font-family:'FontAwesome'; content:"\f023"; display:block; margin:auto; font-size:100px; color:#FFF; margin-bottom:-40px; } .js-stools-field-list select{ max-width: 60%; font-size: 12px!important; background:#FFF; border:1px solid #CCC; padding: 4px; border-radius:5px; } .login-widget{ display:inline-block; margin:1%; padding: 5px; background: #993266; border-radius: 5px; color:#FFF; width:17%; }