/* input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 1em;
    width: 1em;
    border-radius: 50em;
    background: url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=cancel) no-repeat 50% 50%;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
    opacity: .3;
    pointer-events: all;
} */

.region-colors {
    --color-european: rgb(0, 85, 160);
    --color-european-light: rgba(0, 85, 160, 0.15);

    --color-african: rgb(176, 94, 22);
    --color-african-light: rgba(176, 94, 22, 0.15);

    --color-americas: rgb(188, 39, 50);
    --color-americas-light: rgba(188, 39, 50, 0.15);

    --color-western-pacific: rgb(0, 146, 219);
    --color-western-pacific-light: rgba(0, 146, 219, 0.15);

    --color-south-east-asia: rgb(72, 182, 72);
    --color-south-east-asia-light: rgba(72, 182, 72, 0.15);

    --color-eastern-mediterranean: rgb(22, 160, 133);
    --color-eastern-mediterranean-light: rgba(22, 160, 133, 0.15);


/* Africa */
--color-eastern-africa: rgb(231, 76, 60);
--color-eastern-africa-light: rgba(231, 76, 60, 0.15);

--color-middle-africa: rgb(155, 89, 182);
--color-middle-africa-light: rgba(155, 89, 182, 0.15);

--color-northern-africa: rgb(52, 152, 219);
--color-northern-africa-light: rgba(52, 152, 219, 0.15);

--color-southern-africa: rgb(46, 204, 113);
--color-southern-africa-light: rgba(46, 204, 113, 0.15);

--color-western-africa: rgb(241, 196, 15);
--color-western-africa-light: rgba(241, 196, 15, 0.15);

/* The Americas */
--color-caribbean: rgb(230, 126, 34);
--color-caribbean-light: rgba(230, 126, 34, 0.15);

--color-central-america: rgb(26, 188, 156);
--color-central-america-light: rgba(26, 188, 156, 0.15);

--color-south-america: rgb(149, 165, 166);
--color-south-america-light: rgba(149, 165, 166, 0.15);

--color-northern-america: rgb(52, 73, 94);
--color-northern-america-light: rgba(52, 73, 94, 0.15);

/* Asia */
--color-central-asia: rgb(192, 57, 43);
--color-central-asia-light: rgba(192, 57, 43, 0.15);

--color-eastern-asia: rgb(93, 173, 226);
--color-eastern-asia-light: rgba(93, 173, 226, 0.15);

--color-south-eastern-asia: rgb(88, 214, 141);
--color-south-eastern-asia-light: rgba(88, 214, 141, 0.15);

--color-southern-asia: rgb(243, 156, 18);
--color-southern-asia-light: rgba(243, 156, 18, 0.15);

--color-western-asia: rgb(211, 84, 0);
--color-western-asia-light: rgba(211, 84, 0, 0.15);

/* Europe */
--color-eastern-europe: rgb(142, 68, 173);
--color-eastern-europe-light: rgba(142, 68, 173, 0.15);

--color-northern-europe: rgb(41, 128, 185);
--color-northern-europe-light: rgba(41, 128, 185, 0.15);

--color-southern-europe: rgb(39, 174, 96);
--color-southern-europe-light: rgba(39, 174, 96, 0.15);

--color-western-europe: rgb(44, 62, 80);
--color-western-europe-light: rgba(44, 62, 80, 0.15);

/* Oceania */
--color-australia-and-new-zealand: rgb(243, 104, 224);
--color-australia-and-new-zealand-light: rgba(243, 104, 224, 0.15);

--color-melanesia: rgb(22, 160, 133);
--color-melanesia-light: rgba(22, 160, 133, 0.15);

--color-micronesia: rgb(127, 140, 141);
--color-micronesia-light: rgba(127, 140, 141, 0.15);

--color-polynesia: rgb(189, 195, 199);
--color-polynesia-light: rgba(189, 195, 199, 0.15);


}

.filter-button {
    background-color: #eee;
    margin-bottom: 5px;
}

.filter-button:hover,
.filter-button:focus,
.filter-button:active {
    background-color: #262626 !important;
    color: white !important;
}

.filter-button.selected {
    background-color: #262626;
    color: white;
}


.region-filter-button {
    background-color: var(--region-color-light); 
}

.region-filter-button:hover,
.region-filter-button:focus,
.region-filter-button:active {
    background-color: var(--region-color) !important;
}

.region-filter-button.selected {
    background-color: var(--region-color);
    color: white;
}
.subregion-filter-button {
    background-color: var(--region-color-light); 
}

.subregion-filter-button:hover,
.subregion-filter-button:focus,
.subregion-filter-button:active {
    background-color: var(--region-color) !important;
}

.subregion-filter-button.selected {
    background-color: var(--region-color);
    color: white;
}

.form-switch .form-check-input:checked {
  background-color: #c53030;
}
.form-check-input[type="checkbox"]:checked:focus{
      background-color: #c53030;
}

.form-switch .form-check-input:checked[type="checkbox"]::after {
    background-color: #c53030;
      color: #c53030;
}
.form-switch .form-check-label .fas {
  vertical-align: middle;
  margin-right: 0.25em;
  color: inherit;
}
.country-item {
    position:relative;
    width: 100%;
    height: 125px;
    color: #262524;
}

.country-image-wrapper {
    width: 150px;
    height: 120px;
    overflow: hidden;
    clip-path: polygon(0 0, 90px 0, 100% 100%, 0 100%);
    border-bottom-left-radius: 5px;
}

.country-image {
    width: 100%;
    height: 98%;
    background-size: cover;
}

[class*="cbg-"] {
    display: block;
    width: 150px;
    height: 120px;
    background: url("../images/default-bg.498b94f7cb54.jpg") no-repeat center;
    background-size: cover;
}

.country-flag {
    width: 90px;
    height: 60px;
    position:absolute;
    top: 20%;
    left: 55px;
    transition: left 0.3s ease;
    filter: drop-shadow( -2px 2px 2px rgba(0, 0, 0, 0.25));

    @media (min-width: 1400px) {
        left: 45px
    }
}

.country-item:hover .country-flag {
    left: 45px;

    @media (min-width: 1400px) {
        left: 35px
    }
}

.country-info-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    filter: drop-shadow(-2px 2px 5px rgba(0, 0, 0, 0.25));
}

.country-info {
    width: inherit;
    height: inherit;
    text-align: end;
    padding: 10px 15px 10px 110px;
    background-color: white;
    clip-path: polygon(90px 0, 100% 0, 100% 100%, 150px 100%);

    @media (min-width: 1400px) {
        clip-path: polygon(80px 0, 100% 0, 100% 100%, 140px 100%);
    }
}

.name-and-icon {
    height: 50%;
    overflow: hidden;
}

.arrow-icon {
    margin-top: 16px;
    display: block;
}

.update-info {
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
}

.update-info p {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .recently-visited-country:nth-child(n+5) {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1399.98px){
    .recently-visited-country:nth-child(n+7) {
        display: none !important;
    }
}

@media (min-width: 1400px) {
    .recently-visited-country:nth-child(n+9) {
        display: none !important;
    }
}