/* Country Picker dropdown container (Name depends on element being used as a container) */
  .dropdown-container {
    display: inline-block;
    color: white;
    cursor: pointer;
    position: relative;
  }
  
  /* Dropdown Trigger */
  .flow-country-picker-modal-trigger,
  .flow-country-picker-dropdown-trigger {
    border: none;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    margin-bottom: 3px;
    padding: 0px 6px 0px 6px;
  }
  .flow-country-picker-modal-trigger > img, .flow-country-picker-dropdown-trigger > img {
      border-radius: 2px;
      -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .10);
              box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .10);
    }
  
  .flow-country-picker-modal-trigger-text,
  .flow-country-picker-dropdown-trigger-text {
    bottom: 4px;
    position: relative;
    color: #191919;
  }
  
  /* Backdrop that takes over the screen */
  .flow-country-picker-dropdown-backdrop {
    background-color: rgba(0, 0, 0, 0);
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
  }
  
  .flow-country-picker-instruction-txt {
    color: black;
    display: block;
    padding: 12px 10px;
    line-height: 14px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 3px;
  }
  
  /* Dropdown button on hover & focus */
  .flow-country-picker-modal-trigger:hover, .flow-country-picker-modal-trigger:focus, .flow-country-picker-modal-trigger.flow-country-picker-open,
  .flow-country-picker-dropdown-trigger:hover, .flow-country-picker-dropdown-trigger:focus, .flow-country-picker-dropdown-trigger.flow-country-picker-open {
    background-color: #f3f3f3;
  }
  
  .flow-country-picker-country-logo {
    display: inline-block;
    padding-right: 10px;
  }
  
  .flow-country-picker-country-logo > img {
      border-radius: 2px;
      -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .10);
              box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .10);
    }
  
  /* Dropdown Content (Hidden by Default) */
  .flow-country-picker-dropdown-menu {
    visibility: hidden;
    opacity: 0;
    border-radius: 2px;
    -webkit-transition: visiblity 0.10s, opacity 0.10s linear;
    transition: visiblity 0.10s, opacity 0.10s linear;
    position: absolute;
    background-color: white;
    min-width: 300px;
    max-height: 400px;
    overflow-y: scroll;
    /* These position elements are highly dependent on the user's site content */
    top: 31px;
    left: 0;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .25);
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .25);
    z-index: 100;
    font-size: 14px;
  }
  .flow-country-picker-dropdown-menu a:last-child {
      margin-bottom: 4px;
    }
  
  
  /* Links inside the dropdown */
  .flow-country-picker-dropdown-menu a {
    text-decoration: none;
    padding: 6px 10px;
    line-height: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  
  .flow-country-picker-dropdown-menu a:hover {
    opacity: 1;
    background-color: #f3f3f3;
  }
  
  /* The actual text inside the dropdown option */
  .flow-country-picker-dropdown-option-text {
    -ms-flex-item-align: center;
        align-self: center;
    color: #191919;
    position: relative;
    display: inline-block;
    width: calc(100% - 33px);
    top: -1px;
  }
  
  .flow-country-picker-show {
    visibility: visible;
    opacity: 1;
  }
  
  .flow-country-picker-open {
    color: #191919;
  }
  
  /* Modal Country Picker */
  .flow-country-picker-modal {
    background-color: white;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 24px 0 rgba(0, 0, 0, .15), 0 2px 4px 0 rgba(0, 0, 0, .15);
            box-shadow: 0 2px 24px 0 rgba(0, 0, 0, .15), 0 2px 4px 0 rgba(0, 0, 0, .15);
    max-height: 700px;
    left: calc(50% - 375px);
    padding: 20px;
    position: fixed;
    top: 25vh;
    width: 700px;
    z-index: 99999;
  }
  
  /* An item inside the modal */
  .flow-country-picker-modal-item-container {
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    padding: 7px 5px 7px 0;
    width: 100%;
  }
  .flow-country-picker-modal-item-container:hover {
      background-color: #e6e6e6;
    }
  
  .flow-country-picker-modal-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  
  /* The selected item in the modal */
  .flow-country-picker-selected-modal-item {
    background-color: #C0DFFF;
    cursor: auto;
    cursor: initial;
  }
  
  /* Backdrop that takes over the screen */
  .flow-country-picker-modal-backdrop {
    background-color: rgba(0, 0, 0, .30);
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
  }
  
  /* The text within the modal item */
  .flow-country-picker-modal-text {
    -ms-flex-item-align: center;
        align-self: center;
    color: #191919;
    line-height: 15px;
  }
  
  /* Modal item logo */
  .flow-country-picker-modal-logo {
    -ms-flex-item-align: center;
        align-self: center;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .10);
            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .10);
    height: 15px;
    margin-left: 10px;
    margin-right: 8px;
    width: 21px;
  }
  
  /* Modal Header */
  .flow-country-picker-modal-header {
    padding-left: 5px;
    padding-bottom: 16px;
    border-bottom: 1px #e6e6e6 solid;
    margin-bottom: 16px;
  }
  
  .flow-country-picker-modal-title {
    color: #191919;
    display: inline-block;
  }
  
  /* Modal close icon */
  .flow-country-picker-modal-close {
    float: right;
    cursor: pointer;
    width: 10px;
    height: 10px;
    margin-top: 7px;
    stroke: #bfbfbf;
  }
  .flow-country-picker-modal-close:hover {
      stroke: #808080;
    }
  
  /* Modal Body */
  .flow-country-picker-modal-body {
    max-height: 650px;
    overflow-y: scroll;
  }
  
  /* Modal Body Content */
  .flow-country-picker-modal-body-content {
    -webkit-column-count: 4;
            column-count: 4;
  }
  
  /* Currently selected experience text */
  .flow-country-picker-current-experience-txt {
    display: inline-block;
    padding-left: 7px;
    bottom: 6px;
    position: relative;
  }
  
  .flow-country-picker-selected-logo {
    display: inline-block;
  }
  
  /* Some example responsive rules */
  @media (max-width: 768px) {
    .flow-country-picker-modal {
      left: 0;
      width: 100%;
    }
    .flow-country-picker-modal-body-content {
      -webkit-column-count: unset;
              column-count: unset;
    }
  }