/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* body {
    font-family: 'Open Sans',sans-serif;
} */

_::-webkit-full-page-media, _:future, :root .safari_only {
    margin-bottom: 9px;
}

button:not(.components-button):not(.customize-partial-edit-shortcut-button) {
    font-weight: 400;
    line-height: 1em;
    text-align: left;
    margin-block: 5px;
    margin-inline: 0;
}

button:not(.components-button):not(.customize-partial-edit-shortcut-button):focus {
	color: white;
}

button:not(.components-button):not(.customize-partial-edit-shortcut-button):hover {
	color: #333;
}

button:not(.components-button):not(.customize-partial-edit-shortcut-button):active {
	color: white;
}

.control-bin,
.cat-bed {
	margin-block: 10px;
}

input[type="button"]:not(.components-button):not(.customize-partial-edit-shortcut-button) {
    background-color: transparent;
    color: black;
    font-weight: 400;
}

/* @-moz-document url-prefix() {
    .ff {
        margin-bottom: 8px;
    }
} */

footer {
    padding: 5px;
}

/* everything else styling */
.country-info-display {
    background: rgba(74, 60, 104, 0.1);
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 40px;
}

li {
    list-style-type: none;

}

.accordions-container {
    width: 150px;
}

.control-container {
    width: 160px;
    white-space: normal;
}

.fluffle {
    margin-inline-start: 0;
    margin-block-start: 0;
    padding-inline-start: 0;
    margin-block-end: 0;
    border-right: 2px solid rgb(74, 60, 104);
    margin-bottom: 10px;
}

.fluffle p {
    text-align: center;
    padding: 1em;
    margin-block-start: 0;
    margin-block-end: 0; 
}

.fluffle li {
    padding: 1em;
    border-bottom: 1px solid rgb(74, 60, 104);
    background: white;
}

.fluffle li:last-child {
    border-bottom: 2px solid rgb(74, 60, 104);
}

.hcv {
    background: #DB2E2F;
    color: white;
}

.hbv {
    background: #4284B5;
    color: white;
}

.smaller {
    font-size: 0.7em;
}

/* button {
    background: rgb(250, 250, 250);
} */

.definition a {
    color: white;
    text-decoration: underline dashed #dcdcdc;
}

.first {
    border-top: 1px solid #6c757d;
}

.subsection {
    border-bottom: 1px solid #6c757d;
    text-align: center;
    padding: 5px 0 5px 0;
    background: rgb(74, 60, 104);
    color: white;
}
.logo-image-small {
    align-self: center;
}

.logo-small img {
    height: 55px;
}

.thumbnail {
    height: 25px;
    border: none;
}

.corner-box {
    height: 127px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 10px;
}

@-moz-document url-prefix() {
    .ff {
        margin-bottom: 11px;
    }
}

.main-btn {
    background:  rgb(74, 60, 104);
    color: white;
    text-align: left;
    font-weight: 300;
}

.main-btn:active {
    color: white;  
}

.main-btn:hover {
    color: white;
}

.main-btn:focus {
    color: white;
}

/*
.icon1 {
    position: relative;
    left: 80px;
    top: 15px;
}

.icon2 {
    position: relative;
    left: 80px;
    top: 25px;
}

.icon3 {
    position: relative;
    left: 24px;
    top: 25px;
}

.icon4 {
    position: relative;
    left: 24px;
    top: 25px;
}

.icon5 {
    position: relative;
    left: 64px;
    top: 5px;
}

.icon6 {
    position: relative;
    left: 35px;
    top: 5px;
}
*/

.icon {
	display: block;
	padding-block-start: 0.75rem;
	text-align: end;
}

.left-side {
    border-right: 2px solid white;
}
.left-side li{
    background: rgba(74, 60, 104, 0.7);
    color: white; 
    border-bottom: 1px solid white;
    padding: 1em 0.8em 1em 0.8em;
}


.left-side li:last-child {
    border-bottom: 2px solid white;
}

button.control:enabled {
    color: black;
    background: white;
}

button.control:disabled {
    color: white;
    background: rgb(74, 60, 104);
}

button.control {
    margin: auto;
}

.created-btn {
    background: rgba(74, 60, 104, 0.6);
    color: white;
    font-size: 0.9em;
}

.created-btn:active {
    color: white;
}

.created-btn:hover {
    color: white;
}

.created-btn:focus {
    color: white;
}

/* Bootstrap override styles */
.btn { 
    width: 100%;
    white-space: normal;
    border-radius: 0px;
    margin: 0 0 10px 0;
}

.content {
    height: 150px;
    margin-bottom: 10px;
}
.country-options {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
    margin: auto;
    overflow: auto;
    align-content: flex-start;
}

.country-options div {
    display: flex;
    white-space: nowrap;
    margin-right: 40px;
}

.choice label {
    padding: 0px 5px 0px 5px;
    font-weight: 400; 
}

/* country names styling */

.main-title-box h1 {
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: 300;
}

.heading-box {
    border-right: 2px solid rgb(74, 60, 104);
    border-bottom: 2px solid rgb(74, 60, 104);
    margin-bottom: 10px;
    background: white;
}

.title-box {
    display: flex;
    justify-content: space-between;
    block-size: 66px;
    inline-size: 150px;
}

.images-box {
    padding-bottom: 5px;
}

.box-one {
    padding-left: 20px;
}

.box-one h1 {
    font-size: 22px;
}

.title-box h1 {
    font-size: 18px;
    text-align: center;
    width: 100%;
    text-transform: uppercase;
    font-weight: 300;
    padding: 0px 2px 0px 2px;
    margin-top: 10px;
}

.flag-img {
    display: block;
    height: 50px;
    width: 50px;
    margin: auto;
}

.flag-img-2{
    height: 50px;
    width: 50px;
}
.img-box {
    height: 50px;
} 

.remove-btn {
    display: flex;
    justify-content: flex-end;
    margin-top: -22px;
}

.remove-btn input {
    border: none;
    background: transparent;
    text-transform: uppercase;
    font-weight: 300;
}

h1 {
    margin: 0;
}

/* data display styling */

.country-info {
    display: flex;
    margin-inline-start: 2px;
    padding-block: 0;
    padding-inline: 5px;
    vertical-align: top;
}

.country-data {
    margin: 0px 5px 0px 5px;
}

.country-data li {
	margin-block: var( --fluffle-para__spacing-v );
}

.info-display {
    display: flex;
}

.info-display li {
    height: 70px;
    display: flex;
    align-items: center;
    width: 100%;
    margin-left: 0px;
    margin-bottom: 0px;
}

.info-display button {
    min-block-size: 95px;
    white-space: normal;
}

.letters-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    background: rgba(74, 60, 104, 0.1);
    margin: 0px 5px 0px 5px;
}

.letters-box li {
    list-style-type: none;
    font-size: 1.5em;
    font-weight: 300;
    padding: 0 7px 0 7px;
    margin-bottom: 0px;
}

/* data section headers styling */


/* tabs styling */
.choices-box {
    background: #fbfbfb;
    width: 100%;
    padding-top: 10px;
    height: 200px;
}
.choices-box > ul{
    padding: 0;
}
.choices-box .trigger{
    list-style-type: none;
    display: inline-block;
    cursor: pointer;
}
.choices-box .trigger.active{
    background: rgb(74, 60, 104);
    color: white;
}
.choices-box .content{
    background: #fbfbfb;
    padding: 10px 20px;
    display: none;
}
.choices-box .content.active{
    display: block;
}

.letter {
    background: rgba(74, 60, 104, 0.1);
    font-weight: bold;
    font-size: 20px;
    padding: 5px;
    text-align: left;
}

.selection-box {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: center;
    margin-bottom: 10px;
    /* height: 200px; */
}

.title {
    width: 100%;
}

.title h1{
    font-size: 1.5em;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 0 10px 5px;
    font-weight: 300;
}

/* comparison checkbox stylings */
button.to-compare {
    border-width: 1px;
    line-height: 2em;
    padding: 2px 6px 1px 6px;
    min-block-size: 34px;
}

li.to-compare {
    display: flex;
    align-items: center;
    justify-content: center;
}

.to-compare [type=checkbox] {
    display: none;
}
  
.to-compare [type=checkbox] + label {
    cursor: pointer;
    display: flex;
    background-color: rgb(190, 190, 190);
    color: white;
    font-family: sans-serif;
    height: 80%;
    line-height: 2em;
    position: relative;
    width: 80px;
    margin-bottom: 0px;
}

.to-compare [type=checkbox] + label,
    input[type=checkbox] + label i {
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}

.to-compare [type=checkbox]:checked + label {
    background-color: #67B04F;
}

.to-compare [type=checkbox] + label:before,
.to-compare [type=checkbox] + label:after,
.to-compare [type=checkbox] + label i {
    width: 50%;
    display: inline-block;
    height: 100%;
    text-align: center;

}

.to-compare [type="checkbox"] + label:before,
.to-compare [type="checkbox"] + label:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";
    font-size: 12px;
}

.to-compare [type=checkbox] + label i {
    top: 10%;
    background-color: white;
    height: 80%;
    left: 5%;
    position: absolute;
    width: 45%;
}

.to-compare [type=checkbox]:checked + label i {
    left: 50%;
}

/* paper dashboard theme work-arounds */
.navbar.navbar-absolute {
    position: relative;
}

.navbar.navbar-transparent {
    margin-bottom: 10px;
    margin-top: 10px;
    border-radius: 0;
    padding-left: 10px;
}

.container-fluid {
    margin-left: 0;
}

/* purple color: #4A3C68*/