.swc-bd-wrapper{margin-top: 0; margin-right: 0;}
.sync-bd-header{display: flex; align-items: center; background: #0a2346; height: 96px; padding: 0 32px; margin-left: -22px; margin-bottom: 20px;}
.sync-bd-name-header{color: #fff; margin-left: 15px; font-size: 20px; font-weight: bold; position: relative; top: 10px;}
.bd-general-configuration-wrap, .bd-create-member-settings-wrap { background-color: #fff; padding: 30px; border: 1px solid #c3c4c7; top: 0px; position: relative; }
.sync-bd-nav.nav-tab-wrapper .nav-tab-active { background-color: #fff; border-bottom: 1px solid #ffffff; position: relative; z-index: 1;}
.bd-form-input-wrap{margin-bottom: 20px;} 
.bd-form-input-wrap .bd-label-wrap{margin-bottom: 10px;}
.bd-form-input-wrap .bd-label-wrap label{color: #000; font-size: 14px; font-weight: 600;}
.swc-bd-wrapper .sync-bd-nav{border-bottom: none !important;}

.bd-two-coloumn-wrap { display: flex; gap: 20px; margin-right: 20px; }
.bd-general-configuration-wrap, .bd-create-member-settings-wrap{width: 60%;}
.bd-video-container { width: 40%; background: #fff; border: 1px solid #c3c4c7; display: flex; }
.bd-video-container iframe { width: 100%; height: 100%; }

.sync-bd-icon {background: url(../images/brilliant-directories-logo.svg) no-repeat center center;  width: 126px; height: 49px; background-size: 100%;}

.api-error-message{ font-size: 14px; color: rgb(236, 15, 15); line-height: 1.25em;}
.member-error-message{ font-size: 14px; color: rgb(236, 15, 15); line-height: 1.5;}
.bd-required-field{color: #ff0000;}
#create-user-form th{width: 300px;}

/* Tooltip icon styles */ 
.swbd-tooltip-icon { cursor: pointer; position: relative; display: inline-block; width: 15px; height: 15px; background: url('../images/question-mark.png') no-repeat center center; background-size: 12px; margin-right: 0px; top: 3px; float: right;} 
.swbd-tooltip-text { visibility: hidden; background-color: #333; color: #fff; text-align: center; font-size: 14px; line-height: 1.5; padding: 10px; border-radius: 5px; position: absolute; z-index: 10; width: 310px; bottom: 135%; left: 50%; margin-left: -155px; opacity: 0; transition: opacity 0.3s, visibility 0s 0.3s; word-break: break-word; font-weight: 400; }
.swbd-tooltip-text::after { content: ""; position: absolute; top: 100%; left: 45%; border-width: 7px; border-style: solid; border-color: #333 transparent transparent transparent; }
.swbd-tooltip-icon:hover .swbd-tooltip-text { visibility: visible; opacity: 1; transition-delay: 0s; }
.sync-button-wrapper{display: flex; align-items: center; gap: 10px;}
@keyframes swcspin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.sync-spin-icon, #bd-refresh-btn.loading  { display: inline-block; animation: swcspin 2s linear infinite; }
#bd-refresh-btn { display: inline-block; cursor: pointer;}
  
/* plugin enable/disable switch styles */ 
.bd_yes_or_no_switch .bd_container_checkbox input { display: none !important; }
.bd_yes_or_no_switch .bd_container_checkbox label { display: inline-block; width: 70px; height: 32px; background: #455a64; border-radius: 30px; position: relative; cursor: pointer; }
.bd_yes_or_no_switch .bd_container_checkbox label::before { content: "" !important; position: absolute; width: 28px; height: 28px; background: #fff !important; border-radius: 50% !important; top: 2px; left: 4px; transition: .3s !important; box-shadow: -3px 0 3px rgba(0, 0, 0, .1); }
.bd_yes_or_no_switch .bd_container_checkbox label::after { content: "OFF"; position: absolute; color: #fff; font-size: 14px; font-weight: 600; width: 100%; left: -3px; top: 7px; text-align: right; padding: 0 6px; box-sizing: border-box; }
.bd_yes_or_no_switch .bd_container_checkbox input:checked ~ label { background: #2196F3; transition: .3s; }
.bd_yes_or_no_switch .bd_container_checkbox input:checked ~ label:before { transform: translate(36px, 0); transition: .3s; }
.bd_yes_or_no_switch .bd_container_checkbox input:checked ~ label:after { content: "ON"; text-align: left; left: 4px; top: 7px; }

/* import status styles */ 
.bd-form-section{padding-bottom: 40px;margin: 0;}
.swc-bd-form-status-wrapper{display: flex;width: 100%; gap: 15px;}
.swcbd-import-status-wrapper{width: 35%;}
.swcbd-import-status-wrapper .bd-importstatus-title{margin: 0 0 10px;}
#bd-import-status{background-color: #f0f0f1; border: 1px solid #00000026;}
.bd-importuser-status{border-bottom: 1px solid #00000026; padding: 5px; margin: 0;}

.api-btn-wrapper{display: flex ; align-items: center; gap: 10px;}
#toplevel_page_brilliant-directories-sync .wp-menu-name { padding-right: 0 !important; left: -6px; position: relative; }
#toplevel_page_brilliant-directories-sync .wp-first-item{display: none;}

.settings_error_wrap { display: flex ; flex-direction: column; }
.custom-error-wrap, .bd-error-msg-wrap{ max-width: 600px; background: #fff; border: 1px solid #c3c4c7; border-left-width: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, .04); margin: 5px 0px 10px 0px; padding: 1px 0px; box-sizing: border-box; }
.custom-error-wrap.success, .bd-error-msg-wrap.bd-success { border-left-color: #00a32a; }
.custom-error-wrap.warning, .bd-error-msg-wrap.bd-warning { border-left-color: #dba617; }
.custom-error-wrap.error, .bd-error-msg-wrap.bd-error { border-left-color: #d63638; }
.custom-error-wrap p, .bd-error-msg-text { margin: .5em; padding: 2px; font-weight: 600; font-size: 13px; }

.bd-form-container{width: 60%; padding-left: 10px;}
.bd-form-container form input[type=email], .bd-form-container form input[type=text], .bd-form-container form input[type=number], .bd-form-container form input[type=password], .bd-form-container form input[type=url]{width: 100%;max-width:100%;}
.bd-form-container form select{width: 100%;max-width:100%;}
.bd-form-container form p.description { margin: 5px 0 5px; color: #646970; font-size: .95em; }
#wc_one_click_sync, #brildirwcsync_member_mapping { background: transparent; color: #2271b1; border: 1px solid #2271b1;}
#wc_one_click_sync:hover, #brildirwcsync_member_mapping:hover { background: rgba(34, 113, 177, 0.1); }

.bd-title-with-syncdate{display: flex ; align-items: center; justify-content: space-between;}
.sync-bd-title-wrap h2 { margin:0px; background: #f0f0f1; padding: 10px; }
.sync-bd-title-wrap {background: #f0f0f1; margin: 0 0 15px;}
.bd-title-with-syncdate .bd-last-sync{padding-right: 10px; font-weight: 500;vertical-align: middle;}
.bd-title-with-syncdate .bd-last-sync-date{font-weight: normal;}
.bd-sync-icon-wrap{display: flex ; align-items: center; gap: 5px;}
.bd-optional-text{font-weight: normal;}

.brildirwcsync-mapping-row{margin-top: 10px; display: flex; gap: 10px; align-items: center;}
.brildirwcsync-del-mapping-row{color: rgb(214, 54, 56); cursor: pointer;}
.brildirwcsync-mapping-row .select2-container--default .select2-selection--single .select2-selection__clear { color: rgb(214, 54, 56); line-height: 25px; padding: 0 5px; margin: 0px 5px; }
input.brildirwcsync-mapping-planid{width: 100px !important; min-height: 28px; height: 28px;}

#brildirwcsync-mapping-container{margin-bottom: 10px;}

@media only screen and (max-width: 1024px){
  .bd-general-configuration-wrap, .bd-create-member-settings-wrap{padding: 10px;}
  .bd-two-coloumn-wrap{margin-right: 10px;width: 99%;}
  .bd-two-coloumn-wrap{flex-direction: column; width: 100%; max-width: 100%;}
  .fpad-lg {padding: 15px;}
  .bd-video-container{width: 99%;}
  .bd-video-container iframe{min-height: 600px;}
  .bd-create-member-settings-wrap, .bd-general-configuration-wrap{width:96%;}
}

@media only screen and (max-width:767px){
  .bd-two-coloumn-wrap{flex-direction: column; width: 100%; max-width: 100%;}
  .bd-general-configuration-wrap, .bd-create-member-settings-wrap{width: 92%;}
  .bd-form-container{width: 100%;padding-left: 0px;}
  .bd-input-wrap span{font-size: 12px;}
  .bd-title-with-syncdate{justify-content: space-around;}
  .sync-bd-title-wrap h2{font-size: 1.1em;}
  .bd-video-container{width: 99%;}
  .bd-video-container iframe{min-height: 590px;}
  #wpbody-content{padding-bottom: 60px;}
  .bd-create-member-settings-wrap .bd-member-form-sec{margin: 10px 5px 5px;}
  .swc-bd-form-status-wrapper{display: flex; flex-direction: column;}
  .swcbd-import-status-wrapper { width: 100%; }
  .swbd-tooltip-text{width: 210px; margin-left: -110px;}
  .swbd-tooltip-text, .swbd-tooltip-text::after{left: unset; right: 0;}
  .api-error-message span.dashicons.dashicons-no-alt, .bd-input-wrap .sync-spin-icon, .bd-input-wrap .dashicons-saved{font-size: 20px;}
}