@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@font-face{
    font-family:"uicons-regular-straight";
    src:url("fonts/uicons-regular-straight.eot#iefix") format("embedded-opentype"),
    url("fonts/uicons-regular-straight.woff2") format("woff2"),
    url("fonts/uicons-regular-straight.woff") format("woff")
}

i[class^=fi-rs-],span[class^=fi-rs-]{line-height:0 !important}i[class^=fi-rs-]:before,i[class*=" fi-rs-"]:before,span[class^=fi-rs-]:before,span[class*=fi-rs-]:before{font-family:uicons-regular-straight !important;font-style:normal;font-weight:400 !important;font-variant:normal;text-transform:none;line-height:1 !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fi-rs-add:before{content:"\f101"}.fi-rs-alarm-clock:before{content:"\f102"}.fi-rs-align-center:before{content:"\f103"}.fi-rs-align-justify:before{content:"\f104"}.fi-rs-align-left:before{content:"\f105"}.fi-rs-align-right:before{content:"\f106"}.fi-rs-ambulance:before{content:"\f107"}.fi-rs-angle-double-left:before{content:"\f108"}.fi-rs-angle-double-right:before{content:"\f109"}.fi-rs-angle-double-small-left:before{content:"\f10a"}.fi-rs-angle-double-small-right:before{content:"\f10b"}.fi-rs-angle-down:before{content:"\f10c"}.fi-rs-angle-left:before{content:"\f10d"}.fi-rs-angle-right:before{content:"\f10e"}.fi-rs-angle-small-down:before{content:"\f10f"}.fi-rs-angle-small-left:before{content:"\f110"}.fi-rs-angle-small-right:before{content:"\f111"}.fi-rs-angle-small-up:before{content:"\f112"}.fi-rs-angle-up:before{content:"\f113"}.fi-rs-apps-add:before{content:"\f114"}.fi-rs-apps-delete:before{content:"\f115"}.fi-rs-apps-sort:before{content:"\f116"}.fi-rs-apps:before{content:"\f117"}.fi-rs-archive:before{content:"\f118"}.fi-rs-arrow-down:before{content:"\f119"}.fi-rs-arrow-left:before{content:"\f11a"}.fi-rs-arrow-right:before{content:"\f11b"}.fi-rs-arrow-small-down:before{content:"\f11c"}.fi-rs-arrow-small-left:before{content:"\f11d"}.fi-rs-arrow-small-right:before{content:"\f11e"}.fi-rs-arrow-small-up:before{content:"\f11f"}.fi-rs-arrow-up:before{content:"\f120"}.fi-rs-asterisk:before{content:"\f121"}.fi-rs-backpack:before{content:"\f122"}.fi-rs-badge:before{content:"\f123"}.fi-rs-ban:before{content:"\f124"}.fi-rs-band-aid:before{content:"\f125"}.fi-rs-bank:before{content:"\f126"}.fi-rs-barber-shop:before{content:"\f127"}.fi-rs-baseball:before{content:"\f128"}.fi-rs-basketball:before{content:"\f129"}.fi-rs-bell-ring:before{content:"\f12a"}.fi-rs-bell-school:before{content:"\f12b"}.fi-rs-bell:before{content:"\f12c"}.fi-rs-billiard:before{content:"\f12d"}.fi-rs-bold:before{content:"\f12e"}.fi-rs-book-alt:before{content:"\f12f"}.fi-rs-book:before{content:"\f130"}.fi-rs-bookmark:before{content:"\f131"}.fi-rs-bowling:before{content:"\f132"}.fi-rs-box-alt:before{content:"\f133"}.fi-rs-box:before{content:"\f134"}.fi-rs-briefcase:before{content:"\f135"}.fi-rs-broom:before{content:"\f136"}.fi-rs-browser:before{content:"\f137"}.fi-rs-brush:before{content:"\f138"}.fi-rs-bug:before{content:"\f139"}.fi-rs-building:before{content:"\f13a"}.fi-rs-bulb:before{content:"\f13b"}.fi-rs-calculator:before{content:"\f13c"}.fi-rs-calendar:before{content:"\f13d"}.fi-rs-camera:before{content:"\f13e"}.fi-rs-caret-down:before{content:"\f13f"}.fi-rs-caret-left:before{content:"\f140"}.fi-rs-caret-right:before{content:"\f141"}.fi-rs-caret-up:before{content:"\f142"}.fi-rs-check:before{content:"\f143"}.fi-rs-checkbox:before{content:"\f144"}.fi-rs-chess:before{content:"\f145"}.fi-rs-circle-small:before{content:"\f146"}.fi-rs-circle:before{content:"\f147"}.fi-rs-clip:before{content:"\f148"}.fi-rs-clock:before{content:"\f149"}.fi-rs-cloud-check:before{content:"\f14a"}.fi-rs-cloud-disabled:before{content:"\f14b"}.fi-rs-cloud-download:before{content:"\f14c"}.fi-rs-cloud-share:before{content:"\f14d"}.fi-rs-cloud-upload:before{content:"\f14e"}.fi-rs-cloud:before{content:"\f14f"}.fi-rs-comment-alt:before{content:"\f150"}.fi-rs-comment:before{content:"\f151"}.fi-rs-compress-alt:before{content:"\f152"}.fi-rs-compress:before{content:"\f153"}.fi-rs-computer:before{content:"\f154"}.fi-rs-cookie:before{content:"\f155"}.fi-rs-copy-alt:before{content:"\f156"}.fi-rs-copy:before{content:"\f157"}.fi-rs-copyright:before{content:"\f158"}.fi-rs-cream:before{content:"\f159"}.fi-rs-credit-card:before{content:"\f15a"}.fi-rs-cross-circle:before{content:"\f15b"}.fi-rs-cross-small:before{content:"\f15c"}.fi-rs-cross:before{content:"\f15d"}.fi-rs-crown:before{content:"\f15e"}.fi-rs-cursor-finger:before{content:"\f15f"}.fi-rs-cursor-plus:before{content:"\f160"}.fi-rs-cursor-text-alt:before{content:"\f161"}.fi-rs-cursor-text:before{content:"\f162"}.fi-rs-cursor:before{content:"\f163"}.fi-rs-dart:before{content:"\f164"}.fi-rs-dashboard:before{content:"\f165"}.fi-rs-data-transfer:before{content:"\f166"}.fi-rs-database:before{content:"\f167"}.fi-rs-delete:before{content:"\f168"}.fi-rs-diamond:before{content:"\f169"}.fi-rs-dice:before{content:"\f16a"}.fi-rs-diploma:before{content:"\f16b"}.fi-rs-disk:before{content:"\f16c"}.fi-rs-doctor:before{content:"\f16d"}.fi-rs-document-signed:before{content:"\f16e"}.fi-rs-document:before{content:"\f16f"}.fi-rs-dollar:before{content:"\f170"}.fi-rs-download:before{content:"\f171"}.fi-rs-duplicate:before{content:"\f172"}.fi-rs-e-learning:before{content:"\f173"}.fi-rs-earnings:before{content:"\f174"}.fi-rs-edit-alt:before{content:"\f175"}.fi-rs-edit:before{content:"\f176"}.fi-rs-envelope:before{content:"\f177"}.fi-rs-euro:before{content:"\f178"}.fi-rs-exclamation:before{content:"\f179"}.fi-rs-expand:before{content:"\f17a"}.fi-rs-eye-crossed:before{content:"\f17b"}.fi-rs-eye-dropper:before{content:"\f17c"}.fi-rs-eye:before{content:"\f17d"}.fi-rs-feather:before{content:"\f17e"}.fi-rs-file-add:before{content:"\f17f"}.fi-rs-file-ai:before{content:"\f180"}.fi-rs-file-check:before{content:"\f181"}.fi-rs-file-delete:before{content:"\f182"}.fi-rs-file-eps:before{content:"\f183"}.fi-rs-file-gif:before{content:"\f184"}.fi-rs-file-music:before{content:"\f185"}.fi-rs-file-psd:before{content:"\f186"}.fi-rs-file:before{content:"\f187"}.fi-rs-fill:before{content:"\f188"}.fi-rs-film:before{content:"\f189"}.fi-rs-filter:before{content:"\f18a"}.fi-rs-fingerprint:before{content:"\f18b"}.fi-rs-flag:before{content:"\f18c"}.fi-rs-flame:before{content:"\f18d"}.fi-rs-flip-horizontal:before{content:"\f18e"}.fi-rs-folder-add:before{content:"\f18f"}.fi-rs-folder:before{content:"\f190"}.fi-rs-following:before{content:"\f191"}.fi-rs-football:before{content:"\f192"}.fi-rs-form:before{content:"\f193"}.fi-rs-forward:before{content:"\f194"}.fi-rs-ftp:before{content:"\f195"}.fi-rs-gallery:before{content:"\f196"}.fi-rs-glasses:before{content:"\f197"}.fi-rs-globe-alt:before{content:"\f198"}.fi-rs-globe:before{content:"\f199"}.fi-rs-golf:before{content:"\f19a"}.fi-rs-graduation-cap:before{content:"\f19b"}.fi-rs-graphic-tablet:before{content:"\f19c"}.fi-rs-grid-alt:before{content:"\f19d"}.fi-rs-grid:before{content:"\f19e"}.fi-rs-gym:before{content:"\f19f"}.fi-rs-headphones:before{content:"\f1a0"}.fi-rs-headset:before{content:"\f1a1"}.fi-rs-heart:before{content:"\f1a2"}.fi-rs-home:before{content:"\f1a3"}.fi-rs-hourglass-end:before{content:"\f1a4"}.fi-rs-hourglass:before{content:"\f1a5"}.fi-rs-ice-skate:before{content:"\f1a6"}.fi-rs-id-badge:before{content:"\f1a7"}.fi-rs-inbox:before{content:"\f1a8"}.fi-rs-incognito:before{content:"\f1a9"}.fi-rs-indent:before{content:"\f1aa"}.fi-rs-infinity:before{content:"\f1ab"}.fi-rs-info:before{content:"\f1ac"}.fi-rs-interactive:before{content:"\f1ad"}.fi-rs-interlining:before{content:"\f1ae"}.fi-rs-interrogation:before{content:"\f1af"}.fi-rs-italic:before{content:"\f1b0"}.fi-rs-jpg:before{content:"\f1b1"}.fi-rs-key:before{content:"\f1b2"}.fi-rs-keyboard:before{content:"\f1b3"}.fi-rs-label:before{content:"\f1b4"}.fi-rs-laptop:before{content:"\f1b5"}.fi-rs-lasso:before{content:"\f1b6"}.fi-rs-layers:before{content:"\f1b7"}.fi-rs-layout-fluid:before{content:"\f1b8"}.fi-rs-letter-case:before{content:"\f1b9"}.fi-rs-life-ring:before{content:"\f1ba"}.fi-rs-line-width:before{content:"\f1bb"}.fi-rs-link:before{content:"\f1bc"}.fi-rs-lipstick:before{content:"\f1bd"}.fi-rs-list-check:before{content:"\f1be"}.fi-rs-list:before{content:"\f1bf"}.fi-rs-location-alt:before{content:"\f1c0"}.fi-rs-lock-alt:before{content:"\f1c1"}.fi-rs-lock:before{content:"\f1c2"}.fi-rs-magic-wand:before{content:"\f1c3"}.fi-rs-makeup-brush:before{content:"\f1c4"}.fi-rs-marker-time:before{content:"\f1c5"}.fi-rs-marker:before{content:"\f1c6"}.fi-rs-medicine:before{content:"\f1c7"}.fi-rs-megaphone:before{content:"\f1c8"}.fi-rs-menu-burger:before{content:"\f1c9"}.fi-rs-menu-dots-vertical:before{content:"\f1ca"}.fi-rs-menu-dots:before{content:"\f1cb"}.fi-rs-microphone:before{content:"\f1cc"}.fi-rs-minus-small:before{content:"\f1cd"}.fi-rs-minus:before{content:"\f1ce"}.fi-rs-mobile:before{content:"\f1cf"}.fi-rs-mode-landscape:before{content:"\f1d0"}.fi-rs-mode-portrait:before{content:"\f1d1"}.fi-rs-money:before{content:"\f1d2"}.fi-rs-mouse:before{content:"\f1d3"}.fi-rs-music-alt:before{content:"\f1d4"}.fi-rs-music:before{content:"\f1d5"}.fi-rs-network-cloud:before{content:"\f1d6"}.fi-rs-network:before{content:"\f1d7"}.fi-rs-notebook:before{content:"\f1d8"}.fi-rs-opacity:before{content:"\f1d9"}.fi-rs-package:before{content:"\f1da"}.fi-rs-paint-brush:before{content:"\f1db"}.fi-rs-palette:before{content:"\f1dc"}.fi-rs-paper-plane:before{content:"\f1dd"}.fi-rs-password:before{content:"\f1de"}.fi-rs-pause:before{content:"\f1df"}.fi-rs-pencil:before{content:"\f1e0"}.fi-rs-pharmacy:before{content:"\f1e1"}.fi-rs-physics:before{content:"\f1e2"}.fi-rs-picture:before{content:"\f1e3"}.fi-rs-ping-pong:before{content:"\f1e4"}.fi-rs-play-alt:before{content:"\f1e5"}.fi-rs-play:before{content:"\f1e6"}.fi-rs-playing-cards:before{content:"\f1e7"}.fi-rs-plus-small:before{content:"\f1e8"}.fi-rs-plus:before{content:"\f1e9"}.fi-rs-poker-chip:before{content:"\f1ea"}.fi-rs-portrait:before{content:"\f1eb"}.fi-rs-pound:before{content:"\f1ec"}.fi-rs-power:before{content:"\f1ed"}.fi-rs-presentation:before{content:"\f1ee"}.fi-rs-print:before{content:"\f1ef"}.fi-rs-protractor:before{content:"\f1f0"}.fi-rs-pulse:before{content:"\f1f1"}.fi-rs-quote-right:before{content:"\f1f2"}.fi-rs-rec:before{content:"\f1f3"}.fi-rs-receipt:before{content:"\f1f4"}.fi-rs-rectangle-horizontal:before{content:"\f1f5"}.fi-rs-rectangle-panoramic:before{content:"\f1f6"}.fi-rs-rectangle-vertical:before{content:"\f1f7"}.fi-rs-redo:before{content:"\f1f8"}.fi-rs-reflect:before{content:"\f1f9"}.fi-rs-refresh:before{content:"\f1fa"}.fi-rs-resize:before{content:"\f1fb"}.fi-rs-resources:before{content:"\f1fc"}.fi-rs-rewind:before{content:"\f1fd"}.fi-rs-rocket:before{content:"\f1fe"}.fi-rs-rotate-right:before{content:"\f1ff"}.fi-rs-rugby:before{content:"\f200"}.fi-rs-scale:before{content:"\f201"}.fi-rs-school-bus:before{content:"\f202"}.fi-rs-school:before{content:"\f203"}.fi-rs-scissors:before{content:"\f204"}.fi-rs-screen:before{content:"\f205"}.fi-rs-search-alt:before{content:"\f206"}.fi-rs-search:before{content:"\f207"}.fi-rs-settings-sliders:before{content:"\f208"}.fi-rs-settings:before{content:"\f209"}.fi-rs-share:before{content:"\f20a"}.fi-rs-shield-check:before{content:"\f20b"}.fi-rs-shield-exclamation:before{content:"\f20c"}.fi-rs-shield-interrogation:before{content:"\f20d"}.fi-rs-shield-plus:before{content:"\f20e"}.fi-rs-shield:before{content:"\f20f"}.fi-rs-shop:before{content:"\f210"}.fi-rs-shopping-bag-add:before{content:"\f211"}.fi-rs-shopping-bag:before{content:"\f212"}.fi-rs-shopping-cart-add:before{content:"\f213"}.fi-rs-shopping-cart-check:before{content:"\f214"}.fi-rs-shopping-cart:before{content:"\f215"}.fi-rs-shuffle:before{content:"\f216"}.fi-rs-sign-in:before{content:"\f217"}.fi-rs-sign-out:before{content:"\f218"}.fi-rs-signal-alt-1:before{content:"\f219"}.fi-rs-signal-alt-2:before{content:"\f21a"}.fi-rs-signal-alt:before{content:"\f21b"}.fi-rs-skateboard:before{content:"\f21c"}.fi-rs-smartphone:before{content:"\f21d"}.fi-rs-soap:before{content:"\f21e"}.fi-rs-spa:before{content:"\f21f"}.fi-rs-speaker:before{content:"\f220"}.fi-rs-spinner-alt:before{content:"\f221"}.fi-rs-spinner:before{content:"\f222"}.fi-rs-square-root:before{content:"\f223"}.fi-rs-square:before{content:"\f224"}.fi-rs-star:before{content:"\f225"}.fi-rs-stats:before{content:"\f226"}.fi-rs-stethoscope:before{content:"\f227"}.fi-rs-sticker:before{content:"\f228"}.fi-rs-stop:before{content:"\f229"}.fi-rs-stopwatch:before{content:"\f22a"}.fi-rs-subtitles:before{content:"\f22b"}.fi-rs-surfing:before{content:"\f22c"}.fi-rs-sword:before{content:"\f22d"}.fi-rs-syringe:before{content:"\f22e"}.fi-rs-tablet:before{content:"\f22f"}.fi-rs-target:before{content:"\f230"}.fi-rs-tennis:before{content:"\f231"}.fi-rs-test-tube:before{content:"\f232"}.fi-rs-test:before{content:"\f233"}.fi-rs-text-check:before{content:"\f234"}.fi-rs-text:before{content:"\f235"}.fi-rs-thumbs-down:before{content:"\f236"}.fi-rs-thumbs-up:before{content:"\f237"}.fi-rs-ticket:before{content:"\f238"}.fi-rs-time-add:before{content:"\f239"}.fi-rs-time-check:before{content:"\f23a"}.fi-rs-time-delete:before{content:"\f23b"}.fi-rs-time-fast:before{content:"\f23c"}.fi-rs-time-forward-sixty:before{content:"\f23d"}.fi-rs-time-forward-ten:before{content:"\f23e"}.fi-rs-time-forward:before{content:"\f23f"}.fi-rs-time-half-past:before{content:"\f240"}.fi-rs-time-oclock:before{content:"\f241"}.fi-rs-time-past:before{content:"\f242"}.fi-rs-time-quarter-past:before{content:"\f243"}.fi-rs-time-quarter-to:before{content:"\f244"}.fi-rs-time-twenty-four:before{content:"\f245"}.fi-rs-tool-crop:before{content:"\f246"}.fi-rs-tool-marquee:before{content:"\f247"}.fi-rs-tooth:before{content:"\f248"}.fi-rs-transform:before{content:"\f249"}.fi-rs-trash:before{content:"\f24a"}.fi-rs-treatment:before{content:"\f24b"}.fi-rs-trophy:before{content:"\f24c"}.fi-rs-umbrella:before{content:"\f24d"}.fi-rs-underline:before{content:"\f24e"}.fi-rs-undo:before{content:"\f24f"}.fi-rs-unlock:before{content:"\f250"}.fi-rs-upload:before{content:"\f251"}.fi-rs-usb-drive:before{content:"\f252"}.fi-rs-user-add:before{content:"\f253"}.fi-rs-user-delete:before{content:"\f254"}.fi-rs-user-remove:before{content:"\f255"}.fi-rs-user-time:before{content:"\f256"}.fi-rs-user:before{content:"\f257"}.fi-rs-users:before{content:"\f258"}.fi-rs-vector-2:before{content:"\f259"}.fi-rs-vector-alt:before{content:"\f25a"}.fi-rs-video-camera:before{content:"\f25b"}.fi-rs-volleyball:before{content:"\f25c"}.fi-rs-volume:before{content:"\f25d"}.fi-rs-wifi-alt:before{content:"\f25e"}.fi-rs-world:before{content:"\f25f"}.fi-rs-yen:before{content:"\f260"}.fi-rs-zoom-in:before{content:"\f261"}.fi-rs-zoom-out:before{content:"\f262"}

:root {
    --border-color:#ececec;
    --primary-color: #10352E;
    --secondary-color: #596F6B;
    --main-color:#38A949;
}
*{
    box-sizing: border-box;
}
body{
    height: 100%;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    margin:0;
}
.uk-container{
    max-width: 1240px;
    padding:0 20px;
}

@media (max-width: 1024px){
    .uk-container{
        padding: 0 10px;
    }
}

button{
    font-family: Mulish;
}

ul{
    margin:0;
}

ul li{
    list-style: none;
    margin-top: 0 !important;
}
.swiper-container{
    overflow: hidden;
}


/* HEADER */


.panel-compare{
    margin-top:70px;
}

.panel-compare .panel-head{
    text-align: center;
    margin-bottom:25px;
   
}

.panel-compare .panel-head .heading-1{
    text-transform: uppercase;
    font-weight: 700;
}

.panel-compare .panel-head .description{
    font-weight: 500;
}

.panel-compare .panel-body{
    background: #FAF8F8;
    padding:25px;
    border-radius: 20px;
    border:1px solid #ededed;
}
.nav-tav{
    margin-bottom:40px;
}
.nav-tav li:nth-child(1)
{
    margin-right:20px;
    color:#000;
}
.nav-tav li:last-child{
    margin-left: 20px;
}
.nav-tav li *{
    color:#000;
    font-weight: 600;
    text-transform: uppercase;
}

.nav-tav li.uk-active > *{
    color:#028ADE;
}

.upload-section {
    height:300px;
    position: relative;
    background-color: #fff;
    border-radius: 5px;
    border:2px dashed;
    border-color:#C0C0C0;

}

.upload-section button{
    background: transparent;
    border:0;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.upload-section button img{
    max-width: 115px;
}

.btn-cancel-upload {
    padding: 5px 15px;
    background: #ff4444 !important;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    position: absolute;
    top:0 !important;
    right:0 !important;
    display: inline-block;
    font-family: 'Montserrat';
}
.btn-cancel-upload:hover {
    background: #cc0000;
}

.compare-result-item img{
    border-radius: 5px;
}

.compare-result-item{
    position: relative;
}

.compare-result-item span{
    position: absolute;
    top:0;
    right:0;
    padding:3px 10px;
    /* display: none; */
    background: red;
    color:#fff;
    font-size:12px;
    border-radius: 0 0 0 5px;
}
.compare-result-item.success span{
    background: #38A949 !important;
}
.compare-result-item.medium span{
    background: orange;
}

.similar-result{
    position: relative;
    /* height:300px */
    margin-top:40px;
}

.loading-spinner{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
.preview-container{
    height:100%;
}
.preview-container img{
    height:100%;
}

.compare-result-item .image{
    background: #eaeaea;
    border:1px solid #ccc;
}

.compare-result-item .image img{
    height:265px !important;
}

.button-compare-2-image{
    padding: 10px 35px;
    background: #f00;
    color:#fff;
    font-family: 'Montserrat';
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 5px;
    border:0;
    font-size:14px;
    cursor: pointer;
    transition: all 0.4s ease;
}

.button-compare-2-image:hover{
    background: transparent;
    color:#cc0000;
    border:1px solid #cc0000;
}

.result{
    font-size:20px;
}

.result .success{
    background: #38A949 !important;
    display: inline-block;
    padding:0 12px;
}

.result .medium{
    background: orange !important;
    display: inline-block;
    padding:0 12px;
}
.result .low{
    color:red;
    display: inline-block;
    padding:0 12px;
}

@media (max-width: 600px){
    .upload-section{
        margin-bottom:20px !important;
    }
}

.input-text{
    -webkit-tap-highlight-color: transparent;
    background-color: #fff;
    border-radius: 5px;
    border: solid 1px #e8e8e8;
    box-sizing: border-box;
    clear: both;
    display: block;
    float: left;
    font-family: inherit;
    font-size: 14px;
    font-weight: normal;
    height: 42px;
    line-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 30px;
    position: relative;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: auto;
}

.nice-select{
    width:80%;
}

.input-text{
    width:100%;
}


@media (min-width: 1220px){
    .fix-container{
        width:300px;
        margin-left:auto;
        margin-right:auto;
    }
}

.fix-container .upload-section{
    height:300px;
}

.filter-item{
    margin-bottom:15px;
}

.nice-select{
    width:100% !important;
}

@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Play:wght@400;700&family=Rajdhani:wght@300;400;500;600;700&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
:root {
    --primary-color: #ed6912;
    --secondary-color: #000;
    --text-color:#000;
    --price-color:#b20000;
    --badge-blue-color: #008ddd;
    --badge-green-color:#70b00c;
    --border-color:#e2e4e8;
    --primary-font: "Arima";
    --secondary-font:"Rajdhani";
    --form-form:"Play";
    --hover-color: #005599;
    --primary-background:#383e47;
    --primary-arrow:#4d5259;
    --form-form:"Titillium Web";
}

.buyer-container{
    padding: 80px 0;
    background: url('img/signup-bg.jpg');
    background-size: 100%;
}
.buyer-container .signup-form{
    width: 760px;
    margin-left:auto;
    margin-right:auto;
    box-shadow: 0px 3px 6px #1d2030;
    border-radius: 4px;
}

.buyer-container .social-login{
    background: rgba(38, 43, 72, 0.92);
    height:460px;
    position: relative;
    border-radius: 4px 0 0 4px;
}

.buyer-container .social-login .info{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:100%;
}

.buyer-container .social-login .info .logo{
    width:100%;
    height:100%;
}




.buyer-container .social-login .info img{
    width:100%;
    height:100%;
    object-fit: cover;
}

.buyer-container .social-login .description{
    font-size:15px;
    color:#fff;
    margin-bottom:20px;
}

.buyer-container .social-login .login-social-item > *{
    width:100%;
    background: #3b5998;
    margin-bottom:15px;
    display: block;
    color:#fff;
    padding:6px 12px;
    font-size:14px;
    font-weight: 400;
    text-align: center;
    border-radius: 4px;
}

.buyer-container .social-login .login-social-item > .btn-google{
    background: #c32f10;
}
.buyer-container .social-login .login-social-item > .btn-twitter{
    background: #00aced;
}

.buyer-container .social-login .login-social-item > *:hover{
    opacity: 0.9;
    color:#fff !important;
}

.form-heading{
    font-size: 20px;
    color:#000;
    text-transform: uppercase;
    font-family: 'Montserrat';
    font-weight: 600;
    color:#4f77ff;
    margin-bottom:60px;
    padding-bottom:10px;
    position: relative;
    display: inline-block;
}
.form-heading:before{
    content:'';
    display: block;
    position: absolute;
    left:0;
    top:initial;
    bottom:0;
    width:100%;
    height:2px;
    background-color: #4f77ff;
}
.form-signup{
    padding:20px;
    background: #fff;
    height:460px;
}

.form-signup .form-row{
    margin-bottom:15px;
}

.form-signup .form-row .input-text{
    border:0;
    border-bottom:1px solid;
    border-color: #ccc;
    width:100%;
    padding:12px 6px;
    height:50px;
}

.form-signup .form-row .input-text::placeholder{
    font-size:16px;
}

.form-signup .btn-form-submit{
    width:100%;
    background-color: #4f77ff;
    border-color: #4f77ff;
    border-radius: 3px;
    box-shadow: 0px 2px 3px #9c9c9c;
    padding: 10px 16px;
    font-size:16px;
    color:#fff;
    font-family: 'Montserrat';
    text-transform: uppercase;
    font-weight: 300;
    cursor: pointer;
    margin-top:30px;
}

.uk-alert-danger ul{
    padding-left:0;
}

.forgot-password{
    color:var(--hover-color)
}

/* BUYER PAGE */
.buyer-page {
    padding: 40px 0;
}
.buyer-task > ul > li{
    margin-bottom:15px;
}
.buyer-task > ul > li > span{
    font-family: 'Inter';
    font-weight: 600;
    font-size:15px;
    text-transform: uppercase;
    display: block;
    margin-bottom:15px;
}

.buyer-task > ul > li > ul{
    padding-left:10px;
}

.buyer-task > ul > li > ul > li {
    margin-bottom:10px;
}
.buyer-wrapper{
    padding:20px;
    background: #fff;
    box-shadow: 0px 1px 2px #b7b7b7;
}

.buyer-wrapper .panel-head{
    margin-bottom:15px;
    padding-bottom:15px;
    border-bottom:1px solid;
    border-color:var(--border-color);
}
.buyer-wrapper .panel-head .description{
    margin-top:8px;
}

.profile-content .panel-body .form-row{
    margin-bottom:15px;
}

.profile-content .panel-body .form-row .label-name{
    width:120px;
    display: inline-block;
    font-weight: 600;
}

.change-info{
    margin-top:30px;
    padding:8px 25px;
    font-family: 'Inter';
    font-weight: normal;
    cursor: pointer;
}

.profile-content .panel-body .form-row .input-text{
    width:300px;
    height:43px;
    border-radius: 4px;
    padding:12px 12px;
    border:1px solid;
    border-color:var(--border-color);
}
.order-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
    text-align: left;
}

.order-table thead {
    background-color: #f4f4f4;
    color: #333;
}

.order-table th, .order-table td {
    padding: 8px 15px;
    border: 1px solid #ddd;
    font-size:14px;
}

.order-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.order-table tbody tr:hover {
    background-color: #f1f1f1;
}

.status {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    color: white;
}

.status-processing {
    background-color: #ffa500; /* màu cam */
}

.status-completed {
    background-color: #28a745; /* màu xanh lá */
}

.btn {
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 5px;
    color: #fff;
    background-color: #007bff;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #0056b3;
}

.btn-detail {
    font-size: 14px;
}

.order-detail-link{
    color:blue;
}

.table-order{
    width:100%;
    border-collapse: collapse;
}
.order-item:not(:last-child){
    border-bottom:1px solid #eaeaea;
}
.table-order td{
    padding:6px 10px;
    padding-left:0;
}
.order-item .image{
    width:100%;
    height:75px;
}
.order-item-name{
    color:#2962ff;
    word-wrap: break-word;
}
.order-item-voucher{
    font-size:13px;
}
.order-item-subtotal,
.order-item-price{
    text-align: right;
}
.order-item-qty{
    text-align: left;
}
.order-wrapper,
.table-order{
    color:#000;
}
.table-order strong,
.order-item-subtotal{
    font-weight: 600;
    color:#000;
}
.payment-confirm{
    padding:20px;
    border-top:1px solid #eaeaea;
    background: #fff;
}
.order-wrapper button.confirm{
    background: -webkit-gradient(linear,left top,left bottom,from(#08f),to(#4697fe));
    background: linear-gradient(to bottom,#4697fe,#08f);
    border-color: #08f;
    -webkit-box-shadow: inset 0 1px 0 0 #08f;
    box-shadow: inset 0 1px 0 0 #549cf9;
    color: #fff;
}
.payment-title{
    margin-left:20px;
}

.payment-title .text_2{
    font-size:13px;
}
.payment-confirm button,
button.confirm {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    height: auto;
    margin: 0;
    background: inherit;
    border: 0;
    border-radius: inherit;
    font-family: inherit;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    text-transform: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0.9rem 1.5rem;
    background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f9fafb));
    background: linear-gradient(to bottom,#fff,#f9fafb);
    border: 1px solid #c4cdd5;
    -webkit-box-shadow: 0 1px 0 0 rgb(22 29 37 / 5%);
    box-shadow: 0 1px 0 0 rgb(22 29 37 / 5%);
    border-radius: 3px;
    font-size: 1.5rem;
    line-height: 1.6rem;
    color: #212b35;
    -webkit-transition-property: background,border,-webkit-box-shadow;
    transition-property: background,border,-webkit-box-shadow;
    transition-property: background,border,box-shadow;
    transition-property: background,border,box-shadow,-webkit-box-shadow;
    -webkit-transition-timing-function: cubic-bezier(.64,0,.35,1);
    transition-timing-function: cubic-bezier(.64,0,.35,1);
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
    -webkit-tap-highlight-color: transparent;
    font-size: 13px;
}
.payment-confirm .icon img{
    max-width:18px;
}
.customer-line:not(:last-child){
    margin-bottom:10px;
}

div.edit{
    cursor: pointer;
}
.order-aside label{
    display: block !important;
}

.order-aside .select2-container{
    width:100% !important;
}
.order-aside .select2-container .select2-selection--single{
    height:40px !important;
}
.order-aside .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height:40px !important;
}
.order-aside .select2-container--default .select2-selection--single .select2-selection__arrow{
    height:38px !important;
}
.cancle-edit{
    color:#f00000
}

.cancle-badge{
    padding: 3px 7px;
    background: #000;
    color: #fff;
    border-radius: 50px;
    font-weight: 500;
    font-size:12px;
}
.updateBadge{
    cursor: pointer;
}

.text-right{
    text-align: right;
}
.contact-fixed {
    max-width: 120px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    z-index: 1;
}
.contact-fixed {
    position: absolute;
    left: 10%;
    bottom: 20px;
}
.contact-fixed img {
    animation: phone-vr-circle 1s infinite ease-in-out;
    rotate: 90deg;
}
@keyframes phone-vr-circle {
    0% {
        transform: rotate(-95deg) scale(1) skew(1deg);
    }
    10% {
        transform: rotate(-80deg) scale(1) skew(1deg);
    }
    20% {
        transform: rotate(-95deg) scale(1) skew(1deg);
    }
    30% {
        transform: rotate(-80deg) scale(1) skew(1deg);
    }
    40% {
        transform: rotate(-80deg) scale(1) skew(1deg);
    }
    50% {
        transform: rotate(-95deg) scale(1) skew(1deg);
    }
    100% {
        transform: rotate(-100deg) scale(1) skew(1deg);
    }
}
.uk-modal-dialog {
    width: 800px !important;
}

.uk-modal-close-default::after{
    display: none !important;
}
.uk-close{
    width: 30px;
    height: 30px;
    background: #fff !important;
    border-radius: 50%;
    top: 0 !important;
    right: 0 !important;
}
.uk-close:hover{
    opacity: 1 !important;
}
.uk-modal-dialog p{
    font-weight: 500;
}
.import-img:hover{
    text-decoration: none;
    opacity: 1 !important;
    background: #028ADE;
    color: #fff;
}
.up-img .uk-grid{
    justify-content: center;
}
.form-control {
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    -webkit-transition-property: color,-webkit-box-shadow;
    transition-property: color,-webkit-box-shadow;
    transition-property: box-shadow,color;
    transition-property: box-shadow,color,-webkit-box-shadow;
    -webkit-box-shadow: inset 0 1px 0 0 rgba(63,63,68,.05);
    box-shadow: inset 0 1px 0 0 rgba(63,63,68,.05);
    border: 1px solid #c4cdd5;
    outline: none;
    height: 40px;
    -webkit-box-shadow: inset 0 1px 0 0 rgba(63,63,68,.05);
    /* box-shadow: inset 0 1px 0 0 rgba(63,63,68,.05); */
    border-radius: 5px;
    display: block;
    padding: 6px 12px;
    width: 100%;
}
.submit-image{
    border: none;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}
.form-ip{
    text-align: right;
}
.mb5{
    margin-bottom: 5px;
}
.up-img .form-group{
    text-align: left;
}
.error-message {
    margin-top: 5px;
    font-size: 12px;
    font-style: italic;
    display: block;
    color: red;
}
.up-img .form-sl{
    text-align: left;
}
.up-img .nice-select{
    margin-bottom: 10px !important;
}

.btn-primary{
    font-family: 'Montserrat';
    font-weight: 500;
    border:0;
    font-size:13px;
    margin-right:10px;
    cursor: pointer;
}

.btn-primary.btn-search-update{
    background: var(--price-color);
}

.compare-opacity{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    background: #0000009c;
    padding: 8px;
    color: #fff;
    font-size: 12px;
}
.contact{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.contact .btn {
    margin-right: 10px;
    border: 1px solid #cdcdcd;
    width: 180px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 12px;
    background: none !important;
    color: #000;
}
.contact .btn svg {
    width: 30px;
    height: 30px;
    margin-right: 5px;
}
#modal-account .uk-modal-dialog {
    height: 160px !important;
    width: 460px !important;
    overflow-y: unset !important;
}
.uk-modal-dialog {
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
    padding-top: 45px;
    padding-bottom: 50px;
    margin: 0 auto;
    height: 560px !important;
    overflow-y: scroll;
}
#modal-account h3.heading-2 {
    font-size: 14px;
    margin-bottom: 10px;
}
.contact .btn:hover {
    border: 1px solid #1ab394;
    transition: 0.2s ease;
    text-decoration: none !important;
}

/* icon FB messager */
#button-contact-vr.messenger {
    bottom: 10px;
    right: 20px;
}
#button-contact-vr.whatsapp {
    bottom: 90px;
    right: 20px;
}
#button-contact-vr {
    position: fixed;
    bottom: 0;
    z-index: 99999;
}
#gom-all-in-one .button-contact {
    transition: 1.6s all;
    -moz-transition: 1.6s all;
    -webkit-transition: 1.6s all;
}
#button-contact-vr .button-contact {
    position: relative;
    margin-top: -5px;
}
#button-contact-vr .button-contact .phone-vr {
    position: relative;
    visibility: visible;
    background-color: transparent;
    width: 90px;
    height: 90px;
    cursor: pointer;
    z-index: 11;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transition: visibility .5s;
    left: 0;
    bottom: 0;
    display: block;
}
#zalo-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #2196F3;
    background-color: rgba(33, 150, 243, 0.7);
}
.phone-vr-circle-fill {
    width: 65px;
    height: 65px;
    top: 12px;
    left: 12px;
    position: absolute;
    box-shadow: 0 0 0 0 #c31d1d;
    background-color: rgba(230, 8, 8, 0.7);
    border-radius: 50%;
    border: 2px solid transparent;
    -webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animuiion: zoom 1.3s infinite;
    animation: zoom 1.3s infinite;
}
#zalo-vr .phone-vr-img-circle {
    background-color: #2196F3;
}
.phone-vr-img-circle {
    background-color: #e60808;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 25px;
    left: 25px;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phone-vr-circle-fill 1s infinite ease-in-out;
}
.phone-vr-img-circle a {
    display: block;
    line-height: 37px;
}
.phone-vr-img-circle img {
    max-height: 25px;
    max-width: 27px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}

/* zalo */
#button-contact-vr {
    position: fixed;
    bottom: 0;
    z-index: 100;
}
#gom-all-in-one .button-contact {
    transition: 1.6s all;
    -moz-transition: 1.6s all;
    -webkit-transition: 1.6s all;
}
#button-contact-vr .button-contact {
    position: relative;
    margin-top: -5px;
}
#button-contact-vr .button-contact .phone-vr {
    position: relative;
    visibility: visible;
    background-color: transparent;
    width: 90px;
    height: 90px;
    cursor: pointer;
    z-index: 11;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transition: visibility .5s;
    left: 0;
    bottom: 0;
    display: block;
}
#zalo-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #2196F3;
    background-color: rgba(33, 150, 243, 0.7);
}
.whatsapp #zalo-vr .phone-vr-circle-fill{
    box-shadow: 0 0 0 0 #4bca5a;
    background: #4bca5a !important;
}
.phone-vr-circle-fill {
    width: 65px;
    height: 65px;
    top: 12px;
    left: 12px;
    position: absolute;
    box-shadow: 0 0 0 0 #c31d1d;
    background-color: rgba(230, 8, 8, 0.7);
    border-radius: 50%;
    border: 2px solid transparent;
    -webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animuiion: zoom 1.3s infinite;
    animation: zoom 1.3s infinite;
}
#zalo-vr .phone-vr-img-circle {
    background-color: #2196F3;
}
.whatsapp #zalo-vr .phone-vr-img-circle{
    background: #4bca5a !important;
}
.phone-vr-img-circle {
    background-color: #e60808;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 25px;
    left: 25px;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phone-vr-circle-fill 1s infinite ease-in-out;
}
.phone-vr-img-circle a {
    display: block;
    line-height: 37px;
}

a {
    transition: color .3s, background-color .3s, border-color .3s;
}
.phone-vr-img-circle img {
    max-height: 25px;
    max-width: 27px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}
#gom-all-in-one .button-contact {
    transition: 1.6s all;
    -moz-transition: 1.6s all;
    -webkit-transition: 1.6s all;
}
#button-contact-vr .button-contact {
    position: relative;
    margin-top: -5px;
}
.phone-bar a, #phone-vr .phone-vr-circle-fill, #phone-vr .phone-vr-img-circle, #phone-vr .phone-bar a {
    background-color: #dd3333;
}
.phone-bar a {
    bottom: 28px !important;
    padding: 4px 15px 5px 50px !important;
}
.phone-bar a {
    position: absolute;
    margin-top: -65px;
    left: 30px;
    z-index: -1;
    color: #fff;
    font-size: 16px;
    padding: 7px 15px 7px 50px;
    border-radius: 100px;
    white-space: nowrap;
}

@-webkit-keyframes phone-vr-circle-fill {
    0% {-webkit-transform: rotate(0) scale(1) skew(1deg);  }
    10% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg);}
    20% {-webkit-transform: rotate(25deg) scale(1) skew(1deg);}
    30% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg);}
    40% {-webkit-transform: rotate(25deg) scale(1) skew(1deg);}
    50% {-webkit-transform: rotate(0) scale(1) skew(1deg);}
    100% {-webkit-transform: rotate(0) scale(1) skew(1deg);}
  }
  @-webkit-keyframes zoom{0%{transform:scale(.9)}70%{transform:scale(1);box-shadow:0 0 0 15px transparent}100%{transform:scale(.9);box-shadow:0 0 0 0 transparent}}@keyframes zoom{0%{transform:scale(.9)}70%{transform:scale(1);box-shadow:0 0 0 15px transparent}100%{transform:scale(.9);box-shadow:0 0 0 0 transparent}}
  .phone-bar a {
      position: absolute;
      margin-top: -65px;
      left: 30px;
      z-index: -1;
      color: #fff;
      font-size: 16px;
      padding: 7px 15px 7px 50px;
      border-radius: 100px;
      white-space: nowrap;
  }

@media(max-width:576px){
    .buyer-container h2.heading-3 > *{
        font-size: 18px;
    }
    .buyer-container .signup-form{
        width: 100%;
    }
    .contact-fixed {
        bottom: 145px;
        right: 10px;
        max-width: 110px;
        left: unset;
    }
    .buyer-container{
        padding: 45px 0;
    }
}