
/* ACF Form Local Customizations */
/* Hide the Row Identifier PHP Helper */
th.acf-th[data-name=avail_select_interviewer_weekly_row_flag]{
    display: none;
}

/** Fix for date month and year not aligning next to each other since they are set as display: block **/
.acf-ui-datepicker .ui-datepicker-title select{
  display: inline-block
}

/** Fix the issue with toggle switch display **/
.acf-switch::before, .acf-switch:after{
  display: none;
}

/** ============== Utility Components ========================= **/

pre.debug{
  display: none;
}

/* for text that can be copied to clopboard */
.copy_text{
  display: block;
  font-size: 0.75rem;
  border-radius: 5px;
  position: relative;
  background: #fff;
  padding: 2px 10px 2px 170px;
  border: 1px solid #def4fd;
  margin-bottom: 2px;
}
.copy_text.last{
  margin-bottom: 0px;
}
.copy_text span.url{
  cursor: copy;
  color: #b53446;
  display: inline-block;
  word-wrap: anywhere;
}
.copy_text span.prepend{
  color: #000;
  display: inline-block;
  background-color: #def4fd;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  position: absolute;
  width: 160px;
  left: 0px;
  top: 0px;
  height: 100%;
}
.copy_text span.prepend::before{
  content: attr(data-text);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translate(0, -50%);
}

/** Copy URL Grid **/
.grid-parent{
  display: grid;
}

.upper{
  text-transform: uppercase;
}
.smaller{
  font-size: 0.8rem !important;
}
.larger{
  font-size: 1.2rem !important;
}
.ui_hint{
  font-size: 0.8rem;
  color: #000;
}
.ui_hint.normal{ /* inherits color */
  font-size: 0.8rem;
  color: inherit
}
.outlined{
  margin: 0px 0px 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.align-right{
  text-align: right;
}
.align-left{
  text-align: left;
}
.align-center{
  text-align: center;
}
.warning{
  color: orange;
}
.ok{
  color: green;
}
.danger{
  color: red;
}
.mute{
  color: #999;
}
.black{
  color: #000;
}
.bold{
  font-weight: bold;
}
.float_left{
  float: left;
}
.float_right{
  float: right;
}
.emphasis{
  color: #b30000;
}
.extra_emphasis{
  color: #b30000;
  font-weight: bold;
}

hr.page_divider{
  margin: 30px 0;
  border: 0px none;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #fff;
}
div.spacer{
  display: block;
  height: 1px;
}
ul.no_list_style,
ol.no_list_style{
  list-style: none;
  margin-left: 0px;
}

#pmiso_debug_console .body{
    overflow: auto;
    max-height: 300px;
    margin-bottom: 10px;
}

/** Loading Overlay **/
.loading_overlay{
  position: fixed;
  display: none;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 100000;
}
.loading_overlay .loading_content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loading_overlay .loading_content .message{
  color: #000;
  margin-bottom: 10px;
  font-size: 0.9rem;
  text-align: center;
}


/** Toastr **/
#toast-container > div {
  width: auto !important;
  max-width: 600px;
}

/** Breadcromb **/
ul.breadcrumb {
  margin-left: 0px;
  font-size: 0.9rem;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #def4fd;
  position: relative;
}
ul.breadcrumb li{
  display: inline-block;
  position: relative;
  list-style: none;
  padding-right: 10px;
  margin-right: 10px;
}
ul.breadcrumb li.selected{
  font-weight: bold;
}
ul.breadcrumb li.logout{
  position: absolute;
  right: 0px;
  top: -30px;
  font-size: 0.9rem;
  text-transform: capitalize;
}
ul.breadcrumb li.logout a{
  color: rgb(171, 13, 13);
}
ul.breadcrumb li.logout a i{
  margin-bottom: -3px;
}
ul.breadcrumb li::after{
  content: '';
  position: absolute;
  height: 80%;
  right: 0px;
  top: 3px;
  display: inline-block;
  border-right: 1px solid #ccc;
}

ul.breadcrumb li:first-child{
  margin-right: 0px;
}
ul.breadcrumb li:first-child::after,
ul.breadcrumb li:last-child::after{
  display: none;
}

/** ============== UI Components ========================= **/
.airtable_app_ui{
  position: relative;
}
.airtable_app_ui h2{
  font-family: Tahoma, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 2.2rem;
}
.airtable_app_ui h3{
  font-family: Tahoma, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.6rem;
}
.airtable_app_ui h4{
  font-family: Tahoma, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
}
.airtable_app_ui h4 .title{
  font-weight: 100;
  color: #999;
}
.airtable_app_ui h5,
.airtable_app_ui h6{
  font-family: Tahoma, Helvetica, Arial, sans-serif;
  letter-spacing: 0px;
}
.hidden{
  display: none !important;
}
/* the initial client list container */
.select_a_client:not(.show){
    display: none;
}
.select_a_client p.selected_client{
    font-size: 1.2rem;
    color: #0e5aaa;
}
.select_a_client p.season{
    text-transform: uppercase;
    font-size: 0.9rem;
    color: #000;
    padding-bottom: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eaeaea;
}

.btn-normal{
  border: 1px solid #03a9f4;
  background-color: #f4fcff;
  color: #03a9f4;
  border-radius: 5px;
  padding: 5px 20px;
  transition: 0.3s;
  text-decoration: none;
  font-size: 0.8rem;
  white-space: nowrap;
  display: inline-block;
  margin-bottom: 2px;
}
.btn-normal:hover{
  background-color: #03a9f4;
  border-radius: 17px;
  color: #fff;
}
.btn-normal:hover a{
  color: #fff;
}
.btn-normal i{
  text-decoration: none;
  font-size: 1.3rem;
  margin: 0px 5px -5px 0px;
}
.btn-normal .a{
  text-decoration: none;
}
.btn-normal.medium{
  padding: 4px 15px;
  font-size: 0.85rem;
}
.btn-normal.medium i{
  font-size: 1rem;
  margin-bottom: -3px;
}
.btn-normal.small{
  padding: 3px 10px;
  font-size: 0.75rem;
}
.btn-normal.small i{
  font-size: 0.9rem;
  margin-bottom: -3px;
}
.btn-normal.reverse{
  border: 1px solid #03a9f4;
  background-color: #03a9f4;
  color: #fff;
}
.btn-normal.reverse:hover{
  border: 1px solid #03a9f4;
  background-color: #fff;
  color: #03a9f4;
}
.btn-normal.act_now{
  border: 1px solid #9d1111;
  background-color: #fff;
  color: #9d1111;
}
.btn-normal.act_now:hover{
  border: 1px solid #d31111;
  background-color: #d31111;
  color: #fff !important;
}

.btn-normal.act_now.reverse{
  border: 1px solid #d31111;
  background-color: #d31111;
  color: #fff;
}
.btn-normal.act_now.reverse:hover{
  border: 1px solid #9d1111;
  background-color: #fff;
  color: #9d1111 !important;
}

.btn-normal.minor{
  border: 1px solid #d8d8d8;
  background-color: #d8d8d8;
  color: #000;
}
.btn-normal.minor:hover{
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
}
.btn-normal.disabled{
  cursor: no-drop;
  border: 1px solid #ccc;
  background-color: #efefef;
  color: #aaa;
}
.btn-normal.disabled:hover{
  background-color: #ccc;
  color: #fff;

}

.overflow_x_scroll{
  overflow-x:scroll;
}
.overflow_y_scroll{
  overflow-y:scroll;
}

.data_table {
  overflow-x: auto;
  overflow-y: visible;
}
.data_table .scroller{
  max-height: 500px;
  overflow-y: auto;
}
.data_table table{
  display: table;
  max-width: -moz-fit-content !important;
  max-width: fit-content !important;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
  min-width: 100%;
  max-height: 500px;
}
.data_table table th{
  background-color: #eee;
  color: #000;
}
.data_table table th.absorbing-column{
  width: 30%;
}
.data_table table th.expanding-column{
  width: 50%;
}
.data_table table th,
.data_table table td{
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  max-width: 320px;
}

.data_table table th.client_name,
.data_table table td.client_name{
  max-width: 320px;
  min-width: 320px;
}

@media screen and (max-width: 754px) {
  
  .data_table table th.client_name,
  .data_table table td.client_name{
    min-width: unset;
  }
}

.data_table table tr:hover{
  background-color: #e1f6ff;
}
.data_table table tr.old{
  background-color: #fafafa;
  color: #aaa;
}
.data_table table td span.pill,
.data_table table td span.status{
  border-radius: 10px;
  font-size: 0.75rem;
  padding: 2px 10px;
  background-color: #999;
  color: #fff;
}
.data_table table td span.status.open{
  background-color: green;
  color: #fff;
}
.data_table table td span.status.pending{
  background-color: orange;
  color: #fff;
}
.data_table table td span.status.confirmed{
  background-color: green;
  color: #fff;
}
.data_table table td span.status.completed{
  background-color: #999;
  color: #fff;
}
.data_table table td span.status.reschedule{
  background-color: #aa93fe;
  color: #fff;
}
.data_table table td span.status.blocked,
.data_table table td span.status.canceled{
  background-color: #ddd;
  color: #888;
}
.data_table table td  a.client_name{
  white-space: break-spaces;
}
.data_table table a.action{
  text-decoration: none;
  display: inline-block;
  padding: 2px;
  background-color: #effaff;
  border-radius: 4px;
  border: 1px solid #efefef;
  transition: 0.3s;
  transform-origin: center center;
  font-size: 1.3rem;
  text-align: center;
  width: 25px;
  height: 25px;
  /* box-shadow: 0px 0px 3px rgba(0,0,0,0.1); */
}
.data_table table tr:hover a.action{
  background-color: #fff;
}
/* When other items need to be aligned to action buttons */
.data_table table span.align_to_action{
  position: relative;
  top: -6px;
}

.data_table table a.action.confirmed,
.data_table table a.action.completed{
  color: green;
}
.data_table table a.action.confirmed:hover,
.data_table table a.action.completed:hover{
  /*  box-shadow: 0px 0px 3px rgba(0,0,0,0.6); */
  background-color: green;
  color: #fff;
}

.data_table table a.action.completed{
  font-size: 1rem;top: -1px;
  position: relative;
}
.data_table table a.action.completed i{
  margin: 2px 0px 2px;
}

.data_table table a.action.canceled{
  color: rgb(255, 136, 0);
}
.data_table table a.action.canceled:hover{
  /*  box-shadow: 0px 0px 3px rgba(0,0,0,0.6); */
  background-color: rgb(255, 136, 0);;
  color: #fff;
}

.data_table table a.action.remove{
  color: red;
}
.data_table table a.action.remove:hover{
  background-color: red;
  color: #fff;
}


.data_table table a.action.reschedule{
  font-size: 1rem;
  color: black;
  top: -1px;
  position: relative;
}
.data_table table a.action.reschedule i{
  margin: 2px 0px 2px;
}
.data_table table a.action.reschedule:hover{
  /*  box-shadow: 0px 0px 3px rgba(0,0,0,0.6); */
  background-color: black;
  color: #fff;
}

.data_table table a.action.share{
  color: black;
}
.data_table table a.action.share:hover{
  /*  box-shadow: 0px 0px 3px rgba(0,0,0,0.6); */
  background-color: black;
  color: #fff;
}

.data_table table a.action.refresh{
  font-size: 1rem;
  color: black;top: -1px;
  position: relative;
}
.data_table table a.action.refresh i{
  margin: 2px 0px 2px;
}
.data_table table a.action.refresh:hover{
  /*  box-shadow: 0px 0px 3px rgba(0,0,0,0.6); */
  background-color: black;
  color: #fff;
}


.data_table table .icon_separator{
  display: inline-block;
  height: 25px;
  margin: 0px 10px;
  border-right: 1px solid #ccc;
}


/* Global Client Search */
.global_client_search{
  position: absolute;
  width: 100%;
  top: -50px;
}
.global_client_search .form_container{

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+100 */
  /*background: linear-gradient(135deg,  #7db9e8 0%,#1e5799 100%); */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.global_client_search .form_container #mtl_select_client{
  padding: 0px;
}
.global_client_search form{
  margin: 0px;
}
.global_client_search form #mtl_select_client .acf-input-wrap{
  overflow: visible;
}
.global_client_search form #mtl_select_client .acf-input-wrap input.tt-hint,
.global_client_search form #mtl_select_client .acf-input-wrap input.tt-input{
  background: #fff !important;
  font-size: 1.3rem;
  padding: 10px 20px;
  height: auto;
  border-color: #f9a231;
}
.global_client_search form #mtl_select_client .acf-input-wrap input.tt-hint:focus,
.global_client_search form #mtl_select_client .acf-input-wrap input.tt-input:focus{
  border-color: #0c90d0;
}

/* For Book Interview Date-Time Slot UI + Others */
/* Date-time Selections for Interviews */ 
.date_time_selection{
  margin: 0 0 0px;
  max-height: 435px;
  overflow-y: auto;
  border: 1px solid #ccd0d4;
  padding: 10px;
}

.date_time_block.template{
  display: none;
}
.date_time_selection  .date_time_block{
  padding: 10px;
  margin-bottom: 30px;
}
.date_time_selection .date_time_block:hover{ /* for the interview booking UI */
  background-color: #F5FAFD;
  box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
  border-radius: 5px;
}
.date_time_block .date_block{ /* Used for Applicant's Apply and Dashboard UIs */
  font-weight: bold;
  font-size: 1.2rem;
  color: #000;
  margin: 0 0 0px;
  border-bottom: 1px dotted #999;
  padding: 0 0 10px;
  position: relative;
}
.date_time_block .time_zone{  /* Used for Applicant's Apply UI */
  font-weight: normal;
  font-size: 0.7rem;
  color: #b30000;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.date_time_block .date_block > i{  /* Used for Applicant's Apply and Dashboard UIs */
  margin-bottom: -5px;
  font-size: 1.5rem;
}
.date_time_block .time_blocks{  /* Used for Applicant's Apply UI */
  padding: 0px;
}
.date_time_block a.time_block{  /* Used for Applicant's Apply UI */
  padding: 2px 10px;
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #084fa3;
  background-color: #084fa3;
  color: #fff;
  margin: 5px 2px;
  font-size: 0.8rem;
  text-decoration: none;
  position: relative;
}
.date_time_block a.time_block.selected,
.date_time_block a.time_block:hover{
  background-color: #55c1f3;
  color: #000;
}
.date_time_block a.time_block i{
  position: relative;
  margin-bottom: -1px;
  margin-right: 2px;
}


/* Interview Summary - Applicant Dashboard */
.interview_status.date_time_block {
  box-shadow: 0 0px 0px 0;
  border: 1px solid #ddd;
  margin-bottom: 5px;
}
.interview_status.date_time_block .date_block{
  margin: 0 0 20px;
}
.interview_status.date_time_block .date_block .meta_fields {
  border-top: 0px none;
  padding: 10px 0px;
}
.interview_status.date_time_block .date_block .meta_fields .meta_item .value{
  text-shadow: none;
  text-transform: uppercase;
}
.interview_status.date_time_block .interview_details{
  /* max-height: 150px;
  overflow-y: auto; */
}
.interview_status.date_time_block .interview_details .description .acf-notice{
  margin-top: 20px;
}
.interview_status.date_time_block .interview_details .description .acf-notice:last-child{
  margin-bottom: 0px;
}
.interview_status.date_time_block .interviewer_info{
  text-align: left;
}
.interview_status.date_time_block .interviewer_info .label{
  display: inline-block;
  min-width: 100px;
}
.interview_status.date_time_block .interviewer_info .value{
  color: #000;
}

.interview_status .ui_summary_box{
  box-shadow: 0 0px 0px 0;
  border: 1px solid #ddd;
  margin-bottom: 5px;
}
.interview_status .ui_summary_box.declined{
  background-color: #fafafa;
}
.interview_status .meta_fields{
  border-top: 0px none;
  padding: 15px 0px 0px'
}
.interview_status .interview_details .action_button{
  margin-top: 20px;
  position: relative;
}
.interview_status .interview_details .action_button:empty{
  margin-top: 0px;
}
.interview_status .interview_details .action_button a.decline{
  position: absolute;
  right: 0px;
  bottom: 0px;
}


/** Dashboard **/

.airtable_dashboard ul.dashboard_ul_block{
  list-style: none;
  margin-left: 0px;
}
.airtable_dashboard ul.dashboard_ul_block li{
  display: block;
  margin-bottom: 10px;;
}

.airtable_dashboard .dashboard_cards .flex-item {
  max-width: auto;
}
.airtable_dashboard .dashboard_cards .flex-item:first-child{
  padding-left: 0px;
}
.airtable_dashboard .dashboard_cards .flex-item:last-child{
  padding-right: 0px;
}

.airtable_dashboard .dashboard_cards .miso_card_container p.preview_heading{
  margin-top: -10px;
  color: #084fa3;
  font-size: 0.9rem;
}
/* Stats Cards */

.dashboard_cards.dash_stats .miso_card_container h4 .label{
  font-size: 1rem;
  display: block;
}
.dashboard_cards.dash_stats .miso_card_container h4,
.dashboard_cards.dash_stats .miso_card_container p.card_body{
  text-align: center;
}

.dashboard_cards.dash_stats .miso_card_container p.card_body .stats_focus_1{
  font-size: 4rem;
  font-weight: 700;
  display: block;
  text-align: center;
  padding: 15px 0 20px 0px;
  line-height: 1;
}
.dashboard_cards.dash_stats .miso_card_container p.card_body .stats_focus_2{
  font-size: 1.5rem;
  font-weight: 700;
  display: block;
  text-align: center;
  padding: 15px 0 20px 0px;
  line-height: 1;
}
.dashboard_cards.dash_stats .miso_card_container p.card_body span.description{
  color: white !important;
  text-align: center;
  font-size: 0.8rem;
  display: block;
}
.dashboard_cards.dash_stats .miso_card h4{
  color: #000;
}

.dashboard_cards.dash_stats .miso_card.green{
  background-color: green;
}
.dashboard_cards.dash_stats .miso_card.green h4{
  color: rgb(237, 255, 237);
}
.dashboard_cards.dash_stats .miso_card.green p.card_body .stats_focus_1,
.dashboard_cards.dash_stats .miso_card.green p.card_body .stats_focus_2{
  color:  rgb(237, 255, 237);
}

.dashboard_cards.dash_stats .miso_card.orange{
  background-color: orange;
}
.dashboard_cards.dash_stats .miso_card.orange h4{
  color: rgb(255, 248, 232);
}
.dashboard_cards.dash_stats .miso_card.orange p.card_body .stats_focus_1,
.dashboard_cards.dash_stats .miso_card.orange p.card_body .stats_focus_2{
  color:  rgb(255, 248, 232);
}

.dashboard_cards.dash_stats .miso_card.blue{
  background-color: #03a9f4;
}
.dashboard_cards.dash_stats .miso_card.blue h4{
  color: #daf4ff;
}
.dashboard_cards.dash_stats .miso_card.blue p.card_body .stats_focus_1,
.dashboard_cards.dash_stats .miso_card.blue p.card_body .stats_focus_2{
  color: #fff ;
}

.dashboard_cards.dash_stats .miso_card.purple{
  background-color: rgb(98, 78, 173)
}
.dashboard_cards.dash_stats .miso_card.purple h4{
  color: rgb(237, 232, 255)
}
.dashboard_cards.dash_stats .miso_card.purple p.card_body .stats_focus_1,
.dashboard_cards.dash_stats .miso_card.purple p.card_body .stats_focus_2{
  color: rgb(237, 232, 255);
}


.dashboard_cards.dash_stats .miso_card.grey{
  background-color: #666
}
.dashboard_cards.dash_stats .miso_card.grey h4{
  color: #ddd;
}
.dashboard_cards.dash_stats .miso_card.grey p.card_body .stats_focus_1,
.dashboard_cards.dash_stats .miso_card.grey p.card_body .stats_focus_2{
  color: #ddd;
}

.dashboard_cards.dash_stats .miso_card.black{
  background-color: #333
}
.dashboard_cards.dash_stats .miso_card.black h4{
  color: #ddd
}
.dashboard_cards.dash_stats .miso_card.black p.card_body .stats_focus_1,
.dashboard_cards.dash_stats .miso_card.black p.card_body .stats_focus_2{
  color: #ddd;
}




/** Availability Form */
.ui_summary_box{
  position: relative;
  padding: 30px;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 5px;
  margin-bottom: 30px;
}
.ui_summary_box.declined,
.ui_summary_box.expired,
.ui_summary_box.old{  /* for old interviews */
  background-color: #fafafa;
  box-shadow: none;
  border: 1px solid #ddd;
}
.ui_summary_box::after{
  display: block;
  position: absolute;
  padding: 3px 10px;
  right: 0px;
  top: 0px;
  font-size: 0.7rem;
  white-space: nowrap;
  width: auto;
  border-bottom-left-radius: 5px;
}
.ui_summary_box.declined::after,
.ui_summary_box.expired::after,
.ui_summary_box.old::after{
  content: 'Date Passed';
  background-color: #999;
  color: #fff;
}
.ui_summary_box.expired::after{
  content: 'Date Expired';
}
.ui_summary_box.declined::after{
  content: 'Declined';
}
.ui_summary_box.act_now::after{
  content: 'ACT NOW';
  background-color: #ffe5e5;
  color: #d31111;
}
.ui_summary_box.expired.date_time_block .date_block,
.ui_summary_box.old.date_time_block .date_block{
  color: #777;
}

.ui_summary_box .form_headings{
  font-size: 1.3rem;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.ui_summary_box .form_headings.bold{
  font-weight: bold;
}
.ui_summary_box .form_headings.sub_heading{
  font-size: 1rem;
}
.ui_summary_box .form_headings.meta{
  font-size: 0.85rem;
  margin-bottom: 20px;
}
.ui_summary_box .form_headings.last{
  margin-bottom: 20px;
}
.ui_summary_box .form_headings .value{
  color: #000;
}
.ui_summary_box .form_headings.client .value:before{
  content: 'Employer';
  display: block;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: #02499d;
}
.ui_summary_box .form_headings.interviewer .value:before{
  content: 'Interviewer';
  display: block;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: #02499d;
  font-weight: normal;
}
.ui_summary_box .meta_fields{
  border-top: 1px solid #efefef;
  padding: 20px 0px;
  position: relative;
}

h4.accordion_head .meta_fields .meta_item,
.ui_summary_box .meta_fields .meta_item{
  display: inline-block;
  margin: 4px 4px 0 0;
  border-radius: 5px;
  font-size: 11px;  /* fixed */
  position: relative;
  overflow: hidden;
}
.ui_summary_box .meta_fields.large .meta_item{
  font-size: 14px;  /* fixed */
}
h4.accordion_head .meta_fields .meta_item .label,
.ui_summary_box .meta_fields .meta_item .label{
  display: block;
  float: left;
  padding: 5px 6px 5px 10px;
  background-color: #eee;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  text-transform: uppercase;
  color: black;
  line-height: 1em;
  font-weight: normal !important;
}
h4.accordion_head.active .meta_fields .meta_item .label,
h4.accordion_head:hover .meta_fields .meta_item .label{
  background-color: #fff;
}
h4.accordion_head .meta_fields{
  display: inline-block;
  position: absolute;
  top: 50%; right: 50px;
  transform: translate(0, -50%);
}
h4.accordion_head .meta_fields .meta_item .value,
.ui_summary_box .meta_fields .meta_item .value{
  display: block;
  float: left;
  padding: 5px 10px 5px 6px;
  background-color: #eaf5ff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  color: black;
  text-shadow: 1px 1px #fff;
  line-height: 1em;
  font-weight: normal !important;
}
.meta_fields:before{
  content: attr(data-grouplabel);
  display: block;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: normal;
  color: #02499d;
  width: auto;
  margin-bottom: 10px;
}
.meta_fields .meta_item .value i{
  font-size: 0.8em;
}

.meta_fields .meta_item.pending .label{
  background-color: #fff5e3;
}
.meta_fields .meta_item.warning .value{
  background-color: #fff5e3;
  color: #ff7800 ;
}
.meta_fields .meta_item.pending .value{
  background-color: #ff7800;
  color: #fff5e3;
  text-shadow: 1px 1px #864e1c;
}
.meta_fields .meta_item.confirmed .label{
  background-color: #e2f7e2;
}
.meta_fields .meta_item.ok .value{
  background-color: #e2f7e2;
  color: green;
}
.meta_fields .meta_item.confirmed .value{
  background-color: green;
  color: #e2f7e2;
  text-shadow: 1px 1px #000;
}
.meta_fields .meta_item.completed .label{
  background-color: #ddd;
}
.meta_fields .meta_item.neutral .value{
  background-color: #fff;
  color: #999;
}
.meta_fields .meta_item.completed .value{
  background-color: #999;
  color: #fff;
  text-shadow: 1px 1px #000;
}
.meta_fields .meta_item.reschedule .label{
  background-color: #ece8ff;
}
.meta_fields .meta_item.reschedule .value{
  background-color: #654cc4;
  color: #ece8ff;
  text-shadow: 1px 1px #18132b;
}

.meta_fields .meta_item.declined .label,
.meta_fields .meta_item.canceled .label{
  background-color: #ffe0e0;
}
.meta_fields .meta_item.alert .value{
  background-color: #ffe0e0;
  color: #a21f1f;
}
.meta_fields .meta_item.alert{
  padding: 0px;
}
.meta_fields .meta_item.declined .value,
.meta_fields .meta_item.canceled .value{
  background-color: red; /* #a21f1f; */
  color: #ffe0e0;
  text-shadow: 1px 1px #c40909;
}
.meta_fields .meta_item.time_zone .value{
  color: #b30000;
  font-weight: bold !important;
}

h4.accordion_head .meta_fields .meta_item.pending .value{
  background-color: orange;
}
h4.accordion_head .meta_fields .meta_item.reschedule .value{
  background-color: #654cc4;
  color: #fff;
  text-shadow: 1px 1px #000;
}
h4.accordion_head .meta_fields .meta_item.confirmed .value{
  background-color: green;
  color: #fff;
  text-shadow: 1px 1px #000;
}
h4.accordion_head .meta_fields .meta_item.completed .value{
  background-color: #ddd;
  color: green;
  text-shadow: 1px 1px #fff;
}
h4.accordion_head .meta_fields .meta_item.canceled .value{
  background-color: #ddd;
  color: #555;
  text-shadow: 1px 1px #fff;
}


/* Meta Fields for Dahboard Summry Box */
.accordion_panel .meta_fields.interviewer_availability{
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #ddd;
}
.accordion_panel .meta_fields.interviewer_availability .availability_details,
.ui_summary_box .meta_fields.interviewer_availability .availability_details{
  font-size: 11px;
  margin-bottom: 30px;
}
.accordion_panel .meta_fields.interviewer_availability .availability_details .entry,
.ui_summary_box .meta_fields.interviewer_availability .availability_details .entry{
  margin-bottom: 2px;
  overflow: hidden;
  float: left;
  width: 50%;
}

@media screen and (max-width: 754px) {
  .accordion_panel .meta_fields.interviewer_availability .availability_details,
  .ui_summary_box .meta_fields.interviewer_availability .availability_details{
    display: block;
  }
  .accordion_panel .meta_fields.interviewer_availability .availability_details .entry,
  .ui_summary_box .meta_fields.interviewer_availability .availability_details .entry{
    width: 100%;
  }
}
.accordion_panel .meta_fields.interviewer_availability .availability_details .day,
.ui_summary_box .meta_fields.interviewer_availability .availability_details .day{
  text-transform: uppercase;
  font-weight: bold;
  float: left;
  min-width: 100px;
}
.accordion_panel .meta_fields.interviewer_availability .availability_details .slots,
.ui_summary_box .meta_fields.interviewer_availability .availability_details .slots{
  margin-left: 100px;
}
.accordion_panel .meta_fields.interviewer_availability .availability_details .slot,
.ui_summary_box .meta_fields.interviewer_availability .availability_details .slot{
    display: inline-block;
    padding: 2px 10px;
    background-color: #eaf5ff;
    border-radius: 5px;
    line-height: 1rem;
    margin-right: 2px;
}
.ui_summary_box .meta_fields.interviewer_days_off .availability_details{
  font-size: 11px;
  margin-bottom: 30px;
}
.ui_summary_box .meta_fields.interviewer_days_off .availability_details .day_off{
  display: inline-block;
  padding: 2px 10px;
  background-color: #eaf5ff;
  border-radius: 5px;
  line-height: 1rem;
  margin-right: 2px;
}

/* the availability form fields */
#new-interview-availability .availability_details{
  font-size: 0.85rem;
  max-height: 200px;
  overflow-y: auto;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
}


/** View Form Links **/
.share_links .share_links_block {
  margin-bottom: 20px;
}
.share_links a.interview_name{
  font-weight: bold;
  text-transform: uppercase;
}
.data_panel{
  background-color: #fff;
  margin: 30px 0px 30px;
  padding: 20px;
  margin-bottom: 30px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.data_panel .heading,
.share_links .share_links_block div.interviews .heading{
  font-size: 1rem;
  font-weight: bold;
  color: #333;
}
.data_panel .alert,
.share_links .share_links_block div.interviews .alert{
  margin: 20px 0 0 0;
}

.inner_admin_box {
  position: relative;
  margin-top: 0px;
  padding-top: 45px;
  background: #f9fcfd;
  border: 2px solid #b7d1e1; 
}
.ui_summary_box .inner_admin_box {
  margin: 0px;
}
.inner_admin_box .admin_label{
  background-color: #e3f4ff;
  color: #588099;
  position: relative;
  position: absolute;
  padding: 10px 10px;
  right: 0px;
  top: 0px;
  font-size: 0.8rem;
  white-space: nowrap;
  width: 100%;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  text-align: center;
  font-weight: bold;
  border-bottom: 2px solid #b7d1e1;
}
.inner_admin_box .grid-parent{
  grid-template-columns: [body] 80% [action_links] 20%;
}
.inner_admin_box .share_urls{
  grid-area: body;
  margin-top: 20px;
}
.inner_admin_box .action_items{
  grid-area: action_links;
  padding: 0.5rem 0 0.5rem 1rem;
}
.inner_admin_box .action_items .btn-normal{
  width: 100%;
  margin-bottom: 10px;
  text-align: center;
}

.ui_summary_box .inner_admin_box .recent_invterview_invites .actions_container{
    padding: 8px 10px 6px;
    border-radius: 5px;
    background-color: #084fa3;
    text-align: right;
}
table.checkbox_list a.action,
.ui_summary_box .inner_admin_box .recent_invterview_invites .actions_container a.action{
  text-decoration: none;
  display: inline-block;
  padding: 1px 2px 2px 1px;
  background-color: #effaff;
  border-radius: 4px;
  border: 1px solid #efefef;
  transition: 0.3s;
  transform-origin: center center;
  font-size: 1.3rem;
  text-align: center;
  width: 25px;
  height: 25px;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
.ui_summary_box .inner_admin_box .recent_invterview_invites .actions_container a.action.resend {
  color: white;
  background: green;
  border-color: rgb(7, 105, 7);
}
.ui_summary_box .inner_admin_box .recent_invterview_invites .actions_container a.action.deactivate {
  color: white;
  background: red;
  border-color: rgb(141, 15, 15);
}
.ui_summary_box .inner_admin_box .recent_invterview_invites .actions_container a.action.disabled {
  color: #999;
  cursor: not-allowed;
  background: #dfdfdf;
  border: 1px solid #999;
}
table.checkbox_list a.action{
  opacity: 1;
  font-size: 0.8rem;
  width: 20px;
  height: 20px;
  margin: 0 0 0 4px;
  vertical-align: inherit;
  box-shadow: none;
}
table.checkbox_list a.action.reactivate {
  color: white !important;
  background: green !important;
  border-color: green !important;
}
table.checkbox_list a.action.reactivate:hover{
  box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
table.checkbox_list a.action i {
  vertical-align: text-top;
  position: relative;
  top: -1px;
}

.ui_summary_box .inner_admin_box .recent_invterview_invites .checkbox_list tbody tr:not(.inactive){
  cursor: pointer;
}
.ui_summary_box .inner_admin_box .recent_invterview_invites .checkbox_list tbody tr.inactive{
  background-color: #fbfbfb;
  color: #999;
}
.ui_summary_box .inner_admin_box .recent_invterview_invites .checkbox_list tbody tr.inactive .active,
.ui_summary_box .inner_admin_box .recent_invterview_invites .checkbox_list tbody tr.inactive .status,
.ui_summary_box .inner_admin_box .recent_invterview_invites .checkbox_list tbody tr.inactive .response{
  opacity: 0.5;
}
.ui_summary_box .inner_admin_box .recent_invterview_invites .checkbox_list th.check{
  line-height: 1;
  font-size: 1.1rem;
}
.ui_summary_box .inner_admin_box .recent_invterview_invites .checkbox_list a.checker{
  display: inline-block;
  text-decoration: none;
}
/* Applicant Invite form styles */
.acf-field-67a3adaa3586f .miso_email_invite_resend_emails{
  font-size: 0.8rem;
  color: #000;
  font-weight: 600;
  padding: 10px 20px;
  border: 1px solid #8f8f8f;
  border-radius: 4px;
}

@media screen and (max-width: 754px) {
  .inner_admin_box .grid-parent{
    display: block;
  }
}




/* Email Invites for Applicants */
.send_email_invites_container{
  display: none;
  /*
  background-color: #f9f9f9;
  padding: 30px;
  margin: 0 0 30px;
  border: 1px solid #ddd;
  border-radius: 5px;
  */
  position: relative;
}
.send_email_invites_container a.close{
  position: absolute;
  right: 30px;
  top: 30px;
}
.send_email_invites_container a.close i{
  font-size: 30px;
}
.send_email_invites_container a.close i.normal{
  display: inline-block;
}
.send_email_invites_container a.close i.hover{
  display: none;
}
.send_email_invites_container a.close:hover i.normal{
  display: none;
}
.send_email_invites_container a.close:hover i.hover{
  display: inline-block;
}



















/** Dialog **/
#dialog-general div.body{
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  padding: 20px;
  overflow-y: auto;
}
#dialog-general .ui-dialog-titlebar{
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.ui-widget-overlay{
  opacity: 0.7 !important;
}
.ui-dialog-buttonset button{
  border: 0px none;
  border-radius: 5px;
  transition: 0.3s;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 0.85rem !important;
}
.ui-dialog-buttonset button.ok{
  background: green;
  color: #fff;
}
.ui-dialog-buttonset button.warning{
  background: red;
  color: #fff;
}
.ui-dialog-buttonset button:focus,
.ui-dialog-buttonset button:hover{
  border: 0px none;
}
.ui-dialog-buttonset button:hover{
  border: 0px none;
  border-radius: 20px;
}

/** Loading Spinner **/

/** Ref: https://loading.io/css/ **/
.lds-dual-ring {
  display: inline-block;
  position: relative;
  width: 58px;
  height: 58px;
  left: 50%;
  transform: translate(-50%, 0%);
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 34px;
  height: 34px;
  margin: 6px;
  border-radius: 50%;
  border: 6px solid #0957a7;
  border-color: #0957a7 transparent #f9a231 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/** ============== ACF FORM ========================= **/

input, select, textarea{
  border: 1px solid #8f8f8f;
}
input[readonly],
input[readonly]:focus{
  background-color: #fafafa !important;
  border: 1px solid #dfdfdf;
}
.prominence input{
  font-weight: bold;
}

.strong_label > .acf-label label{
  font-weight: bold;
  font-size: 1.5rem;
}

.acf-notice i[class^=iconoir]{
  font-size: 1.2rem;
  margin: 0px 5px -4px 0px;
}
.acf-notice.-info{
  background: #eee;
	border-color: #999;
  color: #000;
}

/* Field Group Containers */
.acf-form tr.acf-row{
    border-bottom: 1px solid #aaa;
}
/* Instructions */
.acf-form p.description{
    font-size: 0.8rem;
    color: #0957a7;
}
.acf-form p.description blockquote, .acf-form p.description br + code, div > code{
  margin: 0px;
  padding: 5px 10px;
  border-radius: 4px;
  display: block;
  line-height: 1.5;
}

.acf-form p.acf_in_line_buttons{
  margin: 10px 0 0 20px;
}

.acf-form .acf-field.custom_msg .acf-label{
  display: none;
}
.acf-form .acf-field.custom_msg .acf-input textarea, 
.acf-form .acf-field.custom_msg .acf-input input{
  display: none;
}

.acf-form .acf-field.readonly textarea,
.acf-form .acf-field.readonly input{
  background-color: #fafafa;
  border: 1px solid #dfdfdf;
}

.acf-table > tbody > tr > th, 
.acf-table > tbody > tr > td, 
.acf-table > thead > tr > th, 
.acf-table > thead > tr > td{
    background-color: transparent;
}
.acf-repeater .acf-row-handle{
  position: static;
}
/* Date Picker - Only showing hours */
form#new-interview-availability .acf-ui-datepicker .ui-datepicker-header,
form#new-interview-availability .acf-ui-datepicker .ui-datepicker-calendar,
form#new-interview-availability .acf-ui-datepicker .ui-datepicker-current{
    display: none;
}

form#new-interview-availability .acf-checkbox-list{
  columns: 3;
}

/** For showing the Typeahead dropdown */
form#client-and-date-range  .acf-field-656a38f035f45 .acf-input-wrap{
  overflow: visible;
}

/* Columns for ACF Fields using Groups and fields */
.miso_acf_column_parent .acf-fields{
  display: flex;
}
.miso_acf_column_parent .acf-fields .miso_acf_column{
  display: block;
  overflow: hidden;
  flex-basis: 100%;
  flex-grow: 1;
  flex-shrink: 1;
}




/** ============== ALERTS ========================= **/
*,
 :after,
 :before {
    box-sizing: border-box;
}


.alert {
    padding: 15px 20px 15px 70px;
    border-radius: 5px;
    display: none;
    margin-bottom: 30px;
}
.alert.visible {
  display: block;
}

.alert .alert-icon {
    position: absolute;
    left: -45px;
    top: 50%;
    transform: translateY(-57%);
    font-size: 1.5rem;
}


/* Styling the info alert */

.alert .alert-container {
  position: relative;
  margin: 0 auto;
  color: white;
}


/* Creating the close icon */

.alert .close-icon {
  float: right;
  color: #000;
  margin-top: 0;
  margin-left: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.alert .close-icon:before,
.alert .close-icon:after {
  content: '';
  position: absolute;
  top: 8px;
  width: 15px;
  height: 2px;
  left: 0;
}

.alert .close-icon:before {
  background-color: #fff;
  transform: rotate(-45deg);
}

.alert .close-icon:after {
  background-color: #fff;
  transform: rotate(45deg);
}

.alert .body .heading{
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Styling the standard alert */

.alert.alert-custom {
  background-color: #66615b;
  border: 1px solid #66615b;
}
.alert.alert-custom .alert-icon i.fa{
    color: #fff;
}
.alert.alert-custom .alert-icon .fa-warning,
.alert.alert-custom .alert-icon .fa-check{
  display: none;
}

.alert.alert-custom .alert-container {
  position: relative;
  margin: 0 auto;
}

.alert.alert-custom .close-icon {
  float: right;
  color: #000;
  margin-top: 0;
  margin-left: 0;
  width: 21px;
  height: 21px;
  position: relative;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  text-indent: -999px;
  overflow: hidden;
  white-space: nowrap;
}

.alert.alert-custom .close-icon:before,
.alert.alert-custom .close-icon:after {
  content: '';
  position: absolute;
  top: 8px;
  width: 15px;
  height: 2px;
  left: 0;
}

.alert.alert-custom .close-icon:before {
  background-color: #fff;
  transform: rotate(-45deg);
}

.alert.alert-custom .close-icon:after {
  background-color: #fff;
  transform: rotate(45deg);
}

/** Alrt Info **/
.alert.alert-info {
  background-color: #0b5bb1;
  border: 1px solid #0b5bb1;
  color: white;
}
.alert.alert-info .alert-icon i.fa{
    color: #fff;
}
.alert.alert-info .alert-icon .fa-warning,
.alert.alert-info .alert-icon .fa-check{
  display: none;
}


.alert.alert-info .alert-container {
  position: relative;
  margin: 0 auto;
}

.alert.alert-info .close-icon {
  float: right;
  color: #000;
  margin-top: 0;
  margin-left: 0;
  width: 21px;
  height: 21px;
  position: relative;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  text-indent: -999px;
  overflow: hidden;
  white-space: nowrap;
}

.alert.alert-info .close-icon:before,
.alert.alert-info .close-icon:after {
  content: '';
  position: absolute;
  top: 8px;
  width: 15px;
  height: 2px;
  left: 0;
}

.alert.alert-info .close-icon:before {
  background-color: #fff;
  transform: rotate(-45deg);
}

.alert.alert-info .close-icon:after {
  background-color: #fff;
  transform: rotate(45deg);
}


/* Styling the success alert */

.alert.alert-success {
  background-color: #679334;
  border: 1px solid #679334;
  color: white;
}
.alert.alert-success .alert-icon i.fa{
    color: #fff;
}
.alert.alert-success .alert-icon .fa-info-circle,
.alert.alert-success .alert-icon .fa-check{
  display: none;
}

.alert.alert-success .alert-container {
  position: relative;
  margin: 0 auto;
}

.alert.alert-success .close-icon {
  float: right;
  color: #000;
  margin-top: 0;
  margin-left: 0;
  width: 21px;
  height: 21px;
  position: relative;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  text-indent: -999px;
  overflow: hidden;
  white-space: nowrap;
}

.alert.alert-success .close-icon:before,
.alert.alert-success .close-icon:after {
  content: '';
  position: absolute;
  top: 8px;
  width: 15px;
  height: 2px;
  left: 0;
}

.alert.alert-success .close-icon:before {
  background-color: #fff;
  transform: rotate(-45deg);
}

.alert.alert-success .close-icon:after {
  background-color: #fff;
  transform: rotate(45deg);
}


/* Styling the warning alert */

.alert.alert-warning {
  background-color: #f87d09;
  border: 1px solid #f87d09;
  color: white;
}

.alert.alert-warning .alert-container {
  position: relative;
  margin: 0 auto;
}
.alert.alert-warning .alert-icon i.fa{
    color: #fff;
}
.alert.alert-warning .alert-icon .fa-info-circle,
.alert.alert-warning .alert-icon .fa-check{
  display: none;
}

.alert.alert-warning .close-icon {
  float: right;
  color: #000;
  margin-top: 0;
  margin-left: 0;
  width: 21px;
  height: 21px;
  position: relative;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  text-indent: -999px;
  overflow: hidden;
  white-space: nowrap;
}

.alert.alert-warning .close-icon:before,
.alert.alert-warning .close-icon:after {
  content: '';
  position: absolute;
  top: 8px;
  width: 15px;
  height: 2px;
  left: 0;
}

.alert.alert-warning .close-icon:before {
  background-color: #fff;
  transform: rotate(-45deg);
}

.alert.alert-warning .close-icon:after {
  background-color: #fff;
  transform: rotate(45deg);
}


/* Styling the danger alert */

.alert.alert-danger {
  background-color: #e91e1e;
  border: 1px solid #e91e1e;
  color: white;
}

.alert.alert-danger .alert-container {
  position: relative;
  margin: 0 auto;
}
.alert.alert-danger .alert-icon i.fa{
    color: #fff;
}
.alert.alert-danger .alert-icon .fa-info-circle,
.alert.alert-danger .alert-icon .fa-check{
  display: none;
}

.alert.alert-danger .close-icon {
  float: right;
  color: #000;
  margin-top: 0;
  margin-left: 0;
  width: 21px;
  height: 21px;
  position: relative;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  text-indent: -999px;
  overflow: hidden;
  white-space: nowrap;
}

.alert.alert-danger .close-icon:before,
.alert.alert-danger .close-icon:after {
  content: '';
  position: absolute;
  top: 8px;
  width: 20px;
  height: 2px;
  left: 0;
}

.alert.alert-danger .close-icon:before {
  background-color: #fff;
  transform: rotate(-45deg);
}

.alert.alert-danger .close-icon:after {
  background-color: #fff;
  transform: rotate(45deg);
}

.tt-menu,
.gist {
  text-align: left;
}



/** ============== Type Ahead ========================= **/
.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  /*
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
  */
}
.look_up_clients input[type=text]{
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #fff !important;
}
.look_up_clients form{
  margin-bottom: 0px;
}
.look_up_clients .acf-form-submit{
  display: none;
}
.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}
.twitter-typeahead{
    /* max-width: 90%;
    width: 422px; */
    display: block !important;
}
input[type=text].typeahead{
  width: 100%;
}
.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {
  width: 100%;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

/* Make the lsit scrollable */
#bloodhound .tt-menu {
  max-height: 250px;
  overflow-y: auto;
}

.tt-suggestion {
  padding: 10px 20px;
  font-size: 18px;
  line-height: 24px;
  background-color: #fff;
}

.tt-suggestion.tt-selectable {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.tt-suggestion.tt-selectable:last-child {
  border-bottom: 0px none;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

/* Object type specific styles */
.tt-suggestion .tt-suggestion-type{
  font-size: 0.65rem;
  text-transform: uppercase;
  display: inline-block;
  padding: 0px 10px;
  border-radius: 5px;
  line-height: 2;
  margin-right: 10px;
}
.tt-suggestion-Applicant{
  background-color: rgb(252, 255, 252);
}
.tt-suggestion-Applicant .tt-suggestion-type{
  color: rgb(252, 255, 252);
  background-color: green;
}

.tt-suggestion-Client{
  background-color: rgb(255, 254, 251);
}
.tt-suggestion-Client .tt-suggestion-type{
  color: rgb(255, 254, 251);
  background-color: orange;
}
.tt-suggestion-Interviewer{
  background-color: rgb(255, 252, 252);
}
.tt-suggestion-Interviewer .tt-suggestion-type{
  color: rgb(255, 252, 252);
  background-color: brown;
}

/** ============== Cards ========================= **/

.equal_box-flex-parent {
  display: flex;
  
}
.flex-parent {
  display: flex;
  
}

.flex-item {
  padding: .5em;
  flex: 1;
}
.flex-item-banner-box{ /* for one columns banner style box */
  padding: .5em 0px;
  flex: 1;
}

.flex-item.no-shrink {
  flex-shrink: 0;
}

.miso_card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  background-color: #fff;
  padding: 20px 20px;
  border-radius: 5px;
  position: relative;
}
.flex-item .miso_card {
  height: 100%;
}
.no-flex-card .miso_card {
  margin-bottom: 10px;
}

.miso_card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  background-color: #fff;
}

.miso_card_container {
  padding: 2px 16px;
}
.miso_card .card_header{
  font-size: 1rem;
}
.miso_card .card_body{
  font-size: 0.8rem;
}


/** Accordion **/
.pmiso_accordion{
  margin-bottom: 30px;
}
.pmiso_accordion .accordion_head {
  background-color: #fff;
  cursor: pointer;
  padding: 10px 18px;
  width: 100%;
  border: none;
  border-bottom: 1px solid #efefef;
  border-top: 1px solid #efefef;
  text-align: left;
  outline: none;
  transition: 0.3s;
  margin-bottom: 0px;
  margin-top: 10px;
  position: relative;
  font-size: 1rem;
}
.pmiso_accordion .accordion_head.Inactive{
  background-color: rgb(245, 245, 245);
  color: #ccc;
}
.pmiso_accordion .accordion_head.Inactive:after{
  content: '(Inactive)';
}
.pmiso_accordion .accordion_head .dashicons{
  position: relative;
  top: 5px;
}
/* .pmiso_accordion .accordion_head::after { */
.pmiso_accordion .accordion_head i {
  content: '\002B';
  color: #777;
  position: absolute;
  top: 50%; right: 20px;
  transform: translate(0%, -50%);
  font-size: 2rem;
  transform-origin: 90% 40%;
  transition: 0.3s;
}
.pmiso_accordion .accordion_head.active, 
.pmiso_accordion .accordion_head:hover {
  background-color: #444; 
  color: #fff; 
}
.pmiso_accordion .accordion_head:hover i,
.pmiso_accordion .accordion_head.active i {
  transform: rotate(90deg);
  right: 30px;
  color: #fff; 
}

.pmiso_accordion .accordion_panel {
  padding: 20px;
  display: none;
  background-color: white;
  border: 1px solid #ddd;
}
/*
<div class="pmiso_accordion">
        <h4 class="accordion_head">Section 1</h4>
        <div class="accordion_panel">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>

        <h4 class="accordion_head">Section 2</h4>
        <div class="accordion_panel">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>

        <h4 class="accordion_head">Section 3</h4>
        <div class="accordion_panel">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
  */



/* jQuery Tooltip */
.ui-tooltip, .arrow:after {
  background: rgba(0,0,0,0.9);
  border: 0px none !important;
}
.ui-tooltip {
  padding: 10px 20px;
  color: white;
  border-radius: 5px;
  font-family: inherit;
  font-weight: normal;
  font-size: 0.8rem;
  box-shadow: 0 0 5px black;
}
.arrow {
  width: 30px;
  height: 10px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -16px;
  bottom: -16px;
}
.arrow.top {
  top: -16px;
  bottom: auto;
}
.arrow.left {
  left: 20%;
}
.arrow:after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
.arrow.top:after {
  bottom: -20px;
  top: auto;
}


/** =================== Date Range Picler Customizations ===================== */
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td{
  min-width: 26px;
  width: 26px;
  line-height: 12px;
  font-size: 12px;
  padding: unset;
}
.daterangepicker td.disabled, .daterangepicker option.disabled{
  color: #efefef;
}
.daterangepicker td.today, .daterangepicker option.today{
  background-color: rgb(230, 230, 230);
  color: rgb(25, 170, 25);;
}